/*


USWDS 2.10.1


TYPOGRAPHY SETTINGS


Read more about settings and USWDS typography tokens in the documentation: designsystem.digital.gov/design-tokens/typesetting/overview/


*/

/*


Root font size


Setting $theme-respect-user-font-size to true sets the root font size to 100% and uses ems for media queries


$theme-root-font-size only applies when $theme-respect-user-font-size is set to false.

This will set the root font size as a specific px value and use px values for media queries.

Accepts true or false


*/

$theme-respect-user-font-size: true !default;

// $theme-root-font-size only applies when // $theme-respect-user-font-size is set to // false.

// This will set the root font size // as a specific px value and use px values // for media queries.

// Accepts values in px

$theme-root-font-size: 10px !default;

/*


Global styles


Adds basic styling for the following unclassed elements:


*/

$theme-global-paragraph-styles: false !default; $theme-global-link-styles: false !default; $theme-global-content-styles: false !default;

/*


Font path


Relative font file path


*/

$theme-font-path: “../fonts” !default;

/*


Custom typeface tokens


Add a new custom typeface token if your project uses a typeface not already defined by USWDS.


USWDS defines the following tokens by default:


'georgia' 'helvetica' 'merriweather' 'open-sans' 'public-sans' 'roboto-mono' 'source-sans-pro' 'system' 'tahoma' 'verdana'


Add as many new tokens as you have custom typefaces. Reference your new token(s) in the type-based font settings using the quoted name of the token.

For example:

$theme-font-type-cond: 'example-font-token';

display-name: The display name of your font

cap-height: The height of a 500px `N` in Sketch


You should change `example--token` names to something more descriptive.


*/

$theme-typeface-tokens: (

example-serif-token: (
  display-name: "Example Serif Display Name",
  cap-height: 364px,
),
example-sans-token: (
  display-name: "Example Sans Display Name",
  cap-height: 364px,
),

) !default;

/*


Type-based font settings


Set the type-based tokens for your project from the following tokens, or from any new font tokens you added in $theme-typeface-tokens.


'georgia' 'helvetica' 'merriweather' 'open-sans' 'public-sans' 'roboto-mono' 'source-sans-pro' 'system' 'tahoma' 'verdana'


*/

// condensed $theme-font-type-cond: false !default;

// icon $theme-font-type-icon: false !default;

// language-specific $theme-font-type-lang: false !default;

// monospace $theme-font-type-mono: “roboto-mono” !default;

// sans-serif $theme-font-type-sans: “source-sans-pro” !default;

// serif $theme-font-type-serif: “merriweather” !default;

/*


Custom font stacks


Add custom font stacks to any of the type-based fonts. Any USWDS typeface token already has a default stack.

Custom stacks don't need to include the font's display name. It will automatically appear at the start of the stack.


Example: $theme-font-type-sans: 'source-sans-pro'; $theme-font-sans-custom-stack: “Helvetica Neue”, Helvetica, Arial, sans;

Output: font-family: “Source Sans Pro”, “Helvetica Neue”, Helvetica, Arial, sans;


*/

$theme-font-cond-custom-stack: false !default; $theme-font-icon-custom-stack: false !default; $theme-font-lang-custom-stack: false !default; $theme-font-mono-custom-stack: false !default; $theme-font-sans-custom-stack: false !default; $theme-font-serif-custom-stack: false !default;

/*


Add any custom font source files


If you want USWDS to generate additional @font-face declarations, add your font data below, following the example that follows.


USWDS automatically generates @font-face decalarations for the following

'merriweather' 'public-sans' 'roboto-mono' 'source-sans-pro'

These typefaces not require custom source files.


EXAMPLE

$theme-font-serif-custom-src: (

dir: 'custom/example-serif',
roman: (
  100: false,
  200: false,
  300: 'ExampleSerif-Light',
  400: 'ExampleSerif-Normal',
  500: false,
  600: false,
  700: 'ExampleSerif-Bold',
  800: false,
  900: false,
),
italic: (
  100: false,
  200: false,
  300: 'ExampleSerif-LightItalic',
  400: 'ExampleSerif-Italic',
  500: false,
  600: false,
  700: 'ExampleSerif-BoldItalic',
  800: false,
  900: false,
),

);


*/

$theme-font-cond-custom-src: false !default; $theme-font-icon-custom-src: false !default; $theme-font-lang-custom-src: false !default; $theme-font-mono-custom-src: false !default; $theme-font-sans-custom-src: false !default; $theme-font-serif-custom-src: false !default;

/*


Role-based font settings


Set the role-based tokens for your project from the following font-type tokens.


'cond' 'icon' 'lang' 'mono' 'sans' 'serif'


*/

$theme-font-role-ui: “sans” !default; $theme-font-role-heading: “serif” !default; $theme-font-role-body: “sans” !default; $theme-font-role-code: “mono” !default; $theme-font-role-alt: “serif” !default;

/*


Type scale


Define your project's type scale using values from the USWDS system type scale

1-20


*/

$theme-type-scale-3xs: 2 !default; $theme-type-scale-2xs: 3 !default; $theme-type-scale-xs: 4 !default; $theme-type-scale-sm: 5 !default; $theme-type-scale-md: 6 !default; $theme-type-scale-lg: 9 !default; $theme-type-scale-xl: 12 !default; $theme-type-scale-2xl: 14 !default; $theme-type-scale-3xl: 15 !default;

/*


Font weights


Assign weights 100-900 Or use `false` for unneeded weights.


*/

$theme-font-weight-thin: false !default; $theme-font-weight-light: 300 !default; $theme-font-weight-normal: 400 !default; $theme-font-weight-medium: false !default; $theme-font-weight-semibold: false !default; $theme-font-weight-bold: 700 !default; $theme-font-weight-heavy: false !default;

// If USWDS is generating your @font-face rules, // should we generate all available weights // regardless of the assignments above?

$theme-generate-all-weights: false !default;

/*


General typography settings


Type scale tokens


micro: 10px 1: 12px 2: 13px 3: 14px 4: 15px 5: 16px 6: 17px 7: 18px 8: 20px 9: 22px 10: 24px 11: 28px 12: 32px 13: 36px 14: 40px 15: 48px 16: 56px 17: 64px 18: 80px 19: 120px 20: 140px


Line height tokens


1: 1 2: 1.15 3: 1.35 4: 1.5 5: 1.62 6: 1.75


Font role tokens


'ui' 'heading' 'body' 'code' 'alt'


Measure (max-width) tokens


1: 44ex 2: 60ex 3: 64ex 4: 68ex 5: 74ex 6: 88ex none: none


*/

// Body settings are the equivalent of setting the <body> element $theme-body-font-family: “body” !default; $theme-body-font-size: “sm” !default; $theme-body-line-height: 5 !default;

// If true, explicitly style the <body> element with the base styles $theme-style-body-element: false !default;

// Headings $theme-h1-font-size: “2xl” !default; $theme-h2-font-size: “xl” !default; $theme-h3-font-size: “lg” !default; $theme-h4-font-size: “sm” !default; $theme-h5-font-size: “xs” !default; $theme-h6-font-size: “3xs” !default; $theme-heading-line-height: 2 !default; $theme-small-font-size: “2xs” !default; $theme-display-font-size: “3xl” !default;

// Text and prose $theme-text-measure-narrow: 1 !default; $theme-text-measure: 4 !default; $theme-text-measure-wide: 6 !default; $theme-prose-font-family: “body” !default;

// Lead text $theme-lead-font-family: “heading” !default; $theme-lead-font-size: “lg” !default; $theme-lead-line-height: 6 !default; $theme-lead-measure: 6 !default;