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

View File

@ -18,7 +18,7 @@ $border-color-dark-mode: #47494f;
} }
@mixin dark-mode { @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: #{$danger-dark-mode};
--bs-danger-rgb: #{$danger-dark-mode-rgb}; --bs-danger-rgb: #{$danger-dark-mode-rgb};
--bs-body-bg: #{$bg-dark-mode}; --bs-body-bg: #{$bg-dark-mode};
@ -33,7 +33,7 @@ $border-color-dark-mode: #47494f;
--ngx-focus-alpha: 0.7; --ngx-focus-alpha: 0.7;
.navbar.bg-primary{ .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); --bs-primary-rgb: var(--bs-primary);
} }
@ -154,11 +154,11 @@ $border-color-dark-mode: #47494f;
} }
.toast { .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 { .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);
} }
} }