itube-specs 0.0.856 → 0.0.857

package/assets/scss/mixins/_button.scss

@@ -61,6 +61,11 @@ $button-variants: (
 //
 // Ключа в карте темы нет — не печатается ничего, работает вариант из пропа
 // theme= на вызове. Так тема, которой тут нечего менять, не пишет ни строки.
+//
+// Класс на элементе при этом остаётся тем, что задан пропом: кнопка может
+// висеть с `--muted`, а выглядеть как primary. Поэтому первой строкой
+// печатается `--button-variant` — маркер для DevTools, который объясняет
+// расхождение. Никем не читается, существует только как документация.
 @mixin button-variant($key) {
   $name: map.get($button-variant-overrides, $key);
 
@@ -71,6 +76,8 @@ $button-variants: (
       @error 'button-variant(): неизвестный вариант `#{$name}` для ключа `#{$key}`. Допустимые: #{map.keys($button-variants)}';
     }
 
+    --button-variant: #{$name};
+
     @each $prop, $value in $variant {
       --button-#{$prop}: #{$value};
     }

package/assets/scss/mixins/_surface.scss

@@ -1,23 +1,36 @@
+@use 'sass:list';
 @use 'sass:map';
-@use 'sass:meta';
+@use 'vars' as *;
 
 // Контракт подложки ("островка"): блок объявляет цвета для того, что лежит
 // внутри, и всё подхватывает это каскадом.
 //
+//   // в компоненте
+//   .ui-popup { @include surface(overlay); }
+//
+//   // в теме — только отличия
+//   $surfaces: (overlay: (control-bg: $color-slate-750, text: $color-white));
+//
+// Подложки нет в карте темы — не печатается ничего, компоненты остаются на
+// своих базовых токенах. Так тема, которой тут нечего менять, не пишет ни строки.
+//
 // Каждый цвет компонента читается своей переменной — var(--input-bg, <токен темы>).
 // Один уровень, никакой вложенности. Значит любой цвет можно переопределить
-// поштучно, не задевая остальные:
+// поштучно, минуя роли:
 //
 //   .promo-card {
 //     --input-s-border: transparent;
 //   }
 //
-// Роли ниже — сокращение для частого случая: одна роль расписывается сразу на
-// все переменные, которые ей соответствуют. Тема без островков передаёт null,
-// тогда роль не раскрывается и компоненты остаются на своих базовых токенах.
+// Роли — сокращение для частого случая: одна роль расписывается сразу на все
+// переменные, которые ей соответствуют.
 //
 // Новый компонент не добавляет ролей — дописывает свои переменные в готовые.
 // Новая роль нужна только когда тема должна развести то, что сейчас склеено.
+
+// Тема вправе не описывать подложку, поэтому её отсутствие в карте — не ошибка.
+// А вот опечатка в @include surface(...) иначе прошла бы молча, отсюда список.
+$surface-names: (overlay,);
 $surface-roles: (
   text: (--video-mini-card-title, --radio-text, --checkbox-text),
   text-muted: (--video-mini-card-channel, --video-mini-card-duration),
@@ -44,12 +57,18 @@ $surface-roles: (
   accent-border: (--select-border--active,)
 );
 
-@mixin surface($roles...) {
-  @each $role, $value in meta.keywords($roles) {
+@mixin surface($name) {
+  @if not list.index($surface-names, $name) {
+    @error 'surface(): неизвестная подложка `#{$name}`. Допустимые: #{$surface-names}';
+  }
+
+  $overrides: map.get($surfaces, $name);
+
+  @each $role, $value in if($overrides, $overrides, ()) {
     $props: map.get($surface-roles, $role);
 
     @if not $props {
-      @error 'surface(): неизвестная роль `#{$role}`. Допустимые: #{map.keys($surface-roles)}';
+      @error 'surface(#{$name}): неизвестная роль `#{$role}`. Допустимые: #{map.keys($surface-roles)}';
     }
 
     @if $value {

package/components/ui/btn.vue

@@ -64,13 +64,13 @@ const slotText = computed(() => {
   padding-inline: 12px;
   width: max-content;
   font-weight: 500;
-  color: var(--button-text, #{$button-primary-text});
+  color: var(--button-text, #{$button-text});
   border-radius: $radius-lg;
   text-decoration: none;
   user-select: none;
   white-space: nowrap;
   text-transform: capitalize;
-  border: 1px solid var(--button-border, #{$button-primary-border});
+  border: 1px solid var(--button-border, #{$button-border});
 
   @include from-br(sm) {
     padding-inline: 16px;

package/components/ui/popup.vue

@@ -124,31 +124,7 @@ const { snackbarText, isSnackBarInPopup } = useSnackbar();
 
 <style lang="scss">
 .ui-popup {
-  @include surface(
-    $text: $surface-overlay-text,
-    $text-muted: $surface-overlay-text-muted,
-    $control-bg: $surface-overlay-control-bg,
-    $control-compact-bg: $surface-overlay-control-compact-bg,
-    $control-bg--disabled: $surface-overlay-control-bg--disabled,
-    $control-text: $surface-overlay-control-text,
-    $control-text--disabled: $surface-overlay-control-text--disabled,
-    $control-placeholder: $surface-overlay-control-placeholder,
-    $control-label: $surface-overlay-control-label,
-    $control-compact-label: $surface-overlay-control-compact-label,
-    $control-border: $surface-overlay-control-border,
-    $control-compact-border: $surface-overlay-control-compact-border,
-    $control-border--focus: $surface-overlay-control-border--focus,
-    $control-compact-border--focus: $surface-overlay-control-compact-border--focus,
-    $control-border--error: $surface-overlay-control-border--error,
-    $control-icon: $surface-overlay-control-icon,
-    $control-icon--hover: $surface-overlay-control-icon--hover,
-    $option-bg: $surface-overlay-option-bg,
-    $option-text: $surface-overlay-option-text,
-    $accent: $surface-overlay-accent,
-    $accent-text: $surface-overlay-accent-text,
-    $accent-bg-subtle: $surface-overlay-accent-bg-subtle,
-    $accent-border: $surface-overlay-accent-border
-  );
+  @include surface(overlay);
 }
 
 .ui-popup[open] {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.856",
+  "version": "0.0.857",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {