fraqtal/agentic-dev-template
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(storybook): wire Tailwind v4 theme into Storybook preview
Some checks failed
CI / typecheck + lint + boundaries + test + build (push) Has been cancelled
Details
CI / Playwright e2e (push) Has been cancelled
Details
CI / Storybook smoke tests + visual regression (push) Has been cancelled
Details
CodeQL / Analyze (javascript-typescript) (push) Has been cancelled
Details
Coverage snapshot / snapshot (push) Has been cancelled
Details
Release Please / release-please (push) Has been cancelled
Details
Sentry PII guard (R31) / pii-guard (push) Has been cancelled
Details

Browse Source 
- Split globals.css into globals.css + theme.css so Storybook can
  import design tokens without the @import "tailwindcss" directive
  that breaks Vite's preview module loading
- Prepend @tailwindcss/vite plugin for correct processing order
- Add @source to scan core-ui components for utility class generation
This commit is contained in:
danijel-lf
2026-05-26 13:22:17 +02:00
parent 29eaefe47e
commit bca04f4cef
8 changed files with 42 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/core-ui/package.json
View File

@@ -5,7 +5,8 @@
"type": "module",
"exports": {
".": "./src/index.ts",
"./styles/globals.css": "./src/styles/globals.css"
"./styles/globals.css": "./src/styles/globals.css",
"./styles/theme.css": "./src/styles/theme.css"
},
"scripts": {
"build": "tsc --noEmit",

26
packages/core-ui/src/styles/globals.css
View File

@@ -1,26 +1,2 @@
@import "tailwindcss";
@theme {
--color-background: hsl(0 0% 100%);
--color-foreground: hsl(240 10% 3.9%);
--color-card: hsl(0 0% 100%);
--color-card-foreground: hsl(240 10% 3.9%);
--color-popover: hsl(0 0% 100%);
--color-popover-foreground: hsl(240 10% 3.9%);
--color-primary: hsl(240 5.9% 10%);
--color-primary-foreground: hsl(0 0% 98%);
--color-secondary: hsl(240 4.8% 95.9%);
--color-secondary-foreground: hsl(240 5.9% 10%);
--color-muted: hsl(240 4.8% 95.9%);
--color-muted-foreground: hsl(240 3.8% 46.1%);
--color-accent: hsl(240 4.8% 95.9%);
--color-accent-foreground: hsl(240 5.9% 10%);
--color-destructive: hsl(0 84.2% 60.2%);
--color-destructive-foreground: hsl(0 0% 98%);
--color-border: hsl(240 5.9% 90%);
--color-input: hsl(240 5.9% 90%);
--color-ring: hsl(240 5.9% 10%);
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
}
@import "./theme.css";

24
packages/core-ui/src/styles/theme.css Normal file
View File

@@ -0,0 +1,24 @@
@theme {
--color-background: hsl(0 0% 100%);
--color-foreground: hsl(240 10% 3.9%);
--color-card: hsl(0 0% 100%);
--color-card-foreground: hsl(240 10% 3.9%);
--color-popover: hsl(0 0% 100%);
--color-popover-foreground: hsl(240 10% 3.9%);
--color-primary: hsl(240 5.9% 10%);
--color-primary-foreground: hsl(0 0% 98%);
--color-secondary: hsl(240 4.8% 95.9%);
--color-secondary-foreground: hsl(240 5.9% 10%);
--color-muted: hsl(240 4.8% 95.9%);
--color-muted-foreground: hsl(240 3.8% 46.1%);
--color-accent: hsl(240 4.8% 95.9%);
--color-accent-foreground: hsl(240 5.9% 10%);
--color-destructive: hsl(0 84.2% 60.2%);
--color-destructive-foreground: hsl(0 0% 98%);
--color-border: hsl(240 5.9% 90%);
--color-input: hsl(240 5.9% 90%);
--color-ring: hsl(240 5.9% 10%);
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
}