@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1 → 2.1.0

package/src/bridge/pureRender/theme.ts

@@ -1,258 +1,258 @@
-import type { PureRenderTheme } from './types.js'
-
-export const DEFAULT_PURE_RENDER_THEME: PureRenderTheme = {
-  $schema: 'https://pure.science/render-theme/v1',
-  name: 'Default',
-  version: '1.0.0',
-  color: {
-    ink: '#16181D',
-    'ink-soft': '#3C4049',
-    muted: '#71757E',
-    surface: '#FFFFFF',
-    paper: '#FFFFFF',
-    rule: '#C9CBD0',
-    'rule-soft': '#E4E5E9',
-    accent: '#1F39C4',
-    'accent-ink': '#1426C9',
-  },
-  type: {
-    body: '10.6pt',
-    lead: 1.5,
-    measure: '34rem',
-    scaleRatio: 1.333,
-    fonts: {
-      display: '"Archivo", system-ui, sans-serif',
-      serif: '"Source Serif 4", Georgia, serif',
-      sans: '"Archivo", system-ui, sans-serif',
-      mono: '"JetBrains Mono", ui-monospace, monospace',
-    },
-  },
-  rhythm: '15.9pt',
-  page: { trim: 'A4', columns: 1, recto_verso: true },
-  setting: { align: 'justified', hyphenate: true },
-  enforced_rules: [],
-}
-
-export function themeToPureRenderTokenCss(
-  theme: PureRenderTheme = DEFAULT_PURE_RENDER_THEME,
-): string {
-  const paper = theme.color.paper ?? theme.color.surface ?? '#FFFFFF'
-  const display = theme.type.fonts.display ?? theme.type.fonts.sans
-  const ratio = theme.type.scaleRatio || 1.333
-  const body = parsePoint(theme.type.body, 10.6)
-  const cap = roundPoint(body / 1.26)
-  const h3 = roundPoint(body * 1.18)
-  const h2 = roundPoint(h3 * ratio * 0.9)
-  const h1 = roundPoint(h2 * ratio * 1.2)
-  const title = roundPoint(h1 * 1.25)
-  const profileVars = profileRuleCssVariables(theme)
-
-  return `:root{
-  --ink:${theme.color.ink}; --ink-soft:${theme.color['ink-soft']}; --muted:${theme.color.muted}; --paper:${paper};
-  --rule:${theme.color.rule}; --rule-soft:${theme.color['rule-soft']}; --accent:${theme.color.accent}; --accent-ink:${theme.color['accent-ink'] ?? theme.color.accent};
-
-  --body:${theme.type.body}; --lead:${theme.type.lead};
-  --measure:${theme.type.measure};
-  --display:${display};
-  --serif:${theme.type.fonts.serif};
-  --sans:${theme.type.fonts.sans};
-  --mono:${theme.type.fonts.mono};
-
-  --t-cap:${cap}pt; --t-body:${body}pt; --t-h3:${h3}pt; --t-h2:${h2}pt; --t-h1:${h1}pt; --t-title:${title}pt;
-  --rhythm:${theme.rhythm};
-  --theme-text-align:${theme.setting?.align === 'flush-left' ? 'left' : 'justify'};
-  --theme-hyphenate:${theme.setting?.hyphenate === false ? 'manual' : 'auto'};
-  --text-align:var(--theme-text-align);
-  --hyphenate:var(--theme-hyphenate);
-${profileVars}
-}`
-}
-
-export function parsePureRenderThemeJson(text: string): PureRenderTheme {
-  const parsed = JSON.parse(text) as unknown
-  if (!isPureRenderTheme(parsed)) {
-    throw new Error('Theme JSON does not match the Pure Render theme shape')
-  }
-  return parsed
-}
-
-export function isPureRenderTheme(value: unknown): value is PureRenderTheme {
-  if (!value || typeof value !== 'object') return false
-  const theme = value as Partial<PureRenderTheme>
-  return (
-    typeof theme.name === 'string' &&
-    typeof theme.version === 'string' &&
-    Boolean(theme.color) &&
-    typeof theme.color === 'object' &&
-    typeof theme.color.ink === 'string' &&
-    typeof theme.color['ink-soft'] === 'string' &&
-    typeof theme.color.muted === 'string' &&
-    typeof theme.color.rule === 'string' &&
-    typeof theme.color['rule-soft'] === 'string' &&
-    typeof theme.color.accent === 'string' &&
-    Boolean(theme.type) &&
-    typeof theme.type === 'object' &&
-    typeof theme.type.body === 'string' &&
-    typeof theme.type.measure === 'string' &&
-    Boolean(theme.type.fonts) &&
-    typeof theme.type.fonts === 'object' &&
-    typeof theme.type.fonts.serif === 'string' &&
-    typeof theme.type.fonts.sans === 'string' &&
-    typeof theme.type.fonts.mono === 'string' &&
-    typeof theme.rhythm === 'string'
-  )
-}
-
-function parsePoint(value: string, fallback: number): number {
-  const match = /^(\d+(?:\.\d+)?)pt$/.exec(value.trim())
-  return match ? Number.parseFloat(match[1]) : fallback
-}
-
-function roundPoint(value: number): number {
-  return Math.round(value * 10) / 10
-}
-
-function profileRuleCssVariables(theme: PureRenderTheme): string {
-  const rules = theme.profile_rules
-  if (!rules) {
-    return [
-      '  --running-head-transform:uppercase;',
-      '  --running-head-rule:0;',
-      '  --folio-display:initial;',
-      '  --chapter-opener-padding:0;',
-      '  --chapter-ornament-display:none;',
-      '  --chapter-ornament-border:0;',
-      '  --table-rule-width:1px;',
-      '  --table-row-rule-width:.5px;',
-      '  --table-header-bg:transparent;',
-      '  --table-header-ink:var(--ink);',
-      '  --table-header-rule-color:var(--rule);',
-      '  --table-row-rule-color:var(--rule-soft);',
-      '  --table-cell-padding-y:.32rem;',
-      '  --table-cell-padding-x:.6rem;',
-      '  --table-header-transform:uppercase;',
-      '  --table-header-letter-spacing:.04em;',
-      '  --caption-label-weight:700;',
-      '  --caption-label-transform:none;',
-    ].join('\n')
-  }
-
-  const tableRule = ruleWidth(rules.table?.rule_weight)
-  const ornamentWidth = ruleWidth(rules.ornaments?.weight)
-  const density = tableDensity(rules.table?.density)
-  const header = tableHeader(rules.table?.header_treatment)
-  return [
-    `  --running-head-transform:${textTransform(rules.running_heads?.transform)};`,
-    `  --running-head-rule:${rules.running_heads?.rule === 'hairline' ? '.5px' : rules.running_heads?.rule === 'solid' ? '1px' : '0'};`,
-    `  --folio-display:${rules.folio?.position === 'none' ? 'none' : 'initial'};`,
-    `  --chapter-opener-padding:${openerPadding(rules.opener?.spacing)};`,
-    `  --chapter-ornament-display:${rules.opener?.ornament && rules.opener.ornament !== 'none' ? 'block' : rules.ornaments?.kind && rules.ornaments.kind !== 'none' ? 'block' : 'none'};`,
-    `  --chapter-ornament-border:${ornamentWidth};`,
-    `  --table-rule-width:${tableRule};`,
-    `  --table-row-rule-width:${density.rowRuleWidth};`,
-    `  --table-header-bg:${header.bg};`,
-    `  --table-header-ink:${header.ink};`,
-    `  --table-header-rule-color:${header.ruleColor};`,
-    `  --table-row-rule-color:${density.rowRuleColor};`,
-    `  --table-cell-padding-y:${density.paddingY};`,
-    `  --table-cell-padding-x:${density.paddingX};`,
-    `  --table-header-transform:${header.transform};`,
-    `  --table-header-letter-spacing:${header.letterSpacing};`,
-    `  --caption-label-weight:${rules.caption?.label_style === 'plain' ? '400' : '700'};`,
-    `  --caption-label-transform:${rules.caption?.label_style === 'small-caps' ? 'uppercase' : 'none'};`,
-  ].join('\n')
-}
-
-function ruleWidth(value: string | undefined): string {
-  if (value === 'hairline') return '.5px'
-  if (value === 'light') return '1px'
-  if (value === 'medium') return '1.5px'
-  return '1px'
-}
-
-function openerPadding(value: string | undefined): string {
-  if (value === 'compact') return '8%'
-  if (value === 'generous') return '28%'
-  if (value === 'balanced') return '18%'
-  return '0'
-}
-
-function tableDensity(value: string | undefined): {
-  rowRuleWidth: string
-  rowRuleColor: string
-  paddingY: string
-  paddingX: string
-} {
-  if (value === 'airy') {
-    return {
-      rowRuleWidth: '0',
-      rowRuleColor: 'transparent',
-      paddingY: '.46rem',
-      paddingX: '.7rem',
-    }
-  }
-  if (value === 'dense' || value === 'compact') {
-    return {
-      rowRuleWidth: '.5px',
-      rowRuleColor: 'var(--rule-soft)',
-      paddingY: '.24rem',
-      paddingX: '.45rem',
-    }
-  }
-  return {
-    rowRuleWidth: '.5px',
-    rowRuleColor: 'var(--rule-soft)',
-    paddingY: '.32rem',
-    paddingX: '.6rem',
-  }
-}
-
-function tableHeader(value: string | undefined): {
-  bg: string
-  ink: string
-  ruleColor: string
-  transform: string
-  letterSpacing: string
-} {
-  if (value === 'shaded') {
-    return {
-      bg: 'color-mix(in srgb, var(--accent) 10%, var(--paper))',
-      ink: 'var(--ink)',
-      ruleColor: 'var(--accent)',
-      transform: 'none',
-      letterSpacing: '0',
-    }
-  }
-  if (value === 'accent') {
-    return {
-      bg: 'var(--accent)',
-      ink: 'var(--paper)',
-      ruleColor: 'var(--accent)',
-      transform: 'none',
-      letterSpacing: '0',
-    }
-  }
-  if (value === 'plain') {
-    return {
-      bg: 'transparent',
-      ink: 'var(--ink)',
-      ruleColor: 'var(--rule-soft)',
-      transform: 'none',
-      letterSpacing: '0',
-    }
-  }
-  return {
-    bg: 'transparent',
-    ink: 'var(--ink)',
-    ruleColor: 'var(--rule)',
-    transform: 'uppercase',
-    letterSpacing: '.04em',
-  }
-}
-
-function textTransform(value: string | undefined): string {
-  if (value === 'small-caps') return 'uppercase'
-  if (value === 'title-case') return 'none'
-  if (value === 'none') return 'none'
-  return 'uppercase'
-}
+import type { PureRenderTheme } from './types.js'
+
+export const DEFAULT_PURE_RENDER_THEME: PureRenderTheme = {
+  $schema: 'https://pure.science/render-theme/v1',
+  name: 'Default',
+  version: '1.0.0',
+  color: {
+    ink: '#16181D',
+    'ink-soft': '#3C4049',
+    muted: '#71757E',
+    surface: '#FFFFFF',
+    paper: '#FFFFFF',
+    rule: '#C9CBD0',
+    'rule-soft': '#E4E5E9',
+    accent: '#1F39C4',
+    'accent-ink': '#1426C9',
+  },
+  type: {
+    body: '10.6pt',
+    lead: 1.5,
+    measure: '34rem',
+    scaleRatio: 1.333,
+    fonts: {
+      display: '"Archivo", system-ui, sans-serif',
+      serif: '"Source Serif 4", Georgia, serif',
+      sans: '"Archivo", system-ui, sans-serif',
+      mono: '"JetBrains Mono", ui-monospace, monospace',
+    },
+  },
+  rhythm: '15.9pt',
+  page: { trim: 'A4', columns: 1, recto_verso: true },
+  setting: { align: 'justified', hyphenate: true },
+  enforced_rules: [],
+}
+
+export function themeToPureRenderTokenCss(
+  theme: PureRenderTheme = DEFAULT_PURE_RENDER_THEME,
+): string {
+  const paper = theme.color.paper ?? theme.color.surface ?? '#FFFFFF'
+  const display = theme.type.fonts.display ?? theme.type.fonts.sans
+  const ratio = theme.type.scaleRatio || 1.333
+  const body = parsePoint(theme.type.body, 10.6)
+  const cap = roundPoint(body / 1.26)
+  const h3 = roundPoint(body * 1.18)
+  const h2 = roundPoint(h3 * ratio * 0.9)
+  const h1 = roundPoint(h2 * ratio * 1.2)
+  const title = roundPoint(h1 * 1.25)
+  const profileVars = profileRuleCssVariables(theme)
+
+  return `:root{
+  --ink:${theme.color.ink}; --ink-soft:${theme.color['ink-soft']}; --muted:${theme.color.muted}; --paper:${paper};
+  --rule:${theme.color.rule}; --rule-soft:${theme.color['rule-soft']}; --accent:${theme.color.accent}; --accent-ink:${theme.color['accent-ink'] ?? theme.color.accent};
+
+  --body:${theme.type.body}; --lead:${theme.type.lead};
+  --measure:${theme.type.measure};
+  --display:${display};
+  --serif:${theme.type.fonts.serif};
+  --sans:${theme.type.fonts.sans};
+  --mono:${theme.type.fonts.mono};
+
+  --t-cap:${cap}pt; --t-body:${body}pt; --t-h3:${h3}pt; --t-h2:${h2}pt; --t-h1:${h1}pt; --t-title:${title}pt;
+  --rhythm:${theme.rhythm};
+  --theme-text-align:${theme.setting?.align === 'flush-left' ? 'left' : 'justify'};
+  --theme-hyphenate:${theme.setting?.hyphenate === false ? 'manual' : 'auto'};
+  --text-align:var(--theme-text-align);
+  --hyphenate:var(--theme-hyphenate);
+${profileVars}
+}`
+}
+
+export function parsePureRenderThemeJson(text: string): PureRenderTheme {
+  const parsed = JSON.parse(text) as unknown
+  if (!isPureRenderTheme(parsed)) {
+    throw new Error('Theme JSON does not match the Pure Render theme shape')
+  }
+  return parsed
+}
+
+export function isPureRenderTheme(value: unknown): value is PureRenderTheme {
+  if (!value || typeof value !== 'object') return false
+  const theme = value as Partial<PureRenderTheme>
+  return (
+    typeof theme.name === 'string' &&
+    typeof theme.version === 'string' &&
+    Boolean(theme.color) &&
+    typeof theme.color === 'object' &&
+    typeof theme.color.ink === 'string' &&
+    typeof theme.color['ink-soft'] === 'string' &&
+    typeof theme.color.muted === 'string' &&
+    typeof theme.color.rule === 'string' &&
+    typeof theme.color['rule-soft'] === 'string' &&
+    typeof theme.color.accent === 'string' &&
+    Boolean(theme.type) &&
+    typeof theme.type === 'object' &&
+    typeof theme.type.body === 'string' &&
+    typeof theme.type.measure === 'string' &&
+    Boolean(theme.type.fonts) &&
+    typeof theme.type.fonts === 'object' &&
+    typeof theme.type.fonts.serif === 'string' &&
+    typeof theme.type.fonts.sans === 'string' &&
+    typeof theme.type.fonts.mono === 'string' &&
+    typeof theme.rhythm === 'string'
+  )
+}
+
+function parsePoint(value: string, fallback: number): number {
+  const match = /^(\d+(?:\.\d+)?)pt$/.exec(value.trim())
+  return match ? Number.parseFloat(match[1]) : fallback
+}
+
+function roundPoint(value: number): number {
+  return Math.round(value * 10) / 10
+}
+
+function profileRuleCssVariables(theme: PureRenderTheme): string {
+  const rules = theme.profile_rules
+  if (!rules) {
+    return [
+      '  --running-head-transform:uppercase;',
+      '  --running-head-rule:0;',
+      '  --folio-display:initial;',
+      '  --chapter-opener-padding:0;',
+      '  --chapter-ornament-display:none;',
+      '  --chapter-ornament-border:0;',
+      '  --table-rule-width:1px;',
+      '  --table-row-rule-width:.5px;',
+      '  --table-header-bg:transparent;',
+      '  --table-header-ink:var(--ink);',
+      '  --table-header-rule-color:var(--rule);',
+      '  --table-row-rule-color:var(--rule-soft);',
+      '  --table-cell-padding-y:.32rem;',
+      '  --table-cell-padding-x:.6rem;',
+      '  --table-header-transform:uppercase;',
+      '  --table-header-letter-spacing:.04em;',
+      '  --caption-label-weight:700;',
+      '  --caption-label-transform:none;',
+    ].join('\n')
+  }
+
+  const tableRule = ruleWidth(rules.table?.rule_weight)
+  const ornamentWidth = ruleWidth(rules.ornaments?.weight)
+  const density = tableDensity(rules.table?.density)
+  const header = tableHeader(rules.table?.header_treatment)
+  return [
+    `  --running-head-transform:${textTransform(rules.running_heads?.transform)};`,
+    `  --running-head-rule:${rules.running_heads?.rule === 'hairline' ? '.5px' : rules.running_heads?.rule === 'solid' ? '1px' : '0'};`,
+    `  --folio-display:${rules.folio?.position === 'none' ? 'none' : 'initial'};`,
+    `  --chapter-opener-padding:${openerPadding(rules.opener?.spacing)};`,
+    `  --chapter-ornament-display:${rules.opener?.ornament && rules.opener.ornament !== 'none' ? 'block' : rules.ornaments?.kind && rules.ornaments.kind !== 'none' ? 'block' : 'none'};`,
+    `  --chapter-ornament-border:${ornamentWidth};`,
+    `  --table-rule-width:${tableRule};`,
+    `  --table-row-rule-width:${density.rowRuleWidth};`,
+    `  --table-header-bg:${header.bg};`,
+    `  --table-header-ink:${header.ink};`,
+    `  --table-header-rule-color:${header.ruleColor};`,
+    `  --table-row-rule-color:${density.rowRuleColor};`,
+    `  --table-cell-padding-y:${density.paddingY};`,
+    `  --table-cell-padding-x:${density.paddingX};`,
+    `  --table-header-transform:${header.transform};`,
+    `  --table-header-letter-spacing:${header.letterSpacing};`,
+    `  --caption-label-weight:${rules.caption?.label_style === 'plain' ? '400' : '700'};`,
+    `  --caption-label-transform:${rules.caption?.label_style === 'small-caps' ? 'uppercase' : 'none'};`,
+  ].join('\n')
+}
+
+function ruleWidth(value: string | undefined): string {
+  if (value === 'hairline') return '.5px'
+  if (value === 'light') return '1px'
+  if (value === 'medium') return '1.5px'
+  return '1px'
+}
+
+function openerPadding(value: string | undefined): string {
+  if (value === 'compact') return '8%'
+  if (value === 'generous') return '28%'
+  if (value === 'balanced') return '18%'
+  return '0'
+}
+
+function tableDensity(value: string | undefined): {
+  rowRuleWidth: string
+  rowRuleColor: string
+  paddingY: string
+  paddingX: string
+} {
+  if (value === 'airy') {
+    return {
+      rowRuleWidth: '0',
+      rowRuleColor: 'transparent',
+      paddingY: '.46rem',
+      paddingX: '.7rem',
+    }
+  }
+  if (value === 'dense' || value === 'compact') {
+    return {
+      rowRuleWidth: '.5px',
+      rowRuleColor: 'var(--rule-soft)',
+      paddingY: '.24rem',
+      paddingX: '.45rem',
+    }
+  }
+  return {
+    rowRuleWidth: '.5px',
+    rowRuleColor: 'var(--rule-soft)',
+    paddingY: '.32rem',
+    paddingX: '.6rem',
+  }
+}
+
+function tableHeader(value: string | undefined): {
+  bg: string
+  ink: string
+  ruleColor: string
+  transform: string
+  letterSpacing: string
+} {
+  if (value === 'shaded') {
+    return {
+      bg: 'color-mix(in srgb, var(--accent) 10%, var(--paper))',
+      ink: 'var(--ink)',
+      ruleColor: 'var(--accent)',
+      transform: 'none',
+      letterSpacing: '0',
+    }
+  }
+  if (value === 'accent') {
+    return {
+      bg: 'var(--accent)',
+      ink: 'var(--paper)',
+      ruleColor: 'var(--accent)',
+      transform: 'none',
+      letterSpacing: '0',
+    }
+  }
+  if (value === 'plain') {
+    return {
+      bg: 'transparent',
+      ink: 'var(--ink)',
+      ruleColor: 'var(--rule-soft)',
+      transform: 'none',
+      letterSpacing: '0',
+    }
+  }
+  return {
+    bg: 'transparent',
+    ink: 'var(--ink)',
+    ruleColor: 'var(--rule)',
+    transform: 'uppercase',
+    letterSpacing: '.04em',
+  }
+}
+
+function textTransform(value: string | undefined): string {
+  if (value === 'small-caps') return 'uppercase'
+  if (value === 'title-case') return 'none'
+  if (value === 'none') return 'none'
+  return 'uppercase'
+}

package/src/bridge/pureRender/tokens/default.css

@@ -1,36 +1,36 @@
-:root{
-  --ink:#16181D; --ink-soft:#3C4049; --muted:#71757E; --paper:#FFFFFF;
-  --rule:#C9CBD0; --rule-soft:#E4E5E9; --accent:#1F39C4; --accent-ink:#1426C9;
-
-  --body:10.6pt; --lead:1.5;
-  --measure:34rem;
-  --display:"Archivo", system-ui, sans-serif;
-  --serif:"Source Serif 4", Georgia, serif;
-  --sans:"Archivo", system-ui, sans-serif;
-  --mono:"JetBrains Mono", ui-monospace, monospace;
-
-  --t-cap:8.4pt; --t-body:10.6pt; --t-h3:12.5pt; --t-h2:15pt; --t-h1:18pt; --t-title:22.5pt;
-  --rhythm:15.9pt;
-  --theme-text-align:justify;
-  --theme-hyphenate:auto;
-  --text-align:var(--theme-text-align);
-  --hyphenate:var(--theme-hyphenate);
-  --running-head-transform:uppercase;
-  --running-head-rule:0;
-  --folio-display:initial;
-  --chapter-opener-padding:0;
-  --chapter-ornament-display:none;
-  --chapter-ornament-border:0;
-  --table-rule-width:1px;
-  --table-row-rule-width:.5px;
-  --table-header-bg:transparent;
-  --table-header-ink:var(--ink);
-  --table-header-rule-color:var(--rule);
-  --table-row-rule-color:var(--rule-soft);
-  --table-cell-padding-y:.32rem;
-  --table-cell-padding-x:.6rem;
-  --table-header-transform:uppercase;
-  --table-header-letter-spacing:.04em;
-  --caption-label-weight:700;
-  --caption-label-transform:none;
-}
+:root{
+  --ink:#16181D; --ink-soft:#3C4049; --muted:#71757E; --paper:#FFFFFF;
+  --rule:#C9CBD0; --rule-soft:#E4E5E9; --accent:#1F39C4; --accent-ink:#1426C9;
+
+  --body:10.6pt; --lead:1.5;
+  --measure:34rem;
+  --display:"Archivo", system-ui, sans-serif;
+  --serif:"Source Serif 4", Georgia, serif;
+  --sans:"Archivo", system-ui, sans-serif;
+  --mono:"JetBrains Mono", ui-monospace, monospace;
+
+  --t-cap:8.4pt; --t-body:10.6pt; --t-h3:12.5pt; --t-h2:15pt; --t-h1:18pt; --t-title:22.5pt;
+  --rhythm:15.9pt;
+  --theme-text-align:justify;
+  --theme-hyphenate:auto;
+  --text-align:var(--theme-text-align);
+  --hyphenate:var(--theme-hyphenate);
+  --running-head-transform:uppercase;
+  --running-head-rule:0;
+  --folio-display:initial;
+  --chapter-opener-padding:0;
+  --chapter-ornament-display:none;
+  --chapter-ornament-border:0;
+  --table-rule-width:1px;
+  --table-row-rule-width:.5px;
+  --table-header-bg:transparent;
+  --table-header-ink:var(--ink);
+  --table-header-rule-color:var(--rule);
+  --table-row-rule-color:var(--rule-soft);
+  --table-cell-padding-y:.32rem;
+  --table-cell-padding-x:.6rem;
+  --table-header-transform:uppercase;
+  --table-header-letter-spacing:.04em;
+  --caption-label-weight:700;
+  --caption-label-transform:none;
+}

package/src/bridge/pureRender/tokens/default.json

@@ -1,32 +1,32 @@
-{
-  "$schema": "https://design-tokens.github.io/community-group/format/",
-  "name": "Pure Render Default",
-  "version": "1.0.0",
-  "color": {
-    "ink": "#16181D",
-    "ink-soft": "#3C4049",
-    "muted": "#71757E",
-    "paper": "#FFFFFF",
-    "rule": "#C9CBD0",
-    "rule-soft": "#E4E5E9",
-    "accent": "#1F39C4",
-    "accent-ink": "#1426C9"
-  },
-  "type": {
-    "body": "10.6pt",
-    "lead": 1.5,
-    "measure": "34rem",
-    "scaleRatio": 1.333,
-    "fonts": {
-      "display": "\"Archivo\", system-ui, sans-serif",
-      "serif": "\"Source Serif 4\", Georgia, serif",
-      "sans": "\"Archivo\", system-ui, sans-serif",
-      "mono": "\"JetBrains Mono\", ui-monospace, monospace"
-    }
-  },
-  "rhythm": "15.9pt",
-  "setting": {
-    "align": "justified",
-    "hyphenate": true
-  }
-}
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "name": "Pure Render Default",
+  "version": "1.0.0",
+  "color": {
+    "ink": "#16181D",
+    "ink-soft": "#3C4049",
+    "muted": "#71757E",
+    "paper": "#FFFFFF",
+    "rule": "#C9CBD0",
+    "rule-soft": "#E4E5E9",
+    "accent": "#1F39C4",
+    "accent-ink": "#1426C9"
+  },
+  "type": {
+    "body": "10.6pt",
+    "lead": 1.5,
+    "measure": "34rem",
+    "scaleRatio": 1.333,
+    "fonts": {
+      "display": "\"Archivo\", system-ui, sans-serif",
+      "serif": "\"Source Serif 4\", Georgia, serif",
+      "sans": "\"Archivo\", system-ui, sans-serif",
+      "mono": "\"JetBrains Mono\", ui-monospace, monospace"
+    }
+  },
+  "rhythm": "15.9pt",
+  "setting": {
+    "align": "justified",
+    "hyphenate": true
+  }
+}