@onereach/styles 2.43.0 → 2.43.1-beta.3099.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 +2 -3
- package/tailwind.config.preset.js +38 -12
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onereach/styles",
|
|
3
|
-
"version": "2.43.0",
|
|
3
|
+
"version": "2.43.1-beta.3099.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": "edf68c896928966f4f78ff453e2bc3095f5b885a"
|
|
58
|
+
}
|
|
60
59
|
}
|
|
@@ -21,17 +21,19 @@ 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
|
+
|
|
24
32
|
module.exports = {
|
|
25
33
|
darkMode: ['class', '[data-theme="dark"]'],
|
|
26
34
|
|
|
27
35
|
theme: {
|
|
28
|
-
screens: {
|
|
29
|
-
'sm': '640px',
|
|
30
|
-
'md': '768px',
|
|
31
|
-
'lg': '1024px',
|
|
32
|
-
'xl': '1280px',
|
|
33
|
-
'2xl': '1536px',
|
|
34
|
-
},
|
|
36
|
+
screens: {},
|
|
35
37
|
|
|
36
38
|
spacing: {
|
|
37
39
|
...parseSpacingTokens(spacingTokens),
|
|
@@ -188,6 +190,16 @@ module.exports = {
|
|
|
188
190
|
plugins: [
|
|
189
191
|
// Core
|
|
190
192
|
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
|
+
|
|
191
203
|
addVariant('enabled', '&:not([disabled])');
|
|
192
204
|
addVariant('disabled', '&[disabled]');
|
|
193
205
|
|
|
@@ -316,7 +328,21 @@ module.exports = {
|
|
|
316
328
|
lineHeight: optionsMobile?.lineHeight ?? optionsDesktop?.lineHeight,
|
|
317
329
|
|
|
318
330
|
// Desktop
|
|
319
|
-
[`@media (min-width: ${
|
|
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"]': {
|
|
320
346
|
fontFamily: theme(`fontFamily.${value}`),
|
|
321
347
|
fontWeight: theme(`fontWeight.${value}`),
|
|
322
348
|
fontSize: fontSizeDesktop,
|
|
@@ -394,7 +420,7 @@ module.exports = {
|
|
|
394
420
|
},
|
|
395
421
|
|
|
396
422
|
// Desktop
|
|
397
|
-
|
|
423
|
+
'@media (any-hover: hover)': {
|
|
398
424
|
'&:hover, &[force-state="hover"]': {
|
|
399
425
|
backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
|
|
400
426
|
},
|
|
@@ -436,7 +462,7 @@ module.exports = {
|
|
|
436
462
|
},
|
|
437
463
|
|
|
438
464
|
// Desktop
|
|
439
|
-
|
|
465
|
+
'@media (any-hover: hover)': {
|
|
440
466
|
'&:hover, &[force-state="hover"]': {
|
|
441
467
|
backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
|
|
442
468
|
},
|
|
@@ -478,7 +504,7 @@ module.exports = {
|
|
|
478
504
|
},
|
|
479
505
|
|
|
480
506
|
// Desktop
|
|
481
|
-
|
|
507
|
+
'@media (any-hover: hover)': {
|
|
482
508
|
'&:hover, &[force-state="hover"]': {
|
|
483
509
|
backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
|
|
484
510
|
},
|
|
@@ -520,7 +546,7 @@ module.exports = {
|
|
|
520
546
|
},
|
|
521
547
|
|
|
522
548
|
// Desktop
|
|
523
|
-
|
|
549
|
+
'@media (any-hover: hover)': {
|
|
524
550
|
'&:hover, &[force-state="hover"]': {
|
|
525
551
|
color: theme(`textColor.${token}-hover` + suffix),
|
|
526
552
|
},
|