@onereach/styles 6.9.1 → 6.9.2-beta.4379.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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onereach/styles",
3
- "version": "6.9.1",
3
+ "version": "6.9.2-beta.4379.0",
4
4
  "description": "Styles for or-ui-next",
5
5
  "license": "UNLICENSED",
6
6
  "main": "./main.css",
@@ -57,6 +57,5 @@
57
57
  },
58
58
  "publishConfig": {
59
59
  "access": "public"
60
- },
61
- "gitHead": "f037d02d9572a276f304de9dbeb56a1ca1a33316"
60
+ }
62
61
  }
@@ -1215,6 +1215,14 @@
1215
1215
  {
1216
1216
  "name" : "dark-outline-opacity-0-08",
1217
1217
  "value" : "rgba(142,145,153,0.08)"
1218
+ },
1219
+ {
1220
+ "name" : "light-surface-variant-1",
1221
+ "value" : "rgba(244,244,245,1)"
1222
+ },
1223
+ {
1224
+ "name" : "dark-surface-variant-1",
1225
+ "value" : "rgba(36,36,39,1)"
1218
1226
  }
1219
1227
  ],
1220
1228
  "Gradients" : [
@@ -21,7 +21,7 @@ module.exports = {
21
21
 
22
22
  addComponents({
23
23
  '.iconography-onereach': {
24
- fontFamily: '"OneReach Icons" !important',
24
+ fontFamily: '"OneReach Icons"',
25
25
  },
26
26
  });
27
27
  }),
@@ -8,8 +8,8 @@ const values = {
8
8
  'default': 'background',
9
9
  'default-dark': 'background..-dark',
10
10
 
11
- 'disabled': 'disabled',
12
- 'disabled-dark': 'disabled..-dark',
11
+ 'overlay': 'overlay',
12
+ 'overlay-dark': 'overlay..-dark',
13
13
 
14
14
  'primary': 'primary',
15
15
  'primary-dark': 'primary..-dark',
@@ -140,11 +140,44 @@ const values = {
140
140
  'surface-variant': 'surface-variant',
141
141
  'surface-variant-dark': 'surface-variant..-dark',
142
142
 
143
+ 'surface-variant-1': 'surface-variant-1',
144
+ 'surface-variant-1-dark': 'surface-variant-1..-dark',
145
+
143
146
  'surface-inverse': 'inverse-surface',
144
147
  'surface-inverse-dark': 'inverse-surface..-dark',
145
148
 
146
- 'overlay': 'overlay',
147
- 'overlay-dark': 'overlay..-dark',
149
+ 'outline': 'outline',
150
+ 'outline-dark': 'outline..-dark',
151
+
152
+ 'outline-variant': 'outline-variant',
153
+ 'outline-variant-dark': 'outline-variant..-dark',
154
+
155
+ 'outline-translucent-1': 'outline-opacity-0-08',
156
+ 'outline-translucent-1-dark': 'outline-opacity-0-08..-dark',
157
+
158
+ 'outline-translucent-2': 'outline-opacity-0-12',
159
+ 'outline-translucent-2-dark': 'outline-opacity-0-12..-dark',
160
+
161
+ 'outline-translucent-3': 'outline-opacity-0-16',
162
+ 'outline-translucent-3-dark': 'outline-opacity-0-16..-dark',
163
+
164
+ 'outline-translucent-4': 'outline-opacity-0-32',
165
+ 'outline-translucent-4-dark': 'outline-opacity-0-32..-dark',
166
+
167
+ 'outline-translucent-5': 'outline-opacity-0-48',
168
+ 'outline-translucent-5-dark': 'outline-opacity-0-48..-dark',
169
+
170
+ 'outline-translucent-6': 'outline-opacity-0-64',
171
+ 'outline-translucent-6-dark': 'outline-opacity-0-64..-dark',
172
+
173
+ 'outline-translucent-7': 'outline-opacity-0-80',
174
+ 'outline-translucent-7-dark': 'outline-opacity-0-80..-dark',
175
+
176
+ 'outline-translucent-8': 'outline-opacity-0-96',
177
+ 'outline-translucent-8-dark': 'outline-opacity-0-96..-dark',
178
+
179
+ 'disabled': 'disabled',
180
+ 'disabled-dark': 'disabled..-dark',
148
181
 
149
182
  'transparent': 'transparent',
150
183
  'transparent-dark': 'transparent..-dark',
@@ -26,6 +26,9 @@ const values = {
26
26
  'outline-variant': 'outline-variant',
27
27
  'outline-variant-dark': 'outline-variant..-dark',
28
28
 
29
+ 'disabled': 'disabled',
30
+ 'disabled-dark': 'disabled..-dark',
31
+
29
32
  'transparent': 'transparent',
30
33
  'transparent-dark': 'transparent..-dark',
31
34
 
@@ -39,14 +42,13 @@ const values = {
39
42
  module.exports = {
40
43
  values,
41
44
 
42
- plugin: plugin(({ matchComponents, addComponents, theme }) => {
45
+ plugin: plugin(({ matchComponents, theme }) => {
43
46
  matchComponents({
44
- 'theme-border-1': (value) => {
47
+ 'theme-border': (value) => {
45
48
  const [token, suffix = ''] = value.split('..');
46
49
 
47
50
  return {
48
51
  borderStyle: 'solid',
49
- borderWidth: '1px',
50
52
  borderColor: theme(`borderColor.${token}` + suffix, token),
51
53
 
52
54
  [variants['disabled']]: ['transparent'].includes(token) ? null : {
@@ -59,57 +61,5 @@ module.exports = {
59
61
  };
60
62
  },
61
63
  }, { values });
62
-
63
- matchComponents({
64
- 'theme-border-2': (value) => {
65
- const [token, suffix = ''] = value.split('..');
66
-
67
- return {
68
- borderStyle: 'solid',
69
- borderWidth: '2px',
70
- borderColor: theme(`borderColor.${token}` + suffix, token),
71
-
72
- [variants['disabled']]: ['transparent'].includes(token) ? null : {
73
- borderColor: `${theme('borderColor.disabled' + suffix)} !important`,
74
- },
75
-
76
- transitionProperty: 'color, background-color, border-color, outline-color',
77
- transitionDuration: theme('transitionDuration.short'),
78
- transitionTimingFunction: theme('transitionTimingFunction.standard'),
79
- };
80
- },
81
- }, { values });
82
-
83
- matchComponents({
84
- 'theme-border-4': (value) => {
85
- const [token, suffix = ''] = value.split('..');
86
-
87
- return {
88
- borderStyle: 'solid',
89
- borderWidth: '4px',
90
- borderColor: theme(`borderColor.${token}` + suffix, token),
91
-
92
- [variants['disabled']]: ['transparent'].includes(token) ? null : {
93
- borderColor: `${theme('borderColor.disabled' + suffix)} !important`,
94
- },
95
-
96
- transitionProperty: 'color, background-color, border-color, outline-color',
97
- transitionDuration: theme('transitionDuration.short'),
98
- transitionTimingFunction: theme('transitionTimingFunction.standard'),
99
- };
100
- },
101
- }, { values });
102
-
103
- addComponents({
104
- '.theme-border-overline': {
105
- borderStyle: 'none !important',
106
- borderBlockStartStyle: 'solid !important',
107
- },
108
-
109
- '.theme-border-underline': {
110
- borderStyle: 'none !important',
111
- borderBlockEndStyle: 'solid !important',
112
- },
113
- });
114
64
  }),
115
65
  };
@@ -26,6 +26,9 @@ const values = {
26
26
  'outline-variant': 'outline-variant',
27
27
  'outline-variant-dark': 'outline-variant..-dark',
28
28
 
29
+ 'disabled': 'disabled',
30
+ 'disabled-dark': 'disabled..-dark',
31
+
29
32
  'transparent': 'transparent',
30
33
  'transparent-dark': 'transparent..-dark',
31
34
 
@@ -8,9 +8,6 @@ const values = {
8
8
  'default': 'on-background',
9
9
  'default-dark': 'on-background..-dark',
10
10
 
11
- 'disabled': 'on-disabled',
12
- 'disabled-dark': 'on-disabled..-dark',
13
-
14
11
  'primary': 'primary',
15
12
  'primary-dark': 'primary..-dark',
16
13
 
@@ -152,6 +149,33 @@ const values = {
152
149
  'outline-variant': 'outline-variant',
153
150
  'outline-variant-dark': 'outline-variant..-dark',
154
151
 
152
+ 'outline-translucent-1': 'outline-opacity-0-08',
153
+ 'outline-translucent-1-dark': 'outline-opacity-0-08..-dark',
154
+
155
+ 'outline-translucent-2': 'outline-opacity-0-12',
156
+ 'outline-translucent-2-dark': 'outline-opacity-0-12..-dark',
157
+
158
+ 'outline-translucent-3': 'outline-opacity-0-16',
159
+ 'outline-translucent-3-dark': 'outline-opacity-0-16..-dark',
160
+
161
+ 'outline-translucent-4': 'outline-opacity-0-32',
162
+ 'outline-translucent-4-dark': 'outline-opacity-0-32..-dark',
163
+
164
+ 'outline-translucent-5': 'outline-opacity-0-48',
165
+ 'outline-translucent-5-dark': 'outline-opacity-0-48..-dark',
166
+
167
+ 'outline-translucent-6': 'outline-opacity-0-64',
168
+ 'outline-translucent-6-dark': 'outline-opacity-0-64..-dark',
169
+
170
+ 'outline-translucent-7': 'outline-opacity-0-80',
171
+ 'outline-translucent-7-dark': 'outline-opacity-0-80..-dark',
172
+
173
+ 'outline-translucent-8': 'outline-opacity-0-96',
174
+ 'outline-translucent-8-dark': 'outline-opacity-0-96..-dark',
175
+
176
+ 'disabled': 'on-disabled',
177
+ 'disabled-dark': 'on-disabled..-dark',
178
+
155
179
  'transparent': 'transparent',
156
180
  'transparent-dark': 'transparent..-dark',
157
181
 
@@ -2,23 +2,23 @@ const plugin = require('tailwindcss/plugin');
2
2
  const { variants } = require('./core');
3
3
 
4
4
  const values = {
5
- 'primary': 'primary',
6
- 'primary-dark': 'primary..-dark',
5
+ 'primary': 'primary-opacity-0-16',
6
+ 'primary-dark': 'primary-opacity-0-16..-dark',
7
7
 
8
- // 'secondary': 'secondary',
9
- // 'secondary-dark': 'secondary..-dark',
8
+ // 'secondary': 'secondary-opacity-0-16',
9
+ // 'secondary-dark': 'secondary-opacity-0-16..-dark',
10
10
 
11
- // 'tertiary': 'tertiary',
12
- // 'tertiary-dark': 'tertiary..-dark',
11
+ // 'tertiary': 'tertiary-opacity-0-16',
12
+ // 'tertiary-dark': 'tertiary-opacity-0-16..-dark',
13
13
 
14
- 'success': 'success',
15
- 'success-dark': 'success..-dark',
14
+ 'success': 'success-opacity-0-16',
15
+ 'success-dark': 'success-opacity-0-16..-dark',
16
16
 
17
- 'warning': 'warning',
18
- 'warning-dark': 'warning..-dark',
17
+ 'warning': 'warning-opacity-0-16',
18
+ 'warning-dark': 'warning-opacity-0-16..-dark',
19
19
 
20
- 'error': 'error',
21
- 'error-dark': 'error..-dark',
20
+ 'error': 'error-opacity-0-16',
21
+ 'error-dark': 'error-opacity-0-16..-dark',
22
22
 
23
23
  'transparent': 'transparent',
24
24
  'transparent-dark': 'transparent..-dark',
@@ -35,59 +35,15 @@ module.exports = {
35
35
 
36
36
  plugin: plugin(({ matchComponents, theme }) => {
37
37
  matchComponents({
38
- 'theme-outline-1': (value) => {
38
+ 'theme-outline': (value) => {
39
39
  const [token, suffix = ''] = value.split('..');
40
40
 
41
41
  return {
42
- outlineOffset: '0',
43
42
  outlineStyle: 'solid',
44
- outlineWidth: '1px',
45
- outlineColor: theme(`outlineColor.${token}-opacity-0-16` + suffix, token),
43
+ outlineColor: theme(`outlineColor.${token}` + suffix, token),
46
44
 
47
45
  [variants['disabled']]: ['transparent'].includes(token) ? null : {
48
- outlineColor: 'transparent !important',
49
- },
50
-
51
- transitionProperty: 'color, background-color, border-color, outline-color',
52
- transitionDuration: theme('transitionDuration.short'),
53
- transitionTimingFunction: theme('transitionTimingFunction.standard'),
54
- };
55
- },
56
- }, { values });
57
-
58
- matchComponents({
59
- 'theme-outline-2': (value) => {
60
- const [token, suffix = ''] = value.split('..');
61
-
62
- return {
63
- outlineOffset: '0',
64
- outlineStyle: 'solid',
65
- outlineWidth: '2px',
66
- outlineColor: theme(`outlineColor.${token}-opacity-0-16` + suffix, token),
67
-
68
- [variants['disabled']]: ['transparent'].includes(token) ? null : {
69
- outlineColor: 'transparent !important',
70
- },
71
-
72
- transitionProperty: 'color, background-color, border-color, outline-color',
73
- transitionDuration: theme('transitionDuration.short'),
74
- transitionTimingFunction: theme('transitionTimingFunction.standard'),
75
- };
76
- },
77
- }, { values });
78
-
79
- matchComponents({
80
- 'theme-outline-10': (value) => {
81
- const [token, suffix = ''] = value.split('..');
82
-
83
- return {
84
- outlineOffset: '0',
85
- outlineStyle: 'solid',
86
- outlineWidth: '10px',
87
- outlineColor: theme(`outlineColor.${token}-opacity-0-16` + suffix, token),
88
-
89
- [variants['disabled']]: ['transparent'].includes(token) ? null : {
90
- outlineColor: 'transparent !important',
46
+ outlineColor: `${theme('outlineColor.transparent' + suffix)} !important`,
91
47
  },
92
48
 
93
49
  transitionProperty: 'color, background-color, border-color, outline-color',
@@ -596,6 +596,8 @@
596
596
  "outline-opacity-0-16-dark": "rgba(142 145 153 / 0.16)",
597
597
  "outline-opacity-0-12-dark": "rgba(142 145 153 / 0.12)",
598
598
  "outline-opacity-0-08-dark": "rgba(142 145 153 / 0.08)",
599
+ "surface-variant-1": "rgba(244 244 245 / 1)",
600
+ "surface-variant-1-dark": "rgba(36 36 39 / 1)",
599
601
  "transparent": "transparent",
600
602
  "current": "currentColor",
601
603
  "inherit": "inherit"
@@ -1368,7 +1370,9 @@
1368
1370
  "outline-opacity-0-32-dark": "rgba(142 145 153 / 0.32)",
1369
1371
  "outline-opacity-0-16-dark": "rgba(142 145 153 / 0.16)",
1370
1372
  "outline-opacity-0-12-dark": "rgba(142 145 153 / 0.12)",
1371
- "outline-opacity-0-08-dark": "rgba(142 145 153 / 0.08)"
1373
+ "outline-opacity-0-08-dark": "rgba(142 145 153 / 0.08)",
1374
+ "surface-variant-1": "rgba(244 244 245 / 1)",
1375
+ "surface-variant-1-dark": "rgba(36 36 39 / 1)"
1372
1376
  },
1373
1377
  "stroke": {
1374
1378
  "white": "rgba(255 255 255 / 1)",
@@ -1672,7 +1676,9 @@
1672
1676
  "outline-opacity-0-32-dark": "rgba(142 145 153 / 0.32)",
1673
1677
  "outline-opacity-0-16-dark": "rgba(142 145 153 / 0.16)",
1674
1678
  "outline-opacity-0-12-dark": "rgba(142 145 153 / 0.12)",
1675
- "outline-opacity-0-08-dark": "rgba(142 145 153 / 0.08)"
1679
+ "outline-opacity-0-08-dark": "rgba(142 145 153 / 0.08)",
1680
+ "surface-variant-1": "rgba(244 244 245 / 1)",
1681
+ "surface-variant-1-dark": "rgba(36 36 39 / 1)"
1676
1682
  },
1677
1683
  "content": {
1678
1684
  "checkbox-checked": "\"check_small\"",
@@ -1731,7 +1737,8 @@
1731
1737
  "borderWidth": {
1732
1738
  "0": "0px",
1733
1739
  "1": "1px",
1734
- "2": "2px"
1740
+ "2": "2px",
1741
+ "4": "4px"
1735
1742
  },
1736
1743
  "boxShadow": {
1737
1744
  "none": "0 0 #00000000",
@@ -2034,7 +2041,8 @@
2034
2041
  "outlineWidth": {
2035
2042
  "0": "0px",
2036
2043
  "1": "1px",
2037
- "2": "2px"
2044
+ "2": "2px",
2045
+ "10": "10px"
2038
2046
  },
2039
2047
  "transitionDuration": {
2040
2048
  "short": "100ms",
@@ -2569,7 +2577,8 @@
2569
2577
  "divideWidth": {
2570
2578
  "0": "0px",
2571
2579
  "1": "1px",
2572
- "2": "2px"
2580
+ "2": "2px",
2581
+ "4": "4px"
2573
2582
  },
2574
2583
  "dropShadow": {
2575
2584
  "sm": "0 1px 1px rgb(0 0 0 / 0.05)",
@@ -87,7 +87,6 @@ module.exports = {
87
87
  ...parseColorTokens(colorTokens, ['generic', 'background', 'text']),
88
88
  },
89
89
 
90
-
91
90
  content: {
92
91
  'checkbox-checked': '"check_small"',
93
92
  'checkbox-indeterminate': '"check_indeterminate_small"',
@@ -153,6 +152,7 @@ module.exports = {
153
152
  borderWidth: {
154
153
  '0': '0px',
155
154
  ...parseBorderWidthTokens(borderWidthTokens),
155
+ '4': '4px',
156
156
  },
157
157
 
158
158
  boxShadow: {
@@ -179,6 +179,7 @@ module.exports = {
179
179
  outlineWidth: {
180
180
  '0': '0px',
181
181
  ...parseBorderWidthTokens(borderWidthTokens),
182
+ '10': '10px',
182
183
  },
183
184
 
184
185
  transitionDuration: {
package/tokens.css CHANGED
@@ -154,6 +154,7 @@
154
154
  --or-c-outline-opacity-0-16: rgba(116,119,127,0.16);
155
155
  --or-c-outline-opacity-0-12: rgba(116,119,127,0.12);
156
156
  --or-c-outline-opacity-0-08: rgba(116,119,127,0.08);
157
+ --or-c-surface-variant-1: rgba(244,244,245,1);
157
158
  }
158
159
  [data-theme="dark-mode"], [data-theme="dark"] {
159
160
  --or-c-primary: rgba(164,200,255,1);
@@ -307,4 +308,5 @@
307
308
  --or-c-outline-opacity-0-16: rgba(142,145,153,0.16);
308
309
  --or-c-outline-opacity-0-12: rgba(142,145,153,0.12);
309
310
  --or-c-outline-opacity-0-08: rgba(142,145,153,0.08);
311
+ --or-c-surface-variant-1: rgba(36,36,39,1);
310
312
  }