@phantompixeldev/retrocss 2.8.0 → 3.0.0

package/MIGRATION.md

@@ -1,3 +1,163 @@
+# Migrating to RetroCSS 3.0
+
+3.0 is a visual release. Nothing was renamed and no class was removed, but two
+changes are visible on every page that consumes the framework, so they are
+called out first.
+
+## 1. Body text is 16px
+
+`--retro-font-size` moves from `0.875rem` (14px) to `1rem` (16px). The rest of
+the scale is expressed in `rem` against the root, so headings, buttons, badges
+and inputs all move with it.
+
+14px is the authentic Win9x metric and 16px is not. The trade was made
+deliberately: the framework is used to build things people read, and 14px is
+below the size at which most people read comfortably. One line puts it back:
+
+```css
+:root { --retro-font-size: 0.875rem; }
+```
+
+Expect layouts that were tuned to the pixel at 14px to need a little room. If
+you pinned a width in `px` to fit a specific string, it will now clip.
+
+## 2. `border-radius: 0` is no longer `!important`
+
+The reset was `* { border-radius: 0 !important }`, which meant nothing in a
+consuming application could round a corner — including `.retro-rounded`, which
+had to fight the reset, and `_modal.scss`, which needed its own `!important` to
+get 4px back. The default is still square:
+
+```css
+* { border-radius: 0; }
+```
+
+If you were relying on the reset to flatten a third-party widget's corners,
+that widget's own radius now wins, and you will need to zero it yourself.
+
+## 3. On-fill text follows the theme
+
+If you built a component that pairs a RetroCSS hue fill with white text:
+
+```css
+/* before */
+.my-chip { background: var(--retro-primary); color: var(--retro-white); }
+```
+
+...that pair breaks in dark mode. `--retro-white` inverts to `#3a3a3a` while
+the fill *lightens* to `#4a90e2`, so both move and the contrast collapses —
+this was measuring 3.45:1 on the framework's own active nav items. Use the
+`-fg` token, which is defined as "text on this fill" and is contrast-gated in
+both themes:
+
+```css
+/* after */
+.my-chip { background: var(--retro-primary); color: var(--retro-primary-fg); }
+```
+
+The `--retro-black` / `--retro-white` pair is still fine *together* — both
+invert, so a black chip with white text simply becomes a white chip with dark
+text.
+
+## 4. Tooltips are instant
+
+`.retro-tooltip` toggles `display` rather than `opacity` + `visibility`, so the
+0.2s fade is gone. This was not a style choice: a hidden tooltip kept its box in
+the page's scrollable overflow region, so a `.retro-tooltip-right` on a trigger
+near the viewport edge widened the whole page while invisible. Instant tooltips
+are period-correct anyway.
+
+If you were animating `.retro-tooltip` yourself, animate a child instead.
+
+## Smaller changes
+
+- **Nav variants and breadcrumbs wrap.** `.retro-nav-tabbed`,
+  `.retro-nav-underlined`, `.retro-nav-buttons` and `.retro-breadcrumbs` were
+  single unwrapped flex rows, so a long set of labels pushed the page sideways
+  on narrow viewports. They wrap onto a second line now.
+- **`.retro-nav-vertical`** is capped at `max-width: 100%`; it was sized to its
+  longest label with `width: max-content`.
+- **`.retro-alert-close`** inherits the alert's own text colour and no longer
+  renders at `opacity: 0.7`.
+- **Unfilled `.retro-rating-star`** uses `--retro-text-muted` instead of
+  `--retro-border-dark`, which was invisible on the dark chassis.
+- **`.retro-heading-variant`** drops its `letter-spacing`. Uppercase plus
+  monospace already carries the emphasis.
+
+## Removed
+
+Everything here was already dead: unreachable, uninitialised, or compiling to
+nothing. If you were using any of it, it was not doing what its name implied.
+
+- **`window.RetroSidebar` / `src/js/sidebar.js`** — 234 lines that were bundled
+  but never initialised. Wiring it in would have injected a toggle button and a
+  full-screen overlay into every consuming page, hijacked every sidebar link
+  with smooth scrolling and `history.pushState`, overwritten whichever link the
+  author had marked `.active`, and bound an unthrottled `scroll` listener that
+  re-queried `section[id], div[id]` across the whole document on every event.
+  That is application logic, not framework logic. The CSS stays —
+  `.retro-sidebar`, `.retro-sidebar-toggle` and `.retro-sidebar-overlay` are all
+  still styled, so the same UI is a few lines of your own JS.
+- **Eleven `@container` blocks** in `utilities/_container-queries.scss`:
+  `.retro-cq-sm`, `-md`, `-lg`, `-xl`, `-wide`, `-tall`, `-landscape`,
+  `-portrait`, `-size-sm`, `-size-md`, `-size-lg`. Every one had a comment for a
+  body and compiled to nothing. The blocks with real declarations
+  (`.retro-cq-hide`, `-show`, `-text-lg`, `-text-xl`, `-flex-row`, `-flex-col`,
+  `-p-4`, `-p-6`, `-grid-2`, `-grid-3`) are untouched.
+- **Five Sass mixins**: `retro-border`, `retro-hover`, `retro-active`,
+  `retro-transition`, `retro-z-index`. None was called from anywhere in the
+  framework. Their values are all reachable directly as custom properties —
+  `--retro-border-dark`, `--retro-border-sunken`, `--retro-z-index-modal` and so
+  on — which is what the components use. `retro-box-shadow`, `retro-focus`,
+  `retro-focus-ring` and `retro-breakpoint` are still here.
+- **Five devDependencies**: `concat-cli`, `copyfiles`, `mkdirp`, `onchange`,
+  `uglify-js`. No script, workflow or config invoked any of them.
+
+## New
+
+- **Sortable tables actually work.** `.retro-table-sortable` had working JS and
+  no styles, no markup anywhere in the repo, and no way to reach it from the
+  keyboard. Headers are now focusable and respond to Enter and Space, carry
+  `aria-sort`, and show a direction indicator. Columns are sniffed as numeric or
+  text, or declared:
+
+  ```html
+  <table class="retro-table retro-table-sortable">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th data-sort="number">Size</th>
+        <th data-sort="none">Actions</th>
+      </tr>
+    </thead>
+    <tbody>...</tbody>
+  </table>
+  ```
+
+  A cell can carry `data-sort-value` to sort a formatted value ("2 days ago",
+  "$1,204.00") by what it means. The numeric sniff is deliberately strict: a
+  loose `parseFloat` reads `2023-09-01` as `2023` and `SKU-001` as `-1`, which
+  quietly sorts a date column by year and an ID column by the digits after the
+  first dash.
+
+- **Code blocks get a copy button.** `code-copy.js` was bundled but never
+  initialised, so `.retro-code-copy` existed only in the stylesheet. It now runs
+  from `RetroCSS.init()`. Outside a secure context, where
+  `navigator.clipboard` is undefined, it selects the code and says
+  `Press Ctrl+C` rather than failing silently.
+
+- **`npm run docs:api`** renders the SassDoc blocks the SCSS has always carried
+  to `docs/api/`. `sassdoc` was installed and never wired up.
+
+## Verifying your own pages
+
+`npm run check:pages` renders every page in the repo in real Chromium, in both
+themes, at 1200/980/760/420/360px, and fails on console errors, horizontal
+overflow, a missing or duplicated `h1`, contrast below AA on any rendered text,
+or an input glyph off-centre. It is worth pointing at your own pages.
+
+---
+
 # Migrating to RetroCSS 2.0
 
 2.0 is an accessibility and readability release. Nothing was renamed and no

package/README.md

@@ -175,9 +175,10 @@ Typography is tokenised the same way: `--retro-font`, `--retro-font-heading`,
 default; for a modern heading font, set
 `--retro-font-heading: 'Segoe UI', Tahoma, sans-serif;`.
 
-> **Upgrading from 1.x?** See [MIGRATION.md](MIGRATION.md). No classes were
-> renamed or removed, but 2.0 visibly restyles a few things to meet WCAG AA —
-> each with a one-line override.
+> **Upgrading?** See [MIGRATION.md](MIGRATION.md). No class has ever been
+> renamed, but 3.0 raises the body text to 16px and drops the `!important` from
+> the `border-radius` reset, both of which are visible on every page — each with
+> a one-line override. 2.0 restyled a few things to meet WCAG AA.
 
 ## Utilities
 
@@ -210,6 +211,13 @@ themes. `npm run check:a11y` compiles the SCSS and asserts it, and fails the
 build on a regression — it also catches any `var(--retro-*)` that resolves to
 nothing.
 
+That proves the *tokens* are sound. `npm run check:pages` proves the *pages*
+are: it renders every page in the repo in real Chromium, in both themes, at
+1200/980/760/420/360px, and fails on a console error, horizontal overflow, a
+missing or duplicated `<h1>`, any rendered text below AA against the surface
+actually painted behind it, or an input glyph off its field's centre line. Both
+run in CI on every push.
+
 Beyond colour:
 
 - **Focus rings are `:focus-visible`.** Keyboard and assistive-tech users get a
@@ -224,6 +232,8 @@ Beyond colour:
   Tab all behave. Escape returns focus to the toggle.
 - **`prefers-reduced-motion` is honoured** — every animation and transition is
   neutralised, with the looping text effects switched off outright.
+- **Sortable tables are operable.** `.retro-table-sortable` headers are
+  focusable, sort on Enter and Space as well as click, and carry `aria-sort`.
 - **`.retro-sr-only`** labels icon-only controls; `.retro-sr-only-focusable`
   gives you a skip link.
 
@@ -262,6 +272,20 @@ Watch for changes:
 npm run watch
 ```
 
+Run the gates:
+
+```bash
+npm run check:a11y && npm run check:pages
+```
+
+`check:pages` needs a browser once: `npx playwright install chromium`.
+
+Render the SassDoc API reference to `docs/api/`:
+
+```bash
+npm run docs:api
+```
+
 ## License
 
 MIT

package/dist/retro.css

@@ -339,13 +339,13 @@
   --retro-font: MS Sans Serif, Microsoft Sans Serif, Arial, sans-serif;
   --retro-font-heading: MS Sans Serif, Microsoft Sans Serif, Arial, sans-serif;
   --retro-font-mono: Courier New, Courier, monospace;
-  --retro-font-size: 0.875rem;
-  --retro-font-size-xs: 0.6875rem;
-  --retro-font-size-sm: 0.75rem;
-  --retro-font-size-lg: 1rem;
-  --retro-font-size-xl: 1.125rem;
-  --retro-font-size-2xl: 1.375rem;
-  --retro-font-size-3xl: 1.75rem;
+  --retro-font-size: 1rem;
+  --retro-font-size-xs: 0.75rem;
+  --retro-font-size-sm: 0.875rem;
+  --retro-font-size-lg: 1.125rem;
+  --retro-font-size-xl: 1.25rem;
+  --retro-font-size-2xl: 1.5rem;
+  --retro-font-size-3xl: 1.875rem;
   --retro-line-height: 1.5;
   --retro-line-height-tight: 1.25;
   --retro-font-weight-normal: 400;
@@ -628,7 +628,7 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  border-radius: 0 !important;
+  border-radius: 0;
   box-shadow: none;
   transition: none;
 }
@@ -977,7 +977,6 @@ h5, h6 {
   font-size: var(--retro-font-size-2xl);
   font-weight: var(--retro-font-weight-bold);
   text-transform: uppercase;
-  letter-spacing: 0.08em;
   padding: 0.5rem 1.2rem;
   margin-bottom: 0.5rem;
   color: var(--retro-text);
@@ -1040,6 +1039,7 @@ h5, h6 {
 .retro-heading-primary, .retro-heading-success, .retro-heading-warning, .retro-heading-danger, .retro-heading-info, .retro-heading-teal, .retro-heading-pink, .retro-heading-lime {
   padding: var(--retro-spacing-sm) var(--retro-spacing-md);
   margin-bottom: var(--retro-spacing-md);
+  min-width: 0;
   border: 2px solid;
   position: relative;
   font-family: var(--retro-font-heading);
@@ -1440,6 +1440,16 @@ h5, h6 {
 .retro-code .retro-code-copy:active {
   box-shadow: inset 1px 1px 0 var(--retro-shadow-light), inset -1px -1px 0 var(--retro-border-dark);
 }
+.retro-code .retro-code-copy.retro-code-copy-ok {
+  background: var(--retro-success);
+  color: var(--retro-success-fg);
+  border-color: var(--retro-success-active);
+}
+.retro-code .retro-code-copy.retro-code-copy-fail {
+  background: var(--retro-danger);
+  color: var(--retro-danger-fg);
+  border-color: var(--retro-danger-active);
+}
 .retro-code code {
   display: block;
   padding: 1.2rem;
@@ -1779,7 +1789,7 @@ h5, h6 {
   text-shadow: none;
   padding: 8px 16px;
   font-weight: bold;
-  font-size: 0.875rem;
+  font-size: 1rem;
   user-select: none;
   display: block;
   text-align: left;
@@ -1789,7 +1799,7 @@ h5, h6 {
   padding: 16px 16px;
   background: var(--retro-card-content-bg);
   border-top: 2px solid var(--retro-card-content-bg);
-  font-size: 0.875rem;
+  font-size: 1rem;
   color: var(--retro-card-content-text);
   min-height: 2em;
   text-align: left;
@@ -1800,7 +1810,7 @@ h5, h6 {
   border-top: 2px solid var(--retro-card-footer-bg);
   color: var(--retro-card-footer-text);
   padding: 8px 16px;
-  font-size: 0.75rem;
+  font-size: 0.875rem;
   text-align: left;
 }
 
@@ -1814,7 +1824,7 @@ h5, h6 {
 
 .retro-card-compact .retro-card-content {
   padding: 4px 8px;
-  font-size: 0.75rem;
+  font-size: 0.875rem;
 }
 
 /* RetroCSS - A Retro-Inspired CSS Framework */
@@ -2537,7 +2547,7 @@ input[type=radio].retro-input:focus-visible {
   border-top: 2px solid var(--retro-info-active);
 }
 
-.retro-alert-icon, .retro-toast-icon, .retro-alert-close, .retro-toast-close {
+.retro-alert-icon, .retro-toast-icon {
   display: none !important;
 }
 
@@ -2571,7 +2581,12 @@ input[type=radio].retro-input:focus-visible {
   border-left: 6px solid var(--retro-info-active);
 }
 
-.retro-toast-close {
+.retro-toast-body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.retro-alert-close, .retro-toast-close {
   background: none;
   border: none;
   color: inherit;
@@ -2579,12 +2594,15 @@ input[type=radio].retro-input:focus-visible {
   font-weight: bold;
   margin-left: auto;
   cursor: pointer;
-  opacity: 0.7;
-  transition: opacity 0.2s;
+  opacity: 1;
+  line-height: 1;
+  padding: 0 0.25em;
+  transition: background-color 0.2s;
 }
 
-.retro-toast-close:hover {
-  opacity: 1;
+.retro-alert-close:hover, .retro-toast-close:hover,
+.retro-alert-close:focus-visible, .retro-toast-close:focus-visible {
+  background-color: rgba(var(--retro-shadow-rgb), 0.18);
 }
 
 .retro-alert-primary {
@@ -2618,6 +2636,9 @@ input[type=radio].retro-input:focus-visible {
 }
 
 .retro-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--retro-spacing-sm);
   box-shadow: 2px 4px 16px rgba(var(--retro-shadow-rgb), 0.18), 1px 1px 0 var(--retro-border-light), 2px 2px 0 var(--retro-border-medium);
   border-width: 1.5px;
   margin-bottom: 0.75em;
@@ -2727,7 +2748,7 @@ input[type=radio].retro-input:focus-visible {
   background-color: var(--retro-table-bg);
   color: var(--retro-table-header-text);
   font-family: var(--retro-font);
-  font-size: 0.875rem;
+  font-size: 1rem;
   box-shadow: var(--retro-box-shadow-outset-button);
   overflow-x: auto;
   margin-bottom: var(--retro-spacing-md);
@@ -2757,12 +2778,43 @@ input[type=radio].retro-input:focus-visible {
 .retro-table tbody tr:hover {
   background-color: var(--retro-table-striped-bg);
 }
+.retro-table thead th.retro-th-sortable {
+  cursor: pointer;
+  user-select: none;
+  padding-right: calc(var(--retro-spacing-md) + 14px);
+  position: relative;
+}
+.retro-table thead th.retro-th-sortable:hover {
+  background-color: var(--retro-primary);
+  color: var(--retro-primary-fg);
+}
+.retro-table thead th.retro-th-sortable:focus-visible {
+  outline: 2px solid var(--retro-border-light);
+  outline-offset: -3px;
+}
+.retro-table thead th.retro-th-sortable::after {
+  content: "\11 95";
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: var(--retro-font-size-xs);
+  opacity: 0.45;
+}
+.retro-table thead th.retro-th-sortable.asc::after {
+  content: "\15 B2";
+  opacity: 1;
+}
+.retro-table thead th.retro-th-sortable.desc::after {
+  content: "\15 BC";
+  opacity: 1;
+}
 .retro-table.retro-table-striped tbody tr:nth-child(odd) {
   background-color: var(--retro-table-striped-bg);
 }
 .retro-table.retro-table-striped tbody tr:nth-child(odd):hover {
   background-color: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
 }
 .retro-table.retro-table-bordered {
   border: 2px solid var(--retro-border-dark);
@@ -2800,6 +2852,27 @@ input[type=radio].retro-input:focus-visible {
   width: 16px;
 }
 
+/**
+ * @name Responsive Table Wrapper
+ * @group components
+ * @description
+ * Horizontal scroll container for a wide table. `table-responsive.js` wraps
+ * every `.retro-table` in this class — but the styles had been commented out,
+ * so the wrapper was inert and wide tables simply overflowed the page on
+ * narrow viewports.
+ */
+.retro-table-responsive {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.retro-table-responsive > .retro-table {
+  margin-bottom: 0;
+}
+
 /* RetroCSS - A Retro-Inspired CSS Framework */
 /* Main SCSS file that imports all components */
 /* Core */
@@ -3042,7 +3115,7 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-nav-item.active, .active.retro-tab {
   background: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
   text-shadow: 0 1px 2px var(--retro-border-dark), 0 0 2px var(--retro-border-light);
   outline: 2px solid var(--retro-border-light);
   outline-offset: -2px;
@@ -3117,6 +3190,7 @@ input[type=radio].retro-input:focus-visible {
   display: flex;
   flex-direction: column;
   width: max-content;
+  max-width: 100%;
   border: 2px solid var(--retro-border-dark);
   background: var(--retro-light);
   padding: 0;
@@ -3157,11 +3231,11 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-nav-pills .retro-nav-item:hover, .retro-nav-pills .retro-tab:hover {
   background: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
 }
 .retro-nav-pills .retro-nav-item.active, .retro-nav-pills .active.retro-tab {
   background: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
   font-weight: bold;
   box-shadow: 0 1px 4px rgba(var(--retro-primary-rgb), 0.35) inset;
 }
@@ -3243,6 +3317,7 @@ input[type=radio].retro-input:focus-visible {
 
 .retro-nav-tabbed {
   display: flex;
+  flex-wrap: wrap;
   padding: 0;
   margin: 0 0 -1px 0;
   background: transparent;
@@ -3276,6 +3351,7 @@ input[type=radio].retro-input:focus-visible {
 
 .retro-nav-underlined {
   display: flex;
+  flex-wrap: wrap;
   padding: 0;
   margin: 0;
   background: transparent;
@@ -3318,6 +3394,7 @@ input[type=radio].retro-input:focus-visible {
 
 .retro-nav-buttons {
   display: inline-flex;
+  flex-wrap: wrap;
   padding: 0;
   margin: 0;
   background: transparent;
@@ -3352,7 +3429,7 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-nav-buttons .retro-nav-item.active, .retro-nav-buttons .active.retro-tab {
   background: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
   z-index: 2;
 }
 
@@ -3788,7 +3865,7 @@ input[type=radio].retro-input:focus-visible {
 .retro-pagination .retro-btn.active,
 .retro-pagination .retro-btn:active {
   background: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
   font-weight: bold;
   border-color: var(--retro-primary);
 }
@@ -3799,6 +3876,7 @@ input[type=radio].retro-input:focus-visible {
 .retro-breadcrumbs {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   font-family: var(--retro-font);
   font-size: var(--retro-font-size-lg);
   background: var(--retro-card-bg);
@@ -3849,7 +3927,7 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-dropdown.open .retro-dropdown-toggle {
   background: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
   border-color: var(--retro-primary-dark);
 }
 
@@ -3925,7 +4003,7 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-dropdown-item:hover {
   background: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
 }
 .retro-dropdown-item:active {
   background: var(--retro-primary-dark);
@@ -4094,7 +4172,7 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-search-suggestion:hover {
   background: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
 }
 
 /* RetroCSS - A Retro-Inspired CSS Framework */
@@ -4108,7 +4186,7 @@ input[type=radio].retro-input:focus-visible {
 
 .retro-rating-star {
   font-size: var(--retro-font-size-3xl);
-  color: var(--retro-border-dark);
+  color: var(--retro-text-muted);
   cursor: pointer;
   transition: color 0.2s, text-shadow 0.2s, border 0.2s;
   text-shadow: 1px 1px 0 var(--retro-border-light);
@@ -4243,9 +4321,7 @@ input[type=radio].retro-input:focus-visible {
   box-shadow: 3px 3px 0 rgba(var(--retro-shadow-rgb), 0.2);
   z-index: 1050;
   pointer-events: none;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.2s, visibility 0.2s;
+  display: none;
   font-family: var(--retro-font);
   max-width: 200px;
   line-height: 1.4;
@@ -4260,8 +4336,7 @@ input[type=radio].retro-input:focus-visible {
   /* Active state */
 }
 .retro-tooltip.show {
-  opacity: 1;
-  visibility: visible;
+  display: block;
 }
 .retro-tooltip {
   /* Positions */
@@ -4337,7 +4412,7 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-tooltip.retro-tooltip-primary {
   background: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
 }
 .retro-tooltip.retro-tooltip-primary.retro-tooltip-top::after {
   border-top-color: var(--retro-primary);
@@ -4353,7 +4428,7 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-tooltip.retro-tooltip-success {
   background: var(--retro-success);
-  color: var(--retro-white);
+  color: var(--retro-success-fg);
 }
 .retro-tooltip.retro-tooltip-success.retro-tooltip-top::after {
   border-top-color: var(--retro-success);
@@ -4385,7 +4460,7 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-tooltip.retro-tooltip-danger {
   background: var(--retro-danger);
-  color: var(--retro-white);
+  color: var(--retro-danger-fg);
 }
 .retro-tooltip.retro-tooltip-danger.retro-tooltip-top::after {
   border-top-color: var(--retro-danger);
@@ -4466,7 +4541,7 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-list-hover li:hover, .retro-list-hover li:focus-visible {
   background-color: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
   box-shadow: 0 2px 8px rgba(var(--retro-shadow-rgb), 0.06);
   outline: none;
 }
@@ -4496,7 +4571,7 @@ ol.retro-list li::before {
   width: 2em;
   height: 2em;
   background: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
   font-weight: bold;
   font-family: inherit;
   font-size: 1.1em;
@@ -4524,7 +4599,7 @@ ol.retro-list li ol.retro-list li::before {
   height: 1.5em;
   font-size: 0.95em;
   background: var(--retro-success);
-  color: var(--retro-white);
+  color: var(--retro-success-fg);
   border-radius: 4px;
   border: 2px solid var(--retro-border-medium);
   top: 0.1em;
@@ -7625,17 +7700,6 @@ input[type=datetime-local].retro-input.retro-input-sm {
   container-name: retro-container;
 }
 
-@container retro-container (min-width: 20rem) {}
-@container retro-container (min-width: 30rem) {}
-@container retro-container (min-width: 40rem) {}
-@container retro-container (min-width: 50rem) {}
-@container retro-container (min-aspect-ratio: 16/9) {}
-@container retro-container (max-aspect-ratio: 4/3) {}
-@container retro-container (orientation: landscape) {}
-@container retro-container (orientation: portrait) {}
-@container retro-container (min-width: 20rem) and (max-width: 30rem) {}
-@container retro-container (min-width: 30rem) and (max-width: 40rem) {}
-@container retro-container (min-width: 40rem) and (max-width: 50rem) {}
 @container retro-container (max-width: 20rem) {
   .retro-cq-hide {
     display: none;