@uncinq/design-tokens 1.0.3 → 1.1.0

package/tokens/primitive/size.json

@@ -108,10 +108,18 @@
       "$value": "2rem",
       "$type": "dimension"
     },
+    "36": {
+      "$value": "2.25rem",
+      "$type": "dimension"
+    },
     "40": {
       "$value": "2.5rem",
       "$type": "dimension"
     },
+    "44": {
+      "$value": "2.75rem",
+      "$type": "dimension"
+    },
     "48": {
       "$value": "3rem",
       "$type": "dimension"
@@ -144,12 +152,12 @@
       "$value": "4.5rem",
       "$type": "dimension"
     },
-    "80": {
-      "$value": "5rem",
+    "76": {
+      "$value": "4.75rem",
       "$type": "dimension"
     },
-    "88": {
-      "$value": "5.5rem",
+    "80": {
+      "$value": "5rem",
       "$type": "dimension"
     },
     "96": {
@@ -160,10 +168,26 @@
       "$value": "6.25rem",
       "$type": "dimension"
     },
+    "112": {
+      "$value": "7rem",
+      "$type": "dimension"
+    },
+    "128": {
+      "$value": "8rem",
+      "$type": "dimension"
+    },
+    "144": {
+      "$value": "9rem",
+      "$type": "dimension"
+    },
     "150": {
       "$value": "9.375rem",
       "$type": "dimension"
     },
+    "160": {
+      "$value": "10rem",
+      "$type": "dimension"
+    },
     "768": {
       "$value": "48rem",
       "$type": "dimension"

package/tokens/semantic/border.json

@@ -3,7 +3,7 @@
     "style": {
       "normal": {
         "$value": "solid",
-        "$type": "string"
+        "$type": "strokeStyle"
       }
     },
     "width": {

package/tokens/semantic/color.json

@@ -29,8 +29,7 @@
     "background": {
       "default": {
         "$value": "{color.white}",
-        "$type": "color",
-        "$mods": { "dark": "{color.gray.950}" }
+        "$type": "color"
       },
       "accent": {
         "$value": "{color.accent.default}",
@@ -42,19 +41,16 @@
       },
       "media": {
         "$value": "{color.gray.200}",
-        "$type": "color",
-        "$mods": { "dark": "{color.gray.800}" }
+        "$type": "color"
       },
       "muted": {
         "default": {
           "$value": "{color.gray.100}",
-          "$type": "color",
-          "$mods": { "dark": "{color.gray.900}" }
+          "$type": "color"
         },
         "hover": {
           "$value": "{color.gray.200}",
-          "$type": "color",
-          "$mods": { "dark": "{color.gray.800}" }
+          "$type": "color"
         }
       },
       "surface": {
@@ -65,8 +61,7 @@
     "border": {
       "default": {
         "$value": "{color.gray.200}",
-        "$type": "color",
-        "$mods": { "dark": "{color.gray.800}" }
+        "$type": "color"
       },
       "hover": {
         "$value": "{color.gray.500}",
@@ -137,8 +132,7 @@
     },
     "heading": {
       "$value": "{color.black}",
-      "$type": "color",
-      "$mods": { "dark": "{color.white}" }
+      "$type": "color"
     },
     "info": {
       "default": {
@@ -229,8 +223,7 @@
     "shadow": {
       "default": {
         "$value": "{color.black}",
-        "$type": "color",
-        "$mods": { "dark": "{color.white}" }
+        "$type": "color"
       },
       "normal": {
         "$value": "oklch(from {color.shadow.default} l c h / {opacity.shadow})",
@@ -258,23 +251,19 @@
     "text": {
       "default": {
         "$value": "{color.gray.900}",
-        "$type": "color",
-        "$mods": { "dark": "{color.gray.200}" }
+        "$type": "color"
       },
       "disabled": {
         "$value": "{color.gray.300}",
-        "$type": "color",
-        "$mods": { "dark": "{color.gray.600}" }
+        "$type": "color"
       },
       "hover": {
         "$value": "{color.gray.700}",
-        "$type": "color",
-        "$mods": { "dark": "{color.gray.300}" }
+        "$type": "color"
       },
       "muted": {
         "$value": "{color.gray.500}",
-        "$type": "color",
-        "$mods": { "dark": "{color.gray.400}" }
+        "$type": "color"
       },
       "onAccent": {
         "$value": "{color.white}",

package/tokens/semantic/focus.json

@@ -13,7 +13,7 @@
       },
       "style": {
         "$value": "solid",
-        "$type": "string"
+        "$type": "strokeStyle"
       },
       "width": {
         "$value": "1px",

package/tokens/semantic/form.json

@@ -12,13 +12,22 @@
     },
     "color": {
       "accent": {
-        "$value": "{color.black}",
-        "$type": "color"
+        "default": {
+          "$value": "{color.accent.default}",
+          "$type": "color"
+        },
+        "hover": {
+          "$value": "{color.accent.hover}",
+          "$type": "color"
+        },
+        "muted": {
+          "$value": "{color.accent.muted}",
+          "$type": "color"
+        }
       },
       "background": {
         "$value": "{color.white}",
-        "$type": "color",
-        "$mods": { "dark": "{color.gray.900}" }
+        "$type": "color"
       },
       "border": {
         "default": {
@@ -31,8 +40,14 @@
         }
       },
       "text": {
-        "$value": "{color.text.default}",
-        "$type": "color"
+        "default": {
+          "$value": "{color.text.default}",
+          "$type": "color"
+        },
+        "onAccent": {
+          "$value": "{color.text.onAccent}",
+          "$type": "color"
+        }
       }
     },
     "padding": {
@@ -90,7 +105,7 @@
       },
 
       "text": {
-        "$value": "{form.color.text}",
+        "$value": "{form.color.text.default}",
         "$type": "color"
       }
     },
@@ -111,8 +126,14 @@
       },
 
       "padding": {
-        "$value": "{size.8} {size.12}",
-        "$type": "string"
+        "block": {
+          "$value": "{size.6}",
+          "$type": "dimension"
+        },
+        "inline": {
+          "$value": "{size.10}",
+          "$type": "dimension"
+        }
       }
     }
   },
@@ -153,7 +174,7 @@
       },
 
       "text": {
-        "$value": "{form.color.text}",
+        "$value": "{form.color.text.default}",
         "$type": "color"
       }
     },
@@ -205,7 +226,7 @@
       },
 
       "text": {
-        "$value": "{form.color.text}",
+        "$value": "{form.color.text.default}",
         "$type": "color"
       }
     },
@@ -234,7 +255,7 @@
   "label": {
     "color": {
       "text": {
-        "$value": "{form.color.text}",
+        "$value": "{form.color.text.default}",
         "$type": "color"
       }
     },
@@ -262,7 +283,7 @@
 
     "textTransform": {
       "$value": "uppercase",
-      "$type": "string"
+      "$type": "textCase"
     }
   },
 
@@ -292,7 +313,7 @@
 
   "checkable": {
     "color": {
-      "$value": "{form.color.accent}",
+      "$value": "{form.color.accent.default}",
       "$type": "color"
     },
 
@@ -454,7 +475,7 @@
       },
 
       "color": {
-        "$value": "{form.color.accent}",
+        "$value": "{form.color.accent.default}",
         "$type": "color"
       },
 
@@ -514,7 +535,7 @@
     "thumb": {
       "color": {
         "default": {
-          "$value": "{form.color.accent}",
+          "$value": "{form.color.accent.default}",
           "$type": "color"
         },
         "checked": {
@@ -536,7 +557,7 @@
           "$type": "color"
         },
         "checked": {
-          "$value": "{form.color.accent}",
+          "$value": "{form.color.accent.default}",
           "$type": "color"
         }
       }

package/tokens/semantic/grid.json

@@ -5,7 +5,7 @@
   },
   "gap": {
     "$value": "{spacing.md}",
-    "$type": "string"
+    "$type": "dimension"
   },
   "span": {
     "full": {

package/tokens/semantic/motion.json

@@ -14,41 +14,41 @@
     }
   },
   "easing": {
-    "linear": {
-      "$value": "linear",
-      "$type": "string"
-    },
     "default": {
-      "$value": "ease-in-out",
-      "$type": "string"
+      "$value": "{easing.inOut}",
+      "$type": "cubicBezier"
+    },
+    "linear": {
+      "$value": [0, 0, 1, 1],
+      "$type": "cubicBezier"
     },
     "in": {
-      "$value": "ease-in",
-      "$type": "string"
+      "$value": [0.42, 0, 1, 1],
+      "$type": "cubicBezier"
     },
     "out": {
-      "$value": "ease-out",
-      "$type": "string"
+      "$value": [0, 0, 0.58, 1],
+      "$type": "cubicBezier"
     },
-    "out-circ": {
-      "$value": "cubic-bezier(0, 0.55, 0.45, 1)",
-      "$type": "string"
+    "inOut": {
+      "$value": [0.42, 0, 0.58, 1],
+      "$type": "cubicBezier"
     },
-    "out-expo": {
-      "$value": "cubic-bezier(0.16, 1, 0.3, 1)",
-      "$type": "string"
+    "outCirc": {
+      "$value": [0, 0.55, 0.45, 1],
+      "$type": "cubicBezier"
     },
-    "out-back": {
-      "$value": "cubic-bezier(0.34, 1.56, 0.64, 1)",
-      "$type": "string"
+    "outExpo": {
+      "$value": [0.16, 1, 0.3, 1],
+      "$type": "cubicBezier"
     },
-    "bounce": {
-      "$value": "cubic-bezier(0.165, 0.84, 0.44, 1)",
-      "$type": "string"
+    "outBack": {
+      "$value": [0.34, 1.56, 0.64, 1],
+      "$type": "cubicBezier"
     },
-    "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"
+    "bounce": {
+      "$value": [0.165, 0.84, 0.44, 1],
+      "$type": "cubicBezier"
     }
   },
   "transition": {

package/tokens/semantic/ratio.json

@@ -24,6 +24,10 @@
       "$type": "string",
       "$value": "5 / 4"
     },
+    "social": {
+      "$type": "string",
+      "$value": "4 / 5"
+    },
     "square": {
       "$type": "string",
       "$value": "1 / 1"

package/tokens/semantic/spacing.json

@@ -35,31 +35,31 @@
     "fluid": {
       "2xs": {
         "$value": "clamp(0.3125rem, 0.2232rem + 0.4464vw, 0.625rem)",
-        "$type": "string"
+        "$type": "dimension"
       },
       "xs": {
         "$value": "clamp(0.625rem, 0.4464rem + 0.8929vw, 1.25rem)",
-        "$type": "string"
+        "$type": "dimension"
       },
       "sm": {
         "$value": "clamp(1.25rem, 0.8929rem + 1.7857vw, 2.5rem)",
-        "$type": "string"
+        "$type": "dimension"
       },
       "md": {
         "$value": "clamp(1.875rem, 1.3393rem + 2.6786vw, 3.75rem)",
-        "$type": "string"
+        "$type": "dimension"
       },
       "lg": {
         "$value": "clamp(2.5rem, 1.7857rem + 3.5714vw, 5rem)",
-        "$type": "string"
+        "$type": "dimension"
       },
       "xl": {
         "$value": "clamp(3.125rem, 2.2321rem + 4.4643vw, 6.25rem)",
-        "$type": "string"
+        "$type": "dimension"
       },
       "2xl": {
         "$value": "clamp(3.75rem, 2.6786rem + 5.3571vw, 7.5rem)",
-        "$type": "string"
+        "$type": "dimension"
       }
     },
     "card": {
@@ -72,19 +72,19 @@
     },
     "heading": {
       "$value": "{spacing.fluid.sm}",
-      "$type": "string"
+      "$type": "dimension"
     },
     "section": {
       "$value": "{spacing.fluid.2xl}",
-      "$type": "string"
+      "$type": "dimension"
     },
     "surface": {
       "$value": "{spacing.fluid.sm}",
-      "$type": "string"
+      "$type": "dimension"
     },
     "typography": {
       "$value": "{spacing.fluid.xs}",
-      "$type": "string"
+      "$type": "dimension"
     }
   }
 }

package/tokens/semantic/typography.json

@@ -48,70 +48,70 @@
     },
     "fluid": {
       "2xs": {
-        "$type": "string",
+        "$type": "dimension",
         "$value": "clamp(0.625rem, 0.5893rem + 0.1786vw, 0.75rem)"
       },
       "xs": {
-        "$type": "string",
+        "$type": "dimension",
         "$value": "clamp(0.75rem, 0.7143rem + 0.1786vw, 0.875rem)"
       },
       "sm": {
-        "$type": "string",
+        "$type": "dimension",
         "$value": "clamp(0.875rem, 0.8393rem + 0.1786vw, 1rem)"
       },
       "md": {
-        "$type": "string",
+        "$type": "dimension",
         "$value": "clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem)"
       },
       "lg": {
-        "$type": "string",
+        "$type": "dimension",
         "$value": "clamp(1.125rem, 1.0179rem + 0.5357vw, 1.5rem)"
       },
       "xl": {
-        "$type": "string",
+        "$type": "dimension",
         "$value": "clamp(1.5rem, 1.0714rem + 2.1429vw, 3rem)"
       },
       "2xl": {
-        "$type": "string",
+        "$type": "dimension",
         "$value": "clamp(3rem, 2.7143rem + 1.4286vw, 4rem)"
       },
       "display": {
-        "$type": "string",
+        "$type": "dimension",
         "$value": "clamp(4rem, 3.4286rem + 2.8571vw, 6rem)"
       }
     },
     "heading": {
       "01": {
-        "$type": "string",
+        "$type": "dimension",
         "$value": "{fontSize.fluid.xl}"
       },
       "02": {
-        "$type": "string",
+        "$type": "dimension",
         "$value": "{fontSize.fluid.lg}"
       },
       "03": {
-        "$type": "string",
+        "$type": "dimension",
         "$value": "{fontSize.fluid.md}"
       },
       "04": {
-        "$type": "string",
+        "$type": "dimension",
         "$value": "{fontSize.fluid.sm}"
       },
       "05": {
-        "$type": "string",
+        "$type": "dimension",
         "$value": "{fontSize.fluid.sm}"
       },
       "06": {
-        "$type": "string",
+        "$type": "dimension",
         "$value": "{fontSize.fluid.sm}"
       }
     },
     "small": {
-      "$type": "string",
+      "$type": "dimension",
       "$value": "{fontSize.fluid.sm}"
     },
     "text": {
-      "$type": "string",
+      "$type": "dimension",
       "$value": "{fontSize.fluid.md}"
     }
   },

package/tokens/themes/dark.json

@@ -0,0 +1,70 @@
+{
+  "color": {
+    "background": {
+      "default": {
+        "$value": "{color.gray.950}",
+        "$type": "color"
+      },
+      "disabled": {
+        "$value": "{color.gray.900}",
+        "$type": "color"
+      },
+      "media": {
+        "$value": "{color.gray.800}",
+        "$type": "color"
+      },
+      "muted": {
+        "default": {
+          "$value": "{color.gray.900}",
+          "$type": "color"
+        },
+        "hover": {
+          "$value": "{color.gray.800}",
+          "$type": "color"
+        }
+      }
+    },
+    "border": {
+      "default": {
+        "$value": "{color.gray.800}",
+        "$type": "color"
+      }
+    },
+    "heading": {
+      "$value": "{color.white}",
+      "$type": "color"
+    },
+    "shadow": {
+      "default": {
+        "$value": "{color.white}",
+        "$type": "color"
+      }
+    },
+    "text": {
+      "default": {
+        "$value": "{color.gray.200}",
+        "$type": "color"
+      },
+      "disabled": {
+        "$value": "{color.gray.600}",
+        "$type": "color"
+      },
+      "hover": {
+        "$value": "{color.gray.300}",
+        "$type": "color"
+      },
+      "muted": {
+        "$value": "{color.gray.400}",
+        "$type": "color"
+      }
+    }
+  },
+  "form": {
+    "color": {
+      "background": {
+        "$value": "{color.gray.900}",
+        "$type": "color"
+      }
+    }
+  }
+}