shared-design-system 1.2.0

package/dist/tokens.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Design Tokens — shared-design-system
+ * Single source of truth for colors, spacing, typography, shadows.
+ */
+export interface ColorTokens {
+    primary: string;
+    primaryDark: string;
+    primaryLight: string;
+    success: string;
+    successBg: string;
+    warning: string;
+    warningBg: string;
+    danger: string;
+    dangerBg: string;
+    info: string;
+    infoBg: string;
+    text: string;
+    textMuted: string;
+    textDisabled: string;
+    border: string;
+    borderFocus: string;
+    surface: string;
+    surfaceAlt: string;
+    overlay: string;
+}
+export interface RadiusTokens {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    full: string;
+}
+export interface ShadowTokens {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}
+export interface FontTokens {
+    family: string;
+    xs: string;
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    weightNormal: number;
+    weightMedium: number;
+    weightSemibold: number;
+    weightBold: number;
+}
+export interface SpacingTokens {
+    [key: string]: string;
+}
+export interface TransitionTokens {
+    fast: string;
+    normal: string;
+    slow: string;
+}
+export interface DesignTokens {
+    color: ColorTokens;
+    radius: RadiusTokens;
+    shadow: ShadowTokens;
+    font: FontTokens;
+    spacing: SpacingTokens;
+    transition: TransitionTokens;
+}
+export declare const tokens: DesignTokens;

package/dist/tokens.js

@@ -0,0 +1,69 @@
+/**
+ * Design Tokens — shared-design-system
+ * Single source of truth for colors, spacing, typography, shadows.
+ */
+export const tokens = {
+    color: {
+        primary: 'var(--ds-color-primary, #f59e0b)',
+        primaryDark: 'var(--ds-color-primary-dark, #d97706)',
+        primaryLight: 'var(--ds-color-primary-light, #fef3c7)',
+        success: 'var(--ds-color-success, #10b981)',
+        successBg: 'var(--ds-color-success-bg, #ecfdf5)',
+        warning: 'var(--ds-color-warning, #f59e0b)',
+        warningBg: 'var(--ds-color-warning-bg, #fffbeb)',
+        danger: 'var(--ds-color-danger, #ef4444)',
+        dangerBg: 'var(--ds-color-danger-bg, #fef2f2)',
+        info: 'var(--ds-color-info, #3b82f6)',
+        infoBg: 'var(--ds-color-info-bg, #eff6ff)',
+        text: 'var(--ds-color-text, #0f172a)',
+        textMuted: 'var(--ds-color-text-muted, #64748b)',
+        textDisabled: 'var(--ds-color-text-disabled, #94a3b8)',
+        border: 'var(--ds-color-border, #e2e8f0)',
+        borderFocus: 'var(--ds-color-border-focus, #f59e0b)',
+        surface: 'var(--ds-color-surface, #ffffff)',
+        surfaceAlt: 'var(--ds-color-surface-alt, #f8fafc)',
+        overlay: 'rgba(0,0,0,0.35)',
+    },
+    radius: {
+        sm: '6px',
+        md: '10px',
+        lg: '14px',
+        xl: '20px',
+        full: '9999px',
+    },
+    shadow: {
+        sm: '0 1px 3px rgba(0,0,0,.08)',
+        md: '0 4px 12px rgba(0,0,0,.10)',
+        lg: '0 8px 30px rgba(0,0,0,.14)',
+        xl: '0 16px 48px rgba(0,0,0,.18)',
+    },
+    font: {
+        family: "'Inter', system-ui, sans-serif",
+        xs: '11px',
+        sm: '13px',
+        base: '14px',
+        md: '15px',
+        lg: '17px',
+        xl: '20px',
+        '2xl': '24px',
+        weightNormal: 400,
+        weightMedium: 500,
+        weightSemibold: 600,
+        weightBold: 700,
+    },
+    spacing: {
+        '1': '4px',
+        '2': '8px',
+        '3': '12px',
+        '4': '16px',
+        '5': '20px',
+        '6': '24px',
+        '8': '32px',
+    },
+    transition: {
+        fast: 'all .15s ease',
+        normal: 'all .25s ease',
+        slow: 'all .4s ease',
+    },
+};
+//# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAyEH,MAAM,CAAC,MAAM,MAAM,GAAiB;IAClC,KAAK,EAAE;QACL,OAAO,EAAM,kCAAkC;QAC/C,WAAW,EAAE,uCAAuC;QACpD,YAAY,EAAC,wCAAwC;QACrD,OAAO,EAAM,kCAAkC;QAC/C,SAAS,EAAI,qCAAqC;QAClD,OAAO,EAAM,kCAAkC;QAC/C,SAAS,EAAI,qCAAqC;QAClD,MAAM,EAAO,iCAAiC;QAC9C,QAAQ,EAAK,oCAAoC;QACjD,IAAI,EAAS,+BAA+B;QAC5C,MAAM,EAAO,kCAAkC;QAC/C,IAAI,EAAS,+BAA+B;QAC5C,SAAS,EAAI,qCAAqC;QAClD,YAAY,EAAC,wCAAwC;QACrD,MAAM,EAAO,iCAAiC;QAC9C,WAAW,EAAE,uCAAuC;QACpD,OAAO,EAAM,kCAAkC;QAC/C,UAAU,EAAG,sCAAsC;QACnD,OAAO,EAAM,kBAAkB;KAChC;IACD,MAAM,EAAE;QACN,EAAE,EAAI,KAAK;QACX,EAAE,EAAI,MAAM;QACZ,EAAE,EAAI,MAAM;QACZ,EAAE,EAAI,MAAM;QACZ,IAAI,EAAE,QAAQ;KACf;IACD,MAAM,EAAE;QACN,EAAE,EAAG,2BAA2B;QAChC,EAAE,EAAG,4BAA4B;QACjC,EAAE,EAAG,4BAA4B;QACjC,EAAE,EAAG,6BAA6B;KACnC;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,gCAAgC;QACxC,EAAE,EAAI,MAAM;QACZ,EAAE,EAAI,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,EAAE,EAAI,MAAM;QACZ,EAAE,EAAI,MAAM;QACZ,EAAE,EAAI,MAAM;QACZ,KAAK,EAAC,MAAM;QACZ,YAAY,EAAG,GAAG;QAClB,YAAY,EAAG,GAAG;QAClB,cAAc,EAAC,GAAG;QAClB,UAAU,EAAK,GAAG;KACnB;IACD,OAAO,EAAE;QACP,GAAG,EAAE,KAAK;QACV,GAAG,EAAE,KAAK;QACV,GAAG,EAAE,MAAM;QACX,GAAG,EAAE,MAAM;QACX,GAAG,EAAE,MAAM;QACX,GAAG,EAAE,MAAM;QACX,GAAG,EAAE,MAAM;KACZ;IACD,UAAU,EAAE;QACV,IAAI,EAAI,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,IAAI,EAAI,cAAc;KACvB;CACF,CAAC"}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "shared-design-system",
+  "version": "1.2.0",
+  "description": "Shared Tailwind Design System & UI Tokens for all Micro Frontends",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./tokens": {
+      "import": "./dist/tokens.js",
+      "require": "./dist/tokens.js",
+      "types": "./dist/tokens.d.ts"
+    },
+    "./tailwind.preset": "./tailwind.preset.js"
+  },
+  "files": [
+    "dist",
+    "tailwind.preset.js",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc --project tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run typecheck && npm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tailwindcss": "^3.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/node": "^20.11.0"
+  }
+}

package/tailwind.preset.js

@@ -0,0 +1,23 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        // Ánh xạ sang biến CSS Variable (Có giá trị fallback)
+        primary: 'var(--theme-color-primary, #0f172a)',
+        secondary: 'var(--theme-color-secondary, #64748b)',
+        brand: {
+          50: '#f0fdf4',
+          500: '#22c55e',
+        }
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+      },
+      borderRadius: {
+        'theme': 'var(--theme-border-radius, 0.5rem)',
+      }
+    },
+  },
+  plugins: [],
+};