@mantis-core/styles 0.1.3 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantis-core/styles",
-  "version": "0.1.3",
+  "version": "0.3.0",
   "private": false,
   "description": "Shared SCSS tokens and Mantis Core style overrides.",
   "type": "module",

package/scss/theme.scss

@@ -0,0 +1,63 @@
+/*
+ * ============================================================
+ * MANTIS CORE — TAILWIND v4 THEME MAPPING
+ * ============================================================
+ *
+ * Maps the Core's semantic design tokens (raw `--*` CSS vars) to
+ * Tailwind v4 `--color-*` theme keys, so utility classes used inside
+ * `@mantis-core/ui` components (`bg-primary`, `border-border`,
+ * `text-muted-foreground`, …) generate correctly.
+ *
+ * USAGE (consumer app global stylesheet, AFTER loading Tailwind):
+ *   @use "tailwindcss";
+ *   @use "@mantis-core/styles/scss/theme.scss";          // this file
+ *   @source "../node_modules/@mantis-core/ui/dist";      // scan Core components
+ *
+ * The raw values themselves (`--primary`, `--border`, …) come from your
+ * branded copy of `tokens.template.scss`. `inline` keeps the var()
+ * reference live, so client branding overrides take effect at runtime.
+ * ============================================================
+ */
+
+@theme inline {
+  /* === Base / Surface === */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  /* === Brand === */
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  /* No shade scale in the token system — alias `-600` to the brand var so
+     components referencing `bg-primary-600` still resolve.
+     ponytail: alias shade→brand var; wire a real scale if design adds one. */
+  --color-primary-600: var(--primary);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  /* === Semantic === */
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-error: var(--error);
+  --color-error-foreground: var(--error-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+
+  /* === Neutral / Chrome === */
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* === Shape === */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}

package/scss/tokens.template.scss

@@ -0,0 +1,122 @@
+/*
+ * ============================================================
+ * MANTIS CORE — DESIGN TOKENS TEMPLATE
+ * ============================================================
+ *
+ * THIS IS A TEMPLATE — do NOT @use/@import this file directly
+ * into scss/index.scss or any Core partial.
+ *
+ * HOW TO USE:
+ *   1. Copy the :root and .dark blocks below into your app's
+ *      global stylesheet (e.g. src/app/globals.scss).
+ *   2. Replace the OKLCH values with your brand palette.
+ *   3. All @mantis-core/styles components consume these tokens
+ *      via var(--token-name) — your overrides take effect
+ *      automatically across the entire UI.
+ *
+ * TOKEN GROUPS:
+ *   - Base / surface  : --background, --foreground, --card, --card-foreground
+ *   - Brand           : --primary, --secondary, --accent (+ -foreground pairs)
+ *   - Semantic        : --success, --warning, --error, --info (+ -foreground pairs)
+ *   - Neutral         : --muted, --muted-foreground, --border, --input, --ring
+ *   - Shape           : --radius
+ *
+ * COLOR SPACE: OKLCH (lightness chroma hue)
+ *   oklch(<L 0–1>  <C 0–0.4>  <H 0–360>)
+ *   L=0.5 is perceptually mid-gray; C=0 is achromatic.
+ *
+ * ============================================================
+ */
+
+:root {
+  /* === Base / Surface === */
+  --background: oklch(0.98 0.003 250);         /* Page background */
+  --foreground: oklch(0.25 0.04 240);          /* Default text */
+
+  --card: oklch(1 0 0);                        /* Card / panel background */
+  --card-foreground: oklch(0.25 0.04 240);     /* Card text */
+
+  /* === Brand Colors === */
+  /* Replace these three pairs with your brand palette */
+  --primary: oklch(0.45 0.15 142);             /* Primary brand color */
+  --primary-foreground: oklch(0.98 0.01 55);
+
+  --secondary: oklch(0.75 0.18 85);            /* Secondary brand color */
+  --secondary-foreground: oklch(0.25 0.04 240);
+
+  --accent: oklch(0.82 0.2 85);               /* Accent / CTA color */
+  --accent-foreground: oklch(0.25 0.04 240);
+
+  /* === Semantic Colors === */
+  /* Adjust hue/chroma to match your brand tone while preserving
+     lightness levels so contrast ratios stay accessible (WCAG AA). */
+  --success: oklch(0.65 0.18 145);
+  --success-foreground: oklch(0.98 0.01 145);
+
+  --warning: oklch(0.75 0.15 75);
+  --warning-foreground: oklch(0.25 0.04 75);
+
+  --error: oklch(0.58 0.22 27);
+  --error-foreground: oklch(0.98 0.01 27);
+
+  --info: oklch(0.6 0.15 240);
+  --info-foreground: oklch(0.98 0.01 240);
+
+  /* === Neutral / Chrome === */
+  --muted: oklch(0.92 0.01 240);              /* Muted backgrounds */
+  --muted-foreground: oklch(0.55 0.03 240);   /* Muted / placeholder text */
+  --border: oklch(0.93 0.01 240);             /* Dividers and borders */
+  --input: oklch(1 0 0);                      /* Input field background */
+  --ring: oklch(0.82 0.2 85);                 /* Focus ring (usually = --accent) */
+
+  /* === Shape === */
+  --radius: 0.75rem;                          /* Base border-radius; used by --radius-{sm,md,lg,xl} */
+}
+
+/* ============================================================
+ * DARK MODE OVERRIDES
+ * Applied when the <html> (or any ancestor) has class="dark".
+ * Convention in this project: @custom-variant dark (&:is(.dark *))
+ * ============================================================ */
+.dark {
+  /* === Base / Surface === */
+  --background: oklch(0.18 0.04 240);
+  --foreground: oklch(0.95 0.01 55);
+
+  --card: oklch(0.22 0.04 240);
+  --card-foreground: oklch(0.95 0.01 55);
+
+  /* === Brand Colors (dark-adjusted) === */
+  /* In dark mode, brand colors typically shift to higher lightness
+     so they stand out against dark backgrounds. */
+  --primary: oklch(0.75 0.18 85);
+  --primary-foreground: oklch(0.25 0.04 240);
+
+  --secondary: oklch(0.55 0.12 142);
+  --secondary-foreground: oklch(0.95 0.01 55);
+
+  --accent: oklch(0.85 0.22 85);
+  --accent-foreground: oklch(0.25 0.04 240);
+
+  /* === Semantic Colors (dark-adjusted) === */
+  --success: oklch(0.7 0.2 145);
+  --success-foreground: oklch(0.18 0.04 145);
+
+  --warning: oklch(0.8 0.18 75);
+  --warning-foreground: oklch(0.2 0.04 75);
+
+  --error: oklch(0.65 0.25 27);
+  --error-foreground: oklch(0.18 0.04 27);
+
+  --info: oklch(0.7 0.18 240);
+  --info-foreground: oklch(0.18 0.04 240);
+
+  /* === Neutral / Chrome === */
+  --muted: oklch(0.3 0.04 240);
+  --muted-foreground: oklch(0.7 0.03 240);
+  --border: oklch(0.27 0.04 240);
+  --input: oklch(0.22 0.04 240);
+  --ring: oklch(0.85 0.22 85);
+
+  /* --radius is theme-independent; no override needed */
+}