From aa45261b0d39780214484440c5faba9fb179e8c0 Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Wed, 1 Jun 2022 11:48:17 -0400 Subject: [PATCH] Organize colors --- .env | 21 ++++++---- src/Avatar.module.css | 4 +- src/Facepile.module.css | 2 +- src/Header.module.css | 2 +- src/ListBox.module.css | 8 ++-- src/Menu.module.css | 6 +-- src/Tooltip.module.css | 4 +- src/UserMenu.module.css | 2 +- src/auth/LoginPage.module.css | 2 +- src/button/Button.module.css | 56 ++++++++++++------------- src/home/CallList.module.css | 4 +- src/index.css | 38 ++++++++--------- src/input/AvatarInputField.module.css | 4 +- src/input/Input.module.css | 28 ++++++------- src/input/SelectInput.module.css | 6 +-- src/input/Toggle.module.css | 10 ++--- src/{main.jsx => main.tsx} | 57 ++++++++++++++++++-------- src/popover/Popover.module.css | 2 +- src/room/GroupCallInspector.module.css | 6 +-- src/room/PTTButton.module.css | 10 ++--- src/room/PTTButton.tsx | 2 +- src/room/PTTCallView.module.css | 2 +- src/tabs/Tabs.module.css | 10 ++--- src/typography/Typography.module.css | 4 +- src/video-grid/VideoTile.module.css | 2 +- tsconfig.json | 2 +- 26 files changed, 158 insertions(+), 136 deletions(-) rename src/{main.jsx => main.tsx} (57%) diff --git a/.env b/.env index f9e5c88..1f0fc11 100644 --- a/.env +++ b/.env @@ -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 diff --git a/src/Avatar.module.css b/src/Avatar.module.css index 7e110d4..70ccd9b 100644 --- a/src/Avatar.module.css +++ b/src/Avatar.module.css @@ -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 { diff --git a/src/Facepile.module.css b/src/Facepile.module.css index bc5595a..c716988 100644 --- a/src/Facepile.module.css +++ b/src/Facepile.module.css @@ -18,7 +18,7 @@ .facepile .avatar { position: absolute; top: 0; - border: 1px solid var(--bgColor2); + border: 1px solid var(--system); } .facepile.md .avatar { diff --git a/src/Header.module.css b/src/Header.module.css index 27de0e4..04313d9 100644 --- a/src/Header.module.css +++ b/src/Header.module.css @@ -70,7 +70,7 @@ background: transparent; border: none; display: flex; - color: var(--textColor1); + color: var(--primary-content); cursor: pointer; align-items: center; } diff --git a/src/ListBox.module.css b/src/ListBox.module.css index 7b2be37..ab17f3c 100644 --- a/src/ListBox.module.css +++ b/src/ListBox.module.css @@ -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); } diff --git a/src/Menu.module.css b/src/Menu.module.css index 64e1286..3ef29e6 100644 --- a/src/Menu.module.css +++ b/src/Menu.module.css @@ -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); } diff --git a/src/Tooltip.module.css b/src/Tooltip.module.css index 053bc89..d598349 100644 --- a/src/Tooltip.module.css +++ b/src/Tooltip.module.css @@ -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; diff --git a/src/UserMenu.module.css b/src/UserMenu.module.css index 30692a6..2a0ed94 100644 --- a/src/UserMenu.module.css +++ b/src/UserMenu.module.css @@ -4,7 +4,7 @@ } .userButton svg * { - fill: var(--textColor1); + fill: var(--primary-content); } .avatar { diff --git a/src/auth/LoginPage.module.css b/src/auth/LoginPage.module.css index a553dbe..0d135c3 100644 --- a/src/auth/LoginPage.module.css +++ b/src/auth/LoginPage.module.css @@ -65,7 +65,7 @@ } .authLinks a { - color: #0dbd8b; + color: var(--accent); text-decoration: none; font-weight: normal; } diff --git a/src/button/Button.module.css b/src/button/Button.module.css index a76eaec..ad5c7e3 100644 --- a/src/button/Button.module.css +++ b/src/button/Button.module.css @@ -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 { diff --git a/src/home/CallList.module.css b/src/home/CallList.module.css index f499e1e..d8ff4a6 100644 --- a/src/home/CallList.module.css +++ b/src/home/CallList.module.css @@ -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; } diff --git a/src/index.css b/src/index.css index 0272651..da77b1c 100644 --- a/src/index.css +++ b/src/index.css @@ -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; diff --git a/src/input/AvatarInputField.module.css b/src/input/AvatarInputField.module.css index 53f31cc..3f08c2f 100644 --- a/src/input/AvatarInputField.module.css +++ b/src/input/AvatarInputField.module.css @@ -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); } diff --git a/src/input/Input.module.css b/src/input/Input.module.css index 1b30e42..865a895 100644 --- a/src/input/Input.module.css +++ b/src/input/Input.module.css @@ -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; } diff --git a/src/input/SelectInput.module.css b/src/input/SelectInput.module.css index 1679341..f1312c8 100644 --- a/src/input/SelectInput.module.css +++ b/src/input/SelectInput.module.css @@ -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%; diff --git a/src/input/Toggle.module.css b/src/input/Toggle.module.css index 929dd42..ad59ce0 100644 --- a/src/input/Toggle.module.css +++ b/src/input/Toggle.module.css @@ -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); } diff --git a/src/main.jsx b/src/main.tsx similarity index 57% rename from src/main.jsx rename to src/main.tsx index d9a87d2..2db2683 100644 --- a/src/main.jsx +++ b/src/main.tsx @@ -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. @@ -17,10 +17,11 @@ limitations under the License. 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"; @@ -31,30 +32,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), diff --git a/src/popover/Popover.module.css b/src/popover/Popover.module.css index c84777d..f96f1e2 100644 --- a/src/popover/Popover.module.css +++ b/src/popover/Popover.module.css @@ -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; } diff --git a/src/room/GroupCallInspector.module.css b/src/room/GroupCallInspector.module.css index d4e5103..289523f 100644 --- a/src/room/GroupCallInspector.module.css +++ b/src/room/GroupCallInspector.module.css @@ -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; } diff --git a/src/room/PTTButton.module.css b/src/room/PTTButton.module.css index fb849ad..fe426a0 100644 --- a/src/room/PTTButton.module.css +++ b/src/room/PTTButton.module.css @@ -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); } diff --git a/src/room/PTTButton.tsx b/src/room/PTTButton.tsx index 62299a1..ef575f6 100644 --- a/src/room/PTTButton.tsx +++ b/src/room/PTTButton.tsx @@ -143,7 +143,7 @@ export const PTTButton: React.FC = ({ }); const shadowColor = showTalkOverError ? "var(--alert-20)" - : "var(--primaryColor-20)"; + : "var(--accent-20)"; return ( p { - color: #a9b2bc; + color: var(--secondary-content); margin-bottom: 8px; } diff --git a/src/tabs/Tabs.module.css b/src/tabs/Tabs.module.css index 5a757fc..4da8759 100644 --- a/src/tabs/Tabs.module.css +++ b/src/tabs/Tabs.module.css @@ -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 { diff --git a/src/typography/Typography.module.css b/src/typography/Typography.module.css index 0719fbf..a10c8b8 100644 --- a/src/typography/Typography.module.css +++ b/src/typography/Typography.module.css @@ -21,11 +21,11 @@ } .link { - color: var(--linkColor); + color: var(--links); } .primary { - color: var(--primaryColor); + color: var(--accent); } .overflowEllipsis { diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css index 0948488..eda83ca 100644 --- a/src/video-grid/VideoTile.module.css +++ b/src/video-grid/VideoTile.module.css @@ -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 { diff --git a/tsconfig.json b/tsconfig.json index 0de9b90..437a94f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,7 +2,7 @@ "compilerOptions": { "target": "es2016", "esModuleInterop": true, - "module": "commonjs", + "module": "es2020", "moduleResolution": "node", "noEmit": true, "noImplicitAny": false,