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

add element theme colors and spacing variables

Browse source
This commit is contained in:
Justin Edmund 2025-09-24 02:51:35 -07:00
parent 7889b7c59b
commit a21bc27594
3 changed files with 61 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/themes/_colors.scss
View file

@ -96,7 +96,7 @@ $wind-bg-20: #cdffed;
$fire-text-00: #3f0202; $fire-text-00: #3f0202;
$fire-text-10: #3e0000; $fire-text-10: #3e0000;
$fire-text-20: #700101; $fire-text-20: #6E0000;
$fire-text-30: #ec5c5c; $fire-text-30: #ec5c5c;
$fire-bg-00: #e05555; $fire-bg-00: #e05555;
$fire-bg-10: #fa6d6d; $fire-bg-10: #fa6d6d;
@ -112,7 +112,8 @@ $water-bg-20: #cdedff;
$earth-text-00: #321602; $earth-text-00: #321602;
$earth-text-10: #662a00; $earth-text-10: #662a00;
$earth-text-20: #913d01; $earth-text-15: #863504;
$earth-text-20: #8E3C0B;
$earth-text-30: #ec985c; $earth-text-30: #ec985c;
$earth-bg-00: #df8849; $earth-bg-00: #df8849;
$earth-bg-10: #fd9f5b; $earth-bg-10: #fd9f5b;
@ -120,15 +121,15 @@ $earth-bg-20: #ffe2cd;
$light-text-00: #3d3700; $light-text-00: #3d3700;
$light-text-10: #4b4300; $light-text-10: #4b4300;
$light-text-20: #706500; $light-text-20: #715100;
$light-text-30: #c5b20c; $light-text-30: #C59C0C;
$light-bg-00: #cab91c; $light-bg-00: #cab91c;
$light-bg-10: #e8d633; $light-bg-10: #e8d633;
$light-bg-20: #fffacd; $light-bg-20: #fffacd;
$dark-text-00: #23002f; $dark-text-00: #23002f;
$dark-text-10: #3e0054; $dark-text-10: #3e0054;
$dark-text-20: #5b017b; $dark-text-20: #560075;
$dark-text-30: #c65cec; $dark-text-30: #c65cec;
$dark-bg-00: #ba63d8; $dark-bg-00: #ba63d8;
$dark-bg-10: #de7bff; $dark-bg-10: #de7bff;

1
src/themes/_spacing.scss
View file

@ -22,6 +22,7 @@ $medium-screen: 768px;
$unit: 8px; $unit: 8px;
$unit-fourth: calc($unit / 4); $unit-fourth: calc($unit / 4);
$unit-quarter: calc($unit / 4); // 2px - alias for unit-fourth
$unit-half: calc($unit / 2); $unit-half: calc($unit / 2);
$unit-three-quarter: calc($unit * 0.75); // 6px - common gap/small spacing $unit-three-quarter: calc($unit * 0.75); // 6px - common gap/small spacing
$unit-three-fourth: calc($unit / 4) * 3; $unit-three-fourth: calc($unit / 4) * 3;

54
src/themes/themes.scss
View file

@ -215,6 +215,33 @@
--null-shadow: #{colors.$null--shadow--light}; --null-shadow: #{colors.$null--shadow--light};
--null-shadow-hover: #{colors.$null--shadow--light--hover}; --null-shadow-hover: #{colors.$null--shadow--light--hover};
// Light - Element button colors
--null-button-bg: #{colors.$grey-55};
--wind-button-bg: #{colors.$wind-text-30};
--fire-button-bg: #{colors.$fire-text-30};
--water-button-bg: #{colors.$water-text-30};
--earth-button-bg: #{colors.$earth-text-20};
--light-button-bg: #{colors.$light-text-30};
--dark-button-bg: #{colors.$dark-text-30};
// Light - Element navigation selected background
--null-nav-selected-bg: #{colors.$grey-85};
--wind-nav-selected-bg: #{colors.$wind-bg-20};
--fire-nav-selected-bg: #{colors.$fire-bg-20};
--water-nav-selected-bg: #{colors.$water-bg-20};
--earth-nav-selected-bg: #{colors.$earth-bg-20};
--light-nav-selected-bg: #{colors.$light-bg-20};
--dark-nav-selected-bg: #{colors.$dark-bg-20};
// Light - Element navigation selected text
--null-nav-selected-text: #{colors.$grey-40};
--wind-nav-selected-text: #{colors.$wind-text-20};
--fire-nav-selected-text: #{colors.$fire-text-20};
--water-nav-selected-text: #{colors.$water-text-10};
--earth-nav-selected-text: #{colors.$earth-text-15};
--light-nav-selected-text: #{colors.$light-text-20};
--dark-nav-selected-text: #{colors.$dark-text-20};
--wind-bg: #{colors.$wind--bg--light}; --wind-bg: #{colors.$wind--bg--light};
--wind-bg-hover: #{colors.$wind--bg--hover--light}; --wind-bg-hover: #{colors.$wind--bg--hover--light};
--wind-portrait-bg: #{colors.$wind--portrait--bg--light}; --wind-portrait-bg: #{colors.$wind--portrait--bg--light};
@ -466,6 +493,33 @@
--null-shadow: #{colors.$null--shadow--dark}; --null-shadow: #{colors.$null--shadow--dark};
--null-shadow-hover: #{colors.$null--shadow--dark--hover}; --null-shadow-hover: #{colors.$null--shadow--dark--hover};
// Dark - Element button colors (same as light theme)
--null-button-bg: #{colors.$grey-55};
--wind-button-bg: #{colors.$wind-text-30};
--fire-button-bg: #{colors.$fire-text-30};
--water-button-bg: #{colors.$water-text-30};
--earth-button-bg: #{colors.$earth-text-20};
--light-button-bg: #{colors.$light-text-30};
--dark-button-bg: #{colors.$dark-text-30};
// Dark - Element navigation selected background (same as light theme)
--null-nav-selected-bg: #{colors.$grey-85};
--wind-nav-selected-bg: #{colors.$wind-bg-20};
--fire-nav-selected-bg: #{colors.$fire-bg-20};
--water-nav-selected-bg: #{colors.$water-bg-20};
--earth-nav-selected-bg: #{colors.$earth-bg-20};
--light-nav-selected-bg: #{colors.$light-bg-20};
--dark-nav-selected-bg: #{colors.$dark-bg-20};
// Dark - Element navigation selected text (same as light theme)
--null-nav-selected-text: #{colors.$grey-40};
--wind-nav-selected-text: #{colors.$wind-text-20};
--fire-nav-selected-text: #{colors.$fire-text-20};
--water-nav-selected-text: #{colors.$water-text-10};
--earth-nav-selected-text: #{colors.$earth-text-15};
--light-nav-selected-text: #{colors.$light-text-20};
--dark-nav-selected-text: #{colors.$dark-text-20};
--wind-bg: #{colors.$wind--bg--dark}; --wind-bg: #{colors.$wind--bg--dark};
--wind-bg-hover: #{colors.$wind--bg--hover--dark}; --wind-bg-hover: #{colors.$wind--bg--hover--dark};
--wind-portrait-bg: #{colors.$wind--portrait--bg--dark}; --wind-portrait-bg: #{colors.$wind--portrait--bg--dark};