@quinkit/ui 0.1.0

package/src/styles/themes/healthcare-clinical.css

@@ -0,0 +1,64 @@
+/* FILE: packages/ui/src/styles/themes/healthcare-clinical.css */
+
+[data-theme="healthcare-clinical"] {
+  --ui-font-heading: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
+  --ui-font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
+  --ui-font-mono: "IBM Plex Mono", ui-monospace, monospace;
+  --ui-tracking-heading: -0.005em;
+  --ui-tracking-body: 0em;
+  --ui-leading-heading: 1.2;
+  --ui-leading-body: 1.6;
+  --ui-weight-heading: 600;
+  --ui-radius-sm: 0.125rem;
+  --ui-radius-md: 0.25rem;
+  --ui-radius-lg: 0.375rem;
+  --ui-radius-xl: 0.5rem;
+  --ui-color-background: oklch(0.994 0.004 210);
+  --ui-color-foreground: oklch(0.22 0.02 220);
+  --ui-color-card: oklch(1 0 0);
+  --ui-color-card-foreground: oklch(0.22 0.02 220);
+  --ui-color-popover: oklch(1 0 0);
+  --ui-color-popover-foreground: oklch(0.22 0.02 220);
+  --ui-color-primary: oklch(0.536 0.089 205);
+  --ui-color-primary-foreground: oklch(0.985 0 0);
+  --ui-color-secondary: oklch(0.962 0.006 200);
+  --ui-color-secondary-foreground: oklch(0.29 0.018 200);
+  --ui-color-accent: oklch(0.95 0.03 205);
+  --ui-color-accent-foreground: oklch(0.3 0.07 205);
+  --ui-color-muted: oklch(0.968 0.006 200);
+  --ui-color-muted-foreground: oklch(0.5 0.024 200);
+  --ui-color-border: oklch(0.916 0.006 200);
+  --ui-color-input: oklch(0.916 0.006 200);
+  --ui-color-ring: oklch(0.536 0.089 205);
+  --ui-color-chart-1: oklch(0.6 0.15 205);
+  --ui-color-chart-2: oklch(0.62 0.15 245);
+  --ui-color-chart-3: oklch(0.62 0.15 300);
+  --ui-color-chart-4: oklch(0.62 0.15 355);
+  --ui-color-chart-5: oklch(0.62 0.15 60);
+}
+
+.dark[data-theme="healthcare-clinical"],
+[data-theme="healthcare-clinical"].dark {
+  --ui-color-background: oklch(0.16 0.01 220);
+  --ui-color-foreground: oklch(0.97 0.004 210);
+  --ui-color-card: oklch(0.195 0.012 220);
+  --ui-color-card-foreground: oklch(0.97 0.004 210);
+  --ui-color-popover: oklch(0.195 0.012 220);
+  --ui-color-popover-foreground: oklch(0.97 0.004 210);
+  --ui-color-primary: oklch(0.756 0.089 205);
+  --ui-color-primary-foreground: oklch(0.2 0.02 205);
+  --ui-color-secondary: oklch(0.274 0.01 200);
+  --ui-color-secondary-foreground: oklch(0.972 0.01 200);
+  --ui-color-accent: oklch(0.3 0.05 205);
+  --ui-color-accent-foreground: oklch(0.92 0.04 205);
+  --ui-color-muted: oklch(0.274 0.01 200);
+  --ui-color-muted-foreground: oklch(0.712 0.016 200);
+  --ui-color-border: oklch(0.305 0.01 200);
+  --ui-color-input: oklch(0.33 0.01 200);
+  --ui-color-ring: oklch(0.756 0.089 205);
+  --ui-color-chart-1: oklch(0.6 0.15 205);
+  --ui-color-chart-2: oklch(0.72 0.14 245);
+  --ui-color-chart-3: oklch(0.72 0.14 300);
+  --ui-color-chart-4: oklch(0.72 0.14 355);
+  --ui-color-chart-5: oklch(0.72 0.14 60);
+}

package/src/styles/themes/healthcare-urgent.css

@@ -0,0 +1,64 @@
+/* FILE: packages/ui/src/styles/themes/healthcare-urgent.css */
+
+[data-theme="healthcare-urgent"] {
+  --ui-font-heading: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --ui-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --ui-font-mono: "IBM Plex Mono", ui-monospace, monospace;
+  --ui-tracking-heading: -0.01em;
+  --ui-tracking-body: 0em;
+  --ui-leading-heading: 1.15;
+  --ui-leading-body: 1.5;
+  --ui-weight-heading: 700;
+  --ui-radius-sm: 0rem;
+  --ui-radius-md: 0rem;
+  --ui-radius-lg: 0.125rem;
+  --ui-radius-xl: 0.25rem;
+  --ui-color-background: oklch(0.994 0.003 250);
+  --ui-color-foreground: oklch(0.2 0.02 250);
+  --ui-color-card: oklch(1 0 0);
+  --ui-color-card-foreground: oklch(0.2 0.02 250);
+  --ui-color-popover: oklch(1 0 0);
+  --ui-color-popover-foreground: oklch(0.2 0.02 250);
+  --ui-color-primary: oklch(0.488 0.217 264);
+  --ui-color-primary-foreground: oklch(0.985 0 0);
+  --ui-color-secondary: oklch(0.962 0.006 250);
+  --ui-color-secondary-foreground: oklch(0.29 0.018 250);
+  --ui-color-accent: oklch(0.577 0.215 27);
+  --ui-color-accent-foreground: oklch(0.985 0 0);
+  --ui-color-muted: oklch(0.968 0.006 250);
+  --ui-color-muted-foreground: oklch(0.5 0.024 250);
+  --ui-color-border: oklch(0.916 0.006 250);
+  --ui-color-input: oklch(0.916 0.006 250);
+  --ui-color-ring: oklch(0.488 0.217 264);
+  --ui-color-chart-1: oklch(0.55 0.2 27);
+  --ui-color-chart-2: oklch(0.72 0.15 70);
+  --ui-color-chart-3: oklch(0.55 0.16 250);
+  --ui-color-chart-4: oklch(0.6 0.13 200);
+  --ui-color-chart-5: oklch(0.55 0.14 150);
+}
+
+.dark[data-theme="healthcare-urgent"],
+[data-theme="healthcare-urgent"].dark {
+  --ui-color-background: oklch(0.16 0.012 250);
+  --ui-color-foreground: oklch(0.97 0.005 250);
+  --ui-color-card: oklch(0.195 0.014 250);
+  --ui-color-card-foreground: oklch(0.97 0.005 250);
+  --ui-color-popover: oklch(0.195 0.014 250);
+  --ui-color-popover-foreground: oklch(0.97 0.005 250);
+  --ui-color-primary: oklch(0.708 0.2 264);
+  --ui-color-primary-foreground: oklch(0.2 0.02 264);
+  --ui-color-secondary: oklch(0.274 0.01 250);
+  --ui-color-secondary-foreground: oklch(0.972 0.01 250);
+  --ui-color-accent: oklch(0.797 0.2 27);
+  --ui-color-accent-foreground: oklch(0.2 0.02 27);
+  --ui-color-muted: oklch(0.274 0.01 250);
+  --ui-color-muted-foreground: oklch(0.712 0.016 250);
+  --ui-color-border: oklch(0.305 0.01 250);
+  --ui-color-input: oklch(0.33 0.01 250);
+  --ui-color-ring: oklch(0.708 0.2 264);
+  --ui-color-chart-1: oklch(0.68 0.19 27);
+  --ui-color-chart-2: oklch(0.8 0.14 70);
+  --ui-color-chart-3: oklch(0.7 0.15 250);
+  --ui-color-chart-4: oklch(0.72 0.12 200);
+  --ui-color-chart-5: oklch(0.72 0.13 150);
+}

package/src/styles/themes/healthcare-wellness.css

@@ -0,0 +1,64 @@
+/* FILE: packages/ui/src/styles/themes/healthcare-wellness.css */
+
+[data-theme="healthcare-wellness"] {
+  --ui-font-heading: "Nunito", ui-sans-serif, system-ui, sans-serif;
+  --ui-font-body: "Nunito", ui-sans-serif, system-ui, sans-serif;
+  --ui-font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", monospace;
+  --ui-tracking-heading: -0.005em;
+  --ui-tracking-body: 0em;
+  --ui-leading-heading: 1.2;
+  --ui-leading-body: 1.65;
+  --ui-weight-heading: 700;
+  --ui-radius-sm: 0.5rem;
+  --ui-radius-md: 0.75rem;
+  --ui-radius-lg: 1rem;
+  --ui-radius-xl: 1.5rem;
+  --ui-color-background: oklch(0.992 0.008 150);
+  --ui-color-foreground: oklch(0.26 0.02 150);
+  --ui-color-card: oklch(1 0 0);
+  --ui-color-card-foreground: oklch(0.26 0.02 150);
+  --ui-color-popover: oklch(1 0 0);
+  --ui-color-popover-foreground: oklch(0.26 0.02 150);
+  --ui-color-primary: oklch(0.646 0.086 157);
+  --ui-color-primary-foreground: oklch(0.2 0.02 157);
+  --ui-color-secondary: oklch(0.962 0.006 150);
+  --ui-color-secondary-foreground: oklch(0.29 0.018 150);
+  --ui-color-accent: oklch(0.773 0.129 76);
+  --ui-color-accent-foreground: oklch(0.2 0.02 76);
+  --ui-color-muted: oklch(0.968 0.006 150);
+  --ui-color-muted-foreground: oklch(0.5 0.024 150);
+  --ui-color-border: oklch(0.916 0.006 150);
+  --ui-color-input: oklch(0.916 0.006 150);
+  --ui-color-ring: oklch(0.646 0.086 157);
+  --ui-color-chart-1: oklch(0.6 0.15 157);
+  --ui-color-chart-2: oklch(0.62 0.15 197);
+  --ui-color-chart-3: oklch(0.62 0.15 252);
+  --ui-color-chart-4: oklch(0.62 0.15 307);
+  --ui-color-chart-5: oklch(0.62 0.15 12);
+}
+
+.dark[data-theme="healthcare-wellness"],
+[data-theme="healthcare-wellness"].dark {
+  --ui-color-background: oklch(0.17 0.012 150);
+  --ui-color-foreground: oklch(0.96 0.006 150);
+  --ui-color-card: oklch(0.205 0.014 150);
+  --ui-color-card-foreground: oklch(0.96 0.006 150);
+  --ui-color-popover: oklch(0.205 0.014 150);
+  --ui-color-popover-foreground: oklch(0.96 0.006 150);
+  --ui-color-primary: oklch(0.68 0.086 157);
+  --ui-color-primary-foreground: oklch(0.2 0.02 157);
+  --ui-color-secondary: oklch(0.274 0.01 150);
+  --ui-color-secondary-foreground: oklch(0.972 0.01 150);
+  --ui-color-accent: oklch(0.773 0.129 76);
+  --ui-color-accent-foreground: oklch(0.2 0.02 76);
+  --ui-color-muted: oklch(0.274 0.01 150);
+  --ui-color-muted-foreground: oklch(0.712 0.016 150);
+  --ui-color-border: oklch(0.305 0.01 150);
+  --ui-color-input: oklch(0.33 0.01 150);
+  --ui-color-ring: oklch(0.68 0.086 157);
+  --ui-color-chart-1: oklch(0.6 0.15 157);
+  --ui-color-chart-2: oklch(0.72 0.14 197);
+  --ui-color-chart-3: oklch(0.72 0.14 252);
+  --ui-color-chart-4: oklch(0.72 0.14 307);
+  --ui-color-chart-5: oklch(0.72 0.14 12);
+}

package/src/styles/themes/healthcare.css

@@ -0,0 +1,46 @@
+/* healthcare.css — Clinical Trust kit theme.
+ * Activated with: <html data-theme="healthcare">
+ */
+
+[data-theme="healthcare"] {
+  --ui-color-primary: oklch(0.32 0.06 175);
+  --ui-color-primary-foreground: oklch(0.99 0 0);
+  --ui-color-secondary: oklch(0.965 0.01 175);
+  --ui-color-secondary-foreground: oklch(0.25 0.03 175);
+  --ui-color-accent: oklch(0.94 0.02 175);
+  --ui-color-accent-foreground: oklch(0.5 0.12 175);
+  --ui-color-muted: oklch(0.97 0.008 175);
+  --ui-color-muted-foreground: oklch(0.52 0.025 175);
+  --ui-color-border: oklch(0.91 0.01 175);
+  --ui-color-input: oklch(0.91 0.01 175);
+  --ui-color-ring: oklch(0.5 0.12 175);
+  --ui-color-chart-1: oklch(0.55 0.1 175);
+  --ui-color-chart-2: oklch(0.58 0.11 235);
+  --ui-color-chart-3: oklch(0.66 0.1 155);
+  --ui-color-chart-4: oklch(0.7 0.1 90);
+  --ui-color-chart-5: oklch(0.6 0.12 30);
+  --ui-radius-sm: 0.625rem;
+  --ui-radius-md: 0.75rem;
+  --ui-radius-lg: 1rem;
+  --ui-radius-xl: 1.5rem;
+}
+
+.dark[data-theme="healthcare"],
+[data-theme="healthcare"].dark {
+  --ui-color-primary: oklch(0.88 0.04 175);
+  --ui-color-primary-foreground: oklch(0.16 0.03 175);
+  --ui-color-secondary: oklch(0.24 0.015 175);
+  --ui-color-secondary-foreground: oklch(0.98 0.01 175);
+  --ui-color-accent: oklch(0.28 0.02 175);
+  --ui-color-accent-foreground: oklch(0.68 0.1 175);
+  --ui-color-muted: oklch(0.24 0.015 175);
+  --ui-color-muted-foreground: oklch(0.7 0.02 175);
+  --ui-color-border: oklch(0.28 0.015 175);
+  --ui-color-input: oklch(0.3 0.015 175);
+  --ui-color-ring: oklch(0.68 0.1 175);
+  --ui-color-chart-1: oklch(0.72 0.1 175);
+  --ui-color-chart-2: oklch(0.7 0.11 235);
+  --ui-color-chart-3: oklch(0.74 0.1 155);
+  --ui-color-chart-4: oklch(0.78 0.1 90);
+  --ui-color-chart-5: oklch(0.7 0.12 30);
+}

package/src/styles/tokens/charts.css

@@ -0,0 +1,26 @@
+/* charts.css — default categorical data palette + dark overrides.
+ * Palettes in palettes.css that ship their own chart ramp (analytics-cyan,
+ * fintech-navy, finance-gold, emerald-wealth, medical-teal, railway-violet)
+ * override these; every other palette falls back to this harmonious default.
+ */
+
+:root {
+  --ui-color-chart-1: oklch(0.62 0.19 256);
+  /* blue   */
+  --ui-color-chart-2: oklch(0.66 0.15 165);
+  /* green  */
+  --ui-color-chart-3: oklch(0.72 0.15 75);
+  /* amber  */
+  --ui-color-chart-4: oklch(0.6 0.2 300);
+  /* violet */
+  --ui-color-chart-5: oklch(0.62 0.2 25);
+  /* red    */
+}
+
+.dark {
+  --ui-color-chart-1: oklch(0.7 0.17 256);
+  --ui-color-chart-2: oklch(0.74 0.14 165);
+  --ui-color-chart-3: oklch(0.8 0.14 75);
+  --ui-color-chart-4: oklch(0.7 0.18 300);
+  --ui-color-chart-5: oklch(0.7 0.18 25);
+}

package/src/styles/tokens/dark.css

@@ -0,0 +1,36 @@
+/* dark.css — DARK defaults. NEUTRAL by design: no hardcoded blue primary.
+ * Backgrounds avoid pure black (except where a palette deliberately wants it).
+ * A data-palette overrides primary/accent/etc; without one, dark mode is a
+ * clean monochrome slate.
+ */
+
+.dark {
+  --ui-color-background: oklch(0.145 0.01 265);
+  --ui-color-foreground: oklch(0.985 0.002 265);
+
+  --ui-color-card: oklch(0.175 0.012 265);
+  --ui-color-card-foreground: oklch(0.985 0.002 265);
+  --ui-color-popover: oklch(0.175 0.012 265);
+  --ui-color-popover-foreground: oklch(0.985 0.002 265);
+
+  /* neutral primary (light-on-dark) — palettes override this */
+  --ui-color-primary: oklch(0.922 0.006 265);
+  --ui-color-primary-foreground: oklch(0.205 0.012 265);
+  --ui-color-secondary: oklch(0.274 0.01 265);
+  --ui-color-secondary-foreground: oklch(0.985 0.002 265);
+  --ui-color-accent: oklch(0.274 0.01 265);
+  --ui-color-accent-foreground: oklch(0.985 0.002 265);
+  --ui-color-muted: oklch(0.274 0.01 265);
+  --ui-color-muted-foreground: oklch(0.712 0.014 265);
+
+  --ui-color-destructive: oklch(0.62 0.2 25);
+  --ui-color-destructive-foreground: oklch(0.985 0.002 265);
+  --ui-color-success: oklch(0.7 0.14 155);
+  --ui-color-success-foreground: oklch(0.16 0.03 155);
+  --ui-color-warning: oklch(0.8 0.14 75);
+  --ui-color-warning-foreground: oklch(0.22 0.06 75);
+
+  --ui-color-border: oklch(0.305 0.01 265);
+  --ui-color-input: oklch(0.33 0.01 265);
+  --ui-color-ring: oklch(0.556 0.02 265);
+}