luna-one 3.1.430 → 3.1.433

package/dist/global-styles/global-vars.scss

@@ -1,600 +1,600 @@
-
-/**
- * Variables
- */
-
-@function map-collect($maps...) {
-  $collection: ();
-  @each $map in $maps {
-    $collection: map-merge($collection, $map);
-  }
-  @return $collection;
-}
-
-// gray
-@function gray($key) {
-  @return map-get($gray, $key);
-}
-$gray: () !default;
-$gray: map-merge(
-  (
-    "white": #ffffff,
-    "gray-1": #f9f9fb,
-    "gray-2": #f3f3f7,
-    "gray-3": #eaeaef,
-    "gray-4": #bfbfc6,
-    "gray-5": #9d9da6,
-    "gray-6": #7b7a86,
-    "gray-7": #363545,
-    "gray-8": #262533,
-    "gray-9": #1b1a26,
-    "black": #000000,
-  ),
-  $gray
-);
-
-$mep-gray-3: #363545;
-$mep-blue-1: #009ad9;
-$mep-blue-2: #005f9e;
-$mep-blue-3: #0e416c;
-$mep-blue-4: #00437b;
-$mep-gray-1: #eaeaef;
-$mep-gray-2: #d0d0d7;
-$mep-gray-0: #f9f9fb;
-$max-screen-width: 1266px;
-
-// brand colors
-@function brand-color($key) {
-  @return map-get($brand-colors, $key);
-}
-$brand-colors: () !default;
-$brand-colors: map-merge(
-  (
-    "brand-1": #002d5b,
-    "brand-2": #005f9e,
-    "brand-3": #009ad9,
-    "brand-4": #00437b,
-    "brand-5": #ffbe00,
-    "ui-1": #0d6aa8,
-    "ui-2": #cfe1ee,
-    "ui-3": #f4f7fa,
-  ),
-  $brand-colors
-);
-
-// emotive colors
-@function emotive-colors($key) {
-  @return map-get($emotive-colors, $key);
-}
-$emotive-colors: () !default;
-$emotive-colors: map-merge(
-  (
-    "default": brand-color("ui-1"),
-    "danger": #f57362,
-    "success": #c0f57a,
-    "warning": #fff172,
-  ),
-  $emotive-colors
-);
-
-// create color palette map
-@function color($key) {
-  @return map-get($color-palette, $key);
-}
-$color-palette: map-collect($brand-colors, $emotive-colors, $gray);
-
-// type colors
-@function type-color($key: "normal") {
-  @return map-get($type-colors, $key);
-}
-$type-colors: () !default;
-$type-colors: map-merge(
-  (
-    "normal": color("gray-7"),
-    "inverse": color("gray-1"),
-  ),
-  $type-colors
-);
-
-// font weight
-@function font-weight($key: "normal") {
-  @return map-get($font-weight-scale, $key);
-}
-$font-weight-scale: () !default;
-$font-weight-scale: map-merge(
-  (
-    "light": 300,
-    "normal": 400,
-    "book": 400,
-    "regular": 500,
-    "medium": 600,
-    "bold": 600,
-    "extra-bold": 800,
-  ),
-  $font-weight-scale
-);
-
-// type scale
-@function font-size($key: "base") {
-  @return map-get($font-size-scale, $key);
-}
-$font-size-scale: () !default;
-$font-size-scale: map-merge(
-  (
-    "nano": 12px,
-    "micro": 14px,
-    "sm": 16px,
-    "base": 20px,
-    "md": 24px,
-    "lg": 28px,
-    "xl": 32px,
-    "xxl": 36px,
-    "huge": 42px,
-    "mega": 48px,
-    "jumbo": 56px,
-    "massive": 80px,
-  ),
-  $font-size-scale
-);
-
-// line-height scale
-@function line-height($key: "regular") {
-  @return map-get($line-height-scale, $key);
-}
-$line-height-scale: () !default;
-$line-height-scale: map-merge(
-  (
-    "tight": 1.2,
-    "regular": 1.4,
-    "loose": 1.6,
-  ),
-  $line-height-scale
-);
-
-// border radius
-@function border-radius($key) {
-  @return map-get($border-radius-scale, $key);
-}
-$border-radius-scale: () !default;
-$border-radius-scale: map-merge(
-  (
-    "none": 0,
-    "sm": 0.125rem,
-    "md": 0.25rem,
-    "lg": 0.5rem,
-    "xl": 1rem,
-  ),
-  $border-radius-scale
-);
-
-// spacing scale
-@function spacing($key) {
-  @return map-get($spacing-scale, $key);
-}
-$spacing-scale: () !default;
-$spacing-scale: map-merge(
-  (
-    "none": 0px,
-    "auto": auto,
-    "micro": 4px,
-    "mini": 8px,
-    "xxs": 12px,
-    "xs": 16px,
-    "sm": 24px,
-    "md": 32px,
-    "lg": 48px,
-    "xl": 64px,
-    "xxl": 72px,
-    "super": 96px,
-    "mega": 120px,
-  ),
-  $spacing-scale
-);
-
-// box shadow
-@function box-shadow($key) {
-  @return map-get($box-shadows, $key);
-}
-$box-shadows: (
-  "none": none,
-  1: (
-    0 4px 8px 0 rgba(54, 53, 69, 0.1),
-    0 4px 8px 0 rgba(54, 53, 69, 0.1),
-  ),
-  2: (
-    0 4px 12px 0 rgba(54, 53, 69, 0.1),
-    0 12px 16px 4px rgba(54, 53, 69, 0.05),
-  ),
-  3: (
-    0 8px 24px 0 rgba(54, 53, 69, 0.1),
-    0 16px 20px 0 rgba(54, 53, 69, 0.05),
-  ),
-  4: (
-    0 16px 28px 0 rgba(54, 53, 69, 0.05),
-    0 16px 40px 0 rgba(54, 53, 69, 0.1),
-  ),
-  5: (
-    0 5px gray("white"),
-    0 8px brand-color("brand-5"),
-  ),
-  6: (
-    0 5px gray("white"),
-    0 8px gray("white"),
-  ),
-);
-
-// font family
-$font-sans-serif: "Benton Sans W05 Book", -apple-system, BlinkMacSystemFont,
-  "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial,
-  sans-serif;
-$font-serif: georgia, times, serif;
-$font-code: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
-
-// globals
-$body-bg-color: color("white");
-$body-font-color: type-color("normal");
-$border-radius-base: border-radius("none");
-$body-font-family: $font-sans-serif;
-$body-font-weight: font-weight("normal");
-$selection-highlight-bg: color("brand-3");
-
-// navigation tabs
-$nav-tabs-link-color: color("gray-7");
-$nav-tabs-link-hover: color("gray-9");
-$nav-tabs-border-color: color("gray-7");
-$nav-tabs-border-size: 2px;
-$nav-tabs-link-bg: transparent;
-$nav-tabs-active-link-bg: color("white");
-$nav-tabs-font-weight: font-weight("bold");
-
-// pagination
-$pagination-border-hover-color: color("gray-3");
-$pagination-border-active-color: color("brand-1");
-
-// headers
-$header-font-color: color("gray-8");
-$header-font-family: "Benton Sans W05 Regular", $font-sans-serif;
-$header-font-weight: font-weight("extra-bold");
-
-// links
-$link-color: color("ui-1");
-$link-hover-color: darken($link-color, 10%);
-$link-inverse-color: color("ui-2");
-$link-inverse-hover-color: darken($link-inverse-color, 10%);
-$link-font-weight: font-weight("normal");
-
-// navigation bar
-$navbar-height: 72px;
-// set to true if using module
-$has-universal-navbar: false;
-$navbar-universal-height: 32px;
-$navbar-bg: color("gray-2");
-$navbar-logo-height: 42px;
-$navbar-font-size: font-size("nano");
-$navbar-link-color: color("gray-8");
-$navbar-link-hover: color("gray-6");
-$navbar-link-hover-bg: color("gray-0");
-$navbar-link-text-transform: uppercase;
-$navbar-link-font-weight: font-weight("extra-bold");
-$navbar-border-width: 0px;
-$navbar-border-color: color("gray-1");
-$navbar-menu-icon-color: color("gray-3");
-$navbar-inverse-bg: color("gray-8");
-$navbar-inverse-border-color: color("gray-8");
-$navbar-inverse-link-color: $link-inverse-color;
-$navbar-inverse-link-hover-color: $link-inverse-hover-color;
-
-// calculate total navbar height
-$total-navbar-height: null;
-@if $has-universal-navbar == false {
-  $total-navbar-height: $navbar-height;
-} @else {
-  $total-navbar-height: calc(#{$navbar-height} + #{$navbar-universal-height});
-}
-
-// mega menu
-$mega-menu-bg: color("gray-2");
-// $mega-menu-offset: calc(-1 * #{spacing('mini')});
-$mega-menu-offset: 0px;
-$mega-menu-type-color: type-color("normal");
-$mega-menu-link-color: color("brand-1");
-$mega-menu-link-hover: darken($link-color, 10%);
-
-// buttons
-$button-colors: () !default;
-$button-colors: map-merge(
-  (
-    1: color("ui-1"),
-    2: color("brand-1"),
-    3: color("ui-2"),
-    4: color("gray-7"),
-    5: color("gray-3"),
-  ),
-  $button-colors
-);
-
-$button-border-radius: $border-radius-base;
-$button-height: 48px;
-$button-small-height: 32px;
-$button-font-size: font-size("sm");
-$button-font-weight: font-weight("bold");
-$button-border-size: 1px;
-$button-inverse-bg-color: color("ui-2");
-$button-inverse-color: #0d6aa8; // color('brand-2')
-$button-outline-text-color: color("brand-1");
-$button-outline-border-color: color("brand-1");
-$button-outline-hover-color: type-color("inverse");
-$button-outline-inverse-text-color: color("ui-2");
-$button-outline-inverse-border-color: color("ui-2");
-$button-outline-inverse-hover-color: color("brand-2");
-
-// tooltips
-$tooltip-bg: color("gray-2");
-$tooltip-font-size: font-size("micro");
-$tooltip-text-color: type-color("normal");
-$tooltip-border-radius: $border-radius-base;
-
-// cards
-$card-bg: color("gray-2");
-$card-box-shadow: box-shadow(2);
-$card-border-radius: $border-radius-base;
-$card-border-width: 0px;
-$card-border-color: color("gray-3");
-$card-font-size: font-size("sm");
-
-// dropdowns
-$dropdown-item-font-size: font-size("sm");
-$dropdown-border-size: 1px;
-$dropdown-border-color: color("gray-7");
-$dropdown-border-radius: $border-radius-base;
-$dropdown-bg: color("gray-1");
-$dropdown-link-color: color("gray-9");
-$dropdown-link-hover-bg: color("gray-3");
-$drodown-arrow-color: color("gray-6");
-$dropdown-no-link-color: color("gray-6");
-$dropdown-feature-background: brand-color("ui-3");
-
-// panels
-$panel-bg: color("white");
-$panel-border-color: color("gray-2");
-
-// accordion
-$accordion-font-size: font-size("sm");
-$accordion-bg: color("white");
-$accordion-expanded-bg: color("white");
-$accordion-border-width: 0.05rem;
-$accordion-border-color: color("gray-4");
-$accordion-arrow-color: color("gray-4");
-
-// breadcrumbs
-$breadcrumbs-caret-color: color("brand-2");
-
-// form inputs
-$input-bg-color: color("gray-1");
-$input-height: 48px;
-$input-text-color: $body-font-color;
-$input-font-size: font-size("sm");
-$input-border-radius: $border-radius-base;
-$input-border-color: color("gray-7");
-$input-border-width: 1px;
-
-$input-placeholder-color: color("gray-5");
-$input-focus-border-color: color("ui-1");
-$input-focus-bg-color: color("white");
-
-$input-disabled-color: color("gray-5");
-$input-disabled-border-color: color("gray-5");
-$input-disabled-bg: $input-bg-color;
-
-// forms
-$form-label-font-size: font-size("sm");
-$form-label-color: color("gray-9");
-$form-status-message-font-size: font-size("sm");
-
-// fieldset
-$fieldset-legend-font-size: font-size("sm");
-$fieldset-legend-font-weight: font-weight("bold");
-
-// checkboxes
-$checkbox-border-color: $input-border-color;
-$checkbox-fill-color: color("brand-2");
-
-// radio buttons
-$radio-border-color: $input-border-color;
-$radio-fill-color: color("brand-2");
-
-// tables
-$table-font-size: font-size("sm");
-$table-header-bg: color("gray-2");
-$table-row-bg-even: color("gray-2");
-$table-row-bg-odd: transparent;
-
-// modals
-$modal-bg: color("white");
-$modal-overlay-bg: color("gray-9");
-$modal-font-size: font-size("sm");
-
-// alerts
-$alert-border-radius: $border-radius-base;
-$alert-padding: spacing("sm");
-
-// notifications
-
-$noficiation-bg-color: color("gray-1");
-$notification-border-radius: $border-radius-base;
-
-// tree menu
-$tree-menu-font-size: font-size("sm");
-$tree-menu-link-color: color("gray-5");
-$tree-menu-link-hover: color("gray-8");
-
-// viewport breakpoints
-$breakpoint-xxs: 360px;
-$breakpoint-xs: 600px;
-$breakpoint-sm: 960px;
-$breakpoint-md: 1280px;
-$breakpoint-lg: 1800px;
-
-// YIQ contrast colors
-$yiq-contrasted-dark-default: type-color("normal") !default;
-$yiq-contrasted-light-default: type-color("inverse") !default;
-$yiq-contrasted-threshold: 128 !default;
-$yiq-debug: false !default;
-
-// Image Filtering
-$filter-gray-100: gray(100%);
-
-// Theme Mixins
-$brand-theme-text-color: color("gray-1");
-$gray-theme-text-color: color("gray-7");
-
-@mixin theme-1 {
-  color: color("gray-7");
-}
-
-@mixin theme-2 {
-  color: color("gray-7");
-}
-
-@mixin theme-3 {
-  color: color("gray-7");
-}
-
-@mixin theme-4 {
-  color: color("gray-1");
-}
-
-@mixin theme-5 {
-  color: color("gray-1");
-}
-
-@mixin light-theme {
-  background-color: color("gray-1");
-  color: $gray-theme-text-color;
-}
-
-@mixin dark-theme {
-  background-color: color("gray-2");
-  color: $gray-theme-text-color;
-}
-
-@mixin light-brand-theme {
-  background-color: color("brand-4");
-  color: $brand-theme-text-color;
-}
-
-@mixin dark-brand-theme {
-  background-color: color("brand-2");
-  color: $brand-theme-text-color;
-}
-
-@mixin very-dark-brand-theme {
-  background-color: color("brand-1");
-  color: $brand-theme-text-color;
-}
-
-@mixin brand-theme-text {
-  color: $brand-theme-text-color;
-}
-
-@mixin brand-theme-fill {
-  fill: $brand-theme-text-color;
-}
-
-@mixin brand-theme-border {
-  border-color: $brand-theme-text-color;
-}
-
-@mixin brand-theme-link-text {
-  color: $brand-theme-text-color !important;
-}
-
-@mixin light-brand-bg {
-  background-color: color("brand-4");
-}
-
-@mixin dark-brand-bg {
-  background-color: color("brand-2");
-}
-
-@mixin very-dark-brand-bg {
-  background-color: color("brand-1");
-}
-
-@mixin brand-link-text-deco {
-  text-decoration-color: color("gray-2") !important;
-}
-
-@mixin icon-base() {
-  display: inline-block;
-  background-repeat: no-repeat;
-}
-
-@mixin container-wrap {
-  padding-right: var(--outer-margin, 2rem);
-  padding-left: var(--outer-margin, 2rem);
-  box-sizing: border-box;
-  max-width: 64rem;
-  margin: 0 auto;
-}
-
-@mixin header-standard-size {
-  font-size: $heading-3-size;
-  line-height: 50px;
-  letter-spacing: -0.005em;
-  margin-bottom: 6px;
-  @include benton-very-bold();
-}
-
-@mixin subheader-standard-size {
-  font-size: $subheading-size;
-  letter-spacing: 0.0175em;
-  @include benton-light();
-  margin-bottom: 20px;
-  line-height: 27px;
-}
-
-@mixin text-standard-size {
-  font-size: font-size("micro");
-  line-height: 18px;
-  letter-spacing: -0.005em;
-  @include benton-light();
-  margin-bottom: 37px;
-}
-
-@mixin h1-standard-size {
-  @include benton-very-bold();
-  font-size: 12px;
-  line-height: 18px;
-  letter-spacing: 0.07em;
-}
-
-@mixin h2-standard-size {
-  font-size: 38px;
-  line-height: 43px;
-  @include benton-very-bold();
-}
-
-@mixin h3-standard-size {
-  font-size: 28px;
-  line-height: 34px;
-  font-weight: 800;
-}
-
-@mixin h4-standard-size {
-  font-size: 20px;
-  line-height: 24px;
-  @include benton-very-bold();
-}
-
-@mixin h5-standard-size {
-  font-size: 24px;
-  line-height: 29px;
-  @include benton-medium();
-}
-
-@mixin h6-standard-size {
-  font-size: 16px;
-  line-height: 29px;
-  @include benton-normal();
-}
+
+/**
+ * Variables
+ */
+
+@function map-collect($maps...) {
+  $collection: ();
+  @each $map in $maps {
+    $collection: map-merge($collection, $map);
+  }
+  @return $collection;
+}
+
+// gray
+@function gray($key) {
+  @return map-get($gray, $key);
+}
+$gray: () !default;
+$gray: map-merge(
+  (
+    "white": #ffffff,
+    "gray-1": #f9f9fb,
+    "gray-2": #f3f3f7,
+    "gray-3": #eaeaef,
+    "gray-4": #bfbfc6,
+    "gray-5": #9d9da6,
+    "gray-6": #7b7a86,
+    "gray-7": #363545,
+    "gray-8": #262533,
+    "gray-9": #1b1a26,
+    "black": #000000,
+  ),
+  $gray
+);
+
+$mep-gray-3: #363545;
+$mep-blue-1: #009ad9;
+$mep-blue-2: #005f9e;
+$mep-blue-3: #0e416c;
+$mep-blue-4: #00437b;
+$mep-gray-1: #eaeaef;
+$mep-gray-2: #d0d0d7;
+$mep-gray-0: #f9f9fb;
+$max-screen-width: 1266px;
+
+// brand colors
+@function brand-color($key) {
+  @return map-get($brand-colors, $key);
+}
+$brand-colors: () !default;
+$brand-colors: map-merge(
+  (
+    "brand-1": #002d5b,
+    "brand-2": #005f9e,
+    "brand-3": #009ad9,
+    "brand-4": #00437b,
+    "brand-5": #ffbe00,
+    "ui-1": #0d6aa8,
+    "ui-2": #cfe1ee,
+    "ui-3": #f4f7fa,
+  ),
+  $brand-colors
+);
+
+// emotive colors
+@function emotive-colors($key) {
+  @return map-get($emotive-colors, $key);
+}
+$emotive-colors: () !default;
+$emotive-colors: map-merge(
+  (
+    "default": brand-color("ui-1"),
+    "danger": #f57362,
+    "success": #c0f57a,
+    "warning": #fff172,
+  ),
+  $emotive-colors
+);
+
+// create color palette map
+@function color($key) {
+  @return map-get($color-palette, $key);
+}
+$color-palette: map-collect($brand-colors, $emotive-colors, $gray);
+
+// type colors
+@function type-color($key: "normal") {
+  @return map-get($type-colors, $key);
+}
+$type-colors: () !default;
+$type-colors: map-merge(
+  (
+    "normal": color("gray-7"),
+    "inverse": color("gray-1"),
+  ),
+  $type-colors
+);
+
+// font weight
+@function font-weight($key: "normal") {
+  @return map-get($font-weight-scale, $key);
+}
+$font-weight-scale: () !default;
+$font-weight-scale: map-merge(
+  (
+    "light": 300,
+    "normal": 400,
+    "book": 400,
+    "regular": 500,
+    "medium": 600,
+    "bold": 600,
+    "extra-bold": 800,
+  ),
+  $font-weight-scale
+);
+
+// type scale
+@function font-size($key: "base") {
+  @return map-get($font-size-scale, $key);
+}
+$font-size-scale: () !default;
+$font-size-scale: map-merge(
+  (
+    "nano": 12px,
+    "micro": 14px,
+    "sm": 16px,
+    "base": 20px,
+    "md": 24px,
+    "lg": 28px,
+    "xl": 32px,
+    "xxl": 36px,
+    "huge": 42px,
+    "mega": 48px,
+    "jumbo": 56px,
+    "massive": 80px,
+  ),
+  $font-size-scale
+);
+
+// line-height scale
+@function line-height($key: "regular") {
+  @return map-get($line-height-scale, $key);
+}
+$line-height-scale: () !default;
+$line-height-scale: map-merge(
+  (
+    "tight": 1.2,
+    "regular": 1.4,
+    "loose": 1.6,
+  ),
+  $line-height-scale
+);
+
+// border radius
+@function border-radius($key) {
+  @return map-get($border-radius-scale, $key);
+}
+$border-radius-scale: () !default;
+$border-radius-scale: map-merge(
+  (
+    "none": 0,
+    "sm": 0.125rem,
+    "md": 0.25rem,
+    "lg": 0.5rem,
+    "xl": 1rem,
+  ),
+  $border-radius-scale
+);
+
+// spacing scale
+@function spacing($key) {
+  @return map-get($spacing-scale, $key);
+}
+$spacing-scale: () !default;
+$spacing-scale: map-merge(
+  (
+    "none": 0px,
+    "auto": auto,
+    "micro": 4px,
+    "mini": 8px,
+    "xxs": 12px,
+    "xs": 16px,
+    "sm": 24px,
+    "md": 32px,
+    "lg": 48px,
+    "xl": 64px,
+    "xxl": 72px,
+    "super": 96px,
+    "mega": 120px,
+  ),
+  $spacing-scale
+);
+
+// box shadow
+@function box-shadow($key) {
+  @return map-get($box-shadows, $key);
+}
+$box-shadows: (
+  "none": none,
+  1: (
+    0 4px 8px 0 rgba(54, 53, 69, 0.1),
+    0 4px 8px 0 rgba(54, 53, 69, 0.1),
+  ),
+  2: (
+    0 4px 12px 0 rgba(54, 53, 69, 0.1),
+    0 12px 16px 4px rgba(54, 53, 69, 0.05),
+  ),
+  3: (
+    0 8px 24px 0 rgba(54, 53, 69, 0.1),
+    0 16px 20px 0 rgba(54, 53, 69, 0.05),
+  ),
+  4: (
+    0 16px 28px 0 rgba(54, 53, 69, 0.05),
+    0 16px 40px 0 rgba(54, 53, 69, 0.1),
+  ),
+  5: (
+    0 5px gray("white"),
+    0 8px brand-color("brand-5"),
+  ),
+  6: (
+    0 5px gray("white"),
+    0 8px gray("white"),
+  ),
+);
+
+// font family
+$font-sans-serif: "Benton Sans W05 Book", -apple-system, BlinkMacSystemFont,
+  "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial,
+  sans-serif;
+$font-serif: georgia, times, serif;
+$font-code: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+
+// globals
+$body-bg-color: color("white");
+$body-font-color: type-color("normal");
+$border-radius-base: border-radius("none");
+$body-font-family: $font-sans-serif;
+$body-font-weight: font-weight("normal");
+$selection-highlight-bg: color("brand-3");
+
+// navigation tabs
+$nav-tabs-link-color: color("gray-7");
+$nav-tabs-link-hover: color("gray-9");
+$nav-tabs-border-color: color("gray-7");
+$nav-tabs-border-size: 2px;
+$nav-tabs-link-bg: transparent;
+$nav-tabs-active-link-bg: color("white");
+$nav-tabs-font-weight: font-weight("bold");
+
+// pagination
+$pagination-border-hover-color: color("gray-3");
+$pagination-border-active-color: color("brand-1");
+
+// headers
+$header-font-color: color("gray-8");
+$header-font-family: "Benton Sans W05 Regular", $font-sans-serif;
+$header-font-weight: font-weight("extra-bold");
+
+// links
+$link-color: color("ui-1");
+$link-hover-color: darken($link-color, 10%);
+$link-inverse-color: color("ui-2");
+$link-inverse-hover-color: darken($link-inverse-color, 10%);
+$link-font-weight: font-weight("normal");
+
+// navigation bar
+$navbar-height: 72px;
+// set to true if using module
+$has-universal-navbar: false;
+$navbar-universal-height: 32px;
+$navbar-bg: color("gray-2");
+$navbar-logo-height: 42px;
+$navbar-font-size: font-size("nano");
+$navbar-link-color: color("gray-8");
+$navbar-link-hover: color("gray-6");
+$navbar-link-hover-bg: color("gray-0");
+$navbar-link-text-transform: uppercase;
+$navbar-link-font-weight: font-weight("extra-bold");
+$navbar-border-width: 0px;
+$navbar-border-color: color("gray-1");
+$navbar-menu-icon-color: color("gray-3");
+$navbar-inverse-bg: color("gray-8");
+$navbar-inverse-border-color: color("gray-8");
+$navbar-inverse-link-color: $link-inverse-color;
+$navbar-inverse-link-hover-color: $link-inverse-hover-color;
+
+// calculate total navbar height
+$total-navbar-height: null;
+@if $has-universal-navbar == false {
+  $total-navbar-height: $navbar-height;
+} @else {
+  $total-navbar-height: calc(#{$navbar-height} + #{$navbar-universal-height});
+}
+
+// mega menu
+$mega-menu-bg: color("gray-2");
+// $mega-menu-offset: calc(-1 * #{spacing('mini')});
+$mega-menu-offset: 0px;
+$mega-menu-type-color: type-color("normal");
+$mega-menu-link-color: color("brand-1");
+$mega-menu-link-hover: darken($link-color, 10%);
+
+// buttons
+$button-colors: () !default;
+$button-colors: map-merge(
+  (
+    1: color("ui-1"),
+    2: color("brand-1"),
+    3: color("ui-2"),
+    4: color("gray-7"),
+    5: color("gray-3"),
+  ),
+  $button-colors
+);
+
+$button-border-radius: $border-radius-base;
+$button-height: 48px;
+$button-small-height: 32px;
+$button-font-size: font-size("sm");
+$button-font-weight: font-weight("bold");
+$button-border-size: 1px;
+$button-inverse-bg-color: color("ui-2");
+$button-inverse-color: #0d6aa8; // color('brand-2')
+$button-outline-text-color: color("brand-1");
+$button-outline-border-color: color("brand-1");
+$button-outline-hover-color: type-color("inverse");
+$button-outline-inverse-text-color: color("ui-2");
+$button-outline-inverse-border-color: color("ui-2");
+$button-outline-inverse-hover-color: color("brand-2");
+
+// tooltips
+$tooltip-bg: color("gray-2");
+$tooltip-font-size: font-size("micro");
+$tooltip-text-color: type-color("normal");
+$tooltip-border-radius: $border-radius-base;
+
+// cards
+$card-bg: color("gray-2");
+$card-box-shadow: box-shadow(2);
+$card-border-radius: $border-radius-base;
+$card-border-width: 0px;
+$card-border-color: color("gray-3");
+$card-font-size: font-size("sm");
+
+// dropdowns
+$dropdown-item-font-size: font-size("sm");
+$dropdown-border-size: 1px;
+$dropdown-border-color: color("gray-7");
+$dropdown-border-radius: $border-radius-base;
+$dropdown-bg: color("gray-1");
+$dropdown-link-color: color("gray-9");
+$dropdown-link-hover-bg: color("gray-3");
+$drodown-arrow-color: color("gray-6");
+$dropdown-no-link-color: color("gray-6");
+$dropdown-feature-background: brand-color("ui-3");
+
+// panels
+$panel-bg: color("white");
+$panel-border-color: color("gray-2");
+
+// accordion
+$accordion-font-size: font-size("sm");
+$accordion-bg: color("white");
+$accordion-expanded-bg: color("white");
+$accordion-border-width: 0.05rem;
+$accordion-border-color: color("gray-4");
+$accordion-arrow-color: color("gray-4");
+
+// breadcrumbs
+$breadcrumbs-caret-color: color("brand-2");
+
+// form inputs
+$input-bg-color: color("gray-1");
+$input-height: 48px;
+$input-text-color: $body-font-color;
+$input-font-size: font-size("sm");
+$input-border-radius: $border-radius-base;
+$input-border-color: color("gray-7");
+$input-border-width: 1px;
+
+$input-placeholder-color: color("gray-5");
+$input-focus-border-color: color("ui-1");
+$input-focus-bg-color: color("white");
+
+$input-disabled-color: color("gray-5");
+$input-disabled-border-color: color("gray-5");
+$input-disabled-bg: $input-bg-color;
+
+// forms
+$form-label-font-size: font-size("sm");
+$form-label-color: color("gray-9");
+$form-status-message-font-size: font-size("sm");
+
+// fieldset
+$fieldset-legend-font-size: font-size("sm");
+$fieldset-legend-font-weight: font-weight("bold");
+
+// checkboxes
+$checkbox-border-color: $input-border-color;
+$checkbox-fill-color: color("brand-2");
+
+// radio buttons
+$radio-border-color: $input-border-color;
+$radio-fill-color: color("brand-2");
+
+// tables
+$table-font-size: font-size("sm");
+$table-header-bg: color("gray-2");
+$table-row-bg-even: color("gray-2");
+$table-row-bg-odd: transparent;
+
+// modals
+$modal-bg: color("white");
+$modal-overlay-bg: color("gray-9");
+$modal-font-size: font-size("sm");
+
+// alerts
+$alert-border-radius: $border-radius-base;
+$alert-padding: spacing("sm");
+
+// notifications
+
+$noficiation-bg-color: color("gray-1");
+$notification-border-radius: $border-radius-base;
+
+// tree menu
+$tree-menu-font-size: font-size("sm");
+$tree-menu-link-color: color("gray-5");
+$tree-menu-link-hover: color("gray-8");
+
+// viewport breakpoints
+$breakpoint-xxs: 360px;
+$breakpoint-xs: 600px;
+$breakpoint-sm: 960px;
+$breakpoint-md: 1280px;
+$breakpoint-lg: 1800px;
+
+// YIQ contrast colors
+$yiq-contrasted-dark-default: type-color("normal") !default;
+$yiq-contrasted-light-default: type-color("inverse") !default;
+$yiq-contrasted-threshold: 128 !default;
+$yiq-debug: false !default;
+
+// Image Filtering
+$filter-gray-100: gray(100%);
+
+// Theme Mixins
+$brand-theme-text-color: color("gray-1");
+$gray-theme-text-color: color("gray-7");
+
+@mixin theme-1 {
+  color: color("gray-7");
+}
+
+@mixin theme-2 {
+  color: color("gray-7");
+}
+
+@mixin theme-3 {
+  color: color("gray-7");
+}
+
+@mixin theme-4 {
+  color: color("gray-1");
+}
+
+@mixin theme-5 {
+  color: color("gray-1");
+}
+
+@mixin light-theme {
+  background-color: color("gray-1");
+  color: $gray-theme-text-color;
+}
+
+@mixin dark-theme {
+  background-color: color("gray-2");
+  color: $gray-theme-text-color;
+}
+
+@mixin light-brand-theme {
+  background-color: color("brand-4");
+  color: $brand-theme-text-color;
+}
+
+@mixin dark-brand-theme {
+  background-color: color("brand-2");
+  color: $brand-theme-text-color;
+}
+
+@mixin very-dark-brand-theme {
+  background-color: color("brand-1");
+  color: $brand-theme-text-color;
+}
+
+@mixin brand-theme-text {
+  color: $brand-theme-text-color;
+}
+
+@mixin brand-theme-fill {
+  fill: $brand-theme-text-color;
+}
+
+@mixin brand-theme-border {
+  border-color: $brand-theme-text-color;
+}
+
+@mixin brand-theme-link-text {
+  color: $brand-theme-text-color !important;
+}
+
+@mixin light-brand-bg {
+  background-color: color("brand-4");
+}
+
+@mixin dark-brand-bg {
+  background-color: color("brand-2");
+}
+
+@mixin very-dark-brand-bg {
+  background-color: color("brand-1");
+}
+
+@mixin brand-link-text-deco {
+  text-decoration-color: color("gray-2") !important;
+}
+
+@mixin icon-base() {
+  display: inline-block;
+  background-repeat: no-repeat;
+}
+
+@mixin container-wrap {
+  padding-right: var(--outer-margin, 2rem);
+  padding-left: var(--outer-margin, 2rem);
+  box-sizing: border-box;
+  max-width: 64rem;
+  margin: 0 auto;
+}
+
+@mixin header-standard-size {
+  font-size: $heading-3-size;
+  line-height: 50px;
+  letter-spacing: -0.005em;
+  margin-bottom: 6px;
+  @include benton-very-bold();
+}
+
+@mixin subheader-standard-size {
+  font-size: $subheading-size;
+  letter-spacing: 0.0175em;
+  @include benton-light();
+  margin-bottom: 20px;
+  line-height: 27px;
+}
+
+@mixin text-standard-size {
+  font-size: font-size("micro");
+  line-height: 18px;
+  letter-spacing: -0.005em;
+  @include benton-light();
+  margin-bottom: 37px;
+}
+
+@mixin h1-standard-size {
+  @include benton-very-bold();
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0.07em;
+}
+
+@mixin h2-standard-size {
+  font-size: 38px;
+  line-height: 43px;
+  @include benton-very-bold();
+}
+
+@mixin h3-standard-size {
+  font-size: 28px;
+  line-height: 34px;
+  font-weight: 800;
+}
+
+@mixin h4-standard-size {
+  font-size: 20px;
+  line-height: 24px;
+  @include benton-very-bold();
+}
+
+@mixin h5-standard-size {
+  font-size: 24px;
+  line-height: 29px;
+  @include benton-medium();
+}
+
+@mixin h6-standard-size {
+  font-size: 16px;
+  line-height: 29px;
+  @include benton-normal();
+}