@ptsecurity/mosaic 14.7.1 → 15.0.0

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

@@ -0,0 +1,721 @@
+@function mc-components-theme($tokens, $scheme) {
+    $alert: (
+        error: (
+            background: map-get($tokens, 'alert-#{$scheme}-error-background'),
+            border: map-get($tokens, 'alert-#{$scheme}-error-border'),
+            icon: map-get($tokens, 'alert-#{$scheme}-error-icon')
+        ),
+        warning: (
+            background: map-get($tokens, 'alert-#{$scheme}-warning-background'),
+            border: map-get($tokens, 'alert-#{$scheme}-warning-border'),
+            icon: map-get($tokens, 'alert-#{$scheme}-warning-icon')
+        ),
+        success: (
+            background: map-get($tokens, 'alert-#{$scheme}-success-background'),
+            border: map-get($tokens, 'alert-#{$scheme}-success-border'),
+            icon: map-get($tokens, 'alert-#{$scheme}-success-icon')
+        ),
+        info: (
+            background: map-get($tokens, 'alert-#{$scheme}-info-background'),
+            border: map-get($tokens, 'alert-#{$scheme}-info-border'),
+            icon: map-get($tokens, 'alert-#{$scheme}-info-icon')
+        ),
+        default: (
+            background: map-get($tokens, 'alert-#{$scheme}-default-background'),
+            border: map-get($tokens, 'alert-#{$scheme}-default-border'),
+            icon: map-get($tokens, 'alert-#{$scheme}-default-icon')
+        ),
+    );
+
+    $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: (
+        primary_solid: (
+            color: map-get($tokens, 'badge-#{$scheme}-solid-primary-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-solid-primary-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-solid-primary-border')
+        ),
+        second_solid: (
+            color: map-get($tokens, 'badge-#{$scheme}-solid-secondary-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-solid-secondary-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-solid-secondary-border')
+        ),
+        light_solid: (
+            color: map-get($tokens, 'badge-#{$scheme}-solid-light-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-solid-light-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-solid-light-background')
+        ),
+        info_solid: (
+            color: map-get($tokens, 'badge-#{$scheme}-solid-info-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-solid-info-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-solid-info-border')
+        ),
+        success_solid: (
+            color: map-get($tokens, 'badge-#{$scheme}-solid-success-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-solid-success-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-solid-success-border')
+        ),
+        warning_solid: (
+            color: map-get($tokens, 'badge-#{$scheme}-solid-warning-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-solid-warning-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-solid-warning-border')
+        ),
+        error_solid: (
+            color: map-get($tokens, 'badge-#{$scheme}-solid-error-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-solid-error-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-solid-error-border')
+        ),
+        transparent_solid: (
+            color: map-get($tokens, 'badge-#{$scheme}-solid-transparent-color'),
+            border: map-get($tokens, 'badge-#{$scheme}-solid-transparent-border'),
+            background: map-get($tokens, 'badge-#{$scheme}-solid-transparent-background')
+        ),
+        primary_pastel: (
+            color: map-get($tokens, 'badge-#{$scheme}-pastel-primary-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-pastel-primary-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-pastel-primary-border')
+        ),
+        info_pastel: (
+            color: map-get($tokens, 'badge-#{$scheme}-pastel-info-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-pastel-info-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-pastel-info-border')
+        ),
+        success_pastel: (
+            color: map-get($tokens, 'badge-#{$scheme}-pastel-success-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-pastel-success-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-pastel-success-border')
+        ),
+        warning_pastel: (
+            color: map-get($tokens, 'badge-#{$scheme}-pastel-warning-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-pastel-warning-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-pastel-warning-border')
+        ),
+        error_pastel: (
+            color: map-get($tokens, 'badge-#{$scheme}-pastel-error-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-pastel-error-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-pastel-error-border')
+        ),
+    );
+
+    $button: (
+        state-active_shadow: map-get($tokens, 'button-#{$scheme}-active-shadow'),
+
+        primary: (
+            color: map-get($tokens, 'button-#{$scheme}-primary-color'),
+            border: map-get($tokens, 'button-#{$scheme}-primary-border'),
+            background: map-get($tokens, 'button-#{$scheme}-primary-background'),
+            icon: map-get($tokens, 'button-#{$scheme}-primary-icon'),
+
+            active_border: map-get($tokens, 'button-#{$scheme}-primary-states-active-border'),
+            active_background: map-get($tokens, 'button-#{$scheme}-primary-states-active-background')
+        ),
+
+        primary_transparent: (
+            color: map-get($tokens, 'button-#{$scheme}-primary-transparent-color'),
+            icon: map-get($tokens, 'button-#{$scheme}-primary-transparent-icon'),
+
+            hover_color: map-get($tokens, 'button-#{$scheme}-primary-transparent-states-hover-color'),
+            hover_icon: map-get($tokens, 'button-#{$scheme}-primary-transparent-states-hover-icon'),
+
+            active_color: map-get($tokens, 'button-#{$scheme}-primary-transparent-states-active-color'),
+            active_icon: map-get($tokens, 'button-#{$scheme}-primary-transparent-states-active-icon')
+        ),
+
+        secondary: (
+            color: map-get($tokens, 'button-#{$scheme}-secondary-color'),
+            border: map-get($tokens, 'button-#{$scheme}-secondary-border'),
+            background: map-get($tokens, 'button-#{$scheme}-secondary-background'),
+            icon: map-get($tokens, 'button-#{$scheme}-secondary-icon'),
+
+            active_border: map-get($tokens, 'button-#{$scheme}-secondary-states-active-border'),
+            active_background: map-get($tokens, 'button-#{$scheme}-secondary-states-active-background')
+        ),
+
+        error: (
+            color: map-get($tokens, 'button-#{$scheme}-error-color'),
+            border: map-get($tokens, 'button-#{$scheme}-error-border'),
+            background: map-get($tokens, 'button-#{$scheme}-error-background'),
+            icon: map-get($tokens, 'button-#{$scheme}-error-icon'),
+
+            active_border: map-get($tokens, 'button-#{$scheme}-error-states-active-border'),
+            active_background: map-get($tokens, 'button-#{$scheme}-error-states-active-background')
+        )
+    );
+
+    $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: (
+        default: (
+            border: map-get($tokens, 'checkbox-#{$scheme}-default-border'),
+            color: map-get($tokens, 'checkbox-#{$scheme}-default-color'),
+            background: map-get($tokens, 'checkbox-#{$scheme}-default-background'),
+
+            checked: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-default-states-checked-border'),
+                background: map-get($tokens, 'checkbox-#{$scheme}-default-states-checked-background')
+            ),
+            focused: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-default-states-focused-border'),
+                shadow: map-get($tokens, 'checkbox-#{$scheme}-default-states-focused-shadow')
+            ),
+            checked-focused: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-default-states-checked-focused-border'),
+                background: map-get($tokens, 'checkbox-#{$scheme}-default-states-checked-focused-background'),
+                shadow: map-get($tokens, 'checkbox-#{$scheme}-default-states-checked-focused-shadow'),
+                outline: map-get($tokens, 'checkbox-#{$scheme}-default-states-checked-focused-outline')
+            )
+        ),
+        error: (
+            border: map-get($tokens, 'checkbox-#{$scheme}-error-border'),
+            color: map-get($tokens, 'checkbox-#{$scheme}-error-color'),
+            background: map-get($tokens, 'checkbox-#{$scheme}-error-background'),
+
+            checked: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-error-states-checked-border'),
+                background: map-get($tokens, 'checkbox-#{$scheme}-error-states-checked-background'),
+            ),
+            focused: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-error-states-focused-border'),
+                shadow: map-get($tokens, 'checkbox-#{$scheme}-error-states-focused-shadow'),
+            ),
+            checked-focused: (
+                border: map-get($tokens, 'checkbox-#{$scheme}-error-states-checked-focused-border'),
+                background: map-get($tokens, 'checkbox-#{$scheme}-error-states-checked-focused-background'),
+                shadow: map-get($tokens, 'checkbox-#{$scheme}-error-states-checked-focused-shadow'),
+                outline: map-get($tokens, 'checkbox-#{$scheme}-error-states-checked-focused-outline')
+            )
+        )
+    );
+
+    $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-selected-today-color: map-get($tokens, 'datepicker-body-#{$scheme}-states-selected-today-color'),
+        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: (
+        border: map-get($tokens, 'form-field-#{$scheme}-border'),
+        background: map-get($tokens, 'form-field-#{$scheme}-background'),
+
+        state-hover-border: map-get($tokens, 'form-field-#{$scheme}-states-hover-border'),
+        state-invalid-border: map-get($tokens, 'form-field-#{$scheme}-states-invalid-border'),
+        state-invalid-background: map-get($tokens, 'form-field-#{$scheme}-states-invalid-background')
+    );
+
+    $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')
+    );
+
+    $forms: (
+        label: map-get($tokens, 'forms-#{$scheme}-label'),
+        legend: map-get($tokens, 'forms-#{$scheme}-legend'),
+    );
+
+    $icon: (
+        primary: (
+            default: map-get($tokens, 'icon-#{$scheme}-primary-default'),
+            state-hover: map-get($tokens, 'icon-#{$scheme}-primary-states-hover'),
+            state-active: map-get($tokens, 'icon-#{$scheme}-primary-states-active'),
+            state-disabled: map-get($tokens, 'icon-#{$scheme}-primary-states-disabled')
+        ),
+        secondary: (
+            default: map-get($tokens, 'icon-#{$scheme}-secondary-default'),
+            state-hover: map-get($tokens, 'icon-#{$scheme}-secondary-states-hover'),
+            state-active: map-get($tokens, 'icon-#{$scheme}-secondary-states-active'),
+            state-disabled: map-get($tokens, 'icon-#{$scheme}-secondary-states-disabled')
+        ),
+        error: (
+            default: map-get($tokens, 'icon-#{$scheme}-error-default'),
+            state-hover: map-get($tokens, 'icon-#{$scheme}-error-states-hover'),
+            state-active: map-get($tokens, 'icon-#{$scheme}-error-states-active'),
+            state-disabled: map-get($tokens, 'icon-#{$scheme}-error-states-disabled')
+        ),
+        warning: (
+            default: map-get($tokens, 'icon-#{$scheme}-warning-default'),
+            state-hover: map-get($tokens, 'icon-#{$scheme}-warning-states-hover'),
+            state-active: map-get($tokens, 'icon-#{$scheme}-warning-states-active'),
+            state-disabled: map-get($tokens, 'icon-#{$scheme}-warning-states-disabled')
+        ),
+        info: (
+            default: map-get($tokens, 'icon-#{$scheme}-info-default'),
+            state-hover: map-get($tokens, 'icon-#{$scheme}-info-states-hover'),
+            state-active: map-get($tokens, 'icon-#{$scheme}-info-states-active'),
+            state-disabled: map-get($tokens, 'icon-#{$scheme}-info-states-disabled')
+        ),
+        success: (
+            default: map-get($tokens, 'icon-#{$scheme}-success-default'),
+            state-hover: map-get($tokens, 'icon-#{$scheme}-success-states-hover'),
+            state-active: map-get($tokens, 'icon-#{$scheme}-success-states-active'),
+            state-disabled: map-get($tokens, 'icon-#{$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-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: (
+        background: map-get($tokens, 'progress-bar-#{$scheme}-background')
+    );
+
+    $radio: (
+        outer-circle_border: map-get($tokens, 'radio-#{$scheme}-outer-circle-border'),
+        inner-circle_border: map-get($tokens, 'radio-#{$scheme}-inner-circle-border'),
+        cap-color: map-get($tokens, 'radio-#{$scheme}-cap-color'),
+
+        outer-circle_checked-state_border: map-get($tokens, 'radio-#{$scheme}-states-checked-outer-circle-border'),
+        outer-circle_focused-state_border: map-get($tokens, 'radio-#{$scheme}-states-focused-outer-circle-border'),
+        outer-circle_focused-state_shadow: map-get($tokens, 'radio-#{$scheme}-states-focused-outer-circle-shadow'),
+
+        inner-circle_checked-state_border: map-get($tokens, 'radio-#{$scheme}-states-checked-inner-circle-border'),
+        inner-circle_focused-state_shadow: map-get($tokens, 'radio-#{$scheme}-states-focused-inner-circle-shadow')
+    );
+
+    $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')
+    );
+
+    $tags: (
+        primary: (
+            border: map-get($tokens, 'tags-#{$scheme}-primary-border'),
+            text: map-get($tokens, 'tags-#{$scheme}-primary-text'),
+            background: map-get($tokens, 'tags-#{$scheme}-primary-background'),
+            background_disabled: map-get($tokens, 'tags-#{$scheme}-primary-states-disabled-background'),
+            border_disabled: map-get($tokens, 'tags-#{$scheme}-primary-states-disabled-border'),
+            icon: map-get($tokens, 'tags-#{$scheme}-primary-icon'),
+            icon_hovered: map-get($tokens, 'tags-#{$scheme}-primary-states-hover-icon'),
+            focused: map-get($tokens, 'tags-#{$scheme}-primary-states-focused'),
+            disabled: map-get($tokens, 'tags-#{$scheme}-primary-states-disabled-text')
+        ),
+        secondary: (
+            border: map-get($tokens, 'tags-#{$scheme}-secondary-border'),
+            text: map-get($tokens, 'tags-#{$scheme}-secondary-text'),
+            background: map-get($tokens, 'tags-#{$scheme}-secondary-background'),
+            background_disabled: map-get($tokens, 'tags-#{$scheme}-secondary-states-disabled-background'),
+            border_disabled: map-get($tokens, 'tags-#{$scheme}-secondary-states-disabled-border'),
+            icon: map-get($tokens, 'tags-#{$scheme}-secondary-icon'),
+            icon_hovered: map-get($tokens, 'tags-#{$scheme}-secondary-states-hover-icon'),
+            focused: map-get($tokens, 'tags-#{$scheme}-secondary-states-focused'),
+            disabled: map-get($tokens, 'tags-#{$scheme}-secondary-states-disabled-text')
+        ),
+        error: (
+            border: map-get($tokens, 'tags-#{$scheme}-error-border'),
+            text: map-get($tokens, 'tags-#{$scheme}-error-text'),
+            background: map-get($tokens, 'tags-#{$scheme}-error-background'),
+            background_disabled: map-get($tokens, 'tags-#{$scheme}-error-states-disabled-background'),
+            border_disabled: map-get($tokens, 'tags-#{$scheme}-error-states-disabled-border'),
+            icon: map-get($tokens, 'tags-#{$scheme}-error-icon'),
+            icon_hovered: map-get($tokens, 'tags-#{$scheme}-error-states-hover-icon'),
+            focused: map-get($tokens, 'tags-#{$scheme}-error-states-focused'),
+            disabled: map-get($tokens, 'tags-#{$scheme}-error-states-disabled-text')
+        )
+    );
+
+    $toggle: (
+        border: map-get($tokens, 'toggle-#{$scheme}-border'),
+        background: map-get($tokens, 'toggle-#{$scheme}-background'),
+
+        circle_border: map-get($tokens, 'toggle-#{$scheme}-circle-border'),
+        circle_background: map-get($tokens, 'toggle-#{$scheme}-circle-background'),
+
+        focused: map-get($tokens, 'toggle-#{$scheme}-states-focused-shadow'),
+
+        primary: (
+            checked_border: map-get($tokens, 'toggle-#{$scheme}-primary-checked-border-color'),
+            checked_background: map-get($tokens, 'toggle-#{$scheme}-primary-checked-background')
+        ),
+        error: (
+            checked_border: map-get($tokens, 'toggle-#{$scheme}-error-checked-border-color'),
+            checked_background: map-get($tokens, 'toggle-#{$scheme}-error-checked-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: (
+        background: map-get($tokens, 'tooltip-#{$scheme}-background'),
+        color: map-get($tokens, 'tooltip-#{$scheme}-text'),
+        shadow: map-get($tokens, 'tooltip-#{$scheme}-shadow'),
+
+        warning: (
+            background: map-get($tokens, 'tooltip-#{$scheme}-warning-background'),
+            color: map-get($tokens, 'tooltip-#{$scheme}-warning-text'),
+            border-color: map-get($tokens, 'tooltip-#{$scheme}-warning-border')
+        ),
+        extended: (
+            background: map-get($tokens, 'extended-tooltip-#{$scheme}-background'),
+            color: map-get($tokens, 'extended-tooltip-#{$scheme}-text'),
+            border-color: map-get($tokens, 'extended-tooltip-#{$scheme}-border'),
+
+            header-background: map-get($tokens, 'extended-tooltip-header-#{$scheme}-background'),
+            header-color: map-get($tokens, 'extended-tooltip-header-#{$scheme}-text'),
+            header-border-color: map-get($tokens, 'extended-tooltip-header-#{$scheme}-border')
+        )
+    );
+
+    $scrollbar: (
+        track: map-get($tokens, 'scrollbar-#{$scheme}-track'),
+        thumb: (
+            normal: map-get($tokens, 'scrollbar-#{$scheme}-thumb-normal'),
+            hover: map-get($tokens, 'scrollbar-#{$scheme}-thumb-hover'),
+            active: map-get($tokens, 'scrollbar-#{$scheme}-thumb-active'),
+            disabled: map-get($tokens, 'scrollbar-#{$scheme}-thumb-disabled')
+        ),
+        arrow: (
+            normal: map-get($tokens, 'scrollbar-#{$scheme}-arrow-normal'),
+            disabled: map-get($tokens, 'scrollbar-#{$scheme}-arrow-disabled'),
+            background: map-get($tokens, 'scrollbar-#{$scheme}-arrow-background')
+        ),
+        corner-background: map-get($tokens, 'scrollbar-#{$scheme}-corner-background'),
+        resizer-background: map-get($tokens, 'scrollbar-#{$scheme}-resizer-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-password-hint: $form-field-password-hint,
+        forms: $forms,
+        icon: $icon,
+        link: $link,
+        loader-overlay: $loader-overlay,
+        modal: $modal,
+        markdown: $markdown,
+        navbar: $navbar,
+        navbar-item: $navbar-item,
+        popover: $popover,
+        progress-bar: $progress-bar,
+        radio: $radio,
+        sidepanel: $sidepanel,
+        tabs: $tabs,
+        vertical-tabs: $vertical-tabs,
+        tags: $tags,
+        timezone: $timezone,
+        toast: $toast,
+        toggle: $toggle,
+        tooltip: $tooltip,
+        scrollbar: $scrollbar
+    );
+}