@uncinq/design-tokens 0.4.0 → 1.0.0

package/tokens/semantic/motion.json

@@ -0,0 +1,86 @@
+{
+  "duration": {
+    "fast": {
+      "$value": "150ms",
+      "$type": "duration"
+    },
+    "normal": {
+      "$value": "300ms",
+      "$type": "duration"
+    },
+    "slow": {
+      "$value": "600ms",
+      "$type": "duration"
+    }
+  },
+  "easing": {
+    "linear": {
+      "$value": "linear",
+      "$type": "string"
+    },
+    "default": {
+      "$value": "ease-in-out",
+      "$type": "string"
+    },
+    "in": {
+      "$value": "ease-in",
+      "$type": "string"
+    },
+    "out": {
+      "$value": "ease-out",
+      "$type": "string"
+    },
+    "out-circ": {
+      "$value": "cubic-bezier(0, 0.55, 0.45, 1)",
+      "$type": "string"
+    },
+    "out-expo": {
+      "$value": "cubic-bezier(0.16, 1, 0.3, 1)",
+      "$type": "string"
+    },
+    "out-back": {
+      "$value": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+      "$type": "string"
+    },
+    "bounce": {
+      "$value": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+      "$type": "string"
+    },
+    "spring": {
+      "$value": "linear(0, 0.006, 0.025 2.8%, 0.101, 0.197, 0.325, 0.474, 0.638, 0.806, 0.962, 1.065, 1.12, 1.14, 1.12 30.9%, 1.034, 0.997, 0.986, 0.998, 1)",
+      "$type": "string"
+    }
+  },
+  "transition": {
+    "fast": {
+      "$value": "all {duration.fast} {easing.default}",
+      "$type": "string"
+    },
+    "normal": {
+      "$value": "all {duration.normal} {easing.default}",
+      "$type": "string"
+    },
+    "slow": {
+      "$value": "all {duration.slow} {easing.default}",
+      "$type": "string"
+    },
+    "opacity": {
+      "$value": "opacity {duration.normal} {easing.default}",
+      "$type": "string"
+    },
+    "transform": {
+      "$value": "transform {duration.normal} {easing.default}",
+      "$type": "string"
+    },
+    "property": {
+      "color": {
+        "$value": "color, background-color, border-color, outline-color, fill, stroke, text-decoration",
+        "$type": "string"
+      }
+    },
+    "color": {
+      "$value": "color {duration.normal} {easing.default}, background-color {duration.normal} {easing.default}, border-color {duration.normal} {easing.default}, outline-color {duration.normal} {easing.default}, fill {duration.normal} {easing.default}, stroke {duration.normal} {easing.default}, text-decoration {duration.normal} {easing.default}",
+      "$type": "string"
+    }
+  }
+}

package/tokens/semantic/opacity.json

@@ -0,0 +1,28 @@
+{
+  "opacity": {
+    "backdrop": {
+      "$type": "number",
+      "$value": 0.5
+    },
+    "disabled": {
+      "$type": "number",
+      "$value": 0.5
+    },
+    "hover": {
+      "$type": "number",
+      "$value": 0.75
+    },
+    "overlay": {
+      "$type": "number",
+      "$value": 0.75
+    },
+    "shadow": {
+      "$type": "number",
+      "$value": 0.1
+    },
+    "subtle": {
+      "$type": "number",
+      "$value": 0.35
+    }
+  }
+}

package/tokens/semantic/radius.json

@@ -0,0 +1,48 @@
+{
+  "radius": {
+    "2xs": {
+      "$value": "{size.2}",
+      "$type": "dimension"
+    },
+    "xs": {
+      "$value": "{size.4}",
+      "$type": "dimension"
+    },
+    "sm": {
+      "$value": "{size.8}",
+      "$type": "dimension"
+    },
+    "md": {
+      "$value": "{size.12}",
+      "$type": "dimension"
+    },
+    "lg": {
+      "$value": "{size.16}",
+      "$type": "dimension"
+    },
+    "xl": {
+      "$value": "{size.24}",
+      "$type": "dimension"
+    },
+    "2xl": {
+      "$value": "{size.32}",
+      "$type": "dimension"
+    },
+    "none": {
+      "$value": "0px",
+      "$type": "dimension"
+    },
+    "control": {
+      "$value": "{radius.sm}",
+      "$type": "dimension"
+    },
+    "surface": {
+      "$value": "{radius.md}",
+      "$type": "dimension"
+    },
+    "pill": {
+      "$value": "9999px",
+      "$type": "dimension"
+    }
+  }
+}

package/tokens/semantic/ratio.json

@@ -0,0 +1,40 @@
+{
+  "ratio": {
+    "cinema": {
+      "$type": "string",
+      "$value": "21 / 9"
+    },
+    "hero": {
+      "$type": "string",
+      "$value": "4 / 1"
+    },
+    "landscape": {
+      "$type": "string",
+      "$value": "4 / 3"
+    },
+    "photography": {
+      "$type": "string",
+      "$value": "3 / 2"
+    },
+    "portrait": {
+      "$type": "string",
+      "$value": "3 / 4"
+    },
+    "print": {
+      "$type": "string",
+      "$value": "5 / 4"
+    },
+    "square": {
+      "$type": "string",
+      "$value": "1 / 1"
+    },
+    "story": {
+      "$type": "string",
+      "$value": "9 / 16"
+    },
+    "video": {
+      "$type": "string",
+      "$value": "16 / 9"
+    }
+  }
+}

package/tokens/semantic/shadow.json

@@ -0,0 +1,18 @@
+{
+  "shadow": {
+    "control": {
+      "default": {
+        "$value": "{shadow.none}",
+        "$type": "shadow"
+      },
+      "hover": {
+        "$value": "{shadow.none}",
+        "$type": "shadow"
+      }
+    },
+    "surface": {
+      "$value": "{shadow.sm}",
+      "$type": "shadow"
+    }
+  }
+}

package/tokens/semantic/size.json

@@ -0,0 +1,24 @@
+{
+  "size": {
+    "tablet": {
+      "$value": "{size.768}",
+      "$type": "dimension"
+    },
+    "tabletWide": {
+      "$value": "{size.1024}",
+      "$type": "dimension"
+    },
+    "laptop": {
+      "$value": "{size.1440}",
+      "$type": "dimension"
+    },
+    "desktop": {
+      "$value": "{size.1600}",
+      "$type": "dimension"
+    },
+    "desktopWide": {
+      "$value": "{size.1920}",
+      "$type": "dimension"
+    }
+  }
+}

package/tokens/semantic/spacing.json

@@ -0,0 +1,90 @@
+{
+  "spacing": {
+    "2xs": {
+      "$value": "{size.5}",
+      "$type": "dimension"
+    },
+    "xs": {
+      "$value": "{size.10}",
+      "$type": "dimension"
+    },
+    "sm": {
+      "$value": "{size.20}",
+      "$type": "dimension"
+    },
+    "md": {
+      "$value": "{size.30}",
+      "$type": "dimension"
+    },
+    "lg": {
+      "$value": "{size.40}",
+      "$type": "dimension"
+    },
+    "xl": {
+      "$value": "{size.60}",
+      "$type": "dimension"
+    },
+    "2xl": {
+      "$value": "{size.100}",
+      "$type": "dimension"
+    },
+    "3xl": {
+      "$value": "{size.150}",
+      "$type": "dimension"
+    },
+    "fluid": {
+      "2xs": {
+        "$value": "clamp(0.3125rem, 0.2232rem + 0.4464vw, 0.625rem)",
+        "$type": "string"
+      },
+      "xs": {
+        "$value": "clamp(0.625rem, 0.4464rem + 0.8929vw, 1.25rem)",
+        "$type": "string"
+      },
+      "sm": {
+        "$value": "clamp(1.25rem, 0.8929rem + 1.7857vw, 2.5rem)",
+        "$type": "string"
+      },
+      "md": {
+        "$value": "clamp(1.875rem, 1.3393rem + 2.6786vw, 3.75rem)",
+        "$type": "string"
+      },
+      "lg": {
+        "$value": "clamp(2.5rem, 1.7857rem + 3.5714vw, 5rem)",
+        "$type": "string"
+      },
+      "xl": {
+        "$value": "clamp(3.125rem, 2.2321rem + 4.4643vw, 6.25rem)",
+        "$type": "string"
+      },
+      "2xl": {
+        "$value": "clamp(3.75rem, 2.6786rem + 5.3571vw, 7.5rem)",
+        "$type": "string"
+      }
+    },
+    "card": {
+      "$value": "{spacing.sm}",
+      "$type": "dimension"
+    },
+    "control": {
+      "$value": "{spacing.xs}",
+      "$type": "dimension"
+    },
+    "heading": {
+      "$value": "{spacing.fluid.sm}",
+      "$type": "string"
+    },
+    "section": {
+      "$value": "{spacing.fluid.2xl}",
+      "$type": "string"
+    },
+    "surface": {
+      "$value": "{spacing.fluid.sm}",
+      "$type": "string"
+    },
+    "typography": {
+      "$value": "{spacing.fluid.xs}",
+      "$type": "string"
+    }
+  }
+}

package/tokens/semantic/typography.json

@@ -0,0 +1,174 @@
+{
+  "fontFamily": {
+    "code": {
+      "$type": "fontFamily",
+      "$value": "{fontFamily.mono}"
+    },
+    "heading": {
+      "$type": "fontFamily",
+      "$value": "{fontFamily.sans}"
+    },
+    "text": {
+      "$type": "fontFamily",
+      "$value": "{fontFamily.sans}"
+    }
+  },
+  "fontSize": {
+    "2xs": {
+      "$type": "dimension",
+      "$value": "{size.12}"
+    },
+    "xs": {
+      "$type": "dimension",
+      "$value": "{size.14}"
+    },
+    "sm": {
+      "$type": "dimension",
+      "$value": "{size.16}"
+    },
+    "md": {
+      "$type": "dimension",
+      "$value": "{size.18}"
+    },
+    "lg": {
+      "$type": "dimension",
+      "$value": "{size.24}"
+    },
+    "xl": {
+      "$type": "dimension",
+      "$value": "{size.48}"
+    },
+    "2xl": {
+      "$type": "dimension",
+      "$value": "{size.64}"
+    },
+    "display": {
+      "$type": "dimension",
+      "$value": "{size.96}"
+    },
+    "fluid": {
+      "2xs": {
+        "$type": "string",
+        "$value": "clamp(0.625rem, 0.5893rem + 0.1786vw, 0.75rem)"
+      },
+      "xs": {
+        "$type": "string",
+        "$value": "clamp(0.75rem, 0.7143rem + 0.1786vw, 0.875rem)"
+      },
+      "sm": {
+        "$type": "string",
+        "$value": "clamp(0.875rem, 0.8393rem + 0.1786vw, 1rem)"
+      },
+      "md": {
+        "$type": "string",
+        "$value": "clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem)"
+      },
+      "lg": {
+        "$type": "string",
+        "$value": "clamp(1.125rem, 1.0179rem + 0.5357vw, 1.5rem)"
+      },
+      "xl": {
+        "$type": "string",
+        "$value": "clamp(1.5rem, 1.0714rem + 2.1429vw, 3rem)"
+      },
+      "2xl": {
+        "$type": "string",
+        "$value": "clamp(3rem, 2.7143rem + 1.4286vw, 4rem)"
+      },
+      "display": {
+        "$type": "string",
+        "$value": "clamp(4rem, 3.4286rem + 2.8571vw, 6rem)"
+      }
+    },
+    "heading": {
+      "01": {
+        "$type": "string",
+        "$value": "{fontSize.fluid.xl}"
+      },
+      "02": {
+        "$type": "string",
+        "$value": "{fontSize.fluid.lg}"
+      },
+      "03": {
+        "$type": "string",
+        "$value": "{fontSize.fluid.md}"
+      },
+      "04": {
+        "$type": "string",
+        "$value": "{fontSize.fluid.sm}"
+      },
+      "05": {
+        "$type": "string",
+        "$value": "{fontSize.fluid.sm}"
+      },
+      "06": {
+        "$type": "string",
+        "$value": "{fontSize.fluid.sm}"
+      }
+    },
+    "small": {
+      "$type": "string",
+      "$value": "{fontSize.fluid.sm}"
+    },
+    "text": {
+      "$type": "string",
+      "$value": "{fontSize.fluid.md}"
+    }
+  },
+  "fontWeight": {
+    "control": {
+      "$type": "fontWeight",
+      "$value": "{fontWeight.medium}"
+    },
+    "heading": {
+      "$type": "fontWeight",
+      "$value": "{fontWeight.bold}"
+    },
+    "text": {
+      "$type": "fontWeight",
+      "$value": "{fontWeight.normal}"
+    }
+  },
+  "letterSpacing": {
+    "none": {
+      "$type": "dimension",
+      "$value": "0em"
+    },
+    "sm": {
+      "$type": "dimension",
+      "$value": "0.025em"
+    },
+    "md": {
+      "$type": "dimension",
+      "$value": "0.05em"
+    },
+    "lg": {
+      "$type": "dimension",
+      "$value": "0.1em"
+    },
+    "xl": {
+      "$type": "dimension",
+      "$value": "0.2em"
+    }
+  },
+  "lineHeight": {
+    "heading": {
+      "$type": "number",
+      "$value": "{lineHeight.tight}"
+    },
+    "text": {
+      "$type": "number",
+      "$value": "{lineHeight.normal}"
+    }
+  },
+  "maxWidth": {
+    "heading": {
+      "$type": "dimension",
+      "$value": "50ch"
+    },
+    "paragraph": {
+      "$type": "dimension",
+      "$value": "70ch"
+    }
+  }
+}

package/tokens/semantic/z-index.json

@@ -0,0 +1,40 @@
+{
+  "zIndex": {
+    "below": {
+      "$type": "number",
+      "$value": -1
+    },
+    "base": {
+      "$type": "number",
+      "$value": 0
+    },
+    "raised": {
+      "$type": "number",
+      "$value": 10
+    },
+    "dropdown": {
+      "$type": "number",
+      "$value": 100
+    },
+    "sticky": {
+      "$type": "number",
+      "$value": 200
+    },
+    "drawer": {
+      "$type": "number",
+      "$value": 300
+    },
+    "modal": {
+      "$type": "number",
+      "$value": 400
+    },
+    "toast": {
+      "$type": "number",
+      "$value": 500
+    },
+    "tooltip": {
+      "$type": "number",
+      "$value": 600
+    }
+  }
+}

package/tokens/primitive/blur.css

@@ -1,10 +0,0 @@
-/* primitive/blur.css */
-@layer config {
-  :root {
-    --blur-xs:  2px;
-    --blur-sm:  4px;
-    --blur-md:  8px;
-    --blur-lg:  16px;
-    --blur-xl:  32px;
-  }
-}

package/tokens/primitive/font.css

@@ -1,32 +0,0 @@
-/* primitive/font.css */
-@layer config {
-  :root {
-    /* Families */
-    --font-family-mono:  ui-monospace, monospace;
-    --font-family-sans:  system-ui, sans-serif;
-    --font-family-serif: Georgia, serif;
-
-    /* Weights */
-    --font-weight-thin:     100;
-    --font-weight-light:    300;
-    --font-weight-normal:   400;
-    --font-weight-medium:   500;
-    --font-weight-semibold: 600;
-    --font-weight-bold:     700;
-    --font-weight-black:    900;
-
-    /* Line heights */
-    --line-height-none:    1;
-    --line-height-tight:   1.1;
-    --line-height-snug:    1.25;
-    --line-height-normal:  1.5;
-    --line-height-relaxed: 1.75;
-    --line-height-loose:   2;
-
-    /* Text decoration */
-    --text-decoration-none:      none;
-    --text-decoration-underline: underline;
-    --text-decoration-offset:    0.25rem;
-    --text-decoration-thickness: 1px;
-  }
-}

package/tokens/primitive/opacity.css

@@ -1,12 +0,0 @@
-/* primitive/opacity.css */
-@layer config {
-  :root {
-    --opacity-0:   0;
-    --opacity-10:  0.1;
-    --opacity-25:  0.25;
-    --opacity-50:  0.5;
-    --opacity-75:  0.75;
-    --opacity-90:  0.9;
-    --opacity-100: 1;
-  }
-}

package/tokens/primitive/shadow.css

@@ -1,16 +0,0 @@
-/* primitive/shadow.css */
-@layer config {
-  :root {
-    --shadow-none: none;
-
-    /* Directional (top-left light source) */
-    --shadow-sm: 0 1px 2px 0 var(--color-shadow-light);
-    --shadow-md: 0 4px 6px -1px var(--color-shadow-normal), 0 2px 4px -2px var(--color-shadow-normal);
-    --shadow-lg: 0 10px 15px -3px var(--color-shadow-normal), 0 4px 6px -4px var(--color-shadow-normal);
-
-    /* Centered (ambient glow) */
-    --shadow-center-sm: 0 0 2px  2px  var(--color-shadow-light);
-    --shadow-center-md: 0 0 5px  5px  var(--color-shadow-light);
-    --shadow-center-lg: 0 0 10px 10px var(--color-shadow-light);
-  }
-}

package/tokens/semantic/border.css

@@ -1,15 +0,0 @@
-/* semantic/border.css */
-@layer config {
-  :root {
-    /* Styles */
-    --border-style-dotted: dotted;
-    --border-style-dashed: dashed;
-    --border-style-solid:  solid;
-
-    /* Widths */
-    --border-width-none:   0px;
-    --border-width-normal: 1px;
-    --border-width-large:  2px;
-    --border-width-xl:     4px;
-  }
-}