studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨(react) update theme tokens and structure

Browse Source 
This commit introduces a comprehensive update to the theme tokens in the
Cunningham package. The previous color definitions have been replaced
with a new structure that includes global color tokens for branding and
contextual elements. Additionally, the SCSS and JS files have been
refactored to align with this new token architecture, enhancing
maintainability and ensuring a cohesive design system across the
application. The TypeScript configuration has also been updated to
support JSX syntax.
This commit is contained in:
Nathan Panchout
2025-08-22 10:10:17 +02:00
committed by NathanVss
parent afb313fee0
commit bccdebd770
12 changed files with 2304 additions and 818 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react/src/docs/spacings.stories.tsx
View File

@@ -13,7 +13,7 @@ export const Default: Story = {
render: () => {
return (
<div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
{Object.entries(tokens.themes.default.theme.spacings).map(
{Object.entries(tokens.themes.default.globals.spacings).map(
([key, value]) => {
return (
<div

12
packages/react/src/docs/typo.stories.tsx
View File

@@ -13,8 +13,8 @@ export const Sizes: Story = {
render: () => {
return (
<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
{Object.keys(tokens.themes.default.theme.font.sizes).map((key) => (
<div key={key} className={"clr-greyscale-800 fs-" + key}>
{Object.keys(tokens.themes.default.globals.font.sizes).map((key) => (
<div key={key} className={"clr-gray-800 fs-" + key}>
Using the <code>fs-{key}</code> class
</div>
))}
@@ -27,8 +27,8 @@ export const Weights: Story = {
render: () => {
return (
<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
{Object.keys(tokens.themes.default.theme.font.weights).map((key) => (
<div key={key} className={"clr-greyscale-800 fs-l fw-" + key}>
{Object.keys(tokens.themes.default.globals.font.weights).map((key) => (
<div key={key} className={"clr-gray-800 fs-l fw-" + key}>
Using the <code>fw-{key}</code> class
</div>
))}
@@ -41,8 +41,8 @@ export const Families: Story = {
render: () => {
return (
<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
{Object.keys(tokens.themes.default.theme.font.families).map((key) => (
<div key={key} className={"clr-greyscale-800 f-" + key}>
{Object.keys(tokens.themes.default.globals.font.families).map((key) => (
<div key={key} className={"clr-gray-800 f-" + key}>
Using the <code>f-{key}</code> class
</div>
))}