@polastack/design-system 0.1.8 → 0.1.10

package/dist/index.d.ts

@@ -687,53 +687,57 @@ declare const ChartContainer: React.ForwardRefExoticComponent<ChartContainerProp
 
 /**
  * Chart theme tokens for integrating charting libraries (Recharts, Chart.js, etc.)
- * with the Polastack design system color palette.
+ * with the Polastack design system.
+ *
+ * Design approach:
+ *   - Categorical palette is hand-curated for perceptual balance (Tableau 10 methodology)
+ *   - Colors are independent from UI semantic tokens (Primer / shadcn best practice)
+ *   - Each categorical color has a 1:1 paired subtle variant for area fills (Primer emphasis/muted pattern)
+ *   - Brand teal anchors position 0; remaining hues span the full wheel for maximum distinction
  *
  * Usage with Recharts:
- *   <Bar fill={chartColors.series[0]} />
+ *   <Bar fill={chartColors.categorical[0]} />
+ *   <Area fill={chartColors.subtle[0]} stroke={chartColors.categorical[0]} />
  *
  * Usage with Chart.js:
- *   datasets: [{ backgroundColor: chartColors.series }]
+ *   datasets: [{ backgroundColor: chartColors.categorical }]
+ */
+/**
+ * 8-color categorical palette — curated for data visualization.
+ *
+ * Principles:
+ *   1. Moderate saturation ("less Crayola bright") for professional look
+ *   2. Balanced perceived lightness across all 8 hues
+ *   3. Full hue-circle coverage for maximum distinguishability
+ *   4. Warm/cool alternation to aid colorblind accessibility
+ *   5. Brand teal as the anchor color at position 0
  */
-/** Ordered color series for chart data — distinct, accessible, brand-consistent. */
 declare const chartColors: {
-    /**
-     * Primary data series palette (use in order for multi-series charts).
-     * Uses 400-level tones for a softer, more cohesive look in filled areas
-     * (bars, pie slices, etc.). Brand teal stays at 500 as the anchor.
-     */
-    readonly series: readonly ["#1BA491", "#60a5fa", "#a1a1aa", "#fbbf24", "#4ade80", "#fca5a5", "#61ebd0", "#93c5fd"];
-    /**
-     * Stronger series — for line charts and small marks (dots, strokes)
-     * where higher contrast is needed against the background.
-     */
-    readonly stroke: readonly ["#138575", "#2563eb", "#71717a", "#d97706", "#16a34a", "#ef4444", "#146b5f", "#1d4ed8"];
-    /** Semantic colors for status-based charts */
+    /** Solid colors for bars, lines, dots, and legends */
+    readonly categorical: readonly ["#1BA491", "#4E79A7", "#E8A838", "#D4687A", "#7C6BB1", "#6BA368", "#5BA4CF", "#B07A53"];
+    /** Subtle tints — 1:1 paired with categorical for area fills and backgrounds */
+    readonly subtle: readonly ["#E6F7F4", "#E8EEF4", "#FDF3E0", "#FCEAED", "#EEEBF5", "#EAF3EA", "#E6F1F8", "#F4EDE6"];
+    /** Dark-mode subtle tints — 1:1 paired with categorical */
+    readonly subtleDark: readonly ["#0C2B26", "#1A2535", "#2C2312", "#2C1A1E", "#1E1A2C", "#1A2C1A", "#1A2535", "#2C2418"];
+    /** Semantic colors for status-meaning charts (P&L, health scores, etc.) */
     readonly semantic: {
-        readonly positive: "#4ade80";
-        readonly negative: "#f87171";
-        readonly neutral: "#a1a1aa";
-        readonly warning: "#fbbf24";
-        readonly info: "#60a5fa";
-        readonly primary: "#1BA491";
+        readonly positive: "#1BA491";
+        readonly negative: "#D4687A";
+        readonly neutral: "#94939B";
+        readonly warning: "#E8A838";
     };
-    /** Light fills for area/background (light mode) — very subtle */
-    readonly areaLight: readonly ["#f0fdfb", "#eff6ff", "#f4f4f5", "#fffbeb", "#f0fdf4"];
-    /** Dark fills for area/background (dark mode) */
-    readonly areaDark: readonly ["#042c28", "#172554", "#27272a", "#451a03", "#052e16"];
-    /** Grid and axis colors (use CSS variables for dark mode compatibility) */
+    /** Grid lines and axis strokes */
     readonly grid: {
-        readonly light: "#e4e4e7";
-        readonly dark: "#3f3f46";
+        readonly light: "#E4E4E7";
+        readonly dark: "#3F3F46";
     };
-    /** Text colors for labels and legends */
+    /** Text for tick labels, legends, and annotations */
     readonly text: {
-        readonly light: "#71717a";
-        readonly dark: "#a1a1aa";
+        readonly light: "#71717A";
+        readonly dark: "#A1A1AA";
     };
 };
-type ChartColorSeries = typeof chartColors.series;
-type ChartStrokeColors = typeof chartColors.stroke;
+type ChartCategoricalColors = typeof chartColors.categorical;
 type ChartSemanticColors = typeof chartColors.semantic;
 
-export { ActiveFilters, type ActiveFiltersProps, AppShell, AppShellContent, AppShellFooter, AppShellHeader, type AppShellProps, AppShellSidebar, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, AvatarStatus, type AvatarStatusProps, type AvatarStatusType, BREAKPOINTS, Badge, type BadgeProps, BottomNavigation, BottomNavigationItem, type BottomNavigationItemProps, type BottomNavigationProps, type Breakpoint, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartColorSeries, ChartContainer, type ChartContainerProps, type ChartSemanticColors, type ChartStrokeColors, Checkbox, type CheckboxProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, CommandPaletteEmpty, CommandPaletteGroup, type CommandPaletteGroupProps, CommandPaletteItem, type CommandPaletteItemProps, type CommandPaletteProps, CommandPaletteSeparator, CommandPaletteShortcut, DataTable, DataTableColumnHeader, DataTablePagination, type DataTableProps, DataTableToolbar, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, type DisplayMode, Drawer, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, type DrawerProps, DrawerProvider, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicFormField, type DynamicFormFieldProps, EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, type EmptyStateProps, EmptyStateTitle, type FieldOption, type FieldType, FilterBar, FilterBarActions, FilterBarGroup, FilterChip, type FilterChipProps, FormActions, type FormActionsProps, FormControl, type FormControlProps, FormDescription, type FormDescriptionProps, FormField, type FormFieldProps, FormLabel, type FormLabelProps, FormLayout, type FormLayoutProps, FormMessage, type FormMessageProps, FormSection, type FormSectionProps, Input, type InputProps, InstallPrompt, type InstallPromptProps, Label, type LabelProps, NumberInput, type NumberInputProps, OfflineIndicator, type OfflineIndicatorProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PullToRefresh, type PullToRefreshProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type ResolvedTheme, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, StatCard, type StatCardProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, type TabsListProps, TabsTrigger, Textarea, type TextareaProps, type Theme, ThemeProvider, type ThemeProviderProps, Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseThemeOptions, type UseThemeReturn, avatarVariants, badgeVariants, buttonVariants, chartColors, cn, createContext, formLayoutVariants, getFieldComponent, inputVariants, spinnerVariants, switchVariants, textareaVariants, toast, toastVariants, useAppShell, useBreakpoint, useDisplayMode, useFormField, useInstallPrompt, useOnlineStatus, useTheme$1 as useTheme, useTheme as useThemeContext, useToast, useViewportHeight };
+export { ActiveFilters, type ActiveFiltersProps, AppShell, AppShellContent, AppShellFooter, AppShellHeader, type AppShellProps, AppShellSidebar, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, AvatarStatus, type AvatarStatusProps, type AvatarStatusType, BREAKPOINTS, Badge, type BadgeProps, BottomNavigation, BottomNavigationItem, type BottomNavigationItemProps, type BottomNavigationProps, type Breakpoint, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartCategoricalColors, ChartContainer, type ChartContainerProps, type ChartSemanticColors, Checkbox, type CheckboxProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, CommandPaletteEmpty, CommandPaletteGroup, type CommandPaletteGroupProps, CommandPaletteItem, type CommandPaletteItemProps, type CommandPaletteProps, CommandPaletteSeparator, CommandPaletteShortcut, DataTable, DataTableColumnHeader, DataTablePagination, type DataTableProps, DataTableToolbar, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, type DisplayMode, Drawer, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, type DrawerProps, DrawerProvider, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicFormField, type DynamicFormFieldProps, EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, type EmptyStateProps, EmptyStateTitle, type FieldOption, type FieldType, FilterBar, FilterBarActions, FilterBarGroup, FilterChip, type FilterChipProps, FormActions, type FormActionsProps, FormControl, type FormControlProps, FormDescription, type FormDescriptionProps, FormField, type FormFieldProps, FormLabel, type FormLabelProps, FormLayout, type FormLayoutProps, FormMessage, type FormMessageProps, FormSection, type FormSectionProps, Input, type InputProps, InstallPrompt, type InstallPromptProps, Label, type LabelProps, NumberInput, type NumberInputProps, OfflineIndicator, type OfflineIndicatorProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PullToRefresh, type PullToRefreshProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type ResolvedTheme, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, StatCard, type StatCardProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, type TabsListProps, TabsTrigger, Textarea, type TextareaProps, type Theme, ThemeProvider, type ThemeProviderProps, Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseThemeOptions, type UseThemeReturn, avatarVariants, badgeVariants, buttonVariants, chartColors, cn, createContext, formLayoutVariants, getFieldComponent, inputVariants, spinnerVariants, switchVariants, textareaVariants, toast, toastVariants, useAppShell, useBreakpoint, useDisplayMode, useFormField, useInstallPrompt, useOnlineStatus, useTheme$1 as useTheme, useTheme as useThemeContext, useToast, useViewportHeight };

package/dist/index.js

@@ -1,7 +1,3 @@
-import {
-  colors
-} from "./chunk-Q6XRSLLQ.js";
-
 // src/lib/cn.ts
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -3757,85 +3753,83 @@ ChartContainer.displayName = "ChartContainer";
 
 // src/tokens/chart-theme.ts
 var chartColors = {
-  /**
-   * Primary data series palette (use in order for multi-series charts).
-   * Uses 400-level tones for a softer, more cohesive look in filled areas
-   * (bars, pie slices, etc.). Brand teal stays at 500 as the anchor.
-   */
-  series: [
-    colors.primary[500],
-    // #1BA491 brand teal (anchor)
-    colors.info[400],
-    // #60a5fa soft blue
-    colors.neutral[400],
-    // #a1a1aa muted gray
-    colors.warning[400],
-    // #fbbf24 soft amber
-    colors.success[400],
-    // #4ade80 soft green
-    colors.error[300],
-    // #fca5a5 soft coral
-    colors.primary[300],
-    // #61ebd0 light teal
-    colors.info[300]
-    // #93c5fd light blue
+  /** Solid colors for bars, lines, dots, and legends */
+  categorical: [
+    "#1BA491",
+    // teal    — brand anchor
+    "#4E79A7",
+    // slate   — classic dataviz blue
+    "#E8A838",
+    // amber   — warm gold
+    "#D4687A",
+    // rose    — dusty pink-red
+    "#7C6BB1",
+    // violet  — soft purple
+    "#6BA368",
+    // sage    — muted green
+    "#5BA4CF",
+    // sky     — lighter blue
+    "#B07A53"
+    // sienna  — warm brown
+  ],
+  /** Subtle tints — 1:1 paired with categorical for area fills and backgrounds */
+  subtle: [
+    "#E6F7F4",
+    // teal
+    "#E8EEF4",
+    // slate
+    "#FDF3E0",
+    // amber
+    "#FCEAED",
+    // rose
+    "#EEEBF5",
+    // violet
+    "#EAF3EA",
+    // sage
+    "#E6F1F8",
+    // sky
+    "#F4EDE6"
+    // sienna
   ],
-  /**
-   * Stronger series — for line charts and small marks (dots, strokes)
-   * where higher contrast is needed against the background.
-   */
-  stroke: [
-    colors.primary[600],
-    // #138575 deep teal
-    colors.info[600],
-    // #2563eb deep blue
-    colors.neutral[500],
-    // #71717a medium gray
-    colors.warning[600],
-    // #d97706 deep amber
-    colors.success[600],
-    // #16a34a deep green
-    colors.error[500],
-    // #ef4444 red
-    colors.primary[700],
-    // #146b5f dark teal
-    colors.info[700]
-    // #1d4ed8 dark blue
+  /** Dark-mode subtle tints — 1:1 paired with categorical */
+  subtleDark: [
+    "#0C2B26",
+    // teal
+    "#1A2535",
+    // slate
+    "#2C2312",
+    // amber
+    "#2C1A1E",
+    // rose
+    "#1E1A2C",
+    // violet
+    "#1A2C1A",
+    // sage
+    "#1A2535",
+    // sky
+    "#2C2418"
+    // sienna
   ],
-  /** Semantic colors for status-based charts */
+  /** Semantic colors for status-meaning charts (P&L, health scores, etc.) */
   semantic: {
-    positive: colors.success[400],
-    negative: colors.error[400],
-    neutral: colors.neutral[400],
-    warning: colors.warning[400],
-    info: colors.info[400],
-    primary: colors.primary[500]
+    positive: "#1BA491",
+    negative: "#D4687A",
+    neutral: "#94939B",
+    warning: "#E8A838"
   },
-  /** Light fills for area/background (light mode) — very subtle */
-  areaLight: [
-    colors.primary[50],
-    colors.info[50],
-    colors.neutral[100],
-    colors.warning[50],
-    colors.success[50]
-  ],
-  /** Dark fills for area/background (dark mode) */
-  areaDark: [
-    colors.primary[950],
-    colors.info[950],
-    colors.neutral[800],
-    colors.warning[950],
-    colors.success[950]
-  ],
-  /** Grid and axis colors (use CSS variables for dark mode compatibility) */
+  /** Grid lines and axis strokes */
   grid: {
-    light: colors.neutral[200],
-    dark: colors.neutral[700]
+    light: "#E4E4E7",
+    // neutral-200
+    dark: "#3F3F46"
+    // neutral-700
   },
-  /** Text colors for labels and legends */
+  /** Text for tick labels, legends, and annotations */
   text: {
-    light: colors.neutral[500],
-    dark: colors.neutral[400]
+    light: "#71717A",
+    // neutral-500
+    dark: "#A1A1AA"
+    // neutral-400
   }
 };
 export {