@photoroom/ui 0.1.117 → 0.1.119

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 (30) hide show
  1. package/README.md +12 -1
  2. package/animations.css +13 -0
  3. package/colors.css +445 -0
  4. package/components/content/BatchTile/BatchTile.d.ts +3 -1
  5. package/components/content/BatchTile/BatchTile.d.ts.map +1 -1
  6. package/components/index.d.ts +1 -0
  7. package/components/index.d.ts.map +1 -1
  8. package/components/input/OptionSelectionListItem/OptionSelectionListItem.d.ts +41 -0
  9. package/components/input/OptionSelectionListItem/OptionSelectionListItem.d.ts.map +1 -0
  10. package/components/input/OptionSelectionListItem/index.d.ts +2 -0
  11. package/components/input/OptionSelectionListItem/index.d.ts.map +1 -0
  12. package/index.css +1 -1
  13. package/index.mjs +12 -12
  14. package/package.json +5 -5
  15. package/theme.css +1420 -0
  16. package/plugins/backgrounds.js +0 -43
  17. package/plugins/colors.js +0 -435
  18. package/plugins/content-to-edge.js +0 -104
  19. package/plugins/forms.js +0 -21
  20. package/plugins/icon-offset.js +0 -29
  21. package/plugins/icon-size.js +0 -39
  22. package/plugins/icon-to-edge.js +0 -101
  23. package/plugins/misc.js +0 -112
  24. package/plugins/size.js +0 -154
  25. package/plugins/spacing.js +0 -84
  26. package/plugins/text-to-leading.js +0 -61
  27. package/plugins/transitions.js +0 -15
  28. package/plugins/typography.js +0 -523
  29. package/plugins/variants.js +0 -9
  30. package/tailwind.config.js +0 -490
package/plugins/backgrounds.js DELETED
@@ -1,43 +0,0 @@
1
- /* oxlint-disable typescript/no-require-imports */
2
- const plugin = require("tailwindcss/plugin");
3
-
4
- // Inlined from tailwindcss v3 internals (removed in v4).
5
- const flattenColorPalette = (colors) =>
6
- Object.assign(
7
- {},
8
- ...Object.entries(colors ?? {}).flatMap(([color, values]) =>
9
- typeof values === "object"
10
- ? Object.entries(flattenColorPalette(values)).map(([number, hex]) => ({
11
- [color + (number === "DEFAULT" ? "" : `-${number}`)]: hex,
12
- }))
13
- : [{ [color]: values }]
14
- )
15
- );
16
-
17
- const toColorValue = (maybeFn, opts = {}) =>
18
- typeof maybeFn === "function" ? maybeFn(opts) : maybeFn;
19
-
20
- module.exports = plugin(({ theme, addUtilities, matchUtilities }) => {
21
- matchUtilities(
22
- {
23
- "bg-damier": (value) => ({
24
- "background-image": `repeating-conic-gradient(${toColorValue(
25
- value
26
- )} 0% 25%, transparent 0% 50%)`,
27
- "background-position": "center",
28
- }),
29
- },
30
- { values: flattenColorPalette(theme("colors")), type: "color" }
31
- );
32
- addUtilities({
33
- ".bg-damier-small": {
34
- "background-size": "12px 12px",
35
- },
36
- ".bg-damier-medium": {
37
- "background-size": "20px 20px",
38
- },
39
- ".bg-damier-large": {
40
- "background-size": "28px 28px",
41
- },
42
- });
43
- });
package/plugins/colors.js DELETED
@@ -1,435 +0,0 @@
1
- // oxlint-disable-next-line typescript/no-require-imports
2
- const plugin = require("tailwindcss/plugin");
3
-
4
- // https://tailwindcss.com/docs/customizing-colors#using-css-variables
5
- module.exports = plugin(({ addBase, addUtilities }) => {
6
- /**
7
- * Colors tokens as CSS variables with dark mode support
8
- * https://tailwindcss.com/docs/customizing-colors#using-css-variables
9
- * https://tailwindcss.com/docs/dark-mode#customizing-the-class-name
10
- *
11
- * Use hex color value directly from the Figma.
12
- * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/%F0%9F%9B%A0-Design-System?node-id=7217%3A13600
13
- *
14
- * Do not use color channels as we don't need Tailwind opacity modifier syntax.
15
- * All colors we use in the codebase should be direct tokens, not derivated (i.e. don't do : `bg-gray/80`).
16
- */
17
- addBase({
18
- ":root": {
19
- /**
20
- * BASE
21
- */
22
-
23
- // Static
24
- "--color-black": "#000000",
25
- "--color-black-alpha-1": "rgba(0,0,0,5%)", // 000000, 5%
26
- "--color-black-alpha-2": "rgba(0,0,0,10%)", // 000000, 10%
27
- "--color-black-alpha-3": "rgba(0,0,0,15%)", // 000000, 15%
28
- "--color-black-alpha-4": "rgba(0,0,0,24%)", // 000000, 24%
29
- "--color-black-alpha-5": "rgba(0,0,0,32%)", // 000000, 32%
30
- "--color-black-alpha-6": "rgba(0,0,0,42%)", // 000000, 42%
31
- "--color-black-alpha-7": "rgba(0,0,0,56%)", // 000000, 56%
32
- "--color-black-alpha-8": "rgba(0,0,0,75%)", // 000000, 75%
33
- "--color-black-alpha-9": "rgba(0,0,0,85%)", // 000000, 85%
34
- "--color-white": "#FFFFFF",
35
- "--color-white-1": "#F2F3F7",
36
- "--color-white-2": "#E6E7ED",
37
- "--color-white-alpha-1": "rgba(255,255,255,7%)", // FFFFFF, 7%
38
- "--color-white-alpha-2": "rgba(255,255,255,12%)", // FFFFFF, 12%
39
- "--color-white-alpha-3": "rgba(255,255,255,18%)", // FFFFFF, 18%
40
- "--color-white-alpha-4": "rgba(255,255,255,41%)", // FFFFFF, 41%
41
- "--color-white-alpha-5": "rgba(255,255,255,49%)", // FFFFFF, 49%
42
- "--color-white-alpha-6": "rgba(255,255,255,60%)", // FFFFFF, 60%
43
- "--color-white-alpha-7": "rgba(255,255,255,72%)", // FFFFFF, 72%
44
- "--color-white-alpha-8": "rgba(255,255,255,81%)", // FFFFFF, 81%
45
- "--color-white-alpha-9": "rgba(255,255,255,85%)", // FFFFFF, 85%
46
-
47
- // Neutral
48
- "--color-neutral-0": "#FFFFFF",
49
- "--color-neutral-0-80": "rgba(255,255,255,80%)", // FFFFFF, 80%
50
- "--color-neutral-50": "#F9F9F9",
51
- "--color-neutral-100": "#F2F2F2",
52
- "--color-neutral-200": "#E5E5E5",
53
- "--color-neutral-300": "#D9D9D9",
54
- "--color-neutral-400": "#B5B5B5",
55
- "--color-neutral-500": "#A1A1A1",
56
- "--color-neutral-600": "#8A8A8A",
57
- "--color-neutral-700": "#6B6B6B",
58
- "--color-neutral-800": "#474747",
59
- "--color-neutral-900": "#1A1A1A",
60
- "--color-neutral-alpha-100": "rgba(0,0,0,5%)", // 000000, 5%
61
- "--color-neutral-alpha-200": "rgba(0,0,0,10%)", // 000000, 10%
62
- "--color-neutral-alpha-300": "rgba(0,0,0,15%)", // 000000, 15%
63
- "--color-neutral-alpha-400": "rgba(0,0,0,29%)", // 000000, 29%
64
- "--color-neutral-alpha-500": "rgba(0,0,0,37%)", // 000000, 37%
65
-
66
- // Sand
67
- "--color-sand-50": "#F5F4F0",
68
-
69
- // Accent
70
- "--color-accent-300": "#6161F2",
71
- "--color-accent-400": "#4D3DE3",
72
- "--color-accent-500": "#410CD9",
73
- "--color-accent-600": "#280197",
74
- "--color-accent-alpha-1": "rgba(88,38,222,6%)", // 5826DE, 6%
75
- "--color-accent-alpha-2": "rgba(64,10,219,11%)", // 400ADB, 11%
76
- "--color-accent-alpha-3": "rgba(67,14,220,17%)", // 430EDC, 17%
77
- "--color-accent-alpha-4": "rgba(62,7,218,27%)", // 3E07DA, 27%
78
- "--color-accent-alpha-5": "rgba(55,1,215,35%)", // 3701D7, 35%
79
-
80
- // Positive
81
- "--color-positive-400": "#3DBA83",
82
- "--color-positive-500": "#00A66F",
83
- "--color-positive-600": "#018255",
84
- "--color-positive-alpha-1": "rgba(15,175,125,10%)", // 0FAF7D, 10%
85
- "--color-positive-alpha-2": "rgba(8,166,113,19%)", // 08A671, 19%
86
- "--color-positive-alpha-3": "rgba(3,165,114,29%)", // 03A572, 29%
87
-
88
- // Negative
89
- "--color-negative-400": "#FF6B5E",
90
- "--color-negative-500": "#FF3333",
91
- "--color-negative-600": "#C92224",
92
- "--color-negative-alpha-1": "rgba(255,105,105,10%)", // FF6969, 10%
93
- "--color-negative-alpha-2": "rgba(255,24,24,13%)", // FF1818, 13%
94
- "--color-negative-alpha-3": "rgba(255,74,74,26%)", // FF4A4A, 26%
95
-
96
- // Magic accent
97
- "--color-magic-accent-400": "#EE65F5",
98
- "--color-magic-accent-500": "#DA45E5",
99
- "--color-magic-accent-600": "#AD31B7",
100
-
101
- // Animation accent
102
- "--color-animation-accent-500": "#CFC5FF",
103
-
104
- // Camera accent
105
- "--color-camera-accent-500": "#F5B63D",
106
-
107
- // Branding
108
- "--color-secondary-moon-grape": "#626EFF",
109
- "--color-secondary-electric-litchi": "#FF86F6",
110
- "--color-secondary-sunny-mango": "#FFA602",
111
- "--color-secondary-aqua-kiwi": "#00CD9C",
112
- "--color-secondary-coral-cherry": "#FF538C",
113
- "--color-secondary-navy": "#000255",
114
- "--color-secondary-lilac": "#E7E8FF",
115
-
116
- // Semantic
117
- "--color-spotlight": "rgba(255, 166, 2, 0.16)",
118
- "--color-spotlight-down": "rgba(255, 166, 2, 0.34)",
119
-
120
- // Replaceable layer indicator in editor
121
- "--color-replaceable": "#00FFC2",
122
-
123
- /**
124
- * ALIASES
125
- */
126
-
127
- // Surface
128
- "--color-surface-default": "var(--color-neutral-0)",
129
- "--color-surface-alternate": "var(--color-neutral-100)",
130
- "--color-surface-low": "var(--color-neutral-100)",
131
- "--color-surface-high": "var(--color-neutral-0)",
132
- "--color-surface-higher": "var(--color-neutral-0)",
133
-
134
- // Background
135
- "--color-background-default": "var(--color-neutral-900)",
136
- "--color-background-hover": "var(--color-neutral-800)",
137
- "--color-background-down": "var(--color-neutral-900)",
138
- "--color-background-subdued": "var(--color-neutral-alpha-100)",
139
- "--color-background-subdued-hover": "var(--color-neutral-alpha-200)",
140
- "--color-background-subdued-down": "var(--color-neutral-alpha-300)",
141
- "--color-background-accent": "var(--color-accent-500)",
142
- "--color-background-accent-hover": "var(--color-accent-400)",
143
- "--color-background-accent-down": "var(--color-accent-600)",
144
- "--color-background-accent-subdued": "var(--color-accent-alpha-1)",
145
- "--color-background-accent-subdued-hover": "var(--color-accent-alpha-2)",
146
- "--color-background-accent-subdued-down": "var(--color-accent-alpha-3)",
147
- "--color-background-positive": "var(--color-positive-500)",
148
- "--color-background-positive-hover": "var(--color-positive-400)",
149
- "--color-background-positive-down": "var(--color-positive-600)",
150
- "--color-background-positive-subdued": "var(--color-positive-alpha-1)",
151
- "--color-background-positive-subdued-hover": "var(--color-positive-alpha-2)",
152
- "--color-background-positive-subdued-down": "var(--color-positive-alpha-3)",
153
- "--color-background-negative": "var(--color-negative-500)",
154
- "--color-background-negative-hover": "var(--color-negative-400)",
155
- "--color-background-negative-down": "var(--color-negative-600)",
156
- "--color-background-negative-subdued": "var(--color-negative-alpha-1)",
157
- "--color-background-negative-subdued-hover": "var(--color-negative-alpha-2)",
158
- "--color-background-negative-subdued-down": "var(--color-negative-alpha-3)",
159
- "--color-background-tab": "var(--color-neutral-0)",
160
- "--color-background-bar": "var(--color-neutral-0-80)",
161
- "--color-background-white": "var(--color-white)",
162
- "--color-background-white-hover": "var(--color-white-1)",
163
- "--color-background-white-down": "var(--color-white-2)",
164
- "--color-background-white-subdued": "var(--color-white-alpha-3)",
165
- "--color-background-white-subdued-hover": "var(--color-white-alpha-4)",
166
- "--color-background-white-subdued-down": "var(--color-white-alpha-5)",
167
- "--color-background-spotlight": "var(--color-spotlight)",
168
- "--color-background-spotlight-down": "var(--color-spotlight-down)",
169
- "--color-background-inverted": "var(--color-neutral-0)",
170
- "--color-background-promotional": "var(--color-secondary-lilac)",
171
- "--color-background-overlay": "var(--color-white-alpha-9)",
172
- "--color-background-tooltip": "var(--color-neutral-800)",
173
-
174
- // Content
175
- "--color-content-primary": "var(--color-neutral-900)",
176
- "--color-content-subdued-primary": "var(--color-neutral-800)",
177
- "--color-content-secondary": "var(--color-neutral-700)",
178
- "--color-content-tertiary": "var(--color-neutral-600)",
179
- "--color-content-accent": "var(--color-accent-500)",
180
- "--color-content-accent-hover": "var(--color-accent-400)",
181
- "--color-content-accent-down": "var(--color-accent-600)",
182
- "--color-content-positive": "var(--color-positive-500)",
183
- "--color-content-positive-hover": "var(--color-positive-400)",
184
- "--color-content-positive-down": "var(--color-positive-600)",
185
- "--color-content-negative": "var(--color-negative-500)",
186
- "--color-content-negative-hover": "var(--color-negative-400)",
187
- "--color-content-negative-down": "var(--color-negative-600)",
188
- "--color-content-camera-accent": "var(--color-camera-accent-500)",
189
- "--color-content-white-primary": "var(--color-white)",
190
- "--color-content-white-secondary": "var(--color-white-alpha-8)",
191
- "--color-content-black-primary": "var(--color-black)",
192
- "--color-content-white-primary-inverted": "var(--color-white)",
193
- "--color-content-white-subdued-primary-inverted": "var(--color-white-alpha-8)",
194
-
195
- // Structure
196
- "--color-misc-divider": "var(--color-neutral-alpha-200)",
197
- "--color-misc-divider-ios": "var(--color-neutral-alpha-300)",
198
- "--color-misc-border": "var(--color-neutral-alpha-300)",
199
- "--color-misc-border-emphasized": "var(--color-neutral-alpha-500)",
200
- "--color-misc-border-box": "var(--color-neutral-300)",
201
- "--color-misc-border-box-hover": "var(--color-neutral-400)",
202
- "--color-misc-border-box-down": "var(--color-neutral-500)",
203
- "--color-misc-border-sidebar": "var(--color-black-alpha-1)",
204
- "--color-misc-border-default": "var(--color-neutral-alpha-300)",
205
- "--color-misc-stack-layer-1": "var(--color-neutral-400)",
206
- "--color-misc-stack-layer-2": "var(--color-neutral-200)",
207
- "--color-misc-focus-indicator": "var(--color-accent-alpha-5)",
208
- "--color-misc-focus-indicator-subdued": "var(--color-accent-alpha-2)",
209
- "--color-misc-white-focus-indicator": "var(--color-white)",
210
- "--color-misc-hairline": "var(--color-neutral-alpha-300)",
211
-
212
- // Overlay
213
- "--color-misc-visual-hover": "var(--color-black-alpha-2)",
214
- "--color-misc-visual-down": "var(--color-black-alpha-3)",
215
-
216
- // Custom dark mode utilities (light mode defaults)
217
- "--font-thumbnail-filter": "none",
218
- "--scroll-hint-from": "var(--color-white)",
219
- "--color-checker": "var(--color-white-1)",
220
-
221
- // Pricing colors
222
- "--color-misc-ai-image": "#5383FF",
223
- "--color-misc-ai-video": "#00CD9C",
224
- "--color-misc-automated-exports": "#AA4FFF",
225
- },
226
-
227
- /**
228
- * DARK MODE
229
- */
230
-
231
- ".theme-dark": {
232
- /**
233
- * BASE
234
- */
235
-
236
- // Neutral
237
- "--color-neutral-0": "#0F1011",
238
- "--color-neutral-0-80": "rgba(15,16,17,80%)", // 0F1011, 80%
239
- "--color-neutral-50": "#181A1C", // placeholder (dark mode values are TBD in Figma)
240
- "--color-neutral-100": "#202124",
241
- "--color-neutral-200": "#2D2E33",
242
- "--color-neutral-300": "#393A40",
243
- "--color-neutral-400": "#616268",
244
- "--color-neutral-500": "#76777D",
245
- "--color-neutral-600": "#8F9096",
246
- "--color-neutral-700": "#AEAFB5",
247
- "--color-neutral-800": "#D2D3D9",
248
- "--color-neutral-900": "#FFFFFF",
249
- "--color-neutral-alpha-100": "rgba(146,147,163,13%)", // 9293A3, 13%
250
- "--color-neutral-alpha-200": "rgba(182,183,206,18%)", // B6B7CE, 18%
251
- "--color-neutral-alpha-300": "rgba(198,199,221,23%)", // C6C7DD, 23%
252
- "--color-neutral-alpha-400": "rgba(231,232,246,38%)", // E7E8F6, 38%
253
- "--color-neutral-alpha-500": "rgba(239,240,252,46%)", // EFF0FC, 46%
254
-
255
- // Sand (dark-mode value TBD — falls back to :root light value)
256
-
257
- // Accent
258
- "--color-accent-300": "#6161F2",
259
- "--color-accent-400": "#5052CB",
260
- "--color-accent-500": "#696EFF",
261
- "--color-accent-600": "#7F89FF",
262
- "--color-accent-alpha-1": "rgba(76,77,247,23%)", // 4C4DF7, 23%
263
- "--color-accent-alpha-2": "rgba(89,93,251,35%)", // 595DFB, 35%
264
- "--color-accent-alpha-3": "rgba(95,100,255,45%)", // 5F64FF, 45%
265
- "--color-accent-alpha-4": "rgba(108,113,255,76%)", // 6C71FF, 76%
266
- "--color-accent-alpha-5": "rgba(113,118,255,92%)", // 7176FF, 92%
267
-
268
- // Positive
269
- "--color-positive-400": "#01A86F",
270
- "--color-positive-500": "#00CC88",
271
- "--color-positive-600": "#57E2A2",
272
- "--color-positive-alpha-1": "rgba(0,124,65,25%)", // 007C41, 25%
273
- "--color-positive-alpha-2": "rgba(0,142,83,35%)", // 008E53, 35%
274
- "--color-positive-alpha-3": "rgba(0,149,93,45%)", // 00955D, 45%
275
-
276
- // Negative
277
- "--color-negative-400": "#CE4545",
278
- "--color-negative-500": "#FF5959",
279
- "--color-negative-600": "#FF8480",
280
- "--color-negative-alpha-1": "rgba(245,51,47,23%)", // F5332F, 23%
281
- "--color-negative-alpha-2": "rgba(250,66,64,34%)", // FA4240, 34%
282
- "--color-negative-alpha-3": "rgba(251,75,74,44%)", // FB4B4A, 44%
283
-
284
- // Magic accent
285
- "--color-magic-accent-400": "#AA4ACB",
286
- "--color-magic-accent-500": "#D460FB",
287
- "--color-magic-accent-600": "#E87FFF",
288
-
289
- // Animation Accent
290
- "--color-animation-accent-500": "#5F598A",
291
-
292
- // Camera accent
293
- "--color-camera-accent-500": "#F5B63D",
294
-
295
- /**
296
- * ALIASES
297
- */
298
-
299
- // Surface
300
- "--color-surface-default": "var(--color-neutral-0)",
301
- "--color-surface-alternate": "var(--color-neutral-100)",
302
- "--color-surface-low": "var(--color-neutral-0)",
303
- "--color-surface-high": "var(--color-neutral-100)",
304
- "--color-surface-higher": "var(--color-neutral-200)",
305
-
306
- // Background
307
- "--color-background-default": "var(--color-neutral-900)",
308
- "--color-background-hover": "var(--color-neutral-800)",
309
- "--color-background-down": "var(--color-neutral-900)",
310
- "--color-background-subdued": "var(--color-neutral-alpha-100)",
311
- "--color-background-subdued-hover": "var(--color-neutral-alpha-200)",
312
- "--color-background-subdued-down": "var(--color-neutral-alpha-300)",
313
- "--color-background-accent": "var(--color-accent-500)",
314
- "--color-background-accent-hover": "var(--color-accent-600)",
315
- "--color-background-accent-down": "var(--color-accent-400)",
316
- "--color-background-accent-subdued": "var(--color-accent-alpha-1)",
317
- "--color-background-accent-subdued-hover": "var(--color-accent-alpha-2)",
318
- "--color-background-accent-subdued-down": "var(--color-accent-alpha-3)",
319
- "--color-background-positive": "var(--color-positive-500)",
320
- "--color-background-positive-hover": "var(--color-positive-600)",
321
- "--color-background-positive-down": "var(--color-positive-400)",
322
- "--color-background-positive-subdued": "var(--color-positive-alpha-1)",
323
- "--color-background-positive-subdued-hover": "var(--color-positive-alpha-2)",
324
- "--color-background-positive-subdued-down": "var(--color-positive-alpha-3)",
325
- "--color-background-negative": "var(--color-negative-500)",
326
- "--color-background-negative-hover": "var(--color-negative-600)",
327
- "--color-background-negative-down": "var(--color-negative-400)",
328
- "--color-background-negative-subdued": "var(--color-negative-alpha-1)",
329
- "--color-background-negative-subdued-hover": "var(--color-negative-alpha-2)",
330
- "--color-background-negative-subdued-down": "var(--color-negative-alpha-3)",
331
- "--color-background-tab": "var(--color-neutral-400)",
332
- "--color-background-white": "var(--color-white)",
333
- "--color-background-white-hover": "var(--color-white-alpha-8)",
334
- "--color-background-white-down": "var(--color-white)",
335
- "--color-background-white-subdued": "var(--color-white-alpha-3)",
336
- "--color-background-white-subdued-hover": "var(--color-white-alpha-4)",
337
- "--color-background-white-subdued-down": "var(--color-white-alpha-5)",
338
- "--color-background-spotlight": "var(--color-spotlight)",
339
- "--color-background-inverted": "var(--color-neutral-0)",
340
- "--color-background-promotional": "var(--color-secondary-lilac)",
341
- "--color-background-overlay": "var(--color-black-alpha-9)",
342
- "--color-background-tooltip": "var(--color-neutral-100)",
343
-
344
- // Content
345
- "--color-content-primary": "var(--color-neutral-900)",
346
- "--color-content-subdued-primary": "var(--color-neutral-800)",
347
- "--color-content-secondary": "var(--color-neutral-700)",
348
- "--color-content-tertiary": "var(--color-neutral-600)",
349
- "--color-content-accent": "var(--color-accent-500)",
350
- "--color-content-accent-hover": "var(--color-accent-400)",
351
- "--color-content-accent-down": "var(--color-accent-600)",
352
- "--color-content-positive": "var(--color-positive-500)",
353
- "--color-content-positive-hover": "var(--color-positive-600)",
354
- "--color-content-positive-down": "var(--color-positive-400)",
355
- "--color-content-negative": "var(--color-negative-500)",
356
- "--color-content-negative-hover": "var(--color-negative-600)",
357
- "--color-content-negative-down": "var(--color-negative-400)",
358
- "--color-content-camera-accent": "var(--color-camera-accent-500)",
359
- "--color-content-white-primary": "var(--color-white)",
360
- "--color-content-white-secondary": "var(--color-white-alpha-8)",
361
- "--color-content-black-primary": "var(--color-black)",
362
- "--color-content-white-primary-inverted": "var(--color-black)",
363
- "--color-content-white-subdued-primary-inverted": "var(--color-black-alpha-8)",
364
-
365
- // Structure
366
- "--color-misc-divider": "var(--color-neutral-alpha-200)",
367
- "--color-misc-divider-ios": "var(--color-neutral-alpha-300)",
368
- "--color-misc-border": "var(--color-neutral-alpha-300)",
369
- "--color-misc-border-emphasized": "var(--color-neutral-alpha-500)",
370
- "--color-misc-border-box": "var(--color-neutral-300)",
371
- "--color-misc-border-box-hover": "var(--color-neutral-400)",
372
- "--color-misc-border-box-down": "var(--color-neutral-500)",
373
- "--color-misc-border-sidebar": "var(--color-neutral-alpha-200)",
374
- "--color-misc-border-default": "var(--color-neutral-alpha-300)",
375
- "--color-misc-stack-layer-1": "var(--color-neutral-400)",
376
- "--color-misc-stack-layer-2": "var(--color-neutral-200)",
377
- "--color-misc-focus-indicator": "var(--color-accent-alpha-5)",
378
- "--color-misc-focus-indicator-subdued": "var(--color-accent-alpha-2)",
379
- "--color-misc-white-focus-indicator": "var(--color-white)",
380
- "--color-misc-hairline": "var(--color-neutral-alpha-300)",
381
-
382
- // Overlay
383
- "--color-misc-visual-hover": "var(--color-black-alpha-2)",
384
- "--color-misc-visual-down": "var(--color-black-alpha-3)",
385
-
386
- // Custom dark mode utilities (dark mode overrides)
387
- "--font-thumbnail-filter": "invert(1)",
388
- "--scroll-hint-from": "var(--color-surface-higher)",
389
- "--color-checker": "var(--color-neutral-300)",
390
-
391
- // Pricing colors
392
- "--color-misc-ai-image": "#5383FF",
393
- "--color-misc-ai-video": "#00CD9C",
394
- "--color-misc-automated-exports": "#AA4FFF",
395
- },
396
- });
397
-
398
- // Background (gradient)
399
- const proGradient = (from, to) =>
400
- `linear-gradient(to right, var(--color-${from}), var(--color-${to}))`;
401
- addUtilities({
402
- ".bg-background-pro": {
403
- "background-image": proGradient("accent-500", "magic-accent-500"),
404
- },
405
- ".bg-background-pro-hover": {
406
- "background-image": proGradient("accent-400", "magic-accent-400"),
407
- },
408
- ".bg-background-pro-down": {
409
- "background-image": proGradient("accent-600", "magic-accent-600"),
410
- },
411
- ".theme-dark": {
412
- ".bg-background-pro": {
413
- "background-image": proGradient("accent-500", "magic-accent-500"),
414
- },
415
- ".bg-background-pro-hover": {
416
- "background-image": proGradient("accent-600", "magic-accent-600"),
417
- },
418
- ".bg-background-pro-down": {
419
- "background-image": proGradient("accent-400", "magic-accent-400"),
420
- },
421
- },
422
- });
423
-
424
- // Content (gradient)
425
- addUtilities({
426
- ".bg-content-pro": {
427
- "background-image": proGradient("accent-500", "magic-accent-500"),
428
- },
429
- ".theme-dark": {
430
- ".bg-content-pro": {
431
- "background-image": proGradient("accent-500", "magic-accent-500"),
432
- },
433
- },
434
- });
435
- });
package/plugins/content-to-edge.js DELETED
@@ -1,104 +0,0 @@
1
- // oxlint-disable-next-line typescript/no-require-imports
2
- const plugin = require("tailwindcss/plugin");
3
-
4
- module.exports = plugin(({ addUtilities }) => {
5
- /**
6
- * Content to edge
7
- * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?type=design&node-id=11366-12472&t=kZrq6Rbq3zAyydf4-4
8
- */
9
- addUtilities({
10
- // Default
11
- ...["pl", "pr", "px", "py"].reduce((acc, prefix) => {
12
- return {
13
- ...acc,
14
- [`.content-to-edge-${prefix}-150`]: {
15
- [`@apply ${prefix}-[4px]`]: {},
16
- },
17
- [`.content-to-edge-${prefix}-200`]: {
18
- [`@apply ${prefix}-[5px]`]: {},
19
- },
20
- [`.content-to-edge-${prefix}-250`]: {
21
- [`@apply ${prefix}-[6px]`]: {},
22
- },
23
- [`.content-to-edge-${prefix}-300`]: {
24
- [`@apply ${prefix}-[7px]`]: {},
25
- },
26
- [`.content-to-edge-${prefix}-350`]: {
27
- [`@apply ${prefix}-[8px]`]: {},
28
- },
29
- [`.content-to-edge-${prefix}-400`]: {
30
- [`@apply ${prefix}-[10px]`]: {},
31
- },
32
- [`.content-to-edge-${prefix}-450`]: {
33
- [`@apply ${prefix}-[11px]`]: {},
34
- },
35
- [`.content-to-edge-${prefix}-500`]: {
36
- [`@apply ${prefix}-[12px]`]: {},
37
- },
38
- [`.content-to-edge-${prefix}-550`]: {
39
- [`@apply ${prefix}-[13px]`]: {},
40
- },
41
- [`.content-to-edge-${prefix}-600`]: {
42
- [`@apply ${prefix}-[14px]`]: {},
43
- },
44
- [`.content-to-edge-${prefix}-650`]: {
45
- [`@apply ${prefix}-[16px]`]: {},
46
- },
47
- [`.content-to-edge-${prefix}-700`]: {
48
- [`@apply ${prefix}-[17px]`]: {},
49
- },
50
- [`.content-to-edge-${prefix}-750`]: {
51
- [`@apply ${prefix}-[18px]`]: {},
52
- },
53
- [`.content-to-edge-${prefix}-800`]: {
54
- [`@apply ${prefix}-[19px]`]: {},
55
- },
56
- };
57
- }, {}),
58
- // Spacious
59
- ...["pl", "pr", "px"].reduce((acc, prefix) => {
60
- return {
61
- ...acc,
62
- [`.content-to-edge-spacious-${prefix}-200`]: {
63
- [`@apply ${prefix}-[6px]`]: {},
64
- },
65
- [`.content-to-edge-spacious-${prefix}-250`]: {
66
- [`@apply ${prefix}-[8px]`]: {},
67
- },
68
- [`.content-to-edge-spacious-${prefix}-300`]: {
69
- [`@apply ${prefix}-[10px]`]: {},
70
- },
71
- [`.content-to-edge-spacious-${prefix}-350`]: {
72
- [`@apply ${prefix}-[11px]`]: {},
73
- },
74
- [`.content-to-edge-spacious-${prefix}-400`]: {
75
- [`@apply ${prefix}-[13px]`]: {},
76
- },
77
- [`.content-to-edge-spacious-${prefix}-450`]: {
78
- [`@apply ${prefix}-[14px]`]: {},
79
- },
80
- [`.content-to-edge-spacious-${prefix}-500`]: {
81
- [`@apply ${prefix}-[16px]`]: {},
82
- },
83
- [`.content-to-edge-spacious-${prefix}-550`]: {
84
- [`@apply ${prefix}-[18px]`]: {},
85
- },
86
- [`.content-to-edge-spacious-${prefix}-600`]: {
87
- [`@apply ${prefix}-[19px]`]: {},
88
- },
89
- [`.content-to-edge-spacious-${prefix}-650`]: {
90
- [`@apply ${prefix}-[21px]`]: {},
91
- },
92
- [`.content-to-edge-spacious-${prefix}-700`]: {
93
- [`@apply ${prefix}-[22px]`]: {},
94
- },
95
- [`.content-to-edge-spacious-${prefix}-750`]: {
96
- [`@apply ${prefix}-[24px]`]: {},
97
- },
98
- [`.content-to-edge-spacious-${prefix}-800`]: {
99
- [`@apply ${prefix}-[26px]`]: {},
100
- },
101
- };
102
- }, {}),
103
- });
104
- });
package/plugins/forms.js DELETED
@@ -1,21 +0,0 @@
1
- // oxlint-disable-next-line typescript/no-require-imports
2
- const plugin = require("tailwindcss/plugin");
3
-
4
- module.exports = plugin(({ addBase }) => {
5
- addBase({
6
- // this removes the up / down arrows in the number inputs
7
- 'input[type="number"]': {
8
- "-moz-appearance": "textfield",
9
- "&::-webkit-inner-spin-button, &::-webkit-outer-spin-button": {
10
- "@apply m-0 appearance-none": {},
11
- },
12
- },
13
-
14
- // this removes the cross in the search inputs
15
- 'input[type="search"]': {
16
- "&::-webkit-search-cancel-button, &::-webkit-search-decoration": {
17
- "@apply appearance-none": {},
18
- },
19
- },
20
- });
21
- });
package/plugins/icon-offset.js DELETED
@@ -1,29 +0,0 @@
1
- // oxlint-disable-next-line typescript/no-require-imports
2
- const plugin = require("tailwindcss/plugin");
3
-
4
- module.exports = plugin(({ addUtilities }) => {
5
- /**
6
- * Icon offset
7
- * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?type=design&node-id=11366-12440&t=kZrq6Rbq3zAyydf4-4
8
- */
9
- addUtilities({
10
- ".icon-offset-200": {
11
- "@apply ml-[-1.2px]": {},
12
- },
13
- ".icon-offset-300": {
14
- "@apply ml-[-1.4px]": {},
15
- },
16
- ".icon-offset-400": {
17
- "@apply ml-[-1.7px]": {},
18
- },
19
- ".icon-offset-500": {
20
- "@apply ml-[-2px]": {},
21
- },
22
- ".icon-offset-600": {
23
- "@apply ml-[-2.4px]": {},
24
- },
25
- ".icon-offset-700": {
26
- "@apply ml-[-2.9px]": {},
27
- },
28
- });
29
- });
package/plugins/icon-size.js DELETED
@@ -1,39 +0,0 @@
1
- // oxlint-disable-next-line typescript/no-require-imports
2
- const plugin = require("tailwindcss/plugin");
3
-
4
- module.exports = plugin(({ addUtilities }) => {
5
- /**
6
- * Icon size
7
- * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?type=design&node-id=11366-12716&t=TV2Og4gpqLgXZT9h-4
8
- */
9
- addUtilities({
10
- ".icon-size-200": {
11
- "@apply h-3": {},
12
- "@apply w-3": {},
13
- },
14
- ".icon-size-300": {
15
- "@apply h-[14px]": {},
16
- "@apply w-[14px]": {},
17
- },
18
- ".icon-size-400": {
19
- "@apply h-4": {},
20
- "@apply w-4": {},
21
- },
22
- ".icon-size-500": {
23
- "@apply h-5": {},
24
- "@apply w-5": {},
25
- },
26
- ".icon-size-600": {
27
- "@apply h-6": {},
28
- "@apply w-6": {},
29
- },
30
- ".icon-size-700": {
31
- "@apply h-7": {},
32
- "@apply w-7": {},
33
- },
34
- ".icon-size-800": {
35
- "@apply h-[34px]": {},
36
- "@apply w-[34px]": {},
37
- },
38
- });
39
- });