introduce --graphical-fg to replace --faded-fg for borders

8 files changed, 64 insertions, 30 deletions

diff --git a/docs/50-colorways.md b/docs/50-colorways.md
index edec03c..ccf9ad3 100644
--- a/docs/50-colorways.md
+++ b/docs/50-colorways.md
@@ -14,7 +14,7 @@ here is the `.ok` colorway in the missing.css source code:
   .ok {
       --box-bg: var(--ok-bg);
       --accent: var(--ok-fg);
-      --faded-fg: var(--ok-faded-fg);
+      --graphical-fg: var(--ok-graphical-fg);
   }
   ~~~
 
diff --git a/docs/60-variables.md b/docs/60-variables.md
index 5385d0c..3176a77 100644
--- a/docs/60-variables.md
+++ b/docs/60-variables.md
@@ -29,7 +29,10 @@ classes; these will be listed in the documentation for that class.
     color is readable against all of the background colors.
 
 <dfn>`--faded-fg`</dfn> {#var-faded-fg}
-:   De-emphasized graphical elements. Borders. Will not be used as a text color.
+:   Text for disabled interactive components.
+
+<dfn>`--graphical-fg`</dfn> {#var-graphical-fg}
+:   Graphical elements like borders. Not text.
 
 <dfn>`--box-bg`</dfn> {#var-bg-2}
 :   Background for blocks: cards, admonitions etc.
@@ -62,19 +65,19 @@ classes; these will be listed in the documentation for that class.
 <dfn>`--warn-fg`</dfn> {#var-warn-fg}
 :   Foreground color for the `.warn` [colorway][].
 
-<dfn>`--plain-faded-fg`</dfn> {#var-plain-faded-fg}
+<dfn>`--plain-graphical-fg`</dfn> {#var-plain-graphical-fg}
 :   Graphical elements (i.e. borders) color for the `.plain` [colorway][].
 
-<dfn>`--info-faded-fg`</dfn> {#var-info-faded-fg}
+<dfn>`--info-graphical-fg`</dfn> {#var-info-graphical-fg}
 :   Graphical elements (i.e. borders) color for the `.info` [colorway][].
 
-<dfn>`--ok-faded-fg`</dfn> {#var-ok-faded-fg}
+<dfn>`--ok-graphical-fg`</dfn> {#var-ok-graphical-fg}
 :   Graphical elements (i.e. borders) color for the `.ok` [colorway][].
 
-<dfn>`--bad-faded-fg`</dfn> {#var-bad-faded-fg}
+<dfn>`--bad-graphical-fg`</dfn> {#var-bad-graphical-fg}
 :   Graphical elements (i.e. borders) color for the `.bad` [colorway][].
 
-<dfn>`--warn-faded-fg`</dfn> {#var-warn-faded-fg}
+<dfn>`--warn-graphical-fg`</dfn> {#var-warn-graphical-fg}
 :   Graphical elements (i.e. borders) color for the `.warn` [colorway][].
 
 <dfn>`--plain-bg`</dfn> {#var-plain-bg}
diff --git a/releases/1.0.3.md b/releases/1.0.3.md
new file mode 100644
index 0000000..60aca2d
--- /dev/null
+++ b/releases/1.0.3.md
@@ -0,0 +1,30 @@
+---
+release: 1.0.3
+artifacts:
+  Missing.css:
+    Plain: missing.css
+    Minified: missing.min.css
+  Missing Prism:
+    Plain: missing-prism.css
+    Minified: missing-prism.min.css
+  Missing.js:
+    19: missing-js/19.js
+    Tabs: missing-js/tabs.js
+    Menu: missing-js/menu.js
+    Navbar: missing-js/overflow-nav.js
+---
+
+## Changelog
+
+ - Added the `--graphical-fg` variable to replace `--faded-fg` for borders.
+   `--faded-fg` stays for disabled interactive elements.
+
+   This change also includes the following renames:
+
+   | Old                | New                     |
+   |-------------------:|------------------------:|
+   | `--plain-faded-fg` | `--plain-graphical-fg`  |
+   | `--info-faded-fg`  | `--info-graphical-fg`   |
+   | `--ok-faded-fg`    | `--ok-graphical-fg`     |
+   | `--warn-faded-fg`  | `--warn-graphical-fg`   |
+   | `--bad-faded-fg`   | `--bad-graphical-fg`    |
diff --git a/src/aria.css b/src/aria.css
index 351fdeb..278645e 100644
--- a/src/aria.css
+++ b/src/aria.css
@@ -15,7 +15,7 @@
     min-height: var(--rhythm);
     
     color: var(--fg);
-    border: solid var(--faded-fg);
+    border: solid var(--graphical-fg);
     border-width: 1px 1px 0 1px;
     border-block-end-color: transparent;
     background: var(--interactive-bg);
diff --git a/src/colorways.css b/src/colorways.css
index b501533..92a5a17 100644
--- a/src/colorways.css
+++ b/src/colorways.css
@@ -2,31 +2,31 @@
 .plain {
     --box-bg: var(--plain-bg);
     --accent: var(--plain-fg);
-    --faded-fg: var(--plain-faded-fg);
+    --graphical-fg: var(--plain-graphical-fg);
 }
 
 .info {
     --box-bg: var(--info-bg);
     --accent: var(--info-fg);
-    --faded-fg: var(--info-faded-fg);
+    --graphical-fg: var(--info-graphical-fg);
 }
 
 .ok {
     --box-bg: var(--ok-bg);
     --accent: var(--ok-fg);
-    --faded-fg: var(--ok-faded-fg);
+    --graphical-fg: var(--ok-graphical-fg);
 }
 
 .warn {
     --box-bg: var(--warn-bg);
     --accent: var(--warn-fg);
-    --faded-fg: var(--warn-faded-fg);
+    --graphical-fg: var(--warn-graphical-fg);
 }
 
 .bad {
     --box-bg: var(--bad-bg);
     --accent: var(--bad-fg);
-    --faded-fg: var(--bad-faded-fg);
+    --graphical-fg: var(--bad-graphical-fg);
 }
 
 .color {
@@ -39,5 +39,5 @@
 
 .border {
     border-style: solid;
-	border-color: var(--faded-fg);
+	border-color: var(--graphical-fg);
 }
diff --git a/src/components.css b/src/components.css
index db88131..0f7d0da 100644
--- a/src/components.css
+++ b/src/components.css
@@ -14,7 +14,7 @@ aside {
     
     border-radius: var(--border-radius);
     background: var(--box-bg);
-    border: 1px solid var(--faded-fg);
+    border: 1px solid var(--graphical-fg);
 }
 
 .titlebar {
@@ -28,7 +28,7 @@ aside {
 
     translate: 0 calc(-1px - var(--gap));
 
-    background: var(--faded-fg);
+    background: var(--graphical-fg);
     color: var(--bg);
 }
 
diff --git a/src/main.css b/src/main.css
index cf145b4..ca1bb1d 100644
--- a/src/main.css
+++ b/src/main.css
@@ -128,12 +128,12 @@ h6:target {
 
 header {
 	font-family: var(--secondary-font);
-	border-block-end: 1px solid var(--faded-fg);
+	border-block-end: 1px solid var(--graphical-fg);
 }
 
 footer {
 	font-family: var(--secondary-font);
-	border-block-start: 1px solid var(--faded-fg);
+	border-block-start: 1px solid var(--graphical-fg);
 }
 
 body > header,
@@ -190,7 +190,7 @@ blockquote {
 	line-height: var(--rhythm);
 	font-style: italic;
 
-	border-inline-start: 1px solid var(--faded-fg);
+	border-inline-start: 1px solid var(--graphical-fg);
 	color: var(--muted-fg);
 
 	& em, & cite, & dfn, & var, & i, & address {
@@ -316,7 +316,7 @@ small {
 		transition: transform .1s ease-in-out;
 
 		&:hover, &:focus-within {
-			border: 1px solid var(--faded-fg);
+			border: 1px solid var(--graphical-fg);
 			border-radius: var(--border-radius);
 			transform: translateX(calc(
 				0px - var(--sidenote-width)
@@ -370,7 +370,7 @@ kbd kbd /*
 	line-height: 1.1em;
 
 	background: var(--interactive-bg);
-	border: 1px outset var(--faded-fg);
+	border: 1px outset var(--graphical-fg);
 	border-block-end-width: 3px;
 	border-radius: var(--border-radius);
 }
@@ -558,7 +558,7 @@ textarea {
 
 	background: var(--bg);
 	color: var(--fg);
-	border: 1px solid var(--faded-fg);
+	border: 1px solid var(--graphical-fg);
 	border-radius: var(--border-radius);
 
 	vertical-align: top;
@@ -630,7 +630,7 @@ fieldset {
 
 	& > legend + * { margin-block-start: 0 }
 
-	border: 1px solid var(--faded-fg);
+	border: 1px solid var(--graphical-fg);
 }
 /***
  4.11 Interactive elements
diff --git a/src/variables.css b/src/variables.css
index 49b0c6a..8b43d41 100644
--- a/src/variables.css
+++ b/src/variables.css
@@ -2,9 +2,10 @@
 :root {
 	/* Colors */
 	--fg: var(--gray-12); /* Text. */
-	--muted-fg: var(--gray-10); /* De-emphasized or disabled elements' text. Will be
+	--muted-fg: var(--gray-10); /* Secondary text color. Will be
 		used with a background of --c-bg and --c-bg-2 -- check contrast! */
-	--faded-fg: var(--plain-faded-fg); /* De-emphasized or disabled graphical elements. Will not
+	--faded-fg: var(--gray-6); /* Disabled text color. */
+	--graphical-fg: var(--plain-graphical-fg); /* Graphical elements. Will not
 		be used as a text color. */
 	
 	--plain-fg: var(--blue-10);
@@ -13,11 +14,11 @@
 	--bad-fg: var(--red-11);
 	--warn-fg: var(--yellow-11);
 
-	--plain-faded-fg: var(--gray-6);
-	--info-faded-fg: var(--blue-6);
-	--ok-faded-fg: var(--green-6);
-	--bad-faded-fg: var(--red-6);
-	--warn-faded-fg: var(--yellow-6);
+	--plain-graphical-fg: var(--gray-6);
+	--info-graphical-fg: var(--blue-6);
+	--ok-graphical-fg: var(--green-6);
+	--bad-graphical-fg: var(--red-6);
+	--warn-graphical-fg: var(--yellow-6);
 	
 	--bg: var(--gray-0); /* Page background. */
 	--box-bg: var(--plain-bg); /* Background for blocks: cards, admonitions etc. */