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