@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,786 @@
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/riso-zine"] {
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
+ "Archivo Black", "Arial Black", ui-sans-serif, sans-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
+ "Archivo Black", "Arial Black", ui-sans-serif, sans-serif;
24
+ --dixy-font-heading-md-family:
25
+ "Archivo Black", "Arial Black", ui-sans-serif, sans-serif;
26
+ --dixy-font-heading-sm-family:
27
+ "Archivo Black", "Arial Black", ui-sans-serif, sans-serif;
28
+ --dixy-font-title-lg-family:
29
+ "Archivo Black", "Arial Black", ui-sans-serif, sans-serif;
30
+ --dixy-font-title-md-family:
31
+ "Archivo Black", "Arial Black", ui-sans-serif, sans-serif;
32
+ --dixy-font-title-sm-family:
33
+ "Archivo Black", "Arial Black", ui-sans-serif, sans-serif;
34
+ --dixy-skin-edge: #2a2a2a;
35
+ --dixy-organic-density: 40;
36
+ --dixy-organic-cornerDensity: 70;
37
+ --dixy-organic-canopyDepth: 30;
38
+ --dixy-organic-variation: 55;
39
+ --dixy-organic-scale: 22;
40
+ --dixy-organic-stemWeight: 40;
41
+ --dixy-organic-motion: 20;
42
+ --dixy-organic-seed: 29;
43
+ --dixy-organic-style: 0;
44
+ --dixy-organic-canopy: 0;
45
+ --dixy-organic-stem: 0;
46
+ --dixy-organic-a: #ff48b0;
47
+ --dixy-organic-b: #0078bf;
48
+ --dixy-organic-c: #ffe14d;
49
+ --dixy-organic-d: #2a2a2a;
50
+
51
+ --dixy-skin-surface: color-mix(
52
+ in srgb,
53
+ var(--dixy-color-background-surface-raised) 35%,
54
+ #f7f1e1
55
+ );
56
+ --dixy-skin-ground: color-mix(
57
+ in srgb,
58
+ var(--dixy-color-background-canvas) 65%,
59
+ #efe5cc
60
+ );
61
+ --dixy-skin-card-inset: 34px 32px 32px;
62
+ --dixy-skin-pad-top: 34px;
63
+ --dixy-skin-pad-inline: 32px;
64
+ --dixy-skin-frame-inset: 10px;
65
+ --dixy-skin-frame-width: 2px;
66
+ --dixy-skin-finish:
67
+ linear-gradient(135deg, rgb(255 255 255 / 0), transparent 42%),
68
+ radial-gradient(circle at 2px 2px, #0000000a 0.6px, transparent 1px);
69
+ --dixy-skin-grain: radial-gradient(
70
+ circle at 1px 1px,
71
+ #3a2f2010 0.6px,
72
+ transparent 1px
73
+ );
74
+ --dixy-skin-grain-size: 5.6px;
75
+ --dixy-skin-paint: var(--dixy-skin-grain), var(--dixy-skin-finish);
76
+ --dixy-skin-canvas: radial-gradient(
77
+ circle at 1px 1px,
78
+ #ff48b014 0.8px,
79
+ transparent 1.2px
80
+ )
81
+ 0 0/6px 6px;
82
+ --dixy-skin-authored-shadow: 3px 3px 0 #0078bf44;
83
+ --dixy-skin-shadow: var(
84
+ --dixy-skin-depth-shadow,
85
+ var(--dixy-skin-authored-shadow)
86
+ );
87
+ --dixy-skin-inset: inset 1px 1px 0 #00000022;
88
+ --dixy-skin-control-edge:
89
+ inset 0 1px 0 rgb(255 255 255 / 0.1), inset 0 -1px 0 #0002;
90
+ --dixy-skin-cushion:
91
+ inset 0 0px 0px #ffffff66,
92
+ inset 0 -0px 0px color-mix(in srgb, var(--dixy-skin-edge) 0%, transparent),
93
+ var(--dixy-skin-cushion-elevation);
94
+ --dixy-skin-cushion-cast: 0 0px 0px
95
+ color-mix(in srgb, var(--dixy-skin-edge) 0%, transparent);
96
+ --dixy-skin-panel-relief: var(--dixy-skin-shadow);
97
+ --dixy-skin-control-relief:
98
+ var(--dixy-skin-control-edge), var(--dixy-skin-shadow);
99
+ --dixy-skin-thumb: linear-gradient(135deg, #ff48b0 0 50%, #0078bf 50%);
100
+ --dixy-skin-mark-opacity: 1;
101
+ --dixy-font-display-lg-weight: 400;
102
+ --dixy-font-display-lg-letter-spacing: -0.01em;
103
+ --dixy-font-display-md-weight: 400;
104
+ --dixy-font-display-md-letter-spacing: -0.01em;
105
+ --dixy-font-display-sm-weight: 400;
106
+ --dixy-font-display-sm-letter-spacing: -0.01em;
107
+ --dixy-font-heading-lg-weight: 400;
108
+ --dixy-font-heading-lg-letter-spacing: -0.01em;
109
+ --dixy-font-heading-md-weight: 400;
110
+ --dixy-font-heading-md-letter-spacing: -0.01em;
111
+ --dixy-font-heading-sm-weight: 400;
112
+ --dixy-font-heading-sm-letter-spacing: -0.01em;
113
+ --dixy-font-title-lg-weight: 400;
114
+ --dixy-font-title-lg-letter-spacing: -0.01em;
115
+ --dixy-font-title-md-weight: 400;
116
+ --dixy-font-title-md-letter-spacing: -0.01em;
117
+ --dixy-font-title-sm-weight: 400;
118
+ --dixy-font-title-sm-letter-spacing: -0.01em;
119
+ }
120
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"][data-appearance="dark"] {
121
+ --dixy-organic-a: #ff6ac1;
122
+ --dixy-organic-b: #3fa9f5;
123
+ --dixy-organic-c: #e8c93a;
124
+ --dixy-organic-d: #f2efe6;
125
+ --dixy-skin-selected: var(--dixy-skin-finish);
126
+ --dixy-skin-edge: #f2efe6;
127
+ --dixy-skin-surface: color-mix(
128
+ in srgb,
129
+ var(--dixy-color-background-surface-raised) 40%,
130
+ #262329
131
+ );
132
+ --dixy-skin-ground: color-mix(
133
+ in srgb,
134
+ var(--dixy-color-background-canvas) 65%,
135
+ #262329
136
+ );
137
+ }
138
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"][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/riso-zine"][data-relief="0"],
144
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"][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/riso-zine"][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/riso-zine"][data-ornament="quiet"] {
159
+ --dixy-skin-mark-opacity: 0;
160
+ }
161
+ }
162
+ @layer dixy.components {
163
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"] {
164
+ position: relative;
165
+ isolation: isolate;
166
+ }
167
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]:not(.dixy-portal-scope) {
168
+ background-color: var(--dixy-skin-ground);
169
+ background-image: var(--dixy-skin-canvas);
170
+ }
171
+ :is(
172
+ .dixy-card,
173
+ .dixy-box,
174
+ .dixy-dialog-popup,
175
+ .dixy-alert-dialog-popup,
176
+ .dixy-drawer-popup,
177
+ .dixy-popover-popup,
178
+ .dixy-preview-card-popup,
179
+ .dixy-tooltip-popup,
180
+ .dixy-select-popup,
181
+ .dixy-combobox-popup,
182
+ .dixy-autocomplete-popup,
183
+ .dixy-menu-popup,
184
+ .dixy-context-menu-popup,
185
+ .dixy-navigation-menu-popup,
186
+ .dixy-toast-root,
187
+ .dixy-alert,
188
+ .dixy-list-box,
189
+ .dixy-calendar,
190
+ .dixy-range-calendar
191
+ )[data-dixy-skin="dixy/riso-zine"] {
192
+ position: relative;
193
+ border-radius: calc(var(--dixy-radius-card) * 0.66)
194
+ calc(var(--dixy-radius-card) * 0.78) calc(var(--dixy-radius-card) * 0.63)
195
+ calc(var(--dixy-radius-card) * 0.75);
196
+ }
197
+ :is(
198
+ .dixy-dialog-popup,
199
+ .dixy-alert-dialog-popup,
200
+ .dixy-drawer-popup,
201
+ .dixy-popover-popup,
202
+ .dixy-preview-card-popup,
203
+ .dixy-tooltip-popup,
204
+ .dixy-select-popup,
205
+ .dixy-combobox-popup,
206
+ .dixy-autocomplete-popup,
207
+ .dixy-menu-popup,
208
+ .dixy-context-menu-popup,
209
+ .dixy-navigation-menu-popup
210
+ )[data-dixy-skin="dixy/riso-zine"] {
211
+ border-radius: calc(var(--dixy-radius-overlay) * 0.66)
212
+ calc(var(--dixy-radius-overlay) * 0.78)
213
+ calc(var(--dixy-radius-overlay) * 0.63)
214
+ calc(var(--dixy-radius-overlay) * 0.75);
215
+ }
216
+ :is(.dixy-card, .dixy-dialog-popup)[data-dixy-skin="dixy/riso-zine"] {
217
+ padding: var(--dixy-skin-card-inset);
218
+ border: 2px solid var(--dixy-skin-edge);
219
+ }
220
+ :is(
221
+ .dixy-card,
222
+ .dixy-box,
223
+ .dixy-dialog-popup,
224
+ .dixy-alert-dialog-popup,
225
+ .dixy-drawer-popup,
226
+ .dixy-popover-popup,
227
+ .dixy-preview-card-popup,
228
+ .dixy-tooltip-popup,
229
+ .dixy-select-popup,
230
+ .dixy-combobox-popup,
231
+ .dixy-autocomplete-popup,
232
+ .dixy-menu-popup,
233
+ .dixy-context-menu-popup,
234
+ .dixy-navigation-menu-popup,
235
+ .dixy-toast-root,
236
+ .dixy-alert,
237
+ .dixy-list-box,
238
+ .dixy-calendar,
239
+ .dixy-range-calendar
240
+ )[data-dixy-skin="dixy/riso-zine"]:not([data-dixy-material-override]):not(
241
+ :where([data-dixy-material-override]) *
242
+ ) {
243
+ background-image: var(--dixy-skin-paint);
244
+ background-size:
245
+ var(--dixy-skin-grain-size) var(--dixy-skin-grain-size),
246
+ 100% 100%,
247
+ 100% 100%,
248
+ 100% 100%;
249
+ box-shadow: var(--dixy-skin-panel-relief);
250
+ }
251
+ :is(
252
+ .dixy-card,
253
+ .dixy-box,
254
+ .dixy-dialog-popup,
255
+ .dixy-alert-dialog-popup,
256
+ .dixy-drawer-popup,
257
+ .dixy-popover-popup,
258
+ .dixy-preview-card-popup,
259
+ .dixy-tooltip-popup,
260
+ .dixy-select-popup,
261
+ .dixy-combobox-popup,
262
+ .dixy-autocomplete-popup,
263
+ .dixy-menu-popup,
264
+ .dixy-context-menu-popup,
265
+ .dixy-navigation-menu-popup,
266
+ .dixy-toast-root,
267
+ .dixy-alert,
268
+ .dixy-list-box,
269
+ .dixy-calendar,
270
+ .dixy-range-calendar
271
+ )[data-dixy-skin="dixy/riso-zine"]:not([data-dixy-material-override]):not(
272
+ :where([data-dixy-material-override]) *
273
+ ):not([data-variant="solid"]):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/riso-zine"] {
287
+ border-radius: calc(var(--dixy-radius-control) * 0.6);
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/riso-zine"]:not([data-dixy-material-override]):not(
300
+ :where([data-dixy-material-override]) *
301
+ ) {
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/riso-zine"]: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) * 0.6);
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/riso-zine"]: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/riso-zine"]: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/riso-zine"]: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/riso-zine"]
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/riso-zine"]: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/riso-zine"]:not([data-dixy-material-override]):not(
375
+ :where([data-dixy-material-override]) *
376
+ ) {
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/riso-zine"]:not([data-dixy-material-override]):not(
386
+ :where([data-dixy-material-override]) *
387
+ ) {
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/riso-zine"]:not([data-dixy-material-override]):not(
395
+ :where([data-dixy-material-override]) *
396
+ )::before {
397
+ box-shadow: var(--dixy-skin-inset);
398
+ }
399
+ :is(
400
+ .dixy-checkbox-root,
401
+ .dixy-radio-root
402
+ )[data-dixy-skin="dixy/riso-zine"]:not([data-dixy-material-override]):not(
403
+ :where([data-dixy-material-override]) *
404
+ )[data-checked]::before {
405
+ background-image: var(--dixy-skin-finish);
406
+ }
407
+ :is(.dixy-switch-thumb)[data-dixy-skin="dixy/riso-zine"]: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/riso-zine"]: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/riso-zine"] .dixy-riso-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/riso-zine"]
433
+ .dixy-riso-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, 24px)
445
+ var(--dixy-skin-frame-safe-top, 26px),
446
+ var(--dixy-skin-frame-safe-inline, 24px)
447
+ calc(100% - var(--dixy-skin-frame-safe-bottom, 24px)),
448
+ calc(100% - var(--dixy-skin-frame-safe-inline, 24px))
449
+ calc(100% - var(--dixy-skin-frame-safe-bottom, 24px)),
450
+ calc(100% - var(--dixy-skin-frame-safe-inline, 24px))
451
+ var(--dixy-skin-frame-safe-top, 26px),
452
+ var(--dixy-skin-frame-safe-inline, 24px)
453
+ var(--dixy-skin-frame-safe-top, 26px)
454
+ );
455
+ }
456
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
457
+ .dixy-riso-ornament.dixy-skin-ornament-theme {
458
+ z-index: -1;
459
+ overflow: hidden;
460
+ }
461
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
462
+ .dixy-riso-ornament
463
+ .dixy-skin-definitions {
464
+ position: absolute;
465
+ overflow: hidden;
466
+ }
467
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
468
+ .dixy-riso-ornament
469
+ .dixy-skin-control-art {
470
+ width: 100%;
471
+ height: 100%;
472
+ }
473
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
474
+ .dixy-riso-ornament.dixy-skin-ornament-switch-thumb {
475
+ display: grid;
476
+ place-items: center;
477
+ inset: 2px;
478
+ }
479
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
480
+ .dixy-switch-thumb:not([data-checked])
481
+ > .dixy-riso-ornament {
482
+ display: none;
483
+ }
484
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
485
+ .dixy-riso-ornament
486
+ .dixy-skin-fastener {
487
+ position: absolute;
488
+ width: 11px;
489
+ height: 11px;
490
+ }
491
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
492
+ .dixy-riso-ornament
493
+ .dixy-skin-fastener-tl {
494
+ top: 5px;
495
+ left: 5px;
496
+ }
497
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
498
+ .dixy-riso-ornament
499
+ .dixy-skin-fastener-tr {
500
+ top: 5px;
501
+ right: 5px;
502
+ }
503
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
504
+ .dixy-riso-ornament
505
+ .dixy-skin-fastener-bl {
506
+ bottom: 5px;
507
+ left: 5px;
508
+ }
509
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
510
+ .dixy-riso-ornament
511
+ .dixy-skin-fastener-br {
512
+ bottom: 5px;
513
+ right: 5px;
514
+ }
515
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
516
+ .dixy-riso-ornament[data-animated]
517
+ .dixy-skin-motion {
518
+ animation: dixy-riso-detail 4s ease-in-out infinite alternate;
519
+ }
520
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
521
+ .dixy-riso-ornament[data-motion="reduced"]
522
+ .dixy-skin-motion {
523
+ animation: none;
524
+ }
525
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
526
+ .dixy-riso-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/riso-zine"]
534
+ .dixy-riso-ornament
535
+ .dixy-frame-corner-tl {
536
+ left: 0;
537
+ top: 0;
538
+ }
539
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
540
+ .dixy-riso-ornament
541
+ .dixy-frame-corner-tr {
542
+ right: 0;
543
+ top: 0;
544
+ transform: scaleX(-1);
545
+ }
546
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
547
+ .dixy-riso-ornament
548
+ .dixy-frame-corner-bl {
549
+ left: 0;
550
+ bottom: 0;
551
+ transform: scaleY(-1);
552
+ }
553
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
554
+ .dixy-riso-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/riso-zine"]
562
+ .dixy-riso-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/riso-zine"] .dixy-riso-ornament {
571
+ display: none;
572
+ }
573
+ }
574
+ @keyframes dixy-riso-detail {
575
+ from {
576
+ opacity: 0.5;
577
+ }
578
+ to {
579
+ opacity: 1;
580
+ }
581
+ }
582
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
583
+ :is(.dixy-forest-paper, .dixy-atelier-paper, .dixy-atelier-linen) {
584
+ display: none;
585
+ }
586
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
587
+ .dixy-riso-ornament.dixy-organic-ornament {
588
+ clip-path: none;
589
+ overflow: visible;
590
+ border-radius: inherit;
591
+ }
592
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
593
+ .dixy-riso-ornament
594
+ .dixy-organic-canvas {
595
+ display: block;
596
+ position: absolute;
597
+ left: -32px;
598
+ top: -32px;
599
+ width: calc(100% + 64px);
600
+ height: calc(100% + 64px);
601
+ pointer-events: none;
602
+ }
603
+
604
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"] {
605
+ --dixy-motion-easing-standard: steps(3, end);
606
+ --dixy-motion-easing-enter: steps(4, end);
607
+ --dixy-personality-press-distance: 1.5px;
608
+ }
609
+ @media (prefers-reduced-motion: no-preference) {
610
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]:not([data-motion="reduced"]) {
611
+ --dixy-motion-duration-fast: 144ms;
612
+ --dixy-motion-duration-normal: 240ms;
613
+ --dixy-motion-duration-deliberate: 336ms;
614
+ --dixy-motion-duration-slow: 480ms;
615
+ }
616
+ }
617
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"] :is(h1, h2, h3, .dixy-heading) {
618
+ letter-spacing: -0.01em;
619
+ }
620
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"] :is(h1, h2, h3, .dixy-heading) {
621
+ font-weight: 400;
622
+ }
623
+
624
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
625
+ :is(.dixy-tabs-indicator)[data-dixy-skin="dixy/riso-zine"] {
626
+ border: 2px solid var(--dixy-skin-edge);
627
+ }
628
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
629
+ :is(
630
+ .dixy-input,
631
+ .dixy-textarea,
632
+ .dixy-native-select,
633
+ .dixy-select-trigger,
634
+ .dixy-input-group,
635
+ .dixy-number-field-group
636
+ )[data-dixy-skin="dixy/riso-zine"]:is(
637
+ [data-invalid],
638
+ [aria-invalid="true"]
639
+ ) {
640
+ background-image: repeating-linear-gradient(
641
+ -45deg,
642
+ color-mix(in srgb, var(--dixy-color-border-danger) 14%, transparent) 0 4px,
643
+ transparent 4px 9px
644
+ );
645
+ border-color: var(--dixy-color-border-danger);
646
+ }
647
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
648
+ :is(.dixy-button)[data-dixy-skin="dixy/riso-zine"][aria-busy="true"] {
649
+ background-image: repeating-linear-gradient(
650
+ -45deg,
651
+ #0002 0 4px,
652
+ transparent 4px 9px
653
+ );
654
+ }
655
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"] [data-dixy-skin]:focus-visible,
656
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"] [data-dixy-skin] :focus-visible {
657
+ outline-width: 2px;
658
+ outline-offset: 5px;
659
+ }
660
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
661
+ :is(.dixy-separator)[data-dixy-skin="dixy/riso-zine"]:not(
662
+ [aria-orientation="vertical"]
663
+ ) {
664
+ background: repeating-linear-gradient(
665
+ 90deg,
666
+ var(--dixy-skin-edge) 0 2px,
667
+ transparent 2px 5px
668
+ );
669
+ }
670
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
671
+ :is(
672
+ .dixy-separator
673
+ )[data-dixy-skin="dixy/riso-zine"][aria-orientation="vertical"] {
674
+ background: repeating-linear-gradient(
675
+ 180deg,
676
+ var(--dixy-skin-edge) 0 2px,
677
+ transparent 2px 5px
678
+ );
679
+ }
680
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"] ::selection {
681
+ background: color-mix(
682
+ in srgb,
683
+ var(--dixy-color-background-action-primary) 30%,
684
+ #ffe96b
685
+ );
686
+ color: var(--dixy-color-base-12);
687
+ }
688
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"] {
689
+ scrollbar-color: var(--dixy-color-background-action-primary)
690
+ color-mix(
691
+ in srgb,
692
+ var(--dixy-color-background-action-primary) 12%,
693
+ transparent
694
+ );
695
+ }
696
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
697
+ svg[stroke="currentColor"]:not(.dixy-skin-ornament svg) {
698
+ stroke-width: 2.5;
699
+ }
700
+
701
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]:not(.dixy-portal-scope)::before {
702
+ content: "";
703
+ position: absolute;
704
+ inset: 0;
705
+ z-index: -1;
706
+ pointer-events: none;
707
+ border-radius: inherit;
708
+ opacity: 0.4;
709
+ --dixy-skin-pattern-ink: color-mix(
710
+ in srgb,
711
+ var(--dixy-skin-edge) 40%,
712
+ transparent
713
+ );
714
+ background-image: radial-gradient(
715
+ var(--dixy-skin-pattern-ink) 32%,
716
+ transparent 34%
717
+ );
718
+ background-size: 14px 14px;
719
+ -webkit-mask: linear-gradient(160deg, #000, transparent 70%);
720
+ mask: linear-gradient(160deg, #000, transparent 70%);
721
+ }
722
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"][data-effects="reduced"]::before {
723
+ display: none;
724
+ }
725
+ @media (prefers-reduced-transparency: reduce),
726
+ (prefers-contrast: more),
727
+ (forced-colors: active) {
728
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]::before {
729
+ display: none;
730
+ }
731
+ }
732
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"]
733
+ :is(.dixy-card, .dixy-dialog-popup)[data-dixy-skin="dixy/riso-zine"] {
734
+ border: 1px solid var(--dixy-skin-edge);
735
+ box-shadow:
736
+ 0 0 0 3px var(--dixy-skin-surface),
737
+ 0 0 0 4px var(--dixy-skin-edge),
738
+ var(--dixy-skin-panel-relief);
739
+ }
740
+
741
+ @supports (backdrop-filter: blur(8px)) {
742
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"][data-effects="backdrop"]
743
+ > .dixy-skin-backdrop {
744
+ backdrop-filter: blur(8px);
745
+ }
746
+ }
747
+ @media (prefers-reduced-transparency: reduce),
748
+ (prefers-contrast: more),
749
+ (forced-colors: active) {
750
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"] {
751
+ --dixy-skin-paint: none;
752
+ --dixy-skin-finish: none;
753
+ --dixy-skin-canvas: none;
754
+ --dixy-skin-thumb: none;
755
+ --dixy-skin-shadow: none;
756
+ --dixy-skin-inset: none;
757
+ --dixy-skin-panel-relief: none;
758
+ --dixy-skin-control-relief: none;
759
+ }
760
+ .dixy-theme[data-dixy-skin="dixy/riso-zine"] > .dixy-skin-backdrop,
761
+ :is(
762
+ .dixy-card,
763
+ .dixy-box,
764
+ .dixy-dialog-popup,
765
+ .dixy-alert-dialog-popup,
766
+ .dixy-drawer-popup,
767
+ .dixy-popover-popup,
768
+ .dixy-preview-card-popup,
769
+ .dixy-tooltip-popup,
770
+ .dixy-select-popup,
771
+ .dixy-combobox-popup,
772
+ .dixy-autocomplete-popup,
773
+ .dixy-menu-popup,
774
+ .dixy-context-menu-popup,
775
+ .dixy-navigation-menu-popup,
776
+ .dixy-toast-root,
777
+ .dixy-alert,
778
+ .dixy-list-box,
779
+ .dixy-calendar,
780
+ .dixy-range-calendar
781
+ )[data-dixy-skin="dixy/riso-zine"] {
782
+ backdrop-filter: none !important;
783
+ -webkit-backdrop-filter: none !important;
784
+ }
785
+ }
786
+ }