@rcarls/rc-theme-win31 0.0.0 → 0.7.0

package/components/list-item.css

@@ -0,0 +1,90 @@
+@layer rc-theme-win31.components {
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) {
+    --rc-list-item-gap: var(--win31-gap-tight);
+    --rc-list-item-min-block-size: var(--win31-listbox-row-height);
+    --rc-list-item-padding-block: var(--win31-padding-block);
+    --rc-list-item-padding-inline: var(--win31-padding-inline);
+    /*
+     * No hover wash. Windows 3.1 highlighted menu items under the pointer and
+     * left list rows alone, so a row's resting and hovered appearance match.
+     */
+    --rc-list-item-hover-bg: transparent;
+    --rc-list-item-active-bg: var(--win31-color-selection);
+    --rc-list-item-selected-bg: var(--win31-color-selection);
+    --rc-list-item-selected-color: var(--win31-color-selection-text);
+    --rc-list-item-disabled-opacity: 1;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-list {
+    --rc-list-padding-inline: 0;
+    --rc-list-leading-gap: var(--win31-gap);
+    --rc-list-trailing-gap: var(--win31-gap);
+    --rc-list-row-gap: 0;
+    --rc-list-item-min-block-size: var(--win31-listbox-row-height);
+    --rc-list-item-padding-block: var(--win31-padding-block);
+    --rc-list-item-color: var(--win31-color-field-text);
+    --rc-list-item-background: transparent;
+    --rc-list-item-selected-color: var(--win31-color-selection-text);
+    --rc-list-item-selected-background: var(--win31-color-selection);
+    --rc-list-item-divider: 0;
+    --rc-list-item-hover-state-layer-opacity: 0;
+    --rc-list-item-focus-state-layer-opacity: 0;
+    --rc-list-item-pressed-state-layer-opacity: 0;
+    --rc-list-item-disabled-opacity: 1;
+    --rc-list-item-transition-duration: 0ms;
+    color: var(--win31-color-field-text);
+    background: var(--win31-color-field);
+    font-family: var(--win31-font-family);
+    font-size: var(--win31-font-size);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-list[variant='segmented'] {
+    --rc-list-row-gap: var(--win31-gap-tight);
+    --rc-list-item-background: var(--win31-color-surface);
+    --rc-list-item-border: var(--win31-hairline) solid;
+    --rc-list-item-border-radius: var(--win31-radius);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-list::part(state-layer) {
+    display: none;
+  }
+
+  /*
+   * Focus and selection are two separate marks. A 3.1 list could hold a
+   * selected row that was not the focused row, so the dotted rectangle is drawn
+   * in addition to the inverse-video selection, switching to white inside it so
+   * it stays visible against the navy.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-list-item:focus-visible {
+    outline: var(--win31-focus-ring);
+    outline-offset: calc(-1 * var(--win31-unit));
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-list-item[selected]:focus-visible {
+    outline: var(--win31-focus-ring-selected);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    rc-list-item
+    > :where([data-rc-list-supporting], small) {
+    display: block;
+    color: inherit;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-list-item > img[slot='leading'] {
+    image-rendering: pixelated;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-listbox,
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) [part~='listbox'] {
+    --rc-listbox-option-gap: var(--rc-list-item-gap);
+    --rc-listbox-option-min-block-size: var(--rc-list-item-min-block-size);
+    --rc-listbox-option-padding-block: var(--rc-list-item-padding-block);
+    --rc-listbox-option-padding-inline: var(--rc-list-item-padding-inline);
+    --rc-listbox-hover-bg: var(--rc-list-item-hover-bg);
+    --rc-listbox-active-bg: var(--rc-list-item-active-bg);
+    --rc-listbox-selected-bg: var(--rc-list-item-selected-bg);
+    --rc-listbox-selected-color: var(--rc-list-item-selected-color);
+    --rc-listbox-disabled-opacity: 1;
+  }
+}

package/components/listbox.css

@@ -0,0 +1,39 @@
+@layer rc-theme-win31.components {
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-listbox {
+    display: block;
+    padding: var(--win31-gap-tight);
+    overflow: auto;
+    color: var(--win31-color-field-text);
+    background: var(--win31-color-field);
+    border: var(--win31-hairline) solid;
+    border-color: var(--win31-inset-border-color);
+    border-radius: var(--win31-radius);
+    box-shadow: none;
+    font-family: var(--win31-font-family);
+    font-size: var(--win31-font-size);
+    --rc-listbox-option-transition: none;
+    --rc-listbox-disabled-opacity: 1;
+  }
+
+  /*
+   * Selection is full-row inverse video and it persists whether or not the
+   * listbox has focus, which is why focus needs its own dotted mark below.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-listbox::part(option) {
+    border-radius: var(--win31-radius);
+    transition: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-listbox::part(option):focus-visible {
+    outline: var(--win31-focus-ring);
+    outline-offset: calc(-1 * var(--win31-unit));
+  }
+
+  /*
+   * A 3.1 listbox marked selection by inverting the row, never by adding a
+   * checkmark, so the indicator is removed rather than restyled.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-listbox::part(option-checkmark) {
+    display: none;
+  }
+}

package/components/markdown-editor.css

@@ -0,0 +1,80 @@
+@layer rc-theme-win31.components {
+  /*
+   * Write, essentially: a strip of latched toolbar buttons over a sunken text
+   * well, in the one typeface the shell had.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-markdown-editor {
+    --rc-markdown-editor-background: var(--win31-color-field);
+    --rc-markdown-editor-color: var(--win31-color-field-text);
+    --rc-markdown-editor-border: var(--win31-hairline) solid var(--win31-color-shadow);
+    --rc-markdown-editor-border-radius: var(--win31-radius);
+    --rc-markdown-editor-padding: var(--win31-gap-tight);
+    --rc-markdown-editor-font-family: var(--win31-font-family);
+    --rc-markdown-editor-font-size: var(--win31-font-size);
+    --rc-markdown-editor-line-height: var(--win31-line-height);
+    --rc-markdown-editor-src-font-family: var(--win31-font-family);
+    --rc-markdown-editor-src-dim-color: var(--win31-color-shadow);
+    --rc-markdown-editor-src-heading-color: var(--win31-color-frame);
+    --rc-markdown-editor-src-link-color: var(--win31-color-selection);
+    --rc-markdown-editor-src-code-color: var(--win31-color-frame);
+    --rc-markdown-editor-src-list-color: var(--win31-color-frame);
+    --rc-markdown-editor-src-blockquote-color: var(--win31-color-shadow);
+    --rc-markdown-editor-focus-outline: var(--win31-focus-ring);
+    --rc-markdown-editor-toolbar-background: var(--win31-color-surface);
+    --rc-markdown-editor-toolbar-color: var(--win31-color-frame);
+    --rc-markdown-editor-toolbar-border: var(--win31-border);
+    --rc-markdown-editor-toolbar-radius: var(--win31-radius);
+    --rc-markdown-editor-toolbar-padding: var(--win31-gap-tight);
+    --rc-markdown-editor-toolbar-gap: calc(3 * var(--win31-unit));
+    --rc-markdown-editor-toolbar-button-size: var(--win31-toolbar-button-size);
+    --rc-markdown-editor-toolbar-button-background: var(--win31-color-surface);
+    --rc-markdown-editor-toolbar-button-color: var(--win31-color-frame);
+    --rc-markdown-editor-toolbar-button-border: var(--win31-border);
+    --rc-markdown-editor-toolbar-button-radius: var(--win31-radius);
+    --rc-markdown-editor-toolbar-button-active-background: var(--win31-color-surface);
+    --rc-markdown-editor-toolbar-button-active-color: var(--win31-color-frame);
+    --rc-markdown-editor-toolbar-button-active-border: var(--win31-color-frame);
+    --rc-markdown-editor-toolbar-button-hover-opacity: 0;
+    --rc-markdown-editor-toolbar-button-focus-opacity: 0;
+    --rc-markdown-editor-toolbar-button-pressed-opacity: 0;
+    --rc-markdown-editor-toolbar-input-background: var(--win31-color-field);
+    --rc-markdown-editor-toolbar-input-color: var(--win31-color-field-text);
+    --rc-markdown-editor-toolbar-input-border: var(--win31-hairline) solid var(--win31-color-shadow);
+    --rc-markdown-editor-toolbar-input-radius: var(--win31-radius);
+    --rc-markdown-editor-toolbar-select-background: var(--win31-color-field);
+    --rc-markdown-editor-toolbar-select-color: var(--win31-color-field-text);
+    --rc-markdown-editor-toolbar-select-border: var(--win31-hairline) solid
+      var(--win31-color-shadow);
+    --rc-markdown-editor-toolbar-select-radius: var(--win31-radius);
+    --rc-markdown-editor-toolbar-select-active-background: var(--win31-color-field);
+    --rc-markdown-editor-toolbar-select-active-color: var(--win31-color-field-text);
+    --rc-markdown-editor-toolbar-select-active-border-color: var(--win31-color-frame);
+    --rc-markdown-editor-toolbar-focus-outline: var(--win31-focus-ring);
+    --rc-markdown-editor-toolbar-focus-outline-offset: var(--win31-focus-ring-offset);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-markdown-editor::part(toolbar) {
+    min-block-size: var(--win31-toolbar-height);
+    border-block-end: var(--win31-border);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-markdown-editor::part(toolbar) button {
+    box-shadow: var(--win31-bevel-outset-1);
+    cursor: default;
+    transition: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    rc-markdown-editor::part(toolbar)
+    button[aria-pressed='true'] {
+    background-image: var(--win31-dither-track);
+    background-size: var(--win31-dither-size);
+    box-shadow: var(--win31-bevel-inset-1);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-markdown-editor::part(rich-view) {
+    border: var(--win31-hairline) solid;
+    border-color: var(--win31-inset-border-color);
+    border-radius: var(--win31-radius);
+  }
+}

package/components/menu-button.css

@@ -0,0 +1,39 @@
+@layer rc-theme-win31.components {
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-menu-button {
+    --rc-menu-button-trigger-background: var(--win31-color-surface);
+    --rc-menu-button-trigger-color: var(--win31-color-frame);
+    --rc-menu-button-trigger-border: var(--win31-border);
+    --rc-menu-button-trigger-radius: var(--win31-radius);
+    --rc-menu-button-trigger-block-size: var(--win31-control-height);
+    --rc-menu-button-trigger-padding-block: var(--win31-padding-block);
+    --rc-menu-button-trigger-padding-inline: calc(8 * var(--win31-unit));
+    --rc-menu-button-trigger-gap: var(--win31-gap-tight);
+    --rc-menu-button-trigger-transition: none;
+    --rc-menu-button-popup-duration: 0ms;
+    --rc-menu-button-trigger-hover-background: var(--win31-color-surface);
+    --rc-menu-button-trigger-hover-color: var(--win31-color-frame);
+    --rc-menu-button-trigger-hover-border-color: var(--win31-color-frame);
+    --rc-menu-button-trigger-open-background: var(--win31-color-selection);
+    --rc-menu-button-trigger-open-color: var(--win31-color-selection-text);
+    --rc-menu-button-trigger-open-border-color: transparent;
+    --rc-menu-button-indicator-color: var(--win31-color-frame);
+    --rc-menu-button-indicator-size: var(--win31-check-size);
+    --rc-menu-button-icon-size: var(--win31-check-size);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-menu-button > button[slot='trigger'] {
+    box-shadow: var(--win31-bevel-outset-1);
+    cursor: default;
+  }
+
+  /*
+   * While the menu is open the trigger stays inverted, which is how 3.1 showed
+   * which menu owned the open panel.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-menu-button[open] > button[slot='trigger'],
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-menu-button > button[slot='trigger']:active {
+    color: var(--win31-color-selection-text);
+    background-color: var(--win31-color-selection);
+    box-shadow: none;
+  }
+}

package/components/menu.css

@@ -0,0 +1,64 @@
+@layer rc-theme-win31.components {
+  /*
+   * A 3.1 menu is a flat surface panel with a hard one-pixel frame and a hard
+   * one-pixel drop shadow. Menus are the one place 3.1 did highlight under the
+   * pointer, so the hover tokens are live here where they are transparent for
+   * list rows. Tokens are declared on the theme root so menus inside other
+   * shadow roots inherit them.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) {
+    --rc-menu-min-width: calc(142 * var(--win31-unit));
+    --rc-menu-item-min-block-size: calc(20 * var(--win31-unit));
+    --rc-menu-item-padding-block: 0;
+    --rc-menu-item-padding-inline: calc(18 * var(--win31-unit)) calc(34 * var(--win31-unit));
+    --rc-menu-item-gap: var(--win31-gap);
+    --rc-menu-item-transition: none;
+    --rc-menu-hover-bg: var(--win31-color-selection);
+    --rc-menu-hover-color: var(--win31-color-selection-text);
+    --rc-menu-active-bg: var(--win31-color-selection);
+    --rc-menu-active-color: var(--win31-color-selection-text);
+    --rc-menu-disabled-color: var(--win31-color-disabled-text);
+    --rc-menu-disabled-opacity: 1;
+    --rc-menu-check-color: var(--win31-color-menu-text);
+    --rc-menu-check-size: var(--win31-check-size);
+    --rc-menu-group-label-color: var(--win31-color-menu-text);
+    --rc-menu-shortcut-color: inherit;
+    --rc-menu-shortcut-size: var(--win31-font-size);
+    /* Two-pixel ridge, the way 3.1 drew every divider. */
+    --rc-menu-separator-border: var(--win31-hairline) solid var(--win31-color-shadow);
+    --rc-menu-separator-margin-block: var(--win31-unit);
+    --rc-menu-separator-margin-inline: 0;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-menu {
+    font-family: var(--win31-font-family);
+    font-size: var(--win31-font-size);
+    line-height: 1;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-menu [role^='menuitem'] {
+    border-radius: var(--win31-radius);
+    cursor: default;
+    transition: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-menu [role^='menuitem']:focus-visible {
+    outline: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-menu [role^='menuitem']:disabled,
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-menu [role^='menuitem'][aria-disabled='true'] {
+    color: var(--win31-color-disabled-text);
+    text-shadow: var(--win31-unit) var(--win31-unit) 0 var(--win31-color-disabled-emboss);
+    opacity: 1;
+  }
+
+  /*
+   * The shortcut column is right-aligned plain text at the same size as the
+   * label. 3.1 did not dim it; the spacing carried the distinction.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-menu [data-rc-menu-shortcut] {
+    color: inherit;
+    font-size: var(--win31-font-size);
+  }
+}

package/components/menubar.css

@@ -0,0 +1,67 @@
+@layer rc-theme-win31.components {
+  /*
+   * The menu bar runs at its own larger type size, which is one of the few
+   * places 3.1 varied it. An open top-level item inverts to the selection
+   * colors rather than opening a highlighted container.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-menubar {
+    --rc-menubar-gap: 0;
+    --rc-menubar-padding-inline: 0;
+    --rc-menubar-padding-block: 0;
+    --rc-menubar-border: 0;
+    --rc-menubar-radius: var(--win31-radius);
+    --rc-menubar-background: var(--win31-color-menu);
+    --rc-menubar-color: var(--win31-color-menu-text);
+    --rc-menubar-item-block-size: var(--win31-menu-height);
+    --rc-menubar-item-padding-block: 0;
+    --rc-menubar-item-padding-inline: calc(9 * var(--win31-unit));
+    --rc-menubar-item-gap: 0;
+    --rc-menubar-item-border: 0;
+    --rc-menubar-item-radius: var(--win31-radius);
+    --rc-menubar-item-background: transparent;
+    --rc-menubar-item-color: var(--win31-color-menu-text);
+    --rc-menubar-item-transition: none;
+    --rc-menubar-item-hover-border-color: transparent;
+    --rc-menubar-item-hover-background: var(--win31-color-selection);
+    --rc-menubar-item-hover-color: var(--win31-color-selection-text);
+    --rc-menubar-item-open-border-color: transparent;
+    --rc-menubar-item-open-background: var(--win31-color-selection);
+    --rc-menubar-item-open-color: var(--win31-color-selection-text);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-menubar::part(root) {
+    min-block-size: var(--win31-menu-height);
+    background: var(--win31-color-menu);
+    border-block-end: var(--win31-border);
+    box-shadow: none;
+    font-family: var(--win31-font-family);
+    font-size: var(--win31-menu-font-size);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    rc-menubar
+    rc-menu-button
+    > button[slot='trigger'] {
+    min-block-size: var(--win31-menu-height);
+    padding-block: 0;
+    padding-inline: calc(9 * var(--win31-unit));
+    border: 0;
+    border-radius: var(--win31-radius);
+    box-shadow: none;
+    font-size: var(--win31-menu-font-size);
+    line-height: 1;
+    cursor: default;
+  }
+
+  /*
+   * Mnemonics are authored markup, not a component feature: the underlined
+   * letter is a <u> inside the label. Keeping the underline visible is the
+   * whole point of the convention, so it is stated explicitly here rather than
+   * left to a UA default that a reset may have removed.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-menubar u,
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-menu u {
+    text-decoration: underline;
+    text-underline-offset: var(--win31-unit);
+  }
+}

package/components/modes.css

@@ -0,0 +1,58 @@
+@layer rc-theme-win31.components {
+  /*
+   * Reduced motion is already satisfied: every duration in this theme is zero
+   * because 3.1 animated nothing. Declared anyway so the guarantee is explicit
+   * rather than incidental, and so a consumer override cannot reintroduce
+   * motion under the preference.
+   */
+  @media (prefers-reduced-motion: reduce) {
+    :where(.rc-theme-win31, :host(.rc-theme-win31)) *,
+    :where(.rc-theme-win31, :host(.rc-theme-win31)) *::before,
+    :where(.rc-theme-win31, :host(.rc-theme-win31)) *::after {
+      transition-duration: 0s !important;
+      animation-duration: 0s !important;
+    }
+  }
+
+  /*
+   * Forced colors: total surrender.
+   *
+   * Every bevel in this theme is an inset box-shadow, a four-value
+   * border-color, or a dither image, and forced colors deletes or overrides
+   * all three. There is no version of a 3.1 bevel that survives High Contrast,
+   * and a user who has turned it on has asked for exactly the decoration this
+   * theme is made of to go away. So it goes away completely and the system
+   * palette takes over.
+   *
+   * The result is closer to stock, pre-CTL3D Windows 3.1 than the beveled
+   * default is: flat, system-colored, one-pixel-outlined controls.
+   */
+  @media (forced-colors: active) {
+    :where(.rc-theme-win31, :host(.rc-theme-win31)) * {
+      forced-color-adjust: auto;
+      box-shadow: none !important;
+      background-image: none !important;
+      text-shadow: none !important;
+    }
+
+    :where(.rc-theme-win31, :host(.rc-theme-win31)) :is(button, [role='button'], summary) {
+      border: 1px solid ButtonBorder;
+    }
+
+    :where(.rc-theme-win31, :host(.rc-theme-win31))
+      :is(button, [role='button'], [role^='menuitem'], summary):focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 0;
+    }
+
+    /*
+     * The dotted focus rectangle is too thin to survive as the only indicator
+     * once the bevels are gone, so it thickens rather than disappearing.
+     */
+    :where(.rc-theme-win31, :host(.rc-theme-win31)) {
+      --win31-focus-ring: 2px solid Highlight;
+      --win31-focus-ring-selected: 2px solid HighlightText;
+      --win31-focus-ring-offset: 0;
+    }
+  }
+}

package/components/navigation-bar.css

@@ -0,0 +1,52 @@
+@layer rc-theme-win31.components {
+  /*
+   * No 3.1 analogue. The closest period construction is a docked strip of
+   * latched icon buttons, the way Program Manager showed groups and a toolbar
+   * showed modes, so the active destination reads as pressed rather than as
+   * tinted.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-navigation-bar {
+    --rc-navigation-bar-bg: var(--win31-color-surface);
+    --rc-navigation-bar-color: var(--win31-color-frame);
+    --rc-navigation-bar-item-color: var(--win31-color-frame);
+    --rc-navigation-bar-active-color: var(--win31-color-frame);
+    --rc-navigation-bar-block-size: var(--win31-toolbar-height);
+    --rc-navigation-bar-gap: calc(3 * var(--win31-unit));
+    --rc-navigation-bar-padding-block: var(--win31-gap-tight);
+    --rc-navigation-bar-padding-inline: calc(3 * var(--win31-unit));
+    --rc-navigation-bar-item-gap: var(--win31-gap-tight);
+    --rc-navigation-bar-item-min-block-size: var(--win31-toolbar-button-size);
+    --rc-navigation-bar-item-padding-block: 0;
+    --rc-navigation-bar-item-padding-inline: var(--win31-gap-tight);
+    --rc-navigation-bar-item-text-decoration: none;
+    --rc-navigation-bar-indicator-bg: transparent;
+    --rc-navigation-bar-indicator-border: 0;
+    --rc-navigation-bar-indicator-radius: var(--win31-radius);
+    --rc-navigation-bar-indicator-duration: 0ms;
+    --rc-navigation-bar-focus-ring: var(--win31-focus-ring);
+    --rc-navigation-bar-focus-ring-offset: var(--win31-focus-ring-offset);
+    font-family: var(--win31-font-family);
+    font-size: var(--win31-font-size);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-navigation-bar::part(nav) {
+    border-block-start: var(--win31-border);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-navigation-bar :is(a, button) {
+    background-color: var(--win31-color-surface);
+    border: var(--win31-border);
+    border-radius: var(--win31-radius);
+    box-shadow: var(--win31-bevel-outset-1);
+    cursor: default;
+    transition: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    rc-navigation-bar
+    :is([aria-current], [aria-selected='true']) {
+    background-image: var(--win31-dither-track);
+    background-size: var(--win31-dither-size);
+    box-shadow: var(--win31-bevel-inset-1);
+  }
+}

package/components/navigation-rail.css

@@ -0,0 +1,57 @@
+@layer rc-theme-win31.components {
+  /* The vertical form of the docked latched-button strip above. */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-navigation-rail {
+    --rc-navigation-rail-bg: var(--win31-color-surface);
+    --rc-navigation-rail-color: var(--win31-color-frame);
+    --rc-navigation-rail-item-color: var(--win31-color-frame);
+    --rc-navigation-rail-active-color: var(--win31-color-frame);
+    --rc-navigation-rail-inline-size: var(--win31-toolbar-height);
+    --rc-navigation-rail-expanded-inline-size: calc(160 * var(--win31-unit));
+    --rc-navigation-rail-gap: calc(3 * var(--win31-unit));
+    --rc-navigation-rail-padding-block: calc(3 * var(--win31-unit));
+    --rc-navigation-rail-padding-inline: var(--win31-gap-tight);
+    --rc-navigation-rail-item-gap: var(--win31-gap-tight);
+    --rc-navigation-rail-item-min-block-size: var(--win31-toolbar-button-size);
+    --rc-navigation-rail-item-padding-block: 0;
+    --rc-navigation-rail-item-padding-inline: var(--win31-gap-tight);
+    --rc-navigation-rail-item-text-decoration: none;
+    --rc-navigation-rail-expanded-item-min-block-size: var(--win31-control-height);
+    --rc-navigation-rail-expanded-item-padding-inline: var(--win31-padding-inline);
+    --rc-navigation-rail-indicator-bg: transparent;
+    --rc-navigation-rail-indicator-border: 0;
+    --rc-navigation-rail-indicator-radius: var(--win31-radius);
+    --rc-navigation-rail-indicator-duration: 0ms;
+    --rc-navigation-rail-duration: 0ms;
+    --rc-navigation-rail-toggle-size: var(--win31-control-height);
+    --rc-navigation-rail-focus-ring: var(--win31-focus-ring);
+    --rc-navigation-rail-focus-ring-offset: var(--win31-focus-ring-offset);
+    font-family: var(--win31-font-family);
+    font-size: var(--win31-font-size);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-navigation-rail::part(nav) {
+    border-inline-end: var(--win31-border);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-navigation-rail :is(a, button) {
+    background-color: var(--win31-color-surface);
+    border: var(--win31-border);
+    border-radius: var(--win31-radius);
+    box-shadow: var(--win31-bevel-outset-1);
+    cursor: default;
+    transition: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    rc-navigation-rail
+    :is([aria-current], [aria-selected='true']) {
+    background-image: var(--win31-dither-track);
+    background-size: var(--win31-dither-size);
+    box-shadow: var(--win31-bevel-inset-1);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-navigation-rail::part(toggle) {
+    border-radius: var(--win31-radius);
+    box-shadow: var(--win31-bevel-outset-1);
+  }
+}

package/components/popover.css

@@ -0,0 +1,13 @@
+@layer rc-theme-win31.components {
+  /*
+   * A popover is a 3.1 popup panel: the bridge's --rc-popup-* tokens already
+   * give it the menu surface, hard one-pixel frame, square corners, and hard
+   * drop shadow. Only its padding needs the theme's panel spacing instead of
+   * the component's roomier default. Declared on the theme root so popovers
+   * inside other shadow roots inherit it.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) {
+    --rc-popover-padding-block: var(--win31-gap-panel);
+    --rc-popover-padding-inline: var(--win31-gap-panel);
+  }
+}

package/components/progress.css

@@ -0,0 +1,47 @@
+@layer rc-theme-win31.components {
+  /*
+   * There was no progress common control in 3.1; Setup drew its own. The
+   * period form is a sunken well filled with discrete blocks rather than a
+   * continuous bar, which also happens to communicate "step N of M" better
+   * than a smooth fill does.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-progress {
+    --rc-progress-track-background: var(--win31-color-field);
+    --rc-progress-track-opacity: 1;
+    --rc-progress-track-radius: var(--win31-radius);
+    --rc-progress-fill-background: var(--win31-color-selection);
+    --rc-progress-value-color: var(--win31-color-frame);
+    --rc-progress-control-size: var(--win31-check-size);
+    --rc-progress-gap: var(--win31-gap);
+    font-family: var(--win31-font-family);
+    font-size: var(--win31-font-size);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-progress::part(track) {
+    border: var(--win31-hairline) solid;
+    border-color: var(--win31-inset-border-color);
+    border-radius: var(--win31-radius);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-progress::part(fill) {
+    border-radius: var(--win31-radius);
+    /*
+     * The gradient paints the blocks on its own, so the solid fill color has to
+     * go: leaving it set fills the gaps behind the transparent stops and the
+     * bar reads as continuous. Forced colors drops the image and restores a
+     * plain bar, which is the right degradation.
+     */
+    background-color: transparent;
+    background-image: repeating-linear-gradient(
+      to right,
+      var(--win31-color-selection) 0 calc(8 * var(--win31-unit)),
+      transparent calc(8 * var(--win31-unit)) calc(10 * var(--win31-unit))
+    );
+    transition: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-progress::part(value-display) {
+    color: var(--win31-color-frame);
+    font-size: var(--win31-font-size);
+  }
+}

package/components/range-slider.css

@@ -0,0 +1,41 @@
+@layer rc-theme-win31.components {
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-range-slider {
+    --rc-range-slider-accent: var(--win31-color-selection);
+    --rc-range-slider-track-background: var(--win31-color-field);
+    --rc-range-slider-thumb-background: var(--win31-color-surface);
+    --rc-range-slider-thumb-border: var(--win31-color-frame);
+    --rc-thumb-radius: var(--win31-radius);
+    font-family: var(--win31-font-family);
+    font-size: var(--win31-font-size);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-range-slider::part(track) {
+    border: var(--win31-hairline) solid;
+    border-color: var(--win31-inset-border-color);
+    border-radius: var(--win31-radius);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-range-slider::part(range) {
+    border-radius: var(--win31-radius);
+    transition: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-range-slider::part(thumb),
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-range-slider::part(low-thumb),
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-range-slider::part(high-thumb) {
+    inline-size: calc(11 * var(--win31-unit));
+    block-size: var(--win31-control-height);
+    background: var(--win31-color-surface);
+    border: var(--win31-border);
+    border-radius: var(--win31-radius);
+    box-shadow: var(--win31-bevel-outset-1);
+    transition: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-range-slider::part(value-display),
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-range-slider::part(low-value-display),
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-range-slider::part(high-value-display) {
+    color: var(--win31-color-frame);
+    font-size: var(--win31-font-size);
+  }
+}