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

💄(react) add styling for range selection on a cell

Browse Source 
Integrate new styling classes for grid-cells to facilitate range selection
in the DatePicker component. This implementation improves the visual
representation and user experience of selecting a range. In addition,
outside-month cells are now hidden, to avoid having a range selection
that contains outside-month cells.
This commit is contained in:
Lebaud Antoine
2023-06-14 19:38:17 +02:00
committed by aleb_the_flash
parent 87ec3a5061
commit 2886f0c992
9 changed files with 178 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -78,6 +78,13 @@
--c--theme--font--sizes--l: 1rem;
--c--theme--font--sizes--m: 0.8125rem;
--c--theme--font--sizes--s: 0.6875rem;
--c--theme--font--weights--thin: 200;
--c--theme--font--weights--light: 300;
--c--theme--font--weights--regular: 400;
--c--theme--font--weights--medium: 500;
--c--theme--font--weights--bold: 600;
--c--theme--font--weights--extrabold: 700;
--c--theme--font--weights--black: 800;
--c--theme--font--families--base: "Roboto Flex Variable", sans-serif;
--c--theme--font--families--accent: "Roboto Flex Variable", sans-serif;
--c--theme--spacings--xl: 4rem;
@@ -122,6 +129,7 @@
--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-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;
--c--components--forms-input--border-radius--hover: 2px;
@@ -147,6 +155,7 @@
--c--components--forms-fileuploader--text-size: 0.6875rem;
--c--components--forms-fileuploader--file-text-size: 0.8125rem;
--c--components--forms-fileuploader--file-text-color: var(--c--theme--colors--greyscale-900);
--c--components--forms-fileuploader--file-text-weight: var(--c--theme--font--weights--light);
--c--components--forms-fileuploader--file-border-color: var(--c--theme--colors--greyscale-300);
--c--components--forms-fileuploader--file-border-width: 1px;
--c--components--forms-fileuploader--file-border-radius: 0.5rem;
@@ -173,11 +182,14 @@
--c--components--forms-datepicker--item-font-size: var(--c--theme--font--sizes--l);
--c--components--forms-datepicker--background-color: white;
--c--components--forms-datepicker--menu-background-color: white;
--c--components--forms-datepicker--range-selection-background-color: var(--c--theme--colors--primary-100);
--c--components--forms-datepicker--range-selection-background-color--disabled: var(--c--theme--colors--greyscale-100);
--c--components--forms-datepicker--grid-cell--border-color--today: var(--c--theme--colors--primary-600);
--c--components--forms-datepicker--grid-cell--color--today: var(--c--theme--colors--primary-600);
--c--components--forms-checkbox--background-color--hover: var(--c--theme--colors--greyscale-200);
--c--components--forms-checkbox--background-color: white;
--c--components--forms-checkbox--font-size: var(--c--theme--font--sizes--m);
--c--components--forms-checkbox--font-weight: var(--c--theme--font--weights--medium);
--c--components--forms-checkbox--color: var(--c--theme--colors--greyscale-900);
--c--components--forms-checkbox--border-color: var(--c--theme--colors--greyscale-300);
--c--components--forms-checkbox--border-radius: 2px;
@@ -189,4 +201,5 @@
--c--components--button--small-height: 32px;
--c--components--button--medium-font-size: var(--c--theme--font--sizes--l);
--c--components--button--small-font-size: var(--c--theme--font--sizes--m);
--c--components--button--font-weight: var(--c--theme--font--weights--regular);
}