@hanzo/ui 5.3.25 → 5.3.28

package/docs/components/ui/tabs.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import {
+  type ComponentProps,
+  createContext,
+  use,
+  useEffectEvent,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import * as Primitive from '@radix-ui/react-tabs';
+import { mergeRefs } from '@/utils/merge-refs';
+
+type ChangeListener = (v: string) => void;
+const listeners = new Map<string, Set<ChangeListener>>();
+
+export interface TabsProps extends ComponentProps<typeof Primitive.Tabs> {
+  /**
+   * Identifier for Sharing value of tabs
+   */
+  groupId?: string;
+
+  /**
+   * Enable persistent
+   */
+  persist?: boolean;
+
+  /**
+   * If true, updates the URL hash based on the tab's id
+   */
+  updateAnchor?: boolean;
+}
+
+const TabsContext = createContext<{
+  valueToIdMap: Map<string, string>;
+} | null>(null);
+
+function useTabContext() {
+  const ctx = use(TabsContext);
+  if (!ctx) throw new Error('You must wrap your component in <Tabs>');
+  return ctx;
+}
+
+export const TabsList = Primitive.TabsList;
+
+export const TabsTrigger = Primitive.TabsTrigger;
+
+export function Tabs({
+  ref,
+  groupId,
+  persist = false,
+  updateAnchor = false,
+  defaultValue,
+  value: _value,
+  onValueChange: _onValueChange,
+  ...props
+}: TabsProps) {
+  const tabsRef = useRef<HTMLDivElement>(null);
+  const valueToIdMap = useMemo(() => new Map<string, string>(), []);
+  const [value, setValue] =
+    _value === undefined
+      ? // eslint-disable-next-line react-hooks/rules-of-hooks -- not supposed to change controlled/uncontrolled
+        useState(defaultValue)
+      : // eslint-disable-next-line react-hooks/rules-of-hooks -- not supposed to change controlled/uncontrolled
+        [_value, useEffectEvent((v: string) => _onValueChange?.(v))];
+
+  useLayoutEffect(() => {
+    if (!groupId) return;
+    let previous = sessionStorage.getItem(groupId);
+    if (persist) previous ??= localStorage.getItem(groupId);
+    if (previous) setValue(previous);
+
+    const groupListeners = listeners.get(groupId) ?? new Set();
+    groupListeners.add(setValue);
+    listeners.set(groupId, groupListeners);
+    return () => {
+      groupListeners.delete(setValue);
+    };
+  }, [groupId, persist, setValue]);
+
+  useLayoutEffect(() => {
+    const hash = window.location.hash.slice(1);
+    if (!hash) return;
+
+    for (const [value, id] of valueToIdMap.entries()) {
+      if (id === hash) {
+        setValue(value);
+        tabsRef.current?.scrollIntoView();
+        break;
+      }
+    }
+  }, [setValue, valueToIdMap]);
+
+  return (
+    <Primitive.Tabs
+      ref={mergeRefs(ref, tabsRef)}
+      value={value}
+      onValueChange={(v: string) => {
+        if (updateAnchor) {
+          const id = valueToIdMap.get(v);
+
+          if (id) {
+            window.history.replaceState(null, '', `#${id}`);
+          }
+        }
+
+        if (groupId) {
+          const groupListeners = listeners.get(groupId);
+          if (groupListeners) {
+            for (const listener of groupListeners) listener(v);
+          }
+
+          sessionStorage.setItem(groupId, v);
+          if (persist) localStorage.setItem(groupId, v);
+        } else {
+          setValue(v);
+        }
+      }}
+      {...props}
+    >
+      <TabsContext value={useMemo(() => ({ valueToIdMap }), [valueToIdMap])}>
+        {props.children}
+      </TabsContext>
+    </Primitive.Tabs>
+  );
+}
+
+export function TabsContent({
+  value,
+  ...props
+}: ComponentProps<typeof Primitive.TabsContent>) {
+  const { valueToIdMap } = useTabContext();
+
+  if (props.id) {
+    valueToIdMap.set(value, props.id);
+  }
+
+  return (
+    <Primitive.TabsContent value={value} {...props}>
+      {props.children}
+    </Primitive.TabsContent>
+  );
+}

package/docs/contexts/i18n.tsx

@@ -0,0 +1,56 @@
+'use client';
+import { createContext, useContext } from 'react';
+
+export interface Translations {
+  search: string;
+  searchNoResult: string;
+
+  toc: string;
+  tocNoHeadings: string;
+
+  lastUpdate: string;
+  chooseLanguage: string;
+  nextPage: string;
+  previousPage: string;
+  chooseTheme: string;
+  editOnGithub: string;
+}
+
+export interface LocaleItem {
+  name: string;
+  locale: string;
+}
+
+interface I18nContextType {
+  locale?: string;
+  onChange?: (v: string) => void;
+  text: Translations;
+  locales?: LocaleItem[];
+}
+
+export const defaultTranslations: Translations = {
+  search: 'Search',
+  searchNoResult: 'No results found',
+  toc: 'On this page',
+  tocNoHeadings: 'No Headings',
+  lastUpdate: 'Last updated on',
+  chooseLanguage: 'Choose a language',
+  nextPage: 'Next Page',
+  previousPage: 'Previous Page',
+  chooseTheme: 'Theme',
+  editOnGithub: 'Edit on GitHub',
+};
+
+export const I18nContext = createContext<I18nContextType>({
+  text: defaultTranslations,
+});
+
+export function I18nLabel(props: { label: keyof Translations }): string {
+  const { text } = useI18n();
+
+  return text[props.label];
+}
+
+export function useI18n(): I18nContextType {
+  return useContext(I18nContext);
+}

package/docs/contexts/search.tsx

@@ -0,0 +1,165 @@
+'use client';
+import {
+  type ComponentType,
+  type ReactNode,
+  useEffect,
+  useMemo,
+  useState,
+  createContext,
+  use,
+  useEffectEvent,
+} from 'react';
+
+interface HotKey {
+  display: ReactNode;
+
+  /**
+   * Key code or a function determining whether the key is pressed.
+   */
+  key: string | ((e: KeyboardEvent) => boolean);
+}
+
+export interface SharedProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export type SearchLink = [name: string, href: string];
+
+export interface TagItem {
+  name: string;
+  value: string;
+}
+
+export interface SearchProviderProps {
+  /**
+   * Preload search dialog before opening it
+   *
+   * @defaultValue `true`
+   */
+  preload?: boolean;
+
+  /**
+   * Custom links to be displayed if search is empty
+   */
+  links?: SearchLink[];
+
+  /**
+   * Hotkeys for triggering search dialog
+   *
+   * @defaultValue Meta/Ctrl + K
+   */
+  hotKey?: HotKey[];
+
+  /**
+   * Replace default search dialog, allowing you to use other solutions such as Algolia Search
+   *
+   * It receives the `open` and `onOpenChange` prop, can be lazy loaded with `next/dynamic`
+   */
+  SearchDialog: ComponentType<SharedProps>;
+
+  /**
+   * Additional props to the dialog
+   */
+  options?: Partial<SharedProps & Record<string, unknown>>;
+
+  children?: ReactNode;
+}
+
+interface SearchContextType {
+  enabled: boolean;
+  hotKey: HotKey[];
+  setOpenSearch: (value: boolean) => void;
+}
+
+const SearchContext = createContext<SearchContextType>({
+  enabled: false,
+  hotKey: [],
+  setOpenSearch: () => undefined,
+});
+
+export function useSearchContext(): SearchContextType {
+  return use(SearchContext);
+}
+
+function MetaOrControl() {
+  const [key, setKey] = useState('⌘');
+
+  useEffect(() => {
+    const isWindows = window.navigator.userAgent.includes('Windows');
+
+    if (isWindows) setKey('Ctrl');
+  }, []);
+
+  return key;
+}
+
+export function SearchProvider({
+  SearchDialog,
+  children,
+  preload = true,
+  options,
+  hotKey = [
+    {
+      key: (e) => e.metaKey || e.ctrlKey,
+      display: <MetaOrControl />,
+    },
+    {
+      key: 'k',
+      display: 'K',
+    },
+  ],
+  links,
+}: SearchProviderProps) {
+  const [isOpen, setIsOpen] = useState(preload ? false : undefined);
+  const onKeyDown = useEffectEvent((e: KeyboardEvent) => {
+    if (
+      hotKey.every((v) =>
+        typeof v.key === 'string' ? e.key === v.key : v.key(e),
+      )
+    ) {
+      setIsOpen((open) => !open);
+      e.preventDefault();
+    }
+  });
+
+  useEffect(() => {
+    window.addEventListener('keydown', onKeyDown);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [hotKey]);
+
+  return (
+    <SearchContext
+      value={useMemo(
+        () => ({
+          enabled: true,
+          hotKey,
+          setOpenSearch: setIsOpen,
+        }),
+        [hotKey],
+      )}
+    >
+      {isOpen !== undefined && (
+        <SearchDialog
+          open={isOpen}
+          onOpenChange={setIsOpen}
+          // @ts-expect-error -- insert prop for official UIs
+          links={links}
+          {...options}
+        />
+      )}
+      {children}
+    </SearchContext>
+  );
+}
+
+/**
+ * Show children only when search is enabled via React Context
+ */
+export function SearchOnly({ children }: { children: ReactNode }) {
+  const search = useSearchContext();
+
+  if (search.enabled) return children;
+}

package/docs/contexts/tree.tsx

@@ -0,0 +1,65 @@
+'use client';
+import type * as PageTree from '@hanzo/docs-core/page-tree';
+import { usePathname } from '@hanzo/docs-core/framework';
+import { type ReactNode, useMemo, useRef, createContext, use } from 'react';
+import { searchPath } from '@hanzo/docs-core/breadcrumb';
+
+type MakeRequired<O, K extends keyof O> = Omit<O, K> & Pick<Required<O>, K>;
+
+interface TreeContextType {
+  root: MakeRequired<PageTree.Root | PageTree.Folder, '$id'>;
+  full: PageTree.Root;
+}
+
+const TreeContext = createContext<TreeContextType | null>(null);
+const PathContext = createContext<PageTree.Node[]>([]);
+
+export function TreeContextProvider({
+  tree: rawTree,
+  children,
+}: {
+  tree: PageTree.Root;
+  children: ReactNode;
+}) {
+  const nextIdRef = useRef(0);
+  const pathname = usePathname();
+
+  // I found that object-typed props passed from a RSC will be re-constructed, hence breaking all hooks' dependencies
+  // using the id here to make sure this never happens
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const tree = useMemo(() => rawTree, [rawTree.$id ?? rawTree]);
+  const path = useMemo(() => {
+    return (
+      searchPath(tree.children, pathname) ??
+      (tree.fallback ? searchPath(tree.fallback.children, pathname) : null) ??
+      []
+    );
+  }, [tree, pathname]);
+
+  const root =
+    path.findLast((item) => item.type === 'folder' && item.root) ?? tree;
+  root.$id ??= String(nextIdRef.current++);
+
+  return (
+    <TreeContext
+      value={useMemo(
+        () => ({ root, full: tree }) as TreeContextType,
+        [root, tree],
+      )}
+    >
+      <PathContext value={path}>{children}</PathContext>
+    </TreeContext>
+  );
+}
+
+export function useTreePath(): PageTree.Node[] {
+  return use(PathContext);
+}
+
+export function useTreeContext(): TreeContextType {
+  const ctx = use(TreeContext);
+
+  if (!ctx)
+    throw new Error('You must wrap this component under <DocsLayout />');
+  return ctx;
+}

package/docs/css/black.css

@@ -0,0 +1,39 @@
+@import './colors/index.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/docs/css/catppuccin.css

@@ -0,0 +1,49 @@
+@import './colors/index.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/docs/css/colors/index.css

@@ -0,0 +1,51 @@
+@theme {
+  --color-fd-background: hsl(0, 0%, 96%);
+  --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%, 98%);
+  --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
+  --color-fd-card: hsl(0, 0%, 94.7%);
+  --color-fd-card-foreground: hsl(0, 0%, 3.9%);
+  --color-fd-border: hsla(0, 0%, 80%, 50%);
+  --color-fd-primary: hsl(0, 0%, 9%);
+  --color-fd-primary-foreground: hsl(0, 0%, 98%);
+  --color-fd-secondary: hsl(0, 0%, 93.1%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 9%);
+  --color-fd-accent: hsla(0, 0%, 82%, 50%);
+  --color-fd-accent-foreground: hsl(0, 0%, 9%);
+  --color-fd-ring: hsl(0, 0%, 63.9%);
+  --color-fd-overlay: hsla(0, 0%, 0%, 0.2);
+}
+
+.dark {
+  --color-fd-background: hsl(0, 0%, 7.04%);
+  --color-fd-foreground: hsl(0, 0%, 92%);
+  --color-fd-muted: hsl(0, 0%, 12.9%);
+  --color-fd-muted-foreground: hsla(0, 0%, 70%, 0.8);
+  --color-fd-popover: hsl(0, 0%, 11.6%);
+  --color-fd-popover-foreground: hsl(0, 0%, 86.9%);
+  --color-fd-card: hsl(0, 0%, 9.8%);
+  --color-fd-card-foreground: hsl(0, 0%, 98%);
+  --color-fd-border: hsla(0, 0%, 40%, 20%);
+  --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%, 92%);
+  --color-fd-accent: hsla(0, 0%, 40.9%, 30%);
+  --color-fd-accent-foreground: hsl(0, 0%, 90%);
+  --color-fd-ring: hsl(0, 0%, 54.9%);
+  --color-fd-overlay: hsla(0, 0%, 0%, 0.2);
+}
+
+@theme static {
+  --color-fd-info: oklch(62.3% 0.214 259.815);
+  --color-fd-warning: oklch(76.9% 0.188 70.08);
+  --color-fd-error: oklch(63.7% 0.237 25.331);
+  --color-fd-success: oklch(72.3% 0.219 149.579);
+  --color-fd-idea: oklch(70.5% 0.209 60.849);
+  --color-fd-diff-remove: rgba(200, 10, 100, 0.12);
+  --color-fd-diff-remove-symbol: rgb(230, 10, 100);
+  --color-fd-diff-add: rgba(14, 180, 100, 0.1);
+  --color-fd-diff-add-symbol: rgb(10, 200, 100);
+}

package/docs/css/dusk.css

@@ -0,0 +1,47 @@
+@import './colors/index.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/docs/css/layouts/docs.css

@@ -0,0 +1 @@
+@source '../../dist/layouts/docs/**/*.js';

package/docs/css/layouts/home.css

@@ -0,0 +1 @@
+@source '../../dist/layouts/home/**/*.js';

package/docs/css/layouts/notebook.css

@@ -0,0 +1 @@
+@source '../../dist/layouts/notebook/**/*.js';

package/docs/css/neutral.css

@@ -0,0 +1,7 @@
+@import './colors/index.css';
+
+.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%);
+}

package/docs/css/ocean.css

@@ -0,0 +1,48 @@
+@import './colors/index.css';
+
+@theme {
+  --color-fd-background: hsl(0, 0%, 98%);
+  --color-fd-foreground: hsl(0, 0%, 3.9%);
+  --color-fd-muted: hsl(220, 90%, 96.1%);
+  --color-fd-muted-foreground: hsl(0, 0%, 45.1%);
+  --color-fd-popover: hsl(0, 0%, 98%);
+  --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
+  --color-fd-card: hsl(220, 50%, 98%);
+  --color-fd-card-foreground: hsl(0, 0%, 3.9%);
+  --color-fd-border: hsl(220, 50%, 89.8%);
+  --color-fd-primary: hsl(210, 80%, 20.2%);
+  --color-fd-primary-foreground: hsl(0, 0%, 98%);
+  --color-fd-secondary: hsl(220, 90%, 96.1%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 9%);
+  --color-fd-accent: hsl(220, 50%, 94.1%);
+  --color-fd-accent-foreground: hsl(0, 0%, 9%);
+  --color-fd-ring: hsl(220, 100%, 63.9%);
+}
+
+.dark {
+  --color-fd-background: hsl(220, 60%, 8%);
+  --color-fd-foreground: hsl(220, 60%, 94.5%);
+  --color-fd-muted: hsl(220, 50%, 10%);
+  --color-fd-muted-foreground: hsl(220, 30%, 65%);
+  --color-fd-popover: hsl(220, 50%, 10%);
+  --color-fd-popover-foreground: hsl(220, 60%, 94.5%);
+  --color-fd-card: hsla(220, 56%, 15%, 0.4);
+  --color-fd-card-foreground: hsl(220, 60%, 94.5%);
+  --color-fd-border: hsla(220, 50%, 50%, 0.2);
+  --color-fd-primary: hsl(205, 100%, 85%);
+  --color-fd-primary-foreground: hsl(0, 0%, 9%);
+  --color-fd-secondary: hsl(220, 50%, 20%);
+  --color-fd-secondary-foreground: hsl(220, 80%, 90%);
+  --color-fd-accent: hsl(220, 40%, 20%);
+  --color-fd-accent-foreground: hsl(220, 80%, 90%);
+  --color-fd-ring: hsl(205, 100%, 85%);
+}
+
+.dark body {
+  background-image: linear-gradient(
+    rgba(5, 105, 255, 0.15),
+    transparent 20rem,
+    transparent
+  );
+  background-repeat: no-repeat;
+}