@hanzo/docs-base-ui 16.5.0 → 16.7.5

package/README.md

@@ -1,5 +1,5 @@
-# Fumadocs UI
+# @hanzo/docs-base-ui
 
-The React.js docs framework.
+The React.js docs framework base UI components.
 
-[Read Documentation](https://hanzo-docs.dev/docs/ui)
+[Read Documentation](https://hanzoai.github.io/docs/docs/ui)

package/css/aspen.css

@@ -0,0 +1,39 @@
+@import './lib/default-colors.css';
+
+@theme {
+  --color-fd-background: hsl(75, 45%, 96%);
+  --color-fd-foreground: hsl(75, 35%, 18%);
+  --color-fd-primary: hsl(80, 60%, 40%);
+  --color-fd-primary-foreground: hsl(80, 100%, 16%);
+  --color-fd-border: hsla(80, 35%, 70%, 0.5);
+  --color-fd-ring: hsl(80, 60%, 40%);
+  --color-fd-accent: hsl(75, 50%, 90%);
+  --color-fd-accent-foreground: hsl(80, 60%, 22%);
+  --color-fd-muted: hsl(75, 40%, 92%);
+  --color-fd-muted-foreground: hsl(75, 25%, 45%);
+  --color-fd-secondary: hsl(80, 45%, 88%);
+  --color-fd-secondary-foreground: hsl(80, 50%, 18%);
+  --color-fd-card: hsl(75, 45%, 94%);
+  --color-fd-card-foreground: hsl(75, 35%, 18%);
+  --color-fd-popover: hsl(75, 45%, 97%);
+  --color-fd-popover-foreground: hsl(75, 35%, 18%);
+}
+
+.dark {
+  --color-fd-background: hsl(80, 25%, 7%);
+  --color-fd-foreground: hsl(75, 35%, 88%);
+  --color-fd-primary: hsl(80, 60%, 55%);
+  --color-fd-primary-foreground: hsl(80, 35%, 8%);
+  --color-fd-border: hsla(80, 35%, 35%, 0.35);
+  --color-fd-ring: hsl(80, 60%, 55%);
+  --color-fd-accent: hsl(80, 25%, 18%);
+  --color-fd-accent-foreground: hsl(80, 60%, 75%);
+  --color-fd-muted: hsl(80, 25%, 12%);
+  --color-fd-muted-foreground: hsl(75, 25%, 65%);
+  --color-fd-secondary: hsl(80, 25%, 16%);
+  --color-fd-secondary-foreground: hsl(75, 35%, 88%);
+  --color-fd-card: hsl(80, 25%, 10%);
+  --color-fd-card-foreground: hsl(75, 35%, 88%);
+  --color-fd-popover: hsl(80, 25%, 8%);
+  --color-fd-popover-foreground: hsl(75, 35%, 88%);
+}

package/css/black.css

@@ -1 +1,39 @@
-@import '@hanzo/docs-ui/css/colors/black.css';
+@import './lib/default-colors.css';
+
+@theme {
+  --color-fd-background: hsl(0, 0%, 98%);
+  --color-fd-foreground: hsl(0, 0%, 3.9%);
+  --color-fd-muted: hsl(0, 0%, 96.1%);
+  --color-fd-muted-foreground: hsl(0, 0%, 45.1%);
+  --color-fd-popover: hsl(0, 0%, 100%);
+  --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
+  --color-fd-card: hsl(0, 0%, 99.7%);
+  --color-fd-card-foreground: hsl(0, 0%, 3.9%);
+  --color-fd-border: hsla(0, 0%, 60%, 0.2);
+  --color-fd-primary: hsl(0, 0%, 9%);
+  --color-fd-primary-foreground: hsl(0, 0%, 98%);
+  --color-fd-secondary: hsl(0, 0%, 96.1%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 9%);
+  --color-fd-accent: hsl(0, 0%, 94.1%);
+  --color-fd-accent-foreground: hsl(0, 0%, 9%);
+  --color-fd-ring: hsl(0, 0%, 63.9%);
+}
+
+.dark {
+  --color-fd-background: hsl(0, 0%, 2%);
+  --color-fd-foreground: hsl(0, 0%, 98%);
+  --color-fd-muted: hsl(0, 0%, 8%);
+  --color-fd-muted-foreground: hsl(0, 0%, 60%);
+  --color-fd-popover: hsl(0, 0%, 4%);
+  --color-fd-popover-foreground: hsl(0, 0%, 98%);
+  --color-fd-card: hsl(0, 0%, 4%);
+  --color-fd-card-foreground: hsl(0, 0%, 98%);
+  --color-fd-border: hsl(0, 0%, 50%, 0.2);
+  --color-fd-primary: hsl(0, 0%, 98%);
+  --color-fd-primary-foreground: hsl(0, 0%, 9%);
+  --color-fd-secondary: hsl(0, 0%, 12.9%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 98%);
+  --color-fd-accent: hsl(0, 0%, 15%);
+  --color-fd-accent-foreground: hsl(0, 0%, 100%);
+  --color-fd-ring: hsl(0, 0%, 34.9%);
+}

package/css/catppuccin.css

@@ -1 +1,49 @@
-@import '@hanzo/docs-ui/css/colors/catppuccin.css';
+@import './lib/default-colors.css';
+
+@theme {
+  --color-fd-popover: hsl(220, 22%, 92%);
+  --color-fd-popover-foreground: hsl(234, 16%, 35%);
+  --color-fd-secondary-foreground: hsl(234, 16%, 35%);
+  --color-fd-border: hsl(223, 16%, 83%);
+  --color-fd-primary: hsl(266, 85%, 58%);
+  --color-fd-primary-foreground: hsl(220, 22%, 92%);
+  --color-fd-muted: hsl(220, 22%, 92%);
+  --color-fd-card: hsl(220, 22%, 92%);
+  --color-fd-accent: hsl(223, 16%, 83%);
+  --color-fd-accent-foreground: hsl(234, 16%, 35%);
+  --color-fd-card-foreground: hsl(234, 16%, 35%);
+  --color-fd-muted-foreground: hsl(233, 10%, 47%);
+  --color-fd-foreground: hsl(234, 16%, 35%);
+  --color-fd-secondary: hsl(220, 22%, 92%);
+  --color-fd-background: hsl(220, 23%, 95%);
+  --color-fd-ring: hsl(267, 84%, 81%);
+}
+
+.dark {
+  --color-fd-background: hsl(240, 21%, 15%);
+  --color-fd-foreground: hsl(226, 64%, 88%);
+  --color-fd-ring: hsl(267, 84%, 81%);
+  --color-fd-primary: hsl(267, 84%, 81%);
+  --color-fd-popover: hsl(240, 23%, 9%);
+  --color-fd-card: hsl(240, 21%, 12%);
+  --color-fd-muted: hsl(240, 21%, 12%);
+  --color-fd-border: hsl(237, 16%, 23%);
+  --color-fd-accent: hsl(237, 16%, 23%);
+  --color-fd-secondary: hsl(240, 21%, 12%);
+  --color-fd-primary-foreground: hsl(240, 23%, 9%);
+  --color-fd-card-foreground: hsl(226, 64%, 88%);
+  --color-fd-secondary-foreground: hsl(226, 64%, 88%);
+  --color-fd-popover-foreground: hsl(226, 64%, 88%);
+  --color-fd-accent-foreground: hsl(226, 64%, 88%);
+  --color-fd-muted-foreground: hsl(228, 24%, 72%);
+}
+
+#nd-sidebar {
+  --color-fd-secondary: hsl(223, 16%, 83%);
+  --color-fd-muted: hsl(223, 16%, 83%);
+}
+
+.dark #nd-sidebar {
+  --color-fd-secondary: hsl(237, 16%, 23%);
+  --color-fd-muted: hsl(237, 16%, 23%);
+}

package/css/dusk.css

@@ -1 +1,47 @@
-@import '@hanzo/docs-ui/css/colors/dusk.css';
+@import './lib/default-colors.css';
+
+@theme {
+  --color-fd-background: hsl(250, 20%, 92%);
+  --color-fd-primary: hsl(340, 40%, 48%);
+  --color-fd-border: hsl(240, 40%, 90%);
+  --color-fd-accent: hsl(250, 30%, 90%);
+  --color-fd-accent-foreground: hsl(250, 20%, 20%);
+  --color-fd-muted: hsl(240, 30%, 94%);
+  --color-fd-muted-foreground: hsl(240, 10%, 50%);
+  --color-fd-foreground: hsl(220, 20%, 30%);
+  --color-fd-secondary: hsl(250, 40%, 94%);
+  --color-fd-secondary-foreground: hsl(240, 40%, 10%);
+  --color-fd-card: hsl(250, 20%, 92%);
+  --color-fd-card-foreground: hsl(250, 20%, 20%);
+  --color-fd-popover-foreground: hsl(250, 40%, 20%);
+  --color-fd-popover: hsl(250, 40%, 96%);
+  --color-fd-primary-foreground: hsl(240, 80%, 20%);
+  --color-fd-ring: hsl(340, 40%, 48%);
+}
+
+.dark {
+  --color-fd-ring: hsl(340, 100%, 90%);
+  --color-fd-primary-foreground: hsl(240, 40%, 4%);
+  --color-fd-popover: hsl(240, 20%, 5%);
+  --color-fd-popover-foreground: hsl(250, 20%, 90%);
+  --color-fd-primary: hsl(340, 100%, 90%);
+  --color-fd-border: hsl(220, 15%, 15%);
+  --color-fd-background: hsl(220, 15%, 6%);
+  --color-fd-foreground: hsl(220, 15%, 87%);
+  --color-fd-muted: hsl(220, 20%, 15%);
+  --color-fd-muted-foreground: hsl(220, 15%, 60%);
+  --color-fd-accent: hsl(250, 20%, 15%);
+  --color-fd-secondary: hsl(240, 20%, 15%);
+  --color-fd-card-foreground: hsl(240, 15%, 87%);
+  --color-fd-card: hsl(240, 20%, 5%);
+  --color-fd-secondary-foreground: hsl(250, 20%, 90%);
+  --color-fd-accent-foreground: hsl(340, 5%, 90%);
+}
+
+#nd-sidebar {
+  background-color: hsl(250 20% 90%);
+}
+
+.dark #nd-sidebar {
+  background-color: hsl(240 20% 5%);
+}

package/css/emerald.css

@@ -0,0 +1,39 @@
+@import './lib/default-colors.css';
+
+@theme {
+  --color-fd-background: hsl(165, 45%, 96%);
+  --color-fd-foreground: hsl(165, 40%, 18%);
+  --color-fd-primary: hsl(168, 70%, 40%);
+  --color-fd-primary-foreground: hsl(168, 100%, 12%);
+  --color-fd-border: hsla(168, 40%, 70%, 0.5);
+  --color-fd-ring: hsl(168, 70%, 40%);
+  --color-fd-accent: hsl(165, 50%, 90%);
+  --color-fd-accent-foreground: hsl(168, 70%, 20%);
+  --color-fd-muted: hsl(165, 40%, 92%);
+  --color-fd-muted-foreground: hsl(165, 30%, 45%);
+  --color-fd-secondary: hsl(168, 45%, 88%);
+  --color-fd-secondary-foreground: hsl(168, 60%, 18%);
+  --color-fd-card: hsl(165, 45%, 94%);
+  --color-fd-card-foreground: hsl(165, 40%, 18%);
+  --color-fd-popover: hsl(165, 45%, 97%);
+  --color-fd-popover-foreground: hsl(165, 40%, 18%);
+}
+
+.dark {
+  --color-fd-background: hsl(200, 30%, 7%);
+  --color-fd-foreground: hsl(168, 40%, 88%);
+  --color-fd-primary: hsl(168, 70%, 60%);
+  --color-fd-primary-foreground: hsl(200, 40%, 8%);
+  --color-fd-border: hsla(168, 40%, 35%, 0.35);
+  --color-fd-ring: hsl(168, 70%, 60%);
+  --color-fd-accent: hsl(200, 30%, 18%);
+  --color-fd-accent-foreground: hsl(168, 70%, 75%);
+  --color-fd-muted: hsl(200, 30%, 12%);
+  --color-fd-muted-foreground: hsl(168, 25%, 65%);
+  --color-fd-secondary: hsl(200, 30%, 16%);
+  --color-fd-secondary-foreground: hsl(168, 40%, 88%);
+  --color-fd-card: hsl(200, 30%, 10%);
+  --color-fd-card-foreground: hsl(168, 40%, 88%);
+  --color-fd-popover: hsl(200, 30%, 8%);
+  --color-fd-popover-foreground: hsl(168, 40%, 88%);
+}