itube-specs 0.0.852 → 0.0.854

package/assets/scss/mixins/_index.scss

@@ -2,4 +2,5 @@
 @forward 'accessibility';
 @forward 'breakpoints';
 @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/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/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/components/view/model-videos.vue

@@ -76,8 +76,8 @@
       <LazyGridVideos
         :items="otherItems"
         :class="{'_loading': statusOther === 'pending'}"
+        :hydrate-on-visible="HYDRATE_MARGIN"
         class="view-model-videos__grid"
-        hydrate-on-visible
       />
       <UiLink
         v-if="dataOther && dataOther?.total > 12"
@@ -120,6 +120,9 @@ import { computed } from 'vue';
 
 const featureFlags = useRuntimeConfig().public.featureFlags;
 
+/** Запас гидрации грида: без него тап по карточке у нижнего края экрана уходит по негидрированной разметке. */
+const HYDRATE_MARGIN = { rootMargin: '300px' };
+
 const props = defineProps<{
   title: string
   data: PaginatedResponse<IVideoCard> | null

package/components/view/video.vue

@@ -61,7 +61,7 @@
         :hide-first-row="page !== 'playlist'"
         :items="related"
         :top-chips="topChipsStrings"
-        hydrate-on-visible
+        :hydrate-on-visible="HYDRATE_MARGIN"
       >
         <template #grid-start>
           <LazyAdvNativePlayer
@@ -120,6 +120,9 @@ import type { AsyncDataRequestStatus } from '#app';
 
 const featureFlags = useRuntimeConfig().public.featureFlags;
 
+/** Запас гидрации релейтед-грида: без него тап по карточке у нижнего края экрана уходит по негидрированной разметке. */
+const HYDRATE_MARGIN = { rootMargin: '300px' };
+
 const props = defineProps<{
   related?: Array<IVideoCard> | undefined,
   status: AsyncDataRequestStatus

package/package.json

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