@machinemetrics/mm-react-components 0.2.3-3 → 0.2.3-6

package/src/themes/carbide.css

@@ -1,7 +1,354 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;600;700&display=swap');
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.5rem;
+  --radius-sm: 4px;
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: #5a67d8;
+  --chart-2: #319795;
+  --chart-3: #38a169;
+  --chart-4: #dd6b20;
+  --chart-5: #805ad5;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  /* Overlay token (base) */
+  --overlay-bg: rgba(0, 0, 0, 0.8);
+
+  /* --- Typography tokens (shadcn/ui reference) --- */
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  --font-heading: var(--font-sans);
+  --font-body: var(--font-sans);
+
+  --text-base-size: 1rem; /* 16px */
+  --text-sm-size: 0.875rem; /* 14px */
+  --text-lg-size: 1.125rem; /* 18px */
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+
+  --leading-tight: 1.25;
+  --leading-normal: 1.5;
+
+  --tracking-tight: -0.015em;
+  --tracking-normal: 0;
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: #667eea;
+  --chart-2: #4fd1c5;
+  --chart-3: #48bb78;
+  --chart-4: #ed8936;
+  --chart-5: #9f7aea;
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  .lead {
+    @apply text-xl text-muted-foreground;
+  }
+  .large {
+    @apply text-lg font-semibold;
+  }
+  .small {
+    @apply text-sm font-medium leading-none;
+  }
+  .muted {
+    @apply text-sm text-muted-foreground;
+  }
+  :root {
+    --chart-1: var(--indigo-600);
+    --chart-2: var(--teal-600);
+    --chart-3: var(--green-600);
+    --chart-4: var(--orange-600);
+    --chart-5: var(--purple-600);
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --chart-1: var(--indigo-500);
+    --chart-2: var(--teal-400);
+    --chart-3: var(--green-500);
+    --chart-4: var(--orange-500);
+    --chart-5: var(--purple-500);
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  /* Universal Carbide hover for input-like controls */
+  .carbide
+    :is(
+      input:not([type]),
+      input[type='text'],
+      input[type='email'],
+      input[type='password'],
+      input[type='search'],
+      input[type='number'],
+      input[type='url'],
+      input[type='tel'],
+      textarea,
+      [data-slot='checkbox'],
+      [data-slot='radio-group-item'],
+      [data-slot='toggle'],
+      [data-slot='filter-section-trigger']
+    ) {
+    @apply transition-[background-color,box-shadow];
+  }
+
+  .carbide
+    :is(
+      input:not([type]),
+      input[type='text'],
+      input[type='email'],
+      input[type='password'],
+      input[type='search'],
+      input[type='number'],
+      input[type='url'],
+      input[type='tel'],
+      textarea,
+      [data-slot='checkbox'],
+      [data-slot='radio-group-item'],
+      [data-slot='toggle'],
+      [data-slot='filter-section-trigger']
+    ):where(:not(:disabled)):hover {
+    background-color: var(--input-surface-hover-bg);
+  }
+
+  /* Ensure elements styled via the bg-input utility also receive hover */
+  .carbide .bg-input:where(:not(:disabled)):hover {
+    background-color: var(--accent);
+  }
+  .carbide.dark .bg-input:where(:not(:disabled)):hover {
+    background-color: var(--input-surface-hover-bg);
+  }
+
+  /* Universal single-line overflow wrapper for table cell contents */
+  .mmc-table-cell__content {
+    display: block;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    --fade-edge: 16px;
+  }
+  /* Apply masks ONLY when overflow is detected via JS-added modifier classes */
+  .mmc-table-cell__content--fade-right {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      rgba(0, 0, 0, 1) calc(100% - var(--fade-edge)),
+      rgba(0, 0, 0, 0) 100%
+    );
+    mask-image: linear-gradient(
+      to right,
+      rgba(0, 0, 0, 1) calc(100% - var(--fade-edge)),
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+  .mmc-table-cell__content--fade-left {
+    -webkit-mask-image: linear-gradient(
+      to left,
+      rgba(0, 0, 0, 1) calc(100% - var(--fade-edge)),
+      rgba(0, 0, 0, 0) 100%
+    );
+    mask-image: linear-gradient(
+      to left,
+      rgba(0, 0, 0, 1) calc(100% - var(--fade-edge)),
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+  .mmc-table-cell__content--fade-both {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      transparent 0,
+      rgba(0, 0, 0, 1) var(--fade-edge),
+      rgba(0, 0, 0, 1) calc(100% - var(--fade-edge)),
+      transparent 100%
+    );
+    mask-image: linear-gradient(
+      to right,
+      transparent 0,
+      rgba(0, 0, 0, 1) var(--fade-edge),
+      rgba(0, 0, 0, 1) calc(100% - var(--fade-edge)),
+      transparent 100%
+    );
+  }
+}
+
+/* Collapsible animations using Radix-provided height variable */
+@keyframes mm-collapsible-down {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+  }
+}
+
+@keyframes mm-collapsible-up {
+  from {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+  }
+  to {
+    height: 0;
+    opacity: 0;
+  }
+}
+
+/* Accordion animations (core theme) */
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+/* JS-driven height animation now handles height. Keep only overflow hidden. */
+[data-slot='collapsible-content'] {
+  overflow: hidden;
+}
+/* Radix sets hidden on closed when forceMount is used; override to enable CSS animation */
+[data-slot='collapsible-content'][hidden] {
+  display: block !important;
+}
+/* JS controls height now; avoid conflicting state heights */
+
 .carbide {
   /* =============================
-   TYPOGRAPHY
-============================= */
+     TYPOGRAPHY
+  ============================= */
 
   /* Core Fonts */
   --font-sans:
@@ -17,8 +364,8 @@
   --font-weight-bold: 600;
 
   /* =============================
-   COLORS
-============================= */
+     COLORS
+  ============================= */
 
   /* Brand */
   --brand-green: #15a500;
@@ -193,13 +540,13 @@
 
   /* =============================
      SURFACES (GENERIC)
-     ============================= */
+  ============================= */
   /* Neutral control rail/background surface used across components */
   --surface-neutral: var(--grey-300);
 
   /* =============================
      TABLIST
-     ============================= */
+  ============================= */
   --tablist-bg: var(--grey-200);
   --tablist-fg: var(--grey-700);
   --tablist-active-bg: var(--grey-00);
@@ -208,14 +555,14 @@
 
   /* =============================
      TABLE HEADER
-     ============================= */
+  ============================= */
   --tablehead-bg: var(--muted);
   --tablehead-fg: var(--foreground);
   --tablehead-border: var(--border);
 
   /* =============================
      BUTTONS
-     ============================= */
+  ============================= */
   --button-secondary-bg: transparent;
   --button-secondary-border: var(--grey-700);
   --button-secondary-hover-bg: var(--grey-150);
@@ -234,7 +581,7 @@
 
   /* =============================
      INPUT/OUTLINE/OVERLAY SURFACES
-     ============================= */
+  ============================= */
   --input-surface-bg: #202734;
   --input-surface-border: #2d3748;
   --input-surface-hover-bg: #242c3a;
@@ -242,14 +589,14 @@
 
 /* =============================
    BADGE: TYPOGRAPHY
-   ============================= */
+  ============================= */
 .carbide [data-slot='badge'] {
   font-weight: 400;
 }
 
 /* =============================
    KNOWLEDGE HUB STATUS BADGES
-   ============================= */
+  ============================= */
 .carbide .mmc-khub [data-slot='badge'] {
   border-radius: 9999px;
 }
@@ -312,7 +659,7 @@
 
 /* =============================
    BUTTON: ICON SIZE DEFAULT
-   ============================= */
+  ============================= */
 /* Default all button icons to 16px; :where() keeps specificity low so consumers can override */
 .carbide [data-slot='button'] svg {
   width: 16px;
@@ -321,7 +668,7 @@
 
 /* =============================
    BUTTON VARIANTS (LIGHT)
-   ============================= */
+  ============================= */
 .carbide [data-slot='button'][data-variant='default']:not([disabled]) {
   background-color: var(--primary);
   color: var(--primary-foreground);
@@ -457,7 +804,7 @@
 
 /* =============================
    BUTTON VARIANTS (DARK)
-   ============================= */
+  ============================= */
 .carbide.dark [data-slot='button'][data-variant='default']:not([disabled]) {
   background-color: var(--primary);
   color: var(--primary-foreground);
@@ -514,7 +861,7 @@
 
 /* =============================
    INPUT
-   ============================= */
+  ============================= */
 .carbide [data-slot='input'] {
   background-color: var(--bg-input);
   border-color: var(--border-input);
@@ -575,7 +922,7 @@
 
 /* =============================
    SELECT
-   ============================= */
+  ============================= */
 .carbide [data-slot='select-trigger'] {
   background-color: var(--bg-input);
   border-color: var(--border-input);
@@ -648,7 +995,7 @@
 
 /* =============================
    DROPDOWN MENU
-   ============================= */
+  ============================= */
 .carbide [data-slot='dropdown-menu-content'] {
   background-color: var(--popover);
   color: var(--popover-foreground);
@@ -736,7 +1083,7 @@
 
 /* =============================
    TOOLTIP
-   ============================= */
+  ============================= */
 .carbide [data-slot='tooltip-content'] {
   background-color: var(--foreground);
   color: var(--background);
@@ -755,7 +1102,7 @@
 
 /* =============================
    OVERLAYS & DIALOG/SHEET/DRAWER
-   ============================= */
+  ============================= */
 .carbide [data-slot='dialog-overlay'],
 .carbide [data-slot='sheet-overlay'],
 .carbide [data-slot='drawer-overlay'] {
@@ -838,7 +1185,7 @@
 
 /* =============================
    TABLE
-   ============================= */
+  ============================= */
 .carbide [data-slot='table-wrapper'] {
   background-color: var(--card);
   color: var(--card-foreground);
@@ -852,7 +1199,7 @@
 
 /* =============================
    TABS
-   ============================= */
+  ============================= */
 .carbide [data-slot='tabs-list'][data-variant='default'] {
   background-color: var(--tablist-bg);
   color: var(--tablist-fg);
@@ -905,7 +1252,7 @@
 }
 /* =============================
    UTILITY OVERRIDES
-============================= */
+  ============================= */
 
 /*
   Force correct text color for destructive badges and elements using text-destructive-foreground.
@@ -932,7 +1279,7 @@
 
 /* =============================
    PROGRESS (SEMANTIC HOOK)
-   ============================= */
+  ============================= */
 .carbide [data-slot='progress'] {
   background-color: var(--surface-neutral);
 }
@@ -943,7 +1290,7 @@
 
 /* =============================
    ACCORDION
-   ============================= */
+  ============================= */
 .carbide [data-slot='accordion'] [data-slot='accordion-item'] {
   border-bottom: 1px solid var(--border);
 }
@@ -953,7 +1300,7 @@
 
 /* =============================
    POPOVER
-   ============================= */
+  ============================= */
 .carbide [data-slot='popover-content'] {
   background-color: var(--popover);
   color: var(--popover-foreground);
@@ -969,10 +1316,10 @@
 
 /* =============================
    SLIDER (SEMANTIC HOOK)
-   ============================= */
+  ============================= */
 /* =============================
    CHECKBOX (SEMANTIC HOOK)
-   ============================= */
+  ============================= */
 .carbide [data-slot='checkbox'] {
   border-color: var(--border-input) !important;
   background-color: var(--bg-input);
@@ -998,7 +1345,7 @@
 
 /* =============================
    RADIO GROUP ITEM
-   ============================= */
+  ============================= */
 .carbide [data-slot='radio-group-item'] {
   border-color: var(--border-input);
   background-color: var(--bg-input);
@@ -1023,7 +1370,7 @@
 
 /* =============================
    FORM CONTROL FOCUS + INVALID STATES
-   ============================= */
+  ============================= */
 .carbide [data-slot='checkbox']:focus-visible,
 .carbide [data-slot='radio-group-item']:focus-visible,
 .carbide [data-slot='switch']:focus-visible {
@@ -1046,7 +1393,7 @@
 
 /* =============================
    SWITCH (SEMANTIC HOOK)
-   ============================= */
+  ============================= */
 .carbide [data-slot='switch'] {
   border-color: transparent;
 }
@@ -1074,7 +1421,7 @@
 
 /* =============================
    CALENDAR (SEMANTIC HOOK)
-   ============================= */
+  ============================= */
 .carbide [data-slot='calendar'] {
   background-color: var(--card);
   color: var(--card-foreground);
@@ -1125,7 +1472,7 @@
 
 /* =============================
    DATA TABLE: ALIGNMENT BASELINE FIX
-   ============================= */
+  ============================= */
 /* Unify left-aligned body cells to the sortable-header baseline (0.25rem) */
 .carbide
   td.text-left[data-col-id]:not([data-col-id='select']):not(