@quinkit/ui 0.1.0

package/src/styles/themes/ecommerce-minimal.css

@@ -0,0 +1,64 @@
+/* FILE: packages/ui/src/styles/themes/ecommerce-minimal.css */
+
+[data-theme="ecommerce-minimal"] {
+  --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: "Geist Mono", ui-monospace, "JetBrains Mono", monospace;
+  --ui-tracking-heading: -0.01em;
+  --ui-tracking-body: 0em;
+  --ui-leading-heading: 1.15;
+  --ui-leading-body: 1.6;
+  --ui-weight-heading: 600;
+  --ui-radius-sm: 0.25rem;
+  --ui-radius-md: 0.375rem;
+  --ui-radius-lg: 0.5rem;
+  --ui-radius-xl: 0.75rem;
+  --ui-color-background: oklch(0.996 0 0);
+  --ui-color-foreground: oklch(0.16 0 0);
+  --ui-color-card: oklch(1 0 0);
+  --ui-color-card-foreground: oklch(0.16 0 0);
+  --ui-color-popover: oklch(1 0 0);
+  --ui-color-popover-foreground: oklch(0.16 0 0);
+  --ui-color-primary: oklch(0.3 0 0);
+  --ui-color-primary-foreground: oklch(0.985 0 0);
+  --ui-color-secondary: oklch(0.962 0 0);
+  --ui-color-secondary-foreground: oklch(0.29 0 0);
+  --ui-color-accent: oklch(0.95 0.03 90);
+  --ui-color-accent-foreground: oklch(0.3 0.07 90);
+  --ui-color-muted: oklch(0.968 0 0);
+  --ui-color-muted-foreground: oklch(0.5 0 0);
+  --ui-color-border: oklch(0.916 0 0);
+  --ui-color-input: oklch(0.916 0 0);
+  --ui-color-ring: oklch(0.3 0 0);
+  --ui-color-chart-1: oklch(0.6 0.15 90);
+  --ui-color-chart-2: oklch(0.62 0.15 130);
+  --ui-color-chart-3: oklch(0.62 0.15 185);
+  --ui-color-chart-4: oklch(0.62 0.15 240);
+  --ui-color-chart-5: oklch(0.62 0.15 305);
+}
+
+.dark[data-theme="ecommerce-minimal"],
+[data-theme="ecommerce-minimal"].dark {
+  --ui-color-background: oklch(0.155 0 0);
+  --ui-color-foreground: oklch(0.97 0 0);
+  --ui-color-card: oklch(0.19 0 0);
+  --ui-color-card-foreground: oklch(0.97 0 0);
+  --ui-color-popover: oklch(0.19 0 0);
+  --ui-color-popover-foreground: oklch(0.97 0 0);
+  --ui-color-primary: oklch(0.68 0 0);
+  --ui-color-primary-foreground: oklch(0.2 0.02 90);
+  --ui-color-secondary: oklch(0.274 0 0);
+  --ui-color-secondary-foreground: oklch(0.972 0 0);
+  --ui-color-accent: oklch(0.3 0.05 90);
+  --ui-color-accent-foreground: oklch(0.92 0.04 90);
+  --ui-color-muted: oklch(0.274 0 0);
+  --ui-color-muted-foreground: oklch(0.712 0 0);
+  --ui-color-border: oklch(0.305 0 0);
+  --ui-color-input: oklch(0.33 0 0);
+  --ui-color-ring: oklch(0.68 0 0);
+  --ui-color-chart-1: oklch(0.6 0.15 90);
+  --ui-color-chart-2: oklch(0.72 0.14 130);
+  --ui-color-chart-3: oklch(0.72 0.14 185);
+  --ui-color-chart-4: oklch(0.72 0.14 240);
+  --ui-color-chart-5: oklch(0.72 0.14 305);
+}

package/src/styles/themes/ecommerce-playful.css

@@ -0,0 +1,64 @@
+/* FILE: packages/ui/src/styles/themes/ecommerce-playful.css */
+
+[data-theme="ecommerce-playful"] {
+  --ui-font-heading: "DM Sans", ui-sans-serif, system-ui, sans-serif;
+  --ui-font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
+  --ui-font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", monospace;
+  --ui-tracking-heading: -0.01em;
+  --ui-tracking-body: 0em;
+  --ui-leading-heading: 1.12;
+  --ui-leading-body: 1.6;
+  --ui-weight-heading: 700;
+  --ui-radius-sm: 0.625rem;
+  --ui-radius-md: 1rem;
+  --ui-radius-lg: 1.25rem;
+  --ui-radius-xl: 1.75rem;
+  --ui-color-background: oklch(0.988 0.012 40);
+  --ui-color-foreground: oklch(0.26 0.02 40);
+  --ui-color-card: oklch(1 0 0);
+  --ui-color-card-foreground: oklch(0.26 0.02 40);
+  --ui-color-popover: oklch(1 0 0);
+  --ui-color-popover-foreground: oklch(0.26 0.02 40);
+  --ui-color-primary: oklch(0.707 0.187 34);
+  --ui-color-primary-foreground: oklch(0.2 0.02 34);
+  --ui-color-secondary: oklch(0.962 0.006 40);
+  --ui-color-secondary-foreground: oklch(0.29 0.018 40);
+  --ui-color-accent: oklch(0.82 0.148 81);
+  --ui-color-accent-foreground: oklch(0.2 0.02 81);
+  --ui-color-muted: oklch(0.968 0.006 40);
+  --ui-color-muted-foreground: oklch(0.5 0.024 40);
+  --ui-color-border: oklch(0.916 0.006 40);
+  --ui-color-input: oklch(0.916 0.006 40);
+  --ui-color-ring: oklch(0.707 0.187 34);
+  --ui-color-chart-1: oklch(0.6 0.15 34);
+  --ui-color-chart-2: oklch(0.62 0.15 74);
+  --ui-color-chart-3: oklch(0.62 0.15 129);
+  --ui-color-chart-4: oklch(0.62 0.15 184);
+  --ui-color-chart-5: oklch(0.62 0.15 249);
+}
+
+.dark[data-theme="ecommerce-playful"],
+[data-theme="ecommerce-playful"].dark {
+  --ui-color-background: oklch(0.18 0.014 40);
+  --ui-color-foreground: oklch(0.96 0.006 40);
+  --ui-color-card: oklch(0.215 0.016 40);
+  --ui-color-card-foreground: oklch(0.96 0.006 40);
+  --ui-color-popover: oklch(0.215 0.016 40);
+  --ui-color-popover-foreground: oklch(0.96 0.006 40);
+  --ui-color-primary: oklch(0.707 0.187 34);
+  --ui-color-primary-foreground: oklch(0.2 0.02 34);
+  --ui-color-secondary: oklch(0.274 0.01 40);
+  --ui-color-secondary-foreground: oklch(0.972 0.01 40);
+  --ui-color-accent: oklch(0.82 0.148 81);
+  --ui-color-accent-foreground: oklch(0.2 0.02 81);
+  --ui-color-muted: oklch(0.274 0.01 40);
+  --ui-color-muted-foreground: oklch(0.712 0.016 40);
+  --ui-color-border: oklch(0.305 0.01 40);
+  --ui-color-input: oklch(0.33 0.01 40);
+  --ui-color-ring: oklch(0.707 0.187 34);
+  --ui-color-chart-1: oklch(0.6 0.15 34);
+  --ui-color-chart-2: oklch(0.72 0.14 74);
+  --ui-color-chart-3: oklch(0.72 0.14 129);
+  --ui-color-chart-4: oklch(0.72 0.14 184);
+  --ui-color-chart-5: oklch(0.72 0.14 249);
+}

package/src/styles/themes/ecommerce.css

@@ -0,0 +1,36 @@
+/* ecommerce.css — Conversion Energy kit theme.
+ * Activated with: <html data-theme="ecommerce">
+ */
+
+[data-theme="ecommerce"] {
+  --ui-color-primary: oklch(0.18 0.015 30);
+  --ui-color-primary-foreground: oklch(0.99 0 0);
+  --ui-color-secondary: oklch(0.965 0.01 65);
+  --ui-color-secondary-foreground: oklch(0.25 0.02 45);
+  --ui-color-accent: oklch(0.94 0.02 32);
+  --ui-color-accent-foreground: oklch(0.6 0.18 32);
+  --ui-color-muted: oklch(0.97 0.008 65);
+  --ui-color-muted-foreground: oklch(0.5 0.02 45);
+  --ui-color-border: oklch(0.9 0.01 45);
+  --ui-color-input: oklch(0.9 0.01 45);
+  --ui-color-ring: oklch(0.6 0.18 32);
+  --ui-radius-sm: 0.5rem;
+  --ui-radius-md: 0.625rem;
+  --ui-radius-lg: 0.875rem;
+  --ui-radius-xl: 1.25rem;
+}
+
+.dark[data-theme="ecommerce"],
+[data-theme="ecommerce"].dark {
+  --ui-color-primary: oklch(0.94 0.015 32);
+  --ui-color-primary-foreground: oklch(0.16 0.015 32);
+  --ui-color-secondary: oklch(0.24 0.015 32);
+  --ui-color-secondary-foreground: oklch(0.98 0.01 32);
+  --ui-color-accent: oklch(0.28 0.02 32);
+  --ui-color-accent-foreground: oklch(0.7 0.16 32);
+  --ui-color-muted: oklch(0.24 0.015 32);
+  --ui-color-muted-foreground: oklch(0.7 0.02 32);
+  --ui-color-border: oklch(0.28 0.015 32);
+  --ui-color-input: oklch(0.3 0.015 32);
+  --ui-color-ring: oklch(0.7 0.16 32);
+}

package/src/styles/themes/edtech-campus.css

@@ -0,0 +1,64 @@
+/* FILE: packages/ui/src/styles/themes/edtech-campus.css */
+
+[data-theme="edtech-campus"] {
+  --ui-font-heading: "Source Serif 4", ui-serif, Georgia, serif;
+  --ui-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, 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: 600;
+  --ui-radius-sm: 0.25rem;
+  --ui-radius-md: 0.375rem;
+  --ui-radius-lg: 0.5rem;
+  --ui-radius-xl: 0.75rem;
+  --ui-color-background: oklch(0.995 0.003 250);
+  --ui-color-foreground: oklch(0.22 0.02 250);
+  --ui-color-card: oklch(1 0 0);
+  --ui-color-card-foreground: oklch(0.22 0.02 250);
+  --ui-color-popover: oklch(1 0 0);
+  --ui-color-popover-foreground: oklch(0.22 0.02 250);
+  --ui-color-primary: oklch(0.468 0.184 263);
+  --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.95 0.03 263);
+  --ui-color-accent-foreground: oklch(0.3 0.07 263);
+  --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.468 0.184 263);
+  --ui-color-chart-1: oklch(0.6 0.15 263);
+  --ui-color-chart-2: oklch(0.62 0.15 303);
+  --ui-color-chart-3: oklch(0.62 0.15 358);
+  --ui-color-chart-4: oklch(0.62 0.15 53);
+  --ui-color-chart-5: oklch(0.62 0.15 118);
+}
+
+.dark[data-theme="edtech-campus"],
+[data-theme="edtech-campus"].dark {
+  --ui-color-background: oklch(0.17 0.014 250);
+  --ui-color-foreground: oklch(0.96 0.006 250);
+  --ui-color-card: oklch(0.205 0.016 250);
+  --ui-color-card-foreground: oklch(0.96 0.006 250);
+  --ui-color-popover: oklch(0.205 0.016 250);
+  --ui-color-popover-foreground: oklch(0.96 0.006 250);
+  --ui-color-primary: oklch(0.688 0.184 263);
+  --ui-color-primary-foreground: oklch(0.2 0.02 263);
+  --ui-color-secondary: oklch(0.274 0.01 250);
+  --ui-color-secondary-foreground: oklch(0.972 0.01 250);
+  --ui-color-accent: oklch(0.3 0.05 263);
+  --ui-color-accent-foreground: oklch(0.92 0.04 263);
+  --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.688 0.184 263);
+  --ui-color-chart-1: oklch(0.6 0.15 263);
+  --ui-color-chart-2: oklch(0.72 0.14 303);
+  --ui-color-chart-3: oklch(0.72 0.14 358);
+  --ui-color-chart-4: oklch(0.72 0.14 53);
+  --ui-color-chart-5: oklch(0.72 0.14 118);
+}

package/src/styles/themes/edtech-kids.css

@@ -0,0 +1,64 @@
+/* FILE: packages/ui/src/styles/themes/edtech-kids.css */
+
+[data-theme="edtech-kids"] {
+  --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.01em;
+  --ui-tracking-body: 0em;
+  --ui-leading-heading: 1.12;
+  --ui-leading-body: 1.6;
+  --ui-weight-heading: 800;
+  --ui-radius-sm: 0.75rem;
+  --ui-radius-md: 1.25rem;
+  --ui-radius-lg: 1.5rem;
+  --ui-radius-xl: 2rem;
+  --ui-color-background: oklch(0.992 0.01 250);
+  --ui-color-foreground: oklch(0.26 0.02 250);
+  --ui-color-card: oklch(1 0 0);
+  --ui-color-card-foreground: oklch(0.26 0.02 250);
+  --ui-color-popover: oklch(1 0 0);
+  --ui-color-popover-foreground: oklch(0.26 0.02 250);
+  --ui-color-primary: oklch(0.623 0.188 260);
+  --ui-color-primary-foreground: oklch(0.2 0.02 260);
+  --ui-color-secondary: oklch(0.962 0.006 250);
+  --ui-color-secondary-foreground: oklch(0.29 0.018 250);
+  --ui-color-accent: oklch(0.82 0.148 81);
+  --ui-color-accent-foreground: oklch(0.2 0.02 81);
+  --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.623 0.188 260);
+  --ui-color-chart-1: oklch(0.62 0.19 256);
+  --ui-color-chart-2: oklch(0.68 0.18 25);
+  --ui-color-chart-3: oklch(0.72 0.16 140);
+  --ui-color-chart-4: oklch(0.75 0.15 75);
+  --ui-color-chart-5: oklch(0.6 0.2 300);
+}
+
+.dark[data-theme="edtech-kids"],
+[data-theme="edtech-kids"].dark {
+  --ui-color-background: oklch(0.18 0.016 250);
+  --ui-color-foreground: oklch(0.96 0.008 250);
+  --ui-color-card: oklch(0.215 0.018 250);
+  --ui-color-card-foreground: oklch(0.96 0.008 250);
+  --ui-color-popover: oklch(0.215 0.018 250);
+  --ui-color-popover-foreground: oklch(0.96 0.008 250);
+  --ui-color-primary: oklch(0.68 0.188 260);
+  --ui-color-primary-foreground: oklch(0.2 0.02 260);
+  --ui-color-secondary: oklch(0.274 0.01 250);
+  --ui-color-secondary-foreground: oklch(0.972 0.01 250);
+  --ui-color-accent: oklch(0.82 0.148 81);
+  --ui-color-accent-foreground: oklch(0.2 0.02 81);
+  --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.68 0.188 260);
+  --ui-color-chart-1: oklch(0.7 0.17 256);
+  --ui-color-chart-2: oklch(0.72 0.17 25);
+  --ui-color-chart-3: oklch(0.76 0.15 140);
+  --ui-color-chart-4: oklch(0.82 0.14 75);
+  --ui-color-chart-5: oklch(0.7 0.18 300);
+}

package/src/styles/themes/edtech-professional.css

@@ -0,0 +1,64 @@
+/* FILE: packages/ui/src/styles/themes/edtech-professional.css */
+
+[data-theme="edtech-professional"] {
+  --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: "Geist Mono", ui-monospace, "JetBrains Mono", monospace;
+  --ui-tracking-heading: -0.015em;
+  --ui-tracking-body: 0em;
+  --ui-leading-heading: 1.15;
+  --ui-leading-body: 1.6;
+  --ui-weight-heading: 600;
+  --ui-radius-sm: 0rem;
+  --ui-radius-md: 0rem;
+  --ui-radius-lg: 0.125rem;
+  --ui-radius-xl: 0.25rem;
+  --ui-color-background: oklch(0.995 0.002 250);
+  --ui-color-foreground: oklch(0.2 0.01 250);
+  --ui-color-card: oklch(1 0 0);
+  --ui-color-card-foreground: oklch(0.2 0.01 250);
+  --ui-color-popover: oklch(1 0 0);
+  --ui-color-popover-foreground: oklch(0.2 0.01 250);
+  --ui-color-primary: oklch(0.546 0.215 263);
+  --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.95 0.03 263);
+  --ui-color-accent-foreground: oklch(0.3 0.07 263);
+  --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.546 0.215 263);
+  --ui-color-chart-1: oklch(0.6 0.15 263);
+  --ui-color-chart-2: oklch(0.62 0.15 303);
+  --ui-color-chart-3: oklch(0.62 0.15 358);
+  --ui-color-chart-4: oklch(0.62 0.15 53);
+  --ui-color-chart-5: oklch(0.62 0.15 118);
+}
+
+.dark[data-theme="edtech-professional"],
+[data-theme="edtech-professional"].dark {
+  --ui-color-background: oklch(0.155 0.01 250);
+  --ui-color-foreground: oklch(0.96 0.005 250);
+  --ui-color-card: oklch(0.19 0.012 250);
+  --ui-color-card-foreground: oklch(0.96 0.005 250);
+  --ui-color-popover: oklch(0.19 0.012 250);
+  --ui-color-popover-foreground: oklch(0.96 0.005 250);
+  --ui-color-primary: oklch(0.766 0.2 263);
+  --ui-color-primary-foreground: oklch(0.2 0.02 263);
+  --ui-color-secondary: oklch(0.274 0.01 250);
+  --ui-color-secondary-foreground: oklch(0.972 0.01 250);
+  --ui-color-accent: oklch(0.3 0.05 263);
+  --ui-color-accent-foreground: oklch(0.92 0.04 263);
+  --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.766 0.2 263);
+  --ui-color-chart-1: oklch(0.6 0.15 263);
+  --ui-color-chart-2: oklch(0.72 0.14 303);
+  --ui-color-chart-3: oklch(0.72 0.14 358);
+  --ui-color-chart-4: oklch(0.72 0.14 53);
+  --ui-color-chart-5: oklch(0.72 0.14 118);
+}

package/src/styles/themes/edtech.css

@@ -0,0 +1,36 @@
+/* edtech.css — Playful Progress kit theme.
+ * Activated with: <html data-theme="edtech">
+ */
+
+[data-theme="edtech"] {
+  --ui-color-primary: oklch(0.42 0.16 285);
+  --ui-color-primary-foreground: oklch(0.99 0 0);
+  --ui-color-secondary: oklch(0.965 0.008 285);
+  --ui-color-secondary-foreground: oklch(0.26 0.04 285);
+  --ui-color-accent: oklch(0.94 0.02 285);
+  --ui-color-accent-foreground: oklch(0.76 0.15 75);
+  --ui-color-muted: oklch(0.97 0.008 285);
+  --ui-color-muted-foreground: oklch(0.53 0.03 285);
+  --ui-color-border: oklch(0.91 0.01 285);
+  --ui-color-input: oklch(0.91 0.01 285);
+  --ui-color-ring: oklch(0.76 0.15 75);
+  --ui-radius-sm: 0.75rem;
+  --ui-radius-md: 0.875rem;
+  --ui-radius-lg: 1.25rem;
+  --ui-radius-xl: 1.75rem;
+}
+
+.dark[data-theme="edtech"],
+[data-theme="edtech"].dark {
+  --ui-color-primary: oklch(0.82 0.1 285);
+  --ui-color-primary-foreground: oklch(0.18 0.04 285);
+  --ui-color-secondary: oklch(0.24 0.015 285);
+  --ui-color-secondary-foreground: oklch(0.98 0.01 285);
+  --ui-color-accent: oklch(0.28 0.02 285);
+  --ui-color-accent-foreground: oklch(0.8 0.15 75);
+  --ui-color-muted: oklch(0.24 0.015 285);
+  --ui-color-muted-foreground: oklch(0.7 0.02 285);
+  --ui-color-border: oklch(0.28 0.015 285);
+  --ui-color-input: oklch(0.3 0.015 285);
+  --ui-color-ring: oklch(0.8 0.15 75);
+}

package/src/styles/themes/fintech-crypto.css

@@ -0,0 +1,64 @@
+/* FILE: packages/ui/src/styles/themes/fintech-crypto.css */
+
+[data-theme="fintech-crypto"] {
+  --ui-font-heading: "Geist", ui-sans-serif, system-ui, sans-serif;
+  --ui-font-body: "Geist Mono", ui-monospace, "JetBrains Mono", monospace;
+  --ui-font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", monospace;
+  --ui-tracking-heading: -0.015em;
+  --ui-tracking-body: 0em;
+  --ui-leading-heading: 1.15;
+  --ui-leading-body: 1.55;
+  --ui-weight-heading: 600;
+  --ui-radius-sm: 0.375rem;
+  --ui-radius-md: 0.5rem;
+  --ui-radius-lg: 0.75rem;
+  --ui-radius-xl: 1rem;
+  --ui-color-background: oklch(0.985 0.01 292);
+  --ui-color-foreground: oklch(0.22 0.02 292);
+  --ui-color-card: oklch(1 0 0);
+  --ui-color-card-foreground: oklch(0.22 0.02 292);
+  --ui-color-popover: oklch(1 0 0);
+  --ui-color-popover-foreground: oklch(0.22 0.02 292);
+  --ui-color-primary: oklch(0.541 0.24 293);
+  --ui-color-primary-foreground: oklch(0.985 0 0);
+  --ui-color-secondary: oklch(0.962 0.006 292);
+  --ui-color-secondary-foreground: oklch(0.29 0.018 292);
+  --ui-color-accent: oklch(0.797 0.134 212);
+  --ui-color-accent-foreground: oklch(0.2 0.02 212);
+  --ui-color-muted: oklch(0.968 0.006 292);
+  --ui-color-muted-foreground: oklch(0.5 0.024 292);
+  --ui-color-border: oklch(0.916 0.006 292);
+  --ui-color-input: oklch(0.916 0.006 292);
+  --ui-color-ring: oklch(0.541 0.24 293);
+  --ui-color-chart-1: oklch(0.6 0.15 293);
+  --ui-color-chart-2: oklch(0.62 0.15 333);
+  --ui-color-chart-3: oklch(0.62 0.15 28);
+  --ui-color-chart-4: oklch(0.62 0.15 83);
+  --ui-color-chart-5: oklch(0.62 0.15 148);
+}
+
+.dark[data-theme="fintech-crypto"],
+[data-theme="fintech-crypto"].dark {
+  --ui-color-background: oklch(0.15 0.018 292);
+  --ui-color-foreground: oklch(0.96 0.008 292);
+  --ui-color-card: oklch(0.185 0.02 292);
+  --ui-color-card-foreground: oklch(0.96 0.008 292);
+  --ui-color-popover: oklch(0.185 0.02 292);
+  --ui-color-popover-foreground: oklch(0.96 0.008 292);
+  --ui-color-primary: oklch(0.761 0.2 293);
+  --ui-color-primary-foreground: oklch(0.2 0.02 293);
+  --ui-color-secondary: oklch(0.274 0.01 292);
+  --ui-color-secondary-foreground: oklch(0.972 0.01 292);
+  --ui-color-accent: oklch(0.797 0.134 212);
+  --ui-color-accent-foreground: oklch(0.2 0.02 212);
+  --ui-color-muted: oklch(0.274 0.01 292);
+  --ui-color-muted-foreground: oklch(0.712 0.016 292);
+  --ui-color-border: oklch(0.305 0.01 292);
+  --ui-color-input: oklch(0.33 0.01 292);
+  --ui-color-ring: oklch(0.761 0.2 293);
+  --ui-color-chart-1: oklch(0.6 0.15 293);
+  --ui-color-chart-2: oklch(0.72 0.14 333);
+  --ui-color-chart-3: oklch(0.72 0.14 28);
+  --ui-color-chart-4: oklch(0.72 0.14 83);
+  --ui-color-chart-5: oklch(0.72 0.14 148);
+}

package/src/styles/themes/fintech-modern.css

@@ -0,0 +1,64 @@
+/* FILE: packages/ui/src/styles/themes/fintech-modern.css */
+
+[data-theme="fintech-modern"] {
+  --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: "Geist Mono", ui-monospace, "JetBrains Mono", monospace;
+  --ui-tracking-heading: -0.01em;
+  --ui-tracking-body: 0em;
+  --ui-leading-heading: 1.15;
+  --ui-leading-body: 1.6;
+  --ui-weight-heading: 600;
+  --ui-radius-sm: 0.375rem;
+  --ui-radius-md: 0.625rem;
+  --ui-radius-lg: 0.875rem;
+  --ui-radius-xl: 1.25rem;
+  --ui-color-background: oklch(0.995 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.554 0.202 262);
+  --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.95 0.03 262);
+  --ui-color-accent-foreground: oklch(0.3 0.07 262);
+  --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.554 0.202 262);
+  --ui-color-chart-1: oklch(0.6 0.15 262);
+  --ui-color-chart-2: oklch(0.62 0.15 302);
+  --ui-color-chart-3: oklch(0.62 0.15 357);
+  --ui-color-chart-4: oklch(0.62 0.15 52);
+  --ui-color-chart-5: oklch(0.62 0.15 117);
+}
+
+.dark[data-theme="fintech-modern"],
+[data-theme="fintech-modern"].dark {
+  --ui-color-background: oklch(0.17 0.016 250);
+  --ui-color-foreground: oklch(0.96 0.006 250);
+  --ui-color-card: oklch(0.205 0.018 250);
+  --ui-color-card-foreground: oklch(0.96 0.006 250);
+  --ui-color-popover: oklch(0.205 0.018 250);
+  --ui-color-popover-foreground: oklch(0.96 0.006 250);
+  --ui-color-primary: oklch(0.794 0.2 262);
+  --ui-color-primary-foreground: oklch(0.2 0.02 262);
+  --ui-color-secondary: oklch(0.274 0.01 250);
+  --ui-color-secondary-foreground: oklch(0.972 0.01 250);
+  --ui-color-accent: oklch(0.3 0.05 262);
+  --ui-color-accent-foreground: oklch(0.92 0.04 262);
+  --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.794 0.2 262);
+  --ui-color-chart-1: oklch(0.6 0.15 262);
+  --ui-color-chart-2: oklch(0.72 0.14 302);
+  --ui-color-chart-3: oklch(0.72 0.14 357);
+  --ui-color-chart-4: oklch(0.72 0.14 52);
+  --ui-color-chart-5: oklch(0.72 0.14 117);
+}

package/src/styles/themes/fintech-wealth.css

@@ -0,0 +1,64 @@
+/* FILE: packages/ui/src/styles/themes/fintech-wealth.css */
+
+[data-theme="fintech-wealth"] {
+  --ui-font-heading: "Playfair Display", ui-serif, Georgia, serif;
+  --ui-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --ui-font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", monospace;
+  --ui-tracking-heading: -0.01em;
+  --ui-tracking-body: 0em;
+  --ui-leading-heading: 1.1;
+  --ui-leading-body: 1.6;
+  --ui-weight-heading: 600;
+  --ui-radius-sm: 0rem;
+  --ui-radius-md: 0rem;
+  --ui-radius-lg: 0.125rem;
+  --ui-radius-xl: 0.25rem;
+  --ui-color-background: oklch(0.992 0.004 155);
+  --ui-color-foreground: oklch(0.22 0.02 155);
+  --ui-color-card: oklch(1 0 0);
+  --ui-color-card-foreground: oklch(0.22 0.02 155);
+  --ui-color-popover: oklch(1 0 0);
+  --ui-color-popover-foreground: oklch(0.22 0.02 155);
+  --ui-color-primary: oklch(0.431 0.085 159);
+  --ui-color-primary-foreground: oklch(0.985 0 0);
+  --ui-color-secondary: oklch(0.962 0.006 155);
+  --ui-color-secondary-foreground: oklch(0.29 0.018 155);
+  --ui-color-accent: oklch(0.728 0.099 82);
+  --ui-color-accent-foreground: oklch(0.2 0.02 82);
+  --ui-color-muted: oklch(0.968 0.006 155);
+  --ui-color-muted-foreground: oklch(0.5 0.024 155);
+  --ui-color-border: oklch(0.916 0.006 155);
+  --ui-color-input: oklch(0.916 0.006 155);
+  --ui-color-ring: oklch(0.431 0.085 159);
+  --ui-color-chart-1: oklch(0.6 0.15 159);
+  --ui-color-chart-2: oklch(0.62 0.15 199);
+  --ui-color-chart-3: oklch(0.62 0.15 254);
+  --ui-color-chart-4: oklch(0.62 0.15 309);
+  --ui-color-chart-5: oklch(0.62 0.15 14);
+}
+
+.dark[data-theme="fintech-wealth"],
+[data-theme="fintech-wealth"].dark {
+  --ui-color-background: oklch(0.15 0.012 155);
+  --ui-color-foreground: oklch(0.96 0.006 155);
+  --ui-color-card: oklch(0.185 0.014 155);
+  --ui-color-card-foreground: oklch(0.96 0.006 155);
+  --ui-color-popover: oklch(0.185 0.014 155);
+  --ui-color-popover-foreground: oklch(0.96 0.006 155);
+  --ui-color-primary: oklch(0.68 0.085 159);
+  --ui-color-primary-foreground: oklch(0.2 0.02 159);
+  --ui-color-secondary: oklch(0.274 0.01 155);
+  --ui-color-secondary-foreground: oklch(0.972 0.01 155);
+  --ui-color-accent: oklch(0.728 0.099 82);
+  --ui-color-accent-foreground: oklch(0.2 0.02 82);
+  --ui-color-muted: oklch(0.274 0.01 155);
+  --ui-color-muted-foreground: oklch(0.712 0.016 155);
+  --ui-color-border: oklch(0.305 0.01 155);
+  --ui-color-input: oklch(0.33 0.01 155);
+  --ui-color-ring: oklch(0.68 0.085 159);
+  --ui-color-chart-1: oklch(0.6 0.15 159);
+  --ui-color-chart-2: oklch(0.72 0.14 199);
+  --ui-color-chart-3: oklch(0.72 0.14 254);
+  --ui-color-chart-4: oklch(0.72 0.14 309);
+  --ui-color-chart-5: oklch(0.72 0.14 14);
+}

package/src/styles/themes/fintech.css

@@ -0,0 +1,46 @@
+/* fintech.css — Wealth Authority kit theme.
+ * Activated with: <html data-theme="fintech">
+ */
+
+[data-theme="fintech"] {
+  --ui-color-primary: oklch(0.25 0.04 140);
+  --ui-color-primary-foreground: oklch(0.99 0 0);
+  --ui-color-secondary: oklch(0.96 0.008 140);
+  --ui-color-secondary-foreground: oklch(0.25 0.02 140);
+  --ui-color-accent: oklch(0.94 0.015 140);
+  --ui-color-accent-foreground: oklch(0.72 0.12 85);
+  --ui-color-muted: oklch(0.965 0.008 140);
+  --ui-color-muted-foreground: oklch(0.52 0.02 140);
+  --ui-color-border: oklch(0.9 0.01 140);
+  --ui-color-input: oklch(0.9 0.01 140);
+  --ui-color-ring: oklch(0.72 0.12 85);
+  --ui-color-chart-1: oklch(0.72 0.12 85);
+  --ui-color-chart-2: oklch(0.4 0.08 250);
+  --ui-color-chart-3: oklch(0.62 0.12 155);
+  --ui-color-chart-4: oklch(0.6 0.13 205);
+  --ui-color-chart-5: oklch(0.58 0.15 25);
+  --ui-radius-sm: 0.375rem;
+  --ui-radius-md: 0.5rem;
+  --ui-radius-lg: 0.75rem;
+  --ui-radius-xl: 1rem;
+}
+
+.dark[data-theme="fintech"],
+[data-theme="fintech"].dark {
+  --ui-color-primary: oklch(0.88 0.03 140);
+  --ui-color-primary-foreground: oklch(0.16 0.02 140);
+  --ui-color-secondary: oklch(0.24 0.015 140);
+  --ui-color-secondary-foreground: oklch(0.98 0.01 140);
+  --ui-color-accent: oklch(0.28 0.02 140);
+  --ui-color-accent-foreground: oklch(0.78 0.11 85);
+  --ui-color-muted: oklch(0.24 0.015 140);
+  --ui-color-muted-foreground: oklch(0.7 0.02 140);
+  --ui-color-border: oklch(0.28 0.015 140);
+  --ui-color-input: oklch(0.3 0.015 140);
+  --ui-color-ring: oklch(0.78 0.11 85);
+  --ui-color-chart-1: oklch(0.78 0.11 85);
+  --ui-color-chart-2: oklch(0.72 0.1 250);
+  --ui-color-chart-3: oklch(0.72 0.12 155);
+  --ui-color-chart-4: oklch(0.7 0.12 205);
+  --ui-color-chart-5: oklch(0.68 0.15 25);
+}