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

♻️(react) update token.ts to handles themes

Browse Source 
Some components were using wrong design tokens and this was noticed
only when changing themes, like using hard-coded "white" instead of
"greyscale-000".
This commit is contained in:
Nathan Vasse
2023-09-26 11:38:47 +02:00
committed by NathanVss
parent cce8eccf5b
commit e2c0d3259b
7 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react/src/components/Forms/Checkbox/tokens.ts
View File

@@ -2,7 +2,7 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => ({ export const tokens = (defaults: DefaultTokens) => ({
"background-color--hover": defaults.theme.colors["greyscale-200"], "background-color--hover": defaults.theme.colors["greyscale-200"],
"background-color": "white", "background-color": defaults.theme.colors["greyscale-000"],
"font-size": defaults.theme.font.sizes.m, "font-size": defaults.theme.font.sizes.m,
"font-weight": defaults.theme.font.weights.medium, "font-weight": defaults.theme.font.weights.medium,
color: defaults.theme.colors["greyscale-900"], color: defaults.theme.colors["greyscale-900"],

4
packages/react/src/components/Forms/DatePicker/tokens.ts
View File

@@ -18,8 +18,8 @@ export const tokens = (defaults: DefaultTokens) => ({
"item-background-color--selected": defaults.theme.colors["primary-100"], "item-background-color--selected": defaults.theme.colors["primary-100"],
"item-color": defaults.theme.colors["greyscale-800"], "item-color": defaults.theme.colors["greyscale-800"],
"item-font-size": defaults.theme.font.sizes.l, "item-font-size": defaults.theme.font.sizes.l,
"background-color": "white", "background-color": defaults.theme.colors["greyscale-000"],
"menu-background-color": "white", "menu-background-color": defaults.theme.colors["greyscale-000"],
"range-selection-background-color": defaults.theme.colors["primary-100"], "range-selection-background-color": defaults.theme.colors["primary-100"],
"range-selection-background-color--disabled": "range-selection-background-color--disabled":
defaults.theme.colors["greyscale-100"], defaults.theme.colors["greyscale-100"],

4
packages/react/src/components/Forms/FileUploader/tokens.ts
View File

@@ -1,7 +1,7 @@
import { DefaultTokens } from "@openfun/cunningham-tokens"; import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => ({ export const tokens = (defaults: DefaultTokens) => ({
"background-color": "white", "background-color": defaults.theme.colors["greyscale-000"],
"border-color": defaults.theme.colors["greyscale-300"], "border-color": defaults.theme.colors["greyscale-300"],
"border-radius": "0.5rem", "border-radius": "0.5rem",
"border-width": "2px", "border-width": "2px",
@@ -18,7 +18,7 @@ export const tokens = (defaults: DefaultTokens) => ({
"file-border-color": defaults.theme.colors["greyscale-300"], "file-border-color": defaults.theme.colors["greyscale-300"],
"file-border-width": "1px", "file-border-width": "1px",
"file-border-radius": "0.5rem", "file-border-radius": "0.5rem",
"file-background-color": "white", "file-background-color": defaults.theme.colors["greyscale-000"],
"file-specs-size": "0.6875rem", "file-specs-size": "0.6875rem",
"file-specs-color": defaults.theme.colors["greyscale-600"], "file-specs-color": defaults.theme.colors["greyscale-600"],
}); });

2
packages/react/src/components/Forms/Input/tokens.ts
View File

@@ -12,7 +12,7 @@ export const tokens = (defaults: DefaultTokens) => ({
"border-color--focus": defaults.theme.colors["primary-600"], "border-color--focus": defaults.theme.colors["primary-600"],
"border-style": "solid", "border-style": "solid",
"label-color--focus": defaults.theme.colors["primary-600"], "label-color--focus": defaults.theme.colors["primary-600"],
"background-color": "white", "background-color": defaults.theme.colors["greyscale-000"],
"value-color": defaults.theme.colors["greyscale-900"], "value-color": defaults.theme.colors["greyscale-900"],
"value-color--disabled": defaults.theme.colors["greyscale-800"], "value-color--disabled": defaults.theme.colors["greyscale-800"],
}); });

2
packages/react/src/components/Forms/Radio/tokens.ts
View File

@@ -3,5 +3,5 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => ({ export const tokens = (defaults: DefaultTokens) => ({
"border-color": defaults.theme.colors["greyscale-300"], "border-color": defaults.theme.colors["greyscale-300"],
"accent-color": defaults.theme.colors["success-600"], "accent-color": defaults.theme.colors["success-600"],
"background-color": "white", "background-color": defaults.theme.colors["greyscale-000"],
}); });

1
packages/react/src/components/Forms/Select/index.scss
View File

@@ -58,6 +58,7 @@
margin: 0; margin: 0;
color: var(--c--components--forms-select--color); color: var(--c--components--forms-select--color);
font-size: var(--c--components--forms-select--font-size); font-size: var(--c--components--forms-select--font-size);
background-color: var(--c--components--forms-select--background-color);
} }
} }

4
packages/react/src/components/Forms/Select/tokens.ts
View File

@@ -18,8 +18,8 @@ export const tokens = (defaults: DefaultTokens) => ({
"item-color": defaults.theme.colors["greyscale-800"], "item-color": defaults.theme.colors["greyscale-800"],
"item-color--disabled": defaults.theme.colors["greyscale-500"], "item-color--disabled": defaults.theme.colors["greyscale-500"],
"item-font-size": defaults.theme.font.sizes.l, "item-font-size": defaults.theme.font.sizes.l,
"background-color": "white", "background-color": defaults.theme.colors["greyscale-000"],
"menu-background-color": "white", "menu-background-color": defaults.theme.colors["greyscale-000"],
"label-color--focus": defaults.theme.colors["primary-600"], "label-color--focus": defaults.theme.colors["primary-600"],
"multi-pill-background-color": defaults.theme.colors["greyscale-200"], "multi-pill-background-color": defaults.theme.colors["greyscale-200"],
"multi-pill-border-radius": "2px", "multi-pill-border-radius": "2px",