@dataimago/tokens-neutral 0.1.0-alpha.6

package/dist/tokens.scss

@@ -0,0 +1,196 @@
+:root {
+  --color-palette-ink-50: #f5f5f4;
+  --color-palette-ink-100: #e7e5e4;
+  --color-palette-ink-200: #d6d3d1;
+  --color-palette-ink-300: #a8a29e;
+  --color-palette-ink-400: #78716c;
+  --color-palette-ink-500: #57534e;
+  --color-palette-ink-600: #44403c;
+  --color-palette-ink-700: #292524;
+  --color-palette-ink-800: #1c1917;
+  --color-palette-ink-900: #0c0a09;
+  --color-palette-stone-50: #f7f7f6;
+  --color-palette-stone-100: #ededeb;
+  --color-palette-stone-200: #dcdcda;
+  --color-palette-stone-300: #c1c1bf;
+  --color-palette-stone-400: #a0a0a0;
+  --color-palette-stone-500: #7c7c7c;
+  --color-palette-stone-600: #5e5e5c;
+  --color-palette-stone-700: #424240;
+  --color-palette-stone-800: #292927;
+  --color-palette-stone-900: #14140f;
+  --color-palette-paper-50: #fefdfb;
+  --color-palette-paper-100: #fdf9f2;
+  --color-palette-paper-200: #faf2e3;
+  --color-palette-paper-300: #f5e8cf;
+  --color-palette-paper-400: #edd9b3;
+  --color-palette-paper-500: #e0c088;
+  --color-functional-success: #27AE60;
+  --color-functional-warning: #F39C12;
+  --color-functional-error: #E74C3C;
+  --color-functional-info: #3498DB;
+  --transition-quick: 0.15s ease;
+  --transition-standard: 0.25s ease-in-out;
+  --transition-smooth: 0.35s ease;
+  --transition-logo: 0.3s;
+  --font-family-sans: Noto Sans, Fira Sans, system-ui, sans-serif;
+  --font-family-mono: JetBrains Mono, SF Mono, Monaco, Inconsolata, monospace;
+  --font-family-display: var(--font-family-display-editorial);
+  --font-family-display-editorial: Noto Sans, system-ui, sans-serif;
+  --font-family-display-documentation: Noto Sans, system-ui, sans-serif;
+  --font-family-brand: Noto Sans, system-ui, sans-serif;
+  --font-family-math: Noto Sans Math, Noto Sans, system-ui, sans-serif;
+  --font-size-micro: 0.75rem;
+  --font-size-small: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-readable: 1.125rem;
+  --font-size-emphasis: 1.25rem;
+  --font-size-heading-small: 1.5rem;
+  --font-size-heading-medium: 1.875rem;
+  --font-size-heading-large: 2.25rem;
+  --font-size-heading-xl: 3rem;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-heading-h1: var(--font-weight-semibold);
+  --font-weight-heading-h2: var(--font-weight-semibold);
+  --font-weight-heading-h3: var(--font-weight-medium);
+  --font-weight-heading-h4: var(--font-weight-normal);
+  --font-weight-heading-h5: var(--font-weight-normal);
+  --font-weight-heading-h6: var(--font-weight-normal);
+  --font-weight-heading-subtitle: var(--font-weight-semibold);
+  --font-style-normal: normal;
+  --font-style-italic: italic;
+  --font-style-oblique: oblique;
+  --font-lineHeight-tight: 1.25;
+  --font-lineHeight-normal: 1.5;
+  --font-lineHeight-relaxed: 1.625;
+  --font-feature-settings-display: "normal";
+  --font-feature-settings-body: "normal";
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+  --spacing-3xl: 4rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+}
+
+:root, [data-bs-theme="light"] {
+  --color-surface-page: #ededeb;
+  --color-surface-page-scrolled: #ededeb;
+  --color-surface-elevated: #f7f7f6;
+  --color-surface-sunken: #faf2e3;
+  --color-surface-navbar: #ededeb;
+  --color-surface-navbar-scrolled: #ededeb;
+  --color-surface-code: #faf2e3;
+  --color-border-subtle: rgba(12, 10, 9, 0.08);
+  --color-border-moderate: rgba(12, 10, 9, 0.15);
+  --color-border-strong: rgba(12, 10, 9, 0.25);
+  --color-border-card: rgba(12, 10, 9, 0.15);
+  --color-border-code: #d6d3d1;
+  --color-content-primary: #14140f;
+  --color-content-secondary: #7c7c7c;
+  --color-content-muted: #78716c;
+  --color-content-inverse: #fdf9f2;
+  --color-interactive-primary: #292524;
+  --color-interactive-hover: #1c1917;
+  --color-interactive-accent: #292524;
+  --color-interactive-focus: #292524;
+  --contrast-high: rgb(20, 20, 16);
+  --contrast-readable: rgb(20, 20, 16);
+  --contrast-medium: #7c7c7c;
+  --contrast-subtle: #7c7c7c;
+  --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
+  --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
+  --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
+  --border-subtle: rgba(20, 20, 16, 0.1);
+  --border-moderate: rgba(20, 20, 16, 0.15);
+  --border-focus: #3498DB;
+  --navigation-hover-background: rgba(20, 20, 16, 0.05);
+  --navigation-active-background: rgba(20, 20, 16, 0.1);
+}
+
+[data-bs-theme="dark"] {
+  --color-surface-page: #141410;
+  --color-surface-page-scrolled: #141410;
+  --color-surface-elevated: #1c1917;
+  --color-surface-sunken: #0c0a09;
+  --color-surface-navbar: #141410;
+  --color-surface-navbar-scrolled: #141410;
+  --color-surface-code: #1c1917;
+  --color-border-subtle: rgba(253, 249, 242, 0.08);
+  --color-border-moderate: rgba(253, 249, 242, 0.15);
+  --color-border-strong: rgba(253, 249, 242, 0.25);
+  --color-border-card: rgba(253, 249, 242, 0.15);
+  --color-border-code: #292524;
+  --color-content-primary: #fdf9f2;
+  --color-content-secondary: #a8a29e;
+  --color-content-muted: #78716c;
+  --color-content-inverse: #0c0a09;
+  --color-interactive-primary: #d6d3d1;
+  --color-interactive-hover: #a8a29e;
+  --color-interactive-accent: #d6d3d1;
+  --color-interactive-focus: #d6d3d1;
+  --contrast-high: rgb(237, 237, 235);
+  --contrast-readable: rgb(237, 237, 235);
+  --contrast-medium: #83838f;
+  --contrast-subtle: #83838f;
+  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
+  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
+  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
+  --border-subtle: rgba(237, 237, 235, 0.1);
+  --border-moderate: rgba(237, 237, 235, 0.15);
+  --border-focus: #4FC3F7;
+  --navigation-hover-background: rgba(237, 237, 235, 0.05);
+  --navigation-active-background: rgba(237, 237, 235, 0.1);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-surface-page: #141410;
+    --color-surface-page-scrolled: #141410;
+    --color-surface-elevated: #1c1917;
+    --color-surface-sunken: #0c0a09;
+    --color-surface-navbar: #141410;
+    --color-surface-navbar-scrolled: #141410;
+    --color-surface-code: #1c1917;
+    --color-border-subtle: rgba(253, 249, 242, 0.08);
+    --color-border-moderate: rgba(253, 249, 242, 0.15);
+    --color-border-strong: rgba(253, 249, 242, 0.25);
+    --color-border-card: rgba(253, 249, 242, 0.15);
+    --color-border-code: #292524;
+    --color-content-primary: #fdf9f2;
+    --color-content-secondary: #a8a29e;
+    --color-content-muted: #78716c;
+    --color-content-inverse: #0c0a09;
+    --color-interactive-primary: #d6d3d1;
+    --color-interactive-hover: #a8a29e;
+    --color-interactive-accent: #d6d3d1;
+    --color-interactive-focus: #d6d3d1;
+    --contrast-high: rgb(237, 237, 235);
+    --contrast-readable: rgb(237, 237, 235);
+    --contrast-medium: #83838f;
+    --contrast-subtle: #83838f;
+    --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
+    --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
+    --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
+    --border-subtle: rgba(237, 237, 235, 0.1);
+    --border-moderate: rgba(237, 237, 235, 0.15);
+    --border-focus: #4FC3F7;
+    --navigation-hover-background: rgba(237, 237, 235, 0.05);
+    --navigation-active-background: rgba(237, 237, 235, 0.1);
+  }
+}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@dataimago/tokens-neutral",
+  "version": "0.1.0-alpha.6",
+  "description": "dataimago neutral-identity design tokens — Noto Sans throughout, neutral palette; sensible defaults for externally-owned consumers (Level-3 user apps, third-party Level-2 verticals). Non-identity tokens (spacing, radius, motion, effects, components) are read from @dataimago/tokens at build time so the two packages stay in lockstep.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dataimago/dataimago-design.git",
+    "directory": "packages/tokens-neutral"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./colors": "./src/colors.json",
+    "./theme-colors": "./src/theme-colors.json",
+    "./typography": "./src/typography.json",
+    "./spacing": "./src/spacing.json",
+    "./effects": "./src/effects.json",
+    "./frequent": "./src/frequent.json",
+    "./components": "./src/components.json",
+    "./css": "./dist/tokens.css",
+    "./scss": "./dist/tokens.scss"
+  },
+  "files": [
+    "src",
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "@dataimago/tokens": "^0.1.0-alpha.4"
+  },
+  "keywords": [
+    "design-tokens",
+    "dataimago",
+    "design-system",
+    "neutral-identity"
+  ],
+  "scripts": {
+    "build": "node build.mjs"
+  }
+}

package/src/colors.json

@@ -0,0 +1,44 @@
+{
+  "color": {
+    "palette": {
+      "ink": {
+        "50":  { "value": "#f5f5f4", "description": "Ink scale — warmest near-white" },
+        "100": { "value": "#e7e5e4", "description": "Ink scale — subtle neutral surface tint" },
+        "200": { "value": "#d6d3d1", "description": "Ink scale — borders, dividers on light surfaces" },
+        "300": { "value": "#a8a29e", "description": "Ink scale — muted text on dark surfaces" },
+        "400": { "value": "#78716c", "description": "Ink scale — secondary text on dark surfaces" },
+        "500": { "value": "#57534e", "description": "Ink scale — secondary text on light surfaces" },
+        "600": { "value": "#44403c", "description": "Ink scale — primary text on mid surfaces" },
+        "700": { "value": "#292524", "description": "Ink scale — primary text, high contrast; neutral interactive primary" },
+        "800": { "value": "#1c1917", "description": "Ink scale — surfaces in dark mode" },
+        "900": { "value": "#0c0a09", "description": "Ink scale — near-black; primary dark surface and text color" }
+      },
+      "stone": {
+        "50":  { "value": "#f7f7f6", "description": "Stone scale — lightest cool-neutral surface; cards/modals one step above page" },
+        "100": { "value": "#ededeb", "description": "Stone scale — canonical page background (light mode)" },
+        "200": { "value": "#dcdcda", "description": "Stone scale — borders, dividers" },
+        "300": { "value": "#c1c1bf", "description": "Stone scale — pressed border / disabled chrome" },
+        "400": { "value": "#a0a0a0", "description": "Stone scale — disabled text, muted icons" },
+        "500": { "value": "#7c7c7c", "description": "Stone scale — secondary text" },
+        "600": { "value": "#5e5e5c", "description": "Stone scale — caption / metadata text on light surfaces" },
+        "700": { "value": "#424240", "description": "Stone scale — primary text on light surfaces" },
+        "800": { "value": "#292927", "description": "Stone scale — high-contrast headings on light surfaces" },
+        "900": { "value": "#14140f", "description": "Stone scale — body text on light surfaces" }
+      },
+      "paper": {
+        "50":  { "value": "#fefdfb", "description": "Paper scale — lightest warm surface; elevated cards/modals when warm tint is desired" },
+        "100": { "value": "#fdf9f2", "description": "Paper scale — warm page-background option" },
+        "200": { "value": "#faf2e3", "description": "Paper scale — code-block and pull-quote background" },
+        "300": { "value": "#f5e8cf", "description": "Paper scale — call-out / emphasised panel background" },
+        "400": { "value": "#edd9b3", "description": "Paper scale — muted warm accent" },
+        "500": { "value": "#e0c088", "description": "Paper scale — strong warm accent; wheat" }
+      }
+    },
+    "functional": {
+      "success": { "value": "#27AE60", "description": "Success states and positive actions" },
+      "warning": { "value": "#F39C12", "description": "Warning states and caution" },
+      "error":   { "value": "#E74C3C", "description": "Error states and critical issues" },
+      "info":    { "value": "#3498DB", "description": "Informational content" }
+    }
+  }
+}

package/src/theme-colors.json

@@ -0,0 +1,76 @@
+{
+  "color": {
+    "surface": {
+      "page": {
+        "light": "#ededeb",
+        "dark": "#141410",
+        "description": "Main page background — stone-100 (light) / stone-900 (dark)"
+      },
+      "page-scrolled": {
+        "light": "#ededeb",
+        "dark": "#141410",
+        "description": "Page background when navbar shrinks — matches page"
+      },
+      "elevated": {
+        "light": "#f7f7f6",
+        "dark": "#1c1917",
+        "description": "Cards, modals, dropdowns — one step above page (stone-50 / ink-800)"
+      },
+      "sunken": {
+        "light": "#faf2e3",
+        "dark": "#0c0a09",
+        "description": "Input fields, code blocks — below page level (paper-200 light / ink-900 dark)"
+      },
+      "navbar": {
+        "light": "#ededeb",
+        "dark": "#141410",
+        "description": "Navbar background — matches page in both themes"
+      },
+      "navbar-scrolled": {
+        "light": "#ededeb",
+        "dark": "#141410",
+        "description": "Navbar when scrolled/shrunk — matches page-scrolled"
+      },
+      "code": {
+        "light": "#faf2e3",
+        "dark": "#1c1917",
+        "description": "Code block and inline code background"
+      }
+    },
+    "border": {
+      "subtle":   { "light": "rgba(12, 10, 9, 0.08)", "dark": "rgba(253, 249, 242, 0.08)", "description": "Subtle borders — element separation" },
+      "moderate": { "light": "rgba(12, 10, 9, 0.15)", "dark": "rgba(253, 249, 242, 0.15)", "description": "Moderate borders — defined boundaries" },
+      "strong":   { "light": "rgba(12, 10, 9, 0.25)", "dark": "rgba(253, 249, 242, 0.25)", "description": "Strong borders — prominent separation" },
+      "card":     { "light": "rgba(12, 10, 9, 0.15)", "dark": "rgba(253, 249, 242, 0.15)", "description": "Card border color with transparency for subtle definition" },
+      "code":     { "light": "#d6d3d1",                "dark": "#292524",                   "description": "Code block border" }
+    },
+    "content": {
+      "primary":   { "light": "#14140f", "dark": "#fdf9f2", "description": "Primary text — stone-900 on stone-100 (light) / paper-100 on dark surface" },
+      "secondary": { "light": "#7c7c7c", "dark": "#a8a29e", "description": "Secondary text — stone-500 (light) / ink-300 (dark)" },
+      "muted":     { "light": "#78716c", "dark": "#78716c", "description": "Muted text — captions, meta info" },
+      "inverse":   { "light": "#fdf9f2", "dark": "#0c0a09", "description": "Inverse text — for contrasting backgrounds" }
+    },
+    "interactive": {
+      "primary": {
+        "light": "#292524",
+        "dark": "#d6d3d1",
+        "description": "Primary interactive — ink-700 on light (15:1 on stone-100, AAA) / ink-200 on dark (high contrast quiet voice). Neutral default; @dataimago/tokens uses forest-700/forest-300 for dataimago house identity. Owners customize by overriding."
+      },
+      "hover": {
+        "light": "#1c1917",
+        "dark": "#a8a29e",
+        "description": "Hover state — ink-800 on light (one step deeper) / ink-300 on dark"
+      },
+      "accent": {
+        "light": "#292524",
+        "dark": "#d6d3d1",
+        "description": "Accent — neutral default mirrors interactive.primary (ink-700 / ink-200). The neutral package intentionally ships without a brand-color accent role; consumers that want a sky-blue, copper, forest, or other distinctive accent override this token. @dataimago/tokens maps this role to mode-aware presentation-blue per iteration-2."
+      },
+      "focus": {
+        "light": "#292524",
+        "dark": "#d6d3d1",
+        "description": "Focus indicators — mirrors interactive.primary"
+      }
+    }
+  }
+}

package/src/typography.json

@@ -0,0 +1,78 @@
+{
+  "font": {
+    "family": {
+      "sans": {
+        "value": "Noto Sans, Fira Sans, system-ui, sans-serif",
+        "description": "Primary sans-serif font - body text. Same as @dataimago/tokens (Noto Sans is neutral)."
+      },
+      "mono": {
+        "value": "JetBrains Mono, SF Mono, Monaco, Inconsolata, monospace",
+        "description": "Monospace font - code blocks and technical content. Same as @dataimago/tokens."
+      },
+      "display": {
+        "value": "var(--font-family-display-editorial)",
+        "description": "Alias of display-editorial. Preserved for naming-parity with @dataimago/tokens; consumers writing `var(--font-family-display)` get sensible neutral output."
+      },
+      "display-editorial": {
+        "value": "Noto Sans, system-ui, sans-serif",
+        "description": "Editorial display family — neutral default. @dataimago/tokens uses Josefin Sans here; @dataimago/tokens-neutral substitutes Noto Sans so externally-owned consumers (Level-3 user apps, third-party Level-2 hubs) ship without inheriting the dataimago house typographic identity. Owners may override by extending the Tailwind preset or redeclaring the CSS variable."
+      },
+      "display-documentation": {
+        "value": "Noto Sans, system-ui, sans-serif",
+        "description": "Documentation display family — Noto Sans. Identical to @dataimago/tokens (this family was already Noto Sans in the house package)."
+      },
+      "brand": {
+        "value": "Noto Sans, system-ui, sans-serif",
+        "description": "Brand font — neutral default. @dataimago/tokens uses Futura for the dataimago navbar wordmark; @dataimago/tokens-neutral substitutes Noto Sans. Owners customize by extending the Tailwind preset."
+      },
+      "math": {
+        "value": "Noto Sans Math, Noto Sans, system-ui, sans-serif",
+        "description": "Mathematical notation font — Noto Sans Math. Same as @dataimago/tokens (neutral by virtue of Noto's broad coverage)."
+      }
+    },
+    "size": {
+      "micro":          { "value": "0.75rem",  "description": "Micro text - captions, metadata" },
+      "small":          { "value": "0.875rem", "description": "Small text - secondary information" },
+      "base":           { "value": "1rem",     "description": "Base text size - body content" },
+      "readable":       { "value": "1.125rem", "description": "Comfortable reading size - main content" },
+      "emphasis":       { "value": "1.25rem",  "description": "Emphasized text - call-outs" },
+      "heading-small":  { "value": "1.5rem",   "description": "Small headings - H4, H5" },
+      "heading-medium": { "value": "1.875rem", "description": "Medium headings - H3" },
+      "heading-large":  { "value": "2.25rem",  "description": "Large headings - H2" },
+      "heading-xl":     { "value": "3rem",     "description": "Extra large headings - H1" }
+    },
+    "weight": {
+      "extralight": { "value": "200", "description": "Extra-light weight — reserved for display-scale refinements (subtitles, oversized numerals)" },
+      "light":      { "value": "300", "description": "Light weight — minor headings (h4–h6), large display at small sizes" },
+      "normal":     { "value": "400", "description": "Normal text weight — body content" },
+      "medium":     { "value": "500", "description": "Medium weight — emphasis within text" },
+      "semibold":   { "value": "600", "description": "Semi-bold — subtitles, important text, default h1/h2 in the neutral stack" },
+      "bold":       { "value": "700", "description": "Bold — strong emphasis" },
+      "heading": {
+        "_invariant": "Heading-weight cluster — neutral default uses semibold (600) for h1/h2 because Noto Sans's medium (500) feels light at hero scale where Josefin's medium has geometric character. Owners may override per-heading by extending the Tailwind preset.",
+        "h1":       { "value": "var(--font-weight-semibold)", "description": "Heading h1 weight — semibold (600). Neutral default; @dataimago/tokens uses medium (500) tuned for Josefin Sans's geometric voice." },
+        "h2":       { "value": "var(--font-weight-semibold)", "description": "Heading h2 weight — semibold (600). Neutral default; @dataimago/tokens uses medium (500)." },
+        "h3":       { "value": "var(--font-weight-medium)",   "description": "Heading h3 weight — medium (500). Same hierarchy logic as the house package; sized differentiation does the rest." },
+        "h4":       { "value": "var(--font-weight-normal)",   "description": "Heading h4 weight — normal (400). Minor heading." },
+        "h5":       { "value": "var(--font-weight-normal)",   "description": "Heading h5 weight — normal (400). Minor heading." },
+        "h6":       { "value": "var(--font-weight-normal)",   "description": "Heading h6 weight — normal (400). Minor heading." },
+        "subtitle": { "value": "var(--font-weight-semibold)", "description": "Subtitle weight — semibold (600)." }
+      }
+    },
+    "style": {
+      "normal":  { "value": "normal",  "description": "Normal font style - upright text" },
+      "italic":  { "value": "italic",  "description": "Italic style - sloped text with true italic glyphs" },
+      "oblique": { "value": "oblique", "description": "Oblique style - sloped text without true italic design" }
+    },
+    "lineHeight": {
+      "tight":   { "value": "1.25",  "description": "Tight line height - headings" },
+      "normal":  { "value": "1.5",   "description": "Normal line height - body text" },
+      "relaxed": { "value": "1.625", "description": "Relaxed line height - long-form content" }
+    },
+    "feature-settings": {
+      "_invariant": "OpenType feature settings — neutral defaults. @dataimago/tokens applies lining figures (lnum) to display headings to correct Josefin Sans's old-style default figures; Noto Sans uses uniform-baseline figures natively, so the neutral package emits `normal` for both display and body.",
+      "display": { "value": "\"normal\"", "description": "Default figure style for display headings (neutral default). Noto Sans's native figures are uniform-baseline; no lnum override needed." },
+      "body":    { "value": "\"normal\"", "description": "Default figure style for body text (neutral default)." }
+    }
+  }
+}