@judarn/ui 0.0.0-stage → 0.7.1

package/styles/components.css

@@ -0,0 +1,243 @@
+/* =========================================================================
+   JUDARN DESIGN SYSTEM
+   components.css – component styles (flat, geometric, no decoration)
+   Interaction model: COLOR INVERSION on hover, flat grey on active.
+   No shadows, no gradients, no radius (unless structurally motivated).
+   ========================================================================= */
+
+/* ---- BUTTON ------------------------------------------------------------ */
+.btn {
+  font-family: var(--font-sans);
+  font-weight: var(--weight-medium);
+  letter-spacing: var(--track-body);
+  -webkit-appearance: none;
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-tight);
+  border: var(--rule) solid var(--black);
+  background: var(--black);
+  color: var(--paper);
+  cursor: pointer;
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--size-body);
+  line-height: 1.2;
+  border-radius: var(--radius-control);
+  transition: background-color 120ms linear, color 120ms linear, border-color 120ms linear;
+  text-align: center;
+  white-space: nowrap;
+}
+.btn:hover { background: var(--white); color: var(--black); border-color: var(--black); }     /* invert */
+.btn:active { background: var(--ink-60); border-color: var(--ink-60); color: var(--paper); }
+.btn:focus-visible { outline: var(--rule-bold) solid var(--accent); outline-offset: 2px; }
+
+.btn--outline { background: transparent; color: var(--black); border: var(--rule) solid var(--black); }
+.btn--outline:hover { background: var(--black); color: var(--paper); }
+.btn--outline:active { background: var(--ink-60); border-color: var(--ink-60); color: var(--paper); }
+
+.btn--secondary { background: var(--jd-surface-recessed); color: var(--black); border: var(--rule) solid var(--ink-30); }
+.btn--secondary:hover { background: var(--white); color: var(--black); border-color: var(--ink-60); }
+.btn--secondary:active { background: var(--ink-60); border-color: var(--ink-60); color: var(--paper); }
+
+.btn--ghost { background: transparent; color: var(--black); border-color: transparent; padding-left: 0; padding-right: 0; }
+.btn--ghost:hover { background: transparent; color: var(--black); border-bottom-color: var(--black); }
+.btn--ghost:active { background: transparent; color: var(--ink-60); border-bottom-color: var(--ink-60); }
+
+.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
+.btn--accent:hover { background: var(--white); color: var(--accent-fg); border-color: var(--accent-fg); }
+.btn--accent:active { filter: none; background: var(--accent); color: var(--accent-ink); }
+
+.btn--sm { padding: var(--space-1) var(--space-2); font-size: var(--size-small); min-height: var(--space-touch); }
+.btn--lg { padding: var(--space-3) var(--space-4); font-size: var(--size-body-lg); }
+.btn--block { display: flex; width: 100%; }
+
+.btn:disabled, .btn[aria-disabled="true"] {
+  background: var(--jd-surface-recessed); color: var(--ink-30); border-color: var(--ink-30);
+  cursor: not-allowed; pointer-events: none;
+}
+
+/* ---- FIELD (text input / textarea / select) --------------------------- */
+.field { display: flex; flex-direction: column; gap: var(--gap-tight); }
+.field__label {
+  font-family: var(--font-sans);
+  font-weight: var(--weight-bold);
+  font-size: var(--size-label);
+  letter-spacing: var(--track-label);
+  text-transform: uppercase;
+  color: var(--black);
+}
+.field__input {
+  font-family: var(--font-sans);
+  font-size: var(--size-body);
+  color: var(--black);
+  background: var(--white);
+  border: var(--rule) solid var(--black);
+  border-radius: var(--radius-control);
+  padding: var(--space-2);
+  width: 100%;
+  transition: border-color 120ms linear, box-shadow 120ms linear;
+}
+.field__input::placeholder { color: var(--ink-60); }
+.field__input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
+.field__input:focus-visible { outline: var(--rule-bold) solid var(--accent); outline-offset: 2px; }
+.field__input:disabled { color: var(--ink-30); border-color: var(--ink-30); background: var(--jd-surface-recessed); cursor: not-allowed; }
+.field__input[aria-invalid="true"], .field__input.is-invalid { border-color: var(--signal-error); box-shadow: 0 0 0 1px var(--signal-error); }
+.field__hint { font-size: var(--size-small); color: var(--ink-60); }
+.field__hint.is-error, .field__hint--error { color: var(--signal-error); font-weight: var(--weight-medium); }
+textarea.field__input { resize: vertical; min-height: var(--space-12); line-height: var(--lh-body); }
+select.field__input { cursor: pointer; } /* native appearance keeps the platform chevron */
+
+/* ---- CARD -------------------------------------------------------------- */
+.card {
+  background: var(--white);
+  border: none;
+  border-radius: var(--radius-card);
+  padding: var(--space-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-normal);
+}
+.card--flat { border: none; padding: 0; border-radius: 0; }
+.card--compact { padding: var(--space-2); }
+.card--field { background: var(--bg2); border: none; }
+.card__eyebrow { color: var(--accent); } /* type comes from t-label (ADR-0009) */
+.card__title { font-size: var(--size-h4); font-weight: var(--weight-bold); letter-spacing: var(--track-head); }
+.card__body { font-size: var(--size-body); line-height: var(--lh-body); }
+.card__media { aspect-ratio: 3 / 2; background: var(--jd-surface-recessed); border-radius: var(--radius-control); overflow: hidden; }
+
+/* ---- BADGE / TAG ------------------------------------------------------- */
+.badge {
+  display: inline-flex; align-items: center; gap: var(--gap-tight);
+  font-family: var(--font-sans); font-weight: var(--weight-bold);
+  font-size: var(--size-label); letter-spacing: var(--track-body);
+  padding: 4px var(--space-1); border: var(--rule) solid var(--line);
+  background: var(--white); color: var(--black); border-radius: var(--radius-badge); line-height: 1;
+}
+.badge--solid { background: var(--black); color: var(--paper); }
+.badge--accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
+.badge--accent-outline { color: var(--accent-fg); border-color: var(--accent-fg); }
+
+.tag {
+  display: inline-flex; align-items: center;
+  font-size: var(--size-small); font-weight: var(--weight-medium);
+  padding: 4px var(--space-1); border: var(--rule) solid var(--line);
+  background: var(--white); border-radius: var(--radius-badge); line-height: 1.2;
+}
+
+/* ---- NAVBAR ------------------------------------------------------------ */
+.navbar {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: var(--space-2) var(--space-3);
+  border-bottom: var(--rule-bold) solid var(--line);
+  background: var(--white);
+}
+.navbar__brand { font-weight: var(--weight-bold); font-size: var(--size-h4); letter-spacing: var(--track-head); }
+.navbar__links { display: flex; align-items: center; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
+.navbar__link {
+  font-size: var(--size-small); font-weight: var(--weight-medium);
+  border-bottom: var(--rule-bold) solid transparent;
+  padding-bottom: 2px;
+  transition: border-color 120ms linear;
+}
+.navbar__link:hover { border-bottom-color: var(--black); }
+.navbar__link[aria-current="page"] { border-bottom-color: var(--accent); }
+
+/* ---- FOOTER ------------------------------------------------------------ */
+.footer {
+  border-top: var(--rule-bold) solid var(--line);
+  padding: var(--space-6) var(--space-3) var(--space-3);
+  background: var(--white);
+  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-4);
+}
+.footer__col { display: flex; flex-direction: column; gap: var(--gap-tight); }
+.footer__head { margin: 0 0 var(--space-1); color: var(--black); } /* type comes from t-label (ADR-0009) */
+.footer__link { font-size: var(--size-small); color: var(--fg2); }
+.footer__link:hover { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
+
+/* ---- DATA TABLE -------------------------------------------------------- */
+.table { width: 100%; border-collapse: collapse; font-size: var(--size-small); }
+.table th {
+  text-align: left; font-weight: var(--weight-bold); font-size: var(--size-label);
+  letter-spacing: var(--track-label); text-transform: uppercase;
+  padding: var(--space-1) var(--space-2); border-bottom: var(--rule-bold) solid var(--line); color: var(--black);
+}
+.table td { padding: var(--space-2); border-bottom: var(--rule) solid var(--ink-30); color: var(--fg1); }
+.table tbody tr:hover { background: var(--jd-surface-recessed); }
+.table .num { text-align: right; font-variant-numeric: tabular-nums; }
+
+/* As-written casing for a field label or column header that holds a unit, a mixed-case term,
+   or more than two words (ADR-0009). */
+.field__label.t-as-written,
+.table th.t-as-written,
+.matrix th.t-as-written { text-transform: none; letter-spacing: var(--track-body); }
+
+/* ---- LOGO LOCKUP FRAME ------------------------------------------------- */
+.lockup { display: inline-flex; align-items: center; gap: var(--space-2); }
+.lockup--vertical { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
+.lockup--reversed { background: var(--black); color: var(--paper); padding: var(--space-3); }
+.lockup__mark { display: block; flex: none; }
+.lockup__words { display: flex; flex-direction: column; }
+.lockup__name { font-weight: var(--weight-bold); font-size: var(--size-h4); line-height: 1; letter-spacing: var(--track-head); }
+.lockup__tag { color: var(--fg2); margin-top: 4px; } /* type comes from t-label (ADR-0009) */
+.lockup--reversed .lockup__tag { color: var(--ink-30); }
+
+/* ---- DATA MATRIX ------------------------------------------------------- */
+.matrix {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--size-small);
+}
+.matrix th {
+  text-align: left;
+  font-weight: var(--weight-bold);
+  font-size: var(--size-label);
+  letter-spacing: var(--track-label);
+  text-transform: uppercase;
+  padding: var(--space-1) var(--space-2);
+  border-right: var(--rule) solid var(--line);
+  border-bottom: var(--rule-bold) solid var(--line);
+  background: var(--white);
+  color: var(--black);
+}
+.matrix th:last-child { border-right: none; }
+.matrix td {
+  padding: var(--space-1) var(--space-2);
+  border-right: var(--rule) solid var(--ink-30);
+  border-bottom: var(--rule) solid var(--ink-30);
+  color: var(--fg1);
+}
+.matrix td:last-child { border-right: none; }
+.matrix tbody tr:last-child td { border-bottom: none; }
+.matrix tbody tr:hover td { background: var(--jd-surface-recessed); }
+.matrix .num { text-align: right; font-variant-numeric: tabular-nums; }
+
+/* ---- HIGH CONTRAST RULE SCALING ---------------------------------------- */
+@media (prefers-contrast: more) {
+  .matrix th,
+  .matrix td {
+    border-right-width: var(--jd-rule-bold);
+    border-bottom-width: var(--jd-rule-bold);
+  }
+  .table th,
+  .table td {
+    border-bottom-width: var(--jd-rule-bold);
+  }
+  .field__input {
+    border-width: var(--jd-rule-bold);
+  }
+}
+
+[data-contrast="high"] .matrix th,
+[data-contrast="high"] .matrix td {
+  border-right-width: var(--jd-rule-bold);
+  border-bottom-width: var(--jd-rule-bold);
+}
+[data-contrast="high"] .table th,
+[data-contrast="high"] .table td {
+  border-bottom-width: var(--jd-rule-bold);
+}
+[data-contrast="high"] .field__input {
+  border-width: var(--jd-rule-bold);
+}
+

package/styles/styles.css

@@ -0,0 +1,52 @@
+/* =========================================================================
+   JUDARN DESIGN SYSTEM
+   styles.css – root global stylesheet (compiler entry point)
+   ========================================================================= */
+
+@import "./colors_and_type.css";
+@import "./components.css";
+
+/* ---- Reset / substrate ------------------------------------------------- */
+*, *::before, *::after { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-weight: var(--weight-regular);
+  font-size: var(--size-body);
+  line-height: var(--lh-body);
+  color: var(--fg1);
+  background: var(--bg1);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+/* Headings default to bold neo-grotesque, tight tracking */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-sans);
+  font-weight: var(--weight-bold);
+  letter-spacing: var(--track-head);
+  margin: 0;
+}
+
+p { margin: 0; text-wrap: pretty; }
+
+a { color: inherit; text-decoration: none; }
+
+/* Hairline rule – the canonical divider of the system */
+hr {
+  border: none;
+  border-top: var(--rule) solid var(--line);
+  margin: 0;
+}
+
+/* ---- Utility: the grid ------------------------------------------------- */
+.jd-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: var(--gap-normal);
+}

package/styles/tailwind-theme.css

@@ -0,0 +1,59 @@
+/**
+ * Judarn Design System – Tailwind CSS v4 Theme Preset
+ * Bridges Judarn dual-tier OKLCh tokens and 8/4 grid hierarchy directly into Tailwind v4.
+ * Generated from tokens/judarn-tokens.json  –  do not edit directly.
+ */
+@import "./colors_and_type.css";
+
+@theme {
+  /* Surface & Color Tokens */
+  --color-substrate: var(--jd-substrate);
+  --color-surface-elevated: var(--jd-surface-elevated);
+  --color-surface-recessed: var(--jd-surface-recessed);
+  --color-ink-100: var(--jd-ink-100);
+  --color-ink-60: var(--jd-ink-60);
+  --color-ink-30: var(--jd-ink-30);
+  --color-signal-error: var(--jd-signal-error);
+  --color-accent: var(--accent);
+  --color-accent-fg: var(--accent-fg);
+  --color-accent-ink: var(--accent-ink);
+
+  /* Semantic Aliases. --color-white and --color-black stay at Tailwind's defaults:
+     remapping them to scheme-following colours breaks every white-on-fill utility. */
+  --color-paper: var(--jd-substrate);
+
+  /* Typography Font Slots */
+  --font-display: var(--jd-font-display);
+  --font-body: var(--jd-font-body);
+  --font-data: var(--jd-font-data);
+  --font-mono: var(--jd-font-mono);
+
+  /* 8/4 Spatial Hierarchy Grid */
+  --spacing-half: var(--jd-space-half);
+  --spacing-1: var(--jd-space-1);
+  --spacing-2: var(--jd-space-2);
+  --spacing-3: var(--jd-space-3);
+  --spacing-4: var(--jd-space-4);
+  --spacing-touch: var(--jd-space-touch);
+  --spacing-6: var(--jd-space-6);
+  --spacing-8: var(--jd-space-8);
+  --spacing-12: var(--jd-space-12);
+  --spacing-16: var(--jd-space-16);
+
+  /* Hairline Border Rules */
+  --border-width-rule: var(--jd-rule);
+  --border-width-rule-bold: var(--jd-rule-bold);
+  --border-width-rule-heavy: var(--jd-rule-heavy);
+
+  /* Platform Authority Radii (ADR-0002) */
+  --radius-subtle: var(--jd-radius-subtle, 6px);
+  --radius-control: var(--jd-radius-control, 10px);
+  --radius-card: var(--jd-radius-card, 16px);
+  --radius-badge: var(--jd-radius-badge, 9999px);
+  --radius-sm: var(--jd-radius-subtle, 6px);
+  --radius-md: var(--jd-radius-control, 10px);
+  --radius-lg: var(--jd-radius-card, 16px);
+  --radius-xl: var(--jd-radius-card, 16px);
+  --radius-2xl: var(--jd-radius-card, 16px);
+  --radius-full: var(--jd-radius-badge, 9999px);
+}