@jrgermain/stylesheet 0.11.2 → 0.13.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.
Files changed (7) hide show
  1. package/dist/stylesheet.css +2 -0
  2. package/dist/stylesheet.css.map +1 -0
  3. package/dist/tokens.d.ts +193 -135
  4. package/dist/tokens.js +202 -297
  5. package/package.json +5 -5
  6. package/dist/index.css +0 -2
  7. package/dist/index.css.map +0 -1
package/dist/tokens.js CHANGED
@@ -1,297 +1,202 @@
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");
1
+ export var Color;
2
+ (function (Color) {
3
+ Color["Brand1"] = "var(--color-brand-1)";
4
+ Color["Brand2"] = "var(--color-brand-2)";
5
+ Color["Brand3"] = "var(--color-brand-3)";
6
+ Color["Brand4"] = "var(--color-brand-4)";
7
+ Color["Brand5"] = "var(--color-brand-5)";
8
+ Color["Brand6"] = "var(--color-brand-6)";
9
+ Color["Brand7"] = "var(--color-brand-7)";
10
+ Color["Brand8"] = "var(--color-brand-8)";
11
+ Color["Brand9"] = "var(--color-brand-9)";
12
+ Color["BrandTransparent"] = "var(--color-brand-transparent)";
13
+ Color["BrandExtraTransparent"] = "var(--color-brand-extra-transparent)";
14
+ Color["Red1"] = "var(--color-red-1)";
15
+ Color["Red2"] = "var(--color-red-2)";
16
+ Color["Red3"] = "var(--color-red-3)";
17
+ Color["Red4"] = "var(--color-red-4)";
18
+ Color["Red5"] = "var(--color-red-5)";
19
+ Color["Red6"] = "var(--color-red-6)";
20
+ Color["Red7"] = "var(--color-red-7)";
21
+ Color["Red8"] = "var(--color-red-8)";
22
+ Color["Red9"] = "var(--color-red-9)";
23
+ Color["RedTransparent"] = "var(--color-red-transparent)";
24
+ Color["RedExtraTransparent"] = "var(--color-red-extra-transparent)";
25
+ Color["Orange1"] = "var(--color-orange-1)";
26
+ Color["Orange2"] = "var(--color-orange-2)";
27
+ Color["Orange3"] = "var(--color-orange-3)";
28
+ Color["Orange4"] = "var(--color-orange-4)";
29
+ Color["Orange5"] = "var(--color-orange-5)";
30
+ Color["Orange6"] = "var(--color-orange-6)";
31
+ Color["Orange7"] = "var(--color-orange-7)";
32
+ Color["Orange8"] = "var(--color-orange-8)";
33
+ Color["Orange9"] = "var(--color-orange-9)";
34
+ Color["OrangeTransparent"] = "var(--color-orange-transparent)";
35
+ Color["OrangeExtraTransparent"] = "var(--color-orange-extra-transparent)";
36
+ Color["Yellow1"] = "var(--color-yellow-1)";
37
+ Color["Yellow2"] = "var(--color-yellow-2)";
38
+ Color["Yellow3"] = "var(--color-yellow-3)";
39
+ Color["Yellow4"] = "var(--color-yellow-4)";
40
+ Color["Yellow5"] = "var(--color-yellow-5)";
41
+ Color["Yellow6"] = "var(--color-yellow-6)";
42
+ Color["Yellow7"] = "var(--color-yellow-7)";
43
+ Color["Yellow8"] = "var(--color-yellow-8)";
44
+ Color["Yellow9"] = "var(--color-yellow-9)";
45
+ Color["YellowTransparent"] = "var(--color-yellow-transparent)";
46
+ Color["YellowExtraTransparent"] = "var(--color-yellow-extra-transparent)";
47
+ Color["Green1"] = "var(--color-green-1)";
48
+ Color["Green2"] = "var(--color-green-2)";
49
+ Color["Green3"] = "var(--color-green-3)";
50
+ Color["Green4"] = "var(--color-green-4)";
51
+ Color["Green5"] = "var(--color-green-5)";
52
+ Color["Green6"] = "var(--color-green-6)";
53
+ Color["Green7"] = "var(--color-green-7)";
54
+ Color["Green8"] = "var(--color-green-8)";
55
+ Color["Green9"] = "var(--color-green-9)";
56
+ Color["GreenTransparent"] = "var(--color-green-transparent)";
57
+ Color["GreenExtraTransparent"] = "var(--color-green-extra-transparent)";
58
+ Color["Teal1"] = "var(--color-teal-1)";
59
+ Color["Teal2"] = "var(--color-teal-2)";
60
+ Color["Teal3"] = "var(--color-teal-3)";
61
+ Color["Teal4"] = "var(--color-teal-4)";
62
+ Color["Teal5"] = "var(--color-teal-5)";
63
+ Color["Teal6"] = "var(--color-teal-6)";
64
+ Color["Teal7"] = "var(--color-teal-7)";
65
+ Color["Teal8"] = "var(--color-teal-8)";
66
+ Color["Teal9"] = "var(--color-teal-9)";
67
+ Color["TealTransparent"] = "var(--color-teal-transparent)";
68
+ Color["TealExtraTransparent"] = "var(--color-teal-extra-transparent)";
69
+ Color["Blue1"] = "var(--color-blue-1)";
70
+ Color["Blue2"] = "var(--color-blue-2)";
71
+ Color["Blue3"] = "var(--color-blue-3)";
72
+ Color["Blue4"] = "var(--color-blue-4)";
73
+ Color["Blue5"] = "var(--color-blue-5)";
74
+ Color["Blue6"] = "var(--color-blue-6)";
75
+ Color["Blue7"] = "var(--color-blue-7)";
76
+ Color["Blue8"] = "var(--color-blue-8)";
77
+ Color["Blue9"] = "var(--color-blue-9)";
78
+ Color["BlueTransparent"] = "var(--color-blue-transparent)";
79
+ Color["BlueExtraTransparent"] = "var(--color-blue-extra-transparent)";
80
+ Color["Purple1"] = "var(--color-purple-1)";
81
+ Color["Purple2"] = "var(--color-purple-2)";
82
+ Color["Purple3"] = "var(--color-purple-3)";
83
+ Color["Purple4"] = "var(--color-purple-4)";
84
+ Color["Purple5"] = "var(--color-purple-5)";
85
+ Color["Purple6"] = "var(--color-purple-6)";
86
+ Color["Purple7"] = "var(--color-purple-7)";
87
+ Color["Purple8"] = "var(--color-purple-8)";
88
+ Color["Purple9"] = "var(--color-purple-9)";
89
+ Color["PurpleTransparent"] = "var(--color-purple-transparent)";
90
+ Color["PurpleExtraTransparent"] = "var(--color-purple-extra-transparent)";
91
+ Color["Magenta1"] = "var(--color-magenta-1)";
92
+ Color["Magenta2"] = "var(--color-magenta-2)";
93
+ Color["Magenta3"] = "var(--color-magenta-3)";
94
+ Color["Magenta4"] = "var(--color-magenta-4)";
95
+ Color["Magenta5"] = "var(--color-magenta-5)";
96
+ Color["Magenta6"] = "var(--color-magenta-6)";
97
+ Color["Magenta7"] = "var(--color-magenta-7)";
98
+ Color["Magenta8"] = "var(--color-magenta-8)";
99
+ Color["Magenta9"] = "var(--color-magenta-9)";
100
+ Color["MagentaTransparent"] = "var(--color-magenta-transparent)";
101
+ Color["MagentaExtraTransparent"] = "var(--color-magenta-extra-transparent)";
102
+ Color["Gray1"] = "var(--color-gray-1)";
103
+ Color["Gray2"] = "var(--color-gray-2)";
104
+ Color["Gray3"] = "var(--color-gray-3)";
105
+ Color["Gray4"] = "var(--color-gray-4)";
106
+ Color["Gray5"] = "var(--color-gray-5)";
107
+ Color["Gray6"] = "var(--color-gray-6)";
108
+ Color["Gray7"] = "var(--color-gray-7)";
109
+ Color["Gray8"] = "var(--color-gray-8)";
110
+ Color["Gray9"] = "var(--color-gray-9)";
111
+ Color["GrayTransparent"] = "var(--color-gray-transparent)";
112
+ Color["GrayExtraTransparent"] = "var(--color-gray-extra-transparent)";
113
+ Color["Body"] = "var(--color-body)";
114
+ Color["BodyAlt"] = "var(--color-body-alt)";
115
+ Color["BodyText"] = "var(--color-body-text)";
116
+ Color["BodyTextAlt"] = "var(--color-body-text-alt)";
117
+ Color["BodyTextInvert"] = "var(--color-body-text-invert)";
118
+ Color["Shadow"] = "var(--color-shadow)";
119
+ Color["Border"] = "var(--color-border)";
120
+ })(Color || (Color = {}));
121
+ export var FontSize;
122
+ (function (FontSize) {
123
+ FontSize["XS"] = "var(--font-size-xs)";
124
+ FontSize["S"] = "var(--font-size-s)";
125
+ FontSize["M"] = "var(--font-size-m)";
126
+ FontSize["L"] = "var(--font-size-l)";
127
+ FontSize["XL"] = "var(--font-size-xl)";
128
+ FontSize["XXL"] = "var(--font-size-2xl)";
129
+ FontSize["XXXL"] = "var(--font-size-3xl)";
130
+ FontSize["XXXXL"] = "var(--font-size-4xl)";
131
+ })(FontSize || (FontSize = {}));
132
+ export var FontWeight;
133
+ (function (FontWeight) {
134
+ FontWeight["Light"] = "var(--font-weight-light)";
135
+ FontWeight["Normal"] = "var(--font-weight-normal)";
136
+ FontWeight["Semibold"] = "var(--font-weight-semibold)";
137
+ FontWeight["Bold"] = "var(--font-weight-bold)";
138
+ FontWeight["Black"] = "var(--font-weight-black)";
139
+ })(FontWeight || (FontWeight = {}));
140
+ export var FontFamily;
141
+ (function (FontFamily) {
142
+ FontFamily["Body"] = "var(--font-family-body)";
143
+ FontFamily["Heading"] = "var(--font-family-heading)";
144
+ FontFamily["Mono"] = "var(--font-family-mono)";
145
+ })(FontFamily || (FontFamily = {}));
146
+ export var Space;
147
+ (function (Space) {
148
+ Space["None"] = "var(--space-none)";
149
+ Space["XXXS"] = "var(--space-3xs)";
150
+ Space["XXS"] = "var(--space-2xs)";
151
+ Space["XS"] = "var(--space-xs)";
152
+ Space["S"] = "var(--space-s)";
153
+ Space["M"] = "var(--space-m)";
154
+ Space["L"] = "var(--space-l)";
155
+ Space["XL"] = "var(--space-xl)";
156
+ Space["XXL"] = "var(--space-2xl)";
157
+ Space["XXXL"] = "var(--space-3xl)";
158
+ Space["BodyX"] = "var(--body-x)";
159
+ Space["BodyY"] = "var(--body-y)";
160
+ })(Space || (Space = {}));
161
+ export var Radius;
162
+ (function (Radius) {
163
+ Radius["None"] = "var(--radius-none)";
164
+ Radius["S"] = "var(--radius-s)";
165
+ Radius["M"] = "var(--radius-m)";
166
+ Radius["L"] = "var(--radius-l)";
167
+ Radius["XL"] = "var(--radius-xl)";
168
+ Radius["XXL"] = "var(--radius-2xl)";
169
+ Radius["Full"] = "var(--radius-full)";
170
+ })(Radius || (Radius = {}));
171
+ export var Shadow;
172
+ (function (Shadow) {
173
+ Shadow["None"] = "var(--shadow-none)";
174
+ Shadow["S"] = "var(--shadow-s)";
175
+ Shadow["M"] = "var(--shadow-m)";
176
+ Shadow["L"] = "var(--shadow-l)";
177
+ Shadow["XL"] = "var(--shadow-xl)";
178
+ })(Shadow || (Shadow = {}));
179
+ export var BorderWidth;
180
+ (function (BorderWidth) {
181
+ BorderWidth["None"] = "var(--border-none)";
182
+ BorderWidth["S"] = "var(--border-s)";
183
+ BorderWidth["M"] = "var(--border-m)";
184
+ BorderWidth["L"] = "var(--border-l)";
185
+ BorderWidth["XL"] = "var(--border-xl)";
186
+ })(BorderWidth || (BorderWidth = {}));
187
+ export var EasingFunction;
188
+ (function (EasingFunction) {
189
+ EasingFunction["Default"] = "var(--ease-default)";
190
+ EasingFunction["Out"] = "var(--ease-out)";
191
+ EasingFunction["In"] = "var(--ease-in)";
192
+ EasingFunction["Both"] = "var(--ease-both)";
193
+ EasingFunction["BothSubtle"] = "var(--ease-both-subtle)";
194
+ EasingFunction["Spring"] = "var(--ease-spring)";
195
+ })(EasingFunction || (EasingFunction = {}));
196
+ export var Duration;
197
+ (function (Duration) {
198
+ Duration["Short"] = "var(--duration-short)";
199
+ Duration["Medium"] = "var(--duration-medium)";
200
+ Duration["Long"] = "var(--duration-long)";
201
+ Duration["ExtraLong"] = "var(--duration-extra-long)";
202
+ })(Duration || (Duration = {}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jrgermain/stylesheet",
3
- "version": "0.11.2",
3
+ "version": "0.13.0",
4
4
  "description": "A CSS stylesheet for the cool stuff I'm building",
5
5
  "homepage": "https://stylesheet.jrgermain.dev",
6
6
  "author": {
@@ -33,11 +33,11 @@
33
33
  ],
34
34
  "exports": {
35
35
  ".": {
36
- "browser": "./dist/index.css",
37
- "unpkg": "./dist/index.css",
38
- "default": "./dist/index.css"
36
+ "browser": "./dist/stylesheet.css",
37
+ "unpkg": "./dist/stylesheet.css",
38
+ "default": "./dist/stylesheet.css"
39
39
  },
40
- "./index.css": "./dist/index.css",
40
+ "./stylesheet.css": "./dist/stylesheet.css",
41
41
  "./tokens": "./dist/tokens.js"
42
42
  },
43
43
  "browserslist": [