diff --git a/pages/box/visual-accent.page.tsx b/pages/box/visual-accent.page.tsx index 906f75144c..e8c18d2b38 100644 --- a/pages/box/visual-accent.page.tsx +++ b/pages/box/visual-accent.page.tsx @@ -20,17 +20,8 @@ const ALL_VARIANTS: BoxProps.VisualAccent.Color[] = [ 'red', 'green', 'yellow', - - 'amber', 'teal', 'purple', - 'blue', - 'magenta', - 'lime', - - 'violet', - - 'pink', 'orange', ]; diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index ddfdd5a2ce..7320636eea 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -226,19 +226,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-background-toggle-button-normal-pressed": "#eaeded", "color-background-toggle-checked-disabled": "#99cbe4", "color-background-toggle-default": "#545b64", - "color-background-visual-accent-amber": "rgba(255, 232, 189, 0.7)", - "color-background-visual-accent-blue": "rgba(209, 241, 255, 0.6)", "color-background-visual-accent-green": "#d9ffd6", "color-background-visual-accent-grey": "#eaeded", "color-background-visual-accent-indigo": "#dbe4ff", - "color-background-visual-accent-lime": "#ebffcc", - "color-background-visual-accent-magenta": "rgba(255, 224, 251, 0.6)", "color-background-visual-accent-orange": "rgba(255, 224, 214, 0.6)", - "color-background-visual-accent-pink": "rgba(255, 224, 240, 0.7)", "color-background-visual-accent-purple": "rgba(242, 229, 255, 0.6)", "color-background-visual-accent-red": "#ffe0e0", "color-background-visual-accent-teal": "rgba(204, 255, 252, 0.7)", - "color-background-visual-accent-violet": "rgba(232, 229, 255, 0.6)", "color-background-visual-accent-yellow": "#fffbbd", "color-black": "#000000", "color-board-placeholder-active": "#d5dbdb", @@ -527,7 +521,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-info-800": "#003b8f", "color-info-950": "#00204d", "color-item-selected": "#0073bb", - "color-lime-100": "#ebffcc", "color-neutral-100": "#fafafa", "color-neutral-1000": "#06080a", "color-neutral-150": "#f6f6f9", @@ -727,19 +720,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-text-top-navigation-title": "#16191f", "color-text-tutorial-hotspot-default": "#0073bb", "color-text-tutorial-hotspot-hover": "#0a4a74", - "color-text-visual-accent-amber": "#9e3700", - "color-text-visual-accent-blue": "#006ce0", "color-text-visual-accent-green": "#1d8102", "color-text-visual-accent-grey": "#1a2029", "color-text-visual-accent-indigo": "#003b8f", - "color-text-visual-accent-lime": "#007000", - "color-text-visual-accent-magenta": "#b2008f", "color-text-visual-accent-orange": "#a82700", - "color-text-visual-accent-pink": "#bb005d", "color-text-visual-accent-purple": "#962eff", "color-text-visual-accent-red": "#c20000", "color-text-visual-accent-teal": "#008077", - "color-text-visual-accent-violet": "#6842ff", "color-text-visual-accent-yellow": "#906806", "color-transparent": "transparent", "color-tree-view-connector-line": "#879596", @@ -1252,19 +1239,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-background-toggle-button-normal-pressed": "#16191f", "color-background-toggle-checked-disabled": "#0a4a74", "color-background-toggle-default": "#879596", - "color-background-visual-accent-amber": "rgba(250, 111, 0, 0.2)", - "color-background-visual-accent-blue": "rgba(0, 153, 255, 0.2)", "color-background-visual-accent-green": "rgba(43, 181, 52, 0.2)", "color-background-visual-accent-grey": "#414750", "color-background-visual-accent-indigo": "rgba(92, 127, 255, 0.2)", - "color-background-visual-accent-lime": "rgba(49, 184, 0, 0.2)", - "color-background-visual-accent-magenta": "rgba(255, 26, 224, 0.2)", "color-background-visual-accent-orange": "rgba(255, 75, 20, 0.2)", - "color-background-visual-accent-pink": "rgba(255, 51, 153, 0.2)", "color-background-visual-accent-purple": "rgba(173, 92, 255, 0.2)", "color-background-visual-accent-red": "rgba(255, 61, 61, 0.2)", "color-background-visual-accent-teal": "rgba(0, 173, 162, 0.2)", - "color-background-visual-accent-violet": "rgba(133, 117, 255, 0.2)", "color-background-visual-accent-yellow": "rgba(251, 211, 50, 0.2)", "color-black": "#000000", "color-board-placeholder-active": "#687078", @@ -1553,7 +1534,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-info-800": "#003b8f", "color-info-950": "#00204d", "color-item-selected": "#44b9d6", - "color-lime-100": "#ebffcc", "color-neutral-100": "#fafafa", "color-neutral-1000": "#06080a", "color-neutral-150": "#f6f6f9", @@ -1753,19 +1733,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-text-top-navigation-title": "#fafafa", "color-text-tutorial-hotspot-default": "#44b9d6", "color-text-tutorial-hotspot-hover": "#99cbe4", - "color-text-visual-accent-amber": "#ffbb45", - "color-text-visual-accent-blue": "#75cfff", "color-text-visual-accent-green": "#aeffa8", "color-text-visual-accent-grey": "#d5dbdb", "color-text-visual-accent-indigo": "#44b9d6", - "color-text-visual-accent-lime": "#acff2e", - "color-text-visual-accent-magenta": "#ff57e9", "color-text-visual-accent-orange": "#ff997a", - "color-text-visual-accent-pink": "#ff99cc", "color-text-visual-accent-purple": "#d4a8ff", "color-text-visual-accent-red": "#ff5d64", "color-text-visual-accent-teal": "#00f5e4", - "color-text-visual-accent-violet": "#b2a8ff", "color-text-visual-accent-yellow": "#fef571", "color-transparent": "transparent", "color-tree-view-connector-line": "#d5dbdb", @@ -2278,19 +2252,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-background-toggle-button-normal-pressed": "#eaeded", "color-background-toggle-checked-disabled": "#99cbe4", "color-background-toggle-default": "#545b64", - "color-background-visual-accent-amber": "rgba(255, 232, 189, 0.7)", - "color-background-visual-accent-blue": "rgba(209, 241, 255, 0.6)", "color-background-visual-accent-green": "#d9ffd6", "color-background-visual-accent-grey": "#eaeded", "color-background-visual-accent-indigo": "#dbe4ff", - "color-background-visual-accent-lime": "#ebffcc", - "color-background-visual-accent-magenta": "rgba(255, 224, 251, 0.6)", "color-background-visual-accent-orange": "rgba(255, 224, 214, 0.6)", - "color-background-visual-accent-pink": "rgba(255, 224, 240, 0.7)", "color-background-visual-accent-purple": "rgba(242, 229, 255, 0.6)", "color-background-visual-accent-red": "#ffe0e0", "color-background-visual-accent-teal": "rgba(204, 255, 252, 0.7)", - "color-background-visual-accent-violet": "rgba(232, 229, 255, 0.6)", "color-background-visual-accent-yellow": "#fffbbd", "color-black": "#000000", "color-board-placeholder-active": "#d5dbdb", @@ -2579,7 +2547,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-info-800": "#003b8f", "color-info-950": "#00204d", "color-item-selected": "#0073bb", - "color-lime-100": "#ebffcc", "color-neutral-100": "#fafafa", "color-neutral-1000": "#06080a", "color-neutral-150": "#f6f6f9", @@ -2779,19 +2746,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-text-top-navigation-title": "#16191f", "color-text-tutorial-hotspot-default": "#0073bb", "color-text-tutorial-hotspot-hover": "#0a4a74", - "color-text-visual-accent-amber": "#9e3700", - "color-text-visual-accent-blue": "#006ce0", "color-text-visual-accent-green": "#1d8102", "color-text-visual-accent-grey": "#1a2029", "color-text-visual-accent-indigo": "#003b8f", - "color-text-visual-accent-lime": "#007000", - "color-text-visual-accent-magenta": "#b2008f", "color-text-visual-accent-orange": "#a82700", - "color-text-visual-accent-pink": "#bb005d", "color-text-visual-accent-purple": "#962eff", "color-text-visual-accent-red": "#c20000", "color-text-visual-accent-teal": "#008077", - "color-text-visual-accent-violet": "#6842ff", "color-text-visual-accent-yellow": "#906806", "color-transparent": "transparent", "color-tree-view-connector-line": "#879596", @@ -3304,19 +3265,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-background-toggle-button-normal-pressed": "#eaeded", "color-background-toggle-checked-disabled": "#99cbe4", "color-background-toggle-default": "#545b64", - "color-background-visual-accent-amber": "rgba(255, 232, 189, 0.7)", - "color-background-visual-accent-blue": "rgba(209, 241, 255, 0.6)", "color-background-visual-accent-green": "#d9ffd6", "color-background-visual-accent-grey": "#eaeded", "color-background-visual-accent-indigo": "#dbe4ff", - "color-background-visual-accent-lime": "#ebffcc", - "color-background-visual-accent-magenta": "rgba(255, 224, 251, 0.6)", "color-background-visual-accent-orange": "rgba(255, 224, 214, 0.6)", - "color-background-visual-accent-pink": "rgba(255, 224, 240, 0.7)", "color-background-visual-accent-purple": "rgba(242, 229, 255, 0.6)", "color-background-visual-accent-red": "#ffe0e0", "color-background-visual-accent-teal": "rgba(204, 255, 252, 0.7)", - "color-background-visual-accent-violet": "rgba(232, 229, 255, 0.6)", "color-background-visual-accent-yellow": "#fffbbd", "color-black": "#000000", "color-board-placeholder-active": "#d5dbdb", @@ -3605,7 +3560,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-info-800": "#003b8f", "color-info-950": "#00204d", "color-item-selected": "#0073bb", - "color-lime-100": "#ebffcc", "color-neutral-100": "#fafafa", "color-neutral-1000": "#06080a", "color-neutral-150": "#f6f6f9", @@ -3805,19 +3759,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-text-top-navigation-title": "#16191f", "color-text-tutorial-hotspot-default": "#0073bb", "color-text-tutorial-hotspot-hover": "#0a4a74", - "color-text-visual-accent-amber": "#9e3700", - "color-text-visual-accent-blue": "#006ce0", "color-text-visual-accent-green": "#1d8102", "color-text-visual-accent-grey": "#1a2029", "color-text-visual-accent-indigo": "#003b8f", - "color-text-visual-accent-lime": "#007000", - "color-text-visual-accent-magenta": "#b2008f", "color-text-visual-accent-orange": "#a82700", - "color-text-visual-accent-pink": "#bb005d", "color-text-visual-accent-purple": "#962eff", "color-text-visual-accent-red": "#c20000", "color-text-visual-accent-teal": "#008077", - "color-text-visual-accent-violet": "#6842ff", "color-text-visual-accent-yellow": "#906806", "color-transparent": "transparent", "color-tree-view-connector-line": "#879596", @@ -4330,19 +4278,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-background-toggle-button-normal-pressed": "#d1f1ff", "color-background-toggle-checked-disabled": "#b8e7ff", "color-background-toggle-default": "#424650", - "color-background-visual-accent-amber": "rgba(255, 232, 189, 0.7)", - "color-background-visual-accent-blue": "rgba(209, 241, 255, 0.6)", "color-background-visual-accent-green": "#d9ffd6", "color-background-visual-accent-grey": "#ebebf0", "color-background-visual-accent-indigo": "#dbe4ff", - "color-background-visual-accent-lime": "#ebffcc", - "color-background-visual-accent-magenta": "rgba(255, 224, 251, 0.6)", "color-background-visual-accent-orange": "rgba(255, 224, 214, 0.6)", - "color-background-visual-accent-pink": "rgba(255, 224, 240, 0.7)", "color-background-visual-accent-purple": "rgba(242, 229, 255, 0.6)", "color-background-visual-accent-red": "#ffe0e0", "color-background-visual-accent-teal": "rgba(204, 255, 252, 0.7)", - "color-background-visual-accent-violet": "rgba(232, 229, 255, 0.6)", "color-background-visual-accent-yellow": "#fffbbd", "color-black": "#000000", "color-board-placeholder-active": "#ebebf0", @@ -4631,7 +4573,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-info-800": "#003b8f", "color-info-950": "#00204d", "color-item-selected": "#006ce0", - "color-lime-100": "#ebffcc", "color-neutral-100": "#f9f9fa", "color-neutral-1000": "#06080a", "color-neutral-150": "#f6f6f9", @@ -4831,19 +4772,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-text-top-navigation-title": "#0f141a", "color-text-tutorial-hotspot-default": "#006ce0", "color-text-tutorial-hotspot-hover": "#002b66", - "color-text-visual-accent-amber": "#9e3700", - "color-text-visual-accent-blue": "#006ce0", "color-text-visual-accent-green": "#00802f", "color-text-visual-accent-grey": "#161d26", "color-text-visual-accent-indigo": "#003b8f", - "color-text-visual-accent-lime": "#007000", - "color-text-visual-accent-magenta": "#b2008f", "color-text-visual-accent-orange": "#a82700", - "color-text-visual-accent-pink": "#bb005d", "color-text-visual-accent-purple": "#962eff", "color-text-visual-accent-red": "#c20000", "color-text-visual-accent-teal": "#008077", - "color-text-visual-accent-violet": "#6842ff", "color-text-visual-accent-yellow": "#855900", "color-transparent": "transparent", "color-tree-view-connector-line": "#8c8c94", @@ -5356,19 +5291,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-toggle-button-normal-pressed": "#d1f1ff", "color-background-toggle-checked-disabled": "#b8e7ff", "color-background-toggle-default": "#424650", - "color-background-visual-accent-amber": "rgba(255, 232, 189, 0.7)", - "color-background-visual-accent-blue": "rgba(209, 241, 255, 0.6)", "color-background-visual-accent-green": "#d9ffd6", "color-background-visual-accent-grey": "#ebebf0", "color-background-visual-accent-indigo": "#dbe4ff", - "color-background-visual-accent-lime": "#ebffcc", - "color-background-visual-accent-magenta": "rgba(255, 224, 251, 0.6)", "color-background-visual-accent-orange": "rgba(255, 224, 214, 0.6)", - "color-background-visual-accent-pink": "rgba(255, 224, 240, 0.7)", "color-background-visual-accent-purple": "rgba(242, 229, 255, 0.6)", "color-background-visual-accent-red": "#ffe0e0", "color-background-visual-accent-teal": "rgba(204, 255, 252, 0.7)", - "color-background-visual-accent-violet": "rgba(232, 229, 255, 0.6)", "color-background-visual-accent-yellow": "#fffbbd", "color-black": "#000000", "color-board-placeholder-active": "#ebebf0", @@ -5657,7 +5586,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-info-800": "#003b8f", "color-info-950": "#00204d", "color-item-selected": "#006ce0", - "color-lime-100": "#ebffcc", "color-neutral-100": "#f9f9fa", "color-neutral-1000": "#06080a", "color-neutral-150": "#f6f6f9", @@ -5857,19 +5785,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-top-navigation-title": "#0f141a", "color-text-tutorial-hotspot-default": "#006ce0", "color-text-tutorial-hotspot-hover": "#002b66", - "color-text-visual-accent-amber": "#9e3700", - "color-text-visual-accent-blue": "#006ce0", "color-text-visual-accent-green": "#00802f", "color-text-visual-accent-grey": "#161d26", "color-text-visual-accent-indigo": "#003b8f", - "color-text-visual-accent-lime": "#007000", - "color-text-visual-accent-magenta": "#b2008f", "color-text-visual-accent-orange": "#a82700", - "color-text-visual-accent-pink": "#bb005d", "color-text-visual-accent-purple": "#962eff", "color-text-visual-accent-red": "#c20000", "color-text-visual-accent-teal": "#008077", - "color-text-visual-accent-violet": "#6842ff", "color-text-visual-accent-yellow": "#855900", "color-transparent": "transparent", "color-tree-view-connector-line": "#8c8c94", @@ -6382,19 +6304,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-toggle-button-normal-pressed": "#333843", "color-background-toggle-checked-disabled": "#002b66", "color-background-toggle-default": "#8c8c94", - "color-background-visual-accent-amber": "rgba(250, 111, 0, 0.2)", - "color-background-visual-accent-blue": "rgba(0, 153, 255, 0.2)", "color-background-visual-accent-green": "rgba(43, 181, 52, 0.2)", "color-background-visual-accent-grey": "#333843", "color-background-visual-accent-indigo": "rgba(92, 127, 255, 0.2)", - "color-background-visual-accent-lime": "rgba(49, 184, 0, 0.2)", - "color-background-visual-accent-magenta": "rgba(255, 26, 224, 0.2)", "color-background-visual-accent-orange": "rgba(255, 75, 20, 0.2)", - "color-background-visual-accent-pink": "rgba(255, 51, 153, 0.2)", "color-background-visual-accent-purple": "rgba(173, 92, 255, 0.2)", "color-background-visual-accent-red": "rgba(255, 61, 61, 0.2)", "color-background-visual-accent-teal": "rgba(0, 173, 162, 0.2)", - "color-background-visual-accent-violet": "rgba(133, 117, 255, 0.2)", "color-background-visual-accent-yellow": "rgba(251, 211, 50, 0.2)", "color-black": "#000000", "color-board-placeholder-active": "#656871", @@ -6683,7 +6599,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-info-800": "#003b8f", "color-info-950": "#00204d", "color-item-selected": "#42b4ff", - "color-lime-100": "#ebffcc", "color-neutral-100": "#f9f9fa", "color-neutral-1000": "#06080a", "color-neutral-150": "#f6f6f9", @@ -6883,19 +6798,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-top-navigation-title": "#f9f9fa", "color-text-tutorial-hotspot-default": "#42b4ff", "color-text-tutorial-hotspot-hover": "#75cfff", - "color-text-visual-accent-amber": "#ffbb45", - "color-text-visual-accent-blue": "#75cfff", "color-text-visual-accent-green": "#aeffa8", "color-text-visual-accent-grey": "#dedee3", "color-text-visual-accent-indigo": "#75cfff", - "color-text-visual-accent-lime": "#acff2e", - "color-text-visual-accent-magenta": "#ff57e9", "color-text-visual-accent-orange": "#ff997a", - "color-text-visual-accent-pink": "#ff99cc", "color-text-visual-accent-purple": "#d4a8ff", "color-text-visual-accent-red": "#ff7a7a", "color-text-visual-accent-teal": "#00f5e4", - "color-text-visual-accent-violet": "#b2a8ff", "color-text-visual-accent-yellow": "#fef571", "color-transparent": "transparent", "color-tree-view-connector-line": "#dedee3", @@ -7408,19 +7317,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-toggle-button-normal-pressed": "#333843", "color-background-toggle-checked-disabled": "#002b66", "color-background-toggle-default": "#8c8c94", - "color-background-visual-accent-amber": "rgba(250, 111, 0, 0.2)", - "color-background-visual-accent-blue": "rgba(0, 153, 255, 0.2)", "color-background-visual-accent-green": "rgba(43, 181, 52, 0.2)", "color-background-visual-accent-grey": "#333843", "color-background-visual-accent-indigo": "rgba(92, 127, 255, 0.2)", - "color-background-visual-accent-lime": "rgba(49, 184, 0, 0.2)", - "color-background-visual-accent-magenta": "rgba(255, 26, 224, 0.2)", "color-background-visual-accent-orange": "rgba(255, 75, 20, 0.2)", - "color-background-visual-accent-pink": "rgba(255, 51, 153, 0.2)", "color-background-visual-accent-purple": "rgba(173, 92, 255, 0.2)", "color-background-visual-accent-red": "rgba(255, 61, 61, 0.2)", "color-background-visual-accent-teal": "rgba(0, 173, 162, 0.2)", - "color-background-visual-accent-violet": "rgba(133, 117, 255, 0.2)", "color-background-visual-accent-yellow": "rgba(251, 211, 50, 0.2)", "color-black": "#000000", "color-board-placeholder-active": "#656871", @@ -7709,7 +7612,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-info-800": "#003b8f", "color-info-950": "#00204d", "color-item-selected": "#42b4ff", - "color-lime-100": "#ebffcc", "color-neutral-100": "#f9f9fa", "color-neutral-1000": "#06080a", "color-neutral-150": "#f6f6f9", @@ -7909,19 +7811,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-top-navigation-title": "#f9f9fa", "color-text-tutorial-hotspot-default": "#42b4ff", "color-text-tutorial-hotspot-hover": "#75cfff", - "color-text-visual-accent-amber": "#ffbb45", - "color-text-visual-accent-blue": "#75cfff", "color-text-visual-accent-green": "#aeffa8", "color-text-visual-accent-grey": "#dedee3", "color-text-visual-accent-indigo": "#75cfff", - "color-text-visual-accent-lime": "#acff2e", - "color-text-visual-accent-magenta": "#ff57e9", "color-text-visual-accent-orange": "#ff997a", - "color-text-visual-accent-pink": "#ff99cc", "color-text-visual-accent-purple": "#d4a8ff", "color-text-visual-accent-red": "#ff7a7a", "color-text-visual-accent-teal": "#00f5e4", - "color-text-visual-accent-violet": "#b2a8ff", "color-text-visual-accent-yellow": "#fef571", "color-transparent": "transparent", "color-tree-view-connector-line": "#dedee3", diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap index 8c7ac5b5a1..b1f9c6ca25 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap @@ -5229,20 +5229,14 @@ This is a One Theme only feature and must not be used in VR.", "name": "BoxProps.VisualAccent.Color", "type": "union", "values": [ - "blue", "green", "grey", "indigo", - "lime", - "magenta", "orange", - "pink", "purple", "red", "teal", - "violet", "yellow", - "amber", ], }, "name": "color", diff --git a/src/box/__tests__/box.test.tsx b/src/box/__tests__/box.test.tsx index 5117f998b2..d07af28b85 100644 --- a/src/box/__tests__/box.test.tsx +++ b/src/box/__tests__/box.test.tsx @@ -199,8 +199,8 @@ describe('Box', () => { 'green', 'orange', 'purple', - 'lime', 'grey', + 'teal', ]; colors.forEach(color => { const boxWrapper = renderBox({ visualAccent: { color } }); diff --git a/src/box/interfaces.ts b/src/box/interfaces.ts index 8c3b5f1fd0..515ff570e8 100644 --- a/src/box/interfaces.ts +++ b/src/box/interfaces.ts @@ -187,6 +187,9 @@ export namespace BoxProps { * The coordinated background and foreground color pair applied to the accent wrapper. * Each color works in both light and dark modes. * + * Use one of the following color options: `indigo`, `yellow`, `red`, `green`, `grey`, + * `purple`, `orange`, or `teal`. + * * The background color is applied directly to the wrapper. The foreground color is applied * as the wrapper's CSS `color` and is therefore only picked up by content that inherits the * current color, such as an `Icon` or a nested `Box` with `color="inherit"`. Content that @@ -215,21 +218,7 @@ export namespace BoxProps { } export namespace VisualAccent { - export type Color = - | 'red' - | 'yellow' - | 'indigo' - | 'green' - | 'orange' - | 'purple' - | 'lime' - | 'grey' - | 'teal' - | 'blue' - | 'violet' - | 'magenta' - | 'pink' - | 'amber'; + export type Color = 'red' | 'yellow' | 'indigo' | 'green' | 'orange' | 'purple' | 'grey' | 'teal'; export type AspectRatio = 'auto' | 'equal'; export type BorderRadius = 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' | 'full'; } diff --git a/src/box/visual-accent.scss b/src/box/visual-accent.scss index cdba30f1de..8944dc6f7b 100644 --- a/src/box/visual-accent.scss +++ b/src/box/visual-accent.scss @@ -109,10 +109,6 @@ $accent-colors: ( background: awsui.$color-background-visual-accent-purple, foreground: awsui.$color-text-visual-accent-purple, ), - 'lime': ( - background: awsui.$color-background-visual-accent-lime, - foreground: awsui.$color-text-visual-accent-lime, - ), 'grey': ( background: awsui.$color-background-visual-accent-grey, foreground: awsui.$color-text-visual-accent-grey, @@ -121,26 +117,6 @@ $accent-colors: ( background: awsui.$color-background-visual-accent-teal, foreground: awsui.$color-text-visual-accent-teal, ), - 'blue': ( - background: awsui.$color-background-visual-accent-blue, - foreground: awsui.$color-text-visual-accent-blue, - ), - 'violet': ( - background: awsui.$color-background-visual-accent-violet, - foreground: awsui.$color-text-visual-accent-violet, - ), - 'magenta': ( - background: awsui.$color-background-visual-accent-magenta, - foreground: awsui.$color-text-visual-accent-magenta, - ), - 'pink': ( - background: awsui.$color-background-visual-accent-pink, - foreground: awsui.$color-text-visual-accent-pink, - ), - 'amber': ( - background: awsui.$color-background-visual-accent-amber, - foreground: awsui.$color-text-visual-accent-amber, - ), ); @each $accent, $colors in $accent-colors {