From 5e6d6768123c92060bc18ede83dec047d20ef132 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Espino?= Date: Tue, 27 Oct 2020 11:40:32 +0100 Subject: [PATCH] Initial support of themes --- webapp/src/components/boardCard.scss | 6 +-- webapp/src/components/button.scss | 2 +- webapp/src/components/cardDetail.scss | 3 +- webapp/src/components/comment.scss | 2 +- webapp/src/components/commentsList.scss | 2 +- webapp/src/components/dialog.scss | 6 +-- webapp/src/components/filterComponent.scss | 4 +- webapp/src/components/sidebar.scss | 9 ++-- webapp/src/components/sidebar.tsx | 37 ++++++++++++++++ webapp/src/components/tableComponent.scss | 14 +++---- webapp/src/components/viewHeader.tsx | 8 ++-- webapp/src/main.tsx | 2 + webapp/src/styles/main.scss | 49 ++++++++++++++-------- webapp/src/theme.ts | 47 +++++++++++++++++++++ webapp/src/widgets/editable.scss | 2 +- webapp/src/widgets/menu/menu.scss | 7 ++-- 16 files changed, 152 insertions(+), 48 deletions(-) create mode 100644 webapp/src/theme.ts diff --git a/webapp/src/components/boardCard.scss b/webapp/src/components/boardCard.scss index 5df8e2b83..946fbb293 100644 --- a/webapp/src/components/boardCard.scss +++ b/webapp/src/components/boardCard.scss @@ -8,15 +8,15 @@ border-radius: 3px; margin-bottom: 10px; padding: 7px 10px; - box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px; + box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px; cursor: pointer; - color: rgb(55, 53, 47); + color: rgb(var(--main-fg)); transition: background 100ms ease-out 0s; &:hover { - background-color: #eeeeee; + background-color: rgba(var(--main-fg), 0.1); .optionsMenu { display: block; } diff --git a/webapp/src/components/button.scss b/webapp/src/components/button.scss index e8fe5fec7..5f2406eee 100644 --- a/webapp/src/components/button.scss +++ b/webapp/src/components/button.scss @@ -9,7 +9,7 @@ transition: background 100ms ease-out 0s; &:hover { - background-color: #eeeeee; + background-color: rgba(var(--main-fg), 0.1); } .octo-hovercontrol { background: rgb(239, 239, 238); diff --git a/webapp/src/components/cardDetail.scss b/webapp/src/components/cardDetail.scss index d1682923c..b213eac32 100644 --- a/webapp/src/components/cardDetail.scss +++ b/webapp/src/components/cardDetail.scss @@ -39,8 +39,9 @@ width: 150px; margin-right: 5px; color: #909090; + color: rgba(var(--main-fg), 0.6); &.add-property { - color: rgba(55, 53, 37, 0.4); + color: rgba(var(--main-fg), 0.4); } } } diff --git a/webapp/src/components/comment.scss b/webapp/src/components/comment.scss index 3264b2d6a..e46a5f384 100644 --- a/webapp/src/components/comment.scss +++ b/webapp/src/components/comment.scss @@ -40,7 +40,7 @@ } .comment-text { - color: rgb(55, 53, 47); + color: rgb(var(--main-fg)); width: 100%; padding-left: 25px; } diff --git a/webapp/src/components/commentsList.scss b/webapp/src/components/commentsList.scss index 5119264f3..997e4582a 100644 --- a/webapp/src/components/commentsList.scss +++ b/webapp/src/components/commentsList.scss @@ -17,7 +17,7 @@ } .newcomment { - color: rgba(55, 53, 47, 0.8); + color: rgba(var(--main-fg), 0.8); flex-grow: 1; margin-left: 5px; .octo-button { diff --git a/webapp/src/components/dialog.scss b/webapp/src/components/dialog.scss index e2457e42c..c740fa25a 100644 --- a/webapp/src/components/dialog.scss +++ b/webapp/src/components/dialog.scss @@ -7,16 +7,16 @@ bottom: 0; z-index: 10; - background-color: rgba(90, 90, 90, 0.5); + background-color: rgba(var(--main-fg), 0.5); } .dialog { display: flex; flex-direction: column; - background-color: #ffffff; + background-color: rgb(var(--main-bg)); border-radius: 3px; - box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px; + box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px; margin: 72px auto; padding: 0; max-width: 975px; diff --git a/webapp/src/components/filterComponent.scss b/webapp/src/components/filterComponent.scss index 9ce918f66..601e9b9d0 100644 --- a/webapp/src/components/filterComponent.scss +++ b/webapp/src/components/filterComponent.scss @@ -5,8 +5,8 @@ z-index: 10; min-width: 420px; - box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px; - background-color: #ffffff; + box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px; + background-color: rgb(var(--main-bg)); padding: 10px; .octo-filterclause { diff --git a/webapp/src/components/sidebar.scss b/webapp/src/components/sidebar.scss index 55c4b96a1..9f90015ad 100644 --- a/webapp/src/components/sidebar.scss +++ b/webapp/src/components/sidebar.scss @@ -5,7 +5,8 @@ flex-direction: column; min-height: 100%; - background-color: rgb(247, 246, 243); + color: rgb(var(--sidebar-fg)); + background-color: rgb(var(--sidebar-bg)); padding: 10px 0; &.hidden { @@ -40,7 +41,7 @@ font-weight: 500; padding: 3px 20px; &.subitem { - color: rgba(25, 23, 18, 0.6); + color: rgba(var(--sidebar-fg), 0.6); font-weight: 400; margin-left: 20px; } @@ -53,11 +54,11 @@ .octo-sidebar-item { &:hover { - background-color: rgba(0, 0, 0, 0.05); + background-color: rgba(var(--sidebar-fg), 0.05); } .octo-button { &:hover { - background-color: rgba(0, 0, 0, 0.1); + background-color: rgba(var(--sidebar-fg), 0.1); } } } diff --git a/webapp/src/components/sidebar.tsx b/webapp/src/components/sidebar.tsx index c8541257d..15dfb32fb 100644 --- a/webapp/src/components/sidebar.tsx +++ b/webapp/src/components/sidebar.tsx @@ -4,6 +4,7 @@ import React from 'react' import {FormattedMessage} from 'react-intl' import {Archiver} from '../archiver' +import {mattermostTheme, darkTheme, lightTheme, setTheme} from '../theme' import {Board, MutableBoard} from '../blocks/board' import {BoardTree} from '../viewModel/boardTree' import mutator from '../mutator' @@ -226,6 +227,42 @@ class Sidebar extends React.Component { /> )} + + {(text: string) => ( + setTheme(darkTheme)} + /> + )} + + + {(text: string) => ( + setTheme(lightTheme)} + /> + )} + + + {(text: string) => ( + setTheme(mattermostTheme)} + /> + )} + diff --git a/webapp/src/components/tableComponent.scss b/webapp/src/components/tableComponent.scss index 17afcfa41..24946438c 100644 --- a/webapp/src/components/tableComponent.scss +++ b/webapp/src/components/tableComponent.scss @@ -4,8 +4,8 @@ display: flex; flex-direction: row; - color: rgba(55, 53, 47); - border-right: solid 1px rgba(55, 53, 47, 0.09); + color: rgb(var(--main-fg)); + border-right: solid 1px rgba(var(--main-fg), 0.09); box-sizing: border-box; padding: 5px 8px 6px 8px; @@ -68,28 +68,28 @@ display: flex; flex-direction: row; - border-bottom: solid 1px rgba(55, 53, 47, 0.09); + border-bottom: solid 1px rgba(var(--main-fg), 0.09); } .octo-table-header { .octo-table-cell { - color: rgba(55, 53, 47, 0.6); + color: rgba(var(--main-fg), 0.6); .octo-label { - color: rgba(55, 53, 47, 0.6); + color: rgba(var(--main-fg), 0.6); } } } .octo-table-footer { .octo-table-cell { - color: rgba(55, 53, 47, 0.6); + color: rgba(var(--main-fg), 0.6); cursor: pointer; width: 100%; border-right: none; padding-left: 15px; &:hover { - background-color: rgba(55, 53, 47, 0.08); + background-color: rgba(var(--main-fg), 0.08); } } } diff --git a/webapp/src/components/viewHeader.tsx b/webapp/src/components/viewHeader.tsx index 85118375e..82b6cb1ba 100644 --- a/webapp/src/components/viewHeader.tsx +++ b/webapp/src/components/viewHeader.tsx @@ -116,7 +116,7 @@ class ViewHeader extends React.Component { return (
{ @@ -126,7 +126,7 @@ class ViewHeader extends React.Component {
@@ -180,7 +180,7 @@ class ViewHeader extends React.Component { values={{ property: ( {boardTree.groupByProperty?.name} @@ -268,7 +268,7 @@ class ViewHeader extends React.Component { ref={this.searchFieldRef} text={boardTree.getSearchText()} placeholderText={intl.formatMessage({id: 'ViewHeader.search-text', defaultMessage: 'Search text'})} - style={{color: '#000000'}} + style={{color: 'rgb(var(--main-fg))'}} onChanged={(text) => { this.searchChanged(text) }} diff --git a/webapp/src/main.tsx b/webapp/src/main.tsx index 86127b964..e1b46d4db 100644 --- a/webapp/src/main.tsx +++ b/webapp/src/main.tsx @@ -4,9 +4,11 @@ import React from 'react' import ReactDOM from 'react-dom' import App from './app' +import {setTheme, lightTheme} from './theme' import './styles/main.scss' import './styles/colors.scss' import './styles/images.scss' +setTheme(lightTheme) ReactDOM.render(, document.getElementById('octo-tasks-app')) diff --git a/webapp/src/styles/main.scss b/webapp/src/styles/main.scss index ed9ff2d2c..e045ed645 100644 --- a/webapp/src/styles/main.scss +++ b/webapp/src/styles/main.scss @@ -1,3 +1,12 @@ +:root { + --main-bg: 255, 255, 255; + --main-fg: 55, 53, 47; + --button-bg: 80, 170, 221; + --button-fg: 255, 255, 255; + --sidebar-bg: '247, 246, 243'; + --sidebar-fg: '55, 53, 47'; +} + * { box-sizing: border-box; outline: 0; @@ -10,7 +19,13 @@ html, body { width: 100%; height: 100%; - color: rgb(55, 53, 47); + color: rgb(var(--main-fg)); + background: rgb(var(--main-bg)); +} + +input { + background: rgb(var(--main-bg)); + color: rgb(var(--main-fg)); } body { @@ -20,7 +35,7 @@ body { /* -webkit-font-smoothing: auto; */ font-size: 14px; line-height: 24px; - --cursor-color: rgb(55, 53, 47); + --cursor-color: rgb(var(--main-fg)); } a { @@ -34,8 +49,8 @@ hr { width: 100%; height: 1px; border: none; - color: rgba(55, 53, 47, 0.09); - background-color: rgba(55, 53, 47, 0.09); + color: rgba(var(--main-fg), 0.09); + background-color: rgba(var(--main-fg), 0.09); margin-bottom: 8px; } @@ -96,7 +111,7 @@ hr { padding: 0 5px; border-radius: 3px; line-height: 20px; - color: rgb(55, 53, 47); + color: rgb(var(--main-fg)); white-space: nowrap } @@ -116,17 +131,17 @@ hr { transition: background 100ms ease-out 0s; &:hover { - background-color: #eeeeee; + background-color: rgba(var(--main-fg), 0.1); } } .filled { color: #ffffff; - background-color: #50aadd; + background-color: rgb(var(--button-bg)); padding: 2px 10px; &:hover { - background-color: #507090; + background-color: rgb(var(--button-bg), 0.8); } } @@ -139,7 +154,7 @@ hr { min-height: 30px; width: 100%; - color:rgba(55, 53, 47, 0.4); + color:rgba(var(--main-fg), 0.4); } .octo-icon { @@ -164,10 +179,10 @@ hr { /*-- Property list --*/ .octo-propertyvalue { - color: rgb(55, 53, 47); + color: rgb(var(--main-fg)); padding: 0 5px; &.empty { - color: rgba(55, 53, 47, 0.4); + color: rgba(var(--main-fg), 0.4); } } @@ -182,13 +197,13 @@ hr { } .octo-placeholder { - color: rgba(55, 53, 47, 0.4); + color: rgba(var(--main-fg), 0.4); } [contentEditable=true]:empty:before{ content: attr(placeholder); display: block; - color: rgba(55, 53, 47, 0.4); + color: rgba(var(--main-fg), 0.4); } @@ -200,7 +215,7 @@ hr { .octo-button { &.octo-hovercontrol { - background: rgb(239, 239, 238); + background: rgba(var(--main-fg), 0.1); } &.square { @@ -225,8 +240,8 @@ hr { right: 6px; top: 4px; cursor: pointer; - background: rgb(239, 239, 238); - box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px; + background: rgb(var(--main-fg), 0.1); + box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px; padding: 0 5px; &.square { @@ -280,7 +295,7 @@ hr { min-height: 30px; width: 100%; - color:rgba(55, 53, 47, 0.4); + color:rgba(var(--main-fg), 0.4); } .octo-block img { diff --git a/webapp/src/theme.ts b/webapp/src/theme.ts new file mode 100644 index 000000000..0592c25f4 --- /dev/null +++ b/webapp/src/theme.ts @@ -0,0 +1,47 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +export type Theme = { + mainBg: string + mainFg: string + buttonBg: string + buttonFg: string + sidebarBg: string + sidebarFg: string +} + +export const darkTheme = { + mainBg: '55, 53, 47', + mainFg: '200, 200, 200', + buttonBg: '80, 170, 221', + buttonFg: '255, 255, 255', + sidebarBg: '75, 73, 67', + sidebarFg: '255, 255, 255', +} + +export const lightTheme = { + mainBg: '255, 255, 255', + mainFg: '55, 53, 47', + buttonBg: '80, 170, 221', + buttonFg: '255, 255, 255', + sidebarBg: '247, 246, 243', + sidebarFg: '55, 53, 47', +} + +export const mattermostTheme = { + mainBg: '255, 255, 255', + mainFg: '55, 53, 47', + buttonBg: '22, 109, 224', + buttonFg: '255, 255, 255', + sidebarBg: '20, 93, 191', + sidebarFg: '255, 255, 255', +} + +export function setTheme(theme: Theme): void { + document.documentElement.style.setProperty('--main-bg', theme.mainBg) + document.documentElement.style.setProperty('--main-fg', theme.mainFg) + document.documentElement.style.setProperty('--button-bg', theme.buttonBg) + document.documentElement.style.setProperty('--button-fg', theme.buttonFg) + document.documentElement.style.setProperty('--sidebar-bg', theme.sidebarBg) + document.documentElement.style.setProperty('--sidebar-fg', theme.sidebarFg) +} diff --git a/webapp/src/widgets/editable.scss b/webapp/src/widgets/editable.scss index 5d4e61bf1..b13717e85 100644 --- a/webapp/src/widgets/editable.scss +++ b/webapp/src/widgets/editable.scss @@ -5,7 +5,7 @@ min-width: 100px; } &::placeholder{ - color: rgba(55, 53, 47, 0.4); + color: rgba(var(--main-fg), 0.4); opacity: 1; } } diff --git a/webapp/src/widgets/menu/menu.scss b/webapp/src/widgets/menu/menu.scss index f19052786..fd1346616 100644 --- a/webapp/src/widgets/menu/menu.scss +++ b/webapp/src/widgets/menu/menu.scss @@ -2,10 +2,11 @@ position: absolute; z-index: 15; min-width: 180px; - background-color: #ffffff; + background-color: rgb(var(--main-bg)); + color: rgb(var(--main-fg)); border-radius: 3px; - box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px; + box-shadow: rgba(var(--main-fg), 0.05) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 3px 6px, rgba(var(--main-fg), 0.2) 0px 9px 24px; &.top { bottom: 100%; @@ -19,7 +20,7 @@ padding: 0; margin: 0; - color: rgb(55, 53, 47); + color: rgb(var(--main-fg)); } .menu-option {