hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-11 04:38:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Almost done with documentation

Browse Source
This commit is contained in:
Ronan Berder
2025-05-06 17:30:23 +08:00
parent e09d22c003
commit 2f4855bc66
45 changed files with 1511 additions and 779 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/css/styles.css
+3 -2
View File
@@ -13,7 +13,8 @@
@theme {
--font-sans: 'Inter';
--font-mono: 'JetBrains Mono';
}
/* @import "./themes/claude.css"; */
@import "./themes/claude.css";
@import "./themes/doom-64.css";
@import "./themes/supabase.css";
docs/css/themes/claude.css
+93 -144
View File
@@ -1,146 +1,95 @@
:root {
--background: oklch(0.98 0.01 95.10);
--foreground: oklch(0.34 0.03 95.72);
--card: oklch(0.98 0.01 95.10);
--card-foreground: oklch(0.19 0.00 106.59);
--popover: oklch(1.00 0 0);
--popover-foreground: oklch(0.27 0.02 98.94);
--primary: oklch(0.62 0.14 39.04);
--primary-foreground: oklch(1.00 0 0);
--secondary: oklch(0.92 0.01 92.99);
--secondary-foreground: oklch(0.43 0.02 98.60);
--muted: oklch(0.93 0.02 90.24);
--muted-foreground: oklch(0.61 0.01 97.42);
--accent: oklch(0.92 0.01 92.99);
--accent-foreground: oklch(0.27 0.02 98.94);
--destructive: oklch(0.19 0.00 106.59);
--destructive-foreground: oklch(1.00 0 0);
--border: oklch(0.88 0.01 97.36);
--input: oklch(0.76 0.02 98.35);
--ring: oklch(0.59 0.17 253.06);
--chart-1: oklch(0.56 0.13 43.00);
--chart-2: oklch(0.69 0.16 290.41);
--chart-3: oklch(0.88 0.03 93.13);
--chart-4: oklch(0.88 0.04 298.18);
--chart-5: oklch(0.56 0.13 42.06);
--sidebar: oklch(0.97 0.01 98.88);
--sidebar-foreground: oklch(0.36 0.01 106.65);
--sidebar-primary: oklch(0.62 0.14 39.04);
--sidebar-primary-foreground: oklch(0.99 0 0);
--sidebar-accent: oklch(0.92 0.01 92.99);
--sidebar-accent-foreground: oklch(0.33 0 0);
--sidebar-border: oklch(0.94 0 0);
--sidebar-ring: oklch(0.77 0 0);
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--radius: 0.5rem;
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
}
.theme-claude {
&:root {
--background: oklch(0.98 0.01 95.10);
--foreground: oklch(0.34 0.03 95.72);
--card: oklch(0.98 0.01 95.10);
--card-foreground: oklch(0.19 0.00 106.59);
--popover: oklch(1.00 0 0);
--popover-foreground: oklch(0.27 0.02 98.94);
--primary: oklch(0.62 0.14 39.04);
--primary-foreground: oklch(1.00 0 0);
--secondary: oklch(0.92 0.01 92.99);
--secondary-foreground: oklch(0.43 0.02 98.60);
--muted: oklch(0.93 0.02 90.24);
--muted-foreground: oklch(0.61 0.01 97.42);
--accent: oklch(0.92 0.01 92.99);
--accent-foreground: oklch(0.27 0.02 98.94);
--destructive: oklch(0.19 0.00 106.59);
--destructive-foreground: oklch(1.00 0 0);
--border: oklch(0.88 0.01 97.36);
--input: oklch(0.76 0.02 98.35);
--ring: oklch(0.59 0.17 253.06);
--chart-1: oklch(0.56 0.13 43.00);
--chart-2: oklch(0.69 0.16 290.41);
--chart-3: oklch(0.88 0.03 93.13);
--chart-4: oklch(0.88 0.04 298.18);
--chart-5: oklch(0.56 0.13 42.06);
--sidebar: oklch(0.97 0.01 98.88);
--sidebar-foreground: oklch(0.36 0.01 106.65);
--sidebar-primary: oklch(0.62 0.14 39.04);
--sidebar-primary-foreground: oklch(0.99 0 0);
--sidebar-accent: oklch(0.92 0.01 92.99);
--sidebar-accent-foreground: oklch(0.33 0 0);
--sidebar-border: oklch(0.94 0 0);
--sidebar-ring: oklch(0.77 0 0);
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--radius: 0.5rem;
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
}
.dark {
--background: oklch(0.27 0.00 106.64);
--foreground: oklch(0.81 0.01 93.01);
--card: oklch(0.27 0.00 106.64);
--card-foreground: oklch(0.98 0.01 95.10);
--popover: oklch(0.31 0.00 106.60);
--popover-foreground: oklch(0.92 0.00 106.48);
--primary: oklch(0.67 0.13 38.76);
--primary-foreground: oklch(1.00 0 0);
--secondary: oklch(0.98 0.01 95.10);
--secondary-foreground: oklch(0.31 0.00 106.60);
--muted: oklch(0.22 0.00 106.71);
--muted-foreground: oklch(0.77 0.02 99.07);
--accent: oklch(0.21 0.01 95.42);
--accent-foreground: oklch(0.97 0.01 98.88);
--destructive: oklch(0.64 0.21 25.33);
--destructive-foreground: oklch(1.00 0 0);
--border: oklch(0.36 0.01 106.89);
--input: oklch(0.43 0.01 100.22);
--ring: oklch(0.59 0.17 253.06);
--chart-1: oklch(0.56 0.13 43.00);
--chart-2: oklch(0.69 0.16 290.41);
--chart-3: oklch(0.21 0.01 95.42);
--chart-4: oklch(0.31 0.05 289.32);
--chart-5: oklch(0.56 0.13 42.06);
--sidebar: oklch(0.24 0.00 67.71);
--sidebar-foreground: oklch(0.81 0.01 93.01);
--sidebar-primary: oklch(0.33 0 0);
--sidebar-primary-foreground: oklch(0.99 0 0);
--sidebar-accent: oklch(0.17 0.00 106.62);
--sidebar-accent-foreground: oklch(0.81 0.01 93.01);
--sidebar-border: oklch(0.94 0 0);
--sidebar-ring: oklch(0.77 0 0);
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--radius: 0.5rem;
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
--font-serif: var(--font-serif);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--shadow-2xs: var(--shadow-2xs);
--shadow-xs: var(--shadow-xs);
--shadow-sm: var(--shadow-sm);
--shadow: var(--shadow);
--shadow-md: var(--shadow-md);
--shadow-lg: var(--shadow-lg);
--shadow-xl: var(--shadow-xl);
--shadow-2xl: var(--shadow-2xl);
&.dark {
--background: oklch(0.27 0.00 106.64);
--foreground: oklch(0.81 0.01 93.01);
--card: oklch(0.27 0.00 106.64);
--card-foreground: oklch(0.98 0.01 95.10);
--popover: oklch(0.31 0.00 106.60);
--popover-foreground: oklch(0.92 0.00 106.48);
--primary: oklch(0.67 0.13 38.76);
--primary-foreground: oklch(1.00 0 0);
--secondary: oklch(0.98 0.01 95.10);
--secondary-foreground: oklch(0.31 0.00 106.60);
--muted: oklch(0.22 0.00 106.71);
--muted-foreground: oklch(0.77 0.02 99.07);
--accent: oklch(0.21 0.01 95.42);
--accent-foreground: oklch(0.97 0.01 98.88);
--destructive: oklch(0.64 0.21 25.33);
--destructive-foreground: oklch(1.00 0 0);
--border: oklch(0.36 0.01 106.89);
--input: oklch(0.43 0.01 100.22);
--ring: oklch(0.59 0.17 253.06);
--chart-1: oklch(0.56 0.13 43.00);
--chart-2: oklch(0.69 0.16 290.41);
--chart-3: oklch(0.21 0.01 95.42);
--chart-4: oklch(0.31 0.05 289.32);
--chart-5: oklch(0.56 0.13 42.06);
--sidebar: oklch(0.24 0.00 67.71);
--sidebar-foreground: oklch(0.81 0.01 93.01);
--sidebar-primary: oklch(0.33 0 0);
--sidebar-primary-foreground: oklch(0.99 0 0);
--sidebar-accent: oklch(0.17 0.00 106.62);
--sidebar-accent-foreground: oklch(0.81 0.01 93.01);
--sidebar-border: oklch(0.94 0 0);
--sidebar-ring: oklch(0.77 0 0);
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--radius: 0.5rem;
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
}
}
docs/css/themes/doom-64.css
+95
View File
@@ -0,0 +1,95 @@
.theme-doom-64 {
&:root {
--background: oklch(0.85 0 0);
--foreground: oklch(0.24 0 0);
--card: oklch(0.76 0 0);
--card-foreground: oklch(0.24 0 0);
--popover: oklch(0.76 0 0);
--popover-foreground: oklch(0.24 0 0);
--primary: oklch(0.50 0.19 27.48);
--primary-foreground: oklch(1.00 0 0);
--secondary: oklch(0.50 0.09 126.19);
--secondary-foreground: oklch(1.00 0 0);
--muted: oklch(0.78 0 0);
--muted-foreground: oklch(0.41 0 0);
--accent: oklch(0.59 0.10 245.74);
--accent-foreground: oklch(1.00 0 0);
--destructive: oklch(0.71 0.20 46.46);
--destructive-foreground: oklch(0 0 0);
--border: oklch(0.43 0 0);
--input: oklch(0.43 0 0);
--ring: oklch(0.50 0.19 27.48);
--chart-1: oklch(0.50 0.19 27.48);
--chart-2: oklch(0.50 0.09 126.19);
--chart-3: oklch(0.59 0.10 245.74);
--chart-4: oklch(0.71 0.20 46.46);
--chart-5: oklch(0.57 0.04 40.43);
--sidebar: oklch(0.76 0 0);
--sidebar-foreground: oklch(0.24 0 0);
--sidebar-primary: oklch(0.50 0.19 27.48);
--sidebar-primary-foreground: oklch(1.00 0 0);
--sidebar-accent: oklch(0.59 0.10 245.74);
--sidebar-accent-foreground: oklch(1.00 0 0);
--sidebar-border: oklch(0.43 0 0);
--sidebar-ring: oklch(0.50 0.19 27.48);
--font-sans: "Oxanium", sans-serif;
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: "Source Code Pro", monospace;
--radius: 0px;
--shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.20);
--shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.20);
--shadow-sm: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
--shadow: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
--shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 2px 4px -1px hsl(0 0% 0% / 0.40);
--shadow-lg: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 4px 6px -1px hsl(0 0% 0% / 0.40);
--shadow-xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 8px 10px -1px hsl(0 0% 0% / 0.40);
--shadow-2xl: 0px 2px 4px 0px hsl(0 0% 0% / 1.00);
}
&.dark {
--background: oklch(0.22 0 0);
--foreground: oklch(0.91 0 0);
--card: oklch(0.29 0 0);
--card-foreground: oklch(0.91 0 0);
--popover: oklch(0.29 0 0);
--popover-foreground: oklch(0.91 0 0);
--primary: oklch(0.61 0.21 27.03);
--primary-foreground: oklch(1.00 0 0);
--secondary: oklch(0.64 0.15 133.01);
--secondary-foreground: oklch(0 0 0);
--muted: oklch(0.26 0 0);
--muted-foreground: oklch(0.71 0 0);
--accent: oklch(0.75 0.12 244.75);
--accent-foreground: oklch(0 0 0);
--destructive: oklch(0.78 0.17 68.09);
--destructive-foreground: oklch(0 0 0);
--border: oklch(0.41 0 0);
--input: oklch(0.41 0 0);
--ring: oklch(0.61 0.21 27.03);
--chart-1: oklch(0.61 0.21 27.03);
--chart-2: oklch(0.64 0.15 133.01);
--chart-3: oklch(0.75 0.12 244.75);
--chart-4: oklch(0.78 0.17 68.09);
--chart-5: oklch(0.65 0.03 40.80);
--sidebar: oklch(0.19 0 0);
--sidebar-foreground: oklch(0.91 0 0);
--sidebar-primary: oklch(0.61 0.21 27.03);
--sidebar-primary-foreground: oklch(1.00 0 0);
--sidebar-accent: oklch(0.75 0.12 244.75);
--sidebar-accent-foreground: oklch(0 0 0);
--sidebar-border: oklch(0.41 0 0);
--sidebar-ring: oklch(0.61 0.21 27.03);
--font-sans: "Oxanium", sans-serif;
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: "Source Code Pro", monospace;
--radius: 0px;
--shadow-2xs: 0px 2px 5px 0px hsl(0 0% 0% / 0.30);
--shadow-xs: 0px 2px 5px 0px hsl(0 0% 0% / 0.30);
--shadow-sm: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 1px 2px -1px hsl(0 0% 0% / 0.60);
--shadow: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 1px 2px -1px hsl(0 0% 0% / 0.60);
--shadow-md: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 2px 4px -1px hsl(0 0% 0% / 0.60);
--shadow-lg: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 4px 6px -1px hsl(0 0% 0% / 0.60);
--shadow-xl: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 8px 10px -1px hsl(0 0% 0% / 0.60);
--shadow-2xl: 0px 2px 5px 0px hsl(0 0% 0% / 1.50);
}
}
docs/css/themes/supabase.css
+160
View File
@@ -0,0 +1,160 @@
.theme-supabase {
&:root {
--background: oklch(0.99 0 0);
--foreground: oklch(0.20 0 0);
--card: oklch(0.99 0 0);
--card-foreground: oklch(0.20 0 0);
--popover: oklch(0.99 0 0);
--popover-foreground: oklch(0.44 0 0);
--primary: oklch(0.83 0.13 160.91);
--primary-foreground: oklch(0.26 0.01 166.46);
--secondary: oklch(0.99 0 0);
--secondary-foreground: oklch(0.20 0 0);
--muted: oklch(0.95 0 0);
--muted-foreground: oklch(0.24 0 0);
--accent: oklch(0.95 0 0);
--accent-foreground: oklch(0.24 0 0);
--destructive: oklch(0.55 0.19 32.73);
--destructive-foreground: oklch(0.99 0.00 17.21);
--border: oklch(0.90 0 0);
--input: oklch(0.90 0 0);
--ring: oklch(0.83 0.13 160.91);
--chart-1: oklch(0.83 0.13 160.91);
--chart-2: oklch(0.62 0.19 259.81);
--chart-3: oklch(0.61 0.22 292.72);
--chart-4: oklch(0.77 0.16 70.08);
--chart-5: oklch(0.70 0.15 162.48);
--sidebar: oklch(0.99 0 0);
--sidebar-foreground: oklch(0.55 0 0);
--sidebar-primary: oklch(0.83 0.13 160.91);
--sidebar-primary-foreground: oklch(0.26 0.01 166.46);
--sidebar-accent: oklch(0.95 0 0);
--sidebar-accent-foreground: oklch(0.24 0 0);
--sidebar-border: oklch(0.90 0 0);
--sidebar-ring: oklch(0.83 0.13 160.91);
--font-sans: Outfit, sans-serif;
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: monospace;
--radius: 0.5rem;
--shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
--shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
--shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
--shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
--shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17);
--shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17);
--shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17);
--shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43);
--tracking-normal: 0.025em;
}
&.dark {
--background: oklch(0.18 0 0);
--foreground: oklch(0.93 0.01 255.51);
--card: oklch(0.20 0 0);
--card-foreground: oklch(0.93 0.01 255.51);
--popover: oklch(0.26 0 0);
--popover-foreground: oklch(0.73 0 0);
--primary: oklch(0.44 0.10 156.76);
--primary-foreground: oklch(0.92 0.01 167.16);
--secondary: oklch(0.26 0 0);
--secondary-foreground: oklch(0.99 0 0);
--muted: oklch(0.24 0 0);
--muted-foreground: oklch(0.71 0 0);
--accent: oklch(0.31 0 0);
--accent-foreground: oklch(0.99 0 0);
--destructive: oklch(0.31 0.09 29.79);
--destructive-foreground: oklch(0.94 0.00 34.31);
--border: oklch(0.28 0 0);
--input: oklch(0.28 0 0);
--ring: oklch(0.80 0.18 151.71);
--chart-1: oklch(0.80 0.18 151.71);
--chart-2: oklch(0.71 0.14 254.62);
--chart-3: oklch(0.71 0.16 293.54);
--chart-4: oklch(0.84 0.16 84.43);
--chart-5: oklch(0.78 0.13 181.91);
--sidebar: oklch(0.18 0 0);
--sidebar-foreground: oklch(0.63 0 0);
--sidebar-primary: oklch(0.44 0.10 156.76);
--sidebar-primary-foreground: oklch(0.92 0.01 167.16);
--sidebar-accent: oklch(0.31 0 0);
--sidebar-accent-foreground: oklch(0.99 0 0);
--sidebar-border: oklch(0.28 0 0);
--sidebar-ring: oklch(0.80 0.18 151.71);
--font-sans: Outfit, sans-serif;
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: monospace;
--radius: 0.5rem;
--shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
--shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
--shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
--shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
--shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17);
--shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17);
--shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17);
--shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43);
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
--font-serif: var(--font-serif);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--shadow-2xs: var(--shadow-2xs);
--shadow-xs: var(--shadow-xs);
--shadow-sm: var(--shadow-sm);
--shadow: var(--shadow);
--shadow-md: var(--shadow-md);
--shadow-lg: var(--shadow-lg);
--shadow-xl: var(--shadow-xl);
--shadow-2xl: var(--shadow-2xl);
--tracking-tighter: calc(var(--tracking-normal) - 0.05em);
--tracking-tight: calc(var(--tracking-normal) - 0.025em);
--tracking-normal: var(--tracking-normal);
--tracking-wide: calc(var(--tracking-normal) + 0.025em);
--tracking-wider: calc(var(--tracking-normal) + 0.05em);
--tracking-widest: calc(var(--tracking-normal) + 0.1em);
}
body {
letter-spacing: var(--tracking-normal);
}
}
docs/src/_includes/layouts/base.njk
+23 -5
View File
@@ -4,19 +4,37 @@
<!-- Theme -->
<script>
function isDark() {
return localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
return localStorage.getItem('darkMode') === 'dark' || (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches);
}
if (isDark()) {
document.documentElement.classList.add('dark');
}
if (localStorage.getItem('themeVariant')) {
document.documentElement.classList.add(`theme-${localStorage.getItem('themeVariant')}`);
}
document.addEventListener('alpine:init', () => {
Alpine.store('theme', {
Alpine.store('darkMode', {
isDark: isDark(),
toggle() {
this.isDark = document.documentElement.classList.toggle('dark');
localStorage.setItem('theme', this.isDark ? 'dark' : 'light');
localStorage.setItem('darkMode', this.isDark ? 'dark' : 'light');
}
});
Alpine.store('themeVariant', {
name: localStorage.getItem('themeVariant'),
setThemeVariant(name) {
this.name = name;
localStorage.setItem('themeVariant', name);
document.documentElement.classList.forEach(className => {
if (className.startsWith('theme-')) {
document.documentElement.classList.remove(className);
}
});
document.documentElement.classList.add(`theme-${name}`);
}
});
});
@@ -82,11 +100,11 @@
{% include "partials/sidebar.njk" %}
<main id="content">
<header class="bg-background sticky inset-x-0 top-0 isolate z-20 flex shrink-0 items-center gap-2 border-b z-10">
<header class="bg-background sticky inset-x-0 top-0 isolate flex shrink-0 items-center gap-2 border-b z-10">
{% include "partials/header.njk" %}
</header>
<div class="p-4">
<div class="p-6 md:p-8 xl:p-12">
{{ content | safe }}
</div>
</main>
docs/src/_includes/layouts/page.njk
+3 -21
View File
@@ -2,7 +2,7 @@
layout: layouts/base.njk
---
<main class="mx-auto relative py-6 lg:gap-10 lg:py-8 flex w-full max-w-screen-lg">
<main class="mx-auto relative flex w-full max-w-screen-lg gap-10">
<div class="mx-auto w-full max-w-screen-md">
<header class="space-y-2">
<h1 class="text-3xl font-semibold tracking-tight">{{ title }}</h1>
@@ -14,26 +14,8 @@ layout: layouts/base.njk
</div>
{% if toc %}
<div class="hidden text-sm xl:block w-full max-w-[300px]">
<nav class="sticky top-22 space-y-2 [&_ul]:m-0 [&_ul]:list-none [&_ul_ul]:pl-4 [&_li]:mt-0 [&_li]:pt-2 [&_a]:inline-block [&_a]:no-underline [&_a]:transition-colors [&_a]:hover:text-foreground [&_a]:text-muted-foreground">
<h4 class="font-medium">On This Page</h4>
{% if toc %}
{% macro renderToc(items) %}
{% if items and items.length %}
<ul>
{% for item in items %}
<li>
<a href="#{{ item.id }}">{{ item.label }}</a>
{% if item.children and item.children.length %}
{{ renderToc(item.children) }}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% endmacro %}
{{ renderToc(toc) }}
{% endif %}
</nav>
{% from "macros/toc.njk" import toc_nav %}
{{ toc_nav(toc) }}
</div>
{% endif %}
</main>
docs/src/_includes/macros/toc.njk
+20
View File
@@ -0,0 +1,20 @@
{% macro toc_nav(items=[]) %}
<nav class="sticky top-22 space-y-2 [&_ul]:m-0 [&_ul]:list-none [&_ul_ul]:pl-4 [&_li]:mt-0 [&_li]:pt-2 [&_a]:inline-block [&_a]:no-underline [&_a]:transition-colors [&_a]:hover:text-foreground [&_a]:text-muted-foreground">
<h4 class="font-medium">On This Page</h4>
{% macro toc_list(items=[]) %}
{% if items and items.length %}
<ul>
{% for item in items %}
<li>
<a href="#{{ item.id }}">{{ item.label }}</a>
{% if item.children and item.children.length %}
{{ toc_list(item.children) }}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% endmacro %}
{{ toc_list(items) }}
</nav>
{% endmacro %}
docs/src/_includes/partials/header.njk
+15 -8
View File
@@ -16,21 +16,28 @@
>
{% lucide "panel-left" %}
</button>
<select class="select h-8 leading-none">
<option value="light">Default</option>
<option value="light">Other</option>
<select
class="select h-8 leading-none"
x-init
@change="$store.themeVariant.setThemeVariant($event.target.value)"
:value="$store.themeVariant.name"
>
<option value="">Default</option>
<option value="claude">Claude</option>
<option value="doom-64">Doom 64</option>
<option value="supabase">Supabase</option>
</select>
<button
type="button"
aria-label="Toggle theme"
data-tooltip="Toggle theme"
:aria-label="$store.darkMode.isDark ? 'Switch to light mode' : 'Switch to dark mode'"
:data-tooltip="$store.darkMode.isDark ? 'Light mode' : 'Dark mode'"
data-side="bottom"
data-align="end"
class="btn-icon-outline size-8"
x-init
@click="$store.theme.toggle()"
@click="$store.darkMode.toggle()"
>
<span x-show="$store.theme.isDark">{% lucide "sun" %}</span>
<span x-show="!$store.theme.isDark">{% lucide "moon" %}</span>
<span x-show="$store.darkMode.isDark">{% lucide "sun" %}</span>
<span x-show="!$store.darkMode.isDark">{% lucide "moon" %}</span>
</button>
</div>
docs/src/_includes/partials/kitchen-sink/accordion.njk
+5 -2
View File
@@ -1,6 +1,9 @@
<section id="accordion" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="accordion" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Accordion</h2>
<a href="/components/accordion" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<div class="group grid w-full max-w-xl gap-4">
docs/src/_includes/partials/kitchen-sink/alert-dialog.njk
+5 -2
View File
@@ -1,8 +1,11 @@
{% from "dialog.njk" import dialog %}
<section id="alert-dialog" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="alert-dialog" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Alert Dialog</h2>
<a href="/components/alert-dialog" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<div class="flex flex-col gap-4">
docs/src/_includes/partials/kitchen-sink/alert.njk
+5 -2
View File
@@ -1,6 +1,9 @@
<section id="alert" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="alert" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Alert</h2>
<a href="/components/alert" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<div class="grid max-w-xl items-start gap-4">
docs/src/_includes/partials/kitchen-sink/avatar.njk
+5 -2
View File
@@ -1,6 +1,9 @@
<section id="avatar" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="avatar" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Avatar</h2>
<a href="/components/avatar" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<div class="flex flex-row flex-wrap items-center gap-4">
docs/src/_includes/partials/kitchen-sink/badge.njk
+5 -2
View File
@@ -1,6 +1,9 @@
<section id="badge" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="badge" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Badge</h2>
<a href="/components/badge" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<div class="flex flex-col gap-2">
docs/src/_includes/partials/kitchen-sink/breadcrumb.njk
+5 -2
View File
@@ -1,8 +1,11 @@
{% from "popover.njk" import popover %}
<section id="breadcrumb" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="breadcrumb" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Breadcrumb</h2>
<a href="/components/breadcrumb" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<ol class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5">
docs/src/_includes/partials/kitchen-sink/button.njk
+5 -2
View File
@@ -1,6 +1,9 @@
<section id="button" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="button" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Button</h2>
<a href="/components/button" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<div class="flex flex-col gap-6">
docs/src/_includes/partials/kitchen-sink/card.njk
+5 -2
View File
@@ -1,6 +1,9 @@
<section id="card" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="card" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Card</h2>
<a href="/components/card" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<div class="flex flex-col items-start gap-4">
docs/src/_includes/partials/kitchen-sink/checkbox.njk
+5 -2
View File
@@ -1,6 +1,9 @@
<section id="checkbox" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="checkbox" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Checkbox</h2>
<a href="/components/checkbox" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<div class="flex flex-col gap-6 max-w-lg">
docs/src/_includes/partials/kitchen-sink/combobox.njk
+5 -2
View File
@@ -1,8 +1,11 @@
{% from "select.njk" import select %}
<section id="combobox" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="combobox" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Combobox</h2>
<a href="/components/combobox" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<div class="flex flex-wrap items-start gap-4">
docs/src/_includes/partials/kitchen-sink/dialog.njk
+5 -2
View File
@@ -1,8 +1,11 @@
{% from "dialog.njk" import dialog %}
<section id="dialog" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="dialog" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Dialog</h2>
<a href="/components/dialog" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<div class="flex flex-wrap items-center gap-4">
docs/src/_includes/partials/kitchen-sink/dropdown-menu.njk
+5 -2
View File
@@ -1,8 +1,11 @@
{% from "dropdown-menu.njk" import dropdown_menu %}
<section id="dropdown-menu" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="dropdown-menu" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Dropdown Menu</h2>
<a href="/components/dropdown-menu" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<div class="flex flex-wrap items-start gap-4">
docs/src/_includes/partials/kitchen-sink/form.njk
+5 -2
View File
@@ -1,6 +1,9 @@
<section id="form" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="form" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Form</h2>
<a href="/components/form" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<form class="form grid w-full max-w-sm gap-6">
docs/src/_includes/partials/kitchen-sink/input.njk
+5 -2
View File
@@ -1,6 +1,9 @@
<section id="input" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="input" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Input</h2>
<a href="/components/input" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<div class="flex flex-col gap-y-4">
docs/src/_includes/partials/kitchen-sink/label.njk
+5 -2
View File
@@ -1,6 +1,9 @@
<section id="label" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="label" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Label</h2>
<a href="/components/label" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<div class="flex flex-col gap-y-4">
docs/src/_includes/partials/kitchen-sink/pagination.njk
+5 -2
View File
@@ -1,6 +1,9 @@
<section id="pagination" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="pagination" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Pagination</h2>
<a href="/components/pagination" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<div class="inline-flex">
docs/src/_includes/partials/kitchen-sink/popover.njk
+5 -2
View File
@@ -1,8 +1,11 @@
{% from "popover.njk" import popover %}
<section id="popover" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="popover" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Popover</h2>
<a href="/components/popover" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
{% call popover(
docs/src/_includes/partials/kitchen-sink/radio-group.njk
+5 -2
View File
@@ -1,6 +1,9 @@
<section id="radio-group" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="radio-group" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Radio Group</h2>
<a href="/components/radio-group" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<div class="flex flex-col gap-y-6">
docs/src/_includes/partials/kitchen-sink/select.njk
+5 -2
View File
@@ -1,8 +1,11 @@
{% from "select.njk" import select %}
<section id="select" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="select" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Select</h2>
<a href="/components/select" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4 gap">
docs/src/_includes/partials/kitchen-sink/skeleton.njk
+5 -2
View File
@@ -1,6 +1,9 @@
<section id="skeleton" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="skeleton" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Skeleton</h2>
<a href="/components/skeleton" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<div class="flex flex-col gap-4">
docs/src/_includes/partials/kitchen-sink/slider.njk
+5 -2
View File
@@ -1,6 +1,9 @@
<section id="slider" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="slider" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Slider</h2>
<a href="/components/slider" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<div class="max-w-sm">
docs/src/_includes/partials/kitchen-sink/switch.njk
+5 -2
View File
@@ -1,6 +1,9 @@
<section id="switch" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="switch" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Switch</h2>
<a href="/components/switch" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<div class="inline-flex flex-col gap-y-6">
docs/src/_includes/partials/kitchen-sink/table.njk
+5 -2
View File
@@ -1,6 +1,9 @@
<section id="table" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="table" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Table</h2>
<a href="/components/table" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
docs/src/_includes/partials/kitchen-sink/tabs.njk
+5 -2
View File
@@ -1,8 +1,11 @@
{% from "tabs.njk" import tabs %}
<section id="tabs" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="tabs" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Tabs</h2>
<a href="/components/tabs" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<div class="flex flex-col gap-6">
docs/src/_includes/partials/kitchen-sink/textarea.njk
+5 -2
View File
@@ -1,6 +1,9 @@
<section id="textarea" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="textarea" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Textarea</h2>
<a href="/components/textarea" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<div class="flex flex-col gap-y-10">
docs/src/_includes/partials/kitchen-sink/toast.njk
+5 -2
View File
@@ -1,6 +1,9 @@
<section id="toast" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="toast" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Toast</h2>
<a href="/components/toast" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<div class="flex flex-wrap items-center gap-2">
docs/src/_includes/partials/kitchen-sink/tooltip.njk
+5 -2
View File
@@ -1,6 +1,9 @@
<section id="tooltip" class="w-full rounded-lg border scroll-mt-16">
<header class="border-b px-4 py-3">
<section id="tooltip" class="w-full rounded-lg border scroll-mt-14">
<header class="border-b px-4 py-3 flex items-center justify-between">
<h2 class="text-sm font-medium">Tooltip</h2>
<a href="/components/tooltip" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
{% lucide "book-open", { "class": "size-4" } %}
</a>
</header>
<div class="p-4">
<div class="flex flex-wrap items-center gap-4">
docs/src/_includes/partials/sidebar.njk
+6 -4
View File
@@ -38,13 +38,13 @@
<span class="truncate text-xs">v{{ pkg.version }}</span>
</div>
</a>
<div class="flex flex-col gap-2 px-2 text-sm">
{# <div class="flex flex-col gap-2 px-2 text-sm">
<form class="form relative">
<label for="search" class="sr-only">Search</label>
<input type="text" placeholder="Search the docs..." class="h-8 w-full shadow-none pl-8">
{% lucide "search", { "class": "pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none" } %}
</form>
</div>
</div> #}
{% endset %}
{% set link_attrs = {
@@ -54,6 +54,7 @@
"hx-swap": "outerHTML"
} %}
{% set icon_home %}{% lucide "house" %}{% endset %}
{% set icon_info %}{% lucide "info" %}{% endset %}
{% set icon_square_terminal %}{% lucide "square-terminal" %}{% endset %}
{% set icon_layout_dashboard %}{% lucide "layout-dashboard" %}{% endset %}
@@ -61,10 +62,10 @@
{% set menu = [
{ type: "group", label: "Getting started", items: [
{ label: "Introduction", url: "/", icon: icon_info, current: true, attrs: link_attrs },
{ label: "Introduction", url: "/introduction", icon: icon_info, attrs: link_attrs },
{ label: "Installation", url: "/installation", icon: icon_square_terminal, attrs: link_attrs },
{ label: "Kitchen sink", url: "/kitchen-sink", icon: icon_layout_dashboard, attrs: link_attrs },
{ label: "GitHub", url: "https://github.com/hunvreus/basecoat", icon: icon_github, attrs: link_attrs }
{ label: "GitHub", url: "https://github.com/hunvreus/basecoat", icon: icon_github, attrs: { "target": "_blank" } }
]},
{ type: 'group', label: 'Components', items: [
{ label: "Accordion", url: "/components/accordion", attrs: link_attrs },
@@ -121,6 +122,7 @@
});
}
}",
"class": "scrollbar",
"x-init": "updateCurrentPage()",
"@htmx:pushed-into-history.window": "updateCurrentPage()"
},
docs/src/assets/styles.css
+767 -396
View File
File diff suppressed because it is too large Load Diff
docs/src/components/alert-dialog.njk
+4 -2
View File
@@ -34,13 +34,15 @@ toc:
) }}
{% endset %}
{% set code_script %}<script>
{% set code_script %}
<script>
{% fetchCode "src/js/dialog.js" %}
document.addEventListener('alpine:init', () => {
window.basecoat.registerDialog(Alpine);
});
</script>{% endset %}
</script>
{% endset %}
{{ code_preview("alert-dialog", code_script | prettyHtml ~ code_html | prettyHtml) }}
docs/src/components/chart.njk
+98 -96
View File
@@ -7,61 +7,79 @@ toc:
id: usage
---
<div class="grid gap-6">
<div class="card">
<header>
<h2>Area Chart</h2>
<p>Showing total visitors for the last 6 months</p>
</header>
<section>
<canvas id="chart-area-default"></canvas>
</section>
<footer>
<div class="grid gap-2 text-sm">
<div class="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month
{% lucide "trending-up", { "class": "size-4" } %}
<div class="grid grid-cols-2 gap-6">
<div class="card">
<header>
<h2>Area Chart</h2>
<p>Showing total visitors for the last 6 months</p>
</header>
<section>
<canvas id="chart-area-default"></canvas>
</section>
<footer>
<div class="grid gap-2 text-sm">
<div class="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month
{% lucide "trending-up", { "class": "size-4" } %}
</div>
<div class="text-muted-foreground flex items-center gap-2 leading-none">January - June 2024</div>
</div>
<div class="text-muted-foreground flex items-center gap-2 leading-none">January - June 2024</div>
</div>
</footer>
</div>
</footer>
</div>
<div class="card">
<header>
<h2>Area Chart - Stacked</h2>
<p>Showing total visitors for the last 6 months</p>
</header>
<section>
<canvas id="chart-area-stacked"></canvas>
</section>
<footer>
<div class="grid gap-2 text-sm">
<div class="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month
{% lucide "trending-up", { "class": "size-4" } %}
<div class="card">
<header>
<h2>Area Chart - Stacked</h2>
<p>Showing total visitors for the last 6 months</p>
</header>
<section>
<canvas id="chart-area-stacked"></canvas>
</section>
<footer>
<div class="grid gap-2 text-sm">
<div class="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month
{% lucide "trending-up", { "class": "size-4" } %}
</div>
<div class="text-muted-foreground flex items-center gap-2 leading-none">January - June 2024</div>
</div>
<div class="text-muted-foreground flex items-center gap-2 leading-none">January - June 2024</div>
</div>
</footer>
</div>
</footer>
</div>
<div class="card">
<header>
<h2>Bar Chart - Multiple</h2>
<p>Showing total visitors for the last 6 months</p>
</header>
<section>
<canvas id="chart-bar-multiple"></canvas>
</section>
<footer>
<div class="grid gap-2 text-sm">
<div class="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month
{% lucide "trending-up", { "class": "size-4" } %}
<div class="card">
<header>
<h2>Bar Chart - Multiple</h2>
<p>Showing total visitors for the last 6 months</p>
</header>
<section>
<canvas id="chart-bar-multiple"></canvas>
</section>
<footer>
<div class="grid gap-2 text-sm">
<div class="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month
{% lucide "trending-up", { "class": "size-4" } %}
</div>
<div class="text-muted-foreground flex items-center gap-2 leading-none">January - June 2024</div>
</div>
<div class="text-muted-foreground flex items-center gap-2 leading-none">January - June 2024</div>
</div>
</footer>
</footer>
</div>
<div class="card">
<header>
<h2>Doughnut Chart</h2>
<p>Showing total visitors for the last 6 months</p>
</header>
<section class="relative">
<div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
<div class="text-3xl font-semibold">1,125</div>
<div class="text-muted-foreground text-xs">Visitors</div>
</div>
<canvas id="chart-doughnut" class="max-h-[200px] mx-auto"></canvas>
</div>
</section>
</div>
</div>
<div class="card">
@@ -79,21 +97,11 @@ toc:
<h2>Bar Chart - Interactive</h2>
<p>Showing total visitors for the last 6 months</p>
</header>
<section class="h-[150px]">
<section class="max-h-[150px]">
<canvas id="chart-line-interactive"></canvas>
</section>
</div>
<div class="card">
<header>
<h2>Doughnut Chart</h2>
<p>Showing total visitors for the last 6 months</p>
</header>
<section>
<canvas id="chart-doughnut"></canvas>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@@ -147,10 +155,10 @@ toc:
const tooltipHTML = `
<div
role="tooltip"
class="border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl opacity-0 absolute pointer-events-none transition-all duration-400"
class="border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl opacity-0 absolute pointer-events-none transition-all duration-400 space-y-1"
>
<h3 class="font-medium"></h3>
<ul class="grid gap-1 mt-1"></ul>
<ul class="grid gap-1"></ul>
</div>`;
const parser = new DOMParser();
const doc = parser.parseFromString(tooltipHTML.trim(), 'text/html');
@@ -162,6 +170,7 @@ toc:
const externalTooltipHandler = (context) => {
const {chart, tooltip} = context;
const chartType = chart.config._config.type;
const tooltipEl = getOrCreateTooltip(chart);
const titleEl = tooltipEl.querySelector('h3');
const bodyEl = tooltipEl.querySelector('ul');
@@ -178,20 +187,36 @@ toc:
const titleLines = tooltip.title || [];
const bodyLines = tooltip.body.map(b => b.lines);
if (titleEl) titleEl.textContent = titleLines[0] || '';
if (titleEl) titleEl.className = titleLines.length > 0 ? 'font-medium' : '';
if (titleEl) {
if (chartType === 'doughnut') {
titleEl.remove();
} else {
titleEl.textContent = titleLines[0] || '';
}
}
bodyLines.forEach((body, i) => {
const colors = tooltip.labelColors[i];
const parts = body[0].split(': ');
const label = parts[0] || '';
const label = chartType === 'doughnut'
? titleLines[0] || ''
: parts[0] || '';
const value = parts[1] || '';
console.log(colors)
let color;
switch (chartType) {
case 'doughnut':
case 'pie':
case 'bar':
color = colors.backgroundColor;
break;
default:
color = colors.borderColor;
}
bodyHtml += `<li class="flex w-full flex-wrap items-center justify-between leading-none gap-x-2">
<div class="flex items-center gap-x-1.5">
<div class="shrink-0 rounded-[2px] size-2.5 block" style="background:${colors.backgroundColor}"></div>
<div class="shrink-0 rounded-[2px] size-2.5 block" style="background:${color}"></div>
<span class="text-muted-foreground">${label}</span>
</div>
<span class="text-foreground font-medium font-mono tabular-nums">${value}</span>
@@ -250,7 +275,7 @@ toc:
let ctx = document.getElementById('chart-area-default');
let data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'Desktop',
data: [186, 305, 237, 73, 209, 214],
@@ -306,7 +331,7 @@ toc:
ctx = document.getElementById('chart-area-stacked');
data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'Desktop',
data: [186, 305, 237, 73, 209, 214],
@@ -373,7 +398,7 @@ toc:
ctx = document.getElementById('chart-bar-multiple');
data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'Desktop',
data: [186, 305, 237, 73, 209, 214],
@@ -749,28 +774,6 @@ const chartDataDoughnut = [
{ browser: "other", visitors: 190, fill: themeColors.chart5 },
]
const totalVisitors = chartDataDoughnut.reduce((sum, item) => sum + item.visitors, 0);
// Plugin to draw text in the center
const centerTextPlugin = {
id: 'centerText',
afterDraw: (chart) => {
const { ctx, chartArea } = chart;
if (!chartArea) return;
const centerX = chartArea.left + (chartArea.right - chartArea.left) / 2;
const centerY = chartArea.top + (chartArea.bottom - chartArea.top) / 2;
ctx.save();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = '1.5rem sans-serif'; // Adjust font size as needed
ctx.fillStyle = themeColors.foreground; // Use foreground color
ctx.fillText(totalVisitors.toLocaleString(), centerX, centerY); // Format number if desired
ctx.restore();
}
};
// Prepare data for the doughnut chart
const doughnutData = {
labels: chartDataDoughnut.map(d => d.browser),
@@ -790,7 +793,7 @@ const doughnutConfig = {
type: 'doughnut',
data: doughnutData,
options: {
cutout: '80%', // Adjust hole size
cutout: '50%', // Adjust hole size
plugins: {
legend: {
display: false, // Hide default legend
@@ -802,8 +805,7 @@ const doughnutConfig = {
},
centerText: {} // Keep the custom plugin for center text
}
},
plugins: [centerTextPlugin] // Register the plugin
}
};
// Assume you have a canvas with id="chart-doughnut" in your HTML
docs/src/installation.njk
+40 -6
View File
@@ -1,13 +1,13 @@
---
layout: layouts/page.njk
title: Installation
description: How to install Basecoat in your app.
description: How to install and use Basecoat in your app.
toc:
- label: Installing the CSS
id: install-css
children:
- label: Add Tailwind CSS
id: install-css-tailwind
id: install-css
- label: Add Basecoat
id: install-css-basecoat
- label: Import basecoat in your CSS
@@ -22,11 +22,16 @@ toc:
{% from "macros/code_block.njk" import code_block %}
<h2 id="install-css">Installing the CSS</h2>
<h2 id="install-css">Install the CSS</h2>
<div class="alert my-6">
{% lucide "circle-alert" %}
<h2>If you don't want to use npm, you can follow the <a href="#install-manual" class="underline underline-offset-4">manual installation instructions</a>.</h2>
</div>
<ol class="[&>h3]:step steps mb-12 md:ml-4 md:border-l md:pl-8">
<li class="step">
<h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-css-tailwind"><a href="#install-css-tailwind">Add Tailwind CSS</a></h3>
<h4 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-css-tailwind"><a href="#install-css-tailwind">Add Tailwind CSS</a></h4>
<div class="prose">
<p>Basecoat uses Tailwind CSS. You need to install it in your project.</p>
<p><a href="https://tailwindcss.com/docs/installation" target="_blank">Follow the Tailwind CSS installation instructions to get started.</a></p>
@@ -39,6 +44,9 @@ toc:
</div>
{% set code %}npm install hunvreus/basecoat{% endset %}
{{ code_block(code, "bash") }}
<div class="prose">
<p>Alternatively, you can directly <a href="https://github.com/hunvreus/basecoat/blob/main/src/css/basecoat.css" target="_blank">copy the <code>basecoat.css</code> file</a> into your project.</p>
</div>
</li>
<li class="step mt-8">
<h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-css-import"><a href="#install-css-import">Import basecoat in your CSS</a></h3>
@@ -50,6 +58,7 @@ toc:
<h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-css-done"><a href="#install-css-done">That's it</a></h3>
<div class="prose">
<p>You can now use any of the Basecoat classes in your project (e.g. <code>btn</code>, <code>card</code>, <code>input</code>, etc). Read the documentation about each component to get started (e.g. <a href="/components/button">button</a>, <a href="/components/card">card</a>, <a href="/components/input">input</a>, etc).</p>
<p>Some components (e.g. <a href="/components/select">Select</a>) require <a href="#install-js">Javascript code to work</a>.</p>
</div>
</li>
</ol>
@@ -60,15 +69,40 @@ toc:
<p><b>Some components require Javascript code to work.</b></p>
<p>The documentation provides Alpine.js code snippets to cover that. <a href="https://alpinejs.dev/docs/installation" target="_blank">Make sure to install Alpine.js if you decide to use them.</a></p>
<p>For simple components like <a href="/components/accordion">Accordion</a> or <a href="/components/slider">Slider</a>, you will notice some inline Alpine.js code that you can just copy along with the rest of the HTML.</p>
<p>For more complex components (<a href="/components/dialog">Dialog</a>, <a href="/components/dropdown-menu">Dropdown Menu</a>, <a href="/components/popover">Popover</a>, <a href="/components/select">Select</a>, <a href="/components/tabs">Tabs</a> and <a href="/components/tooltip">Toast</a>), we provide a separate <code>&lt;script&gt;</code> code snippet that must be included anywhere <b>before</b> the HTML for the component.</p>
<p>For more complex components (<a href="/components/dialog">Dialog</a>, <a href="/components/dropdown-menu">Dropdown Menu</a>, <a href="/components/popover">Popover</a>, <a href="/components/select">Select</a>, <a href="/components/tabs">Tabs</a> and <a href="/components/tooltip">Toast</a>), you have one of 2 options:
<ul>
<li>Copy the Javascript snippet provided in the documentation page into your project.</li>
<li>
<p><a href="https://github.com/hunvreus/basecoat/tree/main/src/js" target="_blank">Download the script as a separate file</a> and include it in your project (<a href="#install-cli">or let the CLI do it for you</a>). <b>If you use this approach, make sure to load the file before the Alpine.js core JS file and register the component on the <code>alpine:init</code> event.</b> For example:</p>
{% set code %}<script src="/assets/js/dialog.js" defer></script>
<script>
document.addEventListener('alpine:init', () => {
window.basecoat.registerDialog(Alpine);
});
</script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>{% endset %}
{{ code_block(code, "html") }}
</li>
</ul>
<p>You are also welcome to write your own Javascript.</p>
<p>All of the components try and implement WAI-ARIA standards to make them accessible.</p>
</div>
<h2 id="install-cli">Use the CLI</h2>
<div class="prose">
<p>If you're using Nunjucks or Jinja, you can use the CLI to install the CSS and macros for any of the complex components(e.g. <a href="/components/dialog">Dialog</a>). It will copy the JS and `<code>.html.jinja</code> or <code>.njk</code> macros into your code.</p>
<p>For example, to add the Dialog component, run:</p>
{% set code %}npx basecoatui add dialog{% endset %}
{{ code_block(code, "bash") }}
<p>You will be asked to confirm the template engine and destination directory for the Javascript and macros.</p>
</div>
<h2 id="install-macros"><a href="#install-macros">Use Nunjucks or Jinja macros</a></h2>
<div class="prose">
<p>For more complex components, you can use <a href="https://mozilla.github.io/nunjucks/" target="_blank">Nunjucks</a> or <a href="https://jinja.palletsprojects.com" target="_blank">Jinja</a> macros to help you generate the HTML and Javascript code.</p>
<p>To install them, either <a href="https://github.com/hunvreus/basecoat/tree/main/src" target="_blank">copy them directly from the GitHub repository</a> or use <a href="#install-cli">the CLI</a> to do the work for you.</p>
<p>For example, here's how you could use the <code>select()</code> macro to generate the HTML and Javascript code for a <a href="/components/select">Select</a> component:</p>
{% set code %}{% raw %}{% call select() %}
<div role="group" aria-labelledby="fruit-options-label">
@@ -95,7 +129,7 @@ toc:
<h2 id="install-theming"><a href="#install-theming">Theming</a></h2>
<div class="prose">
<p>You can import any <a href="https://shadcn-ui.com" target="_blank">shadcn/ui</a> compatible theme. For example:</p>
<p>You can import any <a href="https://shadcn-ui.com" target="_blank">shadcn/ui</a> compatible theme (e.g. <a href="https://tweakcn.com" target="_blank">tweakcn</a>). For example:</p>
<ul>
<li>Go to <a href="https://ui.shadcn.com/themes" target="_blank">ui.shadcn.com/themes</a> and select a theme.</li>
<li>Click "Copy code" and save the theme variables in a file (e.g. <code>theme.css</code>).</li>
docs/src/introduction.njk
+6
View File
@@ -0,0 +1,6 @@
---
layout: layouts/page.njk
title: Introduction
description: Basecoat is a set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks and AI models. Open Source. Open Code.
---
docs/src/kitchen-sink.njk
+41 -27
View File
@@ -1,30 +1,44 @@
---
layout: layouts/base.njk
---
{% include "partials/kitchen-sink/accordion.njk" %}
{% include "partials/kitchen-sink/alert.njk" %}
{% include "partials/kitchen-sink/alert-dialog.njk" %}
{% include "partials/kitchen-sink/avatar.njk" %}
{% include "partials/kitchen-sink/badge.njk" %}
{% include "partials/kitchen-sink/breadcrumb.njk" %}
{% include "partials/kitchen-sink/button.njk" %}
{% include "partials/kitchen-sink/card.njk" %}
{% include "partials/kitchen-sink/checkbox.njk" %}
{% include "partials/kitchen-sink/combobox.njk" %}
{% include "partials/kitchen-sink/dialog.njk" %}
{% include "partials/kitchen-sink/dropdown-menu.njk" %}
{% include "partials/kitchen-sink/form.njk" %}
{% include "partials/kitchen-sink/input.njk" %}
{% include "partials/kitchen-sink/label.njk" %}
{% include "partials/kitchen-sink/pagination.njk" %}
{% include "partials/kitchen-sink/popover.njk" %}
{% include "partials/kitchen-sink/radio-group.njk" %}
{% include "partials/kitchen-sink/select.njk" %}
{% include "partials/kitchen-sink/skeleton.njk" %}
{% include "partials/kitchen-sink/slider.njk" %}
{% include "partials/kitchen-sink/switch.njk" %}
{% include "partials/kitchen-sink/table.njk" %}
{% include "partials/kitchen-sink/tabs.njk" %}
{% include "partials/kitchen-sink/textarea.njk" %}
{% include "partials/kitchen-sink/toast.njk" %}
{% include "partials/kitchen-sink/tooltip.njk" %}
{% set components = [
{ label: "Accordion", id: "accordion" },
{ label: "Alert", id: "alert" },
{ label: "Alert Dialog", id: "alert-dialog" },
{ label: "Avatar", id: "avatar" },
{ label: "Badge", id: "badge" },
{ label: "Breadcrumb", id: "breadcrumb" },
{ label: "Button", id: "button" },
{ label: "Card", id: "card" },
{ label: "Checkbox", id: "checkbox" },
{ label: "Combobox", id: "combobox" },
{ label: "Dialog", id: "dialog" },
{ label: "Dropdown Menu", id: "dropdown-menu" },
{ label: "Form", id: "form" },
{ label: "Input", id: "input" },
{ label: "Label", id: "label" },
{ label: "Pagination", id: "pagination" },
{ label: "Popover", id: "popover" },
{ label: "Radio Group", id: "radio-group" },
{ label: "Select", id: "select" },
{ label: "Skeleton", id: "skeleton" },
{ label: "Slider", id: "slider" },
{ label: "Switch", id: "switch" },
{ label: "Table", id: "table" },
{ label: "Tabs", id: "tabs" },
{ label: "Textarea", id: "textarea" },
{ label: "Toast", id: "toast" },
{ label: "Tooltip", id: "tooltip" }
] %}
<div class="flex gap-x-10">
<div class="grid gap-4 flex-1">
{% for component in components %}
{% include "partials/kitchen-sink/" ~ component.id ~ ".njk" %}
{% endfor %}
</div>
<div class="hidden text-sm xl:block w-full max-w-[200px]">
{% from "macros/toc.njk" import toc_nav %}
{{ toc_nav(components) }}
</div>
</div>
src/css/basecoat.css
-12
View File
@@ -526,18 +526,6 @@
@apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px];
@apply aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive;
}
.form input[type='date'],
.form input[type='datetime-local'],
.form input[type='month'],
.form input[type='week'],
.form input[type='time'],
.input[type='date'],
.input[type='datetime-local'],
.input[type='month'],
.input[type='week'],
.input[type='time'] {
}
}
/* Label */
src/js/dropdown-menu.js
+1 -1
View File
@@ -83,7 +83,7 @@ window.basecoat.registerDropdownMenu = function(Alpine) {
'@keydown.up.prevent'() { this.moveMenuitemFocus(-1); },
'@keydown.home.prevent'() { this.focusMenuitem(0) },
'@keydown.end.prevent'() { this.focusMenuitem(this.menuItems.length - 1) },
'@mousemove'(e) { this.handleMenuitemMousemove(e) },
'@mouseover'(e) { this.handleMenuitemMousemove(e) },
':aria-hidden'() { return !this.open },
'x-cloak': ''
},
src/js/select.js
+1 -1
View File
@@ -130,7 +130,7 @@ window.basecoat.registerSelect = function(Alpine) {
},
$content: {
'@click'(e) { this.handleOptionClick(e) },
'@mousemove'(e) { this.handleOptionMousemove(e) },
'@mouseover'(e) { this.handleOptionMousemove(e) },
':aria-hidden'() { return !this.open },
'x-cloak': ''
},