Merge branch 'dev' into feat-relative-colors

16 files changed, 80 insertions, 47 deletions

diff --git a/package.json b/package.json
index 7ada605..790a79d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "missing.css",
   "author": "Deniz Akşimşek <deniz@denizaksimsek.com> (https://dz4k.com)",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "missing.css is the CSS library we wished already existed.",
   "repository": "github:bigskysoftware/missing",
   "keywords": [
diff --git a/src/components.css b/src/components.css
index b1a8d8d..6faf345 100644
--- a/src/components.css
+++ b/src/components.css
@@ -182,14 +182,14 @@ details,
 		padding-inline-start: 0;
 	}
 
-	& a {
+	& :is(a:not(.\<button\>, .chip), .\<a\>) {
 		font-weight: bold;
 		text-decoration: none;
 		padding-inline: .2em;
-	}
 
-	& a:hover, & a:focus {
-		text-decoration: underline;
+	  &:hover, &:focus {
+  		text-decoration: underline;
+    }
 	}
 
 	& [aria-current=page] {
diff --git a/src/core/sanitize.css b/src/core/sanitize.css
index 9906d65..f2c8f26 100644
--- a/src/core/sanitize.css
+++ b/src/core/sanitize.css
@@ -116,7 +116,7 @@ button, input, select {
  * Correct the inability to style buttons in iOS and Safari.
  */
 
-button, [type="button"], [type="reset"], [type="submit"] {
+button, [type="button"], [type="reset"], [type="submit"]) {
     -webkit-appearance: button;
 }
 
diff --git a/src/layout.css b/src/layout.css
index e3589a0..e446712 100644
--- a/src/layout.css
+++ b/src/layout.css
@@ -80,13 +80,13 @@
 
 /**/
 
-.padding { padding-inline: var(--gap) }
+.padding { padding: var(--gap) }
 .padding-block { padding-block: var(--gap) }
 .padding-block-start { padding-block-start: var(--gap) }
 .padding-block-end { padding-block-end: var(--gap) }
 .padding-inline { padding-inline: var(--gap) }
 .padding-inline-start { padding-inline-start: var(--gap) }
-.padding-inline-end { padding-inline-start: var(--gap) }
+.padding-inline-end { padding-inline-end: var(--gap) }
 
 .margin { margin: var(--gap) }
 .margin-block  { margin-block:  var(--gap) }
diff --git a/src/main.css b/src/main.css
index f468e53..eddac60 100644
--- a/src/main.css
+++ b/src/main.css
@@ -25,7 +25,7 @@ header, footer, section + section {
 }
 
 nav {
-	& a {
+	& :is(a:not(.\<button\>), .\<a\>) {
 		text-decoration: none;
 		color: var(--accent);
 	}
@@ -71,7 +71,7 @@ aside {
 h1, h2, h3, h4, h5, h6,
 .\<h1\>, .\<h2\>, .\<h3\>, .\<h4\>, .\<h5\>, .\<h6\> {
 	margin-block-end: var(--gap);
-	font-family: var(--secondary-font);
+	font-family: var(--display-font);
 	font-size: 1em;
 	margin-block-start: calc(2 * var(--gap));
 	position: relative;
@@ -137,7 +137,7 @@ h6:target {
 }
 
 header {
-	font-family: var(--secondary-font);
+	font-family: var(--display-font);
 	border-block-end: 1px solid var(--graphical-fg);
 }
 
@@ -291,6 +291,7 @@ a, .\<a\> {
 	background: none;
 	border: none;
 	font-size: 1em;
+  font-family: inherit;
 	text-decoration: 1px dotted underline;
 	
 	.list-of-links & {
@@ -484,11 +485,13 @@ label :is(input, select):not([specificity-hack]) {
 	display: inline; padding-block: 0;
 }
 
-button,
-input[type="submit"],
-input[type="reset"],
-input[type="button"],
-.\<button\>,
+:where(
+  button,
+  input[type="submit"],
+  input[type="reset"],
+  input[type="button"],
+  .\<button\>
+):not(.\<a\>),
 input::file-selector-button {
 	display: inline-block;
 	padding: 0 calc(var(--rhythm) / 4);
@@ -512,6 +515,9 @@ input::file-selector-button {
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
+  &:is(a) {
+    cursor: default;
+  }
 
 	&:hover, &:focus-visible {
 		filter: brightness(1.1);
@@ -538,11 +544,13 @@ input::file-selector-button {
 }
 
 
-button,
-input[type="submit"],
-input[type="reset"],
-input[type="button"],
-.\<button\> {
+:where(
+  button,
+  input[type="submit"],
+  input[type="reset"],
+  input[type="button"],
+  .\<button\>
+):not(.\<a\>) {
 	&:active:is([aria-pressed], [aria-expanded]) {
 		color: var(--accent);
 		box-shadow: 0 1px 5px -1px var(--fg) inset;
diff --git a/src/utils.css b/src/utils.css
index beca6e1..9a6bec4 100644
--- a/src/utils.css
+++ b/src/utils.css
@@ -37,7 +37,7 @@
 }
 
 
-.primary-font { font-family: var(--primary-font) }
+.main-font, .primary-font { font-family: var(--main-font) }
 .secondary-font { font-family: var(--secondary-font) }
 .display-font { font-family: var(--display-font) }
 .mono-font, .monospace { font-family: var(--mono-font) }
diff --git a/src/variables.css b/src/variables.css
index a3f210f..ba4d3c1 100644
--- a/src/variables.css
+++ b/src/variables.css
@@ -31,7 +31,8 @@
 
 	/* Fonts */
 	--main-font: 'Source Sans 3', 'Source Sans Pro', -apple-system, system-ui, sans-serif;
-	--secondary-font: var(--main-font); /* Headings etc. */
+	--secondary-font: var(--main-font); /* UI elements and captions */
+  --display-font: var(--secondary-font); /* Headings */
 	--mono-font: 'M Plus Code Latin', monospace, monospace; /* monospace twice stops browsers from
 		shrinking this */
 
@@ -58,17 +59,19 @@
 
 /* Enable dark theme independently of os preferences*/
 :root.-dark-theme {
-    --fg: lch(from var(--accent) 96% calc(.1*C) H);
-	--bg: lch(from var(--accent) 1% calc(.02*C) H);
-	--muted-fg: lch(from var(--accent) 93% calc(.15*C) H);
-	--faded-fg: lch(from var(--accent) 90% calc(.05*C) H);
-	--graphical-fg: lch(from var(--accent) calc(.9*L) calc(.9*C) H);
-
-	--base-accent: var(--blue-2);
-	--muted-accent: lch(from var(--accent) calc(.7*L) calc(.8*C) H);
-
-   	--box-bg: lch(from var(--accent) 12% 5% H); /* Background for blocks: cards, admonitions etc. */
-	--interactive-bg: lch(from var(--accent) 4% 3% H); /* Background for interactive elements */
+    &,* {
+        --fg: lch(from var(--accent) 96% calc(.1*C) H);
+    	--bg: lch(from var(--accent) 1% calc(.02*C) H);
+    	--muted-fg: lch(from var(--accent) 93% calc(.15*C) H);
+    	--faded-fg: lch(from var(--accent) 90% calc(.05*C) H);
+    	--graphical-fg: lch(from var(--accent) calc(.9*L) calc(.9*C) H);
+
+    	--base-accent: var(--blue-2);
+    	--muted-accent: lch(from var(--accent) calc(.7*L) calc(.8*C) H);
+
+    	--box-bg: lch(from var(--accent) 12% 5% H); /* Background for blocks: cards, admonitions etc. */
+        --interactive-bg: lch(from var(--accent) 20% 10% H); /* Background for interactive elements */
+    }
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/www/_includes/release.vto b/www/_includes/release.vto
index 870fc90..7e2107a 100644
--- a/www/_includes/release.vto
+++ b/www/_includes/release.vto
@@ -7,4 +7,4 @@ layout: prose.vto
     {{ release }}
 </h1>
 
-{{ content |> unescape }}
+{{ content }}
diff --git a/www/demos/menu.html b/www/demos/menu.html
index 610914e..d57019f 100644
--- a/www/demos/menu.html
+++ b/www/demos/menu.html
@@ -14,4 +14,4 @@ name: Menu
     </div>
 </main>
 
-<script type="module" src="/missing-js/menu.js"></script>
+<script type="module" src="/dist/js/menu.js"></script>
diff --git a/www/demos/tabs.html b/www/demos/tabs.html
index fbde320..536a9e4 100644
--- a/www/demos/tabs.html
+++ b/www/demos/tabs.html
@@ -6,7 +6,7 @@ name: Tabs
 <main>
     <h1>Tabs</h1>
 
-    <script type="module" src="/missing-js/tabs.js"></script>
+    <script type="module" src="/dist/js/tabs.js"></script>
     <div>
         <div role="tablist">
             <button role="tab" id="tab-1" aria-controls="panel-1" aria-selected="true">Tab 1</button>
diff --git a/www/docs/10-main.md b/www/docs/10-main.md
index 5f6807f..2035c13 100644
--- a/www/docs/10-main.md
+++ b/www/docs/10-main.md
@@ -37,3 +37,6 @@ This will make your page look a bit like the one you are reading right now,
 without applying any classes.
 
 Then, see how you can go beyond classless CSS with its features.
+
+P.S. you can click any class, variable or custom element name in these docs to
+jump to its definition. Try it: `.tool-bar`
diff --git a/www/docs/60-variables.md b/www/docs/60-variables.md
index 9bf9107..49d9dbb 100644
--- a/www/docs/60-variables.md
+++ b/www/docs/60-variables.md
@@ -113,9 +113,12 @@ classes; these will be listed in the documentation for that class.
 <dfn>`--main-font`</dfn> {#var-main-font}
 :   The main font family for text.
 
-<dfn>`--secondary-font`</dfn> {#var-display-font}
+<dfn>`--secondary-font`</dfn> {#var-secondary-font}
 :   A secondary text font. It's a good idea to specify a sans-serif font as it
-    will be used for buttons.
+    will be used for buttons and captions.
+
+<dfn>`--display-font`</dfn> {#var-display-font}
+:   A display font used for headings.
 
 <dfn>`--mono-font`</dfn> {#var-mono-font}
 :   Monospace font for code, preformatted text, computer input and output.
diff --git a/www/docs/80-utils.md b/www/docs/80-utils.md
index e06e469..0907a7a 100644
--- a/www/docs/80-utils.md
+++ b/www/docs/80-utils.md
@@ -83,8 +83,8 @@ You can set `--density` yourself in inline styles or your own CSS:
 <dfn>`.allcaps`</dfn>
 :   Sets text in all caps and adds appropriate letter spacing.
 
-<dfn>`.primary-font`</dfn>
-:   Renders the text in the primary font (`--primary-font`).
+<dfn>`.main-font`</dfn>
+:   Renders the text in the main font (`--main-font`).
 
 <dfn>`.secondary-font`</dfn>
 :   Renders the text in the secondary font (`--secondary-font`).
diff --git a/www/docs/90-flex.md b/www/docs/90-flex.md
index 18cdd0e..726eb61 100644
--- a/www/docs/90-flex.md
+++ b/www/docs/90-flex.md
@@ -12,7 +12,7 @@ url: ./flex/
 
 <dfn>`.f-row`</dfn> and <dfn>`.f-col`</dfn> will create non-wrapping Flexbox containers, with `flex-direction` set to `row` and `column` respectively.
 
-<dfn>`.f-switch`</dfn> will create a Flexbox container that will switch from row to column when the width of an individual descendant exceeds the <dfn>`--col-width`</dfn> variable (default `15ch`).
+<dfn>`.f-switch`</dfn> will create a Flexbox container that will switch from row to column when the width of an individual descendant exceeds the <dfn>`--f-switch-threshold`</dfn> variable (default `15ch`).
 
 All of `.f-row`, `.f-col` and `.f-switch` will remove margins from their children, and have a [gap] set to `--gap`.
 
diff --git a/www/netlify.redirects b/www/netlify.redirects
index 52bdbf9..ee38c25 100644
--- a/www/netlify.redirects
+++ b/www/netlify.redirects
@@ -1,5 +1,6 @@
-https://the.missing.style                     https://unpkg.com/missing.css                  301
-https://the.missing.style/                    https://unpkg.com/missing.css                  301
-https://the.missing.style/prism               https://unpkg.com/missing.css/prism            301
-https://the.missing.style/:version            https://unpkg.com/missing.css@:version         301
-https://the.missing.style/:version/*          https://unpkg.com/missing.css@:version/:splat  301
+http://the.missing.style/*                    https://the.missing.style/:splat               301!
+https://the.missing.style                     https://unpkg.com/missing.css                  301!
+https://the.missing.style/                    https://unpkg.com/missing.css                  301!
+https://the.missing.style/prism               https://unpkg.com/missing.css/prism            301!
+https://the.missing.style/:version            https://unpkg.com/missing.css@:version         301!
+https://the.missing.style/:version/*          https://unpkg.com/missing.css@:version/:splat  301!
diff --git a/www/releases/1.1.3.md b/www/releases/1.1.3.md
new file mode 100644
index 0000000..d1158da
--- /dev/null
+++ b/www/releases/1.1.3.md
@@ -0,0 +1,15 @@
+# Changelog
+
+- The following changes are all the work of
+  [@geoffrey-eisenbarth@github.com](https://github.com/geoffrey-eisenbarth):
+  - Added feed.js, an implementation of ARIA Feed. {.info .color}
+  - Fixed: Renaming of `--primary-font` to `--main-font` was incomplete. {.ok .color}
+  - Fixed: `--display-font` was documented as being renamed to
+    `--secondary-font`, but both variables were actually in use. {.ok .color}
+    Now, both are documented and used for their respective purposes.
+  - The masquerade class `.<a>` did not work as expected on `<button>`
+    elements. {.ok .color}
+  Thanks Geoffrey!
+- Added a `-dark-theme` class to force-enable the dark theme. Thanks
+  [@DavesBorges@github.com](https://github.com/DavesBorges)! {.info .color}
+  - Fixed some packaging and distribution issues. {.ok .color}