@edwardguerra/design-system 1.0.0

package/tokens/brands/materialandhome.json

@@ -0,0 +1,9 @@
+{
+  "materialandhome": {
+    "brand": {
+      "primary": { "value": "#B25D3E", "type": "color" },
+      "secondary": { "value": "#8c4530", "type": "color" },
+      "tint": { "value": "#f5e8e2", "type": "color" }
+    }
+  }
+}

package/tokens/brands/midwest-husbands.json

@@ -0,0 +1,9 @@
+{
+  "midwest-husbands": {
+    "brand": {
+      "primary": { "value": "{color.teal.700}", "type": "color" },
+      "secondary": { "value": "{color.teal.900}", "type": "color" },
+      "tint": { "value": "{color.teal.50}", "type": "color" }
+    }
+  }
+}

package/tokens/config.json

@@ -0,0 +1,45 @@
+{
+  "source": ["tokens/**/*.json"],
+  "platforms": {
+    "css": {
+      "transformGroup": "css",
+      "buildPath": "dist/tokens/",
+      "files": [
+        {
+          "destination": "variables.css",
+          "format": "css/variables"
+        }
+      ]
+    },
+    "scss": {
+      "transformGroup": "scss",
+      "buildPath": "dist/tokens/",
+      "files": [
+        {
+          "destination": "_variables.scss",
+          "format": "scss/variables"
+        }
+      ]
+    },
+    "js": {
+      "transformGroup": "js",
+      "buildPath": "dist/tokens/",
+      "files": [
+        {
+          "destination": "tokens.js",
+          "format": "javascript/es6"
+        }
+      ]
+    },
+    "json": {
+      "transformGroup": "js",
+      "buildPath": "dist/tokens/",
+      "files": [
+        {
+          "destination": "tokens.json",
+          "format": "json/flat"
+        }
+      ]
+    }
+  }
+}

package/tokens/core/breakpoints.json

@@ -0,0 +1,9 @@
+{
+  "breakpoint": {
+    "xs": { "value": "20em", "type": "sizing", "comment": "320px" },
+    "md": { "value": "46.5em", "type": "sizing", "comment": "744px" },
+    "lg": { "value": "64em", "type": "sizing", "comment": "1024px" },
+    "xl": { "value": "100em", "type": "sizing", "comment": "1600px" },
+    "2xl": { "value": "120em", "type": "sizing", "comment": "1920px" }
+  }
+}

package/tokens/core/colors.json

@@ -0,0 +1,217 @@
+{
+  "color": {
+    "neutral": {
+      "0": { "value": "#ffffff", "type": "color" },
+      "50": { "value": "#f6f6f6", "type": "color" },
+      "100": { "value": "#e7e7e7", "type": "color" },
+      "200": { "value": "#d1d1d1", "type": "color" },
+      "300": { "value": "#b0b0b0", "type": "color" },
+      "400": { "value": "#888888", "type": "color" },
+      "500": { "value": "#6d6d6d", "type": "color" },
+      "600": { "value": "#5d5d5d", "type": "color" },
+      "700": { "value": "#4f4f4f", "type": "color" },
+      "800": { "value": "#454545", "type": "color" },
+      "900": { "value": "#3d3d3d", "type": "color" },
+      "950": { "value": "#1a1a1a", "type": "color" },
+      "1000": { "value": "#000000", "type": "color" }
+    },
+    "blue": {
+      "50": { "value": "#f0f9ff", "type": "color" },
+      "100": { "value": "#e0f2fe", "type": "color" },
+      "200": { "value": "#bbe6fc", "type": "color" },
+      "300": { "value": "#7fd1fa", "type": "color" },
+      "400": { "value": "#3abbf6", "type": "color" },
+      "500": { "value": "#11a3e6", "type": "color" },
+      "600": { "value": "#0482c5", "type": "color" },
+      "700": { "value": "#05679f", "type": "color" },
+      "800": { "value": "#095883", "type": "color" },
+      "900": { "value": "#0d4a6d", "type": "color" },
+      "950": { "value": "#0b3a5a", "type": "color" }
+    },
+    "brown": {
+      "50": { "value": "#f5f4f1", "type": "color" },
+      "100": { "value": "#e5e3dc", "type": "color" },
+      "200": { "value": "#cdcabb", "type": "color" },
+      "300": { "value": "#b1aa93", "type": "color" },
+      "400": { "value": "#9a9175", "type": "color" },
+      "500": { "value": "#8b8067", "type": "color" },
+      "600": { "value": "#776b57", "type": "color" },
+      "700": { "value": "#605548", "type": "color" },
+      "800": { "value": "#534940", "type": "color" },
+      "900": { "value": "#39322d", "type": "color" },
+      "950": { "value": "#29221f", "type": "color" }
+    },
+    "teal": {
+      "50": { "value": "#f4f9f8", "type": "color" },
+      "100": { "value": "#daedea", "type": "color" },
+      "200": { "value": "#b4dbd5", "type": "color" },
+      "300": { "value": "#87c1bb", "type": "color" },
+      "400": { "value": "#5ea39e", "type": "color" },
+      "500": { "value": "#448884", "type": "color" },
+      "600": { "value": "#336967", "type": "color" },
+      "700": { "value": "#2d5856", "type": "color" },
+      "800": { "value": "#284747", "type": "color" },
+      "900": { "value": "#243d3c", "type": "color" },
+      "950": { "value": "#112122", "type": "color" }
+    },
+    "green": {
+      "50": { "value": "#f9f8ec", "type": "color" },
+      "100": { "value": "#f1efd6", "type": "color" },
+      "200": { "value": "#e4e1b2", "type": "color" },
+      "300": { "value": "#d1cf85", "type": "color" },
+      "400": { "value": "#bdbc5e", "type": "color" },
+      "500": { "value": "#a1a240", "type": "color" },
+      "600": { "value": "#909236", "type": "color" },
+      "700": { "value": "#616328", "type": "color" },
+      "800": { "value": "#4e5024", "type": "color" },
+      "900": { "value": "#434522", "type": "color" },
+      "950": { "value": "#23250e", "type": "color" }
+    },
+    "red": {
+      "50": { "value": "#fcf4f4", "type": "color" },
+      "100": { "value": "#fae6e6", "type": "color" },
+      "200": { "value": "#f6d2d2", "type": "color" },
+      "300": { "value": "#efb2b2", "type": "color" },
+      "400": { "value": "#e38686", "type": "color" },
+      "500": { "value": "#d55e5e", "type": "color" },
+      "600": { "value": "#c04242", "type": "color" },
+      "700": { "value": "#973131", "type": "color" },
+      "800": { "value": "#862e2e", "type": "color" },
+      "900": { "value": "#702c2c", "type": "color" },
+      "950": { "value": "#3c1313", "type": "color" }
+    },
+    "yellow": {
+      "50": { "value": "#fffeea", "type": "color" },
+      "100": { "value": "#fffac5", "type": "color" },
+      "200": { "value": "#fff585", "type": "color" },
+      "300": { "value": "#ffe946", "type": "color" },
+      "400": { "value": "#ffd91b", "type": "color" },
+      "500": { "value": "#ffba05", "type": "color" },
+      "600": { "value": "#e28e00", "type": "color" },
+      "700": { "value": "#bb6402", "type": "color" },
+      "800": { "value": "#984d08", "type": "color" },
+      "900": { "value": "#7c3f0b", "type": "color" },
+      "950": { "value": "#482000", "type": "color" }
+    },
+    "burnt": {
+      "50": { "value": "#fdf5ef", "type": "color" },
+      "100": { "value": "#fae8da", "type": "color" },
+      "200": { "value": "#f4ceb4", "type": "color" },
+      "300": { "value": "#ecad85", "type": "color" },
+      "400": { "value": "#e38254", "type": "color" },
+      "500": { "value": "#dd6434", "type": "color" },
+      "600": { "value": "#ce4c28", "type": "color" },
+      "700": { "value": "#ab3923", "type": "color" },
+      "800": { "value": "#892f23", "type": "color" },
+      "900": { "value": "#6f291f", "type": "color" },
+      "950": { "value": "#3c120e", "type": "color" }
+    },
+    "berry": {
+      "50": { "value": "#fbf4f8", "type": "color" },
+      "100": { "value": "#f7ecf2", "type": "color" },
+      "200": { "value": "#f1d9e8", "type": "color" },
+      "300": { "value": "#e7bad3", "type": "color" },
+      "400": { "value": "#d88eb7", "type": "color" },
+      "500": { "value": "#c86c9b", "type": "color" },
+      "600": { "value": "#b44e7e", "type": "color" },
+      "700": { "value": "#9a3c65", "type": "color" },
+      "800": { "value": "#803455", "type": "color" },
+      "900": { "value": "#6c2f4a", "type": "color" },
+      "950": { "value": "#0e070a", "type": "color" }
+    },
+    "purple": {
+      "50": { "value": "#faf5ff", "type": "color" },
+      "100": { "value": "#f3e8ff", "type": "color" },
+      "200": { "value": "#e9d5ff", "type": "color" },
+      "300": { "value": "#d8b4fe", "type": "color" },
+      "400": { "value": "#c084fc", "type": "color" },
+      "500": { "value": "#a855f7", "type": "color" },
+      "600": { "value": "#9333ea", "type": "color" },
+      "700": { "value": "#7e22ce", "type": "color" },
+      "800": { "value": "#6b21a8", "type": "color" },
+      "900": { "value": "#581c87", "type": "color" },
+      "950": { "value": "#3b0764", "type": "color" }
+    },
+    "orange": {
+      "50": { "value": "#fff7ed", "type": "color" },
+      "100": { "value": "#ffedd5", "type": "color" },
+      "200": { "value": "#fed7aa", "type": "color" },
+      "300": { "value": "#fdba74", "type": "color" },
+      "400": { "value": "#fb923c", "type": "color" },
+      "500": { "value": "#f97316", "type": "color" },
+      "600": { "value": "#ea580c", "type": "color" },
+      "700": { "value": "#c2410c", "type": "color" },
+      "800": { "value": "#9a3412", "type": "color" },
+      "900": { "value": "#7c2d12", "type": "color" },
+      "950": { "value": "#431407", "type": "color" }
+    },
+    "cyan": {
+      "50": { "value": "#ecfeff", "type": "color" },
+      "100": { "value": "#cffafe", "type": "color" },
+      "200": { "value": "#a5f3fc", "type": "color" },
+      "300": { "value": "#67e8f9", "type": "color" },
+      "400": { "value": "#22d3ee", "type": "color" },
+      "500": { "value": "#06b6d4", "type": "color" },
+      "600": { "value": "#0891b2", "type": "color" },
+      "700": { "value": "#0e7490", "type": "color" },
+      "800": { "value": "#155e75", "type": "color" },
+      "900": { "value": "#164e63", "type": "color" },
+      "950": { "value": "#083344", "type": "color" }
+    },
+    "lime": {
+      "50": { "value": "#f7fee7", "type": "color" },
+      "100": { "value": "#ecfccb", "type": "color" },
+      "200": { "value": "#d9f99d", "type": "color" },
+      "300": { "value": "#bef264", "type": "color" },
+      "400": { "value": "#a3e635", "type": "color" },
+      "500": { "value": "#84cc16", "type": "color" },
+      "600": { "value": "#65a30d", "type": "color" },
+      "700": { "value": "#4d7c0f", "type": "color" },
+      "800": { "value": "#3f6212", "type": "color" },
+      "900": { "value": "#365314", "type": "color" },
+      "950": { "value": "#1a2e05", "type": "color" }
+    },
+    "pink": {
+      "50": { "value": "#fdf2f8", "type": "color" },
+      "100": { "value": "#fce7f3", "type": "color" },
+      "200": { "value": "#fbcfe8", "type": "color" },
+      "300": { "value": "#f9a8d4", "type": "color" },
+      "400": { "value": "#f472b6", "type": "color" },
+      "500": { "value": "#ec4899", "type": "color" },
+      "600": { "value": "#db2777", "type": "color" },
+      "700": { "value": "#be185d", "type": "color" },
+      "800": { "value": "#9d174d", "type": "color" },
+      "900": { "value": "#831843", "type": "color" },
+      "950": { "value": "#500724", "type": "color" }
+    },
+    "indigo": {
+      "50": { "value": "#eef2ff", "type": "color" },
+      "100": { "value": "#e0e7ff", "type": "color" },
+      "200": { "value": "#c7d2fe", "type": "color" },
+      "300": { "value": "#a5b4fc", "type": "color" },
+      "400": { "value": "#818cf8", "type": "color" },
+      "500": { "value": "#6366f1", "type": "color" },
+      "600": { "value": "#4f46e5", "type": "color" },
+      "700": { "value": "#4338ca", "type": "color" },
+      "800": { "value": "#3730a3", "type": "color" },
+      "900": { "value": "#312e81", "type": "color" },
+      "950": { "value": "#1e1b4b", "type": "color" }
+    },
+    "white": {
+      "5": { "value": "rgba(255, 255, 255, 0.05)", "type": "color" },
+      "10": { "value": "rgba(255, 255, 255, 0.1)", "type": "color" },
+      "20": { "value": "rgba(255, 255, 255, 0.2)", "type": "color" },
+      "40": { "value": "rgba(255, 255, 255, 0.4)", "type": "color" },
+      "60": { "value": "rgba(255, 255, 255, 0.6)", "type": "color" },
+      "80": { "value": "rgba(255, 255, 255, 0.8)", "type": "color" }
+    },
+    "black": {
+      "5": { "value": "rgba(0, 0, 0, 0.05)", "type": "color" },
+      "10": { "value": "rgba(0, 0, 0, 0.1)", "type": "color" },
+      "20": { "value": "rgba(0, 0, 0, 0.2)", "type": "color" },
+      "40": { "value": "rgba(0, 0, 0, 0.4)", "type": "color" },
+      "60": { "value": "rgba(0, 0, 0, 0.6)", "type": "color" },
+      "80": { "value": "rgba(0, 0, 0, 0.8)", "type": "color" }
+    }
+  }
+}

package/tokens/core/effects.json

@@ -0,0 +1,37 @@
+{
+  "shadow": {
+    "sm": {
+      "value": "0 2rem 2rem rgba(0, 0, 0, 0.1)",
+      "type": "boxShadow",
+      "comment": "Live site --shadow-light"
+    },
+    "md": {
+      "value": "0 1.5rem 3rem -1.25rem rgba(0, 0, 0, 0.1)",
+      "type": "boxShadow",
+      "comment": "Live site --shadow-medium"
+    },
+    "lg": {
+      "value": "0 3.125rem 6.25rem -1.25rem rgba(0, 0, 0, 0.25)",
+      "type": "boxShadow",
+      "comment": "Live site --shadow-dark"
+    },
+    "inner": {
+      "value": "inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)",
+      "type": "boxShadow"
+    }
+  },
+  "radius": {
+    "none": { "value": "0", "type": "borderRadius" },
+    "sm": { "value": "0.5rem", "type": "borderRadius", "comment": "Live site --radius-sm (--size-50)" },
+    "md": { "value": "1rem", "type": "borderRadius", "comment": "Live site --radius-md (--size-100)" },
+    "lg": { "value": "2rem", "type": "borderRadius", "comment": "Live site --radius-lg (--size-200)" },
+    "full": { "value": "9999px", "type": "borderRadius" }
+  },
+  "borderWidth": {
+    "0": { "value": "0", "type": "borderWidth" },
+    "1": { "value": "1px", "type": "borderWidth" },
+    "2": { "value": "2px", "type": "borderWidth" },
+    "4": { "value": "4px", "type": "borderWidth" },
+    "8": { "value": "8px", "type": "borderWidth" }
+  }
+}

package/tokens/core/spacing.json

@@ -0,0 +1,24 @@
+{
+  "spacing": {
+    "0": { "value": "0", "type": "spacing" },
+    "1": { "value": "0.25rem", "type": "spacing", "comment": "4px" },
+    "2": { "value": "0.5rem", "type": "spacing", "comment": "8px" },
+    "3": { "value": "0.75rem", "type": "spacing", "comment": "12px" },
+    "4": { "value": "1rem", "type": "spacing", "comment": "16px" },
+    "5": { "value": "1.25rem", "type": "spacing", "comment": "20px" },
+    "6": { "value": "1.5rem", "type": "spacing", "comment": "24px" },
+    "8": { "value": "2rem", "type": "spacing", "comment": "32px" },
+    "10": { "value": "2.5rem", "type": "spacing", "comment": "40px" },
+    "12": { "value": "3rem", "type": "spacing", "comment": "48px" },
+    "16": { "value": "4rem", "type": "spacing", "comment": "64px" },
+    "20": { "value": "5rem", "type": "spacing", "comment": "80px" },
+    "24": { "value": "6rem", "type": "spacing", "comment": "96px" },
+    "32": { "value": "8rem", "type": "spacing", "comment": "128px" },
+    "40": { "value": "10rem", "type": "spacing", "comment": "160px" },
+    "48": { "value": "12rem", "type": "spacing", "comment": "192px" },
+    "56": { "value": "14rem", "type": "spacing", "comment": "224px" },
+    "64": { "value": "16rem", "type": "spacing", "comment": "256px" },
+    "96": { "value": "24rem", "type": "spacing", "comment": "384px" },
+    "120": { "value": "30rem", "type": "spacing", "comment": "480px" }
+  }
+}

package/tokens/core/typography.json

@@ -0,0 +1,45 @@
+{
+  "font": {
+    "family": {
+      "sans": {
+        "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+        "type": "fontFamily"
+      },
+      "serif": {
+        "value": "Georgia, Cambria, 'Times New Roman', Times, serif",
+        "type": "fontFamily"
+      },
+      "mono": {
+        "value": "Menlo, Monaco, Consolas, 'Courier New', monospace",
+        "type": "fontFamily"
+      }
+    },
+    "size": {
+      "2xs": { "value": "0.5rem", "type": "fontSize", "comment": "8px — live --eg-font-size-25" },
+      "xs": { "value": "0.75rem", "type": "fontSize", "comment": "12px — live --eg-font-size-50" },
+      "sm": { "value": "0.875rem", "type": "fontSize", "comment": "14px — live --eg-font-size-75" },
+      "base": { "value": "1rem", "type": "fontSize", "comment": "16px — live --eg-font-size-100" },
+      "lg": { "value": "1.125rem", "type": "fontSize", "comment": "18px — live --eg-font-size-200" },
+      "xl": { "value": "1.25rem", "type": "fontSize", "comment": "20px — live --eg-font-size-300" },
+      "2xl": { "value": "1.5rem", "type": "fontSize", "comment": "24px — live --eg-font-size-400" },
+      "3xl": { "value": "2rem", "type": "fontSize", "comment": "32px — live --eg-font-size-500" },
+      "4xl": { "value": "2.5rem", "type": "fontSize", "comment": "40px — live --eg-font-size-600" },
+      "5xl": { "value": "3rem", "type": "fontSize", "comment": "48px — live --eg-font-size-700" },
+      "responsive": { "value": "8rem", "type": "fontSize", "comment": "Live --eg-font-responsive" }
+    },
+    "weight": {
+      "light": { "value": "300", "type": "fontWeight" },
+      "normal": { "value": "400", "type": "fontWeight" },
+      "medium": { "value": "500", "type": "fontWeight" },
+      "semibold": { "value": "600", "type": "fontWeight" },
+      "bold": { "value": "700", "type": "fontWeight" },
+      "extrabold": { "value": "800", "type": "fontWeight" }
+    },
+    "lineHeight": {
+      "tight": { "value": "1.25", "type": "lineHeight" },
+      "normal": { "value": "1.5", "type": "lineHeight" },
+      "relaxed": { "value": "1.75", "type": "lineHeight" },
+      "loose": { "value": "2", "type": "lineHeight" }
+    }
+  }
+}

package/tokens/semantic/button.json

@@ -0,0 +1,37 @@
+{
+  "button": {
+    "primary": {
+      "background": { "value": "{color.blue.600}", "type": "color" },
+      "backgroundHover": { "value": "{color.blue.700}", "type": "color" },
+      "backgroundActive": { "value": "{color.blue.800}", "type": "color" },
+      "text": { "value": "{color.neutral.0}", "type": "color" },
+      "borderRadius": { "value": "{radius.md}", "type": "borderRadius" },
+      "paddingX": { "value": "{spacing.6}", "type": "spacing" },
+      "paddingY": { "value": "{spacing.3}", "type": "spacing" },
+      "fontSize": { "value": "{font.size.base}", "type": "fontSize" },
+      "fontWeight": { "value": "{font.weight.medium}", "type": "fontWeight" }
+    },
+    "secondary": {
+      "background": { "value": "{color.neutral.100}", "type": "color" },
+      "backgroundHover": { "value": "{color.neutral.200}", "type": "color" },
+      "backgroundActive": { "value": "{color.neutral.300}", "type": "color" },
+      "text": { "value": "{color.neutral.900}", "type": "color" },
+      "borderRadius": { "value": "{radius.md}", "type": "borderRadius" },
+      "paddingX": { "value": "{spacing.6}", "type": "spacing" },
+      "paddingY": { "value": "{spacing.3}", "type": "spacing" },
+      "fontSize": { "value": "{font.size.base}", "type": "fontSize" },
+      "fontWeight": { "value": "{font.weight.medium}", "type": "fontWeight" }
+    },
+    "danger": {
+      "background": { "value": "{color.red.600}", "type": "color" },
+      "backgroundHover": { "value": "{color.red.700}", "type": "color" },
+      "backgroundActive": { "value": "{color.red.800}", "type": "color" },
+      "text": { "value": "{color.neutral.0}", "type": "color" },
+      "borderRadius": { "value": "{radius.md}", "type": "borderRadius" },
+      "paddingX": { "value": "{spacing.6}", "type": "spacing" },
+      "paddingY": { "value": "{spacing.3}", "type": "spacing" },
+      "fontSize": { "value": "{font.size.base}", "type": "fontSize" },
+      "fontWeight": { "value": "{font.weight.medium}", "type": "fontWeight" }
+    }
+  }
+}

package/tokens/semantic/theme.json

@@ -0,0 +1,26 @@
+{
+  "theme": {
+    "background": {
+      "primary": { "value": "{color.neutral.0}", "type": "color" },
+      "secondary": { "value": "{color.neutral.50}", "type": "color" },
+      "tertiary": { "value": "{color.neutral.100}", "type": "color" }
+    },
+    "text": {
+      "primary": { "value": "{color.neutral.900}", "type": "color" },
+      "secondary": { "value": "{color.neutral.700}", "type": "color" },
+      "tertiary": { "value": "{color.neutral.500}", "type": "color" },
+      "inverse": { "value": "{color.neutral.0}", "type": "color" }
+    },
+    "border": {
+      "default": { "value": "{color.neutral.200}", "type": "color" },
+      "strong": { "value": "{color.neutral.400}", "type": "color" },
+      "subtle": { "value": "{color.neutral.100}", "type": "color" }
+    },
+    "status": {
+      "success": { "value": "{color.green.600}", "type": "color" },
+      "warning": { "value": "{color.yellow.600}", "type": "color" },
+      "error": { "value": "{color.red.600}", "type": "color" },
+      "info": { "value": "{color.blue.600}", "type": "color" }
+    }
+  }
+}