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