@ryuzaki13/react-foundation-ui 2.1.0 → 3.0.0

package/src/styles/mixins/_controls.scss

@@ -1,20 +1,20 @@
 @use "./mixin" as *;
 
 @mixin ui-tone($tone) {
-	--ui-tone-text: var(--status-#{$tone}-text);
-	--ui-tone-text-hover: var(--status-#{$tone}-text-hover);
-	--ui-tone-text-active: var(--status-#{$tone}-text-active);
-	--ui-tone-fill: var(--status-#{$tone}-fill);
-	--ui-tone-fill-hover: var(--status-#{$tone}-fill-hover);
-	--ui-tone-fill-active: var(--status-#{$tone}-fill-active);
-	--ui-tone-on-fill: var(--status-#{$tone}-on-fill);
-	--ui-tone-soft: var(--status-#{$tone}-soft);
-	--ui-tone-border: var(--status-#{$tone}-border);
-	--ui-tone-border-hover: var(--status-#{$tone}-border-hover);
-	--ui-tone-border-active: var(--status-#{$tone}-border-active);
-	--ui-tone-border-focus: var(--status-#{$tone}-border-focus);
-	--ui-tone-ghost-hover: color-mix(in srgb, var(--status-#{$tone}-fill-hover) 10%, var(--surface-0));
-	--ui-tone-ghost-active: color-mix(in srgb, var(--status-#{$tone}-fill-active) 20%, var(--surface-0));
+	--ui-tone-text: var(--#{$tone}-text);
+	--ui-tone-text-hover: color-mix(in srgb, var(--#{$tone}-text) 88%, var(--content-0));
+	--ui-tone-text-active: color-mix(in srgb, var(--#{$tone}-text) 76%, var(--content-0));
+	--ui-tone-fill: var(--#{$tone}-fill);
+	--ui-tone-fill-hover: color-mix(in srgb, var(--#{$tone}-fill) 88%, var(--content-0));
+	--ui-tone-fill-active: color-mix(in srgb, var(--#{$tone}-fill) 76%, var(--content-0));
+	--ui-tone-on-fill: var(--#{$tone}-on-fill);
+	--ui-tone-soft: color-mix(in srgb, var(--#{$tone}-fill) 12%, var(--surface-0));
+	--ui-tone-border: var(--#{$tone}-border);
+	--ui-tone-border-hover: color-mix(in srgb, var(--#{$tone}-border) 88%, var(--content-0));
+	--ui-tone-border-active: color-mix(in srgb, var(--#{$tone}-border) 76%, var(--content-0));
+	--ui-tone-border-focus: var(--focus-ring);
+	--ui-tone-ghost-hover: color-mix(in srgb, var(--#{$tone}-fill) 10%, var(--surface-0));
+	--ui-tone-ghost-active: color-mix(in srgb, var(--#{$tone}-fill) 20%, var(--surface-0));
 }
 
 @mixin ui-appearance-solid {
@@ -28,6 +28,9 @@
 	--ui-border-hover: transparent;
 	--ui-border-active: transparent;
 	--ui-border-focus: transparent;
+	--ui-disabled-color: var(--content-1);
+	--ui-disabled-background: color-mix(in srgb, var(--ui-tone-fill) 14%, var(--surface-2));
+	--ui-disabled-border: transparent;
 }
 
 @mixin ui-appearance-outline {
@@ -41,6 +44,9 @@
 	--ui-border-hover: var(--ui-tone-border-hover);
 	--ui-border-active: var(--ui-tone-border-active);
 	--ui-border-focus: var(--ui-tone-border-focus);
+	--ui-disabled-color: color-mix(in srgb, var(--ui-tone-text) 32%, var(--content-2));
+	--ui-disabled-background: var(--surface-0);
+	--ui-disabled-border: color-mix(in srgb, var(--ui-tone-border) 28%, var(--border-0));
 }
 
 @mixin ui-appearance-ghost {
@@ -54,6 +60,9 @@
 	--ui-border-hover: transparent;
 	--ui-border-active: transparent;
 	--ui-border-focus: transparent;
+	--ui-disabled-color: color-mix(in srgb, var(--ui-tone-text) 32%, var(--content-2));
+	--ui-disabled-background: transparent;
+	--ui-disabled-border: transparent;
 }
 
 @mixin ui-appearance-transparent {
@@ -67,6 +76,9 @@
 	--ui-border-hover: transparent;
 	--ui-border-active: transparent;
 	--ui-border-focus: transparent;
+	--ui-disabled-color: color-mix(in srgb, var(--ui-tone-text) 32%, var(--content-2));
+	--ui-disabled-background: transparent;
+	--ui-disabled-border: transparent;
 }
 
 @mixin ui-control-base {
@@ -94,27 +106,32 @@
 		background-color: var(--ui-background-active);
 	}
 
-	&:focus,
-	&:focus-within {
-		// Фокус обозначается границей и focus-ring, но не подменяет фон active-состоянием.
-		// Иначе сохранённый Safari focus после touch-события перекрывает selected/open фон consumer-компонента.
-		border-color: var(--ui-border-focus);
-	}
+	// &:focus,
+	// &:focus-within {
+	// 	border-color: var(--ui-border-focus);
+	// }
 
 	&:focus-visible {
 		@include focusVisible;
 	}
 
-	// Для нормальных компонентов с реальным input/button элементов
+	// Disabled-состояние берёт структуру из appearance: solid остаётся без рамки,
+	// а ghost/transparent — без фона. Цвета задаются явно, чтобы не накапливать opacity родителей.
 	&:disabled,
-	// Для специфичных компонентов, которые выдают внешне за input/button и имеют класс .uiInputControlFake
+	&[data-disabled] {
+		color: var(--ui-disabled-color, var(--content-2));
+		background-color: var(--ui-disabled-background, var(--surface-2));
+		border-color: var(--ui-disabled-border, var(--overlay-backdrop));
+	}
+
+	&:disabled {
+		cursor: not-allowed;
+	}
+
+	// Ненативные контролы не блокируют события сами, поэтому их отключаем явно.
 	&[data-disabled] {
 		cursor: default;
 		pointer-events: none;
-		// opacity: var(--disabled-opacity);
-		color: var(--content-2);
-		background-color: var(--surface-2);
-		border-color: var(--overlay-backdrop);
 	}
 }
 

package/src/styles/mixins/_mixin.scss

@@ -1,5 +1,4 @@
 @use "sass:math";
-@use "sass:map";
 @use "media" as *;
 
 // @function fluid($max: 100, $min: 10) {
@@ -111,189 +110,3 @@
 		@include focusVisible;
 	}
 }
-
-@function status-scale($L, $C, $H, $mode) {
-	@if $mode == light {
-		@return (
-			outline: (
-				base: oklch($L $C $H),
-				hover: oklch($L - 0.05 $C - 0.01 $H),
-				active: oklch($L - 0.1 $C - 0.03 $H),
-				focus: oklch($L - 0.06 $C + 0.03 $H)
-			),
-			border: (
-				base: oklch($L $C $H),
-				hover: oklch($L - 0.05 $C + 0.01 $H + 5),
-				active: oklch($L - 0.1 $C + 0.01 $H - 5),
-				focus: oklch($L $C + 0.1 $H - 5)
-			),
-			fill: (
-				base: oklch($L + 0.06 $C * 1.125 $H + 3),
-				hover: oklch($L + 0.03 $C * 1.125 $H + 3),
-				active: oklch($L + 0.06 $C * 1.25 $H + 6),
-				on-fill: oklch(1 0 0)
-			),
-			soft: oklch(0.94 ($C * 0.35) $H)
-		);
-	}
-
-	@if $mode == dark {
-		@return (
-			outline: (
-				base: oklch($L $C $H),
-				hover: oklch($L + 0.06 $C + 0.01 $H),
-				active: oklch($L - 0.04 $C $H),
-				focus: oklch($L + 0.06 $C + 0.02 $H)
-			),
-			border: (
-				base: oklch($L $C $H),
-				hover: oklch($L + 0.06 $C + 0.01 $H),
-				active: oklch($L - 0.04 $C $H),
-				focus: oklch($L + 0.02 $C + 0.1 $H)
-			),
-			fill: (
-				base: oklch($L + 0.06 $C * 0.95 $H),
-				hover: oklch($L + 0.1 $C * 0.95 $H),
-				active: oklch($L + 0.1 $C * 0.8 $H),
-				on-fill: oklch(0.26 ($C * 0.35) $H)
-			),
-			soft: oklch(0.3 ($C * 0.45) $H)
-		);
-	}
-}
-
-// Для нейтральной схемы никак общую логику не применить, поэтому отдельная обработка
-@function status-border-neutral($L, $C, $H, $mode) {
-	@if $mode == light {
-		@return (
-			base: oklch($L $C $H),
-			hover: oklch($L - 0.1 $C + 0.01 $H + 5),
-			active: oklch($L - 0.2 $C + 0.01 $H - 5),
-			focus: oklch($L - 0.3 $C $H)
-		);
-	}
-
-	@if $mode == dark {
-		@return (
-			base: oklch($L $C $H),
-			hover: oklch($L + 0.1 $C + 0.01 $H),
-			active: oklch($L + 0.2 $C + 0.01 $H),
-			focus: oklch($L + 0.2 $C + 0.02 $H)
-		);
-	}
-}
-
-@mixin generate-status-fill($name, $L, $C, $H, $mode) {
-	$s: status-scale($L, $C, $H, $mode);
-
-	--status-#{$name}-text: var(--hc-status-#{$name}-text, #{map.get(map.get($s, outline), base)});
-	--status-#{$name}-text-hover: var(--hc-status-#{$name}-text, #{map.get(map.get($s, outline), hover)});
-	--status-#{$name}-text-active: var(--hc-status-#{$name}-text, #{map.get(map.get($s, outline), active)});
-
-	--status-#{$name}-fill: var(--hc-status-#{$name}-fill, #{map.get(map.get($s, fill), base)});
-	--status-#{$name}-fill-hover: var(--hc-status-#{$name}-fill, #{map.get(map.get($s, fill), hover)});
-	--status-#{$name}-fill-active: var(--hc-status-#{$name}-fill, #{map.get(map.get($s, fill), active)});
-	--status-#{$name}-on-fill: var(--hc-status-#{$name}-on-fill, #{map.get(map.get($s, fill), on-fill)});
-
-	--status-#{$name}-soft: var(--hc-status-#{$name}-soft, #{map.get($s, soft)});
-}
-
-@mixin generate-status-border($name, $L, $C, $H, $mode) {
-	@if $name == neutral {
-		$s: status-border-neutral($L, $C, $H, $mode);
-
-		--border-0: var(--hc-border, #{map.get($s, base)});
-		--border-1: var(--hc-border, #{map.get($s, hover)});
-		--border-2: var(--hc-border, #{map.get($s, active)});
-		--border-focus: var(--hc-border-focus, #{map.get($s, focus)});
-
-		--status-#{$name}-border: var(--border-0);
-		--status-#{$name}-border-hover: var(--border-1);
-		--status-#{$name}-border-active: var(--border-2);
-		--status-#{$name}-border-focus: var(--border-focus);
-	} @else {
-		$s: status-scale($L, $C, $H, $mode);
-
-		--status-#{$name}-border: var(--hc-status-#{$name}-border, #{map.get(map.get($s, border), base)});
-		--status-#{$name}-border-hover: var(--hc-status-#{$name}-border, #{map.get(map.get($s, border), hover)});
-		--status-#{$name}-border-active: var(--hc-status-#{$name}-border, #{map.get(map.get($s, border), active)});
-		--status-#{$name}-border-focus: var(--hc-status-#{$name}-border, #{map.get(map.get($s, border), focus)});
-	}
-}
-
-@function status-border-neutral2($L, $C, $H, $mode) {
-	@if $mode == light {
-		@return (
-			base: oklch($L $C $H),
-			hover: oklch($L + 0.13 $C + 0.15 $H - 89),
-			active: oklch($L - 0.2 $C + 0.15 $H + 19),
-			focus: oklch($L + 0.15 $C + 0.2 $H - 89)
-		);
-	}
-
-	@if $mode == dark {
-		@return (
-			base: oklch($L $C $H),
-			hover: oklch($L + 0.1 $C + 0.01 $H),
-			active: oklch($L + 0.2 $C + 0.01 $H),
-			focus: oklch($L + 0.2 $C + 0.02 $H)
-		);
-	}
-}
-
-@mixin generate-neutral-border2() {
-	--status-neutral-border: var(--border-0);
-	--status-neutral-border-hover: var(--border-1);
-	--status-neutral-border-active: var(--border-2);
-	--status-neutral-border-focus: var(--border-focus);
-}
-
-@function status-border-neutral3($L, $C, $H, $mode) {
-	@if $mode == light {
-		@return (
-			base: oklch($L $C $H),
-			hover: oklch($L - 0.13 $C + 0.15 $H + 59),
-			active: oklch($L - 0.25 $C + 0.2 $H + 9),
-			focus: oklch($L - 0.15 $C + 0.2 $H + 59)
-		);
-	}
-
-	@if $mode == dark {
-		@return (
-			base: oklch($L $C $H),
-			hover: oklch($L + 0.1 $C + 0.01 $H),
-			active: oklch($L + 0.2 $C + 0.01 $H),
-			focus: oklch($L + 0.2 $C + 0.02 $H)
-		);
-	}
-}
-
-@mixin generate-neutral-border3($L, $C, $H, $mode) {
-	$s: status-border-neutral3($L, $C, $H, $mode);
-
-	--border-0: var(--hc-border, #{map.get($s, base)});
-	--border-1: var(--hc-border, #{map.get($s, hover)});
-	--border-2: var(--hc-border, #{map.get($s, active)});
-	--border-focus: var(--hc-border-focus, #{map.get($s, focus)});
-
-	--status-neutral-border: var(--border-0);
-	--status-neutral-border-hover: var(--border-1);
-	--status-neutral-border-active: var(--border-2);
-	--status-neutral-border-focus: var(--border-focus);
-}
-
-@mixin generate-accent($L, $C, $H, $mode) {
-	@if $mode == light {
-		--content-accent: var(--hc-content-accent, oklch(#{$L} #{$C} #{$H}));
-		--surface-accent: var(--hc-surface-accent, oklch(#{$L + 0.4} #{math.max(0, $C - 0.2)} #{$H - 15}));
-		--border-accent: var(--hc-border-accent, oklch(#{$L - 0.03} #{math.max(0, $C - 0.08)} #{$H}));
-		// --focus-accent: var(--hc-focus-accent, oklch(#{$L + 0.04} #{$C + 0.05} #{$H}));
-	}
-
-	@if $mode == dark {
-		--content-accent: var(--hc-content-accent, oklch(#{$L} #{$C} #{$H}));
-		--surface-accent: var(--hc-surface-accent, oklch(#{$L - 0.4} #{math.max(0, $C - 0.15)} #{$H - 10}));
-		--border-accent: var(--hc-border-accent, oklch(#{$L - 0.08} #{math.max(0, $C - 0.1)} #{$H}));
-		// --focus-accent: var(--hc-focus-accent, oklch(#{$L + 0.06} #{$C + 0.03} #{$H}));
-	}
-}

package/src/styles/mixins/controls.test.ts

@@ -14,6 +14,24 @@ function compileUiControlBase(): string {
 	}).css;
 }
 
+/**
+ * Компилирует четыре appearance вместе с базовым контролом, чтобы проверять итоговый
+ * disabled-контракт, который реально получают Button и другие scheme-компоненты.
+ */
+function compileUiAppearances(): string {
+	return compileString(
+		`@use "controls" as *;
+		.solid { @include ui-tone("brand"); @include ui-appearance-solid; @include ui-control-base; }
+		.outline { @include ui-tone("brand"); @include ui-appearance-outline; @include ui-control-base; }
+		.ghost { @include ui-tone("brand"); @include ui-appearance-ghost; @include ui-control-base; }
+		.transparent { @include ui-tone("brand"); @include ui-appearance-transparent; @include ui-control-base; }`,
+		{
+			loadPaths: [resolve("src/styles/mixins")],
+			style: "expanded"
+		}
+	).css;
+}
+
 describe("ui-control-base", () => {
 	it("ограничивает hover устройствами с поддержкой наведения", () => {
 		const css = compileUiControlBase();
@@ -31,14 +49,18 @@ describe("ui-control-base", () => {
 		);
 	});
 
-	it("не подменяет фон элемента при сохранённом focus", () => {
-		const css = compileUiControlBase();
-		const focusRule = css.match(/\.control:focus,\s*\.control:focus-within \{[^}]*\}/)?.[0];
+	it("сохраняет структуру appearance в disabled-состоянии без opacity", () => {
+		const css = compileUiAppearances();
 
-		expect(focusRule).toContain("border-color: var(--ui-border-focus)");
-		expect(focusRule).not.toContain("background-color");
+		expect(css).toMatch(/\.solid \{[^}]*--ui-disabled-background: color-mix\([^;]+\);[^}]*--ui-disabled-border: transparent;/s);
 		expect(css).toMatch(
-			/\.control:focus-visible \{\s*outline: var\(--focus-width\) solid var\(--focus-ring\);\s*outline-offset: var\(--focus-offset\);\s*\}/
+			/\.outline \{[^}]*--ui-disabled-background: var\(--surface-0\);[^}]*--ui-disabled-border: color-mix\([^;]+\);/s
 		);
+		expect(css).toMatch(/\.ghost \{[^}]*--ui-disabled-background: transparent;[^}]*--ui-disabled-border: transparent;/s);
+		expect(css).toMatch(/\.transparent \{[^}]*--ui-disabled-background: transparent;[^}]*--ui-disabled-border: transparent;/s);
+
+		const disabledRules = css.match(/\.(?:solid|outline|ghost|transparent):disabled[^}]*\}/g)?.join("\n") ?? "";
+		expect(disabledRules).not.toContain("opacity");
+		expect(disabledRules).toContain("cursor: not-allowed");
 	});
 });

package/src/styles/themes/_interactive-surface.scss

@@ -1,19 +1,19 @@
 .interactiveSurface {
-	--c: var(--interactive-color, inherit);
-	--s: var(--interactive-surface, transparent);
-	--b: var(--interactive-border, transparent);
+	--c: inherit;
+	--s: transparent;
+	--b: transparent;
 
-	--ch: var(--interactive-hover-color, var(--c));
-	--sh: var(--interactive-hover-surface, var(--s));
-	--bh: var(--interactive-hover-border, var(--b));
+	--ch: var(--accent-on-fill);
+	--sh: var(--accent-fill);
+	--bh: var(--accent-border);
 
-	--ca: var(--interactive-active-color, var(--ch));
-	--sa: var(--interactive-active-surface, var(--sh));
-	--ba: var(--interactive-active-border, var(--bh));
+	--ca: var(--accent-on-fill);
+	--sa: var(--accent-fill);
+	--ba: var(--accent-border);
 
-	--cs: var(--interactive-selected-color, var(--ca));
-	--ss: var(--interactive-selected-surface, var(--sa));
-	--bs: var(--interactive-selected-border, var(--ba));
+	--cs: var(--accent-on-fill);
+	--ss: var(--accent-fill);
+	--bs: var(--accent-border);
 
 	// color: var(--c);
 	// background-color: var(--s);

package/src/styles/themes/_theme.scss

@@ -1,8 +1,6 @@
 @use "sass:map";
-@use "sass:meta";
 
 @use "../config" as stylesConfig;
-@use "../mixins/" as *;
 
 @function _theme-base($mode) {
 	@if $mode == light {
@@ -16,169 +14,35 @@
 	@error "Цветовая схема темы должна иметь значение light или dark, получено: #{$mode}.";
 }
 
-@function _scale-value($scale, $name, $fallback) {
-	@if meta.type-of($scale) == map and map.has-key($scale, $name) {
-		@return map.get($scale, $name);
-	}
-
-	@return $fallback;
-}
-
-@mixin _exact-accent-palette($accent) {
-	--content-accent: var(--hc-content-accent, #{map.get($accent, content)});
-	--surface-accent: var(--hc-surface-accent, #{map.get($accent, surface)});
-	--border-accent: var(--hc-border-accent, #{map.get($accent, border)});
-}
-
-@mixin _exact-status-palette($name, $status) {
-	$text: map.get($status, text);
-	$fill: map.get($status, fill);
-	$border: map.get($status, border);
-	$text-base: map.get($text, base);
-	$text-hover: _scale-value($text, hover, $text-base);
-	$text-active: _scale-value($text, active, $text-hover);
-	$fill-base: _scale-value($fill, base, $text-base);
-	$fill-hover: _scale-value($fill, hover, $fill-base);
-	$fill-active: _scale-value($fill, active, $fill-hover);
-	$fill-on: _scale-value($fill, on-fill, var(--surface-0));
-	$border-base: _scale-value($border, base, $text-base);
-	$border-hover: _scale-value($border, hover, $text-hover);
-	$border-active: _scale-value($border, active, $text-active);
-	$border-focus: _scale-value($border, focus, $border-active);
-
-	--status-#{$name}-text: var(--hc-status-#{$name}-text, #{$text-base});
-	--status-#{$name}-text-hover: var(--hc-status-#{$name}-text, #{$text-hover});
-	--status-#{$name}-text-active: var(--hc-status-#{$name}-text, #{$text-active});
-
-	--status-#{$name}-fill: var(--hc-status-#{$name}-fill, #{$fill-base});
-	--status-#{$name}-fill-hover: var(--hc-status-#{$name}-fill, #{$fill-hover});
-	--status-#{$name}-fill-active: var(--hc-status-#{$name}-fill, #{$fill-active});
-	--status-#{$name}-on-fill: var(--hc-status-#{$name}-on-fill, #{$fill-on});
-
-	@if map.has-key($fill, soft) {
-		--status-#{$name}-soft: var(--hc-status-#{$name}-soft, #{map.get($fill, soft)});
-	} @else {
-		--status-#{$name}-soft: var(--hc-status-#{$name}-soft, color-mix(in srgb, var(--status-#{$name}-fill) 12%, var(--surface-0)));
-	}
-
-	--status-#{$name}-border: var(--hc-status-#{$name}-border, #{$border-base});
-	--status-#{$name}-border-hover: var(--hc-status-#{$name}-border, #{$border-hover});
-	--status-#{$name}-border-active: var(--hc-status-#{$name}-border, #{$border-active});
-	--status-#{$name}-border-focus: var(--hc-status-#{$name}-border, #{$border-focus});
-
-	@if $name == neutral {
-		--border-0: var(--hc-border, #{$border-base});
-		--border-1: var(--hc-border, #{$border-hover});
-		--border-2: var(--hc-border, #{$border-active});
-		--border-focus: var(--hc-border-focus, #{$border-focus});
-	}
-}
-
-@function _status-overridden($status-overrides, $name) {
-	@return meta.type-of($status-overrides) == map and map.has-key($status-overrides, $name);
-}
-
-@mixin _adaptive-custom-statuses($mode, $status-overrides) {
-	@if not _status-overridden($status-overrides, brand) {
-		$brand-on-fill: var(--surface-0);
-
-		@if $mode == light {
-			$brand-on-fill: var(--content-0);
-		}
-
-		@include _exact-status-palette(
-			brand,
-			(
-				text: (
-					base: var(--content-accent)
-				),
-				fill: (
-					base: var(--content-accent),
-					hover: var(--border-accent),
-					active: var(--border-accent),
-					on-fill: $brand-on-fill,
-					soft: var(--surface-accent)
-				),
-				border: (
-					base: var(--border-accent)
-				)
-			)
-		);
-	}
-
-	@if not _status-overridden($status-overrides, neutral) {
-		@include _exact-status-palette(
-			neutral,
-			(
-				text: (
-					base: var(--content-0),
-					hover: var(--content-1),
-					active: var(--content-0)
-				),
-				fill: (
-					base: var(--content-0),
-					hover: var(--content-1),
-					active: var(--content-0),
-					on-fill: var(--surface-0),
-					soft: var(--surface-1)
-				),
-				border: (
-					base: var(--border-0),
-					hover: var(--border-1),
-					active: var(--border-2),
-					focus: var(--focus-ring)
-				)
-			)
-		);
-	}
-
-	@each $name in error, warning, success, info {
-		@if not _status-overridden($status-overrides, $name) {
-			// Плоские exact-token overrides меняют text/fill ниже по каскаду,
-			// поэтому производные значения связываются через CSS variables, а не копируют baseline.
-			--status-#{$name}-soft: var(--hc-status-#{$name}-soft, color-mix(in srgb, var(--status-#{$name}-fill) 12%, var(--surface-0)));
-			--status-#{$name}-border: var(--hc-status-#{$name}-border, var(--status-#{$name}-text));
-			--status-#{$name}-border-hover: var(--hc-status-#{$name}-border, var(--status-#{$name}-text-hover));
-			--status-#{$name}-border-active: var(--hc-status-#{$name}-border, var(--status-#{$name}-text-active));
-			--status-#{$name}-border-focus: var(--hc-status-#{$name}-border, var(--status-#{$name}-text-active));
-		}
-	}
+/// Выводит четыре публичные роли цветовой схемы.
+/// Состояния hover/active и мягкая заливка вычисляются внутри UI-компонентов,
+/// поэтому host настраивает только устойчивый минимальный контракт.
+@mixin _status-palette($name, $status) {
+	--#{$name}-text: var(--hc-#{$name}-text, #{map.get($status, text)});
+	--#{$name}-border: var(--hc-#{$name}-border, #{map.get($status, border)});
+	--#{$name}-fill: var(--hc-#{$name}-fill, #{map.get($status, fill)});
+	--#{$name}-on-fill: var(--hc-#{$name}-on-fill, #{map.get($status, on-fill)});
 }
 
-@mixin _theme-palette($theme, $mode) {
-	$accent: map.get($theme, accent);
-
-	@if map.has-key($accent, content) {
-		@include _exact-accent-palette($accent);
-	} @else {
-		@include generate-accent(map.get($accent, l), map.get($accent, c), map.get($accent, h), $mode);
-	}
-
+@mixin _theme-palette($theme) {
 	@each $name, $status in map.get($theme, status) {
-		@if map.has-key($status, text) {
-			@include _exact-status-palette($name, $status);
-		} @else {
-			$fill: map.get($status, fill);
-			$border: map.get($status, border);
-
-			@include generate-status-fill($name, map.get($fill, l), map.get($fill, c), map.get($fill, h), $mode);
-			@include generate-status-border($name, map.get($border, l), map.get($border, c), map.get($border, h), $mode);
-		}
+		@include _status-palette($name, $status);
 	}
+
+	// Базовые границы остаются общими layout-токенами, но получают цвет из neutral-схемы.
+	--border-0: var(--hc-border-0, var(--neutral-border));
+	--border-1: var(--hc-border-1, color-mix(in srgb, var(--neutral-border) 82%, var(--content-0)));
+	--border-2: var(--hc-border-2, color-mix(in srgb, var(--neutral-border) 64%, var(--content-0)));
+	--border-focus: var(--hc-border-focus, var(--focus-ring));
 }
 
-/// Формирует полную тему из настроенного baseline выбранной схемы и точечных переопределений.
-/// `accent` и элементы `status` принимают либо OKLCH seed `l/c/h`, либо точные semantic scales;
-/// плоская карта `tokens` выводится последней и остаётся escape hatch для любого CSS custom property.
+/// Формирует полную тему из baseline выбранной схемы и точечных переопределений.
+/// Карта `status` содержит `accent`, `brand`, `neutral`, `error`, `warning`,
+/// `success` и `info`; у каждой схемы ровно четыре роли: `text`, `border`,
+/// `fill` и `on-fill`. Карта `tokens` выводится последней как escape hatch.
 @mixin theme($mode, $overrides: ()) {
 	$resolved-theme: map.deep-merge(_theme-base($mode), $overrides);
-	$status-overrides: map.get($overrides, status);
-
-	@include _theme-palette($resolved-theme, $mode);
-
-	@if $overrides != () {
-		@include _adaptive-custom-statuses($mode, $status-overrides);
-	}
 
+	@include _theme-palette($resolved-theme);
 	@include stylesConfig.emit-declarations(stylesConfig.theme-tokens($resolved-theme));
 }