@skalar-saas/design-system 0.1.136 → 0.1.137

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skalar-saas/design-system",
-  "version": "0.1.136",
+  "version": "0.1.137",
   "type": "module",
   "description": "Skalar Design System - UI component library",
   "author": "Skalar Team",
@@ -28,10 +28,12 @@
       "require": "./dist/index.js"
     },
     "./styles": "./dist/design-system.css",
+    "./theme": "./src/styles/theme.css",
     "./preset": "./tailwind.preset.js"
   },
   "files": [
     "dist",
+    "src/styles/theme.css",
     "tailwind.preset.js",
     "README.md"
   ],

package/src/README.md

@@ -0,0 +1,110 @@
+# Shared Icons
+
+This directory contains reusable SVG icon components for the project.
+
+## Structure
+
+```
+src/shared/icons/
+├── ChatIcon.tsx              # Individual icon component
+├── AICommentaryIcon.tsx      # Individual icon component
+├── index.ts                  # Barrel export
+└── README.md                 # This file
+```
+
+## Source Files
+
+All SVG source files are located in `/public/icons/`.
+
+## Usage
+
+### Importing Icons
+
+```tsx
+// Import single icon
+import { ChatIcon } from '@/shared/icons';
+
+// Import multiple icons
+import { ChatIcon, AICommentaryIcon } from '@/shared/icons';
+```
+
+### Using in Components
+
+```tsx
+// Default size (20px)
+<ChatIcon />
+
+// Custom size
+<ChatIcon size={24} />
+
+// With custom class
+<ChatIcon className="text-blue-500" />
+```
+
+## Adding a New Icon
+
+1. **Save the SVG** to `/public/icons/` with a descriptive name (e.g., `iconsax-new-icon.svg`)
+
+2. **Create the component file** in this directory:
+   ```tsx
+   // NewIcon.tsx
+   import React from 'react';
+
+   export interface NewIconProps {
+     size?: number;
+     className?: string;
+   }
+
+   export const NewIcon = ({ size = 20, className }: NewIconProps) => (
+     <svg
+       width={size}
+       height={size}
+       viewBox="0 0 20 20"
+       fill="none"
+       xmlns="http://www.w3.org/2000/svg"
+       className={className}
+     >
+       {/* SVG paths here - use fill="currentColor" for theme compatibility */}
+     </svg>
+   );
+   ```
+
+3. **Export in index.ts**:
+   ```tsx
+   export { NewIcon } from './NewIcon';
+   export type { NewIconProps } from './NewIcon';
+   ```
+
+## Naming Convention
+
+- Component name: PascalCase (e.g., `ChatIcon`, `AICommentaryIcon`)
+- File name: Same as component name (e.g., `ChatIcon.tsx`)
+- SVG source: kebab-case in `/public/icons/` (e.g., `iconsax-chat.svg`)
+
+## Best Practices
+
+1. **Use `currentColor`** for fill/stroke to inherit text color from parent
+2. **Accept `size` prop** for flexible sizing (default: 20px)
+3. **Accept `className` prop** for styling flexibility
+4. **Preserve viewBox** from original SVG for correct scaling
+5. **Export TypeScript types** alongside components
+6. **Document the icon** with JSDoc comments
+
+## Theme Compatibility
+
+All icons use `fill="currentColor"` to automatically adapt to the theme's text color. This allows icons to change color based on:
+- Parent component text color
+- Hover states
+- Active/inactive states
+- Dark/light mode (when implemented)
+
+Example:
+```tsx
+<div className="text-blue-500">
+  <ChatIcon /> {/* Will be blue */}
+</div>
+
+<div className="text-red-500 hover:text-red-700">
+  <ChatIcon /> {/* Will be red, darker on hover */}
+</div>
+```

package/src/styles/README.md

@@ -0,0 +1,81 @@
+# CSS Files - IMPORTANT
+
+## 📁 Files Overview
+
+### `globals.css` - PRODUCTION (DO NOT MODIFY)
+- **Purpose**: Used in production builds (npm package)
+- **Status**: Legacy file, will be replaced eventually
+- **Rule**: ⛔ **NEVER MODIFY THIS FILE**
+
+### `globals_new.css` - DEVELOPMENT (CORRECT TOKENS)
+- **Purpose**: New token system based on Figma design
+- **Status**: Active development, used in Storybook
+- **Contains**: Clean semantic tokens (36 tokens per theme)
+- **Rule**: ✅ This is the source of truth for new components
+- **Rule**: ⚠️ Only modify if updating tokens from Figma
+
+### `globals_old_backup.css` - BACKUP
+- **Purpose**: Backup of old globals.css
+- **Rule**: ⛔ DO NOT MODIFY OR DELETE
+
+## 🔧 Usage
+
+### Storybook (Development)
+Uses `globals_new.css` - configured in `.storybook/preview.ts`
+
+### Production Build (npm)
+Uses `globals.css` - configured in build process
+
+## 🎨 Token System
+
+The `globals_new.css` file contains:
+- **36 semantic tokens** for light theme
+- **36 semantic tokens** for dark theme
+- Based directly on Figma design
+- No invented color scales (primary-50, primary-100, etc.)
+
+### Token Categories:
+- Primitive colors: `--black`, `--white`
+- Surfaces: `--surface-bg`, `--surface-1` to `--surface-4`
+- Text emphasis: `--text-disabled`, `--placeholder`, `--low-em`, `--med-em`, `--high-em`
+- Brand: `--brand-primary-main`, `--brand-secondary-main`, etc.
+- Status colors: Warning, Success, Info, Danger (with `-em`, `-main`, `-accent-*` variants)
+- Spacing: `--spacing-0` to `--spacing-26`
+
+## 🚨 Critical Rules
+
+1. **NEVER modify `globals.css`** - It's used in production
+2. **Only modify `globals_new.css` if:**
+   - Updating tokens from Figma design
+   - Adding new tokens approved by design team
+3. **When migrating components:**
+   - Update component to use new semantic tokens
+   - Test in both light and dark modes
+   - DO NOT modify the CSS files
+
+## 📋 Migration Process
+
+1. Components use `globals.css` (old) in production
+2. New components are built with `globals_new.css` tokens
+3. Old components are gradually migrated to new tokens
+4. When all components are migrated: `globals_new.css` → `globals.css`
+5. Delete `globals_old_backup.css`
+
+## 💡 Quick Reference
+
+**Need to add a new component?**
+→ Use tokens from `globals_new.css`
+
+**Found a component with old tokens (primary-900, gray-500, etc.)?**
+→ Migrate it to use semantic tokens (success-main, surface-3, etc.)
+
+**Want to change a color?**
+→ DON'T! Check with design team first, update Figma, then update `globals_new.css`
+
+**Storybook showing wrong colors?**
+→ Check that `.storybook/preview.ts` imports `globals_new.css`
+
+---
+
+**Last updated**: Nov 2025
+**Token system version**: 1.0 (Figma-based semantic tokens)

package/src/styles/theme.css

@@ -0,0 +1,536 @@
+/**
+ * =========================================
+ * SKALAR DESIGN SYSTEM - NEW TOKEN SYSTEM
+ * =========================================
+ *
+ * Importable theme: token definitions (:root / .dark) + @theme mapping.
+ * Sin `@import "tailwindcss"` a propósito, para que un consumidor pueda
+ * importar este archivo DESPUÉS de su propio `@import "tailwindcss"` sin
+ * duplicarlo. El build del DS lo importa vía globals.css.
+ */
+
+/* ========================================= */
+/* BASE TOKENS - LIGHT THEME (DEFAULT)      */
+/* ========================================= */
+
+:root {
+  /* Fonts */
+  --font-inter: 'Inter', sans-serif;
+  --font-space-grotesk: 'Space Grotesk', sans-serif;
+
+  /* ========================================= */
+  /* PRIMITIVE COLORS                         */
+  /* ========================================= */
+
+  --black: #000;
+  --white: #FFF;
+  --black-uniform: #000;
+  --white-uniform: #FFF;
+
+  /* ========================================= */
+  /* SURFACE TOKENS                           */
+  /* Use for backgrounds, cards, containers   */
+  /* ========================================= */
+
+  --surface-bg: #F9F9FA;
+  --surface-1: #F0F1F5;
+  --surface-2: #E8EBF0;
+  --surface-3: #D8DDE5;
+  --surface-4: #CACFDB;
+
+  /* ========================================= */
+  /* TEXT EMPHASIS TOKENS                     */
+  /* Use for text colors based on hierarchy   */
+  /* ========================================= */
+
+  --disabled: #BFC6D4;
+  --placeholder: #667085;
+  --low-em: #5A606B;
+  --med-em: #2F343C;
+  --high-em: #22262E;
+
+  /* ========================================= */
+  /* BRAND TOKENS                             */
+  /* Primary brand colors                     */
+  /* ========================================= */
+
+  --brand-primary-main: #0A0F15;
+  --brand-primary-main-special: #0A0F15;
+
+  --brand-primary-accent-special: #191E25;
+  --brand-primary-accent-3: #262C35;
+
+  --brand-secondary-main: #2563EB;
+  --brand-secondary-accent-3: #3B76F6;
+
+  /* ========================================= */
+  /* SEMANTIC STATUS TOKENS - WARNING         */
+  /* ========================================= */
+
+  --warning-em: #FB6E0A;
+  --warning-main: #FC9E0B;
+  --warning-accent-3: #FDC82C;
+  --warning-accent-1: #FEDE82;
+  --warning-accent-0: #FFF8E1;
+
+  /* ========================================= */
+  /* SEMANTIC STATUS TOKENS - SUCCESS         */
+  /* ========================================= */
+
+  --success-em: #054F31;
+  --success-main: #039855;
+  --success-accent-3: #32D583;
+  --success-accent-2: #A6F4C5;
+  --success-accent-1: #ECFDF3;
+
+  /* ========================================= */
+  /* SEMANTIC STATUS TOKENS - INFO            */
+  /* ========================================= */
+
+  --info-em: #3362C2;
+  --info-main: #3A85E8;
+  --info-accent-3: #50A3F9;
+  --info-accent-2: #94C9FC;
+  --info-accent-1: #E4F2FE;
+
+  /* ========================================= */
+  /* SEMANTIC STATUS TOKENS - DANGER          */
+  /* ========================================= */
+
+  --danger-em: #DE2424;
+  --danger-main: #F03D3D;
+  --danger-accent-3: #FF7373;
+  --danger-accent-2: #FFE0E0;
+  --danger-accent-1: #FEF2F2;
+
+  /* ========================================= */
+  /* SPACING SYSTEM                           */
+  /* ========================================= */
+
+  --spacing-0: 0px;
+  --spacing-1: 2px;
+  --spacing-2: 4px;
+  --spacing-3: 6px;
+  --spacing-4: 8px;
+  --spacing-5: 10px;
+  --spacing-6: 12px;
+  --spacing-7: 14px;
+  --spacing-8: 16px;
+  --spacing-9: 20px;
+  --spacing-10: 24px;
+  --spacing-11: 28px;
+  --spacing-12: 32px;
+  --spacing-13: 40px;
+  --spacing-14: 48px;
+  --spacing-15: 64px;
+  --spacing-16: 80px;
+  --spacing-17: 96px;
+  --spacing-18: 128px;
+  --spacing-19: 180px;
+  --spacing-20: 192px;
+  --spacing-21: 224px;
+  --spacing-22: 256px;
+  --spacing-23: 320px;
+  --spacing-24: 384px;
+  --spacing-25: 480px;
+  --spacing-26: 560px;
+
+  /* ========================================= */
+  /* SHADOW SYSTEM                            */
+  /* Use for elevations and depth             */
+  /* ========================================= */
+
+  --shadow-e1: 0px 4px 12px -2px rgba(0, 0, 0, 0.08);
+  --shadow-e2: 0px 8px 24px -4px rgba(0, 0, 0, 0.12);
+  --shadow-e3: 0px 12px 32px -6px rgba(0, 0, 0, 0.16);
+
+  /* ========================================= */
+  /* LAYOUT SYSTEM                            */
+  /* Container, Sidebar, and Navbar tokens    */
+  /* ========================================= */
+
+  /* Container Max Widths */
+  --layout-container-max-width: 1400px;
+  --layout-container-narrow: 896px;
+  --layout-container-medium: 1152px;
+  --layout-container-wide: 1600px;
+
+  /* Container Padding (responsive) */
+  --layout-container-padding-mobile: 16px;
+  --layout-container-padding-tablet: 24px;
+  --layout-container-padding-desktop: 32px;
+  --layout-container-padding-desktop-lg: 48px;
+
+  /* Sidebar Dimensions */
+  --layout-sidebar-width: 280px;
+  --layout-sidebar-collapsed: 64px;
+  --layout-sidebar-navigation: 240px;
+
+  /* Navbar Dimensions */
+  --layout-navbar-header-height: 60px;
+  --layout-navbar-tabs-height: 48px;
+  --layout-navbar-total-height: 108px;
+
+}
+
+/* ========================================= */
+/* DARK MODE THEME                          */
+/* ========================================= */
+
+.dark {
+  /* Primitive colors - INVERTED */
+  --black: #FFF;
+  --white: #000;
+
+  /* Surface tokens - Dark backgrounds */
+  --surface-bg: #0A0A0A;
+  --surface-1: #131313;
+  --surface-2: #1F1F1F;
+  --surface-3: #292929;
+  --surface-4: #333333;
+
+  /* Text emphasis - Lighter for dark backgrounds */
+  --disabled: #565656;
+  --placeholder: #C4C4C4;
+  --low-em: #7E7E7E;
+  --med-em: #C3C3C3;
+  --high-em: #FFF;
+
+  /* Brand tokens - Adjusted for dark mode */
+  --brand-primary-main: #3B414C;
+  --brand-primary-main-special: #1F1F1F;
+
+  --brand-primary-accent-special: #333333;
+  --brand-primary-accent-3: #262C35;
+
+  --brand-secondary-main: #2563EB;
+  --brand-secondary-accent-3: #3B76F6;
+
+  /* Warning tokens - Dark mode variants */
+  --warning-em: #FED350;
+  --warning-main: #FDBE12;
+  --warning-accent-3: #FDB10C;
+  --warning-accent-1: #FEDE82;
+  --warning-accent-0: #3A2A06;
+
+  /* Success tokens - Dark mode variants */
+  --success-em: #6CE9A6;
+  --success-main: #12B76A;
+  --success-accent-3: #039855;
+  --success-accent-2: #054F31;
+  --success-accent-1: #053321;
+
+  /* Info tokens - Dark mode variants */
+  --info-em: #6CB3FA;
+  --info-main: #3C93F7;
+  --info-accent-3: #3A85E8;
+  --info-accent-2: #2C43A3;
+  --info-accent-1: #3560C2;
+
+  /* Danger tokens - Dark mode variants */
+  --danger-em: #FFA9A9;
+  --danger-main: #F03D3D;
+  --danger-accent-3: #DE2424;
+  --danger-accent-2: #3F1E1E;
+  --danger-accent-1: #371C1C;
+
+  /* Canvas tokens - Dark mode */
+  --canvas-container-bg: #0a0a0a;
+  --canvas-bg: #111111;
+  --canvas-grid-bg: #0f0f0f;
+  --canvas-grid-line: #2a2a2a;
+  --canvas-grid-center-line: #181818;
+}
+
+/* ========================================= */
+/* TAILWIND THEME INTEGRATION               */
+/* ========================================= */
+
+@theme inline {
+  /* Font families */
+  --font-family-inter: var(--font-inter);
+  --font-family-space-grotesk: var(--font-space-grotesk);
+
+  /* Primitive colors */
+  --color-black: var(--black);
+  --color-white: var(--white);
+
+  --color-black-uniform: var(--black-uniform);
+  --color-white-uniform: var(--white-uniform);
+
+
+  /* Surface colors */
+  --color-surface-bg: var(--surface-bg);
+  --color-surface-1: var(--surface-1);
+  --color-surface-2: var(--surface-2);
+  --color-surface-3: var(--surface-3);
+  --color-surface-4: var(--surface-4);
+
+  /* Text emphasis */
+  --color-disabled: var(--disabled);
+  --color-placeholder: var(--placeholder);
+  --color-low-em: var(--low-em);
+  --color-med-em: var(--med-em);
+  --color-high-em: var(--high-em);
+
+  /* Brand colors */
+  --color-brand-primary-main: var(--brand-primary-main);
+  --color-brand-primary-main-special: var(--brand-primary-main-special);
+  --color-brand-primary-accent-special: var(--brand-primary-accent-special);
+  --color-brand-primary-accent-3: var(--brand-primary-accent-3);
+  --color-brand-secondary-main: var(--brand-secondary-main);
+  --color-brand-secondary-accent-3: var(--brand-secondary-accent-3);
+
+  /* Warning colors */
+  --color-warning-em: var(--warning-em);
+  --color-warning-main: var(--warning-main);
+  --color-warning-accent-3: var(--warning-accent-3);
+  --color-warning-accent-1: var(--warning-accent-1);
+  --color-warning-accent-0: var(--warning-accent-0);
+
+  /* Success colors */
+  --color-success-em: var(--success-em);
+  --color-success-main: var(--success-main);
+  --color-success-accent-3: var(--success-accent-3);
+  --color-success-accent-2: var(--success-accent-2);
+  --color-success-accent-1: var(--success-accent-1);
+
+  /* Info colors */
+  --color-info-em: var(--info-em);
+  --color-info-main: var(--info-main);
+  --color-info-accent-3: var(--info-accent-3);
+  --color-info-accent-2: var(--info-accent-2);
+  --color-info-accent-1: var(--info-accent-1);
+
+  /* Danger colors */
+  --color-danger-em: var(--danger-em);
+  --color-danger-main: var(--danger-main);
+  --color-danger-accent-3: var(--danger-accent-3);
+  --color-danger-accent-2: var(--danger-accent-2);
+  --color-danger-accent-1: var(--danger-accent-1);
+
+  /* Spacing */
+  --spacing-0: 0px;
+  --spacing-1: 2px;
+  --spacing-2: 4px;
+  --spacing-3: 6px;
+  --spacing-4: 8px;
+  --spacing-5: 10px;
+  --spacing-6: 12px;
+  --spacing-7: 14px;
+  --spacing-8: 16px;
+  --spacing-9: 20px;
+  --spacing-10: 24px;
+  --spacing-11: 28px;
+  --spacing-12: 32px;
+  --spacing-13: 40px;
+  --spacing-14: 48px;
+  --spacing-15: 64px;
+  --spacing-16: 80px;
+  --spacing-17: 96px;
+  --spacing-18: 128px;
+  --spacing-19: 180px;
+  --spacing-20: 192px;
+  --spacing-21: 224px;
+  --spacing-22: 256px;
+  --spacing-23: 320px;
+  --spacing-24: 384px;
+  --spacing-25: 480px;
+  --spacing-26: 560px;
+
+  /* Border Radius */
+  --radius-0: 0px;
+  --radius-1: 2px;
+  --radius-2: 4px;
+  --radius-3: 6px;
+  --radius-4: 8px;
+  --radius-5: 10px;
+  --radius-6: 12px;
+  --radius-7: 14px;
+  --radius-8: 16px;
+  --radius-9: 20px;
+  --radius-10: 24px;
+  --radius-11: 28px;
+  --radius-12: 32px;
+  --radius-13: 40px;
+  --radius-14: 48px;
+  --radius-15: 64px;
+  --radius-16: 80px;
+  --radius-17: 96px;
+  --radius-18: 128px;
+  --radius-19: 180px;
+  --radius-20: 192px;
+  --radius-21: 224px;
+  --radius-22: 256px;
+  --radius-23: 320px;
+  --radius-24: 384px;
+  --radius-25: 480px;
+  --radius-26: 560px;
+
+  /* Shadows */
+  --shadow-e1: var(--shadow-e1);
+  --shadow-e2: var(--shadow-e2);
+  --shadow-e3: var(--shadow-e3);
+
+  /* ========================================= */
+  /* LAYOUT SYSTEM                            */
+  /* ========================================= */
+
+  /* Container Max Widths */
+  --max-width-container: var(--layout-container-max-width);
+  --max-width-container-narrow: var(--layout-container-narrow);
+  --max-width-container-medium: var(--layout-container-medium);
+  --max-width-container-wide: var(--layout-container-wide);
+
+  /* Container Padding */
+  --padding-container-mobile: var(--layout-container-padding-mobile);
+  --padding-container-tablet: var(--layout-container-padding-tablet);
+  --padding-container-desktop: var(--layout-container-padding-desktop);
+  --padding-container-desktop-lg: var(--layout-container-padding-desktop-lg);
+
+  /* Sidebar Widths */
+  --width-sidebar: var(--layout-sidebar-width);
+  --width-sidebar-collapsed: var(--layout-sidebar-collapsed);
+  --width-sidebar-nav: var(--layout-sidebar-navigation);
+
+  /* Navbar Heights */
+  --height-navbar: var(--layout-navbar-total-height);
+  --height-navbar-header: var(--layout-navbar-header-height);
+  --height-navbar-tabs: var(--layout-navbar-tabs-height);
+
+}
+
+/* ========================================= */
+/* BASE STYLES                              */
+/* ========================================= */
+
+body {
+  background: var(--surface-bg);
+  color: var(--high-em);
+  font-family: var(--font-inter), system-ui, sans-serif;
+}
+
+/* ========================================= */
+/* ANIMATIONS                               */
+/* ========================================= */
+
+@keyframes typing-dot {
+  0%,
+  60%,
+  100% {
+    opacity: 0.3;
+    transform: translateY(0) scale(0.8);
+  }
+  30% {
+    opacity: 1;
+    transform: translateY(-4px) scale(1);
+  }
+}
+
+@layer utilities {
+  .ds-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: var(--surface-3) var(--surface-1);
+  }
+
+  .ds-scrollbar::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+  }
+
+  .ds-scrollbar::-webkit-scrollbar-track {
+    background: var(--surface-1);
+  }
+
+  .ds-scrollbar::-webkit-scrollbar-thumb {
+    background: var(--surface-3);
+    border-radius: 999px;
+  }
+
+  .ds-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: var(--surface-4);
+  }
+
+  .animate-typing-dot {
+    animation: typing-dot 1.4s infinite ease-in-out;
+  }
+
+  /* Responsive flex direction utilities with proper specificity */
+  .flex-col-to-row {
+    flex-direction: column;
+    @media (min-width: 1024px) {
+      flex-direction: row;
+    }
+  }
+
+  .flex-col-to-row-md {
+    flex-direction: column;
+    @media (min-width: 768px) {
+      flex-direction: row;
+    }
+  }
+
+  /* Panel Layout animations - LEFT side */
+  .animate-panel-enter {
+    animation: panel-enter 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  .animate-panel-exit {
+    animation: panel-exit 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
+  }
+
+  /* Panel Layout animations - RIGHT side */
+  .animate-panel-enter-right {
+    animation: panel-enter-right 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  .animate-panel-exit-right {
+    animation: panel-exit-right 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
+  }
+}
+
+/* Panel enter/exit animations - LEFT side */
+@keyframes panel-enter {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes panel-exit {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+}
+
+/* Panel enter/exit animations - RIGHT side */
+@keyframes panel-enter-right {
+  from {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes panel-exit-right {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+}