@uzum-tech/ui 0.1.2 → 1.0.0

package/es/steps/src/styles/index.cssr.js

@@ -25,7 +25,8 @@ export default cB('steps', `
  `), c('&:last-child', [cB('step-splitor', 'display: none;')])]), cB('step-splitor', `
  background-color: var(--u-splitor-color);
  margin-top: calc(var(--u-step-header-font-size) / 2);
- height: 1px;
+ height: 6px;
+ border-radius: 8px;
  flex: 1;
  align-self: flex-start;
  margin-left: 12px;
@@ -33,6 +34,14 @@ export default cB('steps', `
  transition:
  color .3s var(--u-bezier),
  background-color .3s var(--u-bezier);
+ `), cB('step-splitor-no-icon', `
+ background-color: var(--u-splitor-color);
+ margin-top: 12px;
+ height: 6px;
+ border-radius: 8px;
+ transition:
+ color .3s var(--u-bezier),
+ background-color .3s var(--u-bezier);
  `), cB('step-content', 'flex: 1;', [cB('step-content-header', `
  color: var(--u-header-text-color);
  margin-top: calc(var(--u-indicator-size) / 2 - var(--u-step-header-font-size) / 2);
@@ -41,14 +50,20 @@ export default cB('steps', `
  position: relative;
  display: flex;
  font-weight: var(--u-step-header-font-weight);
- margin-left: 9px;
+ margin-left: 8px;
  transition:
  color .3s var(--u-bezier),
  background-color .3s var(--u-bezier);
  `, [cE('title', `
  white-space: nowrap;
  flex: 0;
- `)]), cE('description', `
+ `), cM('column', `
+ flex-direction: column;
+ `, [cE('title', `
+ white-space: normal;
+ word-break: auto-phrase;
+ line-height: 20px;
+ `)])]), cE('description', `
  color: var(--u-description-text-color);
  margin-top: 12px;
  margin-left: 9px;

package/es/steps/styles/light.d.ts

@@ -1,6 +1,14 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import type { Theme } from '../../_mixins';
 export declare const self: (vars: ThemeCommonVars) => {
+    stepHeaderFontSizeSmall: string;
+    stepHeaderFontSizeMedium: string;
+    indicatorIndexFontSizeSmall: string;
+    indicatorIndexFontSizeMedium: string;
+    indicatorSizeSmall: string;
+    indicatorSizeMedium: string;
+    indicatorIconSizeSmall: string;
+    indicatorIconSizeMedium: string;
     stepHeaderFontWeight: string;
     indicatorTextColorProcess: string;
     indicatorTextColorWait: string;
@@ -26,14 +34,6 @@ export declare const self: (vars: ThemeCommonVars) => {
     descriptionTextColorWait: string;
     descriptionTextColorFinish: string;
     descriptionTextColorError: string;
-    stepHeaderFontSizeSmall: string;
-    stepHeaderFontSizeMedium: string;
-    indicatorIndexFontSizeSmall: string;
-    indicatorIndexFontSizeMedium: string;
-    indicatorSizeSmall: string;
-    indicatorSizeMedium: string;
-    indicatorIconSizeSmall: string;
-    indicatorIconSizeMedium: string;
 };
 export type StepsThemeVars = ReturnType<typeof self>;
 declare const stepsLight: Theme<'Steps', StepsThemeVars>;

package/es/steps/styles/light.js

@@ -1,8 +1,41 @@
-import commonVariables from './_common';
 import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
-    const { fontWeightStrong, baseColor, textColorDisabled, primaryColor, errorColor, textColor1, textColor2 } = vars;
-    return Object.assign(Object.assign({}, commonVariables), { stepHeaderFontWeight: fontWeightStrong, indicatorTextColorProcess: baseColor, indicatorTextColorWait: textColorDisabled, indicatorTextColorFinish: primaryColor, indicatorTextColorError: errorColor, indicatorBorderColorProcess: primaryColor, indicatorBorderColorWait: textColorDisabled, indicatorBorderColorFinish: primaryColor, indicatorBorderColorError: errorColor, indicatorColorProcess: primaryColor, indicatorColorWait: '#0000', indicatorColorFinish: '#0000', indicatorColorError: '#0000', splitorColorProcess: textColorDisabled, splitorColorWait: textColorDisabled, splitorColorFinish: primaryColor, splitorColorError: textColorDisabled, headerTextColorProcess: textColor1, headerTextColorWait: textColorDisabled, headerTextColorFinish: textColorDisabled, headerTextColorError: errorColor, descriptionTextColorProcess: textColor2, descriptionTextColorWait: textColorDisabled, descriptionTextColorFinish: textColorDisabled, descriptionTextColorError: errorColor });
+    const { fontWeightStrong, fontBodySmall, fontBodyMedium, fontBodyLarge, textPrimary, brandPrimary500, staticRed, elementsTertiary, brandPrimary300, textSecondary, staticWhite } = vars;
+    return {
+        stepHeaderFontSizeSmall: fontBodySmall,
+        stepHeaderFontSizeMedium: fontBodyMedium,
+        indicatorIndexFontSizeSmall: fontBodyMedium,
+        indicatorIndexFontSizeMedium: fontBodyLarge,
+        indicatorSizeSmall: '22px',
+        indicatorSizeMedium: '28px',
+        indicatorIconSizeSmall: '14px',
+        indicatorIconSizeMedium: '18px',
+        stepHeaderFontWeight: fontWeightStrong,
+        indicatorTextColorProcess: staticWhite,
+        indicatorTextColorWait: textSecondary,
+        indicatorTextColorFinish: staticWhite,
+        indicatorTextColorError: staticWhite,
+        indicatorBorderColorProcess: brandPrimary500,
+        indicatorBorderColorWait: elementsTertiary,
+        indicatorBorderColorFinish: brandPrimary300,
+        indicatorBorderColorError: staticRed,
+        indicatorColorProcess: brandPrimary500,
+        indicatorColorWait: elementsTertiary,
+        indicatorColorFinish: brandPrimary300,
+        indicatorColorError: staticRed,
+        splitorColorProcess: brandPrimary500,
+        splitorColorWait: elementsTertiary,
+        splitorColorFinish: brandPrimary300,
+        splitorColorError: staticRed,
+        headerTextColorProcess: textPrimary,
+        headerTextColorWait: textSecondary,
+        headerTextColorFinish: textPrimary,
+        headerTextColorError: staticRed,
+        descriptionTextColorProcess: textPrimary,
+        descriptionTextColorWait: textSecondary,
+        descriptionTextColorFinish: textPrimary,
+        descriptionTextColorError: staticRed
+    };
 };
 const stepsLight = {
     name: 'Steps',

package/es/styles.d.ts

@@ -56,6 +56,7 @@ export { sliderDark } from './slider/styles';
 export { spaceDark, spaceRtl as unstableSpaceRtl } from './space/styles';
 export { spinDark } from './spin/styles';
 export { statisticDark, statisticRtl as unstableStatisticRtl } from './statistic/styles';
+export { statusDark } from './status/styles';
 export { stepsDark, stepsRtl as unstableStepsRtl } from './steps/styles';
 export { switchDark } from './switch/styles';
 export { tableDark, tableRtl as unstableTableRtl } from './table/styles';
@@ -72,6 +73,7 @@ export { typographyDark } from './typography/styles';
 export { uploadDark } from './upload/styles';
 export { watermarkDark } from './watermark/styles';
 export { rowRtl as unstableRowRtl } from './legacy-grid/styles';
+export { toggleButtonDark } from './toggle-button/styles';
 export { scrollbarDark } from './_internal/scrollbar/styles';
 export { internalSelectMenuDark } from './_internal/select-menu/styles';
 export { internalSelectionDark } from './_internal/selection/styles';

package/es/styles.js

@@ -56,6 +56,7 @@ export { sliderDark } from './slider/styles';
 export { spaceDark, spaceRtl as unstableSpaceRtl } from './space/styles';
 export { spinDark } from './spin/styles';
 export { statisticDark, statisticRtl as unstableStatisticRtl } from './statistic/styles';
+export { statusDark } from './status/styles';
 export { stepsDark, stepsRtl as unstableStepsRtl } from './steps/styles';
 export { switchDark } from './switch/styles';
 export { tableDark, tableRtl as unstableTableRtl } from './table/styles';
@@ -72,6 +73,7 @@ export { typographyDark } from './typography/styles';
 export { uploadDark } from './upload/styles';
 export { watermarkDark } from './watermark/styles';
 export { rowRtl as unstableRowRtl } from './legacy-grid/styles';
+export { toggleButtonDark } from './toggle-button/styles';
 // danger zone, internal styles
 export { scrollbarDark } from './_internal/scrollbar/styles';
 export { internalSelectMenuDark } from './_internal/select-menu/styles';

package/es/switch/src/Switch.d.ts

@@ -44,6 +44,21 @@ export declare const switchProps: {
     /** @deprecated */
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"Switch", {
+        buttonHeightSmall: string;
+        buttonHeightMedium: string;
+        buttonHeightLarge: string;
+        buttonWidthSmall: string;
+        buttonWidthMedium: string;
+        buttonWidthLarge: string;
+        buttonWidthPressedSmall: string;
+        buttonWidthPressedMedium: string;
+        buttonWidthPressedLarge: string;
+        railHeightSmall: string;
+        railHeightMedium: string;
+        railHeightLarge: string;
+        railWidthSmall: string;
+        railWidthMedium: string;
+        railWidthLarge: string;
         iconColor: string;
         textColor: string;
         loadingColor: string;
@@ -63,8 +78,10 @@ export declare const switchProps: {
         railBorderRadiusLarge: string;
         buttonBorderRadiusSmall: string;
         buttonBorderRadiusMedium: string;
-        buttonBorderRadiusLarge: string;
+        buttonBorderRadiusLarge: string; /** @deprecated */
         boxShadowFocus: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Switch", {
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -80,8 +97,6 @@ export declare const switchProps: {
         railWidthSmall: string;
         railWidthMedium: string;
         railWidthLarge: string;
-    }, any>>;
-    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Switch", {
         iconColor: string;
         textColor: string;
         loadingColor: string;
@@ -101,8 +116,10 @@ export declare const switchProps: {
         railBorderRadiusLarge: string;
         buttonBorderRadiusSmall: string;
         buttonBorderRadiusMedium: string;
-        buttonBorderRadiusLarge: string;
+        buttonBorderRadiusLarge: string; /** @deprecated */
         boxShadowFocus: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Switch", {
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -118,8 +135,6 @@ export declare const switchProps: {
         railWidthSmall: string;
         railWidthMedium: string;
         railWidthLarge: string;
-    }, any>>>;
-    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Switch", {
         iconColor: string;
         textColor: string;
         loadingColor: string;
@@ -139,23 +154,8 @@ export declare const switchProps: {
         railBorderRadiusLarge: string;
         buttonBorderRadiusSmall: string;
         buttonBorderRadiusMedium: string;
-        buttonBorderRadiusLarge: string;
+        buttonBorderRadiusLarge: string; /** @deprecated */
         boxShadowFocus: string;
-        buttonHeightSmall: string;
-        buttonHeightMedium: string;
-        buttonHeightLarge: string;
-        buttonWidthSmall: string;
-        buttonWidthMedium: string;
-        buttonWidthLarge: string;
-        buttonWidthPressedSmall: string;
-        buttonWidthPressedMedium: string;
-        buttonWidthPressedLarge: string;
-        railHeightSmall: string;
-        railHeightMedium: string;
-        railHeightLarge: string;
-        railWidthSmall: string;
-        railWidthMedium: string;
-        railWidthLarge: string;
     }, any>>>;
 };
 export type SwitchProps = ExtractPublicPropTypes<typeof switchProps>;
@@ -202,6 +202,21 @@ declare const _default: import("vue").DefineComponent<{
     /** @deprecated */
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"Switch", {
+        buttonHeightSmall: string;
+        buttonHeightMedium: string;
+        buttonHeightLarge: string;
+        buttonWidthSmall: string;
+        buttonWidthMedium: string;
+        buttonWidthLarge: string;
+        buttonWidthPressedSmall: string;
+        buttonWidthPressedMedium: string;
+        buttonWidthPressedLarge: string;
+        railHeightSmall: string;
+        railHeightMedium: string;
+        railHeightLarge: string;
+        railWidthSmall: string;
+        railWidthMedium: string;
+        railWidthLarge: string;
         iconColor: string;
         textColor: string;
         loadingColor: string;
@@ -221,8 +236,10 @@ declare const _default: import("vue").DefineComponent<{
         railBorderRadiusLarge: string;
         buttonBorderRadiusSmall: string;
         buttonBorderRadiusMedium: string;
-        buttonBorderRadiusLarge: string;
+        buttonBorderRadiusLarge: string; /** @deprecated */
         boxShadowFocus: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Switch", {
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -238,8 +255,6 @@ declare const _default: import("vue").DefineComponent<{
         railWidthSmall: string;
         railWidthMedium: string;
         railWidthLarge: string;
-    }, any>>;
-    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Switch", {
         iconColor: string;
         textColor: string;
         loadingColor: string;
@@ -259,8 +274,10 @@ declare const _default: import("vue").DefineComponent<{
         railBorderRadiusLarge: string;
         buttonBorderRadiusSmall: string;
         buttonBorderRadiusMedium: string;
-        buttonBorderRadiusLarge: string;
+        buttonBorderRadiusLarge: string; /** @deprecated */
         boxShadowFocus: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Switch", {
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -276,8 +293,6 @@ declare const _default: import("vue").DefineComponent<{
         railWidthSmall: string;
         railWidthMedium: string;
         railWidthLarge: string;
-    }, any>>>;
-    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Switch", {
         iconColor: string;
         textColor: string;
         loadingColor: string;
@@ -297,23 +312,8 @@ declare const _default: import("vue").DefineComponent<{
         railBorderRadiusLarge: string;
         buttonBorderRadiusSmall: string;
         buttonBorderRadiusMedium: string;
-        buttonBorderRadiusLarge: string;
+        buttonBorderRadiusLarge: string; /** @deprecated */
         boxShadowFocus: string;
-        buttonHeightSmall: string;
-        buttonHeightMedium: string;
-        buttonHeightLarge: string;
-        buttonWidthSmall: string;
-        buttonWidthMedium: string;
-        buttonWidthLarge: string;
-        buttonWidthPressedSmall: string;
-        buttonWidthPressedMedium: string;
-        buttonWidthPressedLarge: string;
-        railHeightSmall: string;
-        railHeightMedium: string;
-        railHeightLarge: string;
-        railWidthSmall: string;
-        railWidthMedium: string;
-        railWidthLarge: string;
     }, any>>>;
 }, {
     handleClick: () => void;
@@ -400,6 +400,21 @@ declare const _default: import("vue").DefineComponent<{
     /** @deprecated */
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"Switch", {
+        buttonHeightSmall: string;
+        buttonHeightMedium: string;
+        buttonHeightLarge: string;
+        buttonWidthSmall: string;
+        buttonWidthMedium: string;
+        buttonWidthLarge: string;
+        buttonWidthPressedSmall: string;
+        buttonWidthPressedMedium: string;
+        buttonWidthPressedLarge: string;
+        railHeightSmall: string;
+        railHeightMedium: string;
+        railHeightLarge: string;
+        railWidthSmall: string;
+        railWidthMedium: string;
+        railWidthLarge: string;
         iconColor: string;
         textColor: string;
         loadingColor: string;
@@ -419,8 +434,10 @@ declare const _default: import("vue").DefineComponent<{
         railBorderRadiusLarge: string;
         buttonBorderRadiusSmall: string;
         buttonBorderRadiusMedium: string;
-        buttonBorderRadiusLarge: string;
+        buttonBorderRadiusLarge: string; /** @deprecated */
         boxShadowFocus: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Switch", {
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -436,8 +453,6 @@ declare const _default: import("vue").DefineComponent<{
         railWidthSmall: string;
         railWidthMedium: string;
         railWidthLarge: string;
-    }, any>>;
-    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Switch", {
         iconColor: string;
         textColor: string;
         loadingColor: string;
@@ -457,8 +472,10 @@ declare const _default: import("vue").DefineComponent<{
         railBorderRadiusLarge: string;
         buttonBorderRadiusSmall: string;
         buttonBorderRadiusMedium: string;
-        buttonBorderRadiusLarge: string;
+        buttonBorderRadiusLarge: string; /** @deprecated */
         boxShadowFocus: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Switch", {
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -474,8 +491,6 @@ declare const _default: import("vue").DefineComponent<{
         railWidthSmall: string;
         railWidthMedium: string;
         railWidthLarge: string;
-    }, any>>>;
-    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Switch", {
         iconColor: string;
         textColor: string;
         loadingColor: string;
@@ -495,23 +510,8 @@ declare const _default: import("vue").DefineComponent<{
         railBorderRadiusLarge: string;
         buttonBorderRadiusSmall: string;
         buttonBorderRadiusMedium: string;
-        buttonBorderRadiusLarge: string;
+        buttonBorderRadiusLarge: string; /** @deprecated */
         boxShadowFocus: string;
-        buttonHeightSmall: string;
-        buttonHeightMedium: string;
-        buttonHeightLarge: string;
-        buttonWidthSmall: string;
-        buttonWidthMedium: string;
-        buttonWidthLarge: string;
-        buttonWidthPressedSmall: string;
-        buttonWidthPressedMedium: string;
-        buttonWidthPressedLarge: string;
-        railHeightSmall: string;
-        railHeightMedium: string;
-        railHeightLarge: string;
-        railWidthSmall: string;
-        railWidthMedium: string;
-        railWidthLarge: string;
     }, any>>>;
 }>>, {
     readonly value: string | number | boolean | undefined;
@@ -519,9 +519,9 @@ declare const _default: import("vue").DefineComponent<{
     readonly size: "small" | "medium" | "large";
     readonly disabled: boolean | undefined;
     readonly loading: boolean;
-    readonly defaultValue: string | number | boolean;
     readonly checkedValue: string | number | boolean;
     readonly uncheckedValue: string | number | boolean;
+    readonly defaultValue: string | number | boolean;
     readonly rubberBand: boolean;
 }, {}>;
 export default _default;

package/es/switch/styles/dark.js

@@ -1,13 +1,8 @@
-import { changeColor } from 'seemly';
-import commonVars from './_common';
 import { commonDark } from '../../_styles/common';
+import { self } from './light';
 const switchDark = {
     name: 'Switch',
     common: commonDark,
-    self(vars) {
-        const { primaryColorSuppl, opacityDisabled, borderRadius, primaryColor, textColor2, baseColor } = vars;
-        const railOverlayColor = '#C5C7CA';
-        return Object.assign(Object.assign({}, commonVars), { iconColor: baseColor, textColor: textColor2, loadingColor: primaryColorSuppl, loadingColorActive: primaryColor, opacityDisabled, railColor: railOverlayColor, railColorActive: primaryColorSuppl, railColorActiveDisabled: 'rgba(187, 162, 253, 1)', buttonBoxShadow: '0 0 0 8px rgba(197, 199, 202, 0.48)', buttonBoxShadowHover: '0 0 0 8px rgba(197, 199, 202, 0.24)', buttonBoxShadowCheckedHover: '0 0 0 8px rgba(187, 162, 253, 0.24)', buttonBoxShadowChecked: '0 0 0 8px rgba(187, 162, 253, 0.48)', buttonColor: '#FFF', buttonColorDisabled: '#E7E8EA', railBorderRadiusSmall: borderRadius, railBorderRadiusMedium: borderRadius, railBorderRadiusLarge: borderRadius, buttonBorderRadiusSmall: borderRadius, buttonBorderRadiusMedium: borderRadius, buttonBorderRadiusLarge: borderRadius, boxShadowFocus: `0 0 8px 0 ${changeColor(primaryColor, { alpha: 0.3 })}` });
-    }
+    self
 };
 export default switchDark;

package/es/switch/styles/light.d.ts

@@ -1,6 +1,21 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import type { Theme } from '../../_mixins';
-declare const self: (vars: ThemeCommonVars) => {
+export declare const self: (vars: ThemeCommonVars) => {
+    buttonHeightSmall: string;
+    buttonHeightMedium: string;
+    buttonHeightLarge: string;
+    buttonWidthSmall: string;
+    buttonWidthMedium: string;
+    buttonWidthLarge: string;
+    buttonWidthPressedSmall: string;
+    buttonWidthPressedMedium: string;
+    buttonWidthPressedLarge: string;
+    railHeightSmall: string;
+    railHeightMedium: string;
+    railHeightLarge: string;
+    railWidthSmall: string;
+    railWidthMedium: string;
+    railWidthLarge: string;
     iconColor: string;
     textColor: string;
     loadingColor: string;
@@ -22,21 +37,6 @@ declare const self: (vars: ThemeCommonVars) => {
     buttonBorderRadiusMedium: string;
     buttonBorderRadiusLarge: string;
     boxShadowFocus: string;
-    buttonHeightSmall: string;
-    buttonHeightMedium: string;
-    buttonHeightLarge: string;
-    buttonWidthSmall: string;
-    buttonWidthMedium: string;
-    buttonWidthLarge: string;
-    buttonWidthPressedSmall: string;
-    buttonWidthPressedMedium: string;
-    buttonWidthPressedLarge: string;
-    railHeightSmall: string;
-    railHeightMedium: string;
-    railHeightLarge: string;
-    railWidthSmall: string;
-    railWidthMedium: string;
-    railWidthLarge: string;
 };
 export type SwitchThemeVars = ReturnType<typeof self>;
 declare const switchLight: Theme<'Switch', SwitchThemeVars>;

package/es/switch/styles/light.js

@@ -1,10 +1,53 @@
 import { changeColor } from 'seemly';
-import commonVars from './_common';
 import { commonLight } from '../../_styles/common';
-const self = (vars) => {
-    const { primaryColor, opacityDisabled, borderRadius, textColor3 } = vars;
-    const railOverlayColor = '#C5C7CA';
-    return Object.assign(Object.assign({}, commonVars), { iconColor: textColor3, textColor: 'white', loadingColor: railOverlayColor, loadingColorActive: primaryColor, opacityDisabled, railColor: railOverlayColor, railColorActive: primaryColor, railColorActiveDisabled: 'rgba(187, 162, 253, 1)', buttonBoxShadow: '0 0 0 8px rgba(197, 199, 202, 0.48)', buttonBoxShadowHover: '0 0 0 8px rgba(197, 199, 202, 0.24)', buttonBoxShadowCheckedHover: '0 0 0 8px rgba(187, 162, 253, 0.24)', buttonBoxShadowChecked: '0 0 0 8px rgba(187, 162, 253, 0.48)', buttonColor: '#FFF', buttonColorDisabled: '#E7E8EA', railBorderRadiusSmall: borderRadius, railBorderRadiusMedium: borderRadius, railBorderRadiusLarge: borderRadius, buttonBorderRadiusSmall: borderRadius, buttonBorderRadiusMedium: borderRadius, buttonBorderRadiusLarge: borderRadius, boxShadowFocus: `0 0 0 2px ${changeColor(primaryColor, { alpha: 0.2 })}` });
+export const self = (vars) => {
+    const { opacityDisabled, borderRadius, elementsPrimary, textQuaternary, elementsTertiary, brandPrimary500, elementsQuinary, brandPrimary300, elementsSecondary } = vars;
+    return {
+        buttonHeightSmall: '14px',
+        buttonHeightMedium: '20px',
+        buttonHeightLarge: '20px',
+        buttonWidthSmall: '14px',
+        buttonWidthMedium: '20px',
+        buttonWidthLarge: '20px',
+        buttonWidthPressedSmall: '14px',
+        buttonWidthPressedMedium: '20px',
+        buttonWidthPressedLarge: '20px',
+        railHeightSmall: '18px',
+        railHeightMedium: '24px',
+        railHeightLarge: '24px',
+        railWidthSmall: '32px',
+        railWidthMedium: '44px',
+        railWidthLarge: '44px',
+        iconColor: elementsPrimary,
+        textColor: textQuaternary,
+        loadingColor: elementsPrimary,
+        loadingColorActive: elementsPrimary,
+        opacityDisabled,
+        railColor: elementsQuinary,
+        railColorActive: brandPrimary500,
+        railColorActiveDisabled: brandPrimary300,
+        buttonBoxShadow: `0 0 0 8px ${changeColor(elementsQuinary, {
+            alpha: 0.24
+        })}`,
+        buttonBoxShadowHover: `0 0 0 8px ${changeColor(elementsQuinary, {
+            alpha: 0.48
+        })}`,
+        buttonBoxShadowCheckedHover: `0 0 0 8px ${changeColor(brandPrimary300, {
+            alpha: 0.24
+        })}`,
+        buttonBoxShadowChecked: `0 0 0 8px ${changeColor(brandPrimary300, {
+            alpha: 0.48
+        })}`,
+        buttonColor: elementsSecondary,
+        buttonColorDisabled: elementsTertiary,
+        railBorderRadiusSmall: borderRadius,
+        railBorderRadiusMedium: borderRadius,
+        railBorderRadiusLarge: borderRadius,
+        buttonBorderRadiusSmall: borderRadius,
+        buttonBorderRadiusMedium: borderRadius,
+        buttonBorderRadiusLarge: borderRadius,
+        boxShadowFocus: `0 0 0 2px ${changeColor(brandPrimary300, { alpha: 0.24 })}`
+    };
 };
 const switchLight = {
     name: 'Switch',