@camtomlabs/malix-design-system 0.1.7 → 0.2.0

package/src/tokens.css

@@ -3,22 +3,43 @@
   --malix-background-main: #ffffff;
   --malix-surface: #ffffff;
   --malix-surface-secondary: #f9fafb;
+  --malix-surface-elevated: #ffffff;
   --malix-surface-hover: #f3f4f6;
+  --malix-surface-active: #f3f4f6;
+  --malix-surface-disabled: #f9fafb;
+
+  /* ── Inputs ──────────────────────────────────── */
+  --malix-input-bg: #ffffff;
+  --malix-input-autofill-bg: #ffffff;
 
   /* ── Foreground / text ─────────────────────── */
   --malix-foreground: #111827;
   --malix-foreground-secondary: #6b7280;
   --malix-foreground-tertiary: #9ca3af;
   --malix-foreground-disabled: #d1d5db;
+  --malix-placeholder: #9ca3af;
 
   /* ── Borders ───────────────────────────────── */
   --malix-border: #e5e7eb;
   --malix-border-strong: #d1d5db;
   --malix-border-focus: #004a7c;
+  --malix-border-disabled: #e5e7eb;
   --malix-overlay: #00000066;
-
-  /* ── Primary CTA ───────────────────────────── */
-  --malix-cta-primary-bg: #004a7c;
+  --malix-overlay-backdrop: rgba(0, 0, 0, 0.4);
+  --malix-focus-ring: 0 0 0 3px #004a7c26;
+
+  /* ── Z-index scale ───────────────────────────── */
+  --malix-z-dropdown: 100;
+  --malix-z-sticky: 200;
+  --malix-z-overlay: 300;
+  --malix-z-modal: 400;
+  --malix-z-tooltip: 500;
+  --malix-z-notification: 600;
+
+  /* ── Primary ─────────────────────────────── */
+  --malix-primary: #004a7c;
+  --malix-primary-bg: var(--malix-primary);
+  --malix-cta-primary-bg: var(--malix-primary-bg); /* @deprecated — use --malix-primary-bg */
   --malix-primary-hover: #003a63;
   --malix-primary-active: #002e4f;
   --malix-primary-foreground: #ffffff;
@@ -41,6 +62,11 @@
   --malix-info-light: #eff6ff;
   --malix-info-foreground: #1e40af;
 
+  /* ── Table ────────────────────────────────── */
+  --malix-table-header-bg: #f9fafb;
+  --malix-table-row-hover: #f3f4f6;
+  --malix-table-border: #e5e7eb;
+
   /* ── Glass / morphism ──────────────────────── */
   --malix-glass-bg: #f3f3f3b3;
   --malix-glass-border: #ffffff66;
@@ -51,6 +77,24 @@
   --malix-sidebar-hover-bg: #fbfbfb;
   --malix-sidebar-active-bg: #e6f0f7;
 
+  /* ── Card ─────────────────────────────────── */
+  --malix-card-bg: var(--malix-surface);
+  --malix-card-border: var(--malix-border);
+  --malix-card-radius: var(--malix-radius-lg);
+
+  /* ── Input (semantic) ────────────────────── */
+  --malix-input-border: var(--malix-border);
+
+  /* ── Nav ──────────────────────────────────── */
+  --malix-nav-bg: var(--malix-background-main);
+  --malix-nav-height: 56px;
+
+  /* ── Layout / Containers ─────────────────── */
+  --malix-container-sm: 640px;
+  --malix-container-md: 768px;
+  --malix-container-lg: 1024px;
+  --malix-container-xl: 1280px;
+
   /* ── Spacing ───────────────────────────────── */
   --malix-space-xs: 4px;
   --malix-space-sm: 8px;
@@ -74,6 +118,10 @@
   --malix-text-lg: 16px;
   --malix-text-xl: 20px;
   --malix-text-2xl: 24px;
+  --malix-text-3xl: 30px;
+  --malix-text-4xl: 36px;
+  --malix-text-5xl: 48px;
+  --malix-text-display: clamp(2.5rem, 5vw, 4rem);
 
   --malix-font-body: Geist, sans-serif;
   --malix-font-heading: Geist, sans-serif;
@@ -103,22 +151,35 @@
   --malix-background-main: #010510;
   --malix-surface: #000413;
   --malix-surface-secondary: #1c232d;
+  --malix-surface-elevated: #0f172a;
   --malix-surface-hover: #475569;
+  --malix-surface-active: #475569;
+  --malix-surface-disabled: #1c232d;
+
+  /* ── Inputs ──────────────────────────────────── */
+  --malix-input-bg: #0f172a;
+  --malix-input-autofill-bg: #0f172a;
 
   /* ── Foreground / text ─────────────────────── */
   --malix-foreground: #F9FAFB;
   --malix-foreground-secondary: #dfdfdf;
   --malix-foreground-tertiary: #6B7280;
   --malix-foreground-disabled: #475569;
+  --malix-placeholder: #6B7280;
 
   /* ── Borders ───────────────────────────────── */
   --malix-border: #334155;
   --malix-border-strong: #475569;
   --malix-border-focus: #60A5FA;
+  --malix-border-disabled: #334155;
   --malix-overlay: #00000099;
+  --malix-overlay-backdrop: rgba(0, 0, 0, 0.6);
+  --malix-focus-ring: 0 0 0 3px #60A5FA33;
 
-  /* ── Primary CTA ───────────────────────────── */
-  --malix-cta-primary-bg: #005ce8;
+  /* ── Primary ─────────────────────────────── */
+  --malix-primary: #005ce8;
+  --malix-primary-bg: var(--malix-primary);
+  --malix-cta-primary-bg: var(--malix-primary-bg); /* @deprecated */
   --malix-primary-hover: #0351cf;
   --malix-primary-active: #1037a3;
   --malix-primary-foreground: #FFFFFF;
@@ -141,6 +202,11 @@
   --malix-info-light: #1E3A5F;
   --malix-info-foreground: #93C5FD;
 
+  /* ── Table ────────────────────────────────── */
+  --malix-table-header-bg: #1c232d;
+  --malix-table-row-hover: #1e2632;
+  --malix-table-border: #334155;
+
   /* ── Glass / morphism ──────────────────────── */
   --malix-glass-bg: #1E293BCC;
   --malix-glass-border: #47556966;
@@ -150,16 +216,16 @@
   --malix-sidebar-hover-bg: #1e2632;
   --malix-sidebar-active-bg: #1c232d;
 
-  /* ── Shadows (dark mode) ───────────────────── */
+  /* ── Shadows (dark mode — stronger + border fallback) */
   --malix-shadow-btn-primary: 0 1px 2px #00000025, 0 2px 4px #60A5FA40;
   --malix-shadow-btn-secondary: none;
   --malix-shadow-input: none;
-  --malix-shadow-depth: 0 4px 12px #00000040;
-  --malix-shadow-card-l1: 0 1px 3px #0000002a, 0 1px 2px #00000020;
-  --malix-shadow-card-l2: 0 4px 6px -1px #00000033, 0 2px 4px -2px #00000025;
-  --malix-shadow-card-l3: 0 10px 15px -3px #00000040, 0 4px 6px -4px #00000030;
-  --malix-shadow-overlay: 0 10px 25px #00000040;
-  --malix-shadow-tooltip: 0 4px 8px #00000040;
-  --malix-shadow-sidebar: 1px 0 3px #00000020;
-  --malix-shadow-header: 0 1px 3px #00000020;
+  --malix-shadow-depth: 0 4px 12px #00000060;
+  --malix-shadow-card-l1: 0 1px 3px #00000040, 0 1px 2px #00000030;
+  --malix-shadow-card-l2: 0 4px 6px -1px #00000050, 0 2px 4px -2px #00000040;
+  --malix-shadow-card-l3: 0 10px 15px -3px #00000060, 0 4px 6px -4px #00000050;
+  --malix-shadow-overlay: 0 10px 25px #00000060;
+  --malix-shadow-tooltip: 0 4px 8px #00000060;
+  --malix-shadow-sidebar: 1px 0 3px #00000030;
+  --malix-shadow-header: 0 1px 3px #00000030;
 }

package/src/tokens.registry.json

@@ -4,15 +4,32 @@
     "--malix-background-main",
     "--malix-surface",
     "--malix-surface-secondary",
+    "--malix-surface-elevated",
     "--malix-surface-hover",
+    "--malix-surface-active",
+    "--malix-surface-disabled",
+    "--malix-input-bg",
+    "--malix-input-autofill-bg",
     "--malix-foreground",
     "--malix-foreground-secondary",
     "--malix-foreground-tertiary",
     "--malix-foreground-disabled",
+    "--malix-placeholder",
     "--malix-border",
     "--malix-border-strong",
     "--malix-border-focus",
+    "--malix-border-disabled",
     "--malix-overlay",
+    "--malix-overlay-backdrop",
+    "--malix-focus-ring",
+    "--malix-z-dropdown",
+    "--malix-z-sticky",
+    "--malix-z-overlay",
+    "--malix-z-modal",
+    "--malix-z-tooltip",
+    "--malix-z-notification",
+    "--malix-primary",
+    "--malix-primary-bg",
     "--malix-cta-primary-bg",
     "--malix-primary-hover",
     "--malix-primary-active",
@@ -30,12 +47,25 @@
     "--malix-info",
     "--malix-info-light",
     "--malix-info-foreground",
+    "--malix-table-header-bg",
+    "--malix-table-row-hover",
+    "--malix-table-border",
     "--malix-glass-bg",
     "--malix-glass-border",
     "--malix-glass-blur",
     "--malix-sidebar-bg",
     "--malix-sidebar-hover-bg",
     "--malix-sidebar-active-bg",
+    "--malix-card-bg",
+    "--malix-card-border",
+    "--malix-card-radius",
+    "--malix-input-border",
+    "--malix-nav-bg",
+    "--malix-nav-height",
+    "--malix-container-sm",
+    "--malix-container-md",
+    "--malix-container-lg",
+    "--malix-container-xl",
     "--malix-space-xs",
     "--malix-space-sm",
     "--malix-space-md",
@@ -54,6 +84,10 @@
     "--malix-text-lg",
     "--malix-text-xl",
     "--malix-text-2xl",
+    "--malix-text-3xl",
+    "--malix-text-4xl",
+    "--malix-text-5xl",
+    "--malix-text-display",
     "--malix-font-body",
     "--malix-font-heading",
     "--malix-weight-normal",

package/stylelint.config.cjs

@@ -0,0 +1,56 @@
+/**
+ * Malix Design System — Stylelint Config
+ *
+ * Extend this in your project:
+ *
+ *   // .stylelintrc.cjs
+ *   module.exports = {
+ *     extends: ['@camtomlabs/malix-design-system/stylelint.config'],
+ *   };
+ */
+
+/** @type {import('stylelint').Config} */
+module.exports = {
+  rules: {
+    // Prevent !important — except for known override contexts
+    'declaration-no-important': [
+      true,
+      {
+        message:
+          'Avoid !important — use token specificity or data-attributes. If overriding a third-party library, add a comment explaining why.',
+        severity: 'warning',
+      },
+    ],
+
+    // Flag hardcoded hex colors — encourage token usage
+    'color-no-hex': [
+      true,
+      {
+        message:
+          'Use a Malix token instead of a hex color: var(--malix-*). See token reference at https://malix.camtom.com/docs/tokens',
+        severity: 'warning',
+      },
+    ],
+
+    // Flag arbitrary z-index values — use the --malix-z-* scale
+    'declaration-property-value-allowed-list': [
+      {
+        'z-index': [
+          'auto',
+          'inherit',
+          'initial',
+          'unset',
+          '-1',
+          '0',
+          '1',
+          '/var\\(--malix-z-/',
+        ],
+      },
+      {
+        message:
+          'Use a Malix z-index token: var(--malix-z-dropdown|sticky|overlay|modal|tooltip|notification). Arbitrary z-index values cause stacking conflicts.',
+        severity: 'warning',
+      },
+    ],
+  },
+};

package/tailwind.preset.js

@@ -0,0 +1,173 @@
+/**
+ * Malix Design System — Tailwind CSS Preset
+ *
+ * Usage:
+ *   // tailwind.config.ts
+ *   import malixPreset from '@camtomlabs/malix-design-system/tailwind.preset';
+ *   export default { presets: [malixPreset], ... }
+ *
+ * All colors reference CSS custom properties so they adapt
+ * automatically to light/dark mode via .dark or [data-theme="dark"].
+ */
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  theme: {
+    extend: {
+      colors: {
+        malix: {
+          /* Backgrounds / surfaces */
+          bg: 'var(--malix-background-main)',
+          surface: {
+            DEFAULT: 'var(--malix-surface)',
+            secondary: 'var(--malix-surface-secondary)',
+            elevated: 'var(--malix-surface-elevated)',
+            hover: 'var(--malix-surface-hover)',
+            active: 'var(--malix-surface-active)',
+            disabled: 'var(--malix-surface-disabled)',
+          },
+
+          /* Input */
+          input: {
+            bg: 'var(--malix-input-bg)',
+            'autofill-bg': 'var(--malix-input-autofill-bg)',
+          },
+
+          /* Foreground / text */
+          fg: {
+            DEFAULT: 'var(--malix-foreground)',
+            secondary: 'var(--malix-foreground-secondary)',
+            tertiary: 'var(--malix-foreground-tertiary)',
+            disabled: 'var(--malix-foreground-disabled)',
+          },
+          placeholder: 'var(--malix-placeholder)',
+
+          /* Borders */
+          border: {
+            DEFAULT: 'var(--malix-border)',
+            strong: 'var(--malix-border-strong)',
+            focus: 'var(--malix-border-focus)',
+            disabled: 'var(--malix-border-disabled)',
+          },
+
+          /* Primary */
+          primary: {
+            DEFAULT: 'var(--malix-primary)',
+            hover: 'var(--malix-primary-hover)',
+            active: 'var(--malix-primary-active)',
+            foreground: 'var(--malix-primary-foreground)',
+            light: 'var(--malix-primary-light)',
+          },
+
+          /* Semantic */
+          success: {
+            DEFAULT: 'var(--malix-success)',
+            light: 'var(--malix-success-light)',
+            foreground: 'var(--malix-success-foreground)',
+          },
+          warning: {
+            DEFAULT: 'var(--malix-warning)',
+            light: 'var(--malix-warning-light)',
+            foreground: 'var(--malix-warning-foreground)',
+          },
+          error: {
+            DEFAULT: 'var(--malix-error)',
+            light: 'var(--malix-error-light)',
+            foreground: 'var(--malix-error-foreground)',
+          },
+          info: {
+            DEFAULT: 'var(--malix-info)',
+            light: 'var(--malix-info-light)',
+            foreground: 'var(--malix-info-foreground)',
+          },
+
+          /* Table */
+          table: {
+            'header-bg': 'var(--malix-table-header-bg)',
+            'row-hover': 'var(--malix-table-row-hover)',
+            border: 'var(--malix-table-border)',
+          },
+
+          /* Sidebar */
+          sidebar: {
+            bg: 'var(--malix-sidebar-bg)',
+            hover: 'var(--malix-sidebar-hover-bg)',
+            active: 'var(--malix-sidebar-active-bg)',
+          },
+
+          /* Glass */
+          glass: {
+            bg: 'var(--malix-glass-bg)',
+            border: 'var(--malix-glass-border)',
+          },
+
+          overlay: 'var(--malix-overlay)',
+          'overlay-backdrop': 'var(--malix-overlay-backdrop)',
+        },
+      },
+
+      fontFamily: {
+        malix: 'var(--malix-font-body)',
+        'malix-heading': 'var(--malix-font-heading)',
+      },
+
+      fontSize: {
+        'malix-xs': 'var(--malix-text-xs)',
+        'malix-sm': 'var(--malix-text-sm)',
+        'malix-base': 'var(--malix-text-base)',
+        'malix-lg': 'var(--malix-text-lg)',
+        'malix-xl': 'var(--malix-text-xl)',
+        'malix-2xl': 'var(--malix-text-2xl)',
+      },
+
+      fontWeight: {
+        'malix-normal': 'var(--malix-weight-normal)',
+        'malix-medium': 'var(--malix-weight-medium)',
+        'malix-semibold': 'var(--malix-weight-semibold)',
+        'malix-bold': 'var(--malix-weight-bold)',
+      },
+
+      spacing: {
+        'malix-xs': 'var(--malix-space-xs)',
+        'malix-sm': 'var(--malix-space-sm)',
+        'malix-md': 'var(--malix-space-md)',
+        'malix-lg': 'var(--malix-space-lg)',
+        'malix-xl': 'var(--malix-space-xl)',
+        'malix-2xl': 'var(--malix-space-2xl)',
+        'malix-3xl': 'var(--malix-space-3xl)',
+      },
+
+      borderRadius: {
+        'malix-sm': 'var(--malix-radius-sm)',
+        'malix-md': 'var(--malix-radius-md)',
+        'malix-lg': 'var(--malix-radius-lg)',
+        'malix-xl': 'var(--malix-radius-xl)',
+        'malix-pill': 'var(--malix-radius-pill)',
+      },
+
+      boxShadow: {
+        'malix-btn-primary': 'var(--malix-shadow-btn-primary)',
+        'malix-btn-secondary': 'var(--malix-shadow-btn-secondary)',
+        'malix-input': 'var(--malix-shadow-input)',
+        'malix-depth': 'var(--malix-shadow-depth)',
+        'malix-card': 'var(--malix-shadow-card-l1)',
+        'malix-card-l2': 'var(--malix-shadow-card-l2)',
+        'malix-card-l3': 'var(--malix-shadow-card-l3)',
+        'malix-overlay': 'var(--malix-shadow-overlay)',
+        'malix-tooltip': 'var(--malix-shadow-tooltip)',
+        'malix-sidebar': 'var(--malix-shadow-sidebar)',
+        'malix-header': 'var(--malix-shadow-header)',
+        'malix-focus': 'var(--malix-focus-ring)',
+      },
+
+      zIndex: {
+        'malix-dropdown': 'var(--malix-z-dropdown)',
+        'malix-sticky': 'var(--malix-z-sticky)',
+        'malix-overlay': 'var(--malix-z-overlay)',
+        'malix-modal': 'var(--malix-z-modal)',
+        'malix-tooltip': 'var(--malix-z-tooltip)',
+        'malix-notification': 'var(--malix-z-notification)',
+      },
+    },
+  },
+};