@onereach/styles 2.21.0 → 2.21.1-beta.1450.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 +108 -28
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onereach/styles",
3
- "version": "2.21.0",
3
+ "version": "2.21.1-beta.1450.0",
4
4
  "description": "Styles for or-ui-next",
5
5
  "main": "./main.css",
6
6
  "unpkg": "./main.css",
@@ -49,6 +49,5 @@
49
49
  "dependencies": {
50
50
  "@tailwindcss/typography": "^0.5.4",
51
51
  "tailwindcss": "^3.1.3"
52
- },
53
- "gitHead": "0b528599c37071e1e8698d9ae1ab69200b757b80"
52
+ }
54
53
  }
package/tailwind.config.preset.js CHANGED
@@ -172,12 +172,31 @@ module.exports = {
172
172
  addVariant('selected', ['&[selected]', '&:checked']);
173
173
  addVariant('activated', ['&[activated]']);
174
174
 
175
- addVariant('hover', '&:hover:not(.interactivity-none)');
176
- addVariant('focus', '&:focus-visible:not(.interactivity-none)');
177
- addVariant('focus-within', '&:focus-within:not(.interactivity-none)');
178
- addVariant('active', '&:active:not(.interactivity-none)');
175
+ addVariant('hover', [
176
+ '&:not(.interactivity-none):hover',
177
+ '&:not(.interactivity-none)[force-state="hover"]',
178
+ ]);
179
179
 
180
- addVariant('link', '& :any-link');
180
+ addVariant('focus', [
181
+ '&:not(.interactivity-none):focus-visible',
182
+ '&:not(.interactivity-none)[force-state="focus"]',
183
+ ]);
184
+
185
+ addVariant('focus-within', [
186
+ '&:not(.interactivity-none):focus-within',
187
+ '&:not(.interactivity-none)[force-state="focus-within"]',
188
+ ]);
189
+
190
+ addVariant('active', [
191
+ '&:not(.interactivity-none):active',
192
+ '&:not(.interactivity-none)[force-state="active"]',
193
+ ]);
194
+
195
+ addVariant('children', ['& > *']);
196
+ addVariant('first-child', ['& > *:first-child']);
197
+ addVariant('last-child', ['& > *:last-child']);
198
+
199
+ addVariant('links', ['& :any-link']);
181
200
 
182
201
  // TODO: Remove when migration complete
183
202
  addUtilities({
@@ -217,9 +236,13 @@ module.exports = {
217
236
  },
218
237
 
219
238
  ':root': {
220
- fontFamily: theme('fontFamily.body-1-regular'),
221
- fontSize: theme('fontSize.body-1-regular'),
222
- fontWeight: theme('fontWeight.body-1-regular'),
239
+ fontFamily: theme('fontFamily.body-2-regular'),
240
+ fontSize: theme('fontSize.body-2-regular'),
241
+ fontWeight: theme('fontWeight.body-2-regular'),
242
+ },
243
+
244
+ '[contenteditable]:empty::after': {
245
+ content: 'attr(placeholder)',
223
246
  },
224
247
  });
225
248
 
@@ -306,11 +329,11 @@ module.exports = {
306
329
  },
307
330
 
308
331
  '&:not(.interactivity-none)': {
309
- '&:hover, &:focus-visible': {
332
+ '&:hover, &[force-state="hover"], &:focus-visible, &[force-state="focus"]': {
310
333
  backgroundColor: theme(`backgroundColor.${color}-hover` + suffix),
311
334
  },
312
335
 
313
- '&:active': {
336
+ '&:active, &[force-state="active"]': {
314
337
  backgroundColor: theme(`backgroundColor.${color}` + suffix),
315
338
  },
316
339
  },
@@ -337,11 +360,11 @@ module.exports = {
337
360
  },
338
361
 
339
362
  '&:not(.interactivity-none)': {
340
- '&:hover, &:focus-visible': {
363
+ '&:hover, &[force-state="hover"], &:focus-visible, &[force-state="focus"]': {
341
364
  backgroundColor: theme(`backgroundColor.${color}-opacity-0-12` + suffix),
342
365
  },
343
366
 
344
- '&:active': {
367
+ '&:active, &[force-state="active"]': {
345
368
  backgroundColor: theme(`backgroundColor.${color}-opacity-0-16` + suffix),
346
369
  },
347
370
  },
@@ -367,11 +390,11 @@ module.exports = {
367
390
  },
368
391
 
369
392
  '&:not(.interactivity-none)': {
370
- '&:hover, &:focus-visible': {
393
+ '&:hover, &[force-state="hover"], &:focus-visible, &[force-state="focus"]': {
371
394
  backgroundColor: theme(`backgroundColor.${color}-opacity-0-08` + suffix),
372
395
  },
373
396
 
374
- '&:active': {
397
+ '&:active, &[force-state="active"]': {
375
398
  backgroundColor: theme(`backgroundColor.${color}-opacity-0-16` + suffix),
376
399
  },
377
400
  },
@@ -397,11 +420,11 @@ module.exports = {
397
420
  },
398
421
 
399
422
  '&:not(.interactivity-none)': {
400
- '&:hover, &:focus-visible': {
423
+ '&:hover, &[force-state="hover"], &:focus-visible, &[force-state="focus"]': {
401
424
  color: theme(`textColor.${color}-hover` + suffix),
402
425
  },
403
426
 
404
- '&:active': {
427
+ '&:active, &[force-state="active"]': {
405
428
  color: theme(`textColor.${color}` + suffix),
406
429
  },
407
430
  },
@@ -472,23 +495,23 @@ module.exports = {
472
495
  'error': 'error',
473
496
  'error-dark': 'error..-dark',
474
497
 
475
- 'primary-container': 'primary-container',
476
- 'primary-container-dark': 'primary-container..-dark',
498
+ 'primary-hover': 'primary-hover',
499
+ 'primary-hover-dark': 'primary-hover..-dark',
477
500
 
478
- 'secondary-container': 'secondary-container',
479
- 'secondary-container-dark': 'secondary-container..-dark',
501
+ // 'secondary-hover': 'secondary-hover',
502
+ // 'secondary-hover-dark': 'secondary-hover..-dark',
480
503
 
481
- 'tertiary-container': 'tertiary-container',
482
- 'tertiary-container-dark': 'tertiary-container..-dark',
504
+ // 'tertiary-hover': 'tertiary-hover',
505
+ // 'tertiary-hover-dark': 'tertiary-hover..-dark',
483
506
 
484
- 'success-container': 'success-container',
485
- 'success-container-dark': 'success-container..-dark',
507
+ 'success-hover': 'success-hover',
508
+ 'success-hover-dark': 'success-hover..-dark',
486
509
 
487
- 'warning-container': 'warning-container',
488
- 'warning-container-dark': 'warning-container..-dark',
510
+ 'warning-hover': 'warning-hover',
511
+ 'warning-hover-dark': 'warning-hover..-dark',
489
512
 
490
- 'error-container': 'error-container',
491
- 'error-container-dark': 'error-container..-dark',
513
+ 'error-hover': 'error-hover',
514
+ 'error-hover-dark': 'error-hover..-dark',
492
515
 
493
516
  'primary-tinting': 'primary-opacity-0-08',
494
517
  'primary-tinting-dark': 'primary-opacity-0-08..-dark',
@@ -508,6 +531,42 @@ module.exports = {
508
531
  'error-tinting': 'error-opacity-0-08',
509
532
  'error-tinting-dark': 'error-opacity-0-08..-dark',
510
533
 
534
+ 'primary-container': 'primary-container',
535
+ 'primary-container-dark': 'primary-container..-dark',
536
+
537
+ 'secondary-container': 'secondary-container',
538
+ 'secondary-container-dark': 'secondary-container..-dark',
539
+
540
+ 'tertiary-container': 'tertiary-container',
541
+ 'tertiary-container-dark': 'tertiary-container..-dark',
542
+
543
+ 'success-container': 'success-container',
544
+ 'success-container-dark': 'success-container..-dark',
545
+
546
+ 'warning-container': 'warning-container',
547
+ 'warning-container-dark': 'warning-container..-dark',
548
+
549
+ 'error-container': 'error-container',
550
+ 'error-container-dark': 'error-container..-dark',
551
+
552
+ 'surface': 'surface',
553
+ 'surface-dark': 'surface..-dark',
554
+
555
+ 'surface-1': 'surface-1',
556
+ 'surface-1-dark': 'surface-1..-dark',
557
+
558
+ 'surface-2': 'surface-2',
559
+ 'surface-2-dark': 'surface-2..-dark',
560
+
561
+ 'surface-3': 'surface-3',
562
+ 'surface-3-dark': 'surface-3..-dark',
563
+
564
+ 'surface-4': 'surface-4',
565
+ 'surface-4-dark': 'surface-4..-dark',
566
+
567
+ 'surface-5': 'surface-5',
568
+ 'surface-5-dark': 'surface-5..-dark',
569
+
511
570
  'transparent': 'transparent',
512
571
  },
513
572
  });
@@ -554,6 +613,24 @@ module.exports = {
554
613
  'error': 'error',
555
614
  'error-dark': 'error..-dark',
556
615
 
616
+ 'primary-hover': 'primary-hover',
617
+ 'primary-hover-dark': 'primary-hover..-dark',
618
+
619
+ // 'secondary-hover': 'secondary-hover',
620
+ // 'secondary-hover-dark': 'secondary-hover..-dark',
621
+
622
+ // 'tertiary-hover': 'tertiary-hover',
623
+ // 'tertiary-hover-dark': 'tertiary-hover..-dark',
624
+
625
+ 'success-hover': 'success-hover',
626
+ 'success-hover-dark': 'success-hover..-dark',
627
+
628
+ 'warning-hover': 'warning-hover',
629
+ 'warning-hover-dark': 'warning-hover..-dark',
630
+
631
+ 'error-hover': 'error-hover',
632
+ 'error-hover-dark': 'error-hover..-dark',
633
+
557
634
  'on-primary': 'on-primary',
558
635
  'on-primary-dark': 'on-primary..-dark',
559
636
 
@@ -590,6 +667,9 @@ module.exports = {
590
667
  'on-error-container': 'on-error-container',
591
668
  'on-error-container-dark': 'on-error-container..-dark',
592
669
 
670
+ 'on-surface': 'on-surface',
671
+ 'on-surface-dark': 'on-surface..-dark',
672
+
593
673
  'transparent': 'transparent',
594
674
  'inherit': 'inherit',
595
675
  },