studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a46d28f00a8a332d7e2b3081aa5f2e2f21a29280
cunningham/packages/react/src/components/Forms/Select/tokens.ts

29 lines
1.3 KiB
TypeScript
Raw Normal View History

✨(react) add Select component Finally our powerful Select component is available to make great forms!
2023-05-05 16:04:50 +02:00
import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => ({
"border-color": defaults.theme.colors["greyscale-300"],
"border-color--focus": defaults.theme.colors["primary-600"],
"border-color--hover": defaults.theme.colors["greyscale-500"],
"border-radius": "8px",
"border-radius--focus": "2px",
"border-radius--hover": "2px",
"border-style": "solid",
💄(react) reduce inputs borders We do this in order to have homogenous border accross the entire library, before we had DataGrid with 1px border and inputs with 2px borders, which was not really nice to the eye.
2023-05-25 15:41:47 +02:00
"border-width": "1px",
💄(react) homogenize form fields colors Based on the QA feedbacks we figured out that form fields were not all using the exact same greyscale colors.
2023-09-06 16:19:36 +02:00
"value-color": defaults.theme.colors["greyscale-900"],
"value-color--disabled": defaults.theme.colors["greyscale-800"],
✨(react) add Select component Finally our powerful Select component is available to make great forms!
2023-05-05 16:04:50 +02:00
"font-size": defaults.theme.font.sizes.l,
height: "3.5rem",
"item-background-color--hover": defaults.theme.colors["greyscale-200"],
"item-background-color--selected": defaults.theme.colors["primary-100"],
"item-color": defaults.theme.colors["greyscale-800"],
✨(react) add disable property to select option Based on recent feedbacks, this feature was needed for consumer apps. Resolve #60
2023-05-19 12:09:14 +02:00
"item-color--disabled": defaults.theme.colors["greyscale-500"],
✨(react) add Select component Finally our powerful Select component is available to make great forms!
2023-05-05 16:04:50 +02:00
"item-font-size": defaults.theme.font.sizes.l,
"background-color": "white",
"menu-background-color": "white",
💄(react) change label color when focused ( select, input ) We forgot to implement this behavior when coding these inputs.
2023-05-22 14:53:35 +02:00
"label-color--focus": defaults.theme.colors["primary-600"],
✨(react) add multi select Adding this new variant makes necessary to reorganize the files to keep a clear separations of concerns. As of now Select/index.tsx is just an entrypoint to render either the mono or multi variant of the select.
2023-06-12 14:27:40 +02:00
"multi-pill-background-color": defaults.theme.colors["greyscale-200"],
"multi-pill-border-radius": "2px",
✨(react) max width for multi select pills In order to prevent a pill with a long text to stack below the actions div we decided to introduce the concept of max-width for pills.
2023-06-15 17:49:49 +02:00
"multi-pill-max-width": "68%",
💄(react) make multi select height homogeneous Some discussion appeared about the fact the multi select was changing height when pill were selected, making this input having a bigger height than others making it looks weird in a form comparing to the others. Modifying the padding and font size make the input keep the same height. See #114
2023-09-28 12:20:03 +02:00
"multi-pill-font-size": defaults.theme.font.sizes.m,
✨(react) add Select component Finally our powerful Select component is available to make great forms!
2023-05-05 16:04:50 +02:00
});
Reference in New Issue Copy Permalink