@openedx/paragon 22.3.2 → 23.0.0-alpha.1

package/scss/core/_variables.scss

@@ -1,875 +0,0 @@
-// 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;