@mozaic-ds/vue 1.0.0-rc.2 → 2.1.0

package/src/tokens/adeo/scss/_tokens.scss

@@ -1,1514 +0,0 @@
-
-$border-s: 1 !default;
-$border-m: 2 !default;
-$border-l: 3 !default;
-$color-badge-info-background: #daeff7 !default;
-$color-badge-info-border: #0b96cc !default;
-$color-badge-info-text: #005c91 !default;
-$color-badge-success-background: #ebf5de !default;
-$color-badge-success-border: #46a610 !default;
-$color-badge-success-text: #006902 !default;
-$color-badge-warning-background: #fdf1e8 !default;
-$color-badge-warning-border: #ea7315 !default;
-$color-badge-warning-text: #8c3500 !default;
-$color-badge-danger-background: #fdeaea !default;
-$color-badge-danger-border: #ea302d !default;
-$color-badge-danger-text: #8c0003 !default;
-$color-badge-neutral-background: #e6e6e6 !default;
-$color-badge-neutral-border: #808080 !default;
-$color-badge-neutral-text: #4d4d4d !default;
-$color-primary-01-100: #d9f0f3 !default;
-$color-primary-01-200: #91d5db !default;
-$color-primary-01-300: #48bac4 !default;
-$color-primary-01-400: #009eac !default;
-$color-primary-01-500: #00919f !default;
-$color-primary-01-600: #007f8c !default;
-$color-primary-01-700: #006974 !default;
-$color-primary-01-800: #004e57 !default;
-$color-primary-01-900: #002e33 !default;
-$color-primary-02-100: #eeeff1 !default;
-$color-primary-02-200: #cfd2d8 !default;
-$color-primary-02-300: #b3b7c1 !default;
-$color-primary-02-400: #8f94a3 !default;
-$color-primary-02-500: #6a7081 !default;
-$color-primary-02-600: #494f60 !default;
-$color-primary-02-700: #343b4c !default;
-$color-primary-02-800: #242938 !default;
-$color-primary-02-900: #171b26 !default;
-$color-grey-100: #e6e6e6 !default;
-$color-grey-200: #cccccc !default;
-$color-grey-300: #b3b3b3 !default;
-$color-grey-400: #999999 !default;
-$color-grey-500: #808080 !default;
-$color-grey-600: #666666 !default;
-$color-grey-700: #4d4d4d !default;
-$color-grey-800: #333333 !default;
-$color-grey-900: #191919 !default;
-$color-grey-999: #000000 !default;
-$color-grey-000: #ffffff !default;
-$color-secondary-blue-100: #eaedef !default;
-$color-secondary-blue-200: #cdd4d8 !default;
-$color-secondary-blue-300: #b0bbc0 !default;
-$color-secondary-blue-400: #92a2a9 !default;
-$color-secondary-blue-500: #758992 !default;
-$color-secondary-blue-600: #5b737d !default;
-$color-secondary-blue-700: #405d68 !default;
-$color-secondary-blue-800: #264653 !default;
-$color-secondary-blue-900: #082435 !default;
-$color-secondary-green-100: #d9f0f3 !default;
-$color-secondary-green-200: #91d5db !default;
-$color-secondary-green-300: #48bac4 !default;
-$color-secondary-green-400: #009eac !default;
-$color-secondary-green-500: #00919f !default;
-$color-secondary-green-600: #007f8c !default;
-$color-secondary-green-700: #006974 !default;
-$color-secondary-green-800: #004e57 !default;
-$color-secondary-green-900: #002e33 !default;
-$color-secondary-purple-100: #e7e7f0 !default;
-$color-secondary-purple-200: #c5c5dc !default;
-$color-secondary-purple-300: #a4a3c7 !default;
-$color-secondary-purple-400: #8281b2 !default;
-$color-secondary-purple-500: #605f9d !default;
-$color-secondary-purple-600: #4b4a8c !default;
-$color-secondary-purple-700: #393879 !default;
-$color-secondary-purple-800: #282863 !default;
-$color-secondary-purple-900: #1a1a4b !default;
-$color-secondary-red-100: #fdeaea !default;
-$color-secondary-red-200: #f8bcbb !default;
-$color-secondary-red-300: #f38d8c !default;
-$color-secondary-red-400: #ef5f5c !default;
-$color-secondary-red-500: #ea302d !default;
-$color-secondary-red-600: #c61112 !default;
-$color-secondary-red-700: #8c0003 !default;
-$color-secondary-red-800: #530000 !default;
-$color-secondary-red-900: #2d0000 !default;
-$color-secondary-orange-100: #fdf1e8 !default;
-$color-secondary-orange-200: #f8d2b3 !default;
-$color-secondary-orange-300: #f4b27e !default;
-$color-secondary-orange-400: #ef934a !default;
-$color-secondary-orange-500: #ea7315 !default;
-$color-secondary-orange-600: #c65200 !default;
-$color-secondary-orange-700: #8c3500 !default;
-$color-secondary-orange-800: #531b00 !default;
-$color-secondary-orange-900: #360e00 !default;
-$color-secondary-yellow-100: #fff8e2 !default;
-$color-secondary-yellow-200: #ffebaf !default;
-$color-secondary-yellow-300: #fee07d !default;
-$color-secondary-yellow-400: #fcd64c !default;
-$color-secondary-yellow-500: #f8cc1c !default;
-$color-secondary-yellow-600: #c9a21b !default;
-$color-secondary-yellow-700: #9c7b18 !default;
-$color-secondary-yellow-800: #705613 !default;
-$color-secondary-yellow-900: #46350d !default;
-$color-danger-100: #fdeaea !default;
-$color-danger-200: #f8bcbb !default;
-$color-danger-300: #f38d8c !default;
-$color-danger-400: #ef5f5c !default;
-$color-danger-500: #ea302d !default;
-$color-danger-600: #c61112 !default;
-$color-danger-700: #8c0003 !default;
-$color-danger-800: #530000 !default;
-$color-danger-900: #2d0000 !default;
-$color-info-100: #daeff7 !default;
-$color-info-200: #a7d9ed !default;
-$color-info-300: #73c3e2 !default;
-$color-info-400: #3facd7 !default;
-$color-info-500: #0b96cc !default;
-$color-info-600: #007bb4 !default;
-$color-info-700: #005c91 !default;
-$color-info-800: #003a5c !default;
-$color-info-900: #002a41 !default;
-$color-warning-100: #fdf1e8 !default;
-$color-warning-200: #f8d2b3 !default;
-$color-warning-300: #f4b27e !default;
-$color-warning-400: #ef934a !default;
-$color-warning-500: #ea7315 !default;
-$color-warning-600: #c65200 !default;
-$color-warning-700: #8c3500 !default;
-$color-warning-800: #531b00 !default;
-$color-warning-900: #360e00 !default;
-$color-success-100: #ebf5de !default;
-$color-success-200: #c5e39e !default;
-$color-success-300: #9ed05f !default;
-$color-success-400: #78be20 !default;
-$color-success-500: #46a610 !default;
-$color-success-600: #188803 !default;
-$color-success-700: #006902 !default;
-$color-success-800: #035010 !default;
-$color-success-900: #023618 !default;
-$color-breadcrumb-arrow: #333333 !default;
-$color-breadcrumb-arrow-invert: #ffffff !default;
-$color-button-solid-background: #007f8c !default;
-$color-button-solid-font: #ffffff !default;
-$color-button-solid-focus-border: #006974 !default;
-$color-button-solid-disabled-background: #cccccc !default;
-$color-button-solid-disabled-font: #666666 !default;
-$color-button-solid-active-background: #006974 !default;
-$color-button-solid-hover-background: #006974 !default;
-$color-button-solid-hover-font: #ffffff !default;
-$color-button-solid-primary-02-background: #6a7081 !default;
-$color-button-solid-primary-02-font: #ffffff !default;
-$color-button-solid-primary-02-focus-border: #171b26 !default;
-$color-button-solid-primary-02-disabled-background: #cccccc !default;
-$color-button-solid-primary-02-disabled-font: #666666 !default;
-$color-button-solid-primary-02-active-background: #171b26 !default;
-$color-button-solid-primary-02-hover-background: #242938 !default;
-$color-button-solid-primary-02-hover-font: #ffffff !default;
-$color-button-solid-neutral-background: #333333 !default;
-$color-button-solid-neutral-font: #ffffff !default;
-$color-button-solid-neutral-focus-border: #191919 !default;
-$color-button-solid-neutral-disabled-background: #cccccc !default;
-$color-button-solid-neutral-disabled-font: #666666 !default;
-$color-button-solid-neutral-active-background: #333333 !default;
-$color-button-solid-neutral-hover-background: #191919 !default;
-$color-button-solid-neutral-hover-font: #ffffff !default;
-$color-button-solid-danger-background: #c61112 !default;
-$color-button-solid-danger-font: #ffffff !default;
-$color-button-solid-danger-focus-border: #8c0003 !default;
-$color-button-solid-danger-disabled-background: #cccccc !default;
-$color-button-solid-danger-disabled-font: #666666 !default;
-$color-button-solid-danger-active-background: #8c0003 !default;
-$color-button-solid-danger-hover-background: #8c0003 !default;
-$color-button-solid-danger-hover-font: #ffffff !default;
-$color-button-bordered-background: #ffffff !default;
-$color-button-bordered-border: #007f8c !default;
-$color-button-bordered-font: #007f8c !default;
-$color-button-bordered-focus-border: #006974 !default;
-$color-button-bordered-disabled-background: #cccccc !default;
-$color-button-bordered-disabled-font: #666666 !default;
-$color-button-bordered-active-background: #91d5db !default;
-$color-button-bordered-hover-background: #d9f0f3 !default;
-$color-button-bordered-primary-02-background: #ffffff !default;
-$color-button-bordered-primary-02-border: #6a7081 !default;
-$color-button-bordered-primary-02-font: #6a7081 !default;
-$color-button-bordered-primary-02-focus-border: #171b26 !default;
-$color-button-bordered-primary-02-disabled-background: #cccccc !default;
-$color-button-bordered-primary-02-disabled-font: #666666 !default;
-$color-button-bordered-primary-02-active-background: #cfd2d8 !default;
-$color-button-bordered-primary-02-hover-background: #eeeff1 !default;
-$color-button-bordered-neutral-background: #ffffff !default;
-$color-button-bordered-neutral-border: #333333 !default;
-$color-button-bordered-neutral-font: #333333 !default;
-$color-button-bordered-neutral-focus-border: #191919 !default;
-$color-button-bordered-neutral-disabled-background: #cccccc !default;
-$color-button-bordered-neutral-disabled-font: #666666 !default;
-$color-button-bordered-neutral-active-background: #cccccc !default;
-$color-button-bordered-neutral-hover-background: #e6e6e6 !default;
-$color-button-bordered-danger-background: #ffffff !default;
-$color-button-bordered-danger-border: #c61112 !default;
-$color-button-bordered-danger-font: #c61112 !default;
-$color-button-bordered-danger-focus-border: #8c0003 !default;
-$color-button-bordered-danger-disabled-background: #cccccc !default;
-$color-button-bordered-danger-disabled-font: #666666 !default;
-$color-button-bordered-danger-active-background: #f8bcbb !default;
-$color-button-bordered-danger-hover-background: #fdeaea !default;
-$color-card-bordered-background: #ffffff !default;
-$color-card-bordered-border: #808080 !default;
-$color-dialog-background: #ffffff !default;
-$color-dialog-icon: #666666 !default;
-$color-dialog-close: #808080 !default;
-$color-dialog-footer-shadow: #191919 !default;
-$color-divider-lightest: #ffffff !default;
-$color-divider-light: #b3b3b3 !default;
-$color-divider-default: #666666 !default;
-$color-divider-dark: #000000 !default;
-$color-fields-error: #c61112 !default;
-$color-fields-label: #333333 !default;
-$color-fields-requirement: #666666 !default;
-$color-fields-help: #666666 !default;
-$color-fileuploader-font: #000000 !default;
-$color-fileuploader-files-list: #e6e6e6 !default;
-$color-fileuploader-files-delete: #cccccc !default;
-$color-fileuploader-valid: #00919f !default;
-$color-fileuploader-alert: #c61112 !default;
-$color-flag-solid-background: #007f8c !default;
-$color-flag-solid-border: #007f8c !default;
-$color-flag-solid-text: #ffffff !default;
-$color-flag-solid-primary-02-background: #4b4a8c !default;
-$color-flag-solid-primary-02-border: #4b4a8c !default;
-$color-flag-solid-primary-02-text: #ffffff !default;
-$color-flag-solid-dark-background: #000000 !default;
-$color-flag-solid-dark-border: #000000 !default;
-$color-flag-solid-dark-text: #ffffff !default;
-$color-flag-solid-light-background: #ffffff !default;
-$color-flag-solid-light-border: #ffffff !default;
-$color-flag-solid-light-text: #000000 !default;
-$color-flag-solid-danger-background: #c61112 !default;
-$color-flag-solid-danger-border: #c61112 !default;
-$color-flag-solid-danger-text: #ffffff !default;
-$color-flag-bordered-background: #ffffff !default;
-$color-flag-bordered-border: #007f8c !default;
-$color-flag-bordered-text: #007f8c !default;
-$color-flag-bordered-primary-02-background: #ffffff !default;
-$color-flag-bordered-primary-02-border: #4b4a8c !default;
-$color-flag-bordered-primary-02-text: #4b4a8c !default;
-$color-flag-bordered-dark-background: #ffffff !default;
-$color-flag-bordered-dark-border: #000000 !default;
-$color-flag-bordered-dark-text: #000000 !default;
-$color-flag-bordered-light-background: #000000 !default;
-$color-flag-bordered-light-border: #ffffff !default;
-$color-flag-bordered-light-text: #ffffff !default;
-$color-flag-bordered-danger-background: #ffffff !default;
-$color-flag-bordered-danger-border: #c61112 !default;
-$color-flag-bordered-danger-text: #c61112 !default;
-$color-focus-gap: #ffffff !default;
-$color-focus-border: #758992 !default;
-$color-font-primary-01: #007f8c !default;
-$color-font-primary-02: #6a7081 !default;
-$color-font-darkest: #000000 !default;
-$color-font-darker: #191919 !default;
-$color-font-dark: #333333 !default;
-$color-font-light: #666666 !default;
-$color-font-lightest: #ffffff !default;
-$color-font-info: #007bb4 !default;
-$color-font-success: #188803 !default;
-$color-font-warning: #c65200 !default;
-$color-font-danger: #c61112 !default;
-$color-heading-underline-default: #00919f !default;
-$color-heading-underline-lightest: #91d5db !default;
-$color-hero-cover-background: #191919 !default;
-$color-input-text: #191919 !default;
-$color-input-border: #666666 !default;
-$color-input-placeholder: #808080 !default;
-$color-input-background: #ffffff !default;
-$color-input-disabled-border: #e6e6e6 !default;
-$color-input-disabled-background: #e6e6e6 !default;
-$color-input-disabled-icon: #999999 !default;
-$color-input-hover-border: #191919 !default;
-$color-input-focus-border: #758992 !default;
-$color-input-valid-border: #46a610 !default;
-$color-input-valid-hover-border: #035010 !default;
-$color-input-invalid-border: #c61112 !default;
-$color-input-invalid-hover-border: #530000 !default;
-$color-input-checked-border: #00919f !default;
-$color-input-checked-background: #00919f !default;
-$color-input-checked-icon: #ffffff !default;
-$color-input-checked-hover-border: #004e57 !default;
-$color-link-dark-base: #000000 !default;
-$color-link-dark-visited: #333333 !default;
-$color-link-dark-active: #333333 !default;
-$color-link-dark-disabled: #e6e6e6 !default;
-$color-link-dark-hover: #666666 !default;
-$color-link-light-base: #ffffff !default;
-$color-link-light-visited: #cccccc !default;
-$color-link-light-active: #cccccc !default;
-$color-link-light-disabled: #e6e6e6 !default;
-$color-link-light-hover: #999999 !default;
-$color-link-primary-base: #007f8c !default;
-$color-link-primary-visited: #006974 !default;
-$color-link-primary-active: #006974 !default;
-$color-link-primary-disabled: #e6e6e6 !default;
-$color-link-primary-hover: #004e57 !default;
-$color-link-primary-02-base: #494f60 !default;
-$color-link-primary-02-visited: #343b4c !default;
-$color-link-primary-02-active: #343b4c !default;
-$color-link-primary-02-disabled: #e6e6e6 !default;
-$color-link-primary-02-hover: #171b26 !default;
-$color-link-danger-base: #c61112 !default;
-$color-link-danger-visited: #8c0003 !default;
-$color-link-danger-active: #8c0003 !default;
-$color-link-danger-disabled: #e6e6e6 !default;
-$color-link-danger-hover: #530000 !default;
-$color-listbox-background: #ffffff !default;
-$color-listbox-border: #666666 !default;
-$color-listbox-tile-border: #b3b3b3 !default;
-$color-listbox-tile-shadow: #191919 !default;
-$color-listbox-tile-hover-background: #e6e6e6 !default;
-$color-listbox-disabled-background: #cccccc !default;
-$color-notification-font: #000000 !default;
-$color-notification-information-background: #daeff7 !default;
-$color-notification-information-border: #0b96cc !default;
-$color-notification-information-icon: #007bb4 !default;
-$color-notification-success-background: #ebf5de !default;
-$color-notification-success-border: #46a610 !default;
-$color-notification-success-icon: #188803 !default;
-$color-notification-warning-background: #fdf1e8 !default;
-$color-notification-warning-border: #ea7315 !default;
-$color-notification-warning-icon: #c65200 !default;
-$color-notification-danger-background: #fdeaea !default;
-$color-notification-danger-border: #ea302d !default;
-$color-notification-danger-icon: #c61112 !default;
-$color-option-button-label-shadow: #b3b3b3 !default;
-$color-option-button-hover-label-shadow: #333333 !default;
-$color-option-button-checked-label-border: #00919f !default;
-$color-option-button-checked-label-shadow: #d9f0f3 !default;
-$color-option-button-disabled-label-background: #cccccc !default;
-$color-option-card-label-shadow: #b3b3b3 !default;
-$color-option-card-hover-label-shadow: #333333 !default;
-$color-option-card-checked-label-border: #00919f !default;
-$color-option-card-checked-label-shadow: #d9f0f3 !default;
-$color-overlay-background: #191919 !default;
-$color-overlay-loader-background: #082435 !default;
-$color-password-input-button-hover-background: #e6e6e6 !default;
-$color-phone-number-button-border: #666666 !default;
-$color-phone-number-list-background: #ffffff !default;
-$color-phone-number-item-border: #b3b3b3 !default;
-$color-phone-number-item-focus-background: #e6e6e6 !default;
-$color-progress-background: #cccccc !default;
-$color-progress-indicator: #007bb4 !default;
-$color-progress-percentage-default: #191919 !default;
-$color-progress-percentage-half: #ffffff !default;
-$color-progress-branded-indicator: #00919f !default;
-$color-star-empty: #ffffff !default;
-$color-star-focus: #758992 !default;
-$color-star-full: #ea7315 !default;
-$color-star-hover: #f4b27e !default;
-$color-stepper-item-background: #999999 !default;
-$color-stepper-item-current-background: #00919f !default;
-$color-stepper-link-hover-text: #00919f !default;
-$color-stepper-indicator-background: #ffffff !default;
-$color-stepper-indicator-border: #999999 !default;
-$color-stepper-indicator-current-background: #00919f !default;
-$color-stepper-indicator-current-border: #00919f !default;
-$color-stepper-icon: #00919f !default;
-$color-stepper-title: #00919f !default;
-$color-tabs-background: #ffffff !default;
-$color-tabs-shadow: #000000 !default;
-$color-tabs-default: #666666 !default;
-$color-tabs-element-background: #eeeff1 !default;
-$color-tabs-hover: #004e57 !default;
-$color-tabs-disabled-background: #cccccc !default;
-$color-tabs-active-background: #cfd2d8 !default;
-$color-tabs-active-text: #333333 !default;
-$color-tabs-selected-border: #000000 !default;
-$color-tabs-selected-text: #000000 !default;
-$color-tabs-active-disabled: #91d5db !default;
-$color-tag-text-light-background: #ffffff !default;
-$color-tag-text-light-border: #808080 !default;
-$color-tag-text-light-text: #191919 !default;
-$color-tag-text-dark-background: #191919 !default;
-$color-tag-text-dark-border: #ffffff !default;
-$color-tag-text-dark-text: #ffffff !default;
-$color-tag-link-light-background: #ffffff !default;
-$color-tag-link-light-border: #808080 !default;
-$color-tag-link-light-text: #191919 !default;
-$color-tag-link-light-hover-background: #e6e6e6 !default;
-$color-tag-link-light-active-background: #cccccc !default;
-$color-tag-link-dark-background: #191919 !default;
-$color-tag-link-dark-border: #ffffff !default;
-$color-tag-link-dark-text: #ffffff !default;
-$color-tag-link-dark-hover-background: #333333 !default;
-$color-tag-link-dark-active-background: #4d4d4d !default;
-$color-tag-selectable-light-background: #ffffff !default;
-$color-tag-selectable-light-border: #808080 !default;
-$color-tag-selectable-light-text: #191919 !default;
-$color-tag-selectable-light-hover-background: #48bac4 !default;
-$color-tag-selectable-light-active-background: #004e57 !default;
-$color-tag-selectable-light-active-border: #004e57 !default;
-$color-tag-selectable-light-active-text: #ffffff !default;
-$color-tag-selectable-light-disabled-background: #e6e6e6 !default;
-$color-tag-selectable-light-disabled-text: #808080 !default;
-$color-tag-selectable-light-selected-background: #007f8c !default;
-$color-tag-selectable-light-selected-text: #ffffff !default;
-$color-tag-selectable-light-selected-hover-background: #006974 !default;
-$color-tag-selectable-dark-background: #191919 !default;
-$color-tag-selectable-dark-border: #ffffff !default;
-$color-tag-selectable-dark-text: #ffffff !default;
-$color-tag-selectable-dark-hover-background: #006974 !default;
-$color-tag-selectable-dark-active-background: #91d5db !default;
-$color-tag-selectable-dark-active-border: #91d5db !default;
-$color-tag-selectable-dark-active-text: #191919 !default;
-$color-tag-selectable-dark-selected-background: #009eac !default;
-$color-tag-selectable-dark-selected-border: #009eac !default;
-$color-tag-selectable-dark-selected-text: #191919 !default;
-$color-tag-selectable-dark-selected-hover-background: #48bac4 !default;
-$color-tag-selectable-dark-disabled-background: #4d4d4d !default;
-$color-tag-selectable-dark-disabled-text: #808080 !default;
-$color-tag-removable-light-background: #333333 !default;
-$color-tag-removable-light-text: #ffffff !default;
-$color-tag-removable-light-icon: #cccccc !default;
-$color-tag-removable-light-hover-background: #4d4d4d !default;
-$color-tag-removable-light-active-background: #666666 !default;
-$color-tag-removable-dark-background: #cccccc !default;
-$color-tag-removable-dark-text: #191919 !default;
-$color-tag-removable-dark-icon: #191919 !default;
-$color-tag-removable-dark-hover-background: #b3b3b3 !default;
-$color-tag-removable-dark-active-background: #999999 !default;
-$color-toggle-off-background: #666666 !default;
-$color-toggle-off-circle: #ffffff !default;
-$color-toggle-on-background: #00919f !default;
-$color-toggle-on-circle: #ffffff !default;
-$color-toggle-hover-circle: #e6e6e6 !default;
-$color-toggle-disabled-background: #e6e6e6 !default;
-$color-toggle-disabled-circle: #b3b3b3 !default;
-$color-toggle-disabled-checked-background: #91d5db !default;
-$color-toggle-disabled-checked-circle: #ffffff !default;
-$color-tooltip-background: #4d4d4d !default;
-$color-tooltip-border: #ffffff !default;
-$color-secondary-sandgrey-100: #eeedea !default;
-$color-secondary-sandgrey-200: #dddcd5 !default;
-$color-secondary-sandgrey-300: #c2c1ba !default;
-$color-secondary-sandgrey-400: #a7a6a0 !default;
-$color-secondary-sandgrey-500: #8c8b85 !default;
-$color-secondary-sandgrey-600: #71706b !default;
-$color-secondary-sandgrey-700: #555550 !default;
-$color-secondary-sandgrey-800: #3a3936 !default;
-$color-secondary-sandgrey-900: #1e1e1c !default;
-$preset: adeo !default;
-$radius-s: 2 !default;
-$radius-m: 4 !default;
-$radius-l: 6 !default;
-$shadow-s-x: 0px !default;
-$shadow-s-y: 1px !default;
-$shadow-s-blur: 5px !default;
-$shadow-s-spread: 0px !default;
-$shadow-s-opacity: 0.2 !default;
-$shadow-m-x: 0px !default;
-$shadow-m-y: 2px !default;
-$shadow-m-blur: 10px !default;
-$shadow-m-spread: 0px !default;
-$shadow-m-opacity: 0.2 !default;
-$shadow-l-x: 0px !default;
-$shadow-l-y: 4px !default;
-$shadow-l-blur: 20px !default;
-$shadow-l-spread: 0px !default;
-$shadow-l-opacity: 0.2 !default;
-$magic-unit: 1 !default;
-$local-rem-value: 16 !default;
-$size-font-10: 2.5625rem !default; // 41px
-$size-font-11: 3.0625rem !default; // 49px
-$size-font-12: 3.6875rem !default; // 59px
-$size-font-01: 0.6815rem !default; // 11px
-$size-font-02: 0.75rem !default; // 12px
-$size-font-03: 0.8125rem !default; // 13px
-$size-font-04: 0.875rem !default; // 14px
-$size-font-05: 1rem !default; // 16px
-$size-font-06: 1.125rem !default; // 18px
-$size-font-07: 1.4375rem !default; // 23px
-$size-font-08: 1.75rem !default; // 28px
-$size-font-09: 2.125rem !default; // 34px
-$size-line-10-xs: 2.5rem !default; // 40px
-$size-line-10-s: 3rem !default; // 48px
-$size-line-10-m: 3.5rem !default; // 56px
-$size-line-10-l: 3.75rem !default; // 60px
-$size-line-11-xs: 3rem !default; // 48px
-$size-line-11-s: 3.5rem !default; // 56px
-$size-line-11-m: 4.25rem !default; // 68px
-$size-line-11-l: 4.5rem !default; // 72px
-$size-line-12-xs: 3.75rem !default; // 60px
-$size-line-12-s: 4.25rem !default; // 68px
-$size-line-12-m: 5rem !default; // 80px
-$size-line-12-l: 5.5rem !default; // 88px
-$size-line-01-xs: 0.75rem !default; // 12px
-$size-line-01-s: 0.75rem !default; // 12px
-$size-line-01-m: 0.875rem !default; // 14px
-$size-line-01-l: 1rem !default; // 16px
-$size-line-02-xs: 0.75rem !default; // 12px
-$size-line-02-s: 0.875rem !default; // 14px
-$size-line-02-m: 1rem !default; // 16px
-$size-line-02-l: 1.125rem !default; // 18px
-$size-line-03-xs: 0.875rem !default; // 14px
-$size-line-03-s: 1rem !default; // 16px
-$size-line-03-m: 1.125rem !default; // 18px
-$size-line-03-l: 1.25rem !default; // 20px
-$size-line-04-xs: 0.875rem !default; // 14px
-$size-line-04-s: 1rem !default; // 16px
-$size-line-04-m: 1.125rem !default; // 18px
-$size-line-04-l: 1.375rem !default; // 22px
-$size-line-05-xs: 1rem !default; // 16px
-$size-line-05-s: 1.125rem !default; // 18px
-$size-line-05-m: 1.375rem !default; // 22px
-$size-line-05-l: 1.5rem !default; // 24px
-$size-line-06-xs: 1.125rem !default; // 18px
-$size-line-06-s: 1.25rem !default; // 20px
-$size-line-06-m: 1.5rem !default; // 24px
-$size-line-06-l: 1.75rem !default; // 28px
-$size-line-07-xs: 1.5rem !default; // 24px
-$size-line-07-s: 1.75rem !default; // 28px
-$size-line-07-m: 2rem !default; // 32px
-$size-line-07-l: 2.25rem !default; // 36px
-$size-line-08-xs: 1.75rem !default; // 28px
-$size-line-08-s: 2rem !default; // 32px
-$size-line-08-m: 2.25rem !default; // 36px
-$size-line-08-l: 2.75rem !default; // 44px
-$size-line-09-xs: 2.25rem !default; // 36px
-$size-line-09-s: 2.5rem !default; // 40px
-$size-line-09-m: 2.75rem !default; // 44px
-$size-line-09-l: 3.25rem !default; // 52px
-$size-gutter-screen-s: 1rem !default;
-$size-gutter-screen-m: 2rem !default;
-$screen-s: 0px !default;
-$screen-s-medium: 320px !default;
-$screen-s-large: 360px !default;
-$screen-s-xlarge: 390px !default;
-$screen-m: 680px !default;
-$screen-m-medium: 769px !default;
-$screen-l: 1024px !default;
-$screen-l-medium: 1100px !default;
-$screen-xl: 1280px !default;
-$screen-xl-medium: 1440px !default;
-$screen-xl-large: 1680px !default;
-$screen-xxl: 1920px !default;
-
-$tokens: (
-  'border': (
-    's': $border-s,
-    'm': $border-m,
-    'l': $border-l
-  ),
-  'color': (
-    'badge': (
-      'info': (
-        'background': $color-badge-info-background,
-        'border': $color-badge-info-border,
-        'text': $color-badge-info-text
-      ),
-      'success': (
-        'background': $color-badge-success-background,
-        'border': $color-badge-success-border,
-        'text': $color-badge-success-text
-      ),
-      'warning': (
-        'background': $color-badge-warning-background,
-        'border': $color-badge-warning-border,
-        'text': $color-badge-warning-text
-      ),
-      'danger': (
-        'background': $color-badge-danger-background,
-        'border': $color-badge-danger-border,
-        'text': $color-badge-danger-text
-      ),
-      'neutral': (
-        'background': $color-badge-neutral-background,
-        'border': $color-badge-neutral-border,
-        'text': $color-badge-neutral-text
-      )
-    ),
-    'primary-01': (
-      '100': $color-primary-01-100,
-      '200': $color-primary-01-200,
-      '300': $color-primary-01-300,
-      '400': $color-primary-01-400,
-      '500': $color-primary-01-500,
-      '600': $color-primary-01-600,
-      '700': $color-primary-01-700,
-      '800': $color-primary-01-800,
-      '900': $color-primary-01-900
-    ),
-    'primary-02': (
-      '100': $color-primary-02-100,
-      '200': $color-primary-02-200,
-      '300': $color-primary-02-300,
-      '400': $color-primary-02-400,
-      '500': $color-primary-02-500,
-      '600': $color-primary-02-600,
-      '700': $color-primary-02-700,
-      '800': $color-primary-02-800,
-      '900': $color-primary-02-900
-    ),
-    'grey': (
-      '100': $color-grey-100,
-      '200': $color-grey-200,
-      '300': $color-grey-300,
-      '400': $color-grey-400,
-      '500': $color-grey-500,
-      '600': $color-grey-600,
-      '700': $color-grey-700,
-      '800': $color-grey-800,
-      '900': $color-grey-900,
-      '999': $color-grey-999,
-      '000': $color-grey-000
-    ),
-    'secondary-blue': (
-      '100': $color-secondary-blue-100,
-      '200': $color-secondary-blue-200,
-      '300': $color-secondary-blue-300,
-      '400': $color-secondary-blue-400,
-      '500': $color-secondary-blue-500,
-      '600': $color-secondary-blue-600,
-      '700': $color-secondary-blue-700,
-      '800': $color-secondary-blue-800,
-      '900': $color-secondary-blue-900
-    ),
-    'secondary-green': (
-      '100': $color-secondary-green-100,
-      '200': $color-secondary-green-200,
-      '300': $color-secondary-green-300,
-      '400': $color-secondary-green-400,
-      '500': $color-secondary-green-500,
-      '600': $color-secondary-green-600,
-      '700': $color-secondary-green-700,
-      '800': $color-secondary-green-800,
-      '900': $color-secondary-green-900
-    ),
-    'secondary-purple': (
-      '100': $color-secondary-purple-100,
-      '200': $color-secondary-purple-200,
-      '300': $color-secondary-purple-300,
-      '400': $color-secondary-purple-400,
-      '500': $color-secondary-purple-500,
-      '600': $color-secondary-purple-600,
-      '700': $color-secondary-purple-700,
-      '800': $color-secondary-purple-800,
-      '900': $color-secondary-purple-900
-    ),
-    'secondary-red': (
-      '100': $color-secondary-red-100,
-      '200': $color-secondary-red-200,
-      '300': $color-secondary-red-300,
-      '400': $color-secondary-red-400,
-      '500': $color-secondary-red-500,
-      '600': $color-secondary-red-600,
-      '700': $color-secondary-red-700,
-      '800': $color-secondary-red-800,
-      '900': $color-secondary-red-900
-    ),
-    'secondary-orange': (
-      '100': $color-secondary-orange-100,
-      '200': $color-secondary-orange-200,
-      '300': $color-secondary-orange-300,
-      '400': $color-secondary-orange-400,
-      '500': $color-secondary-orange-500,
-      '600': $color-secondary-orange-600,
-      '700': $color-secondary-orange-700,
-      '800': $color-secondary-orange-800,
-      '900': $color-secondary-orange-900
-    ),
-    'secondary-yellow': (
-      '100': $color-secondary-yellow-100,
-      '200': $color-secondary-yellow-200,
-      '300': $color-secondary-yellow-300,
-      '400': $color-secondary-yellow-400,
-      '500': $color-secondary-yellow-500,
-      '600': $color-secondary-yellow-600,
-      '700': $color-secondary-yellow-700,
-      '800': $color-secondary-yellow-800,
-      '900': $color-secondary-yellow-900
-    ),
-    'danger': (
-      '100': $color-danger-100,
-      '200': $color-danger-200,
-      '300': $color-danger-300,
-      '400': $color-danger-400,
-      '500': $color-danger-500,
-      '600': $color-danger-600,
-      '700': $color-danger-700,
-      '800': $color-danger-800,
-      '900': $color-danger-900
-    ),
-    'info': (
-      '100': $color-info-100,
-      '200': $color-info-200,
-      '300': $color-info-300,
-      '400': $color-info-400,
-      '500': $color-info-500,
-      '600': $color-info-600,
-      '700': $color-info-700,
-      '800': $color-info-800,
-      '900': $color-info-900
-    ),
-    'warning': (
-      '100': $color-warning-100,
-      '200': $color-warning-200,
-      '300': $color-warning-300,
-      '400': $color-warning-400,
-      '500': $color-warning-500,
-      '600': $color-warning-600,
-      '700': $color-warning-700,
-      '800': $color-warning-800,
-      '900': $color-warning-900
-    ),
-    'success': (
-      '100': $color-success-100,
-      '200': $color-success-200,
-      '300': $color-success-300,
-      '400': $color-success-400,
-      '500': $color-success-500,
-      '600': $color-success-600,
-      '700': $color-success-700,
-      '800': $color-success-800,
-      '900': $color-success-900
-    ),
-    'breadcrumb': (
-      'arrow': $color-breadcrumb-arrow,
-      'arrow-invert': $color-breadcrumb-arrow-invert
-    ),
-    'button': (
-      'solid': (
-        'background': $color-button-solid-background,
-        'font': $color-button-solid-font,
-        'focus': (
-          'border': $color-button-solid-focus-border
-        ),
-        'disabled': (
-          'background': $color-button-solid-disabled-background,
-          'font': $color-button-solid-disabled-font
-        ),
-        'active': (
-          'background': $color-button-solid-active-background
-        ),
-        'hover': (
-          'background': $color-button-solid-hover-background,
-          'font': $color-button-solid-hover-font
-        )
-      ),
-      'solid-primary-02': (
-        'background': $color-button-solid-primary-02-background,
-        'font': $color-button-solid-primary-02-font,
-        'focus': (
-          'border': $color-button-solid-primary-02-focus-border
-        ),
-        'disabled': (
-          'background': $color-button-solid-primary-02-disabled-background,
-          'font': $color-button-solid-primary-02-disabled-font
-        ),
-        'active': (
-          'background': $color-button-solid-primary-02-active-background
-        ),
-        'hover': (
-          'background': $color-button-solid-primary-02-hover-background,
-          'font': $color-button-solid-primary-02-hover-font
-        )
-      ),
-      'solid-neutral': (
-        'background': $color-button-solid-neutral-background,
-        'font': $color-button-solid-neutral-font,
-        'focus': (
-          'border': $color-button-solid-neutral-focus-border
-        ),
-        'disabled': (
-          'background': $color-button-solid-neutral-disabled-background,
-          'font': $color-button-solid-neutral-disabled-font
-        ),
-        'active': (
-          'background': $color-button-solid-neutral-active-background
-        ),
-        'hover': (
-          'background': $color-button-solid-neutral-hover-background,
-          'font': $color-button-solid-neutral-hover-font
-        )
-      ),
-      'solid-danger': (
-        'background': $color-button-solid-danger-background,
-        'font': $color-button-solid-danger-font,
-        'focus': (
-          'border': $color-button-solid-danger-focus-border
-        ),
-        'disabled': (
-          'background': $color-button-solid-danger-disabled-background,
-          'font': $color-button-solid-danger-disabled-font
-        ),
-        'active': (
-          'background': $color-button-solid-danger-active-background
-        ),
-        'hover': (
-          'background': $color-button-solid-danger-hover-background,
-          'font': $color-button-solid-danger-hover-font
-        )
-      ),
-      'bordered': (
-        'background': $color-button-bordered-background,
-        'border': $color-button-bordered-border,
-        'font': $color-button-bordered-font,
-        'focus': (
-          'border': $color-button-bordered-focus-border
-        ),
-        'disabled': (
-          'background': $color-button-bordered-disabled-background,
-          'font': $color-button-bordered-disabled-font
-        ),
-        'active': (
-          'background': $color-button-bordered-active-background
-        ),
-        'hover': (
-          'background': $color-button-bordered-hover-background
-        )
-      ),
-      'bordered-primary-02': (
-        'background': $color-button-bordered-primary-02-background,
-        'border': $color-button-bordered-primary-02-border,
-        'font': $color-button-bordered-primary-02-font,
-        'focus': (
-          'border': $color-button-bordered-primary-02-focus-border
-        ),
-        'disabled': (
-          'background': $color-button-bordered-primary-02-disabled-background,
-          'font': $color-button-bordered-primary-02-disabled-font
-        ),
-        'active': (
-          'background': $color-button-bordered-primary-02-active-background
-        ),
-        'hover': (
-          'background': $color-button-bordered-primary-02-hover-background
-        )
-      ),
-      'bordered-neutral': (
-        'background': $color-button-bordered-neutral-background,
-        'border': $color-button-bordered-neutral-border,
-        'font': $color-button-bordered-neutral-font,
-        'focus': (
-          'border': $color-button-bordered-neutral-focus-border
-        ),
-        'disabled': (
-          'background': $color-button-bordered-neutral-disabled-background,
-          'font': $color-button-bordered-neutral-disabled-font
-        ),
-        'active': (
-          'background': $color-button-bordered-neutral-active-background
-        ),
-        'hover': (
-          'background': $color-button-bordered-neutral-hover-background
-        )
-      ),
-      'bordered-danger': (
-        'background': $color-button-bordered-danger-background,
-        'border': $color-button-bordered-danger-border,
-        'font': $color-button-bordered-danger-font,
-        'focus': (
-          'border': $color-button-bordered-danger-focus-border
-        ),
-        'disabled': (
-          'background': $color-button-bordered-danger-disabled-background,
-          'font': $color-button-bordered-danger-disabled-font
-        ),
-        'active': (
-          'background': $color-button-bordered-danger-active-background
-        ),
-        'hover': (
-          'background': $color-button-bordered-danger-hover-background
-        )
-      )
-    ),
-    'card': (
-      'bordered': (
-        'background': $color-card-bordered-background,
-        'border': $color-card-bordered-border
-      )
-    ),
-    'dialog': (
-      'background': $color-dialog-background,
-      'icon': $color-dialog-icon,
-      'close': $color-dialog-close,
-      'footer': (
-        'shadow': $color-dialog-footer-shadow
-      )
-    ),
-    'divider': (
-      'lightest': $color-divider-lightest,
-      'light': $color-divider-light,
-      'default': $color-divider-default,
-      'dark': $color-divider-dark
-    ),
-    'fields': (
-      'error': $color-fields-error,
-      'label': $color-fields-label,
-      'requirement': $color-fields-requirement,
-      'help': $color-fields-help
-    ),
-    'fileuploader': (
-      'font': $color-fileuploader-font,
-      'files': (
-        'list': $color-fileuploader-files-list,
-        'delete': $color-fileuploader-files-delete
-      ),
-      'valid': $color-fileuploader-valid,
-      'alert': $color-fileuploader-alert
-    ),
-    'flag': (
-      'solid': (
-        'background': $color-flag-solid-background,
-        'border': $color-flag-solid-border,
-        'text': $color-flag-solid-text
-      ),
-      'solid-primary-02': (
-        'background': $color-flag-solid-primary-02-background,
-        'border': $color-flag-solid-primary-02-border,
-        'text': $color-flag-solid-primary-02-text
-      ),
-      'solid-dark': (
-        'background': $color-flag-solid-dark-background,
-        'border': $color-flag-solid-dark-border,
-        'text': $color-flag-solid-dark-text
-      ),
-      'solid-light': (
-        'background': $color-flag-solid-light-background,
-        'border': $color-flag-solid-light-border,
-        'text': $color-flag-solid-light-text
-      ),
-      'solid-danger': (
-        'background': $color-flag-solid-danger-background,
-        'border': $color-flag-solid-danger-border,
-        'text': $color-flag-solid-danger-text
-      ),
-      'bordered': (
-        'background': $color-flag-bordered-background,
-        'border': $color-flag-bordered-border,
-        'text': $color-flag-bordered-text
-      ),
-      'bordered-primary-02': (
-        'background': $color-flag-bordered-primary-02-background,
-        'border': $color-flag-bordered-primary-02-border,
-        'text': $color-flag-bordered-primary-02-text
-      ),
-      'bordered-dark': (
-        'background': $color-flag-bordered-dark-background,
-        'border': $color-flag-bordered-dark-border,
-        'text': $color-flag-bordered-dark-text
-      ),
-      'bordered-light': (
-        'background': $color-flag-bordered-light-background,
-        'border': $color-flag-bordered-light-border,
-        'text': $color-flag-bordered-light-text
-      ),
-      'bordered-danger': (
-        'background': $color-flag-bordered-danger-background,
-        'border': $color-flag-bordered-danger-border,
-        'text': $color-flag-bordered-danger-text
-      )
-    ),
-    'focus': (
-      'gap': $color-focus-gap,
-      'border': $color-focus-border
-    ),
-    'font': (
-      'primary-01': $color-font-primary-01,
-      'primary-02': $color-font-primary-02,
-      'darkest': $color-font-darkest,
-      'darker': $color-font-darker,
-      'dark': $color-font-dark,
-      'light': $color-font-light,
-      'lightest': $color-font-lightest,
-      'info': $color-font-info,
-      'success': $color-font-success,
-      'warning': $color-font-warning,
-      'danger': $color-font-danger
-    ),
-    'heading': (
-      'underline': (
-        'default': $color-heading-underline-default,
-        'lightest': $color-heading-underline-lightest
-      )
-    ),
-    'hero': (
-      'cover': (
-        'background': $color-hero-cover-background
-      )
-    ),
-    'input': (
-      'text': $color-input-text,
-      'border': $color-input-border,
-      'placeholder': $color-input-placeholder,
-      'background': $color-input-background,
-      'disabled': (
-        'border': $color-input-disabled-border,
-        'background': $color-input-disabled-background,
-        'icon': $color-input-disabled-icon
-      ),
-      'hover': (
-        'border': $color-input-hover-border
-      ),
-      'focus': (
-        'border': $color-input-focus-border
-      ),
-      'valid': (
-        'border': $color-input-valid-border,
-        'hover': (
-          'border': $color-input-valid-hover-border
-        )
-      ),
-      'invalid': (
-        'border': $color-input-invalid-border,
-        'hover': (
-          'border': $color-input-invalid-hover-border
-        )
-      ),
-      'checked': (
-        'border': $color-input-checked-border,
-        'background': $color-input-checked-background,
-        'icon': $color-input-checked-icon,
-        'hover': (
-          'border': $color-input-checked-hover-border
-        )
-      )
-    ),
-    'link': (
-      'dark': (
-        'base': $color-link-dark-base,
-        'visited': $color-link-dark-visited,
-        'active': $color-link-dark-active,
-        'disabled': $color-link-dark-disabled,
-        'hover': $color-link-dark-hover
-      ),
-      'light': (
-        'base': $color-link-light-base,
-        'visited': $color-link-light-visited,
-        'active': $color-link-light-active,
-        'disabled': $color-link-light-disabled,
-        'hover': $color-link-light-hover
-      ),
-      'primary': (
-        'base': $color-link-primary-base,
-        'visited': $color-link-primary-visited,
-        'active': $color-link-primary-active,
-        'disabled': $color-link-primary-disabled,
-        'hover': $color-link-primary-hover
-      ),
-      'primary-02': (
-        'base': $color-link-primary-02-base,
-        'visited': $color-link-primary-02-visited,
-        'active': $color-link-primary-02-active,
-        'disabled': $color-link-primary-02-disabled,
-        'hover': $color-link-primary-02-hover
-      ),
-      'danger': (
-        'base': $color-link-danger-base,
-        'visited': $color-link-danger-visited,
-        'active': $color-link-danger-active,
-        'disabled': $color-link-danger-disabled,
-        'hover': $color-link-danger-hover
-      )
-    ),
-    'listbox': (
-      'background': $color-listbox-background,
-      'border': $color-listbox-border,
-      'tile': (
-        'border': $color-listbox-tile-border,
-        'shadow': $color-listbox-tile-shadow,
-        'hover': (
-          'background': $color-listbox-tile-hover-background
-        )
-      ),
-      'disabled': (
-        'background': $color-listbox-disabled-background
-      )
-    ),
-    'notification': (
-      'font': $color-notification-font,
-      'information': (
-        'background': $color-notification-information-background,
-        'border': $color-notification-information-border,
-        'icon': $color-notification-information-icon
-      ),
-      'success': (
-        'background': $color-notification-success-background,
-        'border': $color-notification-success-border,
-        'icon': $color-notification-success-icon
-      ),
-      'warning': (
-        'background': $color-notification-warning-background,
-        'border': $color-notification-warning-border,
-        'icon': $color-notification-warning-icon
-      ),
-      'danger': (
-        'background': $color-notification-danger-background,
-        'border': $color-notification-danger-border,
-        'icon': $color-notification-danger-icon
-      )
-    ),
-    'option-button': (
-      'label': (
-        'shadow': $color-option-button-label-shadow
-      ),
-      'hover': (
-        'label': (
-          'shadow': $color-option-button-hover-label-shadow
-        )
-      ),
-      'checked': (
-        'label': (
-          'border': $color-option-button-checked-label-border,
-          'shadow': $color-option-button-checked-label-shadow
-        )
-      ),
-      'disabled': (
-        'label': (
-          'background': $color-option-button-disabled-label-background
-        )
-      )
-    ),
-    'option-card': (
-      'label': (
-        'shadow': $color-option-card-label-shadow
-      ),
-      'hover': (
-        'label': (
-          'shadow': $color-option-card-hover-label-shadow
-        )
-      ),
-      'checked': (
-        'label': (
-          'border': $color-option-card-checked-label-border,
-          'shadow': $color-option-card-checked-label-shadow
-        )
-      )
-    ),
-    'overlay': (
-      'background': $color-overlay-background,
-      'loader': (
-        'background': $color-overlay-loader-background
-      )
-    ),
-    'password-input': (
-      'button': (
-        'hover': (
-          'background': $color-password-input-button-hover-background
-        )
-      )
-    ),
-    'phone-number': (
-      'button': (
-        'border': $color-phone-number-button-border
-      ),
-      'list': (
-        'background': $color-phone-number-list-background
-      ),
-      'item': (
-        'border': $color-phone-number-item-border,
-        'focus': (
-          'background': $color-phone-number-item-focus-background
-        )
-      )
-    ),
-    'progress': (
-      'background': $color-progress-background,
-      'indicator': $color-progress-indicator,
-      'percentage': (
-        'default': $color-progress-percentage-default,
-        'half': $color-progress-percentage-half
-      ),
-      'branded': (
-        'indicator': $color-progress-branded-indicator
-      )
-    ),
-    'star': (
-      'empty': $color-star-empty,
-      'focus': $color-star-focus,
-      'full': $color-star-full,
-      'hover': $color-star-hover
-    ),
-    'stepper': (
-      'item': (
-        'background': $color-stepper-item-background,
-        'current': (
-          'background': $color-stepper-item-current-background
-        )
-      ),
-      'link': (
-        'hover': (
-          'text': $color-stepper-link-hover-text
-        )
-      ),
-      'indicator': (
-        'background': $color-stepper-indicator-background,
-        'border': $color-stepper-indicator-border,
-        'current': (
-          'background': $color-stepper-indicator-current-background,
-          'border': $color-stepper-indicator-current-border
-        )
-      ),
-      'icon': $color-stepper-icon,
-      'title': $color-stepper-title
-    ),
-    'tabs': (
-      'background': $color-tabs-background,
-      'shadow': $color-tabs-shadow,
-      'default': $color-tabs-default,
-      'element': (
-        'background': $color-tabs-element-background
-      ),
-      'hover': $color-tabs-hover,
-      'disabled': (
-        'background': $color-tabs-disabled-background
-      ),
-      'active': (
-        'background': $color-tabs-active-background,
-        'text': $color-tabs-active-text
-      ),
-      'selected': (
-        'border': $color-tabs-selected-border,
-        'text': $color-tabs-selected-text
-      ),
-      'active-disabled': $color-tabs-active-disabled
-    ),
-    'tag': (
-      'text': (
-        'light': (
-          'background': $color-tag-text-light-background,
-          'border': $color-tag-text-light-border,
-          'text': $color-tag-text-light-text
-        ),
-        'dark': (
-          'background': $color-tag-text-dark-background,
-          'border': $color-tag-text-dark-border,
-          'text': $color-tag-text-dark-text
-        )
-      ),
-      'link': (
-        'light': (
-          'background': $color-tag-link-light-background,
-          'border': $color-tag-link-light-border,
-          'text': $color-tag-link-light-text,
-          'hover': (
-            'background': $color-tag-link-light-hover-background
-          ),
-          'active': (
-            'background': $color-tag-link-light-active-background
-          )
-        ),
-        'dark': (
-          'background': $color-tag-link-dark-background,
-          'border': $color-tag-link-dark-border,
-          'text': $color-tag-link-dark-text,
-          'hover': (
-            'background': $color-tag-link-dark-hover-background
-          ),
-          'active': (
-            'background': $color-tag-link-dark-active-background
-          )
-        )
-      ),
-      'selectable': (
-        'light': (
-          'background': $color-tag-selectable-light-background,
-          'border': $color-tag-selectable-light-border,
-          'text': $color-tag-selectable-light-text,
-          'hover': (
-            'background': $color-tag-selectable-light-hover-background
-          ),
-          'active': (
-            'background': $color-tag-selectable-light-active-background,
-            'border': $color-tag-selectable-light-active-border,
-            'text': $color-tag-selectable-light-active-text
-          ),
-          'disabled': (
-            'background': $color-tag-selectable-light-disabled-background,
-            'text': $color-tag-selectable-light-disabled-text
-          ),
-          'selected': (
-            'background': $color-tag-selectable-light-selected-background,
-            'text': $color-tag-selectable-light-selected-text,
-            'hover': (
-              'background': $color-tag-selectable-light-selected-hover-background
-            )
-          )
-        ),
-        'dark': (
-          'background': $color-tag-selectable-dark-background,
-          'border': $color-tag-selectable-dark-border,
-          'text': $color-tag-selectable-dark-text,
-          'hover': (
-            'background': $color-tag-selectable-dark-hover-background
-          ),
-          'active': (
-            'background': $color-tag-selectable-dark-active-background,
-            'border': $color-tag-selectable-dark-active-border,
-            'text': $color-tag-selectable-dark-active-text
-          ),
-          'selected': (
-            'background': $color-tag-selectable-dark-selected-background,
-            'border': $color-tag-selectable-dark-selected-border,
-            'text': $color-tag-selectable-dark-selected-text,
-            'hover': (
-              'background': $color-tag-selectable-dark-selected-hover-background
-            )
-          ),
-          'disabled': (
-            'background': $color-tag-selectable-dark-disabled-background,
-            'text': $color-tag-selectable-dark-disabled-text
-          )
-        )
-      ),
-      'removable': (
-        'light': (
-          'background': $color-tag-removable-light-background,
-          'text': $color-tag-removable-light-text,
-          'icon': $color-tag-removable-light-icon,
-          'hover': (
-            'background': $color-tag-removable-light-hover-background
-          ),
-          'active': (
-            'background': $color-tag-removable-light-active-background
-          )
-        ),
-        'dark': (
-          'background': $color-tag-removable-dark-background,
-          'text': $color-tag-removable-dark-text,
-          'icon': $color-tag-removable-dark-icon,
-          'hover': (
-            'background': $color-tag-removable-dark-hover-background
-          ),
-          'active': (
-            'background': $color-tag-removable-dark-active-background
-          )
-        )
-      )
-    ),
-    'toggle': (
-      'off': (
-        'background': $color-toggle-off-background,
-        'circle': $color-toggle-off-circle
-      ),
-      'on': (
-        'background': $color-toggle-on-background,
-        'circle': $color-toggle-on-circle
-      ),
-      'hover': (
-        'circle': $color-toggle-hover-circle
-      ),
-      'disabled': (
-        'background': $color-toggle-disabled-background,
-        'circle': $color-toggle-disabled-circle
-      ),
-      'disabled-checked': (
-        'background': $color-toggle-disabled-checked-background,
-        'circle': $color-toggle-disabled-checked-circle
-      )
-    ),
-    'tooltip': (
-      'background': $color-tooltip-background,
-      'border': $color-tooltip-border
-    ),
-    'secondary-sandgrey': (
-      '100': $color-secondary-sandgrey-100,
-      '200': $color-secondary-sandgrey-200,
-      '300': $color-secondary-sandgrey-300,
-      '400': $color-secondary-sandgrey-400,
-      '500': $color-secondary-sandgrey-500,
-      '600': $color-secondary-sandgrey-600,
-      '700': $color-secondary-sandgrey-700,
-      '800': $color-secondary-sandgrey-800,
-      '900': $color-secondary-sandgrey-900
-    )
-  ),
-  'preset': $preset,
-  'radius': (
-    's': $radius-s,
-    'm': $radius-m,
-    'l': $radius-l
-  ),
-  'shadow': (
-    's': (
-      'x': $shadow-s-x,
-      'y': $shadow-s-y,
-      'blur': $shadow-s-blur,
-      'spread': $shadow-s-spread,
-      'opacity': $shadow-s-opacity
-    ),
-    'm': (
-      'x': $shadow-m-x,
-      'y': $shadow-m-y,
-      'blur': $shadow-m-blur,
-      'spread': $shadow-m-spread,
-      'opacity': $shadow-m-opacity
-    ),
-    'l': (
-      'x': $shadow-l-x,
-      'y': $shadow-l-y,
-      'blur': $shadow-l-blur,
-      'spread': $shadow-l-spread,
-      'opacity': $shadow-l-opacity
-    )
-  ),
-  'magic-unit': $magic-unit,
-  'local-rem-value': $local-rem-value,
-  'size': (
-    'font': (
-      '10': $size-font-10,
-      '11': $size-font-11,
-      '12': $size-font-12,
-      '01': $size-font-01,
-      '02': $size-font-02,
-      '03': $size-font-03,
-      '04': $size-font-04,
-      '05': $size-font-05,
-      '06': $size-font-06,
-      '07': $size-font-07,
-      '08': $size-font-08,
-      '09': $size-font-09
-    ),
-    'line': (
-      '10': (
-        'xs': $size-line-10-xs,
-        's': $size-line-10-s,
-        'm': $size-line-10-m,
-        'l': $size-line-10-l
-      ),
-      '11': (
-        'xs': $size-line-11-xs,
-        's': $size-line-11-s,
-        'm': $size-line-11-m,
-        'l': $size-line-11-l
-      ),
-      '12': (
-        'xs': $size-line-12-xs,
-        's': $size-line-12-s,
-        'm': $size-line-12-m,
-        'l': $size-line-12-l
-      ),
-      '01': (
-        'xs': $size-line-01-xs,
-        's': $size-line-01-s,
-        'm': $size-line-01-m,
-        'l': $size-line-01-l
-      ),
-      '02': (
-        'xs': $size-line-02-xs,
-        's': $size-line-02-s,
-        'm': $size-line-02-m,
-        'l': $size-line-02-l
-      ),
-      '03': (
-        'xs': $size-line-03-xs,
-        's': $size-line-03-s,
-        'm': $size-line-03-m,
-        'l': $size-line-03-l
-      ),
-      '04': (
-        'xs': $size-line-04-xs,
-        's': $size-line-04-s,
-        'm': $size-line-04-m,
-        'l': $size-line-04-l
-      ),
-      '05': (
-        'xs': $size-line-05-xs,
-        's': $size-line-05-s,
-        'm': $size-line-05-m,
-        'l': $size-line-05-l
-      ),
-      '06': (
-        'xs': $size-line-06-xs,
-        's': $size-line-06-s,
-        'm': $size-line-06-m,
-        'l': $size-line-06-l
-      ),
-      '07': (
-        'xs': $size-line-07-xs,
-        's': $size-line-07-s,
-        'm': $size-line-07-m,
-        'l': $size-line-07-l
-      ),
-      '08': (
-        'xs': $size-line-08-xs,
-        's': $size-line-08-s,
-        'm': $size-line-08-m,
-        'l': $size-line-08-l
-      ),
-      '09': (
-        'xs': $size-line-09-xs,
-        's': $size-line-09-s,
-        'm': $size-line-09-m,
-        'l': $size-line-09-l
-      )
-    ),
-    'gutter': (
-      'screen': (
-        's': $size-gutter-screen-s,
-        'm': $size-gutter-screen-m
-      )
-    )
-  ),
-  'screen': (
-    's': $screen-s,
-    's-medium': $screen-s-medium,
-    's-large': $screen-s-large,
-    's-xlarge': $screen-s-xlarge,
-    'm': $screen-m,
-    'm-medium': $screen-m-medium,
-    'l': $screen-l,
-    'l-medium': $screen-l-medium,
-    'xl': $screen-xl,
-    'xl-medium': $screen-xl-medium,
-    'xl-large': $screen-xl-large,
-    'xxl': $screen-xxl
-  )
-);