diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index db94df7068..499d927048 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -65,7 +65,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "border-width-card-selected": "1px", "border-width-dropdown": "1px", "border-width-field": "1px", - "border-width-flashbar-inline-start": "0px", "border-width-icon-big": "3px", "border-width-icon-large": "4px", "border-width-icon-medium": "2px", @@ -126,10 +125,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-background-dropdown-item-filter-match": "#f1faff", "color-background-dropdown-item-hover": "#f2f3f3", "color-background-dropdown-item-selected": "#f1faff", - "color-background-flashbar-error": "#d13212", - "color-background-flashbar-info": "#0073bb", - "color-background-flashbar-success": "#1d8102", - "color-background-flashbar-warning": "#ffe347", "color-background-home-header": "#000000", "color-background-inline-code": "rgba(0, 0, 0, 0.1)", "color-background-input-default": "#ffffff", @@ -982,7 +977,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "border-width-card-selected": "1px", "border-width-dropdown": "1px", "border-width-field": "1px", - "border-width-flashbar-inline-start": "0px", "border-width-icon-big": "3px", "border-width-icon-large": "4px", "border-width-icon-medium": "2px", @@ -1043,10 +1037,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-background-dropdown-item-filter-match": "#12293b", "color-background-dropdown-item-hover": "#414750", "color-background-dropdown-item-selected": "#12293b", - "color-background-flashbar-error": "#d13212", - "color-background-flashbar-info": "#0073bb", - "color-background-flashbar-success": "#1d8102", - "color-background-flashbar-warning": "#ffe347", "color-background-home-header": "#000000", "color-background-inline-code": "rgba(255, 255, 255, 0.1)", "color-background-input-default": "#1a2029", @@ -1899,7 +1889,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "border-width-card-selected": "1px", "border-width-dropdown": "1px", "border-width-field": "1px", - "border-width-flashbar-inline-start": "0px", "border-width-icon-big": "3px", "border-width-icon-large": "4px", "border-width-icon-medium": "2px", @@ -1960,10 +1949,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-background-dropdown-item-filter-match": "#f1faff", "color-background-dropdown-item-hover": "#f2f3f3", "color-background-dropdown-item-selected": "#f1faff", - "color-background-flashbar-error": "#d13212", - "color-background-flashbar-info": "#0073bb", - "color-background-flashbar-success": "#1d8102", - "color-background-flashbar-warning": "#ffe347", "color-background-home-header": "#000000", "color-background-inline-code": "rgba(0, 0, 0, 0.1)", "color-background-input-default": "#ffffff", @@ -2816,7 +2801,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "border-width-card-selected": "1px", "border-width-dropdown": "1px", "border-width-field": "1px", - "border-width-flashbar-inline-start": "0px", "border-width-icon-big": "3px", "border-width-icon-large": "4px", "border-width-icon-medium": "2px", @@ -2877,10 +2861,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-background-dropdown-item-filter-match": "#f1faff", "color-background-dropdown-item-hover": "#f2f3f3", "color-background-dropdown-item-selected": "#f1faff", - "color-background-flashbar-error": "#d13212", - "color-background-flashbar-info": "#0073bb", - "color-background-flashbar-success": "#1d8102", - "color-background-flashbar-warning": "#ffe347", "color-background-home-header": "#000000", "color-background-inline-code": "rgba(0, 0, 0, 0.1)", "color-background-input-default": "#ffffff", @@ -3733,7 +3713,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "border-width-card-selected": "2px", "border-width-dropdown": "2px", "border-width-field": "1px", - "border-width-flashbar-inline-start": "0px", "border-width-icon-big": "3px", "border-width-icon-large": "4px", "border-width-icon-medium": "2px", @@ -3794,10 +3773,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-background-dropdown-item-filter-match": "#f0fbff", "color-background-dropdown-item-hover": "#f3f3f7", "color-background-dropdown-item-selected": "#f0fbff", - "color-background-flashbar-error": "#db0000", - "color-background-flashbar-info": "#006ce0", - "color-background-flashbar-success": "#00802f", - "color-background-flashbar-warning": "#ffe347", "color-background-home-header": "#0f141a", "color-background-inline-code": "rgba(0, 0, 0, 0.1)", "color-background-input-default": "#ffffff", @@ -4650,7 +4625,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-width-card-selected": "2px", "border-width-dropdown": "2px", "border-width-field": "1px", - "border-width-flashbar-inline-start": "0px", "border-width-icon-big": "3px", "border-width-icon-large": "4px", "border-width-icon-medium": "2px", @@ -4711,10 +4685,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-dropdown-item-filter-match": "#f0fbff", "color-background-dropdown-item-hover": "#f3f3f7", "color-background-dropdown-item-selected": "#f0fbff", - "color-background-flashbar-error": "#db0000", - "color-background-flashbar-info": "#006ce0", - "color-background-flashbar-success": "#00802f", - "color-background-flashbar-warning": "#ffe347", "color-background-home-header": "#0f141a", "color-background-inline-code": "rgba(0, 0, 0, 0.1)", "color-background-input-default": "#ffffff", @@ -5567,7 +5537,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-width-card-selected": "2px", "border-width-dropdown": "2px", "border-width-field": "1px", - "border-width-flashbar-inline-start": "0px", "border-width-icon-big": "3px", "border-width-icon-large": "4px", "border-width-icon-medium": "2px", @@ -5628,10 +5597,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-dropdown-item-filter-match": "#333843", "color-background-dropdown-item-hover": "#131920", "color-background-dropdown-item-selected": "#001129", - "color-background-flashbar-error": "#db0000", - "color-background-flashbar-info": "#006ce0", - "color-background-flashbar-success": "#00802f", - "color-background-flashbar-warning": "#ffe347", "color-background-home-header": "#0f141a", "color-background-inline-code": "rgba(255, 255, 255, 0.1)", "color-background-input-default": "#0f141a", @@ -6484,7 +6449,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-width-card-selected": "2px", "border-width-dropdown": "2px", "border-width-field": "1px", - "border-width-flashbar-inline-start": "0px", "border-width-icon-big": "3px", "border-width-icon-large": "4px", "border-width-icon-medium": "2px", @@ -6545,10 +6509,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-dropdown-item-filter-match": "#333843", "color-background-dropdown-item-hover": "#131920", "color-background-dropdown-item-selected": "#001129", - "color-background-flashbar-error": "#db0000", - "color-background-flashbar-info": "#006ce0", - "color-background-flashbar-success": "#00802f", - "color-background-flashbar-warning": "#ffe347", "color-background-home-header": "#0f141a", "color-background-inline-code": "rgba(255, 255, 255, 0.1)", "color-background-input-default": "#161d26", diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap index f9f2842cb4..022cf5035f 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap @@ -157,10 +157,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of form fields.", "$value": "1px", }, - "border-width-flashbar-inline-start": { - "$description": "The inline-start border width of flash messages in flashbars.", - "$value": "0px", - }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -442,34 +438,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#f1faff", }, }, - "color-background-flashbar-error": { - "$description": "The background color of error flash messages.", - "$value": { - "dark": "#d13212", - "light": "#d13212", - }, - }, - "color-background-flashbar-info": { - "$description": "The background color of info and in-progress flash messages.", - "$value": { - "dark": "#0073bb", - "light": "#0073bb", - }, - }, - "color-background-flashbar-success": { - "$description": "The background color of success flash messages.", - "$value": { - "dark": "#1d8102", - "light": "#1d8102", - }, - }, - "color-background-flashbar-warning": { - "$description": "The background color of warning flash messages.", - "$value": { - "dark": "#ffe347", - "light": "#ffe347", - }, - }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -3712,10 +3680,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of form fields.", "$value": "1px", }, - "border-width-flashbar-inline-start": { - "$description": "The inline-start border width of flash messages in flashbars.", - "$value": "0px", - }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -3997,34 +3961,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#f1faff", }, }, - "color-background-flashbar-error": { - "$description": "The background color of error flash messages.", - "$value": { - "dark": "#d13212", - "light": "#d13212", - }, - }, - "color-background-flashbar-info": { - "$description": "The background color of info and in-progress flash messages.", - "$value": { - "dark": "#0073bb", - "light": "#0073bb", - }, - }, - "color-background-flashbar-success": { - "$description": "The background color of success flash messages.", - "$value": { - "dark": "#1d8102", - "light": "#1d8102", - }, - }, - "color-background-flashbar-warning": { - "$description": "The background color of warning flash messages.", - "$value": { - "dark": "#ffe347", - "light": "#ffe347", - }, - }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -7267,10 +7203,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of form fields.", "$value": "1px", }, - "border-width-flashbar-inline-start": { - "$description": "The inline-start border width of flash messages in flashbars.", - "$value": "0px", - }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -7552,34 +7484,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#f1faff", }, }, - "color-background-flashbar-error": { - "$description": "The background color of error flash messages.", - "$value": { - "dark": "#d13212", - "light": "#d13212", - }, - }, - "color-background-flashbar-info": { - "$description": "The background color of info and in-progress flash messages.", - "$value": { - "dark": "#0073bb", - "light": "#0073bb", - }, - }, - "color-background-flashbar-success": { - "$description": "The background color of success flash messages.", - "$value": { - "dark": "#1d8102", - "light": "#1d8102", - }, - }, - "color-background-flashbar-warning": { - "$description": "The background color of warning flash messages.", - "$value": { - "dark": "#ffe347", - "light": "#ffe347", - }, - }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -10822,10 +10726,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of form fields.", "$value": "1px", }, - "border-width-flashbar-inline-start": { - "$description": "The inline-start border width of flash messages in flashbars.", - "$value": "0px", - }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -11107,34 +11007,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#f1faff", }, }, - "color-background-flashbar-error": { - "$description": "The background color of error flash messages.", - "$value": { - "dark": "#d13212", - "light": "#d13212", - }, - }, - "color-background-flashbar-info": { - "$description": "The background color of info and in-progress flash messages.", - "$value": { - "dark": "#0073bb", - "light": "#0073bb", - }, - }, - "color-background-flashbar-success": { - "$description": "The background color of success flash messages.", - "$value": { - "dark": "#1d8102", - "light": "#1d8102", - }, - }, - "color-background-flashbar-warning": { - "$description": "The background color of warning flash messages.", - "$value": { - "dark": "#ffe347", - "light": "#ffe347", - }, - }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -13127,7 +12999,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The default color of inline button icons.", "$value": { "dark": "#d5dbdb", - "light": "#d5dbdb", + "light": "#545b64", }, }, "color-text-button-inline-icon-disabled": { @@ -13141,7 +13013,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The color of inline button icons in hover state.", "$value": { "dark": "#fafafa", - "light": "#fafafa", + "light": "#16191f", }, }, "color-text-button-link-active": { @@ -13400,7 +13272,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*", "$value": { "dark": "#d5dbdb", - "light": "#d5dbdb", + "light": "#545b64", }, }, "color-text-interactive-disabled": { @@ -13414,7 +13286,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*", "$value": { "dark": "#fafafa", - "light": "#fafafa", + "light": "#16191f", }, }, "color-text-interactive-inverted-default": { @@ -13588,8 +13460,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-status-error": { "$description": "The color of error text and icons. For example: form field error text and error status indicators.", "$value": { - "dark": "#fafafa", - "light": "#fafafa", + "dark": "#ff5d64", + "light": "#d13212", }, }, "color-text-status-inactive": { @@ -13602,15 +13474,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-status-info": { "$description": "The color of info text and icons. For example: info status indicators and info alert icon.", "$value": { - "dark": "#fafafa", - "light": "#fafafa", + "dark": "#44b9d6", + "light": "#0073bb", }, }, "color-text-status-success": { "$description": "The color of success text and icons. For example: success status indicators and success alert icon.", "$value": { - "dark": "#fafafa", - "light": "#fafafa", + "dark": "#6aaf35", + "light": "#1d8102", }, }, "color-text-status-warning": { @@ -14377,10 +14249,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of form fields.", "$value": "1px", }, - "border-width-flashbar-inline-start": { - "$description": "The inline-start border width of flash messages in flashbars.", - "$value": "0px", - }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -14662,34 +14530,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#f1faff", }, }, - "color-background-flashbar-error": { - "$description": "The background color of error flash messages.", - "$value": { - "dark": "#d13212", - "light": "#d13212", - }, - }, - "color-background-flashbar-info": { - "$description": "The background color of info and in-progress flash messages.", - "$value": { - "dark": "#0073bb", - "light": "#0073bb", - }, - }, - "color-background-flashbar-success": { - "$description": "The background color of success flash messages.", - "$value": { - "dark": "#1d8102", - "light": "#1d8102", - }, - }, - "color-background-flashbar-warning": { - "$description": "The background color of warning flash messages.", - "$value": { - "dark": "#ffe347", - "light": "#ffe347", - }, - }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -16681,7 +16521,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-button-inline-icon-default": { "$description": "The default color of inline button icons.", "$value": { - "dark": "#545b64", + "dark": "#d5dbdb", "light": "#545b64", }, }, @@ -16695,7 +16535,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-button-inline-icon-hover": { "$description": "The color of inline button icons in hover state.", "$value": { - "dark": "#16191f", + "dark": "#fafafa", "light": "#16191f", }, }, @@ -16954,7 +16794,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-interactive-default": { "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*", "$value": { - "dark": "#545b64", + "dark": "#d5dbdb", "light": "#545b64", }, }, @@ -16968,22 +16808,22 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-interactive-hover": { "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*", "$value": { - "dark": "#16191f", + "dark": "#fafafa", "light": "#16191f", }, }, "color-text-interactive-inverted-default": { "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.", "$value": { - "dark": "#d5dbdb", - "light": "#d5dbdb", + "dark": "#545b64", + "light": "#545b64", }, }, "color-text-interactive-inverted-hover": { "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.", "$value": { - "dark": "#fafafa", - "light": "#fafafa", + "dark": "#16191f", + "light": "#16191f", }, }, "color-text-label": { @@ -17171,8 +17011,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-status-warning": { "$description": "The color of warning icons.", "$value": { - "dark": "#16191f", - "light": "#16191f", + "dark": "#fbd332", + "light": "#906806", }, }, "color-text-toggle-button-icon-pressed": { @@ -17932,10 +17772,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of form fields.", "$value": "1px", }, - "border-width-flashbar-inline-start": { - "$description": "The inline-start border width of flash messages in flashbars.", - "$value": "0px", - }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -18217,34 +18053,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#12293b", }, }, - "color-background-flashbar-error": { - "$description": "The background color of error flash messages.", - "$value": { - "dark": "#d13212", - "light": "#d13212", - }, - }, - "color-background-flashbar-info": { - "$description": "The background color of info and in-progress flash messages.", - "$value": { - "dark": "#0073bb", - "light": "#0073bb", - }, - }, - "color-background-flashbar-success": { - "$description": "The background color of success flash messages.", - "$value": { - "dark": "#1d8102", - "light": "#1d8102", - }, - }, - "color-background-flashbar-warning": { - "$description": "The background color of warning flash messages.", - "$value": { - "dark": "#ffe347", - "light": "#ffe347", - }, - }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -21487,10 +21295,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of form fields.", "$value": "1px", }, - "border-width-flashbar-inline-start": { - "$description": "The inline-start border width of flash messages in flashbars.", - "$value": "0px", - }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -21772,34 +21576,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#f1faff", }, }, - "color-background-flashbar-error": { - "$description": "The background color of error flash messages.", - "$value": { - "dark": "#d13212", - "light": "#d13212", - }, - }, - "color-background-flashbar-info": { - "$description": "The background color of info and in-progress flash messages.", - "$value": { - "dark": "#0073bb", - "light": "#0073bb", - }, - }, - "color-background-flashbar-success": { - "$description": "The background color of success flash messages.", - "$value": { - "dark": "#1d8102", - "light": "#1d8102", - }, - }, - "color-background-flashbar-warning": { - "$description": "The background color of warning flash messages.", - "$value": { - "dark": "#ffe347", - "light": "#ffe347", - }, - }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -25047,10 +24823,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of form fields.", "$value": "1px", }, - "border-width-flashbar-inline-start": { - "$description": "The inline-start border width of flash messages in flashbars.", - "$value": "0px", - }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -25332,34 +25104,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#f0fbff", }, }, - "color-background-flashbar-error": { - "$description": "The background color of error flash messages.", - "$value": { - "dark": "#db0000", - "light": "#db0000", - }, - }, - "color-background-flashbar-info": { - "$description": "The background color of info and in-progress flash messages.", - "$value": { - "dark": "#006ce0", - "light": "#006ce0", - }, - }, - "color-background-flashbar-success": { - "$description": "The background color of success flash messages.", - "$value": { - "dark": "#00802f", - "light": "#00802f", - }, - }, - "color-background-flashbar-warning": { - "$description": "The background color of warning flash messages.", - "$value": { - "dark": "#ffe347", - "light": "#ffe347", - }, - }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -28602,10 +28346,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of form fields.", "$value": "1px", }, - "border-width-flashbar-inline-start": { - "$description": "The inline-start border width of flash messages in flashbars.", - "$value": "0px", - }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -28887,34 +28627,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#001129", }, }, - "color-background-flashbar-error": { - "$description": "The background color of error flash messages.", - "$value": { - "dark": "#db0000", - "light": "#db0000", - }, - }, - "color-background-flashbar-info": { - "$description": "The background color of info and in-progress flash messages.", - "$value": { - "dark": "#006ce0", - "light": "#006ce0", - }, - }, - "color-background-flashbar-success": { - "$description": "The background color of success flash messages.", - "$value": { - "dark": "#00802f", - "light": "#00802f", - }, - }, - "color-background-flashbar-warning": { - "$description": "The background color of warning flash messages.", - "$value": { - "dark": "#ffe347", - "light": "#ffe347", - }, - }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -32157,10 +31869,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of form fields.", "$value": "1px", }, - "border-width-flashbar-inline-start": { - "$description": "The inline-start border width of flash messages in flashbars.", - "$value": "0px", - }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -32442,34 +32150,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#f0fbff", }, }, - "color-background-flashbar-error": { - "$description": "The background color of error flash messages.", - "$value": { - "dark": "#db0000", - "light": "#db0000", - }, - }, - "color-background-flashbar-info": { - "$description": "The background color of info and in-progress flash messages.", - "$value": { - "dark": "#006ce0", - "light": "#006ce0", - }, - }, - "color-background-flashbar-success": { - "$description": "The background color of success flash messages.", - "$value": { - "dark": "#00802f", - "light": "#00802f", - }, - }, - "color-background-flashbar-warning": { - "$description": "The background color of warning flash messages.", - "$value": { - "dark": "#ffe347", - "light": "#ffe347", - }, - }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -35712,10 +35392,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of form fields.", "$value": "1px", }, - "border-width-flashbar-inline-start": { - "$description": "The inline-start border width of flash messages in flashbars.", - "$value": "0px", - }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -35997,34 +35673,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#f0fbff", }, }, - "color-background-flashbar-error": { - "$description": "The background color of error flash messages.", - "$value": { - "dark": "#db0000", - "light": "#db0000", - }, - }, - "color-background-flashbar-info": { - "$description": "The background color of info and in-progress flash messages.", - "$value": { - "dark": "#006ce0", - "light": "#006ce0", - }, - }, - "color-background-flashbar-success": { - "$description": "The background color of success flash messages.", - "$value": { - "dark": "#00802f", - "light": "#00802f", - }, - }, - "color-background-flashbar-warning": { - "$description": "The background color of warning flash messages.", - "$value": { - "dark": "#ffe347", - "light": "#ffe347", - }, - }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -39267,10 +38915,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of form fields.", "$value": "1px", }, - "border-width-flashbar-inline-start": { - "$description": "The inline-start border width of flash messages in flashbars.", - "$value": "0px", - }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -39552,34 +39196,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#f0fbff", }, }, - "color-background-flashbar-error": { - "$description": "The background color of error flash messages.", - "$value": { - "dark": "#db0000", - "light": "#db0000", - }, - }, - "color-background-flashbar-info": { - "$description": "The background color of info and in-progress flash messages.", - "$value": { - "dark": "#006ce0", - "light": "#006ce0", - }, - }, - "color-background-flashbar-success": { - "$description": "The background color of success flash messages.", - "$value": { - "dark": "#00802f", - "light": "#00802f", - }, - }, - "color-background-flashbar-warning": { - "$description": "The background color of warning flash messages.", - "$value": { - "dark": "#ffe347", - "light": "#ffe347", - }, - }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -41761,7 +41377,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The default color of the expand icon in the navigation variant of the expandable section.", "$value": { "dark": "#dedee3", - "light": "#dedee3", + "light": "#424650", }, }, "color-text-form-default": { @@ -41845,7 +41461,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*", "$value": { "dark": "#dedee3", - "light": "#dedee3", + "light": "#424650", }, }, "color-text-interactive-disabled": { @@ -41859,7 +41475,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*", "$value": { "dark": "#f9f9fa", - "light": "#f9f9fa", + "light": "#0f141a", }, }, "color-text-interactive-inverted-default": { @@ -42033,8 +41649,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-status-error": { "$description": "The color of error text and icons. For example: form field error text and error status indicators.", "$value": { - "dark": "#f9f9fa", - "light": "#f9f9fa", + "dark": "#ff7a7a", + "light": "#db0000", }, }, "color-text-status-inactive": { @@ -42047,15 +41663,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-status-info": { "$description": "The color of info text and icons. For example: info status indicators and info alert icon.", "$value": { - "dark": "#f9f9fa", - "light": "#f9f9fa", + "dark": "#42b4ff", + "light": "#006ce0", }, }, "color-text-status-success": { "$description": "The color of success text and icons. For example: success status indicators and success alert icon.", "$value": { - "dark": "#f9f9fa", - "light": "#f9f9fa", + "dark": "#2bb534", + "light": "#00802f", }, }, "color-text-status-warning": { @@ -42822,10 +42438,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of form fields.", "$value": "1px", }, - "border-width-flashbar-inline-start": { - "$description": "The inline-start border width of flash messages in flashbars.", - "$value": "0px", - }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -43107,34 +42719,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#f0fbff", }, }, - "color-background-flashbar-error": { - "$description": "The background color of error flash messages.", - "$value": { - "dark": "#db0000", - "light": "#db0000", - }, - }, - "color-background-flashbar-info": { - "$description": "The background color of info and in-progress flash messages.", - "$value": { - "dark": "#006ce0", - "light": "#006ce0", - }, - }, - "color-background-flashbar-success": { - "$description": "The background color of success flash messages.", - "$value": { - "dark": "#00802f", - "light": "#00802f", - }, - }, - "color-background-flashbar-warning": { - "$description": "The background color of warning flash messages.", - "$value": { - "dark": "#ffe347", - "light": "#ffe347", - }, - }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -45315,7 +44899,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-expandable-section-navigation-icon-default": { "$description": "The default color of the expand icon in the navigation variant of the expandable section.", "$value": { - "dark": "#424650", + "dark": "#dedee3", "light": "#424650", }, }, @@ -45399,7 +44983,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-interactive-default": { "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*", "$value": { - "dark": "#424650", + "dark": "#dedee3", "light": "#424650", }, }, @@ -45413,22 +44997,22 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-interactive-hover": { "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*", "$value": { - "dark": "#0f141a", + "dark": "#f9f9fa", "light": "#0f141a", }, }, "color-text-interactive-inverted-default": { "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.", "$value": { - "dark": "#dedee3", - "light": "#dedee3", + "dark": "#424650", + "light": "#424650", }, }, "color-text-interactive-inverted-hover": { "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.", "$value": { - "dark": "#f9f9fa", - "light": "#f9f9fa", + "dark": "#0f141a", + "light": "#0f141a", }, }, "color-text-label": { @@ -45616,8 +45200,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-status-warning": { "$description": "The color of warning icons.", "$value": { - "dark": "#0f141a", - "light": "#0f141a", + "dark": "#fbd332", + "light": "#855900", }, }, "color-text-toggle-button-icon-pressed": { @@ -46377,10 +45961,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of form fields.", "$value": "1px", }, - "border-width-flashbar-inline-start": { - "$description": "The inline-start border width of flash messages in flashbars.", - "$value": "0px", - }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -46662,34 +46242,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#001129", }, }, - "color-background-flashbar-error": { - "$description": "The background color of error flash messages.", - "$value": { - "dark": "#db0000", - "light": "#db0000", - }, - }, - "color-background-flashbar-info": { - "$description": "The background color of info and in-progress flash messages.", - "$value": { - "dark": "#006ce0", - "light": "#006ce0", - }, - }, - "color-background-flashbar-success": { - "$description": "The background color of success flash messages.", - "$value": { - "dark": "#00802f", - "light": "#00802f", - }, - }, - "color-background-flashbar-warning": { - "$description": "The background color of warning flash messages.", - "$value": { - "dark": "#ffe347", - "light": "#ffe347", - }, - }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -49932,10 +49484,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of form fields.", "$value": "1px", }, - "border-width-flashbar-inline-start": { - "$description": "The inline-start border width of flash messages in flashbars.", - "$value": "0px", - }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -50217,34 +49765,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#001129", }, }, - "color-background-flashbar-error": { - "$description": "The background color of error flash messages.", - "$value": { - "dark": "#db0000", - "light": "#db0000", - }, - }, - "color-background-flashbar-info": { - "$description": "The background color of info and in-progress flash messages.", - "$value": { - "dark": "#006ce0", - "light": "#006ce0", - }, - }, - "color-background-flashbar-success": { - "$description": "The background color of success flash messages.", - "$value": { - "dark": "#00802f", - "light": "#00802f", - }, - }, - "color-background-flashbar-warning": { - "$description": "The background color of warning flash messages.", - "$value": { - "dark": "#ffe347", - "light": "#ffe347", - }, - }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -53487,10 +53007,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of form fields.", "$value": "1px", }, - "border-width-flashbar-inline-start": { - "$description": "The inline-start border width of flash messages in flashbars.", - "$value": "0px", - }, "border-width-icon-big": { "$description": "The visual stroke width of big icons.", "$value": "3px", @@ -53772,34 +53288,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#f0fbff", }, }, - "color-background-flashbar-error": { - "$description": "The background color of error flash messages.", - "$value": { - "dark": "#db0000", - "light": "#db0000", - }, - }, - "color-background-flashbar-info": { - "$description": "The background color of info and in-progress flash messages.", - "$value": { - "dark": "#006ce0", - "light": "#006ce0", - }, - }, - "color-background-flashbar-success": { - "$description": "The background color of success flash messages.", - "$value": { - "dark": "#00802f", - "light": "#00802f", - }, - }, - "color-background-flashbar-warning": { - "$description": "The background color of warning flash messages.", - "$value": { - "dark": "#ffe347", - "light": "#ffe347", - }, - }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { diff --git a/src/button/constants.scss b/src/button/constants.scss index 1dbbca58bd..9ae71e6ead 100644 --- a/src/button/constants.scss +++ b/src/button/constants.scss @@ -125,13 +125,13 @@ $variants: ( 'flashbar-icon': ( 'default-background': transparent, 'default-border-color': transparent, - 'default-color': awsui.$color-text-interactive-default, + 'default-color': awsui.$color-text-interactive-inverted-default, 'hover-background': transparent, 'hover-border-color': transparent, - 'hover-color': awsui.$color-text-interactive-hover, + 'hover-color': awsui.$color-text-interactive-inverted-hover, 'active-background': transparent, 'active-border-color': transparent, - 'active-color': awsui.$color-text-interactive-default, + 'active-color': awsui.$color-text-interactive-inverted-default, 'disabled-background': transparent, 'disabled-border-color': transparent, 'disabled-color': awsui.$color-text-interactive-disabled, diff --git a/src/flashbar/styles.scss b/src/flashbar/styles.scss index 4f21d78443..d93b760a31 100644 --- a/src/flashbar/styles.scss +++ b/src/flashbar/styles.scss @@ -36,7 +36,6 @@ border-start-end-radius: awsui.$border-radius-flashbar; border-end-start-radius: awsui.$border-radius-flashbar; border-end-end-radius: awsui.$border-radius-flashbar; - border-inline-start: awsui.$border-width-flashbar-inline-start solid transparent; color: awsui.$color-text-notification-default; overflow-wrap: break-word; word-wrap: break-word; @@ -147,39 +146,19 @@ } .flash-type-success { - background-color: awsui.$color-background-flashbar-success; - border-inline-start-color: awsui.$color-border-status-success; - - > .flash-body > .flash-focus-container > .flash-icon { - color: awsui.$color-text-status-success; - } + background-color: awsui.$color-background-notification-green; } .flash-type-error { - background-color: awsui.$color-background-flashbar-error; - border-inline-start-color: awsui.$color-border-status-error; - - > .flash-body > .flash-focus-container > .flash-icon { - color: awsui.$color-text-status-error; - } + background-color: awsui.$color-background-notification-red; } .flash-type-info, .flash-type-in-progress { - background-color: awsui.$color-background-flashbar-info; - border-inline-start-color: awsui.$color-border-status-info; - - > .flash-body > .flash-focus-container > .flash-icon { - color: awsui.$color-text-status-info; - } + background-color: awsui.$color-background-notification-blue; } .flash-type-warning { color: awsui.$color-text-notification-yellow; - background-color: awsui.$color-background-flashbar-warning; - border-inline-start-color: awsui.$color-border-status-warning; - - > .flash-body > .flash-focus-container > .flash-icon { - color: awsui.$color-text-status-warning; - } + background-color: awsui.$color-background-notification-yellow; } diff --git a/src/popover/body.tsx b/src/popover/body.tsx index 8bca2d3cf1..43295e5ac1 100644 --- a/src/popover/body.tsx +++ b/src/popover/body.tsx @@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useRef } from 'react'; import clsx from 'clsx'; -import { isThemeActive, Theme, useUniqueId } from '@cloudscape-design/component-toolkit/internal'; +import { useUniqueId } from '@cloudscape-design/component-toolkit/internal'; import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata'; import { ButtonProps } from '../button/interfaces'; @@ -85,7 +85,6 @@ const PopoverBody = React.forwardRef( variant="icon" formAction="none" iconName="close" - __iconSize={isThemeActive(Theme.OneTheme) ? 'x-small' : undefined} className={styles['dismiss-control']} ariaLabel={i18n('dismissAriaLabel', dismissAriaLabel)} onClick={() => onDismiss?.('close-button')} diff --git a/style-dictionary/one-theme/borders.ts b/style-dictionary/one-theme/borders.ts index 52153c5fc2..33a3e1dd6c 100644 --- a/style-dictionary/one-theme/borders.ts +++ b/style-dictionary/one-theme/borders.ts @@ -14,7 +14,6 @@ const tokens: StyleDictionary.BordersDictionary = { borderWidthDropdown: '1px', borderWidthPopover: '1px', borderWidthAlertInlineStart: '2px', - borderWidthFlashbarInlineStart: '2px', borderWidthItemSelected: '1px', borderWidthCardSelected: '1px', diff --git a/style-dictionary/one-theme/colors.ts b/style-dictionary/one-theme/colors.ts index 1a67512478..e95130f580 100644 --- a/style-dictionary/one-theme/colors.ts +++ b/style-dictionary/one-theme/colors.ts @@ -130,12 +130,6 @@ const tokens: StyleDictionary.ColorsDictionary = { colorBackgroundNotificationYellow: { light: '{colorWarning400}', dark: '{colorWarning900}' }, colorTextNotificationDefault: { light: '{colorNeutral100}', dark: '{colorNeutral100}' }, - // ── Flashbar (one-theme: subtle alert-style backgrounds) ─────────────────── - colorBackgroundFlashbarSuccess: { light: '{colorSuccess100}', dark: '{colorSuccess950}' }, - colorBackgroundFlashbarError: { light: '{colorError100}', dark: '{colorError950}' }, - colorBackgroundFlashbarInfo: { light: '{colorInfo100}', dark: '{colorInfo950}' }, - colorBackgroundFlashbarWarning: { light: '{colorWarning100}', dark: '{colorWarning950}' }, - // ── Status text ─────────────────────────────────────────────────────────── colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo300}' }, colorTextStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess200}' }, diff --git a/style-dictionary/one-theme/contexts/alert.ts b/style-dictionary/one-theme/contexts/alert.ts index f5b97c2917..5d2891d845 100644 --- a/style-dictionary/one-theme/contexts/alert.ts +++ b/style-dictionary/one-theme/contexts/alert.ts @@ -6,45 +6,16 @@ import { expandColorDictionary } from '../../utils/index.js'; import { StyleDictionary } from '../../utils/interfaces.js'; const tokens: StyleDictionary.ColorsDictionary = { - // Status backgrounds - colorBackgroundStatusInfo: { light: '{colorInfo100}', dark: '{colorInfo950}' }, - colorBackgroundStatusWarning: { light: '{colorWarning100}', dark: '{colorWarning950}' }, - colorBackgroundStatusError: { light: '{colorError100}', dark: '{colorError950}' }, - colorBackgroundStatusSuccess: { light: '{colorSuccess100}', dark: '{colorSuccess950}' }, - - // Status text and borders - colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, - colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, + colorBackgroundStatusInfo: { light: '{colorInfo50}', dark: '#161a2d' }, + colorBackgroundStatusWarning: { light: '{colorWarning50}', dark: '#191100' }, + colorBackgroundStatusError: { light: '{colorError50}', dark: '#1f0000' }, + colorBackgroundStatusSuccess: { light: '{colorSuccess50}', dark: '#001401' }, + colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo500}' }, + colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo500}' }, colorTextStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, colorBorderStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, - - // Buttons - colorTextButtonNormalDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorTextButtonNormalHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - colorTextButtonNormalActive: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorBorderButtonNormalDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorBorderButtonNormalHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - colorBorderButtonNormalActive: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, colorBackgroundButtonNormalDefault: { light: 'transparent', dark: 'transparent' }, - colorBackgroundButtonNormalHover: 'rgba(0, 0, 0, 0.05)', - colorBackgroundButtonNormalActive: 'rgba(0, 0, 0, 0.1)', - - // Link - colorTextLinkDefault: { light: '{colorNeutral900}', dark: '{colorNeutral50}' }, - colorTextLinkHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - - // Dividers colorBorderDividerDefault: { light: '{colorNeutral350}', dark: '{colorNeutral600}' }, - - // Alert text - colorTextBodyDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - - // Expandable section - colorTextExpandableSectionHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - colorBorderExpandableSectionDefault: { light: '{colorNeutral600}', dark: '{colorNeutral500}' }, - - // Focus ring - colorBorderItemFocused: { light: '{colorNeutral800}', dark: '{colorWhite}' }, }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(merge({}, tokens)); diff --git a/style-dictionary/one-theme/contexts/flashbar-warning.ts b/style-dictionary/one-theme/contexts/flashbar-warning.ts index 5bbd2b8c8b..54e530d1ba 100644 --- a/style-dictionary/one-theme/contexts/flashbar-warning.ts +++ b/style-dictionary/one-theme/contexts/flashbar-warning.ts @@ -6,54 +6,30 @@ import { expandColorDictionary } from '../../utils/index.js'; import { StyleDictionary } from '../../utils/interfaces.js'; const tokens: StyleDictionary.ColorsDictionary = { - // Status backgrounds - colorBackgroundStatusInfo: { light: '{colorInfo100}', dark: '{colorInfo950}' }, - colorBackgroundStatusWarning: { light: '{colorWarning100}', dark: '{colorWarning950}' }, - colorBackgroundStatusError: { light: '{colorError100}', dark: '{colorError950}' }, - colorBackgroundStatusSuccess: { light: '{colorSuccess100}', dark: '{colorSuccess950}' }, - - // Status text and borders - colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, - colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, - colorTextStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, - colorBorderStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, - - // Buttons - colorTextButtonNormalDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorTextButtonNormalHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - colorTextButtonNormalActive: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorBorderButtonNormalDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorBorderButtonNormalHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - colorBorderButtonNormalActive: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorBackgroundButtonNormalDefault: { light: 'transparent', dark: 'transparent' }, - colorBackgroundButtonNormalHover: 'rgba(0, 0, 0, 0.05)', - colorBackgroundButtonNormalActive: 'rgba(0, 0, 0, 0.1)', - - // Link - colorTextLinkInvertedHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, + colorTextNotificationYellow: { light: '{colorNeutral900}', dark: '{colorWhite}' }, + colorTextNotificationDefault: { light: '{colorNeutral900}', dark: '{colorWhite}' }, + colorTextInteractiveInvertedDefault: { light: '{colorNeutral900}', dark: '{colorWhite}' }, + colorBorderDividerDefault: '{colorNeutral900}', - // Dismiss button - colorTextInteractiveDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorTextInteractiveHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, + // Button + colorBorderButtonNormalDefault: { light: '{colorNeutral800}', dark: '{colorWhite}' }, + colorBorderButtonNormalHover: { light: '{colorNeutral800}', dark: '{colorWhite}' }, + colorBorderButtonNormalActive: { light: '{colorNeutral800}', dark: '{colorWhite}' }, - // Dividers - colorBorderDividerDefault: { light: '{colorNeutral350}', dark: '{colorNeutral600}' }, + colorBackgroundButtonNormalDefault: { light: 'transparent', dark: 'transparent' }, + colorBackgroundButtonNormalHover: { light: 'rgba(0, 7, 22, 0.08)', dark: 'rgba(255, 255, 255, 0.06)' }, + colorBackgroundButtonNormalActive: { light: 'rgba(0, 7, 22, 0.1)', dark: 'rgba(255, 255, 255, 0.1)' }, - // Notification text - colorTextNotificationYellow: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorTextNotificationDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorTextHeadingSecondary: { light: '{colorNeutral750}', dark: '{colorNeutral300}' }, + colorTextButtonNormalDefault: { light: '{colorNeutral900}', dark: '{colorWhite}' }, + colorTextButtonNormalHover: { light: '{colorNeutral900}', dark: '{colorWhite}' }, + colorTextButtonNormalActive: { light: '{colorNeutral900}', dark: '{colorWhite}' }, // Expandable section - colorTextExpandableSectionHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - colorBorderExpandableSectionDefault: { light: '{colorNeutral600}', dark: '{colorNeutral500}' }, - - // Progress bar - colorBackgroundProgressBarValueDefault: { light: '{colorNeutral800}', dark: '{colorWhite}' }, - colorBackgroundProgressBarDefault: { light: '{colorGreyOpaque10}', dark: '{colorGreyOpaque25}' }, - - // Focus ring - colorBorderItemFocused: { light: '{colorNeutral800}', dark: '{colorWhite}' }, + colorTextExpandableSectionDefault: { light: '{colorNeutral900}', dark: '{colorNeutral100}' }, + colorTextExpandableSectionHover: { light: '{colorNeutral1000}', dark: '{colorWhite}' }, + colorTextHeadingSecondary: { light: '{colorNeutral700}', dark: '{colorNeutral100}' }, + colorBorderExpandableSectionDefault: { light: '{colorNeutral900}', dark: '{colorWhite}' }, + colorTextBodyDefault: { light: '{colorNeutral700}', dark: '{colorNeutral100}' }, }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(merge({}, tokens)); diff --git a/style-dictionary/one-theme/contexts/flashbar.ts b/style-dictionary/one-theme/contexts/flashbar.ts index c19d108acf..3a0f6e6c75 100644 --- a/style-dictionary/one-theme/contexts/flashbar.ts +++ b/style-dictionary/one-theme/contexts/flashbar.ts @@ -6,53 +6,35 @@ import { expandColorDictionary } from '../../utils/index.js'; import { StyleDictionary } from '../../utils/interfaces.js'; const tokens: StyleDictionary.ColorsDictionary = { - // Status backgrounds - colorBackgroundStatusInfo: { light: '{colorInfo100}', dark: '{colorInfo950}' }, - colorBackgroundStatusWarning: { light: '{colorWarning100}', dark: '{colorWarning950}' }, - colorBackgroundStatusError: { light: '{colorError100}', dark: '{colorError950}' }, - colorBackgroundStatusSuccess: { light: '{colorSuccess100}', dark: '{colorSuccess950}' }, - - // Status text and borders - colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, - colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' }, - colorTextStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, - colorBorderStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' }, - - // Buttons - colorTextButtonNormalDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorTextButtonNormalHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - colorTextButtonNormalActive: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorBorderButtonNormalDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorBorderButtonNormalHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - colorBorderButtonNormalActive: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorBackgroundButtonNormalDefault: { light: 'transparent', dark: 'transparent' }, - colorBackgroundButtonNormalHover: 'rgba(0, 0, 0, 0.05)', - colorBackgroundButtonNormalActive: 'rgba(0, 0, 0, 0.1)', - - // Link - colorTextLinkInvertedHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - - // Dismiss button - colorTextInteractiveDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorTextInteractiveHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - - // Dividers - colorBorderDividerDefault: { light: '{colorNeutral350}', dark: '{colorNeutral600}' }, - - // Notification text - colorTextNotificationDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorTextHeadingSecondary: { light: '{colorNeutral750}', dark: '{colorNeutral300}' }, - - // Expandable section - colorTextExpandableSectionHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - colorBorderExpandableSectionDefault: { light: '{colorNeutral600}', dark: '{colorNeutral500}' }, - - // Progress bar - colorBackgroundProgressBarValueDefault: { light: '{colorNeutral800}', dark: '{colorWhite}' }, - colorBackgroundProgressBarDefault: { light: '{colorGreyOpaque10}', dark: '{colorGreyOpaque25}' }, - - // Focus ring - colorBorderItemFocused: { light: '{colorNeutral800}', dark: '{colorWhite}' }, + colorTextButtonNormalDefault: '{colorNeutral100}', + colorBorderButtonNormalDefault: '{colorNeutral100}', + colorBackgroundButtonNormalDefault: 'transparent', + colorTextButtonNormalHover: '{colorWhite}', + colorBorderButtonNormalHover: '{colorWhite}', + colorBackgroundButtonNormalHover: 'rgba(0, 7, 22, 0.15)', + colorTextButtonNormalActive: '{colorWhite}', + colorBorderButtonNormalActive: '{colorWhite}', + colorBackgroundButtonNormalActive: 'rgba(0, 7, 22, 0.2)', + colorBorderItemFocused: '{colorNeutral100}', + colorTextExpandableSectionDefault: '{colorNeutral100}', + colorTextExpandableSectionHover: '{colorWhite}', + colorTextBodyDefault: '{colorNeutral100}', + colorTextBodySecondary: '{colorNeutral100}', + colorTextHeadingSecondary: '{colorNeutral100}', + colorBorderDividerDefault: '{colorNeutral100}', + colorTextTutorialHotspotDefault: '{colorNeutral300}', + colorTextTutorialHotspotHover: '{colorNeutral100}', + colorBackgroundInlineCode: 'rgba(0, 0, 0, 0.2)', + // Key-value pairs + colorTextLabel: '{colorNeutral100}', + + // Info links + colorTextLinkDefault: '{colorNeutral100}', + colorTextLinkHover: '{colorWhite}', + + // Progress Bar + colorBackgroundProgressBarValueDefault: '{colorWhite}', + colorBackgroundProgressBarDefault: '{colorGreyOpaque25}', }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(merge({}, tokens)); diff --git a/style-dictionary/one-theme/shadows.ts b/style-dictionary/one-theme/shadows.ts index ee037400f7..d0d4b5085d 100644 --- a/style-dictionary/one-theme/shadows.ts +++ b/style-dictionary/one-theme/shadows.ts @@ -18,7 +18,7 @@ const tokens: StyleDictionary.ShadowsDictionary = { shadowDropup: '{shadowDropdown}', shadowFlashCollapsed: '0px 4px 4px rgba(0, 0, 0, 0.25)', shadowFlashSticky: { - light: '0px 4px 8px rgba(0, 0, 0, 0.05)', + light: '0px 4px 8px rgba(0, 0, 0, 0.10)', dark: '0px 4px 8px rgba(0, 0, 0, 0.5)', }, shadowModal: '{shadowDropdown}', diff --git a/style-dictionary/one-theme/typography.ts b/style-dictionary/one-theme/typography.ts index 45f658826c..3b0f7589c1 100644 --- a/style-dictionary/one-theme/typography.ts +++ b/style-dictionary/one-theme/typography.ts @@ -36,7 +36,6 @@ const tokens: StyleDictionary.TypographyDictionary = { fontWeightButton: '500', fontWeightTabs: '500', fontSizeTabs: '14px', - fontWayfindingLinkActiveWeight: '500', // ── Alerts / flashbars ──────────────────────────────────────────────────── fontWeightAlertHeader: '500', diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index a7884bb9d6..74ac223885 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -597,10 +597,6 @@ export type ColorsTokenName = | 'colorBackgroundModalOverlay' | 'colorBackgroundNotificationBlue' | 'colorBackgroundNotificationGreen' - | 'colorBackgroundFlashbarSuccess' - | 'colorBackgroundFlashbarError' - | 'colorBackgroundFlashbarInfo' - | 'colorBackgroundFlashbarWarning' | 'colorBackgroundNotificationGrey' | 'colorBackgroundNotificationRed' | 'colorBackgroundNotificationYellow' @@ -1001,7 +997,6 @@ export type BordersTokenName = | 'borderWidthAlertBlockStart' | 'borderWidthAlertBlockEnd' | 'borderWidthAlertInlineStart' - | 'borderWidthFlashbarInlineStart' | 'borderWidthAlertInlineEnd' | 'borderWidthCard' | 'borderWidthCardSelected' diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts index 1695d0848b..3544f174fa 100644 --- a/style-dictionary/visual-refresh/borders.ts +++ b/style-dictionary/visual-refresh/borders.ts @@ -59,7 +59,6 @@ export const tokens: StyleDictionary.BordersDictionary = { borderWidthAlertBlockStart: '{borderWidthAlert}', borderWidthAlertInlineEnd: '{borderWidthAlert}', borderWidthAlertInlineStart: '{borderWidthAlert}', - borderWidthFlashbarInlineStart: '0px', borderWidthButton: '2px', borderWidthCard: '{borderDividerSectionWidth}', borderWidthCardSelected: '{borderItemWidth}', diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts index a9b15e7a16..f8758c8bb5 100644 --- a/style-dictionary/visual-refresh/colors.ts +++ b/style-dictionary/visual-refresh/colors.ts @@ -83,10 +83,6 @@ const tokens: StyleDictionary.ColorsDictionary = { colorBackgroundNotificationGrey: { light: '{colorNeutral650}', dark: '{colorNeutral600}' }, colorBackgroundNotificationRed: '{colorError600}', colorBackgroundNotificationYellow: '{colorWarning400}', - colorBackgroundFlashbarSuccess: '{colorBackgroundNotificationGreen}', - colorBackgroundFlashbarError: '{colorBackgroundNotificationRed}', - colorBackgroundFlashbarInfo: '{colorBackgroundNotificationBlue}', - colorBackgroundFlashbarWarning: '{colorBackgroundNotificationYellow}', colorBackgroundNotificationStackBar: '{colorNeutral750}', colorBackgroundNotificationStackBarActive: '{colorNeutral750}', colorBackgroundNotificationStackBarHover: '{colorNeutral650}', diff --git a/style-dictionary/visual-refresh/contexts/flashbar-warning.ts b/style-dictionary/visual-refresh/contexts/flashbar-warning.ts index 822977e9fe..5fac6a6e01 100644 --- a/style-dictionary/visual-refresh/contexts/flashbar-warning.ts +++ b/style-dictionary/visual-refresh/contexts/flashbar-warning.ts @@ -16,15 +16,9 @@ const baseTokens: StyleDictionary.ColorsDictionary = { // Focus outline matches the text color to align with other flashbar types and to ensure color contrast. colorBorderItemFocused: '{colorTextNotificationYellow}', - // Status icon color: flashbar now drives its status icon color from - // colorTextStatus*. Classic/visual refresh keep the legacy warning icon color - // (matching the surrounding text); only one-theme opts into the status color. - colorTextStatusWarning: '{colorTextNotificationYellow}', - - // Dismiss button (flashbar-icon variant) now reads colorTextInteractive*. - // The warning flash is light in both modes, so pin to dark values for contrast. - colorTextInteractiveDefault: '{colorNeutral650}', - colorTextInteractiveHover: '{colorNeutral950}', + // Dismiss button + colorTextInteractiveInvertedDefault: '{colorNeutral650}', + colorTextInteractiveInvertedHover: '{colorNeutral950}', // Progress bars colorBackgroundProgressBarValueDefault: '{colorNeutral950}', diff --git a/style-dictionary/visual-refresh/contexts/flashbar.ts b/style-dictionary/visual-refresh/contexts/flashbar.ts index 92b02d5cfb..6d5a88c2dd 100644 --- a/style-dictionary/visual-refresh/contexts/flashbar.ts +++ b/style-dictionary/visual-refresh/contexts/flashbar.ts @@ -18,11 +18,6 @@ export const sharedTokens: StyleDictionary.ColorsDictionary = { colorBorderButtonNormalActive: '{colorWhite}', colorBackgroundButtonNormalActive: 'rgba(0, 7, 22, 0.2)', colorBorderItemFocused: '{colorNeutral100}', - // The flashbar-icon (dismiss) button reads colorTextInteractive*. On the - // saturated classic/visual-refresh backgrounds, keep it inverted so the icon - // stays legible (one-theme uses the regular non-inverted values). - colorTextInteractiveDefault: '{colorTextInteractiveInvertedDefault}', - colorTextInteractiveHover: '{colorTextInteractiveInvertedHover}', colorTextExpandableSectionDefault: '{colorNeutral100}', colorTextExpandableSectionHover: '{colorWhite}', colorTextBodyDefault: '{colorNeutral100}', @@ -32,13 +27,6 @@ export const sharedTokens: StyleDictionary.ColorsDictionary = { colorTextTutorialHotspotDefault: '{colorNeutral300}', colorTextTutorialHotspotHover: '{colorNeutral100}', colorBackgroundInlineCode: 'rgba(0, 0, 0, 0.2)', - // Status icon colors: flashbar now drives its status icon color from - // colorTextStatus*, but classic/visual refresh keep the legacy uniform icon - // color (matching the surrounding notification text on the saturated - // background). Only one-theme opts into per-status icon colors. - colorTextStatusSuccess: '{colorTextNotificationDefault}', - colorTextStatusError: '{colorTextNotificationDefault}', - colorTextStatusInfo: '{colorTextNotificationDefault}', // Key-value pairs colorTextLabel: '{colorNeutral100}', diff --git a/style-dictionary/visual-refresh/metadata/borders.ts b/style-dictionary/visual-refresh/metadata/borders.ts index 34e9a24da8..a26ee2a01b 100644 --- a/style-dictionary/visual-refresh/metadata/borders.ts +++ b/style-dictionary/visual-refresh/metadata/borders.ts @@ -144,11 +144,6 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, - borderWidthFlashbarInlineStart: { - description: 'The inline-start border width of flash messages in flashbars.', - public: true, - themeable: true, - }, borderWidthAlertInlineEnd: { description: 'The inline-end border width of alerts.', public: true, diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts index db718e1b58..c52b6282a1 100644 --- a/style-dictionary/visual-refresh/metadata/colors.ts +++ b/style-dictionary/visual-refresh/metadata/colors.ts @@ -246,26 +246,6 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, - colorBackgroundFlashbarSuccess: { - description: 'The background color of success flash messages.', - public: true, - themeable: true, - }, - colorBackgroundFlashbarError: { - description: 'The background color of error flash messages.', - public: true, - themeable: true, - }, - colorBackgroundFlashbarInfo: { - description: 'The background color of info and in-progress flash messages.', - public: true, - themeable: true, - }, - colorBackgroundFlashbarWarning: { - description: 'The background color of warning flash messages.', - public: true, - themeable: true, - }, colorBackgroundNotificationGrey: { description: 'Background color for grey notifications. For example: grey badges.', public: true,