@uncinq/design-tokens 1.4.4 → 1.6.0

package/README.md

@@ -139,8 +139,8 @@ The property mirrors the CSS property name — `background-color`, `border-color
 | `easing` | Timing functions | `--easing-bounce` |
 | `transition` | Shorthand transitions | `--transition-normal`, `--transition-color` |
 | `ratio` | Aspect ratios | `--ratio-video` |
-| `fluid-text` | Responsive fluid type scale (Utopia) | `--fluid-text-sm`, `--fluid-text-xl` |
-| `fluid-spacing` | Responsive fluid spacing scale (Utopia) | `--fluid-spacing-sm`, `--fluid-spacing-lg` |
+| `font-size-fluid` | Responsive fluid type scale (Utopia) | `--font-size-fluid-sm`, `--font-size-fluid-xl` |
+| `spacing-fluid` | Responsive fluid spacing scale (Utopia) | `--spacing-fluid-sm`, `--spacing-fluid-lg` |
 | `focus` | Focus ring tokens | `--focus-color`, `--focus-outline-width` |
 | `opacity` | Opacity values | `--opacity-disabled`, `--opacity-overlay` |
 | `span` | Grid column spans | `--span-full`, `--span-half` |
@@ -289,7 +289,6 @@ Used to ensure contrast when a color is the background:
 | `--color-success` | green-600 | Confirmations |
 | `--color-warning` | amber-500 | Warnings — use with `--color-text-on-warning` |
 | `--color-info` | blue-600 | Informational |
-| `--color-secondary` | gray-500 | De-emphasized UI |
 | `--color-dark` | gray-900 | Dark surfaces |
 | `--color-light` | gray-200 | Light surfaces |
 

package/dist/css/semantic/color.css

@@ -39,6 +39,7 @@
     --color-heading: var(--color-black);
     --color-highlight: var(--color-yellow-100);
     --color-highlight-hover: var(--color-yellow-200);
+    --color-highlight-muted: var(--color-yellow-100);
     --color-highlight-strong: var(--color-yellow-900);
     --color-info: var(--color-blue-600);
     --color-info-hover: var(--color-blue-700);

package/dist/css/semantic/form.css

@@ -53,13 +53,16 @@
     --label-color-text: var(--form-color-text);
     --label-font-size: var(--font-size-xs);
     --label-font-weight: var(--font-weight-medium);
+    --label-line-height: var(--line-height-snug);
     --label-padding-inline: 0;
     --label-padding-block: var(--spacing-2xs);
+    --label-text-align: start;
     --label-text-transform: uppercase;
     --help-color-text: var(--color-text-muted);
     --help-font-size: var(--font-size-xs);
     --help-font-weight: var(--font-weight-normal);
     --help-margin: 0;
+    --help-text-align: start;
     --checkable-color: var(--form-color-accent);
     --checkable-size: 1.25em;
     --checkbox-border-radius: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinq/design-tokens",
-  "version": "1.4.4",
+  "version": "1.6.0",
   "description": "Framework-agnostic design tokens — JSON DTCG primitive and semantic — CSS custom properties.",
   "license": "MIT",
   "repository": {

package/tokens/semantic/color.json

@@ -153,6 +153,10 @@
         "$value": "{color.yellow.200}",
         "$type": "color"
       },
+      "muted": {
+        "$value": "{color.yellow.100}",
+        "$type": "color"
+      },
       "strong": {
         "$value": "{color.yellow.900}",
         "$type": "color"

package/tokens/semantic/form.json

@@ -270,6 +270,11 @@
       "$type": "fontWeight"
     },
 
+    "lineHeight": {
+      "$value": "{lineHeight.snug}",
+      "$type": "dimension"
+    },
+
     "padding": {
       "inline": {
         "$value": "0",
@@ -281,9 +286,14 @@
       }
     },
 
+    "textAlign": {
+      "$value": "start",
+      "$type": "string"
+    },
+
     "textTransform": {
       "$value": "uppercase",
-      "$type": "textCase"
+      "$type": "string"
     }
   },
 
@@ -308,6 +318,11 @@
     "margin": {
       "$value": "0",
       "$type": "dimension"
+    },
+
+    "textAlign": {
+      "$value": "start",
+      "$type": "string"
     }
   },