@bccampus/ui-components 0.9.17 → 0.9.18

package/dist/components/ui/banner.js

@@ -28,7 +28,7 @@ const __iconNode = [
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ];
 const X = createLucideIcon("x", __iconNode);
-const bannerVariants = cva("flex flex-row items-start justify-between px-(--spacing-section) text-sm", {
+const bannerVariants = cva("flex flex-row gap-2 items-start justify-between px-(--spacing-section) text-sm", {
   variants: {
     variant: {
       default: "bg-complement-3 text-white dark:text-white",
@@ -74,11 +74,11 @@ function Banner({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cn("flex-auto flex flex-col justify-center items-center", {
+            className: cn("flex-auto flex flex-col gap-1 justify-center items-center", {
               "items-start": children
             }),
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex-auto flex justify-center items-center gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-2 justify-center items-center", children: [
                 variant === "alert" ? /* @__PURE__ */ jsx(TriangleAlert, { className: "size-5" }) : /* @__PURE__ */ jsx(Info, { className: "size-5" }),
                 /* @__PURE__ */ jsx("div", { className: cn({ "text-md font-semibold": size === "lg" }), dangerouslySetInnerHTML: { __html: title } })
               ] }),

package/dist/components/ui/horizontal-list.js

@@ -14,7 +14,7 @@ const horizontalListVariants = cva(
     variants: {
       variant: {
         contain: "w-full",
-        overflow: "w-screen px-section -ms-section scroll-px-section @clamp/page:px-clamp @clamp/page:-ms-clamp @clamp/page:scroll-px-clamp"
+        overflow: "w-screen px-section -ms-section scroll-px-section clamp:px-clamp clamp:-ms-clamp clamp:scroll-px-clamp"
       }
     },
     defaultVariants: {

package/dist/components/ui/page-section.js

@@ -19,7 +19,7 @@ const pageSectionVariants = cva("group @container/page-section relative text-for
     },
     noClamp: {
       true: "w-full",
-      false: "w-full @clamp/page:px-clamp"
+      false: "w-full clamp:px-clamp"
     }
   },
   defaultVariants: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bccampus/ui-components",
-  "version": "0.9.17",
+  "version": "0.9.18",
   "description": "BCcampus React components",
   "type": "module",
   "license": "UNLICENSED",
@@ -44,7 +44,7 @@
     "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.576.0",
+    "lucide-react": "^0.577.0",
     "nanostores": "^1.1.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
@@ -53,21 +53,21 @@
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.3",
+    "@eslint/js": "^9.39.4",
     "@ladle/react": "^5.1.1",
     "@tailwindcss/vite": "^4.2.1",
-    "@types/node": "^24.11.0",
+    "@types/node": "^24.12.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react-swc": "^4.2.3",
     "baseline-browser-mapping": "^2.10.0",
-    "eslint": "^9.39.3",
+    "eslint": "^9.39.4",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "glob": "^13.0.6",
     "globals": "^17.4.0",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.56.1",
+    "typescript-eslint": "^8.57.0",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"
   }

package/src/components/ui/banner.tsx

@@ -1,90 +1,91 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils";
-import { useCallback, useState } from "react";
-import { Button } from "./button";
-import { Info, TriangleAlert, X } from "lucide-react";
-import { PageSection } from "./page-section";
-
-export type BannerVariantsProps = VariantProps<typeof bannerVariants>;
-export const bannerVariants = cva("flex flex-row items-start justify-between px-(--spacing-section) text-sm", {
-  variants: {
-    variant: {
-      default: "bg-complement-3 text-white dark:text-white",
-      alert: "bg-complement-2  text-black dark:text-black",
-    },
-    size: {
-      default: "py-2",
-      sm: "py-1",
-      lg: "py-3",
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "default",
-  },
-});
-
-export interface BannerProps extends React.ComponentProps<"div">, BannerVariantsProps {
-  id: string;
-  title: string;
-  dismissible?: boolean;
-  onDismiss?: (id: string) => void;
-}
-export function Banner({
-  className,
-  size,
-  variant,
-  dismissible,
-  onDismiss,
-  id,
-  title,
-  children,
-  ...props
-}: BannerProps) {
-  const [dismissed, setDismissed] = useState(false);
-
-  const dismiss = useCallback(() => {
-    setDismissed(true);
-    onDismiss?.(id);
-  }, [id, onDismiss]);
-
-  if (dismissed) return null;
-
-  return (
-    <PageSection
-      py="none"
-      data-slot="banner"
-      id={`announcement-${id}`}
-      className={cn(bannerVariants({ variant, size }), className)}
-      {...props}
-    >
-      <div
-        className={cn("flex-auto flex flex-col justify-center items-center", {
-          "items-start": children,
-        })}
-      >
-        <div className="flex-auto flex justify-center items-center gap-2">
-          {variant === "alert" ? <TriangleAlert className="size-5" /> : <Info className="size-5" />}
-          <div className={cn({ "text-md font-semibold": size === "lg" })} dangerouslySetInnerHTML={{ __html: title }} />
-        </div>
-        {children && <div className="pl-7" dangerouslySetInnerHTML={{ __html: children }} />}
-      </div>
-      {dismissible && (
-        <div>
-          <Button
-            variant="ghost"
-            icon
-            size="icon"
-            className={cn("size-6", {
-              "text-white dark:text-white": !variant || variant === "default",
-              "text-black dark:text-black": variant === "alert",
-            })}
-            onClick={dismiss}
-          >
-            <X />
-          </Button>
-        </div>
-      )}
-    </PageSection>
-  );
-}
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import { useCallback, useState } from "react";
+import { Button } from "./button";
+import { Info, TriangleAlert, X } from "lucide-react";
+import { PageSection } from "./page-section";
+
+export type BannerVariantsProps = VariantProps<typeof bannerVariants>;
+export const bannerVariants = cva("flex flex-row gap-2 items-start justify-between px-(--spacing-section) text-sm", {
+  variants: {
+    variant: {
+      default: "bg-complement-3 text-white dark:text-white",
+      alert: "bg-complement-2  text-black dark:text-black",
+    },
+    size: {
+      default: "py-2",
+      sm: "py-1",
+      lg: "py-3",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+export interface BannerProps extends React.ComponentProps<"div">, BannerVariantsProps {
+  id: string;
+  title: string;
+  dismissible?: boolean;
+  onDismiss?: (id: string) => void;
+}
+export function Banner({
+  className,
+  size,
+  variant,
+  dismissible,
+  onDismiss,
+  id,
+  title,
+  children,
+  ...props
+}: BannerProps) {
+  const [dismissed, setDismissed] = useState(false);
+
+  const dismiss = useCallback(() => {
+    setDismissed(true);
+    onDismiss?.(id);
+  }, [id, onDismiss]);
+
+  if (dismissed) return null;
+
+  return (
+    <PageSection
+      py="none"
+      data-slot="banner"
+      id={`announcement-${id}`}
+      className={cn(bannerVariants({ variant, size }), className)}
+      {...props}
+    >
+      <div
+        className={cn("flex-auto flex flex-col gap-1 justify-center items-center", {
+          "items-start": children,
+        })}
+      >
+        <div className="flex gap-2 justify-center items-center">
+          {variant === "alert" ? <TriangleAlert className="size-5" /> : <Info className="size-5" />}
+          <div className={cn({ "text-md font-semibold": size === "lg" })} dangerouslySetInnerHTML={{ __html: title }} />
+        </div>
+
+        {children && <div className="pl-7" dangerouslySetInnerHTML={{ __html: children }} />}
+      </div>
+      {dismissible && (
+        <div>
+          <Button
+            variant="ghost"
+            icon
+            size="icon"
+            className={cn("size-6", {
+              "text-white dark:text-white": !variant || variant === "default",
+              "text-black dark:text-black": variant === "alert",
+            })}
+            onClick={dismiss}
+          >
+            <X />
+          </Button>
+        </div>
+      )}
+    </PageSection>
+  );
+}

package/src/components/ui/horizontal-list.tsx

@@ -1,84 +1,84 @@
-import { cn } from "@/lib/utils";
-import { Button } from "./button";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-export type HorizontalListVariantsProps = VariantProps<typeof horizontalListVariants>;
-export const horizontalListVariants = cva(
-  "py-1 scrollbar-hidden overscroll-x-contain overflow-x-auto snap-start snap-mandatory scroll-smooth *:shrink-0 *:grow-0 *:snap-center *:select-none",
-  {
-    variants: {
-      variant: {
-        contain: "w-full",
-        overflow:
-          "w-screen px-section -ms-section scroll-px-section @clamp/page:px-clamp @clamp/page:-ms-clamp @clamp/page:scroll-px-clamp",
-      },
-    },
-    defaultVariants: {
-      variant: "contain",
-    },
-  },
-);
-
-export interface HorizontalListProps extends React.ComponentProps<"div">, HorizontalListVariantsProps {
-  toolbarLocation?: "bottom" | "top";
-  scrollBy?: number;
-}
-
-export function HorizontalList({
-  variant,
-  className,
-  children,
-  toolbarLocation = "bottom",
-  scrollBy = 360,
-  ...props
-}: HorizontalListProps) {
-  const rootRef = useRef<HTMLDivElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const [isOverflowed, setIsOverflowed] = useState<boolean>(true);
-
-  const scrollLeft = useCallback(() => {
-    containerRef.current?.scrollBy({ left: -scrollBy });
-  }, [scrollBy]);
-
-  const scrollRight = useCallback(() => {
-    containerRef.current?.scrollBy({ left: scrollBy });
-  }, [scrollBy]);
-
-  useEffect(() => {
-    if (rootRef.current && wrapperRef.current) {
-      const rootRect = rootRef.current.getBoundingClientRect();
-      const wrapperRect = wrapperRef.current.getBoundingClientRect();
-
-      setIsOverflowed(wrapperRect.width - rootRect.width > 8);
-    }
-  }, []);
-
-  return (
-    <div
-      ref={rootRef}
-      className={cn("flex gap-4", {
-        "flex-col": toolbarLocation === "bottom",
-        "flex-col-reverse": toolbarLocation === "top",
-      })}
-    >
-      <div ref={containerRef} className={cn(horizontalListVariants({ variant }), className)} {...props}>
-        <div className="w-fit flex flex-row flex-nowrap gap-(--gap-card) " ref={wrapperRef}>
-          {children}
-        </div>
-      </div>
-      {isOverflowed && (
-        <div className="flex justify-center sm:justify-start">
-          <Button size="icon" variant="ghost" className="rounded-full" onClick={scrollLeft}>
-            <ChevronLeft className="size-9" />
-          </Button>
-          <Button size="icon" variant="ghost" className="rounded-full" onClick={scrollRight}>
-            <ChevronRight className="size-9" />
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-}
+import { cn } from "@/lib/utils";
+import { Button } from "./button";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+export type HorizontalListVariantsProps = VariantProps<typeof horizontalListVariants>;
+export const horizontalListVariants = cva(
+  "py-1 scrollbar-hidden overscroll-x-contain overflow-x-auto snap-start snap-mandatory scroll-smooth *:shrink-0 *:grow-0 *:snap-center *:select-none",
+  {
+    variants: {
+      variant: {
+        contain: "w-full",
+        overflow:
+          "w-screen px-section -ms-section scroll-px-section clamp:px-clamp clamp:-ms-clamp clamp:scroll-px-clamp",
+      },
+    },
+    defaultVariants: {
+      variant: "contain",
+    },
+  },
+);
+
+export interface HorizontalListProps extends React.ComponentProps<"div">, HorizontalListVariantsProps {
+  toolbarLocation?: "bottom" | "top";
+  scrollBy?: number;
+}
+
+export function HorizontalList({
+  variant,
+  className,
+  children,
+  toolbarLocation = "bottom",
+  scrollBy = 360,
+  ...props
+}: HorizontalListProps) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [isOverflowed, setIsOverflowed] = useState<boolean>(true);
+
+  const scrollLeft = useCallback(() => {
+    containerRef.current?.scrollBy({ left: -scrollBy });
+  }, [scrollBy]);
+
+  const scrollRight = useCallback(() => {
+    containerRef.current?.scrollBy({ left: scrollBy });
+  }, [scrollBy]);
+
+  useEffect(() => {
+    if (rootRef.current && wrapperRef.current) {
+      const rootRect = rootRef.current.getBoundingClientRect();
+      const wrapperRect = wrapperRef.current.getBoundingClientRect();
+
+      setIsOverflowed(wrapperRect.width - rootRect.width > 8);
+    }
+  }, []);
+
+  return (
+    <div
+      ref={rootRef}
+      className={cn("flex gap-4", {
+        "flex-col": toolbarLocation === "bottom",
+        "flex-col-reverse": toolbarLocation === "top",
+      })}
+    >
+      <div ref={containerRef} className={cn(horizontalListVariants({ variant }), className)} {...props}>
+        <div className="w-fit flex flex-row flex-nowrap gap-(--gap-card) " ref={wrapperRef}>
+          {children}
+        </div>
+      </div>
+      {isOverflowed && (
+        <div className="flex justify-center sm:justify-start">
+          <Button size="icon" variant="ghost" className="rounded-full" onClick={scrollLeft}>
+            <ChevronLeft className="size-9" />
+          </Button>
+          <Button size="icon" variant="ghost" className="rounded-full" onClick={scrollRight}>
+            <ChevronRight className="size-9" />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ui/page-section.tsx

@@ -1,39 +1,39 @@
-import { cn } from "@/lib/utils";
-import { cva, type VariantProps } from "class-variance-authority";
-
-export type PageSectionVariantsProps = VariantProps<typeof pageSectionVariants>;
-export const pageSectionVariants = cva("group @container/page-section relative text-foreground", {
-  variants: {
-    px: {
-      none: "px-0",
-      default: "px-(--spacing-section)",
-      sm: "px-(--spacing-section-sm)",
-      lg: "px-(--spacing-section-lg)",
-      xl: "px-(--spacing-section-xl)",
-    },
-    py: {
-      none: "py-0",
-      default: "py-(--spacing-section)",
-      sm: "py-(--spacing-section-sm)",
-      lg: "py-(--spacing-section-lg)",
-      xl: "py-(--spacing-section-xl)",
-    },
-    noClamp: {
-      true: "w-full",
-      false: "w-full @clamp/page:px-clamp",
-    },
-  },
-  defaultVariants: {
-    px: "default",
-    py: "default",
-    noClamp: false,
-  },
-});
-
-export type PageSectionProps = React.ComponentProps<"div"> & VariantProps<typeof pageSectionVariants>;
-
-export function PageSection({ className, px, py, noClamp, ...props }: PageSectionProps) {
-  return (
-    <div data-slot="page-section" className={cn(pageSectionVariants({ px, py, noClamp }), className)} {...props} />
-  );
-}
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+
+export type PageSectionVariantsProps = VariantProps<typeof pageSectionVariants>;
+export const pageSectionVariants = cva("group @container/page-section relative text-foreground", {
+  variants: {
+    px: {
+      none: "px-0",
+      default: "px-(--spacing-section)",
+      sm: "px-(--spacing-section-sm)",
+      lg: "px-(--spacing-section-lg)",
+      xl: "px-(--spacing-section-xl)",
+    },
+    py: {
+      none: "py-0",
+      default: "py-(--spacing-section)",
+      sm: "py-(--spacing-section-sm)",
+      lg: "py-(--spacing-section-lg)",
+      xl: "py-(--spacing-section-xl)",
+    },
+    noClamp: {
+      true: "w-full",
+      false: "w-full clamp:px-clamp",
+    },
+  },
+  defaultVariants: {
+    px: "default",
+    py: "default",
+    noClamp: false,
+  },
+});
+
+export type PageSectionProps = React.ComponentProps<"div"> & VariantProps<typeof pageSectionVariants>;
+
+export function PageSection({ className, px, py, noClamp, ...props }: PageSectionProps) {
+  return (
+    <div data-slot="page-section" className={cn(pageSectionVariants({ px, py, noClamp }), className)} {...props} />
+  );
+}

package/src/styles/theme.css

@@ -1,184 +1,186 @@
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-container: var(--radius);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  --container-clamp: 96rem;
-  --spacing-clamp: calc((100dvw - var(--container-clamp)) / 2);
-
-  --spacing-page-nav: --spacing(18);
-
-  --spacing-section: var(--section-p);
-  --spacing-section-sm: calc(var(--spacing-section) / 2);
-  --spacing-section-lg: calc(var(--spacing-section) * 2);
-  --spacing-section-xl: calc(var(--spacing-section) * 5);
-
-  --spacing-card: var(--card-p);
-  --spacing-card-sm: calc(var(--spacing-card) / 2);
-  --spacing-card-lg: calc(var(--spacing-card) * 2);
-  --spacing-card-xl: calc(var(--spacing-card) * 5);
-
-  --gap-page: var(--page-gap);
-  --gap-card: var(--card-gap);
-  --gap-card-area: var(--card-area-gap);
-  --gap-card-item-group: var(--card-item-group-gap);
-}
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.3741 0.0774 245.65);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.3741 0.0774 245.65);
-  --primary: oklch(0.3741 0.0774 245.65);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.5393 0.0909 200);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.45 0.0236 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.3741 0.0774 245.65);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: var(--color-complement-1-200);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.3741 0.0774 245.65);
-  --sidebar-primary: oklch(0.3741 0.0774 245.65);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.3741 0.0774 245.65);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: var(--color-complement-1-200);
-
-  /* Responsive Layout Spacing */
-  --section-p: --spacing(4);
-  --card-p: --spacing(4);
-  --page-gap: --spacing(0);
-  --card-gap: --spacing(4);
-  --card-area-gap: --spacing(4);
-  --card-item-group-gap: --spacing(2);
-
-  @media (width >= 40rem) {
-    --section-p: --spacing(8);
-    --card-p: --spacing(6);
-    --page-gap: --spacing(4);
-    --card-gap: --spacing(6);
-    --card-area-gap: --spacing(6);
-    --card-item-group-gap: --spacing(2);
-  }
-
-  @media (width >= 80rem) {
-    --section-p: --spacing(12);
-    --card-p: --spacing(6);
-    --page-gap: --spacing(0);
-    --card-gap: --spacing(6);
-    --card-area-gap: --spacing(6);
-    --card-item-group-gap: --spacing(2);
-  }
-}
-
-.dark {
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.141 0.005 285.823);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.141 0.005 285.823);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.3741 0.0774 245.65);
-  --secondary: oklch(0.9156 0.0315 200);
-  --secondary-foreground: oklch(0 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: var(--color-complement-1-600);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.3741 0.0774 245.65);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.3741 0.0774 245.65);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: var(--color-complement-1-600);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-@utility scrollbar-hidden {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-/* prettier-ignore */
-@utility areas-* {
-  grid-template-areas: --value([*]);
-  grid-template-columns: --modifier([*]);
-}
-
-@utility stick-to-page {
-  position: sticky;
-  top: calc(var(--spacing-section) + var(--spacing-page-nav));
-  height: fit-content;
-}
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-container: var(--radius);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --breakpoint-clamp: 100rem;
+
+  --container-clamp: 96rem;
+  --spacing-clamp: calc((100dvw - var(--container-clamp)) / 2);
+
+  --spacing-page-nav: --spacing(18);
+
+  --spacing-section: var(--section-p);
+  --spacing-section-sm: calc(var(--spacing-section) / 2);
+  --spacing-section-lg: calc(var(--spacing-section) * 2);
+  --spacing-section-xl: calc(var(--spacing-section) * 5);
+
+  --spacing-card: var(--card-p);
+  --spacing-card-sm: calc(var(--spacing-card) / 2);
+  --spacing-card-lg: calc(var(--spacing-card) * 2);
+  --spacing-card-xl: calc(var(--spacing-card) * 5);
+
+  --gap-page: var(--page-gap);
+  --gap-card: var(--card-gap);
+  --gap-card-area: var(--card-area-gap);
+  --gap-card-item-group: var(--card-item-group-gap);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.3741 0.0774 245.65);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.3741 0.0774 245.65);
+  --primary: oklch(0.3741 0.0774 245.65);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.5393 0.0909 200);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.45 0.0236 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.3741 0.0774 245.65);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: var(--color-complement-1-200);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.3741 0.0774 245.65);
+  --sidebar-primary: oklch(0.3741 0.0774 245.65);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.3741 0.0774 245.65);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: var(--color-complement-1-200);
+
+  /* Responsive Layout Spacing */
+  --section-p: --spacing(4);
+  --card-p: --spacing(4);
+  --page-gap: --spacing(0);
+  --card-gap: --spacing(4);
+  --card-area-gap: --spacing(4);
+  --card-item-group-gap: --spacing(2);
+
+  @media (width >= 40rem) {
+    --section-p: --spacing(8);
+    --card-p: --spacing(6);
+    --page-gap: --spacing(4);
+    --card-gap: --spacing(6);
+    --card-area-gap: --spacing(6);
+    --card-item-group-gap: --spacing(2);
+  }
+
+  @media (width >= 80rem) {
+    --section-p: --spacing(12);
+    --card-p: --spacing(6);
+    --page-gap: --spacing(0);
+    --card-gap: --spacing(6);
+    --card-area-gap: --spacing(6);
+    --card-item-group-gap: --spacing(2);
+  }
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.141 0.005 285.823);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.141 0.005 285.823);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.3741 0.0774 245.65);
+  --secondary: oklch(0.9156 0.0315 200);
+  --secondary-foreground: oklch(0 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: var(--color-complement-1-600);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.3741 0.0774 245.65);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.3741 0.0774 245.65);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: var(--color-complement-1-600);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@utility scrollbar-hidden {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* prettier-ignore */
+@utility areas-* {
+  grid-template-areas: --value([*]);
+  grid-template-columns: --modifier([*]);
+}
+
+@utility stick-to-page {
+  position: sticky;
+  top: calc(var(--spacing-section) + var(--spacing-page-nav));
+  height: fit-content;
+}