@liamkeene/tokens 0.0.0
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 +30 -0
- package/dist/css/variables-dark.css +25 -0
- package/dist/css/variables.css +89 -0
- package/dist/js/tokens.d.ts +87 -0
- package/dist/js/tokens.js +92 -0
- package/package.json +32 -0
package/README.md
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
# @liamkeene/tokens
|
|
2
|
+
|
|
3
|
+
Platform-agnostic design tokens for liamkeene.dev projects: color, spacing, radius, and typography.
|
|
4
|
+
|
|
5
|
+
This package has **no dependency on React, Tailwind, or any UI framework**. It's the single source of truth that platform-specific packages (web, and eventually React Native) style themselves from.
|
|
6
|
+
|
|
7
|
+
## Authoring
|
|
8
|
+
|
|
9
|
+
Tokens are authored as [W3C Design Tokens (DTCG)](https://design-tokens.github.io/community-group/format/) JSON in `tokens/`, and built with [Style Dictionary](https://styledictionary.com/) (`scripts/build.js`) into:
|
|
10
|
+
|
|
11
|
+
- `dist/css/variables.css` — `:root` CSS custom properties (light theme / defaults)
|
|
12
|
+
- `dist/css/variables-dark.css` — `[data-theme="dark"]` overrides
|
|
13
|
+
- `dist/js/tokens.js` + `.d.ts` — flat typed JS exports for anything that isn't CSS (e.g. a future React Native package)
|
|
14
|
+
|
|
15
|
+
## Usage (web)
|
|
16
|
+
|
|
17
|
+
```css
|
|
18
|
+
@import "@liamkeene/tokens/css";
|
|
19
|
+
@import "@liamkeene/tokens/css/dark";
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Usage (JS/TS)
|
|
23
|
+
|
|
24
|
+
```ts
|
|
25
|
+
import { color_semantic_primary, spacing_4 } from "@liamkeene/tokens";
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Adding/editing tokens
|
|
29
|
+
|
|
30
|
+
Edit the JSON files in `tokens/`, then `pnpm build`. Semantic color tokens (`color.semantic.*`) map 1:1 to shadcn/ui's expected CSS variable names (`--background`, `--primary`, `--border`, etc.) so `packages/ui` can consume them without renaming.
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
[data-theme="dark"] {
|
|
6
|
+
--background: #09090b;
|
|
7
|
+
--foreground: #fafafa;
|
|
8
|
+
--card: #18181b;
|
|
9
|
+
--card-foreground: #fafafa;
|
|
10
|
+
--popover: #18181b;
|
|
11
|
+
--popover-foreground: #fafafa;
|
|
12
|
+
--primary: #3b82f6;
|
|
13
|
+
--primary-foreground: #09090b;
|
|
14
|
+
--secondary: #27272a;
|
|
15
|
+
--secondary-foreground: #fafafa;
|
|
16
|
+
--muted: #27272a;
|
|
17
|
+
--muted-foreground: #a1a1aa;
|
|
18
|
+
--accent: #27272a;
|
|
19
|
+
--accent-foreground: #fafafa;
|
|
20
|
+
--destructive: #ef4444;
|
|
21
|
+
--destructive-foreground: #fafafa;
|
|
22
|
+
--border: #27272a;
|
|
23
|
+
--input: #27272a;
|
|
24
|
+
--ring: #3b82f6;
|
|
25
|
+
}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
--color-gray-50: #fafafa;
|
|
7
|
+
--color-gray-100: #f4f4f5;
|
|
8
|
+
--color-gray-200: #e4e4e7;
|
|
9
|
+
--color-gray-300: #d4d4d8;
|
|
10
|
+
--color-gray-400: #a1a1aa;
|
|
11
|
+
--color-gray-500: #71717a;
|
|
12
|
+
--color-gray-600: #52525b;
|
|
13
|
+
--color-gray-700: #3f3f46;
|
|
14
|
+
--color-gray-800: #27272a;
|
|
15
|
+
--color-gray-900: #18181b;
|
|
16
|
+
--color-gray-950: #09090b;
|
|
17
|
+
--color-brand-50: #eff6ff;
|
|
18
|
+
--color-brand-100: #dbeafe;
|
|
19
|
+
--color-brand-200: #bfdbfe;
|
|
20
|
+
--color-brand-300: #93c5fd;
|
|
21
|
+
--color-brand-400: #60a5fa;
|
|
22
|
+
--color-brand-500: #3b82f6;
|
|
23
|
+
--color-brand-600: #2563eb;
|
|
24
|
+
--color-brand-700: #1d4ed8;
|
|
25
|
+
--color-brand-800: #1e40af;
|
|
26
|
+
--color-brand-900: #1e3a8a;
|
|
27
|
+
--color-brand-950: #172554;
|
|
28
|
+
--color-red-50: #fef2f2;
|
|
29
|
+
--color-red-500: #ef4444;
|
|
30
|
+
--color-red-600: #dc2626;
|
|
31
|
+
--color-red-900: #7f1d1d;
|
|
32
|
+
--color-base-white: #ffffff;
|
|
33
|
+
--color-base-black: #000000;
|
|
34
|
+
--background: #ffffff;
|
|
35
|
+
--foreground: #09090b;
|
|
36
|
+
--card: #ffffff;
|
|
37
|
+
--card-foreground: #09090b;
|
|
38
|
+
--popover: #ffffff;
|
|
39
|
+
--popover-foreground: #09090b;
|
|
40
|
+
--primary: #2563eb;
|
|
41
|
+
--primary-foreground: #ffffff;
|
|
42
|
+
--secondary: #f4f4f5;
|
|
43
|
+
--secondary-foreground: #18181b;
|
|
44
|
+
--muted: #f4f4f5;
|
|
45
|
+
--muted-foreground: #71717a;
|
|
46
|
+
--accent: #f4f4f5;
|
|
47
|
+
--accent-foreground: #18181b;
|
|
48
|
+
--destructive: #dc2626;
|
|
49
|
+
--destructive-foreground: #ffffff;
|
|
50
|
+
--border: #e4e4e7;
|
|
51
|
+
--input: #e4e4e7;
|
|
52
|
+
--ring: #2563eb;
|
|
53
|
+
--spacing-0: 0px;
|
|
54
|
+
--spacing-1: 4px;
|
|
55
|
+
--spacing-2: 8px;
|
|
56
|
+
--spacing-3: 12px;
|
|
57
|
+
--spacing-4: 16px;
|
|
58
|
+
--spacing-5: 20px;
|
|
59
|
+
--spacing-6: 24px;
|
|
60
|
+
--spacing-8: 32px;
|
|
61
|
+
--spacing-10: 40px;
|
|
62
|
+
--spacing-12: 48px;
|
|
63
|
+
--spacing-16: 64px;
|
|
64
|
+
--spacing-20: 80px;
|
|
65
|
+
--spacing-24: 96px;
|
|
66
|
+
--radius-none: 0px;
|
|
67
|
+
--radius-sm: 4px;
|
|
68
|
+
--radius-md: 8px;
|
|
69
|
+
--radius-lg: 12px;
|
|
70
|
+
--radius-xl: 16px;
|
|
71
|
+
--radius-full: 9999px;
|
|
72
|
+
--font-family-sans: Inter, ui-sans-serif, system-ui, sans-serif;
|
|
73
|
+
--font-family-mono: 'JetBrains Mono', ui-monospace, monospace;
|
|
74
|
+
--font-size-xs: 12px;
|
|
75
|
+
--font-size-sm: 14px;
|
|
76
|
+
--font-size-base: 16px;
|
|
77
|
+
--font-size-lg: 18px;
|
|
78
|
+
--font-size-xl: 20px;
|
|
79
|
+
--font-size-2xl: 24px;
|
|
80
|
+
--font-size-3xl: 30px;
|
|
81
|
+
--font-size-4xl: 36px;
|
|
82
|
+
--font-weight-normal: 400;
|
|
83
|
+
--font-weight-medium: 500;
|
|
84
|
+
--font-weight-semibold: 600;
|
|
85
|
+
--font-weight-bold: 700;
|
|
86
|
+
--font-lineHeight-tight: 1.2;
|
|
87
|
+
--font-lineHeight-normal: 1.5;
|
|
88
|
+
--font-lineHeight-relaxed: 1.7;
|
|
89
|
+
}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
export const color_gray_50: string;
|
|
6
|
+
export const color_gray_100: string;
|
|
7
|
+
export const color_gray_200: string;
|
|
8
|
+
export const color_gray_300: string;
|
|
9
|
+
export const color_gray_400: string;
|
|
10
|
+
export const color_gray_500: string;
|
|
11
|
+
export const color_gray_600: string;
|
|
12
|
+
export const color_gray_700: string;
|
|
13
|
+
export const color_gray_800: string;
|
|
14
|
+
export const color_gray_900: string;
|
|
15
|
+
export const color_gray_950: string;
|
|
16
|
+
export const color_brand_50: string;
|
|
17
|
+
export const color_brand_100: string;
|
|
18
|
+
export const color_brand_200: string;
|
|
19
|
+
export const color_brand_300: string;
|
|
20
|
+
export const color_brand_400: string;
|
|
21
|
+
export const color_brand_500: string;
|
|
22
|
+
export const color_brand_600: string;
|
|
23
|
+
export const color_brand_700: string;
|
|
24
|
+
export const color_brand_800: string;
|
|
25
|
+
export const color_brand_900: string;
|
|
26
|
+
export const color_brand_950: string;
|
|
27
|
+
export const color_red_50: string;
|
|
28
|
+
export const color_red_500: string;
|
|
29
|
+
export const color_red_600: string;
|
|
30
|
+
export const color_red_900: string;
|
|
31
|
+
export const color_base_white: string;
|
|
32
|
+
export const color_base_black: string;
|
|
33
|
+
export const color_semantic_background: string;
|
|
34
|
+
export const color_semantic_foreground: string;
|
|
35
|
+
export const color_semantic_card: string;
|
|
36
|
+
export const color_semantic_cardForeground: string;
|
|
37
|
+
export const color_semantic_popover: string;
|
|
38
|
+
export const color_semantic_popoverForeground: string;
|
|
39
|
+
export const color_semantic_primary: string;
|
|
40
|
+
export const color_semantic_primaryForeground: string;
|
|
41
|
+
export const color_semantic_secondary: string;
|
|
42
|
+
export const color_semantic_secondaryForeground: string;
|
|
43
|
+
export const color_semantic_muted: string;
|
|
44
|
+
export const color_semantic_mutedForeground: string;
|
|
45
|
+
export const color_semantic_accent: string;
|
|
46
|
+
export const color_semantic_accentForeground: string;
|
|
47
|
+
export const color_semantic_destructive: string;
|
|
48
|
+
export const color_semantic_destructiveForeground: string;
|
|
49
|
+
export const color_semantic_border: string;
|
|
50
|
+
export const color_semantic_input: string;
|
|
51
|
+
export const color_semantic_ring: string;
|
|
52
|
+
export const spacing_0: string;
|
|
53
|
+
export const spacing_1: string;
|
|
54
|
+
export const spacing_2: string;
|
|
55
|
+
export const spacing_3: string;
|
|
56
|
+
export const spacing_4: string;
|
|
57
|
+
export const spacing_5: string;
|
|
58
|
+
export const spacing_6: string;
|
|
59
|
+
export const spacing_8: string;
|
|
60
|
+
export const spacing_10: string;
|
|
61
|
+
export const spacing_12: string;
|
|
62
|
+
export const spacing_16: string;
|
|
63
|
+
export const spacing_20: string;
|
|
64
|
+
export const spacing_24: string;
|
|
65
|
+
export const radius_none: string;
|
|
66
|
+
export const radius_sm: string;
|
|
67
|
+
export const radius_md: string;
|
|
68
|
+
export const radius_lg: string;
|
|
69
|
+
export const radius_xl: string;
|
|
70
|
+
export const radius_full: string;
|
|
71
|
+
export const font_family_sans: string[];
|
|
72
|
+
export const font_family_mono: string[];
|
|
73
|
+
export const font_size_xs: string;
|
|
74
|
+
export const font_size_sm: string;
|
|
75
|
+
export const font_size_base: string;
|
|
76
|
+
export const font_size_lg: string;
|
|
77
|
+
export const font_size_xl: string;
|
|
78
|
+
export const font_size_2xl: string;
|
|
79
|
+
export const font_size_3xl: string;
|
|
80
|
+
export const font_size_4xl: string;
|
|
81
|
+
export const font_weight_normal: string;
|
|
82
|
+
export const font_weight_medium: string;
|
|
83
|
+
export const font_weight_semibold: string;
|
|
84
|
+
export const font_weight_bold: string;
|
|
85
|
+
export const font_lineHeight_tight: number;
|
|
86
|
+
export const font_lineHeight_normal: number;
|
|
87
|
+
export const font_lineHeight_relaxed: number;
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
export const color_gray_50 = "#fafafa";
|
|
6
|
+
export const color_gray_100 = "#f4f4f5";
|
|
7
|
+
export const color_gray_200 = "#e4e4e7";
|
|
8
|
+
export const color_gray_300 = "#d4d4d8";
|
|
9
|
+
export const color_gray_400 = "#a1a1aa";
|
|
10
|
+
export const color_gray_500 = "#71717a";
|
|
11
|
+
export const color_gray_600 = "#52525b";
|
|
12
|
+
export const color_gray_700 = "#3f3f46";
|
|
13
|
+
export const color_gray_800 = "#27272a";
|
|
14
|
+
export const color_gray_900 = "#18181b";
|
|
15
|
+
export const color_gray_950 = "#09090b";
|
|
16
|
+
export const color_brand_50 = "#eff6ff";
|
|
17
|
+
export const color_brand_100 = "#dbeafe";
|
|
18
|
+
export const color_brand_200 = "#bfdbfe";
|
|
19
|
+
export const color_brand_300 = "#93c5fd";
|
|
20
|
+
export const color_brand_400 = "#60a5fa";
|
|
21
|
+
export const color_brand_500 = "#3b82f6";
|
|
22
|
+
export const color_brand_600 = "#2563eb";
|
|
23
|
+
export const color_brand_700 = "#1d4ed8";
|
|
24
|
+
export const color_brand_800 = "#1e40af";
|
|
25
|
+
export const color_brand_900 = "#1e3a8a";
|
|
26
|
+
export const color_brand_950 = "#172554";
|
|
27
|
+
export const color_red_50 = "#fef2f2";
|
|
28
|
+
export const color_red_500 = "#ef4444";
|
|
29
|
+
export const color_red_600 = "#dc2626";
|
|
30
|
+
export const color_red_900 = "#7f1d1d";
|
|
31
|
+
export const color_base_white = "#ffffff";
|
|
32
|
+
export const color_base_black = "#000000";
|
|
33
|
+
export const color_semantic_background = "#ffffff";
|
|
34
|
+
export const color_semantic_foreground = "#09090b";
|
|
35
|
+
export const color_semantic_card = "#ffffff";
|
|
36
|
+
export const color_semantic_cardForeground = "#09090b";
|
|
37
|
+
export const color_semantic_popover = "#ffffff";
|
|
38
|
+
export const color_semantic_popoverForeground = "#09090b";
|
|
39
|
+
export const color_semantic_primary = "#2563eb";
|
|
40
|
+
export const color_semantic_primaryForeground = "#ffffff";
|
|
41
|
+
export const color_semantic_secondary = "#f4f4f5";
|
|
42
|
+
export const color_semantic_secondaryForeground = "#18181b";
|
|
43
|
+
export const color_semantic_muted = "#f4f4f5";
|
|
44
|
+
export const color_semantic_mutedForeground = "#71717a";
|
|
45
|
+
export const color_semantic_accent = "#f4f4f5";
|
|
46
|
+
export const color_semantic_accentForeground = "#18181b";
|
|
47
|
+
export const color_semantic_destructive = "#dc2626";
|
|
48
|
+
export const color_semantic_destructiveForeground = "#ffffff";
|
|
49
|
+
export const color_semantic_border = "#e4e4e7";
|
|
50
|
+
export const color_semantic_input = "#e4e4e7";
|
|
51
|
+
export const color_semantic_ring = "#2563eb";
|
|
52
|
+
export const spacing_0 = "0px";
|
|
53
|
+
export const spacing_1 = "4px";
|
|
54
|
+
export const spacing_2 = "8px";
|
|
55
|
+
export const spacing_3 = "12px";
|
|
56
|
+
export const spacing_4 = "16px";
|
|
57
|
+
export const spacing_5 = "20px";
|
|
58
|
+
export const spacing_6 = "24px";
|
|
59
|
+
export const spacing_8 = "32px";
|
|
60
|
+
export const spacing_10 = "40px";
|
|
61
|
+
export const spacing_12 = "48px";
|
|
62
|
+
export const spacing_16 = "64px";
|
|
63
|
+
export const spacing_20 = "80px";
|
|
64
|
+
export const spacing_24 = "96px";
|
|
65
|
+
export const radius_none = "0px";
|
|
66
|
+
export const radius_sm = "4px";
|
|
67
|
+
export const radius_md = "8px";
|
|
68
|
+
export const radius_lg = "12px";
|
|
69
|
+
export const radius_xl = "16px";
|
|
70
|
+
export const radius_full = "9999px";
|
|
71
|
+
export const font_family_sans = [
|
|
72
|
+
"Inter",
|
|
73
|
+
"ui-sans-serif",
|
|
74
|
+
"system-ui",
|
|
75
|
+
"sans-serif",
|
|
76
|
+
];
|
|
77
|
+
export const font_family_mono = ["JetBrains Mono", "ui-monospace", "monospace"];
|
|
78
|
+
export const font_size_xs = "12px";
|
|
79
|
+
export const font_size_sm = "14px";
|
|
80
|
+
export const font_size_base = "16px";
|
|
81
|
+
export const font_size_lg = "18px";
|
|
82
|
+
export const font_size_xl = "20px";
|
|
83
|
+
export const font_size_2xl = "24px";
|
|
84
|
+
export const font_size_3xl = "30px";
|
|
85
|
+
export const font_size_4xl = "36px";
|
|
86
|
+
export const font_weight_normal = "400";
|
|
87
|
+
export const font_weight_medium = "500";
|
|
88
|
+
export const font_weight_semibold = "600";
|
|
89
|
+
export const font_weight_bold = "700";
|
|
90
|
+
export const font_lineHeight_tight = 1.2;
|
|
91
|
+
export const font_lineHeight_normal = 1.5;
|
|
92
|
+
export const font_lineHeight_relaxed = 1.7;
|
package/package.json
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@liamkeene/tokens",
|
|
3
|
+
"version": "0.0.0",
|
|
4
|
+
"description": "Platform-agnostic design tokens (color, spacing, typography, radius) for liamkeene.dev projects. Framework-free: no React/Tailwind assumptions.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"publishConfig": {
|
|
7
|
+
"access": "public"
|
|
8
|
+
},
|
|
9
|
+
"type": "module",
|
|
10
|
+
"main": "./dist/js/tokens.js",
|
|
11
|
+
"types": "./dist/js/tokens.d.ts",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"types": "./dist/js/tokens.d.ts",
|
|
15
|
+
"import": "./dist/js/tokens.js"
|
|
16
|
+
},
|
|
17
|
+
"./css": "./dist/css/variables.css",
|
|
18
|
+
"./css/dark": "./dist/css/variables-dark.css"
|
|
19
|
+
},
|
|
20
|
+
"files": [
|
|
21
|
+
"dist"
|
|
22
|
+
],
|
|
23
|
+
"scripts": {
|
|
24
|
+
"build": "node scripts/build.js",
|
|
25
|
+
"dev": "node scripts/build.js --watch",
|
|
26
|
+
"typecheck": "tsc --noEmit -p tsconfig.json"
|
|
27
|
+
},
|
|
28
|
+
"devDependencies": {
|
|
29
|
+
"style-dictionary": "^4.1.0",
|
|
30
|
+
"typescript": "^5.6.0"
|
|
31
|
+
}
|
|
32
|
+
}
|