@datatechsolutions/tympan-tokens 0.3.0 → 0.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datatechsolutions/tympan-tokens",
-  "version": "0.3.0",
-  "description": "Tympan design tokens: W3C DTCG source (colour, space, radius, type, elevation and glass, motion, z) and an OKLCH theme generator, with the tympan, fakhir, neutral and high-contrast presets in light and dark (plus opt-in UI themes derived from the print book styles), built to --ty-* CSS custom properties, JSON and a TypeScript export.",
+  "version": "0.4.0",
+  "description": "Tympan design tokens: W3C DTCG source (colour, space, radius, type, elevation and glass, motion, z) and an OKLCH theme generator, with the tympan, fakhir, astrlabe, neutral and high-contrast presets in light and dark (plus opt-in UI themes derived from the print book styles), built to --ty-* CSS custom properties, JSON and a TypeScript export.",
   "license": "FSL-1.1-ALv2",
   "author": "Natalia Mesquita",
   "repository": {
@@ -44,6 +44,7 @@
     "./print-themes/*": "./dist/print-themes/*",
     "./print-themes.json": "./dist/print-themes.json",
     "./tokens.json": "./dist/tokens.json",
+    "./themes.json": "./dist/themes.json",
     "./dtcg/*": "./dist/dtcg/*",
     "./package.json": "./package.json"
   },
@@ -56,11 +57,16 @@
   "scripts": {
     "build": "node scripts/build.mjs && tsdown",
     "typecheck": "tsc --noEmit -p tsconfig.json && node scripts/build.mjs --check",
-    "test": "vitest run"
+    "test": "vitest run",
+    "prepack": "npm run build"
   },
   "devDependencies": {
     "style-dictionary": "^5.5.5"
   },
+  "homepage": "https://github.com/datatechsolutionsbr/tympan#readme",
+  "bugs": {
+    "url": "https://github.com/datatechsolutionsbr/tympan/issues"
+  },
   "publishConfig": {
     "access": "public"
   }

package/src/flow.ts

@@ -46,20 +46,28 @@ function toneTokens(): Array<[string, FlowToken]> {
 export const FLOW_TOKENS: ReadonlyArray<readonly [string, FlowToken]> = [
   ...toneTokens(),
   // Connectors. Rest uses the >=3:1 boundary role (WCAG 1.4.11), not line-strong.
+  // State colours: traversed success, active info, blocked warning, pending neutral.
   ['connector', color('input')],
-  ['connector-active', color('accent')],
+  ['connector-active', color('info')],
   ['connector-true', color('success')],
   ['connector-false', color('danger')],
   ['connector-rule', color('categorical-2')],
+  ['connector-traversed', color('success')],
+  ['connector-blocked', color('warning')],
+  ['connector-pending', color('neutral')],
   ['connector-width', px(1.5)],
   ['connector-width-active', px(2.5)],
-  // Node frame and state rings.
+  // Node frame and state rings. Running is info (cyan), suspended is warning
+  // (amber), so "em execução" and "aguardando" never share a hue.
   ['node-border', color('line-strong')],
   ['node-border-hover', color('input')],
   ['ring-selected', color('accent')],
-  ['ring-running', color('warning')],
+  ['ring-running', color('info')],
+  ['ring-suspended', color('warning')],
   ['ring-succeeded', color('success')],
   ['ring-failed', color('danger')],
+  // The "now" cursor of run timelines: magenta, off every state hue.
+  ['cursor-now', color('cursor-now')],
   ['node-surface', color('surface-raised-solid')],
   ['node-radius', { type: 'dimension', ref: 'radius-card' }],
   // Canvas plane.

package/src/presets.ts

@@ -97,9 +97,9 @@ export const neutralPreset: ThemeConfig = {
 }
 
 /**
- * The Fakhir research platform's look, selected by name
+ * A named product preset, selected by name
  * (`data-ty-theme="fakhir"`). Today it carries the default theme's values; it
- * is a separate preset so that app keeps its look if the default changes.
+ * is a separate preset so an app that selects it keeps its look if the default changes.
  */
 export const fakhirPreset: ThemeConfig = {
   ...tympanPreset,
@@ -107,6 +107,177 @@ export const fakhirPreset: ThemeConfig = {
   label: 'Fakhir',
 }
 
+/**
+ * The Astrlabe workflow engine's look (`data-ty-theme="astrlabe"`): slate
+ * neutrals, an indigo brand (indigo 500 as the accent family, one step darker
+ * where text needs 4.5:1 on light grounds), translucent glass surfaces and the
+ * rounder corners of that app (12 px controls, about 20 px cards). The call to
+ * action is the indigo to purple gradient its primary buttons fill with, and
+ * text (headings included) uses the platform's own system fonts. The state
+ * contract holds on every ground: running is a cyan clearly off the indigo
+ * brand, waiting is amber.
+ */
+export const astrlabePreset: ThemeConfig = {
+  name: 'astrlabe',
+  label: 'Astrlabe',
+  seeds: {
+    brand: seedFromColor('#6366f1', 0.2),
+    neutral: { hue: 257, chroma: 0.02 },
+    danger: { hue: 25, chroma: 0.2 },
+    warning: { hue: 70, chroma: 0.15 },
+    success: { hue: 150, chroma: 0.16 },
+    info: { hue: 240, chroma: 0.1 },
+  },
+  chartHues: [277, 237, 163, 75, 12, 293, 185, 48],
+  radius: 12,
+  contrast: 'default',
+  glass: true,
+  cta: 'gradient',
+  pins: {
+    light: {
+      brand: '#4f46e5',
+      'focus-ring': '#6366f1',
+      'brand-strong': '#4338ca',
+      'brand-soft': 'rgb(99 102 241 / 0.12)',
+      'on-brand': '#ffffff',
+      bg: '#f8fafc',
+      surface: 'rgb(255 255 255 / 0.72)',
+      'surface-raised': 'rgb(255 255 255 / 0.9)',
+      'surface-solid': '#ffffff',
+      'surface-raised-solid': '#ffffff',
+      'surface-sunken': '#f1f5f9',
+      line: 'rgb(148 163 184 / 0.3)',
+      'line-strong': 'rgb(100 116 139 / 0.45)',
+      ink: '#0f172a',
+      'ink-2': '#334155',
+      // One step darker than the old #546175 so AA holds on the glass grounds.
+      'ink-3': '#4d5a6b',
+      success: '#15803d',
+      // Cyan, deliberately off the indigo brand, for the running state.
+      info: '#0e7490',
+      warning: '#a16207',
+      danger: '#be123c',
+      neutral: '#4d5a6b',
+    },
+    dark: {
+      brand: '#818cf8',
+      'focus-ring': '#818cf8',
+      'brand-strong': '#a5b4fc',
+      'brand-soft': 'rgb(99 102 241 / 0.2)',
+      'on-brand': '#1e1b4b',
+      bg: '#0b1220',
+      surface: 'rgb(30 41 59 / 0.72)',
+      'surface-raised': 'rgb(30 41 59 / 0.92)',
+      'surface-solid': '#131c2f',
+      'surface-raised-solid': '#1b2539',
+      'surface-sunken': '#0b1222',
+      line: 'rgb(148 163 184 / 0.22)',
+      'line-strong': 'rgb(148 163 184 / 0.36)',
+      ink: '#f8fafc',
+      'ink-2': '#cbd5e1',
+      'ink-3': '#a3b0c0',
+      success: '#4ade80',
+      info: '#22d3ee',
+      warning: '#fbbf24',
+      danger: '#fb7185',
+      neutral: '#a3b0c0',
+    },
+  },
+  ctaPins: {
+    light: ['#4f46e5', '#7c3aed', '#9333ea'],
+    dark: ['#4f46e5', '#7c3aed', '#9333ea'],
+  },
+  // The platform's own UI fonts, headings included (no web font to fetch).
+  fonts: {
+    display: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Noto Sans', 'Arial', 'sans-serif'],
+    body: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Noto Sans', 'Arial', 'sans-serif'],
+    mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'],
+  },
+}
+
+/**
+ * Astrlabe · Sala de Controle (`data-ty-theme="astrlabe-controle"`): the
+ * dark-operations variant of the Astrlabe identity for control rooms and
+ * monitoring walls. No glass, square corners (2 px controls), deep blue-slate
+ * surfaces, and the saturated state colours of operator consoles: ok green,
+ * run cyan, wait amber, fail red, now magenta. Everything renders in a
+ * monospace stack so columns of numbers line up.
+ */
+export const astrlabeControlePreset: ThemeConfig = {
+  name: 'astrlabe-controle',
+  label: 'Astrlabe · Sala de Controle',
+  seeds: {
+    brand: seedFromColor('#6366f1', 0.2),
+    neutral: { hue: 257, chroma: 0.02 },
+    danger: { hue: 12, chroma: 0.2 },
+    warning: { hue: 75, chroma: 0.15 },
+    success: { hue: 145, chroma: 0.16 },
+    info: { hue: 185, chroma: 0.12 },
+  },
+  radius: 2,
+  contrast: 'default',
+  glass: false,
+  cta: 'solid',
+  pins: {
+    light: {
+      // The control room is always dark: the light mode carries the same
+      // dark grounds and the light-on-dark indigo brand.
+      brand: '#818cf8',
+      'focus-ring': '#818cf8',
+      'brand-strong': '#a5b4fc',
+      'brand-soft': 'rgb(99 102 241 / 0.2)',
+      'on-brand': '#1e1b4b',
+      bg: '#131a22',
+      surface: 'rgb(26 35 46 / 1)',
+      'surface-raised': 'rgb(26 35 46 / 1)',
+      'surface-solid': '#1a232e',
+      'surface-raised-solid': '#1a232e',
+      'surface-sunken': '#0e141b',
+      line: '#2e3d4c',
+      'line-strong': '#46586a',
+      ink: '#e8eef4',
+      'ink-2': '#bcc9d6',
+      'ink-3': '#93a2b1',
+      success: '#3fb950',
+      info: '#39c5cf',
+      warning: '#d29922',
+      danger: '#f85149',
+      neutral: '#93a2b1',
+      'cursor-now': '#e34ba9',
+    },
+    dark: {
+      brand: '#818cf8',
+      'focus-ring': '#818cf8',
+      'brand-strong': '#a5b4fc',
+      'brand-soft': 'rgb(99 102 241 / 0.2)',
+      'on-brand': '#1e1b4b',
+      bg: '#131a22',
+      surface: 'rgb(26 35 46 / 1)',
+      'surface-raised': 'rgb(26 35 46 / 1)',
+      'surface-solid': '#1a232e',
+      'surface-raised-solid': '#1a232e',
+      'surface-sunken': '#0e141b',
+      line: '#2e3d4c',
+      'line-strong': '#46586a',
+      ink: '#e8eef4',
+      'ink-2': '#bcc9d6',
+      'ink-3': '#93a2b1',
+      success: '#3fb950',
+      info: '#39c5cf',
+      warning: '#d29922',
+      danger: '#f85149',
+      neutral: '#93a2b1',
+      'cursor-now': '#e34ba9',
+    },
+  },
+  // Mono-friendly: one monospace stack for every role.
+  fonts: {
+    display: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'],
+    body: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'],
+    mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'],
+  },
+}
+
 /** Default hues with high contrast, opaque surfaces and a thicker focus ring. */
 export const highContrastPreset: ThemeConfig = {
   name: 'high-contrast',
@@ -118,18 +289,5 @@ export const highContrastPreset: ThemeConfig = {
   cta: 'solid',
 }
 
-export const astrlabePreset: ThemeConfig = {
-  name: 'astrlabe',
-  label: 'Astrlabe',
-  seeds: {
-    ...baseSeeds,
-    brand: { hue: 240, chroma: 0.15 },
-  },
-  radius: 8,
-  contrast: 'default',
-  glass: true,
-  cta: 'solid',
-}
-
-export const presets: readonly ThemeConfig[] = [tympanPreset, fakhirPreset, neutralPreset, highContrastPreset, astrlabePreset]
+export const presets: readonly ThemeConfig[] = [tympanPreset, fakhirPreset, astrlabePreset, astrlabeControlePreset, neutralPreset, highContrastPreset]
 export const DEFAULT_THEME = 'tympan'

package/src/print-presets.ts

@@ -131,6 +131,13 @@ export interface PrintEstrutura {
   notasFigura?: 'dentro' | 'coluna'
   /** The key numbers (b) marked with the highlighter (caderno). */
   numerosMarcados?: boolean
+  /**
+   * How a chart highlights: every row in its series colours (default, most studies) or the highlighted row in
+   * the accent against the others in ink (NYT Upshot, Tufte).
+   */
+  realce?: 'serie' | 'linha'
+  /** Head of each small multiple: plain title (default), a band in the highlighter colour with an arrow (Schiphol), a dark band (Vignelli), a band in the ornament colour (Aicher), each multiple on its own tinted card (Le Corbusier, Bayer). */
+  cabecaMultiplo?: 'titulo' | 'faixa' | 'faixa-escura' | 'faixa-cor' | 'caixa-cor'
 }
 
 /**
@@ -149,8 +156,10 @@ export type Emblema = 'pictogramas' | 'formas' | 'circulo-bicolor' | 'figura-mod
  * - 'fluxo': bands whose thickness is the value, splitting at the cut (fluxo-historico).
  * - 'predios': columns drawn as buildings (height = value; windows are texture only).
  * - 'cartoes': one card per row with the numbers written large and mini columns on a shared scale.
+ * - 'halteres': a dumbbell per row, two dots joined on one axis (NYT Upshot; the only shape that keeps a
+ *   dumbbell spec as drawn). Every other shape redraws a zero-based dumbbell as its own comparison.
  */
-export type FormaGrafico = 'barras' | 'colunas' | 'eixo-central' | 'ziguezague' | 'fluxo' | 'predios' | 'cartoes'
+export type FormaGrafico = 'barras' | 'colunas' | 'eixo-central' | 'ziguezague' | 'fluxo' | 'predios' | 'cartoes' | 'halteres'
 
 /** Page ornaments (optional, CONTRATO §1). */
 export type Moldura =
@@ -589,7 +598,7 @@ const jornal: PrintStyle = {
   raio: 3,
   caixaAlta: false,
   pb: { destaque: '#121212' },
-  estrutura: { painel: 'fio', rotulo: 'letra', rotuloCaixa: 'alta', notas: 'dentro', figura: 'simples', minusculas: false },
+  estrutura: { painel: 'fio', rotulo: 'letra', rotuloCaixa: 'alta', notas: 'dentro', figura: 'simples', minusculas: false, forma: 'halteres', realce: 'linha' },
 }
 
 const prancheta: PrintStyle = {
@@ -761,7 +770,7 @@ const minimoDeTinta: PrintStyle = {
   raio: 0,
   caixaAlta: false,
   pb: { destaque: '#111111' },
-  estrutura: { painel: 'nenhum', rotulo: 'letra', rotuloCaixa: 'versalete', notas: 'margem', figura: 'amplitude', minusculas: false, forma: 'colunas', colunasFinas: true, linhaCorte: 'tracejada', tituloEstilo: 'italico' },
+  estrutura: { painel: 'nenhum', rotulo: 'letra', rotuloCaixa: 'versalete', notas: 'margem', figura: 'amplitude', minusculas: false, forma: 'colunas', colunasFinas: true, linhaCorte: 'tracejada', tituloEstilo: 'italico', realce: 'linha' },
 }
 
 const suico: PrintStyle = {
@@ -974,7 +983,7 @@ const diagramaModernista: PrintStyle = {
   raio: 0,
   caixaAlta: false,
   pb: { destaque: '#2a2a2a', destaque2: '#8a8a8a' },
-  estrutura: { painel: 'bloco', rotulo: 'circulo', rotuloCaixa: 'normal', notas: 'dentro', figura: 'simples', minusculas: true, forma: 'colunas', linhaCorte: 'cheia', marcador: 'circulo', multiplos: 'lado-a-lado', fundoPainel: 'alternado', moldura: 'quartos', manchete: 'texto' },
+  estrutura: { painel: 'bloco', rotulo: 'circulo', rotuloCaixa: 'normal', notas: 'dentro', figura: 'simples', minusculas: true, forma: 'colunas', linhaCorte: 'cheia', marcador: 'circulo', multiplos: 'lado-a-lado', fundoPainel: 'alternado', moldura: 'quartos', manchete: 'texto', cabecaMultiplo: 'caixa-cor' },
 }
 
 const papelSalmao: PrintStyle = {
@@ -1159,7 +1168,7 @@ const proporcaoModular: PrintStyle = {
   raio: 0,
   caixaAlta: true,
   pb: { destaque: '#5a5a5a', destaque2: '#a0a0a0' },
-  estrutura: { painel: 'bloco', rotulo: 'quadrado', rotuloCaixa: 'alta', notas: 'dentro', figura: 'simples', minusculas: false, barras: 'vertical', corRotulo: 'tinta', multiplos: 'lado-a-lado', emblema: 'figura-modular', fundoPainel: 'alternado', costura: 'barra', manchete: 'texto' },
+  estrutura: { painel: 'bloco', rotulo: 'quadrado', rotuloCaixa: 'alta', notas: 'dentro', figura: 'simples', minusculas: false, barras: 'vertical', corRotulo: 'tinta', multiplos: 'lado-a-lado', emblema: 'figura-modular', fundoPainel: 'alternado', costura: 'barra', manchete: 'texto', cabecaMultiplo: 'caixa-cor' },
 }
 
 const sinalizacao: PrintStyle = {
@@ -1176,7 +1185,7 @@ const sinalizacao: PrintStyle = {
   raio: 0,
   caixaAlta: false,
   pb: { marcaTexto: '#d9d9d9' },
-  estrutura: { painel: 'placa', rotulo: 'quadrado', rotuloCaixa: 'normal', notas: 'dentro', figura: 'simples', minusculas: false, cabeco: 'etiqueta', corRotulo: 'tinta', veredito: 'bloco-escuro', rastro: 'placa', manchete: 'faixa' },
+  estrutura: { painel: 'placa', rotulo: 'quadrado', rotuloCaixa: 'normal', notas: 'dentro', figura: 'simples', minusculas: false, cabeco: 'etiqueta', corRotulo: 'tinta', veredito: 'bloco-escuro', rastro: 'placa', manchete: 'faixa', cabecaMultiplo: 'faixa' },
 }
 
 const pictogramas: PrintStyle = {
@@ -1193,7 +1202,7 @@ const pictogramas: PrintStyle = {
   raio: 0,
   caixaAlta: false,
   pb: { destaque: '#8a8a8a', destaque2: '#3a3a3a', marcaTexto: '#d9d9d9' },
-  estrutura: { painel: 'bloco', rotulo: 'quadrado', rotuloCaixa: 'normal', notas: 'dentro', figura: 'simples', minusculas: false, barras: 'vertical', corRotulo: 'sustentada', multiplos: 'lado-a-lado', emblema: 'pictogramas', fundoPainel: 'claro', manchete: 'faixa' },
+  estrutura: { painel: 'bloco', rotulo: 'quadrado', rotuloCaixa: 'normal', notas: 'dentro', figura: 'simples', minusculas: false, barras: 'vertical', corRotulo: 'sustentada', multiplos: 'lado-a-lado', emblema: 'pictogramas', fundoPainel: 'claro', manchete: 'faixa', cabecaMultiplo: 'faixa-cor' },
 }
 
 const mapaDeMetro: PrintStyle = {
@@ -1210,7 +1219,7 @@ const mapaDeMetro: PrintStyle = {
   raio: 0,
   caixaAlta: false,
   pb: { destaque: '#4a4a4a' },
-  estrutura: { painel: 'fio', rotulo: 'circulo', rotuloCaixa: 'normal', notas: 'dentro', figura: 'simples', minusculas: false, barras: 'vertical', cabeco: 'faixa', corRotulo: 'tinta', veredito: 'bloco-escuro', rastro: 'metro', manchete: 'texto' },
+  estrutura: { painel: 'fio', rotulo: 'circulo', rotuloCaixa: 'normal', notas: 'dentro', figura: 'simples', minusculas: false, barras: 'vertical', cabeco: 'faixa', corRotulo: 'tinta', veredito: 'bloco-escuro', rastro: 'metro', manchete: 'texto', cabecaMultiplo: 'faixa-escura' },
 }
 
 const jornal1959: PrintStyle = {

package/src/theme.ts

@@ -106,6 +106,7 @@ export const ROLE_NAMES = [
   'ink', 'ink-2', 'ink-3',
   'line', 'line-soft', 'line-strong', 'input',
   'focus-ring',
+  'cursor-now',
   'brand', 'on-brand', 'brand-strong', 'brand-soft', 'on-brand-soft',
   'cta-solid', 'on-cta',
   'secondary', 'on-secondary',
@@ -175,6 +176,9 @@ function recipes(mode: Mode, contrast: ContrastLevel, glass: boolean): Partial<R
     'line-strong': { seed: 'neutral', l: pick(0.55, 0.78), c: 2.5, a: high ? pick(0.75, 0.65) : pick(0.38, 0.3) },
     input: { seed: 'neutral', l: high ? pick(0.42, 0.78) : pick(0.6, 0.58), c: 2.5 },
     'focus-ring': { seed: 'brand', l: high ? pick(0.4, 0.85) : pick(0.47, 0.79), c: 0.75 },
+    // The "now" cursor of run timelines: magenta/pink, deliberately off every
+    // state hue (success/warning/danger/info) so it never reads as a state.
+    'cursor-now': { seed: 'brand', l: pick(0.55, 0.74), c: 0.9, h: 330 },
     brand: { seed: 'brand', l: high ? pick(0.4, 0.85) : pick(0.47, 0.79), c: 0.75 },
     'brand-strong': { seed: 'brand', l: high ? pick(0.33, 0.9) : pick(0.4, 0.87), c: 0.7 },
     'brand-soft': { seed: 'brand', l: pick(0.55, 0.75), c: 0.8, a: softA },

package/src/presets.ts.diff

@@ -1,26 +0,0 @@
---- datatech/tympan-wt/site/packages/tokens/src/presets.ts
-+++ datatech/tympan-wt/site/packages/tokens/src/presets.ts
-@@ -102,4 +102,23 @@
--export const presets: readonly ThemeConfig[] = [tympanPreset, fakhirPreset, neutralPreset, highContrastPreset]
-+export const astrlabePreset: ThemeConfig = {
-+  name: 'astrlabe',
-+  label: 'Astrlabe',
-+  seeds: {
-+    ...baseSeeds,
-+    brand: { hue: 240, chroma: 0.15 }, // Example deep blue for Astrlabe
-+  },
-+  radius: 6,
-+  contrast: 'comfortable',
-+  glass: false,
-+  cta: 'solid',
-+  pins: {
-+    light: {
-+      brand: '#4f46e5',
-+    },
-+    dark: {
-+      brand: '#6366f1',
-+    }
-+  }
-+}
-+
-+export const presets: readonly ThemeConfig[] = [tympanPreset, fakhirPreset, neutralPreset, highContrastPreset, astrlabePreset]

package/src/theme.ts.rej

@@ -1,16 +0,0 @@
-@@ -86,6 +88,7 @@
-   dimensions: Record<string, number>
-   numbers: Record<string, number>
-   fonts: Record<string, string[]>
-+  strings: Record<string, string>
-   report: Array<{ fg: string; over: string[]; kind: string; ratio: number; min: number; apca: number }>
- }
- 
-@@ -374,6 +377,7 @@
-     dimensions: { ...BASE_DIMENSIONS },
-     numbers: { ...BASE_NUMBERS },
-     fonts: config.fonts ? { ...config.fonts } : {},
-+    strings: config.strings ? { ...config.strings } : {},
-     report: [],
-   }
-   if (config.glass) resolved.numbers.glass = 1