@skalar-saas/design-system 0.1.160 → 0.2.0

package/src/README.md

@@ -1,110 +0,0 @@
-# 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

@@ -1,81 +0,0 @@
-# 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)