@de-kit/st-ui 0.1.5 → 0.1.6

package/dist/styles/mixins.scss

@@ -1,188 +1,51 @@
-@mixin btn-focus {
-  &:focus {
-    outline: initial;
-  }
-
-  &:focus:not(:focus-visible) {
-    outline: none;
-  }
-
-  &:focus-visible {
-    outline: 1px solid var(--color-black);
-    background: transparent;
-  }
-}
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
 
-@mixin reset-list {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-@mixin reset-btn {
-  padding: 0;
-  border: none;
-  background-color: transparent;
-}
-
-@mixin reset-input {
-  border: none;
-  background-color: transparent;
-}
+// Брейкпоинты для адаптивной вёрстки и единственный их источник: vars.scss
+// генерирует из этого же списка --breakpoint-*. Отдельный список нужен потому,
+// что в @media custom properties не работают.
+$breakpoints: (
+  sm: 480px,
+  md: 680px,
+  lg: 1000px,
+  xl: 1200px,
+);
 
-@mixin btn-min {
-  display: block;
-  width: fit-content;
-  height: 30px;
-  padding: 0 9px;
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--color-white);
-  background-color: var(--color-blue);
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: all var(--default-transition-duration)
-    var(--default-transition-timing-function);
+// Единицы, которые понимает @media. Проверяем их, потому что sass разбирает
+// имя вроде `2xl` как число 2 с единицей xl: без проверки оно уехало бы в
+// @media как есть и правило молча пропало бы.
+$-length-units: 'px', 'em', 'rem';
 
-  &:disabled {
-    background-color: rgba(0, 0, 0, 0.1);
-    color: rgba(0, 0, 0, 0.5);
-    pointer-events: none;
+// Имя брейкпоинта или произвольный размер: breakpoint(md), breakpoint(900px).
+// Список проверяем первым, иначе имя, начинающееся с цифры, до него не дойдёт.
+@function breakpoint($point) {
+  @if map.has-key($breakpoints, $point) {
+    @return map.get($breakpoints, $point);
   }
 
-  &:active,
-  &:hover {
-    background-color: var(--color-black);
-  }
-}
-
-@mixin input-min {
-  height: 38px;
-  border-radius: var(--radius-sm);
-  border: 4px solid var(--color-white);
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
-  padding: 0 15px;
-  font-size: 14px;
-  transition: all var(--default-transition-duration)
-    var(--default-transition-timing-function);
-  background-color: var(--color-white);
-  appearance: none;
-  outline: none;
-
-  &:hover,
-  &:focus {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
-  }
-
-  &--recommend {
-    background-color: color-mix(in srgb, var(--color-yellow) 10%, transparent);
-
-    &:not([value='']) {
-      background-color: var(--color-white);
-    }
-  }
-
-  &:required {
-    background-color: rgba(#ff002a, 0.1);
-
-    &:valid {
-      background-color: var(--color-white);
-    }
+  @if meta.type-of($point) ==
+    'number' and
+    list.index($-length-units, math.unit($point))
+  {
+    @return $point;
   }
 
-  &:disabled {
-    background-color: rgba(0, 0, 0, 0.1);
-    border-color: var(--color-border);
-    color: color-mix(in srgb, var(--color-black) 50%, transparent);
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
-
-    &:hover,
-    &:focus {
-      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
-    }
-  }
-
-  &::-webkit-input-placeholder {
-    color: color-mix(in srgb, var(--color-black) 50%, transparent);
-  }
-
-  @media (max-width: 680px) {
-    font-size: 16px;
-  }
-}
-
-@mixin linkActiveElement {
-  content: '';
-  position: absolute;
-  z-index: 1;
-  bottom: -2px;
-  left: 0;
-  display: block;
-  width: calc(100% - 1px);
-  height: 2px;
-  background-color: var(--color-black);
-}
-
-@mixin popupShow {
-  visibility: visible;
-  opacity: 1;
-  z-index: 12;
+  @error 'Нет брейкпоинта «#{$point}». Есть: #{map.keys($breakpoints)} или размер в px, em, rem.';
 }
 
-@mixin popupHide {
-  visibility: hidden;
-  opacity: 0;
-}
-
-@mixin popupStyle($maxWidth: 360px, $padding: 24px 30px) {
-  position: absolute;
-  z-index: 0;
-  max-width: $maxWidth;
-  padding: $padding;
-  box-shadow: var(--shadow-xl);
-  background: var(--color-white);
-  border-radius: 5px;
-  text-align: left;
-  color: var(--color-black);
-}
-
-@mixin buttonArea($width: 20px) {
-  position: relative;
-
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: -#{$width * 0.5};
-    left: -#{$width * 0.5};
-    width: calc(100% + #{$width});
-    height: calc(100% + #{$width});
+// От брейкпоинта и шире, включая его.
+@mixin min-width($point) {
+  @media (min-width: breakpoint($point)) {
+    @content;
   }
 }
 
-@mixin h2 {
-  margin: 0 0 10px;
-  font-size: 18px;
-  line-height: 20px;
-  font-weight: 900;
-
-  @media (min-width: 680px) {
-    margin-bottom: 15px;
-  }
-}
-
-@mixin imgWrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--color-border);
-  overflow: hidden;
-
-  img {
-    z-index: -1;
-    object-fit: contain;
-    margin-inline: auto;
+// Уже брейкпоинта, не включая его: граница 679.98px, а не 680px, иначе на
+// ровно 680px сработали бы оба правила сразу.
+@mixin max-width($point) {
+  @media (max-width: (breakpoint($point) - 0.02px)) {
+    @content;
   }
 }

package/dist/styles/vars.scss

@@ -1,35 +1,86 @@
-// Токены splittest. Имена как у Tailwind, значения свои — не дефолтная шкала.
-// В @media custom properties нельзя: там те же px, что у --breakpoint-*.
+// Токены splittest. Роли как у Tailwind v4 (`--color-primary`), значения свои.
+// Компоненты не знают про пигмент. Тема — переопределение этих --color-* на
+// [data-theme='dark'], стили кнопок и полей не трогать.
+// В @media custom properties нельзя, поэтому брейкпоинты живут в mixins.scss,
+// а --breakpoint-* ниже генерируются из того же списка — значения не разъедутся.
+@use './mixins.scss' as mixins;
+
 :root {
-  --color-black: #000;
-  --color-white: #fff;
-  --color-blue: #002bff;
-  --color-red: #ff0000;
-  --color-green: #00a66f;
-  --color-yellow: #ffbf00;
-  --color-orange: #ff7f00;
-  --color-gray: #808080;
-  --color-neutral-100: #f7f7f7;
-  --color-neutral-200: #e5e5e5;
-  --color-neutral-500: #727272;
+  // Текст и страница. Сейчас оба чёрный/белый, как и кнопка ниже — роли разные.
+  --color-background: #fff;
+  --color-foreground: #000;
+
+  // Залитая кнопка: фон и текст на нём. Outline берёт --color-foreground, не primary.
+  --color-primary: #000;
+  --color-primary-foreground: #fff;
+  --color-primary-hover: #727272;
+
+  // Ховер outline. Выключенный контрол и вторичный текст/иконка.
+  --color-secondary: #f7f7f7;
+  --color-muted: #e5e5e5;
+  --color-muted-foreground: #727272;
+
+  --color-border: color-mix(in srgb, var(--color-foreground) 10%, transparent);
   --color-input: #d9d9d9;
-  --color-border: color-mix(in srgb, var(--color-black) 10%, transparent);
-  --color-sidebar: color-mix(in srgb, var(--color-black) 3%, transparent);
+  --color-ring: var(--color-foreground);
+  // Вуаль модалки и тень не от foreground: в тёмной теме свет не падает снизу,
+  // они остаются тёмными. Нужен другой оттенок — переопределять эти две роли.
+  --color-overlay: rgb(0 0 0 / 0.3);
+  --color-shadow: rgb(0 0 0 / 0.15);
+  --color-sidebar: color-mix(in srgb, var(--color-foreground) 3%, transparent);
+
+  // Акцент, ошибка, успех. Текст на акценте отдельный: в тёмной теме primary-foreground инвертируется, этот нет.
+  --color-accent: #002bff;
+  --color-accent-foreground: #fff;
+  --color-destructive: #ff0000;
+  --color-success: #00a66f;
+  --color-warning: #ffbf00;
+
+  // Фон recommended — разбавленный warning, компоненты этот процент не знают.
+  // В тёмной теме достаточно переопределить --color-warning.
+  --color-recommended: color-mix(
+    in srgb,
+    var(--color-warning) 10%,
+    transparent
+  );
 
   --radius-sm: 5px;
   --radius-lg: 10px;
 
   --font-sans: 'Inter', sans-serif;
+
+  // Шкала текста: размер и парная к нему высота строки. Других размеров в splittest нет,
+  // по умолчанию почти везде --text-sm. Заголовки: h1 и h2 — 2xl (h1 с 680px — 3xl), h3 — lg, h4 — sm.
+  --text-xs: 11px;
+  --text-xs--line-height: 15px;
   --text-sm: 14px;
+  --text-sm--line-height: 20px;
+  --text-base: 16px;
+  --text-base--line-height: 20px;
+  --text-lg: 18px;
+  --text-lg--line-height: 20px;
+  --text-2xl: 28px;
+  --text-2xl--line-height: 30px;
+  --text-3xl: 45px;
+  --text-3xl--line-height: 50px;
+
+  // Сетка 5px. Паддинги кнопки и инпута сняты с макета вне сетки и остаются литералами.
+  --space-1: 5px;
+  --space-2: 10px;
+  --space-3: 15px;
+  --space-4: 20px;
+  --space-6: 30px;
+
+  // Фокус. Одна обводка на всю библиотеку: и box-shadow у инпута, и outline у кнопки.
+  --focus-ring-width: 1px;
+  --focus-ring-color: var(--color-ring);
+  --focus-ring-offset: 2px;
 
-  --shadow-xl: 0 10px 40px 0 rgb(0 0 0 / 0.15);
-  --shadow-t: 0 -1px 0 0 var(--color-border);
-  --shadow-b: 0 1px 0 0 var(--color-border);
+  --shadow-xl: 0 10px 40px 0 var(--color-shadow);
 
-  --breakpoint-sm: 576px;
-  --breakpoint-md: 680px;
-  --breakpoint-lg: 1000px;
-  --breakpoint-xl: 1200px;
+  @each $name, $value in mixins.$breakpoints {
+    --breakpoint-#{$name}: #{$value};
+  }
 
   --default-transition-duration: 0.3s;
   --default-transition-timing-function: ease;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@de-kit/st-ui",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "React-компоненты splittest: глобальный SCSS и токены из основного фронтенда",
   "license": "UNLICENSED",
   "repository": {