bref-ui 2.0.1 → 2.1.0

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(' ');

package/src/lib/theme/surfaces.svelte

@@ -7,9 +7,12 @@
 		--surface-color: var(--color-foreground, black);
 		--surface-base: var(--color-background, white);
 		--surface-foreground: var(--color-foreground, black);
-		--surface-strength: 0%;
+		--surface-tint: var(--surface-color);
+		--surface-soft-strength: 24%;
+		--surface-neutral-strength: 2%;
+		--surface-strength: var(--surface-neutral-strength);
 		--surface-hover: 0%;
-		--surface-fill: transparent;
+		--surface-fill: color-mix(in srgb, var(--surface-tint) var(--surface-strength), transparent);
 		--surface-border: transparent;
 		--surface-content: var(--surface-color);
 		--surface-neutral-content: color-mix(
@@ -19,16 +22,11 @@
 		);
 		--surface-highlight: 0 0 0 transparent;
 		--surface-shadow: 0 0 0 transparent;
-		--surface-glow: 0 0 0 transparent;
-		--surface-glow-size: 0;
-		--surface-blur: none;
 		box-sizing: border-box;
 		border: 1px solid var(--surface-border);
 		background: var(--surface-fill);
 		color: var(--surface-content);
-		box-shadow: var(--surface-highlight), var(--surface-shadow), var(--surface-glow);
-		-webkit-backdrop-filter: var(--surface-blur);
-		backdrop-filter: var(--surface-blur);
+		box-shadow: var(--surface-highlight), var(--surface-shadow);
 		transition:
 			background-color 150ms ease,
 			border-color 150ms ease,
@@ -49,6 +47,8 @@
 	}
 	:global(.surface-background) {
 		--surface-color: var(--color-background, white);
+		--surface-tint: var(--surface-foreground);
+		--surface-soft-strength: 5%;
 		--surface-content: inherit;
 		--surface-neutral-content: inherit;
 	}
@@ -67,26 +67,14 @@
 	:global(.surface-error) {
 		--surface-color: var(--color-error, red);
 	}
-	:global(.surface-soft),
-	:global(.surface-filled) {
-		--surface-fill: color-mix(
-			in srgb,
-			var(--surface-color) var(--surface-strength),
-			var(--surface-base)
-		);
-		--surface-highlight: inset 0 1px 0
-			color-mix(in srgb, var(--surface-foreground) 16%, transparent);
-	}
 	:global(.surface-soft) {
-		--surface-strength: 16%;
+		--surface-strength: var(--surface-soft-strength);
 		--surface-fill: color-mix(
 			in srgb,
-			color-mix(in srgb, var(--surface-color) var(--surface-strength), var(--surface-base)) 85%,
-			transparent
+			var(--surface-tint) var(--surface-strength),
+			var(--surface-base)
 		);
-		--surface-border: color-mix(in srgb, var(--surface-color) 30%, transparent);
 		--surface-content: color-mix(in srgb, var(--surface-color) 80%, var(--surface-foreground));
-		--surface-blur: blur(0.5rem) saturate(120%);
 	}
 	:global(.surface-filled) {
 		--surface-strength: 100%;
@@ -95,45 +83,35 @@
 			var(--surface-color) var(--surface-strength),
 			var(--surface-foreground)
 		);
-		--surface-border: color-mix(in srgb, var(--surface-color) 68%, var(--surface-foreground));
 		--surface-content: var(--surface-base);
-		--surface-highlight: inset 0 1px 0
-			color-mix(in srgb, var(--surface-foreground) 28%, transparent);
+	}
+	:global(.surface-background.surface-filled) {
+		--surface-fill: color-mix(
+			in srgb,
+			var(--surface-base) var(--surface-strength),
+			var(--surface-foreground)
+		);
 	}
 	:global(.surface-background:is(.surface-soft, .surface-filled)) {
 		--surface-content: var(--surface-foreground);
 	}
 	:global(.surface-shadow-small) {
-		--surface-shadow: 0 2px 6px color-mix(in srgb, var(--surface-foreground) 8%, transparent);
+		--surface-shadow: 0 2px 6px color-mix(in srgb, black 8%, transparent);
 	}
 	:global(.surface-shadow-medium) {
-		--surface-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--surface-foreground) 12%, transparent);
+		--surface-shadow: 0 0.5rem 1.5rem color-mix(in srgb, black 12%, transparent);
 	}
 	:global(.surface-shadow-large) {
-		--surface-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--surface-foreground) 20%, transparent);
+		--surface-shadow: 0 1.5rem 4rem color-mix(in srgb, black 20%, transparent);
 	}
 	:global(.surface-hover-small) {
 		--surface-hover: 2%;
-		--surface-glow-size: 0.5rem;
 	}
 	:global(.surface-hover-medium) {
 		--surface-hover: 4%;
-		--surface-glow-size: 1rem;
 	}
 	:global(.surface-hover-large) {
 		--surface-hover: 8%;
-		--surface-glow-size: 1.5rem;
-	}
-	:global(
-		.surface:is(.surface-hover-small, .surface-hover-medium, .surface-hover-large):not(
-				:disabled,
-				[aria-disabled='true'],
-				[data-surface-disabled='true']
-			):is(:hover, :focus-visible, [data-surface-pressed='true'])
-	) {
-		--surface-glow: 0 0 var(--surface-glow-size)
-			color-mix(in srgb, var(--surface-color) 10%, transparent);
-		--surface-border: color-mix(in srgb, var(--surface-color) 40%, transparent);
 	}
 	:global(
 		.surface-soft:is(.surface-hover-small, .surface-hover-medium, .surface-hover-large):not(
@@ -142,7 +120,7 @@
 				[data-surface-disabled='true']
 			):is(:hover, :focus-visible, [data-surface-pressed='true'])
 	) {
-		--surface-strength: calc(16% + var(--surface-hover));
+		--surface-strength: calc(var(--surface-soft-strength) + var(--surface-hover));
 	}
 	:global(
 		.surface-filled:is(.surface-hover-small, .surface-hover-medium, .surface-hover-large):not(
@@ -160,7 +138,7 @@
 				[data-surface-disabled='true']
 			):is(:hover, :focus-visible, [data-surface-pressed='true'])
 	) {
-		--surface-fill: color-mix(in srgb, var(--surface-color) var(--surface-hover), transparent);
+		--surface-strength: calc(var(--surface-neutral-strength) + var(--surface-hover));
 		--surface-content: var(--surface-neutral-content);
 	}
 	:global(

package/src/lib/theme/theme.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	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';
 	import type { ThemeProps } from './types.js';
@@ -10,6 +11,7 @@
 
 <Colors {palette} />
 <Surfaces />
+<Glass />
 <Fonts />
 <Styles />