@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 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);