@studious-creative/yumekit 0.1.4 → 0.1.6

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 (28) hide show
  1. package/dist/components/y-appbar.js +57 -45
  2. package/dist/components/y-avatar.js +2 -2
  3. package/dist/components/y-badge.d.ts +1 -1
  4. package/dist/components/y-badge.js +11 -11
  5. package/dist/components/y-button.js +37 -30
  6. package/dist/components/y-dialog.js +5 -2
  7. package/dist/components/y-drawer.js +13 -8
  8. package/dist/components/y-menu.js +6 -4
  9. package/dist/components/y-radio.js +2 -2
  10. package/dist/components/y-switch.js +2 -2
  11. package/dist/components/y-table.js +14 -10
  12. package/dist/components/y-tabs.js +4 -1
  13. package/dist/components/y-tag.js +12 -5
  14. package/dist/components/y-theme.d.ts +2 -0
  15. package/dist/components/y-theme.js +19 -6
  16. package/dist/components/y-toast.js +3 -0
  17. package/dist/components/y-tooltip.js +1 -1
  18. package/dist/index.js +149 -96
  19. package/dist/modules/load-defaults.d.ts +1 -0
  20. package/dist/modules/load-defaults.js +45 -0
  21. package/dist/styles/blue-dark.css +16 -1
  22. package/dist/styles/blue-light.css +15 -0
  23. package/dist/styles/orange-dark.css +17 -2
  24. package/dist/styles/orange-light.css +15 -0
  25. package/dist/styles/style.css +1 -13
  26. package/dist/styles/variables.css +140 -0
  27. package/dist/yumekit.min.js +1 -1
  28. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var variablesCSS = "/* Colors */\n:root {\n --neutral--: #7f8286ff;\n --neutral-white: #ffffffff;\n --neutral-black: #000000ff;\n --neutral-light-0: #f7f7faff;\n --neutral-light-1: #f0f0f2ff;\n --neutral-light-2: #dfe0e3ff;\n --neutral-light-3: #cacbcfff;\n --neutral-light-4: #bbbdc0ff;\n --neutral-light-5: #acaeb2ff;\n --neutral-light-6: #9d9fa3ff;\n --neutral-light-7: #8e9195ff;\n --neutral-dark-0: #0c0c0dff;\n --neutral-dark-1: #151617ff;\n --neutral-dark-2: #292a2bff;\n --neutral-dark-3: #37383aff;\n --neutral-dark-4: #46474aff;\n --neutral-dark-5: #545659ff;\n --neutral-dark-6: #626568ff;\n --neutral-dark-7: #717377ff;\n --neutral-black-translucent: #0000001f;\n --neutral-white-translucent: #1111111f;\n --red--: #b80421ff;\n --red-light-0: #f2e6e8ff;\n --red-light-1: #ebcacfff;\n --red-light-2: #e4aeb6ff;\n --red-light-3: #dc919dff;\n --red-light-4: #d57585ff;\n --red-light-5: #ce596cff;\n --red-light-6: #c73d53ff;\n --red-light-7: #bf203aff;\n --red-dark-0: #0d0103ff;\n --red-dark-1: #220107ff;\n --red-dark-2: #38020bff;\n --red-dark-3: #4d020eff;\n --red-dark-4: #630312ff;\n --red-dark-5: #780316ff;\n --red-dark-6: #8d031aff;\n --red-dark-7: #a3041dff;\n --red-translucent: #b804211f;\n --orange--: #d13704ff;\n --orange-light-0: #f2e9e6ff;\n --orange-light-1: #eed3caff;\n --orange-light-2: #eabdaeff;\n --orange-light-3: #e6a691ff;\n --orange-light-4: #e29075ff;\n --orange-light-5: #dd7a59ff;\n --orange-light-6: #d9643dff;\n --orange-light-7: #d54d20ff;\n --orange-dark-0: #0d0300ff;\n --orange-dark-1: #260a01ff;\n --orange-dark-2: #3e1001ff;\n --orange-dark-3: #571702ff;\n --orange-dark-4: #6f1d02ff;\n --orange-dark-5: #882403ff;\n --orange-dark-6: #a02a03ff;\n --orange-dark-7: #b93104ff;\n --orange-translucent: #d137041f;\n --amber--: #d16004ff;\n --amber-light-0: #f2ece6ff;\n --amber-light-1: #eedbcaff;\n --amber-light-2: #eac9aeff;\n --amber-light-3: #e6b891ff;\n --amber-light-4: #e2a675ff;\n --amber-light-5: #dd9559ff;\n --amber-light-6: #d9833dff;\n --amber-light-7: #d57220ff;\n --amber-dark-0: #0d0c0cff;\n --amber-dark-1: #26170bff;\n --amber-dark-2: #3e210aff;\n --amber-dark-3: #572c09ff;\n --amber-dark-4: #6f3608ff;\n --amber-dark-5: #884107ff;\n --amber-dark-6: #a04b06ff;\n --amber-dark-7: #b95605ff;\n --amber-translucent: #d160041f;\n --yellow--: #d17f04ff;\n --yellow-light-0: #f2eadfff;\n --yellow-light-1: #eeddc4ff;\n --yellow-light-2: #eacfa8ff;\n --yellow-light-3: #e6c28dff;\n --yellow-light-4: #e2b572ff;\n --yellow-light-5: #dda756ff;\n --yellow-light-6: #d99a3bff;\n --yellow-light-7: #d58c1fff;\n --yellow-dark-0: #0d0c0cff;\n --yellow-dark-1: #261a0bff;\n --yellow-dark-2: #3e290aff;\n --yellow-dark-3: #573709ff;\n --yellow-dark-4: #6f4608ff;\n --yellow-dark-5: #885407ff;\n --yellow-dark-6: #a06206ff;\n --yellow-dark-7: #b97105ff;\n --yellow-translucent: #d17f041f;\n --lime--: #cad104ff;\n --lime-light-0: #f2f2dfff;\n --lime-light-1: #edeec4ff;\n --lime-light-2: #e8eaa8ff;\n --lime-light-3: #e3e68dff;\n --lime-light-4: #dee272ff;\n --lime-light-5: #d9dd56ff;\n --lime-light-6: #d4d93bff;\n --lime-light-7: #cfd51fff;\n --lime-dark-0: #0d0d0cff;\n --lime-dark-1: #25260bff;\n --lime-dark-2: #3c3e0aff;\n --lime-dark-3: #545709ff;\n --lime-dark-4: #6c6f08ff;\n --lime-dark-5: #838807ff;\n --lime-dark-6: #9ba006ff;\n --lime-dark-7: #b2b905ff;\n --lime-translucent: #cad1041f;\n --green--: #2dba73ff;\n --green-light-0: #e6f2ecff;\n --green-light-1: #cfebddff;\n --green-light-2: #b8e4ceff;\n --green-light-3: #a1ddbfff;\n --green-light-4: #8ad6b0ff;\n --green-light-5: #72cfa0ff;\n --green-light-6: #5bc891ff;\n --green-light-7: #44c182ff;\n --green-dark-0: #030d08ff;\n --green-dark-1: #082315ff;\n --green-dark-2: #0e3823ff;\n --green-dark-3: #134e30ff;\n --green-dark-4: #18643eff;\n --green-dark-5: #1d794bff;\n --green-dark-6: #238f58ff;\n --green-dark-7: #28a466ff;\n --green-translucent: #2dba731f;\n --teal--: #04b8b8ff;\n --teal-light-0: #f2fffeff;\n --teal-light-1: #d4f6f5ff;\n --teal-light-2: #b7ededff;\n --teal-light-3: #99e4e4ff;\n --teal-light-4: #7bdcdbff;\n --teal-light-5: #5dd3d2ff;\n --teal-light-6: #40cacaff;\n --teal-light-7: #22c1c1ff;\n --teal-dark-0: #0c0d0dff;\n --teal-dark-1: #0b2624ff;\n --teal-dark-2: #0a3e3cff;\n --teal-dark-3: #095753ff;\n --teal-dark-4: #086f6aff;\n --teal-dark-5: #078881ff;\n --teal-dark-6: #06a099ff;\n --teal-dark-7: #05b9b0ff;\n --teal-translucent: #04b8b81f;\n --blue--: #0576ffff;\n --blue-light-0: #ebf5ffff;\n --blue-light-1: #cee5ffff;\n --blue-light-2: #b2d5ffff;\n --blue-light-3: #95c5ffff;\n --blue-light-4: #78b6ffff;\n --blue-light-5: #5ba6ffff;\n --blue-light-6: #3f96ffff;\n --blue-light-7: #2286ffff;\n --blue-dark-0: #0c0c0dff;\n --blue-dark-1: #0b192bff;\n --blue-dark-2: #0a274aff;\n --blue-dark-3: #093468ff;\n --blue-dark-4: #094186ff;\n --blue-dark-5: #084ea4ff;\n --blue-dark-6: #075cc3ff;\n --blue-dark-7: #0669e1ff;\n --blue-translucent: #0576ff1f;\n --indigo--: #5405ffff;\n --indigo-light-0: #f6f2ffff;\n --indigo-light-1: #e2d4ffff;\n --indigo-light-2: #ceb7ffff;\n --indigo-light-3: #b999ffff;\n --indigo-light-4: #a57cffff;\n --indigo-light-5: #915effff;\n --indigo-light-6: #7d40ffff;\n --indigo-light-7: #6823ffff;\n --indigo-dark-0: #0d0c0cff;\n --indigo-dark-1: #160b2aff;\n --indigo-dark-2: #1f0a49ff;\n --indigo-dark-3: #280967ff;\n --indigo-dark-4: #310986ff;\n --indigo-dark-5: #3908a4ff;\n --indigo-dark-6: #4207c2ff;\n --indigo-dark-7: #4b06e1ff;\n --indigo-translucent: #5405ff1f;\n --purple--: #8a05ffff;\n --purple-light-0: #f9f2ffff;\n --purple-light-1: #ebd4ffff;\n --purple-light-2: #ddb7ffff;\n --purple-light-3: #cf99ffff;\n --purple-light-4: #c27cffff;\n --purple-light-5: #b45effff;\n --purple-light-6: #a640ffff;\n --purple-light-7: #9823ffff;\n --purple-dark-0: #0c0c0dff;\n --purple-dark-1: #1c0b2bff;\n --purple-dark-2: #2c0a4aff;\n --purple-dark-3: #3b0968ff;\n --purple-dark-4: #4b0986ff;\n --purple-dark-5: #5b08a4ff;\n --purple-dark-6: #6b07c3ff;\n --purple-dark-7: #7a06e1ff;\n --purple-translucent: #8a05ff1f;\n --pink--: #ff05a8ff;\n --pink-light-0: #f9f2ffff;\n --pink-light-1: #fad4f4ff;\n --pink-light-2: #fbb7e9ff;\n --pink-light-3: #fb99deff;\n --pink-light-4: #fc7cd4ff;\n --pink-light-5: #fd5ec9ff;\n --pink-light-6: #fe40beff;\n --pink-light-7: #fe23b3ff;\n --pink-dark-0: #0c0c0dff;\n --pink-dark-1: #2a0b20ff;\n --pink-dark-2: #490a34ff;\n --pink-dark-3: #670947ff;\n --pink-dark-4: #86095bff;\n --pink-dark-5: #a4086eff;\n --pink-dark-6: #c20781ff;\n --pink-dark-7: #e10695ff;\n --pink-translucent: #ff05a81f;\n --brown--: #ab642eff;\n --brown-light-0: #f2dfdfff;\n --brown-light-1: #e9d0c9ff;\n --brown-light-2: #e0c0b3ff;\n --brown-light-3: #d7b19dff;\n --brown-light-4: #cfa287ff;\n --brown-light-5: #c69270ff;\n --brown-light-6: #bd835aff;\n --brown-light-7: #b47344ff;\n --brown-dark-0: #0d0c0cff;\n --brown-dark-1: #211710ff;\n --brown-dark-2: #352215ff;\n --brown-dark-3: #482d19ff;\n --brown-dark-4: #5c381dff;\n --brown-dark-5: #704321ff;\n --brown-dark-6: #844e26ff;\n --brown-dark-7: #97592aff;\n --brown-translucent: #ab642e1f;\n}\n\n/* Numerics */\n:root {\n --border-none: 0px;\n --border-x-thin: 1px;\n --border-thin: 2px;\n --border-medium: 4px;\n --border-thick: 8px;\n --border-x-thick: 10px;\n --spacing-none: 0px;\n --spacing-4x-small: 1px;\n --spacing-2x-small: 2px;\n --spacing-x-small: 4px;\n --spacing-small: 6px;\n --spacing-medium: 8px;\n --spacing-large: 12px;\n --spacing-x-large: 16px;\n --spacing-2x-large: 24px;\n --spacing-4x-large: 32px;\n --font-size-display-1: 6em;\n --font-size-display-2: 5.5em;\n --font-size-display-3: 4.5em;\n --font-size-display-4: 3.5em;\n --font-size-h1: 2em;\n --font-size-h2: 1.5em;\n --font-size-h3: 1.17em;\n --font-size-h4: 1em;\n --font-size-h5: 0.83em;\n --font-size-paragraph: 1em;\n --font-size-small: 0.8em;\n --font-size-label: 0.83em;\n --font-size-button: 1em;\n --font-size-quote: 1.17em;\n --radii-none: 0px;\n --radii-x-small: 0.125em;\n --radii-small: 0.25em;\n --radii-medium: 0.375em;\n --radii-large: 0.5px;\n --radii-x-large: 1em;\n --radii-full: 9999px;\n --sizing-2x-small: 16px;\n --sizing-x-small: 19px;\n --sizing-small: 32px;\n --sizing-medium: 40px;\n --sizing-large: 56px;\n}\n\n/* Components */\n\n:root {\n --component-appbar-collapsed-width: 48px;\n --component-appbar-padding: var(--spacing-medium);\n --component-appbar-width: 240px;\n --component-avatar-border-radius-circle: var(--radii-full);\n --component-avatar-border-radius-square: var(--radii-small);\n --component-avatar-size-large: var(--sizing-large);\n --component-avatar-size-medium: var(--sizing-medium);\n --component-avatar-size-small: var(--sizing-small);\n --component-badge-border-radius-circle: var(--radii-full);\n --component-badge-border-radius-square: var(--radii-small);\n --component-badge-padding-large: var(--spacing-small);\n --component-badge-padding-medium: var(--spacing-x-small);\n --component-badge-padding-small: var(--spacing-2x-small);\n --component-badge-size-large: var(--sizing-medium);\n --component-badge-size-medium: var(--sizing-small);\n --component-badge-size-small: var(--sizing-2x-small);\n --component-button-border-radius-inner: var(--radii-x-small);\n --component-button-border-radius-outer: var(--radii-small);\n --component-button-border-width: var(--border-thin);\n --component-button-border-width-2: var(--border-x-thin);\n --component-button-border-width-2: var(--border-x-thin);\n --component-button-padding-large: var(--spacing-x-large);\n --component-button-padding-medium: var(--spacing-medium);\n --component-button-padding-small: var(--spacing-x-small);\n --component-card-border-radius-inner: var(--radii-small);\n --component-card-border-radius-outer: var(--radii-medium);\n --component-card-border-width: var(--border-x-thin);\n --component-card-inner-border-width: var(--border-x-thin);\n --component-card-padding-inner: var(--spacing-medium);\n --component-card-padding-outer: var(--spacing-x-large);\n --component-checkbox-icon-size: var(--sizing-2x-small);\n --component-checkbox-size: var(--sizing-x-small);\n --component-dialog-border-radius-inner: var(--radii-x-small);\n --component-dialog-border-radius-outer: var(--radii-small);\n --component-dialog-border-width: var(--border-x-thin);\n --component-dialog-inner-border-width: var(--border-x-thin);\n --component-dialog-padding: var(--spacing-medium);\n --component-drawer-border-radius: var(--radii-small);\n --component-drawer-border-width: var(--border-x-thin);\n --component-drawer-handle-padding: var(--spacing-x-small);\n --component-drawer-handle-width: var(--spacing-x-small);\n --component-drawer-padding: var(--spacing-medium);\n --component-inputs-border-radius-inner: var(--radii-x-small);\n --component-inputs-border-radius-outer: var(--radii-small);\n --component-inputs-border-width: var(--border-thin);\n --component-inputs-padding-large: var(--spacing-x-large);\n --component-inputs-padding-medium: var(--spacing-medium);\n --component-inputs-padding-small: var(--spacing-x-small);\n --component-menu-border-radius: var(--radii-x-small);\n --component-menu-border-width: var(--border-x-thin);\n --component-menu-padding-horizontal: var(--spacing-small);\n --component-menu-padding-vertical: var(--spacing-x-small);\n --component-panelbar-border-radius: var(--radii-x-small);\n --component-panelbar-border-width: var(--border-x-thin);\n --component-panelbar-border-width: var(--border-x-thin);\n --component-panelbar-padding: var(--spacing-medium);\n --component-progress-border-radius-inner: var(--radii-small);\n --component-progress-border-radius-outer: calc(var(--radii-small) + 4px);\n --component-progress-border-width: var(--border-x-thin);\n --component-progress-padding: var(--spacing-x-small);\n --component-progress-size-large: var(--sizing-large);\n --component-progress-size-medium: var(--sizing-medium);\n --component-progress-size-small: var(--sizing-small);\n --component-radio-dot-offset: var(--spacing-2x-small);\n --component-radio-dot-size: var(--spacing-medium);\n --component-radio-size: var(--sizing-2x-small);\n --component-sidebar-border-radius: var(--radii-small);\n --component-sidebar-border-width: var(--border-x-thin);\n --component-slider-border-radius-inner: var(--radii-small);\n --component-slider-border-radius-outer: calc(var(--radii-small) + 4px);\n --component-slider-border-width: var(--border-x-thin);\n --component-slider-padding: var(--spacing-x-small);\n --component-slider-thumb-border-radius: var(--radii-x-small);\n --component-switch-border-radius: var(--radii-full);\n --component-switch-border-width: var(--border-x-thin);\n --component-switch-padding: var(--spacing-2x-small);\n --component-tab-border-radius-inner: var(--radii-x-small);\n --component-tab-border-radius-outer: var(--radii-small);\n --component-tab-border-width: var(--border-x-thin);\n --component-tab-gap-large: var(--spacing-large);\n --component-tab-gap-medium: var(--spacing-small);\n --component-tab-gap-small: var(--spacing-2x-small);\n --component-tab-padding-large: var(--spacing-2x-large);\n --component-tab-padding-medium: var(--spacing-large);\n --component-tab-padding-small: var(--spacing-small);\n --component-table-border-radius: var(--radii-small);\n --component-table-border-width: var(--border-x-thin);\n --component-table-border-width-header: var(--border-thin);\n --component-table-padding-large: var(--spacing-large);\n --component-table-padding-medium: var(--spacing-medium);\n --component-table-padding-small: var(--spacing-small);\n --component-tag-border-radius-circle: var(--radii-full);\n --component-tag-border-radius-square: var(--radii-small);\n --component-tag-padding-large: var(--spacing-small);\n --component-tag-padding-medium: var(--spacing-x-small);\n --component-tag-padding-small: var(--spacing-2x-small);\n --component-tag-size-large: var(--sizing-large);\n --component-tag-size-medium: var(--sizing-medium);\n --component-tag-size-small: var(--sizing-small);\n --component-toast-border-radius: var(--radii-small);\n --component-toast-offset: var(--spacing-x-large);\n --component-toast-padding: var(--spacing-medium);\n --component-toast-padding-h: var(--spacing-x-large);\n --component-tooltip-border-radius: var(--radii-small);\n --component-tooltip-padding: var(--spacing-x-small);\n --component-tooltip-padding-h: var(--spacing-medium);\n}\n";
1
+ var variablesCSS = "/* Colors */\n:root {\n --neutral--: #7f8286ff;\n --neutral-white: #ffffffff;\n --neutral-black: #000000ff;\n --neutral-light-0: #f7f7faff;\n --neutral-light-1: #f0f0f2ff;\n --neutral-light-2: #dfe0e3ff;\n --neutral-light-3: #cacbcfff;\n --neutral-light-4: #bbbdc0ff;\n --neutral-light-5: #acaeb2ff;\n --neutral-light-6: #9d9fa3ff;\n --neutral-light-7: #8e9195ff;\n --neutral-dark-0: #0c0c0dff;\n --neutral-dark-1: #151617ff;\n --neutral-dark-2: #292a2bff;\n --neutral-dark-3: #37383aff;\n --neutral-dark-4: #46474aff;\n --neutral-dark-5: #545659ff;\n --neutral-dark-6: #626568ff;\n --neutral-dark-7: #717377ff;\n --neutral-black-translucent: #0000001f;\n --neutral-white-translucent: #1111111f;\n --red--: #b80421ff;\n --red-light-0: #f2e6e8ff;\n --red-light-1: #ebcacfff;\n --red-light-2: #e4aeb6ff;\n --red-light-3: #dc919dff;\n --red-light-4: #d57585ff;\n --red-light-5: #ce596cff;\n --red-light-6: #c73d53ff;\n --red-light-7: #bf203aff;\n --red-dark-0: #0d0103ff;\n --red-dark-1: #220107ff;\n --red-dark-2: #38020bff;\n --red-dark-3: #4d020eff;\n --red-dark-4: #630312ff;\n --red-dark-5: #780316ff;\n --red-dark-6: #8d031aff;\n --red-dark-7: #a3041dff;\n --red-translucent: #b804211f;\n --orange--: #d13704ff;\n --orange-light-0: #f2e9e6ff;\n --orange-light-1: #eed3caff;\n --orange-light-2: #eabdaeff;\n --orange-light-3: #e6a691ff;\n --orange-light-4: #e29075ff;\n --orange-light-5: #dd7a59ff;\n --orange-light-6: #d9643dff;\n --orange-light-7: #d54d20ff;\n --orange-dark-0: #0d0300ff;\n --orange-dark-1: #260a01ff;\n --orange-dark-2: #3e1001ff;\n --orange-dark-3: #571702ff;\n --orange-dark-4: #6f1d02ff;\n --orange-dark-5: #882403ff;\n --orange-dark-6: #a02a03ff;\n --orange-dark-7: #b93104ff;\n --orange-translucent: #d137041f;\n --amber--: #d16004ff;\n --amber-light-0: #f2ece6ff;\n --amber-light-1: #eedbcaff;\n --amber-light-2: #eac9aeff;\n --amber-light-3: #e6b891ff;\n --amber-light-4: #e2a675ff;\n --amber-light-5: #dd9559ff;\n --amber-light-6: #d9833dff;\n --amber-light-7: #d57220ff;\n --amber-dark-0: #0d0c0cff;\n --amber-dark-1: #26170bff;\n --amber-dark-2: #3e210aff;\n --amber-dark-3: #572c09ff;\n --amber-dark-4: #6f3608ff;\n --amber-dark-5: #884107ff;\n --amber-dark-6: #a04b06ff;\n --amber-dark-7: #b95605ff;\n --amber-translucent: #d160041f;\n --yellow--: #d17f04ff;\n --yellow-light-0: #f2eadfff;\n --yellow-light-1: #eeddc4ff;\n --yellow-light-2: #eacfa8ff;\n --yellow-light-3: #e6c28dff;\n --yellow-light-4: #e2b572ff;\n --yellow-light-5: #dda756ff;\n --yellow-light-6: #d99a3bff;\n --yellow-light-7: #d58c1fff;\n --yellow-dark-0: #0d0c0cff;\n --yellow-dark-1: #261a0bff;\n --yellow-dark-2: #3e290aff;\n --yellow-dark-3: #573709ff;\n --yellow-dark-4: #6f4608ff;\n --yellow-dark-5: #885407ff;\n --yellow-dark-6: #a06206ff;\n --yellow-dark-7: #b97105ff;\n --yellow-translucent: #d17f041f;\n --lime--: #cad104ff;\n --lime-light-0: #f2f2dfff;\n --lime-light-1: #edeec4ff;\n --lime-light-2: #e8eaa8ff;\n --lime-light-3: #e3e68dff;\n --lime-light-4: #dee272ff;\n --lime-light-5: #d9dd56ff;\n --lime-light-6: #d4d93bff;\n --lime-light-7: #cfd51fff;\n --lime-dark-0: #0d0d0cff;\n --lime-dark-1: #25260bff;\n --lime-dark-2: #3c3e0aff;\n --lime-dark-3: #545709ff;\n --lime-dark-4: #6c6f08ff;\n --lime-dark-5: #838807ff;\n --lime-dark-6: #9ba006ff;\n --lime-dark-7: #b2b905ff;\n --lime-translucent: #cad1041f;\n --green--: #2dba73ff;\n --green-light-0: #e6f2ecff;\n --green-light-1: #cfebddff;\n --green-light-2: #b8e4ceff;\n --green-light-3: #a1ddbfff;\n --green-light-4: #8ad6b0ff;\n --green-light-5: #72cfa0ff;\n --green-light-6: #5bc891ff;\n --green-light-7: #44c182ff;\n --green-dark-0: #030d08ff;\n --green-dark-1: #082315ff;\n --green-dark-2: #0e3823ff;\n --green-dark-3: #134e30ff;\n --green-dark-4: #18643eff;\n --green-dark-5: #1d794bff;\n --green-dark-6: #238f58ff;\n --green-dark-7: #28a466ff;\n --green-translucent: #2dba731f;\n --teal--: #04b8b8ff;\n --teal-light-0: #f2fffeff;\n --teal-light-1: #d4f6f5ff;\n --teal-light-2: #b7ededff;\n --teal-light-3: #99e4e4ff;\n --teal-light-4: #7bdcdbff;\n --teal-light-5: #5dd3d2ff;\n --teal-light-6: #40cacaff;\n --teal-light-7: #22c1c1ff;\n --teal-dark-0: #0c0d0dff;\n --teal-dark-1: #0b2624ff;\n --teal-dark-2: #0a3e3cff;\n --teal-dark-3: #095753ff;\n --teal-dark-4: #086f6aff;\n --teal-dark-5: #078881ff;\n --teal-dark-6: #06a099ff;\n --teal-dark-7: #05b9b0ff;\n --teal-translucent: #04b8b81f;\n --blue--: #0576ffff;\n --blue-light-0: #ebf5ffff;\n --blue-light-1: #cee5ffff;\n --blue-light-2: #b2d5ffff;\n --blue-light-3: #95c5ffff;\n --blue-light-4: #78b6ffff;\n --blue-light-5: #5ba6ffff;\n --blue-light-6: #3f96ffff;\n --blue-light-7: #2286ffff;\n --blue-dark-0: #0c0c0dff;\n --blue-dark-1: #0b192bff;\n --blue-dark-2: #0a274aff;\n --blue-dark-3: #093468ff;\n --blue-dark-4: #094186ff;\n --blue-dark-5: #084ea4ff;\n --blue-dark-6: #075cc3ff;\n --blue-dark-7: #0669e1ff;\n --blue-translucent: #0576ff1f;\n --indigo--: #5405ffff;\n --indigo-light-0: #f6f2ffff;\n --indigo-light-1: #e2d4ffff;\n --indigo-light-2: #ceb7ffff;\n --indigo-light-3: #b999ffff;\n --indigo-light-4: #a57cffff;\n --indigo-light-5: #915effff;\n --indigo-light-6: #7d40ffff;\n --indigo-light-7: #6823ffff;\n --indigo-dark-0: #0d0c0cff;\n --indigo-dark-1: #160b2aff;\n --indigo-dark-2: #1f0a49ff;\n --indigo-dark-3: #280967ff;\n --indigo-dark-4: #310986ff;\n --indigo-dark-5: #3908a4ff;\n --indigo-dark-6: #4207c2ff;\n --indigo-dark-7: #4b06e1ff;\n --indigo-translucent: #5405ff1f;\n --purple--: #8a05ffff;\n --purple-light-0: #f9f2ffff;\n --purple-light-1: #ebd4ffff;\n --purple-light-2: #ddb7ffff;\n --purple-light-3: #cf99ffff;\n --purple-light-4: #c27cffff;\n --purple-light-5: #b45effff;\n --purple-light-6: #a640ffff;\n --purple-light-7: #9823ffff;\n --purple-dark-0: #0c0c0dff;\n --purple-dark-1: #1c0b2bff;\n --purple-dark-2: #2c0a4aff;\n --purple-dark-3: #3b0968ff;\n --purple-dark-4: #4b0986ff;\n --purple-dark-5: #5b08a4ff;\n --purple-dark-6: #6b07c3ff;\n --purple-dark-7: #7a06e1ff;\n --purple-translucent: #8a05ff1f;\n --pink--: #ff05a8ff;\n --pink-light-0: #f9f2ffff;\n --pink-light-1: #fad4f4ff;\n --pink-light-2: #fbb7e9ff;\n --pink-light-3: #fb99deff;\n --pink-light-4: #fc7cd4ff;\n --pink-light-5: #fd5ec9ff;\n --pink-light-6: #fe40beff;\n --pink-light-7: #fe23b3ff;\n --pink-dark-0: #0c0c0dff;\n --pink-dark-1: #2a0b20ff;\n --pink-dark-2: #490a34ff;\n --pink-dark-3: #670947ff;\n --pink-dark-4: #86095bff;\n --pink-dark-5: #a4086eff;\n --pink-dark-6: #c20781ff;\n --pink-dark-7: #e10695ff;\n --pink-translucent: #ff05a81f;\n --brown--: #ab642eff;\n --brown-light-0: #f2dfdfff;\n --brown-light-1: #e9d0c9ff;\n --brown-light-2: #e0c0b3ff;\n --brown-light-3: #d7b19dff;\n --brown-light-4: #cfa287ff;\n --brown-light-5: #c69270ff;\n --brown-light-6: #bd835aff;\n --brown-light-7: #b47344ff;\n --brown-dark-0: #0d0c0cff;\n --brown-dark-1: #211710ff;\n --brown-dark-2: #352215ff;\n --brown-dark-3: #482d19ff;\n --brown-dark-4: #5c381dff;\n --brown-dark-5: #704321ff;\n --brown-dark-6: #844e26ff;\n --brown-dark-7: #97592aff;\n --brown-translucent: #ab642e1f;\n}\n\n/* Numerics */\n:root {\n --border-none: 0px;\n --border-x-thin: 1px;\n --border-thin: 2px;\n --border-medium: 4px;\n --border-thick: 8px;\n --border-x-thick: 10px;\n --spacing-none: 0px;\n --spacing-4x-small: 1px;\n --spacing-2x-small: 2px;\n --spacing-x-small: 4px;\n --spacing-small: 6px;\n --spacing-medium: 8px;\n --spacing-large: 12px;\n --spacing-x-large: 16px;\n --spacing-2x-large: 24px;\n --spacing-4x-large: 32px;\n --font-size-display-1: 6em;\n --font-size-display-2: 5.5em;\n --font-size-display-3: 4.5em;\n --font-size-display-4: 3.5em;\n --font-size-h1: 2em;\n --font-size-h2: 1.5em;\n --font-size-h3: 1.17em;\n --font-size-h4: 1em;\n --font-size-h5: 0.83em;\n --font-size-paragraph: 1em;\n --font-size-small: 0.8em;\n --font-size-label: 0.83em;\n --font-size-button: 1em;\n --font-size-quote: 1.17em;\n --radii-none: 0px;\n --radii-x-small: 0.125em;\n --radii-small: 0.25em;\n --radii-medium: 0.375em;\n --radii-large: 0.5px;\n --radii-x-large: 1em;\n --radii-full: 9999px;\n --sizing-2x-small: 16px;\n --sizing-x-small: 19px;\n --sizing-small: 32px;\n --sizing-medium: 40px;\n --sizing-large: 56px;\n}\n\n/* Components */\n\n:root {\n --component-appbar-collapsed-width: 48px;\n --component-appbar-padding: var(--spacing-medium);\n --component-appbar-width: 240px;\n --component-avatar-border-radius-circle: var(--radii-full);\n --component-avatar-border-radius-square: var(--radii-small);\n --component-avatar-size-large: var(--sizing-large);\n --component-avatar-size-medium: var(--sizing-medium);\n --component-avatar-size-small: var(--sizing-small);\n --component-badge-border-radius-circle: var(--radii-full);\n --component-badge-border-radius-square: var(--radii-small);\n --component-badge-padding-large: var(--spacing-small);\n --component-badge-padding-medium: var(--spacing-x-small);\n --component-badge-padding-small: var(--spacing-2x-small);\n --component-badge-size-large: var(--sizing-medium);\n --component-badge-size-medium: var(--sizing-small);\n --component-badge-size-small: var(--sizing-2x-small);\n --component-button-border-radius-inner: var(--radii-x-small);\n --component-button-border-radius-outer: var(--radii-small);\n --component-button-border-width: var(--border-thin);\n --component-button-border-width-2: var(--border-x-thin);\n --component-button-border-width-2: var(--border-x-thin);\n --component-button-padding-large: var(--spacing-x-large);\n --component-button-padding-medium: var(--spacing-medium);\n --component-button-padding-small: var(--spacing-x-small);\n --component-card-border-radius-inner: var(--radii-small);\n --component-card-border-radius-outer: var(--radii-medium);\n --component-card-border-width: var(--border-x-thin);\n --component-card-inner-border-width: var(--border-x-thin);\n --component-card-padding-inner: var(--spacing-medium);\n --component-card-padding-outer: var(--spacing-x-large);\n --component-checkbox-icon-size: var(--sizing-2x-small);\n --component-checkbox-size: var(--sizing-x-small);\n --component-dialog-border-radius-inner: var(--radii-x-small);\n --component-dialog-border-radius-outer: var(--radii-small);\n --component-dialog-border-width: var(--border-x-thin);\n --component-dialog-inner-border-width: var(--border-x-thin);\n --component-dialog-padding: var(--spacing-medium);\n --component-drawer-border-radius: var(--radii-small);\n --component-drawer-border-width: var(--border-x-thin);\n --component-drawer-handle-padding: var(--spacing-x-small);\n --component-drawer-handle-width: var(--spacing-x-small);\n --component-drawer-padding: var(--spacing-medium);\n --component-inputs-border-radius-inner: var(--radii-x-small);\n --component-inputs-border-radius-outer: var(--radii-small);\n --component-inputs-border-width: var(--border-thin);\n --component-inputs-padding-large: var(--spacing-x-large);\n --component-inputs-padding-medium: var(--spacing-medium);\n --component-inputs-padding-small: var(--spacing-x-small);\n --component-menu-border-radius: var(--radii-x-small);\n --component-menu-border-width: var(--border-x-thin);\n --component-menu-padding-horizontal: var(--spacing-small);\n --component-menu-padding-vertical: var(--spacing-x-small);\n --component-panelbar-border-radius: var(--radii-x-small);\n --component-panelbar-border-width: var(--border-x-thin);\n --component-panelbar-border-width: var(--border-x-thin);\n --component-panelbar-padding: var(--spacing-medium);\n --component-progress-border-radius-inner: var(--radii-small);\n --component-progress-border-radius-outer: calc(var(--radii-small) + 4px);\n --component-progress-border-width: var(--border-x-thin);\n --component-progress-padding: var(--spacing-x-small);\n --component-progress-size-large: var(--sizing-large);\n --component-progress-size-medium: var(--sizing-medium);\n --component-progress-size-small: var(--sizing-small);\n --component-radio-dot-offset: var(--spacing-2x-small);\n --component-radio-dot-size: var(--spacing-medium);\n --component-radio-size: var(--sizing-2x-small);\n --component-sidebar-border-radius: var(--radii-small);\n --component-sidebar-border-width: var(--border-x-thin);\n --component-slider-border-radius-inner: var(--radii-small);\n --component-slider-border-radius-outer: calc(var(--radii-small) + 4px);\n --component-slider-border-width: var(--border-x-thin);\n --component-slider-padding: var(--spacing-x-small);\n --component-slider-thumb-border-radius: var(--radii-x-small);\n --component-switch-border-radius: var(--radii-full);\n --component-switch-border-width: var(--border-x-thin);\n --component-switch-padding: var(--spacing-2x-small);\n --component-tab-border-radius-inner: var(--radii-x-small);\n --component-tab-border-radius-outer: var(--radii-small);\n --component-tab-border-width: var(--border-x-thin);\n --component-tab-gap-large: var(--spacing-large);\n --component-tab-gap-medium: var(--spacing-small);\n --component-tab-gap-small: var(--spacing-2x-small);\n --component-tab-content-padding: var(--spacing-large);\n --component-tab-padding-large: var(--spacing-2x-large);\n --component-tab-padding-medium: var(--spacing-large);\n --component-tab-padding-small: var(--spacing-small);\n --component-table-border-radius: var(--radii-small);\n --component-table-border-width: var(--border-x-thin);\n --component-table-border-width-header: var(--border-thin);\n --component-table-padding-large: var(--spacing-large);\n --component-table-padding-medium: var(--spacing-medium);\n --component-table-padding-small: var(--spacing-small);\n --component-tag-border-radius-circle: var(--radii-full);\n --component-tag-border-radius-square: var(--radii-small);\n --component-tag-padding-large: var(--spacing-small);\n --component-tag-padding-medium: var(--spacing-x-small);\n --component-tag-padding-small: var(--spacing-2x-small);\n --component-tag-size-large: var(--sizing-large);\n --component-tag-size-medium: var(--sizing-medium);\n --component-tag-size-small: var(--sizing-small);\n --component-toast-border-radius: var(--radii-small);\n --component-toast-offset: var(--spacing-x-large);\n --component-toast-padding: var(--spacing-medium);\n --component-toast-padding-h: var(--spacing-x-large);\n --component-tooltip-border-radius: var(--radii-small);\n --component-tooltip-padding: var(--spacing-x-small);\n --component-tooltip-padding-h: var(--spacing-medium);\n}\n\n/* Default Theme (Blue Light) */\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-background-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--blue-light-1);\n --primary-background-component: var(--blue-light-0);\n --primary-background-hover: var(--blue-light-2);\n --primary-background-active: var(--blue-light-3);\n --primary-background-border: var(--blue-light-4);\n --primary-content--: var(--blue--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--blue-dark-7);\n --primary-content-active: var(--blue-dark-6);\n --secondary-background-app: var(--teal-light-1);\n --secondary-background-component: var(--teal-light-0);\n --secondary-background-hover: var(--teal-light-2);\n --secondary-background-border: var(--teal-light-3);\n --secondary-background-active: var(--teal-light-4);\n --secondary-content--: var(--teal--);\n --secondary-content-inverse: var(--neutral-black);\n --secondary-content-hover: var(--teal-dark-7);\n --secondary-content-active: var(--teal-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-background-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-background-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-background-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-background-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-background-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-background-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-background-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-background-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-background-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-background-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-background-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-background-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-background-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-background-border);\n --component-tabs-accent: var(--primary-content--);\n --component-tabs-font-family: var(--font-family-body);\n --component-slider-width: 129px;\n --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
2
2
 
3
3
  class YumeButton extends HTMLElement {
4
4
  static get observedAttributes() {
@@ -225,8 +225,8 @@ class YumeButton extends HTMLElement {
225
225
  position: relative;
226
226
  overflow: hidden;
227
227
  border-radius: var(--component-button-border-radius-outer, 4px);
228
- border: var(--component-button-border-width, 1px) solid var(--border-color, var(--base-content--, #1D1D1D));
229
- background: var(--background-color, #F1F6FA);
228
+ border: var(--component-button-border-width, 1px) solid var(--border-color, var(--base-content--, #f7f7fa));
229
+ background: var(--background-color, #0c0c0d);
230
230
  transition: background-color 0.1s, color 0.1s, border-color 0.1s;
231
231
  cursor: pointer;
232
232
  color: var(--text-color);
@@ -333,6 +333,7 @@ class YumeButton extends HTMLElement {
333
333
  "--primary-background-component",
334
334
  "--primary-background-hover",
335
335
  "--primary-background-active",
336
+ "--primary-content-inverse",
336
337
  ],
337
338
  secondary: [
338
339
  "--secondary-content--",
@@ -341,6 +342,7 @@ class YumeButton extends HTMLElement {
341
342
  "--secondary-background-component",
342
343
  "--secondary-background-hover",
343
344
  "--secondary-background-active",
345
+ "--secondary-content-inverse",
344
346
  ],
345
347
  base: [
346
348
  "--base-content--",
@@ -349,6 +351,7 @@ class YumeButton extends HTMLElement {
349
351
  "--base-background-component",
350
352
  "--base-background-hover",
351
353
  "--base-background-active",
354
+ "--base-content-inverse",
352
355
  ],
353
356
  success: [
354
357
  "--success-content--",
@@ -357,6 +360,7 @@ class YumeButton extends HTMLElement {
357
360
  "--success-background-component",
358
361
  "--success-background-hover",
359
362
  "--success-background-active",
363
+ "--success-content-inverse",
360
364
  ],
361
365
  error: [
362
366
  "--error-content--",
@@ -365,6 +369,7 @@ class YumeButton extends HTMLElement {
365
369
  "--error-background-component",
366
370
  "--error-background-hover",
367
371
  "--error-background-active",
372
+ "--error-content-inverse",
368
373
  ],
369
374
  warning: [
370
375
  "--warning-content--",
@@ -373,6 +378,7 @@ class YumeButton extends HTMLElement {
373
378
  "--warning-background-component",
374
379
  "--warning-background-hover",
375
380
  "--warning-background-active",
381
+ "--warning-content-inverse",
376
382
  ],
377
383
  help: [
378
384
  "--help-content--",
@@ -381,6 +387,7 @@ class YumeButton extends HTMLElement {
381
387
  "--help-background-component",
382
388
  "--help-background-hover",
383
389
  "--help-background-active",
390
+ "--help-content-inverse",
384
391
  ],
385
392
  };
386
393
 
@@ -401,19 +408,19 @@ class YumeButton extends HTMLElement {
401
408
 
402
409
  const styleVars = {
403
410
  outlined: {
404
- "--background-color": `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
405
- "--border-color": `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
406
- "--text-color": `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
411
+ "--background-color": `var(${colorVars[color][3]}, #0c0c0d)`,
412
+ "--border-color": `var(${colorVars[color][0]}, #f7f7fa)`,
413
+ "--text-color": `var(${colorVars[color][0]}, #f7f7fa)`,
407
414
  },
408
415
  filled: {
409
- "--background-color": `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
410
- "--border-color": `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
411
- "--text-color": `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
416
+ "--background-color": `var(${colorVars[color][0]}, #f7f7fa)`,
417
+ "--border-color": `var(${colorVars[color][0]}, #f7f7fa)`,
418
+ "--text-color": `var(${colorVars[color][6]}, #0c0c0d)`,
412
419
  },
413
420
  flat: {
414
- "--background-color": `var(${colorVars[color][3]},rgba(241,246,250,1))`,
415
- "--border-color": `var(${colorVars[color][3]},rgba(241,246,250,1))`,
416
- "--text-color": `var(${colorVars[color][0]},rgba(29,29,29,1))`,
421
+ "--background-color": `var(${colorVars[color][3]},#0c0c0d)`,
422
+ "--border-color": `var(${colorVars[color][3]},#0c0c0d)`,
423
+ "--text-color": `var(${colorVars[color][0]},#f7f7fa)`,
417
424
  },
418
425
  };
419
426
 
@@ -425,66 +432,66 @@ class YumeButton extends HTMLElement {
425
432
  if (styleType === "filled") {
426
433
  this.button.style.setProperty(
427
434
  "--hover-background-color",
428
- `var(${colorVars[color][1]}, rgba(215,219,222,1))`,
435
+ `var(${colorVars[color][1]}, #292a2b)`,
429
436
  );
430
437
  this.button.style.setProperty(
431
438
  "--hover-text-color",
432
- `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
439
+ `var(${colorVars[color][6]}, #0c0c0d)`,
433
440
  );
434
441
  this.button.style.setProperty(
435
442
  "--hover-border-color",
436
- `var(${colorVars[color][1]}, rgba(215,219,222,1))`,
443
+ `var(${colorVars[color][1]}, #292a2b)`,
437
444
  );
438
445
  this.button.style.setProperty(
439
446
  "--focus-background-color",
440
- `var(${colorVars[color][2]}, rgba(188,192,195,1))`,
447
+ `var(${colorVars[color][2]}, #46474a)`,
441
448
  );
442
449
  this.button.style.setProperty(
443
450
  "--focus-text-color",
444
- `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
451
+ `var(${colorVars[color][6]}, #0c0c0d)`,
445
452
  );
446
453
  this.button.style.setProperty(
447
454
  "--focus-border-color",
448
- `var(${colorVars[color][2]}, rgba(188,192,195,1))`,
455
+ `var(${colorVars[color][2]}, #46474a)`,
449
456
  );
450
457
  this.button.style.setProperty(
451
458
  "--active-background-color",
452
- `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
459
+ `var(${colorVars[color][0]}, #f7f7fa)`,
453
460
  );
454
461
  this.button.style.setProperty(
455
462
  "--active-text-color",
456
- `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
463
+ `var(${colorVars[color][6]}, #0c0c0d)`,
457
464
  );
458
465
  this.button.style.setProperty(
459
466
  "--active-border-color",
460
- `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
467
+ `var(${colorVars[color][0]}, #f7f7fa)`,
461
468
  );
462
469
  } else {
463
- const borderColor = `var(${colorVars[color][0]}, rgba(29,29,29,1))`;
470
+ const borderColor = `var(${colorVars[color][0]}, #f7f7fa)`;
464
471
 
465
472
  this.button.style.setProperty(
466
473
  "--hover-background-color",
467
- `var(${colorVars[color][4]}, rgba(215,219,222,1))`,
474
+ `var(${colorVars[color][4]}, #292a2b)`,
468
475
  );
469
476
  this.button.style.setProperty(
470
477
  "--hover-text-color",
471
- `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
478
+ `var(${colorVars[color][0]}, #f7f7fa)`,
472
479
  );
473
480
  this.button.style.setProperty(
474
481
  "--focus-background-color",
475
- `var(${colorVars[color][5]}, rgba(188,192,195,1))`,
482
+ `var(${colorVars[color][5]}, #46474a)`,
476
483
  );
477
484
  this.button.style.setProperty(
478
485
  "--focus-text-color",
479
- `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
486
+ `var(${colorVars[color][0]}, #f7f7fa)`,
480
487
  );
481
488
  this.button.style.setProperty(
482
489
  "--active-background-color",
483
- `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
490
+ `var(${colorVars[color][0]}, #f7f7fa)`,
484
491
  );
485
492
  this.button.style.setProperty(
486
493
  "--active-text-color",
487
- `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
494
+ `var(${colorVars[color][6]}, #0c0c0d)`,
488
495
  );
489
496
 
490
497
  if (styleType === "outlined") {
@@ -505,15 +512,15 @@ class YumeButton extends HTMLElement {
505
512
  // Flat buttons match border to background
506
513
  this.button.style.setProperty(
507
514
  "--hover-border-color",
508
- `var(${colorVars[color][4]}, rgba(215,219,222,1))`,
515
+ `var(${colorVars[color][4]}, #292a2b)`,
509
516
  );
510
517
  this.button.style.setProperty(
511
518
  "--focus-border-color",
512
- `var(${colorVars[color][5]}, rgba(188,192,195,1))`,
519
+ `var(${colorVars[color][5]}, #46474a)`,
513
520
  );
514
521
  this.button.style.setProperty(
515
522
  "--active-border-color",
516
- `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
523
+ `var(${colorVars[color][0]}, #f7f7fa)`,
517
524
  );
518
525
  }
519
526
  }
@@ -646,6 +653,7 @@ class YumeMenu extends HTMLElement {
646
653
  const li = document.createElement("li");
647
654
  li.className = "menuitem";
648
655
  li.setAttribute("role", "menuitem");
656
+ li.setAttribute("part", "menuitem");
649
657
  li.tabIndex = 0;
650
658
 
651
659
  const contentWrapper = document.createElement("span");
@@ -790,8 +798,8 @@ class YumeMenu extends HTMLElement {
790
798
  list-style: none;
791
799
  margin: 0;
792
800
  padding: 0;
793
- background: var(--component-menu-background, #fff);
794
- border: var(--component-menu-border-width, 1px) solid var(--component-menu-border-color, #ccc);
801
+ background: var(--component-menu-background, #0c0c0d);
802
+ border: var(--component-menu-border-width, 1px) solid var(--component-menu-border-color, #37383a);
795
803
  border-radius: var(--component-menu-border-radius, 4px);
796
804
  box-shadow: var(--component-menu-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));
797
805
  min-width: 150px;
@@ -806,12 +814,12 @@ class YumeMenu extends HTMLElement {
806
814
  align-items: center;
807
815
  justify-content: space-between;
808
816
  white-space: nowrap;
809
- color: var(--component-menu-color, #000);
817
+ color: var(--component-menu-color, #f7f7fa);
810
818
  font-size: var(--font-size-button, 1em);
811
819
  }
812
820
 
813
821
  li.menuitem:hover {
814
- background: var(--component-menu-hover-background, #eee);
822
+ background: var(--component-menu-hover-background, #292a2b);
815
823
  }
816
824
 
817
825
  ul.submenu {
@@ -841,6 +849,7 @@ class YumeMenu extends HTMLElement {
841
849
  const rootUl = this._createMenuList(this.items);
842
850
  rootUl.classList.add("menu");
843
851
  rootUl.setAttribute("role", "menu");
852
+ rootUl.setAttribute("part", "menu");
844
853
  this.shadowRoot.appendChild(rootUl);
845
854
  }
846
855
  }
@@ -1056,7 +1065,7 @@ class YumeAppbar extends HTMLElement {
1056
1065
  :host {
1057
1066
  display: block;
1058
1067
  font-family: var(--font-family-body, sans-serif);
1059
- color: var(--component-appbar-color, #fff);
1068
+ color: var(--component-appbar-color, #f7f7fa);
1060
1069
  }
1061
1070
 
1062
1071
  :host([sticky]) {
@@ -1092,23 +1101,23 @@ class YumeAppbar extends HTMLElement {
1092
1101
  }
1093
1102
  :host([orientation="vertical"][sticky="start"]) .appbar,
1094
1103
  :host(:not([orientation])[sticky="start"]) .appbar {
1095
- border-right: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1104
+ border-right: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1096
1105
  }
1097
1106
  :host([orientation="vertical"][sticky="end"]) .appbar,
1098
1107
  :host(:not([orientation])[sticky="end"]) .appbar {
1099
- border-left: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1108
+ border-left: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1100
1109
  }
1101
1110
  :host([orientation="horizontal"][sticky="start"]) .appbar {
1102
- border-bottom: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1111
+ border-bottom: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1103
1112
  }
1104
1113
  :host([orientation="horizontal"][sticky="end"]) .appbar {
1105
- border-top: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1114
+ border-top: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1106
1115
  }
1107
1116
 
1108
1117
  .appbar {
1109
1118
  display: flex;
1110
- background: var(--component-appbar-background, #111);
1111
- border: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1119
+ background: var(--component-appbar-background, #0c0c0d);
1120
+ border: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1112
1121
  border-radius: var(--component-appbar-border-radius, var(--component-sidebar-border-radius, 4px));
1113
1122
  overflow: visible;
1114
1123
  padding: var(--_appbar-padding);
@@ -1157,23 +1166,23 @@ class YumeAppbar extends HTMLElement {
1157
1166
  }
1158
1167
 
1159
1168
  .appbar.vertical .appbar-header {
1160
- border-bottom: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1169
+ border-bottom: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1161
1170
  padding-bottom: var(--_appbar-padding);
1162
1171
  margin-bottom: var(--_appbar-padding);
1163
1172
  }
1164
1173
  .appbar.vertical .appbar-footer {
1165
- border-top: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1174
+ border-top: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1166
1175
  padding-top: var(--_appbar-padding);
1167
1176
  margin-top: var(--_appbar-padding);
1168
1177
  }
1169
1178
 
1170
1179
  .appbar.horizontal .appbar-header {
1171
- border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1180
+ border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1172
1181
  padding-right: var(--_appbar-padding);
1173
1182
  margin-right: var(--_appbar-padding);
1174
1183
  }
1175
1184
  .appbar.horizontal .appbar-footer {
1176
- border-left: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1185
+ border-left: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1177
1186
  padding-left: var(--_appbar-padding);
1178
1187
  margin-left: var(--_appbar-padding);
1179
1188
  }
@@ -1299,6 +1308,7 @@ class YumeAppbar extends HTMLElement {
1299
1308
  /* --- Header: logo + title --- */
1300
1309
  const header = document.createElement("div");
1301
1310
  header.className = "appbar-header";
1311
+ header.setAttribute("part", "header");
1302
1312
 
1303
1313
  const headerContent = document.createElement("div");
1304
1314
  headerContent.className = "header-content";
@@ -1323,6 +1333,7 @@ class YumeAppbar extends HTMLElement {
1323
1333
  /* --- Body: y-button nav items --- */
1324
1334
  const body = document.createElement("div");
1325
1335
  body.className = "appbar-body";
1336
+ body.setAttribute("part", "body");
1326
1337
 
1327
1338
  const navItems = this.items;
1328
1339
  navItems.forEach((item) => {
@@ -1382,6 +1393,7 @@ class YumeAppbar extends HTMLElement {
1382
1393
  /* --- Footer: slot + collapse toggle (vertical only) --- */
1383
1394
  const footer = document.createElement("div");
1384
1395
  footer.className = "appbar-footer";
1396
+ footer.setAttribute("part", "footer");
1385
1397
 
1386
1398
  const footerSlot = document.createElement("slot");
1387
1399
  footerSlot.name = "footer";
@@ -1491,8 +1503,8 @@ class YumeAvatar extends HTMLElement {
1491
1503
  width: 100%;
1492
1504
  height: 100%;
1493
1505
  border-radius: ${borderRadius};
1494
- background-color: var(--primary-content--, rgba(4, 134, 209, 1));
1495
- color: var(--primary-background-component, rgba(245, 250, 250, 1));
1506
+ background-color: var(--primary-content--, #0576ff);
1507
+ color: var(--primary-background-component, #0c0c0d);
1496
1508
  display: flex;
1497
1509
  align-items: center;
1498
1510
  justify-content: center;
@@ -1565,17 +1577,17 @@ class YumeBadge extends HTMLElement {
1565
1577
  return this.getAttribute("value") || "";
1566
1578
  }
1567
1579
 
1568
- getBadgeColor(color) {
1580
+ getBadgeColors(color) {
1569
1581
  const colorMap = {
1570
- primary: "var(--primary-content--)",
1571
- secondary: "var(--secondary-content--)",
1572
- base: "var(--base-content--)",
1573
- success: "var(--success-content--)",
1574
- warning: "var(--warning-content--)",
1575
- error: "var(--error-content--)",
1576
- help: "var(--help-content--)",
1582
+ primary: ["var(--primary-content--)", "var(--primary-content-inverse)"],
1583
+ secondary: ["var(--secondary-content--)", "var(--secondary-content-inverse)"],
1584
+ base: ["var(--base-content--)", "var(--base-content-inverse)"],
1585
+ success: ["var(--success-content--)", "var(--success-content-inverse)"],
1586
+ warning: ["var(--warning-content--)", "var(--warning-content-inverse)"],
1587
+ error: ["var(--error-content--)", "var(--error-content-inverse)"],
1588
+ help: ["var(--help-content--)", "var(--help-content-inverse)"],
1577
1589
  };
1578
- return colorMap[color] || color;
1590
+ return colorMap[color] || [color, "var(--neutral-white, #fff)"];
1579
1591
  }
1580
1592
 
1581
1593
  getBadgePosition(position, alignment) {
@@ -1623,7 +1635,7 @@ class YumeBadge extends HTMLElement {
1623
1635
  }
1624
1636
 
1625
1637
  render() {
1626
- const badgeColor = this.getBadgeColor(this.color);
1638
+ const [badgeColor, badgeTextColor] = this.getBadgeColors(this.color);
1627
1639
  const { fontSize, padding, minSize } = this.getSizeAttributes(
1628
1640
  this.size,
1629
1641
  );
@@ -1644,7 +1656,7 @@ class YumeBadge extends HTMLElement {
1644
1656
  position: ${hasTarget ? "absolute" : "static"};
1645
1657
  ${hasTarget ? positionStyles : ""}
1646
1658
  background: ${badgeColor};
1647
- color: var(--base-background-component, #fff);
1659
+ color: ${badgeTextColor};
1648
1660
  font-size: ${fontSize};
1649
1661
  font-weight: bold;
1650
1662
  padding: ${padding};
@@ -2290,7 +2302,7 @@ class YumeDialog extends HTMLElement {
2290
2302
  border: none;
2291
2303
  cursor: pointer;
2292
2304
  padding: var(--spacing-x-small, 4px);
2293
- color: var(--component-dialog-color, #000);
2305
+ color: var(--component-dialog-color, #f7f7fa);
2294
2306
  font-size: 1.25em;
2295
2307
  line-height: 1;
2296
2308
  border-radius: var(--component-button-border-radius-outer, 4px);
@@ -2299,7 +2311,7 @@ class YumeDialog extends HTMLElement {
2299
2311
  justify-content: center;
2300
2312
  }
2301
2313
  .close-btn:hover {
2302
- background: var(--component-dialog-hover-background, #eee);
2314
+ background: var(--component-dialog-hover-background, #292a2b);
2303
2315
  }
2304
2316
  .close-btn:focus-visible {
2305
2317
  outline: 2px solid var(--component-dialog-accent);
@@ -2332,6 +2344,7 @@ class YumeDialog extends HTMLElement {
2332
2344
 
2333
2345
  const header = document.createElement("div");
2334
2346
  header.className = "header";
2347
+ header.setAttribute("part", "header");
2335
2348
 
2336
2349
  const headerContent = document.createElement("div");
2337
2350
  headerContent.className = "header-content";
@@ -2351,10 +2364,12 @@ class YumeDialog extends HTMLElement {
2351
2364
 
2352
2365
  const body = document.createElement("div");
2353
2366
  body.className = "body";
2367
+ body.setAttribute("part", "body");
2354
2368
  body.innerHTML = `<slot name="body"></slot>`;
2355
2369
 
2356
2370
  const footer = document.createElement("div");
2357
2371
  footer.className = "footer";
2372
+ footer.setAttribute("part", "footer");
2358
2373
  footer.innerHTML = `<slot name="footer"></slot>`;
2359
2374
 
2360
2375
  dialog.appendChild(header);
@@ -2619,8 +2634,8 @@ class YumeDrawer extends HTMLElement {
2619
2634
 
2620
2635
  .drawer-panel {
2621
2636
  position: absolute;
2622
- background: var(--component-drawer-background, #fff);
2623
- color: var(--component-drawer-color, #000);
2637
+ background: var(--component-drawer-background, #0c0c0d);
2638
+ color: var(--component-drawer-color, #f7f7fa);
2624
2639
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
2625
2640
  overflow: hidden;
2626
2641
  outline: none;
@@ -2641,12 +2656,12 @@ class YumeDrawer extends HTMLElement {
2641
2656
  .drawer-panel[data-position="left"] {
2642
2657
  left: 0;
2643
2658
  transform: translateX(-100%);
2644
- border-right: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
2659
+ border-right: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);
2645
2660
  }
2646
2661
  .drawer-panel[data-position="right"] {
2647
2662
  right: 0;
2648
2663
  transform: translateX(100%);
2649
- border-left: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
2664
+ border-left: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);
2650
2665
  }
2651
2666
 
2652
2667
  .drawer-panel[data-position="top"],
@@ -2658,12 +2673,12 @@ class YumeDrawer extends HTMLElement {
2658
2673
  .drawer-panel[data-position="top"] {
2659
2674
  top: 0;
2660
2675
  transform: translateY(-100%);
2661
- border-bottom: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
2676
+ border-bottom: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);
2662
2677
  }
2663
2678
  .drawer-panel[data-position="bottom"] {
2664
2679
  bottom: 0;
2665
2680
  transform: translateY(100%);
2666
- border-top: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
2681
+ border-top: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);
2667
2682
  }
2668
2683
 
2669
2684
  .drawer-panel.open { transform: translate(0, 0); }
@@ -2700,7 +2715,7 @@ class YumeDrawer extends HTMLElement {
2700
2715
  flex-shrink: 0;
2701
2716
  align-items: center;
2702
2717
  justify-content: center;
2703
- color: var(--component-drawer-color, #999);
2718
+ color: var(--component-drawer-color, #f7f7fa);
2704
2719
  opacity: 0.6;
2705
2720
  touch-action: none; /* needed for pointer events */
2706
2721
  user-select: none;
@@ -2709,7 +2724,7 @@ class YumeDrawer extends HTMLElement {
2709
2724
  .resize-handle:hover,
2710
2725
  .resize-handle:active {
2711
2726
  opacity: 1;
2712
- background: var(--component-drawer-hover-background, rgba(128,128,128,0.15));
2727
+ background: var(--component-drawer-hover-background, #292a2b);
2713
2728
  }
2714
2729
 
2715
2730
  .drawer-panel[data-position="left"] > .resize-handle,
@@ -2742,6 +2757,7 @@ class YumeDrawer extends HTMLElement {
2742
2757
 
2743
2758
  const overlay = document.createElement("div");
2744
2759
  overlay.className = "overlay";
2760
+ overlay.setAttribute("part", "overlay");
2745
2761
  overlay.addEventListener("click", () => this._onOverlayClick());
2746
2762
  this.shadowRoot.appendChild(overlay);
2747
2763
 
@@ -2750,6 +2766,7 @@ class YumeDrawer extends HTMLElement {
2750
2766
  panel.setAttribute("role", "dialog");
2751
2767
  panel.setAttribute("aria-modal", "true");
2752
2768
  panel.setAttribute("tabindex", "-1");
2769
+ panel.setAttribute("part", "panel");
2753
2770
  panel.setAttribute("data-position", this.position);
2754
2771
 
2755
2772
  const handle = document.createElement("div");
@@ -2764,14 +2781,17 @@ class YumeDrawer extends HTMLElement {
2764
2781
 
2765
2782
  const header = document.createElement("div");
2766
2783
  header.className = "drawer-header";
2784
+ header.setAttribute("part", "header");
2767
2785
  header.innerHTML = `<slot name="header"></slot>`;
2768
2786
 
2769
2787
  const body = document.createElement("div");
2770
2788
  body.className = "drawer-body";
2789
+ body.setAttribute("part", "body");
2771
2790
  body.innerHTML = `<slot name="body"></slot>`;
2772
2791
 
2773
2792
  const footer = document.createElement("div");
2774
2793
  footer.className = "drawer-footer";
2794
+ footer.setAttribute("part", "footer");
2775
2795
  footer.innerHTML = `<slot name="footer"></slot>`;
2776
2796
 
2777
2797
  content.appendChild(header);
@@ -3850,11 +3870,11 @@ class YumeRadio extends HTMLElement {
3850
3870
 
3851
3871
  this.shadowRoot.innerHTML = `
3852
3872
  <style>${style}</style>
3853
- <fieldset role="radiogroup">
3873
+ <fieldset role="radiogroup" part="radio">
3854
3874
  ${options
3855
3875
  .map(
3856
3876
  (opt, idx) => `
3857
- <label>
3877
+ <label part="label">
3858
3878
  <input
3859
3879
  type="radio"
3860
3880
  name="${name}"
@@ -4831,6 +4851,7 @@ class YumeSwitch extends HTMLElement {
4831
4851
  }
4832
4852
 
4833
4853
  labelTag(pos) {
4854
+ if (this.getAttribute("label-display") === "false") return "";
4834
4855
  const labelPos = this.getAttribute("label-position");
4835
4856
  const shouldRender =
4836
4857
  (pos === "top" && (labelPos === "top" || labelPos === "left")) ||
@@ -4925,13 +4946,12 @@ class YumeSwitch extends HTMLElement {
4925
4946
  }
4926
4947
 
4927
4948
  updateLabelDisplay() {
4928
- const showLabels = this.getAttribute("label-display") !== "false";
4929
4949
  const showToggleLabels =
4930
4950
  this.hasAttribute("toggle-label") &&
4931
4951
  this.getAttribute("toggle-label") !== "false";
4932
4952
  this.style.setProperty(
4933
4953
  "--show-labels",
4934
- showLabels && showToggleLabels ? "flex" : "none",
4954
+ showToggleLabels ? "flex" : "none",
4935
4955
  );
4936
4956
  }
4937
4957
 
@@ -5238,12 +5258,12 @@ class YumeTable extends HTMLElement {
5238
5258
 
5239
5259
  const topColor =
5240
5260
  dir === "asc"
5241
- ? "var(--component-table-color, #333)"
5242
- : "var(--component-table-color-light, #bbb)";
5261
+ ? "var(--component-table-color, #f7f7fa)"
5262
+ : "var(--component-table-color-light, #acaeb2)";
5243
5263
  const bottomColor =
5244
5264
  dir === "desc"
5245
- ? "var(--component-table-color, #333)"
5246
- : "var(--component-table-color-light, #bbb)";
5265
+ ? "var(--component-table-color, #f7f7fa)"
5266
+ : "var(--component-table-color-light, #acaeb2)";
5247
5267
 
5248
5268
  return sortArrows(topColor, bottomColor);
5249
5269
  }
@@ -5263,7 +5283,7 @@ class YumeTable extends HTMLElement {
5263
5283
  :host {
5264
5284
  display: block;
5265
5285
  font-family: var(--font-family-body, sans-serif);
5266
- color: var(--component-table-color, #000);
5286
+ color: var(--component-table-color, #f7f7fa);
5267
5287
  }
5268
5288
 
5269
5289
  .table-wrapper {
@@ -5284,7 +5304,7 @@ class YumeTable extends HTMLElement {
5284
5304
  font-size: var(--font-size-paragraph, 1em);
5285
5305
  white-space: nowrap;
5286
5306
  background: transparent;
5287
- border-bottom: var(--component-table-border-width-header, 2px) solid var(--component-table-border-color, #ccc);
5307
+ border-bottom: var(--component-table-border-width-header, 2px) solid var(--component-table-border-color, #37383a);
5288
5308
  user-select: none;
5289
5309
  }
5290
5310
 
@@ -5293,7 +5313,7 @@ class YumeTable extends HTMLElement {
5293
5313
  }
5294
5314
 
5295
5315
  thead th.sortable:hover {
5296
- background: var(--component-table-hover-background, #f5f5f5);
5316
+ background: var(--component-table-hover-background, #292a2b);
5297
5317
  }
5298
5318
 
5299
5319
  .th-content {
@@ -5310,7 +5330,7 @@ class YumeTable extends HTMLElement {
5310
5330
  tbody td {
5311
5331
  padding: ${paddingVar};
5312
5332
  font-size: var(--font-size-paragraph, 1em);
5313
- border-bottom: var(--component-table-border-width, 2px) solid var(--component-table-border-color, #ccc);
5333
+ border-bottom: var(--component-table-border-width, 2px) solid var(--component-table-border-color, #37383a);
5314
5334
  }
5315
5335
 
5316
5336
  tbody tr:last-child td {
@@ -5324,13 +5344,13 @@ class YumeTable extends HTMLElement {
5324
5344
  ${
5325
5345
  striped
5326
5346
  ? `tbody tr:nth-child(even) {
5327
- background: var(--component-table-hover-background, #f9f9f9);
5347
+ background: var(--component-table-hover-background, #292a2b);
5328
5348
  }`
5329
5349
  : ""
5330
5350
  }
5331
5351
 
5332
5352
  tbody tr:hover {
5333
- background: var(--component-table-active-background, #eee);
5353
+ background: var(--component-table-active-background, #46474a);
5334
5354
  }
5335
5355
  `;
5336
5356
  this.shadowRoot.appendChild(style);
@@ -5340,8 +5360,10 @@ class YumeTable extends HTMLElement {
5340
5360
 
5341
5361
  const table = document.createElement("table");
5342
5362
  table.setAttribute("role", "grid");
5363
+ table.setAttribute("part", "table");
5343
5364
 
5344
5365
  const thead = document.createElement("thead");
5366
+ thead.setAttribute("part", "header");
5345
5367
  const headerRow = document.createElement("tr");
5346
5368
 
5347
5369
  columns.forEach((col) => {
@@ -5387,8 +5409,10 @@ class YumeTable extends HTMLElement {
5387
5409
 
5388
5410
  rows.forEach((row) => {
5389
5411
  const tr = document.createElement("tr");
5412
+ tr.setAttribute("part", "row");
5390
5413
  columns.forEach((col, colIdx) => {
5391
5414
  const td = document.createElement("td");
5415
+ td.setAttribute("part", "cell");
5392
5416
  if (col.rowHeader || colIdx === 0) {
5393
5417
  td.classList.add("row-header");
5394
5418
  }
@@ -5439,12 +5463,12 @@ class YumeTag extends HTMLElement {
5439
5463
  this.shadowRoot.innerHTML = "";
5440
5464
  this.shadowRoot.appendChild(style);
5441
5465
  this.shadowRoot.innerHTML += `
5442
- <span class="tag">
5466
+ <span class="tag" part="tag">
5443
5467
  <slot></slot>
5444
5468
  ${
5445
5469
  removable
5446
5470
  ? `
5447
- <button class="remove" aria-label="Remove tag">
5471
+ <button class="remove" part="remove" aria-label="Remove tag">
5448
5472
  ${close}
5449
5473
  </button>
5450
5474
  `
@@ -5474,40 +5498,47 @@ class YumeTag extends HTMLElement {
5474
5498
  "--primary-content--",
5475
5499
  "--primary-content-hover",
5476
5500
  "--primary-background-component",
5501
+ "--primary-content-inverse",
5477
5502
  ],
5478
5503
  secondary: [
5479
5504
  "--secondary-content--",
5480
5505
  "--secondary-content-hover",
5481
5506
  "--secondary-background-component",
5507
+ "--secondary-content-inverse",
5482
5508
  ],
5483
5509
  base: [
5484
5510
  "--base-content--",
5485
5511
  "--base-content-lighter",
5486
5512
  "--base-background-component",
5513
+ "--base-content-inverse",
5487
5514
  ],
5488
5515
  success: [
5489
5516
  "--success-content--",
5490
5517
  "--success-content-hover",
5491
5518
  "--success-background-component",
5519
+ "--success-content-inverse",
5492
5520
  ],
5493
5521
  error: [
5494
5522
  "--error-content--",
5495
5523
  "--error-content-hover",
5496
5524
  "--error-background-component",
5525
+ "--error-content-inverse",
5497
5526
  ],
5498
5527
  warning: [
5499
5528
  "--warning-content--",
5500
5529
  "--warning-content-hover",
5501
5530
  "--warning-background-component",
5531
+ "--warning-content-inverse",
5502
5532
  ],
5503
5533
  help: [
5504
5534
  "--help-content--",
5505
5535
  "--help-content-hover",
5506
5536
  "--help-background-component",
5537
+ "--help-content-inverse",
5507
5538
  ],
5508
5539
  };
5509
5540
 
5510
- const [content, hover, background] = vars[color] || vars.base;
5541
+ const [content, hover, background, inverse] = vars[color] || vars.base;
5511
5542
 
5512
5543
  const borderRadius =
5513
5544
  shape === "round"
@@ -5544,10 +5575,10 @@ class YumeTag extends HTMLElement {
5544
5575
  filled: `
5545
5576
  .tag {
5546
5577
  background: var(${content});
5547
- color: var(${background});
5578
+ color: var(${inverse});
5548
5579
  }
5549
5580
  .remove {
5550
- color: var(${background});
5581
+ color: var(${inverse});
5551
5582
  }
5552
5583
  `,
5553
5584
  outlined: `
@@ -5771,7 +5802,7 @@ class YumeTabs extends HTMLElement {
5771
5802
  z-index: 0;
5772
5803
  border: var(--component-tab-border-width) solid var(--component-tabs-border-color);
5773
5804
  border-radius: var(--component-tab-border-radius-outer);
5774
- padding: var(--spacing-large);
5805
+ padding: var(--component-tab-content-padding);
5775
5806
  background: var(--component-tabs-background);
5776
5807
  }
5777
5808
  :host([position="top"]) .tabpanel { border-top-left-radius: 0; }
@@ -5791,6 +5822,7 @@ class YumeTabs extends HTMLElement {
5791
5822
  const btn = document.createElement("button");
5792
5823
  btn.id = `tab-${tab.id}`;
5793
5824
  btn.setAttribute("role", "tab");
5825
+ btn.setAttribute("part", "tab");
5794
5826
  btn.setAttribute("aria-selected", isActive);
5795
5827
  btn.setAttribute("aria-controls", `panel-${tab.id}`);
5796
5828
  btn.setAttribute("aria-disabled", isDisabled);
@@ -5825,6 +5857,7 @@ class YumeTabs extends HTMLElement {
5825
5857
  panel.className = "tabpanel";
5826
5858
  panel.id = `panel-${this._activeTab}`;
5827
5859
  panel.setAttribute("role", "tabpanel");
5860
+ panel.setAttribute("part", "content");
5828
5861
  panel.setAttribute("aria-labelledby", `tab-${this._activeTab}`);
5829
5862
 
5830
5863
  const contentSlot = document.createElement("slot");
@@ -5848,6 +5881,7 @@ class YumeTabs extends HTMLElement {
5848
5881
  const tablist = document.createElement("div");
5849
5882
  tablist.className = "tablist";
5850
5883
  tablist.setAttribute("role", "tablist");
5884
+ tablist.setAttribute("part", "tablist");
5851
5885
  tabs.forEach((tab) => tablist.appendChild(this._createTabButton(tab)));
5852
5886
  this.shadowRoot.appendChild(tablist);
5853
5887
 
@@ -5933,6 +5967,7 @@ class YumeToast extends HTMLElement {
5933
5967
  toast.className = `toast color-${color}`;
5934
5968
  toast.setAttribute("role", "alert");
5935
5969
  toast.setAttribute("aria-live", "assertive");
5970
+ toast.setAttribute("part", "toast");
5936
5971
 
5937
5972
  const bgVar = this._getColorBg(color);
5938
5973
  const resolvedBg = resolveCSSColor(bgVar, this);
@@ -5943,11 +5978,13 @@ class YumeToast extends HTMLElement {
5943
5978
  if (icon) {
5944
5979
  const iconEl = document.createElement("i");
5945
5980
  iconEl.className = `toast-icon ${icon}`;
5981
+ iconEl.setAttribute("part", "icon");
5946
5982
  toast.appendChild(iconEl);
5947
5983
  }
5948
5984
 
5949
5985
  const msg = document.createElement("span");
5950
5986
  msg.className = "toast-message";
5987
+ msg.setAttribute("part", "message");
5951
5988
  msg.textContent = message;
5952
5989
  toast.appendChild(msg);
5953
5990
 
@@ -6349,7 +6386,7 @@ class YumeTooltip extends HTMLElement {
6349
6386
  }
6350
6387
  </style>
6351
6388
  <slot class="trigger"></slot>
6352
- <div class="tooltip ${pos}" role="tooltip">${this.text}</div>
6389
+ <div class="tooltip ${pos}" role="tooltip" part="tooltip">${this.text}</div>
6353
6390
  `;
6354
6391
  }
6355
6392
  }
@@ -6358,13 +6395,13 @@ if (!customElements.get("y-tooltip")) {
6358
6395
  customElements.define("y-tooltip", YumeTooltip);
6359
6396
  }
6360
6397
 
6361
- var blueLightCSS = "/* Themes - Blue Light */\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-background-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--blue-light-1);\n --primary-background-component: var(--blue-light-0);\n --primary-background-hover: var(--blue-light-2);\n --primary-background-active: var(--blue-light-3);\n --primary-background-border: var(--blue-light-4);\n --primary-content--: var(--blue--);\n --primary-content-hover: var(--blue-dark-7);\n --primary-content-active: var(--blue-dark-6);\n --secondary-background-app: var(--teal-light-1);\n --secondary-background-component: var(--teal-light-0);\n --secondary-background-hover: var(--teal-light-2);\n --secondary-background-border: var(--teal-light-3);\n --secondary-background-active: var(--teal-light-4);\n --secondary-content--: var(--teal--);\n --secondary-content-hover: var(--teal-dark-7);\n --secondary-content-active: var(--teal-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-background-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-background-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-background-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-background-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-background-border);\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-background-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-background-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-background-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-background-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-background-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-background-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-background-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-background-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-background-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
6398
+ var blueLightCSS = "/* Themes - Blue Light */\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-background-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--blue-light-1);\n --primary-background-component: var(--blue-light-0);\n --primary-background-hover: var(--blue-light-2);\n --primary-background-active: var(--blue-light-3);\n --primary-background-border: var(--blue-light-4);\n --primary-content--: var(--blue--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--blue-dark-7);\n --primary-content-active: var(--blue-dark-6);\n --secondary-background-app: var(--teal-light-1);\n --secondary-background-component: var(--teal-light-0);\n --secondary-background-hover: var(--teal-light-2);\n --secondary-background-border: var(--teal-light-3);\n --secondary-background-active: var(--teal-light-4);\n --secondary-content--: var(--teal--);\n --secondary-content-inverse: var(--neutral-black);\n --secondary-content-hover: var(--teal-dark-7);\n --secondary-content-active: var(--teal-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-background-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-background-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-background-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-background-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-background-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-background-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-background-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-background-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-background-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-background-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-background-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-background-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-background-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-background-border);\n --component-tabs-accent: var(--primary-content--);\n --component-tabs-font-family: var(--font-family-body);\n --component-slider-width: 129px;\n --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
6362
6399
 
6363
- var blueDarkCSS = "/* Themes - Blue Dark */\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-background-border: var(--neutral-dark-3);\n --base-background-active: var(--neutral-dark-4);\n --base-content--: var(--neutral-light-0);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--blue-dark-1);\n --primary-background-component: var(--blue-dark-0);\n --primary-background-hover: var(--blue-dark-2);\n --primary-background-active: var(--blue-dark-3);\n --primary-background-border: var(--blue-dark-4);\n --primary-content--: var(--blue--);\n --primary-content-hover: var(--blue-light-7);\n --primary-content-active: var(--blue-light-6);\n --secondary-background-app: var(--teal-dark-1);\n --secondary-background-component: var(--teal-dark-0);\n --secondary-background-hover: var(--teal-dark-2);\n --secondary-background-border: var(--teal-dark-3);\n --secondary-background-active: var(--teal-dark-4);\n --secondary-content--: var(--teal--);\n --secondary-content-hover: var(--teal-light-7);\n --secondary-content-active: var(--teal-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-background-border: var(--green-dark-3);\n --success-background-active: var(--green-dark-4);\n --success-content--: var(--green--);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-background-border: var(--yellow-dark-3);\n --warning-background-active: var(--yellow-dark-4);\n --warning-content--: var(--yellow--);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-background-border: var(--red-dark-3);\n --error-background-active: var(--red-dark-4);\n --error-content--: var(--red--);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-background-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-background-border);\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-background-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-background-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-background-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-background-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-background-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-background-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-background-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-background-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-background-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
6400
+ var blueDarkCSS = "/* Themes - Blue Dark */\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-background-border: var(--neutral-dark-3);\n --base-background-active: var(--neutral-dark-4);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--blue-dark-1);\n --primary-background-component: var(--blue-dark-0);\n --primary-background-hover: var(--blue-dark-2);\n --primary-background-active: var(--blue-dark-3);\n --primary-background-border: var(--blue-dark-4);\n --primary-content--: var(--blue--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--blue-light-7);\n --primary-content-active: var(--blue-light-6);\n --secondary-background-app: var(--teal-dark-1);\n --secondary-background-component: var(--teal-dark-0);\n --secondary-background-hover: var(--teal-dark-2);\n --secondary-background-border: var(--teal-dark-3);\n --secondary-background-active: var(--teal-dark-4);\n --secondary-content--: var(--teal--);\n --secondary-content-inverse: var(--neutral-black);\n --secondary-content-hover: var(--teal-light-7);\n --secondary-content-active: var(--teal-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-background-border: var(--green-dark-3);\n --success-background-active: var(--green-dark-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-background-border: var(--yellow-dark-3);\n --warning-background-active: var(--yellow-dark-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-background-border: var(--red-dark-3);\n --error-background-active: var(--red-dark-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-background-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-background-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-background-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-background-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-background-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-background-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-background-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-background-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-background-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-background-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-background-border);\n --component-tabs-accent: var(--primary-content--);\n --component-tabs-font-family: var(--font-family-body);\n --component-slider-width: 129px;\n --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
6364
6401
 
6365
- var orangeLightCSS = "/* Themes - Orange Light */\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-background-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--orange-light-1);\n --primary-background-component: var(--orange-light-0);\n --primary-background-hover: var(--orange-light-2);\n --primary-background-active: var(--orange-light-3);\n --primary-background-border: var(--orange-light-4);\n --primary-content--: var(--orange--);\n --primary-content-hover: var(--orange-dark-7);\n --primary-content-active: var(--orange-dark-6);\n --secondary-background-app: var(--amber-light-1);\n --secondary-background-component: var(--amber-light-0);\n --secondary-background-hover: var(--amber-light-2);\n --secondary-background-border: var(--amber-light-3);\n --secondary-background-active: var(--amber-light-4);\n --secondary-content--: var(--amber--);\n --secondary-content-hover: var(--amber-dark-7);\n --secondary-content-active: var(--amber-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-background-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-background-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-background-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-background-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-background-border);\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-background-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-background-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-background-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-background-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-background-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-background-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-background-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-background-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-background-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
6402
+ var orangeLightCSS = "/* Themes - Orange Light */\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-background-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--orange-light-1);\n --primary-background-component: var(--orange-light-0);\n --primary-background-hover: var(--orange-light-2);\n --primary-background-active: var(--orange-light-3);\n --primary-background-border: var(--orange-light-4);\n --primary-content--: var(--orange--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--orange-dark-7);\n --primary-content-active: var(--orange-dark-6);\n --secondary-background-app: var(--amber-light-1);\n --secondary-background-component: var(--amber-light-0);\n --secondary-background-hover: var(--amber-light-2);\n --secondary-background-border: var(--amber-light-3);\n --secondary-background-active: var(--amber-light-4);\n --secondary-content--: var(--amber--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--amber-dark-7);\n --secondary-content-active: var(--amber-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-background-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-background-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-background-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-background-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-background-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-background-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-background-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-background-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-background-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-background-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-background-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-background-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-background-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-background-border);\n --component-tabs-accent: var(--primary-content--);\n --component-tabs-font-family: var(--font-family-body);\n --component-slider-width: 129px;\n --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
6366
6403
 
6367
- var orangeDarkCSS = "/* Themes - Orange Dark */\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-background-border: var(--neutral-dark-3);\n --base-background-active: var(--neutral-dark-4);\n --base-content--: var(--neutral-light-0);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--orange-dark-1);\n --primary-background-component: var(--orange-dark-0);\n --primary-background-hover: var(--orange-dark-2);\n --primary-background-active: var(--orange-dark-3);\n --primary-background-border: var(--orange-dark-4);\n --primary-content--: var(--orange--);\n --primary-content-hover: var(--orange-light-7);\n --primary-content-active: var(--orange-light-6);\n --secondary-background-app: var(--amber-dark-1);\n --secondary-background-component: var(--amber-light-0);\n --secondary-background-hover: var(--amber-dark-2);\n --secondary-background-border: var(--amber-dark-3);\n --secondary-background-active: var(--amber-dark-4);\n --secondary-content--: var(--amber--);\n --secondary-content-hover: var(--amber-light-7);\n --secondary-content-active: var(--amber-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-background-border: var(--green-dark-3);\n --success-background-active: var(--green-dark-4);\n --success-content--: var(--green--);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-background-border: var(--yellow-dark-3);\n --warning-background-active: var(--yellow-dark-4);\n --warning-content--: var(--yellow--);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-background-border: var(--red-dark-3);\n --error-background-active: var(--red-dark-4);\n --error-content--: var(--red--);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-background-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-background-border);\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-background-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-background-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-background-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-background-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-background-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-background-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-background-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-background-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-background-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
6404
+ var orangeDarkCSS = "/* Themes - Orange Dark */\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-background-border: var(--neutral-dark-3);\n --base-background-active: var(--neutral-dark-4);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--orange-dark-1);\n --primary-background-component: var(--orange-dark-0);\n --primary-background-hover: var(--orange-dark-2);\n --primary-background-active: var(--orange-dark-3);\n --primary-background-border: var(--orange-dark-4);\n --primary-content--: var(--orange--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--orange-light-7);\n --primary-content-active: var(--orange-light-6);\n --secondary-background-app: var(--amber-dark-1);\n --secondary-background-component: var(--amber-dark-0);\n --secondary-background-hover: var(--amber-dark-2);\n --secondary-background-border: var(--amber-dark-3);\n --secondary-background-active: var(--amber-dark-4);\n --secondary-content--: var(--amber--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--amber-light-7);\n --secondary-content-active: var(--amber-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-background-border: var(--green-dark-3);\n --success-background-active: var(--green-dark-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-background-border: var(--yellow-dark-3);\n --warning-background-active: var(--yellow-dark-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-background-border: var(--red-dark-3);\n --error-background-active: var(--red-dark-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-background-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-background-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-background-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-background-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-background-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-background-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-background-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-background-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-background-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-background-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-background-border);\n --component-tabs-accent: var(--primary-content--);\n --component-tabs-font-family: var(--font-family-body);\n --component-slider-width: 129px;\n --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
6368
6405
 
6369
6406
  const THEMES = {
6370
6407
  "blue-light": blueLightCSS,
@@ -6381,6 +6418,7 @@ class YumeTheme extends HTMLElement {
6381
6418
  constructor() {
6382
6419
  super();
6383
6420
  this.attachShadow({ mode: "open" });
6421
+ this.shadowRoot.innerHTML = "<slot></slot>";
6384
6422
  }
6385
6423
 
6386
6424
  connectedCallback() {
@@ -6424,10 +6462,22 @@ class YumeTheme extends HTMLElement {
6424
6462
  applyVariablesToHost(cssText) {
6425
6463
  const regex = /--([\w-]+):\s*([^;]+);/g;
6426
6464
  let match;
6465
+ this._themeProps = [];
6427
6466
 
6428
6467
  while ((match = regex.exec(cssText)) !== null) {
6429
- this.style.setProperty(`--${match[1]}`, match[2].trim());
6468
+ const prop = `--${match[1]}`;
6469
+ this.style.setProperty(prop, match[2].trim());
6470
+ this._themeProps.push(prop);
6471
+ }
6472
+ }
6473
+
6474
+ clearThemeProperties() {
6475
+ if (this._themeProps) {
6476
+ for (const prop of this._themeProps) {
6477
+ this.style.removeProperty(prop);
6478
+ }
6430
6479
  }
6480
+ this._themeProps = [];
6431
6481
  }
6432
6482
  }
6433
6483
 
@@ -6435,7 +6485,10 @@ if (!customElements.get("y-theme")) {
6435
6485
  customElements.define("y-theme", YumeTheme);
6436
6486
  }
6437
6487
 
6438
- if (typeof document !== "undefined" && !document.querySelector("[data-yumekit-vars]")) {
6488
+ if (
6489
+ typeof document !== "undefined" &&
6490
+ !document.querySelector("[data-yumekit-vars]")
6491
+ ) {
6439
6492
  const style = document.createElement("style");
6440
6493
  style.setAttribute("data-yumekit-vars", "");
6441
6494
  style.textContent = variablesCSS;