зеркало из https://github.com/mozilla/hubs.git
Reduce the number of minimal theme variables
This commit is contained in:
Robert Long
Родитель
e6ca9275c8
Коммит
62a61f9a60
|
|
@ -1,11 +1,11 @@
|
|||
import React, { useEffect } from "react";
|
||||
import { useAccessibleOutlineStyle } from "../src/react-components/input/useAccessibleOutlineStyle";
|
||||
import "../src/react-components/styles/global.scss";
|
||||
import { WrappedIntlProvider } from "../src/react-components/wrapped-intl-provider";
|
||||
import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
|
||||
import { AVAILABLE_LOCALES } from "../src/assets/locales/locale_config";
|
||||
import { setLocale } from "../src/utils/i18n";
|
||||
import { useTheme, themes } from "../src/react-components/styles/theme";
|
||||
import "../src/react-components/styles/global.scss";
|
||||
|
||||
const Layout = ({ children, locale, theme }) => {
|
||||
useTheme(theme);
|
||||
|
|
|
|||
|
|
@ -266,7 +266,7 @@
|
|||
|
||||
.form-submit {
|
||||
@extend %action-button;
|
||||
background: theme.$primary-bg-color;
|
||||
background: theme.$primary-color;
|
||||
margin: 0;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
|
@ -291,7 +291,7 @@
|
|||
a {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
color: theme.$cancel-bg-color;
|
||||
color: theme.$cancel-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ body {
|
|||
|
||||
:local(.form-submit) {
|
||||
@extend %action-button;
|
||||
background: theme.$primary-bg-color;
|
||||
background: theme.$primary-color;
|
||||
margin: 0;
|
||||
min-height: max-content;
|
||||
margin-top: 16px;
|
||||
|
|
|
|||
|
|
@ -242,7 +242,7 @@ $semi-bold: 600;
|
|||
color: theme.$text2-color;
|
||||
@media(hover: hover){
|
||||
&:hover {
|
||||
color: theme.$primary-bg-color;
|
||||
color: theme.$primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -384,7 +384,7 @@ $semi-bold: 600;
|
|||
// MIT License
|
||||
|
||||
$track-color: theme.$toggle-button-color !default;
|
||||
$thumb-color: theme.$primary-bg-color !default;
|
||||
$thumb-color: theme.$primary-color !default;
|
||||
|
||||
$thumb-radius: 10px !default;
|
||||
$thumb-height: 20px !default;
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@
|
|||
|
||||
&:hover {
|
||||
@media (pointer: fine) {
|
||||
background-color: theme.$primary-bg-color;
|
||||
background-color: theme.$primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,9 +43,9 @@
|
|||
border-radius: 28px;
|
||||
padding: 0px 18px;
|
||||
|
||||
background: theme.$primary-bg-color;
|
||||
background: theme.$primary-color;
|
||||
font-size: 1em;
|
||||
color: theme.$primary-text-color;
|
||||
color: theme.$text5-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ import AvatarPreview from "./react-components/avatar-preview";
|
|||
|
||||
import { fetchAvatar, remixAvatar } from "./utils/avatar-utils";
|
||||
|
||||
import "./react-components/styles/global.scss";
|
||||
import styles from "./assets/stylesheets/avatar.scss";
|
||||
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import ReactDOM from "react-dom";
|
||||
import React from "react";
|
||||
import "./utils/configs";
|
||||
import "./react-components/styles/global.scss";
|
||||
import styles from "./assets/stylesheets/cloud.scss";
|
||||
import classNames from "classnames";
|
||||
import { WrappedIntlProvider } from "./react-components/wrapped-intl-provider";
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import React, { Component } from "react";
|
|||
import "./utils/configs";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import { WrappedIntlProvider } from "./react-components/wrapped-intl-provider";
|
||||
import "./react-components/styles/global.scss";
|
||||
import styles from "./assets/stylesheets/discord.scss";
|
||||
import discordBotLogo from "./assets/images/discord-bot-logo.png";
|
||||
import discordBotVideoMP4 from "./assets/video/discord.mp4";
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import "@babel/polyfill";
|
|||
|
||||
console.log(`App version: ${process.env.BUILD_VERSION || "?"}`);
|
||||
|
||||
import "./react-components/styles/global.scss";
|
||||
import "./assets/stylesheets/globals.scss";
|
||||
import "./assets/stylesheets/hub.scss";
|
||||
import initialBatchImage from "./assets/images/warning_icon.png";
|
||||
import loadingEnvironment from "./assets/models/LoadingEnvironment.glb";
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import Store from "./storage/store";
|
|||
import "./utils/theme";
|
||||
import { HomePage } from "./react-components/home/HomePage";
|
||||
import { AuthContextProvider } from "./react-components/auth/AuthContext";
|
||||
import "./react-components/styles/global.scss";
|
||||
|
||||
registerTelemetry("/home", "Hubs Home Page");
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import "./webxr-bypass-hacks";
|
||||
import "./utils/theme";
|
||||
import "./utils/configs";
|
||||
import "./react-components/styles/global.scss";
|
||||
import "./assets/stylesheets/link.scss";
|
||||
import "aframe";
|
||||
import React from "react";
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
@use "../styles/theme.scss";
|
||||
|
||||
:local(.pwa-button) {
|
||||
color: theme.$primary-bg-color;
|
||||
color: theme.$primary-color;
|
||||
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$primary-bg-color;
|
||||
stroke: theme.$primary-color;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$primary-bg-color;
|
||||
fill: theme.$primary-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -24,28 +24,28 @@
|
|||
}
|
||||
|
||||
:local(.basic), :local(.transparent) {
|
||||
color: theme.$basic-text-color;
|
||||
border: 1px solid theme.$basic-text-color;
|
||||
background-color: theme.$basic-bg-color;
|
||||
color: theme.$text4-color;
|
||||
border: 1px solid theme.$text4-color;
|
||||
background-color: theme.$basic-color;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$basic-text-color;
|
||||
stroke: theme.$text4-color;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$basic-text-color;
|
||||
fill: theme.$text4-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: theme.$basic-text-color-hover;
|
||||
background-color: theme.$basic-bg-color-hover;
|
||||
color: theme.$text4-color-hover;
|
||||
background-color: theme.$basic-color-hover;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: theme.$basic-text-color-pressed;
|
||||
background-color: theme.$basic-bg-color-pressed;
|
||||
color: theme.$text4-color-pressed;
|
||||
background-color: theme.$basic-color-pressed;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -55,202 +55,202 @@
|
|||
}
|
||||
|
||||
:local(.primary) {
|
||||
color: theme.$primary-text-color;
|
||||
background-color: theme.$primary-bg-color;
|
||||
color: theme.$text5-color;
|
||||
background-color: theme.$primary-color;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$primary-text-color;
|
||||
stroke: theme.$text5-color;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$primary-text-color;
|
||||
fill: theme.$text5-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: theme.$primary-text-color-hover;
|
||||
background-color: theme.$primary-bg-color-hover;
|
||||
color: theme.$text5-color-hover;
|
||||
background-color: theme.$primary-color-hover;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: theme.$primary-text-color-pressed;
|
||||
background-color: theme.$primary-bg-color-pressed;
|
||||
color: theme.$text5-color-pressed;
|
||||
background-color: theme.$primary-color-pressed;
|
||||
}
|
||||
}
|
||||
|
||||
:local(.accept) {
|
||||
color: theme.$accept-text-color;
|
||||
background-color: theme.$accept-bg-color;
|
||||
color: theme.$text5-color;
|
||||
background-color: theme.$accept-color;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accept-text-color;
|
||||
stroke: theme.$text5-color;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accept-text-color;
|
||||
fill: theme.$text5-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: theme.$accept-text-color-hover;
|
||||
background-color: theme.$accept-bg-color-hover;
|
||||
color: theme.$text5-color-hover;
|
||||
background-color: theme.$accept-color-hover;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: theme.$accept-text-color-pressed;
|
||||
background-color: theme.$accept-bg-color-pressed;
|
||||
color: theme.$text5-color-pressed;
|
||||
background-color: theme.$accept-color-pressed;
|
||||
}
|
||||
}
|
||||
|
||||
:local(.cancel) {
|
||||
color: theme.$cancel-text-color;
|
||||
background-color: theme.$cancel-bg-color;
|
||||
color: theme.$text5-color;
|
||||
background-color: theme.$cancel-color;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$cancel-text-color;
|
||||
stroke: theme.$text5-color;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$cancel-text-color;
|
||||
fill: theme.$text5-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: theme.$cancel-text-color-hover;
|
||||
background-color: theme.$cancel-bg-color-hover;
|
||||
color: theme.$text5-color-hover;
|
||||
background-color: theme.$cancel-color-hover;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: theme.$cancel-text-color-pressed;
|
||||
background-color: theme.$cancel-bg-color-pressed;
|
||||
color: theme.$text5-color-pressed;
|
||||
background-color: theme.$cancel-color-pressed;
|
||||
}
|
||||
}
|
||||
|
||||
:local(.accent1) {
|
||||
color: theme.$accent1-text-color;
|
||||
background-color: theme.$accent1-bg-color;
|
||||
color: theme.$text5-color;
|
||||
background-color: theme.$accent1-color;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accent1-text-color;
|
||||
stroke: theme.$text5-color;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accent1-text-color;
|
||||
fill: theme.$text5-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: theme.$accent1-text-color-hover;
|
||||
background-color: theme.$accent1-bg-color-hover;
|
||||
color: theme.$text5-color-hover;
|
||||
background-color: theme.$accent1-color-hover;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: theme.$accent1-text-color-pressed;
|
||||
background-color: theme.$accent1-bg-color-pressed;
|
||||
color: theme.$text5-color-pressed;
|
||||
background-color: theme.$accent1-color-pressed;
|
||||
}
|
||||
}
|
||||
|
||||
:local(.accent2) {
|
||||
color: theme.$accent2-text-color;
|
||||
background-color: theme.$accent2-bg-color;
|
||||
color: theme.$text5-color;
|
||||
background-color: theme.$accent2-color;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accent2-text-color;
|
||||
stroke: theme.$text5-color;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accent2-text-color;
|
||||
fill: theme.$text5-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: theme.$accent2-text-color-hover;
|
||||
background-color: theme.$accent2-bg-color-hover;
|
||||
color: theme.$text5-color-hover;
|
||||
background-color: theme.$accent2-color-hover;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: theme.$accent2-text-color-pressed;
|
||||
background-color: theme.$accent2-bg-color-pressed;
|
||||
color: theme.$text5-color-pressed;
|
||||
background-color: theme.$accent2-color-pressed;
|
||||
}
|
||||
}
|
||||
|
||||
:local(.accent3) {
|
||||
color: theme.$accent3-text-color;
|
||||
background-color: theme.$accent3-bg-color;
|
||||
color: theme.$text5-color;
|
||||
background-color: theme.$accent3-color;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accent3-text-color;
|
||||
stroke: theme.$text5-color;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accent3-text-color;
|
||||
fill: theme.$text5-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: theme.$accent3-text-color-hover;
|
||||
background-color: theme.$accent3-bg-color-hover;
|
||||
color: theme.$text5-color-hover;
|
||||
background-color: theme.$accent3-color-hover;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: theme.$accent3-text-color-pressed;
|
||||
background-color: theme.$accent3-bg-color-pressed;
|
||||
color: theme.$text5-color-pressed;
|
||||
background-color: theme.$accent3-color-pressed;
|
||||
}
|
||||
}
|
||||
|
||||
:local(.accent4) {
|
||||
color: theme.$accent4-text-color;
|
||||
background-color: theme.$accent4-bg-color;
|
||||
color: theme.$text5-color;
|
||||
background-color: theme.$accent4-color;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accent4-text-color;
|
||||
stroke: theme.$text5-color;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accent4-text-color;
|
||||
fill: theme.$text5-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: theme.$accent4-text-color-hover;
|
||||
background-color: theme.$accent4-bg-color-hover;
|
||||
color: theme.$text5-color-hover;
|
||||
background-color: theme.$accent4-color-hover;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: theme.$accent4-text-color-pressed;
|
||||
background-color: theme.$accent4-bg-color-pressed;
|
||||
color: theme.$text5-color-pressed;
|
||||
background-color: theme.$accent4-color-pressed;
|
||||
}
|
||||
}
|
||||
|
||||
:local(.accent5) {
|
||||
color: theme.$accent5-text-color;
|
||||
background-color: theme.$accent5-bg-color;
|
||||
color: theme.$text5-color;
|
||||
background-color: theme.$accent5-color;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accent5-text-color;
|
||||
stroke: theme.$text5-color;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accent5-text-color;
|
||||
fill: theme.$text5-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: theme.$accent5-text-color-hover;
|
||||
background-color: theme.$accent5-bg-color-hover;
|
||||
color: theme.$text5-color-hover;
|
||||
background-color: theme.$accent5-color-hover;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: theme.$accent5-text-color-pressed;
|
||||
background-color: theme.$accent5-bg-color-pressed;
|
||||
color: theme.$text5-color-pressed;
|
||||
background-color: theme.$accent5-color-pressed;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,29 +19,29 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
color: theme.$primary-bg-color-hover;
|
||||
color: theme.$primary-color-hover;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$primary-bg-color-hover;
|
||||
stroke: theme.$primary-color-hover;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$primary-bg-color-hover;
|
||||
fill: theme.$primary-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: theme.$primary-bg-color-pressed;
|
||||
color: theme.$primary-color-pressed;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$primary-bg-color-pressed;
|
||||
stroke: theme.$primary-color-pressed;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$primary-bg-color-pressed;
|
||||
fill: theme.$primary-color-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,34 +63,34 @@
|
|||
}
|
||||
|
||||
&:hover :local(.icon-container) {
|
||||
border-color: theme.$basic-bg-color-hover;
|
||||
background-color: theme.$basic-bg-color-hover;
|
||||
border-color: theme.$basic-color-hover;
|
||||
background-color: theme.$basic-color-hover;
|
||||
}
|
||||
|
||||
&:active :local(.icon-container) {
|
||||
border-color: theme.$basic-bg-color-pressed;
|
||||
background-color: theme.$basic-bg-color-pressed;
|
||||
border-color: theme.$basic-color-pressed;
|
||||
background-color: theme.$basic-color-pressed;
|
||||
}
|
||||
|
||||
&:local(.selected) {
|
||||
:local(.icon-container) {
|
||||
border-color: transparent;
|
||||
background-color: theme.$toolbar-basic-bg-color;
|
||||
background-color: theme.$toolbar-basic-color;
|
||||
}
|
||||
|
||||
label {
|
||||
color: theme.$basic-text-color;
|
||||
color: theme.$text4-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
:local(.icon-container) {
|
||||
background-color: theme.$toolbar-basic-bg-color-hover;
|
||||
background-color: theme.$toolbar-basic-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
:local(.icon-container) {
|
||||
background-color: theme.$toolbar-basic-bg-color-pressed;
|
||||
background-color: theme.$toolbar-basic-color-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -100,50 +100,50 @@
|
|||
border-color: theme.$transparent;
|
||||
}
|
||||
|
||||
:local(.accept) {
|
||||
:local(.primary) {
|
||||
:local(.icon-container) {
|
||||
background-color: theme.$accept-bg-color;
|
||||
background-color: theme.$primary-color;
|
||||
}
|
||||
|
||||
&:hover :local(.icon-container) {
|
||||
background-color: theme.$accept-bg-color-hover;
|
||||
background-color: theme.$primary-color-hover;
|
||||
}
|
||||
|
||||
&:active :local(.icon-container) {
|
||||
background-color: theme.$accept-bg-color-pressed;
|
||||
background-color: theme.$primary-color-pressed;
|
||||
}
|
||||
|
||||
&:local(.selected) {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$accept-bg-color;
|
||||
border-color: theme.$primary-color;
|
||||
background-color: transparent;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accept-bg-color;
|
||||
stroke: theme.$primary-color;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accept-bg-color;
|
||||
fill: theme.$primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: theme.$accept-bg-color;
|
||||
color: theme.$primary-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$accept-bg-color-hover;
|
||||
border-color: theme.$primary-color-hover;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accept-bg-color-hover;
|
||||
stroke: theme.$primary-color-hover;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accept-bg-color-hover;
|
||||
fill: theme.$primary-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -151,15 +151,83 @@
|
|||
|
||||
&:active {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$accept-bg-color-pressed;
|
||||
border-color: theme.$primary-color-pressed;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accept-bg-color-pressed;
|
||||
stroke: theme.$primary-color-pressed;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accept-bg-color-pressed;
|
||||
fill: theme.$primary-color-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:local(.accept) {
|
||||
:local(.icon-container) {
|
||||
background-color: theme.$accept-color;
|
||||
}
|
||||
|
||||
&:hover :local(.icon-container) {
|
||||
background-color: theme.$accept-color-hover;
|
||||
}
|
||||
|
||||
&:active :local(.icon-container) {
|
||||
background-color: theme.$accept-color-pressed;
|
||||
}
|
||||
|
||||
&:local(.selected) {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$accept-color;
|
||||
background-color: transparent;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accept-color;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accept-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: theme.$accept-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$accept-color-hover;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accept-color-hover;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accept-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$accept-color-pressed;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accept-color-pressed;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accept-color-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -169,48 +237,48 @@
|
|||
|
||||
:local(.cancel) {
|
||||
:local(.icon-container) {
|
||||
background-color: theme.$cancel-bg-color;
|
||||
background-color: theme.$cancel-color;
|
||||
}
|
||||
|
||||
&:hover :local(.icon-container) {
|
||||
background-color: theme.$cancel-bg-color-hover;
|
||||
background-color: theme.$cancel-color-hover;
|
||||
}
|
||||
|
||||
&:active :local(.icon-container) {
|
||||
background-color: theme.$cancel-bg-color-pressed;
|
||||
background-color: theme.$cancel-color-pressed;
|
||||
}
|
||||
|
||||
&:local(.selected) {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$cancel-bg-color;
|
||||
border-color: theme.$cancel-color;
|
||||
background-color: transparent;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$cancel-bg-color;
|
||||
stroke: theme.$cancel-color;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$cancel-bg-color;
|
||||
fill: theme.$cancel-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: theme.$cancel-bg-color;
|
||||
color: theme.$cancel-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$cancel-bg-color-hover;
|
||||
border-color: theme.$cancel-color-hover;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$cancel-bg-color-hover;
|
||||
stroke: theme.$cancel-color-hover;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$cancel-bg-color-hover;
|
||||
fill: theme.$cancel-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -218,15 +286,15 @@
|
|||
|
||||
&:active {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$cancel-bg-color-pressed;
|
||||
border-color: theme.$cancel-color-pressed;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$cancel-bg-color-pressed;
|
||||
stroke: theme.$cancel-color-pressed;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$cancel-bg-color-pressed;
|
||||
fill: theme.$cancel-color-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -236,48 +304,48 @@
|
|||
|
||||
:local(.accent1) {
|
||||
:local(.icon-container) {
|
||||
background-color: theme.$accent1-bg-color;
|
||||
background-color: theme.$accent1-color;
|
||||
}
|
||||
|
||||
&:hover :local(.icon-container) {
|
||||
background-color: theme.$accent1-bg-color-hover;
|
||||
background-color: theme.$accent1-color-hover;
|
||||
}
|
||||
|
||||
&:active :local(.icon-container) {
|
||||
background-color: theme.$accent1-bg-color-pressed;
|
||||
background-color: theme.$accent1-color-pressed;
|
||||
}
|
||||
|
||||
&:local(.selected) {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$accent1-bg-color;
|
||||
border-color: theme.$accent1-color;
|
||||
background-color: transparent;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accent1-bg-color;
|
||||
stroke: theme.$accent1-color;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accent1-bg-color;
|
||||
fill: theme.$accent1-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: theme.$accent1-bg-color;
|
||||
color: theme.$accent1-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$accent1-bg-color-hover;
|
||||
border-color: theme.$accent1-color-hover;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accent1-bg-color-hover;
|
||||
stroke: theme.$accent1-color-hover;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accent1-bg-color-hover;
|
||||
fill: theme.$accent1-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -285,15 +353,15 @@
|
|||
|
||||
&:active {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$accent1-bg-color-pressed;
|
||||
border-color: theme.$accent1-color-pressed;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accent1-bg-color-pressed;
|
||||
stroke: theme.$accent1-color-pressed;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accent1-bg-color-pressed;
|
||||
fill: theme.$accent1-color-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -303,48 +371,48 @@
|
|||
|
||||
:local(.accent2) {
|
||||
:local(.icon-container) {
|
||||
background-color: theme.$accent2-bg-color;
|
||||
background-color: theme.$accent2-color;
|
||||
}
|
||||
|
||||
&:hover :local(.icon-container) {
|
||||
background-color: theme.$accent2-bg-color-hover;
|
||||
background-color: theme.$accent2-color-hover;
|
||||
}
|
||||
|
||||
&:active :local(.icon-container) {
|
||||
background-color: theme.$accent2-bg-color-pressed;
|
||||
background-color: theme.$accent2-color-pressed;
|
||||
}
|
||||
|
||||
&:local(.selected) {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$accent2-bg-color;
|
||||
border-color: theme.$accent2-color;
|
||||
background-color: transparent;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accent2-bg-color;
|
||||
stroke: theme.$accent2-color;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accent2-bg-color;
|
||||
fill: theme.$accent2-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: theme.$accent2-bg-color;
|
||||
color: theme.$accent2-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$accent2-bg-color-hover;
|
||||
border-color: theme.$accent2-color-hover;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accent2-bg-color-hover;
|
||||
stroke: theme.$accent2-color-hover;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accent2-bg-color-hover;
|
||||
fill: theme.$accent2-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -352,15 +420,15 @@
|
|||
|
||||
&:active {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$accent2-bg-color-pressed;
|
||||
border-color: theme.$accent2-color-pressed;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accent2-bg-color-pressed;
|
||||
stroke: theme.$accent2-color-pressed;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accent2-bg-color-pressed;
|
||||
fill: theme.$accent2-color-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -370,48 +438,48 @@
|
|||
|
||||
:local(.accent3) {
|
||||
:local(.icon-container) {
|
||||
background-color: theme.$accent3-bg-color;
|
||||
background-color: theme.$accent3-color;
|
||||
}
|
||||
|
||||
&:hover :local(.icon-container) {
|
||||
background-color: theme.$accent3-bg-color-hover;
|
||||
background-color: theme.$accent3-color-hover;
|
||||
}
|
||||
|
||||
&:active :local(.icon-container) {
|
||||
background-color: theme.$accent3-bg-color-pressed;
|
||||
background-color: theme.$accent3-color-pressed;
|
||||
}
|
||||
|
||||
&:local(.selected) {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$accent3-bg-color;
|
||||
border-color: theme.$accent3-color;
|
||||
background-color: transparent;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accent3-bg-color;
|
||||
stroke: theme.$accent3-color;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accent3-bg-color;
|
||||
fill: theme.$accent3-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: theme.$accent3-bg-color;
|
||||
color: theme.$accent3-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$accent3-bg-color-hover;
|
||||
border-color: theme.$accent3-color-hover;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accent3-bg-color-hover;
|
||||
stroke: theme.$accent3-color-hover;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accent3-bg-color-hover;
|
||||
fill: theme.$accent3-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -419,15 +487,15 @@
|
|||
|
||||
&:active {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$accent3-bg-color-pressed;
|
||||
border-color: theme.$accent3-color-pressed;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accent3-bg-color-pressed;
|
||||
stroke: theme.$accent3-color-pressed;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accent3-bg-color-pressed;
|
||||
fill: theme.$accent3-color-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -437,48 +505,48 @@
|
|||
|
||||
:local(.accent4) {
|
||||
:local(.icon-container) {
|
||||
background-color: theme.$accent4-bg-color;
|
||||
background-color: theme.$accent4-color;
|
||||
}
|
||||
|
||||
&:hover :local(.icon-container) {
|
||||
background-color: theme.$accent4-bg-color-hover;
|
||||
background-color: theme.$accent4-color-hover;
|
||||
}
|
||||
|
||||
&:active :local(.icon-container) {
|
||||
background-color: theme.$accent4-bg-color-pressed;
|
||||
background-color: theme.$accent4-color-pressed;
|
||||
}
|
||||
|
||||
&:local(.selected) {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$accent4-bg-color;
|
||||
border-color: theme.$accent4-color;
|
||||
background-color: transparent;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accent4-bg-color;
|
||||
stroke: theme.$accent4-color;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accent4-bg-color;
|
||||
fill: theme.$accent4-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: theme.$accent4-bg-color;
|
||||
color: theme.$accent4-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$accent4-bg-color-hover;
|
||||
border-color: theme.$accent4-color-hover;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accent4-bg-color-hover;
|
||||
stroke: theme.$accent4-color-hover;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accent4-bg-color-hover;
|
||||
fill: theme.$accent4-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -486,15 +554,15 @@
|
|||
|
||||
&:active {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$accent4-bg-color-pressed;
|
||||
border-color: theme.$accent4-color-pressed;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accent4-bg-color-pressed;
|
||||
stroke: theme.$accent4-color-pressed;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accent4-bg-color-pressed;
|
||||
fill: theme.$accent4-color-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -504,48 +572,48 @@
|
|||
|
||||
:local(.accent5) {
|
||||
:local(.icon-container) {
|
||||
background-color: theme.$accent5-bg-color;
|
||||
background-color: theme.$accent5-color;
|
||||
}
|
||||
|
||||
&:hover :local(.icon-container) {
|
||||
background-color: theme.$accent5-bg-color-hover;
|
||||
background-color: theme.$accent5-color-hover;
|
||||
}
|
||||
|
||||
&:active :local(.icon-container) {
|
||||
background-color: theme.$accent5-bg-color-pressed;
|
||||
background-color: theme.$accent5-color-pressed;
|
||||
}
|
||||
|
||||
&:local(.selected) {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$accent5-bg-color;
|
||||
border-color: theme.$accent5-color;
|
||||
background-color: transparent;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accent5-bg-color;
|
||||
stroke: theme.$accent5-color;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accent5-bg-color;
|
||||
fill: theme.$accent5-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: theme.$accent5-bg-color;
|
||||
color: theme.$accent5-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$accent5-bg-color-hover;
|
||||
border-color: theme.$accent5-color-hover;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accent5-bg-color-hover;
|
||||
stroke: theme.$accent5-color-hover;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accent5-bg-color-hover;
|
||||
fill: theme.$accent5-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -553,15 +621,15 @@
|
|||
|
||||
&:active {
|
||||
:local(.icon-container) {
|
||||
border-color: theme.$accent5-bg-color-pressed;
|
||||
border-color: theme.$accent5-color-pressed;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$accent5-bg-color-pressed;
|
||||
stroke: theme.$accent5-color-pressed;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$accent5-bg-color-pressed;
|
||||
fill: theme.$accent5-color-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { Page } from "./Page";
|
|||
import { AuthContext } from "../auth/AuthContext";
|
||||
import configs from "../../utils/configs";
|
||||
import { useAccessibleOutlineStyle } from "../input/useAccessibleOutlineStyle";
|
||||
import "../styles/global.scss";
|
||||
|
||||
export function PageContainer({ children, ...rest }) {
|
||||
const auth = useContext(AuthContext);
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@
|
|||
animation: rotate 3s infinite linear;
|
||||
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$primary-bg-color;
|
||||
stroke: theme.$primary-color;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$primary-bg-color;
|
||||
fill: theme.$primary-color;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
:local(.pager-button) {
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
background-color: theme.$primary-bg-color;
|
||||
background-color: theme.$primary-color;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
margin: 32px;
|
||||
|
|
@ -59,20 +59,20 @@
|
|||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: theme.$primary-text-color;
|
||||
stroke: theme.$text5-color;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: theme.$primary-text-color;
|
||||
fill: theme.$text5-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: theme.$primary-bg-color-hover;
|
||||
background-color: theme.$primary-color-hover;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: theme.$primary-bg-color-pressed;
|
||||
background-color: theme.$primary-color-pressed;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
|
|
|
|||
|
|
@ -35,14 +35,14 @@
|
|||
transform: translateX(-50%) translateY(-50%);
|
||||
|
||||
path {
|
||||
stroke: theme.$primary-text-color !important;
|
||||
stroke: theme.$text5-color !important;
|
||||
stroke-width: 1.25;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:local(.mic-level) {
|
||||
color: theme.$primary-bg-color;
|
||||
color: theme.$primary-color;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
}
|
||||
|
|
@ -57,13 +57,13 @@
|
|||
:local(.mic-button) {
|
||||
&:hover {
|
||||
:local(.mic-level) {
|
||||
color: theme.$primary-bg-color-hover;
|
||||
color: theme.$primary-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
:local(.mic-level) {
|
||||
color: theme.$primary-bg-color-pressed;
|
||||
color: theme.$primary-color-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -125,6 +125,6 @@
|
|||
|
||||
:global(.keyboard-user) {
|
||||
:local(.back-button):focus, :local(.object-menu-container) :focus {
|
||||
box-shadow: 0 0 0 3px theme.$overtlay-outline-color;
|
||||
box-shadow: 0 0 0 3px theme.$overlay-outline-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,168 @@
|
|||
@use "./theme.scss";
|
||||
@import "~normalize.css";
|
||||
|
||||
// Theme CSS Variables
|
||||
// Injected theme will overwrite these defaults
|
||||
:root {
|
||||
--font-family-default: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--font-family-monospace: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
|
||||
|
||||
--text1-color: #{theme.$black};
|
||||
--text1-color-hover: #{theme.$black-hover};
|
||||
--text1-color-pressed: #{theme.$black-pressed};
|
||||
--text2-color: #{theme.$darkgrey};
|
||||
--text2-color-hover: #{theme.$darkgrey-hover};
|
||||
--text2-color-pressed: #{theme.$darkgrey-pressed};
|
||||
--text3-color: #{theme.$grey};
|
||||
--text3-color-hover: #{theme.$grey-hover};
|
||||
--text3-color-pressed: #{theme.$grey-pressed};
|
||||
--text4-color: #{theme.$darkgrey};
|
||||
--text4-color-hover: var(--text4-color);
|
||||
--text4-color-pressed: var(--text4-color);
|
||||
--text5-color: #{theme.$white};
|
||||
--text5-color-hover: var(--text5-color);
|
||||
--text5-color-pressed: var(--text5-color);
|
||||
|
||||
--link-color: #{theme.$blue};
|
||||
--link-color-hover: #{theme.$blue-hover};
|
||||
--link-color-pressed: #{theme.$blue-pressed};
|
||||
|
||||
--accept-color: #{theme.$green};
|
||||
--accept-color-hover: #{theme.$green-hover};
|
||||
--accept-color-pressed: #{theme.$green-pressed};
|
||||
|
||||
--cancel-color: #{theme.$red};
|
||||
--cancel-color-hover: #{theme.$red-hover};
|
||||
--cancel-color-pressed: #{theme.$red-pressed};
|
||||
|
||||
--accent1-color: #{theme.$red};
|
||||
--accent1-color-hover: #{theme.$red-hover};
|
||||
--accent1-color-pressed: #{theme.$red-pressed};
|
||||
|
||||
--accent2-color: #{theme.$orange};
|
||||
--accent2-color-hover: #{theme.$orange-hover};
|
||||
--accent2-color-pressed: #{theme.$orange-pressed};
|
||||
|
||||
--accent3-color: #{theme.$green};
|
||||
--accent3-color-hover: #{theme.$green-hover};
|
||||
--accent3-color-pressed: #{theme.$green-pressed};
|
||||
|
||||
--accent4-color: #{theme.$blue};
|
||||
--accent4-color-hover: #{theme.$blue-hover};
|
||||
--accent4-color-pressed: #{theme.$blue-pressed};
|
||||
|
||||
--accent5-color: #{theme.$purple};
|
||||
--accent5-color-hover: #{theme.$purple-hover};
|
||||
--accent5-color-pressed: #{theme.$purple-pressed};
|
||||
|
||||
--primary-color: #{theme.$blue};
|
||||
--primary-color-hover: #{theme.$blue-hover};
|
||||
--primary-color-pressed: #{theme.$blue-pressed};
|
||||
|
||||
--secondary-color: #{theme.$lightgrey};
|
||||
--secondary-color-hover: #{theme.$lightgrey-hover};
|
||||
--secondary-color-pressed: #{theme.$lightgrey-pressed};
|
||||
|
||||
--basic-color: #{theme.$white};
|
||||
--basic-color-hover: #{theme.$white-hover};
|
||||
--basic-color-pressed: #{theme.$white-pressed};
|
||||
|
||||
--background1-color: #{theme.$white};
|
||||
--background2-color: #{theme.$recessed-bg};
|
||||
--background3-color: #{theme.$lightgrey};
|
||||
--background4-color: #{theme.$grey};
|
||||
|
||||
--loading-screen-background: radial-gradient(50% 50% at 50% 50%, #FFFFFF 0%, #EEEEEE 100%);
|
||||
|
||||
--border1-color: #{theme.$lightgrey};
|
||||
--border2-color: #{theme.$grey};
|
||||
--border3-color: #{theme.$darkgrey};
|
||||
|
||||
--outline-color: #{theme.$black};
|
||||
|
||||
--shadow-color: rgba(0, 0, 0, 0.2);
|
||||
|
||||
--disabled-text-color: var(--text4-color);
|
||||
--disabled-bg-color: var(--background3-color);
|
||||
--disabled-icon-color: var(--text3-color);
|
||||
|
||||
--radio-border-color: var(--border1-color);
|
||||
--radio-bg-color: var(--basic-color);
|
||||
--radio-bg-color-hover: var(--basic-color-hover);
|
||||
--radio-bg-color-pressed: var(--basic-color-pressed);
|
||||
|
||||
--toggle-button-color: var(--background4-color);
|
||||
|
||||
--input-bg-color: var(--background1-color);
|
||||
--input-icon-color: var(--text2-color);
|
||||
--input-border-color: var(--border3-color);
|
||||
--input-border-color-hover: var(--primary-color-hover);
|
||||
--input-outline-color: var(--primary-color);
|
||||
|
||||
--list-bg-color-hover: var(--basic-color-hover);
|
||||
--list-bg-color-pressed: var(--basic-color-pressed);
|
||||
|
||||
--dropdown-bg-color: var(--background1-color);
|
||||
--dropdown-border-color: var(--border1-color);
|
||||
--dropdown-shadow-color: var(--shadow-color);
|
||||
|
||||
--button-text-color: var(--text1-color);
|
||||
--button-border-color: var(--border1-color);
|
||||
--button-bg-color: var(--basic-color);
|
||||
--button-bg-color-hover: var(--basic-color-hover);
|
||||
--button-bg-color-pressed: var(--basic-color-pressed);
|
||||
|
||||
--active-text-color: var(--text5-color);
|
||||
--active-color: var(--primary-color);
|
||||
--active-color-hover: var(--primary-color-hover);
|
||||
--active-color-pressed: var(--primary-color-pressed);
|
||||
|
||||
--chat-bubble-bg-color-sent: var(--accent4-color);
|
||||
--chat-bubble-text-color-sent: var(--basic-color);
|
||||
--chat-bubble-link-color-sent-hover: var(--basic-color-hover);
|
||||
--chat-bubble-link-color-sent-pressed: var(--basic-color-pressed);
|
||||
--chat-bubble-bg-color-received: var(--background3-color);
|
||||
|
||||
--tip-text-color: var(--text5-color);
|
||||
--tip-bg-color: var(--accent4-color);
|
||||
--tip-button-color: var(--accent-4color-pressed);
|
||||
--tip-button-color-hover: var(--accent4-color-hover);
|
||||
--tip-button-color-pressed: var(--accent4-color-pressed);
|
||||
|
||||
--favorite-color: #{theme.$yellow};
|
||||
|
||||
--admin-color: var(--accent1-color);
|
||||
|
||||
--error-color: var(--cancel-color);
|
||||
--error-color-hover: var(--cancel-color-hover);
|
||||
--error-color-pressed: var(--cancel-color-pressed);
|
||||
|
||||
--status-unread-color: #{theme.$orange};
|
||||
--status-recording-color: #{theme.$red};
|
||||
--status-enabled-color: var(--accept-color);
|
||||
--status-disabled-color: var(--cancel-color);
|
||||
|
||||
--overlay-bg-color: rgba(0, 0, 0, 0.5);
|
||||
--overlay-text-color: #{theme.$white};
|
||||
--overlay-border-color: #{theme.$grey};
|
||||
--overlay-outline-color: #{theme.$white};
|
||||
|
||||
--toolbar-icon-color: var(--text5-color);
|
||||
--toolbar-basic-icon-color: var(--text1-color);
|
||||
--toolbar-basic-color: var(--secondary-color);
|
||||
--toolbar-basic-color-hover: var(--secondary-color-hover);
|
||||
--toolbar-basic-color-pressed: var(--secondary-color-pressed);
|
||||
|
||||
--tile-text-color: var(--text4-color);
|
||||
--tile-bg-color: var(--secondary-color);
|
||||
--tile-bg-color-hover: var(--secondary-color-hover);
|
||||
--tile-bg-color-pressed: var(--secondary-color-pressed);
|
||||
--tile-button-text-color: var(--text1-color);
|
||||
--tile-button-bg-color: var(--basic-color);
|
||||
--tile-button-bg-color-hover: var(--basic-color-hover);
|
||||
--tile-button-bg-color-pressed: var(--basic-color-pressed);
|
||||
}
|
||||
|
||||
html {
|
||||
height : 100%;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ export function useTheme(themeId) {
|
|||
${variables.join("\n")}
|
||||
}`;
|
||||
|
||||
document.head.insertBefore(styleTag, document.head.firstChild);
|
||||
document.head.appendChild(styleTag);
|
||||
|
||||
return () => {
|
||||
document.head.removeChild(styleTag);
|
||||
|
|
|
|||
|
|
@ -89,175 +89,164 @@ $spacing-md: 16px;
|
|||
$spacing-lg: 20px;
|
||||
$spacing-xl: 24px;
|
||||
|
||||
// Default Theme
|
||||
$font-family-default: var(--font-family-default, 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
|
||||
$font-family-monospace: var(--font-family-monospace, Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace);
|
||||
// Theme SCSS Variables:
|
||||
// Reference these variables in the Hubs codebase.
|
||||
// The CSS variables they reference are defined in ./global.scss such that they are only included on the page once.
|
||||
$font-family-default: var(--font-family-default);
|
||||
$font-family-monospace: var(--font-family-monospace);
|
||||
|
||||
$text1-color: var(--text1-color, $black);
|
||||
$text1-color-hover: var(--text1-color-hover, $black-hover);
|
||||
$text1-color-pressed: var(--text1-color-pressed, $black-pressed);
|
||||
$text2-color: var(--text2-color, $darkgrey);
|
||||
$text2-color-hover: var(--text2-color-hover, $darkgrey-hover);
|
||||
$text2-color-pressed: var(--text2-color-pressed, $darkgrey-pressed);
|
||||
$text3-color: var(--text3-color, $grey);
|
||||
$text3-color-hover: var(--text3-color-hover, $grey-hover);
|
||||
$text3-color-pressed: var(--text3-color-pressed, $grey-pressed);
|
||||
$text1-color: var(--text1-color);
|
||||
$text1-color-hover: var(--text1-color-hover);
|
||||
$text1-color-pressed: var(--text1-color-pressed);
|
||||
$text2-color: var(--text2-color);
|
||||
$text2-color-hover: var(--text2-color-hover);
|
||||
$text2-color-pressed: var(--text2-color-pressed);
|
||||
$text3-color: var(--text3-color);
|
||||
$text3-color-hover: var(--text3-color-hover);
|
||||
$text3-color-pressed: var(--text3-color-pressed);
|
||||
$text4-color: var(--text4-color);
|
||||
$text4-color-hover: var(--text4-color-hover);
|
||||
$text4-color-pressed: var(--text4-color-pressed);
|
||||
$text5-color: var(--text5-color);
|
||||
$text5-color-hover: var(--text5-color-hover);
|
||||
$text5-color-pressed: var(--text5-color-pressed);
|
||||
|
||||
$link-color: var(--link-color, $blue);
|
||||
$link-color-hover: var(--link-color-hover, $blue-hover);
|
||||
$link-color-pressed: var(--link-color-pressed, $blue-pressed);
|
||||
$link-color: var(--link-color);
|
||||
$link-color-hover: var(--link-color-hover);
|
||||
$link-color-pressed: var(--link-color-pressed);
|
||||
|
||||
$outline-color: var(--outline-color, $black);
|
||||
$accept-color: var(--accept-color);
|
||||
$accept-color-hover: var(--accept-color-hover);
|
||||
$accept-color-pressed: var(--accept-color-pressed);
|
||||
|
||||
$radio-border-color: var(--radio-border-color, $lightgrey);
|
||||
$radio-bg-color: var(--radio-bg-color, $white);
|
||||
$radio-bg-color-hover: var(--radio-bg-color-hover, $white-hover);
|
||||
$radio-bg-color-pressed: var(--radio-bg-color-pressed, $white-pressed);
|
||||
$cancel-color: var(--cancel-color);
|
||||
$cancel-color-hover: var(--cancel-color-hover);
|
||||
$cancel-color-pressed: var(--cancel-color-pressed);
|
||||
|
||||
$toggle-button-color: var(--toggle-button-color, $grey);
|
||||
$accent1-color: var(--accent1-color);
|
||||
$accent1-color-hover: var(--accent1-color-hover);
|
||||
$accent1-color-pressed: var(--accent1-color-pressed);
|
||||
|
||||
$input-bg-color: var(--input-bg-color, $white);
|
||||
$input-icon-color: var(--input-icon-color, $darkgrey);
|
||||
$input-border-color: var(--input-border-color, $darkgrey);
|
||||
$input-border-color-hover: var(--input-border-color-hover, $blue-hover);
|
||||
$input-outline-color: var(--input-outline-color, $blue);
|
||||
$accent2-color: var(--accent2-color);
|
||||
$accent2-color-hover: var(--accent2-color-hover);
|
||||
$accent2-color-pressed: var(--accent2-color-pressed);
|
||||
|
||||
$list-bg-color-hover: var(--list-bg-color-hover, $white-hover);
|
||||
$list-bg-color-pressed: var(--list-bg-color-hover, $white-pressed);
|
||||
$accent3-color: var(--accent3-color);
|
||||
$accent3-color-hover: var(--accent3-color-hover);
|
||||
$accent3-color-pressed: var(--accent3-color-pressed);
|
||||
|
||||
$dropdown-bg-color: var(--dropdown-bg-color, $white);
|
||||
$dropdown-border-color: var(--dropdown-border-color, $lightgrey);
|
||||
$dropdown-shadow-color: var(--dropdown-shadow-color, rgba(0, 0, 0, 0.2));
|
||||
$accent4-color: var(--accent4-color);
|
||||
$accent4-color-hover: var(--accent4-color-hover);
|
||||
$accent4-color-pressed: var(--accent4-color-pressed);
|
||||
|
||||
$disabled-text-color: var(--disabled-text-color, $darkgrey);
|
||||
$disabled-bg-color: var(--disabled-bg-color, $lightgrey);
|
||||
$disabled-icon-color: var(--disabled-icon-color, $grey);
|
||||
$accent5-color: var(--accent5-color);
|
||||
$accent5-color-hover: var(--accent5-color-hover);
|
||||
$accent5-color-pressed: var(--accent5-color-pressed);
|
||||
|
||||
$button-text-color: var(--button-text-color, $black);
|
||||
$button-border-color: var(--button-border-color, $lightgrey);
|
||||
$button-bg-color: var(--button-bg-color, $white);
|
||||
$button-bg-color-hover: var(--button-bg-color-hover, $white-hover);
|
||||
$button-bg-color-pressed: var(--button-bg-color-pressed, $white-pressed);
|
||||
$primary-color: var(--primary-color);
|
||||
$primary-color-hover: var(--primary-color-hover);
|
||||
$primary-color-pressed: var(--primary-color-pressed);
|
||||
|
||||
$active-text-color: var(--active-text-color, $white);
|
||||
$active-color: var(--active-color, $blue);
|
||||
$active-color-hover: var(--active-color-hover, $blue-hover);
|
||||
$active-color-pressed: var(--active-color-pressed, $blue-pressed);
|
||||
$secondary-color: var(--secondary-color);
|
||||
$secondary-color-hover: var(--secondary-color-hover);
|
||||
$secondary-color-pressed: var(--secondary-color-pressed);
|
||||
|
||||
$chat-bubble-bg-color-sent: var(--chat-bubble-bg-color-sent, $blue);
|
||||
$chat-bubble-text-color-sent: var(--chat-bubble-text-color-sent, $white);
|
||||
$chat-bubble-link-color-sent-hover: var(--chat-bubble-link-color-sent-hover, $white-hover);
|
||||
$chat-bubble-link-color-sent-pressed: var(--chat-bubble-link-color-sent-pressed, $white-pressed);
|
||||
$chat-bubble-bg-color-received: var(--chat-bubble-bg-color-received, $lightgrey);
|
||||
$basic-color: var(--basic-color);
|
||||
$basic-color-hover: var(--basic-color-hover);
|
||||
$basic-color-pressed: var(--basic-color-pressed);
|
||||
|
||||
$tip-text-color: var(--tip-text-color, $white);
|
||||
$tip-bg-color: var(--tip-bg-color, $blue);
|
||||
$tip-button-color: var(--tip-bg-color-pressed, $blue-pressed);
|
||||
$tip-button-color-hover: var(--tip-button-bg-color-hover, $blue-hover);
|
||||
$tip-button-color-pressed: var(--tip-button-bg-color-pressed, $blue-pressed);
|
||||
$background1-color: var(--background1-color);
|
||||
$background2-color: var(--background2-color);
|
||||
$background3-color: var(--background3-color);
|
||||
$background4-color: var(--background4-color);
|
||||
|
||||
$favorite-color: var(--favorite-color, $yellow);
|
||||
$loading-screen-background: var(--loading-screen-background);
|
||||
|
||||
$admin-color: var(--favorite-color, $red);
|
||||
$border1-color: var(--border1-color);
|
||||
$border2-color: var(--border2-color);
|
||||
$border3-color: var(--border3-color);
|
||||
|
||||
$error-color: var(--error-color, $red);
|
||||
$error-color-hover: var(--error-color-hover, $red-hover);
|
||||
$error-color-pressed: var(--error-color-pressed, $red-pressed);
|
||||
$outline-color: var(--outline-color);
|
||||
|
||||
$status-unread-color: var(--status-unread-color, $orange);
|
||||
$status-recording-color: var(--status-recording-color, $red);
|
||||
$status-enabled-color: var(--status-enabled-color, $green);
|
||||
$status-disabled-color: var(--status-disabled-color, $red);
|
||||
$shadow-color: var(--shadow-color);
|
||||
|
||||
$overlay-bg-color: rgba(0, 0, 0, 0.5);
|
||||
$overlay-text-color: var(--overlay-text-color, $white);
|
||||
$overlay-border-color: var(--overlay-border-color, $grey);
|
||||
$overtlay-outline-color: var(--overlay-outline-color, $white);
|
||||
$disabled-text-color: var(--disabled-text-color);
|
||||
$disabled-bg-color: var(--disabled-bg-color);
|
||||
$disabled-icon-color: var(--disabled-icon-color);
|
||||
|
||||
$background1-color: var(--background1-color, $white);
|
||||
$background2-color: var(--background2-color, $recessed-bg);
|
||||
$background3-color: var(--background2-color, $lightgrey);
|
||||
$radio-border-color: var(--radio-border-color);
|
||||
$radio-bg-color: var(--radio-bg-color);
|
||||
$radio-bg-color-hover: var(--radio-bg-color-hover);
|
||||
$radio-bg-color-pressed: var(--radio-bg-color-pressed);
|
||||
|
||||
$loading-screen-background: var(--loading-screen-background, radial-gradient(50% 50% at 50% 50%, #FFFFFF 0%, #EEEEEE 100%));
|
||||
$toggle-button-color: var(--toggle-button-color);
|
||||
|
||||
$border1-color: var(--border1-color, $lightgrey);
|
||||
$border2-color: var(--border2-color, $grey);
|
||||
$border3-color: var(--border3-color, $darkgrey);
|
||||
$input-bg-color: var(--input-bg-color);
|
||||
$input-icon-color: var(--input-icon-color);
|
||||
$input-border-color: var(--input-border-color);
|
||||
$input-border-color-hover: var(--input-border-color-hover);
|
||||
$input-outline-color: var(--input-outline-color);
|
||||
|
||||
$toolbar-icon-color: var(--toolbar-icon-color, $white);
|
||||
$toolbar-basic-icon-color: var(--toolbar-basic-icon-color, $black);
|
||||
$toolbar-basic-bg-color: var(--toolbar-basic-border-color, $lightgrey);
|
||||
$toolbar-basic-bg-color-hover: var(--toolbar-basic-bg-color-hover, $lightgrey-hover);
|
||||
$toolbar-basic-bg-color-pressed: var(--toolbar-basic-bg-color-pressed, $lightgrey-pressed);
|
||||
$list-bg-color-hover: var(--list-bg-color-hover);
|
||||
$list-bg-color-pressed: var(--list-bg-color-pressed);
|
||||
|
||||
$basic-text-color: var(--basic-text-color, $darkgrey);
|
||||
$basic-text-color-hover: var(--basic-text-color-hover, $darkgrey);
|
||||
$basic-text-color-pressed: var(--basic-text-color-pressed, $darkgrey);
|
||||
$basic-bg-color: var(--basic-bg-color, $white);
|
||||
$basic-bg-color-hover: var(--basic-bg-color-hover, $white-hover);
|
||||
$basic-bg-color-pressed: var(--basic-bg-color-pressed, $white-pressed);
|
||||
$dropdown-bg-color: var(--dropdown-bg-color);
|
||||
$dropdown-border-color: var(--dropdown-border-color);
|
||||
$dropdown-shadow-color: var(--dropdown-shadow-color);
|
||||
|
||||
$tile-text-color: var(--tile-text-color, $darkgrey);
|
||||
$tile-bg-color: var(--tile-bg-color, $lightgrey);
|
||||
$tile-bg-color-hover: var(--tile-bg-color-hover, $lightgrey-hover);
|
||||
$tile-bg-color-pressed: var(--tile-bg-color-pressed, $lightgrey-pressed);
|
||||
$tile-button-text-color: var(--tile-button-text-color, $black);
|
||||
$tile-button-bg-color: var(--tile-button-bg-color, $white);
|
||||
$tile-button-bg-color-hover: var(--tile-button-bg-color-hover, $white-hover);
|
||||
$tile-button-bg-color-pressed: var(--tile-button-bg-color-pressed, $white-pressed);
|
||||
$button-text-color: var(--button-text-color);
|
||||
$button-border-color: var(--button-border-color);
|
||||
$button-bg-color: var(--button-bg-color);
|
||||
$button-bg-color-hover: var(--button-bg-color-hover);
|
||||
$button-bg-color-pressed: var(--button-bg-color-pressed);
|
||||
|
||||
$primary-text-color: var(--primary-text-color, $white);
|
||||
$primary-text-color-hover: var(--primary-text-color-hover, $white);
|
||||
$primary-text-color-pressed: var(--primary-text-color-pressed, $white);
|
||||
$primary-bg-color: var(--primary-bg-color, $blue);
|
||||
$primary-bg-color-hover: var(--primary-bg-color-hover, $blue-hover);
|
||||
$primary-bg-color-pressed: var(--primary-bg-color-pressed, $blue-pressed);
|
||||
$active-text-color: var(--active-text-color);
|
||||
$active-color: var(--active-color);
|
||||
$active-color-hover: var(--active-color-hover);
|
||||
$active-color-pressed: var(--active-color-pressed);
|
||||
|
||||
$accept-text-color: var(--accept-text-color, $white);
|
||||
$accept-text-color-hover: var(--accept-text-color-hover, $white);
|
||||
$accept-text-color-pressed: var(--accept-text-color-pressed, $white);
|
||||
$accept-bg-color: var(--accept-bg-color, $green);
|
||||
$accept-bg-color-hover: var(--accept-bg-color-hover, $green-hover);
|
||||
$accept-bg-color-pressed: var(--accept-bg-color-pressed, $green-pressed);
|
||||
$chat-bubble-bg-color-sent: var(--chat-bubble-bg-color-sent);
|
||||
$chat-bubble-text-color-sent: var(--chat-bubble-text-color-sent);
|
||||
$chat-bubble-link-color-sent-hover: var(--chat-bubble-link-color-sent-hover);
|
||||
$chat-bubble-link-color-sent-pressed: var(--chat-bubble-link-color-sent-pressed);
|
||||
$chat-bubble-bg-color-received: var(--chat-bubble-bg-color-received);
|
||||
|
||||
$cancel-text-color: var(--cancel-text-color, $white);
|
||||
$cancel-text-color-hover: var(--cancel-text-color-hover, $white);
|
||||
$cancel-text-color-pressed: var(--cancel-text-color-pressed, $white);
|
||||
$cancel-bg-color: var(--cancel-bg-color, $red);
|
||||
$cancel-bg-color-hover: var(--cancel-bg-color-hover, $red-hover);
|
||||
$cancel-bg-color-pressed: var(--cancel-bg-color-pressed, $red-pressed);
|
||||
$tip-text-color: var(--tip-text-color);
|
||||
$tip-bg-color: var(--tip-bg-color);
|
||||
$tip-button-color: var(--tip-button-color);
|
||||
$tip-button-color-hover: var(--tip-button-color-hover);
|
||||
$tip-button-color-pressed: var(--tip-button-color-pressed);
|
||||
|
||||
$accent1-text-color: var(--accent1-text-color, $white);
|
||||
$accent1-text-color-hover: var(--accent1-text-color-hover, $white);
|
||||
$accent1-text-color-pressed: var(--accent1-text-color-pressed, $white);
|
||||
$accent1-bg-color: var(--accent1-bg-color, $red);
|
||||
$accent1-bg-color-hover: var(--accent1-bg-color-hover, $red-hover);
|
||||
$accent1-bg-color-pressed: var(--accent1-bg-color-pressed, $red-pressed);
|
||||
$favorite-color: var(--favorite-color);
|
||||
|
||||
$accent2-text-color: var(--accent2-text-color, $white);
|
||||
$accent2-text-color-hover: var(--accent2-text-color-hover, $white);
|
||||
$accent2-text-color-pressed: var(--accent2-text-color-pressed, $white);
|
||||
$accent2-bg-color: var(--accent2-bg-color, $orange);
|
||||
$accent2-bg-color-hover: var(--accent2-bg-color-hover, $orange-hover);
|
||||
$accent2-bg-color-pressed: var(--accent2-bg-color-pressed, $orange-pressed);
|
||||
$admin-color: var(--admin-color);
|
||||
|
||||
$accent3-text-color: var(--accent3-text-color, $white);
|
||||
$accent3-text-color-hover: var(--accent3-text-color-hover, $white);
|
||||
$accent3-text-color-pressed: var(--accent3-text-color-pressed, $white);
|
||||
$accent3-bg-color: var(--accent3-bg-color, $green);
|
||||
$accent3-bg-color-hover: var(--accent3-bg-color-hover, $green-hover);
|
||||
$accent3-bg-color-pressed: var(--accent3-bg-color-pressed, $green-pressed);
|
||||
$error-color: var(--error-color);
|
||||
$error-color-hover: var(--error-color-hover);
|
||||
$error-color-pressed: var(--error-color-pressed);
|
||||
|
||||
$accent4-text-color: var(--accent4-text-color, $white);
|
||||
$accent4-text-color-hover: var(--accent4-text-color-hover, $white);
|
||||
$accent4-text-color-pressed: var(--accent4-text-color-pressed, $white);
|
||||
$accent4-bg-color: var(--accent4-bg-color, $blue);
|
||||
$accent4-bg-color-hover: var(--accent4-bg-color-hover, $blue-hover);
|
||||
$accent4-bg-color-pressed: var(--accent4-bg-color-pressed, $blue-pressed);
|
||||
$status-unread-color: var(--status-unread-color);
|
||||
$status-recording-color: var(--status-recording-color);
|
||||
$status-enabled-color: var(--status-enabled-color);
|
||||
$status-disabled-color: var(--status-disabled-color);
|
||||
|
||||
$overlay-bg-color: var(--overlay-bg-color);
|
||||
$overlay-text-color: var(--overlay-text-color);
|
||||
$overlay-border-color: var(--overlay-border-color);
|
||||
$overlay-outline-color: var(--overlay-outline-color);
|
||||
|
||||
$toolbar-icon-color: var(--toolbar-icon-color);
|
||||
$toolbar-basic-icon-color: var(--toolbar-basic-icon-color);
|
||||
$toolbar-basic-color: var(--toolbar-basic-color);
|
||||
$toolbar-basic-color-hover: var(--toolbar-basic-color-hover);
|
||||
$toolbar-basic-color-pressed: var(--toolbar-basic-color-pressed);
|
||||
|
||||
$tile-text-color: var(--tile-text-color);
|
||||
$tile-bg-color: var(--tile-bg-color);
|
||||
$tile-bg-color-hover: var(--tile-bg-color-hover);
|
||||
$tile-bg-color-pressed: var(--tile-bg-color-pressed);
|
||||
$tile-button-text-color: var(--tile-button-text-color);
|
||||
$tile-button-bg-color: var(--tile-button-bg-color);
|
||||
$tile-button-bg-color-hover: var(--tile-button-bg-color-hover);
|
||||
$tile-button-bg-color-pressed: var(--tile-button-bg-color-pressed);
|
||||
|
||||
$accent5-text-color: var(--accent5-text-color, $white);
|
||||
$accent5-text-color-hover: var(--accent5-text-color-hover, $white);
|
||||
$accent5-text-color-pressed: var(--accent5-text-color-pressed, $white);
|
||||
$accent5-bg-color: var(--accent5-bg-color, $purple);
|
||||
$accent5-bg-color-hover: var(--accent5-bg-color-hover, $purple-hover);
|
||||
$accent5-bg-color-pressed: var(--accent5-bg-color-pressed, $purple-pressed);
|
||||
|
|
|
|||
|
|
@ -39,7 +39,6 @@ import maskEmail from "../utils/mask-email";
|
|||
import qsTruthy from "../utils/qs_truthy";
|
||||
import { LoadingScreenContainer } from "./room/LoadingScreenContainer";
|
||||
|
||||
import "./styles/global.scss";
|
||||
import { RoomLayoutContainer } from "./room/RoomLayoutContainer";
|
||||
import roomLayoutStyles from "./layout/RoomLayout.scss";
|
||||
import { useAccessibleOutlineStyle } from "./input/useAccessibleOutlineStyle";
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import "./utils/configs";
|
|||
|
||||
console.log(`Hubs version: ${process.env.BUILD_VERSION || "?"}`);
|
||||
|
||||
import "./react-components/styles/global.scss";
|
||||
import "./assets/stylesheets/scene.scss";
|
||||
|
||||
import "aframe";
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import "./utils/theme";
|
|||
import { AuthContextProvider } from "./react-components/auth/AuthContext";
|
||||
import { SignInModalContainer } from "./react-components/auth/SignInModalContainer";
|
||||
import { PageContainer } from "./react-components/layout/PageContainer";
|
||||
import "./react-components/styles/global.scss";
|
||||
import "./assets/stylesheets/globals.scss";
|
||||
import { Center } from "./react-components/layout/Center";
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import copy from "copy-to-clipboard";
|
|||
import { detectOS } from "detect-browser";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import { WrappedIntlProvider } from "./react-components/wrapped-intl-provider";
|
||||
import "./react-components/styles/global.scss";
|
||||
import styles from "./assets/stylesheets/support.scss";
|
||||
import configs from "./utils/configs";
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import Store from "./storage/store";
|
|||
import "./utils/theme";
|
||||
import { AuthContextProvider } from "./react-components/auth/AuthContext";
|
||||
import { VerifyModalContainer } from "./react-components/auth/VerifyModalContainer";
|
||||
import "./react-components/styles/global.scss";
|
||||
import "./assets/stylesheets/globals.scss";
|
||||
import { PageContainer } from "./react-components/layout/PageContainer";
|
||||
import { Center } from "./react-components/layout/Center";
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ const store = new Store();
|
|||
window.APP = { store };
|
||||
|
||||
import registerTelemetry from "./telemetry";
|
||||
import "./react-components/styles/global.scss";
|
||||
import "./assets/stylesheets/whats-new.scss";
|
||||
import { PageContainer } from "./react-components/layout/PageContainer";
|
||||
import { Spinner } from "./react-components/misc/Spinner";
|
||||
|
|
|
|||
287
themes.json
287
themes.json
|
|
@ -3,282 +3,35 @@
|
|||
"id": "hubs-default",
|
||||
"default": true,
|
||||
"name": "Hubs Default",
|
||||
"variables": {
|
||||
"font-family-default": "'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
|
||||
"font-family-monospace": "Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace",
|
||||
|
||||
"text1-color": "#000000",
|
||||
"text1-color-hover": "#404040",
|
||||
"text1-color-pressed": "#7A7A7A",
|
||||
"text2-color": "#868686",
|
||||
"text2-color-hover": "#949494",
|
||||
"text2-color-pressed": "#7A7A7A",
|
||||
"text3-color": "#BBBBBB",
|
||||
"text3-color-hover": "#C7C7C7",
|
||||
"text3-color-pressed": "#ADADAD",
|
||||
|
||||
"link-color": "#12A4ED",
|
||||
"link-color-hover": "#2AADEF",
|
||||
"link-color-pressed": "#1094D5",
|
||||
|
||||
"outline-color": "#000000",
|
||||
|
||||
"radio-border-color": "#E7E7E7",
|
||||
"radio-bg-color": "#FFFFFF",
|
||||
"radio-bg-color-hover": "#E7E7E7",
|
||||
"radio-bg-color-pressed": "#DBDBDB",
|
||||
|
||||
"toggle-button-color": "#BBBBBB",
|
||||
|
||||
"input-bg-color": "#FFFFFF",
|
||||
"input-border-color": "#868686",
|
||||
"input-border-color-hover": "#2AADEF",
|
||||
"input-outline-color": "#12A4ED",
|
||||
|
||||
"list-bg-color-hover": "#E7E7E7",
|
||||
"list-bg-color-pressed": "#DBDBDB",
|
||||
|
||||
"dropdown-bg-color": "#FFFFFF",
|
||||
"dropdown-border-color": "#E7E7E7",
|
||||
"dropdown-shadow-color": "rgba(0, 0, 0, 0.2)",
|
||||
|
||||
"disabled-text-color": "#868686",
|
||||
"disabled-bg-color": "#E7E7E7",
|
||||
"disabled-icon-color": "#BBBBBB",
|
||||
|
||||
"active-color": "#12A4ED",
|
||||
"active-color-hover": "#2AADEF",
|
||||
"active-color-pressed": "#1094D5",
|
||||
|
||||
"error-color": "#F5325C",
|
||||
"error-color-hover": "#F64B70",
|
||||
"error-color-pressed": "#F41A49",
|
||||
|
||||
"status-unread-color": "#FF8500",
|
||||
"status-recording-color": "#F5325C",
|
||||
"status-enabled-color": "#7ED320",
|
||||
"status-disabled-color": "#F5325C",
|
||||
|
||||
"overlay-text-color": "#FFFFFF",
|
||||
"overlay-text-color-hover": "#2AADEF",
|
||||
"overlay-text-color-pressed": "#1094D5",
|
||||
|
||||
"background1-color": "#FFFFFF",
|
||||
"background2-color": "#f9f9f9",
|
||||
"background3-color": "#E7E7E7",
|
||||
"loading-screen-background": "radial-gradient(50% 50% at 50% 50%, #FFFFFF 0%, #EEEEEE 100%)",
|
||||
|
||||
"border1-color": "#E7E7E7",
|
||||
"border2-color": "#868686",
|
||||
|
||||
"toolbar-icon-color": "#FFFFFF",
|
||||
"basic-toolbar-icon-color": "#000000",
|
||||
"basic-toolbar-bg-color-hover": "#F5F5F5",
|
||||
"basic-toolbar-bg-color-pressed": "#E7E7E7",
|
||||
|
||||
"basic-text-color": "#868686",
|
||||
"basic-text-color-hover": "#868686",
|
||||
"basic-text-color-pressed": "#868686",
|
||||
"basic-bg-color": "#FFFFFF",
|
||||
"basic-bg-color-hover": "#E7E7E7",
|
||||
"basic-bg-color-pressed": "#DBDBDB",
|
||||
|
||||
"primary-text-color": "#FFFFFF",
|
||||
"primary-text-color-hover": "#FFFFFF",
|
||||
"primary-text-color-pressed": "#FFFFFF",
|
||||
"primary-bg-color": "#12A4ED",
|
||||
"primary-bg-color-hover": "#2AADEF",
|
||||
"primary-bg-color-pressed": "#1094D5",
|
||||
|
||||
"accept-text-color": "#FFFFFF",
|
||||
"accept-text-color-hover": "#FFFFFF",
|
||||
"accept-text-color-pressed": "#FFFFFF",
|
||||
"accept-bg-color": "#7ED320",
|
||||
"accept-bg-color-hover": "#8CDF2F",
|
||||
"accept-bg-color-pressed": "#72BE1D",
|
||||
|
||||
"cancel-text-color": "#FFFFFF",
|
||||
"cancel-text-color-hover": "#FFFFFF",
|
||||
"cancel-text-color-pressed": "#FFFFFF",
|
||||
"cancel-bg-color": "#F5325C",
|
||||
"cancel-bg-color-hover": "#F64B70",
|
||||
"cancel-bg-color-pressed": "#F41A49",
|
||||
|
||||
"accent1-text-color": "#FFFFFF",
|
||||
"accent1-text-color-hover": "#FFFFFF",
|
||||
"accent1-text-color-pressed": "#FFFFFF",
|
||||
"accent1-bg-color": "#F5325C",
|
||||
"accent1-bg-color-hover": "#F64B70",
|
||||
"accent1-bg-color-pressed": "#F41A49",
|
||||
|
||||
"accent2-text-color": "#FFFFFF",
|
||||
"accent2-text-color-hover": "#FFFFFF",
|
||||
"accent2-text-color-pressed": "#FFFFFF",
|
||||
"accent2-bg-color": "#FF8500",
|
||||
"accent2-bg-color-hover": "#FF911A",
|
||||
"accent2-bg-color-pressed": "#E67800",
|
||||
|
||||
"accent3-text-color": "#FFFFFF",
|
||||
"accent3-text-color-hover": "#FFFFFF",
|
||||
"accent3-text-color-pressed": "#FFFFFF",
|
||||
"accent3-bg-color": "#7ED320",
|
||||
"accent3-bg-color-hover": "#8CDF2F",
|
||||
"accent3-bg-color-pressed": "#72BE1D",
|
||||
|
||||
"accent4-text-color": "#FFFFFF",
|
||||
"accent4-text-color-hover": "#FFFFFF",
|
||||
"accent4-text-color-pressed": "#FFFFFF",
|
||||
"accent4-bg-color": "#12A4ED",
|
||||
"accent4-bg-color-hover": "#2AADEF",
|
||||
"accent4-bg-color-pressed": "#1094D5",
|
||||
|
||||
"accent5-text-color": "#FFFFFF",
|
||||
"accent5-text-color-hover": "#FFFFFF",
|
||||
"accent5-text-color-pressed": "#FFFFFF",
|
||||
"accent5-bg-color": "#7854F6",
|
||||
"accent5-bg-color-hover": "#8C6EF7",
|
||||
"accent5-bg-color-pressed": "#663DF5"
|
||||
}
|
||||
"variables": {}
|
||||
},
|
||||
{
|
||||
"id": "hubs-dark-mode",
|
||||
"darkModeDefault": true,
|
||||
"name": "Hubs Dark Mode",
|
||||
"variables": {
|
||||
"font-family-default": "'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
|
||||
"font-family-monospace": "Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace",
|
||||
|
||||
"text1-color": "#000000",
|
||||
"text1-color-hover": "#404040",
|
||||
"text1-color-pressed": "#7A7A7A",
|
||||
"text2-color": "#868686",
|
||||
"text2-color-hover": "#949494",
|
||||
"text2-color-pressed": "#7A7A7A",
|
||||
"text1-color": "#ffffff",
|
||||
"text1-color-hover": "#E7E7E7",
|
||||
"text1-color-pressed": "#DBDBDB",
|
||||
"text2-color": "#E7E7E7",
|
||||
"text2-color-hover": "#F5F5F5",
|
||||
"text2-color-pressed": "#DBDBDB",
|
||||
"text3-color": "#BBBBBB",
|
||||
"text3-color-hover": "#C7C7C7",
|
||||
"text3-color-pressed": "#ADADAD",
|
||||
|
||||
"link-color": "#12A4ED",
|
||||
"link-color-hover": "#2AADEF",
|
||||
"link-color-pressed": "#1094D5",
|
||||
|
||||
"outline-color": "#000000",
|
||||
|
||||
"radio-border-color": "#E7E7E7",
|
||||
"radio-bg-color": "#FFFFFF",
|
||||
"radio-bg-color-hover": "#E7E7E7",
|
||||
"radio-bg-color-pressed": "#DBDBDB",
|
||||
|
||||
"toggle-button-color": "#BBBBBB",
|
||||
|
||||
"input-bg-color": "#FFFFFF",
|
||||
"input-border-color": "#868686",
|
||||
"input-border-color-hover": "#2AADEF",
|
||||
"input-outline-color": "#12A4ED",
|
||||
|
||||
"list-bg-color-hover": "#E7E7E7",
|
||||
"list-bg-color-pressed": "#DBDBDB",
|
||||
|
||||
"dropdown-bg-color": "#FFFFFF",
|
||||
"dropdown-border-color": "#E7E7E7",
|
||||
"dropdown-shadow-color": "rgba(0, 0, 0, 0.2)",
|
||||
|
||||
"disabled-text-color": "#868686",
|
||||
"disabled-bg-color": "#E7E7E7",
|
||||
"disabled-icon-color": "#BBBBBB",
|
||||
|
||||
"active-color": "#12A4ED",
|
||||
"active-color-hover": "#2AADEF",
|
||||
"active-color-pressed": "#1094D5",
|
||||
|
||||
"error-color": "#F5325C",
|
||||
"error-color-hover": "#F64B70",
|
||||
"error-color-pressed": "#F41A49",
|
||||
|
||||
"status-unread-color": "#FF8500",
|
||||
"status-recording-color": "#F5325C",
|
||||
"status-enabled-color": "#7ED320",
|
||||
"status-disabled-color": "#F5325C",
|
||||
|
||||
"overlay-text-color": "#FFFFFF",
|
||||
"overlay-text-color-hover": "#2AADEF",
|
||||
"overlay-text-color-pressed": "#1094D5",
|
||||
|
||||
"background1-color": "#FFFFFF",
|
||||
"background2-color": "#f9f9f9",
|
||||
"background3-color": "#E7E7E7",
|
||||
"loading-screen-background": "radial-gradient(50% 50% at 50% 50%, #FFFFFF 0%, #EEEEEE 100%)",
|
||||
|
||||
"border1-color": "#E7E7E7",
|
||||
"border2-color": "#868686",
|
||||
|
||||
"toolbar-icon-color": "#FFFFFF",
|
||||
"basic-toolbar-icon-color": "#000000",
|
||||
"basic-toolbar-bg-color-hover": "#F5F5F5",
|
||||
"basic-toolbar-bg-color-pressed": "#E7E7E7",
|
||||
|
||||
"basic-text-color": "#868686",
|
||||
"basic-text-color-hover": "#868686",
|
||||
"basic-text-color-pressed": "#868686",
|
||||
"basic-bg-color": "transparent",
|
||||
"basic-bg-color-hover": "#E7E7E7",
|
||||
"basic-bg-color-pressed": "#DBDBDB",
|
||||
|
||||
"primary-text-color": "#FFFFFF",
|
||||
"primary-text-color-hover": "#FFFFFF",
|
||||
"primary-text-color-pressed": "#FFFFFF",
|
||||
"primary-bg-color": "#12A4ED",
|
||||
"primary-bg-color-hover": "#2AADEF",
|
||||
"primary-bg-color-pressed": "#1094D5",
|
||||
|
||||
"accept-text-color": "#FFFFFF",
|
||||
"accept-text-color-hover": "#FFFFFF",
|
||||
"accept-text-color-pressed": "#FFFFFF",
|
||||
"accept-bg-color": "#7ED320",
|
||||
"accept-bg-color-hover": "#8CDF2F",
|
||||
"accept-bg-color-pressed": "#72BE1D",
|
||||
|
||||
"cancel-text-color": "#FFFFFF",
|
||||
"cancel-text-color-hover": "#FFFFFF",
|
||||
"cancel-text-color-pressed": "#FFFFFF",
|
||||
"cancel-bg-color": "#F5325C",
|
||||
"cancel-bg-color-hover": "#F64B70",
|
||||
"cancel-bg-color-pressed": "#F41A49",
|
||||
|
||||
"accent1-text-color": "#FFFFFF",
|
||||
"accent1-text-color-hover": "#FFFFFF",
|
||||
"accent1-text-color-pressed": "#FFFFFF",
|
||||
"accent1-bg-color": "#F5325C",
|
||||
"accent1-bg-color-hover": "#F64B70",
|
||||
"accent1-bg-color-pressed": "#F41A49",
|
||||
|
||||
"accent2-text-color": "#FFFFFF",
|
||||
"accent2-text-color-hover": "#FFFFFF",
|
||||
"accent2-text-color-pressed": "#FFFFFF",
|
||||
"accent2-bg-color": "#FF8500",
|
||||
"accent2-bg-color-hover": "#FF911A",
|
||||
"accent2-bg-color-pressed": "#E67800",
|
||||
|
||||
"accent3-text-color": "#FFFFFF",
|
||||
"accent3-text-color-hover": "#FFFFFF",
|
||||
"accent3-text-color-pressed": "#FFFFFF",
|
||||
"accent3-bg-color": "#7ED320",
|
||||
"accent3-bg-color-hover": "#8CDF2F",
|
||||
"accent3-bg-color-pressed": "#72BE1D",
|
||||
|
||||
"accent4-text-color": "#FFFFFF",
|
||||
"accent4-text-color-hover": "#FFFFFF",
|
||||
"accent4-text-color-pressed": "#FFFFFF",
|
||||
"accent4-bg-color": "#12A4ED",
|
||||
"accent4-bg-color-hover": "#2AADEF",
|
||||
"accent4-bg-color-pressed": "#1094D5",
|
||||
|
||||
"accent5-text-color": "#FFFFFF",
|
||||
"accent5-text-color-hover": "#FFFFFF",
|
||||
"accent5-text-color-pressed": "#FFFFFF",
|
||||
"accent5-bg-color": "#7854F6",
|
||||
"accent5-bg-color-hover": "#8C6EF7",
|
||||
"accent5-bg-color-pressed": "#663DF5"
|
||||
"text4-color": "#E7E7E7",
|
||||
"basic-color": "#3A4048",
|
||||
"basic-color-hover": "#4B5562",
|
||||
"basic-color-pressed": "#636F80",
|
||||
"background1-color": "#15171B",
|
||||
"background2-color": "#282C31",
|
||||
"background3-color": "#3A4048",
|
||||
"background4-color": "#5D646C",
|
||||
"loading-screen-background": "#15171B",
|
||||
"border1-color": "#282C31",
|
||||
"border2-color": "#3A4048",
|
||||
"border3-color": "#5D646C",
|
||||
"outline-color": "#ffffff"
|
||||
}
|
||||
}
|
||||
]
|
||||
Загрузка…
Ссылка в новой задаче