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

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

@@ -16,8 +16,13 @@ export const config = {
                 ${tokens.textFieldPlaceholderColor}: var(--text-secondary);
                 ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary);
 
+                ${tokens.textFieldBorderColor}: var(--outline-clear);
+                ${tokens.textFieldBorderColorHover}: var(--on-light-outline-solid-primary-hover);
+                ${tokens.textFieldBorderColorFocus}: var(--outline-primary);
+
                 ${tokens.textFieldBackgroundColor}: var(--surface-solid-primary);
-                ${tokens.textFieldBackgroundColorFocus}: var(--surface-solid-secondary);
+                ${tokens.textFieldBackgroundColorHover}: var(--surface-solid-primary);
+                ${tokens.textFieldBackgroundColorFocus}: var(--surface-solid-primary);
                 ${tokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${tokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${tokens.textFieldLabelColor}: var(--text-primary);
@@ -43,7 +48,7 @@ export const config = {
 
                 ${tokens.disclosureIconColor}: var(--text-secondary);
                 ${tokens.disclosureIconColorHover}: var(--text-secondary-hover);
-                ${tokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${tokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${tokens.itemDisabledOpacity}: 0.4;
                 ${tokens.itemDisabledColor}: var(--text-primary);
                 ${tokens.textFieldHintIconColor}: var(--text-secondary);
@@ -56,6 +61,8 @@ export const config = {
                 ${tokens.checkboxIconColor}: var(--on-dark-text-primary);
                 ${tokens.checkboxTriggerBorderCheckedColor}: transparent;
                 ${tokens.checkboxTriggerBorderColor}: var(--text-secondary);
+
+                ${tokens.dropdownBackgroundColor}: var(--surface-solid-primary);
             `,
             positive: css`
                 ${tokens.textFieldColor}: var(--text-primary);
@@ -63,8 +70,13 @@ export const config = {
                 ${tokens.textFieldPlaceholderColor}: var(--text-secondary);
                 ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary);
 
-                ${tokens.textFieldBackgroundColor}: var(--surface-solid-positive);
-                ${tokens.textFieldBackgroundColorFocus}: var(--surface-solid-positive-active);
+                ${tokens.textFieldBorderColor}: var(--outline-positive);
+                ${tokens.textFieldBorderColorHover}: var(--outline-positive-hover);
+                ${tokens.textFieldBorderColorFocus}: var(--outline-positive-active);
+
+                ${tokens.textFieldBackgroundColor}: var(--surface-solid-primary);
+                ${tokens.textFieldBackgroundColorHover}: var(--surface-solid-primary);
+                ${tokens.textFieldBackgroundColorFocus}: var(--surface-solid-primary);
                 ${tokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${tokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${tokens.textFieldLabelColor}: var(--text-primary);
@@ -90,7 +102,7 @@ export const config = {
 
                 ${tokens.disclosureIconColor}: var(--text-secondary);
                 ${tokens.disclosureIconColorHover}: var(--text-secondary-hover);
-                ${tokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${tokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${tokens.itemDisabledOpacity}: 0.4;
                 ${tokens.itemDisabledColor}: var(--text-primary);
                 ${tokens.textFieldHintIconColor}: var(--text-secondary);
@@ -103,6 +115,8 @@ export const config = {
                 ${tokens.checkboxIconColor}: var(--on-dark-text-primary);
                 ${tokens.checkboxTriggerBorderCheckedColor}: transparent;
                 ${tokens.checkboxTriggerBorderColor}: var(--text-secondary);
+
+                ${tokens.dropdownBackgroundColor}: var(--surface-solid-primary);
             `,
             warning: css`
                 ${tokens.textFieldColor}: var(--text-primary);
@@ -110,8 +124,13 @@ export const config = {
                 ${tokens.textFieldPlaceholderColor}: var(--text-secondary);
                 ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary);
 
-                ${tokens.textFieldBackgroundColor}: var(--surface-solid-warning);
-                ${tokens.textFieldBackgroundColorFocus}: var(--surface-solid-warning-active);
+                ${tokens.textFieldBorderColor}: var(--outline-warning);
+                ${tokens.textFieldBorderColorHover}: var(--outline-warning-hover);
+                ${tokens.textFieldBorderColorFocus}: var(--outline-warning-active);
+
+                ${tokens.textFieldBackgroundColor}: var(--surface-solid-primary);
+                ${tokens.textFieldBackgroundColorHover}: var(--surface-solid-primary);
+                ${tokens.textFieldBackgroundColorFocus}: var(--surface-solid-primary);
                 ${tokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${tokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${tokens.textFieldLabelColor}: var(--text-primary);
@@ -137,7 +156,7 @@ export const config = {
 
                 ${tokens.disclosureIconColor}: var(--text-secondary);
                 ${tokens.disclosureIconColorHover}: var(--text-secondary-hover);
-                ${tokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${tokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${tokens.itemDisabledOpacity}: 0.4;
                 ${tokens.itemDisabledColor}: var(--text-primary);
                 ${tokens.textFieldHintIconColor}: var(--text-secondary);
@@ -150,6 +169,8 @@ export const config = {
                 ${tokens.checkboxIconColor}: var(--on-dark-text-primary);
                 ${tokens.checkboxTriggerBorderCheckedColor}: transparent;
                 ${tokens.checkboxTriggerBorderColor}: var(--text-secondary);
+
+                ${tokens.dropdownBackgroundColor}: var(--surface-solid-primary);
             `,
             negative: css`
                 ${tokens.textFieldColor}: var(--text-primary);
@@ -157,8 +178,13 @@ export const config = {
                 ${tokens.textFieldPlaceholderColor}: var(--text-secondary);
                 ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary);
 
-                ${tokens.textFieldBackgroundColor}: var(--surface-solid-negative);
-                ${tokens.textFieldBackgroundColorFocus}: var(--surface-solid-negative-active);
+                ${tokens.textFieldBorderColor}: var(--outline-negative);
+                ${tokens.textFieldBorderColorHover}: var(--outline-negative-hover);
+                ${tokens.textFieldBorderColorFocus}: var(--outline-negative-active);
+
+                ${tokens.textFieldBackgroundColor}: var(--surface-solid-primary);
+                ${tokens.textFieldBackgroundColorHover}: var(--surface-solid-primary);
+                ${tokens.textFieldBackgroundColorFocus}: var(--surface-solid-primary);
                 ${tokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${tokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${tokens.textFieldLabelColor}: var(--text-primary);
@@ -184,7 +210,7 @@ export const config = {
 
                 ${tokens.disclosureIconColor}: var(--text-secondary);
                 ${tokens.disclosureIconColorHover}: var(--text-secondary-hover);
-                ${tokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${tokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${tokens.itemDisabledOpacity}: 0.4;
                 ${tokens.itemDisabledColor}: var(--text-primary);
                 ${tokens.textFieldHintIconColor}: var(--text-secondary);
@@ -197,6 +223,8 @@ export const config = {
                 ${tokens.checkboxIconColor}: var(--on-dark-text-primary);
                 ${tokens.checkboxTriggerBorderCheckedColor}: transparent;
                 ${tokens.checkboxTriggerBorderColor}: var(--text-secondary);
+
+                ${tokens.dropdownBackgroundColor}: var(--surface-solid-primary);
             `
         },
         size: {
@@ -205,6 +233,7 @@ export const config = {
                 ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem;
                 ${tokens.textFieldPaddingWithChips}: 0.375rem;
                 ${tokens.textFieldBorderRadius}: 0.75rem;
+                ${tokens.textFieldBorderWidth}: 0.0625rem;
 
                 ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem;
                 ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem;
@@ -236,7 +265,7 @@ export const config = {
                 ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
                 ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
-                ${tokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${tokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -330,6 +359,7 @@ export const config = {
                 ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem;
                 ${tokens.textFieldPaddingWithChips}: 0.375rem;
                 ${tokens.textFieldBorderRadius}: 0.625rem;
+                ${tokens.textFieldBorderWidth}: 0.0625rem;
 
                 ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem;
                 ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem;
@@ -361,7 +391,7 @@ export const config = {
                 ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto;
                 ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
-                ${tokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${tokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -570,19 +600,34 @@ export const config = {
         },
         disabled: {
             true: css`
-                ${tokens.textFieldDisabledOpacity}: 0.4;
+                ${tokens.textFieldDisabledOpacity}: 1;
+                ${tokens.textFieldDisabledBackgroundOpacity}: 1;
+                ${tokens.textFieldDisabledInnerContentOpacity}: 1;
+                ${tokens.textFieldColor}: var(--text-secondary);
+                ${tokens.textFieldPlaceholderColor}: var(--text-tertiary);
+                ${tokens.textFieldLabelColor}: var(--text-secondary);
+                ${tokens.textFieldTitleCaptionColor}: var(--text-tertiary);
+                ${tokens.textFieldLeftHelperColor}: var(--text-tertiary);
+                ${tokens.textFieldContentSlotColor}: var(--text-tertiary);
+                ${tokens.textFieldBackgroundColor}: var(--surface-solid-tertiary);
+                ${tokens.textFieldBorderColor}: transparent;
+                ${tokens.textFieldChipColor}: var(--text-secondary);
+                ${tokens.disclosureIconColor}: var(--text-tertiary);
             `
         },
         readOnly: {
             true: css`
-                ${tokens.disclosureIconOpacityReadOnly}: 0.4;
-                ${tokens.textFieldReadOnlyOpacity}: 0.1;
+                ${tokens.disclosureIconOpacityReadOnly}: 1;
+                ${tokens.textFieldReadOnlyOpacity}: 1;
                 ${tokens.textFieldColorReadOnly}: var(--text-primary);
-                ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-solid-primary);
+                ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-solid-secondary);
                 ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary);
                 ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary);
                 ${tokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary);
                 ${tokens.textFieldLabelColorReadOnly}: var(--text-primary);
+                ${tokens.textFieldContentSlotRightColor}: var(--text-tertiary);
+                ${tokens.textFieldChipBackground}: var(--surface-solid-tertiary);
+                ${tokens.disclosureIconColor}: var(--text-tertiary);
             `
         }
     }

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

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

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

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

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

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

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

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

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

@@ -14,7 +14,7 @@ export const config = {
                 ${tokens.placeholderColorFocus}: var(--text-tertiary);
 
                 ${tokens.backgroundColor}: var(--surface-solid-primary);
-                ${tokens.backgroundColorHover}: var(--surface-solid-primary-hover);
+                ${tokens.backgroundColorHover}: var(--surface-solid-primary);
                 ${tokens.backgroundColorFocus}: var(--surface-solid-primary);
                 ${tokens.caretColor}: var(--text-accent);
                 ${tokens.textBeforeColor}: var(--text-tertiary);
@@ -37,6 +37,8 @@ export const config = {
                 ${tokens.indicatorColor}: var(--surface-negative);
                 ${tokens.optionalColor}: var(--text-tertiary);
 
+                ${tokens.borderColor}: var(--outline-clear);
+                ${tokens.borderColorHover}: var(--on-light-outline-solid-primary-hover);
                 ${tokens.borderColorFocus}: var(--outline-primary);
             `,
             positive: css`
@@ -46,7 +48,7 @@ export const config = {
                 ${tokens.placeholderColorFocus}: var(--text-tertiary);
 
                 ${tokens.backgroundColor}: var(--surface-solid-primary);
-                ${tokens.backgroundColorHover}: var(--surface-solid-primary-hover);
+                ${tokens.backgroundColorHover}: var(--surface-solid-primary);
                 ${tokens.backgroundColorFocus}: var(--surface-solid-primary);
                 ${tokens.caretColor}: var(--text-accent);
                 ${tokens.textBeforeColor}: var(--text-tertiary);
@@ -70,6 +72,8 @@ export const config = {
                 ${tokens.optionalColor}: var(--text-tertiary);
 
                 ${tokens.borderColor}: var(--outline-positive);
+                ${tokens.borderColorHover}: var(--outline-positive-hover);
+                ${tokens.borderColorFocus}: var(--outline-positive-active);
             `,
             warning: css`
                 ${tokens.color}: var(--text-primary);
@@ -78,7 +82,7 @@ export const config = {
                 ${tokens.placeholderColorFocus}: var(--text-tertiary);
 
                 ${tokens.backgroundColor}: var(--surface-solid-primary);
-                ${tokens.backgroundColorHover}: var(--surface-solid-primary-hover);
+                ${tokens.backgroundColorHover}: var(--surface-solid-primary);
                 ${tokens.backgroundColorFocus}: var(--surface-solid-primary);
                 ${tokens.caretColor}: var(--text-accent);
                 ${tokens.textBeforeColor}: var(--text-tertiary);
@@ -102,6 +106,8 @@ export const config = {
                 ${tokens.optionalColor}: var(--text-tertiary);
 
                 ${tokens.borderColor}: var(--outline-warning);
+                ${tokens.borderColorHover}: var(--outline-warning-hover);
+                ${tokens.borderColorFocus}: var(--outline-warning-active);
             `,
             negative: css`
                 ${tokens.color}: var(--text-primary);
@@ -110,7 +116,7 @@ export const config = {
                 ${tokens.placeholderColorFocus}: var(--text-tertiary);
 
                 ${tokens.backgroundColor}: var(--surface-solid-primary);
-                ${tokens.backgroundColorHover}: var(--surface-solid-primary-hover);
+                ${tokens.backgroundColorHover}: var(--surface-solid-primary);
                 ${tokens.backgroundColorFocus}: var(--surface-solid-primary);
                 ${tokens.caretColor}: var(--text-accent);
                 ${tokens.textBeforeColor}: var(--text-tertiary);
@@ -134,6 +140,8 @@ export const config = {
                 ${tokens.optionalColor}: var(--text-tertiary);
 
                 ${tokens.borderColor}: var(--outline-negative);
+                ${tokens.borderColorHover}: var(--outline-negative-hover);
+                ${tokens.borderColorFocus}: var(--outline-negative-active);
             `
         },
         size: {
@@ -179,7 +187,7 @@ export const config = {
                 ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${tokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${tokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -265,7 +273,7 @@ export const config = {
                 ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${tokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${tokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -487,7 +495,7 @@ export const config = {
         disabled: {
             true: css`
                 ${tokens.disabledOpacity}: 1;
-                ${tokens.color}: var(--text-tertiary);
+                ${tokens.color}: var(--text-secondary);
                 ${tokens.placeholderColor}: var(--text-tertiary);
                 ${tokens.labelColor}: var(--text-secondary);
                 ${tokens.titleCaptionColor}: var(--text-tertiary);

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

@@ -35,7 +35,7 @@ export const config = {
                 ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
                 ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height);
 
-                ${tokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${tokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -91,7 +91,7 @@ export const config = {
                 ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
                 ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height);
 
-                ${tokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${tokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -147,7 +147,7 @@ export const config = {
                 ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
                 ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
 
-                ${tokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${tokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -203,7 +203,7 @@ export const config = {
                 ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${tokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${tokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);