mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
(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
This commit is contained in:
parent
95bb03ea33
commit
6ccc195330
@ -160,5 +160,4 @@ const cssLinkRow = styled('div', `
|
||||
|
||||
const cssDatepickerContainer = styled('div', `
|
||||
padding-top: 16px;
|
||||
background-color: white;
|
||||
`);
|
||||
|
@ -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');
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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 = {
|
||||
|
@ -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<ThemePrefs>;
|
||||
|
@ -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',
|
||||
};
|
||||
|
@ -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',
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user