+
- Unstyled React components for building accessible web apps and design
- systems.
+ Unstyled React components for building accessible user interfaces.
From the creators of Radix, Floating UI, and MUI.
-
+
Coming soon
@@ -24,7 +23,7 @@ export default function Page() {
}
const description =
- 'Unstyled UI components for building accessible web apps and design systems.';
+ 'Unstyled UI components for building accessible user interfaces.';
export const metadata: Metadata = {
description,
diff --git a/docs/src/styles.css b/docs/src/styles.css
index 02fee04cf..8def9475d 100644
--- a/docs/src/styles.css
+++ b/docs/src/styles.css
@@ -6,13 +6,25 @@
@import 'tailwindcss/utilities';
:root {
- --color-background: #fcfcfd;
--color-content: #fff;
- --color-foreground: #18181d;
- --color-gray: oklch(12.7% 0.028 264 / 67%);
- --color-separator: #131c3a40;
- --color-link: oklch(47% 0.19 264);
- --color-gridline: #e2e3e6;
+ --color-background: oklch(98% 0.25% 264);
+ --color-foreground: oklch(21% 2% 264);
+ --color-selection: oklch(80% 0.2 264 / 60%);
+ --color-gray: oklch(12.7% 6% 264 / 67%);
+ --color-link: oklch(47% 50% 264);
+ --color-border: oklch(20% 12% 264 / 25%);
+ --color-gridline: oklch(91.6% 1% 264);
+
+ @media (prefers-color-scheme: dark) {
+ --color-content: oklch(12% 2% 264);
+ --color-background: #000;
+ --color-foreground: oklch(90% 2% 264);
+ --color-selection: oklch(50% 0.2 264 / 80%);
+ --color-gray: oklch(90% 6% 264 / 70%);
+ --color-link: oklch(69% 50% 264);
+ --color-border: oklch(90% 12% 264 / 35%);
+ --color-gridline: oklch(21.6% 1% 264);
+ }
}
html {
@@ -28,5 +40,5 @@ body {
}
::selection {
- background-color: oklch(80% 0.2 264 / 60%);
+ background-color: var(--color-selection);
}
diff --git a/docs/tailwind.config.ts b/docs/tailwind.config.ts
index f02eaa961..39115ce63 100644
--- a/docs/tailwind.config.ts
+++ b/docs/tailwind.config.ts
@@ -13,7 +13,7 @@ export default {
'color-content': 'var(--color-content)',
'color-link': 'var(--color-link)',
'color-gray': 'var(--color-gray)',
- 'color-separator': 'var(--color-separator)',
+ 'color-border': 'var(--color-border)',
},
fontFamily: {
sans: '"Unica 77", system-ui',