@schukai/monster 4.148.8 → 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 (209) 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/source/dom/customelement.mjs +105 -40
  166. package/source/dom/updater.mjs +381 -119
  167. package/test/cases/components/content/image-editor.mjs +19 -0
  168. package/test/cases/components/datatable/accessibility-defaults.mjs +112 -0
  169. package/test/cases/components/datatable/filter-availability.mjs +37 -0
  170. package/test/cases/components/datatable/filter-date-range-layout.mjs +40 -0
  171. package/test/cases/components/datatable/filter-select-operator.mjs +118 -0
  172. package/test/cases/components/datatable/mobile-layout.mjs +203 -0
  173. package/test/cases/components/datatable/responsive-breakpoint.mjs +41 -0
  174. package/test/cases/components/datatable/selection.mjs +149 -0
  175. package/test/cases/components/form/action-button-style.mjs +85 -0
  176. package/test/cases/components/form/button-bar.mjs +222 -3
  177. package/test/cases/components/form/context-theme-colors.mjs +59 -0
  178. package/test/cases/components/form/control-bar.mjs +228 -3
  179. package/test/cases/components/form/control-heights.mjs +103 -0
  180. package/test/cases/components/form/digits-accessibility.mjs +65 -0
  181. package/test/cases/components/form/field-set.mjs +54 -0
  182. package/test/cases/components/form/floating-ui.mjs +74 -0
  183. package/test/cases/components/form/input-group.mjs +61 -28
  184. package/test/cases/components/form/login.mjs +47 -0
  185. package/test/cases/components/form/password.mjs +63 -0
  186. package/test/cases/components/form/popper-button.mjs +30 -15
  187. package/test/cases/components/form/quantity-accessibility.mjs +46 -0
  188. package/test/cases/components/form/register-wizard.mjs +79 -0
  189. package/test/cases/components/form/select.mjs +94 -2
  190. package/test/cases/components/form/sheet.mjs +56 -2
  191. package/test/cases/components/host/toggle-button.mjs +50 -0
  192. package/test/cases/components/layout/full-screen.mjs +60 -0
  193. package/test/cases/components/layout/iframe-accessibility.mjs +44 -0
  194. package/test/cases/components/layout/popper.mjs +128 -0
  195. package/test/cases/components/layout/slit-panel.mjs +30 -1
  196. package/test/cases/components/layout/tabs.mjs +93 -0
  197. package/test/cases/components/navigation/table-of-content.mjs +18 -0
  198. package/test/cases/components/state/state-style.mjs +31 -0
  199. package/test/cases/components/style/action-menu.mjs +74 -0
  200. package/test/cases/components/style/form-controls.mjs +37 -0
  201. package/test/cases/components/style/kpi-tile.mjs +60 -0
  202. package/test/cases/components/style/legacy-theme-compatibility.mjs +137 -0
  203. package/test/cases/components/style/metric-layout.mjs +94 -0
  204. package/test/cases/components/style/skeleton.mjs +69 -0
  205. package/test/cases/components/style/theme-component-catalog.mjs +853 -0
  206. package/test/cases/components/style/theme-modern.mjs +439 -0
  207. package/test/cases/components/style/theme-review-regressions.mjs +41 -0
  208. package/test/cases/dom/customelement.mjs +136 -1
  209. package/test/cases/dom/updater.mjs +174 -0
package/source/components/style/theme-modern.css ADDED
@@ -0,0 +1,74 @@
1
+ /** generated from theme-modern.pcss **/
2
+ :root[data-monster-theme-name=modern]{color-scheme:light dark;--monster-font-family:"IBM Plex Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--monster-theme-surface-canvas:#efeee9;--monster-theme-surface:#fcfbf8;--monster-theme-surface-subtle:#f2f1ed;--monster-theme-surface-strong:#e4e2dc;--monster-theme-text:#24231f;--monster-theme-text-secondary:#4d4b45;--monster-theme-text-muted:#66635b;--monster-theme-border:#858178;--monster-theme-border-strong:#625e56;--monster-theme-accent:#28262c;--monster-theme-accent-hover:#121115;--monster-theme-accent-subtle:#ece7df;--monster-theme-secondary:#4d4b45;--monster-theme-secondary-subtle:#f2e4d5;--monster-theme-secondary-strong:#3b3935;--monster-theme-tertiary:#236b5b;--monster-theme-tertiary-subtle:#dcefe6;--monster-theme-on-accent:#fff;--monster-theme-focus-ring:#236b5b;--monster-theme-selection:#dcefe6;--monster-theme-success:#276b46;--monster-theme-success-subtle:#e4f1d8;--monster-theme-warning:#7a5700;--monster-theme-warning-subtle:#fff1bd;--monster-theme-warning-emphasis:#f2c94c;--monster-theme-on-warning:#24231f;--monster-theme-error:#a12e45;--monster-theme-error-subtle:#fae2e8;--monster-theme-info:#5140a0;--monster-theme-info-subtle:#e9e3f8;--monster-theme-disabled:#66635b;--monster-theme-disabled-surface:#e4e2dc;--monster-color-primary-1:var(--monster-theme-text);--monster-color-primary-2:var(--monster-theme-text-secondary);--monster-color-primary-3:var(--monster-theme-text);--monster-color-primary-4:var(--monster-theme-on-accent);--monster-bg-color-primary-1:var(--monster-theme-surface);--monster-bg-color-primary-2:var(--monster-theme-surface-subtle);--monster-bg-color-primary-3:var(--monster-theme-surface-strong);--monster-bg-color-primary-4:var(--monster-theme-accent);--monster-color-secondary-1:var(--monster-theme-secondary);--monster-color-secondary-2:var(--monster-theme-secondary);--monster-color-secondary-3:var(--monster-theme-text);--monster-color-secondary-4:var(--monster-theme-on-accent);--monster-bg-color-secondary-1:var(--monster-theme-surface);--monster-bg-color-secondary-2:var(--monster-theme-secondary-subtle);--monster-bg-color-secondary-3:var(--monster-theme-secondary-subtle);--monster-bg-color-secondary-4:var(--monster-theme-secondary-strong);--monster-color-tertiary-1:var(--monster-theme-tertiary);--monster-color-tertiary-2:var(--monster-theme-tertiary);--monster-color-tertiary-3:var(--monster-theme-text);--monster-color-tertiary-4:var(--monster-theme-on-accent);--monster-bg-color-tertiary-1:var(--monster-theme-surface);--monster-bg-color-tertiary-2:var(--monster-theme-tertiary-subtle);--monster-bg-color-tertiary-3:var(--monster-theme-tertiary-subtle);--monster-bg-color-tertiary-4:var(--monster-theme-tertiary);--monster-color-destructive-1:var(--monster-theme-on-accent);--monster-color-destructive-2:var(--monster-theme-error);--monster-color-destructive-3:var(--monster-theme-text);--monster-color-destructive-4:var(--monster-theme-on-accent);--monster-bg-color-destructive-1:var(--monster-theme-error);--monster-bg-color-destructive-2:var(--monster-theme-surface);--monster-bg-color-destructive-3:var(--monster-theme-error-subtle);--monster-bg-color-destructive-4:var(--monster-theme-error);--monster-color-danger-1:var(--monster-theme-on-accent);--monster-color-danger-2:var(--monster-theme-error);--monster-color-danger-3:var(--monster-theme-text);--monster-color-danger-4:var(--monster-theme-on-accent);--monster-bg-color-danger-1:var(--monster-theme-error);--monster-bg-color-danger-2:var(--monster-theme-surface);--monster-bg-color-danger-3:var(--monster-theme-error-subtle);--monster-bg-color-danger-4:var(--monster-theme-error);--monster-color-error-1:var(--monster-theme-on-accent);--monster-color-error-2:var(--monster-theme-error);--monster-color-error-3:var(--monster-theme-text);--monster-color-error-4:var(--monster-theme-on-accent);--monster-bg-color-error-1:var(--monster-theme-error);--monster-bg-color-error-2:var(--monster-theme-surface);--monster-bg-color-error-3:var(--monster-theme-error-subtle);--monster-bg-color-error-4:var(--monster-theme-error);--monster-color-success-1:var(--monster-theme-on-accent);--monster-color-success-2:var(--monster-theme-success);--monster-color-success-3:var(--monster-theme-text);--monster-color-success-4:var(--monster-theme-on-accent);--monster-bg-color-success-1:var(--monster-theme-success);--monster-bg-color-success-2:var(--monster-theme-surface);--monster-bg-color-success-3:var(--monster-theme-success-subtle);--monster-bg-color-success-4:var(--monster-theme-success);--monster-color-warning-1:var(--monster-theme-on-warning);--monster-color-warning-2:var(--monster-theme-warning);--monster-color-warning-3:var(--monster-theme-text);--monster-color-warning-4:var(--monster-theme-on-warning);--monster-bg-color-warning-1:var(--monster-theme-warning-emphasis);--monster-bg-color-warning-2:var(--monster-theme-surface);--monster-bg-color-warning-3:var(--monster-theme-warning-subtle);--monster-bg-color-warning-4:var(--monster-theme-warning-emphasis);--monster-color-selection-1:var(--monster-theme-text);--monster-color-selection-2:var(--monster-theme-text);--monster-color-selection-3:var(--monster-theme-text);--monster-color-selection-4:var(--monster-theme-on-accent);--monster-bg-color-selection-1:var(--monster-theme-selection);--monster-bg-color-selection-2:var(--monster-theme-accent-subtle);--monster-bg-color-selection-3:var(--monster-theme-selection);--monster-bg-color-selection-4:var(--monster-theme-accent-hover);--monster-color-primary-disabled-1:var(--monster-theme-disabled);--monster-color-primary-disabled-2:var(--monster-theme-disabled);--monster-color-primary-disabled-3:var(--monster-theme-disabled);--monster-color-primary-disabled-4:var(--monster-theme-disabled);--monster-bg-color-primary-disabled-1:var(
3
+ --monster-theme-disabled-surface
4
+ );--monster-bg-color-primary-disabled-2:var(
5
+ --monster-theme-disabled-surface
6
+ );--monster-bg-color-primary-disabled-3:var(
7
+ --monster-theme-disabled-surface
8
+ );--monster-bg-color-primary-disabled-4:var(
9
+ --monster-theme-disabled-surface
10
+ );--monster-color-border-1:var(--monster-theme-border);--monster-color-border-2:var(--monster-theme-border);--monster-color-border-3:var(--monster-theme-border-strong);--monster-color-border-4:var(--monster-theme-border-strong);--monster-border-style:solid;--monster-border-width:1px;--monster-border-radius:0.25rem;--monster-outline-width:3px;--monster-box-shadow-1:none;--monster-box-shadow-2:0 2px 0 rgba(36,35,31,.18);--monster-text-shadow:none;--monster-focus-ring-width:3px;--monster-focus-ring-style:solid;--monster-focus-ring-color:var(--monster-theme-focus-ring);--monster-focus-ring-offset:2px;--monster-control-min-block-size:max(2.75rem,44px);--monster-control-padding-block:0.625rem;--monster-control-padding-inline:0.875rem;--monster-button-padding:0.5rem 0.875rem;--monster-tree-menu-font-size-level-1:1rem;--monster-tree-menu-font-size-level-2:0.9375rem;--monster-tree-menu-font-size-level-3:0.875rem;--monster-tree-menu-font-size-deep:0.875rem;--monster-tree-menu-button-min-block-size:2rem;--monster-tree-menu-button-padding:0.3125rem 0.5rem;--monster-tree-menu-button-align-items:center;--monster-input-group-color:var(--monster-theme-text);--monster-input-group-background-color:var(--monster-theme-surface);--monster-input-group-box-shadow:none;--monster-input-group-hover-color:var(--monster-theme-text);--monster-input-group-hover-background-color:var(
11
+ --monster-theme-surface-subtle
12
+ );--monster-input-group-hover-border-color:var(
13
+ --monster-theme-border-strong
14
+ );--monster-input-group-hover-box-shadow:none;--monster-input-group-field-background-color:transparent;--monster-input-group-field-hover-background-color:transparent;--monster-action-menu-padding:0.25rem;--monster-action-menu-background-color:var(--monster-theme-surface);--monster-action-menu-color:var(--monster-theme-text);--monster-action-menu-border-width:1px;--monster-action-menu-border-style:solid;--monster-action-menu-border-color:var(--monster-theme-border);--monster-action-menu-border-radius:0.25rem;--monster-action-menu-box-shadow:none;--monster-action-menu-gap:0.125rem;--monster-action-menu-min-inline-size:11rem;--monster-action-menu-item-min-block-size:max(2.75rem,44px);--monster-action-menu-item-padding:0.625rem 0.75rem;--monster-action-menu-item-color:var(--monster-theme-text);--monster-action-menu-item-background-color:transparent;--monster-action-menu-item-border-width:0;--monster-action-menu-item-border-style:solid;--monster-action-menu-item-border-color:transparent;--monster-action-menu-item-border-radius:0.125rem;--monster-action-menu-item-box-shadow:none;--monster-action-menu-item-justify-content:flex-start;--monster-action-menu-item-text-align:left;--monster-action-menu-item-hover-color:var(--monster-theme-text);--monster-action-menu-item-hover-background-color:var(
15
+ --monster-theme-surface-subtle
16
+ );--monster-action-menu-item-hover-border-color:transparent;--monster-action-menu-item-hover-box-shadow:none;--monster-action-menu-item-active-background-color:var(
17
+ --monster-theme-surface-strong
18
+ );--monster-action-menu-item-focus-outline-offset:-3px;--monster-button-bar-gap:0;--monster-button-bar-item-spacing:0;--monster-button-bar-popper-gap:var(--monster-action-menu-gap);--monster-button-bar-popper-item-spacing:0;--monster-action-button-popper-padding:var(--monster-action-menu-padding);--monster-action-button-popper-background-color:var(
19
+ --monster-action-menu-background-color
20
+ );--monster-action-button-popper-border-color:var(
21
+ --monster-action-menu-border-color
22
+ );--monster-action-button-popper-border-radius:var(
23
+ --monster-action-menu-border-radius
24
+ );--monster-action-button-popper-box-shadow:var(
25
+ --monster-action-menu-box-shadow
26
+ );--monster-action-button-menu-gap:var(--monster-action-menu-gap);--monster-action-button-menu-min-inline-size:var(
27
+ --monster-action-menu-min-inline-size
28
+ );--monster-action-button-item-inline-size:100%;--monster-action-button-item-min-inline-size:100%;--monster-action-button-item-justify-content:var(
29
+ --monster-action-menu-item-justify-content
30
+ );--monster-action-button-item-label-justify-content:flex-start;--monster-action-button-item-padding:var(
31
+ --monster-action-menu-item-padding
32
+ );--monster-action-button-item-color:var(--monster-action-menu-item-color);--monster-action-button-item-background-color:var(
33
+ --monster-action-menu-item-background-color
34
+ );--monster-action-button-item-border:var(
35
+ --monster-action-menu-item-border-width
36
+ ) var(--monster-action-menu-item-border-style) var(--monster-action-menu-item-border-color);--monster-action-button-item-border-radius:var(
37
+ --monster-action-menu-item-border-radius
38
+ );--monster-action-button-item-box-shadow:var(
39
+ --monster-action-menu-item-box-shadow
40
+ );--monster-action-button-item-margin:0;--monster-action-button-item-text-align:var(
41
+ --monster-action-menu-item-text-align
42
+ );--monster-action-button-item-hover-color:var(
43
+ --monster-action-menu-item-hover-color
44
+ );--monster-action-button-item-hover-background-color:var(
45
+ --monster-action-menu-item-hover-background-color
46
+ );--monster-action-button-item-hover-box-shadow:var(
47
+ --monster-action-menu-item-hover-box-shadow
48
+ );--monster-action-button-item-focus-outline-offset:var(
49
+ --monster-action-menu-item-focus-outline-offset
50
+ );--monster-theme-control-bg-color:var(--monster-theme-surface);--monster-theme-control-color:var(--monster-theme-text);--monster-theme-control-hover-color:var(--monster-theme-text);--monster-theme-control-hover-bg-color:var(
51
+ --monster-theme-surface-subtle
52
+ );--monster-theme-control-border-width:1px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0.25rem;--monster-theme-control-border-color:var(--monster-theme-border);--monster-full-screen-control-size:var(--monster-control-min-block-size);--monster-full-screen-control-border-width:1px;--monster-full-screen-control-border-radius:0.25rem;--monster-full-screen-control-border-color:var(--monster-theme-border);--monster-full-screen-control-background-color:var(
53
+ --monster-theme-surface-subtle
54
+ );--monster-full-screen-control-color:var(--monster-theme-text);--monster-full-screen-control-box-shadow:none;--monster-full-screen-control-hover-background-color:var(
55
+ --monster-theme-surface-strong
56
+ );--monster-full-screen-control-hover-color:var(--monster-theme-text);--monster-full-screen-control-hover-border-color:var(
57
+ --monster-theme-border-strong
58
+ );--monster-full-screen-control-active-background-color:var(
59
+ --monster-theme-accent
60
+ );--monster-full-screen-control-active-color:var(--monster-theme-on-accent);--monster-full-screen-control-active-border-color:var(--monster-theme-accent);--monster-full-screen-icon-size:1.125rem;--monster-dragger-width:0.75rem;--monster-dragger-handle-width:0.375rem;--monster-dragger-handle-height:2.75rem;--monster-split-panel-dragger-background-color:var(
61
+ --monster-theme-surface-strong
62
+ );--monster-split-panel-dragger-hover-background-color:var(
63
+ --monster-theme-secondary-subtle
64
+ );--monster-split-panel-handle-background-color:var(
65
+ --monster-theme-border-strong
66
+ );--monster-split-panel-handle-hover-background-color:var(
67
+ --monster-theme-secondary
68
+ );--monster-split-panel-handle-active-background-color:var(
69
+ --monster-theme-accent
70
+ );--monster-split-panel-handle-border-radius:999px;--monster-split-panel-handle-active-scale:0.92;--monster-split-panel-transition-duration:160ms;--monster-tabs-nav-align-items:flex-end;--monster-tabs-nav-background-color:transparent;--monster-tabs-nav-border-width:0 0 1px;--monster-tabs-nav-border-color:var(--monster-theme-border);--monster-tabs-nav-border-radius:0;--monster-tabs-nav-box-shadow:none;--monster-tabs-nav-gap:0.25rem;--monster-tabs-nav-margin-block-end:0.75rem;--monster-tabs-nav-padding:0;--monster-tabs-button-font-weight:400;--monster-tabs-button-color:var(--monster-theme-text-secondary);--monster-tabs-button-background-color:transparent;--monster-tabs-button-border-width:0 0 3px;--monster-tabs-button-border-color:transparent;--monster-tabs-button-border-radius:0;--monster-tabs-button-margin-inline-end:0.75rem;--monster-tabs-button-min-block-size:var(--monster-control-min-block-size);--monster-tabs-button-padding:0.625rem 0 0.5rem;--monster-tabs-button-box-shadow:none;--monster-tabs-button-transition:border-color 160ms ease,color 160ms ease;--monster-tabs-button-hover-background-color:transparent;--monster-tabs-button-hover-border-color:var(--monster-theme-border-strong);--monster-tabs-button-hover-box-shadow:none;--monster-tabs-button-hover-color:var(--monster-theme-text);--monster-tabs-button-active-background-color:transparent;--monster-tabs-button-active-border-color:var(--monster-theme-tertiary);--monster-tabs-button-active-box-shadow:none;--monster-tabs-button-active-color:var(--monster-theme-tertiary);--monster-tabs-button-active-font-weight:500;--monster-tabs-indicator-inline-size:0;--monster-tabs-indicator-block-size:0;--monster-tabs-indicator-background-color:var(--monster-theme-tertiary);--monster-tabs-indicator-hover-opacity:0;--monster-tabs-indicator-active-opacity:0;--monster-tabs-overflow-switch-inline-size:var(
71
+ --monster-control-min-block-size
72
+ );--monster-tabs-overflow-switch-padding:0.625rem;--monster-tabs-overflow-switch-border-width:0;--monster-tabs-overflow-switch-border-color:transparent;--monster-tabs-overflow-switch-background-color:transparent;--monster-tabs-overflow-switch-hover-background-color:var(
73
+ --monster-theme-surface-subtle
74
+ );--monster-tabs-slot-border-width:1px;--monster-tabs-slot-border-style:solid;--monster-tabs-slot-border-color:transparent;--monster-tabs-slot-border-radius:calc(var(--monster-border-radius)*0.75);--monster-tabs-slot-box-shadow:none;--monster-tabs-slot-padding:0.5rem 0.75rem;--monster-datatable-cell-padding:0.45rem 0.5rem;--monster-datatable-header-cell-padding:0.45rem 0.5rem;--monster-datatable-header-cell-padding-inline-end:2rem;--monster-datatable-row-border-width:1px;--monster-datatable-row-border-style:solid;--monster-datatable-row-border-color:var(--monster-theme-surface-strong);--monster-vertical-tabs-control-gap:1.25rem;--monster-vertical-tabs-control-min-block-size:9rem;--monster-vertical-tabs-nav-align-self:flex-start;--monster-vertical-tabs-nav-block-size:max-content;--monster-vertical-tabs-nav-border-width:0;--monster-vertical-tabs-nav-border-color:transparent;--monster-vertical-tabs-nav-gap:0.25rem;--monster-vertical-tabs-nav-margin-inline-end:0;--monster-vertical-tabs-nav-max-block-size:none;--monster-vertical-tabs-nav-min-block-size:9rem;--monster-vertical-tabs-nav-min-inline-size:10rem;--monster-vertical-tabs-button-border-width:0;--monster-vertical-tabs-button-flex-direction:row;--monster-vertical-tabs-button-justify-content:flex-start;--monster-vertical-tabs-button-margin-block-end:0;--monster-vertical-tabs-button-padding:0 0.75rem 0 1.25rem;--monster-vertical-tabs-button-inline-size:100%;--monster-vertical-tabs-label-writing-mode:horizontal-tb;--monster-vertical-tabs-label-text-orientation:mixed;--monster-vertical-tabs-slotted-border-width:0;--monster-theme-on-color:var(--monster-theme-on-accent);--monster-theme-on-bg-color:var(--monster-theme-success);--monster-theme-off-color:var(--monster-theme-text-secondary);--monster-theme-off-bg-color:var(--monster-theme-surface-strong);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045;--monster-space-0:0;--monster-space-1:0.25rem;--monster-space-2:0.5rem;--monster-space-3:0.75rem;--monster-space-4:1rem;--monster-space-5:1.5rem;--monster-space-6:2rem;--monster-space-7:3rem}@media (prefers-color-scheme:dark){:root[data-monster-theme-name=modern]{--monster-theme-surface-canvas:#161512;--monster-theme-surface:#1e1d1a;--monster-theme-surface-subtle:#282622;--monster-theme-surface-strong:#34312c;--monster-theme-text:#f4f0e8;--monster-theme-text-secondary:#d2ccc0;--monster-theme-text-muted:#aaa397;--monster-theme-border:#777065;--monster-theme-border-strong:#9c9385;--monster-theme-accent:#eee7dc;--monster-theme-accent-hover:#fff;--monster-theme-accent-subtle:#39352f;--monster-theme-secondary:#d2ccc0;--monster-theme-secondary-subtle:#302d29;--monster-theme-secondary-strong:#e5dfd5;--monster-theme-tertiary:#72cbb0;--monster-theme-tertiary-subtle:#183930;--monster-theme-on-accent:#201e1a;--monster-theme-focus-ring:#72cbb0;--monster-theme-selection:#24483e;--monster-theme-success:#72cf96;--monster-theme-success-subtle:#183a28;--monster-theme-warning:#f0c94f;--monster-theme-warning-subtle:#413615;--monster-theme-warning-emphasis:#f2c94c;--monster-theme-on-warning:#24231f;--monster-theme-error:#f28ba0;--monster-theme-error-subtle:#481e29;--monster-theme-info:#b1a1ef;--monster-theme-info-subtle:#31294a;--monster-theme-disabled:#a49d91;--monster-theme-disabled-surface:#37342f;--monster-box-shadow-2:0 2px 0 rgba(0,0,0,.45);--monster-color-gradient-1:#ffe0b2;--monster-color-gradient-2:#ad8275;--monster-color-gradient-3:#771ba3}}
package/source/components/style/theme-modern.pcss ADDED
@@ -0,0 +1,498 @@
1
+ :root[data-monster-theme-name="modern"] {
2
+ color-scheme: light dark;
3
+ --monster-font-family:
4
+ "IBM Plex Sans",
5
+ system-ui,
6
+ -apple-system,
7
+ BlinkMacSystemFont,
8
+ "Segoe UI",
9
+ sans-serif;
10
+
11
+ /** Semantic surfaces and content colors */
12
+ --monster-theme-surface-canvas: #efeee9;
13
+ --monster-theme-surface: #fcfbf8;
14
+ --monster-theme-surface-subtle: #f2f1ed;
15
+ --monster-theme-surface-strong: #e4e2dc;
16
+ --monster-theme-text: #24231f;
17
+ --monster-theme-text-secondary: #4d4b45;
18
+ --monster-theme-text-muted: #66635b;
19
+ --monster-theme-border: #858178;
20
+ --monster-theme-border-strong: #625e56;
21
+
22
+ /** Semantic interactive colors */
23
+ --monster-theme-accent: #28262c;
24
+ --monster-theme-accent-hover: #121115;
25
+ --monster-theme-accent-subtle: #ece7df;
26
+ --monster-theme-secondary: #4d4b45;
27
+ --monster-theme-secondary-subtle: #f2e4d5;
28
+ --monster-theme-secondary-strong: #3b3935;
29
+ --monster-theme-tertiary: #236b5b;
30
+ --monster-theme-tertiary-subtle: #dcefe6;
31
+ --monster-theme-on-accent: #ffffff;
32
+ --monster-theme-focus-ring: #236b5b;
33
+ --monster-theme-selection: #dcefe6;
34
+
35
+ /** Semantic status colors */
36
+ --monster-theme-success: #276b46;
37
+ --monster-theme-success-subtle: #e4f1d8;
38
+ --monster-theme-warning: #7a5700;
39
+ --monster-theme-warning-subtle: #fff1bd;
40
+ --monster-theme-warning-emphasis: #f2c94c;
41
+ --monster-theme-on-warning: #24231f;
42
+ --monster-theme-error: #a12e45;
43
+ --monster-theme-error-subtle: #fae2e8;
44
+ --monster-theme-info: #5140a0;
45
+ --monster-theme-info-subtle: #e9e3f8;
46
+ --monster-theme-disabled: #66635b;
47
+ --monster-theme-disabled-surface: #e4e2dc;
48
+
49
+ /** Primary compatibility tokens */
50
+ --monster-color-primary-1: var(--monster-theme-text);
51
+ --monster-color-primary-2: var(--monster-theme-text-secondary);
52
+ --monster-color-primary-3: var(--monster-theme-text);
53
+ --monster-color-primary-4: var(--monster-theme-on-accent);
54
+ --monster-bg-color-primary-1: var(--monster-theme-surface);
55
+ --monster-bg-color-primary-2: var(--monster-theme-surface-subtle);
56
+ --monster-bg-color-primary-3: var(--monster-theme-surface-strong);
57
+ --monster-bg-color-primary-4: var(--monster-theme-accent);
58
+
59
+ /** Secondary compatibility tokens */
60
+ --monster-color-secondary-1: var(--monster-theme-secondary);
61
+ --monster-color-secondary-2: var(--monster-theme-secondary);
62
+ --monster-color-secondary-3: var(--monster-theme-text);
63
+ --monster-color-secondary-4: var(--monster-theme-on-accent);
64
+ --monster-bg-color-secondary-1: var(--monster-theme-surface);
65
+ --monster-bg-color-secondary-2: var(--monster-theme-secondary-subtle);
66
+ --monster-bg-color-secondary-3: var(--monster-theme-secondary-subtle);
67
+ --monster-bg-color-secondary-4: var(--monster-theme-secondary-strong);
68
+
69
+ /** Tertiary compatibility tokens */
70
+ --monster-color-tertiary-1: var(--monster-theme-tertiary);
71
+ --monster-color-tertiary-2: var(--monster-theme-tertiary);
72
+ --monster-color-tertiary-3: var(--monster-theme-text);
73
+ --monster-color-tertiary-4: var(--monster-theme-on-accent);
74
+ --monster-bg-color-tertiary-1: var(--monster-theme-surface);
75
+ --monster-bg-color-tertiary-2: var(--monster-theme-tertiary-subtle);
76
+ --monster-bg-color-tertiary-3: var(--monster-theme-tertiary-subtle);
77
+ --monster-bg-color-tertiary-4: var(--monster-theme-tertiary);
78
+
79
+ /** Destructive, danger, and error compatibility tokens */
80
+ --monster-color-destructive-1: var(--monster-theme-on-accent);
81
+ --monster-color-destructive-2: var(--monster-theme-error);
82
+ --monster-color-destructive-3: var(--monster-theme-text);
83
+ --monster-color-destructive-4: var(--monster-theme-on-accent);
84
+ --monster-bg-color-destructive-1: var(--monster-theme-error);
85
+ --monster-bg-color-destructive-2: var(--monster-theme-surface);
86
+ --monster-bg-color-destructive-3: var(--monster-theme-error-subtle);
87
+ --monster-bg-color-destructive-4: var(--monster-theme-error);
88
+
89
+ --monster-color-danger-1: var(--monster-theme-on-accent);
90
+ --monster-color-danger-2: var(--monster-theme-error);
91
+ --monster-color-danger-3: var(--monster-theme-text);
92
+ --monster-color-danger-4: var(--monster-theme-on-accent);
93
+ --monster-bg-color-danger-1: var(--monster-theme-error);
94
+ --monster-bg-color-danger-2: var(--monster-theme-surface);
95
+ --monster-bg-color-danger-3: var(--monster-theme-error-subtle);
96
+ --monster-bg-color-danger-4: var(--monster-theme-error);
97
+
98
+ --monster-color-error-1: var(--monster-theme-on-accent);
99
+ --monster-color-error-2: var(--monster-theme-error);
100
+ --monster-color-error-3: var(--monster-theme-text);
101
+ --monster-color-error-4: var(--monster-theme-on-accent);
102
+ --monster-bg-color-error-1: var(--monster-theme-error);
103
+ --monster-bg-color-error-2: var(--monster-theme-surface);
104
+ --monster-bg-color-error-3: var(--monster-theme-error-subtle);
105
+ --monster-bg-color-error-4: var(--monster-theme-error);
106
+
107
+ /** Success compatibility tokens */
108
+ --monster-color-success-1: var(--monster-theme-on-accent);
109
+ --monster-color-success-2: var(--monster-theme-success);
110
+ --monster-color-success-3: var(--monster-theme-text);
111
+ --monster-color-success-4: var(--monster-theme-on-accent);
112
+ --monster-bg-color-success-1: var(--monster-theme-success);
113
+ --monster-bg-color-success-2: var(--monster-theme-surface);
114
+ --monster-bg-color-success-3: var(--monster-theme-success-subtle);
115
+ --monster-bg-color-success-4: var(--monster-theme-success);
116
+
117
+ /** Warning compatibility tokens */
118
+ --monster-color-warning-1: var(--monster-theme-on-warning);
119
+ --monster-color-warning-2: var(--monster-theme-warning);
120
+ --monster-color-warning-3: var(--monster-theme-text);
121
+ --monster-color-warning-4: var(--monster-theme-on-warning);
122
+ --monster-bg-color-warning-1: var(--monster-theme-warning-emphasis);
123
+ --monster-bg-color-warning-2: var(--monster-theme-surface);
124
+ --monster-bg-color-warning-3: var(--monster-theme-warning-subtle);
125
+ --monster-bg-color-warning-4: var(--monster-theme-warning-emphasis);
126
+
127
+ /** Selection and disabled compatibility tokens */
128
+ --monster-color-selection-1: var(--monster-theme-text);
129
+ --monster-color-selection-2: var(--monster-theme-text);
130
+ --monster-color-selection-3: var(--monster-theme-text);
131
+ --monster-color-selection-4: var(--monster-theme-on-accent);
132
+ --monster-bg-color-selection-1: var(--monster-theme-selection);
133
+ --monster-bg-color-selection-2: var(--monster-theme-accent-subtle);
134
+ --monster-bg-color-selection-3: var(--monster-theme-selection);
135
+ --monster-bg-color-selection-4: var(--monster-theme-accent-hover);
136
+
137
+ --monster-color-primary-disabled-1: var(--monster-theme-disabled);
138
+ --monster-color-primary-disabled-2: var(--monster-theme-disabled);
139
+ --monster-color-primary-disabled-3: var(--monster-theme-disabled);
140
+ --monster-color-primary-disabled-4: var(--monster-theme-disabled);
141
+ --monster-bg-color-primary-disabled-1: var(
142
+ --monster-theme-disabled-surface
143
+ );
144
+ --monster-bg-color-primary-disabled-2: var(
145
+ --monster-theme-disabled-surface
146
+ );
147
+ --monster-bg-color-primary-disabled-3: var(
148
+ --monster-theme-disabled-surface
149
+ );
150
+ --monster-bg-color-primary-disabled-4: var(
151
+ --monster-theme-disabled-surface
152
+ );
153
+
154
+ /** Borders, controls, focus, and elevation */
155
+ --monster-color-border-1: var(--monster-theme-border);
156
+ --monster-color-border-2: var(--monster-theme-border);
157
+ --monster-color-border-3: var(--monster-theme-border-strong);
158
+ --monster-color-border-4: var(--monster-theme-border-strong);
159
+ --monster-border-style: solid;
160
+ --monster-border-width: 1px;
161
+ --monster-border-radius: 0.25rem;
162
+ --monster-outline-width: 3px;
163
+ --monster-box-shadow-1: none;
164
+ --monster-box-shadow-2: 0 2px 0 rgb(36 35 31 / 18%);
165
+ --monster-text-shadow: none;
166
+ --monster-focus-ring-width: 3px;
167
+ --monster-focus-ring-style: solid;
168
+ --monster-focus-ring-color: var(--monster-theme-focus-ring);
169
+ --monster-focus-ring-offset: 2px;
170
+ --monster-control-min-block-size: max(2.75rem, 44px);
171
+ --monster-control-padding-block: 0.625rem;
172
+ --monster-control-padding-inline: 0.875rem;
173
+ --monster-button-padding: 0.5rem 0.875rem;
174
+ --monster-tree-menu-font-size-level-1: 1rem;
175
+ --monster-tree-menu-font-size-level-2: 0.9375rem;
176
+ --monster-tree-menu-font-size-level-3: 0.875rem;
177
+ --monster-tree-menu-font-size-deep: 0.875rem;
178
+ --monster-tree-menu-button-min-block-size: 2rem;
179
+ --monster-tree-menu-button-padding: 0.3125rem 0.5rem;
180
+ --monster-tree-menu-button-align-items: center;
181
+ --monster-input-group-color: var(--monster-theme-text);
182
+ --monster-input-group-background-color: var(--monster-theme-surface);
183
+ --monster-input-group-box-shadow: none;
184
+ --monster-input-group-hover-color: var(--monster-theme-text);
185
+ --monster-input-group-hover-background-color: var(
186
+ --monster-theme-surface-subtle
187
+ );
188
+ --monster-input-group-hover-border-color: var(
189
+ --monster-theme-border-strong
190
+ );
191
+ --monster-input-group-hover-box-shadow: none;
192
+ --monster-input-group-field-background-color: transparent;
193
+ --monster-input-group-field-hover-background-color: transparent;
194
+
195
+ /** Shared action menus in poppers and context menus */
196
+ --monster-action-menu-padding: 0.25rem;
197
+ --monster-action-menu-background-color: var(--monster-theme-surface);
198
+ --monster-action-menu-color: var(--monster-theme-text);
199
+ --monster-action-menu-border-width: 1px;
200
+ --monster-action-menu-border-style: solid;
201
+ --monster-action-menu-border-color: var(--monster-theme-border);
202
+ --monster-action-menu-border-radius: 0.25rem;
203
+ --monster-action-menu-box-shadow: none;
204
+ --monster-action-menu-gap: 0.125rem;
205
+ --monster-action-menu-min-inline-size: 11rem;
206
+ --monster-action-menu-item-min-block-size: max(2.75rem, 44px);
207
+ --monster-action-menu-item-padding: 0.625rem 0.75rem;
208
+ --monster-action-menu-item-color: var(--monster-theme-text);
209
+ --monster-action-menu-item-background-color: transparent;
210
+ --monster-action-menu-item-border-width: 0;
211
+ --monster-action-menu-item-border-style: solid;
212
+ --monster-action-menu-item-border-color: transparent;
213
+ --monster-action-menu-item-border-radius: 0.125rem;
214
+ --monster-action-menu-item-box-shadow: none;
215
+ --monster-action-menu-item-justify-content: flex-start;
216
+ --monster-action-menu-item-text-align: left;
217
+ --monster-action-menu-item-hover-color: var(--monster-theme-text);
218
+ --monster-action-menu-item-hover-background-color: var(
219
+ --monster-theme-surface-subtle
220
+ );
221
+ --monster-action-menu-item-hover-border-color: transparent;
222
+ --monster-action-menu-item-hover-box-shadow: none;
223
+ --monster-action-menu-item-active-background-color: var(
224
+ --monster-theme-surface-strong
225
+ );
226
+ --monster-action-menu-item-focus-outline-offset: -3px;
227
+
228
+ --monster-button-bar-gap: 0;
229
+ --monster-button-bar-item-spacing: 0;
230
+ --monster-button-bar-popper-gap: var(--monster-action-menu-gap);
231
+ --monster-button-bar-popper-item-spacing: 0;
232
+ --monster-action-button-popper-padding: var(--monster-action-menu-padding);
233
+ --monster-action-button-popper-background-color: var(
234
+ --monster-action-menu-background-color
235
+ );
236
+ --monster-action-button-popper-border-color: var(
237
+ --monster-action-menu-border-color
238
+ );
239
+ --monster-action-button-popper-border-radius: var(
240
+ --monster-action-menu-border-radius
241
+ );
242
+ --monster-action-button-popper-box-shadow: var(
243
+ --monster-action-menu-box-shadow
244
+ );
245
+ --monster-action-button-menu-gap: var(--monster-action-menu-gap);
246
+ --monster-action-button-menu-min-inline-size: var(
247
+ --monster-action-menu-min-inline-size
248
+ );
249
+ --monster-action-button-item-inline-size: 100%;
250
+ --monster-action-button-item-min-inline-size: 100%;
251
+ --monster-action-button-item-justify-content: var(
252
+ --monster-action-menu-item-justify-content
253
+ );
254
+ --monster-action-button-item-label-justify-content: flex-start;
255
+ --monster-action-button-item-padding: var(
256
+ --monster-action-menu-item-padding
257
+ );
258
+ --monster-action-button-item-color: var(--monster-action-menu-item-color);
259
+ --monster-action-button-item-background-color: var(
260
+ --monster-action-menu-item-background-color
261
+ );
262
+ --monster-action-button-item-border: var(
263
+ --monster-action-menu-item-border-width
264
+ )
265
+ var(--monster-action-menu-item-border-style)
266
+ var(--monster-action-menu-item-border-color);
267
+ --monster-action-button-item-border-radius: var(
268
+ --monster-action-menu-item-border-radius
269
+ );
270
+ --monster-action-button-item-box-shadow: var(
271
+ --monster-action-menu-item-box-shadow
272
+ );
273
+ --monster-action-button-item-margin: 0;
274
+ --monster-action-button-item-text-align: var(
275
+ --monster-action-menu-item-text-align
276
+ );
277
+ --monster-action-button-item-hover-color: var(
278
+ --monster-action-menu-item-hover-color
279
+ );
280
+ --monster-action-button-item-hover-background-color: var(
281
+ --monster-action-menu-item-hover-background-color
282
+ );
283
+ --monster-action-button-item-hover-box-shadow: var(
284
+ --monster-action-menu-item-hover-box-shadow
285
+ );
286
+ --monster-action-button-item-focus-outline-offset: var(
287
+ --monster-action-menu-item-focus-outline-offset
288
+ );
289
+
290
+ --monster-theme-control-bg-color: var(--monster-theme-surface);
291
+ --monster-theme-control-color: var(--monster-theme-text);
292
+ --monster-theme-control-hover-color: var(--monster-theme-text);
293
+ --monster-theme-control-hover-bg-color: var(
294
+ --monster-theme-surface-subtle
295
+ );
296
+ --monster-theme-control-border-width: 1px;
297
+ --monster-theme-control-border-style: solid;
298
+ --monster-theme-control-border-radius: 0.25rem;
299
+ --monster-theme-control-border-color: var(--monster-theme-border);
300
+
301
+ /** Full-screen icon control */
302
+ --monster-full-screen-control-size: var(--monster-control-min-block-size);
303
+ --monster-full-screen-control-border-width: 1px;
304
+ --monster-full-screen-control-border-radius: 0.25rem;
305
+ --monster-full-screen-control-border-color: var(--monster-theme-border);
306
+ --monster-full-screen-control-background-color: var(
307
+ --monster-theme-surface-subtle
308
+ );
309
+ --monster-full-screen-control-color: var(--monster-theme-text);
310
+ --monster-full-screen-control-box-shadow: none;
311
+ --monster-full-screen-control-hover-background-color: var(
312
+ --monster-theme-surface-strong
313
+ );
314
+ --monster-full-screen-control-hover-color: var(--monster-theme-text);
315
+ --monster-full-screen-control-hover-border-color: var(
316
+ --monster-theme-border-strong
317
+ );
318
+ --monster-full-screen-control-active-background-color: var(
319
+ --monster-theme-accent
320
+ );
321
+ --monster-full-screen-control-active-color: var(--monster-theme-on-accent);
322
+ --monster-full-screen-control-active-border-color: var(--monster-theme-accent);
323
+ --monster-full-screen-icon-size: 1.125rem;
324
+
325
+ /** Split-panel separator and drag handle */
326
+ --monster-dragger-width: 0.75rem;
327
+ --monster-dragger-handle-width: 0.375rem;
328
+ --monster-dragger-handle-height: 2.75rem;
329
+ --monster-split-panel-dragger-background-color: var(
330
+ --monster-theme-surface-strong
331
+ );
332
+ --monster-split-panel-dragger-hover-background-color: var(
333
+ --monster-theme-secondary-subtle
334
+ );
335
+ --monster-split-panel-handle-background-color: var(
336
+ --monster-theme-border-strong
337
+ );
338
+ --monster-split-panel-handle-hover-background-color: var(
339
+ --monster-theme-secondary
340
+ );
341
+ --monster-split-panel-handle-active-background-color: var(
342
+ --monster-theme-accent
343
+ );
344
+ --monster-split-panel-handle-border-radius: 999px;
345
+ --monster-split-panel-handle-active-scale: 0.92;
346
+ --monster-split-panel-transition-duration: 160ms;
347
+
348
+ /** Tab navigation */
349
+ --monster-tabs-nav-align-items: flex-end;
350
+ --monster-tabs-nav-background-color: transparent;
351
+ --monster-tabs-nav-border-width: 0 0 1px;
352
+ --monster-tabs-nav-border-color: var(--monster-theme-border);
353
+ --monster-tabs-nav-border-radius: 0;
354
+ --monster-tabs-nav-box-shadow: none;
355
+ --monster-tabs-nav-gap: 0.25rem;
356
+ --monster-tabs-nav-margin-block-end: 0.75rem;
357
+ --monster-tabs-nav-padding: 0;
358
+ --monster-tabs-button-font-weight: 400;
359
+ --monster-tabs-button-color: var(--monster-theme-text-secondary);
360
+ --monster-tabs-button-background-color: transparent;
361
+ --monster-tabs-button-border-width: 0 0 3px;
362
+ --monster-tabs-button-border-color: transparent;
363
+ --monster-tabs-button-border-radius: 0;
364
+ --monster-tabs-button-margin-inline-end: 0.75rem;
365
+ --monster-tabs-button-min-block-size: var(--monster-control-min-block-size);
366
+ --monster-tabs-button-padding: 0.625rem 0 0.5rem;
367
+ --monster-tabs-button-box-shadow: none;
368
+ --monster-tabs-button-transition:
369
+ border-color 160ms ease,
370
+ color 160ms ease;
371
+ --monster-tabs-button-hover-background-color: transparent;
372
+ --monster-tabs-button-hover-border-color: var(--monster-theme-border-strong);
373
+ --monster-tabs-button-hover-box-shadow: none;
374
+ --monster-tabs-button-hover-color: var(--monster-theme-text);
375
+ --monster-tabs-button-active-background-color: transparent;
376
+ --monster-tabs-button-active-border-color: var(--monster-theme-tertiary);
377
+ --monster-tabs-button-active-box-shadow: none;
378
+ --monster-tabs-button-active-color: var(--monster-theme-tertiary);
379
+ --monster-tabs-button-active-font-weight: 500;
380
+ --monster-tabs-indicator-inline-size: 0;
381
+ --monster-tabs-indicator-block-size: 0;
382
+ --monster-tabs-indicator-background-color: var(--monster-theme-tertiary);
383
+ --monster-tabs-indicator-hover-opacity: 0;
384
+ --monster-tabs-indicator-active-opacity: 0;
385
+ --monster-tabs-overflow-switch-inline-size: var(
386
+ --monster-control-min-block-size
387
+ );
388
+ --monster-tabs-overflow-switch-padding: 0.625rem;
389
+ --monster-tabs-overflow-switch-border-width: 0;
390
+ --monster-tabs-overflow-switch-border-color: transparent;
391
+ --monster-tabs-overflow-switch-background-color: transparent;
392
+ --monster-tabs-overflow-switch-hover-background-color: var(
393
+ --monster-theme-surface-subtle
394
+ );
395
+ --monster-tabs-slot-border-width: 1px;
396
+ --monster-tabs-slot-border-style: solid;
397
+ --monster-tabs-slot-border-color: transparent;
398
+ --monster-tabs-slot-border-radius: calc(var(--monster-border-radius) * 0.75);
399
+ --monster-tabs-slot-box-shadow: none;
400
+ --monster-tabs-slot-padding: 0.5rem 0.75rem;
401
+
402
+ /** Datatable density and row separation */
403
+ --monster-datatable-cell-padding: 0.45rem 0.5rem;
404
+ --monster-datatable-header-cell-padding: 0.45rem 0.5rem;
405
+ --monster-datatable-header-cell-padding-inline-end: 2rem;
406
+ --monster-datatable-row-border-width: 1px;
407
+ --monster-datatable-row-border-style: solid;
408
+ --monster-datatable-row-border-color: var(--monster-theme-surface-strong);
409
+
410
+ /** Vertical tabs become a readable settings sidebar */
411
+ --monster-vertical-tabs-control-gap: 1.25rem;
412
+ --monster-vertical-tabs-control-min-block-size: 9rem;
413
+ --monster-vertical-tabs-nav-align-self: flex-start;
414
+ --monster-vertical-tabs-nav-block-size: max-content;
415
+ --monster-vertical-tabs-nav-border-width: 0;
416
+ --monster-vertical-tabs-nav-border-color: transparent;
417
+ --monster-vertical-tabs-nav-gap: 0.25rem;
418
+ --monster-vertical-tabs-nav-margin-inline-end: 0;
419
+ --monster-vertical-tabs-nav-max-block-size: none;
420
+ --monster-vertical-tabs-nav-min-block-size: 9rem;
421
+ --monster-vertical-tabs-nav-min-inline-size: 10rem;
422
+ --monster-vertical-tabs-button-border-width: 0;
423
+ --monster-vertical-tabs-button-flex-direction: row;
424
+ --monster-vertical-tabs-button-justify-content: flex-start;
425
+ --monster-vertical-tabs-button-margin-block-end: 0;
426
+ --monster-vertical-tabs-button-padding: 0 0.75rem 0 1.25rem;
427
+ --monster-vertical-tabs-button-inline-size: 100%;
428
+ --monster-vertical-tabs-label-writing-mode: horizontal-tb;
429
+ --monster-vertical-tabs-label-text-orientation: mixed;
430
+ --monster-vertical-tabs-slotted-border-width: 0;
431
+
432
+ /** Toggle and decorative compatibility tokens */
433
+ --monster-theme-on-color: var(--monster-theme-on-accent);
434
+ --monster-theme-on-bg-color: var(--monster-theme-success);
435
+ --monster-theme-off-color: var(--monster-theme-text-secondary);
436
+ --monster-theme-off-bg-color: var(--monster-theme-surface-strong);
437
+ --monster-color-gradient-1: #833ab4;
438
+ --monster-color-gradient-2: #fd1d1d;
439
+ --monster-color-gradient-3: #fcb045;
440
+
441
+ /** Modern spacing scale */
442
+ --monster-space-0: 0;
443
+ --monster-space-1: 0.25rem;
444
+ --monster-space-2: 0.5rem;
445
+ --monster-space-3: 0.75rem;
446
+ --monster-space-4: 1rem;
447
+ --monster-space-5: 1.5rem;
448
+ --monster-space-6: 2rem;
449
+ --monster-space-7: 3rem;
450
+ }
451
+
452
+ @media (prefers-color-scheme: dark) {
453
+ :root[data-monster-theme-name="modern"] {
454
+ /** Semantic surfaces and content colors */
455
+ --monster-theme-surface-canvas: #161512;
456
+ --monster-theme-surface: #1e1d1a;
457
+ --monster-theme-surface-subtle: #282622;
458
+ --monster-theme-surface-strong: #34312c;
459
+ --monster-theme-text: #f4f0e8;
460
+ --monster-theme-text-secondary: #d2ccc0;
461
+ --monster-theme-text-muted: #aaa397;
462
+ --monster-theme-border: #777065;
463
+ --monster-theme-border-strong: #9c9385;
464
+
465
+ /** Semantic interactive colors */
466
+ --monster-theme-accent: #eee7dc;
467
+ --monster-theme-accent-hover: #ffffff;
468
+ --monster-theme-accent-subtle: #39352f;
469
+ --monster-theme-secondary: #d2ccc0;
470
+ --monster-theme-secondary-subtle: #302d29;
471
+ --monster-theme-secondary-strong: #e5dfd5;
472
+ --monster-theme-tertiary: #72cbb0;
473
+ --monster-theme-tertiary-subtle: #183930;
474
+ --monster-theme-on-accent: #201e1a;
475
+ --monster-theme-focus-ring: #72cbb0;
476
+ --monster-theme-selection: #24483e;
477
+
478
+ /** Semantic status colors */
479
+ --monster-theme-success: #72cf96;
480
+ --monster-theme-success-subtle: #183a28;
481
+ --monster-theme-warning: #f0c94f;
482
+ --monster-theme-warning-subtle: #413615;
483
+ --monster-theme-warning-emphasis: #f2c94c;
484
+ --monster-theme-on-warning: #24231f;
485
+ --monster-theme-error: #f28ba0;
486
+ --monster-theme-error-subtle: #481e29;
487
+ --monster-theme-info: #b1a1ef;
488
+ --monster-theme-info-subtle: #31294a;
489
+ --monster-theme-disabled: #a49d91;
490
+ --monster-theme-disabled-surface: #37342f;
491
+
492
+ /** Dark elevation and standard gradient compatibility */
493
+ --monster-box-shadow-2: 0 2px 0 rgb(0 0 0 / 45%);
494
+ --monster-color-gradient-1: #ffe0b2;
495
+ --monster-color-gradient-2: #ad8275;
496
+ --monster-color-gradient-3: #771ba3;
497
+ }
498
+ }