From 6ccc195330aa79b398874c99c565a5617c91dae7 Mon Sep 17 00:00:00 2001 From: George Gevoian Date: Tue, 31 Jan 2023 00:23:48 -0500 Subject: [PATCH] (core) Add dark theme to date picker 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 --- app/client/ui/ColumnFilterCalendarView.ts | 1 - app/client/ui2018/cssVars.ts | 22 +++++++ app/client/widgets/DateTimeEditor.css | 77 +++++++++++++++++++++++ app/common/ThemePrefs-ti.ts | 10 +++ app/common/ThemePrefs.ts | 12 ++++ app/common/themes/GristDark.ts | 12 ++++ app/common/themes/GristLight.ts | 12 ++++ 7 files changed, 145 insertions(+), 1 deletion(-) diff --git a/app/client/ui/ColumnFilterCalendarView.ts b/app/client/ui/ColumnFilterCalendarView.ts index a05234f1..7e68335e 100644 --- a/app/client/ui/ColumnFilterCalendarView.ts +++ b/app/client/ui/ColumnFilterCalendarView.ts @@ -160,5 +160,4 @@ const cssLinkRow = styled('div', ` const cssDatepickerContainer = styled('div', ` padding-top: 16px; - background-color: white; `); diff --git a/app/client/ui2018/cssVars.ts b/app/client/ui2018/cssVars.ts index 4014739a..f1413f2a 100644 --- a/app/client/ui2018/cssVars.ts +++ b/app/client/ui2018/cssVars.ts @@ -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'); diff --git a/app/client/widgets/DateTimeEditor.css b/app/client/widgets/DateTimeEditor.css index bd3c069f..bf86319e 100644 --- a/app/client/widgets/DateTimeEditor.css +++ b/app/client/widgets/DateTimeEditor.css @@ -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; +} diff --git a/app/common/ThemePrefs-ti.ts b/app/common/ThemePrefs-ti.ts index c4df2c01..92a3a542 100644 --- a/app/common/ThemePrefs-ti.ts +++ b/app/common/ThemePrefs-ti.ts @@ -332,6 +332,16 @@ export const ThemeColors = t.iface([], { "comments-panel-topic-bg": "string", "comments-panel-topic-border": "string", "comments-panel-resolved-topic-bg": "string", + "date-picker-selected-fg": "string", + "date-picker-selected-bg": "string", + "date-picker-selected-bg-hover": "string", + "date-picker-today-fg": "string", + "date-picker-today-bg": "string", + "date-picker-today-bg-hover": "string", + "date-picker-range-start-end-bg": "string", + "date-picker-range-start-end-bg-hover": "string", + "date-picker-range-bg": "string", + "date-picker-range-bg-hover": "string", }); const exportedTypeSuite: t.ITypeSuite = { diff --git a/app/common/ThemePrefs.ts b/app/common/ThemePrefs.ts index 296d69f7..74650c32 100644 --- a/app/common/ThemePrefs.ts +++ b/app/common/ThemePrefs.ts @@ -434,6 +434,18 @@ export interface ThemeColors { 'comments-panel-topic-bg': string; 'comments-panel-topic-border': string; 'comments-panel-resolved-topic-bg': string; + + /* Date Picker */ + 'date-picker-selected-fg': string; + 'date-picker-selected-bg': string; + 'date-picker-selected-bg-hover': string; + 'date-picker-today-fg': string; + 'date-picker-today-bg': string; + 'date-picker-today-bg-hover': string; + 'date-picker-range-start-end-bg': string; + 'date-picker-range-start-end-bg-hover': string; + 'date-picker-range-bg': string; + 'date-picker-range-bg-hover': string; } export const ThemePrefsChecker = createCheckers(ThemePrefsTI).ThemePrefs as CheckerT; diff --git a/app/common/themes/GristDark.ts b/app/common/themes/GristDark.ts index 1a074e8a..d3d8deda 100644 --- a/app/common/themes/GristDark.ts +++ b/app/common/themes/GristDark.ts @@ -413,4 +413,16 @@ export const GristDark: ThemeColors = { 'comments-panel-topic-bg': '#32323F', 'comments-panel-topic-border': '#555563', 'comments-panel-resolved-topic-bg': '#262634', + + /* Date Picker */ + 'date-picker-selected-fg': '#FFFFFF', + 'date-picker-selected-bg': '#7F7F7F', + 'date-picker-selected-bg-hover': '#8F8F8F', + 'date-picker-today-fg': '#FFFFFF', + 'date-picker-today-bg': '#1DA270', + 'date-picker-today-bg-hover': '#157A54', + 'date-picker-range-start-end-bg': '#7F7F7F', + 'date-picker-range-start-end-bg-hover': '#8F8F8F', + 'date-picker-range-bg': '#57575F', + 'date-picker-range-bg-hover': '#7F7F7F', }; diff --git a/app/common/themes/GristLight.ts b/app/common/themes/GristLight.ts index 46abb9f4..ffc91049 100644 --- a/app/common/themes/GristLight.ts +++ b/app/common/themes/GristLight.ts @@ -413,4 +413,16 @@ export const GristLight: ThemeColors = { 'comments-panel-topic-bg': 'white', 'comments-panel-topic-border': '#ccc', 'comments-panel-resolved-topic-bg': '#F0F0F0', + + /* Date Picker */ + 'date-picker-selected-fg': '#262633', + 'date-picker-selected-bg': '#D9D9D9', + 'date-picker-selected-bg-hover': '#CFCFCF', + 'date-picker-today-fg': '#FFFFFF', + 'date-picker-today-bg': '#16B378', + 'date-picker-today-bg-hover': '#009058', + 'date-picker-range-start-end-bg': '#D9D9D9', + 'date-picker-range-start-end-bg-hover': '#CFCFCF', + 'date-picker-range-bg': '#EEEEEE', + 'date-picker-range-bg-hover': '#D9D9D9', };