feat: add contextual alert support

assets/scss/common/_dark.scss

@@ -140,11 +140,15 @@ $navbar-dark-active-color:          $link-color-dark;
   color: $body-bg-dark;
 }
 
-[data-dark-mode] body .alert-warning {
+[data-dark-mode] body .alert-doks {
   background: $body-overlay-dark;
   color: $body-color-dark;
 }
 
+[data-dark-mode] body .alert-doks a {
+  color: $link-color-dark;
+}
+
 [data-dark-mode] body .page-links a {
   color: $body-color-dark;
 }

assets/scss/components/_alerts.scss

@@ -15,20 +15,7 @@
   text-decoration: underline;
 }
 
-.alert-dark {
+.alert-doks {
-  color: $white;
-  background-color: $black;
-}
-
-.alert-dark .alert-link {
-  color: $white;
-}
-
-.alert-light {
-  color: $black;
-}
-
-.alert-warning {
   background: $beige;
   color: $black;
 }
@@ -53,10 +40,96 @@
   background-color: $primary;
 }
 
+.alert a {
+  text-decoration: underline;
+}
+
 .alert-primary .alert-link {
   color: $white;
 }
 
+/*
+.alert-primary {
+  color: #084298;
+  background-color: #cfe2ff;
+  border-color: #b6d4fe;
+}
+
+.alert-primary .alert-link {
+  color: #06357a;
+}
+*/
+
+.alert-secondary {
+  color: #41464b;
+  background-color: #e2e3e5;
+  border-color: #d3d6d8;
+}
+
+.alert-secondary .alert-link {
+  color: #34383c;
+}
+
+.alert-success {
+  color: #0f5132;
+  background-color: #d1e7dd;
+  border-color: #badbcc;
+}
+
+.alert-success .alert-link {
+  color: #0c4128;
+}
+
+.alert-info {
+  color: #055160;
+  background-color: #cff4fc;
+  border-color: #b6effb;
+}
+
+.alert-info .alert-link {
+  color: #04414d;
+}
+
+.alert-warning {
+  color: #664d03;
+  background-color: #fff3cd;
+  border-color: #ffecb5;
+}
+
+.alert-warning .alert-link {
+  color: #523e02;
+}
+
+.alert-danger {
+  color: #842029;
+  background-color: #f8d7da;
+  border-color: #f5c2c7;
+}
+
+.alert-danger .alert-link {
+  color: #6a1a21;
+}
+
+.alert-light {
+  color: #636464;
+  background-color: #fefefe;
+  border-color: #fdfdfe;
+}
+
+.alert-light .alert-link {
+  color: #4f5050;
+}
+
+.alert-dark {
+  color: #141619;
+  background-color: #d3d3d4;
+  border-color: #bcbebf;
+}
+
+.alert-dark .alert-link {
+  color: #101214;
+}
+
 .alert .alert-link:hover,
 .alert .alert-link:focus {
   text-decoration: none;

layouts/shortcodes/alert.html

@@ -1,4 +1,4 @@
-<div class="alert alert-warning d-flex" role="alert">
+<div class="alert alert-{{ with .Get "context" }}{{.}}{{ else }}doks{{ end }} d-flex" role="alert">
   <div class="flex-shrink-1 alert-icon">{{ with .Get "icon" }}{{.}} {{ end }}</div>
   {{ with .Get "text"}}
     <div class="w-100">{{ . | safeHTML }} </div>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@hyas/doks",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@hyas/doks",
-      "version": "0.3.6",
+      "version": "0.4.0",
       "hasInstallScript": true,
       "license": "MIT",
       "devDependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hyas/doks",
   "description": "Doks theme",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "browserslist": [
     "defaults"
   ],