@uncinq/component-tokens 0.3.0 → 1.0.0

package/tokens/components/modal.json

@@ -0,0 +1,62 @@
+{
+  "modal": {
+    "backdrop": {
+      "blur": {
+        "$value": "{blur.backdrop}",
+        "$type": "dimension"
+      },
+      "color": {
+        "$value": "{color.backdrop}",
+        "$type": "color"
+      }
+    },
+    "color": {
+      "background": {
+        "$value": "{color.background.surface}",
+        "$type": "color"
+      },
+      "border": {
+        "$value": "{color.border.default}",
+        "$type": "color"
+      },
+      "text": {
+        "$value": "{color.text.onSurface}",
+        "$type": "color"
+      }
+    },
+    "maxHeight": { 
+      "$value": "none", 
+      "$type": "string" 
+    },
+    "maxWidth": { 
+      "$value": "30rem", 
+      "$type": "dimension" 
+    },
+    "padding": { 
+      "$value": "{spacing.surface}", 
+      "$type": "dimension" 
+    },
+    "radius": { 
+      "$value": "{radius.surface}", 
+      "$type": "dimension" 
+    },
+    "shadow": { 
+      "$value": "{shadow.surface}", 
+      "$type": "shadow" 
+    },
+    "transition": {
+      "duration": { 
+        "$value": "{duration.slow}", 
+        "$type": "duration" 
+      },
+      "easing": {
+        "$value": "{easing.out-expo}", 
+        "$type": "string" 
+      }
+    },
+    "zIndex": {
+      "$value": "{zIndex.modal}", 
+      "$type": "number" 
+    }
+  }
+}

package/tokens/components/nav.json

@@ -0,0 +1,62 @@
+{
+  "nav": {
+    "color": {
+      "text": {
+        "default": {
+          "$value": "{color.link.default}",
+          "$type": "color"
+        },
+        "active": {
+          "$value": "{color.link.active}",
+          "$type": "color"
+        },
+        "hover": {
+          "$value": "{color.link.hover}",
+          "$type": "color"
+        },
+        "muted": {
+          "$value": "{color.text.muted}",
+          "$type": "color"
+        }
+      }
+    },
+    "fontSize": {
+      "$value": "{fontSize.text}", 
+      "$type": "dimension"
+    },
+    "gap": {
+      "$value": "0",
+      "$type": "dimension"
+    },
+    "margin": {
+      "inline": {
+        "$value": "0",
+        "$type": "dimension"
+      },
+      "block": {
+        "$value": "0",
+        "$type": "dimension"
+      }
+    },
+    "padding": {
+      "inline": {
+        "$value": "{spacing.xs}",
+        "$type": "dimension"
+      },
+      "block": {
+        "$value": "{spacing.xs}",
+        "$type": "dimension"
+      }
+    },
+    "title": {
+      "fontSize": {
+        "$value": "{fontSize.md}", 
+        "$type": "dimension"
+      },
+      "fontWeight": {
+        "$value": "{fontWeight.heading}", 
+        "$type": "fontWeight"
+      }
+    }
+  }
+}

package/tokens/components/pagination.json

@@ -0,0 +1,86 @@
+{
+  "pagination": {
+    "disabled": {
+      "opacity": {
+        "$value": "{opacity.disabled}",
+        "$type": "number"
+      }
+    },
+    "gap": {
+      "$value": "{spacing.2xs}",
+      "$type": "dimension"
+    },
+    "icon": {
+      "first": {
+        "$value": "{icon.arrowSkip}",
+        "$type": "string"
+      },
+      "last": {
+        "$value": "{icon.arrowSkip}",
+        "$type": "string"
+      },
+      "next": {
+        "$value": "{icon.arrow}",
+        "$type": "string"
+      },
+      "previous": {
+        "$value": "{icon.arrow}",
+        "$type": "string"
+      },
+      "size": {
+        "$value": "{icon.size}",
+        "$type": "dimension"
+      }
+    },
+    "item": {
+      "border": {
+        "radius": {
+          "$value": "{radius.sm}",
+          "$type": "dimension"
+        }
+      },
+      "color": {
+        "background": {
+          "default": {
+            "$value": "transparent",
+            "$type": "color"
+          },
+          "active": {
+            "$value": "{color.brand.default}",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "{color.background.muted.default}",
+            "$type": "color"
+          }
+        },
+        "text": {
+          "default": {
+            "$value": "{color.text.default}",
+            "$type": "color"
+          },
+          "active": {
+            "$value": "{color.text.onBrand}",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "{color.text.default}",
+            "$type": "color"
+          }
+        }
+      },
+      "fontSize": {
+        "$value": "{fontSize.sm}",
+        "$type": "dimension"
+      },
+      "fontWeight": {
+        "$value": "{fontWeight.normal}",
+        "$type": "fontWeight"
+      },
+      "size": {
+        "$value": "2.25rem",
+        "$type": "dimension"
+      }
+    }
+  }
+}

package/tokens/components/surtitle.json

@@ -0,0 +1,58 @@
+{
+  "surtitle": {
+    "border": {
+      "radius": {
+        "$value": "0",
+        "$type": "dimension"
+      },
+      "width": {
+        "$value": "0",
+        "$type": "dimension"
+      }
+    },
+    "color": {
+      "default": {
+        "$value": "{color.text.muted}",
+        "$type": "color"
+      },
+      "background": {
+        "$value": "transparent",
+        "$type": "color"
+      },
+      "border":     {
+        "$value": "transparent",
+        "$type": "color"
+      }
+    },
+    "fontSize": {
+      "$value": "{fontSize.xs}",
+      "$type": "dimension"
+    },
+    "fontWeight": {
+      "$value": "{fontWeight.bold}",
+      "$type": "fontWeight"
+    },
+    "letterSpacing": {
+      "$value": "{letterSpacing.md}",
+      "$type": "dimension"
+    },
+    "lineHeight": {
+      "$value": "{lineHeight.normal}",
+      "$type": "number"
+    },
+    "margin": {
+      "block": {
+        "$value": "0 {spacing.2xs}",
+        "$type": "string"
+      }
+    },
+    "padding": {
+      "$value": "0",
+      "$type": "dimension"
+    },
+    "textTransform": {
+      "$value": "uppercase",
+      "$type": "string"
+    }
+  }
+}

package/tokens/components/table.json

@@ -0,0 +1,36 @@
+{
+  "table": {
+    "cell": {
+      "padding": {
+        "inline": {
+          "$value": "{spacing.sm}",
+          "$type": "dimension"
+        },
+        "block": {
+          "$value": "{spacing.xs}",
+          "$type": "dimension"
+        }
+      }
+    },
+    "color": {
+      "background": {
+        "header": {
+          "$value": "{color.background.muted.default}",
+          "$type": "color"
+        },
+        "striped": {
+          "$value": "{color.background.muted.default}",
+          "$type": "color"
+        }
+      },
+      "border": {
+        "$value": "{color.border.default}",
+        "$type": "color"
+      }
+    },
+    "fontSize": {
+      "$value": "{fontSize.sm}",
+      "$type": "dimension"
+    }
+  }
+}

package/tokens/component/breadcrumb.css

@@ -1,14 +0,0 @@
-/* tokens/component/breadcrumb.css */
-@layer config {
-  :root {
-    --breadcrumb-color-border: var(--color-border);
-    --breadcrumb-border-width: var(--border-width-normal);
-    --breadcrumb-color-text: var(--color-text-muted);
-    --breadcrumb-color-text-active: var(--color-text);
-    --breadcrumb-color-separator: var(--color-text-muted);
-    --breadcrumb-font-size: var(--font-size-xs);
-    --breadcrumb-gap: var(--spacing-xs);
-    --breadcrumb-separator: "/";
-    --breadcrumb-padding: var(--spacing-xs);
-  }
-}

package/tokens/component/button.css

@@ -1,36 +0,0 @@
-/* tokens/component/button.css */
-@layer config {
-  :root {
-    
-    /* Border */
-    --btn-border-radius: var(--radius-control);
-    --btn-border-style: var(--border-style-solid);
-    --btn-border-width: var(--border-width-normal);
-
-    /* Color */
-    --btn-color-bg:           var(--color-brand);
-    --btn-color-bg-hover:     var(--color-brand-hover);
-    --btn-color-border:       var(--color-brand);
-    --btn-color-border-hover: var(--color-brand);
-    --btn-color-text:         var(--color-text-on-brand);
-    --btn-color-text-hover:   var(--color-text-on-brand);
-
-    /* Typography */
-    --btn-font-size: var(--font-size-sm);
-    --btn-font-weight: var(--font-weight-control);
-    
-    /* Spacing */
-    --btn-gap:       var(--spacing-sm);
-    --btn-padding-x: var(--spacing-control);
-    --btn-padding-y: var(--spacing-control);
-
-    /* Text decoration */
-    --btn-color-text-decoration: transparent;
-    --btn-color-text-decoration-hover: transparent;
-    --btn-text-decoration-line: underline;
-    --btn-text-transform: none;
-
-    /* Transitions */
-    --btn-transition: var(--transition-normal);
-  }
-}

package/tokens/component/card.css

@@ -1,39 +0,0 @@
-/* tokens/component/card.css */
-/* Aliases for backwards compatibility — canonical tokens are --item-* */
-@layer config {
-  :root {
-
-    /* Border */
-    --card-border-radius:     var(--item-border-radius);
-    --card-border-style:      var(--item-border-style);
-    --card-border-width:      var(--item-border-width);
-
-    /* Button */
-    --card-btn-color-bg:      var(--item-btn-color-bg);
-    --card-btn-border-width:  var(--item-btn-border-width);
-    --card-btn-color-text:    var(--item-btn-color-text);
-
-    /* Color */
-    --card-color-bg:          var(--item-color-bg);
-    --card-color-border:      var(--item-color-border);
-    --card-color-text:        var(--item-color-text);
-    --card-color-text-muted:  var(--item-color-text-muted);
-    --card-color-title:       var(--item-color-title);
-
-    /* Font */
-    --card-font-size-title:   var(--item-font-size-title);
-    --card-font-weight-title: var(--item-font-weight-title);
-    --card-line-height-title: var(--item-line-height-title);
-
-    /* Spacing */
-    --card-gap:               var(--item-gap);
-    --card-padding:           var(--item-padding);
-
-    /* Media */
-    --card-media-color-bg:    var(--item-media-color-bg);
-    --card-media-ratio:       var(--item-media-ratio);
-
-    /* Shadow */
-    --card-shadow:            var(--item-shadow);
-  }
-}

package/tokens/component/container.css

@@ -1,26 +0,0 @@
-/* tokens/component/container.css */
-@layer config {
-  :root {
-
-    /* Container */
-    --container-max-width-mobile:      100%;
-    --container-max-width-tablet:      100%;
-    --container-max-width-tablet-wide: 100%;
-    --container-max-width-laptop:      100%;
-    --container-max-width-desktop:     var(--size-desktop);
-    
-    /* Grid */
-    --columns:                         12;
-    --gap:                             var(--spacing-sm);
-    --gutter:                          var(--spacing-fluid-md);
-    --grid-column:                     var(--grid-column-mobile);
-
-    /* Grid spans */
-    --grid-column-mobile:              var(--span-full);
-    --grid-column-tablet:              var(--span-half);
-    --grid-column-tablet-wide:         var(--span-third);
-    --grid-column-laptop:              var(--span-quarter);
-    --grid-column-desktop:             var(--span-quarter);
-
-  }
-}

package/tokens/component/details.css

@@ -1,20 +0,0 @@
-/* tokens/component/details.css */
-@layer config {
-  :root {
-    --details-border:              var(--border-width-normal) var(--border-style-solid) var(--details-color-border);
-    --details-border-radius:       var(--radius-surface);
-    --details-box-shadow:          var(--shadow-sm);
-    --details-box-shadow-hover:    var(--shadow-center-md);
-    --details-color-bg:            var(--color-bg);
-    --details-color-border:        var(--color-border);
-    --details-color-border-open:   var(--color-active);
-    --details-color-text:          var(--color-text);
-    --details-icon:                var(--icon-chevron);
-    --details-icon-size:           var(--icon-size);
-    --details-margin:              var(--spacing-sm);
-    --details-padding:             var(--spacing-sm);
-    --details-summary-font-family: var(--font-family-heading);
-    --details-summary-font-size:   var(--font-size-md);
-    --details-summary-font-weight: var(--font-weight-heading);
-  }
-}

package/tokens/component/drawer.css

@@ -1,31 +0,0 @@
-/* tokens/component/drawer.css */
-@layer config {
-  :root {
-    /* Colors */
-    --drawer-color-bg:       var(--color-bg-surface);
-    --drawer-color-text:     var(--color-text-on-surface);
-    --drawer-color-border:   var(--color-border);
-
-    /* Backdrop */
-    --drawer-backdrop-blur:  var(--blur-backdrop);
-    --drawer-backdrop-color: var(--color-backdrop);
-
-    /* Position */
-    --drawer-bottom: 0;
-    --drawer-end: 0;
-    --drawer-start: auto;
-    --drawer-top: 0;
-    --drawer-translate: translateX(100%);
-
-    /* Layout */
-    --drawer-width:    320px;
-    --drawer-height:   50vh;
-    --drawer-padding:  var(--spacing-surface);
-    --drawer-shadow:   var(--shadow-surface);
-    --drawer-z-index:  var(--z-index-drawer);
-
-    /* Transition — read by JS via getComputedStyle */
-    --drawer-transition-duration: var(--duration-slow);
-    --drawer-transition-easing:   var(--easing-out-expo);
-  }
-}

package/tokens/component/dropdown.css

@@ -1,37 +0,0 @@
-/* tokens/component/dropdown.css */
-@layer config {
-  :root {
-
-    /* Colors — panel */
-    --dropdown-color-bg:              var(--color-bg-surface);
-    --dropdown-color-text:            var(--color-text-on-surface);
-    --dropdown-color-border:          var(--color-border);
-
-    /* Layout */
-    --dropdown-min-width:             180px;
-    --dropdown-padding:               var(--size-4);
-    --dropdown-z-index:               50;
-
-    /* Appearance */
-    --dropdown-border-width:          var(--border-width-normal);
-    --dropdown-border-style:          var(--border-style-solid);
-    --dropdown-border-radius:         var(--radius-surface);
-    --dropdown-shadow:                var(--shadow-sm);
-
-    /* Item */
-    --dropdown-item-color-bg:         var(--color-bg);
-    --dropdown-item-color-bg-hover:   var(--color-bg-muted);
-    --dropdown-item-border-radius:    var(--radius-xs);
-    --dropdown-item-font-size:        var(--font-size-xs);
-    --dropdown-item-padding:          var(--spacing-2xs);
-
-    /* Icon */
-    --dropdown-icon:                  var(--icon-chevron);
-    --dropdown-icon-size:             var(--icon-size);
-
-    /* Transition — read by JS via getComputedStyle */
-    --dropdown-transition-duration:   var(--duration-fast);
-    --dropdown-transition-easing:     var(--easing-out);
-    --dropdown-translate-y:           -4px;
-  }
-}

package/tokens/component/embed.css

@@ -1,12 +0,0 @@
-/* tokens/component/embed.css */
-@layer config {
-  :root {
-    --embed-ratio:         var(--ratio-16-9);
-    --embed-color-border:  var(--color-border);
-    --embed-border-radius: var(--radius-none);
-    --embed-border-style:  var(--border-style-solid);
-    --embed-border-width:  0;
-    --embed-box-shadow:    none;
-    --embed-max-width:     100%;
-  }
-}

package/tokens/component/figure.css

@@ -1,9 +0,0 @@
-/* tokens/component/figure.css */
-@layer config {
-  :root {
-    --figure-gap:                  var(--spacing-xs);
-    --figure-figcaption-gap:       var(--spacing-xs);
-    --figure-figcaption-font-size: var(--font-size-small);
-    --figure-margin-block:         var(--spacing-md);
-  }
-}

package/tokens/component/heading.css

@@ -1,11 +0,0 @@
-/* tokens/component/heading.css */
-@layer config {
-  :root {
-    --heading-gap:            var(--spacing-xs);
-    --heading-margin-bottom:  var(--spacing-md);
-    --heading-margin-bottom-tablet:  var(--spacing-md);
-    --heading-margin-bottom-tablet-wide:  var(--spacing-md);
-    --heading-margin-bottom-laptop:  var(--spacing-lg);
-    --heading-margin-bottom-desktop:  var(--spacing-xl);
-  }
-}

package/tokens/component/hero.css

@@ -1,25 +0,0 @@
-/* tokens/component/hero.css */
-@layer config {
-  :root {
-    /* Colors */
-    --hero-color-bg:      var(--color-bg);
-    --hero-color-text:    var(--color-text);
-    --hero-color-title:   var(--color-text);
-    --hero-color-link:    var(--color-text);
-
-    /* Layout */
-    --hero-min-height:         25rem;
-    --hero-min-height-tablet:  37.5rem;
-    --hero-min-height-desktop: 50rem;
-
-    /* Spacing */
-    --hero-gap:           var(--spacing-sm);
-    --hero-padding:       var(--spacing-md) 0;
-
-    /* Cover darken */
-    --hero-cover-brightness: 0.3;
-
-    /* Typography */
-    --hero-font-size-title: var(--font-size-heading-01);
-  }
-}

package/tokens/component/item.css

@@ -1,54 +0,0 @@
-/* tokens/component/item.css */
-@layer config {
-  :root {
-    
-    /* Border */
-    --item-border-radius:     var(--radius-surface);
-    --item-border-style:      var(--border-style-solid);
-    --item-border-width:      var(--border-width-normal);
-
-    /* Button */
-    --item-btn-color-bg:      transparent;
-    --item-btn-border-width:  0;
-    --item-btn-color-text:    var(--color-brand);
-    --item-btn-padding:       0;
-    --item-btn-text-decoration: var(--text-decoration-none);
-    --item-btn-text-decoration-hover: var(--text-decoration-underline);
-    
-    /* Color */
-    --item-color-bg:          var(--color-bg);
-    --item-color-border:      var(--color-border);
-    --item-color-text:        var(--color-text);
-    --item-color-text-muted:  var(--color-text-muted);
-    --item-color-title:       var(--color-text);
-
-    /* Font */
-    --item-font-size-title:   var(--font-size-md);
-    --item-font-weight-title: var(--font-weight-heading);
-    --item-line-height-title: var(--line-height-heading);
-
-    /* Spacing */
-    --item-gap:               var(--spacing-sm);
-    --item-padding-x:         var(--spacing-surface);
-    --item-padding-y:         var(--spacing-surface);
-
-    /* Footer */
-    --item-footer-color-bg:     var(--item-color-bg);
-    --item-footer-border-style: var(--border-style-solid);
-    --item-footer-border-width: var(--border-width-normal);
-    --item-footer-color-border: var(--color-border);
-    --item-footer-font-size:    var(--font-size-xs);
-    --item-footer-padding-x:    var(--spacing-surface);
-    --item-footer-padding-y:    calc(var(--spacing-surface) / 2);
-
-    /* Media */
-    --item-media-color-bg:    var(--media-color-bg);
-    --item-media-ratio:       var(--media-ratio);
-
-    /* Shadow */
-    --item-shadow:            var(--shadow-sm);
-    --item-shadow-hover:      var(--shadow-md);
-
-    --item-transition: box-shadow var(--duration-normal) var(--easing-default)
-  }
-}

package/tokens/component/items.css

@@ -1,8 +0,0 @@
-/* tokens/component/items.css */
-@layer config {
-  :root {
-    --items-cols:       1;
-    --items-gap:        var(--gap);
-    --items-margin-nav: var(--spacing-fluid-md);
-  }
-}

package/tokens/component/list.css

@@ -1,15 +0,0 @@
-/* tokens/component/list.css */
-@layer config {
-  :root {
-
-    /* Label */
-    --list-label-font-weight:    var(--font-weight-bold);
-    --list-label-margin-bottom:  var(--spacing-2xs);
-
-    /* Item */
-    --list-item-font-size:       var(--font-size-sm);
-    --list-item-gap:             var(--spacing-2xs);
-    --list-item-marker:          '-';
-    --list-item-marker-gap:      var(--spacing-2xs);
-  }
-}

package/tokens/component/logo.css

@@ -1,15 +0,0 @@
-/* tokens/component/logo.css */
-@layer config {
-  :root {
-    /* Image */
-    --logo-height: 1.5rem;
-    --logo-height-tablet: 2rem;
-
-    /* Text fallback (when no image) */
-    --logo-color:          var(--color-text);
-    --logo-font-family:    var(--font-family-heading);
-    --logo-font-size:      var(--font-size-md);
-    --logo-font-weight:    var(--font-weight-heading);
-    --logo-letter-spacing: var(--letter-spacing-normal);
-  }
-}