itube-specs 0.0.854 → 0.0.856

package/assets/scss/mixins/_button.scss

@@ -0,0 +1,78 @@
+@use 'sass:map';
+@use 'vars' as *;
+
+// Бандлы вариантов кнопки: каждый вариант даёт полный набор цветов, чтобы
+// место могло переключиться на любой из них целиком, а не по одному цвету.
+$button-variants: (
+  primary: (
+    'bg': $button-primary-bg,
+    'bg--hover': $button-primary-bg--hover,
+    'bg--active': $button-primary-bg,
+    'text': $button-primary-text,
+    'text--active': $button-primary-text,
+    'border': $button-primary-border,
+    'border--hover': $button-primary-border,
+    'border--active': $button-primary-border,
+    'icon': $button-primary-text,
+  ),
+  secondary: (
+    'bg': $button-secondary-bg,
+    'bg--hover': $button-secondary-bg--hover,
+    'bg--active': $button-secondary-bg--active,
+    'text': $button-secondary-text,
+    'text--active': $button-secondary-text--active,
+    'border': $button-secondary-border,
+    'border--hover': $button-secondary-border,
+    'border--active': $button-secondary-border--active,
+    'icon': $button-secondary-icon,
+  ),
+  muted: (
+    'bg': $button-muted-bg,
+    'bg--hover': $button-muted-bg--hover,
+    'bg--active': $button-muted-bg,
+    'text': $button-muted-text,
+    'text--active': $button-muted-text,
+    'border': $button-muted-border,
+    'border--hover': $button-muted-border--hover,
+    'border--active': $button-muted-border,
+    'icon': $button-muted-text,
+  ),
+  warning: (
+    'bg': $button-warning-bg,
+    'bg--hover': $button-warning-bg--hover,
+    'bg--active': $button-warning-bg,
+    'text': $button-warning-text,
+    'text--active': $button-warning-text,
+    'border': $button-warning-border,
+    'border--hover': $button-warning-border,
+    'border--active': $button-warning-border,
+    'icon': $button-warning-text,
+  ),
+);
+
+// Вид кнопки в конкретном месте выбирает ТЕМА, а не компонент: место говорит
+// «спроси у темы по этому ключу», тема отвечает именем варианта.
+//
+//   // в компоненте
+//   .auth-login__cancel { @include button-variant(auth-login-cancel); }
+//
+//   // в теме
+//   $button-variant-overrides: (auth-login-cancel: muted);
+//
+// Ключа в карте темы нет — не печатается ничего, работает вариант из пропа
+// theme= на вызове. Так тема, которой тут нечего менять, не пишет ни строки.
+@mixin button-variant($key) {
+  $name: map.get($button-variant-overrides, $key);
+
+  @if $name {
+    $variant: map.get($button-variants, $name);
+
+    @if not $variant {
+      @error 'button-variant(): неизвестный вариант `#{$name}` для ключа `#{$key}`. Допустимые: #{map.keys($button-variants)}';
+    }
+
+    @each $prop, $value in $variant {
+      --button-#{$prop}: #{$value};
+    }
+  }
+}

package/assets/scss/mixins/_index.scss

@@ -1,6 +1,7 @@
 @forward 'font-sizes';
 @forward 'accessibility';
 @forward 'breakpoints';
+@forward 'button';
 @forward 'page';
 @forward 'surface';
 @forward 'video-card';

package/assets/scss/mixins/_surface.scss

@@ -19,7 +19,7 @@
 // Новый компонент не добавляет ролей — дописывает свои переменные в готовые.
 // Новая роль нужна только когда тема должна развести то, что сейчас склеено.
 $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,),

package/components/filter/main.vue

@@ -26,6 +26,7 @@
             <UiBtn
               :disabled="!isFiltered"
               theme="secondary"
+              class="filter-main__reset"
               wide
               size="l"
               @click="reset"
@@ -306,4 +307,8 @@ function reset() {
   grid-template-columns: repeat(2, 1fr);
   column-gap: 8px;
 }
+
+.filter-main__reset {
+  @include button-variant(filter-reset)
+}
 </style>

package/components/filter/model.vue

@@ -36,6 +36,7 @@
               wide
               :disabled="!isPendingFiltered"
               size="l"
+              class="filter-model__reset"
               theme="secondary"
               @click="onResetClick"
             >{{ t('reset_all') }}
@@ -241,4 +242,8 @@ function onApplyClick() {
 .filter-model__units {
   margin-left: 8px;
 }
+
+.filter-model__reset {
+  @include button-variant(filter-reset);
+}
 </style>

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: $button-primary-text;
+  color: var(--button-text, #{$button-primary-text});
   border-radius: $radius-lg;
   text-decoration: none;
   user-select: none;
   white-space: nowrap;
   text-transform: capitalize;
-  border: 1px solid $button-primary-border;
+  border: 1px solid var(--button-border, #{$button-primary-border});
 
   @include from-br(sm) {
     padding-inline: 16px;
@@ -101,35 +101,35 @@ const slotText = computed(() => {
 }
 
 .ui-btn.--primary {
-  background-color: $button-primary-bg;
+  background-color: var(--button-bg, #{$button-primary-bg});
 
   @include hover(background-color) {
     &:not([disabled], .--disabled) {
-      background-color: $button-primary-bg--hover;
+      background-color: var(--button-bg--hover, #{$button-primary-bg--hover});
     }
   }
 }
 
 .ui-btn.--secondary {
-  background-color: $button-secondary-bg;
-  color: $button-secondary-text;
-  border-color: $button-secondary-border;
+  background-color: var(--button-bg, #{$button-secondary-bg});
+  color: var(--button-text, #{$button-secondary-text});
+  border-color: var(--button-border, #{$button-secondary-border});
 
   @include hover(background-color) {
     &:not(.--active, [disabled], .--disabled) {
-      background-color: $button-secondary-bg--hover;
+      background-color: var(--button-bg--hover, #{$button-secondary-bg--hover});
     }
   }
 }
 
 .ui-btn.--secondary > .ui-icon:first-child {
-  color: $button-secondary-icon;
+  color: var(--button-icon, #{$button-secondary-icon});
 }
 
 .ui-btn.--active.--secondary {
-  background-color: $button-secondary-bg--active;
-  color: $button-secondary-text--active;
-  border-color: $button-secondary-border--active;
+  background-color: var(--button-bg--active, #{$button-secondary-bg--active});
+  color: var(--button-text--active, #{$button-secondary-text--active});
+  border-color: var(--button-border--active, #{$button-secondary-border--active});
 }
 
 .ui-btn.--icon {
@@ -146,22 +146,23 @@ const slotText = computed(() => {
 }
 
 .ui-btn.--muted {
-  background-color: $button-muted-bg;
-  color: $button-muted-text;
-  border-color: transparent;
+  background-color: var(--button-bg, #{$button-muted-bg});
+  color: var(--button-text, #{$button-muted-text});
+  border-color: var(--button-border, #{$button-muted-border});
 
-  @include hover(background-color) {
-    background-color: $button-muted-bg--hover;
+  @include hover(background-color, border) {
+    background-color: var(--button-bg--hover, #{$button-muted-bg--hover});
+    border-color: var(--button-border--hover, #{$button-muted-border--hover});
   }
 }
 
 .ui-btn.--warning {
-  background-color: $button-warning-bg;
-  border: 1px solid $button-warning-border;
-  color: $button-warning-text;
+  background-color: var(--button-bg, #{$button-warning-bg});
+  border: 1px solid var(--button-border, #{$button-warning-border});
+  color: var(--button-text, #{$button-warning-text});
 
   @include hover(background-color) {
-    background-color: $button-warning-bg--hover;
+    background-color: var(--button-bg--hover, #{$button-warning-bg--hover});
   }
 }
 </style>

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/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.854",
+  "version": "0.0.856",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {

package/pages/user/profile.vue

@@ -247,6 +247,8 @@ watchEffect(() => {
 }
 
 .profile__edit {
+  @include button-variant(profile-edit);
+
   margin-top: 12px;
 }
 </style>