@womp/kookie-ui 0.4.0 → 0.5.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 (21) hide show
  1. package/components.css +468 -266
  2. package/package.json +1 -1
  3. package/src/components/_internal/base-card.css +5 -5
  4. package/src/components/_internal/base-checkbox.css +17 -3
  5. package/src/components/_internal/base-dialog.css +4 -4
  6. package/src/components/_internal/base-menu.css +3 -3
  7. package/src/components/accordion.css +5 -5
  8. package/src/components/callout.css +5 -5
  9. package/src/components/chatbar.css +6 -6
  10. package/src/components/checkbox-cards.css +30 -0
  11. package/src/components/hover-card.css +3 -3
  12. package/src/components/popover.css +4 -4
  13. package/src/components/radio-cards.css +30 -0
  14. package/src/components/select.css +2 -2
  15. package/src/components/shell.css +1 -1
  16. package/src/components/table.css +5 -5
  17. package/src/components/tooltip.css +1 -1
  18. package/src/styles/tokens/radius.css +47 -4
  19. package/styles.css +486 -267
  20. package/tokens/base.css +18 -1
  21. package/tokens.css +18 -1
package/tokens/base.css CHANGED
@@ -1355,25 +1355,42 @@
1355
1355
  --radius-10: calc(40px * var(--scaling) * var(--radius-factor));
1356
1356
  --radius-11: calc(48px * var(--scaling) * var(--radius-factor));
1357
1357
  --radius-12: calc(56px * var(--scaling) * var(--radius-factor));
1358
+ --radius-surface-1: calc(6px * var(--scaling) * var(--radius-surface-factor));
1359
+ --radius-surface-2: calc(8px * var(--scaling) * var(--radius-surface-factor));
1360
+ --radius-surface-3: calc(10px * var(--scaling) * var(--radius-surface-factor));
1361
+ --radius-surface-4: calc(12px * var(--scaling) * var(--radius-surface-factor));
1362
+ --radius-surface-5: calc(16px * var(--scaling) * var(--radius-surface-factor));
1363
+ --radius-surface-6: calc(20px * var(--scaling) * var(--radius-surface-factor));
1364
+ --radius-surface-7: calc(24px * var(--scaling) * var(--radius-surface-factor));
1365
+ --radius-surface-8: calc(28px * var(--scaling) * var(--radius-surface-factor));
1366
+ --radius-surface-9: calc(32px * var(--scaling) * var(--radius-surface-factor));
1367
+ --radius-surface-10: calc(40px * var(--scaling) * var(--radius-surface-factor));
1368
+ --radius-surface-11: calc(48px * var(--scaling) * var(--radius-surface-factor));
1369
+ --radius-surface-12: calc(56px * var(--scaling) * var(--radius-surface-factor));
1358
1370
  }
1359
1371
  [data-radius='none'] {
1360
1372
  --radius-factor: 0;
1373
+ --radius-surface-factor: 0;
1361
1374
  --radius-full: 0px;
1362
1375
  }
1363
1376
  [data-radius='small'] {
1364
1377
  --radius-factor: 0.75;
1378
+ --radius-surface-factor: 0.5;
1365
1379
  --radius-full: 0px;
1366
1380
  }
1367
1381
  [data-radius='medium'] {
1368
1382
  --radius-factor: 1;
1383
+ --radius-surface-factor: 0.75;
1369
1384
  --radius-full: 0px;
1370
1385
  }
1371
1386
  [data-radius='large'] {
1372
1387
  --radius-factor: 1.5;
1388
+ --radius-surface-factor: 0.9;
1373
1389
  --radius-full: 0px;
1374
1390
  }
1375
1391
  [data-radius='full'] {
1376
- --radius-factor: 2.0;
1392
+ --radius-factor: 2;
1393
+ --radius-surface-factor: 1;
1377
1394
  --radius-full: 9999px;
1378
1395
  }
1379
1396
  @supports (color: color-mix(in oklab, white, black)) {
package/tokens.css CHANGED
@@ -4740,25 +4740,42 @@
4740
4740
  --radius-10: calc(40px * var(--scaling) * var(--radius-factor));
4741
4741
  --radius-11: calc(48px * var(--scaling) * var(--radius-factor));
4742
4742
  --radius-12: calc(56px * var(--scaling) * var(--radius-factor));
4743
+ --radius-surface-1: calc(6px * var(--scaling) * var(--radius-surface-factor));
4744
+ --radius-surface-2: calc(8px * var(--scaling) * var(--radius-surface-factor));
4745
+ --radius-surface-3: calc(10px * var(--scaling) * var(--radius-surface-factor));
4746
+ --radius-surface-4: calc(12px * var(--scaling) * var(--radius-surface-factor));
4747
+ --radius-surface-5: calc(16px * var(--scaling) * var(--radius-surface-factor));
4748
+ --radius-surface-6: calc(20px * var(--scaling) * var(--radius-surface-factor));
4749
+ --radius-surface-7: calc(24px * var(--scaling) * var(--radius-surface-factor));
4750
+ --radius-surface-8: calc(28px * var(--scaling) * var(--radius-surface-factor));
4751
+ --radius-surface-9: calc(32px * var(--scaling) * var(--radius-surface-factor));
4752
+ --radius-surface-10: calc(40px * var(--scaling) * var(--radius-surface-factor));
4753
+ --radius-surface-11: calc(48px * var(--scaling) * var(--radius-surface-factor));
4754
+ --radius-surface-12: calc(56px * var(--scaling) * var(--radius-surface-factor));
4743
4755
  }
4744
4756
  [data-radius='none'] {
4745
4757
  --radius-factor: 0;
4758
+ --radius-surface-factor: 0;
4746
4759
  --radius-full: 0px;
4747
4760
  }
4748
4761
  [data-radius='small'] {
4749
4762
  --radius-factor: 0.75;
4763
+ --radius-surface-factor: 0.5;
4750
4764
  --radius-full: 0px;
4751
4765
  }
4752
4766
  [data-radius='medium'] {
4753
4767
  --radius-factor: 1;
4768
+ --radius-surface-factor: 0.75;
4754
4769
  --radius-full: 0px;
4755
4770
  }
4756
4771
  [data-radius='large'] {
4757
4772
  --radius-factor: 1.5;
4773
+ --radius-surface-factor: 0.9;
4758
4774
  --radius-full: 0px;
4759
4775
  }
4760
4776
  [data-radius='full'] {
4761
- --radius-factor: 2.0;
4777
+ --radius-factor: 2;
4778
+ --radius-surface-factor: 1;
4762
4779
  --radius-full: 9999px;
4763
4780
  }
4764
4781
  @supports (color: color-mix(in oklab, white, black)) {