@machinemetrics/mm-react-components 0.2.3-19 → 0.2.3-20

package/dist/preview/ColorsPreview.d.ts

@@ -0,0 +1,7 @@
+export type ColorsSection = 'Carbide Palette' | 'Core' | 'Sidebar' | 'Inputs & Surfaces' | 'Tabs' | 'Table' | 'Overlay' | 'Spinner' | 'Charts';
+interface ColorsPreviewProps {
+    section?: ColorsSection;
+}
+export default function ColorsPreview({ section }: ColorsPreviewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ColorsPreview.d.ts.map

package/dist/preview/ColorsPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorsPreview.d.ts","sourceRoot":"","sources":["../../src/preview/ColorsPreview.tsx"],"names":[],"mappings":"AAubA,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,MAAM,GACN,SAAS,GACT,mBAAmB,GACnB,MAAM,GACN,OAAO,GACP,SAAS,GACT,SAAS,GACT,QAAQ,CAAC;AAEb,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,OAAO,EAAE,EAAE,kBAAkB,2CAgGpE"}

package/dist/preview/DataTablePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTablePreview.d.ts","sourceRoot":"","sources":["../../src/preview/DataTablePreview.tsx"],"names":[],"mappings":"AAmKA,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,eAAe,CAAC;AAEhD,KAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EAAE,iBAAiB,EAC1B,eAAuB,EACvB,aAAqB,GACtB,EAAE,qBAAqB,2CAoJvB"}
+{"version":3,"file":"DataTablePreview.d.ts","sourceRoot":"","sources":["../../src/preview/DataTablePreview.tsx"],"names":[],"mappings":"AAmKA,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,eAAe,CAAC;AAEhD,KAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EAAE,iBAAiB,EAC1B,eAAuB,EACvB,aAAqB,GACtB,EAAE,qBAAqB,2CAyJvB"}

package/dist/preview/DateRangePickerPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePickerPreview.d.ts","sourceRoot":"","sources":["../../src/preview/DateRangePickerPreview.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,sBAAsB,4CAsB7C"}
+{"version":3,"file":"DateRangePickerPreview.d.ts","sourceRoot":"","sources":["../../src/preview/DateRangePickerPreview.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,UAAU,sBAAsB,4CA0B7C"}

package/dist/tailwind.base.config.js

@@ -34,6 +34,8 @@ export default {
       },
       fontFamily: {
         sans: [
+          'var(--font-sans)',
+          'Noto Sans',
           'Inter',
           'ui-sans-serif',
           'system-ui',
@@ -43,7 +45,6 @@ export default {
           'Roboto',
           'Helvetica Neue',
           'Arial',
-          'Noto Sans',
           'sans-serif',
           'Apple Color Emoji',
           'Segoe UI Emoji',

package/dist/themes/carbide.css

@@ -24,11 +24,7 @@
   --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;
+  /* Chart colors are defined below via design tokens (indigo/teal/green/orange/purple). */
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
   --sidebar-primary: oklch(0.205 0 0);
@@ -86,11 +82,7 @@
   --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;
+  /* Removed redundant hard-coded chart swatches; values sourced via token mappings below */
   --sidebar: oklch(0.205 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
@@ -388,15 +380,22 @@
   --table-action-hover-bg: var(--grey-300);
 
   /* Overlay */
-  --overlay-bg: rgba(0, 0, 0, 0.8);
-  --overlay-border: #353b48;
+  /* --overlay-bg is already defined in :root; keep only border here. */
+  --overlay-border: var(--grey-800);
 
   /* =============================
      INPUT/OUTLINE/OVERLAY SURFACES
   ============================= */
-  --input-surface-bg: #202734;
-  --input-surface-border: #2d3748;
-  --input-surface-hover-bg: #242c3a;
+  --input-surface-bg: var(--grey-900);
+  --input-surface-border: var(--grey-800);
+  --input-surface-hover-bg: var(--grey-850);
+
+  /* =============================
+     CODE (TYPOGRAPHY TOKENS)
+     ============================= */
+  --code-bg: color-mix(in srgb, var(--brand-green) 18%, transparent);
+  --code-fg: var(--brand-green);
+  --code-border: transparent;
 }
 
 /* =============================
@@ -442,11 +441,28 @@
   background-color: var(--button-primary-hover-bg);
 }
 
-.carbide [data-slot='button'][data-variant='outline']:not([disabled]) {
+.carbide [data-slot='button'][data-variant='outline']:not([disabled]),
+.carbide [data-slot='popover-trigger'][data-variant='outline']:not([disabled]),
+.carbide
+  [data-slot='dropdown-menu-trigger'][data-variant='outline']:not([disabled]),
+.carbide
+  [data-slot='date-picker-trigger'][data-variant='outline']:not([disabled]),
+.carbide [data-variant='outline']:not([disabled]) {
   background-color: var(--button-outline-bg);
   border-color: var(--button-outline-border);
 }
-.carbide [data-slot='button'][data-variant='outline']:not([disabled]):hover {
+.carbide [data-slot='button'][data-variant='outline']:not([disabled]):hover,
+.carbide
+  [data-slot='popover-trigger'][data-variant='outline']:not([disabled]):hover,
+.carbide
+  [data-slot='dropdown-menu-trigger'][data-variant='outline']:not(
+    [disabled]
+  ):hover,
+.carbide
+  [data-slot='date-picker-trigger'][data-variant='outline']:not(
+    [disabled]
+  ):hover,
+.carbide [data-variant='outline']:not([disabled]):hover {
   background-color: var(--button-outline-hover-bg);
 }
 
@@ -547,6 +563,13 @@
   --tablehead-fg: var(--foreground);
   --tablehead-border: var(--border);
 
+  /* =============================
+     CODE (TYPOGRAPHY TOKENS - DARK)
+     ============================= */
+  --code-bg: color-mix(in srgb, var(--brand-green) 20%, transparent);
+  --code-fg: var(--brand-green);
+  --code-border: transparent;
+
   /* =============================
      BUTTONS
      ============================= */
@@ -583,12 +606,30 @@
   background-color: var(--button-primary-hover-bg);
 }
 
-.carbide.dark [data-slot='button'][data-variant='outline']:not([disabled]) {
+.carbide.dark [data-slot='button'][data-variant='outline']:not([disabled]),
+.carbide.dark
+  [data-slot='popover-trigger'][data-variant='outline']:not([disabled]),
+.carbide.dark
+  [data-slot='dropdown-menu-trigger'][data-variant='outline']:not([disabled]),
+.carbide.dark
+  [data-slot='date-picker-trigger'][data-variant='outline']:not([disabled]),
+.carbide.dark [data-variant='outline']:not([disabled]) {
   background-color: var(--button-outline-bg);
   border-color: var(--button-outline-border);
 }
 .carbide.dark
-  [data-slot='button'][data-variant='outline']:not([disabled]):hover {
+  [data-slot='button'][data-variant='outline']:not([disabled]):hover,
+.carbide.dark
+  [data-slot='popover-trigger'][data-variant='outline']:not([disabled]):hover,
+.carbide.dark
+  [data-slot='dropdown-menu-trigger'][data-variant='outline']:not(
+    [disabled]
+  ):hover,
+.carbide.dark
+  [data-slot='date-picker-trigger'][data-variant='outline']:not(
+    [disabled]
+  ):hover,
+.carbide.dark [data-variant='outline']:not([disabled]):hover {
   background-color: var(--button-outline-hover-bg);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@machinemetrics/mm-react-components",
-  "version": "0.2.3-19",
+  "version": "0.2.3-20",
   "description": "Industrial-grade React components for manufacturing applications",
   "keywords": [
     "react",

package/src/index.css

@@ -34,6 +34,18 @@
   backdrop-filter: blur(4px);
 }
 
+/* Colors preview-specific code styling to avoid green accents conflicting with swatches */
+.mmc-colors code {
+  background-color: var(--grey-150);
+  color: var(--grey-700);
+  border: none;
+}
+.carbide.dark .mmc-colors code {
+  background-color: var(--grey-800);
+  color: var(--grey-200);
+  border: none;
+}
+
 /* Animated ellipsis for in-progress labels */
 @keyframes mm-ellipsis {
   0% {