uswds-jekyll 3.0.0 → 5.0.1

data/_sass/uswds/src/theme/_uswds-theme-color.scss

@@ -0,0 +1,133 @@
+/*
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+========================================
+========================================
+========================================
+----------------------------------------
+USWDS 2.4.0
+----------------------------------------
+COLOR SETTINGS
+----------------------------------------
+Read more about settings and
+USWDS color tokens in the documentation:
+https://designsystem.digital.gov/design-tokens/color
+----------------------------------------
+*/
+
+/*
+----------------------------------------
+Theme palette colors
+----------------------------------------
+*/
+
+// Base colors
+$theme-color-base-family: "gray-cool";
+$theme-color-base-lightest: "gray-5";
+$theme-color-base-lighter: "gray-cool-10";
+$theme-color-base-light: "gray-cool-30";
+$theme-color-base: "gray-cool-50";
+$theme-color-base-dark: "gray-cool-60";
+$theme-color-base-darker: "gray-cool-70";
+$theme-color-base-darkest: "gray-90";
+$theme-color-base-ink: "gray-90";
+
+// Primary colors
+$theme-color-primary-family: "blue";
+$theme-color-primary-lightest: false;
+$theme-color-primary-lighter: "blue-10";
+$theme-color-primary-light: "blue-30";
+$theme-color-primary: "blue-60v";
+$theme-color-primary-vivid: "blue-warm-60v";
+$theme-color-primary-dark: "blue-warm-70v";
+$theme-color-primary-darker: "blue-warm-80v";
+$theme-color-primary-darkest: false;
+
+// Secondary colors
+$theme-color-secondary-family: "red";
+$theme-color-secondary-lightest: false;
+$theme-color-secondary-lighter: "red-cool-10";
+$theme-color-secondary-light: "red-30";
+$theme-color-secondary: "red-50";
+$theme-color-secondary-vivid: "red-cool-50v";
+$theme-color-secondary-dark: "red-60v";
+$theme-color-secondary-darker: "red-70v";
+$theme-color-secondary-darkest: false;
+
+// Accent warm colors
+$theme-color-accent-warm-family: "orange";
+$theme-color-accent-warm-lightest: false;
+$theme-color-accent-warm-lighter: "orange-10";
+$theme-color-accent-warm-light: "orange-20v";
+$theme-color-accent-warm: "orange-30v";
+$theme-color-accent-warm-dark: "orange-50v";
+$theme-color-accent-warm-darker: "orange-60";
+$theme-color-accent-warm-darkest: false;
+
+// Accent cool colors
+$theme-color-accent-cool-family: "blue-cool";
+$theme-color-accent-cool-lightest: false;
+$theme-color-accent-cool-lighter: "blue-cool-5v";
+$theme-color-accent-cool-light: "blue-cool-20v";
+$theme-color-accent-cool: "cyan-30v";
+$theme-color-accent-cool-dark: "blue-cool-40v";
+$theme-color-accent-cool-darker: "blue-cool-60v";
+$theme-color-accent-cool-darkest: false;
+
+/*
+----------------------------------------
+State palette colors
+----------------------------------------
+*/
+
+// Error colors
+$theme-color-error-family: "red-warm";
+$theme-color-error-lighter: "red-warm-10";
+$theme-color-error-light: "red-warm-30v";
+$theme-color-error: "red-warm-50v";
+$theme-color-error-dark: "red-60v";
+$theme-color-error-darker: "red-70";
+
+// Warning colors
+$theme-color-warning-family: "gold";
+$theme-color-warning-lighter: "yellow-5";
+$theme-color-warning-light: "yellow-10v";
+$theme-color-warning: "gold-20v";
+$theme-color-warning-dark: "gold-30v";
+$theme-color-warning-darker: "gold-50v";
+
+// Success colors
+$theme-color-success-family: "green-cool";
+$theme-color-success-lighter: "green-cool-5";
+$theme-color-success-light: "green-cool-20v";
+$theme-color-success: "green-cool-40v";
+$theme-color-success-dark: "green-cool-50";
+$theme-color-success-darker: "green-cool-60";
+
+// Info colors
+$theme-color-info-family: "cyan";
+$theme-color-info-lighter: "cyan-5";
+$theme-color-info-light: "cyan-20";
+$theme-color-info: "cyan-30v";
+$theme-color-info-dark: "cyan-40v";
+$theme-color-info-darker: "blue-cool-60";
+
+// Disabled colors
+$theme-color-disabled-family: "gray";
+$theme-color-disabled-light: "gray-10";
+$theme-color-disabled: "gray-20";
+$theme-color-disabled-dark: "gray-30";
+
+/*
+----------------------------------------
+General colors
+----------------------------------------
+*/
+
+// Links
+$theme-link-color: "primary";
+$theme-link-visited-color: "violet-70v";
+$theme-link-hover-color: "primary-dark";
+$theme-link-active-color: "primary-darker";

data/_sass/uswds/src/theme/_uswds-theme-components.scss

@@ -0,0 +1,85 @@
+/*
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+========================================
+========================================
+========================================
+----------------------------------------
+USWDS 2.7.0
+----------------------------------------
+COMPONENT SETTINGS
+----------------------------------------
+Read more about settings and
+USWDS style tokens in the documentation:
+https://designsystem.digital.gov/design-tokens
+----------------------------------------
+*/
+
+// Accordion
+$theme-accordion-border-width: 0.5;
+$theme-accordion-border-color: "base-lightest";
+$theme-accordion-font-family: "body";
+
+// Alert
+$theme-alert-bar-width: 1;
+$theme-alert-font-family: "ui";
+$theme-alert-icon-size: 4;
+$theme-alert-padding-x: 2.5;
+
+// Banner
+$theme-banner-font-family: "ui";
+$theme-banner-max-width: "desktop";
+
+// Button
+$theme-button-font-family: "ui";
+$theme-button-border-radius: "md";
+$theme-button-small-width: 6;
+$theme-button-stroke-width: 2px;
+
+// Card
+$theme-card-border-color: "base-lighter";
+$theme-card-border-radius: "lg";
+$theme-card-border-width: 2px;
+$theme-card-gap: 2;
+$theme-card-flag-min-width: "tablet";
+$theme-card-flag-image-width: "card-lg";
+$theme-card-font-family: "body";
+$theme-card-header-typeset: "heading", "lg", 2;
+$theme-card-margin-bottom: 4;
+$theme-card-padding-perimeter: 3;
+$theme-card-padding-y: 2;
+
+// Footer
+$theme-footer-font-family: "body";
+
+// Form and input
+$theme-checkbox-border-radius: "sm";
+$theme-form-font-family: "ui";
+$theme-input-line-height: 3;
+$theme-input-max-width: "mobile-lg";
+$theme-input-select-border-width: 2px;
+$theme-input-select-size: 2.5;
+$theme-input-state-border-width: 0.5;
+
+// Header
+$theme-header-font-family: "ui";
+$theme-header-logo-text-width: 33%;
+$theme-header-max-width: "desktop";
+$theme-header-min-width: "desktop";
+
+// Hero
+$theme-hero-image: "#{$theme-image-path}/hero.png";
+
+// Navigation
+$theme-navigation-font-family: "ui";
+$theme-megamenu-columns: 3;
+
+// Search
+$theme-search-font-family: "ui";
+$theme-search-min-width: 27ch;
+
+// Sidenav
+$theme-sidenav-current-border-width: 0.5;
+$theme-sidenav-font-family: "ui";

data/_sass/uswds/src/theme/_uswds-theme-custom-styles.scss

@@ -0,0 +1,21 @@
+/*
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+========================================
+========================================
+========================================
+----------------------------------------
+USWDS THEME CUSTOM STYLES
+----------------------------------------
+!! Copy this file to your project's
+   sass root. Don't edit the version
+   in node_modules.
+----------------------------------------
+Custom project SASS goes here.
+
+i.e.
+@include u-padding-right('05');
+----------------------------------------
+*/

data/_sass/uswds/src/theme/_uswds-theme-general.scss

@@ -0,0 +1,101 @@
+/*
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+========================================
+========================================
+========================================
+----------------------------------------
+USWDS 2.4.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";
+
+/*
+----------------------------------------
+Show compile warnings
+----------------------------------------
+Show Sass warnings when functions and
+mixins use non-standard tokens.
+AND
+Show updates and notifications.
+----------------------------------------
+*/
+
+$theme-show-compile-warnings: true;
+$theme-show-notifications: true;
+
+/*
+----------------------------------------
+Namespace
+----------------------------------------
+*/
+
+$theme-namespace: (
+  "grid": (
+    namespace: "grid-",
+    output: true
+  ),
+  "utility": (
+    namespace: "u-",
+    output: false
+  )
+);
+
+/*
+----------------------------------------
+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;
+
+/*
+----------------------------------------
+Focus styles
+----------------------------------------
+*/
+
+$theme-focus-color: "blue-40v";
+$theme-focus-offset: 0;
+$theme-focus-style: solid;
+$theme-focus-width: 0.5;
+
+/*
+----------------------------------------
+Icons
+----------------------------------------
+*/
+
+$theme-icon-image-size: 2;

data/_sass/uswds/src/theme/_uswds-theme-spacing.scss

@@ -0,0 +1,93 @@
+/*
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+========================================
+========================================
+========================================
+----------------------------------------
+USWDS 2.4.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;
+$theme-border-radius-md: 0.5;
+$theme-border-radius-lg: 1;
+
+/*
+----------------------------------------
+Column gap
+----------------------------------------
+2px         2px
+0.5         4px
+1           8px
+2           16px
+3           24px
+4           32px
+5           40px
+6           48px
+----------------------------------------
+*/
+
+$theme-column-gap-sm: 2px;
+$theme-column-gap-md: 2;
+$theme-column-gap-lg: 3;
+
+// These determine the responsive gap sizes set with .grid-gap
+$theme-column-gap-mobile: 2;
+$theme-column-gap-desktop: 4;
+
+/*
+----------------------------------------
+Grid container max-width
+----------------------------------------
+mobile
+mobile-lg
+tablet
+tablet-lg
+desktop
+desktop-lg
+widescreen
+----------------------------------------
+*/
+
+$theme-grid-container-max-width: "desktop";
+
+/*
+----------------------------------------
+Site
+----------------------------------------
+*/
+
+$theme-site-max-width: "desktop";
+$theme-site-margins-breakpoint: "desktop";
+$theme-site-margins-width: 4;
+$theme-site-margins-mobile-width: 2;

data/_sass/uswds/src/theme/_uswds-theme-typography.scss

@@ -0,0 +1,422 @@
+/*
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+========================================
+========================================
+========================================
+----------------------------------------
+USWDS 2.3.0
+----------------------------------------
+TYPOGRAPHY SETTINGS
+----------------------------------------
+Read more about settings and
+USWDS typography tokens in the documentation:
+https://designsystem.digital.gov/design-tokens/typesetting/font-family/
+----------------------------------------
+*/
+
+/*
+----------------------------------------
+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;
+
+// $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;
+
+/*
+----------------------------------------
+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;
+$theme-global-link-styles: false;
+$theme-global-content-styles: false;
+
+/*
+----------------------------------------
+Font path
+----------------------------------------
+Relative font file path
+----------------------------------------
+*/
+
+$theme-font-path: "../fonts";
+
+/*
+----------------------------------------
+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
+  )
+);
+
+/*
+----------------------------------------
+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;
+
+// icon
+$theme-font-type-icon: false;
+
+// language-specific
+$theme-font-type-lang: false;
+
+// monospace
+$theme-font-type-mono: "roboto-mono";
+
+// sans-serif
+$theme-font-type-sans: "source-sans-pro";
+
+// serif
+$theme-font-type-serif: "merriweather";
+
+/*
+----------------------------------------
+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;
+$theme-font-icon-custom-stack: false;
+$theme-font-lang-custom-stack: false;
+$theme-font-mono-custom-stack: false;
+$theme-font-sans-custom-stack: false;
+$theme-font-serif-custom-stack: false;
+
+/*
+----------------------------------------
+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;
+$theme-font-icon-custom-src: false;
+$theme-font-lang-custom-src: false;
+$theme-font-mono-custom-src: false;
+$theme-font-sans-custom-src: false;
+$theme-font-serif-custom-src: false;
+
+/*
+----------------------------------------
+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";
+$theme-font-role-heading: "serif";
+$theme-font-role-body: "sans";
+$theme-font-role-code: "mono";
+$theme-font-role-alt: "serif";
+
+/*
+----------------------------------------
+Type scale
+----------------------------------------
+Define your project's type scale using
+values from the USWDS system type scale
+
+1-20
+----------------------------------------
+*/
+
+$theme-type-scale-3xs: 2;
+$theme-type-scale-2xs: 3;
+$theme-type-scale-xs: 4;
+$theme-type-scale-sm: 5;
+$theme-type-scale-md: 6;
+$theme-type-scale-lg: 9;
+$theme-type-scale-xl: 12;
+$theme-type-scale-2xl: 14;
+$theme-type-scale-3xl: 15;
+
+/*
+----------------------------------------
+Font weights
+----------------------------------------
+Assign weights 100-900
+Or use `false` for unneeded weights.
+----------------------------------------
+*/
+
+$theme-font-weight-thin: false;
+$theme-font-weight-light: 300;
+$theme-font-weight-normal: 400;
+$theme-font-weight-medium: false;
+$theme-font-weight-semibold: false;
+$theme-font-weight-bold: 700;
+$theme-font-weight-heavy: false;
+
+// If USWDS is generating your @font-face rules,
+// should we generate all available weights
+// regardless of the assignments above?
+
+$theme-generate-all-weights: false;
+
+/*
+----------------------------------------
+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";
+$theme-body-font-size: "sm";
+$theme-body-line-height: 5;
+
+// If true, explicitly style the <body> element with the base styles
+$theme-style-body-element: false;
+
+// Headings
+$theme-h1-font-size: "2xl";
+$theme-h2-font-size: "xl";
+$theme-h3-font-size: "lg";
+$theme-h4-font-size: "sm";
+$theme-h5-font-size: "xs";
+$theme-h6-font-size: "3xs";
+$theme-heading-line-height: 2;
+$theme-small-font-size: "2xs";
+$theme-display-font-size: "3xl";
+
+// Text and prose
+$theme-text-measure-narrow: 1;
+$theme-text-measure: 4;
+$theme-text-measure-wide: 6;
+$theme-prose-font-family: "body";
+
+// Lead text
+$theme-lead-font-family: "heading";
+$theme-lead-font-size: "lg";
+$theme-lead-line-height: 6;
+$theme-lead-measure: 6;