@onereach/styles 2.13.0-next.954.0 → 2.13.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.
Files changed (10) hide show
  1. package/dist/index.css +265 -0
  2. package/dist/index.css.map +1 -0
  3. package/dist/index.min.css +1 -0
  4. package/main.css +2 -0
  5. package/package.json +22 -7
  6. package/rollup-plugin-tailwindcss-cli.css +4 -0
  7. package/src/variables/tokens/design-tokens-next.json +106 -212
  8. package/tailwind-utils.js +30 -41
  9. package/tailwind.config.preset.js +22 -61
  10. package/tokens.css +112 -0
package/tailwind-utils.js CHANGED
@@ -11,6 +11,7 @@ module.exports = {
11
11
  const isBackground = (name) => /\b(?:container|background|surface)\b/.test(name) && !isText(name);
12
12
  const isText = (name) => /\b(?:on)\b/.test(name);
13
13
  const isShadow = (name) => /\b(?:shadow)\b/.test(name);
14
+ const isOpacity = (name) => /\b(?:opacity)\b/.test(name);
14
15
 
15
16
  const defineColorGroup = (name) => {
16
17
  switch (true) {
@@ -21,6 +22,7 @@ module.exports = {
21
22
  return 'text';
22
23
 
23
24
  case isShadow(name):
25
+ case isOpacity(name):
24
26
  return null;
25
27
 
26
28
  default:
@@ -29,67 +31,54 @@ module.exports = {
29
31
  };
30
32
 
31
33
  return Object.values(designTokens)
32
- .map((token) => {
33
- const { name, theme } = token.name.match(/^(?:(?<theme>light|dark)-)?(?<name>.+)$/).groups;
34
-
35
- return {
36
- name,
37
- theme,
38
- group: defineColorGroup(name),
39
- color: token.value.replace(/rgba\((\d+),(\d+),(\d+),([\d.]+)\)/, 'rgba($1 $2 $3 / $4)'),
40
- };
41
- })
34
+ .map(({ name, value }) => ({
35
+ ...name.match(/^(?:(?<theme>light|dark)-)?(?<name>.+)$/).groups,
36
+ value: value.replace(/rgba\((\d+),(\d+),(\d+),([\d.]+)\)/, 'rgba($1 $2 $3 / $4)'),
37
+ }))
38
+ .map(({ name, ...props }) => ({
39
+ name,
40
+ group: defineColorGroup(name),
41
+ ...props,
42
+ }))
42
43
  .filter(({ group }) => colorGroups.includes(group))
43
- .reduce((preset, { name, theme, color }) => ({
44
+ .reduce((preset, { name, theme, value }) => ({
44
45
  ...preset,
45
- [!theme || theme === 'light' ? name : `${name}-${theme}`]: color,
46
+ [!theme || theme === 'light' ? name : `${name}-${theme}`]: value,
46
47
  }), {});
47
48
  },
48
49
 
49
50
  parseBorderRadiusTokens(designTokens) {
50
51
  return Object.values(designTokens)
51
- .map((token) => ({
52
- name: token.name,
53
- borderRadius: token.value,
54
- }))
55
- .reduce((preset, { name, borderRadius }) => ({
52
+ .reduce((preset, { name, value }) => ({
56
53
  ...preset,
57
- [name]: borderRadius,
54
+ [name]: value,
58
55
  }), {});
59
56
  },
60
57
 
61
58
  parseBorderWidthTokens(designTokens) {
62
59
  return Object.values(designTokens)
63
- .map((token) => {
64
- const borderWidth = token.value.split(' ')[0];
65
-
66
- return {
67
- name: borderWidth.slice(0, -2),
68
- borderWidth,
69
- };
70
- })
71
- .reduce((preset, { name, borderWidth }) => ({
60
+ .map(({ value }) => value.split(' ')[0])
61
+ .map((value) => ({
62
+ name: value.slice(0, -2),
63
+ value,
64
+ }))
65
+ .reduce((preset, { name, value }) => ({
72
66
  ...preset,
73
- [name]: borderWidth,
67
+ [name]: value,
74
68
  }), {});
75
69
  },
76
70
 
77
71
  parseBoxShadowTokens(designTokens) {
78
72
  return Object.values(designTokens)
79
- .map((token) => {
80
- const { name, theme } = token.name.match(/^(?:(?<theme>light|dark)-)?(?<name>.+)$/).groups;
81
-
82
- return {
83
- name,
84
- theme,
85
- boxShadow: token.value
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 }) => ({
73
+ .map(({ name, value }) => ({
74
+ ...name.match(/^(?:(?<theme>light|dark)-)?(?<name>.+)$/).groups,
75
+ value: value
76
+ .replace(/\b0px\b/g, '0')
77
+ .replace(/rgba\((\d+),(\d+),(\d+),([\d.]+)\)/g, 'rgba($1 $2 $3 / $4)'),
78
+ }))
79
+ .reduce((preset, { name, theme, value }) => ({
91
80
  ...preset,
92
- [!theme || theme === 'light' ? name : `${name}-${theme}`]: boxShadow,
81
+ [!theme || theme === 'light' ? name : `${name}-${theme}`]: value,
93
82
  }), {});
94
83
  },
95
84
 
package/tailwind.config.preset.js CHANGED
@@ -21,61 +21,19 @@ const {
21
21
  } = require('./src/variables/tokens/design-tokens-next.json');
22
22
 
23
23
  module.exports = {
24
- darkMode: ['class', '[data-theme="dark"]'],
24
+ darkMode: 'class',
25
25
 
26
26
  theme: {
27
27
  spacing: parseSpacingTokens(spacingTokens),
28
28
 
29
- backgroundColor: {
30
- // Avoid using `text` colors as a background (only for corner cases)
31
- ...parseColorTokens(colorTokens, ['generic', 'background', 'text']),
32
- 'inherit': 'inherit',
33
- 'current': 'currentColor',
34
- 'transparent': 'transparent',
35
- },
36
-
37
- textColor: {
38
- ...parseColorTokens(colorTokens, ['generic', 'text']),
39
- 'inherit': 'inherit',
40
- 'current': 'currentColor',
41
- 'transparent': 'transparent',
42
- },
43
-
44
- borderColor: {
45
- ...parseColorTokens(colorTokens, ['generic']),
46
- 'inherit': 'inherit',
47
- 'current': 'currentColor',
48
- 'transparent': 'transparent',
49
- },
50
-
51
- outlineColor: {
52
- ...parseColorTokens(colorTokens, ['generic']),
53
- 'inherit': 'inherit',
54
- 'current': 'currentColor',
55
- 'transparent': 'transparent',
56
- },
57
-
58
- fill: {
59
- ...parseColorTokens(colorTokens, ['generic', 'background', 'text']),
60
- 'inherit': 'inherit',
61
- 'current': 'currentColor',
62
- 'transparent': 'transparent',
63
- },
64
-
65
- stroke: {
66
- ...parseColorTokens(colorTokens, ['generic', 'background', 'text']),
67
- 'inherit': 'inherit',
68
- 'current': 'currentColor',
69
- 'transparent': 'transparent',
70
- },
29
+ backgroundColor: parseColorTokens(colorTokens, ['generic', 'background', 'text']),
30
+ textColor: parseColorTokens(colorTokens, ['generic', 'text']),
31
+ borderColor: parseColorTokens(colorTokens, ['generic']),
32
+ outlineColor: parseColorTokens(colorTokens, ['generic']),
71
33
 
72
- content: {
73
- 'label-required': '"*"',
74
-
75
- 'checkbox-unchecked': '""',
76
- 'checkbox-checked': '"check_small"',
77
- 'checkbox-indeterminate': '"check_indeterminate_small"',
78
- },
34
+ // SVG Palette
35
+ fill: parseColorTokens(colorTokens, ['generic', 'background', 'text']),
36
+ stroke: parseColorTokens(colorTokens, ['generic', 'background', 'text']),
79
37
 
80
38
  animation: {
81
39
  'circular-loader': 'circular-loader 1400ms linear infinite',
@@ -116,19 +74,19 @@ module.exports = {
116
74
  },
117
75
  },
118
76
 
77
+ content: {
78
+ 'checkbox-unchecked': '""',
79
+ 'checkbox-checked': '"check_small"',
80
+ 'checkbox-indeterminate': '"check_indeterminate_small"',
81
+ },
82
+
119
83
  borderRadius: {
120
84
  ...parseBorderRadiusTokens(borderRadiusTokens),
121
85
  'full': '9999px',
122
86
  },
123
87
 
124
- borderWidth: {
125
- ...parseBorderWidthTokens(borderWidthTokens),
126
- },
127
-
128
- boxShadow: {
129
- ...parseBoxShadowTokens(boxShadowTokens),
130
- 'base': '0 1px 1px rgba(0 0 0 0.24), 0 0 1px rgba(0 0 0 0.16)',
131
- },
88
+ borderWidth: parseBorderWidthTokens(borderWidthTokens),
89
+ boxShadow: parseBoxShadowTokens(boxShadowTokens),
132
90
 
133
91
  fontFamily: {
134
92
  ...parseFontFamilyTokens(typographyTokens),
@@ -139,7 +97,7 @@ module.exports = {
139
97
  fontSize: {
140
98
  ...parseFontSizeTokens(typographyTokens),
141
99
  'inherit': 'inherit',
142
- 'icon': ['1.15em', { lineHeight: 1 }],
100
+ 'icon': '1.15em',
143
101
  },
144
102
 
145
103
  fontWeight: {
@@ -147,9 +105,13 @@ module.exports = {
147
105
  'inherit': 'inherit',
148
106
  },
149
107
 
108
+ letterSpacing: false,
109
+
150
110
  lineHeight: {
151
111
  'inherit': 'inherit',
152
112
  },
113
+
114
+ opacity: false,
153
115
  },
154
116
 
155
117
  plugins: [
@@ -203,7 +165,7 @@ module.exports = {
203
165
  '&[type="radio"]:not(:checked)',
204
166
  ]);
205
167
 
206
- addVariant('selected', '&[selected]');
168
+ addVariant('indeterminate', ['&:indeterminate']);
207
169
 
208
170
  addVariant('valid', ['&:valid', '&:not([invalid])']);
209
171
  addVariant('invalid', ['&:invalid', '&[invalid]']);
@@ -211,7 +173,6 @@ module.exports = {
211
173
  addVariant('enabled', ['&:enabled', '&:not([disabled])']);
212
174
  addVariant('disabled', ['&:disabled', '&[disabled]']);
213
175
 
214
- // TODO: Remove when migration complete
215
176
  addUtilities({
216
177
  '.visually-hidden': {
217
178
  width: 0,
package/tokens.css ADDED
@@ -0,0 +1,112 @@
1
+ :root {
2
+ --or-c-white: rgba(255,255,255,1);
3
+ --or-c-black: rgba(0,0,0,1);
4
+ }
5
+ :root, [data-theme="light"] {
6
+ --or-c-primary: rgba(0,95,177,1);
7
+ --or-c-on-primary: rgba(255,255,255,1);
8
+ --or-c-primary-container: rgba(211,227,255,1);
9
+ --or-c-on-primary-container: rgba(0,28,59,1);
10
+ --or-c-secondary: rgba(84,95,113,1);
11
+ --or-c-on-secondary: rgba(255,255,255,1);
12
+ --or-c-secondary-container: rgba(216,227,248,1);
13
+ --or-c-on-secondary-container: rgba(18,28,43,1);
14
+ --or-c-tertiary: rgba(109,86,118,1);
15
+ --or-c-on-tertiary: rgba(255,255,255,1);
16
+ --or-c-tertiary-container: rgba(247,217,255,1);
17
+ --or-c-on-tertiary-container: rgba(39,19,48,1);
18
+ --or-c-error: rgba(186,27,27,1);
19
+ --or-c-on-error: rgba(255,255,255,1);
20
+ --or-c-error-container: rgba(255,237,233,1);
21
+ --or-c-on-error-container: rgba(147,0,6,1);
22
+ --or-c-success: rgba(44,137,0,1);
23
+ --or-c-on-success: rgba(255,255,255,1);
24
+ --or-c-success-container: rgba(204,255,170,1);
25
+ --or-c-on-success-container: rgba(22,82,0,1);
26
+ --or-c-warning: rgba(153,112,0,1);
27
+ --or-c-on-warning: rgba(255,255,255,1);
28
+ --or-c-warning-container: rgba(255,239,209,1);
29
+ --or-c-on-warning-container: rgba(92,66,0,1);
30
+ --or-c-background: rgba(255,255,255,1);
31
+ --or-c-on-background: rgba(27,27,29,1);
32
+ --or-c-surface: rgba(253,251,255,1);
33
+ --or-c-surface-1: rgba(240,243,251,1);
34
+ --or-c-surface-2: rgba(240,243,251,1);
35
+ --or-c-surface-3: rgba(225,234,246,1);
36
+ --or-c-surface-4: rgba(223,232,246,1);
37
+ --or-c-surface-5: rgba(218,229,244,1);
38
+ --or-c-on-surface: rgba(27,27,29,1);
39
+ --or-c-surface-variant: rgba(223,226,235,1);
40
+ --or-c-on-surface-variant: rgba(67,71,78,1);
41
+ --or-c-inverse-surface: rgba(47,48,51,1);
42
+ --or-c-inverse-on-surface: rgba(241,240,244,1);
43
+ --or-c-inverse-primary: rgba(164,200,255,1);
44
+ --or-c-outline: rgba(116,119,127,1);
45
+ --or-c-shadow: rgba(0,0,0,1);
46
+ --or-c-on-disabled: rgba(27,27,29,0.3);
47
+ --or-c-primary-opacity-0-08: rgba(0,95,177,0.08);
48
+ --or-c-primary-opacity-0-12: rgba(0,95,177,0.12);
49
+ --or-c-primary-opacity-0-16: rgba(0,95,177,0.16);
50
+ --or-c-primary-hover: rgba(0,119,220,1);
51
+ --or-c-error-hover: rgba(221,55,48,1);
52
+ --or-c-success-hover: rgba(56,166,0,1);
53
+ --or-c-warning-hover: rgba(153,112,0,1);
54
+ --or-c-error-opacity-0-08: rgba(186,27,27,0.08);
55
+ --or-c-error-opacity-0-12: rgba(186,27,27,0.12);
56
+ --or-c-error-opacity-0-16: rgba(186,27,27,0.16);
57
+ --or-c-disabled: rgba(27,27,29,0.12);
58
+ }
59
+ [data-theme="dark-mode"], [data-theme="dark"] {
60
+ --or-c-primary: rgba(164,200,255,1);
61
+ --or-c-on-primary: rgba(0,48,95,1);
62
+ --or-c-primary-container: rgba(0,71,136,1);
63
+ --or-c-on-primary-container: rgba(211,227,255,1);
64
+ --or-c-secondary: rgba(188,199,220,1);
65
+ --or-c-on-secondary: rgba(38,49,65,1);
66
+ --or-c-secondary-container: rgba(61,71,88,1);
67
+ --or-c-on-secondary-container: rgba(216,227,248,1);
68
+ --or-c-tertiary: rgba(218,189,226,1);
69
+ --or-c-on-tertiary: rgba(61,40,70,1);
70
+ --or-c-tertiary-container: rgba(85,63,94,1);
71
+ --or-c-on-tertiary-container: rgba(247,217,255,1);
72
+ --or-c-error: rgba(255,180,169,1);
73
+ --or-c-on-error: rgba(104,0,3,1);
74
+ --or-c-error-container: rgba(147,0,6,1);
75
+ --or-c-on-error-container: rgba(255,218,212,1);
76
+ --or-c-success: rgba(108,224,54,1);
77
+ --or-c-on-success: rgba(12,57,0,1);
78
+ --or-c-success-container: rgba(22,82,0,1);
79
+ --or-c-on-success-container: rgba(136,253,82,1);
80
+ --or-c-warning: rgba(251,188,12,1);
81
+ --or-c-on-warning: rgba(64,45,0,1);
82
+ --or-c-warning-container: rgba(92,66,0,1);
83
+ --or-c-on-warning-container: rgba(255,223,156,1);
84
+ --or-c-background: rgba(27,27,29,1);
85
+ --or-c-on-background: rgba(227,226,230,1);
86
+ --or-c-surface: rgba(27,27,29,1);
87
+ --or-c-surface-1: rgba(34,36,40,1);
88
+ --or-c-surface-2: rgba(38,41,47,1);
89
+ --or-c-surface-3: rgba(42,46,54,1);
90
+ --or-c-surface-4: rgba(43,48,56,1);
91
+ --or-c-surface-5: rgba(46,51,61,1);
92
+ --or-c-on-surface: rgba(227,226,230,1);
93
+ --or-c-surface-variant: rgba(67,71,78,1);
94
+ --or-c-on-surface-variant: rgba(195,198,207,1);
95
+ --or-c-inverse-surface: rgba(227,226,230,1);
96
+ --or-c-inverse-on-surface: rgba(27,27,29,1);
97
+ --or-c-inverse-primary: rgba(0,95,177,1);
98
+ --or-c-outline: rgba(142,145,153,1);
99
+ --or-c-shadow: rgba(0,0,0,1);
100
+ --or-c-on-disabled: rgba(227,226,230,0.3);
101
+ --or-c-primary-opacity-0-08: rgba(164,200,255,0.08);
102
+ --or-c-primary-opacity-0-12: rgba(164,200,255,0.12);
103
+ --or-c-primary-opacity-0-16: rgba(164,200,255,0.16);
104
+ --or-c-primary-hover: rgba(111,174,255,1);
105
+ --or-c-error-hover: rgba(255,137,122,1);
106
+ --or-c-success-hover: rgba(81,195,20,1);
107
+ --or-c-warning-hover: rgba(219,162,0,1);
108
+ --or-c-error-opacity-0-08: rgba(255,180,169,0.08);
109
+ --or-c-error-opacity-0-12: rgba(255,180,169,0.12);
110
+ --or-c-error-opacity-0-16: rgba(255,180,169,0.16);
111
+ --or-c-disabled: rgba(227,226,230,0.12);
112
+ }