@koobiq/components 16.0.0-beta.1

package/core/styles/theming/_components-theming.scss

@@ -0,0 +1,1218 @@
+@function kbq-components-theme($tokens, $scheme) {
+    $alert: (
+        contrast: (
+            background: map-get($tokens, 'alert-#{$scheme}-contrast-container-background'),
+            title: map-get($tokens, 'alert-#{$scheme}-contrast-container-title'),
+            text: map-get($tokens, 'alert-#{$scheme}-contrast-container-text')
+        ),
+        error: (
+            background: map-get($tokens, 'alert-#{$scheme}-error-container-background'),
+            title: map-get($tokens, 'alert-#{$scheme}-error-container-title'),
+            text: map-get($tokens, 'alert-#{$scheme}-error-container-text')
+        )
+    );
+
+    $popup: (
+        shadow: map-get($tokens, 'popup-#{$scheme}-shadow'),
+        border: map-get($tokens, 'popup-#{$scheme}-border'),
+
+        background: map-get($tokens, 'popup-#{$scheme}-background'),
+        footer-background: map-get($tokens, 'popup-#{$scheme}-footer-background')
+    );
+
+    $badge: (
+        filled: (
+            fade-off: (
+                success: (
+                    color: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-success-color'),
+                    background: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-success-background'),
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-success-caption')
+                ),
+                warning: (
+                    color: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-warning-color'),
+                    background: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-warning-background'),
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-warning-caption')
+                ),
+                error: (
+                    color: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-error-color'),
+                    background: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-error-background'),
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-error-caption')
+                )
+            ),
+            fade-on: (
+                theme: (
+                    color: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-theme-color'),
+                    background: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-theme-background'),
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-theme-caption')
+                ),
+                contrast: (
+                    color: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-contrast-color'),
+                    background: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-contrast-background'),
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-contrast-caption')
+                ),
+                success: (
+                    color: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-success-color'),
+                    background: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-success-background'),
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-success-caption')
+                ),
+                warning: (
+                    color: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-warning-color'),
+                    background: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-warning-background'),
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-warning-caption')
+                ),
+                error: (
+                    color: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-error-color'),
+                    background: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-error-background'),
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-error-caption')
+                )
+            )
+        ),
+        outline: (
+            fade-on: (
+                theme: (
+                    color: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-theme-color'),
+                    background: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-theme-background'),
+                    border: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-theme-border'),
+                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-theme-caption')
+                ),
+                contrast: (
+                    color: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-contrast-color'),
+                    background: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-contrast-background'),
+                    border: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-contrast-border'),
+                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-contrast-caption')
+                ),
+                success: (
+                    color: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-success-color'),
+                    background: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-success-background'),
+                    border: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-success-border'),
+                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-success-caption')
+                ),
+                warning: (
+                    color: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-warning-color'),
+                    background: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-warning-background'),
+                    border: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-warning-border'),
+                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-warning-caption')
+                ),
+                error: (
+                    color: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-error-color'),
+                    background: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-error-background'),
+                    border: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-error-border'),
+                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-error-caption')
+                )
+            )
+        )
+    );
+
+    $button: (
+        filled: (
+            contrast-fade-off: (
+                border: map-get($tokens, 'button-#{$scheme}-filled-contrast-fade-off-border'),
+                foreground: map-get($tokens, 'button-#{$scheme}-filled-contrast-fade-off-foreground'),
+                background: map-get($tokens, 'button-#{$scheme}-filled-contrast-fade-off-background'),
+                left-icon: map-get($tokens, 'button-#{$scheme}-filled-contrast-fade-off-left-icon'),
+                right-icon: map-get($tokens, 'button-#{$scheme}-filled-contrast-fade-off-right-icon'),
+
+                states_hover_background: map-get(
+                    $tokens, 'button-#{$scheme}-filled-contrast-fade-off-states-hover-background'
+                ),
+                states_active_background: map-get(
+                    $tokens, 'button-#{$scheme}-filled-contrast-fade-off-states-active-background'
+                ),
+                states_disabled_foreground: map-get(
+                    $tokens, 'button-#{$scheme}-filled-contrast-fade-off-states-disabled-foreground'
+                ),
+                states_disabled_background: map-get(
+                    $tokens, 'button-#{$scheme}-filled-contrast-fade-off-states-disabled-background'
+                ),
+                states_disabled_left-icon: map-get(
+                    $tokens, 'button-#{$scheme}-filled-contrast-fade-off-states-disabled-left-icon'
+                ),
+                states_disabled_right-icon: map-get(
+                    $tokens, 'button-#{$scheme}-filled-contrast-fade-off-states-disabled-right-icon'
+                )
+            ),
+            contrast-fade-on: (
+                border: map-get($tokens, 'button-#{$scheme}-filled-contrast-fade-on-border'),
+                foreground: map-get($tokens, 'button-#{$scheme}-filled-contrast-fade-on-foreground'),
+                background: map-get($tokens, 'button-#{$scheme}-filled-contrast-fade-on-background'),
+                left-icon: map-get($tokens, 'button-#{$scheme}-filled-contrast-fade-on-left-icon'),
+                right-icon: map-get($tokens, 'button-#{$scheme}-filled-contrast-fade-on-right-icon'),
+
+                states_hover_background: map-get(
+                    $tokens, 'button-#{$scheme}-filled-contrast-fade-on-states-hover-background'
+                ),
+                states_active_background: map-get(
+                    $tokens, 'button-#{$scheme}-filled-contrast-fade-on-states-active-background'
+                ),
+                states_disabled_foreground: map-get(
+                    $tokens, 'button-#{$scheme}-filled-contrast-fade-on-states-disabled-foreground'
+                ),
+                states_disabled_background: map-get(
+                    $tokens, 'button-#{$scheme}-filled-contrast-fade-on-states-disabled-background'
+                ),
+                states_disabled_left-icon: map-get(
+                    $tokens, 'button-#{$scheme}-filled-contrast-fade-on-states-disabled-left-icon'
+                ),
+                states_disabled_right-icon: map-get(
+                    $tokens, 'button-#{$scheme}-filled-contrast-fade-on-states-disabled-right-icon'
+                )
+            )
+        ),
+        outline: (
+            theme-fade-on: (
+                border: map-get($tokens, 'button-#{$scheme}-outline-theme-fade-on-border'),
+                foreground: map-get($tokens, 'button-#{$scheme}-outline-theme-fade-on-foreground'),
+                background: map-get($tokens, 'button-#{$scheme}-outline-theme-fade-on-background'),
+                left-icon: map-get($tokens, 'button-#{$scheme}-outline-theme-fade-on-left-icon'),
+                right-icon: map-get($tokens, 'button-#{$scheme}-outline-theme-fade-on-right-icon'),
+
+                states_hover_background: map-get(
+                    $tokens, 'button-#{$scheme}-outline-theme-fade-on-states-hover-background'
+                ),
+                states_active_background: map-get(
+                    $tokens, 'button-#{$scheme}-outline-theme-fade-on-states-active-background'
+                ),
+                states_disabled_border: map-get(
+                    $tokens, 'button-#{$scheme}-outline-theme-fade-on-states-disabled-border'
+                ),
+                states_disabled_foreground: map-get(
+                    $tokens, 'button-#{$scheme}-outline-theme-fade-on-states-disabled-foreground'
+                ),
+                states_disabled_left-icon: map-get(
+                    $tokens, 'button-#{$scheme}-outline-theme-fade-on-states-disabled-left-icon'
+                ),
+                states_disabled_right-icon: map-get(
+                    $tokens, 'button-#{$scheme}-outline-theme-fade-on-states-disabled-right-icon'
+                )
+            ),
+            contrast-fade-on: (
+                border: map-get($tokens, 'button-#{$scheme}-outline-contrast-fade-on-border'),
+                foreground: map-get($tokens, 'button-#{$scheme}-outline-contrast-fade-on-foreground'),
+                background: map-get($tokens, 'button-#{$scheme}-outline-contrast-fade-on-background'),
+                left-icon: map-get($tokens, 'button-#{$scheme}-outline-contrast-fade-on-left-icon'),
+                right-icon: map-get($tokens, 'button-#{$scheme}-outline-contrast-fade-on-right-icon'),
+
+                states_hover_background: map-get(
+                    $tokens, 'button-#{$scheme}-outline-contrast-fade-on-states-hover-background'
+                ),
+                states_active_background: map-get(
+                    $tokens, 'button-#{$scheme}-outline-contrast-fade-on-states-active-background'
+                ),
+                states_disabled_border: map-get(
+                    $tokens, 'button-#{$scheme}-outline-contrast-fade-on-states-disabled-border'
+                ),
+                states_disabled_foreground: map-get(
+                    $tokens, 'button-#{$scheme}-outline-contrast-fade-on-states-disabled-foreground'
+                ),
+                states_disabled_left-icon: map-get(
+                    $tokens, 'button-#{$scheme}-outline-contrast-fade-on-states-disabled-left-icon'
+                ),
+                states_disabled_right-icon: map-get(
+                    $tokens, 'button-#{$scheme}-outline-contrast-fade-on-states-disabled-right-icon'
+                )
+            )
+        ),
+        transparent: (
+            theme: (
+                border: map-get($tokens, 'button-#{$scheme}-transparent-theme-fade-on-border'),
+                foreground: map-get($tokens, 'button-#{$scheme}-transparent-theme-fade-on-foreground'),
+                background: map-get($tokens, 'button-#{$scheme}-transparent-theme-fade-on-background'),
+                left-icon: map-get($tokens, 'button-#{$scheme}-transparent-theme-fade-on-left-icon'),
+                right-icon: map-get($tokens, 'button-#{$scheme}-transparent-theme-fade-on-right-icon'),
+
+                states_hover_background: map-get(
+                    $tokens, 'button-#{$scheme}-transparent-theme-fade-on-states-hover-background'
+                ),
+                states_active_background: map-get(
+                    $tokens, 'button-#{$scheme}-transparent-theme-fade-on-states-active-background'
+                ),
+                states_disabled_foreground: map-get(
+                    $tokens, 'button-#{$scheme}-transparent-theme-fade-on-states-disabled-foreground'
+                ),
+                states_disabled_left-icon: map-get(
+                    $tokens, 'button-#{$scheme}-transparent-theme-fade-on-states-disabled-left-icon'
+                ),
+                states_disabled_right-icon: map-get(
+                    $tokens, 'button-#{$scheme}-transparent-theme-fade-on-states-disabled-right-icon'
+                )
+            ),
+            contrast: (
+                border: map-get($tokens, 'button-#{$scheme}-transparent-contrast-fade-on-border'),
+                foreground: map-get($tokens, 'button-#{$scheme}-transparent-contrast-fade-on-foreground'),
+                background: map-get($tokens, 'button-#{$scheme}-transparent-contrast-fade-on-background'),
+                left-icon: map-get($tokens, 'button-#{$scheme}-transparent-contrast-fade-on-left-icon'),
+                right-icon: map-get($tokens, 'button-#{$scheme}-transparent-contrast-fade-on-right-icon'),
+
+                states_hover_background: map-get(
+                    $tokens, 'button-#{$scheme}-transparent-contrast-fade-on-states-hover-background'
+                ),
+                states_active_background: map-get(
+                    $tokens, 'button-#{$scheme}-transparent-contrast-fade-on-states-active-background'
+                ),
+                states_disabled_foreground: map-get(
+                    $tokens, 'button-#{$scheme}-transparent-contrast-fade-on-states-disabled-foreground'
+                ),
+                states_disabled_left-icon: map-get(
+                    $tokens, 'button-#{$scheme}-transparent-contrast-fade-on-states-disabled-left-icon'
+                ),
+                states_disabled_right-icon: map-get(
+                    $tokens, 'button-#{$scheme}-transparent-contrast-fade-on-states-disabled-right-icon'
+                )
+            )
+        )
+    );
+
+    $card: (
+        error: (
+            vertical-line: map-get($tokens, 'card-#{$scheme}-error-vertical-line'),
+            background: map-get($tokens, 'card-#{$scheme}-error-background'),
+            shadow: map-get($tokens, 'card-#{$scheme}-error-shadow')
+        ),
+        warning: (
+            vertical-line: map-get($tokens, 'card-#{$scheme}-warning-vertical-line'),
+            background: map-get($tokens, 'card-#{$scheme}-warning-background'),
+            shadow: map-get($tokens, 'card-#{$scheme}-warning-shadow')
+        ),
+        success: (
+            vertical-line: map-get($tokens, 'card-#{$scheme}-success-vertical-line'),
+            background: map-get($tokens, 'card-#{$scheme}-success-background'),
+            shadow: map-get($tokens, 'card-#{$scheme}-success-shadow')
+        ),
+        info: (
+            vertical-line: map-get($tokens, 'card-#{$scheme}-info-vertical-line'),
+            background: map-get($tokens, 'card-#{$scheme}-info-background'),
+            shadow: map-get($tokens, 'card-#{$scheme}-info-shadow')
+        )
+    );
+
+    $checkbox: (
+        theme: (
+            default: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-theme-default-border'),
+                color: map-get($tokens, 'checkbox-#{$scheme}-theme-default-color'),
+                background: map-get($tokens, 'checkbox-#{$scheme}-theme-default-background')
+            ),
+            hover: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-theme-states-hover-border'),
+                background: map-get($tokens, 'checkbox-#{$scheme}-theme-states-hover-background')
+            ),
+            checked: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-theme-states-checked-border'),
+                background: map-get($tokens, 'checkbox-#{$scheme}-theme-states-checked-background')
+            ),
+            checked-hover: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-theme-states-checked-hover-border'),
+                background: map-get($tokens, 'checkbox-#{$scheme}-theme-states-checked-hover-background')
+            ),
+            focused: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-theme-states-focused-border'),
+                background: map-get($tokens, 'checkbox-#{$scheme}-theme-states-focused-background'),
+                outline: map-get($tokens, 'checkbox-#{$scheme}-theme-states-focused-outline')
+            ),
+            checked-focused: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-theme-states-checked-focused-border'),
+                background: map-get($tokens, 'checkbox-#{$scheme}-theme-states-checked-focused-background'),
+                outline: map-get($tokens, 'checkbox-#{$scheme}-theme-states-checked-focused-outline')
+            ),
+            disabled: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-theme-states-disabled-border'),
+                color: map-get($tokens, 'checkbox-#{$scheme}-theme-states-disabled-color'),
+                background: map-get($tokens, 'checkbox-#{$scheme}-theme-states-disabled-background')
+            )
+        ),
+        error: (
+            default: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-error-default-border'),
+                color: map-get($tokens, 'checkbox-#{$scheme}-error-default-color'),
+                background: map-get($tokens, 'checkbox-#{$scheme}-error-default-background'),
+            ),
+
+            hover: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-error-states-hover-border'),
+                background: map-get($tokens, 'checkbox-#{$scheme}-error-states-hover-background')
+            ),
+            checked: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-error-states-checked-border'),
+                background: map-get($tokens, 'checkbox-#{$scheme}-error-states-checked-background')
+            ),
+            checked-hover: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-error-states-checked-hover-border'),
+                background: map-get($tokens, 'checkbox-#{$scheme}-error-states-checked-hover-background')
+            ),
+            focused: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-error-states-focused-border'),
+                background: map-get($tokens, 'checkbox-#{$scheme}-error-states-focused-background'),
+                outline: map-get($tokens, 'checkbox-#{$scheme}-error-states-focused-outline')
+            ),
+            checked-focused: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-error-states-checked-focused-border'),
+                background: map-get($tokens, 'checkbox-#{$scheme}-error-states-checked-focused-background'),
+                outline: map-get($tokens, 'checkbox-#{$scheme}-error-states-checked-focused-outline')
+            ),
+            disabled: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-error-states-disabled-border'),
+                color: map-get($tokens, 'checkbox-#{$scheme}-error-states-disabled-color'),
+                background: map-get($tokens, 'checkbox-#{$scheme}-error-states-disabled-background')
+            )
+        )
+    );
+
+    $code-block: (
+        main-background: map-get($tokens, 'code-block-#{$scheme}-background'),
+        actionbar-background: map-get($tokens, 'code-block-#{$scheme}-actionbar-background'),
+        border: map-get($tokens, 'code-block-#{$scheme}-border'),
+        main-background-less-contrast: map-get($tokens, 'code-block-#{$scheme}-decoration-less-contrast-background'),
+        line-numbers-color: map-get($tokens, 'code-block-#{$scheme}-line-numbers-color'),
+        main-code-color: map-get($tokens, 'code-block-#{$scheme}-color'),
+
+        actionbar: (
+            bg: map-get($tokens, 'code-block-#{$scheme}-actionbar-background'),
+            bg-less-contrast: map-get($tokens, 'code-block-#{$scheme}-decoration-less-contrast-actionbar-background'),
+        ),
+
+        hljs: (
+            addition-background: map-get($tokens, 'code-block-#{$scheme}-hljs-addition-background'),
+            addition-color: map-get($tokens, 'code-block-#{$scheme}-hljs-addition-color'),
+            attr-background: map-get($tokens, 'code-block-#{$scheme}-hljs-attr-background'),
+            attr-color: map-get($tokens, 'code-block-#{$scheme}-hljs-attr-color'),
+            attribute-background: map-get($tokens, 'code-block-#{$scheme}-hljs-attribute-background'),
+            attribute-color: map-get($tokens, 'code-block-#{$scheme}-hljs-attribute-color'),
+            built-in-background: map-get($tokens, 'code-block-#{$scheme}-hljs-built-in-background'),
+            built-in-color: map-get($tokens, 'code-block-#{$scheme}-hljs-built-in-color'),
+            bullet-background: map-get($tokens, 'code-block-#{$scheme}-hljs-bullet-background'),
+            bullet-color: map-get($tokens, 'code-block-#{$scheme}-hljs-bullet-color'),
+            char-escape-background: map-get($tokens, 'code-block-#{$scheme}-hljs-char-escape-background'),
+            char-escape-color: map-get($tokens, 'code-block-#{$scheme}-hljs-char-escape-color'),
+            class-background: map-get($tokens, 'code-block-#{$scheme}-hljs-class-background'),
+            class-color: map-get($tokens, 'code-block-#{$scheme}-hljs-class-color'),
+            code-background: map-get($tokens, 'code-block-#{$scheme}-hljs-code-background'),
+            code-color: map-get($tokens, 'code-block-#{$scheme}-hljs-code-color'),
+            comment-background: map-get($tokens, 'code-block-#{$scheme}-hljs-comment-background'),
+            comment-color: map-get($tokens, 'code-block-#{$scheme}-hljs-comment-color'),
+            deletion-background: map-get($tokens, 'code-block-#{$scheme}-hljs-deletion-background'),
+            deletion-color: map-get($tokens, 'code-block-#{$scheme}-hljs-deletion-color'),
+            doctag-background: map-get($tokens, 'code-block-#{$scheme}-hljs-doctag-background'),
+            doctag-color: map-get($tokens, 'code-block-#{$scheme}-hljs-doctag-color'),
+            emphasis-background: map-get($tokens, 'code-block-#{$scheme}-hljs-emphasis-background'),
+            emphasis-color: map-get($tokens, 'code-block-#{$scheme}-hljs-emphasis-color'),
+            formula-background: map-get($tokens, 'code-block-#{$scheme}-hljs-formula-background'),
+            formula-color: map-get($tokens, 'code-block-#{$scheme}-hljs-formula-color'),
+            function-background: map-get($tokens, 'code-block-#{$scheme}-hljs-function-background'),
+            function-color: map-get($tokens, 'code-block-#{$scheme}-hljs-function-color'),
+            keyword-background: map-get($tokens, 'code-block-#{$scheme}-hljs-keyword-background'),
+            keyword-color: map-get($tokens, 'code-block-#{$scheme}-hljs-keyword-color'),
+            link-background: map-get($tokens, 'code-block-#{$scheme}-hljs-link-background'),
+            link-color: map-get($tokens, 'code-block-#{$scheme}-hljs-link-color'),
+            literal-background: map-get($tokens, 'code-block-#{$scheme}-hljs-literal-background'),
+            literal-color: map-get($tokens, 'code-block-#{$scheme}-hljs-literal-color'),
+            meta-background: map-get($tokens, 'code-block-#{$scheme}-hljs-meta-background'),
+            meta-color: map-get($tokens, 'code-block-#{$scheme}-hljs-meta-color'),
+            meta-keyword-background: map-get($tokens, 'code-block-#{$scheme}-hljs-meta-keyword-background'),
+            meta-keyword-color: map-get($tokens, 'code-block-#{$scheme}-hljs-meta-keyword-color'),
+            meta-string-background: map-get($tokens, 'code-block-#{$scheme}-hljs-meta-string-background'),
+            meta-string-color: map-get($tokens, 'code-block-#{$scheme}-hljs-meta-string-color'),
+            meta-prompt-background: map-get($tokens, 'code-block-#{$scheme}-hljs-meta-prompt-background'),
+            meta-prompt-color: map-get($tokens, 'code-block-#{$scheme}-hljs-meta-prompt-color'),
+            name-background: map-get($tokens, 'code-block-#{$scheme}-hljs-name-background'),
+            name-color: map-get($tokens, 'code-block-#{$scheme}-hljs-name-color'),
+            number-background: map-get($tokens, 'code-block-#{$scheme}-hljs-number-background'),
+            number-color: map-get($tokens, 'code-block-#{$scheme}-hljs-number-color'),
+            operator-background: map-get($tokens, 'code-block-#{$scheme}-hljs-operator-background'),
+            operator-color: map-get($tokens, 'code-block-#{$scheme}-hljs-operator-color'),
+            params-background: map-get($tokens, 'code-block-#{$scheme}-hljs-params-background'),
+            params-color: map-get($tokens, 'code-block-#{$scheme}-hljs-params-color'),
+            property-background: map-get($tokens, 'code-block-#{$scheme}-hljs-property-background'),
+            property-color: map-get($tokens, 'code-block-#{$scheme}-hljs-property-color'),
+            punctuation-background: map-get($tokens, 'code-block-#{$scheme}-hljs-punctuation-background'),
+            punctuation-color: map-get($tokens, 'code-block-#{$scheme}-hljs-punctuation-color'),
+            quote-background: map-get($tokens, 'code-block-#{$scheme}-hljs-quote-background'),
+            quote-color: map-get($tokens, 'code-block-#{$scheme}-hljs-quote-color'),
+            regexp-background: map-get($tokens, 'code-block-#{$scheme}-hljs-regexp-background'),
+            regexp-color: map-get($tokens, 'code-block-#{$scheme}-hljs-regexp-color'),
+            section-background: map-get($tokens, 'code-block-#{$scheme}-hljs-section-background'),
+            section-color: map-get($tokens, 'code-block-#{$scheme}-hljs-section-color'),
+            selector-attr-background: map-get($tokens, 'code-block-#{$scheme}-hljs-selector-attr-background'),
+            selector-attr-color: map-get($tokens, 'code-block-#{$scheme}-hljs-selector-attr-color'),
+            selector-class-background: map-get($tokens, 'code-block-#{$scheme}-hljs-selector-class-background'),
+            selector-class-color: map-get($tokens, 'code-block-#{$scheme}-hljs-selector-class-color'),
+            selector-id-background: map-get($tokens, 'code-block-#{$scheme}-hljs-selector-id-background'),
+            selector-id-color: map-get($tokens, 'code-block-#{$scheme}-hljs-selector-id-color'),
+            selector-pseudo-background: map-get($tokens, 'code-block-#{$scheme}-hljs-selector-pseudo-background'),
+            selector-pseudo-color: map-get($tokens, 'code-block-#{$scheme}-hljs-selector-pseudo-color'),
+            selector-tag-background: map-get($tokens, 'code-block-#{$scheme}-hljs-selector-tag-background'),
+            selector-tag-color: map-get($tokens, 'code-block-#{$scheme}-hljs-selector-tag-color'),
+            string-background: map-get($tokens, 'code-block-#{$scheme}-hljs-string-background'),
+            string-color: map-get($tokens, 'code-block-#{$scheme}-hljs-string-color'),
+            strong-background: map-get($tokens, 'code-block-#{$scheme}-hljs-strong-background'),
+            strong-color: map-get($tokens, 'code-block-#{$scheme}-hljs-strong-color'),
+            subst-background: map-get($tokens, 'code-block-#{$scheme}-hljs-subst-background'),
+            subst-color: map-get($tokens, 'code-block-#{$scheme}-hljs-subst-color'),
+            symbol-background: map-get($tokens, 'code-block-#{$scheme}-hljs-symbol-background'),
+            symbol-color: map-get($tokens, 'code-block-#{$scheme}-hljs-symbol-color'),
+            tag-background: map-get($tokens, 'code-block-#{$scheme}-hljs-tag-background'),
+            tag-color: map-get($tokens, 'code-block-#{$scheme}-hljs-tag-color'),
+            template-tag-background: map-get($tokens, 'code-block-#{$scheme}-hljs-template-tag-background'),
+            template-tag-color: map-get($tokens, 'code-block-#{$scheme}-hljs-template-tag-color'),
+            template-variable-background: map-get($tokens, 'code-block-#{$scheme}-hljs-template-variable-background'),
+            template-variable-color: map-get($tokens, 'code-block-#{$scheme}-hljs-template-variable-color'),
+            title-background: map-get($tokens, 'code-block-#{$scheme}-hljs-title-background'),
+            title-color: map-get($tokens, 'code-block-#{$scheme}-hljs-title-color'),
+            title-class-background: map-get($tokens, 'code-block-#{$scheme}-hljs-title-class-background'),
+            title-class-color: map-get($tokens, 'code-block-#{$scheme}-hljs-title-class-color'),
+            title-class-inherited-background: map-get(
+                $tokens, 'code-block-#{$scheme}-hljs-title-class-inherited-background'
+            ),
+            title-class-inherited-color: map-get($tokens, 'code-block-#{$scheme}-hljs-title-class-inherited-color'),
+            title-function-background: map-get($tokens, 'code-block-#{$scheme}-hljs-title-function-background'),
+            title-function-color: map-get($tokens, 'code-block-#{$scheme}-hljs-title-function-color'),
+            title-function-invoke-background: map-get(
+                $tokens, 'code-block-#{$scheme}-hljs-title-function-invoke-background'
+            ),
+            title-function-invoke-color: map-get($tokens, 'code-block-#{$scheme}-hljs-title-function-invoke-color'),
+            type-background: map-get($tokens, 'code-block-#{$scheme}-hljs-type-background'),
+            type-color: map-get($tokens, 'code-block-#{$scheme}-hljs-type-color'),
+            variable-background: map-get($tokens, 'code-block-#{$scheme}-hljs-variable-background'),
+            variable-color: map-get($tokens, 'code-block-#{$scheme}-hljs-variable-color'),
+            variable-constant-background: map-get($tokens, 'code-block-#{$scheme}-hljs-variable-constant-background'),
+            variable-constant-color: map-get($tokens, 'code-block-#{$scheme}-hljs-variable-constant-color'),
+            variable-language-background: map-get($tokens, 'code-block-#{$scheme}-hljs-variable-language-background'),
+            variable-language-color: map-get($tokens, 'code-block-#{$scheme}-hljs-variable-language-color')r
+        )
+    );
+
+    $datepicker: (
+        state-today-color: map-get($tokens, 'datepicker-body-#{$scheme}-states-today-color'),
+        state-today-background: map-get($tokens, 'datepicker-body-#{$scheme}-states-today-background'),
+        state-selected-color: map-get($tokens, 'datepicker-body-#{$scheme}-states-selected-color'),
+        state-selected-background: map-get($tokens, 'datepicker-body-#{$scheme}-states-selected-background')
+    );
+
+    $divider: (
+        color: map-get($tokens, 'divider-#{$scheme}-color')
+    );
+
+    $dl: (
+        dt: map-get($tokens, 'description-list-#{$scheme}-dt'),
+        dd: map-get($tokens, 'description-list-#{$scheme}-dd')
+    );
+
+    $form-field: (
+        default: (
+            border: map-get($tokens, 'form-field-#{$scheme}-default-border-color'),
+            background: map-get($tokens, 'form-field-#{$scheme}-default-background'),
+            placeholder: map-get($tokens, 'form-field-#{$scheme}-default-placeholder'),
+            text: map-get($tokens, 'form-field-#{$scheme}-default-text'),
+            label: map-get($tokens, 'form-field-#{$scheme}-default-label')
+        ),
+        focused: (
+            border: map-get($tokens, 'form-field-#{$scheme}-states-focused-border-color'),
+            background: map-get($tokens, 'form-field-#{$scheme}-states-focused-background'),
+            placeholder: map-get($tokens, 'form-field-#{$scheme}-states-focused-placeholder'),
+            text: map-get($tokens, 'form-field-#{$scheme}-states-focused-text'),
+            focus-outline: map-get($tokens, 'form-field-#{$scheme}-states-focused-focus-outline')
+        ),
+        error: (
+            border: map-get($tokens, 'form-field-#{$scheme}-states-error-border-color'),
+            background: map-get($tokens, 'form-field-#{$scheme}-states-error-background'),
+            placeholder: map-get($tokens, 'form-field-#{$scheme}-states-error-placeholder'),
+            text: map-get($tokens, 'form-field-#{$scheme}-states-error-text'),
+            focus-outline: map-get($tokens, 'form-field-#{$scheme}-states-error-focused-focus-outline')
+        ),
+        autofill: (
+            border: map-get($tokens, 'form-field-#{$scheme}-states-autofill-border-color'),
+            background: map-get($tokens, 'form-field-#{$scheme}-states-autofill-background'),
+            placeholder: map-get($tokens, 'form-field-#{$scheme}-states-autofill-placeholder'),
+            text: map-get($tokens, 'form-field-#{$scheme}-states-autofill-text')
+        ),
+        disabled: (
+            border: map-get($tokens, 'form-field-#{$scheme}-states-disabled-border-color'),
+            background: map-get($tokens, 'form-field-#{$scheme}-states-disabled-background'),
+            placeholder: map-get($tokens, 'form-field-#{$scheme}-states-disabled-placeholder'),
+            text: map-get($tokens, 'form-field-#{$scheme}-states--disabled-text')
+        )
+    );
+
+    $form-field-hint: (
+        text: map-get($tokens, 'form-field-hint-#{$scheme}-text')
+    );
+
+    $form-field-password-hint: (
+        text-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-text-color'),
+        icon-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-text-color'),
+
+        state-invalid-text-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-states-invalid-text-color'),
+        state-invalid-icon-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-states-invalid-icon-color'),
+
+        state-valid-text-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-states-valid-text-color'),
+        state-valid-icon-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-states-valid-icon-color')
+    );
+
+    $hint: (
+        fill-text-on: (
+            fade-contrast: (
+                text: map-get($tokens, 'hint-#{$scheme}-fill-text-on-fade-contrast-text'),
+                icon: map-get($tokens, 'hint-#{$scheme}-fill-text-on-fade-contrast-icon')
+            ),
+            success: (
+                text: map-get($tokens, 'hint-#{$scheme}-fill-text-on-success-text'),
+                icon: map-get($tokens, 'hint-#{$scheme}-fill-text-on-success-icon')
+            ),
+            warning: (
+                text: map-get($tokens, 'hint-#{$scheme}-fill-text-on-warning-text'),
+                icon: map-get($tokens, 'hint-#{$scheme}-fill-text-on-warning-icon')
+            ),
+            error: (
+                text: map-get($tokens, 'hint-#{$scheme}-fill-text-on-error-text'),
+                icon: map-get($tokens, 'hint-#{$scheme}-fill-text-on-error-icon')
+            )
+        ),
+        fill-text-off: (
+            fade-contrast: (
+                text: map-get($tokens, 'hint-#{$scheme}-fill-text-off-fade-contrast-text'),
+                icon: map-get($tokens, 'hint-#{$scheme}-fill-text-off-fade-contrast-icon')
+            ),
+            success: (
+                text: map-get($tokens, 'hint-#{$scheme}-fill-text-off-success-text'),
+                icon: map-get($tokens, 'hint-#{$scheme}-fill-text-off-success-icon')
+            ),
+            warning: (
+                text: map-get($tokens, 'hint-#{$scheme}-fill-text-off-warning-text'),
+                icon: map-get($tokens, 'hint-#{$scheme}-fill-text-off-warning-icon')
+            ),
+            error: (
+                text: map-get($tokens, 'hint-#{$scheme}-fill-text-off-error-text'),
+                icon: map-get($tokens, 'hint-#{$scheme}-fill-text-off-error-icon')
+            )
+        )
+    );
+
+    $forms: (
+        label: map-get($tokens, 'forms-#{$scheme}-label'),
+        legend: map-get($tokens, 'forms-#{$scheme}-legend'),
+    );
+
+    $icon: (
+        theme: (
+            color: map-get($tokens, 'icon-#{$scheme}-theme-color')
+        ),
+        contrast: (
+            color: map-get($tokens, 'icon-#{$scheme}-contrast-color')
+        ),
+        fade-contrast: (
+            color: map-get($tokens, 'icon-#{$scheme}-fade-contrast-color')
+        ),
+        error: (
+            color: map-get($tokens, 'icon-#{$scheme}-error-color')
+        ),
+        success: (
+            color: map-get($tokens, 'icon-#{$scheme}-success-color')
+        )
+    );
+
+    $icon-item: (
+        theme: (
+            color: map-get($tokens, 'icon-item-#{$scheme}-theme-color'),
+            background: map-get($tokens, 'icon-item-#{$scheme}-theme-background')
+        ),
+        contrast: (
+            color: map-get($tokens, 'icon-item-#{$scheme}-contrast-color'),
+            background: map-get($tokens, 'icon-item-#{$scheme}-contrast-background')
+        ),
+        fade-contrast: (
+            color: map-get($tokens, 'icon-item-#{$scheme}-fade-contrast-color'),
+            background: map-get($tokens, 'icon-item-#{$scheme}-fade-contrast-background')
+        ),
+        error: (
+            color: map-get($tokens, 'icon-item-#{$scheme}-error-color'),
+            background: map-get($tokens, 'icon-item-#{$scheme}-error-background')
+        ),
+        success: (
+            color: map-get($tokens, 'icon-item-#{$scheme}-success-color'),
+            background: map-get($tokens, 'icon-item-#{$scheme}-success-background')
+        )
+    );
+
+    $icon-button: (
+        theme: (
+            default: map-get($tokens, 'icon-button-#{$scheme}-theme-default'),
+            state-hover: map-get($tokens, 'icon-button-#{$scheme}-theme-states-hover'),
+            state-active: map-get($tokens, 'icon-button-#{$scheme}-theme-states-active'),
+            state-disabled: map-get($tokens, 'icon-button-#{$scheme}-theme-states-disabled')
+        ),
+        contrast: (
+            default: map-get($tokens, 'icon-button-#{$scheme}-contrast-default'),
+            state-hover: map-get($tokens, 'icon-button-#{$scheme}-contrast-states-hover'),
+            state-active: map-get($tokens, 'icon-button-#{$scheme}-contrast-states-active'),
+            state-disabled: map-get($tokens, 'icon-button-#{$scheme}-contrast-states-disabled')
+        ),
+        fade-contrast: (
+            default: map-get($tokens, 'icon-button-#{$scheme}-fade-contrast-default'),
+            state-hover: map-get($tokens, 'icon-button-#{$scheme}-fade-contrast-states-hover'),
+            state-active: map-get($tokens, 'icon-button-#{$scheme}-fade-contrast-states-active'),
+            state-disabled: map-get($tokens, 'icon-button-#{$scheme}-fade-contrast-states-disabled')
+        ),
+        error: (
+            default: map-get($tokens, 'icon-button-#{$scheme}-error-default'),
+            state-hover: map-get($tokens, 'icon-button-#{$scheme}-error-states-hover'),
+            state-active: map-get($tokens, 'icon-button-#{$scheme}-error-states-active'),
+            state-disabled: map-get($tokens, 'icon-button-#{$scheme}-error-states-disabled')
+        ),
+        success: (
+            default: map-get($tokens, 'icon-button-#{$scheme}-success-default'),
+            state-hover: map-get($tokens, 'icon-button-#{$scheme}-success-states-hover'),
+            state-active: map-get($tokens, 'icon-button-#{$scheme}-success-states-active'),
+            state-disabled: map-get($tokens, 'icon-button-#{$scheme}-success-states-disabled')
+        )
+    );
+
+    $link: (
+        text: map-get($tokens, 'link-#{$scheme}-text'),
+        border-bottom: map-get($tokens, 'link-#{$scheme}-border-bottom'),
+
+        state-visited-text: map-get($tokens, 'link-#{$scheme}-state-visited-text'),
+        state-visited-border-bottom: map-get($tokens, 'link-#{$scheme}-state-visited-border-bottom'),
+
+        state-hover-text: map-get($tokens, 'link-#{$scheme}-state-hover-text'),
+        state-hover-border-bottom: map-get($tokens, 'link-#{$scheme}-state-hover-border-bottom'),
+
+        state-active-text: map-get($tokens, 'link-#{$scheme}-state-active'),
+        state-active-border-bottom: map-get($tokens, 'link-#{$scheme}-state-active-border-bottom'),
+
+        state-focused-outline: map-get($tokens, 'link-#{$scheme}-state-focused-outline')
+    );
+
+    $loader-overlay: (
+        background: map-get($tokens, 'loader-overlay-#{$scheme}-background'),
+
+        text: map-get($tokens, 'loader-overlay-#{$scheme}-text'),
+        caption: map-get($tokens, 'loader-overlay-#{$scheme}-caption'),
+    );
+
+    $modal: (
+        background-mask: map-get($tokens, 'modal-#{$scheme}-background-mask'),
+        shadow: map-get($tokens, 'modal-#{$scheme}-shadow'),
+        header-border: map-get($tokens, 'modal-header-#{$scheme}-border'),
+        body-top-shadow: map-get($tokens, 'modal-#{$scheme}-body-top-shadow'),
+        body-bottom-shadow: map-get($tokens, 'modal-#{$scheme}-body-bottom-shadow'),
+        footer-border: map-get($tokens, 'modal-footer-#{$scheme}-border')
+    );
+
+    $markdown: (
+        h1-color: map-get($tokens, 'markdown-h1-#{$scheme}-color'),
+        h2-color: map-get($tokens, 'markdown-h2-#{$scheme}-color'),
+        h3-color: map-get($tokens, 'markdown-h3-#{$scheme}-color'),
+        h4-color: map-get($tokens, 'markdown-h4-#{$scheme}-color'),
+        h5-color: map-get($tokens, 'markdown-h5-#{$scheme}-color'),
+        h6-color: map-get($tokens, 'markdown-h6-#{$scheme}-color'),
+
+        p-color: map-get($tokens, 'markdown-p-#{$scheme}-color'),
+
+        list-color: map-get($tokens, 'markdown-list-#{$scheme}-color'),
+
+        blockquote-text: map-get($tokens, 'markdown-blockquote-#{$scheme}-text'),
+        blockquote-line: map-get($tokens, 'markdown-blockquote-#{$scheme}-line'),
+        blockquote-background: map-get($tokens, 'markdown-blockquote-#{$scheme}-background'),
+        blockquote-border: map-get($tokens, 'markdown-blockquote-#{$scheme}-border'),
+
+        code-text: map-get($tokens, 'markdown-code-#{$scheme}-text'),
+        code-background: map-get($tokens, 'markdown-code-#{$scheme}-background'),
+        code-border: map-get($tokens, 'markdown-code-#{$scheme}-border'),
+
+        link-text: map-get($tokens, 'markdown-link-#{$scheme}-text'),
+        link-border-bottom: map-get($tokens, 'markdown-link-#{$scheme}-border-bottom'),
+
+        link-state-visited-text: map-get($tokens, 'markdown-link-#{$scheme}-state-visited-text'),
+        link-state-visited-border-bottom: map-get($tokens, 'markdown-link-#{$scheme}-state-visited-border-bottom'),
+
+        link-state-hover-text: map-get($tokens, 'markdown-link-#{$scheme}-state-hover-text'),
+        link-state-hover-border-bottom: map-get($tokens, 'markdown-link-#{$scheme}-state-hover-border-bottom'),
+
+        link-state-active-text: map-get($tokens, 'markdown-link-#{$scheme}-state-active'),
+
+        link-state-focused-outline: map-get($tokens, 'markdown-link-#{$scheme}-state-focused-outline'),
+
+        image-caption-text: map-get($tokens, 'markdown-image-#{$scheme}-caption-text'),
+
+        hr-color: map-get($tokens, 'markdown-hr-#{$scheme}-color'),
+
+        table-header: map-get($tokens, 'markdown-table-#{$scheme}-header'),
+        table-body: map-get($tokens, 'markdown-table-#{$scheme}-body'),
+        table-border: map-get($tokens, 'markdown-table-#{$scheme}-border')
+    );
+
+    $navbar: (
+        background: map-get($tokens, 'navbar-#{$scheme}-background'),
+
+        divider-background: map-get($tokens, 'navbar-#{$scheme}-divider-background')
+    );
+
+    $navbar-item: (
+        color: map-get($tokens, 'navbar-item-#{$scheme}-text'),
+        icon-color: map-get($tokens, 'navbar-item-#{$scheme}-icon'),
+
+        state-active: map-get($tokens, 'navbar-item-#{$scheme}-states-active'),
+        state-selected: map-get($tokens, 'navbar-item-#{$scheme}-states-selected'),
+        state-hover: map-get($tokens, 'navbar-item-#{$scheme}-states-hover'),
+        state-progress: map-get($tokens, 'navbar-item-#{$scheme}-states-progress'),
+        state-disabled-opacity: map-get($tokens, 'navbar-item-#{$scheme}-states-disabled-opacity'),
+    );
+
+    $popover: (
+        background: map-get($tokens, 'popover-#{$scheme}-background'),
+        text: map-get($tokens, 'popover-#{$scheme}-text'),
+        shadow: map-get($tokens, 'popover-#{$scheme}-shadow'),
+        border: map-get($tokens, 'popover-#{$scheme}-border'),
+
+        footer: (
+            background: map-get($tokens, 'popover-footer-#{$scheme}-background'),
+            border: map-get($tokens, 'popover-footer-#{$scheme}-border'),
+        ),
+
+        header: (
+            text: map-get($tokens, 'popover-header-#{$scheme}-text'),
+            background: map-get($tokens, 'popover-header-#{$scheme}-background'),
+            border: map-get($tokens, 'popover-header-#{$scheme}-border'),
+        )
+    );
+
+    $progress-bar: (
+        bar: (
+            background: map-get($tokens, 'progress-bar-#{$scheme}-bar-background'),
+            foreground: map-get($tokens, 'progress-bar-#{$scheme}-bar-foreground')
+        ),
+        text: map-get($tokens, 'progress-bar-#{$scheme}-text-color'),
+        caption: map-get($tokens, 'progress-bar-#{$scheme}-caption-color')
+    );
+
+    $progress-spinner: (
+        circle: map-get($tokens, 'progress-spinner-#{$scheme}-circle-background'),
+        text: map-get($tokens, 'progress-spinner-#{$scheme}-text-color'),
+        caption: map-get($tokens, 'progress-spinner-#{$scheme}-caption-color')
+    );
+
+    $radio: (
+        theme: (
+            default: (
+                outer-circle-border: map-get($tokens, 'radio-#{$scheme}-theme-default-outer-circle-border'),
+                outer-circle-background: map-get($tokens, 'radio-#{$scheme}-theme-default-outer-circle-background'),
+                inner-circle-background: map-get($tokens, 'radio-#{$scheme}-theme-default-inner-circle-background'),
+            ),
+
+            hover: (
+                outer-circle-border: map-get($tokens, 'radio-#{$scheme}-theme-states-hover-outer-circle-border'),
+                outer-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-theme-states-hover-outer-circle-background'
+                ),
+                inner-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-theme-states-hover-inner-circle-background'
+                )
+            ),
+            checked: (
+                outer-circle-border: map-get($tokens, 'radio-#{$scheme}-theme-states-checked-outer-circle-border'),
+                outer-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-theme-states-checked-outer-circle-background'
+                ),
+                inner-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-theme-states-checked-inner-circle-background'
+                )
+            ),
+            checked-hover: (
+                outer-circle-border: map-get(
+                    $tokens, 'radio-#{$scheme}-theme-states-checked-hover-outer-circle-border'
+                ),
+                outer-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-theme-states-checked-hover-outer-circle-background'
+                ),
+                inner-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-theme-states-checked-hover-inner-circle-background'
+                )
+            ),
+            focused: (
+                outer-circle-border: map-get($tokens, 'radio-#{$scheme}-theme-states-focused-outer-circle-border'),
+                outer-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-theme-states-focused-outer-circle-background'
+                ),
+                inner-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-theme-states-focused-inner-circle-background'
+                ),
+                outer-circle-shadow: map-get(
+                    $tokens, 'radio-#{$scheme}-theme-states-focused-outer-circle-shadow'
+                )
+            ),
+            checked-focused: (
+                outer-circle-border: map-get(
+                    $tokens, 'radio-#{$scheme}-theme-states-checked-focused-outer-circle-border'
+                ),
+                outer-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-theme-states-checked-focused-outer-circle-background'
+                ),
+                inner-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-theme-states-checked-focused-inner-circle-background'
+                ),
+                outer-circle-shadow: map-get(
+                    $tokens, 'radio-#{$scheme}-theme-states-checked-focused-outer-circle-shadow'
+                )
+            ),
+            disabled: (
+                outer-circle-border: map-get($tokens, 'radio-#{$scheme}-theme-states-disabled-outer-circle-border'),
+                outer-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-theme-states-disabled-outer-circle-background'
+                ),
+                inner-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-theme-states-disabled-inner-circle-background'
+                )
+            )
+        ),
+        error: (
+            default: (
+                outer-circle-border: map-get($tokens, 'radio-#{$scheme}-error-default-outer-circle-border'),
+                outer-circle-background: map-get($tokens, 'radio-#{$scheme}-error-default-outer-circle-background'),
+                inner-circle-background: map-get($tokens, 'radio-#{$scheme}-error-default-inner-circle-background'),
+            ),
+
+            hover: (
+                outer-circle-border: map-get($tokens, 'radio-#{$scheme}-error-states-hover-outer-circle-border'),
+                outer-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-error-states-hover-outer-circle-background'
+                ),
+                inner-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-error-states-hover-inner-circle-background'
+                )
+            ),
+            checked: (
+                outer-circle-border: map-get($tokens, 'radio-#{$scheme}-error-states-checked-outer-circle-border'),
+                outer-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-error-states-checked-outer-circle-background'
+                ),
+                inner-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-error-states-checked-inner-circle-background'
+                )
+            ),
+            checked-hover: (
+                outer-circle-border: map-get(
+                    $tokens, 'radio-#{$scheme}-error-states-checked-hover-outer-circle-border'
+                ),
+                outer-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-error-states-checked-hover-outer-circle-background'
+                ),
+                inner-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-error-states-checked-hover-inner-circle-background'
+                )
+            ),
+            focused: (
+                outer-circle-border: map-get($tokens, 'radio-#{$scheme}-error-states-focused-outer-circle-border'),
+                outer-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-error-states-focused-outer-circle-background'
+                ),
+                inner-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-error-states-focused-inner-circle-background'
+                ),
+                outer-circle-shadow: map-get(
+                    $tokens, 'radio-#{$scheme}-error-states-focused-outer-circle-shadow'
+                )
+            ),
+            checked-focused: (
+                outer-circle-border: map-get(
+                    $tokens, 'radio-#{$scheme}-error-states-checked-focused-outer-circle-border'
+                ),
+                outer-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-error-states-checked-focused-outer-circle-background'
+                ),
+                inner-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-error-states-checked-focused-inner-circle-background'
+                ),
+                outer-circle-shadow: map-get(
+                    $tokens, 'radio-#{$scheme}-error-states-checked-focused-outer-circle-shadow'
+                )
+            ),
+            disabled: (
+                outer-circle-border: map-get($tokens, 'radio-#{$scheme}-error-states-disabled-outer-circle-border'),
+                outer-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-error-states-disabled-outer-circle-background'
+                ),
+                inner-circle-background: map-get(
+                    $tokens, 'radio-#{$scheme}-error-states-disabled-inner-circle-background'
+                )
+            )
+        )
+    );
+
+    $sidepanel: (
+        border: map-get($tokens, 'sidepanel-#{$scheme}-border'),
+        header-border: map-get($tokens, 'sidepanel-header-#{$scheme}-border'),
+        footer-border: map-get($tokens, 'sidepanel-footer-#{$scheme}-border')
+    );
+
+    $tabs: (
+        border: map-get($tokens, 'tabs-#{$scheme}-border'),
+        state-normal-icon: map-get($tokens, 'tabs-#{$scheme}-state-normal-icon'),
+        state-normal-text: map-get($tokens, 'tabs-#{$scheme}-state-normal-text'),
+
+        state-hover-icon: map-get($tokens, 'tabs-#{$scheme}-state-hover-icon'),
+        state-hover-text: map-get($tokens, 'tabs-#{$scheme}-state-hover-text'),
+
+        state-active-marker: map-get($tokens, 'tabs-#{$scheme}-state-active-marker-color'),
+
+        state-empty-icon: map-get($tokens, 'tabs-#{$scheme}-state-empty-icon'),
+        state-empty-text: map-get($tokens, 'tabs-#{$scheme}-state-empty-text'),
+
+        state-disabled-icon: map-get($tokens, 'tabs-#{$scheme}-state-disabled-icon'),
+        state-disabled-text: map-get($tokens, 'tabs-#{$scheme}-state-disabled-text'),
+        state-disabled-marker-opacity: map-get($tokens, 'tabs-#{$scheme}-state-disabled-marker-opacity')
+    );
+
+    $vertical-tabs: (
+        state-normal-background: map-get($tokens, 'vertical-tabs-#{$scheme}-state-normal-background'),
+        state-selected-background: map-get($tokens, 'vertical-tabs-#{$scheme}-state-selected-background'),
+        state-hover-background: map-get($tokens, 'vertical-tabs-#{$scheme}-state-hover-background'),
+        state-hover-selected-background: map-get($tokens, 'vertical-tabs-#{$scheme}-state-hover-selected-background')
+    );
+
+    $tag: (
+        theme-fade-on: (
+            default: (
+                background: map-get($tokens, 'tag-#{$scheme}-theme-fade-on-default-background'),
+                text: map-get($tokens, 'tag-#{$scheme}-theme-fade-on-default-text'),
+                icon: map-get($tokens, 'tag-#{$scheme}-theme-fade-on-default-icon'),
+                close-button: map-get($tokens, 'tag-#{$scheme}-theme-fade-on-default-close-button')
+            ),
+            hover: (
+                background: map-get($tokens, 'tag-#{$scheme}-theme-fade-on-states-hover-background'),
+                text: map-get($tokens, 'tag-#{$scheme}-theme-fade-on-states-hover-text'),
+                icon: map-get($tokens, 'tag-#{$scheme}-theme-fade-on-states-hover-icon'),
+                close-button: map-get($tokens, 'tag-#{$scheme}-theme-fade-on-states-hover-close-button')
+            ),
+            focus: (
+                background: map-get($tokens, 'tag-#{$scheme}-theme-fade-on-states-focus-background'),
+                text: map-get($tokens, 'tag-#{$scheme}-theme-fade-on-states-focus-text'),
+                icon: map-get($tokens, 'tag-#{$scheme}-theme-fade-on-states-focus-icon'),
+                close-button: map-get($tokens, 'tag-#{$scheme}-theme-fade-on-states-focus-close-button'),
+                outline: map-get($tokens, 'tag-#{$scheme}-theme-fade-on-states-focus-outline')
+            ),
+            disabled: (
+                background: map-get($tokens, 'tag-#{$scheme}-theme-fade-on-states-disabled-background'),
+                text: map-get($tokens, 'tag-#{$scheme}-theme-fade-on-states-disabled-text'),
+                icon: map-get($tokens, 'tag-#{$scheme}-theme-fade-on-states-disabled-icon'),
+                close-button: map-get($tokens, 'tag-#{$scheme}-theme-fade-on-states-disabled-close-button')
+            )
+        ),
+        contrast-fade-on: (
+            default: (
+                background: map-get($tokens, 'tag-#{$scheme}-contrast-fade-on-default-background'),
+                text: map-get($tokens, 'tag-#{$scheme}-contrast-fade-on-default-text'),
+                icon: map-get($tokens, 'tag-#{$scheme}-contrast-fade-on-default-icon'),
+                close-button: map-get($tokens, 'tag-#{$scheme}-contrast-fade-on-default-close-button')
+            ),
+            hover: (
+                background: map-get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-hover-background'),
+                text: map-get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-hover-text'),
+                icon: map-get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-hover-icon'),
+                close-button: map-get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-hover-close-button')
+            ),
+            focus: (
+                background: map-get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-focus-background'),
+                text: map-get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-focus-text'),
+                icon: map-get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-focus-icon'),
+                close-button: map-get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-focus-close-button'),
+                outline: map-get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-focus-outline')
+            ),
+            disabled: (
+                background: map-get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-disabled-background'),
+                text: map-get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-disabled-text'),
+                icon: map-get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-disabled-icon'),
+                close-button: map-get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-disabled-close-button')
+            )
+        ),
+        error-fade-on: (
+            default: (
+                background: map-get($tokens, 'tag-#{$scheme}-error-fade-on-default-background'),
+                text: map-get($tokens, 'tag-#{$scheme}-error-fade-on-default-text'),
+                icon: map-get($tokens, 'tag-#{$scheme}-error-fade-on-default-icon'),
+                close-button: map-get($tokens, 'tag-#{$scheme}-error-fade-on-default-close-button')
+            ),
+            hover: (
+                background: map-get($tokens, 'tag-#{$scheme}-error-fade-on-states-hover-background'),
+                text: map-get($tokens, 'tag-#{$scheme}-error-fade-on-states-hover-text'),
+                icon: map-get($tokens, 'tag-#{$scheme}-error-fade-on-states-hover-icon'),
+                close-button: map-get($tokens, 'tag-#{$scheme}-error-fade-on-states-hover-close-button')
+            ),
+            focus: (
+                background: map-get($tokens, 'tag-#{$scheme}-error-fade-on-states-focus-background'),
+                text: map-get($tokens, 'tag-#{$scheme}-error-fade-on-states-focus-text'),
+                icon: map-get($tokens, 'tag-#{$scheme}-error-fade-on-states-focus-icon'),
+                close-button: map-get($tokens, 'tag-#{$scheme}-error-fade-on-states-focus-close-button'),
+                outline: map-get($tokens, 'tag-#{$scheme}-error-fade-on-states-focus-outline')
+            ),
+            disabled: (
+                background: map-get($tokens, 'tag-#{$scheme}-error-fade-on-states-disabled-background'),
+                text: map-get($tokens, 'tag-#{$scheme}-error-fade-on-states-disabled-text'),
+                icon: map-get($tokens, 'tag-#{$scheme}-error-fade-on-states-disabled-icon'),
+                close-button: map-get($tokens, 'tag-#{$scheme}-error-fade-on-states-disabled-close-button')
+            )
+        )
+    );
+
+    $toggle: (
+        theme:(
+            default:(
+                border: map-get($tokens, 'toggle-#{$scheme}-theme-default-border'),
+                background: map-get($tokens, 'toggle-#{$scheme}-theme-default-background'),
+                circle-background: map-get($tokens, 'toggle-#{$scheme}-theme-default-circle-background')
+            ),
+            hover: (
+                border: map-get($tokens, 'toggle-#{$scheme}-theme-states-hover-border'),
+                background: map-get($tokens, 'toggle-#{$scheme}-theme-states-hover-background'),
+                circle-background: map-get($tokens, 'toggle-#{$scheme}-theme-states-hover-circle-background')
+            ),
+            checked: (
+                border: map-get($tokens, 'toggle-#{$scheme}-theme-states-checked-border'),
+                background: map-get($tokens, 'toggle-#{$scheme}-theme-states-checked-background'),
+                circle-background: map-get($tokens, 'toggle-#{$scheme}-theme-states-checked-circle-background')
+            ),
+            checked-hover: (
+                border: map-get($tokens, 'toggle-#{$scheme}-theme-states-checked-hover-border'),
+                background: map-get($tokens, 'toggle-#{$scheme}-theme-states-checked-hover-background'),
+                circle-background: map-get($tokens, 'toggle-#{$scheme}-theme-states-checked-hover-circle-background')
+            ),
+            focused: (
+                border: map-get($tokens, 'toggle-#{$scheme}-theme-states-focused-border'),
+                background: map-get($tokens, 'toggle-#{$scheme}-theme-states-focused-background'),
+                circle-background: map-get($tokens, 'toggle-#{$scheme}-theme-states-focused-circle-background'),
+                focus-outline: map-get($tokens, 'toggle-#{$scheme}-theme-states-focused-focus-outline')
+            ),
+            checked-focused: (
+                border: map-get($tokens, 'toggle-#{$scheme}-theme-states-checked-focused-border'),
+                background: map-get($tokens, 'toggle-#{$scheme}-theme-states-checked-focused-background'),
+                circle-background: map-get($tokens, 'toggle-#{$scheme}-theme-states-checked-focused-circle-background'),
+                focus-outline: map-get($tokens, 'toggle-#{$scheme}-theme-states-checked-focused-focus-outline')
+            ),
+            disabled: (
+                border: map-get($tokens, 'toggle-#{$scheme}-theme-states-disabled-border'),
+                background: map-get($tokens, 'toggle-#{$scheme}-theme-states-disabled-background'),
+                circle-background: map-get($tokens, 'toggle-#{$scheme}-theme-states-disabled-circle-background')
+            )
+        ),
+        error:(
+            default:(
+                border: map-get($tokens, 'toggle-#{$scheme}-error-default-border'),
+                background: map-get($tokens, 'toggle-#{$scheme}-error-default-background'),
+                circle-background: map-get($tokens, 'toggle-#{$scheme}-error-default-circle-background')
+            ),
+            hover: (
+                border: map-get($tokens, 'toggle-#{$scheme}-error-states-hover-border'),
+                background: map-get($tokens, 'toggle-#{$scheme}-error-states-hover-background'),
+                circle-background: map-get($tokens, 'toggle-#{$scheme}-error-states-hover-circle-background')
+            ),
+            checked: (
+                border: map-get($tokens, 'toggle-#{$scheme}-error-states-checked-border'),
+                background: map-get($tokens, 'toggle-#{$scheme}-error-states-checked-background'),
+                circle-background: map-get($tokens, 'toggle-#{$scheme}-error-states-checked-circle-background')
+            ),
+            checked-hover: (
+                border: map-get($tokens, 'toggle-#{$scheme}-error-states-checked-hover-border'),
+                background: map-get($tokens, 'toggle-#{$scheme}-error-states-checked-hover-background'),
+                circle-background: map-get($tokens, 'toggle-#{$scheme}-error-states-checked-hover-circle-background')
+            ),
+            focused: (
+                border: map-get($tokens, 'toggle-#{$scheme}-error-states-focused-border'),
+                background: map-get($tokens, 'toggle-#{$scheme}-error-states-focused-background'),
+                circle-background: map-get($tokens, 'toggle-#{$scheme}-error-states-focused-circle-background'),
+                focus-outline: map-get($tokens, 'toggle-#{$scheme}-error-states-focused-focus-outline'),
+            ),
+            checked-focused: (
+                border: map-get($tokens, 'toggle-#{$scheme}-error-states-checked-focused-border'),
+                background: map-get($tokens, 'toggle-#{$scheme}-error-states-checked-focused-background'),
+                circle-background: map-get($tokens, 'toggle-#{$scheme}-error-states-checked-focused-circle-background'),
+                focus-outline: map-get($tokens, 'toggle-#{$scheme}-error-states-checked-focused-focus-outline')
+            ),
+            disabled: (
+                border: map-get($tokens, 'toggle-#{$scheme}-error-states-disabled-border'),
+                background: map-get($tokens, 'toggle-#{$scheme}-error-states-disabled-background'),
+                circle-background: map-get($tokens, 'toggle-#{$scheme}-error-states-disabled-circle-background')
+            )
+        )
+    );
+
+    $timezone: (
+        text: map-get($tokens, 'timezone-option-#{$scheme}-text'),
+        caption: map-get($tokens, 'timezone-option-#{$scheme}-caption')
+    );
+
+    $toast: (
+        background: map-get($tokens, 'toast-#{$scheme}-background'),
+        border: map-get($tokens, 'toast-#{$scheme}-border'),
+        text: map-get($tokens, 'toast-#{$scheme}-text'),
+        text-caption: map-get($tokens, 'toast-#{$scheme}-text-caption'),
+        shadow: map-get($tokens, 'toast-#{$scheme}-shadow'),
+
+        icon_info: map-get($tokens, 'toast-#{$scheme}-icon-info'),
+        icon_error: map-get($tokens, 'toast-#{$scheme}-icon-error'),
+        icon_success: map-get($tokens, 'toast-#{$scheme}-icon-success'),
+        icon_warning: map-get($tokens, 'toast-#{$scheme}-icon-warning')
+    );
+
+    $tooltip: (
+        theme-fade-off: (
+            background: map-get($tokens, 'tooltip-#{$scheme}-theme-fade-off-background'),
+            text: map-get($tokens, 'tooltip-#{$scheme}-theme-fade-off-text'),
+            shadow: map-get($tokens, 'tooltip-#{$scheme}-theme-fade-off-shadow')
+        ),
+        contrast-fade-on: (
+            background: map-get($tokens, 'tooltip-#{$scheme}-contrast-fade-on-background'),
+            text: map-get($tokens, 'tooltip-#{$scheme}-contrast-fade-on-text'),
+            shadow: map-get($tokens, 'tooltip-#{$scheme}-contrast-fade-on-shadow')
+        ),
+        contrast-fade-off: (
+            background: map-get($tokens, 'tooltip-#{$scheme}-contrast-fade-off-background'),
+            text: map-get($tokens, 'tooltip-#{$scheme}-contrast-fade-off-text'),
+            shadow: map-get($tokens, 'tooltip-#{$scheme}-contrast-fade-off-shadow')
+        )
+    );
+
+    $scrollbar: (
+        default: map-get($tokens, 'scrollbar-#{$scheme}-thumb-default-background'),
+        hover: map-get($tokens, 'scrollbar-#{$scheme}-thumb-hover-background'),
+        active: map-get($tokens, 'scrollbar-#{$scheme}-thumb-active-background'),
+        disabled: map-get($tokens, 'scrollbar-#{$scheme}-thumb-disabled-background')
+    );
+
+    @return (
+        alert: $alert,
+        popup: $popup,
+        badge: $badge,
+        button: $button,
+        card: $card,
+        checkbox: $checkbox,
+        code-block: $code-block,
+        datepicker: $datepicker,
+        divider: $divider,
+        dl: $dl,
+        form-field: $form-field,
+        form-field-hint: $form-field-hint,
+        form-field-password-hint: $form-field-password-hint,
+        hint: $hint,
+        forms: $forms,
+        icon: $icon,
+        icon-item: $icon-item,
+        icon-button: $icon-button,
+        link: $link,
+        loader-overlay: $loader-overlay,
+        modal: $modal,
+        markdown: $markdown,
+        navbar: $navbar,
+        navbar-item: $navbar-item,
+        popover: $popover,
+        progress-bar: $progress-bar,
+        progress-spinner: $progress-spinner,
+        radio: $radio,
+        sidepanel: $sidepanel,
+        tabs: $tabs,
+        vertical-tabs: $vertical-tabs,
+        tag: $tag,
+        timezone: $timezone,
+        toast: $toast,
+        toggle: $toggle,
+        tooltip: $tooltip,
+        scrollbar: $scrollbar
+    );
+}