@onereach/styles 2.19.1-beta.1275.0 → 2.19.1-beta.1276.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 +1 -1
  2. package/tailwind.config.preset.js +89 -82
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onereach/styles",
3
- "version": "2.19.1-beta.1275.0",
3
+ "version": "2.19.1-beta.1276.0",
4
4
  "description": "Styles for or-ui-next",
5
5
  "main": "./main.css",
6
6
  "unpkg": "./main.css",
package/tailwind.config.preset.js CHANGED
@@ -132,7 +132,7 @@ module.exports = {
132
132
  fontSize: {
133
133
  ...parseFontSizeTokens(typographyTokens),
134
134
  'icon': ['1.15em', { lineHeight: 1 }],
135
- 'inherit': 'inherit',
135
+ 'inherit': ['inherit', { lineHeight: 'inherit' }],
136
136
  },
137
137
 
138
138
  fontWeight: {
@@ -221,17 +221,24 @@ module.exports = {
221
221
  });
222
222
 
223
223
  matchUtilities({
224
- 'typography': (value) => ({
225
- fontFamily: theme(`fontFamily.mobile-${value}`) ?? theme(`fontFamily.${value}`),
226
- fontSize: theme(`fontSize.mobile-${value}`) ?? theme(`fontSize.${value}`),
227
- fontWeight: theme(`fontWeight.mobile-${value}`) ?? theme(`fontWeight.${value}`),
228
-
229
- [`@media (min-width: ${theme('screens.md')})`]: {
230
- fontFamily: theme(`fontFamily.${value}`),
231
- fontSize: theme(`fontSize.${value}`),
232
- fontWeight: theme(`fontWeight.${value}`),
233
- },
234
- }),
224
+ 'typography': (value) => {
225
+ const [fontSizeDesktop, optionsDesktop] = theme('fontSize')[value];
226
+ const [fontSizeMobile, optionsMobile] = theme('fontSize')[`mobile-${value}`] ?? [];
227
+
228
+ return {
229
+ fontFamily: theme(`fontFamily.mobile-${value}`) ?? theme(`fontFamily.${value}`),
230
+ fontWeight: theme(`fontWeight.mobile-${value}`) ?? theme(`fontWeight.${value}`),
231
+ fontSize: fontSizeMobile ?? fontSizeDesktop,
232
+ lineHeight: optionsMobile?.lineHeight ?? optionsDesktop?.lineHeight,
233
+
234
+ [`@media (min-width: ${theme('screens.md')})`]: {
235
+ fontFamily: theme(`fontFamily.${value}`),
236
+ fontWeight: theme(`fontWeight.${value}`),
237
+ fontSize: fontSizeDesktop,
238
+ lineHeight: optionsDesktop?.lineHeight,
239
+ },
240
+ };
241
+ },
235
242
  }, {
236
243
  values: {
237
244
  'headline-1': 'headline-1',
@@ -281,30 +288,30 @@ module.exports = {
281
288
  const [color, suffix = ''] = value.split('..');
282
289
 
283
290
  return {
284
- backgroundColor: theme(`backgroundColor.${color}${suffix}`),
285
- color: theme(`textColor.on-${color}${suffix}`),
291
+ backgroundColor: theme(`backgroundColor.${color}` + suffix),
292
+ color: theme(`textColor.on-${color}` + suffix),
286
293
 
287
294
  borderStyle: 'none',
288
295
  outlineStyle: 'none',
289
296
 
290
297
  '&[disabled]': {
291
- backgroundColor: theme(`backgroundColor.disabled${suffix}`),
292
- color: theme(`textColor.on-disabled${suffix}`),
298
+ backgroundColor: theme('backgroundColor.disabled' + suffix),
299
+ color: theme('textColor.on-disabled' + suffix),
293
300
  },
294
301
 
295
302
  '&:not(.interactivity-none)': {
296
303
  '&:hover, &:focus-visible': {
297
- backgroundColor: theme(`backgroundColor.${color}-hover${suffix}`),
304
+ backgroundColor: theme(`backgroundColor.${color}-hover` + suffix),
298
305
  },
299
306
 
300
307
  '&:active': {
301
- backgroundColor: theme(`backgroundColor.${color}${suffix}`),
308
+ backgroundColor: theme(`backgroundColor.${color}` + suffix),
302
309
  },
303
310
  },
304
311
 
305
- // transitionProperty: 'all',
306
- // transitionDuration: theme('transitionDuration.short'),
307
- // transitionTimingFunction: theme('transitionTimingFunction.standard'),
312
+ transitionProperty: 'all',
313
+ transitionDuration: theme('transitionDuration.short'),
314
+ transitionTimingFunction: theme('transitionTimingFunction.standard'),
308
315
  };
309
316
  },
310
317
 
@@ -312,30 +319,30 @@ module.exports = {
312
319
  const [color, suffix = ''] = value.split('..');
313
320
 
314
321
  return {
315
- backgroundColor: theme(`backgroundColor.${color}-opacity-0-08${suffix}`),
316
- color: theme(`textColor.${color}${suffix}`),
322
+ backgroundColor: theme(`backgroundColor.${color}-opacity-0-08` + suffix),
323
+ color: theme(`textColor.${color}` + suffix),
317
324
 
318
325
  borderStyle: 'none',
319
326
  outlineStyle: 'none',
320
327
 
321
328
  '&[disabled]': {
322
- backgroundColor: theme(`backgroundColor.disabled${suffix}`),
323
- color: theme(`textColor.on-disabled${suffix}`),
329
+ backgroundColor: theme('backgroundColor.disabled' + suffix),
330
+ color: theme('textColor.on-disabled' + suffix),
324
331
  },
325
332
 
326
333
  '&:not(.interactivity-none)': {
327
334
  '&:hover, &:focus-visible': {
328
- backgroundColor: theme(`backgroundColor.${color}-opacity-0-12${suffix}`),
335
+ backgroundColor: theme(`backgroundColor.${color}-opacity-0-12` + suffix),
329
336
  },
330
337
 
331
338
  '&:active': {
332
- backgroundColor: theme(`backgroundColor.${color}-opacity-0-16${suffix}`),
339
+ backgroundColor: theme(`backgroundColor.${color}-opacity-0-16` + suffix),
333
340
  },
334
341
  },
335
342
 
336
- // transitionProperty: 'all',
337
- // transitionDuration: theme('transitionDuration.short'),
338
- // transitionTimingFunction: theme('transitionTimingFunction.standard'),
343
+ transitionProperty: 'all',
344
+ transitionDuration: theme('transitionDuration.short'),
345
+ transitionTimingFunction: theme('transitionTimingFunction.standard'),
339
346
  };
340
347
  },
341
348
 
@@ -344,28 +351,28 @@ module.exports = {
344
351
 
345
352
  return {
346
353
  backgroundColor: 'transparent',
347
- color: theme(`textColor.${color}${suffix}`),
354
+ color: theme(`textColor.${color}` + suffix),
348
355
 
349
356
  borderStyle: 'none',
350
357
  outlineStyle: 'none',
351
358
 
352
359
  '&[disabled]': {
353
- color: theme(`textColor.on-disabled${suffix}`),
360
+ color: theme('textColor.on-disabled' + suffix),
354
361
  },
355
362
 
356
363
  '&:not(.interactivity-none)': {
357
364
  '&:hover, &:focus-visible': {
358
- backgroundColor: theme(`backgroundColor.${color}-opacity-0-08${suffix}`),
365
+ backgroundColor: theme(`backgroundColor.${color}-opacity-0-08` + suffix),
359
366
  },
360
367
 
361
368
  '&:active': {
362
- backgroundColor: theme(`backgroundColor.${color}-opacity-0-16${suffix}`),
369
+ backgroundColor: theme(`backgroundColor.${color}-opacity-0-16` + suffix),
363
370
  },
364
371
  },
365
372
 
366
- // transitionProperty: 'all',
367
- // transitionDuration: theme('transitionDuration.short'),
368
- // transitionTimingFunction: theme('transitionTimingFunction.standard'),
373
+ transitionProperty: 'all',
374
+ transitionDuration: theme('transitionDuration.short'),
375
+ transitionTimingFunction: theme('transitionTimingFunction.standard'),
369
376
  };
370
377
  },
371
378
 
@@ -374,28 +381,28 @@ module.exports = {
374
381
 
375
382
  return {
376
383
  backgroundColor: 'transparent',
377
- color: theme(`textColor.${color}${suffix}`),
384
+ color: theme(`textColor.${color}` + suffix),
378
385
 
379
386
  borderStyle: 'none',
380
387
  outlineStyle: 'none',
381
388
 
382
389
  '&[disabled]': {
383
- color: theme(`textColor.on-disabled${suffix}`),
390
+ color: theme('textColor.on-disabled' + suffix),
384
391
  },
385
392
 
386
393
  '&:not(.interactivity-none)': {
387
394
  '&:hover, &:focus-visible': {
388
- color: theme(`textColor.${color}-hover${suffix}`),
395
+ color: theme(`textColor.${color}-hover` + suffix),
389
396
  },
390
397
 
391
398
  '&:active': {
392
- color: theme(`textColor.${color}${suffix}`),
399
+ color: theme(`textColor.${color}` + suffix),
393
400
  },
394
401
  },
395
402
 
396
- // transitionProperty: 'all',
397
- // transitionDuration: theme('transitionDuration.short'),
398
- // transitionTimingFunction: theme('transitionTimingFunction.standard'),
403
+ transitionProperty: 'all',
404
+ transitionDuration: theme('transitionDuration.short'),
405
+ transitionTimingFunction: theme('transitionTimingFunction.standard'),
399
406
  };
400
407
  },
401
408
  }, {
@@ -417,44 +424,44 @@ module.exports = {
417
424
  // Backgrounds
418
425
  matchUtilities({
419
426
  'theme-background': (value) => {
420
- const isDark = value.endsWith('-dark');
427
+ const [color, suffix = ''] = value.split('..');
421
428
 
422
429
  return {
423
- backgroundColor: theme(`backgroundColor.${value}`),
430
+ backgroundColor: theme(`backgroundColor.${color}`),
424
431
 
425
432
  '&[disabled]': {
426
- backgroundColor: theme(`backgroundColor.${isDark ? 'disabled-dark' : 'disabled'}`),
433
+ backgroundColor: theme('backgroundColor.disabled' + suffix),
427
434
  },
428
435
  };
429
436
  },
430
437
  }, {
431
438
  values: {
432
439
  'default': 'background',
433
- 'default-dark': 'background-dark',
440
+ 'default-dark': 'background..-dark',
434
441
 
435
442
  'primary': 'primary',
436
- 'primary-dark': 'primary-dark',
443
+ 'primary-dark': 'primary..-dark',
437
444
 
438
445
  'primary-container': 'primary-container',
439
- 'primary-container-dark': 'primary-container-dark',
446
+ 'primary-container-dark': 'primary-container..-dark',
440
447
 
441
448
  'success': 'success',
442
- 'success-dark': 'success-dark',
449
+ 'success-dark': 'success..-dark',
443
450
 
444
451
  'success-container': 'success-container',
445
- 'success-container-dark': 'success-container-dark',
452
+ 'success-container-dark': 'success-container..-dark',
446
453
 
447
454
  'warning': 'warning',
448
- 'warning-dark': 'warning-dark',
455
+ 'warning-dark': 'warning..-dark',
449
456
 
450
457
  'warning-container': 'warning-container',
451
- 'warning-container-dark': 'warning-container-dark',
458
+ 'warning-container-dark': 'warning-container..-dark',
452
459
 
453
460
  'error': 'error',
454
- 'error-dark': 'error-dark',
461
+ 'error-dark': 'error..-dark',
455
462
 
456
463
  'error-container': 'error-container',
457
- 'error-container-dark': 'error-container-dark',
464
+ 'error-container-dark': 'error-container..-dark',
458
465
 
459
466
  'inherit': 'inherit',
460
467
  },
@@ -463,59 +470,59 @@ module.exports = {
463
470
  // Foregrounds
464
471
  matchUtilities({
465
472
  'theme-foreground': (value) => {
466
- const isDark = value.endsWith('-dark');
473
+ const [color, suffix = ''] = value.split('..');
467
474
 
468
475
  return {
469
- color: theme(`textColor.${value}`),
476
+ color: theme(`textColor.${color}`),
470
477
 
471
478
  '&[disabled]': {
472
- color: theme(`textColor.${isDark ? 'on-disabled-dark' : 'on-disabled'}`),
479
+ color: theme('textColor.on-disabled' + suffix),
473
480
  },
474
481
  };
475
482
  },
476
483
  }, {
477
484
  values: {
478
485
  'default': 'on-background',
479
- 'default-dark': 'on-background-dark',
486
+ 'default-dark': 'on-background..-dark',
480
487
 
481
488
  'primary': 'primary',
482
- 'primary-dark': 'primary-dark',
489
+ 'primary-dark': 'primary..-dark',
483
490
 
484
491
  'on-primary': 'on-primary',
485
- 'on-primary-dark': 'on-primary-dark',
492
+ 'on-primary-dark': 'on-primary..-dark',
486
493
 
487
494
  'on-primary-container': 'on-primary-container',
488
- 'on-primary-container-dark': 'on-primary-container-dark',
495
+ 'on-primary-container-dark': 'on-primary-container..-dark',
489
496
 
490
497
  'success': 'success',
491
- 'success-dark': 'success-dark',
498
+ 'success-dark': 'success..-dark',
492
499
 
493
500
  'on-success': 'on-success',
494
- 'on-success-dark': 'on-success-dark',
501
+ 'on-success-dark': 'on-success..-dark',
495
502
 
496
503
  'on-success-container': 'on-success-container',
497
- 'on-success-container-dark': 'on-success-container-dark',
504
+ 'on-success-container-dark': 'on-success-container..-dark',
498
505
 
499
506
  'warning': 'warning',
500
- 'warning-dark': 'warning-dark',
507
+ 'warning-dark': 'warning..-dark',
501
508
 
502
509
  'on-warning': 'on-warning',
503
- 'on-warning-dark': 'on-warning-dark',
510
+ 'on-warning-dark': 'on-warning..-dark',
504
511
 
505
512
  'on-warning-container': 'on-warning-container',
506
- 'on-warning-container-dark': 'on-warning-container-dark',
513
+ 'on-warning-container-dark': 'on-warning-container..-dark',
507
514
 
508
515
  'error': 'error',
509
- 'error-dark': 'error-dark',
516
+ 'error-dark': 'error..-dark',
510
517
 
511
518
  'on-error': 'on-error',
512
- 'on-error-dark': 'on-error-dark',
519
+ 'on-error-dark': 'on-error..-dark',
513
520
 
514
521
  'on-error-container': 'on-error-container',
515
- 'on-error-container-dark': 'on-error-container-dark',
522
+ 'on-error-container-dark': 'on-error-container..-dark',
516
523
 
517
524
  'outline': 'outline',
518
- 'outline-dark': 'outline-dark',
525
+ 'outline-dark': 'outline..-dark',
519
526
 
520
527
  'inherit': 'inherit',
521
528
  },
@@ -524,34 +531,34 @@ module.exports = {
524
531
  // Borders
525
532
  matchUtilities({
526
533
  'theme-border': (value) => {
527
- const isDark = value.endsWith('-dark');
534
+ const [color, suffix = ''] = value.split('..');
528
535
 
529
536
  return {
530
- borderColor: theme(`borderColor.${value}`),
537
+ borderColor: theme(`borderColor.${color}`),
531
538
  borderStyle: 'solid',
532
539
  borderWidth: 1,
533
540
 
534
541
  '&[disabled]': {
535
- borderColor: theme(`borderColor.${isDark ? 'disabled-dark' : 'disabled'}`),
542
+ borderColor: theme('borderColor.disabled' + suffix),
536
543
  },
537
544
  };
538
545
  },
539
546
  }, {
540
547
  values: {
541
548
  'primary': 'primary',
542
- 'primary-dark': 'primary-dark',
549
+ 'primary-dark': 'primary..-dark',
543
550
 
544
551
  'success': 'success',
545
- 'success-dark': 'success-dark',
552
+ 'success-dark': 'success..-dark',
546
553
 
547
554
  'warning': 'warning',
548
- 'warning-dark': 'warning-dark',
555
+ 'warning-dark': 'warning..-dark',
549
556
 
550
557
  'error': 'error',
551
- 'error-dark': 'error-dark',
558
+ 'error-dark': 'error..-dark',
552
559
 
553
560
  'outline': 'outline',
554
- 'outline-dark': 'outline-dark',
561
+ 'outline-dark': 'outline..-dark',
555
562
 
556
563
  'inherit': 'inherit',
557
564
  },
@@ -563,7 +570,7 @@ module.exports = {
563
570
  const [color, suffix = ''] = value.split('..');
564
571
 
565
572
  return {
566
- outlineColor: theme(`outlineColor.${color}-opacity-0-16${suffix}`),
573
+ outlineColor: theme(`outlineColor.${color}-opacity-0-16` + suffix),
567
574
  outlineStyle: 'solid',
568
575
  outlineWidth: 2,
569
576
  outlineOffset: 0,