sunpeak 0.1.25 → 0.2.2

package/template/src/components/sunpeak-card.tsx

@@ -0,0 +1,140 @@
+import * as React from "react"
+import { cn } from "@/lib/index"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/shadcn/card"
+import { Button } from "@/components/shadcn/button"
+
+export interface SunpeakButtonProps extends Omit<React.ComponentProps<typeof Button>, 'onClick'> {
+  isPrimary?: boolean
+  onClick: () => void
+}
+
+export interface SunpeakCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  image: string
+  imageAlt: string
+  imageMaxWidth?: number
+  imageMaxHeight?: number
+  header?: React.ReactNode
+  metadata?: React.ReactNode
+  button1?: SunpeakButtonProps
+  button2?: SunpeakButtonProps
+  variant?: "default" | "bordered" | "elevated"
+}
+
+export const SunpeakCard = React.forwardRef<HTMLDivElement, SunpeakCardProps>(
+  (
+    {
+      children,
+      image,
+      imageAlt,
+      imageMaxWidth = 400,
+      imageMaxHeight = 400,
+      header,
+      metadata,
+      button1,
+      button2,
+      variant = "default",
+      className,
+      onClick,
+      ...props
+    },
+    ref
+  ) => {
+    const hasButtons = button1 || button2
+
+    const handleCardClick = (e: React.MouseEvent<HTMLDivElement>) => {
+      onClick?.(e)
+    }
+
+    const renderButton = (buttonProps: SunpeakButtonProps) => {
+      const { isPrimary = false, onClick: buttonOnClick, children, ...restProps } = buttonProps
+
+      const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation()
+        buttonOnClick()
+      }
+
+      return (
+        <Button
+          {...restProps}
+          variant={isPrimary ? "default" : "outline"}
+          onClick={handleClick}
+        >
+          {children}
+        </Button>
+      )
+    }
+
+    const variantClasses = {
+      default: "",
+      bordered: "border-2",
+      elevated: "shadow-lg",
+    }
+
+    return (
+      <Card
+        ref={ref}
+        className={cn(
+          "overflow-hidden cursor-pointer select-none",
+          variantClasses[variant],
+          className
+        )}
+        onClick={handleCardClick}
+        {...props}
+      >
+        {image && (
+          <div className="w-full overflow-hidden">
+            <img
+              src={image}
+              alt={imageAlt}
+              loading="lazy"
+              className="w-full h-auto aspect-square object-cover"
+              style={{
+                maxWidth: `${imageMaxWidth}px`,
+                maxHeight: `${imageMaxHeight}px`,
+              }}
+            />
+          </div>
+        )}
+        <div className="flex flex-col flex-1">
+          {(header || metadata) && (
+            <CardHeader className={cn(image && "pt-3")}>
+              {header && (
+                <CardTitle className="text-base font-medium leading-tight overflow-hidden text-ellipsis whitespace-nowrap">
+                  {header}
+                </CardTitle>
+              )}
+              {metadata && (
+                <CardDescription className="text-xs leading-normal">
+                  {metadata}
+                </CardDescription>
+              )}
+            </CardHeader>
+          )}
+          {children && (
+            <CardContent className={cn(
+              "text-sm leading-normal",
+              (header || metadata) && "pt-1"
+            )}>
+              <div className="line-clamp-2">{children}</div>
+            </CardContent>
+          )}
+          {hasButtons && (
+            <CardFooter className="flex gap-2 flex-wrap">
+              {button1 && renderButton(button1)}
+              {button2 && renderButton(button2)}
+            </CardFooter>
+          )}
+        </div>
+      </Card>
+    )
+  }
+)
+SunpeakCard.displayName = "SunpeakCard"

package/template/src/components/sunpeak-carousel.test.tsx

@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { SunpeakCarousel } from './sunpeak-carousel';
+
+describe('SunpeakCarousel', () => {
+  it('renders all children as carousel items', () => {
+    render(
+      <SunpeakCarousel>
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+      </SunpeakCarousel>
+    );
+
+    expect(screen.getByText('Item 1')).toBeInTheDocument();
+    expect(screen.getByText('Item 2')).toBeInTheDocument();
+    expect(screen.getByText('Item 3')).toBeInTheDocument();
+  });
+
+  it('applies custom gap spacing to carousel content', () => {
+    render(
+      <SunpeakCarousel gap={24} data-testid="carousel">
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </SunpeakCarousel>
+    );
+
+    const carouselContent = document.querySelector('[class*="ml-0"]');
+    expect(carouselContent).toHaveStyle({ gap: '24px' });
+  });
+
+  it('applies custom card width to carousel items', () => {
+    render(
+      <SunpeakCarousel cardWidth={300}>
+        <div>Item 1</div>
+      </SunpeakCarousel>
+    );
+
+    const carouselItem = document.querySelector('[class*="pl-0"]');
+    expect(carouselItem).toHaveStyle({ flexBasis: '300px', minWidth: '300px' });
+  });
+});

package/template/src/components/sunpeak-carousel.tsx

@@ -0,0 +1,126 @@
+import * as React from "react"
+import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures"
+import { cn } from "@/lib/index"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  type CarouselApi,
+} from "@/components/shadcn/carousel"
+
+export type SunpeakCarouselProps = {
+  children?: React.ReactNode
+  gap?: number
+  showArrows?: boolean
+  showEdgeGradients?: boolean
+  cardWidth?: number | { inline?: number; fullscreen?: number }
+  className?: string
+}
+
+export const SunpeakCarousel = React.forwardRef<
+  HTMLDivElement,
+  SunpeakCarouselProps
+>(
+  (
+    {
+      children,
+      gap = 16,
+      showArrows = true,
+      showEdgeGradients = true,
+      cardWidth,
+      className,
+    },
+    ref
+  ) => {
+    const [api, setApi] = React.useState<CarouselApi>()
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    React.useEffect(() => {
+      if (!api) return
+
+      const onSelect = () => {
+        setCanScrollPrev(api.canScrollPrev())
+        setCanScrollNext(api.canScrollNext())
+      }
+
+      onSelect()
+      api.on("select", onSelect)
+      api.on("reInit", onSelect)
+
+      return () => {
+        api.off("select", onSelect)
+        api.off("reInit", onSelect)
+      }
+    }, [api])
+
+    const childArray = React.Children.toArray(children)
+
+    const getCardWidth = () => {
+      if (typeof cardWidth === "number") {
+        return `${cardWidth}px`
+      }
+      if (cardWidth?.inline) {
+        return `${cardWidth.inline}px`
+      }
+      return "220px"
+    }
+
+    return (
+      <div ref={ref} className={cn("relative w-full", className)}>
+        {showEdgeGradients && canScrollPrev && (
+          <div
+            className="pointer-events-none absolute left-0 top-0 z-10 h-full w-12 bg-gradient-to-r from-background to-transparent transition-opacity"
+            aria-hidden="true"
+          />
+        )}
+        {showEdgeGradients && canScrollNext && (
+          <div
+            className="pointer-events-none absolute right-0 top-0 z-10 h-full w-12 bg-gradient-to-l from-background to-transparent transition-opacity"
+            aria-hidden="true"
+          />
+        )}
+
+        <Carousel
+          opts={{
+            align: "start",
+            dragFree: true,
+          }}
+          plugins={[WheelGesturesPlugin()]}
+          setApi={setApi}
+          className="w-full"
+        >
+          <CarouselContent
+            className="ml-0"
+            style={{
+              gap: `${gap}px`,
+            }}
+          >
+            {childArray.map((child, index) => (
+              <CarouselItem
+                key={index}
+                className="pl-0"
+                style={{
+                  flexBasis: getCardWidth(),
+                  minWidth: getCardWidth(),
+                }}
+              >
+                {child}
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+
+          {showArrows && canScrollPrev && (
+            <CarouselPrevious className="left-2" />
+          )}
+          {showArrows && canScrollNext && (
+            <CarouselNext className="right-2" />
+          )}
+        </Carousel>
+      </div>
+    )
+  }
+)
+SunpeakCarousel.displayName = "SunpeakCarousel"

package/template/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './lib';
+export * from './App'

package/template/src/lib/index.ts

@@ -0,0 +1 @@
+export { cn } from './utils';

package/template/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/template/src/styles/chatgpt.css

@@ -0,0 +1,146 @@
+/**
+ * OpenAI ChatGPT Apps SDK Design System
+ *
+ * Implements Sunpeak base variables according to OpenAI ChatGPT Apps SDK design guidelines.
+ * https://developers.openai.com/apps-sdk/concepts/design-guidelines
+ *
+ * Design Principles:
+ * - "Always inherit the system font stack"
+ * - "Use system colors for text, icons, and spatial elements"
+ * - "Use system grid spacing"
+ * - "Respect system specified corner rounds"
+ *
+ * ⚠️ These values should NOT be overridden unless you want to break
+ * compliance with OpenAI ChatGPT Apps SDK design guidelines.
+ */
+
+:root {
+  /* ===================================
+   * TYPOGRAPHY - System Fonts
+   * ===================================
+   * "Always inherit the system font stack"
+   * Platform-native: SF Pro (iOS/macOS), Roboto (Android), Segoe UI (Windows)
+   */
+
+  --sp-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+
+  /* Font sizes - System-defined scale */
+  --sp-font-size-xs: 0.75rem;    /* 12px - metadata */
+  --sp-font-size-sm: 0.875rem;   /* 14px - descriptions */
+  --sp-font-size-base: 1rem;     /* 16px - headers */
+  --sp-font-size-lg: 1.125rem;   /* 18px */
+  --sp-font-size-xl: 1.25rem;    /* 20px */
+
+  /* Font weights - System-defined */
+  --sp-font-weight-normal: 400;
+  --sp-font-weight-medium: 500;
+  --sp-font-weight-semibold: 600;
+  --sp-font-weight-bold: 700;
+
+  /* Line heights - System-defined */
+  --sp-line-height-tight: 1.25;
+  --sp-line-height-normal: 1.5;
+  --sp-line-height-relaxed: 1.75;
+
+  /* ===================================
+   * SYSTEM COLORS
+   * ===================================
+   * "Use system colors for text, icons, and spatial elements"
+   */
+
+  /* Light Mode - OpenAI ChatGPT System Colors */
+  --sp-light-color-bg-primary: #ffffff;
+  --sp-light-color-bg-secondary: #e8e8e8;
+  --sp-light-color-bg-tertiary: #f3f3f3;
+  --sp-light-color-text-primary: #0d0d0d;
+  --sp-light-color-text-secondary: #5d5d5d;
+  --sp-light-color-text-tertiary: #8f8f8f;
+  --sp-light-color-text-inverted: #8f8f8f;
+  --sp-light-color-border: rgba(0, 0, 0, 0.05);
+  --sp-light-success: #008635;
+  --sp-light-warning: #e25507;
+  --sp-light-error: #e02e2a;
+  --sp-light-info: #0285ff;
+  --sp-light-sidebar: #f9f9f9;
+  /* Customizable light styles */
+  --sp-light-accent: #f46c21;
+  --sp-light-accent-hover: rgba(244, 108, 33, 0.9);
+  --sp-light-accent-active: #d45e1c;
+  --sp-light-accent-foreground: #ffffff;
+
+  /* Dark Mode - OpenAI ChatGPT System Colors */
+  --sp-dark-color-bg-primary: #212121;
+  --sp-dark-color-bg-secondary: #303030;
+  --sp-dark-color-bg-tertiary: #414141;
+  --sp-dark-color-text-primary: #ffffff;
+  --sp-dark-color-text-secondary: #cdcdcd;
+  --sp-dark-color-text-tertiary: #afafaf;
+  --sp-dark-color-text-inverted: #afafaf;
+  --sp-dark-color-border: #ffffff0d;
+  --sp-dark-success: #40c977;
+  --sp-dark-warning: #ff9e6c;
+  --sp-dark-error: #ff8583;
+  --sp-dark-info: #0285ff;
+  --sp-dark-sidebar: #181818;
+  /* Customizable dark styles */
+  --sp-dark-accent: #f46c21;
+  --sp-dark-accent-hover: rgba(244, 108, 33, 0.9);
+  --sp-dark-accent-active: #d45e1c;
+  --sp-dark-accent-foreground: #ffffff;
+
+  /* ===================================
+   * SPACING - System Grid
+   * ===================================
+   * "Use system grid spacing"
+   * 4px base grid system
+   */
+
+  --sp-spacing-1: 0.25rem;   /* 4px */
+  --sp-spacing-2: 0.5rem;    /* 8px */
+  --sp-spacing-3: 0.75rem;   /* 12px */
+  --sp-spacing-4: 1rem;      /* 16px */
+  --sp-spacing-5: 1.25rem;   /* 20px */
+  --sp-spacing-6: 1.5rem;    /* 24px */
+  --sp-spacing-8: 2rem;      /* 32px */
+
+  /* ===================================
+   * BORDER RADIUS
+   * ===================================
+   * "Respect system specified corner rounds"
+   */
+
+  --sp-radius-sm: 0.375rem;   /* 6px */
+  --sp-radius-md: 0.5rem;     /* 8px */
+  --sp-radius-lg: 0.75rem;    /* 12px */
+  --sp-radius-xl: 1rem;       /* 16px */
+  --sp-radius-2xl: 1.5rem;    /* 24px */
+  --sp-radius-full: 9999px;
+
+  /* ===================================
+   * SHADOWS - System Elevation
+   * ===================================
+   */
+
+  --sp-shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.05);
+  --sp-shadow-md: 0px 2px 6px rgba(0, 0, 0, 0.06);
+  --sp-shadow-lg: 0px 4px 12px rgba(0, 0, 0, 0.1);
+  --sp-shadow-xl: 0px 8px 24px rgba(0, 0, 0, 0.12);
+
+  /* ===================================
+   * COMPONENT DIMENSIONS
+   * ===================================
+   * Standard component sizing from OpenAI ChatGPT examples
+   */
+
+  /* Card width - 220px (OpenAI ChatGPT standard) */
+  --sp-card-width: 220px;
+
+  /* Card gap - 16px (OpenAI ChatGPT standard) */
+  --sp-card-gap: 1rem;
+
+  /* Button padding */
+  --sp-button-padding-x: 1rem;       /* 16px */
+  --sp-button-padding-y: 0.375rem;   /* 6px */
+  --sp-button-padding-x-sm: 0.75rem; /* 12px */
+  --sp-button-padding-y-sm: 0.25rem; /* 4px */
+}

package/template/src/styles/globals.css

@@ -0,0 +1,220 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+/* Tailwind v4 theme configuration */
+@theme {
+  /* ===================================
+   * COLORS - Mapped to shadcn and --sp- variables
+   * ===================================
+   */
+  --color-*: initial;
+
+  /* Shadcn colors */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-border: var(--border);
+  --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-destructive-foreground: var(--destructive-foreground);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* Sunpeak semantic colors */
+  --color-success: var(--sp-success);
+  --color-warning: var(--sp-warning);
+  --color-error: var(--sp-error);
+  --color-info: var(--sp-info);
+
+  /* ===================================
+   * TYPOGRAPHY - Mapped to --sp- variables
+   * ===================================
+   */
+
+  /* Font families */
+  --font-sans: var(--sp-font-family);
+
+  /* Font sizes */
+  --text-xs: var(--sp-font-size-xs);
+  --text-sm: var(--sp-font-size-sm);
+  --text-base: var(--sp-font-size-base);
+  --text-lg: var(--sp-font-size-lg);
+  --text-xl: var(--sp-font-size-xl);
+
+  /* Font weights */
+  --font-weight-normal: var(--sp-font-weight-normal);
+  --font-weight-medium: var(--sp-font-weight-medium);
+  --font-weight-semibold: var(--sp-font-weight-semibold);
+  --font-weight-bold: var(--sp-font-weight-bold);
+
+  /* Line heights */
+  --leading-tight: var(--sp-line-height-tight);
+  --leading-normal: var(--sp-line-height-normal);
+  --leading-relaxed: var(--sp-line-height-relaxed);
+
+  /* ===================================
+   * SPACING - Mapped to --sp- variables
+   * ===================================
+   */
+  --spacing-1: var(--sp-spacing-1);
+  --spacing-2: var(--sp-spacing-2);
+  --spacing-3: var(--sp-spacing-3);
+  --spacing-4: var(--sp-spacing-4);
+  --spacing-5: var(--sp-spacing-5);
+  --spacing-6: var(--sp-spacing-6);
+  --spacing-8: var(--sp-spacing-8);
+
+  /* ===================================
+   * BORDER RADIUS - Mapped to --sp- variables
+   * ===================================
+   */
+  --radius-sm: var(--sp-radius-sm);
+  --radius-md: var(--sp-radius-md);
+  --radius-lg: var(--sp-radius-lg);
+  --radius-xl: var(--sp-radius-xl);
+  --radius-2xl: var(--sp-radius-2xl);
+  --radius-full: var(--sp-radius-full);
+
+  /* ===================================
+   * SHADOWS - Mapped to --sp- variables
+   * ===================================
+   */
+  --shadow-sm: var(--sp-shadow-sm);
+  --shadow-md: var(--sp-shadow-md);
+  --shadow-lg: var(--sp-shadow-lg);
+  --shadow-xl: var(--sp-shadow-xl);
+}
+
+/* ===================================
+ * THEME MODE CLASSES
+ * ===================================
+ * Force light/dark mode on specific elements
+ */
+
+.light {
+  --sp-color-bg-primary: var(--sp-light-color-bg-primary);
+  --sp-color-bg-secondary: var(--sp-light-color-bg-secondary);
+  --sp-color-bg-tertiary: var(--sp-light-color-bg-tertiary);
+  --sp-color-text-primary: var(--sp-light-color-text-primary);
+  --sp-color-text-secondary: var(--sp-light-color-text-secondary);
+  --sp-color-text-tertiary: var(--sp-light-color-text-tertiary);
+  --sp-color-text-inverted: var(--sp-light-color-text-inverted);
+  --sp-color-border: var(--sp-light-color-border);
+  --sp-success: var(--sp-light-success);
+  --sp-warning: var(--sp-light-warning);
+  --sp-error: var(--sp-light-error);
+  --sp-info: var(--sp-light-info);
+  --sp-accent: var(--sp-light-accent);
+  --sp-accent-hover: var(--sp-light-accent-hover);
+  --sp-accent-active: var(--sp-light-accent-active);
+  --sp-accent-foreground: var(--sp-light-accent-foreground);
+
+  /* shadcn/ui light mode variables */
+  --background: var(--sp-light-color-bg-primary);
+  --foreground: var(--sp-light-color-text-primary);
+  --card: var(--sp-light-color-bg-primary);
+  --card-foreground: var(--sp-light-color-text-primary);
+  --popover: var(--sp-light-color-bg-primary);
+  --popover-foreground: var(--sp-light-color-text-primary);
+  --primary: var(--sp-light-accent);
+  --primary-foreground: var(--sp-accent-foreground);
+  --secondary: var(--sp-light-color-bg-secondary);
+  --secondary-foreground: var(--sp-light-color-text-primary);
+  --muted: var(--sp-light-color-bg-tertiary);
+  --muted-foreground: var(--sp-light-color-text-tertiary);
+  --accent: var(--sp-light-accent);
+  --accent-foreground: var(--sp-accent-foreground);
+  --destructive: var(--sp-light-error);
+  --destructive-foreground: var(--sp-accent-foreground);
+  --border: var(--sp-light-color-border);
+  --input: var(--sp-light-color-bg-secondary);
+  --ring: var(--sp-light-accent);
+  --sidebar: var(--sp-light-sidebar);
+  --sidebar-foreground: var(--sp-light-color-text-primary);
+  --sidebar-primary: var(--sp-light-accent);
+  --sidebar-primary-foreground: var(--sp-light-color-text-primary);
+  --sidebar-accent: var(--sp-light-accent);
+  --sidebar-accent-foreground: var(--sp-light-color-text-primary);
+  --sidebar-border: var(--sp-light-color-border);
+  --sidebar-ring: var(--sp-light-accent);
+}
+
+.dark {
+  --sp-color-bg-primary: var(--sp-dark-color-bg-primary);
+  --sp-color-bg-secondary: var(--sp-dark-color-bg-secondary);
+  --sp-color-bg-tertiary: var(--sp-dark-color-bg-tertiary);
+  --sp-color-text-primary: var(--sp-dark-color-text-primary);
+  --sp-color-text-secondary: var(--sp-dark-color-text-secondary);
+  --sp-color-text-tertiary: var(--sp-dark-color-text-tertiary);
+  --sp-color-text-inverted: var(--sp-dark-color-text-inverted);
+  --sp-color-border: var(--sp-dark-color-border);
+  --sp-success: var(--sp-dark-success);
+  --sp-warning: var(--sp-dark-warning);
+  --sp-error: var(--sp-dark-error);
+  --sp-info: var(--sp-dark-info);
+  --sp-accent: var(--sp-dark-accent);
+  --sp-accent-hover: var(--sp-dark-accent-hover);
+  --sp-accent-active: var(--sp-dark-accent-active);
+  --sp-accent-foreground: var(--sp-dark-accent-foreground);
+
+  /* shadcn/ui dark mode variables */
+  --background: var(--sp-dark-color-bg-primary);
+  --foreground: var(--sp-dark-color-text-primary);
+  --card: var(--sp-dark-color-bg-primary);
+  --card-foreground: var(--sp-dark-color-text-primary);
+  --popover: var(--sp-dark-color-bg-primary);
+  --popover-foreground: var(--sp-dark-color-text-primary);
+  --primary: var(--sp-dark-accent);
+  --primary-foreground: var(--sp-accent-foreground);
+  --secondary: var(--sp-dark-color-bg-secondary);
+  --secondary-foreground: var(--sp-dark-color-text-primary);
+  --muted: var(--sp-dark-color-bg-tertiary);
+  --muted-foreground: var(--sp-dark-color-text-tertiary);
+  --accent: var(--sp-dark-accent);
+  --accent-foreground: var(--sp-accent-foreground);
+  --destructive: var(--sp-dark-error);
+  --destructive-foreground: var(--sp-accent-foreground);
+  --border: var(--sp-dark-color-border);
+  --input: var(--sp-dark-color-bg-secondary);
+  --ring: var(--sp-dark-accent);
+  --sidebar: var(--sp-dark-sidebar);
+  --sidebar-foreground: var(--sp-dark-color-text-primary);
+  --sidebar-primary: var(--sp-dark-accent);
+  --sidebar-primary-foreground: var(--sp-dark-color-text-primary);
+  --sidebar-accent: var(--sp-dark-accent);
+  --sidebar-accent-foreground: var(--sp-dark-color-text-primary);
+  --sidebar-border: var(--sp-dark-color-border);
+  --sidebar-ring: var(--sp-dark-accent);
+}
+
+@theme inline {
+  --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);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}