bref-ui-themes 1.0.2 → 1.0.3

package/README.md

@@ -12,7 +12,7 @@ Explore the [theme galleries](https://feuersteiner.github.io/bref-ui/themes) for
 component examples and interaction states, or browse the
 [Bref-ui documentation](https://feuersteiner.github.io/bref-ui/).
 
-[Watch the 60-second demo](https://github.com/feuersteiner/bref-ui/raw/c31d50d44163d28ceb4c068d4819af9416538257/docs/static/bref-ui-demo.mp4)
+https://github.com/user-attachments/assets/b2a0cff0-5d34-4f5b-bbdb-0233e0fef81e
 
 See New Paris shopping, the ADE workbench with VS Code styling and a Glassy
 workspace in action. The [video app and storyboard](https://github.com/feuersteiner/bref-ui/tree/main/video-demo#readme)
@@ -50,6 +50,38 @@ Import components from the theme's entry point:
 <Theme><Button label="Save" /></Theme>
 ```
 
+## Theme controls
+
+Every prebuilt `Theme` accepts the core `ThemeProps` from `bref-ui/types`:
+optional `children?: Snippet` and `palette?: Palette | { light: Palette; dark: Palette }`.
+`Palette` is a partial map of semantic colors to CSS hex values: `primary`,
+`secondary`, `background`, `foreground`, `muted`, `info`, `success`, `warning`, `error`.
+Invalid hex values throw, as in core Theme.
+
+```svelte
+<script lang="ts">
+	import { Theme as CrystalCodeTheme, Button } from 'bref-ui-themes/crystal-code';
+	import type { Palette } from 'bref-ui/types';
+
+	const palette = { primary: '#6750a4' } satisfies Palette;
+</script>
+
+<CrystalCodeTheme {palette}><Button label="Save" /></CrystalCodeTheme>
+```
+
+A shared palette applies to both modes. For separate overrides, pass
+`palette={{ light: { primary: '#6750a4' }, dark: { primary: '#d0bcff' } }}`.
+Each mode merges only its supplied colors with that theme's defaults. Omitted
+colors retain the original appearance; private material and typography tokens
+remain theme-specific. Check contrast when choosing custom colors. Overrides stay on the instance, including nested themes,
+and do not alter sibling themes or core Theme.
+
+Use `ThemeModeToggle` to select `light`, `dark` or `auto` through the existing
+color-scheme metadata. Local `[data-theme="light"]`, `[data-theme="dark"]` and
+`[data-theme="auto"]` containers select the mode for their nested prebuilt themes;
+the nearest container wins. Without a mode selection, Crystal Code follows the
+system, New Paris and Glassy stay light, and VS Code stays dark.
+
 ## Development
 
 Run `bun install` and `bun run dev` from the repository root. The docs site consumes

package/dist/crystal-code/theme.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import type { ThemeProps } from 'bref-ui/types';
+	import { paletteStyle } from 'bref-ui';
 	import './theme/fonts.css';
 
-	let { children }: { children?: Snippet } = $props();
+	let { children, palette = {} }: ThemeProps = $props();
 </script>
 
-<div data-bref-theme="crystal-code">{@render children?.()}</div>
+<div data-bref-theme="crystal-code" style={paletteStyle(palette)}>{@render children?.()}</div>
 
 <style>
 	[data-bref-theme] {
-		color-scheme: light dark;
+		color-scheme: var(--bref-theme-mode, light dark);
 		--color-primary-light: #4e5969;
 		--color-primary-dark: #8aa7f8;
 		--color-primary: light-dark(var(--color-primary-light), var(--color-primary-dark));
@@ -70,22 +71,4 @@
 		color: var(--color-foreground);
 		font-synthesis: none;
 	}
-
-	:global(:where(:root:has(meta[name='color-scheme'][content='light']))) [data-bref-theme] {
-		color-scheme: light;
-	}
-	:global(:where(:root:has(meta[name='color-scheme'][content='dark']))) [data-bref-theme] {
-		color-scheme: dark;
-	}
-
-	@scope ([data-theme='light']) {
-		[data-bref-theme] {
-			color-scheme: light;
-		}
-	}
-	@scope ([data-theme='dark']) {
-		[data-bref-theme] {
-			color-scheme: dark;
-		}
-	}
 </style>

package/dist/crystal-code/theme.svelte.d.ts

@@ -1,8 +1,5 @@
-import type { Snippet } from 'svelte';
+import type { ThemeProps } from 'bref-ui/types';
 import './theme/fonts.css';
-type $$ComponentProps = {
-    children?: Snippet;
-};
-declare const Theme: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Theme: import("svelte").Component<ThemeProps, {}, "">;
 type Theme = ReturnType<typeof Theme>;
 export default Theme;

package/dist/glassy/theme.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import type { ThemeProps } from 'bref-ui/types';
+	import { paletteStyle } from 'bref-ui';
 	import './theme/fonts.css';
-	let { children }: { children?: Snippet } = $props();
+	let { children, palette = {} }: ThemeProps = $props();
 </script>
 
-<div data-bref-theme="glassy">{@render children?.()}</div>
+<div data-bref-theme="glassy" style={paletteStyle(palette)}>{@render children?.()}</div>
 
 <style>
 	[data-bref-theme] {
-		color-scheme: light;
+		color-scheme: var(--bref-theme-mode, light);
 		--color-primary-light: #0068d9;
 		--color-primary-dark: #0068d9;
 		--color-primary: light-dark(var(--color-primary-light), var(--color-primary-dark));

package/dist/glassy/theme.svelte.d.ts

@@ -1,8 +1,5 @@
-import type { Snippet } from 'svelte';
+import type { ThemeProps } from 'bref-ui/types';
 import './theme/fonts.css';
-type $$ComponentProps = {
-    children?: Snippet;
-};
-declare const Theme: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Theme: import("svelte").Component<ThemeProps, {}, "">;
 type Theme = ReturnType<typeof Theme>;
 export default Theme;

package/dist/new-paris/theme.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import '@fontsource-variable/material-symbols-outlined/fill.css';
-	import type { Snippet } from 'svelte';
-	let { children }: { children?: Snippet } = $props();
+	import type { ThemeProps } from 'bref-ui/types';
+	import { paletteStyle } from 'bref-ui';
+	let { children, palette = {} }: ThemeProps = $props();
 </script>
 
-<div data-bref-theme="new-paris">{@render children?.()}</div>
+<div data-bref-theme="new-paris" style={paletteStyle(palette)}>{@render children?.()}</div>
 
 <style>
 	[data-bref-theme] {
-		color-scheme: light;
+		color-scheme: var(--bref-theme-mode, light);
 		--color-primary-light: #171715;
 		--color-primary-dark: #171715;
 		--color-primary: light-dark(var(--color-primary-light), var(--color-primary-dark));

package/dist/new-paris/theme.svelte.d.ts

@@ -1,8 +1,5 @@
 import '@fontsource-variable/material-symbols-outlined/fill.css';
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    children?: Snippet;
-};
-declare const Theme: import("svelte").Component<$$ComponentProps, {}, "">;
+import type { ThemeProps } from 'bref-ui/types';
+declare const Theme: import("svelte").Component<ThemeProps, {}, "">;
 type Theme = ReturnType<typeof Theme>;
 export default Theme;

package/dist/vscode/theme.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import type { ThemeProps } from 'bref-ui/types';
+	import { paletteStyle } from 'bref-ui';
 	import './theme/fonts.css';
 
-	let { children }: { children?: Snippet } = $props();
+	let { children, palette = {} }: ThemeProps = $props();
 </script>
 
-<div data-bref-theme="vscode">{@render children?.()}</div>
+<div data-bref-theme="vscode" style={paletteStyle(palette)}>{@render children?.()}</div>
 
 <style>
 	[data-bref-theme] {
-		color-scheme: dark;
+		color-scheme: var(--bref-theme-mode, dark);
 		--color-primary-light: #3794ff;
 		--color-primary-dark: #3794ff;
 		--color-primary: light-dark(var(--color-primary-light), var(--color-primary-dark));

package/dist/vscode/theme.svelte.d.ts

@@ -1,8 +1,5 @@
-import type { Snippet } from 'svelte';
+import type { ThemeProps } from 'bref-ui/types';
 import './theme/fonts.css';
-type $$ComponentProps = {
-    children?: Snippet;
-};
-declare const Theme: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Theme: import("svelte").Component<ThemeProps, {}, "">;
 type Theme = ReturnType<typeof Theme>;
 export default Theme;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bref-ui-themes",
-	"version": "1.0.2",
+	"version": "1.0.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -35,7 +35,7 @@
 		"@fontsource-variable/material-symbols-outlined": "^5.3.5"
 	},
 	"peerDependencies": {
-		"bref-ui": "^3.0.0",
+		"bref-ui": "^3.1.1",
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {

package/src/lib/crystal-code/theme.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import type { ThemeProps } from 'bref-ui/types';
+	import { paletteStyle } from 'bref-ui';
 	import './theme/fonts.css';
 
-	let { children }: { children?: Snippet } = $props();
+	let { children, palette = {} }: ThemeProps = $props();
 </script>
 
-<div data-bref-theme="crystal-code">{@render children?.()}</div>
+<div data-bref-theme="crystal-code" style={paletteStyle(palette)}>{@render children?.()}</div>
 
 <style>
 	[data-bref-theme] {
-		color-scheme: light dark;
+		color-scheme: var(--bref-theme-mode, light dark);
 		--color-primary-light: #4e5969;
 		--color-primary-dark: #8aa7f8;
 		--color-primary: light-dark(var(--color-primary-light), var(--color-primary-dark));
@@ -70,22 +71,4 @@
 		color: var(--color-foreground);
 		font-synthesis: none;
 	}
-
-	:global(:where(:root:has(meta[name='color-scheme'][content='light']))) [data-bref-theme] {
-		color-scheme: light;
-	}
-	:global(:where(:root:has(meta[name='color-scheme'][content='dark']))) [data-bref-theme] {
-		color-scheme: dark;
-	}
-
-	@scope ([data-theme='light']) {
-		[data-bref-theme] {
-			color-scheme: light;
-		}
-	}
-	@scope ([data-theme='dark']) {
-		[data-bref-theme] {
-			color-scheme: dark;
-		}
-	}
 </style>

package/src/lib/glassy/theme.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import type { ThemeProps } from 'bref-ui/types';
+	import { paletteStyle } from 'bref-ui';
 	import './theme/fonts.css';
-	let { children }: { children?: Snippet } = $props();
+	let { children, palette = {} }: ThemeProps = $props();
 </script>
 
-<div data-bref-theme="glassy">{@render children?.()}</div>
+<div data-bref-theme="glassy" style={paletteStyle(palette)}>{@render children?.()}</div>
 
 <style>
 	[data-bref-theme] {
-		color-scheme: light;
+		color-scheme: var(--bref-theme-mode, light);
 		--color-primary-light: #0068d9;
 		--color-primary-dark: #0068d9;
 		--color-primary: light-dark(var(--color-primary-light), var(--color-primary-dark));

package/src/lib/new-paris/theme.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import '@fontsource-variable/material-symbols-outlined/fill.css';
-	import type { Snippet } from 'svelte';
-	let { children }: { children?: Snippet } = $props();
+	import type { ThemeProps } from 'bref-ui/types';
+	import { paletteStyle } from 'bref-ui';
+	let { children, palette = {} }: ThemeProps = $props();
 </script>
 
-<div data-bref-theme="new-paris">{@render children?.()}</div>
+<div data-bref-theme="new-paris" style={paletteStyle(palette)}>{@render children?.()}</div>
 
 <style>
 	[data-bref-theme] {
-		color-scheme: light;
+		color-scheme: var(--bref-theme-mode, light);
 		--color-primary-light: #171715;
 		--color-primary-dark: #171715;
 		--color-primary: light-dark(var(--color-primary-light), var(--color-primary-dark));

package/src/lib/vscode/theme.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import type { ThemeProps } from 'bref-ui/types';
+	import { paletteStyle } from 'bref-ui';
 	import './theme/fonts.css';
 
-	let { children }: { children?: Snippet } = $props();
+	let { children, palette = {} }: ThemeProps = $props();
 </script>
 
-<div data-bref-theme="vscode">{@render children?.()}</div>
+<div data-bref-theme="vscode" style={paletteStyle(palette)}>{@render children?.()}</div>
 
 <style>
 	[data-bref-theme] {
-		color-scheme: dark;
+		color-scheme: var(--bref-theme-mode, dark);
 		--color-primary-light: #3794ff;
 		--color-primary-dark: #3794ff;
 		--color-primary: light-dark(var(--color-primary-light), var(--color-primary-dark));