ali-mohammadi-design-system 1.0.0 → 2.0.0

package/src/theme/injectCSS.js

@@ -1,258 +1,23 @@
-// /* Color styles */
-// --dashboard-karun-mall---success: rgba(240, 253, 244, 1);
-// --dashboard-karun-mall---primary--20: rgba(226, 232, 240, 1);
-// --dashboard-karun-mall---primary--100: rgba(237, 236, 252, 1);
-// --dashboard-karun-mall---primary--200: rgba(220, 218, 250, 1);
-// --dashboard-karun-mall---primary--300: rgba(202, 199, 247, 1);
-// --dashboard-karun-mall---primary--400: rgba(149, 144, 239, 1);
-// --dashboard-karun-mall---primary--500---main: rgba(79, 70, 229, 1);
-// --dashboard-karun-mall---primary--600: rgba(63, 56, 184, 1);
-// --dashboard-karun-mall---primary--700: rgba(48, 42, 139, 1);
-// --dashboard-karun-mall---primary--800: rgba(32, 28, 93, 1);
-// --dashboard-karun-mall---primary--900: rgba(17, 14, 48, 1);
-// --dashboard-karun-mall---primary--1000: rgba(9, 7, 26, 1);
-// --dashboard-karun-mall---neutral--50: rgba(250, 250, 250, 1);
-// --dashboard-karun-mall---neutral--100: rgba(245, 245, 245, 1);
-// --dashboard-karun-mall---neutral--200: rgba(229, 229, 229, 1);
-// --dashboard-karun-mall---neutral--300: rgba(212, 212, 212, 1);
-// --dashboard-karun-mall---neutral--400: rgba(163, 163, 163, 1);
-// --dashboard-karun-mall---neutral--500: rgba(115, 115, 115, 1);
-// --dashboard-karun-mall---neutral--600: rgba(82, 82, 91, 1);
-// --dashboard-karun-mall---neutral--700: rgba(64, 64, 64, 1);
-// --dashboard-karun-mall---neutral--800: rgba(38, 38, 38, 1);
-// --dashboard-karun-mall---neutral--900: rgba(23, 23, 23, 1);
-// --dastyar---main--500: rgba(65, 14, 88, 1);
-// --dastyar---main--400: rgba(81, 17, 110, 1);
-// --dastyar---main--300primery: rgba(109, 49, 137, 1);
-// --dastyar---main--200: rgba(223, 179, 243, 1);
-// --dastyar---main--100: rgba(245, 222, 255, 1);
-// --dastyar---main--50: rgba(250, 238, 255, 1);
-// --dastyar---main--25: rgba(249, 242, 253, 1);
-// --dastyar---primary--500: rgba(92, 18, 198, 1);
-// --dastyar---primary--400: rgba(115, 22, 246, 1);
-// --dastyar---primary--300: rgba(143, 69, 249, 1);
-// --dastyar---primary--200: rgba(217, 190, 255, 1);
-// --dastyar---primary--100: rgba(241, 232, 254, 1);
-// --dastyar---primary--50: rgba(247, 242, 255, 1);
-// --dastyar---text-color--500: rgba(17, 17, 17, 1);
-// --dastyar---text-color--400: rgba(62, 62, 62, 1);
-// --dastyar---text-color--300: rgba(146, 146, 146, 1);
-// --dastyar---text-color--200: rgba(189, 189, 189, 1);
-// --dastyar---text-color--100: rgba(231, 231, 231, 1);
-// --dastyar---text-color--50: rgba(255, 255, 255, 1);
-// --dastyar---border--50: rgba(245, 245, 245, 1);
-// --dastyar---border--100: rgba(225, 225, 225, 1);
-// --dastyar---border--200: rgba(220, 220, 220, 1);
-// --dastyar---border--300: rgba(181, 181, 181, 1);
-// --dastyar---background-color--100: rgba(255, 255, 255, 1);
-// --dastyar---background-color--200: rgba(251, 251, 251, 1);
-// --dastyar---background-color--300: rgba(245, 245, 245, 1);
-// --dastyar---background-color--400: rgba(247, 246, 248, 1);
-// --dastyar---background-color--500: rgba(233, 233, 233, 1);
-// --dastyar---status---very--good: rgba(8, 161, 87, 1);
-// --dastyar---status---good: rgba(181, 213, 86, 1);
-// --dastyar---status---average: rgba(246, 188, 36, 1);
-// --dastyar---status---bad: rgba(247, 155, 36, 1);
-// --dastyar---status---very--bad: rgba(239, 69, 49, 1);
-// --dastyar---status---success: rgba(16, 195, 120, 1);
-// --dastyar---status--info: rgba(46, 114, 255, 1);
-// --dastyar---status--warning: rgba(246, 188, 36, 1);
-// --dastyar---status---error: rgba(255, 51, 51, 1);
-// --dastyar---status---success--background: rgba(239, 255, 245, 1);
-// --dastyar---status--info--background: rgba(240, 245, 255, 1);
-// --dastyar---status--warning--background: rgba(255, 248, 233, 1);
-// --dastyar---status--error--background: rgba(255, 246, 246, 1);
-// --dastyar---blue--500: rgba(80, 70, 229, 1);
-// --dastyar---blue--400: rgba(20, 92, 240, 1);
-// --dastyar---blue--300: rgba(46, 114, 255, 1);
-// --dastyar---blue--200: rgba(180, 204, 255, 1);
-// --dastyar---blue--100: rgba(214, 228, 255, 1);
-// --dastyar---blue--50: rgba(240, 245, 255, 1);
-// --parisa---b-g-gray-_suppliar-dashboard: rgba(246, 246, 246, 1);
-// --parisa---green-new: rgba(61, 194, 145, 1);
-// --parisa--yellow-new: rgba(246, 188, 36, 1);
-// --parisa--new-red-parisa: rgba(255, 51, 51, 1);
-// --parisa---green2-new: rgba(15, 146, 98, 1);
-// --parisa---g-r-red-pdf: rgba(255, 237, 237, 1);
-// --white--12: rgba(255, 255, 255, 0.11999999731779099);
-// --white--12: rgba(255, 255, 255, 0.11999999731779099);
-// --karunpay-colors---neutral--1000: rgba(22, 24, 27, 1);
-// --karunpay-colors---neutral--900: rgba(27, 29, 33, 1);
-// --karunpay-colors---neutral--800: rgba(35, 37, 41, 1);
-// --karunpay-colors---neutral--700: rgba(42, 45, 51, 1);
-// --karunpay-colors---neutral--600: rgba(85, 87, 92, 1);
-// --karunpay-colors---neutral--500: rgba(127, 129, 133, 1);
-// --karunpay-colors---neutral--400: rgba(170, 171, 173, 1);
-// --karunpay-colors---neutral--300: rgba(212, 213, 214, 1);
-// --karunpay-colors---neutral--200: rgba(234, 234, 235, 1);
-// --karunpay-colors---neutral--100: rgba(244, 244, 245, 1);
-// --karunpay-colors---neutral--50: rgba(250, 250, 250, 1);
-// --karunpay-colors---neutral--white-0: rgba(255, 255, 255, 1);
-// --karunpay-colors---primary--600: rgba(0, 57, 173, 1);
-// --karunpay-colors---primary--500: rgba(0, 71, 216, 1);
-// --karunpay-colors---primary--400: rgba(51, 108, 224, 1);
-// --karunpay-colors---primary--300: rgba(75, 126, 230, 1);
-// --karunpay-colors---primary--200: rgba(153, 181, 239, 1);
-// --karunpay-colors---primary--100: rgba(215, 228, 255, 1);
-// --karunpay-colors---primary--50: rgba(241, 245, 253, 1);
-// --karunpay-colors---primary--25: rgba(250, 251, 255, 1);
-// --karunpay-colors---secondary--600: rgba(236, 173, 17, 1);
-// --karunpay-colors---secondary--500: rgba(246, 186, 36, 1);
-// --karunpay-colors---secondary--400: rgba(248, 200, 80, 1);
-// --karunpay-colors---secondary--300: rgba(250, 214, 124, 1);
-// --karunpay-colors---secondary--200: rgba(251, 227, 167, 1);
-// --karunpay-colors---secondary--100: rgba(255, 238, 196, 1);
-// --karunpay-colors---secondary--50: rgba(255, 247, 229, 1);
-// --karunpay-colors---warning--600: rgba(232, 132, 47, 1);
-// --karunpay-colors---warning--500: rgba(255, 145, 52, 1);
-// --karunpay-colors---warning--400: rgba(255, 167, 93, 1);
-// --karunpay-colors---warning--300: rgba(255, 181, 119, 1);
-// --karunpay-colors---warning--200: rgba(255, 204, 162, 1);
-// --karunpay-colors---warning--100: rgba(255, 221, 192, 1);
-// --karunpay-colors---errors--600: rgba(230, 73, 72, 1);
-// --karunpay-colors---errors--500: rgba(253, 80, 79, 1);
-// --karunpay-colors---errors--400: rgba(253, 115, 114, 1);
-// --karunpay-colors---errors--300: rgba(254, 138, 137, 1);
-// --karunpay-colors---errors--200: rgba(255, 195, 193, 1);
-// --karunpay-colors---errors--100: rgba(255, 220, 219, 1);
-// --karunpay-colors---success--600: rgba(39, 143, 84, 1);
-// --karunpay-colors---success--500: rgba(55, 201, 118, 1);
-// --karunpay-colors---success--400: rgba(95, 212, 145, 1);
-// --karunpay-colors---success--300: rgba(121, 219, 163, 1);
-// --karunpay-colors---success--200: rgba(193, 238, 213, 1);
-// --karunpay-colors---success--100: rgba(235, 250, 241, 1);
-// --brand---neutral--600: rgba(85, 87, 92, 1);
-// --brand---neutral--500: rgba(127, 129, 133, 1);
-// --brand---neutral--400: rgba(170, 171, 173, 1);
-// --brand---neutral--300: rgba(212, 213, 214, 1);
-// --brand---neutral--800: rgba(35, 37, 41, 1);
-// --brand---neutral--700: rgba(42, 45, 51, 1);
-// --brand---neutral--0: rgba(255, 255, 255, 1);
-// --brand---neutral--200: rgba(234, 234, 235, 1);
-// --brand---neutral--100: rgba(244, 244, 245, 1);
-// --brand---neutral--50: rgba(250, 250, 250, 1);
-// --brand---neutral--900: rgba(27, 29, 33, 1);
-// --brand---dastyar--900: rgba(52, 25, 64, 1);
-// --brand---dastyar--700: rgba(103, 50, 127, 1);
-// --brand---dastyar--600: rgba(129, 63, 159, 1);
-// --brand---dastyar--400: rgba(179, 140, 197, 1);
-// --brand---dastyar--300: rgba(217, 197, 226, 1);
-// --brand---dastyar--200: rgba(230, 217, 236, 1);
-// --brand---dastyar--500: rgba(154, 101, 178, 1);
-// --brand---dastyar--800: rgba(77, 38, 95, 1);
-// --brand---dastyar--100: rgba(249, 242, 253, 1);
-// --brand---seller--dashboard--900: rgba(25, 21, 71, 1);
-// --brand---seller--dashboard--700: rgba(80, 70, 229, 1);
-// --brand---seller--dashboard--600: rgba(115, 107, 234, 1);
-// --brand---seller--dashboard--400: rgba(185, 181, 245, 1);
-// --brand---seller--dashboard--300: rgba(202, 199, 247, 1);
-// --brand---seller--dashboard--200: rgba(220, 218, 250, 1);
-// --brand---seller--dashboard--500: rgba(150, 144, 239, 1);
-// --brand---seller--dashboard--800: rgba(64, 56, 184, 1);
-// --brand---seller--dashboard--100: rgba(237, 236, 252, 1);
-// --brand---seller--dashboard--900-2: rgba(17, 14, 48, 1);
-// --brand---karun--pay---primary--700: rgba(0, 71, 216, 1);
-// --brand---karun--pay---primary--600: rgba(51, 108, 224, 1);
-// --brand---karun--pay---primary--300: rgba(178, 200, 243, 1);
-// --brand---karun--pay---primary--900: rgba(0, 43, 130, 1);
-// --brand---karun--pay---primary--800: rgba(0, 57, 173, 1);
-// --brand---karun--pay---primary--500: rgba(102, 145, 232, 1);
-// --brand---karun--pay---primary--200: rgba(204, 218, 247, 1);
-// --brand---karun--pay---primary--400: rgba(153, 181, 239, 1);
-// --brand---karun--pay---primary--100: rgba(229, 237, 251, 1);
-// --brand---karun--pay---secondary--900: rgba(206, 150, 10, 1);
-// --brand---karun--pay---secondary--600: rgba(248, 200, 80, 1);
-// --brand---karun--pay---secondary--500: rgba(250, 214, 124, 1);
-// --brand---karun--pay---secondary--400: rgba(251, 227, 167, 1);
-// --brand---karun--pay---secondary--300: rgba(252, 234, 189, 1);
-// --brand---karun--pay---secondary--700: rgba(246, 186, 36, 1);
-// --brand---karun--pay---secondary--200: rgba(253, 241, 211, 1);
-// --brand---karun--pay---secondary--800: rgba(236, 173, 17, 1);
-// --brand---karun--pay---secondary--100: rgba(254, 248, 233, 1);
-// --brand---state---error--900: rgba(157, 31, 31, 1);
-// --brand---state---error--600: rgba(255, 92, 92, 1);
-// --brand---state---error--500: rgba(255, 133, 133, 1);
-// --brand---state---error--800: rgba(206, 41, 41, 1);
-// --brand---state---error--400: rgba(255, 194, 194, 1);
-// --brand---state---error--700: rgba(255, 51, 51, 1);
-// --brand---state---error--200: rgba(255, 173, 173, 1);
-// --brand---state---error--300: rgba(255, 214, 214, 1);
-// --brand---state---error--100: rgba(255, 235, 235, 1);
-// --brand---state---warning--900: rgba(223, 119, 30, 1);
-// --brand---state---warning--800: rgba(232, 132, 47, 1);
-// --brand---state---warning--600: rgba(255, 167, 93, 1);
-// --brand---state---warning--500: rgba(255, 189, 133, 1);
-// --brand---state---warning--400: rgba(255, 211, 174, 1);
-// --brand---state---warning--200: rgba(255, 233, 214, 1);
-// --brand---state---warning--700: rgba(255, 145, 52, 1);
-// --brand---state---warning--300: rgba(255, 222, 194, 1);
-// --brand---state---warning--100: rgba(255, 244, 235, 1);
-// --brand---state---success--900: rgba(22, 80, 47, 1);
-// --brand---state---success--800: rgba(33, 121, 71, 1);
-// --brand---state---success--600: rgba(95, 212, 145, 1);
-// --brand---state---success--500: rgba(95, 212, 145, 1);
-// --brand---state---success--400: rgba(135, 223, 173, 1);
-// --brand---state---success--200: rgba(215, 244, 228, 1);
-// --brand---state---success--700: rgba(44, 161, 94, 1);
-// --brand---state---success--300: rgba(175, 233, 200, 1);
-// --brand---state---success--100: rgba(235, 250, 241, 1);
-// --brand---state---info--800: rgba(11, 137, 214, 1);
-// --brand---state---info--700: rgba(29, 166, 251, 1);
-// --brand---state---info--300: rgba(196, 233, 255, 1);
-// --brand---state---info--400: rgba(160, 218, 255, 1);
-// --brand---state---info--900: rgba(4, 103, 164, 1);
-// --brand---state---info--200: rgba(220, 242, 255, 1);
-// --brand---state---info--600: rgba(86, 191, 255, 1);
-// --brand---state---info--500: rgba(135, 209, 255, 1);
-// --brand---state---info--100: rgba(232, 246, 255, 1);
+import { generateTheme } from './generateTheme.js';
 
-// /* Text-size styles */
-// /* base size: typography---title--medium (16px) */
-// --typography---display--large: 2.25rem;
-// --typography---display--medium: 2rem;
-// --typography---display--small: 1.75rem;
-// --typography---headline--large: 2rem;
-// --typography---headline--medium: 1.75rem;
-// --typography---headline--small: 1.5rem;
-// --typography---title--large: 1.25rem;
-// --typography---title--medium: 1rem;
-// --typography---title--small: 0.88rem;
-// --typography---body--large: 1rem;
-// --typography---body--medium: 0.88rem;
-// --typography---body--small: 0.75rem;
-// --typography---label--large: 1rem;
-// --typography---label--medium: 0.88rem;
-// --typography---label--small: 0.63rem;
-// --old--style--typography---display---large-48: 3rem;
-// --old--style--typography---display---medium-36: 2.25rem;
-// --old--style--typography---display---small-36: 2.25rem;
-// --old--style--typography---headline---large-32: 2rem;
-// --old--style--typography---headline---mdium-28: 1.75rem;
-// --old--style--typography---headline---small-24: 1.5rem;
-// --old--style--typography---title---lag-24: 1.5rem;
-// --old--style--typography---title---medium-20: 1.25rem;
-// --old--style--typography---title---small-16: 1rem;
-// --old--style--typography---body---large-16: 1rem;
-// --old--style--typography---body---medium-14: 0.88rem;
-// --old--style--typography---body---small-12: 0.75rem;
-// --old--style--typography---label---large-14: 0.88rem;
-// --old--style--typography---label---medium-12: 0.75rem;
-// --old--style--typography---label---small-10: 0.63rem;
+/**
+ * تزریق CSS variables به DOM
+ * این تابع یک wrapper ساده برای generateTheme است
+ * 
+ * @param {Object} tokens - توکن‌های سفارشی
+ * @example
+ * ```js
+ * import { injectCSS } from 'ali-mohammadi-design-system';
+ * 
+ * injectCSS({
+ *   colors: {
+ *     primary: { 500: '#6366f1' }
+ *   }
+ * });
+ * ```
+ */
+export function injectCSS(tokens = {}) {
+  generateTheme(tokens);
+}
 
-// /* Effect styles */
-// --shadow:  0px 4px 4px rgba(0, 0, 0, 0.25);
-// --botton--shadow:  0px 6px 12px rgba(147, 147, 147, 0.25);
-// --acrd-shadow:  17px 7px 64px rgba(50, 59, 56, 0.07);
-// --effect:  16px 20px 90px rgba(28, 55, 112, 0.34);
-// --calc-shadow:  9px 8px 4px rgba(0, 0, 0, 0.05);
-// --buttonm:  4px 32px 90px rgba(13, 23, 41, 0.33);
-// --1:  0px -1px 10.800000190734863px rgba(204, 204, 204, 0.18);
-// --2:  17px 7px 64px rgba(50, 59, 56, 0.07);
-// --new-design-drop-shadow:  0px 4px 15px rgba(0, 0, 0, 0.05);
-// --sidebar-active-drop-shadow:  0px 4px 4px rgba(0, 0, 0, 0.05);
-// --background-blur-navigation: ;
-// --karunpay---effect---background-blur: ;
-// --elevation--1:  0px 1px 2px rgba(0, 0, 0, 0.25);
-// --elevation--2:  0px 2px 4px rgba(0, 0, 0, 0.2);
-// --elevation--3:  0px 3px 4px rgba(0, 0, 0, 0.2);
-// --elevation--4:  0px 3px 6px rgba(0, 0, 0, 0.2);
+export default injectCSS;

package/src/tokens/index.js

@@ -0,0 +1,271 @@
+import { defaultColors } from './colors.js';
+import projectTokens from '../config/project-tokens.json' assert { type: 'json' };
+
+/**
+ * تبدیل توکن‌های پروژه به فرمت استاندارد
+ */
+function normalizeProjectTokens() {
+  const normalized = {
+    colors: {},
+    typography: {},
+    spacing: {},
+    radius: {},
+    shadows: {},
+  };
+
+  // تبدیل رنگ‌های brand
+  if (projectTokens.brand) {
+    Object.entries(projectTokens.brand).forEach(([colorName, shades]) => {
+      if (typeof shades === 'object' && !Array.isArray(shades)) {
+        const normalizedName = colorName.toLowerCase();
+        normalized.colors[normalizedName] = {};
+        Object.entries(shades).forEach(([shade, value]) => {
+          if (typeof value === 'string' || typeof value === 'number') {
+            normalized.colors[normalizedName][shade] = value;
+          }
+        });
+      }
+    });
+  }
+
+  // تبدیل TypeScale
+  if (projectTokens.brand?.TypeScale) {
+    const typeScale = projectTokens.brand.TypeScale;
+    normalized.typography = {
+      fontFamily: typeScale.FontFamily?.YekanBakh || 'system-ui, sans-serif',
+      sizes: typeScale.Size || {},
+      lineHeights: typeScale.Height || {},
+      weights: typeScale.Weight || {},
+    };
+  }
+
+  // تبدیل NumberScale
+  if (projectTokens.brand?.NumberScale) {
+    const numberScale = projectTokens.brand.NumberScale;
+    
+    if (numberScale.Spacing) {
+      normalized.spacing = {};
+      Object.entries(numberScale.Spacing).forEach(([key, value]) => {
+        const spacingKey = key.replace('spacing-', '');
+        normalized.spacing[spacingKey] = typeof value === 'number' ? value : parseInt(value);
+      });
+    }
+
+    if (numberScale.Radius) {
+      normalized.radius = {};
+      Object.entries(numberScale.Radius).forEach(([key, value]) => {
+        const radiusKey = key.replace('Radius-', '').toLowerCase();
+        normalized.radius[radiusKey] = typeof value === 'number' ? value : parseInt(value);
+      });
+    }
+  }
+
+  return normalized;
+}
+
+/**
+ * توکن‌های پیش‌فرض
+ */
+export const defaultTokens = {
+  colors: {
+    primary: {
+      50: '#e3f2fd',
+      100: '#bbdefb',
+      200: '#90caf9',
+      300: '#64b5f6',
+      400: '#42a5f5',
+      500: '#2196f3',
+      600: '#1e88e5',
+      700: '#1976d2',
+      800: '#1565c0',
+      900: '#0d47a1',
+    },
+    neutral: {
+      0: '#FFFFFF',
+      50: '#FAFAFA',
+      100: '#F5F5F5',
+      200: '#EEEEEE',
+      300: '#E0E0E0',
+      400: '#BDBDBD',
+      500: '#9E9E9E',
+      600: '#757575',
+      700: '#616161',
+      800: '#424242',
+      900: '#212121',
+    },
+    success: {
+      50: '#e8f5e9',
+      100: '#c8e6c9',
+      200: '#a5d6a7',
+      300: '#81c784',
+      400: '#66bb6a',
+      500: '#4caf50',
+      600: '#43a047',
+      700: '#388e3c',
+      800: '#2e7d32',
+      900: '#1b5e20',
+    },
+    error: {
+      50: '#ffebee',
+      100: '#ffcdd2',
+      200: '#ef9a9a',
+      300: '#e57373',
+      400: '#ef5350',
+      500: '#f44336',
+      600: '#e53935',
+      700: '#d32f2f',
+      800: '#c62828',
+      900: '#b71c1c',
+    },
+    warning: {
+      50: '#fff3e0',
+      100: '#ffe0b2',
+      200: '#ffcc80',
+      300: '#ffb74d',
+      400: '#ffa726',
+      500: '#ff9800',
+      600: '#fb8c00',
+      700: '#f57c00',
+      800: '#ef6c00',
+      900: '#e65100',
+    },
+    info: {
+      50: '#e3f2fd',
+      100: '#bbdefb',
+      200: '#90caf9',
+      300: '#64b5f6',
+      400: '#42a5f5',
+      500: '#2196f3',
+      600: '#1e88e5',
+      700: '#1976d2',
+      800: '#1565c0',
+      900: '#0d47a1',
+    },
+  },
+  typography: {
+    fontFamily: 'system-ui, -apple-system, sans-serif',
+    baseSize: 16,
+    minSize: 14,
+    scaleRatio: 1.25,
+    sizes: {
+      10: 10,
+      11: 11,
+      12: 12,
+      14: 14,
+      16: 16,
+      18: 18,
+      20: 20,
+      24: 24,
+      28: 28,
+      32: 32,
+      36: 36,
+      48: 48,
+      64: 64,
+    },
+    lineHeights: {
+      10: 10,
+      12: 12,
+      14: 14,
+      16: 16,
+      20: 20,
+      24: 24,
+      28: 28,
+      32: 32,
+      36: 36,
+      40: 40,
+      44: 44,
+      48: 48,
+      74: 74,
+    },
+    weights: {
+      regular: '400',
+      semibold: '600',
+      bold: '700',
+    },
+  },
+  spacing: {
+    unit: 4,
+    4: 4,
+    8: 8,
+    12: 12,
+    16: 16,
+    20: 20,
+    24: 24,
+    32: 32,
+    40: 40,
+    48: 48,
+    56: 56,
+    64: 64,
+    72: 72,
+    80: 80,
+  },
+  radius: {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 20,
+    '2xl': 24,
+    '3xl': 28,
+    full: 1000,
+  },
+  shadows: {
+    sm: '0px 1px 2px rgba(0, 0, 0, 0.05)',
+    md: '0px 4px 6px rgba(0, 0, 0, 0.1)',
+    lg: '0px 10px 15px rgba(0, 0, 0, 0.1)',
+    xl: '0px 20px 25px rgba(0, 0, 0, 0.1)',
+  },
+};
+
+/**
+ * Merge عمیق دو آبجکت
+ */
+function deepMerge(target, source) {
+  const output = { ...target };
+  
+  if (isObject(target) && isObject(source)) {
+    Object.keys(source).forEach((key) => {
+      if (isObject(source[key])) {
+        if (!(key in target)) {
+          Object.assign(output, { [key]: source[key] });
+        } else {
+          output[key] = deepMerge(target[key], source[key]);
+        }
+      } else {
+        Object.assign(output, { [key]: source[key] });
+      }
+    });
+  }
+  
+  return output;
+}
+
+function isObject(item) {
+  return item && typeof item === 'object' && !Array.isArray(item);
+}
+
+/**
+ * دریافت توکن‌های نرمالایز شده از پروژه
+ */
+const projectNormalizedTokens = normalizeProjectTokens();
+
+/**
+ * Merge توکن‌های پروژه با پیش‌فرض
+ */
+export const baseTokens = deepMerge(defaultTokens, projectNormalizedTokens);
+
+/**
+ * ایجاد توکن‌های نهایی با merge کردن توکن‌های کاربر
+ * @param {Object} userTokens - توکن‌های سفارشی کاربر
+ * @returns {Object} توکن‌های نهایی
+ */
+export function createTokens(userTokens = {}) {
+  return deepMerge(baseTokens, userTokens);
+}
+
+/**
+ * Export توکن‌های پیش‌فرض
+ */
+export { defaultColors };
+export default baseTokens;
+

package/src/utils/useTokens.js

@@ -0,0 +1,100 @@
+import { useTheme } from '../theme/ThemeProvider.jsx';
+
+/**
+ * Hook برای دسترسی راحت‌تر به توکن‌ها
+ * 
+ * @example
+ * ```jsx
+ * import { useTokens } from 'ali-mohammadi-design-system';
+ * 
+ * function MyComponent() {
+ *   const { color, spacing, radius, typography } = useTokens();
+ *   return <div style={{ color: color('primary.500'), padding: spacing(2) }}>Hello</div>;
+ * }
+ * ```
+ */
+export function useTokens() {
+  const { tokens, getToken } = useTheme();
+
+  return {
+    /**
+     * دریافت رنگ
+     * @param {string} path - مسیر رنگ مثل 'primary.500' یا 'neutral.100'
+     * @returns {string} مقدار رنگ
+     */
+    color: (path) => {
+      const value = getToken(`colors.${path}`);
+      if (value) return value;
+      // اگر پیدا نشد، از CSS variable استفاده کن
+      const [group, shade] = path.split('.');
+      return `var(--${group}-${shade}, #000)`;
+    },
+
+    /**
+     * دریافت spacing
+     * @param {string|number} key - کلید spacing مثل '4' یا 'sm'
+     * @returns {string} مقدار spacing با واحد px
+     */
+    spacing: (key) => {
+      const value = getToken(`spacing.${key}`);
+      if (value) return `${value}px`;
+      // اگر پیدا نشد، از CSS variable استفاده کن
+      return `var(--space-${key}, ${key * (tokens.spacing?.unit || 4)}px)`;
+    },
+
+    /**
+     * دریافت radius
+     * @param {string} key - کلید radius مثل 'md' یا 'lg'
+     * @returns {string} مقدار radius با واحد px
+     */
+    radius: (key) => {
+      const value = getToken(`radius.${key}`);
+      if (value) return `${value}px`;
+      // اگر پیدا نشد، از CSS variable استفاده کن
+      return `var(--radius-${key}, 8px)`;
+    },
+
+    /**
+     * دریافت typography
+     * @param {string} property - ویژگی typography مثل 'fontFamily', 'sizes.16'
+     * @returns {string|number} مقدار typography
+     */
+    typography: (property) => {
+      const value = getToken(`typography.${property}`);
+      if (value) {
+        if (typeof value === 'number') return `${value}px`;
+        return value;
+      }
+      // اگر پیدا نشد، از CSS variable استفاده کن
+      if (property === 'fontFamily') {
+        return `var(--font-family, system-ui, sans-serif)`;
+      }
+      return `var(--font-${property}, 16px)`;
+    },
+
+    /**
+     * دریافت shadow
+     * @param {string} key - کلید shadow مثل 'sm' یا 'md'
+     * @returns {string} مقدار shadow
+     */
+    shadow: (key) => {
+      const value = getToken(`shadows.${key}`);
+      if (value) return value;
+      // اگر پیدا نشد، از CSS variable استفاده کن
+      return `var(--shadow-${key}, none)`;
+    },
+
+    /**
+     * دسترسی مستقیم به توکن‌ها
+     */
+    tokens,
+    
+    /**
+     * دریافت توکن با مسیر دلخواه
+     */
+    getToken,
+  };
+}
+
+export default useTokens;
+