@mdwrk/ui-tokens 1.0.1 → 1.2.0

package/README.md

@@ -9,6 +9,7 @@ Shared CSS tokens, root variables, markdown/editor class names, and theme mappin
 - token and class-name re-exports aligned to `mdwrk/theme-contract`
 - theme CSS generation helpers for first-party and third-party consumers
 - renderer/editor bridge variable helpers
+- the Phase 9 rhythm/layout token surfaces used by editor gutters, preview heading rhythm, and responsive shell width
 
 ## CSS entry points
 
@@ -54,3 +55,5 @@ const rendererCss = renderThemeBridgeCssVariables(
 ## Contract alignment
 
 The exported token names, theme classes, and bridge definitions align with `mdwrk/theme-contract`. That keeps the implemented styling primitives aligned with the normative contract package.
+
+Phase 9 expands that alignment to include editor/preview rhythm tokens and the mobile-width token surfaces consumed by the active client responsive shell.

package/dist/tokens.d.ts

@@ -3,7 +3,7 @@ export { MARKDOWN_WORKSPACE_THEME_TOKEN_NAMES, MARKDOWN_WORKSPACE_THEME_TOKENS,
 export type MarkdownWorkspaceUiTokenName = MarkdownWorkspaceThemeTokenName;
 export type MarkdownWorkspaceUiTokenMap = MarkdownWorkspaceThemeTokenMap;
 export type UiTokenDefinition = ThemeTokenDefinition;
-export declare const MARKDOWN_WORKSPACE_UI_TOKEN_NAMES: readonly ["ui-scale", "header-height", "rail-width", "rail-height", "sidebar-width", "status-height", "tab-height", "panel-header-height", "rail-btn-size", "bg-app", "bg-panel", "bg-inset", "border-color", "border-width", "fg-primary", "fg-secondary", "fg-muted", "accent", "table-header-bg", "table-header-fg", "table-row-primary-bg", "table-row-secondary-bg", "status-ok", "status-warn", "status-error", "app-gap", "texture-opacity", "editor-padding", "file-indent-base", "file-indent-unit", "c-explorer-hover", "c-explorer-selected", "c-explorer-selected-text", "c-explorer-drag-bg", "font-ui", "font-mono", "font-head"];
+export declare const MARKDOWN_WORKSPACE_UI_TOKEN_NAMES: readonly ["ui-scale", "header-height", "rail-width", "rail-height", "sidebar-width", "status-height", "tab-height", "panel-header-height", "rail-btn-size", "bg-app", "bg-panel", "bg-inset", "border-color", "border-width", "fg-primary", "fg-secondary", "fg-muted", "accent", "table-header-bg", "table-header-fg", "table-row-primary-bg", "table-row-secondary-bg", "status-ok", "status-warn", "status-error", "app-gap", "texture-opacity", "editor-padding", "editor-line-height", "editor-line-rhythm", "markdown-line-height", "markdown-heading-line-height", "line-number-gutter-width", "mobile-rail-expanded-width", "mobile-expandable-rail-width", "file-indent-base", "file-indent-unit", "c-explorer-hover", "c-explorer-selected", "c-explorer-selected-text", "c-explorer-drag-bg", "font-ui", "font-mono", "font-head"];
 export declare const MARKDOWN_WORKSPACE_UI_TOKENS: readonly [{
     readonly name: "ui-scale";
     readonly cssCustomProperty: "--ui-scale";
@@ -200,6 +200,55 @@ export declare const MARKDOWN_WORKSPACE_UI_TOKENS: readonly [{
     readonly description: "Editor inner padding.";
     readonly defaultValue: "calc(24px * var(--ui-scale))";
     readonly stability: "stable";
+}, {
+    readonly name: "editor-line-height";
+    readonly cssCustomProperty: "--editor-line-height";
+    readonly category: "typography";
+    readonly description: "Base editor line height.";
+    readonly defaultValue: "calc(1.5rem * var(--ui-scale))";
+    readonly stability: "stable";
+}, {
+    readonly name: "editor-line-rhythm";
+    readonly cssCustomProperty: "--editor-line-rhythm";
+    readonly category: "typography";
+    readonly description: "Shared editor line rhythm used by the textarea and gutter.";
+    readonly defaultValue: "var(--editor-line-height)";
+    readonly stability: "stable";
+}, {
+    readonly name: "markdown-line-height";
+    readonly cssCustomProperty: "--markdown-line-height";
+    readonly category: "typography";
+    readonly description: "Base Markdown body line height.";
+    readonly defaultValue: "var(--editor-line-rhythm)";
+    readonly stability: "stable";
+}, {
+    readonly name: "markdown-heading-line-height";
+    readonly cssCustomProperty: "--markdown-heading-line-height";
+    readonly category: "typography";
+    readonly description: "Markdown heading line height.";
+    readonly defaultValue: "calc(1.1 + ((var(--ui-scale) - 1) * 0.35))";
+    readonly stability: "stable";
+}, {
+    readonly name: "line-number-gutter-width";
+    readonly cssCustomProperty: "--line-number-gutter-width";
+    readonly category: "layout";
+    readonly description: "Width of the editor line-number gutter.";
+    readonly defaultValue: "calc(30px * var(--ui-scale))";
+    readonly stability: "stable";
+}, {
+    readonly name: "mobile-rail-expanded-width";
+    readonly cssCustomProperty: "--mobile-rail-expanded-width";
+    readonly category: "layout";
+    readonly description: "Expanded width for the rail on narrow mobile layouts.";
+    readonly defaultValue: "100vw";
+    readonly stability: "stable";
+}, {
+    readonly name: "mobile-expandable-rail-width";
+    readonly cssCustomProperty: "--mobile-expandable-rail-width";
+    readonly category: "layout";
+    readonly description: "Token used by responsive layouts for expandable rail width.";
+    readonly defaultValue: "var(--mobile-rail-expanded-width)";
+    readonly stability: "stable";
 }, {
     readonly name: "file-indent-base";
     readonly cssCustomProperty: "--file-indent-base";
@@ -264,6 +313,6 @@ export declare const MARKDOWN_WORKSPACE_UI_TOKENS: readonly [{
     readonly defaultValue: "'Inter', sans-serif";
     readonly stability: "stable";
 }];
-export declare const MARKDOWN_WORKSPACE_TOKEN_DEFAULTS: Readonly<Readonly<Record<"ui-scale" | "header-height" | "rail-width" | "rail-height" | "sidebar-width" | "status-height" | "tab-height" | "panel-header-height" | "rail-btn-size" | "bg-app" | "bg-panel" | "bg-inset" | "border-color" | "border-width" | "fg-primary" | "fg-secondary" | "fg-muted" | "accent" | "table-header-bg" | "table-header-fg" | "table-row-primary-bg" | "table-row-secondary-bg" | "status-ok" | "status-warn" | "status-error" | "app-gap" | "texture-opacity" | "editor-padding" | "file-indent-base" | "file-indent-unit" | "c-explorer-hover" | "c-explorer-selected" | "c-explorer-selected-text" | "c-explorer-drag-bg" | "font-ui" | "font-mono" | "font-head", string>>>;
+export declare const MARKDOWN_WORKSPACE_TOKEN_DEFAULTS: Readonly<Readonly<Record<"ui-scale" | "header-height" | "rail-width" | "rail-height" | "sidebar-width" | "status-height" | "tab-height" | "panel-header-height" | "rail-btn-size" | "bg-app" | "bg-panel" | "bg-inset" | "border-color" | "border-width" | "fg-primary" | "fg-secondary" | "fg-muted" | "accent" | "table-header-bg" | "table-header-fg" | "table-row-primary-bg" | "table-row-secondary-bg" | "status-ok" | "status-warn" | "status-error" | "app-gap" | "texture-opacity" | "editor-padding" | "editor-line-height" | "editor-line-rhythm" | "markdown-line-height" | "markdown-heading-line-height" | "line-number-gutter-width" | "mobile-rail-expanded-width" | "mobile-expandable-rail-width" | "file-indent-base" | "file-indent-unit" | "c-explorer-hover" | "c-explorer-selected" | "c-explorer-selected-text" | "c-explorer-drag-bg" | "font-ui" | "font-mono" | "font-head", string>>>;
 export declare const MARKDOWN_WORKSPACE_TOKEN_CSS_CUSTOM_PROPERTIES: readonly ThemeTokenDefinition["cssCustomProperty"][];
 //# sourceMappingURL=tokens.d.ts.map

package/dist/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,8BAA8B,EACnC,KAAK,+BAA+B,EACpC,KAAK,oBAAoB,EAC1B,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EACL,oCAAoC,EACpC,+BAA+B,EAC/B,KAAK,8BAA8B,EACnC,KAAK,+BAA+B,EACpC,KAAK,oBAAoB,GAC1B,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,4BAA4B,GAAG,+BAA+B,CAAC;AAC3E,MAAM,MAAM,2BAA2B,GAAG,8BAA8B,CAAC;AACzE,MAAM,MAAM,iBAAiB,GAAG,oBAAoB,CAAC;AAErD,eAAO,MAAM,iCAAiC,inBAAuC,CAAC;AACtF,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAkC,CAAC;AAE5E,eAAO,MAAM,iCAAiC,8qBAI7C,CAAC;AAEF,eAAO,MAAM,8CAA8C,EAEtD,SAAS,oBAAoB,CAAC,mBAAmB,CAAC,EAAE,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,8BAA8B,EACnC,KAAK,+BAA+B,EACpC,KAAK,oBAAoB,EAC1B,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EACL,oCAAoC,EACpC,+BAA+B,EAC/B,KAAK,8BAA8B,EACnC,KAAK,+BAA+B,EACpC,KAAK,oBAAoB,GAC1B,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,4BAA4B,GAAG,+BAA+B,CAAC;AAC3E,MAAM,MAAM,2BAA2B,GAAG,8BAA8B,CAAC;AACzE,MAAM,MAAM,iBAAiB,GAAG,oBAAoB,CAAC;AAErD,eAAO,MAAM,iCAAiC,+yBAAuC,CAAC;AACtF,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAkC,CAAC;AAE5E,eAAO,MAAM,iCAAiC,m3BAI7C,CAAC;AAEF,eAAO,MAAM,8CAA8C,EAEtD,SAAS,oBAAoB,CAAC,mBAAmB,CAAC,EAAE,CAAC"}

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const UI_TOKENS_PACKAGE_VERSION: "1.0.1";
+export declare const UI_TOKENS_VERSION = "1.2.0-rc.1";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,yBAAyB,EAAG,OAAgB,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,eAAe,CAAC"}

package/dist/version.js

@@ -1,2 +1,2 @@
-export const UI_TOKENS_PACKAGE_VERSION = "1.0.1";
+export const UI_TOKENS_VERSION = "1.2.0-rc.1";
 //# sourceMappingURL=version.js.map

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,yBAAyB,GAAG,OAAgB,CAAC"}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,iBAAiB,GAAG,YAAY,CAAC"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.1",
+  "version": "1.2.0",
   "type": "module",
   "license": "Apache-2.0",
   "publishConfig": {
@@ -26,7 +26,7 @@
     "themes"
   ],
   "dependencies": {
-    "@mdwrk/theme-contract": "^1.0.0"
+    "@mdwrk/theme-contract": "^1.1.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/styles/markdown.css

@@ -3,7 +3,7 @@
 /* MARKDOWN STYLES (Scoped) */
 .markdown-body {
   font-family: var(--font-ui);
-  line-height: 1.6;
+  line-height: var(--markdown-line-height);
   font-size: calc(0.95rem * var(--ui-scale));
   color: var(--fg-primary);
   overflow-wrap: anywhere;
@@ -18,9 +18,10 @@
 .markdown-body h6 {
   font-family: var(--font-head);
   color: var(--fg-primary);
-  margin-top: 1.5em;
+  margin-top: 0.25em;
   margin-bottom: 0.5em;
   font-weight: 700;
+  line-height: var(--markdown-heading-line-height);
 }
 
 .markdown-body h1 { font-size: calc(2em * var(--ui-scale)); border-bottom: 1px solid var(--border-color); padding-bottom: 0.3em; }
@@ -148,6 +149,82 @@
   bottom: -0.2em;
 }
 
+.markdown-body .md-footnote-reference {
+  margin-left: 0.1em;
+}
+
+.markdown-body .md-footnotes {
+  margin-top: 2rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border-color);
+  color: var(--fg-secondary);
+  font-size: calc(0.9rem * var(--ui-scale));
+}
+
+.markdown-body .md-footnotes ol {
+  padding-left: 1.5rem;
+}
+
+.markdown-body .md-footnote-backlink {
+  margin-left: 0.5rem;
+  font-size: 0.9em;
+}
+
+.markdown-body .md-definition-list {
+  display: grid;
+  grid-template-columns: minmax(10rem, 16rem) 1fr;
+  gap: 0.5rem 1rem;
+  margin: 1rem 0 1.25rem;
+}
+
+.markdown-body .md-definition-term {
+  font-weight: 700;
+}
+
+.markdown-body .md-definition-description {
+  margin: 0;
+}
+
+.markdown-body .md-definition-description > *:first-child {
+  margin-top: 0;
+}
+
+.markdown-body .md-math-inline code,
+.markdown-body .md-math-block code {
+  font-family: var(--font-mono);
+}
+
+.markdown-body .md-math-inline {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 0.2em;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+}
+
+.markdown-body .md-math-block {
+  margin: 1rem 0;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--bg-inset);
+}
+
+.markdown-body .md-math-block pre {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+}
+
+.markdown-body .md-citation {
+  font-style: normal;
+  color: var(--fg-secondary);
+  background: color-mix(in srgb, var(--fg-secondary) 12%, transparent);
+  border-radius: 4px;
+  padding: 0 0.25em;
+}
+
 /* Table Styles */
 .markdown-body table,
 .markdown-body .md-table {

package/src/styles/root.css

@@ -39,6 +39,13 @@
   --app-gap: calc(4px * var(--ui-scale)); 
   --texture-opacity: 0.05;
   --editor-padding: calc(24px * var(--ui-scale));
+  --editor-line-height: calc(1.5rem * var(--ui-scale));
+  --editor-line-rhythm: var(--editor-line-height);
+  --markdown-line-height: var(--editor-line-rhythm);
+  --markdown-heading-line-height: calc(1.1 + ((var(--ui-scale) - 1) * 0.35));
+  --line-number-gutter-width: calc(30px * var(--ui-scale));
+  --mobile-rail-expanded-width: 100vw;
+  --mobile-expandable-rail-width: var(--mobile-rail-expanded-width);
   --file-indent-base: calc(12px * var(--ui-scale));
   --file-indent-unit: calc(12px * var(--ui-scale));
   --c-explorer-hover: rgba(0, 0, 0, 0.06);