uswds-jekyll 4.2.0 → 5.0.0

data/_sass/uswds/src/settings/_settings-general.scss

@@ -0,0 +1,101 @@
+/*
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+========================================
+========================================
+========================================
+----------------------------------------
+USWDS 2.7.0
+----------------------------------------
+GENERAL SETTINGS
+----------------------------------------
+Read more about settings and
+USWDS style tokens in the documentation:
+https://designsystem.digital.gov/design-tokens
+----------------------------------------
+*/
+
+/*
+----------------------------------------
+Image path
+----------------------------------------
+Relative image file path
+----------------------------------------
+*/
+
+$theme-image-path: "../img" !default;
+
+/*
+----------------------------------------
+Show compile warnings
+----------------------------------------
+Show Sass warnings when functions and
+mixins use non-standard tokens.
+AND
+Show updates and notifications.
+----------------------------------------
+*/
+
+$theme-show-compile-warnings: true !default;
+$theme-show-notifications: true !default;
+
+/*
+----------------------------------------
+Namespace
+----------------------------------------
+*/
+
+$theme-namespace: (
+  "grid": (
+    namespace: "grid-",
+    output: true
+  ),
+  "utility": (
+    namespace: "u-",
+    output: false
+  )
+) !default;
+
+/*
+----------------------------------------
+Layout grid
+----------------------------------------
+Should the layout grid classes output
+with !important
+----------------------------------------
+*/
+
+$theme-layout-grid-use-important: false !default;
+
+/*
+----------------------------------------
+Border box sizing
+----------------------------------------
+When set to true, sets the box-sizing
+property of all site elements to
+`border-box`.
+----------------------------------------
+*/
+
+$theme-global-border-box-sizing: true !default;
+
+/*
+----------------------------------------
+Focus styles
+----------------------------------------
+*/
+
+$theme-focus-color: "blue-40v" !default;
+$theme-focus-offset: 0 !default;
+$theme-focus-style: solid !default;
+$theme-focus-width: 0.5 !default;
+
+/*
+----------------------------------------
+Icons
+----------------------------------------
+*/
+
+$theme-icon-image-size: 2 !default;

data/_sass/uswds/src/settings/_settings-spacing.scss

@@ -0,0 +1,93 @@
+/*
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+========================================
+========================================
+========================================
+----------------------------------------
+USWDS 2.7.0
+----------------------------------------
+SPACING SETTINGS
+----------------------------------------
+Read more about settings and
+USWDS spacing units tokens in the
+documentation:
+https://designsystem.digital.gov/design-tokens/spacing-units
+----------------------------------------
+*/
+
+/*
+----------------------------------------
+Border radius
+----------------------------------------
+2px           2px
+0.5           4px
+1             8px
+1.5           12px
+2             16px
+2.5           20px
+3             24px
+4             32px
+5             40px
+6             48px
+7             56px
+8             64px
+9             72px
+----------------------------------------
+*/
+
+$theme-border-radius-sm: 2px !default;
+$theme-border-radius-md: 0.5 !default;
+$theme-border-radius-lg: 1 !default;
+
+/*
+----------------------------------------
+Column gap
+----------------------------------------
+2px         2px
+0.5         4px
+1           8px
+2           16px
+3           24px
+4           32px
+5           40px
+6           48px
+----------------------------------------
+*/
+
+$theme-column-gap-sm: 2px !default;
+$theme-column-gap-md: 2 !default;
+$theme-column-gap-lg: 3 !default;
+
+// These determine the responsive gap sizes set with .grid-gap
+$theme-column-gap-mobile: 2 !default;
+$theme-column-gap-desktop: 4 !default;
+
+/*
+----------------------------------------
+Grid container max-width
+----------------------------------------
+mobile
+mobile-lg
+tablet
+tablet-lg
+desktop
+desktop-lg
+widescreen
+----------------------------------------
+*/
+
+$theme-grid-container-max-width: "desktop" !default;
+
+/*
+----------------------------------------
+Site
+----------------------------------------
+*/
+
+$theme-site-max-width: "desktop" !default;
+$theme-site-margins-breakpoint: "desktop" !default;
+$theme-site-margins-width: 4 !default;
+$theme-site-margins-mobile-width: 2 !default;

data/_sass/uswds/src/settings/_settings-typography.scss

@@ -0,0 +1,422 @@
+/*
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+========================================
+========================================
+========================================
+----------------------------------------
+USWDS 2.7.0
+----------------------------------------
+TYPOGRAPHY SETTINGS
+----------------------------------------
+Read more about settings and
+USWDS typography tokens in the documentation:
+https://designsystem.digital.gov/design-tokens/typography
+----------------------------------------
+*/
+
+/*
+----------------------------------------
+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:
+
+- paragraph: paragraph text
+- link: links
+- content: paragraph text, links,
+  headings, lists, and tables
+----------------------------------------
+*/
+
+$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-[style]-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
+
+- dir:
+  Directory relative to $theme-font-path
+- This directory should include fonts saved as
+  .ttf, .woff, and .woff2
+  ExampleSerif-Normal.ttf
+  ExampleSerif-Normal.woff
+  ExampleSerif-Normal.woff2
+
+$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;