feat: add colors and dark mode support

index.html

@@ -79,6 +79,13 @@
             <a href="#" class="button">Bouton lien</a>
             <button>Bouton</button>
         </div>
+        <br />
+        <a href="#" class="button secondary">Secondary</a>
+        <a href="#" class="button danger">Danger</a>
+        <a href="#" class="button warning">Warning</a>
+        <a href="#" class="button success">Success</a>
+        <a href="#" class="button info">Info</a>
+        <a href="#" class="button grey">Grey</a>
     </p>
     
     <main>
@@ -132,7 +139,7 @@
             <td>Row 2, Column 3</td>
         </tr>
     </table>
-    <table>
+    <table class="colored">
         <thead>
             <tr>
                 <th>Row 1, Column 1</th>

src/_colors.scss

@@ -0,0 +1,121 @@
+:root {
+    --color-contrast-accent: white;
+}
+
+.primary,
+:root {
+    --color-accent-text: #1864ab;
+    --color-accent: #1971c2;
+    --color-accent-hover: #228be6;
+    --color-accent-background: #d0ebff;
+}
+
+.secondary {
+    --color-accent-text: #862e9c; // 9
+    --color-accent: #862e9c; // 9
+    --color-accent-hover: #ae3ec9; // 7
+    --color-accent-background: #f3d9fa; // 2
+}
+
+.danger {
+    --color-accent-text: #c92a2a; // 9
+    --color-accent: #e03131; // 7
+    --color-accent-hover: #fa5252; // 5
+    --color-accent-background: #ffe3e3; // 2
+}
+
+.success {
+    --color-accent-text: #2b8a3e; // 9
+    --color-accent: #2f9e44; // 7
+    --color-accent-hover: #40c057; // 5
+    --color-accent-background: #d3f9d8; // 2
+    //--color-contrast-accent: black;
+}
+
+.warning {
+    --color-accent-text: #e67700; // 9
+    --color-accent: #f59f00; // 7
+    --color-accent-hover: #fcc419; // 5
+    --color-accent-background: #fff3bf; // 2
+    --color-contrast-accent: black;
+}
+
+.info {
+    --color-accent-text: #0b7285; // 9
+    --color-accent: #0c8599; // 7
+    --color-accent-hover: #15aabf; // 5
+    --color-accent-background: #c5f6fa; // 2
+}
+
+.grey {
+    --color-accent-text: #212529; // 9
+    --color-accent: #343a40; // 7
+    --color-accent-hover: #495057; // 5
+    --color-accent-background: #f1f3f5; // 2
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-link-hover: rgba(255, 255, 255, 0.075);
+        --color-background-alt: rgba(255, 255, 255, .075);
+        --color-hr: rgba(255, 255, 255, 0.15);
+
+        --color-text: white;
+        --color-background: #212529;
+        --color-card: #343a40;
+    }
+
+    .primary,
+    :root {
+        --color-accent-text: #d0ebff;
+        --color-accent-background: #{darken(#1864ab, 20%)};
+    }
+
+    .secondary {
+        --color-accent-text: #f3d9fa; // 2
+        --color-accent-background: #{darken(#862e9c, 20%)}; // 9 assombris
+    }
+
+    .danger {
+        --color-accent-text: #ffe3e3; // 9
+        --color-accent-background: #{darken(#c92a2a, 20%)}; // 2
+    }
+
+    .success {
+        --color-accent-text: #d3f9d8; // 9
+        --color-accent-background: #{darken(#2b8a3e, 20%)};
+        ; // 2
+    }
+
+    .warning {
+        --color-accent-text: #fff3bf; // 9
+        --color-accent-background: #{darken(#e67700, 20%)}; // 2
+    }
+
+    .info {
+        --color-accent-text: #c5f6fa; // 9
+        --color-accent-background: #{darken(#0b7285, 20%)}; // 2
+    }
+
+    .grey {
+        --color-accent-text: #f1f3f5; // 9
+        --color-accent-background: #212529; // 2
+    }
+}
+
+.accent,
+table.colored th {
+    background-color: var(--color-accent);
+    color: var(--color-contrast-accent);
+}
+
+.colored-bg,
+.alert,
+table.colored td {
+    color: var(--color-accent-text);
+    background-color: var(--color-accent-background);
+}
+
+.colored-text {
+    color: var(--color-accent-text);
+}

src/components/_well.scss

@@ -19,11 +19,6 @@ pre, .code {
     font-family: var(--font-family-monospace);
 }
 
-.alert {
-    background-color: var(--color-accent-background);
-    color: var(--color-accent-text);
-}
-
 summary {
     color: var(--color-text)!important;
     font-weight: bold;

src/main.scss

@@ -30,4 +30,6 @@
 @import 'components/well';
 @import 'components/buttons';
 @import 'components/menus';
-@import 'components/tables';
+@import 'components/tables';
+
+@import 'colors';