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

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

@@ -0,0 +1,49 @@
+{
+  "opacity": {
+    "100%": {
+      "value": "100%"
+    },
+    "95%": {
+      "value": "95%"
+    },
+    "90%": {
+      "value": "90%"
+    },
+    "85%": {
+      "value": "85%"
+    },
+    "80%": {
+      "value": "80%"
+    },
+    "70%": {
+      "value": "70%"
+    },
+    "60%": {
+      "value": "60%"
+    },
+    "50%": {
+      "value": "50%"
+    },
+    "40%": {
+      "value": "40%"
+    },
+    "30%": {
+      "value": "30%"
+    },
+    "20%": {
+      "value": "20%"
+    },
+    "15%": {
+      "value": "15%"
+    },
+    "10%": {
+      "value": "10%"
+    },
+    "5%": {
+      "value": "5%"
+    },
+    "0%": {
+      "value": "0%"
+    }
+  }
+}

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

@@ -0,0 +1,86 @@
+{
+  "shadow": {
+    "box-shadow": {
+      "1": {
+        "color": {
+          "value": "#12121214"
+        },
+        "type": {
+          "value": "dropShadow"
+        },
+        "x": {
+          "value": "0px"
+        },
+        "y": {
+          "value": "4px"
+        },
+        "blur": {
+          "value": "4px"
+        },
+        "spread": {
+          "value": "0px"
+        }
+      },
+      "2": {
+        "color": {
+          "value": "#12121214"
+        },
+        "type": {
+          "value": "dropShadow"
+        },
+        "x": {
+          "value": "0px"
+        },
+        "y": {
+          "value": "8px"
+        },
+        "blur": {
+          "value": "8px"
+        },
+        "spread": {
+          "value": "0px"
+        }
+      },
+      "3": {
+        "color": {
+          "value": "#1212121f"
+        },
+        "type": {
+          "value": "dropShadow"
+        },
+        "x": {
+          "value": "0px"
+        },
+        "y": {
+          "value": "12px"
+        },
+        "blur": {
+          "value": "12px"
+        },
+        "spread": {
+          "value": "0px"
+        }
+      },
+      "4": {
+        "color": {
+          "value": "#12121233"
+        },
+        "type": {
+          "value": "dropShadow"
+        },
+        "x": {
+          "value": "0px"
+        },
+        "y": {
+          "value": "20px"
+        },
+        "blur": {
+          "value": "20px"
+        },
+        "spread": {
+          "value": "0px"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,94 @@
+{
+  "size": {
+    "2": {
+      "value": "2px"
+    },
+    "4":{
+      "value": "4px"
+    },
+    "5": {
+      "value": "5px"
+    },
+    "8":{
+      "value": "8px"
+    },
+    "10": {
+      "value": "10px"
+    },
+    "12":{
+      "value": "12px"
+    },
+    "18": {
+      "value": "18px"
+    },
+    "20": {
+      "value": "20px"
+    },
+    "24": {
+      "value": "24px"
+    },
+    "30": {
+      "value": "30px"
+    },
+    "34": {
+      "value": "34px"
+    },
+    "36": {
+      "value": "36px"
+    },
+    "40": {
+      "value": "40px"
+    },
+    "42": {
+      "value": "42px"
+    },
+    "60": {
+      "value": "60px"
+    },
+    "110": {
+      "value": "110px"
+    },
+    "140": {
+      "value": "140px"
+    },
+    "160": {
+      "value": "160px"
+    },
+    "228": {
+      "value": "228px"
+    },
+    "240": {
+      "value": "240px"
+    },
+    "276": {
+      "value": "276px"
+    },
+    "300": {
+      "value": "300px"
+    },
+    "380": {
+      "value": "380px"
+    },
+    "400": {
+      "value": "400px"
+    },
+    "480": {
+      "value": "480px"
+    },
+    "500": {
+      "value": "500px"
+    },
+    "580": {
+      "value": "580px"
+    },
+    "720": {
+      "value": "720px"
+    },
+    "960": {
+      "value": "960px"
+    },
+    "fluid": {
+      "value": "100%"
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+{
+  "space": {
+    "none": {
+      "value": "{baseSpace.0.value}"
+    },
+    "x-x-small": {
+      "value": "{baseSpace.4.value}"
+    },
+    "x-small": {
+      "value": "{baseSpace.8.value}"
+    },
+    "small": {
+      "value": "{baseSpace.12.value}"
+    },
+    "medium": {
+      "value": "{baseSpace.20.value}"
+    },
+    "large": {
+      "value": "{baseSpace.32.value}"
+    },
+    "x-large": {
+      "value": "{baseSpace.52.value}"
+    },
+    "x-x-large": {
+      "value": "{baseSpace.84.value}"
+    },
+    "fluid": {
+      "value": "{baseSpace.100%.value}"
+    },
+    "neg-fluid": {
+      "value": "{baseSpace.minus100%.value}"
+    },
+    "half-fluid": {
+      "value": "{baseSpace.50%.value}"
+    },
+    "neg-half-fluid": {
+      "value": "{baseSpace.minus50%.value}"
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+{
+  "baseSpace": {
+    "0": {
+      "value": "0px"
+    },
+    "4": {
+      "value": "4px"
+    },
+    "8": {
+      "value": "8px"
+    },
+    "12": {
+      "value": "12px"
+    },
+    "20": {
+      "value": "20px"
+    },
+    "32": {
+      "value": "32px"
+    },
+    "52": {
+      "value": "52px"
+    },
+    "84": {
+      "value": "84px"
+    },
+    "100%": {
+      "value": "100%"
+    },
+    "minus100%": {
+      "value": "-100%"
+    },
+    "50%": {
+      "value": "50%"
+    },
+    "minus50%": {
+      "value": "-50%"
+    }
+  }
+}