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

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

@@ -45,7 +45,7 @@ const config = {
                 ${_styledcomponents.textFieldGroupTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
                 ${_styledcomponents.textFieldGroupTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height);
 
-                ${_styledcomponents.textFieldGroupTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.textFieldGroupTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -101,7 +101,7 @@ const config = {
                 ${_styledcomponents.textFieldGroupTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
                 ${_styledcomponents.textFieldGroupTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height);
 
-                ${_styledcomponents.textFieldGroupTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.textFieldGroupTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -157,7 +157,7 @@ const config = {
                 ${_styledcomponents.textFieldGroupTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
                 ${_styledcomponents.textFieldGroupTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
 
-                ${_styledcomponents.textFieldGroupTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.textFieldGroupTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -213,7 +213,7 @@ const config = {
                 ${_styledcomponents.textFieldGroupTokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_styledcomponents.textFieldGroupTokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_styledcomponents.textFieldGroupTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.textFieldGroupTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);

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

@@ -50,49 +50,7 @@ export const config = {
                 ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
 
                 ${attachTokens.moreIconColor}: var(--text-primary);
-            `,
-            accent: css`
-                ${attachTokens.buttonColor}: var(--on-dark-text-primary);
-                ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary);
-                ${attachTokens.buttonBackgroundColor}: var(--surface-accent);
-                ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor});
-                ${attachTokens.buttonColorHover}: var(--on-dark-text-primary);
-                ${attachTokens.buttonBackgroundColorHover}: var(--surface-accent-hover);
-                ${attachTokens.buttonColorActive}: var(--on-dark-text-primary);
-                ${attachTokens.buttonBackgroundColorActive}: var(--surface-accent-active);
-
-                ${attachTokens.buttonDisabledOpacity}: 0.4;
-                ${attachTokens.buttonFocusColor}: var(--surface-accent);
-
-                ${attachTokens.cellColor}: var(--text-primary);
-                ${attachTokens.cellLabelColor}: var(--text-secondary);
-                ${attachTokens.cellTitleColor}: var(--text-primary);
-                ${attachTokens.cellSubtitleColor}: var(--text-secondary);
-                ${attachTokens.cellBackgroundColor}: transparent;
-
-                ${attachTokens.iconButtonColor}: var(--on-dark-text-primary);
-                ${attachTokens.iconButtonBackgroundColor}: var(--surface-accent);
-                ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor});
-                ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary);
-                ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover);
-                ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary);
-                ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active);
-
-                ${attachTokens.iconButtonDisabledOpacity}: 0.4;
-                ${attachTokens.iconButtonFocusColor}: var(--surface-accent);
-
-                ${attachTokens.iconButtonCancelColor}: var(--text-secondary);
-                ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear);
-                ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor});
-                ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover);
-                ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear);
-                ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active);
-                ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear);
-
-                ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4;
-                ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
-
-                ${attachTokens.moreIconColor}: var(--text-primary);
+                ${attachTokens.dropdownBackground}: var(--surface-solid-primary);
             `,
             secondary: css`
                 ${attachTokens.buttonColor}: var(--text-primary);
@@ -136,6 +94,7 @@ export const config = {
                 ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
 
                 ${attachTokens.moreIconColor}: var(--text-primary);
+                ${attachTokens.dropdownBackground}: var(--surface-solid-primary);
             `,
             clear: css`
                 ${attachTokens.buttonColor}: var(--text-primary);
@@ -179,6 +138,7 @@ export const config = {
                 ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
 
                 ${attachTokens.moreIconColor}: var(--text-primary);
+                ${attachTokens.dropdownBackground}: var(--surface-solid-primary);
             `,
             positive: css`
                 ${attachTokens.buttonColor}: var(--on-dark-text-primary);
@@ -222,6 +182,7 @@ export const config = {
                 ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
 
                 ${attachTokens.moreIconColor}: var(--text-primary);
+                ${attachTokens.dropdownBackground}: var(--surface-solid-primary);
             `,
             warning: css`
                 ${attachTokens.buttonColor}: var(--on-dark-text-primary);
@@ -265,6 +226,7 @@ export const config = {
                 ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
 
                 ${attachTokens.moreIconColor}: var(--text-primary);
+                ${attachTokens.dropdownBackground}: var(--surface-solid-primary);
             `,
             negative: css`
                 ${attachTokens.buttonColor}: var(--on-dark-text-primary);
@@ -305,6 +267,7 @@ export const config = {
                 ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
 
                 ${attachTokens.moreIconColor}: var(--text-primary);
+                ${attachTokens.dropdownBackground}: var(--surface-solid-primary);
             `,
             black: css`
                 ${attachTokens.buttonColor}: var(--on-dark-text-primary);
@@ -348,6 +311,7 @@ export const config = {
                 ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
 
                 ${attachTokens.moreIconColor}: var(--text-primary);
+                ${attachTokens.dropdownBackground}: var(--surface-solid-primary);
             `,
             white: css`
                 ${attachTokens.buttonColor}: var(--on-light-text-primary);
@@ -391,6 +355,7 @@ export const config = {
                 ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
 
                 ${attachTokens.moreIconColor}: var(--text-primary);
+                ${attachTokens.dropdownBackground}: var(--surface-solid-primary);
             `
         },
         helperTextView: {

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

@@ -16,8 +16,13 @@ export const config = {
                 ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary);
                 ${tokens.textFieldClearPlaceholderColorFocus}: 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.textFieldCaretColor}: var(--text-accent);
                 ${tokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${tokens.textFieldTextAfterColor}: var(--text-tertiary);
@@ -37,10 +42,10 @@ export const config = {
                 ${tokens.textFieldDividerColorHover}: var(--text-secondary);
                 ${tokens.textFieldDividerColorFocus}: var(--surface-accent);
 
-                ${tokens.background}: var(--surface-solid-card);
+                ${tokens.background}: var(--surface-solid-primary);
                 ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
                 ${tokens.itemBackground}: transparent;
-                ${tokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${tokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${tokens.itemColor}: var(--text-primary);
 
                 ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor};
@@ -58,8 +63,13 @@ export const config = {
                 ${tokens.textFieldClearPlaceholderColor}: var(--text-positive);
                 ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive);
 
-                ${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.textFieldCaretColor}: var(--text-accent);
                 ${tokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${tokens.textFieldTextAfterColor}: var(--text-tertiary);
@@ -79,10 +89,10 @@ export const config = {
                 ${tokens.textFieldDividerColorHover}: var(--surface-positive);
                 ${tokens.textFieldDividerColorFocus}: var(--surface-accent);
 
-                ${tokens.background}: var(--surface-solid-card);
+                ${tokens.background}: var(--surface-solid-primary);
                 ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
                 ${tokens.itemBackground}: transparent;
-                ${tokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${tokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${tokens.itemColor}: var(--text-primary);
 
                 ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor};
@@ -100,8 +110,13 @@ export const config = {
                 ${tokens.textFieldClearPlaceholderColor}: var(--text-warning);
                 ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning);
 
-                ${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.textFieldCaretColor}: var(--text-accent);
                 ${tokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${tokens.textFieldTextAfterColor}: var(--text-tertiary);
@@ -121,10 +136,10 @@ export const config = {
                 ${tokens.textFieldDividerColorHover}: var(--surface-warning);
                 ${tokens.textFieldDividerColorFocus}: var(--surface-accent);
 
-                ${tokens.background}: var(--surface-solid-card);
+                ${tokens.background}: var(--surface-solid-primary);
                 ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
                 ${tokens.itemBackground}: transparent;
-                ${tokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${tokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${tokens.itemColor}: var(--text-primary);
 
                 ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor};
@@ -142,8 +157,13 @@ export const config = {
                 ${tokens.textFieldClearPlaceholderColor}: var(--text-negative);
                 ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative);
 
-                ${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.textFieldCaretColor}: var(--text-accent);
                 ${tokens.textFieldTextBeforeColor}: var(--text-tertiary);
                 ${tokens.textFieldTextAfterColor}: var(--text-tertiary);
@@ -163,10 +183,10 @@ export const config = {
                 ${tokens.textFieldDividerColorHover}: var(--surface-negative);
                 ${tokens.textFieldDividerColorFocus}: var(--surface-accent);
 
-                ${tokens.background}: var(--surface-solid-card);
+                ${tokens.background}: var(--surface-solid-primary);
                 ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
                 ${tokens.itemBackground}: transparent;
-                ${tokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${tokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${tokens.itemColor}: var(--text-primary);
 
                 ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor};
@@ -181,6 +201,7 @@ export const config = {
                 ${tokens.textFieldHeight}: 3rem;
                 ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem;
                 ${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;
@@ -213,7 +234,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);
@@ -256,6 +277,7 @@ export const config = {
                 ${tokens.textFieldHeight}: 2.5rem;
                 ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem;
                 ${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;
@@ -288,7 +310,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);
@@ -400,19 +422,29 @@ 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.textFieldLeftHelperColor}: var(--text-tertiary);
+                ${tokens.textFieldContentSlotColor}: var(--text-tertiary);
+                ${tokens.textFieldBackgroundColor}: var(--surface-solid-tertiary);
+                ${tokens.textFieldBorderColor}: transparent;
             `
         },
         readOnly: {
             true: css`
+                ${tokens.textFieldReadOnlyOpacity}: 1;
                 ${tokens.textFieldColorReadOnly}: var(--text-primary);
-                ${tokens.textFieldReadOnlyOpacity}: 0.1;
-                ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4;
-                ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-solid-primary);
+                ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-solid-secondary);
                 ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary);
                 ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary);
                 ${tokens.textFieldLabelColorReadOnly}: var(--text-primary);
                 ${tokens.textFieldDividerColorReadOnly}: var(--surface-solid-primary);
+                ${tokens.textFieldContentSlotRightOpacityReadOnly}: 1;
+                ${tokens.textFieldContentSlotRightColor}: var(--text-tertiary);
             `
         }
     }

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

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

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

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

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

@@ -16,21 +16,12 @@ export const config = {
 
                 ${badgeTokens.colorClear}: var(--text-primary);
             `,
-            accent: css`
-                ${badgeTokens.color}: var(--on-dark-text-primary);
-                ${badgeTokens.background}: var(--surface-accent);
-
-                ${badgeTokens.colorTransparent}: var(--text-accent);
-                ${badgeTokens.backgroundTransparent}: var(--surface-solid-accent);
-
-                ${badgeTokens.colorClear}: var(--text-accent);
-            `,
             positive: css`
                 ${badgeTokens.color}: var(--on-dark-text-primary);
                 ${badgeTokens.background}: var(--surface-positive);
 
                 ${badgeTokens.colorTransparent}: var(--text-positive);
-                ${badgeTokens.backgroundTransparent}: var(--surface-solid-positive);
+                ${badgeTokens.backgroundTransparent}: var(--surface-transparent-positive);
 
                 ${badgeTokens.colorClear}: var(--text-positive);
             `,
@@ -39,7 +30,7 @@ export const config = {
                 ${badgeTokens.background}: var(--surface-warning);
 
                 ${badgeTokens.colorTransparent}: var(--text-warning);
-                ${badgeTokens.backgroundTransparent}: var(--surface-solid-warning);
+                ${badgeTokens.backgroundTransparent}: var(--surface-transparent-warning);
 
                 ${badgeTokens.colorClear}: var(--text-warning);
             `,
@@ -48,7 +39,7 @@ export const config = {
                 ${badgeTokens.background}: var(--surface-negative);
 
                 ${badgeTokens.colorTransparent}: var(--text-negative);
-                ${badgeTokens.backgroundTransparent}: var(--surface-solid-negative);
+                ${badgeTokens.backgroundTransparent}: var(--surface-transparent-negative);
 
                 ${badgeTokens.colorClear}: var(--text-negative);
             `,

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

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

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

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

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

@@ -95,7 +95,6 @@ export const config = {
 
                 ${calendarBaseTokens.calendarHeaderArrowGap}: 0;
                 ${calendarBaseTokens.calendarArrowHeaderCustomSize}: 1.5rem;
-                ${calendarBaseTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem;
                 ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem;
@@ -165,7 +164,6 @@ export const config = {
 
                 ${calendarBaseTokens.calendarHeaderArrowGap}: 0;
                 ${calendarBaseTokens.calendarArrowHeaderCustomSize}: 1.5rem;
-                ${calendarBaseTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem;
                 ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem;

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

@@ -96,7 +96,6 @@ export const config = {
 
                 ${calendarDoubleTokens.calendarHeaderArrowGap}: 0;
                 ${calendarDoubleTokens.calendarArrowHeaderCustomSize}: 1.5rem;
-                ${calendarDoubleTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem;
                 ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem;
@@ -166,7 +165,6 @@ export const config = {
 
                 ${calendarDoubleTokens.calendarHeaderArrowGap}: 0;
                 ${calendarDoubleTokens.calendarArrowHeaderCustomSize}: 1.5rem;
-                ${calendarDoubleTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem;
                 ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem;