@schukai/monster 4.148.9 → 4.149.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (205) hide show
  1. package/package.json +1 -1
  2. package/source/components/accessibility/stylesheet/locale-picker.mjs +61 -1
  3. package/source/components/content/image-editor.mjs +79 -11
  4. package/source/components/content/style/copy.pcss +1 -1
  5. package/source/components/content/stylesheet/camera-capture.mjs +1 -1
  6. package/source/components/content/stylesheet/copy.mjs +1 -1
  7. package/source/components/content/stylesheet/fetch-box.mjs +1 -1
  8. package/source/components/content/stylesheet/viewer.mjs +61 -1
  9. package/source/components/data/kpi-tile.mjs +5 -3
  10. package/source/components/data/metric-graph.mjs +22 -20
  11. package/source/components/data/metric.mjs +20 -18
  12. package/source/components/data/style/kpi-tile.pcss +65 -43
  13. package/source/components/data/style/metric-graph.pcss +35 -18
  14. package/source/components/data/style/metric.pcss +35 -28
  15. package/source/components/data/stylesheet/kpi-tile.mjs +61 -1
  16. package/source/components/data/stylesheet/metric-graph.mjs +61 -1
  17. package/source/components/data/stylesheet/metric.mjs +61 -1
  18. package/source/components/datatable/columnbar.mjs +4 -2
  19. package/source/components/datatable/datatable.mjs +73 -15
  20. package/source/components/datatable/filter/date-range.mjs +61 -61
  21. package/source/components/datatable/filter/date-time.mjs +5 -1
  22. package/source/components/datatable/filter/range.mjs +3 -3
  23. package/source/components/datatable/filter/select-operator.mjs +7 -1
  24. package/source/components/datatable/filter/text-operator.mjs +11 -3
  25. package/source/components/datatable/filter.mjs +16 -0
  26. package/source/components/datatable/pagination.mjs +2 -2
  27. package/source/components/datatable/style/column-bar.pcss +115 -23
  28. package/source/components/datatable/style/datatable.pcss +257 -29
  29. package/source/components/datatable/style/embedded-pagination.pcss +63 -34
  30. package/source/components/datatable/style/filter-button.pcss +1 -1
  31. package/source/components/datatable/style/filter-controls-defaults.pcss +49 -3
  32. package/source/components/datatable/style/filter-select.pcss +4 -1
  33. package/source/components/datatable/style/filter.pcss +18 -1
  34. package/source/components/datatable/stylesheet/change-button.mjs +61 -1
  35. package/source/components/datatable/stylesheet/column-bar.mjs +69 -1
  36. package/source/components/datatable/stylesheet/dataset.mjs +61 -1
  37. package/source/components/datatable/stylesheet/datatable.mjs +71 -1
  38. package/source/components/datatable/stylesheet/embedded-pagination.mjs +1 -1
  39. package/source/components/datatable/stylesheet/filter-button.mjs +1 -1
  40. package/source/components/datatable/stylesheet/filter-controls-defaults.mjs +1 -1
  41. package/source/components/datatable/stylesheet/filter-select.mjs +61 -1
  42. package/source/components/datatable/stylesheet/filter.mjs +61 -1
  43. package/source/components/datatable/stylesheet/pagination.mjs +67 -1
  44. package/source/components/datatable/stylesheet/save-button.mjs +61 -1
  45. package/source/components/datatable/stylesheet/status.mjs +61 -1
  46. package/source/components/form/action-button.mjs +2 -1
  47. package/source/components/form/button-bar.mjs +7 -2
  48. package/source/components/form/context-error.mjs +4 -3
  49. package/source/components/form/context-help.mjs +10 -4
  50. package/source/components/form/context-hint.mjs +1 -1
  51. package/source/components/form/context-info.mjs +1 -1
  52. package/source/components/form/context-note.mjs +1 -1
  53. package/source/components/form/context-success.mjs +1 -1
  54. package/source/components/form/context-warning.mjs +1 -1
  55. package/source/components/form/control-bar.mjs +300 -14
  56. package/source/components/form/credential-button.mjs +4 -2
  57. package/source/components/form/digits.mjs +28 -1
  58. package/source/components/form/field-set.mjs +30 -0
  59. package/source/components/form/login.mjs +13 -10
  60. package/source/components/form/password.mjs +6 -0
  61. package/source/components/form/popper-button.mjs +1 -1
  62. package/source/components/form/quantity.mjs +14 -6
  63. package/source/components/form/register-wizard.mjs +46 -26
  64. package/source/components/form/select.mjs +17 -10
  65. package/source/components/form/sheet.mjs +13 -2
  66. package/source/components/form/style/action-button.pcss +131 -5
  67. package/source/components/form/style/button-bar.pcss +204 -3
  68. package/source/components/form/style/control-bar.pcss +254 -26
  69. package/source/components/form/style/digits.pcss +7 -6
  70. package/source/components/form/style/input-group.pcss +65 -1
  71. package/source/components/form/style/login.pcss +1 -1
  72. package/source/components/form/style/mixin/field-set-layout.pcss +8 -0
  73. package/source/components/form/style/password.pcss +25 -1
  74. package/source/components/form/style/popper-button.pcss +1 -0
  75. package/source/components/form/style/quantity.pcss +11 -20
  76. package/source/components/form/style/select.pcss +52 -7
  77. package/source/components/form/style/sheet.pcss +70 -1
  78. package/source/components/form/style/state-button.pcss +5 -2
  79. package/source/components/form/style/toggle-switch.pcss +7 -4
  80. package/source/components/form/stylesheet/action-button.mjs +63 -1
  81. package/source/components/form/stylesheet/button-bar.mjs +153 -1
  82. package/source/components/form/stylesheet/button.mjs +61 -1
  83. package/source/components/form/stylesheet/control-bar.mjs +163 -1
  84. package/source/components/form/stylesheet/digits.mjs +1 -1
  85. package/source/components/form/stylesheet/field-layout.mjs +1 -1
  86. package/source/components/form/stylesheet/field-set.mjs +1 -1
  87. package/source/components/form/stylesheet/form.mjs +1 -1
  88. package/source/components/form/stylesheet/input-group.mjs +15 -1
  89. package/source/components/form/stylesheet/login.mjs +1 -1
  90. package/source/components/form/stylesheet/password.mjs +7 -1
  91. package/source/components/form/stylesheet/popper-button.mjs +61 -1
  92. package/source/components/form/stylesheet/quantity.mjs +1 -1
  93. package/source/components/form/stylesheet/register-wizard.mjs +1 -1
  94. package/source/components/form/stylesheet/select.mjs +3 -1
  95. package/source/components/form/stylesheet/sheet.mjs +1 -1
  96. package/source/components/form/stylesheet/state-button.mjs +3 -1
  97. package/source/components/form/stylesheet/toggle-switch.mjs +1 -1
  98. package/source/components/form/stylesheet/wizard.mjs +1 -1
  99. package/source/components/form/util/floating-ui.mjs +35 -7
  100. package/source/components/host/call-button.mjs +3 -1
  101. package/source/components/host/stylesheet/call-button.mjs +61 -1
  102. package/source/components/host/stylesheet/host.mjs +1 -1
  103. package/source/components/host/stylesheet/toggle-button.mjs +61 -1
  104. package/source/components/layout/full-screen.mjs +31 -23
  105. package/source/components/layout/iframe.mjs +5 -1
  106. package/source/components/layout/popper.mjs +34 -4
  107. package/source/components/layout/style/full-screen.pcss +94 -23
  108. package/source/components/layout/style/split-panel.pcss +57 -5
  109. package/source/components/layout/style/tabs.pcss +277 -47
  110. package/source/components/layout/style/vertical-tabs.pcss +147 -0
  111. package/source/components/layout/stylesheet/collapse.mjs +61 -1
  112. package/source/components/layout/stylesheet/details.mjs +61 -1
  113. package/source/components/layout/stylesheet/full-screen.mjs +23 -1
  114. package/source/components/layout/stylesheet/overlay.mjs +1 -1
  115. package/source/components/layout/stylesheet/panel.mjs +1 -1
  116. package/source/components/layout/stylesheet/slider.mjs +1 -1
  117. package/source/components/layout/stylesheet/split-panel.mjs +17 -1
  118. package/source/components/layout/stylesheet/tabs.mjs +97 -1
  119. package/source/components/layout/stylesheet/vertical-tabs.mjs +33 -95
  120. package/source/components/layout/tabs.mjs +63 -0
  121. package/source/components/layout/vertical-tabs.mjs +63 -0
  122. package/source/components/navigation/stylesheet/site-navigation.mjs +1 -1
  123. package/source/components/navigation/stylesheet/table-of-content.mjs +1 -1
  124. package/source/components/navigation/stylesheet/wizard-navigation.mjs +1 -1
  125. package/source/components/navigation/table-of-content.mjs +13 -0
  126. package/source/components/notify/style/notify.pcss +1 -2
  127. package/source/components/notify/stylesheet/message.mjs +1 -1
  128. package/source/components/notify/stylesheet/notify.mjs +1 -1
  129. package/source/components/state/style/log.pcss +1 -0
  130. package/source/components/state/style/state.pcss +5 -1
  131. package/source/components/state/stylesheet/log.mjs +1 -1
  132. package/source/components/state/stylesheet/state.mjs +7 -1
  133. package/source/components/style/button.css +61 -205
  134. package/source/components/style/button.pcss +78 -34
  135. package/source/components/style/common.css +1 -170
  136. package/source/components/style/common.pcss +5 -9
  137. package/source/components/style/form.css +1 -49
  138. package/source/components/style/form.pcss +24 -6
  139. package/source/components/style/link.css +1 -39
  140. package/source/components/style/link.pcss +8 -16
  141. package/source/components/style/mixin/button.pcss +19 -10
  142. package/source/components/style/mixin/property.pcss +8 -0
  143. package/source/components/style/mixin/skeleton.pcss +11 -5
  144. package/source/components/style/normalize.css +1 -144
  145. package/source/components/style/normalize.pcss +5 -5
  146. package/source/components/style/property.css +1 -387
  147. package/source/components/style/skeleton.css +1 -198
  148. package/source/components/style/skeleton.pcss +8 -2
  149. package/source/components/style/theme-modern.css +74 -0
  150. package/source/components/style/theme-modern.pcss +498 -0
  151. package/source/components/stylesheet/button.mjs +61 -1
  152. package/source/components/stylesheet/common.mjs +1 -1
  153. package/source/components/stylesheet/form.mjs +1 -1
  154. package/source/components/stylesheet/link.mjs +1 -1
  155. package/source/components/stylesheet/normalize.mjs +1 -1
  156. package/source/components/stylesheet/property.mjs +1 -1
  157. package/source/components/stylesheet/skeleton.mjs +1 -1
  158. package/source/components/stylesheet/theme-modern.mjs +110 -0
  159. package/source/components/time/stylesheet/day.mjs +61 -1
  160. package/source/components/time/stylesheet/month-calendar.mjs +61 -1
  161. package/source/components/time/timeline/stylesheet/appointment.mjs +61 -1
  162. package/source/components/time/timeline/stylesheet/segment.mjs +61 -1
  163. package/source/components/tree-menu/style/tree-menu.pcss +26 -37
  164. package/source/components/tree-menu/stylesheet/tree-menu.mjs +1 -1
  165. package/test/cases/components/content/image-editor.mjs +19 -0
  166. package/test/cases/components/datatable/accessibility-defaults.mjs +112 -0
  167. package/test/cases/components/datatable/filter-availability.mjs +37 -0
  168. package/test/cases/components/datatable/filter-date-range-layout.mjs +40 -0
  169. package/test/cases/components/datatable/filter-select-operator.mjs +118 -0
  170. package/test/cases/components/datatable/mobile-layout.mjs +203 -0
  171. package/test/cases/components/datatable/responsive-breakpoint.mjs +41 -0
  172. package/test/cases/components/datatable/selection.mjs +149 -0
  173. package/test/cases/components/form/action-button-style.mjs +85 -0
  174. package/test/cases/components/form/button-bar.mjs +222 -3
  175. package/test/cases/components/form/context-theme-colors.mjs +59 -0
  176. package/test/cases/components/form/control-bar.mjs +228 -3
  177. package/test/cases/components/form/control-heights.mjs +103 -0
  178. package/test/cases/components/form/digits-accessibility.mjs +65 -0
  179. package/test/cases/components/form/field-set.mjs +54 -0
  180. package/test/cases/components/form/floating-ui.mjs +74 -0
  181. package/test/cases/components/form/input-group.mjs +61 -28
  182. package/test/cases/components/form/login.mjs +47 -0
  183. package/test/cases/components/form/password.mjs +63 -0
  184. package/test/cases/components/form/popper-button.mjs +30 -15
  185. package/test/cases/components/form/quantity-accessibility.mjs +46 -0
  186. package/test/cases/components/form/register-wizard.mjs +79 -0
  187. package/test/cases/components/form/select.mjs +94 -2
  188. package/test/cases/components/form/sheet.mjs +56 -2
  189. package/test/cases/components/host/toggle-button.mjs +50 -0
  190. package/test/cases/components/layout/full-screen.mjs +60 -0
  191. package/test/cases/components/layout/iframe-accessibility.mjs +44 -0
  192. package/test/cases/components/layout/popper.mjs +128 -0
  193. package/test/cases/components/layout/slit-panel.mjs +30 -1
  194. package/test/cases/components/layout/tabs.mjs +93 -0
  195. package/test/cases/components/navigation/table-of-content.mjs +18 -0
  196. package/test/cases/components/state/state-style.mjs +31 -0
  197. package/test/cases/components/style/action-menu.mjs +74 -0
  198. package/test/cases/components/style/form-controls.mjs +37 -0
  199. package/test/cases/components/style/kpi-tile.mjs +60 -0
  200. package/test/cases/components/style/legacy-theme-compatibility.mjs +137 -0
  201. package/test/cases/components/style/metric-layout.mjs +94 -0
  202. package/test/cases/components/style/skeleton.mjs +69 -0
  203. package/test/cases/components/style/theme-component-catalog.mjs +853 -0
  204. package/test/cases/components/style/theme-modern.mjs +439 -0
  205. package/test/cases/components/style/theme-review-regressions.mjs +41 -0
package/source/components/style/property.css CHANGED
@@ -1,388 +1,2 @@
1
1
  /** generated from property.pcss **/
2
- :after,
3
- :before,
4
- :root {
5
- --monster-font-family:
6
- -apple-system, BlinkMacSystemFont, "Quicksand", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
7
- --monster-font-family-monospace:
8
- "Consolas", "Courier New", "Roboto Mono", "Source Code Pro", "Fira Mono",
9
- monospace;
10
- --monster-font-size-min: 15px;
11
- --monster-font-size-base: 16px;
12
- --monster-font-size-max: 16px;
13
- --monster-font-scale: 1;
14
- --monster-font-scale-hi-dpi: 1.25;
15
- --monster-font-scale-xhi-dpi: 1.25;
16
- --monster-font-size-fluid: clamp(
17
- var(--monster-font-size-min),
18
- calc(var(--monster-font-size-min) + 0.1vw),
19
- var(--monster-font-size-max)
20
- );
21
- }
22
- @media (min-resolution: 1.5dppx) {
23
- :after,
24
- :before,
25
- :root {
26
- --monster-font-scale: var(--monster-font-scale-hi-dpi, 1.1);
27
- }
28
- }
29
- @media (min-resolution: 3dppx) {
30
- :after,
31
- :before,
32
- :root {
33
- --monster-font-scale: var(--monster-font-scale-xhi-dpi, 1.18);
34
- }
35
- }
36
- :after,
37
- :before,
38
- :root {
39
- --monster-color-primary-1: var(--monster-color-gray-6);
40
- --monster-color-primary-2: var(--monster-color-gray-6);
41
- --monster-color-primary-3: var(--monster-color-cinnamon-1);
42
- --monster-color-primary-4: var(--monster-color-cinnamon-1);
43
- --monster-bg-color-primary-1: var(--monster-color-gray-1);
44
- --monster-bg-color-primary-2: var(--monster-color-gray-2);
45
- --monster-bg-color-primary-3: var(--monster-color-gray-6);
46
- --monster-bg-color-primary-4: var(--monster-color-gray-4);
47
- }
48
- @media (prefers-color-scheme: dark) {
49
- :after,
50
- :before,
51
- :root {
52
- --monster-color-primary-1: var(--monster-color-gray-1);
53
- --monster-color-primary-2: var(--monster-color-gray-1);
54
- --monster-color-primary-3: var(--monster-color-gray-6);
55
- --monster-color-primary-4: var(--monster-color-gray-6);
56
- --monster-bg-color-primary-1: var(--monster-color-gray-6);
57
- --monster-bg-color-primary-2: var(--monster-color-gray-3);
58
- --monster-bg-color-primary-3: var(--monster-color-gray-2);
59
- --monster-bg-color-primary-4: var(--monster-color-gray-1);
60
- }
61
- }
62
- :after,
63
- :before,
64
- :root {
65
- --monster-color-secondary-1: var(--monster-color-red-4);
66
- --monster-color-secondary-2: var(--monster-color-red-4);
67
- --monster-color-secondary-3: var(--monster-color-red-1);
68
- --monster-color-secondary-4: var(--monster-color-red-1);
69
- --monster-bg-color-secondary-1: var(--monster-color-gray-1);
70
- --monster-bg-color-secondary-2: var(--monster-color-red-2);
71
- --monster-bg-color-secondary-3: var(--monster-color-red-3);
72
- --monster-bg-color-secondary-4: var(--monster-color-red-6);
73
- }
74
- @media (prefers-color-scheme: dark) {
75
- :after,
76
- :before,
77
- :root {
78
- --monster-color-secondary-1: var(--monster-color-red-1);
79
- --monster-color-secondary-2: var(--monster-color-red-1);
80
- --monster-color-secondary-3: var(--monster-color-red-6);
81
- --monster-color-secondary-4: var(--monster-color-red-4);
82
- --monster-bg-color-secondary-1: var(--monster-color-gray-6);
83
- --monster-bg-color-secondary-2: var(--monster-color-red-3);
84
- --monster-bg-color-secondary-3: var(--monster-color-red-2);
85
- --monster-bg-color-secondary-4: var(--monster-color-red-1);
86
- }
87
- }
88
- :after,
89
- :before,
90
- :root {
91
- --monster-color-tertiary-1: var(--monster-color-magenta-4);
92
- --monster-color-tertiary-2: var(--monster-color-magenta-4);
93
- --monster-color-tertiary-3: var(--monster-color-magenta-6);
94
- --monster-color-tertiary-4: var(--monster-color-magenta-1);
95
- --monster-bg-color-tertiary-1: var(--monster-color-gray-1);
96
- --monster-bg-color-tertiary-2: var(--monster-color-magenta-1);
97
- --monster-bg-color-tertiary-3: var(--monster-color-magenta-2);
98
- --monster-bg-color-tertiary-4: var(--monster-color-magenta-6);
99
- }
100
- @media (prefers-color-scheme: dark) {
101
- :after,
102
- :before,
103
- :root {
104
- --monster-color-tertiary-1: var(--monster-color-magenta-1);
105
- --monster-color-tertiary-2: var(--monster-color-magenta-6);
106
- --monster-color-tertiary-3: var(--monster-color-magenta-4);
107
- --monster-color-tertiary-4: var(--monster-color-magenta-4);
108
- --monster-bg-color-tertiary-1: var(--monster-color-gray-6);
109
- --monster-bg-color-tertiary-2: var(--monster-color-magenta-2);
110
- --monster-bg-color-tertiary-3: var(--monster-color-magenta-1);
111
- --monster-bg-color-tertiary-4: var(--monster-color-magenta-1);
112
- }
113
- }
114
- :after,
115
- :before,
116
- :root {
117
- --monster-color-destructive-1: var(--monster-color-red-1);
118
- --monster-color-destructive-2: var(--monster-color-red-4);
119
- --monster-color-destructive-3: var(--monster-color-red-6);
120
- --monster-color-destructive-4: var(--monster-color-red-1);
121
- --monster-bg-color-destructive-1: var(--monster-color-red-4);
122
- --monster-bg-color-destructive-2: var(--monster-color-gray-1);
123
- --monster-bg-color-destructive-3: var(--monster-color-red-2);
124
- --monster-bg-color-destructive-4: var(--monster-color-red-5);
125
- }
126
- @media (prefers-color-scheme: dark) {
127
- :after,
128
- :before,
129
- :root {
130
- --monster-color-destructive-1: var(--monster-color-red-1);
131
- --monster-color-destructive-2: var(--monster-color-red-3);
132
- --monster-color-destructive-3: var(--monster-color-red-4);
133
- --monster-color-destructive-4: var(--monster-color-red-1);
134
- --monster-bg-color-destructive-1: var(--monster-color-red-5);
135
- --monster-bg-color-destructive-2: var(--monster-color-gray-6);
136
- --monster-bg-color-destructive-3: var(--monster-color-red-1);
137
- --monster-bg-color-destructive-4: var(--monster-color-red-4);
138
- }
139
- }
140
- :after,
141
- :before,
142
- :root {
143
- --monster-color-danger-1: var(--monster-color-raspberry-1);
144
- --monster-color-danger-2: var(--monster-color-raspberry-4);
145
- --monster-color-danger-3: var(--monster-color-raspberry-6);
146
- --monster-color-danger-4: var(--monster-color-raspberry-1);
147
- --monster-bg-color-danger-1: var(--monster-color-raspberry-4);
148
- --monster-bg-color-danger-2: var(--monster-color-gray-1);
149
- --monster-bg-color-danger-3: var(--monster-color-raspberry-2);
150
- --monster-bg-color-danger-4: var(--monster-color-raspberry-5);
151
- }
152
- @media (prefers-color-scheme: dark) {
153
- :after,
154
- :before,
155
- :root {
156
- --monster-color-danger-1: var(--monster-color-raspberry-1);
157
- --monster-color-danger-2: var(--monster-color-raspberry-3);
158
- --monster-color-danger-3: var(--monster-color-raspberry-4);
159
- --monster-color-danger-4: var(--monster-color-raspberry-1);
160
- --monster-bg-color-danger-1: var(--monster-color-raspberry-5);
161
- --monster-bg-color-danger-2: var(--monster-color-gray-6);
162
- --monster-bg-color-danger-3: var(--monster-color-raspberry-1);
163
- --monster-bg-color-danger-4: var(--monster-color-raspberry-4);
164
- }
165
- }
166
- :after,
167
- :before,
168
- :root {
169
- --monster-color-success-1: var(--monster-color-green-1);
170
- --monster-color-success-2: var(--monster-color-green-4);
171
- --monster-color-success-3: var(--monster-color-green-6);
172
- --monster-color-success-4: var(--monster-color-green-1);
173
- --monster-bg-color-success-1: var(--monster-color-green-3);
174
- --monster-bg-color-success-2: var(--monster-color-gray-1);
175
- --monster-bg-color-success-3: var(--monster-color-green-2);
176
- --monster-bg-color-success-4: var(--monster-color-green-5);
177
- }
178
- @media (prefers-color-scheme: dark) {
179
- :after,
180
- :before,
181
- :root {
182
- --monster-color-success-1: var(--monster-color-green-1);
183
- --monster-color-success-2: var(--monster-color-green-2);
184
- --monster-color-success-3: var(--monster-color-green-4);
185
- --monster-color-success-4: var(--monster-color-green-1);
186
- --monster-bg-color-success-1: var(--monster-color-green-5);
187
- --monster-bg-color-success-2: var(--monster-color-gray-6);
188
- --monster-bg-color-success-3: var(--monster-color-green-1);
189
- --monster-bg-color-success-4: var(--monster-color-green-3);
190
- }
191
- }
192
- :after,
193
- :before,
194
- :root {
195
- --monster-color-warning-1: var(--monster-color-orange-1);
196
- --monster-color-warning-2: var(--monster-color-orange-4);
197
- --monster-color-warning-3: var(--monster-color-orange-6);
198
- --monster-color-warning-4: var(--monster-color-orange-1);
199
- --monster-bg-color-warning-1: var(--monster-color-orange-3);
200
- --monster-bg-color-warning-2: var(--monster-color-gray-1);
201
- --monster-bg-color-warning-3: var(--monster-color-orange-2);
202
- --monster-bg-color-warning-4: var(--monster-color-orange-5);
203
- }
204
- @media (prefers-color-scheme: dark) {
205
- :after,
206
- :before,
207
- :root {
208
- --monster-color-warning-1: var(--monster-color-orange-1);
209
- --monster-color-warning-2: var(--monster-color-orange-3);
210
- --monster-color-warning-3: var(--monster-color-orange-4);
211
- --monster-color-warning-4: var(--monster-color-orange-1);
212
- --monster-bg-color-warning-1: var(--monster-color-orange-5);
213
- --monster-bg-color-warning-2: var(--monster-color-gray-6);
214
- --monster-bg-color-warning-3: var(--monster-color-orange-1);
215
- --monster-bg-color-warning-4: var(--monster-color-orange-3);
216
- }
217
- }
218
- :after,
219
- :before,
220
- :root {
221
- --monster-color-error-1: var(--monster-color-red-1);
222
- --monster-color-error-2: var(--monster-color-red-4);
223
- --monster-color-error-3: var(--monster-color-red-6);
224
- --monster-color-error-4: var(--monster-color-red-1);
225
- --monster-bg-color-error-1: var(--monster-color-red-4);
226
- --monster-bg-color-error-2: var(--monster-color-gray-1);
227
- --monster-bg-color-error-3: var(--monster-color-red-2);
228
- --monster-bg-color-error-4: var(--monster-color-red-5);
229
- }
230
- @media (prefers-color-scheme: dark) {
231
- :after,
232
- :before,
233
- :root {
234
- --monster-color-error-1: var(--monster-color-red-1);
235
- --monster-color-error-2: var(--monster-color-red-3);
236
- --monster-color-error-3: var(--monster-color-red-4);
237
- --monster-color-error-4: var(--monster-color-red-1);
238
- --monster-bg-color-error-1: var(--monster-color-red-5);
239
- --monster-bg-color-error-2: var(--monster-color-gray-6);
240
- --monster-bg-color-error-3: var(--monster-color-red-1);
241
- --monster-bg-color-error-4: var(--monster-color-red-4);
242
- }
243
- }
244
- :after,
245
- :before,
246
- :root {
247
- --monster-color-selection-1: var(--monster-color-gray-6);
248
- --monster-color-selection-2: var(--monster-color-gray-6);
249
- --monster-color-selection-3: var(--monster-color-gray-6);
250
- --monster-color-selection-4: var(--monster-color-gray-1);
251
- --monster-bg-color-selection-1: var(--monster-color-yellow-2);
252
- --monster-bg-color-selection-2: var(--monster-color-yellow-1);
253
- --monster-bg-color-selection-3: var(--monster-color-yellow-2);
254
- --monster-bg-color-selection-4: var(--monster-color-yellow-6);
255
- }
256
- @media (prefers-color-scheme: dark) {
257
- :after,
258
- :before,
259
- :root {
260
- --monster-color-selection-1: var(--monster-color-gray-6);
261
- --monster-color-selection-2: var(--monster-color-gray-6);
262
- --monster-color-selection-3: var(--monster-color-gray-6);
263
- --monster-color-selection-4: var(--monster-color-gray-1);
264
- --monster-bg-color-selection-1: var(--monster-color-yellow-2);
265
- --monster-bg-color-selection-2: var(--monster-color-yellow-1);
266
- --monster-bg-color-selection-3: var(--monster-color-yellow-2);
267
- --monster-bg-color-selection-4: var(--monster-color-yellow-6);
268
- }
269
- }
270
- :after,
271
- :before,
272
- :root {
273
- --monster-color-primary-disabled-1: var(--monster-color-gray-4);
274
- --monster-color-primary-disabled-2: var(--monster-color-gray-4);
275
- --monster-color-primary-disabled-3: var(--monster-color-gray-4);
276
- --monster-color-primary-disabled-4: var(--monster-color-gray-4);
277
- --monster-bg-color-primary-disabled-1: var(--monster-color-gray-1);
278
- --monster-bg-color-primary-disabled-2: var(--monster-color-gray-2);
279
- --monster-bg-color-primary-disabled-3: var(--monster-color-gray-3);
280
- --monster-bg-color-primary-disabled-4: var(--monster-color-gray-6);
281
- --monster-color-gradient-1: #833ab4;
282
- --monster-color-gradient-2: #fd1d1d;
283
- --monster-color-gradient-3: #fcb045;
284
- }
285
- @media (prefers-color-scheme: dark) {
286
- :after,
287
- :before,
288
- :root {
289
- --monster-color-primary-disabled-1: var(--monster-color-gray-4);
290
- --monster-color-primary-disabled-2: var(--monster-color-gray-4);
291
- --monster-color-primary-disabled-3: var(--monster-color-gray-3);
292
- --monster-color-primary-disabled-4: var(--monster-color-gray-3);
293
- --monster-bg-color-primary-disabled-1: var(--monster-color-gray-6);
294
- --monster-bg-color-primary-disabled-2: var(--monster-color-gray-3);
295
- --monster-bg-color-primary-disabled-3: var(--monster-color-gray-2);
296
- --monster-bg-color-primary-disabled-4: var(--monster-color-gray-1);
297
- --monster-color-gradient-1: #ffe0b2;
298
- --monster-color-gradient-2: #ad8275;
299
- --monster-color-gradient-3: #771ba3;
300
- }
301
- }
302
- :after,
303
- :before,
304
- :root {
305
- --monster-box-shadow-1: none;
306
- --monster-box-shadow-2: -1px 1px 10px 1px hsla(0, 0%, 76%, 0.61);
307
- --monster-text-shadow: none;
308
- --monster-theme-control-bg-color: var(--monster-color-seashell-1);
309
- --monster-theme-control-color: var(--monster-color-seashell-6);
310
- --monster-theme-control-hover-color: var(--monster-color-seashell-6);
311
- --monster-theme-control-hover-bg-color: var(--monster-color-seashell-2);
312
- --monster-theme-control-border-width: 2px;
313
- --monster-theme-control-border-style: solid;
314
- --monster-theme-control-border-radius: 0;
315
- --monster-theme-control-border-color: var(--monster-color-primary-1);
316
- }
317
- @media (prefers-color-scheme: dark) {
318
- :after,
319
- :before,
320
- :root {
321
- --monster-theme-control-bg-color: var(--monster-color-gray-5);
322
- --monster-theme-control-color: var(--monster-color-gray-1);
323
- --monster-theme-control-border-color: var(--monster-color-gray-3);
324
- --monster-theme-control-hover-color: var(--monster-color-gray-1);
325
- --monster-theme-control-hover-bg-color: var(--monster-color-gray-6);
326
- }
327
- }
328
- :after,
329
- :before,
330
- :root {
331
- --monster-theme-on-color: var(--monster-color-green-1);
332
- --monster-theme-on-bg-color: var(--monster-color-green-5);
333
- --monster-theme-off-color: var(--monster-color-gray-1);
334
- --monster-theme-off-bg-color: var(--monster-color-gray-4);
335
- }
336
- @media (prefers-color-scheme: dark) {
337
- :after,
338
- :before,
339
- :root {
340
- --monster-theme-on-color: var(--monster-color-gray-6);
341
- --monster-theme-on-bg-color: var(--monster-color-gray-1);
342
- --monster-theme-off-color: var(--monster-color-gray-1);
343
- --monster-theme-off-bg-color: var(--monster-color-gray-5);
344
- }
345
- }
346
- :after,
347
- :before,
348
- :root {
349
- --monster-border-style: solid;
350
- --monster-border-width: 3px;
351
- --monster-border-radius: 0;
352
- --monster-outline-width: 1px;
353
- --monster-popper-witharrrow-distance: -4px;
354
- --monster-z-index-default: 0;
355
- --monster-z-index-outline: 10;
356
- --monster-z-index-dropdown: 200;
357
- --monster-z-index-dropdown-overlay: 210;
358
- --monster-z-index-sticky: 300;
359
- --monster-z-index-sticky-overlay: 310;
360
- --monster-z-index-fixed: 400;
361
- --monster-z-index-fixed-overlay: 410;
362
- --monster-z-index-modal-backdrop: 500;
363
- --monster-z-index-modal-backdrop-overlay: 510;
364
- --monster-z-index-offcanvas: 600;
365
- --monster-z-index-offcanvas-overlay: 610;
366
- --monster-z-index-modal: 700;
367
- --monster-z-index-modal-overlay: 710;
368
- --monster-z-index-popover: 800;
369
- --monster-z-index-popover-overlay: 810;
370
- --monster-z-index-tooltip: 800;
371
- --monster-z-index-tooltip-overlay: 910;
372
- --monster-space-0: 0;
373
- --monster-space-1: 2px;
374
- --monster-space-2: 4px;
375
- --monster-space-3: 6px;
376
- --monster-space-4: 10px;
377
- --monster-space-5: 16px;
378
- --monster-space-6: 26px;
379
- --monster-space-7: 42px;
380
- --monster-breakpoint-0: 480px;
381
- --monster-breakpoint-4: 480px;
382
- --monster-breakpoint-7: 768px;
383
- --monster-breakpoint-9: 992px;
384
- --monster-breakpoint-12: 1200px;
385
- --monster-dragger-width: 2px;
386
- --monster-dragger-handle-width: 4px;
387
- --monster-dragger-handle-height: 50px;
388
- }
2
+ :after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,"Quicksand","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--monster-font-family-monospace:"Consolas","Courier New","Roboto Mono","Source Code Pro","Fira Mono",monospace;--monster-font-size-min:15px;--monster-font-size-base:16px;--monster-font-size-max:16px;--monster-font-scale:1;--monster-font-scale-hi-dpi:1.25;--monster-font-scale-xhi-dpi:1.25;--monster-font-size-fluid:clamp(var(--monster-font-size-min),calc(var(--monster-font-size-min) + 0.1vw),var(--monster-font-size-max))}@media (min-resolution:1.5dppx){:after,:before,:root{--monster-font-scale:var(--monster-font-scale-hi-dpi,1.1)}}@media (min-resolution:3dppx){:after,:before,:root{--monster-font-scale:var(--monster-font-scale-xhi-dpi,1.18)}}:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-danger-1:var(--monster-color-raspberry-1);--monster-color-danger-2:var(--monster-color-raspberry-4);--monster-color-danger-3:var(--monster-color-raspberry-6);--monster-color-danger-4:var(--monster-color-raspberry-1);--monster-bg-color-danger-1:var(--monster-color-raspberry-4);--monster-bg-color-danger-2:var(--monster-color-gray-1);--monster-bg-color-danger-3:var(--monster-color-raspberry-2);--monster-bg-color-danger-4:var(--monster-color-raspberry-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-danger-1:var(--monster-color-raspberry-1);--monster-color-danger-2:var(--monster-color-raspberry-3);--monster-color-danger-3:var(--monster-color-raspberry-4);--monster-color-danger-4:var(--monster-color-raspberry-1);--monster-bg-color-danger-1:var(--monster-color-raspberry-5);--monster-bg-color-danger-2:var(--monster-color-gray-6);--monster-bg-color-danger-3:var(--monster-color-raspberry-1);--monster-bg-color-danger-4:var(--monster-color-raspberry-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-color-gradient-1:#ffe0b2;--monster-color-gradient-2:#ad8275;--monster-color-gradient-3:#771ba3}}:after,:before,:root{--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-focus-ring-width:2px;--monster-focus-ring-style:solid;--monster-focus-ring-color:var(--monster-color-blue-4);--monster-focus-ring-offset:2px}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-focus-ring-color:var(--monster-color-yellow-2)}}:after,:before,:root{--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}
package/source/components/style/skeleton.css CHANGED
@@ -1,199 +1,2 @@
1
1
  /** generated from skeleton.pcss **/
2
- .monster-skeleton-col-10 {
3
- --monster-skeleton-color: var(--monster-color-pink-2);
4
- --monster-skeleton-color-50: rgba(
5
- from var(--monster-color-pink-2) 255 255 255 / 0.5
6
- );
7
- --monster-skeleton-height: 100%;
8
- --monster-skeleton-width: 10%;
9
- --monster-skeleton: linear-gradient(
10
- 99deg,
11
- var(--monster-skeleton-color) 0%,
12
- var(--monster-skeleton-color-50) 40%,
13
- transparent 70%
14
- );
15
- }
16
- .monster-skeleton-col-10,
17
- .monster-skeleton-col-20 {
18
- background-image: var(--monster-skeleton);
19
- background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
20
- background-repeat: no-repeat;
21
- background-position: 0 0;
22
- color: var(--monster-skeleton-color);
23
- min-height: 1px;
24
- }
25
- .monster-skeleton-col-20 {
26
- --monster-skeleton-color: var(--monster-color-pink-2);
27
- --monster-skeleton-color-50: rgba(
28
- from var(--monster-color-pink-2) 255 255 255 / 0.5
29
- );
30
- --monster-skeleton-height: 100%;
31
- --monster-skeleton-width: 20%;
32
- --monster-skeleton: linear-gradient(
33
- 99deg,
34
- var(--monster-skeleton-color) 0%,
35
- var(--monster-skeleton-color-50) 40%,
36
- transparent 70%
37
- );
38
- }
39
- .monster-skeleton-col-30 {
40
- --monster-skeleton-color: var(--monster-color-pink-2);
41
- --monster-skeleton-color-50: rgba(
42
- from var(--monster-color-pink-2) 255 255 255 / 0.5
43
- );
44
- --monster-skeleton-height: 100%;
45
- --monster-skeleton-width: 30%;
46
- --monster-skeleton: linear-gradient(
47
- 99deg,
48
- var(--monster-skeleton-color) 0%,
49
- var(--monster-skeleton-color-50) 40%,
50
- transparent 70%
51
- );
52
- }
53
- .monster-skeleton-col-30,
54
- .monster-skeleton-col-40 {
55
- background-image: var(--monster-skeleton);
56
- background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
57
- background-repeat: no-repeat;
58
- background-position: 0 0;
59
- color: var(--monster-skeleton-color);
60
- min-height: 1px;
61
- }
62
- .monster-skeleton-col-40 {
63
- --monster-skeleton-color: var(--monster-color-pink-2);
64
- --monster-skeleton-color-50: rgba(
65
- from var(--monster-color-pink-2) 255 255 255 / 0.5
66
- );
67
- --monster-skeleton-height: 100%;
68
- --monster-skeleton-width: 40%;
69
- --monster-skeleton: linear-gradient(
70
- 99deg,
71
- var(--monster-skeleton-color) 0%,
72
- var(--monster-skeleton-color-50) 40%,
73
- transparent 70%
74
- );
75
- }
76
- .monster-skeleton-col-50 {
77
- --monster-skeleton-color: var(--monster-color-pink-2);
78
- --monster-skeleton-color-50: rgba(
79
- from var(--monster-color-pink-2) 255 255 255 / 0.5
80
- );
81
- --monster-skeleton-height: 100%;
82
- --monster-skeleton-width: 50%;
83
- --monster-skeleton: linear-gradient(
84
- 99deg,
85
- var(--monster-skeleton-color) 0%,
86
- var(--monster-skeleton-color-50) 40%,
87
- transparent 70%
88
- );
89
- }
90
- .monster-skeleton-col-50,
91
- .monster-skeleton-col-60 {
92
- background-image: var(--monster-skeleton);
93
- background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
94
- background-repeat: no-repeat;
95
- background-position: 0 0;
96
- color: var(--monster-skeleton-color);
97
- min-height: 1px;
98
- }
99
- .monster-skeleton-col-60 {
100
- --monster-skeleton-color: var(--monster-color-pink-2);
101
- --monster-skeleton-color-50: rgba(
102
- from var(--monster-color-pink-2) 255 255 255 / 0.5
103
- );
104
- --monster-skeleton-height: 100%;
105
- --monster-skeleton-width: 60%;
106
- --monster-skeleton: linear-gradient(
107
- 99deg,
108
- var(--monster-skeleton-color) 0%,
109
- var(--monster-skeleton-color-50) 40%,
110
- transparent 70%
111
- );
112
- }
113
- .monster-skeleton-col-70 {
114
- --monster-skeleton-color: var(--monster-color-pink-2);
115
- --monster-skeleton-color-50: rgba(
116
- from var(--monster-color-pink-2) 255 255 255 / 0.5
117
- );
118
- --monster-skeleton-height: 100%;
119
- --monster-skeleton-width: 70%;
120
- --monster-skeleton: linear-gradient(
121
- 99deg,
122
- var(--monster-skeleton-color) 0%,
123
- var(--monster-skeleton-color-50) 40%,
124
- transparent 70%
125
- );
126
- }
127
- .monster-skeleton-col-70,
128
- .monster-skeleton-col-80 {
129
- background-image: var(--monster-skeleton);
130
- background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
131
- background-repeat: no-repeat;
132
- background-position: 0 0;
133
- color: var(--monster-skeleton-color);
134
- min-height: 1px;
135
- }
136
- .monster-skeleton-col-80 {
137
- --monster-skeleton-color: var(--monster-color-pink-2);
138
- --monster-skeleton-color-50: rgba(
139
- from var(--monster-color-pink-2) 255 255 255 / 0.5
140
- );
141
- --monster-skeleton-height: 100%;
142
- --monster-skeleton-width: 80%;
143
- --monster-skeleton: linear-gradient(
144
- 99deg,
145
- var(--monster-skeleton-color) 0%,
146
- var(--monster-skeleton-color-50) 40%,
147
- transparent 70%
148
- );
149
- }
150
- .monster-skeleton-col-90 {
151
- --monster-skeleton-color: var(--monster-color-pink-2);
152
- --monster-skeleton-color-50: rgba(
153
- from var(--monster-color-pink-2) 255 255 255 / 0.5
154
- );
155
- --monster-skeleton-height: 100%;
156
- --monster-skeleton-width: 90%;
157
- --monster-skeleton: linear-gradient(
158
- 99deg,
159
- var(--monster-skeleton-color) 0%,
160
- var(--monster-skeleton-color-50) 40%,
161
- transparent 70%
162
- );
163
- }
164
- .monster-skeleton-col-100,
165
- .monster-skeleton-col-90 {
166
- background-image: var(--monster-skeleton);
167
- background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
168
- background-repeat: no-repeat;
169
- background-position: 0 0;
170
- color: var(--monster-skeleton-color);
171
- min-height: 1px;
172
- }
173
- .monster-skeleton-col-100 {
174
- --monster-skeleton-color: var(--monster-color-pink-2);
175
- --monster-skeleton-color-50: rgba(
176
- from var(--monster-color-pink-2) 255 255 255 / 0.5
177
- );
178
- --monster-skeleton-height: 100%;
179
- --monster-skeleton-width: 100%;
180
- --monster-skeleton: linear-gradient(
181
- 99deg,
182
- var(--monster-skeleton-color) 0%,
183
- var(--monster-skeleton-color-50) 40%,
184
- transparent 70%
185
- );
186
- }
187
- .monster-skeleton-animated {
188
- animation: shimmer 4.25s linear infinite forwards;
189
- border-radius: 4px;
190
- }
191
- @keyframes shimmer {
192
- 0%,
193
- to {
194
- filter: brightness(0.81);
195
- }
196
- 50% {
197
- filter: brightness(0.45);
198
- }
199
- }
2
+ .monster-skeleton-col-10{--monster-skeleton-color:var(--monster-skeleton-fill,var(--monster-bg-color-primary-3));--monster-skeleton-color-50:color-mix(in srgb,var(--monster-skeleton-color) 50%,transparent);--monster-skeleton-height:100%;--monster-skeleton-width:10%;--monster-skeleton:linear-gradient(99deg,transparent 0%,var(--monster-skeleton-color-50) 18%,var(--monster-skeleton-color) 48%,var(--monster-skeleton-color-50) 78%,transparent 100%)}.monster-skeleton-col-10,.monster-skeleton-col-20{background-image:var(--monster-skeleton);background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);background-repeat:no-repeat;background-position:0 0;color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-20{--monster-skeleton-color:var(--monster-skeleton-fill,var(--monster-bg-color-primary-3));--monster-skeleton-color-50:color-mix(in srgb,var(--monster-skeleton-color) 50%,transparent);--monster-skeleton-height:100%;--monster-skeleton-width:20%;--monster-skeleton:linear-gradient(99deg,transparent 0%,var(--monster-skeleton-color-50) 18%,var(--monster-skeleton-color) 48%,var(--monster-skeleton-color-50) 78%,transparent 100%)}.monster-skeleton-col-30{--monster-skeleton-color:var(--monster-skeleton-fill,var(--monster-bg-color-primary-3));--monster-skeleton-color-50:color-mix(in srgb,var(--monster-skeleton-color) 50%,transparent);--monster-skeleton-height:100%;--monster-skeleton-width:30%;--monster-skeleton:linear-gradient(99deg,transparent 0%,var(--monster-skeleton-color-50) 18%,var(--monster-skeleton-color) 48%,var(--monster-skeleton-color-50) 78%,transparent 100%)}.monster-skeleton-col-30,.monster-skeleton-col-40{background-image:var(--monster-skeleton);background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);background-repeat:no-repeat;background-position:0 0;color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-40{--monster-skeleton-color:var(--monster-skeleton-fill,var(--monster-bg-color-primary-3));--monster-skeleton-color-50:color-mix(in srgb,var(--monster-skeleton-color) 50%,transparent);--monster-skeleton-height:100%;--monster-skeleton-width:40%;--monster-skeleton:linear-gradient(99deg,transparent 0%,var(--monster-skeleton-color-50) 18%,var(--monster-skeleton-color) 48%,var(--monster-skeleton-color-50) 78%,transparent 100%)}.monster-skeleton-col-50{--monster-skeleton-color:var(--monster-skeleton-fill,var(--monster-bg-color-primary-3));--monster-skeleton-color-50:color-mix(in srgb,var(--monster-skeleton-color) 50%,transparent);--monster-skeleton-height:100%;--monster-skeleton-width:50%;--monster-skeleton:linear-gradient(99deg,transparent 0%,var(--monster-skeleton-color-50) 18%,var(--monster-skeleton-color) 48%,var(--monster-skeleton-color-50) 78%,transparent 100%)}.monster-skeleton-col-50,.monster-skeleton-col-60{background-image:var(--monster-skeleton);background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);background-repeat:no-repeat;background-position:0 0;color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-60{--monster-skeleton-color:var(--monster-skeleton-fill,var(--monster-bg-color-primary-3));--monster-skeleton-color-50:color-mix(in srgb,var(--monster-skeleton-color) 50%,transparent);--monster-skeleton-height:100%;--monster-skeleton-width:60%;--monster-skeleton:linear-gradient(99deg,transparent 0%,var(--monster-skeleton-color-50) 18%,var(--monster-skeleton-color) 48%,var(--monster-skeleton-color-50) 78%,transparent 100%)}.monster-skeleton-col-70{--monster-skeleton-color:var(--monster-skeleton-fill,var(--monster-bg-color-primary-3));--monster-skeleton-color-50:color-mix(in srgb,var(--monster-skeleton-color) 50%,transparent);--monster-skeleton-height:100%;--monster-skeleton-width:70%;--monster-skeleton:linear-gradient(99deg,transparent 0%,var(--monster-skeleton-color-50) 18%,var(--monster-skeleton-color) 48%,var(--monster-skeleton-color-50) 78%,transparent 100%)}.monster-skeleton-col-70,.monster-skeleton-col-80{background-image:var(--monster-skeleton);background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);background-repeat:no-repeat;background-position:0 0;color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-80{--monster-skeleton-color:var(--monster-skeleton-fill,var(--monster-bg-color-primary-3));--monster-skeleton-color-50:color-mix(in srgb,var(--monster-skeleton-color) 50%,transparent);--monster-skeleton-height:100%;--monster-skeleton-width:80%;--monster-skeleton:linear-gradient(99deg,transparent 0%,var(--monster-skeleton-color-50) 18%,var(--monster-skeleton-color) 48%,var(--monster-skeleton-color-50) 78%,transparent 100%)}.monster-skeleton-col-90{--monster-skeleton-color:var(--monster-skeleton-fill,var(--monster-bg-color-primary-3));--monster-skeleton-color-50:color-mix(in srgb,var(--monster-skeleton-color) 50%,transparent);--monster-skeleton-height:100%;--monster-skeleton-width:90%;--monster-skeleton:linear-gradient(99deg,transparent 0%,var(--monster-skeleton-color-50) 18%,var(--monster-skeleton-color) 48%,var(--monster-skeleton-color-50) 78%,transparent 100%)}.monster-skeleton-col-100,.monster-skeleton-col-90{background-image:var(--monster-skeleton);background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);background-repeat:no-repeat;background-position:0 0;color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-100{--monster-skeleton-color:var(--monster-skeleton-fill,var(--monster-bg-color-primary-3));--monster-skeleton-color-50:color-mix(in srgb,var(--monster-skeleton-color) 50%,transparent);--monster-skeleton-height:100%;--monster-skeleton-width:100%;--monster-skeleton:linear-gradient(99deg,transparent 0%,var(--monster-skeleton-color-50) 18%,var(--monster-skeleton-color) 48%,var(--monster-skeleton-color-50) 78%,transparent 100%)}.monster-skeleton-animated{animation:shimmer 4.25s linear infinite forwards;border-radius:4px}@keyframes shimmer{0%,to{filter:brightness(.81)}50%{filter:brightness(.45)}}@media (prefers-reduced-motion:reduce){.monster-skeleton-animated{animation:none}}
package/source/components/style/skeleton.pcss CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  @for $i from 10 to 100 by 10 {
4
4
  .monster-skeleton-col-$(i) {
5
- @mixin skeleton $(i)%, var(--monster-color-pink-2);
5
+ @mixin skeleton $(i)%, var(--monster-bg-color-primary-3);
6
6
  }
7
7
  }
8
8
 
@@ -19,4 +19,10 @@
19
19
  50% {
20
20
  filter: brightness(0.45);
21
21
  }
22
- }
22
+ }
23
+
24
+ @media (prefers-reduced-motion: reduce) {
25
+ .monster-skeleton-animated {
26
+ animation: none;
27
+ }
28
+ }