@polastack/design-system 0.1.7 → 0.1.9

package/dist/index.d.ts

@@ -687,43 +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) */
-    readonly series: readonly ["#1BA491", "#3b82f6", "#f59e0b", "#ef4444", "#22c55e", "#61ebd0", "#93c5fd", "#fcd34d"];
-    /** 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: "#22c55e";
-        readonly negative: "#ef4444";
-        readonly neutral: "#a1a1aa";
-        readonly warning: "#f59e0b";
-        readonly info: "#3b82f6";
-        readonly primary: "#1BA491";
+        readonly positive: "#1BA491";
+        readonly negative: "#D4687A";
+        readonly neutral: "#94939B";
+        readonly warning: "#E8A838";
     };
-    /** Light fills for area/background (light mode) */
-    readonly areaLight: readonly ["#cdfbf0", "#dbeafe", "#fef3c7", "#fee2e2", "#dcfce7"];
-    /** Dark fills for area/background (dark mode) */
-    readonly areaDark: readonly ["#134841", "#1e3a8a", "#78350f", "#7f1d1d", "#14532d"];
-    /** 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 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, 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,59 +3753,83 @@ ChartContainer.displayName = "ChartContainer";
 
 // src/tokens/chart-theme.ts
 var chartColors = {
-  /** Primary data series palette (use in order for multi-series charts) */
-  series: [
-    colors.primary[500],
-    // #1BA491 teal
-    colors.info[500],
-    // #3b82f6 blue
-    colors.warning[500],
-    // #f59e0b amber
-    colors.error[500],
-    // #ef4444 red
-    colors.success[500],
-    // #22c55e green
-    colors.primary[300],
-    // #61ebd0 light teal
-    colors.info[300],
-    // #93c5fd light blue
-    colors.warning[300]
-    // #fcd34d light amber
+  /** 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
   ],
-  /** Semantic colors for status-based charts */
-  semantic: {
-    positive: colors.success[500],
-    negative: colors.error[500],
-    neutral: colors.neutral[400],
-    warning: colors.warning[500],
-    info: colors.info[500],
-    primary: colors.primary[500]
-  },
-  /** Light fills for area/background (light mode) */
-  areaLight: [
-    colors.primary[100],
-    colors.info[100],
-    colors.warning[100],
-    colors.error[100],
-    colors.success[100]
+  /** 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
   ],
-  /** Dark fills for area/background (dark mode) */
-  areaDark: [
-    colors.primary[900],
-    colors.info[900],
-    colors.warning[900],
-    colors.error[900],
-    colors.success[900]
+  /** 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
   ],
-  /** Grid and axis colors (use CSS variables for dark mode compatibility) */
+  /** Semantic colors for status-meaning charts (P&L, health scores, etc.) */
+  semantic: {
+    positive: "#1BA491",
+    negative: "#D4687A",
+    neutral: "#94939B",
+    warning: "#E8A838"
+  },
+  /** 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 {