@dataverse-kit/design-tokens 0.1.0

package/README.md

@@ -0,0 +1,46 @@
+# @dataverse-kit/design-tokens
+
+The **single canonical source** of the Dynamics 365 design tokens — `colors`, `spacing`,
+`typography`, `radius`, and `layout`. Pure-TypeScript, **zero dependencies** (no React, no
+Fluent), so it is safe to import from any layer or framework-agnostic code.
+
+This package exists to end the token drift: the same hex/spacing values were previously
+re-declared in `@dataverse-kit/surface-kit`, `@khester/reusable-components`, and 10+ client
+projects. Those packages now re-export from here; new code (and client projects) should
+import the values directly.
+
+## Install
+
+```bash
+npm install @dataverse-kit/design-tokens
+```
+
+## Usage
+
+```ts
+import { colors, spacing, typography, radius, layout } from '@dataverse-kit/design-tokens';
+
+const styles = {
+  border: `1px solid ${colors.borderNeutral}`,
+  borderRadius: radius.card,
+  padding: spacing.md,
+  fontFamily: typography.fontFamily,
+  color: colors.textPrimary,
+};
+```
+
+## Exports
+
+| Export | Shape |
+|--------|-------|
+| `colors` | brand / neutral / text / surface / canvas / field fills + borders (Dynamics CE palette) |
+| `spacing` | `xs`…`xxl` (px scale) |
+| `typography` | Segoe UI font stacks + `fontSize` + `fontWeight` |
+| `radius` | `card` / `lg` corner radii |
+| `layout` | `labelColWidth` (the "Label : input" field-row label column) |
+
+All values are `as const`, so consumers keep the literal types (e.g. `typeof colors.brand`
+is `'#0078d4'`).
+
+> Note: `@khester/dynamics-utils` ships a separate, legacy spacing scale (`xs/s/m/l/xl`);
+> it is intentionally **not** unified into this package.

package/dist/index.cjs

@@ -0,0 +1,87 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  colors: () => colors,
+  layout: () => layout,
+  radius: () => radius,
+  spacing: () => spacing,
+  typography: () => typography
+});
+module.exports = __toCommonJS(src_exports);
+var colors = {
+  brand: "#0078d4",
+  brandHover: "#106ebe",
+  brandDark: "#005a9e",
+  borderNeutral: "#edebe9",
+  textPrimary: "#323130",
+  textSecondary: "#605e5c",
+  surface: "#ffffff",
+  surfaceAlt: "#f5f5f5",
+  // App canvas behind cards/forms (matches the Dynamics model-driven form background).
+  canvas: "#fafafa",
+  // Required-field asterisk / error accent (Fluent error red).
+  danger: "#a4262c",
+  // Field input: subtle idle fill + neutral border (Dynamics-style).
+  fieldFill: "#faf9f8",
+  fieldFillReadonly: "#f3f2f1",
+  fieldBorder: "#e1dfdd"
+};
+var spacing = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  xxl: 40
+};
+var typography = {
+  fontFamily: '"Segoe UI", Arial, sans-serif',
+  fontFamilySemibold: '"Segoe UI Semibold", "Segoe UI", sans-serif',
+  fontSize: {
+    sm: "12px",
+    smPlus: "13px",
+    md: "14px",
+    lg: "17px"
+  },
+  fontWeight: {
+    regular: 400,
+    semibold: 600
+  }
+};
+var radius = {
+  card: "4px",
+  // Softer rounding for the outer form shell (matches Dynamics cards).
+  lg: "8px"
+};
+var layout = {
+  // Width of the label column in a two-column "Label : input" field row.
+  labelColWidth: "130px"
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  colors,
+  layout,
+  radius,
+  spacing,
+  typography
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// @dataverse-kit/design-tokens\n//\n// The single canonical source of the Dynamics 365 design tokens — colors, spacing,\n// typography, radius, and layout. Pure-TS, ZERO dependencies (no react / no @fluentui),\n// so it is safe to import from any layer, framework-agnostic code, or client project.\n//\n// surface-kit and @khester/reusable-components re-export these (so existing imports keep\n// working); client projects should import them directly from here instead of re-declaring\n// the values (the drift this package exists to end).\n//\n// NOTE: @khester/dynamics-utils ships a SEPARATE, differently-named spacing scale\n// (xs/s/m/l/xl) for legacy reasons — it is intentionally NOT unified here.\n\nexport const colors = {\n  brand: '#0078d4',\n  brandHover: '#106ebe',\n  brandDark: '#005a9e',\n  borderNeutral: '#edebe9',\n  textPrimary: '#323130',\n  textSecondary: '#605e5c',\n  surface: '#ffffff',\n  surfaceAlt: '#f5f5f5',\n  // App canvas behind cards/forms (matches the Dynamics model-driven form background).\n  canvas: '#fafafa',\n  // Required-field asterisk / error accent (Fluent error red).\n  danger: '#a4262c',\n  // Field input: subtle idle fill + neutral border (Dynamics-style).\n  fieldFill: '#faf9f8',\n  fieldFillReadonly: '#f3f2f1',\n  fieldBorder: '#e1dfdd',\n} as const;\n\nexport const spacing = {\n  xs: 4,\n  sm: 8,\n  md: 12,\n  lg: 16,\n  xl: 24,\n  xxl: 40,\n} as const;\n\nexport const typography = {\n  fontFamily: '\"Segoe UI\", Arial, sans-serif',\n  fontFamilySemibold: '\"Segoe UI Semibold\", \"Segoe UI\", sans-serif',\n  fontSize: {\n    sm: '12px',\n    smPlus: '13px',\n    md: '14px',\n    lg: '17px',\n  },\n  fontWeight: {\n    regular: 400,\n    semibold: 600,\n  },\n} as const;\n\nexport const radius = {\n  card: '4px',\n  // Softer rounding for the outer form shell (matches Dynamics cards).\n  lg: '8px',\n} as const;\n\nexport const layout = {\n  // Width of the label column in a two-column \"Label : input\" field row.\n  labelColWidth: '130px',\n} as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaO,IAAM,SAAS;AAAA,EACpB,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,eAAe;AAAA,EACf,aAAa;AAAA,EACb,eAAe;AAAA,EACf,SAAS;AAAA,EACT,YAAY;AAAA;AAAA,EAEZ,QAAQ;AAAA;AAAA,EAER,QAAQ;AAAA;AAAA,EAER,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,aAAa;AACf;AAEO,IAAM,UAAU;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,IAAM,aAAa;AAAA,EACxB,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,UAAU;AAAA,IACR,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,YAAY;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AACF;AAEO,IAAM,SAAS;AAAA,EACpB,MAAM;AAAA;AAAA,EAEN,IAAI;AACN;AAEO,IAAM,SAAS;AAAA;AAAA,EAEpB,eAAe;AACjB;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,46 @@
+declare const colors: {
+    readonly brand: "#0078d4";
+    readonly brandHover: "#106ebe";
+    readonly brandDark: "#005a9e";
+    readonly borderNeutral: "#edebe9";
+    readonly textPrimary: "#323130";
+    readonly textSecondary: "#605e5c";
+    readonly surface: "#ffffff";
+    readonly surfaceAlt: "#f5f5f5";
+    readonly canvas: "#fafafa";
+    readonly danger: "#a4262c";
+    readonly fieldFill: "#faf9f8";
+    readonly fieldFillReadonly: "#f3f2f1";
+    readonly fieldBorder: "#e1dfdd";
+};
+declare const spacing: {
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 12;
+    readonly lg: 16;
+    readonly xl: 24;
+    readonly xxl: 40;
+};
+declare const typography: {
+    readonly fontFamily: "\"Segoe UI\", Arial, sans-serif";
+    readonly fontFamilySemibold: "\"Segoe UI Semibold\", \"Segoe UI\", sans-serif";
+    readonly fontSize: {
+        readonly sm: "12px";
+        readonly smPlus: "13px";
+        readonly md: "14px";
+        readonly lg: "17px";
+    };
+    readonly fontWeight: {
+        readonly regular: 400;
+        readonly semibold: 600;
+    };
+};
+declare const radius: {
+    readonly card: "4px";
+    readonly lg: "8px";
+};
+declare const layout: {
+    readonly labelColWidth: "130px";
+};
+
+export { colors, layout, radius, spacing, typography };

package/dist/index.d.ts

@@ -0,0 +1,46 @@
+declare const colors: {
+    readonly brand: "#0078d4";
+    readonly brandHover: "#106ebe";
+    readonly brandDark: "#005a9e";
+    readonly borderNeutral: "#edebe9";
+    readonly textPrimary: "#323130";
+    readonly textSecondary: "#605e5c";
+    readonly surface: "#ffffff";
+    readonly surfaceAlt: "#f5f5f5";
+    readonly canvas: "#fafafa";
+    readonly danger: "#a4262c";
+    readonly fieldFill: "#faf9f8";
+    readonly fieldFillReadonly: "#f3f2f1";
+    readonly fieldBorder: "#e1dfdd";
+};
+declare const spacing: {
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 12;
+    readonly lg: 16;
+    readonly xl: 24;
+    readonly xxl: 40;
+};
+declare const typography: {
+    readonly fontFamily: "\"Segoe UI\", Arial, sans-serif";
+    readonly fontFamilySemibold: "\"Segoe UI Semibold\", \"Segoe UI\", sans-serif";
+    readonly fontSize: {
+        readonly sm: "12px";
+        readonly smPlus: "13px";
+        readonly md: "14px";
+        readonly lg: "17px";
+    };
+    readonly fontWeight: {
+        readonly regular: 400;
+        readonly semibold: 600;
+    };
+};
+declare const radius: {
+    readonly card: "4px";
+    readonly lg: "8px";
+};
+declare const layout: {
+    readonly labelColWidth: "130px";
+};
+
+export { colors, layout, radius, spacing, typography };

package/dist/index.mjs

@@ -0,0 +1,58 @@
+// src/index.ts
+var colors = {
+  brand: "#0078d4",
+  brandHover: "#106ebe",
+  brandDark: "#005a9e",
+  borderNeutral: "#edebe9",
+  textPrimary: "#323130",
+  textSecondary: "#605e5c",
+  surface: "#ffffff",
+  surfaceAlt: "#f5f5f5",
+  // App canvas behind cards/forms (matches the Dynamics model-driven form background).
+  canvas: "#fafafa",
+  // Required-field asterisk / error accent (Fluent error red).
+  danger: "#a4262c",
+  // Field input: subtle idle fill + neutral border (Dynamics-style).
+  fieldFill: "#faf9f8",
+  fieldFillReadonly: "#f3f2f1",
+  fieldBorder: "#e1dfdd"
+};
+var spacing = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  xxl: 40
+};
+var typography = {
+  fontFamily: '"Segoe UI", Arial, sans-serif',
+  fontFamilySemibold: '"Segoe UI Semibold", "Segoe UI", sans-serif',
+  fontSize: {
+    sm: "12px",
+    smPlus: "13px",
+    md: "14px",
+    lg: "17px"
+  },
+  fontWeight: {
+    regular: 400,
+    semibold: 600
+  }
+};
+var radius = {
+  card: "4px",
+  // Softer rounding for the outer form shell (matches Dynamics cards).
+  lg: "8px"
+};
+var layout = {
+  // Width of the label column in a two-column "Label : input" field row.
+  labelColWidth: "130px"
+};
+export {
+  colors,
+  layout,
+  radius,
+  spacing,
+  typography
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// @dataverse-kit/design-tokens\n//\n// The single canonical source of the Dynamics 365 design tokens — colors, spacing,\n// typography, radius, and layout. Pure-TS, ZERO dependencies (no react / no @fluentui),\n// so it is safe to import from any layer, framework-agnostic code, or client project.\n//\n// surface-kit and @khester/reusable-components re-export these (so existing imports keep\n// working); client projects should import them directly from here instead of re-declaring\n// the values (the drift this package exists to end).\n//\n// NOTE: @khester/dynamics-utils ships a SEPARATE, differently-named spacing scale\n// (xs/s/m/l/xl) for legacy reasons — it is intentionally NOT unified here.\n\nexport const colors = {\n  brand: '#0078d4',\n  brandHover: '#106ebe',\n  brandDark: '#005a9e',\n  borderNeutral: '#edebe9',\n  textPrimary: '#323130',\n  textSecondary: '#605e5c',\n  surface: '#ffffff',\n  surfaceAlt: '#f5f5f5',\n  // App canvas behind cards/forms (matches the Dynamics model-driven form background).\n  canvas: '#fafafa',\n  // Required-field asterisk / error accent (Fluent error red).\n  danger: '#a4262c',\n  // Field input: subtle idle fill + neutral border (Dynamics-style).\n  fieldFill: '#faf9f8',\n  fieldFillReadonly: '#f3f2f1',\n  fieldBorder: '#e1dfdd',\n} as const;\n\nexport const spacing = {\n  xs: 4,\n  sm: 8,\n  md: 12,\n  lg: 16,\n  xl: 24,\n  xxl: 40,\n} as const;\n\nexport const typography = {\n  fontFamily: '\"Segoe UI\", Arial, sans-serif',\n  fontFamilySemibold: '\"Segoe UI Semibold\", \"Segoe UI\", sans-serif',\n  fontSize: {\n    sm: '12px',\n    smPlus: '13px',\n    md: '14px',\n    lg: '17px',\n  },\n  fontWeight: {\n    regular: 400,\n    semibold: 600,\n  },\n} as const;\n\nexport const radius = {\n  card: '4px',\n  // Softer rounding for the outer form shell (matches Dynamics cards).\n  lg: '8px',\n} as const;\n\nexport const layout = {\n  // Width of the label column in a two-column \"Label : input\" field row.\n  labelColWidth: '130px',\n} as const;\n"],"mappings":";AAaO,IAAM,SAAS;AAAA,EACpB,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,eAAe;AAAA,EACf,aAAa;AAAA,EACb,eAAe;AAAA,EACf,SAAS;AAAA,EACT,YAAY;AAAA;AAAA,EAEZ,QAAQ;AAAA;AAAA,EAER,QAAQ;AAAA;AAAA,EAER,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,aAAa;AACf;AAEO,IAAM,UAAU;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,IAAM,aAAa;AAAA,EACxB,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,UAAU;AAAA,IACR,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,YAAY;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AACF;AAEO,IAAM,SAAS;AAAA,EACpB,MAAM;AAAA;AAAA,EAEN,IAAI;AACN;AAEO,IAAM,SAAS;AAAA;AAAA,EAEpB,eAAe;AACjB;","names":[]}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@dataverse-kit/design-tokens",
+  "version": "0.1.0",
+  "description": "Canonical Dynamics 365 design tokens (colors, spacing, typography, radius, layout) — pure-TS, zero-dependency. The single source consumed by surface-kit, reusable-components, and client projects.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "clean": "rimraf dist",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "dynamics-365",
+    "design-tokens",
+    "power-platform",
+    "fluent"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.3"
+  }
+}