@donkit-ai/design-system 0.2.10 → 0.2.12

package/README.md

@@ -89,19 +89,30 @@ function MyComponent() {
 
 #### Размеры иконок
 
-**Важно:** Размеры иконок фиксированные (не адаптивные) и зависят от контекста использования:
+Размеры иконок стандартизированы с помощью констант:
 
-- **20px** - компактные элементы
+```javascript
+import { iconSizes } from '@donkit-ai/design-system';
+
+// iconSizes = { xs: 16, s: 20, m: 24, l: 28 }
+```
+
+**Соответствие размеров компонентам:**
+
+- **16px (xs)** - очень мелкие элементы
+- **20px (s)** - компактные элементы
   - Small кнопки (`size="small"`)
   - Tabs (вкладки)
   - Modal (иконка закрытия)
+  - Accordion, CodeAccordion
 
-- **24px** - стандартные элементы
+- **24px (m)** - стандартные элементы
   - Medium кнопки (`size="medium"`, по умолчанию)
   - Input (иконки в полях ввода)
   - Alert (иконки статусов)
+  - Select (иконка выпадающего списка)
 
-- **28px** - крупные элементы
+- **28px (l)** - крупные элементы
   - Large кнопки (`size="large"`)
 
 **Всегда используется `strokeWidth={1.5}`** для единообразия дизайна.
@@ -110,30 +121,31 @@ function MyComponent() {
 
 ```javascript
 import { Mail, Search, Eye, EyeOff, AlertCircle, Check, X } from 'lucide-react';
+import { iconSizes } from '@donkit-ai/design-system';
 
 // Small button / Tabs / Modal
-<Button size="small" icon={<Mail size={20} strokeWidth={1.5} />}>
+<Button size="small" icon={<Mail size={iconSizes.s} strokeWidth={1.5} />}>
   Send
 </Button>
-<Tab icon={<AlertCircle size={20} strokeWidth={1.5} />}>
+<Tab icon={<AlertCircle size={iconSizes.s} strokeWidth={1.5} />}>
   Alerts
 </Tab>
 
 // Medium button / Input / Alert
-<Button size="medium" icon={<Search size={24} strokeWidth={1.5} />}>
+<Button size="medium" icon={<Search size={iconSizes.m} strokeWidth={1.5} />}>
   Search
 </Button>
 <Input
-  icon={<Search size={24} strokeWidth={1.5} />}
+  icon={<Search size={iconSizes.m} strokeWidth={1.5} />}
   placeholder="Search..."
 />
 <Alert
   type="success"
-  icon={<Check size={24} strokeWidth={1.5} />}
+  icon={<Check size={iconSizes.m} strokeWidth={1.5} />}
 />
 
 // Large button
-<Button size="large" icon={<Mail size={28} strokeWidth={1.5} />}>
+<Button size="large" icon={<Mail size={iconSizes.l} strokeWidth={1.5} />}>
   Send Email
 </Button>
 ```
@@ -154,9 +166,9 @@ document.documentElement.setAttribute('data-theme', 'light');
 
 #### Базовые примитивы
 - `--color-white`: #FFFAFA
-- `--color-white-65/50/40/20/15/13/06`: rgba с прозрачностью 65%, 50%, 40%, 20%, 15%, 13%, 6%
+- `--color-white-95/92/65/50/40/20/15/13/06`: rgba с прозрачностью 95%, 92%, 65%, 50%, 40%, 20%, 15%, 13%, 6%
 - `--color-black`: #0E0F11
-- `--color-black-65/60/50/40/20/10/08/04`: rgba с прозрачностью 65%, 60%, 50%, 40%, 20%, 10%, 8%, 4%
+- `--color-black-95/65/60/50/40/20/10/08/04`: rgba с прозрачностью 95%, 65%, 60%, 50%, 40%, 20%, 10%, 8%, 4%
 - `--color-red`: #EA6464
 - `--color-red-90`: rgba с прозрачностью 90%
 
@@ -170,7 +182,7 @@ document.documentElement.setAttribute('data-theme', 'light');
 - `--color-border` - границы
 - `--color-border-hover` - границы при hover (Dark: white-40, Light: black-40)
 - `--color-border-selected` - границы выбранного элемента (Dark: white-50, Light: black-50)
-- `--color-txt-icon-1` - основной текст/иконки (100%)
+- `--color-txt-icon-1` - основной текст/иконки (Dark: white-92, Light: black-95)
 - `--color-txt-icon-2` - вторичный текст/иконки (65%)
 - `--color-accent` - акцентный цвет
 - `--color-accent-hover` - акцент при hover
@@ -203,7 +215,7 @@ document.documentElement.setAttribute('data-theme', 'light');
 - `--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-h4`: 20px → 24px → 24px
 - `--font-size-p1`: 16px → 18px → 18px
 - `--font-size-p2`: 14px → 16px → 16px
 - `--font-size-p3`: 12px → 14px → 14px
@@ -214,7 +226,7 @@ document.documentElement.setAttribute('data-theme', 'light');
 - Меньше 14px → +6% (0.06em)
 
 Адаптивные значения трекинга:
-- `--letter-spacing-h4`: 0.02em → 0 → 0 (18px / 20px / 20px)
+- `--letter-spacing-h4`: 0 → 0 → 0 (20px / 24px / 24px - без трекинга)
 - `--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)

package/package.json

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

package/src/components/Accordion.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { ChevronDown } from 'lucide-react';
+import { iconSizes } from '../styles/iconSizes';
 import './Accordion.css';
 
 export function Accordion({
@@ -20,7 +21,7 @@ export function Accordion({
       >
         <span className="ds-accordion__title">{title}</span>
         <ChevronDown
-          size={20}
+          size={iconSizes.s}
           strokeWidth={1.5}
           className={`ds-accordion__icon ${isExpanded ? 'ds-accordion__icon--expanded' : ''}`}
         />

package/src/components/Alert.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Info, CheckCircle, AlertTriangle, XCircle, X } from 'lucide-react';
+import { iconSizes } from '../styles/iconSizes';
 import './Alert.css';
 
 const ICON_MAP = {
@@ -24,7 +25,7 @@ export function Alert({
     <div className={`ds-alert ds-alert--${variant} ${!title ? 'ds-alert--no-title' : ''}`} role={alertRole} {...props}>
       {Icon && (
         <div className="ds-alert__icon">
-          <Icon size={24} strokeWidth={1.5} />
+          <Icon size={iconSizes.m} strokeWidth={1.5} />
         </div>
       )}
       <div className="ds-alert__content">
@@ -38,7 +39,7 @@ export function Alert({
           onClick={onClose}
           aria-label="Close alert"
         >
-          <X size={24} strokeWidth={1.5} />
+          <X size={iconSizes.m} strokeWidth={1.5} />
         </button>
       )}
     </div>

package/src/components/CodeAccordion.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { ChevronDown } from 'lucide-react';
+import { iconSizes } from '../styles/iconSizes';
 import './CodeAccordion.css';
 
 export function CodeAccordion({
@@ -20,7 +21,7 @@ export function CodeAccordion({
       >
         <span className="ds-code-accordion__title">{title}</span>
         <ChevronDown
-          size={20}
+          size={iconSizes.s}
           strokeWidth={1.5}
           className={`ds-code-accordion__icon ${isExpanded ? 'ds-code-accordion__icon--expanded' : ''}`}
         />

package/src/components/Modal.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { X } from 'lucide-react';
+import { iconSizes } from '../styles/iconSizes';
 import { Button } from './Button';
 import './Modal.css';
 
@@ -52,7 +53,7 @@ export function Modal({
               <Button
                 variant="ghost"
                 size="small"
-                icon={<X size={20} strokeWidth={1.5} />}
+                icon={<X size={iconSizes.s} strokeWidth={1.5} />}
                 onClick={onClose}
                 aria-label="Close modal"
               />

package/src/components/Select.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { ChevronDown } from 'lucide-react';
+import { iconSizes } from '../styles/iconSizes';
 import './Select.css';
 
 export function Select({
@@ -52,7 +53,7 @@ export function Select({
   }, [isOpen]);
 
   const selectedOption = options.find(opt => opt.value === value);
-  const iconSize = size === 'small' ? 20 : 24;
+  const iconSize = size === 'small' ? iconSizes.s : iconSizes.m;
 
   return (
     <div className={`ds-select-wrapper ${fullWidth ? 'ds-select-wrapper--full' : ''} ${disabled ? 'ds-select-wrapper--disabled' : ''}`}>

package/src/components/Stepper.css

@@ -99,28 +99,32 @@
 /* Sizes */
 
 /* Small */
+.ds-stepper--small {
+  height: var(--height-s);
+}
+
 .ds-stepper--small .ds-stepper-button {
   width: var(--height-s);
-  height: var(--height-s);
   padding: 0;
 }
 
 .ds-stepper--small .ds-stepper-input {
-  height: var(--height-s);
   font-size: var(--font-size-p2);
   letter-spacing: var(--letter-spacing-p2);
   padding: 0 var(--space-xs);
 }
 
 /* Medium */
+.ds-stepper--medium {
+  height: var(--height-m);
+}
+
 .ds-stepper--medium .ds-stepper-button {
   width: var(--height-m);
-  height: var(--height-m);
   padding: 0;
 }
 
 .ds-stepper--medium .ds-stepper-input {
-  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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Minus, Plus } from 'lucide-react';
+import { iconSizes } from '../styles/iconSizes';
 import './Stepper.css';
 
 export function Stepper({
@@ -56,7 +57,7 @@ export function Stepper({
     disabled && 'ds-stepper--disabled',
   ].filter(Boolean).join(' ');
 
-  const iconSize = size === 'small' ? 20 : 24;
+  const iconSize = size === 'small' ? iconSizes.s : iconSizes.m;
 
   return (
     <div className={className}>

package/src/components/Textarea.css

@@ -28,27 +28,31 @@
   transition: border-color var(--transition-normal);
   line-height: 1.5;
   resize: vertical;
-  /* Кастомный resize handle */
+  /* Кастомный resize handle - 2 диагональные линии */
   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);
+    linear-gradient(315deg, transparent 5px, var(--color-border) 5px, var(--color-border) 6px, transparent 6px),
+    linear-gradient(315deg, transparent 10px, var(--color-border) 10px, var(--color-border) 11px, transparent 11px);
   background-repeat: no-repeat;
   background-position: bottom right;
-  background-size: 12px 12px;
+  background-size: 16px 16px;
 }
 
 .ds-textarea::placeholder {
   color: var(--color-txt-icon-2);
 }
 
+.ds-textarea::-webkit-resizer {
+  display: none;
+}
+
 .ds-textarea:hover:not(:disabled) {
   border-color: var(--color-border-hover);
   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);
+    linear-gradient(315deg, transparent 5px, var(--color-border-hover) 5px, var(--color-border-hover) 6px, transparent 6px),
+    linear-gradient(315deg, 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;
+  background-size: 16px 16px;
 }
 
 .ds-textarea:focus,
@@ -56,11 +60,11 @@
   outline: none;
   border-color: var(--color-border-hover);
   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);
+    linear-gradient(315deg, transparent 5px, var(--color-border-hover) 5px, var(--color-border-hover) 6px, transparent 6px),
+    linear-gradient(315deg, 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;
+  background-size: 16px 16px;
 }
 
 .ds-textarea:disabled {
@@ -70,11 +74,11 @@
 .ds-textarea--error {
   border-color: var(--color-error);
   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);
+    linear-gradient(315deg, transparent 5px, var(--color-error) 5px, var(--color-error) 6px, transparent 6px),
+    linear-gradient(315deg, transparent 10px, var(--color-error) 10px, var(--color-error) 11px, transparent 11px);
   background-repeat: no-repeat;
   background-position: bottom right;
-  background-size: 12px 12px;
+  background-size: 16px 16px;
 }
 
 .ds-textarea--no-resize {

package/src/index.js

@@ -1,5 +1,6 @@
 // Styles
 export * from './styles/tokens.css';
+export { iconSizes } from './styles/iconSizes';
 
 // Components
 export { Button } from './components/Button';

package/src/styles/iconSizes.js

@@ -0,0 +1,13 @@
+/**
+ * Icon sizes matching CSS variables
+ * --icon-xs: 16px
+ * --icon-s: 20px
+ * --icon-m: 24px
+ * --icon-l: 28px
+ */
+export const iconSizes = {
+  xs: 16,
+  s: 20,
+  m: 24,
+  l: 28,
+};

package/src/styles/tokens.css

@@ -11,6 +11,7 @@
     /* Color primitives - white */
     --color-white: #FFFAFA;
     --color-white-95: rgba(255, 250, 250, 0.95);
+    --color-white-92: rgba(255, 250, 250, 0.92);
     --color-white-65: rgba(255, 250, 250, 0.65);
     --color-white-50: rgba(255, 250, 250, 0.5);
     --color-white-40: rgba(255, 250, 250, 0.4);
@@ -67,7 +68,7 @@
     --color-border: var(--color-white-20);
     --color-border-hover: var(--color-white-40);
     --color-border-selected: var(--color-white-50);
-    --color-txt-icon-1: var(--color-white-95);
+    --color-txt-icon-1: var(--color-white-92);
     --color-txt-icon-2: var(--color-white-65);
     --color-accent: var(--color-red);
     --color-accent-hover: var(--color-red-90);
@@ -173,6 +174,12 @@
     --height-s: 32px;
     --height-m: 44px;
     --height-l: 56px;
+
+    /* Icon sizes */
+    --icon-xs: 16px;
+    --icon-s: 20px;
+    --icon-m: 24px;
+    --icon-l: 28px;
   }
 
   :root {
@@ -188,7 +195,7 @@
     --font-size-h1: 32px;
     --font-size-h2: 28px;
     --font-size-h3: 24px;
-    --font-size-h4: 18px;
+    --font-size-h4: 20px;
     --font-size-p1: 16px;
     --font-size-p2: 14px;
     --font-size-p3: 12px;
@@ -197,7 +204,7 @@
     --letter-spacing-h1: 0;
     --letter-spacing-h2: 0;
     --letter-spacing-h3: 0;
-    --letter-spacing-h4: 0.02em; /* 18px → +2% */
+    --letter-spacing-h4: 0; /* 20px → no tracking */
     --letter-spacing-p1: 0.02em; /* 16px → +2% */
     --letter-spacing-p2: 0.04em; /* 14px → +4% */
     --letter-spacing-p3: 0.06em; /* 12px → +6% */
@@ -209,12 +216,12 @@
       --font-size-h1: 40px;
       --font-size-h2: 36px;
       --font-size-h3: 28px;
-      --font-size-h4: 20px;
+      --font-size-h4: 24px;
       --font-size-p1: 18px;
       --font-size-p2: 16px;
       --font-size-p3: 14px;
 
-      --letter-spacing-h4: 0; /* 20px → no tracking */
+      --letter-spacing-h4: 0; /* 24px → no tracking */
       --letter-spacing-p1: 0.02em; /* 18px → +2% */
       --letter-spacing-p2: 0.02em; /* 16px → +2% */
       --letter-spacing-p3: 0.04em; /* 14px → +4% */
@@ -227,12 +234,12 @@
       --font-size-h1: 40px;
       --font-size-h2: 36px;
       --font-size-h3: 28px;
-      --font-size-h4: 20px;
+      --font-size-h4: 24px;
       --font-size-p1: 18px;
       --font-size-p2: 16px;
       --font-size-p3: 14px;
 
-      --letter-spacing-h4: 0; /* 20px → no tracking */
+      --letter-spacing-h4: 0; /* 24px → no tracking */
       --letter-spacing-p1: 0.02em; /* 18px → +2% */
       --letter-spacing-p2: 0.02em; /* 16px → +2% */
       --letter-spacing-p3: 0.04em; /* 14px → +4% */