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_SENTRY_DSN=https://examplePublicKey@o0.ingest.sentry.io/0
# VITE_CUSTOM_THEME=true # VITE_CUSTOM_THEME=true
# VITE_PRIMARY_COLOR=#0dbd8b # VITE_THEME_ACCENT=#0dbd8b
# VITE_BG_COLOR_1=#ffffff # VITE_THEME_ACCENT_20=#0dbd8b33
# VITE_BG_COLOR_2=#f0f1f4 # VITE_THEME_ALERT=#ff5b55
# VITE_BG_COLOR_3=#dbdfe4 # VITE_THEME_ALERT_20=#ff5b5533
# VITE_BG_COLOR_4=#d1d3d7 # VITE_THEME_LINKS=#0086e6
# VITE_INPUT_BORDER_COLOR=#e7e7e7 # VITE_THEME_PRIMARY_CONTENT=#ffffff
# VITE_INPUT_BORDER_COLOR_FOCUSED=#238cf5 # VITE_THEME_SECONDARY_CONTENT=#a9b2bc
# VITE_TEXT_COLOR_1=#17191c # VITE_THEME_TERTIARY_CONTENT=#8e99a4
# VITE_TEXT_COLOR_2=#61708b # 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 { .avatar {
position: relative; position: relative;
color: #ffffff; color: var(--primary-content);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -17,7 +17,7 @@
} }
.avatar svg * { .avatar svg * {
fill: #ffffff; fill: var(--primary-content);
} }
.avatar span { .avatar span {

2
src/Facepile.module.css
View file

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

2
src/Header.module.css
View file

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

8
src/ListBox.module.css
View file

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

6
src/Menu.module.css
View file

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

4
src/Tooltip.module.css
View file

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

2
src/UserMenu.module.css
View file

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -11,7 +11,7 @@
height: 24px; height: 24px;
border: none; border: none;
border-radius: 21px; border-radius: 21px;
background-color: #6f7882; background-color: var(--quaternary-content);
cursor: pointer; cursor: pointer;
margin-right: 8px; margin-right: 8px;
} }
@ -22,7 +22,7 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 21px; border-radius: 21px;
background-color: #15191e; background-color: var(--background);
left: 2px; left: 2px;
top: 2px; top: 2px;
} }
@ -30,11 +30,11 @@
.label { .label {
padding: 10px 8px; padding: 10px 8px;
line-height: 24px; line-height: 24px;
color: #6f7882; color: var(--quaternary-content);
} }
.toggle.on .button { .toggle.on .button {
background-color: #0dbd8b; background-color: var(--accent);
} }
.toggle.on .ball { .toggle.on .ball {
@ -42,5 +42,5 @@
} }
.toggle.on .label { .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"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with 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 React from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import { createBrowserHistory } from "history"; import { createBrowserHistory } from "history";
import "./index.css";
import App from "./App";
import * as Sentry from "@sentry/react"; import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing"; import { Integrations } from "@sentry/tracing";
import "./index.css";
import App from "./App";
import { ErrorView } from "./FullScreenView"; import { ErrorView } from "./FullScreenView";
import { init as initRageshake } from "./settings/rageshake"; import { init as initRageshake } from "./settings/rageshake";
import { InspectorContextProvider } from "./room/GroupCallInspector"; 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) { if (import.meta.env.VITE_CUSTOM_THEME) {
const style = document.documentElement.style; const style = document.documentElement.style;
style.setProperty("--primaryColor", import.meta.env.VITE_PRIMARY_COLOR); style.setProperty("--accent", import.meta.env.VITE_THEME_ACCENT as string);
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( style.setProperty(
"--inputBorderColor", "--accent-20",
import.meta.env.VITE_INPUT_BORDER_COLOR 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( style.setProperty(
"--inputBorderColorFocused", "--secondary-content",
import.meta.env.VITE_INPUT_BORDER_COLOR_FOCUSED 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(); const history = createBrowserHistory();
Sentry.init({ Sentry.init({
dsn: import.meta.env.VITE_SENTRY_DSN, dsn: import.meta.env.VITE_SENTRY_DSN as string,
environment: import.meta.env.VITE_SENTRY_ENVIRONMENT ?? "production", environment:
(import.meta.env.VITE_SENTRY_ENVIRONMENT as string) ?? "production",
integrations: [ integrations: [
new Integrations.BrowserTracing({ new Integrations.BrowserTracing({
routingInstrumentation: Sentry.reactRouterV5Instrumentation(history), routingInstrumentation: Sentry.reactRouterV5Instrumentation(history),

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

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

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

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

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

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

2
src/room/PTTButton.tsx
View file

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

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

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

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

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

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

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

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

@ -37,7 +37,7 @@
bottom: -1px; bottom: -1px;
content: ""; content: "";
border-radius: 20px; 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 { .videoTile.screenshare > video {