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

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

@@ -19,8 +19,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);
@@ -52,7 +57,7 @@ export const config = {
 
                 ${tokens.disclosureIconColor}: var(--text-secondary);
                 ${tokens.disclosureIconColorHover}: var(--text-secondary-hover);
-                ${tokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${tokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${tokens.textFieldHintIconColor}: var(--text-secondary);
 
                 ${tokens.dividerColor}: var(--surface-solid-tertiary);
@@ -63,6 +68,8 @@ export const config = {
                 ${tokens.checkboxIconColor}: var(--on-dark-text-primary);
                 ${tokens.checkboxTriggerBorderCheckedColor}: transparent;
                 ${tokens.checkboxTriggerBorderColor}: var(--text-secondary);
+
+                ${tokens.dropdownBackgroundColor}: var(--surface-solid-primary);
             `,
             positive: css`
                 ${tokens.textFieldColor}: var(--text-primary);
@@ -73,8 +80,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);
@@ -106,7 +118,7 @@ export const config = {
 
                 ${tokens.disclosureIconColor}: var(--text-secondary);
                 ${tokens.disclosureIconColorHover}: var(--text-secondary-hover);
-                ${tokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${tokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${tokens.textFieldHintIconColor}: var(--text-secondary);
 
                 ${tokens.dividerColor}: var(--surface-solid-tertiary);
@@ -117,6 +129,8 @@ export const config = {
                 ${tokens.checkboxIconColor}: var(--on-dark-text-primary);
                 ${tokens.checkboxTriggerBorderCheckedColor}: transparent;
                 ${tokens.checkboxTriggerBorderColor}: var(--text-secondary);
+
+                ${tokens.dropdownBackgroundColor}: var(--surface-solid-primary);
             `,
             warning: css`
                 ${tokens.textFieldColor}: var(--text-primary);
@@ -127,8 +141,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);
@@ -160,7 +179,7 @@ export const config = {
 
                 ${tokens.disclosureIconColor}: var(--text-secondary);
                 ${tokens.disclosureIconColorHover}: var(--text-secondary-hover);
-                ${tokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${tokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${tokens.textFieldHintIconColor}: var(--text-secondary);
 
                 ${tokens.dividerColor}: var(--surface-solid-tertiary);
@@ -171,6 +190,8 @@ export const config = {
                 ${tokens.checkboxIconColor}: var(--on-dark-text-primary);
                 ${tokens.checkboxTriggerBorderCheckedColor}: transparent;
                 ${tokens.checkboxTriggerBorderColor}: var(--text-secondary);
+
+                ${tokens.dropdownBackgroundColor}: var(--surface-solid-primary);
             `,
             negative: css`
                 ${tokens.textFieldColor}: var(--text-primary);
@@ -181,8 +202,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);
@@ -215,7 +241,7 @@ export const config = {
 
                 ${tokens.disclosureIconColor}: var(--text-secondary);
                 ${tokens.disclosureIconColorHover}: var(--text-secondary-hover);
-                ${tokens.itemBackgroundHover}: var(--surface-solid-secondary);
+                ${tokens.itemBackgroundHover}: var(--surface-solid-card);
                 ${tokens.textFieldHintIconColor}: var(--text-secondary);
 
                 ${tokens.dividerColor}: var(--surface-solid-tertiary);
@@ -226,6 +252,8 @@ export const config = {
                 ${tokens.checkboxIconColor}: var(--on-dark-text-primary);
                 ${tokens.checkboxTriggerBorderCheckedColor}: transparent;
                 ${tokens.checkboxTriggerBorderColor}: var(--text-secondary);
+
+                ${tokens.dropdownBackgroundColor}: var(--surface-solid-primary);
             `
         },
         size: {
@@ -234,6 +262,7 @@ export const config = {
                 ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem;
                 ${tokens.textFieldPaddingWithChips}: 0.375rem;
                 ${tokens.textFieldBorderRadius}: 0.75rem;
+                ${tokens.textFieldBorderWidth}: 0.0625rem;
 
                 ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem;
                 ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem;
@@ -265,7 +294,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);
@@ -355,6 +384,7 @@ export const config = {
                 ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem;
                 ${tokens.textFieldPaddingWithChips}: 0.375rem;
                 ${tokens.textFieldBorderRadius}: 0.625rem;
+                ${tokens.textFieldBorderWidth}: 0.0625rem;
 
                 ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem;
                 ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem;
@@ -386,7 +416,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);
@@ -591,18 +621,32 @@ export const config = {
         },
         disabled: {
             true: css`
-                ${tokens.textFieldDisabledOpacity}: 0.4;
+                ${tokens.textFieldDisabledOpacity}: 1;
+                ${tokens.textFieldDisabledBackgroundOpacity}: 1;
+                ${tokens.textFieldDisabledInnerContentOpacity}: 1;
+                ${tokens.textFieldColor}: var(--text-secondary);
+                ${tokens.textFieldPlaceholderColor}: var(--text-tertiary);
+                ${tokens.textFieldLabelColor}: var(--text-secondary);
+                ${tokens.textFieldTitleCaptionColor}: var(--text-tertiary);
+                ${tokens.textFieldLeftHelperColor}: var(--text-tertiary);
+                ${tokens.textFieldContentSlotColor}: var(--text-tertiary);
+                ${tokens.textFieldBackgroundColor}: var(--surface-solid-tertiary);
+                ${tokens.textFieldBorderColor}: transparent;
+                ${tokens.disclosureIconColor}: var(--text-tertiary);
             `
         },
         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.textFieldTitleCaptionColorReadOnly}: var(--text-secondary);
                 ${tokens.textFieldLabelColorReadOnly}: var(--text-primary);
+                ${tokens.textFieldContentSlotRightOpacityReadOnly}: 1;
+                ${tokens.textFieldContentSlotRightColor}: var(--text-tertiary);
+                ${tokens.disclosureIconColor}: var(--text-tertiary);
             `
         }
     }

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

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

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

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

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

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

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

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

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

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

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

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