Tweaked CSS variables

Added some new variables for elevation, rounder corners, and tweaked some other things
This commit is contained in:
Justin Edmund 2025-09-17 22:04:26 -07:00
parent be09e67d42
commit 7fb9ef2d9a
3 changed files with 20 additions and 9 deletions

View file

@ -202,10 +202,10 @@ $notice--button--text--light--hover: $accent--yellow--00;
$notice--button--text--dark--hover: $accent--yellow--100;
// Color Definitions: Button
$button--bg--light: $grey-80;
$button--bg--light--hover: $grey-100;
$button--bg--light--disabled: $grey-80;
$button--contained--bg--light: $grey-85;
$button--bg--light: $grey-85;
$button--bg--light--hover: $grey-80;
$button--bg--light--disabled: $grey-70;
$button--contained--bg--light: $grey-90;
$button--contained--bg--light--hover: $grey-80;
$button--bg--dark: $grey-00;
@ -214,9 +214,9 @@ $button--bg--dark--disabled: $grey-30;
$button--contained--bg--dark: $grey-15;
$button--contained--bg--dark--hover: $grey-05;
$button--text--light: $grey-55;
$button--text--light--hover: $grey-40;
$button--text--light--disabled: $grey-70;
$button--text--light: $grey-40;
$button--text--light--hover: $grey-30;
$button--text--light--disabled: $grey-50;
$button--text--dark: $grey-70;
$button--text--dark--hover: $grey-100;
$button--text--dark--disabled: $grey-50;
@ -227,8 +227,8 @@ $input--bg--light--hover: $grey-95;
$input--bg--dark: $grey-40;
$input--bg--dark--hover: $grey-30;
$input--bound--bg--light: $grey-85;
$input--bound--bg--light--hover: $grey-80;
$input--bound--bg--light: $grey-90;
$input--bound--bg--light--hover: $grey-85;
$input--bound--bg--dark: $grey-15;
$input--bound--bg--dark--hover: $grey-10;

View file

@ -1,5 +1,15 @@
@use 'sass:list';
// Borders
$page-border: 0.5px solid rgba(0, 0, 0, 0.18);
$dialog-border: 0.5px solid rgba(0, 0, 0, 0.18);
$card-border: 0.5px solid rgba(0, 0, 0, 0.18);
// Elevation
$page-elevation: 0 0 4px rgba(0, 0, 0, 0.06);
$dialog-elevation: 0 1px 8px rgba(0, 0, 0, 0.16);
$card-elevation: 0 1px 3px rgba(0, 0, 0, 0.1);
// Shadows
$hover-stroke: 1px solid rgba(0, 0, 0, 0.1);
$hover-shadow: rgba(0, 0, 0, 0.08) 0px 0px 14px;

View file

@ -6,6 +6,7 @@ $scale-tall: scale(1.012, 1.012);
// Border radius
$full-corner: 500px;
$page-corner: spacing.$unit-2x;
$card-corner: spacing.$unit * 1.5;
$input-corner: spacing.$unit;
$item-corner: spacing.$unit;