@strands.gg/lumen 3.0.10 → 3.0.11
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/LumenUIPlugin-C2e4XNKd.es.js +30984 -0
- package/dist/LumenUIPlugin-D0Xfwrpw.cjs.js +145 -0
- package/dist/index.cjs.js +1 -1
- package/dist/index.es.js +1 -1
- package/dist/lumen.css +1 -1
- package/dist/vite.cjs.js +1 -1
- package/dist/vite.es.js +1 -1
- package/dist/vue/utils/fontPreloader.d.ts +1 -1
- package/dist/webcomponents/define-element.d.ts +1 -1
- package/package.json +1 -1
package/dist/vite.cjs.js
CHANGED
|
@@ -14,4 +14,4 @@
|
|
|
14
14
|
--lumen-custom-950: color-mix(in srgb, ${e} 25%, black);
|
|
15
15
|
}`}</style>`;return n.replace("</head>",` ${o}
|
|
16
16
|
</head>`)}return n}},async transform(n,l){return s&&(l.endsWith("main.ts")||l.endsWith("main.js"))&&!n.includes("@strands.gg/lumen/style.css")?{code:`import '@strands.gg/lumen/style.css'
|
|
17
|
-
${n}`,map:null}:null}}}function m(r={}){return{install(s){Promise.resolve().then(()=>require("./LumenUIPlugin-
|
|
17
|
+
${n}`,map:null}:null}}}function m(r={}){return{install(s){Promise.resolve().then(()=>require("./LumenUIPlugin-D0Xfwrpw.cjs.js")).then(e=>e.LumenUIPlugin$1).then(e=>{const u=e.default;s.use(u)}),typeof window<"u"&&(window.__LUMEN_CONFIG__=r)}}}exports.LumenUI=t;exports.LumenVitePlugin=t;exports.createLumenUI=m;exports.default=t;exports.lumenUI=t;
|
package/dist/vite.es.js
CHANGED
|
@@ -55,7 +55,7 @@ ${e}`,
|
|
|
55
55
|
function m(t = {}) {
|
|
56
56
|
return {
|
|
57
57
|
install(s) {
|
|
58
|
-
import("./LumenUIPlugin-
|
|
58
|
+
import("./LumenUIPlugin-C2e4XNKd.es.js").then((n) => n.M).then((n) => {
|
|
59
59
|
const r = n.default;
|
|
60
60
|
s.use(r);
|
|
61
61
|
}), typeof window < "u" && (window.__LUMEN_CONFIG__ = t);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Component } from 'vue';
|
|
2
|
-
export declare const baseStyles = "\n :host {\n /* Typography */\n --lumen-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif;\n --lumen-font-mono: \"Courier New\", Courier, ui-monospace, SFMono-Regular, \"SF Mono\", Consolas, \"Liberation Mono\", Menlo, monospace;\n\n /* Brand Colors - inherit from document or use defaults */\n --lumen-accent: var(--lumen-custom-accent, #EA00A8);\n --lumen-brand-accent: var(--lumen-custom-accent, #EA00A8);\n --lumen-brand-50: var(--lumen-custom-50, color-mix(in srgb, var(--lumen-accent) 10%, white));\n --lumen-brand-100: var(--lumen-custom-100, color-mix(in srgb, var(--lumen-accent) 20%, white));\n --lumen-brand-200: var(--lumen-custom-200, color-mix(in srgb, var(--lumen-accent) 30%, white));\n --lumen-brand-300: var(--lumen-custom-300, color-mix(in srgb, var(--lumen-accent) 40%, white));\n --lumen-brand-400: var(--lumen-custom-400, color-mix(in srgb, var(--lumen-accent) 70%, white));\n --lumen-brand-500: var(--lumen-custom-500, var(--lumen-accent));\n --lumen-brand-600: var(--lumen-custom-600, color-mix(in srgb, var(--lumen-accent) 85%, black));\n --lumen-brand-700: var(--lumen-custom-700, color-mix(in srgb, var(--lumen-accent) 70%, black));\n --lumen-brand-800: var(--lumen-custom-800, color-mix(in srgb, var(--lumen-accent) 55%, black));\n --lumen-brand-900: var(--lumen-custom-900, color-mix(in srgb, var(--lumen-accent) 40%, black));\n --lumen-brand-950: var(--lumen-custom-950, color-mix(in srgb, var(--lumen-accent) 25%, black));\n\n /* Neutral Colors */\n --lumen-neutral-50: #fafafa;\n --lumen-neutral-100: #f5f5f5;\n --lumen-neutral-200: #e5e5e5;\n --lumen-neutral-300: #d4d4d4;\n --lumen-neutral-400: #a3a3a3;\n --lumen-neutral-500: #737373;\n --lumen-neutral-600: #525252;\n --lumen-neutral-700: #404040;\n --lumen-neutral-800: #262626;\n --lumen-neutral-900: #171717;\n --lumen-neutral-950: #0a0a0a;\n\n /* Gray Colors */\n --lumen-gray-50: #f9fafb;\n --lumen-gray-100: #f3f4f6;\n --lumen-gray-200: #e5e7eb;\n --lumen-gray-300: #d1d5db;\n --lumen-gray-400: #9ca3af;\n --lumen-gray-500: #6b7280;\n --lumen-gray-600: #4b5563;\n --lumen-gray-700: #374151;\n --lumen-gray-800: #1f2937;\n --lumen-gray-900: #111827;\n --lumen-gray-950: #030712;\n\n /* Status Colors */\n --lumen-red-500: #ef4444;\n --lumen-red-600: #dc2626;\n --lumen-green-500: #22c55e;\n --lumen-green-600: #16a34a;\n --lumen-yellow-500: #f97316;\n --lumen-yellow-600: #ea580c;\n\n /* Spacing Scale */\n --lumen-space-0: 0;\n --lumen-space-1: 0.25rem;\n --lumen-space-2: 0.5rem;\n --lumen-space-3: 0.75rem;\n --lumen-space-4: 1rem;\n --lumen-space-5: 1.25rem;\n --lumen-space-6: 1.5rem;\n --lumen-space-8: 2rem;\n\n /* Border Radius */\n --lumen-radius-none: 0;\n --lumen-radius-sm: 0.125rem;\n --lumen-radius-md: 0.375rem;\n --lumen-radius-lg: 0.5rem;\n --lumen-radius-xl: 0.75rem;\n --lumen-radius-2xl: 1rem;\n --lumen-radius-full: 9999px;\n\n /* Transition Timings */\n --lumen-transition-fast: 0.15s;\n --lumen-transition-duration: 0.25s;\n --animation-duration: 0.25s;\n\n /* Theme Colors (Light Mode Default) */\n --lumen-bg-primary: #ffffff;\n --lumen-bg-secondary: #f9fafb;\n --lumen-bg-tertiary: #f3f4f6;\n --lumen-text-primary: #111827;\n --lumen-text-secondary: #6b7280;\n --lumen-text-tertiary: #9ca3af;\n --lumen-border-primary: #e5e7eb;\n --lumen-border-secondary: #d1d5db;\n --lumen-border-tertiary: #9ca3af;\n\n /* Button Variables */\n --lumen-button-primary-background: var(--lumen-brand-500);\n --lumen-button-primary-background-hover: var(--lumen-brand-600);\n --lumen-button-primary-text: #ffffff;\n --lumen-button-primary-border: transparent;\n\n --lumen-button-secondary-background: #f0f0f0;\n --lumen-button-secondary-background-hover: #e2e2e2;\n --lumen-button-secondary-text: #000000;\n --lumen-button-secondary-border: #f0f0f0;\n\n --lumen-button-ghost-background: transparent;\n --lumen-button-ghost-background-hover: var(--lumen-bg-secondary);\n --lumen-button-ghost-text: var(--lumen-text-primary);\n --lumen-button-ghost-border: transparent;\n\n --lumen-button-outline-background: transparent;\n --lumen-button-outline-background-hover: var(--lumen-brand-50);\n --lumen-button-outline-text: var(--lumen-brand-500);\n --lumen-button-outline-border: var(--lumen-brand-500);\n\n /* Input Variables */\n --lumen-input-background: var(--lumen-bg-primary);\n --lumen-input-background-focus: var(--lumen-bg-primary);\n --lumen-input-text: var(--lumen-text-primary);\n --lumen-input-placeholder: var(--lumen-text-tertiary);\n --lumen-input-border: var(--lumen-border-primary);\n --lumen-input-border-focus: var(--lumen-accent, #EA00A8);\n --lumen-input-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--lumen-accent, #EA00A8) 10%, transparent);\n\n /* Card Variables */\n --lumen-card-background: var(--lumen-bg-primary);\n --lumen-card-border: var(--lumen-border-primary);\n --lumen-card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);\n\n /* Alert Variables */\n --lumen-alert-success-background: #f0fdf4;\n --lumen-alert-success-text: #15803d;\n --lumen-alert-success-border: #bbf7d0;\n\n --lumen-alert-error-background: #fef2f2;\n --lumen-alert-error-text: #dc2626;\n --lumen-alert-error-border: #fecaca;\n\n --lumen-alert-warning-background: #fefce8;\n --lumen-alert-warning-text: #ca8a04;\n --lumen-alert-warning-border: #fde047;\n\n --lumen-alert-info-background: #eff6ff;\n --lumen-alert-info-text: #2563eb;\n --lumen-alert-info-border: #bfdbfe;\n\n /* Toggle Variables */\n --lumen-toggle-background: var(--lumen-border-secondary);\n --lumen-toggle-background-active: var(--lumen-brand-500);\n --lumen-toggle-thumb: #ffffff;\n\n /* Tabs Variables */\n --lumen-tabs-background: var(--lumen-bg-secondary);\n --lumen-tabs-border: var(--lumen-border-primary);\n --lumen-tabs-button-text: var(--lumen-text-secondary);\n --lumen-tabs-button-text-active: var(--lumen-text-primary);\n --lumen-tabs-button-background: var(--lumen-bg-primary);\n --lumen-tabs-button-background-hover: var(--lumen-bg-secondary);\n --lumen-tabs-indicator: var(--lumen-brand-500);\n\n /* Divider Variables */\n --lumen-divider-color: var(--lumen-border-primary);\n --lumen-divider-text: var(--lumen-text-secondary);\n\n /* Modal Variables */\n --lumen-modal-background: var(--lumen-bg-primary);\n --lumen-modal-overlay: rgba(0, 0, 0, 0.5);\n --lumen-modal-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n\n /* Table Variables */\n --lumen-table-background: var(--lumen-bg-primary);\n --lumen-table-header-background: var(--lumen-bg-secondary);\n --lumen-table-header-text: var(--lumen-text-primary);\n --lumen-table-row-hover: var(--lumen-bg-secondary);\n --lumen-table-border: var(--lumen-border-primary);\n --lumen-table-cell-text: var(--lumen-text-primary);\n\n /* ColorPicker Variables */\n --lumen-colorpicker-background: var(--lumen-bg-primary);\n --lumen-colorpicker-border: var(--lumen-border-primary);\n --lumen-colorpicker-text: var(--lumen-text-primary);\n --lumen-colorpicker-input-background: var(--lumen-bg-secondary);\n --lumen-colorpicker-button-hover: var(--lumen-bg-secondary);\n --lumen-colorpicker-contrast-background: var(--lumen-bg-secondary);\n\n /* AvatarEditor Variables */\n --lumen-avatar-background: var(--lumen-bg-primary);\n --lumen-avatar-border: var(--lumen-border-primary);\n --lumen-avatar-button-background: var(--lumen-bg-secondary);\n --lumen-avatar-button-hover: var(--lumen-bg-tertiary);\n --lumen-avatar-text: var(--lumen-text-primary);\n\n /* Display as inline-block by default */\n display: inline-block;\n }\n\n /* Dark mode support - detect from document */\n :host-context([data-theme=\"dark\"]) {\n --lumen-bg-primary: #0f172a;\n --lumen-bg-secondary: #1e293b;\n --lumen-bg-tertiary: #334155;\n --lumen-text-primary: #f8fafc;\n --lumen-text-secondary: #cbd5e1;\n --lumen-text-tertiary: #94a3b8;\n --lumen-border-primary: #334155;\n --lumen-border-secondary: #475569;\n --lumen-border-tertiary: #64748b;\n\n --lumen-button-secondary-background: var(--lumen-bg-secondary);\n --lumen-button-secondary-background-hover: var(--lumen-bg-tertiary);\n --lumen-button-secondary-text: var(--lumen-text-primary);\n --lumen-button-secondary-border: var(--lumen-bg-secondary);\n\n --lumen-button-ghost-background-hover: var(--lumen-bg-tertiary);\n\n --lumen-button-outline-background-hover: var(--lumen-brand-950);\n --lumen-button-outline-text: var(--lumen-brand-400);\n --lumen-button-outline-border: var(--lumen-brand-400);\n\n --lumen-alert-success-background: #0f2a1a;\n --lumen-alert-success-text: #4ade80;\n --lumen-alert-success-border: #16a34a;\n\n --lumen-alert-error-background: #2a0f0f;\n --lumen-alert-error-text: #f87171;\n --lumen-alert-error-border: #dc2626;\n\n --lumen-alert-warning-background: #2a2508;\n --lumen-alert-warning-text: #fbbf24;\n --lumen-alert-warning-border: #eab308;\n\n --lumen-alert-info-background: #0f1a2a;\n --lumen-alert-info-text: #60a5fa;\n --lumen-alert-info-border: #3b82f6;\n\n --lumen-toggle-background: var(--lumen-border-tertiary);\n\n --lumen-tabs-background: var(--lumen-bg-tertiary);\n --lumen-tabs-button-background: var(--lumen-bg-secondary);\n --lumen-tabs-button-background-hover: var(--lumen-bg-primary);\n\n --lumen-input-shadow-focus: 0 0 0 3px rgba(234, 0, 168, 0.2);\n --lumen-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);\n\n --lumen-modal-background: var(--lumen-bg-secondary);\n --lumen-modal-overlay: rgba(0, 0, 0, 0.7);\n --lumen-modal-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);\n\n --lumen-table-row-hover: var(--lumen-bg-tertiary);\n\n --lumen-colorpicker-background: var(--lumen-bg-secondary);\n --lumen-colorpicker-text: var(--lumen-text-primary);\n --lumen-colorpicker-input-background: var(--lumen-bg-tertiary);\n --lumen-colorpicker-button-hover: var(--lumen-bg-tertiary);\n --lumen-colorpicker-contrast-background: var(--lumen-bg-primary);\n\n --lumen-avatar-button-background: var(--lumen-bg-tertiary);\n }\n\n /* Base reset for Shadow DOM content */\n *, *::before, *::after {\n box-sizing: border-box;\n }\n";
|
|
2
|
+
export declare const baseStyles = "\n :host {\n /* Typography */\n --lumen-font-sans: 'Satoshi', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif;\n --lumen-font-mono: \"Courier New\", Courier, ui-monospace, SFMono-Regular, \"SF Mono\", Consolas, \"Liberation Mono\", Menlo, monospace;\n\n /* Brand Colors - inherit from document or use defaults */\n --lumen-accent: var(--lumen-custom-accent, #EA00A8);\n --lumen-brand-accent: var(--lumen-custom-accent, #EA00A8);\n --lumen-brand-50: var(--lumen-custom-50, color-mix(in srgb, var(--lumen-accent) 10%, white));\n --lumen-brand-100: var(--lumen-custom-100, color-mix(in srgb, var(--lumen-accent) 20%, white));\n --lumen-brand-200: var(--lumen-custom-200, color-mix(in srgb, var(--lumen-accent) 30%, white));\n --lumen-brand-300: var(--lumen-custom-300, color-mix(in srgb, var(--lumen-accent) 40%, white));\n --lumen-brand-400: var(--lumen-custom-400, color-mix(in srgb, var(--lumen-accent) 70%, white));\n --lumen-brand-500: var(--lumen-custom-500, var(--lumen-accent));\n --lumen-brand-600: var(--lumen-custom-600, color-mix(in srgb, var(--lumen-accent) 85%, black));\n --lumen-brand-700: var(--lumen-custom-700, color-mix(in srgb, var(--lumen-accent) 70%, black));\n --lumen-brand-800: var(--lumen-custom-800, color-mix(in srgb, var(--lumen-accent) 55%, black));\n --lumen-brand-900: var(--lumen-custom-900, color-mix(in srgb, var(--lumen-accent) 40%, black));\n --lumen-brand-950: var(--lumen-custom-950, color-mix(in srgb, var(--lumen-accent) 25%, black));\n\n /* Neutral Colors */\n --lumen-neutral-50: #fafafa;\n --lumen-neutral-100: #f5f5f5;\n --lumen-neutral-200: #e5e5e5;\n --lumen-neutral-300: #d4d4d4;\n --lumen-neutral-400: #a3a3a3;\n --lumen-neutral-500: #737373;\n --lumen-neutral-600: #525252;\n --lumen-neutral-700: #404040;\n --lumen-neutral-800: #262626;\n --lumen-neutral-900: #171717;\n --lumen-neutral-950: #0a0a0a;\n\n /* Gray Colors */\n --lumen-gray-50: #f9fafb;\n --lumen-gray-100: #f3f4f6;\n --lumen-gray-200: #e5e7eb;\n --lumen-gray-300: #d1d5db;\n --lumen-gray-400: #9ca3af;\n --lumen-gray-500: #6b7280;\n --lumen-gray-600: #4b5563;\n --lumen-gray-700: #374151;\n --lumen-gray-800: #1f2937;\n --lumen-gray-900: #111827;\n --lumen-gray-950: #030712;\n\n /* Status Colors */\n --lumen-red-500: #ef4444;\n --lumen-red-600: #dc2626;\n --lumen-green-500: #22c55e;\n --lumen-green-600: #16a34a;\n --lumen-yellow-500: #f97316;\n --lumen-yellow-600: #ea580c;\n\n /* Spacing Scale */\n --lumen-space-0: 0;\n --lumen-space-1: 0.25rem;\n --lumen-space-2: 0.5rem;\n --lumen-space-3: 0.75rem;\n --lumen-space-4: 1rem;\n --lumen-space-5: 1.25rem;\n --lumen-space-6: 1.5rem;\n --lumen-space-8: 2rem;\n\n /* Border Radius */\n --lumen-radius-none: 0;\n --lumen-radius-sm: 0.125rem;\n --lumen-radius-md: 0.375rem;\n --lumen-radius-lg: 0.5rem;\n --lumen-radius-xl: 0.75rem;\n --lumen-radius-2xl: 1rem;\n --lumen-radius-full: 9999px;\n\n /* Transition Timings */\n --lumen-transition-fast: 0.15s;\n --lumen-transition-duration: 0.25s;\n --animation-duration: 0.25s;\n\n /* Theme Colors (Light Mode Default) */\n --lumen-bg-primary: #ffffff;\n --lumen-bg-secondary: #f9fafb;\n --lumen-bg-tertiary: #f3f4f6;\n --lumen-text-primary: #111827;\n --lumen-text-secondary: #6b7280;\n --lumen-text-tertiary: #9ca3af;\n --lumen-border-primary: #e5e7eb;\n --lumen-border-secondary: #d1d5db;\n --lumen-border-tertiary: #9ca3af;\n\n /* Button Variables */\n --lumen-button-primary-background: var(--lumen-brand-500);\n --lumen-button-primary-background-hover: var(--lumen-brand-600);\n --lumen-button-primary-text: #ffffff;\n --lumen-button-primary-border: transparent;\n\n --lumen-button-secondary-background: #f0f0f0;\n --lumen-button-secondary-background-hover: #e2e2e2;\n --lumen-button-secondary-text: #000000;\n --lumen-button-secondary-border: #f0f0f0;\n\n --lumen-button-ghost-background: transparent;\n --lumen-button-ghost-background-hover: var(--lumen-bg-secondary);\n --lumen-button-ghost-text: var(--lumen-text-primary);\n --lumen-button-ghost-border: transparent;\n\n --lumen-button-outline-background: transparent;\n --lumen-button-outline-background-hover: var(--lumen-brand-50);\n --lumen-button-outline-text: var(--lumen-brand-500);\n --lumen-button-outline-border: var(--lumen-brand-500);\n\n /* Input Variables */\n --lumen-input-background: var(--lumen-bg-primary);\n --lumen-input-background-focus: var(--lumen-bg-primary);\n --lumen-input-text: var(--lumen-text-primary);\n --lumen-input-placeholder: var(--lumen-text-tertiary);\n --lumen-input-border: var(--lumen-border-primary);\n --lumen-input-border-focus: var(--lumen-accent, #EA00A8);\n --lumen-input-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--lumen-accent, #EA00A8) 10%, transparent);\n\n /* Card Variables */\n --lumen-card-background: var(--lumen-bg-primary);\n --lumen-card-border: var(--lumen-border-primary);\n --lumen-card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);\n\n /* Alert Variables */\n --lumen-alert-success-background: #f0fdf4;\n --lumen-alert-success-text: #15803d;\n --lumen-alert-success-border: #bbf7d0;\n\n --lumen-alert-error-background: #fef2f2;\n --lumen-alert-error-text: #dc2626;\n --lumen-alert-error-border: #fecaca;\n\n --lumen-alert-warning-background: #fefce8;\n --lumen-alert-warning-text: #ca8a04;\n --lumen-alert-warning-border: #fde047;\n\n --lumen-alert-info-background: #eff6ff;\n --lumen-alert-info-text: #2563eb;\n --lumen-alert-info-border: #bfdbfe;\n\n /* Toggle Variables */\n --lumen-toggle-background: var(--lumen-border-secondary);\n --lumen-toggle-background-active: var(--lumen-brand-500);\n --lumen-toggle-thumb: #ffffff;\n\n /* Tabs Variables */\n --lumen-tabs-background: var(--lumen-bg-secondary);\n --lumen-tabs-border: var(--lumen-border-primary);\n --lumen-tabs-button-text: var(--lumen-text-secondary);\n --lumen-tabs-button-text-active: var(--lumen-text-primary);\n --lumen-tabs-button-background: var(--lumen-bg-primary);\n --lumen-tabs-button-background-hover: var(--lumen-bg-secondary);\n --lumen-tabs-indicator: var(--lumen-brand-500);\n\n /* Divider Variables */\n --lumen-divider-color: var(--lumen-border-primary);\n --lumen-divider-text: var(--lumen-text-secondary);\n\n /* Modal Variables */\n --lumen-modal-background: var(--lumen-bg-primary);\n --lumen-modal-overlay: rgba(0, 0, 0, 0.5);\n --lumen-modal-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n\n /* Table Variables */\n --lumen-table-background: var(--lumen-bg-primary);\n --lumen-table-header-background: var(--lumen-bg-secondary);\n --lumen-table-header-text: var(--lumen-text-primary);\n --lumen-table-row-hover: var(--lumen-bg-secondary);\n --lumen-table-border: var(--lumen-border-primary);\n --lumen-table-cell-text: var(--lumen-text-primary);\n\n /* ColorPicker Variables */\n --lumen-colorpicker-background: var(--lumen-bg-primary);\n --lumen-colorpicker-border: var(--lumen-border-primary);\n --lumen-colorpicker-text: var(--lumen-text-primary);\n --lumen-colorpicker-input-background: var(--lumen-bg-secondary);\n --lumen-colorpicker-button-hover: var(--lumen-bg-secondary);\n --lumen-colorpicker-contrast-background: var(--lumen-bg-secondary);\n\n /* AvatarEditor Variables */\n --lumen-avatar-background: var(--lumen-bg-primary);\n --lumen-avatar-border: var(--lumen-border-primary);\n --lumen-avatar-button-background: var(--lumen-bg-secondary);\n --lumen-avatar-button-hover: var(--lumen-bg-tertiary);\n --lumen-avatar-text: var(--lumen-text-primary);\n\n /* Display as inline-block by default */\n display: inline-block;\n }\n\n /* Dark mode support - detect from document */\n :host-context([data-theme=\"dark\"]) {\n --lumen-bg-primary: #0f172a;\n --lumen-bg-secondary: #1e293b;\n --lumen-bg-tertiary: #334155;\n --lumen-text-primary: #f8fafc;\n --lumen-text-secondary: #cbd5e1;\n --lumen-text-tertiary: #94a3b8;\n --lumen-border-primary: #334155;\n --lumen-border-secondary: #475569;\n --lumen-border-tertiary: #64748b;\n\n --lumen-button-secondary-background: var(--lumen-bg-secondary);\n --lumen-button-secondary-background-hover: var(--lumen-bg-tertiary);\n --lumen-button-secondary-text: var(--lumen-text-primary);\n --lumen-button-secondary-border: var(--lumen-bg-secondary);\n\n --lumen-button-ghost-background-hover: var(--lumen-bg-tertiary);\n\n --lumen-button-outline-background-hover: var(--lumen-brand-950);\n --lumen-button-outline-text: var(--lumen-brand-400);\n --lumen-button-outline-border: var(--lumen-brand-400);\n\n --lumen-alert-success-background: #0f2a1a;\n --lumen-alert-success-text: #4ade80;\n --lumen-alert-success-border: #16a34a;\n\n --lumen-alert-error-background: #2a0f0f;\n --lumen-alert-error-text: #f87171;\n --lumen-alert-error-border: #dc2626;\n\n --lumen-alert-warning-background: #2a2508;\n --lumen-alert-warning-text: #fbbf24;\n --lumen-alert-warning-border: #eab308;\n\n --lumen-alert-info-background: #0f1a2a;\n --lumen-alert-info-text: #60a5fa;\n --lumen-alert-info-border: #3b82f6;\n\n --lumen-toggle-background: var(--lumen-border-tertiary);\n\n --lumen-tabs-background: var(--lumen-bg-tertiary);\n --lumen-tabs-button-background: var(--lumen-bg-secondary);\n --lumen-tabs-button-background-hover: var(--lumen-bg-primary);\n\n --lumen-input-shadow-focus: 0 0 0 3px rgba(234, 0, 168, 0.2);\n --lumen-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);\n\n --lumen-modal-background: var(--lumen-bg-secondary);\n --lumen-modal-overlay: rgba(0, 0, 0, 0.7);\n --lumen-modal-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);\n\n --lumen-table-row-hover: var(--lumen-bg-tertiary);\n\n --lumen-colorpicker-background: var(--lumen-bg-secondary);\n --lumen-colorpicker-text: var(--lumen-text-primary);\n --lumen-colorpicker-input-background: var(--lumen-bg-tertiary);\n --lumen-colorpicker-button-hover: var(--lumen-bg-tertiary);\n --lumen-colorpicker-contrast-background: var(--lumen-bg-primary);\n\n --lumen-avatar-button-background: var(--lumen-bg-tertiary);\n }\n\n /* Base reset for Shadow DOM content */\n *, *::before, *::after {\n box-sizing: border-box;\n }\n";
|
|
3
3
|
/**
|
|
4
4
|
* Creates and registers a custom element from a Vue component
|
|
5
5
|
*
|