@de-kit/st-ui 0.1.0 → 0.1.2

package/dist/styles/mixins.scss

@@ -1,5 +1,3 @@
-@import './vars.scss';
-
 @mixin btn-focus {
   &:focus {
     outline: initial;
@@ -10,7 +8,7 @@
   }
 
   &:focus-visible {
-    outline: 1px solid $colorBlack;
+    outline: 1px solid var(--color-black);
     background: transparent;
   }
 }
@@ -39,12 +37,12 @@
   padding: 0 9px;
   font-size: 14px;
   font-weight: 700;
-  color: $colorWhite;
-  background-color: $colorBlue;
+  color: var(--color-white);
+  background-color: var(--color-blue);
   border: none;
   border-radius: 5px;
   cursor: pointer;
-  transition: $tr;
+  transition: all var(--default-transition-duration) var(--default-transition-timing-function);
 
   &:disabled {
     background-color: rgba(0, 0, 0, 0.1);
@@ -54,19 +52,19 @@
 
   &:active,
   &:hover {
-    background-color: $colorBlack;
+    background-color: var(--color-black);
   }
 }
 
 @mixin input-min {
   height: 38px;
-  border-radius: $borderRadius;
-  border: 4px solid $colorWhite;
+  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: $tr;
-  background-color: $colorWhite;
+  transition: all var(--default-transition-duration) var(--default-transition-timing-function);
+  background-color: var(--color-white);
   appearance: none;
   outline: none;
 
@@ -76,10 +74,10 @@
   }
 
   &--recommend {
-    background-color: rgba(#ffbf00, 0.1);
+    background-color: color-mix(in srgb, var(--color-yellow) 10%, transparent);
 
     &:not([value='']) {
-      background-color: $colorWhite;
+      background-color: var(--color-white);
     }
   }
 
@@ -87,14 +85,14 @@
     background-color: rgba(#ff002a, 0.1);
 
     &:valid {
-      background-color: $colorWhite;
+      background-color: var(--color-white);
     }
   }
 
   &:disabled {
     background-color: rgba(0, 0, 0, 0.1);
-    border-color: $borderColor;
-    color: rgba($colorBlack, 0.5);
+    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);
 
@@ -105,10 +103,10 @@
   }
 
   &::-webkit-input-placeholder {
-    color: rgba($colorBlack, 0.5);
+    color: color-mix(in srgb, var(--color-black) 50%, transparent);
   }
 
-  @media (max-width: $tabletWidth) {
+  @media (max-width: 680px) {
     font-size: 16px;
   }
 }
@@ -122,7 +120,7 @@
   display: block;
   width: calc(100% - 1px);
   height: 2px;
-  background-color: $colorBlack;
+  background-color: var(--color-black);
 }
 
 @mixin popupShow {
@@ -141,11 +139,11 @@
   z-index: 0;
   max-width: $maxWidth;
   padding: $padding;
-  box-shadow: $popupBoxShadow;
-  background: $colorWhite;
+  box-shadow: var(--shadow-xl);
+  background: var(--color-white);
   border-radius: 5px;
   text-align: left;
-  color: $colorBlack;
+  color: var(--color-black);
 }
 
 @mixin buttonArea($width: 20px) {
@@ -168,7 +166,7 @@
   line-height: 20px;
   font-weight: 900;
 
-  @media (min-width: $tabletWidth) {
+  @media (min-width: 680px) {
     margin-bottom: 15px;
   }
 }
@@ -177,7 +175,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid $borderColor;
+  border: 1px solid var(--color-border);
   overflow: hidden;
 
   img {

package/dist/styles/vars.scss

@@ -1,39 +1,36 @@
-// Токены splittest. Источник: splittest-frontend/src/app/styles/vars.scss
-$colorBlack: #000;
-$colorWhite: #fff;
+// Токены splittest. Имена как у Tailwind, значения свои — не дефолтная шкала.
+// В @media custom properties нельзя: там те же px, что у --breakpoint-*.
+: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-input: #d9d9d9;
+  --color-border: color-mix(in srgb, var(--color-black) 10%, transparent);
+  --color-sidebar: color-mix(in srgb, var(--color-black) 3%, transparent);
 
-$colorBlue: #002bff;
-$colorRed: #ff0000;
-$colorGreen: #00a66f;
-$colorYellow: #ffbf00;
-$colorGray: #e5e5e5;
-$colorGrayIcon: #727272;
-$colorGrayTwo: #808080;
-$colorOrange: #ff7f00;
-$colorBackground: #f7f7f7;
+  --radius-sm: 5px;
+  --radius-lg: 10px;
 
-$borderRadius: 5px;
-$borderRadiusBig: 10px;
-$borderColor: rgba($colorBlack, 0.1);
-$borderShadowTop: 0 -1px 0 0 $borderColor;
-$borderShadowBottom: 0 1px 0 0 $borderColor;
-$borderInputColor: #d9d9d9;
-$tr: all 0.3s ease;
-$trParam: 0.3s ease;
-$trBg: background-color 0.3s ease;
-$popupBoxShadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.15);
-$bgColorSidebarBlock: rgba(0, 0, 0, 0.03);
+  --font-sans: 'Inter', sans-serif;
+  --text-sm: 14px;
 
-$inputRecomendBg: rgba(#ffbf00, 0.1);
-$inputRequiredBg: rgba(#ff0000, 0.1);
-$inputErrorBorder: rgba(#ff0000, 0.5);
+  --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);
 
-$desktopWidth: 1200px;
-$laptopWidth: 1000px;
-$tabletWidth: 680px;
-$mobileWidth: 576px;
+  --breakpoint-sm: 576px;
+  --breakpoint-md: 680px;
+  --breakpoint-lg: 1000px;
+  --breakpoint-xl: 1200px;
 
-$mainFontName: 'Inter', sans-serif;
-$bodyFontSize: 14px;
-$mainBgColor: #fff;
-$mainIndexBgColor: #f0f1f5;
+  --default-transition-duration: 0.3s;
+  --default-transition-timing-function: ease;
+}

package/package.json

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

package/dist/_virtual/_rolldown/runtime.cjs

@@ -1,22 +0,0 @@
-// \0rolldown/runtime.js
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-exports.__toESM = __toESM;

package/dist/components/button/button.module.scss

@@ -1,95 +0,0 @@
-@import '../../styles/vars.scss';
-
-.button {
-  box-sizing: border-box;
-  width: fit-content;
-  display: flex;
-  align-items: center;
-  padding: 10px 18px;
-  border-radius: 30px;
-  font-size: 14px;
-  line-height: 20px;
-  background-color: $colorBlack;
-  color: $colorWhite;
-  fill: $colorWhite;
-  font-weight: bold;
-  font-family: $mainFontName;
-  border: 2px solid $colorBlack;
-  flex-shrink: 0;
-  cursor: pointer;
-  transition: none;
-  gap: 5px;
-  text-decoration: none;
-
-  &.active,
-  &.disabled,
-  &:active,
-  &:disabled {
-    background-color: $colorGray;
-    color: $colorGrayIcon;
-    fill: $colorGrayIcon;
-    border-color: $colorGray;
-  }
-
-  &.disabled,
-  &:disabled {
-    cursor: default;
-    pointer-events: none;
-    user-select: none;
-  }
-}
-
-.outline {
-  background-color: transparent;
-  color: $colorBlack;
-  fill: $colorBlack;
-  max-height: 40px;
-  border: 2px solid $colorBlack;
-
-  &:disabled {
-    background-color: transparent;
-    border: 2px solid $colorBlack;
-  }
-}
-
-.fullWidth {
-  width: 100%;
-  text-align: center;
-  justify-content: center;
-}
-
-.withIcon {
-  padding: 8px 18px 8px 14px;
-  gap: 5px;
-  text-align: left;
-
-  .icon {
-    flex-shrink: 0;
-  }
-}
-
-.link {
-  border: none;
-  background-color: transparent;
-  color: $colorBlack;
-  fill: $colorBlack;
-  border-radius: 0;
-  padding: 0;
-
-  &:active,
-  &:disabled {
-    background-color: transparent;
-    color: rgba(0, 0, 0, 0.5);
-    fill: rgba(0, 0, 0, 0.5);
-  }
-}
-
-.disabled {
-  background-color: $colorGray;
-  color: $colorGrayIcon;
-  fill: $colorGrayIcon;
-  border-color: $colorGray;
-  cursor: default;
-  pointer-events: none;
-  user-select: none;
-}

package/dist/components/textarea/textarea.module.scss

@@ -1,60 +0,0 @@
-@import '../../styles/vars.scss';
-
-.wrap {
-  position: relative;
-}
-
-.textarea {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 160px;
-  display: flex;
-  align-items: center;
-  padding: 10px 15px;
-  font-size: 14px;
-  line-height: 20px;
-  background-color: transparent;
-  color: $colorBlack;
-  border-radius: $borderRadius;
-  resize: none;
-  font-family: $mainFontName;
-  border: 1px solid $borderInputColor;
-  outline: 1px solid transparent;
-  transition:
-    background 0.3s,
-    border-color 0.3s,
-    box-shadow 0.2s;
-
-  &:focus {
-    border-color: $colorBlack;
-    outline: 1px solid $colorBlack;
-  }
-
-  &:disabled {
-    background-color: $colorGray;
-    border-color: $colorGray;
-    color: rgba($colorBlack, 0.5);
-    fill: $colorGrayIcon;
-  }
-
-  &--recommended {
-    background-color: $inputRecomendBg;
-  }
-
-  &--error {
-    border-color: $inputErrorBorder;
-  }
-
-  @media (min-width: $tabletWidth) {
-    min-height: 80px;
-  }
-}
-
-.counter {
-  display: block;
-  margin-top: 5px;
-  font-size: 11px;
-  line-height: 20px;
-  color: rgba($colorBlack, 0.5);
-  text-align: left;
-}