itube-specs 0.0.853 → 0.0.855

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,5 +1,7 @@
 @forward 'font-sizes';
 @forward 'accessibility';
 @forward 'breakpoints';
+@forward 'button';
 @forward 'page';
+@forward 'surface';
 @forward 'video-card';

package/assets/scss/mixins/_surface.scss

@@ -0,0 +1,61 @@
+@use 'sass:map';
+@use 'sass:meta';
+
+// Контракт подложки ("островка"): блок объявляет цвета для того, что лежит
+// внутри, и всё подхватывает это каскадом.
+//
+// Каждый цвет компонента читается своей переменной — var(--input-bg, <токен темы>).
+// Один уровень, никакой вложенности. Значит любой цвет можно переопределить
+// поштучно, не задевая остальные:
+//
+//   .promo-card {
+//     --input-s-border: transparent;
+//   }
+//
+// Роли ниже — сокращение для частого случая: одна роль расписывается сразу на
+// все переменные, которые ей соответствуют. Тема без островков передаёт null,
+// тогда роль не раскрывается и компоненты остаются на своих базовых токенах.
+//
+// Новый компонент не добавляет ролей — дописывает свои переменные в готовые.
+// Новая роль нужна только когда тема должна развести то, что сейчас склеено.
+$surface-roles: (
+  text: (--video-mini-card-title,),
+  text-muted: (--video-mini-card-channel, --video-mini-card-duration),
+  control-bg: (--input-bg, --select-bg),
+  control-compact-bg: (--input-s-bg,),
+  control-bg--disabled: (--input-bg--disabled,),
+  control-text: (--input-text, --select-text),
+  control-text--disabled: (--input-text--disabled,),
+  control-placeholder: (--input-placeholder, --select-placeholder),
+  control-label: (--input-label, --select-label),
+  control-compact-label: (--select-label-secondary,),
+  control-border: (--input-border, --select-border),
+  control-compact-border: (--input-s-border, --select-border-secondary),
+  control-border--focus: (--input-border--focus,),
+  control-compact-border--focus: (--input-s-border--focus,),
+  control-border--error: (--input-border--error,),
+  control-icon: (--input-icon, --input-pre-icon, --input-button-text, --select-icon),
+  control-icon--hover: (--input-button-text--hover,),
+  option-bg: (--select-option-bg,),
+  option-text: (--select-option-text,),
+  accent: (--select-count-bg--active,),
+  accent-text: (--select-count-text--active,),
+  accent-bg-subtle: (--select-bg--active,),
+  accent-border: (--select-border--active,)
+);
+
+@mixin surface($roles...) {
+  @each $role, $value in meta.keywords($roles) {
+    $props: map.get($surface-roles, $role);
+
+    @if not $props {
+      @error 'surface(): неизвестная роль `#{$role}`. Допустимые: #{map.keys($surface-roles)}';
+    }
+
+    @if $value {
+      @each $prop in $props {
+        #{$prop}: #{$value};
+      }
+    }
+  }
+}

package/components/card/video/mini.vue

@@ -97,7 +97,7 @@ function onPosterError() {
   @include font-md;
 
   max-width: 270px;
-  color: $video-mini-card-title;
+  color: var(--video-mini-card-title, #{$video-mini-card-title});
 
   @include from-br(sm) {
     @include font-sm;
@@ -114,7 +114,7 @@ function onPosterError() {
 .card-video-mini__channel {
   @include font-2xs;
 
-  color: $video-mini-card-channel;
+  color: var(--video-mini-card-channel, #{$video-mini-card-channel});
 
   @include from-br(sm) {
     @include font-xs;
@@ -128,7 +128,7 @@ function onPosterError() {
   align-items: center;
   column-gap: 6px;
   margin-top: 2px;
-  color: $video-mini-card-duration;
+  color: var(--video-mini-card-duration, #{$video-mini-card-duration});
 
   @include from-br(sm) {
     @include font-xs;

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/playlist/input.vue

@@ -134,6 +134,16 @@ const currentType = computed({
 .playlist-input__back {
   grid-column: 2;
   grid-row: 1;
+  position: relative;
+  color: $playlist-input-back;
+
+  &::after {
+    @include area-point;
+  }
+
+  @include hover(color) {
+    color: $playlist-input-back--hover;
+  }
 }
 
 .playlist-input__tooltip {
@@ -160,19 +170,6 @@ const currentType = computed({
   }
 }
 
-.playlist-input__back {
-  position: relative;
-  color: $playlist-input-back;
-
-  &::after {
-    @include area-point;
-  }
-
-  @include hover(color) {
-    color: $playlist-input-back--hover;
-  }
-}
-
 .playlist-input__tooltip-text:not(:last-child) {
   margin-bottom: 8px;
 }

package/components/search/input.vue

@@ -179,7 +179,7 @@ $icon-size: 16px;
 }
 
 .search-field__search-icon {
-  color: $input-text;
+  color: $search-input-icon;
 }
 
 .search-field__clear {

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

@@ -201,10 +201,10 @@ const normalizedValue = computed(() => {
 
   position: relative;
   width: 100%;
-  background-color: $input-bg;
-  color: $input-text;
+  background-color: var(--input-bg, #{$input-bg});
+  color: var(--input-text, #{$input-text});
   border-radius: $radius + 4px;
-  border: 1px solid $input-border;
+  border: 1px solid var(--input-border, #{$input-border});
   transition: var(--transition) border-color;
   overflow: hidden;
 
@@ -220,7 +220,7 @@ const normalizedValue = computed(() => {
   flex-wrap: nowrap;
   column-gap: 8px;
   align-items: center;
-  color: $input-label;
+  color: var(--input-label, #{$input-label});
   margin-bottom: 8px;
 }
 
@@ -232,7 +232,7 @@ const normalizedValue = computed(() => {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: $input-text;;
+  color: var(--input-text, #{$input-text});
   transition: var(--transition) transform;
   resize: none;
   font: inherit;
@@ -251,7 +251,7 @@ const normalizedValue = computed(() => {
 }
 
 .ui-input__input::placeholder {
-  color: $input-placeholder;
+  color: var(--input-placeholder, #{$input-placeholder});
 
   @include to-br(sm) {
     @include font-sm;
@@ -259,23 +259,23 @@ const normalizedValue = computed(() => {
 }
 
 .ui-input.ui-input--focused .ui-input__wrapper {
-  border-color: $input-border--active;
+  border-color: var(--input-border--focus, #{$input-border--focus});
 }
 
 .ui-input.ui-input--disabled .ui-input__wrapper {
-  background-color: transparent;
-  outline: 1px solid $input-text--disabled;
+  background-color: var(--input-bg--disabled, transparent);
+  outline: 1px solid var(--input-text--disabled, #{$input-text--disabled});
   user-select: none;
   pointer-events: none;
 }
 
 .ui-input.ui-input--disabled .ui-input__wrapper,
 .ui-input.ui-input--disabled .ui-input__input {
-  color: $input-text--disabled;
+  color: var(--input-text--disabled, #{$input-text--disabled});
 }
 
 .ui-input.ui-input--error .ui-input__wrapper {
-  border-color: $input-border--error;
+  border-color: var(--input-border--error, #{$input-border--error});
 }
 
 .ui-input__button {
@@ -286,7 +286,7 @@ const normalizedValue = computed(() => {
   padding: 0;
   background-color: transparent;
   border: none;
-  color: $input-button-text;
+  color: var(--input-button-text, #{$input-button-text});
 
   &::after {
     @include area-point;
@@ -300,7 +300,7 @@ const normalizedValue = computed(() => {
 .ui-input__button-icon {
   width: 20px;
   height: 20px;
-  color: $input-icon;
+  color: var(--input-icon, #{$input-icon});
 
   @include from-br(sm) {
     transition: var(--transition) color;
@@ -309,7 +309,7 @@ const normalizedValue = computed(() => {
 
 .ui-input__button:is(:hover, :focus-visible) .ui-input__button-icon {
   @include from-br(sm) {
-    color: $input-button-text--hover;
+    color: var(--input-button-text--hover, #{$input-button-text--hover});
   }
 }
 
@@ -333,13 +333,13 @@ const normalizedValue = computed(() => {
   top: 50%;
   transform: translateY(-50%);
   left: 12px;
-  color: $input-pre-icon;
+  color: var(--input-pre-icon, #{$input-pre-icon});
 }
 
 .ui-input.ui-input--s .ui-input__input {
   padding: 8px 16px;
-  background-color: $input-s-bg;
-  border: 1px solid $input-s-border;
+  background-color: var(--input-s-bg, #{$input-s-bg});
+  border: 1px solid var(--input-s-border, #{$input-s-border});
 
   @include from-br(sm) {
     @include font-sm;
@@ -351,12 +351,12 @@ const normalizedValue = computed(() => {
 }
 
 .ui-input.ui-input--s .ui-input__wrapper {
-  border-color: transparent;
-  background-color: $input-s-bg;
+  border-color: var(--input-s-border, #{$input-s-border});
+  background-color: var(--input-s-bg, #{$input-s-bg});
 }
 
 .ui-input--s.ui-input--focused .ui-input__wrapper {
-  border-color: $input-s-border--active;
+  border-color: var(--input-s-border--focus, #{$input-s-border--focus});
 }
 
 .ui-input.ui-input--icon .ui-input__input {

package/components/ui/popup.vue

@@ -123,6 +123,34 @@ const { snackbarText, isSnackBarInPopup } = useSnackbar();
 </script>
 
 <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
+  );
+}
+
 .ui-popup[open] {
   position: fixed;
   inset: 0;

package/components/ui/radio.vue

@@ -110,8 +110,6 @@ const isChecked = computed(() => properties.modelValue === properties.value);
 
   @include from-br(sm) {
     @include font-sm;
-
-    color: $radio-label--hover;
   }
 }
 

package/components/ui/select.vue

@@ -128,7 +128,7 @@ function capitalize(text: string) {
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
-  color: $select-icon;
+  color: var(--select-icon, #{$select-icon});
 }
 
 .ui-select__icon {
@@ -144,14 +144,14 @@ function capitalize(text: string) {
 
   border-radius: $radius-xl;
   padding: 10px 32px 10px 12px;
-  background: $select-bg;
+  background: var(--select-bg, #{$select-bg});
   outline: none;
-  border: 1px solid $select-border;
+  border: 1px solid var(--select-border, #{$select-border});
   user-select: none;
   box-sizing: border-box;
   appearance: none;
   font-family: inherit;
-  color: $select-text;
+  color: var(--select-text, #{$select-text});
   cursor: inherit;
   margin: 0;
   width: 100%;
@@ -171,7 +171,7 @@ function capitalize(text: string) {
 
 .ui-select__button:invalid,
 .ui-select__button.--placeholder {
-  color: $select-placeholder;
+  color: var(--select-placeholder, #{$select-placeholder});
 }
 
 .ui-select__button.--icon {
@@ -187,7 +187,7 @@ function capitalize(text: string) {
   flex-grow: 1;
   align-items: center;
   margin-bottom: 8px;
-  color: $select-label;
+  color: var(--select-label, #{$select-label});
 
   &::first-letter {
     text-transform: uppercase;
@@ -200,7 +200,7 @@ function capitalize(text: string) {
 
 .ui-select.--s .ui-select__label {
   margin-bottom: 8px;
-  color: $select-label-secondary;
+  color: var(--select-label-secondary, #{$select-label-secondary});
 }
 
 .ui-select.--wide {
@@ -212,23 +212,23 @@ function capitalize(text: string) {
     @include font-sm;
 
     padding: 8px 32px 8px 12px;
-    border-color: $select-border-secondary;
+    border-color: var(--select-border-secondary, #{$select-border-secondary});
     border-radius: $radius;
   }
 }
 
 .ui-select__option {
-  background: $select-option-bg;
-  color: $select-option-text;
+  background: var(--select-option-bg, #{$select-option-bg});
+  color: var(--select-option-text, #{$select-option-text});
 }
 
 .ui-select.--active .ui-select__count {
-  background-color: $select-count-bg--active;
-  color: $select-count-text--active;
+  background-color: var(--select-count-bg--active, #{$select-count-bg--active});
+  color: var(--select-count-text--active, #{$select-count-text--active});
 }
 
 .ui-select.--active .ui-select__button {
-  background-color: $select-bg--active;
-  border-color: $select-border--active;
+  background-color: var(--select-bg--active, #{$select-bg--active});
+  border-color: var(--select-border--active, #{$select-border--active});
 }
 </style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.853",
+  "version": "0.0.855",
   "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>