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/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/style-dictionary/one-theme/contexts/flashbar-warning.ts b/style-dictionary/one-theme/contexts/flashbar-warning.ts index 5bbd2b8c8b..7de24a6150 100644 --- a/style-dictionary/one-theme/contexts/flashbar-warning.ts +++ b/style-dictionary/one-theme/contexts/flashbar-warning.ts @@ -32,9 +32,9 @@ const tokens: StyleDictionary.ColorsDictionary = { // Link colorTextLinkInvertedHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - // Dismiss button - colorTextInteractiveDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorTextInteractiveHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, + // Dismiss button (flashbar-icon variant reads colorTextInteractiveInverted*) + colorTextInteractiveInvertedDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, + colorTextInteractiveInvertedHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, // Dividers colorBorderDividerDefault: { light: '{colorNeutral350}', dark: '{colorNeutral600}' }, diff --git a/style-dictionary/one-theme/contexts/flashbar.ts b/style-dictionary/one-theme/contexts/flashbar.ts index c19d108acf..4c16006d8f 100644 --- a/style-dictionary/one-theme/contexts/flashbar.ts +++ b/style-dictionary/one-theme/contexts/flashbar.ts @@ -32,9 +32,9 @@ const tokens: StyleDictionary.ColorsDictionary = { // Link colorTextLinkInvertedHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, - // Dismiss button - colorTextInteractiveDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, - colorTextInteractiveHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, + // Dismiss button (flashbar-icon variant reads colorTextInteractiveInverted*) + colorTextInteractiveInvertedDefault: { light: '{colorNeutral800}', dark: '{colorNeutral100}' }, + colorTextInteractiveInvertedHover: { light: '{colorNeutral950}', dark: '{colorWhite}' }, // Dividers colorBorderDividerDefault: { light: '{colorNeutral350}', dark: '{colorNeutral600}' }, diff --git a/style-dictionary/visual-refresh/contexts/flashbar-warning.ts b/style-dictionary/visual-refresh/contexts/flashbar-warning.ts index 822977e9fe..4530cfe3bf 100644 --- a/style-dictionary/visual-refresh/contexts/flashbar-warning.ts +++ b/style-dictionary/visual-refresh/contexts/flashbar-warning.ts @@ -21,10 +21,10 @@ const baseTokens: StyleDictionary.ColorsDictionary = { // (matching the surrounding text); only one-theme opts into the status color. colorTextStatusWarning: '{colorTextNotificationYellow}', - // Dismiss button (flashbar-icon variant) now reads colorTextInteractive*. + // Dismiss button (flashbar-icon variant) reads colorTextInteractiveInverted*. // The warning flash is light in both modes, so pin to dark values for contrast. - colorTextInteractiveDefault: '{colorNeutral650}', - colorTextInteractiveHover: '{colorNeutral950}', + 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..e1acbf47b0 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}',