@xenide-io/the-old-ui-theme 0.2.6 → 0.2.9

package/src/components/ui/Tabs.tsx

@@ -0,0 +1,53 @@
+import { cn } from "@/lib/cn";
+
+export interface TabItem {
+  value: string;
+  label: string;
+}
+
+export type TabsVariant = "pill" | "underline";
+
+export interface TabsProps {
+  items: TabItem[];
+  value: string;
+  onChange: (value: string) => void;
+  variant?: TabsVariant;
+  className?: string;
+}
+
+export function Tabs({ items, value, onChange, variant = "pill", className }: TabsProps) {
+  if (variant === "underline") {
+    return (
+      <div className={cn("flex gap-6 border-b border-ph-border", className)}>
+        {items.map((item) => (
+          <button
+            key={item.value}
+            type="button"
+            onClick={() => onChange(item.value)}
+            className={cn(
+              "-mb-px border-b-2 pb-2 text-sm font-semibold transition",
+              value === item.value ? "border-ph-brand text-ph-ink" : "border-transparent text-ph-mutedtext hover:text-ph-ink"
+            )}
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("ph-tabs-row inline-flex", className)}>
+      {items.map((item) => (
+        <button
+          key={item.value}
+          type="button"
+          onClick={() => onChange(item.value)}
+          className={cn("ph-tab", value === item.value && "ph-tab-active")}
+        >
+          {item.label}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/components/ui/Terminal.tsx

@@ -0,0 +1,54 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface TerminalProps extends ComponentPropsWithoutRef<"div"> {
+  /** Window title */
+  title?: string;
+  /** Terminal lines — array of { text, color? } or plain strings */
+  lines?: Array<{ text: string; color?: string } | string>;
+  /** Custom content instead of lines */
+  children?: ReactNode;
+}
+
+export function Terminal({
+  title = "sandbox",
+  lines,
+  children,
+  className,
+  ...props
+}: TerminalProps) {
+  return (
+    <div
+      className={cn(
+        "overflow-hidden rounded-xl border border-ph-border shadow-ph-md",
+        className,
+      )}
+      {...props}
+    >
+      <header className="flex items-center gap-2 border-b border-ph-border bg-ph-muted px-4 py-3">
+        <div className="h-3 w-3 rounded-full bg-red-400" />
+        <div className="h-3 w-3 rounded-full bg-amber-400" />
+        <div className="h-3 w-3 rounded-full bg-emerald-400" />
+        {title && (
+          <span className="text-xs font-medium text-ph-mutedtext">{title}</span>
+        )}
+      </header>
+      <div className="ph-code rounded-none border-x-0 border-b-0 text-[13px] leading-relaxed">
+        {children || (
+          <>
+            {lines?.map((line, i) => {
+              const text = typeof line === "string" ? line : line.text;
+              const color = typeof line === "string" ? undefined : line.color;
+              return (
+                <span key={i}>
+                  <span className={color || "text-neutral-600"}>{text}</span>
+                  {i < lines.length - 1 && <br />}
+                </span>
+              );
+            })}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/ThemeDomSync.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { useLayoutEffect } from "react";
+import { persistTheme, readStoredTheme } from "@/themes";
+
+/**
+ * Re-applies `html[data-theme]` after React commits. Hydration can clear attributes
+ * that were set only by `THEME_INIT_SCRIPT` — without this sync, `:root`-scoped
+ * light tokens effectively win visually.
+ */
+export function ThemeDomSync() {
+  useLayoutEffect(() => {
+    persistTheme(readStoredTheme());
+  }, []);
+
+  return null;
+}

package/src/components/ui/ThemeManager.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useLayoutEffect } from "react";
+import { persistTheme, readStoredTheme } from "@/themes";
+
+export interface ThemeManagerProps {
+  children?: ReactNode;
+}
+
+/** Client wrapper that keeps html[data-theme] synced with localStorage. */
+export function ThemeManager({ children }: ThemeManagerProps) {
+  useLayoutEffect(() => {
+    persistTheme(readStoredTheme());
+  }, []);
+
+  return <>{children}</>;
+}

package/src/components/ui/ThemeSwitcher.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { persistTheme, readStoredTheme, THEME_GROUPS, THEMES, type ThemeId } from "@/themes";
+import { cn } from "@/lib/cn";
+
+export interface ThemeSwitcherProps {
+  className?: string;
+}
+
+/** Colour-only theme picker — persists to localStorage and sets html[data-theme]. */
+export function ThemeSwitcher({ className }: ThemeSwitcherProps) {
+  const [themeId, setThemeId] = useState<ThemeId>("hedgehog-light");
+
+  useEffect(() => {
+    const id = readStoredTheme() as ThemeId;
+    persistTheme(id);
+    setThemeId(id);
+  }, []);
+
+  return (
+    <label className={cn("flex min-w-0 items-center gap-2", className)}>
+      <span className="shrink-0 text-xs font-medium text-ph-mutedtext sm:text-sm">Theme</span>
+      <select
+        className="ph-select max-w-[11rem] !min-h-[2rem] py-1 pl-2.5 pr-8 text-xs sm:max-w-[14rem] sm:text-sm"
+        value={themeId}
+        aria-label="Colour theme"
+        onChange={(event) => {
+          const next = event.target.value as ThemeId;
+          persistTheme(next);
+          setThemeId(next);
+        }}
+      >
+        {THEME_GROUPS.map((group) => (
+          <optgroup key={group} label={group}>
+            {THEMES.filter((theme) => theme.group === group).map((theme) => (
+              <option key={theme.id} value={theme.id}>
+                {theme.name}
+              </option>
+            ))}
+          </optgroup>
+        ))}
+      </select>
+    </label>
+  );
+}

package/src/components/ui/Timeline.tsx

@@ -0,0 +1,60 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface TimelineEvent {
+  id: string;
+  title: string;
+  description?: string;
+  time?: string;
+  icon?: ReactNode;
+  color?: string;
+}
+
+export interface TimelineProps extends ComponentPropsWithoutRef<"ol"> {
+  events: TimelineEvent[];
+  /** Alternate left/right layout on large screens */
+  alternate?: boolean;
+}
+
+export function Timeline({
+  events,
+  alternate = false,
+  className,
+  ...props
+}: TimelineProps) {
+  return (
+    <ol
+      className={cn("relative space-y-8", className)}
+      {...props}
+    >
+      {events.map((event, idx) => {
+        const align = alternate && idx % 2 !== 0 ? "lg:flex-row-reverse" : "";
+        return (
+          <li key={event.id} className={cn("relative flex gap-6", align)}>
+            <div
+              className={cn(
+                "relative z-10 flex h-12 w-12 shrink-0 items-center justify-center rounded-full ring-8 ring-ph-muted shadow-md",
+                event.color || "bg-ph-brand text-white",
+              )}
+            >
+              {event.icon}
+            </div>
+            <article className="flex-1 rounded-xl border border-ph-border bg-ph-surface p-4 shadow-ph">
+              <div className="flex flex-wrap items-baseline gap-3">
+                <h4 className="text-base font-semibold text-ph-ink">{event.title}</h4>
+                {event.time && (
+                  <time className="text-[11px] font-semibold uppercase tracking-wide text-ph-mutedtext">
+                    {event.time}
+                  </time>
+                )}
+              </div>
+              {event.description && (
+                <p className="mt-2 text-sm text-ph-subtle">{event.description}</p>
+              )}
+            </article>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

package/src/components/ui/Toast.tsx

@@ -0,0 +1,70 @@
+import type { ReactNode } from "react";
+import {
+  IconCancel,
+  IconCheckCircle,
+  IconClose,
+  IconErrorOutline,
+  IconExclamation,
+} from "@/components/icons";
+import { cn } from "@/lib/cn";
+
+export type ToastStatus = "info" | "success" | "warning" | "danger";
+
+export interface ToastProps {
+  status?: ToastStatus;
+  title: string;
+  description?: string;
+  onDismiss?: () => void;
+  className?: string;
+}
+
+const statusConfig: Record<ToastStatus, { icon: typeof IconErrorOutline; color: string; bg: string } > = {
+  info: { icon: IconErrorOutline, color: "text-ph-info", bg: "ph-toast-info" },
+  success: { icon: IconCheckCircle, color: "text-ph-success", bg: "ph-toast-success" },
+  warning: { icon: IconExclamation, color: "text-ph-warning", bg: "ph-toast-warning" },
+  danger: { icon: IconCancel, color: "text-ph-danger", bg: "ph-toast-danger" },
+};
+
+export function Toast({
+  status = "info",
+  title,
+  description,
+  onDismiss,
+  className,
+}: ToastProps) {
+  const config = statusConfig[status];
+  const Icon = config.icon;
+
+  return (
+    <div className={cn("ph-toast", config.bg, className)}>
+      <Icon className={cn("mt-0.5 h-5 w-5 shrink-0", config.color)} aria-hidden />
+      <div className="pr-8">
+        <div className="font-semibold">{title}</div>
+        {description && <p className="mt-1 text-xs text-ph-subtle">{description}</p>}
+      </div>
+      {onDismiss && (
+        <button
+          type="button"
+          aria-label={`Dismiss ${title}`}
+          className="absolute right-2 top-2 ph-btn ph-btn-ghost ph-btn-xs ph-btn-circle"
+          onClick={onDismiss}
+        >
+          <IconClose className="h-4 w-4" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+export interface ToastStackProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export function ToastStack({ children, className }: ToastStackProps) {
+  return (
+    <div className={cn("ph-toast-stack", className)}>
+      {children}
+    </div>
+  );
+}

package/src/components/ui/Typography.tsx

@@ -0,0 +1,129 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export type TextTone =
+  | "default"
+  | "muted"
+  | "subtle"
+  | "brand"
+  | "danger"
+  | "success"
+  | "warning"
+  | "info"
+  | "inherit";
+
+export type TextWeight =
+  | "normal"
+  | "medium"
+  | "semibold"
+  | "bold"
+  | "extrabold";
+
+export interface TextBaseProps {
+  tone?: TextTone;
+  weight?: TextWeight;
+  className?: string;
+  children?: ReactNode;
+  truncate?: boolean;
+}
+
+const toneMap: Record<TextTone, string> = {
+  default: "text-ph-ink",
+  muted: "text-ph-mutedtext",
+  subtle: "text-ph-subtle",
+  brand: "text-ph-brand",
+  danger: "text-ph-danger",
+  success: "text-ph-success",
+  warning: "text-ph-warning",
+  info: "text-ph-info",
+  inherit: "",
+};
+
+const weightMap: Record<TextWeight, string> = {
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold",
+  extrabold: "font-extrabold",
+};
+
+function textClass(
+  base: string,
+  tone: TextTone,
+  weight?: TextWeight,
+  truncate?: boolean,
+  className?: string
+) {
+  return cn(base, toneMap[tone], weight && weightMap[weight], truncate && "truncate", className);
+}
+
+/** Display text — largest heading, use once per page */
+export function Display({
+  children,
+  tone = "default",
+  weight,
+  truncate,
+  className,
+}: TextBaseProps) {
+  return <h1 className={textClass("text-4xl font-extrabold tracking-tight md:text-5xl", tone, weight, truncate, className)}>{children}</h1>;
+}
+
+/** H1 — page title */
+export function H1({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
+  return <h1 className={textClass("text-3xl font-bold tracking-tight md:text-4xl", tone, weight, truncate, className)}>{children}</h1>;
+}
+
+/** H2 — section title */
+export function H2({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
+  return <h2 className={textClass("text-2xl font-bold tracking-tight", tone, weight, truncate, className)}>{children}</h2>;
+}
+
+/** H3 — subsection title */
+export function H3({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
+  return <h3 className={textClass("text-xl font-semibold", tone, weight, truncate, className)}>{children}</h3>;
+}
+
+/** H4 — card / panel title */
+export function H4({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
+  return <h4 className={textClass("text-lg font-semibold", tone, weight, truncate, className)}>{children}</h4>;
+}
+
+/** H5 — small heading */
+export function H5({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
+  return <h5 className={textClass("text-base font-semibold", tone, weight, truncate, className)}>{children}</h5>;
+}
+
+/** Body — default paragraph text */
+export function P({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
+  return <p className={textClass("text-base leading-relaxed", tone, weight, truncate, className)}>{children}</p>;
+}
+
+/** Small body text */
+export function Small({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
+  return <span className={textClass("text-sm leading-relaxed", tone, weight, truncate, className)}>{children}</span>;
+}
+
+/** Extra small text — captions, meta */
+export function Caption({ children, tone = "muted", weight, truncate, className }: TextBaseProps) {
+  return <span className={textClass("text-[11px] font-medium uppercase tracking-wider", tone, weight, truncate, className)}>{children}</span>;
+}
+
+/** Overline — tiny eyebrow text */
+export function Overline({ children, tone = "muted", weight, truncate, className }: TextBaseProps) {
+  return <span className={textClass("text-[10px] font-bold uppercase tracking-[0.15em]", tone, weight, truncate, className)}>{children}</span>;
+}
+
+/** Lead — intro paragraph, larger and muted */
+export function Lead({ children, tone = "subtle", weight, truncate, className }: TextBaseProps) {
+  return <p className={textClass("text-lg leading-relaxed", tone, weight, truncate, className)}>{children}</p>;
+}
+
+/** Mono — code, data, technical text */
+export function Mono({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
+  return <code className={textClass("text-sm font-mono leading-relaxed", tone, weight, truncate, className)}>{children}</code>;
+}
+
+/** Label — form labels, tags */
+export function Label({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
+  return <label className={textClass("text-sm font-medium", tone, weight, truncate, className)}>{children}</label>;
+}

package/src/components/ui/index.ts

@@ -0,0 +1,92 @@
+export { Button as Button, type ButtonProps as ButtonProps, type ButtonShape as ButtonShape, type ButtonSize as ButtonSize, type ButtonVariant as ButtonVariant } from "@/components/ui/Button";
+export { ButtonChrome as ButtonChrome, type ButtonChromeProps as ButtonChromeProps } from "@/components/ui/ButtonChrome";
+export { Alert as Alert, type AlertProps as AlertProps, type AlertStatus as AlertStatus } from "@/components/ui/Alert";
+export { Badge as Badge, type BadgeProps as BadgeProps, type BadgeSize as BadgeSize, type BadgeVariant as BadgeVariant } from "@/components/ui/Badge";
+export { Card as Card, type CardProps as CardProps, type CardVariant as CardVariant } from "@/components/ui/Card";
+export { Drawer as Drawer, type DrawerProps as DrawerProps, type DrawerSide as DrawerSide, type DrawerSize as DrawerSize } from "@/components/ui/Drawer";
+export { Kbd as Kbd, type KbdProps as KbdProps, type KbdVariant as KbdVariant } from "@/components/ui/Kbd";
+export {
+  DropdownButton as DropdownButton,
+  DropdownItem as DropdownItem,
+  DropdownMenu as DropdownMenu,
+  type DropdownAlign as DropdownAlign,
+  type DropdownButtonProps as DropdownButtonProps,
+  type DropdownMenuProps as DropdownMenuProps,
+} from "@/components/ui/DropdownMenu";
+export {
+  Checkbox as Checkbox,
+  FileUpload as FileUpload,
+  Input as Input,
+  Radio as Radio,
+  Range as Range,
+  Select as Select,
+  Textarea as Textarea,
+  Toggle as Toggle,
+  type CheckboxProps as CheckboxProps,
+  type FileUploadProps as FileUploadProps,
+  type InputProps as InputProps,
+  type InputSize as InputSize,
+  type InputVariant as InputVariant,
+  type RadioProps as RadioProps,
+  type RangeProps as RangeProps,
+  type SelectProps as SelectProps,
+  type TextareaProps as TextareaProps,
+  type ToggleProps as ToggleProps,
+} from "@/components/ui/Input";
+export { Modal as Modal, type ModalProps as ModalProps, type ModalSize as ModalSize } from "@/components/ui/Modal";
+export { Breadcrumbs as Breadcrumbs, Pagination as Pagination, type BreadcrumbItem as BreadcrumbItem, type BreadcrumbsProps as BreadcrumbsProps, type PaginationProps as PaginationProps } from "@/components/ui/Navigation";
+export { Panel as Panel, type PanelProps as PanelProps } from "@/components/ui/Panel";
+export { Rating as Rating, type RatingProps as RatingProps } from "@/components/ui/Rating";
+export { SearchGroup as SearchGroup, SearchInput as SearchInput, type SearchGroupProps as SearchGroupProps, type SearchInputProps as SearchInputProps } from "@/components/ui/SearchInput";
+export { Table as Table, type TableColumn as TableColumn, type TableProps as TableProps } from "@/components/ui/Table";
+export { Stat as Stat, type StatProps as StatProps, type StatTone as StatTone } from "@/components/ui/Stat";
+export { Toast as Toast, ToastStack as ToastStack, type ToastProps as ToastProps, type ToastStackProps as ToastStackProps, type ToastStatus as ToastStatus } from "@/components/ui/Toast";
+export { Tabs as Tabs, type TabItem as TabItem, type TabsProps as TabsProps, type TabsVariant as TabsVariant } from "@/components/ui/Tabs";
+export { ThemeDomSync } from "@/components/ui/ThemeDomSync";
+export { ThemeManager, type ThemeManagerProps } from "@/components/ui/ThemeManager";
+export { ThemeSwitcher, type ThemeSwitcherProps } from "@/components/ui/ThemeSwitcher";
+export { IconBase as Icon, IconByName as IconByName, type IconProps as IconProps, type IconName as IconName } from "@/components/icons";
+export { Accordion } from "@/components/ui/Accordion";
+export { Stepper } from "@/components/ui/Stepper";
+export { SegmentedControl } from "@/components/ui/SegmentedControl";
+export { CommandPalette } from "@/components/ui/CommandPalette";
+export { Calendar } from "@/components/ui/Calendar";
+export { HoverCard } from "@/components/ui/HoverCard";
+export { EmptyState } from "@/components/ui/EmptyState";
+export { FilterChips } from "@/components/ui/FilterChips";
+export { CodeBlock } from "@/components/ui/CodeBlock";
+export { ComponentDocs, type ComponentDocsProps, type ComponentPropRow } from "@/components/ui/ComponentDocs";
+export { ShowcaseWrapper } from "@/components/ui/ShowcaseWrapper";
+export { CollapsibleSection } from "@/components/ui/CollapsibleSection";
+export { Display, H1, H2, H3, H4, H5, P, Small, Caption, Overline, Lead, Mono, Label } from "@/components/ui/Typography";
+export {
+  Avatar as Avatar,
+  AvatarGroup as AvatarGroup,
+  type AvatarProps as AvatarProps,
+  type AvatarSize as AvatarSize,
+  type AvatarStatus as AvatarStatus,
+  type AvatarGroupProps as AvatarGroupProps,
+} from "@/components/ui/Avatar";
+export {
+  Progress as Progress,
+  type ProgressProps as ProgressProps,
+} from "@/components/ui/Progress";
+export {
+  ChatBubble as ChatBubble,
+  type ChatBubbleProps as ChatBubbleProps,
+  type ChatBubbleVariant as ChatBubbleVariant,
+} from "@/components/ui/ChatBubble";
+export {
+  Terminal as Terminal,
+  type TerminalProps as TerminalProps,
+} from "@/components/ui/Terminal";
+export {
+  Indicator as Indicator,
+  type IndicatorProps as IndicatorProps,
+  type IndicatorPosition as IndicatorPosition,
+} from "@/components/ui/Indicator";
+export {
+  Timeline as Timeline,
+  type TimelineProps as TimelineProps,
+  type TimelineEvent as TimelineEvent,
+} from "@/components/ui/Timeline";

package/src/styles/themes.css

@@ -1332,3 +1332,121 @@
 
   --ph-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23908caa' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
 }
+
+[data-theme="notion"] {
+  color-scheme: light;
+
+  --ph-canvas: #ffffff;
+  --ph-surface: #f7f6f3;
+  --ph-muted: #f0efeb;
+  --ph-toolbar: #ebe9e4;
+  --ph-border: #e2e1dd;
+  --ph-border-strong: #c4c3bf;
+
+  --ph-text-primary: #37352f;
+  --ph-text-secondary: #6b6b6b;
+  --ph-text-tertiary: #9b9a97;
+
+  --ph-accent: #2f7cf6;
+  --ph-accent-hover: #2160d4;
+  --ph-blue: #2f7cf6;
+  --ph-violet: #6940a5;
+  --ph-purple: #6940a5;
+
+  --ph-success: #0f7b6c;
+  --ph-warning: #dfab00;
+  --ph-danger: #e03e3e;
+  --ph-info: #2f7cf6;
+
+  --ph-text-3000: #37352f;
+  --ph-primary-button-face: #ffffff;
+  --ph-primary-button-border: #2160d4;
+  --ph-primary-button-border-hover: #1a4fa8;
+  --ph-primary-frame-bg: #2f7cf6;
+  --ph-secondary-button-bg: #ffffff;
+  --ph-secondary-frame-bg: #f0efeb;
+  --ph-secondary-button-border: #e2e1dd;
+  --ph-secondary-button-border-hover: #c4c3bf;
+
+  --ph-border-3000: #e2e1dd;
+  --ph-chrome-inset-face-top: inset 0 1px 0 hsl(0deg 0% 100% / 0.95);
+  --ph-chrome-inset-face-bottom: inset 0 -1px 0 hsl(0deg 0% 0% / 0.06);
+  --ph-accent-highlight-secondary: hsla(220deg 100% 56% / 10%);
+
+  --ph-data-1: #2f7cf6;
+  --ph-data-2: #6940a5;
+  --ph-data-3: #dfab00;
+  --ph-data-4: #0f7b6c;
+  --ph-data-5: #e03e3e;
+  --ph-data-6: #d9730d;
+  --ph-data-7: #ad1a72;
+
+  --ph-product-session-replay: #dfab00;
+  --ph-product-product-analytics: #2f7cf6;
+  --ph-product-data-pipeline: #0f7b6c;
+  --ph-product-feature-flags: #6940a5;
+  --ph-product-experiments: #e03e3e;
+  --ph-product-data-warehouse: #d9730d;
+  --ph-product-surveys: #ad1a72;
+
+  --ph-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239b9a97' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+}
+
+[data-theme="notion-dark"] {
+  color-scheme: dark;
+
+  --ph-canvas: #191919;
+  --ph-surface: #212121;
+  --ph-muted: #2a2a2a;
+  --ph-toolbar: #333333;
+  --ph-border: #373737;
+  --ph-border-strong: #4a4a4a;
+
+  --ph-text-primary: #ffffff;
+  --ph-text-secondary: #cdcdcd;
+  --ph-text-tertiary: #6b6b6b;
+
+  --ph-accent: #4a9eff;
+  --ph-accent-hover: #3381e6;
+  --ph-blue: #4a9eff;
+  --ph-violet: #a06cd5;
+  --ph-purple: #a06cd5;
+
+  --ph-success: #45c4a0;
+  --ph-warning: #eac54f;
+  --ph-danger: #f15e5e;
+  --ph-info: #4a9eff;
+
+  --ph-text-3000: #ffffff;
+  --ph-primary-button-face: #ffffff;
+  --ph-primary-button-border: #3381e6;
+  --ph-primary-button-border-hover: #2663b8;
+  --ph-primary-frame-bg: #4a9eff;
+  --ph-secondary-button-bg: #2a2a2a;
+  --ph-secondary-frame-bg: #333333;
+  --ph-secondary-button-border: #373737;
+  --ph-secondary-button-border-hover: #4a4a4a;
+
+  --ph-border-3000: #333333;
+  --ph-chrome-inset-face-top: inset 0 1px 0 hsl(0deg 0% 100% / 0.06);
+  --ph-chrome-inset-face-bottom: inset 0 -1px 0 hsl(0deg 0% 0% / 0.4);
+  --ph-accent-highlight-secondary: hsla(215deg 100% 65% / 14%);
+
+  --ph-data-1: #4a9eff;
+  --ph-data-2: #a06cd5;
+  --ph-data-3: #eac54f;
+  --ph-data-4: #45c4a0;
+  --ph-data-5: #f15e5e;
+  --ph-data-6: #f5a623;
+  --ph-data-7: #d355a0;
+
+  --ph-product-session-replay: #eac54f;
+  --ph-product-product-analytics: #4a9eff;
+  --ph-product-data-pipeline: #45c4a0;
+  --ph-product-feature-flags: #a06cd5;
+  --ph-product-experiments: #f15e5e;
+  --ph-product-data-warehouse: #f5a623;
+  --ph-product-surveys: #d355a0;
+
+  --ph-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%236b6b6b' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+}