Add sprinkles

moroshko · Sep 20, 2021 · 843ea3a · 843ea3a
1 parent 0df4815
commit 843ea3a
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git a/styles/sprinkles.css.ts b/styles/sprinkles.css.ts
@@ -2,8 +2,24 @@ import { defineProperties, createSprinkles } from "@vanilla-extract/sprinkles";
 import { theme } from "./theme.css";
 
 const properties = defineProperties({
+  conditions: {
+    default: {},
+    tablet: { "@media": "screen and (min-width: 768px)" },
+    desktop: { "@media": "screen and (min-width: 1024px)" },
+    hover: { selector: "&:hover" },
+    focus: { selector: "&:focus" },
+  },
+  defaultCondition: "default",
   properties: {
     backgroundColor: theme.color,
+    paddingTop: theme.space,
+    paddingRight: theme.space,
+    paddingBottom: theme.space,
+    paddingLeft: theme.space,
+    marginTop: theme.space,
+    marginRight: theme.space,
+    marginBottom: theme.space,
+    marginLeft: theme.space,
   },
 });
 

diff --git a/styles/theme.css.ts b/styles/theme.css.ts
@@ -4,4 +4,17 @@ export const theme = createGlobalTheme(":root", {
   color: {
     primary: "cyan",
   },
+  space: {
+    x0: "0",
+    x1: "0.25rem",
+    x2: "0.5rem",
+    x3: "0.75rem",
+    x4: "1rem",
+    x5: "1.25rem",
+    x6: "1.5rem",
+    x7: "1.75rem",
+    x8: "2rem",
+    x9: "2.25rem",
+    x10: "2.5rem",
+  },
 });