@jrgermain/stylesheet 0.10.1 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/tokens.d.ts +135 -0
- package/dist/tokens.js +297 -0
- package/package.json +10 -8
package/dist/tokens.js
ADDED
|
@@ -0,0 +1,297 @@
|
|
|
1
|
+
export const colorVariants = [
|
|
2
|
+
"brand",
|
|
3
|
+
"red",
|
|
4
|
+
"orange",
|
|
5
|
+
"yellow",
|
|
6
|
+
"green",
|
|
7
|
+
"sky",
|
|
8
|
+
"blue",
|
|
9
|
+
"purple",
|
|
10
|
+
"magenta",
|
|
11
|
+
"gray",
|
|
12
|
+
"black",
|
|
13
|
+
"white",
|
|
14
|
+
];
|
|
15
|
+
export const isColorVariant = (x) => colorVariants.includes(x);
|
|
16
|
+
export const standardPalletColors = [
|
|
17
|
+
"brand-1",
|
|
18
|
+
"brand-2",
|
|
19
|
+
"brand-3",
|
|
20
|
+
"brand-4",
|
|
21
|
+
"brand-5",
|
|
22
|
+
"brand-6",
|
|
23
|
+
"brand-7",
|
|
24
|
+
"brand-8",
|
|
25
|
+
"brand-9",
|
|
26
|
+
"brand-transparent",
|
|
27
|
+
"brand-extra-transparent",
|
|
28
|
+
"red-1",
|
|
29
|
+
"red-2",
|
|
30
|
+
"red-3",
|
|
31
|
+
"red-4",
|
|
32
|
+
"red-5",
|
|
33
|
+
"red-6",
|
|
34
|
+
"red-7",
|
|
35
|
+
"red-8",
|
|
36
|
+
"red-9",
|
|
37
|
+
"red-transparent",
|
|
38
|
+
"red-extra-transparent",
|
|
39
|
+
"orange-1",
|
|
40
|
+
"orange-2",
|
|
41
|
+
"orange-3",
|
|
42
|
+
"orange-4",
|
|
43
|
+
"orange-5",
|
|
44
|
+
"orange-6",
|
|
45
|
+
"orange-7",
|
|
46
|
+
"orange-8",
|
|
47
|
+
"orange-9",
|
|
48
|
+
"orange-transparent",
|
|
49
|
+
"orange-extra-transparent",
|
|
50
|
+
"yellow-1",
|
|
51
|
+
"yellow-2",
|
|
52
|
+
"yellow-3",
|
|
53
|
+
"yellow-4",
|
|
54
|
+
"yellow-5",
|
|
55
|
+
"yellow-6",
|
|
56
|
+
"yellow-7",
|
|
57
|
+
"yellow-8",
|
|
58
|
+
"yellow-9",
|
|
59
|
+
"yellow-transparent",
|
|
60
|
+
"yellow-extra-transparent",
|
|
61
|
+
"green-1",
|
|
62
|
+
"green-2",
|
|
63
|
+
"green-3",
|
|
64
|
+
"green-4",
|
|
65
|
+
"green-5",
|
|
66
|
+
"green-6",
|
|
67
|
+
"green-7",
|
|
68
|
+
"green-8",
|
|
69
|
+
"green-9",
|
|
70
|
+
"green-transparent",
|
|
71
|
+
"green-extra-transparent",
|
|
72
|
+
"sky-1",
|
|
73
|
+
"sky-2",
|
|
74
|
+
"sky-3",
|
|
75
|
+
"sky-4",
|
|
76
|
+
"sky-5",
|
|
77
|
+
"sky-6",
|
|
78
|
+
"sky-7",
|
|
79
|
+
"sky-8",
|
|
80
|
+
"sky-9",
|
|
81
|
+
"sky-transparent",
|
|
82
|
+
"sky-extra-transparent",
|
|
83
|
+
"blue-1",
|
|
84
|
+
"blue-2",
|
|
85
|
+
"blue-3",
|
|
86
|
+
"blue-4",
|
|
87
|
+
"blue-5",
|
|
88
|
+
"blue-6",
|
|
89
|
+
"blue-7",
|
|
90
|
+
"blue-8",
|
|
91
|
+
"blue-9",
|
|
92
|
+
"blue-transparent",
|
|
93
|
+
"blue-extra-transparent",
|
|
94
|
+
"purple-1",
|
|
95
|
+
"purple-2",
|
|
96
|
+
"purple-3",
|
|
97
|
+
"purple-4",
|
|
98
|
+
"purple-5",
|
|
99
|
+
"purple-6",
|
|
100
|
+
"purple-7",
|
|
101
|
+
"purple-8",
|
|
102
|
+
"purple-9",
|
|
103
|
+
"purple-transparent",
|
|
104
|
+
"purple-extra-transparent",
|
|
105
|
+
"magenta-1",
|
|
106
|
+
"magenta-2",
|
|
107
|
+
"magenta-3",
|
|
108
|
+
"magenta-4",
|
|
109
|
+
"magenta-5",
|
|
110
|
+
"magenta-6",
|
|
111
|
+
"magenta-7",
|
|
112
|
+
"magenta-8",
|
|
113
|
+
"magenta-9",
|
|
114
|
+
"magenta-transparent",
|
|
115
|
+
"magenta-extra-transparent",
|
|
116
|
+
"gray-1",
|
|
117
|
+
"gray-2",
|
|
118
|
+
"gray-3",
|
|
119
|
+
"gray-4",
|
|
120
|
+
"gray-5",
|
|
121
|
+
"gray-6",
|
|
122
|
+
"gray-7",
|
|
123
|
+
"gray-8",
|
|
124
|
+
"gray-9",
|
|
125
|
+
"gray-transparent",
|
|
126
|
+
"gray-extra-transparent",
|
|
127
|
+
];
|
|
128
|
+
export const isStandardPalletColor = (x) => standardPalletColors.includes(x);
|
|
129
|
+
export const semanticColors = [
|
|
130
|
+
"body",
|
|
131
|
+
"body-alt",
|
|
132
|
+
"body-text",
|
|
133
|
+
"body-text-alt",
|
|
134
|
+
"body-text-invert",
|
|
135
|
+
"shadow",
|
|
136
|
+
"outline",
|
|
137
|
+
];
|
|
138
|
+
export const isSemanticColor = (x) => semanticColors.includes(x);
|
|
139
|
+
export const isColor = (x) => isStandardPalletColor(x) || isSemanticColor(x);
|
|
140
|
+
export const fontSizes = [
|
|
141
|
+
"xs",
|
|
142
|
+
"s",
|
|
143
|
+
"m",
|
|
144
|
+
"l",
|
|
145
|
+
"xl",
|
|
146
|
+
"2xl",
|
|
147
|
+
"3xl",
|
|
148
|
+
"4xl",
|
|
149
|
+
];
|
|
150
|
+
export const isFontSize = (x) => fontSizes.includes(x);
|
|
151
|
+
export const fontWeights = [
|
|
152
|
+
"light",
|
|
153
|
+
"normal",
|
|
154
|
+
"semibold",
|
|
155
|
+
"bold",
|
|
156
|
+
"black",
|
|
157
|
+
];
|
|
158
|
+
export const isFontWeight = (x) => fontWeights.includes(x);
|
|
159
|
+
export const fontFamilies = ["body", "heading", "mono"];
|
|
160
|
+
export const isFontFamily = (x) => fontFamilies.includes(x);
|
|
161
|
+
export const spaces = [
|
|
162
|
+
"none",
|
|
163
|
+
"3xs",
|
|
164
|
+
"2xs",
|
|
165
|
+
"xs",
|
|
166
|
+
"s",
|
|
167
|
+
"m",
|
|
168
|
+
"l",
|
|
169
|
+
"xl",
|
|
170
|
+
"2xl",
|
|
171
|
+
"3xl",
|
|
172
|
+
"body-x",
|
|
173
|
+
"body-y",
|
|
174
|
+
];
|
|
175
|
+
export const isSpace = (x) => spaces.includes(x);
|
|
176
|
+
export const radii = ["none", "s", "m", "l", "xl", "2xl", "full"];
|
|
177
|
+
export const isRadius = (x) => radii.includes(x);
|
|
178
|
+
export const shadows = ["none", "s", "m", "l", "xl"];
|
|
179
|
+
export const isShadow = (x) => shadows.includes(x);
|
|
180
|
+
export const borderWidths = ["none", "s", "m", "l", "xl"];
|
|
181
|
+
export const isBorderWidth = (x) => borderWidths.includes(x);
|
|
182
|
+
export const easingFunctions = [
|
|
183
|
+
"default",
|
|
184
|
+
"out",
|
|
185
|
+
"in",
|
|
186
|
+
"both",
|
|
187
|
+
"both-subtle",
|
|
188
|
+
"spring",
|
|
189
|
+
];
|
|
190
|
+
export const isEasingFunction = (x) => easingFunctions.includes(x);
|
|
191
|
+
export const durations = ["short", "medium", "long", "extra-long"];
|
|
192
|
+
export const isDuration = (x) => durations.includes(x);
|
|
193
|
+
const buildResolver = (predicate, prefix) => {
|
|
194
|
+
return (value) => {
|
|
195
|
+
if (predicate(value)) {
|
|
196
|
+
return `var(--${prefix}-${value})`;
|
|
197
|
+
}
|
|
198
|
+
return String(value);
|
|
199
|
+
};
|
|
200
|
+
};
|
|
201
|
+
/**
|
|
202
|
+
* If the given value is a valid color token, replace it with the corresponding
|
|
203
|
+
* CSS variable reference. Otherwise, return the value as a string.
|
|
204
|
+
*
|
|
205
|
+
* @example
|
|
206
|
+
* resolveColor("red-5") // "var(--color-red-5)"
|
|
207
|
+
* resolveColor("#ff0000") // "#ff0000"
|
|
208
|
+
*/
|
|
209
|
+
export const resolveColor = buildResolver(isColor, "color");
|
|
210
|
+
/**
|
|
211
|
+
* If the given value is a valid font size token, replace it with the
|
|
212
|
+
* corresponding CSS variable reference. Otherwise, return the value as a
|
|
213
|
+
* string.
|
|
214
|
+
*
|
|
215
|
+
* @example
|
|
216
|
+
* resolveFontSize("m") // "var(--font-size-m)"
|
|
217
|
+
* resolveFontSize("16px") // "16px"
|
|
218
|
+
*/
|
|
219
|
+
export const resolveFontSize = buildResolver(isFontSize, "font-size");
|
|
220
|
+
/**
|
|
221
|
+
* If the given value is a valid font weight token, replace it with the
|
|
222
|
+
* corresponding CSS variable reference. Otherwise, return the value as a
|
|
223
|
+
* string.
|
|
224
|
+
*
|
|
225
|
+
* @example
|
|
226
|
+
* resolveFontWeight("semibold") // "var(--font-weight-semibold)"
|
|
227
|
+
* resolveFontWeight("700") // "700"
|
|
228
|
+
* resolveFontWeight(700) // "700"
|
|
229
|
+
*/
|
|
230
|
+
export const resolveFontWeight = buildResolver(isFontWeight, "font-weight");
|
|
231
|
+
/**
|
|
232
|
+
* If the given value is a valid font family token, replace it with the
|
|
233
|
+
* corresponding CSS variable reference. Otherwise, return the value as a
|
|
234
|
+
* string.
|
|
235
|
+
*
|
|
236
|
+
* @example
|
|
237
|
+
* resolveFontFamily("body") // "var(--font-family-body)"
|
|
238
|
+
* resolveFontFamily("arial, sans-serif") // "arial, sans-serif"
|
|
239
|
+
*/
|
|
240
|
+
export const resolveFontFamily = buildResolver(isFontFamily, "font-family");
|
|
241
|
+
/**
|
|
242
|
+
* If the given value is a valid spacing token, replace it with the
|
|
243
|
+
* corresponding CSS variable reference. Otherwise, return the value as a
|
|
244
|
+
* string.
|
|
245
|
+
*
|
|
246
|
+
* @example
|
|
247
|
+
* resolveSpace("xl") // "var(--space-xl)"
|
|
248
|
+
* resolveSpace("2rem") // "2rem"
|
|
249
|
+
*/
|
|
250
|
+
export const resolveSpace = buildResolver(isSpace, "space");
|
|
251
|
+
/**
|
|
252
|
+
* If the given value is a valid radius token, replace it with the corresponding
|
|
253
|
+
* CSS variable reference. Otherwise, return the value as a string.
|
|
254
|
+
*
|
|
255
|
+
* @example
|
|
256
|
+
* resolveRadius("xl") // "var(--radius-xl)"
|
|
257
|
+
* resolveRadius("12px") // "12px"
|
|
258
|
+
*/
|
|
259
|
+
export const resolveRadius = buildResolver(isRadius, "radius");
|
|
260
|
+
/**
|
|
261
|
+
* If the given value is a valid shadow token, replace it with the corresponding
|
|
262
|
+
* CSS variable reference. Otherwise, return the value as a string.
|
|
263
|
+
*
|
|
264
|
+
* @example
|
|
265
|
+
* resolveShadow("xl") // "var(--shadow-xl)"
|
|
266
|
+
* resolveShadow("0 0 1px #0005") // "0 0 1px #0005"
|
|
267
|
+
*/
|
|
268
|
+
export const resolveShadow = buildResolver(isShadow, "shadow");
|
|
269
|
+
/**
|
|
270
|
+
* If the given value is a valid border token, replace it with the corresponding
|
|
271
|
+
* CSS variable reference. Otherwise, return the value as a string.
|
|
272
|
+
*
|
|
273
|
+
* @example
|
|
274
|
+
* resolveBorder("m") // "var(--border-m)"
|
|
275
|
+
* resolveBorder("2px") // "2px"
|
|
276
|
+
*/
|
|
277
|
+
export const resolveBorderWidth = buildResolver(isBorderWidth, "border");
|
|
278
|
+
/**
|
|
279
|
+
* If the given value is a valid easing function token, replace it with the
|
|
280
|
+
* corresponding CSS variable reference. Otherwise, return the value as a
|
|
281
|
+
* string.
|
|
282
|
+
*
|
|
283
|
+
* @example
|
|
284
|
+
* resolveEasingFunction("in") // "var(--ease-in)"
|
|
285
|
+
* resolveEasingFunction("cubic-bezier(0.5, 0, 0.5, 1)") // "cubic-bezier(0.5, 0, 0.5, 1)"
|
|
286
|
+
*/
|
|
287
|
+
export const resolveEasingFunction = buildResolver(isEasingFunction, "ease");
|
|
288
|
+
/**
|
|
289
|
+
* If the given value is a valid duration token, replace it with the
|
|
290
|
+
* corresponding CSS variable reference. Otherwise, return the value as a
|
|
291
|
+
* string.
|
|
292
|
+
*
|
|
293
|
+
* @example
|
|
294
|
+
* resolveDuration("short") // "var(--duration-short)"
|
|
295
|
+
* resolveDuration("2s") // "2s"
|
|
296
|
+
*/
|
|
297
|
+
export const resolveDuration = buildResolver(isDuration, "duration");
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jrgermain/stylesheet",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.0",
|
|
4
4
|
"description": "A CSS stylesheet for the cool stuff I'm building",
|
|
5
5
|
"homepage": "https://stylesheet.jrgermain.dev",
|
|
6
6
|
"author": {
|
|
@@ -19,13 +19,14 @@
|
|
|
19
19
|
"lint": "stylelint ./src/styles"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
-
"browserslist": "^4.
|
|
22
|
+
"browserslist": "^4.25.1",
|
|
23
23
|
"chokidar": "^4.0.3",
|
|
24
|
-
"lightningcss": "^1.
|
|
25
|
-
"prettier": "^3.2
|
|
26
|
-
"rimraf": "^
|
|
27
|
-
"stylelint": "^16.
|
|
28
|
-
"stylelint-config-standard": "^
|
|
24
|
+
"lightningcss": "^1.30.1",
|
|
25
|
+
"prettier": "^3.6.2",
|
|
26
|
+
"rimraf": "^6.0.1",
|
|
27
|
+
"stylelint": "^16.22.0",
|
|
28
|
+
"stylelint-config-standard": "^38.0.0",
|
|
29
|
+
"typescript": "^5.9.2"
|
|
29
30
|
},
|
|
30
31
|
"files": [
|
|
31
32
|
"dist"
|
|
@@ -36,7 +37,8 @@
|
|
|
36
37
|
"unpkg": "./dist/index.css",
|
|
37
38
|
"default": "./dist/index.css"
|
|
38
39
|
},
|
|
39
|
-
"./index.css": "./dist/index.css"
|
|
40
|
+
"./index.css": "./dist/index.css",
|
|
41
|
+
"./tokens": "./dist/tokens.js"
|
|
40
42
|
},
|
|
41
43
|
"browserslist": [
|
|
42
44
|
"defaults"
|