@design-factory/design-factory 20.0.0-next.1 → 20.0.0-next.2

package/styles/scss/themes/brand2023/tokens/_root.gen.scss

@@ -0,0 +1,1708 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+$prefix: df- !default;
+
+:root {
+  --#{$prefix}theme-neutral-0: #{$df-theme-neutral-0};
+  --#{$prefix}theme-neutral-10: #{$df-theme-neutral-10};
+  --#{$prefix}theme-neutral-20: #{$df-theme-neutral-20};
+  --#{$prefix}theme-neutral-30: #{$df-theme-neutral-30};
+  --#{$prefix}theme-neutral-40: #{$df-theme-neutral-40};
+  --#{$prefix}theme-neutral-50: #{$df-theme-neutral-50};
+  --#{$prefix}theme-neutral-60: #{$df-theme-neutral-60};
+  --#{$prefix}theme-neutral-70: #{$df-theme-neutral-70};
+  --#{$prefix}theme-neutral-80: #{$df-theme-neutral-80};
+  --#{$prefix}theme-neutral-90: #{$df-theme-neutral-90};
+  --#{$prefix}theme-neutral-100: #{$df-theme-neutral-100};
+  --#{$prefix}theme-neutral-110: #{$df-theme-neutral-110};
+  --#{$prefix}theme-primary-10: #{$df-theme-primary-10};
+  --#{$prefix}theme-primary-20: #{$df-theme-primary-20};
+  --#{$prefix}theme-primary-30: #{$df-theme-primary-30};
+  --#{$prefix}theme-primary-40: #{$df-theme-primary-40};
+  --#{$prefix}theme-primary-50: #{$df-theme-primary-50};
+  --#{$prefix}theme-primary-60: #{$df-theme-primary-60};
+  --#{$prefix}theme-primary-70: #{$df-theme-primary-70};
+  --#{$prefix}theme-primary-80: #{$df-theme-primary-80};
+  --#{$prefix}theme-primary-90: #{$df-theme-primary-90};
+  --#{$prefix}theme-primary-100: #{$df-theme-primary-100};
+  --#{$prefix}theme-danger-10: #{$df-theme-danger-10};
+  --#{$prefix}theme-danger-20: #{$df-theme-danger-20};
+  --#{$prefix}theme-danger-30: #{$df-theme-danger-30};
+  --#{$prefix}theme-danger-40: #{$df-theme-danger-40};
+  --#{$prefix}theme-danger-50: #{$df-theme-danger-50};
+  --#{$prefix}theme-danger-60: #{$df-theme-danger-60};
+  --#{$prefix}theme-danger-70: #{$df-theme-danger-70};
+  --#{$prefix}theme-danger-80: #{$df-theme-danger-80};
+  --#{$prefix}theme-danger-90: #{$df-theme-danger-90};
+  --#{$prefix}theme-danger-100: #{$df-theme-danger-100};
+  --#{$prefix}theme-warning-10: #{$df-theme-warning-10};
+  --#{$prefix}theme-warning-20: #{$df-theme-warning-20};
+  --#{$prefix}theme-warning-30: #{$df-theme-warning-30};
+  --#{$prefix}theme-warning-40: #{$df-theme-warning-40};
+  --#{$prefix}theme-warning-50: #{$df-theme-warning-50};
+  --#{$prefix}theme-warning-60: #{$df-theme-warning-60};
+  --#{$prefix}theme-warning-70: #{$df-theme-warning-70};
+  --#{$prefix}theme-warning-80: #{$df-theme-warning-80};
+  --#{$prefix}theme-warning-90: #{$df-theme-warning-90};
+  --#{$prefix}theme-warning-100: #{$df-theme-warning-100};
+  --#{$prefix}theme-success-10: #{$df-theme-success-10};
+  --#{$prefix}theme-success-20: #{$df-theme-success-20};
+  --#{$prefix}theme-success-30: #{$df-theme-success-30};
+  --#{$prefix}theme-success-40: #{$df-theme-success-40};
+  --#{$prefix}theme-success-50: #{$df-theme-success-50};
+  --#{$prefix}theme-success-60: #{$df-theme-success-60};
+  --#{$prefix}theme-success-70: #{$df-theme-success-70};
+  --#{$prefix}theme-success-80: #{$df-theme-success-80};
+  --#{$prefix}theme-success-90: #{$df-theme-success-90};
+  --#{$prefix}theme-success-100: #{$df-theme-success-100};
+  --#{$prefix}theme-info-10: #{$df-theme-info-10};
+  --#{$prefix}theme-info-20: #{$df-theme-info-20};
+  --#{$prefix}theme-info-30: #{$df-theme-info-30};
+  --#{$prefix}theme-info-40: #{$df-theme-info-40};
+  --#{$prefix}theme-info-50: #{$df-theme-info-50};
+  --#{$prefix}theme-info-60: #{$df-theme-info-60};
+  --#{$prefix}theme-info-70: #{$df-theme-info-70};
+  --#{$prefix}theme-info-80: #{$df-theme-info-80};
+  --#{$prefix}theme-info-90: #{$df-theme-info-90};
+  --#{$prefix}theme-info-100: #{$df-theme-info-100};
+  --#{$prefix}theme-tip-10: #{$df-theme-tip-10};
+  --#{$prefix}theme-tip-20: #{$df-theme-tip-20};
+  --#{$prefix}theme-tip-30: #{$df-theme-tip-30};
+  --#{$prefix}theme-tip-40: #{$df-theme-tip-40};
+  --#{$prefix}theme-tip-50: #{$df-theme-tip-50};
+  --#{$prefix}theme-tip-60: #{$df-theme-tip-60};
+  --#{$prefix}theme-tip-70: #{$df-theme-tip-70};
+  --#{$prefix}theme-tip-80: #{$df-theme-tip-80};
+  --#{$prefix}theme-tip-90: #{$df-theme-tip-90};
+  --#{$prefix}theme-tip-100: #{$df-theme-tip-100};
+  --#{$prefix}theme-accent-10: #{$df-theme-accent-10};
+  --#{$prefix}theme-accent-20: #{$df-theme-accent-20};
+  --#{$prefix}theme-accent-30: #{$df-theme-accent-30};
+  --#{$prefix}theme-accent-40: #{$df-theme-accent-40};
+  --#{$prefix}theme-accent-50: #{$df-theme-accent-50};
+  --#{$prefix}theme-accent-60: #{$df-theme-accent-60};
+  --#{$prefix}theme-accent-70: #{$df-theme-accent-70};
+  --#{$prefix}theme-accent-80: #{$df-theme-accent-80};
+  --#{$prefix}theme-accent-90: #{$df-theme-accent-90};
+  --#{$prefix}theme-accent-100: #{$df-theme-accent-100};
+  --#{$prefix}theme-chromatic1-10: #{$df-theme-chromatic1-10};
+  --#{$prefix}theme-chromatic1-20: #{$df-theme-chromatic1-20};
+  --#{$prefix}theme-chromatic1-30: #{$df-theme-chromatic1-30};
+  --#{$prefix}theme-chromatic1-40: #{$df-theme-chromatic1-40};
+  --#{$prefix}theme-chromatic1-50: #{$df-theme-chromatic1-50};
+  --#{$prefix}theme-chromatic1-60: #{$df-theme-chromatic1-60};
+  --#{$prefix}theme-chromatic1-70: #{$df-theme-chromatic1-70};
+  --#{$prefix}theme-chromatic1-80: #{$df-theme-chromatic1-80};
+  --#{$prefix}theme-chromatic1-90: #{$df-theme-chromatic1-90};
+  --#{$prefix}theme-chromatic1-100: #{$df-theme-chromatic1-100};
+  --#{$prefix}theme-chromatic2-10: #{$df-theme-chromatic2-10};
+  --#{$prefix}theme-chromatic2-20: #{$df-theme-chromatic2-20};
+  --#{$prefix}theme-chromatic2-30: #{$df-theme-chromatic2-30};
+  --#{$prefix}theme-chromatic2-40: #{$df-theme-chromatic2-40};
+  --#{$prefix}theme-chromatic2-50: #{$df-theme-chromatic2-50};
+  --#{$prefix}theme-chromatic2-60: #{$df-theme-chromatic2-60};
+  --#{$prefix}theme-chromatic2-70: #{$df-theme-chromatic2-70};
+  --#{$prefix}theme-chromatic2-80: #{$df-theme-chromatic2-80};
+  --#{$prefix}theme-chromatic2-90: #{$df-theme-chromatic2-90};
+  --#{$prefix}theme-chromatic2-100: #{$df-theme-chromatic2-100};
+  --#{$prefix}typo-font-primaryFamily: #{$df-typo-font-primaryFamily};
+  --#{$prefix}typo-font-secondaryFamily: #{$df-typo-font-secondaryFamily};
+  --#{$prefix}typo-letterSpacing-condensed: #{$df-typo-letterSpacing-condensed};
+  --#{$prefix}typo-letterSpacing-xtraCondensed: #{$df-typo-letterSpacing-xtraCondensed};
+  --#{$prefix}typo-letterSpacing-normal: #{$df-typo-letterSpacing-normal};
+  --#{$prefix}typo-letterSpacing-spaced: #{$df-typo-letterSpacing-spaced};
+  --#{$prefix}typo-letterSpacing-xtraSpaced: #{$df-typo-letterSpacing-xtraSpaced};
+  --#{$prefix}typo-sizing-xsmall: #{$df-typo-sizing-xsmall};
+  --#{$prefix}typo-sizing-small: #{$df-typo-sizing-small};
+  --#{$prefix}typo-sizing-default: #{$df-typo-sizing-default};
+  --#{$prefix}typo-sizing-large: #{$df-typo-sizing-large};
+  --#{$prefix}typo-sizing-2xlarge: #{$df-typo-sizing-2xlarge};
+  --#{$prefix}typo-sizing-3xlarge: #{$df-typo-sizing-3xlarge};
+  --#{$prefix}typo-sizing-4xlarge: #{$df-typo-sizing-4xlarge};
+  --#{$prefix}typo-sizing-5xlarge: #{$df-typo-sizing-5xlarge};
+  --#{$prefix}typo-sizing-6xlarge: #{$df-typo-sizing-6xlarge};
+  --#{$prefix}typo-sizing-7xlarge: #{$df-typo-sizing-7xlarge};
+  --#{$prefix}typo-sizing-8xlarge: #{$df-typo-sizing-8xlarge};
+  --#{$prefix}typo-sizing-9xlarge: #{$df-typo-sizing-9xlarge};
+  --#{$prefix}typo-weight-light: #{$df-typo-weight-light};
+  --#{$prefix}typo-weight-regular: #{$df-typo-weight-regular};
+  --#{$prefix}typo-weight-medium: #{$df-typo-weight-medium};
+  --#{$prefix}typo-weight-bold: #{$df-typo-weight-bold};
+  --#{$prefix}typo-style-italic: #{$df-typo-style-italic};
+  --#{$prefix}icons-font-familyDefault: #{$df-icons-font-familyDefault};
+  --#{$prefix}icons-font-familyBrands: #{$df-icons-font-familyBrands};
+  --#{$prefix}icons-sizing-2xsmall: #{$df-icons-sizing-2xsmall};
+  --#{$prefix}icons-sizing-small: #{$df-icons-sizing-small};
+  --#{$prefix}icons-sizing-default: #{$df-icons-sizing-default};
+  --#{$prefix}icons-sizing-large: #{$df-icons-sizing-large};
+  --#{$prefix}icons-sizing-2xlarge: #{$df-icons-sizing-2xlarge};
+  --#{$prefix}icons-sizing-3xlarge: #{$df-icons-sizing-3xlarge};
+  --#{$prefix}icons-sizing-4xlarge: #{$df-icons-sizing-4xlarge};
+  --#{$prefix}icons-weight-light: #{$df-icons-weight-light};
+  --#{$prefix}icons-weight-regular: #{$df-icons-weight-regular};
+  --#{$prefix}icons-weight-solid: #{$df-icons-weight-solid};
+  --#{$prefix}color-backdrop-background: #{$df-color-backdrop-background};
+  --#{$prefix}borderRadius-main-null: #{$df-borderRadius-main-null};
+  --#{$prefix}borderRadius-main-small: #{$df-borderRadius-main-small};
+  --#{$prefix}borderRadius-main-medium: #{$df-borderRadius-main-medium};
+  --#{$prefix}borderRadius-main-large: #{$df-borderRadius-main-large};
+  --#{$prefix}borderRadius-main-rounded: #{$df-borderRadius-main-rounded};
+  --#{$prefix}borderRadius-focus-external-null: #{$df-borderRadius-focus-external-null};
+  --#{$prefix}borderRadius-focus-external-small: #{$df-borderRadius-focus-external-small};
+  --#{$prefix}borderRadius-focus-external-medium: #{$df-borderRadius-focus-external-medium};
+  --#{$prefix}borderRadius-focus-external-large: #{$df-borderRadius-focus-external-large};
+  --#{$prefix}borderRadius-focus-external-rounded: #{$df-borderRadius-focus-external-rounded};
+  --#{$prefix}borderRadius-focus-internal-null: #{$df-borderRadius-focus-internal-null};
+  --#{$prefix}borderRadius-focus-internal-small: #{$df-borderRadius-focus-internal-small};
+  --#{$prefix}borderRadius-focus-internal-medium: #{$df-borderRadius-focus-internal-medium};
+  --#{$prefix}borderRadius-focus-internal-large: #{$df-borderRadius-focus-internal-large};
+  --#{$prefix}borderRadius-focus-internal-rounded: #{$df-borderRadius-focus-internal-rounded};
+  --#{$prefix}spacing-0: #{$df-spacing-0};
+  --#{$prefix}spacing-1: #{$df-spacing-1};
+  --#{$prefix}spacing-2: #{$df-spacing-2};
+  --#{$prefix}spacing-3: #{$df-spacing-3};
+  --#{$prefix}spacing-4: #{$df-spacing-4};
+  --#{$prefix}spacing-5: #{$df-spacing-5};
+  --#{$prefix}spacing-6: #{$df-spacing-6};
+  --#{$prefix}spacing-7: #{$df-spacing-7};
+  --#{$prefix}spacing-8: #{$df-spacing-8};
+  --#{$prefix}spacing-9: #{$df-spacing-9};
+  --#{$prefix}spacing-10: #{$df-spacing-10};
+  --#{$prefix}spacing-11: #{$df-spacing-11};
+  --#{$prefix}spacing-12: #{$df-spacing-12};
+  --#{$prefix}color-primary-main-default-background: #{$df-color-primary-main-default-background};
+  --#{$prefix}color-primary-main-default-foreground: #{$df-color-primary-main-default-foreground};
+  --#{$prefix}color-primary-main-default-border: #{$df-color-primary-main-default-border};
+  --#{$prefix}color-primary-main-hovered-background: #{$df-color-primary-main-hovered-background};
+  --#{$prefix}color-primary-main-hovered-foreground: #{$df-color-primary-main-hovered-foreground};
+  --#{$prefix}color-primary-main-hovered-border: #{$df-color-primary-main-hovered-border};
+  --#{$prefix}color-primary-main-active-background: #{$df-color-primary-main-active-background};
+  --#{$prefix}color-primary-main-active-foreground: #{$df-color-primary-main-active-foreground};
+  --#{$prefix}color-primary-main-active-border: #{$df-color-primary-main-active-border};
+  --#{$prefix}color-primary-main-pressed-background: #{$df-color-primary-main-pressed-background};
+  --#{$prefix}color-primary-main-pressed-foreground: #{$df-color-primary-main-pressed-foreground};
+  --#{$prefix}color-primary-main-pressed-border: #{$df-color-primary-main-pressed-border};
+  --#{$prefix}color-primary-main-activeHovered-background: #{$df-color-primary-main-activeHovered-background};
+  --#{$prefix}color-primary-main-activeHovered-foreground: #{$df-color-primary-main-activeHovered-foreground};
+  --#{$prefix}color-primary-main-activeHovered-border: #{$df-color-primary-main-activeHovered-border};
+  --#{$prefix}color-primary-main-activePressed-background: #{$df-color-primary-main-activePressed-background};
+  --#{$prefix}color-primary-main-activePressed-foreground: #{$df-color-primary-main-activePressed-foreground};
+  --#{$prefix}color-primary-main-activePressed-border: #{$df-color-primary-main-activePressed-border};
+  --#{$prefix}color-primary-alt-default-background: #{$df-color-primary-alt-default-background};
+  --#{$prefix}color-primary-alt-default-foreground: #{$df-color-primary-alt-default-foreground};
+  --#{$prefix}color-primary-alt-default-border: #{$df-color-primary-alt-default-border};
+  --#{$prefix}color-primary-alt-hovered-background: #{$df-color-primary-alt-hovered-background};
+  --#{$prefix}color-primary-alt-hovered-foreground: #{$df-color-primary-alt-hovered-foreground};
+  --#{$prefix}color-primary-alt-hovered-border: #{$df-color-primary-alt-hovered-border};
+  --#{$prefix}color-primary-alt-active-background: #{$df-color-primary-alt-active-background};
+  --#{$prefix}color-primary-alt-active-foreground: #{$df-color-primary-alt-active-foreground};
+  --#{$prefix}color-primary-alt-active-border: #{$df-color-primary-alt-active-border};
+  --#{$prefix}color-primary-alt-pressed-background: #{$df-color-primary-alt-pressed-background};
+  --#{$prefix}color-primary-alt-pressed-foreground: #{$df-color-primary-alt-pressed-foreground};
+  --#{$prefix}color-primary-alt-pressed-border: #{$df-color-primary-alt-pressed-border};
+  --#{$prefix}color-primary-alt-activeHovered-background: #{$df-color-primary-alt-activeHovered-background};
+  --#{$prefix}color-primary-alt-activeHovered-foreground: #{$df-color-primary-alt-activeHovered-foreground};
+  --#{$prefix}color-primary-alt-activeHovered-border: #{$df-color-primary-alt-activeHovered-border};
+  --#{$prefix}color-primary-alt-activePressed-background: #{$df-color-primary-alt-activePressed-background};
+  --#{$prefix}color-primary-alt-activePressed-foreground: #{$df-color-primary-alt-activePressed-foreground};
+  --#{$prefix}color-primary-alt-activePressed-border: #{$df-color-primary-alt-activePressed-border};
+  --#{$prefix}color-primary-soft-default-background: #{$df-color-primary-soft-default-background};
+  --#{$prefix}color-primary-soft-default-foreground: #{$df-color-primary-soft-default-foreground};
+  --#{$prefix}color-primary-soft-hovered-background: #{$df-color-primary-soft-hovered-background};
+  --#{$prefix}color-primary-soft-hovered-foreground: #{$df-color-primary-soft-hovered-foreground};
+  --#{$prefix}color-primary-soft-active-background: #{$df-color-primary-soft-active-background};
+  --#{$prefix}color-primary-soft-active-foreground: #{$df-color-primary-soft-active-foreground};
+  --#{$prefix}color-primary-soft-pressed-background: #{$df-color-primary-soft-pressed-background};
+  --#{$prefix}color-primary-soft-pressed-foreground: #{$df-color-primary-soft-pressed-foreground};
+  --#{$prefix}color-primary-soft-activeHovered-background: #{$df-color-primary-soft-activeHovered-background};
+  --#{$prefix}color-primary-soft-activeHovered-foreground: #{$df-color-primary-soft-activeHovered-foreground};
+  --#{$prefix}color-primary-soft-activePressed-background: #{$df-color-primary-soft-activePressed-background};
+  --#{$prefix}color-primary-soft-activePressed-foreground: #{$df-color-primary-soft-activePressed-foreground};
+  --#{$prefix}color-primary-subtle-background: #{$df-color-primary-subtle-background};
+  --#{$prefix}color-primary-intense-background: #{$df-color-primary-intense-background};
+  --#{$prefix}color-danger-main-default-background: #{$df-color-danger-main-default-background};
+  --#{$prefix}color-danger-main-default-foreground: #{$df-color-danger-main-default-foreground};
+  --#{$prefix}color-danger-main-default-border: #{$df-color-danger-main-default-border};
+  --#{$prefix}color-danger-main-hovered-background: #{$df-color-danger-main-hovered-background};
+  --#{$prefix}color-danger-main-hovered-foreground: #{$df-color-danger-main-hovered-foreground};
+  --#{$prefix}color-danger-main-hovered-border: #{$df-color-danger-main-hovered-border};
+  --#{$prefix}color-danger-main-active-background: #{$df-color-danger-main-active-background};
+  --#{$prefix}color-danger-main-active-foreground: #{$df-color-danger-main-active-foreground};
+  --#{$prefix}color-danger-main-active-border: #{$df-color-danger-main-active-border};
+  --#{$prefix}color-danger-main-pressed-background: #{$df-color-danger-main-pressed-background};
+  --#{$prefix}color-danger-main-pressed-foreground: #{$df-color-danger-main-pressed-foreground};
+  --#{$prefix}color-danger-main-pressed-border: #{$df-color-danger-main-pressed-border};
+  --#{$prefix}color-danger-main-activeHovered-background: #{$df-color-danger-main-activeHovered-background};
+  --#{$prefix}color-danger-main-activeHovered-foreground: #{$df-color-danger-main-activeHovered-foreground};
+  --#{$prefix}color-danger-main-activeHovered-border: #{$df-color-danger-main-activeHovered-border};
+  --#{$prefix}color-danger-main-activePressed-background: #{$df-color-danger-main-activePressed-background};
+  --#{$prefix}color-danger-main-activePressed-foreground: #{$df-color-danger-main-activePressed-foreground};
+  --#{$prefix}color-danger-main-activePressed-border: #{$df-color-danger-main-activePressed-border};
+  --#{$prefix}color-danger-alt-default-background: #{$df-color-danger-alt-default-background};
+  --#{$prefix}color-danger-alt-default-foreground: #{$df-color-danger-alt-default-foreground};
+  --#{$prefix}color-danger-alt-default-border: #{$df-color-danger-alt-default-border};
+  --#{$prefix}color-danger-alt-hovered-background: #{$df-color-danger-alt-hovered-background};
+  --#{$prefix}color-danger-alt-hovered-foreground: #{$df-color-danger-alt-hovered-foreground};
+  --#{$prefix}color-danger-alt-hovered-border: #{$df-color-danger-alt-hovered-border};
+  --#{$prefix}color-danger-alt-active-background: #{$df-color-danger-alt-active-background};
+  --#{$prefix}color-danger-alt-active-foreground: #{$df-color-danger-alt-active-foreground};
+  --#{$prefix}color-danger-alt-active-border: #{$df-color-danger-alt-active-border};
+  --#{$prefix}color-danger-alt-pressed-background: #{$df-color-danger-alt-pressed-background};
+  --#{$prefix}color-danger-alt-pressed-foreground: #{$df-color-danger-alt-pressed-foreground};
+  --#{$prefix}color-danger-alt-pressed-border: #{$df-color-danger-alt-pressed-border};
+  --#{$prefix}color-danger-alt-activeHovered-background: #{$df-color-danger-alt-activeHovered-background};
+  --#{$prefix}color-danger-alt-activeHovered-foreground: #{$df-color-danger-alt-activeHovered-foreground};
+  --#{$prefix}color-danger-alt-activeHovered-border: #{$df-color-danger-alt-activeHovered-border};
+  --#{$prefix}color-danger-alt-activePressed-background: #{$df-color-danger-alt-activePressed-background};
+  --#{$prefix}color-danger-alt-activePressed-foreground: #{$df-color-danger-alt-activePressed-foreground};
+  --#{$prefix}color-danger-alt-activePressed-border: #{$df-color-danger-alt-activePressed-border};
+  --#{$prefix}color-danger-soft-default-background: #{$df-color-danger-soft-default-background};
+  --#{$prefix}color-danger-soft-default-foreground: #{$df-color-danger-soft-default-foreground};
+  --#{$prefix}color-danger-soft-hovered-background: #{$df-color-danger-soft-hovered-background};
+  --#{$prefix}color-danger-soft-hovered-foreground: #{$df-color-danger-soft-hovered-foreground};
+  --#{$prefix}color-danger-soft-active-background: #{$df-color-danger-soft-active-background};
+  --#{$prefix}color-danger-soft-active-foreground: #{$df-color-danger-soft-active-foreground};
+  --#{$prefix}color-danger-soft-pressed-background: #{$df-color-danger-soft-pressed-background};
+  --#{$prefix}color-danger-soft-pressed-foreground: #{$df-color-danger-soft-pressed-foreground};
+  --#{$prefix}color-danger-soft-activeHovered-background: #{$df-color-danger-soft-activeHovered-background};
+  --#{$prefix}color-danger-soft-activeHovered-foreground: #{$df-color-danger-soft-activeHovered-foreground};
+  --#{$prefix}color-danger-soft-activePressed-background: #{$df-color-danger-soft-activePressed-background};
+  --#{$prefix}color-danger-soft-activePressed-foreground: #{$df-color-danger-soft-activePressed-foreground};
+  --#{$prefix}color-danger-subtle-background: #{$df-color-danger-subtle-background};
+  --#{$prefix}color-danger-intense-background: #{$df-color-danger-intense-background};
+  --#{$prefix}color-success-main-default-background: #{$df-color-success-main-default-background};
+  --#{$prefix}color-success-main-default-foreground: #{$df-color-success-main-default-foreground};
+  --#{$prefix}color-success-main-default-border: #{$df-color-success-main-default-border};
+  --#{$prefix}color-success-main-hovered-background: #{$df-color-success-main-hovered-background};
+  --#{$prefix}color-success-main-hovered-foreground: #{$df-color-success-main-hovered-foreground};
+  --#{$prefix}color-success-main-hovered-border: #{$df-color-success-main-hovered-border};
+  --#{$prefix}color-success-main-active-background: #{$df-color-success-main-active-background};
+  --#{$prefix}color-success-main-active-foreground: #{$df-color-success-main-active-foreground};
+  --#{$prefix}color-success-main-active-border: #{$df-color-success-main-active-border};
+  --#{$prefix}color-success-main-pressed-background: #{$df-color-success-main-pressed-background};
+  --#{$prefix}color-success-main-pressed-foreground: #{$df-color-success-main-pressed-foreground};
+  --#{$prefix}color-success-main-pressed-border: #{$df-color-success-main-pressed-border};
+  --#{$prefix}color-success-main-activeHovered-background: #{$df-color-success-main-activeHovered-background};
+  --#{$prefix}color-success-main-activeHovered-foreground: #{$df-color-success-main-activeHovered-foreground};
+  --#{$prefix}color-success-main-activeHovered-border: #{$df-color-success-main-activeHovered-border};
+  --#{$prefix}color-success-main-activePressed-background: #{$df-color-success-main-activePressed-background};
+  --#{$prefix}color-success-main-activePressed-foreground: #{$df-color-success-main-activePressed-foreground};
+  --#{$prefix}color-success-main-activePressed-border: #{$df-color-success-main-activePressed-border};
+  --#{$prefix}color-success-alt-default-background: #{$df-color-success-alt-default-background};
+  --#{$prefix}color-success-alt-default-foreground: #{$df-color-success-alt-default-foreground};
+  --#{$prefix}color-success-alt-default-border: #{$df-color-success-alt-default-border};
+  --#{$prefix}color-success-alt-hovered-background: #{$df-color-success-alt-hovered-background};
+  --#{$prefix}color-success-alt-hovered-foreground: #{$df-color-success-alt-hovered-foreground};
+  --#{$prefix}color-success-alt-hovered-border: #{$df-color-success-alt-hovered-border};
+  --#{$prefix}color-success-alt-active-background: #{$df-color-success-alt-active-background};
+  --#{$prefix}color-success-alt-active-foreground: #{$df-color-success-alt-active-foreground};
+  --#{$prefix}color-success-alt-active-border: #{$df-color-success-alt-active-border};
+  --#{$prefix}color-success-alt-pressed-background: #{$df-color-success-alt-pressed-background};
+  --#{$prefix}color-success-alt-pressed-foreground: #{$df-color-success-alt-pressed-foreground};
+  --#{$prefix}color-success-alt-pressed-border: #{$df-color-success-alt-pressed-border};
+  --#{$prefix}color-success-alt-activeHovered-background: #{$df-color-success-alt-activeHovered-background};
+  --#{$prefix}color-success-alt-activeHovered-foreground: #{$df-color-success-alt-activeHovered-foreground};
+  --#{$prefix}color-success-alt-activeHovered-border: #{$df-color-success-alt-activeHovered-border};
+  --#{$prefix}color-success-alt-activePressed-background: #{$df-color-success-alt-activePressed-background};
+  --#{$prefix}color-success-alt-activePressed-foreground: #{$df-color-success-alt-activePressed-foreground};
+  --#{$prefix}color-success-alt-activePressed-border: #{$df-color-success-alt-activePressed-border};
+  --#{$prefix}color-success-soft-default-background: #{$df-color-success-soft-default-background};
+  --#{$prefix}color-success-soft-default-foreground: #{$df-color-success-soft-default-foreground};
+  --#{$prefix}color-success-soft-hovered-background: #{$df-color-success-soft-hovered-background};
+  --#{$prefix}color-success-soft-hovered-foreground: #{$df-color-success-soft-hovered-foreground};
+  --#{$prefix}color-success-soft-active-background: #{$df-color-success-soft-active-background};
+  --#{$prefix}color-success-soft-active-foreground: #{$df-color-success-soft-active-foreground};
+  --#{$prefix}color-success-soft-pressed-background: #{$df-color-success-soft-pressed-background};
+  --#{$prefix}color-success-soft-pressed-foreground: #{$df-color-success-soft-pressed-foreground};
+  --#{$prefix}color-success-soft-activeHovered-background: #{$df-color-success-soft-activeHovered-background};
+  --#{$prefix}color-success-soft-activeHovered-foreground: #{$df-color-success-soft-activeHovered-foreground};
+  --#{$prefix}color-success-soft-activePressed-background: #{$df-color-success-soft-activePressed-background};
+  --#{$prefix}color-success-soft-activePressed-foreground: #{$df-color-success-soft-activePressed-foreground};
+  --#{$prefix}color-success-subtle-background: #{$df-color-success-subtle-background};
+  --#{$prefix}color-warning-main-default-background: #{$df-color-warning-main-default-background};
+  --#{$prefix}color-warning-main-default-foreground: #{$df-color-warning-main-default-foreground};
+  --#{$prefix}color-warning-main-default-border: #{$df-color-warning-main-default-border};
+  --#{$prefix}color-warning-main-hovered-background: #{$df-color-warning-main-hovered-background};
+  --#{$prefix}color-warning-main-hovered-foreground: #{$df-color-warning-main-hovered-foreground};
+  --#{$prefix}color-warning-main-hovered-border: #{$df-color-warning-main-hovered-border};
+  --#{$prefix}color-warning-main-active-background: #{$df-color-warning-main-active-background};
+  --#{$prefix}color-warning-main-active-foreground: #{$df-color-warning-main-active-foreground};
+  --#{$prefix}color-warning-main-active-border: #{$df-color-warning-main-active-border};
+  --#{$prefix}color-warning-main-pressed-background: #{$df-color-warning-main-pressed-background};
+  --#{$prefix}color-warning-main-pressed-foreground: #{$df-color-warning-main-pressed-foreground};
+  --#{$prefix}color-warning-main-pressed-border: #{$df-color-warning-main-pressed-border};
+  --#{$prefix}color-warning-main-activeHovered-background: #{$df-color-warning-main-activeHovered-background};
+  --#{$prefix}color-warning-main-activeHovered-foreground: #{$df-color-warning-main-activeHovered-foreground};
+  --#{$prefix}color-warning-main-activeHovered-border: #{$df-color-warning-main-activeHovered-border};
+  --#{$prefix}color-warning-main-activePressed-background: #{$df-color-warning-main-activePressed-background};
+  --#{$prefix}color-warning-main-activePressed-foreground: #{$df-color-warning-main-activePressed-foreground};
+  --#{$prefix}color-warning-main-activePressed-border: #{$df-color-warning-main-activePressed-border};
+  --#{$prefix}color-warning-alt-default-background: #{$df-color-warning-alt-default-background};
+  --#{$prefix}color-warning-alt-default-foreground: #{$df-color-warning-alt-default-foreground};
+  --#{$prefix}color-warning-alt-default-border: #{$df-color-warning-alt-default-border};
+  --#{$prefix}color-warning-alt-hovered-background: #{$df-color-warning-alt-hovered-background};
+  --#{$prefix}color-warning-alt-hovered-foreground: #{$df-color-warning-alt-hovered-foreground};
+  --#{$prefix}color-warning-alt-hovered-border: #{$df-color-warning-alt-hovered-border};
+  --#{$prefix}color-warning-alt-active-background: #{$df-color-warning-alt-active-background};
+  --#{$prefix}color-warning-alt-active-foreground: #{$df-color-warning-alt-active-foreground};
+  --#{$prefix}color-warning-alt-active-border: #{$df-color-warning-alt-active-border};
+  --#{$prefix}color-warning-alt-pressed-background: #{$df-color-warning-alt-pressed-background};
+  --#{$prefix}color-warning-alt-pressed-foreground: #{$df-color-warning-alt-pressed-foreground};
+  --#{$prefix}color-warning-alt-pressed-border: #{$df-color-warning-alt-pressed-border};
+  --#{$prefix}color-warning-alt-activeHovered-background: #{$df-color-warning-alt-activeHovered-background};
+  --#{$prefix}color-warning-alt-activeHovered-foreground: #{$df-color-warning-alt-activeHovered-foreground};
+  --#{$prefix}color-warning-alt-activeHovered-border: #{$df-color-warning-alt-activeHovered-border};
+  --#{$prefix}color-warning-alt-activePressed-background: #{$df-color-warning-alt-activePressed-background};
+  --#{$prefix}color-warning-alt-activePressed-foreground: #{$df-color-warning-alt-activePressed-foreground};
+  --#{$prefix}color-warning-alt-activePressed-border: #{$df-color-warning-alt-activePressed-border};
+  --#{$prefix}color-warning-soft-default-background: #{$df-color-warning-soft-default-background};
+  --#{$prefix}color-warning-soft-default-foreground: #{$df-color-warning-soft-default-foreground};
+  --#{$prefix}color-warning-soft-hovered-background: #{$df-color-warning-soft-hovered-background};
+  --#{$prefix}color-warning-soft-hovered-foreground: #{$df-color-warning-soft-hovered-foreground};
+  --#{$prefix}color-warning-soft-active-background: #{$df-color-warning-soft-active-background};
+  --#{$prefix}color-warning-soft-active-foreground: #{$df-color-warning-soft-active-foreground};
+  --#{$prefix}color-warning-soft-pressed-background: #{$df-color-warning-soft-pressed-background};
+  --#{$prefix}color-warning-soft-pressed-foreground: #{$df-color-warning-soft-pressed-foreground};
+  --#{$prefix}color-warning-soft-activeHovered-background: #{$df-color-warning-soft-activeHovered-background};
+  --#{$prefix}color-warning-soft-activeHovered-foreground: #{$df-color-warning-soft-activeHovered-foreground};
+  --#{$prefix}color-warning-soft-activePressed-background: #{$df-color-warning-soft-activePressed-background};
+  --#{$prefix}color-warning-soft-activePressed-foreground: #{$df-color-warning-soft-activePressed-foreground};
+  --#{$prefix}color-warning-subtle-background: #{$df-color-warning-subtle-background};
+  --#{$prefix}color-info-main-default-background: #{$df-color-info-main-default-background};
+  --#{$prefix}color-info-main-default-foreground: #{$df-color-info-main-default-foreground};
+  --#{$prefix}color-info-main-default-border: #{$df-color-info-main-default-border};
+  --#{$prefix}color-info-main-hovered-background: #{$df-color-info-main-hovered-background};
+  --#{$prefix}color-info-main-hovered-foreground: #{$df-color-info-main-hovered-foreground};
+  --#{$prefix}color-info-main-hovered-border: #{$df-color-info-main-hovered-border};
+  --#{$prefix}color-info-main-active-background: #{$df-color-info-main-active-background};
+  --#{$prefix}color-info-main-active-foreground: #{$df-color-info-main-active-foreground};
+  --#{$prefix}color-info-main-active-border: #{$df-color-info-main-active-border};
+  --#{$prefix}color-info-main-pressed-background: #{$df-color-info-main-pressed-background};
+  --#{$prefix}color-info-main-pressed-foreground: #{$df-color-info-main-pressed-foreground};
+  --#{$prefix}color-info-main-pressed-border: #{$df-color-info-main-pressed-border};
+  --#{$prefix}color-info-main-activeHovered-background: #{$df-color-info-main-activeHovered-background};
+  --#{$prefix}color-info-main-activeHovered-foreground: #{$df-color-info-main-activeHovered-foreground};
+  --#{$prefix}color-info-main-activeHovered-border: #{$df-color-info-main-activeHovered-border};
+  --#{$prefix}color-info-main-activePressed-background: #{$df-color-info-main-activePressed-background};
+  --#{$prefix}color-info-main-activePressed-foreground: #{$df-color-info-main-activePressed-foreground};
+  --#{$prefix}color-info-main-activePressed-border: #{$df-color-info-main-activePressed-border};
+  --#{$prefix}color-info-alt-default-background: #{$df-color-info-alt-default-background};
+  --#{$prefix}color-info-alt-default-foreground: #{$df-color-info-alt-default-foreground};
+  --#{$prefix}color-info-alt-default-border: #{$df-color-info-alt-default-border};
+  --#{$prefix}color-info-alt-hovered-background: #{$df-color-info-alt-hovered-background};
+  --#{$prefix}color-info-alt-hovered-foreground: #{$df-color-info-alt-hovered-foreground};
+  --#{$prefix}color-info-alt-hovered-border: #{$df-color-info-alt-hovered-border};
+  --#{$prefix}color-info-alt-active-background: #{$df-color-info-alt-active-background};
+  --#{$prefix}color-info-alt-active-foreground: #{$df-color-info-alt-active-foreground};
+  --#{$prefix}color-info-alt-active-border: #{$df-color-info-alt-active-border};
+  --#{$prefix}color-info-alt-pressed-background: #{$df-color-info-alt-pressed-background};
+  --#{$prefix}color-info-alt-pressed-foreground: #{$df-color-info-alt-pressed-foreground};
+  --#{$prefix}color-info-alt-pressed-border: #{$df-color-info-alt-pressed-border};
+  --#{$prefix}color-info-alt-activeHovered-background: #{$df-color-info-alt-activeHovered-background};
+  --#{$prefix}color-info-alt-activeHovered-foreground: #{$df-color-info-alt-activeHovered-foreground};
+  --#{$prefix}color-info-alt-activeHovered-border: #{$df-color-info-alt-activeHovered-border};
+  --#{$prefix}color-info-alt-activePressed-background: #{$df-color-info-alt-activePressed-background};
+  --#{$prefix}color-info-alt-activePressed-foreground: #{$df-color-info-alt-activePressed-foreground};
+  --#{$prefix}color-info-alt-activePressed-border: #{$df-color-info-alt-activePressed-border};
+  --#{$prefix}color-info-soft-default-background: #{$df-color-info-soft-default-background};
+  --#{$prefix}color-info-soft-default-foreground: #{$df-color-info-soft-default-foreground};
+  --#{$prefix}color-info-soft-hovered-background: #{$df-color-info-soft-hovered-background};
+  --#{$prefix}color-info-soft-hovered-foreground: #{$df-color-info-soft-hovered-foreground};
+  --#{$prefix}color-info-soft-active-background: #{$df-color-info-soft-active-background};
+  --#{$prefix}color-info-soft-active-foreground: #{$df-color-info-soft-active-foreground};
+  --#{$prefix}color-info-soft-pressed-background: #{$df-color-info-soft-pressed-background};
+  --#{$prefix}color-info-soft-pressed-foreground: #{$df-color-info-soft-pressed-foreground};
+  --#{$prefix}color-info-soft-activeHovered-background: #{$df-color-info-soft-activeHovered-background};
+  --#{$prefix}color-info-soft-activeHovered-foreground: #{$df-color-info-soft-activeHovered-foreground};
+  --#{$prefix}color-info-soft-activePressed-background: #{$df-color-info-soft-activePressed-background};
+  --#{$prefix}color-info-soft-activePressed-foreground: #{$df-color-info-soft-activePressed-foreground};
+  --#{$prefix}color-info-subtle-background: #{$df-color-info-subtle-background};
+  --#{$prefix}color-tip-main-default-background: #{$df-color-tip-main-default-background};
+  --#{$prefix}color-tip-main-default-foreground: #{$df-color-tip-main-default-foreground};
+  --#{$prefix}color-tip-main-default-border: #{$df-color-tip-main-default-border};
+  --#{$prefix}color-tip-main-hovered-background: #{$df-color-tip-main-hovered-background};
+  --#{$prefix}color-tip-main-hovered-foreground: #{$df-color-tip-main-hovered-foreground};
+  --#{$prefix}color-tip-main-hovered-border: #{$df-color-tip-main-hovered-border};
+  --#{$prefix}color-tip-main-active-background: #{$df-color-tip-main-active-background};
+  --#{$prefix}color-tip-main-active-foreground: #{$df-color-tip-main-active-foreground};
+  --#{$prefix}color-tip-main-active-border: #{$df-color-tip-main-active-border};
+  --#{$prefix}color-tip-main-pressed-background: #{$df-color-tip-main-pressed-background};
+  --#{$prefix}color-tip-main-pressed-foreground: #{$df-color-tip-main-pressed-foreground};
+  --#{$prefix}color-tip-main-pressed-border: #{$df-color-tip-main-pressed-border};
+  --#{$prefix}color-tip-main-activeHovered-background: #{$df-color-tip-main-activeHovered-background};
+  --#{$prefix}color-tip-main-activeHovered-foreground: #{$df-color-tip-main-activeHovered-foreground};
+  --#{$prefix}color-tip-main-activeHovered-border: #{$df-color-tip-main-activeHovered-border};
+  --#{$prefix}color-tip-main-activePressed-background: #{$df-color-tip-main-activePressed-background};
+  --#{$prefix}color-tip-main-activePressed-foreground: #{$df-color-tip-main-activePressed-foreground};
+  --#{$prefix}color-tip-main-activePressed-border: #{$df-color-tip-main-activePressed-border};
+  --#{$prefix}color-tip-alt-default-background: #{$df-color-tip-alt-default-background};
+  --#{$prefix}color-tip-alt-default-foreground: #{$df-color-tip-alt-default-foreground};
+  --#{$prefix}color-tip-alt-default-border: #{$df-color-tip-alt-default-border};
+  --#{$prefix}color-tip-alt-hovered-background: #{$df-color-tip-alt-hovered-background};
+  --#{$prefix}color-tip-alt-hovered-foreground: #{$df-color-tip-alt-hovered-foreground};
+  --#{$prefix}color-tip-alt-hovered-border: #{$df-color-tip-alt-hovered-border};
+  --#{$prefix}color-tip-alt-active-background: #{$df-color-tip-alt-active-background};
+  --#{$prefix}color-tip-alt-active-foreground: #{$df-color-tip-alt-active-foreground};
+  --#{$prefix}color-tip-alt-active-border: #{$df-color-tip-alt-active-border};
+  --#{$prefix}color-tip-alt-pressed-background: #{$df-color-tip-alt-pressed-background};
+  --#{$prefix}color-tip-alt-pressed-foreground: #{$df-color-tip-alt-pressed-foreground};
+  --#{$prefix}color-tip-alt-pressed-border: #{$df-color-tip-alt-pressed-border};
+  --#{$prefix}color-tip-alt-activeHovered-background: #{$df-color-tip-alt-activeHovered-background};
+  --#{$prefix}color-tip-alt-activeHovered-foreground: #{$df-color-tip-alt-activeHovered-foreground};
+  --#{$prefix}color-tip-alt-activeHovered-border: #{$df-color-tip-alt-activeHovered-border};
+  --#{$prefix}color-tip-alt-activePressed-background: #{$df-color-tip-alt-activePressed-background};
+  --#{$prefix}color-tip-alt-activePressed-foreground: #{$df-color-tip-alt-activePressed-foreground};
+  --#{$prefix}color-tip-alt-activePressed-border: #{$df-color-tip-alt-activePressed-border};
+  --#{$prefix}color-tip-soft-default-background: #{$df-color-tip-soft-default-background};
+  --#{$prefix}color-tip-soft-default-foreground: #{$df-color-tip-soft-default-foreground};
+  --#{$prefix}color-tip-soft-hovered-background: #{$df-color-tip-soft-hovered-background};
+  --#{$prefix}color-tip-soft-hovered-foreground: #{$df-color-tip-soft-hovered-foreground};
+  --#{$prefix}color-tip-soft-active-background: #{$df-color-tip-soft-active-background};
+  --#{$prefix}color-tip-soft-active-foreground: #{$df-color-tip-soft-active-foreground};
+  --#{$prefix}color-tip-soft-pressed-background: #{$df-color-tip-soft-pressed-background};
+  --#{$prefix}color-tip-soft-pressed-foreground: #{$df-color-tip-soft-pressed-foreground};
+  --#{$prefix}color-tip-soft-activeHovered-background: #{$df-color-tip-soft-activeHovered-background};
+  --#{$prefix}color-tip-soft-activeHovered-foreground: #{$df-color-tip-soft-activeHovered-foreground};
+  --#{$prefix}color-tip-soft-activePressed-background: #{$df-color-tip-soft-activePressed-background};
+  --#{$prefix}color-tip-soft-activePressed-foreground: #{$df-color-tip-soft-activePressed-foreground};
+  --#{$prefix}color-tip-subtle-background: #{$df-color-tip-subtle-background};
+  --#{$prefix}color-accent-main-default-background: #{$df-color-accent-main-default-background};
+  --#{$prefix}color-accent-main-default-foreground: #{$df-color-accent-main-default-foreground};
+  --#{$prefix}color-accent-main-default-border: #{$df-color-accent-main-default-border};
+  --#{$prefix}color-accent-main-hovered-background: #{$df-color-accent-main-hovered-background};
+  --#{$prefix}color-accent-main-hovered-foreground: #{$df-color-accent-main-hovered-foreground};
+  --#{$prefix}color-accent-main-hovered-border: #{$df-color-accent-main-hovered-border};
+  --#{$prefix}color-accent-main-active-background: #{$df-color-accent-main-active-background};
+  --#{$prefix}color-accent-main-active-foreground: #{$df-color-accent-main-active-foreground};
+  --#{$prefix}color-accent-main-active-border: #{$df-color-accent-main-active-border};
+  --#{$prefix}color-accent-main-pressed-background: #{$df-color-accent-main-pressed-background};
+  --#{$prefix}color-accent-main-pressed-foreground: #{$df-color-accent-main-pressed-foreground};
+  --#{$prefix}color-accent-main-pressed-border: #{$df-color-accent-main-pressed-border};
+  --#{$prefix}color-accent-main-activeHovered-background: #{$df-color-accent-main-activeHovered-background};
+  --#{$prefix}color-accent-main-activeHovered-foreground: #{$df-color-accent-main-activeHovered-foreground};
+  --#{$prefix}color-accent-main-activeHovered-border: #{$df-color-accent-main-activeHovered-border};
+  --#{$prefix}color-accent-main-activePressed-background: #{$df-color-accent-main-activePressed-background};
+  --#{$prefix}color-accent-main-activePressed-foreground: #{$df-color-accent-main-activePressed-foreground};
+  --#{$prefix}color-accent-main-activePressed-border: #{$df-color-accent-main-activePressed-border};
+  --#{$prefix}color-accent-alt-default-background: #{$df-color-accent-alt-default-background};
+  --#{$prefix}color-accent-alt-default-foreground: #{$df-color-accent-alt-default-foreground};
+  --#{$prefix}color-accent-alt-default-border: #{$df-color-accent-alt-default-border};
+  --#{$prefix}color-accent-alt-hovered-background: #{$df-color-accent-alt-hovered-background};
+  --#{$prefix}color-accent-alt-hovered-foreground: #{$df-color-accent-alt-hovered-foreground};
+  --#{$prefix}color-accent-alt-hovered-border: #{$df-color-accent-alt-hovered-border};
+  --#{$prefix}color-accent-alt-active-background: #{$df-color-accent-alt-active-background};
+  --#{$prefix}color-accent-alt-active-foreground: #{$df-color-accent-alt-active-foreground};
+  --#{$prefix}color-accent-alt-active-border: #{$df-color-accent-alt-active-border};
+  --#{$prefix}color-accent-alt-pressed-background: #{$df-color-accent-alt-pressed-background};
+  --#{$prefix}color-accent-alt-pressed-foreground: #{$df-color-accent-alt-pressed-foreground};
+  --#{$prefix}color-accent-alt-pressed-border: #{$df-color-accent-alt-pressed-border};
+  --#{$prefix}color-accent-alt-activeHovered-background: #{$df-color-accent-alt-activeHovered-background};
+  --#{$prefix}color-accent-alt-activeHovered-foreground: #{$df-color-accent-alt-activeHovered-foreground};
+  --#{$prefix}color-accent-alt-activeHovered-border: #{$df-color-accent-alt-activeHovered-border};
+  --#{$prefix}color-accent-alt-activePressed-background: #{$df-color-accent-alt-activePressed-background};
+  --#{$prefix}color-accent-alt-activePressed-foreground: #{$df-color-accent-alt-activePressed-foreground};
+  --#{$prefix}color-accent-alt-activePressed-border: #{$df-color-accent-alt-activePressed-border};
+  --#{$prefix}color-accent-soft-default-background: #{$df-color-accent-soft-default-background};
+  --#{$prefix}color-accent-soft-default-foreground: #{$df-color-accent-soft-default-foreground};
+  --#{$prefix}color-accent-soft-hovered-background: #{$df-color-accent-soft-hovered-background};
+  --#{$prefix}color-accent-soft-hovered-foreground: #{$df-color-accent-soft-hovered-foreground};
+  --#{$prefix}color-accent-soft-active-background: #{$df-color-accent-soft-active-background};
+  --#{$prefix}color-accent-soft-active-foreground: #{$df-color-accent-soft-active-foreground};
+  --#{$prefix}color-accent-soft-pressed-background: #{$df-color-accent-soft-pressed-background};
+  --#{$prefix}color-accent-soft-pressed-foreground: #{$df-color-accent-soft-pressed-foreground};
+  --#{$prefix}color-accent-soft-activeHovered-background: #{$df-color-accent-soft-activeHovered-background};
+  --#{$prefix}color-accent-soft-activeHovered-foreground: #{$df-color-accent-soft-activeHovered-foreground};
+  --#{$prefix}color-accent-soft-activePressed-background: #{$df-color-accent-soft-activePressed-background};
+  --#{$prefix}color-accent-soft-activePressed-foreground: #{$df-color-accent-soft-activePressed-foreground};
+  --#{$prefix}color-accent-subtle-background: #{$df-color-accent-subtle-background};
+  --#{$prefix}color-accent-intense-background: #{$df-color-accent-intense-background};
+  --#{$prefix}color-neutral-main-default-background: #{$df-color-neutral-main-default-background};
+  --#{$prefix}color-neutral-main-default-foreground: #{$df-color-neutral-main-default-foreground};
+  --#{$prefix}color-neutral-main-default-border: #{$df-color-neutral-main-default-border};
+  --#{$prefix}color-neutral-main-hovered-background: #{$df-color-neutral-main-hovered-background};
+  --#{$prefix}color-neutral-main-hovered-foreground: #{$df-color-neutral-main-hovered-foreground};
+  --#{$prefix}color-neutral-main-hovered-border: #{$df-color-neutral-main-hovered-border};
+  --#{$prefix}color-neutral-main-active-background: #{$df-color-neutral-main-active-background};
+  --#{$prefix}color-neutral-main-active-foreground: #{$df-color-neutral-main-active-foreground};
+  --#{$prefix}color-neutral-main-active-border: #{$df-color-neutral-main-active-border};
+  --#{$prefix}color-neutral-main-pressed-background: #{$df-color-neutral-main-pressed-background};
+  --#{$prefix}color-neutral-main-pressed-foreground: #{$df-color-neutral-main-pressed-foreground};
+  --#{$prefix}color-neutral-main-pressed-border: #{$df-color-neutral-main-pressed-border};
+  --#{$prefix}color-neutral-main-activeHovered-background: #{$df-color-neutral-main-activeHovered-background};
+  --#{$prefix}color-neutral-main-activeHovered-foreground: #{$df-color-neutral-main-activeHovered-foreground};
+  --#{$prefix}color-neutral-main-activeHovered-border: #{$df-color-neutral-main-activeHovered-border};
+  --#{$prefix}color-neutral-main-activePressed-background: #{$df-color-neutral-main-activePressed-background};
+  --#{$prefix}color-neutral-main-activePressed-foreground: #{$df-color-neutral-main-activePressed-foreground};
+  --#{$prefix}color-neutral-main-activePressed-border: #{$df-color-neutral-main-activePressed-border};
+  --#{$prefix}color-neutral-alt-default-background: #{$df-color-neutral-alt-default-background};
+  --#{$prefix}color-neutral-alt-default-foreground: #{$df-color-neutral-alt-default-foreground};
+  --#{$prefix}color-neutral-alt-default-border: #{$df-color-neutral-alt-default-border};
+  --#{$prefix}color-neutral-alt-hovered-background: #{$df-color-neutral-alt-hovered-background};
+  --#{$prefix}color-neutral-alt-hovered-foreground: #{$df-color-neutral-alt-hovered-foreground};
+  --#{$prefix}color-neutral-alt-hovered-border: #{$df-color-neutral-alt-hovered-border};
+  --#{$prefix}color-neutral-alt-active-background: #{$df-color-neutral-alt-active-background};
+  --#{$prefix}color-neutral-alt-active-foreground: #{$df-color-neutral-alt-active-foreground};
+  --#{$prefix}color-neutral-alt-active-border: #{$df-color-neutral-alt-active-border};
+  --#{$prefix}color-neutral-alt-pressed-background: #{$df-color-neutral-alt-pressed-background};
+  --#{$prefix}color-neutral-alt-pressed-foreground: #{$df-color-neutral-alt-pressed-foreground};
+  --#{$prefix}color-neutral-alt-pressed-border: #{$df-color-neutral-alt-pressed-border};
+  --#{$prefix}color-neutral-alt-activeHovered-background: #{$df-color-neutral-alt-activeHovered-background};
+  --#{$prefix}color-neutral-alt-activeHovered-foreground: #{$df-color-neutral-alt-activeHovered-foreground};
+  --#{$prefix}color-neutral-alt-activeHovered-border: #{$df-color-neutral-alt-activeHovered-border};
+  --#{$prefix}color-neutral-alt-activePressed-background: #{$df-color-neutral-alt-activePressed-background};
+  --#{$prefix}color-neutral-alt-activePressed-foreground: #{$df-color-neutral-alt-activePressed-foreground};
+  --#{$prefix}color-neutral-alt-activePressed-border: #{$df-color-neutral-alt-activePressed-border};
+  --#{$prefix}color-neutral-soft-default-background: #{$df-color-neutral-soft-default-background};
+  --#{$prefix}color-neutral-soft-default-foreground: #{$df-color-neutral-soft-default-foreground};
+  --#{$prefix}color-neutral-soft-hovered-background: #{$df-color-neutral-soft-hovered-background};
+  --#{$prefix}color-neutral-soft-hovered-foreground: #{$df-color-neutral-soft-hovered-foreground};
+  --#{$prefix}color-neutral-soft-active-background: #{$df-color-neutral-soft-active-background};
+  --#{$prefix}color-neutral-soft-active-foreground: #{$df-color-neutral-soft-active-foreground};
+  --#{$prefix}color-neutral-soft-pressed-background: #{$df-color-neutral-soft-pressed-background};
+  --#{$prefix}color-neutral-soft-pressed-foreground: #{$df-color-neutral-soft-pressed-foreground};
+  --#{$prefix}color-neutral-soft-activeHovered-background: #{$df-color-neutral-soft-activeHovered-background};
+  --#{$prefix}color-neutral-soft-activeHovered-foreground: #{$df-color-neutral-soft-activeHovered-foreground};
+  --#{$prefix}color-neutral-soft-activePressed-background: #{$df-color-neutral-soft-activePressed-background};
+  --#{$prefix}color-neutral-soft-activePressed-foreground: #{$df-color-neutral-soft-activePressed-foreground};
+  --#{$prefix}color-neutral-intense-foreground: #{$df-color-neutral-intense-foreground};
+  --#{$prefix}color-neutral-intense-background: #{$df-color-neutral-intense-background};
+  --#{$prefix}color-chromatic1-main-default-background: #{$df-color-chromatic1-main-default-background};
+  --#{$prefix}color-chromatic1-main-default-foreground: #{$df-color-chromatic1-main-default-foreground};
+  --#{$prefix}color-chromatic1-main-default-border: #{$df-color-chromatic1-main-default-border};
+  --#{$prefix}color-chromatic1-main-hovered-background: #{$df-color-chromatic1-main-hovered-background};
+  --#{$prefix}color-chromatic1-main-hovered-foreground: #{$df-color-chromatic1-main-hovered-foreground};
+  --#{$prefix}color-chromatic1-main-hovered-border: #{$df-color-chromatic1-main-hovered-border};
+  --#{$prefix}color-chromatic1-main-active-background: #{$df-color-chromatic1-main-active-background};
+  --#{$prefix}color-chromatic1-main-active-foreground: #{$df-color-chromatic1-main-active-foreground};
+  --#{$prefix}color-chromatic1-main-active-border: #{$df-color-chromatic1-main-active-border};
+  --#{$prefix}color-chromatic1-main-pressed-background: #{$df-color-chromatic1-main-pressed-background};
+  --#{$prefix}color-chromatic1-main-pressed-foreground: #{$df-color-chromatic1-main-pressed-foreground};
+  --#{$prefix}color-chromatic1-main-pressed-border: #{$df-color-chromatic1-main-pressed-border};
+  --#{$prefix}color-chromatic1-main-activeHovered-background: #{$df-color-chromatic1-main-activeHovered-background};
+  --#{$prefix}color-chromatic1-main-activeHovered-foreground: #{$df-color-chromatic1-main-activeHovered-foreground};
+  --#{$prefix}color-chromatic1-main-activeHovered-border: #{$df-color-chromatic1-main-activeHovered-border};
+  --#{$prefix}color-chromatic1-main-activePressed-background: #{$df-color-chromatic1-main-activePressed-background};
+  --#{$prefix}color-chromatic1-main-activePressed-foreground: #{$df-color-chromatic1-main-activePressed-foreground};
+  --#{$prefix}color-chromatic1-main-activePressed-border: #{$df-color-chromatic1-main-activePressed-border};
+  --#{$prefix}color-chromatic1-alt-default-background: #{$df-color-chromatic1-alt-default-background};
+  --#{$prefix}color-chromatic1-alt-default-foreground: #{$df-color-chromatic1-alt-default-foreground};
+  --#{$prefix}color-chromatic1-alt-default-border: #{$df-color-chromatic1-alt-default-border};
+  --#{$prefix}color-chromatic1-alt-hovered-background: #{$df-color-chromatic1-alt-hovered-background};
+  --#{$prefix}color-chromatic1-alt-hovered-foreground: #{$df-color-chromatic1-alt-hovered-foreground};
+  --#{$prefix}color-chromatic1-alt-hovered-border: #{$df-color-chromatic1-alt-hovered-border};
+  --#{$prefix}color-chromatic1-alt-active-background: #{$df-color-chromatic1-alt-active-background};
+  --#{$prefix}color-chromatic1-alt-active-foreground: #{$df-color-chromatic1-alt-active-foreground};
+  --#{$prefix}color-chromatic1-alt-active-border: #{$df-color-chromatic1-alt-active-border};
+  --#{$prefix}color-chromatic1-alt-pressed-background: #{$df-color-chromatic1-alt-pressed-background};
+  --#{$prefix}color-chromatic1-alt-pressed-foreground: #{$df-color-chromatic1-alt-pressed-foreground};
+  --#{$prefix}color-chromatic1-alt-pressed-border: #{$df-color-chromatic1-alt-pressed-border};
+  --#{$prefix}color-chromatic1-alt-activeHovered-background: #{$df-color-chromatic1-alt-activeHovered-background};
+  --#{$prefix}color-chromatic1-alt-activeHovered-foreground: #{$df-color-chromatic1-alt-activeHovered-foreground};
+  --#{$prefix}color-chromatic1-alt-activeHovered-border: #{$df-color-chromatic1-alt-activeHovered-border};
+  --#{$prefix}color-chromatic1-alt-activePressed-background: #{$df-color-chromatic1-alt-activePressed-background};
+  --#{$prefix}color-chromatic1-alt-activePressed-foreground: #{$df-color-chromatic1-alt-activePressed-foreground};
+  --#{$prefix}color-chromatic1-alt-activePressed-border: #{$df-color-chromatic1-alt-activePressed-border};
+  --#{$prefix}color-chromatic1-soft-default-background: #{$df-color-chromatic1-soft-default-background};
+  --#{$prefix}color-chromatic1-soft-default-foreground: #{$df-color-chromatic1-soft-default-foreground};
+  --#{$prefix}color-chromatic1-soft-hovered-background: #{$df-color-chromatic1-soft-hovered-background};
+  --#{$prefix}color-chromatic1-soft-hovered-foreground: #{$df-color-chromatic1-soft-hovered-foreground};
+  --#{$prefix}color-chromatic1-soft-active-background: #{$df-color-chromatic1-soft-active-background};
+  --#{$prefix}color-chromatic1-soft-active-foreground: #{$df-color-chromatic1-soft-active-foreground};
+  --#{$prefix}color-chromatic1-soft-pressed-background: #{$df-color-chromatic1-soft-pressed-background};
+  --#{$prefix}color-chromatic1-soft-pressed-foreground: #{$df-color-chromatic1-soft-pressed-foreground};
+  --#{$prefix}color-chromatic1-soft-activeHovered-background: #{$df-color-chromatic1-soft-activeHovered-background};
+  --#{$prefix}color-chromatic1-soft-activeHovered-foreground: #{$df-color-chromatic1-soft-activeHovered-foreground};
+  --#{$prefix}color-chromatic1-soft-activePressed-background: #{$df-color-chromatic1-soft-activePressed-background};
+  --#{$prefix}color-chromatic1-soft-activePressed-foreground: #{$df-color-chromatic1-soft-activePressed-foreground};
+  --#{$prefix}color-chromatic1-subtle-background: #{$df-color-chromatic1-subtle-background};
+  --#{$prefix}color-chromatic2-main-default-background: #{$df-color-chromatic2-main-default-background};
+  --#{$prefix}color-chromatic2-main-default-foreground: #{$df-color-chromatic2-main-default-foreground};
+  --#{$prefix}color-chromatic2-main-default-border: #{$df-color-chromatic2-main-default-border};
+  --#{$prefix}color-chromatic2-main-hovered-background: #{$df-color-chromatic2-main-hovered-background};
+  --#{$prefix}color-chromatic2-main-hovered-foreground: #{$df-color-chromatic2-main-hovered-foreground};
+  --#{$prefix}color-chromatic2-main-hovered-border: #{$df-color-chromatic2-main-hovered-border};
+  --#{$prefix}color-chromatic2-main-active-background: #{$df-color-chromatic2-main-active-background};
+  --#{$prefix}color-chromatic2-main-active-foreground: #{$df-color-chromatic2-main-active-foreground};
+  --#{$prefix}color-chromatic2-main-active-border: #{$df-color-chromatic2-main-active-border};
+  --#{$prefix}color-chromatic2-main-pressed-background: #{$df-color-chromatic2-main-pressed-background};
+  --#{$prefix}color-chromatic2-main-pressed-foreground: #{$df-color-chromatic2-main-pressed-foreground};
+  --#{$prefix}color-chromatic2-main-pressed-border: #{$df-color-chromatic2-main-pressed-border};
+  --#{$prefix}color-chromatic2-main-activeHovered-background: #{$df-color-chromatic2-main-activeHovered-background};
+  --#{$prefix}color-chromatic2-main-activeHovered-foreground: #{$df-color-chromatic2-main-activeHovered-foreground};
+  --#{$prefix}color-chromatic2-main-activeHovered-border: #{$df-color-chromatic2-main-activeHovered-border};
+  --#{$prefix}color-chromatic2-main-activePressed-background: #{$df-color-chromatic2-main-activePressed-background};
+  --#{$prefix}color-chromatic2-main-activePressed-foreground: #{$df-color-chromatic2-main-activePressed-foreground};
+  --#{$prefix}color-chromatic2-main-activePressed-border: #{$df-color-chromatic2-main-activePressed-border};
+  --#{$prefix}color-chromatic2-alt-default-background: #{$df-color-chromatic2-alt-default-background};
+  --#{$prefix}color-chromatic2-alt-default-foreground: #{$df-color-chromatic2-alt-default-foreground};
+  --#{$prefix}color-chromatic2-alt-default-border: #{$df-color-chromatic2-alt-default-border};
+  --#{$prefix}color-chromatic2-alt-hovered-background: #{$df-color-chromatic2-alt-hovered-background};
+  --#{$prefix}color-chromatic2-alt-hovered-foreground: #{$df-color-chromatic2-alt-hovered-foreground};
+  --#{$prefix}color-chromatic2-alt-hovered-border: #{$df-color-chromatic2-alt-hovered-border};
+  --#{$prefix}color-chromatic2-alt-active-background: #{$df-color-chromatic2-alt-active-background};
+  --#{$prefix}color-chromatic2-alt-active-foreground: #{$df-color-chromatic2-alt-active-foreground};
+  --#{$prefix}color-chromatic2-alt-active-border: #{$df-color-chromatic2-alt-active-border};
+  --#{$prefix}color-chromatic2-alt-pressed-background: #{$df-color-chromatic2-alt-pressed-background};
+  --#{$prefix}color-chromatic2-alt-pressed-foreground: #{$df-color-chromatic2-alt-pressed-foreground};
+  --#{$prefix}color-chromatic2-alt-pressed-border: #{$df-color-chromatic2-alt-pressed-border};
+  --#{$prefix}color-chromatic2-alt-activeHovered-background: #{$df-color-chromatic2-alt-activeHovered-background};
+  --#{$prefix}color-chromatic2-alt-activeHovered-foreground: #{$df-color-chromatic2-alt-activeHovered-foreground};
+  --#{$prefix}color-chromatic2-alt-activeHovered-border: #{$df-color-chromatic2-alt-activeHovered-border};
+  --#{$prefix}color-chromatic2-alt-activePressed-background: #{$df-color-chromatic2-alt-activePressed-background};
+  --#{$prefix}color-chromatic2-alt-activePressed-foreground: #{$df-color-chromatic2-alt-activePressed-foreground};
+  --#{$prefix}color-chromatic2-alt-activePressed-border: #{$df-color-chromatic2-alt-activePressed-border};
+  --#{$prefix}color-chromatic2-soft-default-background: #{$df-color-chromatic2-soft-default-background};
+  --#{$prefix}color-chromatic2-soft-default-foreground: #{$df-color-chromatic2-soft-default-foreground};
+  --#{$prefix}color-chromatic2-soft-hovered-background: #{$df-color-chromatic2-soft-hovered-background};
+  --#{$prefix}color-chromatic2-soft-hovered-foreground: #{$df-color-chromatic2-soft-hovered-foreground};
+  --#{$prefix}color-chromatic2-soft-active-background: #{$df-color-chromatic2-soft-active-background};
+  --#{$prefix}color-chromatic2-soft-active-foreground: #{$df-color-chromatic2-soft-active-foreground};
+  --#{$prefix}color-chromatic2-soft-pressed-background: #{$df-color-chromatic2-soft-pressed-background};
+  --#{$prefix}color-chromatic2-soft-pressed-foreground: #{$df-color-chromatic2-soft-pressed-foreground};
+  --#{$prefix}color-chromatic2-soft-activeHovered-background: #{$df-color-chromatic2-soft-activeHovered-background};
+  --#{$prefix}color-chromatic2-soft-activeHovered-foreground: #{$df-color-chromatic2-soft-activeHovered-foreground};
+  --#{$prefix}color-chromatic2-soft-activePressed-background: #{$df-color-chromatic2-soft-activePressed-background};
+  --#{$prefix}color-chromatic2-soft-activePressed-foreground: #{$df-color-chromatic2-soft-activePressed-foreground};
+  --#{$prefix}color-chromatic2-subtle-background: #{$df-color-chromatic2-subtle-background};
+  --#{$prefix}color-inert-neutral-pageBackground: #{$df-color-inert-neutral-pageBackground};
+  --#{$prefix}color-inert-neutral-main-foreground: #{$df-color-inert-neutral-main-foreground};
+  --#{$prefix}color-inert-neutral-main-background: #{$df-color-inert-neutral-main-background};
+  --#{$prefix}color-inert-neutral-main-border: #{$df-color-inert-neutral-main-border};
+  --#{$prefix}color-inert-neutral-alt-foreground: #{$df-color-inert-neutral-alt-foreground};
+  --#{$prefix}color-inert-neutral-alt-background: #{$df-color-inert-neutral-alt-background};
+  --#{$prefix}color-inert-neutral-subtle-background: #{$df-color-inert-neutral-subtle-background};
+  --#{$prefix}color-inert-neutral-intense-foreground: #{$df-color-inert-neutral-intense-foreground};
+  --#{$prefix}color-inert-neutral-intense-background: #{$df-color-inert-neutral-intense-background};
+  --#{$prefix}color-inert-neutral-readonly-foreground: #{$df-color-inert-neutral-readonly-foreground};
+  --#{$prefix}color-disabled-main-foreground: #{$df-color-disabled-main-foreground};
+  --#{$prefix}color-disabled-main-background: #{$df-color-disabled-main-background};
+  --#{$prefix}color-disabled-main-border: #{$df-color-disabled-main-border};
+  --#{$prefix}color-disabled-alt-foreground: #{$df-color-disabled-alt-foreground};
+  --#{$prefix}color-disabled-alt-background: #{$df-color-disabled-alt-background};
+  --#{$prefix}color-disabled-alt-border: #{$df-color-disabled-alt-border};
+  --#{$prefix}color-focus-main-border: #{$df-color-focus-main-border};
+  --#{$prefix}color-focus-alt-border: #{$df-color-focus-alt-border};
+  --#{$prefix}color-icon-warning-foreground: #{$df-color-icon-warning-foreground};
+  --#{$prefix}color-separator-primary-border: #{$df-color-separator-primary-border};
+  --#{$prefix}color-separator-danger-border: #{$df-color-separator-danger-border};
+  --#{$prefix}color-separator-success-border: #{$df-color-separator-success-border};
+  --#{$prefix}color-separator-warning-border: #{$df-color-separator-warning-border};
+  --#{$prefix}color-separator-info-border: #{$df-color-separator-info-border};
+  --#{$prefix}color-separator-tip-border: #{$df-color-separator-tip-border};
+  --#{$prefix}color-separator-chromatic1-border: #{$df-color-separator-chromatic1-border};
+  --#{$prefix}color-separator-chromatic2-border: #{$df-color-separator-chromatic2-border};
+  --#{$prefix}color-logo-main-foreground: #{$df-color-logo-main-foreground};
+  --#{$prefix}color-logo-main-background: #{$df-color-logo-main-background};
+  --#{$prefix}color-logo-alt-foreground: #{$df-color-logo-alt-foreground};
+  --#{$prefix}color-logo-alt-background: #{$df-color-logo-alt-background};
+  --#{$prefix}color-input-border: #{$df-color-input-border};
+  --#{$prefix}color-toggle-background: #{$df-color-toggle-background};
+  --#{$prefix}color-toggle-border: #{$df-color-toggle-border};
+  --#{$prefix}color-subtext-foreground: #{$df-color-subtext-foreground};
+  --#{$prefix}color-progressIndicator-main-border: #{$df-color-progressIndicator-main-border};
+  --#{$prefix}color-progressIndicator-alt-border: #{$df-color-progressIndicator-alt-border};
+  --#{$prefix}color-addon-background: #{$df-color-addon-background};
+  // Computed theme colors
+  --#{$prefix}theme-neutral-0-rgb: #{to-rgb($df-theme-neutral-0)};
+  --#{$prefix}theme-neutral-0-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-neutral-0-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-neutral-10-rgb: #{to-rgb($df-theme-neutral-10)};
+  --#{$prefix}theme-neutral-10-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-neutral-10-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-neutral-20-rgb: #{to-rgb($df-theme-neutral-20)};
+  --#{$prefix}theme-neutral-20-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-neutral-20-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-neutral-30-rgb: #{to-rgb($df-theme-neutral-30)};
+  --#{$prefix}theme-neutral-30-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-neutral-30-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-neutral-40-rgb: #{to-rgb($df-theme-neutral-40)};
+  --#{$prefix}theme-neutral-40-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-neutral-40-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-neutral-50-rgb: #{to-rgb($df-theme-neutral-50)};
+  --#{$prefix}theme-neutral-50-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-neutral-50-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-neutral-60-rgb: #{to-rgb($df-theme-neutral-60)};
+  --#{$prefix}theme-neutral-60-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-neutral-60-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-neutral-70-rgb: #{to-rgb($df-theme-neutral-70)};
+  --#{$prefix}theme-neutral-70-color: var(--#{$prefix}theme-neutral-110);
+  --#{$prefix}theme-neutral-70-color-rgb: var(--#{$prefix}theme-neutral-110-rgb);
+  --#{$prefix}theme-neutral-80-rgb: #{to-rgb($df-theme-neutral-80)};
+  --#{$prefix}theme-neutral-80-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-neutral-80-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-neutral-90-rgb: #{to-rgb($df-theme-neutral-90)};
+  --#{$prefix}theme-neutral-90-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-neutral-90-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-neutral-100-rgb: #{to-rgb($df-theme-neutral-100)};
+  --#{$prefix}theme-neutral-100-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-neutral-100-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-neutral-110-rgb: #{to-rgb($df-theme-neutral-110)};
+  --#{$prefix}theme-neutral-110-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-neutral-110-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-primary-10-rgb: #{to-rgb($df-theme-primary-10)};
+  --#{$prefix}theme-primary-10-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-primary-10-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-primary-20-rgb: #{to-rgb($df-theme-primary-20)};
+  --#{$prefix}theme-primary-20-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-primary-20-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-primary-30-rgb: #{to-rgb($df-theme-primary-30)};
+  --#{$prefix}theme-primary-30-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-primary-30-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-primary-40-rgb: #{to-rgb($df-theme-primary-40)};
+  --#{$prefix}theme-primary-40-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-primary-40-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-primary-50-rgb: #{to-rgb($df-theme-primary-50)};
+  --#{$prefix}theme-primary-50-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-primary-50-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-primary-60-rgb: #{to-rgb($df-theme-primary-60)};
+  --#{$prefix}theme-primary-60-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-primary-60-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-primary-70-rgb: #{to-rgb($df-theme-primary-70)};
+  --#{$prefix}theme-primary-70-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-primary-70-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-primary-80-rgb: #{to-rgb($df-theme-primary-80)};
+  --#{$prefix}theme-primary-80-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-primary-80-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-primary-90-rgb: #{to-rgb($df-theme-primary-90)};
+  --#{$prefix}theme-primary-90-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-primary-90-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-primary-100-rgb: #{to-rgb($df-theme-primary-100)};
+  --#{$prefix}theme-primary-100-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-primary-100-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-danger-10-rgb: #{to-rgb($df-theme-danger-10)};
+  --#{$prefix}theme-danger-10-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-danger-10-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-danger-20-rgb: #{to-rgb($df-theme-danger-20)};
+  --#{$prefix}theme-danger-20-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-danger-20-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-danger-30-rgb: #{to-rgb($df-theme-danger-30)};
+  --#{$prefix}theme-danger-30-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-danger-30-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-danger-40-rgb: #{to-rgb($df-theme-danger-40)};
+  --#{$prefix}theme-danger-40-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-danger-40-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-danger-50-rgb: #{to-rgb($df-theme-danger-50)};
+  --#{$prefix}theme-danger-50-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-danger-50-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-danger-60-rgb: #{to-rgb($df-theme-danger-60)};
+  --#{$prefix}theme-danger-60-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-danger-60-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-danger-70-rgb: #{to-rgb($df-theme-danger-70)};
+  --#{$prefix}theme-danger-70-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-danger-70-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-danger-80-rgb: #{to-rgb($df-theme-danger-80)};
+  --#{$prefix}theme-danger-80-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-danger-80-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-danger-90-rgb: #{to-rgb($df-theme-danger-90)};
+  --#{$prefix}theme-danger-90-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-danger-90-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-danger-100-rgb: #{to-rgb($df-theme-danger-100)};
+  --#{$prefix}theme-danger-100-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-danger-100-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-warning-10-rgb: #{to-rgb($df-theme-warning-10)};
+  --#{$prefix}theme-warning-10-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-warning-10-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-warning-20-rgb: #{to-rgb($df-theme-warning-20)};
+  --#{$prefix}theme-warning-20-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-warning-20-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-warning-30-rgb: #{to-rgb($df-theme-warning-30)};
+  --#{$prefix}theme-warning-30-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-warning-30-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-warning-40-rgb: #{to-rgb($df-theme-warning-40)};
+  --#{$prefix}theme-warning-40-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-warning-40-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-warning-50-rgb: #{to-rgb($df-theme-warning-50)};
+  --#{$prefix}theme-warning-50-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-warning-50-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-warning-60-rgb: #{to-rgb($df-theme-warning-60)};
+  --#{$prefix}theme-warning-60-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-warning-60-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-warning-70-rgb: #{to-rgb($df-theme-warning-70)};
+  --#{$prefix}theme-warning-70-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-warning-70-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-warning-80-rgb: #{to-rgb($df-theme-warning-80)};
+  --#{$prefix}theme-warning-80-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-warning-80-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-warning-90-rgb: #{to-rgb($df-theme-warning-90)};
+  --#{$prefix}theme-warning-90-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-warning-90-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-warning-100-rgb: #{to-rgb($df-theme-warning-100)};
+  --#{$prefix}theme-warning-100-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-warning-100-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-success-10-rgb: #{to-rgb($df-theme-success-10)};
+  --#{$prefix}theme-success-10-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-success-10-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-success-20-rgb: #{to-rgb($df-theme-success-20)};
+  --#{$prefix}theme-success-20-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-success-20-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-success-30-rgb: #{to-rgb($df-theme-success-30)};
+  --#{$prefix}theme-success-30-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-success-30-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-success-40-rgb: #{to-rgb($df-theme-success-40)};
+  --#{$prefix}theme-success-40-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-success-40-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-success-50-rgb: #{to-rgb($df-theme-success-50)};
+  --#{$prefix}theme-success-50-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-success-50-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-success-60-rgb: #{to-rgb($df-theme-success-60)};
+  --#{$prefix}theme-success-60-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-success-60-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-success-70-rgb: #{to-rgb($df-theme-success-70)};
+  --#{$prefix}theme-success-70-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-success-70-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-success-80-rgb: #{to-rgb($df-theme-success-80)};
+  --#{$prefix}theme-success-80-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-success-80-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-success-90-rgb: #{to-rgb($df-theme-success-90)};
+  --#{$prefix}theme-success-90-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-success-90-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-success-100-rgb: #{to-rgb($df-theme-success-100)};
+  --#{$prefix}theme-success-100-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-success-100-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-info-10-rgb: #{to-rgb($df-theme-info-10)};
+  --#{$prefix}theme-info-10-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-info-10-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-info-20-rgb: #{to-rgb($df-theme-info-20)};
+  --#{$prefix}theme-info-20-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-info-20-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-info-30-rgb: #{to-rgb($df-theme-info-30)};
+  --#{$prefix}theme-info-30-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-info-30-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-info-40-rgb: #{to-rgb($df-theme-info-40)};
+  --#{$prefix}theme-info-40-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-info-40-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-info-50-rgb: #{to-rgb($df-theme-info-50)};
+  --#{$prefix}theme-info-50-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-info-50-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-info-60-rgb: #{to-rgb($df-theme-info-60)};
+  --#{$prefix}theme-info-60-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-info-60-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-info-70-rgb: #{to-rgb($df-theme-info-70)};
+  --#{$prefix}theme-info-70-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-info-70-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-info-80-rgb: #{to-rgb($df-theme-info-80)};
+  --#{$prefix}theme-info-80-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-info-80-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-info-90-rgb: #{to-rgb($df-theme-info-90)};
+  --#{$prefix}theme-info-90-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-info-90-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-info-100-rgb: #{to-rgb($df-theme-info-100)};
+  --#{$prefix}theme-info-100-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-info-100-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-tip-10-rgb: #{to-rgb($df-theme-tip-10)};
+  --#{$prefix}theme-tip-10-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-tip-10-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-tip-20-rgb: #{to-rgb($df-theme-tip-20)};
+  --#{$prefix}theme-tip-20-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-tip-20-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-tip-30-rgb: #{to-rgb($df-theme-tip-30)};
+  --#{$prefix}theme-tip-30-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-tip-30-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-tip-40-rgb: #{to-rgb($df-theme-tip-40)};
+  --#{$prefix}theme-tip-40-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-tip-40-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-tip-50-rgb: #{to-rgb($df-theme-tip-50)};
+  --#{$prefix}theme-tip-50-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-tip-50-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-tip-60-rgb: #{to-rgb($df-theme-tip-60)};
+  --#{$prefix}theme-tip-60-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-tip-60-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-tip-70-rgb: #{to-rgb($df-theme-tip-70)};
+  --#{$prefix}theme-tip-70-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-tip-70-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-tip-80-rgb: #{to-rgb($df-theme-tip-80)};
+  --#{$prefix}theme-tip-80-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-tip-80-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-tip-90-rgb: #{to-rgb($df-theme-tip-90)};
+  --#{$prefix}theme-tip-90-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-tip-90-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-tip-100-rgb: #{to-rgb($df-theme-tip-100)};
+  --#{$prefix}theme-tip-100-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-tip-100-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-accent-10-rgb: #{to-rgb($df-theme-accent-10)};
+  --#{$prefix}theme-accent-10-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-accent-10-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-accent-20-rgb: #{to-rgb($df-theme-accent-20)};
+  --#{$prefix}theme-accent-20-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-accent-20-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-accent-30-rgb: #{to-rgb($df-theme-accent-30)};
+  --#{$prefix}theme-accent-30-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-accent-30-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-accent-40-rgb: #{to-rgb($df-theme-accent-40)};
+  --#{$prefix}theme-accent-40-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-accent-40-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-accent-50-rgb: #{to-rgb($df-theme-accent-50)};
+  --#{$prefix}theme-accent-50-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-accent-50-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-accent-60-rgb: #{to-rgb($df-theme-accent-60)};
+  --#{$prefix}theme-accent-60-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-accent-60-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-accent-70-rgb: #{to-rgb($df-theme-accent-70)};
+  --#{$prefix}theme-accent-70-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-accent-70-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-accent-80-rgb: #{to-rgb($df-theme-accent-80)};
+  --#{$prefix}theme-accent-80-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-accent-80-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-accent-90-rgb: #{to-rgb($df-theme-accent-90)};
+  --#{$prefix}theme-accent-90-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-accent-90-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-accent-100-rgb: #{to-rgb($df-theme-accent-100)};
+  --#{$prefix}theme-accent-100-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-accent-100-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-chromatic1-10-rgb: #{to-rgb($df-theme-chromatic1-10)};
+  --#{$prefix}theme-chromatic1-10-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-chromatic1-10-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-chromatic1-20-rgb: #{to-rgb($df-theme-chromatic1-20)};
+  --#{$prefix}theme-chromatic1-20-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-chromatic1-20-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-chromatic1-30-rgb: #{to-rgb($df-theme-chromatic1-30)};
+  --#{$prefix}theme-chromatic1-30-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-chromatic1-30-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-chromatic1-40-rgb: #{to-rgb($df-theme-chromatic1-40)};
+  --#{$prefix}theme-chromatic1-40-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-chromatic1-40-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-chromatic1-50-rgb: #{to-rgb($df-theme-chromatic1-50)};
+  --#{$prefix}theme-chromatic1-50-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-chromatic1-50-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-chromatic1-60-rgb: #{to-rgb($df-theme-chromatic1-60)};
+  --#{$prefix}theme-chromatic1-60-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-chromatic1-60-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-chromatic1-70-rgb: #{to-rgb($df-theme-chromatic1-70)};
+  --#{$prefix}theme-chromatic1-70-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-chromatic1-70-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-chromatic1-80-rgb: #{to-rgb($df-theme-chromatic1-80)};
+  --#{$prefix}theme-chromatic1-80-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-chromatic1-80-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-chromatic1-90-rgb: #{to-rgb($df-theme-chromatic1-90)};
+  --#{$prefix}theme-chromatic1-90-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-chromatic1-90-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-chromatic1-100-rgb: #{to-rgb($df-theme-chromatic1-100)};
+  --#{$prefix}theme-chromatic1-100-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-chromatic1-100-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-chromatic2-10-rgb: #{to-rgb($df-theme-chromatic2-10)};
+  --#{$prefix}theme-chromatic2-10-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-chromatic2-10-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-chromatic2-20-rgb: #{to-rgb($df-theme-chromatic2-20)};
+  --#{$prefix}theme-chromatic2-20-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-chromatic2-20-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-chromatic2-30-rgb: #{to-rgb($df-theme-chromatic2-30)};
+  --#{$prefix}theme-chromatic2-30-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-chromatic2-30-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-chromatic2-40-rgb: #{to-rgb($df-theme-chromatic2-40)};
+  --#{$prefix}theme-chromatic2-40-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-chromatic2-40-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-chromatic2-50-rgb: #{to-rgb($df-theme-chromatic2-50)};
+  --#{$prefix}theme-chromatic2-50-color: var(--#{$prefix}theme-neutral-100);
+  --#{$prefix}theme-chromatic2-50-color-rgb: var(--#{$prefix}theme-neutral-100-rgb);
+  --#{$prefix}theme-chromatic2-60-rgb: #{to-rgb($df-theme-chromatic2-60)};
+  --#{$prefix}theme-chromatic2-60-color: var(--#{$prefix}theme-neutral-110);
+  --#{$prefix}theme-chromatic2-60-color-rgb: var(--#{$prefix}theme-neutral-110-rgb);
+  --#{$prefix}theme-chromatic2-70-rgb: #{to-rgb($df-theme-chromatic2-70)};
+  --#{$prefix}theme-chromatic2-70-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-chromatic2-70-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-chromatic2-80-rgb: #{to-rgb($df-theme-chromatic2-80)};
+  --#{$prefix}theme-chromatic2-80-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-chromatic2-80-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-chromatic2-90-rgb: #{to-rgb($df-theme-chromatic2-90)};
+  --#{$prefix}theme-chromatic2-90-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-chromatic2-90-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  --#{$prefix}theme-chromatic2-100-rgb: #{to-rgb($df-theme-chromatic2-100)};
+  --#{$prefix}theme-chromatic2-100-color: var(--#{$prefix}theme-neutral-0);
+  --#{$prefix}theme-chromatic2-100-color-rgb: var(--#{$prefix}theme-neutral-0-rgb);
+  // Tier 3 Scoped tokens 
+  .btn,
+  .btn-close {
+    --#{$prefix}button-solid-mirror-color-primary-default-border: #{$df-button-solid-mirror-color-primary-default-border};
+    --#{$prefix}button-solid-mirror-color-primary-default-background: #{$df-button-solid-mirror-color-primary-default-background};
+    --#{$prefix}button-solid-mirror-color-primary-default-foreground: #{$df-button-solid-mirror-color-primary-default-foreground};
+    --#{$prefix}button-solid-mirror-color-primary-hovered-border: #{$df-button-solid-mirror-color-primary-hovered-border};
+    --#{$prefix}button-solid-mirror-color-primary-hovered-background: #{$df-button-solid-mirror-color-primary-hovered-background};
+    --#{$prefix}button-solid-mirror-color-primary-hovered-foreground: #{$df-button-solid-mirror-color-primary-hovered-foreground};
+    --#{$prefix}button-solid-mirror-color-primary-active-border: #{$df-button-solid-mirror-color-primary-active-border};
+    --#{$prefix}button-solid-mirror-color-primary-active-background: #{$df-button-solid-mirror-color-primary-active-background};
+    --#{$prefix}button-solid-mirror-color-primary-active-foreground: #{$df-button-solid-mirror-color-primary-active-foreground};
+    --#{$prefix}button-solid-mirror-color-primary-pressed-border: #{$df-button-solid-mirror-color-primary-pressed-border};
+    --#{$prefix}button-solid-mirror-color-primary-pressed-background: #{$df-button-solid-mirror-color-primary-pressed-background};
+    --#{$prefix}button-solid-mirror-color-primary-pressed-foreground: #{$df-button-solid-mirror-color-primary-pressed-foreground};
+    --#{$prefix}button-solid-mirror-color-primary-activeHovered-border: #{$df-button-solid-mirror-color-primary-activeHovered-border};
+    --#{$prefix}button-solid-mirror-color-primary-activeHovered-background: #{$df-button-solid-mirror-color-primary-activeHovered-background};
+    --#{$prefix}button-solid-mirror-color-primary-activeHovered-foreground: #{$df-button-solid-mirror-color-primary-activeHovered-foreground};
+    --#{$prefix}button-solid-mirror-color-primary-activePressed-border: #{$df-button-solid-mirror-color-primary-activePressed-border};
+    --#{$prefix}button-solid-mirror-color-primary-activePressed-background: #{$df-button-solid-mirror-color-primary-activePressed-background};
+    --#{$prefix}button-solid-mirror-color-primary-activePressed-foreground: #{$df-button-solid-mirror-color-primary-activePressed-foreground};
+    --#{$prefix}button-solid-mirror-color-danger-default-border: #{$df-button-solid-mirror-color-danger-default-border};
+    --#{$prefix}button-solid-mirror-color-danger-default-background: #{$df-button-solid-mirror-color-danger-default-background};
+    --#{$prefix}button-solid-mirror-color-danger-default-foreground: #{$df-button-solid-mirror-color-danger-default-foreground};
+    --#{$prefix}button-solid-mirror-color-danger-hovered-border: #{$df-button-solid-mirror-color-danger-hovered-border};
+    --#{$prefix}button-solid-mirror-color-danger-hovered-background: #{$df-button-solid-mirror-color-danger-hovered-background};
+    --#{$prefix}button-solid-mirror-color-danger-hovered-foreground: #{$df-button-solid-mirror-color-danger-hovered-foreground};
+    --#{$prefix}button-solid-mirror-color-danger-pressed-border: #{$df-button-solid-mirror-color-danger-pressed-border};
+    --#{$prefix}button-solid-mirror-color-danger-pressed-background: #{$df-button-solid-mirror-color-danger-pressed-background};
+    --#{$prefix}button-solid-mirror-color-danger-pressed-foreground: #{$df-button-solid-mirror-color-danger-pressed-foreground};
+    --#{$prefix}button-solid-mirror-color-danger-active-border: #{$df-button-solid-mirror-color-danger-active-border};
+    --#{$prefix}button-solid-mirror-color-danger-active-background: #{$df-button-solid-mirror-color-danger-active-background};
+    --#{$prefix}button-solid-mirror-color-danger-active-foreground: #{$df-button-solid-mirror-color-danger-active-foreground};
+    --#{$prefix}button-solid-mirror-color-danger-activeHovered-border: #{$df-button-solid-mirror-color-danger-activeHovered-border};
+    --#{$prefix}button-solid-mirror-color-danger-activeHovered-background: #{$df-button-solid-mirror-color-danger-activeHovered-background};
+    --#{$prefix}button-solid-mirror-color-danger-activeHovered-foreground: #{$df-button-solid-mirror-color-danger-activeHovered-foreground};
+    --#{$prefix}button-solid-mirror-color-danger-activePressed-border: #{$df-button-solid-mirror-color-danger-activePressed-border};
+    --#{$prefix}button-solid-mirror-color-danger-activePressed-background: #{$df-button-solid-mirror-color-danger-activePressed-background};
+    --#{$prefix}button-solid-mirror-color-danger-activePressed-foreground: #{$df-button-solid-mirror-color-danger-activePressed-foreground};
+    --#{$prefix}button-solid-mirror-color-neutral-default-foreground: #{$df-button-solid-mirror-color-neutral-default-foreground};
+    --#{$prefix}button-solid-mirror-color-neutral-default-border: #{$df-button-solid-mirror-color-neutral-default-border};
+    --#{$prefix}button-solid-mirror-color-neutral-default-background: #{$df-button-solid-mirror-color-neutral-default-background};
+    --#{$prefix}button-solid-mirror-color-neutral-hovered-foreground: #{$df-button-solid-mirror-color-neutral-hovered-foreground};
+    --#{$prefix}button-solid-mirror-color-neutral-hovered-border: #{$df-button-solid-mirror-color-neutral-hovered-border};
+    --#{$prefix}button-solid-mirror-color-neutral-hovered-background: #{$df-button-solid-mirror-color-neutral-hovered-background};
+    --#{$prefix}button-solid-mirror-color-neutral-pressed-foreground: #{$df-button-solid-mirror-color-neutral-pressed-foreground};
+    --#{$prefix}button-solid-mirror-color-neutral-pressed-border: #{$df-button-solid-mirror-color-neutral-pressed-border};
+    --#{$prefix}button-solid-mirror-color-neutral-pressed-background: #{$df-button-solid-mirror-color-neutral-pressed-background};
+    --#{$prefix}button-solid-mirror-color-neutral-active-foreground: #{$df-button-solid-mirror-color-neutral-active-foreground};
+    --#{$prefix}button-solid-mirror-color-neutral-active-border: #{$df-button-solid-mirror-color-neutral-active-border};
+    --#{$prefix}button-solid-mirror-color-neutral-active-background: #{$df-button-solid-mirror-color-neutral-active-background};
+    --#{$prefix}button-solid-mirror-color-neutral-activeHovered-foreground: #{$df-button-solid-mirror-color-neutral-activeHovered-foreground};
+    --#{$prefix}button-solid-mirror-color-neutral-activeHovered-border: #{$df-button-solid-mirror-color-neutral-activeHovered-border};
+    --#{$prefix}button-solid-mirror-color-neutral-activeHovered-background: #{$df-button-solid-mirror-color-neutral-activeHovered-background};
+    --#{$prefix}button-solid-mirror-color-neutral-activePressed-foreground: #{$df-button-solid-mirror-color-neutral-activePressed-foreground};
+    --#{$prefix}button-solid-mirror-color-neutral-activePressed-border: #{$df-button-solid-mirror-color-neutral-activePressed-border};
+    --#{$prefix}button-solid-mirror-color-neutral-activePressed-background: #{$df-button-solid-mirror-color-neutral-activePressed-background};
+    --#{$prefix}button-solid-mirror-color-disabled-background: #{$df-button-solid-mirror-color-disabled-background};
+    --#{$prefix}button-solid-mirror-color-disabled-foreground: #{$df-button-solid-mirror-color-disabled-foreground};
+    --#{$prefix}button-outline-mirror-color-primary-default-foreground: #{$df-button-outline-mirror-color-primary-default-foreground};
+    --#{$prefix}button-outline-mirror-color-primary-default-background: #{$df-button-outline-mirror-color-primary-default-background};
+    --#{$prefix}button-outline-mirror-color-primary-default-border: #{$df-button-outline-mirror-color-primary-default-border};
+    --#{$prefix}button-outline-mirror-color-primary-hovered-foreground: #{$df-button-outline-mirror-color-primary-hovered-foreground};
+    --#{$prefix}button-outline-mirror-color-primary-hovered-background: #{$df-button-outline-mirror-color-primary-hovered-background};
+    --#{$prefix}button-outline-mirror-color-primary-hovered-border: #{$df-button-outline-mirror-color-primary-hovered-border};
+    --#{$prefix}button-outline-mirror-color-primary-pressed-foreground: #{$df-button-outline-mirror-color-primary-pressed-foreground};
+    --#{$prefix}button-outline-mirror-color-primary-pressed-background: #{$df-button-outline-mirror-color-primary-pressed-background};
+    --#{$prefix}button-outline-mirror-color-primary-pressed-border: #{$df-button-outline-mirror-color-primary-pressed-border};
+    --#{$prefix}button-outline-mirror-color-primary-active-foreground: #{$df-button-outline-mirror-color-primary-active-foreground};
+    --#{$prefix}button-outline-mirror-color-primary-active-background: #{$df-button-outline-mirror-color-primary-active-background};
+    --#{$prefix}button-outline-mirror-color-primary-active-border: #{$df-button-outline-mirror-color-primary-active-border};
+    --#{$prefix}button-outline-mirror-color-primary-activeHovered-foreground: #{$df-button-outline-mirror-color-primary-activeHovered-foreground};
+    --#{$prefix}button-outline-mirror-color-primary-activeHovered-background: #{$df-button-outline-mirror-color-primary-activeHovered-background};
+    --#{$prefix}button-outline-mirror-color-primary-activeHovered-border: #{$df-button-outline-mirror-color-primary-activeHovered-border};
+    --#{$prefix}button-outline-mirror-color-primary-activePressed-foreground: #{$df-button-outline-mirror-color-primary-activePressed-foreground};
+    --#{$prefix}button-outline-mirror-color-primary-activePressed-background: #{$df-button-outline-mirror-color-primary-activePressed-background};
+    --#{$prefix}button-outline-mirror-color-primary-activePressed-border: #{$df-button-outline-mirror-color-primary-activePressed-border};
+    --#{$prefix}button-outline-mirror-color-danger-default-foreground: #{$df-button-outline-mirror-color-danger-default-foreground};
+    --#{$prefix}button-outline-mirror-color-danger-default-background: #{$df-button-outline-mirror-color-danger-default-background};
+    --#{$prefix}button-outline-mirror-color-danger-default-border: #{$df-button-outline-mirror-color-danger-default-border};
+    --#{$prefix}button-outline-mirror-color-danger-hovered-foreground: #{$df-button-outline-mirror-color-danger-hovered-foreground};
+    --#{$prefix}button-outline-mirror-color-danger-hovered-background: #{$df-button-outline-mirror-color-danger-hovered-background};
+    --#{$prefix}button-outline-mirror-color-danger-hovered-border: #{$df-button-outline-mirror-color-danger-hovered-border};
+    --#{$prefix}button-outline-mirror-color-danger-pressed-foreground: #{$df-button-outline-mirror-color-danger-pressed-foreground};
+    --#{$prefix}button-outline-mirror-color-danger-pressed-background: #{$df-button-outline-mirror-color-danger-pressed-background};
+    --#{$prefix}button-outline-mirror-color-danger-pressed-border: #{$df-button-outline-mirror-color-danger-pressed-border};
+    --#{$prefix}button-outline-mirror-color-danger-active-foreground: #{$df-button-outline-mirror-color-danger-active-foreground};
+    --#{$prefix}button-outline-mirror-color-danger-active-background: #{$df-button-outline-mirror-color-danger-active-background};
+    --#{$prefix}button-outline-mirror-color-danger-active-border: #{$df-button-outline-mirror-color-danger-active-border};
+    --#{$prefix}button-outline-mirror-color-danger-activeHovered-foreground: #{$df-button-outline-mirror-color-danger-activeHovered-foreground};
+    --#{$prefix}button-outline-mirror-color-danger-activeHovered-background: #{$df-button-outline-mirror-color-danger-activeHovered-background};
+    --#{$prefix}button-outline-mirror-color-danger-activeHovered-border: #{$df-button-outline-mirror-color-danger-activeHovered-border};
+    --#{$prefix}button-outline-mirror-color-danger-activePressed-foreground: #{$df-button-outline-mirror-color-danger-activePressed-foreground};
+    --#{$prefix}button-outline-mirror-color-danger-activePressed-background: #{$df-button-outline-mirror-color-danger-activePressed-background};
+    --#{$prefix}button-outline-mirror-color-danger-activePressed-border: #{$df-button-outline-mirror-color-danger-activePressed-border};
+    --#{$prefix}button-outline-mirror-color-neutral-default-foreground: #{$df-button-outline-mirror-color-neutral-default-foreground};
+    --#{$prefix}button-outline-mirror-color-neutral-default-border: #{$df-button-outline-mirror-color-neutral-default-border};
+    --#{$prefix}button-outline-mirror-color-neutral-default-background: #{$df-button-outline-mirror-color-neutral-default-background};
+    --#{$prefix}button-outline-mirror-color-neutral-hovered-background: #{$df-button-outline-mirror-color-neutral-hovered-background};
+    --#{$prefix}button-outline-mirror-color-neutral-hovered-foreground: #{$df-button-outline-mirror-color-neutral-hovered-foreground};
+    --#{$prefix}button-outline-mirror-color-neutral-hovered-border: #{$df-button-outline-mirror-color-neutral-hovered-border};
+    --#{$prefix}button-outline-mirror-color-neutral-pressed-background: #{$df-button-outline-mirror-color-neutral-pressed-background};
+    --#{$prefix}button-outline-mirror-color-neutral-pressed-foreground: #{$df-button-outline-mirror-color-neutral-pressed-foreground};
+    --#{$prefix}button-outline-mirror-color-neutral-pressed-border: #{$df-button-outline-mirror-color-neutral-pressed-border};
+    --#{$prefix}button-outline-mirror-color-neutral-active-background: #{$df-button-outline-mirror-color-neutral-active-background};
+    --#{$prefix}button-outline-mirror-color-neutral-active-foreground: #{$df-button-outline-mirror-color-neutral-active-foreground};
+    --#{$prefix}button-outline-mirror-color-neutral-active-border: #{$df-button-outline-mirror-color-neutral-active-border};
+    --#{$prefix}button-outline-mirror-color-neutral-activeHovered-background: #{$df-button-outline-mirror-color-neutral-activeHovered-background};
+    --#{$prefix}button-outline-mirror-color-neutral-activeHovered-foreground: #{$df-button-outline-mirror-color-neutral-activeHovered-foreground};
+    --#{$prefix}button-outline-mirror-color-neutral-activeHovered-border: #{$df-button-outline-mirror-color-neutral-activeHovered-border};
+    --#{$prefix}button-outline-mirror-color-neutral-activePressed-background: #{$df-button-outline-mirror-color-neutral-activePressed-background};
+    --#{$prefix}button-outline-mirror-color-neutral-activePressed-foreground: #{$df-button-outline-mirror-color-neutral-activePressed-foreground};
+    --#{$prefix}button-outline-mirror-color-neutral-activePressed-border: #{$df-button-outline-mirror-color-neutral-activePressed-border};
+    --#{$prefix}button-outline-mirror-color-disabled-border: #{$df-button-outline-mirror-color-disabled-border};
+    --#{$prefix}button-outline-mirror-color-disabled-foreground: #{$df-button-outline-mirror-color-disabled-foreground};
+    --#{$prefix}button-outline-mirror-color-disabled-background: #{$df-button-outline-mirror-color-disabled-background};
+    --#{$prefix}button-text-mirror-color-primary-default-background: #{$df-button-text-mirror-color-primary-default-background};
+    --#{$prefix}button-text-mirror-color-primary-default-foreground: #{$df-button-text-mirror-color-primary-default-foreground};
+    --#{$prefix}button-text-mirror-color-primary-default-border: #{$df-button-text-mirror-color-primary-default-border};
+    --#{$prefix}button-text-mirror-color-primary-hovered-foreground: #{$df-button-text-mirror-color-primary-hovered-foreground};
+    --#{$prefix}button-text-mirror-color-primary-hovered-background: #{$df-button-text-mirror-color-primary-hovered-background};
+    --#{$prefix}button-text-mirror-color-primary-hovered-border: #{$df-button-text-mirror-color-primary-hovered-border};
+    --#{$prefix}button-text-mirror-color-primary-pressed-foreground: #{$df-button-text-mirror-color-primary-pressed-foreground};
+    --#{$prefix}button-text-mirror-color-primary-pressed-background: #{$df-button-text-mirror-color-primary-pressed-background};
+    --#{$prefix}button-text-mirror-color-primary-pressed-border: #{$df-button-text-mirror-color-primary-pressed-border};
+    --#{$prefix}button-text-mirror-color-primary-active-foreground: #{$df-button-text-mirror-color-primary-active-foreground};
+    --#{$prefix}button-text-mirror-color-primary-active-background: #{$df-button-text-mirror-color-primary-active-background};
+    --#{$prefix}button-text-mirror-color-primary-active-border: #{$df-button-text-mirror-color-primary-active-border};
+    --#{$prefix}button-text-mirror-color-primary-activeHovered-foreground: #{$df-button-text-mirror-color-primary-activeHovered-foreground};
+    --#{$prefix}button-text-mirror-color-primary-activeHovered-background: #{$df-button-text-mirror-color-primary-activeHovered-background};
+    --#{$prefix}button-text-mirror-color-primary-activeHovered-border: #{$df-button-text-mirror-color-primary-activeHovered-border};
+    --#{$prefix}button-text-mirror-color-primary-activePressed-foreground: #{$df-button-text-mirror-color-primary-activePressed-foreground};
+    --#{$prefix}button-text-mirror-color-primary-activePressed-background: #{$df-button-text-mirror-color-primary-activePressed-background};
+    --#{$prefix}button-text-mirror-color-primary-activePressed-border: #{$df-button-text-mirror-color-primary-activePressed-border};
+    --#{$prefix}button-text-mirror-color-danger-default-background: #{$df-button-text-mirror-color-danger-default-background};
+    --#{$prefix}button-text-mirror-color-danger-default-foreground: #{$df-button-text-mirror-color-danger-default-foreground};
+    --#{$prefix}button-text-mirror-color-danger-default-border: #{$df-button-text-mirror-color-danger-default-border};
+    --#{$prefix}button-text-mirror-color-danger-hovered-foreground: #{$df-button-text-mirror-color-danger-hovered-foreground};
+    --#{$prefix}button-text-mirror-color-danger-hovered-background: #{$df-button-text-mirror-color-danger-hovered-background};
+    --#{$prefix}button-text-mirror-color-danger-hovered-border: #{$df-button-text-mirror-color-danger-hovered-border};
+    --#{$prefix}button-text-mirror-color-danger-pressed-foreground: #{$df-button-text-mirror-color-danger-pressed-foreground};
+    --#{$prefix}button-text-mirror-color-danger-pressed-background: #{$df-button-text-mirror-color-danger-pressed-background};
+    --#{$prefix}button-text-mirror-color-danger-pressed-border: #{$df-button-text-mirror-color-danger-pressed-border};
+    --#{$prefix}button-text-mirror-color-danger-active-foreground: #{$df-button-text-mirror-color-danger-active-foreground};
+    --#{$prefix}button-text-mirror-color-danger-active-background: #{$df-button-text-mirror-color-danger-active-background};
+    --#{$prefix}button-text-mirror-color-danger-active-border: #{$df-button-text-mirror-color-danger-active-border};
+    --#{$prefix}button-text-mirror-color-danger-activeHovered-foreground: #{$df-button-text-mirror-color-danger-activeHovered-foreground};
+    --#{$prefix}button-text-mirror-color-danger-activeHovered-background: #{$df-button-text-mirror-color-danger-activeHovered-background};
+    --#{$prefix}button-text-mirror-color-danger-activeHovered-border: #{$df-button-text-mirror-color-danger-activeHovered-border};
+    --#{$prefix}button-text-mirror-color-danger-activePressed-foreground: #{$df-button-text-mirror-color-danger-activePressed-foreground};
+    --#{$prefix}button-text-mirror-color-danger-activePressed-background: #{$df-button-text-mirror-color-danger-activePressed-background};
+    --#{$prefix}button-text-mirror-color-danger-activePressed-border: #{$df-button-text-mirror-color-danger-activePressed-border};
+    --#{$prefix}button-text-mirror-color-neutral-default-background: #{$df-button-text-mirror-color-neutral-default-background};
+    --#{$prefix}button-text-mirror-color-neutral-default-foreground: #{$df-button-text-mirror-color-neutral-default-foreground};
+    --#{$prefix}button-text-mirror-color-neutral-default-border: #{$df-button-text-mirror-color-neutral-default-border};
+    --#{$prefix}button-text-mirror-color-neutral-hovered-background: #{$df-button-text-mirror-color-neutral-hovered-background};
+    --#{$prefix}button-text-mirror-color-neutral-hovered-foreground: #{$df-button-text-mirror-color-neutral-hovered-foreground};
+    --#{$prefix}button-text-mirror-color-neutral-hovered-border: #{$df-button-text-mirror-color-neutral-hovered-border};
+    --#{$prefix}button-text-mirror-color-neutral-pressed-background: #{$df-button-text-mirror-color-neutral-pressed-background};
+    --#{$prefix}button-text-mirror-color-neutral-pressed-foreground: #{$df-button-text-mirror-color-neutral-pressed-foreground};
+    --#{$prefix}button-text-mirror-color-neutral-pressed-border: #{$df-button-text-mirror-color-neutral-pressed-border};
+    --#{$prefix}button-text-mirror-color-neutral-active-background: #{$df-button-text-mirror-color-neutral-active-background};
+    --#{$prefix}button-text-mirror-color-neutral-active-foreground: #{$df-button-text-mirror-color-neutral-active-foreground};
+    --#{$prefix}button-text-mirror-color-neutral-active-border: #{$df-button-text-mirror-color-neutral-active-border};
+    --#{$prefix}button-text-mirror-color-neutral-activeHovered-background: #{$df-button-text-mirror-color-neutral-activeHovered-background};
+    --#{$prefix}button-text-mirror-color-neutral-activeHovered-foreground: #{$df-button-text-mirror-color-neutral-activeHovered-foreground};
+    --#{$prefix}button-text-mirror-color-neutral-activeHovered-border: #{$df-button-text-mirror-color-neutral-activeHovered-border};
+    --#{$prefix}button-text-mirror-color-neutral-activePressed-background: #{$df-button-text-mirror-color-neutral-activePressed-background};
+    --#{$prefix}button-text-mirror-color-neutral-activePressed-foreground: #{$df-button-text-mirror-color-neutral-activePressed-foreground};
+    --#{$prefix}button-text-mirror-color-neutral-activePressed-border: #{$df-button-text-mirror-color-neutral-activePressed-border};
+    --#{$prefix}button-text-mirror-color-disabled-foreground: #{$df-button-text-mirror-color-disabled-foreground};
+    --#{$prefix}button-text-mirror-color-disabled-border: #{$df-button-text-mirror-color-disabled-border};
+    --#{$prefix}button-text-mirror-color-disabled-background: #{$df-button-text-mirror-color-disabled-background};
+    --#{$prefix}button-borderRadius-main-null: #{$df-button-borderRadius-main-null};
+    --#{$prefix}button-borderRadius-main-small: #{$df-button-borderRadius-main-small};
+    --#{$prefix}button-borderRadius-main-medium: #{$df-button-borderRadius-main-medium};
+    --#{$prefix}button-borderRadius-main-large: #{$df-button-borderRadius-main-large};
+    --#{$prefix}button-borderRadius-main-rounded: #{$df-button-borderRadius-main-rounded};
+    --#{$prefix}button-borderRadius-focus-null: #{$df-button-borderRadius-focus-null};
+    --#{$prefix}button-borderRadius-focus-small: #{$df-button-borderRadius-focus-small};
+    --#{$prefix}button-borderRadius-focus-medium: #{$df-button-borderRadius-focus-medium};
+    --#{$prefix}button-borderRadius-focus-large: #{$df-button-borderRadius-focus-large};
+    --#{$prefix}button-borderRadius-focus-rounded: #{$df-button-borderRadius-focus-rounded};
+    --#{$prefix}button-solid-basic-color-primary-default-background: #{$df-button-solid-basic-color-primary-default-background};
+    --#{$prefix}button-solid-basic-color-primary-default-foreground: #{$df-button-solid-basic-color-primary-default-foreground};
+    --#{$prefix}button-solid-basic-color-primary-default-border: #{$df-button-solid-basic-color-primary-default-border};
+    --#{$prefix}button-solid-basic-color-primary-hovered-background: #{$df-button-solid-basic-color-primary-hovered-background};
+    --#{$prefix}button-solid-basic-color-primary-hovered-border: #{$df-button-solid-basic-color-primary-hovered-border};
+    --#{$prefix}button-solid-basic-color-primary-hovered-foreground: #{$df-button-solid-basic-color-primary-hovered-foreground};
+    --#{$prefix}button-solid-basic-color-primary-pressed-background: #{$df-button-solid-basic-color-primary-pressed-background};
+    --#{$prefix}button-solid-basic-color-primary-pressed-border: #{$df-button-solid-basic-color-primary-pressed-border};
+    --#{$prefix}button-solid-basic-color-primary-pressed-foreground: #{$df-button-solid-basic-color-primary-pressed-foreground};
+    --#{$prefix}button-solid-basic-color-primary-active-background: #{$df-button-solid-basic-color-primary-active-background};
+    --#{$prefix}button-solid-basic-color-primary-active-border: #{$df-button-solid-basic-color-primary-active-border};
+    --#{$prefix}button-solid-basic-color-primary-active-foreground: #{$df-button-solid-basic-color-primary-active-foreground};
+    --#{$prefix}button-solid-basic-color-primary-activeHovered-background: #{$df-button-solid-basic-color-primary-activeHovered-background};
+    --#{$prefix}button-solid-basic-color-primary-activeHovered-border: #{$df-button-solid-basic-color-primary-activeHovered-border};
+    --#{$prefix}button-solid-basic-color-primary-activeHovered-foreground: #{$df-button-solid-basic-color-primary-activeHovered-foreground};
+    --#{$prefix}button-solid-basic-color-primary-activePressed-background: #{$df-button-solid-basic-color-primary-activePressed-background};
+    --#{$prefix}button-solid-basic-color-primary-activePressed-border: #{$df-button-solid-basic-color-primary-activePressed-border};
+    --#{$prefix}button-solid-basic-color-primary-activePressed-foreground: #{$df-button-solid-basic-color-primary-activePressed-foreground};
+    --#{$prefix}button-solid-basic-color-primary-disabled-background: #{$df-button-solid-basic-color-primary-disabled-background};
+    --#{$prefix}button-solid-basic-color-primary-disabled-foreground: #{$df-button-solid-basic-color-primary-disabled-foreground};
+    --#{$prefix}button-solid-basic-color-danger-default-background: #{$df-button-solid-basic-color-danger-default-background};
+    --#{$prefix}button-solid-basic-color-danger-default-border: #{$df-button-solid-basic-color-danger-default-border};
+    --#{$prefix}button-solid-basic-color-danger-default-foreground: #{$df-button-solid-basic-color-danger-default-foreground};
+    --#{$prefix}button-solid-basic-color-danger-hovered-background: #{$df-button-solid-basic-color-danger-hovered-background};
+    --#{$prefix}button-solid-basic-color-danger-hovered-border: #{$df-button-solid-basic-color-danger-hovered-border};
+    --#{$prefix}button-solid-basic-color-danger-hovered-foreground: #{$df-button-solid-basic-color-danger-hovered-foreground};
+    --#{$prefix}button-solid-basic-color-danger-pressed-background: #{$df-button-solid-basic-color-danger-pressed-background};
+    --#{$prefix}button-solid-basic-color-danger-pressed-border: #{$df-button-solid-basic-color-danger-pressed-border};
+    --#{$prefix}button-solid-basic-color-danger-pressed-foreground: #{$df-button-solid-basic-color-danger-pressed-foreground};
+    --#{$prefix}button-solid-basic-color-danger-active-background: #{$df-button-solid-basic-color-danger-active-background};
+    --#{$prefix}button-solid-basic-color-danger-active-border: #{$df-button-solid-basic-color-danger-active-border};
+    --#{$prefix}button-solid-basic-color-danger-active-foreground: #{$df-button-solid-basic-color-danger-active-foreground};
+    --#{$prefix}button-solid-basic-color-danger-activeHovered-background: #{$df-button-solid-basic-color-danger-activeHovered-background};
+    --#{$prefix}button-solid-basic-color-danger-activeHovered-border: #{$df-button-solid-basic-color-danger-activeHovered-border};
+    --#{$prefix}button-solid-basic-color-danger-activeHovered-foreground: #{$df-button-solid-basic-color-danger-activeHovered-foreground};
+    --#{$prefix}button-solid-basic-color-danger-activePressed-background: #{$df-button-solid-basic-color-danger-activePressed-background};
+    --#{$prefix}button-solid-basic-color-danger-activePressed-border: #{$df-button-solid-basic-color-danger-activePressed-border};
+    --#{$prefix}button-solid-basic-color-danger-activePressed-foreground: #{$df-button-solid-basic-color-danger-activePressed-foreground};
+    --#{$prefix}button-solid-basic-color-neutral-default-background: #{$df-button-solid-basic-color-neutral-default-background};
+    --#{$prefix}button-solid-basic-color-neutral-default-border: #{$df-button-solid-basic-color-neutral-default-border};
+    --#{$prefix}button-solid-basic-color-neutral-default-foreground: #{$df-button-solid-basic-color-neutral-default-foreground};
+    --#{$prefix}button-solid-basic-color-neutral-hovered-background: #{$df-button-solid-basic-color-neutral-hovered-background};
+    --#{$prefix}button-solid-basic-color-neutral-hovered-border: #{$df-button-solid-basic-color-neutral-hovered-border};
+    --#{$prefix}button-solid-basic-color-neutral-hovered-foreground: #{$df-button-solid-basic-color-neutral-hovered-foreground};
+    --#{$prefix}button-solid-basic-color-neutral-pressed-background: #{$df-button-solid-basic-color-neutral-pressed-background};
+    --#{$prefix}button-solid-basic-color-neutral-pressed-border: #{$df-button-solid-basic-color-neutral-pressed-border};
+    --#{$prefix}button-solid-basic-color-neutral-pressed-foreground: #{$df-button-solid-basic-color-neutral-pressed-foreground};
+    --#{$prefix}button-solid-basic-color-neutral-active-background: #{$df-button-solid-basic-color-neutral-active-background};
+    --#{$prefix}button-solid-basic-color-neutral-active-border: #{$df-button-solid-basic-color-neutral-active-border};
+    --#{$prefix}button-solid-basic-color-neutral-active-foreground: #{$df-button-solid-basic-color-neutral-active-foreground};
+    --#{$prefix}button-solid-basic-color-neutral-activeHovered-background: #{$df-button-solid-basic-color-neutral-activeHovered-background};
+    --#{$prefix}button-solid-basic-color-neutral-activeHovered-border: #{$df-button-solid-basic-color-neutral-activeHovered-border};
+    --#{$prefix}button-solid-basic-color-neutral-activeHovered-foreground: #{$df-button-solid-basic-color-neutral-activeHovered-foreground};
+    --#{$prefix}button-solid-basic-color-neutral-activePressed-background: #{$df-button-solid-basic-color-neutral-activePressed-background};
+    --#{$prefix}button-solid-basic-color-neutral-activePressed-border: #{$df-button-solid-basic-color-neutral-activePressed-border};
+    --#{$prefix}button-solid-basic-color-neutral-activePressed-foreground: #{$df-button-solid-basic-color-neutral-activePressed-foreground};
+    --#{$prefix}button-solid-basic-color-disabled-foreground: #{$df-button-solid-basic-color-disabled-foreground};
+    --#{$prefix}button-solid-basic-color-disabled-background: #{$df-button-solid-basic-color-disabled-background};
+    --#{$prefix}button-outline-basic-color-primary-default-border: #{$df-button-outline-basic-color-primary-default-border};
+    --#{$prefix}button-outline-basic-color-primary-default-foreground: #{$df-button-outline-basic-color-primary-default-foreground};
+    --#{$prefix}button-outline-basic-color-primary-default-background: #{$df-button-outline-basic-color-primary-default-background};
+    --#{$prefix}button-outline-basic-color-primary-hovered-border: #{$df-button-outline-basic-color-primary-hovered-border};
+    --#{$prefix}button-outline-basic-color-primary-hovered-foreground: #{$df-button-outline-basic-color-primary-hovered-foreground};
+    --#{$prefix}button-outline-basic-color-primary-hovered-background: #{$df-button-outline-basic-color-primary-hovered-background};
+    --#{$prefix}button-outline-basic-color-primary-pressed-border: #{$df-button-outline-basic-color-primary-pressed-border};
+    --#{$prefix}button-outline-basic-color-primary-pressed-foreground: #{$df-button-outline-basic-color-primary-pressed-foreground};
+    --#{$prefix}button-outline-basic-color-primary-pressed-background: #{$df-button-outline-basic-color-primary-pressed-background};
+    --#{$prefix}button-outline-basic-color-primary-active-border: #{$df-button-outline-basic-color-primary-active-border};
+    --#{$prefix}button-outline-basic-color-primary-active-foreground: #{$df-button-outline-basic-color-primary-active-foreground};
+    --#{$prefix}button-outline-basic-color-primary-active-background: #{$df-button-outline-basic-color-primary-active-background};
+    --#{$prefix}button-outline-basic-color-primary-activeHovered-border: #{$df-button-outline-basic-color-primary-activeHovered-border};
+    --#{$prefix}button-outline-basic-color-primary-activeHovered-foreground: #{$df-button-outline-basic-color-primary-activeHovered-foreground};
+    --#{$prefix}button-outline-basic-color-primary-activeHovered-background: #{$df-button-outline-basic-color-primary-activeHovered-background};
+    --#{$prefix}button-outline-basic-color-primary-activePressed-border: #{$df-button-outline-basic-color-primary-activePressed-border};
+    --#{$prefix}button-outline-basic-color-primary-activePressed-foreground: #{$df-button-outline-basic-color-primary-activePressed-foreground};
+    --#{$prefix}button-outline-basic-color-primary-activePressed-background: #{$df-button-outline-basic-color-primary-activePressed-background};
+    --#{$prefix}button-outline-basic-color-danger-default-border: #{$df-button-outline-basic-color-danger-default-border};
+    --#{$prefix}button-outline-basic-color-danger-default-foreground: #{$df-button-outline-basic-color-danger-default-foreground};
+    --#{$prefix}button-outline-basic-color-danger-default-background: #{$df-button-outline-basic-color-danger-default-background};
+    --#{$prefix}button-outline-basic-color-danger-hovered-border: #{$df-button-outline-basic-color-danger-hovered-border};
+    --#{$prefix}button-outline-basic-color-danger-hovered-foreground: #{$df-button-outline-basic-color-danger-hovered-foreground};
+    --#{$prefix}button-outline-basic-color-danger-hovered-background: #{$df-button-outline-basic-color-danger-hovered-background};
+    --#{$prefix}button-outline-basic-color-danger-pressed-border: #{$df-button-outline-basic-color-danger-pressed-border};
+    --#{$prefix}button-outline-basic-color-danger-pressed-foreground: #{$df-button-outline-basic-color-danger-pressed-foreground};
+    --#{$prefix}button-outline-basic-color-danger-pressed-background: #{$df-button-outline-basic-color-danger-pressed-background};
+    --#{$prefix}button-outline-basic-color-danger-active-border: #{$df-button-outline-basic-color-danger-active-border};
+    --#{$prefix}button-outline-basic-color-danger-active-foreground: #{$df-button-outline-basic-color-danger-active-foreground};
+    --#{$prefix}button-outline-basic-color-danger-active-background: #{$df-button-outline-basic-color-danger-active-background};
+    --#{$prefix}button-outline-basic-color-danger-activeHovered-border: #{$df-button-outline-basic-color-danger-activeHovered-border};
+    --#{$prefix}button-outline-basic-color-danger-activeHovered-foreground: #{$df-button-outline-basic-color-danger-activeHovered-foreground};
+    --#{$prefix}button-outline-basic-color-danger-activeHovered-background: #{$df-button-outline-basic-color-danger-activeHovered-background};
+    --#{$prefix}button-outline-basic-color-danger-activePressed-border: #{$df-button-outline-basic-color-danger-activePressed-border};
+    --#{$prefix}button-outline-basic-color-danger-activePressed-foreground: #{$df-button-outline-basic-color-danger-activePressed-foreground};
+    --#{$prefix}button-outline-basic-color-danger-activePressed-background: #{$df-button-outline-basic-color-danger-activePressed-background};
+    --#{$prefix}button-outline-basic-color-neutral-default-border: #{$df-button-outline-basic-color-neutral-default-border};
+    --#{$prefix}button-outline-basic-color-neutral-default-foreground: #{$df-button-outline-basic-color-neutral-default-foreground};
+    --#{$prefix}button-outline-basic-color-neutral-default-background: #{$df-button-outline-basic-color-neutral-default-background};
+    --#{$prefix}button-outline-basic-color-neutral-hovered-border: #{$df-button-outline-basic-color-neutral-hovered-border};
+    --#{$prefix}button-outline-basic-color-neutral-hovered-foreground: #{$df-button-outline-basic-color-neutral-hovered-foreground};
+    --#{$prefix}button-outline-basic-color-neutral-hovered-background: #{$df-button-outline-basic-color-neutral-hovered-background};
+    --#{$prefix}button-outline-basic-color-neutral-pressed-border: #{$df-button-outline-basic-color-neutral-pressed-border};
+    --#{$prefix}button-outline-basic-color-neutral-pressed-foreground: #{$df-button-outline-basic-color-neutral-pressed-foreground};
+    --#{$prefix}button-outline-basic-color-neutral-pressed-background: #{$df-button-outline-basic-color-neutral-pressed-background};
+    --#{$prefix}button-outline-basic-color-neutral-active-border: #{$df-button-outline-basic-color-neutral-active-border};
+    --#{$prefix}button-outline-basic-color-neutral-active-foreground: #{$df-button-outline-basic-color-neutral-active-foreground};
+    --#{$prefix}button-outline-basic-color-neutral-active-background: #{$df-button-outline-basic-color-neutral-active-background};
+    --#{$prefix}button-outline-basic-color-neutral-activeHovered-border: #{$df-button-outline-basic-color-neutral-activeHovered-border};
+    --#{$prefix}button-outline-basic-color-neutral-activeHovered-foreground: #{$df-button-outline-basic-color-neutral-activeHovered-foreground};
+    --#{$prefix}button-outline-basic-color-neutral-activeHovered-background: #{$df-button-outline-basic-color-neutral-activeHovered-background};
+    --#{$prefix}button-outline-basic-color-neutral-activePressed-border: #{$df-button-outline-basic-color-neutral-activePressed-border};
+    --#{$prefix}button-outline-basic-color-neutral-activePressed-background: #{$df-button-outline-basic-color-neutral-activePressed-background};
+    --#{$prefix}button-outline-basic-color-neutral-activePressed-foreground: #{$df-button-outline-basic-color-neutral-activePressed-foreground};
+    --#{$prefix}button-outline-basic-color-disabled-foreground: #{$df-button-outline-basic-color-disabled-foreground};
+    --#{$prefix}button-outline-basic-color-disabled-background: #{$df-button-outline-basic-color-disabled-background};
+    --#{$prefix}button-outline-basic-color-disabled-border: #{$df-button-outline-basic-color-disabled-border};
+    --#{$prefix}button-text-basic-color-primary-default-foreground: #{$df-button-text-basic-color-primary-default-foreground};
+    --#{$prefix}button-text-basic-color-primary-default-background: #{$df-button-text-basic-color-primary-default-background};
+    --#{$prefix}button-text-basic-color-primary-default-border: #{$df-button-text-basic-color-primary-default-border};
+    --#{$prefix}button-text-basic-color-primary-hovered-foreground: #{$df-button-text-basic-color-primary-hovered-foreground};
+    --#{$prefix}button-text-basic-color-primary-hovered-background: #{$df-button-text-basic-color-primary-hovered-background};
+    --#{$prefix}button-text-basic-color-primary-hovered-border: #{$df-button-text-basic-color-primary-hovered-border};
+    --#{$prefix}button-text-basic-color-primary-pressed-foreground: #{$df-button-text-basic-color-primary-pressed-foreground};
+    --#{$prefix}button-text-basic-color-primary-pressed-background: #{$df-button-text-basic-color-primary-pressed-background};
+    --#{$prefix}button-text-basic-color-primary-pressed-border: #{$df-button-text-basic-color-primary-pressed-border};
+    --#{$prefix}button-text-basic-color-primary-active-foreground: #{$df-button-text-basic-color-primary-active-foreground};
+    --#{$prefix}button-text-basic-color-primary-active-background: #{$df-button-text-basic-color-primary-active-background};
+    --#{$prefix}button-text-basic-color-primary-active-border: #{$df-button-text-basic-color-primary-active-border};
+    --#{$prefix}button-text-basic-color-primary-activeHovered-foreground: #{$df-button-text-basic-color-primary-activeHovered-foreground};
+    --#{$prefix}button-text-basic-color-primary-activeHovered-background: #{$df-button-text-basic-color-primary-activeHovered-background};
+    --#{$prefix}button-text-basic-color-primary-activeHovered-border: #{$df-button-text-basic-color-primary-activeHovered-border};
+    --#{$prefix}button-text-basic-color-primary-activePressed-foreground: #{$df-button-text-basic-color-primary-activePressed-foreground};
+    --#{$prefix}button-text-basic-color-primary-activePressed-background: #{$df-button-text-basic-color-primary-activePressed-background};
+    --#{$prefix}button-text-basic-color-primary-activePressed-border: #{$df-button-text-basic-color-primary-activePressed-border};
+    --#{$prefix}button-text-basic-color-danger-default-foreground: #{$df-button-text-basic-color-danger-default-foreground};
+    --#{$prefix}button-text-basic-color-danger-default-background: #{$df-button-text-basic-color-danger-default-background};
+    --#{$prefix}button-text-basic-color-danger-default-border: #{$df-button-text-basic-color-danger-default-border};
+    --#{$prefix}button-text-basic-color-danger-hovered-foreground: #{$df-button-text-basic-color-danger-hovered-foreground};
+    --#{$prefix}button-text-basic-color-danger-hovered-background: #{$df-button-text-basic-color-danger-hovered-background};
+    --#{$prefix}button-text-basic-color-danger-hovered-border: #{$df-button-text-basic-color-danger-hovered-border};
+    --#{$prefix}button-text-basic-color-danger-pressed-foreground: #{$df-button-text-basic-color-danger-pressed-foreground};
+    --#{$prefix}button-text-basic-color-danger-pressed-background: #{$df-button-text-basic-color-danger-pressed-background};
+    --#{$prefix}button-text-basic-color-danger-pressed-border: #{$df-button-text-basic-color-danger-pressed-border};
+    --#{$prefix}button-text-basic-color-danger-active-foreground: #{$df-button-text-basic-color-danger-active-foreground};
+    --#{$prefix}button-text-basic-color-danger-active-background: #{$df-button-text-basic-color-danger-active-background};
+    --#{$prefix}button-text-basic-color-danger-active-border: #{$df-button-text-basic-color-danger-active-border};
+    --#{$prefix}button-text-basic-color-danger-activeHovered-foreground: #{$df-button-text-basic-color-danger-activeHovered-foreground};
+    --#{$prefix}button-text-basic-color-danger-activeHovered-background: #{$df-button-text-basic-color-danger-activeHovered-background};
+    --#{$prefix}button-text-basic-color-danger-activeHovered-border: #{$df-button-text-basic-color-danger-activeHovered-border};
+    --#{$prefix}button-text-basic-color-danger-activePressed-foreground: #{$df-button-text-basic-color-danger-activePressed-foreground};
+    --#{$prefix}button-text-basic-color-danger-activePressed-background: #{$df-button-text-basic-color-danger-activePressed-background};
+    --#{$prefix}button-text-basic-color-danger-activePressed-border: #{$df-button-text-basic-color-danger-activePressed-border};
+    --#{$prefix}button-text-basic-color-neutral-default-foreground: #{$df-button-text-basic-color-neutral-default-foreground};
+    --#{$prefix}button-text-basic-color-neutral-default-background: #{$df-button-text-basic-color-neutral-default-background};
+    --#{$prefix}button-text-basic-color-neutral-default-border: #{$df-button-text-basic-color-neutral-default-border};
+    --#{$prefix}button-text-basic-color-neutral-hovered-foreground: #{$df-button-text-basic-color-neutral-hovered-foreground};
+    --#{$prefix}button-text-basic-color-neutral-hovered-background: #{$df-button-text-basic-color-neutral-hovered-background};
+    --#{$prefix}button-text-basic-color-neutral-hovered-border: #{$df-button-text-basic-color-neutral-hovered-border};
+    --#{$prefix}button-text-basic-color-neutral-pressed-foreground: #{$df-button-text-basic-color-neutral-pressed-foreground};
+    --#{$prefix}button-text-basic-color-neutral-pressed-background: #{$df-button-text-basic-color-neutral-pressed-background};
+    --#{$prefix}button-text-basic-color-neutral-pressed-border: #{$df-button-text-basic-color-neutral-pressed-border};
+    --#{$prefix}button-text-basic-color-neutral-active-foreground: #{$df-button-text-basic-color-neutral-active-foreground};
+    --#{$prefix}button-text-basic-color-neutral-active-background: #{$df-button-text-basic-color-neutral-active-background};
+    --#{$prefix}button-text-basic-color-neutral-active-border: #{$df-button-text-basic-color-neutral-active-border};
+    --#{$prefix}button-text-basic-color-neutral-activeHovered-foreground: #{$df-button-text-basic-color-neutral-activeHovered-foreground};
+    --#{$prefix}button-text-basic-color-neutral-activeHovered-background: #{$df-button-text-basic-color-neutral-activeHovered-background};
+    --#{$prefix}button-text-basic-color-neutral-activeHovered-border: #{$df-button-text-basic-color-neutral-activeHovered-border};
+    --#{$prefix}button-text-basic-color-neutral-activePressed-background: #{$df-button-text-basic-color-neutral-activePressed-background};
+    --#{$prefix}button-text-basic-color-neutral-activePressed-foreground: #{$df-button-text-basic-color-neutral-activePressed-foreground};
+    --#{$prefix}button-text-basic-color-neutral-activePressed-border: #{$df-button-text-basic-color-neutral-activePressed-border};
+    --#{$prefix}button-text-basic-color-disabled-foreground: #{$df-button-text-basic-color-disabled-foreground};
+    --#{$prefix}button-text-basic-color-disabled-background: #{$df-button-text-basic-color-disabled-background};
+  }
+  .badge {
+    --#{$prefix}badge-soft-color-neutral-default-border: #{$df-badge-soft-color-neutral-default-border};
+    --#{$prefix}badge-soft-color-neutral-hovered-border: #{$df-badge-soft-color-neutral-hovered-border};
+    --#{$prefix}badge-soft-color-neutral-pressed-border: #{$df-badge-soft-color-neutral-pressed-border};
+    --#{$prefix}badge-soft-color-danger-default-border: #{$df-badge-soft-color-danger-default-border};
+    --#{$prefix}badge-soft-color-danger-hovered-border: #{$df-badge-soft-color-danger-hovered-border};
+    --#{$prefix}badge-soft-color-danger-pressed-border: #{$df-badge-soft-color-danger-pressed-border};
+    --#{$prefix}badge-soft-color-warning-default-border: #{$df-badge-soft-color-warning-default-border};
+    --#{$prefix}badge-soft-color-warning-hovered-border: #{$df-badge-soft-color-warning-hovered-border};
+    --#{$prefix}badge-soft-color-warning-pressed-border: #{$df-badge-soft-color-warning-pressed-border};
+    --#{$prefix}badge-soft-color-success-default-border: #{$df-badge-soft-color-success-default-border};
+    --#{$prefix}badge-soft-color-success-hovered-border: #{$df-badge-soft-color-success-hovered-border};
+    --#{$prefix}badge-soft-color-success-pressed-border: #{$df-badge-soft-color-success-pressed-border};
+    --#{$prefix}badge-soft-color-info-default-border: #{$df-badge-soft-color-info-default-border};
+    --#{$prefix}badge-soft-color-info-hovered-border: #{$df-badge-soft-color-info-hovered-border};
+    --#{$prefix}badge-soft-color-info-pressed-border: #{$df-badge-soft-color-info-pressed-border};
+    --#{$prefix}badge-soft-color-tip-default-border: #{$df-badge-soft-color-tip-default-border};
+    --#{$prefix}badge-soft-color-tip-hovered-border: #{$df-badge-soft-color-tip-hovered-border};
+    --#{$prefix}badge-soft-color-tip-pressed-border: #{$df-badge-soft-color-tip-pressed-border};
+    --#{$prefix}badge-soft-color-chromatic1-default-border: #{$df-badge-soft-color-chromatic1-default-border};
+    --#{$prefix}badge-soft-color-chromatic1-hovered-border: #{$df-badge-soft-color-chromatic1-hovered-border};
+    --#{$prefix}badge-soft-color-chromatic1-pressed-border: #{$df-badge-soft-color-chromatic1-pressed-border};
+    --#{$prefix}badge-soft-color-chromatic2-default-border: #{$df-badge-soft-color-chromatic2-default-border};
+    --#{$prefix}badge-soft-color-chromatic2-hovered-border: #{$df-badge-soft-color-chromatic2-hovered-border};
+    --#{$prefix}badge-soft-color-chromatic2-pressed-border: #{$df-badge-soft-color-chromatic2-pressed-border};
+    --#{$prefix}badge-solid-color-focus-main-border: #{$df-badge-solid-color-focus-main-border};
+    --#{$prefix}badge-solid-color-focus-alt-border: #{$df-badge-solid-color-focus-alt-border};
+    --#{$prefix}badge-solid-color-neutral-default-background: #{$df-badge-solid-color-neutral-default-background};
+    --#{$prefix}badge-solid-color-neutral-default-foreground: #{$df-badge-solid-color-neutral-default-foreground};
+    --#{$prefix}badge-solid-color-neutral-hovered-background: #{$df-badge-solid-color-neutral-hovered-background};
+    --#{$prefix}badge-solid-color-neutral-hovered-foreground: #{$df-badge-solid-color-neutral-hovered-foreground};
+    --#{$prefix}badge-solid-color-neutral-pressed-background: #{$df-badge-solid-color-neutral-pressed-background};
+    --#{$prefix}badge-solid-color-neutral-pressed-foreground: #{$df-badge-solid-color-neutral-pressed-foreground};
+    --#{$prefix}badge-solid-color-neutral-alt-default-background: #{$df-badge-solid-color-neutral-alt-default-background};
+    --#{$prefix}badge-solid-color-neutral-alt-default-foreground: #{$df-badge-solid-color-neutral-alt-default-foreground};
+    --#{$prefix}badge-solid-color-neutral-alt-hovered-background: #{$df-badge-solid-color-neutral-alt-hovered-background};
+    --#{$prefix}badge-solid-color-neutral-alt-hovered-foreground: #{$df-badge-solid-color-neutral-alt-hovered-foreground};
+    --#{$prefix}badge-solid-color-neutral-alt-pressed-background: #{$df-badge-solid-color-neutral-alt-pressed-background};
+    --#{$prefix}badge-solid-color-neutral-alt-pressed-foreground: #{$df-badge-solid-color-neutral-alt-pressed-foreground};
+    --#{$prefix}badge-solid-color-danger-default-background: #{$df-badge-solid-color-danger-default-background};
+    --#{$prefix}badge-solid-color-danger-default-foreground: #{$df-badge-solid-color-danger-default-foreground};
+    --#{$prefix}badge-solid-color-danger-hovered-background: #{$df-badge-solid-color-danger-hovered-background};
+    --#{$prefix}badge-solid-color-danger-hovered-foreground: #{$df-badge-solid-color-danger-hovered-foreground};
+    --#{$prefix}badge-solid-color-danger-pressed-background: #{$df-badge-solid-color-danger-pressed-background};
+    --#{$prefix}badge-solid-color-danger-pressed-foreground: #{$df-badge-solid-color-danger-pressed-foreground};
+    --#{$prefix}badge-solid-color-warning-default-background: #{$df-badge-solid-color-warning-default-background};
+    --#{$prefix}badge-solid-color-warning-default-foreground: #{$df-badge-solid-color-warning-default-foreground};
+    --#{$prefix}badge-solid-color-warning-hovered-background: #{$df-badge-solid-color-warning-hovered-background};
+    --#{$prefix}badge-solid-color-warning-hovered-foreground: #{$df-badge-solid-color-warning-hovered-foreground};
+    --#{$prefix}badge-solid-color-warning-pressed-background: #{$df-badge-solid-color-warning-pressed-background};
+    --#{$prefix}badge-solid-color-warning-pressed-foreground: #{$df-badge-solid-color-warning-pressed-foreground};
+    --#{$prefix}badge-solid-color-success-default-background: #{$df-badge-solid-color-success-default-background};
+    --#{$prefix}badge-solid-color-success-default-foreground: #{$df-badge-solid-color-success-default-foreground};
+    --#{$prefix}badge-solid-color-success-hovered-background: #{$df-badge-solid-color-success-hovered-background};
+    --#{$prefix}badge-solid-color-success-hovered-foreground: #{$df-badge-solid-color-success-hovered-foreground};
+    --#{$prefix}badge-solid-color-success-pressed-background: #{$df-badge-solid-color-success-pressed-background};
+    --#{$prefix}badge-solid-color-success-pressed-foreground: #{$df-badge-solid-color-success-pressed-foreground};
+    --#{$prefix}badge-solid-color-info-default-background: #{$df-badge-solid-color-info-default-background};
+    --#{$prefix}badge-solid-color-info-default-foreground: #{$df-badge-solid-color-info-default-foreground};
+    --#{$prefix}badge-solid-color-info-hovered-background: #{$df-badge-solid-color-info-hovered-background};
+    --#{$prefix}badge-solid-color-info-hovered-foreground: #{$df-badge-solid-color-info-hovered-foreground};
+    --#{$prefix}badge-solid-color-info-pressed-background: #{$df-badge-solid-color-info-pressed-background};
+    --#{$prefix}badge-solid-color-info-pressed-foreground: #{$df-badge-solid-color-info-pressed-foreground};
+    --#{$prefix}badge-solid-color-tip-default-background: #{$df-badge-solid-color-tip-default-background};
+    --#{$prefix}badge-solid-color-tip-default-foreground: #{$df-badge-solid-color-tip-default-foreground};
+    --#{$prefix}badge-solid-color-tip-hovered-background: #{$df-badge-solid-color-tip-hovered-background};
+    --#{$prefix}badge-solid-color-tip-hovered-foreground: #{$df-badge-solid-color-tip-hovered-foreground};
+    --#{$prefix}badge-solid-color-tip-pressed-background: #{$df-badge-solid-color-tip-pressed-background};
+    --#{$prefix}badge-solid-color-tip-pressed-foreground: #{$df-badge-solid-color-tip-pressed-foreground};
+    --#{$prefix}badge-solid-color-chromatic1-default-background: #{$df-badge-solid-color-chromatic1-default-background};
+    --#{$prefix}badge-solid-color-chromatic1-default-foreground: #{$df-badge-solid-color-chromatic1-default-foreground};
+    --#{$prefix}badge-solid-color-chromatic1-hovered-background: #{$df-badge-solid-color-chromatic1-hovered-background};
+    --#{$prefix}badge-solid-color-chromatic1-hovered-foreground: #{$df-badge-solid-color-chromatic1-hovered-foreground};
+    --#{$prefix}badge-solid-color-chromatic1-pressed-background: #{$df-badge-solid-color-chromatic1-pressed-background};
+    --#{$prefix}badge-solid-color-chromatic1-pressed-foreground: #{$df-badge-solid-color-chromatic1-pressed-foreground};
+    --#{$prefix}badge-solid-color-chromatic2-default-background: #{$df-badge-solid-color-chromatic2-default-background};
+    --#{$prefix}badge-solid-color-chromatic2-default-foreground: #{$df-badge-solid-color-chromatic2-default-foreground};
+    --#{$prefix}badge-solid-color-chromatic2-hovered-background: #{$df-badge-solid-color-chromatic2-hovered-background};
+    --#{$prefix}badge-solid-color-chromatic2-hovered-foreground: #{$df-badge-solid-color-chromatic2-hovered-foreground};
+    --#{$prefix}badge-solid-color-chromatic2-pressed-background: #{$df-badge-solid-color-chromatic2-pressed-background};
+    --#{$prefix}badge-solid-color-chromatic2-pressed-foreground: #{$df-badge-solid-color-chromatic2-pressed-foreground};
+    --#{$prefix}badge-solid-color-disabled-default-background: #{$df-badge-solid-color-disabled-default-background};
+    --#{$prefix}badge-solid-color-disabled-default-foreground: #{$df-badge-solid-color-disabled-default-foreground};
+    --#{$prefix}badge-soft-color-focus-main-border: #{$df-badge-soft-color-focus-main-border};
+    --#{$prefix}badge-soft-color-neutral-default-background: #{$df-badge-soft-color-neutral-default-background};
+    --#{$prefix}badge-soft-color-neutral-default-foreground: #{$df-badge-soft-color-neutral-default-foreground};
+    --#{$prefix}badge-soft-color-neutral-hovered-background: #{$df-badge-soft-color-neutral-hovered-background};
+    --#{$prefix}badge-soft-color-neutral-hovered-foreground: #{$df-badge-soft-color-neutral-hovered-foreground};
+    --#{$prefix}badge-soft-color-neutral-pressed-background: #{$df-badge-soft-color-neutral-pressed-background};
+    --#{$prefix}badge-soft-color-neutral-pressed-foreground: #{$df-badge-soft-color-neutral-pressed-foreground};
+    --#{$prefix}badge-soft-color-danger-default-background: #{$df-badge-soft-color-danger-default-background};
+    --#{$prefix}badge-soft-color-danger-default-foreground: #{$df-badge-soft-color-danger-default-foreground};
+    --#{$prefix}badge-soft-color-danger-hovered-background: #{$df-badge-soft-color-danger-hovered-background};
+    --#{$prefix}badge-soft-color-danger-hovered-foreground: #{$df-badge-soft-color-danger-hovered-foreground};
+    --#{$prefix}badge-soft-color-danger-pressed-background: #{$df-badge-soft-color-danger-pressed-background};
+    --#{$prefix}badge-soft-color-danger-pressed-foreground: #{$df-badge-soft-color-danger-pressed-foreground};
+    --#{$prefix}badge-soft-color-warning-default-background: #{$df-badge-soft-color-warning-default-background};
+    --#{$prefix}badge-soft-color-warning-default-foreground: #{$df-badge-soft-color-warning-default-foreground};
+    --#{$prefix}badge-soft-color-warning-hovered-background: #{$df-badge-soft-color-warning-hovered-background};
+    --#{$prefix}badge-soft-color-warning-hovered-foreground: #{$df-badge-soft-color-warning-hovered-foreground};
+    --#{$prefix}badge-soft-color-warning-pressed-background: #{$df-badge-soft-color-warning-pressed-background};
+    --#{$prefix}badge-soft-color-warning-pressed-foreground: #{$df-badge-soft-color-warning-pressed-foreground};
+    --#{$prefix}badge-soft-color-success-default-background: #{$df-badge-soft-color-success-default-background};
+    --#{$prefix}badge-soft-color-success-default-foreground: #{$df-badge-soft-color-success-default-foreground};
+    --#{$prefix}badge-soft-color-success-hovered-background: #{$df-badge-soft-color-success-hovered-background};
+    --#{$prefix}badge-soft-color-success-hovered-foreground: #{$df-badge-soft-color-success-hovered-foreground};
+    --#{$prefix}badge-soft-color-success-pressed-background: #{$df-badge-soft-color-success-pressed-background};
+    --#{$prefix}badge-soft-color-success-pressed-foreground: #{$df-badge-soft-color-success-pressed-foreground};
+    --#{$prefix}badge-soft-color-info-default-background: #{$df-badge-soft-color-info-default-background};
+    --#{$prefix}badge-soft-color-info-default-foreground: #{$df-badge-soft-color-info-default-foreground};
+    --#{$prefix}badge-soft-color-info-hovered-background: #{$df-badge-soft-color-info-hovered-background};
+    --#{$prefix}badge-soft-color-info-hovered-foreground: #{$df-badge-soft-color-info-hovered-foreground};
+    --#{$prefix}badge-soft-color-info-pressed-background: #{$df-badge-soft-color-info-pressed-background};
+    --#{$prefix}badge-soft-color-info-pressed-foreground: #{$df-badge-soft-color-info-pressed-foreground};
+    --#{$prefix}badge-soft-color-tip-default-background: #{$df-badge-soft-color-tip-default-background};
+    --#{$prefix}badge-soft-color-tip-default-foreground: #{$df-badge-soft-color-tip-default-foreground};
+    --#{$prefix}badge-soft-color-tip-hovered-background: #{$df-badge-soft-color-tip-hovered-background};
+    --#{$prefix}badge-soft-color-tip-hovered-foreground: #{$df-badge-soft-color-tip-hovered-foreground};
+    --#{$prefix}badge-soft-color-tip-pressed-background: #{$df-badge-soft-color-tip-pressed-background};
+    --#{$prefix}badge-soft-color-tip-pressed-foreground: #{$df-badge-soft-color-tip-pressed-foreground};
+    --#{$prefix}badge-soft-color-chromatic1-default-background: #{$df-badge-soft-color-chromatic1-default-background};
+    --#{$prefix}badge-soft-color-chromatic1-default-foreground: #{$df-badge-soft-color-chromatic1-default-foreground};
+    --#{$prefix}badge-soft-color-chromatic1-hovered-background: #{$df-badge-soft-color-chromatic1-hovered-background};
+    --#{$prefix}badge-soft-color-chromatic1-hovered-foreground: #{$df-badge-soft-color-chromatic1-hovered-foreground};
+    --#{$prefix}badge-soft-color-chromatic1-pressed-background: #{$df-badge-soft-color-chromatic1-pressed-background};
+    --#{$prefix}badge-soft-color-chromatic1-pressed-foreground: #{$df-badge-soft-color-chromatic1-pressed-foreground};
+    --#{$prefix}badge-soft-color-chromatic2-default-background: #{$df-badge-soft-color-chromatic2-default-background};
+    --#{$prefix}badge-soft-color-chromatic2-default-foreground: #{$df-badge-soft-color-chromatic2-default-foreground};
+    --#{$prefix}badge-soft-color-chromatic2-hovered-background: #{$df-badge-soft-color-chromatic2-hovered-background};
+    --#{$prefix}badge-soft-color-chromatic2-hovered-foreground: #{$df-badge-soft-color-chromatic2-hovered-foreground};
+    --#{$prefix}badge-soft-color-chromatic2-pressed-background: #{$df-badge-soft-color-chromatic2-pressed-background};
+    --#{$prefix}badge-soft-color-chromatic2-pressed-foreground: #{$df-badge-soft-color-chromatic2-pressed-foreground};
+    --#{$prefix}badge-soft-color-disabled-default-background: #{$df-badge-soft-color-disabled-default-background};
+    --#{$prefix}badge-soft-color-disabled-default-foreground: #{$df-badge-soft-color-disabled-default-foreground};
+    --#{$prefix}badge-soft-color-disabled-default-border: #{$df-badge-soft-color-disabled-default-border};
+    --#{$prefix}badge-outline-color-focus-main-border: #{$df-badge-outline-color-focus-main-border};
+    --#{$prefix}badge-outline-color-neutral-default-border: #{$df-badge-outline-color-neutral-default-border};
+    --#{$prefix}badge-outline-color-neutral-default-foreground: #{$df-badge-outline-color-neutral-default-foreground};
+    --#{$prefix}badge-outline-color-neutral-hovered-border: #{$df-badge-outline-color-neutral-hovered-border};
+    --#{$prefix}badge-outline-color-neutral-hovered-background: #{$df-badge-outline-color-neutral-hovered-background};
+    --#{$prefix}badge-outline-color-neutral-hovered-foreground: #{$df-badge-outline-color-neutral-hovered-foreground};
+    --#{$prefix}badge-outline-color-neutral-pressed-border: #{$df-badge-outline-color-neutral-pressed-border};
+    --#{$prefix}badge-outline-color-neutral-pressed-background: #{$df-badge-outline-color-neutral-pressed-background};
+    --#{$prefix}badge-outline-color-neutral-pressed-foreground: #{$df-badge-outline-color-neutral-pressed-foreground};
+    --#{$prefix}badge-outline-color-danger-default-border: #{$df-badge-outline-color-danger-default-border};
+    --#{$prefix}badge-outline-color-danger-default-foreground: #{$df-badge-outline-color-danger-default-foreground};
+    --#{$prefix}badge-outline-color-danger-hovered-border: #{$df-badge-outline-color-danger-hovered-border};
+    --#{$prefix}badge-outline-color-danger-hovered-background: #{$df-badge-outline-color-danger-hovered-background};
+    --#{$prefix}badge-outline-color-danger-hovered-foreground: #{$df-badge-outline-color-danger-hovered-foreground};
+    --#{$prefix}badge-outline-color-danger-pressed-border: #{$df-badge-outline-color-danger-pressed-border};
+    --#{$prefix}badge-outline-color-danger-pressed-background: #{$df-badge-outline-color-danger-pressed-background};
+    --#{$prefix}badge-outline-color-danger-pressed-foreground: #{$df-badge-outline-color-danger-pressed-foreground};
+    --#{$prefix}badge-outline-color-warning-default-border: #{$df-badge-outline-color-warning-default-border};
+    --#{$prefix}badge-outline-color-warning-default-foreground: #{$df-badge-outline-color-warning-default-foreground};
+    --#{$prefix}badge-outline-color-warning-hovered-border: #{$df-badge-outline-color-warning-hovered-border};
+    --#{$prefix}badge-outline-color-warning-hovered-background: #{$df-badge-outline-color-warning-hovered-background};
+    --#{$prefix}badge-outline-color-warning-hovered-foreground: #{$df-badge-outline-color-warning-hovered-foreground};
+    --#{$prefix}badge-outline-color-warning-pressed-border: #{$df-badge-outline-color-warning-pressed-border};
+    --#{$prefix}badge-outline-color-warning-pressed-background: #{$df-badge-outline-color-warning-pressed-background};
+    --#{$prefix}badge-outline-color-warning-pressed-foreground: #{$df-badge-outline-color-warning-pressed-foreground};
+    --#{$prefix}badge-outline-color-success-default-border: #{$df-badge-outline-color-success-default-border};
+    --#{$prefix}badge-outline-color-success-default-foreground: #{$df-badge-outline-color-success-default-foreground};
+    --#{$prefix}badge-outline-color-success-hovered-border: #{$df-badge-outline-color-success-hovered-border};
+    --#{$prefix}badge-outline-color-success-hovered-background: #{$df-badge-outline-color-success-hovered-background};
+    --#{$prefix}badge-outline-color-success-hovered-foreground: #{$df-badge-outline-color-success-hovered-foreground};
+    --#{$prefix}badge-outline-color-success-pressed-border: #{$df-badge-outline-color-success-pressed-border};
+    --#{$prefix}badge-outline-color-success-pressed-background: #{$df-badge-outline-color-success-pressed-background};
+    --#{$prefix}badge-outline-color-success-pressed-foreground: #{$df-badge-outline-color-success-pressed-foreground};
+    --#{$prefix}badge-outline-color-info-default-border: #{$df-badge-outline-color-info-default-border};
+    --#{$prefix}badge-outline-color-info-default-foreground: #{$df-badge-outline-color-info-default-foreground};
+    --#{$prefix}badge-outline-color-info-hovered-border: #{$df-badge-outline-color-info-hovered-border};
+    --#{$prefix}badge-outline-color-info-hovered-background: #{$df-badge-outline-color-info-hovered-background};
+    --#{$prefix}badge-outline-color-info-hovered-foreground: #{$df-badge-outline-color-info-hovered-foreground};
+    --#{$prefix}badge-outline-color-info-pressed-border: #{$df-badge-outline-color-info-pressed-border};
+    --#{$prefix}badge-outline-color-info-pressed-background: #{$df-badge-outline-color-info-pressed-background};
+    --#{$prefix}badge-outline-color-info-pressed-foreground: #{$df-badge-outline-color-info-pressed-foreground};
+    --#{$prefix}badge-outline-color-tip-default-border: #{$df-badge-outline-color-tip-default-border};
+    --#{$prefix}badge-outline-color-tip-default-foreground: #{$df-badge-outline-color-tip-default-foreground};
+    --#{$prefix}badge-outline-color-tip-hovered-border: #{$df-badge-outline-color-tip-hovered-border};
+    --#{$prefix}badge-outline-color-tip-hovered-background: #{$df-badge-outline-color-tip-hovered-background};
+    --#{$prefix}badge-outline-color-tip-hovered-foreground: #{$df-badge-outline-color-tip-hovered-foreground};
+    --#{$prefix}badge-outline-color-tip-pressed-border: #{$df-badge-outline-color-tip-pressed-border};
+    --#{$prefix}badge-outline-color-tip-pressed-background: #{$df-badge-outline-color-tip-pressed-background};
+    --#{$prefix}badge-outline-color-tip-pressed-foreground: #{$df-badge-outline-color-tip-pressed-foreground};
+    --#{$prefix}badge-outline-color-chromatic1-default-border: #{$df-badge-outline-color-chromatic1-default-border};
+    --#{$prefix}badge-outline-color-chromatic1-default-foreground: #{$df-badge-outline-color-chromatic1-default-foreground};
+    --#{$prefix}badge-outline-color-chromatic1-hovered-border: #{$df-badge-outline-color-chromatic1-hovered-border};
+    --#{$prefix}badge-outline-color-chromatic1-hovered-background: #{$df-badge-outline-color-chromatic1-hovered-background};
+    --#{$prefix}badge-outline-color-chromatic1-hovered-foreground: #{$df-badge-outline-color-chromatic1-hovered-foreground};
+    --#{$prefix}badge-outline-color-chromatic1-pressed-border: #{$df-badge-outline-color-chromatic1-pressed-border};
+    --#{$prefix}badge-outline-color-chromatic1-pressed-background: #{$df-badge-outline-color-chromatic1-pressed-background};
+    --#{$prefix}badge-outline-color-chromatic1-pressed-foreground: #{$df-badge-outline-color-chromatic1-pressed-foreground};
+    --#{$prefix}badge-outline-color-chromatic2-default-border: #{$df-badge-outline-color-chromatic2-default-border};
+    --#{$prefix}badge-outline-color-chromatic2-default-foreground: #{$df-badge-outline-color-chromatic2-default-foreground};
+    --#{$prefix}badge-outline-color-chromatic2-hovered-border: #{$df-badge-outline-color-chromatic2-hovered-border};
+    --#{$prefix}badge-outline-color-chromatic2-hovered-background: #{$df-badge-outline-color-chromatic2-hovered-background};
+    --#{$prefix}badge-outline-color-chromatic2-hovered-foreground: #{$df-badge-outline-color-chromatic2-hovered-foreground};
+    --#{$prefix}badge-outline-color-chromatic2-pressed-border: #{$df-badge-outline-color-chromatic2-pressed-border};
+    --#{$prefix}badge-outline-color-chromatic2-pressed-background: #{$df-badge-outline-color-chromatic2-pressed-background};
+    --#{$prefix}badge-outline-color-chromatic2-pressed-foreground: #{$df-badge-outline-color-chromatic2-pressed-foreground};
+    --#{$prefix}badge-outline-color-disabled-default-border: #{$df-badge-outline-color-disabled-default-border};
+    --#{$prefix}badge-outline-color-disabled-default-foreground: #{$df-badge-outline-color-disabled-default-foreground};
+  }
+  .navbar {
+    --#{$prefix}navbar-color-inert-main-foreground: #{$df-navbar-color-inert-main-foreground};
+    --#{$prefix}navbar-color-inert-main-background: #{$df-navbar-color-inert-main-background};
+    --#{$prefix}navbar-color-inert-alt-foreground: #{$df-navbar-color-inert-alt-foreground};
+    --#{$prefix}navbar-color-inert-alt-background: #{$df-navbar-color-inert-alt-background};
+    --#{$prefix}navbar-color-main-default-border: #{$df-navbar-color-main-default-border};
+    --#{$prefix}navbar-color-main-default-foreground: #{$df-navbar-color-main-default-foreground};
+    --#{$prefix}navbar-color-main-hovered-border: #{$df-navbar-color-main-hovered-border};
+    --#{$prefix}navbar-color-main-hovered-foreground: #{$df-navbar-color-main-hovered-foreground};
+    --#{$prefix}navbar-color-main-hovered-background: #{$df-navbar-color-main-hovered-background};
+    --#{$prefix}navbar-color-main-pressed-border: #{$df-navbar-color-main-pressed-border};
+    --#{$prefix}navbar-color-main-pressed-foreground: #{$df-navbar-color-main-pressed-foreground};
+    --#{$prefix}navbar-color-main-pressed-background: #{$df-navbar-color-main-pressed-background};
+    --#{$prefix}navbar-color-main-active-border: #{$df-navbar-color-main-active-border};
+    --#{$prefix}navbar-color-main-active-foreground: #{$df-navbar-color-main-active-foreground};
+    --#{$prefix}navbar-color-main-activeHovered-border: #{$df-navbar-color-main-activeHovered-border};
+    --#{$prefix}navbar-color-main-activeHovered-foreground: #{$df-navbar-color-main-activeHovered-foreground};
+    --#{$prefix}navbar-color-main-activeHovered-background: #{$df-navbar-color-main-activeHovered-background};
+    --#{$prefix}navbar-color-main-activePressed-border: #{$df-navbar-color-main-activePressed-border};
+    --#{$prefix}navbar-color-main-activePressed-foreground: #{$df-navbar-color-main-activePressed-foreground};
+    --#{$prefix}navbar-color-alt-default-border: #{$df-navbar-color-alt-default-border};
+    --#{$prefix}navbar-color-alt-default-foreground: #{$df-navbar-color-alt-default-foreground};
+    --#{$prefix}navbar-color-alt-hovered-border: #{$df-navbar-color-alt-hovered-border};
+    --#{$prefix}navbar-color-alt-hovered-foreground: #{$df-navbar-color-alt-hovered-foreground};
+    --#{$prefix}navbar-color-alt-hovered-background: #{$df-navbar-color-alt-hovered-background};
+    --#{$prefix}navbar-color-alt-pressed-border: #{$df-navbar-color-alt-pressed-border};
+    --#{$prefix}navbar-color-alt-pressed-foreground: #{$df-navbar-color-alt-pressed-foreground};
+    --#{$prefix}navbar-color-alt-pressed-background: #{$df-navbar-color-alt-pressed-background};
+    --#{$prefix}navbar-color-alt-active-border: #{$df-navbar-color-alt-active-border};
+    --#{$prefix}navbar-color-alt-active-foreground: #{$df-navbar-color-alt-active-foreground};
+    --#{$prefix}navbar-color-alt-activeHovered-border: #{$df-navbar-color-alt-activeHovered-border};
+    --#{$prefix}navbar-color-alt-activeHovered-foreground: #{$df-navbar-color-alt-activeHovered-foreground};
+    --#{$prefix}navbar-color-alt-activeHovered-background: #{$df-navbar-color-alt-activeHovered-background};
+    --#{$prefix}navbar-color-alt-activePressed-border: #{$df-navbar-color-alt-activePressed-border};
+    --#{$prefix}navbar-color-alt-activePressed-foreground: #{$df-navbar-color-alt-activePressed-foreground};
+    --#{$prefix}navbar-color-dropdown-main-default-foreground: #{$df-navbar-color-dropdown-main-default-foreground};
+    --#{$prefix}navbar-color-dropdown-main-default-border: #{$df-navbar-color-dropdown-main-default-border};
+    --#{$prefix}navbar-color-dropdown-main-hovered-foreground: #{$df-navbar-color-dropdown-main-hovered-foreground};
+    --#{$prefix}navbar-color-dropdown-main-hovered-background: #{$df-navbar-color-dropdown-main-hovered-background};
+    --#{$prefix}navbar-color-dropdown-main-hovered-border: #{$df-navbar-color-dropdown-main-hovered-border};
+    --#{$prefix}navbar-color-dropdown-main-pressed-foreground: #{$df-navbar-color-dropdown-main-pressed-foreground};
+    --#{$prefix}navbar-color-dropdown-main-pressed-background: #{$df-navbar-color-dropdown-main-pressed-background};
+    --#{$prefix}navbar-color-dropdown-main-pressed-border: #{$df-navbar-color-dropdown-main-pressed-border};
+    --#{$prefix}navbar-color-dropdown-main-active-foreground: #{$df-navbar-color-dropdown-main-active-foreground};
+    --#{$prefix}navbar-color-dropdown-main-active-background: #{$df-navbar-color-dropdown-main-active-background};
+    --#{$prefix}navbar-color-dropdown-main-active-border: #{$df-navbar-color-dropdown-main-active-border};
+    --#{$prefix}navbar-color-dropdown-main-activeHovered-foreground: #{$df-navbar-color-dropdown-main-activeHovered-foreground};
+    --#{$prefix}navbar-color-dropdown-main-activeHovered-background: #{$df-navbar-color-dropdown-main-activeHovered-background};
+    --#{$prefix}navbar-color-dropdown-main-activeHovered-border: #{$df-navbar-color-dropdown-main-activeHovered-border};
+    --#{$prefix}navbar-color-dropdown-main-activePressed-foreground: #{$df-navbar-color-dropdown-main-activePressed-foreground};
+    --#{$prefix}navbar-color-dropdown-main-activePressed-background: #{$df-navbar-color-dropdown-main-activePressed-background};
+    --#{$prefix}navbar-color-dropdown-main-activePressed-border: #{$df-navbar-color-dropdown-main-activePressed-border};
+    --#{$prefix}navbar-color-dropdown-alt-default-foreground: #{$df-navbar-color-dropdown-alt-default-foreground};
+    --#{$prefix}navbar-color-dropdown-alt-default-border: #{$df-navbar-color-dropdown-alt-default-border};
+    --#{$prefix}navbar-color-dropdown-alt-hovered-foreground: #{$df-navbar-color-dropdown-alt-hovered-foreground};
+    --#{$prefix}navbar-color-dropdown-alt-hovered-background: #{$df-navbar-color-dropdown-alt-hovered-background};
+    --#{$prefix}navbar-color-dropdown-alt-hovered-border: #{$df-navbar-color-dropdown-alt-hovered-border};
+    --#{$prefix}navbar-color-dropdown-alt-pressed-foreground: #{$df-navbar-color-dropdown-alt-pressed-foreground};
+    --#{$prefix}navbar-color-dropdown-alt-pressed-background: #{$df-navbar-color-dropdown-alt-pressed-background};
+    --#{$prefix}navbar-color-dropdown-alt-pressed-border: #{$df-navbar-color-dropdown-alt-pressed-border};
+    --#{$prefix}navbar-color-dropdown-alt-active-foreground: #{$df-navbar-color-dropdown-alt-active-foreground};
+    --#{$prefix}navbar-color-dropdown-alt-active-background: #{$df-navbar-color-dropdown-alt-active-background};
+    --#{$prefix}navbar-color-dropdown-alt-active-border: #{$df-navbar-color-dropdown-alt-active-border};
+    --#{$prefix}navbar-color-dropdown-alt-activeHovered-foreground: #{$df-navbar-color-dropdown-alt-activeHovered-foreground};
+    --#{$prefix}navbar-color-dropdown-alt-activeHovered-background: #{$df-navbar-color-dropdown-alt-activeHovered-background};
+    --#{$prefix}navbar-color-dropdown-alt-activeHovered-border: #{$df-navbar-color-dropdown-alt-activeHovered-border};
+    --#{$prefix}navbar-color-dropdown-alt-activePressed-foreground: #{$df-navbar-color-dropdown-alt-activePressed-foreground};
+    --#{$prefix}navbar-color-dropdown-alt-activePressed-background: #{$df-navbar-color-dropdown-alt-activePressed-background};
+    --#{$prefix}navbar-color-dropdown-alt-activePressed-border: #{$df-navbar-color-dropdown-alt-activePressed-border};
+    --#{$prefix}navbar-color-productName-main-default-foreground: #{$df-navbar-color-productName-main-default-foreground};
+    --#{$prefix}navbar-color-productName-main-default-border: #{$df-navbar-color-productName-main-default-border};
+    --#{$prefix}navbar-color-productName-main-hovered-foreground: #{$df-navbar-color-productName-main-hovered-foreground};
+    --#{$prefix}navbar-color-productName-main-hovered-background: #{$df-navbar-color-productName-main-hovered-background};
+    --#{$prefix}navbar-color-productName-main-hovered-border: #{$df-navbar-color-productName-main-hovered-border};
+    --#{$prefix}navbar-color-productName-main-pressed-foreground: #{$df-navbar-color-productName-main-pressed-foreground};
+    --#{$prefix}navbar-color-productName-main-pressed-background: #{$df-navbar-color-productName-main-pressed-background};
+    --#{$prefix}navbar-color-productName-main-pressed-border: #{$df-navbar-color-productName-main-pressed-border};
+    --#{$prefix}navbar-color-productName-alt-default-foreground: #{$df-navbar-color-productName-alt-default-foreground};
+    --#{$prefix}navbar-color-productName-alt-default-border: #{$df-navbar-color-productName-alt-default-border};
+    --#{$prefix}navbar-color-productName-alt-hovered-foreground: #{$df-navbar-color-productName-alt-hovered-foreground};
+    --#{$prefix}navbar-color-productName-alt-hovered-background: #{$df-navbar-color-productName-alt-hovered-background};
+    --#{$prefix}navbar-color-productName-alt-hovered-border: #{$df-navbar-color-productName-alt-hovered-border};
+    --#{$prefix}navbar-color-productName-alt-pressed-foreground: #{$df-navbar-color-productName-alt-pressed-foreground};
+    --#{$prefix}navbar-color-productName-alt-pressed-background: #{$df-navbar-color-productName-alt-pressed-background};
+    --#{$prefix}navbar-color-productName-alt-pressed-border: #{$df-navbar-color-productName-alt-pressed-border};
+    --#{$prefix}navbar-color-inert-subtext-foreground: #{$df-navbar-color-inert-subtext-foreground};
+    --#{$prefix}navbar-color-disabled-main-foreground: #{$df-navbar-color-disabled-main-foreground};
+    --#{$prefix}navbar-color-disabled-main-border: #{$df-navbar-color-disabled-main-border};
+    --#{$prefix}navbar-color-disabled-alt-foreground: #{$df-navbar-color-disabled-alt-foreground};
+    --#{$prefix}navbar-color-disabled-alt-border: #{$df-navbar-color-disabled-alt-border};
+  }
+  .df-app-footer {
+    --#{$prefix}footer-color-logo-foreground: #{$df-footer-color-logo-foreground};
+    --#{$prefix}footer-color-inert-neutral-border: #{$df-footer-color-inert-neutral-border};
+    --#{$prefix}footer-color-inert-neutral-background: #{$df-footer-color-inert-neutral-background};
+    --#{$prefix}footer-color-inert-neutral-foreground: #{$df-footer-color-inert-neutral-foreground};
+    --#{$prefix}footer-color-link-primary-default-border: #{$df-footer-color-link-primary-default-border};
+    --#{$prefix}footer-color-link-primary-default-foreground: #{$df-footer-color-link-primary-default-foreground};
+    --#{$prefix}footer-color-link-primary-hovered-background: #{$df-footer-color-link-primary-hovered-background};
+    --#{$prefix}footer-color-link-primary-hovered-border: #{$df-footer-color-link-primary-hovered-border};
+    --#{$prefix}footer-color-link-primary-hovered-foreground: #{$df-footer-color-link-primary-hovered-foreground};
+    --#{$prefix}footer-color-link-primary-pressed-background: #{$df-footer-color-link-primary-pressed-background};
+    --#{$prefix}footer-color-link-primary-pressed-border: #{$df-footer-color-link-primary-pressed-border};
+    --#{$prefix}footer-color-link-primary-pressed-foreground: #{$df-footer-color-link-primary-pressed-foreground};
+    --#{$prefix}footer-color-link-visited-default-foreground: #{$df-footer-color-link-visited-default-foreground};
+    --#{$prefix}footer-color-link-visited-hovered-background: #{$df-footer-color-link-visited-hovered-background};
+    --#{$prefix}footer-color-link-visited-hovered-foreground: #{$df-footer-color-link-visited-hovered-foreground};
+    --#{$prefix}footer-color-link-visited-pressed-background: #{$df-footer-color-link-visited-pressed-background};
+    --#{$prefix}footer-color-link-visited-pressed-foreground: #{$df-footer-color-link-visited-pressed-foreground};
+  }
+  a,
+  .df-app-footer,
+  button.df-collapse {
+    --#{$prefix}link-color-primary-default-border: #{$df-link-color-primary-default-border};
+    --#{$prefix}link-color-primary-default-foreground: #{$df-link-color-primary-default-foreground};
+    --#{$prefix}link-color-primary-hovered-border: #{$df-link-color-primary-hovered-border};
+    --#{$prefix}link-color-primary-hovered-foreground: #{$df-link-color-primary-hovered-foreground};
+    --#{$prefix}link-color-primary-hovered-background: #{$df-link-color-primary-hovered-background};
+    --#{$prefix}link-color-primary-pressed-border: #{$df-link-color-primary-pressed-border};
+    --#{$prefix}link-color-primary-pressed-foreground: #{$df-link-color-primary-pressed-foreground};
+    --#{$prefix}link-color-primary-pressed-background: #{$df-link-color-primary-pressed-background};
+    --#{$prefix}link-color-neutral-default-border: #{$df-link-color-neutral-default-border};
+    --#{$prefix}link-color-neutral-default-foreground: #{$df-link-color-neutral-default-foreground};
+    --#{$prefix}link-color-neutral-hovered-border: #{$df-link-color-neutral-hovered-border};
+    --#{$prefix}link-color-neutral-hovered-foreground: #{$df-link-color-neutral-hovered-foreground};
+    --#{$prefix}link-color-neutral-hovered-background: #{$df-link-color-neutral-hovered-background};
+    --#{$prefix}link-color-neutral-pressed-border: #{$df-link-color-neutral-pressed-border};
+    --#{$prefix}link-color-neutral-pressed-foreground: #{$df-link-color-neutral-pressed-foreground};
+    --#{$prefix}link-color-neutral-pressed-background: #{$df-link-color-neutral-pressed-background};
+    --#{$prefix}link-color-disabled-foreground: #{$df-link-color-disabled-foreground};
+    --#{$prefix}link-color-visited-default-foreground: #{$df-link-color-visited-default-foreground};
+    --#{$prefix}link-color-visited-hovered-foreground: #{$df-link-color-visited-hovered-foreground};
+    --#{$prefix}link-color-visited-hovered-background: #{$df-link-color-visited-hovered-background};
+    --#{$prefix}link-color-visited-pressed-foreground: #{$df-link-color-visited-pressed-foreground};
+    --#{$prefix}link-color-visited-pressed-background: #{$df-link-color-visited-pressed-background};
+  }
+}