@rarui/styles 2.2.5 → 2.3.0-rc.2

package/dist/packages/surface/card/rarui-card.css.js

@@ -0,0 +1 @@
+import"./../../../themes/globals.css";import"./rarui-card.css";import{c as r}from"../../../node_modules/rainbow-sprinkles/dist/createRuntimeFn-891c4670.esm.js";import{c as a}from"../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";var o=r({config:{backgroundColor:{values:{transparent:{conditions:{xs:"rarui-card_backgroundColor-transparent-xs__2r8l1h3",md:"rarui-card_backgroundColor-transparent-md__2r8l1h4",lg:"rarui-card_backgroundColor-transparent-lg__2r8l1h5",xl:"rarui-card_backgroundColor-transparent-xl__2r8l1h6"},default:"rarui-card_backgroundColor-transparent-xs__2r8l1h3"},background:{conditions:{xs:"rarui-card_backgroundColor-background-xs__2r8l1h7",md:"rarui-card_backgroundColor-background-md__2r8l1h8",lg:"rarui-card_backgroundColor-background-lg__2r8l1h9",xl:"rarui-card_backgroundColor-background-xl__2r8l1ha"},default:"rarui-card_backgroundColor-background-xs__2r8l1h7"},brand:{conditions:{xs:"rarui-card_backgroundColor-brand-xs__2r8l1hb",md:"rarui-card_backgroundColor-brand-md__2r8l1hc",lg:"rarui-card_backgroundColor-brand-lg__2r8l1hd",xl:"rarui-card_backgroundColor-brand-xl__2r8l1he"},default:"rarui-card_backgroundColor-brand-xs__2r8l1hb"},"brand-hover":{conditions:{xs:"rarui-card_backgroundColor-brand-hover-xs__2r8l1hf",md:"rarui-card_backgroundColor-brand-hover-md__2r8l1hg",lg:"rarui-card_backgroundColor-brand-hover-lg__2r8l1hh",xl:"rarui-card_backgroundColor-brand-hover-xl__2r8l1hi"},default:"rarui-card_backgroundColor-brand-hover-xs__2r8l1hf"},"brand-press":{conditions:{xs:"rarui-card_backgroundColor-brand-press-xs__2r8l1hj",md:"rarui-card_backgroundColor-brand-press-md__2r8l1hk",lg:"rarui-card_backgroundColor-brand-press-lg__2r8l1hl",xl:"rarui-card_backgroundColor-brand-press-xl__2r8l1hm"},default:"rarui-card_backgroundColor-brand-press-xs__2r8l1hj"},"brand-subdued":{conditions:{xs:"rarui-card_backgroundColor-brand-subdued-xs__2r8l1hn",md:"rarui-card_backgroundColor-brand-subdued-md__2r8l1ho",lg:"rarui-card_backgroundColor-brand-subdued-lg__2r8l1hp",xl:"rarui-card_backgroundColor-brand-subdued-xl__2r8l1hq"},default:"rarui-card_backgroundColor-brand-subdued-xs__2r8l1hn"},disabled:{conditions:{xs:"rarui-card_backgroundColor-disabled-xs__2r8l1hr",md:"rarui-card_backgroundColor-disabled-md__2r8l1hs",lg:"rarui-card_backgroundColor-disabled-lg__2r8l1ht",xl:"rarui-card_backgroundColor-disabled-xl__2r8l1hu"},default:"rarui-card_backgroundColor-disabled-xs__2r8l1hr"},error:{conditions:{xs:"rarui-card_backgroundColor-error-xs__2r8l1hv",md:"rarui-card_backgroundColor-error-md__2r8l1hw",lg:"rarui-card_backgroundColor-error-lg__2r8l1hx",xl:"rarui-card_backgroundColor-error-xl__2r8l1hy"},default:"rarui-card_backgroundColor-error-xs__2r8l1hv"},"error-hover":{conditions:{xs:"rarui-card_backgroundColor-error-hover-xs__2r8l1hz",md:"rarui-card_backgroundColor-error-hover-md__2r8l1h10",lg:"rarui-card_backgroundColor-error-hover-lg__2r8l1h11",xl:"rarui-card_backgroundColor-error-hover-xl__2r8l1h12"},default:"rarui-card_backgroundColor-error-hover-xs__2r8l1hz"},"error-press":{conditions:{xs:"rarui-card_backgroundColor-error-press-xs__2r8l1h13",md:"rarui-card_backgroundColor-error-press-md__2r8l1h14",lg:"rarui-card_backgroundColor-error-press-lg__2r8l1h15",xl:"rarui-card_backgroundColor-error-press-xl__2r8l1h16"},default:"rarui-card_backgroundColor-error-press-xs__2r8l1h13"},"error-subdued":{conditions:{xs:"rarui-card_backgroundColor-error-subdued-xs__2r8l1h17",md:"rarui-card_backgroundColor-error-subdued-md__2r8l1h18",lg:"rarui-card_backgroundColor-error-subdued-lg__2r8l1h19",xl:"rarui-card_backgroundColor-error-subdued-xl__2r8l1h1a"},default:"rarui-card_backgroundColor-error-subdued-xs__2r8l1h17"},hover:{conditions:{xs:"rarui-card_backgroundColor-hover-xs__2r8l1h1b",md:"rarui-card_backgroundColor-hover-md__2r8l1h1c",lg:"rarui-card_backgroundColor-hover-lg__2r8l1h1d",xl:"rarui-card_backgroundColor-hover-xl__2r8l1h1e"},default:"rarui-card_backgroundColor-hover-xs__2r8l1h1b"},info:{conditions:{xs:"rarui-card_backgroundColor-info-xs__2r8l1h1f",md:"rarui-card_backgroundColor-info-md__2r8l1h1g",lg:"rarui-card_backgroundColor-info-lg__2r8l1h1h",xl:"rarui-card_backgroundColor-info-xl__2r8l1h1i"},default:"rarui-card_backgroundColor-info-xs__2r8l1h1f"},"info-hover":{conditions:{xs:"rarui-card_backgroundColor-info-hover-xs__2r8l1h1j",md:"rarui-card_backgroundColor-info-hover-md__2r8l1h1k",lg:"rarui-card_backgroundColor-info-hover-lg__2r8l1h1l",xl:"rarui-card_backgroundColor-info-hover-xl__2r8l1h1m"},default:"rarui-card_backgroundColor-info-hover-xs__2r8l1h1j"},"info-press":{conditions:{xs:"rarui-card_backgroundColor-info-press-xs__2r8l1h1n",md:"rarui-card_backgroundColor-info-press-md__2r8l1h1o",lg:"rarui-card_backgroundColor-info-press-lg__2r8l1h1p",xl:"rarui-card_backgroundColor-info-press-xl__2r8l1h1q"},default:"rarui-card_backgroundColor-info-press-xs__2r8l1h1n"},"info-subdued":{conditions:{xs:"rarui-card_backgroundColor-info-subdued-xs__2r8l1h1r",md:"rarui-card_backgroundColor-info-subdued-md__2r8l1h1s",lg:"rarui-card_backgroundColor-info-subdued-lg__2r8l1h1t",xl:"rarui-card_backgroundColor-info-subdued-xl__2r8l1h1u"},default:"rarui-card_backgroundColor-info-subdued-xs__2r8l1h1r"},invert:{conditions:{xs:"rarui-card_backgroundColor-invert-xs__2r8l1h1v",md:"rarui-card_backgroundColor-invert-md__2r8l1h1w",lg:"rarui-card_backgroundColor-invert-lg__2r8l1h1x",xl:"rarui-card_backgroundColor-invert-xl__2r8l1h1y"},default:"rarui-card_backgroundColor-invert-xs__2r8l1h1v"},"invert-disabled":{conditions:{xs:"rarui-card_backgroundColor-invert-disabled-xs__2r8l1h1z",md:"rarui-card_backgroundColor-invert-disabled-md__2r8l1h20",lg:"rarui-card_backgroundColor-invert-disabled-lg__2r8l1h21",xl:"rarui-card_backgroundColor-invert-disabled-xl__2r8l1h22"},default:"rarui-card_backgroundColor-invert-disabled-xs__2r8l1h1z"},"invert-hover":{conditions:{xs:"rarui-card_backgroundColor-invert-hover-xs__2r8l1h23",md:"rarui-card_backgroundColor-invert-hover-md__2r8l1h24",lg:"rarui-card_backgroundColor-invert-hover-lg__2r8l1h25",xl:"rarui-card_backgroundColor-invert-hover-xl__2r8l1h26"},default:"rarui-card_backgroundColor-invert-hover-xs__2r8l1h23"},"invert-press":{conditions:{xs:"rarui-card_backgroundColor-invert-press-xs__2r8l1h27",md:"rarui-card_backgroundColor-invert-press-md__2r8l1h28",lg:"rarui-card_backgroundColor-invert-press-lg__2r8l1h29",xl:"rarui-card_backgroundColor-invert-press-xl__2r8l1h2a"},default:"rarui-card_backgroundColor-invert-press-xs__2r8l1h27"},"invert-secondary":{conditions:{xs:"rarui-card_backgroundColor-invert-secondary-xs__2r8l1h2b",md:"rarui-card_backgroundColor-invert-secondary-md__2r8l1h2c",lg:"rarui-card_backgroundColor-invert-secondary-lg__2r8l1h2d",xl:"rarui-card_backgroundColor-invert-secondary-xl__2r8l1h2e"},default:"rarui-card_backgroundColor-invert-secondary-xs__2r8l1h2b"},overlay:{conditions:{xs:"rarui-card_backgroundColor-overlay-xs__2r8l1h2f",md:"rarui-card_backgroundColor-overlay-md__2r8l1h2g",lg:"rarui-card_backgroundColor-overlay-lg__2r8l1h2h",xl:"rarui-card_backgroundColor-overlay-xl__2r8l1h2i"},default:"rarui-card_backgroundColor-overlay-xs__2r8l1h2f"},press:{conditions:{xs:"rarui-card_backgroundColor-press-xs__2r8l1h2j",md:"rarui-card_backgroundColor-press-md__2r8l1h2k",lg:"rarui-card_backgroundColor-press-lg__2r8l1h2l",xl:"rarui-card_backgroundColor-press-xl__2r8l1h2m"},default:"rarui-card_backgroundColor-press-xs__2r8l1h2j"},primary:{conditions:{xs:"rarui-card_backgroundColor-primary-xs__2r8l1h2n",md:"rarui-card_backgroundColor-primary-md__2r8l1h2o",lg:"rarui-card_backgroundColor-primary-lg__2r8l1h2p",xl:"rarui-card_backgroundColor-primary-xl__2r8l1h2q"},default:"rarui-card_backgroundColor-primary-xs__2r8l1h2n"},secondary:{conditions:{xs:"rarui-card_backgroundColor-secondary-xs__2r8l1h2r",md:"rarui-card_backgroundColor-secondary-md__2r8l1h2s",lg:"rarui-card_backgroundColor-secondary-lg__2r8l1h2t",xl:"rarui-card_backgroundColor-secondary-xl__2r8l1h2u"},default:"rarui-card_backgroundColor-secondary-xs__2r8l1h2r"},success:{conditions:{xs:"rarui-card_backgroundColor-success-xs__2r8l1h2v",md:"rarui-card_backgroundColor-success-md__2r8l1h2w",lg:"rarui-card_backgroundColor-success-lg__2r8l1h2x",xl:"rarui-card_backgroundColor-success-xl__2r8l1h2y"},default:"rarui-card_backgroundColor-success-xs__2r8l1h2v"},"success-hover":{conditions:{xs:"rarui-card_backgroundColor-success-hover-xs__2r8l1h2z",md:"rarui-card_backgroundColor-success-hover-md__2r8l1h30",lg:"rarui-card_backgroundColor-success-hover-lg__2r8l1h31",xl:"rarui-card_backgroundColor-success-hover-xl__2r8l1h32"},default:"rarui-card_backgroundColor-success-hover-xs__2r8l1h2z"},"success-press":{conditions:{xs:"rarui-card_backgroundColor-success-press-xs__2r8l1h33",md:"rarui-card_backgroundColor-success-press-md__2r8l1h34",lg:"rarui-card_backgroundColor-success-press-lg__2r8l1h35",xl:"rarui-card_backgroundColor-success-press-xl__2r8l1h36"},default:"rarui-card_backgroundColor-success-press-xs__2r8l1h33"},"success-subdued":{conditions:{xs:"rarui-card_backgroundColor-success-subdued-xs__2r8l1h37",md:"rarui-card_backgroundColor-success-subdued-md__2r8l1h38",lg:"rarui-card_backgroundColor-success-subdued-lg__2r8l1h39",xl:"rarui-card_backgroundColor-success-subdued-xl__2r8l1h3a"},default:"rarui-card_backgroundColor-success-subdued-xs__2r8l1h37"},warning:{conditions:{xs:"rarui-card_backgroundColor-warning-xs__2r8l1h3b",md:"rarui-card_backgroundColor-warning-md__2r8l1h3c",lg:"rarui-card_backgroundColor-warning-lg__2r8l1h3d",xl:"rarui-card_backgroundColor-warning-xl__2r8l1h3e"},default:"rarui-card_backgroundColor-warning-xs__2r8l1h3b"},"warning-hover":{conditions:{xs:"rarui-card_backgroundColor-warning-hover-xs__2r8l1h3f",md:"rarui-card_backgroundColor-warning-hover-md__2r8l1h3g",lg:"rarui-card_backgroundColor-warning-hover-lg__2r8l1h3h",xl:"rarui-card_backgroundColor-warning-hover-xl__2r8l1h3i"},default:"rarui-card_backgroundColor-warning-hover-xs__2r8l1h3f"},"warning-press":{conditions:{xs:"rarui-card_backgroundColor-warning-press-xs__2r8l1h3j",md:"rarui-card_backgroundColor-warning-press-md__2r8l1h3k",lg:"rarui-card_backgroundColor-warning-press-lg__2r8l1h3l",xl:"rarui-card_backgroundColor-warning-press-xl__2r8l1h3m"},default:"rarui-card_backgroundColor-warning-press-xs__2r8l1h3j"},"warning-subdued":{conditions:{xs:"rarui-card_backgroundColor-warning-subdued-xs__2r8l1h3n",md:"rarui-card_backgroundColor-warning-subdued-md__2r8l1h3o",lg:"rarui-card_backgroundColor-warning-subdued-lg__2r8l1h3p",xl:"rarui-card_backgroundColor-warning-subdued-xl__2r8l1h3q"},default:"rarui-card_backgroundColor-warning-subdued-xs__2r8l1h3n"}},name:"backgroundColor",staticScale:{transparent:"transparent",background:"var(--rarui-colors-surface-background)",brand:"var(--rarui-colors-surface-brand)","brand-hover":"var(--rarui-colors-surface-brand-hover)","brand-press":"var(--rarui-colors-surface-brand-press)","brand-subdued":"var(--rarui-colors-surface-brand-subdued)",disabled:"var(--rarui-colors-surface-disabled)",error:"var(--rarui-colors-surface-error)","error-hover":"var(--rarui-colors-surface-error-hover)","error-press":"var(--rarui-colors-surface-error-press)","error-subdued":"var(--rarui-colors-surface-error-subdued)",hover:"var(--rarui-colors-surface-hover)",info:"var(--rarui-colors-surface-info)","info-hover":"var(--rarui-colors-surface-info-hover)","info-press":"var(--rarui-colors-surface-info-press)","info-subdued":"var(--rarui-colors-surface-info-subdued)",invert:"var(--rarui-colors-surface-invert)","invert-disabled":"var(--rarui-colors-surface-invert-disabled)","invert-hover":"var(--rarui-colors-surface-invert-hover)","invert-press":"var(--rarui-colors-surface-invert-press)","invert-secondary":"var(--rarui-colors-surface-invert-secondary)",overlay:"var(--rarui-colors-surface-overlay)",press:"var(--rarui-colors-surface-press)",primary:"var(--rarui-colors-surface-primary)",secondary:"var(--rarui-colors-surface-secondary)",success:"var(--rarui-colors-surface-success)","success-hover":"var(--rarui-colors-surface-success-hover)","success-press":"var(--rarui-colors-surface-success-press)","success-subdued":"var(--rarui-colors-surface-success-subdued)",warning:"var(--rarui-colors-surface-warning)","warning-hover":"var(--rarui-colors-surface-warning-hover)","warning-press":"var(--rarui-colors-surface-warning-press)","warning-subdued":"var(--rarui-colors-surface-warning-subdued)"}}}}),d={card:a({defaultClassName:"rarui-card__2r8l1h0",variantClassNames:{padding:{base:"rarui-card_padding_base__2r8l1h1",none:"rarui-card_padding_none__2r8l1h2"}},defaultVariants:{},compoundVariants:[]})};export{o as cardSprinkle,d as 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/index.js

@@ -0,0 +1 @@
+import{modalSprinkle as r,modalStyles as s}from"./rarui-modal.css.js";var a={classnames:s,sprinkle:r};export{a as modal};

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

@@ -0,0 +1,169 @@
+@keyframes rarui-modal_overlayAnimation__qilkny3 {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.rarui-modal__qilkny0 {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: calc(100% - 2rem);
+  min-height: 3rem;
+  justify-content: center;
+  flex-wrap: nowrap;
+  height: auto;
+  box-sizing: border-box;
+  background-color: var(--rarui-colors-surface-primary);
+  border-radius: var(--rarui-shape-border-radius-sm);
+  padding: var(--rarui-spacing-s);
+  gap: var(--rarui-spacing-xs);
+  z-index: var(--rarui-zIndex-800);
+}
+.rarui-modal_padding_base__qilkny1 {
+  padding: var(--rarui-spacing-md) var(--rarui-spacing-s);
+}
+.rarui-modal_padding_none__qilkny2 {
+  padding: 0;
+}
+.rarui-modal_overlay__qilkny4 {
+  position: fixed;
+  background-color: var(--rarui-colors-surface-overlay);
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--rarui-zIndex-600);
+  border: none;
+  animation: rarui-modal_overlayAnimation__qilkny3 0.5s ease;
+}
+@media screen and (min-width: 0px) {
+  .rarui-modal_maxWidth-xs__qilkny9 {
+    max-width: var(--maxWidth-xs__qilkny5);
+  }
+  .rarui-modal_zIndex-100-xs__qilknyd {
+    z-index: var(--rarui-zIndex-100);
+  }
+  .rarui-modal_zIndex-200-xs__qilknyh {
+    z-index: var(--rarui-zIndex-200);
+  }
+  .rarui-modal_zIndex-300-xs__qilknyl {
+    z-index: var(--rarui-zIndex-300);
+  }
+  .rarui-modal_zIndex-400-xs__qilknyp {
+    z-index: var(--rarui-zIndex-400);
+  }
+  .rarui-modal_zIndex-500-xs__qilknyt {
+    z-index: var(--rarui-zIndex-500);
+  }
+  .rarui-modal_zIndex-600-xs__qilknyx {
+    z-index: var(--rarui-zIndex-600);
+  }
+  .rarui-modal_zIndex-700-xs__qilkny11 {
+    z-index: var(--rarui-zIndex-700);
+  }
+  .rarui-modal_zIndex-800-xs__qilkny15 {
+    z-index: var(--rarui-zIndex-800);
+  }
+  .rarui-modal_zIndex-900-xs__qilkny19 {
+    z-index: var(--rarui-zIndex-900);
+  }
+}
+@media screen and (min-width: 768px) {
+  .rarui-modal_maxWidth-md__qilknya {
+    max-width: var(--maxWidth-md__qilkny6);
+  }
+  .rarui-modal_zIndex-100-md__qilknye {
+    z-index: var(--rarui-zIndex-100);
+  }
+  .rarui-modal_zIndex-200-md__qilknyi {
+    z-index: var(--rarui-zIndex-200);
+  }
+  .rarui-modal_zIndex-300-md__qilknym {
+    z-index: var(--rarui-zIndex-300);
+  }
+  .rarui-modal_zIndex-400-md__qilknyq {
+    z-index: var(--rarui-zIndex-400);
+  }
+  .rarui-modal_zIndex-500-md__qilknyu {
+    z-index: var(--rarui-zIndex-500);
+  }
+  .rarui-modal_zIndex-600-md__qilknyy {
+    z-index: var(--rarui-zIndex-600);
+  }
+  .rarui-modal_zIndex-700-md__qilkny12 {
+    z-index: var(--rarui-zIndex-700);
+  }
+  .rarui-modal_zIndex-800-md__qilkny16 {
+    z-index: var(--rarui-zIndex-800);
+  }
+  .rarui-modal_zIndex-900-md__qilkny1a {
+    z-index: var(--rarui-zIndex-900);
+  }
+}
+@media screen and (min-width: 1200px) {
+  .rarui-modal_maxWidth-lg__qilknyb {
+    max-width: var(--maxWidth-lg__qilkny7);
+  }
+  .rarui-modal_zIndex-100-lg__qilknyf {
+    z-index: var(--rarui-zIndex-100);
+  }
+  .rarui-modal_zIndex-200-lg__qilknyj {
+    z-index: var(--rarui-zIndex-200);
+  }
+  .rarui-modal_zIndex-300-lg__qilknyn {
+    z-index: var(--rarui-zIndex-300);
+  }
+  .rarui-modal_zIndex-400-lg__qilknyr {
+    z-index: var(--rarui-zIndex-400);
+  }
+  .rarui-modal_zIndex-500-lg__qilknyv {
+    z-index: var(--rarui-zIndex-500);
+  }
+  .rarui-modal_zIndex-600-lg__qilknyz {
+    z-index: var(--rarui-zIndex-600);
+  }
+  .rarui-modal_zIndex-700-lg__qilkny13 {
+    z-index: var(--rarui-zIndex-700);
+  }
+  .rarui-modal_zIndex-800-lg__qilkny17 {
+    z-index: var(--rarui-zIndex-800);
+  }
+  .rarui-modal_zIndex-900-lg__qilkny1b {
+    z-index: var(--rarui-zIndex-900);
+  }
+}
+@media screen and (min-width: 1400px) {
+  .rarui-modal_maxWidth-xl__qilknyc {
+    max-width: var(--maxWidth-xl__qilkny8);
+  }
+  .rarui-modal_zIndex-100-xl__qilknyg {
+    z-index: var(--rarui-zIndex-100);
+  }
+  .rarui-modal_zIndex-200-xl__qilknyk {
+    z-index: var(--rarui-zIndex-200);
+  }
+  .rarui-modal_zIndex-300-xl__qilknyo {
+    z-index: var(--rarui-zIndex-300);
+  }
+  .rarui-modal_zIndex-400-xl__qilknys {
+    z-index: var(--rarui-zIndex-400);
+  }
+  .rarui-modal_zIndex-500-xl__qilknyw {
+    z-index: var(--rarui-zIndex-500);
+  }
+  .rarui-modal_zIndex-600-xl__qilkny10 {
+    z-index: var(--rarui-zIndex-600);
+  }
+  .rarui-modal_zIndex-700-xl__qilkny14 {
+    z-index: var(--rarui-zIndex-700);
+  }
+  .rarui-modal_zIndex-800-xl__qilkny18 {
+    z-index: var(--rarui-zIndex-800);
+  }
+  .rarui-modal_zIndex-900-xl__qilkny1c {
+    z-index: var(--rarui-zIndex-900);
+  }
+}

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.css.js

@@ -0,0 +1 @@
+import"./../../../themes/globals.css";import"./rarui-modal.css";import{c as a}from"../../../node_modules/rainbow-sprinkles/dist/createRuntimeFn-891c4670.esm.js";import{c as l}from"../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";var d=a({config:{maxWidth:{dynamic:{default:"rarui-modal_maxWidth-xs__qilkny9",conditions:{xs:"rarui-modal_maxWidth-xs__qilkny9",md:"rarui-modal_maxWidth-md__qilknya",lg:"rarui-modal_maxWidth-lg__qilknyb",xl:"rarui-modal_maxWidth-xl__qilknyc"}},name:"maxWidth",vars:{conditions:{xs:"var(--maxWidth-xs__qilkny5)",md:"var(--maxWidth-md__qilkny6)",lg:"var(--maxWidth-lg__qilkny7)",xl:"var(--maxWidth-xl__qilkny8)"},default:"var(--maxWidth-xs__qilkny5)"},dynamicScale:!0},zIndex:{values:{100:{conditions:{xs:"rarui-modal_zIndex-100-xs__qilknyd",md:"rarui-modal_zIndex-100-md__qilknye",lg:"rarui-modal_zIndex-100-lg__qilknyf",xl:"rarui-modal_zIndex-100-xl__qilknyg"},default:"rarui-modal_zIndex-100-xs__qilknyd"},200:{conditions:{xs:"rarui-modal_zIndex-200-xs__qilknyh",md:"rarui-modal_zIndex-200-md__qilknyi",lg:"rarui-modal_zIndex-200-lg__qilknyj",xl:"rarui-modal_zIndex-200-xl__qilknyk"},default:"rarui-modal_zIndex-200-xs__qilknyh"},300:{conditions:{xs:"rarui-modal_zIndex-300-xs__qilknyl",md:"rarui-modal_zIndex-300-md__qilknym",lg:"rarui-modal_zIndex-300-lg__qilknyn",xl:"rarui-modal_zIndex-300-xl__qilknyo"},default:"rarui-modal_zIndex-300-xs__qilknyl"},400:{conditions:{xs:"rarui-modal_zIndex-400-xs__qilknyp",md:"rarui-modal_zIndex-400-md__qilknyq",lg:"rarui-modal_zIndex-400-lg__qilknyr",xl:"rarui-modal_zIndex-400-xl__qilknys"},default:"rarui-modal_zIndex-400-xs__qilknyp"},500:{conditions:{xs:"rarui-modal_zIndex-500-xs__qilknyt",md:"rarui-modal_zIndex-500-md__qilknyu",lg:"rarui-modal_zIndex-500-lg__qilknyv",xl:"rarui-modal_zIndex-500-xl__qilknyw"},default:"rarui-modal_zIndex-500-xs__qilknyt"},600:{conditions:{xs:"rarui-modal_zIndex-600-xs__qilknyx",md:"rarui-modal_zIndex-600-md__qilknyy",lg:"rarui-modal_zIndex-600-lg__qilknyz",xl:"rarui-modal_zIndex-600-xl__qilkny10"},default:"rarui-modal_zIndex-600-xs__qilknyx"},700:{conditions:{xs:"rarui-modal_zIndex-700-xs__qilkny11",md:"rarui-modal_zIndex-700-md__qilkny12",lg:"rarui-modal_zIndex-700-lg__qilkny13",xl:"rarui-modal_zIndex-700-xl__qilkny14"},default:"rarui-modal_zIndex-700-xs__qilkny11"},800:{conditions:{xs:"rarui-modal_zIndex-800-xs__qilkny15",md:"rarui-modal_zIndex-800-md__qilkny16",lg:"rarui-modal_zIndex-800-lg__qilkny17",xl:"rarui-modal_zIndex-800-xl__qilkny18"},default:"rarui-modal_zIndex-800-xs__qilkny15"},900:{conditions:{xs:"rarui-modal_zIndex-900-xs__qilkny19",md:"rarui-modal_zIndex-900-md__qilkny1a",lg:"rarui-modal_zIndex-900-lg__qilkny1b",xl:"rarui-modal_zIndex-900-xl__qilkny1c"},default:"rarui-modal_zIndex-900-xs__qilkny19"}},name:"zIndex",staticScale:{100:"var(--rarui-zIndex-100)",200:"var(--rarui-zIndex-200)",300:"var(--rarui-zIndex-300)",400:"var(--rarui-zIndex-400)",500:"var(--rarui-zIndex-500)",600:"var(--rarui-zIndex-600)",700:"var(--rarui-zIndex-700)",800:"var(--rarui-zIndex-800)",900:"var(--rarui-zIndex-900)"}}}}),i={modal:l({defaultClassName:"rarui-modal__qilkny0",variantClassNames:{padding:{base:"rarui-modal_padding_base__qilkny1",none:"rarui-modal_padding_none__qilkny2"}},defaultVariants:{},compoundVariants:[]}),overlay:"rarui-modal_overlay__qilkny4"};export{d as modalSprinkle,i as 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 };