@spaced-out/ui-design-system 0.0.1-alpha.0

package/design-tokens/color/app-color.json

@@ -0,0 +1,226 @@
+{
+  "color": {
+    "text": {
+      "primary": {
+        "value": "{baseColor.indigo.940.value}"
+      },
+      "secondary": {
+        "value": "{baseColor.gray.600.value}"
+      },
+      "tertiary": {
+        "value": "{baseColor.gray.400.value}"
+      },
+      "disabled": {
+        "value": "{baseColor.gray.200.value}"
+      },
+      "selected": {
+        "value": "{baseColor.purple.500.value}"
+      },
+      "neutral": {
+        "value": "{baseColor.indigo.500.value}"
+      },
+      "success": {
+        "value": "{baseColor.green.500.value}"
+      },
+      "information": {
+        "value": "{baseColor.blue.500.value}"
+      },
+      "warning": {
+        "value": "{baseColor.orange.500.value}"
+      },
+      "danger": {
+        "value": "{baseColor.red.500.value}"
+      },
+      "inverse": {
+        "primary": {
+          "value": "{baseColor.white.100.value}"
+        },
+        "secondary": {
+          "value": "{baseColor.gray.200.value}"
+        }
+      }
+    },
+    "border": {
+      "primary": {
+        "value": "{baseColor.gray.100.value}"
+      },
+      "secondary": {
+        "value": "{baseColor.gray.200.value}"
+      },
+      "danger": {
+        "value": "{baseColor.red.500.value}"
+      }
+    },
+    "background": {
+      "primary": {
+        "value": "{baseColor.gray.25.value}"
+      },
+      "secondary": {
+        "value": "{baseColor.gray.50.value}"
+      },
+      "tertiary": {
+        "value": "{baseColor.white.100.value}"
+      }
+    },
+    "focus": {
+      "primary": {
+        "value": "{baseColor.purple.100.value}"
+      },
+      "danger": {
+        "value": "{baseColor.red.100.value}"
+      }
+    },
+    "fill": {
+      "primary": {
+        "value": "{baseColor.purple.500.value}"
+      },
+      "secondary": {
+        "value": "{baseColor.purple.50.value}"
+      },
+      "none": {
+        "value": "{baseColor.transparent.0.value}"
+      },
+      "disabled": {
+        "value": "{baseColor.gray.50.value}"
+      }
+    },
+    "tooltip-fill": {
+      "value": "{baseColor.indigo.940.95.value}"
+    },
+    "backdrop-fill": {
+      "value": "{baseColor.indigo.940.70.value}"
+    },
+    "button-fill": {
+      "primary": {
+        "enabled": {
+          "value": "{baseColor.purple.500.value}"
+        },
+        "hovered": {
+          "value": "{baseColor.purple.700.value}"
+        },
+        "pressed": {
+          "value": "{baseColor.purple.700.value}"
+        }
+      },
+      "secondary": {
+        "enabled": {
+          "value": "{baseColor.purple.50.value}"
+        },
+        "hovered": {
+          "value": "{baseColor.purple.100.value}"
+        },
+        "pressed": {
+          "value": "{baseColor.purple.100.value}"
+        }
+      },
+      "tertiary": {
+        "enabled": {
+          "value": "{baseColor.transparent.0.value}"
+        },
+        "hovered": {
+          "value": "{baseColor.gray.75.value}"
+        },
+        "pressed": {
+          "value": "{baseColor.gray.75.value}"
+        }
+      },
+      "ghost": {
+        "enabled": {
+          "value": "{baseColor.transparent.0.value}"
+        },
+        "hovered": {
+          "value": "{baseColor.gray.75.value}"
+        },
+        "pressed": {
+          "value": "{baseColor.gray.75.value}"
+        }
+      },
+      "danger": {
+        "enabled": {
+          "value": "{baseColor.red.500.value}"
+        },
+        "hovered": {
+          "value": "{baseColor.red.600.value}"
+        },
+        "pressed": {
+          "value": "{baseColor.red.600.value}"
+        }
+      }
+    },
+    "neutral": {
+      "value": "{baseColor.indigo.500.value}"
+    },
+    "neutral.lightest":{
+      "value": "{baseColor.indigo.50.value}"
+    },
+    "neutral.light": {
+      "value": "{baseColor.indigo.200.value}"
+    },
+    "neutral.dark": {
+      "value": "{baseColor.indigo.700.value}"
+    },
+    "neutral.darkest": {
+      "value": "{baseColor.indigo.900.value}"
+    },
+    "success": {
+      "value": "{baseColor.green.500.value}"
+    },
+    "success.lightest": {
+        "value": "{baseColor.green.50.value}"
+    },
+    "success.light": {
+      "value": "{baseColor.green.200.value}"
+    },
+    "success.dark": {
+      "value": "{baseColor.green.700.value}"
+    },
+    "success.darkest": {
+      "value": "{baseColor.green.900.value}"
+    },
+    "information": {
+      "value": "{baseColor.blue.500.value}"
+    },
+    "information.lightest": {
+        "value": "{baseColor.blue.50.value}"
+    },
+    "information.light": {
+      "value": "{baseColor.blue.200.value}"
+    },
+    "information.dark": {
+      "value": "{baseColor.blue.700.value}"
+    },
+    "information.darkest": {
+      "value": "{baseColor.blue.900.value}"
+    },
+    "warning": {
+      "value": "{baseColor.orange.500.value}"
+    },
+    "warning.lightest": {
+        "value": "{baseColor.orange.50.value}"
+    },
+    "warning.light": {
+      "value": "{baseColor.orange.200.value}"
+    },
+    "warning.dark": {
+      "value": "{baseColor.orange.700.value}"
+    },
+    "warning.darkest": {
+      "value": "{baseColor.orange.900.value}"
+    },
+    "danger": {
+      "value": "{baseColor.red.500.value}"
+    },
+    "danger.lightest": {
+        "value": "{baseColor.red.50.value}"
+    },
+    "danger.light": {
+      "value": "{baseColor.red.200.value}"
+    },
+    "danger.dark": {
+      "value": "{baseColor.red.700.value}"
+    },
+    "danger.darkest": {
+      "value": "{baseColor.red.900.value}"
+    }
+  }
+}

package/design-tokens/color/base-color.json

@@ -0,0 +1,265 @@
+{
+  "baseColor": {
+    "purple": {
+      "50": {
+        "value": "#efebfa"
+      },
+      "100": {
+        "value": "#ccc0f0"
+      },
+      "200": {
+        "value": "#b4a2e8"
+      },
+      "300": {
+        "value": "#9277de"
+      },
+      "400": {
+        "value": "#7d5dd7"
+      },
+      "500": {
+        "value": "#5c34cd"
+      },
+      "600": {
+        "value": "#542fbb"
+      },
+      "700": {
+        "value": "#412592"
+      },
+      "800": {
+        "value": "#331d71"
+      },
+      "900": {
+        "value": "#271656"
+      }
+    },
+    "gray": {
+      "25": {
+        "value": "#fafafa"
+      },
+      "50": {
+        "value": "#f4f4f4"
+      },
+      "75": {
+        "value": "#EBEBEB"
+      },
+      "100": {
+        "value": "#e1e1e1"
+      },
+      "200": {
+        "value": "#d1d1d1"
+      },
+      "300": {
+        "value": "#939393"
+      },
+      "400": {
+        "value": "#7e7e7e"
+      },
+      "500": {
+        "value": "#5e5e5e"
+      },
+      "600": {
+        "value": "#565656"
+      },
+      "700": {
+        "value": "#434343"
+      },
+      "800": {
+        "value": "#343434"
+      },
+      "900": {
+        "value": "#272727"
+      },
+      "920": {
+        "value": "#1e1e1e"
+      },
+      "940": {
+        "value": "#171717"
+      },
+      "960": {
+        "value": "#121212"
+      }
+    },
+    "indigo": {
+      "50": {
+        "value": "#f1f1f5"
+      },
+      "100": {
+        "value": "#d3d2e0"
+      },
+      "200": {
+        "value": "#bdbdd1"
+      },
+      "300": {
+        "value": "#9f9fbc"
+      },
+      "400": {
+        "value": "#8d8caf"
+      },
+      "500": {
+        "value": "#706f9b"
+      },
+      "600": {
+        "value": "#66658d"
+      },
+      "700": {
+        "value": "#504f6e"
+      },
+      "800": {
+        "value": "#3e3d55"
+      },
+      "900": {
+        "value": "#2C2C47"
+      },
+      "920": {
+        "value": "#1F1F36"
+      },
+      "940": {
+        "value": "#17172A",
+        "95": {
+          "value": "rgba(23, 23, 42, 0.95)"
+        },
+        "70": {
+          "value": "rgba(23, 23, 42, 0.7)"
+        }
+      }
+    },
+    "blue": {
+      "50": {
+        "value": "#e6f0fe"
+      },
+      "100": {
+        "value": "#b2d1fa"
+      },
+      "200": {
+        "value": "#8dbaf8"
+      },
+      "300": {
+        "value": "#599bf5"
+      },
+      "400": {
+        "value": "#3987f3"
+      },
+      "500": {
+        "value": "#0769f0"
+      },
+      "600": {
+        "value": "#0660da"
+      },
+      "700": {
+        "value": "#054baa"
+      },
+      "800": {
+        "value": "#043a84"
+      },
+      "900": {
+        "value": "#032c65"
+      }
+    },
+    "green": {
+      "50": {
+        "value": "#e6f5ed"
+      },
+      "100": {
+        "value": "#b1dec8"
+      },
+      "200": {
+        "value": "#8bcfad"
+      },
+      "300": {
+        "value": "#56b988"
+      },
+      "400": {
+        "value": "#35ab71"
+      },
+      "500": {
+        "value": "#03964d"
+      },
+      "600": {
+        "value": "#038946"
+      },
+      "700": {
+        "value": "#026b37"
+      },
+      "800": {
+        "value": "#02532a"
+      },
+      "900": {
+        "value": "#013f20"
+      }
+    },
+    "orange": {
+      "50": {
+        "value": "#fcf2e7"
+      },
+      "100": {
+        "value": "#f5d7b4"
+      },
+      "200": {
+        "value": "#f0c48f"
+      },
+      "300": {
+        "value": "#eaa95c"
+      },
+      "400": {
+        "value": "#e5983d"
+      },
+      "500": {
+        "value": "#df7e0c"
+      },
+      "600": {
+        "value": "#cb730b"
+      },
+      "700": {
+        "value": "#9e5909"
+      },
+      "800": {
+        "value": "#7b4507"
+      },
+      "900": {
+        "value": "#5e3505"
+      }
+    },
+    "red": {
+      "50": {
+        "value": "#fce8ed"
+      },
+      "100": {
+        "value": "#f6b9c8"
+      },
+      "200": {
+        "value": "#f297ad"
+      },
+      "300": {
+        "value": "#ec6787"
+      },
+      "400": {
+        "value": "#e94970"
+      },
+      "500": {
+        "value": "#e31c4c"
+      },
+      "600": {
+        "value": "#cf1945"
+      },
+      "700": {
+        "value": "#a11436"
+      },
+      "800": {
+        "value": "#7d0f2a"
+      },
+      "900": {
+        "value": "#5f0c20"
+      }
+    },
+    "white": {
+      "100": {
+        "value": "#ffffff"
+      }
+    },
+    "transparent": {
+      "0": {
+        "value": "rgba(255,255,255,0)"
+      }
+    }
+  }
+}

package/design-tokens/elevation/app-elevation.json

@@ -0,0 +1,22 @@
+{
+  "elevation": {
+    "none": {
+      "value": "{baseElevation.0.value}"
+    },
+    "card": {
+      "value": "{baseElevation.4.value}"
+    },
+    "menu": {
+      "value": "{baseElevation.12.value}"
+    },
+    "backdrop": {
+      "value": "{baseElevation.40.value}"
+    },
+    "modal": {
+      "value": "{baseElevation.40.value}"
+    },
+    "toast": {
+      "value": "{baseElevation.60.value}"
+    }
+  }
+}

package/design-tokens/elevation/base-elevation.json

@@ -0,0 +1,19 @@
+{
+  "baseElevation": {
+    "0": {
+      "value": "0"
+    },
+    "4": {
+      "value": "4"
+    },
+    "12": {
+      "value": "12"
+    },
+    "40": {
+      "value": "40"
+    },
+    "60": {
+      "value": "60"
+    }
+  }
+}

package/design-tokens/font/base-font.json

@@ -0,0 +1,98 @@
+{
+  "font": {
+    "family": {
+      "centra": {
+        "value": "\"Centra No2\""
+      }
+    },
+    "weight": {
+      "book": {
+        "value": "400"
+      },
+      "medium": {
+        "value": "500"
+      }
+    },
+    "size": {
+      "12": {
+        "value": "12px"
+      },
+      "13": {
+        "value": "13px"
+      },
+      "14": {
+        "value": "14px"
+      },
+      "16": {
+        "value": "16px"
+      },
+      "18": {
+        "value": "18px"
+      },
+      "26": {
+        "value": "26px"
+      },
+      "46": {
+        "value": "46px"
+      }
+    },
+    "letter-spacing": {
+      "0": {
+        "value": "0em"
+      },
+      "1": {
+        "value": "0.01em"
+      },
+      "2": {
+        "value": "0.02em"
+      },
+      "4": {
+        "value": "0.04em"
+      },
+      "minus1": {
+        "value": "-0.01em"
+      },
+      "minus2": {
+        "value": "-0.02em"
+      },
+      "minus4": {
+        "value": "-0.04em"
+      }
+    },
+    "line-height": {
+      "100%": {
+        "value": "100%"
+      },
+      "120%": {
+        "value": "120%"
+      },
+      "130%": {
+        "value": "130%"
+      },
+      "140%": {
+        "value": "140%"
+      },
+      "150%": {
+        "value": "150%"
+      },
+      "170%": {
+        "value": "170%"
+      }
+    },
+    "paragraph-spacing": {
+      "0": {
+        "value": "0"
+      }
+    },
+    "text-case": {
+      "none": {
+        "value": "none"
+      }
+    },
+    "text-decoration": {
+      "none": {
+        "value": "none"
+      }
+    }
+  }
+}

package/design-tokens/index.js

@@ -0,0 +1,5 @@
+const { readdirSync, statSync } = require("fs");
+const { join } = require("path");
+const dirs = (p) =>
+  readdirSync(p).filter((f) => statSync(join(p, f)).isDirectory());
+module.exports = dirs(__dirname);

package/design-tokens/motion/app.motion.json

@@ -0,0 +1,24 @@
+{
+  "motion": {
+    "duration": {
+      "fast": {
+        "value": "{baseMotion.transition.duration.100.value}"
+      },
+      "normal": {
+        "value": "{baseMotion.transition.duration.200.value}"
+      },
+      "slow": {
+        "value": "{baseMotion.transition.duration.300.value}"
+      },
+      "slower": {
+        "value": "{baseMotion.transition.duration.500.value}"
+      },
+      "slowest": {
+        "value": "{baseMotion.transition.duration.1000.value}"
+      }
+    },
+    "ease-in-ease-out": {
+      "value": "{baseMotion.transition.timingFunction.easeInOut.value}"
+    }
+  }
+}

package/design-tokens/motion/base-motion.json

@@ -0,0 +1,40 @@
+{
+  "baseMotion": {
+    "transition": {
+      "timingFunction": {
+        "linear": {
+          "value": "linear"
+        },
+        "ease": {
+          "value": "ease"
+        },
+        "easeIn": {
+          "value": "ease-in"
+        },
+        "easeInOut": {
+          "value": "ease-in-out"
+        },
+        "easeOut": {
+          "value": "ease-out"
+        }
+      },
+      "duration": {
+        "100": {
+          "value": "100ms"
+        },
+        "200": {
+          "value": "200ms"
+        },
+        "300": {
+          "value": "300ms"
+        },
+        "500": {
+          "value": "500ms"
+        },
+        "1000": {
+          "value": "1000ms"
+        }
+      }
+    }
+  }
+}