Adrien/beau-gosse-du-92
1
0
Fork 0
Code Issues 2 Pull Requests 1 Packages Projects Releases Wiki Activity

💄 Store colors in a nested map to make them reachable using criteria

Browse Source
This commit is contained in:
Adrien
2024-03-30 08:23:52 +01:00
parent 0ab6aaac1c
commit 5c91df206c
6 changed files with 153 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/_base.scss
View File

@@ -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;

31
src/components/button.scss
View File

@@ -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;
@include button(secondary, 90);
}
&:active {
background-color: $color-secondary-70;
.success-button {
@include button(success, 100);
}
.warning-button {
@include button(warning, 100);
}
.error-button {
@include button(critical, 100);
}

2
src/components/loading.scss
View File

@@ -75,6 +75,6 @@
top: calc($logo-center-pos + ($background-height * 18));
}
background-color: $greyscale-0;
background-color: get-color(greyscale, 0);
}
}

4
src/components/login.scss
View File

@@ -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;

10
src/components/spinner.scss
View File

@@ -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);
}
}

10
src/components/text_input.scss
View File

@@ -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),
}
}