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