@donkit-ai/design-system 0.2.19 → 0.3.0

package/README.md

@@ -37,22 +37,22 @@ npm install @donkit-ai/design-system@latest
 
 ## Компоненты
 
-- **Button** - кнопки с вариантами (primary, secondary, ghost) и размерами (xs, small, medium, large). Поддерживает `href` для рендера как ссылка
-- **Tabs** - вкладки с состоянием selected в четырех размерах (xs, small, medium, large). Поддерживает `href` для рендера как ссылка
-- **Input** - текстовые поля с поддержкой иконок, ошибок и подсказок (xs, small, medium)
-- **Textarea** - многострочное текстовое поле (xs, small, medium)
-- **Select** - выпадающий список с кастомным дизайном (xs, small, medium)
-- **Stepper** - числовое поле с кнопками +/- для изменения значения (xs, small, medium)
-- **Toggle** - переключатель для включения/выключения опций (xs, small, medium, large)
-- **Checkbox** - чекбокс для выбора опций (xs, small, medium, large)
-- **Radio** - радиокнопка для выбора одного варианта из группы (xs, small, medium, large)
+- **Button** - кнопки с вариантами (primary, secondary, ghost) и размерами (xs, s, m, l). Поддерживает `href` для рендера как ссылка
+- **Tabs** - вкладки с состоянием selected в четырех размерах (xs, s, m, l). Поддерживает `href` для рендера как ссылка
+- **Input** - текстовые поля с поддержкой иконок, ошибок и подсказок (xs, s, m)
+- **Textarea** - многострочное текстовое поле (xs, s, m)
+- **Select** - выпадающий список с кастомным дизайном (xs, s, m)
+- **Stepper** - числовое поле с кнопками +/- для изменения значения (xs, s, m)
+- **Toggle** - переключатель для включения/выключения опций (xs, s, m, l)
+- **Checkbox** - чекбокс для выбора опций (xs, s, m, l)
+- **Radio** - радиокнопка для выбора одного варианта из группы (xs, s, m, l)
 - **Card** - карточки двух типов: info (информационная, прозрачный фон) и interactive (интерактивная с hover эффектом). Поддерживает `href` для рендера как ссылка
 - **Typography** - H1-H4, P1-P3 компоненты
 - **Code** - inline и block код с monospace шрифтом
 - **Link** - ссылки акцентным цветом, при hover цвет меняется и появляется подчеркивание
-- **Badge** - бейджи для статусов (success, error, warning, accent) в двух размерах (small, medium)
+- **Badge** - бейджи для статусов (success, error, warning, accent) в двух размерах (s, m)
 - **Modal** - модальные окна с header и footer
-- **Select** - выпадающий список с кастомным дизайном (small, medium)
+- **Select** - выпадающий список с кастомным дизайном (s, m)
 
 ## Использование в проекте
 
@@ -78,7 +78,7 @@ function MyComponent() {
       <P1 secondary>This is a demo</P1>
       <Button
         variant="primary"
-        size="medium"
+        size="m"
         icon={<Mail size={24} strokeWidth={1.5} />}
       >
         Send Email
@@ -120,21 +120,21 @@ import { iconSizes } from '@donkit-ai/design-system';
   - Extra Small табы (`size="xs"`)
 
 - **20px (s)** - компактные элементы
-  - Small кнопки (`size="small"`)
-  - Small табы (`size="small"`)
+  - Small кнопки (`size="s"`)
+  - Small табы (`size="s"`)
   - Modal (иконка закрытия)
   - Accordion, CodeAccordion
 
 - **24px (m)** - стандартные элементы
-  - Medium кнопки (`size="medium"`, по умолчанию)
-  - Medium табы (`size="medium"`)
+  - Medium кнопки (`size="m"`, по умолчанию)
+  - Medium табы (`size="m"`)
   - Input (иконки в полях ввода)
   - Alert (иконки статусов)
   - Select (иконка выпадающего списка)
 
 - **28px (l)** - крупные элементы
-  - Large кнопки (`size="large"`)
-  - Large табы (`size="large"`)
+  - Large кнопки (`size="l"`)
+  - Large табы (`size="l"`)
 
 - **48px (xl)** - очень крупные элементы
 
@@ -147,7 +147,7 @@ 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={iconSizes.s} strokeWidth={1.5} />}>
+<Button size="s" icon={<Mail size={iconSizes.s} strokeWidth={1.5} />}>
   Send
 </Button>
 <Tab icon={<AlertCircle size={iconSizes.s} strokeWidth={1.5} />}>
@@ -155,7 +155,7 @@ import { iconSizes } from '@donkit-ai/design-system';
 </Tab>
 
 // Medium button / Input / Alert
-<Button size="medium" icon={<Search size={iconSizes.m} strokeWidth={1.5} />}>
+<Button size="m" icon={<Search size={iconSizes.m} strokeWidth={1.5} />}>
   Search
 </Button>
 <Input
@@ -168,7 +168,7 @@ import { iconSizes } from '@donkit-ai/design-system';
 />
 
 // Large button
-<Button size="large" icon={<Mail size={iconSizes.l} strokeWidth={1.5} />}>
+<Button size="l" icon={<Mail size={iconSizes.l} strokeWidth={1.5} />}>
   Send Email
 </Button>
 
@@ -345,20 +345,20 @@ document.documentElement.setAttribute('data-theme', 'light');
 <Button size="xs" icon={<Mail size={16} strokeWidth={1.5} />}>
   Extra Small
 </Button>
-<Button size="small" icon={<Mail size={20} strokeWidth={1.5} />}>
+<Button size="s" icon={<Mail size={20} strokeWidth={1.5} />}>
   Small
 </Button>
-<Button size="medium" icon={<Mail size={24} strokeWidth={1.5} />}>
+<Button size="m" icon={<Mail size={24} strokeWidth={1.5} />}>
   Medium
 </Button>
-<Button size="large" icon={<Mail size={28} strokeWidth={1.5} />}>
+<Button size="l" icon={<Mail size={28} strokeWidth={1.5} />}>
   Large
 </Button>
 
 // С fullWidth
 <Button
   variant="primary"
-  size="medium"
+  size="m"
   icon={<Mail size={24} strokeWidth={1.5} />}
   fullWidth
 >
@@ -375,7 +375,7 @@ import { Tabs, Tab } from '@donkit-ai/design-system';
 import { AlertCircle } from 'lucide-react';
 
 // Basic tabs
-<Tabs size="medium">
+<Tabs size="m">
   <Tab selected={selectedTab === 'tab1'} onClick={() => setSelectedTab('tab1')}>
     Overview
   </Tab>
@@ -389,7 +389,7 @@ import { AlertCircle } from 'lucide-react';
 
 // With icons (размер иконки соответствует размеру таба)
 // xs: 16px, small: 20px, medium: 24px, large: 28px
-<Tabs size="small">
+<Tabs size="s">
   <Tab
     selected={selectedTab === 'alerts'}
     onClick={() => setSelectedTab('alerts')}
@@ -403,7 +403,7 @@ import { AlertCircle } from 'lucide-react';
 </Tabs>
 
 // Disabled tab
-<Tabs size="medium">
+<Tabs size="m">
   <Tab selected>Active</Tab>
   <Tab disabled>Disabled</Tab>
 </Tabs>
@@ -411,7 +411,7 @@ import { AlertCircle } from 'lucide-react';
 // As links (с href) - рендерит <a> вместо <button>
 // При обычном клике: вызывается onClick (preventDefault автоматический)
 // При Cmd/Ctrl+Click или Middle Click: открывается новая вкладка
-<Tabs size="medium">
+<Tabs size="m">
   <Tab selected href="/overview" onClick={() => navigate('/overview')}>
     Overview
   </Tab>
@@ -439,7 +439,7 @@ import { AlertCircle } from 'lucide-react';
 // Basic input
 <Input
   label="Email"
-  size="medium"
+  size="m"
   type="email"
   placeholder="email@example.com"
   hint="We'll never share your email"
@@ -448,7 +448,7 @@ import { AlertCircle } from 'lucide-react';
 // Left icon (informational) - size small
 <Input
   label="Search"
-  size="small"
+  size="s"
   icon={<Search size={20} strokeWidth={1.5} />}
   placeholder="Search..."
 />
@@ -456,7 +456,7 @@ import { AlertCircle } from 'lucide-react';
 // Left icon - size medium
 <Input
   label="Search"
-  size="medium"
+  size="m"
   icon={<Search size={24} strokeWidth={1.5} />}
   placeholder="Search..."
 />
@@ -464,7 +464,7 @@ import { AlertCircle } from 'lucide-react';
 // Right icon (action with hover) - size medium
 <Input
   label="Password"
-  size="medium"
+  size="m"
   type={showPassword ? 'text' : 'password'}
   iconRight={showPassword ? <EyeOff size={24} strokeWidth={1.5} /> : <Eye size={24} strokeWidth={1.5} />}
   onIconRightClick={() => setShowPassword(!showPassword)}
@@ -488,7 +488,7 @@ import { AlertCircle } from 'lucide-react';
 ```jsx
 <Select
   label="Choose option"
-  size="medium"
+  size="m"
   value={value}
   onChange={setValue}
   options={[
@@ -507,7 +507,7 @@ import { AlertCircle } from 'lucide-react';
 // Basic stepper
 <Stepper
   label="Quantity"
-  size="medium"
+  size="m"
   value={quantity}
   onChange={setQuantity}
   min={1}
@@ -518,7 +518,7 @@ import { AlertCircle } from 'lucide-react';
 // Small size
 <Stepper
   label="Price"
-  size="small"
+  size="s"
   value={price}
   onChange={setPrice}
   min={0}
@@ -551,7 +551,7 @@ import { AlertCircle } from 'lucide-react';
 - `min` - минимальное значение (default: 0)
 - `max` - максимальное значение (default: 100)
 - `step` - шаг изменения (default: 1)
-- `size` - размер: "small" или "medium" (default: "medium")
+- `size` - размер: "s" или "m" (default: "medium")
 - `label` - подпись поля
 - `hint` - подсказка под полем
 - `error` - текст ошибки (показывается вместо hint)
@@ -583,7 +583,7 @@ import { AlertCircle } from 'lucide-react';
 
 // Small size (20px)
 <Toggle
-  size="small"
+  size="s"
   checked={isEnabled}
   onChange={setIsEnabled}
   label="Auto-save"
@@ -591,7 +591,7 @@ import { AlertCircle } from 'lucide-react';
 
 // Medium size (24px, default)
 <Toggle
-  size="medium"
+  size="m"
   checked={darkMode}
   onChange={setDarkMode}
   label="Dark mode"
@@ -599,7 +599,7 @@ import { AlertCircle } from 'lucide-react';
 
 // Large size (28px)
 <Toggle
-  size="large"
+  size="l"
   checked={isEnabled}
   onChange={setIsEnabled}
   label="Enable feature"
@@ -663,7 +663,7 @@ import { AlertCircle } from 'lucide-react';
 
 // Small size (20px)
 <Checkbox
-  size="small"
+  size="s"
   checked={isEnabled}
   onChange={setIsEnabled}
   label="Enable feature"
@@ -671,7 +671,7 @@ import { AlertCircle } from 'lucide-react';
 
 // Medium size (24px, default)
 <Checkbox
-  size="medium"
+  size="m"
   checked={isSubscribed}
   onChange={setIsSubscribed}
   label="Subscribe to newsletter"
@@ -679,7 +679,7 @@ import { AlertCircle } from 'lucide-react';
 
 // Large size (28px)
 <Checkbox
-  size="large"
+  size="l"
   checked={isAccepted}
   onChange={setIsAccepted}
   label="I accept the terms"
@@ -747,7 +747,7 @@ import { AlertCircle } from 'lucide-react';
 
 // Small size (20px)
 <Radio
-  size="small"
+  size="s"
   checked={size === 'small'}
   onChange={() => setSize('small')}
   name="size"
@@ -757,7 +757,7 @@ import { AlertCircle } from 'lucide-react';
 
 // Medium size (24px, default)
 <Radio
-  size="medium"
+  size="m"
   checked={size === 'medium'}
   onChange={() => setSize('medium')}
   name="size"
@@ -767,7 +767,7 @@ import { AlertCircle } from 'lucide-react';
 
 // Large size (28px)
 <Radio
-  size="large"
+  size="l"
   checked={size === 'large'}
   onChange={() => setSize('large')}
   name="size"
@@ -937,15 +937,15 @@ import { AlertCircle } from 'lucide-react';
 
 ```jsx
 // Medium size (default)
-<Badge variant="success" size="medium">Success</Badge>
-<Badge variant="error" size="medium">Error</Badge>
-<Badge variant="warning" size="medium">Warning</Badge>
-<Badge variant="info" size="medium">Info</Badge>
+<Badge variant="success" size="m">Success</Badge>
+<Badge variant="error" size="m">Error</Badge>
+<Badge variant="warning" size="m">Warning</Badge>
+<Badge variant="info" size="m">Info</Badge>
 
 // Small size
-<Badge variant="success" size="small">Success</Badge>
-<Badge variant="error" size="small">Error</Badge>
-<Badge variant="warning" size="small">Warning</Badge>
+<Badge variant="success" size="s">Success</Badge>
+<Badge variant="error" size="s">Error</Badge>
+<Badge variant="warning" size="s">Warning</Badge>
 
 // Variants
 <Badge variant="default">Default</Badge>
@@ -972,16 +972,16 @@ import { AlertCircle } from 'lucide-react';
 <Modal
   title="Modal Title"
   onClose={handleClose}
-  size="medium"
+  size="m"
 >
   <P1>Modal content here...</P1>
   <Input label="Name" placeholder="Enter name" />
 
   <ModalFooter>
-    <Button variant="secondary" size="medium" onClick={handleClose}>
+    <Button variant="secondary" size="m" onClick={handleClose}>
       Cancel
     </Button>
-    <Button variant="primary" size="medium">
+    <Button variant="primary" size="m">
       Submit
     </Button>
   </ModalFooter>

package/package.json

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

package/src/components/Badge.css

@@ -7,14 +7,14 @@
 }
 
 /* Sizes */
-.ds-badge--small {
+.ds-badge--s {
   padding: 0 4px;
   font-size: var(--font-size-p3);
   letter-spacing: var(--letter-spacing-p3);
   border-radius: var(--radius-xs);
 }
 
-.ds-badge--medium {
+.ds-badge--m {
   padding: 2px var(--space-xs);
   font-size: var(--font-size-p2);
   letter-spacing: var(--letter-spacing-p2);

package/src/components/Badge.jsx

@@ -4,7 +4,7 @@ import './Badge.css';
 export function Badge({
   children,
   variant = 'default',
-  size = 'medium',
+  size = 'm',
   role,
   ...props
 }) {

package/src/components/Button.css

@@ -68,21 +68,21 @@
   border-radius: var(--radius-xs);
 }
 
-.ds-button--small {
+.ds-button--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 {
+.ds-button--m {
   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 {
+.ds-button--l {
   height: var(--height-l);
   padding: 0 calc(var(--height-l) / 2);
   font-size: var(--font-size-h4);

package/src/components/Button.jsx

@@ -4,7 +4,7 @@ import './Button.css';
 export function Button({
   children,
   variant = 'primary',
-  size = 'medium',
+  size = 'm',
   fullWidth = false,
   icon,
   disabled = false,

package/src/components/Card.css

@@ -27,14 +27,14 @@
   padding: 0;
 }
 
-.ds-card--small {
+.ds-card--s {
   padding: var(--space-s);
 }
 
-.ds-card--medium {
+.ds-card--m {
   padding: var(--space-m);
 }
 
-.ds-card--large {
+.ds-card--l {
   padding: var(--space-l);
 }

package/src/components/Checkbox.css

@@ -58,31 +58,31 @@
 }
 
 /* Small */
-.ds-checkbox--small .ds-checkbox__box {
+.ds-checkbox--s .ds-checkbox__box {
   width: var(--icon-s);
   height: var(--icon-s);
 }
 
-.ds-checkbox--small .ds-checkbox__label {
+.ds-checkbox--s .ds-checkbox__label {
   font-size: var(--font-size-p2);
 }
 
 /* Medium */
-.ds-checkbox--medium .ds-checkbox__box {
+.ds-checkbox--m .ds-checkbox__box {
   width: var(--icon-m);
   height: var(--icon-m);
 }
 
-.ds-checkbox--medium .ds-checkbox__label {
+.ds-checkbox--m .ds-checkbox__label {
   font-size: var(--font-size-p1);
 }
 
 /* Large */
-.ds-checkbox--large .ds-checkbox__box {
+.ds-checkbox--l .ds-checkbox__box {
   width: var(--icon-l);
   height: var(--icon-l);
 }
 
-.ds-checkbox--large .ds-checkbox__label {
+.ds-checkbox--l .ds-checkbox__label {
   font-size: var(--font-size-p1);
 }

package/src/components/Checkbox.jsx

@@ -5,7 +5,7 @@ import './Checkbox.css';
 export function Checkbox({
   checked = false,
   onChange,
-  size = 'medium',
+  size = 'm',
   disabled = false,
   label,
   id,

package/src/components/Input.css

@@ -65,14 +65,14 @@
   border-radius: var(--radius-xs);
 }
 
-.ds-input--small {
+.ds-input--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 {
+.ds-input--m {
   height: var(--height-m);
   padding: 0 calc(var(--height-m) / 4);
   font-size: var(--font-size-p1);
@@ -83,11 +83,11 @@
   padding-left: calc(var(--height-xs) / 4 + 16px + var(--height-xs) / 4);
 }
 
-.ds-input--with-icon.ds-input--small {
+.ds-input--with-icon.ds-input--s {
   padding-left: calc(var(--height-s) / 4 + 20px + var(--height-s) / 4);
 }
 
-.ds-input--with-icon.ds-input--medium {
+.ds-input--with-icon.ds-input--m {
   padding-left: calc(var(--height-m) / 4 + 24px + var(--height-m) / 4);
 }
 
@@ -95,11 +95,11 @@
   padding-right: calc(var(--height-xs) / 4 + 16px + var(--height-xs) / 4);
 }
 
-.ds-input--with-icon-right.ds-input--small {
+.ds-input--with-icon-right.ds-input--s {
   padding-right: calc(var(--height-s) / 4 + 20px + var(--height-s) / 4);
 }
 
-.ds-input--with-icon-right.ds-input--medium {
+.ds-input--with-icon-right.ds-input--m {
   padding-right: calc(var(--height-m) / 4 + 24px + var(--height-m) / 4);
 }
 
@@ -115,11 +115,11 @@
   left: 6px;
 }
 
-.ds-input-icon--small {
+.ds-input-icon--s {
   left: 8px;
 }
 
-.ds-input-icon--medium {
+.ds-input-icon--m {
   left: 11px;
 }
 
@@ -144,11 +144,11 @@
   right: 6px;
 }
 
-.ds-input-icon-right--small {
+.ds-input-icon-right--s {
   right: 8px;
 }
 
-.ds-input-icon-right--medium {
+.ds-input-icon-right--m {
   right: 11px;
 }
 

package/src/components/Input.jsx

@@ -9,7 +9,7 @@ export function Input({
   icon,
   iconRight,
   onIconRightClick,
-  size = 'medium',
+  size = 'm',
   disabled,
   id,
   ...props

package/src/components/Modal.css

@@ -22,17 +22,17 @@
   margin: auto 0;
 }
 
-.ds-modal--small {
+.ds-modal--s {
   width: 100%;
   max-width: 400px;
 }
 
-.ds-modal--medium {
+.ds-modal--m {
   width: 100%;
   max-width: 600px;
 }
 
-.ds-modal--large {
+.ds-modal--l {
   width: 100%;
   max-width: 900px;
 }

package/src/components/Modal.jsx

@@ -8,7 +8,7 @@ export function Modal({
   children,
   title,
   onClose,
-  size = 'medium',
+  size = 'm',
   ...props
 }) {
   const modalRef = useRef(null);

package/src/components/Radio.css

@@ -70,46 +70,46 @@
 }
 
 /* Small */
-.ds-radio--small .ds-radio__circle {
+.ds-radio--s .ds-radio__circle {
   width: var(--icon-s);
   height: var(--icon-s);
 }
 
-.ds-radio--small .ds-radio__dot {
+.ds-radio--s .ds-radio__dot {
   width: 8px;
   height: 8px;
 }
 
-.ds-radio--small .ds-radio__label {
+.ds-radio--s .ds-radio__label {
   font-size: var(--font-size-p2);
 }
 
 /* Medium */
-.ds-radio--medium .ds-radio__circle {
+.ds-radio--m .ds-radio__circle {
   width: var(--icon-m);
   height: var(--icon-m);
 }
 
-.ds-radio--medium .ds-radio__dot {
+.ds-radio--m .ds-radio__dot {
   width: 10px;
   height: 10px;
 }
 
-.ds-radio--medium .ds-radio__label {
+.ds-radio--m .ds-radio__label {
   font-size: var(--font-size-p1);
 }
 
 /* Large */
-.ds-radio--large .ds-radio__circle {
+.ds-radio--l .ds-radio__circle {
   width: var(--icon-l);
   height: var(--icon-l);
 }
 
-.ds-radio--large .ds-radio__dot {
+.ds-radio--l .ds-radio__dot {
   width: 12px;
   height: 12px;
 }
 
-.ds-radio--large .ds-radio__label {
+.ds-radio--l .ds-radio__label {
   font-size: var(--font-size-p1);
 }

package/src/components/Radio.jsx

@@ -4,7 +4,7 @@ import './Radio.css';
 export function Radio({
   checked = false,
   onChange,
-  size = 'medium',
+  size = 'm',
   disabled = false,
   label,
   name,

package/src/components/Select.css

@@ -67,14 +67,14 @@
   border-radius: var(--radius-xs);
 }
 
-.ds-select-trigger--small {
+.ds-select-trigger--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 {
+.ds-select-trigger--m {
   height: var(--height-m);
   padding: 0 calc(var(--height-m) / 4);
   font-size: var(--font-size-p1);
@@ -119,11 +119,11 @@
   bottom: calc(100% + 4px);
 }
 
-.ds-select-dropdown--small {
+.ds-select-dropdown--s {
   border-radius: var(--radius-xs);
 }
 
-.ds-select-dropdown--medium {
+.ds-select-dropdown--m {
   border-radius: var(--radius-s);
 }
 
@@ -141,13 +141,13 @@
   word-wrap: break-word;
 }
 
-.ds-select-option--small {
+.ds-select-option--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 {
+.ds-select-option--m {
   min-height: var(--height-m);
   padding: var(--space-xs) calc(var(--height-m) / 4);
   font-size: var(--font-size-p1);

package/src/components/Select.jsx

@@ -11,7 +11,7 @@ export function Select({
   placeholder = 'Select option',
   error,
   fullWidth = true,
-  size = 'medium',
+  size = 'm',
   disabled = false,
   id,
   ...props

package/src/components/Stepper.css

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

package/src/components/Stepper.jsx

@@ -10,7 +10,7 @@ export function Stepper({
   min = 0,
   max = 100,
   step = 1,
-  size = 'medium',
+  size = 'm',
   disabled = false,
   hint,
   error,

package/src/components/Tabs.css

@@ -44,21 +44,21 @@
   border-radius: var(--radius-xs);
 }
 
-.ds-tab--small {
+.ds-tab--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 {
+.ds-tab--m {
   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 {
+.ds-tab--l {
   height: var(--height-l);
   padding: 0 calc(var(--height-l) / 2);
   font-size: var(--font-size-p1);

package/src/components/Tabs.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import './Tabs.css';
 
-export function Tabs({ children, size = 'medium', variant = 'ghost', ...props }) {
+export function Tabs({ children, size = 'm', 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 = 'ghost', ...props })
   );
 }
 
-export function Tab({ children, selected = false, onClick, size = 'medium', variant = 'ghost', disabled = false, icon, href, ...props }) {
+export function Tab({ children, selected = false, onClick, size = 'm', variant = 'ghost', disabled = false, icon, href, ...props }) {
   const isIconOnly = icon && !children;
 
   const className = [

package/src/components/Textarea.css

@@ -93,13 +93,13 @@
   border-radius: var(--radius-xs);
 }
 
-.ds-textarea--small {
+.ds-textarea--s {
   padding: var(--space-xs) var(--space-s);
   font-size: var(--font-size-p2);
   border-radius: var(--radius-xs);
 }
 
-.ds-textarea--medium {
+.ds-textarea--m {
   padding: var(--space-s);
   font-size: var(--font-size-p1);
   border-radius: var(--radius-s);

package/src/components/Textarea.jsx

@@ -6,7 +6,7 @@ export function Textarea({
   error,
   hint,
   fullWidth = true,
-  size = 'medium',
+  size = 'm',
   disabled,
   id,
   resize = true,

package/src/components/Toggle.css

@@ -70,64 +70,64 @@
 }
 
 /* Small */
-.ds-toggle--small .ds-toggle__track {
+.ds-toggle--s .ds-toggle__track {
   width: calc(var(--icon-s) * 1.75);
   height: var(--icon-s);
   border-radius: calc(var(--icon-s) / 2);
   padding: 2px;
 }
 
-.ds-toggle--small .ds-toggle__thumb {
+.ds-toggle--s .ds-toggle__thumb {
   width: calc(var(--icon-s) - 4px);
   height: calc(var(--icon-s) - 4px);
 }
 
-.ds-toggle--small .ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
+.ds-toggle--s .ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
   transform: translateX(calc(var(--icon-s) * 0.75));
 }
 
-.ds-toggle--small .ds-toggle__label {
+.ds-toggle--s .ds-toggle__label {
   font-size: var(--font-size-p2);
 }
 
 /* Medium */
-.ds-toggle--medium .ds-toggle__track {
+.ds-toggle--m .ds-toggle__track {
   width: calc(var(--icon-m) * 1.75);
   height: var(--icon-m);
   border-radius: calc(var(--icon-m) / 2);
   padding: 2px;
 }
 
-.ds-toggle--medium .ds-toggle__thumb {
+.ds-toggle--m .ds-toggle__thumb {
   width: calc(var(--icon-m) - 4px);
   height: calc(var(--icon-m) - 4px);
 }
 
-.ds-toggle--medium .ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
+.ds-toggle--m .ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
   transform: translateX(calc(var(--icon-m) * 0.75));
 }
 
-.ds-toggle--medium .ds-toggle__label {
+.ds-toggle--m .ds-toggle__label {
   font-size: var(--font-size-p1);
 }
 
 /* Large */
-.ds-toggle--large .ds-toggle__track {
+.ds-toggle--l .ds-toggle__track {
   width: calc(var(--icon-l) * 1.75);
   height: var(--icon-l);
   border-radius: calc(var(--icon-l) / 2);
   padding: 3px;
 }
 
-.ds-toggle--large .ds-toggle__thumb {
+.ds-toggle--l .ds-toggle__thumb {
   width: calc(var(--icon-l) - 6px);
   height: calc(var(--icon-l) - 6px);
 }
 
-.ds-toggle--large .ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
+.ds-toggle--l .ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
   transform: translateX(calc(var(--icon-l) * 0.75));
 }
 
-.ds-toggle--large .ds-toggle__label {
+.ds-toggle--l .ds-toggle__label {
   font-size: var(--font-size-p1);
 }

package/src/components/Toggle.jsx

@@ -4,7 +4,7 @@ import './Toggle.css';
 export function Toggle({
   checked = false,
   onChange,
-  size = 'medium',
+  size = 'm',
   disabled = false,
   label,
   id,