granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Shuffled greyscale, fixed dark mode for select/input

Browse source
This commit is contained in:
Justin Edmund 2022-12-06 09:31:56 -08:00
parent 0660f98550
commit 3ee7c0b4b2
31 changed files with 148 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
components/AccountModal/index.scss
View file

@ -19,11 +19,11 @@
height: $height; height: $height;
&:focus { &:focus {
box-shadow: 0 0 0 2px $grey-10; box-shadow: 0 0 0 2px $grey-15;
} }
&[data-state='checked'] { &[data-state='checked'] {
background: $grey-10; background: $grey-15;
} }
} }
@ -60,7 +60,7 @@
&:not(.btn-disabled) { &:not(.btn-disabled) {
background: $grey-90; background: $grey-90;
color: $grey-40; color: $grey-50;
&:hover { &:hover {
background: $grey-80; background: $grey-80;
@ -89,7 +89,7 @@
gap: calc($unit / 2); gap: calc($unit / 2);
label { label {
color: $grey-10; color: $grey-15;
font-size: $font-regular; font-size: $font-regular;
} }

2
components/Alert/index.scss
View file

@ -42,7 +42,7 @@
&:not(.btn-disabled) { &:not(.btn-disabled) {
background: $grey-90; background: $grey-90;
color: $grey-40; color: $grey-50;
&:hover { &:hover {
background: $grey-80; background: $grey-80;

2
components/AxSelect/index.scss
View file

@ -34,7 +34,7 @@
background-color: $grey-90; background-color: $grey-90;
border-radius: 6px; border-radius: 6px;
box-sizing: border-box; box-sizing: border-box;
color: $grey-10; color: $grey-15;
height: $unit * 6; height: $unit * 6;
display: block; display: block;
font-size: $font-regular; font-size: $font-regular;

16
components/Button/index.scss
View file

@ -3,7 +3,7 @@
background: transparent; background: transparent;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
color: $grey-50; color: $grey-55;
display: inline-flex; display: inline-flex;
font-size: $font-button; font-size: $font-button;
font-weight: $normal; font-weight: $normal;
@ -13,15 +13,15 @@
&:hover { &:hover {
background: $grey-100; background: $grey-100;
cursor: pointer; cursor: pointer;
color: $grey-10; color: $grey-15;
.icon svg { .icon svg {
fill: $grey-10; fill: $grey-15;
} }
.icon.stroke svg { .icon.stroke svg {
fill: none; fill: none;
stroke: $grey-10; stroke: $grey-15;
} }
} }
@ -77,7 +77,7 @@
margin-top: 2px; margin-top: 2px;
svg { svg {
fill: $grey-50; fill: $grey-55;
height: 12px; height: 12px;
width: 12px; width: 12px;
} }
@ -90,7 +90,7 @@
&.stroke svg { &.stroke svg {
fill: none; fill: none;
stroke: $grey-50; stroke: $grey-55;
} }
&.settings svg { &.settings svg {
@ -143,11 +143,11 @@
&.null { &.null {
background: $grey-90; background: $grey-90;
color: $grey-50; color: $grey-55;
&:hover { &:hover {
background: $grey-70; background: $grey-70;
color: $grey-10; color: $grey-15;
} }
} }

2
components/CharLimitedFieldset/index.scss
View file

@ -17,7 +17,7 @@
} }
.Counter { .Counter {
color: $grey-50; color: $grey-55;
font-weight: $bold; font-weight: $bold;
line-height: 42px; line-height: 42px;
} }

4
components/CharacterConflictModal/index.scss
View file

@ -8,7 +8,7 @@
} }
.arrow { .arrow {
color: $grey-50; color: $grey-55;
font-size: 4rem; font-size: 4rem;
text-align: center; text-align: center;
} }
@ -52,7 +52,7 @@
&:not(.btn-disabled) { &:not(.btn-disabled) {
background: $grey-90; background: $grey-90;
color: $grey-40; color: $grey-50;
&:hover { &:hover {
background: $grey-80; background: $grey-80;

4
components/ElementToggle/index.scss
View file

@ -12,7 +12,7 @@
background: $grey-100; background: $grey-100;
border: none; border: none;
border-radius: 18px; border-radius: 18px;
color: $grey-40; color: $grey-50;
flex-grow: 1; flex-grow: 1;
font-size: $font-regular; font-size: $font-regular;
padding: ($unit) $unit * 2; padding: ($unit) $unit * 2;
@ -29,7 +29,7 @@
&:hover, &:hover,
&[data-state='on'] { &[data-state='on'] {
background: $grey-80; background: $grey-80;
color: $grey-10; color: $grey-15;
&.fire { &.fire {
background: $fire-bg-20; background: $fire-bg-20;

2
components/FilterBar/index.scss
View file

@ -31,7 +31,7 @@
// background-position-y: center; // background-position-y: center;
// background-position-x: 95%; // background-position-x: 95%;
// background-size: $unit * 1.5; // background-size: $unit * 1.5;
color: $grey-50; color: $grey-55;
font-size: $font-small; font-size: $font-small;
margin: 0; margin: 0;
max-width: 200px; max-width: 200px;

2
components/GridRep/index.scss
View file

@ -109,7 +109,7 @@
.raid, .raid,
.user, .user,
time { time {
color: $grey-50; color: $grey-55;
font-size: $font-small; font-size: $font-small;
} }

8
components/HeaderMenu/index.scss
View file

@ -9,16 +9,16 @@
} }
.MenuItem { .MenuItem {
color: $grey-40; color: $grey-50;
font-weight: $normal; font-weight: $normal;
&:hover:not(.disabled) { &:hover:not(.disabled) {
background: $grey-95; background: $grey-95;
color: $grey-10; color: $grey-15;
cursor: pointer; cursor: pointer;
a { a {
color: $grey-10; color: $grey-15;
} }
} }
@ -95,7 +95,7 @@
} }
a { a {
color: $grey-40; color: $grey-50;
} }
& > a, & > a,

3
components/JobDropdown/index.scss
View file

@ -0,0 +1,3 @@
.Job.SelectTrigger {
margin-bottom: $unit;
}

38
components/JobDropdown/index.tsx
View file

@ -2,6 +2,10 @@ import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { useSnapshot } from 'valtio' import { useSnapshot } from 'valtio'
import Select from '~components/Select'
import SelectItem from '~components/SelectItem'
import SelectGroup from '~components/SelectGroup'
import { appState } from '~utils/appState' import { appState } from '~utils/appState'
import { jobGroups } from '~utils/jobGroups' import { jobGroups } from '~utils/jobGroups'
@ -26,6 +30,7 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
const { party } = useSnapshot(appState) const { party } = useSnapshot(appState)
// Set up local states for storing jobs // Set up local states for storing jobs
const [open, setOpen] = useState(false)
const [currentJob, setCurrentJob] = useState<Job>() const [currentJob, setCurrentJob] = useState<Job>()
const [jobs, setJobs] = useState<Job[]>() const [jobs, setJobs] = useState<Job[]>()
const [sortedJobs, setSortedJobs] = useState<GroupedJob>() const [sortedJobs, setSortedJobs] = useState<GroupedJob>()
@ -58,10 +63,14 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
} }
}, [appState, props.currentJob]) }, [appState, props.currentJob])
function openJobSelect() {
setOpen(!open)
}
// Enable changing select value // Enable changing select value
function handleChange(event: React.ChangeEvent<HTMLSelectElement>) { function handleChange(value: string) {
if (jobs) { if (jobs) {
const job = jobs.find((job) => job.id === event.target.value) const job = jobs.find((job) => job.id === value)
if (props.onChange) props.onChange(job) if (props.onChange) props.onChange(job)
setCurrentJob(job) setCurrentJob(job)
} }
@ -76,36 +85,37 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
.sort((a, b) => a.order - b.order) .sort((a, b) => a.order - b.order)
.map((item, i) => { .map((item, i) => {
return ( return (
<option key={i} value={item.id}> <SelectItem key={i} value={item.id}>
{item.name[locale]} {item.name[locale]}
</option> </SelectItem>
) )
}) })
const groupName = jobGroups.find((g) => g.slug === group)?.name[locale] const groupName = jobGroups.find((g) => g.slug === group)?.name[locale]
return ( return (
<optgroup key={group} label={groupName}> <SelectGroup key={group} label={groupName} separator={false}>
{options} {options}
</optgroup> </SelectGroup>
) )
} }
return ( return (
<select <Select
key={currentJob ? currentJob.id : -1} trigger={'Select a class...'}
value={currentJob ? currentJob.id : -1} placeholder={'Select a class...'}
onBlur={props.onBlur} open={open}
onClick={openJobSelect}
onChange={handleChange} onChange={handleChange}
ref={ref} triggerClass="Job"
> >
<option key="no-job" value={-1}> <SelectItem key={-1} value="no-job">
No class No class
</option> </SelectItem>
{sortedJobs {sortedJobs
? Object.keys(sortedJobs).map((x) => renderJobGroup(x)) ? Object.keys(sortedJobs).map((x) => renderJobGroup(x))
: ''} : ''}
</select> </Select>
) )
} }
) )

2
components/JobSection/index.scss
View file

@ -28,7 +28,7 @@
} }
.JobImage { .JobImage {
$height: 249px; $height: 252px;
$width: 447px; $width: 447px;
background: url('/images/background_a.jpg'); background: url('/images/background_a.jpg');

8
components/JobSkillItem/index.scss
View file

@ -44,7 +44,11 @@
} }
} }
p.placeholder { p {
color: var(--text-secondary); color: var(--text-primary);
&.placeholder {
color: var(--text-secondary);
}
} }
} }

2
components/JobSkillResult/index.scss
View file

@ -23,7 +23,7 @@
.skill.pill { .skill.pill {
background: $grey-90; background: $grey-90;
border-radius: $unit * 2; border-radius: $unit * 2;
color: $grey-10; color: $grey-15;
display: inline; display: inline;
font-size: $font-tiny; font-size: $font-tiny;
font-weight: $medium; font-weight: $medium;

2
components/LoginModal/index.scss
View file

@ -17,7 +17,7 @@
&:not(.btn-disabled) { &:not(.btn-disabled) {
background: $grey-90; background: $grey-90;
color: $grey-40; color: $grey-50;
&:hover { &:hover {
background: $grey-80; background: $grey-80;

3
components/RaidDropdown/index.tsx
View file

@ -4,7 +4,6 @@ import { useRouter } from 'next/router'
import Select from '~components/Select' import Select from '~components/Select'
import SelectItem from '~components/SelectItem' import SelectItem from '~components/SelectItem'
import SelectGroup from '~components/SelectGroup' import SelectGroup from '~components/SelectGroup'
import { SelectSeparator } from '@radix-ui/react-select'
import api from '~utils/api' import api from '~utils/api'
import { appState } from '~utils/appState' import { appState } from '~utils/appState'
@ -131,7 +130,7 @@ const RaidDropdown = React.forwardRef<HTMLSelectElement, Props>(
return ( return (
<Select <Select
trigger={'Select a raid...'} trigger={'Select a raid...'}
placeholder={'Select a raid'} placeholder={'Select a raid...'}
open={open} open={open}
onClick={openRaidSelect} onClick={openRaidSelect}
onChange={handleChange} onChange={handleChange}

4
components/SearchFilter/index.scss
View file

@ -3,7 +3,7 @@
background: $grey-90; background: $grey-90;
border: none; border: none;
border-radius: $unit * 2; border-radius: $unit * 2;
color: $grey-40; color: $grey-50;
display: flex; display: flex;
gap: calc($unit / 2); gap: calc($unit / 2);
flex-direction: row; flex-direction: row;
@ -11,7 +11,7 @@
&:hover { &:hover {
background: $grey-80; background: $grey-80;
color: $grey-10; color: $grey-15;
cursor: pointer; cursor: pointer;
} }

4
components/SearchFilterCheckboxItem/index.scss
View file

@ -1,7 +1,7 @@
.Item { .Item {
align-items: center; align-items: center;
border-radius: calc($unit / 2); border-radius: calc($unit / 2);
color: $grey-40; color: $grey-50;
font-size: $font-regular; font-size: $font-regular;
line-height: 1.2; line-height: 1.2;
min-width: 100px; min-width: 100px;
@ -18,7 +18,7 @@
background: $grey-90; background: $grey-90;
svg { svg {
fill: $grey-50; fill: $grey-55;
} }
} }

2
components/SearchModal/index.scss
View file

@ -62,7 +62,7 @@
h5.total { h5.total {
font-size: $font-regular; font-size: $font-regular;
font-weight: $normal; font-weight: $normal;
color: $grey-40; color: $grey-50;
padding: calc($unit / 2) ($unit * 1.5); padding: calc($unit / 2) ($unit * 1.5);
} }

2
components/Segment/index.scss
View file

@ -1,5 +1,5 @@
.Segment { .Segment {
color: $grey-50; color: $grey-55;
cursor: pointer; cursor: pointer;
font-size: 1.4rem; font-size: 1.4rem;
font-weight: $normal; font-weight: $normal;

15
components/Select/index.scss
View file

@ -33,20 +33,25 @@
} }
.Select { .Select {
background: var(--card-bg); background: var(--select-bg);
border-radius: $input-corner; border-radius: $input-corner;
border: $hover-stroke; border: $hover-stroke;
box-shadow: $hover-shadow; box-shadow: $hover-shadow;
padding: 0 $unit; padding: 0 $unit;
// position: relative; z-index: 40;
// max-height: 350px !important;
// top: -800px;
z-index: 99999;
.Scroll.Up, .Scroll.Up,
.Scroll.Down { .Scroll.Down {
padding: $unit 0; padding: $unit 0;
text-align: center; text-align: center;
&:hover svg {
fill: var(--icon-secondary-hover);
}
svg {
fill: var(--icon-secondary);
}
} }
.Scroll.Up { .Scroll.Up {

4
components/Select/index.tsx
View file

@ -1,5 +1,6 @@
import React from 'react' import React from 'react'
import * as RadixSelect from '@radix-ui/react-select' import * as RadixSelect from '@radix-ui/react-select'
import classNames from 'classnames'
import ArrowIcon from '~public/icons/Arrow.svg' import ArrowIcon from '~public/icons/Arrow.svg'
@ -13,6 +14,7 @@ interface Props {
children?: React.ReactNode children?: React.ReactNode
onClick?: () => void onClick?: () => void
onChange?: (value: string) => void onChange?: (value: string) => void
triggerClass?: string
} }
const Select = React.forwardRef<HTMLSelectElement, Props>(function useFieldSet( const Select = React.forwardRef<HTMLSelectElement, Props>(function useFieldSet(
@ -22,7 +24,7 @@ const Select = React.forwardRef<HTMLSelectElement, Props>(function useFieldSet(
return ( return (
<RadixSelect.Root onValueChange={props.onChange}> <RadixSelect.Root onValueChange={props.onChange}>
<RadixSelect.Trigger <RadixSelect.Trigger
className="SelectTrigger" className={classNames('SelectTrigger', props.triggerClass)}
placeholder={props.placeholder} placeholder={props.placeholder}
> >
<RadixSelect.Value placeholder={props.placeholder} /> <RadixSelect.Value placeholder={props.placeholder} />

2
components/SelectGroup/index.scss
View file

@ -15,7 +15,7 @@
} }
.Separator { .Separator {
background: var(--item-bg-hover); background: var(--select-separator);
border-radius: 1px; border-radius: 1px;
display: block; display: block;
flex-grow: 1; flex-grow: 1;

13
components/SelectItem/index.scss
View file

@ -1,11 +1,22 @@
.SelectItem { .SelectItem {
border-radius: $item-corner; border-radius: $item-corner;
border: 2px solid transparent;
color: var(--text-primary); color: var(--text-primary);
font-size: $font-regular; font-size: $font-regular;
padding: ($unit * 1.5) $unit-2x; padding: ($unit * 1.5) $unit-2x;
&:hover { &:hover {
background-color: var(--item-bg-hover); background-color: var(--option-bg-hover);
cursor: pointer; cursor: pointer;
outline: none;
}
&:focus {
border: 2px solid $blue;
outline: none;
}
&:last-child {
margin-bottom: $unit;
} }
} }

4
components/SignupModal/index.scss
View file

@ -17,7 +17,7 @@
&:not(.btn-disabled) { &:not(.btn-disabled) {
background: $grey-90; background: $grey-90;
color: $grey-40; color: $grey-50;
&:hover { &:hover {
background: $grey-80; background: $grey-80;
@ -26,7 +26,7 @@
} }
.terms { .terms {
color: $grey-40; color: $grey-50;
font-size: $font-small; font-size: $font-small;
line-height: 1.2; line-height: 1.2;
margin-top: $unit; margin-top: $unit;

2
components/SummonGrid/index.scss
View file

@ -5,7 +5,7 @@
justify-content: center; justify-content: center;
& .Label { & .Label {
color: $grey-50; color: $grey-55;
font-size: $font-tiny; font-size: $font-tiny;
font-weight: $medium; font-weight: $medium;
margin-bottom: $unit; margin-bottom: $unit;

4
components/WeaponModal/index.scss
View file

@ -10,7 +10,7 @@
gap: calc($unit / 2); gap: calc($unit / 2);
h3 { h3 {
color: $grey-50; color: $grey-55;
font-size: $font-small; font-size: $font-small;
margin-bottom: $unit; margin-bottom: $unit;
} }
@ -33,7 +33,7 @@
&:not(.btn-disabled) { &:not(.btn-disabled) {
background: $grey-90; background: $grey-90;
color: $grey-40; color: $grey-50;
&:hover { &:hover {
background: $grey-80; background: $grey-80;

10
styles/globals.scss
View file

@ -69,7 +69,7 @@ h1,
h2, h2,
h3, h3,
p { p {
color: $grey-10; color: $grey-15;
} }
h1 { h1 {
@ -88,7 +88,7 @@ select {
background-size: $unit * 1.5; background-size: $unit * 1.5;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
color: $grey-10; color: $grey-15;
margin-bottom: $unit; margin-bottom: $unit;
font-size: $font-regular; font-size: $font-regular;
padding: 0 ($unit * 2); padding: 0 ($unit * 2);
@ -156,7 +156,7 @@ select {
gap: $unit; gap: $unit;
p { p {
color: $grey-40; color: $grey-50;
font-size: $font-small; font-size: $font-small;
line-height: 1.25; line-height: 1.25;
} }
@ -175,7 +175,7 @@ select {
} }
svg { svg {
fill: $grey-40; fill: $grey-50;
float: right; float: right;
height: 24px; height: 24px;
width: 24px; width: 24px;
@ -194,7 +194,7 @@ select {
gap: calc($unit / 2); gap: calc($unit / 2);
.SubTitle { .SubTitle {
color: $grey-50; color: $grey-55;
font-size: $font-small; font-size: $font-small;
font-weight: $medium; font-weight: $medium;
} }

10
styles/themes.scss
View file

@ -12,7 +12,9 @@
--input-bound-bg: #{$input--bound--bg--light}; --input-bound-bg: #{$input--bound--bg--light};
--input-bound-bg-hover: #{$input--bound--bg--light--hover}; --input-bound-bg-hover: #{$input--bound--bg--light--hover};
--item-bg-hover: #{$item--bg--light--hover}; --select-bg: #{$select--bg--light};
--select-separator: #{$select--separator--light};
--option-bg-hover: #{$option--bg--light--hover};
--text-primary: #{$text--primary--color--light}; --text-primary: #{$text--primary--color--light};
@ -61,14 +63,16 @@
--grid-rep-hover: #{$grid--rep--hover--dark}; --grid-rep-hover: #{$grid--rep--hover--dark};
--card-bg: #{$page--element--bg--dark}; --card-bg: #{$page--element--bg--dark};
--bar-bg: #{$grey-00}; --bar-bg: #{$grey-10};
--input-bg: #{$input--bg--dark}; --input-bg: #{$input--bg--dark};
--input-bg-hover: #{$input--bg--dark--hover}; --input-bg-hover: #{$input--bg--dark--hover};
--input-bound-bg: #{$input--bound--bg--dark}; --input-bound-bg: #{$input--bound--bg--dark};
--input-bound-bg-hover: #{$input--bound--bg--dark--hover}; --input-bound-bg-hover: #{$input--bound--bg--dark--hover};
--item-bg-hover: #{$item--bg--dark--hover}; --select-bg: #{$select--bg--dark};
--select-separator: #{$select--separator--dark};
--option-bg-hover: #{$option--bg--dark--hover};
--text-primary: #{$text--primary--color--dark}; --text-primary: #{$text--primary--color--dark};

62
styles/variables.scss
View file

@ -22,13 +22,15 @@ $unit-12x: $unit * 12;
$unit-20x: $unit * 20; $unit-20x: $unit * 20;
// Colors // Colors
$grey-00: #111; $grey-00: #000;
$grey-10: #191919; $grey-05: #0a0a0a;
$grey-15: #232323; $grey-10: #111;
$grey-20: #2f2f2f; $grey-15: #191919;
$grey-30: #444; $grey-25: #232323;
$grey-40: #777; $grey-30: #2f2f2f;
$grey-50: #888; $grey-40: #444;
$grey-50: #777;
$grey-55: #888;
$grey-60: #a9a9a9; $grey-60: #a9a9a9;
$grey-70: #c6c6c6; $grey-70: #c6c6c6;
$grey-80: #e9e9e9; $grey-80: #e9e9e9;
@ -103,36 +105,42 @@ $dark-bg-10: #d565fb;
$dark-bg-20: #f2cdff; $dark-bg-20: #f2cdff;
$page--bg--light: $grey-90; $page--bg--light: $grey-90;
$page--bg--dark: $grey-10; $page--bg--dark: $grey-15;
$page--hover--light: $grey-90; $page--hover--light: $grey-90;
$page--hover--dark: $grey-20; $page--hover--dark: $grey-30;
$page--element--bg--light: $grey-70; $page--element--bg--light: $grey-70;
$page--element--bg--dark: $grey-30; $page--element--bg--dark: $grey-40;
// Color Definitions: Input
$input--bg--light: $grey-100; $input--bg--light: $grey-100;
$input--bg--light--hover: $grey-95; $input--bg--light--hover: $grey-95;
$input--bg--dark: $grey-20; $input--bg--dark: $grey-40;
$input--bg--dark--hover: $grey-15; $input--bg--dark--hover: $grey-30;
$input--bound--bg--light: $grey-90; $input--bound--bg--light: $grey-90;
$input--bound--bg--light--hover: $grey-80; $input--bound--bg--light--hover: $grey-80;
$input--bound--bg--dark: $grey-10; $input--bound--bg--dark: $grey-15;
$input--bound--bg--dark--hover: $grey-15; $input--bound--bg--dark--hover: $grey-25;
$item--bg--light--hover: $grey-90; $select--bg--light: $grey-100;
$item--bg--dark--hover: $grey-10; $select--bg--dark: $grey-10;
$select--separator--light: $grey-90;
$select--separator--dark: $grey-05;
$option--bg--light--hover: $grey-90;
$option--bg--dark--hover: $grey-00;
$grid--rep--hover--light: $grey-100; $grid--rep--hover--light: $grey-100;
$grid--rep--hover--dark: $grey-00; $grid--rep--hover--dark: $grey-10;
$grid--border--color--light: $grey-80; $grid--border--color--light: $grey-80;
$grid--border--color--dark: $grey-30; $grid--border--color--dark: $grey-40;
$switch--nub--bg--light: $grey-80; $switch--nub--bg--light: $grey-80;
$switch--nub--bg--dark: $grey-20; $switch--nub--bg--dark: $grey-30;
// Color Definitions: Additional Weapons
$extra--purple--bg--light: $purple-90; $extra--purple--bg--light: $purple-90;
$extra--purple--card--bg--light: $purple-80; $extra--purple--card--bg--light: $purple-80;
$extra--purple--primary--light: $purple-30; $extra--purple--primary--light: $purple-30;
@ -144,6 +152,7 @@ $extra--purple--primary--dark: $purple-00;
$extra--purple--secondary--dark: $purple-10; $extra--purple--secondary--dark: $purple-10;
$extra--purple--text--dark: $purple-00; $extra--purple--text--dark: $purple-00;
// Color Definitions: Subaura
$subaura--orange--bg--light: $orange-90; $subaura--orange--bg--light: $orange-90;
$subaura--orange--card--bg--light: $orange-80; $subaura--orange--card--bg--light: $orange-80;
$subaura--orange--primary--light: $orange-30; $subaura--orange--primary--light: $orange-30;
@ -155,22 +164,25 @@ $subaura--orange--primary--dark: $orange-00;
$subaura--orange--secondary--dark: $orange-10; $subaura--orange--secondary--dark: $orange-10;
$subaura--orange--text--dark: $orange-00; $subaura--orange--text--dark: $orange-00;
$text--primary--color--light: $grey-30; // Color Definitions: Text
$text--primary--color--light: $grey-40;
$text--primary--color--dark: $grey-90; $text--primary--color--dark: $grey-90;
$text--secondary--color--light: $grey-40; $text--secondary--color--light: $grey-50;
$text--secondary--hover--light: $grey-30; $text--secondary--hover--light: $grey-40;
$text--secondary--color--dark: $grey-40; $text--secondary--color--dark: $grey-50;
$text--secondary--hover--dark: $grey-70; $text--secondary--hover--dark: $grey-70;
// Color Definitions: Icon
$icon--secondary--color--light: $grey-70; $icon--secondary--color--light: $grey-70;
$icon--secondary--color--dark: $grey-40; $icon--secondary--color--dark: $grey-50;
$icon--secondary--hover--light: $grey-40; $icon--secondary--hover--light: $grey-50;
$icon--secondary--hover--dark: $grey-70; $icon--secondary--hover--dark: $grey-70;
$text--tertiary--color--light: $grey-60; $text--tertiary--color--light: $grey-60;
$text--tertiary--color--dark: $grey-60; $text--tertiary--color--dark: $grey-60;
// Font-weight
$normal: 400; $normal: 400;
$medium: 500; $medium: 500;
$bold: 600; $bold: 600;