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

1
src/themes/_spacing.scss
View file

@ -22,6 +22,7 @@ $medium-screen: 768px;
$unit: 8px;
$unit-fourth: calc($unit / 4);
$unit-quarter: calc($unit / 4); // 2px - alias for unit-fourth
$unit-half: calc($unit / 2);
$unit-three-quarter: calc($unit * 0.75); // 6px - common gap/small spacing
$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-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-hover: #{colors.$wind--bg--hover--light};
--wind-portrait-bg: #{colors.$wind--portrait--bg--light};
@ -466,6 +493,33 @@
--null-shadow: #{colors.$null--shadow--dark};
--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-hover: #{colors.$wind--bg--hover--dark};
--wind-portrait-bg: #{colors.$wind--portrait--bg--dark};