chore: Consolidate visualAccent color options

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',
 ];
 

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",

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 } });

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';
   }

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 {