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

package/dist/styled-components/cjs/components/Select/Select.config.js

@@ -26,8 +26,13 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldPlaceholderColor}: var(--text-secondary);
                 ${_styledcomponents.selectTokens.textFieldPlaceholderColorFocus}: var(--text-tertiary);
 
+                ${_styledcomponents.selectTokens.textFieldBorderColor}: var(--outline-clear);
+                ${_styledcomponents.selectTokens.textFieldBorderColorHover}: var(--on-light-outline-solid-primary-hover);
+                ${_styledcomponents.selectTokens.textFieldBorderColorFocus}: var(--outline-primary);
+
                 ${_styledcomponents.selectTokens.textFieldBackgroundColor}: var(--surface-solid-primary);
-                ${_styledcomponents.selectTokens.textFieldBackgroundColorFocus}: var(--surface-solid-secondary);
+                ${_styledcomponents.selectTokens.textFieldBackgroundColorHover}: var(--surface-solid-primary);
+                ${_styledcomponents.selectTokens.textFieldBackgroundColorFocus}: var(--surface-solid-primary);
                 ${_styledcomponents.selectTokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${_styledcomponents.selectTokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${_styledcomponents.selectTokens.textFieldLabelColor}: var(--text-primary);
@@ -53,7 +58,7 @@ const config = {
 
                 ${_styledcomponents.selectTokens.disclosureIconColor}: var(--text-secondary);
                 ${_styledcomponents.selectTokens.disclosureIconColorHover}: var(--text-secondary-hover);
-                ${_styledcomponents.selectTokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${_styledcomponents.selectTokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${_styledcomponents.selectTokens.itemDisabledOpacity}: 0.4;
                 ${_styledcomponents.selectTokens.itemDisabledColor}: var(--text-primary);
                 ${_styledcomponents.selectTokens.textFieldHintIconColor}: var(--text-secondary);
@@ -66,6 +71,8 @@ const config = {
                 ${_styledcomponents.selectTokens.checkboxIconColor}: var(--on-dark-text-primary);
                 ${_styledcomponents.selectTokens.checkboxTriggerBorderCheckedColor}: transparent;
                 ${_styledcomponents.selectTokens.checkboxTriggerBorderColor}: var(--text-secondary);
+
+                ${_styledcomponents.selectTokens.dropdownBackgroundColor}: var(--surface-solid-primary);
             `,
             positive: (0, _styledcomponents.css)`
                 ${_styledcomponents.selectTokens.textFieldColor}: var(--text-primary);
@@ -73,8 +80,13 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldPlaceholderColor}: var(--text-secondary);
                 ${_styledcomponents.selectTokens.textFieldPlaceholderColorFocus}: var(--text-tertiary);
 
-                ${_styledcomponents.selectTokens.textFieldBackgroundColor}: var(--surface-solid-positive);
-                ${_styledcomponents.selectTokens.textFieldBackgroundColorFocus}: var(--surface-solid-positive-active);
+                ${_styledcomponents.selectTokens.textFieldBorderColor}: var(--outline-positive);
+                ${_styledcomponents.selectTokens.textFieldBorderColorHover}: var(--outline-positive-hover);
+                ${_styledcomponents.selectTokens.textFieldBorderColorFocus}: var(--outline-positive-active);
+
+                ${_styledcomponents.selectTokens.textFieldBackgroundColor}: var(--surface-solid-primary);
+                ${_styledcomponents.selectTokens.textFieldBackgroundColorHover}: var(--surface-solid-primary);
+                ${_styledcomponents.selectTokens.textFieldBackgroundColorFocus}: var(--surface-solid-primary);
                 ${_styledcomponents.selectTokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${_styledcomponents.selectTokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${_styledcomponents.selectTokens.textFieldLabelColor}: var(--text-primary);
@@ -100,7 +112,7 @@ const config = {
 
                 ${_styledcomponents.selectTokens.disclosureIconColor}: var(--text-secondary);
                 ${_styledcomponents.selectTokens.disclosureIconColorHover}: var(--text-secondary-hover);
-                ${_styledcomponents.selectTokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${_styledcomponents.selectTokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${_styledcomponents.selectTokens.itemDisabledOpacity}: 0.4;
                 ${_styledcomponents.selectTokens.itemDisabledColor}: var(--text-primary);
                 ${_styledcomponents.selectTokens.textFieldHintIconColor}: var(--text-secondary);
@@ -113,6 +125,8 @@ const config = {
                 ${_styledcomponents.selectTokens.checkboxIconColor}: var(--on-dark-text-primary);
                 ${_styledcomponents.selectTokens.checkboxTriggerBorderCheckedColor}: transparent;
                 ${_styledcomponents.selectTokens.checkboxTriggerBorderColor}: var(--text-secondary);
+
+                ${_styledcomponents.selectTokens.dropdownBackgroundColor}: var(--surface-solid-primary);
             `,
             warning: (0, _styledcomponents.css)`
                 ${_styledcomponents.selectTokens.textFieldColor}: var(--text-primary);
@@ -120,8 +134,13 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldPlaceholderColor}: var(--text-secondary);
                 ${_styledcomponents.selectTokens.textFieldPlaceholderColorFocus}: var(--text-tertiary);
 
-                ${_styledcomponents.selectTokens.textFieldBackgroundColor}: var(--surface-solid-warning);
-                ${_styledcomponents.selectTokens.textFieldBackgroundColorFocus}: var(--surface-solid-warning-active);
+                ${_styledcomponents.selectTokens.textFieldBorderColor}: var(--outline-warning);
+                ${_styledcomponents.selectTokens.textFieldBorderColorHover}: var(--outline-warning-hover);
+                ${_styledcomponents.selectTokens.textFieldBorderColorFocus}: var(--outline-warning-active);
+
+                ${_styledcomponents.selectTokens.textFieldBackgroundColor}: var(--surface-solid-primary);
+                ${_styledcomponents.selectTokens.textFieldBackgroundColorHover}: var(--surface-solid-primary);
+                ${_styledcomponents.selectTokens.textFieldBackgroundColorFocus}: var(--surface-solid-primary);
                 ${_styledcomponents.selectTokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${_styledcomponents.selectTokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${_styledcomponents.selectTokens.textFieldLabelColor}: var(--text-primary);
@@ -147,7 +166,7 @@ const config = {
 
                 ${_styledcomponents.selectTokens.disclosureIconColor}: var(--text-secondary);
                 ${_styledcomponents.selectTokens.disclosureIconColorHover}: var(--text-secondary-hover);
-                ${_styledcomponents.selectTokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${_styledcomponents.selectTokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${_styledcomponents.selectTokens.itemDisabledOpacity}: 0.4;
                 ${_styledcomponents.selectTokens.itemDisabledColor}: var(--text-primary);
                 ${_styledcomponents.selectTokens.textFieldHintIconColor}: var(--text-secondary);
@@ -160,6 +179,8 @@ const config = {
                 ${_styledcomponents.selectTokens.checkboxIconColor}: var(--on-dark-text-primary);
                 ${_styledcomponents.selectTokens.checkboxTriggerBorderCheckedColor}: transparent;
                 ${_styledcomponents.selectTokens.checkboxTriggerBorderColor}: var(--text-secondary);
+
+                ${_styledcomponents.selectTokens.dropdownBackgroundColor}: var(--surface-solid-primary);
             `,
             negative: (0, _styledcomponents.css)`
                 ${_styledcomponents.selectTokens.textFieldColor}: var(--text-primary);
@@ -167,8 +188,13 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldPlaceholderColor}: var(--text-secondary);
                 ${_styledcomponents.selectTokens.textFieldPlaceholderColorFocus}: var(--text-tertiary);
 
-                ${_styledcomponents.selectTokens.textFieldBackgroundColor}: var(--surface-solid-negative);
-                ${_styledcomponents.selectTokens.textFieldBackgroundColorFocus}: var(--surface-solid-negative-active);
+                ${_styledcomponents.selectTokens.textFieldBorderColor}: var(--outline-negative);
+                ${_styledcomponents.selectTokens.textFieldBorderColorHover}: var(--outline-negative-hover);
+                ${_styledcomponents.selectTokens.textFieldBorderColorFocus}: var(--outline-negative-active);
+
+                ${_styledcomponents.selectTokens.textFieldBackgroundColor}: var(--surface-solid-primary);
+                ${_styledcomponents.selectTokens.textFieldBackgroundColorHover}: var(--surface-solid-primary);
+                ${_styledcomponents.selectTokens.textFieldBackgroundColorFocus}: var(--surface-solid-primary);
                 ${_styledcomponents.selectTokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${_styledcomponents.selectTokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${_styledcomponents.selectTokens.textFieldLabelColor}: var(--text-primary);
@@ -194,7 +220,7 @@ const config = {
 
                 ${_styledcomponents.selectTokens.disclosureIconColor}: var(--text-secondary);
                 ${_styledcomponents.selectTokens.disclosureIconColorHover}: var(--text-secondary-hover);
-                ${_styledcomponents.selectTokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${_styledcomponents.selectTokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${_styledcomponents.selectTokens.itemDisabledOpacity}: 0.4;
                 ${_styledcomponents.selectTokens.itemDisabledColor}: var(--text-primary);
                 ${_styledcomponents.selectTokens.textFieldHintIconColor}: var(--text-secondary);
@@ -207,6 +233,8 @@ const config = {
                 ${_styledcomponents.selectTokens.checkboxIconColor}: var(--on-dark-text-primary);
                 ${_styledcomponents.selectTokens.checkboxTriggerBorderCheckedColor}: transparent;
                 ${_styledcomponents.selectTokens.checkboxTriggerBorderColor}: var(--text-secondary);
+
+                ${_styledcomponents.selectTokens.dropdownBackgroundColor}: var(--surface-solid-primary);
             `
         },
         size: {
@@ -215,6 +243,7 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem;
                 ${_styledcomponents.selectTokens.textFieldPaddingWithChips}: 0.375rem;
                 ${_styledcomponents.selectTokens.textFieldBorderRadius}: 0.75rem;
+                ${_styledcomponents.selectTokens.textFieldBorderWidth}: 0.0625rem;
 
                 ${_styledcomponents.selectTokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem;
                 ${_styledcomponents.selectTokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem;
@@ -246,7 +275,7 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldHintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
                 ${_styledcomponents.selectTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
-                ${_styledcomponents.selectTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.selectTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.selectTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.selectTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.selectTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -340,6 +369,7 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem;
                 ${_styledcomponents.selectTokens.textFieldPaddingWithChips}: 0.375rem;
                 ${_styledcomponents.selectTokens.textFieldBorderRadius}: 0.625rem;
+                ${_styledcomponents.selectTokens.textFieldBorderWidth}: 0.0625rem;
 
                 ${_styledcomponents.selectTokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem;
                 ${_styledcomponents.selectTokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem;
@@ -371,7 +401,7 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldHintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto;
                 ${_styledcomponents.selectTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
-                ${_styledcomponents.selectTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.selectTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.selectTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.selectTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.selectTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -580,19 +610,34 @@ const config = {
         },
         disabled: {
             true: (0, _styledcomponents.css)`
-                ${_styledcomponents.selectTokens.textFieldDisabledOpacity}: 0.4;
+                ${_styledcomponents.selectTokens.textFieldDisabledOpacity}: 1;
+                ${_styledcomponents.selectTokens.textFieldDisabledBackgroundOpacity}: 1;
+                ${_styledcomponents.selectTokens.textFieldDisabledInnerContentOpacity}: 1;
+                ${_styledcomponents.selectTokens.textFieldColor}: var(--text-secondary);
+                ${_styledcomponents.selectTokens.textFieldPlaceholderColor}: var(--text-tertiary);
+                ${_styledcomponents.selectTokens.textFieldLabelColor}: var(--text-secondary);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionColor}: var(--text-tertiary);
+                ${_styledcomponents.selectTokens.textFieldLeftHelperColor}: var(--text-tertiary);
+                ${_styledcomponents.selectTokens.textFieldContentSlotColor}: var(--text-tertiary);
+                ${_styledcomponents.selectTokens.textFieldBackgroundColor}: var(--surface-solid-tertiary);
+                ${_styledcomponents.selectTokens.textFieldBorderColor}: transparent;
+                ${_styledcomponents.selectTokens.textFieldChipColor}: var(--text-secondary);
+                ${_styledcomponents.selectTokens.disclosureIconColor}: var(--text-tertiary);
             `
         },
         readOnly: {
             true: (0, _styledcomponents.css)`
-                ${_styledcomponents.selectTokens.disclosureIconOpacityReadOnly}: 0.4;
-                ${_styledcomponents.selectTokens.textFieldReadOnlyOpacity}: 0.1;
+                ${_styledcomponents.selectTokens.disclosureIconOpacityReadOnly}: 1;
+                ${_styledcomponents.selectTokens.textFieldReadOnlyOpacity}: 1;
                 ${_styledcomponents.selectTokens.textFieldColorReadOnly}: var(--text-primary);
-                ${_styledcomponents.selectTokens.textFieldBackgroundColorReadOnly}: var(--surface-solid-primary);
+                ${_styledcomponents.selectTokens.textFieldBackgroundColorReadOnly}: var(--surface-solid-secondary);
                 ${_styledcomponents.selectTokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary);
                 ${_styledcomponents.selectTokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary);
                 ${_styledcomponents.selectTokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary);
                 ${_styledcomponents.selectTokens.textFieldLabelColorReadOnly}: var(--text-primary);
+                ${_styledcomponents.selectTokens.textFieldContentSlotRightColor}: var(--text-tertiary);
+                ${_styledcomponents.selectTokens.textFieldChipBackground}: var(--surface-solid-tertiary);
+                ${_styledcomponents.selectTokens.disclosureIconColor}: var(--text-tertiary);
             `
         }
     }

package/dist/styled-components/cjs/components/Steps/StepItem.config.js

@@ -25,16 +25,6 @@ const config = {
 
                 ${_styledcomponents.stepsTokens.dividerColor}: var(--surface-solid-default);
             `,
-            accent: (0, _styledcomponents.css)`
-                ${_styledcomponents.stepsTokens.completedIndicatorColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.stepsTokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover);
-                ${_styledcomponents.stepsTokens.completedIndicatorBackground}: var(--surface-accent);
-                ${_styledcomponents.stepsTokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover);
-                ${_styledcomponents.stepsTokens.completedTitleColor}: var(--text-primary);
-                ${_styledcomponents.stepsTokens.completedTitleColorHover}: var(--text-primary-hover);
-
-                ${_styledcomponents.stepsTokens.dividerColor}: var(--surface-accent);
-            `,
             negative: (0, _styledcomponents.css)`
                 ${_styledcomponents.stepsTokens.completedIndicatorColor}: var(--on-dark-text-primary);
                 ${_styledcomponents.stepsTokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover);

package/dist/styled-components/cjs/components/Steps/Steps.config.js

@@ -35,17 +35,6 @@ const baseItemView = `
 
     ${_styledcomponents.stepsTokens.disabledOpacity}: 0.4;
 `;
-const accentConfig = `
-    ${_styledcomponents.stepsTokens.completedTitleColor}: var(--text-primary);
-    ${_styledcomponents.stepsTokens.completedTitleColorHover}: var(--text-primary-hover);
-    
-    ${_styledcomponents.stepsTokens.completedIndicatorBackground}: var(--surface-accent);
-    ${_styledcomponents.stepsTokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover);
-    
-    // Цвет контента внутри элемента Step
-    ${_styledcomponents.stepsTokens.completedIndicatorColor}: var(--on-dark-text-primary);
-    ${_styledcomponents.stepsTokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover);
-`;
 const config = {
     defaults: {
         size: 'm',
@@ -55,9 +44,6 @@ const config = {
         view: {
             default: (0, _styledcomponents.css)`
                 ${_styledcomponents.stepsTokens.dividerColor}: var(--surface-solid-default);
-            `,
-            accent: (0, _styledcomponents.css)`
-                ${_styledcomponents.stepsTokens.dividerColor}: var(--surface-accent);
             `
         },
         itemView: {
@@ -175,38 +161,5 @@ const config = {
                 ${_styledcomponents.stepsTokens.dividerThickness}: 0.125rem;
             `
         }
-    },
-    intersections: [
-        {
-            view: 'accent',
-            itemView: 'default',
-            style: (0, _styledcomponents.css)`
-                ${_styledcomponents.stepsTokens.activeIndicatorBorder}: solid var(--text-accent);
-                ${_styledcomponents.stepsTokens.activeIndicatorColor}: var(--text-accent);
-
-                ${accentConfig};
-            `
-        },
-        {
-            view: 'accent',
-            itemView: 'negative',
-            style: (0, _styledcomponents.css)`
-                ${accentConfig};
-            `
-        },
-        {
-            view: 'accent',
-            itemView: 'warning',
-            style: (0, _styledcomponents.css)`
-                ${accentConfig};
-            `
-        },
-        {
-            view: 'accent',
-            itemView: 'positive',
-            style: (0, _styledcomponents.css)`
-                ${accentConfig};
-            `
-        }
-    ]
+    }
 };

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

@@ -54,6 +54,43 @@ const config = {
                 ${_styledcomponents.textAreaTokens.hintIconColor}: var(--text-secondary);
                 ${_styledcomponents.textAreaTokens.titleCaptionColor}: var(--text-secondary);
             `,
+            positive: (0, _styledcomponents.css)`
+                ${_styledcomponents.textAreaTokens.inputBackgroundColor}: transparent;
+                ${_styledcomponents.textAreaTokens.inputBackgroundColorHover}: transparent;
+                ${_styledcomponents.textAreaTokens.inputBackgroundColorActive}: transparent;
+                ${_styledcomponents.textAreaTokens.inputBackgroundColorFocus}: transparent;
+
+                ${_styledcomponents.textAreaTokens.helpersBackgroundColor}: transparent;
+                ${_styledcomponents.textAreaTokens.helpersBackgroundColorHover}: transparent;
+                ${_styledcomponents.textAreaTokens.helpersBackgroundColorActive}: transparent;
+                ${_styledcomponents.textAreaTokens.helpersBackgroundColorFocus}: transparent;
+
+                ${_styledcomponents.textAreaTokens.inputColor}: var(--text-positive);
+                ${_styledcomponents.textAreaTokens.inputColorFocus}: var(--text-positive);
+                ${_styledcomponents.textAreaTokens.inputCaretColor}: var(--text-accent);
+
+                ${_styledcomponents.textAreaTokens.placeholderColor}: var(--text-positive);
+                ${_styledcomponents.textAreaTokens.placeholderColorFocus}: var(--text-tertiary);
+
+                ${_styledcomponents.textAreaTokens.leftHelperColor}: var(--text-positive);
+                ${_styledcomponents.textAreaTokens.rightHelperColor}: var(--text-secondary);
+
+                ${_styledcomponents.textAreaTokens.rightContentColor}: var(--text-secondary);
+                ${_styledcomponents.textAreaTokens.rightContentColorHover}: var(--text-secondary-hover);
+                ${_styledcomponents.textAreaTokens.rightContentColorActive}: var(--text-secondary-active);
+
+                ${_styledcomponents.textAreaTokens.indicatorColor}: var(--surface-negative);
+                ${_styledcomponents.textAreaTokens.optionalColor}: var(--text-tertiary);
+
+                ${_styledcomponents.textAreaTokens.labelOuterColor}: var(--text-primary);
+
+                ${_styledcomponents.textAreaTokens.dividerColor}: var(--surface-positive);
+                ${_styledcomponents.textAreaTokens.dividerColorHover}: var(--surface-positive);
+                ${_styledcomponents.textAreaTokens.dividerColorFocus}: var(--surface-accent);
+
+                ${_styledcomponents.textAreaTokens.hintIconColor}: var(--text-secondary);
+                ${_styledcomponents.textAreaTokens.titleCaptionColor}: var(--text-secondary);
+            `,
             warning: (0, _styledcomponents.css)`
                 ${_styledcomponents.textAreaTokens.inputBackgroundColor}: transparent;
                 ${_styledcomponents.textAreaTokens.inputBackgroundColorHover}: transparent;

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

@@ -19,14 +19,18 @@ const config = {
         view: {
             default: (0, _styledcomponents.css)`
                 ${_styledcomponents.textAreaTokens.inputBackgroundColor}: var(--surface-solid-primary);
-                ${_styledcomponents.textAreaTokens.inputBackgroundColorHover}: var(--surface-solid-primary-hover);
+                ${_styledcomponents.textAreaTokens.inputBackgroundColorHover}: var(--surface-solid-primary);
                 ${_styledcomponents.textAreaTokens.inputBackgroundColorActive}: var(--surface-solid-primary-active);
-                ${_styledcomponents.textAreaTokens.inputBackgroundColorFocus}: var(--surface-solid-secondary);
+                ${_styledcomponents.textAreaTokens.inputBackgroundColorFocus}: var(--surface-solid-primary);
 
                 ${_styledcomponents.textAreaTokens.helpersBackgroundColor}: var(--surface-solid-primary);
-                ${_styledcomponents.textAreaTokens.helpersBackgroundColorHover}: var(--surface-solid-primary-hover);
+                ${_styledcomponents.textAreaTokens.helpersBackgroundColorHover}: var(--surface-solid-primary);
                 ${_styledcomponents.textAreaTokens.helpersBackgroundColorActive}: var(--surface-solid-primary-active);
-                ${_styledcomponents.textAreaTokens.helpersBackgroundColorFocus}: var(--surface-solid-secondary);
+                ${_styledcomponents.textAreaTokens.helpersBackgroundColorFocus}: var(--surface-solid-primary);
+
+                ${_styledcomponents.textAreaTokens.borderColor}: var(--outline-clear);
+                ${_styledcomponents.textAreaTokens.borderColorHover}: var(--on-light-outline-solid-primary-hover);
+                ${_styledcomponents.textAreaTokens.borderColorFocus}: var(--outline-primary);
 
                 ${_styledcomponents.textAreaTokens.inputColor}: var(--text-primary);
                 ${_styledcomponents.textAreaTokens.inputColorFocus}: var(--text-primary);
@@ -59,21 +63,71 @@ const config = {
                 ${_styledcomponents.textAreaTokens.hintIconColor}: var(--text-secondary);
                 ${_styledcomponents.textAreaTokens.titleCaptionColor}: var(--text-secondary);
             `,
+            positive: (0, _styledcomponents.css)`
+                ${_styledcomponents.textAreaTokens.inputBackgroundColor}: var(--surface-solid-primary);
+                ${_styledcomponents.textAreaTokens.inputBackgroundColorHover}: var(--surface-solid-primary);
+                ${_styledcomponents.textAreaTokens.inputBackgroundColorActive}: var(--surface-solid-primary-active);
+                ${_styledcomponents.textAreaTokens.inputBackgroundColorFocus}: var(--surface-solid-primary);
+
+                ${_styledcomponents.textAreaTokens.helpersBackgroundColor}: var(--surface-solid-primary);
+                ${_styledcomponents.textAreaTokens.helpersBackgroundColorHover}: var(--surface-solid-primary);
+                ${_styledcomponents.textAreaTokens.helpersBackgroundColorActive}: var(--surface-solid-primary-active);
+                ${_styledcomponents.textAreaTokens.helpersBackgroundColorFocus}: var(--surface-solid-primary);
+
+                ${_styledcomponents.textAreaTokens.inputColor}: var(--text-primary);
+                ${_styledcomponents.textAreaTokens.inputColorFocus}: var(--text-primary);
+                ${_styledcomponents.textAreaTokens.inputCaretColor}: var(--text-positive);
+
+                ${_styledcomponents.textAreaTokens.borderColor}: var(--outline-positive);
+                ${_styledcomponents.textAreaTokens.borderColorHover}: var(--outline-positive-hover);
+                ${_styledcomponents.textAreaTokens.borderColorFocus}: var(--outline-positive-active);
+
+                ${_styledcomponents.textAreaTokens.placeholderColor}: var(--text-secondary);
+                ${_styledcomponents.textAreaTokens.placeholderColorFocus}: var(--text-tertiary);
+
+                ${_styledcomponents.textAreaTokens.leftHelperColor}: var(--text-positive);
+                ${_styledcomponents.textAreaTokens.rightHelperColor}: var(--text-secondary);
+
+                ${_styledcomponents.textAreaTokens.rightContentColor}: var(--text-secondary);
+                ${_styledcomponents.textAreaTokens.rightContentColorHover}: var(--text-secondary-hover);
+                ${_styledcomponents.textAreaTokens.rightContentColorActive}: var(--text-secondary-active);
+
+                ${_styledcomponents.textAreaTokens.indicatorColor}: var(--surface-negative);
+                ${_styledcomponents.textAreaTokens.optionalColor}: var(--text-tertiary);
+
+                ${_styledcomponents.textAreaTokens.scrollbarThumbBackgroundColor}: var(--surface-solid-tertiary);
+                ${_styledcomponents.textAreaTokens.scrollbarThumbBackgroundColorHover}: var(--surface-solid-tertiary-hover);
+                ${_styledcomponents.textAreaTokens.scrollbarThumbBackgroundColorActive}: var(--surface-solid-tertiary-active);
+                ${_styledcomponents.textAreaTokens.scrollbarTrackBackgroundColor}: var(--surface-solid-primary);
+                ${_styledcomponents.textAreaTokens.scrollbarTrackBackgroundColorActive}: var(--surface-solid-primary-active);
+                ${_styledcomponents.textAreaTokens.scrollbarTrackBackgroundColorHover}: var(--surface-solid-primary-hover);
+
+                ${_styledcomponents.textAreaTokens.dividerColor}: var(--surface-positive);
+                ${_styledcomponents.textAreaTokens.dividerColorHover}: var(--surface-positive);
+                ${_styledcomponents.textAreaTokens.dividerColorFocus}: var(--surface-accent);
+                ${_styledcomponents.textAreaTokens.titleCaptionColor}: var(--text-secondary);
+                ${_styledcomponents.textAreaTokens.hintIconColor}: var(--text-secondary);
+                ${_styledcomponents.textAreaTokens.titleCaptionColor}: var(--text-secondary);
+            `,
             warning: (0, _styledcomponents.css)`
-                ${_styledcomponents.textAreaTokens.inputBackgroundColor}: var(--surface-solid-warning);
-                ${_styledcomponents.textAreaTokens.inputBackgroundColorHover}: var(--surface-solid-warning-hover);
-                ${_styledcomponents.textAreaTokens.inputBackgroundColorActive}: var(--surface-solid-warning-active);
-                ${_styledcomponents.textAreaTokens.inputBackgroundColorFocus}: var(--surface-solid-warning);
+                ${_styledcomponents.textAreaTokens.inputBackgroundColor}: var(--surface-solid-primary);
+                ${_styledcomponents.textAreaTokens.inputBackgroundColorHover}: var(--surface-solid-primary);
+                ${_styledcomponents.textAreaTokens.inputBackgroundColorActive}: var(--surface-solid-primary-active);
+                ${_styledcomponents.textAreaTokens.inputBackgroundColorFocus}: var(--surface-solid-primary);
 
-                ${_styledcomponents.textAreaTokens.helpersBackgroundColor}: var(--surface-solid-warning);
-                ${_styledcomponents.textAreaTokens.helpersBackgroundColorHover}: var(--surface-solid-warning-hover);
-                ${_styledcomponents.textAreaTokens.helpersBackgroundColorActive}: var(--surface-solid-warning-active);
-                ${_styledcomponents.textAreaTokens.helpersBackgroundColorFocus}: var(--surface-solid-warning);
+                ${_styledcomponents.textAreaTokens.helpersBackgroundColor}: var(--surface-solid-primary);
+                ${_styledcomponents.textAreaTokens.helpersBackgroundColorHover}: var(--surface-solid-primary);
+                ${_styledcomponents.textAreaTokens.helpersBackgroundColorActive}: var(--surface-solid-primary-active);
+                ${_styledcomponents.textAreaTokens.helpersBackgroundColorFocus}: var(--surface-solid-primary);
 
                 ${_styledcomponents.textAreaTokens.inputColor}: var(--text-primary);
                 ${_styledcomponents.textAreaTokens.inputColorFocus}: var(--text-primary);
                 ${_styledcomponents.textAreaTokens.inputCaretColor}: var(--text-warning);
 
+                ${_styledcomponents.textAreaTokens.borderColor}: var(--outline-warning);
+                ${_styledcomponents.textAreaTokens.borderColorHover}: var(--outline-warning-hover);
+                ${_styledcomponents.textAreaTokens.borderColorFocus}: var(--outline-warning-active);
+
                 ${_styledcomponents.textAreaTokens.placeholderColor}: var(--text-secondary);
                 ${_styledcomponents.textAreaTokens.placeholderColorFocus}: var(--text-tertiary);
 
@@ -102,20 +156,24 @@ const config = {
                 ${_styledcomponents.textAreaTokens.titleCaptionColor}: var(--text-secondary);
             `,
             negative: (0, _styledcomponents.css)`
-                ${_styledcomponents.textAreaTokens.inputBackgroundColor}: var(--surface-solid-negative);
-                ${_styledcomponents.textAreaTokens.inputBackgroundColorHover}: var(--surface-solid-negative-hover);
-                ${_styledcomponents.textAreaTokens.inputBackgroundColorActive}: var(--surface-solid-negative-active);
-                ${_styledcomponents.textAreaTokens.inputBackgroundColorFocus}: var(--surface-solid-negative);
+                ${_styledcomponents.textAreaTokens.inputBackgroundColor}: var(--surface-solid-primary);
+                ${_styledcomponents.textAreaTokens.inputBackgroundColorHover}: var(--surface-solid-primary);
+                ${_styledcomponents.textAreaTokens.inputBackgroundColorActive}: var(--surface-solid-primary-active);
+                ${_styledcomponents.textAreaTokens.inputBackgroundColorFocus}: var(--surface-solid-primary);
 
-                ${_styledcomponents.textAreaTokens.helpersBackgroundColor}: var(--surface-solid-negative);
-                ${_styledcomponents.textAreaTokens.helpersBackgroundColorHover}: var(--surface-solid-negative-hover);
-                ${_styledcomponents.textAreaTokens.helpersBackgroundColorActive}: var(--surface-solid-negative-active);
-                ${_styledcomponents.textAreaTokens.helpersBackgroundColorFocus}: var(--surface-solid-negative);
+                ${_styledcomponents.textAreaTokens.helpersBackgroundColor}: var(--surface-solid-primary);
+                ${_styledcomponents.textAreaTokens.helpersBackgroundColorHover}: var(--surface-solid-primary);
+                ${_styledcomponents.textAreaTokens.helpersBackgroundColorActive}: var(--surface-solid-primary-active);
+                ${_styledcomponents.textAreaTokens.helpersBackgroundColorFocus}: var(--surface-solid-primary);
 
                 ${_styledcomponents.textAreaTokens.inputColor}: var(--text-primary);
                 ${_styledcomponents.textAreaTokens.inputColorFocus}: var(--text-primary);
                 ${_styledcomponents.textAreaTokens.inputCaretColor}: var(--text-negative);
 
+                ${_styledcomponents.textAreaTokens.borderColor}: var(--outline-negative);
+                ${_styledcomponents.textAreaTokens.borderColorHover}: var(--outline-negative-hover);
+                ${_styledcomponents.textAreaTokens.borderColorFocus}: var(--outline-negative-active);
+
                 ${_styledcomponents.textAreaTokens.placeholderColor}: var(--text-secondary);
                 ${_styledcomponents.textAreaTokens.placeholderColorFocus}: var(--text-tertiary);
 
@@ -354,17 +412,40 @@ const config = {
         },
         readOnly: {
             true: (0, _styledcomponents.css)`
-                ${_styledcomponents.textAreaTokens.readOnlyOpacity}: 0.1;
-                ${_styledcomponents.textAreaTokens.backgroundColorReadOnly}: var(--surface-solid-primary);
+                ${_styledcomponents.textAreaTokens.readOnlyOpacity}: 1;
+                ${_styledcomponents.textAreaTokens.backgroundColorReadOnly}: var(--surface-solid-secondary);
                 ${_styledcomponents.textAreaTokens.inputColorReadOnly}: var(--text-primary);
                 ${_styledcomponents.textAreaTokens.dividerColorReadOnly}: var(--surface-solid-primary);
-                ${_styledcomponents.textAreaTokens.contentSlotRightOpacityReadOnly}: 0.4;
+                ${_styledcomponents.textAreaTokens.contentSlotRightOpacityReadOnly}: 1;
+                ${_styledcomponents.textAreaTokens.rightContentColor}: var(--text-tertiary);
+                ${_styledcomponents.textAreaTokens.inputBackgroundColor}: var(--surface-solid-secondary);
+                ${_styledcomponents.textAreaTokens.helpersBackgroundColor}: var(--surface-solid-secondary);
+                ${_styledcomponents.textAreaTokens.leftHelperColor}: var(--text-secondary);
+                ${_styledcomponents.textAreaTokens.rightHelperColor}: var(--text-secondary);
+                ${_styledcomponents.textAreaTokens.titleCaptionColorReadOnly}: var(--text-secondary);
+                ${_styledcomponents.textAreaTokens.labelOuterColor}: var(--text-primary);
+                ${_styledcomponents.textAreaTokens.labelInnerColor}: var(--text-primary);
             `
         },
         disabled: {
             true: (0, _styledcomponents.css)`
-                ${_styledcomponents.textAreaTokens.disabledOpacity}: 0.4;
+                ${_styledcomponents.textAreaTokens.disabledOpacity}: 1;
+                ${_styledcomponents.textAreaTokens.disabledBackgroundOpacity}: 1;
+                ${_styledcomponents.textAreaTokens.disabledInnerContentOpacity}: 1;
                 ${_styledcomponents.textAreaTokens.inputColorDisabled}: var(--text-secondary);
+                ${_styledcomponents.textAreaTokens.backgroundColor}: var(--surface-solid-tertiary);
+                ${_styledcomponents.textAreaTokens.inputBackgroundColor}: var(--surface-solid-tertiary);
+                ${_styledcomponents.textAreaTokens.helpersBackgroundColor}: var(--surface-solid-tertiary);
+                ${_styledcomponents.textAreaTokens.borderColor}: transparent;
+                ${_styledcomponents.textAreaTokens.borderColorHover}: transparent;
+                ${_styledcomponents.textAreaTokens.borderColorFocus}: transparent;
+                ${_styledcomponents.textAreaTokens.leftHelperColor}: var(--text-tertiary);
+                ${_styledcomponents.textAreaTokens.rightHelperColor}: var(--text-tertiary);
+                ${_styledcomponents.textAreaTokens.titleCaptionColor}: var(--text-tertiary);
+                ${_styledcomponents.textAreaTokens.labelOuterColor}: var(--text-secondary);
+                ${_styledcomponents.textAreaTokens.labelInnerColor}: var(--text-secondary);
+                ${_styledcomponents.textAreaTokens.rightContentColor}: var(--text-tertiary);
+
                 ${_styledcomponents.textAreaTokens.dividerColorReadOnly}: var(--surface-solid-primary);
                 ${_styledcomponents.textAreaTokens.titleCaptionColorReadOnly}: var(--text-secondary);
             `

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

@@ -24,7 +24,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.placeholderColorFocus}: var(--text-tertiary);
 
                 ${_styledcomponents.textFieldTokens.backgroundColor}: var(--surface-solid-primary);
-                ${_styledcomponents.textFieldTokens.backgroundColorHover}: var(--surface-solid-primary-hover);
+                ${_styledcomponents.textFieldTokens.backgroundColorHover}: var(--surface-solid-primary);
                 ${_styledcomponents.textFieldTokens.backgroundColorFocus}: var(--surface-solid-primary);
                 ${_styledcomponents.textFieldTokens.caretColor}: var(--text-accent);
                 ${_styledcomponents.textFieldTokens.textBeforeColor}: var(--text-tertiary);
@@ -47,6 +47,8 @@ const config = {
                 ${_styledcomponents.textFieldTokens.indicatorColor}: var(--surface-negative);
                 ${_styledcomponents.textFieldTokens.optionalColor}: var(--text-tertiary);
 
+                ${_styledcomponents.textFieldTokens.borderColor}: var(--outline-clear);
+                ${_styledcomponents.textFieldTokens.borderColorHover}: var(--on-light-outline-solid-primary-hover);
                 ${_styledcomponents.textFieldTokens.borderColorFocus}: var(--outline-primary);
             `,
             positive: (0, _styledcomponents.css)`
@@ -56,7 +58,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.placeholderColorFocus}: var(--text-tertiary);
 
                 ${_styledcomponents.textFieldTokens.backgroundColor}: var(--surface-solid-primary);
-                ${_styledcomponents.textFieldTokens.backgroundColorHover}: var(--surface-solid-primary-hover);
+                ${_styledcomponents.textFieldTokens.backgroundColorHover}: var(--surface-solid-primary);
                 ${_styledcomponents.textFieldTokens.backgroundColorFocus}: var(--surface-solid-primary);
                 ${_styledcomponents.textFieldTokens.caretColor}: var(--text-accent);
                 ${_styledcomponents.textFieldTokens.textBeforeColor}: var(--text-tertiary);
@@ -80,6 +82,8 @@ const config = {
                 ${_styledcomponents.textFieldTokens.optionalColor}: var(--text-tertiary);
 
                 ${_styledcomponents.textFieldTokens.borderColor}: var(--outline-positive);
+                ${_styledcomponents.textFieldTokens.borderColorHover}: var(--outline-positive-hover);
+                ${_styledcomponents.textFieldTokens.borderColorFocus}: var(--outline-positive-active);
             `,
             warning: (0, _styledcomponents.css)`
                 ${_styledcomponents.textFieldTokens.color}: var(--text-primary);
@@ -88,7 +92,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.placeholderColorFocus}: var(--text-tertiary);
 
                 ${_styledcomponents.textFieldTokens.backgroundColor}: var(--surface-solid-primary);
-                ${_styledcomponents.textFieldTokens.backgroundColorHover}: var(--surface-solid-primary-hover);
+                ${_styledcomponents.textFieldTokens.backgroundColorHover}: var(--surface-solid-primary);
                 ${_styledcomponents.textFieldTokens.backgroundColorFocus}: var(--surface-solid-primary);
                 ${_styledcomponents.textFieldTokens.caretColor}: var(--text-accent);
                 ${_styledcomponents.textFieldTokens.textBeforeColor}: var(--text-tertiary);
@@ -112,6 +116,8 @@ const config = {
                 ${_styledcomponents.textFieldTokens.optionalColor}: var(--text-tertiary);
 
                 ${_styledcomponents.textFieldTokens.borderColor}: var(--outline-warning);
+                ${_styledcomponents.textFieldTokens.borderColorHover}: var(--outline-warning-hover);
+                ${_styledcomponents.textFieldTokens.borderColorFocus}: var(--outline-warning-active);
             `,
             negative: (0, _styledcomponents.css)`
                 ${_styledcomponents.textFieldTokens.color}: var(--text-primary);
@@ -120,7 +126,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.placeholderColorFocus}: var(--text-tertiary);
 
                 ${_styledcomponents.textFieldTokens.backgroundColor}: var(--surface-solid-primary);
-                ${_styledcomponents.textFieldTokens.backgroundColorHover}: var(--surface-solid-primary-hover);
+                ${_styledcomponents.textFieldTokens.backgroundColorHover}: var(--surface-solid-primary);
                 ${_styledcomponents.textFieldTokens.backgroundColorFocus}: var(--surface-solid-primary);
                 ${_styledcomponents.textFieldTokens.caretColor}: var(--text-accent);
                 ${_styledcomponents.textFieldTokens.textBeforeColor}: var(--text-tertiary);
@@ -144,6 +150,8 @@ const config = {
                 ${_styledcomponents.textFieldTokens.optionalColor}: var(--text-tertiary);
 
                 ${_styledcomponents.textFieldTokens.borderColor}: var(--outline-negative);
+                ${_styledcomponents.textFieldTokens.borderColorHover}: var(--outline-negative-hover);
+                ${_styledcomponents.textFieldTokens.borderColorFocus}: var(--outline-negative-active);
             `
         },
         size: {
@@ -189,7 +197,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_styledcomponents.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_styledcomponents.textFieldTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.textFieldTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -275,7 +283,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_styledcomponents.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_styledcomponents.textFieldTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.textFieldTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -497,7 +505,7 @@ const config = {
         disabled: {
             true: (0, _styledcomponents.css)`
                 ${_styledcomponents.textFieldTokens.disabledOpacity}: 1;
-                ${_styledcomponents.textFieldTokens.color}: var(--text-tertiary);
+                ${_styledcomponents.textFieldTokens.color}: var(--text-secondary);
                 ${_styledcomponents.textFieldTokens.placeholderColor}: var(--text-tertiary);
                 ${_styledcomponents.textFieldTokens.labelColor}: var(--text-secondary);
                 ${_styledcomponents.textFieldTokens.titleCaptionColor}: var(--text-tertiary);