@gv-tech/design-tokens 2.22.1 → 2.23.0

package/README.md

@@ -8,8 +8,21 @@ Shared design tokens for the GV Tech design system, including palette, theme, sp
 bun add @gv-tech/design-tokens
 ```
 
+## Setup (Tailwind v4)
+
+To use these design tokens in your project, you must import the generated CSS file into your global stylesheet. This file contains all the necessary CSS variables and `@theme` mappings for Tailwind CSS v4.
+
+```css
+/* src/globals.css */
+@import '@gv-tech/design-tokens/theme.css';
+@import 'tailwindcss';
+```
+
+_(Note: Ensure you import the design tokens **before** `tailwindcss` so that the variables are available to the theme)_
+
 ## Features
 
+- **CSS Variables**: Pre-generated `--background`, `--primary`, etc. ready for Tailwind v4.
 - **Palette**: Raw color values used across the system.
 - **Theme**: Semantic color tokens for light and dark modes.
 - **Typography**: Responsive font sizes, weights, and line heights.

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={brand:{blue:`hsl(225 73% 57%)`,green:`hsl(151 66% 27%)`,floralWhite:`hsl(40 100% 97%)`},neutral:{white:`hsl(0 0% 100%)`,black:`hsl(0 0% 0%)`,gray50:`hsl(0 0% 96%)`,gray100:`hsl(0 0% 92%)`,gray200:`hsl(0 0% 89%)`,gray300:`hsl(0 0% 88%)`,gray400:`hsl(0 0% 70%)`,gray500:`hsl(215 16% 47%)`,gray600:`hsl(222 47% 11%)`,gray700:`hsl(0 0% 18%)`,gray800:`hsl(0 0% 15%)`,gray900:`hsl(0 0% 14%)`,gray950:`hsl(0 0% 11%)`,gray975:`hsl(0 0% 9%)`,gray990:`hsl(0 0% 6%)`},semantic:{success:`hsl(93 28% 54%)`,successDark:`hsl(96 44% 61%)`,destructive:`hsl(0 84.2% 60.2%)`,destructiveDark:`hsl(0 62.8% 30.6%)`}},t={light:{background:e.neutral.gray50,foreground:e.neutral.gray600,card:e.neutral.white,cardForeground:e.neutral.gray600,popover:e.neutral.white,popoverForeground:e.neutral.gray600,primary:e.brand.blue,primaryForeground:e.neutral.white,secondary:e.semantic.success,secondaryForeground:e.neutral.white,muted:e.neutral.gray100,mutedForeground:e.neutral.gray500,accent:e.neutral.gray300,accentForeground:e.neutral.gray600,destructive:e.semantic.destructive,destructiveForeground:e.neutral.white,border:e.neutral.gray200,input:e.neutral.gray200,ring:e.neutral.gray600,radius:`0.5rem`},dark:{background:e.neutral.gray975,foreground:e.neutral.white,card:e.neutral.gray900,cardForeground:e.neutral.white,popover:e.neutral.gray950,popoverForeground:e.neutral.white,primary:`hsl(227 96% 71%)`,primaryForeground:e.neutral.gray975,secondary:e.semantic.successDark,secondaryForeground:e.neutral.gray975,muted:e.neutral.gray990,mutedForeground:e.neutral.gray400,accent:e.neutral.gray800,accentForeground:e.neutral.white,destructive:e.semantic.destructiveDark,destructiveForeground:e.neutral.white,border:e.neutral.gray700,input:e.neutral.gray700,ring:`hsl(0 0% 90%)`,radius:`0.5rem`}},n={px:`1px`,0:`0`,.5:`0.125rem`,1:`0.25rem`,1.5:`0.375rem`,2:`0.5rem`,2.5:`0.625rem`,3:`0.75rem`,3.5:`0.875rem`,4:`1rem`,5:`1.25rem`,6:`1.5rem`,7:`1.75rem`,8:`2rem`,9:`2.25rem`,10:`2.5rem`,12:`3rem`,14:`3.5rem`,16:`4rem`,20:`5rem`,24:`6rem`,32:`8rem`,40:`10rem`,48:`12rem`,56:`14rem`,64:`16rem`},r={none:`0`,sm:`calc(var(--radius) - 4px)`,md:`calc(var(--radius) - 2px)`,lg:`var(--radius)`,xl:`calc(var(--radius) + 4px)`,"2xl":`calc(var(--radius) + 8px)`,full:`9999px`},i={none:0,sm:4,md:6,lg:8,xl:12,"2xl":16,full:9999},a={fontFamily:{sans:`Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`,mono:`ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`},fontSize:{xs:`0.75rem`,sm:`0.875rem`,base:`1rem`,lg:`1.125rem`,xl:`1.25rem`,"2xl":`1.5rem`,"3xl":`1.875rem`,"4xl":`2.25rem`,"5xl":`3rem`},fontWeight:{normal:`400`,medium:`500`,semibold:`600`,bold:`700`},lineHeight:{none:`1`,tight:`1.25`,snug:`1.375`,normal:`1.5`,relaxed:`1.625`,loose:`2`}},o={none:`none`,sm:`0 1px 2px 0 rgb(0 0 0 / 0.05)`,default:`0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)`,md:`0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)`,lg:`0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)`,xl:`0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)`,"2xl":`0 25px 50px -12px rgb(0 0 0 / 0.25)`,inner:`inset 0 2px 4px 0 rgb(0 0 0 / 0.05)`},s={theme:{extend:{colors:{background:`hsl(var(--background) / <alpha-value>)`,foreground:`hsl(var(--foreground) / <alpha-value>)`,card:{DEFAULT:`hsl(var(--card) / <alpha-value>)`,foreground:`hsl(var(--card-foreground) / <alpha-value>)`},popover:{DEFAULT:`hsl(var(--popover) / <alpha-value>)`,foreground:`hsl(var(--popover-foreground) / <alpha-value>)`},primary:{DEFAULT:`hsl(var(--primary) / <alpha-value>)`,foreground:`hsl(var(--primary-foreground) / <alpha-value>)`},secondary:{DEFAULT:`hsl(var(--secondary) / <alpha-value>)`,foreground:`hsl(var(--secondary-foreground) / <alpha-value>)`},muted:{DEFAULT:`hsl(var(--muted) / <alpha-value>)`,foreground:`hsl(var(--muted-foreground) / <alpha-value>)`},accent:{DEFAULT:`hsl(var(--accent) / <alpha-value>)`,foreground:`hsl(var(--accent-foreground) / <alpha-value>)`},destructive:{DEFAULT:`hsl(var(--destructive) / <alpha-value>)`,foreground:`hsl(var(--destructive-foreground) / <alpha-value>)`},border:`hsl(var(--border) / <alpha-value>)`,input:`hsl(var(--input) / <alpha-value>)`,ring:`hsl(var(--ring) / <alpha-value>)`,brand:{blue:`hsl(var(--brand-blue) / <alpha-value>)`,green:`hsl(var(--brand-green) / <alpha-value>)`,"floral-white":`hsl(var(--brand-floral-white) / <alpha-value>)`},neutral:{white:`hsl(var(--neutral-white) / <alpha-value>)`,black:`hsl(var(--neutral-black) / <alpha-value>)`,gray50:`hsl(var(--neutral-gray50) / <alpha-value>)`,gray100:`hsl(var(--neutral-gray100) / <alpha-value>)`,gray200:`hsl(var(--neutral-gray200) / <alpha-value>)`,gray300:`hsl(var(--neutral-gray300) / <alpha-value>)`,gray400:`hsl(var(--neutral-gray400) / <alpha-value>)`,gray500:`hsl(var(--neutral-gray500) / <alpha-value>)`,gray600:`hsl(var(--neutral-gray600) / <alpha-value>)`,gray700:`hsl(var(--neutral-gray700) / <alpha-value>)`,gray800:`hsl(var(--neutral-gray800) / <alpha-value>)`,gray900:`hsl(var(--neutral-gray900) / <alpha-value>)`,gray950:`hsl(var(--neutral-gray950) / <alpha-value>)`,gray975:`hsl(var(--neutral-gray975) / <alpha-value>)`,gray990:`hsl(var(--neutral-gray990) / <alpha-value>)`},semantic:{success:`hsl(var(--semantic-success) / <alpha-value>)`,"success-dark":`hsl(var(--semantic-success-dark) / <alpha-value>)`,destructive:`hsl(var(--semantic-destructive) / <alpha-value>)`,"destructive-dark":`hsl(var(--semantic-destructive-dark) / <alpha-value>)`}},borderRadius:{lg:`var(--radius)`,md:`calc(var(--radius) - 2px)`,sm:`calc(var(--radius) - 4px)`,xl:`calc(var(--radius) + 4px)`,"2xl":`calc(var(--radius) + 8px)`},boxShadow:{sm:`0 1px 2px 0 rgb(0 0 0 / 0.05)`,DEFAULT:`0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)`,md:`0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)`,lg:`0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)`,xl:`0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)`,"2xl":`0 25px 50px -12px rgb(0 0 0 / 0.25)`,inner:`inset 0 2px 4px 0 rgb(0 0 0 / 0.05)`},keyframes:{"accordion-down":{from:{height:`0`},to:{height:`var(--radix-accordion-content-height)`}},"accordion-up":{from:{height:`var(--radix-accordion-content-height)`},to:{height:`0`}}},animation:{"accordion-down":`accordion-down 0.2s ease-out`,"accordion-up":`accordion-up 0.2s ease-out`}}}},c={palette:e,theme:t};exports.palette=e,exports.preset=s,exports.radii=r,exports.radiiNumeric=i,exports.shadows=o,exports.spacing=n,exports.theme=t,exports.tokens=c,exports.typography=a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={brand:{blue:`hsl(225 73% 57%)`,green:`hsl(151 66% 27%)`,floralWhite:`hsl(40 100% 97%)`},neutral:{white:`hsl(0 0% 100%)`,black:`hsl(0 0% 0%)`,gray50:`hsl(0 0% 96%)`,gray100:`hsl(0 0% 92%)`,gray200:`hsl(0 0% 89%)`,gray300:`hsl(0 0% 88%)`,gray400:`hsl(0 0% 70%)`,gray500:`hsl(215 16% 47%)`,gray600:`hsl(222 47% 11%)`,gray700:`hsl(0 0% 18%)`,gray800:`hsl(0 0% 15%)`,gray900:`hsl(0 0% 14%)`,gray950:`hsl(0 0% 11%)`,gray975:`hsl(0 0% 9%)`,gray990:`hsl(0 0% 6%)`},semantic:{success:`hsl(93 28% 54%)`,successDark:`hsl(96 44% 61%)`,destructive:`hsl(0 84.2% 60.2%)`,destructiveDark:`hsl(0 62.8% 30.6%)`}},t={light:{background:e.neutral.gray50,foreground:e.neutral.gray600,card:e.neutral.white,cardForeground:e.neutral.gray600,popover:e.neutral.white,popoverForeground:e.neutral.gray600,primary:e.brand.blue,primaryForeground:e.neutral.white,secondary:e.semantic.success,secondaryForeground:e.neutral.white,muted:e.neutral.gray100,mutedForeground:e.neutral.gray500,accent:e.neutral.gray300,accentForeground:e.neutral.gray600,destructive:e.semantic.destructive,destructiveForeground:e.neutral.white,border:e.neutral.gray200,input:e.neutral.gray200,ring:e.neutral.gray600,sidebar:e.neutral.gray50,sidebarForeground:e.neutral.gray600,sidebarPrimary:e.brand.blue,sidebarPrimaryForeground:e.neutral.white,sidebarAccent:e.neutral.gray100,sidebarAccentForeground:e.neutral.gray900,sidebarBorder:e.neutral.gray200,sidebarRing:e.brand.blue,radius:`0.5rem`},dark:{background:e.neutral.gray975,foreground:e.neutral.white,card:e.neutral.gray900,cardForeground:e.neutral.white,popover:e.neutral.gray950,popoverForeground:e.neutral.white,primary:`hsl(227 96% 71%)`,primaryForeground:e.neutral.gray975,secondary:e.semantic.successDark,secondaryForeground:e.neutral.gray975,muted:e.neutral.gray990,mutedForeground:e.neutral.gray400,accent:e.neutral.gray800,accentForeground:e.neutral.white,destructive:e.semantic.destructiveDark,destructiveForeground:e.neutral.white,border:e.neutral.gray700,input:e.neutral.gray700,ring:`hsl(0 0% 90%)`,sidebar:e.neutral.gray950,sidebarForeground:e.neutral.gray400,sidebarPrimary:`hsl(227 96% 71%)`,sidebarPrimaryForeground:e.neutral.white,sidebarAccent:e.neutral.gray800,sidebarAccentForeground:e.neutral.white,sidebarBorder:e.neutral.gray700,sidebarRing:`hsl(227 96% 71%)`,radius:`0.5rem`}},n={px:`1px`,0:`0`,.5:`0.125rem`,1:`0.25rem`,1.5:`0.375rem`,2:`0.5rem`,2.5:`0.625rem`,3:`0.75rem`,3.5:`0.875rem`,4:`1rem`,5:`1.25rem`,6:`1.5rem`,7:`1.75rem`,8:`2rem`,9:`2.25rem`,10:`2.5rem`,12:`3rem`,14:`3.5rem`,16:`4rem`,20:`5rem`,24:`6rem`,32:`8rem`,40:`10rem`,48:`12rem`,56:`14rem`,64:`16rem`},r={none:`0`,sm:`calc(var(--radius) - 4px)`,md:`calc(var(--radius) - 2px)`,lg:`var(--radius)`,xl:`calc(var(--radius) + 4px)`,"2xl":`calc(var(--radius) + 8px)`,full:`9999px`},i={none:0,sm:4,md:6,lg:8,xl:12,"2xl":16,full:9999},a={fontFamily:{sans:`Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`,mono:`ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`},fontSize:{xs:`0.75rem`,sm:`0.875rem`,base:`1rem`,lg:`1.125rem`,xl:`1.25rem`,"2xl":`1.5rem`,"3xl":`1.875rem`,"4xl":`2.25rem`,"5xl":`3rem`},fontWeight:{normal:`400`,medium:`500`,semibold:`600`,bold:`700`},lineHeight:{none:`1`,tight:`1.25`,snug:`1.375`,normal:`1.5`,relaxed:`1.625`,loose:`2`}},o={none:`none`,sm:`0 1px 2px 0 rgb(0 0 0 / 0.05)`,default:`0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)`,md:`0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)`,lg:`0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)`,xl:`0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)`,"2xl":`0 25px 50px -12px rgb(0 0 0 / 0.25)`,inner:`inset 0 2px 4px 0 rgb(0 0 0 / 0.05)`},s={theme:{extend:{colors:{background:`hsl(var(--background) / <alpha-value>)`,foreground:`hsl(var(--foreground) / <alpha-value>)`,card:{DEFAULT:`hsl(var(--card) / <alpha-value>)`,foreground:`hsl(var(--card-foreground) / <alpha-value>)`},popover:{DEFAULT:`hsl(var(--popover) / <alpha-value>)`,foreground:`hsl(var(--popover-foreground) / <alpha-value>)`},primary:{DEFAULT:`hsl(var(--primary) / <alpha-value>)`,foreground:`hsl(var(--primary-foreground) / <alpha-value>)`},secondary:{DEFAULT:`hsl(var(--secondary) / <alpha-value>)`,foreground:`hsl(var(--secondary-foreground) / <alpha-value>)`},muted:{DEFAULT:`hsl(var(--muted) / <alpha-value>)`,foreground:`hsl(var(--muted-foreground) / <alpha-value>)`},accent:{DEFAULT:`hsl(var(--accent) / <alpha-value>)`,foreground:`hsl(var(--accent-foreground) / <alpha-value>)`},destructive:{DEFAULT:`hsl(var(--destructive) / <alpha-value>)`,foreground:`hsl(var(--destructive-foreground) / <alpha-value>)`},border:`hsl(var(--border) / <alpha-value>)`,input:`hsl(var(--input) / <alpha-value>)`,ring:`hsl(var(--ring) / <alpha-value>)`,brand:{blue:`hsl(var(--brand-blue) / <alpha-value>)`,green:`hsl(var(--brand-green) / <alpha-value>)`,"floral-white":`hsl(var(--brand-floral-white) / <alpha-value>)`},neutral:{white:`hsl(var(--neutral-white) / <alpha-value>)`,black:`hsl(var(--neutral-black) / <alpha-value>)`,gray50:`hsl(var(--neutral-gray50) / <alpha-value>)`,gray100:`hsl(var(--neutral-gray100) / <alpha-value>)`,gray200:`hsl(var(--neutral-gray200) / <alpha-value>)`,gray300:`hsl(var(--neutral-gray300) / <alpha-value>)`,gray400:`hsl(var(--neutral-gray400) / <alpha-value>)`,gray500:`hsl(var(--neutral-gray500) / <alpha-value>)`,gray600:`hsl(var(--neutral-gray600) / <alpha-value>)`,gray700:`hsl(var(--neutral-gray700) / <alpha-value>)`,gray800:`hsl(var(--neutral-gray800) / <alpha-value>)`,gray900:`hsl(var(--neutral-gray900) / <alpha-value>)`,gray950:`hsl(var(--neutral-gray950) / <alpha-value>)`,gray975:`hsl(var(--neutral-gray975) / <alpha-value>)`,gray990:`hsl(var(--neutral-gray990) / <alpha-value>)`},semantic:{success:`hsl(var(--semantic-success) / <alpha-value>)`,"success-dark":`hsl(var(--semantic-success-dark) / <alpha-value>)`,destructive:`hsl(var(--semantic-destructive) / <alpha-value>)`,"destructive-dark":`hsl(var(--semantic-destructive-dark) / <alpha-value>)`}},borderRadius:{lg:`var(--radius)`,md:`calc(var(--radius) - 2px)`,sm:`calc(var(--radius) - 4px)`,xl:`calc(var(--radius) + 4px)`,"2xl":`calc(var(--radius) + 8px)`},boxShadow:{sm:`0 1px 2px 0 rgb(0 0 0 / 0.05)`,DEFAULT:`0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)`,md:`0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)`,lg:`0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)`,xl:`0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)`,"2xl":`0 25px 50px -12px rgb(0 0 0 / 0.25)`,inner:`inset 0 2px 4px 0 rgb(0 0 0 / 0.05)`},keyframes:{"accordion-down":{from:{height:`0`},to:{height:`var(--radix-accordion-content-height)`}},"accordion-up":{from:{height:`var(--radix-accordion-content-height)`},to:{height:`0`}}},animation:{"accordion-down":`accordion-down 0.2s ease-out`,"accordion-up":`accordion-up 0.2s ease-out`}}}},c={palette:e,theme:t};exports.palette=e,exports.preset=s,exports.radii=r,exports.radiiNumeric=i,exports.shadows=o,exports.spacing=n,exports.theme=t,exports.tokens=c,exports.typography=a;

package/dist/index.d.ts

@@ -62,6 +62,14 @@ export declare const tokens: {
             readonly border: "hsl(0 0% 89%)";
             readonly input: "hsl(0 0% 89%)";
             readonly ring: "hsl(222 47% 11%)";
+            readonly sidebar: "hsl(0 0% 96%)";
+            readonly sidebarForeground: "hsl(222 47% 11%)";
+            readonly sidebarPrimary: "hsl(225 73% 57%)";
+            readonly sidebarPrimaryForeground: "hsl(0 0% 100%)";
+            readonly sidebarAccent: "hsl(0 0% 92%)";
+            readonly sidebarAccentForeground: "hsl(0 0% 14%)";
+            readonly sidebarBorder: "hsl(0 0% 89%)";
+            readonly sidebarRing: "hsl(225 73% 57%)";
             readonly radius: "0.5rem";
         };
         readonly dark: {
@@ -84,6 +92,14 @@ export declare const tokens: {
             readonly border: "hsl(0 0% 18%)";
             readonly input: "hsl(0 0% 18%)";
             readonly ring: "hsl(0 0% 90%)";
+            readonly sidebar: "hsl(0 0% 11%)";
+            readonly sidebarForeground: "hsl(0 0% 70%)";
+            readonly sidebarPrimary: "hsl(227 96% 71%)";
+            readonly sidebarPrimaryForeground: "hsl(0 0% 100%)";
+            readonly sidebarAccent: "hsl(0 0% 15%)";
+            readonly sidebarAccentForeground: "hsl(0 0% 100%)";
+            readonly sidebarBorder: "hsl(0 0% 18%)";
+            readonly sidebarRing: "hsl(227 96% 71%)";
             readonly radius: "0.5rem";
         };
     };

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE/C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE/C,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC9C,YAAY,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG/D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAGrD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAO9C,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGT,CAAC;AAEX,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE/C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE/C,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC9C,YAAY,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG/D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAGrD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAO9C,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGT,CAAC;AAEX,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/index.mjs

@@ -49,6 +49,14 @@ var e = {
 		border: e.neutral.gray200,
 		input: e.neutral.gray200,
 		ring: e.neutral.gray600,
+		sidebar: e.neutral.gray50,
+		sidebarForeground: e.neutral.gray600,
+		sidebarPrimary: e.brand.blue,
+		sidebarPrimaryForeground: e.neutral.white,
+		sidebarAccent: e.neutral.gray100,
+		sidebarAccentForeground: e.neutral.gray900,
+		sidebarBorder: e.neutral.gray200,
+		sidebarRing: e.brand.blue,
 		radius: "0.5rem"
 	},
 	dark: {
@@ -71,6 +79,14 @@ var e = {
 		border: e.neutral.gray700,
 		input: e.neutral.gray700,
 		ring: "hsl(0 0% 90%)",
+		sidebar: e.neutral.gray950,
+		sidebarForeground: e.neutral.gray400,
+		sidebarPrimary: "hsl(227 96% 71%)",
+		sidebarPrimaryForeground: e.neutral.white,
+		sidebarAccent: e.neutral.gray800,
+		sidebarAccentForeground: e.neutral.white,
+		sidebarBorder: e.neutral.gray700,
+		sidebarRing: "hsl(227 96% 71%)",
 		radius: "0.5rem"
 	}
 }, n = {

package/dist/theme.d.ts

@@ -19,6 +19,14 @@ export declare const theme: {
         readonly border: "hsl(0 0% 89%)";
         readonly input: "hsl(0 0% 89%)";
         readonly ring: "hsl(222 47% 11%)";
+        readonly sidebar: "hsl(0 0% 96%)";
+        readonly sidebarForeground: "hsl(222 47% 11%)";
+        readonly sidebarPrimary: "hsl(225 73% 57%)";
+        readonly sidebarPrimaryForeground: "hsl(0 0% 100%)";
+        readonly sidebarAccent: "hsl(0 0% 92%)";
+        readonly sidebarAccentForeground: "hsl(0 0% 14%)";
+        readonly sidebarBorder: "hsl(0 0% 89%)";
+        readonly sidebarRing: "hsl(225 73% 57%)";
         readonly radius: "0.5rem";
     };
     readonly dark: {
@@ -41,6 +49,14 @@ export declare const theme: {
         readonly border: "hsl(0 0% 18%)";
         readonly input: "hsl(0 0% 18%)";
         readonly ring: "hsl(0 0% 90%)";
+        readonly sidebar: "hsl(0 0% 11%)";
+        readonly sidebarForeground: "hsl(0 0% 70%)";
+        readonly sidebarPrimary: "hsl(227 96% 71%)";
+        readonly sidebarPrimaryForeground: "hsl(0 0% 100%)";
+        readonly sidebarAccent: "hsl(0 0% 15%)";
+        readonly sidebarAccentForeground: "hsl(0 0% 100%)";
+        readonly sidebarBorder: "hsl(0 0% 18%)";
+        readonly sidebarRing: "hsl(227 96% 71%)";
         readonly radius: "0.5rem";
     };
 };

package/dist/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CR,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,OAAO,KAAK,CAAC,KAAK,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DR,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,OAAO,KAAK,CAAC,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gv-tech/design-tokens",
-  "version": "2.22.1",
+  "version": "2.23.0",
   "description": "Shared design tokens for the GV Tech design system — palette, theme, spacing, typography, shadows",
   "repository": {
     "type": "git",
@@ -14,7 +14,8 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs",
       "default": "./dist/index.mjs"
-    }
+    },
+    "./theme.css": "./src/theme.css"
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",

package/src/theme.css

@@ -0,0 +1,119 @@
+/* Generated by scripts/sync-tokens.ts - Do not edit manually */
+@layer base {
+  :root {
+    --background: 0 0% 96%;
+    --foreground: 222 47% 11%;
+    --card: 0 0% 100%;
+    --card-foreground: 222 47% 11%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222 47% 11%;
+    --primary: 225 73% 57%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 93 28% 54%;
+    --secondary-foreground: 0 0% 100%;
+    --muted: 0 0% 92%;
+    --muted-foreground: 215 16% 47%;
+    --accent: 0 0% 88%;
+    --accent-foreground: 222 47% 11%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 89%;
+    --input: 0 0% 89%;
+    --ring: 222 47% 11%;
+    --sidebar: 0 0% 96%;
+    --sidebar-foreground: 222 47% 11%;
+    --sidebar-primary: 225 73% 57%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 0 0% 92%;
+    --sidebar-accent-foreground: 0 0% 14%;
+    --sidebar-border: 0 0% 89%;
+    --sidebar-ring: 225 73% 57%;
+    --radius: 0.5rem;
+
+    /* Brand Tokens */
+    --brand-blue: 225 73% 57%;
+    --brand-green: 151 66% 27%;
+    --brand-floral-white: 40 100% 97%;
+    --neutral-white: 0 0% 100%;
+    --neutral-black: 0 0% 0%;
+    --neutral-gray50: 0 0% 96%;
+    --neutral-gray100: 0 0% 92%;
+    --neutral-gray200: 0 0% 89%;
+    --neutral-gray300: 0 0% 88%;
+    --neutral-gray400: 0 0% 70%;
+    --neutral-gray500: 215 16% 47%;
+    --neutral-gray600: 222 47% 11%;
+    --neutral-gray700: 0 0% 18%;
+    --neutral-gray800: 0 0% 15%;
+    --neutral-gray900: 0 0% 14%;
+    --neutral-gray950: 0 0% 11%;
+    --neutral-gray975: 0 0% 9%;
+    --neutral-gray990: 0 0% 6%;
+    --semantic-success: 93 28% 54%;
+    --semantic-success-dark: 96 44% 61%;
+    --semantic-destructive: 0 84.2% 60.2%;
+    --semantic-destructive-dark: 0 62.8% 30.6%;
+  }
+
+  .dark {
+    --background: 0 0% 9%;
+    --foreground: 0 0% 100%;
+    --card: 0 0% 14%;
+    --card-foreground: 0 0% 100%;
+    --popover: 0 0% 11%;
+    --popover-foreground: 0 0% 100%;
+    --primary: 227 96% 71%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 96 44% 61%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 6%;
+    --muted-foreground: 0 0% 70%;
+    --accent: 0 0% 15%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 18%;
+    --input: 0 0% 18%;
+    --ring: 0 0% 90%;
+    --sidebar: 0 0% 11%;
+    --sidebar-foreground: 0 0% 70%;
+    --sidebar-primary: 227 96% 71%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 0 0% 15%;
+    --sidebar-accent-foreground: 0 0% 100%;
+    --sidebar-border: 0 0% 18%;
+    --sidebar-ring: 227 96% 71%;
+    --radius: 0.5rem;
+  }
+}
+
+/* Tailwind v4 color utilities - map CSS vars to theme */
+@theme {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-sidebar: hsl(var(--sidebar));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
+}

package/src/theme.ts

@@ -25,6 +25,14 @@ export const theme = {
     border: palette.neutral.gray200,
     input: palette.neutral.gray200,
     ring: palette.neutral.gray600,
+    sidebar: palette.neutral.gray50,
+    sidebarForeground: palette.neutral.gray600,
+    sidebarPrimary: palette.brand.blue,
+    sidebarPrimaryForeground: palette.neutral.white,
+    sidebarAccent: palette.neutral.gray100,
+    sidebarAccentForeground: palette.neutral.gray900,
+    sidebarBorder: palette.neutral.gray200,
+    sidebarRing: palette.brand.blue,
     radius: '0.5rem',
   },
   dark: {
@@ -47,6 +55,14 @@ export const theme = {
     border: palette.neutral.gray700,
     input: palette.neutral.gray700,
     ring: 'hsl(0 0% 90%)', // Platinum
+    sidebar: palette.neutral.gray950,
+    sidebarForeground: palette.neutral.gray400,
+    sidebarPrimary: 'hsl(227 96% 71%)',
+    sidebarPrimaryForeground: palette.neutral.white,
+    sidebarAccent: palette.neutral.gray800,
+    sidebarAccentForeground: palette.neutral.white,
+    sidebarBorder: palette.neutral.gray700,
+    sidebarRing: 'hsl(227 96% 71%)',
     radius: '0.5rem',
   },
 } as const;