fix: scope css to sui- class prefix

apps/storybook/.storybook/main.ts

@@ -1,4 +1,5 @@
 import type {StorybookConfig} from '@storybook/react-vite'
+import {Features} from 'lightningcss'
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -16,5 +17,17 @@ const config: StorybookConfig = {
       shouldExtractLiteralValuesFromEnum: true,
     },
   },
+  async viteFinal(viteConfig) {
+    return {
+      ...viteConfig,
+      css: {
+        ...viteConfig.css,
+        lightningcss: {
+          ...viteConfig.css?.lightningcss,
+          exclude: Features.LightDark,
+        },
+      },
+    }
+  },
 }
 export default config

apps/storybook/package.json

@@ -29,6 +29,7 @@
     "@vitejs/plugin-react": "catalog:",
     "@vitest/browser-playwright": "^4.1.1",
     "@vitest/coverage-v8": "^4.1.1",
+    "lightningcss": "^1.33.0",
     "oxc-transform-react": "catalog:",
     "playwright": "^1.58.2",
     "storybook": "^10.3.3",

apps/storybook/src/stories/Card.stories.tsx

@@ -5,6 +5,7 @@ import {Card as CardV3} from 'ui3'
 import {Card} from '../../../../packages/ui/src/components/card/Card'
 import {cardProps} from '../../../../packages/ui/src/components/card/card.props'
 import {HStack} from '../../../../packages/ui/src/components/h-stack/HStack'
+import {Text} from '../../../../packages/ui/src/components/text/Text'
 import {TONE_WITH_DEFAULT} from '../../../../packages/ui/src/types/Tone'
 import {getArgTypes} from '../utils/getArgTypes'
 
@@ -13,7 +14,7 @@ const argTypes = getArgTypes(cardProps)
 const meta: Meta<typeof Card> = {
   title: 'Components/Card',
   args: {
-    children: 'This is a Card component.',
+    children: <Text>This is a Card component.</Text>,
     as: 'div',
   },
   argTypes,
@@ -38,7 +39,9 @@ export const Default: Story = {
     return <Card {...props} />
   },
   play: async ({canvas}) => {
-    await expect((await canvas.findByText('This is a Card component.')).dataset.ui).toBe('Card')
+    await expect(
+      (await canvas.findByText('This is a Card component.')).parentElement?.dataset.ui,
+    ).toBe('Card')
   },
 }
 
@@ -48,15 +51,15 @@ export const Tones: Story = {
       <HStack gap={3}>
         {TONE_WITH_DEFAULT.map((tone) => (
           <Card {...props} key={tone} tone={tone}>
-            {`Card ${tone} tone`}
+            <Text>{`Card ${tone} tone`}</Text>
           </Card>
         ))}
       </HStack>
     )
   },
   play: async ({canvas}) => {
-    await expect((await canvas.findByText('Card positive tone')).classList).toContain(
-      'sui-tone-positive',
-    )
+    await expect(
+      (await canvas.findByText('Card positive tone')).parentElement?.classList,
+    ).toContain('sui-tone-positive')
   },
 }

apps/storybook/src/stories/Divider.stories.tsx

@@ -3,6 +3,7 @@ import {expect} from 'storybook/test'
 
 import {Divider} from '../../../../packages/ui/src/components/divider/Divider'
 import {dividerProps} from '../../../../packages/ui/src/components/divider/divider.props'
+import {Text} from '../../../../packages/ui/src/components/text/Text'
 import {getArgTypes} from '../utils/getArgTypes'
 
 const argTypes = getArgTypes(dividerProps)
@@ -29,9 +30,9 @@ export const Default: Story = {
   render: (props) => {
     return (
       <>
-        <p>Content above</p>
+        <Text>Content above</Text>
         <Divider {...props} />
-        <p>Content below</p>
+        <Text>Content below</Text>
       </>
     )
   },

apps/storybook/src/stories/HStack.stories.tsx

@@ -3,6 +3,7 @@ import {expect} from 'storybook/test'
 
 import {Card} from '../../../../packages/ui/src/components/card/Card'
 import {HStack} from '../../../../packages/ui/src/components/h-stack/HStack'
+import {Text} from '../../../../packages/ui/src/components/text/Text'
 import {SPACE_INHERIT} from '../../../../packages/ui/src/types/Space'
 import {Square} from '../components/Square'
 import {getArgTypes} from '../utils/getArgTypes'
@@ -40,9 +41,15 @@ export const Default: Story = {
   render: (props) => {
     return (
       <HStack {...props}>
-        <Square>Child 1</Square>
-        <Square>Child 2</Square>
-        <Square>Child 3</Square>
+        <Square>
+          <Text>Child 1</Text>
+        </Square>
+        <Square>
+          <Text>Child 2</Text>
+        </Square>
+        <Square>
+          <Text>Child 3</Text>
+        </Square>
       </HStack>
     )
   },
@@ -58,9 +65,15 @@ export const Inherit: Story = {
     return (
       <Card density="regular">
         <HStack {...props} gap="inherit">
-          <Square>Child 1</Square>
-          <Square>Child 2</Square>
-          <Square>Child 3</Square>
+          <Square>
+            <Text>Child 1</Text>
+          </Square>
+          <Square>
+            <Text>Child 2</Text>
+          </Square>
+          <Square>
+            <Text>Child 3</Text>
+          </Square>
         </HStack>
       </Card>
     )

apps/storybook/src/stories/Inline.stories.tsx

@@ -4,6 +4,7 @@ import {Inline as InlineV3} from 'ui3'
 
 import {Inline} from '../../../../packages/ui/src/components/inline/Inline'
 import {inlineProps} from '../../../../packages/ui/src/components/inline/inline.props'
+import {Text} from '../../../../packages/ui/src/components/text/Text'
 import {Square} from '../components/Square'
 import {getArgTypes} from '../utils/getArgTypes'
 
@@ -35,9 +36,15 @@ export const Default: Story = {
   render: (props) => {
     return (
       <Inline {...props}>
-        <Square>Child 1</Square>
-        <Square>Child 2</Square>
-        <Square>Child 3</Square>
+        <Square>
+          <Text>Child 1</Text>
+        </Square>
+        <Square>
+          <Text>Child 2</Text>
+        </Square>
+        <Square>
+          <Text>Child 3</Text>
+        </Square>
       </Inline>
     )
   },

apps/storybook/src/stories/Tabs.stories.tsx

@@ -11,6 +11,7 @@ import {Box} from '../../../../packages/ui/src/components/box/Box'
 import {Card} from '../../../../packages/ui/src/components/card/Card'
 import {Tabs} from '../../../../packages/ui/src/components/tabs/Tabs'
 import {type TabsProps, tabsProps} from '../../../../packages/ui/src/components/tabs/tabs.props'
+import {Text} from '../../../../packages/ui/src/components/text/Text'
 import {getArgTypes} from '../utils/getArgTypes'
 
 const argTypes = getArgTypes(tabsProps)
@@ -45,9 +46,15 @@ function TabsDefaultStory(props: TabsProps) {
         <Tabs.Tab label="Third Tab" value="3" />
       </Tabs.List>
       <Box marginTop={3}>
-        <Tabs.Panel value="1">First tab panel</Tabs.Panel>
-        <Tabs.Panel value="2">Second tab panel</Tabs.Panel>
-        <Tabs.Panel value="3">Third tab panel</Tabs.Panel>
+        <Tabs.Panel value="1">
+          <Text>First tab panel</Text>
+        </Tabs.Panel>
+        <Tabs.Panel value="2">
+          <Text>Second tab panel</Text>
+        </Tabs.Panel>
+        <Tabs.Panel value="3">
+          <Text>Third tab panel</Text>
+        </Tabs.Panel>
       </Box>
     </Tabs>
   )
@@ -72,19 +79,29 @@ function TabsTonesAndIconsStory(props: TabsProps) {
       </Tabs.List>
       <Box marginTop={3}>
         <Tabs.Panel value="neutral">
-          <Card tone="neutral">Neutral Card in tab panel</Card>
+          <Card tone="neutral">
+            <Text>Neutral Card in tab panel</Text>
+          </Card>
         </Tabs.Panel>
         <Tabs.Panel value="positive">
-          <Card tone="positive">Positive Card in tab panel</Card>
+          <Card tone="positive">
+            <Text>Positive Card in tab panel</Text>
+          </Card>
         </Tabs.Panel>
         <Tabs.Panel value="suggest">
-          <Card tone="suggest">Suggest Card in tab panel</Card>
+          <Card tone="suggest">
+            <Text>Suggest Card in tab panel</Text>
+          </Card>
         </Tabs.Panel>
         <Tabs.Panel value="caution">
-          <Card tone="caution">Caution Card in tab panel</Card>
+          <Card tone="caution">
+            <Text>Caution Card in tab panel</Text>
+          </Card>
         </Tabs.Panel>
         <Tabs.Panel value="critical">
-          <Card tone="critical">Critical Card in tab panel</Card>
+          <Card tone="critical">
+            <Text>Critical Card in tab panel</Text>
+          </Card>
         </Tabs.Panel>
       </Box>
     </Tabs>
@@ -102,14 +119,17 @@ export const Default: Story = {
 
     await expect(firstTab).toHaveAttribute('aria-selected', 'true')
     await expect(secondTab).toHaveAttribute('aria-selected', 'false')
-    await expect(canvas.getByText('First tab panel')).toBeVisible()
-    await expect(canvas.getByText('Second tab panel')).not.toBeVisible()
+    await expect(canvas.getByText('First tab panel').parentElement).toBeVisible()
+    await expect(canvas.getByText('Second tab panel').parentElement).not.toBeVisible()
 
-    await expect(canvas.getByText('First tab panel')).toHaveAttribute(
+    await expect(canvas.getByText('First tab panel').parentElement).toHaveAttribute(
       'aria-labelledby',
       firstTab.id,
     )
-    await expect(firstTab).toHaveAttribute('aria-controls', canvas.getByText('First tab panel').id)
+    await expect(firstTab).toHaveAttribute(
+      'aria-controls',
+      canvas.getByText('First tab panel').parentElement?.id,
+    )
   },
 }
 
@@ -153,8 +173,8 @@ export const Interactions: Story = {
 
       await expect(secondTab).toHaveAttribute('aria-selected', 'true')
       await expect(firstTab).toHaveAttribute('aria-selected', 'false')
-      await expect(canvas.getByText('Second tab panel')).toBeVisible()
-      await expect(canvas.getByText('First tab panel')).not.toBeVisible()
+      await expect(canvas.getByText('Second tab panel').parentElement).toBeVisible()
+      await expect(canvas.getByText('First tab panel').parentElement).not.toBeVisible()
     })
 
     await step('Only the selected tab is in the tab sequence', async () => {
@@ -202,12 +222,12 @@ export const Interactions: Story = {
     await step('Enter and Space select the focused tab', async () => {
       await userEvent.keyboard('{Enter}')
       await expect(thirdTab).toHaveAttribute('aria-selected', 'true')
-      await expect(canvas.getByText('Third tab panel')).toBeVisible()
+      await expect(canvas.getByText('Third tab panel').parentElement).toBeVisible()
 
       await userEvent.keyboard('{Home}')
       await userEvent.keyboard(' ')
       await expect(firstTab).toHaveAttribute('aria-selected', 'true')
-      await expect(canvas.getByText('First tab panel')).toBeVisible()
+      await expect(canvas.getByText('First tab panel').parentElement).toBeVisible()
     })
 
     await step(
@@ -217,7 +237,7 @@ export const Interactions: Story = {
         await expect(thirdTab).toHaveFocus()
 
         await userEvent.tab()
-        await expect(canvas.getByText('First tab panel')).toHaveFocus()
+        await expect(canvas.getByText('First tab panel').parentElement).toHaveFocus()
 
         await userEvent.tab({shift: true})
         await expect(firstTab).toHaveFocus()

apps/storybook/src/stories/VStack.stories.tsx

@@ -3,6 +3,7 @@ import {expect} from 'storybook/test'
 import {Stack as StackV3} from 'ui3'
 
 import {Card} from '../../../../packages/ui/src/components/card/Card'
+import {Text} from '../../../../packages/ui/src/components/text/Text'
 import {VStack} from '../../../../packages/ui/src/components/v-stack/VStack'
 import {SPACE_INHERIT} from '../../../../packages/ui/src/types/Space'
 import {Square} from '../components/Square'
@@ -42,9 +43,15 @@ export const Default: Story = {
   render: (props) => {
     return (
       <VStack {...props}>
-        <Square>Child 1</Square>
-        <Square>Child 2</Square>
-        <Square>Child 3</Square>
+        <Square>
+          <Text>Child 1</Text>
+        </Square>
+        <Square>
+          <Text>Child 2</Text>
+        </Square>
+        <Square>
+          <Text>Child 3</Text>
+        </Square>
       </VStack>
     )
   },
@@ -60,9 +67,15 @@ export const Inherit: Story = {
     return (
       <Card density="regular">
         <VStack {...props} gap="inherit">
-          <Square>Child 1</Square>
-          <Square>Child 2</Square>
-          <Square>Child 3</Square>
+          <Square>
+            <Text>Child 1</Text>
+          </Square>
+          <Square>
+            <Text>Child 2</Text>
+          </Square>
+          <Square>
+            <Text>Child 3</Text>
+          </Square>
         </VStack>
       </Card>
     )

apps/storybook/src/styles/storybook.css

@@ -1,7 +1,13 @@
-html.dark body {
+html body {
+  background: light-dark(var(--white), var(--black));
+}
+
+html.dark body,
+html.dark body * {
   color-scheme: dark;
 }
 
-html.light body {
+html.light body,
+html.light body * {
   color-scheme: light;
 }