@ponchia/ui 0.2.0

package/css/tokens.css

@@ -0,0 +1,182 @@
+/* ==========================================================================
+   @ponchia/ui — design tokens
+   Nothing-inspired: monochrome surfaces, single red accent, dot-matrix type.
+   Dual light/dark. Variable names are stable so semantic classes inherit.
+   The Doto @font-face declarations live in fonts.css (bundled by
+   core.css/index.css) so font hosting is decoupled from these tokens —
+   a consumer can self-host Doto and still use the token layer by
+   overriding --display / --dot-font.
+   ========================================================================== */
+
+:root {
+  /* Sharp, near-zero radii — Nothing surfaces are crisp, not pill-soft. */
+  --radius-xl: 4px;
+  --radius-lg: 3px;
+  --radius-md: 2px;
+  --radius-sm: 1px;
+  --radius-pill: 999px;
+
+  /* Spacing scale */
+  --space-2xs: 0.25rem;
+  --space-xs: 0.5rem;
+  --space-sm: 0.75rem;
+  --space-md: 1rem;
+  --space-lg: 1.35rem;
+  --space-xl: 1.75rem;
+  --space-2xl: 2.5rem;
+
+  /* Type — Doto is the dot-matrix display face; body stays mono-grotesque. */
+  --mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', ui-monospace, monospace;
+  --sans:
+    'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  --display: 'Doto', var(--mono);
+  --dot-font: 'Doto', var(--mono);
+  --text-2xs: 0.68rem;
+  --text-xs: 0.76rem;
+  --text-sm: 0.86rem;
+  --text-base: 0.95rem;
+  --text-lg: 1.15rem;
+  --text-xl: 1.45rem;
+  --tracking-wide: 0.14em;
+  --tracking-wider: 0.22em;
+
+  /* Motion — restrained, spring-tipped. */
+  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
+  --duration-fast: 130ms;
+  --duration-base: 200ms;
+  --duration-slow: 360ms;
+
+  /* Dot-matrix motif sizing */
+  --dot-size: 2px;
+  --dot-gap: 14px;
+
+  /* Aliases kept for back-compat with existing semantic classes */
+  --surface: var(--panel);
+  --surface-raised: var(--panel-strong);
+  --surface-muted: var(--panel-soft);
+  --border: var(--line);
+  --border-strong: var(--line-strong);
+}
+
+/* --------------------------------------------------------------------------
+   Light — paper white / ink. Color is rationed: red accent only.
+   -------------------------------------------------------------------------- */
+:root,
+:root[data-theme='light'] {
+  color-scheme: light;
+
+  --bg: #f4f4f2;
+  --bg-elevated: #fbfbfa;
+  --bg-accent: rgba(215, 25, 33, 0.06);
+  --panel: #ffffff;
+  --panel-strong: #ffffff;
+  --panel-soft: #ececea;
+  --line: #d8d8d4;
+  --line-strong: #a8a8a2;
+  --text: #0a0a0a;
+  --text-soft: #353533;
+  --text-dim: #7a7a75;
+  --accent: #d71921;
+  --accent-strong: #b3141b;
+  --accent-soft: rgba(215, 25, 33, 0.1);
+  --success: #2f7d4f;
+  --success-soft: rgba(47, 125, 79, 0.12);
+  --warning: #8a6d1c;
+  --warning-soft: rgba(138, 109, 28, 0.13);
+  --orange: #a85f32;
+  --orange-soft: rgba(168, 95, 50, 0.13);
+  --danger: #c01622;
+  --danger-soft: rgba(192, 22, 34, 0.1);
+  --code-bg: rgba(10, 10, 10, 0.05);
+  --button-text: #ffffff;
+  --field-dot: rgba(10, 10, 10, 0.16);
+  --field-dot-hot: rgba(10, 10, 10, 0.4);
+  --field-dot-accent: rgba(215, 25, 33, 0.78);
+  --focus-ring: rgba(215, 25, 33, 0.5);
+  --shadow: none;
+  --shadow-raised: 0 0 0 1px var(--line-strong);
+}
+
+/* --------------------------------------------------------------------------
+   Dark — true black. The Nothing default.
+
+   The palette below is intentionally written twice: once under
+   `prefers-color-scheme: dark` (system default, unless overridden to light)
+   and once under `[data-theme='dark']` (explicit opt-in). Vanilla CSS can't
+   share one declaration block between a media query and a top-level selector
+   without a build step or nesting, neither of which this zero-dep package
+   has. Keep the two blocks in sync when editing dark tokens.
+   -------------------------------------------------------------------------- */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    color-scheme: dark;
+
+    --bg: #000000;
+    --bg-elevated: #0a0a0a;
+    --bg-accent: rgba(255, 59, 65, 0.08);
+    --panel: #0c0c0c;
+    --panel-strong: #141414;
+    --panel-soft: #1a1a1a;
+    --line: #2a2a2a;
+    --line-strong: #444444;
+    --text: #f2f2f2;
+    --text-soft: #c4c4c4;
+    --text-dim: #7d7d7d;
+    --accent: #ff3b41;
+    --accent-strong: #ff5b60;
+    --accent-soft: rgba(255, 59, 65, 0.14);
+    --success: #4ec27e;
+    --success-soft: rgba(78, 194, 126, 0.14);
+    --warning: #d8bd72;
+    --warning-soft: rgba(216, 189, 114, 0.14);
+    --orange: #d08c5b;
+    --orange-soft: rgba(208, 140, 91, 0.15);
+    --danger: #ff4d54;
+    --danger-soft: rgba(255, 77, 84, 0.15);
+    --code-bg: rgba(255, 255, 255, 0.05);
+    --button-text: #000000;
+    --field-dot: rgba(242, 242, 242, 0.14);
+    --field-dot-hot: rgba(242, 242, 242, 0.36);
+    --field-dot-accent: rgba(255, 59, 65, 0.82);
+    --focus-ring: rgba(255, 59, 65, 0.55);
+    --shadow: none;
+    --shadow-raised: 0 0 0 1px var(--line-strong);
+  }
+}
+
+:root[data-theme='dark'] {
+  color-scheme: dark;
+
+  --bg: #000000;
+  --bg-elevated: #0a0a0a;
+  --bg-accent: rgba(255, 59, 65, 0.08);
+  --panel: #0c0c0c;
+  --panel-strong: #141414;
+  --panel-soft: #1a1a1a;
+  --line: #2a2a2a;
+  --line-strong: #444444;
+  --text: #f2f2f2;
+  --text-soft: #c4c4c4;
+  --text-dim: #7d7d7d;
+  --accent: #ff3b41;
+  --accent-strong: #ff5b60;
+  --accent-soft: rgba(255, 59, 65, 0.14);
+  --success: #4ec27e;
+  --success-soft: rgba(78, 194, 126, 0.14);
+  --warning: #d8bd72;
+  --warning-soft: rgba(216, 189, 114, 0.14);
+  --orange: #d08c5b;
+  --orange-soft: rgba(208, 140, 91, 0.15);
+  --danger: #ff4d54;
+  --danger-soft: rgba(255, 77, 84, 0.15);
+  --code-bg: rgba(255, 255, 255, 0.05);
+  --button-text: #000000;
+  --field-dot: rgba(242, 242, 242, 0.14);
+  --field-dot-hot: rgba(242, 242, 242, 0.36);
+  --field-dot-accent: rgba(255, 59, 65, 0.82);
+  --focus-ring: rgba(255, 59, 65, 0.55);
+  --shadow: none;
+  --shadow-raised: 0 0 0 1px var(--line-strong);
+}

package/css/typography.css

@@ -0,0 +1,139 @@
+.hero__copy h1 {
+  max-width: 10ch;
+}
+
+.display-heading {
+  font-family: var(--display);
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1.05;
+}
+
+.hero__lede,
+.page-head p {
+  font-size: 1.08rem;
+  max-width: 68ch;
+}
+
+.eyebrow,
+.post-header__eyebrow,
+.worklog-summary__eyebrow,
+.callout__title,
+.metric-tile__label,
+.project-card__index,
+.project-card__category,
+.signal-panel__label,
+.focus-panel__title,
+.section-link,
+.profile-link-list dt {
+  color: var(--accent);
+  font-family: var(--display);
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: var(--tracking-wide);
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.eyebrow--tight {
+  font-size: 0.75rem;
+}
+
+.action-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem;
+}
+
+.button {
+  background: var(--accent);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  color: var(--button-text);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--mono);
+  font-size: 0.86rem;
+  font-weight: 600;
+  justify-content: center;
+  letter-spacing: var(--tracking-wide);
+  line-height: 1;
+  text-transform: uppercase;
+  min-height: 2.4rem;
+  min-width: 8.2rem;
+  padding: 0.62rem 0.8rem;
+  transition:
+    background-color var(--duration-fast) var(--ease-standard),
+    border-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard),
+    transform var(--duration-fast) var(--ease-standard);
+}
+
+.button:not(.button--ghost) {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.button:hover {
+  background: var(--accent-strong);
+  border-color: var(--accent-strong);
+}
+
+.button--ghost {
+  background: var(--panel-strong);
+  border-color: var(--line);
+  color: var(--text);
+}
+
+.button--ghost:hover {
+  background: var(--panel-soft);
+  border-color: var(--line-strong);
+}
+
+.button:active {
+  transform: translateY(0);
+}
+
+.section-link {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.38rem;
+  justify-self: start;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent);
+  text-underline-offset: 0.22rem;
+  transition:
+    color var(--duration-fast) var(--ease-standard),
+    text-decoration-color var(--duration-fast) var(--ease-standard);
+}
+
+.section-link::after {
+  border-right: 1px solid currentColor;
+  border-top: 1px solid currentColor;
+  content: '';
+  height: 0.42rem;
+  transform: rotate(45deg);
+  transition: transform var(--duration-fast) var(--ease-standard);
+  width: 0.42rem;
+}
+
+.section-link:hover {
+  color: var(--accent-strong);
+  text-decoration-color: var(--accent-strong);
+}
+
+.section-link:hover::after {
+  transform: translateX(0.12rem) rotate(45deg);
+}
+
+@media (hover: hover) {
+  .button:hover {
+    transform: translateY(-1px);
+  }
+}
+
+.hero__microcopy {
+  font-size: 0.96rem;
+  margin: 0;
+  max-width: 56ch;
+}

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@ponchia/ui",
+  "version": "0.2.0",
+  "type": "module",
+  "description": "Shared Bronto UI framework — Nothing-inspired monochrome CSS theme, dot-matrix motifs, admin shell.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Ponchia/bronto-ui.git"
+  },
+  "homepage": "https://github.com/Ponchia/bronto-ui#readme",
+  "bugs": "https://github.com/Ponchia/bronto-ui/issues",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "css",
+    "fonts",
+    "tokens",
+    "classes",
+    "behaviors"
+  ],
+  "scripts": {
+    "lint": "stylelint \"css/**/*.css\"",
+    "lint:fix": "stylelint \"css/**/*.css\" --fix",
+    "tokens:build": "node scripts/gen-tokens-json.mjs",
+    "check:exports": "node scripts/check-exports.mjs",
+    "check:tokens": "node scripts/check-tokens.mjs",
+    "check:classes": "node scripts/check-classes.mjs",
+    "check:pack": "node scripts/check-pack.mjs",
+    "check": "npm run lint && npm run check:exports && npm run check:tokens && npm run check:classes && npm run check:pack",
+    "test": "node --test \"test/*.test.mjs\"",
+    "prepack": "npm run tokens:build"
+  },
+  "devDependencies": {
+    "jsdom": "^25.0.1",
+    "stylelint": "^16.10.0",
+    "stylelint-config-standard": "^36.0.1"
+  },
+  "exports": {
+    "./css": "./css/index.css",
+    "./css/index.css": "./css/index.css",
+    "./css/core.css": "./css/core.css",
+    "./css/tokens.css": "./css/tokens.css",
+    "./css/fonts.css": "./css/fonts.css",
+    "./css/base.css": "./css/base.css",
+    "./css/motion.css": "./css/motion.css",
+    "./css/dots.css": "./css/dots.css",
+    "./css/layout.css": "./css/layout.css",
+    "./css/navigation.css": "./css/navigation.css",
+    "./css/typography.css": "./css/typography.css",
+    "./css/primitives.css": "./css/primitives.css",
+    "./css/forms.css": "./css/forms.css",
+    "./css/table.css": "./css/table.css",
+    "./css/cards.css": "./css/cards.css",
+    "./css/app.css": "./css/app.css",
+    "./css/responsive.css": "./css/responsive.css",
+    "./tokens": {
+      "types": "./tokens/index.d.ts",
+      "default": "./tokens/index.js"
+    },
+    "./tokens.json": "./tokens/index.json",
+    "./classes": {
+      "types": "./classes/index.d.ts",
+      "default": "./classes/index.js"
+    },
+    "./behaviors": {
+      "types": "./behaviors/index.d.ts",
+      "default": "./behaviors/index.js"
+    },
+    "./fonts/*": "./fonts/*"
+  }
+}

package/tokens/index.d.ts

@@ -0,0 +1,21 @@
+/** @ponchia/ui — design token data types. */
+
+export type ThemeName = 'light' | 'dark';
+
+/** Exact mirror of the :root blocks in css/tokens.css. */
+export declare const cssVars: {
+  global: Record<`--${string}`, string>;
+  light: Record<`--${string}`, string>;
+  dark: Record<`--${string}`, string>;
+};
+
+/** Ergonomic view derived from {@link cssVars} (custom-property `--` prefix stripped). */
+export declare const tokens: {
+  scale: Record<string, string>;
+  color: { light: Record<string, string>; dark: Record<string, string> };
+};
+
+/** Resolve the palette for a theme. Unknown values fall back to light. */
+export declare function themeColor(theme?: string): Record<string, string>;
+
+export default tokens;

package/tokens/index.js

@@ -0,0 +1,141 @@
+/**
+ * @ponchia/ui — design tokens as data.
+ *
+ * For consumers that need token values in JS rather than CSS: charting,
+ * canvas, inline styles, theme-aware logic, Style Dictionary / Figma sync.
+ *
+ * `cssVars` is the canonical, exact mirror of the :root blocks in
+ * css/tokens.css — keyed by the real custom-property name, values are
+ * the verbatim CSS strings. scripts/check-tokens.mjs fails CI if this
+ * drifts from the stylesheet, so the two cannot silently diverge.
+ *
+ * `tokens` is an ergonomic view derived programmatically from `cssVars`
+ * (no second hand-maintained copy, so nothing to keep in sync).
+ */
+
+/** Exact mirror of css/tokens.css. Do not reshape — the sync check is literal. */
+export const cssVars = {
+  // Global :root — scales, shared with both themes.
+  global: {
+    '--radius-xl': '4px',
+    '--radius-lg': '3px',
+    '--radius-md': '2px',
+    '--radius-sm': '1px',
+    '--radius-pill': '999px',
+    '--space-2xs': '0.25rem',
+    '--space-xs': '0.5rem',
+    '--space-sm': '0.75rem',
+    '--space-md': '1rem',
+    '--space-lg': '1.35rem',
+    '--space-xl': '1.75rem',
+    '--space-2xl': '2.5rem',
+    '--mono': "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', ui-monospace, monospace",
+    '--sans':
+      "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    '--display': "'Doto', var(--mono)",
+    '--dot-font': "'Doto', var(--mono)",
+    '--text-2xs': '0.68rem',
+    '--text-xs': '0.76rem',
+    '--text-sm': '0.86rem',
+    '--text-base': '0.95rem',
+    '--text-lg': '1.15rem',
+    '--text-xl': '1.45rem',
+    '--tracking-wide': '0.14em',
+    '--tracking-wider': '0.22em',
+    '--ease-standard': 'cubic-bezier(0.2, 0.8, 0.2, 1)',
+    '--ease-spring': 'cubic-bezier(0.16, 1, 0.3, 1)',
+    '--ease-out': 'cubic-bezier(0.33, 1, 0.68, 1)',
+    '--duration-fast': '130ms',
+    '--duration-base': '200ms',
+    '--duration-slow': '360ms',
+    '--dot-size': '2px',
+    '--dot-gap': '14px',
+    '--surface': 'var(--panel)',
+    '--surface-raised': 'var(--panel-strong)',
+    '--surface-muted': 'var(--panel-soft)',
+    '--border': 'var(--line)',
+    '--border-strong': 'var(--line-strong)',
+  },
+  // Light palette — :root, :root[data-theme='light'].
+  light: {
+    '--bg': '#f4f4f2',
+    '--bg-elevated': '#fbfbfa',
+    '--bg-accent': 'rgba(215, 25, 33, 0.06)',
+    '--panel': '#ffffff',
+    '--panel-strong': '#ffffff',
+    '--panel-soft': '#ececea',
+    '--line': '#d8d8d4',
+    '--line-strong': '#a8a8a2',
+    '--text': '#0a0a0a',
+    '--text-soft': '#353533',
+    '--text-dim': '#7a7a75',
+    '--accent': '#d71921',
+    '--accent-strong': '#b3141b',
+    '--accent-soft': 'rgba(215, 25, 33, 0.1)',
+    '--success': '#2f7d4f',
+    '--success-soft': 'rgba(47, 125, 79, 0.12)',
+    '--warning': '#8a6d1c',
+    '--warning-soft': 'rgba(138, 109, 28, 0.13)',
+    '--orange': '#a85f32',
+    '--orange-soft': 'rgba(168, 95, 50, 0.13)',
+    '--danger': '#c01622',
+    '--danger-soft': 'rgba(192, 22, 34, 0.1)',
+    '--code-bg': 'rgba(10, 10, 10, 0.05)',
+    '--button-text': '#ffffff',
+    '--field-dot': 'rgba(10, 10, 10, 0.16)',
+    '--field-dot-hot': 'rgba(10, 10, 10, 0.4)',
+    '--field-dot-accent': 'rgba(215, 25, 33, 0.78)',
+    '--focus-ring': 'rgba(215, 25, 33, 0.5)',
+    '--shadow': 'none',
+    '--shadow-raised': '0 0 0 1px var(--line-strong)',
+  },
+  // Dark palette — both the prefers-color-scheme and [data-theme='dark'] blocks.
+  dark: {
+    '--bg': '#000000',
+    '--bg-elevated': '#0a0a0a',
+    '--bg-accent': 'rgba(255, 59, 65, 0.08)',
+    '--panel': '#0c0c0c',
+    '--panel-strong': '#141414',
+    '--panel-soft': '#1a1a1a',
+    '--line': '#2a2a2a',
+    '--line-strong': '#444444',
+    '--text': '#f2f2f2',
+    '--text-soft': '#c4c4c4',
+    '--text-dim': '#7d7d7d',
+    '--accent': '#ff3b41',
+    '--accent-strong': '#ff5b60',
+    '--accent-soft': 'rgba(255, 59, 65, 0.14)',
+    '--success': '#4ec27e',
+    '--success-soft': 'rgba(78, 194, 126, 0.14)',
+    '--warning': '#d8bd72',
+    '--warning-soft': 'rgba(216, 189, 114, 0.14)',
+    '--orange': '#d08c5b',
+    '--orange-soft': 'rgba(208, 140, 91, 0.15)',
+    '--danger': '#ff4d54',
+    '--danger-soft': 'rgba(255, 77, 84, 0.15)',
+    '--code-bg': 'rgba(255, 255, 255, 0.05)',
+    '--button-text': '#000000',
+    '--field-dot': 'rgba(242, 242, 242, 0.14)',
+    '--field-dot-hot': 'rgba(242, 242, 242, 0.36)',
+    '--field-dot-accent': 'rgba(255, 59, 65, 0.82)',
+    '--focus-ring': 'rgba(255, 59, 65, 0.55)',
+    '--shadow': 'none',
+    '--shadow-raised': '0 0 0 1px var(--line-strong)',
+  },
+};
+
+const strip = (obj) =>
+  Object.fromEntries(Object.entries(obj).map(([k, v]) => [k.replace(/^--/, ''), v]));
+
+/** Ergonomic view, derived from cssVars (single source — never edit directly). */
+export const tokens = {
+  scale: strip(cssVars.global),
+  color: { light: strip(cssVars.light), dark: strip(cssVars.dark) },
+};
+
+/** Resolve the palette for a theme: themeColor('dark').accent === '#ff3b41'. */
+export function themeColor(theme = 'light') {
+  return tokens.color[theme === 'dark' ? 'dark' : 'light'];
+}
+
+export default tokens;