@waggylabs/yumekit 0.3.1 → 0.3.3

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 (16) hide show
  1. package/dist/components/y-appbar.js +2 -2
  2. package/dist/components/y-icon.d.ts +1 -1
  3. package/dist/components/y-icon.js +1 -1
  4. package/dist/components/y-menu.js +1 -1
  5. package/dist/components/y-select.js +1 -1
  6. package/dist/components/y-theme.js +6 -6
  7. package/dist/icons/all.js +27 -0
  8. package/dist/index.js +36 -9
  9. package/dist/react.d.ts +10 -9
  10. package/dist/styles/blue-dark.css +1 -0
  11. package/dist/styles/blue-light.css +1 -0
  12. package/dist/styles/orange-dark.css +1 -0
  13. package/dist/styles/orange-light.css +1 -0
  14. package/dist/styles/variables.css +1 -0
  15. package/dist/yumekit.min.js +1 -1
  16. package/package.json +1 -1
package/dist/components/y-appbar.js CHANGED
@@ -719,7 +719,7 @@ class YumeIcon extends HTMLElement {
719
719
  this.setAttribute("name", val);
720
720
  }
721
721
 
722
- /** Icon size: "small" | "medium" | "large" (default "medium"). */
722
+ /** Icon size: "x-small" | "small" | "medium" | "large" | "x-large" (default "medium"). */
723
723
  get size() {
724
724
  return this.getAttribute("size") || "medium";
725
725
  }
@@ -925,7 +925,7 @@ class YumeMenu extends HTMLElement {
925
925
  }
926
926
  }
927
927
  set items(val) {
928
- this.setAttribute("items", JSON.stringify(val));
928
+ this.setAttribute("items", Array.isArray(val) ? JSON.stringify(val) : (val ?? "[]"));
929
929
  }
930
930
 
931
931
  get anchor() {
package/dist/components/y-icon.d.ts CHANGED
@@ -6,7 +6,7 @@ export class YumeIcon extends HTMLElement {
6
6
  /** The registered icon name to display. */
7
7
  get name(): string;
8
8
  set size(val: string);
9
- /** Icon size: "small" | "medium" | "large" (default "medium"). */
9
+ /** Icon size: "x-small" | "small" | "medium" | "large" | "x-large" (default "medium"). */
10
10
  get size(): string;
11
11
  set color(val: string);
12
12
  /** Color theme: "base" | "primary" | "secondary" | "success" | "warning" | "error" | "help". */
package/dist/components/y-icon.js CHANGED
@@ -157,7 +157,7 @@ class YumeIcon extends HTMLElement {
157
157
  this.setAttribute("name", val);
158
158
  }
159
159
 
160
- /** Icon size: "small" | "medium" | "large" (default "medium"). */
160
+ /** Icon size: "x-small" | "small" | "medium" | "large" | "x-large" (default "medium"). */
161
161
  get size() {
162
162
  return this.getAttribute("size") || "medium";
163
163
  }
package/dist/components/y-menu.js CHANGED
@@ -74,7 +74,7 @@ class YumeMenu extends HTMLElement {
74
74
  }
75
75
  }
76
76
  set items(val) {
77
- this.setAttribute("items", JSON.stringify(val));
77
+ this.setAttribute("items", Array.isArray(val) ? JSON.stringify(val) : (val ?? "[]"));
78
78
  }
79
79
 
80
80
  get anchor() {
package/dist/components/y-select.js CHANGED
@@ -133,7 +133,7 @@ class YumeSelect extends HTMLElement {
133
133
  }
134
134
 
135
135
  set options(val) {
136
- this.setAttribute("options", JSON.stringify(val));
136
+ this.setAttribute("options", Array.isArray(val) ? JSON.stringify(val) : (val ?? "[]"));
137
137
  }
138
138
 
139
139
  /**
package/dist/components/y-theme.js CHANGED
@@ -1,12 +1,12 @@
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 /* appbar */\n --component-appbar-collapsed-width: 52px;\n --component-appbar-collapsed-width-small: 40px;\n --component-appbar-collapsed-width-medium: 52px;\n --component-appbar-collapsed-width-large: 64px;\n --component-appbar-mobile-breakpoint: 768px;\n --component-appbar-padding: var(--spacing-medium);\n --component-appbar-width: 240px;\n --component-appbar-z-index: 100;\n\n /* avatar */\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\n /* badge */\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\n /* button */\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-padding-large: var(--spacing-x-large);\n --component-button-padding-medium: var(--spacing-medium);\n --component-button-padding-small: var(--spacing-x-small);\n\n /* card */\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\n /* checkbox */\n --component-checkbox-icon-size: var(--sizing-2x-small);\n --component-checkbox-size: var(--sizing-x-small);\n\n /* dialog */\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-dialog-z-index: 1000;\n\n /* drawer */\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-drawer-z-index: 5000;\n\n /* icon */\n --component-icon-size-x-large: 28px;\n --component-icon-size-large: 22px;\n --component-icon-size-medium: 18px;\n --component-icon-size-small: 14px;\n --component-icon-size-x-small: 10px;\n\n /* inputs */\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\n /* menu */\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-menu-z-index: 1001;\n\n /* panelbar */\n --component-panelbar-border-radius: var(--radii-x-small);\n --component-panelbar-border-width: var(--border-x-thin);\n --component-panelbar-indent: var(--spacing-x-large);\n --component-panelbar-padding: var(--spacing-medium);\n\n /* progress */\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\n /* radio */\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\n /* select */\n --component-select-z-index: 6000;\n\n /* sidebar */\n --component-sidebar-border-radius: var(--radii-small);\n --component-sidebar-border-width: var(--border-x-thin);\n\n /* slider */\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-thin);\n --component-slider-padding: var(--spacing-x-small);\n --component-slider-thumb-border-radius: var(--radii-x-small);\n\n /* switch */\n --component-switch-border-radius: var(--radii-full);\n --component-switch-border-width: var(--border-thin);\n --component-switch-padding: var(--spacing-2x-small);\n\n /* tab */\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-content-padding: var(--spacing-large);\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\n /* table */\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\n /* tag */\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-height-large: 38px;\n --component-tag-height-medium: 28px;\n --component-tag-height-small: 22px;\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\n /* toast */\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-toast-z-index: 9000;\n\n /* tooltip */\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 --component-tooltip-z-index: 7000;\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 --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\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 /* appbar */\n --component-appbar-collapsed-width: 52px;\n --component-appbar-collapsed-width-small: 40px;\n --component-appbar-collapsed-width-medium: 52px;\n --component-appbar-collapsed-width-large: 64px;\n --component-appbar-mobile-breakpoint: 768px;\n --component-appbar-padding: var(--spacing-medium);\n --component-appbar-width: 240px;\n --component-appbar-z-index: 100;\n\n /* avatar */\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\n /* badge */\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\n /* button */\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-padding-large: var(--spacing-x-large);\n --component-button-padding-medium: var(--spacing-medium);\n --component-button-padding-small: var(--spacing-x-small);\n\n /* card */\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\n /* checkbox */\n --component-checkbox-icon-size: var(--sizing-2x-small);\n --component-checkbox-size: var(--sizing-x-small);\n\n /* dialog */\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-dialog-z-index: 1000;\n\n /* drawer */\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-drawer-z-index: 5000;\n\n /* icon */\n --component-icon-size-x-large: 28px;\n --component-icon-size-large: 22px;\n --component-icon-size-medium: 18px;\n --component-icon-size-small: 14px;\n --component-icon-size-x-small: 10px;\n\n /* inputs */\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\n /* menu */\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-menu-z-index: 1001;\n\n /* panelbar */\n --component-panelbar-border-radius: var(--radii-x-small);\n --component-panelbar-border-width: var(--border-x-thin);\n --component-panelbar-indent: var(--spacing-x-large);\n --component-panelbar-padding: var(--spacing-medium);\n\n /* progress */\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\n /* radio */\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\n /* select */\n --component-select-z-index: 6000;\n\n /* sidebar */\n --component-sidebar-border-radius: var(--radii-small);\n --component-sidebar-border-width: var(--border-x-thin);\n\n /* slider */\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-thin);\n --component-slider-padding: var(--spacing-x-small);\n --component-slider-thumb-border-radius: var(--radii-x-small);\n\n /* switch */\n --component-switch-border-radius: var(--radii-full);\n --component-switch-border-width: var(--border-thin);\n --component-switch-padding: var(--spacing-2x-small);\n\n /* tab */\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-content-padding: var(--spacing-large);\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\n /* table */\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\n /* tag */\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-height-large: 38px;\n --component-tag-height-medium: 28px;\n --component-tag-height-small: 22px;\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\n /* toast */\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-toast-z-index: 9000;\n\n /* tooltip */\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 --component-tooltip-z-index: 7000;\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 --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n --font-weight-body: 400;\n}\n";
2
2
 
3
- 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 --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
3
+ 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 --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n --font-weight-body: 400;\n}\n";
4
4
 
5
- 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 --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
5
+ 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 --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n --font-weight-body: 400;\n}\n";
6
6
 
7
- 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 --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
7
+ 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 --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n --font-weight-body: 400;\n}\n";
8
8
 
9
- 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 --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
9
+ 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 --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n --font-weight-body: 400;\n}\n";
10
10
 
11
11
  const THEMES = {
12
12
  "blue-light": blueLightCSS,
@@ -86,7 +86,7 @@ class YumeTheme extends HTMLElement {
86
86
  :host {
87
87
  font-family: var(--font-family-body, sans-serif);
88
88
  color: var(--base-content--, inherit);
89
- font-weight: 300;
89
+ font-weight: var(--font-weight-body, 400);
90
90
  }`;
91
91
  this.shadowRoot.appendChild(baseStyle);
92
92
 
package/dist/icons/all.js CHANGED
@@ -22,6 +22,10 @@ var campfire = "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.o
22
22
 
23
23
  var chart = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"/>\n</svg>\n";
24
24
 
25
+ var circleExclamation = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\n</svg>\n";
26
+
27
+ var circleInfo = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"/>\n <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"/>\n</svg>\n";
28
+
25
29
  var checkmark = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"5 13 10 17 19 6\"/>\n</svg>\n";
26
30
 
27
31
  var chevronDown = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"6 9 12 15 18 9\"/>\n</svg>\n";
@@ -98,6 +102,12 @@ var download = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"
98
102
 
99
103
  var expandRight = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"13 17 18 12 13 7\"/>\n <polyline points=\"6 17 11 12 6 7\"/>\n</svg>\n";
100
104
 
105
+ var faceSmile = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <path d=\"M8 14s1.5 2 4 2 4-2 4-2\"/>\n <line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"/>\n <line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"/>\n</svg>\n";
106
+
107
+ var faceNeutral = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <line x1=\"8\" y1=\"14\" x2=\"16\" y2=\"14\"/>\n <line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"/>\n <line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"/>\n</svg>\n";
108
+
109
+ var faceFrown = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <path d=\"M16 16s-1.5-2-4-2-4 2-4 2\"/>\n <line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"/>\n <line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"/>\n</svg>\n";
110
+
101
111
  var features = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n <path d=\"M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83\"/>\n</svg>\n";
102
112
 
103
113
  var figma = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z\"/>\n <path d=\"M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z\"/>\n <path d=\"M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z\"/>\n <path d=\"M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z\"/>\n <path d=\"M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z\"/>\n</svg>\n";
@@ -134,10 +144,14 @@ var mail = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill
134
144
 
135
145
  var menu = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"/>\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"/>\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"/>\n</svg>\n";
136
146
 
147
+ var monitor = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"/>\n <line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"/>\n <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"/>\n</svg>\n";
148
+
137
149
  var moon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"/>\n</svg>\n";
138
150
 
139
151
  var palette = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"13.5\" cy=\"6.5\" r=\"1.5\"/>\n <circle cx=\"17.5\" cy=\"10.5\" r=\"1.5\"/>\n <circle cx=\"8.5\" cy=\"7.5\" r=\"1.5\"/>\n <circle cx=\"6.5\" cy=\"12.5\" r=\"1.5\"/>\n <path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z\"/>\n</svg>\n";
140
152
 
153
+ var paperAirplane = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polygon points=\"22 2 15 22 11 13 2 9 22 2\"/>\n <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"/>\n</svg>\n";
154
+
141
155
  var plus = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"/>\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/>\n</svg>\n";
142
156
 
143
157
  var puzzle = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.707-1.704L4.23 8.77a.979.979 0 0 1 .837-.276c.47.07.802.48.968.925a2.501 2.501 0 1 0 3.214-3.214c-.446-.166-.855-.497-.925-.968a.979.979 0 0 1 .276-.837l1.627-1.627a2.404 2.404 0 0 1 3.409 0l1.568 1.568c.219.22.556.328.878.29.493-.075.84-.505 1.02-.969a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.968 1.02z\"/>\n</svg>\n";
@@ -154,12 +168,16 @@ var settings = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"
154
168
 
155
169
  var shield = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>\n</svg>\n";
156
170
 
171
+ var smartphone = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"6\" y=\"2\" width=\"12\" height=\"20\" rx=\"2\" ry=\"2\"/>\n <line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"/>\n</svg>\n";
172
+
157
173
  var star = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/>\n</svg>\n";
158
174
 
159
175
  var sun = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"5\"/>\n <path d=\"M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42\"/>\n</svg>\n";
160
176
 
161
177
  var swap = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"16 3 21 3 21 8\"/>\n <line x1=\"4\" y1=\"20\" x2=\"21\" y2=\"3\"/>\n <polyline points=\"21 16 21 21 16 21\"/>\n <line x1=\"15\" y1=\"15\" x2=\"21\" y2=\"21\"/>\n <line x1=\"4\" y1=\"4\" x2=\"9\" y2=\"9\"/>\n</svg>\n";
162
178
 
179
+ var tablet = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"4\" y=\"2\" width=\"16\" height=\"20\" rx=\"2\" ry=\"2\"/>\n <line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"/>\n</svg>\n";
180
+
163
181
  var upload = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n <polyline points=\"17 8 12 3 7 8\"/>\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n</svg>\n";
164
182
 
165
183
  var user = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/>\n <circle cx=\"12\" cy=\"7\" r=\"4\"/>\n</svg>\n";
@@ -190,6 +208,8 @@ registerIcons({
190
208
  campfire,
191
209
  chart,
192
210
  checkmark,
211
+ "circle-exclamation": circleExclamation,
212
+ "circle-info": circleInfo,
193
213
  "chevron-down": chevronDown,
194
214
  "chevron-left": chevronLeft,
195
215
  "chevron-right": chevronRight,
@@ -227,6 +247,9 @@ registerIcons({
227
247
  discord,
228
248
  download,
229
249
  "expand-right": expandRight,
250
+ "face-frown": faceFrown,
251
+ "face-neutral": faceNeutral,
252
+ "face-smile": faceSmile,
230
253
  features,
231
254
  figma,
232
255
  filter,
@@ -245,8 +268,10 @@ registerIcons({
245
268
  logo,
246
269
  mail,
247
270
  menu,
271
+ monitor,
248
272
  moon,
249
273
  palette,
274
+ "paper-airplane": paperAirplane,
250
275
  plus,
251
276
  puzzle,
252
277
  "right-from-bracket": rightFromBracket,
@@ -255,9 +280,11 @@ registerIcons({
255
280
  search,
256
281
  settings,
257
282
  shield,
283
+ smartphone,
258
284
  star,
259
285
  sun,
260
286
  swap,
287
+ tablet,
261
288
  upload,
262
289
  user,
263
290
  users,