@polastack/design-system 0.1.7 → 0.1.8

package/dist/index.d.ts

@@ -697,21 +697,30 @@ declare const ChartContainer: React.ForwardRefExoticComponent<ChartContainerProp
  */
 /** 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"];
+    /**
+     * 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 */
     readonly semantic: {
-        readonly positive: "#22c55e";
-        readonly negative: "#ef4444";
+        readonly positive: "#4ade80";
+        readonly negative: "#f87171";
         readonly neutral: "#a1a1aa";
-        readonly warning: "#f59e0b";
-        readonly info: "#3b82f6";
+        readonly warning: "#fbbf24";
+        readonly info: "#60a5fa";
         readonly primary: "#1BA491";
     };
-    /** Light fills for area/background (light mode) */
-    readonly areaLight: readonly ["#cdfbf0", "#dbeafe", "#fef3c7", "#fee2e2", "#dcfce7"];
+    /** 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 ["#134841", "#1e3a8a", "#78350f", "#7f1d1d", "#14532d"];
+    readonly areaDark: readonly ["#042c28", "#172554", "#27272a", "#451a03", "#052e16"];
     /** Grid and axis colors (use CSS variables for dark mode compatibility) */
     readonly grid: {
         readonly light: "#e4e4e7";
@@ -724,6 +733,7 @@ declare const chartColors: {
     };
 };
 type ChartColorSeries = typeof chartColors.series;
+type ChartStrokeColors = typeof chartColors.stroke;
 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 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 };

package/dist/index.js

@@ -3757,49 +3757,75 @@ ChartContainer.displayName = "ChartContainer";
 
 // src/tokens/chart-theme.ts
 var chartColors = {
-  /** Primary data series palette (use in order for multi-series charts) */
+  /**
+   * 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 teal
-    colors.info[500],
-    // #3b82f6 blue
-    colors.warning[500],
-    // #f59e0b amber
-    colors.error[500],
-    // #ef4444 red
-    colors.success[500],
-    // #22c55e green
+    // #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],
+    colors.info[300]
     // #93c5fd light blue
-    colors.warning[300]
-    // #fcd34d light amber
+  ],
+  /**
+   * 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
   ],
   /** Semantic colors for status-based charts */
   semantic: {
-    positive: colors.success[500],
-    negative: colors.error[500],
+    positive: colors.success[400],
+    negative: colors.error[400],
     neutral: colors.neutral[400],
-    warning: colors.warning[500],
-    info: colors.info[500],
+    warning: colors.warning[400],
+    info: colors.info[400],
     primary: colors.primary[500]
   },
-  /** Light fills for area/background (light mode) */
+  /** Light fills for area/background (light mode) — very subtle */
   areaLight: [
-    colors.primary[100],
-    colors.info[100],
-    colors.warning[100],
-    colors.error[100],
-    colors.success[100]
+    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[900],
-    colors.info[900],
-    colors.warning[900],
-    colors.error[900],
-    colors.success[900]
+    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: {