@photoroom/ui 0.1.543 → 0.1.544

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/colors.css +64 -62
  2. package/index.css +1 -1
  3. package/index.mjs +40 -40
  4. package/package.json +1 -1
  5. package/theme.css +25 -23
package/colors.css CHANGED
@@ -85,27 +85,27 @@
85
85
 
86
86
  /* Static */
87
87
  --color-black: #000000;
88
- --color-black-alpha-1: rgba(0, 0, 0, 5%);
89
- --color-black-alpha-2: rgba(0, 0, 0, 10%);
90
- --color-black-alpha-3: rgba(0, 0, 0, 15%);
91
- --color-black-alpha-4: rgba(0, 0, 0, 24%);
92
- --color-black-alpha-5: rgba(0, 0, 0, 32%);
93
- --color-black-alpha-6: rgba(0, 0, 0, 42%);
94
- --color-black-alpha-7: rgba(0, 0, 0, 56%);
95
- --color-black-alpha-8: rgba(0, 0, 0, 75%);
96
- --color-black-alpha-9: rgba(0, 0, 0, 85%);
88
+ --color-black-alpha-100: rgba(0, 0, 0, 5%);
89
+ --color-black-alpha-200: rgba(0, 0, 0, 10%);
90
+ --color-black-alpha-300: rgba(0, 0, 0, 15%);
91
+ --color-black-alpha-400: rgba(0, 0, 0, 24%);
92
+ --color-black-alpha-500: rgba(0, 0, 0, 32%);
93
+ --color-black-alpha-600: rgba(0, 0, 0, 42%);
94
+ --color-black-alpha-700: rgba(0, 0, 0, 56%);
95
+ --color-black-alpha-800: rgba(0, 0, 0, 75%);
96
+ --color-black-alpha-900: rgba(0, 0, 0, 85%);
97
97
  --color-white: #ffffff;
98
98
  --color-white-1: #f2f3f7;
99
99
  --color-white-2: #e6e7ed;
100
- --color-white-alpha-1: rgba(255, 255, 255, 7%);
101
- --color-white-alpha-2: rgba(255, 255, 255, 12%);
102
- --color-white-alpha-3: rgba(255, 255, 255, 18%);
103
- --color-white-alpha-4: rgba(255, 255, 255, 41%);
104
- --color-white-alpha-5: rgba(255, 255, 255, 49%);
105
- --color-white-alpha-6: rgba(255, 255, 255, 60%);
106
- --color-white-alpha-7: rgba(255, 255, 255, 72%);
107
- --color-white-alpha-8: rgba(255, 255, 255, 81%);
108
- --color-white-alpha-9: rgba(255, 255, 255, 85%);
100
+ --color-white-alpha-100: rgba(255, 255, 255, 7%);
101
+ --color-white-alpha-200: rgba(255, 255, 255, 12%);
102
+ --color-white-alpha-300: rgba(255, 255, 255, 18%);
103
+ --color-white-alpha-400: rgba(255, 255, 255, 41%);
104
+ --color-white-alpha-500: rgba(255, 255, 255, 49%);
105
+ --color-white-alpha-600: rgba(255, 255, 255, 60%);
106
+ --color-white-alpha-700: rgba(255, 255, 255, 72%);
107
+ --color-white-alpha-800: rgba(255, 255, 255, 81%);
108
+ --color-white-alpha-900: rgba(255, 255, 255, 85%);
109
109
 
110
110
  /* Neutral */
111
111
  --color-neutral-0: #ffffff;
@@ -125,6 +125,7 @@
125
125
  --color-neutral-alpha-300: rgba(0, 0, 0, 15%);
126
126
  --color-neutral-alpha-400: rgba(0, 0, 0, 29%);
127
127
  --color-neutral-alpha-500: rgba(0, 0, 0, 37%);
128
+ --color-neutral-alpha-600: rgba(0, 0, 0, 47%);
128
129
 
129
130
  /* Sand */
130
131
  --color-sand-50: #f5f4f0;
@@ -144,17 +145,17 @@
144
145
  --color-positive-400: #3dba83;
145
146
  --color-positive-500: #00a66f;
146
147
  --color-positive-600: #018255;
147
- --color-positive-alpha-1: rgba(15, 175, 125, 10%);
148
- --color-positive-alpha-2: rgba(8, 166, 113, 19%);
149
- --color-positive-alpha-3: rgba(3, 165, 114, 29%);
148
+ --color-positive-alpha-100: rgba(15, 175, 125, 10%);
149
+ --color-positive-alpha-200: rgba(8, 166, 113, 19%);
150
+ --color-positive-alpha-300: rgba(3, 165, 114, 29%);
150
151
 
151
152
  /* Negative */
152
153
  --color-negative-400: #ff6b5e;
153
154
  --color-negative-500: #ff3333;
154
155
  --color-negative-600: #c92224;
155
- --color-negative-alpha-1: rgba(255, 105, 105, 10%);
156
- --color-negative-alpha-2: rgba(255, 24, 24, 13%);
157
- --color-negative-alpha-3: rgba(255, 74, 74, 26%);
156
+ --color-negative-alpha-100: rgba(255, 105, 105, 10%);
157
+ --color-negative-alpha-200: rgba(255, 24, 24, 13%);
158
+ --color-negative-alpha-300: rgba(255, 74, 74, 26%);
158
159
 
159
160
  /* Magic accent */
160
161
  --color-magic-accent-400: #7d63ff;
@@ -234,28 +235,28 @@
234
235
  --color-background-positive: var(--color-positive-500);
235
236
  --color-background-positive-hover: var(--color-positive-400);
236
237
  --color-background-positive-down: var(--color-positive-600);
237
- --color-background-positive-subdued: var(--color-positive-alpha-1);
238
- --color-background-positive-subdued-hover: var(--color-positive-alpha-2);
239
- --color-background-positive-subdued-down: var(--color-positive-alpha-3);
238
+ --color-background-positive-subdued: var(--color-positive-alpha-100);
239
+ --color-background-positive-subdued-hover: var(--color-positive-alpha-200);
240
+ --color-background-positive-subdued-down: var(--color-positive-alpha-300);
240
241
  --color-background-negative: var(--color-negative-500);
241
242
  --color-background-negative-hover: var(--color-negative-400);
242
243
  --color-background-negative-down: var(--color-negative-600);
243
- --color-background-negative-subdued: var(--color-negative-alpha-1);
244
- --color-background-negative-subdued-hover: var(--color-negative-alpha-2);
245
- --color-background-negative-subdued-down: var(--color-negative-alpha-3);
244
+ --color-background-negative-subdued: var(--color-negative-alpha-100);
245
+ --color-background-negative-subdued-hover: var(--color-negative-alpha-200);
246
+ --color-background-negative-subdued-down: var(--color-negative-alpha-300);
246
247
  --color-background-tab: var(--color-neutral-0);
247
248
  --color-background-bar: var(--color-neutral-0-80);
248
249
  --color-background-white: var(--color-white);
249
250
  --color-background-white-hover: var(--color-white-1);
250
251
  --color-background-white-down: var(--color-white-2);
251
- --color-background-white-subdued: var(--color-white-alpha-3);
252
- --color-background-white-subdued-hover: var(--color-white-alpha-4);
253
- --color-background-white-subdued-down: var(--color-white-alpha-5);
252
+ --color-background-white-subdued: var(--color-white-alpha-300);
253
+ --color-background-white-subdued-hover: var(--color-white-alpha-400);
254
+ --color-background-white-subdued-down: var(--color-white-alpha-500);
254
255
  --color-background-spotlight: var(--color-spotlight);
255
256
  --color-background-spotlight-down: var(--color-spotlight-down);
256
257
  --color-background-inverted: var(--color-neutral-0);
257
258
  --color-background-promotional: var(--color-secondary-lilac);
258
- --color-background-overlay: var(--color-white-alpha-9);
259
+ --color-background-overlay: var(--color-white-alpha-900);
259
260
  --color-background-tooltip: var(--color-neutral-800);
260
261
 
261
262
  /* Content */
@@ -274,11 +275,11 @@
274
275
  --color-content-negative-down: var(--color-negative-600);
275
276
  --color-content-camera-accent: var(--color-camera-accent-500);
276
277
  --color-content-white-primary: var(--color-white);
277
- --color-content-white-secondary: var(--color-white-alpha-8);
278
+ --color-content-white-secondary: var(--color-white-alpha-800);
278
279
  --color-content-black-primary: var(--color-black);
279
- --color-content-black-secondary: var(--color-black-alpha-8);
280
+ --color-content-black-secondary: var(--color-black-alpha-800);
280
281
  --color-content-white-primary-inverted: var(--color-white);
281
- --color-content-white-subdued-primary-inverted: var(--color-white-alpha-8);
282
+ --color-content-white-subdued-primary-inverted: var(--color-white-alpha-800);
282
283
 
283
284
  /* Structure */
284
285
  --color-misc-divider: var(--color-neutral-alpha-200);
@@ -287,7 +288,7 @@
287
288
  --color-misc-border-hover: var(--color-neutral-alpha-400);
288
289
  --color-misc-border-down: var(--color-neutral-alpha-500);
289
290
  --color-misc-border-emphasized: var(--color-neutral-alpha-500);
290
- --color-misc-border-sidebar: var(--color-black-alpha-1);
291
+ --color-misc-border-sidebar: var(--color-black-alpha-100);
291
292
  --color-misc-border-default: var(--color-neutral-alpha-300);
292
293
  --color-misc-stack-layer-1: var(--color-neutral-400);
293
294
  --color-misc-stack-layer-2: var(--color-neutral-200);
@@ -298,8 +299,8 @@
298
299
  --color-misc-hairline-emphasized: var(--color-neutral-alpha-400);
299
300
 
300
301
  /* Overlay */
301
- --color-misc-visual-hover: var(--color-black-alpha-2);
302
- --color-misc-visual-down: var(--color-black-alpha-3);
302
+ --color-misc-visual-hover: var(--color-black-alpha-200);
303
+ --color-misc-visual-down: var(--color-black-alpha-300);
303
304
 
304
305
  /* Custom (light mode defaults) */
305
306
  --font-thumbnail-filter: none;
@@ -350,6 +351,7 @@
350
351
  --color-neutral-alpha-300: rgba(198, 199, 221, 23%);
351
352
  --color-neutral-alpha-400: rgba(231, 232, 246, 38%);
352
353
  --color-neutral-alpha-500: rgba(239, 240, 252, 46%);
354
+ --color-neutral-alpha-600: rgba(245, 246, 255, 55%);
353
355
 
354
356
  /* Sand — dark-mode value TBD (falls back to :root light value) */
355
357
 
@@ -368,17 +370,17 @@
368
370
  --color-positive-400: #01a86f;
369
371
  --color-positive-500: #00cc88;
370
372
  --color-positive-600: #57e2a2;
371
- --color-positive-alpha-1: rgba(0, 124, 65, 25%);
372
- --color-positive-alpha-2: rgba(0, 142, 83, 35%);
373
- --color-positive-alpha-3: rgba(0, 149, 93, 45%);
373
+ --color-positive-alpha-100: rgba(0, 124, 65, 25%);
374
+ --color-positive-alpha-200: rgba(0, 142, 83, 35%);
375
+ --color-positive-alpha-300: rgba(0, 149, 93, 45%);
374
376
 
375
377
  /* Negative */
376
378
  --color-negative-400: #ce4545;
377
379
  --color-negative-500: #ff5959;
378
380
  --color-negative-600: #ff8480;
379
- --color-negative-alpha-1: rgba(245, 51, 47, 23%);
380
- --color-negative-alpha-2: rgba(250, 66, 64, 34%);
381
- --color-negative-alpha-3: rgba(251, 75, 74, 44%);
381
+ --color-negative-alpha-100: rgba(245, 51, 47, 23%);
382
+ --color-negative-alpha-200: rgba(250, 66, 64, 34%);
383
+ --color-negative-alpha-300: rgba(251, 75, 74, 44%);
382
384
 
383
385
  /* Magic accent */
384
386
  --color-magic-accent-400: #aa4acb;
@@ -434,26 +436,26 @@
434
436
  --color-background-positive: var(--color-positive-500);
435
437
  --color-background-positive-hover: var(--color-positive-600);
436
438
  --color-background-positive-down: var(--color-positive-400);
437
- --color-background-positive-subdued: var(--color-positive-alpha-1);
438
- --color-background-positive-subdued-hover: var(--color-positive-alpha-2);
439
- --color-background-positive-subdued-down: var(--color-positive-alpha-3);
439
+ --color-background-positive-subdued: var(--color-positive-alpha-100);
440
+ --color-background-positive-subdued-hover: var(--color-positive-alpha-200);
441
+ --color-background-positive-subdued-down: var(--color-positive-alpha-300);
440
442
  --color-background-negative: var(--color-negative-500);
441
443
  --color-background-negative-hover: var(--color-negative-600);
442
444
  --color-background-negative-down: var(--color-negative-400);
443
- --color-background-negative-subdued: var(--color-negative-alpha-1);
444
- --color-background-negative-subdued-hover: var(--color-negative-alpha-2);
445
- --color-background-negative-subdued-down: var(--color-negative-alpha-3);
445
+ --color-background-negative-subdued: var(--color-negative-alpha-100);
446
+ --color-background-negative-subdued-hover: var(--color-negative-alpha-200);
447
+ --color-background-negative-subdued-down: var(--color-negative-alpha-300);
446
448
  --color-background-tab: var(--color-neutral-400);
447
449
  --color-background-white: var(--color-white);
448
- --color-background-white-hover: var(--color-white-alpha-8);
450
+ --color-background-white-hover: var(--color-white-alpha-800);
449
451
  --color-background-white-down: var(--color-white);
450
- --color-background-white-subdued: var(--color-white-alpha-3);
451
- --color-background-white-subdued-hover: var(--color-white-alpha-4);
452
- --color-background-white-subdued-down: var(--color-white-alpha-5);
452
+ --color-background-white-subdued: var(--color-white-alpha-300);
453
+ --color-background-white-subdued-hover: var(--color-white-alpha-400);
454
+ --color-background-white-subdued-down: var(--color-white-alpha-500);
453
455
  --color-background-spotlight: var(--color-spotlight);
454
456
  --color-background-inverted: var(--color-neutral-0);
455
457
  --color-background-promotional: var(--color-secondary-lilac);
456
- --color-background-overlay: var(--color-black-alpha-9);
458
+ --color-background-overlay: var(--color-black-alpha-900);
457
459
  --color-background-tooltip: var(--color-neutral-100);
458
460
 
459
461
  /* Content */
@@ -472,11 +474,11 @@
472
474
  --color-content-negative-down: var(--color-negative-400);
473
475
  --color-content-camera-accent: var(--color-camera-accent-500);
474
476
  --color-content-white-primary: var(--color-white);
475
- --color-content-white-secondary: var(--color-white-alpha-8);
477
+ --color-content-white-secondary: var(--color-white-alpha-800);
476
478
  --color-content-black-primary: var(--color-black);
477
- --color-content-black-secondary: var(--color-black-alpha-8);
479
+ --color-content-black-secondary: var(--color-black-alpha-800);
478
480
  --color-content-white-primary-inverted: var(--color-black);
479
- --color-content-white-subdued-primary-inverted: var(--color-black-alpha-8);
481
+ --color-content-white-subdued-primary-inverted: var(--color-black-alpha-800);
480
482
 
481
483
  /* Structure */
482
484
  --color-misc-divider: var(--color-neutral-alpha-200);
@@ -496,8 +498,8 @@
496
498
  --color-misc-hairline-emphasized: var(--color-neutral-alpha-400);
497
499
 
498
500
  /* Overlay */
499
- --color-misc-visual-hover: var(--color-black-alpha-2);
500
- --color-misc-visual-down: var(--color-black-alpha-3);
501
+ --color-misc-visual-hover: var(--color-black-alpha-200);
502
+ --color-misc-visual-down: var(--color-black-alpha-300);
501
503
 
502
504
  /* Custom (dark mode overrides) */
503
505
  --font-thumbnail-filter: invert(1);