@x12i/tokens 0.0.0-stage → 1.0.0

package/package.json

@@ -1,6 +1,56 @@
 {
   "name": "@x12i/tokens",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0",
+  "description": "Design tokens for the Unified UI Kit: W3C DTCG source compiled to CSS variables, a Tailwind v4 theme, typed TypeScript and Tokens Studio JSON.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/x12i/unified-ui-kit.git",
+    "directory": "packages/tokens"
+  },
+  "homepage": "https://github.com/x12i/unified-ui-kit/tree/main/packages/tokens#readme",
+  "bugs": {
+    "url": "https://github.com/x12i/unified-ui-kit/issues"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src/dtcg",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./css/base.css": "./dist/css/base.css",
+    "./css/theme-light.css": "./dist/css/theme-light.css",
+    "./css/theme-dark.css": "./dist/css/theme-dark.css",
+    "./css/theme-hc.css": "./dist/css/theme-hc.css",
+    "./css/density-compact.css": "./dist/css/density-compact.css",
+    "./css/density-default.css": "./dist/css/density-default.css",
+    "./css/density-comfortable.css": "./dist/css/density-comfortable.css",
+    "./tailwind.css": "./dist/tailwind/theme.css",
+    "./tokens-studio.json": "./dist/tokens-studio.json",
+    "./dtcg/*": "./src/dtcg/*",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/culori": "^4.0.1",
+    "@types/node": "^24.0.0",
+    "culori": "^4.0.2",
+    "style-dictionary": "^5.8.0"
+  },
+  "scripts": {
+    "generate:ramps": "node scripts/generate-ramps.mjs",
+    "build:tokens": "node scripts/build-tokens.mjs",
+    "build": "pnpm build:tokens && tsup",
+    "typecheck": "pnpm build:tokens && tsc --noEmit",
+    "lint": "eslint .",
+    "test": "pnpm build:tokens && vitest run"
+  }
 }

package/src/dtcg/component/component.json

@@ -0,0 +1,34 @@
+{
+  "$description": "Component tier. Only for values where no semantic token fits. They alias density-aware semantic tokens, so they follow data-density automatically.",
+  "button": {
+    "height": {
+      "$type": "dimension",
+      "xs": { "$value": "{size.control.xs}" },
+      "sm": { "$value": "{size.control.sm}" },
+      "md": { "$value": "{size.control.md}" },
+      "lg": { "$value": "{size.control.lg}" },
+      "xl": { "$value": "{size.control.xl}" }
+    },
+    "paddingInline": {
+      "$type": "dimension",
+      "xs": { "$value": "{space.control.inline.xs}" },
+      "sm": { "$value": "{space.control.inline.sm}" },
+      "md": { "$value": "{space.control.inline.md}" },
+      "lg": { "$value": "{space.control.inline.lg}" },
+      "xl": { "$value": "{space.control.inline.xl}" }
+    },
+    "gap": { "$type": "dimension", "$value": "{space.control.gap}" }
+  },
+  "badge": {
+    "height": {
+      "$type": "dimension",
+      "sm": { "$value": "{size.16}" },
+      "md": { "$value": "{size.20}" }
+    }
+  },
+  "grid": {
+    "row": {
+      "height": { "$type": "dimension", "$value": "{size.control.lg}" }
+    }
+  }
+}

package/src/dtcg/primitive/border.json

@@ -0,0 +1,10 @@
+{
+  "$description": "Border widths. 1px by default, 2px for emphasis and focus.",
+  "border": {
+    "width": {
+      "$type": "dimension",
+      "1": { "$value": "1px" },
+      "2": { "$value": "2px" }
+    }
+  }
+}

package/src/dtcg/primitive/color.json

@@ -0,0 +1,459 @@
+{
+  "$description": "Primitive color ramps. Generated by scripts/generate-ramps.mjs. Placeholder values until the visual target is signed off.",
+  "color": {
+    "black": {
+      "$type": "color",
+      "$value": "#000000"
+    },
+    "white": {
+      "$type": "color",
+      "$value": "#ffffff"
+    },
+    "neutral": {
+      "1": {
+        "$type": "color",
+        "$value": "#07090e"
+      },
+      "2": {
+        "$type": "color",
+        "$value": "#0f1217"
+      },
+      "3": {
+        "$type": "color",
+        "$value": "#181b20"
+      },
+      "4": {
+        "$type": "color",
+        "$value": "#24262c"
+      },
+      "5": {
+        "$type": "color",
+        "$value": "#32353c"
+      },
+      "6": {
+        "$type": "color",
+        "$value": "#44484e"
+      },
+      "7": {
+        "$type": "color",
+        "$value": "#5d6067"
+      },
+      "8": {
+        "$type": "color",
+        "$value": "#777a82"
+      },
+      "9": {
+        "$type": "color",
+        "$value": "#92959d"
+      },
+      "10": {
+        "$type": "color",
+        "$value": "#b0b4bc"
+      },
+      "11": {
+        "$type": "color",
+        "$value": "#e7ebf4"
+      },
+      "12": {
+        "$type": "color",
+        "$value": "#f8faff"
+      }
+    },
+    "accent": {
+      "1": {
+        "$type": "color",
+        "$value": "#0a0c25"
+      },
+      "2": {
+        "$type": "color",
+        "$value": "#12163a"
+      },
+      "3": {
+        "$type": "color",
+        "$value": "#1d2059"
+      },
+      "4": {
+        "$type": "color",
+        "$value": "#282d74"
+      },
+      "5": {
+        "$type": "color",
+        "$value": "#373e94"
+      },
+      "6": {
+        "$type": "color",
+        "$value": "#444cb2"
+      },
+      "7": {
+        "$type": "color",
+        "$value": "#5057dc"
+      },
+      "8": {
+        "$type": "color",
+        "$value": "#5d67ee"
+      },
+      "9": {
+        "$type": "color",
+        "$value": "#6e7cfd"
+      },
+      "10": {
+        "$type": "color",
+        "$value": "#8b9bff"
+      },
+      "11": {
+        "$type": "color",
+        "$value": "#e1e7ff"
+      },
+      "12": {
+        "$type": "color",
+        "$value": "#f4f6ff"
+      }
+    },
+    "success": {
+      "1": {
+        "$type": "color",
+        "$value": "#011408"
+      },
+      "2": {
+        "$type": "color",
+        "$value": "#00220f"
+      },
+      "3": {
+        "$type": "color",
+        "$value": "#003219"
+      },
+      "4": {
+        "$type": "color",
+        "$value": "#004424"
+      },
+      "5": {
+        "$type": "color",
+        "$value": "#005a31"
+      },
+      "6": {
+        "$type": "color",
+        "$value": "#006d3c"
+      },
+      "7": {
+        "$type": "color",
+        "$value": "#008148"
+      },
+      "8": {
+        "$type": "color",
+        "$value": "#009253"
+      },
+      "9": {
+        "$type": "color",
+        "$value": "#19a661"
+      },
+      "10": {
+        "$type": "color",
+        "$value": "#59bc81"
+      },
+      "11": {
+        "$type": "color",
+        "$value": "#d0f2da"
+      },
+      "12": {
+        "$type": "color",
+        "$value": "#effaf2"
+      }
+    },
+    "warning": {
+      "1": {
+        "$type": "color",
+        "$value": "#180d00"
+      },
+      "2": {
+        "$type": "color",
+        "$value": "#271700"
+      },
+      "3": {
+        "$type": "color",
+        "$value": "#3a2400"
+      },
+      "4": {
+        "$type": "color",
+        "$value": "#4d3200"
+      },
+      "5": {
+        "$type": "color",
+        "$value": "#654200"
+      },
+      "6": {
+        "$type": "color",
+        "$value": "#7b5100"
+      },
+      "7": {
+        "$type": "color",
+        "$value": "#916100"
+      },
+      "8": {
+        "$type": "color",
+        "$value": "#a46e00"
+      },
+      "9": {
+        "$type": "color",
+        "$value": "#bb7e00"
+      },
+      "10": {
+        "$type": "color",
+        "$value": "#d09945"
+      },
+      "11": {
+        "$type": "color",
+        "$value": "#fae4c7"
+      },
+      "12": {
+        "$type": "color",
+        "$value": "#fdf6ec"
+      }
+    },
+    "danger": {
+      "1": {
+        "$type": "color",
+        "$value": "#210505"
+      },
+      "2": {
+        "$type": "color",
+        "$value": "#340909"
+      },
+      "3": {
+        "$type": "color",
+        "$value": "#4f0a0d"
+      },
+      "4": {
+        "$type": "color",
+        "$value": "#691214"
+      },
+      "5": {
+        "$type": "color",
+        "$value": "#861d1f"
+      },
+      "6": {
+        "$type": "color",
+        "$value": "#a12628"
+      },
+      "7": {
+        "$type": "color",
+        "$value": "#c51d28"
+      },
+      "8": {
+        "$type": "color",
+        "$value": "#d73337"
+      },
+      "9": {
+        "$type": "color",
+        "$value": "#e9504d"
+      },
+      "10": {
+        "$type": "color",
+        "$value": "#f97770"
+      },
+      "11": {
+        "$type": "color",
+        "$value": "#ffdfdc"
+      },
+      "12": {
+        "$type": "color",
+        "$value": "#fff4f3"
+      }
+    },
+    "info": {
+      "1": {
+        "$type": "color",
+        "$value": "#00121d"
+      },
+      "2": {
+        "$type": "color",
+        "$value": "#001e2d"
+      },
+      "3": {
+        "$type": "color",
+        "$value": "#002d42"
+      },
+      "4": {
+        "$type": "color",
+        "$value": "#003d58"
+      },
+      "5": {
+        "$type": "color",
+        "$value": "#005172"
+      },
+      "6": {
+        "$type": "color",
+        "$value": "#00628a"
+      },
+      "7": {
+        "$type": "color",
+        "$value": "#0075a3"
+      },
+      "8": {
+        "$type": "color",
+        "$value": "#0084b8"
+      },
+      "9": {
+        "$type": "color",
+        "$value": "#0097d2"
+      },
+      "10": {
+        "$type": "color",
+        "$value": "#4cb0e5"
+      },
+      "11": {
+        "$type": "color",
+        "$value": "#d0edff"
+      },
+      "12": {
+        "$type": "color",
+        "$value": "#eef9ff"
+      }
+    },
+    "categorical": {
+      "light": {
+        "1": {
+          "$type": "color",
+          "$value": "#2971c6"
+        },
+        "2": {
+          "$type": "color",
+          "$value": "#ac5700"
+        },
+        "3": {
+          "$type": "color",
+          "$value": "#008758"
+        },
+        "4": {
+          "$type": "color",
+          "$value": "#a8488d"
+        },
+        "5": {
+          "$type": "color",
+          "$value": "#867000"
+        },
+        "6": {
+          "$type": "color",
+          "$value": "#00818c"
+        },
+        "7": {
+          "$type": "color",
+          "$value": "#b94642"
+        },
+        "8": {
+          "$type": "color",
+          "$value": "#8059bb"
+        }
+      },
+      "dark": {
+        "1": {
+          "$type": "color",
+          "$value": "#70adfb"
+        },
+        "2": {
+          "$type": "color",
+          "$value": "#e99355"
+        },
+        "3": {
+          "$type": "color",
+          "$value": "#53c48e"
+        },
+        "4": {
+          "$type": "color",
+          "$value": "#e189c5"
+        },
+        "5": {
+          "$type": "color",
+          "$value": "#c5a93b"
+        },
+        "6": {
+          "$type": "color",
+          "$value": "#00c1d0"
+        },
+        "7": {
+          "$type": "color",
+          "$value": "#f28881"
+        },
+        "8": {
+          "$type": "color",
+          "$value": "#b897f0"
+        }
+      }
+    },
+    "sequential": {
+      "1": {
+        "$type": "color",
+        "$value": "#e9f3ff"
+      },
+      "2": {
+        "$type": "color",
+        "$value": "#bcd9ff"
+      },
+      "3": {
+        "$type": "color",
+        "$value": "#8ebfff"
+      },
+      "4": {
+        "$type": "color",
+        "$value": "#5ea4fd"
+      },
+      "5": {
+        "$type": "color",
+        "$value": "#478ade"
+      },
+      "6": {
+        "$type": "color",
+        "$value": "#3f72b2"
+      },
+      "7": {
+        "$type": "color",
+        "$value": "#3f5b7f"
+      },
+      "8": {
+        "$type": "color",
+        "$value": "#384453"
+      },
+      "9": {
+        "$type": "color",
+        "$value": "#242f3d"
+      }
+    },
+    "diverging": {
+      "1": {
+        "$type": "color",
+        "$value": "#2a6cba"
+      },
+      "2": {
+        "$type": "color",
+        "$value": "#5e8dc9"
+      },
+      "3": {
+        "$type": "color",
+        "$value": "#8dadd7"
+      },
+      "4": {
+        "$type": "color",
+        "$value": "#bdcee3"
+      },
+      "5": {
+        "$type": "color",
+        "$value": "#eeeeee"
+      },
+      "6": {
+        "$type": "color",
+        "$value": "#dfc7b7"
+      },
+      "7": {
+        "$type": "color",
+        "$value": "#cea081"
+      },
+      "8": {
+        "$type": "color",
+        "$value": "#bb7949"
+      },
+      "9": {
+        "$type": "color",
+        "$value": "#a45300"
+      }
+    }
+  }
+}

package/src/dtcg/primitive/font.json

@@ -0,0 +1,61 @@
+{
+  "$description": "Font primitives. Family names are placeholders until the final sans and mono families are confirmed (spec section 3). Hebrew and Arabic fallbacks are part of the stack.",
+  "font": {
+    "family": {
+      "$type": "fontFamily",
+      "sans": {
+        "$value": [
+          "Inter",
+          "system-ui",
+          "-apple-system",
+          "Segoe UI",
+          "Roboto",
+          "Noto Sans Hebrew",
+          "Noto Sans Arabic",
+          "Helvetica Neue",
+          "Arial",
+          "sans-serif"
+        ]
+      },
+      "mono": {
+        "$value": [
+          "JetBrains Mono",
+          "ui-monospace",
+          "SFMono-Regular",
+          "Menlo",
+          "Consolas",
+          "Liberation Mono",
+          "monospace"
+        ]
+      }
+    },
+    "weight": {
+      "$type": "fontWeight",
+      "regular": { "$value": 400 },
+      "medium": { "$value": 500 },
+      "semibold": { "$value": 600 }
+    },
+    "size": {
+      "$type": "dimension",
+      "12": { "$value": "12px" },
+      "13": { "$value": "13px" },
+      "14": { "$value": "14px" },
+      "16": { "$value": "16px" },
+      "20": { "$value": "20px" },
+      "24": { "$value": "24px" },
+      "30": { "$value": "30px" },
+      "48": { "$value": "48px" }
+    },
+    "lineHeight": {
+      "$type": "dimension",
+      "16": { "$value": "16px" },
+      "20": { "$value": "20px" },
+      "22": { "$value": "22px" },
+      "24": { "$value": "24px" },
+      "28": { "$value": "28px" },
+      "32": { "$value": "32px" },
+      "38": { "$value": "38px" },
+      "56": { "$value": "56px" }
+    }
+  }
+}

package/src/dtcg/primitive/radius.json

@@ -0,0 +1,13 @@
+{
+  "$description": "Radius scale. Key is the pixel value.",
+  "radius": {
+    "$type": "dimension",
+    "2": { "$value": "2px" },
+    "4": { "$value": "4px" },
+    "6": { "$value": "6px" },
+    "8": { "$value": "8px" },
+    "12": { "$value": "12px" },
+    "16": { "$value": "16px" },
+    "full": { "$value": "9999px" }
+  }
+}

package/src/dtcg/primitive/size.json

@@ -0,0 +1,16 @@
+{
+  "$description": "Size scale for controls and icons. Key is the pixel value.",
+  "size": {
+    "$type": "dimension",
+    "12": { "$value": "12px" },
+    "16": { "$value": "16px" },
+    "20": { "$value": "20px" },
+    "24": { "$value": "24px" },
+    "28": { "$value": "28px" },
+    "32": { "$value": "32px" },
+    "40": { "$value": "40px" },
+    "44": { "$value": "44px" },
+    "48": { "$value": "48px" },
+    "56": { "$value": "56px" }
+  }
+}

package/src/dtcg/primitive/space.json

@@ -0,0 +1,20 @@
+{
+  "$description": "4px base grid. Scale: 0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96. Key N is N x 4px; 0-5 is 2px.",
+  "space": {
+    "$type": "dimension",
+    "0": { "$value": "0px" },
+    "0-5": { "$value": "2px" },
+    "1": { "$value": "4px" },
+    "2": { "$value": "8px" },
+    "3": { "$value": "12px" },
+    "4": { "$value": "16px" },
+    "5": { "$value": "20px" },
+    "6": { "$value": "24px" },
+    "8": { "$value": "32px" },
+    "10": { "$value": "40px" },
+    "12": { "$value": "48px" },
+    "16": { "$value": "64px" },
+    "20": { "$value": "80px" },
+    "24": { "$value": "96px" }
+  }
+}