bref-ui 2.0.0 → 2.1.0

package/src/lib/switch/switch.svelte

@@ -11,9 +11,9 @@
 
 <style>
 	[data-switch] {
-		--track-width: 3.25rem;
-		--track-height: 2rem;
-		--thumb-size: 1.5rem;
+		--track-width: 2.75rem;
+		--track-height: 1.625rem;
+		--thumb-size: 1.125rem;
 		--inset: 0.25rem;
 		position: relative;
 		display: inline-flex;
@@ -35,43 +35,24 @@
 
 	[data-switch] > span {
 		--internal-tint: var(--color-foreground, black);
-		--internal-strength-light: 4%;
-		--internal-strength-dark: 16%;
-		--internal-highlight: color-mix(in srgb, var(--color-foreground, black) 16%, transparent);
+		--internal-strength: 48%;
+		--internal-fill: color-mix(
+			in srgb,
+			var(--internal-tint) var(--internal-strength),
+			var(--color-background, white)
+		);
+		--internal-border: var(--internal-fill);
 		box-sizing: border-box;
 		position: relative;
 		width: 100%;
 		height: 100%;
-		border: 1px solid
-			light-dark(
-				color-mix(in srgb, var(--color-foreground, black) 12%, transparent),
-				color-mix(in srgb, var(--color-foreground, black) 30%, transparent)
-			);
+		border: 1px solid var(--internal-border);
 		border-radius: 999px;
-		background: color-mix(
-			in srgb,
-			light-dark(
-					color-mix(
-						in srgb,
-						var(--internal-tint) var(--internal-strength-light),
-						var(--color-background, white)
-					),
-					color-mix(
-						in srgb,
-						var(--internal-tint) var(--internal-strength-dark),
-						var(--color-background, white)
-					)
-				)
-				85%,
-			transparent
-		);
-		box-shadow:
-			inset 0 1px 0 var(--internal-highlight),
-			0 2px 6px color-mix(in srgb, black 8%, transparent);
-		-webkit-backdrop-filter: blur(0.5rem) saturate(120%);
-		backdrop-filter: blur(0.5rem) saturate(120%);
+		background: var(--internal-fill);
 		pointer-events: none;
-		transition: all 150ms ease;
+		transition:
+			background-color 150ms ease,
+			border-color 150ms ease;
 	}
 
 	[data-switch] > span > span {
@@ -84,27 +65,42 @@
 		width: var(--thumb-size);
 		height: var(--thumb-size);
 		border-radius: 50%;
-		background: var(--color-foreground);
-		color: var(--color-background);
+		background: var(--color-background, white);
+		color: var(--color-foreground, black);
+		box-shadow: 0 1px 2px color-mix(in srgb, var(--color-background, white) 12%, transparent);
 		font-size: calc(var(--thumb-size) * 0.7);
 		transform: translateY(-50%);
-		transition:
-			left 150ms ease,
-			background 150ms ease;
+		transition: left 150ms ease;
+	}
+
+	input:hover:not(:disabled) + span {
+		--internal-strength: 52%;
+	}
+
+	input:active:not(:disabled) + span {
+		--internal-strength: 56%;
 	}
 
 	input:checked + span {
 		--internal-tint: var(--color-primary, blue);
-		--internal-strength-light: 88%;
-		--internal-strength-dark: 88%;
-		--internal-highlight: color-mix(in srgb, var(--color-foreground, black) 28%, transparent);
-		border-color: color-mix(in srgb, var(--internal-tint) 68%, var(--color-foreground, black));
+		--internal-strength: 88%;
+	}
+
+	input:checked:hover:not(:disabled) + span {
+		--internal-strength: 92%;
+	}
+
+	input:checked:active:not(:disabled) + span {
+		--internal-strength: 96%;
 	}
 
 	input:checked + span > span {
 		left: calc(100% - var(--thumb-size) - var(--inset));
-		background: var(--color-background);
-		color: var(--color-foreground);
+	}
+
+	input:user-invalid + span,
+	input[aria-invalid='true'] + span {
+		--internal-border: var(--color-error, #bc2436);
 	}
 
 	input:focus-visible + span {
@@ -121,15 +117,15 @@
 	}
 
 	[data-size='small'] {
-		--track-width: 2.75rem;
-		--track-height: 1.75rem;
-		--thumb-size: 1.25rem;
+		--track-width: 2.25rem;
+		--track-height: 1.375rem;
+		--thumb-size: 0.875rem;
 	}
 
 	[data-size='large'] {
-		--track-width: 3.75rem;
-		--track-height: 2.25rem;
-		--thumb-size: 1.625rem;
+		--track-width: 3.25rem;
+		--track-height: 1.875rem;
+		--thumb-size: 1.375rem;
 	}
 
 	@media (prefers-reduced-motion: reduce) {
@@ -150,6 +146,7 @@
 		[data-switch] > span > span {
 			background: ButtonText;
 			color: Canvas;
+			box-shadow: none;
 		}
 		input:checked + span {
 			background: Highlight;

package/src/lib/text-area/registry.json

@@ -4,5 +4,5 @@
 	"exports": {
 		"TextArea": "text-area.svelte"
 	},
-	"dependencies": ["icon"]
+	"dependencies": ["icon", "theme"]
 }

package/src/lib/text-area/text-area.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	/* eslint-disable max-lines -- Keep the native control and its scoped style recipe together. */
 	import Icon from '../icon/icon.svelte';
+	import { surface } from '../theme/surface.js';
 	import type { TextAreaProps } from './types.js';
 
 	let {
@@ -9,7 +9,8 @@
 		icon,
 		size = 'medium',
 		wide = false,
-		variant = 'neutral',
+		variant = 'soft',
+		glass = false,
 		resizable = true,
 		oninput,
 		defaultValue,
@@ -23,7 +24,17 @@
 	};
 </script>
 
-<div data-size={size} data-variant={variant} data-wide={wide || undefined}>
+<div
+	class={surface({
+		color: 'background',
+		variant,
+		glass,
+		hover: variant === 'soft' && !attributes.disabled ? 'small' : undefined
+	})}
+	data-size={size}
+	data-variant={variant}
+	data-wide={wide || undefined}
+>
 	{#if icon}
 		<span><Icon {...icon} label={undefined} /></span>
 	{/if}
@@ -38,76 +49,39 @@
 <style>
 	div {
 		--internal-height: 2.5rem;
-		--internal-padding: 0.85rem;
+		--internal-padding: 1rem;
 		--internal-icon-size: 1.25rem;
-		--internal-tint: var(--color-foreground, black);
-		--internal-strength-light: 3%;
-		--internal-strength-dark: 3%;
-		--internal-opacity: 15%;
-		--internal-border: transparent;
-		--internal-highlight: color-mix(in srgb, var(--color-foreground, black) 12%, transparent);
+		--internal-placeholder: color-mix(in srgb, var(--color-muted,) 35%, var(--color-foreground));
 		box-sizing: border-box;
 		display: inline-flex;
 		align-items: flex-start;
 		align-self: start;
-		gap: 0.6rem;
+		gap: 0.625rem;
 		width: min(100%, 18rem);
 		min-width: 0;
 		max-width: 100%;
 		min-height: var(--internal-height);
 		padding-inline: var(--internal-padding);
-		padding-block: 0.65rem;
-		border: 1px solid var(--internal-border);
-		border-radius: 0.5rem;
-		background: color-mix(
-			in srgb,
-			light-dark(
-					color-mix(
-						in srgb,
-						var(--internal-tint) var(--internal-strength-light),
-						var(--color-background, white)
-					),
-					color-mix(
-						in srgb,
-						var(--internal-tint) var(--internal-strength-dark),
-						var(--color-background, white)
-					)
-				)
-				var(--internal-opacity),
-			transparent
-		);
-		color: var(--color-foreground, black);
-		transition: all 150ms ease;
-		-webkit-backdrop-filter: blur(0.5rem) saturate(120%);
-		backdrop-filter: blur(0.5rem) saturate(120%);
+		padding-block: 0.75rem;
+		border-radius: 0.625rem;
 	}
 	div[data-wide] {
 		width: 100%;
 	}
 	div[data-size='small'] {
 		--internal-height: 2rem;
-		--internal-padding: 0.65rem;
+		--internal-padding: 0.75rem;
 		--internal-icon-size: 1rem;
 	}
 	div[data-size='large'] {
 		--internal-height: 3rem;
-		--internal-padding: 1rem;
+		--internal-padding: 1.125rem;
 		--internal-icon-size: 1.5rem;
 	}
-	div[data-variant='soft'] {
-		--internal-strength-light: 4%;
-		--internal-strength-dark: 16%;
-		--internal-opacity: 85%;
-		--internal-border: light-dark(
-			color-mix(in srgb, var(--color-foreground, black) 12%, transparent),
-			color-mix(in srgb, var(--color-foreground, black) 30%, transparent)
-		);
-		box-shadow: inset 0 1px 0 var(--internal-highlight);
-	}
 	span {
 		display: inline-flex;
 		flex: 0 0 auto;
-		color: var(--color-muted, #666);
+		color: var(--color-muted);
 		font-size: var(--internal-icon-size);
 		padding-top: 0.1rem;
 		pointer-events: none;
@@ -124,7 +98,7 @@
 		font: inherit;
 		font-size: 1rem;
 		font-weight: 200;
-		line-height: 1.4;
+		line-height: 1.5;
 	}
 	textarea {
 		resize: vertical;
@@ -133,41 +107,27 @@
 		resize: none;
 	}
 	textarea::placeholder {
-		color: var(--color-muted, #666);
-	}
-	div[data-variant='soft']:hover:not(:has(:disabled)) {
-		--internal-border: light-dark(
-			color-mix(in srgb, var(--color-foreground, black) 18%, transparent),
-			color-mix(in srgb, var(--color-foreground, black) 38%, transparent)
-		);
-		--internal-strength-light: 6%;
-		--internal-strength-dark: 20%;
+		color: var(--internal-placeholder);
+		opacity: 1;
 	}
 	div:has(textarea:focus) {
-		--internal-tint: var(--color-primary, blue);
-		--internal-strength-light: 6%;
-		--internal-strength-dark: 12%;
-		--internal-border: color-mix(in srgb, var(--internal-tint) 55%, transparent);
-		box-shadow:
-			inset 0 1px 0 var(--internal-highlight),
-			0 0 0 3px color-mix(in srgb, var(--internal-tint) 16%, transparent);
+		outline: 2px solid var(--color-primary);
+		outline-offset: 2px;
 	}
-	div:has(textarea:invalid, [aria-invalid='true']) {
-		--internal-tint: var(--color-error, #bc2436);
-		--internal-border: color-mix(in srgb, var(--internal-tint) 65%, transparent);
+	div:has(textarea:user-invalid, textarea[aria-invalid='true']) {
+		--surface-border: var(--color-error);
+		outline-color: var(--color-error);
 	}
 	div:has(:disabled) {
 		opacity: 0.5;
 		cursor: not-allowed;
 	}
+	div[data-variant='soft']:has(textarea:disabled):hover {
+		--surface-strength: var(--surface-soft-strength);
+	}
 	textarea:disabled {
 		cursor: inherit;
 	}
-	@media (prefers-reduced-motion: reduce) {
-		div {
-			transition: none;
-		}
-	}
 	@media (forced-colors: active) {
 		div {
 			border-color: ButtonText;

package/src/lib/text-area/types.ts

@@ -9,5 +9,6 @@ export type TextAreaProps = Omit<HTMLTextareaAttributes, 'value'> & {
 	size?: BaseSize;
 	wide?: boolean;
 	variant?: Exclude<Variant, 'filled'>;
+	glass?: boolean;
 	resizable?: boolean;
 };

package/src/lib/text-input/registry.json

@@ -4,5 +4,5 @@
 	"exports": {
 		"TextInput": "text-input.svelte"
 	},
-	"dependencies": ["icon"]
+	"dependencies": ["icon", "theme"]
 }

package/src/lib/text-input/text-input.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	/* eslint-disable max-lines -- Keep the native control and its scoped style recipe together. */
 	import Icon from '../icon/icon.svelte';
+	import { surface } from '../theme/surface.js';
 	import type { TextInputProps } from './types.js';
 
 	let {
@@ -9,7 +9,8 @@
 		icon,
 		size = 'medium',
 		wide = false,
-		variant = 'neutral',
+		variant = 'soft',
+		glass = false,
 		oninput,
 		defaultValue,
 		...attributes
@@ -22,7 +23,17 @@
 	};
 </script>
 
-<div data-size={size} data-variant={variant} data-wide={wide || undefined}>
+<div
+	class={surface({
+		color: 'background',
+		variant,
+		glass,
+		hover: variant === 'soft' && !attributes.disabled ? 'small' : undefined
+	})}
+	data-size={size}
+	data-variant={variant}
+	data-wide={wide || undefined}
+>
 	{#if icon}
 		<span><Icon {...icon} label={undefined} /></span>
 	{/if}
@@ -37,75 +48,38 @@
 <style>
 	div {
 		--internal-height: 2.5rem;
-		--internal-padding: 0.85rem;
+		--internal-padding: 1rem;
 		--internal-icon-size: 1.25rem;
-		--internal-tint: var(--color-foreground, black);
-		--internal-strength-light: 3%;
-		--internal-strength-dark: 3%;
-		--internal-opacity: 15%;
-		--internal-border: transparent;
-		--internal-highlight: color-mix(in srgb, var(--color-foreground, black) 12%, transparent);
+		--internal-placeholder: color-mix(in srgb, var(--color-muted,) 35%, var(--color-foreground));
 		box-sizing: border-box;
 		display: inline-flex;
 		align-items: center;
 		align-self: start;
-		gap: 0.6rem;
+		gap: 0.625rem;
 		width: min(100%, 18rem);
 		min-width: 0;
 		max-width: 100%;
 		min-height: var(--internal-height);
 		padding-inline: var(--internal-padding);
-		border: 1px solid var(--internal-border);
-		border-radius: 0.5rem;
-		background: color-mix(
-			in srgb,
-			light-dark(
-					color-mix(
-						in srgb,
-						var(--internal-tint) var(--internal-strength-light),
-						var(--color-background, white)
-					),
-					color-mix(
-						in srgb,
-						var(--internal-tint) var(--internal-strength-dark),
-						var(--color-background, white)
-					)
-				)
-				var(--internal-opacity),
-			transparent
-		);
-		color: var(--color-foreground, black);
-		transition: all 150ms ease;
-		-webkit-backdrop-filter: blur(0.5rem) saturate(120%);
-		backdrop-filter: blur(0.5rem) saturate(120%);
+		border-radius: 0.625rem;
 	}
 	div[data-wide] {
 		width: 100%;
 	}
 	div[data-size='small'] {
 		--internal-height: 2rem;
-		--internal-padding: 0.65rem;
+		--internal-padding: 0.75rem;
 		--internal-icon-size: 1rem;
 	}
 	div[data-size='large'] {
 		--internal-height: 3rem;
-		--internal-padding: 1rem;
+		--internal-padding: 1.125rem;
 		--internal-icon-size: 1.5rem;
 	}
-	div[data-variant='soft'] {
-		--internal-strength-light: 4%;
-		--internal-strength-dark: 16%;
-		--internal-opacity: 85%;
-		--internal-border: light-dark(
-			color-mix(in srgb, var(--color-foreground, black) 12%, transparent),
-			color-mix(in srgb, var(--color-foreground, black) 30%, transparent)
-		);
-		box-shadow: inset 0 1px 0 var(--internal-highlight);
-	}
 	span {
 		display: inline-flex;
 		flex: 0 0 auto;
-		color: var(--color-muted, #666);
+		color: var(--color-muted);
 		font-size: var(--internal-icon-size);
 		pointer-events: none;
 	}
@@ -121,7 +95,7 @@
 		font: inherit;
 		font-size: 1rem;
 		font-weight: 200;
-		line-height: 1.4;
+		line-height: 1.5;
 	}
 	input {
 		height: calc(var(--internal-height) - 2px);
@@ -136,41 +110,27 @@
 		margin: 0;
 	}
 	input::placeholder {
-		color: var(--color-muted, #666);
-	}
-	div[data-variant='soft']:hover:not(:has(:disabled)) {
-		--internal-border: light-dark(
-			color-mix(in srgb, var(--color-foreground, black) 18%, transparent),
-			color-mix(in srgb, var(--color-foreground, black) 38%, transparent)
-		);
-		--internal-strength-light: 6%;
-		--internal-strength-dark: 20%;
+		color: var(--internal-placeholder);
+		opacity: 1;
 	}
 	div:has(input:focus) {
-		--internal-tint: var(--color-primary, blue);
-		--internal-strength-light: 6%;
-		--internal-strength-dark: 12%;
-		--internal-border: color-mix(in srgb, var(--internal-tint) 55%, transparent);
-		box-shadow:
-			inset 0 1px 0 var(--internal-highlight),
-			0 0 0 3px color-mix(in srgb, var(--internal-tint) 16%, transparent);
-	}
-	div:has(input:invalid, [aria-invalid='true']) {
-		--internal-tint: var(--color-error, #bc2436);
-		--internal-border: color-mix(in srgb, var(--internal-tint) 65%, transparent);
+		outline: 2px solid var(--color-primary);
+		outline-offset: 2px;
+	}
+	div:has(input:user-invalid, input[aria-invalid='true']) {
+		--surface-border: var(--color-error);
+		outline-color: var(--color-error);
 	}
 	div:has(:disabled) {
 		opacity: 0.5;
 		cursor: not-allowed;
 	}
+	div[data-variant='soft']:has(input:disabled):hover {
+		--surface-strength: var(--surface-soft-strength);
+	}
 	input:disabled {
 		cursor: inherit;
 	}
-	@media (prefers-reduced-motion: reduce) {
-		div {
-			transition: none;
-		}
-	}
 	@media (forced-colors: active) {
 		div {
 			border-color: ButtonText;

package/src/lib/text-input/types.ts

@@ -9,4 +9,5 @@ export type TextInputProps = Omit<HTMLInputAttributes, 'value' | 'size'> & {
 	size?: BaseSize;
 	wide?: boolean;
 	variant?: Exclude<Variant, 'filled'>;
+	glass?: boolean;
 };

package/src/lib/theme/cli-theme.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import Colors from './colors.svelte';
 	import Surfaces from './surfaces.svelte';
+	import Glass from './glass.svelte';
 	import Fonts from './fonts.svelte';
 	import Styles from './styles.svelte';
 
@@ -10,6 +11,7 @@
 
 <Colors />
 <Surfaces />
+<Glass />
 <Fonts />
 <Styles />
 

package/src/lib/theme/glass.svelte

@@ -0,0 +1,60 @@
+<style>
+	:global(.glass) {
+		--glass-paint: var(--surface-fill, var(--color-background, white));
+		--glass-opacity: 20%;
+		--glass-blur: blur(0.75rem) saturate(120%);
+	}
+	/* Three class selectors keep opt-in material above ordinary scoped component paint.
+	   Inline styles and explicit selectors can still override it. */
+	:global(.glass.glass.glass) {
+		background: var(--glass-paint);
+		color: var(--surface-content, var(--color-foreground, black));
+		box-shadow:
+			inset 0 1px 0 color-mix(in srgb, var(--color-foreground, black) 8%, transparent),
+			var(--surface-shadow, 0 0.5rem 1.5rem color-mix(in srgb, black 12%, transparent));
+	}
+	:global(.glass:where(.surface-neutral)) {
+		--glass-paint: color-mix(
+			in srgb,
+			var(--surface-tint) var(--surface-strength),
+			var(--surface-base)
+		);
+	}
+	:global(.glass:where(.surface-soft)) {
+		--glass-opacity: 40%;
+	}
+	:global(.glass:where(.surface-filled)) {
+		--glass-opacity: 65%;
+	}
+	@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+		:global(.glass.glass.glass) {
+			background: color-mix(in srgb, var(--glass-paint) var(--glass-opacity), transparent);
+			-webkit-backdrop-filter: var(--glass-blur);
+			backdrop-filter: var(--glass-blur);
+		}
+	}
+	@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+		:global(.glass.glass.glass) {
+			background: var(--glass-paint);
+			box-shadow: var(--surface-shadow, 0 0 0 transparent);
+			-webkit-backdrop-filter: none;
+			backdrop-filter: none;
+		}
+	}
+	@media (forced-colors: active) {
+		:global(.glass.glass.glass) {
+			border-color: CanvasText;
+			background: Canvas;
+			color: CanvasText;
+			box-shadow: none;
+			-webkit-backdrop-filter: none;
+			backdrop-filter: none;
+		}
+		:global(
+			.glass.glass.glass:is(:disabled, [aria-disabled='true'], [data-surface-disabled='true'])
+		) {
+			color: GrayText;
+			opacity: 1;
+		}
+	}
+</style>

package/src/lib/theme/registry.json

@@ -4,6 +4,7 @@
 		"cli-theme.svelte",
 		"colors.svelte",
 		"surfaces.svelte",
+		"glass.svelte",
 		"fonts.svelte",
 		"styles.svelte",
 		"surface.ts"

package/src/lib/theme/styles.svelte

@@ -1,7 +1,13 @@
 <style>
+	:global(:root) {
+		--font-sans:
+			ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+	}
+
 	:global(body) {
 		background: var(--color-background);
 		color: var(--color-foreground);
+		font-family: var(--font-text, var(--font-sans));
 	}
 
 	:global(*) {

package/src/lib/theme/surface.ts

@@ -5,14 +5,16 @@ export const surface = ({
 	variant = 'neutral',
 	color = 'foreground',
 	shadow,
-	hover
+	hover,
+	glass = false
 }: SurfaceBaseProps = {}): string =>
 	[
 		'surface',
 		`surface-${variant}`,
 		`surface-${color}`,
 		shadow && `surface-shadow-${shadow === true ? 'medium' : shadow}`,
-		hover && `surface-hover-${hover}`
+		hover && `surface-hover-${hover}`,
+		glass && 'glass'
 	]
 		.filter(Boolean)
 		.join(' ');