@onereach/styles 3.0.1-beta.3128.0 → 3.0.1-beta.3129.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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onereach/styles",
3
- "version": "3.0.1-beta.3128.0",
3
+ "version": "3.0.1-beta.3129.0",
4
4
  "description": "Styles for or-ui-next",
5
5
  "license": "UNLICENSED",
6
6
  "main": "./main.css",
@@ -21,19 +21,17 @@ const {
21
21
  typeStyles: typographyTokens,
22
22
  } = require('./src/variables/tokens/design-tokens-next.json');
23
23
 
24
- const screens = {
25
- 'sm': '640px',
26
- 'md': '768px',
27
- 'lg': '1024px',
28
- 'xl': '1280px',
29
- '2xl': '1536px',
30
- };
31
-
32
24
  module.exports = {
33
25
  darkMode: ['class', '[data-theme="dark"]'],
34
26
 
35
27
  theme: {
36
- screens: {},
28
+ screens: {
29
+ 'sm': '640px',
30
+ 'md': '768px',
31
+ 'lg': '1024px',
32
+ 'xl': '1280px',
33
+ '2xl': '1536px',
34
+ },
37
35
 
38
36
  spacing: {
39
37
  ...parseSpacingTokens(spacingTokens),
@@ -190,16 +188,6 @@ module.exports = {
190
188
  plugins: [
191
189
  // Core
192
190
  plugin(({ addVariant, addUtilities }) => {
193
- const breakpoints = Object.keys(screens);
194
-
195
- breakpoints.forEach((breakpoint) => {
196
- addVariant(breakpoint, [
197
- `@media (min-width: ${screens[breakpoint]})`,
198
- `[force-screen~="${breakpoint}"] &`,
199
- `&[force-screen~="${breakpoint}"]`,
200
- ]);
201
- });
202
-
203
191
  addVariant('enabled', '&:not([disabled])');
204
192
  addVariant('disabled', '&[disabled]');
205
193
 
@@ -328,21 +316,7 @@ module.exports = {
328
316
  lineHeight: optionsMobile?.lineHeight ?? optionsDesktop?.lineHeight,
329
317
 
330
318
  // Desktop
331
- [`@media (min-width: ${screens.md})`]: {
332
- fontFamily: theme(`fontFamily.${value}`),
333
- fontWeight: theme(`fontWeight.${value}`),
334
- fontSize: fontSizeDesktop,
335
- lineHeight: optionsDesktop?.lineHeight,
336
- },
337
-
338
- '[force-screen~="md"] &': {
339
- fontFamily: theme(`fontFamily.${value}`),
340
- fontWeight: theme(`fontWeight.${value}`),
341
- fontSize: fontSizeDesktop,
342
- lineHeight: optionsDesktop?.lineHeight,
343
- },
344
-
345
- '&[force-screen~="md"]': {
319
+ [`@media (min-width: ${theme('screens.md')})`]: {
346
320
  fontFamily: theme(`fontFamily.${value}`),
347
321
  fontWeight: theme(`fontWeight.${value}`),
348
322
  fontSize: fontSizeDesktop,
@@ -420,7 +394,7 @@ module.exports = {
420
394
  },
421
395
 
422
396
  // Desktop
423
- '@media (any-hover: hover)': {
397
+ [`@media (min-width: ${theme('screens.md')})`]: {
424
398
  '&:hover, &[force-state="hover"]': {
425
399
  backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
426
400
  },
@@ -462,7 +436,7 @@ module.exports = {
462
436
  },
463
437
 
464
438
  // Desktop
465
- '@media (any-hover: hover)': {
439
+ [`@media (min-width: ${theme('screens.md')})`]: {
466
440
  '&:hover, &[force-state="hover"]': {
467
441
  backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
468
442
  },
@@ -504,7 +478,7 @@ module.exports = {
504
478
  },
505
479
 
506
480
  // Desktop
507
- '@media (any-hover: hover)': {
481
+ [`@media (min-width: ${theme('screens.md')})`]: {
508
482
  '&:hover, &[force-state="hover"]': {
509
483
  backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
510
484
  },
@@ -546,7 +520,7 @@ module.exports = {
546
520
  },
547
521
 
548
522
  // Desktop
549
- '@media (any-hover: hover)': {
523
+ [`@media (min-width: ${theme('screens.md')})`]: {
550
524
  '&:hover, &[force-state="hover"]': {
551
525
  color: theme(`textColor.${token}-hover` + suffix),
552
526
  },