@openedx/paragon 22.0.0-alpha.24 → 22.1.0

package/scss/core/_variables.scss

@@ -0,0 +1,875 @@
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+@import "exports.module.scss";
+
+// Color system
+$white:    #FFFFFF !default;
+$gray-100: #EBEBEB !default;
+$gray-200: #CCCCCC !default;
+$gray-300: #ADADAD !default;
+$gray-400: #8F8F8F !default;
+$gray-500: #707070 !default;
+$gray-600: #5C5C5C !default;
+$gray-700: #454545 !default;
+$gray-800: #333333 !default;
+$gray-900: #212529 !default;
+$black:    #000000 !default;
+
+$grays: () !default;
+$grays: map-merge(
+  (
+    "100": $gray-100,
+    "200": $gray-200,
+    "300": $gray-300,
+    "400": $gray-400,
+    "500": $gray-500,
+    "600": $gray-600,
+    "700": $gray-700,
+    "800": $gray-800,
+    "900": $gray-900
+  ),
+  $grays
+);
+
+$blue: #23419F !default;
+$red: #C32D3A !default;
+$yellow: #FFD900 !default;
+$green: #178253 !default;
+$teal: #006DAA !default;
+
+$colors: () !default;
+$colors: map-merge(
+  (
+    "blue": $blue,
+    "green": $green,
+    "teal": $teal,
+    "red": $red,
+    "yellow": $yellow,
+    "white": $white,
+    "gray": $gray-500,
+    "dark-gray": $gray-700,
+  ),
+  $colors
+);
+
+$primary: #0A3055 !default;
+$secondary: $gray-700 !default;
+$brand: #9D0054 !default;
+$success: $green !default;
+$info: $teal !default;
+$danger: $red !default;
+$warning: $yellow !default;
+$light: #E1DDDB !default;
+$dark: #273F2F !default;
+$accent-a: #00BBF9 !default;
+$accent-b: #FFEE88 !default;
+
+$theme-colors: () !default;
+$theme-colors: map-merge(
+  (
+    "primary":    $primary,
+    "secondary":  $secondary,
+    "brand":      $brand,
+    "success":    $success,
+    "info":       $info,
+    "warning":    $warning,
+    "danger":     $danger,
+    "light":      $light,
+    "dark":       $dark,
+    "gray":       $gray-500,
+    "accent-a":   $accent-a,
+    "accent-b":   $accent-b,
+  ),
+  $theme-colors
+);
+
+$primary-100: mix(white, $primary, 94%) !default;
+$primary-200: mix(white, $primary, 75%) !default;
+$primary-300: mix(white, $primary, 50%) !default;
+$primary-400: mix(white, $primary, 25%) !default;
+$primary-500: $primary !default;
+$primary-600: mix(black, $primary, 10%) !default;
+$primary-700: mix(black, $primary, 20%) !default;
+$primary-800: mix(black, $primary, 25%) !default;
+$primary-900: mix(black, $primary, 30%) !default;
+
+$secondary-100: mix(white, $secondary, 94%) !default;
+$secondary-200: mix(white, $secondary, 75%) !default;
+$secondary-300: mix(white, $secondary, 50%) !default;
+$secondary-400: mix(white, $secondary, 25%) !default;
+$secondary-500: $secondary !default;
+$secondary-600: mix(black, $secondary, 10%) !default;
+$secondary-700: mix(black, $secondary, 20%) !default;
+$secondary-800: mix(black, $secondary, 25%) !default;
+$secondary-900: mix(black, $secondary, 30%) !default;
+
+$brand-100: mix(white, $brand, 94%) !default;
+$brand-200: mix(white, $brand, 75%) !default;
+$brand-300: mix(white, $brand, 50%) !default;
+$brand-400: mix(white, $brand, 25%) !default;
+$brand-500: $brand !default;
+$brand-600: mix(black, $brand, 10%) !default;
+$brand-700: mix(black, $brand, 20%) !default;
+$brand-800: mix(black, $brand, 25%) !default;
+$brand-900: mix(black, $brand, 30%) !default;
+
+$success-100: mix(white, $success, 94%) !default;
+$success-200: mix(white, $success, 75%) !default;
+$success-300: mix(white, $success, 50%) !default;
+$success-400: mix(white, $success, 25%) !default;
+$success-500: $success !default;
+$success-600: mix(black, $success, 10%) !default;
+$success-700: mix(black, $success, 20%) !default;
+$success-800: mix(black, $success, 25%) !default;
+$success-900: mix(black, $success, 30%) !default;
+
+$info-100: mix(white, $info, 94%) !default;
+$info-200: mix(white, $info, 75%) !default;
+$info-300: mix(white, $info, 50%) !default;
+$info-400: mix(white, $info, 25%) !default;
+$info-500: $info !default;
+$info-600: mix(black, $info, 10%) !default;
+$info-700: mix(black, $info, 20%) !default;
+$info-800: mix(black, $info, 25%) !default;
+$info-900: mix(black, $info, 30%) !default;
+
+$warning-100: mix(white, $warning, 94%) !default;
+$warning-200: mix(white, $warning, 75%) !default;
+$warning-300: mix(white, $warning, 50%) !default;
+$warning-400: mix(white, $warning, 25%) !default;
+$warning-500: $warning !default;
+$warning-600: mix(black, $warning, 10%) !default;
+$warning-700: mix(black, $warning, 20%) !default;
+$warning-800: mix(black, $warning, 25%) !default;
+$warning-900: mix(black, $warning, 30%) !default;
+
+$danger-100: mix(white, $danger, 94%) !default;
+$danger-200: mix(white, $danger, 75%) !default;
+$danger-300: mix(white, $danger, 50%) !default;
+$danger-400: mix(white, $danger, 25%) !default;
+$danger-500: $danger !default;
+$danger-600: mix(black, $danger, 10%) !default;
+$danger-700: mix(black, $danger, 20%) !default;
+$danger-800: mix(black, $danger, 25%) !default;
+$danger-900: mix(black, $danger, 30%) !default;
+
+$light-100: mix(white, $light, 94%) !default;
+$light-200: mix(white, $light, 75%) !default;
+$light-300: mix(white, $light, 50%) !default;
+$light-400: mix(white, $light, 25%) !default;
+$light-500: $light !default;
+$light-600: mix(black, $light, 10%) !default;
+$light-700: mix(black, $light, 20%) !default;
+$light-800: mix(black, $light, 25%) !default;
+$light-900: mix(black, $light, 30%) !default;
+
+$dark-100: mix(white, $dark, 94%) !default;
+$dark-200: mix(white, $dark, 75%) !default;
+$dark-300: mix(white, $dark, 50%) !default;
+$dark-400: mix(white, $dark, 25%) !default;
+$dark-500: $dark !default;
+$dark-600: mix(black, $dark, 10%) !default;
+$dark-700: mix(black, $dark, 20%) !default;
+$dark-800: mix(black, $dark, 25%) !default;
+$dark-900: mix(black, $dark, 30%) !default;
+
+$theme-color-levels: () !default;
+
+$theme-color-levels: map-merge(
+  (
+    "gray-100": $gray-100,
+    "gray-200": $gray-200,
+    "gray-300": $gray-300,
+    "gray-400": $gray-400,
+    "gray-500": $gray-500,
+    "gray-600": $gray-600,
+    "gray-700": $gray-700,
+    "gray-800": $gray-800,
+    "gray-900": $gray-900,
+    "primary-100": $primary-100,
+    "primary-200": $primary-200,
+    "primary-300": $primary-300,
+    "primary-400": $primary-400,
+    "primary-500": $primary-500,
+    "primary-600": $primary-600,
+    "primary-700": $primary-700,
+    "primary-800": $primary-800,
+    "primary-900": $primary-900,
+    "secondary-100": $secondary-100,
+    "secondary-200": $secondary-200,
+    "secondary-300": $secondary-300,
+    "secondary-400": $secondary-400,
+    "secondary-500": $secondary-500,
+    "secondary-600": $secondary-600,
+    "secondary-700": $secondary-700,
+    "secondary-800": $secondary-800,
+    "secondary-900": $secondary-900,
+    "brand-100": $brand-100,
+    "brand-200": $brand-200,
+    "brand-300": $brand-300,
+    "brand-400": $brand-400,
+    "brand-500": $brand-500,
+    "brand-600": $brand-600,
+    "brand-700": $brand-700,
+    "brand-800": $brand-800,
+    "brand-900": $brand-900,
+    "success-100": $success-100,
+    "success-200": $success-200,
+    "success-300": $success-300,
+    "success-400": $success-400,
+    "success-500": $success-500,
+    "success-600": $success-600,
+    "success-700": $success-700,
+    "success-800": $success-800,
+    "success-900": $success-900,
+    "info-100": $info-100,
+    "info-200": $info-200,
+    "info-300": $info-300,
+    "info-400": $info-400,
+    "info-500": $info-500,
+    "info-600": $info-600,
+    "info-700": $info-700,
+    "info-800": $info-800,
+    "info-900": $info-900,
+    "warning-100": $warning-100,
+    "warning-200": $warning-200,
+    "warning-300": $warning-300,
+    "warning-400": $warning-400,
+    "warning-500": $warning-500,
+    "warning-600": $warning-600,
+    "warning-700": $warning-700,
+    "warning-800": $warning-800,
+    "warning-900": $warning-900,
+    "danger-100": $danger-100,
+    "danger-200": $danger-200,
+    "danger-300": $danger-300,
+    "danger-400": $danger-400,
+    "danger-500": $danger-500,
+    "danger-600": $danger-600,
+    "danger-700": $danger-700,
+    "danger-800": $danger-800,
+    "danger-900": $danger-900,
+    "light-100": $light-100,
+    "light-200": $light-200,
+    "light-300": $light-300,
+    "light-400": $light-400,
+    "light-500": $light-500,
+    "light-600": $light-600,
+    "light-700": $light-700,
+    "light-800": $light-800,
+    "light-900": $light-900,
+    "dark-100": $dark-100,
+    "dark-200": $dark-200,
+    "dark-300": $dark-300,
+    "dark-400": $dark-400,
+    "dark-500": $dark-500,
+    "dark-600": $dark-600,
+    "dark-700": $dark-700,
+    "dark-800": $dark-800,
+    "dark-900": $dark-900,
+  ),
+  $theme-color-levels
+);
+
+$element-color-levels: () !default;
+
+$element-color-levels: map-merge(
+  (
+    "background": 100,
+    "disabled-border": 100,
+    "border": 200,
+    "icon": 300,
+    "active-border": 300,
+    "focus": 500,
+    "graphic": 300,
+    "default": 500,
+    "light-text": 500,
+    "hover": 700,
+    "text": 700,
+    "active": 900,
+    "dark-text": 900,
+  ),
+  $element-color-levels
+);
+
+// Set a specific jump point for requesting color jumps
+$theme-color-interval:      8% !default;
+
+// The yiq lightness value that determines when the lightness
+// of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+$yiq-contrasted-threshold:  150 !default;
+
+// Customize the light and dark text colors for use in our YIQ color contrast function.
+$yiq-text-dark:             theme-color("gray", "text") !default;
+$yiq-text-light:            $white !default;
+
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+  ("<", "%3c"),
+  (">", "%3e"),
+  ("#", "%23"),
+  ("(", "%28"),
+  (")", "%29"),
+) !default;
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-caret:                                true !default;
+$enable-rounded:                              true !default;
+$enable-shadows:                              false !default;
+$enable-gradients:                            false !default;
+$enable-transitions:                          true !default;
+$enable-prefers-reduced-motion-media-query:   true !default;
+$enable-hover-media-query:                    false !default; // Deprecated, no longer affects any compiled CSS
+$enable-grid-classes:                         true !default;
+$enable-pointer-cursor-for-buttons:           true !default;
+$enable-print-styles:                         true !default;
+$enable-responsive-font-sizes:                false !default;
+$enable-validation-icons:                     false !default;
+$enable-deprecation-messages:                 true !default;
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+
+$spacer: 1rem !default;
+$spacers: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$spacers: map-merge(
+  (
+    0: 0,
+    1: ($spacer * .25),
+    1\.5: ($spacer * .375),
+    2: ($spacer * .5),
+    2\.5: ($spacer * .75),
+    3: $spacer,
+    3\.5: ($spacer * 1.25),
+    4: ($spacer * 1.5),
+    4\.5: ($spacer * 2),
+    5: ($spacer * 3),
+    5\.5: ($spacer * 4),
+    6: ($spacer * 5),
+  ),
+  $spacers
+);
+
+// This variable affects the `.h-*` and `.w-*` classes.
+$sizes: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$sizes: map-merge(
+  (
+    25: 25%,
+    50: 50%,
+    75: 75%,
+    100: 100%,
+    auto: auto
+  ),
+  $sizes
+);
+
+// Body
+//
+// Settings for the `<body>` element.
+
+$body-bg:                   $white !default;
+$body-color:                $gray-700 !default;
+
+// Links
+//
+// Style anchor elements.
+
+$link-color:                              $info-500 !default;
+$link-decoration:                         none !default;
+$link-hover-color:                        darken($link-color, 15%) !default;
+$link-hover-decoration:                   underline !default;
+$inline-link-color:                       $info-500 !default;
+$inline-link-decoration:                  underline !default;
+$inline-link-decoration-color:            rgba($inline-link-color, .3) !default;
+$inline-link-hover-color:                 darken($inline-link-color, 15%) !default;
+$inline-link-hover-decoration:            underline !default;
+$inline-link-hover-decoration-color:      rgba($inline-link-hover-color, 1) !default;
+
+$muted-link-color:                              $primary-500 !default;
+$muted-link-decoration:                         none !default;
+$muted-link-hover-color:                        darken($muted-link-color, 15%) !default;
+$muted-link-hover-decoration:                   underline !default;
+$muted-inline-link-color:                       $primary-500 !default;
+$muted-inline-link-decoration:                  underline !default;
+$muted-inline-link-decoration-color:            rgba($muted-inline-link-color, .3) !default;
+$muted-inline-link-hover-color:                 darken($muted-inline-link-color, 15%) !default;
+$muted-inline-link-hover-decoration:            underline !default;
+$muted-inline-link-hover-decoration-color:      rgba($muted-inline-link-hover-color, 1) !default;
+
+$brand-link-color:                              $brand-500 !default;
+$brand-link-decoration:                         none !default;
+$brand-link-hover-color:                        darken($brand-link-color, 15%) !default;
+$brand-link-hover-decoration:                   underline !default;
+$brand-inline-link-color:                       $brand-500 !default;
+$brand-inline-link-decoration:                  underline !default;
+$brand-inline-link-decoration-color:            rgba($brand-inline-link-color, .3) !default;
+$brand-inline-link-hover-color:                 darken($brand-inline-link-color, 15%) !default;
+$brand-inline-link-hover-decoration:            underline !default;
+$brand-inline-link-hover-decoration-color:      rgba($brand-inline-link-hover-color, 1) !default;
+
+// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
+$emphasized-link-hover-darken-percentage: 15% !default;
+
+// Paragraphs
+//
+// Style p element.
+
+$paragraph-margin-bottom:   1rem !default;
+
+@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
+@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1600px
+) !default;
+
+@include _assert-ascending($container-max-widths, "$container-max-widths");
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns:                12 !default;
+$grid-gutter-width:           24px !default;
+$grid-row-columns:            6 !default;
+
+$max-width-xs: 464px !default;
+$max-width-sm: 708px !default;
+$max-width-md: 952px !default;
+$max-width-lg: 1196px !default;
+$max-width-xl: 1440px !default;
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$line-height-lg:              1.5 !default;
+$line-height-sm:              1.5 !default;
+
+$border-width:                1px !default;
+$border-color:                theme-color("gray", "border") !default;
+
+$border-radius:               .375rem !default;
+$border-radius-lg:            .425rem !default;
+$border-radius-sm:            .25rem !default;
+
+$rounded-pill:                50rem !default;
+
+$level-1-box-shadow:          0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15) !default;
+$level-2-box-shadow:          0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15) !default;
+$level-3-box-shadow:          0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15) !default;
+$level-4-box-shadow:          0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15) !default;
+$level-5-box-shadow:          0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15) !default;
+
+$box-shadow-down-1:           0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15) !default;
+$box-shadow-down-2:           0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15) !default;
+$box-shadow-down-3:           0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15) !default;
+$box-shadow-down-4:           0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15) !default;
+$box-shadow-down-5:           0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15) !default;
+
+$box-shadow-left-1:           -.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15) !default;
+$box-shadow-left-2:           -.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15) !default;
+$box-shadow-left-3:           -.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15) !default;
+$box-shadow-left-4:           -.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15) !default;
+$box-shadow-left-5:           -1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15) !default;
+
+$box-shadow-up-1:             0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15) !default;
+$box-shadow-up-2:             0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15) !default;
+$box-shadow-up-3:             0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15) !default;
+$box-shadow-up-4:             0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15) !default;
+$box-shadow-up-5:             0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15) !default;
+
+$box-shadow-right-1:          .0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15) !default;
+$box-shadow-right-2:          .125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15) !default;
+$box-shadow-right-3:          .5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15) !default;
+$box-shadow-right-4:          .625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15) !default;
+$box-shadow-right-5:          1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15) !default;
+
+$box-shadow-centered-1:       0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15) !default;
+$box-shadow-centered-2:       0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15) !default;
+$box-shadow-centered-3:       0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15) !default;
+$box-shadow-centered-4:       0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15) !default;
+$box-shadow-centered-5:       0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15) !default;
+
+@mixin pgn-box-shadow($level, $side) {
+  @if $side == "down" {
+    @if $level == 1 {
+      box-shadow: $box-shadow-down-1;
+    }
+
+    @else if $level == 2 {
+      box-shadow: $box-shadow-down-2;
+    }
+
+    @else if $level == 3 {
+      box-shadow: $box-shadow-down-3;
+    }
+
+    @else if $level == 4 {
+      box-shadow: $box-shadow-down-4;
+    }
+
+    @else if $level == 5 {
+      box-shadow: $box-shadow-down-5;
+    }
+
+    @else {
+      @error "Box-shadow level #{$level} does not exist";
+    }
+  }
+
+  @if $side == "left" {
+    @if $level == 1 {
+      box-shadow: $box-shadow-left-1;
+    }
+
+    @else if $level == 2 {
+      box-shadow: $box-shadow-left-2;
+    }
+
+    @else if $level == 3 {
+      box-shadow: $box-shadow-left-3;
+    }
+
+    @else if $level == 4 {
+      box-shadow: $box-shadow-left-4;
+    }
+
+    @else if $level == 5 {
+      box-shadow: $box-shadow-left-5;
+    }
+
+    @else {
+      @error "Box-shadow level #{$level} does not exist";
+    }
+  }
+
+  @if $side == "up" {
+    @if $level == 1 {
+      box-shadow: $box-shadow-up-1;
+    }
+
+    @else if $level == 2 {
+      box-shadow: $box-shadow-up-2;
+    }
+
+    @else if $level == 3 {
+      box-shadow: $box-shadow-up-3;
+    }
+
+    @else if $level == 4 {
+      box-shadow: $box-shadow-up-4;
+    }
+
+    @else if $level == 5 {
+      box-shadow: $box-shadow-up-5;
+    }
+
+    @else {
+      @error "Box-shadow level #{$level} does not exist";
+    }
+  }
+
+  @if $side == "right" {
+    @if $level == 1 {
+      box-shadow: $box-shadow-right-1;
+    }
+
+    @else if $level == 2 {
+      box-shadow: $box-shadow-right-2;
+    }
+
+    @else if $level == 3 {
+      box-shadow: $box-shadow-right-3;
+    }
+
+    @else if $level == 4 {
+      box-shadow: $box-shadow-right-4;
+    }
+
+    @else if $level == 5 {
+      box-shadow: $box-shadow-right-5;
+    }
+
+    @else {
+      @error "Box-shadow level #{$level} does not exist";
+    }
+  }
+
+  @if $side == "centered" {
+    @if $level == 1 {
+      box-shadow: $box-shadow-centered-1;
+    }
+
+    @else if $level == 2 {
+      box-shadow: $box-shadow-centered-2;
+    }
+
+    @else if $level == 3 {
+      box-shadow: $box-shadow-centered-3;
+    }
+
+    @else if $level == 4 {
+      box-shadow: $box-shadow-centered-4;
+    }
+
+    @else if $level == 5 {
+      box-shadow: $box-shadow-centered-5;
+    }
+
+    @else {
+      @error "Box-shadow level #{$level} does not exist";
+    }
+  }
+}
+
+$levels: (
+  1,
+  2,
+  3,
+  4,
+  5
+) !default;
+
+$box-shadow-sides: (
+  "down",
+  "up",
+  "right",
+  "left",
+  "centered"
+) !default;
+
+$box-shadow-sm:               0 .0625rem .125rem rgba($black, .2) !default;
+$box-shadow:                  0 .125rem .25rem rgba($black, .3) !default;
+$box-shadow-lg:               0 .25rem .5rem rgba($black, .3) !default;
+
+$component-active-color:      $white !default;
+$component-active-bg:         theme-color("primary") !default;
+
+$caret-width:                 .3em !default;
+$caret-vertical-align:        $caret-width * .85 !default;
+$caret-spacing:               $caret-width * .85 !default;
+
+$transition-base:             all .2s ease-in-out !default;
+$transition-fade:             opacity .15s linear !default;
+$transition-collapse:         height .35s ease !default;
+$transition-collapse-width:   width .35s ease !default;
+
+$embed-responsive-aspect-ratios: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$embed-responsive-aspect-ratios: join(
+  (
+    (21 9),
+    (16 9),
+    (4 3),
+    (1 1),
+  ),
+  $embed-responsive-aspect-ratios
+);
+
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
+// stylelint-disable value-keyword-case
+$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI",
+  Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-serif:           serif !default;
+$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+  "Courier New", monospace !default;
+$font-family-base:            $font-family-sans-serif !default;
+// stylelint-enable value-keyword-case
+
+$font-size-base:              1.125rem !default; // Assumes the browser default, typically `16px`
+$font-size-lg:                $font-size-base * 1.25 !default;
+$font-size-sm:                .875rem !default;
+$font-size-xs:                .75rem !default;
+
+$font-weight-lighter:         lighter !default;
+$font-weight-light:           300 !default;
+$font-weight-normal:          400 !default;
+$font-weight-semi-bold:       500 !default;
+$font-weight-bold:            700 !default;
+$font-weight-bolder:          bolder !default;
+
+$font-weight-base:            $font-weight-normal !default;
+$line-height-base:            1.5556 !default;
+
+$h1-font-size:                2.5rem !default;
+$h2-font-size:                2rem !default;
+$h3-font-size:                1.375rem !default;
+$h4-font-size:                1.125rem !default;
+$h5-font-size:                .875rem !default;
+$h6-font-size:                .75rem !default;
+
+$h1-mobile-font-size:         2.25rem !default;
+$h2-mobile-font-size:         $h2-font-size !default;
+$h3-mobile-font-size:         $h3-font-size !default;
+$h4-mobile-font-size:         $h4-font-size !default;
+$h5-mobile-font-size:         $h5-font-size !default;
+$h6-mobile-font-size:         $h6-font-size !default;
+
+$headings-margin-bottom:      calc($spacer / 2) !default;
+$headings-font-family:        null !default;
+$headings-font-weight:        $font-weight-bold !default;
+$headings-line-height:        1.25 !default;
+$headings-color:              $black !default;
+
+$display1-size:               3.75rem !default;
+$display2-size:               4.875rem !default;
+$display3-size:               5.625rem !default;
+$display4-size:               7.5rem !default;
+
+$display-mobile-size:         3.25rem !default;
+
+$display1-weight:             700 !default;
+$display2-weight:             700 !default;
+$display3-weight:             700 !default;
+$display4-weight:             700 !default;
+
+$display-line-height:         1 !default;
+$display-mobile-line-height:  3.5rem !default;
+
+$lead-font-size:              $font-size-base * 1.25 !default;
+$lead-font-weight:            null !default;
+
+$small-font-size:             87.5% !default;
+$x-small-font-size:             75% !default;
+
+$micro-font-size:        .688rem;
+$micro-line-height:      .938rem;
+
+$text-muted:                  theme-color("gray", "light-text") !default;
+
+$blockquote-small-color:      theme-color("gray", "light-text") !default;
+$blockquote-small-font-size:  $small-font-size !default;
+$blockquote-font-size:        $font-size-base * 1.25 !default;
+
+$hr-border-color:             rgba($black, .1) !default;
+$hr-border-width:             $border-width !default;
+
+$mark-padding:                .2em !default;
+
+$dt-font-weight:              $font-weight-bold !default;
+
+$list-inline-padding:         .5rem !default;
+
+$mark-bg:                     #FFF243 !default;
+
+$hr-margin-y:                 $spacer !default;
+
+$label-margin-bottom:                   .5rem !default;
+
+$table-cell-padding:          .75rem !default;
+$table-cell-padding-sm:       .3rem !default;
+$table-caption-color:         $text-muted !default;
+$table-border-color:          $border-color !default;
+$table-th-font-weight:        null !default;
+
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+
+$zindex-dropdown:                   1000 !default;
+$zindex-sticky:                     1020 !default;
+$zindex-fixed:                      1030 !default;
+$zindex-sheet-backdrop:             1031 !default;
+$zindex-sheet:                      1032 !default;
+$zindex-modal-backdrop:             1040 !default;
+$zindex-modal:                      1050 !default;
+$zindex-popover:                    1060 !default;
+$zindex-tooltip:                    1070 !default;
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+$input-btn-padding-y:         .5625rem !default;
+$input-btn-padding-x:         1rem !default;
+$input-btn-font-family:       null !default;
+$input-btn-font-size:         1.125rem !default;
+$input-btn-line-height:       1.3333 !default;
+
+$input-btn-focus-width:       1px !default;
+$input-btn-focus-color:       $component-active-bg !default;
+$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+
+$input-btn-padding-y-sm:         .4375rem !default;
+$input-btn-padding-x-sm:         .75rem !default;
+$input-btn-font-size-sm:         .875rem !default;
+$input-btn-line-height-sm:       1.4286 !default;
+
+$input-btn-padding-y-lg:      .6875rem !default;
+$input-btn-padding-x-lg:      1.25rem !default;
+$input-btn-font-size-lg:      1.325rem !default;
+$input-btn-line-height-lg:    $line-height-lg !default;
+
+$input-btn-border-width:      $border-width !default;
+
+// Spinners
+
+// $spinner-width:           2rem !default;
+// $spinner-height:          $spinner-width !default;
+$spinner-vertical-align:      -.125em !default;
+
+// $spinner-border-width:    .25em !default;
+
+// $spinner-width-sm:        1rem !default;
+// $spinner-height-sm:       $spinner-width-sm !default;
+// $spinner-border-width-sm: .2em !default;
+
+// Utilities
+
+$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
+$overflows: auto, hidden !default;
+$positions: static, relative, absolute, fixed, sticky !default;
+$user-selects: all, auto, none !default;
+
+// Printing
+
+$print-page-size:                   a3 !default;
+$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;
+
+// List group
+
+$list-group-color:                  null !default;
+$list-group-bg:                     $white !default;
+$list-group-border-color:           rgba($black, .125) !default;
+$list-group-border-width:           $border-width !default;
+$list-group-border-radius:          $border-radius !default;
+
+$list-group-item-padding-y:         .75rem !default;
+$list-group-item-padding-x:         1.25rem !default;
+
+$list-group-hover-bg:               $gray-100 !default;
+$list-group-active-color:           $component-active-color !default;
+$list-group-active-bg:              $component-active-bg !default;
+$list-group-active-border-color:    $list-group-active-bg !default;
+
+$list-group-disabled-color:         $gray-600 !default;
+$list-group-disabled-bg:            $list-group-bg !default;
+
+$list-group-action-color:           $gray-700 !default;
+$list-group-action-hover-color:     $list-group-action-color !default;
+
+$list-group-action-active-color:    $body-color !default;
+$list-group-action-active-bg:       $gray-200 !default;