@helical-design/substrate 0.1.0

package/tokens/breakpoints.json

@@ -0,0 +1,38 @@
+{
+  "bp": {
+    "sm": {
+      "$value": "480px",
+      "$type": "dimension"
+    },
+    "md": {
+      "$value": "768px",
+      "$type": "dimension"
+    },
+    "lg": {
+      "$value": "1024px",
+      "$type": "dimension"
+    },
+    "xl": {
+      "$value": "1280px",
+      "$type": "dimension"
+    }
+  },
+  "container": {
+    "sm": {
+      "$value": "480px",
+      "$type": "dimension"
+    },
+    "md": {
+      "$value": "720px",
+      "$type": "dimension"
+    },
+    "lg": {
+      "$value": "960px",
+      "$type": "dimension"
+    },
+    "xl": {
+      "$value": "1200px",
+      "$type": "dimension"
+    }
+  }
+}

package/tokens/palette.dark.json

@@ -0,0 +1,96 @@
+{
+  "palette": {
+    "bg": {
+      "$value": "#17161b",
+      "$type": "color"
+    },
+    "neutral": {
+      "1": {
+        "$value": "#232129",
+        "$type": "color"
+      },
+      "2": {
+        "$value": "#312e3a",
+        "$type": "color"
+      },
+      "3": {
+        "$value": "#474455",
+        "$type": "color"
+      },
+      "4": {
+        "$value": "#656078",
+        "$type": "color"
+      },
+      "5": {
+        "$value": "#827b9b",
+        "$type": "color"
+      },
+      "6": {
+        "$value": "#a49eb9",
+        "$type": "color"
+      },
+      "7": {
+        "$value": "#ccc8d8",
+        "$type": "color"
+      },
+      "8": {
+        "$value": "#f2f1f5",
+        "$type": "color"
+      }
+    },
+    "accent": {
+      "1": {
+        "$value": "#0e373c",
+        "$type": "color"
+      },
+      "2": {
+        "$value": "#185d64",
+        "$type": "color"
+      },
+      "3": {
+        "$value": "#1d727b",
+        "$type": "color"
+      },
+      "4": {
+        "$value": "#238c96",
+        "$type": "color"
+      },
+      "5": {
+        "$value": "#2db1bf",
+        "$type": "color"
+      },
+      "6": {
+        "$value": "#34cede",
+        "$type": "color"
+      }
+    },
+    "success": {
+      "1": {
+        "$value": "#217053",
+        "$type": "color"
+      },
+      "2": {
+        "$value": "#2a8f6b",
+        "$type": "color"
+      },
+      "3": {
+        "$value": "#35b588",
+        "$type": "color"
+      }
+    },
+    "danger": {
+      "1": {
+        "$value": "#aa3e4c",
+        "$type": "color"
+      },
+      "2": {
+        "$value": "#d94f62",
+        "$type": "color"
+      },
+      "3": {
+        "$value": "#ff7588",
+        "$type": "color"
+      }
+    }
+  }
+}

package/tokens/palette.light.json

@@ -0,0 +1,96 @@
+{
+  "palette": {
+    "bg": {
+      "$value": "#f5f5f8",
+      "$type": "color"
+    },
+    "neutral": {
+      "1": {
+        "$value": "#e9e8ee",
+        "$type": "color"
+      },
+      "2": {
+        "$value": "#d5d3df",
+        "$type": "color"
+      },
+      "3": {
+        "$value": "#b6b2c7",
+        "$type": "color"
+      },
+      "4": {
+        "$value": "#918aab",
+        "$type": "color"
+      },
+      "5": {
+        "$value": "#736d89",
+        "$type": "color"
+      },
+      "6": {
+        "$value": "#555165",
+        "$type": "color"
+      },
+      "7": {
+        "$value": "#373542",
+        "$type": "color"
+      },
+      "8": {
+        "$value": "#1b1920",
+        "$type": "color"
+      }
+    },
+    "accent": {
+      "1": {
+        "$value": "#6fe2ed",
+        "$type": "color"
+      },
+      "2": {
+        "$value": "#2cb0bd",
+        "$type": "color"
+      },
+      "3": {
+        "$value": "#2697a2",
+        "$type": "color"
+      },
+      "4": {
+        "$value": "#1f7c85",
+        "$type": "color"
+      },
+      "5": {
+        "$value": "#175c63",
+        "$type": "color"
+      },
+      "6": {
+        "$value": "#12474c",
+        "$type": "color"
+      }
+    },
+    "success": {
+      "1": {
+        "$value": "#2fa078",
+        "$type": "color"
+      },
+      "2": {
+        "$value": "#257f5f",
+        "$type": "color"
+      },
+      "3": {
+        "$value": "#1c5e47",
+        "$type": "color"
+      }
+    },
+    "danger": {
+      "1": {
+        "$value": "#f3586d",
+        "$type": "color"
+      },
+      "2": {
+        "$value": "#c14657",
+        "$type": "color"
+      },
+      "3": {
+        "$value": "#903441",
+        "$type": "color"
+      }
+    }
+  }
+}

package/tokens/scale.compact.json

@@ -0,0 +1,68 @@
+{
+  "space": {
+    "1": {
+      "$value": "0.25rem",
+      "$type": "dimension"
+    },
+    "2": {
+      "$value": "0.5rem",
+      "$type": "dimension"
+    },
+    "3": {
+      "$value": "0.75rem",
+      "$type": "dimension"
+    },
+    "4": {
+      "$value": "1rem",
+      "$type": "dimension"
+    },
+    "5": {
+      "$value": "1.25rem",
+      "$type": "dimension"
+    },
+    "6": {
+      "$value": "1.5rem",
+      "$type": "dimension"
+    },
+    "7": {
+      "$value": "2rem",
+      "$type": "dimension"
+    },
+    "8": {
+      "$value": "clamp(3rem, calc(2.4rem + 2vw), 4rem)",
+      "$type": "dimension"
+    }
+  },
+  "size": {
+    "caption": {
+      "$value": "0.75rem",
+      "$type": "dimension"
+    },
+    "small": {
+      "$value": "0.8125rem",
+      "$type": "dimension"
+    },
+    "body": {
+      "$value": "0.875rem",
+      "$type": "dimension"
+    },
+    "h3": {
+      "$value": "clamp(1.0625rem, calc(0.9125rem + 0.5vw), 1.3125rem)",
+      "$type": "dimension"
+    },
+    "h2": {
+      "$value": "clamp(1.5625rem, calc(1.3rem + 0.875vw), 2rem)",
+      "$type": "dimension"
+    },
+    "h1": {
+      "$value": "clamp(2.3125rem, calc(1.9375rem + 1.25vw), 2.9375rem)",
+      "$type": "dimension"
+    }
+  },
+  "leading": {
+    "body": {
+      "$value": "1.5",
+      "$type": "number"
+    }
+  }
+}

package/tokens/scale.json

@@ -0,0 +1,114 @@
+{
+  "space": {
+    "1": {
+      "$value": "0.25rem",
+      "$type": "dimension"
+    },
+    "2": {
+      "$value": "0.5rem",
+      "$type": "dimension"
+    },
+    "3": {
+      "$value": "0.75rem",
+      "$type": "dimension"
+    },
+    "4": {
+      "$value": "1rem",
+      "$type": "dimension"
+    },
+    "5": {
+      "$value": "clamp(1.25rem, calc(1.1rem + 0.5vw), 1.5rem)",
+      "$type": "dimension"
+    },
+    "6": {
+      "$value": "clamp(1.5rem, calc(1.2rem + 1vw), 2rem)",
+      "$type": "dimension"
+    },
+    "7": {
+      "$value": "clamp(2rem, calc(1.4rem + 2vw), 3rem)",
+      "$type": "dimension"
+    },
+    "8": {
+      "$value": "clamp(3rem, calc(2.4rem + 2vw), 4rem)",
+      "$type": "dimension"
+    }
+  },
+  "size": {
+    "caption": {
+      "$value": "0.75rem",
+      "$type": "dimension"
+    },
+    "small": {
+      "$value": "0.8125rem",
+      "$type": "dimension"
+    },
+    "body": {
+      "$value": "1rem",
+      "$type": "dimension"
+    },
+    "h3": {
+      "$value": "clamp(1.25rem, calc(1.1rem + 0.5vw), 1.5rem)",
+      "$type": "dimension"
+    },
+    "h2": {
+      "$value": "clamp(1.8125rem, calc(1.55rem + 0.875vw), 2.25rem)",
+      "$type": "dimension"
+    },
+    "h1": {
+      "$value": "clamp(2.75rem, calc(2.375rem + 1.25vw), 3.375rem)",
+      "$type": "dimension"
+    }
+  },
+  "radius": {
+    "none": {
+      "$value": "0px",
+      "$type": "dimension"
+    },
+    "sm": {
+      "$value": "4px",
+      "$type": "dimension"
+    },
+    "md": {
+      "$value": "8px",
+      "$type": "dimension"
+    },
+    "lg": {
+      "$value": "16px",
+      "$type": "dimension"
+    },
+    "pill": {
+      "$value": "999px",
+      "$type": "dimension"
+    }
+  },
+  "leading": {
+    "body": {
+      "$value": "1.6",
+      "$type": "number"
+    },
+    "tight": {
+      "$value": "1.2",
+      "$type": "number"
+    }
+  },
+  "tracking": {
+    "h1": {
+      "$value": "-0.01em",
+      "$type": "dimension"
+    },
+    "h2": {
+      "$value": "-0.01em",
+      "$type": "dimension"
+    },
+    "h3": {
+      "$value": "-0.01em",
+      "$type": "dimension"
+    }
+  },
+  "target": {
+    "min": {
+      "$value": "24px",
+      "$type": "dimension"
+    }
+  }
+}

package/tokens/scale.spacious.json

@@ -0,0 +1,68 @@
+{
+  "space": {
+    "1": {
+      "$value": "0.25rem",
+      "$type": "dimension"
+    },
+    "2": {
+      "$value": "0.5rem",
+      "$type": "dimension"
+    },
+    "3": {
+      "$value": "0.75rem",
+      "$type": "dimension"
+    },
+    "4": {
+      "$value": "1rem",
+      "$type": "dimension"
+    },
+    "5": {
+      "$value": "clamp(1.25rem, calc(1.1rem + 0.5vw), 1.5rem)",
+      "$type": "dimension"
+    },
+    "6": {
+      "$value": "clamp(1.5rem, calc(1.2rem + 1vw), 2rem)",
+      "$type": "dimension"
+    },
+    "7": {
+      "$value": "3rem",
+      "$type": "dimension"
+    },
+    "8": {
+      "$value": "clamp(4rem, calc(3.4rem + 2vw), 5rem)",
+      "$type": "dimension"
+    }
+  },
+  "size": {
+    "caption": {
+      "$value": "0.75rem",
+      "$type": "dimension"
+    },
+    "small": {
+      "$value": "0.8125rem",
+      "$type": "dimension"
+    },
+    "body": {
+      "$value": "clamp(1rem, calc(0.925rem + 0.25vw), 1.125rem)",
+      "$type": "dimension"
+    },
+    "h3": {
+      "$value": "clamp(1.4375rem, calc(1.2875rem + 0.5vw), 1.6875rem)",
+      "$type": "dimension"
+    },
+    "h2": {
+      "$value": "clamp(2.125rem, calc(1.8625rem + 0.875vw), 2.5625rem)",
+      "$type": "dimension"
+    },
+    "h1": {
+      "$value": "clamp(3.1875rem, calc(2.8125rem + 1.25vw), 3.8125rem)",
+      "$type": "dimension"
+    }
+  },
+  "leading": {
+    "body": {
+      "$value": "1.7",
+      "$type": "number"
+    }
+  }
+}

package/tokens/semantic.json

@@ -0,0 +1,14 @@
+{
+  "color": {
+    "bg":             { "$value": "{palette.bg}", "$type": "color" },
+    "surface":        { "$value": "{palette.neutral.1}", "$type": "color" },
+    "surface-2":      { "$value": "{palette.neutral.2}", "$type": "color" },
+    "border":         { "$value": "{palette.neutral.2}", "$type": "color" },
+    "border-strong":  { "$value": "{palette.neutral.3}", "$type": "color" },
+    "text-dim":       { "$value": "{palette.neutral.4}", "$type": "color" },
+    "text-secondary": { "$value": "{palette.neutral.6}", "$type": "color" },
+    "text":           { "$value": "{palette.neutral.8}", "$type": "color" },
+    "success":        { "$value": "{palette.success.3}", "$type": "color" },
+    "danger":         { "$value": "{palette.danger.3}", "$type": "color" }
+  }
+}