@cdx-ui/styles 0.0.1-beta.109 → 0.0.1-beta.110
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.
- package/css/theme.css +24 -9
- package/css/vanilla.css +15 -5
- package/lib/runtime/token-to-css-var.json +10 -0
- package/package.json +2 -2
- package/runtime/token-to-css-var.json +10 -0
- package/tokens/presets/.manifest.json +1 -1
- package/tokens/presets/poise.json +45 -5
package/css/theme.css
CHANGED
|
@@ -358,10 +358,15 @@
|
|
|
358
358
|
--color-chart-categorical-6: var(--color-neutral-600);
|
|
359
359
|
--color-chart-simple-primary: var(--color-brand-500);
|
|
360
360
|
--color-chart-simple-secondary: var(--color-brand-950);
|
|
361
|
+
--color-content-accent: var(--color-accent-700);
|
|
362
|
+
--color-content-accent-on-strong: var(--color-white);
|
|
363
|
+
--color-content-accent-on-subtle: var(--color-accent-900);
|
|
361
364
|
--color-content-action: var(--color-brand-700);
|
|
362
365
|
--color-content-action-on-strong: var(--color-white);
|
|
363
366
|
--color-content-action-on-subtle: var(--color-brand-900);
|
|
364
367
|
--color-content-brand: var(--color-brand-700);
|
|
368
|
+
--color-content-brand-on-strong: var(--color-white);
|
|
369
|
+
--color-content-brand-on-subtle: var(--color-brand-900);
|
|
365
370
|
--color-content-danger: var(--color-red-700);
|
|
366
371
|
--color-content-danger-on-strong: var(--color-white);
|
|
367
372
|
--color-content-danger-on-subtle: var(--color-red-900);
|
|
@@ -481,11 +486,11 @@
|
|
|
481
486
|
--font-display-semibold-italic: 'Crimson Pro SemiBold Italic';
|
|
482
487
|
--opacity-disabled: 0.5;
|
|
483
488
|
--opacity-focus: 0.12;
|
|
484
|
-
--opacity-hover: 0.
|
|
489
|
+
--opacity-hover: 0.06;
|
|
485
490
|
--opacity-hover-overlay: 0.2;
|
|
486
|
-
--opacity-selected: 0.
|
|
487
|
-
--opacity-selected-focus: 0.
|
|
488
|
-
--opacity-selected-hover: 0.
|
|
491
|
+
--opacity-selected: 0.08;
|
|
492
|
+
--opacity-selected-focus: 0.2;
|
|
493
|
+
--opacity-selected-hover: 0.14;
|
|
489
494
|
}
|
|
490
495
|
|
|
491
496
|
@layer theme {
|
|
@@ -506,10 +511,15 @@
|
|
|
506
511
|
--color-chart-categorical-6: var(--color-neutral-600);
|
|
507
512
|
--color-chart-simple-primary: var(--color-brand-500);
|
|
508
513
|
--color-chart-simple-secondary: var(--color-brand-950);
|
|
514
|
+
--color-content-accent: var(--color-accent-700);
|
|
515
|
+
--color-content-accent-on-strong: var(--color-white);
|
|
516
|
+
--color-content-accent-on-subtle: var(--color-accent-900);
|
|
509
517
|
--color-content-action: var(--color-brand-700);
|
|
510
518
|
--color-content-action-on-strong: var(--color-white);
|
|
511
519
|
--color-content-action-on-subtle: var(--color-brand-900);
|
|
512
520
|
--color-content-brand: var(--color-brand-700);
|
|
521
|
+
--color-content-brand-on-strong: var(--color-white);
|
|
522
|
+
--color-content-brand-on-subtle: var(--color-brand-900);
|
|
513
523
|
--color-content-danger: var(--color-red-700);
|
|
514
524
|
--color-content-danger-on-strong: var(--color-white);
|
|
515
525
|
--color-content-danger-on-subtle: var(--color-red-900);
|
|
@@ -629,11 +639,11 @@
|
|
|
629
639
|
--font-display-semibold-italic: 'Crimson Pro SemiBold Italic';
|
|
630
640
|
--opacity-disabled: 0.5;
|
|
631
641
|
--opacity-focus: 0.12;
|
|
632
|
-
--opacity-hover: 0.
|
|
642
|
+
--opacity-hover: 0.06;
|
|
633
643
|
--opacity-hover-overlay: 0.2;
|
|
634
|
-
--opacity-selected: 0.
|
|
635
|
-
--opacity-selected-focus: 0.
|
|
636
|
-
--opacity-selected-hover: 0.
|
|
644
|
+
--opacity-selected: 0.08;
|
|
645
|
+
--opacity-selected-focus: 0.2;
|
|
646
|
+
--opacity-selected-hover: 0.14;
|
|
637
647
|
}
|
|
638
648
|
@variant dark {
|
|
639
649
|
--border-width-default: 0.0625rem;
|
|
@@ -651,10 +661,15 @@
|
|
|
651
661
|
--color-chart-categorical-6: var(--color-neutral-600);
|
|
652
662
|
--color-chart-simple-primary: var(--color-brand-500);
|
|
653
663
|
--color-chart-simple-secondary: var(--color-brand-950);
|
|
664
|
+
--color-content-accent: var(--color-accent-300);
|
|
665
|
+
--color-content-accent-on-strong: var(--color-accent-950);
|
|
666
|
+
--color-content-accent-on-subtle: var(--color-accent-100);
|
|
654
667
|
--color-content-action: var(--color-brand-100);
|
|
655
668
|
--color-content-action-on-strong: var(--color-brand-950);
|
|
656
669
|
--color-content-action-on-subtle: var(--color-brand-100);
|
|
657
|
-
--color-content-brand: var(--color-brand-
|
|
670
|
+
--color-content-brand: var(--color-brand-300);
|
|
671
|
+
--color-content-brand-on-strong: var(--color-brand-950);
|
|
672
|
+
--color-content-brand-on-subtle: var(--color-brand-100);
|
|
658
673
|
--color-content-danger: var(--color-red-300);
|
|
659
674
|
--color-content-danger-on-strong: var(--color-red-900);
|
|
660
675
|
--color-content-danger-on-subtle: var(--color-red-100);
|
package/css/vanilla.css
CHANGED
|
@@ -374,10 +374,15 @@
|
|
|
374
374
|
--color-chart-categorical-6: var(--color-neutral-600);
|
|
375
375
|
--color-chart-simple-primary: var(--color-brand-500);
|
|
376
376
|
--color-chart-simple-secondary: var(--color-brand-950);
|
|
377
|
+
--color-content-accent: var(--color-accent-700);
|
|
378
|
+
--color-content-accent-on-strong: var(--color-white);
|
|
379
|
+
--color-content-accent-on-subtle: var(--color-accent-900);
|
|
377
380
|
--color-content-action: var(--color-brand-700);
|
|
378
381
|
--color-content-action-on-strong: var(--color-white);
|
|
379
382
|
--color-content-action-on-subtle: var(--color-brand-900);
|
|
380
383
|
--color-content-brand: var(--color-brand-700);
|
|
384
|
+
--color-content-brand-on-strong: var(--color-white);
|
|
385
|
+
--color-content-brand-on-subtle: var(--color-brand-900);
|
|
381
386
|
--color-content-danger: var(--color-red-700);
|
|
382
387
|
--color-content-danger-on-strong: var(--color-white);
|
|
383
388
|
--color-content-danger-on-subtle: var(--color-red-900);
|
|
@@ -497,11 +502,11 @@
|
|
|
497
502
|
--font-display-semibold-italic: 'Crimson Pro SemiBold Italic';
|
|
498
503
|
--opacity-disabled: 0.5;
|
|
499
504
|
--opacity-focus: 0.12;
|
|
500
|
-
--opacity-hover: 0.
|
|
505
|
+
--opacity-hover: 0.06;
|
|
501
506
|
--opacity-hover-overlay: 0.2;
|
|
502
|
-
--opacity-selected: 0.
|
|
503
|
-
--opacity-selected-focus: 0.
|
|
504
|
-
--opacity-selected-hover: 0.
|
|
507
|
+
--opacity-selected: 0.08;
|
|
508
|
+
--opacity-selected-focus: 0.2;
|
|
509
|
+
--opacity-selected-hover: 0.14;
|
|
505
510
|
}
|
|
506
511
|
|
|
507
512
|
@media (prefers-color-scheme: dark) {
|
|
@@ -521,10 +526,15 @@
|
|
|
521
526
|
--color-chart-categorical-6: var(--color-neutral-600);
|
|
522
527
|
--color-chart-simple-primary: var(--color-brand-500);
|
|
523
528
|
--color-chart-simple-secondary: var(--color-brand-950);
|
|
529
|
+
--color-content-accent: var(--color-accent-300);
|
|
530
|
+
--color-content-accent-on-strong: var(--color-accent-950);
|
|
531
|
+
--color-content-accent-on-subtle: var(--color-accent-100);
|
|
524
532
|
--color-content-action: var(--color-brand-100);
|
|
525
533
|
--color-content-action-on-strong: var(--color-brand-950);
|
|
526
534
|
--color-content-action-on-subtle: var(--color-brand-100);
|
|
527
|
-
--color-content-brand: var(--color-brand-
|
|
535
|
+
--color-content-brand: var(--color-brand-300);
|
|
536
|
+
--color-content-brand-on-strong: var(--color-brand-950);
|
|
537
|
+
--color-content-brand-on-subtle: var(--color-brand-100);
|
|
528
538
|
--color-content-danger: var(--color-red-300);
|
|
529
539
|
--color-content-danger-on-strong: var(--color-red-900);
|
|
530
540
|
--color-content-danger-on-subtle: var(--color-red-100);
|
|
@@ -253,10 +253,15 @@
|
|
|
253
253
|
"modes.dark.color.chart.categorical.6": "--color-chart-categorical-6",
|
|
254
254
|
"modes.dark.color.chart.simple.primary": "--color-chart-simple-primary",
|
|
255
255
|
"modes.dark.color.chart.simple.secondary": "--color-chart-simple-secondary",
|
|
256
|
+
"modes.dark.color.content.accent": "--color-content-accent",
|
|
257
|
+
"modes.dark.color.content.accent-on-strong": "--color-content-accent-on-strong",
|
|
258
|
+
"modes.dark.color.content.accent-on-subtle": "--color-content-accent-on-subtle",
|
|
256
259
|
"modes.dark.color.content.action": "--color-content-action",
|
|
257
260
|
"modes.dark.color.content.action-on-strong": "--color-content-action-on-strong",
|
|
258
261
|
"modes.dark.color.content.action-on-subtle": "--color-content-action-on-subtle",
|
|
259
262
|
"modes.dark.color.content.brand": "--color-content-brand",
|
|
263
|
+
"modes.dark.color.content.brand-on-strong": "--color-content-brand-on-strong",
|
|
264
|
+
"modes.dark.color.content.brand-on-subtle": "--color-content-brand-on-subtle",
|
|
260
265
|
"modes.dark.color.content.danger": "--color-content-danger",
|
|
261
266
|
"modes.dark.color.content.danger-on-strong": "--color-content-danger-on-strong",
|
|
262
267
|
"modes.dark.color.content.danger-on-subtle": "--color-content-danger-on-subtle",
|
|
@@ -396,10 +401,15 @@
|
|
|
396
401
|
"modes.light.color.chart.categorical.6": "--color-chart-categorical-6",
|
|
397
402
|
"modes.light.color.chart.simple.primary": "--color-chart-simple-primary",
|
|
398
403
|
"modes.light.color.chart.simple.secondary": "--color-chart-simple-secondary",
|
|
404
|
+
"modes.light.color.content.accent": "--color-content-accent",
|
|
405
|
+
"modes.light.color.content.accent-on-strong": "--color-content-accent-on-strong",
|
|
406
|
+
"modes.light.color.content.accent-on-subtle": "--color-content-accent-on-subtle",
|
|
399
407
|
"modes.light.color.content.action": "--color-content-action",
|
|
400
408
|
"modes.light.color.content.action-on-strong": "--color-content-action-on-strong",
|
|
401
409
|
"modes.light.color.content.action-on-subtle": "--color-content-action-on-subtle",
|
|
402
410
|
"modes.light.color.content.brand": "--color-content-brand",
|
|
411
|
+
"modes.light.color.content.brand-on-strong": "--color-content-brand-on-strong",
|
|
412
|
+
"modes.light.color.content.brand-on-subtle": "--color-content-brand-on-subtle",
|
|
403
413
|
"modes.light.color.content.danger": "--color-content-danger",
|
|
404
414
|
"modes.light.color.content.danger-on-strong": "--color-content-danger-on-strong",
|
|
405
415
|
"modes.light.color.content.danger-on-subtle": "--color-content-danger-on-subtle",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdx-ui/styles",
|
|
3
|
-
"version": "0.0.1-beta.
|
|
3
|
+
"version": "0.0.1-beta.110",
|
|
4
4
|
"main": "lib/commonjs/index.js",
|
|
5
5
|
"module": "lib/module/index.js",
|
|
6
6
|
"react-native": "src/index.ts",
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"@expo-google-fonts/manrope": "0.4.2",
|
|
66
66
|
"@expo-google-fonts/outfit": "0.4.3",
|
|
67
67
|
"@expo-google-fonts/public-sans": "0.4.2",
|
|
68
|
-
"@cdx-ui/utils": "0.0.1-beta.
|
|
68
|
+
"@cdx-ui/utils": "0.0.1-beta.110"
|
|
69
69
|
},
|
|
70
70
|
"peerDependencies": {
|
|
71
71
|
"expo-font": ">=13.0.0",
|
|
@@ -253,10 +253,15 @@
|
|
|
253
253
|
"modes.dark.color.chart.categorical.6": "--color-chart-categorical-6",
|
|
254
254
|
"modes.dark.color.chart.simple.primary": "--color-chart-simple-primary",
|
|
255
255
|
"modes.dark.color.chart.simple.secondary": "--color-chart-simple-secondary",
|
|
256
|
+
"modes.dark.color.content.accent": "--color-content-accent",
|
|
257
|
+
"modes.dark.color.content.accent-on-strong": "--color-content-accent-on-strong",
|
|
258
|
+
"modes.dark.color.content.accent-on-subtle": "--color-content-accent-on-subtle",
|
|
256
259
|
"modes.dark.color.content.action": "--color-content-action",
|
|
257
260
|
"modes.dark.color.content.action-on-strong": "--color-content-action-on-strong",
|
|
258
261
|
"modes.dark.color.content.action-on-subtle": "--color-content-action-on-subtle",
|
|
259
262
|
"modes.dark.color.content.brand": "--color-content-brand",
|
|
263
|
+
"modes.dark.color.content.brand-on-strong": "--color-content-brand-on-strong",
|
|
264
|
+
"modes.dark.color.content.brand-on-subtle": "--color-content-brand-on-subtle",
|
|
260
265
|
"modes.dark.color.content.danger": "--color-content-danger",
|
|
261
266
|
"modes.dark.color.content.danger-on-strong": "--color-content-danger-on-strong",
|
|
262
267
|
"modes.dark.color.content.danger-on-subtle": "--color-content-danger-on-subtle",
|
|
@@ -396,10 +401,15 @@
|
|
|
396
401
|
"modes.light.color.chart.categorical.6": "--color-chart-categorical-6",
|
|
397
402
|
"modes.light.color.chart.simple.primary": "--color-chart-simple-primary",
|
|
398
403
|
"modes.light.color.chart.simple.secondary": "--color-chart-simple-secondary",
|
|
404
|
+
"modes.light.color.content.accent": "--color-content-accent",
|
|
405
|
+
"modes.light.color.content.accent-on-strong": "--color-content-accent-on-strong",
|
|
406
|
+
"modes.light.color.content.accent-on-subtle": "--color-content-accent-on-subtle",
|
|
399
407
|
"modes.light.color.content.action": "--color-content-action",
|
|
400
408
|
"modes.light.color.content.action-on-strong": "--color-content-action-on-strong",
|
|
401
409
|
"modes.light.color.content.action-on-subtle": "--color-content-action-on-subtle",
|
|
402
410
|
"modes.light.color.content.brand": "--color-content-brand",
|
|
411
|
+
"modes.light.color.content.brand-on-strong": "--color-content-brand-on-strong",
|
|
412
|
+
"modes.light.color.content.brand-on-subtle": "--color-content-brand-on-subtle",
|
|
403
413
|
"modes.light.color.content.danger": "--color-content-danger",
|
|
404
414
|
"modes.light.color.content.danger-on-strong": "--color-content-danger-on-strong",
|
|
405
415
|
"modes.light.color.content.danger-on-subtle": "--color-content-danger-on-subtle",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"poise.json": "
|
|
2
|
+
"poise.json": "35614c1648857182b89976474912fc2365f0a94dec81dfb7e5f7a834aea35a05",
|
|
3
3
|
"prestige.json": "d817cb775b15ec0293c0c1c99fd4e655646b07e4f7080c0aeedf2c81b4a82f7a",
|
|
4
4
|
"pulse.json": "5fa3ef89a369281ddcdd142860ab2c99381a0e81cf02fead9e77bdfd8585ad39"
|
|
5
5
|
}
|
|
@@ -2334,6 +2334,18 @@
|
|
|
2334
2334
|
}
|
|
2335
2335
|
},
|
|
2336
2336
|
"content": {
|
|
2337
|
+
"accent": {
|
|
2338
|
+
"$type": "color",
|
|
2339
|
+
"$value": "{color.accent.700}"
|
|
2340
|
+
},
|
|
2341
|
+
"accent-on-strong": {
|
|
2342
|
+
"$type": "color",
|
|
2343
|
+
"$value": "{color.white}"
|
|
2344
|
+
},
|
|
2345
|
+
"accent-on-subtle": {
|
|
2346
|
+
"$type": "color",
|
|
2347
|
+
"$value": "{color.accent.900}"
|
|
2348
|
+
},
|
|
2337
2349
|
"action": {
|
|
2338
2350
|
"$type": "color",
|
|
2339
2351
|
"$value": "{color.brand.700}"
|
|
@@ -2350,6 +2362,14 @@
|
|
|
2350
2362
|
"$type": "color",
|
|
2351
2363
|
"$value": "{color.brand.700}"
|
|
2352
2364
|
},
|
|
2365
|
+
"brand-on-strong": {
|
|
2366
|
+
"$type": "color",
|
|
2367
|
+
"$value": "{color.white}"
|
|
2368
|
+
},
|
|
2369
|
+
"brand-on-subtle": {
|
|
2370
|
+
"$type": "color",
|
|
2371
|
+
"$value": "{color.brand.900}"
|
|
2372
|
+
},
|
|
2353
2373
|
"danger": {
|
|
2354
2374
|
"$type": "color",
|
|
2355
2375
|
"$value": "{color.red.700}"
|
|
@@ -2853,7 +2873,7 @@
|
|
|
2853
2873
|
},
|
|
2854
2874
|
"hover": {
|
|
2855
2875
|
"$type": "number",
|
|
2856
|
-
"$value": 0.
|
|
2876
|
+
"$value": 0.06
|
|
2857
2877
|
},
|
|
2858
2878
|
"hover-overlay": {
|
|
2859
2879
|
"$type": "number",
|
|
@@ -2861,15 +2881,15 @@
|
|
|
2861
2881
|
},
|
|
2862
2882
|
"selected": {
|
|
2863
2883
|
"$type": "number",
|
|
2864
|
-
"$value": 0.
|
|
2884
|
+
"$value": 0.08
|
|
2865
2885
|
},
|
|
2866
2886
|
"selected-focus": {
|
|
2867
2887
|
"$type": "number",
|
|
2868
|
-
"$value": 0.
|
|
2888
|
+
"$value": 0.2
|
|
2869
2889
|
},
|
|
2870
2890
|
"selected-hover": {
|
|
2871
2891
|
"$type": "number",
|
|
2872
|
-
"$value": 0.
|
|
2892
|
+
"$value": 0.14
|
|
2873
2893
|
}
|
|
2874
2894
|
}
|
|
2875
2895
|
},
|
|
@@ -2948,6 +2968,18 @@
|
|
|
2948
2968
|
}
|
|
2949
2969
|
},
|
|
2950
2970
|
"content": {
|
|
2971
|
+
"accent": {
|
|
2972
|
+
"$type": "color",
|
|
2973
|
+
"$value": "{color.accent.300}"
|
|
2974
|
+
},
|
|
2975
|
+
"accent-on-strong": {
|
|
2976
|
+
"$type": "color",
|
|
2977
|
+
"$value": "{color.accent.950}"
|
|
2978
|
+
},
|
|
2979
|
+
"accent-on-subtle": {
|
|
2980
|
+
"$type": "color",
|
|
2981
|
+
"$value": "{color.accent.100}"
|
|
2982
|
+
},
|
|
2951
2983
|
"action": {
|
|
2952
2984
|
"$type": "color",
|
|
2953
2985
|
"$value": "{color.brand.100}"
|
|
@@ -2962,7 +2994,15 @@
|
|
|
2962
2994
|
},
|
|
2963
2995
|
"brand": {
|
|
2964
2996
|
"$type": "color",
|
|
2965
|
-
"$value": "{color.brand.
|
|
2997
|
+
"$value": "{color.brand.300}"
|
|
2998
|
+
},
|
|
2999
|
+
"brand-on-strong": {
|
|
3000
|
+
"$type": "color",
|
|
3001
|
+
"$value": "{color.brand.950}"
|
|
3002
|
+
},
|
|
3003
|
+
"brand-on-subtle": {
|
|
3004
|
+
"$type": "color",
|
|
3005
|
+
"$value": "{color.brand.100}"
|
|
2966
3006
|
},
|
|
2967
3007
|
"danger": {
|
|
2968
3008
|
"$type": "color",
|