@studious-creative/yumekit 0.1.2 → 0.1.4
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.d.ts +28 -0
- package/dist/components/y-avatar.d.ts +5 -0
- package/dist/components/y-badge.d.ts +15 -0
- package/dist/components/y-button.d.ts +19 -0
- package/dist/components/y-card.d.ts +8 -0
- package/dist/components/y-checkbox.d.ts +20 -0
- package/dist/components/y-dialog.d.ts +18 -0
- package/dist/components/y-drawer.d.ts +1 -0
- package/dist/components/y-input.d.ts +15 -0
- package/dist/components/y-menu.d.ts +26 -0
- package/dist/components/y-panel.d.ts +23 -0
- package/dist/components/y-panelbar.d.ts +3 -0
- package/dist/components/y-progress.d.ts +38 -0
- package/dist/components/y-radio.d.ts +16 -0
- package/dist/components/y-select.d.ts +31 -0
- package/dist/components/y-slider.d.ts +34 -0
- package/dist/components/y-switch.d.ts +23 -0
- package/dist/components/y-table.d.ts +25 -0
- package/dist/components/y-tabs.d.ts +21 -0
- package/dist/components/y-tag.d.ts +7 -0
- package/dist/components/y-theme.d.ts +7 -0
- package/dist/components/y-theme.js +37 -41
- package/dist/components/y-toast.d.ts +34 -0
- package/dist/components/y-tooltip.d.ts +26 -0
- package/dist/icons/index.d.ts +19 -0
- package/dist/index.d.ts +20 -0
- package/dist/index.js +44 -41
- package/dist/modules/helpers.d.ts +35 -0
- package/dist/react.d.ts +134 -0
- package/dist/yumekit.min.js +1 -1
- package/package.json +9 -3
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export class YumeTooltip extends HTMLElement {
|
|
2
|
+
static get observedAttributes(): string[];
|
|
3
|
+
_showTimeout: NodeJS.Timeout;
|
|
4
|
+
_hideTimeout: any;
|
|
5
|
+
_visible: boolean;
|
|
6
|
+
_onMouseEnter(): void;
|
|
7
|
+
_onMouseLeave(): void;
|
|
8
|
+
_onFocusIn(): void;
|
|
9
|
+
_onFocusOut(): void;
|
|
10
|
+
_onKeyDown(e: any): void;
|
|
11
|
+
connectedCallback(): void;
|
|
12
|
+
disconnectedCallback(): void;
|
|
13
|
+
attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
|
|
14
|
+
set text(val: string);
|
|
15
|
+
get text(): string;
|
|
16
|
+
set position(val: string);
|
|
17
|
+
get position(): string;
|
|
18
|
+
set delay(val: number);
|
|
19
|
+
get delay(): number;
|
|
20
|
+
set color(val: string);
|
|
21
|
+
get color(): string;
|
|
22
|
+
show(): void;
|
|
23
|
+
hide(): void;
|
|
24
|
+
_getBg(): any;
|
|
25
|
+
render(): void;
|
|
26
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 3-dot grip handle for drawers.
|
|
3
|
+
* @param {boolean} horizontal – true for left/right drawers, false for top/bottom.
|
|
4
|
+
*/
|
|
5
|
+
export function gripDots(horizontal: boolean): string;
|
|
6
|
+
/**
|
|
7
|
+
* Dual-arrow sort indicator for table headers.
|
|
8
|
+
* @param {string} topColor – fill for the up-arrow triangle.
|
|
9
|
+
* @param {string} bottomColor – fill for the down-arrow triangle.
|
|
10
|
+
*/
|
|
11
|
+
export function sortArrows(topColor: string, bottomColor: string): string;
|
|
12
|
+
export const chevronRight: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 18 15 12 9 6\"/></svg>";
|
|
13
|
+
export const chevronDown: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"/></svg>";
|
|
14
|
+
export const chevronDownLg: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" aria-hidden=\"true\"><path d=\"M5 7 L10 12 L15 7\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" /></svg>";
|
|
15
|
+
export const collapseLeft: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"11 17 6 12 11 7\"/><polyline points=\"18 17 13 12 18 7\"/></svg>";
|
|
16
|
+
export const expandRight: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"13 17 18 12 13 7\"/><polyline points=\"6 17 11 12 6 7\"/></svg>";
|
|
17
|
+
export const checkmark: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><polyline points=\"5 13 10 17 19 6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>";
|
|
18
|
+
export const indeterminate: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><rect x=\"4\" y=\"11\" width=\"16\" height=\"2\" rx=\"1\" ry=\"1\" fill=\"currentColor\"/></svg>";
|
|
19
|
+
export const close: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" width=\"14\" height=\"14\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"><line x1=\"6\" y1=\"6\" x2=\"14\" y2=\"14\" /><line x1=\"14\" y1=\"6\" x2=\"6\" y2=\"14\" /></svg>";
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export * from "./components/y-appbar.js";
|
|
2
|
+
export * from "./components/y-avatar.js";
|
|
3
|
+
export * from "./components/y-badge.js";
|
|
4
|
+
export * from "./components/y-button.js";
|
|
5
|
+
export * from "./components/y-card.js";
|
|
6
|
+
export * from "./components/y-checkbox.js";
|
|
7
|
+
export * from "./components/y-drawer.js";
|
|
8
|
+
export * from "./components/y-input.js";
|
|
9
|
+
export * from "./components/y-panel.js";
|
|
10
|
+
export * from "./components/y-panelbar.js";
|
|
11
|
+
export * from "./components/y-progress.js";
|
|
12
|
+
export * from "./components/y-radio.js";
|
|
13
|
+
export * from "./components/y-select.js";
|
|
14
|
+
export * from "./components/y-slider.js";
|
|
15
|
+
export * from "./components/y-table.js";
|
|
16
|
+
export * from "./components/y-tag.js";
|
|
17
|
+
export * from "./components/y-tabs.js";
|
|
18
|
+
export * from "./components/y-toast.js";
|
|
19
|
+
export * from "./components/y-tooltip.js";
|
|
20
|
+
export * from "./components/y-theme.js";
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
var variablesCSS = "/* Colors */\n:root {\n --neutral--: #7f8286ff;\n --neutral-white: #ffffffff;\n --neutral-black: #000000ff;\n --neutral-light-0: #f7f7faff;\n --neutral-light-1: #f0f0f2ff;\n --neutral-light-2: #dfe0e3ff;\n --neutral-light-3: #cacbcfff;\n --neutral-light-4: #bbbdc0ff;\n --neutral-light-5: #acaeb2ff;\n --neutral-light-6: #9d9fa3ff;\n --neutral-light-7: #8e9195ff;\n --neutral-dark-0: #0c0c0dff;\n --neutral-dark-1: #151617ff;\n --neutral-dark-2: #292a2bff;\n --neutral-dark-3: #37383aff;\n --neutral-dark-4: #46474aff;\n --neutral-dark-5: #545659ff;\n --neutral-dark-6: #626568ff;\n --neutral-dark-7: #717377ff;\n --neutral-black-translucent: #0000001f;\n --neutral-white-translucent: #1111111f;\n --red--: #b80421ff;\n --red-light-0: #f2e6e8ff;\n --red-light-1: #ebcacfff;\n --red-light-2: #e4aeb6ff;\n --red-light-3: #dc919dff;\n --red-light-4: #d57585ff;\n --red-light-5: #ce596cff;\n --red-light-6: #c73d53ff;\n --red-light-7: #bf203aff;\n --red-dark-0: #0d0103ff;\n --red-dark-1: #220107ff;\n --red-dark-2: #38020bff;\n --red-dark-3: #4d020eff;\n --red-dark-4: #630312ff;\n --red-dark-5: #780316ff;\n --red-dark-6: #8d031aff;\n --red-dark-7: #a3041dff;\n --red-translucent: #b804211f;\n --orange--: #d13704ff;\n --orange-light-0: #f2e9e6ff;\n --orange-light-1: #eed3caff;\n --orange-light-2: #eabdaeff;\n --orange-light-3: #e6a691ff;\n --orange-light-4: #e29075ff;\n --orange-light-5: #dd7a59ff;\n --orange-light-6: #d9643dff;\n --orange-light-7: #d54d20ff;\n --orange-dark-0: #0d0300ff;\n --orange-dark-1: #260a01ff;\n --orange-dark-2: #3e1001ff;\n --orange-dark-3: #571702ff;\n --orange-dark-4: #6f1d02ff;\n --orange-dark-5: #882403ff;\n --orange-dark-6: #a02a03ff;\n --orange-dark-7: #b93104ff;\n --orange-translucent: #d137041f;\n --amber--: #d16004ff;\n --amber-light-0: #f2ece6ff;\n --amber-light-1: #eedbcaff;\n --amber-light-2: #eac9aeff;\n --amber-light-3: #e6b891ff;\n --amber-light-4: #e2a675ff;\n --amber-light-5: #dd9559ff;\n --amber-light-6: #d9833dff;\n --amber-light-7: #d57220ff;\n --amber-dark-0: #0d0c0cff;\n --amber-dark-1: #26170bff;\n --amber-dark-2: #3e210aff;\n --amber-dark-3: #572c09ff;\n --amber-dark-4: #6f3608ff;\n --amber-dark-5: #884107ff;\n --amber-dark-6: #a04b06ff;\n --amber-dark-7: #b95605ff;\n --amber-translucent: #d160041f;\n --yellow--: #d17f04ff;\n --yellow-light-0: #f2eadfff;\n --yellow-light-1: #eeddc4ff;\n --yellow-light-2: #eacfa8ff;\n --yellow-light-3: #e6c28dff;\n --yellow-light-4: #e2b572ff;\n --yellow-light-5: #dda756ff;\n --yellow-light-6: #d99a3bff;\n --yellow-light-7: #d58c1fff;\n --yellow-dark-0: #0d0c0cff;\n --yellow-dark-1: #261a0bff;\n --yellow-dark-2: #3e290aff;\n --yellow-dark-3: #573709ff;\n --yellow-dark-4: #6f4608ff;\n --yellow-dark-5: #885407ff;\n --yellow-dark-6: #a06206ff;\n --yellow-dark-7: #b97105ff;\n --yellow-translucent: #d17f041f;\n --lime--: #cad104ff;\n --lime-light-0: #f2f2dfff;\n --lime-light-1: #edeec4ff;\n --lime-light-2: #e8eaa8ff;\n --lime-light-3: #e3e68dff;\n --lime-light-4: #dee272ff;\n --lime-light-5: #d9dd56ff;\n --lime-light-6: #d4d93bff;\n --lime-light-7: #cfd51fff;\n --lime-dark-0: #0d0d0cff;\n --lime-dark-1: #25260bff;\n --lime-dark-2: #3c3e0aff;\n --lime-dark-3: #545709ff;\n --lime-dark-4: #6c6f08ff;\n --lime-dark-5: #838807ff;\n --lime-dark-6: #9ba006ff;\n --lime-dark-7: #b2b905ff;\n --lime-translucent: #cad1041f;\n --green--: #2dba73ff;\n --green-light-0: #e6f2ecff;\n --green-light-1: #cfebddff;\n --green-light-2: #b8e4ceff;\n --green-light-3: #a1ddbfff;\n --green-light-4: #8ad6b0ff;\n --green-light-5: #72cfa0ff;\n --green-light-6: #5bc891ff;\n --green-light-7: #44c182ff;\n --green-dark-0: #030d08ff;\n --green-dark-1: #082315ff;\n --green-dark-2: #0e3823ff;\n --green-dark-3: #134e30ff;\n --green-dark-4: #18643eff;\n --green-dark-5: #1d794bff;\n --green-dark-6: #238f58ff;\n --green-dark-7: #28a466ff;\n --green-translucent: #2dba731f;\n --teal--: #04b8b8ff;\n --teal-light-0: #f2fffeff;\n --teal-light-1: #d4f6f5ff;\n --teal-light-2: #b7ededff;\n --teal-light-3: #99e4e4ff;\n --teal-light-4: #7bdcdbff;\n --teal-light-5: #5dd3d2ff;\n --teal-light-6: #40cacaff;\n --teal-light-7: #22c1c1ff;\n --teal-dark-0: #0c0d0dff;\n --teal-dark-1: #0b2624ff;\n --teal-dark-2: #0a3e3cff;\n --teal-dark-3: #095753ff;\n --teal-dark-4: #086f6aff;\n --teal-dark-5: #078881ff;\n --teal-dark-6: #06a099ff;\n --teal-dark-7: #05b9b0ff;\n --teal-translucent: #04b8b81f;\n --blue--: #0576ffff;\n --blue-light-0: #ebf5ffff;\n --blue-light-1: #cee5ffff;\n --blue-light-2: #b2d5ffff;\n --blue-light-3: #95c5ffff;\n --blue-light-4: #78b6ffff;\n --blue-light-5: #5ba6ffff;\n --blue-light-6: #3f96ffff;\n --blue-light-7: #2286ffff;\n --blue-dark-0: #0c0c0dff;\n --blue-dark-1: #0b192bff;\n --blue-dark-2: #0a274aff;\n --blue-dark-3: #093468ff;\n --blue-dark-4: #094186ff;\n --blue-dark-5: #084ea4ff;\n --blue-dark-6: #075cc3ff;\n --blue-dark-7: #0669e1ff;\n --blue-translucent: #0576ff1f;\n --indigo--: #5405ffff;\n --indigo-light-0: #f6f2ffff;\n --indigo-light-1: #e2d4ffff;\n --indigo-light-2: #ceb7ffff;\n --indigo-light-3: #b999ffff;\n --indigo-light-4: #a57cffff;\n --indigo-light-5: #915effff;\n --indigo-light-6: #7d40ffff;\n --indigo-light-7: #6823ffff;\n --indigo-dark-0: #0d0c0cff;\n --indigo-dark-1: #160b2aff;\n --indigo-dark-2: #1f0a49ff;\n --indigo-dark-3: #280967ff;\n --indigo-dark-4: #310986ff;\n --indigo-dark-5: #3908a4ff;\n --indigo-dark-6: #4207c2ff;\n --indigo-dark-7: #4b06e1ff;\n --indigo-translucent: #5405ff1f;\n --purple--: #8a05ffff;\n --purple-light-0: #f9f2ffff;\n --purple-light-1: #ebd4ffff;\n --purple-light-2: #ddb7ffff;\n --purple-light-3: #cf99ffff;\n --purple-light-4: #c27cffff;\n --purple-light-5: #b45effff;\n --purple-light-6: #a640ffff;\n --purple-light-7: #9823ffff;\n --purple-dark-0: #0c0c0dff;\n --purple-dark-1: #1c0b2bff;\n --purple-dark-2: #2c0a4aff;\n --purple-dark-3: #3b0968ff;\n --purple-dark-4: #4b0986ff;\n --purple-dark-5: #5b08a4ff;\n --purple-dark-6: #6b07c3ff;\n --purple-dark-7: #7a06e1ff;\n --purple-translucent: #8a05ff1f;\n --pink--: #ff05a8ff;\n --pink-light-0: #f9f2ffff;\n --pink-light-1: #fad4f4ff;\n --pink-light-2: #fbb7e9ff;\n --pink-light-3: #fb99deff;\n --pink-light-4: #fc7cd4ff;\n --pink-light-5: #fd5ec9ff;\n --pink-light-6: #fe40beff;\n --pink-light-7: #fe23b3ff;\n --pink-dark-0: #0c0c0dff;\n --pink-dark-1: #2a0b20ff;\n --pink-dark-2: #490a34ff;\n --pink-dark-3: #670947ff;\n --pink-dark-4: #86095bff;\n --pink-dark-5: #a4086eff;\n --pink-dark-6: #c20781ff;\n --pink-dark-7: #e10695ff;\n --pink-translucent: #ff05a81f;\n --brown--: #ab642eff;\n --brown-light-0: #f2dfdfff;\n --brown-light-1: #e9d0c9ff;\n --brown-light-2: #e0c0b3ff;\n --brown-light-3: #d7b19dff;\n --brown-light-4: #cfa287ff;\n --brown-light-5: #c69270ff;\n --brown-light-6: #bd835aff;\n --brown-light-7: #b47344ff;\n --brown-dark-0: #0d0c0cff;\n --brown-dark-1: #211710ff;\n --brown-dark-2: #352215ff;\n --brown-dark-3: #482d19ff;\n --brown-dark-4: #5c381dff;\n --brown-dark-5: #704321ff;\n --brown-dark-6: #844e26ff;\n --brown-dark-7: #97592aff;\n --brown-translucent: #ab642e1f;\n}\n\n/* Numerics */\n:root {\n --border-none: 0px;\n --border-x-thin: 1px;\n --border-thin: 2px;\n --border-medium: 4px;\n --border-thick: 8px;\n --border-x-thick: 10px;\n --spacing-none: 0px;\n --spacing-4x-small: 1px;\n --spacing-2x-small: 2px;\n --spacing-x-small: 4px;\n --spacing-small: 6px;\n --spacing-medium: 8px;\n --spacing-large: 12px;\n --spacing-x-large: 16px;\n --spacing-2x-large: 24px;\n --spacing-4x-large: 32px;\n --font-size-display-1: 6em;\n --font-size-display-2: 5.5em;\n --font-size-display-3: 4.5em;\n --font-size-display-4: 3.5em;\n --font-size-h1: 2em;\n --font-size-h2: 1.5em;\n --font-size-h3: 1.17em;\n --font-size-h4: 1em;\n --font-size-h5: 0.83em;\n --font-size-paragraph: 1em;\n --font-size-small: 0.8em;\n --font-size-label: 0.83em;\n --font-size-button: 1em;\n --font-size-quote: 1.17em;\n --radii-none: 0px;\n --radii-x-small: 0.125em;\n --radii-small: 0.25em;\n --radii-medium: 0.375em;\n --radii-large: 0.5px;\n --radii-x-large: 1em;\n --radii-full: 9999px;\n --sizing-2x-small: 16px;\n --sizing-x-small: 19px;\n --sizing-small: 32px;\n --sizing-medium: 40px;\n --sizing-large: 56px;\n}\n\n/* Components */\n\n:root {\n --component-appbar-collapsed-width: 48px;\n --component-appbar-padding: var(--spacing-medium);\n --component-appbar-width: 240px;\n --component-avatar-border-radius-circle: var(--radii-full);\n --component-avatar-border-radius-square: var(--radii-small);\n --component-avatar-size-large: var(--sizing-large);\n --component-avatar-size-medium: var(--sizing-medium);\n --component-avatar-size-small: var(--sizing-small);\n --component-badge-border-radius-circle: var(--radii-full);\n --component-badge-border-radius-square: var(--radii-small);\n --component-badge-padding-large: var(--spacing-small);\n --component-badge-padding-medium: var(--spacing-x-small);\n --component-badge-padding-small: var(--spacing-2x-small);\n --component-badge-size-large: var(--sizing-medium);\n --component-badge-size-medium: var(--sizing-small);\n --component-badge-size-small: var(--sizing-2x-small);\n --component-button-border-radius-inner: var(--radii-x-small);\n --component-button-border-radius-outer: var(--radii-small);\n --component-button-border-width: var(--border-thin);\n --component-button-border-width-2: var(--border-x-thin);\n --component-button-border-width-2: var(--border-x-thin);\n --component-button-padding-large: var(--spacing-x-large);\n --component-button-padding-medium: var(--spacing-medium);\n --component-button-padding-small: var(--spacing-x-small);\n --component-card-border-radius-inner: var(--radii-small);\n --component-card-border-radius-outer: var(--radii-medium);\n --component-card-border-width: var(--border-x-thin);\n --component-card-inner-border-width: var(--border-x-thin);\n --component-card-padding-inner: var(--spacing-medium);\n --component-card-padding-outer: var(--spacing-x-large);\n --component-checkbox-icon-size: var(--sizing-2x-small);\n --component-checkbox-size: var(--sizing-x-small);\n --component-dialog-border-radius-inner: var(--radii-x-small);\n --component-dialog-border-radius-outer: var(--radii-small);\n --component-dialog-border-width: var(--border-x-thin);\n --component-dialog-inner-border-width: var(--border-x-thin);\n --component-dialog-padding: var(--spacing-medium);\n --component-drawer-border-radius: var(--radii-small);\n --component-drawer-border-width: var(--border-x-thin);\n --component-drawer-handle-padding: var(--spacing-x-small);\n --component-drawer-handle-width: var(--spacing-x-small);\n --component-drawer-padding: var(--spacing-medium);\n --component-inputs-border-radius-inner: var(--radii-x-small);\n --component-inputs-border-radius-outer: var(--radii-small);\n --component-inputs-border-width: var(--border-thin);\n --component-inputs-padding-large: var(--spacing-x-large);\n --component-inputs-padding-medium: var(--spacing-medium);\n --component-inputs-padding-small: var(--spacing-x-small);\n --component-menu-border-radius: var(--radii-x-small);\n --component-menu-border-width: var(--border-x-thin);\n --component-menu-padding-horizontal: var(--spacing-small);\n --component-menu-padding-vertical: var(--spacing-x-small);\n --component-panelbar-border-radius: var(--radii-x-small);\n --component-panelbar-border-width: var(--border-x-thin);\n --component-panelbar-border-width: var(--border-x-thin);\n --component-panelbar-padding: var(--spacing-medium);\n --component-progress-border-radius-inner: var(--radii-small);\n --component-progress-border-radius-outer: calc(var(--radii-small) + 4px);\n --component-progress-border-width: var(--border-x-thin);\n --component-progress-padding: var(--spacing-x-small);\n --component-progress-size-large: var(--sizing-large);\n --component-progress-size-medium: var(--sizing-medium);\n --component-progress-size-small: var(--sizing-small);\n --component-radio-dot-offset: var(--spacing-2x-small);\n --component-radio-dot-size: var(--spacing-medium);\n --component-radio-size: var(--sizing-2x-small);\n --component-sidebar-border-radius: var(--radii-small);\n --component-sidebar-border-width: var(--border-x-thin);\n --component-slider-border-radius-inner: var(--radii-small);\n --component-slider-border-radius-outer: calc(var(--radii-small) + 4px);\n --component-slider-border-width: var(--border-x-thin);\n --component-slider-padding: var(--spacing-x-small);\n --component-slider-thumb-border-radius: var(--radii-x-small);\n --component-switch-border-radius: var(--radii-full);\n --component-switch-border-width: var(--border-x-thin);\n --component-switch-padding: var(--spacing-2x-small);\n --component-tab-border-radius-inner: var(--radii-x-small);\n --component-tab-border-radius-outer: var(--radii-small);\n --component-tab-border-width: var(--border-x-thin);\n --component-tab-gap-large: var(--spacing-large);\n --component-tab-gap-medium: var(--spacing-small);\n --component-tab-gap-small: var(--spacing-2x-small);\n --component-tab-padding-large: var(--spacing-2x-large);\n --component-tab-padding-medium: var(--spacing-large);\n --component-tab-padding-small: var(--spacing-small);\n --component-table-border-radius: var(--radii-small);\n --component-table-border-width: var(--border-x-thin);\n --component-table-border-width-header: var(--border-thin);\n --component-table-padding-large: var(--spacing-large);\n --component-table-padding-medium: var(--spacing-medium);\n --component-table-padding-small: var(--spacing-small);\n --component-tag-border-radius-circle: var(--radii-full);\n --component-tag-border-radius-square: var(--radii-small);\n --component-tag-padding-large: var(--spacing-small);\n --component-tag-padding-medium: var(--spacing-x-small);\n --component-tag-padding-small: var(--spacing-2x-small);\n --component-tag-size-large: var(--sizing-large);\n --component-tag-size-medium: var(--sizing-medium);\n --component-tag-size-small: var(--sizing-small);\n --component-toast-border-radius: var(--radii-small);\n --component-toast-offset: var(--spacing-x-large);\n --component-toast-padding: var(--spacing-medium);\n --component-toast-padding-h: var(--spacing-x-large);\n --component-tooltip-border-radius: var(--radii-small);\n --component-tooltip-padding: var(--spacing-x-small);\n --component-tooltip-padding-h: var(--spacing-medium);\n}\n";
|
|
2
|
+
|
|
1
3
|
class YumeButton extends HTMLElement {
|
|
2
4
|
static get observedAttributes() {
|
|
3
5
|
return [
|
|
@@ -6356,12 +6358,24 @@ if (!customElements.get("y-tooltip")) {
|
|
|
6356
6358
|
customElements.define("y-tooltip", YumeTooltip);
|
|
6357
6359
|
}
|
|
6358
6360
|
|
|
6359
|
-
|
|
6360
|
-
|
|
6361
|
-
|
|
6361
|
+
var blueLightCSS = "/* Themes - Blue Light */\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-background-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--blue-light-1);\n --primary-background-component: var(--blue-light-0);\n --primary-background-hover: var(--blue-light-2);\n --primary-background-active: var(--blue-light-3);\n --primary-background-border: var(--blue-light-4);\n --primary-content--: var(--blue--);\n --primary-content-hover: var(--blue-dark-7);\n --primary-content-active: var(--blue-dark-6);\n --secondary-background-app: var(--teal-light-1);\n --secondary-background-component: var(--teal-light-0);\n --secondary-background-hover: var(--teal-light-2);\n --secondary-background-border: var(--teal-light-3);\n --secondary-background-active: var(--teal-light-4);\n --secondary-content--: var(--teal--);\n --secondary-content-hover: var(--teal-dark-7);\n --secondary-content-active: var(--teal-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-background-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-background-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-background-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-background-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-background-border);\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-background-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-background-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-background-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-background-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-background-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-background-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-background-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-background-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-background-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
|
|
6362
|
+
|
|
6363
|
+
var blueDarkCSS = "/* Themes - Blue Dark */\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-background-border: var(--neutral-dark-3);\n --base-background-active: var(--neutral-dark-4);\n --base-content--: var(--neutral-light-0);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--blue-dark-1);\n --primary-background-component: var(--blue-dark-0);\n --primary-background-hover: var(--blue-dark-2);\n --primary-background-active: var(--blue-dark-3);\n --primary-background-border: var(--blue-dark-4);\n --primary-content--: var(--blue--);\n --primary-content-hover: var(--blue-light-7);\n --primary-content-active: var(--blue-light-6);\n --secondary-background-app: var(--teal-dark-1);\n --secondary-background-component: var(--teal-dark-0);\n --secondary-background-hover: var(--teal-dark-2);\n --secondary-background-border: var(--teal-dark-3);\n --secondary-background-active: var(--teal-dark-4);\n --secondary-content--: var(--teal--);\n --secondary-content-hover: var(--teal-light-7);\n --secondary-content-active: var(--teal-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-background-border: var(--green-dark-3);\n --success-background-active: var(--green-dark-4);\n --success-content--: var(--green--);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-background-border: var(--yellow-dark-3);\n --warning-background-active: var(--yellow-dark-4);\n --warning-content--: var(--yellow--);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-background-border: var(--red-dark-3);\n --error-background-active: var(--red-dark-4);\n --error-content--: var(--red--);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-background-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-background-border);\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-background-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-background-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-background-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-background-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-background-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-background-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-background-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-background-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-background-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
|
|
6364
|
+
|
|
6365
|
+
var orangeLightCSS = "/* Themes - Orange Light */\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-background-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--orange-light-1);\n --primary-background-component: var(--orange-light-0);\n --primary-background-hover: var(--orange-light-2);\n --primary-background-active: var(--orange-light-3);\n --primary-background-border: var(--orange-light-4);\n --primary-content--: var(--orange--);\n --primary-content-hover: var(--orange-dark-7);\n --primary-content-active: var(--orange-dark-6);\n --secondary-background-app: var(--amber-light-1);\n --secondary-background-component: var(--amber-light-0);\n --secondary-background-hover: var(--amber-light-2);\n --secondary-background-border: var(--amber-light-3);\n --secondary-background-active: var(--amber-light-4);\n --secondary-content--: var(--amber--);\n --secondary-content-hover: var(--amber-dark-7);\n --secondary-content-active: var(--amber-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-background-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-background-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-background-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-background-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-background-border);\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-background-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-background-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-background-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-background-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-background-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-background-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-background-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-background-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-background-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
|
|
6366
|
+
|
|
6367
|
+
var orangeDarkCSS = "/* Themes - Orange Dark */\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-background-border: var(--neutral-dark-3);\n --base-background-active: var(--neutral-dark-4);\n --base-content--: var(--neutral-light-0);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--orange-dark-1);\n --primary-background-component: var(--orange-dark-0);\n --primary-background-hover: var(--orange-dark-2);\n --primary-background-active: var(--orange-dark-3);\n --primary-background-border: var(--orange-dark-4);\n --primary-content--: var(--orange--);\n --primary-content-hover: var(--orange-light-7);\n --primary-content-active: var(--orange-light-6);\n --secondary-background-app: var(--amber-dark-1);\n --secondary-background-component: var(--amber-light-0);\n --secondary-background-hover: var(--amber-dark-2);\n --secondary-background-border: var(--amber-dark-3);\n --secondary-background-active: var(--amber-dark-4);\n --secondary-content--: var(--amber--);\n --secondary-content-hover: var(--amber-light-7);\n --secondary-content-active: var(--amber-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-background-border: var(--green-dark-3);\n --success-background-active: var(--green-dark-4);\n --success-content--: var(--green--);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-background-border: var(--yellow-dark-3);\n --warning-background-active: var(--yellow-dark-4);\n --warning-content--: var(--yellow--);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-background-border: var(--red-dark-3);\n --error-background-active: var(--red-dark-4);\n --error-content--: var(--red--);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-background-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-background-border);\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-background-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-background-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-background-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-background-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-background-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-background-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-background-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-background-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-background-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
|
|
6368
|
+
|
|
6369
|
+
const THEMES = {
|
|
6370
|
+
"blue-light": blueLightCSS,
|
|
6371
|
+
"blue-dark": blueDarkCSS,
|
|
6372
|
+
"orange-light": orangeLightCSS,
|
|
6373
|
+
"orange-dark": orangeDarkCSS,
|
|
6374
|
+
};
|
|
6362
6375
|
|
|
6376
|
+
class YumeTheme extends HTMLElement {
|
|
6363
6377
|
static get observedAttributes() {
|
|
6364
|
-
return ["theme-path"];
|
|
6378
|
+
return ["theme", "mode", "theme-path"];
|
|
6365
6379
|
}
|
|
6366
6380
|
|
|
6367
6381
|
constructor() {
|
|
@@ -6370,59 +6384,41 @@ class YumeTheme extends HTMLElement {
|
|
|
6370
6384
|
}
|
|
6371
6385
|
|
|
6372
6386
|
connectedCallback() {
|
|
6373
|
-
this.
|
|
6374
|
-
const themePath = this.getAttribute("theme-path");
|
|
6375
|
-
this.loadTheme(themePath);
|
|
6376
|
-
});
|
|
6387
|
+
this._applyTheme();
|
|
6377
6388
|
}
|
|
6378
6389
|
|
|
6379
6390
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
6380
|
-
if (
|
|
6381
|
-
this.
|
|
6391
|
+
if (oldValue !== newValue) {
|
|
6392
|
+
this._applyTheme();
|
|
6382
6393
|
}
|
|
6383
6394
|
}
|
|
6384
6395
|
|
|
6385
|
-
async
|
|
6386
|
-
|
|
6387
|
-
|
|
6388
|
-
const variablesUrl = new URL(
|
|
6389
|
-
"styles/variables.css",
|
|
6390
|
-
document.baseURI,
|
|
6391
|
-
);
|
|
6392
|
-
const response = await fetch(variablesUrl.href);
|
|
6393
|
-
YumeTheme.defaultVariablesCSS = await response.text();
|
|
6394
|
-
YumeTheme.defaultVariablesLoaded = true;
|
|
6395
|
-
} catch (e) {
|
|
6396
|
-
console.error(
|
|
6397
|
-
"Failed to load default variables from styles/variables.css:",
|
|
6398
|
-
e,
|
|
6399
|
-
);
|
|
6400
|
-
}
|
|
6401
|
-
}
|
|
6402
|
-
return Promise.resolve();
|
|
6403
|
-
}
|
|
6396
|
+
async _applyTheme() {
|
|
6397
|
+
const themePath = this.getAttribute("theme-path");
|
|
6398
|
+
let themeCSS;
|
|
6404
6399
|
|
|
6405
|
-
async loadTheme(themePath) {
|
|
6406
|
-
let themeCSS = "";
|
|
6407
6400
|
if (themePath) {
|
|
6408
6401
|
try {
|
|
6409
|
-
const
|
|
6410
|
-
const response = await fetch(
|
|
6402
|
+
const url = new URL(themePath, document.baseURI);
|
|
6403
|
+
const response = await fetch(url.href);
|
|
6411
6404
|
themeCSS = await response.text();
|
|
6412
6405
|
} catch (e) {
|
|
6413
6406
|
console.error(`Failed to load theme from ${themePath}:`, e);
|
|
6407
|
+
themeCSS = "";
|
|
6414
6408
|
}
|
|
6409
|
+
} else {
|
|
6410
|
+
const theme = this.getAttribute("theme") || "blue";
|
|
6411
|
+
const mode = this.getAttribute("mode") || "light";
|
|
6412
|
+
themeCSS = THEMES[`${theme}-${mode}`] || "";
|
|
6415
6413
|
}
|
|
6416
6414
|
|
|
6417
|
-
|
|
6418
|
-
|
|
6419
|
-
|
|
6420
|
-
|
|
6421
|
-
|
|
6422
|
-
`;
|
|
6415
|
+
this.shadowRoot.innerHTML = `
|
|
6416
|
+
<style>${variablesCSS}</style>
|
|
6417
|
+
${themeCSS ? `<style>${themeCSS}</style>` : ""}
|
|
6418
|
+
<slot></slot>
|
|
6419
|
+
`;
|
|
6423
6420
|
|
|
6424
|
-
this.
|
|
6425
|
-
this.applyVariablesToHost(YumeTheme.defaultVariablesCSS + themeCSS);
|
|
6421
|
+
this.applyVariablesToHost(variablesCSS + themeCSS);
|
|
6426
6422
|
}
|
|
6427
6423
|
|
|
6428
6424
|
applyVariablesToHost(cssText) {
|
|
@@ -6439,4 +6435,11 @@ if (!customElements.get("y-theme")) {
|
|
|
6439
6435
|
customElements.define("y-theme", YumeTheme);
|
|
6440
6436
|
}
|
|
6441
6437
|
|
|
6438
|
+
if (typeof document !== "undefined" && !document.querySelector("[data-yumekit-vars]")) {
|
|
6439
|
+
const style = document.createElement("style");
|
|
6440
|
+
style.setAttribute("data-yumekit-vars", "");
|
|
6441
|
+
style.textContent = variablesCSS;
|
|
6442
|
+
document.head.appendChild(style);
|
|
6443
|
+
}
|
|
6444
|
+
|
|
6442
6445
|
export { YumeAppbar, YumeAvatar, YumeBadge, YumeButton, YumeCard, YumeCheckbox, YumeInput, YumePanel, YumePanelBar, YumeProgress, YumeRadio, YumeSelect, YumeSlider, YumeTable, YumeTabs, YumeTag, YumeTheme, YumeToast, YumeTooltip };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
export function hideEmptySlotContainers(shadowRoot: any, slotsConfig?: {}): void;
|
|
2
|
+
/**
|
|
3
|
+
* Resolve a CSS custom-property value to a concrete color string.
|
|
4
|
+
* Reads from the given element's computed style.
|
|
5
|
+
* @param {string} varExpr — e.g. "var(--primary-content--)"
|
|
6
|
+
* @param {HTMLElement} el — element to resolve against
|
|
7
|
+
* @returns {string} — resolved color or fallback
|
|
8
|
+
*/
|
|
9
|
+
export function resolveCSSColor(varExpr: string, el: HTMLElement): string;
|
|
10
|
+
/**
|
|
11
|
+
* Parse a CSS color string (#hex, rgb(), etc.) to {r, g, b}.
|
|
12
|
+
* Returns null if it can't parse.
|
|
13
|
+
*/
|
|
14
|
+
export function parseColor(colorStr: any): {
|
|
15
|
+
r: number;
|
|
16
|
+
g: number;
|
|
17
|
+
b: number;
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* Compute relative luminance of an {r,g,b} color (0-255 range).
|
|
21
|
+
* Returns a value between 0 (black) and 1 (white).
|
|
22
|
+
*/
|
|
23
|
+
export function luminance({ r, g, b }: {
|
|
24
|
+
r: any;
|
|
25
|
+
g: any;
|
|
26
|
+
b: any;
|
|
27
|
+
}): number;
|
|
28
|
+
/**
|
|
29
|
+
* Given a background color string, return a CSS value for best contrast text.
|
|
30
|
+
* Uses WCAG relative luminance to pick dark or light, referencing theme tokens
|
|
31
|
+
* (--neutral-black / --neutral-white) with hardcoded fallbacks.
|
|
32
|
+
* @param {string} bgColor — any CSS color string (#hex, rgb(), etc.)
|
|
33
|
+
* @returns {string} CSS var() expression for contrasting text color
|
|
34
|
+
*/
|
|
35
|
+
export function contrastTextColor(bgColor: string): string;
|
package/dist/react.d.ts
ADDED
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import type { DetailedHTMLProps, HTMLAttributes } from 'react';
|
|
2
|
+
|
|
3
|
+
type El<T = object> = DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> & T;
|
|
4
|
+
|
|
5
|
+
declare module 'react' {
|
|
6
|
+
namespace JSX {
|
|
7
|
+
interface IntrinsicElements {
|
|
8
|
+
'y-appbar': El;
|
|
9
|
+
'y-avatar': El<{
|
|
10
|
+
src?: string;
|
|
11
|
+
alt?: string;
|
|
12
|
+
size?: string;
|
|
13
|
+
color?: string;
|
|
14
|
+
}>;
|
|
15
|
+
'y-badge': El<{
|
|
16
|
+
color?: string;
|
|
17
|
+
size?: string;
|
|
18
|
+
}>;
|
|
19
|
+
'y-button': El<{
|
|
20
|
+
'left-icon'?: string;
|
|
21
|
+
'right-icon'?: string;
|
|
22
|
+
color?: string;
|
|
23
|
+
size?: 'small' | 'medium' | 'large';
|
|
24
|
+
'style-type'?: 'outlined' | 'filled' | 'flat';
|
|
25
|
+
type?: string;
|
|
26
|
+
disabled?: boolean | string;
|
|
27
|
+
name?: string;
|
|
28
|
+
value?: string;
|
|
29
|
+
autofocus?: boolean | string;
|
|
30
|
+
form?: string;
|
|
31
|
+
formaction?: string;
|
|
32
|
+
formenctype?: string;
|
|
33
|
+
formmethod?: string;
|
|
34
|
+
formnovalidate?: boolean | string;
|
|
35
|
+
formtarget?: string;
|
|
36
|
+
}>;
|
|
37
|
+
'y-card': El;
|
|
38
|
+
'y-checkbox': El<{
|
|
39
|
+
name?: string;
|
|
40
|
+
value?: string;
|
|
41
|
+
checked?: boolean | string;
|
|
42
|
+
disabled?: boolean | string;
|
|
43
|
+
color?: string;
|
|
44
|
+
size?: string;
|
|
45
|
+
}>;
|
|
46
|
+
'y-dialog': El<{
|
|
47
|
+
open?: boolean | string;
|
|
48
|
+
size?: string;
|
|
49
|
+
}>;
|
|
50
|
+
'y-drawer': El<{
|
|
51
|
+
open?: boolean | string;
|
|
52
|
+
position?: string;
|
|
53
|
+
}>;
|
|
54
|
+
'y-input': El<{
|
|
55
|
+
type?: string;
|
|
56
|
+
name?: string;
|
|
57
|
+
value?: string;
|
|
58
|
+
placeholder?: string;
|
|
59
|
+
disabled?: boolean | string;
|
|
60
|
+
required?: boolean | string;
|
|
61
|
+
color?: string;
|
|
62
|
+
size?: string;
|
|
63
|
+
label?: string;
|
|
64
|
+
}>;
|
|
65
|
+
'y-menu': El;
|
|
66
|
+
'y-panel': El<{ open?: boolean | string }>;
|
|
67
|
+
'y-panelbar': El;
|
|
68
|
+
'y-progress': El<{
|
|
69
|
+
value?: string | number;
|
|
70
|
+
max?: string | number;
|
|
71
|
+
color?: string;
|
|
72
|
+
size?: string;
|
|
73
|
+
}>;
|
|
74
|
+
'y-radio': El<{
|
|
75
|
+
name?: string;
|
|
76
|
+
value?: string;
|
|
77
|
+
checked?: boolean | string;
|
|
78
|
+
disabled?: boolean | string;
|
|
79
|
+
color?: string;
|
|
80
|
+
size?: string;
|
|
81
|
+
}>;
|
|
82
|
+
'y-select': El<{
|
|
83
|
+
name?: string;
|
|
84
|
+
value?: string;
|
|
85
|
+
disabled?: boolean | string;
|
|
86
|
+
multiple?: boolean | string;
|
|
87
|
+
color?: string;
|
|
88
|
+
size?: string;
|
|
89
|
+
placeholder?: string;
|
|
90
|
+
}>;
|
|
91
|
+
'y-slider': El<{
|
|
92
|
+
name?: string;
|
|
93
|
+
value?: string | number;
|
|
94
|
+
min?: string | number;
|
|
95
|
+
max?: string | number;
|
|
96
|
+
step?: string | number;
|
|
97
|
+
disabled?: boolean | string;
|
|
98
|
+
color?: string;
|
|
99
|
+
size?: string;
|
|
100
|
+
}>;
|
|
101
|
+
'y-switch': El<{
|
|
102
|
+
name?: string;
|
|
103
|
+
checked?: boolean | string;
|
|
104
|
+
disabled?: boolean | string;
|
|
105
|
+
color?: string;
|
|
106
|
+
size?: string;
|
|
107
|
+
}>;
|
|
108
|
+
'y-table': El;
|
|
109
|
+
'y-tabs': El;
|
|
110
|
+
'y-tag': El<{
|
|
111
|
+
color?: string;
|
|
112
|
+
size?: string;
|
|
113
|
+
removable?: boolean | string;
|
|
114
|
+
}>;
|
|
115
|
+
'y-theme': El<{
|
|
116
|
+
theme?: string;
|
|
117
|
+
color?: string;
|
|
118
|
+
mode?: string;
|
|
119
|
+
'theme-path'?: string;
|
|
120
|
+
}>;
|
|
121
|
+
'y-toast': El<{
|
|
122
|
+
open?: boolean | string;
|
|
123
|
+
color?: string;
|
|
124
|
+
position?: string;
|
|
125
|
+
duration?: string | number;
|
|
126
|
+
}>;
|
|
127
|
+
'y-tooltip': El<{
|
|
128
|
+
content?: string;
|
|
129
|
+
position?: string;
|
|
130
|
+
color?: string;
|
|
131
|
+
}>;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|