@ponti-studios/ui 1.8.0 → 2.0.1

package/src/native/components.tsx

@@ -0,0 +1,198 @@
+import React, { type ReactNode } from "react";
+import { Pressable, Text, View, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
+import { useNativeTheme } from "./theme";
+
+export type NativeButtonVariant = "primary" | "secondary" | "ghost" | "destructive";
+export type NativeButtonSize = "small" | "medium" | "large";
+
+export interface NativeButtonProps {
+  label: string;
+  onPress: PressableProps["onPress"];
+  variant?: NativeButtonVariant;
+  size?: NativeButtonSize;
+  disabled?: boolean;
+  loading?: boolean;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  leading?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function NativeButton({
+  label,
+  onPress,
+  variant = "primary",
+  size = "medium",
+  disabled = false,
+  loading = false,
+  accessibilityLabel,
+  accessibilityHint,
+  leading,
+  style,
+}: NativeButtonProps) {
+  const { colors, spacing, textSizes, fontWeights, radii } = useNativeTheme();
+  const isDisabled = disabled || loading;
+  const [backgroundColor, foregroundColor] = isDisabled
+    ? [colors.muted, colors.tertiary]
+    : buttonColors(variant, colors);
+  const verticalPadding = size === "small" ? spacing["2"] : size === "large" ? spacing["4"] : spacing["3"];
+  const horizontalPadding = size === "small" ? spacing["3"] : spacing["4"];
+  const fontSize = size === "small" ? textSizes.sm : size === "large" ? textSizes.lg : textSizes.base;
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityHint={accessibilityHint}
+      accessibilityState={{ disabled: isDisabled, busy: loading }}
+      disabled={isDisabled}
+      onPress={onPress}
+      style={[
+        {
+          minHeight: size === "large" ? spacing["14"] : spacing["12"],
+          paddingHorizontal: horizontalPadding,
+          paddingVertical: verticalPadding,
+          borderRadius: radii.lg,
+          backgroundColor,
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "row",
+          gap: spacing["2"],
+        },
+        style,
+      ]}
+    >
+      {leading}
+      <Text style={{ color: foregroundColor, fontSize, fontWeight: fontWeights.semibold }}>{label}</Text>
+    </Pressable>
+  );
+}
+
+function buttonColors(variant: NativeButtonVariant, colors: ReturnType<typeof useNativeTheme>["colors"]): [string, string] {
+  switch (variant) {
+    case "primary":
+      return [colors.primary, colors["primary-foreground"]];
+    case "destructive":
+      return [colors.destructive, colors["destructive-foreground"]];
+    case "secondary":
+      return [colors.secondary, colors["text-primary"]];
+    case "ghost":
+      return ["transparent", colors["text-primary"]];
+  }
+}
+
+export interface NativeSurfaceProps {
+  children: ReactNode;
+  tone?: "card" | "muted" | "background";
+  style?: StyleProp<ViewStyle>;
+}
+
+export function NativeSurface({ children, tone = "card", style }: NativeSurfaceProps) {
+  const { colors, spacing, radii } = useNativeTheme();
+  const backgroundColor = tone === "muted" ? colors.muted : tone === "background" ? colors.background : colors.card;
+  return (
+    <View
+      style={[
+        {
+          backgroundColor,
+          borderColor: colors["border-default"],
+          borderWidth: spacing.px,
+          borderRadius: radii.xl,
+          padding: spacing["4"],
+          gap: spacing["2"],
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+export type NativeBadgeVariant = "default" | "secondary" | "accent" | "success" | "warning" | "destructive";
+
+export interface NativeBadgeProps {
+  label: string;
+  variant?: NativeBadgeVariant;
+  accessibilityLabel?: string;
+}
+
+export function NativeBadge({ label, variant = "default", accessibilityLabel }: NativeBadgeProps) {
+  const { colors, spacing, textSizes, fontWeights, radii } = useNativeTheme();
+  const [backgroundColor, foregroundColor] = badgeColors(variant, colors);
+  return (
+    <View
+      accessibilityRole="text"
+      accessibilityLabel={accessibilityLabel ?? label}
+      style={{ alignSelf: "flex-start", paddingHorizontal: spacing["2"], paddingVertical: spacing["1"], borderRadius: radii.full, backgroundColor }}
+    >
+      <Text style={{ color: foregroundColor, fontSize: textSizes.sm, fontWeight: fontWeights.medium }}>{label}</Text>
+    </View>
+  );
+}
+
+function badgeColors(variant: NativeBadgeVariant, colors: ReturnType<typeof useNativeTheme>["colors"]): [string, string] {
+  switch (variant) {
+    case "secondary":
+      return [colors.secondary, colors["text-primary"]];
+    case "accent":
+      return [colors.accent, colors["text-primary"]];
+    case "success":
+      return [colors.success, colors["success-foreground"]];
+    case "warning":
+      return [colors.warning, colors["warning-foreground"]];
+    case "destructive":
+      return [colors.destructive, colors["destructive-foreground"]];
+    case "default":
+      return [colors.primary, colors["primary-foreground"]];
+  }
+}
+
+export interface NativeTabItem<Value extends string = string> {
+  value: Value;
+  label: string;
+  accessibilityLabel?: string;
+}
+
+export interface NativeTabBarProps<Value extends string> {
+  items: readonly NativeTabItem<Value>[];
+  value: Value;
+  onChange: (value: Value) => void;
+}
+
+export function NativeTabBar<Value extends string>({ items, value, onChange }: NativeTabBarProps<Value>) {
+  const { colors, spacing, textSizes, fontWeights, radii } = useNativeTheme();
+  return (
+    <View
+      accessibilityRole="tablist"
+      style={{ flexDirection: "row", backgroundColor: colors.card, borderTopColor: colors["border-default"], borderTopWidth: spacing.px, padding: spacing["2"], gap: spacing["1"] }}
+    >
+      {items.map((item) => {
+        const selected = item.value === value;
+        return (
+          <Pressable
+            key={item.value}
+            accessibilityRole="tab"
+            accessibilityLabel={item.accessibilityLabel ?? item.label}
+            accessibilityState={{ selected }}
+            onPress={() => onChange(item.value)}
+            style={({ pressed }) => ({
+              flex: 1,
+              minHeight: spacing["12"],
+              paddingHorizontal: spacing["2"],
+              paddingVertical: spacing["2"],
+              borderRadius: radii.lg,
+              backgroundColor: selected ? colors.accent : pressed ? colors.secondary : colors.card,
+              alignItems: "center",
+              justifyContent: "center",
+            })}
+          >
+            <Text style={{ color: selected ? colors["text-primary"] : colors["text-secondary"], fontSize: textSizes.sm, fontWeight: selected ? fontWeights.semibold : fontWeights.normal }}>
+              {item.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

package/src/native/index.ts

@@ -0,0 +1,2 @@
+export { NativeBadge, NativeButton, NativeSurface, NativeTabBar, type NativeBadgeProps, type NativeBadgeVariant, type NativeButtonProps, type NativeButtonSize, type NativeButtonVariant, type NativeSurfaceProps, type NativeTabBarProps, type NativeTabItem } from "./components";
+export { NativeThemeProvider, useNativeTheme, type NativeColorPreference, type NativeTheme, type NativeThemeProviderProps } from "./theme";

package/src/native/theme.tsx

@@ -0,0 +1,69 @@
+import React, { createContext, useContext, useMemo } from "react";
+import { useColorScheme, type TextStyle } from "react-native";
+import { colorThemes, fontWeights, radii, spacing, textLineHeights, textSizes, type ColorMode, type ColorTheme } from "../styles/tokens";
+
+export type NativeColorPreference = ColorMode | "system";
+
+export interface NativeTheme {
+  mode: ColorMode;
+  colors: ColorTheme;
+  spacing: typeof spacing;
+  textSizes: typeof textSizes;
+  textLineHeights: typeof textLineHeights;
+  fontWeights: Readonly<Record<keyof typeof fontWeights, NonNullable<TextStyle["fontWeight"]>>>;
+  radii: typeof radii;
+}
+
+function nativeFontWeight(token: keyof typeof fontWeights): NonNullable<TextStyle["fontWeight"]> {
+  switch (fontWeights[token]) {
+    case "100": return "100";
+    case "200": return "200";
+    case "300": return "300";
+    case "400": return "400";
+    case "500": return "500";
+    case "600": return "600";
+    case "700": return "700";
+    case "800": return "800";
+    case "900": return "900";
+    default: throw new Error(`Unsupported native font-weight token: ${fontWeights[token]}`);
+  }
+}
+
+const nativeFontWeights: NativeTheme["fontWeights"] = {
+  thin: nativeFontWeight("thin"),
+  extralight: nativeFontWeight("extralight"),
+  light: nativeFontWeight("light"),
+  normal: nativeFontWeight("normal"),
+  medium: nativeFontWeight("medium"),
+  semibold: nativeFontWeight("semibold"),
+  bold: nativeFontWeight("bold"),
+  extrabold: nativeFontWeight("extrabold"),
+  black: nativeFontWeight("black"),
+};
+
+const NativeThemeContext = createContext<NativeTheme>({
+  mode: "light",
+  colors: colorThemes.light,
+  spacing,
+  textSizes,
+  textLineHeights,
+  fontWeights: nativeFontWeights,
+  radii,
+});
+
+export interface NativeThemeProviderProps {
+  children: React.ReactNode;
+  colorPreference?: NativeColorPreference;
+}
+
+export function NativeThemeProvider({ children, colorPreference = "system" }: NativeThemeProviderProps) {
+  const systemMode = useColorScheme();
+  const mode: ColorMode = colorPreference === "system" ? (systemMode === "dark" ? "dark" : "light") : colorPreference;
+  const value = useMemo<NativeTheme>(() => ({ mode, colors: colorThemes[mode], spacing, textSizes, textLineHeights, fontWeights: nativeFontWeights, radii }), [mode]);
+
+  return <NativeThemeContext.Provider value={value}>{children}</NativeThemeContext.Provider>;
+}
+
+export function useNativeTheme(): NativeTheme {
+  return useContext(NativeThemeContext);
+}

package/src/styles/build.ts

@@ -0,0 +1 @@
+import "./package.css";

package/src/styles/index.css

@@ -17,6 +17,7 @@
 @import "./tokens/generated/foundations.css";
 @import "./tokens/generated/light.css";
 @import "./tokens/generated/dark.css" (prefers-color-scheme: dark);
+@import "./tokens/generated/dark-class.css";
 @import "./animations.css";
 @import "./nokia.css";
 
@@ -200,6 +201,85 @@
   height: 100dvh;
 }
 
+/* Responsive dropdown surfaces keep their menu/listbox semantics while
+ * becoming thumb-reachable sheets on compact viewports. */
+.ui-mobile-sheet-backdrop {
+  display: none;
+}
+.ui-mobile-sheet-positioner {
+  z-index: var(--z-index-50);
+}
+.ui-mobile-sheet-close {
+  display: none;
+}
+@media (max-width: 767px) {
+  .ui-mobile-sheet-backdrop {
+    position: fixed;
+    z-index: var(--z-index-50);
+    display: block;
+    background: color-mix(in srgb, var(--overlay-scrim) 50%, transparent);
+    inset: 0;
+  }
+  .ui-mobile-sheet-positioner {
+    position: fixed !important;
+    z-index: calc(var(--z-index-50) + 1) !important;
+    display: block;
+    width: 100% !important;
+    height: auto !important;
+    max-height: none !important;
+    transform: none !important;
+    inset: auto 0 0 !important;
+  }
+  .ui-mobile-sheet-popup {
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: none !important;
+    max-height: min(75dvh, var(--available-height, 75dvh)) !important;
+    border-start-start-radius: var(--radius-2xl) !important;
+    border-start-end-radius: var(--radius-2xl) !important;
+    border-end-start-radius: 0 !important;
+    border-end-end-radius: 0 !important;
+    padding-bottom: max(var(--spacing-scale-4), env(safe-area-inset-bottom)) !important;
+    overscroll-behavior: contain;
+  }
+  .ui-mobile-popover-popup {
+    padding-block-start: calc(var(--spacing-scale-12) + var(--spacing-scale-2)) !important;
+  }
+  .ui-mobile-sheet-close {
+    position: absolute;
+    z-index: var(--z-index-10);
+    top: var(--spacing-scale-2);
+    right: var(--spacing-scale-3);
+    display: grid;
+    width: var(--spacing-scale-12);
+    height: var(--spacing-scale-12);
+    place-items: center;
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-full);
+    color: var(--text-secondary);
+    background: var(--background);
+    cursor: pointer;
+  }
+  .ui-mobile-sheet-close svg {
+    width: var(--spacing-scale-5);
+    height: var(--spacing-scale-5);
+  }
+  [data-slot="dropdown-menu-content"] [data-slot^="dropdown-menu-item"],
+  [data-slot="select-content"] [data-slot="select-item"] {
+    min-height: var(--spacing-scale-12);
+  }
+  [data-slot="dropdown-menu-content"][data-open],
+  [data-slot="select-content"][data-open],
+  [data-slot="popover-content"][data-open] {
+    animation: sheet-slide-in-bottom 300ms var(--ease-drawer);
+  }
+  [data-slot="dropdown-menu-content"][data-closed],
+  [data-slot="select-content"][data-closed],
+  [data-slot="popover-content"][data-closed] {
+    animation: sheet-slide-out-bottom 200ms var(--ease-drawer);
+  }
+}
+
 /* Shared layout rhythm. Product components own their layout; this does not
  * define visual component families. */
 .page-shell {
@@ -264,6 +344,16 @@
   @apply text-muted-foreground text-xs font-medium uppercase tracking-widest;
 }
 
+/* Command rows: action hints stay silent until the row is highlighted,
+ * so the list scans clean and the affordance appears exactly when usable. */
+[data-slot="command-item"] [data-slot="command-shortcut"] {
+  opacity: 0;
+  transition: opacity 120ms ease-out;
+}
+[data-slot="command-item"][data-highlighted] [data-slot="command-shortcut"] {
+  opacity: 1;
+}
+
 @layer base {
   :root {
     color-scheme: light;
@@ -273,6 +363,10 @@
       color-scheme: dark;
     }
   }
+  /* Manual override: toggling `.dark` on <html> beats the OS preference. */
+  :root.dark {
+    color-scheme: dark;
+  }
   html,
   body {
     background-color: var(--color-background);

package/src/styles/package.css

@@ -0,0 +1,3 @@
+@import "tailwindcss" source(none);
+@import "./index.css";
+@source "../components";

package/src/styles/tokens/generated/dark-class.css

@@ -0,0 +1,39 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root.dark {
+  --background: #0a0a0a;
+  --card: #111111;
+  --secondary: #1a1a1a;
+  --popover: #111111;
+  --muted: #141414;
+  --text-primary: #fafafa;
+  --text-secondary: #a3a3a3;
+  --tertiary: #a3a3a3;
+  --primary: #ededed;
+  --accent: #1e293b;
+  --destructive: #dc2626;
+  --success: #22c55e;
+  --warning: #f59e0b;
+  --text-success: #4ade80;
+  --text-warning: #fcd34d;
+  --success-foreground: #0a0a0a;
+  --warning-foreground: #0a0a0a;
+  --primary-foreground: #0a0a0a;
+  --accent-foreground: #93c5fd;
+  --destructive-foreground: #ffffff;
+  --text-destructive: #fca5a5;
+  --text-accent: #60a5fa;
+  --border-default: #262626;
+  --focus-ring: #3b82f6;
+  --chart-1: #3b82f6;
+  --chart-2: #ededed;
+  --chart-3: #737373;
+  --chart-4: #93c5fd;
+  --chart-5: #3f3f46;
+  --chart-positive: #22c55e;
+  --chart-negative: #ef4444;
+  --chart-neutral: #a3a3a3;
+  --overlay-scrim: #000000;
+}

package/src/styles/tokens/generated/dark.colors.generated.ts

@@ -3,37 +3,37 @@
  */
 
 export default {
-  background: "#171714",
-  card: "#1d1d19",
-  secondary: "#2b2b25",
-  popover: "#22221e",
-  muted: "#1d1d19",
-  "text-primary": "#ffffff",
-  "text-secondary": "#aaa79f",
-  tertiary: "#d0ccc2",
-  primary: "#178277",
-  accent: "#21433f",
-  destructive: "#ce2c31",
-  success: "#30a46c",
-  warning: "#ffc53d",
-  "text-success": "#55d89a",
-  "text-warning": "#ffd86a",
-  "success-foreground": "#15110f",
-  "warning-foreground": "#15110f",
-  "primary-foreground": "#ffffff",
-  "accent-foreground": "#ffffff",
+  background: "#0a0a0a",
+  card: "#111111",
+  secondary: "#1a1a1a",
+  popover: "#111111",
+  muted: "#141414",
+  "text-primary": "#fafafa",
+  "text-secondary": "#a3a3a3",
+  tertiary: "#a3a3a3",
+  primary: "#ededed",
+  accent: "#1e293b",
+  destructive: "#dc2626",
+  success: "#22c55e",
+  warning: "#f59e0b",
+  "text-success": "#4ade80",
+  "text-warning": "#fcd34d",
+  "success-foreground": "#0a0a0a",
+  "warning-foreground": "#0a0a0a",
+  "primary-foreground": "#0a0a0a",
+  "accent-foreground": "#93c5fd",
   "destructive-foreground": "#ffffff",
-  "text-destructive": "#ff9592",
-  "text-accent": "#1b988b",
-  "border-default": "#6b6b66",
-  "focus-ring": "#1b988b",
-  "chart-1": "#3e63dd",
-  "chart-2": "#6e56cf",
-  "chart-3": "#c73178",
-  "chart-4": "#f76b15",
-  "chart-5": "#696e77",
-  "chart-positive": "#30a46c",
-  "chart-negative": "#e5484d",
-  "chart-neutral": "#878d94",
+  "text-destructive": "#fca5a5",
+  "text-accent": "#60a5fa",
+  "border-default": "#262626",
+  "focus-ring": "#3b82f6",
+  "chart-1": "#3b82f6",
+  "chart-2": "#ededed",
+  "chart-3": "#737373",
+  "chart-4": "#93c5fd",
+  "chart-5": "#3f3f46",
+  "chart-positive": "#22c55e",
+  "chart-negative": "#ef4444",
+  "chart-neutral": "#a3a3a3",
   "overlay-scrim": "#000000",
 };

package/src/styles/tokens/generated/dark.css

@@ -3,37 +3,37 @@
  */
 
 :root {
-  --background: #171714;
-  --card: #1d1d19;
-  --secondary: #2b2b25;
-  --popover: #22221e;
-  --muted: #1d1d19;
-  --text-primary: #ffffff;
-  --text-secondary: #aaa79f;
-  --tertiary: #d0ccc2;
-  --primary: #178277;
-  --accent: #21433f;
-  --destructive: #ce2c31;
-  --success: #30a46c;
-  --warning: #ffc53d;
-  --text-success: #55d89a;
-  --text-warning: #ffd86a;
-  --success-foreground: #15110f;
-  --warning-foreground: #15110f;
-  --primary-foreground: #ffffff;
-  --accent-foreground: #ffffff;
+  --background: #0a0a0a;
+  --card: #111111;
+  --secondary: #1a1a1a;
+  --popover: #111111;
+  --muted: #141414;
+  --text-primary: #fafafa;
+  --text-secondary: #a3a3a3;
+  --tertiary: #a3a3a3;
+  --primary: #ededed;
+  --accent: #1e293b;
+  --destructive: #dc2626;
+  --success: #22c55e;
+  --warning: #f59e0b;
+  --text-success: #4ade80;
+  --text-warning: #fcd34d;
+  --success-foreground: #0a0a0a;
+  --warning-foreground: #0a0a0a;
+  --primary-foreground: #0a0a0a;
+  --accent-foreground: #93c5fd;
   --destructive-foreground: #ffffff;
-  --text-destructive: #ff9592;
-  --text-accent: #1b988b;
-  --border-default: #6b6b66;
-  --focus-ring: #1b988b;
-  --chart-1: #3e63dd;
-  --chart-2: #6e56cf;
-  --chart-3: #c73178;
-  --chart-4: #f76b15;
-  --chart-5: #696e77;
-  --chart-positive: #30a46c;
-  --chart-negative: #e5484d;
-  --chart-neutral: #878d94;
+  --text-destructive: #fca5a5;
+  --text-accent: #60a5fa;
+  --border-default: #262626;
+  --focus-ring: #3b82f6;
+  --chart-1: #3b82f6;
+  --chart-2: #ededed;
+  --chart-3: #737373;
+  --chart-4: #93c5fd;
+  --chart-5: #3f3f46;
+  --chart-positive: #22c55e;
+  --chart-negative: #ef4444;
+  --chart-neutral: #a3a3a3;
   --overlay-scrim: #000000;
 }

package/src/styles/tokens/generated/foundations.css

@@ -39,9 +39,9 @@
   --spacing-scale-1-5: 0.375rem;
   --spacing-scale-2-5: 0.625rem;
   --spacing-scale-3-5: 0.875rem;
-  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-sans: Geist, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --font-serif: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
   --text-xs: 0.75rem;
   --text-sm: 0.875rem;
   --text-base: 1rem;

package/src/styles/tokens/generated/foundations.generated.ts

@@ -43,6 +43,7 @@ export default {
   },
   font: {
     sans: [
+      "Geist",
       "system-ui",
       "-apple-system",
       "BlinkMacSystemFont",
@@ -73,6 +74,7 @@ export default {
       "Noto Color Emoji",
     ],
     mono: [
+      "Geist Mono",
       "ui-monospace",
       "SFMono-Regular",
       "Menlo",

package/src/styles/tokens/generated/light.colors.generated.ts

@@ -3,37 +3,37 @@
  */
 
 export default {
-  background: "#f4f0e8",
-  card: "#fbf8f2",
-  secondary: "#e8e4da",
-  popover: "#f6f2ea",
-  muted: "#efe9dc",
-  "text-primary": "#11110f",
-  "text-secondary": "#6a6352",
-  tertiary: "#6d6659",
-  primary: "#107066",
-  accent: "#d7efeb",
-  destructive: "#ce2c31",
-  success: "#30a46c",
-  warning: "#ffc53d",
-  "text-success": "#1f7a50",
-  "text-warning": "#8a5a00",
-  "success-foreground": "#15110f",
-  "warning-foreground": "#15110f",
+  background: "#ffffff",
+  card: "#ffffff",
+  secondary: "#f5f5f5",
+  popover: "#ffffff",
+  muted: "#fafafa",
+  "text-primary": "#111111",
+  "text-secondary": "#6b6b6b",
+  tertiary: "#6b6b6b",
+  primary: "#171717",
+  accent: "#eff6ff",
+  destructive: "#dc2626",
+  success: "#16a34a",
+  warning: "#d97706",
+  "text-success": "#15803d",
+  "text-warning": "#92400e",
+  "success-foreground": "#0a0a0a",
+  "warning-foreground": "#0a0a0a",
   "primary-foreground": "#ffffff",
-  "accent-foreground": "#11110f",
+  "accent-foreground": "#1d4ed8",
   "destructive-foreground": "#ffffff",
-  "text-destructive": "#c82c31",
-  "text-accent": "#107066",
-  "border-default": "#8f8576",
-  "focus-ring": "#107066",
-  "chart-1": "#3e63dd",
-  "chart-2": "#6e56cf",
-  "chart-3": "#c73178",
-  "chart-4": "#f76b15",
-  "chart-5": "#8b8d98",
-  "chart-positive": "#1f7a50",
-  "chart-negative": "#be2e33",
-  "chart-neutral": "#626a73",
+  "text-destructive": "#b91c1c",
+  "text-accent": "#2563eb",
+  "border-default": "#e5e5e5",
+  "focus-ring": "#2563eb",
+  "chart-1": "#2563eb",
+  "chart-2": "#111111",
+  "chart-3": "#737373",
+  "chart-4": "#93c5fd",
+  "chart-5": "#d4d4d8",
+  "chart-positive": "#15803d",
+  "chart-negative": "#dc2626",
+  "chart-neutral": "#737373",
   "overlay-scrim": "#000000",
 };