Cleanup

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

docs-ui/src/app/snippets.ts

@@ -1,19 +1,19 @@
 export const surfacesSnippet = `<Flex direction="column" gap="4">
-  <Box bg="neutral-1">
+  <Box bg="neutral">
     <Button variant="secondary">Hello World</Button>
   </Box>
-  <Box bg="neutral-1">
+  <Box bg="neutral">
     <Button variant="secondary">Hello World</Button>
   </Box>
 </Flex>`;
 
-export const adaptiveSnippet = `<Box bg="neutral-1">
+export const adaptiveSnippet = `<Box bg="neutral">
   <Card> {/* automatically set background to neutral-2 */}
     <Button variant="secondary">Button with background set to neutral-3</Button>
   </Card>
 </Box>`;
 
-export const customCardSnippet = `<Box bg="autoIncrement">
+export const customCardSnippet = `<Box bg="neutral">
   <Text>Hello World</Text>
 </Box>`;
 

packages/ui/report.api.md

@@ -1012,14 +1012,7 @@ export const FlexDefinition: {
     'direction',
   ];
   readonly dataAttributes: {
-    readonly bg: readonly [
-      'neutral-1',
-      'neutral-2',
-      'neutral-3',
-      'danger',
-      'warning',
-      'success',
-    ];
+    readonly bg: readonly ['neutral', 'danger', 'warning', 'success'];
   };
 };
 
@@ -1096,14 +1089,7 @@ export const GridDefinition: {
     'py',
   ];
   readonly dataAttributes: {
-    readonly bg: readonly [
-      'neutral-1',
-      'neutral-2',
-      'neutral-3',
-      'danger',
-      'warning',
-      'success',
-    ];
+    readonly bg: readonly ['neutral', 'danger', 'warning', 'success'];
   };
 };
 
@@ -1114,14 +1100,7 @@ export const GridItemDefinition: {
   };
   readonly utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'];
   readonly dataAttributes: {
-    readonly bg: readonly [
-      'neutral-1',
-      'neutral-2',
-      'neutral-3',
-      'danger',
-      'warning',
-      'success',
-    ];
+    readonly bg: readonly ['neutral', 'danger', 'warning', 'success'];
   };
 };
 

packages/ui/src/components/Flex/definition.ts

@@ -45,13 +45,6 @@ export const FlexDefinition = {
     'direction',
   ],
   dataAttributes: {
-    bg: [
-      'neutral-1',
-      'neutral-2',
-      'neutral-3',
-      'danger',
-      'warning',
-      'success',
-    ] as const,
+    bg: ['neutral', 'danger', 'warning', 'success'] as const,
   },
 } as const satisfies ComponentDefinition;

packages/ui/src/components/Grid/definition.ts

@@ -43,14 +43,7 @@ export const GridDefinition = {
     'py',
   ],
   dataAttributes: {
-    bg: [
-      'neutral-1',
-      'neutral-2',
-      'neutral-3',
-      'danger',
-      'warning',
-      'success',
-    ] as const,
+    bg: ['neutral', 'danger', 'warning', 'success'] as const,
   },
 } as const satisfies ComponentDefinition;
 
@@ -64,13 +57,6 @@ export const GridItemDefinition = {
   },
   utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'],
   dataAttributes: {
-    bg: [
-      'neutral-1',
-      'neutral-2',
-      'neutral-3',
-      'danger',
-      'warning',
-      'success',
-    ] as const,
+    bg: ['neutral', 'danger', 'warning', 'success'] as const,
   },
 } as const satisfies ComponentDefinition;

packages/ui/src/hooks/useBg.tsx

@@ -108,10 +108,14 @@ export function useBgConsumer(): BgContextValue {
  *
  * - `bg` is `undefined` -- transparent, no context change, returns `{ bg: undefined }`.
  *   This is the default for Box, Flex, and Grid (they do **not** auto-increment).
- * - `bg` is `'neutral'` -- increments the neutral level from the parent context,
- *   capping at `neutral-3`. The increment is always relative to the parent; it is
- *   not possible to pin a container to an explicit neutral level.
- * - `bg` is `'danger'` | `'warning'` | `'success'` -- used as-is.
+ * - `bg` is `'neutral'` -- when the parent bg is neutral, increments the neutral
+ *   level from the parent context, capping at `neutral-3`. When the parent bg is
+ *   an intent (`'danger'` | `'warning'` | `'success'`), the intent passes through
+ *   unchanged (i.e. `bg: 'neutral'` does not override the parent intent). The
+ *   increment is always relative to the parent; it is not possible to pin a
+ *   container to an explicit neutral level.
+ * - `bg` is `'danger'` | `'warning'` | `'success'` -- sets the bg to that intent
+ *   explicitly, regardless of the parent value.
  *
  * **Capping:**
  *