@sanity/ui 4.0.0-static.26 → 4.0.0-static.28

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 (22) hide show
  1. package/dist/css/index.css +1 -1
  2. package/dist/css/index.css.map +1 -1
  3. package/dist/index.js +57 -53
  4. package/dist/index.js.map +1 -1
  5. package/package.json +5 -5
  6. package/src/core/components/menu/MenuItem.tsx +0 -2
  7. package/src/core/components/menu/__workshop__/DataProps.tsx +27 -0
  8. package/src/core/components/menu/__workshop__/index.ts +6 -1
  9. package/src/core/primitives/button/Button.tsx +2 -2
  10. package/src/core/primitives/button/__workshop__/DataProps.tsx +22 -0
  11. package/src/core/primitives/button/__workshop__/index.ts +5 -0
  12. package/src/core/primitives/card/Card.tsx +4 -4
  13. package/src/core/primitives/card/__workshop__/DataProps.tsx +30 -0
  14. package/src/core/primitives/card/__workshop__/index.ts +1 -0
  15. package/src/core/primitives/selectable/Selectable.tsx +1 -1
  16. package/src/core/primitives/selectable/__workshop__/DataProps.tsx +27 -0
  17. package/src/core/primitives/selectable/__workshop__/index.ts +14 -0
  18. package/src/css/primitives/_input/_input.css.ts +6 -5
  19. package/src/css/primitives/box/box.css.ts +0 -2
  20. package/src/css/primitives/button/button.css.ts +251 -183
  21. package/src/css/primitives/card/card.css.ts +133 -80
  22. package/src/css/primitives/selectable/selectable.css.ts +79 -44
package/src/css/primitives/card/card.css.ts CHANGED
@@ -15,14 +15,8 @@ import {_style} from '../../_style.css'
15
15
  import {layers} from '../../layers.css'
16
16
  import {vars} from '../../vars.css'
17
17
 
18
- export const root: string = _style(layers.primitives, {
19
- backgroundColor: vars.color.bg,
20
- color: vars.color.fg,
21
-
22
- transition:
23
- 'background-color 100ms ease-in-out, border-color 100ms, box-shadow 100ms ease-in-out, color 100ms ease-in-out',
24
-
25
- vars: {
18
+ const stateVars = {
19
+ enabled: {
26
20
  [vars.color.bg]: vars.color.tinted.default.bg[0],
27
21
  [vars.color.border]: vars.color.tinted.default.border[1],
28
22
  [vars.color.fg]: vars.color.tinted.default.fg[0],
@@ -31,7 +25,90 @@ export const root: string = _style(layers.primitives, {
31
25
  [vars.color.muted.fg]: vars.color.tinted.default.fg[4],
32
26
  },
33
27
 
34
- selectors: {
28
+ hovered: {
29
+ [vars.color.bg]: vars.color.tinted.default.bg[1],
30
+ [vars.color.border]: vars.color.tinted.default.border[3],
31
+ [vars.color.fg]: vars.color.tinted.default.fg[1],
32
+ [vars.color.code.bg]: vars.color.tinted.default.bg[2],
33
+ [vars.color.code.fg]: vars.color.tinted.default.fg[4],
34
+ [vars.color.muted.bg]: vars.color.tinted.default.bg[2],
35
+ [vars.color.muted.fg]: vars.color.tinted.default.fg[4],
36
+ },
37
+
38
+ pressed: {
39
+ [vars.color.bg]: vars.color.tinted.default.bg[2],
40
+ [vars.color.border]: vars.color.tinted.default.border[4],
41
+ [vars.color.fg]: vars.color.tinted.default.fg[0],
42
+ [vars.color.code.bg]: vars.color.tinted.default.bg[3],
43
+ [vars.color.code.fg]: vars.color.tinted.default.fg[4],
44
+ [vars.color.muted.bg]: vars.color.tinted.default.bg[3],
45
+ [vars.color.muted.fg]: vars.color.tinted.default.fg[4],
46
+ },
47
+
48
+ selected: {
49
+ [vars.color.bg]: vars.color.solid.primary.bg[0],
50
+ [vars.color.border]: vars.color.solid.primary.border[1],
51
+ [vars.color.fg]: vars.color.solid.primary.fg[0],
52
+ [vars.color.code.bg]: vars.color.solid.primary.bg[1],
53
+ [vars.color.code.fg]: vars.color.solid.primary.fg[3],
54
+ [vars.color.muted.bg]: vars.color.solid.primary.bg[1],
55
+ [vars.color.muted.fg]: vars.color.solid.primary.fg[3],
56
+ },
57
+
58
+ disabled: {
59
+ [vars.color.bg]: vars.color.tinted.default.bg[0],
60
+ [vars.color.border]: vars.color.tinted.default.border[1],
61
+ [vars.color.fg]: vars.color.tinted.default.border[3],
62
+ [vars.color.code.bg]: vars.color.tinted.default.bg[0],
63
+ [vars.color.code.fg]: vars.color.tinted.default.border[2],
64
+ [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
65
+ [vars.color.muted.fg]: vars.color.tinted.default.border[2],
66
+ },
67
+ }
68
+
69
+ export const root: string = _style(layers.primitives, {
70
+ 'backgroundColor': vars.color.bg,
71
+ 'color': vars.color.fg,
72
+
73
+ 'vars': stateVars.enabled,
74
+
75
+ '@media': {
76
+ '(hover: hover)': {
77
+ selectors: {
78
+ [[
79
+ 'a.&',
80
+ ':not(:active)',
81
+ ':not(:focus)',
82
+ ':not(:disabled)',
83
+ ':not([aria-pressed="true"])',
84
+ ':not([data-pressed])',
85
+ ':not([data-focused])',
86
+ ':not([data-selected])',
87
+ ':not([data-disabled])',
88
+ ':hover',
89
+ ].join('')]: {
90
+ vars: stateVars.hovered,
91
+ },
92
+
93
+ [[
94
+ 'button.&',
95
+ ':not(:active)',
96
+ ':not(:focus)',
97
+ ':not(:disabled)',
98
+ ':not([aria-pressed="true"])',
99
+ ':not([data-pressed])',
100
+ ':not([data-focused])',
101
+ ':not([data-selected])',
102
+ ':not([data-disabled])',
103
+ ':hover',
104
+ ].join('')]: {
105
+ vars: stateVars.hovered,
106
+ },
107
+ },
108
+ },
109
+ },
110
+
111
+ 'selectors': {
35
112
  'a.&': {
36
113
  outline: 'none',
37
114
  textDecoration: 'none',
@@ -49,89 +126,65 @@ export const root: string = _style(layers.primitives, {
49
126
  `repeating-conic-gradient(${vars.color.bg} 0% 25%, ${vars.color.muted.bg} 0% 50%)` as string,
50
127
  },
51
128
 
52
- 'a.&:not([data-disabled]):hover, button.&:not([data-disabled]):hover': {
53
- vars: {
54
- [vars.color.bg]: vars.color.tinted.default.bg[1],
55
- [vars.color.border]: vars.color.tinted.default.border[3],
56
- [vars.color.fg]: vars.color.tinted.default.fg[1],
57
- [vars.color.code.bg]: vars.color.tinted.default.bg[2],
58
- [vars.color.code.fg]: vars.color.tinted.default.fg[4],
59
- [vars.color.muted.bg]: vars.color.tinted.default.bg[2],
60
- [vars.color.muted.fg]: vars.color.tinted.default.fg[4],
61
- },
129
+ // hovered
130
+ [[
131
+ //
132
+ 'a.&:not([data-disabled])[data-hovered]',
133
+ 'button.&:not([data-disabled])[data-hovered]',
134
+ ].join(',')]: {
135
+ vars: stateVars.hovered,
62
136
  },
63
137
 
64
- 'a&:not([data-disabled]):active, button&:not([data-disabled]):active': {
65
- vars: {
66
- [vars.color.bg]: vars.color.tinted.default.bg[2],
67
- [vars.color.border]: vars.color.tinted.default.border[4],
68
- [vars.color.fg]: vars.color.tinted.default.fg[0],
69
- [vars.color.code.bg]: vars.color.tinted.default.bg[3],
70
- [vars.color.code.fg]: vars.color.tinted.default.fg[4],
71
- [vars.color.muted.bg]: vars.color.tinted.default.bg[3],
72
- [vars.color.muted.fg]: vars.color.tinted.default.fg[4],
73
- },
138
+ // pressed
139
+ [[
140
+ 'a.&:not([data-disabled]):active',
141
+ 'button.&:not([data-disabled]):active',
142
+ 'a.&:not([data-disabled])[aria-pressed="true"]',
143
+ 'button.&:not([data-disabled])[aria-pressed="true"]',
144
+ 'a.&:not([data-disabled])[data-pressed]',
145
+ 'button.&:not([data-disabled])[data-pressed]',
146
+ ].join(',')]: {
147
+ vars: stateVars.pressed,
74
148
  },
75
149
 
76
- // toggle button
77
- 'a&:not([data-disabled])[aria-pressed="true"], button&:not([data-disabled])[aria-pressed="true"]':
78
- {
79
- vars: {
80
- [vars.color.bg]: vars.color.tinted.default.bg[2],
81
- [vars.color.border]: vars.color.tinted.default.border[4],
82
- [vars.color.fg]: vars.color.tinted.default.fg[0],
83
- [vars.color.code.bg]: vars.color.tinted.default.bg[3],
84
- [vars.color.code.fg]: vars.color.tinted.default.fg[4],
85
- [vars.color.muted.bg]: vars.color.tinted.default.bg[3],
86
- [vars.color.muted.fg]: vars.color.tinted.default.fg[4],
87
- },
88
- },
89
-
90
- 'a&:not([data-disabled])[data-pressed], button&:not([data-disabled])[data-pressed]': {
91
- vars: {
92
- [vars.color.bg]: vars.color.tinted.default.bg[2],
93
- [vars.color.border]: vars.color.tinted.default.border[4],
94
- [vars.color.fg]: vars.color.tinted.default.fg[0],
95
- [vars.color.code.bg]: vars.color.tinted.default.bg[3],
96
- [vars.color.code.fg]: vars.color.tinted.default.fg[4],
97
- [vars.color.muted.bg]: vars.color.tinted.default.bg[3],
98
- [vars.color.muted.fg]: vars.color.tinted.default.fg[4],
99
- },
150
+ // selected
151
+ [[
152
+ //
153
+ 'a.&:not([data-disabled])[data-selected]',
154
+ 'button.&:not([data-disabled])[data-selected]',
155
+ ].join(',')]: {
156
+ vars: stateVars.selected,
100
157
  },
101
158
 
102
- 'a&:not([data-disabled])[data-selected], button&:not([data-disabled])[data-selected]': {
103
- vars: {
104
- [vars.color.bg]: vars.color.solid.primary.bg[0],
105
- [vars.color.border]: vars.color.solid.primary.border[1],
106
- [vars.color.fg]: vars.color.solid.primary.fg[0],
107
- [vars.color.code.bg]: vars.color.solid.primary.bg[1],
108
- [vars.color.code.fg]: vars.color.solid.primary.fg[3],
109
- [vars.color.muted.bg]: vars.color.solid.primary.bg[1],
110
- [vars.color.muted.fg]: vars.color.solid.primary.fg[3],
111
- },
159
+ // disabled
160
+ [[
161
+ //
162
+ 'a.&:disabled',
163
+ 'a.&[data-disabled]',
164
+ 'button.&:disabled',
165
+ 'button.&[data-disabled]',
166
+ ].join(',')]: {
167
+ vars: stateVars.disabled,
112
168
  },
113
169
 
114
- 'a&[data-disabled], button&[data-disabled]': {
115
- vars: {
116
- [vars.color.bg]: vars.color.tinted.default.bg[0],
117
- [vars.color.border]: vars.color.tinted.default.border[1],
118
- [vars.color.fg]: vars.color.tinted.default.border[3],
119
- [vars.color.code.bg]: vars.color.tinted.default.bg[0],
120
- [vars.color.code.fg]: vars.color.tinted.default.border[2],
121
- [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
122
- [vars.color.muted.fg]: vars.color.tinted.default.border[2],
123
- },
124
- },
125
-
126
- 'a&[data-focus-ring]:focus, button&[data-focus-ring]:focus': {
170
+ // focus ring
171
+ [[
172
+ //
173
+ 'a.&[data-focus-ring]:focus',
174
+ 'button.&[data-focus-ring]:focus',
175
+ ].join(',')]: {
127
176
  outline: `${vars.card.focusRing.width} solid ${vars.color.focusRing}`,
128
177
  outlineOffset: vars.card.focusRing.offset,
129
178
  },
130
179
 
131
- 'a&[data-focus-ring]:focus:not(:focus-visible), button&[data-focus-ring]:focus:not(:focus-visible)':
132
- {
133
- outline: 'none',
134
- },
180
+ // focus ring - not focus visible
181
+ [[
182
+ //
183
+ 'a.&[data-focus-ring]:focus:not(:focus-visible)',
184
+ 'button.&[data-focus-ring]:focus:not(:focus-visible)',
185
+ ].join(',')]: {
186
+ outline: 'none',
187
+ },
135
188
  },
136
189
  })
137
190
 
package/src/css/primitives/selectable/selectable.css.ts CHANGED
@@ -35,67 +35,102 @@ export const tones: Record<ElementTone, string> = {
35
35
  const focused = vars.color.solid.primary
36
36
  const disabled = vars.color.tinted.default
37
37
 
38
+ const stateVars = {
39
+ enabled: {
40
+ [vars.color.bg]: tinted.bg[0],
41
+ [vars.color.border]: tinted.border[1],
42
+ [vars.color.fg]: tinted.fg[2],
43
+ [vars.color.muted.bg]: tinted.bg[1],
44
+ [vars.color.muted.fg]: tinted.fg[3],
45
+ },
46
+
47
+ hovered: {
48
+ [vars.color.bg]: tinted.bg[1],
49
+ [vars.color.border]: tinted.border[2],
50
+ [vars.color.fg]: tinted.fg[1],
51
+ [vars.color.muted.bg]: tinted.bg[2],
52
+ [vars.color.muted.fg]: tinted.fg[4],
53
+ },
54
+
55
+ pressed: {
56
+ [vars.color.bg]: tinted.bg[2],
57
+ [vars.color.border]: tinted.border[4],
58
+ [vars.color.fg]: tinted.fg[0],
59
+ [vars.color.muted.bg]: tinted.bg[3],
60
+ [vars.color.muted.fg]: tinted.fg[4],
61
+ },
62
+
63
+ focused: {
64
+ [vars.color.bg]: focused.bg[0],
65
+ [vars.color.border]: focused.border[1],
66
+ [vars.color.fg]: focused.fg[0],
67
+ [vars.color.muted.bg]: focused.bg[1],
68
+ [vars.color.muted.fg]: focused.fg[3],
69
+ },
70
+
71
+ disabled: {
72
+ [vars.color.bg]: disabled.bg[0],
73
+ [vars.color.border]: disabled.border[1],
74
+ [vars.color.fg]: disabled.border[4],
75
+ [vars.color.muted.bg]: disabled.bg[1],
76
+ [vars.color.muted.fg]: disabled.border[4],
77
+ },
78
+ } as const
79
+
38
80
  return [
39
81
  t,
40
82
  _style(layers.primitives, {
41
- 'vars': {
42
- [vars.color.bg]: tinted.bg[0],
43
- [vars.color.border]: tinted.border[1],
44
- [vars.color.fg]: tinted.fg[2],
45
- [vars.color.muted.bg]: tinted.bg[1],
46
- [vars.color.muted.fg]: tinted.fg[3],
47
- },
83
+ 'vars': stateVars.enabled,
48
84
 
49
85
  '@media': {
50
86
  '(hover: hover)': {
51
87
  selectors: {
52
- '&:not([data-pressed]):not([data-selected]):not([data-focused]):not([data-disabled]):not(:active):not(:focus):hover':
53
- {
54
- vars: {
55
- [vars.color.bg]: tinted.bg[1],
56
- [vars.color.border]: tinted.border[2],
57
- [vars.color.fg]: tinted.fg[1],
58
- [vars.color.muted.bg]: tinted.bg[2],
59
- [vars.color.muted.fg]: tinted.fg[4],
60
- },
61
- },
88
+ [[
89
+ '&',
90
+ ':not(:active)',
91
+ ':not(:focus)',
92
+ ':not(:disabled)',
93
+ ':not([aria-pressed="true"])',
94
+ ':not([data-pressed])',
95
+ ':not([data-focused])',
96
+ ':not([data-selected])',
97
+ ':not([data-disabled])',
98
+ ':hover',
99
+ ].join('')]: {
100
+ vars: stateVars.hovered,
101
+ },
62
102
  },
63
103
  },
64
104
  },
65
105
 
66
106
  'selectors': {
67
- // selected
68
- '&:not([data-disabled]):active, &:not([data-disabled])[aria-pressed="true"], &:not([data-disabled])[data-selected]':
69
- {
70
- vars: {
71
- [vars.color.bg]: tinted.bg[2],
72
- [vars.color.border]: tinted.border[4],
73
- [vars.color.fg]: tinted.fg[0],
74
- [vars.color.muted.bg]: tinted.bg[3],
75
- [vars.color.muted.fg]: tinted.fg[4],
76
- },
77
- },
107
+ // hovered
108
+ [['&:not([data-disabled])[data-hovered]'].join(',')]: {
109
+ vars: stateVars.hovered,
110
+ },
111
+
112
+ // pressed
113
+ [[
114
+ '&:not([data-disabled]):active',
115
+ '&:not([data-disabled])[aria-pressed="true"]',
116
+ '&:not([data-disabled])[data-pressed]',
117
+ ].join(',')]: {
118
+ vars: stateVars.pressed,
119
+ },
78
120
 
79
121
  // focused
80
- '&:not([data-disabled]):focus, &:not([data-disabled])[data-focused]': {
81
- vars: {
82
- [vars.color.bg]: focused.bg[0],
83
- [vars.color.border]: focused.border[1],
84
- [vars.color.fg]: focused.fg[0],
85
- [vars.color.muted.bg]: focused.bg[1],
86
- [vars.color.muted.fg]: focused.fg[3],
87
- },
122
+ // selected
123
+ [[
124
+ '&:not([data-disabled]):focus',
125
+ '&:not([data-disabled])[data-focused]',
126
+ '&:not([data-disabled])[data-selected]',
127
+ ].join(',')]: {
128
+ vars: stateVars.focused,
88
129
  },
89
130
 
90
131
  // disabled
91
- '&[data-disabled]': {
92
- vars: {
93
- [vars.color.bg]: disabled.bg[0],
94
- [vars.color.border]: disabled.border[1],
95
- [vars.color.fg]: disabled.border[4],
96
- [vars.color.muted.bg]: disabled.bg[1],
97
- [vars.color.muted.fg]: disabled.border[4],
98
- },
132
+ [['&:disabled', '&[data-disabled]'].join(',')]: {
133
+ vars: stateVars.disabled,
99
134
  },
100
135
  },
101
136
  }),