@donkit-ai/design-system 0.3.4 → 0.4.2

package/src/styles/tokens.css

@@ -1,298 +0,0 @@
-/* =====================================
- * Donkit Design System - Design Tokens
- * ===================================*/
-
-/* CSS Variables - must be in base layer to be available everywhere */
-@layer base {
-  :root {
-    /* =====================================
-     * 1) Colors: primitives + dark semantic
-     * ===================================*/
-    /* 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);
-    --color-white-20: rgba(255, 250, 250, 0.2);
-    --color-white-15: rgba(255, 250, 250, 0.15);
-    --color-white-13: rgba(255, 250, 250, 0.13);
-    --color-white-06: rgba(255, 250, 250, 0.06);
-
-    /* Color primitives - black */
-    --color-black: #0E0F11;
-    --color-black-95: rgba(14, 15, 17, 0.95);
-    --color-black-65: rgba(14, 15, 17, 0.65);
-    --color-black-60: rgba(14, 15, 17, 0.6);
-    --color-black-50: rgba(14, 15, 17, 0.5);
-    --color-black-40: rgba(14, 15, 17, 0.4);
-    --color-black-20: rgba(14, 15, 17, 0.2);
-    --color-black-10: rgba(14, 15, 17, 0.1);
-    --color-black-08: rgba(14, 15, 17, 0.08);
-    --color-black-04: rgba(14, 15, 17, 0.04);
-
-    /* Color primitives - brand/accent */
-    --color-red: #EA6464;
-    --color-red-90: rgba(234, 100, 100, 0.9);
-    --color-red-10: rgba(234, 100, 100, 0.1);
-
-    /* Color semantics - status/feedback (bright for dark theme) */
-    --color-info: #60A5FA;
-    --color-info-15: rgba(96, 165, 250, 0.15);
-    --color-success: #00C86E;
-    --color-success-15: rgba(0, 200, 110, 0.15);
-    --color-warning: #FFBB00;
-    --color-warning-15: rgba(255, 187, 0, 0.15);
-    --color-error: #FF1200;
-    --color-error-15: rgba(255, 18, 0, 0.15);
-
-    /* Status colors - dark versions for light theme */
-    --color-info-dark: #2563EB;
-    --color-info-dark-15: rgba(37, 99, 235, 0.15);
-    --color-success-dark: #00A055;
-    --color-success-dark-15: rgba(0, 160, 85, 0.15);
-    --color-warning-dark: #D97706;
-    --color-warning-dark-15: rgba(217, 119, 6, 0.15);
-    --color-error-dark: #DC2626;
-    --color-error-dark-15: rgba(220, 38, 38, 0.15);
-
-    /* Legacy naming - deprecated but kept for backwards compatibility */
-    --color-neutral: var(--color-warning);
-    --color-neutral-10: var(--color-warning-15);
-    --color-error-10: var(--color-error-15);
-    --color-success-10: var(--color-success-15);
-
-    /* Color semantics - theme (dark default) */
-    --color-bg: var(--color-black);
-    --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-92);
-    --color-txt-icon-2: var(--color-white-65);
-    --color-accent: var(--color-red);
-    --color-accent-hover: var(--color-red-90);
-    --color-item-bg: var(--color-white-06);
-    --color-item-bg-selected: var(--color-white-06);
-    --color-item-bg-hover: var(--color-white-13);
-    --color-code-bg: var(--color-white-15);
-    --color-overlay: var(--color-black-65);
-
-    /* Status colors - adaptive (bright for dark theme) */
-    --color-status-info: var(--color-info);
-    --color-status-info-bg: var(--color-info-dark-15); /* темный фон для темной темы */
-    --color-status-success: var(--color-success);
-    --color-status-success-bg: var(--color-success-dark-15);
-    --color-status-warning: var(--color-warning);
-    --color-status-warning-bg: var(--color-warning-dark-15);
-    --color-status-error: var(--color-error);
-    --color-status-error-bg: var(--color-error-dark-15);
-  }
-
-  [data-theme="light"] {
-    /* Color semantics - theme (light) */
-    --color-bg: var(--color-white);
-    --color-border: var(--color-black-20);
-    --color-border-hover: var(--color-black-40);
-    --color-border-selected: var(--color-black-50);
-    --color-txt-icon-1: var(--color-black-95);
-    --color-txt-icon-2: var(--color-black-65);
-    --color-accent: var(--color-red);
-    --color-accent-hover: var(--color-red-90);
-    --color-item-bg: var(--color-black-04);
-    --color-item-bg-selected: var(--color-black-04);
-    --color-item-bg-hover: var(--color-black-08);
-    --color-code-bg: var(--color-black-10);
-    --color-overlay: var(--color-black-60);
-
-    /* Status colors - adaptive (dark for light theme) */
-    --color-status-info: var(--color-info-dark);
-    --color-status-info-bg: var(--color-info-15); /* светлый фон для светлой темы */
-    --color-status-success: var(--color-success-dark);
-    --color-status-success-bg: var(--color-success-15);
-    --color-status-warning: var(--color-warning-dark);
-    --color-status-warning-bg: var(--color-warning-15);
-    --color-status-error: var(--color-error-dark);
-    --color-status-error-bg: var(--color-error-15);
-  }
-
-  :root {
-    /* =====================================
-     * 2) Breakpoints
-     * ===================================*/
-    --breakpoint-mobile: 375px;
-    --breakpoint-tablet: 768px;
-    --breakpoint-desktop: 1280px;
-  }
-
-  :root {
-    /* =====================================
-     * 3) Spacing scale (mobile/tablet/desktop)
-     * ===================================*/
-    /* Mobile (default) */
-    --space-xs: 8px;
-    --space-s: 12px;
-    --space-m: 16px;
-    --space-l: 24px;
-    --space-xl: 32px;
-  }
-
-  @media (min-width: 768px) {
-    :root {
-      /* Tablet */
-      --space-xs: 8px;
-      --space-s: 16px;
-      --space-m: 20px;
-      --space-l: 28px;
-      --space-xl: 40px;
-    }
-  }
-
-  @media (min-width: 1280px) {
-    :root {
-      /* Desktop */
-      --space-xs: 8px;
-      --space-s: 16px;
-      --space-m: 24px;
-      --space-l: 32px;
-      --space-xl: 48px;
-    }
-  }
-
-  :root {
-    /* =====================================
-     * 4) Border radius
-     * ===================================*/
-    --radius-xs: 4px;
-    --radius-s: 6px;
-  }
-
-  :root {
-    /* =====================================
-     * 5) Component heights
-     * ===================================*/
-    --height-xs: 24px;
-    --height-s: 32px;
-    --height-m: 44px;
-    --height-l: 56px;
-
-    /* Icon sizes */
-    --icon-xs: 16px;
-    --icon-s: 20px;
-    --icon-m: 24px;
-    --icon-l: 28px;
-    --icon-xl: 48px;
-  }
-
-  :root {
-    /* =====================================
-     * 6) Typography scale (mobile/tablet/desktop)
-     * ===================================*/
-    /* Base typography settings */
-    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-    line-height: 1.5;
-    font-weight: 400;
-
-    /* Mobile (default) */
-    --font-size-h1: 32px;
-    --font-size-h2: 28px;
-    --font-size-h3: 24px;
-    --font-size-h4: 20px;
-    --font-size-p1: 16px;
-    --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; /* 20px → no tracking */
-    --letter-spacing-p1: 0.02em; /* 16px → +2% */
-    --letter-spacing-p2: 0.04em; /* 14px → +4% */
-    --letter-spacing-p3: 0.06em; /* 12px → +6% */
-  }
-
-  @media (min-width: 768px) {
-    :root {
-      /* Tablet */
-      --font-size-h1: 40px;
-      --font-size-h2: 36px;
-      --font-size-h3: 28px;
-      --font-size-h4: 24px;
-      --font-size-p1: 18px;
-      --font-size-p2: 16px;
-      --font-size-p3: 14px;
-
-      --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% */
-    }
-  }
-
-  @media (min-width: 1280px) {
-    :root {
-      /* Desktop */
-      --font-size-h1: 40px;
-      --font-size-h2: 36px;
-      --font-size-h3: 28px;
-      --font-size-h4: 24px;
-      --font-size-p1: 18px;
-      --font-size-p2: 16px;
-      --font-size-p3: 14px;
-
-      --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% */
-    }
-  }
-
-  :root {
-    /* =====================================
-     * 7) Additional layout tokens
-     * ===================================*/
-    /* Mobile (default) */
-    --page-padding-hor: 16px;
-    --page-padding-vert: 32px;
-    --page-header-height: 64px;
-
-    /* Transitions */
-    --transition-fast: 0.15s ease;
-    --transition-normal: 0.2s ease;
-    --transition-slow: 0.3s ease;
-  }
-
-  @media (min-width: 768px) {
-    :root {
-      /* Tablet */
-      --page-padding-hor: 20px;
-      --page-padding-vert: 48px;
-      --page-header-height: 72px;
-    }
-  }
-
-  @media (min-width: 1280px) {
-    :root {
-      /* Desktop */
-      --page-padding-hor: 24px;
-      --page-padding-vert: 64px;
-      --page-header-height: 72px;
-    }
-  }
-
-  body {
-    margin: 0;
-    min-width: 320px;
-    min-height: 100vh;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    background-color: var(--color-bg);
-    color: var(--color-txt-icon-1);
-    transition: background-color var(--transition-slow), color var(--transition-slow);
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-}