@donkit-ai/design-system 0.2.3

package/src/styles/tokens.css

@@ -0,0 +1,278 @@
+/* =====================================
+ * 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-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-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);
+    --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-60);
+
+    /* 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);
+    --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: 2px;
+    --radius-s: 4px;
+  }
+
+  :root {
+    /* =====================================
+     * 5) 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: 36px;
+    --font-size-h2: 28px;
+    --font-size-h3: 24px;
+    --font-size-h4: 16px;
+    --font-size-p1: 16px;
+    --font-size-p2: 12px;
+    --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-p1: 0.02em; /* 16px → +2% */
+    --letter-spacing-p2: 0.06em; /* 12px → +6% */
+    --letter-spacing-p3: 0.06em; /* 12px → +6% */
+  }
+
+  @media (min-width: 768px) {
+    :root {
+      /* Tablet */
+      --font-size-h1: 40px;
+      --font-size-h2: 32px;
+      --font-size-h3: 28px;
+      --font-size-h4: 20px;
+      --font-size-p1: 16px;
+      --font-size-p2: 16px;
+      --font-size-p3: 12px;
+
+      --letter-spacing-h4: 0; /* 20px → no tracking */
+      --letter-spacing-p1: 0.02em; /* 16px → +2% */
+      --letter-spacing-p2: 0.02em; /* 16px → +2% */
+      --letter-spacing-p3: 0.06em; /* 12px → +6% */
+    }
+  }
+
+  @media (min-width: 1280px) {
+    :root {
+      /* Desktop */
+      --font-size-h1: 48px;
+      --font-size-h2: 36px;
+      --font-size-h3: 32px;
+      --font-size-h4: 24px;
+      --font-size-p1: 20px;
+      --font-size-p2: 16px;
+      --font-size-p3: 14px;
+
+      --letter-spacing-h4: 0; /* 24px → no tracking */
+      --letter-spacing-p1: 0; /* 20px → no tracking */
+      --letter-spacing-p2: 0.02em; /* 16px → +2% */
+      --letter-spacing-p3: 0.04em; /* 14px → +4% */
+    }
+  }
+
+  :root {
+    /* =====================================
+     * 5) 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;
+  }
+}