trepur_components 2.3.6 → 2.3.7

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 (15) hide show
  1. package/lib/styles/global.css +1 -0
  2. package/lib/styles/themes/palette.css +131 -0
  3. package/lib/tailwind/boxShadow.ts +9 -0
  4. package/lib/tailwind/colors.ts +410 -0
  5. package/lib/tailwind/container.ts +11 -0
  6. package/lib/tailwind/preset.ts +88 -0
  7. package/lib/tailwind/spacing.ts +14 -0
  8. package/package.json +1 -1
  9. package/src/styles/global.css +1 -0
  10. package/src/styles/themes/palette.css +131 -0
  11. package/tailwind/boxShadow.ts +9 -0
  12. package/tailwind/colors.ts +410 -0
  13. package/tailwind/container.ts +11 -0
  14. package/tailwind/preset.ts +88 -0
  15. package/tailwind/spacing.ts +14 -0
package/lib/styles/global.css CHANGED
@@ -1,3 +1,4 @@
1
+ @import './themes/palette.css';
1
2
  @import './themes/local.css';
2
3
 
3
4
  @tailwind base;
package/lib/styles/themes/palette.css ADDED
@@ -0,0 +1,131 @@
1
+ * {
2
+ /* Palette */
3
+ --hsl-black: 0 0% 0%;
4
+ --hsl-white: 0 0% 100%;
5
+
6
+ /* Blue */
7
+ --hsl-blue-100: 240 100% 15%;
8
+ --hsl-blue-90: 240 91% 26%;
9
+ --hsl-blue-80: 239 82.1% 44%;
10
+ --hsl-blue-70: 235 89.8% 57.8%;
11
+ --hsl-blue-60: 233 92.4% 63.7%;
12
+ --hsl-blue-50: 230 94.7% 70.4%;
13
+ --hsl-blue-40: 227 96.4% 78.4%;
14
+ --hsl-blue-30: 224 97% 87.1%;
15
+ --hsl-blue-20: 222 100% 91.6%;
16
+ --hsl-blue-10: 222 100% 96.1%;
17
+
18
+ /* Cyan */
19
+ --hsl-cyan-100: 198.1 96.4% 10.8%;
20
+ --hsl-cyan-90: 198 100% 18.6%;
21
+ --hsl-cyan-80: 198.3 93.8% 31.6%;
22
+ --hsl-cyan-70: 197.9 85.1% 39.4%;
23
+ --hsl-cyan-60: 198 73.5% 48.8%;
24
+ --hsl-cyan-50: 197.9 91.1% 60.4%;
25
+ --hsl-cyan-40: 198 91.1% 69.2%;
26
+ --hsl-cyan-30: 198.2 92.7% 78.4%;
27
+ --hsl-cyan-20: 198.3 93.7% 87.6%;
28
+ --hsl-cyan-10: 200 100% 97.1%;
29
+
30
+ /* Fuchsia */
31
+ --hsl-fuchsia-100: 296.9 54.9% 13.9%;
32
+ --hsl-fuchsia-90: 297.4 60% 22.5%;
33
+ --hsl-fuchsia-80: 298.2 66.7% 38.8%;
34
+ --hsl-fuchsia-70: 297.8 67.6% 47.3%;
35
+ --hsl-fuchsia-60: 297.8 85.7% 56.3%;
36
+ --hsl-fuchsia-50: 297.8 94.3% 65.5%;
37
+ --hsl-fuchsia-40: 300 100% 75.1%;
38
+ --hsl-fuchsia-30: 300 100% 86.1%;
39
+ --hsl-fuchsia-20: 300 100% 91.6%;
40
+ --hsl-fuchsia-10: 296 100% 97.1%;
41
+
42
+ /* Green */
43
+ --hsl-green-100: 140.6 94.6% 7.3%;
44
+ --hsl-green-90: 135.6 73% 14.5%;
45
+ --hsl-green-80: 136.4 67.7% 25.5%;
46
+ --hsl-green-70: 139.6 68.5% 32.4%;
47
+ --hsl-green-60: 140.2 54.7% 45.9%;
48
+ --hsl-green-50: 139.8 55.4% 65.7%;
49
+ --hsl-green-40: 140.3 64.4% 80.2%;
50
+ --hsl-green-30: 135.6 73.5% 86.7%;
51
+ --hsl-green-20: 136 75% 92.2%;
52
+ --hsl-green-10: 138 100% 98%;
53
+
54
+ /* Neutral */
55
+ --hsl-neutral-99: 216.7 64.3% 5.5%;
56
+ --hsl-neutral-95: 220.9 39.3% 11%;
57
+ --hsl-neutral-90: 223.6 27.5% 15.7%;
58
+ --hsl-neutral-85: 222 19.6% 20%;
59
+ --hsl-neutral-80: 222.4 11.6% 28.8%;
60
+ --hsl-neutral-70: 221.3 8.3% 37.6%;
61
+ --hsl-neutral-60: 221.5 5.5% 46.5%;
62
+ --hsl-neutral-50: 223.6 4.8% 55.5%;
63
+ --hsl-neutral-40: 220 5% 64.5%;
64
+ --hsl-neutral-30: 220 5.3% 77.6%;
65
+ --hsl-neutral-25: 216 5.5% 82.2%;
66
+ --hsl-neutral-20: 225 5.9% 86.7%;
67
+ --hsl-neutral-15: 210 4.3% 91%;
68
+ --hsl-neutral-10: 180 4.3% 95.5%;
69
+ --hsl-neutral-5: 210 20% 98%;
70
+ --hsl-neutral-1: 0 0% 99.6%;
71
+
72
+ /* Orange */
73
+ --hsl-orange-100: 23.6 57.9% 11.2%;
74
+ --hsl-orange-90: 24.7 64.2% 20.8%;
75
+ --hsl-orange-80: 25.1 68.6% 30%;
76
+ --hsl-orange-70: 24.8 72.5% 48.4%;
77
+ --hsl-orange-60: 24.8 88.5% 55.5%;
78
+ --hsl-orange-50: 26 100% 66.5%;
79
+ --hsl-orange-40: 28.3 100% 75.9%;
80
+ --hsl-orange-30: 28.1 100% 87.5%;
81
+ --hsl-orange-20: 27.4 100% 93.1%;
82
+ --hsl-orange-10: 30 100% 98.4%;
83
+
84
+ /* Purple */
85
+ --hsl-purple-100: 265.5 60.6% 12.9%;
86
+ --hsl-purple-90: 266.1 85.7% 24.7%;
87
+ --hsl-purple-80: 266 83.6% 40.6%;
88
+ --hsl-purple-70: 265.9 78% 50%;
89
+ --hsl-purple-60: 266 85.2% 60.2%;
90
+ --hsl-purple-50: 265.7 97.2% 72.2%;
91
+ --hsl-purple-40: 266.1 96.4% 78%;
92
+ --hsl-purple-30: 266.2 97.5% 84.3%;
93
+ --hsl-purple-20: 266.1 95.8% 90.6%;
94
+ --hsl-purple-10: 264 100% 97.1%;
95
+
96
+ /* Red */
97
+ --hsl-red-100: 356.6 63.6% 10.8%;
98
+ --hsl-red-90: 356.3 69.9% 18.2%;
99
+ --hsl-red-80: 356.9 74% 25.7%;
100
+ --hsl-red-70: 356.8 77.4% 32.9%;
101
+ --hsl-red-60: 356.9 75.9% 45.5%;
102
+ --hsl-red-50: 356.5 87.9% 57.8%;
103
+ --hsl-red-40: 356.8 89.2% 71%;
104
+ --hsl-red-30: 357.5 89.9% 84.5%;
105
+ --hsl-red-20: 357 90.9% 91.4%;
106
+ --hsl-red-10: 352.5 100% 98.4%;
107
+
108
+ /* Teal */
109
+ --hsl-teal-100: 177.1 44.7% 9.2%;
110
+ --hsl-teal-90: 180 51.3% 15.3%;
111
+ --hsl-teal-80: 179.1 61.9% 20.6%;
112
+ --hsl-teal-70: 179.3 70.8% 25.5%;
113
+ --hsl-teal-60: 178.9 100% 30.8%;
114
+ --hsl-teal-50: 179 91.9% 38.6%;
115
+ --hsl-teal-40: 178.9 64.8% 52.2%;
116
+ --hsl-teal-30: 178.7 68.4% 73.9%;
117
+ --hsl-teal-20: 178.8 69.9% 85.7%;
118
+ --hsl-teal-10: 180 100% 98.4%;
119
+
120
+ /* Yellow */
121
+ --hsl-yellow-100: 47 85.2% 10.6%;
122
+ --hsl-yellow-90: 46.9 90.7% 16.9%;
123
+ --hsl-yellow-80: 46.9 94.8% 22.7%;
124
+ --hsl-yellow-70: 47.1 94.5% 35.7%;
125
+ --hsl-yellow-60: 46.9 89.1% 43.3%;
126
+ --hsl-yellow-50: 46.8 88.4% 52.5%;
127
+ --hsl-yellow-40: 46.9 97.7% 66.1%;
128
+ --hsl-yellow-30: 46.7 100% 82.4%;
129
+ --hsl-yellow-20: 46.5 100% 90.4%;
130
+ --hsl-yellow-10: 45 100% 98.4%;
131
+ }
package/lib/tailwind/boxShadow.ts ADDED
@@ -0,0 +1,9 @@
1
+ /* eslint-disable sort-keys */
2
+
3
+ export default {
4
+ sm: 'var(--shadow-sm)',
5
+ DEFAULT: 'var(--shadow)',
6
+ md: 'var(--shadow-md)',
7
+ lg: 'var(--shadow-lg)',
8
+ xl: 'var(--shadow-xl)',
9
+ };
package/lib/tailwind/colors.ts ADDED
@@ -0,0 +1,410 @@
1
+ /* eslint-disable sort-keys */
2
+ export default {
3
+ focus: 'hsl(var(--hsl-focus))',
4
+ overlay: 'hsl(var(--hsl-overlay))',
5
+ page: 'hsl(var(--hsl-page))',
6
+ // General
7
+ active: {
8
+ DEFAULT: 'hsl(var(--hsl-active))',
9
+ foreground: 'hsl(var(--hsl-active-foreground))',
10
+ },
11
+ inactive: {
12
+ DEFAULT: 'hsl(var(--hsl-inactive))',
13
+ foreground: 'hsl(var(--hsl-inactive-foreground))',
14
+ readonly: 'hsl(var(--hsl-inactive-readonly))',
15
+ subtle: 'hsl(var(--hsl-inactive-subtle))',
16
+ },
17
+ border: {
18
+ DEFAULT: 'hsl(var(--hsl-border))',
19
+ secondary: 'hsl(var(--hsl-border-secondary))',
20
+ tertiary: 'hsl(var(--hsl-border-tertiary))',
21
+ inverse: 'hsl(var(--hsl-border-inverse))',
22
+ },
23
+ foreground: {
24
+ DEFAULT: 'hsl(var(--hsl-foreground))',
25
+ secondary: 'hsl(var(--hsl-foreground-secondary))',
26
+ tertiary: 'hsl(var(--hsl-foreground-tertiary))',
27
+ inverse: 'hsl(var(--hsl-foreground-inverse))',
28
+ },
29
+ skeleton: {
30
+ DEFAULT: 'hsl(var(--hsl-skeleton))',
31
+ inverse: 'hsl(var(--hsl-skeleton-inverse))',
32
+ },
33
+ textlink: {
34
+ DEFAULT: 'hsl(var(--hsl-textlink))',
35
+ hover: 'hsl(var(--hsl-textlink-hover))',
36
+ },
37
+ dataviz: {
38
+ 1: 'hsl(var(--hsl-dataviz-1))',
39
+ 2: 'hsl(var(--hsl-dataviz-2))',
40
+ 3: 'hsl(var(--hsl-dataviz-3))',
41
+ 4: 'hsl(var(--hsl-dataviz-4))',
42
+ 5: 'hsl(var(--hsl-dataviz-5))',
43
+ 6: 'hsl(var(--hsl-dataviz-6))',
44
+ 7: 'hsl(var(--hsl-dataviz-7))',
45
+ 8: 'hsl(var(--hsl-dataviz-8))',
46
+ 9: 'hsl(var(--hsl-dataviz-9))',
47
+ 10: 'hsl(var(--hsl-dataviz-10))',
48
+ 11: 'hsl(var(--hsl-dataviz-11))',
49
+ 12: 'hsl(var(--hsl-dataviz-12))',
50
+ 13: 'hsl(var(--hsl-dataviz-13))',
51
+ 14: 'hsl(var(--hsl-dataviz-14))',
52
+ 15: 'hsl(var(--hsl-dataviz-15))',
53
+ 16: 'hsl(var(--hsl-dataviz-16))',
54
+ },
55
+ // Contextual
56
+ error: {
57
+ DEFAULT: 'hsl(var(--hsl-error))',
58
+ border: 'hsl(var(--hsl-error-border))',
59
+ hover: 'hsl(var(--hsl-error-hover))',
60
+ press: 'hsl(var(--hsl-error-press))',
61
+ skeleton: 'hsl(var(--hsl-error-skeleton))',
62
+ accent: 'hsl(var(--hsl-error-accent))',
63
+ foreground: 'hsl(var(--hsl-error-foreground))',
64
+ secondary: 'hsl(var(--hsl-error-secondary))',
65
+ },
66
+ info: {
67
+ DEFAULT: 'hsl(var(--hsl-info))',
68
+ border: 'hsl(var(--hsl-info-border))',
69
+ hover: 'hsl(var(--hsl-info-hover))',
70
+ press: 'hsl(var(--hsl-info-press))',
71
+ skeleton: 'hsl(var(--hsl-info-skeleton))',
72
+ accent: 'hsl(var(--hsl-info-accent))',
73
+ foreground: 'hsl(var(--hsl-info-foreground))',
74
+ secondary: 'hsl(var(--hsl-info-secondary))',
75
+ },
76
+ success: {
77
+ DEFAULT: 'hsl(var(--hsl-success))',
78
+ border: 'hsl(var(--hsl-success-border))',
79
+ hover: 'hsl(var(--hsl-success-hover))',
80
+ press: 'hsl(var(--hsl-success-press))',
81
+ skeleton: 'hsl(var(--hsl-success-skeleton))',
82
+ accent: 'hsl(var(--hsl-success-accent))',
83
+ foreground: 'hsl(var(--hsl-success-foreground))',
84
+ secondary: 'hsl(var(--hsl-success-secondary))',
85
+ },
86
+ warning: {
87
+ DEFAULT: 'hsl(var(--hsl-warning))',
88
+ border: 'hsl(var(--hsl-warning-border))',
89
+ hover: 'hsl(var(--hsl-warning-hover))',
90
+ press: 'hsl(var(--hsl-warning-press))',
91
+ skeleton: 'hsl(var(--hsl-warning-skeleton))',
92
+ accent: 'hsl(var(--hsl-warning-accent))',
93
+ foreground: 'hsl(var(--hsl-warning-foreground))',
94
+ secondary: 'hsl(var(--hsl-warning-secondary))',
95
+ },
96
+ // Components
97
+ button: {
98
+ primary: {
99
+ DEFAULT: 'hsl(var(--hsl-button-primary))',
100
+ hover: 'hsl(var(--hsl-button-primary-hover))',
101
+ press: 'hsl(var(--hsl-button-primary-press))',
102
+ skeleton: 'hsl(var(--hsl-button-primary-skeleton))',
103
+ foreground: 'hsl(var(--hsl-button-primary-foreground))',
104
+ },
105
+ secondary: {
106
+ DEFAULT: 'hsl(var(--hsl-button-secondary))',
107
+ hover: 'hsl(var(--hsl-button-secondary-hover))',
108
+ press: 'hsl(var(--hsl-button-secondary-press))',
109
+ skeleton: 'hsl(var(--hsl-button-secondary-skeleton))',
110
+ foreground: 'hsl(var(--hsl-button-secondary-foreground))',
111
+ },
112
+ group: {
113
+ DEFAULT: 'hsl(var(--hsl-button-group))',
114
+ hover: 'hsl(var(--hsl-button-group-hover))',
115
+ press: 'hsl(var(--hsl-button-group-press))',
116
+ skeleton: 'hsl(var(--hsl-button-group-skeleton))',
117
+ foreground: 'hsl(var(--hsl-button-group-foreground))',
118
+ },
119
+ outline: {
120
+ hover: 'hsl(var(--hsl-button-outline-hover))',
121
+ press: 'hsl(var(--hsl-button-outline-press))',
122
+ skeleton: 'hsl(var(--hsl-button-outline-skeleton))',
123
+ foreground: 'hsl(var(--hsl-button-outline-foreground))',
124
+ },
125
+ ghost: {
126
+ hover: 'hsl(var(--hsl-button-ghost-hover))',
127
+ press: 'hsl(var(--hsl-button-ghost-press))',
128
+ foreground: 'hsl(var(--hsl-button-ghost-foreground))',
129
+ },
130
+ inverse: {
131
+ hover: 'hsl(var(--hsl-button-inverse-hover))',
132
+ press: 'hsl(var(--hsl-button-inverse-press))',
133
+ },
134
+ disabled: {
135
+ DEFAULT: 'hsl(var(--hsl-button-disabled))',
136
+ foreground: 'hsl(var(--hsl-button-disabled-foreground))',
137
+ 'foreground-actionbutton':
138
+ 'hsl(var(--hsl-button-disabled-foreground-actionbutton))',
139
+ 'foreground-group': 'hsl(var(--hsl-button-disabled-foreground-group))',
140
+ inverse: 'hsl(var(--hsl-button-disabled-inverse))',
141
+ 'inverse-foreground':
142
+ 'hsl(var(--hsl-button-disabled-inverse-foreground))',
143
+ },
144
+ },
145
+
146
+ card: {
147
+ DEFAULT: 'hsl(var(--hsl-card))',
148
+ secondary: 'hsl(var(--hsl-card-secondary))',
149
+ tertiary: 'hsl(var(--hsl-card-tertiary))',
150
+ quaternary: 'hsl(var(--hsl-card-quaternary))',
151
+ inverse: 'hsl(var(--hsl-card-inverse))',
152
+ },
153
+
154
+ lozenge: {
155
+ blue: {
156
+ DEFAULT: 'hsl(var(--hsl-lozenge-blue))',
157
+ hover: 'hsl(var(--hsl-lozenge-blue-hover))',
158
+ press: 'hsl(var(--hsl-lozenge-blue-press))',
159
+ },
160
+ cyan: {
161
+ DEFAULT: 'hsl(var(--hsl-lozenge-cyan))',
162
+ hover: 'hsl(var(--hsl-lozenge-cyan-hover))',
163
+ press: 'hsl(var(--hsl-lozenge-cyan-press))',
164
+ },
165
+ fuchsia: {
166
+ DEFAULT: 'hsl(var(--hsl-lozenge-fuchsia))',
167
+ hover: 'hsl(var(--hsl-lozenge-fuchsia-hover))',
168
+ press: 'hsl(var(--hsl-lozenge-fuchsia-press))',
169
+ },
170
+ neutral: {
171
+ DEFAULT: 'hsl(var(--hsl-lozenge-neutral))',
172
+ hover: 'hsl(var(--hsl-lozenge-neutral-hover))',
173
+ press: 'hsl(var(--hsl-lozenge-neutral-press))',
174
+ },
175
+ orange: {
176
+ DEFAULT: 'hsl(var(--hsl-lozenge-orange))',
177
+ hover: 'hsl(var(--hsl-lozenge-orange-hover))',
178
+ press: 'hsl(var(--hsl-lozenge-orange-press))',
179
+ },
180
+ purple: {
181
+ DEFAULT: 'hsl(var(--hsl-lozenge-purple))',
182
+ hover: 'hsl(var(--hsl-lozenge-purple-hover))',
183
+ press: 'hsl(var(--hsl-lozenge-purple-press))',
184
+ },
185
+ teal: {
186
+ DEFAULT: 'hsl(var(--hsl-lozenge-teal))',
187
+ hover: 'hsl(var(--hsl-lozenge-teal-hover))',
188
+ press: 'hsl(var(--hsl-lozenge-teal-press))',
189
+ },
190
+ white: {
191
+ DEFAULT: 'hsl(var(--hsl-lozenge-white))',
192
+ hover: 'hsl(var(--hsl-lozenge-white-hover))',
193
+ press: 'hsl(var(--hsl-lozenge-white-press))',
194
+ },
195
+ yellow: {
196
+ DEFAULT: 'hsl(var(--hsl-lozenge-yellow))',
197
+ hover: 'hsl(var(--hsl-lozenge-yellow-hover))',
198
+ press: 'hsl(var(--hsl-lozenge-yellow-press))',
199
+ },
200
+ green: {
201
+ DEFAULT: 'hsl(var(--hsl-lozenge-green))',
202
+ hover: 'hsl(var(--hsl-lozenge-green-hover))',
203
+ press: 'hsl(var(--hsl-lozenge-green-press))',
204
+ },
205
+ red: {
206
+ DEFAULT: 'hsl(var(--hsl-lozenge-red))',
207
+ hover: 'hsl(var(--hsl-lozenge-red-hover))',
208
+ press: 'hsl(var(--hsl-lozenge-red-press))',
209
+ },
210
+ },
211
+
212
+ sidebar: {
213
+ DEFAULT: 'hsl(var(--hsl-sidebar))',
214
+ active: 'hsl(var(--hsl-sidebar-active))',
215
+ foreground: {
216
+ DEFAULT: 'hsl(var(--hsl-sidebar-foreground))',
217
+ secondary: 'hsl(var(--hsl-sidebar-foreground-secondary))',
218
+ },
219
+ hover: 'hsl(var(--hsl-sidebar-hover))',
220
+ skeleton: 'hsl(var(--hsl-sidebar-skeleton))',
221
+ border: 'hsl(var(--hsl-sidebar-border))',
222
+ },
223
+
224
+ switch: {
225
+ off: {
226
+ DEFAULT: 'hsl(var(--hsl-switch-off))',
227
+ hover: 'hsl(var(--hsl-switch-off-hover))',
228
+ disabled: 'hsl(var(--hsl-switch-off-disabled))',
229
+ foreground: 'hsl(var(--hsl-switch-off-foreground))',
230
+ },
231
+ on: {
232
+ DEFAULT: 'hsl(var(--hsl-switch-on))',
233
+ hover: 'hsl(var(--hsl-switch-on-hover))',
234
+ foreground: 'hsl(var(--hsl-switch-on-foreground))',
235
+ disabled: {
236
+ DEFAULT: 'hsl(var(--hsl-switch-on-disabled))',
237
+ foreground: 'hsl(var(--hsl-switch-on-disabled-foreground))',
238
+ },
239
+ },
240
+ },
241
+ tag: {
242
+ neutral: {
243
+ DEFAULT: 'hsl(var(--hsl-tag-neutral))',
244
+ border: 'hsl(var(--hsl-tag-neutral-border))',
245
+ },
246
+ blue: {
247
+ DEFAULT: 'hsl(var(--hsl-tag-blue))',
248
+ border: 'hsl(var(--hsl-tag-blue-border))',
249
+ },
250
+ cyan: {
251
+ DEFAULT: 'hsl(var(--hsl-tag-cyan))',
252
+ border: 'hsl(var(--hsl-tag-cyan-border))',
253
+ },
254
+ fuchsia: {
255
+ DEFAULT: 'hsl(var(--hsl-tag-fuchsia))',
256
+ border: 'hsl(var(--hsl-tag-fuchsia-border))',
257
+ },
258
+ green: {
259
+ DEFAULT: 'hsl(var(--hsl-tag-green))',
260
+ border: 'hsl(var(--hsl-tag-green-border))',
261
+ },
262
+ orange: {
263
+ DEFAULT: 'hsl(var(--hsl-tag-orange))',
264
+ border: 'hsl(var(--hsl-tag-orange-border))',
265
+ },
266
+ purple: {
267
+ DEFAULT: 'hsl(var(--hsl-tag-purple))',
268
+ border: 'hsl(var(--hsl-tag-purple-border))',
269
+ },
270
+ red: {
271
+ DEFAULT: 'hsl(var(--hsl-tag-red))',
272
+ border: 'hsl(var(--hsl-tag-red-border))',
273
+ },
274
+ teal: {
275
+ DEFAULT: 'hsl(var(--hsl-tag-teal))',
276
+ border: 'hsl(var(--hsl-tag-teal-border))',
277
+ },
278
+ yellow: {
279
+ DEFAULT: 'hsl(var(--hsl-tag-yellow))',
280
+ border: 'hsl(var(--hsl-tag-yellow-border))',
281
+ },
282
+ },
283
+ // Palette
284
+ blue: {
285
+ 10: 'hsl(var(--hsl-blue-10))',
286
+ 20: 'hsl(var(--hsl-blue-20))',
287
+ 30: 'hsl(var(--hsl-blue-30))',
288
+ 40: 'hsl(var(--hsl-blue-40))',
289
+ 50: 'hsl(var(--hsl-blue-50))',
290
+ 60: 'hsl(var(--hsl-blue-60))',
291
+ 70: 'hsl(var(--hsl-blue-70))',
292
+ 80: 'hsl(var(--hsl-blue-80))',
293
+ 90: 'hsl(var(--hsl-blue-90))',
294
+ 100: 'hsl(var(--hsl-blue-100))',
295
+ },
296
+ cyan: {
297
+ 10: 'hsl(var(--hsl-cyan-10))',
298
+ 20: 'hsl(var(--hsl-cyan-20))',
299
+ 30: 'hsl(var(--hsl-cyan-30))',
300
+ 40: 'hsl(var(--hsl-cyan-40))',
301
+ 50: 'hsl(var(--hsl-cyan-50))',
302
+ 60: 'hsl(var(--hsl-cyan-60))',
303
+ 70: 'hsl(var(--hsl-cyan-70))',
304
+ 80: 'hsl(var(--hsl-cyan-80))',
305
+ 90: 'hsl(var(--hsl-cyan-90))',
306
+ 100: 'hsl(var(--hsl-cyan-100))',
307
+ },
308
+ fuchsia: {
309
+ 10: 'hsl(var(--hsl-fuchsia-10))',
310
+ 20: 'hsl(var(--hsl-fuchsia-20))',
311
+ 30: 'hsl(var(--hsl-fuchsia-30))',
312
+ 40: 'hsl(var(--hsl-fuchsia-40))',
313
+ 50: 'hsl(var(--hsl-fuchsia-50))',
314
+ 60: 'hsl(var(--hsl-fuchsia-60))',
315
+ 70: 'hsl(var(--hsl-fuchsia-70))',
316
+ 80: 'hsl(var(--hsl-fuchsia-80))',
317
+ 90: 'hsl(var(--hsl-fuchsia-90))',
318
+ 100: 'hsl(var(--hsl-fuchsia-100))',
319
+ },
320
+ green: {
321
+ 10: 'hsl(var(--hsl-green-10))',
322
+ 20: 'hsl(var(--hsl-green-20))',
323
+ 30: 'hsl(var(--hsl-green-30))',
324
+ 40: 'hsl(var(--hsl-green-40))',
325
+ 50: 'hsl(var(--hsl-green-50))',
326
+ 60: 'hsl(var(--hsl-green-60))',
327
+ 70: 'hsl(var(--hsl-green-70))',
328
+ 80: 'hsl(var(--hsl-green-80))',
329
+ 90: 'hsl(var(--hsl-green-90))',
330
+ 100: 'hsl(var(--hsl-green-100))',
331
+ },
332
+ neutral: {
333
+ 1: 'hsl(var(--hsl-neutral-1))',
334
+ 5: 'hsl(var(--hsl-neutral-5))',
335
+ 10: 'hsl(var(--hsl-neutral-10))',
336
+ 15: 'hsl(var(--hsl-neutral-15))',
337
+ 20: 'hsl(var(--hsl-neutral-20))',
338
+ 25: 'hsl(var(--hsl-neutral-25))',
339
+ 30: 'hsl(var(--hsl-neutral-30))',
340
+ 40: 'hsl(var(--hsl-neutral-40))',
341
+ 50: 'hsl(var(--hsl-neutral-50))',
342
+ 60: 'hsl(var(--hsl-neutral-60))',
343
+ 70: 'hsl(var(--hsl-neutral-70))',
344
+ 80: 'hsl(var(--hsl-neutral-80))',
345
+ 85: 'hsl(var(--hsl-neutral-85))',
346
+ 90: 'hsl(var(--hsl-neutral-90))',
347
+ 95: 'hsl(var(--hsl-neutral-95))',
348
+ 99: 'hsl(var(--hsl-neutral-99))',
349
+ },
350
+ orange: {
351
+ 10: 'hsl(var(--hsl-orange-10))',
352
+ 20: 'hsl(var(--hsl-orange-20))',
353
+ 30: 'hsl(var(--hsl-orange-30))',
354
+ 40: 'hsl(var(--hsl-orange-40))',
355
+ 50: 'hsl(var(--hsl-orange-50))',
356
+ 60: 'hsl(var(--hsl-orange-60))',
357
+ 70: 'hsl(var(--hsl-orange-70))',
358
+ 80: 'hsl(var(--hsl-orange-80))',
359
+ 90: 'hsl(var(--hsl-orange-90))',
360
+ 100: 'hsl(var(--hsl-orange-100))',
361
+ },
362
+ purple: {
363
+ 10: 'hsl(var(--hsl-purple-10))',
364
+ 20: 'hsl(var(--hsl-purple-20))',
365
+ 30: 'hsl(var(--hsl-purple-30))',
366
+ 40: 'hsl(var(--hsl-purple-40))',
367
+ 50: 'hsl(var(--hsl-purple-50))',
368
+ 60: 'hsl(var(--hsl-purple-60))',
369
+ 70: 'hsl(var(--hsl-purple-70))',
370
+ 80: 'hsl(var(--hsl-purple-80))',
371
+ 90: 'hsl(var(--hsl-purple-90))',
372
+ 100: 'hsl(var(--hsl-purple-100))',
373
+ },
374
+ red: {
375
+ 10: 'hsl(var(--hsl-red-10))',
376
+ 20: 'hsl(var(--hsl-red-20))',
377
+ 30: 'hsl(var(--hsl-red-30))',
378
+ 40: 'hsl(var(--hsl-red-40))',
379
+ 50: 'hsl(var(--hsl-red-50))',
380
+ 60: 'hsl(var(--hsl-red-60))',
381
+ 70: 'hsl(var(--hsl-red-70))',
382
+ 80: 'hsl(var(--hsl-red-80))',
383
+ 90: 'hsl(var(--hsl-red-90))',
384
+ 100: 'hsl(var(--hsl-red-100))',
385
+ },
386
+ teal: {
387
+ 10: 'hsl(var(--hsl-teal-10))',
388
+ 20: 'hsl(var(--hsl-teal-20))',
389
+ 30: 'hsl(var(--hsl-teal-30))',
390
+ 40: 'hsl(var(--hsl-teal-40))',
391
+ 50: 'hsl(var(--hsl-teal-50))',
392
+ 60: 'hsl(var(--hsl-teal-60))',
393
+ 70: 'hsl(var(--hsl-teal-70))',
394
+ 80: 'hsl(var(--hsl-teal-80))',
395
+ 90: 'hsl(var(--hsl-teal-90))',
396
+ 100: 'hsl(var(--hsl-teal-100))',
397
+ },
398
+ yellow: {
399
+ 10: 'hsl(var(--hsl-yellow-10))',
400
+ 20: 'hsl(var(--hsl-yellow-20))',
401
+ 30: 'hsl(var(--hsl-yellow-30))',
402
+ 40: 'hsl(var(--hsl-yellow-40))',
403
+ 50: 'hsl(var(--hsl-yellow-50))',
404
+ 60: 'hsl(var(--hsl-yellow-60))',
405
+ 70: 'hsl(var(--hsl-yellow-70))',
406
+ 80: 'hsl(var(--hsl-yellow-80))',
407
+ 90: 'hsl(var(--hsl-yellow-90))',
408
+ 100: 'hsl(var(--hsl-yellow-100))',
409
+ },
410
+ };
package/lib/tailwind/container.ts ADDED
@@ -0,0 +1,11 @@
1
+ /* eslint-disable sort-keys */
2
+
3
+ export default {
4
+ padding: {
5
+ DEFAULT: '1rem',
6
+ sm: '1.5rem',
7
+ lg: '1.5rem',
8
+ xl: '1.5rem',
9
+ '2xl': '1.5rem',
10
+ },
11
+ };
package/lib/tailwind/preset.ts ADDED
@@ -0,0 +1,88 @@
1
+ /* eslint-disable sort-keys */
2
+ import tailwindScrollbar from 'tailwind-scrollbar';
3
+ import type { Config } from 'tailwindcss';
4
+ import tailwindAnimate from 'tailwindcss-animate';
5
+ import defaultTheme from 'tailwindcss/defaultTheme';
6
+
7
+ import boxShadow from './boxShadow';
8
+ import colors from './colors';
9
+ import container from './container';
10
+ import spacing from './spacing';
11
+
12
+ const presetConfig: Config = {
13
+ content: ['./src/**/*.{ts,tsx}'],
14
+ darkMode: 'class',
15
+ plugins: [tailwindAnimate, tailwindScrollbar],
16
+ theme: {
17
+ container,
18
+ extend: {
19
+ animation: {
20
+ 'rest-bounce': 'rest-bounce 2s linear infinite',
21
+ },
22
+ boxShadow,
23
+ colors,
24
+
25
+ fontFamily: {
26
+ noto: ['Noto Sans JP', 'DM Sans', ...defaultTheme.fontFamily.sans],
27
+ sans: ['DM Sans', 'Noto Sans JP', ...defaultTheme.fontFamily.sans],
28
+ },
29
+ fontSize: {
30
+ xs: [
31
+ '0.75rem',
32
+ {
33
+ lineHeight: '1.1rem',
34
+ },
35
+ ],
36
+ xl: [
37
+ '1.25rem',
38
+ {
39
+ lineHeight: '1.875rem',
40
+ },
41
+ ],
42
+ '2xl': [
43
+ '1.5rem',
44
+ {
45
+ lineHeight: '2.25rem',
46
+ },
47
+ ],
48
+ '3xl': [
49
+ '1.875rem',
50
+ {
51
+ lineHeight: '2.75rem',
52
+ },
53
+ ],
54
+ '4xl': [
55
+ '2.25rem',
56
+ {
57
+ lineHeight: '3.25rem',
58
+ },
59
+ ],
60
+ '5xl': [
61
+ '3rem',
62
+ {
63
+ lineHeight: '4rem',
64
+ },
65
+ ],
66
+ },
67
+ keyframes: {
68
+ 'rest-bounce': {
69
+ '0%': {
70
+ transform: 'translateY(0%)',
71
+ },
72
+ '20%': {
73
+ transform: 'translateY(-40%)',
74
+ },
75
+ '40%': {
76
+ transform: 'translateY(0%)',
77
+ },
78
+ },
79
+ },
80
+ spacing,
81
+ transitionDelay: {
82
+ 600: '600ms',
83
+ },
84
+ },
85
+ },
86
+ };
87
+
88
+ export default presetConfig;
package/lib/tailwind/spacing.ts ADDED
@@ -0,0 +1,14 @@
1
+ /* eslint-disable sort-keys */
2
+ export default {
3
+ '0.25': '0.0625rem' /* 1px */,
4
+ '0.75': '0.1875rem' /* 3px */,
5
+ '1.25': '0.3125rem' /* 5px */,
6
+ '4.5': '1.125rem' /* 18px */,
7
+ '5.5': '1.375rem' /* 22px */,
8
+ '6.5': '1.625rem' /* 26px */,
9
+ '7.5': '1.875rem' /* 30px */,
10
+ '8.5': '2.125rem' /* 34px */,
11
+ '9.5': '2.375rem' /* 38px */,
12
+ 13: '3.25rem' /* 52px */,
13
+ 'app-header-height': 'var(--app-header-height, 0)',
14
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "trepur_components",
3
- "version": "2.3.6",
3
+ "version": "2.3.7",
4
4
  "description": "component lib",
5
5
  "author": "trepur_ttenneb",
6
6
  "private": false,
package/src/styles/global.css CHANGED
@@ -1,3 +1,4 @@
1
+ @import './themes/palette.css';
1
2
  @import './themes/local.css';
2
3
 
3
4
  @tailwind base;
package/src/styles/themes/palette.css ADDED
@@ -0,0 +1,131 @@
1
+ * {
2
+ /* Palette */
3
+ --hsl-black: 0 0% 0%;
4
+ --hsl-white: 0 0% 100%;
5
+
6
+ /* Blue */
7
+ --hsl-blue-100: 240 100% 15%;
8
+ --hsl-blue-90: 240 91% 26%;
9
+ --hsl-blue-80: 239 82.1% 44%;
10
+ --hsl-blue-70: 235 89.8% 57.8%;
11
+ --hsl-blue-60: 233 92.4% 63.7%;
12
+ --hsl-blue-50: 230 94.7% 70.4%;
13
+ --hsl-blue-40: 227 96.4% 78.4%;
14
+ --hsl-blue-30: 224 97% 87.1%;
15
+ --hsl-blue-20: 222 100% 91.6%;
16
+ --hsl-blue-10: 222 100% 96.1%;
17
+
18
+ /* Cyan */
19
+ --hsl-cyan-100: 198.1 96.4% 10.8%;
20
+ --hsl-cyan-90: 198 100% 18.6%;
21
+ --hsl-cyan-80: 198.3 93.8% 31.6%;
22
+ --hsl-cyan-70: 197.9 85.1% 39.4%;
23
+ --hsl-cyan-60: 198 73.5% 48.8%;
24
+ --hsl-cyan-50: 197.9 91.1% 60.4%;
25
+ --hsl-cyan-40: 198 91.1% 69.2%;
26
+ --hsl-cyan-30: 198.2 92.7% 78.4%;
27
+ --hsl-cyan-20: 198.3 93.7% 87.6%;
28
+ --hsl-cyan-10: 200 100% 97.1%;
29
+
30
+ /* Fuchsia */
31
+ --hsl-fuchsia-100: 296.9 54.9% 13.9%;
32
+ --hsl-fuchsia-90: 297.4 60% 22.5%;
33
+ --hsl-fuchsia-80: 298.2 66.7% 38.8%;
34
+ --hsl-fuchsia-70: 297.8 67.6% 47.3%;
35
+ --hsl-fuchsia-60: 297.8 85.7% 56.3%;
36
+ --hsl-fuchsia-50: 297.8 94.3% 65.5%;
37
+ --hsl-fuchsia-40: 300 100% 75.1%;
38
+ --hsl-fuchsia-30: 300 100% 86.1%;
39
+ --hsl-fuchsia-20: 300 100% 91.6%;
40
+ --hsl-fuchsia-10: 296 100% 97.1%;
41
+
42
+ /* Green */
43
+ --hsl-green-100: 140.6 94.6% 7.3%;
44
+ --hsl-green-90: 135.6 73% 14.5%;
45
+ --hsl-green-80: 136.4 67.7% 25.5%;
46
+ --hsl-green-70: 139.6 68.5% 32.4%;
47
+ --hsl-green-60: 140.2 54.7% 45.9%;
48
+ --hsl-green-50: 139.8 55.4% 65.7%;
49
+ --hsl-green-40: 140.3 64.4% 80.2%;
50
+ --hsl-green-30: 135.6 73.5% 86.7%;
51
+ --hsl-green-20: 136 75% 92.2%;
52
+ --hsl-green-10: 138 100% 98%;
53
+
54
+ /* Neutral */
55
+ --hsl-neutral-99: 216.7 64.3% 5.5%;
56
+ --hsl-neutral-95: 220.9 39.3% 11%;
57
+ --hsl-neutral-90: 223.6 27.5% 15.7%;
58
+ --hsl-neutral-85: 222 19.6% 20%;
59
+ --hsl-neutral-80: 222.4 11.6% 28.8%;
60
+ --hsl-neutral-70: 221.3 8.3% 37.6%;
61
+ --hsl-neutral-60: 221.5 5.5% 46.5%;
62
+ --hsl-neutral-50: 223.6 4.8% 55.5%;
63
+ --hsl-neutral-40: 220 5% 64.5%;
64
+ --hsl-neutral-30: 220 5.3% 77.6%;
65
+ --hsl-neutral-25: 216 5.5% 82.2%;
66
+ --hsl-neutral-20: 225 5.9% 86.7%;
67
+ --hsl-neutral-15: 210 4.3% 91%;
68
+ --hsl-neutral-10: 180 4.3% 95.5%;
69
+ --hsl-neutral-5: 210 20% 98%;
70
+ --hsl-neutral-1: 0 0% 99.6%;
71
+
72
+ /* Orange */
73
+ --hsl-orange-100: 23.6 57.9% 11.2%;
74
+ --hsl-orange-90: 24.7 64.2% 20.8%;
75
+ --hsl-orange-80: 25.1 68.6% 30%;
76
+ --hsl-orange-70: 24.8 72.5% 48.4%;
77
+ --hsl-orange-60: 24.8 88.5% 55.5%;
78
+ --hsl-orange-50: 26 100% 66.5%;
79
+ --hsl-orange-40: 28.3 100% 75.9%;
80
+ --hsl-orange-30: 28.1 100% 87.5%;
81
+ --hsl-orange-20: 27.4 100% 93.1%;
82
+ --hsl-orange-10: 30 100% 98.4%;
83
+
84
+ /* Purple */
85
+ --hsl-purple-100: 265.5 60.6% 12.9%;
86
+ --hsl-purple-90: 266.1 85.7% 24.7%;
87
+ --hsl-purple-80: 266 83.6% 40.6%;
88
+ --hsl-purple-70: 265.9 78% 50%;
89
+ --hsl-purple-60: 266 85.2% 60.2%;
90
+ --hsl-purple-50: 265.7 97.2% 72.2%;
91
+ --hsl-purple-40: 266.1 96.4% 78%;
92
+ --hsl-purple-30: 266.2 97.5% 84.3%;
93
+ --hsl-purple-20: 266.1 95.8% 90.6%;
94
+ --hsl-purple-10: 264 100% 97.1%;
95
+
96
+ /* Red */
97
+ --hsl-red-100: 356.6 63.6% 10.8%;
98
+ --hsl-red-90: 356.3 69.9% 18.2%;
99
+ --hsl-red-80: 356.9 74% 25.7%;
100
+ --hsl-red-70: 356.8 77.4% 32.9%;
101
+ --hsl-red-60: 356.9 75.9% 45.5%;
102
+ --hsl-red-50: 356.5 87.9% 57.8%;
103
+ --hsl-red-40: 356.8 89.2% 71%;
104
+ --hsl-red-30: 357.5 89.9% 84.5%;
105
+ --hsl-red-20: 357 90.9% 91.4%;
106
+ --hsl-red-10: 352.5 100% 98.4%;
107
+
108
+ /* Teal */
109
+ --hsl-teal-100: 177.1 44.7% 9.2%;
110
+ --hsl-teal-90: 180 51.3% 15.3%;
111
+ --hsl-teal-80: 179.1 61.9% 20.6%;
112
+ --hsl-teal-70: 179.3 70.8% 25.5%;
113
+ --hsl-teal-60: 178.9 100% 30.8%;
114
+ --hsl-teal-50: 179 91.9% 38.6%;
115
+ --hsl-teal-40: 178.9 64.8% 52.2%;
116
+ --hsl-teal-30: 178.7 68.4% 73.9%;
117
+ --hsl-teal-20: 178.8 69.9% 85.7%;
118
+ --hsl-teal-10: 180 100% 98.4%;
119
+
120
+ /* Yellow */
121
+ --hsl-yellow-100: 47 85.2% 10.6%;
122
+ --hsl-yellow-90: 46.9 90.7% 16.9%;
123
+ --hsl-yellow-80: 46.9 94.8% 22.7%;
124
+ --hsl-yellow-70: 47.1 94.5% 35.7%;
125
+ --hsl-yellow-60: 46.9 89.1% 43.3%;
126
+ --hsl-yellow-50: 46.8 88.4% 52.5%;
127
+ --hsl-yellow-40: 46.9 97.7% 66.1%;
128
+ --hsl-yellow-30: 46.7 100% 82.4%;
129
+ --hsl-yellow-20: 46.5 100% 90.4%;
130
+ --hsl-yellow-10: 45 100% 98.4%;
131
+ }
package/tailwind/boxShadow.ts ADDED
@@ -0,0 +1,9 @@
1
+ /* eslint-disable sort-keys */
2
+
3
+ export default {
4
+ sm: 'var(--shadow-sm)',
5
+ DEFAULT: 'var(--shadow)',
6
+ md: 'var(--shadow-md)',
7
+ lg: 'var(--shadow-lg)',
8
+ xl: 'var(--shadow-xl)',
9
+ };
package/tailwind/colors.ts ADDED
@@ -0,0 +1,410 @@
1
+ /* eslint-disable sort-keys */
2
+ export default {
3
+ focus: 'hsl(var(--hsl-focus))',
4
+ overlay: 'hsl(var(--hsl-overlay))',
5
+ page: 'hsl(var(--hsl-page))',
6
+ // General
7
+ active: {
8
+ DEFAULT: 'hsl(var(--hsl-active))',
9
+ foreground: 'hsl(var(--hsl-active-foreground))',
10
+ },
11
+ inactive: {
12
+ DEFAULT: 'hsl(var(--hsl-inactive))',
13
+ foreground: 'hsl(var(--hsl-inactive-foreground))',
14
+ readonly: 'hsl(var(--hsl-inactive-readonly))',
15
+ subtle: 'hsl(var(--hsl-inactive-subtle))',
16
+ },
17
+ border: {
18
+ DEFAULT: 'hsl(var(--hsl-border))',
19
+ secondary: 'hsl(var(--hsl-border-secondary))',
20
+ tertiary: 'hsl(var(--hsl-border-tertiary))',
21
+ inverse: 'hsl(var(--hsl-border-inverse))',
22
+ },
23
+ foreground: {
24
+ DEFAULT: 'hsl(var(--hsl-foreground))',
25
+ secondary: 'hsl(var(--hsl-foreground-secondary))',
26
+ tertiary: 'hsl(var(--hsl-foreground-tertiary))',
27
+ inverse: 'hsl(var(--hsl-foreground-inverse))',
28
+ },
29
+ skeleton: {
30
+ DEFAULT: 'hsl(var(--hsl-skeleton))',
31
+ inverse: 'hsl(var(--hsl-skeleton-inverse))',
32
+ },
33
+ textlink: {
34
+ DEFAULT: 'hsl(var(--hsl-textlink))',
35
+ hover: 'hsl(var(--hsl-textlink-hover))',
36
+ },
37
+ dataviz: {
38
+ 1: 'hsl(var(--hsl-dataviz-1))',
39
+ 2: 'hsl(var(--hsl-dataviz-2))',
40
+ 3: 'hsl(var(--hsl-dataviz-3))',
41
+ 4: 'hsl(var(--hsl-dataviz-4))',
42
+ 5: 'hsl(var(--hsl-dataviz-5))',
43
+ 6: 'hsl(var(--hsl-dataviz-6))',
44
+ 7: 'hsl(var(--hsl-dataviz-7))',
45
+ 8: 'hsl(var(--hsl-dataviz-8))',
46
+ 9: 'hsl(var(--hsl-dataviz-9))',
47
+ 10: 'hsl(var(--hsl-dataviz-10))',
48
+ 11: 'hsl(var(--hsl-dataviz-11))',
49
+ 12: 'hsl(var(--hsl-dataviz-12))',
50
+ 13: 'hsl(var(--hsl-dataviz-13))',
51
+ 14: 'hsl(var(--hsl-dataviz-14))',
52
+ 15: 'hsl(var(--hsl-dataviz-15))',
53
+ 16: 'hsl(var(--hsl-dataviz-16))',
54
+ },
55
+ // Contextual
56
+ error: {
57
+ DEFAULT: 'hsl(var(--hsl-error))',
58
+ border: 'hsl(var(--hsl-error-border))',
59
+ hover: 'hsl(var(--hsl-error-hover))',
60
+ press: 'hsl(var(--hsl-error-press))',
61
+ skeleton: 'hsl(var(--hsl-error-skeleton))',
62
+ accent: 'hsl(var(--hsl-error-accent))',
63
+ foreground: 'hsl(var(--hsl-error-foreground))',
64
+ secondary: 'hsl(var(--hsl-error-secondary))',
65
+ },
66
+ info: {
67
+ DEFAULT: 'hsl(var(--hsl-info))',
68
+ border: 'hsl(var(--hsl-info-border))',
69
+ hover: 'hsl(var(--hsl-info-hover))',
70
+ press: 'hsl(var(--hsl-info-press))',
71
+ skeleton: 'hsl(var(--hsl-info-skeleton))',
72
+ accent: 'hsl(var(--hsl-info-accent))',
73
+ foreground: 'hsl(var(--hsl-info-foreground))',
74
+ secondary: 'hsl(var(--hsl-info-secondary))',
75
+ },
76
+ success: {
77
+ DEFAULT: 'hsl(var(--hsl-success))',
78
+ border: 'hsl(var(--hsl-success-border))',
79
+ hover: 'hsl(var(--hsl-success-hover))',
80
+ press: 'hsl(var(--hsl-success-press))',
81
+ skeleton: 'hsl(var(--hsl-success-skeleton))',
82
+ accent: 'hsl(var(--hsl-success-accent))',
83
+ foreground: 'hsl(var(--hsl-success-foreground))',
84
+ secondary: 'hsl(var(--hsl-success-secondary))',
85
+ },
86
+ warning: {
87
+ DEFAULT: 'hsl(var(--hsl-warning))',
88
+ border: 'hsl(var(--hsl-warning-border))',
89
+ hover: 'hsl(var(--hsl-warning-hover))',
90
+ press: 'hsl(var(--hsl-warning-press))',
91
+ skeleton: 'hsl(var(--hsl-warning-skeleton))',
92
+ accent: 'hsl(var(--hsl-warning-accent))',
93
+ foreground: 'hsl(var(--hsl-warning-foreground))',
94
+ secondary: 'hsl(var(--hsl-warning-secondary))',
95
+ },
96
+ // Components
97
+ button: {
98
+ primary: {
99
+ DEFAULT: 'hsl(var(--hsl-button-primary))',
100
+ hover: 'hsl(var(--hsl-button-primary-hover))',
101
+ press: 'hsl(var(--hsl-button-primary-press))',
102
+ skeleton: 'hsl(var(--hsl-button-primary-skeleton))',
103
+ foreground: 'hsl(var(--hsl-button-primary-foreground))',
104
+ },
105
+ secondary: {
106
+ DEFAULT: 'hsl(var(--hsl-button-secondary))',
107
+ hover: 'hsl(var(--hsl-button-secondary-hover))',
108
+ press: 'hsl(var(--hsl-button-secondary-press))',
109
+ skeleton: 'hsl(var(--hsl-button-secondary-skeleton))',
110
+ foreground: 'hsl(var(--hsl-button-secondary-foreground))',
111
+ },
112
+ group: {
113
+ DEFAULT: 'hsl(var(--hsl-button-group))',
114
+ hover: 'hsl(var(--hsl-button-group-hover))',
115
+ press: 'hsl(var(--hsl-button-group-press))',
116
+ skeleton: 'hsl(var(--hsl-button-group-skeleton))',
117
+ foreground: 'hsl(var(--hsl-button-group-foreground))',
118
+ },
119
+ outline: {
120
+ hover: 'hsl(var(--hsl-button-outline-hover))',
121
+ press: 'hsl(var(--hsl-button-outline-press))',
122
+ skeleton: 'hsl(var(--hsl-button-outline-skeleton))',
123
+ foreground: 'hsl(var(--hsl-button-outline-foreground))',
124
+ },
125
+ ghost: {
126
+ hover: 'hsl(var(--hsl-button-ghost-hover))',
127
+ press: 'hsl(var(--hsl-button-ghost-press))',
128
+ foreground: 'hsl(var(--hsl-button-ghost-foreground))',
129
+ },
130
+ inverse: {
131
+ hover: 'hsl(var(--hsl-button-inverse-hover))',
132
+ press: 'hsl(var(--hsl-button-inverse-press))',
133
+ },
134
+ disabled: {
135
+ DEFAULT: 'hsl(var(--hsl-button-disabled))',
136
+ foreground: 'hsl(var(--hsl-button-disabled-foreground))',
137
+ 'foreground-actionbutton':
138
+ 'hsl(var(--hsl-button-disabled-foreground-actionbutton))',
139
+ 'foreground-group': 'hsl(var(--hsl-button-disabled-foreground-group))',
140
+ inverse: 'hsl(var(--hsl-button-disabled-inverse))',
141
+ 'inverse-foreground':
142
+ 'hsl(var(--hsl-button-disabled-inverse-foreground))',
143
+ },
144
+ },
145
+
146
+ card: {
147
+ DEFAULT: 'hsl(var(--hsl-card))',
148
+ secondary: 'hsl(var(--hsl-card-secondary))',
149
+ tertiary: 'hsl(var(--hsl-card-tertiary))',
150
+ quaternary: 'hsl(var(--hsl-card-quaternary))',
151
+ inverse: 'hsl(var(--hsl-card-inverse))',
152
+ },
153
+
154
+ lozenge: {
155
+ blue: {
156
+ DEFAULT: 'hsl(var(--hsl-lozenge-blue))',
157
+ hover: 'hsl(var(--hsl-lozenge-blue-hover))',
158
+ press: 'hsl(var(--hsl-lozenge-blue-press))',
159
+ },
160
+ cyan: {
161
+ DEFAULT: 'hsl(var(--hsl-lozenge-cyan))',
162
+ hover: 'hsl(var(--hsl-lozenge-cyan-hover))',
163
+ press: 'hsl(var(--hsl-lozenge-cyan-press))',
164
+ },
165
+ fuchsia: {
166
+ DEFAULT: 'hsl(var(--hsl-lozenge-fuchsia))',
167
+ hover: 'hsl(var(--hsl-lozenge-fuchsia-hover))',
168
+ press: 'hsl(var(--hsl-lozenge-fuchsia-press))',
169
+ },
170
+ neutral: {
171
+ DEFAULT: 'hsl(var(--hsl-lozenge-neutral))',
172
+ hover: 'hsl(var(--hsl-lozenge-neutral-hover))',
173
+ press: 'hsl(var(--hsl-lozenge-neutral-press))',
174
+ },
175
+ orange: {
176
+ DEFAULT: 'hsl(var(--hsl-lozenge-orange))',
177
+ hover: 'hsl(var(--hsl-lozenge-orange-hover))',
178
+ press: 'hsl(var(--hsl-lozenge-orange-press))',
179
+ },
180
+ purple: {
181
+ DEFAULT: 'hsl(var(--hsl-lozenge-purple))',
182
+ hover: 'hsl(var(--hsl-lozenge-purple-hover))',
183
+ press: 'hsl(var(--hsl-lozenge-purple-press))',
184
+ },
185
+ teal: {
186
+ DEFAULT: 'hsl(var(--hsl-lozenge-teal))',
187
+ hover: 'hsl(var(--hsl-lozenge-teal-hover))',
188
+ press: 'hsl(var(--hsl-lozenge-teal-press))',
189
+ },
190
+ white: {
191
+ DEFAULT: 'hsl(var(--hsl-lozenge-white))',
192
+ hover: 'hsl(var(--hsl-lozenge-white-hover))',
193
+ press: 'hsl(var(--hsl-lozenge-white-press))',
194
+ },
195
+ yellow: {
196
+ DEFAULT: 'hsl(var(--hsl-lozenge-yellow))',
197
+ hover: 'hsl(var(--hsl-lozenge-yellow-hover))',
198
+ press: 'hsl(var(--hsl-lozenge-yellow-press))',
199
+ },
200
+ green: {
201
+ DEFAULT: 'hsl(var(--hsl-lozenge-green))',
202
+ hover: 'hsl(var(--hsl-lozenge-green-hover))',
203
+ press: 'hsl(var(--hsl-lozenge-green-press))',
204
+ },
205
+ red: {
206
+ DEFAULT: 'hsl(var(--hsl-lozenge-red))',
207
+ hover: 'hsl(var(--hsl-lozenge-red-hover))',
208
+ press: 'hsl(var(--hsl-lozenge-red-press))',
209
+ },
210
+ },
211
+
212
+ sidebar: {
213
+ DEFAULT: 'hsl(var(--hsl-sidebar))',
214
+ active: 'hsl(var(--hsl-sidebar-active))',
215
+ foreground: {
216
+ DEFAULT: 'hsl(var(--hsl-sidebar-foreground))',
217
+ secondary: 'hsl(var(--hsl-sidebar-foreground-secondary))',
218
+ },
219
+ hover: 'hsl(var(--hsl-sidebar-hover))',
220
+ skeleton: 'hsl(var(--hsl-sidebar-skeleton))',
221
+ border: 'hsl(var(--hsl-sidebar-border))',
222
+ },
223
+
224
+ switch: {
225
+ off: {
226
+ DEFAULT: 'hsl(var(--hsl-switch-off))',
227
+ hover: 'hsl(var(--hsl-switch-off-hover))',
228
+ disabled: 'hsl(var(--hsl-switch-off-disabled))',
229
+ foreground: 'hsl(var(--hsl-switch-off-foreground))',
230
+ },
231
+ on: {
232
+ DEFAULT: 'hsl(var(--hsl-switch-on))',
233
+ hover: 'hsl(var(--hsl-switch-on-hover))',
234
+ foreground: 'hsl(var(--hsl-switch-on-foreground))',
235
+ disabled: {
236
+ DEFAULT: 'hsl(var(--hsl-switch-on-disabled))',
237
+ foreground: 'hsl(var(--hsl-switch-on-disabled-foreground))',
238
+ },
239
+ },
240
+ },
241
+ tag: {
242
+ neutral: {
243
+ DEFAULT: 'hsl(var(--hsl-tag-neutral))',
244
+ border: 'hsl(var(--hsl-tag-neutral-border))',
245
+ },
246
+ blue: {
247
+ DEFAULT: 'hsl(var(--hsl-tag-blue))',
248
+ border: 'hsl(var(--hsl-tag-blue-border))',
249
+ },
250
+ cyan: {
251
+ DEFAULT: 'hsl(var(--hsl-tag-cyan))',
252
+ border: 'hsl(var(--hsl-tag-cyan-border))',
253
+ },
254
+ fuchsia: {
255
+ DEFAULT: 'hsl(var(--hsl-tag-fuchsia))',
256
+ border: 'hsl(var(--hsl-tag-fuchsia-border))',
257
+ },
258
+ green: {
259
+ DEFAULT: 'hsl(var(--hsl-tag-green))',
260
+ border: 'hsl(var(--hsl-tag-green-border))',
261
+ },
262
+ orange: {
263
+ DEFAULT: 'hsl(var(--hsl-tag-orange))',
264
+ border: 'hsl(var(--hsl-tag-orange-border))',
265
+ },
266
+ purple: {
267
+ DEFAULT: 'hsl(var(--hsl-tag-purple))',
268
+ border: 'hsl(var(--hsl-tag-purple-border))',
269
+ },
270
+ red: {
271
+ DEFAULT: 'hsl(var(--hsl-tag-red))',
272
+ border: 'hsl(var(--hsl-tag-red-border))',
273
+ },
274
+ teal: {
275
+ DEFAULT: 'hsl(var(--hsl-tag-teal))',
276
+ border: 'hsl(var(--hsl-tag-teal-border))',
277
+ },
278
+ yellow: {
279
+ DEFAULT: 'hsl(var(--hsl-tag-yellow))',
280
+ border: 'hsl(var(--hsl-tag-yellow-border))',
281
+ },
282
+ },
283
+ // Palette
284
+ blue: {
285
+ 10: 'hsl(var(--hsl-blue-10))',
286
+ 20: 'hsl(var(--hsl-blue-20))',
287
+ 30: 'hsl(var(--hsl-blue-30))',
288
+ 40: 'hsl(var(--hsl-blue-40))',
289
+ 50: 'hsl(var(--hsl-blue-50))',
290
+ 60: 'hsl(var(--hsl-blue-60))',
291
+ 70: 'hsl(var(--hsl-blue-70))',
292
+ 80: 'hsl(var(--hsl-blue-80))',
293
+ 90: 'hsl(var(--hsl-blue-90))',
294
+ 100: 'hsl(var(--hsl-blue-100))',
295
+ },
296
+ cyan: {
297
+ 10: 'hsl(var(--hsl-cyan-10))',
298
+ 20: 'hsl(var(--hsl-cyan-20))',
299
+ 30: 'hsl(var(--hsl-cyan-30))',
300
+ 40: 'hsl(var(--hsl-cyan-40))',
301
+ 50: 'hsl(var(--hsl-cyan-50))',
302
+ 60: 'hsl(var(--hsl-cyan-60))',
303
+ 70: 'hsl(var(--hsl-cyan-70))',
304
+ 80: 'hsl(var(--hsl-cyan-80))',
305
+ 90: 'hsl(var(--hsl-cyan-90))',
306
+ 100: 'hsl(var(--hsl-cyan-100))',
307
+ },
308
+ fuchsia: {
309
+ 10: 'hsl(var(--hsl-fuchsia-10))',
310
+ 20: 'hsl(var(--hsl-fuchsia-20))',
311
+ 30: 'hsl(var(--hsl-fuchsia-30))',
312
+ 40: 'hsl(var(--hsl-fuchsia-40))',
313
+ 50: 'hsl(var(--hsl-fuchsia-50))',
314
+ 60: 'hsl(var(--hsl-fuchsia-60))',
315
+ 70: 'hsl(var(--hsl-fuchsia-70))',
316
+ 80: 'hsl(var(--hsl-fuchsia-80))',
317
+ 90: 'hsl(var(--hsl-fuchsia-90))',
318
+ 100: 'hsl(var(--hsl-fuchsia-100))',
319
+ },
320
+ green: {
321
+ 10: 'hsl(var(--hsl-green-10))',
322
+ 20: 'hsl(var(--hsl-green-20))',
323
+ 30: 'hsl(var(--hsl-green-30))',
324
+ 40: 'hsl(var(--hsl-green-40))',
325
+ 50: 'hsl(var(--hsl-green-50))',
326
+ 60: 'hsl(var(--hsl-green-60))',
327
+ 70: 'hsl(var(--hsl-green-70))',
328
+ 80: 'hsl(var(--hsl-green-80))',
329
+ 90: 'hsl(var(--hsl-green-90))',
330
+ 100: 'hsl(var(--hsl-green-100))',
331
+ },
332
+ neutral: {
333
+ 1: 'hsl(var(--hsl-neutral-1))',
334
+ 5: 'hsl(var(--hsl-neutral-5))',
335
+ 10: 'hsl(var(--hsl-neutral-10))',
336
+ 15: 'hsl(var(--hsl-neutral-15))',
337
+ 20: 'hsl(var(--hsl-neutral-20))',
338
+ 25: 'hsl(var(--hsl-neutral-25))',
339
+ 30: 'hsl(var(--hsl-neutral-30))',
340
+ 40: 'hsl(var(--hsl-neutral-40))',
341
+ 50: 'hsl(var(--hsl-neutral-50))',
342
+ 60: 'hsl(var(--hsl-neutral-60))',
343
+ 70: 'hsl(var(--hsl-neutral-70))',
344
+ 80: 'hsl(var(--hsl-neutral-80))',
345
+ 85: 'hsl(var(--hsl-neutral-85))',
346
+ 90: 'hsl(var(--hsl-neutral-90))',
347
+ 95: 'hsl(var(--hsl-neutral-95))',
348
+ 99: 'hsl(var(--hsl-neutral-99))',
349
+ },
350
+ orange: {
351
+ 10: 'hsl(var(--hsl-orange-10))',
352
+ 20: 'hsl(var(--hsl-orange-20))',
353
+ 30: 'hsl(var(--hsl-orange-30))',
354
+ 40: 'hsl(var(--hsl-orange-40))',
355
+ 50: 'hsl(var(--hsl-orange-50))',
356
+ 60: 'hsl(var(--hsl-orange-60))',
357
+ 70: 'hsl(var(--hsl-orange-70))',
358
+ 80: 'hsl(var(--hsl-orange-80))',
359
+ 90: 'hsl(var(--hsl-orange-90))',
360
+ 100: 'hsl(var(--hsl-orange-100))',
361
+ },
362
+ purple: {
363
+ 10: 'hsl(var(--hsl-purple-10))',
364
+ 20: 'hsl(var(--hsl-purple-20))',
365
+ 30: 'hsl(var(--hsl-purple-30))',
366
+ 40: 'hsl(var(--hsl-purple-40))',
367
+ 50: 'hsl(var(--hsl-purple-50))',
368
+ 60: 'hsl(var(--hsl-purple-60))',
369
+ 70: 'hsl(var(--hsl-purple-70))',
370
+ 80: 'hsl(var(--hsl-purple-80))',
371
+ 90: 'hsl(var(--hsl-purple-90))',
372
+ 100: 'hsl(var(--hsl-purple-100))',
373
+ },
374
+ red: {
375
+ 10: 'hsl(var(--hsl-red-10))',
376
+ 20: 'hsl(var(--hsl-red-20))',
377
+ 30: 'hsl(var(--hsl-red-30))',
378
+ 40: 'hsl(var(--hsl-red-40))',
379
+ 50: 'hsl(var(--hsl-red-50))',
380
+ 60: 'hsl(var(--hsl-red-60))',
381
+ 70: 'hsl(var(--hsl-red-70))',
382
+ 80: 'hsl(var(--hsl-red-80))',
383
+ 90: 'hsl(var(--hsl-red-90))',
384
+ 100: 'hsl(var(--hsl-red-100))',
385
+ },
386
+ teal: {
387
+ 10: 'hsl(var(--hsl-teal-10))',
388
+ 20: 'hsl(var(--hsl-teal-20))',
389
+ 30: 'hsl(var(--hsl-teal-30))',
390
+ 40: 'hsl(var(--hsl-teal-40))',
391
+ 50: 'hsl(var(--hsl-teal-50))',
392
+ 60: 'hsl(var(--hsl-teal-60))',
393
+ 70: 'hsl(var(--hsl-teal-70))',
394
+ 80: 'hsl(var(--hsl-teal-80))',
395
+ 90: 'hsl(var(--hsl-teal-90))',
396
+ 100: 'hsl(var(--hsl-teal-100))',
397
+ },
398
+ yellow: {
399
+ 10: 'hsl(var(--hsl-yellow-10))',
400
+ 20: 'hsl(var(--hsl-yellow-20))',
401
+ 30: 'hsl(var(--hsl-yellow-30))',
402
+ 40: 'hsl(var(--hsl-yellow-40))',
403
+ 50: 'hsl(var(--hsl-yellow-50))',
404
+ 60: 'hsl(var(--hsl-yellow-60))',
405
+ 70: 'hsl(var(--hsl-yellow-70))',
406
+ 80: 'hsl(var(--hsl-yellow-80))',
407
+ 90: 'hsl(var(--hsl-yellow-90))',
408
+ 100: 'hsl(var(--hsl-yellow-100))',
409
+ },
410
+ };
package/tailwind/container.ts ADDED
@@ -0,0 +1,11 @@
1
+ /* eslint-disable sort-keys */
2
+
3
+ export default {
4
+ padding: {
5
+ DEFAULT: '1rem',
6
+ sm: '1.5rem',
7
+ lg: '1.5rem',
8
+ xl: '1.5rem',
9
+ '2xl': '1.5rem',
10
+ },
11
+ };
package/tailwind/preset.ts ADDED
@@ -0,0 +1,88 @@
1
+ /* eslint-disable sort-keys */
2
+ import tailwindScrollbar from 'tailwind-scrollbar';
3
+ import type { Config } from 'tailwindcss';
4
+ import tailwindAnimate from 'tailwindcss-animate';
5
+ import defaultTheme from 'tailwindcss/defaultTheme';
6
+
7
+ import boxShadow from './boxShadow';
8
+ import colors from './colors';
9
+ import container from './container';
10
+ import spacing from './spacing';
11
+
12
+ const presetConfig: Config = {
13
+ content: ['./src/**/*.{ts,tsx}'],
14
+ darkMode: 'class',
15
+ plugins: [tailwindAnimate, tailwindScrollbar],
16
+ theme: {
17
+ container,
18
+ extend: {
19
+ animation: {
20
+ 'rest-bounce': 'rest-bounce 2s linear infinite',
21
+ },
22
+ boxShadow,
23
+ colors,
24
+
25
+ fontFamily: {
26
+ noto: ['Noto Sans JP', 'DM Sans', ...defaultTheme.fontFamily.sans],
27
+ sans: ['DM Sans', 'Noto Sans JP', ...defaultTheme.fontFamily.sans],
28
+ },
29
+ fontSize: {
30
+ xs: [
31
+ '0.75rem',
32
+ {
33
+ lineHeight: '1.1rem',
34
+ },
35
+ ],
36
+ xl: [
37
+ '1.25rem',
38
+ {
39
+ lineHeight: '1.875rem',
40
+ },
41
+ ],
42
+ '2xl': [
43
+ '1.5rem',
44
+ {
45
+ lineHeight: '2.25rem',
46
+ },
47
+ ],
48
+ '3xl': [
49
+ '1.875rem',
50
+ {
51
+ lineHeight: '2.75rem',
52
+ },
53
+ ],
54
+ '4xl': [
55
+ '2.25rem',
56
+ {
57
+ lineHeight: '3.25rem',
58
+ },
59
+ ],
60
+ '5xl': [
61
+ '3rem',
62
+ {
63
+ lineHeight: '4rem',
64
+ },
65
+ ],
66
+ },
67
+ keyframes: {
68
+ 'rest-bounce': {
69
+ '0%': {
70
+ transform: 'translateY(0%)',
71
+ },
72
+ '20%': {
73
+ transform: 'translateY(-40%)',
74
+ },
75
+ '40%': {
76
+ transform: 'translateY(0%)',
77
+ },
78
+ },
79
+ },
80
+ spacing,
81
+ transitionDelay: {
82
+ 600: '600ms',
83
+ },
84
+ },
85
+ },
86
+ };
87
+
88
+ export default presetConfig;
package/tailwind/spacing.ts ADDED
@@ -0,0 +1,14 @@
1
+ /* eslint-disable sort-keys */
2
+ export default {
3
+ '0.25': '0.0625rem' /* 1px */,
4
+ '0.75': '0.1875rem' /* 3px */,
5
+ '1.25': '0.3125rem' /* 5px */,
6
+ '4.5': '1.125rem' /* 18px */,
7
+ '5.5': '1.375rem' /* 22px */,
8
+ '6.5': '1.625rem' /* 26px */,
9
+ '7.5': '1.875rem' /* 30px */,
10
+ '8.5': '2.125rem' /* 34px */,
11
+ '9.5': '2.375rem' /* 38px */,
12
+ 13: '3.25rem' /* 52px */,
13
+ 'app-header-height': 'var(--app-header-height, 0)',
14
+ };