@cdx-ui/styles 0.0.1-beta.25 → 0.0.1-beta.26

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/css/theme.css +25 -13
  2. package/css/vanilla.css +17 -9
  3. package/package.json +2 -2
  4. package/tokens/presets/.manifest.json +1 -1
  5. package/tokens/presets/poise.json +41 -9
package/css/theme.css CHANGED
@@ -353,7 +353,7 @@
353
353
  --color-chart-simple-secondary: var(--color-brand-950);
354
354
  --color-content-action: var(--color-brand-700);
355
355
  --color-content-action-on-strong: var(--color-white);
356
- --color-content-action-on-subtle: var(--color-brand-950);
356
+ --color-content-action-on-subtle: var(--color-brand-900);
357
357
  --color-content-brand: var(--color-brand-700);
358
358
  --color-content-danger: var(--color-red-700);
359
359
  --color-content-danger-on-strong: var(--color-white);
@@ -387,18 +387,22 @@
387
387
  --color-stroke-warning: var(--color-amber-700);
388
388
  --color-surface-accent-core: var(--color-accent-input);
389
389
  --color-surface-accent-strong: var(--color-accent-700);
390
+ --color-surface-accent-subtle: var(--color-accent-200);
391
+ --color-surface-accent-tint: var(--color-accent-100);
390
392
  --color-surface-action-strong: var(--color-brand-700);
391
393
  --color-surface-action-strong-active: var(--color-brand-900);
392
394
  --color-surface-action-strong-hover: var(--color-brand-800);
393
- --color-surface-action-subtle: var(--color-brand-300);
394
- --color-surface-action-subtle-active: var(--color-brand-500);
395
- --color-surface-action-subtle-hover: var(--color-brand-400);
395
+ --color-surface-action-subtle: var(--color-brand-200);
396
+ --color-surface-action-subtle-active: var(--color-brand-400);
397
+ --color-surface-action-subtle-hover: var(--color-brand-300);
396
398
  --color-surface-action-tint: var(--color-brand-100);
397
399
  --color-surface-action-tint-active: var(--color-brand-300);
398
400
  --color-surface-action-tint-hover: var(--color-brand-200);
399
401
  --color-surface-background: var(--color-base-100);
400
402
  --color-surface-brand-core: var(--color-brand-input);
401
403
  --color-surface-brand-strong: var(--color-brand-700);
404
+ --color-surface-brand-subtle: var(--color-brand-200);
405
+ --color-surface-brand-tint: var(--color-brand-100);
402
406
  --color-surface-danger-strong: var(--color-red-700);
403
407
  --color-surface-danger-strong-active: var(--color-red-900);
404
408
  --color-surface-danger-strong-hover: var(--color-red-800);
@@ -473,7 +477,7 @@
473
477
  --color-chart-simple-secondary: var(--color-brand-950);
474
478
  --color-content-action: var(--color-brand-700);
475
479
  --color-content-action-on-strong: var(--color-white);
476
- --color-content-action-on-subtle: var(--color-brand-950);
480
+ --color-content-action-on-subtle: var(--color-brand-900);
477
481
  --color-content-brand: var(--color-brand-700);
478
482
  --color-content-danger: var(--color-red-700);
479
483
  --color-content-danger-on-strong: var(--color-white);
@@ -507,18 +511,22 @@
507
511
  --color-stroke-warning: var(--color-amber-700);
508
512
  --color-surface-accent-core: var(--color-accent-input);
509
513
  --color-surface-accent-strong: var(--color-accent-700);
514
+ --color-surface-accent-subtle: var(--color-accent-200);
515
+ --color-surface-accent-tint: var(--color-accent-100);
510
516
  --color-surface-action-strong: var(--color-brand-700);
511
517
  --color-surface-action-strong-active: var(--color-brand-900);
512
518
  --color-surface-action-strong-hover: var(--color-brand-800);
513
- --color-surface-action-subtle: var(--color-brand-300);
514
- --color-surface-action-subtle-active: var(--color-brand-500);
515
- --color-surface-action-subtle-hover: var(--color-brand-400);
519
+ --color-surface-action-subtle: var(--color-brand-200);
520
+ --color-surface-action-subtle-active: var(--color-brand-400);
521
+ --color-surface-action-subtle-hover: var(--color-brand-300);
516
522
  --color-surface-action-tint: var(--color-brand-100);
517
523
  --color-surface-action-tint-active: var(--color-brand-300);
518
524
  --color-surface-action-tint-hover: var(--color-brand-200);
519
525
  --color-surface-background: var(--color-base-100);
520
526
  --color-surface-brand-core: var(--color-brand-input);
521
527
  --color-surface-brand-strong: var(--color-brand-700);
528
+ --color-surface-brand-subtle: var(--color-brand-200);
529
+ --color-surface-brand-tint: var(--color-brand-100);
522
530
  --color-surface-danger-strong: var(--color-red-700);
523
531
  --color-surface-danger-strong-active: var(--color-red-900);
524
532
  --color-surface-danger-strong-hover: var(--color-red-800);
@@ -627,19 +635,23 @@
627
635
  --color-stroke-success: var(--color-green-200);
628
636
  --color-stroke-warning: var(--color-amber-300);
629
637
  --color-surface-accent-core: var(--color-accent-input);
630
- --color-surface-accent-strong: var(--color-accent-400);
638
+ --color-surface-accent-strong: var(--color-accent-300);
639
+ --color-surface-accent-subtle: var(--color-accent-700);
640
+ --color-surface-accent-tint: var(--color-accent-900);
631
641
  --color-surface-action-strong: var(--color-brand-300);
632
642
  --color-surface-action-strong-active: var(--color-brand-100);
633
643
  --color-surface-action-strong-hover: var(--color-brand-200);
634
- --color-surface-action-subtle: var(--color-brand-700);
635
- --color-surface-action-subtle-active: var(--color-brand-500);
636
- --color-surface-action-subtle-hover: var(--color-brand-600);
644
+ --color-surface-action-subtle: var(--color-brand-800);
645
+ --color-surface-action-subtle-active: var(--color-brand-600);
646
+ --color-surface-action-subtle-hover: var(--color-brand-700);
637
647
  --color-surface-action-tint: var(--color-brand-900);
638
648
  --color-surface-action-tint-active: var(--color-brand-700);
639
649
  --color-surface-action-tint-hover: var(--color-brand-800);
640
650
  --color-surface-background: var(--color-base-900);
641
651
  --color-surface-brand-core: var(--color-brand-input);
642
- --color-surface-brand-strong: var(--color-brand-400);
652
+ --color-surface-brand-strong: var(--color-brand-300);
653
+ --color-surface-brand-subtle: var(--color-brand-700);
654
+ --color-surface-brand-tint: var(--color-brand-900);
643
655
  --color-surface-danger-strong: var(--color-red-200);
644
656
  --color-surface-danger-strong-active: var(--color-red-50);
645
657
  --color-surface-danger-strong-hover: var(--color-red-100);
package/css/vanilla.css CHANGED
@@ -376,7 +376,7 @@
376
376
  --color-chart-simple-secondary: var(--color-brand-950);
377
377
  --color-content-action: var(--color-brand-700);
378
378
  --color-content-action-on-strong: var(--color-white);
379
- --color-content-action-on-subtle: var(--color-brand-950);
379
+ --color-content-action-on-subtle: var(--color-brand-900);
380
380
  --color-content-brand: var(--color-brand-700);
381
381
  --color-content-danger: var(--color-red-700);
382
382
  --color-content-danger-on-strong: var(--color-white);
@@ -410,18 +410,22 @@
410
410
  --color-stroke-warning: var(--color-amber-700);
411
411
  --color-surface-accent-core: var(--color-accent-input);
412
412
  --color-surface-accent-strong: var(--color-accent-700);
413
+ --color-surface-accent-subtle: var(--color-accent-200);
414
+ --color-surface-accent-tint: var(--color-accent-100);
413
415
  --color-surface-action-strong: var(--color-brand-700);
414
416
  --color-surface-action-strong-active: var(--color-brand-900);
415
417
  --color-surface-action-strong-hover: var(--color-brand-800);
416
- --color-surface-action-subtle: var(--color-brand-300);
417
- --color-surface-action-subtle-active: var(--color-brand-500);
418
- --color-surface-action-subtle-hover: var(--color-brand-400);
418
+ --color-surface-action-subtle: var(--color-brand-200);
419
+ --color-surface-action-subtle-active: var(--color-brand-400);
420
+ --color-surface-action-subtle-hover: var(--color-brand-300);
419
421
  --color-surface-action-tint: var(--color-brand-100);
420
422
  --color-surface-action-tint-active: var(--color-brand-300);
421
423
  --color-surface-action-tint-hover: var(--color-brand-200);
422
424
  --color-surface-background: var(--color-base-100);
423
425
  --color-surface-brand-core: var(--color-brand-input);
424
426
  --color-surface-brand-strong: var(--color-brand-700);
427
+ --color-surface-brand-subtle: var(--color-brand-200);
428
+ --color-surface-brand-tint: var(--color-brand-100);
425
429
  --color-surface-danger-strong: var(--color-red-700);
426
430
  --color-surface-danger-strong-active: var(--color-red-900);
427
431
  --color-surface-danger-strong-hover: var(--color-red-800);
@@ -532,19 +536,23 @@
532
536
  --color-stroke-success: var(--color-green-200);
533
537
  --color-stroke-warning: var(--color-amber-300);
534
538
  --color-surface-accent-core: var(--color-accent-input);
535
- --color-surface-accent-strong: var(--color-accent-400);
539
+ --color-surface-accent-strong: var(--color-accent-300);
540
+ --color-surface-accent-subtle: var(--color-accent-700);
541
+ --color-surface-accent-tint: var(--color-accent-900);
536
542
  --color-surface-action-strong: var(--color-brand-300);
537
543
  --color-surface-action-strong-active: var(--color-brand-100);
538
544
  --color-surface-action-strong-hover: var(--color-brand-200);
539
- --color-surface-action-subtle: var(--color-brand-700);
540
- --color-surface-action-subtle-active: var(--color-brand-500);
541
- --color-surface-action-subtle-hover: var(--color-brand-600);
545
+ --color-surface-action-subtle: var(--color-brand-800);
546
+ --color-surface-action-subtle-active: var(--color-brand-600);
547
+ --color-surface-action-subtle-hover: var(--color-brand-700);
542
548
  --color-surface-action-tint: var(--color-brand-900);
543
549
  --color-surface-action-tint-active: var(--color-brand-700);
544
550
  --color-surface-action-tint-hover: var(--color-brand-800);
545
551
  --color-surface-background: var(--color-base-900);
546
552
  --color-surface-brand-core: var(--color-brand-input);
547
- --color-surface-brand-strong: var(--color-brand-400);
553
+ --color-surface-brand-strong: var(--color-brand-300);
554
+ --color-surface-brand-subtle: var(--color-brand-700);
555
+ --color-surface-brand-tint: var(--color-brand-900);
548
556
  --color-surface-danger-strong: var(--color-red-200);
549
557
  --color-surface-danger-strong-active: var(--color-red-50);
550
558
  --color-surface-danger-strong-hover: var(--color-red-100);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdx-ui/styles",
3
- "version": "0.0.1-beta.25",
3
+ "version": "0.0.1-beta.26",
4
4
  "main": "lib/commonjs/index.js",
5
5
  "module": "lib/module/index.js",
6
6
  "react-native": "src/index.ts",
@@ -53,7 +53,7 @@
53
53
  "@expo-google-fonts/manrope": "0.4.2",
54
54
  "@expo-google-fonts/outfit": "0.4.3",
55
55
  "@expo-google-fonts/public-sans": "0.4.2",
56
- "@cdx-ui/utils": "0.0.1-beta.25"
56
+ "@cdx-ui/utils": "0.0.1-beta.26"
57
57
  },
58
58
  "peerDependencies": {
59
59
  "react": "^18.2.0 || ^19.0.0",
package/tokens/presets/.manifest.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "poise.json": "74dcc3c9f312d967c63b58d25a868287a1f080f16e314be9e32d817587d6f1e8",
2
+ "poise.json": "99bc7ec5b0c376840338cacdb6ccc98f63973e2e5518c09b636247f2eb5fb53e",
3
3
  "prestige.json": "7828f391d212be0726839297dfa6638b575187faa6fc9eecd7d64219eaadf403",
4
4
  "pulse.json": "1cbc3480aae055ae03360b243664e9a95e2eca96be3126334ea062d0d38d6033"
5
5
  }
package/tokens/presets/poise.json CHANGED
@@ -2344,7 +2344,7 @@
2344
2344
  },
2345
2345
  "action-on-subtle": {
2346
2346
  "$type": "color",
2347
- "$value": "{color.brand.950}"
2347
+ "$value": "{color.brand.900}"
2348
2348
  },
2349
2349
  "brand": {
2350
2350
  "$type": "color",
@@ -2482,6 +2482,14 @@
2482
2482
  "strong": {
2483
2483
  "$type": "color",
2484
2484
  "$value": "{color.accent.700}"
2485
+ },
2486
+ "subtle": {
2487
+ "$type": "color",
2488
+ "$value": "{color.accent.200}"
2489
+ },
2490
+ "tint": {
2491
+ "$type": "color",
2492
+ "$value": "{color.accent.100}"
2485
2493
  }
2486
2494
  },
2487
2495
  "action": {
@@ -2499,15 +2507,15 @@
2499
2507
  },
2500
2508
  "subtle": {
2501
2509
  "$type": "color",
2502
- "$value": "{color.brand.300}"
2510
+ "$value": "{color.brand.200}"
2503
2511
  },
2504
2512
  "subtle-active": {
2505
2513
  "$type": "color",
2506
- "$value": "{color.brand.500}"
2514
+ "$value": "{color.brand.400}"
2507
2515
  },
2508
2516
  "subtle-hover": {
2509
2517
  "$type": "color",
2510
- "$value": "{color.brand.400}"
2518
+ "$value": "{color.brand.300}"
2511
2519
  },
2512
2520
  "tint": {
2513
2521
  "$type": "color",
@@ -2534,6 +2542,14 @@
2534
2542
  "strong": {
2535
2543
  "$type": "color",
2536
2544
  "$value": "{color.brand.700}"
2545
+ },
2546
+ "subtle": {
2547
+ "$type": "color",
2548
+ "$value": "{color.brand.200}"
2549
+ },
2550
+ "tint": {
2551
+ "$type": "color",
2552
+ "$value": "{color.brand.100}"
2537
2553
  }
2538
2554
  },
2539
2555
  "danger": {
@@ -2999,7 +3015,15 @@
2999
3015
  },
3000
3016
  "strong": {
3001
3017
  "$type": "color",
3002
- "$value": "{color.accent.400}"
3018
+ "$value": "{color.accent.300}"
3019
+ },
3020
+ "subtle": {
3021
+ "$type": "color",
3022
+ "$value": "{color.accent.700}"
3023
+ },
3024
+ "tint": {
3025
+ "$type": "color",
3026
+ "$value": "{color.accent.900}"
3003
3027
  }
3004
3028
  },
3005
3029
  "action": {
@@ -3017,15 +3041,15 @@
3017
3041
  },
3018
3042
  "subtle": {
3019
3043
  "$type": "color",
3020
- "$value": "{color.brand.700}"
3044
+ "$value": "{color.brand.800}"
3021
3045
  },
3022
3046
  "subtle-active": {
3023
3047
  "$type": "color",
3024
- "$value": "{color.brand.500}"
3048
+ "$value": "{color.brand.600}"
3025
3049
  },
3026
3050
  "subtle-hover": {
3027
3051
  "$type": "color",
3028
- "$value": "{color.brand.600}"
3052
+ "$value": "{color.brand.700}"
3029
3053
  },
3030
3054
  "tint": {
3031
3055
  "$type": "color",
@@ -3051,7 +3075,15 @@
3051
3075
  },
3052
3076
  "strong": {
3053
3077
  "$type": "color",
3054
- "$value": "{color.brand.400}"
3078
+ "$value": "{color.brand.300}"
3079
+ },
3080
+ "subtle": {
3081
+ "$type": "color",
3082
+ "$value": "{color.brand.700}"
3083
+ },
3084
+ "tint": {
3085
+ "$type": "color",
3086
+ "$value": "{color.brand.900}"
3055
3087
  }
3056
3088
  },
3057
3089
  "danger": {