@q1travel/design-system 0.1.0 → 0.3.0

package/contracts/design.dark.md

@@ -0,0 +1,333 @@
+---
+version: alpha
+name: q1travel Design System
+theme: dark
+description: q1travel design contract for consistent, accessible product experiences.
+source-policy:
+  reference: "External visual references provide intent, not implementation source."
+  implementation: "Translate references into q1travel tokens and canonical components before production use."
+  forbidden: "Reference markup, class names, copied computed styles, and screenshot-only dimensions."
+colors:
+  primary: "#533afd"
+  primary-hover: "#4631d6"
+  primary-press: "#342899"
+  secondary: "#a0a0a0"
+  tertiary: "#006efe"
+  neutral: "#1a1a1a"
+  background-100: "#000000"
+  background-200: "#000000"
+  text-primary: "#ededed"
+  text-secondary: "#a0a0a0"
+  text-muted: "#7d7d7d"
+  brand-preview-light-bg: "#ffffff"
+  brand-preview-light-fg: "#171717"
+  brand-preview-dark-bg: "#000000"
+  brand-preview-dark-fg: "#ededed"
+  mask-visible: "#ffffff"
+  mask-opaque: "#000000"
+  gray-100: "#1a1a1a"
+  gray-200: "#1f1f1f"
+  gray-300: "#292929"
+  gray-400: "#2e2e2e"
+  gray-500: "#454545"
+  gray-600: "#878787"
+  gray-700: "#8f8f8f"
+  gray-800: "#7d7d7d"
+  gray-900: "#a0a0a0"
+  gray-1000: "#ededed"
+  primary-100: "#15103a"
+  primary-200: "#1a1547"
+  primary-300: "#241a6b"
+  primary-400: "#2b2080"
+  primary-500: "#342899"
+  primary-600: "#5b41f5"
+  primary-700: "#533afd"
+  primary-800: "#4631d6"
+  primary-900: "#9c8cff"
+  primary-1000: "#ece9ff"
+  blue-100: "#06193a"
+  blue-200: "#022248"
+  blue-300: "#002f62"
+  blue-400: "#003674"
+  blue-500: "#00418b"
+  blue-600: "#0090ff"
+  blue-700: "#006efe"
+  blue-800: "#005be7"
+  blue-900: "#47a8ff"
+  blue-1000: "#eaf6ff"
+  red-100: "#330a11"
+  red-200: "#440d13"
+  red-300: "#5d0e17"
+  red-400: "#6f101b"
+  red-500: "#88151f"
+  red-600: "#f32e40"
+  red-700: "#f13242"
+  red-800: "#e2162a"
+  red-900: "#ff565f"
+  red-1000: "#ffe9ed"
+  amber-100: "#2a1700"
+  amber-200: "#361900"
+  amber-300: "#502800"
+  amber-400: "#5b3000"
+  amber-500: "#703e00"
+  amber-600: "#ed9a00"
+  amber-700: "#ffae00"
+  amber-800: "#ff9300"
+  amber-900: "#ff9300"
+  amber-1000: "#fff3d5"
+  green-100: "#002608"
+  green-200: "#00320b"
+  green-300: "#003a0e"
+  green-400: "#004615"
+  green-500: "#006717"
+  green-600: "#00952d"
+  green-700: "#00ac3a"
+  green-800: "#009432"
+  green-900: "#00ca50"
+  green-1000: "#d8ffe4"
+  teal-100: "#00231b"
+  teal-200: "#002b22"
+  teal-300: "#003d34"
+  teal-400: "#004035"
+  teal-500: "#006354"
+  teal-600: "#009e86"
+  teal-700: "#00aa95"
+  teal-800: "#00927f"
+  teal-900: "#00cfb7"
+  teal-1000: "#cbfff5"
+  purple-100: "#290c33"
+  purple-200: "#341142"
+  purple-300: "#47185e"
+  purple-400: "#541a76"
+  purple-500: "#642290"
+  purple-600: "#9440d5"
+  purple-700: "#9440d5"
+  purple-800: "#7d2bba"
+  purple-900: "#c472fb"
+  purple-1000: "#fbecff"
+  pink-100: "#310d1e"
+  pink-200: "#420c25"
+  pink-300: "#571032"
+  pink-400: "#5d0c34"
+  pink-500: "#76063f"
+  pink-600: "#ba0056"
+  pink-700: "#f12b82"
+  pink-800: "#e7006d"
+  pink-900: "#ff4d8d"
+  pink-1000: "#ffe9f4"
+semantic-colors:
+  action-primary: "{colors.primary}"
+  action-primary-hover: "{colors.primary-hover}"
+  action-primary-press: "{colors.primary-press}"
+  action-on-primary: "#ffffff"
+  surface-canvas: "{colors.background-100}"
+  surface-subtle: "{colors.gray-100}"
+  surface-panel: "{colors.background-100}"
+  border: "{colors.gray-200}"
+  border-strong: "{colors.gray-500}"
+  text-primary: "{colors.text-primary}"
+  text-secondary: "{colors.text-secondary}"
+  text-muted: "{colors.text-muted}"
+  selection-background: "{colors.text-primary}"
+  selection-foreground: "{colors.background-100}"
+  focus-ring: "{colors.primary}"
+  status-success: "{colors.green-900}"
+  status-warning: "{colors.amber-700}"
+  status-danger: "{colors.red-900}"
+typography:
+  heading-72:
+    fontFamily: Noto Sans SC
+    fontSize: 72px
+    fontWeight: 500
+    lineHeight: 72px
+    letterSpacing: -0.06em
+  heading-64:
+    fontFamily: Noto Sans SC
+    fontSize: 64px
+    fontWeight: 500
+    lineHeight: 68px
+    letterSpacing: -0.06em
+  heading-56:
+    fontFamily: Noto Sans SC
+    fontSize: 56px
+    fontWeight: 500
+    lineHeight: 60px
+    letterSpacing: -0.06em
+  heading-48:
+    fontFamily: Noto Sans SC
+    fontSize: 48px
+    fontWeight: 500
+    lineHeight: 52px
+    letterSpacing: -0.06em
+  heading-40:
+    fontFamily: Noto Sans SC
+    fontSize: 40px
+    fontWeight: 500
+    lineHeight: 44px
+    letterSpacing: -0.06em
+  heading-32:
+    fontFamily: Noto Sans SC
+    fontSize: 32px
+    fontWeight: 500
+    lineHeight: 38px
+    letterSpacing: -0.04em
+  heading-24:
+    fontFamily: Noto Sans SC
+    fontSize: 24px
+    fontWeight: 500
+    lineHeight: 32px
+    letterSpacing: -0.04em
+  heading-20:
+    fontFamily: Noto Sans SC
+    fontSize: 20px
+    fontWeight: 500
+    lineHeight: 28px
+    letterSpacing: -0.02em
+  heading-16:
+    fontFamily: Noto Sans SC
+    fontSize: 16px
+    fontWeight: 500
+    lineHeight: 24px
+    letterSpacing: -0.02em
+  heading-14:
+    fontFamily: Noto Sans SC
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 20px
+    letterSpacing: -0.02em
+  label-14:
+    fontFamily: Noto Sans SC
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 20px
+    letterSpacing: 0
+  label-13:
+    fontFamily: Noto Sans SC
+    fontSize: 13px
+    fontWeight: 400
+    lineHeight: 18px
+    letterSpacing: 0
+  copy-16:
+    fontFamily: Noto Sans SC
+    fontSize: 16px
+    fontWeight: 400
+    lineHeight: 24px
+    letterSpacing: 0
+  copy-14:
+    fontFamily: Noto Sans SC
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 20px
+    letterSpacing: 0
+  code-13:
+    fontFamily: Geist Mono
+    fontSize: 13px
+    fontWeight: 400
+    lineHeight: 18px
+    letterSpacing: 0
+spacing:
+  1: 4px
+  2: 8px
+  3: 12px
+  4: 16px
+  6: 24px
+  8: 32px
+  10: 40px
+  16: 64px
+  24: 96px
+  base: 4px
+sizing:
+  control-default: 40px
+rounded:
+  xs: 4px
+  sm: 6px
+  md: 8px
+  lg: 12px
+  xl: 16px
+  full: 9999px
+materials:
+  base:
+    backgroundColor: "{semantic-colors.surface-panel}"
+    borderColor: "{semantic-colors.border}"
+    rounded: "{rounded.sm}"
+  small:
+    backgroundColor: "{semantic-colors.surface-panel}"
+    borderColor: "{semantic-colors.border}"
+    rounded: "{rounded.sm}"
+  medium:
+    backgroundColor: "{semantic-colors.surface-panel}"
+    borderColor: "{semantic-colors.border}"
+    rounded: "{rounded.lg}"
+  menu:
+    backgroundColor: "{semantic-colors.surface-panel}"
+    borderColor: "{semantic-colors.border-strong}"
+    rounded: "{rounded.lg}"
+  modal:
+    backgroundColor: "{semantic-colors.surface-panel}"
+    borderColor: "{semantic-colors.border-strong}"
+    rounded: "{rounded.lg}"
+components:
+  button-primary:
+    backgroundColor: "{semantic-colors.action-primary}"
+    hoverBackgroundColor: "{semantic-colors.action-primary-hover}"
+    pressBackgroundColor: "{semantic-colors.action-primary-press}"
+    textColor: "{semantic-colors.action-on-primary}"
+    typography: "{typography.label-14}"
+    rounded: "{rounded.sm}"
+    height: 40px
+  button-secondary:
+    backgroundColor: "{semantic-colors.surface-panel}"
+    hoverBackgroundColor: "{semantic-colors.surface-subtle}"
+    textColor: "{semantic-colors.text-primary}"
+    borderColor: "{semantic-colors.border-strong}"
+    typography: "{typography.label-14}"
+    rounded: "{rounded.sm}"
+    height: 40px
+  input:
+    backgroundColor: "{semantic-colors.surface-panel}"
+    textColor: "{semantic-colors.text-primary}"
+    placeholderColor: "{semantic-colors.text-muted}"
+    borderColor: "{semantic-colors.border-strong}"
+    focusColor: "{semantic-colors.focus-ring}"
+    typography: "{typography.label-14}"
+    rounded: "{rounded.sm}"
+    height: 40px
+  checkbox:
+    checkedBackgroundColor: "{semantic-colors.action-primary}"
+    borderColor: "{semantic-colors.border-strong}"
+    focusColor: "{semantic-colors.focus-ring}"
+    rounded: "{rounded.xs}"
+  radio:
+    checkedColor: "{semantic-colors.action-primary}"
+    borderColor: "{semantic-colors.border-strong}"
+    focusColor: "{semantic-colors.focus-ring}"
+    rounded: "{rounded.full}"
+  switch:
+    checkedBackgroundColor: "{semantic-colors.action-primary}"
+    backgroundColor: "{colors.gray-300}"
+    focusColor: "{semantic-colors.focus-ring}"
+    rounded: "{rounded.full}"
+  tabs:
+    activeBackgroundColor: "{semantic-colors.surface-subtle}"
+    textColor: "{semantic-colors.text-secondary}"
+    activeTextColor: "{semantic-colors.text-primary}"
+    borderColor: "{semantic-colors.border}"
+---
+
+# q1travel Design System
+
+## Overview
+
+This is the dark-theme source contract. It keeps token names aligned with the light contract and changes values only where the theme requires a different surface, text, border, or status value.
+
+## Token Layers
+
+- Core tokens define source design values such as color, spacing, radius, and typography.
+- Semantic tokens describe product meaning such as action, surface, border, text, focus, and status.
+- Component mappings consume semantic tokens and define shared behavior for controls and documentation specimens.
+
+## Usage
+
+- Product code should consume semantic tokens and component mappings before using core values directly.
+- Theme-specific values may differ, but token names should stay stable across light and dark contracts.
+- Current theme resolved values are inspection output only; source values live in this contract and the runtime token layer.

package/contracts/design.md

@@ -0,0 +1,333 @@
+---
+version: alpha
+name: q1travel Design System
+theme: light
+description: q1travel design contract for consistent, accessible product experiences.
+source-policy:
+  reference: "External visual references provide intent, not implementation source."
+  implementation: "Translate references into q1travel tokens and canonical components before production use."
+  forbidden: "Reference markup, class names, copied computed styles, and screenshot-only dimensions."
+colors:
+  primary: "#533afd"
+  primary-hover: "#4434d4"
+  primary-press: "#2e2b8c"
+  secondary: "#4d4d4d"
+  tertiary: "#006bff"
+  neutral: "#f2f2f2"
+  background-100: "#ffffff"
+  background-200: "#fafafa"
+  text-primary: "#171717"
+  text-secondary: "#4d4d4d"
+  text-muted: "#8f8f8f"
+  brand-preview-light-bg: "#ffffff"
+  brand-preview-light-fg: "#171717"
+  brand-preview-dark-bg: "#000000"
+  brand-preview-dark-fg: "#ededed"
+  mask-visible: "#ffffff"
+  mask-opaque: "#000000"
+  gray-100: "#f2f2f2"
+  gray-200: "#ebebeb"
+  gray-300: "#e6e6e6"
+  gray-400: "#eaeaea"
+  gray-500: "#c9c9c9"
+  gray-600: "#a8a8a8"
+  gray-700: "#8f8f8f"
+  gray-800: "#7d7d7d"
+  gray-900: "#4d4d4d"
+  gray-1000: "#171717"
+  primary-100: "#f1efff"
+  primary-200: "#e4e0ff"
+  primary-300: "#cbc4ff"
+  primary-400: "#aa9eff"
+  primary-500: "#8776ff"
+  primary-600: "#6b55ff"
+  primary-700: "#533afd"
+  primary-800: "#4434d4"
+  primary-900: "#2e2b8c"
+  primary-1000: "#17124f"
+  blue-100: "#f0f7ff"
+  blue-200: "#e9f4ff"
+  blue-300: "#dfefff"
+  blue-400: "#cae7ff"
+  blue-500: "#94ccff"
+  blue-600: "#48aeff"
+  blue-700: "#006bff"
+  blue-800: "#0059ec"
+  blue-900: "#005ff2"
+  blue-1000: "#002359"
+  red-100: "#ffeeef"
+  red-200: "#ffe8ea"
+  red-300: "#ffe3e4"
+  red-400: "#ffd7d6"
+  red-500: "#ffb1b3"
+  red-600: "#ff676d"
+  red-700: "#fc0035"
+  red-800: "#ea001d"
+  red-900: "#d8001b"
+  red-1000: "#47000c"
+  amber-100: "#fff6de"
+  amber-200: "#fff4cf"
+  amber-300: "#fff1c1"
+  amber-400: "#ffdc73"
+  amber-500: "#ffc543"
+  amber-600: "#ffa600"
+  amber-700: "#ffae00"
+  amber-800: "#ff9300"
+  amber-900: "#aa4d00"
+  amber-1000: "#561900"
+  green-100: "#ecfdec"
+  green-200: "#e5fce7"
+  green-300: "#d3fad1"
+  green-400: "#b9f5bc"
+  green-500: "#82eb8d"
+  green-600: "#4ce15e"
+  green-700: "#28a948"
+  green-800: "#279141"
+  green-900: "#107d32"
+  green-1000: "#003a00"
+  teal-100: "#defffb"
+  teal-200: "#ddfef6"
+  teal-300: "#ccf9f1"
+  teal-400: "#b1f7ec"
+  teal-500: "#52f0db"
+  teal-600: "#00e3c4"
+  teal-700: "#00ac96"
+  teal-800: "#00927f"
+  teal-900: "#007f70"
+  teal-1000: "#003f34"
+  purple-100: "#faf0ff"
+  purple-200: "#f9f0ff"
+  purple-300: "#f6e8ff"
+  purple-400: "#f2d9ff"
+  purple-500: "#dfa7ff"
+  purple-600: "#c979ff"
+  purple-700: "#a000f8"
+  purple-800: "#8500d1"
+  purple-900: "#7d00cc"
+  purple-1000: "#2f004e"
+  pink-100: "#ffe8f6"
+  pink-200: "#ffe8f3"
+  pink-300: "#ffdfeb"
+  pink-400: "#ffd3e1"
+  pink-500: "#fdb3cc"
+  pink-600: "#f97ea7"
+  pink-700: "#f22782"
+  pink-800: "#e4106e"
+  pink-900: "#c41562"
+  pink-1000: "#460523"
+semantic-colors:
+  action-primary: "{colors.primary}"
+  action-primary-hover: "{colors.primary-hover}"
+  action-primary-press: "{colors.primary-press}"
+  action-on-primary: "#ffffff"
+  surface-canvas: "{colors.background-100}"
+  surface-subtle: "{colors.background-200}"
+  surface-panel: "{colors.background-100}"
+  border: "{colors.gray-400}"
+  border-strong: "{colors.gray-500}"
+  text-primary: "{colors.text-primary}"
+  text-secondary: "{colors.text-secondary}"
+  text-muted: "{colors.text-muted}"
+  selection-background: "{colors.text-primary}"
+  selection-foreground: "{colors.background-100}"
+  focus-ring: "{colors.primary}"
+  status-success: "{colors.green-700}"
+  status-warning: "{colors.amber-900}"
+  status-danger: "{colors.red-700}"
+typography:
+  heading-72:
+    fontFamily: Noto Sans SC
+    fontSize: 72px
+    fontWeight: 500
+    lineHeight: 72px
+    letterSpacing: -0.06em
+  heading-64:
+    fontFamily: Noto Sans SC
+    fontSize: 64px
+    fontWeight: 500
+    lineHeight: 68px
+    letterSpacing: -0.06em
+  heading-56:
+    fontFamily: Noto Sans SC
+    fontSize: 56px
+    fontWeight: 500
+    lineHeight: 60px
+    letterSpacing: -0.06em
+  heading-48:
+    fontFamily: Noto Sans SC
+    fontSize: 48px
+    fontWeight: 500
+    lineHeight: 52px
+    letterSpacing: -0.06em
+  heading-40:
+    fontFamily: Noto Sans SC
+    fontSize: 40px
+    fontWeight: 500
+    lineHeight: 44px
+    letterSpacing: -0.06em
+  heading-32:
+    fontFamily: Noto Sans SC
+    fontSize: 32px
+    fontWeight: 500
+    lineHeight: 38px
+    letterSpacing: -0.04em
+  heading-24:
+    fontFamily: Noto Sans SC
+    fontSize: 24px
+    fontWeight: 500
+    lineHeight: 32px
+    letterSpacing: -0.04em
+  heading-20:
+    fontFamily: Noto Sans SC
+    fontSize: 20px
+    fontWeight: 500
+    lineHeight: 28px
+    letterSpacing: -0.02em
+  heading-16:
+    fontFamily: Noto Sans SC
+    fontSize: 16px
+    fontWeight: 500
+    lineHeight: 24px
+    letterSpacing: -0.02em
+  heading-14:
+    fontFamily: Noto Sans SC
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 20px
+    letterSpacing: -0.02em
+  label-14:
+    fontFamily: Noto Sans SC
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 20px
+    letterSpacing: 0
+  label-13:
+    fontFamily: Noto Sans SC
+    fontSize: 13px
+    fontWeight: 400
+    lineHeight: 18px
+    letterSpacing: 0
+  copy-16:
+    fontFamily: Noto Sans SC
+    fontSize: 16px
+    fontWeight: 400
+    lineHeight: 24px
+    letterSpacing: 0
+  copy-14:
+    fontFamily: Noto Sans SC
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 20px
+    letterSpacing: 0
+  code-13:
+    fontFamily: Geist Mono
+    fontSize: 13px
+    fontWeight: 400
+    lineHeight: 18px
+    letterSpacing: 0
+spacing:
+  1: 4px
+  2: 8px
+  3: 12px
+  4: 16px
+  6: 24px
+  8: 32px
+  10: 40px
+  16: 64px
+  24: 96px
+  base: 4px
+sizing:
+  control-default: 40px
+rounded:
+  xs: 4px
+  sm: 6px
+  md: 8px
+  lg: 12px
+  xl: 16px
+  full: 9999px
+materials:
+  base:
+    backgroundColor: "{semantic-colors.surface-panel}"
+    borderColor: "{semantic-colors.border}"
+    rounded: "{rounded.sm}"
+  small:
+    backgroundColor: "{semantic-colors.surface-panel}"
+    borderColor: "{semantic-colors.border}"
+    rounded: "{rounded.sm}"
+  medium:
+    backgroundColor: "{semantic-colors.surface-panel}"
+    borderColor: "{semantic-colors.border}"
+    rounded: "{rounded.lg}"
+  menu:
+    backgroundColor: "{semantic-colors.surface-panel}"
+    borderColor: "{semantic-colors.border-strong}"
+    rounded: "{rounded.lg}"
+  modal:
+    backgroundColor: "{semantic-colors.surface-panel}"
+    borderColor: "{semantic-colors.border-strong}"
+    rounded: "{rounded.lg}"
+components:
+  button-primary:
+    backgroundColor: "{semantic-colors.action-primary}"
+    hoverBackgroundColor: "{semantic-colors.action-primary-hover}"
+    pressBackgroundColor: "{semantic-colors.action-primary-press}"
+    textColor: "{semantic-colors.action-on-primary}"
+    typography: "{typography.label-14}"
+    rounded: "{rounded.sm}"
+    height: 40px
+  button-secondary:
+    backgroundColor: "{semantic-colors.surface-panel}"
+    hoverBackgroundColor: "{semantic-colors.surface-subtle}"
+    textColor: "{semantic-colors.text-primary}"
+    borderColor: "{semantic-colors.border-strong}"
+    typography: "{typography.label-14}"
+    rounded: "{rounded.sm}"
+    height: 40px
+  input:
+    backgroundColor: "{semantic-colors.surface-panel}"
+    textColor: "{semantic-colors.text-primary}"
+    placeholderColor: "{semantic-colors.text-muted}"
+    borderColor: "{semantic-colors.border-strong}"
+    focusColor: "{semantic-colors.focus-ring}"
+    typography: "{typography.label-14}"
+    rounded: "{rounded.sm}"
+    height: 40px
+  checkbox:
+    checkedBackgroundColor: "{semantic-colors.action-primary}"
+    borderColor: "{semantic-colors.border-strong}"
+    focusColor: "{semantic-colors.focus-ring}"
+    rounded: "{rounded.xs}"
+  radio:
+    checkedColor: "{semantic-colors.action-primary}"
+    borderColor: "{semantic-colors.border-strong}"
+    focusColor: "{semantic-colors.focus-ring}"
+    rounded: "{rounded.full}"
+  switch:
+    checkedBackgroundColor: "{semantic-colors.action-primary}"
+    backgroundColor: "{colors.gray-300}"
+    focusColor: "{semantic-colors.focus-ring}"
+    rounded: "{rounded.full}"
+  tabs:
+    activeBackgroundColor: "{semantic-colors.surface-subtle}"
+    textColor: "{semantic-colors.text-secondary}"
+    activeTextColor: "{semantic-colors.text-primary}"
+    borderColor: "{semantic-colors.border}"
+---
+
+# q1travel Design System
+
+## Overview
+
+This is the light-theme source contract. It defines token names, semantic roles, and component mappings before documentation examples are rendered.
+
+## Token Layers
+
+- Core tokens define source design values such as color, spacing, radius, and typography.
+- Semantic tokens describe product meaning such as action, surface, border, text, focus, and status.
+- Component mappings consume semantic tokens and define shared behavior for controls and documentation specimens.
+
+## Usage
+
+- Product code should consume semantic tokens and component mappings before using core values directly.
+- Theme-specific values may differ, but token names should stay stable across light and dark contracts.
+- Current theme resolved values are inspection output only; source values live in this contract and the runtime token layer.