xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #372 from robintown/organize-colors

Browse source 
Organize colors
This commit is contained in:
Robin 2022-06-06 09:03:53 -04:00 committed by GitHub
commit 69cfa1db6d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 157 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
.env
View file

@ -14,12 +14,15 @@
# VITE_SENTRY_DSN=https://examplePublicKey@o0.ingest.sentry.io/0
# VITE_CUSTOM_THEME=true
# VITE_PRIMARY_COLOR=#0dbd8b
# VITE_BG_COLOR_1=#ffffff
# VITE_BG_COLOR_2=#f0f1f4
# VITE_BG_COLOR_3=#dbdfe4
# VITE_BG_COLOR_4=#d1d3d7
# VITE_INPUT_BORDER_COLOR=#e7e7e7
# VITE_INPUT_BORDER_COLOR_FOCUSED=#238cf5
# VITE_TEXT_COLOR_1=#17191c
# VITE_TEXT_COLOR_2=#61708b
# VITE_THEME_ACCENT=#0dbd8b
# VITE_THEME_ACCENT_20=#0dbd8b33
# VITE_THEME_ALERT=#ff5b55
# VITE_THEME_ALERT_20=#ff5b5533
# VITE_THEME_LINKS=#0086e6
# VITE_THEME_PRIMARY_CONTENT=#ffffff
# VITE_THEME_SECONDARY_CONTENT=#a9b2bc
# VITE_THEME_TERTIARY_CONTENT=#8e99a4
# VITE_THEME_QUATERNARY_CONTENT=#6f7882
# VITE_THEME_QUINARY_CONTENT=#394049
# VITE_THEME_SYSTEM=#21262c
# VITE_THEME_BACKGROUND=#15191e

4
src/Avatar.module.css
View file

@ -1,6 +1,6 @@
.avatar {
position: relative;
color: #ffffff;
color: var(--primary-content);
display: flex;
align-items: center;
justify-content: center;
@ -17,7 +17,7 @@
}
.avatar svg * {
fill: #ffffff;
fill: var(--primary-content);
}
.avatar span {

2
src/Facepile.module.css
View file

@ -18,7 +18,7 @@
.facepile .avatar {
position: absolute;
top: 0;
border: 1px solid var(--bgColor2);
border: 1px solid var(--system);
}
.facepile.md .avatar {

2
src/Header.module.css
View file

@ -70,7 +70,7 @@
background: transparent;
border: none;
display: flex;
color: var(--textColor1);
color: var(--primary-content);
cursor: pointer;
align-items: center;
}

8
src/ListBox.module.css
View file

@ -5,8 +5,8 @@
overflow-y: auto;
list-style: none;
background-color: transparent;
border: 1px solid var(--inputBorderColor);
background-color: var(--bgColor1);
border: 1px solid var(--quinary-content);
background-color: var(--background);
border-radius: 8px;
}
@ -15,7 +15,7 @@
align-items: center;
justify-content: space-between;
background-color: transparent;
color: var(--textColor1);
color: var(--primary-content);
padding: 8px 16px;
outline: none;
cursor: pointer;
@ -28,6 +28,6 @@
}
.option.disabled {
color: var(--textColor2);
color: var(--quaternary-content);
background-color: var(--bgColor3);
}

6
src/Menu.module.css
View file

@ -11,7 +11,7 @@
display: flex;
align-items: center;
padding: 0 12px;
color: var(--textColor1);
color: var(--primary-content);
font-size: 14px;
}
@ -25,7 +25,7 @@
.menuItem.focused,
.menuItem:hover {
background-color: var(--bgColor4);
background-color: var(--quinary-content);
}
.menuItem.focused:first-child,
@ -46,5 +46,5 @@
}
.checkIcon * {
stroke: var(--textColor1);
stroke: var(--primary-content);
}

4
src/Tooltip.module.css
View file

@ -1,10 +1,10 @@
.tooltip {
background-color: var(--bgColor2);
background-color: var(--system);
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px 10px;
color: var(--textColor1);
color: var(--primary-content);
border-radius: 8px;
max-width: 135px;
width: max-content;

2
src/UserMenu.module.css
View file

@ -4,7 +4,7 @@
}
.userButton svg * {
fill: var(--textColor1);
fill: var(--primary-content);
}
.avatar {

2
src/auth/LoginPage.module.css
View file

@ -65,7 +65,7 @@
}
.authLinks a {
color: #0dbd8b;
color: var(--accent);
text-decoration: none;
font-weight: normal;
}

56
src/button/Button.module.css
View file

@ -46,8 +46,8 @@ limitations under the License.
}
.button {
color: #fff;
background-color: var(--primaryColor);
color: var(--primary-content);
background-color: var(--accent);
}
.button:focus,
@ -66,46 +66,46 @@ limitations under the License.
width: 50px;
height: 50px;
border-radius: 50px;
background-color: var(--bgColor2);
background-color: var(--system);
}
.toolbarButton:hover,
.toolbarButtonSecondary:hover {
background-color: var(--bgColor4);
background-color: var(--quinary-content);
}
.toolbarButton.on,
.toolbarButton.off {
background-color: #ffffff;
background-color: var(--primary-content);
}
.toolbarButtonSecondary.on {
background-color: #0dbd8b;
background-color: var(--accent);
}
.iconButton:not(.stroke) svg * {
fill: #ffffff;
fill: var(--primary-content);
}
.iconButton:not(.stroke):hover svg * {
fill: #0dbd8b;
fill: var(--accent);
}
.iconButton.on:not(.stroke) svg * {
fill: #0dbd8b;
fill: var(--accent);
}
.iconButton.on.stroke svg * {
stroke: #0dbd8b;
stroke: var(--accent);
}
.hangupButton,
.hangupButton:hover {
background-color: #ff5b55;
background-color: var(--alert);
}
.toolbarButton.on svg * {
fill: #0dbd8b;
fill: var(--accent);
}
.toolbarButton.off svg * {
@ -113,25 +113,25 @@ limitations under the License.
}
.toolbarButtonSecondary.on svg * {
fill: #ffffff;
fill: var(--primary-content);
}
.secondary,
.copyButton {
color: #0dbd8b;
border: 2px solid #0dbd8b;
color: var(--accent);
border: 2px solid var(--accent);
background-color: transparent;
}
.secondaryHangup {
color: #ff5b55;
border: 2px solid #ff5b55;
color: var(--alert);
border: 2px solid var(--alert);
background-color: transparent;
}
.copyButton.secondaryCopy {
color: var(--textColor1);
border-color: var(--textColor1);
color: var(--primary-content);
border-color: var(--primary-content);
}
.copyButton {
@ -154,12 +154,12 @@ limitations under the License.
}
.copyButton:not(.on) svg * {
fill: #0dbd8b;
fill: var(--accent);
}
.copyButton.on {
border-color: transparent;
background-color: #0dbd8b;
background-color: var(--accent);
color: white;
}
@ -168,32 +168,32 @@ limitations under the License.
}
.copyButton.secondaryCopy:not(.on) svg * {
fill: var(--textColor1);
fill: var(--primary-content);
}
.iconCopyButton svg * {
fill: var(--textColor3);
fill: var(--tertiary-content);
}
.iconCopyButton:hover svg * {
fill: #0dbd8b;
fill: var(--accent);
}
.iconCopyButton.on svg *,
.iconCopyButton.on:hover svg * {
fill: transparent;
stroke: #0dbd8b;
stroke: var(--accent);
}
.dropdownButton {
color: var(--textColor1);
color: var(--primary-content);
padding: 2px 8px;
border-radius: 8px;
}
.dropdownButton:hover,
.dropdownButton.on {
background-color: var(--bgColor4);
background-color: var(--quinary-content);
}
.dropdownButton svg {
@ -201,7 +201,7 @@ limitations under the License.
}
.dropdownButton svg * {
fill: var(--textColor1);
fill: var(--primary-content);
}
.lg {

4
src/home/CallList.module.css
View file

@ -10,7 +10,7 @@
.callTile {
height: 95px;
padding: 12px;
background-color: var(--bgColor2);
background-color: var(--system);
border-radius: 8px;
overflow: hidden;
box-sizing: border-box;
@ -36,7 +36,7 @@
flex-direction: column;
flex: 1;
padding: 0 16px;
color: var(--textColor1);
color: var(--primary-content);
min-width: 0;
}

38
src/index.css
View file

@ -1,5 +1,5 @@
/*
Copyright 2021 New Vector Ltd
Copyright 2021-2022 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -25,21 +25,19 @@ limitations under the License.
:root {
--inter-unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f,
U+25c2-2664, U+2666-2763, U+2765-2b05, U+2b07-2b1b, U+2b1d-10FFFF;
--primaryColor: #0dbd8b;
--primaryColor-20: #0dbd8b33;
--accent: #0dbd8b;
--accent-20: #0dbd8b33;
--alert: #ff5b55;
--alert-20: #ff5b5533;
--bgColor1: #15191e;
--bgColor2: #21262c;
--bgColor3: #444;
--bgColor4: #394049;
--bgColor5: #8d97a5;
--textColor1: #fff;
--textColor2: #6f7882;
--textColor3: #8e99a4;
--textColor4: #a9b2bc;
--inputBorderColor: #394049;
--inputBorderColorFocused: #0086e6;
--linkColor: #0086e6;
--links: #0086e6;
--primary-content: #ffffff;
--secondary-content: #a9b2bc;
--tertiary-content: #8e99a4;
--quaternary-content: #6f7882;
--quinary-content: #394049;
--system: #21262c;
--background: #15191e;
--bgColor3: #444; /* This isn't found anywhere in the designs or Compound */
}
@font-face {
@ -123,8 +121,8 @@ limitations under the License.
}
body {
background-color: var(--bgColor1);
color: var(--textColor1);
background-color: var(--background);
color: var(--primary-content);
color-scheme: dark;
margin: 0;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
@ -184,7 +182,7 @@ p {
}
a {
color: var(--primaryColor);
color: var(--accent);
text-decoration: none;
}
@ -196,8 +194,8 @@ a:active {
hr {
width: calc(100% - 24px);
border: none;
border-top: 1px solid var(--bgColor4);
color: var(--textColor2);
border-top: 1px solid var(--quinary-content);
color: var(--quaternary-content);
overflow: visible;
text-align: center;
height: 5px;

4
src/input/AvatarInputField.module.css
View file

@ -26,7 +26,7 @@
position: absolute;
bottom: 11px;
right: -4px;
background-color: var(--bgColor4);
background-color: var(--quinary-content);
width: 20px;
height: 20px;
border-radius: 10px;
@ -37,5 +37,5 @@
}
.removeButton {
color: #0dbd8b;
color: var(--accent);
}

28
src/input/Input.module.css
View file

@ -26,7 +26,7 @@
.inputField {
border-radius: 4px;
transition: border-color 0.25s;
border: 1px solid var(--inputBorderColor);
border: 1px solid var(--quinary-content);
}
.inputField input,
@ -36,8 +36,8 @@
border: none;
border-radius: 4px;
padding: 12px 9px 10px 9px;
color: var(--textColor1);
background-color: var(--bgColor1);
color: var(--primary-content);
background-color: var(--background);
flex: 1;
min-width: 0;
}
@ -45,7 +45,7 @@
.inputField.disabled input,
.inputField.disabled textarea,
.inputField.disabled span {
color: var(--textColor2);
color: var(--quaternary-content);
}
.inputField span {
@ -65,13 +65,13 @@
.inputField input:placeholder-shown:focus::placeholder,
.inputField textarea:placeholder-shown:focus::placeholder {
transition: color 0.25s ease-in 0.1s;
color: var(--textColor2);
color: var(--quaternary-content);
}
.inputField label {
transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
top 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s;
color: var(--textColor3);
color: var(--tertiary-content);
background-color: transparent;
font-size: 15px;
position: absolute;
@ -87,7 +87,7 @@
}
.inputField:focus-within {
border-color: var(--inputBorderColorFocused);
border-color: var(--links);
}
.inputField input:focus,
@ -101,7 +101,7 @@
.inputField textarea:focus + label,
.inputField textarea:not(:placeholder-shown) + label,
.inputField.prefix textarea + label {
background-color: var(--bgColor2);
background-color: var(--system);
transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
font-size: 10px;
@ -112,7 +112,7 @@
.inputField input:focus + label,
.inputField textarea:focus + label {
color: var(--inputBorderColorFocused);
color: var(--links);
}
.checkboxField {
@ -154,12 +154,12 @@
}
.checkbox svg * {
stroke: #fff;
stroke: var(--primary-content);
}
.checkboxField input[type="checkbox"]:checked + label > .checkbox {
background: var(--primaryColor);
border-color: var(--primaryColor);
background: var(--accent);
border-color: var(--accent);
}
.checkboxField input[type="checkbox"]:checked + label > .checkbox svg {
@ -167,12 +167,12 @@
}
.checkboxField:focus-within .checkbox {
border: 1.5px solid var(--inputBorderColorFocused) !important;
border: 1.5px solid var(--links) !important;
}
.errorMessage {
margin: 0;
font-size: 13px;
color: #ff5b55;
color: var(--alert);
font-weight: 600;
}

6
src/input/SelectInput.module.css
View file

@ -17,11 +17,11 @@
align-items: center;
justify-content: space-between;
padding: 0 12px;
background-color: var(--bgColor1);
background-color: var(--background);
border-radius: 8px;
border: 1px solid var(--inputBorderColor);
border: 1px solid var(--quinary-content);
font-size: 15px;
color: var(--textColor1);
color: var(--primary-content);
height: 40px;
max-width: 100%;
width: 100%;

10
src/input/Toggle.module.css
View file

@ -11,7 +11,7 @@
height: 24px;
border: none;
border-radius: 21px;
background-color: #6f7882;
background-color: var(--quaternary-content);
cursor: pointer;
margin-right: 8px;
}
@ -22,7 +22,7 @@
width: 20px;
height: 20px;
border-radius: 21px;
background-color: #15191e;
background-color: var(--background);
left: 2px;
top: 2px;
}
@ -30,11 +30,11 @@
.label {
padding: 10px 8px;
line-height: 24px;
color: #6f7882;
color: var(--quaternary-content);
}
.toggle.on .button {
background-color: #0dbd8b;
background-color: var(--accent);
}
.toggle.on .ball {
@ -42,5 +42,5 @@
}
.toggle.on .label {
color: #ffffff;
color: var(--primary-content);
}

57
src/main.jsx → src/main.tsx
View file

@ -1,5 +1,5 @@
/*
Copyright 2021 New Vector Ltd
Copyright 2021-2022 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -23,10 +23,11 @@ import "matrix-js-sdk/src/browser-index";
import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import "./index.css";
import App from "./App";
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";
import "./index.css";
import App from "./App";
import { ErrorView } from "./FullScreenView";
import { init as initRageshake } from "./settings/rageshake";
import { InspectorContextProvider } from "./room/GroupCallInspector";
@ -37,30 +38,50 @@ console.info(`matrix-video-chat ${import.meta.env.VITE_APP_VERSION || "dev"}`);
if (import.meta.env.VITE_CUSTOM_THEME) {
const style = document.documentElement.style;
style.setProperty("--primaryColor", import.meta.env.VITE_PRIMARY_COLOR);
style.setProperty("--bgColor1", import.meta.env.VITE_BG_COLOR_1);
style.setProperty("--bgColor2", import.meta.env.VITE_BG_COLOR_2);
style.setProperty("--bgColor3", import.meta.env.VITE_BG_COLOR_3);
style.setProperty("--bgColor4", import.meta.env.VITE_BG_COLOR_4);
style.setProperty("--bgColor5", import.meta.env.VITE_BG_COLOR_5);
style.setProperty("--textColor1", import.meta.env.VITE_TEXT_COLOR_1);
style.setProperty("--textColor2", import.meta.env.VITE_TEXT_COLOR_2);
style.setProperty("--textColor4", import.meta.env.VITE_TEXT_COLOR_4);
style.setProperty("--accent", import.meta.env.VITE_THEME_ACCENT as string);
style.setProperty(
"--inputBorderColor",
import.meta.env.VITE_INPUT_BORDER_COLOR
"--accent-20",
import.meta.env.VITE_THEME_ACCENT_20 as string
);
style.setProperty("--alert", import.meta.env.VITE_THEME_ALERT as string);
style.setProperty(
"--alert-20",
import.meta.env.VITE_THEME_ALERT_20 as string
);
style.setProperty("--links", import.meta.env.VITE_THEME_LINKS as string);
style.setProperty(
"--primary-content",
import.meta.env.VITE_THEME_PRIMARY_CONTENT as string
);
style.setProperty(
"--inputBorderColorFocused",
import.meta.env.VITE_INPUT_BORDER_COLOR_FOCUSED
"--secondary-content",
import.meta.env.VITE_THEME_SECONDARY_CONTENT as string
);
style.setProperty(
"--tertiary-content",
import.meta.env.VITE_THEME_TERTIARY_CONTENT as string
);
style.setProperty(
"--quaternary-content",
import.meta.env.VITE_THEME_QUATERNARY_CONTENT as string
);
style.setProperty(
"--quinary-content",
import.meta.env.VITE_THEME_QUINARY_CONTENT as string
);
style.setProperty("--system", import.meta.env.VITE_THEME_SYSTEM as string);
style.setProperty(
"--background",
import.meta.env.VITE_THEME_BACKGROUND as string
);
}
const history = createBrowserHistory();
Sentry.init({
dsn: import.meta.env.VITE_SENTRY_DSN,
environment: import.meta.env.VITE_SENTRY_ENVIRONMENT ?? "production",
dsn: import.meta.env.VITE_SENTRY_DSN as string,
environment:
(import.meta.env.VITE_SENTRY_ENVIRONMENT as string) ?? "production",
integrations: [
new Integrations.BrowserTracing({
routingInstrumentation: Sentry.reactRouterV5Instrumentation(history),

2
src/popover/Popover.module.css
View file

@ -2,7 +2,7 @@
display: flex;
flex-direction: column;
width: 194px;
background: var(--bgColor2);
background: var(--system);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 8px;
}

6
src/room/GroupCallInspector.module.css
View file

@ -1,5 +1,5 @@
.inspector {
background-color: var(--bgColor2);
background-color: var(--system);
}
.scrollContainer {
@ -20,6 +20,6 @@
.sequenceDiagramViewer :global(.messageText) {
font-size: 12px;
fill: var(--textColor1) !important;
stroke: var(--textColor1) !important;
fill: var(--primary-content) !important;
stroke: var(--primary-content) !important;
}

10
src/room/PTTButton.module.css
View file

@ -4,8 +4,8 @@
max-height: 232px;
max-width: 232px;
border-radius: 116px;
color: ##fff;
border: 6px solid #0dbd8b;
color: var(--primary-content);
border: 6px solid var(--accent);
background-color: #21262c;
position: relative;
padding: 0;
@ -13,11 +13,11 @@
}
.talking {
background-color: #0dbd8b;
background-color: var(--accent);
cursor: unset;
}
.error {
background-color: #ff5b55;
border-color: #ff5b55;
background-color: var(--alert);
border-color: var(--alert);
}

2
src/room/PTTButton.tsx
View file

@ -143,7 +143,7 @@ export const PTTButton: React.FC<Props> = ({
});
const shadowColor = showTalkOverError
? "var(--alert-20)"
: "var(--primaryColor-20)";
: "var(--accent-20)";
return (
<animated.button

2
src/room/PTTCallView.module.css
View file

@ -31,7 +31,7 @@
}
.participants > p {
color: #a9b2bc;
color: var(--secondary-content);
margin-bottom: 8px;
}

10
src/tabs/Tabs.module.css
View file

@ -25,12 +25,12 @@
}
.tab > * {
color: var(--textColor4);
color: var(--secondary-content);
margin: 0 8px 0 0;
}
.tab svg * {
fill: var(--textColor4);
fill: var(--secondary-content);
}
.tab > :last-child {
@ -38,15 +38,15 @@
}
.tab.selected {
background-color: #0dbd8b;
background-color: var(--accent);
}
.tab.selected * {
color: #ffffff;
color: var(--primary-content);
}
.tab.selected svg * {
fill: #ffffff;
fill: var(--primary-content);
}
.tab.disabled {

4
src/typography/Typography.module.css
View file

@ -21,11 +21,11 @@
}
.link {
color: var(--linkColor);
color: var(--links);
}
.primary {
color: var(--primaryColor);
color: var(--accent);
}
.overflowEllipsis {

2
src/video-grid/VideoTile.module.css
View file

@ -37,7 +37,7 @@
bottom: -1px;
content: "";
border-radius: 20px;
box-shadow: inset 0 0 0 4px #0dbd8b !important;
box-shadow: inset 0 0 0 4px var(--accent) !important;
}
.videoTile.screenshare > video {