@fortanix/baklava 1.0.0-beta-20241114

package/src/styling/variables.scss

@@ -0,0 +1,928 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+///////////
+///
+/// ATTENTION: This file is automatically generated from Figma variables. Do not edit it manually!
+///            In order to update it, check `scripts/import.ts`.
+///
+//////////
+
+@use 'sass:math';
+
+
+//
+// Primitive colors
+//
+
+$color-apple-50: #f1f9e8 !default;
+$color-apple-100: #d2ebb9 !default;
+$color-apple-200: #bde197 !default;
+$color-apple-300: #9fd368 !default;
+$color-apple-400: #8ccb4a !default;
+$color-apple-500: #6fbe1d !default;
+$color-apple-600: #65ad1a !default;
+$color-apple-700: #4f8715 !default;
+$color-apple-800: #3d6910 !default;
+$color-apple-900: #2f500c !default;
+$color-blackberry-0: #f6f6fb !default;
+$color-blackberry-10: #e8e7f6 !default;
+$color-blackberry-20: #dfdef2 !default;
+$color-blackberry-30: #c4c2d9 !default;
+$color-blackberry-40: #8e98a8 !default;
+$color-blackberry-50: #908caa !default;
+$color-blackberry-100: #777392 !default;
+$color-blackberry-200: #5f5a7c !default;
+$color-blackberry-300: #484266 !default;
+$color-blackberry-400: #332b50 !default;
+$color-blackberry-500: #39355c !default;
+$color-blackberry-600: #262645 !default;
+$color-blackberry-700: #202440 !default;
+$color-blackberry-800: #1a1c37 !default;
+$color-blackberry-900: #14152e !default;
+$color-blackberry-1000: #0f0e25 !default;
+$color-blueberry-50: #e8f4ff !default;
+$color-blueberry-100: #b7dcfe !default;
+$color-blueberry-200: #94cbfd !default;
+$color-blueberry-300: #64b3fc !default;
+$color-blueberry-400: #45a4fc !default;
+$color-blueberry-500: #178dfb !default;
+$color-blueberry-600: #1580e4 !default;
+$color-blueberry-700: #1064b2 !default;
+$color-blueberry-800: #0d4e8a !default;
+$color-blueberry-900: #0a3b69 !default;
+$color-cherry-50: #ffebe7 !default;
+$color-cherry-100: #ffc0b5 !default;
+$color-cherry-200: #ffa191 !default;
+$color-cherry-300: #ff765f !default;
+$color-cherry-400: #ff5c40 !default;
+$color-cherry-500: #ff3310 !default;
+$color-cherry-600: #e82e0f !default;
+$color-cherry-700: #b5240b !default;
+$color-cherry-800: #8c1c09 !default;
+$color-cherry-900: #6b1507 !default;
+$color-grape-50: #f0eff9 !default;
+$color-grape-100: #cfcdec !default;
+$color-grape-200: #b8b5e3 !default;
+$color-grape-300: #9793d7 !default;
+$color-grape-400: #837ecf !default;
+$color-grape-500: #645ec3 !default;
+$color-grape-600: #5b56b1 !default;
+$color-grape-700: #47438a !default;
+$color-grape-800: #37346b !default;
+$color-grape-900: #2a2752 !default;
+$color-lemon-50: #fbf9e6 !default;
+$color-lemon-100: #f2ebb1 !default;
+$color-lemon-200: #ece28b !default;
+$color-lemon-300: #e3d455 !default;
+$color-lemon-400: #ddcc35 !default;
+$color-lemon-500: #d5bf02 !default;
+$color-lemon-600: #c2ae02 !default;
+$color-lemon-700: #978801 !default;
+$color-lemon-800: #756901 !default;
+$color-lemon-900: #595001 !default;
+$color-neutral-0: #ffffff !default;
+$color-neutral-10: #fbfbfb !default;
+$color-neutral-20: #f7f7f7 !default;
+$color-neutral-30: #eeeeef !default;
+$color-neutral-40: #e3e4e5 !default;
+$color-neutral-50: #cacacd !default;
+$color-neutral-60: #bdbec1 !default;
+$color-neutral-70: #b3b3b7 !default;
+$color-neutral-80: #a6a6ab !default;
+$color-neutral-90: #999a9f !default;
+$color-neutral-100: #8d8d92 !default;
+$color-neutral-200: #808086 !default;
+$color-neutral-300: #73747a !default;
+$color-neutral-400: #686970 !default;
+$color-neutral-500: #5c5d64 !default;
+$color-neutral-600: #51525a !default;
+$color-neutral-700: #42434c !default;
+$color-neutral-800: #363740 !default;
+$color-neutral-900: #2b2c36 !default;
+$color-orange-50: #fbf2e6 !default;
+$color-orange-100: #f2d8b0 !default;
+$color-orange-200: #ecc58a !default;
+$color-orange-300: #e4ab54 !default;
+$color-orange-400: #de9a33 !default;
+$color-orange-500: #d68100 !default;
+$color-orange-600: #c37500 !default;
+$color-orange-700: #985c00 !default;
+$color-orange-800: #764700 !default;
+$color-orange-900: #5a3600 !default;
+
+
+//
+// Sizing
+//
+
+// OLD
+$sizing-0: 0 !default;
+$sizing-1: 0.3rem !default;
+$sizing-2: 0.6rem !default;
+$sizing-3: 1.2rem !default;
+$sizing-4: 1.8rem !default;
+$sizing-5: 2.4rem !default;
+$sizing-6: 3.0rem !default;
+$sizing-7: 3.6rem !default;
+$sizing-8: 4.2rem !default;
+$sizing-9: 4.8rem !default;
+$sizing-none: $sizing-0 !default;
+$sizing-xxs: $sizing-1 !default;
+$sizing-xs: $sizing-2 !default;
+$sizing-s: $sizing-3 !default;
+$sizing-m: $sizing-4 !default;
+$sizing-l: $sizing-6 !default;
+$sizing-xl: $sizing-8 !default;
+$sizing-xxl: $sizing-9 !default;
+
+// NEW
+// Reference: 1rem ~ 14px (at max 1440px size, and with default 1rem=16px browser font size)
+$spacing-1: math.div(4, 14) * 1rem !default; // ~4px
+$spacing-2: math.div(8, 14) * 1rem !default; // ~8px
+$spacing-3: math.div(12, 14) * 1rem !default; // ~12px
+$spacing-4: math.div(16, 14) * 1rem !default; // ~16px
+$spacing-5: math.div(18, 14) * 1rem !default; // ~18px
+$spacing-6: math.div(20, 14) * 1rem !default; // ~20px
+$spacing-7: math.div(24, 14) * 1rem !default; // ~24px
+$spacing-8: math.div(32, 14) * 1rem !default; // ~32px
+$spacing-9: math.div(40, 14) * 1rem !default; // ~40px
+$spacing-10: math.div(48, 14) * 1rem !default; // ~48px
+$spacing-11: math.div(64, 14) * 1rem !default; // ~64px
+$spacing-12: math.div(80, 14) * 1rem !default; // ~80px
+$spacing-13: math.div(96, 14) * 1rem !default; // ~96px
+$spacing-14: math.div(128, 14) * 1rem !default; // ~128px
+$spacing-15: math.div(160, 14) * 1rem !default; // ~160px
+$spacing-16: math.div(192, 14) * 1rem !default; // ~192px
+$spacing-17: math.div(224, 14) * 1rem !default; // ~224px
+$spacing-18: math.div(256, 14) * 1rem !default; // ~256px
+
+$size-1: math.div(1, 14) * 1rem !default; // ~1px
+$size-2: math.div(2, 14) * 1rem !default; // ~2px
+
+
+//
+// Font families
+//
+
+$font-family-body: var(--bk-font-family-body) !default;
+$font-family-display: var(--bk-font-family-display) !default;
+$font-family-code: var(--bk-font-family-code) !default;
+
+// Font weights
+$font-weight-extra-light: 200 !default;
+$font-weight-light: 300 !default;
+$font-weight-regular: 400 !default; // Default font weight
+$font-weight-medium: 500 !default;
+$font-weight-semibold: 600 !default;
+$font-weight-bold: 700 !default;
+
+// Font sizing
+//$font-size-xs: 0.7rem !default;
+//$font-size-s: 0.8rem !default;
+//$font-size-m: 1.0rem !default;
+//$font-size-l: 1.2rem !default;
+//$font-size-xl: 1.6rem !default;
+//$font-size-xxl: 2.0rem !default;
+//$font-size-xxxl: 3.0rem !default;
+$font-size-xs: math.div(10, 14) * 1rem !default;
+$font-size-s: math.div(12, 14) * 1rem !default;
+$font-size-m: math.div(14, 14) * 1rem !default;
+$font-size-l: math.div(17, 14) * 1rem !default;
+$font-size-xl: math.div(22, 14) * 1rem !default;
+$font-size-xxl: math.div(28, 14) * 1rem !default;
+$font-size-xxxl: math.div(42, 14) * 1rem !default;
+
+// Border radius
+$border-radius-none: $sizing-0 !default;
+$border-radius-s: $sizing-1 !default;
+$border-radius-ms: $sizing-2 !default; // "medium small" (halfway between 6px increments)
+$border-radius-m: $sizing-3 !default;
+$border-radius-l: $sizing-4 !default;
+$border-radius-xl: $sizing-7 !default;
+$border-radius-circle: 100% !default;
+
+//NEW
+$radius-s: math.div(4, 14) * 1rem !default;
+$radius-m: math.div(6, 14) * 1rem !default;
+$radius-l: math.div(9, 14) * 1rem !default;
+
+
+//
+// Theme-dependent design tokens
+//
+
+// Polyfill for `light-dark()` using lightningcss
+// XXX this should be done by lightningcss automatically, but for some reason these variables are not being injected
+// in certain cases (seems to be any file loaded through `@use`? Or through `preview.scss`?)
+// https://github.com/parcel-bundler/lightningcss/releases/tag/v1.24.0
+@function ld($light-color, $dark-color) {
+  @return #{light-dark($light-color, $dark-color)};
+  //@return #{var(--lightningcss-light, $light-color) var(--lightningcss-dark, $dark-color)};
+}
+
+// Light theme
+$light-card-background-default: $color-neutral-0 !default;
+$light-card-border-default: $color-blackberry-20 !default;
+$light-panel-background-default: $color-neutral-0 !default;
+$light-panel-border-default: $color-blackberry-20 !default;
+$light-page-default: $color-blackberry-0 !default;
+$light-text-body-default: $color-neutral-900 !default;
+$light-text-heading-default: $color-neutral-900 !default;
+$light-text-label-default: $color-neutral-900 !default;
+$light-rule-default: $color-blackberry-20 !default;
+$light-text-link-default: $color-blueberry-500 !default;
+$light-tab-text-default: $color-neutral-900 !default;
+$light-tab-rule-default: $color-neutral-60 !default;
+$light-tab-tabs-focused: $color-blueberry-500 !default;
+$light-tab-tabs-hover: $color-blueberry-600 !default;
+$light-button-primary-background-default: $color-blueberry-600 !default;
+$light-button-primary-background-hover: $color-blueberry-700 !default;
+$light-button-primary-background-focused: $color-blueberry-800 !default;
+$light-button-primary-background-non-active: $color-blueberry-200 !default;
+$light-button-primary-background-disabled: $color-neutral-40 !default;
+$light-button-card-primary-background-default: $color-grape-500 !default;
+$light-button-card-primary-background-hover: $color-grape-600 !default;
+$light-button-card-primary-background-focused: $color-grape-700 !default;
+$light-button-card-primary-background-non-active: $color-grape-100 !default;
+$light-button-card-primary-background-disabled: $color-neutral-40 !default;
+$light-button-secondary-border-default: $color-blueberry-600 !default;
+$light-button-secondary-border-hover: $color-blueberry-700 !default;
+$light-button-secondary-border-focused: $color-blueberry-800 !default;
+$light-button-secondary-border-non-active: $color-blueberry-200 !default;
+$light-button-secondary-border-disabled: $color-neutral-70 !default;
+$light-button-primary-text-default: $color-neutral-10 !default;
+$light-button-card-primary-text-default: $color-neutral-10 !default;
+$light-button-secondary-text-default: $color-blueberry-600 !default;
+$light-button-secondary-text-hover: $color-blueberry-700 !default;
+$light-button-secondary-text-focused: $color-blueberry-800 !default;
+$light-button-secondary-text-non-active: $color-blueberry-200 !default;
+$light-button-secondary-text-disabled: $color-neutral-70 !default;
+$light-button-card-secondary-border-default: $color-grape-500 !default;
+$light-button-card-secondary-border-hover: $color-grape-600 !default;
+$light-button-card-secondary-border-focused: $color-grape-700 !default;
+$light-button-card-secondary-border-non-active: $color-grape-100 !default;
+$light-button-card-secondary-border-disabled: $color-neutral-40 !default;
+$light-button-card-secondary-text-default: $color-grape-500 !default;
+$light-button-card-secondary-text-hover: $color-grape-600 !default;
+$light-button-card-secondary-text-focused: $color-grape-700 !default;
+$light-button-card-secondary-text-non-active: $color-grape-200 !default;
+$light-button-card-secondary-text-disabled: $color-neutral-70 !default;
+$light-button-tertiary-text-default: $color-blueberry-600 !default;
+$light-button-tertiary-text-hover: $color-blueberry-700 !default;
+$light-button-tertiary-text-focused: $color-blueberry-800 !default;
+$light-button-tertiary-text-non-active: $color-blueberry-100 !default;
+$light-button-tertiary-text-disabled: $color-neutral-70 !default;
+$light-button-card-tertiary-text-default: $color-grape-500 !default;
+$light-button-card-tertiary-text-focused: $color-grape-700 !default;
+$light-button-card-tertiary-text-non-active: $color-grape-100 !default;
+$light-button-card-tertiary-text-disabled: $color-neutral-50 !default;
+$light-radio-default: $color-neutral-300 !default;
+$light-radio-selected: $color-blueberry-600 !default;
+$light-radio-disabled: $color-neutral-60 !default;
+$light-checkbox-background-default: $color-blueberry-600 !default;
+$light-dropdown-menu-header-background-default: $color-grape-800 !default;
+$light-dropdown-menu-header-background-hover: $color-blackberry-800 !default;
+$light-dropdown-menu-header-border-default: $color-blackberry-300 !default;
+$light-dropdown-menu-header-tab-default: $color-blueberry-500 !default;
+$light-dropdown-menu-header-text-default: $color-neutral-10 !default;
+$light-dropdown-menu-header-background-focused: $color-blackberry-800 !default;
+$light-notification-success-background-default: $color-apple-50 !default;
+$light-notification-success-border-default: $color-apple-500 !default;
+$light-notification-text-default: $color-neutral-900 !default;
+$light-notification-informational-background-default: $color-blueberry-50 !default;
+$light-notification-informational-border-default: $color-blueberry-500 !default;
+$light-notification-alert-background-default: $color-cherry-50 !default;
+$light-notification-alert-border-default: $color-cherry-600 !default;
+$light-breadcrumb-text-link: $color-blueberry-600 !default;
+$light-header-background-default: $color-blackberry-400 !default;
+$light-header-icon-default: $color-neutral-10 !default;
+$light-header-text-default: $color-neutral-10 !default;
+$light-dropdown-menu-header-icon-default: $color-neutral-10 !default;
+$light-header-icon-background-default: $color-blackberry-300 !default;
+$light-notification-icon-default: $color-neutral-900 !default;
+$light-side-nav-menu-background-default: $color-blackberry-400 !default;
+$light-side-nav-menu-tab-default: $color-blueberry-500 !default;
+$light-side-nav-menu-text-default: $color-neutral-10 !default;
+$light-side-nav-menu-background-hover: $color-blackberry-800 !default;
+$light-side-nav-menu-background-focused: $color-blackberry-800 !default;
+$light-dropdown-menu-header-text-link: $color-blueberry-500 !default;
+$light-form-text-default: $color-neutral-900 !default;
+$light-form-text-focused: $color-neutral-900 !default;
+$light-form-text-filled: $color-neutral-900 !default;
+$light-form-text-error: $color-neutral-900 !default;
+$light-form-text-disabled: $color-neutral-60 !default;
+$light-form-icon-disabled: $color-neutral-60 !default;
+$light-form-text-error-message: $color-cherry-500 !default;
+$light-form-text-hint: $color-neutral-900 !default;
+$light-form-rule-default: $color-neutral-700 !default;
+$light-form-rule-focused: $color-blueberry-600 !default;
+$light-form-rule-filled: $color-neutral-900 !default;
+$light-form-rule-disabled: $color-neutral-60 !default;
+$light-form-rule-error: $color-cherry-600 !default;
+$light-form-text-link: $color-blueberry-600 !default;
+$light-switch-slider-default: $color-neutral-50 !default;
+$light-switch-knob-default: $color-blueberry-600 !default;
+$light-text-label-disabled: $color-neutral-60 !default;
+$light-checkbox-border-default: $color-neutral-300 !default;
+$light-checkbox-border-disabled: $color-neutral-60 !default;
+$light-checkbox-checkmark-default: $color-neutral-10 !default;
+$light-switch-knob-off: $color-blueberry-200 !default;
+$light-dropdown-menu-menu-background-default: $color-neutral-0 !default;
+$light-dropdown-menu-menu-border-default: $color-blackberry-20 !default;
+$light-dropdown-menu-menu-tab-default: $color-blueberry-500 !default;
+$light-dropdown-menu-menu-text-default: $color-neutral-900 !default;
+$light-dropdown-menu-menu-background-hover: $color-neutral-20 !default;
+$light-dropdown-menu-menu-background-focused: $color-neutral-20 !default;
+$light-text-logo-default: $color-neutral-10 !default;
+$light-icon-default: $color-neutral-900 !default;
+$light-breadcrumb-text-default: $color-neutral-900 !default;
+$light-text-small-text-default: $color-neutral-900 !default;
+$light-text-small-text-subtle: $color-neutral-300 !default;
+$light-button-primary-text-disabled: $color-neutral-70 !default;
+$light-button-card-primary-text-disabled: $color-neutral-70 !default;
+$light-button-card-primary-text-non-active: $color-neutral-10 !default;
+$light-button-primary-text-non-active: $color-neutral-20 !default;
+$light-modal-background-default: $color-neutral-0 !default;
+$light-modal-border-default: $color-blackberry-20 !default;
+$light-modal-text-default: $color-neutral-900 !default;
+$light-modal-icon-default: $color-neutral-900 !default;
+$light-tag-background-default: $color-blackberry-0 !default;
+$light-tag-border-default: $color-blackberry-20 !default;
+$light-tag-text-default: $color-neutral-900 !default;
+$light-tag-icon-default: $color-neutral-900 !default;
+$light-side-nav-background-default: $color-blackberry-400 !default;
+$light-navigation-text-default: $color-neutral-10 !default;
+$light-dropdown-menu-menu-icon-background-default: $color-neutral-60 !default;
+$light-pagination-text-default: $color-neutral-900 !default;
+$light-pagination-border-default: $color-neutral-60 !default;
+$light-pagination-text-disabled: $color-neutral-60 !default;
+$light-pagination-icon-default: $color-neutral-900 !default;
+$light-pagination-icon-disabled: $color-neutral-60 !default;
+$light-text-area-border-default: $color-neutral-700 !default;
+$light-text-area-border-disabled: $color-neutral-60 !default;
+$light-text-area-text-default: $color-neutral-900 !default;
+$light-text-area-text-disabled: $color-neutral-60 !default;
+$light-form-icon-link: $color-blueberry-600 !default;
+$light-icon-navigation: $color-neutral-10 !default;
+$light-switch-knob-disabled: $color-neutral-50 !default;
+$light-header-border-default: $color-blackberry-300 !default;
+$light-text-area-border-focused: $color-blueberry-600 !default;
+$light-text-area-border-error: $color-cherry-500 !default;
+$light-text-area-border-filled: $color-neutral-900 !default;
+$light-text-area-text-error: $color-cherry-500 !default;
+$light-checkbox-background-non-active: $color-blueberry-200 !default;
+$light-checkbox-checkmark-disabled: $color-neutral-20 !default;
+$light-radio-non-active: $color-blueberry-200 !default;
+$light-switch-knob-non-active: $color-blueberry-100 !default;
+$light-switch-slider-off: $color-neutral-40 !default;
+$light-icon-link: $color-blueberry-600 !default;
+$light-form-icon-default: $color-neutral-900 !default;
+$light-form-icon-focused: $color-neutral-900 !default;
+$light-form-icon-filled: $color-neutral-900 !default;
+$light-form-icon-error: $color-neutral-900 !default;
+$light-icon-disabled: $color-neutral-60 !default;
+$light-segmented-control-background-selected: $color-blueberry-600 !default;
+$light-segmented-control-background-hover: $color-neutral-20 !default;
+$light-segmented-control-border-unselected: $color-neutral-40 !default;
+$light-segmented-control-text-default: $color-neutral-0 !default;
+$light-segmented-control-text-unselected: $color-neutral-900 !default;
+$light-checkbox-border-focus: $color-blueberry-300 !default;
+$light-radio-focus: $color-blueberry-300 !default;
+$light-dropdown-menu-header-border-focus: $color-blueberry-300 !default;
+$light-dropdown-menu-menu-border-focus: $color-blueberry-300 !default;
+$light-segmented-control-border-focus: $color-blueberry-300 !default;
+$light-segmented-control-background-default: $color-neutral-0 !default;
+$light-side-nav-menu-border-default: $color-blueberry-300 !default;
+$light-segmented-control-background-disabled: $color-neutral-40 !default;
+$light-segmented-control-border-disabled: $color-neutral-40 !default;
+$light-segmented-control-text-unselected-2: $color-neutral-70 !default;
+$light-segmented-control-background-disabled-2: $color-neutral-50 !default;
+$light-tooltip-background-default: $color-neutral-0 !default;
+$light-tooltip-border-default: $color-blackberry-20 !default;
+$light-tooltip-text-default: $color-blackberry-1000 !default;
+$light-tooltip-text-error: $color-cherry-600 !default;
+$light-icon-alert-icon: $color-cherry-600 !default;
+$light-side-nav-menu-divider-default: $color-blackberry-300 !default;
+$light-breadcrumb-border-focus: $color-blueberry-300 !default;
+$light-progress-bar-track: $color-neutral-50 !default;
+$light-progress-bar-fill: $color-blueberry-600 !default;
+$light-spinner-track: $color-neutral-50 !default;
+$light-spinner-fill: $color-blueberry-600 !default;
+$light-date-picker-text-default: $color-neutral-900 !default;
+$light-scroll-bar-thumb-default: $color-neutral-90 !default;
+$light-scroll-bar-slider-default: $color-neutral-50 !default;
+$light-tooltip-action-icon-background-hover: $color-neutral-40 !default;
+$light-tooltip-action-border-default: $color-blackberry-20 !default;
+$light-tooltip-action-menu-background-hover: $color-neutral-20 !default;
+$light-tooltip-action-menu-background-default: $color-neutral-0 !default;
+$light-tooltip-action-menu-background-selected: $color-neutral-20 !default;
+$light-tooltip-action-text-default: $color-neutral-900 !default;
+$light-notification-text-link: $color-blueberry-700 !default;
+$light-panel-background-secondary: $color-neutral-20 !default;
+$light-accordion-border-default: $color-blackberry-20 !default;
+$light-accordion-text-default: $color-neutral-900 !default;
+$light-dropdown-menu-menu-text-link: $color-blueberry-500 !default;
+$light-stepper-border-default: $color-blueberry-600 !default;
+$light-stepper-text-default: $color-neutral-900 !default;
+$light-stepper-background-default: $color-blueberry-600 !default;
+$light-stepper-border-disabled: $color-neutral-60 !default;
+$light-stepper-text-disabled: $color-neutral-200 !default;
+$light-stepper-text-selected: $color-neutral-900 !default;
+$light-stepper-text-selected-number: $color-neutral-20 !default;
+$light-empty-state-stoke-default: $color-neutral-100 !default;
+$light-banner-alert-background-default: $color-cherry-50 !default;
+$light-banner-alert-border-default: $color-cherry-600 !default;
+$light-banner-icon-default: $color-neutral-900 !default;
+$light-banner-informational-background-default: $color-blueberry-50 !default;
+$light-banner-informational-border-default: $color-blueberry-500 !default;
+$light-banner-success-background-default: $color-apple-100 !default;
+$light-banner-success-border-default: $color-apple-500 !default;
+$light-banner-text-default: $color-neutral-900 !default;
+$light-banner-text-link: $color-blueberry-700 !default;
+$light-banner-warning-background-default: $color-orange-50 !default;
+$light-banner-warning-border-default: $color-orange-400 !default;
+$light-login-page-background-default: $color-neutral-0 !default;
+$light-page-onboarding: $color-neutral-30 !default;
+$light-text-area-text-focused: $color-neutral-900 !default;
+$light-text-area-text-filled: $color-neutral-900 !default;
+$light-navigation-icon-default: $color-neutral-10 !default;
+$light-table-text-header-default: $color-neutral-300 !default;
+$light-table-text-header-selected: $color-neutral-900 !default;
+$light-table-text-body-default: $color-neutral-900 !default;
+$light-table-text-body-secondry: $color-neutral-300 !default;
+$light-accordion-background-secondary: $color-neutral-0 !default;
+$light-accordion-text-header: $color-neutral-300 !default;
+$light-accordion-icon: $color-neutral-300 !default;
+$light-table-icon-background: $color-neutral-40 !default;
+
+// Dark theme
+$dark-card-background-default: $color-blackberry-600 !default;
+$dark-card-border-default: $color-blackberry-300 !default;
+$dark-panel-background-default: $color-blackberry-600 !default;
+$dark-panel-border-default: $color-blackberry-300 !default;
+$dark-page-default: $color-blackberry-1000 !default;
+$dark-text-body-default: $color-neutral-10 !default;
+$dark-text-heading-default: $color-neutral-10 !default;
+$dark-text-label-default: $color-neutral-10 !default;
+$dark-rule-default: $color-blackberry-300 !default;
+$dark-text-link-default: $color-blueberry-400 !default;
+$dark-tab-text-default: $color-neutral-10 !default;
+$dark-tab-rule-default: $color-blackberry-200 !default;
+$dark-tab-tabs-focused: $color-blueberry-400 !default;
+$dark-tab-tabs-hover: $color-blueberry-500 !default;
+$dark-button-primary-background-default: $color-blueberry-500 !default;
+$dark-button-primary-background-hover: $color-blueberry-600 !default;
+$dark-button-primary-background-focused: $color-blueberry-700 !default;
+$dark-button-primary-background-non-active: $color-blueberry-900 !default;
+$dark-button-primary-background-disabled: $color-neutral-800 !default;
+$dark-button-card-primary-background-default: $color-grape-400 !default;
+$dark-button-card-primary-background-hover: $color-grape-500 !default;
+$dark-button-card-primary-background-focused: $color-grape-600 !default;
+$dark-button-card-primary-background-non-active: $color-grape-700 !default;
+$dark-button-card-primary-background-disabled: $color-neutral-800 !default;
+$dark-button-secondary-border-default: $color-blueberry-500 !default;
+$dark-button-secondary-border-hover: $color-blueberry-600 !default;
+$dark-button-secondary-border-focused: $color-blueberry-700 !default;
+$dark-button-secondary-border-non-active: $color-blueberry-900 !default;
+$dark-button-secondary-border-disabled: $color-neutral-800 !default;
+$dark-button-primary-text-default: $color-neutral-10 !default;
+$dark-button-card-primary-text-default: $color-neutral-10 !default;
+$dark-button-secondary-text-default: $color-neutral-10 !default;
+$dark-button-secondary-text-hover: $color-neutral-10 !default;
+$dark-button-secondary-text-focused: $color-neutral-10 !default;
+$dark-button-secondary-text-non-active: $color-blueberry-800 !default;
+$dark-button-secondary-text-disabled: $color-neutral-400 !default;
+$dark-button-card-secondary-border-default: $color-grape-400 !default;
+$dark-button-card-secondary-border-hover: $color-grape-500 !default;
+$dark-button-card-secondary-border-focused: $color-grape-600 !default;
+$dark-button-card-secondary-border-non-active: $color-grape-700 !default;
+$dark-button-card-secondary-border-disabled: $color-neutral-800 !default;
+$dark-button-card-secondary-text-default: $color-neutral-20 !default;
+$dark-button-card-secondary-text-hover: $color-neutral-20 !default;
+$dark-button-card-secondary-text-focused: $color-neutral-20 !default;
+$dark-button-card-secondary-text-non-active: $color-grape-600 !default;
+$dark-button-card-secondary-text-disabled: $color-neutral-400 !default;
+$dark-button-tertiary-text-default: $color-blueberry-500 !default;
+$dark-button-tertiary-text-hover: $color-blueberry-600 !default;
+$dark-button-tertiary-text-focused: $color-blueberry-700 !default;
+$dark-button-tertiary-text-non-active: $color-blueberry-900 !default;
+$dark-button-tertiary-text-disabled: $color-neutral-400 !default;
+$dark-button-card-tertiary-text-default: $color-grape-400 !default;
+$dark-button-card-tertiary-text-focused: $color-grape-600 !default;
+$dark-button-card-tertiary-text-non-active: $color-grape-700 !default;
+$dark-button-card-tertiary-text-disabled: $color-neutral-400 !default;
+$dark-radio-default: $color-neutral-60 !default;
+$dark-radio-selected: $color-blueberry-500 !default;
+$dark-radio-disabled: $color-neutral-200 !default;
+$dark-checkbox-background-default: $color-blueberry-500 !default;
+$dark-dropdown-menu-header-background-default: $color-grape-800 !default;
+$dark-dropdown-menu-header-background-hover: $color-blackberry-800 !default;
+$dark-dropdown-menu-header-border-default: $color-blackberry-300 !default;
+$dark-dropdown-menu-header-tab-default: $color-blueberry-400 !default;
+$dark-dropdown-menu-header-text-default: $color-neutral-10 !default;
+$dark-dropdown-menu-header-background-focused: $color-blackberry-800 !default;
+$dark-notification-success-background-default: $color-apple-50 !default;
+$dark-notification-success-border-default: $color-apple-500 !default;
+$dark-notification-text-default: $color-neutral-900 !default;
+$dark-notification-informational-background-default: $color-blueberry-50 !default;
+$dark-notification-informational-border-default: $color-blueberry-500 !default;
+$dark-notification-alert-background-default: $color-cherry-50 !default;
+$dark-notification-alert-border-default: $color-cherry-600 !default;
+$dark-breadcrumb-text-link: $color-blueberry-500 !default;
+$dark-header-background-default: $color-blackberry-400 !default;
+$dark-header-icon-default: $color-neutral-10 !default;
+$dark-header-text-default: $color-neutral-10 !default;
+$dark-dropdown-menu-header-icon-default: $color-neutral-10 !default;
+$dark-header-icon-background-default: $color-blackberry-300 !default;
+$dark-notification-icon-default: $color-neutral-900 !default;
+$dark-side-nav-menu-background-default: $color-blackberry-400 !default;
+$dark-side-nav-menu-tab-default: $color-blueberry-400 !default;
+$dark-side-nav-menu-text-default: $color-neutral-10 !default;
+$dark-side-nav-menu-background-hover: $color-blackberry-800 !default;
+$dark-side-nav-menu-background-focused: $color-blackberry-800 !default;
+$dark-dropdown-menu-header-text-link: $color-blueberry-400 !default;
+$dark-form-text-default: $color-neutral-60 !default;
+$dark-form-text-focused: $color-neutral-10 !default;
+$dark-form-text-filled: $color-neutral-10 !default;
+$dark-form-text-error: $color-neutral-10 !default;
+$dark-form-text-disabled: $color-neutral-200 !default;
+$dark-form-icon-disabled: $color-neutral-200 !default;
+$dark-form-text-error-message: $color-cherry-400 !default;
+$dark-form-text-hint: $color-neutral-60 !default;
+$dark-form-rule-default: $color-neutral-60 !default;
+$dark-form-rule-focused: $color-blueberry-500 !default;
+$dark-form-rule-filled: $color-neutral-10 !default;
+$dark-form-rule-disabled: $color-neutral-200 !default;
+$dark-form-rule-error: $color-cherry-400 !default;
+$dark-form-text-link: $color-blueberry-500 !default;
+$dark-switch-slider-default: $color-neutral-700 !default;
+$dark-switch-knob-default: $color-blueberry-500 !default;
+$dark-text-label-disabled: $color-neutral-200 !default;
+$dark-checkbox-border-default: $color-neutral-60 !default;
+$dark-checkbox-border-disabled: $color-neutral-200 !default;
+$dark-checkbox-checkmark-default: $color-neutral-10 !default;
+$dark-switch-knob-off: $color-blueberry-800 !default;
+$dark-dropdown-menu-menu-background-default: $color-grape-800 !default;
+$dark-dropdown-menu-menu-border-default: $color-blackberry-300 !default;
+$dark-dropdown-menu-menu-tab-default: $color-blueberry-400 !default;
+$dark-dropdown-menu-menu-text-default: $color-neutral-10 !default;
+$dark-dropdown-menu-menu-background-hover: $color-blackberry-800 !default;
+$dark-dropdown-menu-menu-background-focused: $color-blackberry-800 !default;
+$dark-text-logo-default: $color-neutral-10 !default;
+$dark-icon-default: $color-neutral-10 !default;
+$dark-breadcrumb-text-default: $color-neutral-10 !default;
+$dark-text-small-text-default: $color-neutral-10 !default;
+$dark-text-small-text-subtle: $color-neutral-70 !default;
+$dark-button-primary-text-disabled: $color-neutral-200 !default;
+$dark-button-card-primary-text-disabled: $color-neutral-200 !default;
+$dark-button-card-primary-text-non-active: $color-neutral-90 !default;
+$dark-button-primary-text-non-active: $color-neutral-90 !default;
+$dark-modal-background-default: $color-blackberry-600 !default;
+$dark-modal-border-default: $color-blackberry-300 !default;
+$dark-modal-text-default: $color-neutral-10 !default;
+$dark-modal-icon-default: $color-neutral-10 !default;
+$dark-tag-background-default: $color-blackberry-300 !default;
+$dark-tag-border-default: $color-blackberry-300 !default;
+$dark-tag-text-default: $color-neutral-20 !default;
+$dark-tag-icon-default: $color-neutral-10 !default;
+$dark-side-nav-background-default: $color-blackberry-400 !default;
+$dark-navigation-text-default: $color-neutral-10 !default;
+$dark-dropdown-menu-menu-icon-background-default: $color-blackberry-1000 !default;
+$dark-pagination-text-default: $color-neutral-10 !default;
+$dark-pagination-border-default: $color-blackberry-300 !default;
+$dark-pagination-text-disabled: $color-neutral-200 !default;
+$dark-pagination-icon-default: $color-neutral-10 !default;
+$dark-pagination-icon-disabled: $color-neutral-200 !default;
+$dark-text-area-border-default: $color-neutral-60 !default;
+$dark-text-area-border-disabled: $color-neutral-200 !default;
+$dark-text-area-text-default: $color-neutral-60 !default;
+$dark-text-area-text-disabled: $color-neutral-200 !default;
+$dark-form-icon-link: $color-blueberry-500 !default;
+$dark-icon-navigation: $color-neutral-10 !default;
+$dark-switch-knob-disabled: $color-neutral-500 !default;
+$dark-header-border-default: $color-blackberry-300 !default;
+$dark-text-area-border-focused: $color-blueberry-500 !default;
+$dark-text-area-border-error: $color-cherry-400 !default;
+$dark-text-area-border-filled: $color-neutral-10 !default;
+$dark-text-area-text-error: $color-cherry-400 !default;
+$dark-checkbox-background-non-active: $color-blueberry-900 !default;
+$dark-checkbox-checkmark-disabled: $color-neutral-90 !default;
+$dark-radio-non-active: $color-blueberry-900 !default;
+$dark-switch-knob-non-active: $color-blueberry-900 !default;
+$dark-switch-slider-off: $color-neutral-900 !default;
+$dark-icon-link: $color-blueberry-500 !default;
+$dark-form-icon-default: $color-neutral-60 !default;
+$dark-form-icon-focused: $color-neutral-10 !default;
+$dark-form-icon-filled: $color-neutral-10 !default;
+$dark-form-icon-error: $color-neutral-10 !default;
+$dark-icon-disabled: $color-neutral-200 !default;
+$dark-segmented-control-background-selected: $color-blueberry-500 !default;
+$dark-segmented-control-background-hover: $color-blueberry-900 !default;
+$dark-segmented-control-border-unselected: $color-blueberry-500 !default;
+$dark-segmented-control-text-default: $color-neutral-0 !default;
+$dark-segmented-control-text-unselected: $color-neutral-0 !default;
+$dark-checkbox-border-focus: $color-blueberry-200 !default;
+$dark-radio-focus: $color-blueberry-200 !default;
+$dark-dropdown-menu-header-border-focus: $color-blueberry-200 !default;
+$dark-dropdown-menu-menu-border-focus: $color-blueberry-200 !default;
+$dark-segmented-control-border-focus: $color-blueberry-200 !default;
+$dark-segmented-control-background-default: $color-blackberry-600 !default;
+$dark-side-nav-menu-border-default: $color-blueberry-200 !default;
+$dark-segmented-control-background-disabled: $color-neutral-800 !default;
+$dark-segmented-control-border-disabled: $color-neutral-800 !default;
+$dark-segmented-control-text-unselected-2: $color-neutral-200 !default;
+$dark-segmented-control-background-disabled-2: $color-neutral-900 !default;
+$dark-tooltip-background-default: $color-blackberry-900 !default;
+$dark-tooltip-border-default: $color-blackberry-200 !default;
+$dark-tooltip-text-default: $color-neutral-10 !default;
+$dark-tooltip-text-error: $color-cherry-400 !default;
+$dark-icon-alert-icon: $color-cherry-400 !default;
+$dark-side-nav-menu-divider-default: $color-blackberry-300 !default;
+$dark-breadcrumb-border-focus: $color-blueberry-200 !default;
+$dark-progress-bar-track: $color-blackberry-900 !default;
+$dark-progress-bar-fill: $color-blueberry-600 !default;
+$dark-spinner-track: $color-neutral-600 !default;
+$dark-spinner-fill: $color-blueberry-600 !default;
+$dark-date-picker-text-default: $color-neutral-10 !default;
+$dark-scroll-bar-thumb-default: $color-blackberry-200 !default;
+$dark-scroll-bar-slider-default: $color-blackberry-800 !default;
+$dark-tooltip-action-icon-background-hover: $color-blackberry-200 !default;
+$dark-tooltip-action-border-default: $color-blackberry-200 !default;
+$dark-tooltip-action-menu-background-hover: $color-blackberry-800 !default;
+$dark-tooltip-action-menu-background-default: $color-grape-800 !default;
+$dark-tooltip-action-menu-background-selected: $color-blackberry-800 !default;
+$dark-tooltip-action-text-default: $color-neutral-10 !default;
+$dark-notification-text-link: $color-blueberry-700 !default;
+$dark-panel-background-secondary: $color-blackberry-800 !default;
+$dark-accordion-border-default: $color-blackberry-300 !default;
+$dark-accordion-text-default: $color-neutral-10 !default;
+$dark-dropdown-menu-menu-text-link: $color-blueberry-400 !default;
+$dark-stepper-border-default: $color-blueberry-500 !default;
+$dark-stepper-text-default: $color-neutral-20 !default;
+$dark-stepper-background-default: $color-blueberry-500 !default;
+$dark-stepper-border-disabled: $color-neutral-200 !default;
+$dark-stepper-text-disabled: $color-neutral-200 !default;
+$dark-stepper-text-selected: $color-neutral-10 !default;
+$dark-stepper-text-selected-number: $color-neutral-20 !default;
+$dark-empty-state-stoke-default: $color-blackberry-100 !default;
+$dark-banner-alert-background-default: $color-cherry-50 !default;
+$dark-banner-alert-border-default: $color-cherry-600 !default;
+$dark-banner-icon-default: $color-neutral-900 !default;
+$dark-banner-informational-background-default: $color-blueberry-50 !default;
+$dark-banner-informational-border-default: $color-blueberry-500 !default;
+$dark-banner-success-background-default: $color-apple-100 !default;
+$dark-banner-success-border-default: $color-apple-500 !default;
+$dark-banner-text-default: $color-neutral-900 !default;
+$dark-banner-text-link: $color-blueberry-700 !default;
+$dark-banner-warning-background-default: $color-orange-50 !default;
+$dark-banner-warning-border-default: $color-orange-400 !default;
+$dark-login-page-background-default: $color-blackberry-1000 !default;
+$dark-page-onboarding: $color-blackberry-1000 !default;
+$dark-text-area-text-focused: $color-neutral-10 !default;
+$dark-text-area-text-filled: $color-neutral-10 !default;
+$dark-navigation-icon-default: $color-neutral-10 !default;
+$dark-table-text-header-default: $color-neutral-70 !default;
+$dark-table-text-header-selected: $color-neutral-10 !default;
+$dark-table-text-body-default: $color-neutral-10 !default;
+$dark-table-text-body-secondry: $color-neutral-70 !default;
+$dark-accordion-background-secondary: $color-blackberry-800 !default;
+$dark-accordion-text-header: $color-neutral-70 !default;
+$dark-accordion-icon: $color-neutral-70 !default;
+$dark-table-icon-background: $color-blackberry-800 !default;
+
+// Dynamic theme
+$theme-card-background-default: #{ld($light-card-background-default, $dark-card-background-default)} !default;
+$theme-card-border-default: #{ld($light-card-border-default, $dark-card-border-default)} !default;
+$theme-panel-background-default: #{ld($light-panel-background-default, $dark-panel-background-default)} !default;
+$theme-panel-border-default: #{ld($light-panel-border-default, $dark-panel-border-default)} !default;
+$theme-page-default: #{ld($light-page-default, $dark-page-default)} !default;
+$theme-text-body-default: #{ld($light-text-body-default, $dark-text-body-default)} !default;
+$theme-text-heading-default: #{ld($light-text-heading-default, $dark-text-heading-default)} !default;
+$theme-text-label-default: #{ld($light-text-label-default, $dark-text-label-default)} !default;
+$theme-rule-default: #{ld($light-rule-default, $dark-rule-default)} !default;
+$theme-text-link-default: #{ld($light-text-link-default, $dark-text-link-default)} !default;
+$theme-tab-text-default: #{ld($light-tab-text-default, $dark-tab-text-default)} !default;
+$theme-tab-rule-default: #{ld($light-tab-rule-default, $dark-tab-rule-default)} !default;
+$theme-tab-tabs-focused: #{ld($light-tab-tabs-focused, $dark-tab-tabs-focused)} !default;
+$theme-tab-tabs-hover: #{ld($light-tab-tabs-hover, $dark-tab-tabs-hover)} !default;
+$theme-button-primary-background-default: #{ld($light-button-primary-background-default, $dark-button-primary-background-default)} !default;
+$theme-button-primary-background-hover: #{ld($light-button-primary-background-hover, $dark-button-primary-background-hover)} !default;
+$theme-button-primary-background-focused: #{ld($light-button-primary-background-focused, $dark-button-primary-background-focused)} !default;
+$theme-button-primary-background-non-active: #{ld($light-button-primary-background-non-active, $dark-button-primary-background-non-active)} !default;
+$theme-button-primary-background-disabled: #{ld($light-button-primary-background-disabled, $dark-button-primary-background-disabled)} !default;
+$theme-button-card-primary-background-default: #{ld($light-button-card-primary-background-default, $dark-button-card-primary-background-default)} !default;
+$theme-button-card-primary-background-hover: #{ld($light-button-card-primary-background-hover, $dark-button-card-primary-background-hover)} !default;
+$theme-button-card-primary-background-focused: #{ld($light-button-card-primary-background-focused, $dark-button-card-primary-background-focused)} !default;
+$theme-button-card-primary-background-non-active: #{ld($light-button-card-primary-background-non-active, $dark-button-card-primary-background-non-active)} !default;
+$theme-button-card-primary-background-disabled: #{ld($light-button-card-primary-background-disabled, $dark-button-card-primary-background-disabled)} !default;
+$theme-button-secondary-border-default: #{ld($light-button-secondary-border-default, $dark-button-secondary-border-default)} !default;
+$theme-button-secondary-border-hover: #{ld($light-button-secondary-border-hover, $dark-button-secondary-border-hover)} !default;
+$theme-button-secondary-border-focused: #{ld($light-button-secondary-border-focused, $dark-button-secondary-border-focused)} !default;
+$theme-button-secondary-border-non-active: #{ld($light-button-secondary-border-non-active, $dark-button-secondary-border-non-active)} !default;
+$theme-button-secondary-border-disabled: #{ld($light-button-secondary-border-disabled, $dark-button-secondary-border-disabled)} !default;
+$theme-button-primary-text-default: #{ld($light-button-primary-text-default, $dark-button-primary-text-default)} !default;
+$theme-button-card-primary-text-default: #{ld($light-button-card-primary-text-default, $dark-button-card-primary-text-default)} !default;
+$theme-button-secondary-text-default: #{ld($light-button-secondary-text-default, $dark-button-secondary-text-default)} !default;
+$theme-button-secondary-text-hover: #{ld($light-button-secondary-text-hover, $dark-button-secondary-text-hover)} !default;
+$theme-button-secondary-text-focused: #{ld($light-button-secondary-text-focused, $dark-button-secondary-text-focused)} !default;
+$theme-button-secondary-text-non-active: #{ld($light-button-secondary-text-non-active, $dark-button-secondary-text-non-active)} !default;
+$theme-button-secondary-text-disabled: #{ld($light-button-secondary-text-disabled, $dark-button-secondary-text-disabled)} !default;
+$theme-button-card-secondary-border-default: #{ld($light-button-card-secondary-border-default, $dark-button-card-secondary-border-default)} !default;
+$theme-button-card-secondary-border-hover: #{ld($light-button-card-secondary-border-hover, $dark-button-card-secondary-border-hover)} !default;
+$theme-button-card-secondary-border-focused: #{ld($light-button-card-secondary-border-focused, $dark-button-card-secondary-border-focused)} !default;
+$theme-button-card-secondary-border-non-active: #{ld($light-button-card-secondary-border-non-active, $dark-button-card-secondary-border-non-active)} !default;
+$theme-button-card-secondary-border-disabled: #{ld($light-button-card-secondary-border-disabled, $dark-button-card-secondary-border-disabled)} !default;
+$theme-button-card-secondary-text-default: #{ld($light-button-card-secondary-text-default, $dark-button-card-secondary-text-default)} !default;
+$theme-button-card-secondary-text-hover: #{ld($light-button-card-secondary-text-hover, $dark-button-card-secondary-text-hover)} !default;
+$theme-button-card-secondary-text-focused: #{ld($light-button-card-secondary-text-focused, $dark-button-card-secondary-text-focused)} !default;
+$theme-button-card-secondary-text-non-active: #{ld($light-button-card-secondary-text-non-active, $dark-button-card-secondary-text-non-active)} !default;
+$theme-button-card-secondary-text-disabled: #{ld($light-button-card-secondary-text-disabled, $dark-button-card-secondary-text-disabled)} !default;
+$theme-button-tertiary-text-default: #{ld($light-button-tertiary-text-default, $dark-button-tertiary-text-default)} !default;
+$theme-button-tertiary-text-hover: #{ld($light-button-tertiary-text-hover, $dark-button-tertiary-text-hover)} !default;
+$theme-button-tertiary-text-focused: #{ld($light-button-tertiary-text-focused, $dark-button-tertiary-text-focused)} !default;
+$theme-button-tertiary-text-non-active: #{ld($light-button-tertiary-text-non-active, $dark-button-tertiary-text-non-active)} !default;
+$theme-button-tertiary-text-disabled: #{ld($light-button-tertiary-text-disabled, $dark-button-tertiary-text-disabled)} !default;
+$theme-button-card-tertiary-text-default: #{ld($light-button-card-tertiary-text-default, $dark-button-card-tertiary-text-default)} !default;
+$theme-button-card-tertiary-text-focused: #{ld($light-button-card-tertiary-text-focused, $dark-button-card-tertiary-text-focused)} !default;
+$theme-button-card-tertiary-text-non-active: #{ld($light-button-card-tertiary-text-non-active, $dark-button-card-tertiary-text-non-active)} !default;
+$theme-button-card-tertiary-text-disabled: #{ld($light-button-card-tertiary-text-disabled, $dark-button-card-tertiary-text-disabled)} !default;
+$theme-radio-default: #{ld($light-radio-default, $dark-radio-default)} !default;
+$theme-radio-selected: #{ld($light-radio-selected, $dark-radio-selected)} !default;
+$theme-radio-disabled: #{ld($light-radio-disabled, $dark-radio-disabled)} !default;
+$theme-checkbox-background-default: #{ld($light-checkbox-background-default, $dark-checkbox-background-default)} !default;
+$theme-dropdown-menu-header-background-default: #{ld($light-dropdown-menu-header-background-default, $dark-dropdown-menu-header-background-default)} !default;
+$theme-dropdown-menu-header-background-hover: #{ld($light-dropdown-menu-header-background-hover, $dark-dropdown-menu-header-background-hover)} !default;
+$theme-dropdown-menu-header-border-default: #{ld($light-dropdown-menu-header-border-default, $dark-dropdown-menu-header-border-default)} !default;
+$theme-dropdown-menu-header-tab-default: #{ld($light-dropdown-menu-header-tab-default, $dark-dropdown-menu-header-tab-default)} !default;
+$theme-dropdown-menu-header-text-default: #{ld($light-dropdown-menu-header-text-default, $dark-dropdown-menu-header-text-default)} !default;
+$theme-dropdown-menu-header-background-focused: #{ld($light-dropdown-menu-header-background-focused, $dark-dropdown-menu-header-background-focused)} !default;
+$theme-notification-success-background-default: #{ld($light-notification-success-background-default, $dark-notification-success-background-default)} !default;
+$theme-notification-success-border-default: #{ld($light-notification-success-border-default, $dark-notification-success-border-default)} !default;
+$theme-notification-text-default: #{ld($light-notification-text-default, $dark-notification-text-default)} !default;
+$theme-notification-informational-background-default: #{ld($light-notification-informational-background-default, $dark-notification-informational-background-default)} !default;
+$theme-notification-informational-border-default: #{ld($light-notification-informational-border-default, $dark-notification-informational-border-default)} !default;
+$theme-notification-alert-background-default: #{ld($light-notification-alert-background-default, $dark-notification-alert-background-default)} !default;
+$theme-notification-alert-border-default: #{ld($light-notification-alert-border-default, $dark-notification-alert-border-default)} !default;
+$theme-breadcrumb-text-link: #{ld($light-breadcrumb-text-link, $dark-breadcrumb-text-link)} !default;
+$theme-header-background-default: #{ld($light-header-background-default, $dark-header-background-default)} !default;
+$theme-header-icon-default: #{ld($light-header-icon-default, $dark-header-icon-default)} !default;
+$theme-header-text-default: #{ld($light-header-text-default, $dark-header-text-default)} !default;
+$theme-dropdown-menu-header-icon-default: #{ld($light-dropdown-menu-header-icon-default, $dark-dropdown-menu-header-icon-default)} !default;
+$theme-header-icon-background-default: #{ld($light-header-icon-background-default, $dark-header-icon-background-default)} !default;
+$theme-notification-icon-default: #{ld($light-notification-icon-default, $dark-notification-icon-default)} !default;
+$theme-side-nav-menu-background-default: #{ld($light-side-nav-menu-background-default, $dark-side-nav-menu-background-default)} !default;
+$theme-side-nav-menu-tab-default: #{ld($light-side-nav-menu-tab-default, $dark-side-nav-menu-tab-default)} !default;
+$theme-side-nav-menu-text-default: #{ld($light-side-nav-menu-text-default, $dark-side-nav-menu-text-default)} !default;
+$theme-side-nav-menu-background-hover: #{ld($light-side-nav-menu-background-hover, $dark-side-nav-menu-background-hover)} !default;
+$theme-side-nav-menu-background-focused: #{ld($light-side-nav-menu-background-focused, $dark-side-nav-menu-background-focused)} !default;
+$theme-dropdown-menu-header-text-link: #{ld($light-dropdown-menu-header-text-link, $dark-dropdown-menu-header-text-link)} !default;
+$theme-form-text-default: #{ld($light-form-text-default, $dark-form-text-default)} !default;
+$theme-form-text-focused: #{ld($light-form-text-focused, $dark-form-text-focused)} !default;
+$theme-form-text-filled: #{ld($light-form-text-filled, $dark-form-text-filled)} !default;
+$theme-form-text-error: #{ld($light-form-text-error, $dark-form-text-error)} !default;
+$theme-form-text-disabled: #{ld($light-form-text-disabled, $dark-form-text-disabled)} !default;
+$theme-form-icon-disabled: #{ld($light-form-icon-disabled, $dark-form-icon-disabled)} !default;
+$theme-form-text-error-message: #{ld($light-form-text-error-message, $dark-form-text-error-message)} !default;
+$theme-form-text-hint: #{ld($light-form-text-hint, $dark-form-text-hint)} !default;
+$theme-form-rule-default: #{ld($light-form-rule-default, $dark-form-rule-default)} !default;
+$theme-form-rule-focused: #{ld($light-form-rule-focused, $dark-form-rule-focused)} !default;
+$theme-form-rule-filled: #{ld($light-form-rule-filled, $dark-form-rule-filled)} !default;
+$theme-form-rule-disabled: #{ld($light-form-rule-disabled, $dark-form-rule-disabled)} !default;
+$theme-form-rule-error: #{ld($light-form-rule-error, $dark-form-rule-error)} !default;
+$theme-form-text-link: #{ld($light-form-text-link, $dark-form-text-link)} !default;
+$theme-switch-slider-default: #{ld($light-switch-slider-default, $dark-switch-slider-default)} !default;
+$theme-switch-knob-default: #{ld($light-switch-knob-default, $dark-switch-knob-default)} !default;
+$theme-text-label-disabled: #{ld($light-text-label-disabled, $dark-text-label-disabled)} !default;
+$theme-checkbox-border-default: #{ld($light-checkbox-border-default, $dark-checkbox-border-default)} !default;
+$theme-checkbox-border-disabled: #{ld($light-checkbox-border-disabled, $dark-checkbox-border-disabled)} !default;
+$theme-checkbox-checkmark-default: #{ld($light-checkbox-checkmark-default, $dark-checkbox-checkmark-default)} !default;
+$theme-switch-knob-off: #{ld($light-switch-knob-off, $dark-switch-knob-off)} !default;
+$theme-dropdown-menu-menu-background-default: #{ld($light-dropdown-menu-menu-background-default, $dark-dropdown-menu-menu-background-default)} !default;
+$theme-dropdown-menu-menu-border-default: #{ld($light-dropdown-menu-menu-border-default, $dark-dropdown-menu-menu-border-default)} !default;
+$theme-dropdown-menu-menu-tab-default: #{ld($light-dropdown-menu-menu-tab-default, $dark-dropdown-menu-menu-tab-default)} !default;
+$theme-dropdown-menu-menu-text-default: #{ld($light-dropdown-menu-menu-text-default, $dark-dropdown-menu-menu-text-default)} !default;
+$theme-dropdown-menu-menu-background-hover: #{ld($light-dropdown-menu-menu-background-hover, $dark-dropdown-menu-menu-background-hover)} !default;
+$theme-dropdown-menu-menu-background-focused: #{ld($light-dropdown-menu-menu-background-focused, $dark-dropdown-menu-menu-background-focused)} !default;
+$theme-text-logo-default: #{ld($light-text-logo-default, $dark-text-logo-default)} !default;
+$theme-icon-default: #{ld($light-icon-default, $dark-icon-default)} !default;
+$theme-breadcrumb-text-default: #{ld($light-breadcrumb-text-default, $dark-breadcrumb-text-default)} !default;
+$theme-text-small-text-default: #{ld($light-text-small-text-default, $dark-text-small-text-default)} !default;
+$theme-text-small-text-subtle: #{ld($light-text-small-text-subtle, $dark-text-small-text-subtle)} !default;
+$theme-button-primary-text-disabled: #{ld($light-button-primary-text-disabled, $dark-button-primary-text-disabled)} !default;
+$theme-button-card-primary-text-disabled: #{ld($light-button-card-primary-text-disabled, $dark-button-card-primary-text-disabled)} !default;
+$theme-button-card-primary-text-non-active: #{ld($light-button-card-primary-text-non-active, $dark-button-card-primary-text-non-active)} !default;
+$theme-button-primary-text-non-active: #{ld($light-button-primary-text-non-active, $dark-button-primary-text-non-active)} !default;
+$theme-modal-background-default: #{ld($light-modal-background-default, $dark-modal-background-default)} !default;
+$theme-modal-border-default: #{ld($light-modal-border-default, $dark-modal-border-default)} !default;
+$theme-modal-text-default: #{ld($light-modal-text-default, $dark-modal-text-default)} !default;
+$theme-modal-icon-default: #{ld($light-modal-icon-default, $dark-modal-icon-default)} !default;
+$theme-tag-background-default: #{ld($light-tag-background-default, $dark-tag-background-default)} !default;
+$theme-tag-border-default: #{ld($light-tag-border-default, $dark-tag-border-default)} !default;
+$theme-tag-text-default: #{ld($light-tag-text-default, $dark-tag-text-default)} !default;
+$theme-tag-icon-default: #{ld($light-tag-icon-default, $dark-tag-icon-default)} !default;
+$theme-side-nav-background-default: #{ld($light-side-nav-background-default, $dark-side-nav-background-default)} !default;
+$theme-navigation-text-default: #{ld($light-navigation-text-default, $dark-navigation-text-default)} !default;
+$theme-dropdown-menu-menu-icon-background-default: #{ld($light-dropdown-menu-menu-icon-background-default, $dark-dropdown-menu-menu-icon-background-default)} !default;
+$theme-pagination-text-default: #{ld($light-pagination-text-default, $dark-pagination-text-default)} !default;
+$theme-pagination-border-default: #{ld($light-pagination-border-default, $dark-pagination-border-default)} !default;
+$theme-pagination-text-disabled: #{ld($light-pagination-text-disabled, $dark-pagination-text-disabled)} !default;
+$theme-pagination-icon-default: #{ld($light-pagination-icon-default, $dark-pagination-icon-default)} !default;
+$theme-pagination-icon-disabled: #{ld($light-pagination-icon-disabled, $dark-pagination-icon-disabled)} !default;
+$theme-text-area-border-default: #{ld($light-text-area-border-default, $dark-text-area-border-default)} !default;
+$theme-text-area-border-disabled: #{ld($light-text-area-border-disabled, $dark-text-area-border-disabled)} !default;
+$theme-text-area-text-default: #{ld($light-text-area-text-default, $dark-text-area-text-default)} !default;
+$theme-text-area-text-disabled: #{ld($light-text-area-text-disabled, $dark-text-area-text-disabled)} !default;
+$theme-form-icon-link: #{ld($light-form-icon-link, $dark-form-icon-link)} !default;
+$theme-icon-navigation: #{ld($light-icon-navigation, $dark-icon-navigation)} !default;
+$theme-switch-knob-disabled: #{ld($light-switch-knob-disabled, $dark-switch-knob-disabled)} !default;
+$theme-header-border-default: #{ld($light-header-border-default, $dark-header-border-default)} !default;
+$theme-text-area-border-focused: #{ld($light-text-area-border-focused, $dark-text-area-border-focused)} !default;
+$theme-text-area-border-error: #{ld($light-text-area-border-error, $dark-text-area-border-error)} !default;
+$theme-text-area-border-filled: #{ld($light-text-area-border-filled, $dark-text-area-border-filled)} !default;
+$theme-text-area-text-error: #{ld($light-text-area-text-error, $dark-text-area-text-error)} !default;
+$theme-checkbox-background-non-active: #{ld($light-checkbox-background-non-active, $dark-checkbox-background-non-active)} !default;
+$theme-checkbox-checkmark-disabled: #{ld($light-checkbox-checkmark-disabled, $dark-checkbox-checkmark-disabled)} !default;
+$theme-radio-non-active: #{ld($light-radio-non-active, $dark-radio-non-active)} !default;
+$theme-switch-knob-non-active: #{ld($light-switch-knob-non-active, $dark-switch-knob-non-active)} !default;
+$theme-switch-slider-off: #{ld($light-switch-slider-off, $dark-switch-slider-off)} !default;
+$theme-icon-link: #{ld($light-icon-link, $dark-icon-link)} !default;
+$theme-form-icon-default: #{ld($light-form-icon-default, $dark-form-icon-default)} !default;
+$theme-form-icon-focused: #{ld($light-form-icon-focused, $dark-form-icon-focused)} !default;
+$theme-form-icon-filled: #{ld($light-form-icon-filled, $dark-form-icon-filled)} !default;
+$theme-form-icon-error: #{ld($light-form-icon-error, $dark-form-icon-error)} !default;
+$theme-icon-disabled: #{ld($light-icon-disabled, $dark-icon-disabled)} !default;
+$theme-segmented-control-background-selected: #{ld($light-segmented-control-background-selected, $dark-segmented-control-background-selected)} !default;
+$theme-segmented-control-background-hover: #{ld($light-segmented-control-background-hover, $dark-segmented-control-background-hover)} !default;
+$theme-segmented-control-border-unselected: #{ld($light-segmented-control-border-unselected, $dark-segmented-control-border-unselected)} !default;
+$theme-segmented-control-text-default: #{ld($light-segmented-control-text-default, $dark-segmented-control-text-default)} !default;
+$theme-segmented-control-text-unselected: #{ld($light-segmented-control-text-unselected, $dark-segmented-control-text-unselected)} !default;
+$theme-checkbox-border-focus: #{ld($light-checkbox-border-focus, $dark-checkbox-border-focus)} !default;
+$theme-radio-focus: #{ld($light-radio-focus, $dark-radio-focus)} !default;
+$theme-dropdown-menu-header-border-focus: #{ld($light-dropdown-menu-header-border-focus, $dark-dropdown-menu-header-border-focus)} !default;
+$theme-dropdown-menu-menu-border-focus: #{ld($light-dropdown-menu-menu-border-focus, $dark-dropdown-menu-menu-border-focus)} !default;
+$theme-segmented-control-border-focus: #{ld($light-segmented-control-border-focus, $dark-segmented-control-border-focus)} !default;
+$theme-segmented-control-background-default: #{ld($light-segmented-control-background-default, $dark-segmented-control-background-default)} !default;
+$theme-side-nav-menu-border-default: #{ld($light-side-nav-menu-border-default, $dark-side-nav-menu-border-default)} !default;
+$theme-segmented-control-background-disabled: #{ld($light-segmented-control-background-disabled, $dark-segmented-control-background-disabled)} !default;
+$theme-segmented-control-border-disabled: #{ld($light-segmented-control-border-disabled, $dark-segmented-control-border-disabled)} !default;
+$theme-segmented-control-text-unselected-2: #{ld($light-segmented-control-text-unselected-2, $dark-segmented-control-text-unselected-2)} !default;
+$theme-segmented-control-background-disabled-2: #{ld($light-segmented-control-background-disabled-2, $dark-segmented-control-background-disabled-2)} !default;
+$theme-tooltip-background-default: #{ld($light-tooltip-background-default, $dark-tooltip-background-default)} !default;
+$theme-tooltip-border-default: #{ld($light-tooltip-border-default, $dark-tooltip-border-default)} !default;
+$theme-tooltip-text-default: #{ld($light-tooltip-text-default, $dark-tooltip-text-default)} !default;
+$theme-tooltip-text-error: #{ld($light-tooltip-text-error, $dark-tooltip-text-error)} !default;
+$theme-icon-alert-icon: #{ld($light-icon-alert-icon, $dark-icon-alert-icon)} !default;
+$theme-side-nav-menu-divider-default: #{ld($light-side-nav-menu-divider-default, $dark-side-nav-menu-divider-default)} !default;
+$theme-breadcrumb-border-focus: #{ld($light-breadcrumb-border-focus, $dark-breadcrumb-border-focus)} !default;
+$theme-progress-bar-track: #{ld($light-progress-bar-track, $dark-progress-bar-track)} !default;
+$theme-progress-bar-fill: #{ld($light-progress-bar-fill, $dark-progress-bar-fill)} !default;
+$theme-spinner-track: #{ld($light-spinner-track, $dark-spinner-track)} !default;
+$theme-spinner-fill: #{ld($light-spinner-fill, $dark-spinner-fill)} !default;
+$theme-date-picker-text-default: #{ld($light-date-picker-text-default, $dark-date-picker-text-default)} !default;
+$theme-scroll-bar-thumb-default: #{ld($light-scroll-bar-thumb-default, $dark-scroll-bar-thumb-default)} !default;
+$theme-scroll-bar-slider-default: #{ld($light-scroll-bar-slider-default, $dark-scroll-bar-slider-default)} !default;
+$theme-tooltip-action-icon-background-hover: #{ld($light-tooltip-action-icon-background-hover, $dark-tooltip-action-icon-background-hover)} !default;
+$theme-tooltip-action-border-default: #{ld($light-tooltip-action-border-default, $dark-tooltip-action-border-default)} !default;
+$theme-tooltip-action-menu-background-hover: #{ld($light-tooltip-action-menu-background-hover, $dark-tooltip-action-menu-background-hover)} !default;
+$theme-tooltip-action-menu-background-default: #{ld($light-tooltip-action-menu-background-default, $dark-tooltip-action-menu-background-default)} !default;
+$theme-tooltip-action-menu-background-selected: #{ld($light-tooltip-action-menu-background-selected, $dark-tooltip-action-menu-background-selected)} !default;
+$theme-tooltip-action-text-default: #{ld($light-tooltip-action-text-default, $dark-tooltip-action-text-default)} !default;
+$theme-notification-text-link: #{ld($light-notification-text-link, $dark-notification-text-link)} !default;
+$theme-panel-background-secondary: #{ld($light-panel-background-secondary, $dark-panel-background-secondary)} !default;
+$theme-accordion-border-default: #{ld($light-accordion-border-default, $dark-accordion-border-default)} !default;
+$theme-accordion-text-default: #{ld($light-accordion-text-default, $dark-accordion-text-default)} !default;
+$theme-dropdown-menu-menu-text-link: #{ld($light-dropdown-menu-menu-text-link, $dark-dropdown-menu-menu-text-link)} !default;
+$theme-stepper-border-default: #{ld($light-stepper-border-default, $dark-stepper-border-default)} !default;
+$theme-stepper-text-default: #{ld($light-stepper-text-default, $dark-stepper-text-default)} !default;
+$theme-stepper-background-default: #{ld($light-stepper-background-default, $dark-stepper-background-default)} !default;
+$theme-stepper-border-disabled: #{ld($light-stepper-border-disabled, $dark-stepper-border-disabled)} !default;
+$theme-stepper-text-disabled: #{ld($light-stepper-text-disabled, $dark-stepper-text-disabled)} !default;
+$theme-stepper-text-selected: #{ld($light-stepper-text-selected, $dark-stepper-text-selected)} !default;
+$theme-stepper-text-selected-number: #{ld($light-stepper-text-selected-number, $dark-stepper-text-selected-number)} !default;
+$theme-empty-state-stoke-default: #{ld($light-empty-state-stoke-default, $dark-empty-state-stoke-default)} !default;
+$theme-banner-alert-background-default: #{ld($light-banner-alert-background-default, $dark-banner-alert-background-default)} !default;
+$theme-banner-alert-border-default: #{ld($light-banner-alert-border-default, $dark-banner-alert-border-default)} !default;
+$theme-banner-icon-default: #{ld($light-banner-icon-default, $dark-banner-icon-default)} !default;
+$theme-banner-informational-background-default: #{ld($light-banner-informational-background-default, $dark-banner-informational-background-default)} !default;
+$theme-banner-informational-border-default: #{ld($light-banner-informational-border-default, $dark-banner-informational-border-default)} !default;
+$theme-banner-success-background-default: #{ld($light-banner-success-background-default, $dark-banner-success-background-default)} !default;
+$theme-banner-success-border-default: #{ld($light-banner-success-border-default, $dark-banner-success-border-default)} !default;
+$theme-banner-text-default: #{ld($light-banner-text-default, $dark-banner-text-default)} !default;
+$theme-banner-text-link: #{ld($light-banner-text-link, $dark-banner-text-link)} !default;
+$theme-banner-warning-background-default: #{ld($light-banner-warning-background-default, $dark-banner-warning-background-default)} !default;
+$theme-banner-warning-border-default: #{ld($light-banner-warning-border-default, $dark-banner-warning-border-default)} !default;
+$theme-login-page-background-default: #{ld($light-login-page-background-default, $dark-login-page-background-default)} !default;
+$theme-page-onboarding: #{ld($light-page-onboarding, $dark-page-onboarding)} !default;
+$theme-text-area-text-focused: #{ld($light-text-area-text-focused, $dark-text-area-text-focused)} !default;
+$theme-text-area-text-filled: #{ld($light-text-area-text-filled, $dark-text-area-text-filled)} !default;
+$theme-navigation-icon-default: #{ld($light-navigation-icon-default, $dark-navigation-icon-default)} !default;
+$theme-table-text-header-default: #{ld($light-table-text-header-default, $dark-table-text-header-default)} !default;
+$theme-table-text-header-selected: #{ld($light-table-text-header-selected, $dark-table-text-header-selected)} !default;
+$theme-table-text-body-default: #{ld($light-table-text-body-default, $dark-table-text-body-default)} !default;
+$theme-table-text-body-secondry: #{ld($light-table-text-body-secondry, $dark-table-text-body-secondry)} !default;
+$theme-accordion-background-secondary: #{ld($light-accordion-background-secondary, $dark-accordion-background-secondary)} !default;
+$theme-accordion-text-header: #{ld($light-accordion-text-header, $dark-accordion-text-header)} !default;
+$theme-accordion-icon: #{ld($light-accordion-icon, $dark-accordion-icon)} !default;
+$theme-table-icon-background: #{ld($light-table-icon-background, $dark-table-icon-background)} !default;