blockworks-foundation
/
mango-ui-v2
mirror of https://github.com/blockworks-foundation/mango-ui-v2.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

support for more than two themes

This commit is contained in:
saml33 2021-04-12 23:32:01 +10:00
parent 4e06be9bb8
commit d9c27cca3c
24 changed files with 592 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/BalancesTable.tsx
View File

@ -148,7 +148,7 @@ const BalancesTable = () => {
</div>
) : (
<div
css={xw`w-full text-center py-6 text-lg bg-mango-dark-light font-light text-mango-med`}
css={xw`w-full text-center py-6 text-base bg-th-bkg-1 font-light text-th-fgd-4 rounded-md`}
>
No balances
</div>

6
components/Button.tsx
View File

@ -21,10 +21,10 @@ const Button: FunctionComponent<ButtonProps> = ({
return (
<button
css={[
xw`px-8 py-2 border border-mango-dark-lighter bg-mango-dark-light
focus:outline-none`,
xw`px-8 py-2 border border-th-fgd-4 bg-th-bkg-2
rounded-md focus:outline-none`,
grow && xw`flex-grow`,
disabled && xw`cursor-not-allowed text-mango-med`,
disabled && xw`cursor-not-allowed text-th-fgd-4`,
]}
disabled={disabled}
>

54
components/FeeDiscountsTable.tsx
View File

@ -9,35 +9,41 @@ const FeeDiscountsTable = () => {
const connected = useMangoStore((s) => s.wallet.connected)
return (
<div css={xw`flex bg-mango-dark-light py-6 mt-4`}>
<div css={xw`flex flex-col items-center bg-th-bkg-1 py-6 mt-4 rounded-md`}>
<div
css={xw`flex flex-col justify-center m-auto text-gray-300 text-base font-light text-center`}
css={xw`flex flex-col sm:flex-row justify-between m-auto text-th-fgd-4 text-base font-light text-center`}
>
<div>Total SRM in Mango: {totalSrm}</div>
<div css={xw`mt-2`}>
Maker Fee: {rates ? percentFormat.format(rates.maker) : null}%
<div css={xw`px-4`}>
<div>Total SRM in Mango</div>
<div css={xw`text-th-fgd-1 text-lg font-semibold`}>
{totalSrm.toFixed(0)}
</div>
</div>
<div>
Taker Fee: {rates ? percentFormat.format(rates.taker) : null}%
<div css={xw`px-4 mt-4 sm:mt-0`}>
<div>Maker Fee</div>
<div css={xw`text-th-fgd-1 text-lg font-semibold`}>
{rates ? percentFormat.format(rates.maker) : null}
</div>
</div>
<div css={xw`mt-6`}>
{connected ? (
<div css={xw`bg-mango-dark p-6`}>
<div css={xw`text-gray-500`}>Your contributed SRM: 0</div>
<div css={xw`flex space-x-4 mt-8`}>
<Button>Deposit</Button>
<Button>Withdraw</Button>
</div>
<div css={xw`px-4 mt-4 sm:mt-0`}>
<div>Taker Fee</div>
<div css={xw`text-th-fgd-1 text-lg font-semibold`}>
{rates ? percentFormat.format(rates.taker) : null}
</div>
</div>
</div>
<div css={xw`mt-6`}>
{connected ? (
<div css={xw`bg-mango-dark p-6`}>
<div css={xw`text-gray-500`}>Your contributed SRM: 0</div>
<div css={xw`flex space-x-4 mt-8`}>
<Button>Deposit</Button>
<Button>Withdraw</Button>
</div>
) : (
<button
disabled
css={xw`px-8 cursor-default font-light py-2.5 bg-mango-dark text-mango-med-dark text-lg`}
>
Connect a wallet to deposit SRM
</button>
)}
</div>
</div>
) : (
<Button disabled>Connect wallet to deposit SRM</Button>
)}
</div>
</div>
)

2
components/FloatingElement.tsx
View File

@ -5,7 +5,7 @@ export default function FloatingElement({ shrink = false, children }) {
return (
<div
css={[
xw`m-1 p-4 border border-mango-grey-light dark:border-0 bg-white dark:bg-mango-grey-dark rounded-lg overflow-auto`,
xw`m-1 p-4 bg-th-bkg-2 rounded-lg overflow-auto`,
shrink ? null : xw`h-full`,
]}
>

21
components/MarginBalances.tsx
View File

@ -58,27 +58,24 @@ export default function MarginStats() {
{selectedMangoGroup ? (
<table css={xw`min-w-full`}>
<thead>
<tr css={xw`text-center text-mango-med-dark mb-2`}>
<th scope="col" css={xw`flex-auto`}>
<tr css={xw`text-center text-th-fgd-4 mb-2`}>
<th scope="col" css={xw`flex-auto font-light`}>
Assets
</th>
<th scope="col" css={xw`flex-auto`}>
<th scope="col" css={xw`flex-auto font-light`}>
Deposits
</th>
<th scope="col" css={xw`flex-auto`}>
<th scope="col" css={xw`flex-auto font-light`}>
Borrows
</th>
<th scope="col" css={xw`flex-auto`}>
<th scope="col" css={xw`flex-auto font-light`}>
Interest (APY)
</th>
</tr>
</thead>
<tbody>
{Object.entries(symbols).map(([name], i) => (
<tr
key={name}
css={xw`text-mango-med-dark text-gray-300 tracking-wide`}
>
<tr key={name} css={xw`text-th-fgd-1 tracking-wide`}>
<td css={xw`flex items-center py-2`}>
<img
alt=""
@ -104,12 +101,12 @@ export default function MarginStats() {
: (0).toFixed(tokenPrecision[name])}
</td>
<td css={xw`text-center`}>
<span css={xw`text-mango-green`}>
<span css={xw`text-th-green`}>
+{(selectedMangoGroup.getDepositRate(i) * 100).toFixed(2)}
%
</span>
<span>{' / '}</span>
<span css={xw`text-mango-red`}>
<span css={xw`text-th-red`}>
-{(selectedMangoGroup.getBorrowRate(i) * 100).toFixed(2)}%
</span>
</td>
@ -137,7 +134,7 @@ export default function MarginStats() {
</Button>
</div>
</div>
<div css={xw`text-center mt-4 text-mango-med tracking-wider`}>
<div css={xw`text-center mt-4 text-th-fgd-4 tracking-wider`}>
Settle funds in the Balances tab
</div>
</FloatingElement>

4
components/MarginStats.tsx
View File

@ -153,9 +153,9 @@ export default function MarginStats() {
placement="topLeft"
trigger="hover"
>
<div css={xw`cursor-help text-gray-300`}>{entry.label}</div>
<div css={xw`cursor-help text-th-fgd-4`}>{entry.label}</div>
</Popover>
<div css={xw`text-gray-300 font-light`}>
<div css={xw`text-th-fgd-1 font-light`}>
{entry.currency + entry.value}
{entry.unit}
</div>

8
components/MarketSelect.jsx
View File

@ -21,19 +21,17 @@ const MarketSelect = () => {
})
}
console.log(selectedMarket)
return (
<div
css={xw`relative flex items-center py-2 px-3 sm:px-6 divide-x divide-mango-grey-light dark:divide-mango-grey-dark bg-mango-grey-lighter dark:bg-mango-grey-darkest`}
css={xw`relative flex items-center py-2 px-3 sm:px-6 divide-x divide-th-fgd-4 bg-th-bkg-3`}
>
{/*<div css={xw`opacity-50 p-2`}>Markets</div>*/}
{Object.entries(spotMarkets).map(([name, address]) => (
<StyledDiv
css={
selectedMarket.name === name
? xw`px-3 py-1 text-mango-orange text-xs font-normal`
: xw`px-3 py-1 text-gray-400 hover:text-gray-600 dark:hover:text-white text-xs font-normal`
? xw`px-3 py-1 text-th-primary text-xs font-normal`
: xw`px-3 py-1 text-th-fgd-3 hover:text-th-fgd-1 text-xs font-normal`
}
onClick={() => handleChange(name)}
key={address}

6
components/MenuItem.tsx
View File

@ -9,10 +9,10 @@ const MenuItem = ({ href, children }) => {
<Link href={href} passHref>
<a
css={[
xw`block text-black dark:text-white font-semibold items-center pl-3 pr-4 py-2 sm:inline-flex sm:ml-4 sm:px-1 sm:pt-1 sm:pb-0 border-l-4 sm:border-l-0 sm:border-b-2 text-base`,
xw`block text-th-fgd-1 font-semibold items-center pl-3 pr-4 py-2 sm:inline-flex sm:ml-4 sm:px-1 sm:pt-1 sm:pb-0 border-l-4 sm:border-l-0 sm:border-b-2 text-base`,
asPath === href
? xw`border-mango-orange`
: xw`border-transparent hover:border-mango-orange`,
? xw`border-th-primary`
: xw`border-transparent hover:border-th-primary`,
]}
>
{children}

2
components/OpenOrdersTable.tsx
View File

@ -97,7 +97,7 @@ const OpenOrdersTable = () => {
</div>
) : (
<div
css={xw`w-full text-center py-6 text-lg bg-mango-dark-light font-light text-mango-med`}
css={xw`w-full text-center py-6 text-base bg-th-bkg-1 font-light text-th-fgd-4 rounded-md`}
>
No open orders
</div>

50
components/Orderbook.tsx
View File

@ -14,9 +14,9 @@ const Line = styled.div<any>`
text-align: ${(props) => (props.invert ? 'left' : 'right')};
float: ${(props) => (props.invert ? 'left' : 'right')};
height: 100%;
filter: opacity(70%);
${(props) => props['data-width'] && `width: ${props['data-width']};`}
${(props) =>
props['data-bgcolor'] && `background-color: ${props['data-bgcolor']};`}
${(props) => (props.side === 'buy' ? xw`bg-th-green` : xw`bg-th-red`)};
`
function getCumulativeOrderbookSide(
@ -98,7 +98,7 @@ export default function Orderbook({ depth = 7 }) {
return (
<>
<ElementTitle>Orderbook</ElementTitle>
<div css={xw`text-gray-500 flex justify-between mb-2`}>
<div css={xw`text-th-fgd-4 flex justify-between mb-2`}>
<div css={xw`text-left`}>Size ({baseCurrency})</div>
<div css={xw`text-right`}>Price ({quoteCurrency})</div>
</div>
@ -165,35 +165,21 @@ const OrderbookRow = React.memo<any>(
{invert ? (
<>
<div css={xw`text-left`}>
<Line
invert
data-width={sizePercent + '%'}
data-bgcolor={side === 'buy' ? '#5b6b16' : '#E54033'}
/>
<div
css={xw``}
data-color={side === 'buy' ? '#ffffff' : 'white'}
onClick={onPriceClick}
>
{formattedPrice}
</div>
<Line invert data-width={sizePercent + '%'} side={side} />
<div onClick={onPriceClick}>{formattedPrice}</div>
</div>
<div css={xw`text-right`}>{formattedSize}</div>
</>
) : (
<>
<div css={xw`text-left flex-1 text-gray-200`}>{formattedSize}</div>
<div css={xw`text-left flex-1 text-th-fgd-1`}>{formattedSize}</div>
<div css={xw`text-right relative flex-1`}>
<Line
css={xw`absolute inset-y-0 right-0`}
data-width={sizePercent + '%'}
data-bgcolor={side === 'buy' ? '#5b6b16' : '#E54033'}
side={side}
/>
<div
css={xw`z-30 relative text-gray-200`}
data-color={side === 'buy' ? '#ffffff' : 'white'}
onClick={onPriceClick}
>
<div css={xw`z-30 relative text-th-fgd-1`} onClick={onPriceClick}>
{formattedPrice}
</div>
</div>
@ -211,13 +197,6 @@ const MarkPriceComponent = React.memo<{ markPrice: number }>(
const { market } = useMarket()
const previousMarkPrice: number = usePrevious(markPrice)
const markPriceColor =
markPrice > previousMarkPrice
? '#afd803'
: markPrice < previousMarkPrice
? '#E54033'
: 'white'
const formattedMarkPrice =
markPrice &&
market?.tickSize &&
@ -225,14 +204,19 @@ const MarkPriceComponent = React.memo<{ markPrice: number }>(
return (
<div
css={xw`flex justify-center items-center font-bold p-1`}
style={{ color: markPriceColor }}
css={
markPrice > previousMarkPrice
? xw`text-th-green flex justify-center items-center font-bold p-1`
: markPrice < previousMarkPrice
? xw`text-th-red flex justify-center items-center font-bold p-1`
: xw`text-th-fgd-1 flex justify-center items-center font-bold p-1`
}
>
{markPrice > previousMarkPrice && (
<ArrowUpIcon css={xw`h-5 w-5 mr-1`} />
<ArrowUpIcon css={xw`h-5 w-5 mr-1 text-th-green`} />
)}
{markPrice < previousMarkPrice && (
<ArrowDownIcon css={xw`h-5 w-5 mr-1`} />
<ArrowDownIcon css={xw`h-5 w-5 mr-1 text-th-red`} />
)}
{formattedMarkPrice || '----'}
</div>

34
components/ThemeSwitch.tsx Normal file
View File

@ -0,0 +1,34 @@
import { useEffect, useState } from 'react'
import xw from 'xwind'
import { useTheme } from 'next-themes'
const themes = [{ name: 'light' }, { name: 'dark' }, { name: 'mango' }]
const ThemeChanger = () => {
const [mounted, setMounted] = useState(false)
const { theme, setTheme } = useTheme()
// When mounted on client, now we can show the UI
useEffect(() => setMounted(true), [])
if (!mounted) return null
return (
<select
name="theme"
id="theme-select"
css={xw`px-3 py-1 text-sm bg-th-bkg-1 border border-th-fgd-4 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 rounded-md`}
onChange={(e) => setTheme(e.currentTarget.value)}
value={theme}
>
<option value="">Select Theme</option>
{themes.map((t) => (
<option key={t.name.toLowerCase()} value={t.name.toLowerCase()}>
{t.name}
</option>
))}
</select>
)
}
export default ThemeChanger

20
components/TopBar.tsx
View File

@ -1,10 +1,11 @@
import { useState } from 'react'
import xw from 'xwind'
import styled from '@emotion/styled'
import { useTheme } from 'next-themes'
// import { useTheme } from 'next-themes'
import { SunIcon, MoonIcon, MenuIcon, XIcon } from '@heroicons/react/outline'
import MenuItem from './MenuItem'
import useWallet from '../hooks/useWallet'
import ThemeSwitch from './ThemeSwitch'
const Code = styled.code`
border: 1px solid hsla(0, 0%, 39.2%, 0.2);
@ -15,14 +16,14 @@ const Code = styled.code`
const TopBar = () => {
const { connected, wallet } = useWallet()
const [showMenu, setShowMenu] = useState(false)
const { theme, setTheme } = useTheme()
// const { theme, setTheme } = useTheme()
const handleConnectDisconnect = () => {
connected ? wallet.disconnect() : wallet.connect()
}
return (
<nav css={xw`bg-white dark:bg-mango-grey-darker`}>
<nav css={xw`bg-th-bkg-1`}>
<div css={xw`px-4 sm:px-6 lg:px-8`}>
<div css={xw`flex justify-between h-16`}>
<div css={xw`flex`}>
@ -41,7 +42,8 @@ const TopBar = () => {
</div>
<div css={xw`flex`}>
<div css={xw`flex items-center pr-1`}>
<button
<ThemeSwitch />
{/*<button
type="button"
css={xw`inline-flex items-center justify-center p-2 rounded-md text-black dark:text-white hover:text-gray-400 focus:outline-none`}
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
@ -51,17 +53,19 @@ const TopBar = () => {
) : (
<SunIcon css={xw`h-5 w-5`} />
)}
</button>
</button>*/}
<div css={xw`hidden sm:ml-4 sm:flex sm:items-center`}>
<button
onClick={handleConnectDisconnect}
css={xw`bg-mango-orange hover:bg-mango-orange-dark text-white rounded-md px-4 py-2 focus:outline-none`}
css={xw`border border-th-primary hover:bg-th-primary rounded-md px-4 py-2 focus:outline-none text-base text-th-primary hover:text-th-fgd-1 font-semibold`}
>
<div css={xw`text-base font-semibold`}>
<div>
{connected ? (
<div onClick={wallet.disconnect}>
<span>Disconnect: </span>
<Code css={xw`text-xs p-1 text-white font-extralight`}>
<Code
css={xw`text-xs p-1 text-th-fgd-1 font-extralight`}
>
{wallet.publicKey.toString().substr(0, 4) +
'...' +
wallet.publicKey.toString().substr(-4)}

4
components/TradeHistoryTable.tsx
View File

@ -115,9 +115,9 @@ const TradeHistoryTable = () => {
</div>
) : (
<div
css={xw`w-full text-center py-6 text-lg bg-mango-dark-light font-light text-mango-med`}
css={xw`w-full text-center py-6 text-base bg-th-bkg-1 font-light text-th-fgd-4 rounded-md`}
>
No open orders
No trade history
</div>
)}
</div>

5
components/TradingView/index.tsx
View File

@ -102,9 +102,10 @@ const TVChartContainer = () => {
fullscreen: defaultProps.fullscreen,
autosize: defaultProps.autosize,
studies_overrides: defaultProps.studiesOverrides,
theme: theme === 'dark' ? 'Dark' : 'Light',
theme: theme === 'light' ? 'Light' : 'Dark',
overrides: {
'paneProperties.background': theme === 'dark' ? '#092e34' : '#fff',
'paneProperties.background':
theme === 'dark' ? '#0F282D' : theme === 'light' ? '#fff' : '#1D1832',
'mainSeriesProperties.candleStyle.upColor': '#AFD803',
'mainSeriesProperties.candleStyle.downColor': '#E54033',
'mainSeriesProperties.candleStyle.drawWick': true,

10
components/UserInfo.tsx
View File

@ -22,7 +22,7 @@ const UserInfoTabs = ({ activeTab, setActiveTab }) => {
<select
id="tabs"
name="tabs"
css={xw`block w-full pl-3 pr-10 py-2 text-base bg-mango-dark border border-mango-med-dark focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md`}
css={xw`block w-full pl-3 pr-10 py-2 text-base bg-th-bkg-2 border border-th-fgd-4 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md`}
onChange={(e) => handleTabChange(e.target.value)}
>
{TABS.map((tabName) => (
@ -33,7 +33,7 @@ const UserInfoTabs = ({ activeTab, setActiveTab }) => {
</select>
</div>
<div css={xw`hidden sm:block`}>
<div css={xw`border-b border-mango-dark-lighter`}>
<div css={xw`border-b border-th-fgd-4`}>
<nav css={xw`-mb-px flex space-x-8`} aria-label="Tabs">
{TABS.map((tabName) => (
<a
@ -41,9 +41,9 @@ const UserInfoTabs = ({ activeTab, setActiveTab }) => {
onClick={() => handleTabChange(tabName)}
css={[
activeTab === tabName
? xw`border-mango-yellow text-mango-yellow`
: xw`border-transparent text-gray-300 hover:text-mango-yellow`,
xw`whitespace-nowrap py-4 px-1 border-b-2 font-normal text-base tracking-tight`,
? xw`border-th-primary text-th-primary hover:text-th-fgd-2`
: xw`border-transparent text-th-fgd-4 hover:text-th-fgd-2`,
xw`whitespace-nowrap py-4 px-1 border-b-2 font-normal text-base`,
]}
>
{tabName}

2
components/styles.tsx
View File

@ -2,5 +2,5 @@ import styled from '@emotion/styled'
import xw from 'xwind'
export const ElementTitle = styled.div(
xw`flex justify-center mb-4 text-lg items-center`
xw`flex justify-center mb-4 text-lg items-center text-th-fgd-1`
)

1
package.json
View File

@ -44,6 +44,7 @@
"next": "latest",
"next-plugin-antd-less": "^0.3.0",
"next-themes": "^0.0.14",
"postcss-preset-env": "^6.7.0",
"react": "^17.0.1",
"react-cool-dimensions": "^2.0.1",
"react-dom": "^17.0.1",

2
pages/_app.tsx
View File

@ -24,7 +24,7 @@ function App({ Component, pageProps }) {
//tailwind base styles + keyframes + ring and shadow classes variables ... to global styles
styles={xw`XWIND_BASE XWIND_GLOBAL`}
/>
<ThemeProvider attribute="class">
<ThemeProvider>
<Component {...pageProps} />
</ThemeProvider>
</>

4
pages/index.tsx
View File

@ -9,9 +9,7 @@ const Index = () => {
useHydrateStore()
return (
<div
css={xw`bg-white dark:bg-mango-grey-darker text-black dark:text-white transition-all`}
>
<div css={xw`bg-th-bkg-1 text-th-fgd-1 transition-all`}>
<TopBar />
<MarketSelect />
<div css={xw`min-h-screen p-1 sm:p-2 md:p-6 md:pt-4`}>

3
postcss.config.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
plugins: ['tailwindcss', 'postcss-preset-env'],
}

39
styles/global.css Normal file
View File

@ -0,0 +1,39 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--primary: theme('colors.light-theme.orange');
--red: theme('colors.light-theme.red');
--green: theme('colors.light-theme.green');
--bkg-1: theme('colors.light-theme["bkg-1"]');
--bkg-2: theme('colors.light-theme["bkg-2"]');
--bkg-3: theme('colors.light-theme["bkg-3"]');
--fgd-1: theme('colors.light-theme["fgd-1"]');
--fgd-2: theme('colors.light-theme["fgd-2"]');
--fgd-3: theme('colors.light-theme["fgd-3"]');
}
[data-theme='dark'] {
--primary: theme('colors.dark-theme.orange');
--red: theme('colors.dark-theme.red');
--green: theme('colors.dark-theme.green');
--bkg-1: theme('colors.dark-theme["bkg-1"]');
--bkg-2: theme('colors.dark-theme["bkg-2"]');
--bkg-3: theme('colors.dark-theme["bkg-3"]');
--fgd-1: theme('colors.dark-theme["fgd-1"]');
--fgd-2: theme('colors.dark-theme["fgd-2"]');
--fgd-3: theme('colors.dark-theme["fgd-3"]');
}
[data-theme='mango'] {
--primary: theme('colors.mango-theme.yellow');
--red: theme('colors.mango-theme.red');
--green: theme('colors.mango-theme.green');
--bkg-1: theme('colors.mango-theme["bkg-1"]');
--bkg-2: theme('colors.mango-theme["bkg-2"]');
--bkg-3: theme('colors.mango-theme["bkg-3"]');
--fgd-1: theme('colors.mango-theme["fgd-1"]');
--fgd-2: theme('colors.mango-theme["fgd-2"]');
--fgd-3: theme('colors.mango-theme["fgd-3"]');
}

45
styles/index.css
View File

@ -1,12 +1,45 @@
/* @tailwind base;
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
button {
@apply underline;
}
} */
:root {
--primary: theme('colors.light-theme.orange');
--red: theme('colors.light-theme.red');
--green: theme('colors.light-theme.green');
--bkg-1: theme('colors.light-theme["bkg-1"]');
--bkg-2: theme('colors.light-theme["bkg-2"]');
--bkg-3: theme('colors.light-theme["bkg-3"]');
--fgd-1: theme('colors.light-theme["fgd-1"]');
--fgd-2: theme('colors.light-theme["fgd-2"]');
--fgd-3: theme('colors.light-theme["fgd-3"]');
--fgd-4: theme('colors.light-theme["fgd-4"]');
}
[data-theme='dark'] {
--primary: theme('colors.dark-theme.orange');
--red: theme('colors.dark-theme.red');
--green: theme('colors.dark-theme.green');
--bkg-1: theme('colors.dark-theme["bkg-1"]');
--bkg-2: theme('colors.dark-theme["bkg-2"]');
--bkg-3: theme('colors.dark-theme["bkg-3"]');
--fgd-1: theme('colors.dark-theme["fgd-1"]');
--fgd-2: theme('colors.dark-theme["fgd-2"]');
--fgd-3: theme('colors.dark-theme["fgd-3"]');
--fgd-4: theme('colors.dark-theme["fgd-4"]');
}
[data-theme='mango'] {
--primary: theme('colors.mango-theme.yellow');
--red: theme('colors.mango-theme.red');
--green: theme('colors.mango-theme.green');
--bkg-1: theme('colors.mango-theme["bkg-1"]');
--bkg-2: theme('colors.mango-theme["bkg-2"]');
--bkg-3: theme('colors.mango-theme["bkg-3"]');
--fgd-1: theme('colors.mango-theme["fgd-1"]');
--fgd-2: theme('colors.mango-theme["fgd-2"]');
--fgd-3: theme('colors.mango-theme["fgd-3"]');
--fgd-4: theme('colors.mango-theme["fgd-4"]');
}
button {
transition: all 0.25s ease;

57
tailwind.config.js
View File

@ -1,15 +1,20 @@
// const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')
// const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
darkMode: 'class',
purge: ['./pages/**/*.tsx', './styles/**/*.css'],
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
darkMode: false,
theme: {
extend: {
cursor: {
help: 'help',
},
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
sans: ['Nunito'],
},
colors: {
'mango-orange': {
@ -41,6 +46,52 @@ module.exports = {
darker: '#072428',
darkest: '#061f23',
},
'light-theme': {
orange: '#DFAB01',
red: '#E54033',
green: '#AFD803',
'bkg-1': '#F7F7F7',
'bkg-2': '#FFFFFF',
'bkg-3': '#E7E7E7',
'fgd-1': '#061f23',
'fgd-2': '#0C3F45',
'fgd-3': '#446065',
'fgd-4': '#A0AFB1',
},
'dark-theme': {
orange: '#DFAB01',
red: '#E54033',
green: '#AFD803',
'bkg-1': '#061f23',
'bkg-2': '#0F282D',
'bkg-3': '#0F3339',
'fgd-1': '#FFFFFF',
'fgd-2': '#F7F7F7',
'fgd-3': '#E7E7E7',
'fgd-4': '#A0AFB1',
},
'mango-theme': {
yellow: '#F2C94C',
red: '#E54033',
green: '#AFD803',
'bkg-1': '#141026',
'bkg-2': '#1D1832',
'bkg-3': '#262337',
'fgd-1': '#F0EDFF',
'fgd-2': '#FCFCFF',
'fgd-3': '#B9B5CE',
'fgd-4': '#706C81',
},
'th-bkg-1': 'var(--bkg-1)',
'th-bkg-2': 'var(--bkg-2)',
'th-bkg-3': 'var(--bkg-3)',
'th-fgd-1': 'var(--fgd-1)',
'th-fgd-2': 'var(--fgd-2)',
'th-fgd-3': 'var(--fgd-3)',
'th-fgd-4': 'var(--fgd-4)',
'th-primary': 'var(--primary)',
'th-red': 'var(--red)',
'th-green': 'var(--green)',
},
},
},

329
yarn.lock
View File

@ -890,6 +890,10 @@
exec-sh "^0.3.2"
minimist "^1.2.0"
"@csstools/convert-colors@^1.4.0":
version "1.4.0"
resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
"@ctrl/tinycolor@^3.4.0":
version "3.4.0"
resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz#c3c5ae543c897caa9c2a68630bed355be5f9990f"
@ -2017,6 +2021,18 @@ autoprefixer@^10.2.5:
normalize-range "^0.1.2"
postcss-value-parser "^4.1.0"
autoprefixer@^9.6.1:
version "9.8.6"
resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
dependencies:
browserslist "^4.12.0"
caniuse-lite "^1.0.30001109"
colorette "^1.2.1"
normalize-range "^0.1.2"
num2fraction "^1.2.2"
postcss "^7.0.32"
postcss-value-parser "^4.1.0"
aws-sign2@~0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@ -2297,7 +2313,7 @@ browserslist@4.16.1:
escalade "^3.1.1"
node-releases "^1.1.69"
browserslist@^4.14.5, browserslist@^4.16.3:
browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.16.3, browserslist@^4.6.4:
version "4.16.3"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.3.tgz#340aa46940d7db878748567c5dea24a48ddf3717"
dependencies:
@ -2418,6 +2434,10 @@ camelcase@^6.0.0, camelcase@^6.2.0:
version "6.2.0"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109:
version "1.0.30001208"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001208.tgz#a999014a35cebd4f98c405930a057a0d75352eb9"
caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001179, caniuse-lite@^1.0.30001181, caniuse-lite@^1.0.30001196:
version "1.0.30001204"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001204.tgz#256c85709a348ec4d175e847a3b515c66e79f2aa"
@ -2800,6 +2820,25 @@ crypto-hash@^1.2.2:
version "1.3.0"
resolved "https://registry.yarnpkg.com/crypto-hash/-/crypto-hash-1.3.0.tgz#b402cb08f4529e9f4f09346c3e275942f845e247"
css-blank-pseudo@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz#dfdefd3254bf8a82027993674ccf35483bfcb3c5"
dependencies:
postcss "^7.0.5"
css-has-pseudo@^0.10.0:
version "0.10.0"
resolved "https://registry.yarnpkg.com/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz#3c642ab34ca242c59c41a125df9105841f6966ee"
dependencies:
postcss "^7.0.6"
postcss-selector-parser "^5.0.0-rc.4"
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"
dependencies:
postcss "^7.0.5"
css-select-base-adapter@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
@ -2852,6 +2891,14 @@ css.escape@1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
cssdb@^4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0"
cssesc@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-2.0.0.tgz#3b13bd1bb1cb36e1bcb5a4dcd27f54c5dcb35703"
cssesc@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@ -3673,6 +3720,10 @@ flatted@^3.1.0:
version "3.1.1"
resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.1.1.tgz#c4b489e80096d9df1dfc97c79871aea7c617c469"
flatten@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
for-in@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@ -5068,6 +5119,10 @@ locate-path@^6.0.0:
dependencies:
p-locate "^5.0.0"
lodash._reinterpolate@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
lodash.assignin@^4.0.9:
version "4.2.0"
resolved "https://registry.yarnpkg.com/lodash.assignin/-/lodash.assignin-4.2.0.tgz#ba8df5fb841eb0a3e8044232b0e263a8dc6a28a2"
@ -5128,6 +5183,19 @@ lodash.sortby@^4.7.0:
version "4.7.0"
resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
lodash.template@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
dependencies:
lodash._reinterpolate "^3.0.0"
lodash.templatesettings "^4.0.0"
lodash.templatesettings@^4.0.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33"
dependencies:
lodash._reinterpolate "^3.0.0"
lodash.throttle@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
@ -5584,6 +5652,10 @@ null-loader@^4.0.1:
loader-utils "^2.0.0"
schema-utils "^3.0.0"
num2fraction@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
nwsapi@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
@ -5910,6 +5982,109 @@ posix-character-classes@^0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
postcss-attribute-case-insensitive@^4.0.1:
version "4.0.2"
resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.2.tgz#d93e46b504589e94ac7277b0463226c68041a880"
dependencies:
postcss "^7.0.2"
postcss-selector-parser "^6.0.2"
postcss-color-functional-notation@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz#5efd37a88fbabeb00a2966d1e53d98ced93f74e0"
dependencies:
postcss "^7.0.2"
postcss-values-parser "^2.0.0"
postcss-color-gray@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/postcss-color-gray/-/postcss-color-gray-5.0.0.tgz#532a31eb909f8da898ceffe296fdc1f864be8547"
dependencies:
"@csstools/convert-colors" "^1.4.0"
postcss "^7.0.5"
postcss-values-parser "^2.0.0"
postcss-color-hex-alpha@^5.0.3:
version "5.0.3"
resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-5.0.3.tgz#a8d9ca4c39d497c9661e374b9c51899ef0f87388"
dependencies:
postcss "^7.0.14"
postcss-values-parser "^2.0.1"
postcss-color-mod-function@^3.0.3:
version "3.0.3"
resolved "https://registry.yarnpkg.com/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz#816ba145ac11cc3cb6baa905a75a49f903e4d31d"
dependencies:
"@csstools/convert-colors" "^1.4.0"
postcss "^7.0.2"
postcss-values-parser "^2.0.0"
postcss-color-rebeccapurple@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-4.0.1.tgz#c7a89be872bb74e45b1e3022bfe5748823e6de77"
dependencies:
postcss "^7.0.2"
postcss-values-parser "^2.0.0"
postcss-custom-media@^7.0.8:
version "7.0.8"
resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz#fffd13ffeffad73621be5f387076a28b00294e0c"
dependencies:
postcss "^7.0.14"
postcss-custom-properties@^8.0.11:
version "8.0.11"
resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-8.0.11.tgz#2d61772d6e92f22f5e0d52602df8fae46fa30d97"
dependencies:
postcss "^7.0.17"
postcss-values-parser "^2.0.1"
postcss-custom-selectors@^5.1.2:
version "5.1.2"
resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-5.1.2.tgz#64858c6eb2ecff2fb41d0b28c9dd7b3db4de7fba"
dependencies:
postcss "^7.0.2"
postcss-selector-parser "^5.0.0-rc.3"
postcss-dir-pseudo-class@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-5.0.0.tgz#6e3a4177d0edb3abcc85fdb6fbb1c26dabaeaba2"
dependencies:
postcss "^7.0.2"
postcss-selector-parser "^5.0.0-rc.3"
postcss-double-position-gradients@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/postcss-double-position-gradients/-/postcss-double-position-gradients-1.0.0.tgz#fc927d52fddc896cb3a2812ebc5df147e110522e"
dependencies:
postcss "^7.0.5"
postcss-values-parser "^2.0.0"
postcss-env-function@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/postcss-env-function/-/postcss-env-function-2.0.2.tgz#0f3e3d3c57f094a92c2baf4b6241f0b0da5365d7"
dependencies:
postcss "^7.0.2"
postcss-values-parser "^2.0.0"
postcss-focus-visible@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/postcss-focus-visible/-/postcss-focus-visible-4.0.0.tgz#477d107113ade6024b14128317ade2bd1e17046e"
dependencies:
postcss "^7.0.2"
postcss-focus-within@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/postcss-focus-within/-/postcss-focus-within-3.0.0.tgz#763b8788596cee9b874c999201cdde80659ef680"
dependencies:
postcss "^7.0.2"
postcss-font-variant@^4.0.0:
version "4.0.1"
resolved "https://registry.yarnpkg.com/postcss-font-variant/-/postcss-font-variant-4.0.1.tgz#42d4c0ab30894f60f98b17561eb5c0321f502641"
dependencies:
postcss "^7.0.2"
postcss-functions@^3:
version "3.0.0"
resolved "https://registry.yarnpkg.com/postcss-functions/-/postcss-functions-3.0.0.tgz#0e94d01444700a481de20de4d55fb2640564250e"
@ -5919,6 +6094,26 @@ postcss-functions@^3:
postcss "^6.0.9"
postcss-value-parser "^3.3.0"
postcss-gap-properties@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz#431c192ab3ed96a3c3d09f2ff615960f902c1715"
dependencies:
postcss "^7.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"
dependencies:
postcss "^7.0.2"
postcss-values-parser "^2.0.0"
postcss-initial@^3.0.0:
version "3.0.2"
resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-3.0.2.tgz#f018563694b3c16ae8eaabe3c585ac6319637b2d"
dependencies:
lodash.template "^4.5.0"
postcss "^7.0.2"
postcss-js@^3.0.3:
version "3.0.3"
resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-3.0.3.tgz#2f0bd370a2e8599d45439f6970403b5873abda33"
@ -5926,12 +6121,134 @@ postcss-js@^3.0.3:
camelcase-css "^2.0.1"
postcss "^8.1.6"
postcss-lab-function@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz#bb51a6856cd12289ab4ae20db1e3821ef13d7d2e"
dependencies:
"@csstools/convert-colors" "^1.4.0"
postcss "^7.0.2"
postcss-values-parser "^2.0.0"
postcss-logical@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/postcss-logical/-/postcss-logical-3.0.0.tgz#2495d0f8b82e9f262725f75f9401b34e7b45d5b5"
dependencies:
postcss "^7.0.2"
postcss-media-minmax@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-4.0.0.tgz#b75bb6cbc217c8ac49433e12f22048814a4f5ed5"
dependencies:
postcss "^7.0.2"
postcss-nested@^5.0.5:
version "5.0.5"
resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.5.tgz#f0a107d33a9fab11d7637205f5321e27223e3603"
dependencies:
postcss-selector-parser "^6.0.4"
postcss-nesting@^7.0.0:
version "7.0.1"
resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.1.tgz#b50ad7b7f0173e5b5e3880c3501344703e04c052"
dependencies:
postcss "^7.0.2"
postcss-overflow-shorthand@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz#31ecf350e9c6f6ddc250a78f0c3e111f32dd4c30"
dependencies:
postcss "^7.0.2"
postcss-page-break@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/postcss-page-break/-/postcss-page-break-2.0.0.tgz#add52d0e0a528cabe6afee8b46e2abb277df46bf"
dependencies:
postcss "^7.0.2"
postcss-place@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/postcss-place/-/postcss-place-4.0.1.tgz#e9f39d33d2dc584e46ee1db45adb77ca9d1dcc62"
dependencies:
postcss "^7.0.2"
postcss-values-parser "^2.0.0"
postcss-preset-env@^6.7.0:
version "6.7.0"
resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-6.7.0.tgz#c34ddacf8f902383b35ad1e030f178f4cdf118a5"
dependencies:
autoprefixer "^9.6.1"
browserslist "^4.6.4"
caniuse-lite "^1.0.30000981"
css-blank-pseudo "^0.1.4"
css-has-pseudo "^0.10.0"
css-prefers-color-scheme "^3.1.1"
cssdb "^4.4.0"
postcss "^7.0.17"
postcss-attribute-case-insensitive "^4.0.1"
postcss-color-functional-notation "^2.0.1"
postcss-color-gray "^5.0.0"
postcss-color-hex-alpha "^5.0.3"
postcss-color-mod-function "^3.0.3"
postcss-color-rebeccapurple "^4.0.1"
postcss-custom-media "^7.0.8"
postcss-custom-properties "^8.0.11"
postcss-custom-selectors "^5.1.2"
postcss-dir-pseudo-class "^5.0.0"
postcss-double-position-gradients "^1.0.0"
postcss-env-function "^2.0.2"
postcss-focus-visible "^4.0.0"
postcss-focus-within "^3.0.0"
postcss-font-variant "^4.0.0"
postcss-gap-properties "^2.0.0"
postcss-image-set-function "^3.0.1"
postcss-initial "^3.0.0"
postcss-lab-function "^2.0.1"
postcss-logical "^3.0.0"
postcss-media-minmax "^4.0.0"
postcss-nesting "^7.0.0"
postcss-overflow-shorthand "^2.0.0"
postcss-page-break "^2.0.0"
postcss-place "^4.0.1"
postcss-pseudo-class-any-link "^6.0.0"
postcss-replace-overflow-wrap "^3.0.0"
postcss-selector-matches "^4.0.0"
postcss-selector-not "^4.0.0"
postcss-pseudo-class-any-link@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-6.0.0.tgz#2ed3eed393b3702879dec4a87032b210daeb04d1"
dependencies:
postcss "^7.0.2"
postcss-selector-parser "^5.0.0-rc.3"
postcss-replace-overflow-wrap@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz#61b360ffdaedca84c7c918d2b0f0d0ea559ab01c"
dependencies:
postcss "^7.0.2"
postcss-selector-matches@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz#71c8248f917ba2cc93037c9637ee09c64436fcff"
dependencies:
balanced-match "^1.0.0"
postcss "^7.0.2"
postcss-selector-not@^4.0.0:
version "4.0.1"
resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-4.0.1.tgz#263016eef1cf219e0ade9a913780fc1f48204cbf"
dependencies:
balanced-match "^1.0.0"
postcss "^7.0.2"
postcss-selector-parser@^5.0.0-rc.3, postcss-selector-parser@^5.0.0-rc.4:
version "5.0.0"
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz#249044356697b33b64f1a8f7c80922dddee7195c"
dependencies:
cssesc "^2.0.0"
indexes-of "^1.0.1"
uniq "^1.0.1"
postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
version "6.0.4"
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz#56075a1380a04604c38b063ea7767a129af5c2b3"
@ -5949,6 +6266,14 @@ postcss-value-parser@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
dependencies:
flatten "^1.0.2"
indexes-of "^1.0.1"
uniq "^1.0.1"
postcss@8.1.7:
version "8.1.7"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.1.7.tgz#ff6a82691bd861f3354fd9b17b2332f88171233f"
@ -5966,7 +6291,7 @@ postcss@^6.0.9:
source-map "^0.6.1"
supports-color "^5.4.0"
postcss@^7.0.32:
postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, 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"
dependencies: