@salutejs/sdds-os 0.19.0-next-sbcom.0 → 0.19.0

package/dist/styled-components/es/components/Switch/Switch.config.js

@@ -100,8 +100,8 @@ function _templateObject4() {
         ": initial;\n                ",
         ": var(--surface-accent);\n                ",
         ": var(--surface-accent-hover);\n                ",
-        ": var(--surface-transparent-tertiary);\n                ",
-        ": var(--surface-transparent-tertiary-hover);\n                ",
+        ": var(--surface-solid-tertiary);\n                ",
+        ": var(--surface-solid-tertiary-hover);\n                ",
         ": 0;\n                ",
         ": 0;\n                ",
         ": var(--on-dark-surface-solid-default);\n                ",
@@ -116,7 +116,7 @@ function _templateObject4() {
 function _templateObject5() {
     var data = _tagged_template_literal([
         "\n                ",
-        ": 0.4;\n            "
+        ": 1;\n            "
     ]);
     _templateObject5 = function _templateObject() {
         return data;
@@ -133,6 +133,19 @@ function _templateObject6() {
     };
     return data;
 }
+function _templateObject7() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": var(--text-tertiary);\n                ",
+        ": var(--text-tertiary);\n                ",
+        ": var(--surface-accent-minor);\n                ",
+        ": var(--surface-solid-secondary);\n            "
+    ]);
+    _templateObject7 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
 import { css, switchTokens } from '@salutejs/plasma-new-hope/styled-components';
 export var config = {
     defaults: {
@@ -160,5 +173,12 @@ export var config = {
         focused: {
             true: css(_templateObject6(), switchTokens.trackFocusColor)
         }
-    }
+    },
+    intersections: [
+        {
+            view: 'default',
+            disabled: true,
+            style: css(_templateObject7(), switchTokens.labelColor, switchTokens.descriptionColor, switchTokens.trackBackgroundColorOn, switchTokens.trackBackgroundColorOff)
+        }
+    ]
 };

package/dist/styled-components/es/components/Tabs/horizontal/HorizontalIconTabItem.config.js

@@ -72,7 +72,7 @@ import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components';
 export var config = {
     defaults: {
         view: 'divider',
-        size: 'xs'
+        size: 's'
     },
     variations: {
         view: {

package/dist/styled-components/es/components/Tabs/horizontal/HorizontalTabItem.config.js

@@ -147,7 +147,7 @@ import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components';
 export var config = {
     defaults: {
         view: 'divider',
-        size: 'l'
+        size: 'm'
     },
     variations: {
         view: {

package/dist/styled-components/es/components/Tabs/horizontal/HorizontalTabs.config.js

@@ -31,7 +31,7 @@ function _templateObject1() {
         ": var(--text-secondary);\n                ",
         ": var(--text-secondary-hover);\n                ",
         ": var(---text-secondary-active);\n                ",
-        ": var(--surface-transparent-primary);\n                ",
+        ": var(--surface-solid-primary);\n                ",
         ": var(--surface-accent);\n\n                ",
         ": 0rem;\n                ",
         ": transparent;\n                ",
@@ -51,7 +51,7 @@ function _templateObject2() {
         ": transparent;\n                ",
         ": var(--surface-accent);\n\n                ",
         ": 0.0625rem;\n                ",
-        ": var(--surface-transparent-tertiary);\n                ",
+        ": var(--surface-solid-tertiary);\n                ",
         ": 0.0625rem;\n            "
     ]);
     _templateObject2 = function _templateObject() {

package/dist/styled-components/es/components/Tabs/vertical/VerticalIconTabItem.config.js

@@ -74,7 +74,7 @@ import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components';
 export var config = {
     defaults: {
         view: 'divider',
-        size: 'xs'
+        size: 's'
     },
     variations: {
         view: {

package/dist/styled-components/es/components/Tabs/vertical/VerticalTabItem.config.js

@@ -113,7 +113,7 @@ import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components';
 export var config = {
     defaults: {
         view: 'divider',
-        size: 'l'
+        size: 'm'
     },
     variations: {
         view: {

package/dist/styled-components/es/components/Tabs/vertical/VerticalTabs.config.js

@@ -18,7 +18,7 @@ function _templateObject() {
         ": var(--surface-accent);\n\n                ",
         ": 0.0625rem;\n                ",
         ": 0.0625rem;\n                ",
-        ": var(--surface-transparent-tertiary);\n                ",
+        ": var(--surface-solid-tertiary);\n                ",
         ": 0.0625rem;\n            "
     ]);
     _templateObject = function _templateObject() {
@@ -78,7 +78,7 @@ import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components';
 export var config = {
     defaults: {
         view: 'divider',
-        size: 'l'
+        size: 'm'
     },
     variations: {
         view: {

package/dist/styled-components/es/components/TextArea/TextArea.clear.config.js

@@ -32,7 +32,7 @@ function _templateObject() {
         ": var(--surface-negative);\n                ",
         ": var(--text-tertiary);\n\n                ",
         ": var(--text-primary);\n\n                ",
-        ": var(--surface-transparent-tertiary);\n                ",
+        ": var(--surface-solid-tertiary);\n                ",
         ": var(--text-secondary);\n                ",
         ": var(--surface-accent);\n\n                ",
         ": var(--text-secondary);\n                ",
@@ -333,7 +333,7 @@ function _templateObject9() {
         "\n                ",
         ": var(--text-primary);\n                ",
         ": var(--text-secondary);\n                ",
-        ": var(--surface-transparent-primary);\n                ",
+        ": var(--surface-solid-primary);\n                ",
         ": 0.4;\n            "
     ]);
     _templateObject9 = function _templateObject() {

package/dist/styled-components/es/components/TextArea/TextArea.config.js

@@ -11,14 +11,14 @@ function _tagged_template_literal(strings, raw) {
 function _templateObject() {
     var data = _tagged_template_literal([
         "\n                ",
-        ": var(--surface-transparent-primary);\n                ",
-        ": var(--surface-transparent-primary-hover);\n                ",
-        ": var(--surface-transparent-primary-active);\n                ",
-        ": var(--surface-transparent-secondary);\n\n                ",
-        ": var(--surface-transparent-primary);\n                ",
-        ": var(--surface-transparent-primary-hover);\n                ",
-        ": var(--surface-transparent-primary-active);\n                ",
-        ": var(--surface-transparent-secondary);\n\n                ",
+        ": var(--surface-solid-primary);\n                ",
+        ": var(--surface-solid-primary-hover);\n                ",
+        ": var(--surface-solid-primary-active);\n                ",
+        ": var(--surface-solid-secondary);\n\n                ",
+        ": var(--surface-solid-primary);\n                ",
+        ": var(--surface-solid-primary-hover);\n                ",
+        ": var(--surface-solid-primary-active);\n                ",
+        ": var(--surface-solid-secondary);\n\n                ",
         ": var(--text-primary);\n                ",
         ": var(--text-primary);\n                ",
         ": var(--text-accent);\n\n                ",
@@ -31,13 +31,13 @@ function _templateObject() {
         ": var(--text-secondary-active);\n\n                ",
         ": var(--surface-negative);\n                ",
         ": var(--text-tertiary);\n\n                ",
-        ": var(--surface-transparent-tertiary);\n                ",
-        ": var(--surface-transparent-tertiary-hover);\n                ",
-        ": var(--surface-transparent-tertiary-active);\n                ",
-        ": var(--surface-transparent-primary);\n                ",
-        ": var(--surface-transparent-primary-active);\n                ",
-        ": var(--surface-transparent-primary-hover);\n\n                ",
-        ": var(--surface-transparent-tertiary);\n                ",
+        ": var(--surface-solid-tertiary);\n                ",
+        ": var(--surface-solid-tertiary-hover);\n                ",
+        ": var(--surface-solid-tertiary-active);\n                ",
+        ": var(--surface-solid-primary);\n                ",
+        ": var(--surface-solid-primary-active);\n                ",
+        ": var(--surface-solid-primary-hover);\n\n                ",
+        ": var(--surface-solid-tertiary);\n                ",
         ": var(--text-secondary);\n                ",
         ": var(--surface-accent);\n                ",
         ": var(--text-secondary);\n                ",
@@ -52,14 +52,14 @@ function _templateObject() {
 function _templateObject1() {
     var data = _tagged_template_literal([
         "\n                ",
-        ": var(--surface-transparent-warning);\n                ",
-        ": var(--surface-transparent-warning-hover);\n                ",
-        ": var(--surface-transparent-warning-active);\n                ",
-        ": var(--surface-transparent-warning);\n\n                ",
-        ": var(--surface-transparent-warning);\n                ",
-        ": var(--surface-transparent-warning-hover);\n                ",
-        ": var(--surface-transparent-warning-active);\n                ",
-        ": var(--surface-transparent-warning);\n\n                ",
+        ": var(--surface-solid-warning);\n                ",
+        ": var(--surface-solid-warning-hover);\n                ",
+        ": var(--surface-solid-warning-active);\n                ",
+        ": var(--surface-solid-warning);\n\n                ",
+        ": var(--surface-solid-warning);\n                ",
+        ": var(--surface-solid-warning-hover);\n                ",
+        ": var(--surface-solid-warning-active);\n                ",
+        ": var(--surface-solid-warning);\n\n                ",
         ": var(--text-primary);\n                ",
         ": var(--text-primary);\n                ",
         ": var(--text-warning);\n\n                ",
@@ -72,12 +72,12 @@ function _templateObject1() {
         ": var(--text-secondary-active);\n\n                ",
         ": var(--surface-negative);\n                ",
         ": var(--text-tertiary);\n\n                ",
-        ": var(--surface-transparent-tertiary);\n                ",
-        ": var(--surface-transparent-tertiary-hover);\n                ",
-        ": var(--surface-transparent-tertiary-active);\n                ",
-        ": var(--surface-transparent-primary);\n                ",
-        ": var(--surface-transparent-primary-active);\n                ",
-        ": var(--surface-transparent-primary-hover);\n\n                ",
+        ": var(--surface-solid-tertiary);\n                ",
+        ": var(--surface-solid-tertiary-hover);\n                ",
+        ": var(--surface-solid-tertiary-active);\n                ",
+        ": var(--surface-solid-primary);\n                ",
+        ": var(--surface-solid-primary-active);\n                ",
+        ": var(--surface-solid-primary-hover);\n\n                ",
         ": var(--surface-warning);\n                ",
         ": var(--surface-warning);\n                ",
         ": var(--surface-accent);\n                ",
@@ -93,14 +93,14 @@ function _templateObject1() {
 function _templateObject2() {
     var data = _tagged_template_literal([
         "\n                ",
-        ": var(--surface-transparent-negative);\n                ",
-        ": var(--surface-transparent-negative-hover);\n                ",
-        ": var(--surface-transparent-negative-active);\n                ",
-        ": var(--surface-transparent-negative);\n\n                ",
-        ": var(--surface-transparent-negative);\n                ",
-        ": var(--surface-transparent-negative-hover);\n                ",
-        ": var(--surface-transparent-negative-active);\n                ",
-        ": var(--surface-transparent-negative);\n\n                ",
+        ": var(--surface-solid-negative);\n                ",
+        ": var(--surface-solid-negative-hover);\n                ",
+        ": var(--surface-solid-negative-active);\n                ",
+        ": var(--surface-solid-negative);\n\n                ",
+        ": var(--surface-solid-negative);\n                ",
+        ": var(--surface-solid-negative-hover);\n                ",
+        ": var(--surface-solid-negative-active);\n                ",
+        ": var(--surface-solid-negative);\n\n                ",
         ": var(--text-primary);\n                ",
         ": var(--text-primary);\n                ",
         ": var(--text-negative);\n\n                ",
@@ -113,12 +113,12 @@ function _templateObject2() {
         ": var(--text-secondary-active);\n\n                ",
         ": var(--surface-negative);\n                ",
         ": var(--text-tertiary);\n\n                ",
-        ": var(--surface-transparent-tertiary);\n                ",
-        ": var(--surface-transparent-tertiary-hover);\n                ",
-        ": var(--surface-transparent-tertiary-active);\n                ",
-        ": var(--surface-transparent-primary);\n                ",
-        ": var(--surface-transparent-primary-active);\n                ",
-        ": var(--surface-transparent-primary-hover);\n\n                ",
+        ": var(--surface-solid-tertiary);\n                ",
+        ": var(--surface-solid-tertiary-hover);\n                ",
+        ": var(--surface-solid-tertiary-active);\n                ",
+        ": var(--surface-solid-primary);\n                ",
+        ": var(--surface-solid-primary-active);\n                ",
+        ": var(--surface-solid-primary-hover);\n\n                ",
         ": var(--surface-negative);\n                ",
         ": var(--surface-negative);\n                ",
         ": var(--surface-accent);\n                ",
@@ -338,9 +338,9 @@ function _templateObject8() {
     var data = _tagged_template_literal([
         "\n                ",
         ": 0.1;\n                ",
-        ": var(--surface-transparent-primary);\n                ",
+        ": var(--surface-solid-primary);\n                ",
         ": var(--text-primary);\n                ",
-        ": var(--surface-transparent-primary);\n                ",
+        ": var(--surface-solid-primary);\n                ",
         ": 0.4;\n            "
     ]);
     _templateObject8 = function _templateObject() {
@@ -353,7 +353,7 @@ function _templateObject9() {
         "\n                ",
         ": 0.4;\n                ",
         ": var(--text-secondary);\n                ",
-        ": var(--surface-transparent-primary);\n                ",
+        ": var(--surface-solid-primary);\n                ",
         ": var(--text-secondary);\n            "
     ]);
     _templateObject9 = function _templateObject() {
@@ -365,6 +365,7 @@ import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-
 export var config = {
     defaults: {
         view: 'default',
+        size: 'm',
         focused: 'true'
     },
     variations: {

package/dist/styled-components/es/components/TextField/TextField.config.js

@@ -14,9 +14,9 @@ function _templateObject() {
         ": var(--text-primary);\n\n                ",
         ": var(--text-secondary);\n                ",
         ": var(--text-tertiary);\n\n                ",
-        ": var(--surface-transparent-primary);\n                ",
-        ": var(--surface-transparent-primary-hover);\n                ",
-        ": var(--surface-transparent-secondary);\n                ",
+        ": var(--surface-solid-primary);\n                ",
+        ": var(--surface-solid-primary-hover);\n                ",
+        ": var(--surface-solid-primary);\n                ",
         ": var(--text-accent);\n                ",
         ": var(--text-tertiary);\n                ",
         ": var(--text-tertiary);\n                ",
@@ -27,12 +27,13 @@ function _templateObject() {
         ": var(--text-secondary);\n                ",
         ": var(--text-secondary-hover);\n                ",
         ": var(--text-secondary-active);\n\n                ",
-        ": var(--surface-transparent-tertiary);\n                ",
+        ": var(--surface-solid-tertiary);\n                ",
         ": var(--text-secondary);\n                ",
         ": var(--surface-accent);\n\n                ",
         ": var(--text-accent);\n                ",
         ": var(--surface-negative);\n                ",
-        ": var(--text-tertiary);\n            "
+        ": var(--text-tertiary);\n\n                ",
+        ": var(--outline-primary);\n            "
     ]);
     _templateObject = function _templateObject() {
         return data;
@@ -45,9 +46,9 @@ function _templateObject1() {
         ": var(--text-primary);\n\n                ",
         ": var(--text-secondary);\n                ",
         ": var(--text-tertiary);\n\n                ",
-        ": var(--surface-transparent-positive);\n                ",
-        ": var(--surface-transparent-positive-hover);\n                ",
-        ": var(--surface-transparent-positive-active);\n                ",
+        ": var(--surface-solid-primary);\n                ",
+        ": var(--surface-solid-primary-hover);\n                ",
+        ": var(--surface-solid-primary);\n                ",
         ": var(--text-accent);\n                ",
         ": var(--text-tertiary);\n                ",
         ": var(--text-tertiary);\n                ",
@@ -63,7 +64,8 @@ function _templateObject1() {
         ": var(--surface-accent);\n\n                ",
         ": var(--text-accent);\n                ",
         ": var(--surface-negative);\n                ",
-        ": var(--text-tertiary);\n            "
+        ": var(--text-tertiary);\n\n                ",
+        ": var(--outline-positive);\n            "
     ]);
     _templateObject1 = function _templateObject() {
         return data;
@@ -76,9 +78,9 @@ function _templateObject2() {
         ": var(--text-primary);\n\n                ",
         ": var(--text-secondary);\n                ",
         ": var(--text-tertiary);\n\n                ",
-        ": var(--surface-transparent-warning);\n                ",
-        ": var(--surface-transparent-warning-hover);\n                ",
-        ": var(--surface-transparent-warning-active);\n                ",
+        ": var(--surface-solid-primary);\n                ",
+        ": var(--surface-solid-primary-hover);\n                ",
+        ": var(--surface-solid-primary);\n                ",
         ": var(--text-accent);\n                ",
         ": var(--text-tertiary);\n                ",
         ": var(--text-tertiary);\n                ",
@@ -94,7 +96,8 @@ function _templateObject2() {
         ": var(--surface-accent);\n\n                ",
         ": var(--text-accent);\n                ",
         ": var(--surface-negative);\n                ",
-        ": var(--text-tertiary);\n            "
+        ": var(--text-tertiary);\n\n                ",
+        ": var(--outline-warning);\n            "
     ]);
     _templateObject2 = function _templateObject() {
         return data;
@@ -107,9 +110,9 @@ function _templateObject3() {
         ": var(--text-primary);\n\n                ",
         ": var(--text-secondary);\n                ",
         ": var(--text-tertiary);\n\n                ",
-        ": var(--surface-transparent-negative);\n                ",
-        ": var(--surface-transparent-negative-hover);\n                ",
-        ": var(--surface-transparent-negative-active);\n                ",
+        ": var(--surface-solid-primary);\n                ",
+        ": var(--surface-solid-primary-hover);\n                ",
+        ": var(--surface-solid-primary);\n                ",
         ": var(--text-accent);\n                ",
         ": var(--text-tertiary);\n                ",
         ": var(--text-tertiary);\n                ",
@@ -125,7 +128,8 @@ function _templateObject3() {
         ": var(--surface-accent);\n\n                ",
         ": var(--text-accent);\n                ",
         ": var(--surface-negative);\n                ",
-        ": var(--text-tertiary);\n            "
+        ": var(--text-tertiary);\n\n                ",
+        ": var(--outline-negative);\n            "
     ]);
     _templateObject3 = function _templateObject() {
         return data;
@@ -332,14 +336,14 @@ function _templateObject9() {
     var data = _tagged_template_literal([
         "\n                ",
         ": var(--text-primary);\n                ",
-        ": var(--surface-transparent-secondary);\n                ",
+        ": var(--surface-solid-secondary);\n                ",
         ": var(--text-primary);\n                ",
-        ": var(--surface-transparent-secondary-hover);\n                ",
+        ": var(--surface-solid-secondary-hover);\n                ",
         ": var(--text-primary);\n                ",
-        ": var(--surface-transparent-secondary-active);\n                ",
-        ": var(--surface-transparent-secondary);\n                ",
+        ": var(--surface-solid-secondary-active);\n                ",
+        ": var(--surface-solid-tertiary);\n                ",
         ": var(--text-primary);\n                ",
-        ": var(--surface-transparent-secondary);\n                ",
+        ": var(--surface-solid-tertiary);\n                ",
         ": var(--text-primary);\n\n                ",
         ": var(--text-secondary);\n                ",
         ": var(--text-secondary);\n                ",
@@ -513,7 +517,16 @@ function _templateObject16() {
 function _templateObject17() {
     var data = _tagged_template_literal([
         "\n                ",
-        ": 0.4;\n            "
+        ": 1;\n                ",
+        ": var(--text-tertiary);\n                ",
+        ": var(--text-tertiary);\n                ",
+        ": var(--text-secondary);\n                ",
+        ": var(--text-tertiary);\n                ",
+        ": var(--text-tertiary);\n                ",
+        ": var(--text-tertiary);\n                ",
+        ": var(--surface-solid-tertiary);\n                ",
+        ": transparent;\n                ",
+        ": none;\n            "
     ]);
     _templateObject17 = function _templateObject() {
         return data;
@@ -523,15 +536,16 @@ function _templateObject17() {
 function _templateObject18() {
     var data = _tagged_template_literal([
         "\n                ",
-        ": 0.1;\n                ",
+        ": 1;\n                ",
         ": var(--text-primary);\n                ",
-        ": var(--surface-transparent-primary);\n                ",
+        ": var(--surface-solid-secondary);\n                ",
         ": var(--text-secondary);\n                ",
         ": var(--text-secondary);\n                ",
         ": var(--text-secondary);\n                ",
         ": var(--text-primary);\n                ",
-        ": var(--surface-transparent-primary);\n                ",
-        ": 0.4;\n            "
+        ": var(--surface-solid-primary);\n                ",
+        ": var(--text-tertiary);\n                ",
+        ": none;\n            "
     ]);
     _templateObject18 = function _templateObject() {
         return data;
@@ -547,10 +561,10 @@ export var config = {
     },
     variations: {
         view: {
-            default: css(_templateObject(), tokens.color, tokens.placeholderColor, tokens.placeholderColorFocus, tokens.backgroundColor, tokens.backgroundColorHover, tokens.backgroundColorFocus, tokens.caretColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
-            positive: css(_templateObject1(), tokens.color, tokens.placeholderColor, tokens.placeholderColorFocus, tokens.backgroundColor, tokens.backgroundColorHover, tokens.backgroundColorFocus, tokens.caretColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
-            warning: css(_templateObject2(), tokens.color, tokens.placeholderColor, tokens.placeholderColorFocus, tokens.backgroundColor, tokens.backgroundColorHover, tokens.backgroundColorFocus, tokens.caretColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
-            negative: css(_templateObject3(), tokens.color, tokens.placeholderColor, tokens.placeholderColorFocus, tokens.backgroundColor, tokens.backgroundColorHover, tokens.backgroundColorFocus, tokens.caretColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor)
+            default: css(_templateObject(), tokens.color, tokens.placeholderColor, tokens.placeholderColorFocus, tokens.backgroundColor, tokens.backgroundColorHover, tokens.backgroundColorFocus, tokens.caretColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor, tokens.borderColorFocus),
+            positive: css(_templateObject1(), tokens.color, tokens.placeholderColor, tokens.placeholderColorFocus, tokens.backgroundColor, tokens.backgroundColorHover, tokens.backgroundColorFocus, tokens.caretColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor, tokens.borderColor),
+            warning: css(_templateObject2(), tokens.color, tokens.placeholderColor, tokens.placeholderColorFocus, tokens.backgroundColor, tokens.backgroundColorHover, tokens.backgroundColorFocus, tokens.caretColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor, tokens.borderColor),
+            negative: css(_templateObject3(), tokens.color, tokens.placeholderColor, tokens.placeholderColorFocus, tokens.backgroundColor, tokens.backgroundColorHover, tokens.backgroundColorFocus, tokens.caretColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor, tokens.borderColor)
         },
         size: {
             m: css(_templateObject4(), tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.rightContentWithHintMargin, tokens.contentRightWrapperGap, tokens.contentRightWrapperMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.hintMargin, tokens.hintTargetSize, tokens.hintInnerLabelPlacementOffset, tokens.clearHintInnerLabelPlacementOffset, tokens.titleCaptionInnerLabelOffset, tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPadding, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.indicatorSizeInner, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementInnerRight, tokens.indicatorLabelPlacementOuterRight, tokens.textBeforeMargin, tokens.textAfterMargin),
@@ -576,10 +590,10 @@ export var config = {
             s: css(_templateObject16(), tokens.tooltipPaddingTop, tokens.tooltipPaddingRight, tokens.tooltipPaddingBottom, tokens.tooltipPaddingLeft, tokens.tooltipMinHeight, tokens.tooltipBorderRadius, tokens.tooltipTextFontFamily, tokens.tooltipTextFontSize, tokens.tooltipTextFontStyle, tokens.tooltipTextFontWeight, tokens.tooltipTextFontLetterSpacing, tokens.tooltipTextFontLineHeight, tokens.tooltipContentLeftMargin, tokens.tooltipArrowMaskWidth, tokens.tooltipArrowMaskHeight, tokens.tooltipArrowMaskImage, tokens.tooltipArrowHeight, tokens.tooltipArrowEdgeMargin)
         },
         disabled: {
-            true: css(_templateObject17(), tokens.disabledOpacity)
+            true: css(_templateObject17(), tokens.disabledOpacity, tokens.color, tokens.placeholderColor, tokens.labelColor, tokens.titleCaptionColor, tokens.leftHelperColor, tokens.contentSlotColor, tokens.backgroundColor, tokens.borderColor, tokens.chipCloseIconDisplay)
         },
         readOnly: {
-            true: css(_templateObject18(), tokens.readOnlyOpacity, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.titleCaptionColorReadOnly, tokens.labelColorReadOnly, tokens.dividerColorReadOnly, tokens.contentSlotRightOpacityReadOnly)
+            true: css(_templateObject18(), tokens.readOnlyOpacity, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.titleCaptionColorReadOnly, tokens.labelColorReadOnly, tokens.dividerColorReadOnly, tokens.contentSlotRightColor, tokens.chipCloseIconDisplay)
         }
     }
 };

package/dist/styled-components/es/components/Tokens/Colors/Colors.styles.js

@@ -0,0 +1,108 @@
+import styled from 'styled-components';
+import { AccordionItem } from '../../Accordion';
+export var ColorTokensWrapper = styled.div.withConfig({
+    displayName: "Colors.styles__ColorTokensWrapper",
+    componentId: "sc-6b252331-0"
+})([
+    "padding-top:1.5rem;width:100%;"
+]);
+export var SubthemeSwitcher = styled.div.withConfig({
+    displayName: "Colors.styles__SubthemeSwitcher",
+    componentId: "sc-6b252331-1"
+})([
+    "margin:-0.5rem auto 2.5rem auto;width:fit-content;position:relative;&:before{content:'Подтема';position:absolute;top:50%;transform:translate(-100%,-50%);left:-0.75rem;color:var(--text-tertiary);font-family:var(--plasma-typo-body-xs-font-family);font-size:var(--plasma-typo-body-xs-font-size);font-style:var(--plasma-typo-body-xs-font-style);font-weight:var(--plasma-typo-body-xs-font-weight);bold-font-weight:var(--plasma-typo-body-xs-bold-font-weight);letter-spacing:var(--plasma-typo-body-xs-letter-spacing);line-height:var(--plasma-typo-body-xs-line-height);}"
+]);
+export var StyledSegmentGroup = styled.div.withConfig({
+    displayName: "Colors.styles__StyledSegmentGroup",
+    componentId: "sc-6b252331-2"
+})([
+    "display:flex;align-items:center;gap:0.125rem;padding:0.125rem;border-radius:999rem;background:var(--surface-transparent-secondary);"
+]);
+export var StyledSegmentItem = styled.button.withConfig({
+    displayName: "Colors.styles__StyledSegmentItem",
+    componentId: "sc-6b252331-3"
+})([
+    "height:1.75rem;padding:0.375rem 0.5rem;border:0;border-radius:999rem;cursor:pointer;color:",
+    ";background:",
+    ";font-family:var(--plasma-typo-body-xs-font-family);font-size:var(--plasma-typo-body-xs-font-size);font-style:var(--plasma-typo-body-xs-font-style);font-weight:var(--plasma-typo-body-xs-font-weight);letter-spacing:var(--plasma-typo-body-xs-letter-spacing);line-height:var(--plasma-typo-body-xs-line-height);&:hover{color:var(--text-primary);background:",
+    ";}"
+], function(param) {
+    var $isSelected = param.$isSelected;
+    return $isSelected ? 'var(--text-primary)' : 'var(--text-secondary)';
+}, function(param) {
+    var $isSelected = param.$isSelected;
+    return $isSelected ? 'var(--surface-solid-primary)' : 'transparent';
+}, function(param) {
+    var $isSelected = param.$isSelected;
+    return $isSelected ? 'var(--surface-solid-primary)' : 'var(--surface-transparent-secondary-hover)';
+});
+export var AccordionInfo = styled.div.withConfig({
+    displayName: "Colors.styles__AccordionInfo",
+    componentId: "sc-6b252331-4"
+})([
+    "display:grid;grid-template-columns:16.75rem 9.938rem 2.375rem 3.813rem 9.313rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);"
+]);
+export var Subcategory = styled.div.withConfig({
+    displayName: "Colors.styles__Subcategory",
+    componentId: "sc-6b252331-5"
+})([
+    "color:var(--text-secondary);"
+]);
+export var ColumnTitle = styled.div.withConfig({
+    displayName: "Colors.styles__ColumnTitle",
+    componentId: "sc-6b252331-6"
+})([
+    "color:var(--text-tertiary);transition:opacity 0.2s;&.color{display:flex;align-items:center;gap:2.5rem;}&.hex{padding-left:3.75rem;}"
+]);
+export var StyledAccordionItem = styled(AccordionItem).withConfig({
+    displayName: "Colors.styles__StyledAccordionItem",
+    componentId: "sc-6b252331-7"
+})([
+    "--plasma-accordion-item-padding:0;--plasma-accordion-item-padding-vertical:0;border-bottom:unset;width:50.375rem;div > div > div > svg{color:var(--text-secondary);}.accordion-item-body{margin-bottom:2.375rem;padding-top:0.125rem;transition:margin-bottom 0.2s,padding-top 0.2s;}[aria-expanded]{margin-bottom:1rem;}[aria-expanded='false']{margin-bottom:1.125rem;",
+    " ",
+    "{opacity:0;}}[aria-expanded='false'] + div > .accordion-item-body{margin:0;padding:0;}"
+], AccordionInfo, ColumnTitle);
+export var TokenInfoWrapper = styled.div.withConfig({
+    displayName: "Colors.styles__TokenInfoWrapper",
+    componentId: "sc-6b252331-8"
+})([
+    "display:flex;flex-direction:column;gap:0.75rem;margin-top:-0.125rem;"
+]);
+export var ColorTokenDataWrapper = styled.div.withConfig({
+    displayName: "Colors.styles__ColorTokenDataWrapper",
+    componentId: "sc-6b252331-9"
+})([
+    "display:flex;flex-direction:column;gap:0.5rem;"
+]);
+export var StateDataWrapper = styled.div.withConfig({
+    displayName: "Colors.styles__StateDataWrapper",
+    componentId: "sc-6b252331-10"
+})([
+    "display:flex;flex-direction:column;gap:0.5rem;margin-bottom:0.75rem;"
+]);
+export var OpacityPart = styled.span.withConfig({
+    displayName: "Colors.styles__OpacityPart",
+    componentId: "sc-6b252331-11"
+})([
+    "color:var(--text-secondary);padding-left:0.125rem;"
+]);
+export var TokenInfo = styled.div.withConfig({
+    displayName: "Colors.styles__TokenInfo",
+    componentId: "sc-6b252331-12"
+})([
+    "color:var(--text-primary);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:2.5rem;}&.no-interaction{text-align:right;}&.hex{padding-left:3.75rem;}&:not(.no-interaction):hover{color:var(--text-primary-hover);",
+    "{color:var(--text-primary-hover);}}&:not(.no-interaction):active{color:var(--text-primary-active);",
+    "{color:var(--text-secondary-active);}}&.state{padding-left:1.5rem;color:var(--text-secondary);&:hover{color:var(--text-secondary);}&:active{color:var(--text-secondary-active);}}"
+], OpacityPart, OpacityPart);
+export var ColorCircle = styled.div.withConfig({
+    displayName: "Colors.styles__ColorCircle",
+    componentId: "sc-6b252331-13"
+})([
+    "width:1.25rem;height:1.25rem;border-radius:50%;background:",
+    ";box-shadow:",
+    ";"
+], function(props) {
+    return props.background || 'transparent';
+}, function(props) {
+    return props.disableShadow ? 'none' : 'inset 0px 0px 0px 1px rgba(8, 8, 8, 0.12)';
+});