Draft: rough-ish draft of proposed color theme changes (#2067)

* color experimentation and troubleshooting

* create color scheme, assign colors, more ant overrides

* fun selection color

* Prettified Code!

* Correctly import opensans

* Prettified Code!

* Organize+standardize colors/names and update the app to use them

* Prettified Code!

* Use css var references instead of resolving value of vars in css files

* Prettified Code!

Co-authored-by: gingervitis <gingervitis@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
Co-authored-by: gabek <gabek@users.noreply.github.com>
This commit is contained in:
gingervitis
2022-08-29 23:17:12 -07:00
committed by GitHub
parent a0a28fa572
commit d5fa81f76e
32 changed files with 817 additions and 325 deletions

View File

@@ -1,6 +1,7 @@
.root {
position: relative;
display: grid;
padding: 20px;
}
.buttonsLogoTitleSection {
@@ -28,31 +29,31 @@
.titleSection {
display: flex;
flex-direction: column;
margin-left: 10px;
.title {
font-family: var(--theme-text-display-font-family);
color: var(--theme-color-palette-0);
font-size: 32px;
font-weight: bold;
color: black;
text-transform: uppercase;
line-height: 30px;
}
.subtitle {
font-size: 24px;
font-weight: 400;
line-height: 22px;
color: var(--theme-text-secondary);
font-size: 22px;
font-weight: 300;
line-height: 1.3;
color: var(--theme-color-background-header);
}
}
.tagList {
font-family: var(--theme-text-display-font-family);
color: var(--theme-text-primary);
color: var(--theme-color-palette-10);
span {
display: inline-block;
margin-right: 8px;
font-size: 14px;
font-weight: 300;
font-weight: 500;
}
}

View File

@@ -12,7 +12,6 @@
.contrast {
padding: 5px;
border-radius: 50%;
background-color: var(--color-owncast-gray-100);
svg {
width: clamp(2rem, 7vw, 40px);
height: clamp(2rem, 7vw, 40px);

View File

@@ -1,5 +1,10 @@
.root {
button {
border: none;
.ant-space {
.ant-space-item {
color: var(--theme-unknown-2);
}
}
}
}

View File

@@ -68,7 +68,7 @@ export default function UserDropdown({ username: defaultUsername }: Props) {
return (
<div className={`${s.root}`}>
<Dropdown overlay={menu} trigger={['click']}>
<Button icon={<UserOutlined style={{ marginRight: '.5rem' }} />}>
<Button type="primary" icon={<UserOutlined style={{ marginRight: '.5rem' }} />}>
<Space>
{username}
<CaretDownOutlined />