a46d28f00a
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
29 lines
1.3 KiB
TypeScript
29 lines
1.3 KiB
TypeScript
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",
|
|
"border-width": "1px",
|
|
"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"],
|
|
"item-background-color--selected": defaults.theme.colors["primary-100"],
|
|
"item-color": defaults.theme.colors["greyscale-800"],
|
|
"item-color--disabled": defaults.theme.colors["greyscale-500"],
|
|
"item-font-size": defaults.theme.font.sizes.l,
|
|
"background-color": "white",
|
|
"menu-background-color": "white",
|
|
"label-color--focus": defaults.theme.colors["primary-600"],
|
|
"multi-pill-background-color": defaults.theme.colors["greyscale-200"],
|
|
"multi-pill-border-radius": "2px",
|
|
"multi-pill-max-width": "68%",
|
|
"multi-pill-font-size": defaults.theme.font.sizes.m,
|
|
});
|