@phantompixeldev/retrocss 2.0.0 → 2.1.0

package/dist/retro.css

@@ -227,6 +227,7 @@
   --retro-teal: #008080; /* Fallback for IE11 */
   --retro-teal-rgb: 0, 128, 128; /* Fallback for IE11 */
   --retro-tan: #d2b48c; /* Fallback for IE11 */
+  --retro-tan-rgb: 210, 180, 140;
   --retro-pink: #ff69b4; /* Fallback for IE11 */
   --retro-pink-rgb: 255, 105, 180; /* Fallback for IE11 */
   --retro-lime: #32cd32; /* Fallback for IE11 */
@@ -459,6 +460,7 @@
   --retro-teal: #1abc9c;
   --retro-teal-rgb: 26, 188, 156;
   --retro-tan: #d4b483;
+  --retro-tan-rgb: 212, 180, 131;
   --retro-pink: #e84393;
   --retro-pink-rgb: 232, 67, 147;
   --retro-lime: #00b894;
@@ -1401,9 +1403,23 @@ h5, h6 {
  *   <article class="retro-prose">...</article>
  */
 .retro-prose {
-  max-width: var(--retro-measure);
   line-height: var(--retro-line-height);
 }
+.retro-prose > p,
+.retro-prose > ul,
+.retro-prose > ol,
+.retro-prose > dl,
+.retro-prose > blockquote,
+.retro-prose > h1, .retro-prose > h2, .retro-prose > h3, .retro-prose > h4, .retro-prose > h5, .retro-prose > h6 {
+  max-width: var(--retro-measure);
+}
+.retro-prose > pre,
+.retro-prose > table,
+.retro-prose > figure,
+.retro-prose > .retro-code,
+.retro-prose > .retro-table {
+  max-width: 100%;
+}
 .retro-prose p, .retro-prose ul, .retro-prose ol, .retro-prose blockquote, .retro-prose pre {
   margin-bottom: var(--retro-spacing-md);
 }
@@ -1512,6 +1528,28 @@ h5, h6 {
   background: var(--retro-warning-active);
 }
 
+.retro-btn-info {
+  background: var(--retro-info);
+  color: var(--retro-info-fg);
+}
+.retro-btn-info:hover {
+  background: var(--retro-info-hover);
+}
+.retro-btn-info:active {
+  background: var(--retro-info-active);
+}
+
+.retro-btn-teal {
+  background: var(--retro-teal);
+  color: var(--retro-teal-fg);
+}
+.retro-btn-teal:hover {
+  background: var(--retro-teal-hover);
+}
+.retro-btn-teal:active {
+  background: var(--retro-teal-active);
+}
+
 .retro-btn-xs {
   font-size: var(--retro-font-size-xs);
   padding: 2px 8px;
@@ -1542,6 +1580,70 @@ h5, h6 {
   padding: 10px 24px;
 }
 
+.retro-btn-secondary {
+  background: var(--retro-gray);
+  color: var(--retro-gray-fg);
+}
+.retro-btn-secondary:hover {
+  background: var(--retro-gray-hover);
+}
+.retro-btn-secondary:active {
+  background: var(--retro-gray-active);
+}
+
+.retro-btn-block {
+  display: block;
+  width: 100%;
+}
+
+/**
+ * @name Retro Avatar
+ * @group components
+ * @description
+ * Square bevelled tile for a user glyph, emoji or initial. The demo pages were
+ * hand-rolling this with inline width/height/flex styles on every instance.
+ * @example html
+ *   <div class="retro-avatar retro-bg-primary">🧑‍💻</div>
+ *   <div class="retro-avatar retro-avatar-lg retro-bg-success">AB</div>
+ */
+.retro-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  font-size: var(--retro-font-size-lg);
+  line-height: 1;
+  font-weight: var(--retro-font-weight-bold);
+  background: var(--retro-light);
+  color: var(--retro-text);
+  border: var(--retro-border-width-thick) solid var(--retro-border-dark);
+  box-shadow: var(--retro-border-raised);
+  overflow: hidden;
+  user-select: none;
+}
+.retro-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.retro-avatar-sm {
+  width: 28px;
+  height: 28px;
+  font-size: var(--retro-font-size-sm);
+}
+.retro-avatar-lg {
+  width: 56px;
+  height: 56px;
+  font-size: var(--retro-font-size-2xl);
+}
+.retro-avatar-xl {
+  width: 72px;
+  height: 72px;
+  font-size: var(--retro-font-size-3xl);
+}
+
 /* RetroCSS - A Retro-Inspired CSS Framework */
 /* Main SCSS file that imports all components */
 /* Core */
@@ -1922,6 +2024,69 @@ input[type=radio].retro-input:focus-visible {
   margin-right: 16px;
 }
 
+/**
+ * @name Form Shell
+ * @group components
+ * @description
+ * Wrapper and a few pieces the demo pages referenced but the framework never
+ * shipped: .retro-form, .retro-input-icon, .retro-file-input, .retro-listbox.
+ */
+.retro-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--retro-spacing-md);
+  width: 100%;
+}
+
+.retro-input-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.retro-input-icon > .retro-input,
+.retro-input-icon > input {
+  width: 100%;
+  padding-left: 2.2em;
+}
+.retro-input-icon > :first-child:not(input):not(.retro-input) {
+  position: absolute;
+  left: 0.6em;
+  pointer-events: none;
+  color: var(--retro-text-muted);
+  line-height: 1;
+}
+
+.retro-file-input {
+  display: block;
+  width: 100%;
+  padding: var(--retro-spacing-xs);
+  background: var(--retro-input-bg);
+  color: var(--retro-input-text);
+  border: var(--retro-border-width-thick) solid var(--retro-border-dark);
+  box-shadow: var(--retro-border-sunken);
+  font-family: var(--retro-font);
+  font-size: var(--retro-font-size);
+}
+
+.retro-listbox {
+  width: 100%;
+  padding: 0;
+  background: var(--retro-input-bg);
+  color: var(--retro-input-text);
+  border: var(--retro-border-width-thick) solid var(--retro-border-dark);
+  box-shadow: var(--retro-border-sunken);
+  font-family: var(--retro-font);
+  font-size: var(--retro-font-size);
+}
+.retro-listbox option {
+  padding: var(--retro-spacing-xs) var(--retro-spacing-sm);
+}
+.retro-listbox option:checked {
+  background: var(--retro-primary);
+  color: var(--retro-primary-fg);
+}
+
 /* RetroCSS - A Retro-Inspired CSS Framework */
 /* Main SCSS file that imports all components */
 /* Core */
@@ -2195,6 +2360,15 @@ input[type=radio].retro-input:focus-visible {
   display: block;
 }
 
+.retro-alert-header {
+  width: 100%;
+  margin: 0 0 var(--retro-spacing-xs);
+  font-weight: var(--retro-font-weight-bold);
+  font-size: var(--retro-font-size-lg);
+  color: inherit;
+  text-align: left;
+}
+
 .retro-alert-body, .retro-toast-body {
   padding: 0;
   margin: 0;
@@ -3052,6 +3226,33 @@ input[type=radio].retro-input:focus-visible {
   z-index: 2;
 }
 
+/**
+ * @name Tab Panes
+ * @group components
+ * @description
+ * Panel bodies for the tabbed / underlined / button nav variants. Referenced by
+ * the demos but never defined, so tab content rendered unstyled and every pane
+ * stayed visible at once.
+ */
+.retro-tab-pane {
+  display: none;
+  padding: var(--retro-spacing-md);
+  background: var(--retro-bg);
+  color: var(--retro-text);
+  border: var(--retro-border-width-thick) solid var(--retro-border-dark);
+  border-top: none;
+}
+.retro-tab-pane.active {
+  display: block;
+}
+
+.retro-tab-pane-underlined,
+.retro-tab-pane-buttons {
+  border: none;
+  padding: var(--retro-spacing-md) 0;
+  background: transparent;
+}
+
 /* RetroCSS - A Retro-Inspired CSS Framework */
 /* Main SCSS file that imports all components */
 /* Core */
@@ -3110,6 +3311,22 @@ input[type=radio].retro-input:focus-visible {
     background-position: 18px 0;
   }
 }
+.retro-progress-bar-success {
+  background: var(--retro-success);
+}
+
+.retro-progress-bar-danger {
+  background: var(--retro-danger);
+}
+
+.retro-progress-bar-warning {
+  background: var(--retro-warning);
+}
+
+.retro-progress-bar-info {
+  background: var(--retro-info);
+}
+
 .retro-badge {
   display: inline-flex;
   align-items: center;
@@ -4669,316 +4886,1763 @@ input[type=datetime-local].retro-input.retro-input-sm {
   box-shadow: var(--retro-box-shadow-outset-button);
 }
 
-.mt-0 {
-  margin-top: 0px !important;
+/**
+ * @name Spacing Utilities
+ * @group utilities
+ * @description
+ * Margin and padding on a numeric scale. Every page in this repo already used
+ * the `retro-` prefixed names (retro-mt-5, retro-p-4); only the unprefixed
+ * ones existed, so none of them did anything.
+ *
+ * Scale: 0=0  1=4px  2=8px  3=12px  4=16px  5=24px  6=32px  7=40px  8=48px
+ * @example html
+ *   <div class="retro-mt-4 retro-px-5">…</div>
+ */
+.retro-m-0 {
+  margin: 0 !important;
 }
 
-.mb-0 {
-  margin-bottom: 0px !important;
+.retro-mt-0 {
+  margin-top: 0 !important;
 }
 
-.ml-0 {
-  margin-left: 0px !important;
+.retro-mb-0 {
+  margin-bottom: 0 !important;
 }
 
-.mr-0 {
-  margin-right: 0px !important;
+.retro-ml-0 {
+  margin-left: 0 !important;
 }
 
-.mx-0 {
-  margin-left: 0px !important;
-  margin-right: 0px !important;
+.retro-mr-0 {
+  margin-right: 0 !important;
 }
 
-.my-0 {
-  margin-top: 0px !important;
-  margin-bottom: 0px !important;
+.retro-mx-0 {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
 }
 
-.pt-0 {
-  padding-top: 0px !important;
+.retro-my-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
 }
 
-.pb-0 {
-  padding-bottom: 0px !important;
+.retro-p-0 {
+  padding: 0 !important;
 }
 
-.pl-0 {
-  padding-left: 0px !important;
+.retro-pt-0 {
+  padding-top: 0 !important;
 }
 
-.pr-0 {
-  padding-right: 0px !important;
+.retro-pb-0 {
+  padding-bottom: 0 !important;
 }
 
-.px-0 {
-  padding-left: 0px !important;
-  padding-right: 0px !important;
+.retro-pl-0 {
+  padding-left: 0 !important;
 }
 
-.py-0 {
-  padding-top: 0px !important;
-  padding-bottom: 0px !important;
+.retro-pr-0 {
+  padding-right: 0 !important;
 }
 
-.mt-1 {
+.retro-px-0 {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+.retro-py-0 {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.retro-gap-0 {
+  gap: 0 !important;
+}
+
+.retro-m-1 {
+  margin: 4px !important;
+}
+
+.retro-mt-1 {
   margin-top: 4px !important;
 }
 
-.mb-1 {
+.retro-mb-1 {
   margin-bottom: 4px !important;
 }
 
-.ml-1 {
+.retro-ml-1 {
   margin-left: 4px !important;
 }
 
-.mr-1 {
+.retro-mr-1 {
   margin-right: 4px !important;
 }
 
-.mx-1 {
+.retro-mx-1 {
   margin-left: 4px !important;
   margin-right: 4px !important;
 }
 
-.my-1 {
+.retro-my-1 {
   margin-top: 4px !important;
   margin-bottom: 4px !important;
 }
 
-.pt-1 {
+.retro-p-1 {
+  padding: 4px !important;
+}
+
+.retro-pt-1 {
   padding-top: 4px !important;
 }
 
-.pb-1 {
+.retro-pb-1 {
   padding-bottom: 4px !important;
 }
 
-.pl-1 {
+.retro-pl-1 {
   padding-left: 4px !important;
 }
 
-.pr-1 {
+.retro-pr-1 {
   padding-right: 4px !important;
 }
 
-.px-1 {
+.retro-px-1 {
   padding-left: 4px !important;
   padding-right: 4px !important;
 }
 
-.py-1 {
+.retro-py-1 {
   padding-top: 4px !important;
   padding-bottom: 4px !important;
 }
 
-.mt-2 {
+.retro-gap-1 {
+  gap: 4px !important;
+}
+
+.retro-m-2 {
+  margin: 8px !important;
+}
+
+.retro-mt-2 {
   margin-top: 8px !important;
 }
 
-.mb-2 {
+.retro-mb-2 {
   margin-bottom: 8px !important;
 }
 
-.ml-2 {
+.retro-ml-2 {
   margin-left: 8px !important;
 }
 
-.mr-2 {
+.retro-mr-2 {
   margin-right: 8px !important;
 }
 
-.mx-2 {
+.retro-mx-2 {
   margin-left: 8px !important;
   margin-right: 8px !important;
 }
 
-.my-2 {
+.retro-my-2 {
   margin-top: 8px !important;
   margin-bottom: 8px !important;
 }
 
-.pt-2 {
+.retro-p-2 {
+  padding: 8px !important;
+}
+
+.retro-pt-2 {
   padding-top: 8px !important;
 }
 
-.pb-2 {
+.retro-pb-2 {
   padding-bottom: 8px !important;
 }
 
-.pl-2 {
+.retro-pl-2 {
   padding-left: 8px !important;
 }
 
-.pr-2 {
+.retro-pr-2 {
   padding-right: 8px !important;
 }
 
-.px-2 {
+.retro-px-2 {
   padding-left: 8px !important;
   padding-right: 8px !important;
 }
 
-.py-2 {
+.retro-py-2 {
   padding-top: 8px !important;
   padding-bottom: 8px !important;
 }
 
-.mt-3 {
+.retro-gap-2 {
+  gap: 8px !important;
+}
+
+.retro-m-3 {
+  margin: 12px !important;
+}
+
+.retro-mt-3 {
   margin-top: 12px !important;
 }
 
-.mb-3 {
+.retro-mb-3 {
   margin-bottom: 12px !important;
 }
 
-.ml-3 {
+.retro-ml-3 {
   margin-left: 12px !important;
 }
 
-.mr-3 {
+.retro-mr-3 {
   margin-right: 12px !important;
 }
 
-.mx-3 {
+.retro-mx-3 {
   margin-left: 12px !important;
   margin-right: 12px !important;
 }
 
-.my-3 {
+.retro-my-3 {
   margin-top: 12px !important;
   margin-bottom: 12px !important;
 }
 
-.pt-3 {
+.retro-p-3 {
+  padding: 12px !important;
+}
+
+.retro-pt-3 {
   padding-top: 12px !important;
 }
 
-.pb-3 {
+.retro-pb-3 {
   padding-bottom: 12px !important;
 }
 
-.pl-3 {
+.retro-pl-3 {
   padding-left: 12px !important;
 }
 
-.pr-3 {
+.retro-pr-3 {
   padding-right: 12px !important;
 }
 
-.px-3 {
+.retro-px-3 {
   padding-left: 12px !important;
   padding-right: 12px !important;
 }
 
-.py-3 {
+.retro-py-3 {
   padding-top: 12px !important;
   padding-bottom: 12px !important;
 }
 
-.mt-4 {
+.retro-gap-3 {
+  gap: 12px !important;
+}
+
+.retro-m-4 {
+  margin: 16px !important;
+}
+
+.retro-mt-4 {
   margin-top: 16px !important;
 }
 
-.mb-4 {
+.retro-mb-4 {
   margin-bottom: 16px !important;
 }
 
-.ml-4 {
+.retro-ml-4 {
   margin-left: 16px !important;
 }
 
-.mr-4 {
+.retro-mr-4 {
   margin-right: 16px !important;
 }
 
-.mx-4 {
+.retro-mx-4 {
   margin-left: 16px !important;
   margin-right: 16px !important;
 }
 
-.my-4 {
+.retro-my-4 {
   margin-top: 16px !important;
   margin-bottom: 16px !important;
 }
 
-.pt-4 {
+.retro-p-4 {
+  padding: 16px !important;
+}
+
+.retro-pt-4 {
   padding-top: 16px !important;
 }
 
-.pb-4 {
+.retro-pb-4 {
   padding-bottom: 16px !important;
 }
 
-.pl-4 {
+.retro-pl-4 {
   padding-left: 16px !important;
 }
 
-.pr-4 {
+.retro-pr-4 {
   padding-right: 16px !important;
 }
 
-.px-4 {
+.retro-px-4 {
   padding-left: 16px !important;
   padding-right: 16px !important;
 }
 
-.py-4 {
+.retro-py-4 {
   padding-top: 16px !important;
   padding-bottom: 16px !important;
 }
 
-.mt-5 {
-  margin-top: 20px !important;
+.retro-gap-4 {
+  gap: 16px !important;
+}
+
+.retro-m-5 {
+  margin: 24px !important;
+}
+
+.retro-mt-5 {
+  margin-top: 24px !important;
+}
+
+.retro-mb-5 {
+  margin-bottom: 24px !important;
+}
+
+.retro-ml-5 {
+  margin-left: 24px !important;
+}
+
+.retro-mr-5 {
+  margin-right: 24px !important;
+}
+
+.retro-mx-5 {
+  margin-left: 24px !important;
+  margin-right: 24px !important;
+}
+
+.retro-my-5 {
+  margin-top: 24px !important;
+  margin-bottom: 24px !important;
+}
+
+.retro-p-5 {
+  padding: 24px !important;
+}
+
+.retro-pt-5 {
+  padding-top: 24px !important;
+}
+
+.retro-pb-5 {
+  padding-bottom: 24px !important;
+}
+
+.retro-pl-5 {
+  padding-left: 24px !important;
+}
+
+.retro-pr-5 {
+  padding-right: 24px !important;
+}
+
+.retro-px-5 {
+  padding-left: 24px !important;
+  padding-right: 24px !important;
+}
+
+.retro-py-5 {
+  padding-top: 24px !important;
+  padding-bottom: 24px !important;
+}
+
+.retro-gap-5 {
+  gap: 24px !important;
+}
+
+.retro-m-6 {
+  margin: 32px !important;
+}
+
+.retro-mt-6 {
+  margin-top: 32px !important;
+}
+
+.retro-mb-6 {
+  margin-bottom: 32px !important;
+}
+
+.retro-ml-6 {
+  margin-left: 32px !important;
+}
+
+.retro-mr-6 {
+  margin-right: 32px !important;
+}
+
+.retro-mx-6 {
+  margin-left: 32px !important;
+  margin-right: 32px !important;
+}
+
+.retro-my-6 {
+  margin-top: 32px !important;
+  margin-bottom: 32px !important;
+}
+
+.retro-p-6 {
+  padding: 32px !important;
+}
+
+.retro-pt-6 {
+  padding-top: 32px !important;
+}
+
+.retro-pb-6 {
+  padding-bottom: 32px !important;
+}
+
+.retro-pl-6 {
+  padding-left: 32px !important;
+}
+
+.retro-pr-6 {
+  padding-right: 32px !important;
+}
+
+.retro-px-6 {
+  padding-left: 32px !important;
+  padding-right: 32px !important;
+}
+
+.retro-py-6 {
+  padding-top: 32px !important;
+  padding-bottom: 32px !important;
+}
+
+.retro-gap-6 {
+  gap: 32px !important;
+}
+
+.retro-m-7 {
+  margin: 40px !important;
+}
+
+.retro-mt-7 {
+  margin-top: 40px !important;
+}
+
+.retro-mb-7 {
+  margin-bottom: 40px !important;
+}
+
+.retro-ml-7 {
+  margin-left: 40px !important;
+}
+
+.retro-mr-7 {
+  margin-right: 40px !important;
+}
+
+.retro-mx-7 {
+  margin-left: 40px !important;
+  margin-right: 40px !important;
+}
+
+.retro-my-7 {
+  margin-top: 40px !important;
+  margin-bottom: 40px !important;
+}
+
+.retro-p-7 {
+  padding: 40px !important;
+}
+
+.retro-pt-7 {
+  padding-top: 40px !important;
+}
+
+.retro-pb-7 {
+  padding-bottom: 40px !important;
+}
+
+.retro-pl-7 {
+  padding-left: 40px !important;
+}
+
+.retro-pr-7 {
+  padding-right: 40px !important;
+}
+
+.retro-px-7 {
+  padding-left: 40px !important;
+  padding-right: 40px !important;
+}
+
+.retro-py-7 {
+  padding-top: 40px !important;
+  padding-bottom: 40px !important;
+}
+
+.retro-gap-7 {
+  gap: 40px !important;
+}
+
+.retro-m-8 {
+  margin: 48px !important;
+}
+
+.retro-mt-8 {
+  margin-top: 48px !important;
+}
+
+.retro-mb-8 {
+  margin-bottom: 48px !important;
+}
+
+.retro-ml-8 {
+  margin-left: 48px !important;
+}
+
+.retro-mr-8 {
+  margin-right: 48px !important;
+}
+
+.retro-mx-8 {
+  margin-left: 48px !important;
+  margin-right: 48px !important;
+}
+
+.retro-my-8 {
+  margin-top: 48px !important;
+  margin-bottom: 48px !important;
+}
+
+.retro-p-8 {
+  padding: 48px !important;
+}
+
+.retro-pt-8 {
+  padding-top: 48px !important;
+}
+
+.retro-pb-8 {
+  padding-bottom: 48px !important;
+}
+
+.retro-pl-8 {
+  padding-left: 48px !important;
+}
+
+.retro-pr-8 {
+  padding-right: 48px !important;
+}
+
+.retro-px-8 {
+  padding-left: 48px !important;
+  padding-right: 48px !important;
+}
+
+.retro-py-8 {
+  padding-top: 48px !important;
+  padding-bottom: 48px !important;
+}
+
+.retro-gap-8 {
+  gap: 48px !important;
+}
+
+.retro-mx-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.retro-ml-auto {
+  margin-left: auto !important;
+}
+
+.retro-mr-auto {
+  margin-right: auto !important;
+}
+
+.mt-0 {
+  margin-top: 0px !important;
+}
+
+.mb-0 {
+  margin-bottom: 0px !important;
+}
+
+.ml-0 {
+  margin-left: 0px !important;
+}
+
+.mr-0 {
+  margin-right: 0px !important;
+}
+
+.mx-0 {
+  margin-left: 0px !important;
+  margin-right: 0px !important;
+}
+
+.my-0 {
+  margin-top: 0px !important;
+  margin-bottom: 0px !important;
+}
+
+.pt-0 {
+  padding-top: 0px !important;
+}
+
+.pb-0 {
+  padding-bottom: 0px !important;
+}
+
+.pl-0 {
+  padding-left: 0px !important;
+}
+
+.pr-0 {
+  padding-right: 0px !important;
+}
+
+.px-0 {
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+
+.py-0 {
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+}
+
+.mt-1 {
+  margin-top: 4px !important;
+}
+
+.mb-1 {
+  margin-bottom: 4px !important;
+}
+
+.ml-1 {
+  margin-left: 4px !important;
+}
+
+.mr-1 {
+  margin-right: 4px !important;
+}
+
+.mx-1 {
+  margin-left: 4px !important;
+  margin-right: 4px !important;
+}
+
+.my-1 {
+  margin-top: 4px !important;
+  margin-bottom: 4px !important;
+}
+
+.pt-1 {
+  padding-top: 4px !important;
+}
+
+.pb-1 {
+  padding-bottom: 4px !important;
+}
+
+.pl-1 {
+  padding-left: 4px !important;
+}
+
+.pr-1 {
+  padding-right: 4px !important;
+}
+
+.px-1 {
+  padding-left: 4px !important;
+  padding-right: 4px !important;
+}
+
+.py-1 {
+  padding-top: 4px !important;
+  padding-bottom: 4px !important;
+}
+
+.mt-2 {
+  margin-top: 8px !important;
+}
+
+.mb-2 {
+  margin-bottom: 8px !important;
+}
+
+.ml-2 {
+  margin-left: 8px !important;
+}
+
+.mr-2 {
+  margin-right: 8px !important;
+}
+
+.mx-2 {
+  margin-left: 8px !important;
+  margin-right: 8px !important;
+}
+
+.my-2 {
+  margin-top: 8px !important;
+  margin-bottom: 8px !important;
+}
+
+.pt-2 {
+  padding-top: 8px !important;
+}
+
+.pb-2 {
+  padding-bottom: 8px !important;
+}
+
+.pl-2 {
+  padding-left: 8px !important;
+}
+
+.pr-2 {
+  padding-right: 8px !important;
+}
+
+.px-2 {
+  padding-left: 8px !important;
+  padding-right: 8px !important;
+}
+
+.py-2 {
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
+}
+
+.mt-3 {
+  margin-top: 12px !important;
+}
+
+.mb-3 {
+  margin-bottom: 12px !important;
+}
+
+.ml-3 {
+  margin-left: 12px !important;
+}
+
+.mr-3 {
+  margin-right: 12px !important;
+}
+
+.mx-3 {
+  margin-left: 12px !important;
+  margin-right: 12px !important;
+}
+
+.my-3 {
+  margin-top: 12px !important;
+  margin-bottom: 12px !important;
+}
+
+.pt-3 {
+  padding-top: 12px !important;
+}
+
+.pb-3 {
+  padding-bottom: 12px !important;
+}
+
+.pl-3 {
+  padding-left: 12px !important;
+}
+
+.pr-3 {
+  padding-right: 12px !important;
+}
+
+.px-3 {
+  padding-left: 12px !important;
+  padding-right: 12px !important;
+}
+
+.py-3 {
+  padding-top: 12px !important;
+  padding-bottom: 12px !important;
+}
+
+.mt-4 {
+  margin-top: 16px !important;
+}
+
+.mb-4 {
+  margin-bottom: 16px !important;
+}
+
+.ml-4 {
+  margin-left: 16px !important;
+}
+
+.mr-4 {
+  margin-right: 16px !important;
+}
+
+.mx-4 {
+  margin-left: 16px !important;
+  margin-right: 16px !important;
+}
+
+.my-4 {
+  margin-top: 16px !important;
+  margin-bottom: 16px !important;
+}
+
+.pt-4 {
+  padding-top: 16px !important;
+}
+
+.pb-4 {
+  padding-bottom: 16px !important;
+}
+
+.pl-4 {
+  padding-left: 16px !important;
+}
+
+.pr-4 {
+  padding-right: 16px !important;
+}
+
+.px-4 {
+  padding-left: 16px !important;
+  padding-right: 16px !important;
+}
+
+.py-4 {
+  padding-top: 16px !important;
+  padding-bottom: 16px !important;
+}
+
+.mt-5 {
+  margin-top: 20px !important;
+}
+
+.mb-5 {
+  margin-bottom: 20px !important;
+}
+
+.ml-5 {
+  margin-left: 20px !important;
+}
+
+.mr-5 {
+  margin-right: 20px !important;
+}
+
+.mx-5 {
+  margin-left: 20px !important;
+  margin-right: 20px !important;
+}
+
+.my-5 {
+  margin-top: 20px !important;
+  margin-bottom: 20px !important;
+}
+
+.pt-5 {
+  padding-top: 20px !important;
+}
+
+.pb-5 {
+  padding-bottom: 20px !important;
+}
+
+.pl-5 {
+  padding-left: 20px !important;
+}
+
+.pr-5 {
+  padding-right: 20px !important;
+}
+
+.px-5 {
+  padding-left: 20px !important;
+  padding-right: 20px !important;
+}
+
+.py-5 {
+  padding-top: 20px !important;
+  padding-bottom: 20px !important;
+}
+
+/**
+ * @name Flexbox & Display Utilities
+ * @group utilities
+ * @description
+ * The grid utilities shipped gap/justify/align, but the flex primitives the
+ * demo pages leaned on (retro-flex, retro-items-center, retro-flex-1) did not
+ * exist, so those layouts fell back to plain block flow.
+ */
+.retro-block {
+  display: block !important;
+}
+
+.retro-inline-block {
+  display: inline-block !important;
+}
+
+.retro-inline {
+  display: inline !important;
+}
+
+.retro-hidden {
+  display: none !important;
+}
+
+.retro-flex {
+  display: flex !important;
+}
+
+.retro-inline-flex {
+  display: inline-flex !important;
+}
+
+.retro-flex-row {
+  flex-direction: row !important;
+}
+
+.retro-flex-col {
+  flex-direction: column !important;
+}
+
+.retro-flex-wrap {
+  flex-wrap: wrap !important;
+}
+
+.retro-flex-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.retro-flex-1 {
+  flex: 1 1 0% !important;
+  min-width: 0;
+}
+
+.retro-flex-auto {
+  flex: 1 1 auto !important;
+  min-width: 0;
+}
+
+.retro-flex-none {
+  flex: none !important;
+}
+
+.retro-grow {
+  flex-grow: 1 !important;
+}
+
+.retro-shrink-0 {
+  flex-shrink: 0 !important;
+}
+
+.retro-items-start {
+  align-items: flex-start !important;
+}
+
+.retro-items-center {
+  align-items: center !important;
+}
+
+.retro-items-end {
+  align-items: flex-end !important;
+}
+
+.retro-items-stretch {
+  align-items: stretch !important;
+}
+
+.retro-items-baseline {
+  align-items: baseline !important;
+}
+
+.retro-justify-between {
+  justify-content: space-between !important;
+}
+
+.retro-justify-around {
+  justify-content: space-around !important;
+}
+
+.retro-justify-evenly {
+  justify-content: space-evenly !important;
+}
+
+.retro-self-start {
+  align-self: flex-start !important;
+}
+
+.retro-self-center {
+  align-self: center !important;
+}
+
+.retro-self-end {
+  align-self: flex-end !important;
+}
+
+.retro-relative {
+  position: relative !important;
+}
+
+.retro-absolute {
+  position: absolute !important;
+}
+
+.retro-sticky {
+  position: sticky !important;
+}
+
+/**
+ * @name Sizing Utilities
+ * @group utilities
+ */
+.retro-w-full {
+  width: 100% !important;
+}
+
+.retro-w-auto {
+  width: auto !important;
+}
+
+.retro-h-full {
+  height: 100% !important;
+}
+
+.retro-max-w-full {
+  max-width: 100% !important;
+}
+
+.retro-min-w-0 {
+  min-width: 0 !important;
+}
+
+.retro-box-border {
+  box-sizing: border-box !important;
+}
+
+.retro-max-w-40 {
+  max-width: 160px !important;
+}
+
+.retro-min-w-40 {
+  min-width: 160px !important;
+}
+
+.retro-max-w-56 {
+  max-width: 224px !important;
+}
+
+.retro-min-w-56 {
+  min-width: 224px !important;
+}
+
+.retro-max-w-72 {
+  max-width: 288px !important;
+}
+
+.retro-min-w-72 {
+  min-width: 288px !important;
+}
+
+.retro-max-w-80 {
+  max-width: 320px !important;
+}
+
+.retro-min-w-80 {
+  min-width: 320px !important;
+}
+
+.retro-max-w-96 {
+  max-width: 384px !important;
+}
+
+.retro-min-w-96 {
+  min-width: 384px !important;
+}
+
+.retro-max-w-120 {
+  max-width: 480px !important;
+}
+
+.retro-min-w-120 {
+  min-width: 480px !important;
+}
+
+.retro-max-w-prose {
+  max-width: var(--retro-measure) !important;
+}
+
+.retro-max-w-sm {
+  max-width: var(--retro-container-sm) !important;
+}
+
+.retro-max-w-md {
+  max-width: var(--retro-container-md) !important;
+}
+
+.retro-max-w-lg {
+  max-width: var(--retro-container-lg) !important;
+}
+
+.retro-max-w-xl {
+  max-width: var(--retro-container-xl) !important;
+}
+
+.retro-max-w-xxl {
+  max-width: var(--retro-container-xxl) !important;
+}
+
+/**
+ * @name Colour Utilities
+ * @group utilities
+ * @description
+ * Background, text and border helpers built on the 2.0 token tiers.
+ *
+ * `retro-bg-<hue>` sets the fill **and** its matching on-fill text colour, so a
+ * filled surface is legible in both themes without a second class. That pairing
+ * is what the accessibility gate verifies, so these are AA by construction.
+ *
+ * `retro-bg-<hue>-subtle` is a low-alpha tint of the same hue for callout
+ * panels; it keeps the normal body text colour on top.
+ * @example html
+ *   <div class="retro-bg-primary retro-p-4">Readable in both themes</div>
+ *   <div class="retro-bg-success-subtle retro-p-4">Tinted callout</div>
+ */
+.retro-bg-primary {
+  background-color: var(--retro-primary) !important;
+  color: var(--retro-primary-fg) !important;
+}
+.retro-bg-primary h1, .retro-bg-primary h2, .retro-bg-primary h3, .retro-bg-primary h4, .retro-bg-primary h5, .retro-bg-primary h6 {
+  color: inherit;
+}
+
+.retro-bg-primary-subtle {
+  background-color: rgba(var(--retro-primary-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-bg-primary-lightest {
+  background-color: rgba(var(--retro-primary-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-border-primary {
+  border-color: var(--retro-primary) !important;
+}
+
+.retro-bg-success {
+  background-color: var(--retro-success) !important;
+  color: var(--retro-success-fg) !important;
+}
+.retro-bg-success h1, .retro-bg-success h2, .retro-bg-success h3, .retro-bg-success h4, .retro-bg-success h5, .retro-bg-success h6 {
+  color: inherit;
+}
+
+.retro-bg-success-subtle {
+  background-color: rgba(var(--retro-success-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-bg-success-lightest {
+  background-color: rgba(var(--retro-success-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-border-success {
+  border-color: var(--retro-success) !important;
+}
+
+.retro-bg-danger {
+  background-color: var(--retro-danger) !important;
+  color: var(--retro-danger-fg) !important;
+}
+.retro-bg-danger h1, .retro-bg-danger h2, .retro-bg-danger h3, .retro-bg-danger h4, .retro-bg-danger h5, .retro-bg-danger h6 {
+  color: inherit;
+}
+
+.retro-bg-danger-subtle {
+  background-color: rgba(var(--retro-danger-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-bg-danger-lightest {
+  background-color: rgba(var(--retro-danger-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-border-danger {
+  border-color: var(--retro-danger) !important;
+}
+
+.retro-bg-warning {
+  background-color: var(--retro-warning) !important;
+  color: var(--retro-warning-fg) !important;
+}
+.retro-bg-warning h1, .retro-bg-warning h2, .retro-bg-warning h3, .retro-bg-warning h4, .retro-bg-warning h5, .retro-bg-warning h6 {
+  color: inherit;
+}
+
+.retro-bg-warning-subtle {
+  background-color: rgba(var(--retro-warning-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-bg-warning-lightest {
+  background-color: rgba(var(--retro-warning-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-border-warning {
+  border-color: var(--retro-warning) !important;
+}
+
+.retro-bg-info {
+  background-color: var(--retro-info) !important;
+  color: var(--retro-info-fg) !important;
+}
+.retro-bg-info h1, .retro-bg-info h2, .retro-bg-info h3, .retro-bg-info h4, .retro-bg-info h5, .retro-bg-info h6 {
+  color: inherit;
+}
+
+.retro-bg-info-subtle {
+  background-color: rgba(var(--retro-info-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-bg-info-lightest {
+  background-color: rgba(var(--retro-info-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-border-info {
+  border-color: var(--retro-info) !important;
+}
+
+.retro-bg-teal {
+  background-color: var(--retro-teal) !important;
+  color: var(--retro-teal-fg) !important;
+}
+.retro-bg-teal h1, .retro-bg-teal h2, .retro-bg-teal h3, .retro-bg-teal h4, .retro-bg-teal h5, .retro-bg-teal h6 {
+  color: inherit;
+}
+
+.retro-bg-teal-subtle {
+  background-color: rgba(var(--retro-teal-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-bg-teal-lightest {
+  background-color: rgba(var(--retro-teal-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
 }
 
-.mb-5 {
-  margin-bottom: 20px !important;
+.retro-border-teal {
+  border-color: var(--retro-teal) !important;
 }
 
-.ml-5 {
-  margin-left: 20px !important;
+.retro-bg-tan {
+  background-color: var(--retro-tan) !important;
+  color: var(--retro-tan-fg) !important;
+}
+.retro-bg-tan h1, .retro-bg-tan h2, .retro-bg-tan h3, .retro-bg-tan h4, .retro-bg-tan h5, .retro-bg-tan h6 {
+  color: inherit;
 }
 
-.mr-5 {
-  margin-right: 20px !important;
+.retro-bg-tan-subtle {
+  background-color: rgba(var(--retro-tan-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
 }
 
-.mx-5 {
-  margin-left: 20px !important;
-  margin-right: 20px !important;
+.retro-bg-tan-lightest {
+  background-color: rgba(var(--retro-tan-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
 }
 
-.my-5 {
-  margin-top: 20px !important;
-  margin-bottom: 20px !important;
+.retro-border-tan {
+  border-color: var(--retro-tan) !important;
 }
 
-.pt-5 {
-  padding-top: 20px !important;
+.retro-bg-pink {
+  background-color: var(--retro-pink) !important;
+  color: var(--retro-pink-fg) !important;
+}
+.retro-bg-pink h1, .retro-bg-pink h2, .retro-bg-pink h3, .retro-bg-pink h4, .retro-bg-pink h5, .retro-bg-pink h6 {
+  color: inherit;
 }
 
-.pb-5 {
-  padding-bottom: 20px !important;
+.retro-bg-pink-subtle {
+  background-color: rgba(var(--retro-pink-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
 }
 
-.pl-5 {
-  padding-left: 20px !important;
+.retro-bg-pink-lightest {
+  background-color: rgba(var(--retro-pink-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
 }
 
-.pr-5 {
-  padding-right: 20px !important;
+.retro-border-pink {
+  border-color: var(--retro-pink) !important;
 }
 
-.px-5 {
-  padding-left: 20px !important;
-  padding-right: 20px !important;
+.retro-bg-lime {
+  background-color: var(--retro-lime) !important;
+  color: var(--retro-lime-fg) !important;
+}
+.retro-bg-lime h1, .retro-bg-lime h2, .retro-bg-lime h3, .retro-bg-lime h4, .retro-bg-lime h5, .retro-bg-lime h6 {
+  color: inherit;
 }
 
-.py-5 {
-  padding-top: 20px !important;
-  padding-bottom: 20px !important;
+.retro-bg-lime-subtle {
+  background-color: rgba(var(--retro-lime-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-bg-lime-lightest {
+  background-color: rgba(var(--retro-lime-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-border-lime {
+  border-color: var(--retro-lime) !important;
+}
+
+.retro-bg-cyan {
+  background-color: var(--retro-cyan) !important;
+  color: var(--retro-cyan-fg) !important;
+}
+.retro-bg-cyan h1, .retro-bg-cyan h2, .retro-bg-cyan h3, .retro-bg-cyan h4, .retro-bg-cyan h5, .retro-bg-cyan h6 {
+  color: inherit;
+}
+
+.retro-bg-cyan-subtle {
+  background-color: rgba(var(--retro-cyan-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-bg-cyan-lightest {
+  background-color: rgba(var(--retro-cyan-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-border-cyan {
+  border-color: var(--retro-cyan) !important;
+}
+
+.retro-bg-orange {
+  background-color: var(--retro-orange) !important;
+  color: var(--retro-orange-fg) !important;
+}
+.retro-bg-orange h1, .retro-bg-orange h2, .retro-bg-orange h3, .retro-bg-orange h4, .retro-bg-orange h5, .retro-bg-orange h6 {
+  color: inherit;
+}
+
+.retro-bg-orange-subtle {
+  background-color: rgba(var(--retro-orange-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-bg-orange-lightest {
+  background-color: rgba(var(--retro-orange-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-border-orange {
+  border-color: var(--retro-orange) !important;
+}
+
+.retro-bg-brown {
+  background-color: var(--retro-brown) !important;
+  color: var(--retro-brown-fg) !important;
+}
+.retro-bg-brown h1, .retro-bg-brown h2, .retro-bg-brown h3, .retro-bg-brown h4, .retro-bg-brown h5, .retro-bg-brown h6 {
+  color: inherit;
+}
+
+.retro-bg-brown-subtle {
+  background-color: rgba(var(--retro-brown-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-bg-brown-lightest {
+  background-color: rgba(var(--retro-brown-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-border-brown {
+  border-color: var(--retro-brown) !important;
+}
+
+.retro-bg-violet {
+  background-color: var(--retro-violet) !important;
+  color: var(--retro-violet-fg) !important;
+}
+.retro-bg-violet h1, .retro-bg-violet h2, .retro-bg-violet h3, .retro-bg-violet h4, .retro-bg-violet h5, .retro-bg-violet h6 {
+  color: inherit;
+}
+
+.retro-bg-violet-subtle {
+  background-color: rgba(var(--retro-violet-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-bg-violet-lightest {
+  background-color: rgba(var(--retro-violet-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-border-violet {
+  border-color: var(--retro-violet) !important;
+}
+
+.retro-bg-gray {
+  background-color: var(--retro-gray) !important;
+  color: var(--retro-gray-fg) !important;
+}
+.retro-bg-gray h1, .retro-bg-gray h2, .retro-bg-gray h3, .retro-bg-gray h4, .retro-bg-gray h5, .retro-bg-gray h6 {
+  color: inherit;
+}
+
+.retro-bg-gray-subtle {
+  background-color: rgba(var(--retro-gray-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-bg-gray-lightest {
+  background-color: rgba(var(--retro-gray-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-border-gray {
+  border-color: var(--retro-gray) !important;
+}
+
+.retro-bg-maroon {
+  background-color: var(--retro-maroon) !important;
+  color: var(--retro-maroon-fg) !important;
+}
+.retro-bg-maroon h1, .retro-bg-maroon h2, .retro-bg-maroon h3, .retro-bg-maroon h4, .retro-bg-maroon h5, .retro-bg-maroon h6 {
+  color: inherit;
+}
+
+.retro-bg-maroon-subtle {
+  background-color: rgba(var(--retro-maroon-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-bg-maroon-lightest {
+  background-color: rgba(var(--retro-maroon-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-border-maroon {
+  border-color: var(--retro-maroon) !important;
+}
+
+.retro-bg-gold {
+  background-color: var(--retro-gold) !important;
+  color: var(--retro-gold-fg) !important;
+}
+.retro-bg-gold h1, .retro-bg-gold h2, .retro-bg-gold h3, .retro-bg-gold h4, .retro-bg-gold h5, .retro-bg-gold h6 {
+  color: inherit;
+}
+
+.retro-bg-gold-subtle {
+  background-color: rgba(var(--retro-gold-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-bg-gold-lightest {
+  background-color: rgba(var(--retro-gold-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-border-gold {
+  border-color: var(--retro-gold) !important;
+}
+
+.retro-bg-navy {
+  background-color: var(--retro-navy) !important;
+  color: var(--retro-navy-fg) !important;
+}
+.retro-bg-navy h1, .retro-bg-navy h2, .retro-bg-navy h3, .retro-bg-navy h4, .retro-bg-navy h5, .retro-bg-navy h6 {
+  color: inherit;
+}
+
+.retro-bg-navy-subtle {
+  background-color: rgba(var(--retro-navy-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-bg-navy-lightest {
+  background-color: rgba(var(--retro-navy-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-border-navy {
+  border-color: var(--retro-navy) !important;
+}
+
+.retro-bg-olive {
+  background-color: var(--retro-olive) !important;
+  color: var(--retro-olive-fg) !important;
+}
+.retro-bg-olive h1, .retro-bg-olive h2, .retro-bg-olive h3, .retro-bg-olive h4, .retro-bg-olive h5, .retro-bg-olive h6 {
+  color: inherit;
+}
+
+.retro-bg-olive-subtle {
+  background-color: rgba(var(--retro-olive-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-bg-olive-lightest {
+  background-color: rgba(var(--retro-olive-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-border-olive {
+  border-color: var(--retro-olive) !important;
+}
+
+.retro-bg-silver {
+  background-color: var(--retro-silver) !important;
+  color: var(--retro-silver-fg) !important;
+}
+.retro-bg-silver h1, .retro-bg-silver h2, .retro-bg-silver h3, .retro-bg-silver h4, .retro-bg-silver h5, .retro-bg-silver h6 {
+  color: inherit;
+}
+
+.retro-bg-silver-subtle {
+  background-color: rgba(var(--retro-silver-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-bg-silver-lightest {
+  background-color: rgba(var(--retro-silver-rgb), 0.14) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-border-silver {
+  border-color: var(--retro-silver) !important;
+}
+
+/* Surfaces */
+.retro-bg-body {
+  background-color: var(--retro-body-bg) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-body-bg {
+  background-color: var(--retro-body-bg) !important;
+}
+
+.retro-bg-surface,
+.retro-bg-white {
+  background-color: var(--retro-bg) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-bg-light,
+.retro-bg-lightest {
+  background-color: var(--retro-light) !important;
+  color: var(--retro-text) !important;
+}
+
+.retro-bg-dark {
+  background-color: var(--retro-body-bg-dark) !important;
+  color: #fff !important;
+}
+.retro-bg-dark h1, .retro-bg-dark h2, .retro-bg-dark h3, .retro-bg-dark h4, .retro-bg-dark h5, .retro-bg-dark h6 {
+  color: inherit;
+}
+
+.retro-bg-transparent {
+  background-color: transparent !important;
+}
+
+/* Text */
+.retro-text-body {
+  color: var(--retro-text) !important;
+}
+
+.retro-text-muted,
+.retro-text-secondary {
+  color: var(--retro-text-muted) !important;
+}
+
+.retro-text-white,
+.retro-text-inverse {
+  color: var(--retro-text-inverse) !important;
+}
+
+.retro-text-left {
+  text-align: left !important;
+}
+
+.retro-text-center {
+  text-align: center !important;
+}
+
+.retro-text-right {
+  text-align: right !important;
+}
+
+.retro-font-normal {
+  font-weight: var(--retro-font-weight-normal) !important;
+}
+
+.retro-font-bold {
+  font-weight: var(--retro-font-weight-bold) !important;
+}
+
+.retro-text-2xl {
+  font-size: var(--retro-font-size-2xl) !important;
+}
+
+.retro-text-3xl {
+  font-size: var(--retro-font-size-3xl) !important;
+}
+
+/* Borders */
+.retro-border {
+  border: var(--retro-border-width) solid var(--retro-border-dark) !important;
+}
+
+.retro-border-2 {
+  border: var(--retro-border-width-thick) solid var(--retro-border-dark) !important;
+}
+
+.retro-border-0 {
+  border: 0 !important;
+}
+
+.retro-border-t-0 {
+  border-top: 0 !important;
+}
+
+.retro-border-b-0 {
+  border-bottom: 0 !important;
+}
+
+.retro-border-top {
+  border-top: var(--retro-border-width-thick) solid var(--retro-border-dark) !important;
+}
+
+.retro-border-bottom {
+  border-bottom: var(--retro-border-width-thick) solid var(--retro-border-dark) !important;
+}
+
+.retro-border-left {
+  border-left: var(--retro-border-width-thick) solid var(--retro-border-dark) !important;
+}
+
+.retro-border-right {
+  border-right: var(--retro-border-width-thick) solid var(--retro-border-dark) !important;
+}
+
+.retro-border-black {
+  border-color: var(--retro-border-dark) !important;
+}
+
+.retro-border-gray {
+  border-color: var(--retro-border-medium) !important;
+}
+
+.retro-border-light {
+  border-color: var(--retro-border-light) !important;
+}
+
+/**
+ * @name Effect Utilities
+ * @group utilities
+ * @description
+ * Bevels and shadows. The Win9x look is built from hard-edged insets rather
+ * than soft blur, so `retro-raised` / `retro-sunken` are usually what you want;
+ * the `retro-shadow-*` scale is there for depth on floating surfaces.
+ */
+.retro-raised {
+  box-shadow: var(--retro-border-raised) !important;
+}
+
+.retro-sunken {
+  box-shadow: var(--retro-border-sunken) !important;
+}
+
+.retro-shadow-none {
+  box-shadow: none !important;
+}
+
+.retro-shadow-sm {
+  box-shadow: var(--retro-box-shadow-subtle) !important;
+}
+
+.retro-shadow-md {
+  box-shadow: var(--retro-box-shadow-medium) !important;
+}
+
+.retro-shadow-lg {
+  box-shadow: 3px 3px 0 var(--retro-border-medium), 0 4px 12px rgba(var(--retro-black-rgb), 0.18) !important;
+}
+
+.retro-rounded {
+  border-radius: 4px !important;
+}
+
+.retro-rounded-lg {
+  border-radius: 8px !important;
+}
+
+.retro-rounded-full {
+  border-radius: 9999px !important;
+}
+
+.retro-rounded-none {
+  border-radius: 0 !important;
+}
+
+.retro-overflow-hidden {
+  overflow: hidden !important;
+}
+
+.retro-overflow-auto {
+  overflow: auto !important;
+}
+
+.retro-overflow-x-auto {
+  overflow-x: auto !important;
 }
 
 /* RetroCSS - A Retro-Inspired CSS Framework */
@@ -5853,24 +7517,53 @@ input[type=datetime-local].retro-input.retro-input-sm {
     grid-template-columns: repeat(3, 1fr);
   }
 }
-.main-content {
-  margin-left: 220px;
+/**
+ * @name Layout
+ * @group utilities
+ * @description
+ * Page shell: an optional sidebar beside a main content column.
+ *
+ * This lived in index.html's inline <style> while every page in the repo used
+ * the class, so the five example pages — which carry no <style> block — got no
+ * layout at all. The sidebar and the content stacked as plain blocks, leaving a
+ * tall empty gap and pushing the content far below the fold.
+ *
+ * @example html
+ *   <div class="retro-main-layout">
+ *     <aside class="retro-sidebar">...</aside>
+ *     <div class="main-content">...</div>
+ *   </div>
+ */
+.retro-main-layout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--retro-spacing-md);
+  width: 100%;
+  max-width: var(--retro-container-xxl);
+  margin: 0 auto;
+  padding: 0 var(--retro-spacing-md);
+  box-sizing: border-box;
 }
-
-@media (max-width: 768px) {
-  .main-content {
-    margin-left: 0 !important;
-    width: 100vw !important;
-    max-width: 100vw !important;
-    box-sizing: border-box;
-  }
-  .retro-container, .demo-section {
-    width: 100vw !important;
-    max-width: 100vw !important;
-    box-sizing: border-box;
-    margin-left: 0 !important;
-    padding: 0 var(--retro-spacing-md) !important;
+@media (min-width: 768px) {
+  .retro-main-layout {
+    flex-direction: row;
+    align-items: flex-start;
   }
 }
+.retro-main-layout > .retro-sidebar {
+  flex: 0 0 auto;
+}
+.retro-main-layout > .main-content,
+.retro-main-layout > main {
+  flex: 1 1 auto;
+  min-width: 0;
+  width: 100%;
+}
+
+.main-content {
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+}
 
 /*# sourceMappingURL=retro.css.map */