@onereach/styles 6.7.1-beta.4028.0 → 6.8.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 +4 -4
  2. package/tailwind/plugins/core.js +24 -18
  3. package/tailwind/plugins/theme-foreground.js +54 -0
  4. package/tailwind/plugins/typography.js +1 -1
  5. package/screens.json +0 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onereach/styles",
3
- "version": "6.7.1-beta.4028.0",
3
+ "version": "6.8.0",
4
4
  "description": "Styles for or-ui-next",
5
5
  "license": "UNLICENSED",
6
6
  "main": "./main.css",
@@ -24,8 +24,7 @@
24
24
  "tailwind.config.preset.js",
25
25
  "temporary-dark-v2.css",
26
26
  "tokens.css",
27
- "tw-color-variables.css",
28
- "screens.json"
27
+ "tw-color-variables.css"
29
28
  ],
30
29
  "scripts": {
31
30
  "dev": "pnpm build:scss -- --watch",
@@ -58,5 +57,6 @@
58
57
  },
59
58
  "publishConfig": {
60
59
  "access": "public"
61
- }
60
+ },
61
+ "gitHead": "a570f0e56682c67f25c7a24af9d1c3ea0fa9378b"
62
62
  }
package/tailwind/plugins/core.js CHANGED
@@ -1,27 +1,33 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
- const screens = require('../../screens.json');
2
+
3
+ const screens = {
4
+ 'sm': '600px',
5
+ 'md': '900px',
6
+ 'lg': '1200px',
7
+ 'xl': '1536px',
8
+ };
3
9
 
4
10
  const variants = {
5
11
  'mobile': '@media (hover: none)',
6
12
  'desktop': '@media (hover: hover)',
7
13
 
8
- 'draggable': ['&[draggable]:not([draggable="false"])'],
14
+ 'draggable': ['&:is([draggable]:not([draggable="false"]))', '&[force-state~="draggable"]'],
9
15
 
10
- 'checked': ['&[checked]:not([checked="false"])', '&:checked'],
11
- 'selected': ['&[selected]:not([selected="false"])', '&:checked'],
12
- 'activated': ['&[activated]:not([activated="false"])'],
16
+ 'checked': ['&:is([checked]:not([checked="false"]), :checked)', '&[force-state~="checked"]'],
17
+ 'selected': ['&:is([selected]:not([selected="false"]), :checked)', '&[force-state~="selected"]'],
18
+ 'activated': ['&:is([activated]:not([activated="false"]))', '&[force-state~="activated"]'],
13
19
 
14
- 'enabled': ['&:not([disabled])', '&[disabled="false"]'],
15
- 'disabled': ['&[disabled]:not([disabled="false"])'],
20
+ 'enabled': ['&:is(:not([disabled]), [disabled="false"])', '&[force-state~="enabled"]'],
21
+ 'disabled': ['&:is([disabled]:not([disabled="false"]))', '&[force-state~="disabled"]'],
16
22
 
17
- 'optional': ['&:not([required])', '&[required="false"]'],
18
- 'required': ['&[required]:not([required="false"])'],
23
+ 'optional': ['&:is(:not([required]), [required="false"])', '&[force-state~="optional"]'],
24
+ 'required': ['&:is([required]:not([required="false"]))', '&[force-state~="required"]'],
19
25
 
20
- 'read-write': ['&:not([readonly])', '&[readonly="false"]'],
21
- 'read-only': ['&[readonly]:not([readonly="false"])'],
26
+ 'read-write': ['&:is(:not([readonly]), [readonly="false"])', '&[force-state~="read-write"]'],
27
+ 'read-only': ['&:is([readonly]:not([readonly="false"]))', '&[force-state~="read-only"]'],
22
28
 
23
- 'valid': ['&:not([invalid])', '&[invalid="false"]'],
24
- 'invalid': ['&[invalid]:not([invalid="false"])'],
29
+ 'valid': ['&:is(:not([invalid]), [invalid="false"])', '&[force-state~="valid"]'],
30
+ 'invalid': ['&:is([invalid]:not([invalid="false"]))', '&[force-state~="invalid"]'],
25
31
 
26
32
  // Sub-components
27
33
  'children': ['& > *'],
@@ -29,35 +35,35 @@ const variants = {
29
35
  get 'hover'() {
30
36
  return this['enabled'].flatMap((selector) => [
31
37
  `${selector}:not(.interactivity-none):not([force-state]):hover`,
32
- `${selector}:not(.interactivity-none)[force-state="hover"]`,
38
+ `${selector}:not(.interactivity-none)[force-state~="hover"]`,
33
39
  ]);
34
40
  },
35
41
 
36
42
  get 'focus'() {
37
43
  return this['enabled'].flatMap((selector) => [
38
44
  `${selector}:not(.interactivity-none):not([force-state]):focus`,
39
- `${selector}:not(.interactivity-none)[force-state="focus"]`,
45
+ `${selector}:not(.interactivity-none)[force-state~="focus"]`,
40
46
  ]);
41
47
  },
42
48
 
43
49
  get 'focus-within'() {
44
50
  return this['enabled'].flatMap((selector) => [
45
51
  `${selector}:not(.interactivity-none):not([force-state]):focus-within`,
46
- `${selector}:not(.interactivity-none)[force-state="focus-within"]`,
52
+ `${selector}:not(.interactivity-none)[force-state~="focus-within"]`,
47
53
  ]);
48
54
  },
49
55
 
50
56
  get 'focus-visible'() {
51
57
  return this['enabled'].flatMap((selector) => [
52
58
  `${selector}:not(.interactivity-none):not([force-state]):focus-visible`,
53
- `${selector}:not(.interactivity-none)[force-state="focus-visible"]`,
59
+ `${selector}:not(.interactivity-none)[force-state~="focus-visible"]`,
54
60
  ]);
55
61
  },
56
62
 
57
63
  get 'active'() {
58
64
  return this['enabled'].flatMap((selector) => [
59
65
  `${selector}:not(.interactivity-none):not([force-state]):active`,
60
- `${selector}:not(.interactivity-none)[force-state="active"]`,
66
+ `${selector}:not(.interactivity-none)[force-state~="active"]`,
61
67
  ]);
62
68
  },
63
69
  };
package/tailwind/plugins/theme-foreground.js CHANGED
@@ -47,6 +47,60 @@ const values = {
47
47
  'error-hover': 'error-hover',
48
48
  'error-hover-dark': 'error-hover..-dark',
49
49
 
50
+ 'primary-translucent-1': 'primary-opacity-0-08',
51
+ 'primary-translucent-1-dark': 'primary-opacity-0-08..-dark',
52
+
53
+ // 'secondary-translucent-1': 'secondary-opacity-0-08',
54
+ // 'secondary-translucent-1-dark': 'secondary-opacity-0-08..-dark',
55
+
56
+ // 'tertiary-translucent-1': 'tertiary-opacity-0-08',
57
+ // 'tertiary-translucent-1-dark': 'tertiary-opacity-0-08..-dark',
58
+
59
+ 'success-translucent-1': 'success-opacity-0-08',
60
+ 'success-translucent-1-dark': 'success-opacity-0-08..-dark',
61
+
62
+ 'warning-translucent-1': 'warning-opacity-0-08',
63
+ 'warning-translucent-1-dark': 'warning-opacity-0-08..-dark',
64
+
65
+ 'error-translucent-1': 'error-opacity-0-08',
66
+ 'error-translucent-1-dark': 'error-opacity-0-08..-dark',
67
+
68
+ 'primary-translucent-2': 'primary-opacity-0-12',
69
+ 'primary-translucent-2-dark': 'primary-opacity-0-12..-dark',
70
+
71
+ // 'secondary-translucent-2': 'secondary-opacity-0-12',
72
+ // 'secondary-translucent-2-dark': 'secondary-opacity-0-12..-dark',
73
+
74
+ // 'tertiary-translucent-2': 'tertiary-opacity-0-12',
75
+ // 'tertiary-translucent-2-dark': 'tertiary-opacity-0-12..-dark',
76
+
77
+ 'success-translucent-2': 'success-opacity-0-12',
78
+ 'success-translucent-2-dark': 'success-opacity-0-12..-dark',
79
+
80
+ 'warning-translucent-2': 'warning-opacity-0-12',
81
+ 'warning-translucent-2-dark': 'warning-opacity-0-12..-dark',
82
+
83
+ 'error-translucent-2': 'error-opacity-0-12',
84
+ 'error-translucent-2-dark': 'error-opacity-0-12..-dark',
85
+
86
+ 'primary-translucent-3': 'primary-opacity-0-16',
87
+ 'primary-translucent-3-dark': 'primary-opacity-0-16..-dark',
88
+
89
+ // 'secondary-translucent-3': 'secondary-opacity-0-16',
90
+ // 'secondary-translucent-3-dark': 'secondary-opacity-0-16..-dark',
91
+
92
+ // 'tertiary-translucent-3': 'tertiary-opacity-0-16',
93
+ // 'tertiary-translucent-3-dark': 'tertiary-opacity-0-16..-dark',
94
+
95
+ 'success-translucent-3': 'success-opacity-0-16',
96
+ 'success-translucent-3-dark': 'success-opacity-0-16..-dark',
97
+
98
+ 'warning-translucent-3': 'warning-opacity-0-16',
99
+ 'warning-translucent-3-dark': 'warning-opacity-0-16..-dark',
100
+
101
+ 'error-translucent-3': 'error-opacity-0-16',
102
+ 'error-translucent-3-dark': 'error-opacity-0-16..-dark',
103
+
50
104
  'on-primary': 'on-primary',
51
105
  'on-primary-dark': 'on-primary..-dark',
52
106
 
package/tailwind/plugins/typography.js CHANGED
@@ -1,5 +1,5 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
- const screens = require('../../screens.json');
2
+ const { screens } = require('./core');
3
3
 
4
4
  const values = {
5
5
  'display-large': 'display-large',
package/screens.json DELETED
@@ -1,6 +0,0 @@
1
- {
2
- "sm": "600px",
3
- "md": "900px",
4
- "lg": "1200px",
5
- "xl": "1536px"
6
- }