@use 'sass-mq/mq';
@use 'gel-sass-tools/sass-tools';

///*------------------------------------*\
//    # GEL TYPOGRAPHY - SETTINGS
//\*------------------------------------*/

// The following variables are used to configure the GEL Typography component.
// These variables should not be modified or adjusted directly; you should
// predefine the variables in your own project, to overide these default settings.

/// General configuration
//
// The default namespace applied to all typography classes output is inherits
// from the default gel-namespace: `gel-`.
//
// @type String
// @link http://bit.ly/1Z6hPfd
//
$gel-type-namespace: sass-tools.$gel-namespace !default;

// The classname used to signify if the device needs to display the no-touch group. This
// class needs to be applied to high level elemet such as `body` or `html`
//
// @type String
//
$gel-type-touch-class: 'no-touch' !default;

// Which typography group contains the base or core typography styles
//
// @type String
//
$gel-type-base-group: 'group-a';

// Which typography group contains our non-touch typography styles
//
// @type String
//
$gel-type-no-touch-group: 'group-d';

/// Output configuration
//
// By default the typography component has no output and just exposes a
// series of Sass mixins and tools. Enabling this option will output
// a series of typography classes to be used within your markup.
//
// @type Bool
//
$gel-type-enable--markup-output: false !default;

// The BBCs global header and footer, Barlesque, will set the correct font-family
// on the <body> tag but if you're working on a project without Barlesque will need
// to enable this flag to have the correct font-family declared
//
// @type Bool
//
$gel-type-enable--font-family: false !default;

// Map the GEL Typography classes to the relevant HTML elements
//
// @type Bool
//
$gel-type-enable--base-elements: false !default;

// Map the larger GEL typography with the default gel-type-settings
//
// @type Bool
//
$gel-type-enable--larger-type-sizes: false !default;

// The GEL typography specification for each type class at each type group.
// Having these values stored in a map allows them to be easily updated and
// customised for specific non-latin character sets.
//
// @type Map
//
$gel-type-settings: (
  'canon': (
    'group-a': (
      'font-size': 28px,
      'line-height': 32px,
    ),
    'group-b': (
      'font-size': 32px,
      'line-height': 36px,
    ),
    'group-c': (
      'font-size': 52px,
      'line-height': 56px,
    ),
    'group-d': (
      'font-size': 44px,
      'line-height': 48px,
    ),
  ),
  'canon-bold': (
    'group-a': (
      'font-weight': bold,
      'letter-spacing': -1px,
    ),
  ),
  'trafalgar': (
    'group-a': (
      'font-size': 20px,
      'line-height': 24px,
    ),
    'group-b': (
      'font-size': 24px,
      'line-height': 28px,
    ),
    'group-c': (
      'font-size': 36px,
      'line-height': 40px,
    ),
    'group-d': (
      'font-size': 32px,
      'line-height': 36px,
    ),
  ),
  'trafalgar-bold': (
    'group-a': (
      'font-weight': bold,
      'letter-spacing': -1px,
    ),
  ),
  'paragon': (
    'group-a': (
      'font-size': 20px,
      'line-height': 24px,
    ),
    'group-b': (
      'font-size': 22px,
      'line-height': 26px,
    ),
    'group-c': (
      'font-size': 28px,
      'line-height': 32px,
    ),
    'group-d': (
      'font-size': 28px,
      'line-height': 32px,
    ),
  ),
  'paragon-bold': (
    'group-a': (
      'font-weight': bold,
      'letter-spacing': -1px,
    ),
  ),
  'double-pica': (
    'group-a': (
      'font-size': 20px,
      'line-height': 24px,
    ),
    'group-c': (
      'font-size': 26px,
      'line-height': 30px,
    ),
    'group-d': (
      'font-size': 24px,
      'line-height': 28px,
    ),
  ),
  'double-pica-bold': (
    'group-a': (
      'font-weight': bold,
      'letter-spacing': -1px,
    ),
  ),
  'great-primer': (
    'group-a': (
      'font-size': 18px,
      'line-height': 22px,
    ),
    'group-c': (
      'font-size': 21px,
      'line-height': 24px,
    ),
    'group-d': (
      'font-size': 20px,
    ),
  ),
  'great-primer-bold': (
    'group-a': (
      'font-weight': bold,
    ),
    'group-b': (
      'letter-spacing': -1px,
    ),
  ),
  'pica': (
    'group-a': (
      'font-size': 15px,
      'line-height': 20px,
    ),
    'group-b': (
      'font-size': 16px,
      'line-height': 20px,
    ),
    'group-c': (
      'font-size': 18px,
      'line-height': 22px,
    ),
    'group-d': (
      'font-size': 16px,
      'line-height': 20px,
    ),
  ),
  'pica-bold': (
    'group-a': (
      'font-weight': bold,
    ),
  ),
  'long-primer': (
    'group-a': (
      'font-size': 15px,
      'line-height': 18px,
    ),
    'group-c': (
      'line-height': 20px,
    ),
    'group-d': (
      'font-size': 14px,
      'line-height': 18px,
    ),
  ),
  'long-primer-bold': (
    'group-a': (
      'font-weight': bold,
    ),
  ),
  'brevier': (
    'group-a': (
      'font-size': 14px,
      'line-height': 16px,
    ),
    'group-b': (
      'line-height': 18px,
    ),
    'group-d': (
      'font-size': 13px,
      'line-height': 16px,
    ),
  ),
  'brevier-bold': (
    'group-a': (
      'font-weight': bold,
    ),
  ),
  'minion': (
    'group-a': (
      'font-size': 12px,
      'line-height': 16px,
      'text-transform': uppercase,
    ),
    'group-c': (
      'font-size': 13px,
    ),
    'group-d': (
      'font-size': 12px,
    ),
  ),
  'minion-bold': (
    'group-a': (
      'font-weight': bold,
    ),
  ),
  'body-copy': (
    'group-a': (
      'font-size': 15px,
      'line-height': 20px,
    ),
    'group-b': (
      'font-size': 16px,
      'line-height': 22px,
    ),
    'group-c': (
      'font-size': 18px,
      'line-height': 24px,
    ),
    'group-d': (
      'font-size': 16px,
      'line-height': 22px,
    ),
  ),
) !default;

$gel-larger-font-sizes: (
  // Additional type sizes for larger contexts
  'atlas': (
      'group-a': (
        'font-size': 78px,
        'line-height': 84px,
      ),
      'group-b': (
        'font-size': 96px,
        'line-height': 104px,
      ),
      'group-c': (
        'font-size': 192px,
        'line-height': 208px,
      ),
      'group-d': (
        'font-size': 140px,
        'line-height': 148px,
      ),
    ),
  'atlas-bold': (
    'group-a': (
      'font-weight': bold,
      'letter-spacing': -1px,
    ),
  ),
  'elephant': (
    'group-a': (
      'font-size': 60px,
      'line-height': 64px,
    ),
    'group-b': (
      'font-size': 78px,
      'line-height': 84px,
    ),
    'group-c': (
      'font-size': 156px,
      'line-height': 170px,
    ),
    'group-d': (
      'font-size': 116px,
      'line-height': 124px,
    ),
  ),
  'elephant-bold': (
    'group-a': (
      'font-weight': bold,
      'letter-spacing': -1px,
    ),
  ),
  'imperial': (
    'group-a': (
      'font-size': 50px,
      'line-height': 54px,
    ),
    'group-b': (
      'font-size': 64px,
      'line-height': 72px,
    ),
    'group-c': (
      'font-size': 124px,
      'line-height': 136px,
    ),
    'group-d': (
      'font-size': 96px,
      'line-height': 104px,
    ),
  ),
  'imperial-bold': (
    'group-a': (
      'font-weight': bold,
      'letter-spacing': -1px,
    ),
  ),
  'royal': (
    'group-a': (
      'font-size': 40px,
      'line-height': 44px,
    ),
    'group-b': (
      'font-size': 52px,
      'line-height': 60px,
    ),
    'group-c': (
      'font-size': 94px,
      'line-height': 104px,
    ),
    'group-d': (
      'font-size': 76px,
      'line-height': 84px,
    ),
  ),
  'royal-bold': (
    'group-a': (
      'font-weight': bold,
      'letter-spacing': -1px,
    ),
  ),
  'foolscap': (
    'group-a': (
      'font-size': 32px,
      'line-height': 36px,
    ),
    'group-b': (
      'font-size': 40px,
      'line-height': 44px,
    ),
    'group-c': (
      'font-size': 72px,
      'line-height': 80px,
    ),
    'group-d': (
      'font-size': 56px,
      'line-height': 60px,
    ),
  ),
  'foolscap-bold': (
    'group-a': (
      'font-weight': bold,
      'letter-spacing': -1px,
    ),
  )
) !default;

// Adds the typography specific breakpoints to the Sass MQ list
// of breakpoints
//
@include mq.add-breakpoint(gel-bp-type-b, 320px);
@include mq.add-breakpoint(gel-bp-type-c, 600px);
