Skip to content

Commit

Permalink
Convert hex/RGB color values to HSL
Browse files Browse the repository at this point in the history
  • Loading branch information
caleb531 committed Oct 3, 2024
1 parent 397532c commit 0a1ec7e
Show file tree
Hide file tree
Showing 5 changed files with 25 additions and 24 deletions.
37 changes: 19 additions & 18 deletions styles/_colors.scss
Original file line number Diff line number Diff line change
@@ -1,32 +1,33 @@
:root {
--update-notification-color: #38c;
--empty-chip-slot-border-color: #ccc;
--button-background-color: #390;
--button-background-color-active: #5b2;
--button-disabled-background-color: #aaa;
--button-warn-background-color: #d60;
--button-warn-background-color-active: #f3801d;
--input-focus-border-color: #36c;
--input-focus-box-shadow-color: #9cf;
--update-notification-color: hsl(207, 60%, 50%);
--empty-chip-slot-border-color: hsl(0, 0%, 80%);
--button-background-color: hsl(100, 100%, 30%);
--button-color: hsl(0, 0%, 100%);
--button-background-color-active: hsl(100, 69%, 43%);
--button-disabled-background-color: hsl(0, 0%, 67%);
--button-warn-background-color: hsl(28, 100%, 43%);
--button-warn-background-color-active: hsl(28, 90%, 53%);
--input-focus-border-color: hsl(220, 60%, 50%);
--input-focus-box-shadow-color: hsl(210, 100%, 80%);

// Dark Mode Colors
--app-background-color-dark: #111;
--app-color-dark: #fff;
--empty-chip-slot-border-color-dark: #333;
--app-background-color-dark: hsl(0, 0%, 7%);
--app-color-dark: hsl(0, 0%, 100%);
--empty-chip-slot-border-color-dark: hsl(0, 0%, 20%);

// Player reactions
--player-reaction-offset: -15px;
--player-reaction-transition-duration: 300ms;

// Player/chip colors
--player-color-light-black: #444;
--player-color-light-blue: #36c;
--player-color-light-red: #c33;
--player-color-light-black: hsl(0, 0%, 27%);
--player-color-light-blue: hsl(220, 60%, 50%);
--player-color-light-red: hsl(0, 60%, 50%);

// Player/chip colors for Dark Mode
--player-color-dark-black: #666;
--player-color-dark-blue: #14a;
--player-color-dark-red: #b22;
--player-color-dark-black: hsl(0, 0%, 40%);
--player-color-dark-blue: hsl(220, 82%, 37%);
--player-color-dark-red: hsl(0, 69%, 43%);
}

// Define standard player colors that any element can use
Expand Down
4 changes: 2 additions & 2 deletions styles/_dashboard-controls.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
#dashboard-controls {
button {
border: solid 1px rgba(0, 0, 0, 0.25);
border: solid 1px hsla(0, 0%, 0%, 0.25);
border-radius: 3px;
padding: 4px 6px;
background-color: var(--button-background-color);
font-family: var(--sans-serif);
color: #fff;
color: var(--button-color);
&:not([disabled]):hover:active,
&:not([disabled]):focus:active {
--button-background-color: var(--button-background-color-active);
Expand Down
4 changes: 2 additions & 2 deletions styles/_grid.scss
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,8 @@
.chip {
--chip-background-color-light: var(--player-color-light);
--chip-background-color-dark: var(--player-color-dark);
--chip-border-color-light: rgba(0, 0, 0, 0.25);
--chip-border-color-dark: rgba(0, 0, 0, 0.25);
--chip-border-color-light: hsla(0, 0%, 0%, 0.25);
--chip-border-color-dark: hsla(0, 0%, 0%, 0.25);
.chip-inner {
border-color: var(--chip-border-color-light);
background-color: var(--chip-background-color-light);
Expand Down
2 changes: 1 addition & 1 deletion styles/_player-area.scss
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,6 @@
&.show {
transform: scale(1);
transition-timing-function: var(--bounce-transition-timing-function);
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
text-shadow: 0 1px 10px hsla(0, 0%, 0%, 0.25);
}
}
2 changes: 1 addition & 1 deletion styles/_update-notification.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
transform: translateY(-100%);
transition: transform 400ms ease-in-out;
text-align: center;
color: #fff;
color: var(--button-color);
cursor: pointer;
&.update-available {
opacity: 1;
Expand Down

0 comments on commit 0a1ec7e

Please sign in to comment.