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

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

@@ -60,49 +60,7 @@ const config = {
                 ${_styledcomponents.attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
 
                 ${_styledcomponents.attachTokens.moreIconColor}: var(--text-primary);
-            `,
-            accent: (0, _styledcomponents.css)`
-                ${_styledcomponents.attachTokens.buttonColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.attachTokens.buttonValueColor}: var(--on-dark-text-secondary);
-                ${_styledcomponents.attachTokens.buttonBackgroundColor}: var(--surface-accent);
-                ${_styledcomponents.attachTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.attachTokens.buttonBackgroundColor});
-                ${_styledcomponents.attachTokens.buttonColorHover}: var(--on-dark-text-primary);
-                ${_styledcomponents.attachTokens.buttonBackgroundColorHover}: var(--surface-accent-hover);
-                ${_styledcomponents.attachTokens.buttonColorActive}: var(--on-dark-text-primary);
-                ${_styledcomponents.attachTokens.buttonBackgroundColorActive}: var(--surface-accent-active);
-
-                ${_styledcomponents.attachTokens.buttonDisabledOpacity}: 0.4;
-                ${_styledcomponents.attachTokens.buttonFocusColor}: var(--surface-accent);
-
-                ${_styledcomponents.attachTokens.cellColor}: var(--text-primary);
-                ${_styledcomponents.attachTokens.cellLabelColor}: var(--text-secondary);
-                ${_styledcomponents.attachTokens.cellTitleColor}: var(--text-primary);
-                ${_styledcomponents.attachTokens.cellSubtitleColor}: var(--text-secondary);
-                ${_styledcomponents.attachTokens.cellBackgroundColor}: transparent;
-
-                ${_styledcomponents.attachTokens.iconButtonColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.attachTokens.iconButtonBackgroundColor}: var(--surface-accent);
-                ${_styledcomponents.attachTokens.iconButtonLoadingBackgroundColor}: var(${_styledcomponents.attachTokens.iconButtonBackgroundColor});
-                ${_styledcomponents.attachTokens.iconButtonColorHover}: var(--on-dark-text-primary);
-                ${_styledcomponents.attachTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover);
-                ${_styledcomponents.attachTokens.iconButtonColorActive}: var(--on-dark-text-primary);
-                ${_styledcomponents.attachTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active);
-
-                ${_styledcomponents.attachTokens.iconButtonDisabledOpacity}: 0.4;
-                ${_styledcomponents.attachTokens.iconButtonFocusColor}: var(--surface-accent);
-
-                ${_styledcomponents.attachTokens.iconButtonCancelColor}: var(--text-secondary);
-                ${_styledcomponents.attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear);
-                ${_styledcomponents.attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${_styledcomponents.attachTokens.iconButtonCancelBackgroundColor});
-                ${_styledcomponents.attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover);
-                ${_styledcomponents.attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear);
-                ${_styledcomponents.attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active);
-                ${_styledcomponents.attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear);
-
-                ${_styledcomponents.attachTokens.iconButtonCancelDisabledOpacity}: 0.4;
-                ${_styledcomponents.attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
-
-                ${_styledcomponents.attachTokens.moreIconColor}: var(--text-primary);
+                ${_styledcomponents.attachTokens.dropdownBackground}: var(--surface-solid-primary);
             `,
             secondary: (0, _styledcomponents.css)`
                 ${_styledcomponents.attachTokens.buttonColor}: var(--text-primary);
@@ -146,6 +104,7 @@ const config = {
                 ${_styledcomponents.attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
 
                 ${_styledcomponents.attachTokens.moreIconColor}: var(--text-primary);
+                ${_styledcomponents.attachTokens.dropdownBackground}: var(--surface-solid-primary);
             `,
             clear: (0, _styledcomponents.css)`
                 ${_styledcomponents.attachTokens.buttonColor}: var(--text-primary);
@@ -189,6 +148,7 @@ const config = {
                 ${_styledcomponents.attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
 
                 ${_styledcomponents.attachTokens.moreIconColor}: var(--text-primary);
+                ${_styledcomponents.attachTokens.dropdownBackground}: var(--surface-solid-primary);
             `,
             positive: (0, _styledcomponents.css)`
                 ${_styledcomponents.attachTokens.buttonColor}: var(--on-dark-text-primary);
@@ -232,6 +192,7 @@ const config = {
                 ${_styledcomponents.attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
 
                 ${_styledcomponents.attachTokens.moreIconColor}: var(--text-primary);
+                ${_styledcomponents.attachTokens.dropdownBackground}: var(--surface-solid-primary);
             `,
             warning: (0, _styledcomponents.css)`
                 ${_styledcomponents.attachTokens.buttonColor}: var(--on-dark-text-primary);
@@ -275,6 +236,7 @@ const config = {
                 ${_styledcomponents.attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
 
                 ${_styledcomponents.attachTokens.moreIconColor}: var(--text-primary);
+                ${_styledcomponents.attachTokens.dropdownBackground}: var(--surface-solid-primary);
             `,
             negative: (0, _styledcomponents.css)`
                 ${_styledcomponents.attachTokens.buttonColor}: var(--on-dark-text-primary);
@@ -315,6 +277,7 @@ const config = {
                 ${_styledcomponents.attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
 
                 ${_styledcomponents.attachTokens.moreIconColor}: var(--text-primary);
+                ${_styledcomponents.attachTokens.dropdownBackground}: var(--surface-solid-primary);
             `,
             black: (0, _styledcomponents.css)`
                 ${_styledcomponents.attachTokens.buttonColor}: var(--on-dark-text-primary);
@@ -358,6 +321,7 @@ const config = {
                 ${_styledcomponents.attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
 
                 ${_styledcomponents.attachTokens.moreIconColor}: var(--text-primary);
+                ${_styledcomponents.attachTokens.dropdownBackground}: var(--surface-solid-primary);
             `,
             white: (0, _styledcomponents.css)`
                 ${_styledcomponents.attachTokens.buttonColor}: var(--on-light-text-primary);
@@ -401,6 +365,7 @@ const config = {
                 ${_styledcomponents.attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
 
                 ${_styledcomponents.attachTokens.moreIconColor}: var(--text-primary);
+                ${_styledcomponents.attachTokens.dropdownBackground}: var(--surface-solid-primary);
             `
         },
         helperTextView: {

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

@@ -26,8 +26,13 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldClearPlaceholderColor}: var(--text-secondary);
                 ${_styledcomponents.autocompleteTokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary);
 
+                ${_styledcomponents.autocompleteTokens.textFieldBorderColor}: var(--outline-clear);
+                ${_styledcomponents.autocompleteTokens.textFieldBorderColorHover}: var(--on-light-outline-solid-primary-hover);
+                ${_styledcomponents.autocompleteTokens.textFieldBorderColorFocus}: var(--outline-primary);
+
                 ${_styledcomponents.autocompleteTokens.textFieldBackgroundColor}: var(--surface-solid-primary);
-                ${_styledcomponents.autocompleteTokens.textFieldBackgroundColorFocus}: var(--surface-solid-secondary);
+                ${_styledcomponents.autocompleteTokens.textFieldBackgroundColorHover}: var(--surface-solid-primary);
+                ${_styledcomponents.autocompleteTokens.textFieldBackgroundColorFocus}: var(--surface-solid-primary);
                 ${_styledcomponents.autocompleteTokens.textFieldCaretColor}: var(--text-accent);
                 ${_styledcomponents.autocompleteTokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${_styledcomponents.autocompleteTokens.textFieldTextAfterColor}: var(--text-tertiary);
@@ -47,10 +52,10 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldDividerColorHover}: var(--text-secondary);
                 ${_styledcomponents.autocompleteTokens.textFieldDividerColorFocus}: var(--surface-accent);
 
-                ${_styledcomponents.autocompleteTokens.background}: var(--surface-solid-card);
+                ${_styledcomponents.autocompleteTokens.background}: var(--surface-solid-primary);
                 ${_styledcomponents.autocompleteTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
                 ${_styledcomponents.autocompleteTokens.itemBackground}: transparent;
-                ${_styledcomponents.autocompleteTokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${_styledcomponents.autocompleteTokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${_styledcomponents.autocompleteTokens.itemColor}: var(--text-primary);
 
                 ${_styledcomponents.autocompleteTokens.textFieldContentSlotColor}: ${_styledcomponents.autocompleteTokens.textFieldColor};
@@ -68,8 +73,13 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldClearPlaceholderColor}: var(--text-positive);
                 ${_styledcomponents.autocompleteTokens.textFieldClearPlaceholderColorFocus}: var(--text-positive);
 
-                ${_styledcomponents.autocompleteTokens.textFieldBackgroundColor}: var(--surface-solid-positive);
-                ${_styledcomponents.autocompleteTokens.textFieldBackgroundColorFocus}: var(--surface-solid-positive-active);
+                ${_styledcomponents.autocompleteTokens.textFieldBorderColor}: var(--outline-positive);
+                ${_styledcomponents.autocompleteTokens.textFieldBorderColorHover}: var(--outline-positive-hover);
+                ${_styledcomponents.autocompleteTokens.textFieldBorderColorFocus}: var(--outline-positive-active);
+
+                ${_styledcomponents.autocompleteTokens.textFieldBackgroundColor}: var(--surface-solid-primary);
+                ${_styledcomponents.autocompleteTokens.textFieldBackgroundColorHover}: var(--surface-solid-primary);
+                ${_styledcomponents.autocompleteTokens.textFieldBackgroundColorFocus}: var(--surface-solid-primary);
                 ${_styledcomponents.autocompleteTokens.textFieldCaretColor}: var(--text-accent);
                 ${_styledcomponents.autocompleteTokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${_styledcomponents.autocompleteTokens.textFieldTextAfterColor}: var(--text-tertiary);
@@ -89,10 +99,10 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldDividerColorHover}: var(--surface-positive);
                 ${_styledcomponents.autocompleteTokens.textFieldDividerColorFocus}: var(--surface-accent);
 
-                ${_styledcomponents.autocompleteTokens.background}: var(--surface-solid-card);
+                ${_styledcomponents.autocompleteTokens.background}: var(--surface-solid-primary);
                 ${_styledcomponents.autocompleteTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
                 ${_styledcomponents.autocompleteTokens.itemBackground}: transparent;
-                ${_styledcomponents.autocompleteTokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${_styledcomponents.autocompleteTokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${_styledcomponents.autocompleteTokens.itemColor}: var(--text-primary);
 
                 ${_styledcomponents.autocompleteTokens.textFieldContentSlotColor}: ${_styledcomponents.autocompleteTokens.textFieldColor};
@@ -110,8 +120,13 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldClearPlaceholderColor}: var(--text-warning);
                 ${_styledcomponents.autocompleteTokens.textFieldClearPlaceholderColorFocus}: var(--text-warning);
 
-                ${_styledcomponents.autocompleteTokens.textFieldBackgroundColor}: var(--surface-solid-warning);
-                ${_styledcomponents.autocompleteTokens.textFieldBackgroundColorFocus}: var(--surface-solid-warning-active);
+                ${_styledcomponents.autocompleteTokens.textFieldBorderColor}: var(--outline-warning);
+                ${_styledcomponents.autocompleteTokens.textFieldBorderColorHover}: var(--outline-warning-hover);
+                ${_styledcomponents.autocompleteTokens.textFieldBorderColorFocus}: var(--outline-warning-active);
+
+                ${_styledcomponents.autocompleteTokens.textFieldBackgroundColor}: var(--surface-solid-primary);
+                ${_styledcomponents.autocompleteTokens.textFieldBackgroundColorHover}: var(--surface-solid-primary);
+                ${_styledcomponents.autocompleteTokens.textFieldBackgroundColorFocus}: var(--surface-solid-primary);
                 ${_styledcomponents.autocompleteTokens.textFieldCaretColor}: var(--text-accent);
                 ${_styledcomponents.autocompleteTokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${_styledcomponents.autocompleteTokens.textFieldTextAfterColor}: var(--text-tertiary);
@@ -131,10 +146,10 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldDividerColorHover}: var(--surface-warning);
                 ${_styledcomponents.autocompleteTokens.textFieldDividerColorFocus}: var(--surface-accent);
 
-                ${_styledcomponents.autocompleteTokens.background}: var(--surface-solid-card);
+                ${_styledcomponents.autocompleteTokens.background}: var(--surface-solid-primary);
                 ${_styledcomponents.autocompleteTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
                 ${_styledcomponents.autocompleteTokens.itemBackground}: transparent;
-                ${_styledcomponents.autocompleteTokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${_styledcomponents.autocompleteTokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${_styledcomponents.autocompleteTokens.itemColor}: var(--text-primary);
 
                 ${_styledcomponents.autocompleteTokens.textFieldContentSlotColor}: ${_styledcomponents.autocompleteTokens.textFieldColor};
@@ -152,8 +167,13 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldClearPlaceholderColor}: var(--text-negative);
                 ${_styledcomponents.autocompleteTokens.textFieldClearPlaceholderColorFocus}: var(--text-negative);
 
-                ${_styledcomponents.autocompleteTokens.textFieldBackgroundColor}: var(--surface-solid-negative);
-                ${_styledcomponents.autocompleteTokens.textFieldBackgroundColorFocus}: var(--surface-solid-negative-active);
+                ${_styledcomponents.autocompleteTokens.textFieldBorderColor}: var(--outline-negative);
+                ${_styledcomponents.autocompleteTokens.textFieldBorderColorHover}: var(--outline-negative-hover);
+                ${_styledcomponents.autocompleteTokens.textFieldBorderColorFocus}: var(--outline-negative-active);
+
+                ${_styledcomponents.autocompleteTokens.textFieldBackgroundColor}: var(--surface-solid-primary);
+                ${_styledcomponents.autocompleteTokens.textFieldBackgroundColorHover}: var(--surface-solid-primary);
+                ${_styledcomponents.autocompleteTokens.textFieldBackgroundColorFocus}: var(--surface-solid-primary);
                 ${_styledcomponents.autocompleteTokens.textFieldCaretColor}: var(--text-accent);
                 ${_styledcomponents.autocompleteTokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${_styledcomponents.autocompleteTokens.textFieldTextAfterColor}: var(--text-tertiary);
@@ -173,10 +193,10 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldDividerColorHover}: var(--surface-negative);
                 ${_styledcomponents.autocompleteTokens.textFieldDividerColorFocus}: var(--surface-accent);
 
-                ${_styledcomponents.autocompleteTokens.background}: var(--surface-solid-card);
+                ${_styledcomponents.autocompleteTokens.background}: var(--surface-solid-primary);
                 ${_styledcomponents.autocompleteTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
                 ${_styledcomponents.autocompleteTokens.itemBackground}: transparent;
-                ${_styledcomponents.autocompleteTokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${_styledcomponents.autocompleteTokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${_styledcomponents.autocompleteTokens.itemColor}: var(--text-primary);
 
                 ${_styledcomponents.autocompleteTokens.textFieldContentSlotColor}: ${_styledcomponents.autocompleteTokens.textFieldColor};
@@ -191,6 +211,7 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldHeight}: 3rem;
                 ${_styledcomponents.autocompleteTokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem;
                 ${_styledcomponents.autocompleteTokens.textFieldBorderRadius}: 0.75rem;
+                ${_styledcomponents.autocompleteTokens.textFieldBorderWidth}: 0.0625rem;
 
                 ${_styledcomponents.autocompleteTokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem;
                 ${_styledcomponents.autocompleteTokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem;
@@ -223,7 +244,7 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldHintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
                 ${_styledcomponents.autocompleteTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
-                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -266,6 +287,7 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldHeight}: 2.5rem;
                 ${_styledcomponents.autocompleteTokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem;
                 ${_styledcomponents.autocompleteTokens.textFieldBorderRadius}: 0.625rem;
+                ${_styledcomponents.autocompleteTokens.textFieldBorderWidth}: 0.0625rem;
 
                 ${_styledcomponents.autocompleteTokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem;
                 ${_styledcomponents.autocompleteTokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem;
@@ -298,7 +320,7 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldHintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto;
                 ${_styledcomponents.autocompleteTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
-                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -410,19 +432,29 @@ const config = {
         },
         disabled: {
             true: (0, _styledcomponents.css)`
-                ${_styledcomponents.autocompleteTokens.textFieldDisabledOpacity}: 0.4;
+                ${_styledcomponents.autocompleteTokens.textFieldDisabledOpacity}: 1;
+                ${_styledcomponents.autocompleteTokens.textFieldDisabledBackgroundOpacity}: 1;
+                ${_styledcomponents.autocompleteTokens.textFieldDisabledInnerContentOpacity}: 1;
+                ${_styledcomponents.autocompleteTokens.textFieldColor}: var(--text-secondary);
+                ${_styledcomponents.autocompleteTokens.textFieldPlaceholderColor}: var(--text-tertiary);
+                ${_styledcomponents.autocompleteTokens.textFieldLabelColor}: var(--text-secondary);
+                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperColor}: var(--text-tertiary);
+                ${_styledcomponents.autocompleteTokens.textFieldContentSlotColor}: var(--text-tertiary);
+                ${_styledcomponents.autocompleteTokens.textFieldBackgroundColor}: var(--surface-solid-tertiary);
+                ${_styledcomponents.autocompleteTokens.textFieldBorderColor}: transparent;
             `
         },
         readOnly: {
             true: (0, _styledcomponents.css)`
+                ${_styledcomponents.autocompleteTokens.textFieldReadOnlyOpacity}: 1;
                 ${_styledcomponents.autocompleteTokens.textFieldColorReadOnly}: var(--text-primary);
-                ${_styledcomponents.autocompleteTokens.textFieldReadOnlyOpacity}: 0.1;
-                ${_styledcomponents.autocompleteTokens.textFieldContentSlotRightOpacityReadOnly}: 0.4;
-                ${_styledcomponents.autocompleteTokens.textFieldBackgroundColorReadOnly}: var(--surface-solid-primary);
+                ${_styledcomponents.autocompleteTokens.textFieldBackgroundColorReadOnly}: var(--surface-solid-secondary);
                 ${_styledcomponents.autocompleteTokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary);
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary);
                 ${_styledcomponents.autocompleteTokens.textFieldLabelColorReadOnly}: var(--text-primary);
                 ${_styledcomponents.autocompleteTokens.textFieldDividerColorReadOnly}: var(--surface-solid-primary);
+                ${_styledcomponents.autocompleteTokens.textFieldContentSlotRightOpacityReadOnly}: 1;
+                ${_styledcomponents.autocompleteTokens.textFieldContentSlotRightColor}: var(--text-tertiary);
             `
         }
     }

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

@@ -119,7 +119,7 @@ const config = {
                 ${_styledcomponents.avatarTokens.badgeBackground}: var(--surface-positive);
 
                 ${_styledcomponents.avatarTokens.badgeColorTransparent}: var(--text-positive);
-                ${_styledcomponents.avatarTokens.badgeBackgroundTransparent}: var(--surface-solid-positive);
+                ${_styledcomponents.avatarTokens.badgeBackgroundTransparent}: var(--surface-transparent-positive);
 
                 ${_styledcomponents.avatarTokens.badgeColorClear}: var(--text-positive);
                 ${_styledcomponents.avatarTokens.badgeBackgroundClear}: var(--surface-clear);
@@ -129,7 +129,7 @@ const config = {
                 ${_styledcomponents.avatarTokens.badgeBackground}: var(--surface-warning);
 
                 ${_styledcomponents.avatarTokens.badgeColorTransparent}: var(--text-warning);
-                ${_styledcomponents.avatarTokens.badgeBackgroundTransparent}: var(--surface-solid-warning);
+                ${_styledcomponents.avatarTokens.badgeBackgroundTransparent}: var(--surface-transparent-warning);
 
                 ${_styledcomponents.avatarTokens.badgeColorClear}: var(--text-warning);
                 ${_styledcomponents.avatarTokens.badgeBackgroundClear}: var(--surface-clear);
@@ -139,7 +139,7 @@ const config = {
                 ${_styledcomponents.avatarTokens.badgeBackground}: var(--surface-negative);
 
                 ${_styledcomponents.avatarTokens.badgeColorTransparent}: var(--text-negative);
-                ${_styledcomponents.avatarTokens.badgeBackgroundTransparent}: var(--surface-solid-negative);
+                ${_styledcomponents.avatarTokens.badgeBackgroundTransparent}: var(--surface-transparent-negative);
 
                 ${_styledcomponents.avatarTokens.badgeColorClear}: var(--text-negative);
                 ${_styledcomponents.avatarTokens.badgeBackgroundClear}: var(--surface-clear);

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

@@ -20,9 +20,6 @@ const config = {
             default: (0, _styledcomponents.css)`
                 ${_styledcomponents.badgeTokens.color}: var(--text-primary);
             `,
-            accent: (0, _styledcomponents.css)`
-                ${_styledcomponents.badgeTokens.color}: var(--text-accent);
-            `,
             positive: (0, _styledcomponents.css)`
                 ${_styledcomponents.badgeTokens.color}: var(--text-positive);
             `,

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

@@ -26,21 +26,12 @@ const config = {
 
                 ${_styledcomponents.badgeTokens.colorClear}: var(--text-primary);
             `,
-            accent: (0, _styledcomponents.css)`
-                ${_styledcomponents.badgeTokens.color}: var(--on-dark-text-primary);
-                ${_styledcomponents.badgeTokens.background}: var(--surface-accent);
-
-                ${_styledcomponents.badgeTokens.colorTransparent}: var(--text-accent);
-                ${_styledcomponents.badgeTokens.backgroundTransparent}: var(--surface-solid-accent);
-
-                ${_styledcomponents.badgeTokens.colorClear}: var(--text-accent);
-            `,
             positive: (0, _styledcomponents.css)`
                 ${_styledcomponents.badgeTokens.color}: var(--on-dark-text-primary);
                 ${_styledcomponents.badgeTokens.background}: var(--surface-positive);
 
                 ${_styledcomponents.badgeTokens.colorTransparent}: var(--text-positive);
-                ${_styledcomponents.badgeTokens.backgroundTransparent}: var(--surface-solid-positive);
+                ${_styledcomponents.badgeTokens.backgroundTransparent}: var(--surface-transparent-positive);
 
                 ${_styledcomponents.badgeTokens.colorClear}: var(--text-positive);
             `,
@@ -49,7 +40,7 @@ const config = {
                 ${_styledcomponents.badgeTokens.background}: var(--surface-warning);
 
                 ${_styledcomponents.badgeTokens.colorTransparent}: var(--text-warning);
-                ${_styledcomponents.badgeTokens.backgroundTransparent}: var(--surface-solid-warning);
+                ${_styledcomponents.badgeTokens.backgroundTransparent}: var(--surface-transparent-warning);
 
                 ${_styledcomponents.badgeTokens.colorClear}: var(--text-warning);
             `,
@@ -58,7 +49,7 @@ const config = {
                 ${_styledcomponents.badgeTokens.background}: var(--surface-negative);
 
                 ${_styledcomponents.badgeTokens.colorTransparent}: var(--text-negative);
-                ${_styledcomponents.badgeTokens.backgroundTransparent}: var(--surface-solid-negative);
+                ${_styledcomponents.badgeTokens.backgroundTransparent}: var(--surface-transparent-negative);
 
                 ${_styledcomponents.badgeTokens.colorClear}: var(--text-negative);
             `,

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

@@ -24,18 +24,8 @@ const config = {
                 ${_styledcomponents.buttonTokens.buttonValueColor}: var(--inverse-text-secondary);
                 ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--surface-solid-default);
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover);
-                ${_styledcomponents.buttonTokens.buttonColorActive}: var(--inverse-text-primary-active);
-            `,
-            accent: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonTokens.buttonColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--surface-accent);
-                ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-active);
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover);
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active);
             `,
             secondary: (0, _styledcomponents.css)`
                 ${_styledcomponents.buttonTokens.buttonColor}: var(--text-primary);
@@ -94,8 +84,8 @@ const config = {
                 ${_styledcomponents.buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
                 ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default);
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover);
-                ${_styledcomponents.buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active);
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover);
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active);
             `,
             white: (0, _styledcomponents.css)`
                 ${_styledcomponents.buttonTokens.buttonColor}: var(--on-light-text-primary);
@@ -104,8 +94,8 @@ const config = {
                 ${_styledcomponents.buttonTokens.buttonValueColor}: var(--on-light-text-secondary);
                 ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default);
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonTokens.buttonColorHover}: var(--on-light-text-primary-hover);
-                ${_styledcomponents.buttonTokens.buttonColorActive}: var(--on-light-text-primary-active);
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover);
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active);
             `
         },
         size: {
@@ -201,17 +191,6 @@ const config = {
                 ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--surface-solid-tertiary);
             `
         },
-        {
-            view: 'accent',
-            disabled: true,
-            style: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonTokens.buttonColor}: var(--on-dark-text-accent-minor);
-                ${_styledcomponents.buttonTokens.buttonTextColor}: var(--on-dark-text-accent-minor);
-                ${_styledcomponents.buttonTokens.buttonIconColor}: var(--on-dark-text-accent-minor);
-                ${_styledcomponents.buttonTokens.buttonValueColor}: var(--on-dark-text-accent-minor);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--surface-accent);
-            `
-        },
         {
             view: 'secondary',
             disabled: true,

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

@@ -28,18 +28,6 @@ const config = {
                 ${_styledcomponents.buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary);
                 ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active);
             `,
-            accent: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonGroupTokens.buttonColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent);
-                ${_styledcomponents.buttonGroupTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonGroupTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-accent-hover);
-                ${_styledcomponents.buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-accent-active);
-            `,
             secondary: (0, _styledcomponents.css)`
                 ${_styledcomponents.buttonGroupTokens.buttonColor}: var(--text-primary);
                 ${_styledcomponents.buttonGroupTokens.buttonTextColor}: var(--text-primary);

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

@@ -105,7 +105,6 @@ const config = {
 
                 ${_styledcomponents.calendarBaseTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.calendarBaseTokens.calendarArrowHeaderCustomSize}: 1.5rem;
-                ${_styledcomponents.calendarBaseTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_styledcomponents.calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem;
                 ${_styledcomponents.calendarBaseTokens.calendarHeaderDateGap}: 0.25rem;
@@ -175,7 +174,6 @@ const config = {
 
                 ${_styledcomponents.calendarBaseTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.calendarBaseTokens.calendarArrowHeaderCustomSize}: 1.5rem;
-                ${_styledcomponents.calendarBaseTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_styledcomponents.calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem;
                 ${_styledcomponents.calendarBaseTokens.calendarHeaderDateGap}: 0.25rem;

package/dist/styled-components/cjs/components/Calendar/CalendarDouble.config.js

@@ -106,7 +106,6 @@ const config = {
 
                 ${_styledcomponents.calendarDoubleTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.calendarDoubleTokens.calendarArrowHeaderCustomSize}: 1.5rem;
-                ${_styledcomponents.calendarDoubleTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_styledcomponents.calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem;
                 ${_styledcomponents.calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem;
@@ -176,7 +175,6 @@ const config = {
 
                 ${_styledcomponents.calendarDoubleTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.calendarDoubleTokens.calendarArrowHeaderCustomSize}: 1.5rem;
-                ${_styledcomponents.calendarDoubleTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_styledcomponents.calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem;
                 ${_styledcomponents.calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem;