@mikenotthepope/substrateui 0.1.1 → 0.1.2

package/base/substrate.css

@@ -450,6 +450,169 @@
     --grid-line: rgba(255, 255, 255, 0.06);
   }
 
+  /* ─── Color Theme: Plum (Light) ───
+     Only anchor-related tokens (primary, accent, info, page, ring) are
+     overridden. Surface tokens (background, foreground, muted, secondary,
+     border, input, overlay) intentionally inherit from the base light theme
+     so that color themes only shift the brand accent, not the entire surface. */
+
+  .theme-plum {
+    --page: #F0DCFE;
+    --page-foreground: #000;
+    --primary: #B254CF;
+    --primary-hover: #9A42B5;
+    --primary-foreground: #000;
+    --accent: #B254CF;
+    --accent-foreground: #000;
+    --info: #B254CF;
+    --info-foreground: #000;
+    --ring: #B254CF;
+    --grid-line: rgba(178, 84, 207, 0.12);
+
+    --primary-50:  #F8EDFC;
+    --primary-100: #F0D9F8;
+    --primary-200: #DFB0F0;
+    --primary-300: #CE87E8;
+    --primary-400: #B254CF;
+    --primary-500: #9A42B5;
+    --primary-600: #7D3596;
+    --primary-700: #602877;
+    --primary-800: #431C57;
+    --primary-900: #281038;
+
+    --info-50:  #F8EDFC;
+    --info-100: #F0D9F8;
+    --info-200: #DFB0F0;
+    --info-300: #CE87E8;
+    --info-400: #B254CF;
+    --info-500: #9A42B5;
+    --info-600: #7D3596;
+    --info-700: #602877;
+    --info-800: #431C57;
+    --info-900: #281038;
+  }
+
+  /* ─── Color Theme: Plum (Dark) ─── */
+
+  .dark.theme-plum,
+  .dark .theme-plum {
+    --page: #2E2045;
+    --page-foreground: #E6E6E6;
+    --card: #2E2045;
+    --card-foreground: #E6E6E6;
+    --primary: #B254CF;
+    --primary-hover: #9A42B5;
+    --primary-foreground: #000;
+    --accent: #B254CF;
+    --accent-foreground: #000;
+    --info: #B254CF;
+    --info-foreground: #000;
+    --ring: #fff;
+    --grid-line: rgba(178, 84, 207, 0.08);
+
+    /* Dark-adapted palette — lighter end toned down for dark backgrounds */
+    --primary-50:  #3A2548;
+    --primary-100: #452D55;
+    --primary-200: #5A3870;
+    --primary-300: #7A4698;
+    --primary-400: #B254CF;
+    --primary-500: #C476DA;
+    --primary-600: #D49BE5;
+    --primary-700: #E0B8ED;
+    --primary-800: #ECD5F5;
+    --primary-900: #F5EAFA;
+
+    --info-50:  #3A2548;
+    --info-100: #452D55;
+    --info-200: #5A3870;
+    --info-300: #7A4698;
+    --info-400: #B254CF;
+    --info-500: #C476DA;
+    --info-600: #D49BE5;
+    --info-700: #E0B8ED;
+    --info-800: #ECD5F5;
+    --info-900: #F5EAFA;
+  }
+
+  /* ─── Color Theme: Plum Trio (Light) ─── */
+
+  .theme-plum-trio {
+    --page: #F0DCFE;
+    --page-foreground: #000;
+    --primary: #B254CF;
+    --primary-hover: #9A42B5;
+    --primary-foreground: #000;
+    --accent: #2ABFAB;
+    --accent-foreground: #000;
+    --info: #E8B42A;
+    --info-foreground: #000;
+    --ring: #B254CF;
+    --grid-line: rgba(178, 84, 207, 0.12);
+
+    --primary-50:  #F8EDFC;
+    --primary-100: #F0D9F8;
+    --primary-200: #DFB0F0;
+    --primary-300: #CE87E8;
+    --primary-400: #B254CF;
+    --primary-500: #9A42B5;
+    --primary-600: #7D3596;
+    --primary-700: #602877;
+    --primary-800: #431C57;
+    --primary-900: #281038;
+
+    --info-50:  #FDF6E4;
+    --info-100: #FAECC5;
+    --info-200: #F5D88E;
+    --info-300: #F0C457;
+    --info-400: #E8B42A;
+    --info-500: #C99A1E;
+    --info-600: #A47D16;
+    --info-700: #7F6010;
+    --info-800: #5A440B;
+    --info-900: #352806;
+  }
+
+  /* ─── Color Theme: Plum Trio (Dark) ─── */
+
+  .dark.theme-plum-trio,
+  .dark .theme-plum-trio {
+    --page: #2E2045;
+    --page-foreground: #E6E6E6;
+    --card: #2E2045;
+    --card-foreground: #E6E6E6;
+    --primary: #B254CF;
+    --primary-hover: #9A42B5;
+    --primary-foreground: #000;
+    --accent: #2ABFAB;
+    --accent-foreground: #000;
+    --info: #E8B42A;
+    --info-foreground: #000;
+    --ring: #fff;
+    --grid-line: rgba(178, 84, 207, 0.08);
+
+    --primary-50:  #3A2548;
+    --primary-100: #452D55;
+    --primary-200: #5A3870;
+    --primary-300: #7A4698;
+    --primary-400: #B254CF;
+    --primary-500: #C476DA;
+    --primary-600: #D49BE5;
+    --primary-700: #E0B8ED;
+    --primary-800: #ECD5F5;
+    --primary-900: #F5EAFA;
+
+    --info-50:  #3D2E10;
+    --info-100: #4D3A14;
+    --info-200: #6B5220;
+    --info-300: #9A7828;
+    --info-400: #E8B42A;
+    --info-500: #F0C457;
+    --info-600: #F5D88E;
+    --info-700: #FAECC5;
+    --info-800: #FDF6E4;
+    --info-900: #FEFBF2;
+  }
+
   /* ─── Optional: rounded corners ─── */
 
   .with-radius {

package/dist/index.d.mts

@@ -1021,23 +1021,33 @@ declare const TwoColumnLayoutComponent: typeof TwoColumnLayout & {
 };
 
 type Theme = "light" | "dark" | "system";
+type ColorTheme = "blue" | "plum" | "plum-trio";
 interface ThemeProviderState {
     theme: Theme;
     resolvedTheme: "light" | "dark";
     setTheme: (theme: Theme) => void;
+    colorTheme: ColorTheme;
+    setColorTheme: (colorTheme: ColorTheme) => void;
+    colorThemes: readonly ColorTheme[];
 }
 interface ThemeProviderProps {
     children: React.ReactNode;
     defaultTheme?: Theme;
+    defaultColorTheme?: ColorTheme;
     storageKey?: string;
+    colorStorageKey?: string;
 }
-declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function ThemeProvider({ children, defaultTheme, defaultColorTheme, storageKey, colorStorageKey, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
 declare function useTheme(): ThemeProviderState;
 
 interface ThemeToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof iconButtonVariants> {
 }
 declare function ThemeToggle({ variant, size, className, ...props }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
 
+interface ColorThemeToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof iconButtonVariants> {
+}
+declare function ColorThemeToggle({ variant, size, className, ...props }: ColorThemeToggleProps): react_jsx_runtime.JSX.Element;
+
 interface ThemeConfig {
     /** Primary brand color and its foreground */
     primary?: string;
@@ -1219,4 +1229,4 @@ declare function NewsletterSignup({ title, subtitle, inputPlaceholder, buttonLab
 
 declare function cn(...classes: ClassNameValue[]): string;
 
-export { AccordionComponent as Accordion, AlertComponent as Alert, AlertDialogComponent as AlertDialog, AnnouncementBanner, type AnnouncementBannerProps, AvatarComponent as Avatar, type AvatarShape, Badge, BreadcrumbComponent as Breadcrumb, Button, CTABanner, type CTABannerProps, Calendar, CardComponent as Card, CardGrid, type CardGridProps, CarouselComponent as Carousel, type CarouselApi, ChartComponent as Chart, type ChartConfig, Checkbox, CollapsibleComponent as Collapsible, ComboboxComponent as Combobox, CommandComponent as Command, Container, ContextMenuComponent as ContextMenu, DataTableComponent as DataTable, DialogComponent as Dialog, Divider, DrawerComponent as Drawer, DropdownMenuComponent as DropdownMenu, FAQ, type FAQItem, type FAQProps, type Feature, FeatureSection, type FeatureSectionProps, Flex, Footer, type FooterLinkGroup, type FooterProps, FormComponent as Form, FormLayout, Grid, Hero, type HeroProps, HoverCardComponent as HoverCard, type IAlertDialogContentProps, type IAlertProps, type IBadgeProps, type IBreadcrumbLinkProps, type IButtonProps, type ICalendarProps, type ICardProps, type ICarouselProps, type IChartContainerProps, type ICheckboxProps, type IComboboxItem, type IComboboxProps, type IContainerProps, type IDataTableProps, type IDialogContentProps, type IDividerProps, type IFlexProps, type IFormActionsProps, type IFormFieldProps, type IFormLayoutProps, type IFormRowProps, type IFormSectionProps, type IGridProps, type IIconButtonProps, type IImageCardProps, type IInputOTPProps, type IInputProps, type ILinkProps, type ILoaderProps, type IMarqueeProps, type IPaginationLinkProps, type IProgressProps, type IRadioGroupItemProps, type ISectionNavProps, type ISheetContentProps, type ISkeletonProps, type ISonnerProps, type IStackProps, type ITextareaProps, IconButton, ImageCard, Input, InputOTPComponent as InputOTP, Label, Link, Loader, LogoCloud, type LogoCloudProps, Marquee, MenuComponent as Menu, MenubarComponent as Menubar, type NavAuth, NavBar, type NavBarProps, type NavBrand, type NavLink, type NavMenuItem, NavigationMenuComponent as NavigationMenu, NewsletterSignup, type NewsletterSignupProps, Pagination, PopoverComponent as Popover, type PricingFeature, PricingTable, type PricingTableProps, type PricingTier, Progress, RadioGroup, ResizableComponent as Resizable, ScrollAreaComponent as ScrollArea, Section, SectionNav, type SectionNavItem, type SectionProps, Select, SheetComponent as Sheet, SidebarComponent as Sidebar, SimplePage, type SimplePageProps, Skeleton, Slider, Stack, type Stat, StatsBar, type StatsBarProps, Switch, TableComponent as Table, TabsComponent as Tabs, Testimonial, type TestimonialItem, type TestimonialProps, Text, Textarea, type ThemeConfig, ThemeProvider, ThemeToggle, type ThemeToggleProps, Toaster, TooltipComponent as Tooltip, TwoColumnLayoutComponent as TwoColumnLayout, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, containerVariants, createTheme, dialogContentVariants, dividerVariants, flexVariants, gridVariants, iconButtonVariants, linkVariants, loaderVariants, navigationMenuTriggerStyle, sectionVariants, sheetContentVariants, sidebarMenuButtonVariants, stackVariants, useCarousel, useChart, useFormField, useSidebar, useTheme };
+export { AccordionComponent as Accordion, AlertComponent as Alert, AlertDialogComponent as AlertDialog, AnnouncementBanner, type AnnouncementBannerProps, AvatarComponent as Avatar, type AvatarShape, Badge, BreadcrumbComponent as Breadcrumb, Button, CTABanner, type CTABannerProps, Calendar, CardComponent as Card, CardGrid, type CardGridProps, CarouselComponent as Carousel, type CarouselApi, ChartComponent as Chart, type ChartConfig, Checkbox, CollapsibleComponent as Collapsible, type ColorTheme, ColorThemeToggle, type ColorThemeToggleProps, ComboboxComponent as Combobox, CommandComponent as Command, Container, ContextMenuComponent as ContextMenu, DataTableComponent as DataTable, DialogComponent as Dialog, Divider, DrawerComponent as Drawer, DropdownMenuComponent as DropdownMenu, FAQ, type FAQItem, type FAQProps, type Feature, FeatureSection, type FeatureSectionProps, Flex, Footer, type FooterLinkGroup, type FooterProps, FormComponent as Form, FormLayout, Grid, Hero, type HeroProps, HoverCardComponent as HoverCard, type IAlertDialogContentProps, type IAlertProps, type IBadgeProps, type IBreadcrumbLinkProps, type IButtonProps, type ICalendarProps, type ICardProps, type ICarouselProps, type IChartContainerProps, type ICheckboxProps, type IComboboxItem, type IComboboxProps, type IContainerProps, type IDataTableProps, type IDialogContentProps, type IDividerProps, type IFlexProps, type IFormActionsProps, type IFormFieldProps, type IFormLayoutProps, type IFormRowProps, type IFormSectionProps, type IGridProps, type IIconButtonProps, type IImageCardProps, type IInputOTPProps, type IInputProps, type ILinkProps, type ILoaderProps, type IMarqueeProps, type IPaginationLinkProps, type IProgressProps, type IRadioGroupItemProps, type ISectionNavProps, type ISheetContentProps, type ISkeletonProps, type ISonnerProps, type IStackProps, type ITextareaProps, IconButton, ImageCard, Input, InputOTPComponent as InputOTP, Label, Link, Loader, LogoCloud, type LogoCloudProps, Marquee, MenuComponent as Menu, MenubarComponent as Menubar, type NavAuth, NavBar, type NavBarProps, type NavBrand, type NavLink, type NavMenuItem, NavigationMenuComponent as NavigationMenu, NewsletterSignup, type NewsletterSignupProps, Pagination, PopoverComponent as Popover, type PricingFeature, PricingTable, type PricingTableProps, type PricingTier, Progress, RadioGroup, ResizableComponent as Resizable, ScrollAreaComponent as ScrollArea, Section, SectionNav, type SectionNavItem, type SectionProps, Select, SheetComponent as Sheet, SidebarComponent as Sidebar, SimplePage, type SimplePageProps, Skeleton, Slider, Stack, type Stat, StatsBar, type StatsBarProps, Switch, TableComponent as Table, TabsComponent as Tabs, Testimonial, type TestimonialItem, type TestimonialProps, Text, Textarea, type ThemeConfig, ThemeProvider, ThemeToggle, type ThemeToggleProps, Toaster, TooltipComponent as Tooltip, TwoColumnLayoutComponent as TwoColumnLayout, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, containerVariants, createTheme, dialogContentVariants, dividerVariants, flexVariants, gridVariants, iconButtonVariants, linkVariants, loaderVariants, navigationMenuTriggerStyle, sectionVariants, sheetContentVariants, sidebarMenuButtonVariants, stackVariants, useCarousel, useChart, useFormField, useSidebar, useTheme };

package/dist/index.d.ts

@@ -1021,23 +1021,33 @@ declare const TwoColumnLayoutComponent: typeof TwoColumnLayout & {
 };
 
 type Theme = "light" | "dark" | "system";
+type ColorTheme = "blue" | "plum" | "plum-trio";
 interface ThemeProviderState {
     theme: Theme;
     resolvedTheme: "light" | "dark";
     setTheme: (theme: Theme) => void;
+    colorTheme: ColorTheme;
+    setColorTheme: (colorTheme: ColorTheme) => void;
+    colorThemes: readonly ColorTheme[];
 }
 interface ThemeProviderProps {
     children: React.ReactNode;
     defaultTheme?: Theme;
+    defaultColorTheme?: ColorTheme;
     storageKey?: string;
+    colorStorageKey?: string;
 }
-declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function ThemeProvider({ children, defaultTheme, defaultColorTheme, storageKey, colorStorageKey, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
 declare function useTheme(): ThemeProviderState;
 
 interface ThemeToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof iconButtonVariants> {
 }
 declare function ThemeToggle({ variant, size, className, ...props }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
 
+interface ColorThemeToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof iconButtonVariants> {
+}
+declare function ColorThemeToggle({ variant, size, className, ...props }: ColorThemeToggleProps): react_jsx_runtime.JSX.Element;
+
 interface ThemeConfig {
     /** Primary brand color and its foreground */
     primary?: string;
@@ -1219,4 +1229,4 @@ declare function NewsletterSignup({ title, subtitle, inputPlaceholder, buttonLab
 
 declare function cn(...classes: ClassNameValue[]): string;
 
-export { AccordionComponent as Accordion, AlertComponent as Alert, AlertDialogComponent as AlertDialog, AnnouncementBanner, type AnnouncementBannerProps, AvatarComponent as Avatar, type AvatarShape, Badge, BreadcrumbComponent as Breadcrumb, Button, CTABanner, type CTABannerProps, Calendar, CardComponent as Card, CardGrid, type CardGridProps, CarouselComponent as Carousel, type CarouselApi, ChartComponent as Chart, type ChartConfig, Checkbox, CollapsibleComponent as Collapsible, ComboboxComponent as Combobox, CommandComponent as Command, Container, ContextMenuComponent as ContextMenu, DataTableComponent as DataTable, DialogComponent as Dialog, Divider, DrawerComponent as Drawer, DropdownMenuComponent as DropdownMenu, FAQ, type FAQItem, type FAQProps, type Feature, FeatureSection, type FeatureSectionProps, Flex, Footer, type FooterLinkGroup, type FooterProps, FormComponent as Form, FormLayout, Grid, Hero, type HeroProps, HoverCardComponent as HoverCard, type IAlertDialogContentProps, type IAlertProps, type IBadgeProps, type IBreadcrumbLinkProps, type IButtonProps, type ICalendarProps, type ICardProps, type ICarouselProps, type IChartContainerProps, type ICheckboxProps, type IComboboxItem, type IComboboxProps, type IContainerProps, type IDataTableProps, type IDialogContentProps, type IDividerProps, type IFlexProps, type IFormActionsProps, type IFormFieldProps, type IFormLayoutProps, type IFormRowProps, type IFormSectionProps, type IGridProps, type IIconButtonProps, type IImageCardProps, type IInputOTPProps, type IInputProps, type ILinkProps, type ILoaderProps, type IMarqueeProps, type IPaginationLinkProps, type IProgressProps, type IRadioGroupItemProps, type ISectionNavProps, type ISheetContentProps, type ISkeletonProps, type ISonnerProps, type IStackProps, type ITextareaProps, IconButton, ImageCard, Input, InputOTPComponent as InputOTP, Label, Link, Loader, LogoCloud, type LogoCloudProps, Marquee, MenuComponent as Menu, MenubarComponent as Menubar, type NavAuth, NavBar, type NavBarProps, type NavBrand, type NavLink, type NavMenuItem, NavigationMenuComponent as NavigationMenu, NewsletterSignup, type NewsletterSignupProps, Pagination, PopoverComponent as Popover, type PricingFeature, PricingTable, type PricingTableProps, type PricingTier, Progress, RadioGroup, ResizableComponent as Resizable, ScrollAreaComponent as ScrollArea, Section, SectionNav, type SectionNavItem, type SectionProps, Select, SheetComponent as Sheet, SidebarComponent as Sidebar, SimplePage, type SimplePageProps, Skeleton, Slider, Stack, type Stat, StatsBar, type StatsBarProps, Switch, TableComponent as Table, TabsComponent as Tabs, Testimonial, type TestimonialItem, type TestimonialProps, Text, Textarea, type ThemeConfig, ThemeProvider, ThemeToggle, type ThemeToggleProps, Toaster, TooltipComponent as Tooltip, TwoColumnLayoutComponent as TwoColumnLayout, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, containerVariants, createTheme, dialogContentVariants, dividerVariants, flexVariants, gridVariants, iconButtonVariants, linkVariants, loaderVariants, navigationMenuTriggerStyle, sectionVariants, sheetContentVariants, sidebarMenuButtonVariants, stackVariants, useCarousel, useChart, useFormField, useSidebar, useTheme };
+export { AccordionComponent as Accordion, AlertComponent as Alert, AlertDialogComponent as AlertDialog, AnnouncementBanner, type AnnouncementBannerProps, AvatarComponent as Avatar, type AvatarShape, Badge, BreadcrumbComponent as Breadcrumb, Button, CTABanner, type CTABannerProps, Calendar, CardComponent as Card, CardGrid, type CardGridProps, CarouselComponent as Carousel, type CarouselApi, ChartComponent as Chart, type ChartConfig, Checkbox, CollapsibleComponent as Collapsible, type ColorTheme, ColorThemeToggle, type ColorThemeToggleProps, ComboboxComponent as Combobox, CommandComponent as Command, Container, ContextMenuComponent as ContextMenu, DataTableComponent as DataTable, DialogComponent as Dialog, Divider, DrawerComponent as Drawer, DropdownMenuComponent as DropdownMenu, FAQ, type FAQItem, type FAQProps, type Feature, FeatureSection, type FeatureSectionProps, Flex, Footer, type FooterLinkGroup, type FooterProps, FormComponent as Form, FormLayout, Grid, Hero, type HeroProps, HoverCardComponent as HoverCard, type IAlertDialogContentProps, type IAlertProps, type IBadgeProps, type IBreadcrumbLinkProps, type IButtonProps, type ICalendarProps, type ICardProps, type ICarouselProps, type IChartContainerProps, type ICheckboxProps, type IComboboxItem, type IComboboxProps, type IContainerProps, type IDataTableProps, type IDialogContentProps, type IDividerProps, type IFlexProps, type IFormActionsProps, type IFormFieldProps, type IFormLayoutProps, type IFormRowProps, type IFormSectionProps, type IGridProps, type IIconButtonProps, type IImageCardProps, type IInputOTPProps, type IInputProps, type ILinkProps, type ILoaderProps, type IMarqueeProps, type IPaginationLinkProps, type IProgressProps, type IRadioGroupItemProps, type ISectionNavProps, type ISheetContentProps, type ISkeletonProps, type ISonnerProps, type IStackProps, type ITextareaProps, IconButton, ImageCard, Input, InputOTPComponent as InputOTP, Label, Link, Loader, LogoCloud, type LogoCloudProps, Marquee, MenuComponent as Menu, MenubarComponent as Menubar, type NavAuth, NavBar, type NavBarProps, type NavBrand, type NavLink, type NavMenuItem, NavigationMenuComponent as NavigationMenu, NewsletterSignup, type NewsletterSignupProps, Pagination, PopoverComponent as Popover, type PricingFeature, PricingTable, type PricingTableProps, type PricingTier, Progress, RadioGroup, ResizableComponent as Resizable, ScrollAreaComponent as ScrollArea, Section, SectionNav, type SectionNavItem, type SectionProps, Select, SheetComponent as Sheet, SidebarComponent as Sidebar, SimplePage, type SimplePageProps, Skeleton, Slider, Stack, type Stat, StatsBar, type StatsBarProps, Switch, TableComponent as Table, TabsComponent as Tabs, Testimonial, type TestimonialItem, type TestimonialProps, Text, Textarea, type ThemeConfig, ThemeProvider, ThemeToggle, type ThemeToggleProps, Toaster, TooltipComponent as Tooltip, TwoColumnLayoutComponent as TwoColumnLayout, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, containerVariants, createTheme, dialogContentVariants, dividerVariants, flexVariants, gridVariants, iconButtonVariants, linkVariants, loaderVariants, navigationMenuTriggerStyle, sectionVariants, sheetContentVariants, sidebarMenuButtonVariants, stackVariants, useCarousel, useChart, useFormField, useSidebar, useTheme };