@uncinq/component-tokens 0.4.0 → 1.0.0

package/tokens/components/details.json

@@ -0,0 +1,90 @@
+{
+  "details": {
+    "border": {
+      "radius":  {
+        "$value": "{radius.surface}", 
+        "$type": "dimension" 
+      }
+    },
+    "boxShadow": {
+      "default": { 
+        "$value": "{shadow.sm}", 
+        "$type": "shadow" 
+      },
+      "hover":   { 
+        "$value": "{shadow.md}", 
+        "$type": "shadow" 
+      }
+    },
+    "color": {
+      "background": { 
+        "$value": "{color.background.default}", 
+        "$type": "color" 
+      },
+      "border": {
+        "default": { 
+          "$value": "{color.border.default}", 
+          "$type": "color" 
+        },
+        "open":    { 
+          "$value": "{color.border.hover}", 
+          "$type": "color" 
+        }
+      },
+      "text": {
+        "$value": "{color.text.default}", 
+        "$type": "color" 
+      }
+    },
+    "icon": {
+      "default": { 
+        "$value": "{icon.chevron}", 
+        "$type": "string" 
+      },
+      "size":    { 
+        "$value": "{icon.size}", 
+        "$type": "dimension" 
+      }
+    },
+    "margin":  { 
+      "$value": "{spacing.sm}", 
+      "$type": "dimension" 
+    },
+    "content": {
+      "padding": {
+        "inline": {
+          "$value": "{spacing.sm}",
+          "$type": "dimension"
+        },
+        "block": {
+          "$value": "{spacing.sm}",
+          "$type": "dimension"
+        }
+      }
+    },
+    "summary": {
+      "fontFamily": {
+        "$value": "{fontFamily.heading}",
+        "$type": "fontFamily"
+      },
+      "fontSize": {
+        "$value": "{fontSize.md}",
+        "$type": "dimension"
+      },
+      "fontWeight": {
+        "$value": "{fontWeight.heading}",
+        "$type": "fontWeight"
+      },
+      "padding": {
+        "inline": {
+          "$value": "{spacing.sm}",
+          "$type": "dimension"
+        },
+        "block": {
+          "$value": "{spacing.sm}",
+          "$type": "dimension"
+        }
+      }
+    }
+  }
+}

package/tokens/components/drawer.json

@@ -0,0 +1,78 @@
+{
+  "drawer": {
+    "backdrop": {
+      "blur": {
+        "$value": "{blur.backdrop}",
+        "$type": "dimension"
+      },
+      "color": {
+        "$value": "{color.backdrop}",
+        "$type": "color"
+      }
+    },
+    "bottom": {
+      "$value": "0",
+      "$type": "dimension"
+    },
+    "color": {
+      "background": {
+        "$value": "{color.background.surface}",
+        "$type": "color"
+      },
+      "border": {
+        "$value": "{color.border.default}",
+        "$type": "color"
+      },
+      "text": {
+        "$value": "{color.text.onSurface}",
+        "$type": "color"
+      }
+    },
+    "end": {
+      "$value": "0",
+      "$type": "dimension"
+    },
+    "height": {
+      "$value": "50vh",
+      "$type": "dimension"
+    },
+    "padding": {
+      "$value": "{spacing.surface}", 
+      "$type": "dimension" 
+    },
+    "shadow": {
+      "$value": "{shadow.surface}",
+      "$type": "shadow"
+    },
+    "start": { 
+      "$value": "auto", 
+      "$type": "string" 
+    },
+    "top": { 
+      "$value": "0", 
+      "$type": "dimension" 
+    },
+    "transition": {
+      "duration": { 
+        "$value": "{duration.slow}", 
+        "$type": "duration" 
+      },
+      "easing":   { 
+        "$value": "{easing.out-expo}", 
+        "$type": "string" 
+      }
+    },
+    "translate": { 
+      "$value": "translateX(100%)", 
+      "$type": "string" 
+    },
+    "width": { 
+      "$value": "320px", 
+      "$type": "dimension" 
+    },
+    "zIndex": { 
+      "$value": "{zIndex.drawer}", 
+      "$type": "number" 
+    }
+  }
+}

package/tokens/components/dropdown.json

@@ -0,0 +1,105 @@
+{
+  "dropdown": {
+    "border": {
+      "radius": {
+        "$value": "{radius.surface}",
+        "$type": "dimension"
+      },
+      "style": {
+        "$value": "{border.style.normal}",
+        "$type": "strokeStyle"
+      },
+      "width": {
+        "$value": "{border.width.sm}",
+        "$type": "dimension"
+      }
+    },
+    "color": {
+      "background": {
+        "$value": "{color.background.surface}",
+        "$type": "color"
+      },
+      "border": {
+        "$value": "{color.border.default}",
+        "$type": "color"
+      },
+      "text": {
+        "$value": "{color.text.onSurface}",
+        "$type": "color"
+      }
+    },
+    "icon": {
+      "default": {
+        "$value": "{icon.chevron}",
+        "$type": "string"
+      },
+      "size": {
+        "$value": "{icon.size}",
+        "$type": "dimension"
+      }
+    },
+    "item": {
+      "border": {
+        "radius": {
+          "$value": "{radius.xs}",
+          "$type": "dimension"
+        }
+      },
+      "color": {
+        "background": {
+          "default": {
+            "$value": "{color.background.default}",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "{color.background.muted.default}",
+            "$type": "color"
+          }
+        }
+      },
+      "fontSize": {
+        "$value": "{fontSize.xs}",
+        "$type": "dimension"
+      },
+      "padding": {
+        "inline": {
+          "$value": "{spacing.2xs}",
+          "$type": "dimension"
+        },
+        "block": {
+          "$value": "{spacing.2xs}",
+          "$type": "dimension"
+        }
+      }
+    },
+    "minWidth": {
+      "$value": "12rem",
+      "$type": "dimension"
+    },
+    "padding": {
+      "$value": "{size.4}",
+      "$type": "dimension"
+    },
+    "shadow": {
+      "$value": "{shadow.sm}",
+      "$type": "shadow"
+    },
+    "transition": {
+      "duration": {
+        "$value": "{duration.fast}",
+        "$type": "duration"
+      },
+      "easing": {
+        "$value": "{easing.out}",
+        "$type": "string"
+      }
+    },
+    "translate": {
+      "y": { "$value": "-4px", "$type": "dimension" }
+    },
+    "zIndex": {
+      "$value": "{zIndex.dropdown}",
+      "$type": "number"
+    }
+  }
+}

package/tokens/components/embed.json

@@ -0,0 +1,40 @@
+{
+  "embed": {
+    "border": {
+      "default": { 
+        "$value": "{embed.border.width} {embed.border.style} {embed.color.border}", 
+        "$type": "string" 
+      },
+      "radius":  { 
+        "$value": "{radius.none}", 
+        "$type": "dimension" 
+      },
+      "style":   { 
+        "$value": "{border.style.normal}", 
+        "$type": "strokeStyle" 
+      },
+      "width":   { 
+        "$value": "{border.width.sm}", 
+        "$type": "dimension" 
+      }
+    },
+    "boxShadow": { 
+      "$value": "none", 
+      "$type": "string" 
+    },
+    "color": {
+      "border": { 
+        "$value": "{color.border.default}", 
+        "$type": "color" 
+      }
+    },
+    "maxWidth": {
+       "$value": "100%", 
+       "$type": "dimension" 
+     },
+    "ratio":    { 
+      "$value": "{ratio.video}", 
+      "$type": "string" 
+    }
+  }
+}

package/tokens/components/figure.json

@@ -0,0 +1,24 @@
+{
+  "figure": {
+    "figcaption": {
+      "fontSize": {
+        "$value": "{fontSize.sm}",
+        "$type": "dimension"
+      },
+      "gap": {
+        "$value": "{spacing.xs}",
+        "$type": "dimension"
+      }
+    },
+    "gap": {
+      "$value": "{spacing.xs}",
+      "$type": "dimension"
+    },
+    "margin": {
+      "block": {
+        "$value": "{spacing.md}",
+        "$type": "dimension"
+      }
+    }
+  }
+}

package/tokens/components/heading.json

@@ -0,0 +1,14 @@
+{
+  "heading": {
+    "gap": {
+      "$value": "{spacing.xs}",
+      "$type": "dimension"
+    },
+    "margin": {
+      "blockEnd": {
+        "$value": "{spacing.fluid.md}",
+        "$type": "dimension"
+      }
+    }
+  }
+}

package/tokens/components/hero.json

@@ -0,0 +1,56 @@
+{
+  "hero": {
+    "color": {
+      "background": {
+        "$value": "{color.background.default}",
+        "$type": "color"
+      },
+      "link": {
+        "$value": "{color.text.default}",
+        "$type": "color"
+      },
+      "text": {
+        "$value": "{color.text.default}",
+        "$type": "color"
+      }
+    },
+    "cover": {
+      "brightness": {
+        "$value": 0.3,
+        "$type": "number"
+      }
+    },
+    "gap": {
+      "$value": "{spacing.sm}",
+      "$type": "dimension"
+    },
+    "minHeight": {
+      "default": {
+        "$value": "25rem",
+        "$type": "dimension"
+      },
+      "tablet": {
+        "$value": "37.5rem",
+        "$type": "dimension"
+      },
+      "desktop": {
+        "$value": "50rem",
+        "$type": "dimension"
+      }
+    },
+    "padding": {
+      "$value": "{spacing.md} 0",
+      "$type": "string"
+    },
+    "title": {
+      "color": {
+        "$value": "{color.text.default}",
+        "$type": "color"
+      },
+      "fontSize": {
+        "$value": "{fontSize.heading.01}",
+        "$type": "dimension"
+      }
+    }
+  }
+}

package/tokens/components/item.json

@@ -0,0 +1,176 @@
+{
+  "item": {
+    "border": {
+      "radius": {
+        "$value": "{radius.surface}",
+        "$type": "dimension"
+      },
+      "style": {
+        "$value": "{border.style.normal}",
+        "$type": "strokeStyle"
+      },
+      "width": {
+        "$value": "{border.width.sm}",
+        "$type": "dimension"
+      }
+    },
+    "btn": {
+      "border": {
+        "width": {
+          "$value": "0",
+          "$type": "dimension"
+        }
+      },
+      "color": {
+        "background": {
+          "$value": "transparent",
+          "$type": "color"
+        },
+        "text": {
+          "$value": "{color.brand.default}",
+          "$type": "color"
+        }
+      },
+      "padding": {
+        "$value": "0",
+        "$type": "dimension"
+      },
+      "textDecoration": {
+        "default": {
+          "$value": "none",
+          "$type": "string"
+        },
+        "hover": {
+          "$value": "underline",
+          "$type": "string"
+        }
+      }
+    },
+    "color": {
+      "background": {
+        "$value": "{color.background.default}",
+        "$type": "color"
+      },
+      "border": {
+        "$value": "{color.border.default}",
+        "$type": "color"
+      },
+      "text": {
+        "default": {
+          "$value": "{color.text.default}",
+          "$type": "color"
+        },
+        "muted": {
+          "$value": "{color.text.muted}",
+          "$type": "color"
+        }
+      }
+    },
+    "gap": {
+      "$value": "{spacing.sm}",
+      "$type": "dimension"
+    },
+    "media": {
+      "color": {
+        "background": {
+          "$value": "{media.color.background}",
+          "$type": "color"
+        }
+      },
+      "order": {
+        "$value": -2,
+        "$type": "number"
+      },
+      "ratio": {
+        "$value": "{media.ratio}",
+        "$type": "string"
+      }
+    },
+    "metas": {
+      "border": {
+        "default": {
+          "$value": "{border.width.sm} {border.style.normal} {color.border.default}",
+          "$type": "string"
+        },
+        "end": {
+          "$value": "0",
+          "$type": "dimension"
+        },
+        "start": {
+          "$value": "0",
+          "$type": "dimension"
+        }
+      },
+      "color": {
+        "background": {
+          "$value": "{item.color.background}",
+          "$type": "color"
+        }
+      },
+      "fontSize": {
+        "$value": "{fontSize.2xs}",
+        "$type": "dimension"
+      },
+      "order": {
+        "$value": -1,
+        "$type": "number"
+      },
+      "padding": {
+        "inline": {
+          "$value": "{spacing.card}",
+          "$type": "dimension"
+        },
+        "block": {
+          "$value": "{spacing.card} 0",
+          "$type": "string"
+        }
+      }
+    },
+    "order":   {
+      "$value": "none",
+      "$type": "string"
+    },
+    "padding": {
+      "inline": {
+        "$value": "{spacing.card}",
+        "$type": "dimension"
+      },
+      "block": {
+        "$value": "{spacing.card}",
+        "$type": "dimension"
+      }
+    },
+    "shadow": {
+      "default": { 
+        "$value": "{shadow.sm}", 
+        "$type": "shadow" 
+      },
+      "hover": { 
+        "$value": "{shadow.md}", 
+        "$type": "shadow" 
+      }
+    },
+    "title": {
+      "color":  { 
+        "$value": "{color.text.default}", 
+        "$type": "color" 
+      },
+      "fontSize": {
+        "$value": "{fontSize.md}",
+        "$type": "dimension"
+      },
+      "fontWeight": {
+        "$value": "{fontWeight.heading}",
+        "$type": "fontWeight"
+      },
+      "lineHeight": {
+        "$value": "{lineHeight.heading}",
+        "$type": "number"
+      }
+    },
+    "transition": { 
+      "$value": "box-shadow var(--duration-normal) var(--easing-default)",
+      "$type": "string" 
+    }
+  }
+}

package/tokens/components/items.json

@@ -0,0 +1,20 @@
+{
+  "items": {
+    "cols": {
+      "$value": "auto-fill",
+      "$type": "string"
+    },
+    "gap": {
+      "$value": "{gap}",
+      "$type": "dimension"
+    },
+    "maxWidth": {
+      "$value": "100%",
+      "$type": "dimension"
+    },
+    "minWidth": {
+      "$value": "30ch",
+      "$type": "dimension"
+    }
+  }
+}

package/tokens/components/link.json

@@ -0,0 +1,24 @@
+{
+  "link": {
+    "color": {
+      "textDecoration": {
+        "default": {
+          "$value": "initial",
+          "$type": "color"
+        },
+        "hover": {
+          "$value": "transparent",
+          "$type": "color"
+        }
+      }
+    },
+    "textDecorationLine": {
+      "$value": "underline",
+      "$type": "string"
+    },
+    "transition": {
+      "$value": "{transition.color}",
+      "$type": "string"
+    }
+  }
+}

package/tokens/components/list.json

@@ -0,0 +1,36 @@
+{
+  "list": {
+    "item": {
+      "fontSize": {
+        "$value": "{fontSize.sm}",
+        "$type": "dimension"
+      },
+      "gap": {
+        "$value": "{spacing.2xs}",
+        "$type": "dimension"
+      },
+      "marker": {
+        "default": {
+          "$value": "'-'",
+          "$type": "string"
+        },
+        "gap": {
+          "$value": "{spacing.2xs}",
+          "$type": "dimension"
+        }
+      }
+    },
+    "label": {
+      "fontWeight": {
+        "$value": "{fontWeight.bold}",
+        "$type": "fontWeight"
+      },
+      "margin": {
+        "block": {
+          "$value": "{spacing.2xs}",
+          "$type": "dimension"
+        }
+      }
+    }
+  }
+}