@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/folio.scss CHANGED
@@ -118,930 +118,932 @@
118
118
  }
119
119
  @layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;
120
120
  @layer greese.overrides {
121
- .greese-shape-folio-control,
122
- .greese-shape-folio-indicator {
123
- --greese-shape-ring: var(--greese-color-border);
124
- position: relative;
125
- isolation: isolate;
126
- border-color: transparent;
127
- clip-path: var(--greese-shape-clip) padding-box;
128
- }
129
- .greese-shape-folio-control::after,
130
- .greese-shape-folio-indicator::after {
131
- position: absolute;
132
- inset: 0;
133
- inline-size: auto;
134
- block-size: auto;
135
- translate: none;
136
- z-index: 1;
137
- pointer-events: none;
138
- content: '';
139
- background: var(--greese-shape-ring);
140
- clip-path: var(--greese-shape-ring-clip);
141
- }
142
- @media (prefers-reduced-motion: no-preference) {
143
- .greese-shape-folio-control,
144
- .greese-shape-folio-indicator {
145
- transition: --greese-shape-s var(--greese-duration-normal) var(--greese-easing-standard),
146
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
147
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
148
- --greese-shape-bleed 0s linear;
121
+ @include greese.scope(null) {
122
+ #{greese.themed(".greese-shape-folio-control")},
123
+ #{greese.themed(".greese-shape-folio-indicator")} {
124
+ --greese-shape-ring: var(--greese-color-border);
125
+ position: relative;
126
+ isolation: isolate;
127
+ border-color: transparent;
128
+ clip-path: var(--greese-shape-clip) padding-box;
149
129
  }
150
- }
151
- @media (forced-colors: active) {
152
- .greese-shape-folio-control,
153
- .greese-shape-folio-indicator {
154
- clip-path: none;
155
- border-color: CanvasText;
130
+ #{greese.themed(".greese-shape-folio-control")}::after,
131
+ #{greese.themed(".greese-shape-folio-indicator")}::after {
132
+ position: absolute;
133
+ inset: 0;
134
+ inline-size: auto;
135
+ block-size: auto;
136
+ translate: none;
137
+ z-index: 1;
138
+ pointer-events: none;
139
+ content: '';
140
+ background: var(--greese-shape-ring);
141
+ clip-path: var(--greese-shape-ring-clip);
156
142
  }
157
- .greese-shape-folio-control::after,
158
- .greese-shape-folio-indicator::after {
159
- display: none;
143
+ @media (prefers-reduced-motion: no-preference) {
144
+ #{greese.themed(".greese-shape-folio-control")},
145
+ #{greese.themed(".greese-shape-folio-indicator")} {
146
+ transition: --greese-shape-s var(--greese-duration-normal) var(--greese-easing-standard),
147
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
148
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
149
+ --greese-shape-bleed 0s linear;
150
+ }
160
151
  }
161
- }
162
- .greese-shape-folio-field,
163
- .greese-shape-folio-container,
164
- .greese-shape-folio-small,
165
- .greese-shape-folio-mark,
166
- .greese-shape-folio-dot,
167
- .greese-shape-folio-bubble {
168
- --greese-shape-ring: var(--greese-color-border);
169
- position: relative;
170
- isolation: isolate;
171
- border-color: transparent;
172
- clip-path: var(--greese-shape-clip) padding-box;
173
- }
174
- .greese-shape-folio-field::after,
175
- .greese-shape-folio-container::after,
176
- .greese-shape-folio-small::after,
177
- .greese-shape-folio-mark::after,
178
- .greese-shape-folio-dot::after,
179
- .greese-shape-folio-bubble::after {
180
- position: absolute;
181
- inset: 0;
182
- inline-size: auto;
183
- block-size: auto;
184
- translate: none;
185
- z-index: 1;
186
- pointer-events: none;
187
- content: '';
188
- background: var(--greese-shape-ring);
189
- clip-path: var(--greese-shape-ring-clip);
190
- }
191
- @media (prefers-reduced-motion: no-preference) {
192
- .greese-shape-folio-field,
193
- .greese-shape-folio-container,
194
- .greese-shape-folio-small,
195
- .greese-shape-folio-mark,
196
- .greese-shape-folio-dot,
197
- .greese-shape-folio-bubble {
198
- transition: --greese-shape-f var(--greese-duration-normal) var(--greese-easing-standard),
199
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
200
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
201
- --greese-shape-bleed 0s linear;
152
+ @media (forced-colors: active) {
153
+ #{greese.themed(".greese-shape-folio-control")},
154
+ #{greese.themed(".greese-shape-folio-indicator")} {
155
+ clip-path: none;
156
+ border-color: CanvasText;
157
+ }
158
+ #{greese.themed(".greese-shape-folio-control")}::after,
159
+ #{greese.themed(".greese-shape-folio-indicator")}::after {
160
+ display: none;
161
+ }
202
162
  }
203
- }
204
- @media (forced-colors: active) {
205
- .greese-shape-folio-field,
206
- .greese-shape-folio-container,
207
- .greese-shape-folio-small,
208
- .greese-shape-folio-mark,
209
- .greese-shape-folio-dot,
210
- .greese-shape-folio-bubble {
211
- clip-path: none;
212
- border-color: CanvasText;
213
- }
214
- .greese-shape-folio-field::after,
215
- .greese-shape-folio-container::after,
216
- .greese-shape-folio-small::after,
217
- .greese-shape-folio-mark::after,
218
- .greese-shape-folio-dot::after,
219
- .greese-shape-folio-bubble::after {
220
- display: none;
163
+ #{greese.themed(".greese-shape-folio-field")},
164
+ #{greese.themed(".greese-shape-folio-container")},
165
+ #{greese.themed(".greese-shape-folio-small")},
166
+ #{greese.themed(".greese-shape-folio-mark")},
167
+ #{greese.themed(".greese-shape-folio-dot")},
168
+ #{greese.themed(".greese-shape-folio-bubble")} {
169
+ --greese-shape-ring: var(--greese-color-border);
170
+ position: relative;
171
+ isolation: isolate;
172
+ border-color: transparent;
173
+ clip-path: var(--greese-shape-clip) padding-box;
221
174
  }
222
- }
223
- .greese-AccordionItem > .greese-Collapsible-content,
224
- .greese-Tile {
225
- --greese-shape-ring: var(--greese-color-border);
226
- position: relative;
227
- isolation: isolate;
228
- border-color: transparent;
229
- clip-path: var(--greese-shape-clip) padding-box;
230
- }
231
- .greese-AccordionItem > .greese-Collapsible-content::after,
232
- .greese-Tile::after {
233
- position: absolute;
234
- inset: 0;
235
- inline-size: auto;
236
- block-size: auto;
237
- translate: none;
238
- z-index: 1;
239
- pointer-events: none;
240
- content: '';
241
- background: var(--greese-shape-ring);
242
- clip-path: var(--greese-shape-ring-clip);
243
- }
244
- @media (prefers-reduced-motion: no-preference) {
245
- .greese-AccordionItem > .greese-Collapsible-content,
246
- .greese-Tile {
247
- transition: --greese-shape-f var(--greese-duration-normal) var(--greese-easing-standard),
248
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
249
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
250
- --greese-shape-bleed 0s linear;
175
+ #{greese.themed(".greese-shape-folio-field")}::after,
176
+ #{greese.themed(".greese-shape-folio-container")}::after,
177
+ #{greese.themed(".greese-shape-folio-small")}::after,
178
+ #{greese.themed(".greese-shape-folio-mark")}::after,
179
+ #{greese.themed(".greese-shape-folio-dot")}::after,
180
+ #{greese.themed(".greese-shape-folio-bubble")}::after {
181
+ position: absolute;
182
+ inset: 0;
183
+ inline-size: auto;
184
+ block-size: auto;
185
+ translate: none;
186
+ z-index: 1;
187
+ pointer-events: none;
188
+ content: '';
189
+ background: var(--greese-shape-ring);
190
+ clip-path: var(--greese-shape-ring-clip);
251
191
  }
252
- }
253
- @media (forced-colors: active) {
254
- .greese-AccordionItem > .greese-Collapsible-content,
255
- .greese-Tile {
256
- clip-path: none;
257
- border-color: CanvasText;
192
+ @media (prefers-reduced-motion: no-preference) {
193
+ #{greese.themed(".greese-shape-folio-field")},
194
+ #{greese.themed(".greese-shape-folio-container")},
195
+ #{greese.themed(".greese-shape-folio-small")},
196
+ #{greese.themed(".greese-shape-folio-mark")},
197
+ #{greese.themed(".greese-shape-folio-dot")},
198
+ #{greese.themed(".greese-shape-folio-bubble")} {
199
+ transition: --greese-shape-f var(--greese-duration-normal) var(--greese-easing-standard),
200
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
201
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
202
+ --greese-shape-bleed 0s linear;
203
+ }
258
204
  }
259
- .greese-AccordionItem > .greese-Collapsible-content::after,
260
- .greese-Tile::after {
261
- display: none;
205
+ @media (forced-colors: active) {
206
+ #{greese.themed(".greese-shape-folio-field")},
207
+ #{greese.themed(".greese-shape-folio-container")},
208
+ #{greese.themed(".greese-shape-folio-small")},
209
+ #{greese.themed(".greese-shape-folio-mark")},
210
+ #{greese.themed(".greese-shape-folio-dot")},
211
+ #{greese.themed(".greese-shape-folio-bubble")} {
212
+ clip-path: none;
213
+ border-color: CanvasText;
214
+ }
215
+ #{greese.themed(".greese-shape-folio-field")}::after,
216
+ #{greese.themed(".greese-shape-folio-container")}::after,
217
+ #{greese.themed(".greese-shape-folio-small")}::after,
218
+ #{greese.themed(".greese-shape-folio-mark")}::after,
219
+ #{greese.themed(".greese-shape-folio-dot")}::after,
220
+ #{greese.themed(".greese-shape-folio-bubble")}::after {
221
+ display: none;
222
+ }
262
223
  }
263
- }
264
- .greese-Alert {
265
- --greese-shape-ring: color-mix(in oklab, var(--greese-alert-tone) 30%, transparent);
266
- position: relative;
267
- isolation: isolate;
268
- border-color: transparent;
269
- clip-path: var(--greese-shape-clip) padding-box;
270
- }
271
- .greese-Alert::after {
272
- position: absolute;
273
- inset: 0;
274
- inline-size: auto;
275
- block-size: auto;
276
- translate: none;
277
- z-index: 1;
278
- pointer-events: none;
279
- content: '';
280
- background: var(--greese-shape-ring);
281
- clip-path: var(--greese-shape-ring-clip);
282
- }
283
- @media (prefers-reduced-motion: no-preference) {
284
- .greese-Alert {
285
- transition: --greese-shape-f var(--greese-duration-normal) var(--greese-easing-standard),
286
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
287
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
288
- --greese-shape-bleed 0s linear;
224
+ #{greese.themed(".greese-AccordionItem > .greese-Collapsible-content", AccordionItem)},
225
+ #{greese.themed(".greese-Tile", Tile)} {
226
+ --greese-shape-ring: var(--greese-color-border);
227
+ position: relative;
228
+ isolation: isolate;
229
+ border-color: transparent;
230
+ clip-path: var(--greese-shape-clip) padding-box;
289
231
  }
290
- }
291
- @media (forced-colors: active) {
292
- .greese-Alert {
293
- clip-path: none;
294
- border-color: CanvasText;
232
+ #{greese.themed(".greese-AccordionItem > .greese-Collapsible-content", AccordionItem)}::after,
233
+ #{greese.themed(".greese-Tile", Tile)}::after {
234
+ position: absolute;
235
+ inset: 0;
236
+ inline-size: auto;
237
+ block-size: auto;
238
+ translate: none;
239
+ z-index: 1;
240
+ pointer-events: none;
241
+ content: '';
242
+ background: var(--greese-shape-ring);
243
+ clip-path: var(--greese-shape-ring-clip);
295
244
  }
296
- .greese-Alert::after {
297
- display: none;
245
+ @media (prefers-reduced-motion: no-preference) {
246
+ #{greese.themed(".greese-AccordionItem > .greese-Collapsible-content", AccordionItem)},
247
+ #{greese.themed(".greese-Tile", Tile)} {
248
+ transition: --greese-shape-f var(--greese-duration-normal) var(--greese-easing-standard),
249
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
250
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
251
+ --greese-shape-bleed 0s linear;
252
+ }
298
253
  }
299
- }
300
- .greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar),
301
- .greese-ChatBubble-bubble,
302
- .greese-Status:not(.greese-Status--pulse) {
303
- clip-path: var(--greese-shape-clip) border-box;
304
- }
305
- @media (forced-colors: active) {
306
- .greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar),
307
- .greese-ChatBubble-bubble,
308
- .greese-Status:not(.greese-Status--pulse) {
309
- clip-path: none;
254
+ @media (forced-colors: active) {
255
+ #{greese.themed(".greese-AccordionItem > .greese-Collapsible-content", AccordionItem)},
256
+ #{greese.themed(".greese-Tile", Tile)} {
257
+ clip-path: none;
258
+ border-color: CanvasText;
259
+ }
260
+ #{greese.themed(".greese-AccordionItem > .greese-Collapsible-content", AccordionItem)}::after,
261
+ #{greese.themed(".greese-Tile", Tile)}::after {
262
+ display: none;
263
+ }
310
264
  }
311
- }
312
- .greese-Badge {
313
- --greese-shape-ring: color-mix(in oklab, var(--greese-badge-tone) 35%, transparent);
314
- position: relative;
315
- isolation: isolate;
316
- border-color: transparent;
317
- clip-path: var(--greese-shape-clip) padding-box;
318
- }
319
- .greese-Badge::after {
320
- position: absolute;
321
- inset: 0;
322
- inline-size: auto;
323
- block-size: auto;
324
- translate: none;
325
- z-index: 1;
326
- pointer-events: none;
327
- content: '';
328
- background: var(--greese-shape-ring);
329
- clip-path: var(--greese-shape-ring-clip);
330
- }
331
- @media (prefers-reduced-motion: no-preference) {
332
- .greese-Badge {
333
- transition: --greese-shape-s var(--greese-duration-normal) var(--greese-easing-standard),
334
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
335
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
336
- --greese-shape-bleed 0s linear;
265
+ #{greese.themed(".greese-Alert", Alert)} {
266
+ --greese-shape-ring: color-mix(in oklab, var(--greese-alert-tone) 30%, transparent);
267
+ position: relative;
268
+ isolation: isolate;
269
+ border-color: transparent;
270
+ clip-path: var(--greese-shape-clip) padding-box;
337
271
  }
338
- }
339
- @media (forced-colors: active) {
340
- .greese-Badge {
341
- clip-path: none;
342
- border-color: CanvasText;
272
+ #{greese.themed(".greese-Alert", Alert)}::after {
273
+ position: absolute;
274
+ inset: 0;
275
+ inline-size: auto;
276
+ block-size: auto;
277
+ translate: none;
278
+ z-index: 1;
279
+ pointer-events: none;
280
+ content: '';
281
+ background: var(--greese-shape-ring);
282
+ clip-path: var(--greese-shape-ring-clip);
343
283
  }
344
- .greese-Badge::after {
345
- display: none;
284
+ @media (prefers-reduced-motion: no-preference) {
285
+ #{greese.themed(".greese-Alert", Alert)} {
286
+ transition: --greese-shape-f var(--greese-duration-normal) var(--greese-easing-standard),
287
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
288
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
289
+ --greese-shape-bleed 0s linear;
290
+ }
346
291
  }
347
- }
348
- .greese-Button {
349
- --greese-shape-ring: var(--greese-button-border, transparent);
350
- position: relative;
351
- isolation: isolate;
352
- border-color: transparent;
353
- clip-path: var(--greese-shape-clip) padding-box;
354
- }
355
- .greese-Button::after {
356
- position: absolute;
357
- inset: 0;
358
- inline-size: auto;
359
- block-size: auto;
360
- translate: none;
361
- z-index: 1;
362
- pointer-events: none;
363
- content: '';
364
- background: var(--greese-shape-ring);
365
- clip-path: var(--greese-shape-ring-clip);
366
- }
367
- @media (prefers-reduced-motion: no-preference) {
368
- .greese-Button {
369
- transition: background-color var(--greese-duration-fast) var(--greese-easing-standard),
370
- border-color var(--greese-duration-fast) var(--greese-easing-standard),
371
- color var(--greese-duration-fast) var(--greese-easing-standard),
372
- --greese-shape-s var(--greese-duration-normal) var(--greese-easing-standard),
373
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
374
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
375
- --greese-shape-bleed 0s linear;
292
+ @media (forced-colors: active) {
293
+ #{greese.themed(".greese-Alert", Alert)} {
294
+ clip-path: none;
295
+ border-color: CanvasText;
296
+ }
297
+ #{greese.themed(".greese-Alert", Alert)}::after {
298
+ display: none;
299
+ }
376
300
  }
377
- }
378
- @media (forced-colors: active) {
379
- .greese-Button {
380
- clip-path: none;
381
- border-color: CanvasText;
301
+ #{greese.themed(".greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar)", Avatar)},
302
+ #{greese.themed(".greese-ChatBubble-bubble", ChatBubble)},
303
+ #{greese.themed(".greese-Status:not(.greese-Status--pulse)", Status)} {
304
+ clip-path: var(--greese-shape-clip) border-box;
382
305
  }
383
- .greese-Button::after {
384
- display: none;
306
+ @media (forced-colors: active) {
307
+ #{greese.themed(".greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar)", Avatar)},
308
+ #{greese.themed(".greese-ChatBubble-bubble", ChatBubble)},
309
+ #{greese.themed(".greese-Status:not(.greese-Status--pulse)", Status)} {
310
+ clip-path: none;
311
+ }
385
312
  }
386
- }
387
- .greese-Card {
388
- --greese-shape-ring: transparent;
389
- position: relative;
390
- isolation: isolate;
391
- border-color: transparent;
392
- clip-path: var(--greese-shape-clip) padding-box;
393
- }
394
- .greese-Card::after {
395
- position: absolute;
396
- inset: 0;
397
- inline-size: auto;
398
- block-size: auto;
399
- translate: none;
400
- z-index: 1;
401
- pointer-events: none;
402
- content: '';
403
- background: var(--greese-shape-ring);
404
- clip-path: var(--greese-shape-ring-clip);
405
- }
406
- .greese-Card.greese-Card--outline {
407
- --greese-shape-ring: var(--greese-color-border);
408
- }
409
- .greese-Card.greese-Card--elevated {
410
- --greese-shape-ring: var(--greese-color-border-strong);
411
- }
412
- @media (prefers-reduced-motion: no-preference) {
413
- .greese-Card {
414
- transition: --greese-shape-f var(--greese-duration-normal) var(--greese-easing-standard),
415
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
416
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
417
- --greese-shape-bleed 0s linear;
418
- }
419
- .greese-Card.greese-Card--interactive {
420
- transition: --greese-shape-f var(--greese-duration-normal) var(--greese-easing-standard),
421
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
422
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
423
- --greese-shape-bleed 0s linear,
424
- box-shadow var(--greese-duration-normal) var(--greese-easing-standard),
425
- border-color var(--greese-duration-normal) var(--greese-easing-standard),
426
- translate var(--greese-duration-normal) var(--greese-easing-standard);
313
+ #{greese.themed(".greese-Badge", Badge)} {
314
+ --greese-shape-ring: color-mix(in oklab, var(--greese-badge-tone) 35%, transparent);
315
+ position: relative;
316
+ isolation: isolate;
317
+ border-color: transparent;
318
+ clip-path: var(--greese-shape-clip) padding-box;
427
319
  }
428
- }
429
- @media (forced-colors: active) {
430
- .greese-Card {
431
- clip-path: none;
432
- border-color: CanvasText;
320
+ #{greese.themed(".greese-Badge", Badge)}::after {
321
+ position: absolute;
322
+ inset: 0;
323
+ inline-size: auto;
324
+ block-size: auto;
325
+ translate: none;
326
+ z-index: 1;
327
+ pointer-events: none;
328
+ content: '';
329
+ background: var(--greese-shape-ring);
330
+ clip-path: var(--greese-shape-ring-clip);
433
331
  }
434
- .greese-Card::after {
435
- display: none;
332
+ @media (prefers-reduced-motion: no-preference) {
333
+ #{greese.themed(".greese-Badge", Badge)} {
334
+ transition: --greese-shape-s var(--greese-duration-normal) var(--greese-easing-standard),
335
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
336
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
337
+ --greese-shape-bleed 0s linear;
338
+ }
436
339
  }
437
- }
438
- .greese-Chip {
439
- --greese-shape-ring: var(--greese-color-border);
440
- position: relative;
441
- isolation: isolate;
442
- border-color: transparent;
443
- clip-path: var(--greese-shape-clip) padding-box;
444
- }
445
- .greese-Chip::after {
446
- position: absolute;
447
- inset: 0;
448
- inline-size: auto;
449
- block-size: auto;
450
- translate: none;
451
- z-index: 1;
452
- pointer-events: none;
453
- content: '';
454
- background: var(--greese-shape-ring);
455
- clip-path: var(--greese-shape-ring-clip);
456
- }
457
- @media (prefers-reduced-motion: no-preference) {
458
- .greese-Chip {
459
- transition: background-color var(--greese-duration-fast) var(--greese-easing-standard),
460
- color var(--greese-duration-fast) var(--greese-easing-standard),
461
- --greese-shape-s var(--greese-duration-normal) var(--greese-easing-standard),
462
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
463
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
464
- --greese-shape-bleed 0s linear;
340
+ @media (forced-colors: active) {
341
+ #{greese.themed(".greese-Badge", Badge)} {
342
+ clip-path: none;
343
+ border-color: CanvasText;
344
+ }
345
+ #{greese.themed(".greese-Badge", Badge)}::after {
346
+ display: none;
347
+ }
465
348
  }
466
- }
467
- @media (forced-colors: active) {
468
- .greese-Chip {
469
- clip-path: none;
470
- border-color: CanvasText;
349
+ #{greese.themed(".greese-Button", Button)} {
350
+ --greese-shape-ring: var(--greese-button-border, transparent);
351
+ position: relative;
352
+ isolation: isolate;
353
+ border-color: transparent;
354
+ clip-path: var(--greese-shape-clip) padding-box;
471
355
  }
472
- .greese-Chip::after {
473
- display: none;
356
+ #{greese.themed(".greese-Button", Button)}::after {
357
+ position: absolute;
358
+ inset: 0;
359
+ inline-size: auto;
360
+ block-size: auto;
361
+ translate: none;
362
+ z-index: 1;
363
+ pointer-events: none;
364
+ content: '';
365
+ background: var(--greese-shape-ring);
366
+ clip-path: var(--greese-shape-ring-clip);
474
367
  }
475
- }
476
- .greese-Collapsible-trigger {
477
- --greese-shape-ring: var(--greese-collapsible-border, var(--greese-color-border));
478
- position: relative;
479
- isolation: isolate;
480
- border-color: transparent;
481
- clip-path: var(--greese-shape-clip) padding-box;
482
- }
483
- .greese-Collapsible-trigger::after {
484
- position: absolute;
485
- inset: 0;
486
- inline-size: auto;
487
- block-size: auto;
488
- translate: none;
489
- z-index: 1;
490
- pointer-events: none;
491
- content: '';
492
- background: var(--greese-shape-ring);
493
- clip-path: var(--greese-shape-ring-clip);
494
- }
495
- @media (prefers-reduced-motion: no-preference) {
496
- .greese-Collapsible-trigger {
497
- transition: background-color var(--greese-duration-fast) var(--greese-easing-standard),
498
- --greese-shape-f var(--greese-duration-normal) var(--greese-easing-standard),
499
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
500
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
501
- --greese-shape-bleed 0s linear;
368
+ @media (prefers-reduced-motion: no-preference) {
369
+ #{greese.themed(".greese-Button", Button)} {
370
+ transition: background-color var(--greese-duration-fast) var(--greese-easing-standard),
371
+ border-color var(--greese-duration-fast) var(--greese-easing-standard),
372
+ color var(--greese-duration-fast) var(--greese-easing-standard),
373
+ --greese-shape-s var(--greese-duration-normal) var(--greese-easing-standard),
374
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
375
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
376
+ --greese-shape-bleed 0s linear;
377
+ }
502
378
  }
503
- }
504
- @media (forced-colors: active) {
505
- .greese-Collapsible-trigger {
506
- clip-path: none;
507
- border-color: CanvasText;
379
+ @media (forced-colors: active) {
380
+ #{greese.themed(".greese-Button", Button)} {
381
+ clip-path: none;
382
+ border-color: CanvasText;
383
+ }
384
+ #{greese.themed(".greese-Button", Button)}::after {
385
+ display: none;
386
+ }
508
387
  }
509
- .greese-Collapsible-trigger::after {
510
- display: none;
388
+ #{greese.themed(".greese-Card", Card)} {
389
+ --greese-shape-ring: transparent;
390
+ position: relative;
391
+ isolation: isolate;
392
+ border-color: transparent;
393
+ clip-path: var(--greese-shape-clip) padding-box;
511
394
  }
512
- }
513
- .greese-Dialog,
514
- .greese-Menu,
515
- .greese-Popover {
516
- --greese-shape-ring: var(--greese-color-border);
517
- isolation: isolate;
518
- border-color: transparent;
519
- clip-path: var(--greese-shape-clip) padding-box;
520
- }
521
- .greese-Dialog::after,
522
- .greese-Menu::after,
523
- .greese-Popover::after {
524
- position: absolute;
525
- inset: 0;
526
- inline-size: auto;
527
- block-size: auto;
528
- translate: none;
529
- z-index: 1;
530
- pointer-events: none;
531
- content: '';
532
- background: var(--greese-shape-ring);
533
- clip-path: var(--greese-shape-ring-clip);
534
- }
535
- @media (forced-colors: active) {
536
- .greese-Dialog,
537
- .greese-Menu,
538
- .greese-Popover {
539
- clip-path: none;
540
- border-color: CanvasText;
541
- }
542
- .greese-Dialog::after,
543
- .greese-Menu::after,
544
- .greese-Popover::after {
545
- display: none;
395
+ #{greese.themed(".greese-Card", Card)}::after {
396
+ position: absolute;
397
+ inset: 0;
398
+ inline-size: auto;
399
+ block-size: auto;
400
+ translate: none;
401
+ z-index: 1;
402
+ pointer-events: none;
403
+ content: '';
404
+ background: var(--greese-shape-ring);
405
+ clip-path: var(--greese-shape-ring-clip);
546
406
  }
547
- }
548
- .greese-Input,
549
- .greese-Select,
550
- .greese-Textarea {
551
- --greese-shape-ring: var(--greese-color-border-strong);
552
- position: relative;
553
- isolation: isolate;
554
- border-color: transparent;
555
- clip-path: var(--greese-shape-clip) padding-box;
556
- }
557
- .greese-Input::after,
558
- .greese-Select::after,
559
- .greese-Textarea::after {
560
- position: absolute;
561
- inset: 0;
562
- inline-size: auto;
563
- block-size: auto;
564
- translate: none;
565
- z-index: 1;
566
- pointer-events: none;
567
- content: '';
568
- background: var(--greese-shape-ring);
569
- clip-path: var(--greese-shape-ring-clip);
570
- }
571
- .greese-Input:hover,
572
- .greese-Select:hover,
573
- .greese-Textarea:hover {
574
- --greese-shape-ring: var(--greese-color-fg-muted);
575
- }
576
- .greese-Input[aria-invalid=true], .greese-Input[data-invalid],
577
- .greese-Select[aria-invalid=true], .greese-Select[data-invalid],
578
- .greese-Textarea[aria-invalid=true], .greese-Textarea[data-invalid] {
579
- --greese-shape-ring: var(--greese-color-negative);
580
- }
581
- @media (prefers-reduced-motion: no-preference) {
582
- .greese-Input,
583
- .greese-Select,
584
- .greese-Textarea {
585
- transition: box-shadow var(--greese-duration-fast) var(--greese-easing-standard),
586
- --greese-shape-f var(--greese-duration-normal) var(--greese-easing-standard),
587
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
588
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
589
- --greese-shape-bleed 0s linear;
407
+ #{greese.themed(".greese-Card", Card)}.greese-Card--outline {
408
+ --greese-shape-ring: var(--greese-color-border);
590
409
  }
591
- }
592
- @media (forced-colors: active) {
593
- .greese-Input,
594
- .greese-Select,
595
- .greese-Textarea {
596
- clip-path: none;
597
- border-color: CanvasText;
598
- }
599
- .greese-Input::after,
600
- .greese-Select::after,
601
- .greese-Textarea::after {
602
- display: none;
410
+ #{greese.themed(".greese-Card", Card)}.greese-Card--elevated {
411
+ --greese-shape-ring: var(--greese-color-border-strong);
603
412
  }
604
- }
605
- .greese-OtpField-slot {
606
- --greese-shape-ring: var(--greese-color-border-strong);
607
- position: relative;
608
- isolation: isolate;
609
- border-color: transparent;
610
- clip-path: var(--greese-shape-clip) padding-box;
611
- }
612
- .greese-OtpField-slot::before {
613
- position: absolute;
614
- inset: 0;
615
- inline-size: auto;
616
- block-size: auto;
617
- translate: none;
618
- z-index: 1;
619
- pointer-events: none;
620
- content: '';
621
- background: var(--greese-shape-ring);
622
- clip-path: var(--greese-shape-ring-clip);
623
- }
624
- .greese-OtpField[data-invalid] .greese-OtpField-slot {
625
- --greese-shape-ring: var(--greese-color-negative);
626
- }
627
- .greese-OtpField-slot.greese-OtpField-slot--active {
628
- --greese-shape-ring: var(--greese-color-focus-ring);
629
- --greese-shape-border: 2px;
630
- }
631
- @media (prefers-reduced-motion: no-preference) {
632
- .greese-OtpField-slot {
633
- transition: box-shadow var(--greese-duration-fast) var(--greese-easing-standard),
634
- --greese-shape-f var(--greese-duration-normal) var(--greese-easing-standard),
635
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
636
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
637
- --greese-shape-bleed 0s linear;
413
+ @media (prefers-reduced-motion: no-preference) {
414
+ #{greese.themed(".greese-Card", Card)} {
415
+ transition: --greese-shape-f var(--greese-duration-normal) var(--greese-easing-standard),
416
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
417
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
418
+ --greese-shape-bleed 0s linear;
419
+ }
420
+ #{greese.themed(".greese-Card", Card)}.greese-Card--interactive {
421
+ transition: --greese-shape-f var(--greese-duration-normal) var(--greese-easing-standard),
422
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
423
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
424
+ --greese-shape-bleed 0s linear,
425
+ box-shadow var(--greese-duration-normal) var(--greese-easing-standard),
426
+ border-color var(--greese-duration-normal) var(--greese-easing-standard),
427
+ translate var(--greese-duration-normal) var(--greese-easing-standard);
428
+ }
638
429
  }
639
- }
640
- @media (forced-colors: active) {
641
- .greese-OtpField-slot {
642
- clip-path: none;
643
- border-color: CanvasText;
430
+ @media (forced-colors: active) {
431
+ #{greese.themed(".greese-Card", Card)} {
432
+ clip-path: none;
433
+ border-color: CanvasText;
434
+ }
435
+ #{greese.themed(".greese-Card", Card)}::after {
436
+ display: none;
437
+ }
644
438
  }
645
- .greese-OtpField-slot::before {
646
- display: none;
439
+ #{greese.themed(".greese-Chip", Chip)} {
440
+ --greese-shape-ring: var(--greese-color-border);
441
+ position: relative;
442
+ isolation: isolate;
443
+ border-color: transparent;
444
+ clip-path: var(--greese-shape-clip) padding-box;
647
445
  }
648
- }
649
- .greese-Segment {
650
- --greese-shape-ring: transparent;
651
- position: relative;
652
- isolation: isolate;
653
- border-color: transparent;
654
- clip-path: var(--greese-shape-clip) padding-box;
655
- }
656
- .greese-Segment::after {
657
- position: absolute;
658
- inset: 0;
659
- inline-size: auto;
660
- block-size: auto;
661
- translate: none;
662
- z-index: 1;
663
- pointer-events: none;
664
- content: '';
665
- background: var(--greese-shape-ring);
666
- clip-path: var(--greese-shape-ring-clip);
667
- }
668
- .greese-Segment:has(:checked) {
669
- --greese-shape-ring: var(--greese-segment-current-ring, transparent);
670
- }
671
- @media (prefers-reduced-motion: no-preference) {
672
- .greese-Segment {
673
- transition: background-color var(--greese-duration-fast) var(--greese-easing-standard),
674
- color var(--greese-duration-fast) var(--greese-easing-standard),
675
- --greese-shape-s var(--greese-duration-normal) var(--greese-easing-standard),
676
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
677
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
678
- --greese-shape-bleed 0s linear;
446
+ #{greese.themed(".greese-Chip", Chip)}::after {
447
+ position: absolute;
448
+ inset: 0;
449
+ inline-size: auto;
450
+ block-size: auto;
451
+ translate: none;
452
+ z-index: 1;
453
+ pointer-events: none;
454
+ content: '';
455
+ background: var(--greese-shape-ring);
456
+ clip-path: var(--greese-shape-ring-clip);
679
457
  }
680
- }
681
- @media (forced-colors: active) {
682
- .greese-Segment {
683
- clip-path: none;
684
- border-color: CanvasText;
458
+ @media (prefers-reduced-motion: no-preference) {
459
+ #{greese.themed(".greese-Chip", Chip)} {
460
+ transition: background-color var(--greese-duration-fast) var(--greese-easing-standard),
461
+ color var(--greese-duration-fast) var(--greese-easing-standard),
462
+ --greese-shape-s var(--greese-duration-normal) var(--greese-easing-standard),
463
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
464
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
465
+ --greese-shape-bleed 0s linear;
466
+ }
685
467
  }
686
- .greese-Segment::after {
687
- display: none;
468
+ @media (forced-colors: active) {
469
+ #{greese.themed(".greese-Chip", Chip)} {
470
+ clip-path: none;
471
+ border-color: CanvasText;
472
+ }
473
+ #{greese.themed(".greese-Chip", Chip)}::after {
474
+ display: none;
475
+ }
688
476
  }
689
- }
690
- .greese-SegmentedControl-track {
691
- --greese-shape-ring: var(--greese-color-border);
692
- position: relative;
693
- isolation: isolate;
694
- border-color: transparent;
695
- clip-path: var(--greese-shape-clip) padding-box;
696
- }
697
- .greese-SegmentedControl-track::after {
698
- position: absolute;
699
- inset: 0;
700
- inline-size: auto;
701
- block-size: auto;
702
- translate: none;
703
- z-index: 1;
704
- pointer-events: none;
705
- content: '';
706
- background: var(--greese-shape-ring);
707
- clip-path: var(--greese-shape-ring-clip);
708
- }
709
- @media (prefers-reduced-motion: no-preference) {
710
- .greese-SegmentedControl-track {
711
- transition: --greese-shape-s var(--greese-duration-normal) var(--greese-easing-standard),
712
- --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
713
- --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
714
- --greese-shape-bleed 0s linear;
477
+ #{greese.themed(".greese-Collapsible-trigger", Collapsible)} {
478
+ --greese-shape-ring: var(--greese-collapsible-border, var(--greese-color-border));
479
+ position: relative;
480
+ isolation: isolate;
481
+ border-color: transparent;
482
+ clip-path: var(--greese-shape-clip) padding-box;
715
483
  }
716
- }
717
- @media (forced-colors: active) {
718
- .greese-SegmentedControl-track {
719
- clip-path: none;
720
- border-color: CanvasText;
484
+ #{greese.themed(".greese-Collapsible-trigger", Collapsible)}::after {
485
+ position: absolute;
486
+ inset: 0;
487
+ inline-size: auto;
488
+ block-size: auto;
489
+ translate: none;
490
+ z-index: 1;
491
+ pointer-events: none;
492
+ content: '';
493
+ background: var(--greese-shape-ring);
494
+ clip-path: var(--greese-shape-ring-clip);
721
495
  }
722
- .greese-SegmentedControl-track::after {
723
- display: none;
496
+ @media (prefers-reduced-motion: no-preference) {
497
+ #{greese.themed(".greese-Collapsible-trigger", Collapsible)} {
498
+ transition: background-color var(--greese-duration-fast) var(--greese-easing-standard),
499
+ --greese-shape-f var(--greese-duration-normal) var(--greese-easing-standard),
500
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
501
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
502
+ --greese-shape-bleed 0s linear;
503
+ }
724
504
  }
725
- }
726
- .greese-Toast {
727
- --greese-shape-ring: color-mix(in oklab, var(--greese-toast-edge) 45%, var(--greese-color-border-strong));
728
- position: relative;
729
- isolation: isolate;
730
- border-color: transparent;
731
- clip-path: var(--greese-shape-clip) padding-box;
732
- }
733
- .greese-Toast::after {
734
- position: absolute;
735
- inset: 0;
736
- inline-size: auto;
737
- block-size: auto;
738
- translate: none;
739
- z-index: 1;
740
- pointer-events: none;
741
- content: '';
742
- background: var(--greese-shape-ring);
743
- clip-path: var(--greese-shape-ring-clip);
744
- }
745
- .greese-Toast {
746
- box-shadow: inset 3px 0 0 var(--greese-toast-edge);
747
- }
748
- .greese-Toast:dir(rtl) {
749
- box-shadow: inset -3px 0 0 var(--greese-toast-edge);
750
- }
751
- @media (forced-colors: active) {
752
- .greese-Toast {
753
- clip-path: none;
754
- border-color: CanvasText;
505
+ @media (forced-colors: active) {
506
+ #{greese.themed(".greese-Collapsible-trigger", Collapsible)} {
507
+ clip-path: none;
508
+ border-color: CanvasText;
509
+ }
510
+ #{greese.themed(".greese-Collapsible-trigger", Collapsible)}::after {
511
+ display: none;
512
+ }
755
513
  }
756
- .greese-Toast::after {
757
- display: none;
514
+ #{greese.themed(".greese-Dialog", Dialog)},
515
+ #{greese.themed(".greese-Menu", Menu)},
516
+ #{greese.themed(".greese-Popover", Popover)} {
517
+ --greese-shape-ring: var(--greese-color-border);
518
+ isolation: isolate;
519
+ border-color: transparent;
520
+ clip-path: var(--greese-shape-clip) padding-box;
758
521
  }
759
- }
760
- .greese-Tooltip {
761
- --greese-shape-ring: var(--greese-tooltip-border, transparent);
762
- isolation: isolate;
763
- border-color: transparent;
764
- clip-path: var(--greese-shape-clip) padding-box;
765
- }
766
- .greese-Tooltip::after {
767
- position: absolute;
768
- inset: 0;
769
- inline-size: auto;
770
- block-size: auto;
771
- translate: none;
772
- z-index: 1;
773
- pointer-events: none;
774
- content: '';
775
- background: var(--greese-shape-ring);
776
- clip-path: var(--greese-shape-ring-clip);
777
- }
778
- @media (forced-colors: active) {
779
- .greese-Tooltip {
780
- clip-path: none;
781
- border-color: CanvasText;
522
+ #{greese.themed(".greese-Dialog", Dialog)}::after,
523
+ #{greese.themed(".greese-Menu", Menu)}::after,
524
+ #{greese.themed(".greese-Popover", Popover)}::after {
525
+ position: absolute;
526
+ inset: 0;
527
+ inline-size: auto;
528
+ block-size: auto;
529
+ translate: none;
530
+ z-index: 1;
531
+ pointer-events: none;
532
+ content: '';
533
+ background: var(--greese-shape-ring);
534
+ clip-path: var(--greese-shape-ring-clip);
782
535
  }
783
- .greese-Tooltip::after {
784
- display: none;
536
+ @media (forced-colors: active) {
537
+ #{greese.themed(".greese-Dialog", Dialog)},
538
+ #{greese.themed(".greese-Menu", Menu)},
539
+ #{greese.themed(".greese-Popover", Popover)} {
540
+ clip-path: none;
541
+ border-color: CanvasText;
542
+ }
543
+ #{greese.themed(".greese-Dialog", Dialog)}::after,
544
+ #{greese.themed(".greese-Menu", Menu)}::after,
545
+ #{greese.themed(".greese-Popover", Popover)}::after {
546
+ display: none;
547
+ }
785
548
  }
786
- }
787
- .greese-shape-folio-control,
788
- .greese-Button {
789
- --greese-shape-s: 6px;
790
- --greese-shape-border: 1px;
791
- --greese-shape-clip: polygon(calc(var(--greese-shape-s) - 0.967 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + 1.034 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-s) + 0.967 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 1.034 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)));
792
- --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-s)) 0, 100% 0, calc(100% - var(--greese-shape-s)) 100%, 0 100%, calc(var(--greese-shape-s)) 0, calc(var(--greese-shape-s) + 0.967 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(1.034 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-s) - 0.967 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - 1.034 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-s) + 0.967 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
793
- }
794
- .greese-shape-folio-control:dir(rtl),
795
- .greese-Button:dir(rtl) {
796
- --greese-shape-clip: polygon(calc(100% + 1.034 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-s) - 0.967 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 1.034 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-s) + 0.967 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
797
- --greese-shape-ring-clip: polygon(evenodd, 100% 100%, calc(var(--greese-shape-s)) 100%, 0 0, calc(100% - var(--greese-shape-s)) 0, 100% 100%, calc(100% - 1.034 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-s) - 0.967 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(1.034 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-s) + 0.967 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - 1.034 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)));
798
- }
799
- .greese-Button.greese-Button--size-sm {
800
- --greese-shape-s: 4.2px;
801
- }
802
- .greese-Button.greese-Button--size-xs {
803
- --greese-shape-s: 3px;
804
- }
805
- .greese-Button.greese-IconButton {
806
- --greese-shape-s: 3px;
807
- }
808
- @media (hover: hover) {
809
- .greese-shape-folio-control:hover,
810
- .greese-Button:hover {
811
- --greese-shape-s: 2px;
549
+ #{greese.themed(".greese-Input", Input)},
550
+ #{greese.themed(".greese-Select", Select)},
551
+ #{greese.themed(".greese-Textarea", Textarea)} {
552
+ --greese-shape-ring: var(--greese-color-border-strong);
553
+ position: relative;
554
+ isolation: isolate;
555
+ border-color: transparent;
556
+ clip-path: var(--greese-shape-clip) padding-box;
812
557
  }
813
- .greese-Button.greese-Button--size-sm:hover {
814
- --greese-shape-s: 1.4px;
558
+ #{greese.themed(".greese-Input", Input)}::after,
559
+ #{greese.themed(".greese-Select", Select)}::after,
560
+ #{greese.themed(".greese-Textarea", Textarea)}::after {
561
+ position: absolute;
562
+ inset: 0;
563
+ inline-size: auto;
564
+ block-size: auto;
565
+ translate: none;
566
+ z-index: 1;
567
+ pointer-events: none;
568
+ content: '';
569
+ background: var(--greese-shape-ring);
570
+ clip-path: var(--greese-shape-ring-clip);
815
571
  }
816
- .greese-Button.greese-Button--size-xs:hover,
817
- .greese-Button.greese-IconButton:hover {
818
- --greese-shape-s: 1px;
572
+ #{greese.themed(".greese-Input", Input)}:hover,
573
+ #{greese.themed(".greese-Select", Select)}:hover,
574
+ #{greese.themed(".greese-Textarea", Textarea)}:hover {
575
+ --greese-shape-ring: var(--greese-color-fg-muted);
819
576
  }
820
- }
821
- .greese-shape-folio-control:active,
822
- .greese-Button:active {
823
- --greese-shape-s: 0px;
824
- }
825
- .greese-Button.greese-Button--size-sm:active {
826
- --greese-shape-s: 0px;
827
- }
828
- .greese-Button.greese-Button--size-xs:active,
829
- .greese-Button.greese-IconButton:active {
830
- --greese-shape-s: 0px;
831
- }
832
- .greese-shape-folio-control:focus-visible {
833
- --greese-shape-s: 0px;
834
- --greese-shape-bleed: 8px;
835
- transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
836
- }
837
- .greese-Button:focus-visible {
838
- --greese-shape-s: 0px;
839
- --greese-shape-bleed: 8px;
840
- transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, var(--greese-duration-normal);
841
- }
842
- .greese-shape-folio-field,
843
- .greese-Input,
844
- .greese-OtpField-slot,
845
- .greese-Select,
846
- .greese-Textarea {
847
- --greese-shape-f: 8px;
848
- --greese-shape-border: 1px;
849
- --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-f) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)));
850
- --greese-shape-ring-clip: polygon(evenodd, 0 0, calc(100% - var(--greese-shape-f)) 0, 100% calc(var(--greese-shape-f)), 100% 100%, 0 100%, 0 0, 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-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-f) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
851
- }
852
- .greese-shape-folio-field:dir(rtl),
853
- .greese-Input:dir(rtl),
854
- .greese-OtpField-slot:dir(rtl),
855
- .greese-Select:dir(rtl),
856
- .greese-Textarea:dir(rtl) {
857
- --greese-shape-clip: polygon(calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
858
- --greese-shape-ring-clip: polygon(evenodd, 100% 100%, 0 100%, 0 calc(var(--greese-shape-f)), calc(var(--greese-shape-f)) 0, 100% 0, 100% 100%, 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-f) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)));
859
- }
860
- .greese-Input:has(:focus-visible),
861
- .greese-Select:has(:focus-visible),
862
- .greese-Textarea:has(:focus-visible) {
863
- --greese-shape-border: 3px;
864
- --greese-shape-ring: var(--greese-color-focus-ring);
865
- outline-color: transparent;
866
- }
867
- .greese-shape-folio-field:focus-visible {
868
- --greese-shape-f: 0px;
869
- --greese-shape-bleed: 8px;
870
- transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
871
- }
872
- .greese-shape-folio-container,
873
- .greese-AccordionItem > .greese-Collapsible-content,
874
- .greese-Card,
875
- .greese-Dialog,
876
- .greese-Menu,
877
- .greese-Popover,
878
- .greese-Tile,
879
- .greese-Toast {
880
- --greese-shape-f: 18px;
881
- --greese-shape-border: 1px;
882
- --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-f) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)));
883
- --greese-shape-ring-clip: polygon(evenodd, 0 0, calc(100% - var(--greese-shape-f)) 0, 100% calc(var(--greese-shape-f)), 100% 100%, 0 100%, 0 0, 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-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-f) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
884
- }
885
- .greese-shape-folio-container:dir(rtl),
886
- .greese-AccordionItem > .greese-Collapsible-content:dir(rtl),
887
- .greese-Card:dir(rtl),
888
- .greese-Dialog:dir(rtl),
889
- .greese-Menu:dir(rtl),
890
- .greese-Popover:dir(rtl),
891
- .greese-Tile:dir(rtl),
892
- .greese-Toast:dir(rtl) {
893
- --greese-shape-clip: polygon(calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
894
- --greese-shape-ring-clip: polygon(evenodd, 100% 100%, 0 100%, 0 calc(var(--greese-shape-f)), calc(var(--greese-shape-f)) 0, 100% 0, 100% 100%, 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-f) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)));
895
- }
896
- @media (hover: hover) {
897
- .greese-shape-folio-container:hover,
898
- .greese-Card.greese-Card--interactive:hover {
899
- --greese-shape-f: 28px;
577
+ #{greese.themed(".greese-Input", Input)}[aria-invalid=true], #{greese.themed(".greese-Input", Input)}[data-invalid],
578
+ #{greese.themed(".greese-Select", Select)}[aria-invalid=true], #{greese.themed(".greese-Select", Select)}[data-invalid],
579
+ #{greese.themed(".greese-Textarea", Textarea)}[aria-invalid=true], #{greese.themed(".greese-Textarea", Textarea)}[data-invalid] {
580
+ --greese-shape-ring: var(--greese-color-negative);
581
+ }
582
+ @media (prefers-reduced-motion: no-preference) {
583
+ #{greese.themed(".greese-Input", Input)},
584
+ #{greese.themed(".greese-Select", Select)},
585
+ #{greese.themed(".greese-Textarea", Textarea)} {
586
+ transition: box-shadow var(--greese-duration-fast) var(--greese-easing-standard),
587
+ --greese-shape-f var(--greese-duration-normal) var(--greese-easing-standard),
588
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
589
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
590
+ --greese-shape-bleed 0s linear;
591
+ }
592
+ }
593
+ @media (forced-colors: active) {
594
+ #{greese.themed(".greese-Input", Input)},
595
+ #{greese.themed(".greese-Select", Select)},
596
+ #{greese.themed(".greese-Textarea", Textarea)} {
597
+ clip-path: none;
598
+ border-color: CanvasText;
599
+ }
600
+ #{greese.themed(".greese-Input", Input)}::after,
601
+ #{greese.themed(".greese-Select", Select)}::after,
602
+ #{greese.themed(".greese-Textarea", Textarea)}::after {
603
+ display: none;
604
+ }
605
+ }
606
+ #{greese.themed(".greese-OtpField-slot", OtpField)} {
607
+ --greese-shape-ring: var(--greese-color-border-strong);
608
+ position: relative;
609
+ isolation: isolate;
610
+ border-color: transparent;
611
+ clip-path: var(--greese-shape-clip) padding-box;
612
+ }
613
+ #{greese.themed(".greese-OtpField-slot", OtpField)}::before {
614
+ position: absolute;
615
+ inset: 0;
616
+ inline-size: auto;
617
+ block-size: auto;
618
+ translate: none;
619
+ z-index: 1;
620
+ pointer-events: none;
621
+ content: '';
622
+ background: var(--greese-shape-ring);
623
+ clip-path: var(--greese-shape-ring-clip);
624
+ }
625
+ .greese-OtpField[data-invalid] #{greese.themed(".greese-OtpField-slot", OtpField)} {
626
+ --greese-shape-ring: var(--greese-color-negative);
627
+ }
628
+ #{greese.themed(".greese-OtpField-slot", OtpField)}.greese-OtpField-slot--active {
629
+ --greese-shape-ring: var(--greese-color-focus-ring);
630
+ --greese-shape-border: 2px;
631
+ }
632
+ @media (prefers-reduced-motion: no-preference) {
633
+ #{greese.themed(".greese-OtpField-slot", OtpField)} {
634
+ transition: box-shadow var(--greese-duration-fast) var(--greese-easing-standard),
635
+ --greese-shape-f var(--greese-duration-normal) var(--greese-easing-standard),
636
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
637
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
638
+ --greese-shape-bleed 0s linear;
639
+ }
640
+ }
641
+ @media (forced-colors: active) {
642
+ #{greese.themed(".greese-OtpField-slot", OtpField)} {
643
+ clip-path: none;
644
+ border-color: CanvasText;
645
+ }
646
+ #{greese.themed(".greese-OtpField-slot", OtpField)}::before {
647
+ display: none;
648
+ }
649
+ }
650
+ #{greese.themed(".greese-Segment", Segment)} {
651
+ --greese-shape-ring: transparent;
652
+ position: relative;
653
+ isolation: isolate;
654
+ border-color: transparent;
655
+ clip-path: var(--greese-shape-clip) padding-box;
656
+ }
657
+ #{greese.themed(".greese-Segment", Segment)}::after {
658
+ position: absolute;
659
+ inset: 0;
660
+ inline-size: auto;
661
+ block-size: auto;
662
+ translate: none;
663
+ z-index: 1;
664
+ pointer-events: none;
665
+ content: '';
666
+ background: var(--greese-shape-ring);
667
+ clip-path: var(--greese-shape-ring-clip);
668
+ }
669
+ #{greese.themed(".greese-Segment", Segment)}:has(:checked) {
670
+ --greese-shape-ring: var(--greese-segment-current-ring, transparent);
671
+ }
672
+ @media (prefers-reduced-motion: no-preference) {
673
+ #{greese.themed(".greese-Segment", Segment)} {
674
+ transition: background-color var(--greese-duration-fast) var(--greese-easing-standard),
675
+ color var(--greese-duration-fast) var(--greese-easing-standard),
676
+ --greese-shape-s var(--greese-duration-normal) var(--greese-easing-standard),
677
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
678
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
679
+ --greese-shape-bleed 0s linear;
680
+ }
681
+ }
682
+ @media (forced-colors: active) {
683
+ #{greese.themed(".greese-Segment", Segment)} {
684
+ clip-path: none;
685
+ border-color: CanvasText;
686
+ }
687
+ #{greese.themed(".greese-Segment", Segment)}::after {
688
+ display: none;
689
+ }
690
+ }
691
+ #{greese.themed(".greese-SegmentedControl-track", SegmentedControl)} {
692
+ --greese-shape-ring: var(--greese-color-border);
693
+ position: relative;
694
+ isolation: isolate;
695
+ border-color: transparent;
696
+ clip-path: var(--greese-shape-clip) padding-box;
697
+ }
698
+ #{greese.themed(".greese-SegmentedControl-track", SegmentedControl)}::after {
699
+ position: absolute;
700
+ inset: 0;
701
+ inline-size: auto;
702
+ block-size: auto;
703
+ translate: none;
704
+ z-index: 1;
705
+ pointer-events: none;
706
+ content: '';
707
+ background: var(--greese-shape-ring);
708
+ clip-path: var(--greese-shape-ring-clip);
709
+ }
710
+ @media (prefers-reduced-motion: no-preference) {
711
+ #{greese.themed(".greese-SegmentedControl-track", SegmentedControl)} {
712
+ transition: --greese-shape-s var(--greese-duration-normal) var(--greese-easing-standard),
713
+ --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
714
+ --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
715
+ --greese-shape-bleed 0s linear;
716
+ }
717
+ }
718
+ @media (forced-colors: active) {
719
+ #{greese.themed(".greese-SegmentedControl-track", SegmentedControl)} {
720
+ clip-path: none;
721
+ border-color: CanvasText;
722
+ }
723
+ #{greese.themed(".greese-SegmentedControl-track", SegmentedControl)}::after {
724
+ display: none;
725
+ }
726
+ }
727
+ #{greese.themed(".greese-Toast", Toast)} {
728
+ --greese-shape-ring: color-mix(in oklab, var(--greese-toast-edge) 45%, var(--greese-color-border-strong));
729
+ position: relative;
730
+ isolation: isolate;
731
+ border-color: transparent;
732
+ clip-path: var(--greese-shape-clip) padding-box;
733
+ }
734
+ #{greese.themed(".greese-Toast", Toast)}::after {
735
+ position: absolute;
736
+ inset: 0;
737
+ inline-size: auto;
738
+ block-size: auto;
739
+ translate: none;
740
+ z-index: 1;
741
+ pointer-events: none;
742
+ content: '';
743
+ background: var(--greese-shape-ring);
744
+ clip-path: var(--greese-shape-ring-clip);
745
+ }
746
+ #{greese.themed(".greese-Toast", Toast)} {
747
+ box-shadow: inset 3px 0 0 var(--greese-toast-edge);
748
+ }
749
+ #{greese.themed(".greese-Toast", Toast)}:dir(rtl) {
750
+ box-shadow: inset -3px 0 0 var(--greese-toast-edge);
751
+ }
752
+ @media (forced-colors: active) {
753
+ #{greese.themed(".greese-Toast", Toast)} {
754
+ clip-path: none;
755
+ border-color: CanvasText;
756
+ }
757
+ #{greese.themed(".greese-Toast", Toast)}::after {
758
+ display: none;
759
+ }
760
+ }
761
+ #{greese.themed(".greese-Tooltip", Tooltip)} {
762
+ --greese-shape-ring: var(--greese-tooltip-border, transparent);
763
+ isolation: isolate;
764
+ border-color: transparent;
765
+ clip-path: var(--greese-shape-clip) padding-box;
766
+ }
767
+ #{greese.themed(".greese-Tooltip", Tooltip)}::after {
768
+ position: absolute;
769
+ inset: 0;
770
+ inline-size: auto;
771
+ block-size: auto;
772
+ translate: none;
773
+ z-index: 1;
774
+ pointer-events: none;
775
+ content: '';
776
+ background: var(--greese-shape-ring);
777
+ clip-path: var(--greese-shape-ring-clip);
778
+ }
779
+ @media (forced-colors: active) {
780
+ #{greese.themed(".greese-Tooltip", Tooltip)} {
781
+ clip-path: none;
782
+ border-color: CanvasText;
783
+ }
784
+ #{greese.themed(".greese-Tooltip", Tooltip)}::after {
785
+ display: none;
786
+ }
787
+ }
788
+ #{greese.themed(".greese-shape-folio-control")},
789
+ #{greese.themed(".greese-Button", Button)} {
790
+ --greese-shape-s: 6px;
791
+ --greese-shape-border: 1px;
792
+ --greese-shape-clip: polygon(calc(var(--greese-shape-s) - 0.967 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + 1.034 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-s) + 0.967 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 1.034 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)));
793
+ --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-s)) 0, 100% 0, calc(100% - var(--greese-shape-s)) 100%, 0 100%, calc(var(--greese-shape-s)) 0, calc(var(--greese-shape-s) + 0.967 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(1.034 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-s) - 0.967 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - 1.034 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-s) + 0.967 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
794
+ }
795
+ #{greese.themed(".greese-shape-folio-control")}:dir(rtl),
796
+ #{greese.themed(".greese-Button", Button)}:dir(rtl) {
797
+ --greese-shape-clip: polygon(calc(100% + 1.034 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-s) - 0.967 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 1.034 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-s) + 0.967 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
798
+ --greese-shape-ring-clip: polygon(evenodd, 100% 100%, calc(var(--greese-shape-s)) 100%, 0 0, calc(100% - var(--greese-shape-s)) 0, 100% 100%, calc(100% - 1.034 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-s) - 0.967 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(1.034 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-s) + 0.967 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - 1.034 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)));
799
+ }
800
+ #{greese.themed(".greese-Button", Button)}.greese-Button--size-sm {
801
+ --greese-shape-s: 4.2px;
802
+ }
803
+ #{greese.themed(".greese-Button", Button)}.greese-Button--size-xs {
804
+ --greese-shape-s: 3px;
805
+ }
806
+ #{greese.themed(".greese-Button", Button)}.greese-IconButton {
807
+ --greese-shape-s: 3px;
808
+ }
809
+ @media (hover: hover) {
810
+ #{greese.themed(".greese-shape-folio-control")}:hover,
811
+ #{greese.themed(".greese-Button", Button)}:hover {
812
+ --greese-shape-s: 2px;
813
+ }
814
+ #{greese.themed(".greese-Button", Button)}.greese-Button--size-sm:hover {
815
+ --greese-shape-s: 1.4px;
816
+ }
817
+ #{greese.themed(".greese-Button", Button)}.greese-Button--size-xs:hover,
818
+ #{greese.themed(".greese-Button", Button)}.greese-IconButton:hover {
819
+ --greese-shape-s: 1px;
820
+ }
821
+ }
822
+ #{greese.themed(".greese-shape-folio-control")}:active,
823
+ #{greese.themed(".greese-Button", Button)}:active {
824
+ --greese-shape-s: 0px;
825
+ }
826
+ #{greese.themed(".greese-Button", Button)}.greese-Button--size-sm:active {
827
+ --greese-shape-s: 0px;
828
+ }
829
+ #{greese.themed(".greese-Button", Button)}.greese-Button--size-xs:active,
830
+ #{greese.themed(".greese-Button", Button)}.greese-IconButton:active {
831
+ --greese-shape-s: 0px;
832
+ }
833
+ #{greese.themed(".greese-shape-folio-control")}:focus-visible {
834
+ --greese-shape-s: 0px;
835
+ --greese-shape-bleed: 8px;
836
+ transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
837
+ }
838
+ #{greese.themed(".greese-Button", Button)}:focus-visible {
839
+ --greese-shape-s: 0px;
840
+ --greese-shape-bleed: 8px;
841
+ transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, var(--greese-duration-normal);
842
+ }
843
+ #{greese.themed(".greese-shape-folio-field")},
844
+ #{greese.themed(".greese-Input", Input)},
845
+ #{greese.themed(".greese-OtpField-slot", OtpField)},
846
+ #{greese.themed(".greese-Select", Select)},
847
+ #{greese.themed(".greese-Textarea", Textarea)} {
848
+ --greese-shape-f: 8px;
849
+ --greese-shape-border: 1px;
850
+ --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-f) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)));
851
+ --greese-shape-ring-clip: polygon(evenodd, 0 0, calc(100% - var(--greese-shape-f)) 0, 100% calc(var(--greese-shape-f)), 100% 100%, 0 100%, 0 0, 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-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-f) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
852
+ }
853
+ #{greese.themed(".greese-shape-folio-field")}:dir(rtl),
854
+ #{greese.themed(".greese-Input", Input)}:dir(rtl),
855
+ #{greese.themed(".greese-OtpField-slot", OtpField)}:dir(rtl),
856
+ #{greese.themed(".greese-Select", Select)}:dir(rtl),
857
+ #{greese.themed(".greese-Textarea", Textarea)}:dir(rtl) {
858
+ --greese-shape-clip: polygon(calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
859
+ --greese-shape-ring-clip: polygon(evenodd, 100% 100%, 0 100%, 0 calc(var(--greese-shape-f)), calc(var(--greese-shape-f)) 0, 100% 0, 100% 100%, 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-f) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)));
860
+ }
861
+ #{greese.themed(".greese-Input", Input)}:has(:focus-visible),
862
+ #{greese.themed(".greese-Select", Select)}:has(:focus-visible),
863
+ #{greese.themed(".greese-Textarea", Textarea)}:has(:focus-visible) {
864
+ --greese-shape-border: 3px;
865
+ --greese-shape-ring: var(--greese-color-focus-ring);
866
+ outline-color: transparent;
867
+ }
868
+ #{greese.themed(".greese-shape-folio-field")}:focus-visible {
869
+ --greese-shape-f: 0px;
870
+ --greese-shape-bleed: 8px;
871
+ transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
872
+ }
873
+ #{greese.themed(".greese-shape-folio-container")},
874
+ #{greese.themed(".greese-AccordionItem > .greese-Collapsible-content", AccordionItem)},
875
+ #{greese.themed(".greese-Card", Card)},
876
+ #{greese.themed(".greese-Dialog", Dialog)},
877
+ #{greese.themed(".greese-Menu", Menu)},
878
+ #{greese.themed(".greese-Popover", Popover)},
879
+ #{greese.themed(".greese-Tile", Tile)},
880
+ #{greese.themed(".greese-Toast", Toast)} {
881
+ --greese-shape-f: 18px;
882
+ --greese-shape-border: 1px;
883
+ --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-f) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)));
884
+ --greese-shape-ring-clip: polygon(evenodd, 0 0, calc(100% - var(--greese-shape-f)) 0, 100% calc(var(--greese-shape-f)), 100% 100%, 0 100%, 0 0, 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-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-f) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
885
+ }
886
+ #{greese.themed(".greese-shape-folio-container")}:dir(rtl),
887
+ #{greese.themed(".greese-AccordionItem > .greese-Collapsible-content", AccordionItem)}:dir(rtl),
888
+ #{greese.themed(".greese-Card", Card)}:dir(rtl),
889
+ #{greese.themed(".greese-Dialog", Dialog)}:dir(rtl),
890
+ #{greese.themed(".greese-Menu", Menu)}:dir(rtl),
891
+ #{greese.themed(".greese-Popover", Popover)}:dir(rtl),
892
+ #{greese.themed(".greese-Tile", Tile)}:dir(rtl),
893
+ #{greese.themed(".greese-Toast", Toast)}:dir(rtl) {
894
+ --greese-shape-clip: polygon(calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
895
+ --greese-shape-ring-clip: polygon(evenodd, 100% 100%, 0 100%, 0 calc(var(--greese-shape-f)), calc(var(--greese-shape-f)) 0, 100% 0, 100% 100%, 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-f) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)));
896
+ }
897
+ @media (hover: hover) {
898
+ #{greese.themed(".greese-shape-folio-container")}:hover,
899
+ #{greese.themed(".greese-Card", Card)}.greese-Card--interactive:hover {
900
+ --greese-shape-f: 28px;
901
+ }
902
+ }
903
+ #{greese.themed(".greese-shape-folio-container")}:focus-visible,
904
+ #{greese.themed(".greese-AccordionItem > .greese-Collapsible-content", AccordionItem)}:focus-visible,
905
+ #{greese.themed(".greese-Card", Card)}:focus-visible,
906
+ #{greese.themed(".greese-Tile", Tile)}:focus-visible {
907
+ --greese-shape-f: 0px;
908
+ --greese-shape-bleed: 8px;
909
+ transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
910
+ }
911
+ #{greese.themed(".greese-Dialog", Dialog)}:focus-visible,
912
+ #{greese.themed(".greese-Menu", Menu)}:focus-visible,
913
+ #{greese.themed(".greese-Popover", Popover)}:focus-visible,
914
+ #{greese.themed(".greese-Toast", Toast)}:focus-visible {
915
+ --greese-shape-f: 0px;
916
+ --greese-shape-bleed: 8px;
917
+ }
918
+ #{greese.themed(".greese-shape-folio-small")},
919
+ #{greese.themed(".greese-Alert", Alert)},
920
+ #{greese.themed(".greese-Collapsible-trigger", Collapsible)},
921
+ #{greese.themed(".greese-Tooltip", Tooltip)} {
922
+ --greese-shape-f: 10px;
923
+ --greese-shape-border: 1px;
924
+ --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-f) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)));
925
+ --greese-shape-ring-clip: polygon(evenodd, 0 0, calc(100% - var(--greese-shape-f)) 0, 100% calc(var(--greese-shape-f)), 100% 100%, 0 100%, 0 0, 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-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-f) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
926
+ }
927
+ #{greese.themed(".greese-shape-folio-small")}:dir(rtl),
928
+ #{greese.themed(".greese-Alert", Alert)}:dir(rtl),
929
+ #{greese.themed(".greese-Collapsible-trigger", Collapsible)}:dir(rtl),
930
+ #{greese.themed(".greese-Tooltip", Tooltip)}:dir(rtl) {
931
+ --greese-shape-clip: polygon(calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
932
+ --greese-shape-ring-clip: polygon(evenodd, 100% 100%, 0 100%, 0 calc(var(--greese-shape-f)), calc(var(--greese-shape-f)) 0, 100% 0, 100% 100%, 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-f) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)));
933
+ }
934
+ #{greese.themed(".greese-shape-folio-small")}:focus-visible,
935
+ #{greese.themed(".greese-Alert", Alert)}:focus-visible {
936
+ --greese-shape-f: 0px;
937
+ --greese-shape-bleed: 8px;
938
+ transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
939
+ }
940
+ #{greese.themed(".greese-Collapsible-trigger", Collapsible)}:focus-visible {
941
+ --greese-shape-f: 0px;
942
+ --greese-shape-bleed: 8px;
943
+ transition-delay: 0s, 0s, 0s, 0s, var(--greese-duration-normal);
944
+ }
945
+ #{greese.themed(".greese-Tooltip", Tooltip)}:focus-visible {
946
+ --greese-shape-f: 0px;
947
+ --greese-shape-bleed: 8px;
948
+ }
949
+ #{greese.themed(".greese-shape-folio-indicator")},
950
+ #{greese.themed(".greese-Badge", Badge)},
951
+ #{greese.themed(".greese-Chip", Chip)},
952
+ #{greese.themed(".greese-Segment", Segment)},
953
+ #{greese.themed(".greese-SegmentedControl-track", SegmentedControl)} {
954
+ --greese-shape-s: 4px;
955
+ --greese-shape-border: 1px;
956
+ --greese-shape-clip: polygon(calc(var(--greese-shape-s) - 0.978 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + 1.022 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-s) + 0.978 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 1.022 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)));
957
+ --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-s)) 0, 100% 0, calc(100% - var(--greese-shape-s)) 100%, 0 100%, calc(var(--greese-shape-s)) 0, calc(var(--greese-shape-s) + 0.978 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(1.022 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-s) - 0.978 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - 1.022 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-s) + 0.978 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
958
+ }
959
+ #{greese.themed(".greese-shape-folio-indicator")}:dir(rtl),
960
+ #{greese.themed(".greese-Badge", Badge)}:dir(rtl),
961
+ #{greese.themed(".greese-Chip", Chip)}:dir(rtl),
962
+ #{greese.themed(".greese-Segment", Segment)}:dir(rtl),
963
+ #{greese.themed(".greese-SegmentedControl-track", SegmentedControl)}:dir(rtl) {
964
+ --greese-shape-clip: polygon(calc(100% + 1.022 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-s) - 0.978 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 1.022 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-s) + 0.978 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
965
+ --greese-shape-ring-clip: polygon(evenodd, 100% 100%, calc(var(--greese-shape-s)) 100%, 0 0, calc(100% - var(--greese-shape-s)) 0, 100% 100%, calc(100% - 1.022 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-s) - 0.978 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(1.022 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-s) + 0.978 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - 1.022 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)));
966
+ }
967
+ #{greese.themed(".greese-Segment", Segment)}:has(:focus-visible) {
968
+ --greese-shape-border: 3px;
969
+ --greese-shape-ring: var(--greese-color-focus-ring);
970
+ outline-color: transparent;
971
+ }
972
+ #{greese.themed(".greese-shape-folio-indicator")}:focus-visible,
973
+ #{greese.themed(".greese-Badge", Badge)}:focus-visible,
974
+ #{greese.themed(".greese-SegmentedControl-track", SegmentedControl)}:focus-visible {
975
+ --greese-shape-s: 0px;
976
+ --greese-shape-bleed: 8px;
977
+ transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
978
+ }
979
+ #{greese.themed(".greese-Chip", Chip)}:focus-visible {
980
+ --greese-shape-s: 0px;
981
+ --greese-shape-bleed: 8px;
982
+ transition-delay: 0s, 0s, 0s, 0s, 0s, var(--greese-duration-normal);
983
+ }
984
+ #{greese.themed(".greese-shape-folio-mark")},
985
+ #{greese.themed(".greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar)", Avatar)} {
986
+ --greese-shape-f: 8px;
987
+ --greese-shape-border: 1px;
988
+ --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-f) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)));
989
+ --greese-shape-ring-clip: polygon(evenodd, 0 0, calc(100% - var(--greese-shape-f)) 0, 100% calc(var(--greese-shape-f)), 100% 100%, 0 100%, 0 0, 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-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-f) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
990
+ }
991
+ #{greese.themed(".greese-shape-folio-mark")}:dir(rtl),
992
+ #{greese.themed(".greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar)", Avatar)}:dir(rtl) {
993
+ --greese-shape-clip: polygon(calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
994
+ --greese-shape-ring-clip: polygon(evenodd, 100% 100%, 0 100%, 0 calc(var(--greese-shape-f)), calc(var(--greese-shape-f)) 0, 100% 0, 100% 100%, 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-f) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)));
995
+ }
996
+ #{greese.themed(".greese-shape-folio-mark")}:focus-visible {
997
+ --greese-shape-f: 0px;
998
+ --greese-shape-bleed: 8px;
999
+ transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
1000
+ }
1001
+ #{greese.themed(".greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar)", Avatar)}:focus-visible {
1002
+ --greese-shape-f: 0px;
1003
+ --greese-shape-bleed: 8px;
1004
+ }
1005
+ #{greese.themed(".greese-shape-folio-dot")},
1006
+ #{greese.themed(".greese-Status:not(.greese-Status--pulse)", Status)} {
1007
+ --greese-shape-f: 3px;
1008
+ --greese-shape-border: 1px;
1009
+ --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-f) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)));
1010
+ --greese-shape-ring-clip: polygon(evenodd, 0 0, calc(100% - var(--greese-shape-f)) 0, 100% calc(var(--greese-shape-f)), 100% 100%, 0 100%, 0 0, 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-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-f) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
1011
+ }
1012
+ #{greese.themed(".greese-shape-folio-dot")}:dir(rtl),
1013
+ #{greese.themed(".greese-Status:not(.greese-Status--pulse)", Status)}:dir(rtl) {
1014
+ --greese-shape-clip: polygon(calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
1015
+ --greese-shape-ring-clip: polygon(evenodd, 100% 100%, 0 100%, 0 calc(var(--greese-shape-f)), calc(var(--greese-shape-f)) 0, 100% 0, 100% 100%, 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-f) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)));
1016
+ }
1017
+ #{greese.themed(".greese-shape-folio-dot")}:focus-visible {
1018
+ --greese-shape-f: 0px;
1019
+ --greese-shape-bleed: 8px;
1020
+ transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
1021
+ }
1022
+ #{greese.themed(".greese-Status:not(.greese-Status--pulse)", Status)}:focus-visible {
1023
+ --greese-shape-f: 0px;
1024
+ --greese-shape-bleed: 8px;
1025
+ }
1026
+ #{greese.themed(".greese-shape-folio-bubble")},
1027
+ #{greese.themed(".greese-ChatBubble-bubble", ChatBubble)} {
1028
+ --greese-shape-f: 10px;
1029
+ --greese-shape-border: 1px;
1030
+ --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-f) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 11px - 2.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% - 11px - 0.414 * var(--greese-shape-bleed)));
1031
+ --greese-shape-ring-clip: polygon(evenodd, 0 0, calc(100% - var(--greese-shape-f)) 0, 100% calc(var(--greese-shape-f)), 100% 100%, calc(-1 * 11px) 100%, 0 calc(100% - 11px), 0 0, calc(var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - 11px + 0.414 * var(--greese-shape-border)), calc(-1 * 11px + 2.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-f) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
1032
+ }
1033
+ #{greese.themed(".greese-shape-folio-bubble")}:dir(rtl),
1034
+ #{greese.themed(".greese-ChatBubble-bubble", ChatBubble)}:dir(rtl),
1035
+ .greese-ChatBubble--end #{greese.themed(".greese-ChatBubble-bubble", ChatBubble)} {
1036
+ --greese-shape-clip: polygon(calc(100% + var(--greese-shape-bleed)) calc(100% - 11px - 0.414 * var(--greese-shape-bleed)), calc(100% + 11px + 2.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
1037
+ --greese-shape-ring-clip: polygon(evenodd, 100% calc(100% - 11px), calc(100% + 11px) 100%, 0 100%, 0 calc(var(--greese-shape-f)), calc(var(--greese-shape-f)) 0, 100% 0, 100% calc(100% - 11px), calc(100% - var(--greese-shape-border)) calc(100% - 11px + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% + 11px - 2.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - 11px + 0.414 * var(--greese-shape-border)));
1038
+ }
1039
+ .greese-ChatBubble--end #{greese.themed(".greese-ChatBubble-bubble", ChatBubble)}:dir(rtl) {
1040
+ --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-f) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 11px - 2.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% - 11px - 0.414 * var(--greese-shape-bleed)));
1041
+ --greese-shape-ring-clip: polygon(evenodd, 0 0, calc(100% - var(--greese-shape-f)) 0, 100% calc(var(--greese-shape-f)), 100% 100%, calc(-1 * 11px) 100%, 0 calc(100% - 11px), 0 0, calc(var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - 11px + 0.414 * var(--greese-shape-border)), calc(-1 * 11px + 2.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-f) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
1042
+ }
1043
+ #{greese.themed(".greese-shape-folio-bubble")}:focus-visible {
1044
+ --greese-shape-border: 3px;
1045
+ --greese-shape-ring: var(--greese-color-focus-ring);
1046
+ outline-color: transparent;
900
1047
  }
901
- }
902
- .greese-shape-folio-container:focus-visible,
903
- .greese-AccordionItem > .greese-Collapsible-content:focus-visible,
904
- .greese-Card:focus-visible,
905
- .greese-Tile:focus-visible {
906
- --greese-shape-f: 0px;
907
- --greese-shape-bleed: 8px;
908
- transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
909
- }
910
- .greese-Dialog:focus-visible,
911
- .greese-Menu:focus-visible,
912
- .greese-Popover:focus-visible,
913
- .greese-Toast:focus-visible {
914
- --greese-shape-f: 0px;
915
- --greese-shape-bleed: 8px;
916
- }
917
- .greese-shape-folio-small,
918
- .greese-Alert,
919
- .greese-Collapsible-trigger,
920
- .greese-Tooltip {
921
- --greese-shape-f: 10px;
922
- --greese-shape-border: 1px;
923
- --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-f) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)));
924
- --greese-shape-ring-clip: polygon(evenodd, 0 0, calc(100% - var(--greese-shape-f)) 0, 100% calc(var(--greese-shape-f)), 100% 100%, 0 100%, 0 0, 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-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-f) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
925
- }
926
- .greese-shape-folio-small:dir(rtl),
927
- .greese-Alert:dir(rtl),
928
- .greese-Collapsible-trigger:dir(rtl),
929
- .greese-Tooltip:dir(rtl) {
930
- --greese-shape-clip: polygon(calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
931
- --greese-shape-ring-clip: polygon(evenodd, 100% 100%, 0 100%, 0 calc(var(--greese-shape-f)), calc(var(--greese-shape-f)) 0, 100% 0, 100% 100%, 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-f) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)));
932
- }
933
- .greese-shape-folio-small:focus-visible,
934
- .greese-Alert:focus-visible {
935
- --greese-shape-f: 0px;
936
- --greese-shape-bleed: 8px;
937
- transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
938
- }
939
- .greese-Collapsible-trigger:focus-visible {
940
- --greese-shape-f: 0px;
941
- --greese-shape-bleed: 8px;
942
- transition-delay: 0s, 0s, 0s, 0s, var(--greese-duration-normal);
943
- }
944
- .greese-Tooltip:focus-visible {
945
- --greese-shape-f: 0px;
946
- --greese-shape-bleed: 8px;
947
- }
948
- .greese-shape-folio-indicator,
949
- .greese-Badge,
950
- .greese-Chip,
951
- .greese-Segment,
952
- .greese-SegmentedControl-track {
953
- --greese-shape-s: 4px;
954
- --greese-shape-border: 1px;
955
- --greese-shape-clip: polygon(calc(var(--greese-shape-s) - 0.978 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + 1.022 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-s) + 0.978 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 1.022 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)));
956
- --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-s)) 0, 100% 0, calc(100% - var(--greese-shape-s)) 100%, 0 100%, calc(var(--greese-shape-s)) 0, calc(var(--greese-shape-s) + 0.978 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(1.022 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-s) - 0.978 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - 1.022 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-s) + 0.978 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
957
- }
958
- .greese-shape-folio-indicator:dir(rtl),
959
- .greese-Badge:dir(rtl),
960
- .greese-Chip:dir(rtl),
961
- .greese-Segment:dir(rtl),
962
- .greese-SegmentedControl-track:dir(rtl) {
963
- --greese-shape-clip: polygon(calc(100% + 1.022 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-s) - 0.978 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 1.022 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-s) + 0.978 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
964
- --greese-shape-ring-clip: polygon(evenodd, 100% 100%, calc(var(--greese-shape-s)) 100%, 0 0, calc(100% - var(--greese-shape-s)) 0, 100% 100%, calc(100% - 1.022 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-s) - 0.978 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(1.022 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-s) + 0.978 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - 1.022 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)));
965
- }
966
- .greese-Segment:has(:focus-visible) {
967
- --greese-shape-border: 3px;
968
- --greese-shape-ring: var(--greese-color-focus-ring);
969
- outline-color: transparent;
970
- }
971
- .greese-shape-folio-indicator:focus-visible,
972
- .greese-Badge:focus-visible,
973
- .greese-SegmentedControl-track:focus-visible {
974
- --greese-shape-s: 0px;
975
- --greese-shape-bleed: 8px;
976
- transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
977
- }
978
- .greese-Chip:focus-visible {
979
- --greese-shape-s: 0px;
980
- --greese-shape-bleed: 8px;
981
- transition-delay: 0s, 0s, 0s, 0s, 0s, var(--greese-duration-normal);
982
- }
983
- .greese-shape-folio-mark,
984
- .greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar) {
985
- --greese-shape-f: 8px;
986
- --greese-shape-border: 1px;
987
- --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-f) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)));
988
- --greese-shape-ring-clip: polygon(evenodd, 0 0, calc(100% - var(--greese-shape-f)) 0, 100% calc(var(--greese-shape-f)), 100% 100%, 0 100%, 0 0, 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-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-f) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
989
- }
990
- .greese-shape-folio-mark:dir(rtl),
991
- .greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar):dir(rtl) {
992
- --greese-shape-clip: polygon(calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
993
- --greese-shape-ring-clip: polygon(evenodd, 100% 100%, 0 100%, 0 calc(var(--greese-shape-f)), calc(var(--greese-shape-f)) 0, 100% 0, 100% 100%, 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-f) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)));
994
- }
995
- .greese-shape-folio-mark:focus-visible {
996
- --greese-shape-f: 0px;
997
- --greese-shape-bleed: 8px;
998
- transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
999
- }
1000
- .greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar):focus-visible {
1001
- --greese-shape-f: 0px;
1002
- --greese-shape-bleed: 8px;
1003
- }
1004
- .greese-shape-folio-dot,
1005
- .greese-Status:not(.greese-Status--pulse) {
1006
- --greese-shape-f: 3px;
1007
- --greese-shape-border: 1px;
1008
- --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-f) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)));
1009
- --greese-shape-ring-clip: polygon(evenodd, 0 0, calc(100% - var(--greese-shape-f)) 0, 100% calc(var(--greese-shape-f)), 100% 100%, 0 100%, 0 0, 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-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-f) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
1010
- }
1011
- .greese-shape-folio-dot:dir(rtl),
1012
- .greese-Status:not(.greese-Status--pulse):dir(rtl) {
1013
- --greese-shape-clip: polygon(calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
1014
- --greese-shape-ring-clip: polygon(evenodd, 100% 100%, 0 100%, 0 calc(var(--greese-shape-f)), calc(var(--greese-shape-f)) 0, 100% 0, 100% 100%, 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-f) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)));
1015
- }
1016
- .greese-shape-folio-dot:focus-visible {
1017
- --greese-shape-f: 0px;
1018
- --greese-shape-bleed: 8px;
1019
- transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
1020
- }
1021
- .greese-Status:not(.greese-Status--pulse):focus-visible {
1022
- --greese-shape-f: 0px;
1023
- --greese-shape-bleed: 8px;
1024
- }
1025
- .greese-shape-folio-bubble,
1026
- .greese-ChatBubble-bubble {
1027
- --greese-shape-f: 10px;
1028
- --greese-shape-border: 1px;
1029
- --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-f) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 11px - 2.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% - 11px - 0.414 * var(--greese-shape-bleed)));
1030
- --greese-shape-ring-clip: polygon(evenodd, 0 0, calc(100% - var(--greese-shape-f)) 0, 100% calc(var(--greese-shape-f)), 100% 100%, calc(-1 * 11px) 100%, 0 calc(100% - 11px), 0 0, calc(var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - 11px + 0.414 * var(--greese-shape-border)), calc(-1 * 11px + 2.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-f) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
1031
- }
1032
- .greese-shape-folio-bubble:dir(rtl),
1033
- .greese-ChatBubble-bubble:dir(rtl),
1034
- .greese-ChatBubble--end .greese-ChatBubble-bubble {
1035
- --greese-shape-clip: polygon(calc(100% + var(--greese-shape-bleed)) calc(100% - 11px - 0.414 * var(--greese-shape-bleed)), calc(100% + 11px + 2.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
1036
- --greese-shape-ring-clip: polygon(evenodd, 100% calc(100% - 11px), calc(100% + 11px) 100%, 0 100%, 0 calc(var(--greese-shape-f)), calc(var(--greese-shape-f)) 0, 100% 0, 100% calc(100% - 11px), calc(100% - var(--greese-shape-border)) calc(100% - 11px + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% + 11px - 2.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - 11px + 0.414 * var(--greese-shape-border)));
1037
- }
1038
- .greese-ChatBubble--end .greese-ChatBubble-bubble:dir(rtl) {
1039
- --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-f) + 0.414 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-f) - 0.414 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 11px - 2.414 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% - 11px - 0.414 * var(--greese-shape-bleed)));
1040
- --greese-shape-ring-clip: polygon(evenodd, 0 0, calc(100% - var(--greese-shape-f)) 0, 100% calc(var(--greese-shape-f)), 100% 100%, calc(-1 * 11px) 100%, 0 calc(100% - 11px), 0 0, calc(var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - 11px + 0.414 * var(--greese-shape-border)), calc(-1 * 11px + 2.414 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-f) + 0.414 * var(--greese-shape-border)), calc(100% - var(--greese-shape-f) - 0.414 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
1041
- }
1042
- .greese-shape-folio-bubble:focus-visible {
1043
- --greese-shape-border: 3px;
1044
- --greese-shape-ring: var(--greese-color-focus-ring);
1045
- outline-color: transparent;
1046
1048
  }
1047
1049
  }