cat-framework-core 0.5.1 → 0.6.0

package/src/index.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;700&display=swap');
 
 @tailwind base;
 @tailwind components;
@@ -16,6 +16,8 @@
     --primary: 214 100% 40%;          /* #0052CC – Corporate Blue */
     --primary-foreground: 0 0% 100%;
     --primary-hover: 214 100% 34%;
+    --primary-light: 214 60% 89%;     /* light tint for disabled/subtle */
+    --primary-lightest: 214 40% 96%;  /* section backgrounds */
 
     --secondary: 215 25% 35%;         /* #42526E – Slate */
     --secondary-foreground: 0 0% 100%;
@@ -25,7 +27,9 @@
 
     /* ── Surfaces ── */
     --background: 0 0% 100%;
+    --background-tinted: 214 50% 96%; /* subtle tinted sections */
     --foreground: 216 43% 19%;        /* #172B4D – Deep Navy */
+    --foreground-body: 216 30% 30%;   /* body text (slightly lighter) */
 
     --card: 0 0% 100%;
     --card-foreground: 216 43% 19%;
@@ -44,9 +48,18 @@
     --input: 220 13% 90%;
     --ring: 214 100% 40%;
 
-    --radius: 0.75rem;
+    /* ── Border Radius ── */
+    --radius: 0.75rem;                /* 12px – default */
+    --radius-button: 2rem;            /* 32px – pill buttons */
+    --radius-card: 1rem;              /* 16px – cards, images */
+    --radius-input: 0.375rem;         /* 6px – inputs, selects */
+    --radius-overlay: 0.25rem;        /* 4px – overlays, tooltips */
 
-    /* ── Semantic Extras ── */
+    /* ── Shadows ── */
+    --shadow-card: 0 1px 10px 0 rgba(0,0,0,0.08);
+    --shadow-elevated: 0 4px 20px 0 rgba(0,0,0,0.12);
+
+    /* ── Semantic / Signal ── */
     --warning: 36 100% 50%;
     --warning-foreground: 0 0% 10%;
     --info: 214 100% 40%;
@@ -54,20 +67,31 @@
     --success: 153 56% 46%;
     --success-foreground: 0 0% 100%;
 
-    /* ── Spacing Scale ── */
-    --space-xs: 0.25rem;
-    --space-sm: 0.5rem;
-    --space-md: 1rem;
-    --space-lg: 1.5rem;
-    --space-xl: 2rem;
-    --space-2xl: 3rem;
-    --space-3xl: 4rem;
+    /* ── Signal Light (banners, backgrounds) ── */
+    --warning-light: 36 80% 90%;
+    --info-light: 214 60% 91%;
+    --success-light: 153 45% 89%;
+    --destructive-light: 0 60% 89%;
+
+    /* ── Disabled ── */
+    --disabled: 220 13% 90%;
+    --disabled-foreground: 0 0% 100%;
+
+    /* ── Spacing Scale (desktop) ── */
+    --space-xxs: 1rem;                /* 16px */
+    --space-xs: 1.5rem;               /* 24px */
+    --space-sm: 2rem;                 /* 32px */
+    --space-md: 2.5rem;               /* 40px */
+    --space-lg: 3rem;                 /* 48px */
+    --space-xl: 4rem;                 /* 64px */
+    --space-2xl: 5rem;                /* 80px */
+    --space-3xl: 6rem;                /* 96px */
 
     /* ── Transitions ── */
     --transition-fast: 150ms ease;
     --transition-base: 200ms ease;
 
-    /* ── Sidebar (unused but required by shadcn) ── */
+    /* ── Sidebar (required by shadcn) ── */
     --sidebar-background: 0 0% 98%;
     --sidebar-foreground: 215 25% 35%;
     --sidebar-primary: 214 100% 40%;
@@ -78,10 +102,22 @@
     --sidebar-ring: 214 100% 40%;
   }
 
+  /* ── Mobile spacing overrides ── */
+  @media (max-width: 659px) {
+    :root {
+      --space-xs: 1rem;               /* 16px */
+      --space-sm: 1.5rem;             /* 24px */
+      --space-md: 2rem;               /* 32px */
+      --space-lg: 2.5rem;             /* 40px */
+    }
+  }
+
   .dark {
     --primary: 214 100% 60%;
     --primary-foreground: 216 43% 10%;
     --primary-hover: 214 100% 66%;
+    --primary-light: 214 40% 18%;
+    --primary-lightest: 214 30% 12%;
 
     --secondary: 215 20% 55%;
     --secondary-foreground: 0 0% 100%;
@@ -90,7 +126,9 @@
     --accent-foreground: 0 0% 10%;
 
     --background: 220 20% 8%;
+    --background-tinted: 220 18% 10%;
     --foreground: 210 20% 92%;
+    --foreground-body: 210 15% 80%;
 
     --card: 220 18% 12%;
     --card-foreground: 210 20% 92%;
@@ -108,6 +146,9 @@
     --input: 220 14% 20%;
     --ring: 214 100% 60%;
 
+    --shadow-card: 0 1px 10px 0 rgba(0,0,0,0.25);
+    --shadow-elevated: 0 4px 20px 0 rgba(0,0,0,0.35);
+
     --warning: 36 100% 55%;
     --warning-foreground: 0 0% 10%;
     --info: 214 100% 60%;
@@ -115,6 +156,14 @@
     --success: 153 56% 56%;
     --success-foreground: 0 0% 10%;
 
+    --warning-light: 36 50% 18%;
+    --info-light: 214 40% 18%;
+    --success-light: 153 30% 16%;
+    --destructive-light: 0 40% 18%;
+
+    --disabled: 220 14% 25%;
+    --disabled-foreground: 220 10% 50%;
+
     --sidebar-background: 220 18% 10%;
     --sidebar-foreground: 210 20% 92%;
     --sidebar-primary: 214 100% 60%;
@@ -131,26 +180,50 @@
      ============================================================ */
   [data-brand="webde"] {
     --primary: 50 100% 50%;              /* #FFD800 – WEB.DE Yellow */
-    --primary-foreground: 0 0% 10%;      /* Dark text on yellow */
+    --primary-foreground: 0 0% 10%;
     --primary-hover: 50 100% 44%;
+    --primary-light: 50 60% 89%;
+    --primary-lightest: 50 40% 96%;
 
     --secondary: 213 73% 44%;            /* #1A73C7 – WEB.DE Blue */
     --secondary-foreground: 0 0% 100%;
 
-    --accent: 213 73% 44%;               /* Blue as accent */
+    --accent: 213 73% 44%;
     --accent-foreground: 0 0% 100%;
 
-    --foreground: 220 20% 14%;
-    --card-foreground: 220 20% 14%;
-    --popover-foreground: 220 20% 14%;
+    --background-tinted: 50 50% 96%;     /* warm tinted sections */
+    --foreground: 0 0% 10%;
+    --foreground-body: 0 0% 24%;
+    --card-foreground: 0 0% 10%;
+    --popover-foreground: 0 0% 10%;
 
+    --muted: 0 0% 96%;
+    --muted-foreground: 0 0% 37%;
+
+    --border: 0 0% 84%;
+    --input: 0 0% 84%;
     --ring: 50 100% 50%;
 
-    --success: 145 60% 40%;
+    --radius-button: 2rem;               /* pill buttons like GMX */
+
+    --destructive: 0 100% 42%;
+    --destructive-foreground: 0 0% 100%;
+
+    --warning: 47 100% 47%;
+    --warning-foreground: 0 0% 10%;
+    --success: 100 63% 44%;
     --success-foreground: 0 0% 100%;
     --info: 213 73% 44%;
     --info-foreground: 0 0% 100%;
 
+    --warning-light: 47 90% 90%;
+    --info-light: 213 60% 91%;
+    --success-light: 100 48% 89%;
+    --destructive-light: 0 71% 89%;
+
+    --disabled: 50 40% 89%;
+    --disabled-foreground: 0 0% 100%;
+
     --sidebar-primary: 50 100% 50%;
     --sidebar-primary-foreground: 0 0% 10%;
     --sidebar-ring: 50 100% 50%;
@@ -160,10 +233,13 @@
     --primary: 50 100% 55%;
     --primary-foreground: 0 0% 10%;
     --primary-hover: 50 100% 62%;
+    --primary-light: 50 40% 18%;
+    --primary-lightest: 50 30% 12%;
     --secondary: 213 73% 55%;
     --secondary-foreground: 0 0% 100%;
     --accent: 213 73% 55%;
     --accent-foreground: 0 0% 100%;
+    --background-tinted: 50 20% 10%;
     --ring: 50 100% 55%;
     --sidebar-primary: 50 100% 55%;
     --sidebar-ring: 50 100% 55%;
@@ -171,46 +247,132 @@
 
   /* ============================================================
      BRAND: GMX
-     Primary: #1c449b (GMX Blue)
+     Primary: #1e50a0 (GMX Blue) — Plasma Color System
+     Ref: CAT component library v6.0.2
      ============================================================ */
   [data-brand="gmx"] {
-    --primary: 228 70% 36%;             /* #1c449b – GMX Blue */
+    /* ── Brand ── */
+    --primary: 215 68% 37%;             /* #1e50a0 – b1-base */
     --primary-foreground: 0 0% 100%;
-    --primary-hover: 228 70% 30%;
+    --primary-hover: 215 68% 30%;       /* #184080 – b1-dark20 */
+    --primary-light: 215 38% 89%;       /* #d7e0ee – b1-light82 */
+    --primary-lightest: 215 37% 96%;    /* #f2f5f9 – b1-light94 */
 
-    --secondary: 200 25% 40%;
+    --secondary: 215 65% 46%;           /* #2966c2 – b2-base */
     --secondary-foreground: 0 0% 100%;
 
-    --accent: 36 90% 52%;
-    --accent-foreground: 0 0% 10%;
+    --accent: 215 65% 46%;
+    --accent-foreground: 0 0% 100%;
+
+    /* ── Surfaces ── */
+    --background: 0 0% 100%;            /* c1-base */
+    --background-tinted: 216 55% 95%;   /* #EAF0F9 – backgrounds-3 */
+    --foreground: 0 0% 10%;             /* #1a1a1a – c2-base */
+    --foreground-body: 0 0% 24%;        /* #3c3c3c – c2-light15 */
 
-    --foreground: 228 40% 15%;
-    --card-foreground: 228 40% 15%;
-    --popover-foreground: 228 40% 15%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 24%;        /* body text on cards */
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 10%;
 
-    --ring: 228 70% 36%;
+    --muted: 0 0% 95%;                  /* #f1f1f1 – c2-light94 */
+    --muted-foreground: 0 0% 37%;       /* #5f5f5f – c2-light30 */
 
-    --success: 160 45% 38%;
+    /* ── Borders ── */
+    --border: 0 0% 84%;                 /* #d6d6d6 – c2-light82 */
+    --input: 0 0% 84%;
+    --ring: 215 68% 37%;
+
+    /* ── Border Radius (GMX brand overrides) ── */
+    --radius: 1rem;                     /* 16px – cards/images */
+    --radius-button: 2rem;              /* 32px – pill buttons (brand signature) */
+    --radius-card: 1rem;                /* 16px – cards, teasers */
+    --radius-input: 0.25rem;            /* 4px – inputs, selects */
+    --radius-overlay: 0.25rem;          /* 4px – backdrop overlays */
+
+    /* ── Shadow (GMX spec) ── */
+    --shadow-card: 1px 1px 10px 0 rgba(0,0,0,0.10);
+
+    /* ── Signal Colors ── */
+    --destructive: 0 100% 42%;          /* #d40000 – d1-base */
+    --destructive-foreground: 0 0% 100%;
+
+    --warning: 47 100% 47%;             /* #f0bc00 – d2-base */
+    --warning-foreground: 0 0% 10%;
+    --success: 100 63% 44%;             /* #5cb82a – d3-base */
     --success-foreground: 0 0% 100%;
-    --info: 228 70% 36%;
+    --info: 205 77% 48%;                /* #1c8ad9 – d4-base */
     --info-foreground: 0 0% 100%;
 
-    --sidebar-primary: 228 70% 36%;
+    /* ── Signal Light ── */
+    --warning-light: 47 90% 90%;        /* #fcf3d1 – d2-light82 */
+    --info-light: 205 71% 91%;          /* #d6eaf8 – d4-light82 */
+    --success-light: 100 48% 89%;       /* #e2f2d9 – d3-light82 */
+    --destructive-light: 0 71% 89%;     /* #f7d1d1 – d1-light82 */
+
+    /* ── Disabled ── */
+    --disabled: 215 38% 89%;            /* #d7e0ee – b1-light82 */
+    --disabled-foreground: 0 0% 100%;
+
+    --sidebar-primary: 215 68% 37%;
     --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-ring: 228 70% 36%;
+    --sidebar-ring: 215 68% 37%;
   }
 
   [data-brand="gmx"].dark {
-    --primary: 228 70% 55%;
+    --primary: 215 68% 55%;
     --primary-foreground: 0 0% 100%;
-    --primary-hover: 228 70% 48%;
-    --secondary: 200 25% 55%;
+    --primary-hover: 215 68% 48%;
+    --primary-light: 215 30% 20%;
+    --primary-lightest: 215 20% 12%;
+
+    --secondary: 215 65% 58%;
     --secondary-foreground: 0 0% 100%;
-    --accent: 36 90% 58%;
-    --accent-foreground: 0 0% 10%;
-    --ring: 228 70% 55%;
-    --sidebar-primary: 228 70% 55%;
-    --sidebar-ring: 228 70% 55%;
+
+    --accent: 215 65% 58%;
+    --accent-foreground: 0 0% 100%;
+
+    --background: 220 20% 8%;
+    --background-tinted: 215 20% 10%;
+    --foreground: 0 0% 92%;
+    --foreground-body: 0 0% 85%;
+
+    --card: 220 18% 12%;
+    --card-foreground: 0 0% 85%;
+
+    --popover: 220 18% 12%;
+    --popover-foreground: 0 0% 92%;
+
+    --muted: 220 14% 16%;
+    --muted-foreground: 0 0% 55%;
+
+    --border: 220 14% 20%;
+    --input: 220 14% 20%;
+    --ring: 215 68% 55%;
+
+    --shadow-card: 1px 1px 10px 0 rgba(0,0,0,0.30);
+
+    --destructive: 0 80% 50%;
+    --destructive-foreground: 0 0% 100%;
+
+    --warning: 47 100% 55%;
+    --warning-foreground: 0 0% 10%;
+    --success: 100 63% 52%;
+    --success-foreground: 0 0% 10%;
+    --info: 205 77% 56%;
+    --info-foreground: 0 0% 100%;
+
+    --warning-light: 47 50% 18%;
+    --info-light: 205 40% 18%;
+    --success-light: 100 30% 16%;
+    --destructive-light: 0 40% 18%;
+
+    --disabled: 215 20% 25%;
+    --disabled-foreground: 215 15% 50%;
+
+    --sidebar-primary: 215 68% 55%;
+    --sidebar-ring: 215 68% 55%;
   }
 }