@donkit-ai/design-system 0.2.8 → 0.2.9

package/README.md

@@ -38,7 +38,7 @@ npm install @donkit-ai/design-system@latest
 ## Компоненты
 
 - **Button** - кнопки с вариантами (primary, secondary, ghost) и размерами (small, medium, large)
-- **Tabs** - вкладки с вариантами secondary (с border) и ghost (без border), состоянием selected (small, medium, large)
+- **Tabs** - вкладки с состоянием selected в трех размерах (small, medium, large)
 - **Input** - текстовые поля с поддержкой иконок, ошибок и подсказок (small, medium)
 - **Stepper** - числовое поле с кнопками +/- для изменения значения (small, medium)
 - **Card** - карточки двух типов: info (информационная, прозрачный фон) и interactive (интерактивная с hover эффектом)
@@ -200,13 +200,13 @@ document.documentElement.setAttribute('data-theme', 'light');
 - Font Family: **Fira Mono** (fallback: SF Mono, Monaco, Cascadia Code, Roboto Mono, monospace)
 
 **Размеры шрифтов (mobile → tablet → desktop):**
-- `--font-size-h1`: 36px → 40px → 48px
-- `--font-size-h2`: 28px → 32px → 36px
-- `--font-size-h3`: 24px → 28px → 32px
-- `--font-size-h4`: 16px → 20px → 24px
-- `--font-size-p1`: 16px → 16px → 20px
-- `--font-size-p2`: 12px → 16px → 16px
-- `--font-size-p3`: 12px → 12px → 14px
+- `--font-size-h1`: 32px → 40px → 40px
+- `--font-size-h2`: 28px → 36px → 36px
+- `--font-size-h3`: 24px → 28px → 28px
+- `--font-size-h4`: 18px → 20px → 20px
+- `--font-size-p1`: 16px → 18px → 18px
+- `--font-size-p2`: 14px → 16px → 16px
+- `--font-size-p3`: 12px → 14px → 14px
 
 **Letter Spacing (трекинг для мелких кеглей):**
 - Меньше 20px → +2% (0.02em)
@@ -214,10 +214,10 @@ document.documentElement.setAttribute('data-theme', 'light');
 - Меньше 14px → +6% (0.06em)
 
 Адаптивные значения трекинга:
-- `--letter-spacing-h4`: 0.02em → 0 → 0 (16px / 20px / 24px)
-- `--letter-spacing-p1`: 0.02em → 0.02em → 0 (16px / 16px / 20px)
-- `--letter-spacing-p2`: 0.06em → 0.02em → 0.02em (12px / 16px / 16px)
-- `--letter-spacing-p3`: 0.06em → 0.06em → 0.04em (12px / 12px / 14px)
+- `--letter-spacing-h4`: 0.02em → 0 → 0 (18px / 20px / 20px)
+- `--letter-spacing-p1`: 0.02em → 0.02em → 0.02em (16px / 18px / 18px)
+- `--letter-spacing-p2`: 0.04em → 0.02em → 0.02em (14px / 16px / 16px)
+- `--letter-spacing-p3`: 0.06em → 0.04em → 0.04em (12px / 14px / 14px)
 
 ### Переходы
 
@@ -327,27 +327,14 @@ document.documentElement.setAttribute('data-theme', 'light');
 
 ### Tabs
 
-Вкладки с двумя вариантами оформления: secondary (с border) и ghost (без border).
+Вкладки с минималистичным дизайном без border.
 
 ```jsx
 import { Tabs, Tab } from '@donkit-ai/design-system';
 import { AlertCircle } from 'lucide-react';
 
-// Secondary tabs (default) - с border
-<Tabs size="medium" variant="secondary">
-  <Tab selected={selectedTab === 'tab1'} onClick={() => setSelectedTab('tab1')}>
-    Overview
-  </Tab>
-  <Tab selected={selectedTab === 'tab2'} onClick={() => setSelectedTab('tab2')}>
-    Details
-  </Tab>
-  <Tab selected={selectedTab === 'tab3'} onClick={() => setSelectedTab('tab3')}>
-    Settings
-  </Tab>
-</Tabs>
-
-// Ghost tabs - без border, минималистичный стиль
-<Tabs size="medium" variant="ghost">
+// Basic tabs
+<Tabs size="medium">
   <Tab selected={selectedTab === 'tab1'} onClick={() => setSelectedTab('tab1')}>
     Overview
   </Tab>
@@ -360,7 +347,7 @@ import { AlertCircle } from 'lucide-react';
 </Tabs>
 
 // With icons (всегда 20px для Tabs)
-<Tabs size="small" variant="secondary">
+<Tabs size="small">
   <Tab
     selected={selectedTab === 'alerts'}
     onClick={() => setSelectedTab('alerts')}
@@ -374,19 +361,16 @@ import { AlertCircle } from 'lucide-react';
 </Tabs>
 
 // Disabled tab
-<Tabs size="medium" variant="secondary">
+<Tabs size="medium">
   <Tab selected>Active</Tab>
   <Tab disabled>Disabled</Tab>
 </Tabs>
 ```
 
-**Варианты:**
-- **secondary** (default) - с border, как вторичные кнопки
-  - Selected: фон `--color-item-bg-selected`, border `--color-border-selected`
-  - Hover: фон `--color-item-bg-hover`, border `--color-border-hover`
-- **ghost** - без border, минималистичный
-  - Selected: фон `--color-item-bg-selected`
-  - Hover: фон `--color-item-bg-hover`
+**Стили:**
+- Selected: фон `--color-item-bg-selected`, текст `--color-txt-icon-1`
+- Hover: фон `--color-item-bg-hover`, текст `--color-txt-icon-1`
+- Default: текст `--color-txt-icon-2`
 
 **Размеры:** small, medium, large
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@donkit-ai/design-system",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "Donkit Design System - minimal design tokens and React components",
   "type": "module",
   "main": "src/index.js",

package/src/components/Alert.css

@@ -4,7 +4,6 @@
   gap: var(--space-s);
   padding: var(--space-s);
   border-radius: var(--radius-s);
-  border: 1px solid;
 }
 
 .ds-alert--no-title {
@@ -59,7 +58,6 @@
 /* Variants */
 .ds-alert--info {
   background: linear-gradient(var(--color-status-info-bg), var(--color-status-info-bg)), var(--color-bg);
-  border-color: var(--color-status-info);
   color: var(--color-status-info);
 }
 
@@ -69,7 +67,6 @@
 
 .ds-alert--success {
   background: linear-gradient(var(--color-status-success-bg), var(--color-status-success-bg)), var(--color-bg);
-  border-color: var(--color-status-success);
   color: var(--color-status-success);
 }
 
@@ -79,7 +76,6 @@
 
 .ds-alert--warning {
   background: linear-gradient(var(--color-status-warning-bg), var(--color-status-warning-bg)), var(--color-bg);
-  border-color: var(--color-status-warning);
   color: var(--color-status-warning);
 }
 
@@ -89,7 +85,6 @@
 
 .ds-alert--error {
   background: linear-gradient(var(--color-status-error-bg), var(--color-status-error-bg)), var(--color-bg);
-  border-color: var(--color-status-error);
   color: var(--color-status-error);
 }
 

package/src/components/Badge.css

@@ -24,35 +24,29 @@
 .ds-badge--default {
   background-color: var(--color-item-bg);
   color: var(--color-txt-icon-2);
-  border: 1px solid var(--color-txt-icon-2);
 }
 
 .ds-badge--info {
   background-color: var(--color-status-info-bg);
   color: var(--color-status-info);
-  border: 1px solid var(--color-status-info);
 }
 
 .ds-badge--success {
   background-color: var(--color-status-success-bg);
   color: var(--color-status-success);
-  border: 1px solid var(--color-status-success);
 }
 
 .ds-badge--warning {
   background-color: var(--color-status-warning-bg);
   color: var(--color-status-warning);
-  border: 1px solid var(--color-status-warning);
 }
 
 .ds-badge--error {
   background-color: var(--color-status-error-bg);
   color: var(--color-status-error);
-  border: 1px solid var(--color-status-error);
 }
 
 .ds-badge--accent {
   background-color: var(--color-red-10);
   color: var(--color-accent);
-  border: 1px solid var(--color-accent);
 }

package/src/components/Button.css

@@ -59,22 +59,22 @@
 
 /* Sizes */
 .ds-button--small {
-  height: calc(20px + var(--space-xs) * 2);
-  padding: 0 var(--space-s);
+  height: var(--height-s);
+  padding: 0 calc(var(--height-s) / 2);
   font-size: var(--font-size-p2);
   border-radius: var(--radius-xs);
 }
 
 .ds-button--medium {
-  height: calc(24px + var(--space-s) * 2);
-  padding: 0 var(--space-s);
+  height: var(--height-m);
+  padding: 0 calc(var(--height-m) / 2);
   font-size: var(--font-size-p1);
   border-radius: var(--radius-s);
 }
 
 .ds-button--large {
-  height: calc(28px + var(--space-m) * 2);
-  padding: 0 var(--space-m);
+  height: var(--height-l);
+  padding: 0 calc(var(--height-l) / 2);
   font-size: var(--font-size-h4);
   border-radius: var(--radius-s);
   gap: var(--space-s);

package/src/components/Input.css

@@ -59,33 +59,33 @@
 
 /* Sizes */
 .ds-input--small {
-  height: calc(20px + var(--space-xs) * 2);
-  padding: 0 var(--space-s);
+  height: var(--height-s);
+  padding: 0 calc(var(--height-s) / 4);
   font-size: var(--font-size-p2);
   border-radius: var(--radius-xs);
 }
 
 .ds-input--medium {
-  height: calc(24px + var(--space-s) * 2);
-  padding: 0 var(--space-s);
+  height: var(--height-m);
+  padding: 0 calc(var(--height-m) / 4);
   font-size: var(--font-size-p1);
   border-radius: var(--radius-s);
 }
 
 .ds-input--with-icon.ds-input--small {
-  padding-left: calc(var(--space-s) + 20px + var(--space-xs));
+  padding-left: calc(var(--height-s) / 4 + 20px + var(--height-s) / 4);
 }
 
 .ds-input--with-icon.ds-input--medium {
-  padding-left: calc(var(--space-s) + 24px + var(--space-xs));
+  padding-left: calc(var(--height-m) / 4 + 24px + var(--height-m) / 4);
 }
 
 .ds-input--with-icon-right.ds-input--small {
-  padding-right: calc(var(--space-s) + 20px + var(--space-xs));
+  padding-right: calc(var(--height-s) / 4 + 20px + var(--height-s) / 4);
 }
 
 .ds-input--with-icon-right.ds-input--medium {
-  padding-right: calc(var(--space-s) + 24px + var(--space-xs));
+  padding-right: calc(var(--height-m) / 4 + 24px + var(--height-m) / 4);
 }
 
 .ds-input-icon {
@@ -97,11 +97,11 @@
 }
 
 .ds-input-icon--small {
-  left: var(--space-xs);
+  left: 8px;
 }
 
 .ds-input-icon--medium {
-  left: var(--space-s);
+  left: 11px;
 }
 
 .ds-input-icon-right {
@@ -122,11 +122,11 @@
 }
 
 .ds-input-icon-right--small {
-  right: var(--space-xs);
+  right: 8px;
 }
 
 .ds-input-icon-right--medium {
-  right: var(--space-s);
+  right: 11px;
 }
 
 .ds-input-hint {

package/src/components/Select.css

@@ -61,15 +61,15 @@
 
 /* Sizes */
 .ds-select-trigger--small {
-  height: calc(20px + var(--space-xs) * 2);
-  padding: 0 var(--space-s);
+  height: var(--height-s);
+  padding: 0 calc(var(--height-s) / 4);
   font-size: var(--font-size-p2);
   border-radius: var(--radius-xs);
 }
 
 .ds-select-trigger--medium {
-  height: calc(24px + var(--space-s) * 2);
-  padding: 0 var(--space-s);
+  height: var(--height-m);
+  padding: 0 calc(var(--height-m) / 4);
   font-size: var(--font-size-p1);
   border-radius: var(--radius-s);
 }
@@ -135,14 +135,14 @@
 }
 
 .ds-select-option--small {
-  min-height: calc(20px + var(--space-xs) * 2);
-  padding: var(--space-xs) var(--space-s);
+  min-height: var(--height-s);
+  padding: var(--space-xs) calc(var(--height-s) / 4);
   font-size: var(--font-size-p2);
 }
 
 .ds-select-option--medium {
-  min-height: calc(24px + var(--space-s) * 2);
-  padding: var(--space-s);
+  min-height: var(--height-m);
+  padding: var(--space-xs) calc(var(--height-m) / 4);
   font-size: var(--font-size-p1);
 }
 

package/src/components/Stepper.css

@@ -100,13 +100,13 @@
 
 /* Small */
 .ds-stepper--small .ds-stepper-button {
-  width: 32px;
-  height: 32px;
+  width: var(--height-s);
+  height: var(--height-s);
   padding: 0;
 }
 
 .ds-stepper--small .ds-stepper-input {
-  height: 32px;
+  height: var(--height-s);
   font-size: var(--font-size-p2);
   letter-spacing: var(--letter-spacing-p2);
   padding: 0 var(--space-xs);
@@ -114,13 +114,13 @@
 
 /* Medium */
 .ds-stepper--medium .ds-stepper-button {
-  width: 40px;
-  height: 40px;
+  width: var(--height-m);
+  height: var(--height-m);
   padding: 0;
 }
 
 .ds-stepper--medium .ds-stepper-input {
-  height: 40px;
+  height: var(--height-m);
   font-size: var(--font-size-p1);
   letter-spacing: var(--letter-spacing-p1);
   padding: 0 var(--space-s);

package/src/components/Stepper.jsx

@@ -56,7 +56,7 @@ export function Stepper({
     disabled && 'ds-stepper--disabled',
   ].filter(Boolean).join(' ');
 
-  const iconSize = size === 'small' ? 16 : 20;
+  const iconSize = size === 'small' ? 20 : 24;
 
   return (
     <div className={className}>

package/src/components/Tabs.css

@@ -20,20 +20,6 @@
 }
 
 /* Variants */
-.ds-tab--secondary {
-  border: 1px solid var(--color-border);
-}
-
-.ds-tab--secondary:hover:not(.ds-tab--selected):not(:disabled) {
-  background-color: var(--color-item-bg-hover);
-  border-color: var(--color-border-hover);
-}
-
-.ds-tab--secondary.ds-tab--selected {
-  background-color: var(--color-item-bg-selected);
-  border-color: var(--color-border-selected);
-}
-
 .ds-tab--ghost {
   border: none;
   color: var(--color-txt-icon-2);
@@ -51,22 +37,22 @@
 
 /* Sizes */
 .ds-tab--small {
-  height: calc(20px + var(--space-xs) * 2);
-  padding: 0 var(--space-s);
+  height: var(--height-s);
+  padding: 0 calc(var(--height-s) / 2);
   font-size: var(--font-size-p2);
   border-radius: var(--radius-xs);
 }
 
 .ds-tab--medium {
-  height: calc(24px + var(--space-s) * 2);
-  padding: 0 var(--space-s);
+  height: var(--height-m);
+  padding: 0 calc(var(--height-m) / 2);
   font-size: var(--font-size-p1);
   border-radius: var(--radius-s);
 }
 
 .ds-tab--large {
-  height: calc(28px + var(--space-m) * 2);
-  padding: 0 var(--space-m);
+  height: var(--height-l);
+  padding: 0 calc(var(--height-l) / 2);
   font-size: var(--font-size-p1);
   border-radius: var(--radius-s);
   gap: var(--space-s);

package/src/components/Tabs.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import './Tabs.css';
 
-export function Tabs({ children, size = 'medium', variant = 'secondary', ...props }) {
+export function Tabs({ children, size = 'medium', variant = 'ghost', ...props }) {
   return (
     <div className="ds-tabs" role="tablist" {...props}>
       {React.Children.map(children, (child) => {
@@ -14,7 +14,7 @@ export function Tabs({ children, size = 'medium', variant = 'secondary', ...prop
   );
 }
 
-export function Tab({ children, selected = false, onClick, size = 'medium', variant = 'secondary', disabled = false, icon, ...props }) {
+export function Tab({ children, selected = false, onClick, size = 'medium', variant = 'ghost', disabled = false, icon, ...props }) {
   const isIconOnly = icon && !children;
 
   const className = [

package/src/components/Textarea.css

@@ -28,8 +28,10 @@
   transition: border-color var(--transition-normal);
   line-height: 1.5;
   resize: vertical;
-  /* Кастомный resize handle (уголок) */
-  background-image: linear-gradient(135deg, transparent 0%, transparent 50%, var(--color-border) 50%, var(--color-border) 56%, transparent 56%, transparent 62%, var(--color-border) 62%, var(--color-border) 68%, transparent 68%);
+  /* Кастомный resize handle */
+  background:
+    linear-gradient(135deg, transparent 6px, var(--color-border) 6px, var(--color-border) 7px, transparent 7px),
+    linear-gradient(135deg, transparent 10px, var(--color-border) 10px, var(--color-border) 11px, transparent 11px);
   background-repeat: no-repeat;
   background-position: bottom right;
   background-size: 12px 12px;
@@ -41,14 +43,24 @@
 
 .ds-textarea:hover:not(:disabled) {
   border-color: var(--color-border-hover);
-  background-image: linear-gradient(135deg, transparent 0%, transparent 50%, var(--color-border-hover) 50%, var(--color-border-hover) 56%, transparent 56%, transparent 62%, var(--color-border-hover) 62%, var(--color-border-hover) 68%, transparent 68%);
+  background:
+    linear-gradient(135deg, transparent 6px, var(--color-border-hover) 6px, var(--color-border-hover) 7px, transparent 7px),
+    linear-gradient(135deg, transparent 10px, var(--color-border-hover) 10px, var(--color-border-hover) 11px, transparent 11px);
+  background-repeat: no-repeat;
+  background-position: bottom right;
+  background-size: 12px 12px;
 }
 
 .ds-textarea:focus,
 .ds-textarea:active {
   outline: none;
   border-color: var(--color-border-hover);
-  background-image: linear-gradient(135deg, transparent 0%, transparent 50%, var(--color-border-hover) 50%, var(--color-border-hover) 56%, transparent 56%, transparent 62%, var(--color-border-hover) 62%, var(--color-border-hover) 68%, transparent 68%);
+  background:
+    linear-gradient(135deg, transparent 6px, var(--color-border-hover) 6px, var(--color-border-hover) 7px, transparent 7px),
+    linear-gradient(135deg, transparent 10px, var(--color-border-hover) 10px, var(--color-border-hover) 11px, transparent 11px);
+  background-repeat: no-repeat;
+  background-position: bottom right;
+  background-size: 12px 12px;
 }
 
 .ds-textarea:disabled {
@@ -57,12 +69,17 @@
 
 .ds-textarea--error {
   border-color: var(--color-error);
-  background-image: linear-gradient(135deg, transparent 0%, transparent 50%, var(--color-error) 50%, var(--color-error) 56%, transparent 56%, transparent 62%, var(--color-error) 62%, var(--color-error) 68%, transparent 68%);
+  background:
+    linear-gradient(135deg, transparent 6px, var(--color-error) 6px, var(--color-error) 7px, transparent 7px),
+    linear-gradient(135deg, transparent 10px, var(--color-error) 10px, var(--color-error) 11px, transparent 11px);
+  background-repeat: no-repeat;
+  background-position: bottom right;
+  background-size: 12px 12px;
 }
 
 .ds-textarea--no-resize {
   resize: none;
-  background-image: none;
+  background: none;
 }
 
 /* Sizes */

package/src/styles/tokens.css

@@ -160,13 +160,22 @@
     /* =====================================
      * 4) Border radius
      * ===================================*/
-    --radius-xs: 2px;
-    --radius-s: 4px;
+    --radius-xs: 4px;
+    --radius-s: 6px;
   }
 
   :root {
     /* =====================================
-     * 5) Typography scale (mobile/tablet/desktop)
+     * 5) Component heights
+     * ===================================*/
+    --height-s: 32px;
+    --height-m: 44px;
+    --height-l: 56px;
+  }
+
+  :root {
+    /* =====================================
+     * 6) Typography scale (mobile/tablet/desktop)
      * ===================================*/
     /* Base typography settings */
     font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
@@ -174,21 +183,21 @@
     font-weight: 400;
 
     /* Mobile (default) */
-    --font-size-h1: 36px;
+    --font-size-h1: 32px;
     --font-size-h2: 28px;
     --font-size-h3: 24px;
-    --font-size-h4: 16px;
+    --font-size-h4: 18px;
     --font-size-p1: 16px;
-    --font-size-p2: 12px;
+    --font-size-p2: 14px;
     --font-size-p3: 12px;
 
     /* Letter spacing (tracking) for small font sizes */
     --letter-spacing-h1: 0;
     --letter-spacing-h2: 0;
     --letter-spacing-h3: 0;
-    --letter-spacing-h4: 0.02em; /* 16px → +2% */
+    --letter-spacing-h4: 0.02em; /* 18px → +2% */
     --letter-spacing-p1: 0.02em; /* 16px → +2% */
-    --letter-spacing-p2: 0.06em; /* 12px → +6% */
+    --letter-spacing-p2: 0.04em; /* 14px → +4% */
     --letter-spacing-p3: 0.06em; /* 12px → +6% */
   }
 
@@ -196,33 +205,33 @@
     :root {
       /* Tablet */
       --font-size-h1: 40px;
-      --font-size-h2: 32px;
+      --font-size-h2: 36px;
       --font-size-h3: 28px;
       --font-size-h4: 20px;
-      --font-size-p1: 16px;
+      --font-size-p1: 18px;
       --font-size-p2: 16px;
-      --font-size-p3: 12px;
+      --font-size-p3: 14px;
 
       --letter-spacing-h4: 0; /* 20px → no tracking */
-      --letter-spacing-p1: 0.02em; /* 16px → +2% */
+      --letter-spacing-p1: 0.02em; /* 18px → +2% */
       --letter-spacing-p2: 0.02em; /* 16px → +2% */
-      --letter-spacing-p3: 0.06em; /* 12px → +6% */
+      --letter-spacing-p3: 0.04em; /* 14px → +4% */
     }
   }
 
   @media (min-width: 1280px) {
     :root {
       /* Desktop */
-      --font-size-h1: 48px;
+      --font-size-h1: 40px;
       --font-size-h2: 36px;
-      --font-size-h3: 32px;
-      --font-size-h4: 24px;
-      --font-size-p1: 20px;
+      --font-size-h3: 28px;
+      --font-size-h4: 20px;
+      --font-size-p1: 18px;
       --font-size-p2: 16px;
       --font-size-p3: 14px;
 
-      --letter-spacing-h4: 0; /* 24px → no tracking */
-      --letter-spacing-p1: 0; /* 20px → no tracking */
+      --letter-spacing-h4: 0; /* 20px → no tracking */
+      --letter-spacing-p1: 0.02em; /* 18px → +2% */
       --letter-spacing-p2: 0.02em; /* 16px → +2% */
       --letter-spacing-p3: 0.04em; /* 14px → +4% */
     }
@@ -230,7 +239,7 @@
 
   :root {
     /* =====================================
-     * 5) Additional layout tokens
+     * 7) Additional layout tokens
      * ===================================*/
     /* Mobile (default) */
     --page-padding-hor: 16px;