Update defaut theme

Remove squares theme

public/templates/board/board.css

@@ -1,26 +1,72 @@
 :root {
     color-scheme: light dark;
-    --background-color: light-dark(#e7e6df, #1d1e22);
-    --breadcrumb-color: #333333;
-    --caption-text-color: light-dark(#e7e6df, #333333);
-    --header-background: #fff;
-    --header-color: #333333;
-    --link-color: var(--title-color);
-    --link-hover-color: #e34f54;
-    --message-background: #2ecc71;
-    --text-color: light-dark(#333333, #e7e6df);
-    --title-color: #cc2027;
-    --logo-stroke: #333333;
+
+    --primary: #cc2027;
+    --primary-darken: #8E161B;
+    --primary-lighten: #D64C52;
+    --primary-text-contrast: #FFF;
+
+    --secondary: #20ccc5;
+    --secondary-darken: #168E89;
+    --secondary-lighten: #4CD6D0;
+    --secondary-text-contrast: #000;
+
+    --error: #c43933;
+    --error-darken: #892723;
+    --error-lighten: #CF605B;
+    --error-text-contrast: #FFF;
+
+    --info: #206ccc;
+    --info-darken: #164B8E;
+    --info-lighten: #4C89D6;
+    --info-text-contrast: #FFF;
+
+    --success: #7dcc20;
+    --success-darken: #578E16;
+    --success-lighten: #97D64C;
+    --success-text-contrast: #000;
+
+    --warning: #cc5e20;
+    --warning-darken: #8E4116;
+    --warning-lighten: #D67E4C;
+    --warning-text-contrast: #FFF;
+
+    --background-color: light-dark(#fffbfb, #171414);
+    --background-color-darken: light-dark(#B2AFAF, #100E0E);
+    --background-color-lighten: light-dark(#FFFBFB, #454343);
+
+    --header-background-color: light-dark(#171414, #fffbfb);
+    --header-background-color-darken: light-dark(#100E0E, #B2AFAF);
+    --header-background-color-lighten: light-dark(#454343, #FFFBFB);
+
+    --header-text-color: light-dark(#fffbfb, #171414);
+    --header-text-color-secondary: #ffffffb3;
+    --header-text-color-disable: light-dark(#ffffff80, #454343);
+
+    --text-color: light-dark(#171414, #fffbfb);
+    --text-color-secondary: #ffffffb3;
+    --text-color-disable: light-dark(#454343, #ffffff80);
+
+    --text-color-inverse: light-dark(#fffbfb, #171414);
+    --text-color-secondary-inverse: #ffffffb3;
+    --text-color-disable-inverse: light-dark(#ffffff80, #454343);
+
+    --h1-color: var(--primary);
+    --h2-color: #c33d35;
+    --h3-color: #b94f44;
+    --h4-color: #ae5e52;
+    --h5-color: #a16a61;
+    --h6-color: #927671;
 }
 
 [data-theme="dark"] {
-    --background-color: #1d1e22;
-    --text-color: #e7e6df;
+    --background-color: #171414;
+    --text-color: #fffbfb;
 }
 
 [data-theme="light"] {
-    --background-color: #e7e6df;
-    --text-color: #333333;
+    --background-color: #fffbfb;
+    --text-color: #171414;
 }
 
 * {
@@ -44,13 +90,13 @@ body {
 }
 
 a {
-    color: var(--link-color);
+    color: var(--primary);
     font-weight: bold;
     text-decoration: none;
 }
 
 a:not(.card-content):hover {
-    color: var(--link-hover-color);
+    color: var(--primary-lighten);
 }
 
 h1 {
@@ -61,18 +107,18 @@ h1 {
 }
 
 h1 a {
-    color: var(--link-color);
+    color: var(--h1-color);
 }
 
 #logo-border-color {
-    fill: var(--title-color) !important;
+    fill: var(--primary) !important;
     stroke: none !important;
 }
 
 .logo {
     height: 3em;
     vertical-align: middle;
-    stroke: var(--logo-stroke) !important;
+    stroke: var(--header-text-color) !important;
 }
 
 #dark-mode {
@@ -82,8 +128,8 @@ h1 a {
 }
 
 body>header {
-    background-color: var(--header-background);
-    color: var(--header-color);
+    background-color: var(--header-background-color);
+    color: var(--header-text-color);
     padding: 0;
     margin: 0 0 .5em 0;
 }
@@ -93,7 +139,11 @@ body>header {
 }
 
 #breadcrumb a {
-    color: var(--breadcrumb-color);
+    color: var(--primary);
+}
+
+#breadcrumb a:hover {
+    color: var(--primary-lighten);
 }
 
 #container,
@@ -103,7 +153,8 @@ body>header {
 }
 
 .message {
-    background-color: var(--message-background);
+    background-color: var(--success);
+    color: var(--success-text-contrast);
     border-radius: 2px;
 }
 
@@ -129,7 +180,7 @@ aside {
 }
 
 aside a {
-    color: var(--title-color);
+    color: var(--primary);
     text-decoration: none;
 }
 
@@ -145,7 +196,7 @@ aside * {
 }
 
 .card {
-    background-color: var(--header-background);
+    background-color: var(--header-background-color);
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     margin: 0;
@@ -160,7 +211,7 @@ aside * {
 }
 
 .card-footer {
-    color: var(--header-color);
+    color: var(--header-text-color);
     margin: 0;
     overflow: hidden;
     padding: .3em .6em;
@@ -169,12 +220,6 @@ aside * {
     white-space: nowrap;
 }
 
-#backtop,
-#backtop:hover,
-#backtop:active {
-    transition: all .2s ease-in;
-}
-
 footer {
     padding-top: 1em;
     text-align: center;
@@ -193,9 +238,8 @@ footer a {
 #backtop {
     bottom: 0;
     border-radius: 4px;
-    box-shadow: 0px 0px 2px -1px #000;
-    background-color: var(--title-color);
-    color: var(--header-background);
+    background-color: var(--primary);
+    color: var(--text-color-secondary);
     display: block;
     margin: .5%;
     padding: 1rem 4rem;
@@ -204,7 +248,7 @@ footer a {
 }
 
 #legend {
-    background-color: var(--header-background);
+    background-color: var(--header-background-color);
     flex: none;
     max-width: 90%;
     width: 100%;
@@ -215,14 +259,14 @@ footer a {
     flex-direction: row;
 
     p {
-        background-color: var(--header-background);
+        background-color: var(--header-background-color);
         width: 100%;
         max-width: 90%;
     }
 }
 
 .gdesc-inner {
-    color: var(--caption-text-color);
+    color: var(--text-color-inverse);
     word-break: break-word;
 }