adding a theme color accent

src/stylelite.css

@@ -11,12 +11,16 @@
     --black: #000;
     --gray: #DCDCDC;
 
+    --light: #f1f1f1;
+    --dark: #222;
+
+    --theme: steelblue;
+
     --primary: #1F618D;
-    --info: #3498DB;
     --warning: #B7950B;
     --danger: #C0392B;
     --success: #1E8449;
-    --default: #DCDCDC;
+    --default: #EEE;
 }
 
 [data-theme=dark] {
@@ -63,7 +67,7 @@ table {
 }
 
 table>thead>tr>th {
-    border-bottom: 2px solid var(--mg);
+    border-bottom: 2px solid var(--theme);
 }
 
 table.striped tbody>:nth-child(2n-1) {
@@ -75,8 +79,8 @@ th {
 }
 
 th,td {
-    border-bottom: 1px solid var(--mg);
     padding: .5rem;
+    border-bottom: 1px solid var(--theme);
 }
 
 fieldset {border: none;padding: 0;}
@@ -89,19 +93,24 @@ legend {
     margin-bottom: 1rem;
     line-height: inherit;
     border: 0;
-    border-bottom: 1px solid var(--mg);
+    border-bottom: 1px solid var(--theme);
 }
 
 blockquote {
     margin: var(--space) 0;
-    border-left: calc(var(--space) / 2) solid var(--fg);
+    border-left: calc(var(--space) / 2) solid var(--theme);
     color: var(--black);
-    background: var(--gray);
+    background: var(--default);
     padding: var(--space);
 }
 
+blockquote.primary {background: #DEF}
+blockquote.danger {background: #FEE}
+blockquote.warn {background: #FEA}
+blockquote.success {background: #DFE}
+
 code {
-    color: var(--mg);
+    background: var(--default);
     font-family: monospace;
 }
 
@@ -110,7 +119,7 @@ blockquote code, details code {
 }
 
 hr {
-    color: var(--mg);
+    color: var(--theme);
     border: 1px solid;
 }
 
@@ -119,6 +128,8 @@ h1,h2,h3,h4,h5,h6 {
     padding-bottom: calc(var(--space) / 2);
     text-transform: capitalize;
     color: var(--fg);
+
+    color: var(--theme);
 }
 
 h1 {
@@ -131,7 +142,7 @@ h4 {font-size: 1.2rem}
 h5 {font-size: 1rem}
 h6 {font-size: .9rem}
 
-a {color: var(--primary)}
+a {color: var(--theme)}
 a:hover {opacity: .5;}
 /* a:hover {color: var(--fg)} */
 
@@ -142,7 +153,7 @@ section, article {
 
 article {
     border: 1px solid rgba(0,0,0,.125);
-    background: var(--gray);
+    background: var(--default);
 }
 
 article main {
@@ -176,7 +187,7 @@ details[open] {
     margin-bottom: var(--space);
 }
 
-details>* {padding: calc(var(--space)/2); border-top: 1px solid var(--bg)}
+details>* {padding: calc(var(--space)/2); border-top: 1px solid var(--theme)}
 
 summary {
     background-color: var(--default);
@@ -191,8 +202,8 @@ button, input {
     color: var(--fg);
     min-width: fit-content;
     width: 100%;
-    border: 1px solid var(--mg);
     height: 2.5rem;
+    border: 1px solid var(--theme);
     border-radius: var(--radius);
     padding: .5rem 1rem;
 }
@@ -214,7 +225,12 @@ button[disabled], button[disabled]:hover {
 button.link {
     border: none;
     background: none;
-    color: var(--primary)
+    color: var(--theme)
+}
+
+button {
+    background: var(--theme);
+    color: var(--white);
 }
 
 button.default {
@@ -248,10 +264,10 @@ button.success {
 
 button:hover, input[type="reset"]:hover,input[type="submit"]:hover {
     /* background: var(--mg); */
-    background: #DCDCDC;
+    background: var(--dark);
-    color: var(--black);
+    border: 2px solid var(--theme);
+    color: var(--light);
     cursor: pointer;
-
 }
 
 button.link:hover {
@@ -265,7 +281,7 @@ input:disabled {
 }
 
 select:focus,textarea:focus,input:focus {
-    border: 2px solid var(--mg);
+    border: 2px solid var(--theme);
 }
 
 input[type="checkbox"],input[type="radio"] {
@@ -282,7 +298,7 @@ select,textarea {
     font-size: var(--size);
     height: 2.5rem;
     width: 100%;
-    border: 1px solid var(--mg);
+    border: 1px solid var(--theme);
     color: var(--fg);
     background: var(--bg);
     border-radius: var(--radius);
@@ -304,7 +320,7 @@ select {
 textarea {
     overflow: auto;
     resize: vertical;
-    border: 1px solid var(--mg);
+    border: 1px solid var(--theme);
     height: calc(var(--size) * 6rem);;
     padding: clamp(.5rem, var(--space), 2rem);
     cursor: text;
@@ -316,7 +332,7 @@ textarea {
 nav {
     display: flex;
     justify-content: space-between;
-    border-bottom: 1px solid var(--mg);
+    border-bottom: 1px solid var(--theme);
 }
 
 nav ul {
@@ -377,8 +393,8 @@ nav ul li a:hover {opacity: .75;}
 .fill {width: 100%; height: 100%}
 .outline {background-color: transparent; color: var(--fg); border: 1px solid var(--fg)}
 .underline {border-bottom: 1px solid var(--mg)}
-.border {border: 1px solid var(--mg)}
 .content {padding: var(--space)}
+.border {border: 1px solid var(--theme)}
 .title {margin: 0; padding:0}
 .subtitle {margin-top: -.25rem; font-size: small};
 .spaceless {margin: 0; padding:0}