itube-specs 0.0.855 → 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,25 +1,38 @@
+@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,),
+  text: (--video-mini-card-title, --radio-text, --checkbox-text),
   text-muted: (--video-mini-card-channel, --video-mini-card-duration),
   control-bg: (--input-bg, --select-bg),
   control-compact-bg: (--input-s-bg,),
@@ -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/info/main.vue

@@ -33,6 +33,7 @@
           <UiBtn
             v-if="featureFlags.FeatureFollowEnabled"
             theme="muted"
+            class="info-main__header-button"
             size="s"
             @click="onFollowClick"
           >
@@ -45,6 +46,7 @@
           <UiBtn
             theme="muted"
             size="s"
+            class="info-main__header-button"
             @click="isShareOpen = true"
           >
             <UiIcon
@@ -458,4 +460,8 @@ const socialItems = computed<ILinkItem[]>(() => {
   margin-left: 6px;
   vertical-align: middle;
 }
+
+.info-main__header-button {
+  @include button-variant(info-button);
+}
 </style>

package/components/player/interface.vue

@@ -182,6 +182,7 @@ onMounted(() => {
 
 .player-interface__button {
   @include font-sm;
+  @include button-variant(interface-button);
 
   display: flex;
   flex-wrap: nowrap;

package/components/player/playlist.vue

@@ -10,6 +10,7 @@
             v-if="featureFlags.FeatureFollowEnabled"
             theme="muted"
             size="s"
+            class="player-playlist__middle-button"
             @click="onFollowClick"
           >
             <UiIcon
@@ -21,6 +22,7 @@
           <UiBtn
             theme="muted"
             size="s"
+            class="player-playlist__middle-button"
             @click="isShareOpen = true"
           >
             <UiIcon
@@ -468,4 +470,8 @@ function onFollowClick() {
 .player-playlist__like {
   margin-left: auto;
 }
+
+.player-playlist__middle-button {
+  @include button-variant(playlist-button)
+}
 </style>

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/checkbox.vue

@@ -105,7 +105,7 @@ function onChange(event: Event) {
 .ui-checkbox__label {
   @include font-sm;
 
-  color: $checkbox-label;
+  color: var(--checkbox-text, #{$checkbox-label});
   grid-column: 2;
   grid-row: 1;
   user-select: none;

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/components/ui/radio.vue

@@ -106,7 +106,7 @@ const isChecked = computed(() => properties.modelValue === properties.value);
   grid-column: 2;
   grid-row: 1;
   user-select: none;
-  color: $radio-label;
+  color: var(--radio-text, #{$radio-label});
 
   @include from-br(sm) {
     @include font-sm;

package/package.json

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