@greese/ui 1.1.0 → 1.2.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 (194) hide show
  1. package/README.md +19 -14
  2. package/dist/_maps.scss +1 -1
  3. package/dist/_tokens-base.scss +30 -6
  4. package/dist/_tokens.scss +31 -2
  5. package/dist/_utilities-table.scss +1615 -0
  6. package/dist/clipboard.d.ts +18 -0
  7. package/dist/clipboard.js +62 -0
  8. package/dist/css/Button.css +2 -2
  9. package/dist/css/Carousel.css +145 -47
  10. package/dist/css/Checkbox.css +2 -2
  11. package/dist/css/Chip.css +38 -8
  12. package/dist/css/ChoiceGroup.css +42 -1
  13. package/dist/css/Collapsible.css +1 -0
  14. package/dist/css/ColorPicker.css +84 -0
  15. package/dist/css/Combobox.css +2 -2
  16. package/dist/css/Dialog.css +24 -22
  17. package/dist/css/EditableField.css +219 -0
  18. package/dist/css/Input.css +11 -2
  19. package/dist/css/Menu.css +9 -0
  20. package/dist/css/NumberField.css +53 -8
  21. package/dist/css/NumberStepper.css +9 -0
  22. package/dist/css/OtpField.css +1 -1
  23. package/dist/css/Radio.css +2 -2
  24. package/dist/css/ScrollCarousel.css +225 -0
  25. package/dist/css/SegmentedControl.css +2 -2
  26. package/dist/css/Select.css +3 -2
  27. package/dist/css/Slider.css +45 -5
  28. package/dist/css/Switch.css +6 -6
  29. package/dist/css/Text.css +14 -14
  30. package/dist/css/Textarea.css +1 -1
  31. package/dist/css/core.css +36 -6
  32. package/dist/css/resets.css +162 -0
  33. package/dist/css.d.ts +2 -0
  34. package/dist/css.js +2 -0
  35. package/dist/greese.css +978 -138
  36. package/dist/index.d.ts +2 -1
  37. package/dist/index.js +2 -1
  38. package/dist/scss/components/_Accordion.scss +2 -0
  39. package/dist/scss/components/_ActionSelect.scss +2 -0
  40. package/dist/scss/components/_Alert.scss +2 -0
  41. package/dist/scss/components/_AppBar.scss +2 -0
  42. package/dist/scss/components/_AspectRatio.scss +2 -0
  43. package/dist/scss/components/_AutoLayout.scss +2 -0
  44. package/dist/scss/components/_Avatar.scss +2 -0
  45. package/dist/scss/components/_Badge.scss +2 -0
  46. package/dist/scss/components/_Box.scss +2 -0
  47. package/dist/scss/components/_Breadcrumbs.scss +2 -0
  48. package/dist/scss/components/_Button.scss +2 -0
  49. package/dist/scss/components/_ButtonGroup.scss +2 -0
  50. package/dist/scss/components/_Card.scss +2 -0
  51. package/dist/scss/components/_Carousel.scss +2 -0
  52. package/dist/scss/components/_Center.scss +2 -0
  53. package/dist/scss/components/_ChatBubble.scss +2 -0
  54. package/dist/scss/components/_Checkbox.scss +2 -0
  55. package/dist/scss/components/_Chip.scss +2 -0
  56. package/dist/scss/components/_ChoiceGroup.scss +2 -0
  57. package/dist/scss/components/_Code.scss +2 -0
  58. package/dist/scss/components/_Collapsible.scss +2 -0
  59. package/dist/scss/components/_ColorPicker.scss +2 -0
  60. package/dist/scss/components/_Combobox.scss +2 -0
  61. package/dist/scss/components/_Container.scss +2 -0
  62. package/dist/scss/components/_Countdown.scss +2 -0
  63. package/dist/scss/components/_DateField.scss +2 -0
  64. package/dist/scss/components/_Dialog.scss +2 -0
  65. package/dist/scss/components/_Diff.scss +2 -0
  66. package/dist/scss/components/_Divider.scss +2 -0
  67. package/dist/scss/components/_Dock.scss +2 -0
  68. package/dist/scss/components/_EditableField.scss +2 -0
  69. package/dist/scss/components/_Field.scss +2 -0
  70. package/dist/scss/components/_Fieldset.scss +2 -0
  71. package/dist/scss/components/_FileInput.scss +2 -0
  72. package/dist/scss/components/_Footer.scss +2 -0
  73. package/dist/scss/components/_Grid.scss +2 -0
  74. package/dist/scss/components/_Header.scss +2 -0
  75. package/dist/scss/components/_Heading.scss +2 -0
  76. package/dist/scss/components/_Icon.scss +2 -0
  77. package/dist/scss/components/_IconButton.scss +2 -0
  78. package/dist/scss/components/_Image.scss +2 -0
  79. package/dist/scss/components/_Indicator.scss +2 -0
  80. package/dist/scss/components/_Input.scss +2 -0
  81. package/dist/scss/components/_Key.scss +2 -0
  82. package/dist/scss/components/_Link.scss +2 -0
  83. package/dist/scss/components/_List.scss +2 -0
  84. package/dist/scss/components/_Media.scss +2 -0
  85. package/dist/scss/components/_Menu.scss +2 -0
  86. package/dist/scss/components/_Motion.scss +2 -0
  87. package/dist/scss/components/_NumberField.scss +2 -0
  88. package/dist/scss/components/_NumberStepper.scss +2 -0
  89. package/dist/scss/components/_OtpField.scss +2 -0
  90. package/dist/scss/components/_PageTransition.scss +2 -0
  91. package/dist/scss/components/_Pagination.scss +2 -0
  92. package/dist/scss/components/_Popover.scss +2 -0
  93. package/dist/scss/components/_Progress.scss +2 -0
  94. package/dist/scss/components/_RadialProgress.scss +2 -0
  95. package/dist/scss/components/_Radio.scss +2 -0
  96. package/dist/scss/components/_Rating.scss +2 -0
  97. package/dist/scss/components/_ScrollCarousel.scss +2 -0
  98. package/dist/scss/components/_ScrollSpy.scss +2 -0
  99. package/dist/scss/components/_SegmentedControl.scss +2 -0
  100. package/dist/scss/components/_Select.scss +2 -0
  101. package/dist/scss/components/_Sidebar.scss +2 -0
  102. package/dist/scss/components/_Skeleton.scss +2 -0
  103. package/dist/scss/components/_Slider.scss +2 -0
  104. package/dist/scss/components/_Spacer.scss +2 -0
  105. package/dist/scss/components/_SpeedDial.scss +2 -0
  106. package/dist/scss/components/_Spinner.scss +2 -0
  107. package/dist/scss/components/_Stack.scss +2 -0
  108. package/dist/scss/components/_Stat.scss +2 -0
  109. package/dist/scss/components/_Status.scss +2 -0
  110. package/dist/scss/components/_Steps.scss +2 -0
  111. package/dist/scss/components/_Swap.scss +2 -0
  112. package/dist/scss/components/_Switch.scss +2 -0
  113. package/dist/scss/components/_Table.scss +2 -0
  114. package/dist/scss/components/_Tabs.scss +2 -0
  115. package/dist/scss/components/_Text.scss +2 -0
  116. package/dist/scss/components/_TextRotate.scss +2 -0
  117. package/dist/scss/components/_Textarea.scss +2 -0
  118. package/dist/scss/components/_ThemeProvider.scss +2 -0
  119. package/dist/scss/components/_Tile.scss +2 -0
  120. package/dist/scss/components/_Toast.scss +2 -0
  121. package/dist/scss/components/_ToggleButton.scss +2 -0
  122. package/dist/scss/components/_Tooltip.scss +2 -0
  123. package/dist/scss/components/_Type.scss +2 -0
  124. package/dist/scss/components/_Visibility.scss +2 -0
  125. package/dist/scss/components/_VisuallyHidden.scss +2 -0
  126. package/dist/shapes.d.ts +12 -1
  127. package/dist/shapes.js +11 -10
  128. package/dist/style-manifest.json +18830 -132
  129. package/dist/theme.js +6 -1
  130. package/dist/themeFiles/index.d.ts +9 -0
  131. package/dist/themeFiles/index.js +9 -0
  132. package/dist/themeFiles/scssModule.d.ts +100 -0
  133. package/dist/themeFiles/scssModule.js +384 -0
  134. package/dist/themeFiles/spec.d.ts +198 -0
  135. package/dist/themeFiles/spec.js +877 -0
  136. package/dist/tokens.css +30 -1
  137. package/dist/typography.js +1 -1
  138. package/dist/utilities.css +435 -0
  139. package/dist/utilities.d.ts +8 -0
  140. package/dist/utilities.js +75 -0
  141. package/package.json +20 -1
  142. package/src/components/AutoLayout/AutoLayout.scss +2 -26
  143. package/src/components/Carousel/Carousel.scss +122 -126
  144. package/src/components/Checkbox/Checkbox.scss +2 -2
  145. package/src/components/Chip/Chip.scss +63 -8
  146. package/src/components/ChoiceGroup/ChoiceGroup.scss +19 -1
  147. package/src/components/Collapsible/Collapsible.scss +3 -0
  148. package/src/components/ColorPicker/ColorPicker.scss +95 -0
  149. package/src/components/Combobox/Combobox.scss +4 -2
  150. package/src/components/Dialog/Dialog.scss +24 -7
  151. package/src/components/EditableField/EditableField.scss +275 -0
  152. package/src/components/Grid/Grid.scss +2 -70
  153. package/src/components/Input/Input.scss +29 -0
  154. package/src/components/Menu/Menu.scss +18 -0
  155. package/src/components/NumberField/NumberField.scss +56 -9
  156. package/src/components/NumberStepper/NumberStepper.scss +13 -0
  157. package/src/components/Radio/Radio.scss +2 -2
  158. package/src/components/ScrollCarousel/ScrollCarousel.scss +142 -0
  159. package/src/components/Select/Select.scss +4 -0
  160. package/src/components/Slider/Slider.scss +51 -6
  161. package/src/components/Stack/Stack.scss +2 -48
  162. package/src/components/Switch/Switch.scss +9 -6
  163. package/src/components/Text/Text.scss +5 -2
  164. package/src/styles/_breakpoint-vars.scss +17 -11
  165. package/src/styles/_controls.scss +2 -2
  166. package/src/styles/_core.scss +1 -0
  167. package/src/styles/_kit.scss +483 -56
  168. package/src/styles/_layout-props.scss +197 -0
  169. package/src/styles/_manifest.scss +53 -23
  170. package/src/styles/_mixins.scss +53 -15
  171. package/src/styles/_slides.scss +112 -0
  172. package/src/styles/_utilities.scss +104 -0
  173. package/src/styles/breakpoints.test.ts +21 -1
  174. package/src/styles/entryPoints.test.ts +25 -2
  175. package/src/styles/index.scss +3 -1
  176. package/src/styles/kit.test.ts +171 -1
  177. package/src/styles/public/_breakpoints.scss +43 -0
  178. package/src/styles/public/_slides.scss +3 -0
  179. package/src/styles/public/_utilities.scss +3 -0
  180. package/src/styles/resets.scss +7 -0
  181. package/src/styles/utilities.test.ts +39 -0
  182. package/themes/bevel.css +187 -187
  183. package/themes/bevel.scss +960 -958
  184. package/themes/extrude.css +42 -42
  185. package/themes/folio.css +200 -200
  186. package/themes/folio.scss +880 -878
  187. package/themes/outline.css +18 -18
  188. package/themes/pebble.css +8 -8
  189. package/themes/ridge.css +188 -188
  190. package/themes/ridge.scss +820 -818
  191. package/themes/soft.css +11 -11
  192. package/themes/ticket.css +180 -180
  193. package/themes/ticket.scss +881 -879
  194. package/themes/tilt.css +25 -25
package/themes/bevel.scss CHANGED
@@ -144,1023 +144,1025 @@
144
144
  }
145
145
  @layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;
146
146
  @layer greese.overrides {
147
- .greese-shape-bevel-control,
148
- .greese-shape-bevel-field,
149
- .greese-shape-bevel-container,
150
- .greese-shape-bevel-small {
151
- --greese-shape-ring: var(--greese-color-border);
152
- position: relative;
153
- isolation: isolate;
154
- border-color: transparent;
155
- clip-path: var(--greese-shape-clip) padding-box;
156
- }
157
- .greese-shape-bevel-control::after,
158
- .greese-shape-bevel-field::after,
159
- .greese-shape-bevel-container::after,
160
- .greese-shape-bevel-small::after {
161
- position: absolute;
162
- inset: 0;
163
- inline-size: auto;
164
- block-size: auto;
165
- translate: none;
166
- z-index: 1;
167
- pointer-events: none;
168
- content: '';
169
- background: var(--greese-shape-ring);
170
- clip-path: var(--greese-shape-ring-clip);
171
- }
172
- @media (prefers-reduced-motion: no-preference) {
173
- .greese-shape-bevel-control,
174
- .greese-shape-bevel-field,
175
- .greese-shape-bevel-container,
176
- .greese-shape-bevel-small {
177
- transition: --greese-shape-a var(--greese-duration-normal) var(--greese-easing-standard),
178
- --greese-shape-b var(--greese-duration-normal) var(--greese-easing-standard),
179
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
180
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
181
- --greese-shape-bleed 0s linear;
147
+ @include greese.scope(null) {
148
+ #{greese.themed(".greese-shape-bevel-control")},
149
+ #{greese.themed(".greese-shape-bevel-field")},
150
+ #{greese.themed(".greese-shape-bevel-container")},
151
+ #{greese.themed(".greese-shape-bevel-small")} {
152
+ --greese-shape-ring: var(--greese-color-border);
153
+ position: relative;
154
+ isolation: isolate;
155
+ border-color: transparent;
156
+ clip-path: var(--greese-shape-clip) padding-box;
182
157
  }
183
- }
184
- @media (forced-colors: active) {
185
- .greese-shape-bevel-control,
186
- .greese-shape-bevel-field,
187
- .greese-shape-bevel-container,
188
- .greese-shape-bevel-small {
189
- clip-path: none;
190
- border-color: CanvasText;
191
- }
192
- .greese-shape-bevel-control::after,
193
- .greese-shape-bevel-field::after,
194
- .greese-shape-bevel-container::after,
195
- .greese-shape-bevel-small::after {
196
- display: none;
158
+ #{greese.themed(".greese-shape-bevel-control")}::after,
159
+ #{greese.themed(".greese-shape-bevel-field")}::after,
160
+ #{greese.themed(".greese-shape-bevel-container")}::after,
161
+ #{greese.themed(".greese-shape-bevel-small")}::after {
162
+ position: absolute;
163
+ inset: 0;
164
+ inline-size: auto;
165
+ block-size: auto;
166
+ translate: none;
167
+ z-index: 1;
168
+ pointer-events: none;
169
+ content: '';
170
+ background: var(--greese-shape-ring);
171
+ clip-path: var(--greese-shape-ring-clip);
197
172
  }
198
- }
199
- .greese-shape-bevel-indicator {
200
- --greese-shape-ring: var(--greese-color-border);
201
- position: relative;
202
- isolation: isolate;
203
- border-color: transparent;
204
- clip-path: var(--greese-shape-clip) padding-box;
205
- }
206
- .greese-shape-bevel-indicator::after {
207
- position: absolute;
208
- inset: 0;
209
- inline-size: auto;
210
- block-size: auto;
211
- translate: none;
212
- z-index: 1;
213
- pointer-events: none;
214
- content: '';
215
- background: var(--greese-shape-ring);
216
- clip-path: var(--greese-shape-ring-clip);
217
- }
218
- @media (prefers-reduced-motion: no-preference) {
219
- .greese-shape-bevel-indicator {
220
- transition: --greese-shape-h var(--greese-duration-normal) var(--greese-easing-standard),
221
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
222
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
223
- --greese-shape-bleed 0s linear;
173
+ @media (prefers-reduced-motion: no-preference) {
174
+ #{greese.themed(".greese-shape-bevel-control")},
175
+ #{greese.themed(".greese-shape-bevel-field")},
176
+ #{greese.themed(".greese-shape-bevel-container")},
177
+ #{greese.themed(".greese-shape-bevel-small")} {
178
+ transition: --greese-shape-a var(--greese-duration-normal) var(--greese-easing-standard),
179
+ --greese-shape-b var(--greese-duration-normal) var(--greese-easing-standard),
180
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
181
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
182
+ --greese-shape-bleed 0s linear;
183
+ }
224
184
  }
225
- }
226
- @media (forced-colors: active) {
227
- .greese-shape-bevel-indicator {
228
- clip-path: none;
229
- border-color: CanvasText;
185
+ @media (forced-colors: active) {
186
+ #{greese.themed(".greese-shape-bevel-control")},
187
+ #{greese.themed(".greese-shape-bevel-field")},
188
+ #{greese.themed(".greese-shape-bevel-container")},
189
+ #{greese.themed(".greese-shape-bevel-small")} {
190
+ clip-path: none;
191
+ border-color: CanvasText;
192
+ }
193
+ #{greese.themed(".greese-shape-bevel-control")}::after,
194
+ #{greese.themed(".greese-shape-bevel-field")}::after,
195
+ #{greese.themed(".greese-shape-bevel-container")}::after,
196
+ #{greese.themed(".greese-shape-bevel-small")}::after {
197
+ display: none;
198
+ }
230
199
  }
231
- .greese-shape-bevel-indicator::after {
232
- display: none;
200
+ #{greese.themed(".greese-shape-bevel-indicator")} {
201
+ --greese-shape-ring: var(--greese-color-border);
202
+ position: relative;
203
+ isolation: isolate;
204
+ border-color: transparent;
205
+ clip-path: var(--greese-shape-clip) padding-box;
233
206
  }
234
- }
235
- .greese-shape-bevel-mark,
236
- .greese-shape-bevel-avatar {
237
- --greese-shape-ring: var(--greese-color-border);
238
- position: relative;
239
- isolation: isolate;
240
- border-color: transparent;
241
- clip-path: var(--greese-shape-clip) padding-box;
242
- }
243
- .greese-shape-bevel-mark::after,
244
- .greese-shape-bevel-avatar::after {
245
- position: absolute;
246
- inset: 0;
247
- inline-size: auto;
248
- block-size: auto;
249
- translate: none;
250
- z-index: 1;
251
- pointer-events: none;
252
- content: '';
253
- background: var(--greese-shape-ring);
254
- clip-path: var(--greese-shape-ring-clip);
255
- }
256
- @media (prefers-reduced-motion: no-preference) {
257
- .greese-shape-bevel-mark,
258
- .greese-shape-bevel-avatar {
259
- transition: --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
260
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
261
- --greese-shape-bleed 0s linear;
207
+ #{greese.themed(".greese-shape-bevel-indicator")}::after {
208
+ position: absolute;
209
+ inset: 0;
210
+ inline-size: auto;
211
+ block-size: auto;
212
+ translate: none;
213
+ z-index: 1;
214
+ pointer-events: none;
215
+ content: '';
216
+ background: var(--greese-shape-ring);
217
+ clip-path: var(--greese-shape-ring-clip);
262
218
  }
263
- }
264
- @media (forced-colors: active) {
265
- .greese-shape-bevel-mark,
266
- .greese-shape-bevel-avatar {
267
- clip-path: none;
268
- border-color: CanvasText;
219
+ @media (prefers-reduced-motion: no-preference) {
220
+ #{greese.themed(".greese-shape-bevel-indicator")} {
221
+ transition: --greese-shape-h var(--greese-duration-normal) var(--greese-easing-standard),
222
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
223
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
224
+ --greese-shape-bleed 0s linear;
225
+ }
269
226
  }
270
- .greese-shape-bevel-mark::after,
271
- .greese-shape-bevel-avatar::after {
272
- display: none;
227
+ @media (forced-colors: active) {
228
+ #{greese.themed(".greese-shape-bevel-indicator")} {
229
+ clip-path: none;
230
+ border-color: CanvasText;
231
+ }
232
+ #{greese.themed(".greese-shape-bevel-indicator")}::after {
233
+ display: none;
234
+ }
273
235
  }
274
- }
275
- .greese-shape-bevel-tab,
276
- .greese-shape-bevel-bubble {
277
- --greese-shape-ring: var(--greese-color-border);
278
- position: relative;
279
- isolation: isolate;
280
- border-color: transparent;
281
- clip-path: var(--greese-shape-clip) padding-box;
282
- }
283
- .greese-shape-bevel-tab::after,
284
- .greese-shape-bevel-bubble::after {
285
- position: absolute;
286
- inset: 0;
287
- inline-size: auto;
288
- block-size: auto;
289
- translate: none;
290
- z-index: 1;
291
- pointer-events: none;
292
- content: '';
293
- background: var(--greese-shape-ring);
294
- clip-path: var(--greese-shape-ring-clip);
295
- }
296
- @media (prefers-reduced-motion: no-preference) {
297
- .greese-shape-bevel-tab,
298
- .greese-shape-bevel-bubble {
299
- transition: --greese-shape-c var(--greese-duration-normal) var(--greese-easing-standard),
300
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
301
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
302
- --greese-shape-bleed 0s linear;
236
+ #{greese.themed(".greese-shape-bevel-mark")},
237
+ #{greese.themed(".greese-shape-bevel-avatar")} {
238
+ --greese-shape-ring: var(--greese-color-border);
239
+ position: relative;
240
+ isolation: isolate;
241
+ border-color: transparent;
242
+ clip-path: var(--greese-shape-clip) padding-box;
303
243
  }
304
- }
305
- @media (forced-colors: active) {
306
- .greese-shape-bevel-tab,
307
- .greese-shape-bevel-bubble {
308
- clip-path: none;
309
- border-color: CanvasText;
244
+ #{greese.themed(".greese-shape-bevel-mark")}::after,
245
+ #{greese.themed(".greese-shape-bevel-avatar")}::after {
246
+ position: absolute;
247
+ inset: 0;
248
+ inline-size: auto;
249
+ block-size: auto;
250
+ translate: none;
251
+ z-index: 1;
252
+ pointer-events: none;
253
+ content: '';
254
+ background: var(--greese-shape-ring);
255
+ clip-path: var(--greese-shape-ring-clip);
310
256
  }
311
- .greese-shape-bevel-tab::after,
312
- .greese-shape-bevel-bubble::after {
313
- display: none;
257
+ @media (prefers-reduced-motion: no-preference) {
258
+ #{greese.themed(".greese-shape-bevel-mark")},
259
+ #{greese.themed(".greese-shape-bevel-avatar")} {
260
+ transition: --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
261
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
262
+ --greese-shape-bleed 0s linear;
263
+ }
314
264
  }
315
- }
316
- .greese-AccordionItem > .greese-Collapsible-content,
317
- .greese-Tile {
318
- --greese-shape-ring: var(--greese-color-border);
319
- position: relative;
320
- isolation: isolate;
321
- border-color: transparent;
322
- clip-path: var(--greese-shape-clip) padding-box;
323
- }
324
- .greese-AccordionItem > .greese-Collapsible-content::after,
325
- .greese-Tile::after {
326
- position: absolute;
327
- inset: 0;
328
- inline-size: auto;
329
- block-size: auto;
330
- translate: none;
331
- z-index: 1;
332
- pointer-events: none;
333
- content: '';
334
- background: var(--greese-shape-ring);
335
- clip-path: var(--greese-shape-ring-clip);
336
- }
337
- @media (prefers-reduced-motion: no-preference) {
338
- .greese-AccordionItem > .greese-Collapsible-content,
339
- .greese-Tile {
340
- transition: --greese-shape-a var(--greese-duration-normal) var(--greese-easing-standard),
341
- --greese-shape-b var(--greese-duration-normal) var(--greese-easing-standard),
342
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
343
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
344
- --greese-shape-bleed 0s linear;
265
+ @media (forced-colors: active) {
266
+ #{greese.themed(".greese-shape-bevel-mark")},
267
+ #{greese.themed(".greese-shape-bevel-avatar")} {
268
+ clip-path: none;
269
+ border-color: CanvasText;
270
+ }
271
+ #{greese.themed(".greese-shape-bevel-mark")}::after,
272
+ #{greese.themed(".greese-shape-bevel-avatar")}::after {
273
+ display: none;
274
+ }
345
275
  }
346
- }
347
- @media (forced-colors: active) {
348
- .greese-AccordionItem > .greese-Collapsible-content,
349
- .greese-Tile {
350
- clip-path: none;
351
- border-color: CanvasText;
276
+ #{greese.themed(".greese-shape-bevel-tab")},
277
+ #{greese.themed(".greese-shape-bevel-bubble")} {
278
+ --greese-shape-ring: var(--greese-color-border);
279
+ position: relative;
280
+ isolation: isolate;
281
+ border-color: transparent;
282
+ clip-path: var(--greese-shape-clip) padding-box;
352
283
  }
353
- .greese-AccordionItem > .greese-Collapsible-content::after,
354
- .greese-Tile::after {
355
- display: none;
284
+ #{greese.themed(".greese-shape-bevel-tab")}::after,
285
+ #{greese.themed(".greese-shape-bevel-bubble")}::after {
286
+ position: absolute;
287
+ inset: 0;
288
+ inline-size: auto;
289
+ block-size: auto;
290
+ translate: none;
291
+ z-index: 1;
292
+ pointer-events: none;
293
+ content: '';
294
+ background: var(--greese-shape-ring);
295
+ clip-path: var(--greese-shape-ring-clip);
356
296
  }
357
- }
358
- .greese-Alert {
359
- --greese-shape-ring: color-mix(in oklab, var(--greese-alert-tone) 30%, transparent);
360
- position: relative;
361
- isolation: isolate;
362
- border-color: transparent;
363
- clip-path: var(--greese-shape-clip) padding-box;
364
- }
365
- .greese-Alert::after {
366
- position: absolute;
367
- inset: 0;
368
- inline-size: auto;
369
- block-size: auto;
370
- translate: none;
371
- z-index: 1;
372
- pointer-events: none;
373
- content: '';
374
- background: var(--greese-shape-ring);
375
- clip-path: var(--greese-shape-ring-clip);
376
- }
377
- @media (prefers-reduced-motion: no-preference) {
378
- .greese-Alert {
379
- transition: --greese-shape-a var(--greese-duration-normal) var(--greese-easing-standard),
380
- --greese-shape-b var(--greese-duration-normal) var(--greese-easing-standard),
381
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
382
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
383
- --greese-shape-bleed 0s linear;
297
+ @media (prefers-reduced-motion: no-preference) {
298
+ #{greese.themed(".greese-shape-bevel-tab")},
299
+ #{greese.themed(".greese-shape-bevel-bubble")} {
300
+ transition: --greese-shape-c var(--greese-duration-normal) var(--greese-easing-standard),
301
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
302
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
303
+ --greese-shape-bleed 0s linear;
304
+ }
384
305
  }
385
- }
386
- @media (forced-colors: active) {
387
- .greese-Alert {
388
- clip-path: none;
389
- border-color: CanvasText;
306
+ @media (forced-colors: active) {
307
+ #{greese.themed(".greese-shape-bevel-tab")},
308
+ #{greese.themed(".greese-shape-bevel-bubble")} {
309
+ clip-path: none;
310
+ border-color: CanvasText;
311
+ }
312
+ #{greese.themed(".greese-shape-bevel-tab")}::after,
313
+ #{greese.themed(".greese-shape-bevel-bubble")}::after {
314
+ display: none;
315
+ }
390
316
  }
391
- .greese-Alert::after {
392
- display: none;
317
+ #{greese.themed(".greese-AccordionItem > .greese-Collapsible-content", AccordionItem)},
318
+ #{greese.themed(".greese-Tile", Tile)} {
319
+ --greese-shape-ring: var(--greese-color-border);
320
+ position: relative;
321
+ isolation: isolate;
322
+ border-color: transparent;
323
+ clip-path: var(--greese-shape-clip) padding-box;
393
324
  }
394
- }
395
- .greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar),
396
- .greese-ChatBubble-bubble,
397
- .greese-Status:not(.greese-Status--pulse) {
398
- clip-path: var(--greese-shape-clip) border-box;
399
- }
400
- @media (forced-colors: active) {
401
- .greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar),
402
- .greese-ChatBubble-bubble,
403
- .greese-Status:not(.greese-Status--pulse) {
404
- clip-path: none;
325
+ #{greese.themed(".greese-AccordionItem > .greese-Collapsible-content", AccordionItem)}::after,
326
+ #{greese.themed(".greese-Tile", Tile)}::after {
327
+ position: absolute;
328
+ inset: 0;
329
+ inline-size: auto;
330
+ block-size: auto;
331
+ translate: none;
332
+ z-index: 1;
333
+ pointer-events: none;
334
+ content: '';
335
+ background: var(--greese-shape-ring);
336
+ clip-path: var(--greese-shape-ring-clip);
405
337
  }
406
- }
407
- .greese-Badge {
408
- --greese-shape-ring: color-mix(in oklab, var(--greese-badge-tone) 35%, transparent);
409
- position: relative;
410
- isolation: isolate;
411
- border-color: transparent;
412
- clip-path: var(--greese-shape-clip) padding-box;
413
- }
414
- .greese-Badge::after {
415
- position: absolute;
416
- inset: 0;
417
- inline-size: auto;
418
- block-size: auto;
419
- translate: none;
420
- z-index: 1;
421
- pointer-events: none;
422
- content: '';
423
- background: var(--greese-shape-ring);
424
- clip-path: var(--greese-shape-ring-clip);
425
- }
426
- @media (prefers-reduced-motion: no-preference) {
427
- .greese-Badge {
428
- transition: --greese-shape-h var(--greese-duration-normal) var(--greese-easing-standard),
429
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
430
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
431
- --greese-shape-bleed 0s linear;
338
+ @media (prefers-reduced-motion: no-preference) {
339
+ #{greese.themed(".greese-AccordionItem > .greese-Collapsible-content", AccordionItem)},
340
+ #{greese.themed(".greese-Tile", Tile)} {
341
+ transition: --greese-shape-a var(--greese-duration-normal) var(--greese-easing-standard),
342
+ --greese-shape-b var(--greese-duration-normal) var(--greese-easing-standard),
343
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
344
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
345
+ --greese-shape-bleed 0s linear;
346
+ }
432
347
  }
433
- }
434
- @media (forced-colors: active) {
435
- .greese-Badge {
436
- clip-path: none;
437
- border-color: CanvasText;
348
+ @media (forced-colors: active) {
349
+ #{greese.themed(".greese-AccordionItem > .greese-Collapsible-content", AccordionItem)},
350
+ #{greese.themed(".greese-Tile", Tile)} {
351
+ clip-path: none;
352
+ border-color: CanvasText;
353
+ }
354
+ #{greese.themed(".greese-AccordionItem > .greese-Collapsible-content", AccordionItem)}::after,
355
+ #{greese.themed(".greese-Tile", Tile)}::after {
356
+ display: none;
357
+ }
438
358
  }
439
- .greese-Badge::after {
440
- display: none;
359
+ #{greese.themed(".greese-Alert", Alert)} {
360
+ --greese-shape-ring: color-mix(in oklab, var(--greese-alert-tone) 30%, transparent);
361
+ position: relative;
362
+ isolation: isolate;
363
+ border-color: transparent;
364
+ clip-path: var(--greese-shape-clip) padding-box;
441
365
  }
442
- }
443
- .greese-Button {
444
- --greese-shape-ring: var(--greese-button-border, transparent);
445
- position: relative;
446
- isolation: isolate;
447
- border-color: transparent;
448
- clip-path: var(--greese-shape-clip) padding-box;
449
- }
450
- .greese-Button::after {
451
- position: absolute;
452
- inset: 0;
453
- inline-size: auto;
454
- block-size: auto;
455
- translate: none;
456
- z-index: 1;
457
- pointer-events: none;
458
- content: '';
459
- background: var(--greese-shape-ring);
460
- clip-path: var(--greese-shape-ring-clip);
461
- }
462
- @media (prefers-reduced-motion: no-preference) {
463
- .greese-Button {
464
- transition: background-color var(--greese-duration-fast) var(--greese-easing-standard),
465
- border-color var(--greese-duration-fast) var(--greese-easing-standard),
466
- color var(--greese-duration-fast) var(--greese-easing-standard),
467
- --greese-shape-a var(--greese-duration-normal) var(--greese-easing-standard),
468
- --greese-shape-b var(--greese-duration-normal) var(--greese-easing-standard),
469
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
470
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
471
- --greese-shape-bleed 0s linear;
366
+ #{greese.themed(".greese-Alert", Alert)}::after {
367
+ position: absolute;
368
+ inset: 0;
369
+ inline-size: auto;
370
+ block-size: auto;
371
+ translate: none;
372
+ z-index: 1;
373
+ pointer-events: none;
374
+ content: '';
375
+ background: var(--greese-shape-ring);
376
+ clip-path: var(--greese-shape-ring-clip);
472
377
  }
473
- }
474
- @media (forced-colors: active) {
475
- .greese-Button {
476
- clip-path: none;
477
- border-color: CanvasText;
378
+ @media (prefers-reduced-motion: no-preference) {
379
+ #{greese.themed(".greese-Alert", Alert)} {
380
+ transition: --greese-shape-a var(--greese-duration-normal) var(--greese-easing-standard),
381
+ --greese-shape-b var(--greese-duration-normal) var(--greese-easing-standard),
382
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
383
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
384
+ --greese-shape-bleed 0s linear;
385
+ }
478
386
  }
479
- .greese-Button::after {
480
- display: none;
387
+ @media (forced-colors: active) {
388
+ #{greese.themed(".greese-Alert", Alert)} {
389
+ clip-path: none;
390
+ border-color: CanvasText;
391
+ }
392
+ #{greese.themed(".greese-Alert", Alert)}::after {
393
+ display: none;
394
+ }
481
395
  }
482
- }
483
- .greese-Card {
484
- --greese-shape-ring: transparent;
485
- position: relative;
486
- isolation: isolate;
487
- border-color: transparent;
488
- clip-path: var(--greese-shape-clip) padding-box;
489
- }
490
- .greese-Card::after {
491
- position: absolute;
492
- inset: 0;
493
- inline-size: auto;
494
- block-size: auto;
495
- translate: none;
496
- z-index: 1;
497
- pointer-events: none;
498
- content: '';
499
- background: var(--greese-shape-ring);
500
- clip-path: var(--greese-shape-ring-clip);
501
- }
502
- .greese-Card.greese-Card--outline {
503
- --greese-shape-ring: var(--greese-color-border);
504
- }
505
- .greese-Card.greese-Card--elevated {
506
- --greese-shape-ring: var(--greese-color-border-strong);
507
- }
508
- @media (prefers-reduced-motion: no-preference) {
509
- .greese-Card {
510
- transition: --greese-shape-a var(--greese-duration-normal) var(--greese-easing-standard),
511
- --greese-shape-b var(--greese-duration-normal) var(--greese-easing-standard),
512
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
513
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
514
- --greese-shape-bleed 0s linear;
515
- }
516
- .greese-Card.greese-Card--interactive {
517
- transition: --greese-shape-a var(--greese-duration-normal) var(--greese-easing-standard),
518
- --greese-shape-b var(--greese-duration-normal) var(--greese-easing-standard),
519
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
520
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
521
- --greese-shape-bleed 0s linear,
522
- box-shadow var(--greese-duration-normal) var(--greese-easing-standard),
523
- border-color var(--greese-duration-normal) var(--greese-easing-standard),
524
- translate var(--greese-duration-normal) var(--greese-easing-standard);
396
+ #{greese.themed(".greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar)", Avatar)},
397
+ #{greese.themed(".greese-ChatBubble-bubble", ChatBubble)},
398
+ #{greese.themed(".greese-Status:not(.greese-Status--pulse)", Status)} {
399
+ clip-path: var(--greese-shape-clip) border-box;
525
400
  }
526
- }
527
- @media (forced-colors: active) {
528
- .greese-Card {
529
- clip-path: none;
530
- border-color: CanvasText;
401
+ @media (forced-colors: active) {
402
+ #{greese.themed(".greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar)", Avatar)},
403
+ #{greese.themed(".greese-ChatBubble-bubble", ChatBubble)},
404
+ #{greese.themed(".greese-Status:not(.greese-Status--pulse)", Status)} {
405
+ clip-path: none;
406
+ }
531
407
  }
532
- .greese-Card::after {
533
- display: none;
408
+ #{greese.themed(".greese-Badge", Badge)} {
409
+ --greese-shape-ring: color-mix(in oklab, var(--greese-badge-tone) 35%, transparent);
410
+ position: relative;
411
+ isolation: isolate;
412
+ border-color: transparent;
413
+ clip-path: var(--greese-shape-clip) padding-box;
534
414
  }
535
- }
536
- .greese-Chip {
537
- --greese-shape-ring: var(--greese-color-border);
538
- position: relative;
539
- isolation: isolate;
540
- border-color: transparent;
541
- clip-path: var(--greese-shape-clip) padding-box;
542
- }
543
- .greese-Chip::after {
544
- position: absolute;
545
- inset: 0;
546
- inline-size: auto;
547
- block-size: auto;
548
- translate: none;
549
- z-index: 1;
550
- pointer-events: none;
551
- content: '';
552
- background: var(--greese-shape-ring);
553
- clip-path: var(--greese-shape-ring-clip);
554
- }
555
- @media (prefers-reduced-motion: no-preference) {
556
- .greese-Chip {
557
- transition: background-color var(--greese-duration-fast) var(--greese-easing-standard),
558
- color var(--greese-duration-fast) var(--greese-easing-standard),
559
- --greese-shape-h var(--greese-duration-normal) var(--greese-easing-standard),
560
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
561
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
562
- --greese-shape-bleed 0s linear;
415
+ #{greese.themed(".greese-Badge", Badge)}::after {
416
+ position: absolute;
417
+ inset: 0;
418
+ inline-size: auto;
419
+ block-size: auto;
420
+ translate: none;
421
+ z-index: 1;
422
+ pointer-events: none;
423
+ content: '';
424
+ background: var(--greese-shape-ring);
425
+ clip-path: var(--greese-shape-ring-clip);
563
426
  }
564
- }
565
- @media (forced-colors: active) {
566
- .greese-Chip {
567
- clip-path: none;
568
- border-color: CanvasText;
427
+ @media (prefers-reduced-motion: no-preference) {
428
+ #{greese.themed(".greese-Badge", Badge)} {
429
+ transition: --greese-shape-h var(--greese-duration-normal) var(--greese-easing-standard),
430
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
431
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
432
+ --greese-shape-bleed 0s linear;
433
+ }
569
434
  }
570
- .greese-Chip::after {
571
- display: none;
435
+ @media (forced-colors: active) {
436
+ #{greese.themed(".greese-Badge", Badge)} {
437
+ clip-path: none;
438
+ border-color: CanvasText;
439
+ }
440
+ #{greese.themed(".greese-Badge", Badge)}::after {
441
+ display: none;
442
+ }
572
443
  }
573
- }
574
- .greese-Collapsible-trigger {
575
- --greese-shape-ring: var(--greese-collapsible-border, var(--greese-color-border));
576
- position: relative;
577
- isolation: isolate;
578
- border-color: transparent;
579
- clip-path: var(--greese-shape-clip) padding-box;
580
- }
581
- .greese-Collapsible-trigger::after {
582
- position: absolute;
583
- inset: 0;
584
- inline-size: auto;
585
- block-size: auto;
586
- translate: none;
587
- z-index: 1;
588
- pointer-events: none;
589
- content: '';
590
- background: var(--greese-shape-ring);
591
- clip-path: var(--greese-shape-ring-clip);
592
- }
593
- @media (prefers-reduced-motion: no-preference) {
594
- .greese-Collapsible-trigger {
595
- transition: background-color var(--greese-duration-fast) var(--greese-easing-standard),
596
- --greese-shape-a var(--greese-duration-normal) var(--greese-easing-standard),
597
- --greese-shape-b var(--greese-duration-normal) var(--greese-easing-standard),
598
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
599
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
600
- --greese-shape-bleed 0s linear;
444
+ #{greese.themed(".greese-Button", Button)} {
445
+ --greese-shape-ring: var(--greese-button-border, transparent);
446
+ position: relative;
447
+ isolation: isolate;
448
+ border-color: transparent;
449
+ clip-path: var(--greese-shape-clip) padding-box;
601
450
  }
602
- }
603
- @media (forced-colors: active) {
604
- .greese-Collapsible-trigger {
605
- clip-path: none;
606
- border-color: CanvasText;
451
+ #{greese.themed(".greese-Button", Button)}::after {
452
+ position: absolute;
453
+ inset: 0;
454
+ inline-size: auto;
455
+ block-size: auto;
456
+ translate: none;
457
+ z-index: 1;
458
+ pointer-events: none;
459
+ content: '';
460
+ background: var(--greese-shape-ring);
461
+ clip-path: var(--greese-shape-ring-clip);
607
462
  }
608
- .greese-Collapsible-trigger::after {
609
- display: none;
463
+ @media (prefers-reduced-motion: no-preference) {
464
+ #{greese.themed(".greese-Button", Button)} {
465
+ transition: background-color var(--greese-duration-fast) var(--greese-easing-standard),
466
+ border-color var(--greese-duration-fast) var(--greese-easing-standard),
467
+ color var(--greese-duration-fast) var(--greese-easing-standard),
468
+ --greese-shape-a var(--greese-duration-normal) var(--greese-easing-standard),
469
+ --greese-shape-b var(--greese-duration-normal) var(--greese-easing-standard),
470
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
471
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
472
+ --greese-shape-bleed 0s linear;
473
+ }
610
474
  }
611
- }
612
- .greese-Dialog,
613
- .greese-Menu,
614
- .greese-Popover {
615
- --greese-shape-ring: var(--greese-color-border);
616
- isolation: isolate;
617
- border-color: transparent;
618
- clip-path: var(--greese-shape-clip) padding-box;
619
- }
620
- .greese-Dialog::after,
621
- .greese-Menu::after,
622
- .greese-Popover::after {
623
- position: absolute;
624
- inset: 0;
625
- inline-size: auto;
626
- block-size: auto;
627
- translate: none;
628
- z-index: 1;
629
- pointer-events: none;
630
- content: '';
631
- background: var(--greese-shape-ring);
632
- clip-path: var(--greese-shape-ring-clip);
633
- }
634
- @media (forced-colors: active) {
635
- .greese-Dialog,
636
- .greese-Menu,
637
- .greese-Popover {
638
- clip-path: none;
639
- border-color: CanvasText;
640
- }
641
- .greese-Dialog::after,
642
- .greese-Menu::after,
643
- .greese-Popover::after {
644
- display: none;
475
+ @media (forced-colors: active) {
476
+ #{greese.themed(".greese-Button", Button)} {
477
+ clip-path: none;
478
+ border-color: CanvasText;
479
+ }
480
+ #{greese.themed(".greese-Button", Button)}::after {
481
+ display: none;
482
+ }
645
483
  }
646
- }
647
- .greese-Input,
648
- .greese-Select,
649
- .greese-Textarea {
650
- --greese-shape-ring: var(--greese-color-border-strong);
651
- position: relative;
652
- isolation: isolate;
653
- border-color: transparent;
654
- clip-path: var(--greese-shape-clip) padding-box;
655
- }
656
- .greese-Input::after,
657
- .greese-Select::after,
658
- .greese-Textarea::after {
659
- position: absolute;
660
- inset: 0;
661
- inline-size: auto;
662
- block-size: auto;
663
- translate: none;
664
- z-index: 1;
665
- pointer-events: none;
666
- content: '';
667
- background: var(--greese-shape-ring);
668
- clip-path: var(--greese-shape-ring-clip);
669
- }
670
- .greese-Input:hover,
671
- .greese-Select:hover,
672
- .greese-Textarea:hover {
673
- --greese-shape-ring: var(--greese-color-fg-muted);
674
- }
675
- .greese-Input[aria-invalid=true], .greese-Input[data-invalid],
676
- .greese-Select[aria-invalid=true], .greese-Select[data-invalid],
677
- .greese-Textarea[aria-invalid=true], .greese-Textarea[data-invalid] {
678
- --greese-shape-ring: var(--greese-color-negative);
679
- }
680
- @media (prefers-reduced-motion: no-preference) {
681
- .greese-Input,
682
- .greese-Select,
683
- .greese-Textarea {
684
- transition: box-shadow var(--greese-duration-fast) var(--greese-easing-standard),
685
- --greese-shape-a var(--greese-duration-normal) var(--greese-easing-standard),
686
- --greese-shape-b var(--greese-duration-normal) var(--greese-easing-standard),
687
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
688
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
689
- --greese-shape-bleed 0s linear;
484
+ #{greese.themed(".greese-Card", Card)} {
485
+ --greese-shape-ring: transparent;
486
+ position: relative;
487
+ isolation: isolate;
488
+ border-color: transparent;
489
+ clip-path: var(--greese-shape-clip) padding-box;
690
490
  }
691
- }
692
- @media (forced-colors: active) {
693
- .greese-Input,
694
- .greese-Select,
695
- .greese-Textarea {
696
- clip-path: none;
697
- border-color: CanvasText;
698
- }
699
- .greese-Input::after,
700
- .greese-Select::after,
701
- .greese-Textarea::after {
702
- display: none;
491
+ #{greese.themed(".greese-Card", Card)}::after {
492
+ position: absolute;
493
+ inset: 0;
494
+ inline-size: auto;
495
+ block-size: auto;
496
+ translate: none;
497
+ z-index: 1;
498
+ pointer-events: none;
499
+ content: '';
500
+ background: var(--greese-shape-ring);
501
+ clip-path: var(--greese-shape-ring-clip);
703
502
  }
704
- }
705
- .greese-OtpField-slot {
706
- --greese-shape-ring: var(--greese-color-border-strong);
707
- position: relative;
708
- isolation: isolate;
709
- border-color: transparent;
710
- clip-path: var(--greese-shape-clip) padding-box;
711
- }
712
- .greese-OtpField-slot::before {
713
- position: absolute;
714
- inset: 0;
715
- inline-size: auto;
716
- block-size: auto;
717
- translate: none;
718
- z-index: 1;
719
- pointer-events: none;
720
- content: '';
721
- background: var(--greese-shape-ring);
722
- clip-path: var(--greese-shape-ring-clip);
723
- }
724
- .greese-OtpField[data-invalid] .greese-OtpField-slot {
725
- --greese-shape-ring: var(--greese-color-negative);
726
- }
727
- .greese-OtpField-slot.greese-OtpField-slot--active {
728
- --greese-shape-ring: var(--greese-color-focus-ring);
729
- --greese-shape-border: 2px;
730
- }
731
- @media (prefers-reduced-motion: no-preference) {
732
- .greese-OtpField-slot {
733
- transition: box-shadow var(--greese-duration-fast) var(--greese-easing-standard),
734
- --greese-shape-a var(--greese-duration-normal) var(--greese-easing-standard),
735
- --greese-shape-b var(--greese-duration-normal) var(--greese-easing-standard),
736
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
737
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
738
- --greese-shape-bleed 0s linear;
503
+ #{greese.themed(".greese-Card", Card)}.greese-Card--outline {
504
+ --greese-shape-ring: var(--greese-color-border);
739
505
  }
740
- }
741
- @media (forced-colors: active) {
742
- .greese-OtpField-slot {
743
- clip-path: none;
744
- border-color: CanvasText;
506
+ #{greese.themed(".greese-Card", Card)}.greese-Card--elevated {
507
+ --greese-shape-ring: var(--greese-color-border-strong);
745
508
  }
746
- .greese-OtpField-slot::before {
747
- display: none;
509
+ @media (prefers-reduced-motion: no-preference) {
510
+ #{greese.themed(".greese-Card", Card)} {
511
+ transition: --greese-shape-a var(--greese-duration-normal) var(--greese-easing-standard),
512
+ --greese-shape-b var(--greese-duration-normal) var(--greese-easing-standard),
513
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
514
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
515
+ --greese-shape-bleed 0s linear;
516
+ }
517
+ #{greese.themed(".greese-Card", Card)}.greese-Card--interactive {
518
+ transition: --greese-shape-a var(--greese-duration-normal) var(--greese-easing-standard),
519
+ --greese-shape-b var(--greese-duration-normal) var(--greese-easing-standard),
520
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
521
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
522
+ --greese-shape-bleed 0s linear,
523
+ box-shadow var(--greese-duration-normal) var(--greese-easing-standard),
524
+ border-color var(--greese-duration-normal) var(--greese-easing-standard),
525
+ translate var(--greese-duration-normal) var(--greese-easing-standard);
526
+ }
748
527
  }
749
- }
750
- .greese-Segment {
751
- --greese-shape-ring: transparent;
752
- position: relative;
753
- isolation: isolate;
754
- border-color: transparent;
755
- clip-path: var(--greese-shape-clip) padding-box;
756
- }
757
- .greese-Segment::after {
758
- position: absolute;
759
- inset: 0;
760
- inline-size: auto;
761
- block-size: auto;
762
- translate: none;
763
- z-index: 1;
764
- pointer-events: none;
765
- content: '';
766
- background: var(--greese-shape-ring);
767
- clip-path: var(--greese-shape-ring-clip);
768
- }
769
- .greese-Segment:has(:checked) {
770
- --greese-shape-ring: var(--greese-segment-current-ring, transparent);
771
- }
772
- @media (prefers-reduced-motion: no-preference) {
773
- .greese-Segment {
774
- transition: background-color var(--greese-duration-fast) var(--greese-easing-standard),
775
- color var(--greese-duration-fast) var(--greese-easing-standard),
776
- --greese-shape-h var(--greese-duration-normal) var(--greese-easing-standard),
777
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
778
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
779
- --greese-shape-bleed 0s linear;
528
+ @media (forced-colors: active) {
529
+ #{greese.themed(".greese-Card", Card)} {
530
+ clip-path: none;
531
+ border-color: CanvasText;
532
+ }
533
+ #{greese.themed(".greese-Card", Card)}::after {
534
+ display: none;
535
+ }
780
536
  }
781
- }
782
- @media (forced-colors: active) {
783
- .greese-Segment {
784
- clip-path: none;
785
- border-color: CanvasText;
537
+ #{greese.themed(".greese-Chip", Chip)} {
538
+ --greese-shape-ring: var(--greese-color-border);
539
+ position: relative;
540
+ isolation: isolate;
541
+ border-color: transparent;
542
+ clip-path: var(--greese-shape-clip) padding-box;
786
543
  }
787
- .greese-Segment::after {
788
- display: none;
544
+ #{greese.themed(".greese-Chip", Chip)}::after {
545
+ position: absolute;
546
+ inset: 0;
547
+ inline-size: auto;
548
+ block-size: auto;
549
+ translate: none;
550
+ z-index: 1;
551
+ pointer-events: none;
552
+ content: '';
553
+ background: var(--greese-shape-ring);
554
+ clip-path: var(--greese-shape-ring-clip);
789
555
  }
790
- }
791
- .greese-SegmentedControl-track {
792
- --greese-shape-ring: var(--greese-color-border);
793
- position: relative;
794
- isolation: isolate;
795
- border-color: transparent;
796
- clip-path: var(--greese-shape-clip) padding-box;
797
- }
798
- .greese-SegmentedControl-track::after {
799
- position: absolute;
800
- inset: 0;
801
- inline-size: auto;
802
- block-size: auto;
803
- translate: none;
804
- z-index: 1;
805
- pointer-events: none;
806
- content: '';
807
- background: var(--greese-shape-ring);
808
- clip-path: var(--greese-shape-ring-clip);
809
- }
810
- @media (prefers-reduced-motion: no-preference) {
811
- .greese-SegmentedControl-track {
812
- transition: --greese-shape-h var(--greese-duration-normal) var(--greese-easing-standard),
813
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
814
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
815
- --greese-shape-bleed 0s linear;
556
+ @media (prefers-reduced-motion: no-preference) {
557
+ #{greese.themed(".greese-Chip", Chip)} {
558
+ transition: background-color var(--greese-duration-fast) var(--greese-easing-standard),
559
+ color var(--greese-duration-fast) var(--greese-easing-standard),
560
+ --greese-shape-h var(--greese-duration-normal) var(--greese-easing-standard),
561
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
562
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
563
+ --greese-shape-bleed 0s linear;
564
+ }
816
565
  }
817
- }
818
- @media (forced-colors: active) {
819
- .greese-SegmentedControl-track {
820
- clip-path: none;
821
- border-color: CanvasText;
566
+ @media (forced-colors: active) {
567
+ #{greese.themed(".greese-Chip", Chip)} {
568
+ clip-path: none;
569
+ border-color: CanvasText;
570
+ }
571
+ #{greese.themed(".greese-Chip", Chip)}::after {
572
+ display: none;
573
+ }
822
574
  }
823
- .greese-SegmentedControl-track::after {
824
- display: none;
575
+ #{greese.themed(".greese-Collapsible-trigger", Collapsible)} {
576
+ --greese-shape-ring: var(--greese-collapsible-border, var(--greese-color-border));
577
+ position: relative;
578
+ isolation: isolate;
579
+ border-color: transparent;
580
+ clip-path: var(--greese-shape-clip) padding-box;
825
581
  }
826
- }
827
- .greese-Tab {
828
- --greese-shape-ring: transparent;
829
- position: relative;
830
- isolation: isolate;
831
- border-color: transparent;
832
- clip-path: var(--greese-shape-clip) padding-box;
833
- }
834
- .greese-Tab::after {
835
- position: absolute;
836
- inset: 0;
837
- inline-size: auto;
838
- block-size: auto;
839
- translate: none;
840
- z-index: 1;
841
- pointer-events: none;
842
- content: '';
843
- background: var(--greese-shape-ring);
844
- clip-path: var(--greese-shape-ring-clip);
845
- }
846
- .greese-Tab[aria-selected='true'] {
847
- --greese-shape-ring: var(--greese-tab-current-ring, transparent);
848
- --greese-shape-border: 1.5px;
849
- }
850
- @media (prefers-reduced-motion: no-preference) {
851
- .greese-Tab {
852
- transition: color var(--greese-duration-fast) var(--greese-easing-standard),
853
- background-color var(--greese-duration-fast) var(--greese-easing-standard),
854
- box-shadow var(--greese-duration-fast) var(--greese-easing-standard),
855
- --greese-shape-c var(--greese-duration-normal) var(--greese-easing-standard),
856
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
857
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
858
- --greese-shape-bleed 0s linear;
582
+ #{greese.themed(".greese-Collapsible-trigger", Collapsible)}::after {
583
+ position: absolute;
584
+ inset: 0;
585
+ inline-size: auto;
586
+ block-size: auto;
587
+ translate: none;
588
+ z-index: 1;
589
+ pointer-events: none;
590
+ content: '';
591
+ background: var(--greese-shape-ring);
592
+ clip-path: var(--greese-shape-ring-clip);
859
593
  }
860
- }
861
- @media (forced-colors: active) {
862
- .greese-Tab {
863
- clip-path: none;
864
- border-color: CanvasText;
594
+ @media (prefers-reduced-motion: no-preference) {
595
+ #{greese.themed(".greese-Collapsible-trigger", Collapsible)} {
596
+ transition: background-color var(--greese-duration-fast) var(--greese-easing-standard),
597
+ --greese-shape-a var(--greese-duration-normal) var(--greese-easing-standard),
598
+ --greese-shape-b var(--greese-duration-normal) var(--greese-easing-standard),
599
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
600
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
601
+ --greese-shape-bleed 0s linear;
602
+ }
865
603
  }
866
- .greese-Tab::after {
867
- display: none;
604
+ @media (forced-colors: active) {
605
+ #{greese.themed(".greese-Collapsible-trigger", Collapsible)} {
606
+ clip-path: none;
607
+ border-color: CanvasText;
608
+ }
609
+ #{greese.themed(".greese-Collapsible-trigger", Collapsible)}::after {
610
+ display: none;
611
+ }
868
612
  }
869
- }
870
- .greese-Toast {
871
- --greese-shape-ring: color-mix(in oklab, var(--greese-toast-edge) 45%, var(--greese-color-border-strong));
872
- position: relative;
873
- isolation: isolate;
874
- border-color: transparent;
875
- clip-path: var(--greese-shape-clip) padding-box;
876
- }
877
- .greese-Toast::after {
878
- position: absolute;
879
- inset: 0;
880
- inline-size: auto;
881
- block-size: auto;
882
- translate: none;
883
- z-index: 1;
884
- pointer-events: none;
885
- content: '';
886
- background: var(--greese-shape-ring);
887
- clip-path: var(--greese-shape-ring-clip);
888
- }
889
- .greese-Toast {
890
- box-shadow: inset 3px 0 0 var(--greese-toast-edge);
891
- }
892
- .greese-Toast:dir(rtl) {
893
- box-shadow: inset -3px 0 0 var(--greese-toast-edge);
894
- }
895
- @media (forced-colors: active) {
896
- .greese-Toast {
897
- clip-path: none;
898
- border-color: CanvasText;
613
+ #{greese.themed(".greese-Dialog", Dialog)},
614
+ #{greese.themed(".greese-Menu", Menu)},
615
+ #{greese.themed(".greese-Popover", Popover)} {
616
+ --greese-shape-ring: var(--greese-color-border);
617
+ isolation: isolate;
618
+ border-color: transparent;
619
+ clip-path: var(--greese-shape-clip) padding-box;
899
620
  }
900
- .greese-Toast::after {
901
- display: none;
621
+ #{greese.themed(".greese-Dialog", Dialog)}::after,
622
+ #{greese.themed(".greese-Menu", Menu)}::after,
623
+ #{greese.themed(".greese-Popover", Popover)}::after {
624
+ position: absolute;
625
+ inset: 0;
626
+ inline-size: auto;
627
+ block-size: auto;
628
+ translate: none;
629
+ z-index: 1;
630
+ pointer-events: none;
631
+ content: '';
632
+ background: var(--greese-shape-ring);
633
+ clip-path: var(--greese-shape-ring-clip);
902
634
  }
903
- }
904
- .greese-Tooltip {
905
- --greese-shape-ring: var(--greese-tooltip-border, transparent);
906
- isolation: isolate;
907
- border-color: transparent;
908
- clip-path: var(--greese-shape-clip) padding-box;
909
- }
910
- .greese-Tooltip::after {
911
- position: absolute;
912
- inset: 0;
913
- inline-size: auto;
914
- block-size: auto;
915
- translate: none;
916
- z-index: 1;
917
- pointer-events: none;
918
- content: '';
919
- background: var(--greese-shape-ring);
920
- clip-path: var(--greese-shape-ring-clip);
921
- }
922
- @media (forced-colors: active) {
923
- .greese-Tooltip {
924
- clip-path: none;
925
- border-color: CanvasText;
635
+ @media (forced-colors: active) {
636
+ #{greese.themed(".greese-Dialog", Dialog)},
637
+ #{greese.themed(".greese-Menu", Menu)},
638
+ #{greese.themed(".greese-Popover", Popover)} {
639
+ clip-path: none;
640
+ border-color: CanvasText;
641
+ }
642
+ #{greese.themed(".greese-Dialog", Dialog)}::after,
643
+ #{greese.themed(".greese-Menu", Menu)}::after,
644
+ #{greese.themed(".greese-Popover", Popover)}::after {
645
+ display: none;
646
+ }
926
647
  }
927
- .greese-Tooltip::after {
928
- display: none;
648
+ #{greese.themed(".greese-Input", Input)},
649
+ #{greese.themed(".greese-Select", Select)},
650
+ #{greese.themed(".greese-Textarea", Textarea)} {
651
+ --greese-shape-ring: var(--greese-color-border-strong);
652
+ position: relative;
653
+ isolation: isolate;
654
+ border-color: transparent;
655
+ clip-path: var(--greese-shape-clip) padding-box;
929
656
  }
930
- }
931
- .greese-shape-bevel-control,
932
- .greese-Button {
933
- --greese-shape-a: 8px;
934
- --greese-shape-b: 0px;
935
- --greese-shape-border: 1px;
936
- --greese-shape-clip: polygon(calc(var(--greese-shape-a) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-b) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-b) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% - var(--greese-shape-a) + 0.414 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-a) + 0.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-b) - 0.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% - var(--greese-shape-b) + 0.414 * var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-a) - 0.414 * var(--greese-shape-bleed)));
937
- --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-a)) 0, calc(100% - var(--greese-shape-b)) 0, 100% calc(var(--greese-shape-b)), 100% calc(100% - var(--greese-shape-a)), calc(100% - var(--greese-shape-a)) 100%, calc(var(--greese-shape-b)) 100%, 0 calc(100% - var(--greese-shape-b)), 0 calc(var(--greese-shape-a)), calc(var(--greese-shape-a)) 0, calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-b) - 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-b) + 0.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-a) - 0.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-a) - 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-b) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-b) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
938
- }
939
- .greese-Button.greese-Button--size-sm {
940
- --greese-shape-a: 5.6px;
941
- --greese-shape-b: 0px;
942
- }
943
- .greese-Button.greese-Button--size-xs {
944
- --greese-shape-a: 4px;
945
- --greese-shape-b: 0px;
946
- }
947
- .greese-Button.greese-IconButton {
948
- --greese-shape-a: 4px;
949
- --greese-shape-b: 0px;
950
- }
951
- @media (hover: hover) {
952
- .greese-shape-bevel-control:hover,
953
- .greese-Button:hover {
657
+ #{greese.themed(".greese-Input", Input)}::after,
658
+ #{greese.themed(".greese-Select", Select)}::after,
659
+ #{greese.themed(".greese-Textarea", Textarea)}::after {
660
+ position: absolute;
661
+ inset: 0;
662
+ inline-size: auto;
663
+ block-size: auto;
664
+ translate: none;
665
+ z-index: 1;
666
+ pointer-events: none;
667
+ content: '';
668
+ background: var(--greese-shape-ring);
669
+ clip-path: var(--greese-shape-ring-clip);
670
+ }
671
+ #{greese.themed(".greese-Input", Input)}:hover,
672
+ #{greese.themed(".greese-Select", Select)}:hover,
673
+ #{greese.themed(".greese-Textarea", Textarea)}:hover {
674
+ --greese-shape-ring: var(--greese-color-fg-muted);
675
+ }
676
+ #{greese.themed(".greese-Input", Input)}[aria-invalid=true], #{greese.themed(".greese-Input", Input)}[data-invalid],
677
+ #{greese.themed(".greese-Select", Select)}[aria-invalid=true], #{greese.themed(".greese-Select", Select)}[data-invalid],
678
+ #{greese.themed(".greese-Textarea", Textarea)}[aria-invalid=true], #{greese.themed(".greese-Textarea", Textarea)}[data-invalid] {
679
+ --greese-shape-ring: var(--greese-color-negative);
680
+ }
681
+ @media (prefers-reduced-motion: no-preference) {
682
+ #{greese.themed(".greese-Input", Input)},
683
+ #{greese.themed(".greese-Select", Select)},
684
+ #{greese.themed(".greese-Textarea", Textarea)} {
685
+ transition: box-shadow var(--greese-duration-fast) var(--greese-easing-standard),
686
+ --greese-shape-a var(--greese-duration-normal) var(--greese-easing-standard),
687
+ --greese-shape-b var(--greese-duration-normal) var(--greese-easing-standard),
688
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
689
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
690
+ --greese-shape-bleed 0s linear;
691
+ }
692
+ }
693
+ @media (forced-colors: active) {
694
+ #{greese.themed(".greese-Input", Input)},
695
+ #{greese.themed(".greese-Select", Select)},
696
+ #{greese.themed(".greese-Textarea", Textarea)} {
697
+ clip-path: none;
698
+ border-color: CanvasText;
699
+ }
700
+ #{greese.themed(".greese-Input", Input)}::after,
701
+ #{greese.themed(".greese-Select", Select)}::after,
702
+ #{greese.themed(".greese-Textarea", Textarea)}::after {
703
+ display: none;
704
+ }
705
+ }
706
+ #{greese.themed(".greese-OtpField-slot", OtpField)} {
707
+ --greese-shape-ring: var(--greese-color-border-strong);
708
+ position: relative;
709
+ isolation: isolate;
710
+ border-color: transparent;
711
+ clip-path: var(--greese-shape-clip) padding-box;
712
+ }
713
+ #{greese.themed(".greese-OtpField-slot", OtpField)}::before {
714
+ position: absolute;
715
+ inset: 0;
716
+ inline-size: auto;
717
+ block-size: auto;
718
+ translate: none;
719
+ z-index: 1;
720
+ pointer-events: none;
721
+ content: '';
722
+ background: var(--greese-shape-ring);
723
+ clip-path: var(--greese-shape-ring-clip);
724
+ }
725
+ .greese-OtpField[data-invalid] #{greese.themed(".greese-OtpField-slot", OtpField)} {
726
+ --greese-shape-ring: var(--greese-color-negative);
727
+ }
728
+ #{greese.themed(".greese-OtpField-slot", OtpField)}.greese-OtpField-slot--active {
729
+ --greese-shape-ring: var(--greese-color-focus-ring);
730
+ --greese-shape-border: 2px;
731
+ }
732
+ @media (prefers-reduced-motion: no-preference) {
733
+ #{greese.themed(".greese-OtpField-slot", OtpField)} {
734
+ transition: box-shadow var(--greese-duration-fast) var(--greese-easing-standard),
735
+ --greese-shape-a var(--greese-duration-normal) var(--greese-easing-standard),
736
+ --greese-shape-b var(--greese-duration-normal) var(--greese-easing-standard),
737
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
738
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
739
+ --greese-shape-bleed 0s linear;
740
+ }
741
+ }
742
+ @media (forced-colors: active) {
743
+ #{greese.themed(".greese-OtpField-slot", OtpField)} {
744
+ clip-path: none;
745
+ border-color: CanvasText;
746
+ }
747
+ #{greese.themed(".greese-OtpField-slot", OtpField)}::before {
748
+ display: none;
749
+ }
750
+ }
751
+ #{greese.themed(".greese-Segment", Segment)} {
752
+ --greese-shape-ring: transparent;
753
+ position: relative;
754
+ isolation: isolate;
755
+ border-color: transparent;
756
+ clip-path: var(--greese-shape-clip) padding-box;
757
+ }
758
+ #{greese.themed(".greese-Segment", Segment)}::after {
759
+ position: absolute;
760
+ inset: 0;
761
+ inline-size: auto;
762
+ block-size: auto;
763
+ translate: none;
764
+ z-index: 1;
765
+ pointer-events: none;
766
+ content: '';
767
+ background: var(--greese-shape-ring);
768
+ clip-path: var(--greese-shape-ring-clip);
769
+ }
770
+ #{greese.themed(".greese-Segment", Segment)}:has(:checked) {
771
+ --greese-shape-ring: var(--greese-segment-current-ring, transparent);
772
+ }
773
+ @media (prefers-reduced-motion: no-preference) {
774
+ #{greese.themed(".greese-Segment", Segment)} {
775
+ transition: background-color var(--greese-duration-fast) var(--greese-easing-standard),
776
+ color var(--greese-duration-fast) var(--greese-easing-standard),
777
+ --greese-shape-h var(--greese-duration-normal) var(--greese-easing-standard),
778
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
779
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
780
+ --greese-shape-bleed 0s linear;
781
+ }
782
+ }
783
+ @media (forced-colors: active) {
784
+ #{greese.themed(".greese-Segment", Segment)} {
785
+ clip-path: none;
786
+ border-color: CanvasText;
787
+ }
788
+ #{greese.themed(".greese-Segment", Segment)}::after {
789
+ display: none;
790
+ }
791
+ }
792
+ #{greese.themed(".greese-SegmentedControl-track", SegmentedControl)} {
793
+ --greese-shape-ring: var(--greese-color-border);
794
+ position: relative;
795
+ isolation: isolate;
796
+ border-color: transparent;
797
+ clip-path: var(--greese-shape-clip) padding-box;
798
+ }
799
+ #{greese.themed(".greese-SegmentedControl-track", SegmentedControl)}::after {
800
+ position: absolute;
801
+ inset: 0;
802
+ inline-size: auto;
803
+ block-size: auto;
804
+ translate: none;
805
+ z-index: 1;
806
+ pointer-events: none;
807
+ content: '';
808
+ background: var(--greese-shape-ring);
809
+ clip-path: var(--greese-shape-ring-clip);
810
+ }
811
+ @media (prefers-reduced-motion: no-preference) {
812
+ #{greese.themed(".greese-SegmentedControl-track", SegmentedControl)} {
813
+ transition: --greese-shape-h var(--greese-duration-normal) var(--greese-easing-standard),
814
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
815
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
816
+ --greese-shape-bleed 0s linear;
817
+ }
818
+ }
819
+ @media (forced-colors: active) {
820
+ #{greese.themed(".greese-SegmentedControl-track", SegmentedControl)} {
821
+ clip-path: none;
822
+ border-color: CanvasText;
823
+ }
824
+ #{greese.themed(".greese-SegmentedControl-track", SegmentedControl)}::after {
825
+ display: none;
826
+ }
827
+ }
828
+ #{greese.themed(".greese-Tab", Tab)} {
829
+ --greese-shape-ring: transparent;
830
+ position: relative;
831
+ isolation: isolate;
832
+ border-color: transparent;
833
+ clip-path: var(--greese-shape-clip) padding-box;
834
+ }
835
+ #{greese.themed(".greese-Tab", Tab)}::after {
836
+ position: absolute;
837
+ inset: 0;
838
+ inline-size: auto;
839
+ block-size: auto;
840
+ translate: none;
841
+ z-index: 1;
842
+ pointer-events: none;
843
+ content: '';
844
+ background: var(--greese-shape-ring);
845
+ clip-path: var(--greese-shape-ring-clip);
846
+ }
847
+ #{greese.themed(".greese-Tab", Tab)}[aria-selected='true'] {
848
+ --greese-shape-ring: var(--greese-tab-current-ring, transparent);
849
+ --greese-shape-border: 1.5px;
850
+ }
851
+ @media (prefers-reduced-motion: no-preference) {
852
+ #{greese.themed(".greese-Tab", Tab)} {
853
+ transition: color var(--greese-duration-fast) var(--greese-easing-standard),
854
+ background-color var(--greese-duration-fast) var(--greese-easing-standard),
855
+ box-shadow var(--greese-duration-fast) var(--greese-easing-standard),
856
+ --greese-shape-c var(--greese-duration-normal) var(--greese-easing-standard),
857
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
858
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
859
+ --greese-shape-bleed 0s linear;
860
+ }
861
+ }
862
+ @media (forced-colors: active) {
863
+ #{greese.themed(".greese-Tab", Tab)} {
864
+ clip-path: none;
865
+ border-color: CanvasText;
866
+ }
867
+ #{greese.themed(".greese-Tab", Tab)}::after {
868
+ display: none;
869
+ }
870
+ }
871
+ #{greese.themed(".greese-Toast", Toast)} {
872
+ --greese-shape-ring: color-mix(in oklab, var(--greese-toast-edge) 45%, var(--greese-color-border-strong));
873
+ position: relative;
874
+ isolation: isolate;
875
+ border-color: transparent;
876
+ clip-path: var(--greese-shape-clip) padding-box;
877
+ }
878
+ #{greese.themed(".greese-Toast", Toast)}::after {
879
+ position: absolute;
880
+ inset: 0;
881
+ inline-size: auto;
882
+ block-size: auto;
883
+ translate: none;
884
+ z-index: 1;
885
+ pointer-events: none;
886
+ content: '';
887
+ background: var(--greese-shape-ring);
888
+ clip-path: var(--greese-shape-ring-clip);
889
+ }
890
+ #{greese.themed(".greese-Toast", Toast)} {
891
+ box-shadow: inset 3px 0 0 var(--greese-toast-edge);
892
+ }
893
+ #{greese.themed(".greese-Toast", Toast)}:dir(rtl) {
894
+ box-shadow: inset -3px 0 0 var(--greese-toast-edge);
895
+ }
896
+ @media (forced-colors: active) {
897
+ #{greese.themed(".greese-Toast", Toast)} {
898
+ clip-path: none;
899
+ border-color: CanvasText;
900
+ }
901
+ #{greese.themed(".greese-Toast", Toast)}::after {
902
+ display: none;
903
+ }
904
+ }
905
+ #{greese.themed(".greese-Tooltip", Tooltip)} {
906
+ --greese-shape-ring: var(--greese-tooltip-border, transparent);
907
+ isolation: isolate;
908
+ border-color: transparent;
909
+ clip-path: var(--greese-shape-clip) padding-box;
910
+ }
911
+ #{greese.themed(".greese-Tooltip", Tooltip)}::after {
912
+ position: absolute;
913
+ inset: 0;
914
+ inline-size: auto;
915
+ block-size: auto;
916
+ translate: none;
917
+ z-index: 1;
918
+ pointer-events: none;
919
+ content: '';
920
+ background: var(--greese-shape-ring);
921
+ clip-path: var(--greese-shape-ring-clip);
922
+ }
923
+ @media (forced-colors: active) {
924
+ #{greese.themed(".greese-Tooltip", Tooltip)} {
925
+ clip-path: none;
926
+ border-color: CanvasText;
927
+ }
928
+ #{greese.themed(".greese-Tooltip", Tooltip)}::after {
929
+ display: none;
930
+ }
931
+ }
932
+ #{greese.themed(".greese-shape-bevel-control")},
933
+ #{greese.themed(".greese-Button", Button)} {
934
+ --greese-shape-a: 8px;
935
+ --greese-shape-b: 0px;
936
+ --greese-shape-border: 1px;
937
+ --greese-shape-clip: polygon(calc(var(--greese-shape-a) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-b) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-b) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% - var(--greese-shape-a) + 0.414 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-a) + 0.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-b) - 0.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% - var(--greese-shape-b) + 0.414 * var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-a) - 0.414 * var(--greese-shape-bleed)));
938
+ --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-a)) 0, calc(100% - var(--greese-shape-b)) 0, 100% calc(var(--greese-shape-b)), 100% calc(100% - var(--greese-shape-a)), calc(100% - var(--greese-shape-a)) 100%, calc(var(--greese-shape-b)) 100%, 0 calc(100% - var(--greese-shape-b)), 0 calc(var(--greese-shape-a)), calc(var(--greese-shape-a)) 0, calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-b) - 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-b) + 0.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-a) - 0.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-a) - 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-b) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-b) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
939
+ }
940
+ #{greese.themed(".greese-Button", Button)}.greese-Button--size-sm {
941
+ --greese-shape-a: 5.6px;
942
+ --greese-shape-b: 0px;
943
+ }
944
+ #{greese.themed(".greese-Button", Button)}.greese-Button--size-xs {
945
+ --greese-shape-a: 4px;
946
+ --greese-shape-b: 0px;
947
+ }
948
+ #{greese.themed(".greese-Button", Button)}.greese-IconButton {
949
+ --greese-shape-a: 4px;
950
+ --greese-shape-b: 0px;
951
+ }
952
+ @media (hover: hover) {
953
+ #{greese.themed(".greese-shape-bevel-control")}:hover,
954
+ #{greese.themed(".greese-Button", Button)}:hover {
955
+ --greese-shape-a: 0px;
956
+ --greese-shape-b: 8px;
957
+ }
958
+ #{greese.themed(".greese-Button", Button)}.greese-Button--size-sm:hover {
959
+ --greese-shape-a: 0px;
960
+ --greese-shape-b: 5.6px;
961
+ }
962
+ #{greese.themed(".greese-Button", Button)}.greese-Button--size-xs:hover,
963
+ #{greese.themed(".greese-Button", Button)}.greese-IconButton:hover {
964
+ --greese-shape-a: 0px;
965
+ --greese-shape-b: 4px;
966
+ }
967
+ }
968
+ #{greese.themed(".greese-shape-bevel-control")}:active,
969
+ #{greese.themed(".greese-Button", Button)}:active {
970
+ --greese-shape-a: 4px;
971
+ --greese-shape-b: 4px;
972
+ }
973
+ #{greese.themed(".greese-Button", Button)}.greese-Button--size-sm:active {
974
+ --greese-shape-a: 2.8px;
975
+ --greese-shape-b: 2.8px;
976
+ }
977
+ #{greese.themed(".greese-Button", Button)}.greese-Button--size-xs:active,
978
+ #{greese.themed(".greese-Button", Button)}.greese-IconButton:active {
979
+ --greese-shape-a: 2px;
980
+ --greese-shape-b: 2px;
981
+ }
982
+ #{greese.themed(".greese-shape-bevel-control")}:focus-visible {
954
983
  --greese-shape-a: 0px;
955
- --greese-shape-b: 8px;
984
+ --greese-shape-b: 0px;
985
+ --greese-shape-bleed: 8px;
986
+ transition-delay: 0s, 0s, 0s, 0s, var(--greese-duration-normal);
956
987
  }
957
- .greese-Button.greese-Button--size-sm:hover {
988
+ #{greese.themed(".greese-Button", Button)}:focus-visible {
958
989
  --greese-shape-a: 0px;
959
- --greese-shape-b: 5.6px;
990
+ --greese-shape-b: 0px;
991
+ --greese-shape-bleed: 8px;
992
+ transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, 0s, var(--greese-duration-normal);
993
+ }
994
+ #{greese.themed(".greese-shape-bevel-field")},
995
+ #{greese.themed(".greese-Input", Input)},
996
+ #{greese.themed(".greese-OtpField-slot", OtpField)},
997
+ #{greese.themed(".greese-Select", Select)},
998
+ #{greese.themed(".greese-Textarea", Textarea)} {
999
+ --greese-shape-a: 6px;
1000
+ --greese-shape-b: 0px;
1001
+ --greese-shape-border: 1px;
1002
+ --greese-shape-clip: polygon(calc(var(--greese-shape-a) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-b) + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-b) - var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% - var(--greese-shape-a) + 0.414 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-a) + 0.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-b) - var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% - var(--greese-shape-b) + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-a) - 0.414 * var(--greese-shape-bleed)));
1003
+ --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-a)) 0, calc(100% - var(--greese-shape-b)) 0, 100% calc(var(--greese-shape-b)), 100% calc(100% - var(--greese-shape-a)), calc(100% - var(--greese-shape-a)) 100%, calc(var(--greese-shape-b)) 100%, 0 calc(100% - var(--greese-shape-b)), 0 calc(var(--greese-shape-a)), calc(var(--greese-shape-a)) 0, calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-b) - var(--greese-shape-border)), calc(var(--greese-shape-b) + var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-a) - 0.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-a) - 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-b) + var(--greese-shape-border)), calc(100% - var(--greese-shape-b) - var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
960
1004
  }
961
- .greese-Button.greese-Button--size-xs:hover,
962
- .greese-Button.greese-IconButton:hover {
1005
+ #{greese.themed(".greese-Input", Input)}:has(:focus-visible),
1006
+ #{greese.themed(".greese-Select", Select)}:has(:focus-visible),
1007
+ #{greese.themed(".greese-Textarea", Textarea)}:has(:focus-visible) {
1008
+ --greese-shape-border: 3px;
1009
+ --greese-shape-ring: var(--greese-color-focus-ring);
1010
+ outline-color: transparent;
1011
+ }
1012
+ #{greese.themed(".greese-shape-bevel-field")}:focus-visible {
963
1013
  --greese-shape-a: 0px;
964
- --greese-shape-b: 4px;
1014
+ --greese-shape-b: 0px;
1015
+ --greese-shape-bleed: 8px;
1016
+ transition-delay: 0s, 0s, 0s, 0s, var(--greese-duration-normal);
965
1017
  }
966
- }
967
- .greese-shape-bevel-control:active,
968
- .greese-Button:active {
969
- --greese-shape-a: 4px;
970
- --greese-shape-b: 4px;
971
- }
972
- .greese-Button.greese-Button--size-sm:active {
973
- --greese-shape-a: 2.8px;
974
- --greese-shape-b: 2.8px;
975
- }
976
- .greese-Button.greese-Button--size-xs:active,
977
- .greese-Button.greese-IconButton:active {
978
- --greese-shape-a: 2px;
979
- --greese-shape-b: 2px;
980
- }
981
- .greese-shape-bevel-control:focus-visible {
982
- --greese-shape-a: 0px;
983
- --greese-shape-b: 0px;
984
- --greese-shape-bleed: 8px;
985
- transition-delay: 0s, 0s, 0s, 0s, var(--greese-duration-normal);
986
- }
987
- .greese-Button:focus-visible {
988
- --greese-shape-a: 0px;
989
- --greese-shape-b: 0px;
990
- --greese-shape-bleed: 8px;
991
- transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, 0s, var(--greese-duration-normal);
992
- }
993
- .greese-shape-bevel-field,
994
- .greese-Input,
995
- .greese-OtpField-slot,
996
- .greese-Select,
997
- .greese-Textarea {
998
- --greese-shape-a: 6px;
999
- --greese-shape-b: 0px;
1000
- --greese-shape-border: 1px;
1001
- --greese-shape-clip: polygon(calc(var(--greese-shape-a) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-b) + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-b) - var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% - var(--greese-shape-a) + 0.414 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-a) + 0.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-b) - var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% - var(--greese-shape-b) + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-a) - 0.414 * var(--greese-shape-bleed)));
1002
- --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-a)) 0, calc(100% - var(--greese-shape-b)) 0, 100% calc(var(--greese-shape-b)), 100% calc(100% - var(--greese-shape-a)), calc(100% - var(--greese-shape-a)) 100%, calc(var(--greese-shape-b)) 100%, 0 calc(100% - var(--greese-shape-b)), 0 calc(var(--greese-shape-a)), calc(var(--greese-shape-a)) 0, calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-b) - var(--greese-shape-border)), calc(var(--greese-shape-b) + var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-a) - 0.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-a) - 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-b) + var(--greese-shape-border)), calc(100% - var(--greese-shape-b) - var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
1003
- }
1004
- .greese-Input:has(:focus-visible),
1005
- .greese-Select:has(:focus-visible),
1006
- .greese-Textarea:has(:focus-visible) {
1007
- --greese-shape-border: 3px;
1008
- --greese-shape-ring: var(--greese-color-focus-ring);
1009
- outline-color: transparent;
1010
- }
1011
- .greese-shape-bevel-field:focus-visible {
1012
- --greese-shape-a: 0px;
1013
- --greese-shape-b: 0px;
1014
- --greese-shape-bleed: 8px;
1015
- transition-delay: 0s, 0s, 0s, 0s, var(--greese-duration-normal);
1016
- }
1017
- .greese-shape-bevel-container,
1018
- .greese-AccordionItem > .greese-Collapsible-content,
1019
- .greese-Card,
1020
- .greese-Dialog,
1021
- .greese-Menu,
1022
- .greese-Popover,
1023
- .greese-Tile,
1024
- .greese-Toast {
1025
- --greese-shape-a: 16px;
1026
- --greese-shape-b: 0px;
1027
- --greese-shape-border: 1px;
1028
- --greese-shape-clip: polygon(calc(var(--greese-shape-a) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-b) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-b) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% - var(--greese-shape-a) + 0.414 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-a) + 0.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-b) - 0.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% - var(--greese-shape-b) + 0.414 * var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-a) - 0.414 * var(--greese-shape-bleed)));
1029
- --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-a)) 0, calc(100% - var(--greese-shape-b)) 0, 100% calc(var(--greese-shape-b)), 100% calc(100% - var(--greese-shape-a)), calc(100% - var(--greese-shape-a)) 100%, calc(var(--greese-shape-b)) 100%, 0 calc(100% - var(--greese-shape-b)), 0 calc(var(--greese-shape-a)), calc(var(--greese-shape-a)) 0, calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-b) - 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-b) + 0.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-a) - 0.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-a) - 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-b) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-b) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
1030
- }
1031
- @media (hover: hover) {
1032
- .greese-shape-bevel-container:hover,
1033
- .greese-Card.greese-Card--interactive:hover {
1018
+ #{greese.themed(".greese-shape-bevel-container")},
1019
+ #{greese.themed(".greese-AccordionItem > .greese-Collapsible-content", AccordionItem)},
1020
+ #{greese.themed(".greese-Card", Card)},
1021
+ #{greese.themed(".greese-Dialog", Dialog)},
1022
+ #{greese.themed(".greese-Menu", Menu)},
1023
+ #{greese.themed(".greese-Popover", Popover)},
1024
+ #{greese.themed(".greese-Tile", Tile)},
1025
+ #{greese.themed(".greese-Toast", Toast)} {
1026
+ --greese-shape-a: 16px;
1027
+ --greese-shape-b: 0px;
1028
+ --greese-shape-border: 1px;
1029
+ --greese-shape-clip: polygon(calc(var(--greese-shape-a) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-b) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-b) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% - var(--greese-shape-a) + 0.414 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-a) + 0.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-b) - 0.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% - var(--greese-shape-b) + 0.414 * var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-a) - 0.414 * var(--greese-shape-bleed)));
1030
+ --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-a)) 0, calc(100% - var(--greese-shape-b)) 0, 100% calc(var(--greese-shape-b)), 100% calc(100% - var(--greese-shape-a)), calc(100% - var(--greese-shape-a)) 100%, calc(var(--greese-shape-b)) 100%, 0 calc(100% - var(--greese-shape-b)), 0 calc(var(--greese-shape-a)), calc(var(--greese-shape-a)) 0, calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-b) - 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-b) + 0.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-a) - 0.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-a) - 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-b) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-b) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
1031
+ }
1032
+ @media (hover: hover) {
1033
+ #{greese.themed(".greese-shape-bevel-container")}:hover,
1034
+ #{greese.themed(".greese-Card", Card)}.greese-Card--interactive:hover {
1035
+ --greese-shape-a: 0px;
1036
+ --greese-shape-b: 16px;
1037
+ }
1038
+ }
1039
+ #{greese.themed(".greese-shape-bevel-container")}:focus-visible,
1040
+ #{greese.themed(".greese-AccordionItem > .greese-Collapsible-content", AccordionItem)}:focus-visible,
1041
+ #{greese.themed(".greese-Card", Card)}:focus-visible,
1042
+ #{greese.themed(".greese-Tile", Tile)}:focus-visible {
1034
1043
  --greese-shape-a: 0px;
1035
- --greese-shape-b: 16px;
1044
+ --greese-shape-b: 0px;
1045
+ --greese-shape-bleed: 8px;
1046
+ transition-delay: 0s, 0s, 0s, 0s, var(--greese-duration-normal);
1047
+ }
1048
+ #{greese.themed(".greese-Dialog", Dialog)}:focus-visible,
1049
+ #{greese.themed(".greese-Menu", Menu)}:focus-visible,
1050
+ #{greese.themed(".greese-Popover", Popover)}:focus-visible,
1051
+ #{greese.themed(".greese-Toast", Toast)}:focus-visible {
1052
+ --greese-shape-a: 0px;
1053
+ --greese-shape-b: 0px;
1054
+ --greese-shape-bleed: 8px;
1055
+ }
1056
+ #{greese.themed(".greese-shape-bevel-small")},
1057
+ #{greese.themed(".greese-Alert", Alert)},
1058
+ #{greese.themed(".greese-Collapsible-trigger", Collapsible)},
1059
+ #{greese.themed(".greese-Tooltip", Tooltip)} {
1060
+ --greese-shape-a: 8px;
1061
+ --greese-shape-b: 0px;
1062
+ --greese-shape-border: 1px;
1063
+ --greese-shape-clip: polygon(calc(var(--greese-shape-a) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-b) + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-b) - var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% - var(--greese-shape-a) + 0.414 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-a) + 0.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-b) - var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% - var(--greese-shape-b) + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-a) - 0.414 * var(--greese-shape-bleed)));
1064
+ --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-a)) 0, calc(100% - var(--greese-shape-b)) 0, 100% calc(var(--greese-shape-b)), 100% calc(100% - var(--greese-shape-a)), calc(100% - var(--greese-shape-a)) 100%, calc(var(--greese-shape-b)) 100%, 0 calc(100% - var(--greese-shape-b)), 0 calc(var(--greese-shape-a)), calc(var(--greese-shape-a)) 0, calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-b) - var(--greese-shape-border)), calc(var(--greese-shape-b) + var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-a) - 0.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-a) - 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-b) + var(--greese-shape-border)), calc(100% - var(--greese-shape-b) - var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
1065
+ }
1066
+ #{greese.themed(".greese-shape-bevel-small")}:focus-visible,
1067
+ #{greese.themed(".greese-Alert", Alert)}:focus-visible {
1068
+ --greese-shape-a: 0px;
1069
+ --greese-shape-b: 0px;
1070
+ --greese-shape-bleed: 8px;
1071
+ transition-delay: 0s, 0s, 0s, 0s, var(--greese-duration-normal);
1072
+ }
1073
+ #{greese.themed(".greese-Collapsible-trigger", Collapsible)}:focus-visible {
1074
+ --greese-shape-a: 0px;
1075
+ --greese-shape-b: 0px;
1076
+ --greese-shape-bleed: 8px;
1077
+ transition-delay: 0s, 0s, 0s, 0s, 0s, var(--greese-duration-normal);
1078
+ }
1079
+ #{greese.themed(".greese-Tooltip", Tooltip)}:focus-visible {
1080
+ --greese-shape-a: 0px;
1081
+ --greese-shape-b: 0px;
1082
+ --greese-shape-bleed: 8px;
1083
+ }
1084
+ #{greese.themed(".greese-shape-bevel-indicator")},
1085
+ #{greese.themed(".greese-Badge", Badge)},
1086
+ #{greese.themed(".greese-Chip", Chip)},
1087
+ #{greese.themed(".greese-Segment", Segment)},
1088
+ #{greese.themed(".greese-SegmentedControl-track", SegmentedControl)} {
1089
+ --greese-shape-h: 6px;
1090
+ --greese-shape-border: 1px;
1091
+ --greese-shape-clip: polygon(calc(var(--greese-shape-h) - 0.936 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-h) + 0.936 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + 1.002 * var(--greese-shape-bleed)) 50%, calc(100% - var(--greese-shape-h) + 0.936 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-h) - 0.936 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 1.002 * var(--greese-shape-bleed)) 50%);
1092
+ --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-h)) 0, calc(100% - var(--greese-shape-h)) 0, 100% 50%, calc(100% - var(--greese-shape-h)) 100%, calc(var(--greese-shape-h)) 100%, 0 50%, calc(var(--greese-shape-h)) 0, calc(var(--greese-shape-h) + 0.936 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(1.002 * var(--greese-shape-border)) 50%, calc(var(--greese-shape-h) + 0.936 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-h) - 0.936 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - 1.002 * var(--greese-shape-border)) 50%, calc(100% - var(--greese-shape-h) - 0.936 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-h) + 0.936 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
1093
+ }
1094
+ #{greese.themed(".greese-Segment", Segment)}:has(:focus-visible) {
1095
+ --greese-shape-border: 3px;
1096
+ --greese-shape-ring: var(--greese-color-focus-ring);
1097
+ outline-color: transparent;
1098
+ }
1099
+ #{greese.themed(".greese-shape-bevel-indicator")}:focus-visible,
1100
+ #{greese.themed(".greese-Badge", Badge)}:focus-visible,
1101
+ #{greese.themed(".greese-SegmentedControl-track", SegmentedControl)}:focus-visible {
1102
+ --greese-shape-h: 0px;
1103
+ --greese-shape-bleed: 8px;
1104
+ transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
1105
+ }
1106
+ #{greese.themed(".greese-Chip", Chip)}:focus-visible {
1107
+ --greese-shape-h: 0px;
1108
+ --greese-shape-bleed: 8px;
1109
+ transition-delay: 0s, 0s, 0s, 0s, 0s, var(--greese-duration-normal);
1110
+ }
1111
+ #{greese.themed(".greese-shape-bevel-mark")},
1112
+ #{greese.themed(".greese-Status:not(.greese-Status--pulse)", Status)} {
1113
+ --greese-shape-border: 1px;
1114
+ --greese-shape-clip: polygon(50% calc(-1 * 1.147 * var(--greese-shape-bleed)), calc(100% + 2.04 * var(--greese-shape-bleed)) 50%, 50% calc(100% + 1.147 * var(--greese-shape-bleed)), calc(-1 * 2.04 * var(--greese-shape-bleed)) 50%);
1115
+ --greese-shape-ring-clip: polygon(evenodd, 50% 0, 100% 50%, 50% 100%, 0 50%, 50% 0, 50% calc(1.147 * var(--greese-shape-border)), calc(2.04 * var(--greese-shape-border)) 50%, 50% calc(100% - 1.147 * var(--greese-shape-border)), calc(100% - 2.04 * var(--greese-shape-border)) 50%, 50% calc(1.147 * var(--greese-shape-border)));
1116
+ }
1117
+ #{greese.themed(".greese-shape-bevel-mark")}:focus-visible {
1118
+ --greese-shape-border: 3px;
1119
+ --greese-shape-ring: var(--greese-color-focus-ring);
1120
+ outline-color: transparent;
1121
+ }
1122
+ #{greese.themed(".greese-shape-bevel-tab")},
1123
+ #{greese.themed(".greese-Tab", Tab)} {
1124
+ --greese-shape-c: 7px;
1125
+ --greese-shape-border: 1px;
1126
+ --greese-shape-clip: polygon(calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-c) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)));
1127
+ --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-c)) 0, calc(100% - var(--greese-shape-c)) 0, 100% calc(var(--greese-shape-c)), 100% 100%, 0 100%, 0 calc(var(--greese-shape-c)), calc(var(--greese-shape-c)) 0, calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-c) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
1128
+ }
1129
+ #{greese.themed(".greese-shape-bevel-tab")}:focus-visible {
1130
+ --greese-shape-c: 0px;
1131
+ --greese-shape-bleed: 8px;
1132
+ transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
1133
+ }
1134
+ #{greese.themed(".greese-shape-bevel-avatar")},
1135
+ #{greese.themed(".greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar)", Avatar)} {
1136
+ --greese-shape-border: 1px;
1137
+ --greese-shape-clip: polygon(calc(22% - 0.262 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(78% + 0.262 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(22% - 0.585 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(78% + 0.585 * var(--greese-shape-bleed)), calc(78% + 0.262 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(22% - 0.262 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(78% + 0.585 * var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(22% - 0.585 * var(--greese-shape-bleed)));
1138
+ --greese-shape-ring-clip: polygon(evenodd, 22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%, 22% 0, calc(22% + 0.262 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(22% + 0.585 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(78% - 0.585 * var(--greese-shape-border)), calc(22% + 0.262 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(78% - 0.262 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(78% - 0.585 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(22% + 0.585 * var(--greese-shape-border)), calc(78% - 0.262 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(22% + 0.262 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
1139
+ }
1140
+ #{greese.themed(".greese-shape-bevel-avatar")}:focus-visible {
1141
+ --greese-shape-border: 3px;
1142
+ --greese-shape-ring: var(--greese-color-focus-ring);
1143
+ outline-color: transparent;
1144
+ }
1145
+ #{greese.themed(".greese-shape-bevel-bubble")},
1146
+ #{greese.themed(".greese-ChatBubble-bubble", ChatBubble)} {
1147
+ --greese-shape-c: 8px;
1148
+ --greese-shape-border: 1px;
1149
+ --greese-shape-clip: polygon(calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-c) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% - var(--greese-shape-c) + 0.414 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-c) + 0.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 11px - 2.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% - 11px - 0.414 * var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)));
1150
+ --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-c)) 0, calc(100% - var(--greese-shape-c)) 0, 100% calc(var(--greese-shape-c)), 100% calc(100% - var(--greese-shape-c)), calc(100% - var(--greese-shape-c)) 100%, calc(-1 * 11px) 100%, 0 calc(100% - 11px), 0 calc(var(--greese-shape-c)), calc(var(--greese-shape-c)) 0, calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - 11px + 0.414 * var(--greese-shape-border)), calc(-1 * 11px + 2.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-c) - 0.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-c) - 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-c) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
1151
+ }
1152
+ #{greese.themed(".greese-shape-bevel-bubble")}:dir(rtl),
1153
+ #{greese.themed(".greese-ChatBubble-bubble", ChatBubble)}:dir(rtl),
1154
+ .greese-ChatBubble--end #{greese.themed(".greese-ChatBubble-bubble", ChatBubble)} {
1155
+ --greese-shape-clip: polygon(calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% - 11px - 0.414 * var(--greese-shape-bleed)), calc(100% + 11px + 2.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% - var(--greese-shape-c) + 0.414 * var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)), calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-c) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
1156
+ --greese-shape-ring-clip: polygon(evenodd, 100% calc(var(--greese-shape-c)), 100% calc(100% - 11px), calc(100% + 11px) 100%, calc(var(--greese-shape-c)) 100%, 0 calc(100% - var(--greese-shape-c)), 0 calc(var(--greese-shape-c)), calc(var(--greese-shape-c)) 0, calc(100% - var(--greese-shape-c)) 0, 100% calc(var(--greese-shape-c)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-c) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-c) - 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% + 11px - 2.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - 11px + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)));
1157
+ }
1158
+ .greese-ChatBubble--end #{greese.themed(".greese-ChatBubble-bubble", ChatBubble)}:dir(rtl) {
1159
+ --greese-shape-clip: polygon(calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-c) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% - var(--greese-shape-c) + 0.414 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-c) + 0.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 11px - 2.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% - 11px - 0.414 * var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)));
1160
+ --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-c)) 0, calc(100% - var(--greese-shape-c)) 0, 100% calc(var(--greese-shape-c)), 100% calc(100% - var(--greese-shape-c)), calc(100% - var(--greese-shape-c)) 100%, calc(-1 * 11px) 100%, 0 calc(100% - 11px), 0 calc(var(--greese-shape-c)), calc(var(--greese-shape-c)) 0, calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - 11px + 0.414 * var(--greese-shape-border)), calc(-1 * 11px + 2.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-c) - 0.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-c) - 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-c) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
1161
+ }
1162
+ #{greese.themed(".greese-shape-bevel-bubble")}:focus-visible {
1163
+ --greese-shape-border: 3px;
1164
+ --greese-shape-ring: var(--greese-color-focus-ring);
1165
+ outline-color: transparent;
1036
1166
  }
1037
- }
1038
- .greese-shape-bevel-container:focus-visible,
1039
- .greese-AccordionItem > .greese-Collapsible-content:focus-visible,
1040
- .greese-Card:focus-visible,
1041
- .greese-Tile:focus-visible {
1042
- --greese-shape-a: 0px;
1043
- --greese-shape-b: 0px;
1044
- --greese-shape-bleed: 8px;
1045
- transition-delay: 0s, 0s, 0s, 0s, var(--greese-duration-normal);
1046
- }
1047
- .greese-Dialog:focus-visible,
1048
- .greese-Menu:focus-visible,
1049
- .greese-Popover:focus-visible,
1050
- .greese-Toast:focus-visible {
1051
- --greese-shape-a: 0px;
1052
- --greese-shape-b: 0px;
1053
- --greese-shape-bleed: 8px;
1054
- }
1055
- .greese-shape-bevel-small,
1056
- .greese-Alert,
1057
- .greese-Collapsible-trigger,
1058
- .greese-Tooltip {
1059
- --greese-shape-a: 8px;
1060
- --greese-shape-b: 0px;
1061
- --greese-shape-border: 1px;
1062
- --greese-shape-clip: polygon(calc(var(--greese-shape-a) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-b) + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-b) - var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% - var(--greese-shape-a) + 0.414 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-a) + 0.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-b) - var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% - var(--greese-shape-b) + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-a) - 0.414 * var(--greese-shape-bleed)));
1063
- --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-a)) 0, calc(100% - var(--greese-shape-b)) 0, 100% calc(var(--greese-shape-b)), 100% calc(100% - var(--greese-shape-a)), calc(100% - var(--greese-shape-a)) 100%, calc(var(--greese-shape-b)) 100%, 0 calc(100% - var(--greese-shape-b)), 0 calc(var(--greese-shape-a)), calc(var(--greese-shape-a)) 0, calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-b) - var(--greese-shape-border)), calc(var(--greese-shape-b) + var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-a) - 0.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-a) - 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-b) + var(--greese-shape-border)), calc(100% - var(--greese-shape-b) - var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-a) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
1064
- }
1065
- .greese-shape-bevel-small:focus-visible,
1066
- .greese-Alert:focus-visible {
1067
- --greese-shape-a: 0px;
1068
- --greese-shape-b: 0px;
1069
- --greese-shape-bleed: 8px;
1070
- transition-delay: 0s, 0s, 0s, 0s, var(--greese-duration-normal);
1071
- }
1072
- .greese-Collapsible-trigger:focus-visible {
1073
- --greese-shape-a: 0px;
1074
- --greese-shape-b: 0px;
1075
- --greese-shape-bleed: 8px;
1076
- transition-delay: 0s, 0s, 0s, 0s, 0s, var(--greese-duration-normal);
1077
- }
1078
- .greese-Tooltip:focus-visible {
1079
- --greese-shape-a: 0px;
1080
- --greese-shape-b: 0px;
1081
- --greese-shape-bleed: 8px;
1082
- }
1083
- .greese-shape-bevel-indicator,
1084
- .greese-Badge,
1085
- .greese-Chip,
1086
- .greese-Segment,
1087
- .greese-SegmentedControl-track {
1088
- --greese-shape-h: 6px;
1089
- --greese-shape-border: 1px;
1090
- --greese-shape-clip: polygon(calc(var(--greese-shape-h) - 0.936 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-h) + 0.936 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + 1.002 * var(--greese-shape-bleed)) 50%, calc(100% - var(--greese-shape-h) + 0.936 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-h) - 0.936 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 1.002 * var(--greese-shape-bleed)) 50%);
1091
- --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-h)) 0, calc(100% - var(--greese-shape-h)) 0, 100% 50%, calc(100% - var(--greese-shape-h)) 100%, calc(var(--greese-shape-h)) 100%, 0 50%, calc(var(--greese-shape-h)) 0, calc(var(--greese-shape-h) + 0.936 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(1.002 * var(--greese-shape-border)) 50%, calc(var(--greese-shape-h) + 0.936 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-h) - 0.936 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - 1.002 * var(--greese-shape-border)) 50%, calc(100% - var(--greese-shape-h) - 0.936 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-h) + 0.936 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
1092
- }
1093
- .greese-Segment:has(:focus-visible) {
1094
- --greese-shape-border: 3px;
1095
- --greese-shape-ring: var(--greese-color-focus-ring);
1096
- outline-color: transparent;
1097
- }
1098
- .greese-shape-bevel-indicator:focus-visible,
1099
- .greese-Badge:focus-visible,
1100
- .greese-SegmentedControl-track:focus-visible {
1101
- --greese-shape-h: 0px;
1102
- --greese-shape-bleed: 8px;
1103
- transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
1104
- }
1105
- .greese-Chip:focus-visible {
1106
- --greese-shape-h: 0px;
1107
- --greese-shape-bleed: 8px;
1108
- transition-delay: 0s, 0s, 0s, 0s, 0s, var(--greese-duration-normal);
1109
- }
1110
- .greese-shape-bevel-mark,
1111
- .greese-Status:not(.greese-Status--pulse) {
1112
- --greese-shape-border: 1px;
1113
- --greese-shape-clip: polygon(50% calc(-1 * 1.147 * var(--greese-shape-bleed)), calc(100% + 2.04 * var(--greese-shape-bleed)) 50%, 50% calc(100% + 1.147 * var(--greese-shape-bleed)), calc(-1 * 2.04 * var(--greese-shape-bleed)) 50%);
1114
- --greese-shape-ring-clip: polygon(evenodd, 50% 0, 100% 50%, 50% 100%, 0 50%, 50% 0, 50% calc(1.147 * var(--greese-shape-border)), calc(2.04 * var(--greese-shape-border)) 50%, 50% calc(100% - 1.147 * var(--greese-shape-border)), calc(100% - 2.04 * var(--greese-shape-border)) 50%, 50% calc(1.147 * var(--greese-shape-border)));
1115
- }
1116
- .greese-shape-bevel-mark:focus-visible {
1117
- --greese-shape-border: 3px;
1118
- --greese-shape-ring: var(--greese-color-focus-ring);
1119
- outline-color: transparent;
1120
- }
1121
- .greese-shape-bevel-tab,
1122
- .greese-Tab {
1123
- --greese-shape-c: 7px;
1124
- --greese-shape-border: 1px;
1125
- --greese-shape-clip: polygon(calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-c) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)));
1126
- --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-c)) 0, calc(100% - var(--greese-shape-c)) 0, 100% calc(var(--greese-shape-c)), 100% 100%, 0 100%, 0 calc(var(--greese-shape-c)), calc(var(--greese-shape-c)) 0, calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-c) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
1127
- }
1128
- .greese-shape-bevel-tab:focus-visible {
1129
- --greese-shape-c: 0px;
1130
- --greese-shape-bleed: 8px;
1131
- transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
1132
- }
1133
- .greese-shape-bevel-avatar,
1134
- .greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar) {
1135
- --greese-shape-border: 1px;
1136
- --greese-shape-clip: polygon(calc(22% - 0.262 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(78% + 0.262 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(22% - 0.585 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(78% + 0.585 * var(--greese-shape-bleed)), calc(78% + 0.262 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(22% - 0.262 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(78% + 0.585 * var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(22% - 0.585 * var(--greese-shape-bleed)));
1137
- --greese-shape-ring-clip: polygon(evenodd, 22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%, 22% 0, calc(22% + 0.262 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(22% + 0.585 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(78% - 0.585 * var(--greese-shape-border)), calc(22% + 0.262 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(78% - 0.262 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(78% - 0.585 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(22% + 0.585 * var(--greese-shape-border)), calc(78% - 0.262 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(22% + 0.262 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
1138
- }
1139
- .greese-shape-bevel-avatar:focus-visible {
1140
- --greese-shape-border: 3px;
1141
- --greese-shape-ring: var(--greese-color-focus-ring);
1142
- outline-color: transparent;
1143
- }
1144
- .greese-shape-bevel-bubble,
1145
- .greese-ChatBubble-bubble {
1146
- --greese-shape-c: 8px;
1147
- --greese-shape-border: 1px;
1148
- --greese-shape-clip: polygon(calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-c) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% - var(--greese-shape-c) + 0.414 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-c) + 0.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 11px - 2.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% - 11px - 0.414 * var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)));
1149
- --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-c)) 0, calc(100% - var(--greese-shape-c)) 0, 100% calc(var(--greese-shape-c)), 100% calc(100% - var(--greese-shape-c)), calc(100% - var(--greese-shape-c)) 100%, calc(-1 * 11px) 100%, 0 calc(100% - 11px), 0 calc(var(--greese-shape-c)), calc(var(--greese-shape-c)) 0, calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - 11px + 0.414 * var(--greese-shape-border)), calc(-1 * 11px + 2.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-c) - 0.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-c) - 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-c) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
1150
- }
1151
- .greese-shape-bevel-bubble:dir(rtl),
1152
- .greese-ChatBubble-bubble:dir(rtl),
1153
- .greese-ChatBubble--end .greese-ChatBubble-bubble {
1154
- --greese-shape-clip: polygon(calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% - 11px - 0.414 * var(--greese-shape-bleed)), calc(100% + 11px + 2.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% - var(--greese-shape-c) + 0.414 * var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)), calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-c) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
1155
- --greese-shape-ring-clip: polygon(evenodd, 100% calc(var(--greese-shape-c)), 100% calc(100% - 11px), calc(100% + 11px) 100%, calc(var(--greese-shape-c)) 100%, 0 calc(100% - var(--greese-shape-c)), 0 calc(var(--greese-shape-c)), calc(var(--greese-shape-c)) 0, calc(100% - var(--greese-shape-c)) 0, 100% calc(var(--greese-shape-c)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-c) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-c) - 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% + 11px - 2.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - 11px + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)));
1156
- }
1157
- .greese-ChatBubble--end .greese-ChatBubble-bubble:dir(rtl) {
1158
- --greese-shape-clip: polygon(calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-c) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% - var(--greese-shape-c) + 0.414 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-c) + 0.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 11px - 2.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% - 11px - 0.414 * var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-c) - 0.414 * var(--greese-shape-bleed)));
1159
- --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-c)) 0, calc(100% - var(--greese-shape-c)) 0, 100% calc(var(--greese-shape-c)), 100% calc(100% - var(--greese-shape-c)), calc(100% - var(--greese-shape-c)) 100%, calc(-1 * 11px) 100%, 0 calc(100% - 11px), 0 calc(var(--greese-shape-c)), calc(var(--greese-shape-c)) 0, calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - 11px + 0.414 * var(--greese-shape-border)), calc(-1 * 11px + 2.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-c) - 0.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-c) - 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-c) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-c) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
1160
- }
1161
- .greese-shape-bevel-bubble:focus-visible {
1162
- --greese-shape-border: 3px;
1163
- --greese-shape-ring: var(--greese-color-focus-ring);
1164
- outline-color: transparent;
1165
1167
  }
1166
1168
  }