@q1travel/design-system 0.15.3 → 0.16.0

package/contracts/token-naming.md

@@ -29,6 +29,15 @@ Examples:
 
 Reference color scales use numeric steps from `100` to `1000`.
 
+#### Scale Steps
+
+Non-color reference scales carry their own step rules, so a value that is off the scale shows up as a missing token rather than as a raw number in product CSS.
+
+- **Spacing** — the step number is the pixel value divided by four: `--q1-space-4` is `16px`. Half steps fill the gaps inside the 4px grid where a whole step reads as too loose or too tight: `--q1-space-1-5` (`6px`), `--q1-space-2-5` (`10px`), `--q1-space-3-5` (`14px`). The scale runs `1`, `1-5`, `2`, `2-5`, `3`, `3-5`, `4`, `5`, `6`, `8`, `10`, `16`, `24`; it thins out above `20px` because a large gap is read as layout, not as fine adjustment.
+- **Radius** — `--q1-radius-1` through `--q1-radius-5` (`4`, `6`, `8`, `12`, `16px`), plus `--q1-radius-full` (`9999px`) for a pill. The pill value is deliberately larger than any half-height it can meet: it is a shape, not a measurement, and it does not interpolate with the numbered steps.
+- **Line height** — two families coexist. `--q1-line-height-<role>-<size>` is a pixel line box bound to one font-size step, and typography styles use it. `--q1-line-height-tight` (`1.2`), `-snug` (`1.35`), `-normal` (`1.5`), and `-relaxed` (`1.6`) are unitless and scale with whatever font size they land on; they serve text whose size is not one of the typography steps, such as a body block or a table cell.
+- **Font weight** — `--q1-font-weight-regular` (`400`), `-medium` (`500`), `-semibold` (`600`), `-bold` (`700`). Four steps is the whole scale; a weight between two of them is not a distinction the font stack renders consistently.
+
 ### Motion Tokens
 
 Motion tokens are the single source for transition and animation values. They are split on the only two questions a motion value answers.
@@ -83,6 +92,9 @@ Examples:
 - `--q1-color-action-primary`
 - `--q1-color-status-danger`
 - `--q1-shadow-focus`
+- `--q1-shadow-focus-danger`
+
+`--q1-shadow-focus-danger` is the ring the field family already draws on an invalid control, now named: one step wider and one step lighter than `--q1-shadow-focus`, because red at the same opacity swallows the 1px red border it sits on. Both rings resolve their color through a semantic token, so light and dark need no separate declaration.
 
 ### Component Tokens
 

package/dist-pkg/style.css

@@ -134,6 +134,7 @@
   --q1-font-weight-regular: 400;
   --q1-font-weight-medium: 500;
   --q1-font-weight-semibold: 600;
+  --q1-font-weight-bold: 700;
   --q1-font-size-heading-72: 72px;
   --q1-font-weight-heading-72: var(--q1-font-weight-medium);
   --q1-line-height-heading-72: 72px;
@@ -174,10 +175,22 @@
   --q1-line-height-copy-14: 20px;
   --q1-font-size-code-13: 13px;
   --q1-line-height-code-13: 18px;
+  /* 通用行高刻度：给字号档位之外的文本用（正文块、表格单元、长段落）。字号档位自带的
+ --q1-line-height-<role>-<size> 是像素行盒，两者并存——档位锁死行盒高度，这四档跟随字号缩放。 */
+  --q1-line-height-tight: 1.2;
+  --q1-line-height-snug: 1.35;
+  --q1-line-height-normal: 1.5;
+  --q1-line-height-relaxed: 1.6;
+  /* 间距编号 = 像素值 / 4。半步档（1-5、2-5、3-5）补 4px 网格之间的 6 / 10 / 14px，
+ 用于图标与标签、徽章内边距一类整步显得过松或过紧的小尺度处。 */
   --q1-space-1: 4px;
+  --q1-space-1-5: 6px;
   --q1-space-2: 8px;
+  --q1-space-2-5: 10px;
   --q1-space-3: 12px;
+  --q1-space-3-5: 14px;
   --q1-space-4: 16px;
+  --q1-space-5: 20px;
   --q1-space-6: 24px;
   --q1-space-8: 32px;
   --q1-space-10: 40px;
@@ -213,7 +226,13 @@
   --q1-radius-2: 6px;
   --q1-radius-3: 8px;
   --q1-radius-4: 12px;
+  --q1-radius-5: 16px;
+  /* 胶囊：半径大于任何可能的半高即可，具体数值不参与计算。 */
+  --q1-radius-full: 9999px;
   --q1-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--q1-color-primary-700) 22%, transparent);
+  /* 危险态环：字段家族错误态与危险动作共用。比默认焦点环宽一档、淡一档——红色本身已经足够响，
+ 同样浓度会盖过 1px 红描边。取值沿用字段错误态的既有标定，status-danger 明暗各有取值。 */
+  --q1-shadow-focus-danger: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
   /* 浮层阴影两档：popover=菜单/悬浮卡/小浮层，modal=模态级大浮层。方向性面板（drawer/sheet）例外，
  在组件内自持。恒黑 shadow token 混色，暗色靠 --q1-color-border-overlay 发丝边保证清晰度。 */
   /* 两档均为分层阴影（界面准则 · 设计「分层阴影」）：近距接触阴影交代元件落在何处，
@@ -690,7 +709,7 @@
 .form-field--error .input-control,
 .input-control:has(.form-control[aria-invalid='true']) {
   border-color: var(--q1-color-status-danger);
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
+  box-shadow: var(--q1-shadow-focus-danger);
 }
 
 .input-control:has(.form-control:disabled) {
@@ -918,7 +937,7 @@
 .form-field--error .textarea-control,
 .textarea-control:has(.form-control[aria-invalid='true']) {
   border-color: var(--q1-color-status-danger);
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
+  box-shadow: var(--q1-shadow-focus-danger);
 }
 
 .textarea-control:has(.form-control:disabled) {
@@ -988,7 +1007,7 @@
 .form-control[aria-invalid='true'],
 .q1-verification-code:has(input[aria-invalid='true']) .q1-verification-code__slot {
   border-color: var(--q1-color-status-danger);
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
+  box-shadow: var(--q1-shadow-focus-danger);
 }
 
 /* 禁用态：底色抬灰而非降透明度；opacity:1 归零 Chrome UA 对禁用控件的默认 0.7。 */

package/dist-pkg/tokens.css

@@ -130,6 +130,7 @@
   --q1-font-weight-regular: 400;
   --q1-font-weight-medium: 500;
   --q1-font-weight-semibold: 600;
+  --q1-font-weight-bold: 700;
   --q1-font-size-heading-72: 72px;
   --q1-font-weight-heading-72: var(--q1-font-weight-medium);
   --q1-line-height-heading-72: 72px;
@@ -170,10 +171,18 @@
   --q1-line-height-copy-14: 20px;
   --q1-font-size-code-13: 13px;
   --q1-line-height-code-13: 18px;
+  --q1-line-height-tight: 1.2;
+  --q1-line-height-snug: 1.35;
+  --q1-line-height-normal: 1.5;
+  --q1-line-height-relaxed: 1.6;
   --q1-space-1: 4px;
+  --q1-space-1-5: 6px;
   --q1-space-2: 8px;
+  --q1-space-2-5: 10px;
   --q1-space-3: 12px;
+  --q1-space-3-5: 14px;
   --q1-space-4: 16px;
+  --q1-space-5: 20px;
   --q1-space-6: 24px;
   --q1-space-8: 32px;
   --q1-space-10: 40px;
@@ -206,7 +215,10 @@
   --q1-radius-2: 6px;
   --q1-radius-3: 8px;
   --q1-radius-4: 12px;
+  --q1-radius-5: 16px;
+  --q1-radius-full: 9999px;
   --q1-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--q1-color-primary-700) 22%, transparent);
+  --q1-shadow-focus-danger: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
   --q1-shadow-popover: 0 1px 3px color-mix(in srgb, var(--q1-color-shadow) 10%, transparent),
     0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 14%, transparent);
   --q1-shadow-modal: 0 2px 6px color-mix(in srgb, var(--q1-color-shadow) 12%, transparent),
@@ -355,6 +367,7 @@
   --q1-font-weight-regular: 400;
   --q1-font-weight-medium: 500;
   --q1-font-weight-semibold: 600;
+  --q1-font-weight-bold: 700;
   --q1-font-size-heading-72: 72px;
   --q1-font-weight-heading-72: var(--q1-font-weight-medium);
   --q1-line-height-heading-72: 72px;
@@ -395,10 +408,18 @@
   --q1-line-height-copy-14: 20px;
   --q1-font-size-code-13: 13px;
   --q1-line-height-code-13: 18px;
+  --q1-line-height-tight: 1.2;
+  --q1-line-height-snug: 1.35;
+  --q1-line-height-normal: 1.5;
+  --q1-line-height-relaxed: 1.6;
   --q1-space-1: 4px;
+  --q1-space-1-5: 6px;
   --q1-space-2: 8px;
+  --q1-space-2-5: 10px;
   --q1-space-3: 12px;
+  --q1-space-3-5: 14px;
   --q1-space-4: 16px;
+  --q1-space-5: 20px;
   --q1-space-6: 24px;
   --q1-space-8: 32px;
   --q1-space-10: 40px;
@@ -431,7 +452,10 @@
   --q1-radius-2: 6px;
   --q1-radius-3: 8px;
   --q1-radius-4: 12px;
+  --q1-radius-5: 16px;
+  --q1-radius-full: 9999px;
   --q1-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--q1-color-primary-700) 22%, transparent);
+  --q1-shadow-focus-danger: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
   --q1-shadow-popover: 0 1px 3px color-mix(in srgb, var(--q1-color-shadow) 10%, transparent),
     0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 14%, transparent);
   --q1-shadow-modal: 0 2px 6px color-mix(in srgb, var(--q1-color-shadow) 12%, transparent),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q1travel/design-system",
-  "version": "0.15.3",
+  "version": "0.16.0",
   "private": false,
   "type": "module",
   "main": "./dist-pkg/design-system.js",