@surrealdb/ui 1.2.24 → 2.0.0

package/README.md

@@ -2,6 +2,8 @@
 
 The SurrealDB UI Kit defines the design system and UI primitives for use throughout all frontend projects at SurrealDB.
 
+[DESIGN.md](./DESIGN.md) describes the design system. [MIGRATE.md](./MIGRATE.md) is the guide for porting a project from 1.x.
+
 ## Using the UI Kit
 
 First, import the styles and fonts:
@@ -11,13 +13,16 @@ import "@surrealdb/ui/styles.css";
 import "@surrealdb/ui/fonts.css";
 ```
 
-Then, configure the Mantine theme:
+Then, configure the Mantine theme. The CSS variables resolver is required: it is what lets any subtree switch color scheme on its own.
 
 ```tsx
 import { MantineProvider } from "@mantine/core";
-import { MANTINE_THEME } from "@surrealdb/ui/theme";
+import { MANTINE_THEME, surrealCssVariablesResolver } from "@surrealdb/ui";
 
-<MantineProvider theme={MANTINE_THEME}>
+<MantineProvider
+	theme={MANTINE_THEME}
+	cssVariablesResolver={surrealCssVariablesResolver}
+>
 	<App />
 </MantineProvider>;
 ```
@@ -25,14 +30,24 @@ import { MANTINE_THEME } from "@surrealdb/ui/theme";
 Finally, use the components:
 
 ```tsx
-import { Heading } from "@surrealdb/ui";
+import { Display, Eyebrow, Muted, Section } from "@surrealdb/ui";
 
-<Heading
-	kicker="Foo"
-	description="Bar"
+<Section
+	tone="purple"
+	size="lg"
 >
-	Hello world
-</Heading>;
+	<Eyebrow>Get started</Eyebrow>
+	<Display size="xl">
+		One engine. <Muted>Every data model.</Muted>
+	</Display>
+</Section>;
+```
+
+A region takes a product color by stamping it on any ancestor, which recolors
+everything inside including plain Mantine controls:
+
+```tsx
+<Section accent="memory">…</Section>
 ```
 
 ## Markdown editing and rendering

package/dist/fonts.d.ts

@@ -1,134 +1,35 @@
 export { }
 
 declare module "@mantine/core" {
-    type SurrealVariant = "surreal";
-    type SurrealInputVariant = SurrealVariant | "gradient";
-    interface ActionIconProps {
-        variant?: import("@mantine/core").ActionIconVariant | SurrealVariant;
-    }
-    interface ThemeIconProps {
-        variant?: import("@mantine/core").ThemeIconVariant | SurrealVariant;
-    }
-    interface ButtonProps {
-        variant?: import("@mantine/core").ButtonVariant | SurrealVariant;
-    }
-    interface TextInputProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface InputBaseProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface AutocompleteProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface TextareaProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface NumberInputProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface TagsInputProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface MultiSelectProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface DividerProps {
-        variant?: import("@mantine/core").DividerVariant | SurrealVariant;
-    }
-    interface CloseButtonProps {
-        variant?: import("@mantine/core").CloseButtonVariant | SurrealVariant;
-    }
-    interface AnchorProps {
-        variant?: import("@mantine/core").AnchorVariant | SurrealVariant | "glow" | "vibrant";
-    }
-    interface SelectProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface BadgeProps {
-        variant?: import("@mantine/core").BadgeVariant | SurrealVariant;
-    }
-    interface CheckboxProps {
-        variant?: import("@mantine/core").CheckboxVariant | SurrealVariant | "gradient";
-    }
-    interface RadioProps {
-        variant?: import("@mantine/core").RadioVariant | SurrealVariant | "gradient";
-    }
-    interface PasswordInputProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface PinInputProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface NavLinkProps {
-        variant?: import("@mantine/core").NavLinkVariant | SurrealVariant;
-    }
-    interface PaperProps {
-        variant?: SurrealVariant | "gradient";
-    }
-    interface ScrollAreaProps {
-        variant?: SurrealVariant;
-    }
-    interface TooltipProps {
-        variant?: SurrealVariant;
-    }
-    interface PopoverDropdownProps {
-        variant?: SurrealVariant | "transparent";
-    }
-    interface HoverCardDropdownProps {
-        variant?: SurrealVariant | "transparent";
-    }
-    interface MenuDropdownProps {
-        variant?: SurrealVariant;
-    }
-    interface LoaderProps {
-        variant?: SurrealVariant;
-    }
-    interface ModalProps {
-        variant?: SurrealVariant;
-    }
-    interface OverlayProps {
-        variant?: SurrealVariant;
-    }
-    interface SkeletonProps {
-        variant?: SurrealVariant;
-    }
-    interface SegmentedControlProps {
-        variant?: "gradient";
-    }
-    interface KbdProps {
-        variant?: SurrealVariant;
-    }
-    interface SwitchProps {
-        variant?: SurrealVariant | "gradient";
-    }
-    interface TitleProps {
-        variant?: "gradient" | "surreal-gradient";
-    }
-    interface PaginationProps {
-        variant?: SurrealVariant;
-    }
-    interface TabsProps {
-        variant?: "default" | "outline" | "pills" | "gradient" | SurrealVariant;
-    }
-    interface TableProps {
-        variant?: SurrealVariant;
-    }
-    interface NotificationProps {
-        variant?: SurrealVariant | "spaced";
+    /**
+     * Theme settings the UI Kit adds on top of Mantine's.
+     *
+     * These are read by the kit's CSS variables resolver, so changing one
+     * re-emits the affected tokens rather than requiring component changes.
+     */
+    interface MantineThemeOther {
+        /**
+         * Switches the foreground on brand fills from white to black, but only
+         * where black measures better: Lilac and Pink. Purple and Violet always
+         * keep a white foreground.
+         *
+         * @default false
+         */
+        contrastMode: boolean;
     }
 }
 
 declare module "@mantine/core" {
-    type ExtendedCustomColors = "obsidian" | "slate" | import("@mantine/core").DefaultMantineColor;
+    type ExtendedCustomColors = "pink" | "lilac" | "purple" | "violet" | "obsidian" | "slate" | import("@mantine/core").DefaultMantineColor;
     interface MantineThemeColorsOverride {
         colors: Record<ExtendedCustomColors, import("@mantine/core").MantineColorsTuple>;
     }
 }
 
 declare module "@mantine/core" {
-    type ExtendedCustomSizes = import("@mantine/core").DefaultMantineSize | "2xl" | "3xl";
+    type ExtendedCustomSizes = import("@mantine/core").DefaultMantineSize | "2xl" | "3xl" | "4xl" | "5xl";
     interface MantineThemeSizesOverride {
         spacing: Record<ExtendedCustomSizes, string>;
+        fontSizes: Record<ExtendedCustomSizes, string>;
     }
 }

package/dist/icons.d.ts

@@ -410,134 +410,35 @@ export declare const Xml: string;
 export { }
 
 declare module "@mantine/core" {
-    type SurrealVariant = "surreal";
-    type SurrealInputVariant = SurrealVariant | "gradient";
-    interface ActionIconProps {
-        variant?: import("@mantine/core").ActionIconVariant | SurrealVariant;
-    }
-    interface ThemeIconProps {
-        variant?: import("@mantine/core").ThemeIconVariant | SurrealVariant;
-    }
-    interface ButtonProps {
-        variant?: import("@mantine/core").ButtonVariant | SurrealVariant;
-    }
-    interface TextInputProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface InputBaseProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface AutocompleteProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface TextareaProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface NumberInputProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface TagsInputProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface MultiSelectProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface DividerProps {
-        variant?: import("@mantine/core").DividerVariant | SurrealVariant;
-    }
-    interface CloseButtonProps {
-        variant?: import("@mantine/core").CloseButtonVariant | SurrealVariant;
-    }
-    interface AnchorProps {
-        variant?: import("@mantine/core").AnchorVariant | SurrealVariant | "glow" | "vibrant";
-    }
-    interface SelectProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface BadgeProps {
-        variant?: import("@mantine/core").BadgeVariant | SurrealVariant;
-    }
-    interface CheckboxProps {
-        variant?: import("@mantine/core").CheckboxVariant | SurrealVariant | "gradient";
-    }
-    interface RadioProps {
-        variant?: import("@mantine/core").RadioVariant | SurrealVariant | "gradient";
-    }
-    interface PasswordInputProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface PinInputProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface NavLinkProps {
-        variant?: import("@mantine/core").NavLinkVariant | SurrealVariant;
-    }
-    interface PaperProps {
-        variant?: SurrealVariant | "gradient";
-    }
-    interface ScrollAreaProps {
-        variant?: SurrealVariant;
-    }
-    interface TooltipProps {
-        variant?: SurrealVariant;
-    }
-    interface PopoverDropdownProps {
-        variant?: SurrealVariant | "transparent";
-    }
-    interface HoverCardDropdownProps {
-        variant?: SurrealVariant | "transparent";
-    }
-    interface MenuDropdownProps {
-        variant?: SurrealVariant;
-    }
-    interface LoaderProps {
-        variant?: SurrealVariant;
-    }
-    interface ModalProps {
-        variant?: SurrealVariant;
-    }
-    interface OverlayProps {
-        variant?: SurrealVariant;
-    }
-    interface SkeletonProps {
-        variant?: SurrealVariant;
-    }
-    interface SegmentedControlProps {
-        variant?: "gradient";
-    }
-    interface KbdProps {
-        variant?: SurrealVariant;
-    }
-    interface SwitchProps {
-        variant?: SurrealVariant | "gradient";
-    }
-    interface TitleProps {
-        variant?: "gradient" | "surreal-gradient";
-    }
-    interface PaginationProps {
-        variant?: SurrealVariant;
-    }
-    interface TabsProps {
-        variant?: "default" | "outline" | "pills" | "gradient" | SurrealVariant;
-    }
-    interface TableProps {
-        variant?: SurrealVariant;
-    }
-    interface NotificationProps {
-        variant?: SurrealVariant | "spaced";
+    /**
+     * Theme settings the UI Kit adds on top of Mantine's.
+     *
+     * These are read by the kit's CSS variables resolver, so changing one
+     * re-emits the affected tokens rather than requiring component changes.
+     */
+    interface MantineThemeOther {
+        /**
+         * Switches the foreground on brand fills from white to black, but only
+         * where black measures better: Lilac and Pink. Purple and Violet always
+         * keep a white foreground.
+         *
+         * @default false
+         */
+        contrastMode: boolean;
     }
 }
 
 declare module "@mantine/core" {
-    type ExtendedCustomColors = "obsidian" | "slate" | import("@mantine/core").DefaultMantineColor;
+    type ExtendedCustomColors = "pink" | "lilac" | "purple" | "violet" | "obsidian" | "slate" | import("@mantine/core").DefaultMantineColor;
     interface MantineThemeColorsOverride {
         colors: Record<ExtendedCustomColors, import("@mantine/core").MantineColorsTuple>;
     }
 }
 
 declare module "@mantine/core" {
-    type ExtendedCustomSizes = import("@mantine/core").DefaultMantineSize | "2xl" | "3xl";
+    type ExtendedCustomSizes = import("@mantine/core").DefaultMantineSize | "2xl" | "3xl" | "4xl" | "5xl";
     interface MantineThemeSizesOverride {
         spacing: Record<ExtendedCustomSizes, string>;
+        fontSizes: Record<ExtendedCustomSizes, string>;
     }
 }