diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index 499d927048..db94df7068 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -65,6 +65,7 @@ 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", @@ -125,6 +126,10 @@ 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", @@ -977,6 +982,7 @@ 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", @@ -1037,6 +1043,10 @@ 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", @@ -1889,6 +1899,7 @@ 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", @@ -1949,6 +1960,10 @@ 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", @@ -2801,6 +2816,7 @@ 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", @@ -2861,6 +2877,10 @@ 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", @@ -3713,6 +3733,7 @@ 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", @@ -3773,6 +3794,10 @@ 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", @@ -4625,6 +4650,7 @@ 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", @@ -4685,6 +4711,10 @@ 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", @@ -5537,6 +5567,7 @@ 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", @@ -5597,6 +5628,10 @@ 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", @@ -6449,6 +6484,7 @@ 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", @@ -6509,6 +6545,10 @@ 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 022cf5035f..671dda38fa 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap @@ -157,6 +157,10 @@ 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", @@ -438,6 +442,34 @@ 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": { @@ -3680,6 +3712,10 @@ 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", @@ -3961,6 +3997,34 @@ 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": { @@ -7203,6 +7267,10 @@ 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", @@ -7484,6 +7552,34 @@ 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": { @@ -10726,6 +10822,10 @@ 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", @@ -11007,6 +11107,34 @@ 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": { @@ -13460,8 +13588,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": "#ff5d64", - "light": "#d13212", + "dark": "#fafafa", + "light": "#fafafa", }, }, "color-text-status-inactive": { @@ -13474,15 +13602,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": "#44b9d6", - "light": "#0073bb", + "dark": "#fafafa", + "light": "#fafafa", }, }, "color-text-status-success": { "$description": "The color of success text and icons. For example: success status indicators and success alert icon.", "$value": { - "dark": "#6aaf35", - "light": "#1d8102", + "dark": "#fafafa", + "light": "#fafafa", }, }, "color-text-status-warning": { @@ -14249,6 +14377,10 @@ 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", @@ -14530,6 +14662,34 @@ 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": { @@ -17011,8 +17171,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": "#fbd332", - "light": "#906806", + "dark": "#16191f", + "light": "#16191f", }, }, "color-text-toggle-button-icon-pressed": { @@ -17772,6 +17932,10 @@ 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", @@ -18053,6 +18217,34 @@ 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": { @@ -21295,6 +21487,10 @@ 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", @@ -21576,6 +21772,34 @@ 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": { @@ -24823,6 +25047,10 @@ 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", @@ -25104,6 +25332,34 @@ 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": { @@ -28346,6 +28602,10 @@ 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", @@ -28627,6 +28887,34 @@ 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": { @@ -31869,6 +32157,10 @@ 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", @@ -32150,6 +32442,34 @@ 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": { @@ -35392,6 +35712,10 @@ 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", @@ -35673,6 +35997,34 @@ 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": { @@ -38915,6 +39267,10 @@ 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", @@ -39196,6 +39552,34 @@ 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": { @@ -41649,8 +42033,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": "#ff7a7a", - "light": "#db0000", + "dark": "#f9f9fa", + "light": "#f9f9fa", }, }, "color-text-status-inactive": { @@ -41663,15 +42047,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": "#42b4ff", - "light": "#006ce0", + "dark": "#f9f9fa", + "light": "#f9f9fa", }, }, "color-text-status-success": { "$description": "The color of success text and icons. For example: success status indicators and success alert icon.", "$value": { - "dark": "#2bb534", - "light": "#00802f", + "dark": "#f9f9fa", + "light": "#f9f9fa", }, }, "color-text-status-warning": { @@ -42438,6 +42822,10 @@ 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", @@ -42719,6 +43107,34 @@ 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": { @@ -45200,8 +45616,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": "#fbd332", - "light": "#855900", + "dark": "#0f141a", + "light": "#0f141a", }, }, "color-text-toggle-button-icon-pressed": { @@ -45961,6 +46377,10 @@ 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", @@ -46242,6 +46662,34 @@ 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": { @@ -49484,6 +49932,10 @@ 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", @@ -49765,6 +50217,34 @@ 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": { @@ -53007,6 +53487,10 @@ 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", @@ -53288,6 +53772,34 @@ 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/flashbar/flash.tsx b/src/flashbar/flash.tsx index 22a9ab794a..867a3a57b4 100644 --- a/src/flashbar/flash.tsx +++ b/src/flashbar/flash.tsx @@ -30,7 +30,7 @@ import InternalLiveRegion from '../live-region/internal'; import InternalSpinner from '../spinner/internal'; import { GeneratedAnalyticsMetadataFlashbarDismiss } from './analytics-metadata/interfaces'; import { FlashbarProps } from './interfaces'; -import { getDismissButtonStyles, getFlashStyles } from './style'; +import { getDismissButtonStyles, getFlashIconStyles, getFlashStyles } from './style'; import analyticsSelectors from './analytics-metadata/styles.css.js'; import styles from './styles.css.js'; @@ -238,7 +238,11 @@ export const Flash = React.forwardRef( role="group" aria-labelledby={`${flashIconId} ${flashMessageId}`} > -
+
{icon}
diff --git a/src/flashbar/style.tsx b/src/flashbar/style.tsx index 030b09e371..795b99e995 100644 --- a/src/flashbar/style.tsx +++ b/src/flashbar/style.tsx @@ -35,6 +35,16 @@ export function getCollapsibleFlashStyles(style: FlashbarProps['style'], type: s }; } +export function getFlashIconStyles(style: FlashbarProps['style'] | undefined, type: string = 'info') { + if (SYSTEM !== 'core' || !style) { + return undefined; + } + const styleKey = getStylePropertyKey(type as FlashbarProps.Type); + const color = style?.item?.root?.color && style?.item?.root?.color[styleKey as keyof typeof style.item.root.color]; + + return color ? { color } : undefined; +} + export function getFlashStyles(style: FlashbarProps['style'] | undefined, type: string = 'info') { if (SYSTEM !== 'core' || !style) { return undefined; diff --git a/src/flashbar/styles.scss b/src/flashbar/styles.scss index d93b760a31..4f21d78443 100644 --- a/src/flashbar/styles.scss +++ b/src/flashbar/styles.scss @@ -36,6 +36,7 @@ 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; @@ -146,19 +147,39 @@ } .flash-type-success { - background-color: awsui.$color-background-notification-green; + 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; + } } .flash-type-error { - background-color: awsui.$color-background-notification-red; + 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; + } } .flash-type-info, .flash-type-in-progress { - background-color: awsui.$color-background-notification-blue; + 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; + } } .flash-type-warning { color: awsui.$color-text-notification-yellow; - background-color: awsui.$color-background-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; + } } diff --git a/src/popover/body.tsx b/src/popover/body.tsx index 43295e5ac1..8bca2d3cf1 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 { useUniqueId } from '@cloudscape-design/component-toolkit/internal'; +import { isThemeActive, Theme, useUniqueId } from '@cloudscape-design/component-toolkit/internal'; import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata'; import { ButtonProps } from '../button/interfaces'; @@ -85,6 +85,7 @@ 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 33a3e1dd6c..52153c5fc2 100644 --- a/style-dictionary/one-theme/borders.ts +++ b/style-dictionary/one-theme/borders.ts @@ -14,6 +14,7 @@ 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 e95130f580..1a67512478 100644 --- a/style-dictionary/one-theme/colors.ts +++ b/style-dictionary/one-theme/colors.ts @@ -130,6 +130,12 @@ 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 5d2891d845..f5b97c2917 100644 --- a/style-dictionary/one-theme/contexts/alert.ts +++ b/style-dictionary/one-theme/contexts/alert.ts @@ -6,16 +6,45 @@ import { expandColorDictionary } from '../../utils/index.js'; import { StyleDictionary } from '../../utils/interfaces.js'; const tokens: StyleDictionary.ColorsDictionary = { - 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}' }, + // 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 + 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 54e530d1ba..51e476a1da 100644 --- a/style-dictionary/one-theme/contexts/flashbar-warning.ts +++ b/style-dictionary/one-theme/contexts/flashbar-warning.ts @@ -6,30 +6,54 @@ import { expandColorDictionary } from '../../utils/index.js'; import { StyleDictionary } from '../../utils/interfaces.js'; const tokens: StyleDictionary.ColorsDictionary = { - colorTextNotificationYellow: { light: '{colorNeutral900}', dark: '{colorWhite}' }, - colorTextNotificationDefault: { light: '{colorNeutral900}', dark: '{colorWhite}' }, - colorTextInteractiveInvertedDefault: { light: '{colorNeutral900}', dark: '{colorWhite}' }, - colorBorderDividerDefault: '{colorNeutral900}', + // 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)', - // Button - colorBorderButtonNormalDefault: { light: '{colorNeutral800}', dark: '{colorWhite}' }, - colorBorderButtonNormalHover: { light: '{colorNeutral800}', dark: '{colorWhite}' }, - colorBorderButtonNormalActive: { light: '{colorNeutral800}', dark: '{colorWhite}' }, + // Link + colorTextLinkInvertedHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - 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)' }, + // Dismiss button + colorTextInteractiveInvertedDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, + colorTextInteractiveInvertedHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, + + // Dividers + colorBorderDividerDefault: { light: '{colorNeutral350}', dark: '{colorNeutral600}' }, - colorTextButtonNormalDefault: { light: '{colorNeutral900}', dark: '{colorWhite}' }, - colorTextButtonNormalHover: { light: '{colorNeutral900}', dark: '{colorWhite}' }, - colorTextButtonNormalActive: { light: '{colorNeutral900}', dark: '{colorWhite}' }, + // Notification text + colorTextNotificationYellow: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, + colorTextNotificationDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, + colorTextHeadingSecondary: { light: '{colorNeutral750}', dark: '{colorNeutral300}' }, // Expandable section - 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}' }, + 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}' }, }; 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 3a0f6e6c75..9b279fa4ff 100644 --- a/style-dictionary/one-theme/contexts/flashbar.ts +++ b/style-dictionary/one-theme/contexts/flashbar.ts @@ -6,35 +6,53 @@ import { expandColorDictionary } from '../../utils/index.js'; import { StyleDictionary } from '../../utils/interfaces.js'; const tokens: StyleDictionary.ColorsDictionary = { - 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}', + // 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 + colorTextInteractiveInvertedDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, + colorTextInteractiveInvertedHover: { 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}' }, }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(merge({}, tokens)); diff --git a/style-dictionary/one-theme/shadows.ts b/style-dictionary/one-theme/shadows.ts index d0d4b5085d..ee037400f7 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.10)', + light: '0px 4px 8px rgba(0, 0, 0, 0.05)', 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 3b0f7589c1..45f658826c 100644 --- a/style-dictionary/one-theme/typography.ts +++ b/style-dictionary/one-theme/typography.ts @@ -36,6 +36,7 @@ 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 74ac223885..a7884bb9d6 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -597,6 +597,10 @@ export type ColorsTokenName = | 'colorBackgroundModalOverlay' | 'colorBackgroundNotificationBlue' | 'colorBackgroundNotificationGreen' + | 'colorBackgroundFlashbarSuccess' + | 'colorBackgroundFlashbarError' + | 'colorBackgroundFlashbarInfo' + | 'colorBackgroundFlashbarWarning' | 'colorBackgroundNotificationGrey' | 'colorBackgroundNotificationRed' | 'colorBackgroundNotificationYellow' @@ -997,6 +1001,7 @@ 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 3544f174fa..1695d0848b 100644 --- a/style-dictionary/visual-refresh/borders.ts +++ b/style-dictionary/visual-refresh/borders.ts @@ -59,6 +59,7 @@ 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 f8758c8bb5..a9b15e7a16 100644 --- a/style-dictionary/visual-refresh/colors.ts +++ b/style-dictionary/visual-refresh/colors.ts @@ -83,6 +83,10 @@ 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 5fac6a6e01..e14fe2fdc4 100644 --- a/style-dictionary/visual-refresh/contexts/flashbar-warning.ts +++ b/style-dictionary/visual-refresh/contexts/flashbar-warning.ts @@ -16,6 +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 + colorTextStatusWarning: '{colorTextNotificationYellow}', + // Dismiss button colorTextInteractiveInvertedDefault: '{colorNeutral650}', colorTextInteractiveInvertedHover: '{colorNeutral950}', diff --git a/style-dictionary/visual-refresh/contexts/flashbar.ts b/style-dictionary/visual-refresh/contexts/flashbar.ts index 6d5a88c2dd..a71a831599 100644 --- a/style-dictionary/visual-refresh/contexts/flashbar.ts +++ b/style-dictionary/visual-refresh/contexts/flashbar.ts @@ -27,6 +27,9 @@ export const sharedTokens: StyleDictionary.ColorsDictionary = { colorTextTutorialHotspotDefault: '{colorNeutral300}', colorTextTutorialHotspotHover: '{colorNeutral100}', colorBackgroundInlineCode: 'rgba(0, 0, 0, 0.2)', + 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 a26ee2a01b..34e9a24da8 100644 --- a/style-dictionary/visual-refresh/metadata/borders.ts +++ b/style-dictionary/visual-refresh/metadata/borders.ts @@ -144,6 +144,11 @@ 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 c52b6282a1..db718e1b58 100644 --- a/style-dictionary/visual-refresh/metadata/colors.ts +++ b/style-dictionary/visual-refresh/metadata/colors.ts @@ -246,6 +246,26 @@ 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,