@hdb-c360/c360-shared-ui 0.1.0 → 0.1.2

package/dist/theme/colorData.d.ts

@@ -0,0 +1,111 @@
+/**
+ * HDBank C360 — Brand & Color Source of Truth
+ *
+ * This file is the canonical record of HDBank brand colors and the underlying
+ * palette scales used by the C360 Microfrontend design system.
+ *
+ * How this file relates to the design system:
+ *  - Brand identity colors (`brandRed`, `brandYellow`, `brandGrey`) are fixed
+ *    HDBank brand values.
+ *  - Neutral scale (`neutral0`..`neutral5`) is the official surface/border/text
+ *    neutral palette.
+ *  - Accent scales (`yellow`, `orange`, `green`, `blue`, `red`, `purple`) are
+ *    used for semantic status, focus, and state variations.
+ *  - The `ui*` and `surface` / `border` / `text` tokens below are the active
+ *    UI semantic layer shared with `share-lib/packages/shared-ui/src/styles.css`
+ *    and the Tailwind configs. They reconcile the raw brand palette into a
+ *    consistent visual contract for the Shell and all MFE child apps.
+ *
+ * Reference: `/DESIGN.md`
+ */
+declare const _default: {
+    brandRed: string;
+    brandYellow: string;
+    brandGrey: string;
+    yellow5: string;
+    yellow4: string;
+    yellow3: string;
+    yellow2: string;
+    yellow1: string;
+    yellow0: string;
+    neutral5: string;
+    neutral4: string;
+    neutral3: string;
+    neutral2: string;
+    neutral1: string;
+    neutral0: string;
+    black: string;
+    white: string;
+    purple5: string;
+    purple4: string;
+    purple3: string;
+    purple2: string;
+    purple1: string;
+    orange5: string;
+    orange4: string;
+    orange3: string;
+    orange2: string;
+    orange1: string;
+    orange0: string;
+    green5: string;
+    green4: string;
+    green3: string;
+    green2: string;
+    green1: string;
+    green0: string;
+    blue5: string;
+    blue4: string;
+    blue3: string;
+    blue2: string;
+    blue1: string;
+    red5: string;
+    red4: string;
+    red3: string;
+    red2: string;
+    red1: string;
+    uiPrimary: string;
+    uiPrimaryHover: string;
+    uiPrimaryActive: string;
+    uiPrimaryForeground: string;
+    uiSecondary: string;
+    uiSecondaryHover: string;
+    uiSecondaryActive: string;
+    uiSecondaryForeground: string;
+    surface: string;
+    surfaceGlass: string;
+    surfaceElevated: string;
+    border: string;
+    borderSubtle: string;
+    borderGlass: string;
+    textPrimary: string;
+    textSecondary: string;
+    textMuted: string;
+    textBrandDark: string;
+    paper: string;
+    primaryMain: string;
+    primaryDark: string;
+    secondaryMain: string;
+    secondaryDark: string;
+    successMain: string;
+    successDark: string;
+    errorMain: string;
+    errorDark: string;
+    orangeMain: string;
+    orangeDark: string;
+    warningMain: string;
+    warningDark: string;
+    infoMain: string;
+    infoDark: string;
+    grey50: string;
+    grey100: string;
+    grey200: string;
+    grey300: string;
+    grey500: string;
+    grey600: string;
+    grey700: string;
+    grey900: string;
+    grey400: string;
+    grey800: string;
+};
+export default _default;
+//# sourceMappingURL=colorData.d.ts.map

package/dist/theme/colorData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorData.d.ts","sourceRoot":"","sources":["../../src/theme/colorData.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,wBAgJE"}

package/dist/theme/colorData.js

@@ -0,0 +1,151 @@
+/**
+ * HDBank C360 — Brand & Color Source of Truth
+ *
+ * This file is the canonical record of HDBank brand colors and the underlying
+ * palette scales used by the C360 Microfrontend design system.
+ *
+ * How this file relates to the design system:
+ *  - Brand identity colors (`brandRed`, `brandYellow`, `brandGrey`) are fixed
+ *    HDBank brand values.
+ *  - Neutral scale (`neutral0`..`neutral5`) is the official surface/border/text
+ *    neutral palette.
+ *  - Accent scales (`yellow`, `orange`, `green`, `blue`, `red`, `purple`) are
+ *    used for semantic status, focus, and state variations.
+ *  - The `ui*` and `surface` / `border` / `text` tokens below are the active
+ *    UI semantic layer shared with `share-lib/packages/shared-ui/src/styles.css`
+ *    and the Tailwind configs. They reconcile the raw brand palette into a
+ *    consistent visual contract for the Shell and all MFE child apps.
+ *
+ * Reference: `/DESIGN.md`
+ */
+export default {
+    // -------------------------------------------------------------------------
+    // Brand identity colors
+    // -------------------------------------------------------------------------
+    brandRed: '#BE1128',
+    brandYellow: '#FFC20E',
+    brandGrey: '#464646',
+    // -------------------------------------------------------------------------
+    // Yellow scale (warmth, highlights, active states, secondary actions)
+    // -------------------------------------------------------------------------
+    yellow5: '#F7A30A',
+    yellow4: '#F7B512',
+    yellow3: '#FCC954',
+    yellow2: '#FFDF80',
+    yellow1: '#FFECB3',
+    yellow0: '#FFF9E5',
+    // -------------------------------------------------------------------------
+    // Neutral scale (text hierarchy, surfaces, borders, backgrounds)
+    // -------------------------------------------------------------------------
+    neutral5: '#212B36',
+    neutral4: '#454F5B',
+    neutral3: '#B6BEC8',
+    neutral2: '#D3D8DE',
+    neutral1: '#EAEEF2',
+    neutral0: '#F8F9FA',
+    // -------------------------------------------------------------------------
+    // Pure tones
+    // -------------------------------------------------------------------------
+    black: '#000000',
+    white: '#ffffff',
+    // -------------------------------------------------------------------------
+    // Purple scale (special / custom status)
+    // -------------------------------------------------------------------------
+    purple5: '#6B1C3A',
+    purple4: '#A60066',
+    purple3: '#D10373',
+    purple2: '#FF99D8',
+    purple1: '#FFE5F5',
+    // -------------------------------------------------------------------------
+    // Orange scale (warnings, attention states)
+    // -------------------------------------------------------------------------
+    orange5: '#D4470F',
+    orange4: '#F56600',
+    orange3: '#FF993B',
+    orange2: '#FFB580',
+    orange1: '#FFD2B3',
+    orange0: '#FFF0E5',
+    // -------------------------------------------------------------------------
+    // Green scale (success, positive indicators)
+    // -------------------------------------------------------------------------
+    green5: '#337321',
+    green4: '#4FA800',
+    green3: '#7DBA00',
+    green2: '#ABD653',
+    green1: '#D5E5B4',
+    green0: '#F2FAE2',
+    // -------------------------------------------------------------------------
+    // Blue scale (info, links, tertiary status)
+    // -------------------------------------------------------------------------
+    blue5: '#006FD6',
+    blue4: '#1890FF',
+    blue3: '#80C2FF',
+    blue2: '#C2E1FF',
+    blue1: '#E5F3FF',
+    // -------------------------------------------------------------------------
+    // Red scale (errors, destructive actions, critical alerts)
+    // -------------------------------------------------------------------------
+    red5: '#AD2624',
+    red4: '#D12421',
+    red3: '#EB2629',
+    red2: '#FCA5A6',
+    red1: '#FDE8E8',
+    // -------------------------------------------------------------------------
+    // UI semantic layer — shared with shared-ui/styles.css and Tailwind configs.
+    // These values are the active visual contract for the Shell + MFEs.
+    // -------------------------------------------------------------------------
+    uiPrimary: '#DA2128',
+    uiPrimaryHover: '#E14E53',
+    uiPrimaryActive: '#BE1128',
+    uiPrimaryForeground: '#FFFFFF',
+    uiSecondary: '#FAA61A',
+    uiSecondaryHover: '#FFD080',
+    uiSecondaryActive: '#DC8B05',
+    uiSecondaryForeground: '#333333',
+    surface: '#FFFFFF',
+    surfaceGlass: '#FFFFFF66',
+    surfaceElevated: '#FFFFFFCC',
+    border: '#D2D6DB',
+    borderSubtle: '#E5E7EB',
+    borderGlass: '#E1E2E4',
+    textPrimary: '#384250',
+    textSecondary: '#4D5761',
+    textMuted: '#9DA4AE',
+    textBrandDark: '#333333',
+    // -------------------------------------------------------------------------
+    // Legacy semantic aliases.
+    // These are preserved for backward compatibility. New code should prefer the
+    // `ui*` tokens above or the Tailwind theme tokens from DESIGN.md.
+    // -------------------------------------------------------------------------
+    paper: '#ffffff',
+    primaryMain: '#ffc20e',
+    primaryDark: '#f7a30a',
+    secondaryMain: '#eaeef2',
+    secondaryDark: '#d3d8de',
+    successMain: '#4fa800',
+    successDark: '#337321',
+    errorMain: '#d12421',
+    errorDark: '#ad2624',
+    orangeMain: '#ffab91',
+    orangeDark: '#d84315',
+    warningMain: '#f56600',
+    warningDark: '#d4470f',
+    infoMain: '#1890ff',
+    infoDark: '#006fd6',
+    // -------------------------------------------------------------------------
+    // Legacy grey scale.
+    // Prefer the neutral0..neutral5 scale above. These aliases are kept for
+    // existing consumers that reference them directly.
+    // -------------------------------------------------------------------------
+    grey50: '#fafafa',
+    grey100: '#f5f5f5',
+    grey200: '#f8f9fa',
+    grey300: '#eaeef2',
+    grey500: '#d3d8de',
+    grey600: '#b6bec8',
+    grey700: '#454f5b',
+    grey900: '#212b36',
+    grey400: '#bdbdbd',
+    grey800: '#7B7B7B'
+};
+//# sourceMappingURL=colorData.js.map

package/dist/theme/colorData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorData.js","sourceRoot":"","sources":["../../src/theme/colorData.ts"],"names":[],"mappings":"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"}

package/dist/theme/index.d.ts

@@ -0,0 +1,3 @@
+export { default as colorData } from "./colorData";
+export * from "./c360-theme";
+//# sourceMappingURL=index.d.ts.map

package/dist/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,cAAc,cAAc,CAAC"}

package/dist/theme/index.js

@@ -0,0 +1,3 @@
+export { default as colorData } from "./colorData";
+export * from "./c360-theme";
+//# sourceMappingURL=index.js.map

package/dist/theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,cAAc,cAAc,CAAC"}

package/dist/theme-augmentation.d.ts

@@ -0,0 +1,34 @@
+declare module "@mui/material/styles" {
+    interface PaletteColor {
+        gradient: string;
+    }
+    interface SimplePaletteColorOptions {
+        gradient?: string;
+    }
+    interface Palette {
+        brand: {
+            red: string;
+            yellow: string;
+            grey: string;
+            gradient: string;
+        };
+        surface: {
+            glass: string;
+            elevated: string;
+        };
+    }
+    interface PaletteOptions {
+        brand?: {
+            red: string;
+            yellow: string;
+            grey: string;
+            gradient: string;
+        };
+        surface?: {
+            glass: string;
+            elevated: string;
+        };
+    }
+}
+export {};
+//# sourceMappingURL=theme-augmentation.d.ts.map

package/dist/theme-augmentation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-augmentation.d.ts","sourceRoot":"","sources":["../src/theme-augmentation.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,sBAAsB,CAAC;IACpC,UAAU,YAAY;QACpB,QAAQ,EAAE,MAAM,CAAC;KAClB;IAED,UAAU,yBAAyB;QACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;IAED,UAAU,OAAO;QACf,KAAK,EAAE;YAAE,GAAG,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,MAAM,CAAA;SAAE,CAAC;QACvE,OAAO,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,MAAM,CAAA;SAAE,CAAC;KAC9C;IAED,UAAU,cAAc;QACtB,KAAK,CAAC,EAAE;YAAE,GAAG,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,MAAM,CAAA;SAAE,CAAC;QACxE,OAAO,CAAC,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,MAAM,CAAA;SAAE,CAAC;KAC/C;CACF;AAED,OAAO,EAAE,CAAC"}

package/dist/theme-augmentation.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=theme-augmentation.js.map

package/dist/theme-augmentation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-augmentation.js","sourceRoot":"","sources":["../src/theme-augmentation.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hdb-c360/c360-shared-ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -26,17 +26,21 @@
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
-    "@hdb-c360/c360-shared-utils": "0.1.0",
-    "@radix-ui/react-slot": "^1.3.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^3.6.0"
+    "@hdb-c360/c360-shared-utils": "0.1.2"
   },
   "peerDependencies": {
-    "react": "^19.2.7"
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^9.1.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^9.1.1",
     "@types/react": "^19.2.17",
-    "react": "^19.2.7"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   }
-}
+}