self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2024-11-24 08:22:29 +02:00
Code Issues Releases Activity

Making theming compatible with mattermost on plugin mode (#883)

Browse Source 
* Making theming compatible with mattermost on plugin mode

* Fixing some variables

* Adding isFocalboardPlugin function

* Fixing some styles

* Improving styles for boards icon in the global switcher
This commit is contained in:
Jesús Espino 2021-08-06 19:58:28 +02:00 committed by GitHub
parent 38e71d8b18
commit 1914b5a921
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
79 changed files with 392 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
mattermost-plugin/webapp/src/index.tsx
View File

@ -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 (
<span style={{height: 24, width: 24, display: 'inline-block'}}>
<span className='FocalboardGlobalHeaderIcon'>
<FocalboardIcon/>
</span>
)

7
mattermost-plugin/webapp/src/plugin.scss
View File

@ -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));
}

122
webapp/package-lock.json generated
View File

@ -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",

2
webapp/package.json
View File

@ -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",

2
webapp/src/components/blockIconSelector.scss
View File

@ -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;

8
webapp/src/components/cardDetail/cardDetail.scss
View File

@ -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);
}
}
}

2
webapp/src/components/cardDetail/comment.scss
View File

@ -41,7 +41,7 @@
}
.comment-text {
color: rgb(var(--body-color));
color: rgb(var(--center-channel-color-rgb));
width: 100%;
padding-left: 28px;

2
webapp/src/components/cardDetail/commentsList.scss
View File

@ -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;

2
webapp/src/components/centerPanel.scss
View File

@ -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;
}
}

2
webapp/src/components/content/dividerElement.scss
View File

@ -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;
}

8
webapp/src/components/dialog.scss
View File

@ -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;

2
webapp/src/components/emptyCenterPanel.scss
View File

@ -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 {

6
webapp/src/components/gallery/gallery.scss
View File

@ -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);
}
}
}

12
webapp/src/components/gallery/galleryCard.scss
View File

@ -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;

2
webapp/src/components/globalHeader/globalHeader.scss
View File

@ -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;
}
}

6
webapp/src/components/globalHeader/globalHeaderSettingsMenu.scss
View File

@ -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;
}
}

4
webapp/src/components/kanban/kanban.scss
View File

@ -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);
}
}

14
webapp/src/components/kanban/kanbanCard.scss
View File

@ -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;
}

4
webapp/src/components/markdownEditor.scss
View File

@ -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 {

2
webapp/src/components/modal.scss
View File

@ -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);

8
webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap
View File

@ -18,7 +18,7 @@ exports[`components/properties/user not readonly 1`] = `
class=" css-kpfmlq-ValueContainer"
>
<div
class=" css-14tjw7f-singleValue"
class=" css-ciz25-singleValue"
>
username-1
</div>
@ -206,7 +206,7 @@ exports[`components/properties/user user dropdown open 1`] = `
class=" css-kpfmlq-ValueContainer"
>
<div
class=" css-14tjw7f-singleValue"
class=" css-ciz25-singleValue"
>
username-1
</div>
@ -278,13 +278,13 @@ exports[`components/properties/user user dropdown open 1`] = `
</div>
</div>
<div
class=" css-7p3rb2-menu"
class=" css-l4y5re-menu"
>
<div
class=" css-g29tl0-MenuList"
>
<div
class=" css-1pe17ep-option"
class=" css-xoibch-option"
id="react-select-4-option-0"
tabindex="-1"
>

2
webapp/src/components/shareBoardComponent.scss
View File

@ -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 {

2
webapp/src/components/sidebar/registrationLink.scss
View File

@ -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;

16
webapp/src/components/sidebar/sidebar.scss
View File

@ -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;
}
}

4
webapp/src/components/sidebar/sidebarAddBoardMenu.scss
View File

@ -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;
}
}

20
webapp/src/components/sidebar/sidebarBoardItem.scss
View File

@ -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);
}
}

4
webapp/src/components/sidebar/sidebarSettingsMenu.scss
View File

@ -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;
}
}

6
webapp/src/components/sidebar/sidebarUserMenu.scss
View File

@ -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);
}
}
}

26
webapp/src/components/table/table.scss
View File

@ -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);
}
}
}

10
webapp/src/components/table/tableRow.scss
View File

@ -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;

6
webapp/src/components/viewHeader/viewHeader.scss
View File

@ -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);
}
}

2
webapp/src/components/viewHeader/viewHeaderGroupByMenu.tsx
View File

@ -30,7 +30,7 @@ const ViewHeaderGroupByMenu = React.memo((props: Props) => {
values={{
property: (
<span
style={{color: 'rgb(var(--main-fg))'}}
style={{color: 'rgb(var(--center-channel-color-rgb))'}}
id='groupByLabel'
>
{groupByPropertyName}

2
webapp/src/components/viewTitle.scss
View File

@ -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;

4
webapp/src/pages/changePasswordPage.scss
View File

@ -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;

4
webapp/src/pages/errorPage.scss
View File

@ -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;

4
webapp/src/pages/loginPage.scss
View File

@ -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;

4
webapp/src/pages/registerPage.scss
View File

@ -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;

27
webapp/src/styles/focalboard-variables.scss Normal file
View File

@ -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;
}

24
webapp/src/styles/main.scss
View File

@ -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,

10
webapp/src/styles/shared-variables.scss Normal file
View File

@ -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;
}

38
webapp/src/styles/variables.scss
View File

@ -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";

53
webapp/src/theme.ts
View File

@ -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)',
}),

14
webapp/src/widgets/buttons/button.scss
View File

@ -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);
}
}

14
webapp/src/widgets/buttons/buttonWithMenu.scss
View File

@ -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));
}
}
}

4
webapp/src/widgets/editable.scss
View File

@ -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 {

8
webapp/src/widgets/editableDayPicker.scss
View File

@ -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);
}
}

14
webapp/src/widgets/emojiPicker.scss
View File

@ -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));
}
}
}

2
webapp/src/widgets/icons/add.scss
View File

@ -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;
}

2
webapp/src/widgets/icons/check.scss
View File

@ -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;

2
webapp/src/widgets/icons/close.scss
View File

@ -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;
}

2
webapp/src/widgets/icons/delete.scss
View File

@ -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;

2
webapp/src/widgets/icons/disclosureTriangle.scss
View File

@ -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;

2
webapp/src/widgets/icons/divider.scss
View File

@ -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;

2
webapp/src/widgets/icons/dot.scss
View File

@ -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;
}

2
webapp/src/widgets/icons/dropdown.scss
View File

@ -1,4 +1,4 @@
.focalboard-body .DropdownIcon {
color: rgb(var(--body-color));
color: rgb(var(--center-channel-color-rgb));
font-size: 16px;
}

2
webapp/src/widgets/icons/duplicate.scss
View File

@ -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;

2
webapp/src/widgets/icons/edit.scss
View File

@ -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;

2
webapp/src/widgets/icons/emoji.scss
View File

@ -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;

2
webapp/src/widgets/icons/gallery.scss
View File

@ -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;

2
webapp/src/widgets/icons/grip.scss
View File

@ -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;

2
webapp/src/widgets/icons/hamburger.scss
View File

@ -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;

2
webapp/src/widgets/icons/hide.scss
View File

@ -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;

2
webapp/src/widgets/icons/hideSidebar.scss
View File

@ -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;

2
webapp/src/widgets/icons/image.scss
View File

@ -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;

2
webapp/src/widgets/icons/options.scss
View File

@ -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;
}

2
webapp/src/widgets/icons/show.scss
View File

@ -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;

2
webapp/src/widgets/icons/showSidebar.scss
View File

@ -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;

2
webapp/src/widgets/icons/sortDown.scss
View File

@ -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;

2
webapp/src/widgets/icons/sortUp.scss
View File

@ -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;

2
webapp/src/widgets/icons/standardIcon.scss
View File

@ -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;

2
webapp/src/widgets/icons/submenuTriangle.scss
View File

@ -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;

2
webapp/src/widgets/icons/text.scss
View File

@ -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;

4
webapp/src/widgets/label.scss
View File

@ -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;

14
webapp/src/widgets/menu/menu.scss
View File

@ -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;

2
webapp/src/widgets/menu/separatorOption.scss
View File

@ -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;
}

12
webapp/src/widgets/menu/subMenuOption.scss
View File

@ -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;
}
}
}

4
webapp/src/widgets/switch.scss
View File

@ -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);
}

6
webapp/src/widgets/valueSelector.scss
View File

@ -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);
}
}
}

6
webapp/src/widgets/valueSelector.tsx
View File

@ -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',
}),
}