Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2026-03-02 04:09:24 +00:00
Code Issues Projects Releases Wiki Activity

(core) Add dark theme to date picker

Browse Source 
Summary:
Updates the date picker to use a dark theme when dark mode
is enabled.

Test Plan: Manual.

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D3780
This commit is contained in:
George Gevoian
2023-01-31 00:23:48 -05:00
parent 95bb03ea33
commit 6ccc195330
7 changed files with 145 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/client/ui/ColumnFilterCalendarView.ts
View File

@@ -160,5 +160,4 @@ const cssLinkRow = styled('div', `
const cssDatepickerContainer = styled('div', `
padding-top: 16px;
background-color: white;
`);

22
app/client/ui2018/cssVars.ts
View File

@@ -667,6 +667,28 @@ export const theme = {
commentsPanelTopicBorder: new CustomProp('theme-comments-panel-topic-border', undefined, '#ccc'),
commentsPanelResolvedTopicBg: new CustomProp('theme-comments-panel-resolved-topic-bg', undefined,
vars.labelActiveBg),
/* Date Picker */
datePickerSelectedFg: new CustomProp('theme-date-picker-selected-fg', undefined,
colors.light),
datePickerSelectedBg: new CustomProp('theme-date-picker-selected-bg', undefined,
'#286090'),
datePickerSelectedBgHover: new CustomProp('theme-date-picker-selected-bg-hover',
undefined, '#204d74'),
datePickerTodayFg: new CustomProp('theme-date-picker-today-fg', undefined,
colors.light),
datePickerTodayBg: new CustomProp('theme-date-picker-today-bg', undefined,
colors.lightGreen),
datePickerTodayBgHover: new CustomProp('theme-date-picker-today-bg-hover', undefined,
colors.darkGreen),
datePickerRangeStartEndBg: new CustomProp('theme-date-picker-range-start-end-bg', undefined,
'#777'),
datePickerRangeStartEndBgHover: new CustomProp('theme-date-picker-range-start-end-bg-hover',
undefined, '#5E5E5E'),
datePickerRangeBg: new CustomProp('theme-date-picker-range-bg', undefined,
colors.mediumGreyOpaque),
datePickerRangeBgHover: new CustomProp('theme-date-picker-range-bg-hover', undefined,
colors.darkGrey),
};
const cssColors = values(colors).map(v => v.decl()).join('\n');

77
app/client/widgets/DateTimeEditor.css
View File

@@ -24,5 +24,82 @@
}
.datepicker {
color: var(--grist-theme-text, #333) !important;
background-color: var(--grist-theme-menu-bg, #fff) !important;
outline: none;
}
.datepicker-dropdown {
box-shadow: 0 2px 20px 0 var(--grist-theme-menu-shadow, rgba(38, 38, 51, 0.6));
}
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker .datepicker-switch:hover,
.datepicker .day:hover,
.datepicker .month:hover,
.datepicker .year:hover,
.datepicker .decade:hover,
.datepicker .century:hover,
.datepicker th.today:hover,
.datepicker .focused
{
background: var(--grist-theme-hover, #eee) !important;
}
.datepicker .active {
color: var(--grist-theme-date-picker-selected-fg, #fff) !important;
background-color: var(--grist-theme-date-picker-selected-bg, #286090) !important;
border-color: var(--grist-theme-date-picker-selected-bg, #204d74) !important;
text-shadow: none !important;
}
.datepicker .active:hover {
background-color: var(--grist-theme-date-picker-selected-bg-hover, #204d74) !important;
border-color: var(--grist-theme-date-picker-selected-bg-hover, #122b40) !important;
}
.datepicker .old,
.datepicker .new
{
color: var(--grist-theme-text-light, #777) !important;
}
.datepicker .range-start,
.datepicker .range-end
{
color: var(--grist-theme-text, #fff) !important;
background-color: var(--grist-theme-date-picker-range-start-end-bg, #777) !important;
border-color: var(--grist-theme-date-picker-range-start-end-bg, #555) !important;
text-shadow: none !important;
}
.datepicker .range-start:hover,
.datepicker .range-end:hover
{
background-color: var(--grist-theme-date-picker-range-start-end-bg-hover, #5e5e5e) !important;
border-color: var(--grist-theme-date-picker-range-start-end-bg-hover, #373737) !important;
}
.datepicker .range
{
color: var(--grist-theme-text, #000) !important;
background-color: var(--grist-theme-date-picker-range-bg, #eee) !important;
border-color: var(--grist-theme-date-picker-range-bg, #bbb) !important;
}
.datepicker .range:hover {
background-color: var(--grist-theme-date-picker-range-bg-hover, #d5d5d5) !important;
border-color: var(--grist-theme-date-picker-range-bg-hover, #9d9d9d) !important;
}
.datepicker td.today {
color: var(--grist-theme-date-picker-today-fg, #000) !important;
background-color: var(--grist-theme-date-picker-today-bg, #f7ca77) !important;
border-color: var(--grist-theme-date-picker-today-bg, #f1a417) !important;
text-shadow: none !important;
}
.datepicker td.today:hover {
background-color: var(--grist-theme-date-picker-today-bg-hover, #f4b747) !important;
border-color: var(--grist-theme-date-picker-today-bg-hover, #bf800c) !important;
}