@jpmorganchase/mosaic-theme 0.1.0-beta.10

package/dist/color/navigable.css.d.ts

@@ -0,0 +1,321 @@
+import { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const linkColorProperties: {
+    conditions: {
+        defaultCondition: "lightMode";
+        conditionNames: ("lightMode" | "lightModeHover" | "darkMode" | "darkModeHover" | "lightModeDisabled" | "darkModeDisabled")[];
+    };
+    styles: {
+        color: {
+            values: {
+                [x: `var(--${string})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightModeHover: string;
+                        darkModeHover: string;
+                        lightModeDisabled: string;
+                        darkModeDisabled: string;
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                [x: `var(--${string}, ${string})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightModeHover: string;
+                        darkModeHover: string;
+                        lightModeDisabled: string;
+                        darkModeDisabled: string;
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                [x: `var(--${string}, ${number})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightModeHover: string;
+                        darkModeHover: string;
+                        lightModeDisabled: string;
+                        darkModeDisabled: string;
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+            };
+        };
+    };
+};
+export declare const linkColorSprinkles: ((props: {
+    color?: ((`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | {
+        lightModeHover?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkModeHover?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        lightModeDisabled?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkModeDisabled?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        lightMode?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkMode?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+    }) | undefined;
+}) => string) & {
+    properties: Set<"color">;
+};
+export declare type LinkColorSprinkles = Parameters<typeof linkColorSprinkles>[0];
+export declare const selectableLinkColorProperties: {
+    conditions: {
+        defaultCondition: "lightMode";
+        conditionNames: ("lightMode" | "lightModeHover" | "lightModeSelected" | "darkMode" | "darkModeHover" | "darkModeSelected" | "lightModeDisabled" | "darkModeDisabled")[];
+    };
+    styles: {
+        color: {
+            values: {
+                [x: `var(--${string})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightModeHover: string;
+                        darkModeHover: string;
+                        lightModeSelected: string;
+                        darkModeSelected: string;
+                        lightModeDisabled: string;
+                        darkModeDisabled: string;
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                [x: `var(--${string}, ${string})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightModeHover: string;
+                        darkModeHover: string;
+                        lightModeSelected: string;
+                        darkModeSelected: string;
+                        lightModeDisabled: string;
+                        darkModeDisabled: string;
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                [x: `var(--${string}, ${number})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightModeHover: string;
+                        darkModeHover: string;
+                        lightModeSelected: string;
+                        darkModeSelected: string;
+                        lightModeDisabled: string;
+                        darkModeDisabled: string;
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+            };
+        };
+        backgroundColor: {
+            values: {
+                [x: `var(--${string})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightModeHover: string;
+                        darkModeHover: string;
+                        lightModeSelected: string;
+                        darkModeSelected: string;
+                        lightModeDisabled: string;
+                        darkModeDisabled: string;
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                [x: `var(--${string}, ${string})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightModeHover: string;
+                        darkModeHover: string;
+                        lightModeSelected: string;
+                        darkModeSelected: string;
+                        lightModeDisabled: string;
+                        darkModeDisabled: string;
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                [x: `var(--${string}, ${number})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightModeHover: string;
+                        darkModeHover: string;
+                        lightModeSelected: string;
+                        darkModeSelected: string;
+                        lightModeDisabled: string;
+                        darkModeDisabled: string;
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+            };
+        };
+    };
+};
+export declare const selectableLinkColorSprinkles: ((props: {
+    color?: ((`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | {
+        lightModeHover?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkModeHover?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        lightModeSelected?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkModeSelected?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        lightModeDisabled?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkModeDisabled?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        lightMode?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkMode?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+    }) | undefined;
+    backgroundColor?: ((`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | {
+        lightModeHover?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkModeHover?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        lightModeSelected?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkModeSelected?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        lightModeDisabled?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkModeDisabled?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        lightMode?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkMode?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+    }) | undefined;
+}) => string) & {
+    properties: Set<"color" | "backgroundColor">;
+};
+export declare type SelectableLinkColorSprinkles = Parameters<typeof selectableLinkColorSprinkles>[0];
+export declare const documentLinkColorProperties: {
+    conditions: {
+        defaultCondition: "lightMode";
+        conditionNames: ("lightMode" | "lightModeHover" | "darkMode" | "darkModeHover" | "lightModeDisabled" | "darkModeDisabled" | "lightModeVisited" | "darkModeVisited")[];
+    };
+    styles: {
+        color: {
+            values: {
+                [x: `var(--${string})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightModeHover: string;
+                        darkModeHover: string;
+                        lightModeVisited: string;
+                        darkModeVisited: string;
+                        lightModeDisabled: string;
+                        darkModeDisabled: string;
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                [x: `var(--${string}, ${string})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightModeHover: string;
+                        darkModeHover: string;
+                        lightModeVisited: string;
+                        darkModeVisited: string;
+                        lightModeDisabled: string;
+                        darkModeDisabled: string;
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                [x: `var(--${string}, ${number})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightModeHover: string;
+                        darkModeHover: string;
+                        lightModeVisited: string;
+                        darkModeVisited: string;
+                        lightModeDisabled: string;
+                        darkModeDisabled: string;
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+            };
+        };
+    };
+};
+export declare const documentLinkColorSprinkles: ((props: {
+    color?: ((`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | {
+        lightModeHover?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkModeHover?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        lightModeVisited?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkModeVisited?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        lightModeDisabled?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkModeDisabled?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        lightMode?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkMode?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+    }) | undefined;
+}) => string) & {
+    properties: Set<"color">;
+};
+export declare type DocumentLinkColorSprinkles = Parameters<typeof documentLinkColorSprinkles>[0];
+export declare const headingLinkColorProperties: {
+    conditions: {
+        defaultCondition: "lightMode";
+        conditionNames: ("lightMode" | "lightModeHover" | "darkMode" | "darkModeHover" | "lightModeDisabled" | "darkModeDisabled" | "lightModeVisited" | "darkModeVisited")[];
+    };
+    styles: {
+        color: {
+            values: {
+                [x: `var(--${string})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightModeHover: string;
+                        darkModeHover: string;
+                        lightModeVisited: string;
+                        darkModeVisited: string;
+                        lightModeDisabled: string;
+                        darkModeDisabled: string;
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                [x: `var(--${string}, ${string})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightModeHover: string;
+                        darkModeHover: string;
+                        lightModeVisited: string;
+                        darkModeVisited: string;
+                        lightModeDisabled: string;
+                        darkModeDisabled: string;
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                [x: `var(--${string}, ${number})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightModeHover: string;
+                        darkModeHover: string;
+                        lightModeVisited: string;
+                        darkModeVisited: string;
+                        lightModeDisabled: string;
+                        darkModeDisabled: string;
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+            };
+        };
+    };
+};
+export declare const headingLinkColorSprinkles: ((props: {
+    color?: ((`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | {
+        lightModeHover?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkModeHover?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        lightModeVisited?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkModeVisited?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        lightModeDisabled?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkModeDisabled?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        lightMode?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkMode?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+    }) | undefined;
+}) => string) & {
+    properties: Set<"color">;
+};
+export declare type HeadingLinkColorSprinkles = Parameters<typeof headingLinkColorSprinkles>[0];
+export declare const selectableLinkColor: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    variant: {
+        selected: string;
+        selectedLabel: string;
+        hover: string;
+        backgroundHover: string;
+        unselected: string;
+        unSelectedLabel: string;
+    };
+}>;
+export declare type SelectableLinkColorVariants = RecipeVariants<typeof selectableLinkColor>;

package/dist/color/neutral.css.d.ts

@@ -0,0 +1,100 @@
+import { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const foregroundColorProperties: {
+    conditions: {
+        defaultCondition: ("lightMode" | "darkMode")[];
+        conditionNames: ("lightMode" | "darkMode")[];
+    };
+    styles: {
+        color: {
+            values: {
+                [x: `var(--${string})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                [x: `var(--${string}, ${string})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                [x: `var(--${string}, ${number})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+            };
+        };
+    };
+};
+export declare const foregroundColorSprinkles: ((props: {
+    color?: ((`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | {
+        lightMode?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkMode?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+    }) | undefined;
+}) => string) & {
+    properties: Set<"color">;
+};
+export declare type ForegroundColorSprinkles = Parameters<typeof foregroundColorSprinkles>[0];
+export declare const foregroundColor: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    variant: {
+        high: string;
+        mid: string;
+        low: string;
+    };
+}>;
+export declare type ForegroundColorVariants = RecipeVariants<typeof foregroundColor>;
+export declare const backgroundColorProperties: {
+    conditions: {
+        defaultCondition: ("lightMode" | "darkMode")[];
+        conditionNames: ("lightMode" | "darkMode")[];
+    };
+    styles: {
+        backgroundColor: {
+            values: {
+                [x: `var(--${string})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                [x: `var(--${string}, ${string})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                [x: `var(--${string}, ${number})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+            };
+        };
+    };
+};
+export declare const backgroundColorSprinkles: ((props: {
+    backgroundColor?: ((`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | {
+        lightMode?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkMode?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+    }) | undefined;
+}) => string) & {
+    properties: Set<"backgroundColor">;
+};
+export declare type BackgroundColorSprinkles = Parameters<typeof backgroundColorSprinkles>[0];
+export declare const backgroundColor: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    variant: {
+        regular: string;
+        emphasis: string;
+    };
+}>;
+export declare type BackgroundColorVariants = RecipeVariants<typeof backgroundColor>;

package/dist/color/selectable.css.d.ts

@@ -0,0 +1,131 @@
+import { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const selectableColorProperties: {
+    conditions: {
+        defaultCondition: "lightMode";
+        conditionNames: ("lightMode" | "lightModeHover" | "lightModeSelected" | "darkMode" | "darkModeHover" | "darkModeSelected" | "lightModeDisabled" | "darkModeDisabled")[];
+    };
+    styles: {
+        color: {
+            values: {
+                [x: `var(--${string})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightModeHover: string;
+                        darkModeHover: string;
+                        lightModeSelected: string;
+                        darkModeSelected: string;
+                        lightModeDisabled: string;
+                        darkModeDisabled: string;
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                [x: `var(--${string}, ${string})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightModeHover: string;
+                        darkModeHover: string;
+                        lightModeSelected: string;
+                        darkModeSelected: string;
+                        lightModeDisabled: string;
+                        darkModeDisabled: string;
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                [x: `var(--${string}, ${number})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightModeHover: string;
+                        darkModeHover: string;
+                        lightModeSelected: string;
+                        darkModeSelected: string;
+                        lightModeDisabled: string;
+                        darkModeDisabled: string;
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+            };
+        };
+        backgroundColor: {
+            values: {
+                [x: `var(--${string})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightModeHover: string;
+                        darkModeHover: string;
+                        lightModeSelected: string;
+                        darkModeSelected: string;
+                        lightModeDisabled: string;
+                        darkModeDisabled: string;
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                [x: `var(--${string}, ${string})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightModeHover: string;
+                        darkModeHover: string;
+                        lightModeSelected: string;
+                        darkModeSelected: string;
+                        lightModeDisabled: string;
+                        darkModeDisabled: string;
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                [x: `var(--${string}, ${number})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightModeHover: string;
+                        darkModeHover: string;
+                        lightModeSelected: string;
+                        darkModeSelected: string;
+                        lightModeDisabled: string;
+                        darkModeDisabled: string;
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+            };
+        };
+    };
+};
+export declare const selectableColorSprinkles: ((props: {
+    color?: ((`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | {
+        lightModeHover?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkModeHover?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        lightModeSelected?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkModeSelected?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        lightModeDisabled?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkModeDisabled?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        lightMode?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkMode?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+    }) | undefined;
+    backgroundColor?: ((`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | {
+        lightModeHover?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkModeHover?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        lightModeSelected?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkModeSelected?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        lightModeDisabled?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkModeDisabled?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        lightMode?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkMode?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+    }) | undefined;
+}) => string) & {
+    properties: Set<"color" | "backgroundColor">;
+};
+export declare type SelectableColorSprinkles = Parameters<typeof selectableColorSprinkles>[0];
+export declare const selectableColor: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    variant: {
+        inEdit: string;
+        hover: string;
+        selectedLabel: string;
+        hoverLabel: string;
+        unSelectedLabel: string;
+        disabled: string;
+    };
+}>;
+export declare type SelectableColorVariants = RecipeVariants<typeof selectableColor>;

package/dist/color/status.css.d.ts

@@ -0,0 +1,90 @@
+import { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const statusColorProperties: {
+    conditions: {
+        defaultCondition: ("lightMode" | "darkMode")[];
+        conditionNames: ("lightMode" | "darkMode")[];
+    };
+    styles: {
+        backgroundColor: {
+            values: {
+                [x: `var(--${string})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                [x: `var(--${string}, ${string})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                [x: `var(--${string}, ${number})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+            };
+        };
+        color: {
+            values: {
+                [x: `var(--${string})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                [x: `var(--${string}, ${string})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                [x: `var(--${string}, ${number})`]: {
+                    defaultClass: string;
+                    conditions: {
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+            };
+        };
+    };
+};
+export declare const statusColorSprinkles: ((props: {
+    backgroundColor?: ((`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | {
+        lightMode?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkMode?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+    }) | undefined;
+    color?: ((`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | {
+        lightMode?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+        darkMode?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | undefined;
+    }) | undefined;
+}) => string) & {
+    properties: Set<"color" | "backgroundColor">;
+};
+export declare type StatusColorSprinkles = Parameters<typeof statusColorSprinkles>[0];
+export declare const statusColor: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    variant: {
+        info: string;
+        alert: string;
+        positive: string;
+        negative: string;
+    };
+}>;
+export declare type StatusColorVariants = RecipeVariants<typeof statusColor>;
+export declare const statusBackgroundColor: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    variant: {
+        info: string;
+        alert: string;
+        positive: string;
+        negative: string;
+    };
+}>;
+export declare type StatusBackgroundColorVariants = RecipeVariants<typeof statusBackgroundColor>;