@dixy-ui/themes 0.0.0-stage → 0.1.0-beta.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 (211) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +104 -2
  3. package/dist/ansi/ornament.d.ts +3 -0
  4. package/dist/ansi/ornament.js +8 -0
  5. package/dist/ansi-panes.css +929 -0
  6. package/dist/art-deco.css +850 -0
  7. package/dist/atelier/ornament.d.ts +4 -0
  8. package/dist/atelier/ornament.js +9 -0
  9. package/dist/atomic/ornament.d.ts +3 -0
  10. package/dist/atomic/ornament.js +8 -0
  11. package/dist/atomic-lounge.css +946 -0
  12. package/dist/authoring.d.ts +142 -0
  13. package/dist/authoring.js +83 -0
  14. package/dist/azulejo/ornament.d.ts +3 -0
  15. package/dist/azulejo/ornament.js +8 -0
  16. package/dist/azulejo-tile.css +962 -0
  17. package/dist/blueprint/ornament.d.ts +3 -0
  18. package/dist/blueprint/ornament.js +8 -0
  19. package/dist/blueprint.css +897 -0
  20. package/dist/brutalist/ornament.d.ts +3 -0
  21. package/dist/brutalist/ornament.js +8 -0
  22. package/dist/brutalist-concrete.css +936 -0
  23. package/dist/bytes.json +162 -0
  24. package/dist/candy-clay.css +778 -0
  25. package/dist/catalog.d.ts +1346 -0
  26. package/dist/catalog.js +1379 -0
  27. package/dist/character.d.ts +103 -0
  28. package/dist/character.js +477 -0
  29. package/dist/chrome.d.ts +114 -0
  30. package/dist/chrome.js +247 -0
  31. package/dist/clay/ornament.d.ts +3 -0
  32. package/dist/clay/ornament.js +8 -0
  33. package/dist/compile-css.d.ts +3 -0
  34. package/dist/compile-css.js +133 -0
  35. package/dist/deco/ornament.d.ts +3 -0
  36. package/dist/deco/ornament.js +8 -0
  37. package/dist/diwali/ornament.d.ts +3 -0
  38. package/dist/diwali/ornament.js +8 -0
  39. package/dist/diwali-lights.css +894 -0
  40. package/dist/documents.d.ts +104 -0
  41. package/dist/documents.js +1411 -0
  42. package/dist/forest/ornament.d.ts +3 -0
  43. package/dist/forest/ornament.js +12 -0
  44. package/dist/foundations.d.ts +105 -0
  45. package/dist/foundations.js +140 -0
  46. package/dist/frame-corners.d.ts +5 -0
  47. package/dist/frame-corners.js +5 -0
  48. package/dist/frame-styles.d.ts +36 -0
  49. package/dist/frame-styles.js +146 -0
  50. package/dist/freeze.d.ts +2 -0
  51. package/dist/freeze.js +9 -0
  52. package/dist/freighter/ornament.d.ts +3 -0
  53. package/dist/freighter/ornament.js +8 -0
  54. package/dist/freighter.css +942 -0
  55. package/dist/glass/ornament.d.ts +3 -0
  56. package/dist/glass/ornament.js +8 -0
  57. package/dist/glass-ui.css +923 -0
  58. package/dist/hardware/ornament.d.ts +4 -0
  59. package/dist/hardware/ornament.js +10 -0
  60. package/dist/holi/ornament.d.ts +3 -0
  61. package/dist/holi/ornament.js +8 -0
  62. package/dist/holi-colours.css +887 -0
  63. package/dist/hud/ornament.d.ts +3 -0
  64. package/dist/hud/ornament.js +8 -0
  65. package/dist/light/ornament.d.ts +3 -0
  66. package/dist/light/ornament.js +10 -0
  67. package/dist/living-forest.css +917 -0
  68. package/dist/lunar/ornament.d.ts +3 -0
  69. package/dist/lunar/ornament.js +8 -0
  70. package/dist/lunar-new-year.css +811 -0
  71. package/dist/manifests.d.ts +2485 -0
  72. package/dist/manifests.js +264 -0
  73. package/dist/material-light.css +880 -0
  74. package/dist/neon/ornament.d.ts +3 -0
  75. package/dist/neon/ornament.js +8 -0
  76. package/dist/neon-night-market.css +944 -0
  77. package/dist/ocean/ornament.d.ts +3 -0
  78. package/dist/ocean/ornament.js +8 -0
  79. package/dist/ocean-depths.css +825 -0
  80. package/dist/orbital-hud.css +973 -0
  81. package/dist/organic-css.d.ts +3 -0
  82. package/dist/organic-css.js +23 -0
  83. package/dist/organic-geometry.d.ts +20 -0
  84. package/dist/organic-geometry.js +74 -0
  85. package/dist/organic-ornament.d.ts +9 -0
  86. package/dist/organic-ornament.js +28 -0
  87. package/dist/organic-paint-launch.d.ts +43 -0
  88. package/dist/organic-paint-launch.js +1156 -0
  89. package/dist/organic-paint-world.d.ts +24 -0
  90. package/dist/organic-paint-world.js +676 -0
  91. package/dist/organic-paint.d.ts +50 -0
  92. package/dist/organic-paint.js +695 -0
  93. package/dist/organic-runtime.d.ts +4 -0
  94. package/dist/organic-runtime.js +231 -0
  95. package/dist/organic-settings.d.ts +680 -0
  96. package/dist/organic-settings.js +433 -0
  97. package/dist/ornament-parts.d.ts +20 -0
  98. package/dist/ornament-parts.js +15 -0
  99. package/dist/papel-picado.css +904 -0
  100. package/dist/phosphor/ornament.d.ts +3 -0
  101. package/dist/phosphor/ornament.js +8 -0
  102. package/dist/phosphor-terminal.css +1011 -0
  103. package/dist/picado/ornament.d.ts +3 -0
  104. package/dist/picado/ornament.js +8 -0
  105. package/dist/prism/ornament.d.ts +4 -0
  106. package/dist/prism/ornament.js +9 -0
  107. package/dist/prism-glass.css +970 -0
  108. package/dist/recipes.d.ts +938 -0
  109. package/dist/recipes.js +939 -0
  110. package/dist/resolve.d.ts +40 -0
  111. package/dist/resolve.js +24 -0
  112. package/dist/retro/ornament.d.ts +5 -0
  113. package/dist/retro/ornament.js +10 -0
  114. package/dist/retro-os.css +867 -0
  115. package/dist/riso/ornament.d.ts +3 -0
  116. package/dist/riso/ornament.js +8 -0
  117. package/dist/riso-zine.css +786 -0
  118. package/dist/sail/ornament.d.ts +3 -0
  119. package/dist/sail/ornament.js +8 -0
  120. package/dist/scrapbook.css +685 -0
  121. package/dist/signal/ornament.d.ts +4 -0
  122. package/dist/signal/ornament.js +11 -0
  123. package/dist/skins/ansi-panes.d.ts +68 -0
  124. package/dist/skins/ansi-panes.js +68 -0
  125. package/dist/skins/art-deco.d.ts +68 -0
  126. package/dist/skins/art-deco.js +68 -0
  127. package/dist/skins/atomic-lounge.d.ts +68 -0
  128. package/dist/skins/atomic-lounge.js +68 -0
  129. package/dist/skins/azulejo-tile.d.ts +68 -0
  130. package/dist/skins/azulejo-tile.js +68 -0
  131. package/dist/skins/blueprint.d.ts +68 -0
  132. package/dist/skins/blueprint.js +68 -0
  133. package/dist/skins/brutalist-concrete.d.ts +68 -0
  134. package/dist/skins/brutalist-concrete.js +68 -0
  135. package/dist/skins/candy-clay.d.ts +57 -0
  136. package/dist/skins/candy-clay.js +57 -0
  137. package/dist/skins/diwali-lights.d.ts +68 -0
  138. package/dist/skins/diwali-lights.js +68 -0
  139. package/dist/skins/freighter.d.ts +68 -0
  140. package/dist/skins/freighter.js +68 -0
  141. package/dist/skins/glass-ui.d.ts +68 -0
  142. package/dist/skins/glass-ui.js +68 -0
  143. package/dist/skins/holi-colours.d.ts +68 -0
  144. package/dist/skins/holi-colours.js +68 -0
  145. package/dist/skins/living-forest.d.ts +68 -0
  146. package/dist/skins/living-forest.js +68 -0
  147. package/dist/skins/lunar-new-year.d.ts +68 -0
  148. package/dist/skins/lunar-new-year.js +68 -0
  149. package/dist/skins/material-light.d.ts +57 -0
  150. package/dist/skins/material-light.js +57 -0
  151. package/dist/skins/neon-night-market.d.ts +68 -0
  152. package/dist/skins/neon-night-market.js +68 -0
  153. package/dist/skins/ocean-depths.d.ts +57 -0
  154. package/dist/skins/ocean-depths.js +57 -0
  155. package/dist/skins/orbital-hud.d.ts +68 -0
  156. package/dist/skins/orbital-hud.js +68 -0
  157. package/dist/skins/papel-picado.d.ts +68 -0
  158. package/dist/skins/papel-picado.js +68 -0
  159. package/dist/skins/phosphor-terminal.d.ts +68 -0
  160. package/dist/skins/phosphor-terminal.js +68 -0
  161. package/dist/skins/prism-glass.d.ts +57 -0
  162. package/dist/skins/prism-glass.js +57 -0
  163. package/dist/skins/retro-os.d.ts +57 -0
  164. package/dist/skins/retro-os.js +57 -0
  165. package/dist/skins/riso-zine.d.ts +68 -0
  166. package/dist/skins/riso-zine.js +68 -0
  167. package/dist/skins/scrapbook.d.ts +57 -0
  168. package/dist/skins/scrapbook.js +57 -0
  169. package/dist/skins/solar-sail.d.ts +68 -0
  170. package/dist/skins/solar-sail.js +68 -0
  171. package/dist/skins/studio-hardware.d.ts +57 -0
  172. package/dist/skins/studio-hardware.js +57 -0
  173. package/dist/skins/sumi-ink.d.ts +68 -0
  174. package/dist/skins/sumi-ink.js +68 -0
  175. package/dist/skins/swiss-poster.d.ts +68 -0
  176. package/dist/skins/swiss-poster.js +68 -0
  177. package/dist/skins/tactile-atelier.d.ts +57 -0
  178. package/dist/skins/tactile-atelier.js +57 -0
  179. package/dist/skins/tokyo-transit.d.ts +68 -0
  180. package/dist/skins/tokyo-transit.js +68 -0
  181. package/dist/skins/winamp-signal.d.ts +57 -0
  182. package/dist/skins/winamp-signal.js +57 -0
  183. package/dist/skins/y2k-titanium.d.ts +57 -0
  184. package/dist/skins/y2k-titanium.js +57 -0
  185. package/dist/skins/yule-knit.d.ts +68 -0
  186. package/dist/skins/yule-knit.js +68 -0
  187. package/dist/solar-sail.css +901 -0
  188. package/dist/starters-launch.d.ts +361 -0
  189. package/dist/starters-launch.js +808 -0
  190. package/dist/studio-hardware.css +867 -0
  191. package/dist/sumi/ornament.d.ts +3 -0
  192. package/dist/sumi/ornament.js +8 -0
  193. package/dist/sumi-ink.css +733 -0
  194. package/dist/swiss/ornament.d.ts +3 -0
  195. package/dist/swiss/ornament.js +8 -0
  196. package/dist/swiss-poster.css +727 -0
  197. package/dist/tactile-atelier.css +922 -0
  198. package/dist/theme-document.schema.json +790 -0
  199. package/dist/theme-schema.d.ts +453 -0
  200. package/dist/theme-schema.js +416 -0
  201. package/dist/titanium/ornament.d.ts +3 -0
  202. package/dist/titanium/ornament.js +11 -0
  203. package/dist/tokyo-transit.css +756 -0
  204. package/dist/transit/ornament.d.ts +3 -0
  205. package/dist/transit/ornament.js +8 -0
  206. package/dist/winamp-signal.css +1048 -0
  207. package/dist/y2k-titanium.css +979 -0
  208. package/dist/yule/ornament.d.ts +3 -0
  209. package/dist/yule/ornament.js +8 -0
  210. package/dist/yule-knit.css +850 -0
  211. package/package.json +351 -3
@@ -0,0 +1,962 @@
1
+ /* Generated by scripts/generate-skins.mjs. Do not edit. */
2
+
3
+ @layer dixy.tokens, dixy.components;
4
+ @layer dixy.tokens {
5
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"] {
6
+ font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif;
7
+ --dixy-font-sans:
8
+ "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif;
9
+ --dixy-font-display:
10
+ "Playfair Display Variable", "Playfair Display", ui-serif, Georgia, serif;
11
+ --dixy-skin-cushion-elevation: var(--dixy-skin-cushion-cast);
12
+ --dixy-card-shadow: var(--dixy-shadow-raised);
13
+ --dixy-skin-depth-shadow: var(
14
+ --dixy-skin-authored-shadow,
15
+ var(--dixy-shadow-raised)
16
+ );
17
+ --dixy-stroke-width: 2px;
18
+ --dixy-card-border-width: 2px;
19
+ --dixy-button-border-width: 2px;
20
+ --dixy-input-border-width: 2px;
21
+ --dixy-dialog-border-width: 2px;
22
+ --dixy-font-heading-lg-family:
23
+ "Playfair Display Variable", "Playfair Display", ui-serif, Georgia, serif;
24
+ --dixy-font-heading-md-family:
25
+ "Playfair Display Variable", "Playfair Display", ui-serif, Georgia, serif;
26
+ --dixy-font-heading-sm-family:
27
+ "Playfair Display Variable", "Playfair Display", ui-serif, Georgia, serif;
28
+ --dixy-font-title-lg-family:
29
+ "Playfair Display Variable", "Playfair Display", ui-serif, Georgia, serif;
30
+ --dixy-font-title-md-family:
31
+ "Playfair Display Variable", "Playfair Display", ui-serif, Georgia, serif;
32
+ --dixy-font-title-sm-family:
33
+ "Playfair Display Variable", "Playfair Display", ui-serif, Georgia, serif;
34
+ --dixy-skin-edge: #1f4fa0;
35
+ --dixy-organic-density: 45;
36
+ --dixy-organic-cornerDensity: 80;
37
+ --dixy-organic-canopyDepth: 40;
38
+ --dixy-organic-variation: 30;
39
+ --dixy-organic-scale: 20;
40
+ --dixy-organic-stemWeight: 40;
41
+ --dixy-organic-motion: 20;
42
+ --dixy-organic-seed: 14;
43
+ --dixy-organic-style: 0;
44
+ --dixy-organic-canopy: 0;
45
+ --dixy-organic-stem: 0;
46
+ --dixy-organic-a: #1f4fa0;
47
+ --dixy-organic-b: #5f86c9;
48
+ --dixy-organic-c: #d79a2b;
49
+ --dixy-organic-d: #eef3fc;
50
+ --dixy-color-text-primary: color-mix(
51
+ in srgb,
52
+ var(--dixy-color-base-12) 70%,
53
+ #0f1d3a
54
+ );
55
+ --dixy-skin-surface: color-mix(
56
+ in srgb,
57
+ var(--dixy-color-background-surface-raised) 30%,
58
+ #fbfaf6
59
+ );
60
+ --dixy-skin-ground: color-mix(
61
+ in srgb,
62
+ var(--dixy-color-background-canvas) 65%,
63
+ #eef2fa
64
+ );
65
+ --dixy-skin-card-inset: 38px 34px 34px;
66
+ --dixy-skin-pad-top: 38px;
67
+ --dixy-skin-pad-inline: 34px;
68
+ --dixy-skin-frame-inset: 10px;
69
+ --dixy-skin-frame-width: 2px;
70
+ --dixy-skin-finish:
71
+ linear-gradient(135deg, rgb(255 255 255 / 0.18), transparent 42%),
72
+ linear-gradient(125deg, #ffffff70 0, transparent 32%),
73
+ repeating-linear-gradient(37deg, transparent 0 23px, #1f4fa008 23px 24px);
74
+ --dixy-skin-grain: radial-gradient(
75
+ circle at 1px 1px,
76
+ #1f4fa008 0.5px,
77
+ transparent 1px
78
+ );
79
+ --dixy-skin-grain-size: 4px;
80
+ --dixy-skin-paint: var(--dixy-skin-grain), var(--dixy-skin-finish);
81
+ --dixy-skin-canvas: conic-gradient(
82
+ from 45deg at 50% 50%,
83
+ #1f4fa00a 0 25%,
84
+ transparent 0 50%,
85
+ #1f4fa00a 0 75%,
86
+ transparent 0
87
+ )
88
+ 0 0/48px 48px;
89
+ --dixy-skin-authored-shadow:
90
+ inset 0 1px 0 #ffffffcc, 0 2px 0 #1f4fa022, 0 10px 20px #0f1d3a14;
91
+ --dixy-skin-shadow: var(
92
+ --dixy-skin-depth-shadow,
93
+ var(--dixy-skin-authored-shadow)
94
+ );
95
+ --dixy-skin-inset: inset 0 2px 3px #1f4fa026;
96
+ --dixy-skin-control-edge:
97
+ inset 0 1px 0 rgb(255 255 255 / 0.4), inset 0 -1px 0 #0002;
98
+ --dixy-skin-cushion:
99
+ inset 0 0.6000000000000001px 1px #ffffff66,
100
+ inset 0 -1px 1.6px
101
+ color-mix(in srgb, var(--dixy-skin-edge) 8%, transparent),
102
+ var(--dixy-skin-cushion-elevation);
103
+ --dixy-skin-cushion-cast: 0 2px 2.8000000000000003px
104
+ color-mix(in srgb, var(--dixy-skin-edge) 5.6000000000000005%, transparent);
105
+ --dixy-skin-panel-relief: var(--dixy-skin-cushion), var(--dixy-skin-shadow);
106
+ --dixy-skin-control-relief:
107
+ var(--dixy-skin-cushion), var(--dixy-skin-control-edge),
108
+ var(--dixy-skin-shadow);
109
+ --dixy-skin-thumb: radial-gradient(
110
+ circle at 30% 25%,
111
+ #ffffff,
112
+ #dfe8fa 55%,
113
+ #1f4fa0
114
+ );
115
+ --dixy-skin-mark-opacity: 1;
116
+ --dixy-font-display-lg-weight: 500;
117
+ --dixy-font-display-lg-letter-spacing: -0.01em;
118
+ --dixy-font-display-md-weight: 500;
119
+ --dixy-font-display-md-letter-spacing: -0.01em;
120
+ --dixy-font-display-sm-weight: 500;
121
+ --dixy-font-display-sm-letter-spacing: -0.01em;
122
+ --dixy-font-heading-lg-weight: 500;
123
+ --dixy-font-heading-lg-letter-spacing: -0.01em;
124
+ --dixy-font-heading-md-weight: 500;
125
+ --dixy-font-heading-md-letter-spacing: -0.01em;
126
+ --dixy-font-heading-sm-weight: 500;
127
+ --dixy-font-heading-sm-letter-spacing: -0.01em;
128
+ --dixy-font-title-lg-weight: 500;
129
+ --dixy-font-title-lg-letter-spacing: -0.01em;
130
+ --dixy-font-title-md-weight: 500;
131
+ --dixy-font-title-md-letter-spacing: -0.01em;
132
+ --dixy-font-title-sm-weight: 500;
133
+ --dixy-font-title-sm-letter-spacing: -0.01em;
134
+ }
135
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"][data-appearance="dark"] {
136
+ --dixy-organic-a: #8fb3ff;
137
+ --dixy-organic-b: #4f74c0;
138
+ --dixy-organic-c: #e8c06a;
139
+ --dixy-organic-d: #1a2d57;
140
+ --dixy-skin-selected: var(--dixy-skin-finish);
141
+ --dixy-color-text-primary: color-mix(
142
+ in srgb,
143
+ var(--dixy-color-base-12) 70%,
144
+ #fbfaf6
145
+ );
146
+ --dixy-skin-edge: #8fb3ff;
147
+ --dixy-skin-surface: color-mix(
148
+ in srgb,
149
+ var(--dixy-color-background-surface-raised) 35%,
150
+ #0f1d3a
151
+ );
152
+ --dixy-skin-ground: color-mix(
153
+ in srgb,
154
+ var(--dixy-color-background-canvas) 65%,
155
+ #0f1d3a
156
+ );
157
+ }
158
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"][data-relief="2"] {
159
+ --dixy-skin-shadow:
160
+ var(--dixy-skin-depth-shadow, var(--dixy-skin-authored-shadow)),
161
+ 0 10px 18px #0002;
162
+ }
163
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"][data-relief="0"],
164
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"][data-effects="reduced"] {
165
+ --dixy-skin-shadow: none;
166
+ --dixy-skin-inset: none;
167
+ --dixy-skin-control-edge: none;
168
+ --dixy-skin-panel-relief: none;
169
+ --dixy-skin-control-relief: none;
170
+ }
171
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"][data-effects="reduced"] {
172
+ --dixy-skin-paint: none;
173
+ --dixy-skin-finish: none;
174
+ --dixy-skin-canvas: none;
175
+ --dixy-skin-thumb: none;
176
+ --dixy-skin-mark-opacity: 0;
177
+ }
178
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"][data-ornament="quiet"] {
179
+ --dixy-skin-mark-opacity: 0;
180
+ }
181
+ }
182
+ @layer dixy.components {
183
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"] {
184
+ position: relative;
185
+ isolation: isolate;
186
+ }
187
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]:not(.dixy-portal-scope) {
188
+ background-color: var(--dixy-skin-ground);
189
+ background-image: var(--dixy-skin-canvas);
190
+ }
191
+ :is(
192
+ .dixy-card,
193
+ .dixy-box,
194
+ .dixy-dialog-popup,
195
+ .dixy-alert-dialog-popup,
196
+ .dixy-drawer-popup,
197
+ .dixy-popover-popup,
198
+ .dixy-preview-card-popup,
199
+ .dixy-tooltip-popup,
200
+ .dixy-select-popup,
201
+ .dixy-combobox-popup,
202
+ .dixy-autocomplete-popup,
203
+ .dixy-menu-popup,
204
+ .dixy-context-menu-popup,
205
+ .dixy-navigation-menu-popup,
206
+ .dixy-toast-root,
207
+ .dixy-alert,
208
+ .dixy-list-box,
209
+ .dixy-calendar,
210
+ .dixy-range-calendar
211
+ )[data-dixy-skin="dixy/azulejo-tile"] {
212
+ position: relative;
213
+ border-radius: calc(var(--dixy-radius-card) * 1);
214
+ }
215
+ :is(
216
+ .dixy-dialog-popup,
217
+ .dixy-alert-dialog-popup,
218
+ .dixy-drawer-popup,
219
+ .dixy-popover-popup,
220
+ .dixy-preview-card-popup,
221
+ .dixy-tooltip-popup,
222
+ .dixy-select-popup,
223
+ .dixy-combobox-popup,
224
+ .dixy-autocomplete-popup,
225
+ .dixy-menu-popup,
226
+ .dixy-context-menu-popup,
227
+ .dixy-navigation-menu-popup
228
+ )[data-dixy-skin="dixy/azulejo-tile"] {
229
+ border-radius: calc(var(--dixy-radius-overlay) * 1);
230
+ }
231
+ :is(.dixy-card, .dixy-dialog-popup)[data-dixy-skin="dixy/azulejo-tile"] {
232
+ padding: var(--dixy-skin-card-inset);
233
+ border: 2px solid var(--dixy-skin-edge);
234
+ }
235
+ :is(
236
+ .dixy-card,
237
+ .dixy-box,
238
+ .dixy-dialog-popup,
239
+ .dixy-alert-dialog-popup,
240
+ .dixy-drawer-popup,
241
+ .dixy-popover-popup,
242
+ .dixy-preview-card-popup,
243
+ .dixy-tooltip-popup,
244
+ .dixy-select-popup,
245
+ .dixy-combobox-popup,
246
+ .dixy-autocomplete-popup,
247
+ .dixy-menu-popup,
248
+ .dixy-context-menu-popup,
249
+ .dixy-navigation-menu-popup,
250
+ .dixy-toast-root,
251
+ .dixy-alert,
252
+ .dixy-list-box,
253
+ .dixy-calendar,
254
+ .dixy-range-calendar
255
+ )[data-dixy-skin="dixy/azulejo-tile"]:not(
256
+ [data-dixy-material-override]
257
+ ):not(:where([data-dixy-material-override]) *) {
258
+ background-image: var(--dixy-skin-paint);
259
+ background-size:
260
+ var(--dixy-skin-grain-size) var(--dixy-skin-grain-size),
261
+ 100% 100%,
262
+ 100% 100%,
263
+ 100% 100%;
264
+ box-shadow: var(--dixy-skin-panel-relief);
265
+ }
266
+ :is(
267
+ .dixy-card,
268
+ .dixy-box,
269
+ .dixy-dialog-popup,
270
+ .dixy-alert-dialog-popup,
271
+ .dixy-drawer-popup,
272
+ .dixy-popover-popup,
273
+ .dixy-preview-card-popup,
274
+ .dixy-tooltip-popup,
275
+ .dixy-select-popup,
276
+ .dixy-combobox-popup,
277
+ .dixy-autocomplete-popup,
278
+ .dixy-menu-popup,
279
+ .dixy-context-menu-popup,
280
+ .dixy-navigation-menu-popup,
281
+ .dixy-toast-root,
282
+ .dixy-alert,
283
+ .dixy-list-box,
284
+ .dixy-calendar,
285
+ .dixy-range-calendar
286
+ )[data-dixy-skin="dixy/azulejo-tile"]:not(
287
+ [data-dixy-material-override]
288
+ ):not(:where([data-dixy-material-override]) *):not(
289
+ [data-variant="solid"]
290
+ ):not([data-variant="soft"]) {
291
+ background-color: var(--dixy-skin-surface);
292
+ }
293
+ :is(
294
+ .dixy-input,
295
+ .dixy-textarea,
296
+ .dixy-native-select,
297
+ .dixy-select-trigger,
298
+ .dixy-input-group,
299
+ .dixy-combobox-input-group,
300
+ .dixy-autocomplete-input-group,
301
+ .dixy-number-field-group,
302
+ .dixy-otp-field-input
303
+ )[data-dixy-skin="dixy/azulejo-tile"] {
304
+ border-radius: calc(var(--dixy-radius-control) * 1);
305
+ }
306
+ :is(
307
+ .dixy-input,
308
+ .dixy-textarea,
309
+ .dixy-native-select,
310
+ .dixy-select-trigger,
311
+ .dixy-input-group,
312
+ .dixy-combobox-input-group,
313
+ .dixy-autocomplete-input-group,
314
+ .dixy-number-field-group,
315
+ .dixy-otp-field-input
316
+ )[data-dixy-skin="dixy/azulejo-tile"]:not(
317
+ [data-dixy-material-override]
318
+ ):not(:where([data-dixy-material-override]) *) {
319
+ border-width: var(--dixy-input-border-width);
320
+ border-color: var(--dixy-skin-edge);
321
+ background-image: var(--dixy-skin-paint);
322
+ background-color: var(--dixy-color-background-canvas);
323
+ background-size:
324
+ var(--dixy-skin-grain-size) var(--dixy-skin-grain-size),
325
+ 100% 100%,
326
+ 100% 100%,
327
+ 100% 100%;
328
+ box-shadow: var(--dixy-skin-inset);
329
+ }
330
+ :is(.dixy-button)[data-dixy-skin="dixy/azulejo-tile"]:not(
331
+ [data-dixy-material-override]
332
+ ):not(:where([data-dixy-material-override]) *):is(
333
+ [data-variant="solid"],
334
+ [data-variant="soft"],
335
+ [data-variant="outline"]
336
+ ):not([data-disabled]) {
337
+ border-width: var(--dixy-button-border-width);
338
+ border-color: var(--dixy-skin-edge);
339
+ border-radius: calc(var(--dixy-shape-control) * 1);
340
+ background-image: var(--dixy-skin-finish);
341
+ box-shadow: var(--dixy-skin-control-relief);
342
+ }
343
+
344
+ :is(.dixy-button)[data-dixy-skin="dixy/azulejo-tile"]:not(
345
+ [data-dixy-material-override]
346
+ ):not(:where([data-dixy-material-override]) *):is(
347
+ [data-variant="solid"],
348
+ [data-variant="soft"],
349
+ [data-variant="outline"]
350
+ ):not([data-disabled]):active {
351
+ box-shadow: var(--dixy-skin-inset);
352
+ }
353
+ :is(.dixy-tabs-list)[data-dixy-skin="dixy/azulejo-tile"]:not(
354
+ [data-dixy-material-override]
355
+ ):not(:where([data-dixy-material-override]) *) {
356
+ background-color: var(--dixy-color-background-canvas);
357
+ border: 1px solid var(--dixy-skin-edge);
358
+ box-shadow: var(--dixy-skin-inset);
359
+ }
360
+ :is(.dixy-tabs-indicator)[data-dixy-skin="dixy/azulejo-tile"]:not(
361
+ [data-dixy-material-override]
362
+ ):not(:where([data-dixy-material-override]) *) {
363
+ background-image: var(--dixy-skin-finish);
364
+ box-shadow: var(--dixy-skin-control-relief);
365
+ border: 1px solid var(--dixy-skin-edge);
366
+ }
367
+ /* Toggle groups read like tabs: a sunken track, the selected toggle a raised thumb (slider-knob paint in light, the raised finish in dark so its label stays readable). */
368
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
369
+ .dixy-toggle-group:is([data-attached], [data-segmented]):not(
370
+ [data-dixy-material-override]
371
+ ):not(:where([data-dixy-material-override]) *) {
372
+ background-color: var(--dixy-color-background-canvas);
373
+ border: 1px solid var(--dixy-skin-edge);
374
+ box-shadow: var(--dixy-skin-inset);
375
+ }
376
+ :is(.dixy-toggle)[data-dixy-skin="dixy/azulejo-tile"]:not(
377
+ [data-dixy-material-override]
378
+ ):not(:where([data-dixy-material-override]) *):not(
379
+ [data-variant="solid"]
380
+ )[data-pressed]:not([data-disabled]) {
381
+ background-color: var(--dixy-color-background-surface-raised);
382
+ background-image: var(--dixy-skin-selected, var(--dixy-skin-thumb));
383
+ box-shadow: var(--dixy-skin-control-relief);
384
+ border-color: var(--dixy-skin-edge);
385
+ color: var(--dixy-color-text-primary);
386
+ }
387
+ :is(
388
+ .dixy-slider-track,
389
+ .dixy-progress-track,
390
+ .dixy-meter-track
391
+ )[data-dixy-skin="dixy/azulejo-tile"]:not(
392
+ [data-dixy-material-override]
393
+ ):not(:where([data-dixy-material-override]) *) {
394
+ border: 1px solid var(--dixy-skin-edge);
395
+ background-color: var(--dixy-color-background-surface);
396
+ box-shadow: var(--dixy-skin-inset);
397
+ }
398
+ :is(
399
+ .dixy-slider-indicator,
400
+ .dixy-progress-indicator,
401
+ .dixy-meter-indicator
402
+ )[data-dixy-skin="dixy/azulejo-tile"]:not(
403
+ [data-dixy-material-override]
404
+ ):not(:where([data-dixy-material-override]) *) {
405
+ background-image: var(--dixy-skin-finish);
406
+ }
407
+ :is(
408
+ .dixy-switch-root,
409
+ .dixy-checkbox-root,
410
+ .dixy-radio-root
411
+ )[data-dixy-skin="dixy/azulejo-tile"]:not(
412
+ [data-dixy-material-override]
413
+ ):not(:where([data-dixy-material-override]) *)::before {
414
+ box-shadow: var(--dixy-skin-inset);
415
+ }
416
+ :is(
417
+ .dixy-checkbox-root,
418
+ .dixy-radio-root
419
+ )[data-dixy-skin="dixy/azulejo-tile"]:not(
420
+ [data-dixy-material-override]
421
+ ):not(:where([data-dixy-material-override]) *)[data-checked]::before {
422
+ background-image: var(--dixy-skin-finish);
423
+ }
424
+ :is(.dixy-switch-thumb)[data-dixy-skin="dixy/azulejo-tile"]:not(
425
+ [data-dixy-material-override]
426
+ ):not(:where([data-dixy-material-override]) *) {
427
+ background-image: var(--dixy-skin-thumb);
428
+ box-shadow: var(--dixy-skin-control-relief);
429
+ border: 1px solid var(--dixy-skin-edge);
430
+ }
431
+ :is(.dixy-slider-thumb)[data-dixy-skin="dixy/azulejo-tile"]:not(
432
+ [data-dixy-material-override]
433
+ ):not(:where([data-dixy-material-override]) *)::before {
434
+ background-image: var(--dixy-skin-thumb);
435
+ box-shadow: var(--dixy-skin-control-relief);
436
+ border: 1px solid var(--dixy-skin-edge);
437
+ }
438
+
439
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"] .dixy-azulejo-ornament {
440
+ position: absolute;
441
+ inset: 0;
442
+ display: block;
443
+ pointer-events: none;
444
+ user-select: none;
445
+ border-radius: inherit;
446
+ z-index: 1;
447
+ color: var(--dixy-skin-edge);
448
+ }
449
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
450
+ .dixy-azulejo-ornament:is(
451
+ .dixy-skin-ornament-card,
452
+ .dixy-skin-ornament-dialog
453
+ ) {
454
+ clip-path: polygon(
455
+ evenodd,
456
+ 0 0,
457
+ 100% 0,
458
+ 100% 100%,
459
+ 0 100%,
460
+ 0 0,
461
+ var(--dixy-skin-frame-safe-inline, 26px)
462
+ var(--dixy-skin-frame-safe-top, 30px),
463
+ var(--dixy-skin-frame-safe-inline, 26px)
464
+ calc(100% - var(--dixy-skin-frame-safe-bottom, 26px)),
465
+ calc(100% - var(--dixy-skin-frame-safe-inline, 26px))
466
+ calc(100% - var(--dixy-skin-frame-safe-bottom, 26px)),
467
+ calc(100% - var(--dixy-skin-frame-safe-inline, 26px))
468
+ var(--dixy-skin-frame-safe-top, 30px),
469
+ var(--dixy-skin-frame-safe-inline, 26px)
470
+ var(--dixy-skin-frame-safe-top, 30px)
471
+ );
472
+ }
473
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
474
+ .dixy-azulejo-ornament.dixy-skin-ornament-theme {
475
+ z-index: -1;
476
+ overflow: hidden;
477
+ }
478
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
479
+ .dixy-azulejo-ornament
480
+ .dixy-skin-definitions {
481
+ position: absolute;
482
+ overflow: hidden;
483
+ }
484
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
485
+ .dixy-azulejo-ornament
486
+ .dixy-skin-control-art {
487
+ width: 100%;
488
+ height: 100%;
489
+ }
490
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
491
+ .dixy-azulejo-ornament.dixy-skin-ornament-switch-thumb {
492
+ display: grid;
493
+ place-items: center;
494
+ inset: 2px;
495
+ }
496
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
497
+ .dixy-switch-thumb:not([data-checked])
498
+ > .dixy-azulejo-ornament {
499
+ display: none;
500
+ }
501
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
502
+ .dixy-azulejo-ornament
503
+ .dixy-skin-fastener {
504
+ position: absolute;
505
+ width: 11px;
506
+ height: 11px;
507
+ }
508
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
509
+ .dixy-azulejo-ornament
510
+ .dixy-skin-fastener-tl {
511
+ top: 5px;
512
+ left: 5px;
513
+ }
514
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
515
+ .dixy-azulejo-ornament
516
+ .dixy-skin-fastener-tr {
517
+ top: 5px;
518
+ right: 5px;
519
+ }
520
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
521
+ .dixy-azulejo-ornament
522
+ .dixy-skin-fastener-bl {
523
+ bottom: 5px;
524
+ left: 5px;
525
+ }
526
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
527
+ .dixy-azulejo-ornament
528
+ .dixy-skin-fastener-br {
529
+ bottom: 5px;
530
+ right: 5px;
531
+ }
532
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
533
+ .dixy-azulejo-ornament[data-animated]
534
+ .dixy-skin-motion {
535
+ animation: dixy-azulejo-detail 4s ease-in-out infinite alternate;
536
+ }
537
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
538
+ .dixy-azulejo-ornament[data-motion="reduced"]
539
+ .dixy-skin-motion {
540
+ animation: none;
541
+ }
542
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
543
+ .dixy-azulejo-ornament
544
+ .dixy-frame-corner {
545
+ position: absolute;
546
+ width: min(64px, 50%);
547
+ height: min(64px, 50%);
548
+ overflow: visible;
549
+ }
550
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
551
+ .dixy-azulejo-ornament
552
+ .dixy-frame-corner-tl {
553
+ left: 0;
554
+ top: 0;
555
+ }
556
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
557
+ .dixy-azulejo-ornament
558
+ .dixy-frame-corner-tr {
559
+ right: 0;
560
+ top: 0;
561
+ transform: scaleX(-1);
562
+ }
563
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
564
+ .dixy-azulejo-ornament
565
+ .dixy-frame-corner-bl {
566
+ left: 0;
567
+ bottom: 0;
568
+ transform: scaleY(-1);
569
+ }
570
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
571
+ .dixy-azulejo-ornament
572
+ .dixy-frame-corner-br {
573
+ right: 0;
574
+ bottom: 0;
575
+ transform: scale(-1);
576
+ }
577
+ @media (prefers-reduced-motion: reduce) {
578
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
579
+ .dixy-azulejo-ornament[data-animated]
580
+ .dixy-skin-motion {
581
+ animation: none;
582
+ }
583
+ }
584
+ @media (prefers-reduced-transparency: reduce),
585
+ (prefers-contrast: more),
586
+ (forced-colors: active) {
587
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"] .dixy-azulejo-ornament {
588
+ display: none;
589
+ }
590
+ }
591
+ @keyframes dixy-azulejo-detail {
592
+ from {
593
+ opacity: 0.5;
594
+ }
595
+ to {
596
+ opacity: 1;
597
+ }
598
+ }
599
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
600
+ :is(.dixy-forest-paper, .dixy-atelier-paper, .dixy-atelier-linen) {
601
+ display: none;
602
+ }
603
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
604
+ .dixy-azulejo-ornament.dixy-organic-ornament {
605
+ clip-path: none;
606
+ overflow: visible;
607
+ border-radius: inherit;
608
+ }
609
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
610
+ .dixy-azulejo-ornament
611
+ .dixy-organic-canvas {
612
+ display: block;
613
+ position: absolute;
614
+ left: -32px;
615
+ top: -32px;
616
+ width: calc(100% + 64px);
617
+ height: calc(100% + 64px);
618
+ pointer-events: none;
619
+ }
620
+
621
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
622
+ :is(.dixy-switch-thumb)[data-dixy-skin="dixy/azulejo-tile"] {
623
+ border-radius: 999px;
624
+ background-image: radial-gradient(
625
+ circle at 32% 28%,
626
+ #fff 0 14%,
627
+ color-mix(in srgb, var(--dixy-color-background-action-primary) 18%, #fff)
628
+ 42%,
629
+ color-mix(
630
+ in srgb,
631
+ var(--dixy-color-background-action-primary) 45%,
632
+ #f4efe6
633
+ )
634
+ 100%
635
+ );
636
+ box-shadow:
637
+ 0 3px 8px
638
+ color-mix(
639
+ in srgb,
640
+ var(--dixy-color-background-action-primary) 30%,
641
+ transparent
642
+ ),
643
+ inset 0 -2px 3px
644
+ color-mix(
645
+ in srgb,
646
+ var(--dixy-color-background-action-primary) 25%,
647
+ transparent
648
+ );
649
+ }
650
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
651
+ :is(.dixy-switch-root)[data-dixy-skin="dixy/azulejo-tile"]::before {
652
+ border-radius: 999px;
653
+ }
654
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
655
+ :is(
656
+ .dixy-radio-root
657
+ )[data-dixy-skin="dixy/azulejo-tile"][data-checked]::before {
658
+ background-image: radial-gradient(
659
+ circle at 32% 28%,
660
+ #fff 0 14%,
661
+ color-mix(in srgb, var(--dixy-color-background-action-primary) 18%, #fff)
662
+ 42%,
663
+ color-mix(
664
+ in srgb,
665
+ var(--dixy-color-background-action-primary) 45%,
666
+ #f4efe6
667
+ )
668
+ 100%
669
+ );
670
+ }
671
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
672
+ :is(.dixy-slider-thumb)[data-dixy-skin="dixy/azulejo-tile"]::before {
673
+ transform: translate(-50%, -50%);
674
+ background-image: radial-gradient(
675
+ circle at 32% 28%,
676
+ #fff 0 14%,
677
+ color-mix(in srgb, var(--dixy-color-background-action-primary) 18%, #fff)
678
+ 42%,
679
+ color-mix(
680
+ in srgb,
681
+ var(--dixy-color-background-action-primary) 45%,
682
+ #f4efe6
683
+ )
684
+ 100%
685
+ );
686
+ box-shadow: 0 3px 10px
687
+ color-mix(
688
+ in srgb,
689
+ var(--dixy-color-background-action-primary) 35%,
690
+ transparent
691
+ );
692
+ }
693
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
694
+ :is(
695
+ .dixy-slider-track,
696
+ .dixy-progress-track,
697
+ .dixy-meter-track
698
+ )[data-dixy-skin="dixy/azulejo-tile"] {
699
+ border-radius: 999px;
700
+ }
701
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
702
+ :is(
703
+ .dixy-slider-indicator,
704
+ .dixy-progress-indicator,
705
+ .dixy-meter-indicator
706
+ )[data-dixy-skin="dixy/azulejo-tile"] {
707
+ background-image: linear-gradient(
708
+ 90deg,
709
+ color-mix(
710
+ in srgb,
711
+ var(--dixy-color-background-action-primary) 60%,
712
+ #bfe9e4
713
+ ),
714
+ var(--dixy-color-background-action-primary),
715
+ color-mix(
716
+ in srgb,
717
+ var(--dixy-color-background-action-primary) 60%,
718
+ #f2d7e8
719
+ )
720
+ );
721
+ }
722
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"][data-radius="none"]
723
+ :is(
724
+ .dixy-switch-thumb,
725
+ .dixy-slider-track,
726
+ .dixy-progress-track,
727
+ .dixy-meter-track,
728
+ .dixy-slider-indicator,
729
+ .dixy-progress-indicator,
730
+ .dixy-meter-indicator
731
+ )[data-dixy-skin],
732
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"][data-radius="none"]
733
+ :is(
734
+ .dixy-switch-root,
735
+ .dixy-checkbox-root,
736
+ .dixy-slider-thumb
737
+ )[data-dixy-skin]::before {
738
+ border-radius: 0;
739
+ }
740
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"] {
741
+ --dixy-motion-easing-standard: cubic-bezier(0.5, 0, 0.1, 1);
742
+ --dixy-motion-easing-enter: cubic-bezier(0.5, 0, 0.1, 1);
743
+ }
744
+ @media (prefers-reduced-motion: no-preference) {
745
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]:not(
746
+ [data-motion="reduced"]
747
+ ) {
748
+ --dixy-motion-duration-fast: 172ms;
749
+ --dixy-motion-duration-normal: 286ms;
750
+ --dixy-motion-duration-deliberate: 400ms;
751
+ --dixy-motion-duration-slow: 572ms;
752
+ }
753
+ }
754
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
755
+ :is(h1, h2, h3, .dixy-heading) {
756
+ letter-spacing: -0.01em;
757
+ }
758
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
759
+ :is(h1, h2, h3, .dixy-heading) {
760
+ font-weight: 500;
761
+ }
762
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"] {
763
+ font-variant-numeric: oldstyle-nums;
764
+ }
765
+
766
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
767
+ :is(.dixy-tabs-indicator)[data-dixy-skin="dixy/azulejo-tile"] {
768
+ box-shadow:
769
+ inset 0 0 0 1px var(--dixy-skin-edge),
770
+ inset 0 0 0 3px var(--dixy-color-background-surface),
771
+ inset 0 0 0 4px var(--dixy-skin-edge);
772
+ }
773
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
774
+ :is(
775
+ .dixy-input,
776
+ .dixy-textarea,
777
+ .dixy-native-select,
778
+ .dixy-select-trigger,
779
+ .dixy-input-group,
780
+ .dixy-number-field-group
781
+ )[data-dixy-skin="dixy/azulejo-tile"]:is(
782
+ [data-invalid],
783
+ [aria-invalid="true"]
784
+ ) {
785
+ border-style: double;
786
+ border-width: 3px;
787
+ border-color: var(--dixy-color-border-danger);
788
+ }
789
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
790
+ [data-dixy-skin]:focus-visible,
791
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
792
+ [data-dixy-skin]
793
+ :focus-visible {
794
+ outline-style: double;
795
+ outline-width: 4px;
796
+ outline-offset: 2px;
797
+ }
798
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
799
+ :is(.dixy-separator)[data-dixy-skin="dixy/azulejo-tile"]:not(
800
+ [aria-orientation="vertical"]
801
+ ) {
802
+ background: linear-gradient(
803
+ 180deg,
804
+ var(--dixy-skin-edge) 0 1px,
805
+ transparent 1px calc(100% - 1px),
806
+ var(--dixy-skin-edge) calc(100% - 1px)
807
+ );
808
+ block-size: 4px;
809
+ }
810
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
811
+ :is(
812
+ .dixy-separator
813
+ )[data-dixy-skin="dixy/azulejo-tile"][aria-orientation="vertical"] {
814
+ background: linear-gradient(
815
+ 90deg,
816
+ var(--dixy-skin-edge) 0 1px,
817
+ transparent 1px calc(100% - 1px),
818
+ var(--dixy-skin-edge) calc(100% - 1px)
819
+ );
820
+ inline-size: 4px;
821
+ }
822
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"] {
823
+ scrollbar-color: var(--dixy-color-background-action-primary)
824
+ color-mix(
825
+ in srgb,
826
+ var(--dixy-color-background-action-primary) 12%,
827
+ transparent
828
+ );
829
+ }
830
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
831
+ svg[stroke="currentColor"]:not(.dixy-skin-ornament svg) {
832
+ stroke-width: 1.75;
833
+ }
834
+
835
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]:not(
836
+ .dixy-portal-scope
837
+ )::before {
838
+ content: "";
839
+ position: absolute;
840
+ inset: 0;
841
+ z-index: -1;
842
+ pointer-events: none;
843
+ border-radius: inherit;
844
+ opacity: 0.25;
845
+ --dixy-skin-pattern-ink: color-mix(
846
+ in srgb,
847
+ var(--dixy-skin-edge) 40%,
848
+ transparent
849
+ );
850
+ background-image: radial-gradient(
851
+ var(--dixy-skin-pattern-ink) 1.2px,
852
+ transparent 1.7px
853
+ );
854
+ background-size: 24px 24px;
855
+ }
856
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"][data-effects="reduced"]::before {
857
+ display: none;
858
+ }
859
+ @media (prefers-reduced-transparency: reduce),
860
+ (prefers-contrast: more),
861
+ (forced-colors: active) {
862
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]::before {
863
+ display: none;
864
+ }
865
+ }
866
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
867
+ :is(.dixy-card, .dixy-dialog-popup)[data-dixy-skin="dixy/azulejo-tile"] {
868
+ border: 1px solid var(--dixy-skin-edge);
869
+ box-shadow:
870
+ 0 0 0 3px var(--dixy-skin-surface),
871
+ 0 0 0 4px var(--dixy-skin-edge),
872
+ var(--dixy-skin-panel-relief);
873
+ }
874
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
875
+ :is(.dixy-card, .dixy-dialog-popup)[data-dixy-skin="dixy/azulejo-tile"] {
876
+ border-radius: 16px;
877
+ --dixy-chrome-bar-radius: 13px;
878
+ }
879
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
880
+ :is(.dixy-card)[data-dixy-skin="dixy/azulejo-tile"]
881
+ > .dixy-card-header
882
+ + .dixy-card-content {
883
+ position: relative;
884
+ padding: 12px 14px;
885
+ }
886
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
887
+ :is(.dixy-card)[data-dixy-skin="dixy/azulejo-tile"]
888
+ > .dixy-card-header
889
+ + .dixy-card-content {
890
+ color: var(--dixy-color-text-primary);
891
+ background-color: color-mix(
892
+ in srgb,
893
+ var(--dixy-color-background-canvas) 62%,
894
+ transparent
895
+ );
896
+ background-image: linear-gradient(
897
+ 160deg,
898
+ color-mix(in srgb, #ffffff 22%, transparent),
899
+ transparent 45%
900
+ );
901
+ border: 1px solid color-mix(in srgb, #ffffff 40%, transparent);
902
+ border-radius: 14px;
903
+ box-shadow:
904
+ inset 0 1px 0 color-mix(in srgb, #ffffff 55%, transparent),
905
+ 0 1px 2px color-mix(in srgb, var(--dixy-skin-edge) 25%, transparent);
906
+ }
907
+ @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
908
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]
909
+ :is(.dixy-card)[data-dixy-skin="dixy/azulejo-tile"]
910
+ > .dixy-card-header
911
+ + .dixy-card-content {
912
+ background-color: var(--dixy-color-background-canvas);
913
+ background-image: none;
914
+ }
915
+ }
916
+
917
+ @supports (backdrop-filter: blur(8px)) {
918
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"][data-effects="backdrop"]
919
+ > .dixy-skin-backdrop {
920
+ backdrop-filter: blur(8px);
921
+ }
922
+ }
923
+ @media (prefers-reduced-transparency: reduce),
924
+ (prefers-contrast: more),
925
+ (forced-colors: active) {
926
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"] {
927
+ --dixy-skin-paint: none;
928
+ --dixy-skin-finish: none;
929
+ --dixy-skin-canvas: none;
930
+ --dixy-skin-thumb: none;
931
+ --dixy-skin-shadow: none;
932
+ --dixy-skin-inset: none;
933
+ --dixy-skin-panel-relief: none;
934
+ --dixy-skin-control-relief: none;
935
+ }
936
+ .dixy-theme[data-dixy-skin="dixy/azulejo-tile"] > .dixy-skin-backdrop,
937
+ :is(
938
+ .dixy-card,
939
+ .dixy-box,
940
+ .dixy-dialog-popup,
941
+ .dixy-alert-dialog-popup,
942
+ .dixy-drawer-popup,
943
+ .dixy-popover-popup,
944
+ .dixy-preview-card-popup,
945
+ .dixy-tooltip-popup,
946
+ .dixy-select-popup,
947
+ .dixy-combobox-popup,
948
+ .dixy-autocomplete-popup,
949
+ .dixy-menu-popup,
950
+ .dixy-context-menu-popup,
951
+ .dixy-navigation-menu-popup,
952
+ .dixy-toast-root,
953
+ .dixy-alert,
954
+ .dixy-list-box,
955
+ .dixy-calendar,
956
+ .dixy-range-calendar
957
+ )[data-dixy-skin="dixy/azulejo-tile"] {
958
+ backdrop-filter: none !important;
959
+ -webkit-backdrop-filter: none !important;
960
+ }
961
+ }
962
+ }