@dataimago/tokens 0.1.0-alpha.1

package/src/spacing.json

@@ -0,0 +1,56 @@
+{
+  "spacing": {
+    "xs": {
+      "value": "0.25rem"
+    },
+    "sm": {
+      "value": "0.5rem"
+    },
+    "md": {
+      "value": "1rem"
+    },
+    "lg": {
+      "value": "1.5rem"
+    },
+    "xl": {
+      "value": "2rem"
+    },
+    "2xl": {
+      "value": "3rem"
+    },
+    "3xl": {
+      "value": "4rem"
+    }
+  },
+  "radius": {
+    "sm": {
+      "value": "0.25rem"
+    },
+    "md": {
+      "value": "0.5rem"
+    },
+    "lg": {
+      "value": "0.75rem"
+    },
+    "xl": {
+      "value": "1rem"
+    },
+    "full": {
+      "value": "9999px"
+    }
+  },
+  "shadow": {
+    "sm": {
+      "value": "0 1px 2px 0 rgb(0 0 0 / 0.05)"
+    },
+    "md": {
+      "value": "0 4px 6px -1px rgb(0 0 0 / 0.1)"
+    },
+    "lg": {
+      "value": "0 10px 15px -3px rgb(0 0 0 / 0.1)"
+    },
+    "xl": {
+      "value": "0 20px 25px -5px rgb(0 0 0 / 0.1)"
+    }
+  }
+}

package/src/theme-colors.json

@@ -0,0 +1,124 @@
+{
+  "color": {
+    "surface": {
+      "page": {
+        "light": "#fdf9f2",
+        "dark": "#0c0a09",
+        "description": "Main page background — cream-100 (light) / ink-900 (dark)"
+      },
+      "page-scrolled": {
+        "light": "#fdf9f2",
+        "dark": "#0c0a09",
+        "description": "Page background when navbar shrinks — matches page"
+      },
+      "elevated": {
+        "light": "#fefdfb",
+        "dark": "#1c1917",
+        "description": "Cards, modals, dropdowns — one step above page"
+      },
+      "sunken": {
+        "light": "#faf2e3",
+        "dark": "#0c0a09",
+        "description": "Input fields, code blocks — below page level"
+      },
+      "navbar": {
+        "light": "#fdf9f2",
+        "dark": "#0c0a09",
+        "description": "Navbar background — matches page in both themes"
+      },
+      "navbar-scrolled": {
+        "light": "#fdf9f2",
+        "dark": "#0c0a09",
+        "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": "#0c0a09",
+        "dark": "#fdf9f2",
+        "description": "Primary text — ink-900 on cream-100 (light) / cream-100 on ink-900 (dark)"
+      },
+      "secondary": {
+        "light": "#57534e",
+        "dark": "#a8a29e",
+        "description": "Secondary text — medium emphasis on both themes"
+      },
+      "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": "#d46820",
+        "dark": "#f0a467",
+        "description": "Primary interactive — copper-500 on light, copper-300 on dark"
+      },
+      "hover": {
+        "light": "#b55017",
+        "dark": "#ea8441",
+        "description": "Hover state — copper-600 on light, copper-400 on dark"
+      },
+      "accent": {
+        "light": "#b54a27",
+        "dark": "#b54a27",
+        "description": "Accent — emancipation copper-red; moral-weight color"
+      },
+      "focus": {
+        "light": "#d46820",
+        "dark": "#f0a467",
+        "description": "Focus indicators — mirrors interactive.primary"
+      }
+    },
+    "presentation": {
+      "accent": {
+        "light": "#3498DB",
+        "dark": "#3498DB",
+        "description": "Presentation accent — Flat-UI peter-river; reserved for reveal.js 2030s-feel highlights. Not for body prose or interactive primary use. Pairs well with copper on dark slides."
+      },
+      "accent-hover": {
+        "light": "#2980B9",
+        "dark": "#2980B9",
+        "description": "Presentation accent hover/emphasized variant — Flat-UI belize-hole"
+      }
+    }
+  }
+}

package/src/typography.json

@@ -0,0 +1,148 @@
+{
+  "font": {
+    "family": {
+      "sans": {
+        "value": "Fira Sans, system-ui, sans-serif",
+        "description": "Primary sans-serif font - body text"
+      },
+      "mono": {
+        "value": "JetBrains Mono, SF Mono, Monaco, Inconsolata, monospace",
+        "description": "Monospace font - code blocks and technical content"
+      },
+      "display": {
+        "value": "Josefin Sans, system-ui, sans-serif",
+        "description": "Display font - headings and prominent text"
+      },
+      "brand": {
+        "value": "Futura, system-ui, sans-serif",
+        "description": "Brand font - dataimago navbar and branding elements"
+      },
+      "math": {
+        "value": "Fira Math, Fira Sans Math, system-ui, sans-serif",
+        "description": "Mathematical notation font"
+      }
+    },
+    "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 serif-like display at small sizes"
+      },
+      "normal": {
+        "value": "400",
+        "description": "Normal text weight — body content"
+      },
+      "medium": {
+        "value": "500",
+        "description": "Medium weight — emphasis within text, h2"
+      },
+      "semibold": {
+        "value": "600",
+        "description": "Semi-bold — subtitles, important text"
+      },
+      "bold": {
+        "value": "700",
+        "description": "Bold — h1, strong emphasis"
+      },
+      "heading": {
+        "h1": {
+          "value": "var(--font-weight-bold)",
+          "description": "Heading h1 weight — bold (700). Top-level voice; carries the most typographic presence."
+        },
+        "h2": {
+          "value": "var(--font-weight-medium)",
+          "description": "Heading h2 weight — medium (500). Second tier; sub-sections."
+        },
+        "h3": {
+          "value": "var(--font-weight-normal)",
+          "description": "Heading h3 weight — normal (400). Differentiated from body by size, not weight."
+        },
+        "h4": {
+          "value": "var(--font-weight-light)",
+          "description": "Heading h4 weight — light (300). Minor heading; quiet hierarchy marker."
+        },
+        "h5": {
+          "value": "var(--font-weight-light)",
+          "description": "Heading h5 weight — light (300). Minor heading."
+        },
+        "h6": {
+          "value": "var(--font-weight-light)",
+          "description": "Heading h6 weight — light (300). Minor heading."
+        },
+        "subtitle": {
+          "value": "var(--font-weight-semibold)",
+          "description": "Subtitle weight — semibold (600). Heavier than h3 on purpose: reads as emphasis, not continuation."
+        }
+      }
+    },
+    "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"
+      }
+    }
+  }
+}