refactor variable names

This commit is contained in:
Michael Shamoon 2022-03-09 11:13:58 -08:00
parent f52d167da3
commit 17e5f6d76b
2 changed files with 14 additions and 14 deletions

View File

@ -1,16 +1,16 @@
:root {
// base color e.g. #17541f = hsl(128, 57%, 21%)
--ngx-green: 128, 57%;
--l: 21%;
--pngx-primary: 128, 57%;
--pngx-primary-lightness: 21%;
--bs-primary: hsl(var(--ngx-green), var(--l));
--bs-primary: hsl(var(--pngx-primary), var(--pngx-primary-lightness));
--bs-border-color: var(--bs-gray-400);
--ngx-primary-faded: hsl(var(--ngx-green), calc(var(--l) + 72%));
--ngx-primary-lighten-10: hsl(var(--ngx-green), calc(var(--l) + 10%));
--ngx-primary-lighten-30: hsl(var(--ngx-green), calc(var(--l) + 30%));
--ngx-primary-darken-10: hsl(var(--ngx-green), calc(var(--l) - 10%));
--ngx-primary-darken-15: hsl(var(--ngx-green), calc(var(--l) - 15%));
--ngx-primary-darken-18: hsl(var(--ngx-green), calc(var(--l) - 18%));
--ngx-primary-faded: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 72%));
--ngx-primary-lighten-10: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 10%));
--ngx-primary-lighten-30: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 30%));
--ngx-primary-darken-10: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 10%));
--ngx-primary-darken-15: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 15%));
--ngx-primary-darken-18: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 18%));
--ngx-bg-darker: var(--bs-gray-100);
--ngx-focus-alpha: 0.3;
}
@ -81,7 +81,7 @@ svg.logo {
.form-check-input:focus,
.form-check-radio:focus,
.form-select:focus {
box-shadow: 0 0 0 0.25rem hsla(var(--ngx-green), var(--l), var(--ngx-focus-alpha));
box-shadow: 0 0 0 0.25rem hsla(var(--pngx-primary), var(--pngx-primary-lightness), var(--ngx-focus-alpha));
}
.form-switch .form-check-input:focus {

View File

@ -18,7 +18,7 @@ $border-color-dark-mode: #47494f;
}
@mixin dark-mode {
--bs-primary: hsl(var(--ngx-green), calc(var(--l) + 10%));
--bs-primary: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 10%));
--bs-danger: #{$danger-dark-mode};
--bs-danger-rgb: #{$danger-dark-mode-rgb};
--bs-body-bg: #{$bg-dark-mode};
@ -33,7 +33,7 @@ $border-color-dark-mode: #47494f;
--ngx-focus-alpha: 0.7;
.navbar.bg-primary{
--bs-primary: hsl(var(--ngx-green),var(--l));
--bs-primary: hsl(var(--pngx-primary),var(--pngx-primary-lightness));
--bs-primary-rgb: var(--bs-primary);
}
@ -154,11 +154,11 @@ $border-color-dark-mode: #47494f;
}
.toast {
background-color: hsla(var(--ngx-green), calc(var(--l) - 18%), 0.9);
background-color: hsla(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 18%), 0.9);
}
.toast-header {
background-color: hsla(var(--ngx-green), calc(var(--l) - 10%), 0.9);
background-color: hsla(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 10%), 0.9);
}
}