bref-ui 0.0.2 → 0.0.4

package/dist/internal/demo-icon-button.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import IconButton from '../base/button/icon-button.svelte';
+	import DemoSection from './demo-section.svelte';
+	import DemoCodeSnippet from './demo-code-snippet.svelte';
+</script>
+
+<DemoSection
+	title="Icon Buttons"
+	id="buttons"
+	description="Icon buttons with customizable size, color, variant, and shape."
+>
+	<h3>Variants</h3>
+	<div>
+		<IconButton name="add" variant="filled" onClick={() => {}} />
+		<IconButton name="add" variant="soft" onClick={() => {}} />
+		<IconButton name="add" variant="ghost" onClick={() => {}} />
+	</div>
+	<h3>Colors</h3>
+	<div>
+		<IconButton name="favorite" color="primary" onClick={() => {}} />
+		<IconButton name="favorite" color="secondary" onClick={() => {}} />
+		<IconButton name="favorite" color="success" onClick={() => {}} />
+		<IconButton name="favorite" color="warning" onClick={() => {}} />
+		<IconButton name="favorite" color="danger" onClick={() => {}} />
+		<IconButton name="favorite" color="info" onClick={() => {}} />
+		<IconButton name="favorite" color="foreground" onClick={() => {}} />
+		<IconButton name="favorite" color="background" onClick={() => {}} />
+	</div>
+	<h3>Sizes</h3>
+	<div>
+		<IconButton name="settings" size="x-small" onClick={() => {}} />
+		<IconButton name="settings" size="small" onClick={() => {}} />
+		<IconButton name="settings" size="medium" onClick={() => {}} />
+		<IconButton name="settings" size="large" onClick={() => {}} />
+		<IconButton name="settings" size="x-large" onClick={() => {}} />
+	</div>
+	<h3>Rounded</h3>
+	<div>
+		<IconButton name="close" rounded onClick={() => {}} />
+		<IconButton name="close" rounded variant="soft" onClick={() => {}} />
+		<IconButton name="close" rounded variant="ghost" onClick={() => {}} />
+	</div>
+	<h3>Filled Icons</h3>
+	<div>
+		<IconButton name="star" filled onClick={() => {}} />
+		<IconButton name="star" filled variant="soft" color="warning" onClick={() => {}} />
+		<IconButton name="star" filled variant="ghost" color="warning" onClick={() => {}} />
+	</div>
+	<h3>Disabled</h3>
+	<div>
+		<IconButton name="edit" disabled onClick={() => {}} />
+		<IconButton name="edit" disabled variant="soft" onClick={() => {}} />
+		<IconButton name="edit" disabled variant="ghost" onClick={() => {}} />
+	</div>
+	<h3>Usage Example</h3>
+	<DemoCodeSnippet
+		snippet={`<IconButton
+  name="favorite"
+  filled={true}
+  color="danger"
+  variant="soft"
+  size="large"
+  rounded
+  onClick={() => handleClick()}
+/>`}
+	/>
+</DemoSection>
+
+<style>
+	div {
+		display: flex;
+		gap: 1rem;
+		align-items: center;
+		justify-content: center;
+	}
+</style>

package/dist/internal/demo-icon-button.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DemoIconButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DemoIconButton = InstanceType<typeof DemoIconButton>;
+export default DemoIconButton;

package/dist/internal/demo-theming.svelte

@@ -0,0 +1,257 @@
+<script lang="ts">
+	import {
+		initializeThemeMode,
+		toggleThemeMode,
+		DEFAULT_THEME,
+		type ThemeMode
+	} from '../base/theme/index.js';
+	import Button from '../base/button/button.svelte';
+	import DemoSection from './demo-section.svelte';
+	import DemoCodeSnippet from './demo-code-snippet.svelte';
+	import { untrack } from 'svelte';
+
+	let themeMode: ThemeMode = $state('light');
+
+	$effect.pre(() => {
+		untrack(() => {
+			themeMode = initializeThemeMode();
+		});
+	});
+
+	const onThemeToggle = () => {
+		const newMode = themeMode === 'dark' ? 'light' : 'dark';
+		toggleThemeMode(newMode);
+		themeMode = newMode;
+	};
+
+	const paletteColors = Object.entries(DEFAULT_THEME.paletteHex) as [string, string][];
+	const surfaceColors = ['background', 'foreground'] as const;
+
+	const usageSnippet = `<script lang="ts">
+  import { Theme } from 'bref/base/theme';
+<\/script>
+
+<!-- Use default theme -->
+<Theme />
+
+<!-- Or customize with your own colors -->
+<Theme
+  paletteHex={{
+    primary: '#6366f1',
+    secondary: '#ec4899',
+    success: '#22c55e',
+    warning: '#f59e0b',
+    danger: '#ef4444',
+    info: '#3b82f6'
+  }}
+  surfaceHex={{
+    background: '#f8fafc',
+    foreground: '#1e293b'
+  }}
+  border={{ widthPx: 1, radiusRem: 0.5, colorHex: '#e2e8f0' }}
+  spacingRem={1}
+/>`;
+</script>
+
+{#snippet colorCard(name: string, isSurface: boolean = false)}
+	<div class="color-card">
+		<div class="color-header">{name}</div>
+		<div class="color-variants">
+			{#each ['base', 'soft', 'saturated', 'contrast'] as variant}
+				{@const cssVar = variant === 'base' ? `--color-${name}` : `--color-${name}-${variant}`}
+				{@const contrastVar =
+					variant === 'contrast' ? `--color-${name}` : `--color-${name}-contrast`}
+				<div class="color-swatch" style="background: var({cssVar}); color: var({contrastVar})">
+					<span class="swatch-label">{variant}</span>
+				</div>
+			{/each}
+		</div>
+	</div>
+{/snippet}
+
+<DemoSection title="Theming" id="theming">
+	<p class="intro">
+		The theme system provides a flexible, token-based approach to styling with automatic light/dark
+		mode support.
+	</p>
+
+	<!-- Theme Mode Toggle -->
+
+	<h3>Theme Mode</h3>
+	<p class="description">
+		Toggle between light and dark modes. The system respects <code>prefers-color-scheme</code> by default
+		and persists your choice in localStorage.
+	</p>
+	<Button
+		icon={{ name: themeMode === 'dark' ? 'light_mode' : 'dark_mode' }}
+		label="Toggle to {themeMode === 'dark' ? 'light' : 'dark'}"
+		onClick={onThemeToggle}
+	/>
+
+	<!-- Palette Colors -->
+
+	<h3>Palette Colors</h3>
+	<p class="description">
+		Semantic colors that remain consistent across light and dark modes. Each color generates three
+		variants: <strong>soft</strong>, <strong>saturated</strong>, and
+		<strong>contrast</strong>.
+	</p>
+	<div class="color-grid">
+		{#each paletteColors as [name]}
+			{@render colorCard(name)}
+		{/each}
+	</div>
+
+	<!-- Surface Colors -->
+
+	<h3>Surface Colors</h3>
+	<p class="description">
+		Background and foreground colors that automatically swap between light and dark modes. These
+		define the base canvas and text colors.
+	</p>
+	<div class="color-grid surface-grid">
+		{#each surfaceColors as name}
+			{@render colorCard(name, true)}
+		{/each}
+	</div>
+
+	<!-- Token Generation Logic -->
+
+	<h3>Token Generation Logic</h3>
+	<ul class="bullet-list">
+		<li>
+			<strong>Soft:</strong> <code>lighten(25%) + desaturate(10%)</code> — A lighter, muted variant ideal
+			for backgrounds when using the base as foreground.
+		</li>
+		<li>
+			<strong>Saturated:</strong> <code>darken(15%) + saturate(10%)</code> — A deeper, more intense shade
+			for emphasis or active states.
+		</li>
+		<li>
+			<strong>Contrast:</strong> <code>isDark() ? white : black</code> — Automatically picks black or
+			white for text/icons ensuring WCAG compliance.
+		</li>
+	</ul>
+
+	<!-- Architecture Overview -->
+
+	<h3>Architecture</h3>
+	<ul class="bullet-list">
+		<li>
+			All tokens are exposed as <code>--color-*</code> custom properties on <code>:root</code>.
+		</li>
+		<li>
+			Surface colors use <code>data-theme</code> attribute with automatic fallback to
+			<code>prefers-color-scheme</code>.
+		</li>
+		<li>User preference is persisted in <code>localStorage</code>.</li>
+		<li>
+			Hover states are delegated to components using <code>color-mix()</code> for context-aware derivation.
+		</li>
+	</ul>
+
+	<!-- Usage -->
+
+	<h3>Usage</h3>
+	<p class="description">
+		Add the Theme component at the root of your app. It generates CSS custom properties and handles
+		light/dark mode switching.
+	</p>
+	<DemoCodeSnippet snippet={usageSnippet} />
+</DemoSection>
+
+<style>
+	.intro {
+		text-align: center;
+		font-size: 1.1rem;
+		max-width: 40rem;
+		opacity: 0.8;
+	}
+
+	h3 {
+		font-size: 1.4rem;
+		margin-top: 1.5rem;
+		margin-bottom: 0.5rem;
+		width: 100%;
+		text-align: center;
+	}
+
+	.description {
+		text-align: center;
+		max-width: 36rem;
+		opacity: 0.7;
+		font-size: 0.95rem;
+		margin-bottom: 1rem;
+	}
+
+	code {
+		background: color-mix(in srgb, var(--color-foreground) 10%, transparent);
+		padding: 0.15rem 0.4rem;
+		border-radius: 0.25rem;
+		font-size: 0.85em;
+	}
+
+	/* Color Grid */
+	.color-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+		gap: 1rem;
+		width: 100%;
+	}
+
+	.surface-grid {
+		max-width: 320px;
+	}
+
+	.color-card {
+		display: flex;
+		flex-direction: column;
+		border-radius: 0.75rem;
+		overflow: hidden;
+		border: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
+	}
+
+	.color-header {
+		padding: 0.5rem;
+		text-align: center;
+		font-weight: 600;
+		text-transform: capitalize;
+		background: color-mix(in srgb, var(--color-foreground) 5%, transparent);
+		font-size: 0.85rem;
+	}
+
+	.color-variants {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.color-swatch {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0.6rem 0.75rem;
+		font-size: 0.75rem;
+	}
+
+	.swatch-label {
+		font-weight: 500;
+	}
+
+	/* Bullet Lists */
+	.bullet-list {
+		list-style: disc;
+		padding-left: 1.5rem;
+		max-width: 40rem;
+		text-align: left;
+	}
+
+	.bullet-list li {
+		margin-bottom: 0.5rem;
+		font-size: 0.9rem;
+		line-height: 1.5;
+	}
+
+	.bullet-list li:last-child {
+		margin-bottom: 0;
+	}
+</style>

package/dist/internal/demo-theming.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const DemoTheming: import("svelte").Component<Record<string, never>, {}, "">;
+type DemoTheming = ReturnType<typeof DemoTheming>;
+export default DemoTheming;

package/package.json

@@ -1,16 +1,16 @@
 {
 	"name": "bref-ui",
-	"version": "0.0.2",
+	"version": "0.0.4",
 	"description": "A truly Svelte-esque UI component library - minimal, flexible, pure CSS, no Tailwind",
 	"license": "MIT",
 	"author": "feuerstein",
 	"repository": {
 		"type": "git",
-		"url": "git+https://github.com/f-euer/bref.git"
+		"url": "git+https://github.com/feuersteiner/bref.git"
 	},
-	"homepage": "https://github.com/f-euer/bref#readme",
+	"homepage": "https://github.com/feuersteiner/bref#readme",
 	"bugs": {
-		"url": "https://github.com/f-euer/bref/issues"
+		"url": "https://github.com/feuersteiner/bref/issues"
 	},
 	"scripts": {
 		"dev": "vite dev",