Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: accent colors #4304

Merged
merged 25 commits into from
Jul 16, 2024
Merged

refactor: accent colors #4304

Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
4d695c7
move colors to extra file
Schwehn42 Jul 12, 2024
e519363
add color map and generate accent shades
Schwehn42 Jul 12, 2024
9e6eccb
use long color names
Schwehn42 Jul 12, 2024
4c9c1e9
import, not use
Schwehn42 Jul 12, 2024
1447687
actually include colors
Schwehn42 Jul 12, 2024
a6d8a15
rename function
Schwehn42 Jul 12, 2024
884fdd9
add comments
Schwehn42 Jul 12, 2024
54fc794
add dash to var name
Schwehn42 Jul 12, 2024
d9fe675
refactor --accent-color -> --accent-color--light
Schwehn42 Jul 12, 2024
12b1fa8
refactor --accent-color--desaturated-light -> --accent-color--100
Schwehn42 Jul 12, 2024
7d7fd40
refactor --accent-color--desaturated-light-hover -> --accent-color--100
Schwehn42 Jul 12, 2024
f686e61
refactor --accent-color--background-light
Schwehn42 Jul 12, 2024
080780f
refactor --accent-color--background-dark
Schwehn42 Jul 12, 2024
f9d2adc
adjust note reaction colors
Schwehn42 Jul 12, 2024
7c8251e
replace --accent-color--desaturated-dark -> partly opaque dark accent…
Schwehn42 Jul 12, 2024
68515be
replace --accent-color--desaturated-dark-hover -> partly opaque dark …
Schwehn42 Jul 12, 2024
4c425f9
add rgb shades for light and dark
Schwehn42 Jul 12, 2024
108f65b
--accent-color-rgb -> --accent-color--light-rgb
Schwehn42 Jul 12, 2024
33951ee
add todo
Schwehn42 Jul 12, 2024
06c274f
fix note reaction list hover color
Schwehn42 Jul 12, 2024
5886651
note reaction chip light hover colors
Schwehn42 Jul 12, 2024
d88f544
Merge branch 'main' into js/color-refactor-addendum
Schwehn42 Jul 15, 2024
b7c36d8
fix NoteReactionBar hover color
Schwehn42 Jul 16, 2024
ba63139
Merge branch 'refs/heads/main' into js/color-refactor-addendum
Schwehn42 Jul 16, 2024
1f8376b
fix vote button dark mode
Schwehn42 Jul 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Avatar/Avatar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,5 @@

.avatar #Circle-Background,
.avatar #Color\/Palette\/Blue-01 {
fill: var(--accent-color);
fill: var(--accent-color--light);
}
2 changes: 1 addition & 1 deletion src/components/Badge/Badge.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
min-width: 30px;
text-align: center;
margin: auto;
background-color: var(--accent-color);
background-color: var(--accent-color--light);
border-radius: 4px;
font-size: 8px;
color: $gray--000;
Expand Down
6 changes: 3 additions & 3 deletions src/components/BoardHeader/HeaderMenu/BoardSettings/BoardSettings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ $header-menu-button-width: 24px;
.board-settings {
position: relative;
height: 64px;
background-color: var(--accent-color);
background-color: var(--accent-color--light);
}

.board-settings > form {
Expand Down Expand Up @@ -77,12 +77,12 @@ $header-menu-button-width: 24px;

&:focus-visible {
background-color: $gray--000;
color: var(--accent-color);
color: var(--accent-color--light);
}

&:hover {
background-color: $gray--000;
color: var(--accent-color);
color: var(--accent-color--light);
transform: scale(1.06);
}

Expand Down
14 changes: 7 additions & 7 deletions src/components/Column/Column.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
flex-direction: column;
flex: 1;
::selection {
background-color: rgba(var(--accent-color-rgb), 0.5);
background-color: rgba(var(--accent-color--light-rgb), 0.5);
}
}

Expand All @@ -70,7 +70,7 @@
justify-content: space-between;
width: auto;
height: auto;
border-bottom: solid 3px var(--accent-color);
border-bottom: solid 3px var(--accent-color--light);
margin: 0 $spacing--xs 0 0;
overflow: hidden;
}
Expand Down Expand Up @@ -107,7 +107,7 @@
border: none;
font-size: calc(#{$text-size--large} + 0.4vw);
color: $navy--900;
border-bottom: dashed 3px var(--accent-color);
border-bottom: dashed 3px var(--accent-color--light);
margin: 0 auto 0 0;
font-weight: bold;
letter-spacing: $letter-spacing--large;
Expand Down Expand Up @@ -148,8 +148,8 @@
}

.column__notes-wrapper.isOver {
border-color: var(--accent-color);
background-color: rgba(var(--accent-color-rgb), 0.2);
border-color: var(--accent-color--light);
background-color: rgba(var(--accent-color--light-rgb), 0.2);
}

.column__note-list {
Expand Down Expand Up @@ -218,8 +218,8 @@
&:hover > svg,
&:focus-visible > svg {
transform: translate(-0.64px, -0.64px);
filter: drop-shadow(2px 2px 2px rgba(var(--accent-color-rgb), 0.24));
color: var(--accent-color);
filter: drop-shadow(2px 2px 2px rgba(var(--accent-color--light-rgb), 0.24));
color: var(--accent-color--light);
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/Column/ColumnSettings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
height: 18px;
width: 18px;
border-radius: 4px;
background-color: var(--accent-color);
background-color: var(--accent-color--light);
transition: all 0.08s ease-out;

&:hover {
Expand Down
4 changes: 2 additions & 2 deletions src/components/ConfirmationDialog/ConfirmationDialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
height: 100%;
margin-top: -9px;
margin-left: -14px;
color: var(--accent-color);
color: var(--accent-color--light);
opacity: 0.6;
}

Expand All @@ -58,7 +58,7 @@
margin: 12px 0px 0px 0px;
}
.confirmation-dialog__warning > svg {
color: var(--accent-color);
color: var(--accent-color--light);
height: $icon--medium;
width: $icon--medium;
opacity: 0.8;
Expand Down
10 changes: 5 additions & 5 deletions src/components/Dialog/Dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,10 +70,10 @@
border-radius: $rounded--full;

&:hover {
background-color: var(--accent-color--desaturated-light);
background-color: var(--accent-color--100);
}
&:focus-visible {
border: 2px solid var(--accent-color);
border: 2px solid var(--accent-color--light);
outline: none;
}
}
Expand All @@ -98,11 +98,11 @@
outline: none;

&:hover {
background-color: rgba(var(--accent-color-rgb), 0.1);
background-color: rgba(var(--accent-color--light-rgb), 0.1);
}

&:focus-visible {
box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 1);
box-shadow: 0 0 0 2px rgba(var(--accent-color--light-rgb), 1);
}

> label:first-of-type {
Expand All @@ -124,6 +124,6 @@
color: $gray--000;
}
.dialog__close-button:hover {
background-color: var(--accent-color--desaturated-dark);
background-color: rgba(var(--accent-color--dark-rgb), 0.6);
}
}
2 changes: 1 addition & 1 deletion src/components/EmojiSuggestions/EmojiSuggestions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@

&__element:hover,
.emoji-suggestions__element--focus {
background-color: rgba(var(--accent-color-rgb), 0.2);
background-color: rgba(var(--accent-color--light-rgb), 0.2);
}

&__emoji {
Expand Down
8 changes: 4 additions & 4 deletions src/components/Note/Note.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ $note__footer-gap: 42px;

.note:focus-within,
.note:focus-visible {
outline: 2px solid rgba(var(--accent-color-rgb), 0.5);
outline: 2px solid rgba(var(--accent-color--light-rgb), 0.5);
}

.note:hover {
Expand All @@ -67,7 +67,7 @@ $note__footer-gap: 42px;

.shouldCombine .note {
transform-origin: center;
border: 2px solid var(--accent-color);
border: 2px solid var(--accent-color--light);
border-radius: $note__border-radius;

transform: scale(0.98);
Expand Down Expand Up @@ -111,7 +111,7 @@ $note__footer-gap: 42px;
width: $note__indicator-width;
height: $note__indicator-height;
border-radius: 0 $note__indicator-width $note__indicator-width 0;
background: var(--accent-color);
background: var(--accent-color--light);
}
.note__container {
margin: $note__text-margin-top 0 $spacing--xs;
Expand Down Expand Up @@ -164,7 +164,7 @@ $note__footer-gap: 42px;
position: absolute;
top: calc(50% - ($icon--huge / 2));
left: calc(50% - ($icon--huge / 2));
fill: var(--accent-color);
fill: var(--accent-color--light);
}

.note__header {
Expand Down
4 changes: 2 additions & 2 deletions src/components/Note/NoteAuthorList/NoteAuthorList.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ $max-name-length: 112px;
}

.note-author__container--self {
background: var(--accent-color--desaturated-light);
background: var(--accent-color--100);
padding-right: $spacing--base;
width: max-content;
}
Expand Down Expand Up @@ -112,7 +112,7 @@ $max-name-length: 112px;

[theme="dark"] {
.note-author__container--self {
background: var(--accent-color--desaturated-dark);
background: rgba(var(--accent-color--dark-rgb), 0.6);
}

.note__author-name {
Expand Down
13 changes: 6 additions & 7 deletions src/components/Note/NoteReactionList/NoteReactionBar/NoteReactionBar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,15 @@ $scale-factor: 120%;
}

&--active {
background-color: var(--accent-color--desaturated-light);
background-color: var(--accent-color--100);

&:hover {
background-color: var(--accent-color--desaturated-light-hover);
background-color: var(--accent-color--100);
}
}

&:focus {
background-color: var(--accent-color--desaturated-light-hover);
background-color: var(--accent-color--100);
}
}

Expand All @@ -57,15 +57,14 @@ $scale-factor: 120%;
}

&--active {
background-color: var(--accent-color--desaturated-dark);

background-color: rgba(var(--accent-color--dark-rgb), 0.6);
&:hover {
background-color: var(--accent-color--desaturated-dark-hover);
background-color: rgba(var(--accent-color--dark-rgb), 0.8);
}
}

&:focus {
background-color: var(--accent-color--desaturated-dark-hover);
background-color: rgba(var(--accent-color--dark-rgb), 0.8);
}
}
}
19 changes: 9 additions & 10 deletions src/components/Note/NoteReactionList/NoteReactionChip/NoteReactionChip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
cursor: pointer;

&:hover {
background-color: $gray--300;
background-color: $gray--500;
}
}

Expand All @@ -38,23 +38,23 @@
}

.note-reaction-chip__root--self {
background-color: var(--accent-color--desaturated-light);
background-color: var(--accent-color--100);

&:hover {
background-color: var(--accent-color--desaturated-light-hover);
background-color: var(--accent-color--200);
}
}

// override
.note-reaction-chip__root--override-active {
background-color: var(--accent-color);
background-color: var(--accent-color--light);

.note-reaction-chip__amount {
color: $gray--000;
}

&:hover {
background-color: var(--accent-color); // essentially no hover color when active.
background-color: var(--accent-color--light); // essentially no hover color when active.
}
}

Expand All @@ -68,18 +68,17 @@
}

.note-reaction-chip__root--self {
background-color: var(--accent-color--desaturated-dark);
background-color: rgba(var(--accent-color--dark-rgb), 0.6);

&:hover {
background-color: var(--accent-color--desaturated-dark-hover);
background-color: rgba(var(--accent-color--dark-rgb), 0.8);
}
}

.note-reaction-chip__root--override-active {
background-color: var(--accent-color--desaturated-dark-hover);

background-color: rgba(var(--accent-color--dark-rgb), 0.8);
&:hover {
background-color: var(--accent-color--desaturated-dark-hover);
background-color: rgba(var(--accent-color--dark-rgb), 0.8);
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/components/Note/NoteReactionList/NoteReactionList.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,10 @@
cursor: pointer;

&:hover {
background-color: $gray--300;
background-color: rgba(var(--accent-color--light-rgb), 0.1);
}
&:focus-visible {
outline: 2px solid rgba(var(--accent-color-rgb), 0.5);
outline: 2px solid rgba(var(--accent-color--light-rgb), 0.5);
}
}

Expand Down
10 changes: 5 additions & 5 deletions src/components/Note/NoteReactionList/NoteReactionPopup/NoteReactionPopup.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,11 +67,11 @@
}

&--active {
background-color: var(--accent-color);
background-color: var(--accent-color--light);
color: $gray--000;

&:hover {
background-color: var(--accent-color); // essentially no hover color when active.
background-color: var(--accent-color--light); // essentially no hover color when active.
}
}
}
Expand Down Expand Up @@ -121,7 +121,7 @@
border-radius: $rounded--full;

&--active {
background-color: var(--accent-color--desaturated-light);
background-color: var(--accent-color--100);
}
}

Expand Down Expand Up @@ -157,13 +157,13 @@
background-color: $navy--600;

&--active {
background-color: var(--accent-color--desaturated-dark-hover);
background-color: rgba(var(--accent-color--dark-rgb), 0.8);
}
}

.note-reaction-popup__row-reaction {
&--active {
background-color: var(--accent-color--desaturated-dark);
background-color: rgba(var(--accent-color--dark-rgb), 0.6);
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/Note/NoteTextContent/NoteTextContent.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top; /* align with the rest of the text */
color: var(--accent-color);
color: var(--accent-color--light);
}
}
2 changes: 1 addition & 1 deletion src/components/NoteDialogComponents/NoteDialogHeader.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
content: " ";
display: block;
height: 6px;
background: var(--accent-color);
background: var(--accent-color--light);
border-radius: $rounded--full;
margin-top: $spacing--base;

Expand Down
4 changes: 2 additions & 2 deletions src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogNoteContent.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
&:not(:disabled) {
&:hover,
&:focus-visible {
border-color: var(--accent-color--desaturated-dark);
border-color: rgba(var(--accent-color--dark-rgb), 0.6);
}
}
}
Expand Down Expand Up @@ -87,7 +87,7 @@
left: 0;
cursor: zoom-out;
backdrop-filter: blur(10px) brightness(0.76) saturate(0);
background: rgba(var(--accent-color-rgb), 0.42);
background: rgba(var(--accent-color--light-rgb), 0.42);

animation: fade 0.1s ease-in-out;
}
Expand Down
Loading
Loading