@cdx-ui/styles 0.0.1-beta.73 → 0.0.1-beta.74

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 (7) hide show
  1. package/css/theme.css +11 -2
  2. package/css/vanilla.css +7 -1
  3. package/lib/runtime/token-to-css-var.json +6 -0
  4. package/package.json +2 -2
  5. package/runtime/token-to-css-var.json +6 -0
  6. package/tokens/presets/.manifest.json +1 -1
  7. package/tokens/presets/poise.json +25 -1
package/css/theme.css CHANGED
@@ -374,7 +374,7 @@
374
374
  --color-content-neutral-on-subtle: var(--color-base-900);
375
375
  --color-content-primary: var(--color-base-950);
376
376
  --color-content-secondary: var(--color-base-800);
377
- --color-content-selected: var(--color-brand-700);
377
+ --color-content-selected: var(--color-brand-600);
378
378
  --color-content-success: var(--color-green-700);
379
379
  --color-content-success-on-strong: var(--color-white);
380
380
  --color-content-success-on-subtle: var(--color-green-900);
@@ -480,9 +480,12 @@
480
480
  --font-display-semibold: 'Crimson Pro SemiBold';
481
481
  --font-display-semibold-italic: 'Crimson Pro SemiBold Italic';
482
482
  --opacity-disabled: 0.5;
483
+ --opacity-focus: 0.12;
483
484
  --opacity-hover: 0.08;
484
485
  --opacity-hover-overlay: 0.2;
485
486
  --opacity-selected: 0.12;
487
+ --opacity-selected-focus: 0.24;
488
+ --opacity-selected-hover: 0.2;
486
489
  }
487
490
 
488
491
  @layer theme {
@@ -519,7 +522,7 @@
519
522
  --color-content-neutral-on-subtle: var(--color-base-900);
520
523
  --color-content-primary: var(--color-base-950);
521
524
  --color-content-secondary: var(--color-base-800);
522
- --color-content-selected: var(--color-brand-700);
525
+ --color-content-selected: var(--color-brand-600);
523
526
  --color-content-success: var(--color-green-700);
524
527
  --color-content-success-on-strong: var(--color-white);
525
528
  --color-content-success-on-subtle: var(--color-green-900);
@@ -625,9 +628,12 @@
625
628
  --font-display-semibold: 'Crimson Pro SemiBold';
626
629
  --font-display-semibold-italic: 'Crimson Pro SemiBold Italic';
627
630
  --opacity-disabled: 0.5;
631
+ --opacity-focus: 0.12;
628
632
  --opacity-hover: 0.08;
629
633
  --opacity-hover-overlay: 0.2;
630
634
  --opacity-selected: 0.12;
635
+ --opacity-selected-focus: 0.24;
636
+ --opacity-selected-hover: 0.2;
631
637
  }
632
638
  @variant dark {
633
639
  --border-width-default: 0.0625rem;
@@ -767,9 +773,12 @@
767
773
  --font-display-semibold: 'Crimson Pro SemiBold';
768
774
  --font-display-semibold-italic: 'Crimson Pro SemiBold Italic';
769
775
  --opacity-disabled: 0.5;
776
+ --opacity-focus: 0.12;
770
777
  --opacity-hover: 0.08;
771
778
  --opacity-hover-overlay: 0.2;
772
779
  --opacity-selected: 0.12;
780
+ --opacity-selected-focus: 0.24;
781
+ --opacity-selected-hover: 0.2;
773
782
  }
774
783
  }
775
784
  }
package/css/vanilla.css CHANGED
@@ -390,7 +390,7 @@
390
390
  --color-content-neutral-on-subtle: var(--color-base-900);
391
391
  --color-content-primary: var(--color-base-950);
392
392
  --color-content-secondary: var(--color-base-800);
393
- --color-content-selected: var(--color-brand-700);
393
+ --color-content-selected: var(--color-brand-600);
394
394
  --color-content-success: var(--color-green-700);
395
395
  --color-content-success-on-strong: var(--color-white);
396
396
  --color-content-success-on-subtle: var(--color-green-900);
@@ -496,9 +496,12 @@
496
496
  --font-display-semibold: 'Crimson Pro SemiBold';
497
497
  --font-display-semibold-italic: 'Crimson Pro SemiBold Italic';
498
498
  --opacity-disabled: 0.5;
499
+ --opacity-focus: 0.12;
499
500
  --opacity-hover: 0.08;
500
501
  --opacity-hover-overlay: 0.2;
501
502
  --opacity-selected: 0.12;
503
+ --opacity-selected-focus: 0.24;
504
+ --opacity-selected-hover: 0.2;
502
505
  }
503
506
 
504
507
  @media (prefers-color-scheme: dark) {
@@ -640,9 +643,12 @@
640
643
  --font-display-semibold: 'Crimson Pro SemiBold';
641
644
  --font-display-semibold-italic: 'Crimson Pro SemiBold Italic';
642
645
  --opacity-disabled: 0.5;
646
+ --opacity-focus: 0.12;
643
647
  --opacity-hover: 0.08;
644
648
  --opacity-hover-overlay: 0.2;
645
649
  --opacity-selected: 0.12;
650
+ --opacity-selected-focus: 0.24;
651
+ --opacity-selected-hover: 0.2;
646
652
  }
647
653
  }
648
654
 
package/lib/runtime/token-to-css-var.json CHANGED
@@ -375,9 +375,12 @@
375
375
  "modes.dark.font.display-semibold": "--font-display-semibold",
376
376
  "modes.dark.font.display-semibold-italic": "--font-display-semibold-italic",
377
377
  "modes.dark.opacity.disabled": "--opacity-disabled",
378
+ "modes.dark.opacity.focus": "--opacity-focus",
378
379
  "modes.dark.opacity.hover": "--opacity-hover",
379
380
  "modes.dark.opacity.hover-overlay": "--opacity-hover-overlay",
380
381
  "modes.dark.opacity.selected": "--opacity-selected",
382
+ "modes.dark.opacity.selected-focus": "--opacity-selected-focus",
383
+ "modes.dark.opacity.selected-hover": "--opacity-selected-hover",
381
384
  "modes.light.border-radius.button": "--border-radius-button",
382
385
  "modes.light.border-radius.default": "--border-radius-default",
383
386
  "modes.light.border-radius.none": "--border-radius-none",
@@ -515,9 +518,12 @@
515
518
  "modes.light.font.display-semibold": "--font-display-semibold",
516
519
  "modes.light.font.display-semibold-italic": "--font-display-semibold-italic",
517
520
  "modes.light.opacity.disabled": "--opacity-disabled",
521
+ "modes.light.opacity.focus": "--opacity-focus",
518
522
  "modes.light.opacity.hover": "--opacity-hover",
519
523
  "modes.light.opacity.hover-overlay": "--opacity-hover-overlay",
520
524
  "modes.light.opacity.selected": "--opacity-selected",
525
+ "modes.light.opacity.selected-focus": "--opacity-selected-focus",
526
+ "modes.light.opacity.selected-hover": "--opacity-selected-hover",
521
527
  "perspective.distant": "--perspective-distant",
522
528
  "perspective.dramatic": "--perspective-dramatic",
523
529
  "perspective.midrange": "--perspective-midrange",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdx-ui/styles",
3
- "version": "0.0.1-beta.73",
3
+ "version": "0.0.1-beta.74",
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.73"
68
+ "@cdx-ui/utils": "0.0.1-beta.74"
69
69
  },
70
70
  "peerDependencies": {
71
71
  "expo-font": ">=13.0.0",
package/runtime/token-to-css-var.json CHANGED
@@ -375,9 +375,12 @@
375
375
  "modes.dark.font.display-semibold": "--font-display-semibold",
376
376
  "modes.dark.font.display-semibold-italic": "--font-display-semibold-italic",
377
377
  "modes.dark.opacity.disabled": "--opacity-disabled",
378
+ "modes.dark.opacity.focus": "--opacity-focus",
378
379
  "modes.dark.opacity.hover": "--opacity-hover",
379
380
  "modes.dark.opacity.hover-overlay": "--opacity-hover-overlay",
380
381
  "modes.dark.opacity.selected": "--opacity-selected",
382
+ "modes.dark.opacity.selected-focus": "--opacity-selected-focus",
383
+ "modes.dark.opacity.selected-hover": "--opacity-selected-hover",
381
384
  "modes.light.border-radius.button": "--border-radius-button",
382
385
  "modes.light.border-radius.default": "--border-radius-default",
383
386
  "modes.light.border-radius.none": "--border-radius-none",
@@ -515,9 +518,12 @@
515
518
  "modes.light.font.display-semibold": "--font-display-semibold",
516
519
  "modes.light.font.display-semibold-italic": "--font-display-semibold-italic",
517
520
  "modes.light.opacity.disabled": "--opacity-disabled",
521
+ "modes.light.opacity.focus": "--opacity-focus",
518
522
  "modes.light.opacity.hover": "--opacity-hover",
519
523
  "modes.light.opacity.hover-overlay": "--opacity-hover-overlay",
520
524
  "modes.light.opacity.selected": "--opacity-selected",
525
+ "modes.light.opacity.selected-focus": "--opacity-selected-focus",
526
+ "modes.light.opacity.selected-hover": "--opacity-selected-hover",
521
527
  "perspective.distant": "--perspective-distant",
522
528
  "perspective.dramatic": "--perspective-dramatic",
523
529
  "perspective.midrange": "--perspective-midrange",
package/tokens/presets/.manifest.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "poise.json": "aced9d145bf46c5eddba7b2155156c5d3ccc593588cd406f57d8a5a21c7b90f9",
2
+ "poise.json": "475aad9ee01544c77a7ad901ca76bc2f0a5022203f742cc125f0e3eccf3da9e8",
3
3
  "prestige.json": "d817cb775b15ec0293c0c1c99fd4e655646b07e4f7080c0aeedf2c81b4a82f7a",
4
4
  "pulse.json": "5fa3ef89a369281ddcdd142860ab2c99381a0e81cf02fead9e77bdfd8585ad39"
5
5
  }
package/tokens/presets/poise.json CHANGED
@@ -2400,7 +2400,7 @@
2400
2400
  },
2401
2401
  "selected": {
2402
2402
  "$type": "color",
2403
- "$value": "{color.brand.700}"
2403
+ "$value": "{color.brand.600}"
2404
2404
  },
2405
2405
  "success": {
2406
2406
  "$type": "color",
@@ -2847,6 +2847,10 @@
2847
2847
  "$type": "number",
2848
2848
  "$value": 0.5
2849
2849
  },
2850
+ "focus": {
2851
+ "$type": "number",
2852
+ "$value": 0.12
2853
+ },
2850
2854
  "hover": {
2851
2855
  "$type": "number",
2852
2856
  "$value": 0.08
@@ -2858,6 +2862,14 @@
2858
2862
  "selected": {
2859
2863
  "$type": "number",
2860
2864
  "$value": 0.12
2865
+ },
2866
+ "selected-focus": {
2867
+ "$type": "number",
2868
+ "$value": 0.24
2869
+ },
2870
+ "selected-hover": {
2871
+ "$type": "number",
2872
+ "$value": 0.2
2861
2873
  }
2862
2874
  }
2863
2875
  },
@@ -3449,6 +3461,10 @@
3449
3461
  "$type": "number",
3450
3462
  "$value": 0.5
3451
3463
  },
3464
+ "focus": {
3465
+ "$type": "number",
3466
+ "$value": 0.12
3467
+ },
3452
3468
  "hover": {
3453
3469
  "$type": "number",
3454
3470
  "$value": 0.08
@@ -3460,6 +3476,14 @@
3460
3476
  "selected": {
3461
3477
  "$type": "number",
3462
3478
  "$value": 0.12
3479
+ },
3480
+ "selected-focus": {
3481
+ "$type": "number",
3482
+ "$value": 0.24
3483
+ },
3484
+ "selected-hover": {
3485
+ "$type": "number",
3486
+ "$value": 0.2
3463
3487
  }
3464
3488
  }
3465
3489
  }