diff --git a/examples/settings.html b/examples/settings.html
deleted file mode 100644
index fad22f0..0000000
--- a/examples/settings.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Settings</title>
-
-    <link rel="stylesheet" href="/stylelite.css">
-</head>
-<body>
-    <main>
-        <h1>Stylelite Variables</h1>
-        <form action="">
-            <table>
-                <thead>
-                    <tr>
-                        <th>Property</th>
-                        <th>Description</th>
-                        <th>Default Value</th>
-                        <th>Current Value</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <code>--theme</code>
-                        </td>
-                        <td>
-                            A theme accent color
-                        </td>
-                        <td>
-                            <code>steelblue</code>
-                        </td>
-                        <td>
-                            <input type="color" name="theme" class="spaceless">
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </form>
-    </main>
-</body>
-</html>
\ No newline at end of file
diff --git a/examples/tabs.html b/examples/tabs.html
index b71869d..58bff99 100644
--- a/examples/tabs.html
+++ b/examples/tabs.html
@@ -39,7 +39,7 @@
     </main>
     <script>
 
-        const $ = document.querySelectorAll.bind(document);
+        const $ = (s) => Array.from(document.querySelectorAll(s));
 
         let tabs = $("[role='tabs'] a");
 
diff --git a/src/extras/colors.css b/src/extras/colors.css
index 2171073..582f50f 100644
--- a/src/extras/colors.css
+++ b/src/extras/colors.css
@@ -1,16 +1,17 @@
 :root {
-    --info: steelblue;
-    --warning: #B7950B;
-    --danger: #C0392B;
-    --success: #1E8449;
+    --success: #198754;
+    --warning: #FBC02D;
+    --danger: #C62828;
 }
 
-blockquote.info {background: #EBF5FB; color: var(--info); border: 1px solid var(--theme)}
-blockquote.danger {background: #FDEDEC; color: var(--danger); border: 1px solid var(--danger)}
-blockquote.warn {background: #FEF9E7; color: var(--warning) ; border: 1px solid var(--warning)}
-blockquote.success {background: #EAFAF1; color: var(--success); border: 1px solid var(--success)}
+.success {color: var(--light); background: var(--success);}
+.warning {color: var(--dark); background: var(--warning);}
+.danger {color: var(--light); background: var(--danger);}
 
-button.info {background: var(--info);color: var(--white);}
-button.warning {background: var(--warning);color: var(--white);}
-button.danger {background: var(--danger);color: var(--white);}
-button.success {background: var(--success);color: var(--white);}
+blockquote.success {border-color: var(--success);}
+blockquote.warning {border-color: var(--warning);}
+blockquote.danger {border-color: var(--danger);}
+
+.text-success {color: var(--success)}
+.text-warning {color: var(--warning)}
+.text-danger {color: var(--danger)}
\ No newline at end of file
diff --git a/src/extras/dialog.css b/src/extras/dialog.css
index 4db5fbd..7823c60 100644
--- a/src/extras/dialog.css
+++ b/src/extras/dialog.css
@@ -9,4 +9,8 @@ dialog {
     box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25);
     padding: calc(var(--size) * 2);
     max-width: 85%;
-}
\ No newline at end of file
+}
+
+dialog::backdrop {
+    background-color: rgba(0, 0, 0, 0.8);
+} 
\ No newline at end of file
diff --git a/src/stylelite.css b/src/stylelite.css
index bfa7139..4e6c0c1 100644
--- a/src/stylelite.css
+++ b/src/stylelite.css
@@ -45,7 +45,7 @@ html,body {
     line-height: 1.5rem;
 }
 
-span,div, input, button, textarea, select {margin-bottom: .25rem;margin-top: .25rem;}
+span,div, input, button, a,textarea, select {margin-bottom: .25rem;margin-top: .25rem;}
 
 p {margin: 1rem 0}
 
@@ -77,7 +77,7 @@ label.addon {
 pre,code {
     background: var(--light);
     color: var(--dark);
-    padding: .25rem
+    padding: .25rem;
 }
 
 main {
@@ -159,7 +159,7 @@ h4 {font-size: 1.2rem}
 h5 {font-size: 1.1rem}
 h6 {font-size: 1rem}
 
-a {color: var(--theme)}
+a {color: var(--theme);}
 a:hover {color: var(--dark);}
 
 section, article {
@@ -175,6 +175,10 @@ article, aside {
 
 /* Forms */
 
+input:user-invalid {
+    outline: 2px solid var(--theme);
+}
+
 details {
     margin: var(--size) 0;
     color: var(--fg);
@@ -202,10 +206,11 @@ summary {
 summary:hover {cursor: pointer;}
 details:not(summary):hover {cursor: default}
 
-a.button, button, input {
+a.button,button, input {
     display: inline-block;
-    outline: none;
     box-sizing: border-box;
+    text-decoration: none;
+    outline: none;
     font-size: 1rem;
     background: var(--bg);
     color: var(--fg);
@@ -329,11 +334,11 @@ nav {
 }
 nav.navbar {
     background: var(--theme);
-    color: var(--light);
+    color: var(--white);
     border: none;
 }
-.navbar li:hover {background: var(--white);color: var(--theme)}
-.navbar li a {color: inherit}
+.navbar li:hover {background: var(--white);color: var(--black); cursor: pointer;}
+.navbar li a {color: inherit;}
 
 nav ul {display: flex;list-style-type: none;margin:0;padding:0; line-height: 2rem}
 nav ul li {padding:0rem .5rem;margin:0}
