@jordan-mace/chaser-design-system 1.2.7 → 1.2.9

package/dist/styles/layers.css.d.mts

@@ -0,0 +1,6 @@
+//#region src/styles/layers.css.d.ts
+declare const resetLayer: "reset";
+declare const themeLayer: "theme";
+declare const componentsLayer: "components";
+//#endregion
+export { componentsLayer, resetLayer, themeLayer };

package/dist/styles/layers.css.mjs

@@ -0,0 +1,7 @@
+//#region src/styles/layers.css.ts
+const resetLayer = "reset";
+const themeLayer = "theme";
+const componentsLayer = "components";
+
+//#endregion
+export { componentsLayer, resetLayer, themeLayer };

package/dist/styles/reset.css.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/styles/reset.css.mjs

@@ -0,0 +1,24 @@
+import { resetLayer } from "./layers.css.mjs";
+import { globalStyle } from "@vanilla-extract/css";
+
+//#region src/styles/reset.css.ts
+globalStyle("html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video", { "@layer": { [resetLayer]: {
+	margin: 0,
+	padding: 0,
+	border: 0,
+	fontSize: "100%",
+	font: "inherit",
+	verticalAlign: "baseline"
+} } });
+globalStyle("article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section", { "@layer": { [resetLayer]: { display: "block" } } });
+globalStyle("body", { "@layer": { [resetLayer]: { lineHeight: 1 } } });
+globalStyle("ol, ul", { "@layer": { [resetLayer]: { listStyle: "none" } } });
+globalStyle("blockquote, q", { "@layer": { [resetLayer]: { quotes: "none" } } });
+globalStyle("blockquote:before, blockquote:after, q:before, q:after", { "@layer": { [resetLayer]: { content: "none" } } });
+globalStyle("table", { "@layer": { [resetLayer]: {
+	borderCollapse: "collapse",
+	borderSpacing: 0
+} } });
+
+//#endregion
+export {  };

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

@@ -0,0 +1,246 @@
+import * as _vanilla_extract_sprinkles0 from "@vanilla-extract/sprinkles";
+
+//#region src/styles/sprinkles.css.d.ts
+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;
+};
+declare const sprinkles: ((props: {
+  display?: ("flex" | "none" | "block" | "inline" | {
+    mobile?: "flex" | "none" | "block" | "inline" | undefined;
+    tablet?: "flex" | "none" | "block" | "inline" | undefined;
+    desktop?: "flex" | "none" | "block" | "inline" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "flex" | "none" | "block" | "inline" | null>;
+  width?: ("auto" | "100%" | "50%" | "25%" | {
+    mobile?: "auto" | "100%" | "50%" | "25%" | undefined;
+    tablet?: "auto" | "100%" | "50%" | "25%" | undefined;
+    desktop?: "auto" | "100%" | "50%" | "25%" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "auto" | "100%" | "50%" | "25%" | null>;
+  height?: ("auto" | "100%" | "50%" | "25%" | {
+    mobile?: "auto" | "100%" | "50%" | "25%" | undefined;
+    tablet?: "auto" | "100%" | "50%" | "25%" | undefined;
+    desktop?: "auto" | "100%" | "50%" | "25%" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "auto" | "100%" | "50%" | "25%" | null>;
+  flexDirection?: ("column" | "row" | {
+    mobile?: "column" | "row" | undefined;
+    tablet?: "column" | "row" | undefined;
+    desktop?: "column" | "row" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "column" | "row" | null>;
+  justifyContent?: ("space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | {
+    mobile?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | undefined;
+    tablet?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | undefined;
+    desktop?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | null>;
+  alignItems?: ("stretch" | "center" | "flex-end" | "flex-start" | {
+    mobile?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
+    tablet?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
+    desktop?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "stretch" | "center" | "flex-end" | "flex-start" | null>;
+  paddingTop?: ("auto" | "medium" | "none" | "large" | "small" | {
+    mobile?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    tablet?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    desktop?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small" | null>;
+  paddingBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
+    mobile?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    tablet?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    desktop?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small" | null>;
+  paddingLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
+    mobile?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    tablet?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    desktop?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small" | null>;
+  paddingRight?: ("auto" | "medium" | "none" | "large" | "small" | {
+    mobile?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    tablet?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    desktop?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small" | null>;
+  marginLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
+    mobile?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    tablet?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    desktop?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small" | null>;
+  marginRight?: ("auto" | "medium" | "none" | "large" | "small" | {
+    mobile?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    tablet?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    desktop?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small" | null>;
+  marginTop?: ("auto" | "medium" | "none" | "large" | "small" | {
+    mobile?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    tablet?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    desktop?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small" | null>;
+  marginBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
+    mobile?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    tablet?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    desktop?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small" | null>;
+  borderLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
+    mobile?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    tablet?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    desktop?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small" | null>;
+  borderRight?: ("auto" | "medium" | "none" | "large" | "small" | {
+    mobile?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    tablet?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    desktop?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small" | null>;
+  borderTop?: ("auto" | "medium" | "none" | "large" | "small" | {
+    mobile?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    tablet?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    desktop?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small" | null>;
+  borderBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
+    mobile?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    tablet?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    desktop?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small" | null>;
+  borderRadius?: ("auto" | "medium" | "none" | "large" | "small" | {
+    mobile?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    tablet?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    desktop?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small" | null>;
+  gap?: ("auto" | "medium" | "none" | "large" | "small" | {
+    mobile?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    tablet?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    desktop?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small" | null>;
+  padding?: ("auto" | "medium" | "none" | "large" | "small" | {
+    mobile?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    tablet?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    desktop?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small" | null>;
+  border?: ("auto" | "medium" | "none" | "large" | "small" | {
+    mobile?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    tablet?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    desktop?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small" | null>;
+  paddingX?: ("auto" | "medium" | "none" | "large" | "small" | {
+    mobile?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    tablet?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    desktop?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small" | null>;
+  paddingY?: ("auto" | "medium" | "none" | "large" | "small" | {
+    mobile?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    tablet?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    desktop?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small" | null>;
+  marginX?: ("auto" | "medium" | "none" | "large" | "small" | {
+    mobile?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    tablet?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    desktop?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small" | null>;
+  marginY?: ("auto" | "medium" | "none" | "large" | "small" | {
+    mobile?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    tablet?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+    desktop?: "auto" | "medium" | "none" | "large" | "small" | undefined;
+  } | undefined) | _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small" | null>;
+  placeItems?: _vanilla_extract_sprinkles0.ResponsiveArray<2 | 3 | 1, "stretch" | "center" | "flex-end" | "flex-start" | null> | ("stretch" | "center" | "flex-end" | "flex-start" | {
+    mobile?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
+    tablet?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
+    desktop?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
+  } | undefined);
+} & {
+  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" | undefined;
+    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" | undefined;
+  } | undefined;
+  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" | undefined;
+    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" | undefined;
+  } | undefined;
+}) => 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">;
+};
+type Sprinkles = Parameters<typeof sprinkles>[0];
+//#endregion
+export { Sprinkles, colors, sprinkles };

package/dist/styles/sprinkles.css.mjs

@@ -0,0 +1,200 @@
+import { componentsLayer } from "./layers.css.mjs";
+import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles";
+
+//#region src/styles/sprinkles.css.ts
+const space = {
+	none: 0,
+	small: "4px",
+	medium: "8px",
+	large: "16px",
+	auto: "auto"
+};
+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
+	},
+	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"]
+	}
+});
+const colors = {
+	"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
+	}
+});
+const sprinkles = createSprinkles(responsiveProperties, colorProperties);
+
+//#endregion
+export { colors, sprinkles };

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

@@ -0,0 +1,41 @@
+//#region src/styles/theme.css.d.ts
+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})`;
+  };
+};
+//#endregion
+export { vars };

package/dist/styles/theme.css.mjs

@@ -0,0 +1,50 @@
+import { themeLayer } from "./layers.css.mjs";
+import { colors } from "./sprinkles.css.mjs";
+import { createGlobalTheme, globalStyle } from "@vanilla-extract/css";
+
+//#region src/styles/theme.css.ts
+globalStyle("@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap\");", {});
+globalStyle("body", { fontFamily: "'Inter', sans-serif" });
+globalStyle("h1, h2, h3, h4, h5, h6", { fontFamily: "'Poppins', sans-serif" });
+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"
+	}
+});
+
+//#endregion
+export { vars };