@motir/design-system 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/components/theme/StyleVignette.js +22 -1
  2. package/dist/components/theme/StyleVignette.js.map +1 -1
  3. package/dist/components/ui/Combobox.d.ts +8 -0
  4. package/dist/components/ui/Combobox.js +6 -3
  5. package/dist/components/ui/Combobox.js.map +1 -1
  6. package/dist/components/ui/Pill.d.ts +2 -2
  7. package/dist/components/ui/Pill.js +22 -1
  8. package/dist/components/ui/Pill.js.map +1 -1
  9. package/dist/specimen/TokensSpecimen.js +22 -1
  10. package/dist/specimen/TokensSpecimen.js.map +1 -1
  11. package/package.json +1 -1
  12. package/theme.css +62 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@motir/design-system",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "description": "Motir's 3-axis design system (colour · style · type): distributable token CSS, the axis registries, the theme-apply API, and framework-agnostic React primitives. Shared by motir-core and planner-scaffolded products.",
5
5
  "license": "GPL-3.0-only",
6
6
  "repository": {
package/theme.css CHANGED
@@ -3277,6 +3277,28 @@
3277
3277
  --el-tint-lavender: var(--color-tint-lavender);
3278
3278
  --el-tint-sky: var(--color-tint-sky);
3279
3279
  --el-tint-yellow: var(--color-tint-yellow);
3280
+ /* THE SEVENTH TINT (MOTIR-5140 · MOTIR-5141). The canvas status chip speaks
3281
+ this flat family (`lib/workflows/canvasStatusMeta.ts`), and all six above
3282
+ were spent — that module's own header records `planning` taking "the one
3283
+ remaining unspent tint". `approved` is the status that breaks it.
3284
+
3285
+ ⚠️ IT IS A `color-mix` AND NOT A `var(--color-tint-*)` ALIAS, WHICH IS THE
3286
+ ONE PLACE IT DEPARTS FROM ITS SIX SIBLINGS, DELIBERATELY. There is no
3287
+ Tier-0 `--color-tint-sage`, and adding one would oblige every palette block
3288
+ to declare it — a palette that did not would leave this token resolving to
3289
+ a DANGLING var, which `paletteTokenCoverage` fails on by name. Riding
3290
+ `--color-success` + `--color-surface` instead re-skins per palette for free
3291
+ (both are declared in all nine non-base blocks) and needs no palette edit.
3292
+
3293
+ MEASURED, per the design asset: worst ΔE2000 6.0 against the other six plus
3294
+ `--el-muted` across all twenty palette x theme contexts (amber/light vs
3295
+ `--el-tint-mint`), against this family's floor of 2 (`MIN_DELTA_E_TINT`);
3296
+ worst `--el-text-strong` ink contrast 6.43:1. ⚠️ That floor is NOT enforced
3297
+ for this family — `familyHueSeparation.test.ts` covers priority, label,
3298
+ avatar and selection, not the tints — so the number is a hand measurement
3299
+ and nothing in CI re-performs it when a palette moves.
3300
+ See design/boards/design-notes.md § "Approved — the ninth board column". */
3301
+ --el-tint-sage: color-mix(in srgb, var(--color-success) 26%, var(--color-surface));
3280
3302
 
3281
3303
  /* ── Status hues (MOTIR-1273 · 1266.2 — un-collapse the workflow statuses) ──
3282
3304
  Each workflow status renders its dot/icon in its OWN hue, so in_review /
@@ -3346,6 +3368,16 @@
3346
3368
  not a [data-palette='motir'] block: same as --el-status-implemented above —
3347
3369
  <html> carries no data-appearance-scope, so the base layer IS how the
3348
3370
  browser reaches these values. */
3371
+ /* A person's YES, and NOT yet shipped (MOTIR-5139). The `done` green one ink
3372
+ step deeper: same family, because it is the same answer one rung earlier;
3373
+ deeper, because it has not merged. MEASURED rather than chosen — it clears
3374
+ `tests/theme/statusHueSeparation.test.ts`'s ΔE2000 floor of 10 in all ten
3375
+ palettes x both themes, global minimum 11.6 (amber/dark vs planning), and
3376
+ sits 14.2-42.6 from `done` itself. The 30% ratio is the interior of the
3377
+ window: 35% lands on the floor at 10.1, 25% collides with `implemented` in
3378
+ citrine at 9.8. Contrast 9.54-13.72:1 on card/surface/page.
3379
+ See design/boards/design-notes.md § "Approved — the ninth board column". */
3380
+ --el-status-approved: color-mix(in srgb, var(--color-success) 30%, var(--color-ink));
3349
3381
  --el-status-done: color-mix(in srgb, var(--color-success) 85%, var(--color-charcoal));
3350
3382
  --el-status-blocked: var(--color-warning); /* amber — can't proceed (gap fixed) */
3351
3383
  --el-status-cancelled: var(--color-steel); /* terminal grey — not red (cancel ≠ error) */
@@ -3451,6 +3483,13 @@
3451
3483
  --el-notif-commented: var(--color-info); /* was --el-type-task */
3452
3484
  --el-notif-assigned: var(--color-accent-green); /* was --el-type-story */
3453
3485
  --el-notif-transitioned: var(--color-accent-teal); /* was --el-type-subtask */
3486
+ /* GitHub REFUSED a collaborator invitation (MOTIR-5016 · Story MOTIR-5010) —
3487
+ the one access outcome with no other carrier. --color-warning, which is the
3488
+ hue the plan review rail's `needs_access` outcome and the establish step's
3489
+ report already use for an access gap, so one product story is told in one
3490
+ colour. NOT danger: nothing was lost or destroyed — the repository exists and
3491
+ the plan is safe; the user simply cannot open it yet. */
3492
+ --el-notif-access-refused: var(--color-warning);
3454
3493
  /* The EXECUTOR badge on a Workbench row's assignee avatar (Story MOTIR-2649 ·
3455
3494
  Subtask MOTIR-2653, per design/workbench/design-notes.md §"The agent state"
3456
3495
  — that area was renamed with the surface by MOTIR-4779).
@@ -3953,6 +3992,15 @@
3953
3992
  --color-warning: #dd5b00;
3954
3993
  --el-priority-high: var(--color-warning);
3955
3994
  --el-sidebar-item-bg-hover: #eeede9;
3995
+ /* MOTIR-5139 — carried here because `evergreen` OVERRIDES it. A token this
3996
+ block omits leaks from the ANCESTOR into a scoped `motir` tile, so an
3997
+ evergreen page previewing the motir palette would paint its Approved chip
3998
+ evergreen. That is the exact failure `scopedPreviewIsolation`'s
3999
+ "the base palette block covers every token ANY palette overrides" forbids,
4000
+ and it caught this omission. Light arm only: the value is built from
4001
+ `--color-success` and `--color-ink`, both of which flip with the theme, so
4002
+ the global dark block overrides nothing for it to re-assert. */
4003
+ --el-status-approved: color-mix(in srgb, var(--color-success) 30%, var(--color-ink));
3956
4004
  --el-status-blocked: var(--color-warning);
3957
4005
  --el-status-cancelled: var(--color-steel);
3958
4006
  --el-status-implemented: color-mix(in srgb, var(--color-accent) 75%, var(--color-charcoal));
@@ -4476,6 +4524,13 @@
4476
4524
  as a deep jade against the grass done. Separation ΔE 19.2; contrast 10.9:1
4477
4525
  surface / 12.2:1 card. */
4478
4526
  --el-status-in-review: #1d3b31; /* Radix Jade 12 — deep jade step */
4527
+ /* Approved (MOTIR-5139) — the ONE palette the base deep-green cannot clear:
4528
+ Evergreen's `in_review` is a deep jade, at ΔE 6.9 light / 3.6 dark. It takes
4529
+ Evergreen's own unspent violet accent instead, measured at 14.3 / 12.3.
4530
+ Declared in BOTH themes: `[data-palette]` and the base `[data-theme='dark']`
4531
+ TIE on specificity and the palette block comes later, so a light-only
4532
+ override silently leaks onto the dark canvas. */
4533
+ --el-status-approved: color-mix(in srgb, var(--color-accent) 40%, var(--color-ink));
4479
4534
 
4480
4535
  /* cancelled is unchanged in light (ΔE 17.9 from todo); re-asserted to pair
4481
4536
  the dark override below — see the cascade note in the dark block. */
@@ -4546,6 +4601,13 @@
4546
4601
  (which keeps the pair ~12 apart). cancelled takes the palette's own next
4547
4602
  step up, --color-slate. ΔE 22.4; contrast 7.1:1 / 7.7:1. */
4548
4603
  --el-status-in-review: #adf0d4; /* Radix Jade 12 dark — pale jade step */
4604
+ /* Approved (MOTIR-5139) — the ONE palette the base deep-green cannot clear:
4605
+ Evergreen's `in_review` is a deep jade, at ΔE 6.9 light / 3.6 dark. It takes
4606
+ Evergreen's own unspent violet accent instead, measured at 14.3 / 12.3.
4607
+ Declared in BOTH themes: `[data-palette]` and the base `[data-theme='dark']`
4608
+ TIE on specificity and the palette block comes later, so a light-only
4609
+ override silently leaks onto the dark canvas. */
4610
+ --el-status-approved: color-mix(in srgb, var(--color-accent) 40%, var(--color-ink));
4549
4611
  --el-status-cancelled: #9aaaa1; /* Evergreen's own slate — the next neutral step */
4550
4612
  }
4551
4613