@qpmtx/tokens 0.3.0

package/dist/groups/typography.js

@@ -0,0 +1,400 @@
+/**
+ * QPMatrix design tokens - group: typography
+ *
+ * AUTO-TRANSCRIBED from the owner's design source (tokens.json / tokens.css extracted
+ * from the QPMatrix Design System export). Do not hand-edit values here - regenerate
+ * from the live source per packages/.agents/skills/tokens/SKILL.md instead.
+ *
+ * Each entry mirrors the source JSON 1:1:
+ *   raw    - the literal CSS declaration value (may reference other vars)
+ *   resolved - raw fully dereferenced down to a literal (hex/rgba/px/...)
+ *   light  - present only for tokens overridden by [data-theme="light"]
+ *   usedByComponentBundle - whether the owner's component bundle references this token
+ */
+export const typography = {
+    "font-arabic": {
+        raw: '"IBM Plex Sans Arabic","IBM Plex Sans",ui-sans-serif,system-ui,sans-serif',
+        resolved: '"IBM Plex Sans Arabic","IBM Plex Sans",ui-sans-serif,system-ui,sans-serif',
+        usedByComponentBundle: false,
+    },
+    "font-display": {
+        raw: '"Space Grotesk",ui-sans-serif,system-ui,sans-serif',
+        resolved: '"Space Grotesk",ui-sans-serif,system-ui,sans-serif',
+        usedByComponentBundle: false,
+    },
+    "font-hebrew": {
+        raw: '"IBM Plex Sans Hebrew","IBM Plex Sans",ui-sans-serif,system-ui,sans-serif',
+        resolved: '"IBM Plex Sans Hebrew","IBM Plex Sans",ui-sans-serif,system-ui,sans-serif',
+        usedByComponentBundle: false,
+    },
+    "font-mono": {
+        raw: '"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace',
+        resolved: '"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace',
+        usedByComponentBundle: true,
+    },
+    "font-sans": {
+        raw: '"IBM Plex Sans","IBM Plex Sans Arabic","IBM Plex Sans Hebrew",ui-sans-serif,system-ui,-apple-system,sans-serif',
+        resolved: '"IBM Plex Sans","IBM Plex Sans Arabic","IBM Plex Sans Hebrew",ui-sans-serif,system-ui,-apple-system,sans-serif',
+        usedByComponentBundle: true,
+    },
+    "script-arabic-lh-adjust": {
+        raw: "1.12",
+        resolved: "1.12",
+        usedByComponentBundle: false,
+    },
+    "script-arabic-size-adjust": {
+        raw: "1.06",
+        resolved: "1.06",
+        usedByComponentBundle: false,
+    },
+    "script-hebrew-lh-adjust": {
+        raw: "1.06",
+        resolved: "1.06",
+        usedByComponentBundle: false,
+    },
+    "script-hebrew-size-adjust": {
+        raw: "1.02",
+        resolved: "1.02",
+        usedByComponentBundle: false,
+    },
+    "text-body-lg-lh": {
+        raw: "1.60",
+        resolved: "1.60",
+        usedByComponentBundle: false,
+    },
+    "text-body-lg-size": {
+        raw: "17px",
+        resolved: "17px",
+        usedByComponentBundle: false,
+    },
+    "text-body-lg-tracking": {
+        raw: "0em",
+        resolved: "0em",
+        usedByComponentBundle: false,
+    },
+    "text-body-lg-weight": {
+        raw: "400",
+        resolved: "400",
+        usedByComponentBundle: false,
+    },
+    "text-body-lh": {
+        raw: "1.60",
+        resolved: "1.60",
+        usedByComponentBundle: true,
+    },
+    "text-body-size": {
+        raw: "15px",
+        resolved: "15px",
+        usedByComponentBundle: true,
+    },
+    "text-body-sm-lh": {
+        raw: "1.55",
+        resolved: "1.55",
+        usedByComponentBundle: false,
+    },
+    "text-body-sm-size": {
+        raw: "13px",
+        resolved: "13px",
+        usedByComponentBundle: true,
+    },
+    "text-body-sm-tracking": {
+        raw: "0em",
+        resolved: "0em",
+        usedByComponentBundle: false,
+    },
+    "text-body-sm-weight": {
+        raw: "400",
+        resolved: "400",
+        usedByComponentBundle: false,
+    },
+    "text-body-tracking": {
+        raw: "0em",
+        resolved: "0em",
+        usedByComponentBundle: false,
+    },
+    "text-body-weight": {
+        raw: "400",
+        resolved: "400",
+        usedByComponentBundle: false,
+    },
+    "text-caption-lh": {
+        raw: "1.40",
+        resolved: "1.40",
+        usedByComponentBundle: false,
+    },
+    "text-caption-size": {
+        raw: "12px",
+        resolved: "12px",
+        usedByComponentBundle: true,
+    },
+    "text-caption-tracking": {
+        raw: "0.01em",
+        resolved: "0.01em",
+        usedByComponentBundle: false,
+    },
+    "text-caption-weight": {
+        raw: "400",
+        resolved: "400",
+        usedByComponentBundle: false,
+    },
+    "text-code-lh": {
+        raw: "1.60",
+        resolved: "1.60",
+        usedByComponentBundle: false,
+    },
+    "text-code-size": {
+        raw: "13px",
+        resolved: "13px",
+        usedByComponentBundle: false,
+    },
+    "text-code-tracking": {
+        raw: "0em",
+        resolved: "0em",
+        usedByComponentBundle: false,
+    },
+    "text-code-weight": {
+        raw: "400",
+        resolved: "400",
+        usedByComponentBundle: false,
+    },
+    "text-display-lg-lh": {
+        raw: "1.05",
+        resolved: "1.05",
+        usedByComponentBundle: false,
+    },
+    "text-display-lg-size": {
+        raw: "64px",
+        resolved: "64px",
+        usedByComponentBundle: false,
+    },
+    "text-display-lg-tracking": {
+        raw: "-0.02em",
+        resolved: "-0.02em",
+        usedByComponentBundle: false,
+    },
+    "text-display-lg-weight": {
+        raw: "600",
+        resolved: "600",
+        usedByComponentBundle: false,
+    },
+    "text-display-md-lh": {
+        raw: "1.10",
+        resolved: "1.10",
+        usedByComponentBundle: false,
+    },
+    "text-display-md-size": {
+        raw: "44px",
+        resolved: "44px",
+        usedByComponentBundle: false,
+    },
+    "text-display-md-tracking": {
+        raw: "-0.015em",
+        resolved: "-0.015em",
+        usedByComponentBundle: false,
+    },
+    "text-display-md-weight": {
+        raw: "600",
+        resolved: "600",
+        usedByComponentBundle: false,
+    },
+    "text-h1-lh": {
+        raw: "1.18",
+        resolved: "1.18",
+        usedByComponentBundle: false,
+    },
+    "text-h1-size": {
+        raw: "34px",
+        resolved: "34px",
+        usedByComponentBundle: false,
+    },
+    "text-h1-tracking": {
+        raw: "-0.01em",
+        resolved: "-0.01em",
+        usedByComponentBundle: false,
+    },
+    "text-h1-weight": {
+        raw: "600",
+        resolved: "600",
+        usedByComponentBundle: false,
+    },
+    "text-h2-lh": {
+        raw: "1.22",
+        resolved: "1.22",
+        usedByComponentBundle: false,
+    },
+    "text-h2-size": {
+        raw: "27px",
+        resolved: "27px",
+        usedByComponentBundle: false,
+    },
+    "text-h2-tracking": {
+        raw: "-0.01em",
+        resolved: "-0.01em",
+        usedByComponentBundle: false,
+    },
+    "text-h2-weight": {
+        raw: "600",
+        resolved: "600",
+        usedByComponentBundle: false,
+    },
+    "text-h3-lh": {
+        raw: "1.28",
+        resolved: "1.28",
+        usedByComponentBundle: false,
+    },
+    "text-h3-size": {
+        raw: "22px",
+        resolved: "22px",
+        usedByComponentBundle: true,
+    },
+    "text-h3-tracking": {
+        raw: "0em",
+        resolved: "0em",
+        usedByComponentBundle: false,
+    },
+    "text-h3-weight": {
+        raw: "600",
+        resolved: "600",
+        usedByComponentBundle: false,
+    },
+    "text-h4-lh": {
+        raw: "1.32",
+        resolved: "1.32",
+        usedByComponentBundle: false,
+    },
+    "text-h4-size": {
+        raw: "18px",
+        resolved: "18px",
+        usedByComponentBundle: false,
+    },
+    "text-h4-tracking": {
+        raw: "0em",
+        resolved: "0em",
+        usedByComponentBundle: false,
+    },
+    "text-h4-weight": {
+        raw: "600",
+        resolved: "600",
+        usedByComponentBundle: false,
+    },
+    "text-label-lg-lh": {
+        raw: "1.30",
+        resolved: "1.30",
+        usedByComponentBundle: false,
+    },
+    "text-label-lg-size": {
+        raw: "15px",
+        resolved: "15px",
+        usedByComponentBundle: true,
+    },
+    "text-label-lg-tracking": {
+        raw: "0em",
+        resolved: "0em",
+        usedByComponentBundle: false,
+    },
+    "text-label-lg-weight": {
+        raw: "500",
+        resolved: "500",
+        usedByComponentBundle: false,
+    },
+    "text-label-lh": {
+        raw: "1.30",
+        resolved: "1.30",
+        usedByComponentBundle: false,
+    },
+    "text-label-size": {
+        raw: "13px",
+        resolved: "13px",
+        usedByComponentBundle: true,
+    },
+    "text-label-sm-lh": {
+        raw: "1.30",
+        resolved: "1.30",
+        usedByComponentBundle: false,
+    },
+    "text-label-sm-size": {
+        raw: "12px",
+        resolved: "12px",
+        usedByComponentBundle: true,
+    },
+    "text-label-sm-tracking": {
+        raw: "0.01em",
+        resolved: "0.01em",
+        usedByComponentBundle: false,
+    },
+    "text-label-sm-weight": {
+        raw: "500",
+        resolved: "500",
+        usedByComponentBundle: false,
+    },
+    "text-label-tracking": {
+        raw: "0.005em",
+        resolved: "0.005em",
+        usedByComponentBundle: false,
+    },
+    "text-label-weight": {
+        raw: "500",
+        resolved: "500",
+        usedByComponentBundle: false,
+    },
+    "text-metric-compact-lh": {
+        raw: "1.10",
+        resolved: "1.10",
+        usedByComponentBundle: false,
+    },
+    "text-metric-compact-size": {
+        raw: "22px",
+        resolved: "22px",
+        usedByComponentBundle: true,
+    },
+    "text-metric-compact-tracking": {
+        raw: "-0.005em",
+        resolved: "-0.005em",
+        usedByComponentBundle: false,
+    },
+    "text-metric-compact-weight": {
+        raw: "600",
+        resolved: "600",
+        usedByComponentBundle: false,
+    },
+    "text-metric-lg-lh": {
+        raw: "1.00",
+        resolved: "1.00",
+        usedByComponentBundle: false,
+    },
+    "text-metric-lg-size": {
+        raw: "40px",
+        resolved: "40px",
+        usedByComponentBundle: true,
+    },
+    "text-metric-lg-tracking": {
+        raw: "-0.01em",
+        resolved: "-0.01em",
+        usedByComponentBundle: false,
+    },
+    "text-metric-lg-weight": {
+        raw: "600",
+        resolved: "600",
+        usedByComponentBundle: false,
+    },
+    "weight-bold": {
+        raw: "700",
+        resolved: "700",
+        usedByComponentBundle: false,
+    },
+    "weight-medium": {
+        raw: "500",
+        resolved: "500",
+        usedByComponentBundle: false,
+    },
+    "weight-regular": {
+        raw: "400",
+        resolved: "400",
+        usedByComponentBundle: false,
+    },
+    "weight-semibold": {
+        raw: "600",
+        resolved: "600",
+        usedByComponentBundle: false,
+    },
+};

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @qpmtx/tokens — framework-agnostic QPMatrix design token system.
+ *
+ * Ships two aligned deliverables generated from the same design source:
+ *   - CSS custom properties: import "@qpmtx/tokens/css" (see tokens.css)
+ *   - Typed token objects: the named exports below
+ *
+ * See README.md for the consumption model and
+ * packages/.agents/skills/tokens/SKILL.md for how to extend it.
+ */
+export { colorsAndGradients, type ColorsAndGradientsVarName } from "./groups/colors-and-gradients";
+export { elevationAndGlowShadows, type ElevationAndGlowShadowsVarName, } from "./groups/elevation-and-glow-shadows";
+export { motionAndZIndex, type MotionAndZIndexVarName } from "./groups/motion-and-zindex";
+export { radius, type RadiusVarName } from "./groups/radius";
+export { spacingAndLayout, type SpacingAndLayoutVarName } from "./groups/spacing-and-layout";
+export { typography, type TypographyVarName } from "./groups/typography";
+export { cssVar, type TokenVarName } from "./css-var";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAE,kBAAkB,EAAE,KAAK,yBAAyB,EAAE,MAAM,+BAA+B,CAAC;AACnG,OAAO,EACL,uBAAuB,EACvB,KAAK,8BAA8B,GACpC,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,KAAK,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAC1F,OAAO,EAAE,MAAM,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,KAAK,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAC7F,OAAO,EAAE,UAAU,EAAE,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEzE,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/dist/index.js

@@ -0,0 +1,17 @@
+/**
+ * @qpmtx/tokens — framework-agnostic QPMatrix design token system.
+ *
+ * Ships two aligned deliverables generated from the same design source:
+ *   - CSS custom properties: import "@qpmtx/tokens/css" (see tokens.css)
+ *   - Typed token objects: the named exports below
+ *
+ * See README.md for the consumption model and
+ * packages/.agents/skills/tokens/SKILL.md for how to extend it.
+ */
+export { colorsAndGradients } from "./groups/colors-and-gradients";
+export { elevationAndGlowShadows, } from "./groups/elevation-and-glow-shadows";
+export { motionAndZIndex } from "./groups/motion-and-zindex";
+export { radius } from "./groups/radius";
+export { spacingAndLayout } from "./groups/spacing-and-layout";
+export { typography } from "./groups/typography";
+export { cssVar } from "./css-var";

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@qpmtx/tokens",
+  "version": "0.3.0",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/QPMatrix/qpm-ui.git"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "tokens.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./css": "./tokens.css"
+  },
+  "devDependencies": {
+    "@qpmtx/tokens": "0.3.0",
+    "@qpmtx/typescript-config": "0.2.0",
+    "@types/bun": "^1.4.0"
+  },
+  "scripts": {
+    "build": "bun --bun tsc --build tsconfig.build.json --pretty false",
+    "test": "bun test"
+  }
+}