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