granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add element hover bg colors to design system

Browse source
This commit is contained in:
Justin Edmund 2026-01-04 16:07:24 -08:00
parent 155512069f
commit 31528bdc1f
2 changed files with 24 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/themes/_colors.scss
View file

@ -94,6 +94,7 @@ $wind-text-20: #006a45;
$wind-text-30: #1dc688;
$wind-bg-00: #30c372;
$wind-bg-10: #3ee489;
$wind-bg-15: #86f2bb;
$wind-bg-20: #cdffed;
$fire-text-00: #3f0202;
@ -102,6 +103,7 @@ $fire-text-20: #6e0000;
$fire-text-30: #ec5c5c;
$fire-bg-00: #e05555;
$fire-bg-10: #fa6d6d;
$fire-bg-15: #fd9d9d;
$fire-bg-20: #ffcdcd;
$water-text-00: #03263b;
@ -110,6 +112,7 @@ $water-text-20: #00639c;
$water-text-30: #5cb7ec;
$water-bg-00: #4aabe3;
$water-bg-10: #6cc9ff;
$water-bg-15: #9ddbff;
$water-bg-20: #cdedff;
$earth-text-00: #321602;
@ -119,6 +122,7 @@ $earth-text-20: #8e3c0b;
$earth-text-30: #ec985c;
$earth-bg-00: #df8849;
$earth-bg-10: #fd9f5b;
$earth-bg-15: #fec194;
$earth-bg-20: #ffe2cd;
$light-text-00: #3d3700;
@ -127,6 +131,7 @@ $light-text-20: #715100;
$light-text-30: #c59c0c;
$light-bg-00: #cab91c;
$light-bg-10: #e8d633;
$light-bg-15: #f4e880;
$light-bg-20: #fffacd;
$dark-text-00: #23002f;
@ -135,6 +140,7 @@ $dark-text-20: #560075;
$dark-text-30: #c65cec;
$dark-bg-00: #ba63d8;
$dark-bg-10: #de7bff;
$dark-bg-15: #e8a4ff;
$dark-bg-20: #f2cdff;
$transparent--stroke--light: rgba(0, 0, 0, 0.9);

18
src/themes/themes.scss
View file

@ -297,6 +297,15 @@
--light-nav-selected-bg: #{colors.$light-bg-20};
--dark-nav-selected-bg: #{colors.$dark-bg-20};
// Light - Element navigation hover background (between bg and nav-selected)
--null-nav-hover-bg: #{colors.$grey-80};
--wind-nav-hover-bg: #{colors.$wind-bg-15};
--fire-nav-hover-bg: #{colors.$fire-bg-15};
--water-nav-hover-bg: #{colors.$water-bg-15};
--earth-nav-hover-bg: #{colors.$earth-bg-15};
--light-nav-hover-bg: #{colors.$light-bg-15};
--dark-nav-hover-bg: #{colors.$dark-bg-15};
// Item detail backgrounds (same colors as nav selected)
--null-item-detail-bg: #{colors.$grey-85};
--wind-item-detail-bg: #{colors.$wind-bg-20};
@ -666,6 +675,15 @@ html[data-theme='dark'] {
--light-nav-selected-bg: #{colors.$light-bg-20};
--dark-nav-selected-bg: #{colors.$dark-bg-20};
// Dark - Element navigation hover background (same as light theme)
--null-nav-hover-bg: #{colors.$grey-80};
--wind-nav-hover-bg: #{colors.$wind-bg-15};
--fire-nav-hover-bg: #{colors.$fire-bg-15};
--water-nav-hover-bg: #{colors.$water-bg-15};
--earth-nav-hover-bg: #{colors.$earth-bg-15};
--light-nav-hover-bg: #{colors.$light-bg-15};
--dark-nav-hover-bg: #{colors.$dark-bg-15};
// Item detail backgrounds (same colors as nav selected)
--null-item-detail-bg: #{colors.$grey-85};
--wind-item-detail-bg: #{colors.$wind-bg-20};