@kushagradhawan/kookie-ui 0.1.37 → 0.1.39

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 (172) hide show
  1. package/components.css +130 -74
  2. package/dist/cjs/components/_internal/base-button.props.d.ts +1 -1
  3. package/dist/cjs/components/_internal/base-button.props.js +1 -1
  4. package/dist/cjs/components/_internal/base-button.props.js.map +2 -2
  5. package/dist/cjs/components/_internal/base-checkbox.props.d.ts +1 -1
  6. package/dist/cjs/components/_internal/base-checkbox.props.js +1 -1
  7. package/dist/cjs/components/_internal/base-checkbox.props.js.map +2 -2
  8. package/dist/cjs/components/avatar.props.d.ts +1 -1
  9. package/dist/cjs/components/avatar.props.js +1 -1
  10. package/dist/cjs/components/avatar.props.js.map +2 -2
  11. package/dist/cjs/components/button.d.ts +40 -2
  12. package/dist/cjs/components/button.d.ts.map +1 -1
  13. package/dist/cjs/components/button.js +1 -1
  14. package/dist/cjs/components/button.js.map +3 -3
  15. package/dist/cjs/components/chatbar.d.ts.map +1 -1
  16. package/dist/cjs/components/chatbar.js +1 -1
  17. package/dist/cjs/components/chatbar.js.map +2 -2
  18. package/dist/cjs/components/checkbox-cards.props.d.ts +2 -2
  19. package/dist/cjs/components/checkbox-cards.props.js +1 -1
  20. package/dist/cjs/components/checkbox-cards.props.js.map +2 -2
  21. package/dist/cjs/components/checkbox-group.d.ts.map +1 -1
  22. package/dist/cjs/components/checkbox-group.js +1 -1
  23. package/dist/cjs/components/checkbox-group.js.map +3 -3
  24. package/dist/cjs/components/checkbox-group.props.d.ts +1 -1
  25. package/dist/cjs/components/dialog.d.ts.map +1 -1
  26. package/dist/cjs/components/dialog.js +1 -1
  27. package/dist/cjs/components/dialog.js.map +3 -3
  28. package/dist/cjs/components/flex.props.d.ts +3 -3
  29. package/dist/cjs/components/grid.props.d.ts +3 -3
  30. package/dist/cjs/components/radio-cards.props.d.ts +2 -2
  31. package/dist/cjs/components/radio-cards.props.js +1 -1
  32. package/dist/cjs/components/radio-cards.props.js.map +2 -2
  33. package/dist/cjs/components/select.d.ts.map +1 -1
  34. package/dist/cjs/components/select.js +1 -1
  35. package/dist/cjs/components/select.js.map +3 -3
  36. package/dist/cjs/components/shell.d.ts.map +1 -1
  37. package/dist/cjs/components/shell.js +1 -1
  38. package/dist/cjs/components/shell.js.map +3 -3
  39. package/dist/cjs/components/sidebar.d.ts +7 -1
  40. package/dist/cjs/components/sidebar.d.ts.map +1 -1
  41. package/dist/cjs/components/sidebar.js +1 -1
  42. package/dist/cjs/components/sidebar.js.map +3 -3
  43. package/dist/cjs/components/sidebar.props.d.ts +6 -0
  44. package/dist/cjs/components/sidebar.props.d.ts.map +1 -1
  45. package/dist/cjs/components/sidebar.props.js +1 -1
  46. package/dist/cjs/components/sidebar.props.js.map +3 -3
  47. package/dist/cjs/components/table.props.d.ts +7 -7
  48. package/dist/cjs/components/text-field.props.d.ts +4 -4
  49. package/dist/cjs/helpers/extract-margin-props.d.ts +7 -7
  50. package/dist/cjs/hooks/index.d.ts +1 -0
  51. package/dist/cjs/hooks/index.d.ts.map +1 -1
  52. package/dist/cjs/hooks/index.js +1 -1
  53. package/dist/cjs/hooks/index.js.map +3 -3
  54. package/dist/cjs/hooks/use-body-pointer-events-cleanup.d.ts +9 -0
  55. package/dist/cjs/hooks/use-body-pointer-events-cleanup.d.ts.map +1 -0
  56. package/dist/cjs/hooks/use-body-pointer-events-cleanup.js +2 -0
  57. package/dist/cjs/hooks/use-body-pointer-events-cleanup.js.map +7 -0
  58. package/dist/cjs/props/gap.props.d.ts +3 -3
  59. package/dist/cjs/props/gap.props.js +1 -1
  60. package/dist/cjs/props/gap.props.js.map +2 -2
  61. package/dist/cjs/props/layout.props.d.ts +7 -7
  62. package/dist/cjs/props/margin.props.d.ts +7 -7
  63. package/dist/cjs/props/margin.props.js +1 -1
  64. package/dist/cjs/props/margin.props.js.map +2 -2
  65. package/dist/cjs/props/padding.props.d.ts +7 -7
  66. package/dist/cjs/props/padding.props.js +1 -1
  67. package/dist/cjs/props/padding.props.js.map +2 -2
  68. package/dist/esm/components/_internal/base-button.props.d.ts +1 -1
  69. package/dist/esm/components/_internal/base-button.props.js +1 -1
  70. package/dist/esm/components/_internal/base-button.props.js.map +2 -2
  71. package/dist/esm/components/_internal/base-checkbox.props.d.ts +1 -1
  72. package/dist/esm/components/_internal/base-checkbox.props.js +1 -1
  73. package/dist/esm/components/_internal/base-checkbox.props.js.map +2 -2
  74. package/dist/esm/components/avatar.props.d.ts +1 -1
  75. package/dist/esm/components/avatar.props.js +1 -1
  76. package/dist/esm/components/avatar.props.js.map +2 -2
  77. package/dist/esm/components/button.d.ts +40 -2
  78. package/dist/esm/components/button.d.ts.map +1 -1
  79. package/dist/esm/components/button.js +1 -1
  80. package/dist/esm/components/button.js.map +3 -3
  81. package/dist/esm/components/chatbar.d.ts.map +1 -1
  82. package/dist/esm/components/chatbar.js +1 -1
  83. package/dist/esm/components/chatbar.js.map +2 -2
  84. package/dist/esm/components/checkbox-cards.props.d.ts +2 -2
  85. package/dist/esm/components/checkbox-cards.props.js +1 -1
  86. package/dist/esm/components/checkbox-cards.props.js.map +2 -2
  87. package/dist/esm/components/checkbox-group.d.ts.map +1 -1
  88. package/dist/esm/components/checkbox-group.js +1 -1
  89. package/dist/esm/components/checkbox-group.js.map +3 -3
  90. package/dist/esm/components/checkbox-group.props.d.ts +1 -1
  91. package/dist/esm/components/dialog.d.ts.map +1 -1
  92. package/dist/esm/components/dialog.js +1 -1
  93. package/dist/esm/components/dialog.js.map +3 -3
  94. package/dist/esm/components/flex.props.d.ts +3 -3
  95. package/dist/esm/components/grid.props.d.ts +3 -3
  96. package/dist/esm/components/radio-cards.props.d.ts +2 -2
  97. package/dist/esm/components/radio-cards.props.js +1 -1
  98. package/dist/esm/components/radio-cards.props.js.map +2 -2
  99. package/dist/esm/components/select.d.ts.map +1 -1
  100. package/dist/esm/components/select.js +1 -1
  101. package/dist/esm/components/select.js.map +3 -3
  102. package/dist/esm/components/shell.d.ts.map +1 -1
  103. package/dist/esm/components/shell.js +1 -1
  104. package/dist/esm/components/shell.js.map +3 -3
  105. package/dist/esm/components/sidebar.d.ts +7 -1
  106. package/dist/esm/components/sidebar.d.ts.map +1 -1
  107. package/dist/esm/components/sidebar.js +1 -1
  108. package/dist/esm/components/sidebar.js.map +3 -3
  109. package/dist/esm/components/sidebar.props.d.ts +6 -0
  110. package/dist/esm/components/sidebar.props.d.ts.map +1 -1
  111. package/dist/esm/components/sidebar.props.js +1 -1
  112. package/dist/esm/components/sidebar.props.js.map +3 -3
  113. package/dist/esm/components/table.props.d.ts +7 -7
  114. package/dist/esm/components/text-field.props.d.ts +4 -4
  115. package/dist/esm/helpers/extract-margin-props.d.ts +7 -7
  116. package/dist/esm/hooks/index.d.ts +1 -0
  117. package/dist/esm/hooks/index.d.ts.map +1 -1
  118. package/dist/esm/hooks/index.js +1 -1
  119. package/dist/esm/hooks/index.js.map +3 -3
  120. package/dist/esm/hooks/use-body-pointer-events-cleanup.d.ts +9 -0
  121. package/dist/esm/hooks/use-body-pointer-events-cleanup.d.ts.map +1 -0
  122. package/dist/esm/hooks/use-body-pointer-events-cleanup.js +2 -0
  123. package/dist/esm/hooks/use-body-pointer-events-cleanup.js.map +7 -0
  124. package/dist/esm/props/gap.props.d.ts +3 -3
  125. package/dist/esm/props/gap.props.js +1 -1
  126. package/dist/esm/props/gap.props.js.map +2 -2
  127. package/dist/esm/props/layout.props.d.ts +7 -7
  128. package/dist/esm/props/margin.props.d.ts +7 -7
  129. package/dist/esm/props/margin.props.js +1 -1
  130. package/dist/esm/props/margin.props.js.map +2 -2
  131. package/dist/esm/props/padding.props.d.ts +7 -7
  132. package/dist/esm/props/padding.props.js +1 -1
  133. package/dist/esm/props/padding.props.js.map +2 -2
  134. package/layout/tokens.css +3 -0
  135. package/layout/utilities.css +1806 -42
  136. package/layout.css +1809 -42
  137. package/package.json +1 -1
  138. package/src/components/_internal/base-button.css +179 -73
  139. package/src/components/_internal/base-button.props.ts +1 -1
  140. package/src/components/_internal/base-checkbox.props.ts +1 -1
  141. package/src/components/avatar.props.tsx +1 -1
  142. package/src/components/button.css +13 -21
  143. package/src/components/button.tsx +79 -2
  144. package/src/components/chatbar.tsx +5 -2
  145. package/src/components/checkbox-cards.props.tsx +1 -1
  146. package/src/components/checkbox-group.tsx +14 -6
  147. package/src/components/dialog.tsx +4 -0
  148. package/src/components/radio-cards.props.tsx +1 -1
  149. package/src/components/select.css +9 -0
  150. package/src/components/select.tsx +11 -1
  151. package/src/components/shell.tsx +34 -3
  152. package/src/components/sidebar.css +15 -3
  153. package/src/components/sidebar.props.tsx +3 -0
  154. package/src/components/sidebar.tsx +27 -0
  155. package/src/hooks/index.ts +2 -1
  156. package/src/hooks/use-body-pointer-events-cleanup.ts +81 -0
  157. package/src/props/gap.props.ts +1 -1
  158. package/src/props/margin.props.ts +1 -1
  159. package/src/props/padding.props.ts +1 -1
  160. package/src/styles/tokens/blur.css +3 -0
  161. package/src/styles/tokens/constants.css +38 -35
  162. package/src/styles/tokens/radius.css +3 -0
  163. package/src/styles/tokens/shadow.css +64 -89
  164. package/src/styles/tokens/space.css +3 -0
  165. package/src/styles/tokens/transition.css +25 -12
  166. package/src/styles/utilities/gap.css +27 -0
  167. package/src/styles/utilities/margin.css +205 -7
  168. package/src/styles/utilities/padding.css +69 -0
  169. package/styles.css +1973 -144
  170. package/tokens/base.css +34 -25
  171. package/tokens.css +37 -28
  172. package/utilities.css +1806 -42
package/tokens/base.css CHANGED
@@ -64,12 +64,12 @@
64
64
  --color-dialog-solid: white;
65
65
  --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity));
66
66
  --color-transparent: rgb(0 0 0 / 0);
67
- --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1px 1px 0 var(--gray-a2), inset 0 1px 1px 0 var(--black-a2);
68
- --shadow-2: 0 0 0 0.5px var(--gray-a2), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
69
- --shadow-3: 0 0 0 0.5px var(--gray-a2), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
70
- --shadow-4: 0 0 0 0.5px var(--gray-a2), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
71
- --shadow-5: 0 0 0 0.5px var(--gray-a2), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
72
- --shadow-6: 0 0 0 0.5px var(--gray-a2), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
67
+ --shadow-1: 0 0 0 0.25px var(--gray-a6), inset 0 1px 1px 0 var(--black-a2);
68
+ --shadow-2: 0 0 0 0.25px var(--gray-a6), 0 1px 3px 0 var(--black-a2), 0 1px 2px -1px var(--black-a2);
69
+ --shadow-3: 0 0 0 0.25px var(--gray-a6), 0 4px 6px -1px var(--black-a2), 0 2px 4px -2px var(--black-a2);
70
+ --shadow-4: 0 0 0 0.5px var(--gray-a6), 0 10px 15px -3px var(--black-a3), 0 4px 6px -4px var(--black-a3);
71
+ --shadow-5: 0 0 0 0.5px var(--gray-a6), 0 20px 25px -5px var(--black-a3), 0 8px 10px -6px var(--black-a3);
72
+ --shadow-6: 0 0 0 0.5px var(--gray-a6), 0 25px 50px -12px var(--black-a5);
73
73
  --blur-factor: 1;
74
74
  --blur-1: calc(2px * var(--scaling) * var(--blur-factor));
75
75
  --blur-2: calc(4px * var(--scaling) * var(--blur-factor));
@@ -80,6 +80,9 @@
80
80
  --blur-7: calc(28px * var(--scaling) * var(--blur-factor));
81
81
  --blur-8: calc(36px * var(--scaling) * var(--blur-factor));
82
82
  --blur-9: calc(44px * var(--scaling) * var(--blur-factor));
83
+ --blur-10: calc(52px * var(--scaling) * var(--blur-factor));
84
+ --blur-11: calc(60px * var(--scaling) * var(--blur-factor));
85
+ --blur-12: calc(68px * var(--scaling) * var(--blur-factor));
83
86
  --opacity-factor: 1;
84
87
  --opacity-1: calc(0.1 * var(--opacity-factor));
85
88
  --opacity-2: calc(0.2 * var(--opacity-factor));
@@ -101,12 +104,12 @@
101
104
  --color-surface-translucent: color-mix(in srgb, var(--gray-2) var(--surface-opacity-percentage), transparent);
102
105
  --color-dialog-solid: var(--gray-2);
103
106
  --color-dialog-translucent: color-mix(in srgb, var(--gray-2) var(--dialog-opacity-percentage), transparent);
104
- --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a5);
105
- --shadow-2: 0 0 0 0.5px var(--gray-a5), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
106
- --shadow-3: 0 0 0 0.5px var(--gray-a5), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
107
- --shadow-4: 0 0 0 0.5px var(--gray-a5), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
108
- --shadow-5: 0 0 0 0.5px var(--gray-a5), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
109
- --shadow-6: 0 0 0 0.5px var(--gray-a5), 0 12px 60px var(--black-a5), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
107
+ --shadow-1: inset 0 0 0 0.5px var(--gray-a6), inset 0 1px 1px 0 var(--black-a3);
108
+ --shadow-2: 0 0 0 0.5px var(--gray-a6), 0 1px 3px 0 var(--black-a3), 0 1px 2px -1px var(--black-a3);
109
+ --shadow-3: 0 0 0 0.5px var(--gray-a6), 0 4px 6px -1px var(--black-a3), 0 2px 4px -2px var(--black-a3);
110
+ --shadow-4: 0 0 0 0.5px var(--gray-a6), 0 10px 15px -3px var(--black-a3), 0 4px 6px -4px var(--black-a3);
111
+ --shadow-5: 0 0 0 0.5px var(--gray-a6), 0 20px 25px -5px var(--black-a3), 0 8px 10px -6px var(--black-a3);
112
+ --shadow-6: 0 0 0 0.5px var(--gray-a6), 0 25px 50px -12px var(--black-a5);
110
113
  }
111
114
  @supports (color: color(display-p3 1 1 1)) {
112
115
  @media (color-gamut: p3) {
@@ -1121,6 +1124,9 @@
1121
1124
  --space-7: calc(40px * var(--scaling));
1122
1125
  --space-8: calc(48px * var(--scaling));
1123
1126
  --space-9: calc(64px * var(--scaling));
1127
+ --space-10: calc(80px * var(--scaling));
1128
+ --space-11: calc(96px * var(--scaling));
1129
+ --space-12: calc(112px * var(--scaling));
1124
1130
  --duration-1: 50ms;
1125
1131
  --duration-2: 75ms;
1126
1132
  --duration-3: 100ms;
@@ -1167,7 +1173,7 @@
1167
1173
  --spring-smooth-stiffness: 200;
1168
1174
  --spring-smooth-damping: 30;
1169
1175
  --spring-smooth-initial-velocity: 0;
1170
- --transition-button: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), backdrop-filter var(--motion-duration-small) var(--motion-ease-standard), transform var(--motion-duration-micro) var(--motion-spring-snappy), padding var(--motion-duration-micro) var(--motion-ease-standard);
1176
+ --transition-button: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), filter var(--motion-duration-small) var(--motion-ease-standard), backdrop-filter var(--motion-duration-small) var(--motion-ease-standard), transform var(--motion-duration-micro) var(--motion-spring-snappy), padding var(--motion-duration-micro) var(--motion-ease-standard);
1171
1177
  --transition-text-field: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard);
1172
1178
  --transition-select: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard);
1173
1179
  --transition-badge: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), padding var(--motion-duration-micro) var(--motion-ease-standard);
@@ -1313,6 +1319,9 @@
1313
1319
  --radius-7: calc(24px * var(--scaling) * var(--radius-factor));
1314
1320
  --radius-8: calc(28px * var(--scaling) * var(--radius-factor));
1315
1321
  --radius-9: calc(32px * var(--scaling) * var(--radius-factor));
1322
+ --radius-10: calc(40px * var(--scaling) * var(--radius-factor));
1323
+ --radius-11: calc(48px * var(--scaling) * var(--radius-factor));
1324
+ --radius-12: calc(56px * var(--scaling) * var(--radius-factor));
1316
1325
  }
1317
1326
  [data-radius='none'] {
1318
1327
  --radius-factor: 0;
@@ -1336,23 +1345,23 @@
1336
1345
  }
1337
1346
  @supports (color: color-mix(in oklab, white, black)) {
1338
1347
  :where(.radix-themes) {
1339
- --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1px 1px 0 var(--gray-a2), inset 0 1px 1px 0 var(--black-a2);
1340
- --shadow-2: 0 0 0 0.5px var(--gray-a2), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
1341
- --shadow-3: 0 0 0 0.5px var(--gray-a2), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
1342
- --shadow-4: 0 0 0 0.5px var(--gray-a2), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
1343
- --shadow-5: 0 0 0 0.5px var(--gray-a2), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
1344
- --shadow-6: 0 0 0 0.5px var(--gray-a2), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
1348
+ --shadow-1: 0 0 0 0.25px var(--gray-a6), inset 0 1px 1px 0 var(--black-a2);
1349
+ --shadow-2: 0 0 0 0.25px var(--gray-a6), 0 1px 3px 0 var(--black-a2), 0 1px 2px -1px var(--black-a2);
1350
+ --shadow-3: 0 0 0 0.25px var(--gray-a6), 0 4px 6px -1px var(--black-a2), 0 2px 4px -2px var(--black-a2);
1351
+ --shadow-4: 0 0 0 0.5px var(--gray-a6), 0 10px 15px -3px var(--black-a3), 0 4px 6px -4px var(--black-a3);
1352
+ --shadow-5: 0 0 0 0.5px var(--gray-a6), 0 20px 25px -5px var(--black-a3), 0 8px 10px -6px var(--black-a3);
1353
+ --shadow-6: 0 0 0 0.5px var(--gray-a6), 0 25px 50px -12px var(--black-a5);
1345
1354
  }
1346
1355
  }
1347
1356
  @supports (color: color-mix(in oklab, white, black)) {
1348
1357
  :is(.dark, .dark-theme),
1349
1358
  :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
1350
- --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a5);
1351
- --shadow-2: 0 0 0 0.5px var(--gray-a5), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
1352
- --shadow-3: 0 0 0 0.5px var(--gray-a5), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
1353
- --shadow-4: 0 0 0 0.5px var(--gray-a5), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
1354
- --shadow-5: 0 0 0 0.5px var(--gray-a5), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
1355
- --shadow-6: 0 0 0 0.5px var(--gray-a5), 0 12px 60px var(--black-a5), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
1359
+ --shadow-1: inset 0 0 0 0.5px var(--gray-a6), inset 0 1px 1px 0 var(--black-a3);
1360
+ --shadow-2: 0 0 0 0.5px var(--gray-a6), 0 1px 3px 0 var(--black-a3), 0 1px 2px -1px var(--black-a3);
1361
+ --shadow-3: 0 0 0 0.5px var(--gray-a6), 0 4px 6px -1px var(--black-a3), 0 2px 4px -2px var(--black-a3);
1362
+ --shadow-4: 0 0 0 0.5px var(--gray-a6), 0 10px 15px -3px var(--black-a3), 0 4px 6px -4px var(--black-a3);
1363
+ --shadow-5: 0 0 0 0.5px var(--gray-a6), 0 20px 25px -5px var(--black-a3), 0 8px 10px -6px var(--black-a3);
1364
+ --shadow-6: 0 0 0 0.5px var(--gray-a6), 0 25px 50px -12px var(--black-a5);
1356
1365
  }
1357
1366
  }
1358
1367
  @media (prefers-reduced-motion: reduce) {
package/tokens.css CHANGED
@@ -3396,9 +3396,9 @@
3396
3396
  --spacing-multiplier-medium: 0.75;
3397
3397
  --spacing-multiplier-large: 1.25;
3398
3398
  --component-gap-1: var(--space-1);
3399
- --component-gap-2: var(--space-2);
3400
- --component-gap-3: var(--space-3);
3401
- --component-gap-4: var(--space-3);
3399
+ --component-gap-2: var(--space-1);
3400
+ --component-gap-3: var(--space-2);
3401
+ --component-gap-4: var(--space-2);
3402
3402
  --component-gap-ghost-1: var(--space-1);
3403
3403
  --component-gap-ghost-2: calc(var(--space-1) * 1.5);
3404
3404
  --component-gap-ghost-3: var(--space-2);
@@ -3416,12 +3416,12 @@
3416
3416
  --color-dialog-solid: white;
3417
3417
  --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity));
3418
3418
  --color-transparent: rgb(0 0 0 / 0);
3419
- --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1px 1px 0 var(--gray-a2), inset 0 1px 1px 0 var(--black-a2);
3420
- --shadow-2: 0 0 0 0.5px var(--gray-a2), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
3421
- --shadow-3: 0 0 0 0.5px var(--gray-a2), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
3422
- --shadow-4: 0 0 0 0.5px var(--gray-a2), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
3423
- --shadow-5: 0 0 0 0.5px var(--gray-a2), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
3424
- --shadow-6: 0 0 0 0.5px var(--gray-a2), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
3419
+ --shadow-1: 0 0 0 0.25px var(--gray-a6), inset 0 1px 1px 0 var(--black-a2);
3420
+ --shadow-2: 0 0 0 0.25px var(--gray-a6), 0 1px 3px 0 var(--black-a2), 0 1px 2px -1px var(--black-a2);
3421
+ --shadow-3: 0 0 0 0.25px var(--gray-a6), 0 4px 6px -1px var(--black-a2), 0 2px 4px -2px var(--black-a2);
3422
+ --shadow-4: 0 0 0 0.5px var(--gray-a6), 0 10px 15px -3px var(--black-a3), 0 4px 6px -4px var(--black-a3);
3423
+ --shadow-5: 0 0 0 0.5px var(--gray-a6), 0 20px 25px -5px var(--black-a3), 0 8px 10px -6px var(--black-a3);
3424
+ --shadow-6: 0 0 0 0.5px var(--gray-a6), 0 25px 50px -12px var(--black-a5);
3425
3425
  --blur-factor: 1;
3426
3426
  --blur-1: calc(2px * var(--scaling) * var(--blur-factor));
3427
3427
  --blur-2: calc(4px * var(--scaling) * var(--blur-factor));
@@ -3432,6 +3432,9 @@
3432
3432
  --blur-7: calc(28px * var(--scaling) * var(--blur-factor));
3433
3433
  --blur-8: calc(36px * var(--scaling) * var(--blur-factor));
3434
3434
  --blur-9: calc(44px * var(--scaling) * var(--blur-factor));
3435
+ --blur-10: calc(52px * var(--scaling) * var(--blur-factor));
3436
+ --blur-11: calc(60px * var(--scaling) * var(--blur-factor));
3437
+ --blur-12: calc(68px * var(--scaling) * var(--blur-factor));
3435
3438
  --opacity-factor: 1;
3436
3439
  --opacity-1: calc(0.1 * var(--opacity-factor));
3437
3440
  --opacity-2: calc(0.2 * var(--opacity-factor));
@@ -3483,12 +3486,12 @@
3483
3486
  --color-surface-translucent: color-mix(in srgb, var(--gray-2) var(--surface-opacity-percentage), transparent);
3484
3487
  --color-dialog-solid: var(--gray-2);
3485
3488
  --color-dialog-translucent: color-mix(in srgb, var(--gray-2) var(--dialog-opacity-percentage), transparent);
3486
- --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a5);
3487
- --shadow-2: 0 0 0 0.5px var(--gray-a5), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
3488
- --shadow-3: 0 0 0 0.5px var(--gray-a5), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
3489
- --shadow-4: 0 0 0 0.5px var(--gray-a5), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
3490
- --shadow-5: 0 0 0 0.5px var(--gray-a5), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
3491
- --shadow-6: 0 0 0 0.5px var(--gray-a5), 0 12px 60px var(--black-a5), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
3489
+ --shadow-1: inset 0 0 0 0.5px var(--gray-a6), inset 0 1px 1px 0 var(--black-a3);
3490
+ --shadow-2: 0 0 0 0.5px var(--gray-a6), 0 1px 3px 0 var(--black-a3), 0 1px 2px -1px var(--black-a3);
3491
+ --shadow-3: 0 0 0 0.5px var(--gray-a6), 0 4px 6px -1px var(--black-a3), 0 2px 4px -2px var(--black-a3);
3492
+ --shadow-4: 0 0 0 0.5px var(--gray-a6), 0 10px 15px -3px var(--black-a3), 0 4px 6px -4px var(--black-a3);
3493
+ --shadow-5: 0 0 0 0.5px var(--gray-a6), 0 20px 25px -5px var(--black-a3), 0 8px 10px -6px var(--black-a3);
3494
+ --shadow-6: 0 0 0 0.5px var(--gray-a6), 0 25px 50px -12px var(--black-a5);
3492
3495
  }
3493
3496
  @supports (color: color(display-p3 1 1 1)) {
3494
3497
  @media (color-gamut: p3) {
@@ -4503,6 +4506,9 @@
4503
4506
  --space-7: calc(40px * var(--scaling));
4504
4507
  --space-8: calc(48px * var(--scaling));
4505
4508
  --space-9: calc(64px * var(--scaling));
4509
+ --space-10: calc(80px * var(--scaling));
4510
+ --space-11: calc(96px * var(--scaling));
4511
+ --space-12: calc(112px * var(--scaling));
4506
4512
  --duration-1: 50ms;
4507
4513
  --duration-2: 75ms;
4508
4514
  --duration-3: 100ms;
@@ -4549,7 +4555,7 @@
4549
4555
  --spring-smooth-stiffness: 200;
4550
4556
  --spring-smooth-damping: 30;
4551
4557
  --spring-smooth-initial-velocity: 0;
4552
- --transition-button: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), backdrop-filter var(--motion-duration-small) var(--motion-ease-standard), transform var(--motion-duration-micro) var(--motion-spring-snappy), padding var(--motion-duration-micro) var(--motion-ease-standard);
4558
+ --transition-button: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), filter var(--motion-duration-small) var(--motion-ease-standard), backdrop-filter var(--motion-duration-small) var(--motion-ease-standard), transform var(--motion-duration-micro) var(--motion-spring-snappy), padding var(--motion-duration-micro) var(--motion-ease-standard);
4553
4559
  --transition-text-field: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard);
4554
4560
  --transition-select: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard);
4555
4561
  --transition-badge: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), padding var(--motion-duration-micro) var(--motion-ease-standard);
@@ -4695,6 +4701,9 @@
4695
4701
  --radius-7: calc(24px * var(--scaling) * var(--radius-factor));
4696
4702
  --radius-8: calc(28px * var(--scaling) * var(--radius-factor));
4697
4703
  --radius-9: calc(32px * var(--scaling) * var(--radius-factor));
4704
+ --radius-10: calc(40px * var(--scaling) * var(--radius-factor));
4705
+ --radius-11: calc(48px * var(--scaling) * var(--radius-factor));
4706
+ --radius-12: calc(56px * var(--scaling) * var(--radius-factor));
4698
4707
  }
4699
4708
  [data-radius='none'] {
4700
4709
  --radius-factor: 0;
@@ -4718,23 +4727,23 @@
4718
4727
  }
4719
4728
  @supports (color: color-mix(in oklab, white, black)) {
4720
4729
  :where(.radix-themes) {
4721
- --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1px 1px 0 var(--gray-a2), inset 0 1px 1px 0 var(--black-a2);
4722
- --shadow-2: 0 0 0 0.5px var(--gray-a2), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
4723
- --shadow-3: 0 0 0 0.5px var(--gray-a2), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
4724
- --shadow-4: 0 0 0 0.5px var(--gray-a2), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
4725
- --shadow-5: 0 0 0 0.5px var(--gray-a2), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
4726
- --shadow-6: 0 0 0 0.5px var(--gray-a2), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
4730
+ --shadow-1: 0 0 0 0.25px var(--gray-a6), inset 0 1px 1px 0 var(--black-a2);
4731
+ --shadow-2: 0 0 0 0.25px var(--gray-a6), 0 1px 3px 0 var(--black-a2), 0 1px 2px -1px var(--black-a2);
4732
+ --shadow-3: 0 0 0 0.25px var(--gray-a6), 0 4px 6px -1px var(--black-a2), 0 2px 4px -2px var(--black-a2);
4733
+ --shadow-4: 0 0 0 0.5px var(--gray-a6), 0 10px 15px -3px var(--black-a3), 0 4px 6px -4px var(--black-a3);
4734
+ --shadow-5: 0 0 0 0.5px var(--gray-a6), 0 20px 25px -5px var(--black-a3), 0 8px 10px -6px var(--black-a3);
4735
+ --shadow-6: 0 0 0 0.5px var(--gray-a6), 0 25px 50px -12px var(--black-a5);
4727
4736
  }
4728
4737
  }
4729
4738
  @supports (color: color-mix(in oklab, white, black)) {
4730
4739
  :is(.dark, .dark-theme),
4731
4740
  :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
4732
- --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a5);
4733
- --shadow-2: 0 0 0 0.5px var(--gray-a5), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
4734
- --shadow-3: 0 0 0 0.5px var(--gray-a5), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
4735
- --shadow-4: 0 0 0 0.5px var(--gray-a5), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
4736
- --shadow-5: 0 0 0 0.5px var(--gray-a5), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
4737
- --shadow-6: 0 0 0 0.5px var(--gray-a5), 0 12px 60px var(--black-a5), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
4741
+ --shadow-1: inset 0 0 0 0.5px var(--gray-a6), inset 0 1px 1px 0 var(--black-a3);
4742
+ --shadow-2: 0 0 0 0.5px var(--gray-a6), 0 1px 3px 0 var(--black-a3), 0 1px 2px -1px var(--black-a3);
4743
+ --shadow-3: 0 0 0 0.5px var(--gray-a6), 0 4px 6px -1px var(--black-a3), 0 2px 4px -2px var(--black-a3);
4744
+ --shadow-4: 0 0 0 0.5px var(--gray-a6), 0 10px 15px -3px var(--black-a3), 0 4px 6px -4px var(--black-a3);
4745
+ --shadow-5: 0 0 0 0.5px var(--gray-a6), 0 20px 25px -5px var(--black-a3), 0 8px 10px -6px var(--black-a3);
4746
+ --shadow-6: 0 0 0 0.5px var(--gray-a6), 0 25px 50px -12px var(--black-a5);
4738
4747
  }
4739
4748
  }
4740
4749
  @media (prefers-reduced-motion: reduce) {