@kushagradhawan/kookie-ui 0.1.4 → 0.1.5
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 +31 -0
- package/package.json +1 -1
- package/src/components/_internal/base-button.css +55 -0
- package/styles.css +31 -0
package/components.css
CHANGED
|
@@ -2201,6 +2201,37 @@
|
|
|
2201
2201
|
box-shadow: inset 0 0 0 1px var(--gray-a6);
|
|
2202
2202
|
background-color: var(--gray-a2);
|
|
2203
2203
|
}
|
|
2204
|
+
.rt-BaseButton:where([data-state='on']):where(.rt-variant-classic) {
|
|
2205
|
+
background: linear-gradient(to bottom, var(--accent-10), var(--accent-11));
|
|
2206
|
+
box-shadow: var(--base-button-classic-hover-shadow);
|
|
2207
|
+
}
|
|
2208
|
+
.rt-BaseButton:where([data-state='on']):where(.rt-variant-classic):where(.rt-high-contrast) {
|
|
2209
|
+
background: linear-gradient(to bottom, var(--accent-11), var(--accent-12));
|
|
2210
|
+
filter: contrast(0.88) saturate(1.1) brightness(1.1);
|
|
2211
|
+
}
|
|
2212
|
+
.rt-BaseButton:where([data-state='on']):where(.rt-variant-classic):where(.rt-high-contrast):where(:not([data-accent-color='gray'])) {
|
|
2213
|
+
background: var(--accent-12);
|
|
2214
|
+
}
|
|
2215
|
+
.rt-BaseButton:where([data-state='on']):where(.rt-variant-solid) {
|
|
2216
|
+
background-color: var(--accent-10);
|
|
2217
|
+
}
|
|
2218
|
+
.rt-BaseButton:where([data-state='on']):where(.rt-variant-solid):where(.rt-high-contrast) {
|
|
2219
|
+
background-color: var(--accent-12);
|
|
2220
|
+
filter: var(--base-button-solid-high-contrast-hover-filter);
|
|
2221
|
+
}
|
|
2222
|
+
.rt-BaseButton:where([data-state='on']):where(.rt-variant-soft) {
|
|
2223
|
+
background-color: var(--accent-a5);
|
|
2224
|
+
}
|
|
2225
|
+
.rt-BaseButton:where([data-state='on']):where(.rt-variant-ghost) {
|
|
2226
|
+
background-color: var(--accent-a4);
|
|
2227
|
+
}
|
|
2228
|
+
.rt-BaseButton:where([data-state='on']):where(.rt-variant-outline) {
|
|
2229
|
+
background-color: var(--accent-a3);
|
|
2230
|
+
}
|
|
2231
|
+
.rt-BaseButton:where([data-state='on']):where(.rt-variant-surface) {
|
|
2232
|
+
background-color: var(--accent-a3);
|
|
2233
|
+
box-shadow: inset 0 0 0 1px var(--accent-a8);
|
|
2234
|
+
}
|
|
2204
2235
|
.rt-Button:where(:not(.rt-variant-ghost)) :where(svg) {
|
|
2205
2236
|
opacity: 0.9;
|
|
2206
2237
|
}
|
package/package.json
CHANGED
|
@@ -351,3 +351,58 @@
|
|
|
351
351
|
background-color: var(--gray-a2);
|
|
352
352
|
}
|
|
353
353
|
}
|
|
354
|
+
|
|
355
|
+
/***************************************************************************************************
|
|
356
|
+
* *
|
|
357
|
+
* TOGGLE PRESSED STATES *
|
|
358
|
+
* *
|
|
359
|
+
***************************************************************************************************/
|
|
360
|
+
|
|
361
|
+
/* Toggle button pressed states for all variants */
|
|
362
|
+
.rt-BaseButton:where([data-state='on']) {
|
|
363
|
+
/* Classic variant pressed */
|
|
364
|
+
&:where(.rt-variant-classic) {
|
|
365
|
+
background: linear-gradient(to bottom, var(--accent-10), var(--accent-11));
|
|
366
|
+
box-shadow: var(--base-button-classic-hover-shadow);
|
|
367
|
+
|
|
368
|
+
&:where(.rt-high-contrast) {
|
|
369
|
+
background: linear-gradient(to bottom, var(--accent-11), var(--accent-12));
|
|
370
|
+
filter: contrast(0.88) saturate(1.1) brightness(1.1);
|
|
371
|
+
|
|
372
|
+
&:where(:not([data-accent-color='gray'])) {
|
|
373
|
+
background: var(--accent-12);
|
|
374
|
+
}
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
/* Solid variant pressed */
|
|
379
|
+
&:where(.rt-variant-solid) {
|
|
380
|
+
background-color: var(--accent-10);
|
|
381
|
+
|
|
382
|
+
&:where(.rt-high-contrast) {
|
|
383
|
+
background-color: var(--accent-12);
|
|
384
|
+
filter: var(--base-button-solid-high-contrast-hover-filter);
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
/* Soft variant pressed */
|
|
389
|
+
&:where(.rt-variant-soft) {
|
|
390
|
+
background-color: var(--accent-a5);
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
/* Ghost variant pressed */
|
|
394
|
+
&:where(.rt-variant-ghost) {
|
|
395
|
+
background-color: var(--accent-a4);
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
/* Outline variant pressed */
|
|
399
|
+
&:where(.rt-variant-outline) {
|
|
400
|
+
background-color: var(--accent-a3);
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
/* Surface variant pressed */
|
|
404
|
+
&:where(.rt-variant-surface) {
|
|
405
|
+
background-color: var(--accent-a3);
|
|
406
|
+
box-shadow: inset 0 0 0 1px var(--accent-a8);
|
|
407
|
+
}
|
|
408
|
+
}
|
package/styles.css
CHANGED
|
@@ -6909,6 +6909,37 @@
|
|
|
6909
6909
|
box-shadow: inset 0 0 0 1px var(--gray-a6);
|
|
6910
6910
|
background-color: var(--gray-a2);
|
|
6911
6911
|
}
|
|
6912
|
+
.rt-BaseButton:where([data-state='on']):where(.rt-variant-classic) {
|
|
6913
|
+
background: linear-gradient(to bottom, var(--accent-10), var(--accent-11));
|
|
6914
|
+
box-shadow: var(--base-button-classic-hover-shadow);
|
|
6915
|
+
}
|
|
6916
|
+
.rt-BaseButton:where([data-state='on']):where(.rt-variant-classic):where(.rt-high-contrast) {
|
|
6917
|
+
background: linear-gradient(to bottom, var(--accent-11), var(--accent-12));
|
|
6918
|
+
filter: contrast(0.88) saturate(1.1) brightness(1.1);
|
|
6919
|
+
}
|
|
6920
|
+
.rt-BaseButton:where([data-state='on']):where(.rt-variant-classic):where(.rt-high-contrast):where(:not([data-accent-color='gray'])) {
|
|
6921
|
+
background: var(--accent-12);
|
|
6922
|
+
}
|
|
6923
|
+
.rt-BaseButton:where([data-state='on']):where(.rt-variant-solid) {
|
|
6924
|
+
background-color: var(--accent-10);
|
|
6925
|
+
}
|
|
6926
|
+
.rt-BaseButton:where([data-state='on']):where(.rt-variant-solid):where(.rt-high-contrast) {
|
|
6927
|
+
background-color: var(--accent-12);
|
|
6928
|
+
filter: var(--base-button-solid-high-contrast-hover-filter);
|
|
6929
|
+
}
|
|
6930
|
+
.rt-BaseButton:where([data-state='on']):where(.rt-variant-soft) {
|
|
6931
|
+
background-color: var(--accent-a5);
|
|
6932
|
+
}
|
|
6933
|
+
.rt-BaseButton:where([data-state='on']):where(.rt-variant-ghost) {
|
|
6934
|
+
background-color: var(--accent-a4);
|
|
6935
|
+
}
|
|
6936
|
+
.rt-BaseButton:where([data-state='on']):where(.rt-variant-outline) {
|
|
6937
|
+
background-color: var(--accent-a3);
|
|
6938
|
+
}
|
|
6939
|
+
.rt-BaseButton:where([data-state='on']):where(.rt-variant-surface) {
|
|
6940
|
+
background-color: var(--accent-a3);
|
|
6941
|
+
box-shadow: inset 0 0 0 1px var(--accent-a8);
|
|
6942
|
+
}
|
|
6912
6943
|
.rt-Button:where(:not(.rt-variant-ghost)) :where(svg) {
|
|
6913
6944
|
opacity: 0.9;
|
|
6914
6945
|
}
|