@grantcodes/style-dictionary 1.0.0 → 1.2.0

package/tokens/todomap/tier-2-usage/00-colors-content.json

@@ -0,0 +1,33 @@
+{
+  "color": {
+    "content": {
+      "default": {
+        "value": "{color.neutral.900}"
+      },
+      "subtle": {
+        "value": "{color.neutral.500}"
+      },
+      "knockout": {
+        "value": "{color.neutral.white}"
+      },
+      "brand": {
+        "value": "{color.brand.600}"
+      },
+      "utility": {
+        "error": {
+          "value": "{color.utility.red.600}"
+        },
+        "warning": {
+          "value": "{color.utility.yellow.600}"
+        },
+        "success": {
+          "value": "{color.utility.green.600}"
+        },
+        "info": {
+          "value": "{color.utility.blue.600}"
+        }
+      }
+    }
+  }
+}
+

package/tokens/todomap/tier-2-usage/typography-usage.json

@@ -0,0 +1,20 @@
+{
+  "typography": {
+    "font-family": {
+      "heading": {
+        "value": "Quicksand, {typography.font-family.system}"
+      },
+      "body": {
+        "value": "Quicksand, {typography.font-family.system}"
+      }
+    },
+    "font-weight": {
+      "heading": {
+        "value": "700"
+      },
+      "body": {
+        "value": "400"
+      }
+    }
+  }
+}

package/tokens/todomap/tier-3-components/button.json

@@ -0,0 +1,141 @@
+{
+  "button": {
+    "color": {
+      "background": {
+        "default": {
+          "value": "{color.background.brand}"
+        },
+        "hover": {
+          "value": "{color.background.brand-hover}"
+        },
+        "active": {
+          "value": "{color.background.brand-hover}"
+        },
+        "disabled": {
+          "value": "{color.background.default}"
+        }
+      },
+      "content": {
+        "default": {
+          "value": "{color.content.default}"
+        },
+        "hover": {
+          "value": "{color.content.brand}"
+        },
+        "active": {
+          "value": "{color.content.brand}"
+        },
+        "disabled": {
+          "value": "{color.content.subtle}"
+        }
+      },
+      "border": {
+        "default": {
+          "value": "{color.neutral.300}"
+        },
+        "hover": {
+          "value": "{color.brand.600}"
+        },
+        "active": {
+          "value": "{color.brand.600}"
+        },
+        "disabled": {
+          "value": "{color.neutral.300}"
+        }
+      }
+    },
+    "primary": {
+      "color": {
+        "background": {
+          "default": {
+            "value": "{color.brand.pink.500}"
+          },
+          "hover": {
+            "value": "{color.brand.pink.600}"
+          },
+          "active": {
+            "value": "{color.brand.pink.700}"
+          },
+          "disabled": {
+            "value": "{color.brand.pink.100}"
+          }
+        },
+        "content": {
+          "default": {
+            "value": "{color.neutral.white}"
+          },
+          "hover": {
+            "value": "{color.neutral.white}"
+          },
+          "active": {
+            "value": "{color.neutral.white}"
+          },
+          "disabled": {
+            "value": "{color.content.subtle}"
+          }
+        },
+        "border": {
+          "default": {
+            "value": "{color.brand.pink.500}"
+          },
+          "hover": {
+            "value": "{color.brand.pink.600}"
+          },
+          "active": {
+            "value": "{color.brand.pink.700}"
+          },
+          "disabled": {
+            "value": "{color.brand.pink.100}"
+          }
+        }
+      }
+    },
+    "secondary": {
+      "color": {
+        "background": {
+          "default": {
+            "value": "{color.neutral.white}"
+          },
+          "hover": {
+            "value": "{color.brand.purple.100}"
+          },
+          "active": {
+            "value": "{color.brand.purple.200}"
+          },
+          "disabled": {
+            "value": "{color.background.subtle}"
+          }
+        },
+        "content": {
+          "default": {
+            "value": "{color.brand.purple.600}"
+          },
+          "hover": {
+            "value": "{color.brand.purple.700}"
+          },
+          "active": {
+            "value": "{color.brand.purple.700}"
+          },
+          "disabled": {
+            "value": "{color.content.subtle}"
+          }
+        },
+        "border": {
+          "default": {
+            "value": "{color.brand.purple.500}"
+          },
+          "hover": {
+            "value": "{color.brand.purple.600}"
+          },
+          "active": {
+            "value": "{color.brand.purple.700}"
+          },
+          "disabled": {
+            "value": "{color.neutral.300}"
+          }
+        }
+      }
+    }
+  }
+}
+

package/tokens/todomap/tier-3-components/focus-ring.json

@@ -0,0 +1,26 @@
+{
+  "focus-ring": {
+    "color": {
+      "default": {
+        "value": "rgba(106, 91, 197, 0.4)"
+      },
+      "contrast": {
+        "value": "{color.brand.200}"
+      },
+      "contrast-shadow": {
+        "value": "{color.brand.800}"
+      }
+    },
+    "width": {
+      "default": {
+        "value": "0.2rem"
+      }
+    },
+    "offset": {
+      "default": {
+        "value": "0px"
+      }
+    }
+  }
+}
+

package/tokens/todomap/tier-3-components/form.json

@@ -0,0 +1,69 @@
+{
+  "form": {
+    "color": {
+      "background": {
+        "default": {
+          "value": "{color.background.default}"
+        },
+        "focus": {
+          "value": "{color.background.default}"
+        },
+        "hover": {
+          "value": "{color.background.subtle}"
+        },
+        "active": {
+          "value": "{color.background.default}"
+        },
+        "disabled": {
+          "value": "{color.background.default}"
+        }
+      },
+      "content": {
+        "default": {
+          "value": "{color.content.default}"
+        },
+        "focus": {
+          "value": "{color.content.default}"
+        },
+        "hover": {
+          "value": "{color.content.default}"
+        },
+        "active": {
+          "value": "{color.content.default}"
+        },
+        "disabled": {
+          "value": "{color.content.subtle}"
+        }
+      },
+      "border": {
+        "default": {
+          "value": "{color.neutral.500}"
+        },
+        "focus": {
+          "value": "{color.brand.600}"
+        },
+        "hover": {
+          "value": "{color.neutral.700}"
+        },
+        "active": {
+          "value": "{color.brand.600}"
+        },
+        "disabled": {
+          "value": "{color.neutral.300}"
+        },
+        "error": {
+          "value": "{color.utility.red.600}"
+        }
+      }
+    },
+    "input": {
+      "accent": {
+        "color": {
+          "default": {
+            "value": "{color.brand.500}"
+          }
+        }
+      }
+    }
+  }
+}

package/tokens/todomap/tier-3-components/link.json

@@ -0,0 +1,39 @@
+{
+  "link": {
+    "color": {
+      "content": {
+        "default": {
+          "value": "{color.brand.600}"
+        },
+        "hover": {
+          "value": "{color.brand.900}"
+        },
+        "active": {
+          "value": "{color.brand.900}"
+        },
+        "visited": {
+          "value": "{color.brand.600}"
+        }
+      }
+    },
+    "knockout": {
+      "color": {
+        "content": {
+          "default": {
+            "value": "{color.content.knockout}"
+          },
+          "hover": {
+            "value": "{color.content.knockout}"
+          },
+          "active": {
+            "value": "{color.content.knockout}"
+          },
+          "visited": {
+            "value": "{color.content.knockout}"
+          }
+        }
+      }
+    }
+  }
+}
+

package/tokens/wireframe/tier-1-definitions/animation.json

@@ -0,0 +1,18 @@
+{
+  "animation": {
+    "duration": {
+      "15": {
+        "value": "0.15s"
+      },
+      "40": {
+        "value": "0.4s"
+      }
+    },
+    "easing": {
+      "default": {
+        "value": "ease"
+      }
+    }
+  }
+}
+

package/tokens/wireframe/tier-1-definitions/borders.json

@@ -0,0 +1,42 @@
+{
+  "border": {
+    "radius": {
+      "0": {
+        "value": "0px"
+      },
+      "2": {
+        "value": "2px"
+      },
+      "4": {
+        "value": "4px"
+      },
+      "8": {
+        "value": "8px"
+      },
+      "16": {
+        "value": "16px"
+      },
+      "32": {
+        "value": "32px"
+      },
+      "round": {
+        "value": "999px"
+      }
+    },
+    "width": {
+      "1": {
+        "value": "1px"
+      },
+      "2": {
+        "value": "2px"
+      },
+      "4": {
+        "value": "4px"
+      },
+      "8": {
+        "value": "8px"
+      }
+    }
+  }
+}
+

package/tokens/wireframe/tier-1-definitions/colors.json

@@ -0,0 +1,36 @@
+{
+  "color": {
+    "brand": {
+      "gray": {
+        "100": {
+          "value": "{color.neutral.100}"
+        },
+        "200": {
+          "value": "{color.neutral.200}"
+        },
+        "300": {
+          "value": "{color.neutral.300}"
+        },
+        "400": {
+          "value": "{color.neutral.400}"
+        },
+        "500": {
+          "value": "{color.neutral.500}"
+        },
+        "600": {
+          "value": "{color.neutral.600}"
+        },
+        "700": {
+          "value": "{color.neutral.700}"
+        },
+        "800": {
+          "value": "{color.neutral.800}"
+        },
+        "900": {
+          "value": "{color.neutral.900}"
+        }
+      }
+    }
+  }
+}
+

package/tokens/wireframe/tier-1-definitions/shadows.json

@@ -0,0 +1,39 @@
+{
+  "shadow": {
+    "sm": {
+      "x": {
+        "value": "0px"
+      },
+      "y": {
+        "value": "4px"
+      },
+      "blur": {
+        "value": "4px"
+      },
+      "spread": {
+        "value": "0px"
+      },
+      "color": {
+        "value": "#00000040"
+      }
+    },
+    "md": {
+      "x": {
+        "value": "0px"
+      },
+      "y": {
+        "value": "8px"
+      },
+      "blur": {
+        "value": "6px"
+      },
+      "spread": {
+        "value": "-6px"
+      },
+      "color": {
+        "value": "#0000001a"
+      }
+    }
+  }
+}
+

package/tokens/wireframe/tier-1-definitions/typography.json

@@ -0,0 +1,130 @@
+{
+  "typography": {
+    "font-family": {
+      "system": {
+        "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
+      },
+      "helvetica": {
+        "value": "Helvetica, sans-serif"
+      }
+    },
+    "font-weight": {
+      "400": {
+        "value": "400"
+      },
+      "700": {
+        "value": "700"
+      }
+    },
+    "font-size": {
+      "12": {
+        "value": "12px"
+      },
+      "14": {
+        "value": "14px"
+      },
+      "16": {
+        "value": "16px"
+      },
+      "18": {
+        "value": "18px"
+      },
+      "20": {
+        "value": "20px"
+      },
+      "24": {
+        "value": "24px"
+      },
+      "28": {
+        "value": "28px"
+      },
+      "32": {
+        "value": "32px"
+      },
+      "40": {
+        "value": "40px"
+      },
+      "48": {
+        "value": "48px"
+      },
+      "56": {
+        "value": "56px"
+      },
+      "64": {
+        "value": "64px"
+      },
+      "100": {
+        "value": "100px"
+      }
+    },
+    "line-height": {
+      "16": {
+        "value": "16px"
+      },
+      "20": {
+        "value": "20px"
+      },
+      "24": {
+        "value": "24px"
+      },
+      "28": {
+        "value": "28px"
+      },
+      "32": {
+        "value": "32px"
+      },
+      "36": {
+        "value": "36px"
+      },
+      "40": {
+        "value": "40px"
+      },
+      "48": {
+        "value": "48px"
+      },
+      "56": {
+        "value": "56px"
+      },
+      "64": {
+        "value": "64px"
+      },
+      "72": {
+        "value": "72px"
+      },
+      "110": {
+        "value": "110px"
+      }
+    },
+    "letter-spacing": {
+      "0": {
+        "value": "0px"
+      },
+      "2": {
+        "value": "2px"
+      },
+      "minus-2": {
+        "value": "-2px"
+      },
+      "minus-1-half": {
+        "value": "-1.5px"
+      },
+      "minus-1": {
+        "value": "-1px"
+      },
+      "minus-half": {
+        "value": "-0.5px"
+      },
+      "half": {
+        "value": "0.5px"
+      }
+    },
+    "text-transform": {
+      "none": {
+        "value": "none"
+      },
+      "uppercase": {
+        "value": "uppercase"
+      }
+    }
+  }
+}

package/tokens/wireframe/tier-2-usage/00-colors-background.json

@@ -0,0 +1,86 @@
+{
+  "color": {
+    "background": {
+      "default": {
+        "value": "{color.neutral.white}"
+      },
+      "default-hover": {
+        "value": "{color.neutral.100}"
+      },
+      "subtle": {
+        "value": "{color.neutral.100}"
+      },
+      "subtle-hover": {
+        "value": "{color.neutral.200}"
+      },
+      "knockout": {
+        "value": "{color.neutral.black}"
+      },
+      "brand": {
+        "value": "{color.brand.gray.100}"
+      },
+      "brand-hover": {
+        "value": "{color.brand.gray.200}"
+      },
+      "brand-disabled": {
+        "value": "{color.neutral.200}"
+      },
+      "brand-knockout": {
+        "value": "{color.brand.gray.800}"
+      },
+      "brand-knockout-hover": {
+        "value": "{color.brand.gray.700}"
+      },
+      "utility": {
+        "error": {
+          "value": "{color.utility.red.100}"
+        },
+        "error-knockout": {
+          "value": "{color.utility.red.600}"
+        },
+        "warning": {
+          "value": "{color.utility.yellow.100}"
+        },
+        "warning-knockout": {
+          "value": "{color.utility.yellow.600}"
+        },
+        "success": {
+          "value": "{color.utility.green.100}"
+        },
+        "success-knockout": {
+          "value": "{color.utility.green.600}"
+        },
+        "info": {
+          "value": "{color.utility.blue.100}"
+        },
+        "info-knockout": {
+          "value": "{color.utility.blue.600}"
+        }
+      },
+      "dataviz": {
+        "primary": {
+          "value": "{color.brand.gray.600}"
+        },
+        "primary-subtle": {
+          "value": "{color.transparent.25}"
+        },
+        "secondary": {
+          "value": "{color.neutral.200}"
+        },
+        "tertiary": {
+          "value": "{color.neutral.400}"
+        }
+      },
+      "disabled": {
+        "value": "{color.neutral.200}"
+      },
+      "transparent": {
+        "value": "{color.transparent.25}"
+      },
+      "transparent-strong": {
+        "value": "{color.transparent.90}"
+      }
+    }
+  }
+}
+