Skip to content

Commit

Permalink
Use CSS variables for colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@giuscris
giuscris committed Sep 14, 2024
1 parent 880b8c1 commit 090d93d
Show file tree
Hide file tree
Showing 38 changed files with 469 additions and 375 deletions.
2 changes: 1 addition & 1 deletion panel/assets/css/panel-dark.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion panel/assets/css/panel.min.css
View file

Large diffs are not rendered by default.

18 changes: 9 additions & 9 deletions panel/src/scss/components/_badges.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
padding: 0.25rem 0.5rem;
border-radius: 2em;
margin-left: 0.25rem;
background-color: $color-base-600;
background-color: var(--color-base-600);
font-size: 0.75em;
font-weight: 600;
line-height: 1.125;
Expand All @@ -18,21 +18,21 @@
}

.button-accent .badge {
background-color: $color-accent-900;
color: $color-accent-500;
background-color: var(--color-accent-900);
color: var(--color-accent-500);
}

.button-success .badge {
background-color: $color-success-900;
color: $color-success-500;
background-color: var(--color-success-900);
color: var(--color-success-500);
}

.button-warning .badge {
background-color: $color-warning-900;
color: $color-warning-500;
background-color: var(--color-warning-900);
color: var(--color-warning-500);
}

.button-danger .badge {
background-color: $color-danger-900;
color: $color-danger-500;
background-color: var(--color-danger-900);
color: var(--color-danger-500);
}
26 changes: 13 additions & 13 deletions panel/src/scss/components/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ html {

body {
margin: 0;
background-color: $color-base-800;
color: $color-base-100;
background-color: var(--color-base-800);
color: var(--color-base-100);
font-family: $base-font-family;
line-height: $base-line-height;
-webkit-tap-highlight-color: rgba($color-base-100, 0);
-webkit-tap-highlight-color: transparent;
}

* {
Expand All @@ -22,13 +22,13 @@ main {

a {
background-color: transparent;
color: $color-accent-500;
outline-color: rgba($focusring-default-color, $focusring-opacity);
color: var(--color-accent-500);
outline-color: var(--color-focusring);
text-decoration: none;
transition: color $transition-time-sm;

&:hover {
color: $color-accent-400;
color: var(--color-accent-400);
}

&:not([href]) {
Expand All @@ -42,20 +42,20 @@ img {
}

mark {
background-color: $color-yellow-500;
background-color: var(--color-yellow-500);
}

code,
pre {
border-radius: $border-radius;
background-color: $color-base-700;
background-color: var(--color-base-700);
font-family: $mono-font-family;
font-size: 0.875em;
}

code {
padding: 0.125rem 0.25rem;
color: $color-accent-500;
color: var(--color-accent-500);
}

pre {
Expand All @@ -72,17 +72,17 @@ pre {
}

::selection {
background-color: $selection-background-color;
background-color: var(--color-selection);
}

::placeholder {
color: $color-base-300;
color: var(--color-base-300);
}

.link-secondary {
color: $color-base-300;
color: var(--color-base-300);

&:hover {
color: $color-base-200;
color: var(--color-base-200);
}
}
100 changes: 43 additions & 57 deletions panel/src/scss/components/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,13 @@
transition:
border-color $transition-time-sm,
background-color $transition-time-sm,
box-shadow $transition-time-sm,
color $transition-time-sm;
white-space: nowrap;
@include user-select-none;

&:hover {
color: $color-accent-500;
color: var(--color-accent-500);
}

&:focus {
Expand All @@ -32,7 +33,7 @@
&.disabled,
&.disabled:hover {
box-shadow: none;
color: $color-base-500;
color: var(--color-base-500);
pointer-events: none;
}

Expand All @@ -49,97 +50,82 @@
}

.button-accent {
border: 1px solid $color-accent-500;
background-color: $color-accent-500;
box-shadow: 0 2px 0 rgba($color-base-100, 0.25);
color: $color-white;
border: 1px solid var(--color-accent-500);
background-color: var(--color-accent-500);
box-shadow: 0 2px 0 var(--color-base-500);
color: var(--color-white);

&:hover,
&:focus,
&.active {
border-color: $color-accent-400;
background-color: $color-accent-400;
color: $color-white;
}

&:focus {
@include focusring;
border-color: var(--color-accent-400);
background-color: var(--color-accent-400);
box-shadow: 0 2px 0 var(--color-base-400);
color: var(--color-white);
}
}

.button-secondary {
border: 1px solid $color-base-600;
background-color: $color-base-600;
box-shadow: 0 2px 0 rgba($color-base-100, 0.25);
color: $color-base-100;
border: 1px solid var(--color-base-600);
background-color: var(--color-base-600);
box-shadow: 0 2px 0 var(--color-base-500);
color: var(--color-base-100);

&:hover,
&:focus,
&.active {
border-color: $color-base-500;
background-color: $color-base-500;
color: $color-base-100;
}

&:focus {
@include focusring($color-base-100);
border-color: var(--color-base-500);
background-color: var(--color-base-500);
box-shadow: 0 2px 0 var(--color-base-400);
color: var(--color-base-100);
}
}

.button-success {
border: 2px solid $color-success-500;
background-color: $color-success-500;
box-shadow: 0 1px 0 rgba($color-base-100, 0.25);
color: $color-white;
border: 2px solid var(--color-success-500);
background-color: var(--color-success-500);
box-shadow: 0 1px 0 var(--color-shadow-lg);
color: var(--color-white);

&:hover,
&:focus,
&.active {
border-color: $color-success-400;
background-color: $color-success-400;
color: $color-white;
}

&:focus {
@include focusring($color-success-500);
border-color: var(--color-success-400);
background-color: var(--color-success-400);
box-shadow: 0 2px 0 var(--color-base-400);
color: var(--color-white);
}
}

.button-warning {
border: 1px solid $color-warning-500;
background-color: $color-warning-500;
box-shadow: 0 2px 0 rgba($color-base-100, 0.25);
color: $color-white;
border: 1px solid var(--color-warning-500);
background-color: var(--color-warning-500);
box-shadow: 0 2px 0 var(--color-base-500);
color: var(--color-white);

&:hover,
&:focus,
&.active {
border-color: $color-warning-400;
background-color: $color-warning-400;
color: $color-white;
}

&:focus {
@include focusring($color-warning-500);
border-color: var(--color-warning-400);
background-color: var(--color-warning-400);
box-shadow: 0 2px 0 var(--color-base-400);
color: var(--color-white);
}
}

.button-danger {
border: 1px solid $color-danger-500;
background-color: $color-danger-500;
box-shadow: 0 2px 0 rgba($color-base-100, 0.25);
color: $color-white;
border: 1px solid var(--color-danger-500);
background-color: var(--color-danger-500);
box-shadow: 0 2px 0 var(--color-base-500);
color: var(--color-white);

&:hover,
&:focus,
&.active {
border-color: $color-danger-400;
background-color: $color-danger-400;
color: $color-white;
}

&:focus {
@include focusring($color-danger-500);
border-color: var(--color-danger-400);
background-color: var(--color-danger-400);
box-shadow: 0 2px 0 var(--color-base-400);
color: var(--color-white);
}
}

Expand Down
20 changes: 10 additions & 10 deletions panel/src/scss/components/_charts.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,39 +9,39 @@
}

.ct-label {
color: rgba($color-base-100, 0.4);
fill: rgba($color-base-100, 0.4);
color: var(--color-base-400);
white-space: pre-wrap;
}

.ct-grid {
stroke: rgba($color-base-100, 0.2);
opacity: 0.2;
stroke: var(--color-base-100);
}

.ct-series-a .ct-line,
.ct-series-a .ct-point {
stroke: $color-blue-500;
stroke: var(--color-blue-500);
}

.ct-series-a .ct-area {
fill: $color-blue-500;
fill: var(--color-blue-500);
}

.ct-series-b .ct-line,
.ct-series-b .ct-point {
stroke: $color-amber-500;
stroke: var(--color-amber-500);
}

.ct-series-b .ct-area {
fill: $color-amber-500;
fill: var(--color-amber-500);
}

.ct-label.ct-horizontal,
.ct-label.ct-horizontal.ct-end {
display: inline-block;
width: auto !important;
min-width: 3rem;
color: $color-base-100;
color: var(--color-base-100);
text-align: center;
transform: translateX(-50%);
}
Expand All @@ -65,9 +65,9 @@
}

.ct-legend-label.ct-series-a .icon {
color: $color-blue-500;
color: var(--color-blue-500);
}

.ct-legend-label.ct-series-b .icon {
color: $color-amber-500;
color: var(--color-amber-500);
}
Loading

0 comments on commit 090d93d

Please sign in to comment.