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

💄(react) homogenize form fields colors

Browse Source 
Based on the QA feedbacks we figured out that form fields were not all
using the exact same greyscale colors.
This commit is contained in:
Nathan Vasse
2023-09-06 16:19:36 +02:00
committed by NathanVss
parent 4c64cb3993
commit 1c45b93a85
21 changed files with 76 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/shiny-tomatoes-cross.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@openfun/cunningham-react": minor
---
homogenize form fields colors

1
packages/react/src/components/Forms/DatePicker/DatePicker.tsx
View File

@@ -77,6 +77,7 @@ export const DatePicker = (props: DatePickerProps) => {
label: props.label,
labelAsPlaceholder,
onFocusChange: setIsFocused,
disabled: props.disabled,
}}
/>
</DatePickerAux>

2
packages/react/src/components/Forms/DatePicker/DateRangePicker.tsx
View File

@@ -96,6 +96,7 @@ export const DateRangePicker = ({
label: startLabel,
labelAsPlaceholder,
onFocusChange: setIsFocused,
disabled: props.disabled,
}}
/>
<div className="c__date-picker__range__separator" />
@@ -105,6 +106,7 @@ export const DateRangePicker = ({
label: endLabel,
labelAsPlaceholder,
onFocusChange: setIsFocused,
disabled: props.disabled,
}}
/>
</DatePickerAux>

3
packages/react/src/components/Forms/DatePicker/index.mdx
View File

@@ -168,7 +168,8 @@ Here are the custom design tokens defined by the datepicker.
| border-width | Border width of the datepicker |
| border-radius--hover | Border radius of the datepicker on mouse hover |
| border-radius--focus | Border radius of the datepicker when focused |
| color | Value color |
| value-color | Value color |
| value-color--disabled | Value color when disabled |
| font-size | Value font size |
| height | Height of the combo box |
| item-background-color--hover | Background color of the item on mouse hover (months/years menus) |

15
packages/react/src/components/Forms/DatePicker/index.scss
View File

@@ -11,11 +11,9 @@
border-color: var(--c--components--forms-datepicker--border-color);
border-style: var(--c--components--forms-datepicker--border-style);
display: flex;
transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
padding: 0 0.75rem;
gap: 1rem;
color: var(--c--components--forms-datepicker--color);
box-sizing: border-box;
height: var(--c--components--forms-datepicker--height);
background-color: var(--c--components--forms-datepicker--background-color);
@@ -63,6 +61,7 @@
&__value {
display: flex;
font-size: var(--c--components--forms-datepicker--font-size);
color: var(--c--components--forms-datepicker--value-color);
overflow: hidden;
flex-grow: 1;
@@ -99,23 +98,23 @@
&--disabled {
.c__date-picker__wrapper {
color: var(--c--theme--colors--greyscale-600);
border-color: var(--c--theme--colors--greyscale-300);
border-color: var(--c--components--forms-datepicker--border-color--disabled);
cursor: default;
pointer-events: none;
label {
color: var(--c--theme--colors--greyscale-400);
}
&__toggle {
color: var(--c--theme--colors--greyscale-400);
}
.c__date-picker__inner {
color: var(--c--theme--colors--greyscale-600);
&__action {
color: var(--c--theme--colors--greyscale-400);
}
&__value {
color: var(--c--components--forms-datepicker--value-color--disabled);
}
}
label {

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

@@ -2,6 +2,7 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => ({
"border-color": defaults.theme.colors["greyscale-300"],
"border-color--disabled": defaults.theme.colors["greyscale-200"],
"border-color--focus": defaults.theme.colors["primary-600"],
"border-color--hover": defaults.theme.colors["greyscale-500"],
"border-radius": "8px",
@@ -9,7 +10,8 @@ export const tokens = (defaults: DefaultTokens) => ({
"border-radius--hover": "2px",
"border-style": "solid",
"border-width": "1px",
color: defaults.theme.colors["greyscale-800"],
"value-color": defaults.theme.colors["greyscale-900"],
"value-color--disabled": defaults.theme.colors["greyscale-800"],
"font-size": defaults.theme.font.sizes.l,
height: "3.5rem",
"item-background-color--hover": defaults.theme.colors["greyscale-200"],

3
packages/react/src/components/Forms/Input/index.mdx
View File

@@ -128,7 +128,8 @@ Here are the custom design tokens defined by the button.
|--------------- |----------------------------- |
| font-weight | Value font weight |
| font-size | Value font size |
| color | Value color |
| value-color | Value color |
| value-color--disabled | Value color when disabled |
| border-radius | Border radius of the input |
| border-radius--hover | Border radius of the input on mouse hover |
| border-radius--focus | Border radius of the input when focused |

9
packages/react/src/components/Forms/Input/index.scss
View File

@@ -9,7 +9,6 @@
padding: 0 1rem;
gap: 1rem;
cursor: text;
color: var(--c--components--forms-input--color);
box-sizing: border-box;
height: 3.5rem;
@@ -22,7 +21,7 @@
box-sizing: border-box;
outline: 0;
border: none;
color: var(--c--theme--colors--greyscale-800);
color: var(--c--components--forms-input--value-color);
flex-grow: 1;
text-overflow: ellipsis;
background-color: transparent;
@@ -88,11 +87,11 @@
&--disabled {
cursor: default;
color: var(--c--theme--colors--greyscale-400);
border-color: var(--c--theme--colors--greyscale-200);
.c__input, .labelled-box label {
color: var(--c--theme--colors--greyscale-600);
.c__input {
color: var(--c--components--forms-input--value-color--disabled);
}
&:hover {

1
packages/react/src/components/Forms/Input/index.tsx
View File

@@ -90,6 +90,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
label={label}
htmlFor={idToUse.current}
labelAsPlaceholder={labelAsPlaceholder}
disabled={props.disabled}
>
<input
type="text"

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

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

14
packages/react/src/components/Forms/LabelledBox/index.scss
View File

@@ -14,12 +14,12 @@
left: 0;
top: 0.5rem;
transition: all var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
color: var(--c--theme--colors--greyscale-900);
opacity: 0.8;
color: var(--c--components--forms-labelledbox--label-color--small);
&.placeholder {
@extend %text-style;
top: 16px;
color: var(--c--components--forms-labelledbox--label-color--big);
}
}
@@ -54,4 +54,14 @@
padding: 0;
}
}
&--disabled {
label {
color: var(--c--components--forms-labelledbox--label-color--small--disabled);
&.placeholder {
color: var(--c--components--forms-labelledbox--label-color--big--disabled);
}
}
}
}

3
packages/react/src/components/Forms/LabelledBox/index.tsx
View File

@@ -8,6 +8,7 @@ export interface Props extends PropsWithChildren {
labelId?: string;
hideLabel?: boolean;
horizontal?: boolean;
disabled?: boolean;
}
export const LabelledBox = ({
@@ -18,12 +19,14 @@ export const LabelledBox = ({
labelId,
hideLabel,
horizontal,
disabled,
}: Props) => {
return (
<div
className={classNames("labelled-box", {
"labelled-box--no-label": hideLabel,
"labelled-box--horizontal": horizontal,
"labelled-box--disabled": disabled,
})}
>
{label && (

8
packages/react/src/components/Forms/LabelledBox/tokens.ts
View File

@@ -0,0 +1,8 @@
import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => ({
"label-color--small": defaults.theme.colors["greyscale-600"],
"label-color--big": defaults.theme.colors["greyscale-900"],
"label-color--small--disabled": defaults.theme.colors["greyscale-600"],
"label-color--big--disabled": defaults.theme.colors["greyscale-600"],
});

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

@@ -12,7 +12,6 @@
transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
padding: 0 0.75rem;
gap: 1rem;
color: var(--c--components--forms-select--color);
box-sizing: border-box;
height: var(--c--components--forms-select--height);
cursor: pointer;
@@ -50,6 +49,7 @@
text-overflow: ellipsis;
flex-grow: 1;
font-size: var(--c--components--forms-select--font-size);
color: var(--c--components--forms-select--value-color);
input {
outline: 0;
@@ -147,13 +147,15 @@
&--disabled {
.c__select__wrapper {
color: var(--c--theme--colors--greyscale-600);
border-color: var(--c--theme--colors--greyscale-200);
cursor: default;
label, input {
cursor: default;
color: var(--c--theme--colors--greyscale-600);
}
.c__select__inner__value {
color: var(--c--components--forms-select--value-color--disabled)
}
}

1
packages/react/src/components/Forms/Select/mono-common.tsx
View File

@@ -123,6 +123,7 @@ export const SelectMonoAux = ({
labelAsPlaceholder={labelAsPlaceholder}
htmlFor={labelProps.htmlFor}
labelId={labelProps.id}
disabled={disabled}
>
<div className="c__select__inner">
<div className="c__select__inner__value">{children}</div>

3
packages/react/src/components/Forms/Select/mono.mdx
View File

@@ -141,7 +141,8 @@ Here are the custom design tokens defined by the select.
| border-radius--focus | Border radius of the select when focused |
| border-style | Border style of the select |
| border-width | Border width of the select |
| color | Value color |
| value-color | Value color |
| value-color--disabled | Value color when disabled |
| font-size | Value font size |
| height | Height of the combo box |
| item-background-color--hover | Background color of the item on mouse hover |

1
packages/react/src/components/Forms/Select/multi-common.tsx
View File

@@ -108,6 +108,7 @@ export const SelectMultiAux = ({
htmlFor={labelProps.htmlFor}
labelId={labelProps.id}
hideLabel={hideLabel}
disabled={disabled}
>
<div className="c__select__inner">
<div className="c__select__inner__actions">

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

@@ -9,7 +9,8 @@ export const tokens = (defaults: DefaultTokens) => ({
"border-radius--hover": "2px",
"border-style": "solid",
"border-width": "1px",
color: defaults.theme.colors["greyscale-800"],
"value-color": defaults.theme.colors["greyscale-900"],
"value-color--disabled": defaults.theme.colors["greyscale-800"],
"font-size": defaults.theme.font.sizes.l,
height: "3.5rem",
"item-background-color--hover": defaults.theme.colors["greyscale-200"],

14
packages/react/src/cunningham-tokens.css
View File

@@ -121,7 +121,8 @@
--c--components--forms-select--border-radius--hover: 2px;
--c--components--forms-select--border-style: solid;
--c--components--forms-select--border-width: 1px;
--c--components--forms-select--color: var(--c--theme--colors--greyscale-800);
--c--components--forms-select--value-color: var(--c--theme--colors--greyscale-900);
--c--components--forms-select--value-color--disabled: var(--c--theme--colors--greyscale-800);
--c--components--forms-select--font-size: var(--c--theme--font--sizes--l);
--c--components--forms-select--height: 3.5rem;
--c--components--forms-select--item-background-color--hover: var(--c--theme--colors--greyscale-200);
@@ -138,6 +139,10 @@
--c--components--forms-radio--border-color: var(--c--theme--colors--greyscale-300);
--c--components--forms-radio--accent-color: var(--c--theme--colors--success-700);
--c--components--forms-radio--background-color: white;
--c--components--forms-labelledbox--label-color--small: var(--c--theme--colors--greyscale-600);
--c--components--forms-labelledbox--label-color--big: var(--c--theme--colors--greyscale-900);
--c--components--forms-labelledbox--label-color--small--disabled: var(--c--theme--colors--greyscale-600);
--c--components--forms-labelledbox--label-color--big--disabled: var(--c--theme--colors--greyscale-600);
--c--components--forms-input--font-weight: var(--c--theme--font--weights--regular);
--c--components--forms-input--font-size: var(--c--theme--font--sizes--l);
--c--components--forms-input--border-radius: 8px;
@@ -148,9 +153,10 @@
--c--components--forms-input--border-color--hover: var(--c--theme--colors--greyscale-500);
--c--components--forms-input--border-color--focus: var(--c--theme--colors--primary-600);
--c--components--forms-input--border-style: solid;
--c--components--forms-input--color: var(--c--theme--colors--greyscale-800);
--c--components--forms-input--label-color--focus: var(--c--theme--colors--primary-600);
--c--components--forms-input--background-color: white;
--c--components--forms-input--value-color: var(--c--theme--colors--greyscale-900);
--c--components--forms-input--value-color--disabled: var(--c--theme--colors--greyscale-800);
--c--components--forms-fileuploader--background-color: white;
--c--components--forms-fileuploader--border-color: var(--c--theme--colors--greyscale-300);
--c--components--forms-fileuploader--border-radius: 0.5rem;
@@ -175,6 +181,7 @@
--c--components--forms-field--font-size: var(--c--theme--font--sizes--s);
--c--components--forms-field--color: var(--c--theme--colors--greyscale-600);
--c--components--forms-datepicker--border-color: var(--c--theme--colors--greyscale-300);
--c--components--forms-datepicker--border-color--disabled: var(--c--theme--colors--greyscale-200);
--c--components--forms-datepicker--border-color--focus: var(--c--theme--colors--primary-600);
--c--components--forms-datepicker--border-color--hover: var(--c--theme--colors--greyscale-500);
--c--components--forms-datepicker--border-radius: 8px;
@@ -182,7 +189,8 @@
--c--components--forms-datepicker--border-radius--hover: 2px;
--c--components--forms-datepicker--border-style: solid;
--c--components--forms-datepicker--border-width: 1px;
--c--components--forms-datepicker--color: var(--c--theme--colors--greyscale-800);
--c--components--forms-datepicker--value-color: var(--c--theme--colors--greyscale-900);
--c--components--forms-datepicker--value-color--disabled: var(--c--theme--colors--greyscale-800);
--c--components--forms-datepicker--font-size: var(--c--theme--font--sizes--l);
--c--components--forms-datepicker--height: 3.5rem;
--c--components--forms-datepicker--item-background-color--hover: var(--c--theme--colors--greyscale-200);

2
packages/react/src/cunningham-tokens.js
View File

File diff suppressed because one or more lines are too long

2
packages/react/src/cunningham-tokens.ts
View File

File diff suppressed because one or more lines are too long