@uncinq/component-tokens 0.4.0 → 1.0.0

package/dist/css/components/media.css

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* components/media.css */
+@layer config {
+  :root {
+    --media-color-background: var(--color-background-media);
+    --media-ratio: var(--ratio-video);
+  }
+}

package/dist/css/components/modal.css

@@ -0,0 +1,22 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* components/modal.css */
+@layer config {
+  :root {
+    --modal-backdrop-blur: var(--blur-backdrop);
+    --modal-backdrop-color: var(--color-backdrop);
+    --modal-color-background: var(--color-background-surface);
+    --modal-color-border: var(--color-border);
+    --modal-color-text: var(--color-text-on-surface);
+    --modal-max-height: none;
+    --modal-max-width: 30rem;
+    --modal-padding: var(--spacing-surface);
+    --modal-radius: var(--radius-surface);
+    --modal-shadow: var(--shadow-surface);
+    --modal-transition-duration: var(--duration-slow);
+    --modal-transition-easing: var(--easing-out-expo);
+    --modal-z-index: var(--z-index-modal);
+  }
+}

package/dist/css/components/nav.css

@@ -0,0 +1,21 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* components/nav.css */
+@layer config {
+  :root {
+    --nav-color-text: var(--color-link);
+    --nav-color-text-active: var(--color-link-active);
+    --nav-color-text-hover: var(--color-link-hover);
+    --nav-color-text-muted: var(--color-text-muted);
+    --nav-font-size: var(--font-size-text);
+    --nav-gap: 0;
+    --nav-margin-inline: 0;
+    --nav-margin-block: 0;
+    --nav-padding-inline: var(--spacing-xs);
+    --nav-padding-block: var(--spacing-xs);
+    --nav-title-font-size: var(--font-size-md);
+    --nav-title-font-weight: var(--font-weight-heading);
+  }
+}

package/dist/css/components/pagination.css

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* components/pagination.css */
+@layer config {
+  :root {
+    --pagination-disabled-opacity: var(--opacity-disabled);
+    --pagination-gap: var(--spacing-2xs);
+    --pagination-icon-first: var(--icon-arrow-skip);
+    --pagination-icon-last: var(--icon-arrow-skip);
+    --pagination-icon-next: var(--icon-arrow);
+    --pagination-icon-previous: var(--icon-arrow);
+    --pagination-icon-size: var(--icon-size);
+    --pagination-item-border-radius: var(--radius-sm);
+    --pagination-item-color-background: transparent;
+    --pagination-item-color-background-active: var(--color-brand);
+    --pagination-item-color-background-hover: var(--color-background-muted);
+    --pagination-item-color-text: var(--color-text);
+    --pagination-item-color-text-active: var(--color-text-on-brand);
+    --pagination-item-color-text-hover: var(--color-text);
+    --pagination-item-font-size: var(--font-size-sm);
+    --pagination-item-font-weight: var(--font-weight-normal);
+    --pagination-item-size: 2.25rem;
+  }
+}

package/dist/css/components/surtitle.css

@@ -0,0 +1,21 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* components/surtitle.css */
+@layer config {
+  :root {
+    --surtitle-border-radius: 0;
+    --surtitle-border-width: 0;
+    --surtitle-color: var(--color-text-muted);
+    --surtitle-color-background: transparent;
+    --surtitle-color-border: transparent;
+    --surtitle-font-size: var(--font-size-xs);
+    --surtitle-font-weight: var(--font-weight-bold);
+    --surtitle-letter-spacing: var(--letter-spacing-md);
+    --surtitle-line-height: var(--line-height-normal);
+    --surtitle-margin-block: 0 var(--spacing-2xs);
+    --surtitle-padding: 0;
+    --surtitle-text-transform: uppercase;
+  }
+}

package/dist/css/components/table.css

@@ -0,0 +1,15 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* components/table.css */
+@layer config {
+  :root {
+    --table-cell-padding-inline: var(--spacing-sm);
+    --table-cell-padding-block: var(--spacing-xs);
+    --table-color-background-header: var(--color-background-muted);
+    --table-color-background-striped: var(--color-background-muted);
+    --table-color-border: var(--color-border);
+    --table-font-size: var(--font-size-sm);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinq/component-tokens",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "description": "Framework-agnostic CSS design tokens — component layers.",
   "license": "MIT",
   "repository": {
@@ -13,24 +13,35 @@
     "url": "https://uncinq.dev/"
   },
   "keywords": [
-    "design-tokens",
-    "component-tokens",
     "css",
+    "component-tokens",
     "custom-properties",
-    "design-system"
+    "design-system",
+    "design-tokens",
+    "dtcg",
+    "tokens"
   ],
   "files": [
+    "dist/css/",
     "tokens/"
   ],
   "exports": {
-    ".": "./tokens/index.css",
-    "./tokens/index.css": "./tokens/index.css",
-    "./tokens/component/*": "./tokens/component/*"
+    ".": "./dist/css/index.css",
+    "./css/index.css": "./dist/css/index.css",
+    "./css/components/*": "./dist/css/components/*",
+    "./tokens/*": "./tokens/*"
+  },
+  "style": "./dist/css/index.css",
+  "type": "module",
+  "scripts": {
+    "build": "style-dictionary build --config style-dictionary.config.js"
   },
-  "style": "./tokens/index.css",
   "peerDependencies": {
     "@uncinq/design-tokens": "*"
   },
+  "devDependencies": {
+    "style-dictionary": "^5.0.0"
+  },
   "publishConfig": {
     "access": "public"
   }

package/tokens/components/alert.json

@@ -0,0 +1,26 @@
+{
+  "alert": {
+    "border": {
+      "radius": {
+        "$value": "{radius.none}", 
+        "$type": "dimension" 
+      }
+    },
+    "fontSize": {
+      "$value": "{fontSize.small}",
+      "$type": "dimension"
+    },
+    "gap":     {
+      "$value": "{spacing.sm}", 
+      "$type": "dimension" 
+    },
+    "margin":  {
+      "$value": "0", 
+      "$type": "dimension" 
+    },
+    "padding": {
+      "$value": "{spacing.sm}", 
+      "$type": "dimension" 
+    }
+  }
+}

package/tokens/components/badge.json

@@ -0,0 +1,42 @@
+{
+  "badge": {
+    "border": {
+      "radius": { 
+        "$value": "{radius.pill}", 
+        "$type": "dimension" 
+      },
+      "style":  { 
+        "$value": "solid", 
+        "$type": "strokeStyle" 
+      },
+      "width":  { 
+        "$value": "0", 
+        "$type": "dimension" 
+      }
+    },
+    "color": {
+      "border": { 
+        "$value": "transparent", 
+        "$type": "color" 
+      }
+    },
+    "fontSize": {
+      "$value": "{fontSize.2xs}",
+      "$type": "dimension"
+    },
+    "fontWeight": {
+      "$value": "{fontWeight.control}",
+      "$type": "fontWeight"
+    },
+    "padding": {
+      "inline": {
+        "$value": "{spacing.xs}",
+        "$type": "dimension"
+      },
+      "block": {
+        "$value": "{spacing.2xs}",
+        "$type": "dimension"
+      }
+    }
+  }
+}

package/tokens/components/breadcrumb.json

@@ -0,0 +1,56 @@
+{
+  "breadcrumb": {
+    "border": {
+      "default": { 
+        "$value": "{breadcrumb.border.width} {breadcrumb.border.style} {breadcrumb.color.border}", 
+        "$type": "string" 
+      },
+      "style":   { 
+        "$value": "{border.style.normal}", 
+        "$type": "strokeStyle" 
+      },
+      "width":   { 
+        "$value": "{border.width.sm}", 
+        "$type": "dimension" 
+      }
+    },
+    "color": {
+      "border":    { 
+        "$value": "{color.border.default}", 
+        "$type": "color" 
+      },
+      "separator": { 
+        "$value": "{color.text.muted}", 
+        "$type": "color" 
+      },
+      "text": {
+        "default": { 
+          "$value": "{color.text.muted}", 
+          "$type": "color" 
+        },
+        "active":  { 
+          "$value": "{color.text.default}", 
+          "$type": "color" 
+        }
+      }
+    },
+    "fontSize": {
+      "$value": "{fontSize.xs}",
+      "$type": "dimension"
+    },
+    "gap": {
+      "$value": "{spacing.xs}", 
+      "$type": "dimension" 
+    },
+    "padding": {
+      "block": {
+        "$value": "{spacing.xs}",
+        "$type": "dimension"
+      }
+    },
+    "separator": {
+      "$value": "\"/\"", 
+      "$type": "string" 
+    }
+  }
+}

package/tokens/components/button.json

@@ -0,0 +1,138 @@
+{
+  "btn": {
+    "border": {
+      "radius": { 
+        "$value": "{radius.control}", 
+        "$type": "dimension" 
+      },
+      "style":  { 
+        "$value": "{border.style.normal}", 
+        "$type": "strokeStyle" 
+      },
+      "width":  { 
+        "$value": "{border.width.sm}", 
+        "$type": "dimension" 
+      }
+    },
+    "color": {
+      "background": {
+        "default": { 
+          "$value": "{color.brand.default}", 
+          "$type": "color" 
+        },
+        "hover":   { 
+          "$value": "{color.brand.hover}", 
+          "$type": "color" 
+        }
+      },
+      "border": {
+        "default": { 
+          "$value": "{color.brand.default}", 
+          "$type": "color" 
+        },
+        "hover":   { 
+          "$value": "{color.brand.default}", 
+          "$type": "color" 
+        }
+      },
+      "text": {
+        "default": { 
+          "$value": "{color.text.onBrand}", 
+          "$type": "color" 
+        },
+        "hover":   { 
+          "$value": "{color.text.onBrand}", 
+          "$type": "color" 
+        }
+      },
+      "textDecoration": {
+        "default": { 
+          "$value": "transparent", 
+          "$type": "color" 
+        },
+        "hover":   { 
+          "$value": "transparent", 
+          "$type": "color" 
+        }
+      }
+    },
+    "control": {
+      "color": {
+        "background": {
+          "default": { 
+            "$value": "{color.background.muted.default}", 
+            "$type": "color" 
+          },
+          "hover":   { 
+            "$value": "{color.background.muted.hover}", 
+            "$type": "color" 
+          }
+        },
+        "border": {
+          "default": { 
+            "$value": "transparent", 
+            "$type": "color" 
+          },
+          "hover":   { 
+            "$value": "transparent", 
+            "$type": "color" 
+          }
+        },
+        "text": {
+          "default": { 
+            "$value": "{color.text.default}", 
+            "$type": "color" 
+          },
+          "hover":   { 
+            "$value": "{color.text.default}", 
+            "$type": "color" 
+          }
+        }
+      }
+    },
+    "fontSize": {
+      "$value": "{fontSize.sm}",
+      "$type": "dimension"
+    },
+    "fontWeight": {
+      "$value": "{fontWeight.control}",
+      "$type": "fontWeight"
+    },
+    "gap":     { 
+      "$value": "{spacing.xs}", 
+      "$type": "dimension" 
+    },
+    "padding": {
+      "inline": {
+        "$value": "{spacing.control}",
+        "$type": "dimension"
+      },
+      "block": {
+        "$value": "{spacing.control}",
+        "$type": "dimension"
+      }
+    },
+    "shadow": {
+      "default": { 
+        "$value": "{shadow.control.default}", 
+        "$type": "shadow"
+      },
+      "hover":   {
+        "$value": "{shadow.control.hover}",
+        "$type": "shadow"
+      }
+    },
+    "textDecorationLine": {
+      "$value": "underline",
+      "$type": "string"
+    },
+    "textTransform": {
+      "$value": "none",
+      "$type": "string"
+    },
+    "transition": { 
+      "$value": "{transition.color}", 
+      "$type": "string" 
+    }
+  }
+}

package/tokens/components/card.json

@@ -0,0 +1,108 @@
+{
+  "card": {
+    "border": {
+      "default": {
+        "$value": "{card.border.width} {card.border.style} {card.color.border}",
+        "$type": "string"
+      },
+      "radius": {
+        "$value": "{item.border.radius}",
+        "$type": "dimension"
+      },
+      "style": {
+        "$value": "{item.border.style}",
+        "$type": "strokeStyle"
+      },
+      "width": {
+        "$value": "{item.border.width}",
+        "$type": "dimension"
+      }
+    },
+    "color": {
+      "background": {
+        "$value": "{item.color.background}",
+        "$type": "color"
+      },
+      "border": {
+        "$value": "{item.color.border}",
+        "$type": "color"
+      },
+      "text": {
+        "default": {
+          "$value": "{item.color.text.default}",
+          "$type": "color"
+        },
+        "muted": {
+          "$value": "{item.color.text.muted}",
+          "$type": "color"
+        }
+      }
+    },
+    "gap": {
+      "$value": "{item.gap}",
+      "$type": "dimension"
+    },
+    "media": {
+      "color": {
+        "background": {
+          "$value": "{item.media.color.background}",
+          "$type": "color"
+        }
+      },
+      "order": {
+        "$value": "{item.media.order}",
+        "$type": "number"
+      },
+      "ratio": {
+        "$value": "{item.media.ratio}",
+        "$type": "string"
+      }
+    },
+    "order": {
+      "$value": "{item.order}",
+      "$type": "string"
+    },
+    "padding": {
+      "inline": {
+        "$value": "{item.padding.inline}",
+        "$type": "dimension"
+      },
+      "block": {
+        "$value": "{item.padding.block}",
+        "$type": "dimension"
+      }
+    },
+    "shadow": {
+      "default": {
+        "$value": "{item.shadow.default}",
+        "$type": "shadow"
+      },
+      "hover": {
+        "$value": "{item.shadow.hover}",
+        "$type": "string"
+      }
+    },
+    "title": {
+      "color": {
+        "$value": "{item.title.color}",
+        "$type": "color"
+      },
+      "fontSize": {
+        "$value": "{item.title.fontSize}",
+        "$type": "dimension"
+      },
+      "fontWeight": {
+        "$value": "{item.title.fontWeight}",
+        "$type": "fontWeight"
+      },
+      "lineHeight": {
+        "$value": "{item.title.lineHeight}",
+        "$type": "number"
+      }
+    },
+    "transition": {
+      "$value": "box-shadow var(--duration-normal) var(--easing-default)",
+      "$type": "string"
+    }
+  }
+}

package/tokens/components/container.json

@@ -0,0 +1,66 @@
+{
+  "columns": { 
+    "$value": 12, 
+    "$type": "number" 
+  },
+  "container": {
+    "maxWidth": {
+      "mobile": { 
+        "$value": "100%", 
+        "$type": "dimension" 
+      },
+      "tablet": { 
+        "$value": "100%", 
+        "$type": "dimension" 
+      },
+      "tabletWide": { 
+        "$value": "100%", 
+        "$type": "dimension" 
+      },
+      "laptop": { 
+        "$value": "100%", 
+        "$type": "dimension" 
+      },
+      "desktop": { 
+        "$value": "{size.desktop}", 
+        "$type": "dimension" 
+      }
+    }
+  },
+  "gap":     { 
+    "$value": "{spacing.sm}", 
+    "$type": "dimension" 
+  },
+  "grid": {
+    "column": {
+      "default": {
+        "$value": "{grid.column.mobile}",
+        "$type": "string"
+      },
+      "desktop": {
+        "$value": "{span.quarter}",
+        "$type": "string" 
+      },
+      "laptop": {
+        "$value": "{span.quarter}",
+        "$type": "string" 
+      },
+      "mobile": {
+        "$value": "{span.full}",
+        "$type": "string" 
+      },
+      "tablet": {
+        "$value": "{span.half}",
+        "$type": "string" 
+      },
+      "tabletWide": {
+        "$value": "{span.third}",
+        "$type": "string" 
+      }
+    }
+  },
+  "gutter": { 
+    "$value": "{spacing.fluid.md}", 
+    "$type": "dimension" 
+  }
+}