@onereach/styles 3.1.1 → 3.1.2-beta.3188.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 +3 -3
- package/tailwind-screens.js +7 -0
- package/tailwind.config.json +2 -13
- package/tailwind.config.preset.js +32 -12
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onereach/styles",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.2-beta.3188.0",
|
|
4
4
|
"description": "Styles for or-ui-next",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"main": "./main.css",
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
"tailwind.config.js",
|
|
19
19
|
"tailwind.config.json",
|
|
20
20
|
"tailwind.config.preset.js",
|
|
21
|
+
"tailwind-screens.js",
|
|
21
22
|
"tailwind-utils.js",
|
|
22
23
|
"tokens.css",
|
|
23
24
|
"main-v3.css",
|
|
@@ -57,6 +58,5 @@
|
|
|
57
58
|
},
|
|
58
59
|
"publishConfig": {
|
|
59
60
|
"access": "public"
|
|
60
|
-
}
|
|
61
|
-
"gitHead": "d470f8b4c4169258c301f44e44ec5abff0619895"
|
|
61
|
+
}
|
|
62
62
|
}
|
package/tailwind.config.json
CHANGED
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"theme": {
|
|
3
|
-
"screens": {
|
|
4
|
-
"sm": "640px",
|
|
5
|
-
"md": "768px",
|
|
6
|
-
"lg": "1024px",
|
|
7
|
-
"xl": "1280px",
|
|
8
|
-
"2xl": "1536px"
|
|
9
|
-
},
|
|
3
|
+
"screens": {},
|
|
10
4
|
"spacing": {
|
|
11
5
|
"none": "0px",
|
|
12
6
|
"xs": "4px",
|
|
@@ -2990,12 +2984,7 @@
|
|
|
2990
2984
|
"min": "min-content",
|
|
2991
2985
|
"max": "max-content",
|
|
2992
2986
|
"fit": "fit-content",
|
|
2993
|
-
"prose": "65ch"
|
|
2994
|
-
"screen-sm": "640px",
|
|
2995
|
-
"screen-md": "768px",
|
|
2996
|
-
"screen-lg": "1024px",
|
|
2997
|
-
"screen-xl": "1280px",
|
|
2998
|
-
"screen-2xl": "1536px"
|
|
2987
|
+
"prose": "65ch"
|
|
2999
2988
|
},
|
|
3000
2989
|
"minHeight": {
|
|
3001
2990
|
"0": "0px",
|
|
@@ -21,17 +21,13 @@ const {
|
|
|
21
21
|
typeStyles: typographyTokens,
|
|
22
22
|
} = require('./src/variables/tokens/design-tokens-next.json');
|
|
23
23
|
|
|
24
|
+
const screens = require('./tailwind-screens');
|
|
25
|
+
|
|
24
26
|
module.exports = {
|
|
25
27
|
darkMode: ['class', '[data-theme="dark"]'],
|
|
26
28
|
|
|
27
29
|
theme: {
|
|
28
|
-
screens: {
|
|
29
|
-
'sm': '640px',
|
|
30
|
-
'md': '768px',
|
|
31
|
-
'lg': '1024px',
|
|
32
|
-
'xl': '1280px',
|
|
33
|
-
'2xl': '1536px',
|
|
34
|
-
},
|
|
30
|
+
screens: {},
|
|
35
31
|
|
|
36
32
|
spacing: {
|
|
37
33
|
...parseSpacingTokens(spacingTokens),
|
|
@@ -188,6 +184,16 @@ module.exports = {
|
|
|
188
184
|
plugins: [
|
|
189
185
|
// Core
|
|
190
186
|
plugin(({ addVariant, addUtilities }) => {
|
|
187
|
+
const breakpoints = Object.keys(screens);
|
|
188
|
+
|
|
189
|
+
breakpoints.forEach((breakpoint) => {
|
|
190
|
+
addVariant(breakpoint, [
|
|
191
|
+
`@media (min-width: ${screens[breakpoint]})`,
|
|
192
|
+
`[force-screen~="${breakpoint}"] &`,
|
|
193
|
+
`&[force-screen~="${breakpoint}"]`,
|
|
194
|
+
]);
|
|
195
|
+
});
|
|
196
|
+
|
|
191
197
|
addVariant('enabled', '&:not([disabled])');
|
|
192
198
|
addVariant('disabled', '&[disabled]');
|
|
193
199
|
|
|
@@ -316,7 +322,21 @@ module.exports = {
|
|
|
316
322
|
lineHeight: optionsMobile?.lineHeight ?? optionsDesktop?.lineHeight,
|
|
317
323
|
|
|
318
324
|
// Desktop
|
|
319
|
-
[`@media (min-width: ${
|
|
325
|
+
[`@media (min-width: ${screens.md})`]: {
|
|
326
|
+
fontFamily: theme(`fontFamily.${value}`),
|
|
327
|
+
fontWeight: theme(`fontWeight.${value}`),
|
|
328
|
+
fontSize: fontSizeDesktop,
|
|
329
|
+
lineHeight: optionsDesktop?.lineHeight,
|
|
330
|
+
},
|
|
331
|
+
|
|
332
|
+
'[force-screen~="md"] &': {
|
|
333
|
+
fontFamily: theme(`fontFamily.${value}`),
|
|
334
|
+
fontWeight: theme(`fontWeight.${value}`),
|
|
335
|
+
fontSize: fontSizeDesktop,
|
|
336
|
+
lineHeight: optionsDesktop?.lineHeight,
|
|
337
|
+
},
|
|
338
|
+
|
|
339
|
+
'&[force-screen~="md"]': {
|
|
320
340
|
fontFamily: theme(`fontFamily.${value}`),
|
|
321
341
|
fontWeight: theme(`fontWeight.${value}`),
|
|
322
342
|
fontSize: fontSizeDesktop,
|
|
@@ -394,7 +414,7 @@ module.exports = {
|
|
|
394
414
|
},
|
|
395
415
|
|
|
396
416
|
// Desktop
|
|
397
|
-
|
|
417
|
+
'@media (any-hover: hover)': {
|
|
398
418
|
'&:hover, &[force-state="hover"]': {
|
|
399
419
|
backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
|
|
400
420
|
},
|
|
@@ -436,7 +456,7 @@ module.exports = {
|
|
|
436
456
|
},
|
|
437
457
|
|
|
438
458
|
// Desktop
|
|
439
|
-
|
|
459
|
+
'@media (any-hover: hover)': {
|
|
440
460
|
'&:hover, &[force-state="hover"]': {
|
|
441
461
|
backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
|
|
442
462
|
},
|
|
@@ -478,7 +498,7 @@ module.exports = {
|
|
|
478
498
|
},
|
|
479
499
|
|
|
480
500
|
// Desktop
|
|
481
|
-
|
|
501
|
+
'@media (any-hover: hover)': {
|
|
482
502
|
'&:hover, &[force-state="hover"]': {
|
|
483
503
|
backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
|
|
484
504
|
},
|
|
@@ -520,7 +540,7 @@ module.exports = {
|
|
|
520
540
|
},
|
|
521
541
|
|
|
522
542
|
// Desktop
|
|
523
|
-
|
|
543
|
+
'@media (any-hover: hover)': {
|
|
524
544
|
'&:hover, &[force-state="hover"]': {
|
|
525
545
|
color: theme(`textColor.${token}-hover` + suffix),
|
|
526
546
|
},
|