@bridger-kr/tokens 0.1.0

package/README.md

@@ -0,0 +1,54 @@
+# @bridger-kr/tokens
+
+Design tokens for the Bridger Design System. The package publishes the CSS contract, the local Pretendard Variable font asset, and typed JavaScript/TypeScript token objects.
+
+## Install
+
+```sh
+pnpm add @bridger-kr/tokens
+```
+
+## CSS
+
+Import the full token contract once in your app entrypoint:
+
+```ts
+import '@bridger-kr/tokens/css';
+```
+
+The full entrypoint imports files in this order: fonts, colors, typography, spacing, base.
+
+Per-file imports are available when you only need part of the contract:
+
+```ts
+import '@bridger-kr/tokens/css/fonts';
+import '@bridger-kr/tokens/css/colors';
+import '@bridger-kr/tokens/css/typography';
+import '@bridger-kr/tokens/css/spacing';
+import '@bridger-kr/tokens/css/base';
+```
+
+`@bridger-kr/tokens/styles.css` is an alias for the full CSS entrypoint.
+
+## TypeScript Tokens
+
+```ts
+import { colors, spacing, radius, shadows, typography, cssVarName } from '@bridger-kr/tokens';
+
+colors.light.accent; // '#ec5e1f'
+colors.dark.accent; // '#ec5e1f'
+spacing[4]; // '24px'
+cssVarName.colors.accent; // '--dt-accent'
+```
+
+The exported objects are authored from the CSS source of truth and frozen at runtime. They are also declared with literal `as const` values for precise TypeScript types.
+
+## Font Asset
+
+`css/fonts.css` defines Pretendard Variable with:
+
+```css
+src: url('../assets/fonts/PretendardVariable.woff2') format('woff2-variations');
+```
+
+That path is relative to the published `css/` directory and resolves to the package's published `assets/fonts/PretendardVariable.woff2`. Bundlers that process CSS from npm packages should copy or serve that referenced asset. If your framework does not automatically serve CSS-referenced package assets, copy `@bridger-kr/tokens/assets/fonts/PretendardVariable.woff2` into your public asset pipeline and rewrite the URL in your app-level CSS.

package/css/base.css

@@ -0,0 +1,147 @@
+/* ============================================================
+   Bridger — Base elements + shared primitive vocabulary  (v2)
+   Light-first. Premium SaaS depth: hairline ring + layered soft shadow.
+============================================================ */
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
+
+body {
+  margin: 0;
+  background: var(--dt-paper);
+  color: var(--dt-ink);
+  font-family: var(--dt-font-sans);
+  font-size: var(--dt-body-size);
+  line-height: var(--dt-body-leading);
+  font-weight: var(--dt-body-weight);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: "ss06", "cv11", "tnum";
+  word-break: keep-all;
+  line-break: strict;
+  text-rendering: optimizeLegibility;
+}
+
+::selection { background: color-mix(in srgb, var(--dt-accent) 18%, transparent); color: var(--dt-ink-strong); }
+:focus-visible { outline: 2px solid var(--dt-accent); outline-offset: 2px; border-radius: var(--dt-radius-sm); }
+
+h1, h2, h3, h4 { margin: 0; color: var(--dt-ink-strong); text-wrap: balance; letter-spacing: 0; }
+h1 { font-size: var(--dt-h1-size); line-height: var(--dt-h1-leading); letter-spacing: var(--dt-h1-tracking); font-weight: var(--dt-h1-weight); }
+h2 { font-size: var(--dt-h2-size); line-height: var(--dt-h2-leading); letter-spacing: var(--dt-h2-tracking); font-weight: var(--dt-h2-weight); }
+h3 { font-size: var(--dt-h3-size); line-height: var(--dt-h3-leading); letter-spacing: var(--dt-h3-tracking); font-weight: var(--dt-h3-weight); }
+p, li { text-wrap: pretty; margin: 0; }
+
+a { color: var(--dt-accent); text-decoration: none; transition: color var(--dt-motion-fast); }
+a:hover { color: var(--dt-accent-strong); }
+
+code, pre, kbd, samp { font-family: var(--dt-font-mono); font-size: var(--dt-mono-size); }
+
+.mono { font-family: var(--dt-font-mono); }
+.tabular { font-variant-numeric: tabular-nums; }
+
+/* ── Layout shell ── */
+.dt-shell { margin-inline: auto; width: 100%; max-width: 1200px; padding-inline: 20px; }
+@media (min-width: 640px) { .dt-shell { padding-inline: 28px; } }
+@media (min-width: 1024px) { .dt-shell { padding-inline: 40px; } }
+.dt-section { padding-block: var(--dt-space-7); }
+
+/* ── Badges (status / classification) — crisp tags, not cushiony pills.
+   Small radius + hairline so they read as instrument labels. ── */
+.badge {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 3px 8px;
+  font-size: 12px; font-weight: 600; letter-spacing: 0;
+  border-radius: var(--dt-radius-sm);
+  background: var(--dt-surface-sunken); color: var(--dt-muted-strong);
+  box-shadow: inset 0 0 0 1px var(--dt-border-strong);
+  transition: background-color var(--dt-motion-fast);
+}
+.badge-accent  { background: var(--dt-tint-accent);  color: var(--dt-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dt-accent) 32%, transparent); }
+.badge-info    { background: var(--dt-tint-cobalt);  color: var(--dt-cobalt); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dt-cobalt) 32%, transparent); }
+.badge-success { background: var(--dt-tint-success); color: var(--dt-success); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dt-success) 32%, transparent); }
+.badge-warning { background: var(--dt-tint-warning); color: var(--dt-warning); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dt-warning) 32%, transparent); }
+.badge-danger  { background: var(--dt-tint-danger);  color: var(--dt-danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dt-danger) 32%, transparent); }
+
+/* ── Cards — bordered planes. At rest they sit on a hairline, no lift. ── */
+.card {
+  background: var(--dt-surface); color: var(--dt-ink);
+  border-radius: var(--dt-radius-lg);
+  box-shadow: var(--dt-card-rest);
+  transition: box-shadow var(--dt-motion), transform var(--dt-motion);
+}
+.card:hover { box-shadow: var(--dt-card-hover); }
+.card-muted  { background: var(--dt-surface-sunken); border: 1px solid var(--dt-border); border-radius: var(--dt-radius-lg); }
+.card-raised { background: var(--dt-surface-raised); border-radius: var(--dt-radius-lg); box-shadow: var(--dt-card-float); }
+.glass-card {
+  background: var(--dt-glass-bg);
+  backdrop-filter: var(--dt-glass-blur); -webkit-backdrop-filter: var(--dt-glass-blur);
+  border: 1px solid var(--dt-border); border-radius: var(--dt-radius-lg); box-shadow: var(--dt-shadow-sm);
+}
+
+/* ── Buttons ── */
+/* Buttons build from FILLS on a height grid (40 / 36px), never outlines.
+   Hover = background-color shift; press = subtle scale. No translate-lift. */
+.btn-primary {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
+  height: 40px; padding: 0 16px; font-size: 14px; font-weight: 600; line-height: 1;
+  border-radius: var(--dt-radius-md);
+  background: var(--dt-accent); color: var(--dt-accent-ink); border: none;
+  box-shadow: var(--dt-shadow-xs);
+  text-decoration: none; cursor: pointer;
+  transition: background-color var(--dt-motion-fast), transform var(--dt-motion-fast);
+}
+.btn-primary:hover { background: var(--dt-accent-strong); }
+.btn-primary:active { transform: scale(var(--dt-press-scale)); }
+
+.btn-secondary {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
+  height: 40px; padding: 0 16px; font-size: 14px; font-weight: 600; line-height: 1;
+  border-radius: var(--dt-radius-md);
+  background: var(--dt-surface-sunken); color: var(--dt-ink-strong); border: none;
+  text-decoration: none; cursor: pointer;
+  transition: background-color var(--dt-motion-fast), transform var(--dt-motion-fast);
+}
+.btn-secondary:hover { background: color-mix(in srgb, var(--dt-surface-sunken) 90%, var(--dt-ink)); }
+.btn-secondary:active { transform: scale(var(--dt-press-scale)); }
+
+.btn-ghost {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
+  height: 36px; padding: 0 12px; font-size: 14px; font-weight: 600; line-height: 1;
+  border-radius: var(--dt-radius-md);
+  background: transparent; color: var(--dt-muted-strong); border: none;
+  text-decoration: none; cursor: pointer;
+  transition: background-color var(--dt-motion-fast), color var(--dt-motion-fast);
+}
+.btn-ghost:hover { background: var(--dt-tint-muted); color: var(--dt-ink-strong); }
+
+/* ── Form fields — filled, no outline. Focus lifts to white + accent ring. ── */
+.dt-field {
+  background: var(--dt-surface-sunken); border: none;
+  border-radius: var(--dt-radius-md);
+  transition: background-color var(--dt-motion-fast), box-shadow var(--dt-motion-fast);
+}
+.dt-field:focus, .dt-field:focus-within { background: var(--dt-surface); box-shadow: var(--dt-shadow-focus); outline: none; }
+.dt-field-invalid { box-shadow: 0 0 0 1.5px var(--dt-danger); }
+
+/* ── Spec strip ── */
+.spec-strip {
+  display: inline-flex; align-items: center; gap: 12px;
+  padding: 7px 15px; border-radius: var(--dt-radius-full);
+  background: var(--dt-surface); box-shadow: var(--dt-ring), var(--dt-shadow-xs);
+  font-size: 12px; color: var(--dt-muted);
+}
+.spec-strip-item { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
+.spec-strip-sep  { display: inline-block; width: 1px; height: 12px; background: var(--dt-border-strong); }
+
+/* ── Decorative dot grid (hero backdrops only) ── */
+.dt-grid-paper {
+  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--dt-ink) 9%, transparent) 1px, transparent 0);
+  background-size: 26px 26px;
+  -webkit-mask-image: radial-gradient(120% 90% at 70% 0%, black 25%, transparent 72%);
+          mask-image: radial-gradient(120% 90% at 70% 0%, black 25%, transparent 72%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
+}

package/css/colors.css

@@ -0,0 +1 @@
+@import url('./contract.css');

package/css/contract.css

@@ -0,0 +1,191 @@
+/* ============================================================
+   Bridger shared design contract (canonical token source)
+
+   Canonical source for shared --dt-* token definitions.
+   `npm run check:tokens` verifies app mirrors against this file.
+   The live landing and dashboard apps intentionally keep local
+   runtime mirrors at:
+
+     - landing/src/styles/tokens.css
+     - dashboard/src/styles/tokens.css
+
+   Do not import this file into those apps in the design-foundation
+   lane. Update the app-local mirrors when changing this contract.
+
+   Theme contract: dark is the default token set; light activates with
+   :root[data-theme='light']. Runtime theme state is stored in the
+   `datari-theme` localStorage key only after an explicit user choice.
+============================================================ */
+
+/*
+  Font delivery remains app-local in this lane.
+  Runtime mirrors in landing/dashboard own their @font-face src paths.
+*/
+
+:root {
+  color-scheme: dark;
+
+  --dt-paper: #0a0b0f;
+  --dt-surface: #111218;
+  --dt-surface-raised: #181a22;
+  --dt-surface-sunken: #07080b;
+
+  --dt-ink: #f5f4ee;
+  --dt-ink-strong: #ffffff;
+  --dt-muted: #9a9ba6;
+  --dt-muted-strong: #c3c4cd;
+
+  --dt-border: #23252e;
+  --dt-border-strong: #2f323d;
+
+  --dt-accent: #ec5e1f;
+  --dt-accent-strong: #ec5e1f;
+  --dt-accent-ink: #1a1206;
+
+  --dt-cobalt: #7aa2ff;
+  --dt-lime: #d8f24a;
+  --dt-accent-soft: color-mix(in srgb, var(--dt-accent) 14%, transparent);
+
+  --dt-success: #34d399;
+  --dt-warning: #fbbf24;
+  --dt-danger: #f87171;
+  --dt-info: var(--dt-cobalt);
+  --dt-status-cobalt: #2f6bff;
+  --dt-status-success: #00b04e;
+  --dt-status-warning: #ffa71a;
+  --dt-status-danger: #dc3a34;
+  --dt-alert-ink: #ecfff2;
+
+  --dt-tint-accent: color-mix(in srgb, var(--dt-accent) 14%, transparent);
+  --dt-tint-cobalt: color-mix(in srgb, var(--dt-cobalt) 14%, transparent);
+  --dt-tint-success: color-mix(in srgb, var(--dt-success) 16%, transparent);
+  --dt-tint-warning: color-mix(in srgb, var(--dt-warning) 16%, transparent);
+  --dt-tint-danger: color-mix(in srgb, var(--dt-danger) 16%, transparent);
+  --dt-tint-muted: color-mix(in srgb, var(--dt-ink) 6%, transparent);
+
+  --dt-space-1: 4px;
+  --dt-space-2: 8px;
+  --dt-space-3: 16px;
+  --dt-space-4: 24px;
+  --dt-space-5: 40px;
+  --dt-space-6: 64px;
+  --dt-space-7: 96px;
+  --dt-space-8: 128px;
+
+  --dt-radius-sm: 6px;
+  --dt-radius-md: 12px;
+  --dt-radius-lg: 40px;
+  --dt-radius-button: 18px;
+  --dt-radius-xl: 40px;
+  --dt-radius-full: 9999px;
+
+  --dt-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.5),
+                      0 0 0 1px rgba(255, 255, 255, 0.02);
+  --dt-shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.55),
+                        0 0 0 1px rgba(255, 255, 255, 0.03);
+  --dt-shadow-focus: 0 0 0 2px color-mix(in srgb, var(--dt-accent) 60%, transparent);
+  --dt-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --dt-ease-in: cubic-bezier(0.55, 0.05, 0.55, 0.2);
+  --dt-motion-fast: 120ms var(--dt-ease);
+  --dt-motion-base: 160ms var(--dt-ease);
+  --dt-motion: 200ms var(--dt-ease);
+  --dt-motion-slow: 280ms var(--dt-ease);
+  --dt-press-scale: 0.97;
+
+  --dt-glass-bg: color-mix(in srgb, var(--dt-paper) 72%, transparent);
+  --dt-glass-blur: saturate(180%) blur(16px);
+
+  --dt-font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
+  --dt-font-mono: 'JetBrains Mono', 'Geist Mono', SFMono-Regular, ui-monospace, Menlo, monospace;
+
+  --dt-h1-size: clamp(40px, 6vw, 72px);
+  --dt-h1-leading: 1.08;
+  --dt-h1-tracking: 0;
+  --dt-h1-weight: 560;
+
+  --dt-h2-size: clamp(28px, 3.5vw, 40px);
+  --dt-h2-leading: 1.15;
+  --dt-h2-tracking: 0;
+  --dt-h2-weight: 540;
+
+  --dt-h3-size: 18px;
+  --dt-h3-leading: 1.3;
+  --dt-h3-tracking: 0;
+  --dt-h3-weight: 600;
+
+  --dt-body-size: 16px;
+  --dt-body-leading: 1.6;
+  --dt-body-weight: 400;
+
+  --dt-small-size: 13px;
+  --dt-small-leading: 1.55;
+
+  --dt-eyebrow-size: 11px;
+  --dt-eyebrow-tracking: 0.18em;
+  --dt-eyebrow-weight: 700;
+
+  --dt-mono-size: 13px;
+  --dt-mono-leading: 1.55;
+}
+
+:root[data-theme='light'] {
+  color-scheme: light;
+
+  --dt-paper: #cfecd8;
+  --dt-surface: #ecfff2;
+  --dt-surface-raised: #ffffff;
+  --dt-surface-sunken: #f4f3ef;
+
+  --dt-ink: #0c0b08;
+  --dt-ink-strong: #0c0b08;
+  --dt-muted: #79766e;
+  --dt-muted-strong: #423f38;
+
+  --dt-border: #d8d5ca;
+  --dt-border-strong: #ddd9cf;
+
+  --dt-accent: #ec5e1f;
+  --dt-accent-strong: #ec5e1f;
+  --dt-accent-ink: #ffffff;
+
+  --dt-cobalt: #256b5a;
+  --dt-lime: #dce95b;
+  --dt-accent-soft: color-mix(in srgb, var(--dt-accent) 14%, transparent);
+
+  --dt-success: #16a34a;
+  --dt-warning: #d97706;
+  --dt-danger: #dc2626;
+  --dt-info: var(--dt-cobalt);
+  --dt-status-cobalt: #2f6bff;
+  --dt-status-success: #00b04e;
+  --dt-status-warning: #ffa71a;
+  --dt-status-danger: #dc3a34;
+  --dt-alert-ink: #ecfff2;
+
+  --dt-tint-accent: color-mix(in srgb, var(--dt-accent) 12%, transparent);
+  --dt-tint-cobalt: color-mix(in srgb, var(--dt-cobalt) 10%, transparent);
+  --dt-tint-success: color-mix(in srgb, var(--dt-success) 12%, transparent);
+  --dt-tint-warning: color-mix(in srgb, var(--dt-warning) 14%, transparent);
+  --dt-tint-danger: color-mix(in srgb, var(--dt-danger) 12%, transparent);
+  --dt-tint-muted: color-mix(in srgb, var(--dt-ink) 5%, transparent);
+
+  --dt-shadow-subtle: 0 1px 2px rgba(24, 22, 18, 0.07),
+                      0 0 0 1px rgba(24, 22, 18, 0.03);
+  --dt-shadow-elevated: 0 8px 24px rgba(24, 22, 18, 0.10),
+                        0 0 0 1px rgba(24, 22, 18, 0.04);
+  --dt-shadow-focus: 0 0 0 2px color-mix(in srgb, var(--dt-accent) 60%, transparent);
+  --dt-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --dt-ease-in: cubic-bezier(0.55, 0.05, 0.55, 0.2);
+  --dt-motion-base: 160ms var(--dt-ease);
+  --dt-press-scale: 0.97;
+
+  --dt-glass-bg: color-mix(in srgb, var(--dt-paper) 78%, transparent);
+}
+
+/*
+  Primitive class-name contract downstream surfaces can mirror locally:
+  .dt-shell, .dt-section, .dt-eyebrow,
+  .badge, .badge-accent, .badge-info, .badge-success, .badge-warning,
+  .card, .card-muted, .card-raised, .glass-card,
+  .btn-primary, .btn-secondary, .btn-ghost.
+*/

package/css/fonts.css

@@ -0,0 +1,15 @@
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
+
+/* ============================================================
+   Bridger — Fonts
+   Pretendard Variable is shipped locally (Korean + product UI).
+   JetBrains Mono is loaded from CDN for code / API values.
+============================================================ */
+
+@font-face {
+  font-family: 'Pretendard Variable';
+  font-weight: 45 920;
+  font-style: normal;
+  font-display: swap;
+  src: url('../assets/fonts/PretendardVariable.woff2') format('woff2-variations');
+}

package/css/index.css

@@ -0,0 +1,4 @@
+/* Bridger Design System token CSS entrypoint. */
+@import url('./fonts.css');
+@import url('./contract.css');
+@import url('./base.css');

package/css/spacing.css

@@ -0,0 +1 @@
+@import url('./contract.css');

package/css/typography.css

@@ -0,0 +1 @@
+@import url('./contract.css');