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

add input theme colors

This commit is contained in:
saml33 2022-12-08 13:34:24 +11:00
parent 169f5ea079
commit 300f481ecf
12 changed files with 110 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/forms/DateRangePicker.tsx
View File

@ -34,7 +34,7 @@ const MangoDateRangePicker = ({
<div className="w-full">
<Label text={t('date-from')} />
<input
className="default-transition h-12 w-full rounded-md border border-th-bkg-4 bg-th-bkg-1 px-3 text-th-fgd-1 hover:border-th-fgd-4 focus:border-th-fgd-4 focus:outline-none"
className="default-transition h-12 w-full rounded-md border border-th-input-border bg-th-input-bkg px-3 text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
{...startDateInputProps}
placeholder="Start Date"
/>
@ -45,7 +45,7 @@ const MangoDateRangePicker = ({
<div className="w-full">
<Label text={t('date-to')} />
<input
className="default-transition h-12 w-full rounded-md border border-th-bkg-4 bg-th-bkg-1 px-3 text-th-fgd-1 hover:border-th-fgd-4 focus:border-th-fgd-4 focus:outline-none"
className="default-transition h-12 w-full rounded-md border border-th-input-border bg-th-input-bkg px-3 text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
{...endDateInputProps}
placeholder="End Date"
/>

8
components/forms/Input.tsx
View File

@ -41,11 +41,11 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
</div>
) : null}
<input
className={`${className} default-transition h-12 w-full flex-1 rounded-md border bg-th-bkg-1 px-3 text-base
className={`${className} default-transition h-12 w-full flex-1 rounded-md border bg-th-input-bkg px-3 text-base
text-th-fgd-1 ${
error ? 'border-th-down' : 'border-th-bkg-4'
} hover:border-th-fgd-4
focus:outline-none
error ? 'border-th-down' : 'border-th-input-border'
} focus:outline-none
md:hover:border-th-input-border-hover
${
disabled
? 'cursor-not-allowed bg-th-bkg-3 text-th-fgd-3 hover:border-th-fgd-4'

4
components/forms/MultiSelectDropdown.tsx
View File

@ -19,8 +19,8 @@ const MultiSelectDropdown = ({
{({ open }) => (
<div className="flex flex-col">
<Popover.Button
className={`default-transition h-12 rounded-md bg-th-bkg-1 px-3 text-th-fgd-1 ring-1 ring-inset ring-th-bkg-4 hover:ring-th-fgd-4 ${
open ? 'ring-th-fgd-4' : 'ring-th-bkg-4'
className={`default-transition h-12 rounded-md bg-th-input-bkg px-3 text-th-fgd-1 ring-1 ring-inset ring-th-input-border md:hover:ring-th-input-border-hover ${
open ? 'ring-th-input-border-hover' : 'ring-th-input-border'
}`}
>
<div className={`flex items-center justify-between`}>

2
components/forms/Select.tsx
View File

@ -27,7 +27,7 @@ const Select = ({
{({ open }) => (
<>
<Listbox.Button
className={`default-transition h-full w-full rounded-md bg-th-bkg-1 py-2.5 font-normal ring-1 ring-inset ring-th-bkg-4 hover:ring-th-fgd-4 focus:border-th-fgd-3 focus:outline-none`}
className={`default-transition h-full w-full rounded-md bg-th-input-bkg py-2.5 font-normal ring-1 ring-inset ring-th-input-border focus:border-th-input-border-hover focus:outline-none md:hover:ring-th-input-border-hover`}
>
<div
className={`flex items-center justify-between space-x-2 px-3 text-th-fgd-1`}

4
components/modals/BorrowModal.tsx
View File

@ -211,7 +211,7 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
value={tokenMax.toFixed()}
/>
</div>
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-bkg-4 bg-th-bkg-1">
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
<button
onClick={() => setShowTokenList(true)}
className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
@ -239,7 +239,7 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
allowNegative={false}
isNumericString={true}
decimalScale={bank?.mintDecimals || 6}
className="w-full rounded-lg rounded-l-none border border-th-bkg-4 bg-th-bkg-1 p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:outline-none"
className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
placeholder="0.00"
value={inputAmount}
onValueChange={(e: NumberFormatValues) =>

4
components/modals/DepositModal.tsx
View File

@ -247,7 +247,7 @@ function DepositModal({ isOpen, onClose, token }: ModalCombinedProps) {
).toFixed()}
/>
</div>
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-bkg-4 bg-th-bkg-1">
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
<button
onClick={() => setShowTokenList(true)}
className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
@ -275,7 +275,7 @@ function DepositModal({ isOpen, onClose, token }: ModalCombinedProps) {
allowNegative={false}
isNumericString={true}
decimalScale={bank?.mintDecimals || 6}
className="w-full rounded-lg rounded-l-none border border-th-bkg-4 bg-th-bkg-1 p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:outline-none"
className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
placeholder="0.00"
value={inputAmount}
onValueChange={(e: NumberFormatValues) => {

4
components/modals/RepayModal.tsx
View File

@ -216,7 +216,7 @@ function RepayModal({ isOpen, onClose, token }: ModalCombinedProps) {
).toFixed()}
/>
</div>
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-bkg-4 bg-th-bkg-1">
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
<button
onClick={() => setShowTokenList(true)}
className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
@ -243,7 +243,7 @@ function RepayModal({ isOpen, onClose, token }: ModalCombinedProps) {
allowNegative={false}
isNumericString={true}
decimalScale={bank?.mintDecimals || 6}
className="w-full rounded-lg rounded-l-none border border-th-bkg-4 bg-th-bkg-1 p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:outline-none"
className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
placeholder="0.00"
value={inputAmount}
onValueChange={(e: NumberFormatValues) => {

4
components/modals/WithdrawModal.tsx
View File

@ -209,7 +209,7 @@ function WithdrawModal({ isOpen, onClose, token }: ModalCombinedProps) {
value={tokenMax.toString()}
/>
</div>
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-bkg-4 bg-th-bkg-1">
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
<button
onClick={() => setShowTokenList(true)}
className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
@ -239,7 +239,7 @@ function WithdrawModal({ isOpen, onClose, token }: ModalCombinedProps) {
allowNegative={false}
isNumericString={true}
decimalScale={bank?.mintDecimals || 6}
className="w-full rounded-lg rounded-l-none border border-th-bkg-4 bg-th-bkg-1 p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:outline-none"
className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
placeholder="0.00"
value={inputAmount}
onValueChange={(e: NumberFormatValues) =>

14
components/swap/SwapForm.tsx
View File

@ -318,14 +318,14 @@ const SwapForm = () => {
</div>
</div>
<div className="mb-2 flex items-end justify-between">
<p className="text-th-fgd-3">{t('swap:pay')}</p>
<p className="text-base text-th-fgd-2">{t('swap:pay')}</p>
<MaxSwapAmount
useMargin={useMargin}
setAmountIn={(v) => setAmountInFormValue(v, true)}
/>
</div>
<div className="mb-3 grid grid-cols-2" id="swap-step-two">
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-bkg-4 bg-th-bkg-1">
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
<TokenSelect
bank={
inputBank || group?.banksMapByName.get(INPUT_TOKEN_DEFAULT)?.[0]
@ -343,7 +343,7 @@ const SwapForm = () => {
decimalScale={inputBank?.mintDecimals || 6}
name="amountIn"
id="amountIn"
className="w-full rounded-l-none rounded-r-lg border border-th-bkg-4 bg-th-bkg-1 p-3 text-right font-mono text-base font-bold text-th-fgd-1 focus:outline-none lg:text-lg xl:text-xl"
className="w-full rounded-l-none rounded-r-lg border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-base font-bold text-th-fgd-1 focus:outline-none lg:text-lg xl:text-xl"
placeholder="0.00"
value={amountInFormValue}
onValueChange={handleAmountInChange}
@ -366,9 +366,9 @@ const SwapForm = () => {
/>
</button>
</div>
<p className="mb-2 text-th-fgd-3">{t('swap:receive')}</p>
<p className="mb-2 text-base text-th-fgd-2">{t('swap:receive')}</p>
<div id="swap-step-three" className="mb-3 grid grid-cols-2">
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-bkg-4 bg-th-bkg-1">
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
<TokenSelect
bank={
outputBank ||
@ -378,7 +378,7 @@ const SwapForm = () => {
type="output"
/>
</div>
<div className="flex h-[54px] w-full items-center justify-end rounded-r-lg border border-th-bkg-4 text-right text-lg font-bold text-th-fgd-3 xl:text-xl">
<div className="flex h-[54px] w-full items-center justify-end rounded-r-lg border border-th-input-border text-right text-lg font-bold text-th-fgd-3 xl:text-xl">
{loadingSwapDetails ? (
<div className="w-full">
<SheenLoader className="flex flex-1 rounded-l-none">
@ -394,7 +394,7 @@ const SwapForm = () => {
decimalScale={outputBank?.mintDecimals || 6}
name="amountOut"
id="amountOut"
className="w-full rounded-l-none rounded-r-lg bg-th-bkg-1 p-3 text-right font-mono text-base font-bold text-th-fgd-1 focus:outline-none lg:text-lg xl:text-xl"
className="w-full rounded-l-none rounded-r-lg bg-th-input-bkg p-3 text-right font-mono text-base font-bold text-th-fgd-1 focus:outline-none lg:text-lg xl:text-xl"
placeholder="0.00"
value={amountOutFormValue}
onValueChange={handleAmountOutChange}

6
components/trade/AdvancedTradeForm.tsx
View File

@ -363,7 +363,7 @@ const AdvancedTradeForm = () => {
<div className="mb-2 mt-4 flex items-center justify-between">
<p className="text-xs text-th-fgd-3">{t('trade:limit-price')}</p>
</div>
<div className="default-transition flex items-center rounded-md border border-th-bkg-4 bg-th-bkg-1 p-2 text-xs font-bold text-th-fgd-1 md:hover:border-th-fgd-4 md:hover:bg-th-bkg-2 lg:text-base">
<div className="default-transition md:hover:border-input-border-hover flex items-center rounded-md border border-th-input-border bg-th-input-bkg p-2 text-xs font-bold text-th-fgd-1 lg:text-base">
{quoteLogoURI ? (
<Image
className="rounded-full"
@ -398,7 +398,7 @@ const AdvancedTradeForm = () => {
<p className="text-xs text-th-fgd-3">{t('trade:amount')}</p>
</div>
<div className="flex flex-col">
<div className="default-transition flex items-center rounded-md rounded-b-none border border-th-bkg-4 bg-th-bkg-1 p-2 text-xs font-bold text-th-fgd-1 md:hover:z-10 md:hover:border-th-fgd-4 md:hover:bg-th-bkg-2 lg:text-base">
<div className="default-transition flex items-center rounded-md rounded-b-none border border-th-input-border bg-th-input-bkg p-2 text-xs font-bold text-th-fgd-1 md:hover:z-10 md:hover:border-th-input-border-hover lg:text-base">
{baseLogoURI ? (
<Image
className="rounded-full"
@ -427,7 +427,7 @@ const AdvancedTradeForm = () => {
{baseSymbol}
</div>
</div>
<div className="default-transition -mt-[1px] flex items-center rounded-md rounded-t-none border border-th-bkg-4 bg-th-bkg-1 p-2 text-xs font-bold text-th-fgd-1 md:hover:border-th-fgd-4 md:hover:bg-th-bkg-2 lg:text-base">
<div className="default-transition -mt-[1px] flex items-center rounded-md rounded-t-none border border-th-input-border bg-th-input-bkg p-2 text-xs font-bold text-th-fgd-1 md:hover:border-th-input-border-hover lg:text-base">
{quoteLogoURI ? (
<Image
className="rounded-full"

56
styles/globals.css
View File

@ -99,6 +99,9 @@ th {
--fgd-3: theme('colors.light-theme.fgd-3');
--fgd-4: theme('colors.light-theme.fgd-4');
--button: theme('colors.light-theme.button.DEFAULT');
--input-bkg: theme('colors.light-theme.input.bkg');
--input-border: theme('colors.light-theme.input.border');
--input-border-hover: theme('colors.light-theme.input.borderDark');
--button-hover: theme('colors.light-theme.button.hover');
--error: theme('colors.light-theme.error');
--success: theme('colors.light-theme.success');
@ -126,6 +129,9 @@ th {
--fgd-4: theme('colors.dark-theme.fgd-4');
--button: theme('colors.dark-theme.button.DEFAULT');
--button-hover: theme('colors.dark-theme.button.hover');
--input-bkg: theme('colors.dark-theme.input.bkg');
--input-border: theme('colors.dark-theme.input.border');
--input-border-hover: theme('colors.dark-theme.input.borderDark');
--error: theme('colors.dark-theme.error');
--success: theme('colors.dark-theme.success');
--warning: theme('colors.dark-theme.warning');
@ -152,6 +158,9 @@ th {
--fgd-4: theme('colors.mango-classic-theme.fgd-4');
--button: theme('colors.mango-classic-theme.button.DEFAULT');
--button-hover: theme('colors.mango-classic-theme.button.hover');
--input-bkg: theme('colors.mango-classic-theme.input.bkg');
--input-border: theme('colors.mango-classic-theme.input.border');
--input-border-hover: theme('colors.mango-classic-theme.input.borderDark');
--error: theme('colors.mango-classic-theme.error');
--success: theme('colors.mango-classic-theme.success');
--warning: theme('colors.mango-classic-theme.warning');
@ -178,6 +187,9 @@ th {
--fgd-4: theme('colors.medium-theme.fgd-4');
--button: theme('colors.medium-theme.button.DEFAULT');
--button-hover: theme('colors.medium-theme.button.hover');
--input-bkg: theme('colors.medium-theme.input.bkg');
--input-border: theme('colors.medium-theme.input.border');
--input-border-hover: theme('colors.medium-theme.input.borderDark');
--error: theme('colors.medium-theme.error');
--success: theme('colors.medium-theme.success');
--warning: theme('colors.medium-theme.warning');
@ -204,6 +216,9 @@ th {
--fgd-4: theme('colors.high-contrast-theme.fgd-4');
--button: theme('colors.high-contrast-theme.button.DEFAULT');
--button-hover: theme('colors.high-contrast-theme.button.hover');
--input-bkg: theme('colors.high-contrast-theme.input.bkg');
--input-border: theme('colors.high-contrast-theme.input.border');
--input-border-hover: theme('colors.high-contrast-theme.input.borderDark');
--error: theme('colors.high-contrast-theme.error');
--success: theme('colors.high-contrast-theme.success');
--warning: theme('colors.high-contrast-theme.warning');
@ -230,6 +245,9 @@ th {
--fgd-4: theme('colors.blueberry-theme.fgd-4');
--button: theme('colors.blueberry-theme.button.DEFAULT');
--button-hover: theme('colors.blueberry-theme.button.hover');
--input-bkg: theme('colors.blueberry-theme.input.bkg');
--input-border: theme('colors.blueberry-theme.input.border');
--input-border-hover: theme('colors.blueberry-theme.input.borderDark');
--error: theme('colors.blueberry-theme.error');
--success: theme('colors.blueberry-theme.success');
--warning: theme('colors.blueberry-theme.warning');
@ -256,6 +274,9 @@ th {
--fgd-4: theme('colors.banana-theme.fgd-4');
--button: theme('colors.banana-theme.button.DEFAULT');
--button-hover: theme('colors.banana-theme.button.hover');
--input-bkg: theme('colors.banana-theme.input.bkg');
--input-border: theme('colors.banana-theme.input.border');
--input-border-hover: theme('colors.banana-theme.input.borderDark');
--error: theme('colors.banana-theme.error');
--success: theme('colors.banana-theme.success');
--warning: theme('colors.banana-theme.warning');
@ -282,6 +303,9 @@ th {
--fgd-4: theme('colors.olive-theme.fgd-4');
--button: theme('colors.olive-theme.button.DEFAULT');
--button-hover: theme('colors.olive-theme.button.hover');
--input-bkg: theme('colors.olive-theme.input.bkg');
--input-border: theme('colors.olive-theme.input.border');
--input-border-hover: theme('colors.olive-theme.input.borderDark');
--error: theme('colors.olive-theme.error');
--success: theme('colors.olive-theme.success');
--warning: theme('colors.olive-theme.warning');
@ -308,37 +332,14 @@ th {
--fgd-4: theme('colors.lychee-theme.fgd-4');
--button: theme('colors.lychee-theme.button.DEFAULT');
--button-hover: theme('colors.lychee-theme.button.hover');
--input-bkg: theme('colors.lychee-theme.input.bkg');
--input-border: theme('colors.lychee-theme.input.border');
--input-border-hover: theme('colors.lychee-theme.input.borderDark');
--error: theme('colors.lychee-theme.error');
--success: theme('colors.lychee-theme.success');
--warning: theme('colors.lychee-theme.warning');
}
/* [data-theme='Smoothy'] {
--active: theme('colors.smoothy-theme.active.DEFAULT');
--active-dark: theme('colors.smoothy-theme.active.dark');
--down: theme('colors.smoothy-theme.down.DEFAULT');
--down-dark: theme('colors.smoothy-theme.down.dark');
--down-muted: theme('colors.smoothy-theme.down.muted');
--up: theme('colors.smoothy-theme.up.DEFAULT');
--up-dark: theme('colors.smoothy-theme.up.dark');
--up-muted: theme('colors.smoothy-theme.up.muted');
--link: theme('colors.smoothy-theme.link.DEFAULT');
--link-hover: theme('colors.smoothy-theme.link.hover');
--bkg-1: theme('colors.smoothy-theme.bkg-1');
--bkg-2: theme('colors.smoothy-theme.bkg-2');
--bkg-3: theme('colors.smoothy-theme.bkg-3');
--bkg-4: theme('colors.smoothy-theme.bkg-4');
--fgd-1: theme('colors.smoothy-theme.fgd-1');
--fgd-2: theme('colors.smoothy-theme.fgd-2');
--fgd-3: theme('colors.smoothy-theme.fgd-3');
--fgd-4: theme('colors.smoothy-theme.fgd-4');
--button: theme('colors.smoothy-theme.button.DEFAULT');
--button-hover: theme('colors.smoothy-theme.button.hover');
--error: theme('colors.smoothy-theme.error');
--success: theme('colors.smoothy-theme.success');
--warning: theme('colors.smoothy-theme.warning');
} */
[data-theme='Avocado'] {
--active: theme('colors.avocado-theme.active.DEFAULT');
--active-dark: theme('colors.avocado-theme.active.dark');
@ -360,6 +361,9 @@ th {
--fgd-4: theme('colors.avocado-theme.fgd-4');
--button: theme('colors.avocado-theme.button.DEFAULT');
--button-hover: theme('colors.avocado-theme.button.hover');
--input-bkg: theme('colors.avocado-theme.input.bkg');
--input-border: theme('colors.avocado-theme.input.border');
--input-border-hover: theme('colors.avocado-theme.input.borderDark');
--error: theme('colors.avocado-theme.error');
--success: theme('colors.avocado-theme.success');
--warning: theme('colors.avocado-theme.warning');

56
tailwind.config.js
View File

@ -19,9 +19,6 @@ module.exports = {
},
// each color category in a theme has a single base color with the variations acheived by adjusting lightness (dark and hover variants) and lightness and saturation for muted variants
colors: {
'gradient-start': '#AFD803',
'gradient-mid': '#F2C94C',
'gradient-end': '#E54033',
'mango-classic-theme': {
active: {
DEFAULT: 'hsl(45, 86%, 62%)',
@ -31,6 +28,11 @@ module.exports = {
DEFAULT: 'hsl(269, 23%, 48%)',
hover: 'hsl(269, 23%, 43%)',
},
input: {
bkg: 'hsl(256, 18%, 10%)',
border: 'hsl(253, 19%, 41%)',
borderDark: 'hsl(253, 19%, 31%)',
},
link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 52%)' },
down: {
DEFAULT: 'hsl(4, 93%, 60%)',
@ -63,6 +65,11 @@ module.exports = {
DEFAULT: 'hsl(0, 0%, 84%)',
hover: 'hsl(0, 0%, 74%)',
},
input: {
bkg: 'hsl(0, 0%, 97%)',
border: 'hsl(0, 0%, 33%)',
borderDark: 'hsl(0, 0%, 23%)',
},
link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 52%)' },
down: {
DEFAULT: 'hsl(0, 39%, 58%)',
@ -95,6 +102,11 @@ module.exports = {
DEFAULT: 'hsl(269, 0%, 38%)',
hover: 'hsl(269, 0%, 33%)',
},
input: {
bkg: 'hsl(240, 6%, 5%)',
border: 'hsl(0, 0%, 32%)',
borderDark: 'hsl(0, 0%, 22%)',
},
link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 57%)' },
down: {
DEFAULT: 'hsl(0, 59%, 58%)',
@ -127,6 +139,11 @@ module.exports = {
DEFAULT: 'hsl(269, 0%, 43%)',
hover: 'hsl(269, 0%, 38%)',
},
input: {
bkg: 'hsl(240, 6%, 10%)',
border: 'hsl(0, 0%, 30%)',
borderDark: 'hsl(0, 0%, 20%)',
},
link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 57%)' },
down: {
DEFAULT: 'hsl(0, 59%, 58%)',
@ -159,6 +176,11 @@ module.exports = {
DEFAULT: 'hsl(62, 96%, 54%)',
hover: 'hsl(62, 96%, 49%)',
},
input: {
bkg: 'hsl(0, 0%, 0%)',
border: 'hsl(0, 0%, 65%)',
borderDark: 'hsl(0, 0%, 55%)',
},
link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 57%)' },
down: {
DEFAULT: 'hsl(0, 100%, 58%)',
@ -191,6 +213,11 @@ module.exports = {
DEFAULT: 'hsl(220, 91%, 44%)',
hover: 'hsl(220, 91%, 39%)',
},
input: {
bkg: 'hsl(222, 74%, 19%)',
border: 'hsl(220, 71%, 46%)',
borderDark: 'hsl(220, 71%, 36%)',
},
link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 57%)' },
down: {
DEFAULT: 'hsl(3, 59%, 56%)',
@ -223,6 +250,11 @@ module.exports = {
DEFAULT: 'hsl(51, 95%, 72%)',
hover: 'hsl(51, 95%, 68%)',
},
input: {
bkg: 'hsl(55, 90%, 88%)',
border: 'hsl(60, 10%, 24%)',
borderDark: 'hsl(60, 10%, 14%)',
},
link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 52%)' },
down: {
DEFAULT: 'hsl(0, 39%, 58%)',
@ -255,6 +287,11 @@ module.exports = {
DEFAULT: 'hsl(156, 55%, 26%)',
hover: 'hsl(156, 55%, 21%)',
},
input: {
bkg: 'hsl(156, 48%, 7%)',
border: 'hsl(120, 20%, 43%)',
borderDark: 'hsl(120, 20%, 33%)',
},
link: { DEFAULT: 'hsl(31, 100%, 57%)', hover: 'hsl(31, 100%, 42%)' },
down: {
DEFAULT: 'hsl(3, 59%, 56%)',
@ -287,6 +324,11 @@ module.exports = {
DEFAULT: 'hsl(51, 13%, 44%)',
hover: 'hsl(51, 13%, 39%)',
},
input: {
bkg: 'hsl(51, 16%, 17%)',
border: 'hsl(55, 17%, 41%)',
borderDark: 'hsl(55, 17%, 31%)',
},
link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 57%)' },
down: {
DEFAULT: 'hsl(3, 85%, 56%)',
@ -319,6 +361,11 @@ module.exports = {
DEFAULT: 'hsl(356, 61%, 80%)',
hover: 'hsl(356, 61%, 75%)',
},
input: {
bkg: 'hsl(356, 58%, 93%)',
border: 'hsl(357, 41%, 31%)',
borderDark: 'hsl(357, 41%, 21%)',
},
link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 52%)' },
down: {
DEFAULT: 'hsl(356, 61%, 48%)',
@ -366,6 +413,9 @@ module.exports = {
'th-button': 'var(--button)',
'th-button-hover': 'var(--button-hover)',
'th-warning': 'var(--warning)',
'th-input-bkg': 'var(--input-bkg)',
'th-input-border': 'var(--input-border)',
'th-input-border-hover': 'var(--input-border-hover)',
},
fontSize: {
xxs: '.65rem',