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 GlobalHeader from '../../../webapp/src/components/globalHeader/globalHeader'
import FocalboardIcon from '../../../webapp/src/widgets/icons/logo' 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/main.scss'
import '../../../webapp/src/styles/labels.scss' import '../../../webapp/src/styles/labels.scss'
@ -31,7 +31,7 @@ import './plugin.scss'
const GlobalHeaderIcon = () => { const GlobalHeaderIcon = () => {
return ( return (
<span style={{height: 24, width: 24, display: 'inline-block'}}> <span className='FocalboardGlobalHeaderIcon'>
<FocalboardIcon/> <FocalboardIcon/>
</span> </span>
) )

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

@ -1,3 +1,10 @@
.channel-header__icon .LogoIcon { .channel-header__icon .LogoIcon {
height: 24px; 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", "version": "0.9.0",
"dependencies": { "dependencies": {
"@reduxjs/toolkit": "^1.6.0", "@reduxjs/toolkit": "^1.6.0",
"color": "^4.0.0",
"easymde": "^2.15.0", "easymde": "^2.15.0",
"emoji-mart": "^3.0.1", "emoji-mart": "^3.0.1",
"imagemin-gifsicle": "^7.0.0", "imagemin-gifsicle": "^7.0.0",
@ -42,6 +43,7 @@
"@testing-library/jest-dom": "^5.11.10", "@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^11.2.5", "@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^13.1.9", "@testing-library/user-event": "^13.1.9",
"@types/color": "^3.0.2",
"@types/emoji-mart": "^3.0.4", "@types/emoji-mart": "^3.0.4",
"@types/jest": "^26.0.21", "@types/jest": "^26.0.21",
"@types/marked": "^2.0.0", "@types/marked": "^2.0.0",
@ -1676,6 +1678,30 @@
"@types/tern": "*" "@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": { "node_modules/@types/emoji-mart": {
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/emoji-mart/-/emoji-mart-3.0.4.tgz", "resolved": "https://registry.npmjs.org/@types/emoji-mart/-/emoji-mart-3.0.4.tgz",
@ -4161,11 +4187,19 @@
"node": ">=0.10.0" "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": { "node_modules/color-convert": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"devOptional": true,
"dependencies": { "dependencies": {
"color-name": "~1.1.4" "color-name": "~1.1.4"
}, },
@ -4176,8 +4210,16 @@
"node_modules/color-name": { "node_modules/color-name": {
"version": "1.1.4", "version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
"devOptional": true },
"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": { "node_modules/colorette": {
"version": "1.2.2", "version": "1.2.2",
@ -13870,6 +13912,19 @@
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
"integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==" "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": { "node_modules/sisteransi": {
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@ -17839,6 +17894,30 @@
"@types/tern": "*" "@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": { "@types/emoji-mart": {
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/emoji-mart/-/emoji-mart-3.0.4.tgz", "resolved": "https://registry.npmjs.org/@types/emoji-mart/-/emoji-mart-3.0.4.tgz",
@ -20022,11 +20101,19 @@
"object-visit": "^1.0.0" "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": { "color-convert": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"devOptional": true,
"requires": { "requires": {
"color-name": "~1.1.4" "color-name": "~1.1.4"
} }
@ -20034,8 +20121,16 @@
"color-name": { "color-name": {
"version": "1.1.4", "version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
"devOptional": true },
"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": { "colorette": {
"version": "1.2.2", "version": "1.2.2",
@ -27949,6 +28044,21 @@
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
"integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==" "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": { "sisteransi": {
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",

2
webapp/package.json
View File

@ -25,6 +25,7 @@
}, },
"dependencies": { "dependencies": {
"@reduxjs/toolkit": "^1.6.0", "@reduxjs/toolkit": "^1.6.0",
"color": "^4.0.0",
"easymde": "^2.15.0", "easymde": "^2.15.0",
"emoji-mart": "^3.0.1", "emoji-mart": "^3.0.1",
"imagemin-gifsicle": "^7.0.0", "imagemin-gifsicle": "^7.0.0",
@ -76,6 +77,7 @@
"@testing-library/jest-dom": "^5.11.10", "@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^11.2.5", "@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^13.1.9", "@testing-library/user-event": "^13.1.9",
"@types/color": "^3.0.2",
"@types/emoji-mart": "^3.0.4", "@types/emoji-mart": "^3.0.4",
"@types/jest": "^26.0.21", "@types/jest": "^26.0.21",
"@types/marked": "^2.0.0", "@types/marked": "^2.0.0",

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

@ -8,7 +8,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&:not(.readonly):hover { &:not(.readonly):hover {
background-color: rgba(var(--body-color), 0.1); background-color: rgba(var(--center-channel-color-rgb), 0.1);
} }
&.size-s { &.size-s {
height: 24px; height: 24px;

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

@ -7,7 +7,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 30px; min-height: 30px;
color: rgba(var(--body-color), 0.4); color: rgba(var(--center-channel-color-rgb), 0.4);
width: 100%; width: 100%;
align-items: flex-start; align-items: flex-start;
.Button { .Button {
@ -45,13 +45,13 @@
.octo-propertyname { .octo-propertyname {
width: 150px; width: 150px;
margin-right: 5px; margin-right: 5px;
color: rgba(var(--body-color), 0.6); color: rgba(var(--center-channel-color-rgb), 0.6);
.Button { .Button {
text-align: left; text-align: left;
justify-content: unset; justify-content: unset;
} }
&.add-property { &.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; margin-left: 48px;
.Button { .Button {
opacity: 0; 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 { .comment-text {
color: rgb(var(--body-color)); color: rgb(var(--center-channel-color-rgb));
width: 100%; width: 100%;
padding-left: 28px; padding-left: 28px;

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

@ -23,7 +23,7 @@
} }
.newcomment { .newcomment {
color: rgba(var(--body-color), 0.8); color: rgba(var(--center-channel-color-rgb), 0.8);
flex-grow: 1; flex-grow: 1;
margin: 4px 0 0 8px; margin: 4px 0 0 8px;

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

@ -42,7 +42,7 @@
position: sticky; position: sticky;
top: 0; top: 0;
left: 0; left: 0;
background: rgb(var(--main-bg)); background: rgb(var(--center-channel-bg-rgb));
z-index: 100; z-index: 100;
} }
} }

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

@ -1,6 +1,6 @@
.focalboard-body .DividerElement { .focalboard-body .DividerElement {
padding-top: 16px; 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; margin-bottom: 17px;
flex-grow: 1; flex-grow: 1;
} }

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

@ -12,15 +12,15 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(var(--body-color), 0.5); background-color: rgba(var(--center-channel-color-rgb), 0.5);
} }
.dialog { .dialog {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: rgb(var(--main-bg)); background-color: rgb(var(--center-channel-bg-rgb));
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0px 0px 0px 1px,
rgba(var(--body-color), 0.1) 0px 2px 4px; rgba(var(--center-channel-color-rgb), 0.1) 0px 2px 4px;
border-radius: var(--modal-rad); border-radius: var(--modal-rad);
padding: 0; padding: 0;

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

@ -4,7 +4,7 @@
padding: 80px; padding: 80px;
font-size: 15px; font-size: 15px;
color: rgba(var(--body-color), 0.7); color: rgba(var(--center-channel-color-rgb), 0.7);
.WorkspaceInfo { .WorkspaceInfo {
b { b {

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

@ -3,9 +3,9 @@
flex-wrap: wrap; flex-wrap: wrap;
.octo-gallery-new { .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); border-radius: var(--default-rad);
color: rgba(var(--body-color), 0.3); color: rgba(var(--center-channel-color-rgb), 0.3);
cursor: pointer; cursor: pointer;
width: 280px; width: 280px;
min-height: 160px; min-height: 160px;
@ -20,7 +20,7 @@
} }
&:hover { &: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 { .focalboard-body .GalleryCard {
position: relative; 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); border-radius: var(--default-rad);
width: 280px; width: 280px;
display: flex; display: flex;
@ -14,14 +14,14 @@
} }
&:hover { &:hover {
background-color: rgba(var(--body-color), 0.05); background-color: rgba(var(--center-channel-color-rgb), 0.05);
.optionsMenu { .optionsMenu {
display: block; display: block;
} }
} }
.optionsMenu { .optionsMenu {
background-color: rgb(var(--main-bg)); background-color: rgb(var(--center-channel-bg-rgb));
border-radius: var(--default-rad); border-radius: var(--default-rad);
display: none; display: none;
position: absolute; position: absolute;
@ -29,12 +29,12 @@
top: 10px; top: 10px;
z-index: 30; z-index: 30;
.IconButton { .IconButton {
background-color: rgba(var(--body-color), 0.13); background-color: rgba(var(--center-channel-color-rgb), 0.13);
} }
} }
.gallery-item { .gallery-item {
background-color: rgba(var(--body-color), 0.03); background-color: rgba(var(--center-channel-color-rgb), 0.03);
flex-grow: 1; flex-grow: 1;
overflow: hidden; overflow: hidden;
@ -65,7 +65,7 @@
.gallery-title { .gallery-title {
flex-grow: 0; 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; margin: 0;
padding: 5px 10px; padding: 5px 10px;
display: flex; display: flex;

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

@ -11,7 +11,7 @@
padding: 0 17px; padding: 0 17px;
} }
.HelpIcon { .HelpIcon {
color: rgba(var(--sidebar-fg), 0.64); color: rgba(var(--sidebar-text-rgb), 0.64);
font-size: 20px; font-size: 20px;
} }
} }

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

@ -6,16 +6,16 @@
height: 36px; height: 36px;
align-items: center; align-items: center;
padding-left: 20px; padding-left: 20px;
color: rgba(var(--sidebar-fg), 0.64); color: rgba(var(--sidebar-text-rgb), 0.64);
font-weight: 400; font-weight: 400;
&:hover { &:hover {
background-color: rgba(var(--sidebar-fg), 0.08); background-color: rgba(var(--sidebar-text-rgb), 0.08);
display: flex; display: flex;
} }
} }
.SettingsIcon { .SettingsIcon {
color: rgba(var(--sidebar-fg), 0.64); color: rgba(var(--sidebar-text-rgb), 0.64);
font-size: 20px; font-size: 20px;
} }
} }

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

@ -12,7 +12,7 @@
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
background: rgb(var(--main-bg)); background: rgb(var(--center-channel-bg-rgb));
} }
.octo-board-header-cell { .octo-board-header-cell {
@ -39,7 +39,7 @@
.IconButton { .IconButton {
background-color: unset; background-color: unset;
&:hover { &: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; border-radius: 3px;
margin-bottom: 10px; margin-bottom: 10px;
padding: 8px 16px; padding: 8px 16px;
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0px 0px 0px 1px,
rgba(var(--body-color), 0.1) 0px 2px 4px; rgba(var(--center-channel-color-rgb), 0.1) 0px 2px 4px;
cursor: pointer; cursor: pointer;
color: rgb(var(--body-color)); color: rgb(var(--center-channel-color-rgb));
transition: background 100ms ease-out 0s; transition: background 100ms ease-out 0s;
&:hover { &:hover {
background-color: rgba(var(--body-color), 0.1); background-color: rgba(var(--center-channel-color-rgb), 0.1);
.optionsMenu { .optionsMenu {
display: block; display: block;
} }
@ -57,9 +57,9 @@
border-radius: 3px; border-radius: 3px;
margin-right: 6px; margin-right: 6px;
padding: 0; padding: 0;
background: rgb(var(--body-color), 0.1); background: rgb(var(--center-channel-color-rgb), 0.1);
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0px 0px 0px 1px,
rgba(var(--body-color), 0.1) 0px 2px 4px; rgba(var(--center-channel-color-rgb), 0.1) 0px 2px 4px;
height: 24px; height: 24px;
width: 24px; width: 24px;
} }

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

@ -7,8 +7,8 @@
.CodeMirror { .CodeMirror {
padding: 0; padding: 0;
min-height: 0; min-height: 0;
background: var(--main-bg); background: var(--center-channel-bg-rgb);
color: var(--body-color); color: var(--center-channel-color-rgb);
} }
pre.CodeMirror-line { pre.CodeMirror-line {

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

@ -3,7 +3,7 @@
top: 25px; top: 25px;
left: -240px; left: -240px;
z-index: 10; z-index: 10;
background-color: rgb(var(--main-bg)); background-color: rgb(var(--center-channel-bg-rgb));
padding: 10px; padding: 10px;
border-radius: 3px; border-radius: 3px;
box-shadow: var(--elevation-4); 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" class=" css-kpfmlq-ValueContainer"
> >
<div <div
class=" css-14tjw7f-singleValue" class=" css-ciz25-singleValue"
> >
username-1 username-1
</div> </div>
@ -206,7 +206,7 @@ exports[`components/properties/user user dropdown open 1`] = `
class=" css-kpfmlq-ValueContainer" class=" css-kpfmlq-ValueContainer"
> >
<div <div
class=" css-14tjw7f-singleValue" class=" css-ciz25-singleValue"
> >
username-1 username-1
</div> </div>
@ -278,13 +278,13 @@ exports[`components/properties/user user dropdown open 1`] = `
</div> </div>
</div> </div>
<div <div
class=" css-7p3rb2-menu" class=" css-l4y5re-menu"
> >
<div <div
class=" css-g29tl0-MenuList" class=" css-g29tl0-MenuList"
> >
<div <div
class=" css-1pe17ep-option" class=" css-xoibch-option"
id="react-select-4-option-0" id="react-select-4-option-0"
tabindex="-1" tabindex="-1"
> >

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

@ -2,7 +2,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 5px; padding: 5px;
color: rgb(var(--body-color)); color: rgb(var(--center-channel-color-rgb));
max-width: 400px; max-width: 400px;
> .row { > .row {

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

@ -2,7 +2,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 5px; padding: 5px;
color: rgb(var(--body-color)); color: rgb(var(--center-channel-color-rgb));
font-weight: normal; font-weight: normal;
line-height: normal; line-height: normal;

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

@ -5,8 +5,8 @@
flex-direction: column; flex-direction: column;
min-height: 100%; min-height: 100%;
color: rgb(var(--sidebar-fg)); color: rgb(var(--sidebar-text-rgb));
background-color: rgb(var(--sidebar-bg)); background-color: rgb(var(--sidebar-bg-rgb));
padding: 12px 0; padding: 12px 0;
&.hidden { &.hidden {
@ -65,7 +65,7 @@
align-items: center; align-items: center;
&:hover { &:hover {
background-color: rgba(var(--sidebar-fg), 0.08); background-color: rgba(var(--sidebar-text-rgb), 0.08);
} }
> .heading { > .heading {
@ -75,10 +75,10 @@
} }
> .IconButton { > .IconButton {
background-color: var(--sidebar-bg); background-color: var(--sidebar-bg-rgb);
&:hover { &:hover {
background-color: rgba(var(--sidebar-fg), 0.1); background-color: rgba(var(--sidebar-text-rgb), 0.1);
} }
} }
@ -104,11 +104,11 @@
} }
.OptionsIcon { .OptionsIcon {
color: rgba(var(--sidebar-fg), 0.5); color: rgba(var(--sidebar-text-rgb), 0.5);
} }
.DisclosureTriangleIcon, .DisclosureTriangleIcon,
.DotIcon { .DotIcon {
fill: rgba(var(--sidebar-fg), 0.5); fill: rgba(var(--sidebar-text-rgb), 0.5);
flex-shrink: 0; flex-shrink: 0;
} }
@ -117,7 +117,7 @@
} }
.HideSidebarIcon { .HideSidebarIcon {
stroke: rgba(var(--sidebar-fg), 0.5); stroke: rgba(var(--sidebar-text-rgb), 0.5);
stroke-width: 6px; stroke-width: 6px;
} }
} }

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

@ -6,11 +6,11 @@
height: 36px; height: 36px;
align-items: center; align-items: center;
padding-left: 20px; padding-left: 20px;
color: rgba(var(--sidebar-fg), 0.64); color: rgba(var(--sidebar-text-rgb), 0.64);
font-weight: 400; font-weight: 400;
&:hover { &:hover {
background-color: rgba(var(--sidebar-fg), 0.08); background-color: rgba(var(--sidebar-text-rgb), 0.08);
display: flex; display: flex;
} }
} }

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

@ -8,23 +8,23 @@
align-items: center; align-items: center;
&:hover { &:hover {
background-color: rgba(var(--sidebar-fg), 0.08); background-color: rgba(var(--sidebar-text-rgb), 0.08);
display: flex; display: flex;
} }
&.subitem { &.subitem {
padding-left: 20px; padding-left: 20px;
color: rgba(var(--sidebar-fg), 0.64); color: rgba(var(--sidebar-text-rgb), 0.64);
font-weight: 400; font-weight: 400;
} }
&.active { &.active {
background: rgba(var(--sidebar-fg), 0.1); background: rgba(var(--sidebar-text-rgb), 0.1);
position: relative; position: relative;
color: white; color: white;
.Icon { .Icon {
stroke: rgba(var(--sidebar-fg), 1); stroke: rgba(var(--sidebar-text-rgb), 1);
} }
&:not(.subitem) { &:not(.subitem) {
@ -41,10 +41,10 @@
} }
&.no-views { &.no-views {
color: rgba(var(--sidebar-fg), 0.4); color: rgba(var(--sidebar-text-rgb), 0.4);
&:hover { &:hover {
background-color: rgba(var(--sidebar-bg)); background-color: rgba(var(--sidebar-bg-rgb));
} }
} }
@ -53,22 +53,22 @@
} }
> .Icon { > .Icon {
stroke: rgba(var(--sidebar-fg), 0.3); stroke: rgba(var(--sidebar-text-rgb), 0.3);
height: 14px; height: 14px;
width: 14px; width: 14px;
margin-right: 8px; margin-right: 8px;
flex-shrink: 0; flex-shrink: 0;
&.GalleryIcon { &.GalleryIcon {
fill: rgba(var(--sidebar-fg), 0.3); fill: rgba(var(--sidebar-text-rgb), 0.3);
stroke: unset; stroke: unset;
} }
} }
> .IconButton { > .IconButton {
background-color: var(--sidebar-bg); background-color: var(--sidebar-bg-rgb);
&:hover { &: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; height: 36px;
align-items: center; align-items: center;
padding-left: 20px; padding-left: 20px;
color: rgba(var(--sidebar-fg), 0.64); color: rgba(var(--sidebar-text-rgb), 0.64);
font-weight: 400; font-weight: 400;
&:hover { &:hover {
background-color: rgba(var(--sidebar-fg), 0.08); background-color: rgba(var(--sidebar-text-rgb), 0.08);
display: flex; display: flex;
} }
} }

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

@ -10,7 +10,7 @@
font-size: 16px; font-size: 16px;
margin-right: 5px; margin-right: 5px;
.LogoIcon { .LogoIcon {
fill: rgba(var(--sidebar-fg), 1); fill: rgba(var(--sidebar-text-rgb), 1);
height: 24px; height: 24px;
width: 22px; width: 22px;
margin-right: 3px; margin-right: 3px;
@ -32,14 +32,14 @@
font-size: 11px; font-size: 11px;
line-height: 11px; line-height: 11px;
font-weight: 500; font-weight: 500;
color: rgba(var(--sidebar-fg), 0.8); color: rgba(var(--sidebar-text-rgb), 0.8);
} }
.versionBadge { .versionBadge {
font-size: 10px; font-size: 10px;
line-height: 11px; line-height: 11px;
font-weight: 500; 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 { .IconButton {
background-color: unset; background-color: unset;
&:hover:not(.readonly) { &:hover:not(.readonly) {
background-color: rgba(var(--body-color), 0.1); background-color: rgba(var(--center-channel-color-rgb), 0.1);
} }
&.readonly { &.readonly {
opacity: .5; opacity: .5;
@ -37,7 +37,7 @@
border-radius: 3px; border-radius: 3px;
line-height: 20px; line-height: 20px;
margin-right: 5px; margin-right: 5px;
color: rgba(var(--body-color), 1); color: rgba(var(--center-channel-color-rgb), 1);
white-space: nowrap; white-space: nowrap;
text-transform: none; text-transform: none;
font-weight: normal; font-weight: normal;
@ -51,7 +51,7 @@
font-weight: normal; font-weight: normal;
font-size: 16px; font-size: 16px;
// line-height: 20px; // 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; flex: 0 0 auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
color: rgb(var(--body-color)); color: rgb(var(--center-channel-color-rgb));
border-right: solid 1px rgba(var(--body-color), 0.09); border-right: solid 1px rgba(var(--center-channel-color-rgb), 0.09);
border-left: 1px solid transparent; border-left: 1px solid transparent;
border-top: 1px solid transparent; border-top: 1px solid transparent;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
@ -85,7 +85,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
&:hover { &:hover {
background-color: rgba(var(--body-color), 0.05); background-color: rgba(var(--center-channel-color-rgb), 0.05);
} }
&.title-cell { &.title-cell {
@ -162,7 +162,7 @@
display: flex; display: flex;
flex-direction: row; 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 { &.hidden {
display: none; display: none;
} }
@ -172,21 +172,21 @@
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
background: rgb(var(--main-bg)); background: rgb(var(--center-channel-bg-rgb));
.octo-table-cell { .octo-table-cell {
color: rgba(var(--body-color), 0.6); color: rgba(var(--center-channel-color-rgb), 0.6);
background: rgb(var(--main-bg)); background: rgb(var(--center-channel-bg-rgb));
.Label { .Label {
color: rgba(var(--body-color), 0.6); color: rgba(var(--center-channel-color-rgb), 0.6);
} }
} }
} }
.octo-table-footer { .octo-table-footer {
.octo-table-cell { .octo-table-cell {
color: rgba(var(--body-color), 0.6); color: rgba(var(--center-channel-color-rgb), 0.6);
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
@ -194,7 +194,7 @@
padding-left: 15px; padding-left: 15px;
&:hover { &: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; font-size: 11px;
text-transform: uppercase; text-transform: uppercase;
font-weight: 600; font-weight: 600;
color: rgba(var(--body-color), 0.64); color: rgba(var(--center-channel-color-rgb), 0.64);
background-color: rgba(var(--body-color), 0.1); background-color: rgba(var(--center-channel-color-rgb), 0.1);
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0px 0px 0px 1px,
rgba(var(--body-color), 0.1) 0px 2px 4px; rgba(var(--center-channel-color-rgb), 0.1) 0px 2px 4px;
height: 90%; height: 90%;
width: 100%; width: 100%;
} }
@ -21,7 +21,7 @@
} }
&:hover { &:hover {
background-color: rgba(var(--body-color), 0.05); background-color: rgba(var(--center-channel-color-rgb), 0.05);
.open-button { .open-button {
display: block; display: block;

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

@ -3,10 +3,10 @@
display: flex; display: flex;
flex-direction: row; 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; margin: 16px 0;
padding: 12px 8px; padding: 12px 8px;
color: rgba(var(--body-color), 0.64); color: rgba(var(--center-channel-color-rgb), 0.64);
align-items: center; align-items: center;
> div { > div {
@ -31,7 +31,7 @@
margin: 0; margin: 0;
} }
&:hover { &: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={{ values={{
property: ( property: (
<span <span
style={{color: 'rgb(var(--main-fg))'}} style={{color: 'rgb(var(--center-channel-color-rgb))'}}
id='groupByLabel' id='groupByLabel'
> >
{groupByPropertyName} {groupByPropertyName}

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

@ -10,7 +10,7 @@
> .add-buttons { > .add-buttons {
flex-direction: row; flex-direction: row;
min-height: 28px; min-height: 28px;
color: rgba(var(--body-color), 0.4); color: rgba(var(--center-channel-color-rgb), 0.4);
width: 100%; width: 100%;
align-items: flex-start; align-items: flex-start;

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

@ -9,8 +9,8 @@
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
flex-direction: column; flex-direction: column;
box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0px 0px 0px 1px,
rgba(var(--main-fg), 0.3) 0px 4px 8px; rgba(var(--center-channel-color-rgb), 0.3) 0px 4px 8px;
form { form {
display: flex; display: flex;

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

@ -9,8 +9,8 @@
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
flex-direction: column; flex-direction: column;
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0px 0px 0px 1px,
rgba(var(--body-color), 0.3) 0px 4px 8px; rgba(var(--center-channel-color-rgb), 0.3) 0px 4px 8px;
@media screen and (max-width: 430px) { @media screen and (max-width: 430px) {
position: fixed; position: fixed;

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

@ -8,8 +8,8 @@
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
flex-direction: column; flex-direction: column;
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0px 0px 0px 1px,
rgba(var(--body-color), 0.3) 0px 4px 8px; rgba(var(--center-channel-color-rgb), 0.3) 0px 4px 8px;
form { form {
display: flex; display: flex;

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

@ -9,8 +9,8 @@
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
flex-direction: column; flex-direction: column;
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0px 0px 0px 1px,
rgba(var(--body-color), 0.3) 0px 4px 8px; rgba(var(--center-channel-color-rgb), 0.3) 0px 4px 8px;
form { form {
display: flex; 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%; width: 100%;
height: 100%; height: 100%;
color: rgb(var(--body-color)); color: rgb(var(--center-channel-color-rgb));
background: rgb(var(--main-bg)); background: rgb(var(--center-channel-bg-rgb));
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
@ -50,8 +50,8 @@ html {
input, input,
textarea { textarea {
background: rgb(var(--main-bg)); background: rgb(var(--center-channel-bg-rgb));
color: rgb(var(--body-color)); color: rgb(var(--center-channel-color-rgb));
-webkit-user-select: auto; /* Chrome all / Safari all */ -webkit-user-select: auto; /* Chrome all / Safari all */
-moz-user-select: auto; /* Firefox all */ -moz-user-select: auto; /* Firefox all */
@ -65,11 +65,11 @@ html {
/* -webkit-font-smoothing: auto; */ /* -webkit-font-smoothing: auto; */
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
--cursor-color: rgb(var(--body-color)); --cursor-color: rgb(var(--center-channel-color-rgb));
a { a {
text-decoration: none; text-decoration: none;
color: var(--link-color); color: var(--link-color-rgb);
&:visited { &:visited {
color: var(--link-visited-color); color: var(--link-visited-color);
@ -84,8 +84,8 @@ html {
width: 100%; width: 100%;
height: 1px; height: 1px;
border: none; border: none;
color: rgba(var(--body-color), 0.09); color: rgba(var(--center-channel-color-rgb), 0.09);
background-color: rgba(var(--body-color), 0.09); background-color: rgba(var(--center-channel-color-rgb), 0.09);
margin-bottom: 8px; margin-bottom: 8px;
} }
@ -160,10 +160,10 @@ html {
/*-- Property list --*/ /*-- Property list --*/
.octo-propertyvalue { .octo-propertyvalue {
color: rgb(var(--body-color)); color: rgb(var(--center-channel-color-rgb));
padding: 0 5px; padding: 0 5px;
&.empty { &.empty {
color: rgba(var(--body-color), 0.4); color: rgba(var(--center-channel-color-rgb), 0.4);
} }
.IconButton.delete-value { .IconButton.delete-value {
width: 16px; width: 16px;
@ -186,7 +186,7 @@ html {
} }
.octo-placeholder { .octo-placeholder {
color: rgba(var(--body-color), 0.4); color: rgba(var(--center-channel-color-rgb), 0.4);
} }
[contentEditable="true"] { [contentEditable="true"] {
@ -199,7 +199,7 @@ html {
[contentEditable="true"]:empty:before { [contentEditable="true"]:empty:before {
content: attr(placeholder); content: attr(placeholder);
display: block; display: block;
color: rgba(var(--body-color), 0.4); color: rgba(var(--center-channel-color-rgb), 0.4);
} }
.octo-propertyvalue.Editable.active, .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 { @import "./shared-variables";
--body-color: 38, 38, 38; @import "./focalboard-variables";
--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;
}

53
webapp/src/theme.ts
View File

@ -3,6 +3,9 @@
import {CSSObject} from '@emotion/serialize' import {CSSObject} from '@emotion/serialize'
import isEqual from 'lodash/isEqual' import isEqual from 'lodash/isEqual'
import color from 'color'
import {Utils} from './utils'
let activeThemeName: string let activeThemeName: string
@ -119,18 +122,38 @@ export function setTheme(theme: Theme | null): Theme {
setActiveThemeName(consolidatedTheme, theme) setActiveThemeName(consolidatedTheme, theme)
document.documentElement.style.setProperty('--main-bg', consolidatedTheme.mainBg) if (!Utils.isFocalboardPlugin()) {
document.documentElement.style.setProperty('--main-fg', consolidatedTheme.mainFg) document.documentElement.style.setProperty('--center-channel-bg-rgb', consolidatedTheme.mainBg)
document.documentElement.style.setProperty('--body-color', consolidatedTheme.mainFg) document.documentElement.style.setProperty('--center-channel-color-rgb', consolidatedTheme.mainFg)
document.documentElement.style.setProperty('--button-bg', consolidatedTheme.buttonBg) document.documentElement.style.setProperty('--button-bg-rgb', consolidatedTheme.buttonBg)
document.documentElement.style.setProperty('--button-fg', consolidatedTheme.buttonFg) document.documentElement.style.setProperty('--button-color-rgb', consolidatedTheme.buttonFg)
document.documentElement.style.setProperty('--sidebar-bg', consolidatedTheme.sidebarBg) document.documentElement.style.setProperty('--sidebar-bg-rgb', consolidatedTheme.sidebarBg)
document.documentElement.style.setProperty('--sidebar-fg', consolidatedTheme.sidebarFg) document.documentElement.style.setProperty('--sidebar-text-rgb', consolidatedTheme.sidebarFg)
document.documentElement.style.setProperty('--sidebar-text-active-border', consolidatedTheme.sidebarTextActiveBorder) document.documentElement.style.setProperty('--link-color-rgb', consolidatedTheme.link)
document.documentElement.style.setProperty('--sidebar-white-logo', consolidatedTheme.sidebarWhiteLogo) document.documentElement.style.setProperty('--sidebar-text-active-border', consolidatedTheme.sidebarTextActiveBorder)
}
document.documentElement.style.setProperty('--link-color', consolidatedTheme.link) document.documentElement.style.setProperty('--sidebar-white-logo', consolidatedTheme.sidebarWhiteLogo)
document.documentElement.style.setProperty('--link-visited-color', consolidatedTheme.linkVisited) 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-default', consolidatedTheme.propDefault)
document.documentElement.style.setProperty('--prop-gray', consolidatedTheme.propGray) document.documentElement.style.setProperty('--prop-gray', consolidatedTheme.propGray)
@ -212,12 +235,12 @@ export function getSelectBaseStyle() {
menu: (provided: CSSObject): CSSObject => ({ menu: (provided: CSSObject): CSSObject => ({
...provided, ...provided,
width: 'unset', width: 'unset',
background: 'rgb(var(--main-bg))', background: 'rgb(var(--center-channel-bg-rgb))',
}), }),
option: (provided: CSSObject, state: { isFocused: boolean }): CSSObject => ({ option: (provided: CSSObject, state: { isFocused: boolean }): CSSObject => ({
...provided, ...provided,
background: state.isFocused ? 'rgba(var(--main-fg), 0.1)' : 'rgb(var(--main-bg))', background: state.isFocused ? 'rgba(var(--center-channel-color-rgb), 0.1)' : 'rgb(var(--center-channel-bg-rgb))',
color: state.isFocused ? 'rgb(var(--main-fg))' : 'rgb(var(--main-fg))', color: state.isFocused ? 'rgb(var(--center-channel-color-rgb))' : 'rgb(var(--center-channel-color-rgb))',
padding: '2px 8px', padding: '2px 8px',
}), }),
control: (): CSSObject => ({ control: (): CSSObject => ({
@ -237,7 +260,7 @@ export function getSelectBaseStyle() {
}), }),
singleValue: (provided: CSSObject): CSSObject => ({ singleValue: (provided: CSSObject): CSSObject => ({
...provided, ...provided,
color: 'rgb(var(--main-fg))', color: 'rgb(var(--center-channel-color-rgb))',
overflow: 'unset', overflow: 'unset',
maxWidth: 'calc(100% - 20px)', maxWidth: 'calc(100% - 20px)',
}), }),

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

@ -14,29 +14,29 @@
color: inherit; color: inherit;
&:hover { &:hover {
background-color: rgba(var(--body-color), 0.1); background-color: rgba(var(--center-channel-color-rgb), 0.1);
} }
&.filled { &.filled {
color: #ffffff; color: #ffffff;
background-color: rgb(var(--button-bg)); background-color: rgb(var(--button-bg-rgb));
padding: 6px 12px; padding: 6px 12px;
&:hover { &:hover {
background-color: rgb(var(--button-bg), 0.8); background-color: rgb(var(--button-bg-rgb), 0.8);
} }
} }
&.emphasis--secondary { &.emphasis--secondary {
border: 1px solid rgb(var(--button-bg)); border: 1px solid rgb(var(--button-bg-rgb));
color: rgb(var(--button-bg)); color: rgb(var(--button-bg-rgb));
&:hover { &:hover {
background-color: rgb(var(--button-bg), 0.08); background-color: rgb(var(--button-bg-rgb), 0.08);
} }
&:active { &: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 { .button-text {
padding: 3px 10px; padding: 3px 10px;
background-color: rgb(var(--button-bg)); background-color: rgb(var(--button-bg-rgb));
color: rgb(var(--button-fg)); color: rgb(var(--button-color-rgb));
border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;
transition: background 100ms ease-out 0s; transition: background 100ms ease-out 0s;
height: 100%; height: 100%;
&:hover { &:hover {
background-color: rgba(var(--button-bg), 0.8); background-color: rgba(var(--button-bg-rgb), 0.8);
} }
} }
.button-dropdown { .button-dropdown {
background-color: rgb(var(--button-bg)); background-color: rgb(var(--button-bg-rgb));
border-left: 1px solid rgba(var(--button-fg), 0.2); border-left: 1px solid rgba(var(--button-color-rgb), 0.2);
display: flex; display: flex;
padding: 0 3px; padding: 0 3px;
align-items: center; align-items: center;
@ -31,10 +31,10 @@
height: 100%; height: 100%;
&:hover { &:hover {
background-color: rgba(var(--button-bg), 0.8); background-color: rgba(var(--button-bg-rgb), 0.8);
} }
.DropdownIcon { .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; min-width: 100px;
} }
&::placeholder { &::placeholder {
color: rgba(var(--body-color), 0.4); color: rgba(var(--center-channel-color-rgb), 0.4);
opacity: 1; opacity: 1;
} }
&.error { &.error {
border: 1px solid var(--error-color); border: 1px solid var(--error-text-rgb);
border-radius: var(--default-rad); border-radius: var(--default-rad);
} }
&.readonly { &.readonly {

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

@ -11,18 +11,18 @@
min-width: 100px; min-width: 100px;
} }
&::placeholder { &::placeholder {
color: rgba(var(--body-color), 0.4); color: rgba(var(--center-channel-color-rgb), 0.4);
opacity: 1; opacity: 1;
} }
&.error { &.error {
border: 1px solid var(--error-color); border: 1px solid var(--error-text-rgb);
border-radius: var(--default-rad); border-radius: var(--default-rad);
} }
} }
} }
.DayPickerInput-Overlay { .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); box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1),0 4px 11px hsla(0, 0%, 0%, 0.1);
line-height: 100%; line-height: 100%;
} }
@ -32,6 +32,6 @@
.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker:not(.DayPicker--interactionDisabled)
.DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover { .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 { .focalboard-body .EmojiPicker {
.emoji-mart { .emoji-mart {
color: rgb(var(--body-color)); color: rgb(var(--center-channel-color-rgb));
background: rgb(var(--main-bg)); background: rgb(var(--center-channel-bg-rgb));
border-color: rgba(var(--body-color), 0.16); border-color: rgba(var(--center-channel-color-rgb), 0.16);
.emoji-mart-bar { .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; border-bottom-width: 1px;
} }
.emoji-mart-search input { .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 { .emoji-mart-category-label span {
background: rgb(var(--main-bg)); background: rgb(var(--center-channel-bg-rgb));
} }
.emoji-mart-search-icon svg { .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 { .focalboard-body .AddIcon {
color: rgb(var(--body-color), 0.5); color: rgb(var(--center-channel-color-rgb), 0.5);
font-size: 16px; font-size: 16px;
} }

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

@ -1,5 +1,5 @@
.focalboard-body .CheckIcon { .focalboard-body .CheckIcon {
stroke: rgba(var(--body-color), 0.5); stroke: rgba(var(--center-channel-color-rgb), 0.5);
stroke-width: 8px; stroke-width: 8px;
fill: none; fill: none;
width: 24px; width: 24px;

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

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

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

@ -1,5 +1,5 @@
.focalboard-body .DeleteIcon { .focalboard-body .DeleteIcon {
fill: rgba(var(--body-color), 0.5); fill: rgba(var(--center-channel-color-rgb), 0.5);
stroke: none; stroke: none;
width: 24px; width: 24px;
height: 24px; height: 24px;

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

@ -1,5 +1,5 @@
.focalboard-body .DisclosureTriangleIcon { .focalboard-body .DisclosureTriangleIcon {
fill: rgba(var(--body-color), 0.7); fill: rgba(var(--center-channel-color-rgb), 0.7);
stroke: none; stroke: none;
width: 24px; width: 24px;
height: 24px; height: 24px;

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

@ -1,5 +1,5 @@
.focalboard-body .DividerIcon { .focalboard-body .DividerIcon {
fill: rgba(var(--body-color), 0.7); fill: rgba(var(--center-channel-color-rgb), 0.7);
stroke: none; stroke: none;
width: 24px; width: 24px;
height: 24px; height: 24px;

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

@ -1,5 +1,5 @@
.focalboard-body .DotIcon { .focalboard-body .DotIcon {
fill: rgba(var(--body-color), 0.5); fill: rgba(var(--center-channel-color-rgb), 0.5);
width: 24px; width: 24px;
height: 24px; height: 24px;
} }

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

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

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

@ -1,5 +1,5 @@
.focalboard-body .DuplicateIcon { .focalboard-body .DuplicateIcon {
fill: rgba(var(--body-color), 0.7); fill: rgba(var(--center-channel-color-rgb), 0.7);
stroke: none; stroke: none;
width: 24px; width: 24px;
height: 24px; height: 24px;

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

@ -1,5 +1,5 @@
.focalboard-body .EditIcon { .focalboard-body .EditIcon {
fill: rgba(var(--body-color), 0.5); fill: rgba(var(--center-channel-color-rgb), 0.5);
stroke: none; stroke: none;
width: 24px; width: 24px;
height: 24px; height: 24px;

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

@ -1,5 +1,5 @@
.focalboard-body .EmojiIcon { .focalboard-body .EmojiIcon {
fill: rgba(var(--body-color), 0.7); fill: rgba(var(--center-channel-color-rgb), 0.7);
stroke: none; stroke: none;
width: 24px; width: 24px;
height: 24px; height: 24px;

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

@ -1,5 +1,5 @@
.focalboard-body .GalleryIcon { .focalboard-body .GalleryIcon {
fill: rgba(var(--body-color), 0.7); fill: rgba(var(--center-channel-color-rgb), 0.7);
stroke: none; stroke: none;
width: 24px; width: 24px;
height: 24px; height: 24px;

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

@ -1,5 +1,5 @@
.focalboard-body .GripIcon { .focalboard-body .GripIcon {
fill: rgb(var(--body-color), 0.5); fill: rgb(var(--center-channel-color-rgb), 0.5);
stroke: none; stroke: none;
width: 24px; width: 24px;
height: 24px; height: 24px;

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

@ -1,5 +1,5 @@
.focalboard-body .HamburgerIcon { .focalboard-body .HamburgerIcon {
stroke: rgba(var(--body-color), 0.5); stroke: rgba(var(--center-channel-color-rgb), 0.5);
stroke-width: 6px; stroke-width: 6px;
fill: none; fill: none;
width: 24px; width: 24px;

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

@ -1,5 +1,5 @@
.focalboard-body .HideIcon { .focalboard-body .HideIcon {
fill: rgba(var(--body-color), 0.7); fill: rgba(var(--center-channel-color-rgb), 0.7);
stroke: none; stroke: none;
width: 24px; width: 24px;
height: 24px; height: 24px;

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

@ -1,5 +1,5 @@
.focalboard-body .HideSidebarIcon { .focalboard-body .HideSidebarIcon {
stroke: rgba(var(--body-color), 0.5); stroke: rgba(var(--center-channel-color-rgb), 0.5);
stroke-width: 6px; stroke-width: 6px;
fill: none; fill: none;
width: 24px; width: 24px;

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

@ -1,5 +1,5 @@
.focalboard-body .ImageIcon { .focalboard-body .ImageIcon {
fill: rgba(var(--body-color), 0.7); fill: rgba(var(--center-channel-color-rgb), 0.7);
stroke: none; stroke: none;
width: 24px; width: 24px;
height: 24px; height: 24px;

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

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

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

@ -1,5 +1,5 @@
.focalboard-body .ShowIcon { .focalboard-body .ShowIcon {
fill: rgba(var(--body-color), 0.7); fill: rgba(var(--center-channel-color-rgb), 0.7);
stroke: none; stroke: none;
width: 24px; width: 24px;
height: 24px; height: 24px;

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

@ -1,5 +1,5 @@
.focalboard-body .ShowSidebarIcon { .focalboard-body .ShowSidebarIcon {
stroke: rgba(var(--body-color), 0.5); stroke: rgba(var(--center-channel-color-rgb), 0.5);
stroke-width: 6px; stroke-width: 6px;
fill: none; fill: none;
width: 24px; width: 24px;

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

@ -1,5 +1,5 @@
.focalboard-body .SortDownIcon { .focalboard-body .SortDownIcon {
stroke: rgba(var(--body-color), 0.5); stroke: rgba(var(--center-channel-color-rgb), 0.5);
stroke-width: 8px; stroke-width: 8px;
fill: none; fill: none;
width: 24px; width: 24px;

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

@ -1,5 +1,5 @@
.focalboard-body .SortUpIcon { .focalboard-body .SortUpIcon {
stroke: rgba(var(--body-color), 0.5); stroke: rgba(var(--center-channel-color-rgb), 0.5);
stroke-width: 8px; stroke-width: 8px;
fill: none; fill: none;
width: 24px; width: 24px;

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

@ -1,5 +1,5 @@
.focalboard-body .StandardIcon { .focalboard-body .StandardIcon {
stroke: rgba(var(--body-color), 0.5); stroke: rgba(var(--center-channel-color-rgb), 0.5);
stroke-width: 4px; stroke-width: 4px;
fill: none; fill: none;
width: 24px; width: 24px;

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

@ -1,5 +1,5 @@
.focalboard-body .SubmenuTriangleIcon { .focalboard-body .SubmenuTriangleIcon {
fill: rgba(var(--body-color), 0.7); fill: rgba(var(--center-channel-color-rgb), 0.7);
stroke: none; stroke: none;
width: 24px; width: 24px;
height: 24px; height: 24px;

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

@ -1,5 +1,5 @@
.focalboard-body .TextIcon { .focalboard-body .TextIcon {
fill: rgba(var(--body-color), 0.7); fill: rgba(var(--center-channel-color-rgb), 0.7);
stroke: none; stroke: none;
width: 24px; width: 24px;
height: 24px; height: 24px;

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

@ -4,7 +4,7 @@
padding: 2px 8px; padding: 2px 8px;
border-radius: 3px; border-radius: 3px;
line-height: 20px; line-height: 20px;
color: rgba(var(--body-color), 0.8); color: rgba(var(--center-channel-color-rgb), 0.8);
white-space: nowrap; white-space: nowrap;
text-transform: uppercase; text-transform: uppercase;
font-weight: 600; font-weight: 600;
@ -14,7 +14,7 @@
input { input {
line-height: 20px; line-height: 20px;
color: rgba(var(--body-color), 0.8); color: rgba(var(--center-channel-color-rgb), 0.8);
text-transform: uppercase; text-transform: uppercase;
font-weight: 600; font-weight: 600;
font-size: 13px; font-size: 13px;

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

@ -4,8 +4,8 @@
position: absolute; position: absolute;
z-index: 15; z-index: 15;
min-width: 180px; min-width: 180px;
background-color: rgb(var(--main-bg)); background-color: rgb(var(--center-channel-bg-rgb));
color: rgb(var(--body-color)); color: rgb(var(--center-channel-color-rgb));
border-radius: var(--default-rad); border-radius: var(--default-rad);
box-shadow: var(--elevation-4); box-shadow: var(--elevation-4);
@ -27,7 +27,7 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
color: rgb(var(--body-color)); color: rgb(var(--center-channel-color-rgb));
> .menu-option { > .menu-option {
display: flex; display: flex;
@ -42,7 +42,7 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: rgba(var(--button-bg), 0.08); background: rgba(var(--button-bg-rgb), 0.08);
} }
> * { > * {
@ -60,7 +60,7 @@
} }
> .SubmenuTriangleIcon { > .SubmenuTriangleIcon {
fill: rgba(var(--body-color), 0.7); fill: rgba(var(--center-channel-color-rgb), 0.7);
} }
> .Icon { > .Icon {
@ -102,7 +102,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
min-width: 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; border-radius: 0;
padding: 10px; padding: 10px;
@ -125,7 +125,7 @@
min-height: 44px; min-height: 44px;
width: 100%; width: 100%;
padding: 0 20px; padding: 0 20px;
background-color: rgb(var(--main-bg)); background-color: rgb(var(--center-channel-bg-rgb));
> * { > * {
flex: 0 0 auto; flex: 0 0 auto;

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

@ -1,4 +1,4 @@
.focalboard-body .MenuSeparator { .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; margin: 8px 0;
} }

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

@ -20,14 +20,12 @@
position: absolute; position: absolute;
z-index: 16; z-index: 16;
min-width: 180px; min-width: 180px;
background-color: rgb(var(--main-bg)); background-color: rgb(var(--center-channel-bg-rgb));
color: rgb(var(--body-color)); color: rgb(var(--center-channel-color-rgb));
margin: 0 !important; margin: 0 !important;
border-radius: 3px; border-radius: var(--default-rad);
box-shadow: rgba(var(--body-color), 0.05) 0px 0px 0px 1px, box-shadow: var(--elevation-4);
rgba(var(--body-color), 0.1) 0px 3px 6px,
rgba(var(--body-color), 0.2) 0px 9px 24px;
left: 100%; left: 100%;
&.top { &.top {
bottom: 0; bottom: 0;
@ -48,7 +46,7 @@
@media screen and (max-width: 430px) { @media screen and (max-width: 430px) {
.SubMenu { .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; width: 26px;
border-radius: 44px; border-radius: 44px;
padding: 2px; 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; transition: background 200ms ease 0s, box-shadow 200ms ease 0s;
cursor: pointer; cursor: pointer;
&.on { &.on {
background-color: rgb(var(--button-bg)); background-color: rgb(var(--button-bg-rgb));
.octo-switch-inner { .octo-switch-inner {
transform: translateX(12px) translateY(0px); transform: translateX(12px) translateY(0px);
} }

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

@ -1,7 +1,7 @@
.focalboard-body .ValueSelector { .focalboard-body .ValueSelector {
width: 100%; width: 100%;
border-radius: var(--default-rad); border-radius: var(--default-rad);
color: rgb(var(--body-color)); color: rgb(var(--center-channel-color-rgb));
display: flex; display: flex;
> .Label { > .Label {
@ -9,7 +9,7 @@
max-width: calc(100% - 10px); max-width: calc(100% - 10px);
&.empty { &.empty {
color: rgba(var(--body-color), 0.6); color: rgba(var(--center-channel-color-rgb), 0.6);
} }
} }
@ -65,7 +65,7 @@
background-color: unset; background-color: unset;
&:hover { &: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(), ...getSelectBaseStyle(),
option: (provided: CSSObject, state: {isFocused: boolean}): CSSObject => ({ option: (provided: CSSObject, state: {isFocused: boolean}): CSSObject => ({
...provided, ...provided,
background: state.isFocused ? 'rgba(var(--main-fg), 0.1)' : 'rgb(var(--main-bg))', background: state.isFocused ? 'rgba(var(--center-channel-color-rgb), 0.1)' : 'rgb(var(--center-channel-bg-rgb))',
color: state.isFocused ? 'rgb(var(--main-fg))' : 'rgb(var(--main-fg))', color: state.isFocused ? 'rgb(var(--center-channel-color-rgb))' : 'rgb(var(--center-channel-color-rgb))',
padding: '8px', padding: '8px',
}), }),
control: (): CSSObject => ({ control: (): CSSObject => ({
@ -129,7 +129,7 @@ const valueSelectorStyle = {
menu: (provided: CSSObject): CSSObject => ({ menu: (provided: CSSObject): CSSObject => ({
...provided, ...provided,
width: 'unset', width: 'unset',
background: 'rgb(var(--main-bg))', background: 'rgb(var(--center-channel-bg-rgb))',
minWidth: '260px', minWidth: '260px',
}), }),
} }