@wertkit/tokens 0.1.0 → 0.1.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.
Files changed (3) hide show
  1. package/dist/tokens.d.ts +257 -0
  2. package/dist/tokens.js +257 -0
  3. package/package.json +9 -5
package/dist/tokens.d.ts ADDED
@@ -0,0 +1,257 @@
1
+ export declare const themeNames: readonly ["dark", "light", "night", "sepia"];
2
+ export type ThemeName = (typeof themeNames)[number];
3
+ export declare const densities: readonly ["normal", "compact"];
4
+ export type Density = (typeof densities)[number];
5
+ export declare const themes: {
6
+ readonly dark: {
7
+ readonly bg: "#0e1317";
8
+ readonly "bg-subtle": "#1a2127";
9
+ readonly "bg-raised": "#1a2127";
10
+ readonly "bg-inset": "#0e1317";
11
+ readonly fg: "#f7f9fa";
12
+ readonly "fg-muted": "#94a2ae";
13
+ readonly "fg-subtle": "#6b7b89";
14
+ readonly border: "#2b343c";
15
+ readonly "border-strong": "#414d58";
16
+ readonly "focus-ring": "#2bb5ab";
17
+ readonly accent: "#2bb5ab";
18
+ readonly "accent-hover": "#5bd1c8";
19
+ readonly "accent-fg": "#0e1317";
20
+ readonly "accent-subtle": "#042625";
21
+ readonly "fg-on-solid": "#ffffff";
22
+ readonly danger: "#dc3d33";
23
+ readonly "danger-fg": "#f59b96";
24
+ readonly "danger-subtle": "#4a1512";
25
+ readonly warn: "#cf9310";
26
+ readonly "warn-fg": "#f2c65c";
27
+ readonly "warn-subtle": "#442f06";
28
+ readonly success: "#2ea45c";
29
+ readonly "success-fg": "#84d9a1";
30
+ readonly "success-subtle": "#0f321c";
31
+ readonly info: "#3b7fd8";
32
+ readonly "info-fg": "#8fb8f4";
33
+ readonly "info-subtle": "#122844";
34
+ readonly overlay: "rgba(0, 0, 0, 0.6)";
35
+ readonly "syntax-keyword": "#c4a5f2";
36
+ readonly "syntax-string": "#84d9a1";
37
+ readonly "syntax-number": "#f2c65c";
38
+ readonly "syntax-comment": "#6b7b89";
39
+ readonly "syntax-function": "#8fb8f4";
40
+ readonly "syntax-variable": "#f7f9fa";
41
+ readonly "syntax-type": "#5bd1c8";
42
+ readonly "syntax-operator": "#94a2ae";
43
+ readonly "syntax-punctuation": "#6b7b89";
44
+ readonly "syntax-tag": "#f59b96";
45
+ readonly "syntax-attribute": "#f2c65c";
46
+ readonly "syntax-invalid": "#dc3d33";
47
+ };
48
+ readonly light: {
49
+ readonly bg: "#ffffff";
50
+ readonly "bg-subtle": "#f7f9fa";
51
+ readonly "bg-raised": "#ffffff";
52
+ readonly "bg-inset": "#f7f9fa";
53
+ readonly fg: "#1a2127";
54
+ readonly "fg-muted": "#52616e";
55
+ readonly "fg-subtle": "#94a2ae";
56
+ readonly border: "#dde3e8";
57
+ readonly "border-strong": "#c2cbd3";
58
+ readonly "focus-ring": "#12958d";
59
+ readonly accent: "#0b7772";
60
+ readonly "accent-hover": "#0c5f5c";
61
+ readonly "accent-fg": "#ffffff";
62
+ readonly "accent-subtle": "#eafaf8";
63
+ readonly "fg-on-solid": "#ffffff";
64
+ readonly danger: "#dc3d33";
65
+ readonly "danger-fg": "#a02620";
66
+ readonly "danger-subtle": "#fdd9d7";
67
+ readonly warn: "#cf9310";
68
+ readonly "warn-fg": "#94660a";
69
+ readonly "warn-subtle": "#fcecc9";
70
+ readonly success: "#2ea45c";
71
+ readonly "success-fg": "#1c6e3d";
72
+ readonly "success-subtle": "#d3f2dc";
73
+ readonly info: "#3b7fd8";
74
+ readonly "info-fg": "#255494";
75
+ readonly "info-subtle": "#d6e6fd";
76
+ readonly overlay: "rgba(14, 19, 23, 0.45)";
77
+ readonly "syntax-keyword": "#6033c4";
78
+ readonly "syntax-string": "#1c6e3d";
79
+ readonly "syntax-number": "#94660a";
80
+ readonly "syntax-comment": "#94a2ae";
81
+ readonly "syntax-function": "#255494";
82
+ readonly "syntax-variable": "#1a2127";
83
+ readonly "syntax-type": "#0c5f5c";
84
+ readonly "syntax-operator": "#6b7b89";
85
+ readonly "syntax-punctuation": "#94a2ae";
86
+ readonly "syntax-tag": "#a02620";
87
+ readonly "syntax-attribute": "#94660a";
88
+ readonly "syntax-invalid": "#dc3d33";
89
+ };
90
+ readonly night: {
91
+ readonly bg: "#191410";
92
+ readonly "bg-subtle": "#29231b";
93
+ readonly "bg-raised": "#29231b";
94
+ readonly "bg-inset": "#191410";
95
+ readonly fg: "#e8dcc8";
96
+ readonly "fg-muted": "#b8a081";
97
+ readonly "fg-subtle": "#96805f";
98
+ readonly border: "#40372a";
99
+ readonly "border-strong": "#5d4f3a";
100
+ readonly "focus-ring": "#2bb5ab";
101
+ readonly accent: "#5bd1c8";
102
+ readonly "accent-hover": "#96e5de";
103
+ readonly "accent-fg": "#191410";
104
+ readonly "accent-subtle": "#042625";
105
+ readonly "fg-on-solid": "#ffffff";
106
+ readonly danger: "#dc3d33";
107
+ readonly "danger-fg": "#f59b96";
108
+ readonly "danger-subtle": "#4a1512";
109
+ readonly warn: "#cf9310";
110
+ readonly "warn-fg": "#f2c65c";
111
+ readonly "warn-subtle": "#442f06";
112
+ readonly success: "#2ea45c";
113
+ readonly "success-fg": "#84d9a1";
114
+ readonly "success-subtle": "#0f321c";
115
+ readonly info: "#3b7fd8";
116
+ readonly "info-fg": "#8fb8f4";
117
+ readonly "info-subtle": "#122844";
118
+ readonly overlay: "rgba(0, 0, 0, 0.65)";
119
+ readonly "syntax-keyword": "#c4a5f2";
120
+ readonly "syntax-string": "#84d9a1";
121
+ readonly "syntax-number": "#f2c65c";
122
+ readonly "syntax-comment": "#96805f";
123
+ readonly "syntax-function": "#8fb8f4";
124
+ readonly "syntax-variable": "#e8dcc8";
125
+ readonly "syntax-type": "#5bd1c8";
126
+ readonly "syntax-operator": "#b8a081";
127
+ readonly "syntax-punctuation": "#96805f";
128
+ readonly "syntax-tag": "#f59b96";
129
+ readonly "syntax-attribute": "#f2c65c";
130
+ readonly "syntax-invalid": "#dc3d33";
131
+ };
132
+ readonly sepia: {
133
+ readonly bg: "#fbf8f3";
134
+ readonly "bg-subtle": "#f4ede1";
135
+ readonly "bg-raised": "#fbf8f3";
136
+ readonly "bg-inset": "#f4ede1";
137
+ readonly fg: "#29231b";
138
+ readonly "fg-muted": "#5d4f3a";
139
+ readonly "fg-subtle": "#96805f";
140
+ readonly border: "#e8dcc8";
141
+ readonly "border-strong": "#d6c4a6";
142
+ readonly "focus-ring": "#0b7772";
143
+ readonly accent: "#0c5f5c";
144
+ readonly "accent-hover": "#0e4c4a";
145
+ readonly "accent-fg": "#fbf8f3";
146
+ readonly "accent-subtle": "#dcebe4";
147
+ readonly "fg-on-solid": "#fbf8f3";
148
+ readonly danger: "#a02620";
149
+ readonly "danger-fg": "#a02620";
150
+ readonly "danger-subtle": "#fdd9d7";
151
+ readonly warn: "#94660a";
152
+ readonly "warn-fg": "#94660a";
153
+ readonly "warn-subtle": "#fcecc9";
154
+ readonly success: "#1c6e3d";
155
+ readonly "success-fg": "#1c6e3d";
156
+ readonly "success-subtle": "#d3f2dc";
157
+ readonly info: "#255494";
158
+ readonly "info-fg": "#255494";
159
+ readonly "info-subtle": "#d6e6fd";
160
+ readonly overlay: "rgba(41, 35, 27, 0.45)";
161
+ readonly "syntax-keyword": "#6033c4";
162
+ readonly "syntax-string": "#1c6e3d";
163
+ readonly "syntax-number": "#94660a";
164
+ readonly "syntax-comment": "#96805f";
165
+ readonly "syntax-function": "#255494";
166
+ readonly "syntax-variable": "#29231b";
167
+ readonly "syntax-type": "#0c5f5c";
168
+ readonly "syntax-operator": "#77654a";
169
+ readonly "syntax-punctuation": "#96805f";
170
+ readonly "syntax-tag": "#a02620";
171
+ readonly "syntax-attribute": "#94660a";
172
+ readonly "syntax-invalid": "#dc3d33";
173
+ };
174
+ };
175
+ export type ColorRole = keyof (typeof themes)['light'];
176
+ export declare const space: {
177
+ readonly "0": "0";
178
+ readonly "1": "4px";
179
+ readonly "2": "8px";
180
+ readonly "3": "12px";
181
+ readonly "4": "16px";
182
+ readonly "6": "24px";
183
+ readonly "8": "32px";
184
+ readonly "12": "48px";
185
+ readonly "16": "64px";
186
+ };
187
+ export declare const radius: {
188
+ readonly sm: "6px";
189
+ readonly md: "8px";
190
+ readonly lg: "12px";
191
+ readonly full: "9999px";
192
+ };
193
+ export declare const text: {
194
+ readonly xs: {
195
+ readonly size: "0.75rem";
196
+ readonly line: "1rem";
197
+ };
198
+ readonly sm: {
199
+ readonly size: "0.8125rem";
200
+ readonly line: "1.25rem";
201
+ };
202
+ readonly md: {
203
+ readonly size: "0.875rem";
204
+ readonly line: "1.5rem";
205
+ };
206
+ readonly lg: {
207
+ readonly size: "1rem";
208
+ readonly line: "1.625rem";
209
+ };
210
+ readonly xl: {
211
+ readonly size: "1.25rem";
212
+ readonly line: "1.875rem";
213
+ };
214
+ readonly "2xl": {
215
+ readonly size: "1.5rem";
216
+ readonly line: "2.125rem";
217
+ };
218
+ };
219
+ export declare const weight: {
220
+ readonly regular: "400";
221
+ readonly medium: "500";
222
+ readonly semibold: "600";
223
+ };
224
+ export declare const font: {
225
+ readonly sans: "Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif";
226
+ readonly mono: "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
227
+ };
228
+ export declare const motion: {
229
+ readonly fast: "120ms";
230
+ readonly base: "200ms";
231
+ readonly ease: "cubic-bezier(0.2, 0, 0.2, 1)";
232
+ readonly "ease-out": "cubic-bezier(0, 0, 0.2, 1)";
233
+ };
234
+ export declare const tracking: {
235
+ readonly tight: "-0.014em";
236
+ readonly normal: "0";
237
+ readonly wide: "0.02em";
238
+ };
239
+ export declare const control: {
240
+ readonly normal: {
241
+ readonly sm: "28px";
242
+ readonly md: "36px";
243
+ readonly lg: "44px";
244
+ };
245
+ readonly compact: {
246
+ readonly sm: "24px";
247
+ readonly md: "30px";
248
+ readonly lg: "36px";
249
+ };
250
+ readonly coarse: {
251
+ readonly sm: "36px";
252
+ readonly md: "44px";
253
+ readonly lg: "52px";
254
+ };
255
+ };
256
+ /** CSS custom-property name for a colour role, e.g. cssVar('fg-muted'). */
257
+ export declare const cssVar: (role: ColorRole | string) => string;
package/dist/tokens.js ADDED
@@ -0,0 +1,257 @@
1
+ // GENERATED by @wertkit/tokens - do not edit.
2
+ // Plain values, no CSS dependency, so a future React Native target can consume
3
+ // the same source of truth.
4
+ export const themeNames = ["dark", "light", "night", "sepia"];
5
+ export const densities = ['normal', 'compact'];
6
+ export const themes = {
7
+ "dark": {
8
+ "bg": "#0e1317",
9
+ "bg-subtle": "#1a2127",
10
+ "bg-raised": "#1a2127",
11
+ "bg-inset": "#0e1317",
12
+ "fg": "#f7f9fa",
13
+ "fg-muted": "#94a2ae",
14
+ "fg-subtle": "#6b7b89",
15
+ "border": "#2b343c",
16
+ "border-strong": "#414d58",
17
+ "focus-ring": "#2bb5ab",
18
+ "accent": "#2bb5ab",
19
+ "accent-hover": "#5bd1c8",
20
+ "accent-fg": "#0e1317",
21
+ "accent-subtle": "#042625",
22
+ "fg-on-solid": "#ffffff",
23
+ "danger": "#dc3d33",
24
+ "danger-fg": "#f59b96",
25
+ "danger-subtle": "#4a1512",
26
+ "warn": "#cf9310",
27
+ "warn-fg": "#f2c65c",
28
+ "warn-subtle": "#442f06",
29
+ "success": "#2ea45c",
30
+ "success-fg": "#84d9a1",
31
+ "success-subtle": "#0f321c",
32
+ "info": "#3b7fd8",
33
+ "info-fg": "#8fb8f4",
34
+ "info-subtle": "#122844",
35
+ "overlay": "rgba(0, 0, 0, 0.6)",
36
+ "syntax-keyword": "#c4a5f2",
37
+ "syntax-string": "#84d9a1",
38
+ "syntax-number": "#f2c65c",
39
+ "syntax-comment": "#6b7b89",
40
+ "syntax-function": "#8fb8f4",
41
+ "syntax-variable": "#f7f9fa",
42
+ "syntax-type": "#5bd1c8",
43
+ "syntax-operator": "#94a2ae",
44
+ "syntax-punctuation": "#6b7b89",
45
+ "syntax-tag": "#f59b96",
46
+ "syntax-attribute": "#f2c65c",
47
+ "syntax-invalid": "#dc3d33"
48
+ },
49
+ "light": {
50
+ "bg": "#ffffff",
51
+ "bg-subtle": "#f7f9fa",
52
+ "bg-raised": "#ffffff",
53
+ "bg-inset": "#f7f9fa",
54
+ "fg": "#1a2127",
55
+ "fg-muted": "#52616e",
56
+ "fg-subtle": "#94a2ae",
57
+ "border": "#dde3e8",
58
+ "border-strong": "#c2cbd3",
59
+ "focus-ring": "#12958d",
60
+ "accent": "#0b7772",
61
+ "accent-hover": "#0c5f5c",
62
+ "accent-fg": "#ffffff",
63
+ "accent-subtle": "#eafaf8",
64
+ "fg-on-solid": "#ffffff",
65
+ "danger": "#dc3d33",
66
+ "danger-fg": "#a02620",
67
+ "danger-subtle": "#fdd9d7",
68
+ "warn": "#cf9310",
69
+ "warn-fg": "#94660a",
70
+ "warn-subtle": "#fcecc9",
71
+ "success": "#2ea45c",
72
+ "success-fg": "#1c6e3d",
73
+ "success-subtle": "#d3f2dc",
74
+ "info": "#3b7fd8",
75
+ "info-fg": "#255494",
76
+ "info-subtle": "#d6e6fd",
77
+ "overlay": "rgba(14, 19, 23, 0.45)",
78
+ "syntax-keyword": "#6033c4",
79
+ "syntax-string": "#1c6e3d",
80
+ "syntax-number": "#94660a",
81
+ "syntax-comment": "#94a2ae",
82
+ "syntax-function": "#255494",
83
+ "syntax-variable": "#1a2127",
84
+ "syntax-type": "#0c5f5c",
85
+ "syntax-operator": "#6b7b89",
86
+ "syntax-punctuation": "#94a2ae",
87
+ "syntax-tag": "#a02620",
88
+ "syntax-attribute": "#94660a",
89
+ "syntax-invalid": "#dc3d33"
90
+ },
91
+ "night": {
92
+ "bg": "#191410",
93
+ "bg-subtle": "#29231b",
94
+ "bg-raised": "#29231b",
95
+ "bg-inset": "#191410",
96
+ "fg": "#e8dcc8",
97
+ "fg-muted": "#b8a081",
98
+ "fg-subtle": "#96805f",
99
+ "border": "#40372a",
100
+ "border-strong": "#5d4f3a",
101
+ "focus-ring": "#2bb5ab",
102
+ "accent": "#5bd1c8",
103
+ "accent-hover": "#96e5de",
104
+ "accent-fg": "#191410",
105
+ "accent-subtle": "#042625",
106
+ "fg-on-solid": "#ffffff",
107
+ "danger": "#dc3d33",
108
+ "danger-fg": "#f59b96",
109
+ "danger-subtle": "#4a1512",
110
+ "warn": "#cf9310",
111
+ "warn-fg": "#f2c65c",
112
+ "warn-subtle": "#442f06",
113
+ "success": "#2ea45c",
114
+ "success-fg": "#84d9a1",
115
+ "success-subtle": "#0f321c",
116
+ "info": "#3b7fd8",
117
+ "info-fg": "#8fb8f4",
118
+ "info-subtle": "#122844",
119
+ "overlay": "rgba(0, 0, 0, 0.65)",
120
+ "syntax-keyword": "#c4a5f2",
121
+ "syntax-string": "#84d9a1",
122
+ "syntax-number": "#f2c65c",
123
+ "syntax-comment": "#96805f",
124
+ "syntax-function": "#8fb8f4",
125
+ "syntax-variable": "#e8dcc8",
126
+ "syntax-type": "#5bd1c8",
127
+ "syntax-operator": "#b8a081",
128
+ "syntax-punctuation": "#96805f",
129
+ "syntax-tag": "#f59b96",
130
+ "syntax-attribute": "#f2c65c",
131
+ "syntax-invalid": "#dc3d33"
132
+ },
133
+ "sepia": {
134
+ "bg": "#fbf8f3",
135
+ "bg-subtle": "#f4ede1",
136
+ "bg-raised": "#fbf8f3",
137
+ "bg-inset": "#f4ede1",
138
+ "fg": "#29231b",
139
+ "fg-muted": "#5d4f3a",
140
+ "fg-subtle": "#96805f",
141
+ "border": "#e8dcc8",
142
+ "border-strong": "#d6c4a6",
143
+ "focus-ring": "#0b7772",
144
+ "accent": "#0c5f5c",
145
+ "accent-hover": "#0e4c4a",
146
+ "accent-fg": "#fbf8f3",
147
+ "accent-subtle": "#dcebe4",
148
+ "fg-on-solid": "#fbf8f3",
149
+ "danger": "#a02620",
150
+ "danger-fg": "#a02620",
151
+ "danger-subtle": "#fdd9d7",
152
+ "warn": "#94660a",
153
+ "warn-fg": "#94660a",
154
+ "warn-subtle": "#fcecc9",
155
+ "success": "#1c6e3d",
156
+ "success-fg": "#1c6e3d",
157
+ "success-subtle": "#d3f2dc",
158
+ "info": "#255494",
159
+ "info-fg": "#255494",
160
+ "info-subtle": "#d6e6fd",
161
+ "overlay": "rgba(41, 35, 27, 0.45)",
162
+ "syntax-keyword": "#6033c4",
163
+ "syntax-string": "#1c6e3d",
164
+ "syntax-number": "#94660a",
165
+ "syntax-comment": "#96805f",
166
+ "syntax-function": "#255494",
167
+ "syntax-variable": "#29231b",
168
+ "syntax-type": "#0c5f5c",
169
+ "syntax-operator": "#77654a",
170
+ "syntax-punctuation": "#96805f",
171
+ "syntax-tag": "#a02620",
172
+ "syntax-attribute": "#94660a",
173
+ "syntax-invalid": "#dc3d33"
174
+ }
175
+ };
176
+ export const space = {
177
+ "0": "0",
178
+ "1": "4px",
179
+ "2": "8px",
180
+ "3": "12px",
181
+ "4": "16px",
182
+ "6": "24px",
183
+ "8": "32px",
184
+ "12": "48px",
185
+ "16": "64px"
186
+ };
187
+ export const radius = {
188
+ "sm": "6px",
189
+ "md": "8px",
190
+ "lg": "12px",
191
+ "full": "9999px"
192
+ };
193
+ export const text = {
194
+ "xs": {
195
+ "size": "0.75rem",
196
+ "line": "1rem"
197
+ },
198
+ "sm": {
199
+ "size": "0.8125rem",
200
+ "line": "1.25rem"
201
+ },
202
+ "md": {
203
+ "size": "0.875rem",
204
+ "line": "1.5rem"
205
+ },
206
+ "lg": {
207
+ "size": "1rem",
208
+ "line": "1.625rem"
209
+ },
210
+ "xl": {
211
+ "size": "1.25rem",
212
+ "line": "1.875rem"
213
+ },
214
+ "2xl": {
215
+ "size": "1.5rem",
216
+ "line": "2.125rem"
217
+ }
218
+ };
219
+ export const weight = {
220
+ "regular": "400",
221
+ "medium": "500",
222
+ "semibold": "600"
223
+ };
224
+ export const font = {
225
+ "sans": "Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
226
+ "mono": "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
227
+ };
228
+ export const motion = {
229
+ "fast": "120ms",
230
+ "base": "200ms",
231
+ "ease": "cubic-bezier(0.2, 0, 0.2, 1)",
232
+ "ease-out": "cubic-bezier(0, 0, 0.2, 1)"
233
+ };
234
+ export const tracking = {
235
+ "tight": "-0.014em",
236
+ "normal": "0",
237
+ "wide": "0.02em"
238
+ };
239
+ export const control = {
240
+ "normal": {
241
+ "sm": "28px",
242
+ "md": "36px",
243
+ "lg": "44px"
244
+ },
245
+ "compact": {
246
+ "sm": "24px",
247
+ "md": "30px",
248
+ "lg": "36px"
249
+ },
250
+ "coarse": {
251
+ "sm": "36px",
252
+ "md": "44px",
253
+ "lg": "52px"
254
+ }
255
+ };
256
+ /** CSS custom-property name for a colour role, e.g. cssVar('fg-muted'). */
257
+ export const cssVar = (role) => `var(--wk-${role})`;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wertkit/tokens",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "description": "Platform-neutral design tokens. Source of truth for every wertkit target.",
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",
@@ -8,16 +8,20 @@
8
8
  "dist",
9
9
  "src"
10
10
  ],
11
- "main": "./dist/tokens.ts",
12
- "types": "./dist/tokens.ts",
11
+ "main": "./dist/tokens.js",
12
+ "types": "./dist/tokens.d.ts",
13
13
  "exports": {
14
- ".": "./dist/tokens.ts",
14
+ ".": {
15
+ "types": "./dist/tokens.d.ts",
16
+ "import": "./dist/tokens.js"
17
+ },
15
18
  "./css": "./dist/tokens.css",
16
19
  "./rust": "./dist/tokens.rs",
20
+ "./ts": "./dist/tokens.ts",
17
21
  "./src/*": "./src/*"
18
22
  },
19
23
  "scripts": {
20
- "build": "node scripts/build.mjs",
24
+ "build": "node scripts/build.mjs && tsc -p tsconfig.build.json",
21
25
  "typecheck": "tsc --noEmit"
22
26
  }
23
27
  }