@photoroom/ui 0.1.14 → 0.1.16

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 (5) hide show
  1. package/index.mjs +72 -72
  2. package/package.json +2 -2
  3. package/plugins/colors.js +87 -80
  4. package/style.css +1 -1
  5. package/tailwind.config.js +21 -18
package/plugins/colors.js CHANGED
@@ -47,20 +47,24 @@ module.exports = plugin(({ addBase, addUtilities }) => {
47
47
  // Neutral
48
48
  "--color-neutral-0": "#FFFFFF",
49
49
  "--color-neutral-0-80": "rgba(255,255,255,80%)", // FFFFFF, 80%
50
- "--color-neutral-1": "#F2F3F7",
51
- "--color-neutral-2": "#E6E7ED",
52
- "--color-neutral-3": "#D9DAE0",
53
- "--color-neutral-4": "#C2C3C9",
54
- "--color-neutral-5": "#AEAFB5",
55
- "--color-neutral-6": "#93949A",
56
- "--color-neutral-7": "#707177",
57
- "--color-neutral-8": "#404147",
58
- "--color-neutral-9": "#000000",
59
- "--color-neutral-alpha-1": "rgba(38,55,122,6%)", // 26377A, 6%,
60
- "--color-neutral-alpha-2": "rgba(5,16,75,10%)", // 050F4B, 10%
61
- "--color-neutral-alpha-3": "rgba(2,8,48,15%)", // 020830, 15%
62
- "--color-neutral-alpha-4": "rgba(2,5,24,32%)", // 020518, 32%
63
- "--color-neutral-alpha-5": "rgba(4,6,20,43%)", // 040614, 43%
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",
64
68
 
65
69
  // Accent
66
70
  "--color-accent-300": "#6161F2",
@@ -122,18 +126,18 @@ module.exports = plugin(({ addBase, addUtilities }) => {
122
126
 
123
127
  // Surface
124
128
  "--color-surface-default": "var(--color-neutral-0)",
125
- "--color-surface-alternate": "var(--color-neutral-1)",
126
- "--color-surface-low": "var(--color-neutral-1)",
129
+ "--color-surface-alternate": "var(--color-neutral-100)",
130
+ "--color-surface-low": "var(--color-neutral-100)",
127
131
  "--color-surface-high": "var(--color-neutral-0)",
128
132
  "--color-surface-higher": "var(--color-neutral-0)",
129
133
 
130
134
  // Background
131
- "--color-background-default": "var(--color-neutral-9)",
132
- "--color-background-hover": "var(--color-neutral-8)",
133
- "--color-background-down": "var(--color-neutral-9)",
134
- "--color-background-subdued": "var(--color-neutral-alpha-1)",
135
- "--color-background-subdued-hover": "var(--color-neutral-alpha-2)",
136
- "--color-background-subdued-down": "var(--color-neutral-alpha-3)",
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)",
137
141
  "--color-background-accent": "var(--color-accent-500)",
138
142
  "--color-background-accent-hover": "var(--color-accent-400)",
139
143
  "--color-background-accent-down": "var(--color-accent-600)",
@@ -165,13 +169,13 @@ module.exports = plugin(({ addBase, addUtilities }) => {
165
169
  "--color-background-inverted": "var(--color-neutral-0)",
166
170
  "--color-background-promotional": "var(--color-secondary-lilac)",
167
171
  "--color-background-overlay": "var(--color-white-alpha-9)",
168
- "--color-background-tooltip": "var(--color-neutral-8)",
172
+ "--color-background-tooltip": "var(--color-neutral-800)",
169
173
 
170
174
  // Content
171
- "--color-content-primary": "var(--color-neutral-9)",
172
- "--color-content-subdued-primary": "var(--color-neutral-8)",
173
- "--color-content-secondary": "var(--color-neutral-7)",
174
- "--color-content-tertiary": "var(--color-neutral-6)",
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)",
175
179
  "--color-content-accent": "var(--color-accent-500)",
176
180
  "--color-content-accent-hover": "var(--color-accent-400)",
177
181
  "--color-content-accent-down": "var(--color-accent-600)",
@@ -189,21 +193,21 @@ module.exports = plugin(({ addBase, addUtilities }) => {
189
193
  "--color-content-white-subdued-primary-inverted": "var(--color-white-alpha-8)",
190
194
 
191
195
  // Structure
192
- "--color-misc-divider": "var(--color-neutral-alpha-2)",
193
- "--color-misc-divider-ios": "var(--color-neutral-alpha-3)",
194
- "--color-misc-border": "var(--color-neutral-alpha-3)",
195
- "--color-misc-border-emphasized": "var(--color-neutral-alpha-5)",
196
- "--color-misc-border-box": "var(--color-neutral-3)",
197
- "--color-misc-border-box-hover": "var(--color-neutral-4)",
198
- "--color-misc-border-box-down": "var(--color-neutral-5)",
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)",
199
203
  "--color-misc-border-sidebar": "var(--color-black-alpha-1)",
200
- "--color-misc-border-default": "var(--color-neutral-alpha-3)",
201
- "--color-misc-stack-layer-1": "var(--color-neutral-4)",
202
- "--color-misc-stack-layer-2": "var(--color-neutral-2)",
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)",
203
207
  "--color-misc-focus-indicator": "var(--color-accent-alpha-5)",
204
208
  "--color-misc-focus-indicator-subdued": "var(--color-accent-alpha-2)",
205
209
  "--color-misc-white-focus-indicator": "var(--color-white)",
206
- "--color-misc-hairline": "var(--color-neutral-alpha-3)",
210
+ "--color-misc-hairline": "var(--color-neutral-alpha-300)",
207
211
 
208
212
  // Overlay
209
213
  "--color-misc-visual-hover": "var(--color-black-alpha-2)",
@@ -232,20 +236,23 @@ module.exports = plugin(({ addBase, addUtilities }) => {
232
236
  // Neutral
233
237
  "--color-neutral-0": "#0F1011",
234
238
  "--color-neutral-0-80": "rgba(15,16,17,80%)", // 0F1011, 80%
235
- "--color-neutral-1": "#202124",
236
- "--color-neutral-2": "#2D2E33",
237
- "--color-neutral-3": "#393A40",
238
- "--color-neutral-4": "#616268",
239
- "--color-neutral-5": "#76777D",
240
- "--color-neutral-6": "#8F9096",
241
- "--color-neutral-7": "#AEAFB5",
242
- "--color-neutral-8": "#D2D3D9",
243
- "--color-neutral-9": "#FFFFFF",
244
- "--color-neutral-alpha-1": "rgba(146,147,163,13%)", // 9293A3, 13%
245
- "--color-neutral-alpha-2": "rgba(182,183,206,18%)", // B6B7CE, 18%
246
- "--color-neutral-alpha-3": "rgba(198,199,221,23%)", // C6C7DD, 23%
247
- "--color-neutral-alpha-4": "rgba(231,232,246,38%)", // E7E8F6, 38%
248
- "--color-neutral-alpha-5": "rgba(239,240,252,46%)", // EFF0FC, 46%
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)
249
256
 
250
257
  // Accent
251
258
  "--color-accent-300": "#6161F2",
@@ -291,18 +298,18 @@ module.exports = plugin(({ addBase, addUtilities }) => {
291
298
 
292
299
  // Surface
293
300
  "--color-surface-default": "var(--color-neutral-0)",
294
- "--color-surface-alternate": "var(--color-neutral-1)",
301
+ "--color-surface-alternate": "var(--color-neutral-100)",
295
302
  "--color-surface-low": "var(--color-neutral-0)",
296
- "--color-surface-high": "var(--color-neutral-1)",
297
- "--color-surface-higher": "var(--color-neutral-2)",
303
+ "--color-surface-high": "var(--color-neutral-100)",
304
+ "--color-surface-higher": "var(--color-neutral-200)",
298
305
 
299
306
  // Background
300
- "--color-background-default": "var(--color-neutral-9)",
301
- "--color-background-hover": "var(--color-neutral-8)",
302
- "--color-background-down": "var(--color-neutral-9)",
303
- "--color-background-subdued": "var(--color-neutral-alpha-1)",
304
- "--color-background-subdued-hover": "var(--color-neutral-alpha-2)",
305
- "--color-background-subdued-down": "var(--color-neutral-alpha-3)",
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)",
306
313
  "--color-background-accent": "var(--color-accent-500)",
307
314
  "--color-background-accent-hover": "var(--color-accent-600)",
308
315
  "--color-background-accent-down": "var(--color-accent-400)",
@@ -321,7 +328,7 @@ module.exports = plugin(({ addBase, addUtilities }) => {
321
328
  "--color-background-negative-subdued": "var(--color-negative-alpha-1)",
322
329
  "--color-background-negative-subdued-hover": "var(--color-negative-alpha-2)",
323
330
  "--color-background-negative-subdued-down": "var(--color-negative-alpha-3)",
324
- "--color-background-tab": "var(--color-neutral-4)",
331
+ "--color-background-tab": "var(--color-neutral-400)",
325
332
  "--color-background-white": "var(--color-white)",
326
333
  "--color-background-white-hover": "var(--color-white-alpha-8)",
327
334
  "--color-background-white-down": "var(--color-white)",
@@ -332,13 +339,13 @@ module.exports = plugin(({ addBase, addUtilities }) => {
332
339
  "--color-background-inverted": "var(--color-neutral-0)",
333
340
  "--color-background-promotional": "var(--color-secondary-lilac)",
334
341
  "--color-background-overlay": "var(--color-black-alpha-9)",
335
- "--color-background-tooltip": "var(--color-neutral-1)",
342
+ "--color-background-tooltip": "var(--color-neutral-100)",
336
343
 
337
344
  // Content
338
- "--color-content-primary": "var(--color-neutral-9)",
339
- "--color-content-subdued-primary": "var(--color-neutral-8)",
340
- "--color-content-secondary": "var(--color-neutral-7)",
341
- "--color-content-tertiary": "var(--color-neutral-6)",
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)",
342
349
  "--color-content-accent": "var(--color-accent-500)",
343
350
  "--color-content-accent-hover": "var(--color-accent-400)",
344
351
  "--color-content-accent-down": "var(--color-accent-600)",
@@ -356,21 +363,21 @@ module.exports = plugin(({ addBase, addUtilities }) => {
356
363
  "--color-content-white-subdued-primary-inverted": "var(--color-black-alpha-8)",
357
364
 
358
365
  // Structure
359
- "--color-misc-divider": "var(--color-neutral-alpha-2)",
360
- "--color-misc-divider-ios": "var(--color-neutral-alpha-3)",
361
- "--color-misc-border": "var(--color-neutral-alpha-3)",
362
- "--color-misc-border-emphasized": "var(--color-neutral-alpha-5)",
363
- "--color-misc-border-box": "var(--color-neutral-3)",
364
- "--color-misc-border-box-hover": "var(--color-neutral-4)",
365
- "--color-misc-border-box-down": "var(--color-neutral-5)",
366
- "--color-misc-border-sidebar": "var(--color-neutral-alpha-2)",
367
- "--color-misc-border-default": "var(--color-neutral-alpha-3)",
368
- "--color-misc-stack-layer-1": "var(--color-neutral-4)",
369
- "--color-misc-stack-layer-2": "var(--color-neutral-2)",
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)",
370
377
  "--color-misc-focus-indicator": "var(--color-accent-alpha-5)",
371
378
  "--color-misc-focus-indicator-subdued": "var(--color-accent-alpha-2)",
372
379
  "--color-misc-white-focus-indicator": "var(--color-white)",
373
- "--color-misc-hairline": "var(--color-neutral-alpha-3)",
380
+ "--color-misc-hairline": "var(--color-neutral-alpha-300)",
374
381
 
375
382
  // Overlay
376
383
  "--color-misc-visual-hover": "var(--color-black-alpha-2)",
@@ -379,7 +386,7 @@ module.exports = plugin(({ addBase, addUtilities }) => {
379
386
  // Custom dark mode utilities (dark mode overrides)
380
387
  "--font-thumbnail-filter": "invert(1)",
381
388
  "--scroll-hint-from": "var(--color-surface-higher)",
382
- "--color-checker": "var(--color-neutral-3)",
389
+ "--color-checker": "var(--color-neutral-300)",
383
390
 
384
391
  // Pricing colors
385
392
  "--color-misc-ai-image": "#5383FF",