Started working on redesign.

LinneaStudenttidning · Apr 22, 2024 · ac670a7 · ac670a7
1 parent d468e0a
commit ac670a7
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 54 deletions.
diff --git a/scss/_palette.scss b/scss/_palette.scss
@@ -1,64 +1,80 @@
-$black: #0C120F;
-$white: #F3F7F5;
+$black: #12121A;
+$white: #FAFAFF;
 
-$grey100: desaturate(darken($white, 5%), 10%);
-$grey200: desaturate(darken($white, 20%), 10%);
-$grey300: desaturate(darken($white, 35%), 10%);
-$grey400: desaturate(darken($white, 50%), 10%);
+$grey100: #D3D3D9;
+$grey200: #ADADB3;
+$grey300: #86868D;
+$grey400: #5F5F66;
+$grey500: #393940;
 
-$green100: #75C787;
-$green200: #12662F;
-$green300: #0B471D;
-$green400: #042A0D;
-$green: $green200;
+$green100: #BFEED7;
+$green200: #58D599;
+$green300: #0EB866;
+$green400: #078347;
+$green500: #024B28;
+$green: $green300;
 
+$yellow100: #F8F2C4;
+$yellow200: #EFDF67;
+$yellow300: #E6CD0F;
+$yellow400: #AA9703;
+$yellow500: #5C5100;
+$yellow: $yellow300;
 
-$yellow100: #FED997;
-$yellow200: #CC8D0A;
-$yellow300: #A26C06;
-$yellow400: #623804;
-$yellow: $yellow200;
+$red100: #F8C4B9;
+$red200: #F35D3F;
+$red300: #D72704;
+$red400: #A71D02;
+$red500: #701300;
+$red: $red300;
 
-$red100: #E78D6E;
-$red200: #CC4B16;
-$red300: #892F12;
-$red400: #330002;
-$red: $red200;
+$blue100: #A8CDF0;
+$blue200: #318BDD;
+$blue300: #0E66B8;
+$blue400: #074A88;
+$blue500: #003261;
+$blue: $blue300;
 
-$blue200: #2880de;
-$blue: $blue200;
-
-$purple200: #d020cd;
-$purple: $purple200;
+$purple300: #d020cd;
+$purple: $purple300;
 
 $primary100: $green100;
 $primary200: $green200;
 $primary300: $green300;
 $primary400: $green400;
+$primary500: $green500;
 $primary: $green;
 
-$secondary100: $yellow100;
-$secondary200: $yellow200;
-$secondary300: $yellow300;
-$secondary400: $yellow400;
-$secondary: $yellow;
-
-$tertiary100: $red100;
-$tertiary200: $red200;
-$tertiary300: $red300;
-$tertiary400: $red400;
-$tertiary: $red;
-
-$surface: desaturate(lighten($yellow100, 12%), 40%);
-$standout: $white;
-$text: $black;
-
+$success100: $green100;
+$success200: $green200;
+$success300: $green300;
+$success400: $green400;
+$success500: $green500;
 $success: $green;
+
+$danger100: $red100;
+$danger200: $red200;
+$danger300: $red300;
+$danger400: $red400;
+$danger500: $red500;
 $danger: $red;
+
+$warning100: $yellow100;
+$warning200: $yellow200;
+$warning300: $yellow300;
+$warning400: $yellow400;
+$warning500: $yellow500;
 $warning: $yellow;
+
+$info100: $blue100;
+$info200: $blue200;
+$info300: $blue300;
+$info400: $blue400;
+$info500: $blue500;
 $info: $blue;
 
-$shadow100: rgba($black, 0.05);
+$text: $black;
+$surface: #F2F2FA;
+$standout: $white;
+
 $shadow200: rgba($black, 0.15);
-$shadow300: rgba($black, 0.35);
-$shadow400: rgba($black, 0.5);
diff --git a/scss/buttons.scss b/scss/buttons.scss
@@ -5,7 +5,7 @@
 .btn,
 .btn:visited {
     cursor: pointer;
-    color: palette.$primary400;
+    color: palette.$primary500;
     background-color: palette.$primary100;
     font-family: settings.$font-family-forms;
     font-size: .9rem;
@@ -39,7 +39,7 @@
 
     &[icon]::before {
         @include mixins.icon;
-        color: palette.$primary300;
+        color: palette.$primary400;
     }
 
     &.icon-only {
@@ -51,15 +51,15 @@
     }
 
     &.dangerous {
-        background-color: palette.$red100;
-        color: palette.$red400;
+        background-color: palette.$danger100;
+        color: palette.$danger500;
 
         &:active {
-            background-color: darken(palette.$red100, 5%);
+            background-color: darken(palette.$danger100, 5%);
         }
 
         &[icon]::before {
-            color: palette.$red300;
+            color: palette.$danger400;
         }
     }
 }
diff --git a/scss/layout.scss b/scss/layout.scss
@@ -21,7 +21,7 @@ body {
         grid-area: nav;
         padding: 1rem;
         background-color: palette.$standout;
-        border-bottom: .2rem solid palette.$primary;
+        border-bottom: .2rem solid palette.$primary400;
         box-shadow: 0 .5rem .75rem palette.$shadow200;
 
         a,
@@ -88,7 +88,7 @@ main,
 .side-content {
     > h1:first-child {
         color: palette.$white;
-        background-color: palette.$primary;
+        background-color: palette.$primary400;
         margin: 0 0 1rem 0;
         padding: 1rem;
         font-size: 1.5rem;
@@ -129,7 +129,7 @@ main,
     }
 
     > .sep {
-        background-color: palette.$grey200;
+        background-color: palette.$grey100;
         height: .1rem;
         width: 90%;
         margin: .5rem 5%;