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

🎨(react) enhance DatePicker component styles

Browse Source 
update DatePicker token and css files with new css variables introduce
with the new tokens architectures
This commit is contained in:
Nathan Panchout
2025-08-22 10:12:39 +02:00
committed by NathanVss
parent 91aead45d9
commit 8f71cdb7f9
6 changed files with 137 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
packages/react/src/components/Forms/DatePicker/Calendar.tsx
View File

@@ -117,7 +117,7 @@ const CalendarAux = ({
const monthItems: Array<Option> = useMemo(() => { const monthItems: Array<Option> = useMemo(() => {
// Note that in some calendar systems, such as the Hebrew, the number of months may differ between years. // Note that in some calendar systems, such as the Hebrew, the number of months may differ between years.
const numberOfMonths = state.focusedDate.calendar.getMonthsInYear( const numberOfMonths = state.focusedDate.calendar.getMonthsInYear(
state.focusedDate, state.focusedDate
); );
return range(1, numberOfMonths).map((monthNumber) => { return range(1, numberOfMonths).map((monthNumber) => {
const date = state.focusedDate.set({ month: monthNumber }); const date = state.focusedDate.set({ month: monthNumber });
@@ -133,16 +133,15 @@ const CalendarAux = ({
const yearItems: Array<Option> = useMemo(() => { const yearItems: Array<Option> = useMemo(() => {
const calendarCurrentUser = createCalendar( const calendarCurrentUser = createCalendar(
new Intl.DateTimeFormat().resolvedOptions() new Intl.DateTimeFormat().resolvedOptions().calendar as CalendarIdentifier
.calendar as CalendarIdentifier,
); );
const minDate = toCalendar( const minDate = toCalendar(
new CalendarDate(new GregorianCalendar(), minYear, 1, 1), new CalendarDate(new GregorianCalendar(), minYear, 1, 1),
calendarCurrentUser, calendarCurrentUser
); );
const maxDate = toCalendar( const maxDate = toCalendar(
new CalendarDate(new GregorianCalendar(), maxYear, 12, 31), new CalendarDate(new GregorianCalendar(), maxYear, 12, 31),
calendarCurrentUser, calendarCurrentUser
); );
return range(minDate.year, maxDate.year).map((yearNumber) => { return range(minDate.year, maxDate.year).map((yearNumber) => {
const date = state.focusedDate.set({ year: yearNumber }); const date = state.focusedDate.set({ year: yearNumber });
@@ -158,7 +157,7 @@ const CalendarAux = ({
const useDownshiftSelect = ( const useDownshiftSelect = (
key: string, key: string,
items: Array<Option>, items: Array<Option>
): UseSelectReturnValue<Option> => { ): UseSelectReturnValue<Option> => {
return useSelect({ return useSelect({
items, items,
@@ -215,12 +214,12 @@ const CalendarAux = ({
const getToggleButtonProps = ( const getToggleButtonProps = (
key: string, key: string,
items: Array<Option>, items: Array<Option>,
downshift: UseSelectReturnValue<Option>, downshift: UseSelectReturnValue<Option>
) => ({ ) => ({
...downshift.getToggleButtonProps(), ...downshift.getToggleButtonProps(),
onClick: () => { onClick: () => {
const selectedItem = items.find( const selectedItem = items.find(
(item) => item.value === state.focusedDate[key as keyof CalendarDate], (item) => item.value === state.focusedDate[key as keyof CalendarDate]
); );
if (selectedItem) { if (selectedItem) {
downshift.selectItem(selectedItem); downshift.selectItem(selectedItem);
@@ -228,7 +227,7 @@ const CalendarAux = ({
downshift.toggleMenu(); downshift.toggleMenu();
}, },
"aria-label": t( "aria-label": t(
`components.forms.date_picker.${key}_select_button_aria_label`, `components.forms.date_picker.${key}_select_button_aria_label`
), ),
}); });
@@ -257,13 +256,14 @@ const CalendarAux = ({
<div className="c__calendar__wrapper__header"> <div className="c__calendar__wrapper__header">
<div className="c__calendar__wrapper__header__actions"> <div className="c__calendar__wrapper__header__actions">
<Button <Button
color="tertiary-text" variant="neutral"
color="tertiary"
size="small" size="small"
icon={<span className="material-icons">navigate_before</span>} icon={<span className="material-icons">navigate_before</span>}
{...{ {...{
...prevButtonOtherProps, ...prevButtonOtherProps,
"aria-label": t( "aria-label": t(
"components.forms.date_picker.previous_month_button_aria_label", "components.forms.date_picker.previous_month_button_aria_label"
), ),
}} }}
disabled={isPrevButtonDisabled} disabled={isPrevButtonDisabled}
@@ -272,7 +272,8 @@ const CalendarAux = ({
/> />
<Button <Button
className="c__calendar__wrapper__header__actions__dropdown" className="c__calendar__wrapper__header__actions__dropdown"
color="tertiary-text" variant="neutral"
color="tertiary"
size="small" size="small"
iconPosition="right" iconPosition="right"
icon={<span className="material-icons">arrow_drop_down</span>} icon={<span className="material-icons">arrow_drop_down</span>}
@@ -280,18 +281,19 @@ const CalendarAux = ({
{...getToggleButtonProps("month", monthItems, downshiftMonth)} {...getToggleButtonProps("month", monthItems, downshiftMonth)}
> >
{selectedMonthItemFormatter.format( {selectedMonthItemFormatter.format(
state.focusedDate.toDate(state.timeZone), state.focusedDate.toDate(state.timeZone)
)} )}
</Button> </Button>
<Button <Button
color="tertiary-text" variant="neutral"
color="tertiary"
size="small" size="small"
icon={<span className="material-icons">navigate_next</span>} icon={<span className="material-icons">navigate_next</span>}
type="button" type="button"
{...{ {...{
...nextButtonOtherProps, ...nextButtonOtherProps,
"aria-label": t( "aria-label": t(
"components.forms.date_picker.next_month_button_aria_label", "components.forms.date_picker.next_month_button_aria_label"
), ),
}} }}
disabled={isNextButtonDisabled} disabled={isNextButtonDisabled}
@@ -300,7 +302,8 @@ const CalendarAux = ({
</div> </div>
<div className="c__calendar__wrapper__header__actions"> <div className="c__calendar__wrapper__header__actions">
<Button <Button
color="tertiary-text" variant="neutral"
color="tertiary"
size="small" size="small"
icon={<span className="material-icons">navigate_before</span>} icon={<span className="material-icons">navigate_before</span>}
onClick={() => state.focusPreviousSection(true)} onClick={() => state.focusPreviousSection(true)}
@@ -309,13 +312,14 @@ const CalendarAux = ({
state.minValue.year > state.focusedDate.add({ years: -1 }).year state.minValue.year > state.focusedDate.add({ years: -1 }).year
} }
aria-label={t( aria-label={t(
"components.forms.date_picker.previous_year_button_aria_label", "components.forms.date_picker.previous_year_button_aria_label"
)} )}
type="button" type="button"
/> />
<Button <Button
className="c__calendar__wrapper__header__actions__dropdown" className="c__calendar__wrapper__header__actions__dropdown"
color="tertiary-text" variant="neutral"
color="tertiary"
size="small" size="small"
iconPosition="right" iconPosition="right"
icon={<span className="material-icons">arrow_drop_down</span>} icon={<span className="material-icons">arrow_drop_down</span>}
@@ -323,11 +327,12 @@ const CalendarAux = ({
{...getToggleButtonProps("year", yearItems, downshiftYear)} {...getToggleButtonProps("year", yearItems, downshiftYear)}
> >
{yearItemsFormatter.format( {yearItemsFormatter.format(
state.focusedDate.toDate(state.timeZone), state.focusedDate.toDate(state.timeZone)
)} )}
</Button> </Button>
<Button <Button
color="tertiary-text" variant="neutral"
color="tertiary"
size="small" size="small"
icon={<span className="material-icons">navigate_next</span>} icon={<span className="material-icons">navigate_next</span>}
onClick={() => state.focusNextSection(true)} onClick={() => state.focusNextSection(true)}
@@ -336,7 +341,7 @@ const CalendarAux = ({
state.maxValue.year < state.focusedDate.add({ years: 1 }).year state.maxValue.year < state.focusedDate.add({ years: 1 }).year
} }
aria-label={t( aria-label={t(
"components.forms.date_picker.next_year_button_aria_label", "components.forms.date_picker.next_year_button_aria_label"
)} )}
type="button" type="button"
/> />

7
packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
View File

@@ -58,6 +58,7 @@ export const CalendarCell = ({ state, date }: CalendarCellProps) => {
> >
<Button <Button
size="small" size="small"
variant={isSelected ? "brand" : "neutral"}
color={ color={
( (
isRangeCalendar(state) isRangeCalendar(state)
@@ -65,7 +66,7 @@ export const CalendarCell = ({ state, date }: CalendarCellProps) => {
: isSelected : isSelected
) )
? "primary" ? "primary"
: "tertiary-text" : "tertiary"
} }
className={classNames( className={classNames(
"c__calendar__wrapper__grid__week-row__button", "c__calendar__wrapper__grid__week-row__button",
@@ -74,9 +75,9 @@ export const CalendarCell = ({ state, date }: CalendarCellProps) => {
isSelected, isSelected,
"c__calendar__wrapper__grid__week-row__button--today": isToday( "c__calendar__wrapper__grid__week-row__button--today": isToday(
date, date,
getLocalTimeZone(), getLocalTimeZone()
), ),
}, }
)} )}
type="button" type="button"
disabled={isDisabled} disabled={isDisabled}

18
packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
View File

@@ -76,7 +76,7 @@ const DatePickerAux = ({
const isDateInvalid = useMemo( const isDateInvalid = useMemo(
() => pickerState.validationState === "invalid" || props.state === "error", () => pickerState.validationState === "invalid" || props.state === "error",
[pickerState.validationState, props.state], [pickerState.validationState, props.state]
); );
return ( return (
@@ -114,7 +114,7 @@ const DatePickerAux = ({
name={name && `${name}_start`} name={name && `${name}_start`}
value={convertDateValueToString( value={convertDateValueToString(
pickerState.value?.start ?? null, pickerState.value?.start ?? null,
props.timezone, props.timezone
)} )}
/> />
<input <input
@@ -122,7 +122,7 @@ const DatePickerAux = ({
name={name && `${name}_end`} name={name && `${name}_end`}
value={convertDateValueToString( value={convertDateValueToString(
pickerState.value?.end ?? null, pickerState.value?.end ?? null,
props.timezone, props.timezone
)} )}
/> />
</> </>
@@ -132,7 +132,7 @@ const DatePickerAux = ({
name={name} name={name}
value={convertDateValueToString( value={convertDateValueToString(
pickerState.value, pickerState.value,
props.timezone, props.timezone
)} )}
/> />
)} )}
@@ -148,9 +148,10 @@ const DatePickerAux = ({
aria-label={t( aria-label={t(
pickerState.isOpen pickerState.isOpen
? "components.forms.date_picker.toggle_button_aria_label_close" ? "components.forms.date_picker.toggle_button_aria_label_close"
: "components.forms.date_picker.toggle_button_aria_label_open", : "components.forms.date_picker.toggle_button_aria_label_open"
)} )}
color="tertiary-text" variant="neutral"
color="tertiary"
size="small" size="small"
className="c__date-picker__wrapper__toggle" className="c__date-picker__wrapper__toggle"
icon={ icon={
@@ -166,7 +167,8 @@ const DatePickerAux = ({
"c__date-picker__inner__action--hidden": "c__date-picker__inner__action--hidden":
labelAsPlaceholder || disabled, labelAsPlaceholder || disabled,
})} })}
color="tertiary-text" variant="neutral"
color="tertiary"
size="nano" size="nano"
icon={<span className="material-icons">close</span>} icon={<span className="material-icons">close</span>}
onClick={onClear} onClick={onClear}
@@ -176,7 +178,7 @@ const DatePickerAux = ({
} }
}} }}
aria-label={t( aria-label={t(
"components.forms.date_picker.clear_button_aria_label", "components.forms.date_picker.clear_button_aria_label"
)} )}
disabled={disabled} disabled={disabled}
type="button" type="button"

120
packages/react/src/components/Forms/DatePicker/_index.scss
View File

@@ -1,17 +1,20 @@
@use 'src/utils' as *; @use "src/utils" as *;
@use "../../../utils/responsive" as *; @use "../../../utils/responsive" as *;
.c__date-picker { .c__date-picker {
position: relative; position: relative;
&__wrapper { &__wrapper {
border-radius: var(--c--components--forms-datepicker--border-radius); border-radius: var(--c--components--forms-datepicker--border-radius);
border-width: var(--c--components--forms-datepicker--border-width); border-width: var(--c--components--forms-datepicker--border-width);
border-color: var(--c--components--forms-datepicker--border-color); border-color: var(--c--components--forms-datepicker--border-color);
border-style: var(--c--components--forms-datepicker--border-style); border-style: var(--c--components--forms-datepicker--border-style);
display: flex; display: flex;
transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out), border-radius var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out); transition:
border var(--c--globals--transitions--duration)
var(--c--globals--transitions--ease-out),
border-radius var(--c--globals--transitions--duration)
var(--c--globals--transitions--ease-out);
padding: 0 0.75rem; padding: 0 0.75rem;
gap: 1rem; gap: 1rem;
box-sizing: border-box; box-sizing: border-box;
@@ -51,7 +54,7 @@
margin: -1px; margin: -1px;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
position: absolute position: absolute;
} }
&--clickable { &--clickable {
@@ -71,7 +74,7 @@
} }
&:focus-visible { &:focus-visible {
background-color: var(--c--theme--colors--primary-100); background-color: var(--c--contextuals--background--semantic--brand--tertiary);
outline: none; outline: none;
} }
} }
@@ -92,24 +95,24 @@
} }
} }
/** Modifiers */ /** Modifiers */
&--disabled { &--disabled {
.c__date-picker__wrapper { .c__date-picker__wrapper {
color: var(--c--theme--colors--greyscale-600); color: var(--c--contextuals--content--semantic--disabled--primary);
border-color: var(--c--components--forms-datepicker--border-color--disabled); border-color: var(
--c--components--forms-datepicker--border-color--disabled
);
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
&__toggle { &__toggle {
color: var(--c--theme--colors--greyscale-400); color: var(--c--contextuals--content--semantic--disabled--tertiary);
} }
.c__date-picker__inner { .c__date-picker__inner {
&__action { &__action {
color: var(--c--theme--colors--greyscale-400); color: var(--c--contextuals--content--semantic--disabled--primary);
} }
&__value { &__value {
@@ -125,28 +128,28 @@
&--invalid { &--invalid {
.c__date-picker__wrapper { .c__date-picker__wrapper {
border-color: var(--c--theme--colors--danger-600); border-color: var(--c--contextuals--border--semantic--error--primary);
border-radius: var(--c--components--forms-datepicker--border-radius); border-radius: var(--c--components--forms-datepicker--border-radius);
&__toggle { &__toggle {
color: var(--c--theme--colors--danger-600); color: var(--c--contextuals--content--semantic--error--primary);
} }
label { label {
color: var(--c--theme--colors--danger-600); color: var(--c--contextuals--content--semantic--error--primary);
} }
} }
&:not(.c__date-picker--disabled) { &:not(.c__date-picker--disabled) {
&:hover { &:hover {
.c__date-picker__wrapper { .c__date-picker__wrapper {
border-color: var(--c--theme--colors--danger-800); border-color: var(--c--contextuals--border--semantic--error--secondary);
&__toggle { &__toggle {
color: var(--c--theme--colors--danger-800); color: var(--c--contextuals--content--semantic--error--secondary);
} }
label { label {
color: var(--c--theme--colors--danger-800); color: var(--c--contextuals--content--semantic--error--secondary);
} }
} }
} }
@@ -155,28 +158,28 @@
&--success { &--success {
.c__date-picker__wrapper { .c__date-picker__wrapper {
border-color: var(--c--theme--colors--success-600); border-color: var(--c--contextuals--border--semantic--success--secondary);
border-radius: var(--c--components--forms-datepicker--border-radius); border-radius: var(--c--components--forms-datepicker--border-radius);
&__toggle { &__toggle {
color: var(--c--theme--colors--success-600); color: var(--c--contextuals--content--semantic--success--secondary);
} }
label { label {
color: var(--c--theme--colors--success-600); color: var(--c--contextuals--content--semantic--success--secondary);
} }
} }
&:not(.c__date-picker--disabled) { &:not(.c__date-picker--disabled) {
&:hover { &:hover {
.c__date-picker__wrapper { .c__date-picker__wrapper {
border-color: var(--c--theme--colors--success-800); border-color: var(--c--contextuals--border--semantic--success--primary);
&__toggle { &__toggle {
color: var(--c--theme--colors--success-800); color: var(--c--contextuals--content--semantic--success--primary);
} }
label { label {
color: var(--c--theme--colors--success-800); color: var(--c--contextuals--content--semantic--success--primary);
} }
} }
} }
@@ -186,8 +189,12 @@
&:not(&--focused):not(&--invalid):not(&--disabled):not(&--success) { &:not(&--focused):not(&--invalid):not(&--disabled):not(&--success) {
&:hover { &:hover {
.c__date-picker__wrapper { .c__date-picker__wrapper {
border-radius: var(--c--components--forms-datepicker--border-radius--hover); border-radius: var(
border-color: var(--c--components--forms-datepicker--border-color--hover); --c--components--forms-datepicker--border-radius--hover
);
border-color: var(
--c--components--forms-datepicker--border-color--hover
);
} }
} }
} }
@@ -197,11 +204,17 @@
* than :hover. But here hover has more css specificity, so we need !important. * than :hover. But here hover has more css specificity, so we need !important.
*/ */
@mixin focused-wrapper { @mixin focused-wrapper {
border-radius: var(--c--components--forms-datepicker--border-radius--focus) !important; border-radius: var(
border-color: var(--c--components--forms-datepicker--border-color--focus) !important; --c--components--forms-datepicker--border-radius--focus
) !important;
border-color: var(
--c--components--forms-datepicker--border-color--focus
) !important;
.c__date-picker__wrapper__toggle { .c__date-picker__wrapper__toggle {
color: var(--c--components--forms-datepicker--border-color--focus) !important; color: var(
--c--components--forms-datepicker--border-color--focus
) !important;
} }
label { label {
@@ -230,7 +243,6 @@
// So in order to make this work we use @media for the non-full-width fields and @container for the full-width. // So in order to make this work we use @media for the non-full-width fields and @container for the full-width.
&__container { &__container {
&:not(.c__field--full-width) { &:not(.c__field--full-width) {
min-width: $component-min-width; min-width: $component-min-width;
@@ -244,7 +256,6 @@
} }
&.c__field--full-width { &.c__field--full-width {
.c__date-picker__wrapper { .c__date-picker__wrapper {
// The container-type must absolutely not be parent of the calendar popover or otherwise the popover will // The container-type must absolutely not be parent of the calendar popover or otherwise the popover will
// not be able to float above other DOM elements as a container-type: inline-size defines a new stacking // not be able to float above other DOM elements as a container-type: inline-size defines a new stacking
@@ -253,7 +264,6 @@
} }
@container (max-width: #{$component-min-width}) { @container (max-width: #{$component-min-width}) {
.c__date-picker__wrapper__icon { .c__date-picker__wrapper__icon {
display: none; display: none;
} }
@@ -261,11 +271,8 @@
} }
} }
&__separator { &__separator {
background-color: var(--c--theme--colors--greyscale-400); background-color: var(--c--contextuals--border--semantic--neutral--tertiary);
height: px-to-rem(24px); height: px-to-rem(24px);
width: px-to-rem(1px); width: px-to-rem(1px);
margin: auto; margin: auto;
@@ -273,7 +280,6 @@
} }
} }
.c__calendar { .c__calendar {
display: block; display: block;
transform: translate(2px, 0); transform: translate(2px, 0);
@@ -285,7 +291,9 @@
&--opened { &--opened {
@extend %shadow; @extend %shadow;
background-color: var(--c--components--forms-datepicker--menu-background-color); background-color: var(
--c--components--forms-datepicker--menu-background-color
);
} }
&__header { &__header {
@@ -318,22 +326,25 @@
th { th {
font-weight: var(--c--components--button--font-weight); font-weight: var(--c--components--button--font-weight);
color: var(--c--theme--colors--greyscale-700); color: var(--c--contextuals--content--semantic--neutral--secondary);
} }
} }
&__week-row { &__week-row {
td { td {
padding: 0; padding: 0;
} }
&__background { &__background {
&--range { &--range {
background: var(--c--components--forms-datepicker--range-selection-background-color); background: var(
--c--components--forms-datepicker--range-selection-background-color
);
&:not(&--end):not(&--start):not(&--disabled) button { &:not(&--end):not(&--start):not(&--disabled) button {
color: var(--c--components--forms-datepicker--grid-cell--color--today); color: var(
--c--components--forms-datepicker--grid-cell--color--today
);
} }
&--end { &--end {
@@ -345,16 +356,23 @@
border-bottom-left-radius: 100%; border-bottom-left-radius: 100%;
} }
&--disabled { &--disabled {
background: var(--c--components--forms-datepicker--range-selection-background-color--disabled); background: var(
--c--components--forms-datepicker--range-selection-background-color--disabled
);
} }
} }
} }
&__button { &__button {
&--today { &--today {
border: 1px solid var(--c--components--forms-datepicker--grid-cell--border-color--today); border: 1px solid
var(
--c--components--forms-datepicker--grid-cell--border-color--today
);
} }
&--today:not(&--selected) { &--today:not(&--selected) {
color: var(--c--components--forms-datepicker--grid-cell--color--today); color: var(
--c--components--forms-datepicker--grid-cell--color--today
);
} }
} }
.c__button--small { .c__button--small {
@@ -378,7 +396,9 @@
overflow: auto; overflow: auto;
width: 100%; width: 100%;
max-height: 25rem; max-height: 25rem;
background-color: var(--c--components--forms-datepicker--menu-background-color); background-color: var(
--c--components--forms-datepicker--menu-background-color
);
transform: translate(2px, 0); transform: translate(2px, 0);
display: none; display: none;
z-index: 2; z-index: 2;
@@ -401,15 +421,19 @@
cursor: pointer; cursor: pointer;
&--highlight { &--highlight {
background-color: var(--c--components--forms-datepicker--item-background-color--hover); background-color: var(
--c--components--forms-datepicker--item-background-color--hover
);
} }
&--selected { &--selected {
background-color: var(--c--components--forms-datepicker--item-background-color--selected); background-color: var(
--c--components--forms-datepicker--item-background-color--selected
);
} }
&--disabled { &--disabled {
color: var(--c--theme--colors--greyscale-400); color: var(--c--contextuals--content--semantic--disabled--primary);
pointer-events: none; pointer-events: none;
} }
} }

8
packages/react/src/components/Forms/DatePicker/index.stories.tsx
View File

@@ -117,7 +117,7 @@ export const Controlled = () => {
const [value, setValue] = useState<string | null>("2023-04-25T12:00:00.000Z"); const [value, setValue] = useState<string | null>("2023-04-25T12:00:00.000Z");
return ( return (
<div> <div>
<div className="clr-greyscale-900"> <div className="clr-gray-900">
Value: <span>{value?.toString()}</span> Value: <span>{value?.toString()}</span>
</div> </div>
<DatePicker <DatePicker
@@ -140,7 +140,7 @@ export const ReactHookForm = () => {
resolver: yupResolver( resolver: yupResolver(
Yup.object().shape({ Yup.object().shape({
date: Yup.string().required(), date: Yup.string().required(),
}), })
), ),
}); });
@@ -195,7 +195,7 @@ export const RangeControlled = () => {
]); ]);
return ( return (
<> <>
<div className="clr-greyscale-900">Value: {value?.join(" ")}</div> <div className="clr-gray-900">Value: {value?.join(" ")}</div>
<div <div
style={{ style={{
display: "flex", display: "flex",
@@ -226,7 +226,7 @@ export const RangeControlledFull = () => {
]); ]);
return ( return (
<> <>
<div className="clr-greyscale-900">Value: {value?.join(" ")}</div> <div className="clr-gray-900">Value: {value?.join(" ")}</div>
<div <div
style={{ style={{
display: "flex", display: "flex",

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

@@ -1,29 +1,32 @@
import { DefaultTokens } from "@openfun/cunningham-tokens"; 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.contextuals.border.semantic.neutral.tertiary,
"border-color--disabled": defaults.theme.colors["greyscale-200"], "border-color--disabled": defaults.contextuals.border.semantic.disabled.primary,
"border-color--focus": defaults.theme.colors["primary-600"], "border-color--focus": defaults.contextuals.border.semantic.brand.primary,
"border-color--hover": defaults.theme.colors["greyscale-500"], "border-color--hover": defaults.contextuals.border.semantic.neutral.secondary,
"border-radius": "8px", "border-radius": "8px",
"border-radius--focus": "2px", "border-radius--focus": "2px",
"border-radius--hover": "2px", "border-radius--hover": "2px",
"border-style": "solid", "border-style": "solid",
"border-width": "1px", "border-width": "1px",
"value-color": defaults.theme.colors["greyscale-900"], "value-color": defaults.contextuals.content.semantic.neutral.tertiary,
"value-color--disabled": defaults.theme.colors["greyscale-800"], "value-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
"font-size": defaults.theme.font.sizes.l, "font-size": defaults.globals.font.sizes.lg,
height: "3.5rem", height: "3.5rem",
"item-background-color--hover": defaults.theme.colors["greyscale-200"], "item-background-color--hover":
"item-background-color--selected": defaults.theme.colors["primary-100"], defaults.contextuals.background.semantic.neutral["tertiary-hover"],
"item-color": defaults.theme.colors["greyscale-800"], "item-background-color--selected":
"item-font-size": defaults.theme.font.sizes.l, defaults.contextuals.background.semantic.brand.tertiary,
"background-color": defaults.theme.colors["greyscale-000"], "item-color": defaults.contextuals.content.semantic.neutral.primary,
"menu-background-color": defaults.theme.colors["greyscale-000"], "item-font-size": defaults.globals.font.sizes.md,
"range-selection-background-color": defaults.theme.colors["primary-100"], "background-color": defaults.contextuals.background.surface.primary,
"menu-background-color": defaults.contextuals.background.surface.primary,
"range-selection-background-color":
defaults.contextuals.background.semantic.brand.tertiary,
"range-selection-background-color--disabled": "range-selection-background-color--disabled":
defaults.theme.colors["greyscale-100"], defaults.contextuals.background.semantic.neutral.tertiary,
"grid-cell--border-color--today": defaults.theme.colors["primary-600"], "grid-cell--border-color--today": defaults.contextuals.border.semantic.brand.primary,
"grid-cell--color--today": defaults.theme.colors["primary-600"], "grid-cell--color--today": defaults.contextuals.content.semantic.brand.primary,
"label-color--focus": defaults.theme.colors["primary-600"], "label-color--focus": defaults.contextuals.border.semantic.brand.secondary,
}); });