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