[FEATURE] create @perses-dev/design-tokens package by zhuje · Pull Request #198 · perses/shared

zhuje · 2026-07-07T16:15:55Z

Description

Create @perses-dev/design-tokens as part of this initiative perses/perses#3570

Screenshots

Checklist

Pull request has a descriptive title and context useful to a reviewer.
Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the
following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, DOC,IGNORE.
All commits have DCO signoffs.

UI Changes

Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
Code follows the UI guidelines.
E2E tests are stable and unlikely to be flaky.
See e2e docs for more details. Common issues include:
- Is the data inconsistent? You need to mock API requests.
- Does the time change? You need to use consistent time values or mock time utilities.
- Does it have loading states? You need to wait for loading to complete.

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

jgbernalp · 2026-07-08T08:14:15Z

this file is empty, do we need it?

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

* [FEATURE] create @perses-dev/design-token package Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] address comments perses/shared pr #198 Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> --------- Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

* [FEATURE] create @perses-dev/design-token package Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] address comments perses/shared pr perses#198 Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> --------- Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

* [FEATURE] create @perses-dev/design-tokens package (#198) Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [FEATURE] UI Customization. Add next component directory with Button and Alert primitives (#213) Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [FEATURE] UI Customization: Component Provider (#241) Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [BREAKINGCHANGE] Update files to align with PR#248 Upgrade to Node 24 and remove CommonJS (#300) Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] UI Customization. Update package-lock.json for to align with Node updates Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] Regenerate package-lock.json after rebase onto main Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [FEATURE] UI Customization. Add Divider primitive (#318) Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [FEATURE] UI customization. Add Box primitive component Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] Update package.json so design-tokens are a dependency Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] Address comments. Move spacing functions to their own file. Update Box.tsx, Box.test.tsx and Box.stories.tsx to improve how props are checked and applied Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] Update package-lock.json after rebase onto ui-customization Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] Use CSS classes for Box spacing Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [FEATURE] Add Box primitive component Add a reusable Box primitive with token-based padding, margin, gap, and common layout props. Add reusable spacing utility styles and responsive spacing support through shared primitive system utilities. Add Box stories and focused tests. Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] Address comments - Exported the shared responsive stylesheet from @perses-dev/components. - Renamed responsive CSS variables from --ps-box-* to generic --ps- responsive-*, so the responsive utility can be reused by future layout primitives. - Updated the responsive stylesheet and Box test to use the new variable names. - Simplified spacing CSS by removing intermediate --ps-spacing-value-* variables and referencing Perses spacing tokens directly. Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] Guard Object.entries against undefined in responsive helpers Addresses react-doctor no-object-keys-values-entries-on-maybe-undefined (#352 (comment)). The value is already narrowed by isResponsiveValue, but the linter does not follow custom type guards, so add a `?? {}` fallback. Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] remove unnecessary coalescing Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] categorize properties for reuse, add story Sample helper, refactor box stories Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] remove oxlint ignore Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] regenerate package-lock.json Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] adjust sample to include code snippets Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] fix lint error Signed-off-by: Gabriel Bernal <gbernal@redhat.com> --------- Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> Signed-off-by: Gabriel Bernal <gbernal@redhat.com> Co-authored-by: Gabriel Bernal <gbernal@redhat.com>

[FEATURE] create @perses-dev/design-token package

7f5b2cd

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>