@uncinq/design-tokens 0.4.0 → 1.0.0

package/tokens/semantic/form.json

@@ -0,0 +1,550 @@
+{
+  "form": {
+    "border": {
+      "radius": {
+        "$value": "{radius.xs}",
+        "$type": "dimension"
+      },
+      "width": {
+        "$value": "{border.width.sm}",
+        "$type": "dimension"
+      }
+    },
+    "color": {
+      "accent": {
+        "$value": "{color.black}",
+        "$type": "color"
+      },
+      "background": {
+        "$value": "{color.white}",
+        "$type": "color",
+        "$mods": { "dark": "{color.gray.900}" }
+      },
+      "border": {
+        "default": {
+          "$value": "{color.border.default}",
+          "$type": "color"
+        },
+        "hover": {
+          "$value": "{color.border.hover}",
+          "$type": "color"
+        }
+      },
+      "text": {
+        "$value": "{color.text.default}",
+        "$type": "color"
+      }
+    },
+    "padding": {
+      "$value": "{spacing.control}",
+      "$type": "dimension"
+    },
+    "shadow": {
+      "default": {
+        "$value": "{shadow.control.default}",
+        "$type": "shadow"
+      },
+      "hover": {
+        "$value": "{shadow.control.hover}",
+        "$type": "shadow"
+      }
+    },
+    "transition": {
+      "$value": "{transition.normal}",
+      "$type": "string"
+    }
+  },
+
+  "input": {
+    "border": {
+      "radius": {
+        "$value": "{form.border.radius}",
+        "$type": "dimension"
+      },
+      "width": {
+        "$value": "{form.border.width}",
+        "$type": "dimension"
+      }
+    },
+
+    "color": {
+      "background": {
+        "$value": "{form.color.background}",
+        "$type": "color"
+      },
+
+      "border": {
+        "default": {
+          "$value": "{form.color.border.default}",
+          "$type": "color"
+        },
+        "hover": {
+          "$value": "{form.color.border.hover}",
+          "$type": "color"
+        }
+      },
+
+      "placeholder": {
+        "$value": "{color.text.muted}",
+        "$type": "color"
+      },
+
+      "text": {
+        "$value": "{form.color.text}",
+        "$type": "color"
+      }
+    },
+
+    "padding": {
+      "$value": "{form.padding}",
+      "$type": "dimension"
+    }
+  },
+
+  "file": {
+    "button": {
+      "margin": {
+        "inlineEnd": {
+          "$value": "{size.12}",
+          "$type": "dimension"
+        }
+      },
+
+      "padding": {
+        "$value": "{size.8} {size.12}",
+        "$type": "string"
+      }
+    }
+  },
+
+  "textarea": {
+    "border": {
+      "radius": {
+        "$value": "{form.border.radius}",
+        "$type": "dimension"
+      },
+
+      "width": {
+        "$value": "{form.border.width}",
+        "$type": "dimension"
+      }
+    },
+
+    "color": {
+      "background": {
+        "$value": "{form.color.background}",
+        "$type": "color"
+      },
+
+      "border": {
+        "default": {
+          "$value": "{form.color.border.default}",
+          "$type": "color"
+        },
+        "hover": {
+          "$value": "{form.color.border.hover}",
+          "$type": "color"
+        }
+      },
+
+      "placeholder": {
+        "$value": "{color.text.muted}",
+        "$type": "color"
+      },
+
+      "text": {
+        "$value": "{form.color.text}",
+        "$type": "color"
+      }
+    },
+
+    "minHeight": {
+      "$value": "5lh",
+      "$type": "dimension"
+    },
+
+    "padding": {
+      "$value": "{form.padding}",
+      "$type": "dimension"
+    }
+  },
+
+  "select": {
+    "border": {
+      "radius": {
+        "$value": "{form.border.radius}",
+        "$type": "dimension"
+      },
+
+      "width": {
+        "$value": "{form.border.width}",
+        "$type": "dimension"
+      }
+    },
+
+    "color": {
+      "background": {
+        "$value": "{form.color.background}",
+        "$type": "color"
+      },
+
+      "border": {
+        "default": {
+          "$value": "{form.color.border.default}",
+          "$type": "color"
+        },
+        "hover": {
+          "$value": "{form.color.border.hover}",
+          "$type": "color"
+        }
+      },
+
+      "optgroup": {
+        "$value": "{color.text.muted}",
+        "$type": "color"
+      },
+
+      "text": {
+        "$value": "{form.color.text}",
+        "$type": "color"
+      }
+    },
+
+    "icon": {
+      "$value": "{icon.chevron}",
+      "$type": "string"
+    },
+
+    "iconSize": {
+      "$value": "{icon.size}",
+      "$type": "dimension"
+    },
+
+    "padding": {
+      "$value": "{form.padding}",
+      "$type": "dimension"
+    },
+
+    "paddingEnd": {
+      "$value": "2rem",
+      "$type": "dimension"
+    }
+  },
+
+  "label": {
+    "color": {
+      "text": {
+        "$value": "{form.color.text}",
+        "$type": "color"
+      }
+    },
+
+    "fontSize": {
+      "$value": "{fontSize.xs}",
+      "$type": "dimension"
+    },
+
+    "fontWeight": {
+      "$value": "{fontWeight.medium}",
+      "$type": "fontWeight"
+    },
+
+    "padding": {
+      "inline": {
+        "$value": "0",
+        "$type": "dimension"
+      },
+      "block": {
+        "$value": "{spacing.2xs}",
+        "$type": "dimension"
+      }
+    },
+
+    "textTransform": {
+      "$value": "uppercase",
+      "$type": "string"
+    }
+  },
+
+  "help": {
+    "color": {
+      "text": {
+        "$value": "{color.text.muted}",
+        "$type": "color"
+      }
+    },
+
+    "fontSize": {
+      "$value": "{fontSize.xs}",
+      "$type": "dimension"
+    },
+
+    "fontWeight": {
+      "$value": "{fontWeight.normal}",
+      "$type": "fontWeight"
+    },
+
+    "margin": {
+      "$value": "0",
+      "$type": "dimension"
+    }
+  },
+
+  "checkable": {
+    "color": {
+      "$value": "{form.color.accent}",
+      "$type": "color"
+    },
+
+    "size": {
+      "$value": "1.25em",
+      "$type": "dimension"
+    }
+  },
+
+  "checkbox": {
+    "border": {
+      "radius": {
+        "$value": "0",
+        "$type": "dimension"
+      },
+
+      "width": {
+        "$value": "{form.border.width}",
+        "$type": "dimension"
+      }
+    },
+
+    "color": {
+      "background": {
+        "default": {
+          "$value": "{form.color.background}",
+          "$type": "color"
+        },
+        "checked": {
+          "$value": "{form.color.background}",
+          "$type": "color"
+        },
+        "hover": {
+          "$value": "{form.color.background}",
+          "$type": "color"
+        }
+      },
+
+      "border": {
+        "default": {
+          "$value": "{form.color.border.default}",
+          "$type": "color"
+        },
+        "checked": {
+          "$value": "{checkable.color}",
+          "$type": "color"
+        },
+        "hover": {
+          "$value": "{form.color.border.hover}",
+          "$type": "color"
+        }
+      }
+    },
+
+    "label": {
+      "padding": {
+        "$value": "0 0 0 .3125rem",
+        "$type": "string"
+      }
+    },
+
+    "mask": {
+      "checked": {
+        "$value": "{icon.tick} center no-repeat",
+        "$type": "string"
+      },
+
+      "indeterminate": {
+        "$value": "{icon.dash} center no-repeat",
+        "$type": "string"
+      }
+    },
+
+    "scale": {
+      "checked": {
+        "$value": "0.7",
+        "$type": "number"
+      }
+    }
+  },
+
+  "radio": {
+    "border": {
+      "radius": {
+        "$value": "{radius.pill}",
+        "$type": "dimension"
+      },
+
+      "width": {
+        "$value": "{form.border.width}",
+        "$type": "dimension"
+      },
+
+      "widthChecked": {
+        "$value": "{border.width.md}",
+        "$type": "dimension"
+      }
+    },
+
+    "color": {
+      "background": {
+        "default": {
+          "$value": "{form.color.background}",
+          "$type": "color"
+        },
+        "checked": {
+          "$value": "{checkable.color}",
+          "$type": "color"
+        },
+        "hover": {
+          "$value": "{form.color.background}",
+          "$type": "color"
+        }
+      },
+
+      "border": {
+        "default": {
+          "$value": "{form.color.border.default}",
+          "$type": "color"
+        },
+        "checked": {
+          "$value": "{checkable.color}",
+          "$type": "color"
+        },
+        "hover": {
+          "$value": "{form.color.border.hover}",
+          "$type": "color"
+        }
+      }
+    },
+
+    "label": {
+      "padding": {
+        "$value": "0 0 0 .3125rem",
+        "$type": "string"
+      }
+    },
+
+    "scale": {
+      "checked": {
+        "$value": "0.5",
+        "$type": "number"
+      }
+    }
+  },
+
+  "range": {
+    "thumb": {
+      "border": {
+        "width": {
+          "$value": "{size.4}",
+          "$type": "dimension"
+        },
+
+        "color": {
+          "$value": "{color.white}",
+          "$type": "color"
+        }
+      },
+
+      "color": {
+        "$value": "{form.color.accent}",
+        "$type": "color"
+      },
+
+      "size": {
+        "$value": "{size.24}",
+        "$type": "dimension"
+      }
+    },
+
+    "track": {
+      "color": {
+        "$value": "{form.color.border.default}",
+        "$type": "color"
+      },
+
+      "height": {
+        "$value": "calc({border.width.sm} + 2px)",
+        "$type": "string"
+      }
+    }
+  },
+
+  "switch": {
+    "border": {
+      "radius": {
+        "$value": "{radius.pill}",
+        "$type": "dimension"
+      },
+
+      "width": {
+        "$value": "{form.border.width}",
+        "$type": "dimension"
+      }
+    },
+
+    "color": {
+      "background": {
+        "default": {
+          "$value": "{form.color.background}",
+          "$type": "color"
+        },
+        "checked": {
+          "$value": "{form.color.background}",
+          "$type": "color"
+        },
+        "hover": {
+          "$value": "{form.color.background}",
+          "$type": "color"
+        }
+      },
+      "border": {
+        "$value": "{form.color.border.default}",
+        "$type": "color"
+      }
+    },
+
+    "thumb": {
+      "color": {
+        "default": {
+          "$value": "{form.color.accent}",
+          "$type": "color"
+        },
+        "checked": {
+          "$value": "{form.color.background}",
+          "$type": "color"
+        }
+      },
+
+      "scale": {
+        "$value": "0.6",
+        "$type": "number"
+      }
+    },
+
+    "track": {
+      "color": {
+        "default": {
+          "$value": "{form.color.background}",
+          "$type": "color"
+        },
+        "checked": {
+          "$value": "{form.color.accent}",
+          "$type": "color"
+        }
+      }
+    },
+
+    "width": {
+      "$value": "{size.40}",
+      "$type": "dimension"
+    }
+  }
+}

package/tokens/semantic/grid.json

@@ -0,0 +1,28 @@
+{
+  "columns": {
+    "$value": "12",
+    "$type": "number"
+  },
+  "gap": {
+    "$value": "{spacing.md}",
+    "$type": "string"
+  },
+  "span": {
+    "full": {
+      "$value": "1 / -1",
+      "$type": "string"
+    },
+    "half": {
+      "$value": "span calc({columns} / 2)",
+      "$type": "string"
+    },
+    "quarter": {
+      "$value": "span calc({columns} / 4)",
+      "$type": "string"
+    },
+    "third": {
+      "$value": "span calc({columns} / 3)",
+      "$type": "string"
+    }
+  }
+}

package/tokens/semantic/icon.json

@@ -0,0 +1,52 @@
+{
+  "icon": {
+    "size": {
+      "$value": "{size.16}",
+      "$type": "dimension"
+    },
+    "arrow": {
+      "$value": "url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><line x1=%222%22 y1=%228%22 x2=%2212%22 y2=%228%22/><polyline points=%228 4 12 8 8 12%22/></svg>')",
+      "$type": "string"
+    },
+    "arrowSkip": {
+      "$value": "url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><line x1=%222%22 y1=%228%22 x2=%2210%22 y2=%228%22/><polyline points=%226 4 10 8 6 12%22/><line x1=%2214%22 y1=%223%22 x2=%2214%22 y2=%2213%22/></svg>')",
+      "$type": "string"
+    },
+    "chevron": {
+      "$value": "url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><polyline points=%222 5 8 11 14 5%22/></svg>')",
+      "$type": "string"
+    },
+    "close": {
+      "$value": "url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22><line x1=%223%22 y1=%223%22 x2=%2213%22 y2=%2213%22/><line x1=%2213%22 y1=%223%22 x2=%223%22 y2=%2213%22/></svg>')",
+      "$type": "string"
+    },
+    "dash": {
+      "$value": "url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 height=%2216%22 width=%2214%22 viewBox=%220 0 448 512%22><path d=%22M431 256c0 17.7-14.3 32-32 32H49c-17.7 0-32-14.3-32-32s14.3-32 32-32h350c17.7 0 32 14.3 32 32z%22/></svg>')",
+      "$type": "string"
+    },
+    "filter": {
+      "$value": "url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M1.3 3.3h13.4%22/><path d=%22M4 8h8%22/><path d=%22M6 12.7h4%22/></svg>')",
+      "$type": "string"
+    },
+    "menu": {
+      "$value": "url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22><line x1=%222%22 y1=%224%22 x2=%2214%22 y2=%224%22/><line x1=%222%22 y1=%228%22 x2=%2214%22 y2=%228%22/><line x1=%222%22 y1=%2212%22 x2=%2214%22 y2=%2212%22/></svg>')",
+      "$type": "string"
+    },
+    "plus": {
+      "$value": "url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22><line x1=%228%22 y1=%223%22 x2=%228%22 y2=%2213%22/><line x1=%223%22 y1=%228%22 x2=%2213%22 y2=%228%22/></svg>')",
+      "$type": "string"
+    },
+    "share": {
+      "$value": "url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M8 1.3v8.7%22/><path d=%22m10.7 4-2.7-2.7-2.7 2.7%22/><path d=%22M2.7 8v5.3a1.3 1.3 0 0 0 1.3 1.3h8a1.3 1.3 0 0 0 1.3-1.3v-5.3%22/></svg>')",
+      "$type": "string"
+    },
+    "tick": {
+      "$value": "url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 height=%2216%22 width=%2214%22 viewBox=%220 0 448 512%22><path d=%22M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z%22/></svg>')",
+      "$type": "string"
+    },
+    "toc": {
+      "$value": "url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M10.7 3.3H2%22/><path d=%22M10.7 8H2%22/><path d=%22M10.7 12.7H2%22/><path d=%22M14 3.3h.01%22/><path d=%22M14 8h.01%22/><path d=%22M14 12.7h.01%22/></svg>')",
+      "$type": "string"
+    }
+  }
+}