@jordan-mace/chaser-design-system 1.2.3 → 1.2.4

package/dist/styles/sprinkles.css.d.ts

@@ -0,0 +1,241 @@
+export declare const colors: {
+    'c1-50': string;
+    'c1-100': string;
+    'c1-150': string;
+    'c1-200': string;
+    'c1-250': string;
+    'c1-300': string;
+    'c1-350': string;
+    'c1-400': string;
+    'c1-450': string;
+    'c1-500': string;
+    'c1-550': string;
+    'c1-600': string;
+    'c1-650': string;
+    'c1-700': string;
+    'c1-750': string;
+    'c1-800': string;
+    'c1-850': string;
+    'c1-900': string;
+    'c2-50': string;
+    'c2-100': string;
+    'c2-150': string;
+    'c2-200': string;
+    'c2-250': string;
+    'c2-300': string;
+    'c2-350': string;
+    'c2-400': string;
+    'c2-450': string;
+    'c2-500': string;
+    'c2-550': string;
+    'c2-600': string;
+    'c2-650': string;
+    'c2-700': string;
+    'c2-750': string;
+    'c2-800': string;
+    'c2-850': string;
+    'c2-900': string;
+    'c3-50': string;
+    'c3-100': string;
+    'c3-150': string;
+    'c3-200': string;
+    'c3-250': string;
+    'c3-300': string;
+    'c3-350': string;
+    'c3-400': string;
+    'c3-450': string;
+    'c3-500': string;
+    'c3-550': string;
+    'c3-600': string;
+    'c3-650': string;
+    'c3-700': string;
+    'c3-750': string;
+    'c3-800': string;
+    'c3-850': string;
+    'c3-900': string;
+    'c4-50': string;
+    'c4-100': string;
+    'c4-150': string;
+    'c4-200': string;
+    'c4-250': string;
+    'c4-300': string;
+    'c4-350': string;
+    'c4-400': string;
+    'c4-450': string;
+    'c4-500': string;
+    'c4-550': string;
+    'c4-600': string;
+    'c4-650': string;
+    'c4-700': string;
+    'c4-750': string;
+    'c4-800': string;
+    'c4-850': string;
+    'c4-900': string;
+    'c5-50': string;
+    'c5-100': string;
+    'c5-150': string;
+    'c5-200': string;
+    'c5-250': string;
+    'c5-300': string;
+    'c5-350': string;
+    'c5-400': string;
+    'c5-450': string;
+    'c5-500': string;
+    'c5-550': string;
+    'c5-600': string;
+    'c5-650': string;
+    'c5-700': string;
+    'c5-750': string;
+    'c5-800': string;
+    'c5-850': string;
+    'c5-900': string;
+};
+export declare const sprinkles: ((props: {
+    display?: ("flex" | "none" | "block" | "inline" | {
+        mobile?: "flex" | "none" | "block" | "inline";
+        tablet?: "flex" | "none" | "block" | "inline";
+        desktop?: "flex" | "none" | "block" | "inline";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "flex" | "none" | "block" | "inline">;
+    width?: ("auto" | "100%" | "50%" | "25%" | {
+        mobile?: "auto" | "100%" | "50%" | "25%";
+        tablet?: "auto" | "100%" | "50%" | "25%";
+        desktop?: "auto" | "100%" | "50%" | "25%";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "100%" | "50%" | "25%">;
+    height?: ("auto" | "100%" | "50%" | "25%" | {
+        mobile?: "auto" | "100%" | "50%" | "25%";
+        tablet?: "auto" | "100%" | "50%" | "25%";
+        desktop?: "auto" | "100%" | "50%" | "25%";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "100%" | "50%" | "25%">;
+    flexDirection?: ("column" | "row" | {
+        mobile?: "column" | "row";
+        tablet?: "column" | "row";
+        desktop?: "column" | "row";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "column" | "row">;
+    justifyContent?: ("space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | {
+        mobile?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
+        tablet?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
+        desktop?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start">;
+    alignItems?: ("stretch" | "center" | "flex-end" | "flex-start" | {
+        mobile?: "stretch" | "center" | "flex-end" | "flex-start";
+        tablet?: "stretch" | "center" | "flex-end" | "flex-start";
+        desktop?: "stretch" | "center" | "flex-end" | "flex-start";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "stretch" | "center" | "flex-end" | "flex-start">;
+    paddingTop?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    paddingBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    paddingLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    paddingRight?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    marginLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    marginRight?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    marginTop?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    marginBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    borderLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    borderRight?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    borderTop?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    borderBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    borderRadius?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    gap?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    padding?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    border?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    paddingX?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    paddingY?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    marginX?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    marginY?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    placeItems?: import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "stretch" | "center" | "flex-end" | "flex-start"> | ("stretch" | "center" | "flex-end" | "flex-start" | {
+        mobile?: "stretch" | "center" | "flex-end" | "flex-start";
+        tablet?: "stretch" | "center" | "flex-end" | "flex-start";
+        desktop?: "stretch" | "center" | "flex-end" | "flex-start";
+    });
+} & {
+    color?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900" | {
+        lightMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
+        darkMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
+    };
+    background?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900" | {
+        lightMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
+        darkMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
+    };
+}) => string) & {
+    properties: Set<"alignItems" | "color" | "display" | "flexDirection" | "height" | "justifyContent" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "width" | "background" | "border" | "borderBottom" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "gap" | "padding" | "placeItems" | "paddingX" | "paddingY" | "marginX" | "marginY">;
+};
+export type Sprinkles = Parameters<typeof sprinkles>[0];

package/dist/styles/sprinkles.css.js

@@ -0,0 +1,165 @@
+import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
+import { componentsLayer } from './layers.css';
+const space = {
+    none: 0,
+    small: '4px',
+    medium: '8px',
+    large: '16px',
+    auto: 'auto',
+    // etc.
+};
+const responsiveProperties = defineProperties({
+    '@layer': componentsLayer,
+    conditions: {
+        mobile: {},
+        tablet: { '@media': 'screen and (min-width: 768px)' },
+        desktop: { '@media': 'screen and (min-width: 1024px)' },
+    },
+    defaultCondition: 'mobile',
+    responsiveArray: ['mobile', 'tablet', 'desktop'],
+    properties: {
+        display: ['none', 'flex', 'block', 'inline'],
+        width: ['auto', '100%', '50%', '25%'],
+        height: ['auto', '100%', '50%', '25%'],
+        flexDirection: ['row', 'column'],
+        justifyContent: [
+            'stretch',
+            'flex-start',
+            'center',
+            'flex-end',
+            'space-around',
+            'space-between',
+        ],
+        alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
+        paddingTop: space,
+        paddingBottom: space,
+        paddingLeft: space,
+        paddingRight: space,
+        marginLeft: space,
+        marginRight: space,
+        marginTop: space,
+        marginBottom: space,
+        borderLeft: space,
+        borderRight: space,
+        borderTop: space,
+        borderBottom: space,
+        borderRadius: space,
+        gap: space,
+        // etc.
+    },
+    shorthands: {
+        padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],
+        border: ['borderTop', 'borderRight', 'borderBottom', 'borderLeft'],
+        paddingX: ['paddingLeft', 'paddingRight'],
+        paddingY: ['paddingTop', 'paddingBottom'],
+        marginX: ['marginLeft', 'marginRight'],
+        marginY: ['marginTop', 'marginBottom'],
+        placeItems: ['justifyContent', 'alignItems'],
+    },
+});
+export const colors = {
+    // Generated color tokens from base palette [CAE5FF, ACEDFF, 89BBFE, 6F8AB7, 615D6C]
+    'c1-50': '#F5FAFE',
+    'c1-100': '#DDEEFD',
+    'c1-150': '#BFDFFC',
+    'c1-200': '#A6D3FC',
+    'c1-250': '#88C4FC',
+    'c1-300': '#6EB7FC',
+    'c1-350': '#54ABFC',
+    'c1-400': '#349CFE',
+    'c1-450': '#1A90FF',
+    'c1-500': '#0181F9',
+    'c1-550': '#0374DD',
+    'c1-600': '#0464BE',
+    'c1-650': '#0457A4',
+    'c1-700': '#054A8A',
+    'c1-750': '#043A6C',
+    'c1-800': '#042D53',
+    'c1-850': '#031D35',
+    'c1-900': '#02101D',
+    'c2-50': '#F5FCFE',
+    'c2-100': '#DDF6FD',
+    'c2-150': '#BFEFFC',
+    'c2-200': '#A6E9FC',
+    'c2-250': '#88E3FC',
+    'c2-300': '#6EDDFC',
+    'c2-350': '#54D8FC',
+    'c2-400': '#34D2FE',
+    'c2-450': '#1ACDFF',
+    'c2-500': '#01C3F9',
+    'c2-550': '#03AEDD',
+    'c2-600': '#0496BE',
+    'c2-650': '#0481A4',
+    'c2-700': '#056D8A',
+    'c2-750': '#04556C',
+    'c2-800': '#044253',
+    'c2-850': '#032A35',
+    'c2-900': '#02171D',
+    'c3-50': '#F5F9FE',
+    'c3-100': '#DDEBFD',
+    'c3-150': '#C0DAFC',
+    'c3-200': '#A7CCFB',
+    'c3-250': '#89BAFB',
+    'c3-300': '#70ACFB',
+    'c3-350': '#569DFB',
+    'c3-400': '#368CFC',
+    'c3-450': '#1C7DFD',
+    'c3-500': '#046DF6',
+    'c3-550': '#0662DB',
+    'c3-600': '#0655BC',
+    'c3-650': '#064AA2',
+    'c3-700': '#063F88',
+    'c3-750': '#06316B',
+    'c3-800': '#052652',
+    'c3-850': '#031935',
+    'c3-900': '#020E1C',
+    'c4-50': '#F8FAFB',
+    'c4-100': '#E8ECF3',
+    'c4-150': '#D4DBE8',
+    'c4-200': '#C3CDDF',
+    'c4-250': '#AFBDD5',
+    'c4-300': '#9DAFCD',
+    'c4-350': '#8DA1C4',
+    'c4-400': '#7790BB',
+    'c4-450': '#6682B2',
+    'c4-500': '#5472A6',
+    'c4-550': '#4C6794',
+    'c4-600': '#425980',
+    'c4-650': '#3A4D6E',
+    'c4-700': '#31415E',
+    'c4-750': '#273449',
+    'c4-800': '#1E2838',
+    'c4-850': '#141A24',
+    'c4-900': '#0B0E14',
+    'c5-50': '#FAFAFA',
+    'c5-100': '#EDECEE',
+    'c5-150': '#DDDCE0',
+    'c5-200': '#D0CED4',
+    'c5-250': '#C0BEC6',
+    'c5-300': '#B3B0BA',
+    'c5-350': '#A5A2AE',
+    'c5-400': '#9692A0',
+    'c5-450': '#898494',
+    'c5-500': '#797486',
+    'c5-550': '#6D6878',
+    'c5-600': '#5E5A68',
+    'c5-650': '#514E5A',
+    'c5-700': '#45424C',
+    'c5-750': '#37353B',
+    'c5-800': '#2A292E',
+    'c5-850': '#1B1A1E',
+    'c5-900': '#0F0E10',
+};
+const colorProperties = defineProperties({
+    conditions: {
+        lightMode: {},
+        darkMode: { '@media': '(prefers-color-scheme: dark)' },
+    },
+    defaultCondition: 'lightMode',
+    properties: {
+        color: colors,
+        background: colors,
+        // etc.
+    },
+});
+export const sprinkles = createSprinkles(responsiveProperties, colorProperties);

package/dist/styles/theme.css.d.ts

@@ -0,0 +1,38 @@
+export declare const vars: {
+    fontFamily: {
+        body: `var(--${string})`;
+        heading: `var(--${string})`;
+    };
+    colors: {
+        textPrimary: `var(--${string})`;
+        textSecondary: `var(--${string})`;
+        textDisabled: `var(--${string})`;
+        buttonTextPrimary: `var(--${string})`;
+        buttonTextSecondary: `var(--${string})`;
+        buttonBackgroundPrimary: `var(--${string})`;
+        buttonBackgroundFocusedPrimary: `var(--${string})`;
+        buttonBackgroundFocusedSecondary: `var(--${string})`;
+        buttonBackgroundSecondary: `var(--${string})`;
+        borderDefault: `var(--${string})`;
+        borderMuted: `var(--${string})`;
+        backgroundDefault: `var(--${string})`;
+        backgroundMuted: `var(--${string})`;
+        alertSuccessBackground: `var(--${string})`;
+        alertSuccessBorder: `var(--${string})`;
+        alertSuccessText: `var(--${string})`;
+        alertWarningBackground: `var(--${string})`;
+        alertWarningBorder: `var(--${string})`;
+        alertWarningText: `var(--${string})`;
+        alertErrorBackground: `var(--${string})`;
+        alertErrorBorder: `var(--${string})`;
+        alertErrorText: `var(--${string})`;
+        alertInfoBackground: `var(--${string})`;
+        alertInfoBorder: `var(--${string})`;
+        alertInfoText: `var(--${string})`;
+        inputBackground: `var(--${string})`;
+        inputBorder: `var(--${string})`;
+        inputBorderFocused: `var(--${string})`;
+        inputPlaceholder: `var(--${string})`;
+        listBorder: `var(--${string})`;
+    };
+};

package/dist/styles/theme.css.js

@@ -0,0 +1,51 @@
+import { createGlobalTheme, globalStyle } from '@vanilla-extract/css';
+import { colors } from './sprinkles.css';
+import { themeLayer } from './layers.css';
+// Import Google Fonts
+globalStyle('@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap");', {});
+// Apply global font styles
+globalStyle('body', {
+    fontFamily: "'Inter', sans-serif",
+});
+globalStyle('h1, h2, h3, h4, h5, h6', {
+    fontFamily: "'Poppins', sans-serif",
+});
+export const vars = createGlobalTheme(':root', {
+    '@layer': themeLayer,
+    colors: {
+        textPrimary: colors['c5-800'],
+        textSecondary: colors['c5-500'],
+        textDisabled: colors['c5-350'],
+        buttonTextPrimary: colors['c1-50'],
+        buttonTextSecondary: colors['c1-900'],
+        buttonBackgroundPrimary: colors['c1-600'],
+        buttonBackgroundFocusedPrimary: colors['c1-500'],
+        buttonBackgroundFocusedSecondary: colors['c1-100'],
+        buttonBackgroundSecondary: colors['c1-200'],
+        borderDefault: colors['c4-200'],
+        borderMuted: colors['c4-100'],
+        backgroundDefault: colors['c4-50'],
+        backgroundMuted: colors['c4-50'],
+        alertSuccessBackground: colors['c2-50'],
+        alertSuccessBorder: colors['c2-500'],
+        alertSuccessText: colors['c2-800'],
+        alertWarningBackground: colors['c3-50'],
+        alertWarningBorder: colors['c3-500'],
+        alertWarningText: colors['c3-800'],
+        alertErrorBackground: colors['c4-50'],
+        alertErrorBorder: colors['c4-500'],
+        alertErrorText: colors['c4-800'],
+        alertInfoBackground: colors['c1-50'],
+        alertInfoBorder: colors['c1-500'],
+        alertInfoText: colors['c1-800'],
+        inputBackground: colors['c4-50'],
+        inputBorder: colors['c4-200'],
+        inputBorderFocused: colors['c1-500'],
+        inputPlaceholder: colors['c5-350'],
+        listBorder: colors['c4-100'],
+    },
+    fontFamily: {
+        body: "'Inter', sans-serif",
+        heading: "'Poppins', sans-serif",
+    },
+});

package/dist/styles/utils.d.ts

@@ -0,0 +1,2 @@
+import { type StyleRule } from '@vanilla-extract/css';
+export declare const styleWithLayer: (rule: StyleRule) => string;

package/dist/styles/utils.js

@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css';
+import { componentsLayer } from './layers.css';
+export const styleWithLayer = (rule) => style({
+    '@layer': {
+        [componentsLayer]: rule,
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jordan-mace/chaser-design-system",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "type": "module",
   "sideEffects": [
     "*.css.js"
@@ -11,22 +11,12 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.mts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
-    "./cssReset.css": {
-      "types": "./dist/styles/reset.css.d.ts",
-      "default": "./src/styles/reset.css.ts"
-    },
-    "./layers.css": {
-      "types": "./dist/styles/layers.css.d.ts",
-      "default": "./src/styles/layers.css.ts"
-    },
-    "./theme.css": {
-      "types": "./dist/styles/theme.css.d.ts",
-      "default": "./src/styles/theme.css.ts"
-    }
+    "./cssReset.css": "./src/styles/reset.css.ts",
+    "./layers.css": "./src/styles/layers.css.ts",
+    "./theme.css": "./src/styles/theme.css.ts"
   },
   "files": [
     "dist",
@@ -47,6 +37,7 @@
     "@types/react": "^19.2.6",
     "@types/react-dom": "^19.2.3",
     "@vanilla-extract/esbuild-plugin": "^2.3.21",
+    "@vanilla-extract/integration": "^8.0.7",
     "@vanilla-extract/vite-plugin": "^5.1.1",
     "@vanilla-extract/webpack-plugin": "^2.3.22",
     "@vitejs/plugin-react": "^5.1.1",
@@ -79,8 +70,8 @@
     "@rsbuild/core": "^1.6.14"
   },
   "scripts": {
-    "build": "tsdown",
-    "dev": "tsdown --watch",
+    "build": "rm -rf dist && tsc --project tsconfig.build.json --noCheck --skipLibCheck || true",
+    "dev": "tsc --project tsconfig.build.json --watch --noCheck --skipLibCheck || true",
     "format": "prettier --write .",
     "lint": "eslint .",
     "test": "vitest --config=vitest.browser.config.ts",