@mieweb/ui 0.2.2 → 0.3.0-dev.60

package/dist/styles/init.css

@@ -0,0 +1,326 @@
+/**
+ * @mieweb/ui — Quick-Start Init
+ *
+ * Provides a complete working baseline for Tailwind CSS 4 + @mieweb/ui.
+ * Add these three lines to your main CSS entry point:
+ *
+ *   @import 'tailwindcss';
+ *   @source "../node_modules/@mieweb/ui/dist";
+ *   @import '@mieweb/ui/init.css';
+ *
+ * The first two lines MUST live in your own CSS file (not inside a
+ * package) because the paths resolve relative to your project root.
+ * The third line imports this file, which includes:
+ *
+ *   - Dark mode custom variant (data-theme="dark")
+ *   - @theme with all color scales + fallback values
+ *   - BlueHive brand tokens (default brand)
+ *   - Base typography and reset styles
+ *
+ * For advanced usage (custom brand, selective imports), see the README
+ * and import the pieces you need individually:
+ *   - @mieweb/ui/styles.css          (theme + resets only)
+ *   - @mieweb/ui/brands/bluehive.css  (or another brand)
+ */
+
+/* ── Dark Mode Variant ───────────────────────────────────────────────── */
+@custom-variant dark (&:where(.dark, [data-theme=dark], .dark *, [data-theme=dark] *));
+
+/* ── Theme: Color Scales with Fallbacks ──────────────────────────────── */
+@theme {
+  /* ── Primary Color Scale ───────────────────────────────────────────── */
+  --color-primary: var(--mieweb-primary-500);
+  --color-primary-50: var(--mieweb-primary-50);
+  --color-primary-100: var(--mieweb-primary-100);
+  --color-primary-200: var(--mieweb-primary-200);
+  --color-primary-300: var(--mieweb-primary-300);
+  --color-primary-400: var(--mieweb-primary-400);
+  --color-primary-500: var(--mieweb-primary-500);
+  --color-primary-600: var(--mieweb-primary-600);
+  --color-primary-700: var(--mieweb-primary-700);
+  --color-primary-800: var(--mieweb-primary-800);
+  --color-primary-900: var(--mieweb-primary-900);
+  --color-primary-950: var(--mieweb-primary-950);
+  --color-primary-foreground: var(--mieweb-primary-foreground, #ffffff);
+
+  /* ── Secondary Color Scale ─────────────────────────────────────────── */
+  --color-secondary: var(--mieweb-secondary-500, #6366f1);
+  --color-secondary-50: var(--mieweb-secondary-50, #eef2ff);
+  --color-secondary-100: var(--mieweb-secondary-100, #e0e7ff);
+  --color-secondary-200: var(--mieweb-secondary-200, #c7d2fe);
+  --color-secondary-300: var(--mieweb-secondary-300, #a5b4fc);
+  --color-secondary-400: var(--mieweb-secondary-400, #818cf8);
+  --color-secondary-500: var(--mieweb-secondary-500, #6366f1);
+  --color-secondary-600: var(--mieweb-secondary-600, #4f46e5);
+  --color-secondary-700: var(--mieweb-secondary-700, #4338ca);
+  --color-secondary-800: var(--mieweb-secondary-800, #3730a3);
+  --color-secondary-900: var(--mieweb-secondary-900, #312e81);
+  --color-secondary-950: var(--mieweb-secondary-950, #1e1b4b);
+  --color-secondary-foreground: var(--mieweb-secondary-foreground, #ffffff);
+
+  /* ── Neutral / Gray Scale ──────────────────────────────────────────── */
+  --color-neutral: var(--mieweb-neutral-500, #737373);
+  --color-neutral-50: var(--mieweb-neutral-50, #fafafa);
+  --color-neutral-100: var(--mieweb-neutral-100, #f5f5f5);
+  --color-neutral-200: var(--mieweb-neutral-200, #e5e5e5);
+  --color-neutral-300: var(--mieweb-neutral-300, #d4d4d4);
+  --color-neutral-400: var(--mieweb-neutral-400, #a3a3a3);
+  --color-neutral-500: var(--mieweb-neutral-500, #737373);
+  --color-neutral-600: var(--mieweb-neutral-600, #525252);
+  --color-neutral-700: var(--mieweb-neutral-700, #404040);
+  --color-neutral-800: var(--mieweb-neutral-800, #262626);
+  --color-neutral-900: var(--mieweb-neutral-900, #171717);
+  --color-neutral-950: var(--mieweb-neutral-950, #0a0a0a);
+
+  /* ── Destructive / Error Scale ─────────────────────────────────────── */
+  --color-destructive: var(
+    --mieweb-destructive,
+    var(--mieweb-destructive-500, #ef4444)
+  );
+  --color-destructive-50: var(--mieweb-destructive-50, #fef2f2);
+  --color-destructive-100: var(--mieweb-destructive-100, #fee2e2);
+  --color-destructive-200: var(--mieweb-destructive-200, #fecaca);
+  --color-destructive-300: var(--mieweb-destructive-300, #fca5a5);
+  --color-destructive-400: var(--mieweb-destructive-400, #f87171);
+  --color-destructive-500: var(--mieweb-destructive-500, #ef4444);
+  --color-destructive-600: var(--mieweb-destructive-600, #dc2626);
+  --color-destructive-700: var(--mieweb-destructive-700, #b91c1c);
+  --color-destructive-800: var(--mieweb-destructive-800, #991b1b);
+  --color-destructive-900: var(--mieweb-destructive-900, #7f1d1d);
+  --color-destructive-950: var(--mieweb-destructive-950, #450a0a);
+  --color-destructive-foreground: var(--mieweb-destructive-foreground, #ffffff);
+
+  /* ── Success Scale ─────────────────────────────────────────────────── */
+  --color-success: var(--mieweb-success, var(--mieweb-success-500, #22c55e));
+  --color-success-50: var(--mieweb-success-50, #f0fdf4);
+  --color-success-100: var(--mieweb-success-100, #dcfce7);
+  --color-success-200: var(--mieweb-success-200, #bbf7d0);
+  --color-success-300: var(--mieweb-success-300, #86efac);
+  --color-success-400: var(--mieweb-success-400, #4ade80);
+  --color-success-500: var(--mieweb-success-500, #22c55e);
+  --color-success-600: var(--mieweb-success-600, #16a34a);
+  --color-success-700: var(--mieweb-success-700, #15803d);
+  --color-success-800: var(--mieweb-success-800, #166534);
+  --color-success-900: var(--mieweb-success-900, #14532d);
+  --color-success-950: var(--mieweb-success-950, #052e16);
+  --color-success-foreground: var(--mieweb-success-foreground, #ffffff);
+
+  /* ── Warning Scale ─────────────────────────────────────────────────── */
+  --color-warning: var(--mieweb-warning, var(--mieweb-warning-500, #f59e0b));
+  --color-warning-50: var(--mieweb-warning-50, #fffbeb);
+  --color-warning-100: var(--mieweb-warning-100, #fef3c7);
+  --color-warning-200: var(--mieweb-warning-200, #fde68a);
+  --color-warning-300: var(--mieweb-warning-300, #fcd34d);
+  --color-warning-400: var(--mieweb-warning-400, #fbbf24);
+  --color-warning-500: var(--mieweb-warning-500, #f59e0b);
+  --color-warning-600: var(--mieweb-warning-600, #d97706);
+  --color-warning-700: var(--mieweb-warning-700, #b45309);
+  --color-warning-800: var(--mieweb-warning-800, #92400e);
+  --color-warning-900: var(--mieweb-warning-900, #78350f);
+  --color-warning-950: var(--mieweb-warning-950, #451a03);
+  --color-warning-foreground: var(--mieweb-warning-foreground, #ffffff);
+
+  /* ── Info Scale ────────────────────────────────────────────────────── */
+  --color-info: var(--mieweb-info, var(--mieweb-info-500, #0ea5e9));
+  --color-info-50: var(--mieweb-info-50, #f0f9ff);
+  --color-info-100: var(--mieweb-info-100, #e0f2fe);
+  --color-info-200: var(--mieweb-info-200, #bae6fd);
+  --color-info-300: var(--mieweb-info-300, #7dd3fc);
+  --color-info-400: var(--mieweb-info-400, #38bdf8);
+  --color-info-500: var(--mieweb-info-500, #0ea5e9);
+  --color-info-600: var(--mieweb-info-600, #0284c7);
+  --color-info-700: var(--mieweb-info-700, #0369a1);
+  --color-info-800: var(--mieweb-info-800, #075985);
+  --color-info-900: var(--mieweb-info-900, #0c4a6e);
+  --color-info-950: var(--mieweb-info-950, #082f49);
+  --color-info-foreground: var(--mieweb-info-foreground, #ffffff);
+
+  /* ── Layout Semantic Colors ────────────────────────────────────────── */
+  --color-border: var(--mieweb-border, #e5e7eb);
+  --color-input: var(--mieweb-input, #e5e7eb);
+  --color-ring: var(--mieweb-ring, #27aae1);
+  --color-background: var(--mieweb-background, #ffffff);
+  --color-foreground: var(--mieweb-foreground, #171717);
+  --color-card: var(--mieweb-card, #ffffff);
+  --color-card-foreground: var(--mieweb-card-foreground, #171717);
+  --color-muted: var(--mieweb-muted, #f5f5f5);
+  --color-muted-foreground: var(--mieweb-muted-foreground, #737373);
+
+  /* ── Chart / Data Visualization Colors ─────────────────────────────── */
+  --color-chart-1: var(--mieweb-chart-1);
+  --color-chart-2: var(--mieweb-chart-2);
+  --color-chart-3: var(--mieweb-chart-3);
+  --color-chart-4: var(--mieweb-chart-4);
+  --color-chart-5: var(--mieweb-chart-5);
+
+  /* ── Typography ────────────────────────────────────────────────────── */
+  --font-sans: var(--mieweb-font-sans, ui-sans-serif);
+  --font-mono: var(--mieweb-font-mono, ui-monospace);
+}
+
+/* ── BlueHive Brand Tokens (Default) ─────────────────────────────────── */
+
+:root {
+  /* Primary Color Scale */
+  --mieweb-primary-50: #e6f7fc;
+  --mieweb-primary-100: #b3e6f6;
+  --mieweb-primary-200: #80d5f0;
+  --mieweb-primary-300: #4dc4ea;
+  --mieweb-primary-400: #27aae1;
+  --mieweb-primary-500: #27aae1;
+  --mieweb-primary-600: #1f98ca;
+  --mieweb-primary-700: #1786b3;
+  --mieweb-primary-800: #0f749c;
+  --mieweb-primary-900: #086285;
+  --mieweb-primary-950: #00506e;
+
+  /* Secondary Color Scale (Indigo) */
+  --mieweb-secondary-50: #eef2ff;
+  --mieweb-secondary-100: #e0e7ff;
+  --mieweb-secondary-200: #c7d2fe;
+  --mieweb-secondary-300: #a5b4fc;
+  --mieweb-secondary-400: #818cf8;
+  --mieweb-secondary-500: #6366f1;
+  --mieweb-secondary-600: #4f46e5;
+  --mieweb-secondary-700: #4338ca;
+  --mieweb-secondary-800: #3730a3;
+  --mieweb-secondary-900: #312e81;
+  --mieweb-secondary-950: #1e1b4b;
+  --mieweb-secondary-foreground: #ffffff;
+
+  /* Neutral / Gray Scale */
+  --mieweb-neutral-50: #fafafa;
+  --mieweb-neutral-100: #f5f5f5;
+  --mieweb-neutral-200: #e5e5e5;
+  --mieweb-neutral-300: #d4d4d4;
+  --mieweb-neutral-400: #a3a3a3;
+  --mieweb-neutral-500: #737373;
+  --mieweb-neutral-600: #525252;
+  --mieweb-neutral-700: #404040;
+  --mieweb-neutral-800: #262626;
+  --mieweb-neutral-900: #171717;
+  --mieweb-neutral-950: #0a0a0a;
+
+  /* Destructive / Error Scale (Red) */
+  --mieweb-destructive-50: #fef2f2;
+  --mieweb-destructive-100: #fee2e2;
+  --mieweb-destructive-200: #fecaca;
+  --mieweb-destructive-300: #fca5a5;
+  --mieweb-destructive-400: #f87171;
+  --mieweb-destructive-500: #ef4444;
+  --mieweb-destructive-600: #dc2626;
+  --mieweb-destructive-700: #b91c1c;
+  --mieweb-destructive-800: #991b1b;
+  --mieweb-destructive-900: #7f1d1d;
+  --mieweb-destructive-950: #450a0a;
+  --mieweb-destructive-foreground: #ffffff;
+
+  /* Success Scale (Green) */
+  --mieweb-success-50: #f0fdf4;
+  --mieweb-success-100: #dcfce7;
+  --mieweb-success-200: #bbf7d0;
+  --mieweb-success-300: #86efac;
+  --mieweb-success-400: #4ade80;
+  --mieweb-success-500: #22c55e;
+  --mieweb-success-600: #16a34a;
+  --mieweb-success-700: #15803d;
+  --mieweb-success-800: #166534;
+  --mieweb-success-900: #14532d;
+  --mieweb-success-950: #052e16;
+  --mieweb-success-foreground: #ffffff;
+
+  /* Warning Scale (Amber) */
+  --mieweb-warning-50: #fffbeb;
+  --mieweb-warning-100: #fef3c7;
+  --mieweb-warning-200: #fde68a;
+  --mieweb-warning-300: #fcd34d;
+  --mieweb-warning-400: #fbbf24;
+  --mieweb-warning-500: #f59e0b;
+  --mieweb-warning-600: #d97706;
+  --mieweb-warning-700: #b45309;
+  --mieweb-warning-800: #92400e;
+  --mieweb-warning-900: #78350f;
+  --mieweb-warning-950: #451a03;
+  --mieweb-warning-foreground: #ffffff;
+
+  /* Info Scale (Sky Blue) */
+  --mieweb-info-50: #f0f9ff;
+  --mieweb-info-100: #e0f2fe;
+  --mieweb-info-200: #bae6fd;
+  --mieweb-info-300: #7dd3fc;
+  --mieweb-info-400: #38bdf8;
+  --mieweb-info-500: #0ea5e9;
+  --mieweb-info-600: #0284c7;
+  --mieweb-info-700: #0369a1;
+  --mieweb-info-800: #075985;
+  --mieweb-info-900: #0c4a6e;
+  --mieweb-info-950: #082f49;
+  --mieweb-info-foreground: #ffffff;
+
+  /* Chart / Data Visualization */
+  --mieweb-chart-1: #27aae1;
+  --mieweb-chart-2: #22c55e;
+  --mieweb-chart-3: #f59e0b;
+  --mieweb-chart-4: #ef4444;
+  --mieweb-chart-5: #6366f1;
+
+  /* Layout Semantic Colors */
+  --mieweb-background: #ffffff;
+  --mieweb-foreground: #171717;
+  --mieweb-card: #ffffff;
+  --mieweb-card-foreground: #171717;
+  --mieweb-muted: #f5f5f5;
+  --mieweb-muted-foreground: #737373;
+  --mieweb-border: #e5e7eb;
+  --mieweb-input: #e5e7eb;
+  --mieweb-ring: #27aae1;
+
+  /* Typography */
+  --mieweb-font-sans: 'Nunito', ui-sans-serif, system-ui, sans-serif;
+  --mieweb-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+/* ── Dark Mode ───────────────────────────────────────────────────────── */
+
+[data-theme='dark'],
+.dark {
+  --mieweb-background: #171717;
+  --mieweb-foreground: #fafafa;
+  --mieweb-card: #262626;
+  --mieweb-card-foreground: #fafafa;
+  --mieweb-muted: #404040;
+  --mieweb-muted-foreground: #a1a1aa;
+  --mieweb-border: #404040;
+  --mieweb-input: #404040;
+  --mieweb-ring: #27aae1;
+  --mieweb-destructive-foreground: #fafafa;
+  --mieweb-success-foreground: #fafafa;
+  --mieweb-warning-foreground: #fafafa;
+  --mieweb-info-foreground: #fafafa;
+  --mieweb-secondary-foreground: #fafafa;
+  --mieweb-chart-1: #38bdf8;
+  --mieweb-chart-2: #4ade80;
+  --mieweb-chart-3: #fbbf24;
+  --mieweb-chart-4: #f87171;
+  --mieweb-chart-5: #818cf8;
+}
+
+/* ── Base Typography ─────────────────────────────────────────────────── */
+
+body {
+  font-family: var(--mieweb-font-sans);
+  background-color: var(--mieweb-background);
+  color: var(--mieweb-foreground);
+  -webkit-font-smoothing: antialiased;
+}
+
+code,
+pre,
+kbd {
+  font-family: var(--mieweb-font-mono);
+}
+
+:focus-visible {
+  outline: 2px solid var(--mieweb-ring);
+  outline-offset: 2px;
+}