Skip to content
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.

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

feat: added new font size token #666

Merged
merged 1 commit into from
Sep 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
15 changes: 15 additions & 0 deletions docs/architecture/005-new-162-fontsize-token.md.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# Introducing a 26px Font Size Token (162)

## Background

The current design system includes a sequence of font size tokens that range from 050 to 500, covering a variety of common font sizes. However, there is no token for a 26px font size, which falls between the existing 24px (likely token 150) and 28px (likely token 175).

**To address this gap, we propose adding a new token:** 162, representing the 26px font size. While the naming of tokens generally follows a predictable sequence, we have previously included some exceptions where unique naming conventions better suited our design needs. The addition of token 162 aligns with this flexibility.

### Rationale

- **Visual consistency:** A 26px size provides a finer granularity of choice between 24px and 28px, allowing for more precise typography adjustments.

- **Existing use cases:** The need for a 26px font size has emerged based on design reviews and accessibility considerations, particularly for headings and larger body text in certain layouts.

- **Token flexibility:** The system already accommodates some non-sequential naming conventions. Introducing token 162 for 26px continues this flexible approach while maintaining overall consistency.
2 changes: 1 addition & 1 deletion packages/kit/src/theme/tokens.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
export const spaces={"100":"1rem","125":"1.25rem","150":"1.5rem","175":"1.75rem","200":"2rem","225":"2.25rem","250":"2.5rem","275":"2.75rem","300":"3rem","350":"3.5rem","400":"4rem","450":"4.5rem","500":"5rem","025":"0.25rem","050":"0.5rem","075":"0.75rem"}
export const radii={"100":"1rem","125":"1.25rem","150":"1.5rem","012":"0.125rem","025":"0.25rem","050":"0.5rem","075":"0.75rem","round":"9999px"}
export const fonts={"headline":"Postoni, Postoni-fallback, serif","subhead":"Franklin, Franklin-fallback, sans-serif","body":"georgia, Times New Roman, serif","meta":"Franklin, Franklin-fallback, sans-serif","magazine":"PostoniDisplayMag, PostoniDisplayMag-fallback, serif"}
export const fontSizes={"100":"1rem","112":"1.125rem","125":"1.25rem","150":"1.5rem","175":"1.75rem","200":"2rem","225":"2.25rem","250":"2.5rem","275":"2.75rem","300":"3rem","350":"3.5rem","400":"4rem","450":"4.5rem","500":"5rem","075":"0.75rem","087":"0.875rem"}
export const fontSizes={"100":"1rem","112":"1.125rem","125":"1.25rem","150":"1.5rem","162":"1.625rem","175":"1.75rem","200":"2rem","225":"2.25rem","250":"2.5rem","275":"2.75rem","300":"3rem","350":"3.5rem","400":"4rem","450":"4.5rem","500":"5rem","075":"0.75rem","087":"0.875rem"}
export const fontWeights={"light":300,"regular":400,"bold":700,"ultra":800}
export const lineHeights={"100":1,"110":1.1,"125":1.25,"150":1.5,"160":1.6,"175":1.75,"200":2,"240":2.4}
export const shadows={"50":"0px 2px 0px 0px #D5D5D5","100":"0px 1px 2px 0px rgba(0, 0, 0, 0.15)","200":"0px 2px 4px 0px rgba(0, 0, 0, 0.15)","300":"0px 4px 8px 0px rgba(0, 0, 0, 0.15)","400":"0px 8px 16px 0px rgba(0, 0, 0, 0.15)","500":"0px 16px 32px 0px rgba(0, 0, 0, 0.15)"}
Expand Down
3 changes: 3 additions & 0 deletions packages/kit/src/theme/wpds.tokens.json
Original file line number Diff line number Diff line change
Expand Up @@ -2073,6 +2073,9 @@
"150": {
"value": "{size.150}"
},
"162": {
"value": "1.625rem"
},
"175": {
"value": "{size.175}"
},
Expand Down
Loading