From 5c91df206c16b8dd62a70060e11539ca3ef6771c Mon Sep 17 00:00:00 2001 From: Adrien Date: Sat, 30 Mar 2024 08:23:52 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Store=20colors=20in=20a=20nested?= =?UTF-8?q?=20map=20to=20make=20them=20reachable=20using=20criteria?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/_base.scss | 123 +++++++++++++++++++++++++++++++-- src/components/button.scss | 37 +++++----- src/components/loading.scss | 2 +- src/components/login.scss | 4 +- src/components/spinner.scss | 10 +-- src/components/text_input.scss | 10 +-- 6 files changed, 153 insertions(+), 33 deletions(-) diff --git a/src/_base.scss b/src/_base.scss index 4cfc393..110d339 100644 --- a/src/_base.scss +++ b/src/_base.scss @@ -1,3 +1,5 @@ +@use "sass:map"; + $font-size: 100vh * 0.01; $icon-size: $font-size * 2; @@ -51,11 +53,124 @@ $color-ternary-70: #8B0046; $color-ternary-60: #720033; $color-ternary-50: #5A0022; -$color-critical: #C91B13; -$color-warning: #FFA316; -$color-success: #4AAB79; +$color-critical-130: #F29088; +$color-critical-120: #E86F62; +$color-critical-110: #DA4B3C; +$color-critical-100: #C91B13; +$color-critical-90: #A9191A; +$color-critical-80: #88181C; +$color-critical-70: #68171B; -$border-default-color: $greyscale-90; +$color-success-130: #A6D3B1; +$color-success-120: #8AC59D; +$color-success-110: #6CB88A; +$color-success-100: #4AAB79; +$color-success-90: #418E63; +$color-success-80: #38724E; +$color-success-70: #2E573A; + +$color-warning-130: #FFCCC0; +$color-warning-120: #FFBC9E; +$color-warning-110: #FFAC6A; +$color-warning-100: #FFA114; +$color-warning-90: #D18915; +$color-warning-80: #A67016; +$color-warning-70: #7D5816; + +$colors: ( + "greyscale": ( + 90: $greyscale-90, + 80: $greyscale-80, + 70: $greyscale-70, + 60: $greyscale-60, + 50: $greyscale-50, + 40: $greyscale-40, + 30: $greyscale-30, + 20: $greyscale-20, + 10: $greyscale-10, + 0: $greyscale-0, + ), + + "primary": ( + 150: $color-primary-150, + 140: $color-primary-140, + 130: $color-primary-130, + 120: $color-primary-120, + 110: $color-primary-110, + 100: $color-primary-100, + 90: $color-primary-90, + 80: $color-primary-80, + 70: $color-primary-70, + 60: $color-primary-60, + 50: $color-primary-50, + ), + + "secondary": ( + 150: $color-secondary-150, + 140: $color-secondary-140, + 130: $color-secondary-130, + 120: $color-secondary-120, + 110: $color-secondary-110, + 100: $color-secondary-100, + 90: $color-secondary-90, + 80: $color-secondary-80, + 70: $color-secondary-70, + 60: $color-secondary-60, + 50: $color-secondary-50, + ), + + "ternary": ( + 150: $color-ternary-150, + 140: $color-ternary-140, + 130: $color-ternary-130, + 120: $color-ternary-120, + 110: $color-ternary-110, + 100: $color-ternary-100, + 90: $color-ternary-90, + 80: $color-ternary-80, + 70: $color-ternary-70, + 60: $color-ternary-60, + 50: $color-ternary-50, + ), + + "critical": ( + 130: $color-critical-130, + 120: $color-critical-120, + 110: $color-critical-110, + 100: $color-critical-100, + 90: $color-critical-90, + 80: $color-critical-80, + 70: $color-critical-70, + ), + + "success": ( + 130: $color-success-130, + 120: $color-success-120, + 110: $color-success-110, + 100: $color-success-100, + 90: $color-success-90, + 80: $color-success-80, + 70: $color-success-70, + ), + + "warning": ( + 130: $color-warning-130, + 120: $color-warning-120, + 110: $color-warning-110, + 100: $color-warning-100, + 90: $color-warning-90, + 80: $color-warning-80, + 70: $color-warning-70, + ), +); + +@function get-color($color-name, $color-level) { + $color: map.get($colors, $color-name); + @return map.get($color, $color-level); + +} + +$border-default-color: get-color(greyscale, 90); $border-big-width: 4px; $border-big: solid $border-big-width $border-default-color; $border-normal-width: 2px; diff --git a/src/components/button.scss b/src/components/button.scss index 5b5427c..c1debfa 100644 --- a/src/components/button.scss +++ b/src/components/button.scss @@ -7,7 +7,7 @@ border: $border-big; border-radius: $border-radius; - color: $greyscale-0; + color: get-color(greyscale, 0); font-family: "Geist"; font-weight: bold; @@ -18,31 +18,36 @@ } } -.register-button { +@mixin button($color-name, $color-level) { @extend %button; - background-color: $color-ternary-90; + background-color: get_color($color-name, $color-level); &:hover { - background-color: $color-ternary-80; + background-color: get_color($color-name, calc($color-level - 10)); } &:active { - background-color: $color-ternary-70; + background-color: get_color($color-name, calc($color-level - 20)); } } +.register-button { + @include button(ternary, 90); +} .login-button { - @extend %button; - - background-color: $color-secondary-90; - - &:hover { - background-color: $color-secondary-80; - } - - &:active { - background-color: $color-secondary-70; - } + @include button(secondary, 90); +} + +.success-button { + @include button(success, 100); +} + +.warning-button { + @include button(warning, 100); +} + +.error-button { + @include button(critical, 100); } diff --git a/src/components/loading.scss b/src/components/loading.scss index dead425..f26b2a1 100644 --- a/src/components/loading.scss +++ b/src/components/loading.scss @@ -75,6 +75,6 @@ top: calc($logo-center-pos + ($background-height * 18)); } - background-color: $greyscale-0; + background-color: get-color(greyscale, 0); } } diff --git a/src/components/login.scss b/src/components/login.scss index e188f92..29e22f5 100644 --- a/src/components/login.scss +++ b/src/components/login.scss @@ -22,10 +22,10 @@ aspect-ratio: $form-aspect-ratio; border: $border-big; - border-color: $color-primary-90; + border-color: get-color(primary, 90); border-radius: $border-radius; - background-color: $greyscale-0; + background-color: get-color(greyscale, 0); display: grid; diff --git a/src/components/spinner.scss b/src/components/spinner.scss index 54868e3..8a25818 100644 --- a/src/components/spinner.scss +++ b/src/components/spinner.scss @@ -18,21 +18,21 @@ $logo-aspect-ratio: calc($logo-width / $logo-height); height: 100%; width: 100%; - fill: $color-primary-100; - stroke: $greyscale-90; + fill: get-color(primary, 100); + stroke: get-color(greyscale, 90); animation: 3s multicolor linear infinite; animation-timing-function: steps($steps, end); @keyframes multicolor { 0% { - fill: $color-primary-100; + fill: get-color(primary, 100); } 33% { - fill: $color-secondary-100; + fill: get-color(secondary, 100); } 66% { - fill: $color-ternary-100; + fill: get-color(ternary, 100); } } diff --git a/src/components/text_input.scss b/src/components/text_input.scss index 088fe46..2b86eb6 100644 --- a/src/components/text_input.scss +++ b/src/components/text_input.scss @@ -7,7 +7,7 @@ width: calc(100% - (2 * $horizontal-padding)); border: $border-normal; - border-color: $color-primary-90; + border-color: get-color(primary, 90); border-radius: $border-radius; padding-left: $horizontal-padding; @@ -33,7 +33,7 @@ } &.invalid { - border-color: $color-critical; + border-color: get-color(critical, 100); } } @@ -43,13 +43,13 @@ font-size: 1.2vh; - color: $color-primary-90; + color: get-color(primary, 90); p { margin: 0; &.invalid { - color: $color-critical; + color: get-color(critical, 100); } } } @@ -118,7 +118,7 @@ height: 100%; width: 100%; - color: $color-secondary-100; + color: get-color(secondary, 100), } }