@zidsa/zidmui 2.1.8 → 2.3.0-beta.0

package/dist/react/types/theme/types.d.ts

@@ -31,8 +31,8 @@ declare module '@mui/material' {
   interface CustomPalette {
     badge: {
       primary: {
-        color: '#8758C6';
-        backgroundColor: '#F1EAFF';
+        color: string;
+        backgroundColor: string;
       };
     };
     outlined?: {
@@ -131,21 +131,25 @@ declare module '@mui/material' {
           color: string;
           border: string;
           background: string;
+          icon: string;
         };
         warning: {
           color: string;
           border: string;
           background: string;
+          icon: string;
         };
         info: {
           color: string;
           border: string;
           background: string;
+          icon: string;
         };
         success: {
           color: string;
           border: string;
           background: string;
+          icon: string;
         };
       };
       stepper: {
@@ -311,6 +315,8 @@ declare module '@mui/material' {
     goldenYellow: string;
     lavenderGlow: string;
     royalPurple: string;
+    sidebar: string;
+    container: string;
   }
 
   interface SimplePaletteColorOptions {

package/dist/styles/colors.css

@@ -195,9 +195,42 @@
    * ======================================== */
   --zid-bg-default: #F8F8F8;
   --zid-bg-paper: var(--zid-base-white);
+  --zid-bg-sidebar: var(--zid-base-white);
+  --zid-bg-container: var(--zid-base-white);
 
   /* ========================================
    * Divider
    * ======================================== */
   --zid-divider: var(--zid-color-secondary-50);
 }
+
+/* ========================================
+ * Dark Mode Overrides
+ * ======================================== */
+[data-theme="dark"] {
+  /* Primary */
+  --zid-primary-main: #8758C6;
+  --zid-primary-dark: #6E48A1;
+  --zid-primary-light: #AE72FF;
+
+  /* Secondary */
+  --zid-secondary-main: #3C1C54;
+  --zid-secondary-dark: #2E1641;
+  --zid-secondary-light: #8A7798;
+
+  /* Text */
+  --zid-text-primary: #FFFFFF;
+  --zid-text-secondary: #A3A1A6;
+  --zid-text-tertiary: #B1A4BB;
+  --zid-text-disabled: #75727B;
+
+  /* Backgrounds */
+  --zid-bg-default: #0D0D1A;
+  --zid-bg-paper: #1A1A2E;
+  --zid-bg-sidebar: #16162B;
+  --zid-bg-container: #13182A;
+  --zid-base-blur: rgba(26, 26, 46, 0.8);
+
+  /* Divider */
+  --zid-divider: #1C1C37;
+}

package/dist/styles/root.css

@@ -51,3 +51,13 @@
   --zid-transition-normal: 200ms ease-in-out;
   --zid-transition-slow: 300ms ease-in-out;
 }
+
+/* ========================================
+ * Dark Mode Shadow Overrides
+ * ======================================== */
+[data-theme="dark"] {
+  --zid-shadow-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.40);
+  --zid-shadow-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.40), 0px 1px 3px 0px rgba(0, 0, 0, 0.45);
+  --zid-shadow-3: 0px 2px 4px -2px rgba(0, 0, 0, 0.40), 0px 4px 8px -2px rgba(0, 0, 0, 0.50);
+  --zid-shadow-4: 0px 2px 6px -2px rgba(0, 0, 0, 0.35), 0px 12px 16px -4px rgba(0, 0, 0, 0.50);
+}

package/dist/styles/states.css

@@ -64,3 +64,50 @@
   --zid-common-white-focus: rgba(255, 255, 255, 0.12);
   --zid-common-white-focus-visible: rgba(255, 255, 255, 0.3);
 }
+
+/* ========================================
+ * Dark Mode State Overrides
+ * ======================================== */
+[data-theme="dark"] {
+  /* Action States (white-based for dark surfaces) */
+  --zid-action-active: rgba(255, 255, 255, 0.56);
+  --zid-action-hover: rgba(255, 255, 255, 0.08);
+  --zid-action-selected: rgba(255, 255, 255, 0.16);
+  --zid-action-focus: rgba(255, 255, 255, 0.12);
+  --zid-action-disabled: rgba(255, 255, 255, 0.38);
+  --zid-action-disabled-background: rgba(255, 255, 255, 0.12);
+
+  /* Primary States */
+  --zid-primary-state-hover: rgba(135, 88, 198, 0.12);
+  --zid-primary-state-selected: rgba(135, 88, 198, 0.20);
+  --zid-primary-state-focus: rgba(135, 88, 198, 0.24);
+  --zid-primary-state-focus-visible: rgba(135, 88, 198, 0.3);
+  --zid-primary-state-outlined-border: rgba(135, 88, 198, 0.5);
+
+  /* Secondary States */
+  --zid-secondary-state-hover: rgba(60, 28, 84, 0.12);
+  --zid-secondary-state-selected: rgba(60, 28, 84, 0.20);
+  --zid-secondary-state-focus-visible: rgba(60, 28, 84, 0.3);
+
+  /* Error States */
+  --zid-error-state-hover: rgba(250, 55, 104, 0.12);
+  --zid-error-state-selected: rgba(250, 55, 104, 0.20);
+  --zid-error-state-focus-visible: rgba(250, 55, 104, 0.3);
+  --zid-error-state-outlined-border: rgba(250, 55, 104, 0.5);
+
+  /* Success States */
+  --zid-success-state-hover: rgba(46, 125, 50, 0.12);
+  --zid-success-state-focus-visible: rgba(46, 125, 50, 0.3);
+  --zid-success-state-outlined-border: rgba(46, 125, 50, 0.5);
+
+  /* Warning States */
+  --zid-warning-state-hover: rgba(193, 178, 101, 0.12);
+  --zid-warning-state-selected: rgba(193, 178, 101, 0.20);
+  --zid-warning-state-focus-visible: rgba(193, 178, 101, 0.3);
+  --zid-warning-state-outlined-border: rgba(193, 178, 101, 0.5);
+
+  /* Common States (inverted for dark surfaces) */
+  --zid-common-black-hover: rgba(255, 255, 255, 0.04);
+  --zid-common-black-selected: rgba(255, 255, 255, 0.08);
+  --zid-common-black-focus: rgba(255, 255, 255, 0.12);
+}