@ptsecurity/mosaic 13.5.0 → 13.6.0

package/design-tokens/legacy-2017/tokens.d.ts

@@ -7063,22 +7063,22 @@ export declare const AlertLightColorSchemeInfoBorder = "#AAD1EC";
 export declare const AlertLightColorSchemeInfoIcon = "#57A4D7";
 export declare const AlertLightColorSchemeDefaultBackground = "#F0F0F0";
 export declare const AlertLightColorSchemeDefaultBorder = "#B3B3B3";
-export declare const AlertLightColorSchemeDefaultIcon = "#CCCCCC";
+export declare const AlertLightColorSchemeDefaultIcon = "#999999";
 export declare const AlertDarkColorSchemeErrorBackground = "#832112";
 export declare const AlertDarkColorSchemeErrorBorder = "#832112";
-export declare const AlertDarkColorSchemeErrorIcon = "#E76E5C";
+export declare const AlertDarkColorSchemeErrorIcon = "#E04D36";
 export declare const AlertDarkColorSchemeWarningBackground = "#7D5504";
 export declare const AlertDarkColorSchemeWarningBorder = "#7D5504";
-export declare const AlertDarkColorSchemeWarningIcon = "#DFA739";
+export declare const AlertDarkColorSchemeWarningIcon = "#D6930D";
 export declare const AlertDarkColorSchemeSuccessBackground = "#276211";
 export declare const AlertDarkColorSchemeSuccessBorder = "#276211";
-export declare const AlertDarkColorSchemeSuccessIcon = "#6FBA53";
+export declare const AlertDarkColorSchemeSuccessIcon = "#52A832";
 export declare const AlertDarkColorSchemeInfoBackground = "#114E77";
 export declare const AlertDarkColorSchemeInfoBorder = "#114E77";
-export declare const AlertDarkColorSchemeInfoIcon = "#57A4D7";
+export declare const AlertDarkColorSchemeInfoIcon = "#338FCC";
 export declare const AlertDarkColorSchemeDefaultBackground = "#4D4D4D";
 export declare const AlertDarkColorSchemeDefaultBorder = "#4D4D4D";
-export declare const AlertDarkColorSchemeDefaultIcon = "#999999";
+export declare const AlertDarkColorSchemeDefaultIcon = "#808080";
 export declare const AlertSizeBorderWidth = "1px";
 export declare const AlertSizeBorderRadius = "4px";
 export declare const AlertSizeHorizontalPadding = "16px";
@@ -7197,11 +7197,11 @@ export declare const ButtonLightColorSchemePrimaryIcon = "white";
 export declare const ButtonLightColorSchemePrimaryStatesActiveBorder = "darken(#277BB3, 5)";
 export declare const ButtonLightColorSchemePrimaryStatesActiveBackground = "darken(#338FCC, 5)";
 export declare const ButtonLightColorSchemePrimaryTransparentColor = "#338FCC";
-export declare const ButtonLightColorSchemePrimaryTransparentIcon = "#338FCC";
+export declare const ButtonLightColorSchemePrimaryTransparentIcon = "#57A4D7";
 export declare const ButtonLightColorSchemePrimaryTransparentStatesHoverColor = "#206EA2";
-export declare const ButtonLightColorSchemePrimaryTransparentStatesHoverIcon = "#206EA2";
+export declare const ButtonLightColorSchemePrimaryTransparentStatesHoverIcon = "#114E77";
 export declare const ButtonLightColorSchemePrimaryTransparentStatesActiveColor = "#114E77";
-export declare const ButtonLightColorSchemePrimaryTransparentStatesActiveIcon = "#114E77";
+export declare const ButtonLightColorSchemePrimaryTransparentStatesActiveIcon = "#07314D";
 export declare const ButtonLightColorSchemeSecondBorder = "#B3B3B3";
 export declare const ButtonLightColorSchemeSecondBackground = "#F0F0F0";
 export declare const ButtonLightColorSchemeSecondColor = "#4D4D4D";
@@ -7230,7 +7230,7 @@ export declare const ButtonDarkColorSchemePrimaryTransparentStatesActiveIcon = "
 export declare const ButtonDarkColorSchemeSecondBorder = "#808080";
 export declare const ButtonDarkColorSchemeSecondBackground = "#666666";
 export declare const ButtonDarkColorSchemeSecondColor = "#F0F0F0";
-export declare const ButtonDarkColorSchemeSecondIcon = "#999999";
+export declare const ButtonDarkColorSchemeSecondIcon = "#808080";
 export declare const ButtonDarkColorSchemeSecondStatesActiveBorder = "darken(#808080, 5)";
 export declare const ButtonDarkColorSchemeSecondStatesActiveBackground = "darken(#666666, 5)";
 export declare const ButtonDarkColorSchemeErrorBorder = "#808080";
@@ -7273,33 +7273,33 @@ export declare const CardDarkColorSchemeInfoVerticalLine = "#57A4D7";
 export declare const CardDarkColorSchemeInfoBackground = "#114E77";
 export declare const CardDarkColorSchemeInfoShadow = "#4D4D4D";
 export declare const CardSizeVerticalLine = "4px";
-export declare const CheckboxLightColorSchemePrimaryBorder = "#B3B3B3";
-export declare const CheckboxLightColorSchemePrimaryStatesCheckedBorder = "#206EA2";
-export declare const CheckboxLightColorSchemePrimaryStatesCheckedBackground = "#338FCC";
-export declare const CheckboxLightColorSchemePrimaryStatesFocusedBorder = "#338FCC";
-export declare const CheckboxLightColorSchemePrimaryStatesFocusedShadow = "0 0 0 1px #338FCC";
-export declare const CheckboxLightColorSchemePrimaryStatesCheckedFocusedBorder = "#338FCC";
-export declare const CheckboxLightColorSchemePrimaryStatesCheckedFocusedBackground = "#338FCC";
-export declare const CheckboxLightColorSchemePrimaryStatesCheckedFocusedShadow = "0 0 0 1px #338FCC";
-export declare const CheckboxLightColorSchemePrimaryStatesCheckedFocusedOutline = "1px solid white";
+export declare const CheckboxLightColorSchemeDefaultBorder = "#B3B3B3";
+export declare const CheckboxLightColorSchemeDefaultStatesCheckedBorder = "#206EA2";
+export declare const CheckboxLightColorSchemeDefaultStatesCheckedBackground = "#338FCC";
+export declare const CheckboxLightColorSchemeDefaultStatesFocusedBorder = "#338FCC";
+export declare const CheckboxLightColorSchemeDefaultStatesFocusedShadow = "0 0 0 1px #338FCC";
+export declare const CheckboxLightColorSchemeDefaultStatesCheckedFocusedBorder = "#338FCC";
+export declare const CheckboxLightColorSchemeDefaultStatesCheckedFocusedBackground = "#338FCC";
+export declare const CheckboxLightColorSchemeDefaultStatesCheckedFocusedShadow = "0 0 0 1px #338FCC";
+export declare const CheckboxLightColorSchemeDefaultStatesCheckedFocusedOutline = "1px solid white";
 export declare const CheckboxLightColorSchemeErrorBorder = "#E76E5C";
 export declare const CheckboxLightColorSchemeErrorStatesCheckedBorder = "#B23522";
 export declare const CheckboxLightColorSchemeErrorStatesCheckedBackground = "#E04D36";
-export declare const CheckboxLightColorSchemeErrorStatesFocusedBorder = "#E04D36";
-export declare const CheckboxLightColorSchemeErrorStatesFocusedShadow = "0 0 0 1px #E04D36";
-export declare const CheckboxLightColorSchemeErrorStatesCheckedFocusedBorder = "#E04D36";
+export declare const CheckboxLightColorSchemeErrorStatesFocusedBorder = "#E76E5C";
+export declare const CheckboxLightColorSchemeErrorStatesFocusedShadow = "0 0 0 1px #E76E5C";
+export declare const CheckboxLightColorSchemeErrorStatesCheckedFocusedBorder = "#E76E5C";
 export declare const CheckboxLightColorSchemeErrorStatesCheckedFocusedBackground = "#E04D36";
-export declare const CheckboxLightColorSchemeErrorStatesCheckedFocusedShadow = "0 0 0 1px #E04D36";
+export declare const CheckboxLightColorSchemeErrorStatesCheckedFocusedShadow = "0 0 0 1px #E76E5C";
 export declare const CheckboxLightColorSchemeErrorStatesCheckedFocusedOutline = "1px solid white";
-export declare const CheckboxDarkColorSchemePrimaryBorder = "#808080";
-export declare const CheckboxDarkColorSchemePrimaryStatesCheckedBorder = "#57A4D7";
-export declare const CheckboxDarkColorSchemePrimaryStatesCheckedBackground = "#206EA2";
-export declare const CheckboxDarkColorSchemePrimaryStatesFocusedBorder = "#57A4D7";
-export declare const CheckboxDarkColorSchemePrimaryStatesFocusedShadow = "0 0 0 1px #57A4D7";
-export declare const CheckboxDarkColorSchemePrimaryStatesCheckedFocusedBorder = "#57A4D7";
-export declare const CheckboxDarkColorSchemePrimaryStatesCheckedFocusedBackground = "#206EA2";
-export declare const CheckboxDarkColorSchemePrimaryStatesCheckedFocusedShadow = "0 0 0 1px #57A4D7";
-export declare const CheckboxDarkColorSchemePrimaryStatesCheckedFocusedOutline = "1px solid #333333";
+export declare const CheckboxDarkColorSchemeDefaultBorder = "#808080";
+export declare const CheckboxDarkColorSchemeDefaultStatesCheckedBorder = "#57A4D7";
+export declare const CheckboxDarkColorSchemeDefaultStatesCheckedBackground = "#206EA2";
+export declare const CheckboxDarkColorSchemeDefaultStatesFocusedBorder = "#57A4D7";
+export declare const CheckboxDarkColorSchemeDefaultStatesFocusedShadow = "0 0 0 1px #57A4D7";
+export declare const CheckboxDarkColorSchemeDefaultStatesCheckedFocusedBorder = "#57A4D7";
+export declare const CheckboxDarkColorSchemeDefaultStatesCheckedFocusedBackground = "#206EA2";
+export declare const CheckboxDarkColorSchemeDefaultStatesCheckedFocusedShadow = "0 0 0 1px #57A4D7";
+export declare const CheckboxDarkColorSchemeDefaultStatesCheckedFocusedOutline = "1px solid #333333";
 export declare const CheckboxDarkColorSchemeErrorBorder = "#E76E5C";
 export declare const CheckboxDarkColorSchemeErrorStatesCheckedBorder = "#E76E5C";
 export declare const CheckboxDarkColorSchemeErrorStatesCheckedBackground = "#B23522";
@@ -7338,6 +7338,8 @@ export declare const DatepickerCalendarSizeIconNexIconTransform = "translateX(-2
 export declare const DatepickerCalendarFontDefault = "body";
 export declare const DatepickerCalendarFontHeader = "caption";
 export declare const DatepickerInputSizeWidth = "130px";
+export declare const DividerLightColorSchemeColor = "#E6E6E6";
+export declare const DividerDarkColorSchemeColor = "#666666";
 export declare const DividerSizeWidth = "1px";
 export declare const DividerSizeInsetMargin = "80px";
 export declare const DescriptionListLightColorSchemeDt = "#999999";
@@ -7390,17 +7392,17 @@ export declare const FormFieldFontDefault = "body";
 export declare const FormFieldHintSizeMarginTop = "4px";
 export declare const FormFieldHintFontDefault = "caption";
 export declare const FormFieldPasswordHintLightColorSchemeTextColor = "#4D4D4D";
-export declare const FormFieldPasswordHintLightColorSchemeIconColor = "#4D4D4D";
-export declare const FormFieldPasswordHintLightColorSchemeStatesInvalidIconColor = "#E04D36";
+export declare const FormFieldPasswordHintLightColorSchemeIconColor = "#999999";
+export declare const FormFieldPasswordHintLightColorSchemeStatesInvalidIconColor = "#E76E5C";
 export declare const FormFieldPasswordHintLightColorSchemeStatesInvalidTextColor = "#4D4D4D";
 export declare const FormFieldPasswordHintLightColorSchemeStatesValidTextColor = "#449327";
-export declare const FormFieldPasswordHintLightColorSchemeStatesValidIconColor = "#449327";
+export declare const FormFieldPasswordHintLightColorSchemeStatesValidIconColor = "#6FBA53";
 export declare const FormFieldPasswordHintDarkColorSchemeTextColor = "#F0F0F0";
-export declare const FormFieldPasswordHintDarkColorSchemeIconColor = "#F0F0F0";
-export declare const FormFieldPasswordHintDarkColorSchemeStatesInvalidIconColor = "#E76E5C";
+export declare const FormFieldPasswordHintDarkColorSchemeIconColor = "#808080";
+export declare const FormFieldPasswordHintDarkColorSchemeStatesInvalidIconColor = "#E04D36";
 export declare const FormFieldPasswordHintDarkColorSchemeStatesInvalidTextColor = "#F0F0F0";
 export declare const FormFieldPasswordHintDarkColorSchemeStatesValidTextColor = "#6FBA53";
-export declare const FormFieldPasswordHintDarkColorSchemeStatesValidIconColor = "#6FBA53";
+export declare const FormFieldPasswordHintDarkColorSchemeStatesValidIconColor = "#52A832";
 export declare const FormFieldPasswordHintSizeMarginTop = "8px";
 export declare const FormFieldPasswordHintSizeIconMargin = "4px";
 export declare const FormFieldPasswordHintFontDefault = "caption";
@@ -7600,12 +7602,10 @@ export declare const PopoverFooterSizeHeight = "56px";
 export declare const PopoverFooterFontDefault = "body";
 export declare const PopupLightColorSchemeShadow = "0 3px 3px 0 rgba(0, 0, 0, 0.2)";
 export declare const PopupLightColorSchemeBorder = "#B3B3B3";
-export declare const PopupLightColorSchemeDivider = "#CCCCCC";
 export declare const PopupLightColorSchemeBackground = "white";
 export declare const PopupLightColorSchemeFooterBackground = "#F0F0F0";
 export declare const PopupDarkColorSchemeShadow = "0 3px 3px 0 rgba(0, 0, 0, 0.2)";
 export declare const PopupDarkColorSchemeBorder = "#999999";
-export declare const PopupDarkColorSchemeDivider = "#666666";
 export declare const PopupDarkColorSchemeBackground = "#4D4D4D";
 export declare const PopupDarkColorSchemeFooterBackground = "transparent";
 export declare const ProgressBarLightColorSchemeBackground = "#F0F0F0";
@@ -7642,10 +7642,14 @@ export declare const SelectPanelFontDefault = "body";
 export declare const SidepanelLightColorSchemeBorder = "#B3B3B3";
 export declare const SidepanelDarkColorSchemeBorder = "#333333";
 export declare const SidepanelFontDefault = "body";
+export declare const SidepanelHeaderLightColorSchemeBorder = "#E6E6E6";
+export declare const SidepanelHeaderDarkColorSchemeBorder = "#666666";
 export declare const SidepanelHeaderSizeHeight = "56px";
 export declare const SidepanelHeaderSizePadding = "0 16px";
 export declare const SidepanelHeaderSizeClosePadding = "0 0 0 8px";
 export declare const SidepanelHeaderFontDefault = "title";
+export declare const SidepanelFooterLightColorSchemeBorder = "#E6E6E6";
+export declare const SidepanelFooterDarkColorSchemeBorder = "#666666";
 export declare const SidepanelFooterSizeHeight = "64px";
 export declare const SidepanelFooterSizePadding = "0 16px";
 export declare const SidepanelFooterFontDefault = "body";
@@ -7694,8 +7698,8 @@ export declare const VerticalTabsDarkColorSchemeStateHoverSelectedBackground = "
 export declare const TagsLightColorSchemePrimaryBackground = "#D8EAF7";
 export declare const TagsLightColorSchemePrimaryBorder = "#D8EAF7";
 export declare const TagsLightColorSchemePrimaryText = "#338FCC";
-export declare const TagsLightColorSchemePrimaryIcon = "mix(#57A4D7, rgba(black, 0.05))";
-export declare const TagsLightColorSchemePrimaryStatesHoverIcon = "#206EA2";
+export declare const TagsLightColorSchemePrimaryIcon = "#57A4D7";
+export declare const TagsLightColorSchemePrimaryStatesHoverIcon = "#114E77";
 export declare const TagsLightColorSchemePrimaryStatesFocused = "#338FCC";
 export declare const TagsLightColorSchemePrimaryStatesDisabledText = "mix(#338FCC, transparent, 50%)";
 export declare const TagsLightColorSchemePrimaryStatesDisabledBackground = "mix(#338FCC, transparent, 10%)";
@@ -7703,8 +7707,8 @@ export declare const TagsLightColorSchemePrimaryStatesDisabledBorder = "mix(#338
 export declare const TagsLightColorSchemeSecondBackground = "#E6E6E6";
 export declare const TagsLightColorSchemeSecondBorder = "#E6E6E6";
 export declare const TagsLightColorSchemeSecondText = "#4D4D4D";
-export declare const TagsLightColorSchemeSecondIcon = "mix(#999999, rgba(black, 0.05))";
-export declare const TagsLightColorSchemeSecondStatesHoverIcon = "#999999";
+export declare const TagsLightColorSchemeSecondIcon = "#999999";
+export declare const TagsLightColorSchemeSecondStatesHoverIcon = "#4D4D4D";
 export declare const TagsLightColorSchemeSecondStatesFocused = "#338FCC";
 export declare const TagsLightColorSchemeSecondStatesDisabledText = "mix(#B3B3B3, transparent, 50%)";
 export declare const TagsLightColorSchemeSecondStatesDisabledBackground = "mix(#B3B3B3, transparent, 10%)";
@@ -7712,8 +7716,8 @@ export declare const TagsLightColorSchemeSecondStatesDisabledBorder = "mix(#B3B3
 export declare const TagsLightColorSchemeErrorBackground = "#FADEDA";
 export declare const TagsLightColorSchemeErrorBorder = "#FADEDA";
 export declare const TagsLightColorSchemeErrorText = "#E76E5C";
-export declare const TagsLightColorSchemeErrorIcon = "mix(#E76E5C, rgba(black, 0.05))";
-export declare const TagsLightColorSchemeErrorStatesHoverIcon = "#E04D36";
+export declare const TagsLightColorSchemeErrorIcon = "#E76E5C";
+export declare const TagsLightColorSchemeErrorStatesHoverIcon = "#832112";
 export declare const TagsLightColorSchemeErrorStatesFocused = "#E76E5C";
 export declare const TagsLightColorSchemeErrorStatesDisabledText = "mix(#E76E5C, transparent, 50%)";
 export declare const TagsLightColorSchemeErrorStatesDisabledBackground = "mix(#E76E5C, transparent, 10%)";
@@ -7721,24 +7725,24 @@ export declare const TagsLightColorSchemeErrorStatesDisabledBorder = "mix(#E76E5
 export declare const TagsDarkColorSchemePrimaryBackground = "#114E77";
 export declare const TagsDarkColorSchemePrimaryBorder = "#114E77";
 export declare const TagsDarkColorSchemePrimaryText = "#AAD1EC";
-export declare const TagsDarkColorSchemePrimaryIcon = "mix(#57A4D7, rgba(black, 0.05))";
-export declare const TagsDarkColorSchemePrimaryStatesHoverIcon = "#338FCC";
+export declare const TagsDarkColorSchemePrimaryIcon = "#338FCC";
+export declare const TagsDarkColorSchemePrimaryStatesHoverIcon = "#206EA2";
 export declare const TagsDarkColorSchemePrimaryStatesFocused = "#57A4D7";
 export declare const TagsDarkColorSchemePrimaryStatesDisabledText = "mix(#57A4D7, transparent, 50%)";
 export declare const TagsDarkColorSchemePrimaryStatesDisabledBackground = "mix(#57A4D7, transparent, 10%)";
 export declare const TagsDarkColorSchemeSecondBackground = "#4D4D4D";
 export declare const TagsDarkColorSchemeSecondBorder = "#4D4D4D";
 export declare const TagsDarkColorSchemeSecondText = "#CCCCCC";
-export declare const TagsDarkColorSchemeSecondIcon = "mix(#999999, rgba(black, 0.05))";
-export declare const TagsDarkColorSchemeSecondStatesHoverIcon = "#E6E6E6";
+export declare const TagsDarkColorSchemeSecondIcon = "#808080";
+export declare const TagsDarkColorSchemeSecondStatesHoverIcon = "#666666";
 export declare const TagsDarkColorSchemeSecondStatesFocused = "#57A4D7";
 export declare const TagsDarkColorSchemeSecondStatesDisabledText = "mix(#999999, transparent, 50%)";
 export declare const TagsDarkColorSchemeSecondStatesDisabledBackground = "mix(#999999, transparent, 10%)";
 export declare const TagsDarkColorSchemeErrorBackground = "#832112";
 export declare const TagsDarkColorSchemeErrorBorder = "#832112";
 export declare const TagsDarkColorSchemeErrorText = "#F4B7AE";
-export declare const TagsDarkColorSchemeErrorIcon = "mix(#E76E5C, rgba(black, 0.05))";
-export declare const TagsDarkColorSchemeErrorStatesHoverIcon = "#F4B7AE";
+export declare const TagsDarkColorSchemeErrorIcon = "#E04D36";
+export declare const TagsDarkColorSchemeErrorStatesHoverIcon = "#B23522";
 export declare const TagsDarkColorSchemeErrorStatesFocused = "#E76E5C";
 export declare const TagsDarkColorSchemeErrorStatesDisabledText = "mix(#E76E5C, transparent, 50%)";
 export declare const TagsDarkColorSchemeErrorStatesDisabledBackground = "mix(#E76E5C, transparent, 10%)";

package/design-tokens/pt-2022/tokens/components/alert.json5

@@ -4,54 +4,54 @@
             error: {
                 background: { value: '{light-color-scheme.error.palette.value.40}' },
                 border: { value: '{light-color-scheme.error.palette.value.100}' },
-                icon: { value: '{light-color-scheme.error.palette.value.300}' }
+                icon: { value: '{icon.light-color-scheme.error.default}' }
             },
             warning: {
                 background: { value: '{light-color-scheme.warning.palette.value.40}' },
                 border: { value: '{light-color-scheme.warning.palette.value.100}' },
-                icon: { value: '{light-color-scheme.warning.palette.value.300}' }
+                icon: { value: '{icon.light-color-scheme.warning.default}' }
             },
             success: {
                 background: { value: '{light-color-scheme.success.palette.value.40}' },
                 border: { value: '{light-color-scheme.success.palette.value.100}' },
-                icon: { value: '{light-color-scheme.success.palette.value.300}' }
+                icon: { value: '{icon.light-color-scheme.success.default}' }
             },
             info: {
                 background: { value: '{light-color-scheme.info.palette.value.40}' },
                 border: { value: '{light-color-scheme.info.palette.value.100}' },
-                icon: { value: '{light-color-scheme.info.palette.value.300}' }
+                icon: { value: '{icon.light-color-scheme.info.default}' }
             },
             default: {
                 background: { value: '{light-color-scheme.second.palette.value.40}' },
                 border: { value: '{light-color-scheme.second.palette.value.100}' },
-                icon: { value: '{light-color-scheme.second.palette.value.300}' }
+                icon: { value: '{icon.light-color-scheme.secondary.default}' }
             }
         },
         'dark-color-scheme': {
             error: {
                 background: { value: '{dark-color-scheme.error.palette.value.900}' },
                 border: { value: '{dark-color-scheme.error.palette.value.700}' },
-                icon: { value: '{dark-color-scheme.error.palette.value.300}' }
+                icon: { value: '{icon.dark-color-scheme.error.default}' }
             },
             warning: {
                 background: { value: '{dark-color-scheme.warning.palette.value.800}' },
                 border: { value: '{dark-color-scheme.warning.palette.value.700}' },
-                icon: { value: '{dark-color-scheme.warning.palette.value.300}' }
+                icon: { value: '{icon.dark-color-scheme.warning.default}' }
             },
             success: {
                 background: { value: '{dark-color-scheme.success.palette.value.800}' },
                 border: { value: '{dark-color-scheme.success.palette.value.700}' },
-                icon: { value: '{dark-color-scheme.success.palette.value.300}' }
+                icon: { value: '{icon.dark-color-scheme.success.default}' }
             },
             info: {
                 background: { value: '{dark-color-scheme.info.palette.value.800}' },
                 border: { value: '{dark-color-scheme.info.palette.value.700}' },
-                icon: { value: '{dark-color-scheme.info.palette.value.300}' }
+                icon: { value: '{icon.dark-color-scheme.info.default}' }
             },
             default: {
                 background: { value: '{dark-color-scheme.second.palette.value.800}' },
                 border: { value: '{dark-color-scheme.second.palette.value.700}' },
-                icon: { value: '{dark-color-scheme.second.palette.value.300}' }
+                icon: { value: '{icon.dark-color-scheme.secondary.default}' }
             }
         },
         size: {

package/design-tokens/pt-2022/tokens/components/button.json5

@@ -19,16 +19,16 @@
             },
             primary_transparent: {
                 color: { value: '{light-color-scheme.primary.palette.value.500}' },
-                icon: { value: '{light-color-scheme.primary.palette.value.500}' },
+                icon: { value: '{icon.light-color-scheme.primary.default}' },
 
                 states: {
                     hover: {
                         color: { value: '{light-color-scheme.primary.palette.value.560}' },
-                        icon: { value: '{light-color-scheme.primary.palette.value.560}' }
+                        icon: { value: '{icon.light-color-scheme.primary.states.hover}' }
                     },
                     active: {
                         color: { value: '{light-color-scheme.primary.palette.value.600}' },
-                        icon: { value: '{light-color-scheme.primary.palette.value.600}' }
+                        icon: { value: '{icon.light-color-scheme.primary.states.active}' }
                     }
                 }
             },
@@ -36,7 +36,7 @@
                 border: { value: '{light-color-scheme.second.palette.value.100}' },
                 background: { value: '{light-color-scheme.second.palette.value.100}' },
                 color: { value: '{light-color-scheme.second.palette.value.900}' },
-                icon: { value: '{light-color-scheme.second.palette.value.300}' },
+                icon: { value: '{icon.light-color-scheme.secondary.default}' },
 
                 states: {
                     active: {
@@ -79,16 +79,16 @@
 
             primary_transparent: {
                 color: { value: '{dark-color-scheme.primary.palette.value.500}' },
-                icon: { value: '{dark-color-scheme.primary.palette.value.500}' },
+                icon: { value: '{icon.dark-color-scheme.primary.default}' },
 
                 states: {
                     hover: {
                         color: { value: '{dark-color-scheme.primary.palette.value.600}' },
-                        icon: { value: '{dark-color-scheme.primary.palette.value.600}' }
+                        icon: { value: '{icon.dark-color-scheme.primary.states.hover}' }
                     },
                     active: {
                         color: { value: '{dark-color-scheme.primary.palette.value.700}' },
-                        icon: { value: '{dark-color-scheme.primary.palette.value.700}' }
+                        icon: { value: '{icon.dark-color-scheme.primary.states.active}' }
                     }
                 }
             },
@@ -96,7 +96,7 @@
                 border: { value: '{dark-color-scheme.second.palette.value.560}' },
                 background: { value: '{dark-color-scheme.second.palette.value.560}' },
                 color: { value: '{dark-color-scheme.second.palette.value.40}' },
-                icon: { value: '{dark-color-scheme.second.palette.value.300}' },
+                icon: { value: '{icon.dark-color-scheme.secondary.default}' },
 
                 states: {
                     active: {

package/design-tokens/pt-2022/tokens/components/checkbox.json5

@@ -1,7 +1,7 @@
 {
     checkbox: {
         'light-color-scheme': {
-            primary: {
+            default: {
                 border: { value: '{light-color-scheme.foreground.border}' },
 
                 states: {
@@ -10,13 +10,13 @@
                         background: { value: '{light-color-scheme.primary.palette.value.500}' },
                     },
                     focused: {
-                        border: { value: '{light-color-scheme.primary.palette.value.500}' },
-                        shadow: { value: '0 0 0 1px {light-color-scheme.primary.palette.value.500}' },
+                        border: { value: '{light-color-scheme.states.focused-color}' },
+                        shadow: { value: '0 0 0 1px {light-color-scheme.states.focused-color}' },
                     },
                     'checked-focused': {
-                        border: { value: '{light-color-scheme.primary.palette.value.500}' },
+                        border: { value: '{light-color-scheme.states.focused-color}' },
                         background: { value: '{light-color-scheme.primary.palette.value.500}' },
-                        shadow: { value: '0 0 0 1px {light-color-scheme.primary.palette.value.500}' },
+                        shadow: { value: '0 0 0 1px {light-color-scheme.states.focused-color}' },
                         outline: { value: '1px solid {light-color-scheme.background.background}' },
                     }
                 }
@@ -30,20 +30,20 @@
                         background: { value: '{light-color-scheme.error.palette.value.500}' },
                     },
                     focused: {
-                        border: { value: '{light-color-scheme.error.palette.value.500}' },
-                        shadow: { value: '0 0 0 1px {light-color-scheme.error.palette.value.500}' },
+                        border: { value: '{light-color-scheme.states.focused-color-error}' },
+                        shadow: { value: '0 0 0 1px {light-color-scheme.states.focused-color-error}' },
                     },
                     'checked-focused': {
-                        border: { value: '{light-color-scheme.error.palette.value.500}' },
+                        border: { value: '{light-color-scheme.states.focused-color-error}' },
                         background: { value: '{light-color-scheme.error.palette.value.500}' },
-                        shadow: { value: '0 0 0 1px {light-color-scheme.error.palette.value.500}' },
+                        shadow: { value: '0 0 0 1px {light-color-scheme.states.focused-color-error}' },
                         outline: { value: '1px solid {light-color-scheme.background.background}' },
                     }
                 }
             }, 
         },
         'dark-color-scheme': {
-            primary: {
+            default: {
                 border: { value: '{dark-color-scheme.foreground.border}' },
 
                 states: {
@@ -52,13 +52,13 @@
                         background: { value: '{dark-color-scheme.primary.palette.value.560}' },
                     },
                     focused: {
-                        border: { value: '{dark-color-scheme.primary.palette.value.400}' },
-                        shadow: { value: '0 0 0 1px {dark-color-scheme.primary.palette.value.400}' },
+                        border: { value: '{dark-color-scheme.states.focused-color}' },
+                        shadow: { value: '0 0 0 1px {dark-color-scheme.states.focused-color}' },
                     },
                     'checked-focused': {
-                        border: { value: '{dark-color-scheme.primary.palette.value.400}' },
+                        border: { value: '{dark-color-scheme.states.focused-color}' },
                         background: { value: '{dark-color-scheme.primary.palette.value.560}' },
-                        shadow: { value: '0 0 0 1px {dark-color-scheme.primary.palette.value.400}' },
+                        shadow: { value: '0 0 0 1px {dark-color-scheme.states.focused-color}' },
                         outline: { value: '1px solid {dark-color-scheme.background.background}' },
                     }
                 }
@@ -72,13 +72,13 @@
                         background: { value: '{dark-color-scheme.error.palette.value.560}' },
                     },
                     focused: {
-                        border: { value: '{dark-color-scheme.error.palette.value.560}' },
-                        shadow: { value: '0 0 0 1px {dark-color-scheme.error.palette.value.560}' },
+                        border: { value: '{dark-color-scheme.states.focused-color-error}' },
+                        shadow: { value: '0 0 0 1px {dark-color-scheme.states.focused-color-error}' },
                     },
                     'checked-focused': {
-                        border: { value: '{dark-color-scheme.error.palette.value.560}' },
+                        border: { value: '{dark-color-scheme.states.focused-color-error}' },
                         background: { value: '{dark-color-scheme.error.palette.value.560}' },
-                        shadow: { value: '0 0 0 1px {dark-color-scheme.error.palette.value.560}' },
+                        shadow: { value: '0 0 0 1px {dark-color-scheme.states.focused-color-error}' },
                         outline: { value: '1px solid {dark-color-scheme.background.background}' },
                     }
                 }

package/design-tokens/pt-2022/tokens/components/divider.json5

@@ -1,5 +1,11 @@
 {
     divider: {
+        'light-color-scheme': {
+            color: { value: '{light-color-scheme.foreground.divider}' }
+        },
+        'dark-color-scheme': {
+            color: { value: '{dark-color-scheme.foreground.divider}' }
+        },
         size: {
             width: { value: '1px' },
             'inset-margin': { value: '80px' }

package/design-tokens/pt-2022/tokens/components/form-field.json5

@@ -53,31 +53,31 @@
     'form-field-password-hint': {
         'light-color-scheme': {
             'text-color': { value: '{light-color-scheme.foreground.text}' },
-            'icon-color': { value: '{light-color-scheme.foreground.text}' },
+            'icon-color': { value: '{icon.light-color-scheme.secondary.default}' },
 
             states: {
                 invalid: {
-                    'icon-color': { value: '{light-color-scheme.foreground.text-error}' },
+                    'icon-color': { value: '{icon.light-color-scheme.error.default}' },
                     'text-color': { value: '{light-color-scheme.foreground.text}' }
                 },
                 valid: {
                     'text-color': { value: '{light-color-scheme.foreground.text-success}' },
-                    'icon-color': { value: '{light-color-scheme.foreground.text-success}' }
+                    'icon-color': { value: '{icon.light-color-scheme.success.default}' }
                 }
             }
         },
         'dark-color-scheme': {
             'text-color': { value: '{dark-color-scheme.foreground.text}' },
-            'icon-color': { value: '{dark-color-scheme.foreground.text}' },
+            'icon-color': { value: '{icon.dark-color-scheme.secondary.default}' },
 
             states: {
                 invalid: {
-                    'icon-color': { value: '{dark-color-scheme.foreground.text-error}' },
+                    'icon-color': { value: '{icon.dark-color-scheme.error.default}' },
                     'text-color': { value: '{dark-color-scheme.foreground.text}' }
                 },
                 valid: {
                     'text-color': { value: '{dark-color-scheme.foreground.text-success}' },
-                    'icon-color': { value: '{dark-color-scheme.foreground.text-success}' }
+                    'icon-color': { value: '{icon.dark-color-scheme.success.default}' }
                 }
             }
         },

package/design-tokens/pt-2022/tokens/components/popup.json5

@@ -3,14 +3,12 @@
         'light-color-scheme': {
             shadow: { value: '0 3px 8px 0 rgba(39, 51, 62, 0.2)' },
             border: { value: '{light-color-scheme.foreground.divider}' },
-            divider: { value: '{light-color-scheme.foreground.divider}' },
             background: { value: '{light-color-scheme.background.background}' },
             'footer-background': { value: '{light-color-scheme.background.background-disabled}' }
         },
         'dark-color-scheme': {
             shadow: { value: '0 3px 8px 0 rgba(0, 0, 0, 0.2)' },
             border: { value: '{dark-color-scheme.second.palette.value.700}' },
-            divider: { value: '{dark-color-scheme.second.palette.value.600}' },
             background: { value: '{dark-color-scheme.second.palette.value.700}' },
             'footer-background': { value: 'transparent' }
         }

package/design-tokens/pt-2022/tokens/components/sidepanel.json5

@@ -11,6 +11,12 @@
         }
     },
     'sidepanel-header': {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.foreground.divider}' }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.foreground.divider}' }
+        },
         size: {
             height: { value: '{size.6xl}' },
             padding: { value: '0 {size.l}' },
@@ -21,6 +27,12 @@
         }
     },
     'sidepanel-footer': {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.second.palette.value.40}' }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.foreground.divider}' }
+        },
         size: {
             height: { value: '{size.7xl}' },
             padding: { value: '0 {size.l}' }

package/design-tokens/pt-2022/tokens/components/tags.json5

@@ -5,10 +5,10 @@
                 background: { value: '{light-color-scheme.primary.palette.value.60}' },
                 border: { value: 'transparent' },
                 text: { value: '{light-color-scheme.primary.default}' },
-                icon: { value: 'mix({light-color-scheme.primary.palette.value.300}, {light-color-scheme.background.overlay-hover})' },
+                icon: { value: '{icon.light-color-scheme.primary.default}' },
                 states:  {
                     hover: {
-                        icon: { value: '{light-color-scheme.primary.palette.value.560}' }
+                        icon: { value: '{icon.light-color-scheme.primary.states.hover}' }
                     },
                     focused:{ value: '{light-color-scheme.states.focused-color}' },
                     disabled: {
@@ -22,10 +22,10 @@
                 background: { value: '{light-color-scheme.second.palette.value.100}' },
                 border: { value: 'transparent' },
                 text: { value: '{light-color-scheme.foreground.text}' },
-                icon: { value: 'mix({light-color-scheme.second.palette.value.300}, {light-color-scheme.background.overlay-hover})' },
+                icon: { value: '{icon.light-color-scheme.secondary.default}' },
                 states: {
                     hover: {
-                        icon: { value: '{light-color-scheme.second.palette.value.560}' }
+                        icon: { value: '{icon.light-color-scheme.secondary.states.hover}' }
                     },
                     focused: { value: '{light-color-scheme.states.focused-color}' },
                     disabled: {
@@ -39,10 +39,10 @@
                 background: { value: '{light-color-scheme.error.palette.value.60}' },
                 border: { value: 'transparent' },
                 text: { value: '{light-color-scheme.error.default}' },
-                icon: { value: 'mix({light-color-scheme.error.palette.value.300}, {light-color-scheme.background.overlay-hover})' },
+                icon: { value: '{icon.light-color-scheme.error.default}' },
                 states: {
                     hover: {
-                        icon: { value: '{light-color-scheme.error.palette.value.500}' }
+                        icon: { value: '{icon.light-color-scheme.error.states.hover}' }
                     },
                     focused: { value: '{light-color-scheme.states.focused-color-error}' },
                     disabled: {
@@ -58,10 +58,10 @@
                 background: { value: '{dark-color-scheme.primary.palette.value.700}' },
                 border: { value: 'transparent' },
                 text: { value: '{dark-color-scheme.primary.palette.value.200}' },
-                icon: { value: 'mix({dark-color-scheme.primary.palette.value.200}, {dark-color-scheme.background.overlay-hover})' },
+                icon: { value: '{icon.dark-color-scheme.primary.default}' },
                 states: {
                     hover: {
-                        icon: { value: '{dark-color-scheme.primary.palette.value.500}' }
+                        icon: { value: '{icon.dark-color-scheme.primary.states.hover}' }
                     },
                     focused:{ value: '{dark-color-scheme.states.focused-color}' },
                     disabled: {
@@ -75,10 +75,10 @@
                 background: { value: '{dark-color-scheme.second.palette.value.700}' },
                 border: { value: 'transparent' },
                 text: { value: '{dark-color-scheme.second.palette.value.200}' },
-                icon: { value: 'mix({dark-color-scheme.second.palette.value.300}, {dark-color-scheme.background.overlay-hover})' },
+                icon: { value: '{icon.dark-color-scheme.secondary.default}' },
                 states: {
                     hover: {
-                        icon: { value: '{dark-color-scheme.second.palette.value.100}' }
+                        icon: { value: '{icon.dark-color-scheme.secondary.states.hover}' }
                     },
                     focused: { value: '{dark-color-scheme.states.focused-color}' },
                     disabled: {
@@ -92,10 +92,10 @@
                 background: { value: '{dark-color-scheme.error.palette.value.700}' },
                 border: { value: 'transparent' },
                 text: { value: '{dark-color-scheme.error.palette.value.200}' },
-                icon: { value: 'mix({dark-color-scheme.error.palette.value.300}, {dark-color-scheme.background.overlay-hover})' },
+                icon: { value: '{icon.dark-color-scheme.error.default}' },
                 states: {
                     hover: {
-                        icon: { value: '{dark-color-scheme.error.palette.value.300}' }
+                        icon: { value: '{icon.dark-color-scheme.error.states.hover}' }
                     },
                     focused: { value: '{dark-color-scheme.states.focused-color-error}' },
                     disabled: {