aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorlonkaars <l.leblansch@gmail.com>2021-04-17 10:30:24 +0200
committerlonkaars <l.leblansch@gmail.com>2021-04-17 10:30:24 +0200
commitb33439e75d4b22a0c68b5cb56851b518a5ea7db7 (patch)
tree5a46a57cb1457d8e945df9c81349081ad2e40610
parentc603cb79e7ba7fdbb101a506e36f6d8d70b3a8f4 (diff)
started moving to css files
Diffstat
-rw-r--r--components/footer.tsx4
-rw-r--r--components/logo.tsx25
-rw-r--r--components/navbar.tsx42
-rw-r--r--components/ui.tsx20
-rw-r--r--package.json3
-rw-r--r--pages/_app.tsx3
-rw-r--r--pages/index.tsx11
-rw-r--r--styles/global.css92
-rw-r--r--styles/index.module.css7
-rw-r--r--styles/navbar.css11
-rw-r--r--styles/ui.css9
-rw-r--r--styles/utility.css27
-rw-r--r--tsconfig.json7
-rw-r--r--yarn.lock233
14 files changed, 390 insertions, 104 deletions
diff --git a/components/footer.tsx b/components/footer.tsx
index 36ebef3..f39946c 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -1,5 +1,5 @@
import { ReactNode } from 'react';
-import { LogoDark } from '../components/logo';
+import Logo from '../components/logo';
import ExitToAppOutlinedIcon from '@material-ui/icons/ExitToAppOutlined';
import ExtensionIcon from '@material-ui/icons/Extension';
@@ -25,7 +25,7 @@ function PageLink(props: {
export function Footer() {
return <div className='footer'>
<div className='header'>
- <LogoDark />
+ <Logo />
<h2>4 op een rij</h2>
</div>
<div className='content'>
diff --git a/components/logo.tsx b/components/logo.tsx
index e43aa88..9faf43f 100644
--- a/components/logo.tsx
+++ b/components/logo.tsx
@@ -1,27 +1,14 @@
-export function LogoDark() {
+export default function Logo() {
return (
<div className='noclick'>
<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
- <rect width='24' height='24' fill='var(--background)' />
- <circle cx='6.5' cy='6.5' r='4.5' fill='var(--disk-b)' />
- <circle cx='6.5' cy='17.5' r='4.5' fill='var(--disk-a)' />
- <circle cx='17.5' cy='17.5' r='4.5' fill='var(--disk-b)' />
- <circle cx='17.5' cy='6.5' r='3.5' stroke='var(--text)' strokeWidth='2' />
+ <rect width='24' height='24' fill='none' />
+ <circle className='green' cx='6.5' cy='6.5' r='4.5' fill='var(--confirm)' />
+ <circle className='red' cx='6.5' cy='17.5' r='4.5' fill='var(--error)' />
+ <circle className='green' cx='17.5' cy='17.5' r='4.5' fill='var(--confirm)' />
+ <circle className='circle' cx='17.5' cy='6.5' r='3.5' stroke='var(--foreground)' strokeWidth='2' />
</svg>
</div>
);
}
-export function LogoLight() {
- return (
- <div className='noclick'>
- <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
- <rect width='24' height='24' fill='var(--page-background)' />
- <circle cx='6.5' cy='6.5' r='4.5' fill='var(--disk-b)' />
- <circle cx='6.5' cy='17.5' r='4.5' fill='var(--disk-a)' />
- <circle cx='17.5' cy='17.5' r='4.5' fill='var(--disk-b)' />
- <circle cx='17.5' cy='6.5' r='3.5' stroke='var(--background)' strokeWidth='2' />
- </svg>
- </div>
- );
-}
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 70de574..932669d 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,8 +1,8 @@
import axios from 'axios';
-import { CSSProperties, useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
import { userInfo } from '../api/api';
-import { LogoDark } from '../components/logo';
+import Logo from '../components/logo';
import { AccountAvatar } from './account';
import { NotificationsArea } from './notificationsArea';
import { SocketContext } from './socketContext';
@@ -15,12 +15,6 @@ import SearchIcon from '@material-ui/icons/Search';
import SettingsIcon from '@material-ui/icons/Settings';
import VideogameAssetIcon from '@material-ui/icons/VideogameAsset';
-var NavBarItemStyle: CSSProperties = {
- margin: 12,
- marginBottom: 16,
- display: 'block',
-};
-
export function NavBar() {
var [loggedIn, setLoggedIn] = useState(false);
var [gotData, setGotData] = useState(false);
@@ -61,14 +55,13 @@ export function NavBar() {
}, []);
return <div
- className='navbar'
+ className="navbar bg-800"
style={{
width: 48,
height: '100%',
lineHeight: 0,
- backgroundColor: 'var(--background)',
display: 'inline-block',
position: 'fixed',
@@ -80,35 +73,28 @@ export function NavBar() {
zIndex: 2,
}}
>
- <div style={NavBarItemStyle}>
- <LogoDark />
+ <div className="item">
+ <Logo />
</div>
- <a href='/' style={NavBarItemStyle}>
+ <a href='/' className="item">
<Home />
</a>
- <a href='/game' style={NavBarItemStyle}>
+ <a href='/game' className="item">
<VideogameAssetIcon />
</a>
- {false && <a href='/' style={NavBarItemStyle}>
+ {false && <a href='/' className="item">
<ExtensionIcon />
</a>}
- <a href='/search' style={NavBarItemStyle}>
+ <a href='/search' className="item">
<SearchIcon />
</a>
- <div
- style={{
- position: 'absolute',
- bottom: -4,
- left: 0,
- backgroundColor: 'var(--background)',
- }}
- >
+ <div className="bg-800 bottomArea">
{loggedIn && <a
+ className="item"
style={{
overflow: 'visible',
- position: 'relative',
- ...NavBarItemStyle,
+ position: 'relative'
}}
>
<div
@@ -134,12 +120,12 @@ export function NavBar() {
rerender={getNotifications}
/>
</a>}
- <a href={loggedIn ? '/user' : '/login'} style={NavBarItemStyle}>
+ <a href={loggedIn ? '/user' : '/login'} className="item">
{loggedIn
? <AccountAvatar size={24} round />
: <PersonIcon />}
</a>
- {loggedIn && <a href='/settings' style={NavBarItemStyle}>
+ {loggedIn && <a href='/settings' className="item">
<SettingsIcon />
</a>}
</div>
diff --git a/components/ui.tsx b/components/ui.tsx
index c3f950b..99479a8 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -9,7 +9,6 @@ export function Vierkant(props: {
href?: string;
width?: string;
height?: string;
- style?: CSSProperties;
children?: ReactNode;
className?: string;
id?: string;
@@ -17,25 +16,8 @@ export function Vierkant(props: {
onclick?: () => void;
}) {
return <a
- style={{
- padding: 24,
- backgroundColor: 'var(--background)',
- borderRadius: 8,
- color: 'var(--text)',
- margin: 6, // geen margin collapse = 12px marge
- display: 'inline-block',
- position: 'relative',
- boxSizing: 'border-box',
- width: props.width
- ? props.width
- : props.fullwidth
- ? 'calc(100% - 12px)'
- : undefined,
- height: props.height ? props.height : undefined,
- ...props.style,
- }}
href={props.href}
- className={props.className}
+ className={["bg-800", "round-l", "pad-l", "vierkant", props.className, props.fullwidth && "fullwidth"].join(" ")}
id={props.id}
onClick={props.onclick}
>
diff --git a/package.json b/package.json
index df620cc..75fa8b1 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
"devDependencies": {
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
- "@types/react-router-dom": "^5.1.7"
+ "@types/react-router-dom": "^5.1.7",
+ "typescript-plugin-css-modules": "^3.2.0"
}
}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 0682a4d..bf9a280 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -7,6 +7,9 @@ import '../styles/dark.css';
import '../styles/disk.css';
import '../styles/footer.css';
import '../styles/global.css';
+import '../styles/utility.css';
+import '../styles/ui.css';
+import '../styles/navbar.css';
export default function VierOpEenRijWebsite({ Component, pageProps }) {
return <div>
diff --git a/pages/index.tsx b/pages/index.tsx
index 354efc5..c1b912d 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -16,6 +16,8 @@ import VideogameAssetIcon from '@material-ui/icons/VideogameAsset';
import { mdiRobotExcited } from '@mdi/js';
import Icon from '@mdi/react';
+import styles from '../styles/index.module.css';
+
var GameModeIconStyle: CSSProperties = {
fontSize: 64,
width: 64,
@@ -43,13 +45,6 @@ var SquareSize: CSSProperties = {
height: 90,
};
-var LoginOrRegisterBoxStyle: CSSProperties = {
- verticalAlign: 'top',
- height: `calc(${SquareSize.height}px + 24px * 2)`,
- width: '100%',
- maxWidth: `calc(100% - ${SquareSize.width}px - 12px * 2 - 24px * 2)`,
-};
-
var InnerLoginOrRegisterBoxStyle: CSSProperties = {
position: 'relative',
width: '100%',
@@ -198,7 +193,7 @@ export default function HomePage() {
<span style={GameModeTextStyle}>Tegen computer</span>
<div style={SquareSize}></div>
</Vierkant>}
- <Vierkant style={LoginOrRegisterBoxStyle}>
+ <Vierkant className={styles.loginOrRegisterBox}>
{loggedIn
? <AccountBox info={userInfo} sumGameInfo={gameInfo?.totals} />
: <LoginOrRegisterBox />}
diff --git a/styles/global.css b/styles/global.css
index 1e87524..350a2a7 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,17 +1,73 @@
-html {
- --text: #FCFFFD;
- --page-background: var(--text);
-
- --background: #5D737E;
- --text-alt: var(--background);
- --background-alt: #81949E;
-
- --disk-a: #E16D82;
- --disk-a-text: #FDC0C4;
- --disk-b: #71D9CC;
- --disk-b-text: #C0FDEB;
+:root {
+ --background: #E3E6EE;
+ --foreground: var(--gray-100);
+
+ --accent: #7E3AA6;
+
+ --error: #A63A4D;
+ --disk-b-alt: #582D35;
+
+ --confirm: #3AA699;
+ --disk-a-alt: #244743;
+
+ /* shade */
+ --gray-100: #141619;
+ --gray-200: #1F242D;
+ --gray-300: #293140;
+ --gray-700: #757D92;
+ --gray-800: #A9AFC0;
+ --gray-900: #CED2DC;
+
+ /* box-shadow */
+ --drop-level-2: 0px 8px 32px 0px rgba(0, 0, 0, 0.3);
+ --drop-level-1: 0px 8px 12px -4px rgba(0, 0, 0, 0.15);
+
+ /* border-radius */
+ --tight-corner: 6px;
+ --loose-corner: 8px;
+
+ /* margin/padding */
+ --spacing-small: 6px;
+ --spacing-medium: 12px;
+ --spacing-large: 24px;
}
+@media (prefers-color-scheme: dark) {
+ :root {
+ --background: var(--gray-900);
+ --foreground: #FFFFF3;
+
+ --accent: #AD34F3;
+
+ --error: #FF4365;
+ --disk-b-alt: #F49BA1;
+
+ --confirm: #00D9C0;
+ --disk-a-alt: #86F3F3;
+
+ --gray-100: #CED2DC;
+ --gray-200: #A9AFC0;
+ --gray-300: #757D92;
+ --gray-700: #293140;
+ --gray-800: #1F242D;
+ --gray-900: #141619;
+ }
+}
+
+/* html { */
+/* --text: #FCFFFD; */
+/* --page-background: var(--text); */
+
+/* --background: #5D737E; */
+/* --text-alt: var(--background); */
+/* --background-alt: #81949E; */
+
+/* --disk-a: #E16D82; */
+/* --disk-a-text: #FDC0C4; */
+/* --disk-b: #71D9CC; */
+/* --disk-b-text: #C0FDEB; */
+/* } */
+
/* default margin */
html, body {
margin: 0;
@@ -27,17 +83,17 @@ h3 {
padding-bottom: 6px;
}
-/* global font zize */
-p, b, i, span, td, th { font-size: 15px; }
-
/* navbar fix */
body { padding-left: 48px; }
/* font */
-html { font-family: "Inter"; }
+html { font-family: "Inter", sans-serif; }
-/* background color */
-html, body { background-color: var(--page-background); }
+/* color */
+:root, html, body {
+ background-color: var(--background);
+ color: var(--foreground);
+}
/* link fix */
a {
diff --git a/styles/index.module.css b/styles/index.module.css
new file mode 100644
index 0000000..9b518ea
--- /dev/null
+++ b/styles/index.module.css
@@ -0,0 +1,7 @@
+.loginOrRegisterBox {
+ --squareSize: 90px;
+ vertical-align: top;
+ height: calc(var(--squareSize) + 2 * var(--spacing-large));
+ width: 100%;
+ max-width: calc(100% - var(--squareSize) - var(--spacing-medium) * 2 - var(--spacing-large) * 2);
+}
diff --git a/styles/navbar.css b/styles/navbar.css
new file mode 100644
index 0000000..5866b8f
--- /dev/null
+++ b/styles/navbar.css
@@ -0,0 +1,11 @@
+.navbar .item {
+ margin: var(--spacing-medium);
+ margin-bottom: calc(var(--spacing-medium) + 4px);
+ display: block;
+}
+
+.navbar .bottomArea {
+ position: absolute;
+ bottom: -4px;
+ left: 0;
+}
diff --git a/styles/ui.css b/styles/ui.css
new file mode 100644
index 0000000..d665044
--- /dev/null
+++ b/styles/ui.css
@@ -0,0 +1,9 @@
+.vierkant {
+ margin: var(--spacing-small);
+ display: inline-block;
+ position: relative;
+ box-sizing: border-box;
+}
+
+.fullwidth { width: calc(100% - var(--spacing-medium)); }
+
diff --git a/styles/utility.css b/styles/utility.css
new file mode 100644
index 0000000..753b88d
--- /dev/null
+++ b/styles/utility.css
@@ -0,0 +1,27 @@
+.drop-1 { box-shadow: var(--drop-level-1); }
+.drop-2 { box-shadow: var(--drop-level-2); }
+
+.pad-s { padding: var(--spacing-small); }
+.pad-m { padding: var(--spacing-medium); }
+.pad-l { padding: var(--spacing-large); }
+
+.round-l { border-radius: var(--loose-corner); }
+.round-t { border-radius: var(--tight-corner); }
+
+.bg-100 { background-color: var(--gray-100); }
+.bg-200 { background-color: var(--gray-200); }
+.bg-300 { background-color: var(--gray-300); }
+.bg-700 { background-color: var(--gray-700); }
+.bg-800 { background-color: var(--gray-800); }
+.bg-900 { background-color: var(--gray-900); }
+
+.subtile {
+ color: var(--gray-300);
+ font-style: italic;
+}
+
+/* no-select */
+.nosel {
+ user-select: none;
+ font-weight: 600;
+}
diff --git a/tsconfig.json b/tsconfig.json
index 283a43f..6866dec 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,7 +17,12 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
- "jsx": "preserve"
+ "jsx": "preserve",
+ "plugins": [
+ {
+ "name": "typescript-plugin-css-modules"
+ }
+ ]
},
"include": [
"src"
diff --git a/yarn.lock b/yarn.lock
index 06a9373..05ae7bb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3104,6 +3104,11 @@ bfj@^7.0.2:
hoopy "^0.1.4"
tryer "^1.0.1"
+big.js@^3.1.3:
+ version "3.2.0"
+ resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
+ integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==
+
big.js@^5.2.2:
version "5.2.2"
resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -3602,6 +3607,21 @@ chokidar@3.4.3, chokidar@^3.4.1:
optionalDependencies:
fsevents "~2.1.2"
+"chokidar@>=3.0.0 <4.0.0":
+ version "3.5.1"
+ resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
+ integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==
+ dependencies:
+ anymatch "~3.1.1"
+ braces "~3.0.2"
+ glob-parent "~5.1.0"
+ is-binary-path "~2.1.0"
+ is-glob "~4.0.1"
+ normalize-path "~3.0.0"
+ readdirp "~3.5.0"
+ optionalDependencies:
+ fsevents "~2.3.1"
+
chokidar@^2.1.8:
version "2.1.8"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -3935,6 +3955,13 @@ cookie@^0.3.1:
resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
integrity sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=
+copy-anything@^2.0.1:
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-2.0.3.tgz#842407ba02466b0df844819bbe3baebbe5d45d87"
+ integrity sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==
+ dependencies:
+ is-what "^3.12.0"
+
copy-concurrently@^1.0.0:
version "1.0.5"
resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
@@ -4145,6 +4172,13 @@ css-loader@4.3.0:
schema-utils "^2.7.1"
semver "^7.3.2"
+css-parse@~2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-2.0.0.tgz#a468ee667c16d81ccf05c58c38d2a97c780dbfd4"
+ integrity sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=
+ dependencies:
+ css "^2.0.0"
+
css-prefers-color-scheme@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz#6f830a2714199d4f0d0d0bb8a27916ed65cff1f4"
@@ -4177,6 +4211,14 @@ css-select@^2.0.0:
domutils "^1.7.0"
nth-check "^1.0.2"
+css-selector-tokenizer@^0.7.0:
+ version "0.7.3"
+ resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz#735f26186e67c749aaf275783405cf0661fae8f1"
+ integrity sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg==
+ dependencies:
+ cssesc "^3.0.0"
+ fastparse "^1.1.2"
+
css-tree@1.0.0-alpha.37:
version "1.0.0-alpha.37"
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@@ -4428,6 +4470,13 @@ debug@^3.1.1, debug@^3.2.5:
dependencies:
ms "^2.1.1"
+debug@~3.1.0:
+ version "3.1.0"
+ resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+ integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+ dependencies:
+ ms "2.0.0"
+
decamelize@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -4806,7 +4855,7 @@ dotenv-expand@5.1.0:
resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
-dotenv@8.2.0:
+dotenv@8.2.0, dotenv@^8.2.0:
version "8.2.0"
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
@@ -4963,6 +5012,13 @@ entities@^2.0.0:
resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
+errno@^0.1.1:
+ version "0.1.8"
+ resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
+ integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
+ dependencies:
+ prr "~1.0.1"
+
errno@^0.1.3, errno@~0.1.7:
version "0.1.7"
resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
@@ -5546,6 +5602,11 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
+fastparse@^1.1.2:
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
+ integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
+
fastq@^1.6.0:
version "1.9.0"
resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.9.0.tgz#e16a72f338eaca48e91b5c23593bcc2ef66b7947"
@@ -5846,6 +5907,11 @@ fsevents@~2.1.2:
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
+fsevents@~2.3.1:
+ version "2.3.2"
+ resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+ integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
function-bind@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@@ -5870,6 +5936,13 @@ gauge@~2.7.3:
strip-ansi "^3.0.1"
wide-align "^1.1.0"
+generic-names@^1.0.2:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-1.0.3.tgz#2d786a121aee508876796939e8e3bff836c20917"
+ integrity sha1-LXhqEhruUIh2eWk56OO/+DbCCRc=
+ dependencies:
+ loader-utils "^0.2.16"
+
gensync@^1.0.0-beta.1:
version "1.0.0-beta.2"
resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
@@ -6379,6 +6452,13 @@ iconv-lite@0.4.24:
dependencies:
safer-buffer ">= 2.1.2 < 3"
+icss-utils@^3.0.1:
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-3.0.1.tgz#ee70d3ae8cac38c6be5ed91e851b27eed343ad0f"
+ integrity sha1-7nDTroysOMa+XtkehRsn7tNDrQ8=
+ dependencies:
+ postcss "^6.0.2"
+
icss-utils@^4.0.0, icss-utils@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
@@ -6420,6 +6500,11 @@ image-blob-reduce@^2.2.2:
dependencies:
pica "^6.1.1"
+image-size@~0.5.0:
+ version "0.5.5"
+ resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
+ integrity sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=
+
immer@7.0.9:
version "7.0.9"
resolved "https://registry.yarnpkg.com/immer/-/immer-7.0.9.tgz#28e7552c21d39dd76feccd2b800b7bc86ee4a62e"
@@ -6904,6 +6989,11 @@ is-typedarray@^1.0.0, is-typedarray@~1.0.0:
resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
+is-what@^3.12.0:
+ version "3.14.1"
+ resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1"
+ integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
+
is-windows@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -7524,6 +7614,11 @@ json3@^3.3.2:
resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81"
integrity sha512-c7/8mbUsKigAbLkD5B010BK4D9LZm7A1pNItkEwiUZRpIN66exu/e7YQWysGun+TRKaJp8MhemM+VkfWv42aCA==
+json5@^0.5.0:
+ version "0.5.1"
+ resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+ integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
+
json5@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
@@ -7702,6 +7797,22 @@ last-call-webpack-plugin@^3.0.0:
lodash "^4.17.5"
webpack-sources "^1.1.0"
+less@^3.11.1:
+ version "3.13.1"
+ resolved "https://registry.yarnpkg.com/less/-/less-3.13.1.tgz#0ebc91d2a0e9c0c6735b83d496b0ab0583077909"
+ integrity sha512-SwA1aQXGUvp+P5XdZslUOhhLnClSLIjWvJhmd+Vgib5BFIr9lMNlQwmwUNOjXThF/A0x+MCYYPeWEfeWiLRnTw==
+ dependencies:
+ copy-anything "^2.0.1"
+ tslib "^1.10.0"
+ optionalDependencies:
+ errno "^0.1.1"
+ graceful-fs "^4.1.2"
+ image-size "~0.5.0"
+ make-dir "^2.1.0"
+ mime "^1.4.1"
+ native-request "^1.0.5"
+ source-map "~0.6.0"
+
leven@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -7769,6 +7880,16 @@ loader-utils@2.0.0, loader-utils@^2.0.0:
emojis-list "^3.0.0"
json5 "^2.1.2"
+loader-utils@^0.2.16:
+ version "0.2.17"
+ resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
+ integrity sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=
+ dependencies:
+ big.js "^3.1.3"
+ emojis-list "^2.0.0"
+ json5 "^0.5.0"
+ object-assign "^4.0.1"
+
loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
@@ -7806,6 +7927,11 @@ lodash._reinterpolate@^3.0.0:
resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
+lodash.camelcase@^4.3.0:
+ version "4.3.0"
+ resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+ integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
+
lodash.memoize@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -7841,6 +7967,11 @@ lodash.uniq@^4.5.0:
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+lodash@^4.17.4:
+ version "4.17.21"
+ resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+ integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
loglevel@^1.6.8:
version "1.7.0"
resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.0.tgz#728166855a740d59d38db01cf46f042caa041bb0"
@@ -7886,7 +8017,7 @@ magic-string@^0.25.0, magic-string@^0.25.7:
dependencies:
sourcemap-codec "^1.4.4"
-make-dir@^2.0.0:
+make-dir@^2.0.0, make-dir@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
@@ -8045,7 +8176,7 @@ mime-types@^2.1.12, mime-types@^2.1.27, mime-types@~2.1.17, mime-types@~2.1.19,
dependencies:
mime-db "1.44.0"
-mime@1.6.0:
+mime@1.6.0, mime@^1.4.1:
version "1.6.0"
resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
@@ -8187,7 +8318,7 @@ mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
dependencies:
minimist "^1.2.5"
-mkdirp@^1.0.3, mkdirp@^1.0.4:
+mkdirp@^1.0.3, mkdirp@^1.0.4, mkdirp@~1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
@@ -8277,6 +8408,11 @@ napi-build-utils@^1.0.1:
resolved "https://registry.yarnpkg.com/napi-build-utils/-/napi-build-utils-1.0.2.tgz#b1fddc0b2c46e380a0b7a76f984dd47c41a13806"
integrity sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==
+native-request@^1.0.5:
+ version "1.0.8"
+ resolved "https://registry.yarnpkg.com/native-request/-/native-request-1.0.8.tgz#8f66bf606e0f7ea27c0e5995eb2f5d03e33ae6fb"
+ integrity sha512-vU2JojJVelUGp6jRcLwToPoWGxSx23z/0iX+I77J3Ht17rf2INGjrhOoQnjVo60nQd8wVsgzKkPfRXBiVdD2ag==
+
native-url@0.3.4:
version "0.3.4"
resolved "https://registry.yarnpkg.com/native-url/-/native-url-0.3.4.tgz#29c943172aed86c63cee62c8c04db7f5756661f8"
@@ -9305,6 +9441,13 @@ postcss-env-function@^2.0.2:
postcss "^7.0.2"
postcss-values-parser "^2.0.0"
+postcss-filter-plugins@^3.0.1:
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-3.0.1.tgz#9d226e946d56542ab7c26123053459a331df545d"
+ integrity sha512-tRKbW4wWBEkSSFuJtamV2wkiV9rj6Yy7P3Y13+zaynlPEEZt8EgYKn3y/RBpMeIhNmHXFlSdzofml65hD5OafA==
+ dependencies:
+ postcss "^6.0.14"
+
postcss-flexbugs-fixes@4.2.1:
version "4.2.1"
resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.1.tgz#9218a65249f30897deab1033aced8578562a6690"
@@ -9340,6 +9483,26 @@ postcss-gap-properties@^2.0.0:
dependencies:
postcss "^7.0.2"
+postcss-icss-keyframes@^0.2.1:
+ version "0.2.1"
+ resolved "https://registry.yarnpkg.com/postcss-icss-keyframes/-/postcss-icss-keyframes-0.2.1.tgz#80c4455e0112b0f2f9c3c05ac7515062bb9ff295"
+ integrity sha1-gMRFXgESsPL5w8Bax1FQYruf8pU=
+ dependencies:
+ icss-utils "^3.0.1"
+ postcss "^6.0.2"
+ postcss-value-parser "^3.3.0"
+
+postcss-icss-selectors@^2.0.3:
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/postcss-icss-selectors/-/postcss-icss-selectors-2.0.3.tgz#27fa1afcaab6c602c866cbb298f3218e9bc1c9b3"
+ integrity sha1-J/oa/Kq2xgLIZsuymPMhjpvBybM=
+ dependencies:
+ css-selector-tokenizer "^0.7.0"
+ generic-names "^1.0.2"
+ icss-utils "^3.0.1"
+ lodash "^4.17.4"
+ postcss "^6.0.2"
+
postcss-image-set-function@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz#28920a2f29945bed4c3198d7df6496d410d3f288"
@@ -9365,7 +9528,7 @@ postcss-lab-function@^2.0.1:
postcss "^7.0.2"
postcss-values-parser "^2.0.0"
-postcss-load-config@^2.0.0:
+postcss-load-config@^2.0.0, postcss-load-config@^2.1.0:
version "2.1.2"
resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.2.tgz#c5ea504f2c4aef33c7359a34de3573772ad7502a"
integrity sha512-/rDeGV6vMUo3mwJZmeHfEDvwnTKKqQ0S7OHUi/kJvvtx3aWtyWG2/0ZWnzCt2keEclwN6Tf0DST2v9kITdOKYw==
@@ -9777,7 +9940,7 @@ postcss-unique-selectors@^4.0.1:
postcss "^7.0.0"
uniqs "^2.0.0"
-postcss-value-parser@^3.0.0:
+postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0:
version "3.3.1"
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
@@ -9824,6 +9987,15 @@ postcss@8.1.7:
nanoid "^3.1.16"
source-map "^0.6.1"
+postcss@^6.0.14, postcss@^6.0.2:
+ version "6.0.23"
+ resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
+ integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
+ dependencies:
+ chalk "^2.4.1"
+ source-map "^0.6.1"
+ supports-color "^5.4.0"
+
postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
version "7.0.35"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
@@ -10559,6 +10731,11 @@ requires-port@^1.0.0:
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
+reserved-words@^0.1.2:
+ version "0.1.2"
+ resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1"
+ integrity sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE=
+
resolve-cwd@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -10766,7 +10943,7 @@ safe-regex@^1.1.0:
dependencies:
ret "~0.1.10"
-"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
+"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@^2.1.2, safer-buffer@~2.1.0:
version "2.1.2"
resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
@@ -10813,6 +10990,13 @@ sass-loader@8.0.2:
schema-utils "^2.6.1"
semver "^6.3.0"
+sass@^1.26.5:
+ version "1.32.10"
+ resolved "https://registry.yarnpkg.com/sass/-/sass-1.32.10.tgz#d40da4e20031b450359ee1c7e69bc8cc89569241"
+ integrity sha512-Nx0pcWoonAkn7CRp0aE/hket1UP97GiR1IFw3kcjV3pnenhWgZEWUf0ZcfPOV2fK52fnOcK3JdC/YYZ9E47DTQ==
+ dependencies:
+ chokidar ">=3.0.0 <4.0.0"
+
sax@~1.2.4:
version "1.2.4"
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -11653,7 +11837,21 @@ stylis@3.5.4:
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
-supports-color@^5.3.0:
+stylus@^0.54.7:
+ version "0.54.8"
+ resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.8.tgz#3da3e65966bc567a7b044bfe0eece653e099d147"
+ integrity sha512-vr54Or4BZ7pJafo2mpf0ZcwA74rpuYCZbxrHBsH8kbcXOwSfvBFwsRfpGO5OD5fhG5HDCFW737PKaawI7OqEAg==
+ dependencies:
+ css-parse "~2.0.0"
+ debug "~3.1.0"
+ glob "^7.1.6"
+ mkdirp "~1.0.4"
+ safer-buffer "^2.1.2"
+ sax "~1.2.4"
+ semver "^6.3.0"
+ source-map "^0.7.3"
+
+supports-color@^5.3.0, supports-color@^5.4.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -12120,6 +12318,25 @@ typedarray@^0.0.6:
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
+typescript-plugin-css-modules@^3.2.0:
+ version "3.2.0"
+ resolved "https://registry.yarnpkg.com/typescript-plugin-css-modules/-/typescript-plugin-css-modules-3.2.0.tgz#44241064395d565f242689b96eb50bf413e68ddf"
+ integrity sha512-oMe5IDKuPvLBOeaYupAqqq8UMTu7Jo5e0InqkQSSKXuZCcRm0+LQfUVMyM62IFpgzxHLuN32a7YdBxAaSXZrRQ==
+ dependencies:
+ dotenv "^8.2.0"
+ icss-utils "^4.1.1"
+ less "^3.11.1"
+ lodash.camelcase "^4.3.0"
+ postcss "^7.0.27"
+ postcss-filter-plugins "^3.0.1"
+ postcss-icss-keyframes "^0.2.1"
+ postcss-icss-selectors "^2.0.3"
+ postcss-load-config "^2.1.0"
+ reserved-words "^0.1.2"
+ sass "^1.26.5"
+ stylus "^0.54.7"
+ tsconfig-paths "^3.9.0"
+
typescript@^4.1.3:
version "4.1.3"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.3.tgz#519d582bd94cba0cf8934c7d8e8467e473f53bb7"