ali-mohammadi-design-system 1.0.0

package/package.json

@@ -0,0 +1,27 @@
+
+
+{
+   "name": "ali-mohammadi-design-system",
+  "version": "1.0.0",
+  "description": "خنثی و dynamic Design System — tokens از پروژه میاد",
+  "main": "src/index.js",
+  "files": [
+    "src",
+    "scss"
+  ],
+  "exports": {
+    ".": "./src/index.js",
+    "./scss": "./scss/index.scss"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "prop-types": "^15.8.1"
+  },
+  "keywords": ["design-system", "ui", "react", "tokens", "sass"],
+  "author": "شرکت شما",
+  "license": "MIT",
+  "publishConfig": {
+  "access": "public"
+}
+  
+}

package/src/components/Button/Button.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Button = ({ variant = 'primary', size = 'md', children, className = '', ...props }) => {
+  const variantStyles = {
+    primary: {
+      backgroundColor: 'var(--primary-500)',
+      color: 'white',
+    },
+    outline: {
+      backgroundColor: 'transparent',
+      border: '2px solid var(--primary-500)',
+      color: 'var(--primary-500)',
+    },
+    text: {
+      backgroundColor: 'transparent',
+      color: 'var(--primary-500)',
+    },
+  };
+
+  const sizePadding = {
+    sm: 'var(--space-sm)',
+    md: 'var(--space-md)',
+    lg: 'var(--space-lg)',
+  };
+
+  return (
+    <button
+      className={`ds-button ${className}`}
+      style={{
+        padding: `${sizePadding[size]} calc(var(--space-unit) * 4)`,
+        borderRadius: 'var(--radius-md)',
+        fontFamily: 'var(--font-family)',
+        fontSize: '1rem',
+        cursor: 'pointer',
+        ...variantStyles[variant],
+        ...props.style,
+      }}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+Button.propTypes = {
+  children: PropTypes.node.isRequired,
+  variant: PropTypes.oneOf(['primary', 'outline', 'text']),
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  className: PropTypes.string,
+};
+
+export default Button;

package/src/config/index.js

@@ -0,0 +1,10 @@
+import { defaultColors } from '../tokens/colors';
+
+export const defaultConfig = {
+  colors: {
+    primary: defaultColors.primary,
+    neutral: defaultColors.neutral,
+  },
+  spacing: { unit: 4 },  // 1 = 4px
+  typography: { fontFamily: 'system-ui, sans-serif', baseSize: 16 },
+};

package/src/config/project-tokens.json

@@ -0,0 +1,366 @@
+{
+  "brand": {
+    "Neutral": {
+      "0": "#FFFFFF",
+      "50": "#FAFAFA",
+      "100": "#F4F4F5",
+      "200": "#EAEAEB",
+      "300": "#D4D5D6",
+      "400": "#AAABAD",
+      "500": "#7F8185",
+      "600": "#55575C",
+      "700": "#2A2D33",
+      "800": "#232529",
+      "900": "#1B1D21"
+    },
+    "Purple": {
+      "100": "#F9F2FD",
+      "200": "#E6D9EC",
+      "300": "#D9C5E2",
+      "400": "#B38CC5",
+      "500": "#9A65B2",
+      "600": "#813F9F",
+      "700": "#67327F",
+      "800": "#4D265F",
+      "900": "#341940"
+    },
+    "Blue": {
+      "100": "#E5EDFB",
+      "200": "#CCDAF7",
+      "300": "#B2C8F3",
+      "400": "#99B5EF",
+      "500": "#6691E8",
+      "600": "#336CE0",
+      "700": "#0047D8",
+      "800": "#0039AD",
+      "900": "#002B82"
+    },
+    "Violet": {
+      "100": "#EDECFC",
+      "200": "#DCDAFA",
+      "300": "#CAC7F7",
+      "400": "#B9B5F5",
+      "500": "#9690EF",
+      "600": "#736BEA",
+      "700": "#5046E5",
+      "800": "#4038B8",
+      "900": "#191547",
+      "950": "#110E30"
+    },
+    "Yellow": {
+      "100": "#FEF8E9",
+      "200": "#FDF1D3",
+      "300": "#FCEABD",
+      "400": "#FBE3A7",
+      "500": "#FAD67C",
+      "600": "#F8C850",
+      "700": "#F6BA24",
+      "800": "#ECAD11",
+      "900": "#CE960A"
+    },
+    "Red": {
+      "100": "#FFEBEB",
+      "200": "#FFD6D6",
+      "300": "#FFC2C2",
+      "400": "#FFADAD",
+      "500": "#FF8585",
+      "600": "#FF5C5C",
+      "700": "#FF3333",
+      "800": "#CE2929",
+      "900": "#9D1F1F"
+    },
+    "Green": {
+      "100": "#EBFAF1",
+      "200": "#D7F4E4",
+      "300": "#AFE9C8",
+      "400": "#87DFAD",
+      "500": "#5FD491",
+      "600": "#5FD491",
+      "700": "#2CA15E",
+      "800": "#217947",
+      "900": "#16502F"
+    },
+    "Orange": {
+      "100": "#FFF4EB",
+      "200": "#FFE9D6",
+      "300": "#FFDEC2",
+      "400": "#FFD3AE",
+      "500": "#FFBD85",
+      "600": "#FFA75D",
+      "700": "#FF9134",
+      "800": "#E8842F",
+      "900": "#DF771E"
+    },
+    "Cyan": {
+      "100": "#E8F6FF",
+      "200": "#DCF2FF",
+      "300": "#C4E9FF",
+      "400": "#A0DAFF",
+      "500": "#87D1FF",
+      "600": "#56BFFF",
+      "700": "#1DA6FB",
+      "800": "#0B89D6",
+      "900": "#0467A4"
+    },
+    "TypeScale": {
+      "Weight": {
+        "Regular": "Regular",
+        "Bold": "Bold",
+        "SemiBold": "Semibold"
+      },
+      "FontFamily": {
+        "YekanBakh": "Yekan Bakh FaNum"
+      },
+      "Size": {
+        "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
+      },
+      "Height": {
+        "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
+      }
+    },
+    "NumberScale": {
+      "Radius": {
+        "Radius-12": 12,
+        "Radius-8": 8,
+        "Radius-4": 4,
+        "Radius-24": 24,
+        "Radius-20": 20,
+        "Radius-16": 16,
+        "Radius-Full": 1000,
+        "Radius-28": 28
+      },
+      "Spacing": {
+        "spacing-4": 4,
+        "spacing-8": 8,
+        "spacing-12": 12,
+        "spacing-16": 16,
+        "spacing-20": 20,
+        "spacing-24": 24,
+        "spacing-32": 32,
+        "spacing-40": 40,
+        "spacing-48": 48,
+        "spacing-56": 56,
+        "spacing-64": 64,
+        "spacing-72": 72,
+        "spacing-80": 80
+      },
+      "StrokeWeight": {
+        "StrokeWeight1": 1,
+        "StrokeWeight2": 1.5,
+        "StrokeWeight4": 3,
+        "StrokeWeight3": 2,
+        "StrokeWeight5": 4
+      },
+      "IconSize": {
+        "IconSizesmall": 16,
+        "IconSizeMedium": 20,
+        "IconSizeLarge": 24,
+        "IconSizeExtraLarge": 32
+      }
+    },
+    "Peach": {
+      "100": "#FFEEE5",
+      "200": "#FFDDCC",
+      "300": "#FFCCB2",
+      "400": "#FFBB99",
+      "500": "#FF9966",
+      "600": "#FF7733",
+      "700": "#FF5500",
+      "800": "#CC4400",
+      "900": "#993300"
+    },
+    "Buttons": 104,
+    "MinWidth": 64
+  },
+  "alias": {
+    "Neutral": {
+      "0": {
+        "SellerDashboard": "#FFFFFF",
+        "karunpayapp": "#FFFFFF",
+        "Dastyar/karunmall": "#FFFFFF"
+      },
+      "50": {
+        "SellerDashboard": "#FAFAFA",
+        "karunpayapp": "#FAFAFA",
+        "Dastyar/karunmall": "#FAFAFA"
+      }
+    
+    },
+    "Primary": {
+      "100": {
+        "SellerDashboard": "#EDECFC",
+        "karunpayapp": "#E5EDFB",
+        "Dastyar/karunmall": "#F9F2FD"
+      }
+      
+    },
+    "State": {
+      "Error": {
+        "100": {
+          "SellerDashboard": "#FFEBEB",
+          "karunpayapp": "#FFEBEB",
+          "Dastyar/karunmall": "#FFEBEB"
+        }
+       
+      }
+      
+    },
+    "Statelayer": {
+      "Opacity-08": {
+        "SellerDashboard": "#FFFFFF12",
+        "karunpayapp": "#FFFFFF12",
+        "Dastyar/karunmall": "#FFFFFF12"
+      }
+    },
+    "Secondary": {
+      "100": {
+        "SellerDashboard": "#FFEEE5",
+        "karunpayapp": "#FEF8E9",
+        "Dastyar/karunmall": "#FEF8E9"
+      }
+     
+    },
+    "Tertiary": {
+      "100": {
+        "SellerDashboard": "#E5EDFB",
+        "karunpayapp": "#E5EDFB",
+        "Dastyar/karunmall": "#E5EDFB"
+      }
+
+    },
+    "NumberScale": {
+      "Radius": {
+        "xs": {
+          "SellerDashboard": 4,
+          "karunpayapp": 4,
+          "Dastyar/karunmall": 4
+        }
+      },
+      "Spacing": {
+        "sm": {
+          "SellerDashboard": 8,
+          "karunpayapp": 8,
+          "Dastyar/karunmall": 8
+        }
+       
+      },
+      "StrokeWeight": {
+        "lg": {
+          "SellerDashboard": 4,
+          "karunpayapp": 4,
+          "Dastyar/karunmall": 4
+        }
+    
+      }
+    },
+    "Typography": {
+      "10": {
+        "SellerDashboard": 10,
+        "karunpayapp": 10,
+        "Dastyar/karunmall": 10
+      },
+      "12SemiBold": {
+        "Size": {
+          "SellerDashboard": 12,
+          "karunpayapp": 12,
+          "Dastyar/karunmall": 12
+        },
+        "LineHeight": {
+          "SellerDashboard": 16,
+          "karunpayapp": 16,
+          "Dastyar/karunmall": 16
+        },
+        "Weight": {
+          "SellerDashboard": "Semibold",
+          "karunpayapp": "Semibold",
+          "Dastyar/karunmall": "Semibold"
+        },
+        "FontFamily": {
+          "SellerDashboard": "Yekan Bakh FaNum",
+          "karunpayapp": "Yekan Bakh FaNum",
+          "Dastyar/karunmall": "Yekan Bakh FaNum"
+        }
+      }
+    }
+  },
+  "mapped": {
+    "State": {
+      "Success": {
+        "Desktop": "#2CA15E",
+        "Mobile": "#2CA15E"
+      }
+    },
+    "NumberScale": {
+      "Height": {
+        "8": {
+          "Desktop": 8,
+          "Mobile": 8
+        }
+      },
+      "StrokeWeight": {
+        "Small": {
+          "Desktop": 1,
+          "Mobile": 1
+        }
+      },
+      "RadiusElement": {
+        "xl": {
+          "Desktop": 20,
+          "Mobile": 20
+        }
+      },
+      "SpacingElement": {
+        "xxl": {
+          "Desktop": 24,
+          "Mobile": 24
+        }
+      }
+    },
+    "Typography": {
+      "HeadlineLarge": {
+        "Size": {
+          "Desktop": 32,
+          "Mobile": 32
+        },
+        "FontFamily": {
+          "Desktop": "Yekan Bakh FaNum",
+          "Mobile": "Yekan Bakh FaNum"
+        },
+        "LineHeight": {
+          "Desktop": 40,
+          "Mobile": 40
+        },
+        "Weight": {
+          "Desktop": "Semibold",
+          "Mobile": "Semibold"
+        }
+      }
+    },
+    "Button": {
+    }
+  }
+}

package/src/index.js

@@ -0,0 +1,6 @@
+export { injectCSS } from './theme/injectCSS';
+export { defaultConfig } from './config/defaultConfig';
+export * from './tokens/colors';
+
+export { default as Button } from './components/Button';
+// export بقیه کامپوننت‌ها...

package/src/theme/generateSCSS.js

@@ -0,0 +1,18 @@
+import fs from 'fs'; // اگر نیاز به write فایل داشتی
+
+export function generateSCSS(tokens = {}) {
+  let scss = '';
+
+  // Colors
+  Object.entries(tokens.colors?.primary || {}).forEach(([k, v]) => {
+    scss += `$primary-${k}: ${v};\n`;
+  });
+
+  // Typography
+  scss += `$font-family: "${tokens.typography?.fontFamily || 'sans-serif'}";\n`;
+  scss += `$font-size-base: ${tokens.typography?.baseSize || 16}px;\n`;
+  // ... همه
+
+  // پروژه می‌تونه این رو write کنه یا مستقیم import کنه
+  fs.writeFileSync('custom-variables.scss', scss);
+}

package/src/theme/generateTheme.js

@@ -0,0 +1,74 @@
+export function generateTheme(userTokens = {}) {
+  const defaultTokens = {
+    colors: {
+      primary: { 500: '#6366f1' },
+      neutral: { 900: '#111827', 700: '#374151', 500: '#6b7280', 300: '#d1d5db', 100: '#f3f4f6', 0: '#ffffff' },
+      success: { 500: '#10b981' },
+      error: { 500: '#ef4444' },
+      warning: { 500: '#f59e0b' },
+      info: { 500: '#3b82f6' },
+    },
+    typography: {
+      fontFamily: 'system-ui, sans-serif',
+      baseSize: 16,
+      minSize: 14,
+      scaleRatio: 1.25,
+    },
+    spacing: { unit: 4 },
+    radius: { sm: 4, md: 8, lg: 12, xl: 16, full: 9999 },
+  };
+
+  const tokens = {
+    colors: { ...defaultTokens.colors, ...(userTokens.colors || {}) },
+    typography: { ...defaultTokens.typography, ...(userTokens.typography || {}) },
+    spacing: { ...defaultTokens.spacing, ...(userTokens.spacing || {}) },
+    radius: { ...defaultTokens.radius, ...(userTokens.radius || {}) },
+  };
+
+  const t = tokens.typography;
+  const slope = (t.baseSize - t.minSize) / (1920 - 320);
+  const yIntersection = -320 * slope + t.minSize;
+  const preferredValue = `${yIntersection}px + ${slope * 100}vw`;
+
+  const style = document.createElement('style');
+  style.id = 'ds-theme';
+
+  let css = ':root {\n';
+
+  // Colors
+  Object.entries(tokens.colors).forEach(([group, shades]) => {
+    if (typeof shades === 'object') {
+      Object.entries(shades).forEach(([shade, value]) => {
+        css += `  --${group}-${shade}: ${value};\n`;
+      });
+    }
+  });
+
+  // Typography
+  css += `  --font-family: ${t.fontFamily};\n`;
+  css += `  --font-size-base: clamp(${t.minSize}px, ${preferredValue}, ${t.baseSize}px);\n`;
+  css += `  --type-scale: ${t.scaleRatio};\n`;
+
+  // Spacing
+  css += `  --space-unit: ${tokens.spacing.unit}px;\n`;
+  css += `  --space-xs: calc(var(--space-unit) * 1);\n`;
+  css += `  --space-sm: calc(var(--space-unit) * 2);\n`;
+  css += `  --space-md: calc(var(--space-unit) * 4);\n`;
+  css += `  --space-lg: calc(var(--space-unit) * 6);\n`;
+  css += `  --space-xl: calc(var(--space-unit) * 8);\n`;
+
+  // Radius
+  Object.entries(tokens.radius).forEach(([k, v]) => {
+    css += `  --radius-${k}: ${v}px;\n`;
+  });
+
+  css += '}\n';
+  css += 'html { font-size: var(--font-size-base); }\n';
+  css += 'body { font-family: var(--font-family); }\n';
+
+  style.textContent = css;
+
+  const existing = document.getElementById('ds-theme');
+  if (existing) existing.remove();
+  document.head.appendChild(style);
+}

package/src/theme/injectCSS.js

@@ -0,0 +1,258 @@
+// /* 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);
+
+// /* 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;
+
+// /* 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);

package/src/tokens/colors.js

@@ -0,0 +1,10 @@
+export const defaultColors = {
+  neutral: {
+    0: '#FFFFFF',
+    50: '#FAFAFA',
+  },
+  primary: {
+    50: '#e3f2fd',
+    500: '#2196f3',
+  },
+};