@q1travel/design-system 0.17.2 → 0.18.0

package/contracts/design.dark.md

@@ -14,10 +14,10 @@ colors:
   secondary: "#a0a0a0"
   tertiary: "#006efe"
   neutral: "#1a1a1a"
-  background-100: "#0a0a0a"
+  background-100: "#121212"
   background-200: "#000000"
   text-primary: "#ededed"
-  text-secondary: "#a0a0a0"
+  text-secondary: "#b4b4b4"
   text-muted: "#8f8f8f"
   brand-preview-light-bg: "#ffffff"
   brand-preview-light-fg: "#171717"
@@ -25,15 +25,16 @@ colors:
   brand-preview-dark-fg: "#ededed"
   mask-visible: "#ffffff"
   mask-opaque: "#000000"
+  gray-50: "#161616"
   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-200: "#222222"
+  gray-300: "#2b2b2b"
+  gray-400: "#333333"
+  gray-500: "#585858"
+  gray-600: "#7d7d7d"
+  gray-700: "#878787"
+  gray-800: "#8f8f8f"
+  gray-900: "#b4b4b4"
   gray-1000: "#ededed"
   primary-100: "#15103a"
   primary-200: "#1a1547"
@@ -122,28 +123,47 @@ semantic-colors:
   action-on-primary: "#ffffff"
   action-text: "{colors.primary-900}"
   surface-canvas: "{colors.background-100}"
-  surface-subtle: "{colors.gray-100}"
-  surface-panel: "{colors.background-100}"
+  surface-subtle: "{colors.gray-50}"
+  surface-panel: "{colors.gray-100}"
+  surface-sunken: "{colors.gray-50}"
+  surface-raised: "{colors.gray-200}"
+  surface-overlay: "{colors.gray-300}"
+  surface-hover: "color-mix(in srgb, var(--q1-color-text-primary) 6%, transparent)"
+  surface-selected: "#1f1e38"
+  surface-inverse: "{colors.gray-1000}"
+  text-on-inverse: "#0a0a0a"
   surface-media: "#0a0a0a"
   text-on-media: "#ffffff"
-  border: "{colors.gray-200}"
+  border: "{colors.gray-400}"
   border-strong: "{colors.gray-400}"
-  border-subtle: "#1f1f1f"
+  border-active: "{colors.primary-900}"
+  border-subtle: "#2a2a2a"
   text-primary: "{colors.text-primary}"
   text-secondary: "{colors.text-secondary}"
   text-muted: "{colors.text-muted}"
   text-soft: "#9a9a9c"
+  text-disabled: "{colors.gray-500}"
   overlay-scrim: "rgba(2, 6, 23, 0.44)"
   selection-background: "{colors.text-primary}"
   selection-foreground: "{colors.background-100}"
-  focus-ring: "{colors.primary}"
-  focus: "{colors.primary-700}"
+  focus-ring: "{colors.primary-900}"
+  focus: "{colors.primary-900}"
   status-success: "{colors.green-900}"
+  status-success-text: "{colors.green-900}"
+  status-success-surface: "{colors.green-100}"
+  status-success-border: "#255a2f"
   status-warning: "{colors.amber-700}"
+  status-warning-text: "#fac053"
+  status-warning-surface: "{colors.amber-100}"
+  status-warning-border: "#754b10"
   status-danger: "{colors.red-900}"
-  status-danger-text: "#ef5350"
+  status-danger-text: "#f97770"
   status-danger-surface: "{colors.red-100}"
-  status-danger-border: "#ef5350"
+  status-danger-border: "#7e2f31"
+  status-info: "{colors.blue-900}"
+  status-info-text: "{colors.blue-900}"
+  status-info-surface: "{colors.blue-100}"
+  status-info-border: "#194f81"
 typography:
   heading-72:
     fontFamily: Noto Sans SC

package/contracts/design.md

@@ -25,9 +25,10 @@ colors:
   brand-preview-dark-fg: "#ededed"
   mask-visible: "#ffffff"
   mask-opaque: "#000000"
+  gray-50: "#fafafa"
   gray-100: "#f2f2f2"
-  gray-200: "#ebebeb"
-  gray-300: "#e6e6e6"
+  gray-200: "#eeeeee"
+  gray-300: "#ebebeb"
   gray-400: "#eaeaea"
   gray-500: "#c9c9c9"
   gray-600: "#a8a8a8"
@@ -124,26 +125,45 @@ semantic-colors:
   surface-canvas: "{colors.background-100}"
   surface-subtle: "{colors.background-200}"
   surface-panel: "{colors.background-100}"
+  surface-sunken: "{colors.background-100}"
+  surface-raised: "{colors.background-100}"
+  surface-overlay: "{colors.background-100}"
+  surface-hover: "color-mix(in srgb, var(--q1-color-text-primary) 4%, transparent)"
+  surface-selected: "{colors.primary-100}"
+  surface-inverse: "{colors.gray-1000}"
+  text-on-inverse: "{colors.background-100}"
   surface-media: "#0a0a0a"
   text-on-media: "#ffffff"
   border: "{colors.gray-400}"
   border-strong: "{colors.gray-500}"
+  border-active: "{colors.primary-700}"
   border-subtle: "rgba(203, 213, 225, 0.82)"
   text-primary: "{colors.text-primary}"
   text-secondary: "{colors.text-secondary}"
   text-muted: "{colors.text-muted}"
   text-soft: "#6e6e73"
+  text-disabled: "#b7b7b7"
   overlay-scrim: "rgba(2, 6, 23, 0.44)"
   selection-background: "{colors.text-primary}"
   selection-foreground: "{colors.background-100}"
   focus-ring: "{colors.primary}"
   focus: "{colors.primary-700}"
   status-success: "{colors.green-700}"
+  status-success-text: "{colors.green-900}"
+  status-success-surface: "{colors.green-100}"
+  status-success-border: "#a8d9ad"
   status-warning: "{colors.amber-900}"
+  status-warning-text: "{colors.amber-900}"
+  status-warning-surface: "{colors.amber-100}"
+  status-warning-border: "#edc47d"
   status-danger: "{colors.red-700}"
-  status-danger-text: "#d32f2f"
+  status-danger-text: "#c62828"
   status-danger-surface: "{colors.red-100}"
-  status-danger-border: "#d32f2f"
+  status-danger-border: "#f5b9b8"
+  status-info: "{colors.blue-700}"
+  status-info-text: "#0064b8"
+  status-info-surface: "{colors.blue-100}"
+  status-info-border: "#abcff0"
 typography:
   heading-72:
     fontFamily: Noto Sans SC

package/contracts/token-naming.md

@@ -96,7 +96,9 @@ Examples:
 
 `--q1-color-status-danger` is the bright red for fills and strokes only; use `--q1-color-status-danger-text` for text and weak notices without an underline. `--q1-color-status-danger-surface` and `--q1-color-status-danger-border` keep the background and stroke roles separate. `--q1-color-text-soft`, `--q1-color-border-subtle`, and `--q1-color-overlay-scrim` cover tertiary text, quiet separators, and overlay scrims.
 
-`--q1-color-focus` resolves to `--q1-color-primary-700`. `--q1-shadow-focus` draws a 1px canvas contrast ring and a 3px focus color ring, keeping keyboard focus visible against a purple control or dark surface. `--q1-shadow-focus-danger` remains the field family's invalid-control ring and does not change with this focus-ring migration.
+`--q1-color-focus` resolves to `--q1-color-primary-700` in light mode and `--q1-color-primary-900` in dark mode. `--q1-shadow-focus` draws a 2px canvas gap and a 2px focus ring for controls that use a shadow. Button-family controls use a 2px outline with a 2px offset; inputs use `--q1-color-border-active` plus a 1px inset stroke and the gapless translucent `--q1-shadow-focus-input` glow for pointer and keyboard focus. Invalid inputs use `--q1-shadow-focus-input-danger` for a red inset stroke and glow. Text links keep a fine underline at rest, deepen it on hover, and use a 3px focus-color underline for keyboard focus. Forced colors use a system Highlight outline.
+
+Migration: `--q1-color-bg-panel` remains `#ffffff` in light mode and changes from `#0a0a0a` to `#1a1a1a` in dark mode. The dark canvas, raised surface, and overlay now use `#121212`, `#222222`, and `#2b2b2b`. Downstream overrides that manually raised panel or overlay backgrounds should be reviewed. `--q1-shadow-focus` keeps a canvas gap and uses a 2px focus ring; input focus adds a 1px inset stroke while preserving the translucent glow. Consumers with custom focus visuals should update their screenshots and forced-colors fallback. The unused `--q1-shadow-card` name is removed before release.
 
 ### Component Tokens