unicorn-design-system 2.0.2 → 2.0.4

package/COLORS.md

@@ -0,0 +1,194 @@
+# 🎨 Unicorn Design System - Color Palette
+
+This document contains all color tokens available in the Unicorn Design System. Each color has 10 shades from 50 (lightest) to 900 (darkest).
+
+## Usage
+
+Colors can be accessed through the MUI theme:
+
+```typescript
+import { useTheme } from '@mui/material/styles';
+
+const theme = useTheme();
+const primaryColor = theme.palette.blue[500];
+const secondaryColor = theme.palette.green[500];
+```
+
+---
+
+## 🔵 Blue (Primary)
+
+Used for primary actions, links, and primary buttons.
+
+| Shade | Hex Value | Usage |
+|-------|-----------|-------|
+| 50    | `#ECF4FF` | Backgrounds, hover states |
+| 100   | `#D4E5FF` | Light backgrounds |
+| 200   | `#A9CBFF` | Borders, dividers |
+| 300   | `#82B4FF` | Disabled states |
+| 400   | `#5294F7` | Hover states |
+| **500** | **`#417AE9`** | **Primary buttons, main actions** |
+| 600   | `#2A5CBB` | Active states, primary button hover |
+| 700   | `#17449B` | Darker interactive elements |
+| 800   | `#133880` | Text, high contrast |
+| 900   | `#192C70` | Headings, emphasis text |
+
+---
+
+## 🟢 Green (Secondary)
+
+Used for secondary actions, success states, and positive feedback.
+
+| Shade | Hex Value | Usage |
+|-------|-----------|-------|
+| 50    | `#E3FFEF` | Success backgrounds |
+| 100   | `#C9F7DC` | Light success states |
+| 200   | `#A0EBC7` | Disabled secondary buttons |
+| 300   | `#72E3AC` | Borders |
+| 400   | `#4ED996` | Hover states |
+| **500** | **`#736337`** | **Secondary buttons, success indicators** |
+| 600   | `#20A665` | Secondary button hover |
+| 700   | `#179A5B` | Active states |
+| 800   | `#14864F` | Dark success states |
+| 900   | `#147B4A` | Success text |
+
+---
+
+## 🔘 Grey (Neutral)
+
+Used for text, backgrounds, borders, and neutral UI elements.
+
+| Shade | Hex Value | Usage |
+|-------|-----------|-------|
+| 50    | `#FCFCFE` | App background |
+| 100   | `#F4F6F9` | Card backgrounds, surfaces |
+| 200   | `#E1E7EA` | Borders, dividers |
+| 300   | `#BAC3C8` | Disabled borders |
+| 400   | `#839299` | Placeholder text |
+| **500** | **`#5D6E75`** | **Body text, secondary text** |
+| 600   | `#40545D` | Dark text |
+| 700   | `#243B45` | Headings |
+| 800   | `#112934` | High contrast text |
+| 900   | `#051922` | Maximum contrast |
+
+---
+
+## 🟠 Aqua
+
+Used for informational states and accent colors.
+
+| Shade | Hex Value |
+|-------|-----------|
+| 50    | `#DCFBFF` |
+| 100   | `#BCF7FF` |
+| 200   | `#A4F4FF` |
+| 300   | `#7EECFB` |
+| 400   | `#5DE2F4` |
+| **500** | **`#3FD3E7`** |
+| 600   | `#00B1C9` |
+| 700   | `#1890A1` |
+| 800   | `#0D7381` |
+| 900   | `#004F5A` |
+
+---
+
+## 🟣 Indigo
+
+Used for tertiary actions and special highlights.
+
+| Shade | Hex Value |
+|-------|-----------|
+| 50    | `#E6DFFF` |
+| 100   | `#C8BAFF` |
+| 200   | `#A58EFF` |
+| 300   | `#7F61F0` |
+| 400   | `#593EBE` |
+| **500** | **`#473297`** |
+| 600   | `#372772` |
+| 700   | `#2D2060` |
+| 800   | `#271D51` |
+| 900   | `#1A1B41` |
+
+---
+
+## 🔴 Red (Error/Danger)
+
+Used for errors, destructive actions, and warnings.
+
+| Shade | Hex Value | Usage |
+|-------|-----------|-------|
+| 50    | `#F9E7E7` | Error backgrounds |
+| 100   | `#EFC3C3` | Light error states |
+| 200   | `#E49B9B` | Error borders |
+| 300   | `#D97272` | Disabled error states |
+| 400   | `#D15454` | Hover states |
+| **500** | **`#C93636`** | **Error text, danger buttons** |
+| 600   | `#BC2929` | Danger button hover |
+| 700   | `#AE1818` | Active error states |
+| 800   | `#9D160D` | Dark error states |
+| 900   | `#8C0B03` | High contrast errors |
+
+---
+
+## 🟡 Yellow (Warning)
+
+Used for warnings, alerts, and cautionary states.
+
+| Shade | Hex Value | Usage |
+|-------|-----------|-------|
+| 50    | `#FEF6E1` | Warning backgrounds |
+| 100   | `#FCE8B5` | Light warning states |
+| 200   | `#FAD983` | Warning borders |
+| 300   | `#F8CA51` | Hover states |
+| 400   | `#F7BE2C` | Active warnings |
+| **500** | **`#F5B307`** | **Warning indicators** |
+| 600   | `#F4AC06` | Warning hover |
+| 700   | `#F0A104` | Warning active |
+| 800   | `#F19617` | Dark warnings |
+| 900   | `#EE8B02` | High contrast warnings |
+
+---
+
+## 📋 Component Color Mapping
+
+### Buttons
+- **Primary Button**: `blue[500]` background, hover: `blue[600]`
+- **Secondary Button**: `green[500]` background, hover: `green[600]`
+- **Tertiary Button**: `grey[900]` text, `grey[100]` background
+- **Danger Button**: `red[500]` background, hover: `red[600]`
+- **Ghost Button**: Transparent background, `blue[500]` text
+
+### Inputs
+- Border: `grey[200]`
+- Focus Border: `blue[500]`
+- Error Border: `red[500]`
+- Success Border: `green[500]`
+- Background: `white`
+- Disabled Background: `grey[100]`
+
+### Alerts
+- Info: `aqua[500]`
+- Success: `green[500]`
+- Warning: `yellow[500]`
+- Error: `red[500]`
+
+### Text
+- Primary: `grey[900]`
+- Secondary: `grey[500]`
+- Disabled: `grey[400]`
+- Link: `blue[500]`
+
+---
+
+## 🔄 Version History
+
+### v2.0.2
+- Updated `green[500]` from `#26BB74` to `#736337` for better contrast and brand alignment
+
+### v2.0.1
+- Initial color palette release
+
+---
+
+**Last Updated**: January 2026
+**Package Version**: 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "unicorn-design-system",
-    "version": "2.0.2",
+    "version": "2.0.4",
     "description": "🦄 Beautiful React components and design tokens",
     "main": "dist/index.js",
     "module": "dist/index.mjs",
@@ -16,7 +16,8 @@
     "files": [
         "dist",
         "README.md",
-        "LICENSE"
+        "LICENSE",
+        "COLORS.md"
     ],
     "scripts": {
         "build": "tsup src/index.ts --format cjs,esm --dts --clean --platform browser --external react,react-dom,@mui/material,@mui/icons-material,@emotion/react,@emotion/styled,@mui/base && mkdir -p dist/fonts && cp src/fonts/* dist/fonts/ && tailwindcss -i ./src/index.css -o ./dist/styles.css --minify",