refactor(website): improve theme

Author: Rel1cx

apps/website/app/theme/theme.css

@@ -0,0 +1,192 @@
+@theme {
+  --color-fd-background: hsl(0, 0%, 100%);
+  --color-fd-foreground: hsl(240, 6%, 25%);
+  --color-fd-card: hsl(0, 0%, 100%);
+  --color-fd-card-foreground: hsl(0, 0%, 3.9%);
+  --color-fd-popover: hsl(0, 0%, 100%);
+  --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
+  --color-fd-primary: hsl(210, 100%, 44%);
+  --color-fd-primary-foreground: hsl(0, 0%, 98%);
+  --color-fd-secondary: hsl(240, 6%, 97%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 9%);
+  --color-fd-border: hsl(0, 0%, 89.8%);
+  --color-fd-ring: hsl(0, 0%, 63.9%);
+  --color-fd-muted: hsl(0, 0%, 96%);
+  --color-fd-muted-foreground: hsl(240, 6%, 50%);
+  --color-fd-accent: hsl(0, 0%, 94.1%);
+  --color-fd-accent-foreground: hsl(240, 6%, 25%);
+
+  --color-fd-prose-body:
+    color-mix(in oklab, var(--color-fd-foreground) 80%, transparent);
+}
+
+.dark {
+  --color-fd-background: hsl(0, 0%, 7.04%);
+  --color-fd-foreground: hsl(0, 0%, 92%);
+  --color-fd-card: hsl(0, 0%, 9.8%);
+  --color-fd-card-foreground: hsl(0, 0%, 98%);
+  --color-fd-popover: hsl(0, 0%, 9.8%);
+  --color-fd-popover-foreground: hsl(0, 0%, 88%);
+  --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-border: hsl(0, 0%, 14%);
+  --color-fd-ring: hsl(0, 0%, 54.9%);
+  --color-fd-muted: hsl(0, 0%, 12.9%);
+  --color-fd-muted-foreground: hsl(0, 0%, 60.9%);
+  --color-fd-accent: hsl(0, 0%, 16.9%);
+  --color-fd-accent-foreground: hsl(0, 0%, 90%);
+
+  --color-fd-prose-body:
+    color-mix(in oklab, var(--color-fd-foreground) 80%, transparent);
+}
+
+:root {
+  --font-family-body:
+    "SF Pro Text",
+    "SF Pro Icons",
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Noto Sans",
+    Ubuntu,
+    Cantarell,
+    "Helvetica Neue",
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
+
+  --font-family-ui:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Noto Sans",
+    Ubuntu,
+    Cantarell,
+    "Helvetica Neue",
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
+
+  --font-family-mono:
+    var(--font-ibm_plex_mono),
+    ui-monospace,
+    Menlo,
+    Monaco,
+    Consolas,
+    monospace;
+}
+
+body {
+  font-family: var(--font-family-body);
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: var(--font-family-mono);
+}
+
+button {
+  cursor: pointer;
+}
+
+:focus-visible {
+  outline: none;
+}
+
+:focus-visible:not([class*="outline-none"]) {
+  outline: 2px solid var(--color-fd-primary);
+  outline-offset: -2px;
+}
+
+[role="tabpanel"]:focus-visible {
+  outline: none;
+}
+
+#nd-docs-layout #nd-sidebar {
+  a[data-active] {
+    font-weight: 400;
+  }
+
+  p.mt-8.mb-2[style^="padding-inline-start:"] {
+    margin-top: 28px;
+    margin-bottom: 16px;
+  }
+
+  div[data-state],
+  a[data-active] {
+    margin-top: 4px;
+    margin-bottom: 4px;
+    border-radius: 6px;
+  }
+}
+
+.dark #nd-sidebar {
+  --color-fd-muted: hsl(0, 0%, 16%);
+  --color-fd-secondary: hsl(0, 0%, 18%);
+  --color-fd-muted-foreground: hsl(0, 0%, 72%);
+}
+
+.prose {
+  font-family: var(--font-family-body);
+  --tw-prose-links: var(--color-fd-primary);
+
+  .fd-codeblock.shiki {
+    background-color: color-mix(in oklab, var(--color-fd-secondary) 25%, transparent);
+  }
+
+  .fd-codeblock,
+  [data-radix-scroll-area-viewport],
+  [data-radix-scroll-area-viewport]>div {
+    outline: none;
+  }
+
+  :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+    border: none;
+    padding: .125rem .25em;
+    font-size: 14px;
+  }
+
+  table {
+    font-size: 1em;
+
+    thead tr th code,
+    tbody tr td code {
+      white-space: nowrap;
+    }
+  }
+}
+
+.dark .prose {
+  --tw-prose-body: color-mix(in oklab, var(--color-fd-foreground) 80%, transparent);
+
+  :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    color: #ffffff;
+  }
+}
+
+.dark {
+
+  .shadow-2xs,
+  .shadow-xs,
+  .shadow-sm,
+  .shadow-md,
+  .shadow-lg,
+  .shadow-xl,
+  .shadow-2xl {
+    box-shadow: 0 0 #0000;
+  }
+}