Files
simple-react-app-kit/docs/src/index.css
T

87 lines
3.2 KiB
CSS
Raw Normal View History

@import "@workspace/ui/globals.css";
@import "@workspace/search/globals.css";
@custom-variant dark (&:where(.dark, .dark *));
@layer base {
*,
*::before,
*::after {
@apply border-slate-200 dark:border-slate-800;
}
html {
@apply antialiased;
background-color: var(--docs-background-light, var(--color-white));
color: var(--docs-foreground-light, var(--color-slate-950));
font-family: "DM Serif Display", Georgia, serif;
}
html.dark {
background-color: var(--docs-background-dark, var(--color-slate-950));
color: var(--docs-foreground-dark, var(--color-slate-100));
}
:root {
--background: var(--docs-background-light, var(--color-white));
--foreground: var(--docs-foreground-light, var(--color-slate-950));
--card: var(--docs-background-light, var(--color-white));
--card-foreground: var(--docs-foreground-light, var(--color-slate-950));
--popover: var(--docs-background-light, var(--color-white));
--popover-foreground: var(--docs-foreground-light, var(--color-slate-950));
--primary: var(--color-indigo-600);
--primary-foreground: var(--color-white);
--secondary: var(--docs-surface-light, var(--color-slate-100));
--secondary-foreground: var(
--docs-foreground-light,
var(--color-slate-950)
);
--muted: var(--docs-surface-light, var(--color-slate-100));
--muted-foreground: var(--docs-muted-light, var(--color-slate-600));
--accent: var(--docs-surface-light, var(--color-slate-100));
--accent-foreground: var(--docs-foreground-light, var(--color-slate-950));
--border: var(--color-slate-200);
--input: var(--color-slate-200);
--ring: var(--color-indigo-500);
--sidebar: var(--docs-background-light, var(--color-white));
--sidebar-foreground: var(--docs-foreground-light, var(--color-slate-950));
--sidebar-border: var(--color-slate-200);
}
html.dark {
--background: var(--docs-background-dark, var(--color-slate-950));
--foreground: var(--docs-foreground-dark, var(--color-slate-100));
--card: var(--docs-surface-dark, var(--color-slate-900));
--card-foreground: var(--docs-foreground-dark, var(--color-slate-100));
--popover: var(--docs-surface-dark, var(--color-slate-900));
--popover-foreground: var(--docs-foreground-dark, var(--color-slate-100));
--primary: var(--color-indigo-400);
--primary-foreground: var(--color-slate-950);
--secondary: var(--color-slate-800);
--secondary-foreground: var(--docs-foreground-dark, var(--color-slate-100));
--muted: var(--color-slate-800);
--muted-foreground: var(--docs-muted-dark, var(--color-slate-400));
--accent: var(--color-slate-800);
--accent-foreground: var(--docs-foreground-dark, var(--color-slate-100));
--border: var(--color-slate-800);
--input: var(--color-slate-700);
--ring: var(--color-indigo-400);
--sidebar: var(--docs-surface-dark, var(--color-slate-900));
--sidebar-foreground: var(--docs-foreground-dark, var(--color-slate-100));
--sidebar-border: var(--color-slate-800);
}
body,
#root {
@apply min-h-dvh;
}
body {
@apply bg-inherit text-inherit;
}
::selection {
@apply bg-indigo-200 text-indigo-950 dark:bg-indigo-500/40 dark:text-indigo-50;
}
}