lightview
Version:
A reactive UI library with features of Bau, Juris, and HTMX plus safe LLM UI generation
185 lines (160 loc) • 9.85 kB
HTML
<!-- SEO-friendly SPA Shim -->
<script src="/lightview-router.js?base=/index.html"></script>
<div class="section">
<div class="section-content" style="max-width: 1000px;">
<h1>Styles</h1>
<p class="text-lg opacity-70 mb-6">
Lightview components use <strong>DaisyUI</strong> for styling — a complete component library
built on top of Tailwind CSS with 12+ themes and 50+ components.
</p>
<!-- (DaisyUI Styles removed to prevent global conflicts. Content below uses Shadow DOM isolation) -->
<!-- Include DaisyUI -->
<section class="mb-12">
<h2 class="text-2xl font-bold mb-4">Including DaisyUI</h2>
<p class="opacity-70 mb-4">DaisyUI and Tailwind pollute the global CSS space and redefine things like H1. By
default Lightview components isolate DaisyUI and Tailwind styles to Shadow DOM. If you would like to
use DaisyUI and Tailwind styles outside of Shadow DOM, add DaisyUI and Tailwind to your HTML:</p>
<pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto"><code><!-- DaisyUI + Tailwind CSS (CDN) -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script></code></pre>
</section>
<!-- Themes -->
<section class="mb-12">
<h2 class="text-2xl font-bold mb-4">Themes</h2>
<p class="opacity-70 mb-4">DaisyUI includes many built-in themes. You can try these themes by selecting a
theme using the dropdown in the top right corner of this page. This will impact the theme colors
globally across all components.</p>
</section>
<!-- Theme Colors Preview (Using Lightview Components) -->
<section class="mb-12">
<h2 class="text-2xl font-bold mb-4">Theme Colors</h2>
<p class="opacity-70 mb-4">Each theme provides semantic color variables. Here is how they look in the
current theme:</p>
<div id="theme-colors-preview" class="mb-6"></div>
</section>
<!-- Base Colors (Using Reactive Cards) -->
<section class="mb-12">
<h2 class="text-2xl font-bold mb-4">Base Colors</h2>
<p class="opacity-70 mb-4">Background and surface colors for consistent UI in the current theme:</p>
<div id="base-colors-preview" class="mb-6"></div>
</section>
<script type="module">
await import('/components/actions/button.js');
await import('/components/data-display/card.js');
// Wait for Lightview if loaded async
const init = () => {
if (!globalThis.Lightview) return setTimeout(init, 50);
const { tags, $ } = Lightview;
const { div, span, p, Button, Card } = tags;
// Render Theme Colors Buttons
$('#theme-colors-preview').content(
div({ style: 'display: flex; flex-wrap: wrap; gap: 0.5rem;' },
Button({ color: 'primary' }, 'Primary'),
Button({ color: 'secondary' }, 'Secondary'),
Button({ color: 'accent' }, 'Accent'),
Button({ color: 'neutral' }, 'Neutral'),
Button({ color: 'info' }, 'Info'),
Button({ color: 'success' }, 'Success'),
Button({ color: 'warning' }, 'Warning'),
Button({ color: 'error' }, 'Error')
)
);
// Render Base Colors using actual Card components
const cardStyle = 'text-align: center;';
$('#base-colors-preview').content(
div({ style: 'display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem;' },
Card({ bg: 'base-100', useShadow: true, class: 'border border-base-300' },
Card.Body({ style: 'align-items: center; text-align: center;' },
Card.Title({ style: 'font-size: 1rem;' }, 'base-100'),
p({ style: 'font-size: 0.875rem; opacity: 0.7;' }, 'Main Background')
)
),
Card({ bg: 'base-200', useShadow: true },
Card.Body({ style: 'align-items: center; text-align: center;' },
Card.Title({ style: 'font-size: 1rem;' }, 'base-200'),
p({ style: 'font-size: 0.875rem; opacity: 0.7;' }, 'Secondary')
)
),
Card({ bg: 'base-300', useShadow: true },
Card.Body({ style: 'align-items: center; text-align: center;' },
Card.Title({ style: 'font-size: 1rem;' }, 'base-300'),
p({ style: 'font-size: 0.875rem; opacity: 0.7;' }, 'Tertiary')
)
),
Card({ bg: 'base-content', class: 'text-base-100', useShadow: true },
Card.Body({ style: 'align-items: center; text-align: center;' },
Card.Title({ style: 'font-size: 1rem;' }, 'base-content'),
p({ style: 'font-size: 0.875rem; opacity: 0.7;' }, 'Content/Text')
)
)
)
);
};
init();
</script>
<!-- Registering Stylesheets -->
<section class="mb-12">
<h2 class="text-2xl font-bold mb-4">Registering Stylesheets</h2>
<p class="opacity-70 mb-4">
When using Shadow DOM, global styles are not inherited. <code>LightviewX</code> provides methods to
register stylesheets that can be adopted by components or applied globally to all components.
</p>
<h3 class="text-xl font-bold mb-2">Named Stylesheets</h3>
<p class="opacity-70 mb-4">
Register a stylesheet by name, and components can then request it by ID. You can register styles from a
string, a URL, or an existing <code><style></code> tag.
</p>
<pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto mb-6"><code>// From a CSS string
LightviewX.registerStyleSheet('custom-vars', ':host { --my-color: #ff00ff; }');
// From a URL
LightviewX.registerStyleSheet('/styles/extra.css');
// From an existing style tag in the document
LightviewX.registerStyleSheet('#global-overrides');</code></pre>
<h3 class="text-xl font-bold mb-2">Global Theme Stylesheets</h3>
<p class="opacity-70 mb-4">
To apply a stylesheet to every Shadow DOM component automatically (like a global theme override),
use <code>registerThemeSheet</code>.
</p>
<pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto mb-6"><code>// This sheet will be adopted by all components
LightviewX.registerThemeSheet('/styles/theme-overrides.css');</code></pre>
<p class="opacity-70">
For more details on these functions, see the <a href="../api/" class="link">API Reference</a>.
</p>
</section>
<!-- Controlling Themes -->
<section class="mb-12">
<h2 class="text-2xl font-bold mb-4">Controlling Themes Programmatically</h2>
<p class="opacity-70 mb-4">You can control the active theme globally using <code>LightviewX</code>.</p>
<h3 class="text-xl font-bold mb-2">Setting the Theme</h3>
<p class="opacity-70 mb-4">Use <code>setTheme</code> to change the active theme. This updates the
<code>themeSignal</code> and persists the choice to LocalStorage.
</p>
<pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto mb-6"><code>// Set theme to 'dark'
LightviewX.setTheme('dark');
// Set theme to 'cyberpunk'
LightviewX.setTheme('cyberpunk');</code></pre>
<h3 class="text-xl font-bold mb-2">Reactive Theme Signal</h3>
<p class="opacity-70 mb-4">Access the current theme reactively using <code>LightviewX.themeSignal</code>.
</p>
<pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto"><code>const { themeSignal } = LightviewX;
// Build a reactive component that logs the theme
const ThemeLogger = () => {
return div({}, () => `Current theme is: ${themeSignal.value}`);
};</code></pre>
</section>
<!-- DaisyUI Documentation Link -->
<div class="alert alert-info">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
class="h-6 w-6 shrink-0 stroke-current">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div>
<h3 class="font-bold">Full DaisyUI Documentation</h3>
<div class="text-sm">For complete styling options, themes, and utilities, visit the
<a href="https://daisyui.com" target="_blank" rel="noopener" class="link">DaisyUI documentation</a>.
</div>
</div>
</div>
</div>
</div>