Start reset of global spacing with 'base' Sass partials

assets-src/styles/advanced.scss

@@ -23,7 +23,6 @@
 /*------------------------------------*\
     #Mixins
 \*------------------------------------*/
-@import "sass/20-mixins/font-sizes";
 @import "sass/20-mixins/media-query";
 @import "sass/20-mixins/stack";
 

assets-src/styles/core.scss

@@ -9,6 +9,7 @@
 @import "sass/00-settings/colors";
 //@import "sass/00-settings/debug";
 @import "sass/00-settings/fonts";
+@import "sass/00-settings/font-sizes";
 @import "sass/00-settings/typesetting";
 
 
@@ -24,29 +25,24 @@
 /*------------------------------------*\
     #Mixins
 \*------------------------------------*/
-@import "sass/20-mixins/font-sizes";
 @import "sass/20-mixins/media-query";
 @import "sass/20-mixins/stack";
 
 
 
 /*------------------------------------*\
     #Base
-
-    Normalize comes first for the cascade
 \*------------------------------------*/
-@import "../../node_modules/normalize.css/normalize";
+@import "sass/30-base/global-reset";
 @import "sass/30-base/animation";
 @import "sass/30-base/quotes";
 @import "sass/30-base/body";
-@import "sass/30-base/box-sizing";
 @import "sass/30-base/buttons";
 @import "sass/30-base/focus";
 @import "sass/30-base/forms";
 @import "sass/30-base/hide-and-show";
 @import "sass/30-base/html-elements";
 @import "sass/30-base/icons";
-@import "sass/30-base/images";
 @import "sass/30-base/links";
 @import "sass/30-base/lists";
 @import "sass/30-base/skip-link";
@@ -73,6 +69,7 @@
 /*------------------------------------*\
     #Core components
 \*------------------------------------*/
+@import "sass/50-core-components/avatars";
 @import "sass/50-core-components/header";
 @import "sass/50-core-components/archive-banner";
 @import "sass/50-core-components/logo";

assets-src/styles/sass/00-settings/_font-sizes.scss

@@ -0,0 +1,20 @@
+/*------------------------------------*\
+    #Font sizes
+
+    Fluid type calculations generated using Utopia:
+    https://utopia.fyi/type/calculator/?c=320,16,1.125,1120,18,1.125,7,1,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12
+
+    CSS custom property names have been adapted from Utopia, add namespacing, give explicit usage context and use kebab case.
+\*------------------------------------*/
+
+:root {
+    --w3c-text-01: clamp(0.8889rem, 0.8444rem + 0.2222vw, 1rem);
+    --w3c-text-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
+    --w3c-text-1: clamp(1.125rem, 1.0688rem + 0.2813vw, 1.2656rem);
+    --w3c-text-2: clamp(1.2656rem, 1.2023rem + 0.3164vw, 1.4238rem);
+    --w3c-text-3: clamp(1.4238rem, 1.3526rem + 0.356vw, 1.6018rem);
+    --w3c-text-4: clamp(1.6018rem, 1.5217rem + 0.4005vw, 1.802rem);
+    --w3c-text-5: clamp(1.802rem, 1.7119rem + 0.4505vw, 2.0273rem);
+    --w3c-text-6: clamp(2.0273rem, 1.9259rem + 0.5068vw, 2.2807rem);
+    --w3c-text-7: clamp(2.2807rem, 2.1667rem + 0.5702vw, 2.5658rem);
+}

assets-src/styles/sass/30-base/_body.scss

@@ -2,21 +2,13 @@
     #Body
 \*------------------------------------*/
 
-
-html {
-	height: 100%;
-}
-
 /**
- Typographical styles for fonts are in 40-base/_typography.scss
+ Typographical styles for fonts are in 30-base/_typography.scss
  */
 body {
 	background-color: $white;
 	color: $off-black;
-	min-height: 100%;
 	overflow-x: hidden;
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-font-smoothing: antialiased;
 }
 
 /**
@@ -26,5 +18,5 @@ Styles needed for a sticky footer
 	display: grid;
 	grid-template-columns: 100%;
 	grid-template-rows: 1fr auto;
-	min-height: 100vh;
+	min-block-size: 100vh;
 }

assets-src/styles/sass/30-base/_buttons.scss

@@ -1,24 +1,28 @@
 /*------------------------------------*\
     #Buttons
 
-    1. High contrast themes tend to eliminate background-color.
+    1. Prevent `.button` going full-width if a child of a flex column.
+
+    2. High contrast themes tend to eliminate background-color.
     With no border set, we need to apply a transparent outline to
     maintain the button shape. The negative outline-offset moves
     the outline inside the perimeter so it behaves like a border.
 \*------------------------------------*/
 
 button,
 .button {
+    align-items: center;
+    align-self: start; /* 1 */
 	background-color: $link-color;
 	border: solid 2px $link-color;
 	border-radius: rem(24);
 	color: $white;
-	display: inline-block;
-	font-size: rem(14);
+	display: inline-flex;
+	font-size: var(--w3c-text-01);
 	font-weight: $emphasis;
-	line-height: 1.5;
-	outline: 2px solid transparent; /* 1 */
-	outline-offset: -2px; /* 1 */
+    justify-content: center;
+	outline: 2px solid transparent; /* 2 */
+	outline-offset: -2px; /* 2 */
 	padding: rem(11) rem(24);
 
 	&:hover {
@@ -34,10 +38,6 @@ button,
 	}
 }
 
-button:not([type="submit"]) {
-	text-align: start;
-}
-
 
 /**
 Remove link styling from links styled as buttons.
@@ -47,19 +47,9 @@ Remove link styling from links styled as buttons.
 }
 
 
-/**
-Remove link styling from actual buttons styled as buttons.
- */
-button.button,
-input[type="submit"].button {
-	text-decoration: none;
-}
-
-
 // Full-width buttons
-.button--wide {
-	text-align: center;
-	width: 100%;
+.button--wide.button--wide {
+	inline-size: 100%;
 }
 
 
@@ -102,6 +92,7 @@ input[type="submit"].button {
 
 // Disabled buttons
 .button[disabled],
+.button[disabled],
 .button.js-disabled {
 	background-color: $twiki-gray;
 	border-color: $twiki-gray;

assets-src/styles/sass/30-base/_details-and-summary.scss

@@ -6,24 +6,23 @@ summary {
 	color: $link-color;
 	cursor: pointer;
 	display: inline-block;
-	padding-left: rem(25);
+    padding-block: rem(10);
+    padding-inline-start: rem(25);
 	position: relative;
 
 	&::before {
-		border-color: transparent;
-		border-left-color: inherit;
-		border-style: solid;
-		border-width: 7px 0 7px 12.124px;
-		bottom: 0;
-		clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
-		content: '';
-		display: block;
-		height: 0;
-		left: 0;
-		margin: auto;
-		position: absolute;
-		top: rem(-1);
-		width: 0;
+        block-size: 0;
+        border-color: transparent;
+        border-inline-start-color: inherit;
+        border-style: solid;
+        border-width: 7px 0 7px 12.124px;
+        content: '';
+        display: block;
+        inline-size: 0;
+        inset-block: rem(-1) 0;
+        inset-inline-start: 0;
+        margin: auto;
+        position: absolute;
 	}
 
 	&::-webkit-details-marker {
@@ -36,11 +35,7 @@ summary {
 
 	span {
 		display: inline-block;
-		padding-bottom: rem(10);
-		padding-top: rem(10);
-		text-decoration: underline; /* 1 */
-		text-decoration-skip-ink: auto; // Not supported by Safari
-		text-underline-offset: 0.25em; // Supported by Safari
+		text-decoration: underline;
 	}
 
 	&:focus {
@@ -55,28 +50,24 @@ summary {
 
 }
 
-details {
-	margin-bottom: 1rem;
-	margin-top: 1rem;
-}
+// details {
+// 	margin-bottom: 1rem;
+// 	margin-top: 1rem;
+// }
+
+// details[open] > summary {
+// 	margin-bottom: 1rem;
+// }
 
-details[open] > summary {
-	margin-bottom: 1rem;
+[dir="rtl"] summary::before {
+    border-width: 7px 12.124px 7px 0;
 }
 
+
 details[open] > summary::before {
-	transform: rotate(90deg);
+    transform: rotate(90deg);
 }
 
-[dir="rtl"] {
-	summary {
-		padding-left: 0;
-		padding-right: rem(25);
-
-		&::before {
-			left: auto;
-			right: 0;
-			transform: rotate(180deg);
-		}
-	}
+[dir="rtl"] details[open] > summary::before {
+    transform: rotate(-90deg);
 }

assets-src/styles/sass/30-base/_focus.scss

@@ -13,8 +13,8 @@
 }
 
 /**
-Where focus is moved to the target via JavaScript, it is
-acceptable not to show a focus outline.
+Where focus is programmatically moved to a target element that is not interactive, we
+suppress the focus styles. See https://github.com/twbs/bootstrap/issues/29875#issuecomment-582648069
  */
 main:focus,
 #main:focus,