haus-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.
- package/dist/index.d.ts +72 -72
- package/dist/index.js +138 -96
- package/dist/index.js.map +1 -1
- package/dist/primitives.css +138 -135
- package/dist/semantics.css +3 -0
- package/package.json +6 -6
package/dist/index.d.ts
CHANGED
|
@@ -1,62 +1,62 @@
|
|
|
1
1
|
declare const tokens: {
|
|
2
2
|
readonly color: {
|
|
3
3
|
readonly aronia: {
|
|
4
|
-
readonly 100: "oklch(97% 0.012 300)";
|
|
5
|
-
readonly 200: "oklch(92% 0.028 300)";
|
|
6
|
-
readonly 300: "oklch(84% 0.058 300)";
|
|
7
|
-
readonly 400: "oklch(72% 0.100 300)";
|
|
8
|
-
readonly 500: "oklch(52% 0.138 300)";
|
|
9
|
-
readonly 600: "oklch(43% 0.125 300)";
|
|
10
|
-
readonly 700: "oklch(35% 0.105 300)";
|
|
11
|
-
readonly 800: "oklch(26% 0.080 300)";
|
|
12
|
-
readonly 900: "oklch(18% 0.052 300)";
|
|
13
|
-
readonly 950: "oklch(12% 0.032 300)";
|
|
4
|
+
readonly "100": "oklch(97% 0.012 300)";
|
|
5
|
+
readonly "200": "oklch(92% 0.028 300)";
|
|
6
|
+
readonly "300": "oklch(84% 0.058 300)";
|
|
7
|
+
readonly "400": "oklch(72% 0.100 300)";
|
|
8
|
+
readonly "500": "oklch(52% 0.138 300)";
|
|
9
|
+
readonly "600": "oklch(43% 0.125 300)";
|
|
10
|
+
readonly "700": "oklch(35% 0.105 300)";
|
|
11
|
+
readonly "800": "oklch(26% 0.080 300)";
|
|
12
|
+
readonly "900": "oklch(18% 0.052 300)";
|
|
13
|
+
readonly "950": "oklch(12% 0.032 300)";
|
|
14
14
|
};
|
|
15
15
|
readonly damson: {
|
|
16
|
-
readonly 0: "oklch(100% 0 0)";
|
|
17
|
-
readonly 50: "oklch(99% 0.003 290)";
|
|
18
|
-
readonly 100: "oklch(97% 0.006 290)";
|
|
19
|
-
readonly 200: "oklch(93% 0.008 290)";
|
|
20
|
-
readonly 300: "oklch(86% 0.010 290)";
|
|
21
|
-
readonly 400: "oklch(74% 0.010 290)";
|
|
22
|
-
readonly 500: "oklch(60% 0.008 290)";
|
|
23
|
-
readonly 600: "oklch(48% 0.007 290)";
|
|
24
|
-
readonly 700: "oklch(37% 0.006 290)";
|
|
25
|
-
readonly 800: "oklch(27% 0.005 290)";
|
|
26
|
-
readonly 900: "oklch(18% 0.003 290)";
|
|
27
|
-
readonly 950: "oklch(11% 0.002 290)";
|
|
16
|
+
readonly "0": "oklch(100% 0 0)";
|
|
17
|
+
readonly "50": "oklch(99% 0.003 290)";
|
|
18
|
+
readonly "100": "oklch(97% 0.006 290)";
|
|
19
|
+
readonly "200": "oklch(93% 0.008 290)";
|
|
20
|
+
readonly "300": "oklch(86% 0.010 290)";
|
|
21
|
+
readonly "400": "oklch(74% 0.010 290)";
|
|
22
|
+
readonly "500": "oklch(60% 0.008 290)";
|
|
23
|
+
readonly "600": "oklch(48% 0.007 290)";
|
|
24
|
+
readonly "700": "oklch(37% 0.006 290)";
|
|
25
|
+
readonly "800": "oklch(27% 0.005 290)";
|
|
26
|
+
readonly "900": "oklch(18% 0.003 290)";
|
|
27
|
+
readonly "950": "oklch(11% 0.002 290)";
|
|
28
28
|
};
|
|
29
29
|
readonly elderberry: {
|
|
30
|
-
readonly 100: "oklch(97% 0.020 265)";
|
|
31
|
-
readonly 200: "oklch(93% 0.040 265)";
|
|
32
|
-
readonly 400: "oklch(74% 0.160 265)";
|
|
33
|
-
readonly 500: "oklch(55% 0.200 265)";
|
|
34
|
-
readonly 700: "oklch(42% 0.160 265)";
|
|
35
|
-
readonly 900: "oklch(30% 0.120 265)";
|
|
30
|
+
readonly "100": "oklch(97% 0.020 265)";
|
|
31
|
+
readonly "200": "oklch(93% 0.040 265)";
|
|
32
|
+
readonly "400": "oklch(74% 0.160 265)";
|
|
33
|
+
readonly "500": "oklch(55% 0.200 265)";
|
|
34
|
+
readonly "700": "oklch(42% 0.160 265)";
|
|
35
|
+
readonly "900": "oklch(30% 0.120 265)";
|
|
36
36
|
};
|
|
37
37
|
readonly greengage: {
|
|
38
|
-
readonly 100: "oklch(97% 0.030 148)";
|
|
39
|
-
readonly 200: "oklch(93% 0.055 148)";
|
|
40
|
-
readonly 400: "oklch(75% 0.150 148)";
|
|
41
|
-
readonly 500: "oklch(58% 0.185 148)";
|
|
42
|
-
readonly 700: "oklch(45% 0.150 148)";
|
|
43
|
-
readonly 900: "oklch(33% 0.110 148)";
|
|
38
|
+
readonly "100": "oklch(97% 0.030 148)";
|
|
39
|
+
readonly "200": "oklch(93% 0.055 148)";
|
|
40
|
+
readonly "400": "oklch(75% 0.150 148)";
|
|
41
|
+
readonly "500": "oklch(58% 0.185 148)";
|
|
42
|
+
readonly "700": "oklch(45% 0.150 148)";
|
|
43
|
+
readonly "900": "oklch(33% 0.110 148)";
|
|
44
44
|
};
|
|
45
45
|
readonly mango: {
|
|
46
|
-
readonly 100: "oklch(97% 0.025 65)";
|
|
47
|
-
readonly 200: "oklch(93% 0.045 65)";
|
|
48
|
-
readonly 400: "oklch(76% 0.145 65)";
|
|
49
|
-
readonly 500: "oklch(60% 0.175 65)";
|
|
50
|
-
readonly 700: "oklch(47% 0.142 65)";
|
|
51
|
-
readonly 900: "oklch(38% 0.110 65)";
|
|
46
|
+
readonly "100": "oklch(97% 0.025 65)";
|
|
47
|
+
readonly "200": "oklch(93% 0.045 65)";
|
|
48
|
+
readonly "400": "oklch(76% 0.145 65)";
|
|
49
|
+
readonly "500": "oklch(60% 0.175 65)";
|
|
50
|
+
readonly "700": "oklch(47% 0.142 65)";
|
|
51
|
+
readonly "900": "oklch(38% 0.110 65)";
|
|
52
52
|
};
|
|
53
53
|
readonly cherry: {
|
|
54
|
-
readonly 100: "oklch(97% 0.030 27)";
|
|
55
|
-
readonly 200: "oklch(93% 0.055 27)";
|
|
56
|
-
readonly 400: "oklch(74% 0.160 27)";
|
|
57
|
-
readonly 500: "oklch(58% 0.200 27)";
|
|
58
|
-
readonly 700: "oklch(44% 0.168 27)";
|
|
59
|
-
readonly 900: "oklch(33% 0.110 27)";
|
|
54
|
+
readonly "100": "oklch(97% 0.030 27)";
|
|
55
|
+
readonly "200": "oklch(93% 0.055 27)";
|
|
56
|
+
readonly "400": "oklch(74% 0.160 27)";
|
|
57
|
+
readonly "500": "oklch(58% 0.200 27)";
|
|
58
|
+
readonly "700": "oklch(44% 0.168 27)";
|
|
59
|
+
readonly "900": "oklch(33% 0.110 27)";
|
|
60
60
|
};
|
|
61
61
|
};
|
|
62
62
|
readonly font: {
|
|
@@ -65,14 +65,14 @@ declare const tokens: {
|
|
|
65
65
|
readonly mono: "'Fira Code', ui-monospace, monospace";
|
|
66
66
|
};
|
|
67
67
|
readonly size: {
|
|
68
|
-
readonly 11: "0.6875rem";
|
|
69
|
-
readonly 12: "0.75rem";
|
|
70
|
-
readonly 13: "0.8125rem";
|
|
71
|
-
readonly 14: "0.875rem";
|
|
72
|
-
readonly 16: "1rem";
|
|
73
|
-
readonly 20: "1.25rem";
|
|
74
|
-
readonly 24: "1.5rem";
|
|
75
|
-
readonly 30: "1.875rem";
|
|
68
|
+
readonly "11": "0.6875rem";
|
|
69
|
+
readonly "12": "0.75rem";
|
|
70
|
+
readonly "13": "0.8125rem";
|
|
71
|
+
readonly "14": "0.875rem";
|
|
72
|
+
readonly "16": "1rem";
|
|
73
|
+
readonly "20": "1.25rem";
|
|
74
|
+
readonly "24": "1.5rem";
|
|
75
|
+
readonly "30": "1.875rem";
|
|
76
76
|
};
|
|
77
77
|
readonly weight: {
|
|
78
78
|
readonly regular: 400;
|
|
@@ -97,18 +97,18 @@ declare const tokens: {
|
|
|
97
97
|
};
|
|
98
98
|
};
|
|
99
99
|
readonly spacing: {
|
|
100
|
-
readonly 1: "0.25rem";
|
|
101
|
-
readonly 2: "0.5rem";
|
|
102
|
-
readonly 3: "0.75rem";
|
|
103
|
-
readonly 4: "1rem";
|
|
104
|
-
readonly 5: "1.25rem";
|
|
105
|
-
readonly 6: "1.5rem";
|
|
106
|
-
readonly 7: "1.75rem";
|
|
107
|
-
readonly 8: "2rem";
|
|
108
|
-
readonly 10: "2.5rem";
|
|
109
|
-
readonly 12: "3rem";
|
|
110
|
-
readonly 16: "4rem";
|
|
111
|
-
readonly 20: "5rem";
|
|
100
|
+
readonly "1": "0.25rem";
|
|
101
|
+
readonly "2": "0.5rem";
|
|
102
|
+
readonly "3": "0.75rem";
|
|
103
|
+
readonly "4": "1rem";
|
|
104
|
+
readonly "5": "1.25rem";
|
|
105
|
+
readonly "6": "1.5rem";
|
|
106
|
+
readonly "7": "1.75rem";
|
|
107
|
+
readonly "8": "2rem";
|
|
108
|
+
readonly "10": "2.5rem";
|
|
109
|
+
readonly "12": "3rem";
|
|
110
|
+
readonly "16": "4rem";
|
|
111
|
+
readonly "20": "5rem";
|
|
112
112
|
};
|
|
113
113
|
readonly radius: {
|
|
114
114
|
readonly none: "0";
|
|
@@ -116,7 +116,7 @@ declare const tokens: {
|
|
|
116
116
|
readonly md: "0.5rem";
|
|
117
117
|
readonly lg: "0.75rem";
|
|
118
118
|
readonly xl: "1rem";
|
|
119
|
-
readonly
|
|
119
|
+
readonly "2xl": "1.5rem";
|
|
120
120
|
readonly full: "9999px";
|
|
121
121
|
};
|
|
122
122
|
readonly duration: {
|
|
@@ -134,10 +134,10 @@ declare const tokens: {
|
|
|
134
134
|
readonly linear: "linear";
|
|
135
135
|
};
|
|
136
136
|
readonly motion: {
|
|
137
|
-
readonly
|
|
138
|
-
readonly
|
|
139
|
-
readonly
|
|
140
|
-
readonly
|
|
137
|
+
readonly "fade-in": "200ms cubic-bezier(0.00, 0.00, 0.20, 1.00)";
|
|
138
|
+
readonly "fade-out": "100ms cubic-bezier(0.40, 0.00, 1.00, 1.00)";
|
|
139
|
+
readonly "slide-in": "300ms cubic-bezier(0.00, 0.00, 0.20, 1.00)";
|
|
140
|
+
readonly "slide-out": "100ms cubic-bezier(0.40, 0.00, 1.00, 1.00)";
|
|
141
141
|
readonly micro: "100ms cubic-bezier(0.40, 0.00, 0.20, 1.00)";
|
|
142
142
|
readonly interactive: "200ms cubic-bezier(0.40, 0.00, 0.20, 1.00)";
|
|
143
143
|
};
|
|
@@ -178,7 +178,7 @@ declare const tokens: {
|
|
|
178
178
|
readonly md: "768px";
|
|
179
179
|
readonly lg: "1024px";
|
|
180
180
|
readonly xl: "1280px";
|
|
181
|
-
readonly
|
|
181
|
+
readonly "2xl": "1536px";
|
|
182
182
|
};
|
|
183
183
|
};
|
|
184
184
|
type Tokens = typeof tokens;
|
package/dist/index.js
CHANGED
|
@@ -1,77 +1,63 @@
|
|
|
1
1
|
// src/index.ts
|
|
2
|
-
var dur = {
|
|
3
|
-
instant: "50ms",
|
|
4
|
-
fast: "100ms",
|
|
5
|
-
normal: "200ms",
|
|
6
|
-
moderate: "300ms",
|
|
7
|
-
slow: "500ms"
|
|
8
|
-
};
|
|
9
|
-
var ease = {
|
|
10
|
-
enter: "cubic-bezier(0.00, 0.00, 0.20, 1.00)",
|
|
11
|
-
exit: "cubic-bezier(0.40, 0.00, 1.00, 1.00)",
|
|
12
|
-
move: "cubic-bezier(0.40, 0.00, 0.20, 1.00)",
|
|
13
|
-
spring: "cubic-bezier(0.34, 1.56, 0.64, 1.00)",
|
|
14
|
-
linear: "linear"
|
|
15
|
-
};
|
|
16
2
|
var tokens = {
|
|
17
3
|
color: {
|
|
18
4
|
aronia: {
|
|
19
|
-
100: "oklch(97% 0.012 300)",
|
|
20
|
-
200: "oklch(92% 0.028 300)",
|
|
21
|
-
300: "oklch(84% 0.058 300)",
|
|
22
|
-
400: "oklch(72% 0.100 300)",
|
|
23
|
-
500: "oklch(52% 0.138 300)",
|
|
24
|
-
600: "oklch(43% 0.125 300)",
|
|
25
|
-
700: "oklch(35% 0.105 300)",
|
|
26
|
-
800: "oklch(26% 0.080 300)",
|
|
27
|
-
900: "oklch(18% 0.052 300)",
|
|
28
|
-
950: "oklch(12% 0.032 300)"
|
|
5
|
+
"100": "oklch(97% 0.012 300)",
|
|
6
|
+
"200": "oklch(92% 0.028 300)",
|
|
7
|
+
"300": "oklch(84% 0.058 300)",
|
|
8
|
+
"400": "oklch(72% 0.100 300)",
|
|
9
|
+
"500": "oklch(52% 0.138 300)",
|
|
10
|
+
"600": "oklch(43% 0.125 300)",
|
|
11
|
+
"700": "oklch(35% 0.105 300)",
|
|
12
|
+
"800": "oklch(26% 0.080 300)",
|
|
13
|
+
"900": "oklch(18% 0.052 300)",
|
|
14
|
+
"950": "oklch(12% 0.032 300)"
|
|
29
15
|
},
|
|
30
16
|
damson: {
|
|
31
|
-
0: "oklch(100% 0 0)",
|
|
32
|
-
50: "oklch(99% 0.003 290)",
|
|
33
|
-
100: "oklch(97% 0.006 290)",
|
|
34
|
-
200: "oklch(93% 0.008 290)",
|
|
35
|
-
300: "oklch(86% 0.010 290)",
|
|
36
|
-
400: "oklch(74% 0.010 290)",
|
|
37
|
-
500: "oklch(60% 0.008 290)",
|
|
38
|
-
600: "oklch(48% 0.007 290)",
|
|
39
|
-
700: "oklch(37% 0.006 290)",
|
|
40
|
-
800: "oklch(27% 0.005 290)",
|
|
41
|
-
900: "oklch(18% 0.003 290)",
|
|
42
|
-
950: "oklch(11% 0.002 290)"
|
|
17
|
+
"0": "oklch(100% 0 0)",
|
|
18
|
+
"50": "oklch(99% 0.003 290)",
|
|
19
|
+
"100": "oklch(97% 0.006 290)",
|
|
20
|
+
"200": "oklch(93% 0.008 290)",
|
|
21
|
+
"300": "oklch(86% 0.010 290)",
|
|
22
|
+
"400": "oklch(74% 0.010 290)",
|
|
23
|
+
"500": "oklch(60% 0.008 290)",
|
|
24
|
+
"600": "oklch(48% 0.007 290)",
|
|
25
|
+
"700": "oklch(37% 0.006 290)",
|
|
26
|
+
"800": "oklch(27% 0.005 290)",
|
|
27
|
+
"900": "oklch(18% 0.003 290)",
|
|
28
|
+
"950": "oklch(11% 0.002 290)"
|
|
43
29
|
},
|
|
44
30
|
elderberry: {
|
|
45
|
-
100: "oklch(97% 0.020 265)",
|
|
46
|
-
200: "oklch(93% 0.040 265)",
|
|
47
|
-
400: "oklch(74% 0.160 265)",
|
|
48
|
-
500: "oklch(55% 0.200 265)",
|
|
49
|
-
700: "oklch(42% 0.160 265)",
|
|
50
|
-
900: "oklch(30% 0.120 265)"
|
|
31
|
+
"100": "oklch(97% 0.020 265)",
|
|
32
|
+
"200": "oklch(93% 0.040 265)",
|
|
33
|
+
"400": "oklch(74% 0.160 265)",
|
|
34
|
+
"500": "oklch(55% 0.200 265)",
|
|
35
|
+
"700": "oklch(42% 0.160 265)",
|
|
36
|
+
"900": "oklch(30% 0.120 265)"
|
|
51
37
|
},
|
|
52
38
|
greengage: {
|
|
53
|
-
100: "oklch(97% 0.030 148)",
|
|
54
|
-
200: "oklch(93% 0.055 148)",
|
|
55
|
-
400: "oklch(75% 0.150 148)",
|
|
56
|
-
500: "oklch(58% 0.185 148)",
|
|
57
|
-
700: "oklch(45% 0.150 148)",
|
|
58
|
-
900: "oklch(33% 0.110 148)"
|
|
39
|
+
"100": "oklch(97% 0.030 148)",
|
|
40
|
+
"200": "oklch(93% 0.055 148)",
|
|
41
|
+
"400": "oklch(75% 0.150 148)",
|
|
42
|
+
"500": "oklch(58% 0.185 148)",
|
|
43
|
+
"700": "oklch(45% 0.150 148)",
|
|
44
|
+
"900": "oklch(33% 0.110 148)"
|
|
59
45
|
},
|
|
60
46
|
mango: {
|
|
61
|
-
100: "oklch(97% 0.025 65)",
|
|
62
|
-
200: "oklch(93% 0.045 65)",
|
|
63
|
-
400: "oklch(76% 0.145 65)",
|
|
64
|
-
500: "oklch(60% 0.175 65)",
|
|
65
|
-
700: "oklch(47% 0.142 65)",
|
|
66
|
-
900: "oklch(38% 0.110 65)"
|
|
47
|
+
"100": "oklch(97% 0.025 65)",
|
|
48
|
+
"200": "oklch(93% 0.045 65)",
|
|
49
|
+
"400": "oklch(76% 0.145 65)",
|
|
50
|
+
"500": "oklch(60% 0.175 65)",
|
|
51
|
+
"700": "oklch(47% 0.142 65)",
|
|
52
|
+
"900": "oklch(38% 0.110 65)"
|
|
67
53
|
},
|
|
68
54
|
cherry: {
|
|
69
|
-
100: "oklch(97% 0.030 27)",
|
|
70
|
-
200: "oklch(93% 0.055 27)",
|
|
71
|
-
400: "oklch(74% 0.160 27)",
|
|
72
|
-
500: "oklch(58% 0.200 27)",
|
|
73
|
-
700: "oklch(44% 0.168 27)",
|
|
74
|
-
900: "oklch(33% 0.110 27)"
|
|
55
|
+
"100": "oklch(97% 0.030 27)",
|
|
56
|
+
"200": "oklch(93% 0.055 27)",
|
|
57
|
+
"400": "oklch(74% 0.160 27)",
|
|
58
|
+
"500": "oklch(58% 0.200 27)",
|
|
59
|
+
"700": "oklch(44% 0.168 27)",
|
|
60
|
+
"900": "oklch(33% 0.110 27)"
|
|
75
61
|
}
|
|
76
62
|
},
|
|
77
63
|
font: {
|
|
@@ -80,43 +66,81 @@ var tokens = {
|
|
|
80
66
|
mono: "'Fira Code', ui-monospace, monospace"
|
|
81
67
|
},
|
|
82
68
|
size: {
|
|
83
|
-
11: "0.6875rem",
|
|
84
|
-
12: "0.75rem",
|
|
85
|
-
13: "0.8125rem",
|
|
86
|
-
14: "0.875rem",
|
|
87
|
-
16: "1rem",
|
|
88
|
-
20: "1.25rem",
|
|
89
|
-
24: "1.5rem",
|
|
90
|
-
30: "1.875rem"
|
|
69
|
+
"11": "0.6875rem",
|
|
70
|
+
"12": "0.75rem",
|
|
71
|
+
"13": "0.8125rem",
|
|
72
|
+
"14": "0.875rem",
|
|
73
|
+
"16": "1rem",
|
|
74
|
+
"20": "1.25rem",
|
|
75
|
+
"24": "1.5rem",
|
|
76
|
+
"30": "1.875rem"
|
|
77
|
+
},
|
|
78
|
+
weight: {
|
|
79
|
+
regular: 400,
|
|
80
|
+
medium: 500,
|
|
81
|
+
semibold: 600,
|
|
82
|
+
bold: 700
|
|
91
83
|
},
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
84
|
+
lineHeight: {
|
|
85
|
+
tight: 1.15,
|
|
86
|
+
tighter: 1.2,
|
|
87
|
+
snug: 1.25,
|
|
88
|
+
compact: 1.3,
|
|
89
|
+
normal: 1.4,
|
|
90
|
+
relaxed: 1.5,
|
|
91
|
+
loose: 1.6
|
|
92
|
+
},
|
|
93
|
+
tracking: {
|
|
94
|
+
tight: "-0.01em",
|
|
95
|
+
normal: "0em",
|
|
96
|
+
wide: "0.02em",
|
|
97
|
+
widest: "0.08em"
|
|
98
|
+
}
|
|
95
99
|
},
|
|
96
100
|
spacing: {
|
|
97
|
-
1: "0.25rem",
|
|
98
|
-
2: "0.5rem",
|
|
99
|
-
3: "0.75rem",
|
|
100
|
-
4: "1rem",
|
|
101
|
-
5: "1.25rem",
|
|
102
|
-
6: "1.5rem",
|
|
103
|
-
7: "1.75rem",
|
|
104
|
-
8: "2rem",
|
|
105
|
-
10: "2.5rem",
|
|
106
|
-
12: "3rem",
|
|
107
|
-
16: "4rem",
|
|
108
|
-
20: "5rem"
|
|
101
|
+
"1": "0.25rem",
|
|
102
|
+
"2": "0.5rem",
|
|
103
|
+
"3": "0.75rem",
|
|
104
|
+
"4": "1rem",
|
|
105
|
+
"5": "1.25rem",
|
|
106
|
+
"6": "1.5rem",
|
|
107
|
+
"7": "1.75rem",
|
|
108
|
+
"8": "2rem",
|
|
109
|
+
"10": "2.5rem",
|
|
110
|
+
"12": "3rem",
|
|
111
|
+
"16": "4rem",
|
|
112
|
+
"20": "5rem"
|
|
113
|
+
},
|
|
114
|
+
radius: {
|
|
115
|
+
none: "0",
|
|
116
|
+
sm: "0.25rem",
|
|
117
|
+
md: "0.5rem",
|
|
118
|
+
lg: "0.75rem",
|
|
119
|
+
xl: "1rem",
|
|
120
|
+
"2xl": "1.5rem",
|
|
121
|
+
full: "9999px"
|
|
122
|
+
},
|
|
123
|
+
duration: {
|
|
124
|
+
instant: "50ms",
|
|
125
|
+
fast: "100ms",
|
|
126
|
+
normal: "200ms",
|
|
127
|
+
moderate: "300ms",
|
|
128
|
+
slow: "500ms"
|
|
129
|
+
},
|
|
130
|
+
easing: {
|
|
131
|
+
enter: "cubic-bezier(0.00, 0.00, 0.20, 1.00)",
|
|
132
|
+
exit: "cubic-bezier(0.40, 0.00, 1.00, 1.00)",
|
|
133
|
+
move: "cubic-bezier(0.40, 0.00, 0.20, 1.00)",
|
|
134
|
+
spring: "cubic-bezier(0.34, 1.56, 0.64, 1.00)",
|
|
135
|
+
linear: "linear"
|
|
109
136
|
},
|
|
110
|
-
radius: { none: "0", sm: "0.25rem", md: "0.5rem", lg: "0.75rem", xl: "1rem", "2xl": "1.5rem", full: "9999px" },
|
|
111
|
-
duration: dur,
|
|
112
|
-
easing: ease,
|
|
113
137
|
motion: {
|
|
114
|
-
"fade-in":
|
|
115
|
-
"fade-out":
|
|
116
|
-
"slide-in":
|
|
117
|
-
"slide-out":
|
|
118
|
-
|
|
119
|
-
|
|
138
|
+
"fade-in": "200ms cubic-bezier(0.00, 0.00, 0.20, 1.00)",
|
|
139
|
+
"fade-out": "100ms cubic-bezier(0.40, 0.00, 1.00, 1.00)",
|
|
140
|
+
"slide-in": "300ms cubic-bezier(0.00, 0.00, 0.20, 1.00)",
|
|
141
|
+
"slide-out": "100ms cubic-bezier(0.40, 0.00, 1.00, 1.00)",
|
|
142
|
+
micro: "100ms cubic-bezier(0.40, 0.00, 0.20, 1.00)",
|
|
143
|
+
interactive: "200ms cubic-bezier(0.40, 0.00, 0.20, 1.00)"
|
|
120
144
|
},
|
|
121
145
|
shadow: {
|
|
122
146
|
none: "none",
|
|
@@ -135,10 +159,28 @@ var tokens = {
|
|
|
135
159
|
toast: 500,
|
|
136
160
|
tooltip: 600
|
|
137
161
|
},
|
|
138
|
-
borderWidth: {
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
162
|
+
borderWidth: {
|
|
163
|
+
default: "1px",
|
|
164
|
+
thick: "2px"
|
|
165
|
+
},
|
|
166
|
+
opacity: {
|
|
167
|
+
disabled: 0.4,
|
|
168
|
+
overlay: 0.6
|
|
169
|
+
},
|
|
170
|
+
iconSize: {
|
|
171
|
+
xs: "0.75rem",
|
|
172
|
+
sm: "1rem",
|
|
173
|
+
md: "1.25rem",
|
|
174
|
+
lg: "1.5rem",
|
|
175
|
+
xl: "2rem"
|
|
176
|
+
},
|
|
177
|
+
breakpoint: {
|
|
178
|
+
sm: "640px",
|
|
179
|
+
md: "768px",
|
|
180
|
+
lg: "1024px",
|
|
181
|
+
xl: "1280px",
|
|
182
|
+
"2xl": "1536px"
|
|
183
|
+
}
|
|
142
184
|
};
|
|
143
185
|
|
|
144
186
|
export { tokens };
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/* ─── haus / tokens ──────────────────────────────────────────────────────────\n Typed constants for the primitive layer.\n\n The CSS custom properties are the runtime form; this exists for the places\n they cannot reach — @media conditions, build config, style-in-JS. Semantic\n tokens are deliberately absent: their whole job is to be swappable at\n runtime, which freezing them into a constant would defeat.\n\n GENERATED FROM src/tokens.json — do not edit.\n Regenerate with `npm run tokens`; `npm run tokens:check` fails CI if stale.\n ─────────────────────────────────────────────────────────────────────────── */\n\nexport const tokens = {\n color: {\n aronia: {\n \"100\": \"oklch(97% 0.012 300)\",\n \"200\": \"oklch(92% 0.028 300)\",\n \"300\": \"oklch(84% 0.058 300)\",\n \"400\": \"oklch(72% 0.100 300)\",\n \"500\": \"oklch(52% 0.138 300)\",\n \"600\": \"oklch(43% 0.125 300)\",\n \"700\": \"oklch(35% 0.105 300)\",\n \"800\": \"oklch(26% 0.080 300)\",\n \"900\": \"oklch(18% 0.052 300)\",\n \"950\": \"oklch(12% 0.032 300)\",\n },\n damson: {\n \"0\": \"oklch(100% 0 0)\",\n \"50\": \"oklch(99% 0.003 290)\",\n \"100\": \"oklch(97% 0.006 290)\",\n \"200\": \"oklch(93% 0.008 290)\",\n \"300\": \"oklch(86% 0.010 290)\",\n \"400\": \"oklch(74% 0.010 290)\",\n \"500\": \"oklch(60% 0.008 290)\",\n \"600\": \"oklch(48% 0.007 290)\",\n \"700\": \"oklch(37% 0.006 290)\",\n \"800\": \"oklch(27% 0.005 290)\",\n \"900\": \"oklch(18% 0.003 290)\",\n \"950\": \"oklch(11% 0.002 290)\",\n },\n elderberry: {\n \"100\": \"oklch(97% 0.020 265)\",\n \"200\": \"oklch(93% 0.040 265)\",\n \"400\": \"oklch(74% 0.160 265)\",\n \"500\": \"oklch(55% 0.200 265)\",\n \"700\": \"oklch(42% 0.160 265)\",\n \"900\": \"oklch(30% 0.120 265)\",\n },\n greengage: {\n \"100\": \"oklch(97% 0.030 148)\",\n \"200\": \"oklch(93% 0.055 148)\",\n \"400\": \"oklch(75% 0.150 148)\",\n \"500\": \"oklch(58% 0.185 148)\",\n \"700\": \"oklch(45% 0.150 148)\",\n \"900\": \"oklch(33% 0.110 148)\",\n },\n mango: {\n \"100\": \"oklch(97% 0.025 65)\",\n \"200\": \"oklch(93% 0.045 65)\",\n \"400\": \"oklch(76% 0.145 65)\",\n \"500\": \"oklch(60% 0.175 65)\",\n \"700\": \"oklch(47% 0.142 65)\",\n \"900\": \"oklch(38% 0.110 65)\",\n },\n cherry: {\n \"100\": \"oklch(97% 0.030 27)\",\n \"200\": \"oklch(93% 0.055 27)\",\n \"400\": \"oklch(74% 0.160 27)\",\n \"500\": \"oklch(58% 0.200 27)\",\n \"700\": \"oklch(44% 0.168 27)\",\n \"900\": \"oklch(33% 0.110 27)\",\n },\n },\n font: {\n family: {\n sans: \"'Manrope', system-ui, sans-serif\",\n mono: \"'Fira Code', ui-monospace, monospace\",\n },\n size: {\n \"11\": \"0.6875rem\",\n \"12\": \"0.75rem\",\n \"13\": \"0.8125rem\",\n \"14\": \"0.875rem\",\n \"16\": \"1rem\",\n \"20\": \"1.25rem\",\n \"24\": \"1.5rem\",\n \"30\": \"1.875rem\",\n },\n weight: {\n regular: 400,\n medium: 500,\n semibold: 600,\n bold: 700,\n },\n lineHeight: {\n tight: 1.15,\n tighter: 1.2,\n snug: 1.25,\n compact: 1.3,\n normal: 1.4,\n relaxed: 1.5,\n loose: 1.6,\n },\n tracking: {\n tight: \"-0.01em\",\n normal: \"0em\",\n wide: \"0.02em\",\n widest: \"0.08em\",\n },\n },\n spacing: {\n \"1\": \"0.25rem\",\n \"2\": \"0.5rem\",\n \"3\": \"0.75rem\",\n \"4\": \"1rem\",\n \"5\": \"1.25rem\",\n \"6\": \"1.5rem\",\n \"7\": \"1.75rem\",\n \"8\": \"2rem\",\n \"10\": \"2.5rem\",\n \"12\": \"3rem\",\n \"16\": \"4rem\",\n \"20\": \"5rem\",\n },\n radius: {\n none: \"0\",\n sm: \"0.25rem\",\n md: \"0.5rem\",\n lg: \"0.75rem\",\n xl: \"1rem\",\n \"2xl\": \"1.5rem\",\n full: \"9999px\",\n },\n duration: {\n instant: \"50ms\",\n fast: \"100ms\",\n normal: \"200ms\",\n moderate: \"300ms\",\n slow: \"500ms\",\n },\n easing: {\n enter: \"cubic-bezier(0.00, 0.00, 0.20, 1.00)\",\n exit: \"cubic-bezier(0.40, 0.00, 1.00, 1.00)\",\n move: \"cubic-bezier(0.40, 0.00, 0.20, 1.00)\",\n spring: \"cubic-bezier(0.34, 1.56, 0.64, 1.00)\",\n linear: \"linear\",\n },\n motion: {\n \"fade-in\": \"200ms cubic-bezier(0.00, 0.00, 0.20, 1.00)\",\n \"fade-out\": \"100ms cubic-bezier(0.40, 0.00, 1.00, 1.00)\",\n \"slide-in\": \"300ms cubic-bezier(0.00, 0.00, 0.20, 1.00)\",\n \"slide-out\": \"100ms cubic-bezier(0.40, 0.00, 1.00, 1.00)\",\n micro: \"100ms cubic-bezier(0.40, 0.00, 0.20, 1.00)\",\n interactive: \"200ms cubic-bezier(0.40, 0.00, 0.20, 1.00)\",\n },\n shadow: {\n none: \"none\",\n sm: \"0 1px 2px oklch(18% 0.003 290 / 0.06)\",\n md: \"0 4px 6px -1px oklch(18% 0.003 290 / 0.10), 0 2px 4px -2px oklch(18% 0.003 290 / 0.10)\",\n lg: \"0 10px 15px -3px oklch(18% 0.003 290 / 0.10), 0 4px 6px -4px oklch(18% 0.003 290 / 0.07)\",\n xl: \"0 20px 25px -5px oklch(18% 0.003 290 / 0.10), 0 8px 10px -6px oklch(18% 0.003 290 / 0.10)\",\n },\n zIndex: {\n base: 0,\n raised: 10,\n dropdown: 100,\n sticky: 200,\n overlay: 300,\n modal: 400,\n toast: 500,\n tooltip: 600,\n },\n borderWidth: {\n default: \"1px\",\n thick: \"2px\",\n },\n opacity: {\n disabled: 0.4,\n overlay: 0.6,\n },\n iconSize: {\n xs: \"0.75rem\",\n sm: \"1rem\",\n md: \"1.25rem\",\n lg: \"1.5rem\",\n xl: \"2rem\",\n },\n breakpoint: {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\",\n },\n} as const\n\nexport type Tokens = typeof tokens\n"]}
|
package/dist/primitives.css
CHANGED
|
@@ -2,157 +2,160 @@
|
|
|
2
2
|
Raw values only. No component or semantic meaning.
|
|
3
3
|
Nothing outside this file should define raw values.
|
|
4
4
|
Components must never reference these directly — use semantics.css.
|
|
5
|
+
|
|
6
|
+
GENERATED FROM src/tokens.json — do not edit.
|
|
7
|
+
Regenerate with `npm run tokens`; `npm run tokens:check` fails CI if stale.
|
|
5
8
|
─────────────────────────────────────────────────────────────────────────── */
|
|
6
9
|
|
|
7
10
|
@layer haus.primitives {
|
|
8
11
|
|
|
9
12
|
:root {
|
|
10
13
|
|
|
11
|
-
/* ── Aronia (Dusty Purple) ── H=300°
|
|
12
|
-
--aronia-100:
|
|
13
|
-
--aronia-200:
|
|
14
|
-
--aronia-300:
|
|
15
|
-
--aronia-400:
|
|
16
|
-
--aronia-500:
|
|
17
|
-
--aronia-600:
|
|
18
|
-
--aronia-700:
|
|
19
|
-
--aronia-800:
|
|
20
|
-
--aronia-900:
|
|
21
|
-
--aronia-950:
|
|
22
|
-
|
|
23
|
-
/* ── Damson (Cool Neutral) ── H=290°, very low chroma
|
|
24
|
-
/* Same hue family as Aronia — monochromatic, highly cohesive.
|
|
25
|
-
--damson-0:
|
|
26
|
-
--damson-50:
|
|
27
|
-
--damson-100:
|
|
28
|
-
--damson-200:
|
|
29
|
-
--damson-300:
|
|
30
|
-
--damson-400:
|
|
31
|
-
--damson-500:
|
|
32
|
-
--damson-600:
|
|
33
|
-
--damson-700:
|
|
34
|
-
--damson-800:
|
|
35
|
-
--damson-900:
|
|
36
|
-
--damson-950:
|
|
37
|
-
|
|
38
|
-
/* ── Elderberry (Indigo) ── H=265°, distinct from Aronia H=300°
|
|
39
|
-
--elderberry-100:
|
|
40
|
-
--elderberry-200:
|
|
41
|
-
--elderberry-400:
|
|
42
|
-
--elderberry-500:
|
|
43
|
-
--elderberry-700:
|
|
44
|
-
--elderberry-900:
|
|
45
|
-
|
|
46
|
-
/* ── Greengage (Green) ── H=148°
|
|
47
|
-
--greengage-100:
|
|
48
|
-
--greengage-200:
|
|
49
|
-
--greengage-400:
|
|
50
|
-
--greengage-500:
|
|
51
|
-
--greengage-700:
|
|
52
|
-
--greengage-900:
|
|
14
|
+
/* ── Aronia (Dusty Purple) ── H=300° ─────────────────────────────────────── */
|
|
15
|
+
--aronia-100: oklch(97% 0.012 300); /* Subtle background */
|
|
16
|
+
--aronia-200: oklch(92% 0.028 300);
|
|
17
|
+
--aronia-300: oklch(84% 0.058 300);
|
|
18
|
+
--aronia-400: oklch(72% 0.100 300);
|
|
19
|
+
--aronia-500: oklch(52% 0.138 300); /* Default — dusty plum anchor */
|
|
20
|
+
--aronia-600: oklch(43% 0.125 300); /* Hover */
|
|
21
|
+
--aronia-700: oklch(35% 0.105 300); /* Pressed / on-subtle text */
|
|
22
|
+
--aronia-800: oklch(26% 0.080 300);
|
|
23
|
+
--aronia-900: oklch(18% 0.052 300);
|
|
24
|
+
--aronia-950: oklch(12% 0.032 300);
|
|
25
|
+
|
|
26
|
+
/* ── Damson (Cool Neutral) ── H=290°, very low chroma ────────────────────── */
|
|
27
|
+
/* Same hue family as Aronia — monochromatic, highly cohesive. */
|
|
28
|
+
--damson-0: oklch(100% 0 0); /* White */
|
|
29
|
+
--damson-50: oklch(99% 0.003 290); /* Near-white — barely-lavender cool cream */
|
|
30
|
+
--damson-100: oklch(97% 0.006 290); /* Subtle surface — cool cream */
|
|
31
|
+
--damson-200: oklch(93% 0.008 290); /* Sunken surface / default border */
|
|
32
|
+
--damson-300: oklch(86% 0.010 290); /* Strong border */
|
|
33
|
+
--damson-400: oklch(74% 0.010 290); /* Disabled / muted */
|
|
34
|
+
--damson-500: oklch(60% 0.008 290); /* Placeholder text */
|
|
35
|
+
--damson-600: oklch(48% 0.007 290); /* Tertiary text */
|
|
36
|
+
--damson-700: oklch(37% 0.006 290); /* Secondary text */
|
|
37
|
+
--damson-800: oklch(27% 0.005 290);
|
|
38
|
+
--damson-900: oklch(18% 0.003 290); /* Primary text / near-black */
|
|
39
|
+
--damson-950: oklch(11% 0.002 290); /* Near-black */
|
|
40
|
+
|
|
41
|
+
/* ── Elderberry (Indigo) ── H=265°, distinct from Aronia H=300° ──────────── */
|
|
42
|
+
--elderberry-100: oklch(97% 0.020 265); /* Subtle background */
|
|
43
|
+
--elderberry-200: oklch(93% 0.040 265); /* Subtle border */
|
|
44
|
+
--elderberry-400: oklch(74% 0.160 265); /* Icon on subtle background */
|
|
45
|
+
--elderberry-500: oklch(55% 0.200 265); /* Default */
|
|
46
|
+
--elderberry-700: oklch(42% 0.160 265); /* Text on subtle background */
|
|
47
|
+
--elderberry-900: oklch(30% 0.120 265); /* Emphasis / high-contrast text */
|
|
48
|
+
|
|
49
|
+
/* ── Greengage (Green) ── H=148° ─────────────────────────────────────────── */
|
|
50
|
+
--greengage-100: oklch(97% 0.030 148); /* Subtle background */
|
|
51
|
+
--greengage-200: oklch(93% 0.055 148); /* Subtle border */
|
|
52
|
+
--greengage-400: oklch(75% 0.150 148); /* Icon on subtle background */
|
|
53
|
+
--greengage-500: oklch(58% 0.185 148); /* Default */
|
|
54
|
+
--greengage-700: oklch(45% 0.150 148); /* Text on subtle background */
|
|
55
|
+
--greengage-900: oklch(33% 0.110 148); /* Emphasis / high-contrast text */
|
|
53
56
|
|
|
54
57
|
/* ── Mango (Golden) ── H=65° ─────────────────────────────────────────────── */
|
|
55
|
-
--mango-100:
|
|
56
|
-
--mango-200:
|
|
57
|
-
--mango-400:
|
|
58
|
-
--mango-500:
|
|
59
|
-
--mango-700:
|
|
60
|
-
--mango-900:
|
|
58
|
+
--mango-100: oklch(97% 0.025 65); /* Subtle background */
|
|
59
|
+
--mango-200: oklch(93% 0.045 65); /* Subtle border */
|
|
60
|
+
--mango-400: oklch(76% 0.145 65); /* Icon on subtle background */
|
|
61
|
+
--mango-500: oklch(60% 0.175 65); /* Default */
|
|
62
|
+
--mango-700: oklch(47% 0.142 65); /* Text on subtle background */
|
|
63
|
+
--mango-900: oklch(38% 0.110 65); /* Emphasis / high-contrast text */
|
|
61
64
|
|
|
62
65
|
/* ── Cherry (Red) ── H=27° ───────────────────────────────────────────────── */
|
|
63
|
-
--cherry-100:
|
|
64
|
-
--cherry-200:
|
|
65
|
-
--cherry-400:
|
|
66
|
-
--cherry-500:
|
|
67
|
-
--cherry-700:
|
|
68
|
-
--cherry-900:
|
|
69
|
-
|
|
70
|
-
/* ── Type scale
|
|
71
|
-
--font-sans:
|
|
72
|
-
--font-mono:
|
|
73
|
-
|
|
74
|
-
--text-11:
|
|
75
|
-
--text-12:
|
|
76
|
-
--text-13:
|
|
77
|
-
--text-14:
|
|
78
|
-
--text-16:
|
|
79
|
-
--text-20:
|
|
80
|
-
--text-24:
|
|
81
|
-
--text-30:
|
|
82
|
-
|
|
83
|
-
--weight-regular:
|
|
84
|
-
--weight-medium:
|
|
85
|
-
--weight-semibold:
|
|
86
|
-
--weight-bold:
|
|
87
|
-
|
|
88
|
-
--leading-tight:
|
|
89
|
-
--leading-tighter:
|
|
90
|
-
--leading-snug:
|
|
91
|
-
--leading-compact:
|
|
92
|
-
--leading-normal:
|
|
93
|
-
--leading-relaxed:
|
|
94
|
-
--leading-loose:
|
|
66
|
+
--cherry-100: oklch(97% 0.030 27); /* Subtle background */
|
|
67
|
+
--cherry-200: oklch(93% 0.055 27); /* Subtle border */
|
|
68
|
+
--cherry-400: oklch(74% 0.160 27); /* Icon on subtle background */
|
|
69
|
+
--cherry-500: oklch(58% 0.200 27); /* Default */
|
|
70
|
+
--cherry-700: oklch(44% 0.168 27); /* Text on subtle background */
|
|
71
|
+
--cherry-900: oklch(33% 0.110 27); /* Emphasis / high-contrast text */
|
|
72
|
+
|
|
73
|
+
/* ── Type scale ──────────────────────────────────────────────────────────── */
|
|
74
|
+
--font-sans: 'Manrope', system-ui, sans-serif;
|
|
75
|
+
--font-mono: 'Fira Code', ui-monospace, monospace;
|
|
76
|
+
|
|
77
|
+
--text-11: 0.6875rem;
|
|
78
|
+
--text-12: 0.75rem;
|
|
79
|
+
--text-13: 0.8125rem;
|
|
80
|
+
--text-14: 0.875rem;
|
|
81
|
+
--text-16: 1rem;
|
|
82
|
+
--text-20: 1.25rem;
|
|
83
|
+
--text-24: 1.5rem;
|
|
84
|
+
--text-30: 1.875rem;
|
|
85
|
+
|
|
86
|
+
--weight-regular: 400;
|
|
87
|
+
--weight-medium: 500;
|
|
88
|
+
--weight-semibold: 600;
|
|
89
|
+
--weight-bold: 700;
|
|
90
|
+
|
|
91
|
+
--leading-tight: 1.15; /* Display */
|
|
92
|
+
--leading-tighter: 1.2; /* heading-lg */
|
|
93
|
+
--leading-snug: 1.25; /* Heading */
|
|
94
|
+
--leading-compact: 1.3; /* Heading-sm — between snug and normal */
|
|
95
|
+
--leading-normal: 1.4; /* Labels, short UI text */
|
|
96
|
+
--leading-relaxed: 1.5; /* Body */
|
|
97
|
+
--leading-loose: 1.6; /* Body-lg, code */
|
|
95
98
|
|
|
96
99
|
--tracking-tight: -0.01em;
|
|
97
|
-
--tracking-normal:
|
|
98
|
-
--tracking-wide:
|
|
99
|
-
--tracking-widest:
|
|
100
|
+
--tracking-normal: 0em;
|
|
101
|
+
--tracking-wide: 0.02em;
|
|
102
|
+
--tracking-widest: 0.08em;
|
|
100
103
|
|
|
101
104
|
/* ── Spacing scale (4px base) ────────────────────────────────────────────── */
|
|
102
|
-
--space-1:
|
|
103
|
-
--space-2:
|
|
104
|
-
--space-3:
|
|
105
|
-
--space-4:
|
|
106
|
-
--space-5:
|
|
107
|
-
--space-6:
|
|
108
|
-
--space-7:
|
|
109
|
-
--space-8:
|
|
110
|
-
--space-10:
|
|
111
|
-
--space-12:
|
|
112
|
-
--space-16:
|
|
113
|
-
--space-20:
|
|
114
|
-
|
|
115
|
-
/* ── Radius
|
|
116
|
-
--radius-none:
|
|
117
|
-
--radius-sm:
|
|
118
|
-
--radius-md:
|
|
119
|
-
--radius-lg:
|
|
120
|
-
--radius-xl:
|
|
121
|
-
--radius-2xl:
|
|
122
|
-
--radius-full:
|
|
105
|
+
--space-1: 0.25rem; /* 4px */
|
|
106
|
+
--space-2: 0.5rem; /* 8px */
|
|
107
|
+
--space-3: 0.75rem; /* 12px */
|
|
108
|
+
--space-4: 1rem; /* 16px */
|
|
109
|
+
--space-5: 1.25rem; /* 20px */
|
|
110
|
+
--space-6: 1.5rem; /* 24px */
|
|
111
|
+
--space-7: 1.75rem; /* 28px */
|
|
112
|
+
--space-8: 2rem; /* 32px */
|
|
113
|
+
--space-10: 2.5rem; /* 40px */
|
|
114
|
+
--space-12: 3rem; /* 48px */
|
|
115
|
+
--space-16: 4rem; /* 64px */
|
|
116
|
+
--space-20: 5rem; /* 80px */
|
|
117
|
+
|
|
118
|
+
/* ── Radius ──────────────────────────────────────────────────────────────── */
|
|
119
|
+
--radius-none: 0;
|
|
120
|
+
--radius-sm: 0.25rem;
|
|
121
|
+
--radius-md: 0.5rem;
|
|
122
|
+
--radius-lg: 0.75rem;
|
|
123
|
+
--radius-xl: 1rem;
|
|
124
|
+
--radius-2xl: 1.5rem; /* Panels, dialogs, sheets */
|
|
125
|
+
--radius-full: 9999px;
|
|
123
126
|
|
|
124
127
|
/* ── Shadows — tinted with damson H=290° ─────────────────────────────────── */
|
|
125
|
-
--shadow-
|
|
126
|
-
--shadow-
|
|
127
|
-
--shadow-
|
|
128
|
-
--shadow-
|
|
129
|
-
--shadow-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
/* ── Z-index
|
|
133
|
-
--z-base:
|
|
134
|
-
--z-raised:
|
|
135
|
-
--z-dropdown:
|
|
136
|
-
--z-sticky:
|
|
137
|
-
--z-overlay:
|
|
138
|
-
--z-modal:
|
|
139
|
-
--z-toast:
|
|
140
|
-
--z-tooltip:
|
|
141
|
-
|
|
142
|
-
/* ── Border width
|
|
143
|
-
--border-width-default:
|
|
144
|
-
--border-width-thick:
|
|
145
|
-
|
|
146
|
-
/* ── Opacity
|
|
147
|
-
--opacity-disabled:
|
|
148
|
-
--opacity-overlay:
|
|
149
|
-
|
|
150
|
-
/* ── Icon sizes (Font Awesome — pairs with type scale)
|
|
151
|
-
--icon-xs:
|
|
152
|
-
--icon-sm:
|
|
153
|
-
--icon-md:
|
|
154
|
-
--icon-lg:
|
|
155
|
-
--icon-xl:
|
|
128
|
+
/* --shadow-focus is in semantics.css — it references semantic colour tokens. */
|
|
129
|
+
--shadow-none: none;
|
|
130
|
+
--shadow-sm: 0 1px 2px oklch(18% 0.003 290 / 0.06); /* Subtle card lift, form inputs */
|
|
131
|
+
--shadow-md: 0 4px 6px -1px oklch(18% 0.003 290 / 0.10), 0 2px 4px -2px oklch(18% 0.003 290 / 0.10); /* Dropdowns, select menus */
|
|
132
|
+
--shadow-lg: 0 10px 15px -3px oklch(18% 0.003 290 / 0.10), 0 4px 6px -4px oklch(18% 0.003 290 / 0.07); /* Modals, dialogs */
|
|
133
|
+
--shadow-xl: 0 20px 25px -5px oklch(18% 0.003 290 / 0.10), 0 8px 10px -6px oklch(18% 0.003 290 / 0.10); /* Full-page overlays */
|
|
134
|
+
|
|
135
|
+
/* ── Z-index ─────────────────────────────────────────────────────────────── */
|
|
136
|
+
--z-base: 0; /* Default page flow */
|
|
137
|
+
--z-raised: 10; /* Inline elevated elements */
|
|
138
|
+
--z-dropdown: 100; /* Menus, selects, popovers */
|
|
139
|
+
--z-sticky: 200; /* Sticky headers, fixed toolbars */
|
|
140
|
+
--z-overlay: 300; /* Sheet backgrounds, scrim */
|
|
141
|
+
--z-modal: 400; /* Dialogs, modals */
|
|
142
|
+
--z-toast: 500; /* Toast notifications */
|
|
143
|
+
--z-tooltip: 600; /* Tooltips — always on top */
|
|
144
|
+
|
|
145
|
+
/* ── Border width ────────────────────────────────────────────────────────── */
|
|
146
|
+
--border-width-default: 1px; /* Borders, dividers, inputs */
|
|
147
|
+
--border-width-thick: 2px; /* Focus rings, active emphasis */
|
|
148
|
+
|
|
149
|
+
/* ── Opacity ─────────────────────────────────────────────────────────────── */
|
|
150
|
+
--opacity-disabled: 0.4; /* Disabled elements */
|
|
151
|
+
--opacity-overlay: 0.6; /* Scrim / backdrop */
|
|
152
|
+
|
|
153
|
+
/* ── Icon sizes (Font Awesome — pairs with type scale) ───────────────────── */
|
|
154
|
+
--icon-xs: 0.75rem; /* 12px — with label-xs */
|
|
155
|
+
--icon-sm: 1rem; /* 16px — with label, body-sm */
|
|
156
|
+
--icon-md: 1.25rem; /* 20px — with body-lg, heading-sm */
|
|
157
|
+
--icon-lg: 1.5rem; /* 24px — with heading */
|
|
158
|
+
--icon-xl: 2rem; /* 32px — standalone / decorative */
|
|
156
159
|
|
|
157
160
|
}
|
|
158
161
|
}
|
package/dist/semantics.css
CHANGED
|
@@ -99,6 +99,9 @@
|
|
|
99
99
|
/* ── Focus ring ───────────────────────────────────────────────────────── */
|
|
100
100
|
/* Inner ring matches surface (creates gap), outer ring is focus colour */
|
|
101
101
|
--shadow-focus: 0 0 0 2px var(--color-surface-default), 0 0 0 4px var(--color-border-focus);
|
|
102
|
+
/* Same ring in the error state — the outer band carries the error colour */
|
|
103
|
+
/* so an invalid field stays legible as invalid while focused. */
|
|
104
|
+
--shadow-focus-error: 0 0 0 2px var(--color-surface-default), 0 0 0 4px var(--color-error-default);
|
|
102
105
|
|
|
103
106
|
/* ── Typography roles ─────────────────────────────────────────────────── */
|
|
104
107
|
/* Use all four props together. Components must not mix roles. */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "haus-tokens",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "haus design tokens — OKLCH colour, type, spacing, radius, shadow and motion, as W3C-DTCG JSON, CSS custom properties, and typed JS constants.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "hipuku",
|
|
@@ -41,14 +41,14 @@
|
|
|
41
41
|
],
|
|
42
42
|
"scripts": {
|
|
43
43
|
"build": "tsup",
|
|
44
|
-
"test": "vitest run",
|
|
45
|
-
"test:watch": "vitest",
|
|
46
44
|
"typecheck": "tsc --noEmit",
|
|
47
|
-
"prepublishOnly": "npm run
|
|
45
|
+
"prepublishOnly": "npm run tokens:check && npm run build",
|
|
46
|
+
"tokens": "tsx scripts/build-tokens.ts",
|
|
47
|
+
"tokens:check": "tsx scripts/build-tokens.ts --check"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"tsup": "^8.5.1",
|
|
51
|
-
"
|
|
52
|
-
"
|
|
51
|
+
"tsx": "^4.23.12",
|
|
52
|
+
"typescript": "^5.4.5"
|
|
53
53
|
}
|
|
54
54
|
}
|