@rarui/styles 2.3.0-rc.1 → 2.3.0-rc.2

package/dist/packages/surface/card/index.d.ts

@@ -0,0 +1,195 @@
+import { SprinklesFn } from '../../../node_modules/rainbow-sprinkles/dist/declarations/src/createRuntimeFn.d.js';
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const card: {
+    classnames: {
+        card: RuntimeFn<{
+            padding: {
+                base: {
+                    padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                none: {
+                    padding: number;
+                };
+            };
+        }>;
+    };
+    sprinkle: SprinklesFn<[{
+        config: {
+            backgroundColor: {
+                values: {
+                    overlay: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    background: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    brand: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "brand-hover": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "brand-press": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "brand-subdued": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    disabled: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    error: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "error-hover": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "error-press": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "error-subdued": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    hover: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    info: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "info-hover": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "info-press": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "info-subdued": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    invert: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "invert-disabled": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "invert-hover": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "invert-press": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "invert-secondary": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    press: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    primary: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    secondary: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    success: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "success-hover": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "success-press": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "success-subdued": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    warning: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "warning-hover": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "warning-press": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "warning-subdued": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    transparent: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                };
+                staticScale: {
+                    transparent: string;
+                    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "brand-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "brand-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "brand-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    disabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "error-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "error-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "error-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    hover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "info-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "info-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "info-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    invert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "invert-disabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "invert-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "invert-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "invert-secondary": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    overlay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    press: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "success-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "success-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "success-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "warning-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "warning-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "warning-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                name: "backgroundColor";
+            };
+        };
+    }]>;
+};
+
+export { card };

package/dist/packages/surface/card/rarui-card.css.d.ts

@@ -0,0 +1,27 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const cardStyles: {
+    card: RuntimeFn<{
+        /**
+         * Specifies the padding inside the card.
+         * This prop accepts one of the following values: "none" or "base".
+         * @default base
+         */
+        padding: {
+            base: {
+                padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            none: {
+                padding: number;
+            };
+        };
+    }>;
+};
+declare const cardBackgroundColorProperties: {
+    transparent: string;
+    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+
+export { cardBackgroundColorProperties, cardStyles };

package/dist/packages/surface/card/rarui-card.types.d.ts

@@ -0,0 +1,16 @@
+import { RecipeVariants } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+import { AddDollar, Conditions } from '../../../types/utils.types.js';
+import { cardStyles, cardBackgroundColorProperties } from './rarui-card.css.js';
+
+type CardVariants = NonNullable<RecipeVariants<typeof cardStyles.card>>;
+interface CardSprinkle {
+    /**
+     * Specifies the background color of the card.
+     * This prop accepts one of the following values: "$transparent", "$background", "$primary", or "$secondary"
+     * @default $primary
+     * @examples ["$brand", { xs: "$brand", md: "$secondary" }]
+     */
+    backgroundColor?: AddDollar<keyof typeof cardBackgroundColorProperties> | Conditions<AddDollar<keyof typeof cardBackgroundColorProperties>>;
+}
+
+export type { CardSprinkle, CardVariants };

package/dist/packages/surface/modal/index.d.ts

@@ -0,0 +1,91 @@
+import { SprinklesFn } from '../../../node_modules/rainbow-sprinkles/dist/declarations/src/createRuntimeFn.d.js';
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const modal: {
+    classnames: {
+        modal: RuntimeFn<{
+            padding: {
+                base: {
+                    padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}) var(--${string}, ${number})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string}, ${number})` | `var(--${string}, ${number}) var(--${string})` | `var(--${string}, ${number}) var(--${string}, ${string})` | `var(--${string}, ${number}) var(--${string}, ${number})`;
+                };
+                none: {
+                    padding: number;
+                };
+            };
+        }>;
+        overlay: string;
+    };
+    sprinkle: SprinklesFn<[{
+        config: {
+            zIndex: {
+                values: {
+                    100: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    200: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    300: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    400: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    500: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    600: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    700: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    800: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    900: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                };
+                staticScale: {
+                    "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                name: "zIndex";
+            };
+        };
+    } & {
+        config: {
+            maxWidth: {
+                dynamic: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+                dynamicScale: true;
+                name: "maxWidth";
+                vars: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+            };
+        };
+    }]>;
+};
+
+export { modal };

package/dist/packages/surface/modal/rarui-modal.css.d.ts

@@ -0,0 +1,21 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const modalStyles: {
+    modal: RuntimeFn<{
+        /**
+         * Padding properties are used to generate space around the content area of an Accordion.Body..
+         * @default base
+         */
+        padding: {
+            base: {
+                padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}) var(--${string}, ${number})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string}, ${number})` | `var(--${string}, ${number}) var(--${string})` | `var(--${string}, ${number}) var(--${string}, ${string})` | `var(--${string}, ${number}) var(--${string}, ${number})`;
+            };
+            none: {
+                padding: number;
+            };
+        };
+    }>;
+    overlay: string;
+};
+
+export { modalStyles };

package/dist/packages/surface/modal/rarui-modal.types.d.ts

@@ -0,0 +1,16 @@
+import { RecipeVariants } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+import { modalStyles } from './rarui-modal.css.js';
+import { StandardLonghandProperties } from '../../../types/css.types.js';
+import { AddDollar, Conditions } from '../../../types/utils.types.js';
+import { zIndexProperties } from '../../../properties/css.js';
+
+type ModalVariants = Omit<NonNullable<RecipeVariants<typeof modalStyles.modal>>, "selected">;
+type ModalDynamicProperties = Pick<StandardLonghandProperties, "maxWidth">;
+interface ModalSprinkle extends ModalDynamicProperties {
+    /**
+     * The zIndex property specifies the stack order of the box.
+     */
+    zIndex?: AddDollar<keyof typeof zIndexProperties> | Conditions<AddDollar<keyof typeof zIndexProperties>>;
+}
+
+export type { ModalSprinkle, ModalVariants };

package/dist/properties/css.d.ts

@@ -0,0 +1,207 @@
+declare const shadowProperties: {
+    none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "top-1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "top-2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "top-3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "top-4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "top-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "bottom-1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "bottom-2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "bottom-3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "bottom-4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "bottom-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const fontWeightProperties: {
+    regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    semiBold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const fontSizeProperties: {
+    "body-xxs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "body-xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "body-s": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "body-m": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "body-l": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "body-xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "heading-hero": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "heading-xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "heading-s": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "heading-m": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "heading-l": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "heading-xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "button-s": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "button-m": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "button-l": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "label-s": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "label-m": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "label-l": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const fontFamilyProperties: {
+    body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    heading: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    button: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const lineHeightProperties: {
+    readonly "body-xxs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "body-xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "body-s": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "body-m": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "body-l": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "body-xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "heading-hero": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "heading-xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "heading-s": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "heading-m": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "heading-l": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "heading-xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "button-s": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "button-m": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "button-l": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "label-s": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "label-m": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "label-l": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const spacingProperties: {
+    readonly none: "0";
+    readonly "4xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "3xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "2xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly s: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly md: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly lg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "2xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "3xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "4xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "5xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "6xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "7xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    readonly "8xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const marginProperties: {
+    none: "0";
+    "4xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "3xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "2xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    s: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    md: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    lg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "2xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "3xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "4xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "5xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "6xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "7xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "8xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    auto: string;
+};
+declare const borderRadiusProperties: {
+    none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "2xs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    sm: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    md: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    lg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "2xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    pill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    button: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    input: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const borderWidthProperties: {
+    none: string;
+    "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const zIndexProperties: {
+    "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const colorProperties: {
+    currentColor: string;
+    brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "brand-alt": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    disabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    invert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "invert-disabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "invert-secondary": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "on-brand": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "on-error": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "on-info": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "on-success": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "on-warning": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "warning-alt": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const borderColorProperties: {
+    transparent: string;
+    brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "brand-alt": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    disabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    divider: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    invert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "invert-disabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    subdued: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const backgroundColorProperties: {
+    transparent: string;
+    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "brand-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "brand-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "brand-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    disabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "error-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "error-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "error-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    hover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "info-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "info-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "info-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    invert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "invert-disabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "invert-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "invert-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "invert-secondary": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    overlay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    press: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "success-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "success-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "success-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "warning-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "warning-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "warning-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+
+export { backgroundColorProperties, borderColorProperties, borderRadiusProperties, borderWidthProperties, colorProperties, fontFamilyProperties, fontSizeProperties, fontWeightProperties, lineHeightProperties, marginProperties, shadowProperties, spacingProperties, zIndexProperties };