@onereach/styles 3.1.1-beta.3193.0 → 3.1.1-beta.3196.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 (5) hide show
  1. package/package.json +14 -11
  2. package/tailwind/plugins/core.js +44 -42
  3. package/tailwind/plugins/theme-preset.js +4 -8
  4. package/tailwind.config.json +3681 -0
  5. package/tailwind.config.preset.js +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onereach/styles",
3
- "version": "3.1.1-beta.3193.0",
3
+ "version": "3.1.1-beta.3196.0",
4
4
  "description": "Styles for or-ui-next",
5
5
  "license": "UNLICENSED",
6
6
  "main": "./main.css",
@@ -8,31 +8,34 @@
8
8
  "style": "./main.css",
9
9
  "files": [
10
10
  "dist",
11
- "src",
12
11
  "icons",
12
+ "src",
13
13
  "tailwind/**",
14
- "main.css",
15
- "rollup-plugin-tailwindcss-cli.css",
16
- "tw-color-variables.css",
14
+ "base.layer.css",
15
+ "font.css",
17
16
  "legacy-ui-warning.scss",
17
+ "main-v3.css",
18
+ "main.css",
18
19
  "preflight-revert.css",
20
+ "rollup-plugin-tailwindcss-cli.css",
21
+ "scrollbar.css",
19
22
  "tailwind.config.js",
23
+ "tailwind.config.json",
20
24
  "tailwind.config.preset.js",
21
- "tokens.css",
22
- "main-v3.css",
23
- "font.css",
24
- "scrollbar.css",
25
25
  "temporary-dark-v2.css",
26
- "base.layer.css"
26
+ "tokens.css",
27
+ "tw-color-variables.css"
27
28
  ],
28
29
  "scripts": {
29
30
  "dev": "pnpm build:scss -- --watch",
30
- "build": "npm-run-all build:tokens build:scss build:autoprefixer build:cleancss build:tokens:css",
31
+ "prepare": "pnpm build",
32
+ "build": "npm-run-all build:tokens build:scss build:autoprefixer build:cleancss build:tokens:css build:resolve-config",
31
33
  "build:scss": "sass --embed-source-map ./src/main.scss dist/index.css",
32
34
  "build:cleancss": "cleancss -o dist/index.min.css dist/index.css",
33
35
  "build:autoprefixer": "npx postcss --use autoprefixer --map false --output dist/index.css dist/index.css",
34
36
  "build:tokens": "pnpm json-to-scss",
35
37
  "build:tokens:css": "node ./utils/makeCssVaribales.js",
38
+ "build:resolve-config": "node ./scripts/resolveConfig.js",
36
39
  "lint": "stylelint '**/*.scss'",
37
40
  "fix": "stylelint --fix '**/*.scss'",
38
41
  "clean": "rimraf dist",
package/tailwind/plugins/core.js CHANGED
@@ -1,61 +1,63 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
2
 
3
- const enabledSelectors = ['&:not([disabled])'];
4
- const disabledSelectors = ['&[disabled]'];
3
+ const variants = {
4
+ 'hover': [
5
+ '&:not(.interactivity-none):hover',
6
+ '&:not(.interactivity-none)[force-state="hover"]',
7
+ ],
5
8
 
6
- const readWriteSelectors = ['&:not([readonly])'];
7
- const readOnlySelectors = ['&[readonly]'];
9
+ 'focus': [
10
+ '&:not(.interactivity-none):focus',
11
+ '&:not(.interactivity-none)[force-state="focus"]',
12
+ ],
8
13
 
9
- const validSelectors = ['&:not([invalid])'];
10
- const invalidSelectors = ['&[invalid]'];
14
+ 'focus-within': [
15
+ '&:not(.interactivity-none):focus-within',
16
+ '&:not(.interactivity-none)[force-state="focus-within"]',
17
+ ],
11
18
 
12
- const requiredSelectors = ['&[required]'];
13
- const optionalSelectors = ['&:not([required])'];
19
+ 'focus-visible': [
20
+ '&:not(.interactivity-none):focus-visible',
21
+ '&:not(.interactivity-none)[force-state="focus-visible"]',
22
+ ],
14
23
 
15
- module.exports = {
16
- plugin: plugin(({ addVariant, addUtilities }) => {
17
- addVariant('enabled', enabledSelectors);
18
- addVariant('disabled', disabledSelectors);
24
+ 'active': [
25
+ '&:not(.interactivity-none):active',
26
+ '&:not(.interactivity-none)[force-state="active"]',
27
+ ],
19
28
 
20
- addVariant('read-write', readWriteSelectors);
21
- addVariant('read-only', readOnlySelectors);
29
+ 'checked': ['&[checked]', '&:checked'],
30
+ 'selected': ['&[selected]', '&:checked'],
31
+ 'activated': ['&[activated]'],
22
32
 
23
- addVariant('valid', validSelectors);
24
- addVariant('invalid', invalidSelectors);
33
+ 'valid': ['&:not([invalid])'],
34
+ 'invalid': ['&[invalid]'],
25
35
 
26
- addVariant('required', requiredSelectors);
27
- addVariant('optional', optionalSelectors);
36
+ 'required': ['&[required]'],
37
+ 'optional': ['&:not([required])'],
28
38
 
29
- addVariant('checked', ['&[checked]', '&:checked']);
30
- addVariant('selected', ['&[selected]', '&:checked']);
31
- addVariant('activated', ['&[activated]']);
39
+ 'read-write': ['&:not([readonly])'],
40
+ 'read-only': ['&[readonly]'],
32
41
 
33
- addVariant('hover', [
34
- '&:not(.interactivity-none):hover',
35
- '&:not(.interactivity-none)[force-state="hover"]',
36
- ]);
42
+ 'enabled': ['&:not([disabled])'],
43
+ 'disabled': ['&[disabled]'],
37
44
 
38
- addVariant('focus', [
39
- '&:not(.interactivity-none):focus-visible',
40
- '&:not(.interactivity-none)[force-state="focus"]',
41
- ]);
45
+ 'children': ['& > *'],
42
46
 
43
- addVariant('focus-within', [
44
- '&:not(.interactivity-none):focus-within',
45
- '&:not(.interactivity-none)[force-state="focus-within"]',
46
- ]);
47
+ 'first-child': ['& > *:first-child'],
48
+ 'middle-child': ['& > *:not(:first-child, :last-child)'],
49
+ 'last-child': ['& > *:last-child'],
47
50
 
48
- addVariant('active', [
49
- '&:not(.interactivity-none):active',
50
- '&:not(.interactivity-none)[force-state="active"]',
51
- ]);
51
+ 'links': ['& :any-link'],
52
+ };
52
53
 
53
- addVariant('children', ['& > *']);
54
- addVariant('first-child', ['& > *:first-child']);
55
- addVariant('intermediate-child', ['& > *:not(:first-child):not(:last-child)']);
56
- addVariant('last-child', ['& > *:last-child']);
54
+ module.exports = {
55
+ variants,
57
56
 
58
- addVariant('links', ['& :any-link']);
57
+ plugin: plugin(({ addVariant, addUtilities }) => {
58
+ Object.entries(variants).forEach(([name, selectors]) => {
59
+ addVariant(name, selectors);
60
+ });
59
61
 
60
62
  // TODO: Remove when migration complete
61
63
  addUtilities({
package/tailwind/plugins/theme-preset.js CHANGED
@@ -31,7 +31,6 @@ module.exports = {
31
31
  return {
32
32
  color: theme(`textColor.on-${token}` + suffix),
33
33
  backgroundColor: theme(`backgroundColor.${token}` + suffix),
34
-
35
34
  borderStyle: 'none',
36
35
  outlineStyle: 'none',
37
36
 
@@ -51,7 +50,7 @@ module.exports = {
51
50
  backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
52
51
  },
53
52
 
54
- '&:focus-visible, &[force-state="focus"]': {
53
+ '&:focus-visible, &[force-state="focus-visible"]': {
55
54
  backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
56
55
  },
57
56
 
@@ -73,7 +72,6 @@ module.exports = {
73
72
  return {
74
73
  color: theme(`textColor.${token}` + suffix),
75
74
  backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
76
-
77
75
  borderStyle: 'none',
78
76
  outlineStyle: 'none',
79
77
 
@@ -93,7 +91,7 @@ module.exports = {
93
91
  backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
94
92
  },
95
93
 
96
- '&:focus-visible, &[force-state="focus"]': {
94
+ '&:focus-visible, &[force-state="focus-visible"]': {
97
95
  backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
98
96
  },
99
97
 
@@ -115,7 +113,6 @@ module.exports = {
115
113
  return {
116
114
  color: theme(`textColor.${token}` + suffix),
117
115
  backgroundColor: 'transparent',
118
-
119
116
  borderStyle: 'none',
120
117
  outlineStyle: 'none',
121
118
 
@@ -135,7 +132,7 @@ module.exports = {
135
132
  backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
136
133
  },
137
134
 
138
- '&:focus-visible, &[force-state="focus"]': {
135
+ '&:focus-visible, &[force-state="focus-visible"]': {
139
136
  backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
140
137
  },
141
138
 
@@ -157,7 +154,6 @@ module.exports = {
157
154
  return {
158
155
  color: theme(`textColor.${token}` + suffix),
159
156
  backgroundColor: 'transparent',
160
-
161
157
  borderStyle: 'none',
162
158
  outlineStyle: 'none',
163
159
 
@@ -177,7 +173,7 @@ module.exports = {
177
173
  color: theme(`textColor.${token}-hover` + suffix),
178
174
  },
179
175
 
180
- '&:focus-visible, &[force-state="focus"]': {
176
+ '&:focus-visible, &[force-state="focus-visible"]': {
181
177
  color: theme(`textColor.${token}-hover` + suffix),
182
178
  },
183
179