@dixy-ui/themes 0.0.0-stage → 0.1.0-beta.1

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