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

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

@@ -29,8 +29,13 @@ const config = {
                 ${_styledcomponents.comboboxTokens.textFieldClearPlaceholderColor}: var(--text-secondary);
                 ${_styledcomponents.comboboxTokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary);
 
+                ${_styledcomponents.comboboxTokens.textFieldBorderColor}: var(--outline-clear);
+                ${_styledcomponents.comboboxTokens.textFieldBorderColorHover}: var(--on-light-outline-solid-primary-hover);
+                ${_styledcomponents.comboboxTokens.textFieldBorderColorFocus}: var(--outline-primary);
+
                 ${_styledcomponents.comboboxTokens.textFieldBackgroundColor}: var(--surface-solid-primary);
-                ${_styledcomponents.comboboxTokens.textFieldBackgroundColorFocus}: var(--surface-solid-secondary);
+                ${_styledcomponents.comboboxTokens.textFieldBackgroundColorHover}: var(--surface-solid-primary);
+                ${_styledcomponents.comboboxTokens.textFieldBackgroundColorFocus}: var(--surface-solid-primary);
                 ${_styledcomponents.comboboxTokens.textFieldCaretColor}: var(--text-accent);
                 ${_styledcomponents.comboboxTokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${_styledcomponents.comboboxTokens.textFieldTextAfterColor}: var(--text-tertiary);
@@ -62,7 +67,7 @@ const config = {
 
                 ${_styledcomponents.comboboxTokens.disclosureIconColor}: var(--text-secondary);
                 ${_styledcomponents.comboboxTokens.disclosureIconColorHover}: var(--text-secondary-hover);
-                ${_styledcomponents.comboboxTokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${_styledcomponents.comboboxTokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${_styledcomponents.comboboxTokens.textFieldHintIconColor}: var(--text-secondary);
 
                 ${_styledcomponents.comboboxTokens.dividerColor}: var(--surface-solid-tertiary);
@@ -73,6 +78,8 @@ const config = {
                 ${_styledcomponents.comboboxTokens.checkboxIconColor}: var(--on-dark-text-primary);
                 ${_styledcomponents.comboboxTokens.checkboxTriggerBorderCheckedColor}: transparent;
                 ${_styledcomponents.comboboxTokens.checkboxTriggerBorderColor}: var(--text-secondary);
+
+                ${_styledcomponents.comboboxTokens.dropdownBackgroundColor}: var(--surface-solid-primary);
             `,
             positive: (0, _styledcomponents.css)`
                 ${_styledcomponents.comboboxTokens.textFieldColor}: var(--text-primary);
@@ -83,8 +90,13 @@ const config = {
                 ${_styledcomponents.comboboxTokens.textFieldClearPlaceholderColor}: var(--text-positive);
                 ${_styledcomponents.comboboxTokens.textFieldClearPlaceholderColorFocus}: var(--text-positive);
 
-                ${_styledcomponents.comboboxTokens.textFieldBackgroundColor}: var(--surface-solid-positive);
-                ${_styledcomponents.comboboxTokens.textFieldBackgroundColorFocus}: var(--surface-solid-positive-active);
+                ${_styledcomponents.comboboxTokens.textFieldBorderColor}: var(--outline-positive);
+                ${_styledcomponents.comboboxTokens.textFieldBorderColorHover}: var(--outline-positive-hover);
+                ${_styledcomponents.comboboxTokens.textFieldBorderColorFocus}: var(--outline-positive-active);
+
+                ${_styledcomponents.comboboxTokens.textFieldBackgroundColor}: var(--surface-solid-primary);
+                ${_styledcomponents.comboboxTokens.textFieldBackgroundColorHover}: var(--surface-solid-primary);
+                ${_styledcomponents.comboboxTokens.textFieldBackgroundColorFocus}: var(--surface-solid-primary);
                 ${_styledcomponents.comboboxTokens.textFieldCaretColor}: var(--text-accent);
                 ${_styledcomponents.comboboxTokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${_styledcomponents.comboboxTokens.textFieldTextAfterColor}: var(--text-tertiary);
@@ -116,7 +128,7 @@ const config = {
 
                 ${_styledcomponents.comboboxTokens.disclosureIconColor}: var(--text-secondary);
                 ${_styledcomponents.comboboxTokens.disclosureIconColorHover}: var(--text-secondary-hover);
-                ${_styledcomponents.comboboxTokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${_styledcomponents.comboboxTokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${_styledcomponents.comboboxTokens.textFieldHintIconColor}: var(--text-secondary);
 
                 ${_styledcomponents.comboboxTokens.dividerColor}: var(--surface-solid-tertiary);
@@ -127,6 +139,8 @@ const config = {
                 ${_styledcomponents.comboboxTokens.checkboxIconColor}: var(--on-dark-text-primary);
                 ${_styledcomponents.comboboxTokens.checkboxTriggerBorderCheckedColor}: transparent;
                 ${_styledcomponents.comboboxTokens.checkboxTriggerBorderColor}: var(--text-secondary);
+
+                ${_styledcomponents.comboboxTokens.dropdownBackgroundColor}: var(--surface-solid-primary);
             `,
             warning: (0, _styledcomponents.css)`
                 ${_styledcomponents.comboboxTokens.textFieldColor}: var(--text-primary);
@@ -137,8 +151,13 @@ const config = {
                 ${_styledcomponents.comboboxTokens.textFieldClearPlaceholderColor}: var(--text-warning);
                 ${_styledcomponents.comboboxTokens.textFieldClearPlaceholderColorFocus}: var(--text-warning);
 
-                ${_styledcomponents.comboboxTokens.textFieldBackgroundColor}: var(--surface-solid-warning);
-                ${_styledcomponents.comboboxTokens.textFieldBackgroundColorFocus}: var(--surface-solid-warning-active);
+                ${_styledcomponents.comboboxTokens.textFieldBorderColor}: var(--outline-warning);
+                ${_styledcomponents.comboboxTokens.textFieldBorderColorHover}: var(--outline-warning-hover);
+                ${_styledcomponents.comboboxTokens.textFieldBorderColorFocus}: var(--outline-warning-active);
+
+                ${_styledcomponents.comboboxTokens.textFieldBackgroundColor}: var(--surface-solid-primary);
+                ${_styledcomponents.comboboxTokens.textFieldBackgroundColorHover}: var(--surface-solid-primary);
+                ${_styledcomponents.comboboxTokens.textFieldBackgroundColorFocus}: var(--surface-solid-primary);
                 ${_styledcomponents.comboboxTokens.textFieldCaretColor}: var(--text-accent);
                 ${_styledcomponents.comboboxTokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${_styledcomponents.comboboxTokens.textFieldTextAfterColor}: var(--text-tertiary);
@@ -170,7 +189,7 @@ const config = {
 
                 ${_styledcomponents.comboboxTokens.disclosureIconColor}: var(--text-secondary);
                 ${_styledcomponents.comboboxTokens.disclosureIconColorHover}: var(--text-secondary-hover);
-                ${_styledcomponents.comboboxTokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${_styledcomponents.comboboxTokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${_styledcomponents.comboboxTokens.textFieldHintIconColor}: var(--text-secondary);
 
                 ${_styledcomponents.comboboxTokens.dividerColor}: var(--surface-solid-tertiary);
@@ -181,6 +200,8 @@ const config = {
                 ${_styledcomponents.comboboxTokens.checkboxIconColor}: var(--on-dark-text-primary);
                 ${_styledcomponents.comboboxTokens.checkboxTriggerBorderCheckedColor}: transparent;
                 ${_styledcomponents.comboboxTokens.checkboxTriggerBorderColor}: var(--text-secondary);
+
+                ${_styledcomponents.comboboxTokens.dropdownBackgroundColor}: var(--surface-solid-primary);
             `,
             negative: (0, _styledcomponents.css)`
                 ${_styledcomponents.comboboxTokens.textFieldColor}: var(--text-primary);
@@ -191,8 +212,13 @@ const config = {
                 ${_styledcomponents.comboboxTokens.textFieldClearPlaceholderColor}: var(--text-negative);
                 ${_styledcomponents.comboboxTokens.textFieldClearPlaceholderColorFocus}: var(--text-negative);
 
-                ${_styledcomponents.comboboxTokens.textFieldBackgroundColor}: var(--surface-solid-negative);
-                ${_styledcomponents.comboboxTokens.textFieldBackgroundColorFocus}: var(--surface-solid-negative-active);
+                ${_styledcomponents.comboboxTokens.textFieldBorderColor}: var(--outline-negative);
+                ${_styledcomponents.comboboxTokens.textFieldBorderColorHover}: var(--outline-negative-hover);
+                ${_styledcomponents.comboboxTokens.textFieldBorderColorFocus}: var(--outline-negative-active);
+
+                ${_styledcomponents.comboboxTokens.textFieldBackgroundColor}: var(--surface-solid-primary);
+                ${_styledcomponents.comboboxTokens.textFieldBackgroundColorHover}: var(--surface-solid-primary);
+                ${_styledcomponents.comboboxTokens.textFieldBackgroundColorFocus}: var(--surface-solid-primary);
 
                 ${_styledcomponents.comboboxTokens.textFieldCaretColor}: var(--text-accent);
                 ${_styledcomponents.comboboxTokens.textFieldTextBeforeColor}: var(--text-tertiary);
@@ -225,7 +251,7 @@ const config = {
 
                 ${_styledcomponents.comboboxTokens.disclosureIconColor}: var(--text-secondary);
                 ${_styledcomponents.comboboxTokens.disclosureIconColorHover}: var(--text-secondary-hover);
-                ${_styledcomponents.comboboxTokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${_styledcomponents.comboboxTokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${_styledcomponents.comboboxTokens.textFieldHintIconColor}: var(--text-secondary);
 
                 ${_styledcomponents.comboboxTokens.dividerColor}: var(--surface-solid-tertiary);
@@ -236,6 +262,8 @@ const config = {
                 ${_styledcomponents.comboboxTokens.checkboxIconColor}: var(--on-dark-text-primary);
                 ${_styledcomponents.comboboxTokens.checkboxTriggerBorderCheckedColor}: transparent;
                 ${_styledcomponents.comboboxTokens.checkboxTriggerBorderColor}: var(--text-secondary);
+
+                ${_styledcomponents.comboboxTokens.dropdownBackgroundColor}: var(--surface-solid-primary);
             `
         },
         size: {
@@ -244,6 +272,7 @@ const config = {
                 ${_styledcomponents.comboboxTokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem;
                 ${_styledcomponents.comboboxTokens.textFieldPaddingWithChips}: 0.375rem;
                 ${_styledcomponents.comboboxTokens.textFieldBorderRadius}: 0.75rem;
+                ${_styledcomponents.comboboxTokens.textFieldBorderWidth}: 0.0625rem;
 
                 ${_styledcomponents.comboboxTokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem;
                 ${_styledcomponents.comboboxTokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem;
@@ -275,7 +304,7 @@ const config = {
                 ${_styledcomponents.comboboxTokens.textFieldHintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
                 ${_styledcomponents.comboboxTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
-                ${_styledcomponents.comboboxTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.comboboxTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -365,6 +394,7 @@ const config = {
                 ${_styledcomponents.comboboxTokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem;
                 ${_styledcomponents.comboboxTokens.textFieldPaddingWithChips}: 0.375rem;
                 ${_styledcomponents.comboboxTokens.textFieldBorderRadius}: 0.625rem;
+                ${_styledcomponents.comboboxTokens.textFieldBorderWidth}: 0.0625rem;
 
                 ${_styledcomponents.comboboxTokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem;
                 ${_styledcomponents.comboboxTokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem;
@@ -396,7 +426,7 @@ const config = {
                 ${_styledcomponents.comboboxTokens.textFieldHintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto;
                 ${_styledcomponents.comboboxTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
-                ${_styledcomponents.comboboxTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.comboboxTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -601,18 +631,32 @@ const config = {
         },
         disabled: {
             true: (0, _styledcomponents.css)`
-                ${_styledcomponents.comboboxTokens.textFieldDisabledOpacity}: 0.4;
+                ${_styledcomponents.comboboxTokens.textFieldDisabledOpacity}: 1;
+                ${_styledcomponents.comboboxTokens.textFieldDisabledBackgroundOpacity}: 1;
+                ${_styledcomponents.comboboxTokens.textFieldDisabledInnerContentOpacity}: 1;
+                ${_styledcomponents.comboboxTokens.textFieldColor}: var(--text-secondary);
+                ${_styledcomponents.comboboxTokens.textFieldPlaceholderColor}: var(--text-tertiary);
+                ${_styledcomponents.comboboxTokens.textFieldLabelColor}: var(--text-secondary);
+                ${_styledcomponents.comboboxTokens.textFieldTitleCaptionColor}: var(--text-tertiary);
+                ${_styledcomponents.comboboxTokens.textFieldLeftHelperColor}: var(--text-tertiary);
+                ${_styledcomponents.comboboxTokens.textFieldContentSlotColor}: var(--text-tertiary);
+                ${_styledcomponents.comboboxTokens.textFieldBackgroundColor}: var(--surface-solid-tertiary);
+                ${_styledcomponents.comboboxTokens.textFieldBorderColor}: transparent;
+                ${_styledcomponents.comboboxTokens.disclosureIconColor}: var(--text-tertiary);
             `
         },
         readOnly: {
             true: (0, _styledcomponents.css)`
+                ${_styledcomponents.comboboxTokens.textFieldReadOnlyOpacity}: 1;
                 ${_styledcomponents.comboboxTokens.textFieldColorReadOnly}: var(--text-primary);
-                ${_styledcomponents.comboboxTokens.textFieldReadOnlyOpacity}: 0.1;
-                ${_styledcomponents.comboboxTokens.textFieldContentSlotRightOpacityReadOnly}: 0.4;
-                ${_styledcomponents.comboboxTokens.textFieldBackgroundColorReadOnly}: var(--surface-solid-primary);
+                ${_styledcomponents.comboboxTokens.textFieldBackgroundColorReadOnly}: var(--surface-solid-secondary);
                 ${_styledcomponents.comboboxTokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary);
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary);
+                ${_styledcomponents.comboboxTokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary);
                 ${_styledcomponents.comboboxTokens.textFieldLabelColorReadOnly}: var(--text-primary);
+                ${_styledcomponents.comboboxTokens.textFieldContentSlotRightOpacityReadOnly}: 1;
+                ${_styledcomponents.comboboxTokens.textFieldContentSlotRightColor}: var(--text-tertiary);
+                ${_styledcomponents.comboboxTokens.disclosureIconColor}: var(--text-tertiary);
             `
         }
     }

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

@@ -20,10 +20,6 @@ const config = {
                 ${_styledcomponents.counterTokens.color}: var(--inverse-text-primary);
                 ${_styledcomponents.counterTokens.background}: var(--surface-solid-default);
             `,
-            accent: (0, _styledcomponents.css)`
-                ${_styledcomponents.counterTokens.color}: var(--on-dark-text-primary);
-                ${_styledcomponents.counterTokens.background}: var(--surface-accent);
-            `,
             positive: (0, _styledcomponents.css)`
                 ${_styledcomponents.counterTokens.color}: var(--on-dark-text-primary);
                 ${_styledcomponents.counterTokens.background}: var(--surface-positive);

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

@@ -20,8 +20,14 @@ const config = {
                 ${_styledcomponents.datePickerTokens.outlineFocusColor}: var(--surface-accent);
 
                 ${_styledcomponents.datePickerTokens.background}: var(--surface-solid-primary);
-                ${_styledcomponents.datePickerTokens.backgroundError}: var(--surface-solid-negative);
-                ${_styledcomponents.datePickerTokens.backgroundSuccess}: var(--surface-solid-positive);
+                ${_styledcomponents.datePickerTokens.backgroundError}: var(--surface-solid-primary);
+                ${_styledcomponents.datePickerTokens.backgroundSuccess}: var(--surface-solid-primary);
+
+                ${_styledcomponents.datePickerTokens.borderColor}: var(--outline-clear);
+                ${_styledcomponents.datePickerTokens.borderColorHover}: var(--on-light-outline-solid-primary-hover);
+                ${_styledcomponents.datePickerTokens.borderColorFocus}: var(--outline-primary);
+                ${_styledcomponents.datePickerTokens.borderColorError}: var(--outline-negative);
+                ${_styledcomponents.datePickerTokens.borderColorSuccess}: var(--outline-positive);
 
                 ${_styledcomponents.datePickerTokens.dividerColor}: var(--text-primary);
                 ${_styledcomponents.datePickerTokens.labelColor}: var(--text-primary);
@@ -71,11 +77,24 @@ const config = {
                 ${_styledcomponents.datePickerTokens.indicatorColor}: var(--surface-negative);
 
                 ${_styledcomponents.datePickerTokens.textFieldBackgroundColor}: var(--surface-solid-primary);
-                ${_styledcomponents.datePickerTokens.textFieldBackgroundColorFocus}: var(--surface-solid-secondary);
-                ${_styledcomponents.datePickerTokens.textFieldBackgroundErrorColor}: var(--surface-solid-negative);
-                ${_styledcomponents.datePickerTokens.textFieldBackgroundErrorColorFocus}: var(--surface-solid-negative-active);
-                ${_styledcomponents.datePickerTokens.textFieldBackgroundSuccessColor}: var(--surface-solid-positive);
-                ${_styledcomponents.datePickerTokens.textFieldBackgroundSuccessColorFocus}: var(--surface-solid-positive-active);
+                ${_styledcomponents.datePickerTokens.textFieldBackgroundColorHover}: var(--surface-solid-primary);
+                ${_styledcomponents.datePickerTokens.textFieldBackgroundColorFocus}: var(--surface-solid-primary);
+                ${_styledcomponents.datePickerTokens.textFieldBackgroundErrorColor}: var(--surface-solid-primary);
+                ${_styledcomponents.datePickerTokens.textFieldBackgroundErrorColorHover}: var(--surface-solid-primary);
+                ${_styledcomponents.datePickerTokens.textFieldBackgroundErrorColorFocus}: var(--surface-solid-primary);
+                ${_styledcomponents.datePickerTokens.textFieldBackgroundSuccessColor}: var(--surface-solid-primary);
+                ${_styledcomponents.datePickerTokens.textFieldBackgroundSuccessColorHover}: var(--surface-solid-primary);
+                ${_styledcomponents.datePickerTokens.textFieldBackgroundSuccessColorFocus}: var(--surface-solid-primary);
+
+                ${_styledcomponents.datePickerTokens.textFieldBorderColor}: var(--outline-clear);
+                ${_styledcomponents.datePickerTokens.textFieldBorderColorHover}: var(--on-light-outline-solid-primary-hover);
+                ${_styledcomponents.datePickerTokens.textFieldBorderColorFocus}: var(--outline-primary);
+                ${_styledcomponents.datePickerTokens.textFieldBorderColorError}: var(--outline-negative);
+                ${_styledcomponents.datePickerTokens.textFieldBorderColorErrorHover}: var(--outline-negative-hover);
+                ${_styledcomponents.datePickerTokens.textFieldBorderColorErrorFocus}: var(--outline-negative-active);
+                ${_styledcomponents.datePickerTokens.textFieldBorderColorSuccess}: var(--outline-positive);
+                ${_styledcomponents.datePickerTokens.textFieldBorderColorSuccessHover}: var(--outline-positive-hover);
+                ${_styledcomponents.datePickerTokens.textFieldBorderColorSuccessFocus}: var(--outline-positive-active);
 
                 ${_styledcomponents.datePickerTokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${_styledcomponents.datePickerTokens.textFieldTextAfterColor}: var(--text-tertiary);
@@ -85,11 +104,11 @@ const config = {
 
                 ${_styledcomponents.datePickerTokens.popoverShadow}: var(--shadow-down-soft-s);
                 ${_styledcomponents.datePickerTokens.popoverSeparatorBackground}: var(--surface-solid-secondary);
-                ${_styledcomponents.datePickerTokens.popoverBackgroundColor}: var(--surface-solid-card);
+                ${_styledcomponents.datePickerTokens.popoverBackgroundColor}: var(--surface-solid-primary);
 
                 ${_styledcomponents.datePickerTokens.calendarSelectedItemBackground}: var(--surface-solid-default);
                 ${_styledcomponents.datePickerTokens.calendarSelectedItemColor}: var(--inverse-text-primary);
-                ${_styledcomponents.datePickerTokens.calendarSelectableItemBackgroundHover}: var(--surface-solid-secondary);
+                ${_styledcomponents.datePickerTokens.calendarSelectableItemBackgroundHover}: var(--surface-solid-card);
                 ${_styledcomponents.datePickerTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default);
                 ${_styledcomponents.datePickerTokens.calendarCurrentItemBackgroundHover}: transparent;
                 ${_styledcomponents.datePickerTokens.calendarCurrentItemColorHover}: var(--text-primary);
@@ -187,6 +206,7 @@ const config = {
                 ${_styledcomponents.datePickerTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.datePickerTokens.textFieldHeight}: 3rem;
+                ${_styledcomponents.datePickerTokens.textFieldBorderWidth}: 0.0625rem;
                 ${_styledcomponents.datePickerTokens.textFieldBorderRadius}: 0.75rem;
                 ${_styledcomponents.datePickerTokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem;
                 ${_styledcomponents.datePickerTokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family);
@@ -266,7 +286,6 @@ const config = {
                 ${_styledcomponents.datePickerTokens.calendarHeaderWrapperPadding}: 0;
                 ${_styledcomponents.datePickerTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.datePickerTokens.calendarHeaderArrowCustomSize}: 1.5rem;
-                ${_styledcomponents.datePickerTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_styledcomponents.datePickerTokens.calendarHeaderPadding}: 0 0 0 0.75rem;
                 ${_styledcomponents.datePickerTokens.calendarHeaderDateGap}: 0.25rem;
@@ -358,6 +377,7 @@ const config = {
                 ${_styledcomponents.datePickerTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.datePickerTokens.textFieldHeight}: 2.5rem;
+                ${_styledcomponents.datePickerTokens.textFieldBorderWidth}: 0.0625rem;
                 ${_styledcomponents.datePickerTokens.textFieldBorderRadius}: 0.625rem;
                 ${_styledcomponents.datePickerTokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem;
                 ${_styledcomponents.datePickerTokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family);
@@ -437,7 +457,6 @@ const config = {
                 ${_styledcomponents.datePickerTokens.calendarHeaderWrapperPadding}: 0;
                 ${_styledcomponents.datePickerTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.datePickerTokens.calendarHeaderArrowCustomSize}: 1.5rem;
-                ${_styledcomponents.datePickerTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_styledcomponents.datePickerTokens.calendarHeaderPadding}: 0 0 0 0.5rem;
                 ${_styledcomponents.datePickerTokens.calendarHeaderDateGap}: 0.25rem;
@@ -579,26 +598,58 @@ const config = {
         },
         disabled: {
             true: (0, _styledcomponents.css)`
-                ${_styledcomponents.datePickerTokens.disabledOpacity}: 0.4;
+                ${_styledcomponents.datePickerTokens.disabledOpacity}: 1;
+                ${_styledcomponents.datePickerTokens.disabledBackgroundOpacity}: 1;
+                ${_styledcomponents.datePickerTokens.disabledInnerContentOpacity}: 1;
+                ${_styledcomponents.datePickerTokens.textFieldDisabledBackgroundOpacity}: 1;
+                ${_styledcomponents.datePickerTokens.textFieldDisabledInnerContentOpacity}: 1;
+
+                ${_styledcomponents.datePickerTokens.background}: var(--surface-solid-tertiary);
+                ${_styledcomponents.datePickerTokens.backgroundError}: var(--surface-solid-tertiary);
+                ${_styledcomponents.datePickerTokens.backgroundSuccess}: var(--surface-solid-tertiary);
+                ${_styledcomponents.datePickerTokens.borderColor}: transparent;
+                ${_styledcomponents.datePickerTokens.borderColorError}: transparent;
+                ${_styledcomponents.datePickerTokens.borderColorSuccess}: transparent;
+
+                ${_styledcomponents.datePickerTokens.labelColor}: var(--text-secondary);
+                ${_styledcomponents.datePickerTokens.titleCaptionColor}: var(--text-tertiary);
+                ${_styledcomponents.datePickerTokens.leftHelperColor}: var(--text-tertiary);
+                ${_styledcomponents.datePickerTokens.contentSlotColor}: var(--text-tertiary);
+                ${_styledcomponents.datePickerTokens.contentSlotRightColor}: var(--text-tertiary);
+
+                ${_styledcomponents.datePickerTokens.textFieldColor}: var(--text-secondary);
+                ${_styledcomponents.datePickerTokens.textFieldPlaceholderColor}: var(--text-tertiary);
+                ${_styledcomponents.datePickerTokens.textFieldBackgroundColor}: var(--surface-solid-tertiary);
+                ${_styledcomponents.datePickerTokens.textFieldBackgroundErrorColor}: var(--surface-solid-tertiary);
+                ${_styledcomponents.datePickerTokens.textFieldBackgroundSuccessColor}: var(--surface-solid-tertiary);
+                ${_styledcomponents.datePickerTokens.textFieldBorderColor}: transparent;
+                ${_styledcomponents.datePickerTokens.textFieldBorderColorError}: transparent;
+                ${_styledcomponents.datePickerTokens.textFieldBorderColorSuccess}: transparent;
+                ${_styledcomponents.datePickerTokens.textFieldContentSlotColor}: var(--text-tertiary);
+                ${_styledcomponents.datePickerTokens.textFieldContentSlotRightColor}: var(--text-tertiary);
             `
         },
         readOnly: {
             true: (0, _styledcomponents.css)`
-                ${_styledcomponents.datePickerTokens.backgroundReadOnly}: var(--surface-solid-primary);
+                ${_styledcomponents.datePickerTokens.backgroundReadOnly}: var(--surface-solid-secondary);
+                ${_styledcomponents.datePickerTokens.borderColorReadOnly}: transparent;
                 ${_styledcomponents.datePickerTokens.labelColorReadOnly}: var(--text-primary);
                 ${_styledcomponents.datePickerTokens.leftHelperColorReadOnly}: var(--text-secondary);
 
-                ${_styledcomponents.datePickerTokens.dividerColorReadOnly}: var(--text-primary);
-                ${_styledcomponents.datePickerTokens.dividerOpacityReadOnly}: 0.4;
+                ${_styledcomponents.datePickerTokens.dividerColorReadOnly}: var(--text-tertiary);
+                ${_styledcomponents.datePickerTokens.dividerOpacityReadOnly}: 1;
 
                 ${_styledcomponents.datePickerTokens.textFieldColorReadOnly}: var(--text-primary);
-                ${_styledcomponents.datePickerTokens.textFieldBackgroundColorReadOnly}: var(--surface-solid-primary);
+                ${_styledcomponents.datePickerTokens.textFieldBackgroundColorReadOnly}: var(--surface-solid-secondary);
+                ${_styledcomponents.datePickerTokens.textFieldBorderColorReadOnly}: transparent;
                 ${_styledcomponents.datePickerTokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary);
 
-                ${_styledcomponents.datePickerTokens.rightContentOpacityReadOnly}: 0.4;
-                ${_styledcomponents.datePickerTokens.textFieldContentSlotRightOpacityReadOnly}: 0.4;
-                ${_styledcomponents.datePickerTokens.textFieldReadOnlyOpacity}: 0.1;
-                ${_styledcomponents.datePickerTokens.rangeReadOnlyOpacity}: 0.1;
+                ${_styledcomponents.datePickerTokens.contentSlotRightColor}: var(--text-tertiary);
+                ${_styledcomponents.datePickerTokens.textFieldContentSlotRightColor}: var(--text-tertiary);
+                ${_styledcomponents.datePickerTokens.rightContentOpacityReadOnly}: 1;
+                ${_styledcomponents.datePickerTokens.textFieldContentSlotRightOpacityReadOnly}: 1;
+                ${_styledcomponents.datePickerTokens.textFieldReadOnlyOpacity}: 1;
+                ${_styledcomponents.datePickerTokens.rangeReadOnlyOpacity}: 1;
             `
         }
     }

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

@@ -130,7 +130,8 @@ const config = {
         },
         view: {
             default: (0, _styledcomponents.css)`
-                ${_styledcomponents.dropdownTokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${_styledcomponents.dropdownTokens.background}: var(--surface-solid-primary);
+                ${_styledcomponents.dropdownTokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${_styledcomponents.dropdownTokens.dividerColor}: var(--surface-solid-tertiary);
             `
         }

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

@@ -24,13 +24,6 @@ const config = {
                 ${_styledcomponents.embedIconButtonTokens.embedIconButtonColorHover}: var(--text-primary-hover);
                 ${_styledcomponents.embedIconButtonTokens.embedIconButtonColorActive}: var(--text-primary-active);
             `,
-            accent: (0, _styledcomponents.css)`
-                ${_styledcomponents.embedIconButtonTokens.embedIconButtonColor}: var(--text-accent);
-                ${_styledcomponents.embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-solid-clear);
-                ${_styledcomponents.embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${_styledcomponents.embedIconButtonTokens.embedIconButtonBackgroundColor});
-                ${_styledcomponents.embedIconButtonTokens.embedIconButtonColorHover}: var(--text-accent-hover);
-                ${_styledcomponents.embedIconButtonTokens.embedIconButtonColorActive}: var(--text-accent-active);
-            `,
             secondary: (0, _styledcomponents.css)`
                 ${_styledcomponents.embedIconButtonTokens.embedIconButtonColor}: var(--text-secondary);
                 ${_styledcomponents.embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-solid-clear);
@@ -133,13 +126,6 @@ const config = {
                 ${_styledcomponents.embedIconButtonTokens.embedIconButtonColor}: var(--text-tertiary);
             `
         },
-        {
-            view: 'accent',
-            disabled: true,
-            style: (0, _styledcomponents.css)`
-                ${_styledcomponents.embedIconButtonTokens.embedIconButtonDisabledOpacity}: 0.4;
-            `
-        },
         {
             view: 'secondary',
             disabled: true,

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

@@ -21,15 +21,8 @@ const config = {
                 ${_styledcomponents.iconButtonTokens.iconButtonColor}: var(--inverse-text-primary);
                 ${_styledcomponents.iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default);
                 ${_styledcomponents.iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${_styledcomponents.iconButtonTokens.iconButtonBackgroundColor});
-                ${_styledcomponents.iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary-hover);
-                ${_styledcomponents.iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary-active);
-            `,
-            accent: (0, _styledcomponents.css)`
-                ${_styledcomponents.iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent);
-                ${_styledcomponents.iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${_styledcomponents.iconButtonTokens.iconButtonBackgroundColor});
-                ${_styledcomponents.iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover);
-                ${_styledcomponents.iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active);
+                ${_styledcomponents.iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover);
+                ${_styledcomponents.iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active);
             `,
             secondary: (0, _styledcomponents.css)`
                 ${_styledcomponents.iconButtonTokens.iconButtonColor}: var(--text-primary);
@@ -70,15 +63,15 @@ const config = {
                 ${_styledcomponents.iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
                 ${_styledcomponents.iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default);
                 ${_styledcomponents.iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${_styledcomponents.iconButtonTokens.iconButtonBackgroundColor});
-                ${_styledcomponents.iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover);
-                ${_styledcomponents.iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active);
+                ${_styledcomponents.iconButtonTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-solid-default-hover);
+                ${_styledcomponents.iconButtonTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active);
             `,
             white: (0, _styledcomponents.css)`
                 ${_styledcomponents.iconButtonTokens.iconButtonColor}: var(--on-light-text-primary);
                 ${_styledcomponents.iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default);
                 ${_styledcomponents.iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${_styledcomponents.iconButtonTokens.iconButtonBackgroundColor});
-                ${_styledcomponents.iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover);
-                ${_styledcomponents.iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active);
+                ${_styledcomponents.iconButtonTokens.iconButtonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover);
+                ${_styledcomponents.iconButtonTokens.iconButtonBackgroundColorActive}: var(--on-dark-surface-solid-default-active);
             `
         },
         size: {
@@ -163,14 +156,6 @@ const config = {
                 ${_styledcomponents.iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-tertiary);
             `
         },
-        {
-            view: 'accent',
-            disabled: true,
-            style: (0, _styledcomponents.css)`
-                ${_styledcomponents.iconButtonTokens.iconButtonColor}: var(--on-dark-text-accent-minor);
-                ${_styledcomponents.iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent);
-            `
-        },
         {
             view: 'secondary',
             disabled: true,

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

@@ -26,16 +26,6 @@ const config = {
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColorHover}: var(--text-primary-hover);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColorActive}: var(--text-primary-active);
             `,
-            accent: (0, _styledcomponents.css)`
-                ${_styledcomponents.linkButtonTokens.linkButtonIconColor}: var(--text-accent);
-                ${_styledcomponents.linkButtonTokens.linkButtonTextColor}: var(--text-accent);
-                ${_styledcomponents.linkButtonTokens.linkButtonBackgroundColor}: var(---surface-solid-clear);
-                ${_styledcomponents.linkButtonTokens.linkButtonIconColorHover}: var(--text-accent-hover);
-                ${_styledcomponents.linkButtonTokens.linkButtonIconColorActive}: var(--text-accent-active);
-                ${_styledcomponents.linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
-                ${_styledcomponents.linkButtonTokens.linkButtonTextColorHover}: var(--text-accent-hover);
-                ${_styledcomponents.linkButtonTokens.linkButtonTextColorActive}: var(--text-accent-active);
-            `,
             secondary: (0, _styledcomponents.css)`
                 ${_styledcomponents.linkButtonTokens.linkButtonIconColor}: var(--text-secondary);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColor}: var(--text-secondary);
@@ -180,13 +170,6 @@ const config = {
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColor}: var(--text-tertiary);
             `
         },
-        {
-            view: 'accent',
-            disabled: true,
-            style: (0, _styledcomponents.css)`
-                ${_styledcomponents.linkButtonTokens.linkButtonDisabledOpacity}: 0.4;
-            `
-        },
         {
             view: 'secondary',
             disabled: true,