chore: sync tokens from Figma - #753
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
Contributor
There was a problem hiding this comment.
Pull request overview
Note
Copilot could not run the full agentic suite for this review because it was automatically requested on a bot-authored pull request. Request a review from Copilot under Reviewers to retry with the full agentic suite. Improved support for bot-authored pull requests is coming soon.
Updates the generated design-token outputs to introduce a new success color token and refresh syntax highlighting token values from the latest Figma exports.
Changes:
- Added a new
successdesign token and corresponding CSS variables across generated outputs. - Updated syntax highlighting
commentcolors for dark/light themes. - Refreshed Figma-exported token JSON artifacts (metadata, modes ordering, and values).
Reviewed changes
Copilot reviewed 2 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/design-tokens/src/generated/tokens.ts | Adds success token + css var mapping; updates syntax comment color; updates embedded CSS string output. |
| packages/design-tokens/src/generated/tokens.css | Adds --zl-success; updates --zl-syntax-comment values for dark/light. |
| packages/design-tokens/src/generated/tailwind.css | Exposes --zl-success via Tailwind color var mapping. |
| packages/design-tokens/src/generated/shadcn.css | Exposes --zl-success via shadcn var mapping. |
| packages/design-tokens/src/generated/figma.tokens.json | Adds success token + updates syntax comment colors; updates export metadata counts. |
| packages/design-tokens/figma-export/syntax.json | Reorders modes and replaces token references/descriptions with raw hex values. |
| packages/design-tokens/figma-export/3--mode.json | Adds success and introduces an additional mode named Mode plus a large set of additional token content. |
Comment on lines
3
to
8
| "collection": "3. Mode", | ||
| "modes": [ | ||
| "Light", | ||
| "Dark" | ||
| "Dark", | ||
| "Mode" | ||
| ] |
Comment on lines
+9
to
18
| "Light": { | ||
| "syntax": { | ||
| "key": { | ||
| "$value": "{brand.purple.500}", | ||
| "$type": "color", | ||
| "$description": "sky-400 / sky-600" | ||
| "$value": "#401889", | ||
| "$type": "color" | ||
| }, | ||
| "string": { | ||
| "$value": "{brand.orange.400}", | ||
| "$type": "color", | ||
| "$description": "emerald-400 / emerald-600" | ||
| "$value": "#bd2514", | ||
| "$type": "color" | ||
| }, |
Comment on lines
2
to
7
| "$metadata": { | ||
| "collection": "Syntax", | ||
| "modes": [ | ||
| "Dark", | ||
| "Light" | ||
| "Light", | ||
| "Dark" | ||
| ] |
Contributor
Author
|
The sync adds `success`, which tripped both surface guards. The snapshot is regenerated — that one is working as intended: it names the added key, so the addition gets reviewed. The count assertion is replaced rather than bumped. `toHaveLength(33)` had its failure modes backwards: it went red on every harmless addition the designer made, yet stayed green on a swap, since dropping `ring` and gaining `success` leaves the count untouched — so it never guarded the completeness its test name claims. `REQUIRED_COLOR_ROLES` asserts membership with `arrayContaining`, making the contract one-directional: losing a role fails and the diff names it, gaining one passes. `success` is in the list because the console user status badge consumes it.
bastionstack
added a commit
that referenced
this pull request
Aug 4, 2026
# Which Problems Are Solved
`/users/{id}` renders a raw key/value dump of the API response. The
design (`467:44362`) specifies a real screen: a header carrying the user
id and status, Overview and Authentication tabs, the profile laid out
from the user's schema, and a delete action.
# How the Problems Are Solved
- Header with the user id and copy-to-clipboard, the status badge, and
Created — the last two from the `metadata` block added in #721.
- **Overview**: the profile rendered from the user's own `$schema`, so
the fields are whatever that schema defines — the same rule as the users
list columns and the Add-user drawer. Plus the Delete user card, wired
to the dialog from #632, which returns to the list on success.
- **Authentication**: the registered passkey count from `GET
/users/{user_id}/passkeys`.
- The schema and passkey calls are chrome for the record rather than the
record itself, so neither can reject the loader — a failure costs a
card, not the screen.
- The created date renders in the viewer's locale. The design's `12 Jul
2026` is that mock's locale rather than a format to impose, so day,
short month and year are requested and the order is the viewer's.
# Additional Changes
Three changes reach beyond this screen, which is why the diff touches
`components/ui`:
- **Tabs** and **Badge** are corrected against the design system rather
than the screen mock — the mock's own Tabs instance disagrees with the
library it came from. Both are shared primitives, so every console
screen picks the fix up.
- **The user status pill moves into one shared component.** `Badge`
already carried the icon slot the design fills with a dot; the users
list and this screen were rendering two near-identical pills instead of
using it. The dot uses the `success` colour added in #753.
- Adds the shadcn `Card` primitive, which the console did not have and
this design uses for every section.
# Out of Scope
Five design elements are deliberately absent, recorded on #631:
| Element | Why |
| --- | --- |
| **Last sign-in** | No such field anywhere on the user |
| **Save** on the profile form | #693 — no `PATCH`/`PUT
/users/{user_id}`, so the fields are read-only and the design's Save is
absent rather than disabled |
| **Password** row (last changed) | No password timestamp is exposed |
| **Project permissions** | Removed from the design (decisions log D6) |
| **`v1 · live`** schema badge | Schemas are not versioned — one row per
URL, no history |
Two deviations from the mock are intentional and worth a reviewer's
agreement rather than a silent pass:
- **Content inset stays at 32px.** The detail mock insets 24px and the
users list mock 32px; matching each exactly would jump the layout 8px
when navigating between the two screens.
- **The copy control stays a 24px button** against the design's 13px
glyph, which leaves the meta card 7px taller than the mock. Shrinking it
would put the tap target under the WCAG 2.5.8 minimum.
# Additional Context
- Part of #631
- Stacked on #726 (users list status column and Load more), so that
merges first
---------
Co-authored-by: Wim Van Laer <wim+github@zitadel.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Automated design-token sync from the Zitadel Design System.
Trigger: push (push by jjjssswww)
Before merging:
packages/design-tokens/figma-export/andpackages/design-tokens/src/generated/.and the snapshot intentionally, or roll the sync back.
apps/console.Repeat syncs before merge append commits to this PR instead of opening a new one.