beau-gosse-du-92/src/ui/_base.scss

@use "sass:map";

$font-size: 100vh * 0.01;
$icon-size: $font-size * 2;

// TODO: To remove once the design updated.
$border-style: thin solid #BED6E0;

$greyscale-90: #1B1B1B;
$greyscale-80: #303030;
$greyscale-70: #474747;
$greyscale-60: #5E5E5E;
$greyscale-50: #777777;
$greyscale-40: #919191;
$greyscale-30: #ABABAB;
$greyscale-20: #C6C6C6;
$greyscale-10: #E2E2E2;
$greyscale-0: #FFFFFF;

$color-primary-150: #E2F2F7;
$color-primary-140: #C4E5EE;
$color-primary-130: #A5D7E6;
$color-primary-120: #83CADE;
$color-primary-110: #5CBDD5;
$color-primary-100: #1DB2CF;
$color-primary-90: #0092AF;
$color-primary-80: #007691;
$color-primary-70: #005A75;
$color-primary-60: #004059;
$color-primary-50: #002740;

$color-secondary-150: #EAE5F3;
$color-secondary-140: #D5CCE7;
$color-secondary-130: #BFB3DB;
$color-secondary-120: #AA9BCF;
$color-secondary-110: #9583C3;
$color-secondary-100: #7E6BB6;
$color-secondary-90: #6957A0;
$color-secondary-80: #53448A;
$color-secondary-70: #3E3174;
$color-secondary-60: #281F5F;
$color-secondary-50: #110E4B;

$color-ternary-150: #FCE0E9;
$color-ternary-140: #F7C1D4;
$color-ternary-130: #F1A1BF;
$color-ternary-120: #E981AA;
$color-ternary-110: #E05F96;
$color-ternary-100: #D53583;
$color-ternary-90: #BC106D;
$color-ternary-80: #A30059;
$color-ternary-70: #8B0046;
$color-ternary-60: #720033;
$color-ternary-50: #5A0022;

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

$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;
$border-normal: solid $border-normal-width $border-default-color;
$border-thin-width: 1px;
$border-thin: solid $border-thin-width $border-default-color;


// TODO: Radius should be a percentage(eg: 1024/16px).
$border-radius: 16px;

$transition-duration: 300ms;

@font-face {
    font-family: "Geist";
    font-weight: normal;
}

@font-face {
    font-family: "Geist";
    font-weight: bold;
}

// Cf. https://css-tricks.com/box-sizing/
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
    height: 100vh;
    width: 100vw;

    margin: 0px;
    padding: 0px;
    outline: 0px;
}

input {
    font-family: inherit;
}

#main {
    height: 100%;
    width: 100%;

    font-family: "Geist";
    font-weight: normal;
}

::selection {
    background-color: transparent;
}