@studious-creative/yumekit 0.1.8 → 0.1.10
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.
- package/dist/components/y-appbar.js +19 -4
- package/dist/components/y-avatar.js +31 -3
- package/dist/components/y-card.js +9 -0
- package/dist/components/y-dialog.js +16 -0
- package/dist/components/y-progress.d.ts +0 -1
- package/dist/components/y-progress.js +28 -15
- package/dist/components/y-tag.d.ts +1 -1
- package/dist/components/y-tag.js +30 -5
- package/dist/components/y-theme.js +7 -2
- package/dist/components/y-toast.d.ts +0 -1
- package/dist/components/y-toast.js +25 -93
- package/dist/components/y-tooltip.d.ts +0 -1
- package/dist/components/y-tooltip.js +25 -93
- package/dist/icons/all.js +69 -0
- package/dist/index.js +203 -166
- package/dist/modules/helpers.d.ts +9 -0
- package/dist/modules/helpers.js +26 -0
- package/dist/react.d.ts +211 -130
- package/dist/styles/variables.css +3 -0
- package/dist/yumekit.min.js +1 -1
- package/package.json +1 -1
- package/dist/modules/load-defaults.d.ts +0 -1
- package/dist/modules/load-defaults.js +0 -45
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var variablesCSS = "/* Colors */\n:root {\n --neutral--: #7f8286ff;\n --neutral-white: #ffffffff;\n --neutral-black: #000000ff;\n --neutral-light-0: #f7f7faff;\n --neutral-light-1: #f0f0f2ff;\n --neutral-light-2: #dfe0e3ff;\n --neutral-light-3: #cacbcfff;\n --neutral-light-4: #bbbdc0ff;\n --neutral-light-5: #acaeb2ff;\n --neutral-light-6: #9d9fa3ff;\n --neutral-light-7: #8e9195ff;\n --neutral-dark-0: #0c0c0dff;\n --neutral-dark-1: #151617ff;\n --neutral-dark-2: #292a2bff;\n --neutral-dark-3: #37383aff;\n --neutral-dark-4: #46474aff;\n --neutral-dark-5: #545659ff;\n --neutral-dark-6: #626568ff;\n --neutral-dark-7: #717377ff;\n --neutral-black-translucent: #0000001f;\n --neutral-white-translucent: #1111111f;\n --red--: #b80421ff;\n --red-light-0: #f2e6e8ff;\n --red-light-1: #ebcacfff;\n --red-light-2: #e4aeb6ff;\n --red-light-3: #dc919dff;\n --red-light-4: #d57585ff;\n --red-light-5: #ce596cff;\n --red-light-6: #c73d53ff;\n --red-light-7: #bf203aff;\n --red-dark-0: #0d0103ff;\n --red-dark-1: #220107ff;\n --red-dark-2: #38020bff;\n --red-dark-3: #4d020eff;\n --red-dark-4: #630312ff;\n --red-dark-5: #780316ff;\n --red-dark-6: #8d031aff;\n --red-dark-7: #a3041dff;\n --red-translucent: #b804211f;\n --orange--: #d13704ff;\n --orange-light-0: #f2e9e6ff;\n --orange-light-1: #eed3caff;\n --orange-light-2: #eabdaeff;\n --orange-light-3: #e6a691ff;\n --orange-light-4: #e29075ff;\n --orange-light-5: #dd7a59ff;\n --orange-light-6: #d9643dff;\n --orange-light-7: #d54d20ff;\n --orange-dark-0: #0d0300ff;\n --orange-dark-1: #260a01ff;\n --orange-dark-2: #3e1001ff;\n --orange-dark-3: #571702ff;\n --orange-dark-4: #6f1d02ff;\n --orange-dark-5: #882403ff;\n --orange-dark-6: #a02a03ff;\n --orange-dark-7: #b93104ff;\n --orange-translucent: #d137041f;\n --amber--: #d16004ff;\n --amber-light-0: #f2ece6ff;\n --amber-light-1: #eedbcaff;\n --amber-light-2: #eac9aeff;\n --amber-light-3: #e6b891ff;\n --amber-light-4: #e2a675ff;\n --amber-light-5: #dd9559ff;\n --amber-light-6: #d9833dff;\n --amber-light-7: #d57220ff;\n --amber-dark-0: #0d0c0cff;\n --amber-dark-1: #26170bff;\n --amber-dark-2: #3e210aff;\n --amber-dark-3: #572c09ff;\n --amber-dark-4: #6f3608ff;\n --amber-dark-5: #884107ff;\n --amber-dark-6: #a04b06ff;\n --amber-dark-7: #b95605ff;\n --amber-translucent: #d160041f;\n --yellow--: #d17f04ff;\n --yellow-light-0: #f2eadfff;\n --yellow-light-1: #eeddc4ff;\n --yellow-light-2: #eacfa8ff;\n --yellow-light-3: #e6c28dff;\n --yellow-light-4: #e2b572ff;\n --yellow-light-5: #dda756ff;\n --yellow-light-6: #d99a3bff;\n --yellow-light-7: #d58c1fff;\n --yellow-dark-0: #0d0c0cff;\n --yellow-dark-1: #261a0bff;\n --yellow-dark-2: #3e290aff;\n --yellow-dark-3: #573709ff;\n --yellow-dark-4: #6f4608ff;\n --yellow-dark-5: #885407ff;\n --yellow-dark-6: #a06206ff;\n --yellow-dark-7: #b97105ff;\n --yellow-translucent: #d17f041f;\n --lime--: #cad104ff;\n --lime-light-0: #f2f2dfff;\n --lime-light-1: #edeec4ff;\n --lime-light-2: #e8eaa8ff;\n --lime-light-3: #e3e68dff;\n --lime-light-4: #dee272ff;\n --lime-light-5: #d9dd56ff;\n --lime-light-6: #d4d93bff;\n --lime-light-7: #cfd51fff;\n --lime-dark-0: #0d0d0cff;\n --lime-dark-1: #25260bff;\n --lime-dark-2: #3c3e0aff;\n --lime-dark-3: #545709ff;\n --lime-dark-4: #6c6f08ff;\n --lime-dark-5: #838807ff;\n --lime-dark-6: #9ba006ff;\n --lime-dark-7: #b2b905ff;\n --lime-translucent: #cad1041f;\n --green--: #2dba73ff;\n --green-light-0: #e6f2ecff;\n --green-light-1: #cfebddff;\n --green-light-2: #b8e4ceff;\n --green-light-3: #a1ddbfff;\n --green-light-4: #8ad6b0ff;\n --green-light-5: #72cfa0ff;\n --green-light-6: #5bc891ff;\n --green-light-7: #44c182ff;\n --green-dark-0: #030d08ff;\n --green-dark-1: #082315ff;\n --green-dark-2: #0e3823ff;\n --green-dark-3: #134e30ff;\n --green-dark-4: #18643eff;\n --green-dark-5: #1d794bff;\n --green-dark-6: #238f58ff;\n --green-dark-7: #28a466ff;\n --green-translucent: #2dba731f;\n --teal--: #04b8b8ff;\n --teal-light-0: #f2fffeff;\n --teal-light-1: #d4f6f5ff;\n --teal-light-2: #b7ededff;\n --teal-light-3: #99e4e4ff;\n --teal-light-4: #7bdcdbff;\n --teal-light-5: #5dd3d2ff;\n --teal-light-6: #40cacaff;\n --teal-light-7: #22c1c1ff;\n --teal-dark-0: #0c0d0dff;\n --teal-dark-1: #0b2624ff;\n --teal-dark-2: #0a3e3cff;\n --teal-dark-3: #095753ff;\n --teal-dark-4: #086f6aff;\n --teal-dark-5: #078881ff;\n --teal-dark-6: #06a099ff;\n --teal-dark-7: #05b9b0ff;\n --teal-translucent: #04b8b81f;\n --blue--: #0576ffff;\n --blue-light-0: #ebf5ffff;\n --blue-light-1: #cee5ffff;\n --blue-light-2: #b2d5ffff;\n --blue-light-3: #95c5ffff;\n --blue-light-4: #78b6ffff;\n --blue-light-5: #5ba6ffff;\n --blue-light-6: #3f96ffff;\n --blue-light-7: #2286ffff;\n --blue-dark-0: #0c0c0dff;\n --blue-dark-1: #0b192bff;\n --blue-dark-2: #0a274aff;\n --blue-dark-3: #093468ff;\n --blue-dark-4: #094186ff;\n --blue-dark-5: #084ea4ff;\n --blue-dark-6: #075cc3ff;\n --blue-dark-7: #0669e1ff;\n --blue-translucent: #0576ff1f;\n --indigo--: #5405ffff;\n --indigo-light-0: #f6f2ffff;\n --indigo-light-1: #e2d4ffff;\n --indigo-light-2: #ceb7ffff;\n --indigo-light-3: #b999ffff;\n --indigo-light-4: #a57cffff;\n --indigo-light-5: #915effff;\n --indigo-light-6: #7d40ffff;\n --indigo-light-7: #6823ffff;\n --indigo-dark-0: #0d0c0cff;\n --indigo-dark-1: #160b2aff;\n --indigo-dark-2: #1f0a49ff;\n --indigo-dark-3: #280967ff;\n --indigo-dark-4: #310986ff;\n --indigo-dark-5: #3908a4ff;\n --indigo-dark-6: #4207c2ff;\n --indigo-dark-7: #4b06e1ff;\n --indigo-translucent: #5405ff1f;\n --purple--: #8a05ffff;\n --purple-light-0: #f9f2ffff;\n --purple-light-1: #ebd4ffff;\n --purple-light-2: #ddb7ffff;\n --purple-light-3: #cf99ffff;\n --purple-light-4: #c27cffff;\n --purple-light-5: #b45effff;\n --purple-light-6: #a640ffff;\n --purple-light-7: #9823ffff;\n --purple-dark-0: #0c0c0dff;\n --purple-dark-1: #1c0b2bff;\n --purple-dark-2: #2c0a4aff;\n --purple-dark-3: #3b0968ff;\n --purple-dark-4: #4b0986ff;\n --purple-dark-5: #5b08a4ff;\n --purple-dark-6: #6b07c3ff;\n --purple-dark-7: #7a06e1ff;\n --purple-translucent: #8a05ff1f;\n --pink--: #ff05a8ff;\n --pink-light-0: #f9f2ffff;\n --pink-light-1: #fad4f4ff;\n --pink-light-2: #fbb7e9ff;\n --pink-light-3: #fb99deff;\n --pink-light-4: #fc7cd4ff;\n --pink-light-5: #fd5ec9ff;\n --pink-light-6: #fe40beff;\n --pink-light-7: #fe23b3ff;\n --pink-dark-0: #0c0c0dff;\n --pink-dark-1: #2a0b20ff;\n --pink-dark-2: #490a34ff;\n --pink-dark-3: #670947ff;\n --pink-dark-4: #86095bff;\n --pink-dark-5: #a4086eff;\n --pink-dark-6: #c20781ff;\n --pink-dark-7: #e10695ff;\n --pink-translucent: #ff05a81f;\n --brown--: #ab642eff;\n --brown-light-0: #f2dfdfff;\n --brown-light-1: #e9d0c9ff;\n --brown-light-2: #e0c0b3ff;\n --brown-light-3: #d7b19dff;\n --brown-light-4: #cfa287ff;\n --brown-light-5: #c69270ff;\n --brown-light-6: #bd835aff;\n --brown-light-7: #b47344ff;\n --brown-dark-0: #0d0c0cff;\n --brown-dark-1: #211710ff;\n --brown-dark-2: #352215ff;\n --brown-dark-3: #482d19ff;\n --brown-dark-4: #5c381dff;\n --brown-dark-5: #704321ff;\n --brown-dark-6: #844e26ff;\n --brown-dark-7: #97592aff;\n --brown-translucent: #ab642e1f;\n}\n\n/* Numerics */\n:root {\n --border-none: 0px;\n --border-x-thin: 1px;\n --border-thin: 2px;\n --border-medium: 4px;\n --border-thick: 8px;\n --border-x-thick: 10px;\n --spacing-none: 0px;\n --spacing-4x-small: 1px;\n --spacing-2x-small: 2px;\n --spacing-x-small: 4px;\n --spacing-small: 6px;\n --spacing-medium: 8px;\n --spacing-large: 12px;\n --spacing-x-large: 16px;\n --spacing-2x-large: 24px;\n --spacing-4x-large: 32px;\n --font-size-display-1: 6em;\n --font-size-display-2: 5.5em;\n --font-size-display-3: 4.5em;\n --font-size-display-4: 3.5em;\n --font-size-h1: 2em;\n --font-size-h2: 1.5em;\n --font-size-h3: 1.17em;\n --font-size-h4: 1em;\n --font-size-h5: 0.83em;\n --font-size-paragraph: 1em;\n --font-size-small: 0.8em;\n --font-size-label: 0.83em;\n --font-size-button: 1em;\n --font-size-quote: 1.17em;\n --radii-none: 0px;\n --radii-x-small: 0.125em;\n --radii-small: 0.25em;\n --radii-medium: 0.375em;\n --radii-large: 0.5px;\n --radii-x-large: 1em;\n --radii-full: 9999px;\n --sizing-2x-small: 16px;\n --sizing-x-small: 19px;\n --sizing-small: 32px;\n --sizing-medium: 40px;\n --sizing-large: 56px;\n}\n\n/* Components */\n\n:root {\n /* appbar */\n --component-appbar-collapsed-width: 48px;\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-large: var(--spacing-4x-large);\n --component-icon-size-medium: var(--spacing-2x-large);\n --component-icon-size-small: var(--spacing-x-large);\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-x-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-x-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-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 --component-tabs-font-family: var(--font-family-body);\n --component-slider-width: 129px;\n --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
|
|
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: 48px;\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-large: var(--spacing-4x-large);\n --component-icon-size-medium: var(--spacing-2x-large);\n --component-icon-size-small: var(--spacing-x-large);\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-x-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-x-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 --component-tabs-font-family: var(--font-family-body);\n --component-slider-width: 129px;\n --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Icon registry — a runtime map of icon names to SVG markup strings.
|
|
@@ -59,6 +59,52 @@ var collapseLeft$1 = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24
|
|
|
59
59
|
|
|
60
60
|
var comments = "<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 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"/>\n</svg>\n";
|
|
61
61
|
|
|
62
|
+
var compAppbar = "<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=\"5\" rx=\"1.5\"/>\n <line x1=\"4\" y1=\"13\" x2=\"20\" y2=\"13\"/>\n <line x1=\"4\" y1=\"17\" x2=\"15\" y2=\"17\"/>\n <line x1=\"4\" y1=\"21\" x2=\"10\" y2=\"21\"/>\n</svg>\n";
|
|
63
|
+
|
|
64
|
+
var compAvatar = "<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 <circle cx=\"12\" cy=\"10\" r=\"3\"/>\n <path d=\"M6 20.5c0-3 2.7-5.5 6-5.5s6 2.5 6 5.5\"/>\n</svg>\n";
|
|
65
|
+
|
|
66
|
+
var compBadge = "<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=\"6\" width=\"16\" height=\"16\" rx=\"2\"/>\n <circle cx=\"20\" cy=\"5\" r=\"3.5\"/>\n</svg>\n";
|
|
67
|
+
|
|
68
|
+
var compButton = "<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=\"7\" width=\"20\" height=\"10\" rx=\"3\"/>\n <line x1=\"8\" y1=\"12\" x2=\"16\" y2=\"12\"/>\n</svg>\n";
|
|
69
|
+
|
|
70
|
+
var compCard = "<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=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\"/>\n <line x1=\"3\" y1=\"8\" x2=\"21\" y2=\"8\"/>\n <line x1=\"7\" y1=\"12\" x2=\"17\" y2=\"12\"/>\n <line x1=\"7\" y1=\"16\" x2=\"13\" y2=\"16\"/>\n</svg>\n";
|
|
71
|
+
|
|
72
|
+
var compCheckbox = "<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=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"/>\n <polyline points=\"7 12.5 10.5 16 17 8\"/>\n</svg>\n";
|
|
73
|
+
|
|
74
|
+
var compDialog = "<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=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/>\n <line x1=\"7\" y1=\"9\" x2=\"17\" y2=\"9\"/>\n <line x1=\"7\" y1=\"13\" x2=\"13\" y2=\"13\"/>\n</svg>\n";
|
|
75
|
+
|
|
76
|
+
var compDrawer = "<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=\"18\" rx=\"2\"/>\n <line x1=\"9\" y1=\"3\" x2=\"9\" y2=\"21\"/>\n <line x1=\"4\" y1=\"8\" x2=\"7\" y2=\"8\"/>\n <line x1=\"4\" y1=\"12\" x2=\"7\" y2=\"12\"/>\n</svg>\n";
|
|
77
|
+
|
|
78
|
+
var compIcon = "<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 2c0 5.52-4.48 10-10 10 5.52 0 10 4.48 10 10 0-5.52 4.48-10 10-10-5.52 0-10-4.48-10-10z\"/>\n</svg>\n";
|
|
79
|
+
|
|
80
|
+
var compInput = "<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=\"6\" width=\"20\" height=\"12\" rx=\"2\"/>\n <line x1=\"6\" y1=\"10\" x2=\"6\" y2=\"14\"/>\n</svg>\n";
|
|
81
|
+
|
|
82
|
+
var compMenu = "<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=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\"/>\n <line x1=\"7\" y1=\"7\" x2=\"17\" y2=\"7\"/>\n <line x1=\"7\" y1=\"12\" x2=\"17\" y2=\"12\"/>\n <line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"17\"/>\n</svg>\n";
|
|
83
|
+
|
|
84
|
+
var compPanelbar = "<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=\"2\" width=\"20\" height=\"20\" rx=\"2\"/>\n <line x1=\"2\" y1=\"9\" x2=\"22\" y2=\"9\"/>\n <line x1=\"2\" y1=\"16\" x2=\"22\" y2=\"16\"/>\n</svg>\n";
|
|
85
|
+
|
|
86
|
+
var compProgress = "<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=\"8\" width=\"20\" height=\"8\" rx=\"4\"/>\n <line x1=\"6\" y1=\"12\" x2=\"13\" y2=\"12\" stroke-width=\"3\" stroke-linecap=\"round\"/>\n</svg>\n";
|
|
87
|
+
|
|
88
|
+
var compRadio = "<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 <circle cx=\"12\" cy=\"12\" r=\"4\" fill=\"currentColor\" stroke=\"none\"/>\n</svg>\n";
|
|
89
|
+
|
|
90
|
+
var compSelect = "<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=\"7\" width=\"20\" height=\"10\" rx=\"2\"/>\n <line x1=\"6\" y1=\"12\" x2=\"13\" y2=\"12\"/>\n <polyline points=\"16 10 18 13 20 10\"/>\n</svg>\n";
|
|
91
|
+
|
|
92
|
+
var compSlider = "<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=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"/>\n <circle cx=\"15\" cy=\"12\" r=\"4\"/>\n</svg>\n";
|
|
93
|
+
|
|
94
|
+
var compSwitch = "<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=\"6\" width=\"20\" height=\"12\" rx=\"6\"/>\n <circle cx=\"16\" cy=\"12\" r=\"4\"/>\n</svg>\n";
|
|
95
|
+
|
|
96
|
+
var compTable = "<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=\"18\" rx=\"2\"/>\n <line x1=\"2\" y1=\"9\" x2=\"22\" y2=\"9\"/>\n <line x1=\"2\" y1=\"15\" x2=\"22\" y2=\"15\"/>\n <line x1=\"10\" y1=\"3\" x2=\"10\" y2=\"21\"/>\n</svg>\n";
|
|
97
|
+
|
|
98
|
+
var compTabs = "<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=\"9\" width=\"20\" height=\"12\" rx=\"2\"/>\n <path d=\"M5 9V6a1.5 1.5 0 0 1 1.5-1.5h5A1.5 1.5 0 0 1 13 6v3\"/>\n <line x1=\"16\" y1=\"6\" x2=\"20\" y2=\"6\"/>\n</svg>\n";
|
|
99
|
+
|
|
100
|
+
var compTag = "<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=\"7\" width=\"20\" height=\"10\" rx=\"5\"/>\n <line x1=\"15\" y1=\"10\" x2=\"17\" y2=\"14\"/>\n <line x1=\"17\" y1=\"10\" x2=\"15\" y2=\"14\"/>\n</svg>\n";
|
|
101
|
+
|
|
102
|
+
var compTheme = "<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=\"M12 2a10 10 0 0 1 0 20z\" fill=\"currentColor\"/>\n</svg>\n";
|
|
103
|
+
|
|
104
|
+
var compToast = "<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=\"3\" y=\"7\" width=\"18\" height=\"10\" rx=\"2\"/>\n <circle cx=\"8\" cy=\"12\" r=\"2\"/>\n <line x1=\"12\" y1=\"12\" x2=\"18\" y2=\"12\"/>\n</svg>\n";
|
|
105
|
+
|
|
106
|
+
var compTooltip = "<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=\"M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5l-2 4-2-4H5a2 2 0 0 1-2-2z\"/>\n</svg>\n";
|
|
107
|
+
|
|
62
108
|
var compass = "<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 <polygon points=\"16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\"/>\n</svg>\n";
|
|
63
109
|
|
|
64
110
|
var diagram = "<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=\"3\" y=\"3\" width=\"6\" height=\"6\" rx=\"1\"/>\n <rect x=\"15\" y=\"3\" width=\"6\" height=\"6\" rx=\"1\"/>\n <rect x=\"9\" y=\"15\" width=\"6\" height=\"6\" rx=\"1\"/>\n <line x1=\"6\" y1=\"9\" x2=\"6\" y2=\"15\"/>\n <line x1=\"6\" y1=\"15\" x2=\"9\" y2=\"15\"/>\n <line x1=\"18\" y1=\"9\" x2=\"18\" y2=\"15\"/>\n <line x1=\"18\" y1=\"15\" x2=\"15\" y2=\"15\"/>\n</svg>\n";
|
|
@@ -138,6 +184,29 @@ registerIcons({
|
|
|
138
184
|
close: close$1,
|
|
139
185
|
"collapse-left": collapseLeft$1,
|
|
140
186
|
comments,
|
|
187
|
+
"comp-appbar": compAppbar,
|
|
188
|
+
"comp-avatar": compAvatar,
|
|
189
|
+
"comp-badge": compBadge,
|
|
190
|
+
"comp-button": compButton,
|
|
191
|
+
"comp-card": compCard,
|
|
192
|
+
"comp-checkbox": compCheckbox,
|
|
193
|
+
"comp-dialog": compDialog,
|
|
194
|
+
"comp-drawer": compDrawer,
|
|
195
|
+
"comp-icon": compIcon,
|
|
196
|
+
"comp-input": compInput,
|
|
197
|
+
"comp-menu": compMenu,
|
|
198
|
+
"comp-panelbar": compPanelbar,
|
|
199
|
+
"comp-progress": compProgress,
|
|
200
|
+
"comp-radio": compRadio,
|
|
201
|
+
"comp-select": compSelect,
|
|
202
|
+
"comp-slider": compSlider,
|
|
203
|
+
"comp-switch": compSwitch,
|
|
204
|
+
"comp-table": compTable,
|
|
205
|
+
"comp-tabs": compTabs,
|
|
206
|
+
"comp-tag": compTag,
|
|
207
|
+
"comp-theme": compTheme,
|
|
208
|
+
"comp-toast": compToast,
|
|
209
|
+
"comp-tooltip": compTooltip,
|
|
141
210
|
compass,
|
|
142
211
|
diagram,
|
|
143
212
|
discord,
|
|
@@ -1496,18 +1565,21 @@ class YumeAppbar extends HTMLElement {
|
|
|
1496
1565
|
collapsedWidth: "40px",
|
|
1497
1566
|
bodyGap: "2px",
|
|
1498
1567
|
buttonSize: "small",
|
|
1568
|
+
iconSize: "small",
|
|
1499
1569
|
},
|
|
1500
1570
|
medium: {
|
|
1501
1571
|
padding: "var(--spacing-small, 6px)",
|
|
1502
1572
|
collapsedWidth: "52px",
|
|
1503
1573
|
bodyGap: "3px",
|
|
1504
1574
|
buttonSize: "medium",
|
|
1575
|
+
iconSize: "medium",
|
|
1505
1576
|
},
|
|
1506
1577
|
large: {
|
|
1507
1578
|
padding: "var(--spacing-medium, 8px)",
|
|
1508
1579
|
collapsedWidth: "64px",
|
|
1509
1580
|
bodyGap: "4px",
|
|
1510
1581
|
buttonSize: "large",
|
|
1582
|
+
iconSize: "large",
|
|
1511
1583
|
},
|
|
1512
1584
|
};
|
|
1513
1585
|
const cfg = sizeConfig[size] || sizeConfig.medium;
|
|
@@ -1622,7 +1694,7 @@ class YumeAppbar extends HTMLElement {
|
|
|
1622
1694
|
|
|
1623
1695
|
.appbar.vertical .appbar-header {
|
|
1624
1696
|
border-bottom: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
|
|
1625
|
-
padding
|
|
1697
|
+
padding: var(--_appbar-padding);
|
|
1626
1698
|
margin-bottom: var(--_appbar-padding);
|
|
1627
1699
|
}
|
|
1628
1700
|
.appbar.vertical .appbar-footer {
|
|
@@ -1633,7 +1705,7 @@ class YumeAppbar extends HTMLElement {
|
|
|
1633
1705
|
|
|
1634
1706
|
.appbar.horizontal .appbar-header {
|
|
1635
1707
|
border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
|
|
1636
|
-
padding
|
|
1708
|
+
padding: var(--_appbar-padding);
|
|
1637
1709
|
margin-right: var(--_appbar-padding);
|
|
1638
1710
|
}
|
|
1639
1711
|
.appbar.horizontal .appbar-footer {
|
|
@@ -1785,7 +1857,10 @@ class YumeAppbar extends HTMLElement {
|
|
|
1785
1857
|
titleWrapper.appendChild(titleSlot);
|
|
1786
1858
|
headerContent.appendChild(titleWrapper);
|
|
1787
1859
|
|
|
1860
|
+
const headerSlot = document.createElement("slot");
|
|
1861
|
+
headerSlot.name = "header";
|
|
1788
1862
|
header.appendChild(headerContent);
|
|
1863
|
+
header.appendChild(headerSlot);
|
|
1789
1864
|
bar.appendChild(header);
|
|
1790
1865
|
|
|
1791
1866
|
/* --- Body: y-button nav items --- */
|
|
@@ -1811,13 +1886,15 @@ class YumeAppbar extends HTMLElement {
|
|
|
1811
1886
|
if (item.icon.trim().startsWith("<")) {
|
|
1812
1887
|
const iconEl = document.createElement("span");
|
|
1813
1888
|
iconEl.slot = "left-icon";
|
|
1889
|
+
iconEl.setAttribute("part", "icon");
|
|
1814
1890
|
iconEl.innerHTML = item.icon;
|
|
1815
1891
|
btn.appendChild(iconEl);
|
|
1816
1892
|
} else {
|
|
1817
1893
|
const iconEl = document.createElement("y-icon");
|
|
1818
1894
|
iconEl.slot = "left-icon";
|
|
1895
|
+
iconEl.setAttribute("part", "icon");
|
|
1819
1896
|
iconEl.setAttribute("name", item.icon);
|
|
1820
|
-
iconEl.setAttribute("size",
|
|
1897
|
+
iconEl.setAttribute("size", cfg.iconSize);
|
|
1821
1898
|
btn.appendChild(iconEl);
|
|
1822
1899
|
}
|
|
1823
1900
|
}
|
|
@@ -1840,7 +1917,14 @@ class YumeAppbar extends HTMLElement {
|
|
|
1840
1917
|
});
|
|
1841
1918
|
}
|
|
1842
1919
|
|
|
1843
|
-
|
|
1920
|
+
if (item.slot) {
|
|
1921
|
+
const slot = document.createElement("slot");
|
|
1922
|
+
slot.name = item.slot;
|
|
1923
|
+
slot.appendChild(btn);
|
|
1924
|
+
wrapper.appendChild(slot);
|
|
1925
|
+
} else {
|
|
1926
|
+
wrapper.appendChild(btn);
|
|
1927
|
+
}
|
|
1844
1928
|
|
|
1845
1929
|
if (hasChildren) {
|
|
1846
1930
|
const menu = document.createElement("y-menu");
|
|
@@ -1899,9 +1983,58 @@ if (!customElements.get("y-appbar")) {
|
|
|
1899
1983
|
customElements.define("y-appbar", YumeAppbar);
|
|
1900
1984
|
}
|
|
1901
1985
|
|
|
1986
|
+
/**
|
|
1987
|
+
* Return a [background, foreground] CSS variable pair for a color scheme.
|
|
1988
|
+
* Background is `--{color}-content--`, foreground is `--{color}-content-inverse`.
|
|
1989
|
+
* @param {string} color — one of base, primary, secondary, success, warning, error, help
|
|
1990
|
+
* @param {string} [fallbackColor="base"] — color to fall back to when `color` is unrecognised.
|
|
1991
|
+
* Use `null` to pass the raw `color` string through as the background instead.
|
|
1992
|
+
* @returns {[string, string]} — [bg var, fg var]
|
|
1993
|
+
*/
|
|
1994
|
+
function getColorVarPair(color, fallbackColor = "base") {
|
|
1995
|
+
const map = {
|
|
1996
|
+
base: ["var(--base-content--)", "var(--base-content-inverse)"],
|
|
1997
|
+
primary: ["var(--primary-content--)", "var(--primary-content-inverse)"],
|
|
1998
|
+
secondary: [
|
|
1999
|
+
"var(--secondary-content--)",
|
|
2000
|
+
"var(--secondary-content-inverse)",
|
|
2001
|
+
],
|
|
2002
|
+
success: ["var(--success-content--)", "var(--success-content-inverse)"],
|
|
2003
|
+
warning: ["var(--warning-content--)", "var(--warning-content-inverse)"],
|
|
2004
|
+
error: ["var(--error-content--)", "var(--error-content-inverse)"],
|
|
2005
|
+
help: ["var(--help-content--)", "var(--help-content-inverse)"],
|
|
2006
|
+
};
|
|
2007
|
+
if (map[color]) return map[color];
|
|
2008
|
+
if (fallbackColor === null) return [color, "var(--base-content-inverse)"];
|
|
2009
|
+
return map[fallbackColor] || map.base;
|
|
2010
|
+
}
|
|
2011
|
+
|
|
2012
|
+
// helpers/slot-utils.js
|
|
2013
|
+
function hideEmptySlotContainers(shadowRoot, slotsConfig = {}) {
|
|
2014
|
+
Object.entries(slotsConfig).forEach(([slotName, containerSelector]) => {
|
|
2015
|
+
const slot = shadowRoot.querySelector(
|
|
2016
|
+
`slot${slotName ? `[name="${slotName}"]` : ":not([name])"}`,
|
|
2017
|
+
);
|
|
2018
|
+
const container = shadowRoot.querySelector(containerSelector);
|
|
2019
|
+
|
|
2020
|
+
if (slot && container) {
|
|
2021
|
+
const assigned = slot
|
|
2022
|
+
.assignedNodes({ flatten: true })
|
|
2023
|
+
.filter((n) => {
|
|
2024
|
+
return !(
|
|
2025
|
+
n.nodeType === Node.TEXT_NODE &&
|
|
2026
|
+
n.textContent.trim() === ""
|
|
2027
|
+
);
|
|
2028
|
+
});
|
|
2029
|
+
|
|
2030
|
+
container.style.display = assigned.length > 0 ? "" : "none";
|
|
2031
|
+
}
|
|
2032
|
+
});
|
|
2033
|
+
}
|
|
2034
|
+
|
|
1902
2035
|
class YumeAvatar extends HTMLElement {
|
|
1903
2036
|
static get observedAttributes() {
|
|
1904
|
-
return ["src", "alt", "size", "shape"];
|
|
2037
|
+
return ["src", "alt", "size", "shape", "color"];
|
|
1905
2038
|
}
|
|
1906
2039
|
|
|
1907
2040
|
constructor() {
|
|
@@ -1920,7 +2053,9 @@ class YumeAvatar extends HTMLElement {
|
|
|
1920
2053
|
const src = this.getAttribute("src");
|
|
1921
2054
|
const altRaw = this.getAttribute("alt") || "AN";
|
|
1922
2055
|
const shape = this.getAttribute("shape") || "circle";
|
|
2056
|
+
const color = this.getAttribute("color") || "primary";
|
|
1923
2057
|
const borderRadius = `var(--component-avatar-border-radius-${shape}, 9999px)`;
|
|
2058
|
+
const [bgColor, textColor] = getColorVarPair(color);
|
|
1924
2059
|
|
|
1925
2060
|
let dimensions;
|
|
1926
2061
|
const size = this.getAttribute("size") || "medium";
|
|
@@ -1969,8 +2104,8 @@ class YumeAvatar extends HTMLElement {
|
|
|
1969
2104
|
width: 100%;
|
|
1970
2105
|
height: 100%;
|
|
1971
2106
|
border-radius: ${borderRadius};
|
|
1972
|
-
background-color:
|
|
1973
|
-
color:
|
|
2107
|
+
background-color: ${bgColor};
|
|
2108
|
+
color: ${textColor};
|
|
1974
2109
|
display: flex;
|
|
1975
2110
|
align-items: center;
|
|
1976
2111
|
justify-content: center;
|
|
@@ -2150,105 +2285,6 @@ if (!customElements.get("y-badge")) {
|
|
|
2150
2285
|
customElements.define("y-badge", YumeBadge);
|
|
2151
2286
|
}
|
|
2152
2287
|
|
|
2153
|
-
// helpers/slot-utils.js
|
|
2154
|
-
function hideEmptySlotContainers(shadowRoot, slotsConfig = {}) {
|
|
2155
|
-
Object.entries(slotsConfig).forEach(([slotName, containerSelector]) => {
|
|
2156
|
-
const slot = shadowRoot.querySelector(
|
|
2157
|
-
`slot${slotName ? `[name="${slotName}"]` : ":not([name])"}`,
|
|
2158
|
-
);
|
|
2159
|
-
const container = shadowRoot.querySelector(containerSelector);
|
|
2160
|
-
|
|
2161
|
-
if (slot && container) {
|
|
2162
|
-
const assigned = slot
|
|
2163
|
-
.assignedNodes({ flatten: true })
|
|
2164
|
-
.filter((n) => {
|
|
2165
|
-
return !(
|
|
2166
|
-
n.nodeType === Node.TEXT_NODE &&
|
|
2167
|
-
n.textContent.trim() === ""
|
|
2168
|
-
);
|
|
2169
|
-
});
|
|
2170
|
-
|
|
2171
|
-
container.style.display = assigned.length > 0 ? "" : "none";
|
|
2172
|
-
}
|
|
2173
|
-
});
|
|
2174
|
-
}
|
|
2175
|
-
|
|
2176
|
-
/**
|
|
2177
|
-
* Resolve a CSS custom-property value to a concrete color string.
|
|
2178
|
-
* Reads from the given element's computed style.
|
|
2179
|
-
* @param {string} varExpr — e.g. "var(--primary-content--)"
|
|
2180
|
-
* @param {HTMLElement} el — element to resolve against
|
|
2181
|
-
* @returns {string} — resolved color or fallback
|
|
2182
|
-
*/
|
|
2183
|
-
function resolveCSSColor(varExpr, el) {
|
|
2184
|
-
const match = varExpr.match(/var\(\s*(--[^,)]+)/);
|
|
2185
|
-
if (!match) return varExpr;
|
|
2186
|
-
const val = getComputedStyle(el).getPropertyValue(match[1]).trim();
|
|
2187
|
-
return val || varExpr;
|
|
2188
|
-
}
|
|
2189
|
-
|
|
2190
|
-
/**
|
|
2191
|
-
* Parse a CSS color string (#hex, rgb(), etc.) to {r, g, b}.
|
|
2192
|
-
* Returns null if it can't parse.
|
|
2193
|
-
*/
|
|
2194
|
-
function parseColor(colorStr) {
|
|
2195
|
-
// #RGB, #RRGGBB, #RRGGBBAA
|
|
2196
|
-
const hexMatch = colorStr.match(
|
|
2197
|
-
/^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i,
|
|
2198
|
-
);
|
|
2199
|
-
if (hexMatch) {
|
|
2200
|
-
let hex = hexMatch[1];
|
|
2201
|
-
if (hex.length <= 4) {
|
|
2202
|
-
hex = hex
|
|
2203
|
-
.split("")
|
|
2204
|
-
.map((c) => c + c)
|
|
2205
|
-
.join("");
|
|
2206
|
-
}
|
|
2207
|
-
return {
|
|
2208
|
-
r: parseInt(hex.slice(0, 2), 16),
|
|
2209
|
-
g: parseInt(hex.slice(2, 4), 16),
|
|
2210
|
-
b: parseInt(hex.slice(4, 6), 16),
|
|
2211
|
-
};
|
|
2212
|
-
}
|
|
2213
|
-
// rgb(r, g, b) or rgba(r, g, b, a)
|
|
2214
|
-
const rgbMatch = colorStr.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
|
|
2215
|
-
if (rgbMatch) {
|
|
2216
|
-
return {
|
|
2217
|
-
r: parseInt(rgbMatch[1], 10),
|
|
2218
|
-
g: parseInt(rgbMatch[2], 10),
|
|
2219
|
-
b: parseInt(rgbMatch[3], 10),
|
|
2220
|
-
};
|
|
2221
|
-
}
|
|
2222
|
-
return null;
|
|
2223
|
-
}
|
|
2224
|
-
|
|
2225
|
-
/**
|
|
2226
|
-
* Compute relative luminance of an {r,g,b} color (0-255 range).
|
|
2227
|
-
* Returns a value between 0 (black) and 1 (white).
|
|
2228
|
-
*/
|
|
2229
|
-
function luminance({ r, g, b }) {
|
|
2230
|
-
const [rs, gs, bs] = [r, g, b].map((c) => {
|
|
2231
|
-
c /= 255;
|
|
2232
|
-
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
|
|
2233
|
-
});
|
|
2234
|
-
return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
|
|
2235
|
-
}
|
|
2236
|
-
|
|
2237
|
-
/**
|
|
2238
|
-
* Given a background color string, return a CSS value for best contrast text.
|
|
2239
|
-
* Uses WCAG relative luminance to pick dark or light, referencing theme tokens
|
|
2240
|
-
* (--neutral-black / --neutral-white) with hardcoded fallbacks.
|
|
2241
|
-
* @param {string} bgColor — any CSS color string (#hex, rgb(), etc.)
|
|
2242
|
-
* @returns {string} CSS var() expression for contrasting text color
|
|
2243
|
-
*/
|
|
2244
|
-
function contrastTextColor(bgColor) {
|
|
2245
|
-
const parsed = parseColor(bgColor);
|
|
2246
|
-
if (!parsed) return "var(--neutral-white, #ffffff)";
|
|
2247
|
-
return luminance(parsed) > 0.179
|
|
2248
|
-
? "var(--neutral-black, #000000)"
|
|
2249
|
-
: "var(--neutral-white, #ffffff)";
|
|
2250
|
-
}
|
|
2251
|
-
|
|
2252
2288
|
class YumeCard extends HTMLElement {
|
|
2253
2289
|
static get observedAttributes() {
|
|
2254
2290
|
return ["color", "raised"];
|
|
@@ -2852,6 +2888,22 @@ class YumeDialog extends HTMLElement {
|
|
|
2852
2888
|
dialog.appendChild(body);
|
|
2853
2889
|
dialog.appendChild(footer);
|
|
2854
2890
|
this.shadowRoot.appendChild(dialog);
|
|
2891
|
+
|
|
2892
|
+
// Hide slot containers that have no slotted content
|
|
2893
|
+
const hideIfEmpty = (wrapper) => {
|
|
2894
|
+
const slot = wrapper.querySelector("slot");
|
|
2895
|
+
if (!slot) return;
|
|
2896
|
+
const update = () => {
|
|
2897
|
+
const hasContent =
|
|
2898
|
+
slot.assignedNodes({ flatten: true }).length > 0;
|
|
2899
|
+
wrapper.style.display = hasContent ? "" : "none";
|
|
2900
|
+
};
|
|
2901
|
+
slot.addEventListener("slotchange", update);
|
|
2902
|
+
update();
|
|
2903
|
+
};
|
|
2904
|
+
if (!this.closable) hideIfEmpty(header);
|
|
2905
|
+
hideIfEmpty(body);
|
|
2906
|
+
hideIfEmpty(footer);
|
|
2855
2907
|
}
|
|
2856
2908
|
}
|
|
2857
2909
|
|
|
@@ -4048,19 +4100,6 @@ class YumeProgress extends HTMLElement {
|
|
|
4048
4100
|
return Math.max(0, Math.min(100, pct));
|
|
4049
4101
|
}
|
|
4050
4102
|
|
|
4051
|
-
getBarColor(color) {
|
|
4052
|
-
const colorMap = {
|
|
4053
|
-
primary: "var(--primary-content--)",
|
|
4054
|
-
secondary: "var(--secondary-content--)",
|
|
4055
|
-
base: "var(--base-content--)",
|
|
4056
|
-
success: "var(--success-content--)",
|
|
4057
|
-
warning: "var(--warning-content--)",
|
|
4058
|
-
error: "var(--error-content--)",
|
|
4059
|
-
help: "var(--help-content--)",
|
|
4060
|
-
};
|
|
4061
|
-
return colorMap[color] || color;
|
|
4062
|
-
}
|
|
4063
|
-
|
|
4064
4103
|
getSizeVar(size) {
|
|
4065
4104
|
const map = {
|
|
4066
4105
|
small: "var(--component-progress-size-small)",
|
|
@@ -4088,7 +4127,7 @@ class YumeProgress extends HTMLElement {
|
|
|
4088
4127
|
render() {
|
|
4089
4128
|
const isIndeterminate = this.indeterminate;
|
|
4090
4129
|
const pct = this.percentage;
|
|
4091
|
-
const barColor =
|
|
4130
|
+
const [barColor, barTextColor] = getColorVarPair(this.color, null);
|
|
4092
4131
|
const sizeVar = this.getSizeVar(this.size);
|
|
4093
4132
|
const isDisabled = this.disabled;
|
|
4094
4133
|
const showLabel = this.labelDisplay && !isIndeterminate;
|
|
@@ -4166,7 +4205,7 @@ class YumeProgress extends HTMLElement {
|
|
|
4166
4205
|
}
|
|
4167
4206
|
|
|
4168
4207
|
.value-label--bar {
|
|
4169
|
-
color:
|
|
4208
|
+
color: ${barTextColor};
|
|
4170
4209
|
width: calc(100% / (${pct || 1} / 100));
|
|
4171
4210
|
}
|
|
4172
4211
|
|
|
@@ -5944,7 +5983,7 @@ if (!customElements.get("y-table")) {
|
|
|
5944
5983
|
|
|
5945
5984
|
class YumeTag extends HTMLElement {
|
|
5946
5985
|
static get observedAttributes() {
|
|
5947
|
-
return ["removable", "color", "style-type", "shape"];
|
|
5986
|
+
return ["removable", "color", "style-type", "shape", "size"];
|
|
5948
5987
|
}
|
|
5949
5988
|
|
|
5950
5989
|
constructor() {
|
|
@@ -5966,9 +6005,10 @@ class YumeTag extends HTMLElement {
|
|
|
5966
6005
|
const color = this.getAttribute("color") || "base";
|
|
5967
6006
|
const styleType = this.getAttribute("style-type") || "filled";
|
|
5968
6007
|
const shape = this.getAttribute("shape") || "square";
|
|
6008
|
+
const size = this.getAttribute("size") || "medium";
|
|
5969
6009
|
|
|
5970
6010
|
const style = document.createElement("style");
|
|
5971
|
-
style.textContent = this.getStyle(color, styleType, shape);
|
|
6011
|
+
style.textContent = this.getStyle(color, styleType, shape, size);
|
|
5972
6012
|
|
|
5973
6013
|
this.shadowRoot.innerHTML = "";
|
|
5974
6014
|
this.shadowRoot.appendChild(style);
|
|
@@ -6002,7 +6042,7 @@ class YumeTag extends HTMLElement {
|
|
|
6002
6042
|
}
|
|
6003
6043
|
}
|
|
6004
6044
|
|
|
6005
|
-
getStyle(color, styleType, shape) {
|
|
6045
|
+
getStyle(color, styleType, shape, size) {
|
|
6006
6046
|
const vars = {
|
|
6007
6047
|
primary: [
|
|
6008
6048
|
"--primary-content--",
|
|
@@ -6055,20 +6095,44 @@ class YumeTag extends HTMLElement {
|
|
|
6055
6095
|
? "var(--component-tag-border-radius-circle)"
|
|
6056
6096
|
: "var(--component-tag-border-radius-square)";
|
|
6057
6097
|
|
|
6098
|
+
const sizeConfig = {
|
|
6099
|
+
small: {
|
|
6100
|
+
height: "var(--component-tag-height-small, 22px)",
|
|
6101
|
+
padding:
|
|
6102
|
+
"var(--component-tag-padding-small, var(--spacing-2x-small))",
|
|
6103
|
+
fontSize: "var(--font-size-small, 0.8em)",
|
|
6104
|
+
},
|
|
6105
|
+
medium: {
|
|
6106
|
+
height: "var(--component-tag-height-medium, 28px)",
|
|
6107
|
+
padding:
|
|
6108
|
+
"var(--component-tag-padding-medium, var(--spacing-x-small))",
|
|
6109
|
+
fontSize: "var(--font-size-label, 0.83em)",
|
|
6110
|
+
},
|
|
6111
|
+
large: {
|
|
6112
|
+
height: "var(--component-tag-height-large, 38px)",
|
|
6113
|
+
padding:
|
|
6114
|
+
"var(--component-tag-padding-large, var(--spacing-small))",
|
|
6115
|
+
fontSize: "var(--font-size-paragraph, 1em)",
|
|
6116
|
+
},
|
|
6117
|
+
};
|
|
6118
|
+
const cfg = sizeConfig[size] || sizeConfig.medium;
|
|
6119
|
+
|
|
6058
6120
|
const baseStyle = `
|
|
6059
6121
|
:host {
|
|
6060
6122
|
display: inline-block;
|
|
6061
6123
|
font-family: var(--font-family-body, sans-serif);
|
|
6062
|
-
font-size:
|
|
6124
|
+
font-size: ${cfg.fontSize};
|
|
6063
6125
|
}
|
|
6064
6126
|
.tag {
|
|
6065
6127
|
display: inline-flex;
|
|
6066
6128
|
align-items: center;
|
|
6067
6129
|
gap: var(--spacing-2x-small);
|
|
6068
|
-
|
|
6130
|
+
height: ${cfg.height};
|
|
6131
|
+
padding: 0 ${cfg.padding};
|
|
6069
6132
|
border: 1px solid transparent;
|
|
6070
6133
|
transition: background-color 0.2s, color 0.2s;
|
|
6071
6134
|
border-radius: ${borderRadius};
|
|
6135
|
+
box-sizing: border-box;
|
|
6072
6136
|
}
|
|
6073
6137
|
.remove {
|
|
6074
6138
|
all: unset;
|
|
@@ -6479,11 +6543,9 @@ class YumeToast extends HTMLElement {
|
|
|
6479
6543
|
toast.setAttribute("aria-live", "assertive");
|
|
6480
6544
|
toast.setAttribute("part", "toast");
|
|
6481
6545
|
|
|
6482
|
-
const
|
|
6483
|
-
|
|
6484
|
-
|
|
6485
|
-
toast.style.backgroundColor = bgVar;
|
|
6486
|
-
toast.style.color = textColor;
|
|
6546
|
+
const [bg, fg] = getColorVarPair(color);
|
|
6547
|
+
toast.style.backgroundColor = bg;
|
|
6548
|
+
toast.style.color = fg;
|
|
6487
6549
|
|
|
6488
6550
|
if (icon) {
|
|
6489
6551
|
const iconEl = document.createElement("y-icon");
|
|
@@ -6582,20 +6644,6 @@ class YumeToast extends HTMLElement {
|
|
|
6582
6644
|
return map[pos] || map["bottom-right"];
|
|
6583
6645
|
}
|
|
6584
6646
|
|
|
6585
|
-
// "base" inverts the page: light content on dark, dark on light.
|
|
6586
|
-
_getColorBg(color) {
|
|
6587
|
-
const map = {
|
|
6588
|
-
base: "var(--base-content--, #fff)",
|
|
6589
|
-
primary: "var(--primary-content--, #0070f3)",
|
|
6590
|
-
secondary: "var(--secondary-content--, #6c757d)",
|
|
6591
|
-
success: "var(--success-content--, #28a745)",
|
|
6592
|
-
warning: "var(--warning-content--, #ffc107)",
|
|
6593
|
-
error: "var(--error-content--, #dc3545)",
|
|
6594
|
-
help: "var(--help-content--, #6f42c1)",
|
|
6595
|
-
};
|
|
6596
|
-
return map[color] || map.base;
|
|
6597
|
-
}
|
|
6598
|
-
|
|
6599
6647
|
render() {
|
|
6600
6648
|
this.shadowRoot.innerHTML = `
|
|
6601
6649
|
<style>
|
|
@@ -6742,9 +6790,8 @@ class YumeTooltip extends HTMLElement {
|
|
|
6742
6790
|
this._visible = true;
|
|
6743
6791
|
const tip = this.shadowRoot.querySelector(".tooltip");
|
|
6744
6792
|
if (tip) {
|
|
6745
|
-
const
|
|
6746
|
-
|
|
6747
|
-
tip.style.color = contrastTextColor(resolvedBg);
|
|
6793
|
+
const [, fg] = getColorVarPair(this.color);
|
|
6794
|
+
tip.style.color = fg;
|
|
6748
6795
|
tip.classList.add("visible");
|
|
6749
6796
|
}
|
|
6750
6797
|
}, this.delay);
|
|
@@ -6775,24 +6822,9 @@ class YumeTooltip extends HTMLElement {
|
|
|
6775
6822
|
}
|
|
6776
6823
|
}
|
|
6777
6824
|
|
|
6778
|
-
_getBg() {
|
|
6779
|
-
const map = {
|
|
6780
|
-
base: "var(--base-content--, #555)",
|
|
6781
|
-
primary: "var(--primary-content--, #0070f3)",
|
|
6782
|
-
secondary: "var(--secondary-content--, #6c757d)",
|
|
6783
|
-
success: "var(--success-content--, #28a745)",
|
|
6784
|
-
warning: "var(--warning-content--, #ffc107)",
|
|
6785
|
-
error: "var(--error-content--, #dc3545)",
|
|
6786
|
-
help: "var(--help-content--, #6f42c1)",
|
|
6787
|
-
};
|
|
6788
|
-
return map[this.color] || map.base;
|
|
6789
|
-
}
|
|
6790
|
-
|
|
6791
6825
|
render() {
|
|
6792
6826
|
const pos = this.position;
|
|
6793
|
-
const bg = this.
|
|
6794
|
-
const resolvedBg = resolveCSSColor(bg, this);
|
|
6795
|
-
const fg = contrastTextColor(resolvedBg);
|
|
6827
|
+
const [bg, fg] = getColorVarPair(this.color);
|
|
6796
6828
|
|
|
6797
6829
|
this.shadowRoot.innerHTML = `
|
|
6798
6830
|
<style>
|
|
@@ -6963,7 +6995,12 @@ class YumeTheme extends HTMLElement {
|
|
|
6963
6995
|
}
|
|
6964
6996
|
|
|
6965
6997
|
this.shadowRoot.innerHTML = `
|
|
6966
|
-
<style
|
|
6998
|
+
<style>
|
|
6999
|
+
${variablesCSS}
|
|
7000
|
+
:host {
|
|
7001
|
+
font-family: var(--font-family-body, sans-serif);
|
|
7002
|
+
}
|
|
7003
|
+
</style>
|
|
6967
7004
|
${themeCSS ? `<style>${themeCSS}</style>` : ""}
|
|
6968
7005
|
<slot></slot>
|
|
6969
7006
|
`;
|