@openedx/paragon 22.4.0 → 23.0.0-alpha.1

package/styles/scss/core/_variables.scss

@@ -0,0 +1,869 @@
+// 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: var(--pgn-color-white) !default;
+$gray-100: var(--pgn-color-gray-100) !default;
+$gray-200: var(--pgn-color-gray-200) !default;
+$gray-300: var(--pgn-color-gray-300) !default;
+$gray-400: var(--pgn-color-gray-400) !default;
+$gray-500: var(--pgn-color-gray-500) !default;
+$gray-600: var(--pgn-color-gray-600) !default;
+$gray-700: var(--pgn-color-gray-700) !default;
+$gray-800: var(--pgn-color-gray-800) !default;
+$gray-900: var(--pgn-color-gray-900) !default;
+$black: var(--pgn-color-black) !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: var(--pgn-color-blue) !default;
+$red: var(--pgn-color-red) !default;
+$yellow: var(--pgn-color-yellow) !default;
+$green: var(--pgn-color-green) !default;
+$teal: var(--pgn-color-teal) !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: var(--pgn-color-primary-base) !default;
+$secondary: var(--pgn-color-secondary-base) !default;
+$brand: var(--pgn-color-brand-base) !default;
+$success: var(--pgn-color-success-base) !default;
+$info: var(--pgn-color-info-base) !default;
+$danger: var(--pgn-color-danger-base) !default;
+$warning: var(--pgn-color-warning-base) !default;
+$light: var(--pgn-color-light-base) !default;
+$dark: var(--pgn-color-dark-base) !default;
+$accent-a: var(--pgn-color-accent-a) !default;
+$accent-b: var(--pgn-color-accent-b) !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: var(--pgn-color-primary-100) !default;
+$primary-200: var(--pgn-color-primary-200) !default;
+$primary-300: var(--pgn-color-primary-300) !default;
+$primary-400: var(--pgn-color-primary-400) !default;
+$primary-500: var(--pgn-color-primary-500) !default;
+$primary-600: var(--pgn-color-primary-600) !default;
+$primary-700: var(--pgn-color-primary-700) !default;
+$primary-800: var(--pgn-color-primary-800) !default;
+$primary-900: var(--pgn-color-primary-900) !default;
+
+$secondary-100: var(--pgn-color-secondary-100) !default;
+$secondary-200: var(--pgn-color-secondary-200) !default;
+$secondary-300: var(--pgn-color-secondary-300) !default;
+$secondary-400: var(--pgn-color-secondary-400) !default;
+$secondary-500: var(--pgn-color-secondary-500) !default;
+$secondary-600: var(--pgn-color-secondary-600) !default;
+$secondary-700: var(--pgn-color-secondary-700) !default;
+$secondary-800: var(--pgn-color-secondary-800) !default;
+$secondary-900: var(--pgn-color-secondary-900) !default;
+
+$brand-100: var(--pgn-color-brand-100) !default;
+$brand-200: var(--pgn-color-brand-200) !default;
+$brand-300: var(--pgn-color-brand-300) !default;
+$brand-400: var(--pgn-color-brand-400) !default;
+$brand-500: var(--pgn-color-brand-500) !default;
+$brand-600: var(--pgn-color-brand-600) !default;
+$brand-700: var(--pgn-color-brand-700) !default;
+$brand-800: var(--pgn-color-brand-800) !default;
+$brand-900: var(--pgn-color-brand-900) !default;
+
+$success-100: var(--pgn-color-success-100) !default;
+$success-200: var(--pgn-color-success-200) !default;
+$success-300: var(--pgn-color-success-300) !default;
+$success-400: var(--pgn-color-success-400) !default;
+$success-500: var(--pgn-color-success-500) !default;
+$success-600: var(--pgn-color-success-600) !default;
+$success-700: var(--pgn-color-success-700) !default;
+$success-800: var(--pgn-color-success-800) !default;
+$success-900: var(--pgn-color-success-900) !default;
+
+$info-100: var(--pgn-color-info-100) !default;
+$info-200: var(--pgn-color-info-200) !default;
+$info-300: var(--pgn-color-info-300) !default;
+$info-400: var(--pgn-color-info-400) !default;
+$info-500: var(--pgn-color-info-500) !default;
+$info-600: var(--pgn-color-info-600) !default;
+$info-700: var(--pgn-color-info-700) !default;
+$info-800: var(--pgn-color-info-800) !default;
+$info-900: var(--pgn-color-info-900) !default;
+
+$warning-100: var(--pgn-color-warning-100) !default;
+$warning-200: var(--pgn-color-warning-200) !default;
+$warning-300: var(--pgn-color-warning-300) !default;
+$warning-400: var(--pgn-color-warning-400) !default;
+$warning-500: var(--pgn-color-warning-500) !default;
+$warning-600: var(--pgn-color-warning-600) !default;
+$warning-700: var(--pgn-color-warning-700) !default;
+$warning-800: var(--pgn-color-warning-800) !default;
+$warning-900: var(--pgn-color-warning-900) !default;
+
+$danger-100: var(--pgn-color-danger-100) !default;
+$danger-200: var(--pgn-color-danger-200) !default;
+$danger-300: var(--pgn-color-danger-300) !default;
+$danger-400: var(--pgn-color-danger-400) !default;
+$danger-500: var(--pgn-color-danger-500) !default;
+$danger-600: var(--pgn-color-danger-600) !default;
+$danger-700: var(--pgn-color-danger-700) !default;
+$danger-800: var(--pgn-color-danger-800) !default;
+$danger-900: var(--pgn-color-danger-900) !default;
+
+$light-100: var(--pgn-color-light-100) !default;
+$light-200: var(--pgn-color-light-200) !default;
+$light-300: var(--pgn-color-light-300) !default;
+$light-400: var(--pgn-color-light-400) !default;
+$light-500: var(--pgn-color-light-500) !default;
+$light-600: var(--pgn-color-light-600) !default;
+$light-700: var(--pgn-color-light-700) !default;
+$light-800: var(--pgn-color-light-800) !default;
+$light-900: var(--pgn-color-light-900) !default;
+
+$dark-100: var(--pgn-color-dark-100) !default;
+$dark-200: var(--pgn-color-dark-200) !default;
+$dark-300: var(--pgn-color-dark-300) !default;
+$dark-400: var(--pgn-color-dark-400) !default;
+$dark-500: var(--pgn-color-dark-500) !default;
+$dark-600: var(--pgn-color-dark-600) !default;
+$dark-700: var(--pgn-color-dark-700) !default;
+$dark-800: var(--pgn-color-dark-800) !default;
+$dark-900: var(--pgn-color-dark-900) !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": 300,
+    "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: var(--pgn-theme-interval) !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-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: var(--pgn-spacing-spacer-base) !default;
+$spacers: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$spacers: map-merge(
+  (
+    0: 0,
+    1: calc(#{$spacer} * .25),
+    1\.5: calc(#{$spacer} * .375),
+    2: calc(#{$spacer} * .5),
+    2\.5: calc(#{$spacer} * .75),
+    3: $spacer,
+    3\.5: calc(#{$spacer} * 1.25),
+    4: calc(#{$spacer} * 1.5),
+    4\.5: calc(#{$spacer} * 2),
+    5: calc(#{$spacer} * 3),
+    5\.5: calc(#{$spacer} * 4),
+    6: calc(#{$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: var(--pgn-color-body-bg) !default;
+$body-color: var(--pgn-color-body-base) !default;
+
+// Links
+//
+// Style anchor elements.
+
+$link-color: var(--pgn-color-link-base) !default;
+$link-decoration: var(--pgn-typography-link-decoration-base) !default;
+$link-hover-color: var(--pgn-color-link-hover) !default;
+$link-hover-decoration: var(--pgn-typography-link-decoration-hover) !default;
+$inline-link-color: var(--pgn-color-link-inline-base) !default;
+$inline-link-decoration: var(--pgn-typography-link-decoration-inline-base) !default;
+$inline-link-decoration-color: var(--pgn-color-link-inline-decoration) !default;
+$inline-link-hover-color: var(--pgn-color-link-inline-hover-base) !default;
+$inline-link-hover-decoration: var(--pgn-typography-link-decoration-inline-hover) !default;
+$inline-link-hover-decoration-color: var(--pgn-color-link-inline-hover-decoration) !default;
+
+$muted-link-color: var(--pgn-color-link-muted-base) !default;
+$muted-link-decoration: var(--pgn-typography-link-decoration-muted-base) !default;
+$muted-link-hover-color: var(--pgn-color-link-muted-hover) !default;
+$muted-link-hover-decoration: var(--pgn-typography-link-decoration-muted-hover) !default;
+$muted-inline-link-color: var(--pgn-color-link-muted-inline-base) !default;
+$muted-inline-link-decoration: var(--pgn-typography-link-decoration-muted-inline-base) !default;
+$muted-inline-link-decoration-color: var(--pgn-color-link-muted-inline-decoration) !default;
+$muted-inline-link-hover-color: var(--pgn-color-link-muted-inline-hover-base) !default;
+$muted-inline-link-hover-decoration: var(--pgn-typography-link-decoration-muted-inline-hover) !default;
+$muted-inline-link-hover-decoration-color: var(--pgn-color-link-muted-inline-hover-decoration) !default;
+
+$brand-link-color: var(--pgn-color-link-brand-base) !default;
+$brand-link-decoration: var(--pgn-typography-link-decoration-brand-base) !default;
+$brand-link-hover-color: var(--pgn-color-link-brand-hover) !default;
+$brand-link-hover-decoration: var(--pgn-typography-link-decoration-brand-hover) !default;
+$brand-inline-link-color: var(--pgn-color-link-brand-inline-base) !default;
+$brand-inline-link-decoration: var(--pgn-typography-link-decoration-brand-inline-base) !default;
+$brand-inline-link-decoration-color: var(--pgn-color-link-brand-inline-decoration) !default;
+$brand-inline-link-hover-color: var(--pgn-color-link-brand-inline-hover-base) !default;
+$brand-inline-link-hover-decoration: var(--pgn-typography-link-decoration-brand-inline-hover) !default;
+$brand-inline-link-hover-decoration-color: var(--pgn-color-link-brand-inline-hover-decoration) !default;
+
+// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
+$emphasized-link-hover-darken-percentage: var(--pgn-other-link-emphasized-hover-darken-percentage) !default;
+
+// Paragraphs
+//
+// Style p element.
+
+$paragraph-margin-bottom: var(--pgn-spacing-paragraph-margin-bottom) !default;
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1600px
+) !default;
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+// TODO: don`t create a token for this variable. Requires more changes to bootstrap files.
+$grid-columns: 12 !default;
+$grid-gutter-width: var(--pgn-spacing-grid-gutter-width) !default;
+// TODO: don`t create a token for this variable. Requires more changes to bootstrap files.
+$grid-row-columns: 6 !default;
+
+$max-width-xs: var(--pgn-size-container-max-width-xs) !default;
+$max-width-sm: var(--pgn-size-container-max-width-sm) !default;
+$max-width-md: var(--pgn-size-container-max-width-md) !default;
+$max-width-lg: var(--pgn-size-container-max-width-lg) !default;
+$max-width-xl: var(--pgn-size-container-max-width-xl) !default;
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$line-height-lg: var(--pgn-typography-line-height-lg) !default;
+$line-height-sm: var(--pgn-typography-line-height-sm) !default;
+
+$border-width: var(--pgn-size-border-width) !default;
+$border-color: var(--pgn-color-border) !default;
+
+$border-radius: var(--pgn-size-border-radius-base) !default;
+$border-radius-lg: var(--pgn-size-border-radius-lg) !default;
+$border-radius-sm: var(--pgn-size-border-radius-sm) !default;
+
+$rounded-pill: var(--pgn-size-rounded-pill) !default;
+
+$level-1-box-shadow: var(--pgn-elevation-box-shadow-level-1) !default;
+$level-2-box-shadow: var(--pgn-elevation-box-shadow-level-2) !default;
+$level-3-box-shadow: var(--pgn-elevation-box-shadow-level-3) !default;
+$level-4-box-shadow: var(--pgn-elevation-box-shadow-level-4) !default;
+$level-5-box-shadow: var(--pgn-elevation-box-shadow-level-5) !default;
+
+$box-shadow-down-1: var(--pgn-elevation-box-shadow-down-1) !default;
+$box-shadow-down-2: var(--pgn-elevation-box-shadow-down-2) !default;
+$box-shadow-down-3: var(--pgn-elevation-box-shadow-down-3) !default;
+$box-shadow-down-4: var(--pgn-elevation-box-shadow-down-4) !default;
+$box-shadow-down-5: var(--pgn-elevation-box-shadow-down-5) !default;
+
+$box-shadow-left-1: var(--pgn-elevation-box-shadow-left-1) !default;
+$box-shadow-left-2: var(--pgn-elevation-box-shadow-left-2) !default;
+$box-shadow-left-3: var(--pgn-elevation-box-shadow-left-3) !default;
+$box-shadow-left-4: var(--pgn-elevation-box-shadow-left-4) !default;
+$box-shadow-left-5: var(--pgn-elevation-box-shadow-left-5) !default;
+
+$box-shadow-up-1: var(--pgn-elevation-box-shadow-up-1) !default;
+$box-shadow-up-2: var(--pgn-elevation-box-shadow-up-2) !default;
+$box-shadow-up-3: var(--pgn-elevation-box-shadow-up-3) !default;
+$box-shadow-up-4: var(--pgn-elevation-box-shadow-up-4) !default;
+$box-shadow-up-5: var(--pgn-elevation-box-shadow-up-5) !default;
+
+$box-shadow-right-1: var(--pgn-elevation-box-shadow-right-1) !default;
+$box-shadow-right-2: var(--pgn-elevation-box-shadow-right-2) !default;
+$box-shadow-right-3: var(--pgn-elevation-box-shadow-right-3) !default;
+$box-shadow-right-4: var(--pgn-elevation-box-shadow-right-4) !default;
+$box-shadow-right-5: var(--pgn-elevation-box-shadow-right-5) !default;
+
+$box-shadow-centered-1: var(--pgn-elevation-box-shadow-centered-1) !default;
+$box-shadow-centered-2: var(--pgn-elevation-box-shadow-centered-2) !default;
+$box-shadow-centered-3: var(--pgn-elevation-box-shadow-centered-3) !default;
+$box-shadow-centered-4: var(--pgn-elevation-box-shadow-centered-4) !default;
+$box-shadow-centered-5: var(--pgn-elevation-box-shadow-centered-5) !default;
+
+@mixin pgn-box-shadow($level, $side) {
+  @if $side == "down" {
+    @if $level == 1 {
+      box-shadow: var(--pgn-elevation-box-shadow-down-1);
+    }
+
+    @else if $level == 2 {
+      box-shadow: var(--pgn-elevation-box-shadow-down-2);
+    }
+
+    @else if $level == 3 {
+      box-shadow: var(--pgn-elevation-box-shadow-down-3);
+    }
+
+    @else if $level == 4 {
+      box-shadow: var(--pgn-elevation-box-shadow-down-4);
+    }
+
+    @else if $level == 5 {
+      box-shadow: var(--pgn-elevation-box-shadow-down-5);
+    }
+
+    @else {
+      @error "Box-shadow level #{$level} does not exist";
+    }
+  }
+
+  @if $side == "left" {
+    @if $level == 1 {
+      box-shadow: var(--pgn-elevation-box-shadow-left-1);
+    }
+
+    @else if $level == 2 {
+      box-shadow: var(--pgn-elevation-box-shadow-left-2);
+    }
+
+    @else if $level == 3 {
+      box-shadow: var(--pgn-elevation-box-shadow-left-3);
+    }
+
+    @else if $level == 4 {
+      box-shadow: var(--pgn-elevation-box-shadow-left-4);
+    }
+
+    @else if $level == 5 {
+      box-shadow: var(--pgn-elevation-box-shadow-left-5);
+    }
+
+    @else {
+      @error "Box-shadow level #{$level} does not exist";
+    }
+  }
+
+  @if $side == "up" {
+    @if $level == 1 {
+      box-shadow: var(--pgn-elevation-box-shadow-up-1);
+    }
+
+    @else if $level == 2 {
+      box-shadow: var(--pgn-elevation-box-shadow-up-2);
+    }
+
+    @else if $level == 3 {
+      box-shadow: var(--pgn-elevation-box-shadow-up-3);
+    }
+
+    @else if $level == 4 {
+      box-shadow: var(--pgn-elevation-box-shadow-up-4);
+    }
+
+    @else if $level == 5 {
+      box-shadow: var(--pgn-elevation-box-shadow-up-5);
+    }
+
+    @else {
+      @error "Box-shadow level #{$level} does not exist";
+    }
+  }
+
+  @if $side == "right" {
+    @if $level == 1 {
+      box-shadow: var(--pgn-elevation-box-shadow-right-1);
+    }
+
+    @else if $level == 2 {
+      box-shadow: var(--pgn-elevation-box-shadow-right-2);
+    }
+
+    @else if $level == 3 {
+      box-shadow: var(--pgn-elevation-box-shadow-right-3);
+    }
+
+    @else if $level == 4 {
+      box-shadow: var(--pgn-elevation-box-shadow-right-4);
+    }
+
+    @else if $level == 5 {
+      box-shadow: var(--pgn-elevation-box-shadow-right-5);
+    }
+
+    @else {
+      @error "Box-shadow level #{$level} does not exist";
+    }
+  }
+
+  @if $side == "centered" {
+    @if $level == 1 {
+      box-shadow: var(--pgn-elevation-box-shadow-centered-1);
+    }
+
+    @else if $level == 2 {
+      box-shadow: var(--pgn-elevation-box-shadow-centered-2);
+    }
+
+    @else if $level == 3 {
+      box-shadow: var(--pgn-elevation-box-shadow-centered-3);
+    }
+
+    @else if $level == 4 {
+      box-shadow: var(--pgn-elevation-box-shadow-centered-4);
+    }
+
+    @else if $level == 5 {
+      box-shadow: var(--pgn-elevation-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: var(--pgn-elevation-box-shadow-sm) !default;
+$box-shadow: var(--pgn-elevation-box-shadow-base) !default;
+$box-shadow-lg: var(--pgn-elevation-box-shadow-lg) !default;
+
+$component-active-color: var(--pgn-color-active) !default;
+$component-active-bg: var(--pgn-color-bg-active) !default;
+
+$caret-width: var(--pgn-size-caret-width) !default;
+$caret-vertical-align: var(--pgn-spacing-caret-vertical-align) !default;
+$caret-spacing: var(--pgn-spacing-caret-base) !default;
+
+$transition-base: var(--pgn-transition-base) !default;
+$transition-fade: var(--pgn-transition-fade) !default;
+$transition-collapse: var(--pgn-transition-collapse-height) !default;
+$transition-collapse-width: var(--pgn-transition-collapse-width) !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.
+
+$font-family-sans-serif: var(--pgn-typography-font-family-sans-serif) !default;
+$font-family-serif: var(--pgn-typography-font-family-serif) !default;
+$font-family-monospace: var(--pgn-typography-font-family-monospace) !default;
+$font-family-base: var(--pgn-typography-font-family-base) !default;
+
+$font-size-base: var(--pgn-typography-font-size-base) !default;
+$font-size-lg: var(--pgn-typography-font-size-lg) !default;
+$font-size-sm: var(--pgn-typography-font-size-sm) !default;
+$font-size-xs: var(--pgn-typography-font-size-xs) !default;
+
+$font-weight-lighter: var(--pgn-typography-font-weight-lighter) !default;
+$font-weight-light: var(--pgn-typography-font-weight-light) !default;
+$font-weight-normal: var(--pgn-typography-font-weight-normal) !default;
+$font-weight-semi-bold: var(--pgn-typography-font-weight-semi-bold) !default;
+$font-weight-bold: var(--pgn-typography-font-weight-bold) !default;
+$font-weight-bolder: var(--pgn-typography-font-weight-bolder) !default;
+
+$font-weight-base: var(--pgn-typography-font-weight-base) !default;
+$line-height-base: var(--pgn-typography-line-height-base) !default;
+
+$h1-font-size: var(--pgn-typography-font-size-h1) !default;
+$h2-font-size: var(--pgn-typography-font-size-h2) !default;
+$h3-font-size: var(--pgn-typography-font-size-h3) !default;
+$h4-font-size: var(--pgn-typography-font-size-h4) !default;
+$h5-font-size: var(--pgn-typography-font-size-h5) !default;
+$h6-font-size: var(--pgn-typography-font-size-h6) !default;
+
+$h1-mobile-font-size: var(--pgn-typography-font-size-mobile-h1) !default;
+$h2-mobile-font-size: var(--pgn-typography-font-size-mobile-h2) !default;
+$h3-mobile-font-size: var(--pgn-typography-font-size-mobile-h3) !default;
+$h4-mobile-font-size: var(--pgn-typography-font-size-mobile-h4) !default;
+$h5-mobile-font-size: var(--pgn-typography-font-size-mobile-h5) !default;
+$h6-mobile-font-size: var(--pgn-typography-font-size-mobile-h6) !default;
+
+$headings-margin-bottom: var(--pgn-spacing-headings-margin-bottom) !default;
+$headings-font-family: var(--pgn-typography-headings-font-family) !default;
+$headings-font-weight: var(--pgn-typography-headings-font-weight) !default;
+$headings-line-height: var(--pgn-typography-headings-line-height) !default;
+$headings-color: var(--pgn-color-headings-base) !default;
+
+$display1-size: var(--pgn-typography-display-1) !default;
+$display2-size: var(--pgn-typography-display-2) !default;
+$display3-size: var(--pgn-typography-display-3) !default;
+$display4-size: var(--pgn-typography-display-4) !default;
+
+$display-mobile-size: var(--pgn-typography-display-mobile) !default;
+
+$display1-weight: var(--pgn-typography-display-weight-1) !default;
+$display2-weight: var(--pgn-typography-display-weight-2) !default;
+$display3-weight: var(--pgn-typography-display-weight-3) !default;
+$display4-weight: var(--pgn-typography-display-weight-4) !default;
+
+$display-line-height: var(--pgn-typography-display-line-height-base) !default;
+$display-mobile-line-height: var(--pgn-typography-display-line-height-mobile) !default;
+
+$lead-font-size: var(--pgn-typography-font-size-lead) !default;
+$lead-font-weight: var(--pgn-typography-font-weight-lead) !default;
+
+$small-font-size: var(--pgn-typography-font-size-small-base) !default;
+$x-small-font-size: var(--pgn-typography-font-size-small-x) !default;
+
+$micro-font-size: var(--pgn-typography-font-size-micro);
+$micro-line-height: var(--pgn-typography-line-height-micro);
+
+$text-muted: var(--pgn-color-text-muted) !default;
+
+$blockquote-small-color: theme-color("gray", "light-text") !default;
+$blockquote-small-font-size: var(--pgn-typography-blockquote-small-font-size) !default;
+$blockquote-font-size: var(--pgn-typography-blockquote-font-size) !default;
+
+$hr-border-color: var(--pgn-color-hr-border) !default;
+$hr-border-width: var(--pgn-size-hr-border-width) !default;
+
+$mark-padding: var(--pgn-spacing-mark-padding) !default;
+
+$dt-font-weight: var(--pgn-typography-dt-font-weight) !default;
+
+$list-inline-padding: var(--pgn-spacing-list-inline-padding) !default;
+
+$mark-bg: var(--pgn-color-mark-bg) !default;
+
+$hr-margin-y: var(--pgn-size-hr-border-margin-y) !default;
+
+$label-margin-bottom: var(--pgn-spacing-label-margin-bottom) !default;
+
+$table-cell-padding: var(--pgn-spacing-table-cell-padding-base) !default;
+$table-cell-padding-sm: var(--pgn-spacing-table-cell-padding-sm) !default;
+$table-caption-color: var(--pgn-color-table-caption) !default;
+$table-border-color: var(--pgn-color-table-border) !default;
+$table-th-font-weight: var(--pgn-typography-font-weight-table-th) !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: var(--pgn-elevation-dropdown-zindex) !default;
+$zindex-sticky: var(--pgn-elevation-zindex-sticky) !default;
+$zindex-fixed: var(--pgn-elevation-zindex-fixed) !default;
+$zindex-sheet-backdrop: var(--pgn-elevation-sheet-zindex-backdrop) !default;
+$zindex-sheet: var(--pgn-elevation-sheet-zindex-main) !default;
+$zindex-modal-backdrop: var(--pgn-elevation-modal-backdrop-zindex) !default;
+$zindex-modal: var(--pgn-elevation-modal-zindex) !default;
+$zindex-popover: var(--pgn-elevation-popover-zindex) !default;
+$zindex-tooltip: var(--pgn-elevation-tooltip-zindex) !default;
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+$input-btn-padding-y: var(--pgn-spacing-input-btn-padding-y) !default;
+$input-btn-padding-x: var(--pgn-spacing-input-btn-padding-x) !default;
+$input-btn-font-family: var(--pgn-typography-input-btn-font-family) !default;
+$input-btn-font-size: var(--pgn-typography-input-btn-font-size-base) !default;
+$input-btn-line-height: var(--pgn-typography-input-btn-line-height-base) !default;
+
+$input-btn-focus-width: var(--pgn-size-input-btn-focus-width) !default;
+$input-btn-focus-color: var(--pgn-color-input-btn-focus) !default;
+$input-btn-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow) !default;
+
+$input-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y) !default;
+$input-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x) !default;
+$input-btn-font-size-sm: var(--pgn-typography-input-btn-font-size-sm) !default;
+$input-btn-line-height-sm: var(--pgn-typography-input-btn-line-height-sm) !default;
+
+$input-btn-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y) !default;
+$input-btn-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x) !default;
+$input-btn-font-size-lg: var(--pgn-typography-input-btn-font-size-lg) !default;
+$input-btn-line-height-lg: var(--pgn-typography-input-btn-line-height-lg) !default;
+
+$input-btn-border-width: var(--pgn-size-input-btn-border-width) !default;
+
+// Spinners
+
+// $spinner-width:           2rem !default;
+// $spinner-height:          $spinner-width !default;
+$spinner-vertical-align:     calc(var(--pgn-spacing-vertical-align) * -1) !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: var(--pgn-color-list-group-base) !default;
+$list-group-bg: var(--pgn-color-list-group-bg-base) !default;
+$list-group-border-color: var(--pgn-color-list-group-border) !default;
+$list-group-border-width: var(--pgn-size-list-group-border-width) !default;
+$list-group-border-radius: var(--pgn-size-list-group-border-radius) !default;
+
+$list-group-item-padding-y: var(--pgn-spacing-list-group-item-padding-y) !default;
+$list-group-item-padding-x: var(--pgn-spacing-list-group-item-padding-x) !default;
+
+$list-group-hover-bg: var(--pgn-color-list-group-bg-hover) !default;
+$list-group-active-color: var(--pgn-color-list-group-active-base) !default;
+$list-group-active-bg: var(--pgn-color-list-group-active-bg) !default;
+$list-group-active-border-color: var(--pgn-color-list-group-active-border) !default;
+
+$list-group-disabled-color: var(--pgn-color-list-group-disabled-base) !default;
+$list-group-disabled-bg: var(--pgn-color-list-group-disabled-bg) !default;
+
+$list-group-action-color: var(--pgn-color-list-group-action-base) !default;
+$list-group-action-hover-color: var(--pgn-color-list-group-action-hover) !default;
+
+$list-group-action-active-color: var(--pgn-color-list-group-action-active-base) !default;
+$list-group-action-active-bg: var(--pgn-color-list-group-action-active-bg) !default;
+
+$text-black-50: var(--pgn-color-text-50-black) !default;
+$text-white-50: var(--pgn-color-text-50-white) !default;