@onereach/styles 2.9.11-next.800.0 → 2.9.11-next.802.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 +1 -1
- package/tailwind-utils.js +28 -41
- package/tailwind.config.preset.js +1 -5
package/package.json
CHANGED
package/tailwind-utils.js
CHANGED
|
@@ -29,67 +29,54 @@ module.exports = {
|
|
|
29
29
|
};
|
|
30
30
|
|
|
31
31
|
return Object.values(designTokens)
|
|
32
|
-
.map((
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
})
|
|
32
|
+
.map(({ name, value }) => ({
|
|
33
|
+
...name.match(/^(?:(?<theme>light|dark)-)?(?<name>.+)$/).groups,
|
|
34
|
+
value: value.replace(/rgba\((\d+),(\d+),(\d+),([\d.]+)\)/, 'rgba($1 $2 $3 / $4)'),
|
|
35
|
+
}))
|
|
36
|
+
.map(({ name, ...props }) => ({
|
|
37
|
+
name,
|
|
38
|
+
group: defineColorGroup(name),
|
|
39
|
+
...props,
|
|
40
|
+
}))
|
|
42
41
|
.filter(({ group }) => colorGroups.includes(group))
|
|
43
|
-
.reduce((preset, { name, theme,
|
|
42
|
+
.reduce((preset, { name, theme, value }) => ({
|
|
44
43
|
...preset,
|
|
45
|
-
[!theme || theme === 'light' ? name : `${name}-${theme}`]:
|
|
44
|
+
[!theme || theme === 'light' ? name : `${name}-${theme}`]: value,
|
|
46
45
|
}), {});
|
|
47
46
|
},
|
|
48
47
|
|
|
49
48
|
parseBorderRadiusTokens(designTokens) {
|
|
50
49
|
return Object.values(designTokens)
|
|
51
|
-
.
|
|
52
|
-
name: token.name,
|
|
53
|
-
borderRadius: token.value,
|
|
54
|
-
}))
|
|
55
|
-
.reduce((preset, { name, borderRadius }) => ({
|
|
50
|
+
.reduce((preset, { name, value }) => ({
|
|
56
51
|
...preset,
|
|
57
|
-
[name]:
|
|
52
|
+
[name]: value,
|
|
58
53
|
}), {});
|
|
59
54
|
},
|
|
60
55
|
|
|
61
56
|
parseBorderWidthTokens(designTokens) {
|
|
62
57
|
return Object.values(designTokens)
|
|
63
|
-
.map((
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
};
|
|
70
|
-
})
|
|
71
|
-
.reduce((preset, { name, borderWidth }) => ({
|
|
58
|
+
.map(({ value }) => value.split(' ')[0])
|
|
59
|
+
.map((value) => ({
|
|
60
|
+
name: value.slice(0, -2),
|
|
61
|
+
value,
|
|
62
|
+
}))
|
|
63
|
+
.reduce((preset, { name, value }) => ({
|
|
72
64
|
...preset,
|
|
73
|
-
[name]:
|
|
65
|
+
[name]: value,
|
|
74
66
|
}), {});
|
|
75
67
|
},
|
|
76
68
|
|
|
77
69
|
parseBoxShadowTokens(designTokens) {
|
|
78
70
|
return Object.values(designTokens)
|
|
79
|
-
.map((
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
.replace(/\b0px\b/g, '0')
|
|
87
|
-
.replace(/rgba\((\d+),(\d+),(\d+),([\d.]+)\)/g, 'rgba($1 $2 $3 / $4)'),
|
|
88
|
-
};
|
|
89
|
-
})
|
|
90
|
-
.reduce((preset, { name, theme, boxShadow }) => ({
|
|
71
|
+
.map(({ name, value }) => ({
|
|
72
|
+
...name.match(/^(?:(?<theme>light|dark)-)?(?<name>.+)$/).groups,
|
|
73
|
+
value: value
|
|
74
|
+
.replace(/\b0px\b/g, '0')
|
|
75
|
+
.replace(/rgba\((\d+),(\d+),(\d+),([\d.]+)\)/g, 'rgba($1 $2 $3 / $4)'),
|
|
76
|
+
}))
|
|
77
|
+
.reduce((preset, { name, theme, value }) => ({
|
|
91
78
|
...preset,
|
|
92
|
-
[!theme || theme === 'light' ? name : `${name}-${theme}`]:
|
|
79
|
+
[!theme || theme === 'light' ? name : `${name}-${theme}`]: value,
|
|
93
80
|
}), {});
|
|
94
81
|
},
|
|
95
82
|
|
|
@@ -74,11 +74,7 @@ module.exports = {
|
|
|
74
74
|
},
|
|
75
75
|
},
|
|
76
76
|
|
|
77
|
-
borderRadius:
|
|
78
|
-
...parseBorderRadiusTokens(borderRadiusTokens),
|
|
79
|
-
'full': '9999px',
|
|
80
|
-
},
|
|
81
|
-
|
|
77
|
+
borderRadius: parseBorderRadiusTokens(borderRadiusTokens),
|
|
82
78
|
borderWidth: parseBorderWidthTokens(borderWidthTokens),
|
|
83
79
|
boxShadow: parseBoxShadowTokens(boxShadowTokens),
|
|
84
80
|
|