@onereach/styles 2.42.0 → 2.42.1-beta.2976.0

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 (2) hide show
  1. package/package.json +2 -3
  2. package/tailwind.config.preset.js +57 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onereach/styles",
3
- "version": "2.42.0",
3
+ "version": "2.42.1-beta.2976.0",
4
4
  "description": "Styles for or-ui-next",
5
5
  "license": "UNLICENSED",
6
6
  "main": "./main.css",
@@ -55,6 +55,5 @@
55
55
  },
56
56
  "publishConfig": {
57
57
  "access": "public"
58
- },
59
- "gitHead": "43a28e85cde43576318dc4a46a83bdd2dc1779ab"
58
+ }
60
59
  }
package/tailwind.config.preset.js CHANGED
@@ -315,6 +315,7 @@ module.exports = {
315
315
  fontSize: fontSizeMobile ?? fontSizeDesktop,
316
316
  lineHeight: optionsMobile?.lineHeight ?? optionsDesktop?.lineHeight,
317
317
 
318
+ // Desktop
318
319
  [`@media (min-width: ${theme('screens.md')})`]: {
319
320
  fontFamily: theme(`fontFamily.${value}`),
320
321
  fontWeight: theme(`fontWeight.${value}`),
@@ -388,12 +389,23 @@ module.exports = {
388
389
  },
389
390
 
390
391
  '&:not(.interactivity-none)': {
391
- '&:hover, &[force-state="hover"], &:focus-visible, &[force-state="focus"]': {
392
+ '&:active, &[force-state="active"]': {
392
393
  backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
393
394
  },
394
395
 
395
- '&:active, &[force-state="active"]': {
396
- backgroundColor: theme(`backgroundColor.${token}` + suffix),
396
+ // Desktop
397
+ [`@media (min-width: ${theme('screens.md')})`]: {
398
+ '&:hover, &[force-state="hover"]': {
399
+ backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
400
+ },
401
+
402
+ '&:focus-visible, &[force-state="focus"]': {
403
+ backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
404
+ },
405
+
406
+ '&:active, &[force-state="active"]': {
407
+ backgroundColor: theme(`backgroundColor.${token}` + suffix),
408
+ },
397
409
  },
398
410
  },
399
411
 
@@ -419,12 +431,23 @@ module.exports = {
419
431
  },
420
432
 
421
433
  '&:not(.interactivity-none)': {
422
- '&:hover, &[force-state="hover"], &:focus-visible, &[force-state="focus"]': {
434
+ '&:active, &[force-state="active"]': {
423
435
  backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
424
436
  },
425
437
 
426
- '&:active, &[force-state="active"]': {
427
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
438
+ // Desktop
439
+ [`@media (min-width: ${theme('screens.md')})`]: {
440
+ '&:hover, &[force-state="hover"]': {
441
+ backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
442
+ },
443
+
444
+ '&:focus-visible, &[force-state="focus"]': {
445
+ backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
446
+ },
447
+
448
+ '&:active, &[force-state="active"]': {
449
+ backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
450
+ },
428
451
  },
429
452
  },
430
453
 
@@ -450,12 +473,23 @@ module.exports = {
450
473
  },
451
474
 
452
475
  '&:not(.interactivity-none)': {
453
- '&:hover, &[force-state="hover"], &:focus-visible, &[force-state="focus"]': {
476
+ '&:active, &[force-state="active"]': {
454
477
  backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
455
478
  },
456
479
 
457
- '&:active, &[force-state="active"]': {
458
- backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
480
+ // Desktop
481
+ [`@media (min-width: ${theme('screens.md')})`]: {
482
+ '&:hover, &[force-state="hover"]': {
483
+ backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
484
+ },
485
+
486
+ '&:focus-visible, &[force-state="focus"]': {
487
+ backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
488
+ },
489
+
490
+ '&:active, &[force-state="active"]': {
491
+ backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
492
+ },
459
493
  },
460
494
  },
461
495
 
@@ -481,12 +515,23 @@ module.exports = {
481
515
  },
482
516
 
483
517
  '&:not(.interactivity-none)': {
484
- '&:hover, &[force-state="hover"], &:focus-visible, &[force-state="focus"]': {
518
+ '&:active, &[force-state="active"]': {
485
519
  color: theme(`textColor.${token}-hover` + suffix),
486
520
  },
487
521
 
488
- '&:active, &[force-state="active"]': {
489
- color: theme(`textColor.${token}` + suffix),
522
+ // Desktop
523
+ [`@media (min-width: ${theme('screens.md')})`]: {
524
+ '&:hover, &[force-state="hover"]': {
525
+ color: theme(`textColor.${token}-hover` + suffix),
526
+ },
527
+
528
+ '&:focus-visible, &[force-state="focus"]': {
529
+ color: theme(`textColor.${token}-hover` + suffix),
530
+ },
531
+
532
+ '&:active, &[force-state="active"]': {
533
+ color: theme(`textColor.${token}` + suffix),
534
+ },
490
535
  },
491
536
  },
492
537