@quinkit/ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/index.d.cts +1445 -0
  2. package/dist/index.d.ts +1445 -0
  3. package/dist/index.js +2567 -0
  4. package/dist/index.js.map +1 -0
  5. package/dist/index.mjs +2366 -0
  6. package/dist/index.mjs.map +1 -0
  7. package/package.json +97 -0
  8. package/src/styles/globals.css +150 -0
  9. package/src/styles/theme-switcher.tsx +95 -0
  10. package/src/styles/themes/.gitkeep +0 -0
  11. package/src/styles/themes/dashboard-data.css +64 -0
  12. package/src/styles/themes/dashboard-executive.css +64 -0
  13. package/src/styles/themes/dashboard-glass.css +64 -0
  14. package/src/styles/themes/dashboard.css +46 -0
  15. package/src/styles/themes/ecommerce-luxury.css +64 -0
  16. package/src/styles/themes/ecommerce-minimal.css +64 -0
  17. package/src/styles/themes/ecommerce-playful.css +64 -0
  18. package/src/styles/themes/ecommerce.css +36 -0
  19. package/src/styles/themes/edtech-campus.css +64 -0
  20. package/src/styles/themes/edtech-kids.css +64 -0
  21. package/src/styles/themes/edtech-professional.css +64 -0
  22. package/src/styles/themes/edtech.css +36 -0
  23. package/src/styles/themes/fintech-crypto.css +64 -0
  24. package/src/styles/themes/fintech-modern.css +64 -0
  25. package/src/styles/themes/fintech-wealth.css +64 -0
  26. package/src/styles/themes/fintech.css +46 -0
  27. package/src/styles/themes/healthcare-clinical.css +64 -0
  28. package/src/styles/themes/healthcare-urgent.css +64 -0
  29. package/src/styles/themes/healthcare-wellness.css +64 -0
  30. package/src/styles/themes/healthcare.css +46 -0
  31. package/src/styles/tokens/.gitkeep +0 -0
  32. package/src/styles/tokens/charts.css +26 -0
  33. package/src/styles/tokens/dark.css +36 -0
  34. package/src/styles/tokens/palettes.css +2663 -0
  35. package/src/styles/tokens/primitives.css +34 -0
  36. package/src/styles/tokens/semantic.css +35 -0
  37. package/src/styles/tokens/typography.css +82 -0
package/src/styles/tokens/primitives.css ADDED
@@ -0,0 +1,34 @@
1
+ /* primitives.css — raw, context-free values. No semantic meaning here.
2
+ * These are the only place literal colors / radii live. Everything else
3
+ * references them (or defines its own OKLCH inline, as palettes.css does).
4
+ */
5
+
6
+ :root {
7
+ /* neutral ramp (cool slate) — used by semantic.css + dark.css */
8
+ --ui-neutral-50: oklch(0.985 0.002 265);
9
+ --ui-neutral-100: oklch(0.968 0.004 265);
10
+ --ui-neutral-200: oklch(0.929 0.006 265);
11
+ --ui-neutral-300: oklch(0.869 0.01 265);
12
+ --ui-neutral-400: oklch(0.704 0.018 265);
13
+ --ui-neutral-500: oklch(0.554 0.024 265);
14
+ --ui-neutral-600: oklch(0.446 0.024 265);
15
+ --ui-neutral-700: oklch(0.372 0.022 265);
16
+ --ui-neutral-800: oklch(0.279 0.018 265);
17
+ --ui-neutral-900: oklch(0.208 0.014 265);
18
+ --ui-neutral-950: oklch(0.145 0.012 265);
19
+ --ui-white: oklch(1 0 0);
20
+ --ui-black: oklch(0 0 0);
21
+
22
+ /* status hues (shared defaults; palettes may override) */
23
+ --ui-red-500: oklch(0.6 0.2 25);
24
+ --ui-red-600: oklch(0.55 0.21 25);
25
+ --ui-amber-500: oklch(0.74 0.15 75);
26
+ --ui-green-500: oklch(0.62 0.15 155);
27
+ --ui-green-600: oklch(0.55 0.14 155);
28
+
29
+ /* radii */
30
+ --ui-radius-sm: 0.375rem;
31
+ --ui-radius-md: 0.5rem;
32
+ --ui-radius-lg: 0.75rem;
33
+ --ui-radius-xl: 1rem;
34
+ }
package/src/styles/tokens/semantic.css ADDED
@@ -0,0 +1,35 @@
1
+ /* semantic.css — LIGHT defaults. Maps neutral primitives to the semantic
2
+ * tokens components consume. Primary is a NEUTRAL near-black here, not blue:
3
+ * color identity comes from the active data-palette, not from this file.
4
+ */
5
+
6
+ :root {
7
+ --ui-color-background: var(--ui-white);
8
+ --ui-color-foreground: var(--ui-neutral-950);
9
+
10
+ --ui-color-card: var(--ui-white);
11
+ --ui-color-card-foreground: var(--ui-neutral-950);
12
+ --ui-color-popover: var(--ui-white);
13
+ --ui-color-popover-foreground: var(--ui-neutral-950);
14
+
15
+ /* neutral primary — palettes override this */
16
+ --ui-color-primary: var(--ui-neutral-900);
17
+ --ui-color-primary-foreground: var(--ui-neutral-50);
18
+ --ui-color-secondary: var(--ui-neutral-100);
19
+ --ui-color-secondary-foreground: var(--ui-neutral-900);
20
+ --ui-color-accent: var(--ui-neutral-100);
21
+ --ui-color-accent-foreground: var(--ui-neutral-900);
22
+ --ui-color-muted: var(--ui-neutral-100);
23
+ --ui-color-muted-foreground: var(--ui-neutral-500);
24
+
25
+ --ui-color-destructive: var(--ui-red-600);
26
+ --ui-color-destructive-foreground: var(--ui-neutral-50);
27
+ --ui-color-success: var(--ui-green-600);
28
+ --ui-color-success-foreground: var(--ui-neutral-50);
29
+ --ui-color-warning: var(--ui-amber-500);
30
+ --ui-color-warning-foreground: oklch(0.26 0.06 75);
31
+
32
+ --ui-color-border: var(--ui-neutral-200);
33
+ --ui-color-input: var(--ui-neutral-200);
34
+ --ui-color-ring: var(--ui-neutral-400);
35
+ }
package/src/styles/tokens/typography.css ADDED
@@ -0,0 +1,82 @@
1
+ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&family=JetBrains+Mono:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@300;400;500;600;700&family=Lato:wght@400;700;900&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&family=Nunito:wght@400;600;700;800;900&family=Source+Serif+4:wght@400;600;700&display=swap");
2
+
3
+ /* typography.css — font loading + type-scale primitives.
4
+ * @import must stay at the very top (before any other rule in this file).
5
+ * All families are on Google Fonts (verified). Prefer <link rel="preconnect">
6
+ * in <head> for performance; this @import is the copy-paste-simple route.
7
+ */
8
+
9
+ :root {
10
+ /* ---- font families (theme kits override --heading / --body / --mono) ---- */
11
+ --ui-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
12
+ --ui-font-serif: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
13
+ --ui-font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", "SFMono-Regular", monospace;
14
+ --ui-font-heading: var(--ui-font-sans);
15
+ --ui-font-body: var(--ui-font-sans);
16
+
17
+ /* ---- type scale (rem) ---- */
18
+ --ui-text-xs: 0.75rem;
19
+ /* 12 */
20
+ --ui-text-sm: 0.875rem;
21
+ /* 14 */
22
+ --ui-text-base: 1rem;
23
+ /* 16 */
24
+ --ui-text-lg: 1.125rem;
25
+ /* 18 */
26
+ --ui-text-xl: 1.25rem;
27
+ /* 20 */
28
+ --ui-text-2xl: 1.5rem;
29
+ /* 24 */
30
+ --ui-text-3xl: 1.875rem;
31
+ /* 30 */
32
+ --ui-text-4xl: 2.25rem;
33
+ /* 36 */
34
+ --ui-text-5xl: 3rem;
35
+ /* 48 */
36
+ --ui-text-6xl: 3.75rem;
37
+ /* 60 */
38
+ --ui-text-7xl: 4.5rem;
39
+ /* 72 */
40
+ --ui-text-8xl: 6rem;
41
+ /* 96 */
42
+ --ui-text-9xl: 8rem;
43
+ /* 128 */
44
+
45
+ /* paired default line-heights for each size (used by Tailwind text-* utils) */
46
+ --ui-text-xs--line-height: 1.5;
47
+ --ui-text-sm--line-height: 1.55;
48
+ --ui-text-base--line-height: 1.6;
49
+ --ui-text-lg--line-height: 1.6;
50
+ --ui-text-xl--line-height: 1.5;
51
+ --ui-text-2xl--line-height: 1.35;
52
+ --ui-text-3xl--line-height: 1.25;
53
+ --ui-text-4xl--line-height: 1.15;
54
+ --ui-text-5xl--line-height: 1.1;
55
+ --ui-text-6xl--line-height: 1.05;
56
+ --ui-text-7xl--line-height: 1;
57
+ --ui-text-8xl--line-height: 1;
58
+ --ui-text-9xl--line-height: 1;
59
+
60
+ /* ---- line-height presets (leading-*) ---- */
61
+ --ui-leading-none: 1;
62
+ --ui-leading-tight: 1.25;
63
+ --ui-leading-snug: 1.375;
64
+ --ui-leading-normal: 1.5;
65
+ --ui-leading-relaxed: 1.625;
66
+ --ui-leading-loose: 2;
67
+
68
+ /* ---- letter-spacing presets (tracking-*) ---- */
69
+ --ui-tracking-tighter: -0.05em;
70
+ --ui-tracking-tight: -0.025em;
71
+ --ui-tracking-normal: 0em;
72
+ --ui-tracking-wide: 0.025em;
73
+ --ui-tracking-wider: 0.05em;
74
+ --ui-tracking-widest: 0.1em;
75
+
76
+ /* mood knobs a theme can retune (consumed by the base layer in globals.css) */
77
+ --ui-tracking-heading: -0.02em;
78
+ --ui-tracking-body: 0em;
79
+ --ui-leading-heading: 1.15;
80
+ --ui-leading-body: 1.6;
81
+ --ui-weight-heading: 700;
82
+ }