diff --git a/docs/architecture/005-new-162-fontsize-token.md.md b/docs/architecture/005-new-162-fontsize-token.md.md new file mode 100644 index 000000000..cebde7ed7 --- /dev/null +++ b/docs/architecture/005-new-162-fontsize-token.md.md @@ -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. diff --git a/packages/kit/src/theme/tokens.ts b/packages/kit/src/theme/tokens.ts index 86d1e33ba..f1e64776f 100644 --- a/packages/kit/src/theme/tokens.ts +++ b/packages/kit/src/theme/tokens.ts @@ -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)"} diff --git a/packages/kit/src/theme/wpds.tokens.json b/packages/kit/src/theme/wpds.tokens.json index 88fbb96ea..aa4305e2e 100644 --- a/packages/kit/src/theme/wpds.tokens.json +++ b/packages/kit/src/theme/wpds.tokens.json @@ -2073,6 +2073,9 @@ "150": { "value": "{size.150}" }, + "162": { + "value": "1.625rem" + }, "175": { "value": "{size.175}" },