@kushagradhawan/kookie-ui 0.1.10 → 0.1.11
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/components.css +198 -98
- package/package.json +1 -1
- package/src/components/_internal/base-menu.css +60 -2
- package/src/components/button.css +8 -8
- package/src/components/icon-button.css +8 -8
- package/styles.css +198 -98
package/package.json
CHANGED
|
@@ -28,7 +28,9 @@
|
|
|
28
28
|
display: flex;
|
|
29
29
|
align-items: center;
|
|
30
30
|
gap: var(--space-2);
|
|
31
|
-
height: var(--base-menu-item-height);
|
|
31
|
+
min-height: var(--base-menu-item-height);
|
|
32
|
+
padding-top: var(--base-menu-item-padding-y);
|
|
33
|
+
padding-bottom: var(--base-menu-item-padding-y);
|
|
32
34
|
padding-left: var(--base-menu-item-padding-left);
|
|
33
35
|
padding-right: var(--base-menu-item-padding-right);
|
|
34
36
|
box-sizing: border-box;
|
|
@@ -78,7 +80,9 @@
|
|
|
78
80
|
.rt-BaseMenuLabel {
|
|
79
81
|
display: flex;
|
|
80
82
|
align-items: center;
|
|
81
|
-
height: var(--base-menu-item-height);
|
|
83
|
+
min-height: var(--base-menu-item-height);
|
|
84
|
+
padding-top: var(--base-menu-item-padding-y);
|
|
85
|
+
padding-bottom: var(--base-menu-item-padding-y);
|
|
82
86
|
padding-left: var(--base-menu-item-padding-left);
|
|
83
87
|
padding-right: var(--base-menu-item-padding-right);
|
|
84
88
|
box-sizing: border-box;
|
|
@@ -107,6 +111,7 @@
|
|
|
107
111
|
--base-menu-content-padding: var(--space-1);
|
|
108
112
|
--base-menu-item-padding-left: calc(var(--space-5) / 1.2);
|
|
109
113
|
--base-menu-item-padding-right: var(--space-2);
|
|
114
|
+
--base-menu-item-padding-y: calc(var(--space-1) * 0.75);
|
|
110
115
|
--base-menu-item-height: var(--space-5);
|
|
111
116
|
border-radius: var(--radius-3);
|
|
112
117
|
|
|
@@ -115,6 +120,13 @@
|
|
|
115
120
|
line-height: var(--line-height-1);
|
|
116
121
|
letter-spacing: var(--letter-spacing-1);
|
|
117
122
|
border-radius: var(--radius-1);
|
|
123
|
+
|
|
124
|
+
/* stylelint-disable-next-line selector-max-type */
|
|
125
|
+
& :where(svg) {
|
|
126
|
+
width: var(--space-4);
|
|
127
|
+
height: var(--space-4);
|
|
128
|
+
flex-shrink: 0;
|
|
129
|
+
}
|
|
118
130
|
}
|
|
119
131
|
|
|
120
132
|
& :where(.rt-BaseMenuLabel) {
|
|
@@ -141,6 +153,7 @@
|
|
|
141
153
|
--base-menu-content-padding: var(--space-2);
|
|
142
154
|
--base-menu-item-padding-left: var(--space-3);
|
|
143
155
|
--base-menu-item-padding-right: var(--space-3);
|
|
156
|
+
--base-menu-item-padding-y: var(--space-1);
|
|
144
157
|
--base-menu-item-height: var(--space-6);
|
|
145
158
|
border-radius: var(--radius-4);
|
|
146
159
|
|
|
@@ -149,6 +162,13 @@
|
|
|
149
162
|
line-height: var(--line-height-2);
|
|
150
163
|
letter-spacing: var(--letter-spacing-2);
|
|
151
164
|
border-radius: var(--radius-2);
|
|
165
|
+
|
|
166
|
+
/* stylelint-disable-next-line selector-max-type */
|
|
167
|
+
& :where(svg) {
|
|
168
|
+
width: var(--space-4);
|
|
169
|
+
height: var(--space-4);
|
|
170
|
+
flex-shrink: 0;
|
|
171
|
+
}
|
|
152
172
|
}
|
|
153
173
|
|
|
154
174
|
& :where(.rt-BaseMenuLabel) {
|
|
@@ -192,6 +212,11 @@
|
|
|
192
212
|
.rt-BaseMenuShortcut {
|
|
193
213
|
color: var(--gray-a11);
|
|
194
214
|
}
|
|
215
|
+
|
|
216
|
+
/* Ensure gray text appears muted in non-highlighted state */
|
|
217
|
+
.rt-BaseMenuItem :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
|
|
218
|
+
color: var(--gray-a10);
|
|
219
|
+
}
|
|
195
220
|
.rt-BaseMenuItem:where([data-disabled], [data-highlighted]),
|
|
196
221
|
.rt-BaseMenuSubTrigger:where([data-state='open']) {
|
|
197
222
|
& :where(.rt-BaseMenuShortcut) {
|
|
@@ -215,6 +240,16 @@
|
|
|
215
240
|
& :where(.rt-BaseMenuSubTriggerIcon) {
|
|
216
241
|
color: var(--accent-contrast);
|
|
217
242
|
}
|
|
243
|
+
|
|
244
|
+
/* Force all text elements to inherit hover color, including those with color="gray" */
|
|
245
|
+
& :where(.rt-Text) {
|
|
246
|
+
color: inherit !important;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
/* Also target any element with data-accent-color="gray" */
|
|
250
|
+
& :where([data-accent-color='gray']) {
|
|
251
|
+
color: inherit !important;
|
|
252
|
+
}
|
|
218
253
|
}
|
|
219
254
|
&:where(.rt-high-contrast) {
|
|
220
255
|
& :where(.rt-BaseMenuItem[data-highlighted]) {
|
|
@@ -225,9 +260,27 @@
|
|
|
225
260
|
color: var(--accent-1);
|
|
226
261
|
}
|
|
227
262
|
|
|
263
|
+
/* Force all text elements to inherit hover color in high contrast mode */
|
|
264
|
+
& :where(.rt-Text) {
|
|
265
|
+
color: inherit !important;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
/* Also target any element with data-accent-color="gray" in high contrast */
|
|
269
|
+
& :where([data-accent-color='gray']) {
|
|
270
|
+
color: inherit !important;
|
|
271
|
+
}
|
|
272
|
+
|
|
228
273
|
&:where([data-accent-color]) {
|
|
229
274
|
background-color: var(--accent-9);
|
|
230
275
|
color: var(--accent-contrast);
|
|
276
|
+
|
|
277
|
+
& :where(.rt-Text) {
|
|
278
|
+
color: inherit !important;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
& :where([data-accent-color='gray']) {
|
|
282
|
+
color: inherit !important;
|
|
283
|
+
}
|
|
231
284
|
}
|
|
232
285
|
}
|
|
233
286
|
}
|
|
@@ -241,5 +294,10 @@
|
|
|
241
294
|
}
|
|
242
295
|
& :where(.rt-BaseMenuItem[data-highlighted]) {
|
|
243
296
|
background-color: var(--accent-a4);
|
|
297
|
+
|
|
298
|
+
/* In soft variant, improve contrast for gray text while maintaining hierarchy */
|
|
299
|
+
& :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
|
|
300
|
+
color: var(--gray-11) !important;
|
|
301
|
+
}
|
|
244
302
|
}
|
|
245
303
|
}
|
|
@@ -31,8 +31,8 @@
|
|
|
31
31
|
|
|
32
32
|
/* stylelint-disable-next-line selector-max-type */
|
|
33
33
|
& :where(svg) {
|
|
34
|
-
width:
|
|
35
|
-
height:
|
|
34
|
+
width: var(--space-4);
|
|
35
|
+
height: var(--space-4);
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
&:where(:not(.rt-variant-ghost)) {
|
|
@@ -53,8 +53,8 @@
|
|
|
53
53
|
|
|
54
54
|
/* stylelint-disable-next-line selector-max-type */
|
|
55
55
|
& :where(svg) {
|
|
56
|
-
width:
|
|
57
|
-
height:
|
|
56
|
+
width: var(--space-4);
|
|
57
|
+
height: var(--space-4);
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
&:where(:not(.rt-variant-ghost)) {
|
|
@@ -75,8 +75,8 @@
|
|
|
75
75
|
|
|
76
76
|
/* stylelint-disable-next-line selector-max-type */
|
|
77
77
|
& :where(svg) {
|
|
78
|
-
width:
|
|
79
|
-
height:
|
|
78
|
+
width: var(--space-5);
|
|
79
|
+
height: var(--space-5);
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
&:where(:not(.rt-variant-ghost)) {
|
|
@@ -97,8 +97,8 @@
|
|
|
97
97
|
|
|
98
98
|
/* stylelint-disable-next-line selector-max-type */
|
|
99
99
|
& :where(svg) {
|
|
100
|
-
width:
|
|
101
|
-
height:
|
|
100
|
+
width: var(--space-5);
|
|
101
|
+
height: var(--space-5);
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
&:where(:not(.rt-variant-ghost)) {
|
|
@@ -16,29 +16,29 @@
|
|
|
16
16
|
&:where(.rt-r-size-1) {
|
|
17
17
|
/* stylelint-disable-next-line selector-max-type */
|
|
18
18
|
& :where(svg) {
|
|
19
|
-
width:
|
|
20
|
-
height:
|
|
19
|
+
width: var(--space-4);
|
|
20
|
+
height: var(--space-4);
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
&:where(.rt-r-size-2) {
|
|
24
24
|
/* stylelint-disable-next-line selector-max-type */
|
|
25
25
|
& :where(svg) {
|
|
26
|
-
width:
|
|
27
|
-
height:
|
|
26
|
+
width: var(--space-4);
|
|
27
|
+
height: var(--space-4);
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
&:where(.rt-r-size-3) {
|
|
31
31
|
/* stylelint-disable-next-line selector-max-type */
|
|
32
32
|
& :where(svg) {
|
|
33
|
-
width:
|
|
34
|
-
height:
|
|
33
|
+
width: var(--space-5);
|
|
34
|
+
height: var(--space-5);
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
&:where(.rt-r-size-4) {
|
|
38
38
|
/* stylelint-disable-next-line selector-max-type */
|
|
39
39
|
& :where(svg) {
|
|
40
|
-
width:
|
|
41
|
-
height:
|
|
40
|
+
width: var(--space-5);
|
|
41
|
+
height: var(--space-5);
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
}
|