diff --git a/mattermost-plugin/webapp/src/index.tsx b/mattermost-plugin/webapp/src/index.tsx index 0f381313f..a79313d13 100644 --- a/mattermost-plugin/webapp/src/index.tsx +++ b/mattermost-plugin/webapp/src/index.tsx @@ -17,7 +17,7 @@ import store from '../../../webapp/src/store' import GlobalHeader from '../../../webapp/src/components/globalHeader/globalHeader' import FocalboardIcon from '../../../webapp/src/widgets/icons/logo' -import '../../../webapp/src/styles/variables.scss' +import '../../../webapp/src/styles/focalboard-variables.scss' import '../../../webapp/src/styles/main.scss' import '../../../webapp/src/styles/labels.scss' @@ -31,7 +31,7 @@ import './plugin.scss' const GlobalHeaderIcon = () => { return ( - + ) diff --git a/mattermost-plugin/webapp/src/plugin.scss b/mattermost-plugin/webapp/src/plugin.scss index 1785268ec..1dcd09fab 100644 --- a/mattermost-plugin/webapp/src/plugin.scss +++ b/mattermost-plugin/webapp/src/plugin.scss @@ -1,3 +1,10 @@ .channel-header__icon .LogoIcon { height: 24px; } + +.FocalboardGlobalHeaderIcon .LogoIcon { + height: 24px; + width: 24px; + display: inline-block; + fill: rgb(var(--center-channel-color-rgb)); +} diff --git a/webapp/package-lock.json b/webapp/package-lock.json index b7e55f498..503bde62c 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -9,6 +9,7 @@ "version": "0.9.0", "dependencies": { "@reduxjs/toolkit": "^1.6.0", + "color": "^4.0.0", "easymde": "^2.15.0", "emoji-mart": "^3.0.1", "imagemin-gifsicle": "^7.0.0", @@ -42,6 +43,7 @@ "@testing-library/jest-dom": "^5.11.10", "@testing-library/react": "^11.2.5", "@testing-library/user-event": "^13.1.9", + "@types/color": "^3.0.2", "@types/emoji-mart": "^3.0.4", "@types/jest": "^26.0.21", "@types/marked": "^2.0.0", @@ -1676,6 +1678,30 @@ "@types/tern": "*" } }, + "node_modules/@types/color": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.2.tgz", + "integrity": "sha512-INiJl6sfNn8iyC5paxVzqiVUEj2boIlFki02uRTAkKwAj++7aAF+ZfEv/XrIeBa0XI/fTZuDHW8rEEcEVnON+Q==", + "dev": true, + "dependencies": { + "@types/color-convert": "*" + } + }, + "node_modules/@types/color-convert": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.0.tgz", + "integrity": "sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ==", + "dev": true, + "dependencies": { + "@types/color-name": "*" + } + }, + "node_modules/@types/color-name": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", + "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==", + "dev": true + }, "node_modules/@types/emoji-mart": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/emoji-mart/-/emoji-mart-3.0.4.tgz", @@ -4161,11 +4187,19 @@ "node": ">=0.10.0" } }, + "node_modules/color": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/color/-/color-4.0.0.tgz", + "integrity": "sha512-aVUOa5aYWJSimvei14J5rdxLeljG0EB/uXTovVaaSokW+D4MsAz3MrKsRNaKqPa2KL7Wfvh7PZyIIaaX4lYdzQ==", + "dependencies": { + "color-convert": "^2.0.1", + "color-string": "^1.6.0" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "devOptional": true, "dependencies": { "color-name": "~1.1.4" }, @@ -4176,8 +4210,16 @@ "node_modules/color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "devOptional": true + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "node_modules/color-string": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz", + "integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==", + "dependencies": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } }, "node_modules/colorette": { "version": "1.2.2", @@ -13870,6 +13912,19 @@ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz", "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==" }, + "node_modules/simple-swizzle": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", + "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=", + "dependencies": { + "is-arrayish": "^0.3.1" + } + }, + "node_modules/simple-swizzle/node_modules/is-arrayish": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" + }, "node_modules/sisteransi": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", @@ -17839,6 +17894,30 @@ "@types/tern": "*" } }, + "@types/color": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.2.tgz", + "integrity": "sha512-INiJl6sfNn8iyC5paxVzqiVUEj2boIlFki02uRTAkKwAj++7aAF+ZfEv/XrIeBa0XI/fTZuDHW8rEEcEVnON+Q==", + "dev": true, + "requires": { + "@types/color-convert": "*" + } + }, + "@types/color-convert": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.0.tgz", + "integrity": "sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ==", + "dev": true, + "requires": { + "@types/color-name": "*" + } + }, + "@types/color-name": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", + "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==", + "dev": true + }, "@types/emoji-mart": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/emoji-mart/-/emoji-mart-3.0.4.tgz", @@ -20022,11 +20101,19 @@ "object-visit": "^1.0.0" } }, + "color": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/color/-/color-4.0.0.tgz", + "integrity": "sha512-aVUOa5aYWJSimvei14J5rdxLeljG0EB/uXTovVaaSokW+D4MsAz3MrKsRNaKqPa2KL7Wfvh7PZyIIaaX4lYdzQ==", + "requires": { + "color-convert": "^2.0.1", + "color-string": "^1.6.0" + } + }, "color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "devOptional": true, "requires": { "color-name": "~1.1.4" } @@ -20034,8 +20121,16 @@ "color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "devOptional": true + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "color-string": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz", + "integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==", + "requires": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } }, "colorette": { "version": "1.2.2", @@ -27949,6 +28044,21 @@ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz", "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==" }, + "simple-swizzle": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", + "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=", + "requires": { + "is-arrayish": "^0.3.1" + }, + "dependencies": { + "is-arrayish": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" + } + } + }, "sisteransi": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", diff --git a/webapp/package.json b/webapp/package.json index 704f6ab10..d791a1f90 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -25,6 +25,7 @@ }, "dependencies": { "@reduxjs/toolkit": "^1.6.0", + "color": "^4.0.0", "easymde": "^2.15.0", "emoji-mart": "^3.0.1", "imagemin-gifsicle": "^7.0.0", @@ -76,6 +77,7 @@ "@testing-library/jest-dom": "^5.11.10", "@testing-library/react": "^11.2.5", "@testing-library/user-event": "^13.1.9", + "@types/color": "^3.0.2", "@types/emoji-mart": "^3.0.4", "@types/jest": "^26.0.21", "@types/marked": "^2.0.0", diff --git a/webapp/src/components/blockIconSelector.scss b/webapp/src/components/blockIconSelector.scss index 5de52e161..acd908006 100644 --- a/webapp/src/components/blockIconSelector.scss +++ b/webapp/src/components/blockIconSelector.scss @@ -8,7 +8,7 @@ align-items: center; justify-content: center; &:not(.readonly):hover { - background-color: rgba(var(--body-color), 0.1); + background-color: rgba(var(--center-channel-color-rgb), 0.1); } &.size-s { height: 24px; diff --git a/webapp/src/components/cardDetail/cardDetail.scss b/webapp/src/components/cardDetail/cardDetail.scss index 4f1a1d93c..9835f1676 100644 --- a/webapp/src/components/cardDetail/cardDetail.scss +++ b/webapp/src/components/cardDetail/cardDetail.scss @@ -7,7 +7,7 @@ display: flex; flex-direction: column; min-height: 30px; - color: rgba(var(--body-color), 0.4); + color: rgba(var(--center-channel-color-rgb), 0.4); width: 100%; align-items: flex-start; .Button { @@ -45,13 +45,13 @@ .octo-propertyname { width: 150px; margin-right: 5px; - color: rgba(var(--body-color), 0.6); + color: rgba(var(--center-channel-color-rgb), 0.6); .Button { text-align: left; justify-content: unset; } &.add-property { - color: rgba(var(--body-color), 0.4); + color: rgba(var(--center-channel-color-rgb), 0.4); } } @@ -67,7 +67,7 @@ margin-left: 48px; .Button { opacity: 0; - color: rgba(var(--body-color), 0.6); + color: rgba(var(--center-channel-color-rgb), 0.6); } } } diff --git a/webapp/src/components/cardDetail/comment.scss b/webapp/src/components/cardDetail/comment.scss index 49b179b0a..12a95cb51 100644 --- a/webapp/src/components/cardDetail/comment.scss +++ b/webapp/src/components/cardDetail/comment.scss @@ -41,7 +41,7 @@ } .comment-text { - color: rgb(var(--body-color)); + color: rgb(var(--center-channel-color-rgb)); width: 100%; padding-left: 28px; diff --git a/webapp/src/components/cardDetail/commentsList.scss b/webapp/src/components/cardDetail/commentsList.scss index 241d0b3fc..914a36a07 100644 --- a/webapp/src/components/cardDetail/commentsList.scss +++ b/webapp/src/components/cardDetail/commentsList.scss @@ -23,7 +23,7 @@ } .newcomment { - color: rgba(var(--body-color), 0.8); + color: rgba(var(--center-channel-color-rgb), 0.8); flex-grow: 1; margin: 4px 0 0 8px; diff --git a/webapp/src/components/centerPanel.scss b/webapp/src/components/centerPanel.scss index b4b35100c..5d76e6262 100644 --- a/webapp/src/components/centerPanel.scss +++ b/webapp/src/components/centerPanel.scss @@ -42,7 +42,7 @@ position: sticky; top: 0; left: 0; - background: rgb(var(--main-bg)); + background: rgb(var(--center-channel-bg-rgb)); z-index: 100; } } diff --git a/webapp/src/components/content/dividerElement.scss b/webapp/src/components/content/dividerElement.scss index eed9390f1..6f9826d54 100644 --- a/webapp/src/components/content/dividerElement.scss +++ b/webapp/src/components/content/dividerElement.scss @@ -1,6 +1,6 @@ .focalboard-body .DividerElement { padding-top: 16px; - border-bottom: 1px solid rgba(var(--body-color), 0.09); + border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.09); margin-bottom: 17px; flex-grow: 1; } diff --git a/webapp/src/components/dialog.scss b/webapp/src/components/dialog.scss index 94fc67f43..d27711c0c 100644 --- a/webapp/src/components/dialog.scss +++ b/webapp/src/components/dialog.scss @@ -12,15 +12,15 @@ position: absolute; width: 100%; height: 100%; - background-color: rgba(var(--body-color), 0.5); + background-color: rgba(var(--center-channel-color-rgb), 0.5); } .dialog { display: flex; flex-direction: column; - background-color: rgb(var(--main-bg)); - box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, - rgba(var(--body-color), 0.1) 0px 2px 4px; + background-color: rgb(var(--center-channel-bg-rgb)); + box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0px 0px 0px 1px, + rgba(var(--center-channel-color-rgb), 0.1) 0px 2px 4px; border-radius: var(--modal-rad); padding: 0; diff --git a/webapp/src/components/emptyCenterPanel.scss b/webapp/src/components/emptyCenterPanel.scss index 04371a964..d5641acde 100644 --- a/webapp/src/components/emptyCenterPanel.scss +++ b/webapp/src/components/emptyCenterPanel.scss @@ -4,7 +4,7 @@ padding: 80px; font-size: 15px; - color: rgba(var(--body-color), 0.7); + color: rgba(var(--center-channel-color-rgb), 0.7); .WorkspaceInfo { b { diff --git a/webapp/src/components/gallery/gallery.scss b/webapp/src/components/gallery/gallery.scss index 251f4fdf0..6d8018fcc 100644 --- a/webapp/src/components/gallery/gallery.scss +++ b/webapp/src/components/gallery/gallery.scss @@ -3,9 +3,9 @@ flex-wrap: wrap; .octo-gallery-new { - border: 1px solid rgba(var(--body-color), 0.09); + border: 1px solid rgba(var(--center-channel-color-rgb), 0.09); border-radius: var(--default-rad); - color: rgba(var(--body-color), 0.3); + color: rgba(var(--center-channel-color-rgb), 0.3); cursor: pointer; width: 280px; min-height: 160px; @@ -20,7 +20,7 @@ } &:hover { - background-color: rgba(var(--body-color), 0.05); + background-color: rgba(var(--center-channel-color-rgb), 0.05); } } } diff --git a/webapp/src/components/gallery/galleryCard.scss b/webapp/src/components/gallery/galleryCard.scss index 0bc4ed269..10aa25abb 100644 --- a/webapp/src/components/gallery/galleryCard.scss +++ b/webapp/src/components/gallery/galleryCard.scss @@ -1,6 +1,6 @@ .focalboard-body .GalleryCard { position: relative; - border: 1px solid rgba(var(--body-color), 0.09); + border: 1px solid rgba(var(--center-channel-color-rgb), 0.09); border-radius: var(--default-rad); width: 280px; display: flex; @@ -14,14 +14,14 @@ } &:hover { - background-color: rgba(var(--body-color), 0.05); + background-color: rgba(var(--center-channel-color-rgb), 0.05); .optionsMenu { display: block; } } .optionsMenu { - background-color: rgb(var(--main-bg)); + background-color: rgb(var(--center-channel-bg-rgb)); border-radius: var(--default-rad); display: none; position: absolute; @@ -29,12 +29,12 @@ top: 10px; z-index: 30; .IconButton { - background-color: rgba(var(--body-color), 0.13); + background-color: rgba(var(--center-channel-color-rgb), 0.13); } } .gallery-item { - background-color: rgba(var(--body-color), 0.03); + background-color: rgba(var(--center-channel-color-rgb), 0.03); flex-grow: 1; overflow: hidden; @@ -65,7 +65,7 @@ .gallery-title { flex-grow: 0; - border-top: 1px solid rgba(var(--body-color), 0.09); + border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.09); margin: 0; padding: 5px 10px; display: flex; diff --git a/webapp/src/components/globalHeader/globalHeader.scss b/webapp/src/components/globalHeader/globalHeader.scss index 8b02b0532..071b2656f 100644 --- a/webapp/src/components/globalHeader/globalHeader.scss +++ b/webapp/src/components/globalHeader/globalHeader.scss @@ -11,7 +11,7 @@ padding: 0 17px; } .HelpIcon { - color: rgba(var(--sidebar-fg), 0.64); + color: rgba(var(--sidebar-text-rgb), 0.64); font-size: 20px; } } diff --git a/webapp/src/components/globalHeader/globalHeaderSettingsMenu.scss b/webapp/src/components/globalHeader/globalHeaderSettingsMenu.scss index 38eca359a..39eb17af2 100644 --- a/webapp/src/components/globalHeader/globalHeaderSettingsMenu.scss +++ b/webapp/src/components/globalHeader/globalHeaderSettingsMenu.scss @@ -6,16 +6,16 @@ height: 36px; align-items: center; padding-left: 20px; - color: rgba(var(--sidebar-fg), 0.64); + color: rgba(var(--sidebar-text-rgb), 0.64); font-weight: 400; &:hover { - background-color: rgba(var(--sidebar-fg), 0.08); + background-color: rgba(var(--sidebar-text-rgb), 0.08); display: flex; } } .SettingsIcon { - color: rgba(var(--sidebar-fg), 0.64); + color: rgba(var(--sidebar-text-rgb), 0.64); font-size: 20px; } } diff --git a/webapp/src/components/kanban/kanban.scss b/webapp/src/components/kanban/kanban.scss index 7fe6e547e..a6f8c864b 100644 --- a/webapp/src/components/kanban/kanban.scss +++ b/webapp/src/components/kanban/kanban.scss @@ -12,7 +12,7 @@ position: sticky; top: 0; z-index: 1; - background: rgb(var(--main-bg)); + background: rgb(var(--center-channel-bg-rgb)); } .octo-board-header-cell { @@ -39,7 +39,7 @@ .IconButton { background-color: unset; &:hover { - background-color: rgba(var(--body-color), 0.1); + background-color: rgba(var(--center-channel-color-rgb), 0.1); } } diff --git a/webapp/src/components/kanban/kanbanCard.scss b/webapp/src/components/kanban/kanbanCard.scss index db21d28be..a55f36d03 100644 --- a/webapp/src/components/kanban/kanbanCard.scss +++ b/webapp/src/components/kanban/kanbanCard.scss @@ -9,16 +9,16 @@ border-radius: 3px; margin-bottom: 10px; padding: 8px 16px; - box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, - rgba(var(--body-color), 0.1) 0px 2px 4px; + box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0px 0px 0px 1px, + rgba(var(--center-channel-color-rgb), 0.1) 0px 2px 4px; cursor: pointer; - color: rgb(var(--body-color)); + color: rgb(var(--center-channel-color-rgb)); transition: background 100ms ease-out 0s; &:hover { - background-color: rgba(var(--body-color), 0.1); + background-color: rgba(var(--center-channel-color-rgb), 0.1); .optionsMenu { display: block; } @@ -57,9 +57,9 @@ border-radius: 3px; margin-right: 6px; padding: 0; - background: rgb(var(--body-color), 0.1); - box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, - rgba(var(--body-color), 0.1) 0px 2px 4px; + background: rgb(var(--center-channel-color-rgb), 0.1); + box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0px 0px 0px 1px, + rgba(var(--center-channel-color-rgb), 0.1) 0px 2px 4px; height: 24px; width: 24px; } diff --git a/webapp/src/components/markdownEditor.scss b/webapp/src/components/markdownEditor.scss index d1ea61cc8..6a3fae9d9 100644 --- a/webapp/src/components/markdownEditor.scss +++ b/webapp/src/components/markdownEditor.scss @@ -7,8 +7,8 @@ .CodeMirror { padding: 0; min-height: 0; - background: var(--main-bg); - color: var(--body-color); + background: var(--center-channel-bg-rgb); + color: var(--center-channel-color-rgb); } pre.CodeMirror-line { diff --git a/webapp/src/components/modal.scss b/webapp/src/components/modal.scss index b470bed9c..ccb4ebfe1 100644 --- a/webapp/src/components/modal.scss +++ b/webapp/src/components/modal.scss @@ -3,7 +3,7 @@ top: 25px; left: -240px; z-index: 10; - background-color: rgb(var(--main-bg)); + background-color: rgb(var(--center-channel-bg-rgb)); padding: 10px; border-radius: 3px; box-shadow: var(--elevation-4); diff --git a/webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap b/webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap index 027387320..aea9d2135 100644 --- a/webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap +++ b/webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap @@ -18,7 +18,7 @@ exports[`components/properties/user not readonly 1`] = ` class=" css-kpfmlq-ValueContainer" >
username-1
@@ -206,7 +206,7 @@ exports[`components/properties/user user dropdown open 1`] = ` class=" css-kpfmlq-ValueContainer" >
username-1
@@ -278,13 +278,13 @@ exports[`components/properties/user user dropdown open 1`] = `
diff --git a/webapp/src/components/shareBoardComponent.scss b/webapp/src/components/shareBoardComponent.scss index 541ce7a2e..ce467d477 100644 --- a/webapp/src/components/shareBoardComponent.scss +++ b/webapp/src/components/shareBoardComponent.scss @@ -2,7 +2,7 @@ display: flex; flex-direction: column; padding: 5px; - color: rgb(var(--body-color)); + color: rgb(var(--center-channel-color-rgb)); max-width: 400px; > .row { diff --git a/webapp/src/components/sidebar/registrationLink.scss b/webapp/src/components/sidebar/registrationLink.scss index 788f904f7..aa0f96674 100644 --- a/webapp/src/components/sidebar/registrationLink.scss +++ b/webapp/src/components/sidebar/registrationLink.scss @@ -2,7 +2,7 @@ display: flex; flex-direction: column; padding: 5px; - color: rgb(var(--body-color)); + color: rgb(var(--center-channel-color-rgb)); font-weight: normal; line-height: normal; diff --git a/webapp/src/components/sidebar/sidebar.scss b/webapp/src/components/sidebar/sidebar.scss index 71c130669..ea0a6bb3f 100644 --- a/webapp/src/components/sidebar/sidebar.scss +++ b/webapp/src/components/sidebar/sidebar.scss @@ -5,8 +5,8 @@ flex-direction: column; min-height: 100%; - color: rgb(var(--sidebar-fg)); - background-color: rgb(var(--sidebar-bg)); + color: rgb(var(--sidebar-text-rgb)); + background-color: rgb(var(--sidebar-bg-rgb)); padding: 12px 0; &.hidden { @@ -65,7 +65,7 @@ align-items: center; &:hover { - background-color: rgba(var(--sidebar-fg), 0.08); + background-color: rgba(var(--sidebar-text-rgb), 0.08); } > .heading { @@ -75,10 +75,10 @@ } > .IconButton { - background-color: var(--sidebar-bg); + background-color: var(--sidebar-bg-rgb); &:hover { - background-color: rgba(var(--sidebar-fg), 0.1); + background-color: rgba(var(--sidebar-text-rgb), 0.1); } } @@ -104,11 +104,11 @@ } .OptionsIcon { - color: rgba(var(--sidebar-fg), 0.5); + color: rgba(var(--sidebar-text-rgb), 0.5); } .DisclosureTriangleIcon, .DotIcon { - fill: rgba(var(--sidebar-fg), 0.5); + fill: rgba(var(--sidebar-text-rgb), 0.5); flex-shrink: 0; } @@ -117,7 +117,7 @@ } .HideSidebarIcon { - stroke: rgba(var(--sidebar-fg), 0.5); + stroke: rgba(var(--sidebar-text-rgb), 0.5); stroke-width: 6px; } } diff --git a/webapp/src/components/sidebar/sidebarAddBoardMenu.scss b/webapp/src/components/sidebar/sidebarAddBoardMenu.scss index 7877cb3a4..c6aaf8ad1 100644 --- a/webapp/src/components/sidebar/sidebarAddBoardMenu.scss +++ b/webapp/src/components/sidebar/sidebarAddBoardMenu.scss @@ -6,11 +6,11 @@ height: 36px; align-items: center; padding-left: 20px; - color: rgba(var(--sidebar-fg), 0.64); + color: rgba(var(--sidebar-text-rgb), 0.64); font-weight: 400; &:hover { - background-color: rgba(var(--sidebar-fg), 0.08); + background-color: rgba(var(--sidebar-text-rgb), 0.08); display: flex; } } diff --git a/webapp/src/components/sidebar/sidebarBoardItem.scss b/webapp/src/components/sidebar/sidebarBoardItem.scss index a69a92838..95d6cd094 100644 --- a/webapp/src/components/sidebar/sidebarBoardItem.scss +++ b/webapp/src/components/sidebar/sidebarBoardItem.scss @@ -8,23 +8,23 @@ align-items: center; &:hover { - background-color: rgba(var(--sidebar-fg), 0.08); + background-color: rgba(var(--sidebar-text-rgb), 0.08); display: flex; } &.subitem { padding-left: 20px; - color: rgba(var(--sidebar-fg), 0.64); + color: rgba(var(--sidebar-text-rgb), 0.64); font-weight: 400; } &.active { - background: rgba(var(--sidebar-fg), 0.1); + background: rgba(var(--sidebar-text-rgb), 0.1); position: relative; color: white; .Icon { - stroke: rgba(var(--sidebar-fg), 1); + stroke: rgba(var(--sidebar-text-rgb), 1); } &:not(.subitem) { @@ -41,10 +41,10 @@ } &.no-views { - color: rgba(var(--sidebar-fg), 0.4); + color: rgba(var(--sidebar-text-rgb), 0.4); &:hover { - background-color: rgba(var(--sidebar-bg)); + background-color: rgba(var(--sidebar-bg-rgb)); } } @@ -53,22 +53,22 @@ } > .Icon { - stroke: rgba(var(--sidebar-fg), 0.3); + stroke: rgba(var(--sidebar-text-rgb), 0.3); height: 14px; width: 14px; margin-right: 8px; flex-shrink: 0; &.GalleryIcon { - fill: rgba(var(--sidebar-fg), 0.3); + fill: rgba(var(--sidebar-text-rgb), 0.3); stroke: unset; } } > .IconButton { - background-color: var(--sidebar-bg); + background-color: var(--sidebar-bg-rgb); &:hover { - background-color: rgba(var(--sidebar-fg), 0.1); + background-color: rgba(var(--sidebar-text-rgb), 0.1); } } diff --git a/webapp/src/components/sidebar/sidebarSettingsMenu.scss b/webapp/src/components/sidebar/sidebarSettingsMenu.scss index dca47024f..4fca53b1e 100644 --- a/webapp/src/components/sidebar/sidebarSettingsMenu.scss +++ b/webapp/src/components/sidebar/sidebarSettingsMenu.scss @@ -6,11 +6,11 @@ height: 36px; align-items: center; padding-left: 20px; - color: rgba(var(--sidebar-fg), 0.64); + color: rgba(var(--sidebar-text-rgb), 0.64); font-weight: 400; &:hover { - background-color: rgba(var(--sidebar-fg), 0.08); + background-color: rgba(var(--sidebar-text-rgb), 0.08); display: flex; } } diff --git a/webapp/src/components/sidebar/sidebarUserMenu.scss b/webapp/src/components/sidebar/sidebarUserMenu.scss index da70b5d5a..31eaecd9d 100644 --- a/webapp/src/components/sidebar/sidebarUserMenu.scss +++ b/webapp/src/components/sidebar/sidebarUserMenu.scss @@ -10,7 +10,7 @@ font-size: 16px; margin-right: 5px; .LogoIcon { - fill: rgba(var(--sidebar-fg), 1); + fill: rgba(var(--sidebar-text-rgb), 1); height: 24px; width: 22px; margin-right: 3px; @@ -32,14 +32,14 @@ font-size: 11px; line-height: 11px; font-weight: 500; - color: rgba(var(--sidebar-fg), 0.8); + color: rgba(var(--sidebar-text-rgb), 0.8); } .versionBadge { font-size: 10px; line-height: 11px; font-weight: 500; - color: rgba(var(--sidebar-fg), 0.8); + color: rgba(var(--sidebar-text-rgb), 0.8); } } } diff --git a/webapp/src/components/table/table.scss b/webapp/src/components/table/table.scss index bc4b1aebb..bbb7db3cf 100644 --- a/webapp/src/components/table/table.scss +++ b/webapp/src/components/table/table.scss @@ -23,7 +23,7 @@ .IconButton { background-color: unset; &:hover:not(.readonly) { - background-color: rgba(var(--body-color), 0.1); + background-color: rgba(var(--center-channel-color-rgb), 0.1); } &.readonly { opacity: .5; @@ -37,7 +37,7 @@ border-radius: 3px; line-height: 20px; margin-right: 5px; - color: rgba(var(--body-color), 1); + color: rgba(var(--center-channel-color-rgb), 1); white-space: nowrap; text-transform: none; font-weight: normal; @@ -51,7 +51,7 @@ font-weight: normal; font-size: 16px; // line-height: 20px; - color: rgba(var(--body-color), 1); + color: rgba(var(--center-channel-color-rgb), 1); } } @@ -72,8 +72,8 @@ flex: 0 0 auto; display: flex; flex-direction: row; - color: rgb(var(--body-color)); - border-right: solid 1px rgba(var(--body-color), 0.09); + color: rgb(var(--center-channel-color-rgb)); + border-right: solid 1px rgba(var(--center-channel-color-rgb), 0.09); border-left: 1px solid transparent; border-top: 1px solid transparent; border-bottom: 1px solid transparent; @@ -85,7 +85,7 @@ text-overflow: ellipsis; &:hover { - background-color: rgba(var(--body-color), 0.05); + background-color: rgba(var(--center-channel-color-rgb), 0.05); } &.title-cell { @@ -162,7 +162,7 @@ display: flex; flex-direction: row; - border-bottom: solid 1px rgba(var(--body-color), 0.09); + border-bottom: solid 1px rgba(var(--center-channel-color-rgb), 0.09); &.hidden { display: none; } @@ -172,21 +172,21 @@ position: sticky; top: 0; z-index: 1; - background: rgb(var(--main-bg)); + background: rgb(var(--center-channel-bg-rgb)); .octo-table-cell { - color: rgba(var(--body-color), 0.6); - background: rgb(var(--main-bg)); + color: rgba(var(--center-channel-color-rgb), 0.6); + background: rgb(var(--center-channel-bg-rgb)); .Label { - color: rgba(var(--body-color), 0.6); + color: rgba(var(--center-channel-color-rgb), 0.6); } } } .octo-table-footer { .octo-table-cell { - color: rgba(var(--body-color), 0.6); + color: rgba(var(--center-channel-color-rgb), 0.6); cursor: pointer; width: 100%; @@ -194,7 +194,7 @@ padding-left: 15px; &:hover { - background-color: rgba(var(--body-color), 0.08); + background-color: rgba(var(--center-channel-color-rgb), 0.08); } } } diff --git a/webapp/src/components/table/tableRow.scss b/webapp/src/components/table/tableRow.scss index 8065f0d7d..25f51c009 100644 --- a/webapp/src/components/table/tableRow.scss +++ b/webapp/src/components/table/tableRow.scss @@ -7,10 +7,10 @@ font-size: 11px; text-transform: uppercase; font-weight: 600; - color: rgba(var(--body-color), 0.64); - background-color: rgba(var(--body-color), 0.1); - box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, - rgba(var(--body-color), 0.1) 0px 2px 4px; + color: rgba(var(--center-channel-color-rgb), 0.64); + background-color: rgba(var(--center-channel-color-rgb), 0.1); + box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0px 0px 0px 1px, + rgba(var(--center-channel-color-rgb), 0.1) 0px 2px 4px; height: 90%; width: 100%; } @@ -21,7 +21,7 @@ } &:hover { - background-color: rgba(var(--body-color), 0.05); + background-color: rgba(var(--center-channel-color-rgb), 0.05); .open-button { display: block; diff --git a/webapp/src/components/viewHeader/viewHeader.scss b/webapp/src/components/viewHeader/viewHeader.scss index 3592272d7..d068650a0 100644 --- a/webapp/src/components/viewHeader/viewHeader.scss +++ b/webapp/src/components/viewHeader/viewHeader.scss @@ -3,10 +3,10 @@ display: flex; flex-direction: row; - border-bottom: solid 1px rgba(var(--body-color), 0.16); + border-bottom: solid 1px rgba(var(--center-channel-color-rgb), 0.16); margin: 16px 0; padding: 12px 8px; - color: rgba(var(--body-color), 0.64); + color: rgba(var(--center-channel-color-rgb), 0.64); align-items: center; > div { @@ -31,7 +31,7 @@ margin: 0; } &:hover { - background: rgba(var(--body-color), 0.1); + background: rgba(var(--center-channel-color-rgb), 0.1); } } diff --git a/webapp/src/components/viewHeader/viewHeaderGroupByMenu.tsx b/webapp/src/components/viewHeader/viewHeaderGroupByMenu.tsx index 9360f1975..01b6104e5 100644 --- a/webapp/src/components/viewHeader/viewHeaderGroupByMenu.tsx +++ b/webapp/src/components/viewHeader/viewHeaderGroupByMenu.tsx @@ -30,7 +30,7 @@ const ViewHeaderGroupByMenu = React.memo((props: Props) => { values={{ property: ( {groupByPropertyName} diff --git a/webapp/src/components/viewTitle.scss b/webapp/src/components/viewTitle.scss index d64ff12a9..71907d58d 100644 --- a/webapp/src/components/viewTitle.scss +++ b/webapp/src/components/viewTitle.scss @@ -10,7 +10,7 @@ > .add-buttons { flex-direction: row; min-height: 28px; - color: rgba(var(--body-color), 0.4); + color: rgba(var(--center-channel-color-rgb), 0.4); width: 100%; align-items: flex-start; diff --git a/webapp/src/pages/changePasswordPage.scss b/webapp/src/pages/changePasswordPage.scss index 355f3beed..ee8d1ec9b 100644 --- a/webapp/src/pages/changePasswordPage.scss +++ b/webapp/src/pages/changePasswordPage.scss @@ -9,8 +9,8 @@ align-items: center; justify-content: flex-start; flex-direction: column; - box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, - rgba(var(--main-fg), 0.3) 0px 4px 8px; + box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0px 0px 0px 1px, + rgba(var(--center-channel-color-rgb), 0.3) 0px 4px 8px; form { display: flex; diff --git a/webapp/src/pages/errorPage.scss b/webapp/src/pages/errorPage.scss index 6a2eb0d28..537782fd6 100644 --- a/webapp/src/pages/errorPage.scss +++ b/webapp/src/pages/errorPage.scss @@ -9,8 +9,8 @@ align-items: center; justify-content: flex-start; flex-direction: column; - box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, - rgba(var(--body-color), 0.3) 0px 4px 8px; + box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0px 0px 0px 1px, + rgba(var(--center-channel-color-rgb), 0.3) 0px 4px 8px; @media screen and (max-width: 430px) { position: fixed; diff --git a/webapp/src/pages/loginPage.scss b/webapp/src/pages/loginPage.scss index 3c42aad19..af45b36fa 100644 --- a/webapp/src/pages/loginPage.scss +++ b/webapp/src/pages/loginPage.scss @@ -8,8 +8,8 @@ align-items: center; justify-content: flex-start; flex-direction: column; - box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, - rgba(var(--body-color), 0.3) 0px 4px 8px; + box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0px 0px 0px 1px, + rgba(var(--center-channel-color-rgb), 0.3) 0px 4px 8px; form { display: flex; diff --git a/webapp/src/pages/registerPage.scss b/webapp/src/pages/registerPage.scss index 3c1f3fc72..571a3ad84 100644 --- a/webapp/src/pages/registerPage.scss +++ b/webapp/src/pages/registerPage.scss @@ -9,8 +9,8 @@ align-items: center; justify-content: flex-start; flex-direction: column; - box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, - rgba(var(--body-color), 0.3) 0px 4px 8px; + box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0px 0px 0px 1px, + rgba(var(--center-channel-color-rgb), 0.3) 0px 4px 8px; form { display: flex; diff --git a/webapp/src/styles/focalboard-variables.scss b/webapp/src/styles/focalboard-variables.scss new file mode 100644 index 000000000..5611e46bb --- /dev/null +++ b/webapp/src/styles/focalboard-variables.scss @@ -0,0 +1,27 @@ +:root { + --link-visited-color-rgb: #551a8b; + + // Label Colors + --prop-default: #fff; + --prop-gray: #ededed; + --prop-brown: #f7ddc3; + --prop-orange: #ffd3c1; + --prop-yellow: #f7f0b6; + --prop-green: #c7eac3; + --prop-blue: #b1d1f6; + --prop-purple: #e6d0ff; + --prop-pink: #ffd6e9; + --prop-red: #ffa9a9; + + // Elevations + --elevation-1: 0 2px 3px 0 rgba(0, 0, 0, 0.8); + --elevation-2: 0 4px 6px 0 rgba(0, 0, 0, 0.12); + --elevation-3: 0 6px 14px 0 rgba(0, 0, 0, 0.12); + --elevation-4: 0 8px 24px 0 rgba(0, 0, 0, 0.12); + --elevation-5: 0 12px 32px 0 rgba(0, 0, 0, 0.12); + --elevation-6: 0 20px 32px 0 rgba(0, 0, 0, 0.12); + + // Radius + --default-rad: 4px; + --modal-rad: 8px; +} diff --git a/webapp/src/styles/main.scss b/webapp/src/styles/main.scss index 7e4f1d4b0..7cceaffc1 100644 --- a/webapp/src/styles/main.scss +++ b/webapp/src/styles/main.scss @@ -9,8 +9,8 @@ html { width: 100%; height: 100%; - color: rgb(var(--body-color)); - background: rgb(var(--main-bg)); + color: rgb(var(--center-channel-color-rgb)); + background: rgb(var(--center-channel-bg-rgb)); padding: 0; margin: 0; } @@ -50,8 +50,8 @@ html { input, textarea { - background: rgb(var(--main-bg)); - color: rgb(var(--body-color)); + background: rgb(var(--center-channel-bg-rgb)); + color: rgb(var(--center-channel-color-rgb)); -webkit-user-select: auto; /* Chrome all / Safari all */ -moz-user-select: auto; /* Firefox all */ @@ -65,11 +65,11 @@ html { /* -webkit-font-smoothing: auto; */ font-size: 14px; line-height: 24px; - --cursor-color: rgb(var(--body-color)); + --cursor-color: rgb(var(--center-channel-color-rgb)); a { text-decoration: none; - color: var(--link-color); + color: var(--link-color-rgb); &:visited { color: var(--link-visited-color); @@ -84,8 +84,8 @@ html { width: 100%; height: 1px; border: none; - color: rgba(var(--body-color), 0.09); - background-color: rgba(var(--body-color), 0.09); + color: rgba(var(--center-channel-color-rgb), 0.09); + background-color: rgba(var(--center-channel-color-rgb), 0.09); margin-bottom: 8px; } @@ -160,10 +160,10 @@ html { /*-- Property list --*/ .octo-propertyvalue { - color: rgb(var(--body-color)); + color: rgb(var(--center-channel-color-rgb)); padding: 0 5px; &.empty { - color: rgba(var(--body-color), 0.4); + color: rgba(var(--center-channel-color-rgb), 0.4); } .IconButton.delete-value { width: 16px; @@ -186,7 +186,7 @@ html { } .octo-placeholder { - color: rgba(var(--body-color), 0.4); + color: rgba(var(--center-channel-color-rgb), 0.4); } [contentEditable="true"] { @@ -199,7 +199,7 @@ html { [contentEditable="true"]:empty:before { content: attr(placeholder); display: block; - color: rgba(var(--body-color), 0.4); + color: rgba(var(--center-channel-color-rgb), 0.4); } .octo-propertyvalue.Editable.active, diff --git a/webapp/src/styles/shared-variables.scss b/webapp/src/styles/shared-variables.scss new file mode 100644 index 000000000..cdc43520d --- /dev/null +++ b/webapp/src/styles/shared-variables.scss @@ -0,0 +1,10 @@ +:root { + --center-channel-bg-rgb: 255, 255, 255; + --center-channel-color-rgb: 0, 0, 0; + --sidebar-bg-rgb: 20, 93, 191; + --sidebar-text-rgb: 55, 53, 47; + --button-color-rgb: 255, 255, 255; + --button-bg-rgb: 22, 109, 204; + --link-color-rgb: 35, 137, 215; + --error-text-rgb: #ffa9a9; +} diff --git a/webapp/src/styles/variables.scss b/webapp/src/styles/variables.scss index 011acb930..3fcc73cd8 100644 --- a/webapp/src/styles/variables.scss +++ b/webapp/src/styles/variables.scss @@ -1,36 +1,2 @@ -:root { - --body-color: 38, 38, 38; - --main-bg: 255, 255, 255; - --button-bg: 80, 170, 221; - --button-fg: 255, 255, 255; - --sidebar-bg: 20, 93, 191; - --sidebar-fg: 55, 53, 47; - --button-bg: 22, 109, 204; - --link-color: 35, 137, 215; - --link-visited-color: #551a8b; - --error-color: #ffa9a9; - - // Label Colors - --prop-default: #fff; - --prop-gray: #ededed; - --prop-brown: #f7ddc3; - --prop-orange: #ffd3c1; - --prop-yellow: #f7f0b6; - --prop-green: #c7eac3; - --prop-blue: #b1d1f6; - --prop-purple: #e6d0ff; - --prop-pink: #ffd6e9; - --prop-red: #ffa9a9; - - // Elevations - --elevation-1: 0 2px 3px 0 rgba(0, 0, 0, 0.8); - --elevation-2: 0 4px 6px 0 rgba(0, 0, 0, 0.12); - --elevation-3: 0 6px 14px 0 rgba(0, 0, 0, 0.12); - --elevation-4: 0 8px 24px 0 rgba(0, 0, 0, 0.12); - --elevation-5: 0 12px 32px 0 rgba(0, 0, 0, 0.12); - --elevation-6: 0 20px 32px 0 rgba(0, 0, 0, 0.12); - - // Radius - --default-rad: 4px; - --modal-rad: 8px; -} +@import "./shared-variables"; +@import "./focalboard-variables"; diff --git a/webapp/src/theme.ts b/webapp/src/theme.ts index 34239f59b..cdf6280b4 100644 --- a/webapp/src/theme.ts +++ b/webapp/src/theme.ts @@ -3,6 +3,9 @@ import {CSSObject} from '@emotion/serialize' import isEqual from 'lodash/isEqual' +import color from 'color' + +import {Utils} from './utils' let activeThemeName: string @@ -119,18 +122,38 @@ export function setTheme(theme: Theme | null): Theme { setActiveThemeName(consolidatedTheme, theme) - document.documentElement.style.setProperty('--main-bg', consolidatedTheme.mainBg) - document.documentElement.style.setProperty('--main-fg', consolidatedTheme.mainFg) - document.documentElement.style.setProperty('--body-color', consolidatedTheme.mainFg) - document.documentElement.style.setProperty('--button-bg', consolidatedTheme.buttonBg) - document.documentElement.style.setProperty('--button-fg', consolidatedTheme.buttonFg) - document.documentElement.style.setProperty('--sidebar-bg', consolidatedTheme.sidebarBg) - document.documentElement.style.setProperty('--sidebar-fg', consolidatedTheme.sidebarFg) - document.documentElement.style.setProperty('--sidebar-text-active-border', consolidatedTheme.sidebarTextActiveBorder) - document.documentElement.style.setProperty('--sidebar-white-logo', consolidatedTheme.sidebarWhiteLogo) + if (!Utils.isFocalboardPlugin()) { + document.documentElement.style.setProperty('--center-channel-bg-rgb', consolidatedTheme.mainBg) + document.documentElement.style.setProperty('--center-channel-color-rgb', consolidatedTheme.mainFg) + document.documentElement.style.setProperty('--button-bg-rgb', consolidatedTheme.buttonBg) + document.documentElement.style.setProperty('--button-color-rgb', consolidatedTheme.buttonFg) + document.documentElement.style.setProperty('--sidebar-bg-rgb', consolidatedTheme.sidebarBg) + document.documentElement.style.setProperty('--sidebar-text-rgb', consolidatedTheme.sidebarFg) + document.documentElement.style.setProperty('--link-color-rgb', consolidatedTheme.link) + document.documentElement.style.setProperty('--sidebar-text-active-border', consolidatedTheme.sidebarTextActiveBorder) + } - document.documentElement.style.setProperty('--link-color', consolidatedTheme.link) - document.documentElement.style.setProperty('--link-visited-color', consolidatedTheme.linkVisited) + document.documentElement.style.setProperty('--sidebar-white-logo', consolidatedTheme.sidebarWhiteLogo) + document.documentElement.style.setProperty('--link-visited-color-rgb', consolidatedTheme.linkVisited) + + const mainBgColor = color(`rgb(${getComputedStyle(document.documentElement).getPropertyValue('--center-channel-bg-rgb')})`) + + if (Utils.isFocalboardPlugin()) { + let fixedTheme = lightTheme + if (mainBgColor.isDark()) { + fixedTheme = darkTheme + } + consolidatedTheme.propDefault = fixedTheme.propDefault + consolidatedTheme.propGray = fixedTheme.propGray + consolidatedTheme.propBrown = fixedTheme.propBrown + consolidatedTheme.propOrange = fixedTheme.propOrange + consolidatedTheme.propYellow = fixedTheme.propYellow + consolidatedTheme.propGreen = fixedTheme.propGreen + consolidatedTheme.propBlue = fixedTheme.propBlue + consolidatedTheme.propPurple = fixedTheme.propPurple + consolidatedTheme.propPink = fixedTheme.propPink + consolidatedTheme.propRed = fixedTheme.propRed + } document.documentElement.style.setProperty('--prop-default', consolidatedTheme.propDefault) document.documentElement.style.setProperty('--prop-gray', consolidatedTheme.propGray) @@ -212,12 +235,12 @@ export function getSelectBaseStyle() { menu: (provided: CSSObject): CSSObject => ({ ...provided, width: 'unset', - background: 'rgb(var(--main-bg))', + background: 'rgb(var(--center-channel-bg-rgb))', }), option: (provided: CSSObject, state: { isFocused: boolean }): CSSObject => ({ ...provided, - background: state.isFocused ? 'rgba(var(--main-fg), 0.1)' : 'rgb(var(--main-bg))', - color: state.isFocused ? 'rgb(var(--main-fg))' : 'rgb(var(--main-fg))', + background: state.isFocused ? 'rgba(var(--center-channel-color-rgb), 0.1)' : 'rgb(var(--center-channel-bg-rgb))', + color: state.isFocused ? 'rgb(var(--center-channel-color-rgb))' : 'rgb(var(--center-channel-color-rgb))', padding: '2px 8px', }), control: (): CSSObject => ({ @@ -237,7 +260,7 @@ export function getSelectBaseStyle() { }), singleValue: (provided: CSSObject): CSSObject => ({ ...provided, - color: 'rgb(var(--main-fg))', + color: 'rgb(var(--center-channel-color-rgb))', overflow: 'unset', maxWidth: 'calc(100% - 20px)', }), diff --git a/webapp/src/widgets/buttons/button.scss b/webapp/src/widgets/buttons/button.scss index dd61b2c07..e36e179ca 100644 --- a/webapp/src/widgets/buttons/button.scss +++ b/webapp/src/widgets/buttons/button.scss @@ -14,29 +14,29 @@ color: inherit; &:hover { - background-color: rgba(var(--body-color), 0.1); + background-color: rgba(var(--center-channel-color-rgb), 0.1); } &.filled { color: #ffffff; - background-color: rgb(var(--button-bg)); + background-color: rgb(var(--button-bg-rgb)); padding: 6px 12px; &:hover { - background-color: rgb(var(--button-bg), 0.8); + background-color: rgb(var(--button-bg-rgb), 0.8); } } &.emphasis--secondary { - border: 1px solid rgb(var(--button-bg)); - color: rgb(var(--button-bg)); + border: 1px solid rgb(var(--button-bg-rgb)); + color: rgb(var(--button-bg-rgb)); &:hover { - background-color: rgb(var(--button-bg), 0.08); + background-color: rgb(var(--button-bg-rgb), 0.08); } &:active { - background-color: rgb(var(--button-bg), 0.16); + background-color: rgb(var(--button-bg-rgb), 0.16); } } diff --git a/webapp/src/widgets/buttons/buttonWithMenu.scss b/webapp/src/widgets/buttons/buttonWithMenu.scss index 55d892cd7..0ed785fc9 100644 --- a/webapp/src/widgets/buttons/buttonWithMenu.scss +++ b/webapp/src/widgets/buttons/buttonWithMenu.scss @@ -9,20 +9,20 @@ .button-text { padding: 3px 10px; - background-color: rgb(var(--button-bg)); - color: rgb(var(--button-fg)); + background-color: rgb(var(--button-bg-rgb)); + color: rgb(var(--button-color-rgb)); border-radius: 5px 0 0 5px; transition: background 100ms ease-out 0s; height: 100%; &:hover { - background-color: rgba(var(--button-bg), 0.8); + background-color: rgba(var(--button-bg-rgb), 0.8); } } .button-dropdown { - background-color: rgb(var(--button-bg)); - border-left: 1px solid rgba(var(--button-fg), 0.2); + background-color: rgb(var(--button-bg-rgb)); + border-left: 1px solid rgba(var(--button-color-rgb), 0.2); display: flex; padding: 0 3px; align-items: center; @@ -31,10 +31,10 @@ height: 100%; &:hover { - background-color: rgba(var(--button-bg), 0.8); + background-color: rgba(var(--button-bg-rgb), 0.8); } .DropdownIcon { - color: rgb(var(--button-fg)); + color: rgb(var(--button-color-rgb)); } } } diff --git a/webapp/src/widgets/editable.scss b/webapp/src/widgets/editable.scss index 95e40a450..d1e7df739 100644 --- a/webapp/src/widgets/editable.scss +++ b/webapp/src/widgets/editable.scss @@ -9,11 +9,11 @@ min-width: 100px; } &::placeholder { - color: rgba(var(--body-color), 0.4); + color: rgba(var(--center-channel-color-rgb), 0.4); opacity: 1; } &.error { - border: 1px solid var(--error-color); + border: 1px solid var(--error-text-rgb); border-radius: var(--default-rad); } &.readonly { diff --git a/webapp/src/widgets/editableDayPicker.scss b/webapp/src/widgets/editableDayPicker.scss index fcbddcdde..67cca1026 100644 --- a/webapp/src/widgets/editableDayPicker.scss +++ b/webapp/src/widgets/editableDayPicker.scss @@ -11,18 +11,18 @@ min-width: 100px; } &::placeholder { - color: rgba(var(--body-color), 0.4); + color: rgba(var(--center-channel-color-rgb), 0.4); opacity: 1; } &.error { - border: 1px solid var(--error-color); + border: 1px solid var(--error-text-rgb); border-radius: var(--default-rad); } } } .DayPickerInput-Overlay { - background-color: rgba(var(--main-bg)); + background-color: rgba(var(--center-channel-bg-rgb)); box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1),0 4px 11px hsla(0, 0%, 0%, 0.1); line-height: 100%; } @@ -32,6 +32,6 @@ .DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover { - background-color: rgba(var(--body-color), 0.2); + background-color: rgba(var(--center-channel-color-rgb), 0.2); } } diff --git a/webapp/src/widgets/emojiPicker.scss b/webapp/src/widgets/emojiPicker.scss index 185376c9a..229bde211 100644 --- a/webapp/src/widgets/emojiPicker.scss +++ b/webapp/src/widgets/emojiPicker.scss @@ -1,20 +1,20 @@ .focalboard-body .EmojiPicker { .emoji-mart { - color: rgb(var(--body-color)); - background: rgb(var(--main-bg)); - border-color: rgba(var(--body-color), 0.16); + color: rgb(var(--center-channel-color-rgb)); + background: rgb(var(--center-channel-bg-rgb)); + border-color: rgba(var(--center-channel-color-rgb), 0.16); .emoji-mart-bar { - border: 0 solid rgba(var(--body-color), 0.16); + border: 0 solid rgba(var(--center-channel-color-rgb), 0.16); border-bottom-width: 1px; } .emoji-mart-search input { - border: 1px solid rgba(var(--body-color), 0.16); + border: 1px solid rgba(var(--center-channel-color-rgb), 0.16); } .emoji-mart-category-label span { - background: rgb(var(--main-bg)); + background: rgb(var(--center-channel-bg-rgb)); } .emoji-mart-search-icon svg { - fill: rgb(var(--body-color)); + fill: rgb(var(--center-channel-color-rgb)); } } } diff --git a/webapp/src/widgets/icons/add.scss b/webapp/src/widgets/icons/add.scss index 45b6d87ff..7e844a99b 100644 --- a/webapp/src/widgets/icons/add.scss +++ b/webapp/src/widgets/icons/add.scss @@ -1,4 +1,4 @@ .focalboard-body .AddIcon { - color: rgb(var(--body-color), 0.5); + color: rgb(var(--center-channel-color-rgb), 0.5); font-size: 16px; } diff --git a/webapp/src/widgets/icons/check.scss b/webapp/src/widgets/icons/check.scss index 869f7c6aa..dee79ef36 100644 --- a/webapp/src/widgets/icons/check.scss +++ b/webapp/src/widgets/icons/check.scss @@ -1,5 +1,5 @@ .focalboard-body .CheckIcon { - stroke: rgba(var(--body-color), 0.5); + stroke: rgba(var(--center-channel-color-rgb), 0.5); stroke-width: 8px; fill: none; width: 24px; diff --git a/webapp/src/widgets/icons/close.scss b/webapp/src/widgets/icons/close.scss index 6ff519620..258fbc17f 100644 --- a/webapp/src/widgets/icons/close.scss +++ b/webapp/src/widgets/icons/close.scss @@ -1,4 +1,4 @@ .focalboard-body .CloseIcon { - color: rgb(var(--body-color), 0.5); + color: rgb(var(--center-channel-color-rgb), 0.5); font-size: 24px; } diff --git a/webapp/src/widgets/icons/delete.scss b/webapp/src/widgets/icons/delete.scss index b438c8664..1a359ad97 100644 --- a/webapp/src/widgets/icons/delete.scss +++ b/webapp/src/widgets/icons/delete.scss @@ -1,5 +1,5 @@ .focalboard-body .DeleteIcon { - fill: rgba(var(--body-color), 0.5); + fill: rgba(var(--center-channel-color-rgb), 0.5); stroke: none; width: 24px; height: 24px; diff --git a/webapp/src/widgets/icons/disclosureTriangle.scss b/webapp/src/widgets/icons/disclosureTriangle.scss index 56a489026..28b510994 100644 --- a/webapp/src/widgets/icons/disclosureTriangle.scss +++ b/webapp/src/widgets/icons/disclosureTriangle.scss @@ -1,5 +1,5 @@ .focalboard-body .DisclosureTriangleIcon { - fill: rgba(var(--body-color), 0.7); + fill: rgba(var(--center-channel-color-rgb), 0.7); stroke: none; width: 24px; height: 24px; diff --git a/webapp/src/widgets/icons/divider.scss b/webapp/src/widgets/icons/divider.scss index 0266ddaaf..4f2b350fa 100644 --- a/webapp/src/widgets/icons/divider.scss +++ b/webapp/src/widgets/icons/divider.scss @@ -1,5 +1,5 @@ .focalboard-body .DividerIcon { - fill: rgba(var(--body-color), 0.7); + fill: rgba(var(--center-channel-color-rgb), 0.7); stroke: none; width: 24px; height: 24px; diff --git a/webapp/src/widgets/icons/dot.scss b/webapp/src/widgets/icons/dot.scss index 168ada10f..770141408 100644 --- a/webapp/src/widgets/icons/dot.scss +++ b/webapp/src/widgets/icons/dot.scss @@ -1,5 +1,5 @@ .focalboard-body .DotIcon { - fill: rgba(var(--body-color), 0.5); + fill: rgba(var(--center-channel-color-rgb), 0.5); width: 24px; height: 24px; } diff --git a/webapp/src/widgets/icons/dropdown.scss b/webapp/src/widgets/icons/dropdown.scss index 198c2012e..e049466d6 100644 --- a/webapp/src/widgets/icons/dropdown.scss +++ b/webapp/src/widgets/icons/dropdown.scss @@ -1,4 +1,4 @@ .focalboard-body .DropdownIcon { - color: rgb(var(--body-color)); + color: rgb(var(--center-channel-color-rgb)); font-size: 16px; } diff --git a/webapp/src/widgets/icons/duplicate.scss b/webapp/src/widgets/icons/duplicate.scss index 6ef5436c5..f0856be75 100644 --- a/webapp/src/widgets/icons/duplicate.scss +++ b/webapp/src/widgets/icons/duplicate.scss @@ -1,5 +1,5 @@ .focalboard-body .DuplicateIcon { - fill: rgba(var(--body-color), 0.7); + fill: rgba(var(--center-channel-color-rgb), 0.7); stroke: none; width: 24px; height: 24px; diff --git a/webapp/src/widgets/icons/edit.scss b/webapp/src/widgets/icons/edit.scss index 33ce9c353..d71440bdc 100644 --- a/webapp/src/widgets/icons/edit.scss +++ b/webapp/src/widgets/icons/edit.scss @@ -1,5 +1,5 @@ .focalboard-body .EditIcon { - fill: rgba(var(--body-color), 0.5); + fill: rgba(var(--center-channel-color-rgb), 0.5); stroke: none; width: 24px; height: 24px; diff --git a/webapp/src/widgets/icons/emoji.scss b/webapp/src/widgets/icons/emoji.scss index 39520cd1d..68180d24c 100644 --- a/webapp/src/widgets/icons/emoji.scss +++ b/webapp/src/widgets/icons/emoji.scss @@ -1,5 +1,5 @@ .focalboard-body .EmojiIcon { - fill: rgba(var(--body-color), 0.7); + fill: rgba(var(--center-channel-color-rgb), 0.7); stroke: none; width: 24px; height: 24px; diff --git a/webapp/src/widgets/icons/gallery.scss b/webapp/src/widgets/icons/gallery.scss index efcf66124..75cad36af 100644 --- a/webapp/src/widgets/icons/gallery.scss +++ b/webapp/src/widgets/icons/gallery.scss @@ -1,5 +1,5 @@ .focalboard-body .GalleryIcon { - fill: rgba(var(--body-color), 0.7); + fill: rgba(var(--center-channel-color-rgb), 0.7); stroke: none; width: 24px; height: 24px; diff --git a/webapp/src/widgets/icons/grip.scss b/webapp/src/widgets/icons/grip.scss index ae7ccfaeb..5e01007b2 100644 --- a/webapp/src/widgets/icons/grip.scss +++ b/webapp/src/widgets/icons/grip.scss @@ -1,5 +1,5 @@ .focalboard-body .GripIcon { - fill: rgb(var(--body-color), 0.5); + fill: rgb(var(--center-channel-color-rgb), 0.5); stroke: none; width: 24px; height: 24px; diff --git a/webapp/src/widgets/icons/hamburger.scss b/webapp/src/widgets/icons/hamburger.scss index fc95142f7..6aca63ebb 100644 --- a/webapp/src/widgets/icons/hamburger.scss +++ b/webapp/src/widgets/icons/hamburger.scss @@ -1,5 +1,5 @@ .focalboard-body .HamburgerIcon { - stroke: rgba(var(--body-color), 0.5); + stroke: rgba(var(--center-channel-color-rgb), 0.5); stroke-width: 6px; fill: none; width: 24px; diff --git a/webapp/src/widgets/icons/hide.scss b/webapp/src/widgets/icons/hide.scss index fc2cb450c..92257666f 100644 --- a/webapp/src/widgets/icons/hide.scss +++ b/webapp/src/widgets/icons/hide.scss @@ -1,5 +1,5 @@ .focalboard-body .HideIcon { - fill: rgba(var(--body-color), 0.7); + fill: rgba(var(--center-channel-color-rgb), 0.7); stroke: none; width: 24px; height: 24px; diff --git a/webapp/src/widgets/icons/hideSidebar.scss b/webapp/src/widgets/icons/hideSidebar.scss index e23097ecc..f3f655a2a 100644 --- a/webapp/src/widgets/icons/hideSidebar.scss +++ b/webapp/src/widgets/icons/hideSidebar.scss @@ -1,5 +1,5 @@ .focalboard-body .HideSidebarIcon { - stroke: rgba(var(--body-color), 0.5); + stroke: rgba(var(--center-channel-color-rgb), 0.5); stroke-width: 6px; fill: none; width: 24px; diff --git a/webapp/src/widgets/icons/image.scss b/webapp/src/widgets/icons/image.scss index f4a01d6b1..a10e5e6bf 100644 --- a/webapp/src/widgets/icons/image.scss +++ b/webapp/src/widgets/icons/image.scss @@ -1,5 +1,5 @@ .focalboard-body .ImageIcon { - fill: rgba(var(--body-color), 0.7); + fill: rgba(var(--center-channel-color-rgb), 0.7); stroke: none; width: 24px; height: 24px; diff --git a/webapp/src/widgets/icons/options.scss b/webapp/src/widgets/icons/options.scss index 98e6c64b4..30fc77aa3 100644 --- a/webapp/src/widgets/icons/options.scss +++ b/webapp/src/widgets/icons/options.scss @@ -1,4 +1,4 @@ .focalboard-body .OptionsIcon { - color: rgba(var(--body-color), 0.5); + color: rgba(var(--center-channel-color-rgb), 0.5); font-size: 16px; } diff --git a/webapp/src/widgets/icons/show.scss b/webapp/src/widgets/icons/show.scss index 1074ae55b..5c087f58e 100644 --- a/webapp/src/widgets/icons/show.scss +++ b/webapp/src/widgets/icons/show.scss @@ -1,5 +1,5 @@ .focalboard-body .ShowIcon { - fill: rgba(var(--body-color), 0.7); + fill: rgba(var(--center-channel-color-rgb), 0.7); stroke: none; width: 24px; height: 24px; diff --git a/webapp/src/widgets/icons/showSidebar.scss b/webapp/src/widgets/icons/showSidebar.scss index 79992db2a..6f603f717 100644 --- a/webapp/src/widgets/icons/showSidebar.scss +++ b/webapp/src/widgets/icons/showSidebar.scss @@ -1,5 +1,5 @@ .focalboard-body .ShowSidebarIcon { - stroke: rgba(var(--body-color), 0.5); + stroke: rgba(var(--center-channel-color-rgb), 0.5); stroke-width: 6px; fill: none; width: 24px; diff --git a/webapp/src/widgets/icons/sortDown.scss b/webapp/src/widgets/icons/sortDown.scss index 693db0a7f..587ca9825 100644 --- a/webapp/src/widgets/icons/sortDown.scss +++ b/webapp/src/widgets/icons/sortDown.scss @@ -1,5 +1,5 @@ .focalboard-body .SortDownIcon { - stroke: rgba(var(--body-color), 0.5); + stroke: rgba(var(--center-channel-color-rgb), 0.5); stroke-width: 8px; fill: none; width: 24px; diff --git a/webapp/src/widgets/icons/sortUp.scss b/webapp/src/widgets/icons/sortUp.scss index c6812421b..b51de0b21 100644 --- a/webapp/src/widgets/icons/sortUp.scss +++ b/webapp/src/widgets/icons/sortUp.scss @@ -1,5 +1,5 @@ .focalboard-body .SortUpIcon { - stroke: rgba(var(--body-color), 0.5); + stroke: rgba(var(--center-channel-color-rgb), 0.5); stroke-width: 8px; fill: none; width: 24px; diff --git a/webapp/src/widgets/icons/standardIcon.scss b/webapp/src/widgets/icons/standardIcon.scss index 5899cb425..be7102bf4 100644 --- a/webapp/src/widgets/icons/standardIcon.scss +++ b/webapp/src/widgets/icons/standardIcon.scss @@ -1,5 +1,5 @@ .focalboard-body .StandardIcon { - stroke: rgba(var(--body-color), 0.5); + stroke: rgba(var(--center-channel-color-rgb), 0.5); stroke-width: 4px; fill: none; width: 24px; diff --git a/webapp/src/widgets/icons/submenuTriangle.scss b/webapp/src/widgets/icons/submenuTriangle.scss index 16afe7713..7cd385d68 100644 --- a/webapp/src/widgets/icons/submenuTriangle.scss +++ b/webapp/src/widgets/icons/submenuTriangle.scss @@ -1,5 +1,5 @@ .focalboard-body .SubmenuTriangleIcon { - fill: rgba(var(--body-color), 0.7); + fill: rgba(var(--center-channel-color-rgb), 0.7); stroke: none; width: 24px; height: 24px; diff --git a/webapp/src/widgets/icons/text.scss b/webapp/src/widgets/icons/text.scss index 71bb64782..857dc7eea 100644 --- a/webapp/src/widgets/icons/text.scss +++ b/webapp/src/widgets/icons/text.scss @@ -1,5 +1,5 @@ .focalboard-body .TextIcon { - fill: rgba(var(--body-color), 0.7); + fill: rgba(var(--center-channel-color-rgb), 0.7); stroke: none; width: 24px; height: 24px; diff --git a/webapp/src/widgets/label.scss b/webapp/src/widgets/label.scss index 8ae420c5e..0412cf98e 100644 --- a/webapp/src/widgets/label.scss +++ b/webapp/src/widgets/label.scss @@ -4,7 +4,7 @@ padding: 2px 8px; border-radius: 3px; line-height: 20px; - color: rgba(var(--body-color), 0.8); + color: rgba(var(--center-channel-color-rgb), 0.8); white-space: nowrap; text-transform: uppercase; font-weight: 600; @@ -14,7 +14,7 @@ input { line-height: 20px; - color: rgba(var(--body-color), 0.8); + color: rgba(var(--center-channel-color-rgb), 0.8); text-transform: uppercase; font-weight: 600; font-size: 13px; diff --git a/webapp/src/widgets/menu/menu.scss b/webapp/src/widgets/menu/menu.scss index 930967be6..0c20afcf2 100644 --- a/webapp/src/widgets/menu/menu.scss +++ b/webapp/src/widgets/menu/menu.scss @@ -4,8 +4,8 @@ position: absolute; z-index: 15; min-width: 180px; - background-color: rgb(var(--main-bg)); - color: rgb(var(--body-color)); + background-color: rgb(var(--center-channel-bg-rgb)); + color: rgb(var(--center-channel-color-rgb)); border-radius: var(--default-rad); box-shadow: var(--elevation-4); @@ -27,7 +27,7 @@ padding: 0; margin: 0; - color: rgb(var(--body-color)); + color: rgb(var(--center-channel-color-rgb)); > .menu-option { display: flex; @@ -42,7 +42,7 @@ cursor: pointer; &:hover { - background: rgba(var(--button-bg), 0.08); + background: rgba(var(--button-bg-rgb), 0.08); } > * { @@ -60,7 +60,7 @@ } > .SubmenuTriangleIcon { - fill: rgba(var(--body-color), 0.7); + fill: rgba(var(--center-channel-color-rgb), 0.7); } > .Icon { @@ -102,7 +102,7 @@ right: 0; bottom: 0; min-width: 0; - background-color: rgba(var(--body-color), 0.5); + background-color: rgba(var(--center-channel-color-rgb), 0.5); border-radius: 0; padding: 10px; @@ -125,7 +125,7 @@ min-height: 44px; width: 100%; padding: 0 20px; - background-color: rgb(var(--main-bg)); + background-color: rgb(var(--center-channel-bg-rgb)); > * { flex: 0 0 auto; diff --git a/webapp/src/widgets/menu/separatorOption.scss b/webapp/src/widgets/menu/separatorOption.scss index 33868fe3a..3fb2b3532 100644 --- a/webapp/src/widgets/menu/separatorOption.scss +++ b/webapp/src/widgets/menu/separatorOption.scss @@ -1,4 +1,4 @@ .focalboard-body .MenuSeparator { - border-bottom: solid 1px rgba(var(--body-color), 0.16); + border-bottom: solid 1px rgba(var(--center-channel-color-rgb), 0.16); margin: 8px 0; } diff --git a/webapp/src/widgets/menu/subMenuOption.scss b/webapp/src/widgets/menu/subMenuOption.scss index 7371384b2..0c820309b 100644 --- a/webapp/src/widgets/menu/subMenuOption.scss +++ b/webapp/src/widgets/menu/subMenuOption.scss @@ -20,14 +20,12 @@ position: absolute; z-index: 16; min-width: 180px; - background-color: rgb(var(--main-bg)); - color: rgb(var(--body-color)); + background-color: rgb(var(--center-channel-bg-rgb)); + color: rgb(var(--center-channel-color-rgb)); margin: 0 !important; - border-radius: 3px; - box-shadow: rgba(var(--body-color), 0.05) 0px 0px 0px 1px, - rgba(var(--body-color), 0.1) 0px 3px 6px, - rgba(var(--body-color), 0.2) 0px 9px 24px; + border-radius: var(--default-rad); + box-shadow: var(--elevation-4); left: 100%; &.top { bottom: 0; @@ -48,7 +46,7 @@ @media screen and (max-width: 430px) { .SubMenu { - background-color: rgba(var(--body-color), 0.8) !important; + background-color: rgba(var(--center-channel-color-rgb), 0.8) !important; } } } diff --git a/webapp/src/widgets/switch.scss b/webapp/src/widgets/switch.scss index 4bfd4c276..d1d5d9ef1 100644 --- a/webapp/src/widgets/switch.scss +++ b/webapp/src/widgets/switch.scss @@ -7,12 +7,12 @@ width: 26px; border-radius: 44px; padding: 2px; - background-color: rgba(var(--body-color), 0.24); + background-color: rgba(var(--center-channel-color-rgb), 0.24); transition: background 200ms ease 0s, box-shadow 200ms ease 0s; cursor: pointer; &.on { - background-color: rgb(var(--button-bg)); + background-color: rgb(var(--button-bg-rgb)); .octo-switch-inner { transform: translateX(12px) translateY(0px); } diff --git a/webapp/src/widgets/valueSelector.scss b/webapp/src/widgets/valueSelector.scss index 55ef1be15..c0b1c1742 100644 --- a/webapp/src/widgets/valueSelector.scss +++ b/webapp/src/widgets/valueSelector.scss @@ -1,7 +1,7 @@ .focalboard-body .ValueSelector { width: 100%; border-radius: var(--default-rad); - color: rgb(var(--body-color)); + color: rgb(var(--center-channel-color-rgb)); display: flex; > .Label { @@ -9,7 +9,7 @@ max-width: calc(100% - 10px); &.empty { - color: rgba(var(--body-color), 0.6); + color: rgba(var(--center-channel-color-rgb), 0.6); } } @@ -65,7 +65,7 @@ background-color: unset; &:hover { - background-color: rgba(var(--body-color), 0.1); + background-color: rgba(var(--center-channel-color-rgb), 0.1); } } } diff --git a/webapp/src/widgets/valueSelector.tsx b/webapp/src/widgets/valueSelector.tsx index 890afb3b9..e2e5c1614 100644 --- a/webapp/src/widgets/valueSelector.tsx +++ b/webapp/src/widgets/valueSelector.tsx @@ -97,8 +97,8 @@ const valueSelectorStyle = { ...getSelectBaseStyle(), option: (provided: CSSObject, state: {isFocused: boolean}): CSSObject => ({ ...provided, - background: state.isFocused ? 'rgba(var(--main-fg), 0.1)' : 'rgb(var(--main-bg))', - color: state.isFocused ? 'rgb(var(--main-fg))' : 'rgb(var(--main-fg))', + background: state.isFocused ? 'rgba(var(--center-channel-color-rgb), 0.1)' : 'rgb(var(--center-channel-bg-rgb))', + color: state.isFocused ? 'rgb(var(--center-channel-color-rgb))' : 'rgb(var(--center-channel-color-rgb))', padding: '8px', }), control: (): CSSObject => ({ @@ -129,7 +129,7 @@ const valueSelectorStyle = { menu: (provided: CSSObject): CSSObject => ({ ...provided, width: 'unset', - background: 'rgb(var(--main-bg))', + background: 'rgb(var(--center-channel-bg-rgb))', minWidth: '260px', }), }