kedhar-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.
- package/README.md +51 -0
- package/dist/kedhar-ui-amber.css +487 -0
- package/dist/kedhar-ui-emerald.css +487 -0
- package/dist/kedhar-ui-indigo.css +487 -0
- package/dist/kedhar-ui-slate.css +487 -0
- package/dist/kedhar-ui.css +451 -0
- package/dist/theme-amber.css +37 -0
- package/dist/theme-emerald.css +37 -0
- package/dist/theme-indigo.css +37 -0
- package/dist/theme-slate.css +37 -0
- package/package.json +32 -0
- package/src/components/ScrollToTop.astro +53 -0
- package/src/components/ThemeToggle.astro +96 -0
- package/src/index.js +24 -0
- package/src/styles/base.css +77 -0
- package/src/styles/components.css +285 -0
- package/src/styles/index.css +10 -0
- package/src/styles/themes/amber.css +35 -0
- package/src/styles/themes/emerald.css +35 -0
- package/src/styles/themes/indigo.css +35 -0
- package/src/styles/themes/slate.css +35 -0
- package/src/styles/tokens.css +85 -0
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
/* ══════════════════════════════════════════════════════════════
|
|
2
|
+
kedhar-ui — Design Tokens
|
|
3
|
+
══════════════════════════════════════════════════════════════
|
|
4
|
+
These tokens are consumed by base.css and components.css.
|
|
5
|
+
Each site imports its theme file to set the --ks-color-* values.
|
|
6
|
+
══════════════════════════════════════════════════════════════ */
|
|
7
|
+
|
|
8
|
+
:root {
|
|
9
|
+
/* ─── Spacing Scale ──────────────────────────────────────── */
|
|
10
|
+
--ks-space-1: 4px;
|
|
11
|
+
--ks-space-2: 8px;
|
|
12
|
+
--ks-space-3: 12px;
|
|
13
|
+
--ks-space-4: 16px;
|
|
14
|
+
--ks-space-5: 20px;
|
|
15
|
+
--ks-space-6: 24px;
|
|
16
|
+
--ks-space-8: 32px;
|
|
17
|
+
--ks-space-10: 40px;
|
|
18
|
+
--ks-space-12: 48px;
|
|
19
|
+
--ks-space-16: 64px;
|
|
20
|
+
--ks-space-20: 80px;
|
|
21
|
+
|
|
22
|
+
/* ─── Border Radius ──────────────────────────────────────── */
|
|
23
|
+
--ks-radius-sm: 6px;
|
|
24
|
+
--ks-radius-md: 10px;
|
|
25
|
+
--ks-radius-lg: 16px;
|
|
26
|
+
--ks-radius-xl: 24px;
|
|
27
|
+
--ks-radius-full: 9999px;
|
|
28
|
+
|
|
29
|
+
/* ─── Typography ─────────────────────────────────────────── */
|
|
30
|
+
--ks-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
31
|
+
--ks-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
|
|
32
|
+
|
|
33
|
+
--ks-text-xs: 0.75rem;
|
|
34
|
+
--ks-text-sm: 0.875rem;
|
|
35
|
+
--ks-text-base: 1rem;
|
|
36
|
+
--ks-text-lg: 1.125rem;
|
|
37
|
+
--ks-text-xl: 1.25rem;
|
|
38
|
+
--ks-text-2xl: 1.5rem;
|
|
39
|
+
--ks-text-3xl: 1.875rem;
|
|
40
|
+
--ks-text-4xl: 2.25rem;
|
|
41
|
+
|
|
42
|
+
--ks-leading-tight: 1.25;
|
|
43
|
+
--ks-leading-normal: 1.5;
|
|
44
|
+
--ks-leading-relaxed: 1.625;
|
|
45
|
+
|
|
46
|
+
--ks-weight-normal: 400;
|
|
47
|
+
--ks-weight-medium: 500;
|
|
48
|
+
--ks-weight-semibold: 600;
|
|
49
|
+
--ks-weight-bold: 700;
|
|
50
|
+
|
|
51
|
+
/* ─── Shadows ────────────────────────────────────────────── */
|
|
52
|
+
--ks-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
53
|
+
--ks-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
|
|
54
|
+
--ks-shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
|
|
55
|
+
--ks-shadow-xl: 0 20px 50px -8px rgba(0, 0, 0, 0.1);
|
|
56
|
+
|
|
57
|
+
/* ─── Transitions ────────────────────────────────────────── */
|
|
58
|
+
--ks-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
59
|
+
--ks-ease-in: cubic-bezier(0.4, 0, 0.68, 0.06);
|
|
60
|
+
--ks-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
61
|
+
--ks-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
62
|
+
|
|
63
|
+
--ks-duration-fast: 150ms;
|
|
64
|
+
--ks-duration-normal: 250ms;
|
|
65
|
+
--ks-duration-slow: 400ms;
|
|
66
|
+
|
|
67
|
+
/* ─── Z-Index Scale ──────────────────────────────────────── */
|
|
68
|
+
--ks-z-base: 1;
|
|
69
|
+
--ks-z-dropdown: 10;
|
|
70
|
+
--ks-z-sticky: 20;
|
|
71
|
+
--ks-z-modal: 30;
|
|
72
|
+
--ks-z-toast: 40;
|
|
73
|
+
--ks-z-tooltip: 50;
|
|
74
|
+
|
|
75
|
+
/* ─── Layout ─────────────────────────────────────────────── */
|
|
76
|
+
--ks-max-width: 1200px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* ─── Dark mode token overrides ────────────────────────────── */
|
|
80
|
+
.dark {
|
|
81
|
+
--ks-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
82
|
+
--ks-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
|
|
83
|
+
--ks-shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
|
|
84
|
+
--ks-shadow-xl: 0 20px 50px -8px rgba(0, 0, 0, 0.3);
|
|
85
|
+
}
|