Skip to content

Refactor/UI tokens #116

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BleedingDev merged 46 commits into from
Sep 7, 2025
Merged

Refactor/UI tokens #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
46 commits
Select commit Hold shift + click to select a range
aaee20e
use new name for spacing in components token
KaiUweCZE Aug 13, 2025
67aafb3
refactor(ui): rename text tokens to fg for consistency
KaiUweCZE Aug 13, 2025
9786331
refactor(ui): automate semantic color light variants with oklch calcu…
KaiUweCZE Aug 13, 2025
c7cc809
refactor(ui): migrate border tokens from hardcoded colors to alpha-ba…
KaiUweCZE Aug 13, 2025
a480e5b
fix(ui): resolve undefined token references and naming inconsistencies
KaiUweCZE Aug 18, 2025
f756d8c
docs(ui): add token contribution guide, development docs and analysis…
Aug 18, 2025
1d21968
refactor(ui/button): reorganize button tokens to follow contribution …
Aug 18, 2025
7cff8db
refactor(ui/badge): reorganize badge tokens to follow contribution st…
Aug 18, 2025
7c47e64
fix ui bug
KaiUweCZE Aug 19, 2025
7f105ad
refactor(ui/tooltip): remove hardcoded padding
KaiUweCZE Aug 20, 2025
f9c7cf3
refactor(ui):set light-dark shadow variant
KaiUweCZE Aug 20, 2025
71108c6
feat(ui): add Image component stories with Next.js integration
KaiUweCZE Aug 21, 2025
b1441cb
fix: add missing import RangeSlider
Aug 28, 2025
73a2b19
refactor: Update color-palette stories for color scheme overview
Aug 28, 2025
93fac15
refactor(ui/tokens): simplify secondary text color system
KaiUweCZE Aug 31, 2025
a29fa48
chore(ui): upgrade tailwind-variants to v3.1.0
KaiUweCZE Aug 31, 2025
5e333d6
"feat(ui/tokens): add layout primitive tokens for responsive design
KaiUweCZE Sep 1, 2025
e40b693
"refactor(ui/stories): simplify color palette story implementation
KaiUweCZE Sep 1, 2025
6724953
refactor(ui/storybook): reorganize stories for better navigation
KaiUweCZE Sep 1, 2025
95b0f62
fix(ui/tokens): correct button icon references in token names
KaiUweCZE Sep 2, 2025
6b48191
Merge branch 'master' into refactor/ui-tokens
BleedingDev Sep 2, 2025
2c782a2
update zag.js to the latest
KaiUweCZE Sep 3, 2025
18528ee
merge master into refactor/ui-tokens
KaiUweCZE Sep 4, 2025
748dafe
chore: apply biome formatting to ui library files
KaiUweCZE Sep 4, 2025
2b8fa55
refactor(ui/tokens): remove deprecated spacing aliases
KaiUweCZE Sep 4, 2025
d875d52
refactor: eliminate duplicates between CLAUDE.md and
KaiUweCZE Sep 4, 2025
f20e35e
remove unused font-weight
KaiUweCZE Sep 4, 2025
5d80bae
small edits in layout.css
KaiUweCZE Sep 4, 2025
c00cec2
fix: fix legacy tokens
BleedingDev Sep 5, 2025
60e11a0
fix: fix coderabbit recommendations
BleedingDev Sep 5, 2025
b769396
feat: improve token usage validation to ignore TW default classes
BleedingDev Sep 5, 2025
50252de
fix: add unused tokens to components
BleedingDev Sep 5, 2025
3320453
fix: incorrectly undetected variables
BleedingDev Sep 5, 2025
7b2b187
feat: use bun for faster processing
BleedingDev Sep 5, 2025
0089d7f
refactor: improve performance of validate token script
BleedingDev Sep 5, 2025
cf44dcc
fix: improve tokens detection
BleedingDev Sep 5, 2025
728252d
chore: improve menu readability
BleedingDev Sep 5, 2025
541ebed
feat: add eslint tailwind beta + fix menu build
BleedingDev Sep 6, 2025
7f86e63
git commit -m "fix: replace stale stroke tokens with border tokens
KaiUweCZE Sep 6, 2025
4c34b7c
feat: migrate to CSS logical properties for RTL support
KaiUweCZE Sep 6, 2025
e789b35
fix: define missing shadow-xl token for component usage
KaiUweCZE Sep 6, 2025
fc5309e
fix: migrate from btn to button token naming convention
KaiUweCZE Sep 6, 2025
6caddaa
fix(ui): add missing -light-disabled tokens for semantic colors
KaiUweCZE Sep 6, 2025
24d00a1
fix: implement code review suggestions
BleedingDev Sep 7, 2025
8f5e45f
fix: allow transparency and colour variants
BleedingDev Sep 7, 2025
e4cef8a
fix: simplify matching
BleedingDev Sep 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/frontend-demo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
"@react-email/components": "^0.3.2",
"@tanstack/react-query": "^5.76.1",
"@tanstack/react-store": "^0.7.1",
"@zag-js/carousel": "^1.14.0",
"@zag-js/react": "^1.14.0",
"@zag-js/carousel": "^1.22.1",
"@zag-js/react": "^1.22.1",
"clsx": "^2.1.1",
"dompurify": "^3.2.6",
"next": "^15.3.2",
Expand Down
22 changes: 11 additions & 11 deletions apps/frontend-demo/src/tokens/_overrides-components.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,27 +15,27 @@

/* === BUTTON === */
/* Change from --alpha-ring to --opacity-ring for all focus rings */
--color-btn-ring-primary: --alpha(
var(--color-btn-primary) /
--color-button-ring-primary: --alpha(
var(--color-button-primary) /
var(--opacity-ring)
);
--color-btn-ring-secondary: --alpha(
var(--color-btn-secondary) /
--color-button-ring-secondary: --alpha(
var(--color-button-secondary) /
var(--opacity-ring)
);
--color-btn-ring-tertiary: --alpha(
var(--color-btn-tertiary) /
--color-button-ring-tertiary: --alpha(
var(--color-button-tertiary) /
var(--opacity-ring)
);
--color-btn-ring-warning: --alpha(
var(--color-btn-warning) /
--color-button-ring-warning: --alpha(
var(--color-button-warning) /
var(--opacity-ring)
);
--color-btn-ring-danger: --alpha(
var(--color-btn-danger) /
--color-button-ring-danger: --alpha(
var(--color-button-danger) /
var(--opacity-ring)
);
--color-btn-text-secondary: var(--color-fg-dark);
--color-button-text-secondary: var(--color-fg-dark);

/* === INPUT === */
/* Different padding for small inputs */
Expand Down
6 changes: 3 additions & 3 deletions apps/frontend-demo/src/tokens/_overrides.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,8 +279,8 @@
);

/* Borders */
--color-stroke-primary: var(--color-slate-200);
--color-stroke-secondary: var(--color-slate-400);
--color-border-primary: var(--color-slate-200);
--color-border-secondary-alt: var(--color-slate-400);
--color-border: light-dark(var(--color-slate-200), var(--color-slate-800));
--color-border-neutral: light-dark(
var(--color-slate-300),
Expand Down Expand Up @@ -331,7 +331,7 @@
var(--opacity-disabled)
);
--color-disabled-border: --alpha(
var(--color-stroke-primary) /
var(--color-border-primary) /
var(--opacity-disabled)
);
--color-disabled-fill: --alpha(
Expand Down
4 changes: 2 additions & 2 deletions apps/frontend-demo/src/tokens/app-components/molecules/_cart-preview.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
@theme static {
/* === CART PREVIEW COLORS === */
--color-cart-preview-item-border: var(--color-stroke-secondary);
--color-cart-preview-item-border: var(--color-border-secondary);
--color-cart-preview-item-image-bg: var(--color-fill);
--color-cart-preview-fg: var(--color-fg-primary);
--color-cart-preview-fg-secondary: var(--color-fg-secondary);
--color-cart-preview-footer-border: var(--color-stroke-secondary);
--color-cart-preview-footer-border: var(--color-border-secondary);

/* === SPACING === */
--spacing-cart-preview: var(--spacing-xs);
Expand Down
2 changes: 1 addition & 1 deletion apps/frontend-demo/src/tokens/app-components/molecules/_navigation.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
/* Navigation submenu */
--color-nav-submenu-bg: var(--color-surface);
--color-nav-submenu-item-hover: var(--color-surface-hover);
--color-nav-submenu-border: var(--color-stroke-primary);
--color-nav-submenu-border: var(--color-border-primary);
--shadow-nav-submenu: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px
rgba(0, 0, 0, 0.1);

Expand Down
24 changes: 12 additions & 12 deletions apps/frontend-demo/src/tokens/app-components/molecules/_product-card.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,28 +28,28 @@

/* === PRODUCT CARD BUTTONS ===*/
/*Add to cart button*/
--color-btn-cart: var(--color-btn-primary);
--color-btn-cart-hover: oklch(
from var(--color-btn-cart) calc(l + var(--state-hover)) c h
--color-button-cart: var(--color-button-primary);
--color-button-cart-hover: oklch(
from var(--color-button-cart) calc(l + var(--state-hover)) c h
);

--color-btn-cart-fg: var(--color-btn-text);
--color-button-cart-fg: var(--color-button-fg);

/* Detail button */
--color-btn-detail: var(--color-btn-secondary);
--color-btn-detail-hover: oklch(
from var(--color-btn-detail) calc(l + var(--state-hover)) c h
--color-button-detail: var(--color-button-secondary);
--color-button-detail-hover: oklch(
from var(--color-button-detail) calc(l + var(--state-hover)) c h
);

--color-btn-detail-fg: var(--color-btn-text);
--color-button-detail-fg: var(--color-button-fg);

/* wishlist button */
--color-btn-wishlist: var(--color-btn-tertiary);
--color-btn-wishlist-hover: oklch(
from var(--color-btn-wishlist) calc(l + var(--state-hover)) c h
--color-button-wishlist: var(--color-button-tertiary);
--color-button-wishlist-hover: oklch(
from var(--color-button-wishlist) calc(l + var(--state-hover)) c h
);

--color-btn-wishlist-fg: var(--color-btn-text);
--color-button-wishlist-fg: var(--color-button-fg);

/* === PRODUCT CARD IMAGE === */
--aspect-pc-image: var(--aspect-ratio-square);
Comment thread
KaiUweCZE marked this conversation as resolved.
Expand Down
2 changes: 1 addition & 1 deletion apps/frontend-demo/src/tokens/app-components/organisms/_header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
--color-header-mobile-menu-hover: var(--color-fill-hover);
--color-header-mobile-menu-text: var(--color-fg-secondary);
--color-header-mobile-menu-text-hover: var(--color-fg-primary);
--color-header-divider: var(--color-stroke-secondary);
--color-header-divider: var(--color-border-secondary);

/* === HEADER SPACING === */
--spacing-header-container-x: var(--spacing-xs);
Expand Down
1 change: 1 addition & 0 deletions libs/ui/.storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const config: StorybookConfig = {
'../stories/**/*.mdx',
'../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
],
staticDirs: ['../stories/assets'],
addons: [
'@storybook/addon-onboarding',
'@storybook/addon-links',
Expand Down
13 changes: 13 additions & 0 deletions libs/ui/.storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,19 @@ const preview: Preview = {
date: /Date$/i,
},
},
options: {
storySort: {
order: [
'Atoms',
'Molecules',
'Organisms',
'Templates',
'Pages',
'Overview',
'*',
],
},
},
},
decorators: [
withThemeByClassName({
Expand Down
Loading
Loading