diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index a6871c2c03..e6f72b92be 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -76,6 +76,7 @@ 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-feedback-dialog": "#f1faff", "color-background-home-header": "#000000", "color-background-input-default": "#ffffff", "color-background-input-disabled": "#eaeded", @@ -162,6 +163,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-border-dropdown-item-selected": "#eaeded", "color-border-dropdown-item-top": "#eaeded", "color-border-editable-cell-hover": "#879596", + "color-border-feedback-dialog": "#0073bb", "color-border-input-default": "#687078", "color-border-input-disabled": "#eaeded", "color-border-input-focused": "#0073bb", @@ -735,6 +737,7 @@ 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-feedback-dialog": "#12293b", "color-background-home-header": "#000000", "color-background-input-default": "#1a2029", "color-background-input-disabled": "#414750", @@ -821,6 +824,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-border-dropdown-item-selected": "#414750", "color-border-dropdown-item-top": "#414750", "color-border-editable-cell-hover": "#879596", + "color-border-feedback-dialog": "#00a1c9", "color-border-input-default": "#879596", "color-border-input-disabled": "#414750", "color-border-input-focused": "#00a1c9", @@ -1394,6 +1398,7 @@ 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-feedback-dialog": "#f1faff", "color-background-home-header": "#000000", "color-background-input-default": "#ffffff", "color-background-input-disabled": "#eaeded", @@ -1480,6 +1485,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-border-dropdown-item-selected": "#eaeded", "color-border-dropdown-item-top": "#eaeded", "color-border-editable-cell-hover": "#879596", + "color-border-feedback-dialog": "#0073bb", "color-border-input-default": "#687078", "color-border-input-disabled": "#eaeded", "color-border-input-focused": "#0073bb", @@ -2053,6 +2059,7 @@ 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-feedback-dialog": "#f1faff", "color-background-home-header": "#000000", "color-background-input-default": "#ffffff", "color-background-input-disabled": "#eaeded", @@ -2139,6 +2146,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-border-dropdown-item-selected": "#eaeded", "color-border-dropdown-item-top": "#eaeded", "color-border-editable-cell-hover": "#879596", + "color-border-feedback-dialog": "#0073bb", "color-border-input-default": "#687078", "color-border-input-disabled": "#eaeded", "color-border-input-focused": "#0073bb", @@ -2712,6 +2720,7 @@ 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-feedback-dialog": "#f0fbff", "color-background-home-header": "#0f141a", "color-background-input-default": "#ffffff", "color-background-input-disabled": "#ebebf0", @@ -2798,6 +2807,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-border-dropdown-item-selected": "#006ce0", "color-border-dropdown-item-top": "transparent", "color-border-editable-cell-hover": "#8c8c94", + "color-border-feedback-dialog": "#006ce0", "color-border-input-default": "#8c8c94", "color-border-input-disabled": "#ebebf0", "color-border-input-focused": "#002b66", @@ -3371,6 +3381,7 @@ 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-feedback-dialog": "#f0fbff", "color-background-home-header": "#0f141a", "color-background-input-default": "#ffffff", "color-background-input-disabled": "#ebebf0", @@ -3457,6 +3468,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-border-dropdown-item-selected": "#006ce0", "color-border-dropdown-item-top": "transparent", "color-border-editable-cell-hover": "#8c8c94", + "color-border-feedback-dialog": "#006ce0", "color-border-input-default": "#8c8c94", "color-border-input-disabled": "#ebebf0", "color-border-input-focused": "#002b66", @@ -4030,6 +4042,7 @@ 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-feedback-dialog": "#001129", "color-background-home-header": "#0f141a", "color-background-input-default": "#0f141a", "color-background-input-disabled": "#1b232d", @@ -4116,6 +4129,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-border-dropdown-item-selected": "#42b4ff", "color-border-dropdown-item-top": "transparent", "color-border-editable-cell-hover": "#656871", + "color-border-feedback-dialog": "#42b4ff", "color-border-input-default": "#656871", "color-border-input-disabled": "#1b232d", "color-border-input-focused": "#b8e7ff", @@ -4689,6 +4703,7 @@ 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-feedback-dialog": "#001129", "color-background-home-header": "#0f141a", "color-background-input-default": "#161d26", "color-background-input-disabled": "#1b232d", @@ -4775,6 +4790,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-border-dropdown-item-selected": "#42b4ff", "color-border-dropdown-item-top": "transparent", "color-border-editable-cell-hover": "#656871", + "color-border-feedback-dialog": "#42b4ff", "color-border-input-default": "#656871", "color-border-input-disabled": "#1b232d", "color-border-input-focused": "#b8e7ff", 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 154a4edfb4..a8a3fc2cf4 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap @@ -232,6 +232,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#f2f3f3", }, }, + "color-background-feedback-dialog": { + "$description": "The background color of the feedback dialog.", + "$value": { + "dark": "#12293b", + "light": "#f1faff", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -554,6 +561,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#879596", }, }, + "color-border-feedback-dialog": { + "$description": "The border color of the feedback dialog.", + "$value": { + "dark": "#00a1c9", + "light": "#0073bb", + }, + }, "color-border-input-default": { "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.", "$value": { @@ -2757,6 +2771,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#f2f3f3", }, }, + "color-background-feedback-dialog": { + "$description": "The background color of the feedback dialog.", + "$value": { + "dark": "#12293b", + "light": "#f1faff", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -3079,6 +3100,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#879596", }, }, + "color-border-feedback-dialog": { + "$description": "The border color of the feedback dialog.", + "$value": { + "dark": "#00a1c9", + "light": "#0073bb", + }, + }, "color-border-input-default": { "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.", "$value": { @@ -5282,6 +5310,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#f2f3f3", }, }, + "color-background-feedback-dialog": { + "$description": "The background color of the feedback dialog.", + "$value": { + "dark": "#12293b", + "light": "#f1faff", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -5604,6 +5639,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#879596", }, }, + "color-border-feedback-dialog": { + "$description": "The border color of the feedback dialog.", + "$value": { + "dark": "#00a1c9", + "light": "#0073bb", + }, + }, "color-border-input-default": { "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.", "$value": { @@ -7807,6 +7849,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#f2f3f3", }, }, + "color-background-feedback-dialog": { + "$description": "The background color of the feedback dialog.", + "$value": { + "dark": "#12293b", + "light": "#f1faff", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -8129,6 +8178,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#879596", }, }, + "color-border-feedback-dialog": { + "$description": "The border color of the feedback dialog.", + "$value": { + "dark": "#00a1c9", + "light": "#0073bb", + }, + }, "color-border-input-default": { "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.", "$value": { @@ -10332,6 +10388,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#f2f3f3", }, }, + "color-background-feedback-dialog": { + "$description": "The background color of the feedback dialog.", + "$value": { + "dark": "#12293b", + "light": "#f1faff", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -10654,6 +10717,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#879596", }, }, + "color-border-feedback-dialog": { + "$description": "The border color of the feedback dialog.", + "$value": { + "dark": "#00a1c9", + "light": "#0073bb", + }, + }, "color-border-input-default": { "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.", "$value": { @@ -12857,6 +12927,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#414750", }, }, + "color-background-feedback-dialog": { + "$description": "The background color of the feedback dialog.", + "$value": { + "dark": "#12293b", + "light": "#12293b", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -13179,6 +13256,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#879596", }, }, + "color-border-feedback-dialog": { + "$description": "The border color of the feedback dialog.", + "$value": { + "dark": "#00a1c9", + "light": "#00a1c9", + }, + }, "color-border-input-default": { "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.", "$value": { @@ -15382,6 +15466,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#f2f3f3", }, }, + "color-background-feedback-dialog": { + "$description": "The background color of the feedback dialog.", + "$value": { + "dark": "#12293b", + "light": "#f1faff", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -15704,6 +15795,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#879596", }, }, + "color-border-feedback-dialog": { + "$description": "The border color of the feedback dialog.", + "$value": { + "dark": "#00a1c9", + "light": "#0073bb", + }, + }, "color-border-input-default": { "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.", "$value": { @@ -17912,6 +18010,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#f3f3f7", }, }, + "color-background-feedback-dialog": { + "$description": "The background color of the feedback dialog.", + "$value": { + "dark": "#001129", + "light": "#f0fbff", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -18234,6 +18339,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#8c8c94", }, }, + "color-border-feedback-dialog": { + "$description": "The border color of the feedback dialog.", + "$value": { + "dark": "#42b4ff", + "light": "#006ce0", + }, + }, "color-border-input-default": { "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.", "$value": { @@ -20437,6 +20549,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#131920", }, }, + "color-background-feedback-dialog": { + "$description": "The background color of the feedback dialog.", + "$value": { + "dark": "#001129", + "light": "#001129", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -20759,6 +20878,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#656871", }, }, + "color-border-feedback-dialog": { + "$description": "The border color of the feedback dialog.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, "color-border-input-default": { "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.", "$value": { @@ -22962,6 +23088,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#f3f3f7", }, }, + "color-background-feedback-dialog": { + "$description": "The background color of the feedback dialog.", + "$value": { + "dark": "#001129", + "light": "#f0fbff", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -23284,6 +23417,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#8c8c94", }, }, + "color-border-feedback-dialog": { + "$description": "The border color of the feedback dialog.", + "$value": { + "dark": "#42b4ff", + "light": "#006ce0", + }, + }, "color-border-input-default": { "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.", "$value": { @@ -25487,6 +25627,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#f3f3f7", }, }, + "color-background-feedback-dialog": { + "$description": "The background color of the feedback dialog.", + "$value": { + "dark": "#001129", + "light": "#f0fbff", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -25809,6 +25956,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#8c8c94", }, }, + "color-border-feedback-dialog": { + "$description": "The border color of the feedback dialog.", + "$value": { + "dark": "#42b4ff", + "light": "#006ce0", + }, + }, "color-border-input-default": { "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.", "$value": { @@ -28012,6 +28166,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#f3f3f7", }, }, + "color-background-feedback-dialog": { + "$description": "The background color of the feedback dialog.", + "$value": { + "dark": "#001129", + "light": "#f0fbff", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -28334,6 +28495,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#8c8c94", }, }, + "color-border-feedback-dialog": { + "$description": "The border color of the feedback dialog.", + "$value": { + "dark": "#42b4ff", + "light": "#006ce0", + }, + }, "color-border-input-default": { "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.", "$value": { @@ -30537,6 +30705,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#131920", }, }, + "color-background-feedback-dialog": { + "$description": "The background color of the feedback dialog.", + "$value": { + "dark": "#001129", + "light": "#001129", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -30859,6 +31034,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#656871", }, }, + "color-border-feedback-dialog": { + "$description": "The border color of the feedback dialog.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, "color-border-input-default": { "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.", "$value": { @@ -33062,6 +33244,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#131920", }, }, + "color-background-feedback-dialog": { + "$description": "The background color of the feedback dialog.", + "$value": { + "dark": "#001129", + "light": "#001129", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -33384,6 +33573,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#656871", }, }, + "color-border-feedback-dialog": { + "$description": "The border color of the feedback dialog.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, "color-border-input-default": { "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.", "$value": { @@ -35587,6 +35783,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#f3f3f7", }, }, + "color-background-feedback-dialog": { + "$description": "The background color of the feedback dialog.", + "$value": { + "dark": "#001129", + "light": "#f0fbff", + }, + }, "color-background-home-header": { "$description": "The background color of the home header, displayed on the Service's home page.", "$value": { @@ -35909,6 +36112,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#8c8c94", }, }, + "color-border-feedback-dialog": { + "$description": "The border color of the feedback dialog.", + "$value": { + "dark": "#42b4ff", + "light": "#006ce0", + }, + }, "color-border-input-default": { "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.", "$value": { diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index 5309b7baed..ff6373847a 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -307,6 +307,7 @@ export type ColorsTokenName = | 'colorBackgroundSliderWarningPressed' | 'colorBackgroundStatusError' | 'colorBackgroundStatusInfo' + | 'colorBackgroundFeedbackDialog' | 'colorBackgroundStatusSuccess' | 'colorBackgroundStatusWarning' | 'colorBackgroundTableHeader' @@ -372,6 +373,7 @@ export type ColorsTokenName = | 'colorBorderStatusInfo' | 'colorBorderStatusSuccess' | 'colorBorderStatusWarning' + | 'colorBorderFeedbackDialog' | 'colorBorderDividerInteractiveDefault' | 'colorBorderTabsDivider' | 'colorBorderTabsShadow' diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts index b8c992a809..44d9f633a7 100644 --- a/style-dictionary/visual-refresh/colors.ts +++ b/style-dictionary/visual-refresh/colors.ts @@ -84,6 +84,7 @@ const tokens: StyleDictionary.ColorsDictionary = { colorBackgroundSliderWarningPressed: { light: '{colorYellow800}', dark: '{colorYellow700}' }, colorBackgroundStatusError: { light: '{colorRed100}', dark: '{colorRed900}' }, colorBackgroundStatusInfo: { light: '{colorBlue100}', dark: '{colorBlue900}' }, + colorBackgroundFeedbackDialog: '{colorBackgroundStatusInfo}', colorBackgroundStatusSuccess: { light: '{colorGreen100}', dark: '{colorGreen900}' }, colorBackgroundStatusWarning: { light: '{colorYellow100}', dark: '{colorYellow900}' }, colorBackgroundTableHeader: '{colorBackgroundContainerHeader}', @@ -151,6 +152,7 @@ const tokens: StyleDictionary.ColorsDictionary = { colorBorderStatusInfo: { light: '{colorBlue600}', dark: '{colorBlue500}' }, colorBorderStatusSuccess: { light: '{colorGreen600}', dark: '{colorGreen500}' }, colorBorderStatusWarning: { light: '{colorYellow800}', dark: '{colorYellow700}' }, + colorBorderFeedbackDialog: '{colorBorderStatusInfo}', colorBorderDividerInteractiveDefault: { light: '{colorGrey500}', dark: '{colorGrey300}' }, colorBorderTabsDivider: { light: '{colorGrey350}', dark: '{colorGrey600}' }, colorBorderTabsShadow: '{colorGreyTransparent}', diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts index 88f198f038..80999816dc 100644 --- a/style-dictionary/visual-refresh/metadata/colors.ts +++ b/style-dictionary/visual-refresh/metadata/colors.ts @@ -227,6 +227,11 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, + colorBackgroundFeedbackDialog: { + description: 'The background color of the feedback dialog.', + public: true, + themeable: true, + }, colorBackgroundStatusSuccess: { description: 'The background color of an item in success state. For example: success alerts.', public: true, @@ -421,6 +426,11 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, + colorBorderFeedbackDialog: { + description: 'The border color of the feedback dialog.', + public: true, + themeable: true, + }, colorBorderTutorial: { description: 'The border color of tutorials in the tutorials list in the tutorial panel.' }, colorForegroundControlDefault: { description: