@org-design-system/styles 0.1.4
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/LICENSE +19 -0
- package/README.md +51 -0
- package/dist/index.cjs +723 -0
- package/dist/index.css +295 -0
- package/dist/index.d.cts +692 -0
- package/dist/index.d.ts +692 -0
- package/dist/index.js +695 -0
- package/package.json +41 -0
- package/src/component.css +20 -0
- package/src/index.css +295 -0
- package/src/index.ts +2 -0
- package/src/tailwind.tokens.ts +299 -0
- package/src/tokens.generated.ts +391 -0
package/package.json
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@org-design-system/styles",
|
|
3
|
+
"version": "0.1.4",
|
|
4
|
+
"description": "Design tokens for the @org-design-system Design System",
|
|
5
|
+
"publishConfig": {
|
|
6
|
+
"access": "public"
|
|
7
|
+
},
|
|
8
|
+
"type": "module",
|
|
9
|
+
"main": "./dist/index.js",
|
|
10
|
+
"module": "./dist/index.mjs",
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"style": "./src/index.css",
|
|
13
|
+
"source": "./src/index.ts",
|
|
14
|
+
"exports": {
|
|
15
|
+
".": {
|
|
16
|
+
"types": "./dist/index.d.ts",
|
|
17
|
+
"import": "./dist/index.js",
|
|
18
|
+
"require": "./dist/index.cjs",
|
|
19
|
+
"default": "./src/index.ts"
|
|
20
|
+
},
|
|
21
|
+
"./index.css": "./src/index.css",
|
|
22
|
+
"./component.css": "./src/component.css",
|
|
23
|
+
"./*": "./*"
|
|
24
|
+
},
|
|
25
|
+
"files": [
|
|
26
|
+
"dist",
|
|
27
|
+
"src"
|
|
28
|
+
],
|
|
29
|
+
"dependencies": {
|
|
30
|
+
"tailwindcss": "^4.0.0"
|
|
31
|
+
},
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"tsup": "^8.5.1",
|
|
34
|
+
"tsx": "^4.7.1",
|
|
35
|
+
"typescript": "^5.3.3"
|
|
36
|
+
},
|
|
37
|
+
"scripts": {
|
|
38
|
+
"build": "node build.js && tsup src/index.ts --format esm,cjs --dts --clean && cp src/index.css dist/index.css || true",
|
|
39
|
+
"dev": "tsup src/index.ts --format esm,cjs --watch --dts"
|
|
40
|
+
}
|
|
41
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
|
|
2
|
+
.org-btn {
|
|
3
|
+
padding: 8px 16px;
|
|
4
|
+
border-radius: 6px;
|
|
5
|
+
font-weight: 500;
|
|
6
|
+
border: none;
|
|
7
|
+
cursor: pointer;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
/* primary button */
|
|
11
|
+
.org-btn-primary {
|
|
12
|
+
background-color: #2563EB;
|
|
13
|
+
color: white;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/* secondary button */
|
|
17
|
+
.org-btn-secondary {
|
|
18
|
+
background-color: #E5E7EB;
|
|
19
|
+
color: #111827;
|
|
20
|
+
}
|
package/src/index.css
ADDED
|
@@ -0,0 +1,295 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--color-green-1: oklch(13.929% 0.01574 120.111);
|
|
3
|
+
--color-green-2: oklch(20.180% 0.02079 119.586);
|
|
4
|
+
--color-green-3: oklch(26.035% 0.03495 121.463);
|
|
5
|
+
--color-green-4: oklch(31.159% 0.05034 121.731);
|
|
6
|
+
--color-green-5: oklch(35.836% 0.06161 121.367);
|
|
7
|
+
--color-green-6: oklch(40.733% 0.07227 121.113);
|
|
8
|
+
--color-green-7: oklch(46.185% 0.08353 120.739);
|
|
9
|
+
--color-green-8: oklch(52.315% 0.09811 121.373);
|
|
10
|
+
--color-green-9: oklch(90.962% 0.18848 121.314);
|
|
11
|
+
--color-green-10: oklch(87.984% 0.16494 121.240);
|
|
12
|
+
--color-green-11: oklch(86.779% 0.16480 121.322);
|
|
13
|
+
--color-green-12: oklch(94.488% 0.08475 120.827);
|
|
14
|
+
--color-green-alpha-1: oklch(54.467% 0.18194 142.064 / 0.009999999776482582);
|
|
15
|
+
--color-green-alpha-2: oklch(91.609% 0.19721 122.833 / 0.05999999865889549);
|
|
16
|
+
--color-green-alpha-3: oklch(91.737% 0.18693 123.466 / 0.12999999523162842);
|
|
17
|
+
--color-green-alpha-4: oklch(92.762% 0.19504 123.178 / 0.18000000715255737);
|
|
18
|
+
--color-green-alpha-5: oklch(92.606% 0.19350 122.705 / 0.23999999463558197);
|
|
19
|
+
--color-green-alpha-6: oklch(93.338% 0.19226 122.153 / 0.28999999165534973);
|
|
20
|
+
--color-green-alpha-7: oklch(93.279% 0.18834 121.488 / 0.36000001430511475);
|
|
21
|
+
--color-green-alpha-8: oklch(93.717% 0.19063 121.930 / 0.4300000071525574);
|
|
22
|
+
--color-green-alpha-9: oklch(93.728% 0.19479 121.411 / 0.9599999785423279);
|
|
23
|
+
--color-green-alpha-10: oklch(93.910% 0.17704 121.163 / 0.9100000262260437);
|
|
24
|
+
--color-green-alpha-11: oklch(93.811% 0.17972 121.331 / 0.8999999761581421);
|
|
25
|
+
--color-green-alpha-12: oklch(96.770% 0.08694 121.078 / 0.9700000286102295);
|
|
26
|
+
--color-red-1: oklch(14.035% 0.01562 28.753);
|
|
27
|
+
--color-red-2: oklch(19.667% 0.02386 23.867);
|
|
28
|
+
--color-red-3: oklch(24.790% 0.07540 26.521);
|
|
29
|
+
--color-red-4: oklch(28.781% 0.11338 26.821);
|
|
30
|
+
--color-red-5: oklch(33.157% 0.12650 27.057);
|
|
31
|
+
--color-red-6: oklch(38.161% 0.13208 26.995);
|
|
32
|
+
--color-red-7: oklch(44.942% 0.14232 26.726);
|
|
33
|
+
--color-red-8: oklch(54.153% 0.17272 26.767);
|
|
34
|
+
--color-red-9: oklch(64.887% 0.23697 26.973);
|
|
35
|
+
--color-red-10: oklch(60.863% 0.23703 26.898);
|
|
36
|
+
--color-red-11: oklch(76.916% 0.13666 27.548);
|
|
37
|
+
--color-red-12: oklch(89.618% 0.05443 27.826);
|
|
38
|
+
--color-red-alpha-1: oklch(57.701% 0.23678 29.234 / 0.029999999329447746);
|
|
39
|
+
--color-red-alpha-2: oklch(69.401% 0.19152 27.160 / 0.09000000357627869);
|
|
40
|
+
--color-red-alpha-3: oklch(63.719% 0.24861 29.224 / 0.2199999988079071);
|
|
41
|
+
--color-red-alpha-4: oklch(62.796% 0.25768 29.234 / 0.3100000023841858);
|
|
42
|
+
--color-red-alpha-5: oklch(62.617% 0.25409 28.709 / 0.38999998569488525);
|
|
43
|
+
--color-red-alpha-6: oklch(64.004% 0.24049 28.229 / 0.46000000834465027);
|
|
44
|
+
--color-red-alpha-7: oklch(66.006% 0.22405 27.446 / 0.5699999928474426);
|
|
45
|
+
--color-red-alpha-8: oklch(66.773% 0.21946 27.140 / 0.7400000095367432);
|
|
46
|
+
--color-red-alpha-9: oklch(64.887% 0.23697 26.973);
|
|
47
|
+
--color-red-alpha-10: oklch(63.467% 0.24808 27.082 / 0.9399999976158142);
|
|
48
|
+
--color-red-alpha-11: oklch(76.916% 0.13666 27.548);
|
|
49
|
+
--color-red-alpha-12: oklch(89.618% 0.05443 27.826);
|
|
50
|
+
--color-yellow-1: oklch(14.042% 0.01080 86.919);
|
|
51
|
+
--color-yellow-2: oklch(20.368% 0.01545 74.521);
|
|
52
|
+
--color-yellow-3: oklch(25.426% 0.03579 72.708);
|
|
53
|
+
--color-yellow-4: oklch(29.146% 0.06118 71.572);
|
|
54
|
+
--color-yellow-5: oklch(33.347% 0.06707 71.814);
|
|
55
|
+
--color-yellow-6: oklch(38.560% 0.06578 72.230);
|
|
56
|
+
--color-yellow-7: oklch(45.135% 0.07133 71.333);
|
|
57
|
+
--color-yellow-8: oklch(53.893% 0.08585 71.345);
|
|
58
|
+
--color-yellow-9: oklch(78.617% 0.14705 71.872);
|
|
59
|
+
--color-yellow-10: oklch(75.244% 0.14751 71.625);
|
|
60
|
+
--color-yellow-11: oklch(82.108% 0.12828 71.819);
|
|
61
|
+
--color-yellow-12: oklch(92.757% 0.04646 70.972);
|
|
62
|
+
--color-yellow-alpha-1: oklch(48.411% 0.19511 29.829 / 0.009999999776482582);
|
|
63
|
+
--color-yellow-alpha-2: oklch(82.660% 0.13441 71.992 / 0.07000000029802322);
|
|
64
|
+
--color-yellow-alpha-3: oklch(78.650% 0.16014 67.778 / 0.15000000596046448);
|
|
65
|
+
--color-yellow-alpha-4: oklch(75.621% 0.17780 59.353 / 0.2199999988079071);
|
|
66
|
+
--color-yellow-alpha-5: oklch(76.859% 0.17276 64.251 / 0.27000001072883606);
|
|
67
|
+
--color-yellow-alpha-6: oklch(80.594% 0.15782 69.604 / 0.33000001311302185);
|
|
68
|
+
--color-yellow-alpha-7: oklch(82.045% 0.14521 69.848 / 0.4099999964237213);
|
|
69
|
+
--color-yellow-alpha-8: oklch(82.843% 0.14088 70.987 / 0.5400000214576721);
|
|
70
|
+
--color-yellow-alpha-9: oklch(81.736% 0.15334 71.804 / 0.949999988079071);
|
|
71
|
+
--color-yellow-alpha-10: oklch(80.629% 0.15913 71.149 / 0.9100000262260437);
|
|
72
|
+
--color-yellow-alpha-11: oklch(84.103% 0.13165 71.875 / 0.9700000286102295);
|
|
73
|
+
--color-yellow-alpha-12: oklch(93.940% 0.04735 71.862 / 0.9800000190734863);
|
|
74
|
+
--color-blue-1: oklch(13.945% 0.02453 256.348);
|
|
75
|
+
--color-blue-2: oklch(20.316% 0.02936 255.448);
|
|
76
|
+
--color-blue-3: oklch(26.933% 0.06472 254.279);
|
|
77
|
+
--color-blue-4: oklch(31.736% 0.09355 253.373);
|
|
78
|
+
--color-blue-5: oklch(36.350% 0.10237 253.403);
|
|
79
|
+
--color-blue-6: oklch(41.448% 0.10722 253.461);
|
|
80
|
+
--color-blue-7: oklch(47.169% 0.11511 253.542);
|
|
81
|
+
--color-blue-8: oklch(53.551% 0.13282 253.399);
|
|
82
|
+
--color-blue-9: oklch(75.987% 0.12514 253.837);
|
|
83
|
+
--color-blue-10: oklch(72.507% 0.12510 253.588);
|
|
84
|
+
--color-blue-11: oklch(76.977% 0.12030 252.362);
|
|
85
|
+
--color-blue-12: oklch(90.882% 0.04506 252.742);
|
|
86
|
+
--color-blue-alpha-1: oklch(44.295% 0.29416 260.213 / 0.03999999910593033);
|
|
87
|
+
--color-blue-alpha-2: oklch(64.514% 0.19193 255.622 / 0.10999999940395355);
|
|
88
|
+
--color-blue-alpha-3: oklch(61.761% 0.20392 255.278 / 0.25);
|
|
89
|
+
--color-blue-alpha-4: oklch(60.330% 0.21476 255.162 / 0.36000001430511475);
|
|
90
|
+
--color-blue-alpha-5: oklch(62.748% 0.20377 254.388 / 0.4300000071525574);
|
|
91
|
+
--color-blue-alpha-6: oklch(65.234% 0.18877 253.894 / 0.5);
|
|
92
|
+
--color-blue-alpha-7: oklch(66.820% 0.17727 253.981 / 0.5899999737739563);
|
|
93
|
+
--color-blue-alpha-8: oklch(67.271% 0.17492 253.458 / 0.7099999785423279);
|
|
94
|
+
--color-blue-alpha-9: oklch(75.987% 0.12514 253.837);
|
|
95
|
+
--color-blue-alpha-10: oklch(75.107% 0.13012 253.932 / 0.949999988079071);
|
|
96
|
+
--color-blue-alpha-11: oklch(76.977% 0.12030 252.362);
|
|
97
|
+
--color-blue-alpha-12: oklch(90.882% 0.04506 252.742);
|
|
98
|
+
--color-gray-1: oklch(13.979% 0.00000 86.067);
|
|
99
|
+
--color-gray-2: oklch(20.904% 0.00000 86.067);
|
|
100
|
+
--color-gray-3: oklch(25.196% 0.00000 86.067);
|
|
101
|
+
--color-gray-4: oklch(28.094% 0.00000 86.067);
|
|
102
|
+
--color-gray-5: oklch(31.317% 0.00000 86.067);
|
|
103
|
+
--color-gray-6: oklch(34.846% 0.00000 86.067);
|
|
104
|
+
--color-gray-7: oklch(40.167% 0.00000 86.067);
|
|
105
|
+
--color-gray-8: oklch(48.906% 0.00000 86.067);
|
|
106
|
+
--color-gray-9: oklch(53.476% 0.00000 86.067);
|
|
107
|
+
--color-gray-10: oklch(58.292% 0.00000 86.067);
|
|
108
|
+
--color-gray-11: oklch(76.993% 0.00000 86.067);
|
|
109
|
+
--color-gray-12: oklch(94.912% 0.00000 86.067);
|
|
110
|
+
--color-gray-alpha-1: oklch(13.979% 0.00000 86.067 / 0);
|
|
111
|
+
--color-gray-alpha-2: oklch(100.000% 0.00000 86.067 / 0.05999999865889549);
|
|
112
|
+
--color-gray-alpha-3: oklch(100.000% 0.00000 86.067 / 0.10000000149011612);
|
|
113
|
+
--color-gray-alpha-4: oklch(100.000% 0.00000 86.067 / 0.12999999523162842);
|
|
114
|
+
--color-gray-alpha-5: oklch(100.000% 0.00000 86.067 / 0.1599999964237213);
|
|
115
|
+
--color-gray-alpha-6: oklch(100.000% 0.00000 86.067 / 0.20000000298023224);
|
|
116
|
+
--color-gray-alpha-7: oklch(100.000% 0.00000 86.067 / 0.25);
|
|
117
|
+
--color-gray-alpha-8: oklch(100.000% 0.00000 86.067 / 0.3499999940395355);
|
|
118
|
+
--color-gray-alpha-9: oklch(100.000% 0.00000 86.067 / 0.4099999964237213);
|
|
119
|
+
--color-gray-alpha-10: oklch(100.000% 0.00000 86.067 / 0.46000000834465027);
|
|
120
|
+
--color-gray-alpha-11: oklch(100.000% 0.00000 86.067 / 0.6899999976158142);
|
|
121
|
+
--color-gray-alpha-12: oklch(100.000% 0.00000 86.067 / 0.9300000071525574);
|
|
122
|
+
--opacity-2: 2;
|
|
123
|
+
--opacity-4: 4;
|
|
124
|
+
--opacity-5: 5;
|
|
125
|
+
--opacity-8: 8;
|
|
126
|
+
--opacity-10: 10;
|
|
127
|
+
--opacity-20: 20;
|
|
128
|
+
--opacity-40: 40;
|
|
129
|
+
--opacity-60: 60;
|
|
130
|
+
--opacity-80: 80;
|
|
131
|
+
--opacity-100: 100;
|
|
132
|
+
--opacity-0-2: 0.20000000298023224;
|
|
133
|
+
--text-font-family-heading: Space Grotesk;
|
|
134
|
+
--text-font-family-body: Montserrat;
|
|
135
|
+
--text-font-family-code: Fira Mono;
|
|
136
|
+
--text-font-weight-light: 300;
|
|
137
|
+
--text-font-weight-regular: 400;
|
|
138
|
+
--text-font-weight-medium: 500;
|
|
139
|
+
--text-font-weight-italic: Italic;
|
|
140
|
+
--text-font-weight-bold: 700;
|
|
141
|
+
--text-font-size-xxxl: 1.5rem;
|
|
142
|
+
--text-font-size-xxl: 1.25rem;
|
|
143
|
+
--text-font-size-xl: 1rem;
|
|
144
|
+
--text-font-size-lg: 0.875rem;
|
|
145
|
+
--text-font-size-md: 0.75rem;
|
|
146
|
+
--text-font-size-sm: 0.625rem;
|
|
147
|
+
--text-font-size-xs: 0.5rem;
|
|
148
|
+
--text-line-height-xxxl: 2rem;
|
|
149
|
+
--text-line-height-xxl: 1.625rem;
|
|
150
|
+
--text-line-height-xl: 1.25rem;
|
|
151
|
+
--text-line-height-lg: 1.125rem;
|
|
152
|
+
--text-line-height-md: 1rem;
|
|
153
|
+
--text-line-height-sm: 0.875rem;
|
|
154
|
+
--text-line-height-xs: 0.625rem;
|
|
155
|
+
--text-letter-spacing-xxxl: -0.01899999938905239rem;
|
|
156
|
+
--text-letter-spacing-xxl: -0.012500000186264515rem;
|
|
157
|
+
--text-letter-spacing-xl: -0.006000000052154064rem;
|
|
158
|
+
--text-letter-spacing-lg: 0;
|
|
159
|
+
--text-letter-spacing-md: 0.006000000052154064rem;
|
|
160
|
+
--text-letter-spacing-sm: 0.013000000268220901rem;
|
|
161
|
+
--text-letter-spacing-xs: 0.01899999938905239rem;
|
|
162
|
+
--dim-0: 0;
|
|
163
|
+
--dim-1: 0.0625rem;
|
|
164
|
+
--dim-2: 0.125rem;
|
|
165
|
+
--dim-4: 0.25rem;
|
|
166
|
+
--dim-5: 0.3125rem;
|
|
167
|
+
--dim-6: 0.375rem;
|
|
168
|
+
--dim-8: 0.5rem;
|
|
169
|
+
--dim-10: 0.625rem;
|
|
170
|
+
--dim-12: 0.75rem;
|
|
171
|
+
--dim-14: 0.875rem;
|
|
172
|
+
--dim-16: 1rem;
|
|
173
|
+
--dim-18: 1.125rem;
|
|
174
|
+
--dim-20: 1.25rem;
|
|
175
|
+
--dim-22: 1.375rem;
|
|
176
|
+
--dim-24: 1.5rem;
|
|
177
|
+
--dim-26: 1.625rem;
|
|
178
|
+
--dim-28: 1.75rem;
|
|
179
|
+
--dim-30: 1.875rem;
|
|
180
|
+
--dim-32: 2rem;
|
|
181
|
+
--dim-34: 2.125rem;
|
|
182
|
+
--dim-36: 2.25rem;
|
|
183
|
+
--dim-38: 2.375rem;
|
|
184
|
+
--dim-40: 2.5rem;
|
|
185
|
+
--dim-42: 2.625rem;
|
|
186
|
+
--dim-44: 2.75rem;
|
|
187
|
+
--dim-46: 2.875rem;
|
|
188
|
+
--dim-48: 3rem;
|
|
189
|
+
--dim-60: 3.75rem;
|
|
190
|
+
--dim-64: 4rem;
|
|
191
|
+
--dim-80: 5rem;
|
|
192
|
+
--dim-100: 6.25rem;
|
|
193
|
+
--dim-1p5: 0.09399999678134918rem;
|
|
194
|
+
--dim-0p5: 0.03099999949336052rem;
|
|
195
|
+
--dim-0p1: 0.006000000052154064rem;
|
|
196
|
+
--dim-0p2: 0.013000000268220901rem;
|
|
197
|
+
--dim-0p3: 0.01899999938905239rem;
|
|
198
|
+
--dim--0p3: -0.01899999938905239rem;
|
|
199
|
+
--dim--0p2: -0.012500000186264515rem;
|
|
200
|
+
--dim--0p1: -0.006000000052154064rem;
|
|
201
|
+
--color-text-primary: var(--color-gray-12);
|
|
202
|
+
--color-text-secondary: var(--color-gray-11);
|
|
203
|
+
--color-text-disabled: var(--color-gray-9);
|
|
204
|
+
--color-text-selected: var(--color-green-10);
|
|
205
|
+
--color-text-focus: var(--color-green-12);
|
|
206
|
+
--color-text-focus-subtle: var(--color-green-11);
|
|
207
|
+
--color-text-info: var(--color-blue-11);
|
|
208
|
+
--color-text-info-subtle: var(--color-blue-9);
|
|
209
|
+
--color-text-warning: var(--color-yellow-10);
|
|
210
|
+
--color-text-warning-subtle: var(--color-yellow-8);
|
|
211
|
+
--color-text-error: var(--color-red-12);
|
|
212
|
+
--color-text-error-subtle: var(--color-red-11);
|
|
213
|
+
--color-icon-primary: var(--color-gray-12);
|
|
214
|
+
--color-icon-secondary: var(--color-gray-11);
|
|
215
|
+
--color-icon-disabled: var(--color-gray-9);
|
|
216
|
+
--color-icon-selected: var(--color-green-10);
|
|
217
|
+
--color-icon-focus: var(--color-green-12);
|
|
218
|
+
--color-icon-focus-subltle: var(--color-green-11);
|
|
219
|
+
--color-icon-info: var(--color-blue-11);
|
|
220
|
+
--color-icon-info-subtle: var(--color-blue-9);
|
|
221
|
+
--color-icon-warning: var(--color-yellow-10);
|
|
222
|
+
--color-icon-warning-subtle: var(--color-yellow-8);
|
|
223
|
+
--color-icon-error: var(--color-red-12);
|
|
224
|
+
--color-icon-error-subtle: var(--color-red-11);
|
|
225
|
+
--color-surface-bg: oklch(15.942% 0.01297 235.868);
|
|
226
|
+
--color-surface-primary: oklch(94.912% 0.00000 86.067 / 0.0020000000949949026);
|
|
227
|
+
--color-surface-secondary: oklch(13.979% 0.00000 86.067 / 0.0020000000949949026);
|
|
228
|
+
--color-surface-disabled: var(--color-gray-alpha-3);
|
|
229
|
+
--color-surface-selected: var(--color-green-alpha-2);
|
|
230
|
+
--color-surface-hover: var(--color-gray-alpha-3);
|
|
231
|
+
--color-surface-success: var(--color-green-alpha-4);
|
|
232
|
+
--color-surface-info: var(--color-blue-alpha-2);
|
|
233
|
+
--color-surface-info-hover: var(--color-blue-alpha-3);
|
|
234
|
+
--color-surface-warnig: var(--color-yellow-alpha-2);
|
|
235
|
+
--color-surface-warnig-hover: var(--color-yellow-alpha-3);
|
|
236
|
+
--color-surface-error: var(--color-red-alpha-2);
|
|
237
|
+
--color-surface-error-hover: var(--color-red-alpha-3);
|
|
238
|
+
--color-surface-overlay: oklch(13.979% 0.00000 86.067 / 0.6000000238418579);
|
|
239
|
+
--color-surface-tertiary: var(--color-gray-alpha-2);
|
|
240
|
+
--color-surface-focus: var(--color-green-6);
|
|
241
|
+
--color-surface-success-hover: var(--color-green-alpha-3);
|
|
242
|
+
--color-stroke-primary: var(--color-gray-7);
|
|
243
|
+
--color-stroke-secondary: var(--color-green-7);
|
|
244
|
+
--color-stroke-disabled: var(--color-gray-alpha-8);
|
|
245
|
+
--color-stroke-selected: var(--color-green-7);
|
|
246
|
+
--color-stroke-success: var(--color-green-8);
|
|
247
|
+
--color-stroke-info: var(--color-blue-8);
|
|
248
|
+
--color-stroke-warning: var(--color-yellow-8);
|
|
249
|
+
--color-stroke-error: var(--color-red-7);
|
|
250
|
+
--effects-bg_blur-40: var(--dim-40);
|
|
251
|
+
--effects-bg_blur-60: var(--dim-60);
|
|
252
|
+
--effects-bg_blur-80: var(--dim-80);
|
|
253
|
+
--effects-layer_blur-20: var(--dim-20);
|
|
254
|
+
--radius-sm: var(--dim-2);
|
|
255
|
+
--radius-md: var(--dim-4);
|
|
256
|
+
--radius-lg: var(--dim-8);
|
|
257
|
+
--radius-rounded: 9999px;
|
|
258
|
+
--stroke-xl: var(--dim-1p5);
|
|
259
|
+
--stroke-lg: var(--dim-1);
|
|
260
|
+
--stroke-default: var(--dim-0p5);
|
|
261
|
+
--spacing-0: var(--dim-0);
|
|
262
|
+
--spacing-2: var(--dim-2);
|
|
263
|
+
--spacing-4: var(--dim-4);
|
|
264
|
+
--spacing-6: var(--dim-6);
|
|
265
|
+
--spacing-8: var(--dim-8);
|
|
266
|
+
--spacing-10: var(--dim-10);
|
|
267
|
+
--spacing-12: var(--dim-12);
|
|
268
|
+
--spacing-14: var(--dim-14);
|
|
269
|
+
--spacing-16: var(--dim-16);
|
|
270
|
+
--spacing-18: var(--dim-18);
|
|
271
|
+
--spacing-20: var(--dim-20);
|
|
272
|
+
--spacing-24: var(--dim-24);
|
|
273
|
+
--spacing-28: var(--dim-28);
|
|
274
|
+
--spacing-32: var(--dim-32);
|
|
275
|
+
--spacing-40: var(--dim-40);
|
|
276
|
+
--spacing-48: var(--dim-48);
|
|
277
|
+
--spacing-64: var(--dim-64);
|
|
278
|
+
--sizing-0: var(--dim-0);
|
|
279
|
+
--sizing-2: var(--dim-2);
|
|
280
|
+
--sizing-4: var(--dim-4);
|
|
281
|
+
--sizing-6: var(--dim-6);
|
|
282
|
+
--sizing-8: var(--dim-8);
|
|
283
|
+
--sizing-10: var(--dim-10);
|
|
284
|
+
--sizing-12: var(--dim-12);
|
|
285
|
+
--sizing-14: var(--dim-14);
|
|
286
|
+
--sizing-16: var(--dim-16);
|
|
287
|
+
--sizing-18: var(--dim-18);
|
|
288
|
+
--sizing-20: var(--dim-20);
|
|
289
|
+
--sizing-24: var(--dim-24);
|
|
290
|
+
--sizing-28: var(--dim-28);
|
|
291
|
+
--sizing-32: var(--dim-32);
|
|
292
|
+
--sizing-40: var(--dim-40);
|
|
293
|
+
--sizing-48: var(--dim-48);
|
|
294
|
+
--sizing-64: var(--dim-64);
|
|
295
|
+
}
|
package/src/index.ts
ADDED
|
@@ -0,0 +1,299 @@
|
|
|
1
|
+
export const tokens = {
|
|
2
|
+
'colors': {
|
|
3
|
+
'green': {
|
|
4
|
+
'1': 'var(--color-green-1)',
|
|
5
|
+
'2': 'var(--color-green-2)',
|
|
6
|
+
'3': 'var(--color-green-3)',
|
|
7
|
+
'4': 'var(--color-green-4)',
|
|
8
|
+
'5': 'var(--color-green-5)',
|
|
9
|
+
'6': 'var(--color-green-6)',
|
|
10
|
+
'7': 'var(--color-green-7)',
|
|
11
|
+
'8': 'var(--color-green-8)',
|
|
12
|
+
'9': 'var(--color-green-9)',
|
|
13
|
+
'10': 'var(--color-green-10)',
|
|
14
|
+
'11': 'var(--color-green-11)',
|
|
15
|
+
'12': 'var(--color-green-12)',
|
|
16
|
+
'alpha': {
|
|
17
|
+
'1': 'var(--color-green-alpha-1)',
|
|
18
|
+
'2': 'var(--color-green-alpha-2)',
|
|
19
|
+
'3': 'var(--color-green-alpha-3)',
|
|
20
|
+
'4': 'var(--color-green-alpha-4)',
|
|
21
|
+
'5': 'var(--color-green-alpha-5)',
|
|
22
|
+
'6': 'var(--color-green-alpha-6)',
|
|
23
|
+
'7': 'var(--color-green-alpha-7)',
|
|
24
|
+
'8': 'var(--color-green-alpha-8)',
|
|
25
|
+
'9': 'var(--color-green-alpha-9)',
|
|
26
|
+
'10': 'var(--color-green-alpha-10)',
|
|
27
|
+
'11': 'var(--color-green-alpha-11)',
|
|
28
|
+
'12': 'var(--color-green-alpha-12)'
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
'red': {
|
|
32
|
+
'1': 'var(--color-red-1)',
|
|
33
|
+
'2': 'var(--color-red-2)',
|
|
34
|
+
'3': 'var(--color-red-3)',
|
|
35
|
+
'4': 'var(--color-red-4)',
|
|
36
|
+
'5': 'var(--color-red-5)',
|
|
37
|
+
'6': 'var(--color-red-6)',
|
|
38
|
+
'7': 'var(--color-red-7)',
|
|
39
|
+
'8': 'var(--color-red-8)',
|
|
40
|
+
'9': 'var(--color-red-9)',
|
|
41
|
+
'10': 'var(--color-red-10)',
|
|
42
|
+
'11': 'var(--color-red-11)',
|
|
43
|
+
'12': 'var(--color-red-12)',
|
|
44
|
+
'alpha': {
|
|
45
|
+
'1': 'var(--color-red-alpha-1)',
|
|
46
|
+
'2': 'var(--color-red-alpha-2)',
|
|
47
|
+
'3': 'var(--color-red-alpha-3)',
|
|
48
|
+
'4': 'var(--color-red-alpha-4)',
|
|
49
|
+
'5': 'var(--color-red-alpha-5)',
|
|
50
|
+
'6': 'var(--color-red-alpha-6)',
|
|
51
|
+
'7': 'var(--color-red-alpha-7)',
|
|
52
|
+
'8': 'var(--color-red-alpha-8)',
|
|
53
|
+
'9': 'var(--color-red-alpha-9)',
|
|
54
|
+
'10': 'var(--color-red-alpha-10)',
|
|
55
|
+
'11': 'var(--color-red-alpha-11)',
|
|
56
|
+
'12': 'var(--color-red-alpha-12)'
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
'yellow': {
|
|
60
|
+
'1': 'var(--color-yellow-1)',
|
|
61
|
+
'2': 'var(--color-yellow-2)',
|
|
62
|
+
'3': 'var(--color-yellow-3)',
|
|
63
|
+
'4': 'var(--color-yellow-4)',
|
|
64
|
+
'5': 'var(--color-yellow-5)',
|
|
65
|
+
'6': 'var(--color-yellow-6)',
|
|
66
|
+
'7': 'var(--color-yellow-7)',
|
|
67
|
+
'8': 'var(--color-yellow-8)',
|
|
68
|
+
'9': 'var(--color-yellow-9)',
|
|
69
|
+
'10': 'var(--color-yellow-10)',
|
|
70
|
+
'11': 'var(--color-yellow-11)',
|
|
71
|
+
'12': 'var(--color-yellow-12)',
|
|
72
|
+
'alpha': {
|
|
73
|
+
'1': 'var(--color-yellow-alpha-1)',
|
|
74
|
+
'2': 'var(--color-yellow-alpha-2)',
|
|
75
|
+
'3': 'var(--color-yellow-alpha-3)',
|
|
76
|
+
'4': 'var(--color-yellow-alpha-4)',
|
|
77
|
+
'5': 'var(--color-yellow-alpha-5)',
|
|
78
|
+
'6': 'var(--color-yellow-alpha-6)',
|
|
79
|
+
'7': 'var(--color-yellow-alpha-7)',
|
|
80
|
+
'8': 'var(--color-yellow-alpha-8)',
|
|
81
|
+
'9': 'var(--color-yellow-alpha-9)',
|
|
82
|
+
'10': 'var(--color-yellow-alpha-10)',
|
|
83
|
+
'11': 'var(--color-yellow-alpha-11)',
|
|
84
|
+
'12': 'var(--color-yellow-alpha-12)'
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
'blue': {
|
|
88
|
+
'1': 'var(--color-blue-1)',
|
|
89
|
+
'2': 'var(--color-blue-2)',
|
|
90
|
+
'3': 'var(--color-blue-3)',
|
|
91
|
+
'4': 'var(--color-blue-4)',
|
|
92
|
+
'5': 'var(--color-blue-5)',
|
|
93
|
+
'6': 'var(--color-blue-6)',
|
|
94
|
+
'7': 'var(--color-blue-7)',
|
|
95
|
+
'8': 'var(--color-blue-8)',
|
|
96
|
+
'9': 'var(--color-blue-9)',
|
|
97
|
+
'10': 'var(--color-blue-10)',
|
|
98
|
+
'11': 'var(--color-blue-11)',
|
|
99
|
+
'12': 'var(--color-blue-12)',
|
|
100
|
+
'alpha': {
|
|
101
|
+
'1': 'var(--color-blue-alpha-1)',
|
|
102
|
+
'2': 'var(--color-blue-alpha-2)',
|
|
103
|
+
'3': 'var(--color-blue-alpha-3)',
|
|
104
|
+
'4': 'var(--color-blue-alpha-4)',
|
|
105
|
+
'5': 'var(--color-blue-alpha-5)',
|
|
106
|
+
'6': 'var(--color-blue-alpha-6)',
|
|
107
|
+
'7': 'var(--color-blue-alpha-7)',
|
|
108
|
+
'8': 'var(--color-blue-alpha-8)',
|
|
109
|
+
'9': 'var(--color-blue-alpha-9)',
|
|
110
|
+
'10': 'var(--color-blue-alpha-10)',
|
|
111
|
+
'11': 'var(--color-blue-alpha-11)',
|
|
112
|
+
'12': 'var(--color-blue-alpha-12)'
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
'gray': {
|
|
116
|
+
'1': 'var(--color-gray-1)',
|
|
117
|
+
'2': 'var(--color-gray-2)',
|
|
118
|
+
'3': 'var(--color-gray-3)',
|
|
119
|
+
'4': 'var(--color-gray-4)',
|
|
120
|
+
'5': 'var(--color-gray-5)',
|
|
121
|
+
'6': 'var(--color-gray-6)',
|
|
122
|
+
'7': 'var(--color-gray-7)',
|
|
123
|
+
'8': 'var(--color-gray-8)',
|
|
124
|
+
'9': 'var(--color-gray-9)',
|
|
125
|
+
'10': 'var(--color-gray-10)',
|
|
126
|
+
'11': 'var(--color-gray-11)',
|
|
127
|
+
'12': 'var(--color-gray-12)',
|
|
128
|
+
'alpha': {
|
|
129
|
+
'1': 'var(--color-gray-alpha-1)',
|
|
130
|
+
'2': 'var(--color-gray-alpha-2)',
|
|
131
|
+
'3': 'var(--color-gray-alpha-3)',
|
|
132
|
+
'4': 'var(--color-gray-alpha-4)',
|
|
133
|
+
'5': 'var(--color-gray-alpha-5)',
|
|
134
|
+
'6': 'var(--color-gray-alpha-6)',
|
|
135
|
+
'7': 'var(--color-gray-alpha-7)',
|
|
136
|
+
'8': 'var(--color-gray-alpha-8)',
|
|
137
|
+
'9': 'var(--color-gray-alpha-9)',
|
|
138
|
+
'10': 'var(--color-gray-alpha-10)',
|
|
139
|
+
'11': 'var(--color-gray-alpha-11)',
|
|
140
|
+
'12': 'var(--color-gray-alpha-12)'
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
'text': {
|
|
144
|
+
'primary': 'var(--color-text-primary)',
|
|
145
|
+
'secondary': 'var(--color-text-secondary)',
|
|
146
|
+
'disabled': 'var(--color-text-disabled)',
|
|
147
|
+
'selected': 'var(--color-text-selected)',
|
|
148
|
+
'focus': {
|
|
149
|
+
'DEFAULT': 'var(--color-text-focus)',
|
|
150
|
+
'subtle': 'var(--color-text-focus-subtle)'
|
|
151
|
+
},
|
|
152
|
+
'info': {
|
|
153
|
+
'DEFAULT': 'var(--color-text-info)',
|
|
154
|
+
'subtle': 'var(--color-text-info-subtle)'
|
|
155
|
+
},
|
|
156
|
+
'warning': {
|
|
157
|
+
'DEFAULT': 'var(--color-text-warning)',
|
|
158
|
+
'subtle': 'var(--color-text-warning-subtle)'
|
|
159
|
+
},
|
|
160
|
+
'error': {
|
|
161
|
+
'DEFAULT': 'var(--color-text-error)',
|
|
162
|
+
'subtle': 'var(--color-text-error-subtle)'
|
|
163
|
+
}
|
|
164
|
+
},
|
|
165
|
+
'icon': {
|
|
166
|
+
'primary': 'var(--color-icon-primary)',
|
|
167
|
+
'secondary': 'var(--color-icon-secondary)',
|
|
168
|
+
'disabled': 'var(--color-icon-disabled)',
|
|
169
|
+
'selected': 'var(--color-icon-selected)',
|
|
170
|
+
'focus': {
|
|
171
|
+
'DEFAULT': 'var(--color-icon-focus)',
|
|
172
|
+
'subltle': 'var(--color-icon-focus-subltle)'
|
|
173
|
+
},
|
|
174
|
+
'info': {
|
|
175
|
+
'DEFAULT': 'var(--color-icon-info)',
|
|
176
|
+
'subtle': 'var(--color-icon-info-subtle)'
|
|
177
|
+
},
|
|
178
|
+
'warning': {
|
|
179
|
+
'DEFAULT': 'var(--color-icon-warning)',
|
|
180
|
+
'subtle': 'var(--color-icon-warning-subtle)'
|
|
181
|
+
},
|
|
182
|
+
'error': {
|
|
183
|
+
'DEFAULT': 'var(--color-icon-error)',
|
|
184
|
+
'subtle': 'var(--color-icon-error-subtle)'
|
|
185
|
+
}
|
|
186
|
+
},
|
|
187
|
+
'surface': {
|
|
188
|
+
'bg': 'var(--color-surface-bg)',
|
|
189
|
+
'primary': 'var(--color-surface-primary)',
|
|
190
|
+
'secondary': 'var(--color-surface-secondary)',
|
|
191
|
+
'disabled': 'var(--color-surface-disabled)',
|
|
192
|
+
'selected': 'var(--color-surface-selected)',
|
|
193
|
+
'hover': 'var(--color-surface-hover)',
|
|
194
|
+
'success': {
|
|
195
|
+
'DEFAULT': 'var(--color-surface-success)',
|
|
196
|
+
'hover': 'var(--color-surface-success-hover)'
|
|
197
|
+
},
|
|
198
|
+
'info': {
|
|
199
|
+
'DEFAULT': 'var(--color-surface-info)',
|
|
200
|
+
'hover': 'var(--color-surface-info-hover)'
|
|
201
|
+
},
|
|
202
|
+
'warnig': {
|
|
203
|
+
'DEFAULT': 'var(--color-surface-warnig)',
|
|
204
|
+
'hover': 'var(--color-surface-warnig-hover)'
|
|
205
|
+
},
|
|
206
|
+
'error': {
|
|
207
|
+
'DEFAULT': 'var(--color-surface-error)',
|
|
208
|
+
'hover': 'var(--color-surface-error-hover)'
|
|
209
|
+
},
|
|
210
|
+
'overlay': 'var(--color-surface-overlay)',
|
|
211
|
+
'tertiary': 'var(--color-surface-tertiary)',
|
|
212
|
+
'focus': 'var(--color-surface-focus)'
|
|
213
|
+
},
|
|
214
|
+
'stroke': {
|
|
215
|
+
'primary': 'var(--color-stroke-primary)',
|
|
216
|
+
'secondary': 'var(--color-stroke-secondary)',
|
|
217
|
+
'disabled': 'var(--color-stroke-disabled)',
|
|
218
|
+
'selected': 'var(--color-stroke-selected)',
|
|
219
|
+
'success': 'var(--color-stroke-success)',
|
|
220
|
+
'info': 'var(--color-stroke-info)',
|
|
221
|
+
'warning': 'var(--color-stroke-warning)',
|
|
222
|
+
'error': 'var(--color-stroke-error)'
|
|
223
|
+
}
|
|
224
|
+
},
|
|
225
|
+
'spacing': {
|
|
226
|
+
'0': 'var(--sizing-0)',
|
|
227
|
+
'2': 'var(--sizing-2)',
|
|
228
|
+
'4': 'var(--sizing-4)',
|
|
229
|
+
'6': 'var(--sizing-6)',
|
|
230
|
+
'8': 'var(--sizing-8)',
|
|
231
|
+
'10': 'var(--sizing-10)',
|
|
232
|
+
'12': 'var(--sizing-12)',
|
|
233
|
+
'14': 'var(--sizing-14)',
|
|
234
|
+
'16': 'var(--sizing-16)',
|
|
235
|
+
'18': 'var(--sizing-18)',
|
|
236
|
+
'20': 'var(--sizing-20)',
|
|
237
|
+
'24': 'var(--sizing-24)',
|
|
238
|
+
'28': 'var(--sizing-28)',
|
|
239
|
+
'32': 'var(--sizing-32)',
|
|
240
|
+
'40': 'var(--sizing-40)',
|
|
241
|
+
'48': 'var(--sizing-48)',
|
|
242
|
+
'64': 'var(--sizing-64)'
|
|
243
|
+
},
|
|
244
|
+
'borderRadius': {
|
|
245
|
+
'sm': 'var(--radius-sm)',
|
|
246
|
+
'md': 'var(--radius-md)',
|
|
247
|
+
'lg': 'var(--radius-lg)',
|
|
248
|
+
'rounded': 'var(--radius-rounded)'
|
|
249
|
+
},
|
|
250
|
+
'opacity': {
|
|
251
|
+
'0': {
|
|
252
|
+
'2': 'var(--opacity-0-2)'
|
|
253
|
+
},
|
|
254
|
+
'2': 'var(--opacity-2)',
|
|
255
|
+
'4': 'var(--opacity-4)',
|
|
256
|
+
'5': 'var(--opacity-5)',
|
|
257
|
+
'8': 'var(--opacity-8)',
|
|
258
|
+
'10': 'var(--opacity-10)',
|
|
259
|
+
'20': 'var(--opacity-20)',
|
|
260
|
+
'40': 'var(--opacity-40)',
|
|
261
|
+
'60': 'var(--opacity-60)',
|
|
262
|
+
'80': 'var(--opacity-80)',
|
|
263
|
+
'100': 'var(--opacity-100)'
|
|
264
|
+
},
|
|
265
|
+
'fontSize': {
|
|
266
|
+
'xxxl': 'var(--text-font-size-xxxl)',
|
|
267
|
+
'xxl': 'var(--text-font-size-xxl)',
|
|
268
|
+
'xl': 'var(--text-font-size-xl)',
|
|
269
|
+
'lg': 'var(--text-font-size-lg)',
|
|
270
|
+
'md': 'var(--text-font-size-md)',
|
|
271
|
+
'sm': 'var(--text-font-size-sm)',
|
|
272
|
+
'xs': 'var(--text-font-size-xs)'
|
|
273
|
+
},
|
|
274
|
+
'fontWeight': {
|
|
275
|
+
'light': 'var(--text-font-weight-light)',
|
|
276
|
+
'regular': 'var(--text-font-weight-regular)',
|
|
277
|
+
'medium': 'var(--text-font-weight-medium)',
|
|
278
|
+
'italic': 'var(--text-font-weight-italic)',
|
|
279
|
+
'bold': 'var(--text-font-weight-bold)'
|
|
280
|
+
},
|
|
281
|
+
'lineHeight': {
|
|
282
|
+
'xxxl': 'var(--text-line-height-xxxl)',
|
|
283
|
+
'xxl': 'var(--text-line-height-xxl)',
|
|
284
|
+
'xl': 'var(--text-line-height-xl)',
|
|
285
|
+
'lg': 'var(--text-line-height-lg)',
|
|
286
|
+
'md': 'var(--text-line-height-md)',
|
|
287
|
+
'sm': 'var(--text-line-height-sm)',
|
|
288
|
+
'xs': 'var(--text-line-height-xs)'
|
|
289
|
+
},
|
|
290
|
+
'letterSpacing': {
|
|
291
|
+
'xxxl': 'var(--text-letter-spacing-xxxl)',
|
|
292
|
+
'xxl': 'var(--text-letter-spacing-xxl)',
|
|
293
|
+
'xl': 'var(--text-letter-spacing-xl)',
|
|
294
|
+
'lg': 'var(--text-letter-spacing-lg)',
|
|
295
|
+
'md': 'var(--text-letter-spacing-md)',
|
|
296
|
+
'sm': 'var(--text-letter-spacing-sm)',
|
|
297
|
+
'xs': 'var(--text-letter-spacing-xs)'
|
|
298
|
+
}
|
|
299
|
+
};
|