@uncinq/component-tokens 1.9.1 → 1.9.3

package/dist/css/components/button.css

@@ -13,7 +13,7 @@
     --btn-color-border: var(--color-brand);
     --btn-color-border-hover: var(--color-brand-hover);
     --btn-color-text: var(--color-text-on-brand);
-    --btn-color-text-hover: var(--color-text-on-brand);
+    --btn-color-text-hover: var(--btn-color-text);
     --btn-color-text-decoration: transparent;
     --btn-color-text-decoration-hover: transparent;
     --btn-control-color-background: var(--color-background-muted);

package/dist/css/components/carousel.css

@@ -9,10 +9,10 @@
     --carousel-arrow-border-radius: var(--radius-pill);
     --carousel-arrow-color: var(--color-link);
     --carousel-arrow-color-background: transparent;
-    --carousel-arrow-color-background-hover: transparent;
+    --carousel-arrow-color-background-hover: var(--color-link);
     --carousel-arrow-color-border: var(--color-link);
     --carousel-arrow-color-border-hover: var(--color-link-hover);
-    --carousel-arrow-color-hover: var(--color-link-hover);
+    --carousel-arrow-color-hover: var(--color-background);
     --carousel-arrow-gap: var(--spacing-xs);
     --carousel-arrow-icon: var(--icon-arrow);
     --carousel-arrow-icon-size: var(--icon-size);

package/dist/css/components/details.css

@@ -6,6 +6,8 @@
 @layer tokens {
   :root {
     --details-border-radius: var(--radius-surface);
+    --details-border-style: var(--border-style-normal);
+    --details-border-width: var(--border-width-sm);
     --details-box-shadow: var(--shadow-sm);
     --details-box-shadow-hover: var(--shadow-md);
     --details-color-background: var(--color-background);
@@ -13,8 +15,13 @@
     --details-color-border-open: var(--color-border-hover);
     --details-color-text: var(--color-text);
     --details-icon: var(--icon-chevron);
+    --details-icon-open: var(--details-icon);
+    --details-icon-rotate-open: 180deg;
     --details-icon-size: var(--icon-size);
+    --details-icon-transition: rotate var(--duration-normal) var(--easing);
     --details-margin: var(--spacing-sm);
+    --details-content-align: start;
+    --details-content-font-size: var(--font-size-text);
     --details-content-padding-inline: var(--spacing-sm);
     --details-content-padding-block: var(--spacing-sm);
     --details-summary-font-family: var(--font-family-heading);
@@ -22,5 +29,6 @@
     --details-summary-font-weight: var(--font-weight-heading);
     --details-summary-padding-inline: var(--spacing-sm);
     --details-summary-padding-block: var(--spacing-sm);
+    --details-transition: var(--transition-normal);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinq/component-tokens",
-  "version": "1.9.1",
+  "version": "1.9.3",
   "description": "Framework-agnostic CSS design tokens — component layers.",
   "license": "MIT",
   "repository": {

package/tokens/components/button.json

@@ -41,7 +41,7 @@
           "$type": "color" 
         },
         "hover":   { 
-          "$value": "{color.text.onBrand}", 
+          "$value": "{btn.color.text.default}", 
           "$type": "color" 
         }
       },

package/tokens/components/carousel.json

@@ -23,7 +23,7 @@
           },
           "hover": {
             "$type": "color",
-            "$value": "transparent"
+            "$value": "{color.link.default}"
           }
         },
         "border": {
@@ -38,7 +38,7 @@
         },
         "hover": {
           "$type": "color",
-          "$value": "{color.link.hover}"
+          "$value": "{color.background}"
         }
       },
       "gap": {

package/tokens/components/details.json

@@ -2,8 +2,16 @@
   "details": {
     "border": {
       "radius":  {
-        "$value": "{radius.surface}", 
-        "$type": "dimension" 
+        "$value": "{radius.surface}",
+        "$type": "dimension"
+      },
+      "style":   {
+        "$value": "{border.style.normal}",
+        "$type": "strokeStyle"
+      },
+      "width":   {
+        "$value": "{border.width.sm}",
+        "$type": "dimension"
       }
     },
     "boxShadow": {
@@ -37,13 +45,27 @@
       }
     },
     "icon": {
-      "default": { 
-        "$value": "{icon.chevron}", 
-        "$type": "string" 
+      "default": {
+        "$value": "{icon.chevron}",
+        "$type": "string"
+      },
+      "open":    {
+        "$value": "{details.icon.default}",
+        "$type": "string"
+      },
+      "rotate": {
+        "open": {
+          "$value": "180deg",
+          "$type": "string"
+        }
       },
-      "size":    { 
-        "$value": "{icon.size}", 
-        "$type": "dimension" 
+      "size":    {
+        "$value": "{icon.size}",
+        "$type": "dimension"
+      },
+      "transition": {
+        "$value": "rotate {duration.normal} {easing.default}",
+        "$type": "string"
       }
     },
     "margin":  { 
@@ -51,6 +73,14 @@
       "$type": "dimension" 
     },
     "content": {
+      "align": {
+        "$value": "start",
+        "$type": "string"
+      },
+      "fontSize": {
+        "$value": "{fontSize.text}",
+        "$type": "dimension"
+      },
       "padding": {
         "inline": {
           "$value": "{spacing.sm}",
@@ -85,6 +115,10 @@
           "$type": "dimension"
         }
       }
+    },
+    "transition": {
+      "$value": "{transition.normal}",
+      "$type": "string"
     }
   }
 }