@mozaic-ds/angular 0.24.0-beta.2 → 0.24.0-beta.4

package/adeo/assets/tokens/bricoman/scss/_tokens.scss

@@ -0,0 +1,1630 @@
+
+$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: #e5e7fa !default;
+$color-primary-01-200: #b8bef4 !default;
+$color-primary-01-300: #8792ed !default;
+$color-primary-01-400: #6875e8 !default;
+$color-primary-01-500: #4d5bf5 !default;
+$color-primary-01-600: #373de7 !default;
+$color-primary-01-700: #161cb6 !default;
+$color-primary-01-800: #130f7b !default;
+$color-primary-01-900: #120949 !default;
+$color-primary-02-100: #ffe1d1 !default;
+$color-primary-02-200: #ffab80 !default;
+$color-primary-02-300: #ff7933 !default;
+$color-primary-02-400: #ff5800 !default;
+$color-primary-02-500: #e54f00 !default;
+$color-primary-02-600: #b83f00 !default;
+$color-primary-02-700: #943300 !default;
+$color-primary-02-800: #702700 !default;
+$color-primary-02-900: #421700 !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: #daeff7 !default;
+$color-secondary-blue-200: #a7d9ed !default;
+$color-secondary-blue-300: #73c3e2 !default;
+$color-secondary-blue-400: #3facd7 !default;
+$color-secondary-blue-500: #0b96cc !default;
+$color-secondary-blue-600: #007bb4 !default;
+$color-secondary-blue-700: #005c91 !default;
+$color-secondary-blue-800: #003a5c !default;
+$color-secondary-blue-900: #002a41 !default;
+$color-secondary-green-100: #e5e7fa !default;
+$color-secondary-green-200: #b8bef4 !default;
+$color-secondary-green-300: #8792ed !default;
+$color-secondary-green-400: #6875e8 !default;
+$color-secondary-green-500: #4d5bf5 !default;
+$color-secondary-green-600: #373de7 !default;
+$color-secondary-green-700: #161cb6 !default;
+$color-secondary-green-800: #130f7b !default;
+$color-secondary-green-900: #120949 !default;
+$color-secondary-purple-100: #efebfe !default;
+$color-secondary-purple-200: #c7b0fa !default;
+$color-secondary-purple-300: #a575f3 !default;
+$color-secondary-purple-400: #883be9 !default;
+$color-secondary-purple-500: #7000dd !default;
+$color-secondary-purple-600: #5803b3 !default;
+$color-secondary-purple-700: #42058a !default;
+$color-secondary-purple-800: #2e0663 !default;
+$color-secondary-purple-900: #1c053d !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: #120949 !default;
+$color-button-solid-font: #ffffff !default;
+$color-button-solid-focus-border: #161cb6 !default;
+$color-button-solid-disabled-background: #cccccc !default;
+$color-button-solid-disabled-font: #666666 !default;
+$color-button-solid-active-background: #161cb6 !default;
+$color-button-solid-hover-background: #161cb6 !default;
+$color-button-solid-hover-font: #ffffff !default;
+$color-button-solid-primary-02-background: #ff5800 !default;
+$color-button-solid-primary-02-font: #ffffff !default;
+$color-button-solid-primary-02-focus-border: #421700 !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: #421700 !default;
+$color-button-solid-primary-02-hover-background: #b83f00 !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: #120949 !default;
+$color-button-bordered-font: #120949 !default;
+$color-button-bordered-focus-border: #161cb6 !default;
+$color-button-bordered-disabled-background: #cccccc !default;
+$color-button-bordered-disabled-font: #666666 !default;
+$color-button-bordered-active-background: #b8bef4 !default;
+$color-button-bordered-active-font: #130f7b !default;
+$color-button-bordered-hover-background: #e5e7fa !default;
+$color-button-bordered-hover-font: #161cb6 !default;
+$color-button-bordered-primary-02-background: #ffffff !default;
+$color-button-bordered-primary-02-border: #ff5800 !default;
+$color-button-bordered-primary-02-font: #ff5800 !default;
+$color-button-bordered-primary-02-focus-border: #421700 !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: #ffab80 !default;
+$color-button-bordered-primary-02-hover-background: #ffe1d1 !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-active-font: #530000 !default;
+$color-button-bordered-danger-hover-background: #fdeaea !default;
+$color-button-bordered-danger-hover-font: #8c0003 !default;
+$color-card-bordered-background: #ffffff !default;
+$color-card-bordered-border: #808080 !default;
+$color-datatable-filters-border: #b3b3b3 !default;
+$color-datatable-container-background: #e6e6e6 !default;
+$color-datatable-thead-font: #191919 !default;
+$color-datatable-sort-arrow-default: #cccccc !default;
+$color-datatable-sort-arrow-active: #333333 !default;
+$color-datatable-cell-font: #191919 !default;
+$color-datatable-cell-background-hover: #e6e6e6 !default;
+$color-datatable-cell-background-selected: #e5e7fa !default;
+$color-datatable-subtable-background: #e6e6e6 !default;
+$color-datatable-subtable-border: #b3b3b3 !default;
+$color-datatable-subtable-font: #000000 !default;
+$color-datatable-icon: #4d5bf5 !default;
+$color-datatable-empty-background: #e6e6e6 !default;
+$color-datatable-empty-color: #666666 !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: #4d5bf5 !default;
+$color-fileuploader-alert: #c61112 !default;
+$color-flag-solid-background: #373de7 !default;
+$color-flag-solid-border: #373de7 !default;
+$color-flag-solid-text: #ffffff !default;
+$color-flag-solid-primary-02-background: #b83f00 !default;
+$color-flag-solid-primary-02-border: #b83f00 !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: #373de7 !default;
+$color-flag-bordered-text: #373de7 !default;
+$color-flag-bordered-primary-02-background: #ffffff !default;
+$color-flag-bordered-primary-02-border: #b83f00 !default;
+$color-flag-bordered-primary-02-text: #b83f00 !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: #0b96cc !default;
+$color-font-primary-01: #373de7 !default;
+$color-font-primary-02: #e54f00 !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: #4d5bf5 !default;
+$color-heading-underline-lightest: #b8bef4 !default;
+$color-heading-line-default: #ff5800 !default;
+$color-heading-line-lightest: #ffab80 !default;
+$color-hero-cover-background: #191919 !default;
+$color-input-text: #333333 !default;
+$color-input-border: #808080 !default;
+$color-input-placeholder: #808080 !default;
+$color-input-background: #ffffff !default;
+$color-input-disabled-background: #e6e6e6 !default;
+$color-input-disabled-border: #e6e6e6 !default;
+$color-input-disabled-icon: #999999 !default;
+$color-input-disabled-label: #808080 !default;
+$color-input-hover-border: #191919 !default;
+$color-input-focus-border: #0b96cc !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: #ff5800 !default;
+$color-input-checked-background: #ff5800 !default;
+$color-input-checked-icon: #ffffff !default;
+$color-input-checked-hover-border: #ff5800 !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: #ff5800 !default;
+$color-link-primary-visited: #ff5800 !default;
+$color-link-primary-active: #ff5800 !default;
+$color-link-primary-disabled: #e6e6e6 !default;
+$color-link-primary-hover: #b83f00 !default;
+$color-link-primary-02-base: #b83f00 !default;
+$color-link-primary-02-visited: #943300 !default;
+$color-link-primary-02-active: #943300 !default;
+$color-link-primary-02-disabled: #e6e6e6 !default;
+$color-link-primary-02-hover: #421700 !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-menu-is-active: #373de7 !default;
+$color-menu-hover: #ffe1d1 !default;
+$color-menu-active: #ffab80 !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: #4d5bf5 !default;
+$color-option-button-checked-label-shadow: #e5e7fa !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: #4d5bf5 !default;
+$color-option-card-checked-label-shadow: #e5e7fa !default;
+$color-option-card-disabled-content: #cccccc !default;
+$color-option-card-disabled-label: #666666 !default;
+$color-overlay-background: #191919 !default;
+$color-overlay-loader-background: #191919 !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: #ff5800 !default;
+$color-progress-percentage-default: #191919 !default;
+$color-progress-percentage-half: #ffffff !default;
+$color-segmented-control-is-active: #373de7 !default;
+$color-segmented-control-hover: #ffe1d1 !default;
+$color-segmented-control-active: #ffab80 !default;
+$color-sidebar-background: #ffe1d1 !default;
+$color-sidebar-feature-background: #ffab80 !default;
+$color-sidebar-feature-hover-background: #ff7933 !default;
+$color-sidebar-feature-selected-background: #ffab80 !default;
+$color-sidebar-feature-disabled-background: #e54f00 !default;
+$color-sidebar-user-background: #ffab80 !default;
+$color-sidebar-divider-background: #b3b3b3 !default;
+$color-sidebar-icon: #191919 !default;
+$color-sidebar-text-background: #e6e6e6 !default;
+$color-sidebar-text-color: #191919 !default;
+$color-sidebar-scroll-background: #b3b3b3 !default;
+$color-sidebar-scroll-color: #ff5800 !default;
+$color-star-empty: #ffffff !default;
+$color-star-focus: #0b96cc !default;
+$color-star-full: #ea7315 !default;
+$color-star-hover: #f4b27e !default;
+$color-stepper-item-background: #999999 !default;
+$color-stepper-item-current-background: #4d5bf5 !default;
+$color-stepper-link-hover-text: #4d5bf5 !default;
+$color-stepper-indicator-background: #ffffff !default;
+$color-stepper-indicator-border: #999999 !default;
+$color-stepper-indicator-current-background: #4d5bf5 !default;
+$color-stepper-indicator-current-border: #4d5bf5 !default;
+$color-stepper-icon: #4d5bf5 !default;
+$color-stepper-title: #4d5bf5 !default;
+$color-tabs-background: #ffffff !default;
+$color-tabs-shadow: #000000 !default;
+$color-tabs-default: #666666 !default;
+$color-tabs-element-background: #ffe1d1 !default;
+$color-tabs-hover-background: #ffe1d1 !default;
+$color-tabs-disabled-background: #cccccc !default;
+$color-tabs-active-background: #ffab80 !default;
+$color-tabs-active-text: #4d4d4d !default;
+$color-tabs-selected-border: #000000 !default;
+$color-tabs-selected-text: #000000 !default;
+$color-tabs-selected-active-text: #000000 !default;
+$color-tabs-selected-hover-text: #000000 !default;
+$color-tabs-active-disabled: #b8bef4 !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: #8792ed !default;
+$color-tag-selectable-light-active-background: #130f7b !default;
+$color-tag-selectable-light-active-border: #130f7b !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: #373de7 !default;
+$color-tag-selectable-light-selected-text: #ffffff !default;
+$color-tag-selectable-light-selected-hover-background: #161cb6 !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: #161cb6 !default;
+$color-tag-selectable-dark-active-background: #b8bef4 !default;
+$color-tag-selectable-dark-active-border: #b8bef4 !default;
+$color-tag-selectable-dark-active-text: #191919 !default;
+$color-tag-selectable-dark-selected-background: #6875e8 !default;
+$color-tag-selectable-dark-selected-border: #6875e8 !default;
+$color-tag-selectable-dark-selected-text: #191919 !default;
+$color-tag-selectable-dark-selected-hover-background: #8792ed !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-label: #000000 !default;
+$color-toggle-off-background: #808080 !default;
+$color-toggle-off-circle: #ffffff !default;
+$color-toggle-on-background: #ff5800 !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-label: #808080 !default;
+$color-toggle-disabled-checked-background: #b8bef4 !default;
+$color-toggle-disabled-checked-circle: #ffffff !default;
+$color-tooltip-background: #4d4d4d !default;
+$color-tooltip-border: #ffffff !default;
+$preset: bricoman !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.5rem !default; // 24px
+$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,
+          'font': $color-button-bordered-active-font
+        ),
+        'hover': (
+          'background': $color-button-bordered-hover-background,
+          'font': $color-button-bordered-hover-font
+        )
+      ),
+      '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,
+          'font': $color-button-bordered-danger-active-font
+        ),
+        'hover': (
+          'background': $color-button-bordered-danger-hover-background,
+          'font': $color-button-bordered-danger-hover-font
+        )
+      )
+    ),
+    'card': (
+      'bordered': (
+        'background': $color-card-bordered-background,
+        'border': $color-card-bordered-border
+      )
+    ),
+    'datatable': (
+      'filters': (
+        'border': $color-datatable-filters-border
+      ),
+      'container': (
+        'background': $color-datatable-container-background
+      ),
+      'thead': (
+        'font': $color-datatable-thead-font
+      ),
+      'sort-arrow': (
+        'default': $color-datatable-sort-arrow-default,
+        'active': $color-datatable-sort-arrow-active
+      ),
+      'cell': (
+        'font': $color-datatable-cell-font,
+        'background': (
+          'hover': $color-datatable-cell-background-hover,
+          'selected': $color-datatable-cell-background-selected
+        )
+      ),
+      'subtable': (
+        'background': $color-datatable-subtable-background,
+        'border': $color-datatable-subtable-border,
+        'font': $color-datatable-subtable-font
+      ),
+      'icon': $color-datatable-icon,
+      'empty': (
+        'background': $color-datatable-empty-background,
+        'color': $color-datatable-empty-color
+      )
+    ),
+    '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
+      ),
+      'line': (
+        'default': $color-heading-line-default,
+        'lightest': $color-heading-line-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': (
+        'background': $color-input-disabled-background,
+        'border': $color-input-disabled-border,
+        'icon': $color-input-disabled-icon,
+        'label': $color-input-disabled-label
+      ),
+      '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
+      )
+    ),
+    'menu': (
+      'is-active': $color-menu-is-active,
+      'hover': $color-menu-hover,
+      'active': $color-menu-active
+    ),
+    '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
+        )
+      ),
+      'disabled': (
+        'content': $color-option-card-disabled-content,
+        'label': $color-option-card-disabled-label
+      )
+    ),
+    '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
+      )
+    ),
+    'segmented-control': (
+      'is-active': $color-segmented-control-is-active,
+      'hover': $color-segmented-control-hover,
+      'active': $color-segmented-control-active
+    ),
+    'sidebar': (
+      'background': $color-sidebar-background,
+      'feature': (
+        'background': $color-sidebar-feature-background,
+        'hover': (
+          'background': $color-sidebar-feature-hover-background
+        ),
+        'selected': (
+          'background': $color-sidebar-feature-selected-background
+        ),
+        'disabled': (
+          'background': $color-sidebar-feature-disabled-background
+        )
+      ),
+      'user': (
+        'background': $color-sidebar-user-background
+      ),
+      'divider': (
+        'background': $color-sidebar-divider-background
+      ),
+      'icon': $color-sidebar-icon,
+      'text': (
+        'background': $color-sidebar-text-background,
+        'color': $color-sidebar-text-color
+      ),
+      'scroll': (
+        'background': $color-sidebar-scroll-background,
+        'color': $color-sidebar-scroll-color
+      )
+    ),
+    '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': (
+        'background': $color-tabs-hover-background
+      ),
+      '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': (
+          'text': $color-tabs-selected-active-text
+        ),
+        'hover': (
+          'text': $color-tabs-selected-hover-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': (
+      'label': $color-toggle-label,
+      '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,
+        'label': $color-toggle-disabled-label
+      ),
+      'disabled-checked': (
+        'background': $color-toggle-disabled-checked-background,
+        'circle': $color-toggle-disabled-checked-circle
+      )
+    ),
+    'tooltip': (
+      'background': $color-tooltip-background,
+      'border': $color-tooltip-border
+    )
+  ),
+  '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
+  )
+);