@epam/uui 4.5.4 → 4.6.1-alpha.0

package/assets/styles/buttonLayout.scss

@@ -0,0 +1,66 @@
+@use './text-size' as *;
+
+@mixin button-layout($size, $borderWidth) {
+    @include button-horizontal-layout($size, $borderWidth);
+    @include button-vertical-layout($size, $borderWidth);
+}
+
+@mixin link-button-layout($size) {
+    @include link-button-horizontal-layout($size);
+    @include button-vertical-layout($size, 0);
+}
+
+@mixin button-vertical-layout($size, $borderWidth) {
+    &:global(.uui-button-box) {
+        min-height: $size;
+        border-width: $borderWidth;
+    }
+
+    :global(.uui-caption) {
+        @include text-size($size, $borderWidth);
+
+        @if ($size == 42px or $size == 48px) {
+            font-size: 14px;
+        }
+    }
+}
+
+@mixin button-horizontal-layout($size, $borderWidth) {
+    min-width: $size;
+
+    @if ($size == 24px) {
+        @include button-padding(6px, 6px, $borderWidth);
+    } @else if ($size == 30px) {
+        @include button-padding(6px, 6px, $borderWidth);
+    } @else if ($size == 36px) {
+        @include button-padding(6px, 6px, $borderWidth);
+    } @else if ($size == 42px) {
+        @include button-padding(12px, 6px, $borderWidth);
+    } @else if ($size == 48px) {
+        @include button-padding(12px, 6px, $borderWidth);
+    } @else {
+        @include button-padding(6px, 6px, $borderWidth)
+    }
+}
+
+@mixin button-padding($controlPadding, $captionPadding, $borderWidth) {
+    padding-left: $controlPadding - $borderWidth;
+    padding-right: $controlPadding - $borderWidth;
+
+    :global(.uui-caption) {
+        padding-left: $captionPadding;
+        padding-right: $captionPadding;
+    }
+}
+
+@mixin link-button-horizontal-layout($size) {
+    min-width: $size;
+
+    &:global(.uui-has-left-icon) :global(.uui-caption) {
+        padding-left: 6px;
+    }
+
+    &:global(.uui-has-right-icon) :global(.uui-caption) {
+        padding-right: 6px;
+    }
+}

package/assets/styles/controlLayout.scss

@@ -0,0 +1,12 @@
+@use 'text-size' as *;
+
+@mixin control-vertical-layout($size, $borderWidth) {
+    :global(.uui-caption), :global(.uui-input) {
+        @include text-size($size, $borderWidth);
+    }
+
+    &:global(.uui-button-box), &:global(.uui-input-box) {
+        min-height: $size;
+        border-width: $borderWidth;
+    }
+}

package/assets/styles/effects.scss

@@ -0,0 +1,9 @@
+@mixin panel-shadow() { box-shadow: var(--panel-shadow); }
+
+@mixin panel-top-shadow() { box-shadow: inset 0 10px 5px -10px rgba(51, 51, 51, 0.2); }
+
+//@mixin button-focus-shadow() { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); } // TODO: design?
+
+@mixin dnd-ghost-shadow() { box-shadow: 0 6px 18px 0 rgba(29,30,38,0.05), 0 3px 12px 0 rgba(29,30,38,0.05); }
+
+@mixin control-focus-effect($name) { box-shadow: 0 0 0 2px fade-out($name, 0.6); } // TODO: design?

package/assets/styles/font-faces.scss

@@ -0,0 +1,52 @@
+@font-face {
+    font-family: 'Sans Regular';
+    src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-Regular.ttf.woff2') format('woff2'),
+        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-Regular.otf.woff') format('woff'),
+        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-Regular.otf') format('opentype'),
+        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Sans Semibold';
+    src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-Semibold.ttf.woff2') format('woff2'),
+        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-SemiBold.otf.woff') format('woff'),
+        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-Semibold.otf') format('opentype'),
+        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-Semibold.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Sans Italic';
+    src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-It.ttf.woff2') format('woff2'),
+        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-It.otf.woff') format('woff'),
+        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-It.otf') format('opentype'),
+        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-It.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Redacted';
+    src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.eot');
+    src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.woff2') format('woff2'),
+        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.woff') format('woff'),
+        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.otf') format('opentype'),
+        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.svg#filename') format('svg');
+}
+
+@font-face {
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    font-weight: normal;
+    src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/RobotoMono-Regular.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Roboto Slab';
+    font-style: normal;
+    font-weight: normal;
+    src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/RobotoSlab-Regular.ttf') format('truetype');
+}

package/assets/styles/fonts-variables.scss

@@ -0,0 +1,24 @@
+:global(.font-regular) {
+    font-family: var(--font-regular);
+    font-weight: normal;
+}
+
+:global(.font-semibold) {
+    font-family: var(--font-semibold);
+    font-weight: normal;
+}
+
+:global(.font-italic) {
+    font-family: var(--font-italic);
+    font-weight: normal;
+}
+
+:global(.font-primary) {
+    font-family: var(--font-primary);
+    font-weight: normal;
+}
+
+:global(.font-promo) {
+    font-family: var(--font-promo);
+    font-weight: normal;
+}

package/assets/styles/icons.scss

@@ -0,0 +1,19 @@
+@use "sass:math";
+
+@mixin icon-layout($size) {
+    :global(.uui-icon) {
+        svg {
+            height: math.div($size, 36) * 24;
+            max-width: math.div($size, 36) * 24;
+        }
+    }
+}
+
+@mixin icon-size($size) {
+    :global(.uui-icon) {
+        svg {
+            height: $size;
+            max-width: $size;
+        }
+    }
+}

package/assets/styles/index.scss

@@ -0,0 +1,8 @@
+@forward 'buttonLayout';
+@forward 'controlLayout';
+@forward 'effects';
+@forward 'icons';
+@forward 'inputs';
+@forward 'layout-mixins';
+@forward 'text-size';
+@forward 'typography';

package/assets/styles/inputs.scss

@@ -0,0 +1,70 @@
+@mixin disabled-input() {
+    &.mode-form {
+        @include input-colors(var(--input-bg-disabled-color), var(--input-text-disabled-color), var(--input-border-disabled-color));
+        cursor: default;
+        pointer-events: none;
+
+        &:hover, &:active, &:focus {
+            @include input-colors(var(--input-bg-disabled-color), var(--input-text-disabled-color), var(--input-border-disabled-color));
+            box-shadow: none;
+        }
+
+        &::placeholder {
+            color: var(--input-placeholder-disabled-color);
+        }
+    }
+
+    &.mode-cell {
+        @include input-colors(transparent, var(--input-text-disabled-color), transparent);
+        cursor: default;
+        pointer-events: none;
+
+        &:hover, &:active, &:focus {
+            @include input-colors(transparent, var(--input-text-disabled-color), transparent);
+            box-shadow: none;
+        }
+
+        &::placeholder {
+            color: var(--input-placeholder-disabled-color);
+        }
+    }
+}
+
+@mixin readonly-input() {
+    &.mode-form {
+        background-color: var(--input-bg-readonly-color);
+        border-color: var(--input-border-readonly-color);
+        pointer-events: none;
+
+        &:hover {
+            border-color: var(--input-border-readonly-color);
+        }
+    }
+
+    &.mode-cell {
+        background-color: transparent;
+        border-color: transparent;
+        pointer-events: none;
+
+        &:hover {
+            background-color: transparent;
+            border-color: transparent;
+        }
+    }
+}
+
+@mixin input-colors($bg, $fg, $brd) {
+    background-color: $bg;
+    color: $fg;
+    fill: $fg;
+    border-color: $brd;
+
+    // override more selective selector on input tag in browsers stylesheets
+    :global(.uui-input) {
+        color: $fg;
+
+        &::placeholder {
+            color: var(--input-placeholder-disabled-color);
+        }
+    }
+}

package/assets/styles/layout-mixins.scss

@@ -0,0 +1,9 @@
+@mixin padding($size) {
+    padding-left: $size + px;
+    padding-right: $size + px;
+}
+
+@mixin vPadding($size) {
+    padding-top: $size + px;
+    padding-bottom: $size + px;
+}

package/assets/styles/prettifyScrollBar.scss

@@ -0,0 +1,45 @@
+@mixin prettifyCustomScroll() {
+    :global(.uui-thumb-vertical), :global(.uui-thumb-horizontal) {
+        background: var(--scroll-bars-bg-color);
+        border-radius: 1.5px;
+
+        &:hover {
+            border-radius: 3px;
+        }
+
+        &:active {
+            border-radius: 3px;
+            background: var(--scroll-bars-bg-color-active);
+        }
+    }
+
+    :global(.uui-thumb-vertical) {
+        width: 3px;
+        margin-left: 3px;
+
+        &:hover {
+            width: 6px;
+            margin-left: 0;
+        }
+
+        &:active {
+            width: 6px;
+            margin-left: 0;
+        }
+    }
+
+    :global(.uui-thumb-horizontal) {
+        height: 3px;
+        margin-top: 3px;
+
+        &:hover {
+            height: 6px;
+            margin-top: 0;
+        }
+
+        &:active {
+            height: 6px;
+            margin-top: 0;
+        }
+    }
+}

package/assets/styles/text-layout.scss

@@ -0,0 +1,81 @@
+.line-height-12 { line-height: 12px; }
+.line-height-18 { line-height: 18px; }
+.line-height-24 { line-height: 24px; }
+.line-height-30 { line-height: 30px; }
+
+.font-size-10 { font-size: 10px; }
+.font-size-12 { font-size: 12px; }
+.font-size-14 { font-size: 14px; }
+.font-size-16 { font-size: 16px; }
+.font-size-18 { font-size: 18px; }
+.font-size-24 { font-size: 24px; }
+
+.v-padding-2 {
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+.v-padding-3 {
+    padding-top: 3px;
+    padding-bottom: 3px;
+}
+
+.v-padding-5 {
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.v-padding-6 {
+    padding-top: 6px;
+    padding-bottom: 6px;
+}
+
+.v-padding-8 {
+    padding-top: 8px;
+    padding-bottom: 8px;
+}
+
+.v-padding-9 {
+    padding-top: 9px;
+    padding-bottom: 9px;
+}
+
+.v-padding-11 {
+    padding-top: 11px;
+    padding-bottom: 11px;
+}
+
+.v-padding-12 {
+    padding-top: 12px;
+    padding-bottom: 12px;
+}
+
+.v-padding-14 {
+    padding-top: 14px;
+    padding-bottom: 14px;
+}
+
+.v-padding-15 {
+    padding-top: 15px;
+    padding-bottom: 15px;
+}
+
+.v-padding-17 {
+    padding-top: 17px;
+    padding-bottom: 17px;
+}
+
+.v-padding-18 {
+    padding-top: 18px;
+    padding-bottom: 18px;
+}
+
+.v-padding-23 {
+    padding-top: 23px;
+    padding-bottom: 23px;
+}
+
+.v-padding-24 {
+    padding-top: 24px;
+    padding-bottom: 24px;
+}

package/assets/styles/text-size.scss

@@ -0,0 +1,37 @@
+@function vpadding($size, $border-width) {
+    @if ($size == 18px or $size == 24px) {
+        @return (3px - $border-width);
+    } @else if ($size == 30px) {
+        @return (6px - $border-width);
+    } @else if ($size == 36px or $size == 42px) {
+        @return (9px - $border-width);
+    } @else if ($size == 48px) {
+        @return (12px - $border-width);
+    }
+
+    @return (null);
+}
+
+@mixin text-size($size, $border-width: 0) {
+    @if ($size == 18px) {
+        line-height: 12px;
+        font-size: 10px;
+    } @else if ($size == 24px) {
+        line-height: 18px;
+        font-size: 12px;
+    } @else if ($size == 30px) {
+        line-height: 18px;
+        font-size: 14px;
+    } @else if ($size == 36px) {
+        line-height: 18px;
+        font-size: 14px;
+    } @else if ($size == 42px) {
+        line-height: 24px;
+        font-size: 16px;
+    } @else if ($size == 48px) {
+        line-height: 24px;
+        font-size: 16px;
+    }
+    padding-top: vpadding($size, $border-width);
+    padding-bottom: vpadding($size, $border-width);
+}

package/assets/styles/typography.scss

@@ -0,0 +1,4 @@
+@mixin overflow-ellipsis() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

package/assets/styles/variables/buttons/button.scss

@@ -0,0 +1,71 @@
+:global(.button-vars) {
+    --button-border-radius: var(--border-radius);
+}
+
+:global(.button-color-primary) {
+    --button-bg-color: var(--primary-color);
+    --button-bg-color-hover: var(--primary-dark-color);
+    --button-bg-color-active: var(--primary-darkest-color);
+    --button-bg-color-halftone: var(--button-bg-halftone-color);
+    --button-bg-color-halftone-hover: var(--primary-lightest-color);
+    --button-bg-color-halftone-active: var(--primary-light-color);
+    --button-bg-color-disabled: var(--disabled-color);
+    --button-border-color: var(--primary-color);
+    --button-border-color-hover: var(--primary-dark-color);
+    --button-border-color-active: var(--primary-darkest-color);
+    --button-border-color-disabled: var(--disabled-color);
+    --button-caption-color: var(--contrast-color);
+    --button-caption-halftone-color: var(--primary-color);
+    --button-caption-color-disabled: var(--button-caption-disabled-color);
+}
+
+:global(.button-color-accent) {
+    --button-bg-color: var(--accent-color);
+    --button-bg-color-hover: var(--accent-dark-color);
+    --button-bg-color-active: var(--accent-darkest-color);
+    --button-bg-color-halftone: var(--button-bg-halftone-color);
+    --button-bg-color-halftone-hover: var(--accent-lightest-color);
+    --button-bg-color-halftone-active: var(--accent-light-color);
+    --button-bg-color-disabled: var(--disabled-color);
+    --button-border-color: var(--accent-color);
+    --button-border-color-hover: var(--accent-dark-color);
+    --button-border-color-active: var(--accent-darkest-color);
+    --button-border-color-disabled: var(--disabled-color);
+    --button-caption-color: var(--contrast-color);
+    --button-caption-halftone-color: var(--accent-color);
+    --button-caption-color-disabled: var(--button-caption-disabled-color);
+}
+
+:global(.button-color-negative) {
+    --button-bg-color: var(--negative-color);
+    --button-bg-color-hover: var(--negative-dark-color);
+    --button-bg-color-active: var(--negative-darkest-color);
+    --button-bg-color-halftone: var(--button-bg-halftone-color);
+    --button-bg-color-halftone-hover: var(--negative-lightest-color);
+    --button-bg-color-halftone-active: var(--negative-light-color);
+    --button-bg-color-disabled: var(--disabled-color);
+    --button-border-color: var(--negative-color);
+    --button-border-color-hover: var(--negative-dark-color);
+    --button-border-color-active: var(--negative-darkest-color);
+    --button-border-color-disabled: var(--disabled-color);
+    --button-caption-color: var(--contrast-color);
+    --button-caption-halftone-color: var(--negative-color);
+    --button-caption-color-disabled: var(--button-caption-disabled-color);
+}
+
+:global(.button-color-secondary) {
+    --button-bg-color: var(--secondary-color);
+    --button-bg-color-hover: var(--secondary-dark-color);
+    --button-bg-color-active: var(--secondary-darkest-color);
+    --button-bg-color-halftone: var(--button-bg-halftone-color);
+    --button-bg-color-halftone-hover: var(--secondary-lightest-color);
+    --button-bg-color-halftone-active: var(--secondary-light-color);
+    --button-bg-color-disabled: var(--disabled-color);
+    --button-border-color: var(--secondary-color);
+    --button-border-color-hover: var(--secondary-dark-color);
+    --button-border-color-active: var(--secondary-darkest-color);
+    --button-border-color-disabled: var(--disabled-color);
+    --button-caption-color: var(--contrast-color);
+    --button-caption-halftone-color: var(--secondary-color);
+    --button-caption-color-disabled: var(--button-caption-disabled-color);
+}

package/assets/styles/variables/buttons/iconButton.scss

@@ -0,0 +1,41 @@
+:global(.icon-button-color-info) {
+    --icon-button-icon-color: var(--info-color);
+    --icon-button-icon-color-hover: var(--info-hover-color);
+    --icon-button-icon-color-active: var(--info-active-color);
+    --icon-button-icon-color-disabled: var(--iconButton-disabled-color);
+}
+
+:global(.icon-button-color-success) {
+    --icon-button-icon-color: var(--success-color);
+    --icon-button-icon-color-hover: var(--success-hover-color);
+    --icon-button-icon-color-active: var(--success-active-color);
+    --icon-button-icon-color-disabled: var(--iconButton-disabled-color);
+}
+
+:global(.icon-button-color-warning) {
+    --icon-button-icon-color: var(--warning-color);
+    --icon-button-icon-color-hover: var(--warning-hover-color);
+    --icon-button-icon-color-active: var(--warning-active-color);
+    --icon-button-icon-color-disabled: var(--iconButton-disabled-color);
+}
+
+:global(.icon-button-color-error) {
+    --icon-button-icon-color: var(--error-color);
+    --icon-button-icon-color-hover: var(--error-hover-color);
+    --icon-button-icon-color-active: var(--error-active-color);
+    --icon-button-icon-color-disabled: var(--iconButton-disabled-color);
+}
+
+:global(.icon-button-color-default) {
+    --icon-button-icon-color: var(--icon-color);
+    --icon-button-icon-color-hover: var(--icon-hover-color);
+    --icon-button-icon-color-active: var(--icon-active-color);
+    --icon-button-icon-color-disabled: var(--iconButton-disabled-color);
+}
+
+:global(.icon-button-color-secondary) {
+    --icon-button-icon-color: var(--secondary-color);
+    --icon-button-icon-color-hover: var(--secondary-hover-color);
+    --icon-button-icon-color-active: var(--secondary-active-color);
+    --icon-button-icon-color-disabled: var(--secondary-disabled-color);
+}

package/assets/styles/variables/buttons/linkButton.scss

@@ -0,0 +1,6 @@
+:global(.link-button-vars) {
+    --link-button-text-color: var(--info-color);
+    --link-button-text-color-hover: var(--info-hover-color);
+    --link-button-text-color-active: var(--info-active-color);
+    --link-button-text-color-disabled: var(--button-disabled-color);
+}

package/assets/styles/variables/buttons/tabButton.scss

@@ -0,0 +1,8 @@
+:global(.tab-button-vars) {
+    --tab-button-text-color: var(--text-primary-color);
+    --tab-button-text-color-hover: var(--primary-color);
+    --tab-button-text-color-active: var(--primary-color);
+    --tab-button-text-color-disabled: var(--text-disabled-color);
+    --tab-button-count-bg-color: white;
+    --tab-button-count-color: var(--text-secondary-color);
+}

package/assets/styles/variables/inputs/checkbox.scss

@@ -0,0 +1,18 @@
+:global(.checkbox-vars) {
+    --checkbox-border-color: var(--input-border-color);
+    --checkbox-border-color-hover: var(--input-border-hover-color);
+    --checkbox-border-color-disabled: var(--input-border-disabled-color);
+    --checkbox-border-color-checked: var(--input-border-checked-color);
+    --checkbox-border-color-checked-disabled: var(--input-border-checked-disabled-color);
+    --checkbox-bg-color: var(--input-bg-color);
+    --checkbox-bg-color-checked: var(--input-bg-checked-color);
+    --checkbox-bg-color-disabled: var(--input-bg-disabled-color);
+    --checkbox-bg-color-checked-hover: var(--input-bg-checked-hover-color);
+    --checkbox-bg-color-checked-disabled: var(--input-bg-checked-disabled-color);
+    --checkbox-error-color: var(--negative-color);
+    --checkbox-fill-color: var(--input-checkbox-icon-color);
+    --checkbox-label-color: var(--input-label-color);
+    --checkbox-label-color-disabled: var(--input-label-disabled-color);
+
+    --checkbox-border-radius: var(--border-radius);
+}

package/assets/styles/variables/inputs/radioInput.scss

@@ -0,0 +1,15 @@
+:global(.radio-input-vars) {
+    --radio-input-bg-color: var(--input-bg-color);
+    --radio-input-bg-color-disabled: var(--input-bg-disabled-color);
+    --radio-input-border-color: var(--input-border-color);
+    --radio-input-border-color-checked: var(--input-border-checked-color);
+    --radio-input-border-color-hover: var(--input-border-hover-color);
+    --radio-input-border-color-disabled: var(--input-border-disabled-color);
+    --radio-input-border-color-checked-disabled: var(--input-border-checked-disabled-color);
+    --radio-input-label-color: var(--input-label-color);
+    --radio-input-label-color-disabled: var(--input-label-disabled-color);
+    --radio-input-fill-color-checked: var(--input-border-checked-color);
+    --radio-input-fill-color-hover: var(--input-border-hover-color);
+    --radio-input-fill-color-checked-disabled: var(--input-border-checked-disabled-color);
+    --radio-input-error-color: var(--negative-color);
+}

package/assets/styles/variables/inputs/switch.scss

@@ -0,0 +1,24 @@
+:global(.switch-vars) {
+    --switch-bg-color: var(--input-switch-bg-color);
+    --switch-bg-color-checked: var(--input-bg-checked-color);
+    --switch-bg-color-hover: var(--input-bg-hover-color);
+    --switch-bg-color-disabled: var(--input-bg-disabled-color);
+    --switch-bg-color-checked-hover: var(--input-bg-checked-hover-color);
+    --switch-bg-color-checked-disabled: var(--input-bg-checked-disabled-color);
+    --switch-border-color: var(--input-border-color);
+    --switch-border-color-checked: var(--input-border-checked-color);
+    --switch-border-color-hover: var(--input-switch-border-hover-color);
+    --switch-border-color-disabled: var(--input-border-disabled-color);
+    --switch-border-color-checked-hover: var(--input-border-checked-hover-color);
+    --switch-border-color-checked-disabled: var(--input-border-checked-disabled-color);
+    --switch-label-color: var(--input-label-color);
+    --switch-label-color-disabled: var(--input-label-disabled-color);
+    --switch-toggler-bg-color: #fff;
+    --switch-toggler-bg-color-disabled: var(--input-bg-disabled-color);
+    --switch-toggler-border-color: var(--input-switch-bg-color);
+    --switch-toggler-border-color-checked: var(--input-bg-checked-color);
+    --switch-toggler-border-color-hover: var(--input-bg-hover-color);
+    --switch-toggler-border-color-disabled: var(--input-border-disabled-color);
+    --switch-toggler-border-color-checked-hover: var(--input-bg-checked-hover-color);
+    --switch-toggler-border-color-checked-disabled: var(--input-bg-checked-disabled-color);
+}

package/assets/styles/variables/inputs/textInput.scss

@@ -0,0 +1,21 @@
+:global(.text-input-vars) {
+    --text-input-bg-color: var(--input-bg-color);
+    --text-input-bg-color-disabled: var(--input-bg-disabled-color);
+    --text-input-bg-color-readonly: var(--input-bg-readonly-color);
+    --text-input-border-color: var(--input-border-color);
+    --text-input-border-color-hover: var(--input-textinput-border-hover-color);
+    --text-input-border-color-active: var(--input-border-checked-color);
+    --text-input-border-color-error: var(--negative-color);
+    --text-input-border-color-disabled: var(--input-border-disabled-color);
+    --text-input-border-color-readonly: var(--input-border-readonly-color);
+    --text-input-placeholder-color: var(--input-placeholder-color);
+    --text-input-placeholder-color-disabled: var(--input-placeholder-disabled-color);
+    --text-input-text-color: var(--input-text-color);
+    --text-input-text-color-disabled: var(--input-text-disabled-color);
+    --text-input-icon-color: var(--input-icon-color);
+    --text-input-icon-color-disabled: var(--input-icon-disabled-color);
+    --text-input-icon-color-clickable: var(--icon-color);
+    --text-input-icon-color-clickable-hover: var(--icon-hover-color);
+
+    --text-input-border-radius: var(--border-radius);
+}