Migrate $primary color variations to CSS variables

This commit is contained in:
Adrian Simmons 2021-11-04 15:56:52 +00:00
parent 5dd4019528
commit 9dda522151
3 changed files with 5 additions and 4 deletions

View File

@ -66,6 +66,8 @@
--primary-a: 1 !important; --primary-a: 1 !important;
--primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a)); --primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
// simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
--primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
--primary-translucent: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5); --primary-translucent: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);
} }
@ -92,5 +94,4 @@
--text-light: var(--grey-300) !important; --text-light: var(--grey-300) !important;
--text-strong: var(--grey-900) !important; --text-strong: var(--grey-900) !important;
} }
} }

View File

@ -246,7 +246,7 @@ export default {
} }
10% { 10% {
transform: translate(0, -15px); transform: translate(0, -15px);
background-color: $primary-dark; background-color: var(--primary-dark);
} }
} }
</style> </style>

View File

@ -929,7 +929,7 @@ $flash-background-duration: 750ms;
@keyframes flash-background { @keyframes flash-background {
0% { 0% {
background: lighten($primary, 30); background: var(--primary-light);
} }
100% { 100% {
background: transparent; background: transparent;