@gv-tech/design-tokens 2.22.0 → 2.22.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -0
- package/package.json +3 -2
- package/src/theme.css +95 -0
package/README.md
CHANGED
|
@@ -8,8 +8,21 @@ Shared design tokens for the GV Tech design system, including palette, theme, sp
|
|
|
8
8
|
bun add @gv-tech/design-tokens
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
+
## Setup (Tailwind v4)
|
|
12
|
+
|
|
13
|
+
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.
|
|
14
|
+
|
|
15
|
+
```css
|
|
16
|
+
/* src/globals.css */
|
|
17
|
+
@import '@gv-tech/design-tokens/theme.css';
|
|
18
|
+
@import 'tailwindcss';
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
_(Note: Ensure you import the design tokens **before** `tailwindcss` so that the variables are available to the theme)_
|
|
22
|
+
|
|
11
23
|
## Features
|
|
12
24
|
|
|
25
|
+
- **CSS Variables**: Pre-generated `--background`, `--primary`, etc. ready for Tailwind v4.
|
|
13
26
|
- **Palette**: Raw color values used across the system.
|
|
14
27
|
- **Theme**: Semantic color tokens for light and dark modes.
|
|
15
28
|
- **Typography**: Responsive font sizes, weights, and line heights.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gv-tech/design-tokens",
|
|
3
|
-
"version": "2.22.
|
|
3
|
+
"version": "2.22.2",
|
|
4
4
|
"description": "Shared design tokens for the GV Tech design system — palette, theme, spacing, typography, shadows",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
"import": "./dist/index.mjs",
|
|
15
15
|
"require": "./dist/index.cjs",
|
|
16
16
|
"default": "./dist/index.mjs"
|
|
17
|
-
}
|
|
17
|
+
},
|
|
18
|
+
"./theme.css": "./src/theme.css"
|
|
18
19
|
},
|
|
19
20
|
"main": "./dist/index.cjs",
|
|
20
21
|
"module": "./dist/index.mjs",
|
package/src/theme.css
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
/* Generated by scripts/sync-tokens.ts - Do not edit manually */
|
|
2
|
+
@layer base {
|
|
3
|
+
:root {
|
|
4
|
+
--background: 0 0% 96%;
|
|
5
|
+
--foreground: 222 47% 11%;
|
|
6
|
+
--card: 0 0% 100%;
|
|
7
|
+
--card-foreground: 222 47% 11%;
|
|
8
|
+
--popover: 0 0% 100%;
|
|
9
|
+
--popover-foreground: 222 47% 11%;
|
|
10
|
+
--primary: 225 73% 57%;
|
|
11
|
+
--primary-foreground: 0 0% 100%;
|
|
12
|
+
--secondary: 93 28% 54%;
|
|
13
|
+
--secondary-foreground: 0 0% 100%;
|
|
14
|
+
--muted: 0 0% 92%;
|
|
15
|
+
--muted-foreground: 215 16% 47%;
|
|
16
|
+
--accent: 0 0% 88%;
|
|
17
|
+
--accent-foreground: 222 47% 11%;
|
|
18
|
+
--destructive: 0 84.2% 60.2%;
|
|
19
|
+
--destructive-foreground: 0 0% 100%;
|
|
20
|
+
--border: 0 0% 89%;
|
|
21
|
+
--input: 0 0% 89%;
|
|
22
|
+
--ring: 222 47% 11%;
|
|
23
|
+
--radius: 0.5rem;
|
|
24
|
+
|
|
25
|
+
/* Brand Tokens */
|
|
26
|
+
--brand-blue: 225 73% 57%;
|
|
27
|
+
--brand-green: 151 66% 27%;
|
|
28
|
+
--brand-floral-white: 40 100% 97%;
|
|
29
|
+
--neutral-white: 0 0% 100%;
|
|
30
|
+
--neutral-black: 0 0% 0%;
|
|
31
|
+
--neutral-gray50: 0 0% 96%;
|
|
32
|
+
--neutral-gray100: 0 0% 92%;
|
|
33
|
+
--neutral-gray200: 0 0% 89%;
|
|
34
|
+
--neutral-gray300: 0 0% 88%;
|
|
35
|
+
--neutral-gray400: 0 0% 70%;
|
|
36
|
+
--neutral-gray500: 215 16% 47%;
|
|
37
|
+
--neutral-gray600: 222 47% 11%;
|
|
38
|
+
--neutral-gray700: 0 0% 18%;
|
|
39
|
+
--neutral-gray800: 0 0% 15%;
|
|
40
|
+
--neutral-gray900: 0 0% 14%;
|
|
41
|
+
--neutral-gray950: 0 0% 11%;
|
|
42
|
+
--neutral-gray975: 0 0% 9%;
|
|
43
|
+
--neutral-gray990: 0 0% 6%;
|
|
44
|
+
--semantic-success: 93 28% 54%;
|
|
45
|
+
--semantic-success-dark: 96 44% 61%;
|
|
46
|
+
--semantic-destructive: 0 84.2% 60.2%;
|
|
47
|
+
--semantic-destructive-dark: 0 62.8% 30.6%;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.dark {
|
|
51
|
+
--background: 0 0% 9%;
|
|
52
|
+
--foreground: 0 0% 100%;
|
|
53
|
+
--card: 0 0% 14%;
|
|
54
|
+
--card-foreground: 0 0% 100%;
|
|
55
|
+
--popover: 0 0% 11%;
|
|
56
|
+
--popover-foreground: 0 0% 100%;
|
|
57
|
+
--primary: 227 96% 71%;
|
|
58
|
+
--primary-foreground: 0 0% 9%;
|
|
59
|
+
--secondary: 96 44% 61%;
|
|
60
|
+
--secondary-foreground: 0 0% 9%;
|
|
61
|
+
--muted: 0 0% 6%;
|
|
62
|
+
--muted-foreground: 0 0% 70%;
|
|
63
|
+
--accent: 0 0% 15%;
|
|
64
|
+
--accent-foreground: 0 0% 100%;
|
|
65
|
+
--destructive: 0 62.8% 30.6%;
|
|
66
|
+
--destructive-foreground: 0 0% 100%;
|
|
67
|
+
--border: 0 0% 18%;
|
|
68
|
+
--input: 0 0% 18%;
|
|
69
|
+
--ring: 0 0% 90%;
|
|
70
|
+
--radius: 0.5rem;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* Tailwind v4 color utilities - map CSS vars to theme */
|
|
75
|
+
@theme {
|
|
76
|
+
--color-background: hsl(var(--background));
|
|
77
|
+
--color-foreground: hsl(var(--foreground));
|
|
78
|
+
--color-card: hsl(var(--card));
|
|
79
|
+
--color-card-foreground: hsl(var(--card-foreground));
|
|
80
|
+
--color-popover: hsl(var(--popover));
|
|
81
|
+
--color-popover-foreground: hsl(var(--popover-foreground));
|
|
82
|
+
--color-primary: hsl(var(--primary));
|
|
83
|
+
--color-primary-foreground: hsl(var(--primary-foreground));
|
|
84
|
+
--color-secondary: hsl(var(--secondary));
|
|
85
|
+
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
|
86
|
+
--color-muted: hsl(var(--muted));
|
|
87
|
+
--color-muted-foreground: hsl(var(--muted-foreground));
|
|
88
|
+
--color-accent: hsl(var(--accent));
|
|
89
|
+
--color-accent-foreground: hsl(var(--accent-foreground));
|
|
90
|
+
--color-destructive: hsl(var(--destructive));
|
|
91
|
+
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
|
92
|
+
--color-border: hsl(var(--border));
|
|
93
|
+
--color-input: hsl(var(--input));
|
|
94
|
+
--color-ring: hsl(var(--ring));
|
|
95
|
+
}
|