@rcarls/rc-theme-win31 0.0.0 → 0.7.0

package/components/scroller.css

@@ -0,0 +1,91 @@
+@layer rc-theme-win31.components {
+  /*
+   * Scrollbars.
+   *
+   * Windows 3.1 had exactly one scrollbar design and applied it system-wide,
+   * so this styles every scrollable descendant inside the theme scope rather
+   * than only rc-scroller. A 16-pixel gutter, beveled arrow buttons at each
+   * end, a beveled thumb, and a one-bit dithered track between them.
+   *
+   * The detailed treatment is Chromium and WebKit only: Firefox exposes just
+   * scrollbar-width and scrollbar-color, so it gets the two-color fallback set
+   * on the standard properties below. That is a real portability limit, not an
+   * oversight, and the theme's tests assert the fallback rather than the
+   * pseudo-elements.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) {
+    scrollbar-width: auto;
+    scrollbar-color: var(--win31-color-surface) var(--win31-color-shadow);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-scroller {
+    --rc-scroller-scrollbar-width: auto;
+    --rc-scroller-scrollbar-color: var(--win31-color-surface) var(--win31-color-shadow);
+    --rc-scroller-content-row-gap: var(--win31-gap-tight);
+    --rc-scroller-content-padding-inline: 0;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) *::-webkit-scrollbar,
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-scroller::part(content)::-webkit-scrollbar {
+    inline-size: var(--win31-scrollbar-size);
+    block-size: var(--win31-scrollbar-size);
+    background: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) *::-webkit-scrollbar-thumb,
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) *::-webkit-scrollbar-button,
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    rc-scroller::part(content)::-webkit-scrollbar-thumb,
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    rc-scroller::part(content)::-webkit-scrollbar-button {
+    inline-size: var(--win31-scrollbar-size);
+    block-size: var(--win31-scrollbar-size);
+    background: var(--win31-color-surface);
+    border: var(--win31-hairline) solid;
+    border-color: var(--win31-color-surface) var(--win31-color-frame) var(--win31-color-frame)
+      var(--win31-color-surface);
+    box-shadow: var(--win31-bevel-outset-1);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) *::-webkit-scrollbar-button:vertical:decrement {
+    background-image: var(--win31-glyph-arrow-up);
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) *::-webkit-scrollbar-button:vertical:increment {
+    background-image: var(--win31-glyph-arrow-down);
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) *::-webkit-scrollbar-button:horizontal:decrement {
+    background-image: var(--win31-glyph-arrow-left);
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) *::-webkit-scrollbar-button:horizontal:increment {
+    background-image: var(--win31-glyph-arrow-right);
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) *::-webkit-scrollbar-button:active,
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) *::-webkit-scrollbar-thumb:active {
+    box-shadow: var(--win31-bevel-inset-1);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) *::-webkit-scrollbar-track,
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    rc-scroller::part(content)::-webkit-scrollbar-track {
+    background-image: var(--win31-dither-track);
+    background-repeat: repeat;
+    background-size: var(--win31-dither-size);
+    image-rendering: pixelated;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) *::-webkit-scrollbar-corner {
+    background: var(--win31-color-surface);
+  }
+}

package/components/search-bar.css

@@ -0,0 +1,65 @@
+@layer rc-theme-win31.components {
+  /*
+   * There was no search bar in 3.1. The nearest real control is the Find
+   * dialog's edit field beside its Find Next button, so that is what this
+   * renders: a sunken well with beveled affordances at its edges.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-search-bar::part(root) {
+    min-block-size: var(--win31-control-height);
+    padding-block: 0;
+    padding-inline: var(--win31-gap-tight);
+    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);
+    transition: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-search-bar:focus-within::part(root) {
+    outline: var(--win31-focus-ring);
+    outline-offset: var(--win31-focus-ring-offset);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-search-bar > input {
+    color: var(--win31-color-field-text);
+    background: transparent;
+    border: 0;
+    font-family: var(--win31-font-family);
+    font-size: var(--win31-font-size);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-search-bar > input:focus-visible {
+    outline: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-search-bar::part(clear) {
+    min-block-size: calc(18 * var(--win31-unit));
+    min-inline-size: calc(18 * var(--win31-unit));
+    background: var(--win31-color-surface);
+    border: 0;
+    border-radius: var(--win31-radius);
+    box-shadow: var(--win31-bevel-outset-1);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-search-bar::part(clear):active {
+    box-shadow: var(--win31-bevel-inset-1);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-search-bar::part(suggestions) {
+    color: var(--win31-color-field-text);
+    background: var(--win31-color-field);
+    border: var(--win31-border);
+    border-radius: var(--win31-radius);
+    box-shadow: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-search-bar::part(suggestion) {
+    min-block-size: var(--win31-listbox-row-height);
+    border-radius: var(--win31-radius);
+    transition: none;
+  }
+}

package/components/segmented-button.css

@@ -0,0 +1,64 @@
+@layer rc-theme-win31.components {
+  /*
+   * The 3.1 analogue is a run of latched toolbar toggles sharing an edge. The
+   * selected segment stays pressed: inverted bevel plus a dithered face.
+   *
+   * One property turns on the component's own segmented recipe; without it the
+   * fieldset and radios keep their browser appearance.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-segmented-button {
+    /* One switch turns on the component-owned segmented recipe. */
+    --rc-segmented-button-appearance: segmented;
+    /* Windows 3.1 never showed a text cursor over a control. */
+    --rc-segmented-button-cursor: default;
+    --rc-segmented-button-disabled-cursor: default;
+    /* A latched 3.1 toggle showed state by staying pressed, not by a tick. */
+    --rc-segmented-button-selected-icon-display: none;
+
+    --rc-segmented-button-bg: var(--win31-color-surface);
+    --rc-segmented-button-color: var(--win31-color-frame);
+    --rc-segmented-button-border: var(--win31-border);
+    --rc-segmented-button-radius: var(--win31-radius);
+    --rc-segmented-button-divider: 0;
+    --rc-segmented-button-segment-gap: var(--win31-gap-tight);
+    --rc-segmented-button-segment-min-block-size: var(--win31-control-height);
+    --rc-segmented-button-segment-padding-block: var(--win31-padding-block);
+    --rc-segmented-button-segment-padding-inline: calc(8 * var(--win31-unit));
+    --rc-segmented-button-selected-bg: var(--win31-dither-surface);
+    --rc-segmented-button-selected-color: var(--win31-color-frame);
+    --rc-segmented-button-selected-icon-size: var(--win31-check-size);
+    --rc-segmented-button-disabled-opacity: 1;
+    --rc-segmented-button-focus-ring: var(--win31-focus-ring);
+    --rc-segmented-button-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-segmented-button > fieldset > label {
+    box-shadow: var(--win31-bevel-outset-1);
+    transition: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    rc-segmented-button
+    > fieldset
+    > label:has(input[type='radio']:checked) {
+    box-shadow: var(--win31-bevel-inset-1);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    rc-segmented-button
+    > fieldset
+    > label:active:not(:has(input[type='radio']:disabled)) {
+    box-shadow: var(--win31-bevel-inset-1);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    rc-segmented-button
+    > fieldset
+    > label:has(input[type='radio']:disabled),
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-segmented-button[disabled] > fieldset > label {
+    color: var(--win31-color-disabled-text);
+    text-shadow: var(--win31-unit) var(--win31-unit) 0 var(--win31-color-disabled-emboss);
+  }
+}

package/components/select.css

@@ -0,0 +1,73 @@
+@layer rc-theme-win31.components {
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-select {
+    display: block;
+    min-inline-size: 0;
+    --rc-select-padding-block: var(--win31-padding-block);
+    --rc-select-padding-inline: var(--win31-padding-inline);
+    --rc-select-gap: var(--win31-gap-tight);
+    --rc-select-listbox-padding-block: 0;
+    --rc-select-toggle-indicator-size: var(--win31-scrollbar-size);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-select::part(anchor) {
+    min-inline-size: 0;
+  }
+
+  /*
+   * A drop-down list is a sunken white field with a beveled arrow button
+   * attached to its trailing edge, sized to match a scrollbar button.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-select::part(trigger) {
+    position: relative;
+    min-block-size: calc(20 * var(--win31-unit));
+    padding-inline: var(--win31-padding-inline) calc(18 * var(--win31-unit));
+    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);
+    cursor: default;
+    transition: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-select::part(trigger):focus-visible {
+    outline: var(--win31-focus-ring);
+    outline-offset: var(--win31-focus-ring-offset);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-select::part(toggle-indicator) {
+    position: absolute;
+    inset-block-start: var(--win31-unit);
+    inset-inline-end: var(--win31-unit);
+    display: block;
+    inline-size: var(--win31-scrollbar-size);
+    block-size: calc(100% - (2 * var(--win31-unit)));
+    background-color: var(--win31-color-surface);
+    background-image: var(--win31-glyph-arrow-down);
+    background-position: center;
+    background-repeat: no-repeat;
+    border: 0;
+    box-shadow: var(--win31-bevel-outset-1);
+    color: transparent;
+    font-size: 0;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-select::part(listbox) {
+    color: var(--win31-color-field-text);
+    background: var(--win31-color-field);
+    border: var(--win31-border);
+    border-radius: var(--win31-radius);
+    box-shadow: none;
+    font-family: var(--win31-font-family);
+    font-size: var(--win31-font-size);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-select::part(chip) {
+    border: var(--win31-border);
+    border-radius: var(--win31-radius);
+    box-shadow: var(--win31-bevel-outset-1);
+  }
+}

package/components/slider.css

@@ -0,0 +1,64 @@
+@layer rc-theme-win31.components {
+  /*
+   * The trackbar arrived with Windows 95, so there is no 3.1 original to copy.
+   * The construction here is assembled from parts that did exist: a sunken
+   * channel and a beveled thumb, which is how 3.1 applications drew their own
+   * slider-shaped controls before the common control shipped.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-slider {
+    --rc-slider-track-size: calc(4 * var(--win31-unit));
+    --rc-slider-track-background: var(--win31-color-field);
+    --rc-slider-track-radius: var(--win31-radius);
+    --rc-slider-track-opacity: 1;
+    --rc-slider-progress-background: var(--win31-color-selection);
+    --rc-slider-value-color: var(--win31-color-frame);
+    --rc-slider-control-size: var(--win31-control-height);
+    --rc-slider-gap: var(--win31-gap);
+    --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-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-slider::part(progress) {
+    border-radius: var(--win31-radius);
+    transition: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-slider::part(value-display) {
+    color: var(--win31-color-frame);
+    font-size: var(--win31-font-size);
+  }
+
+  /*
+   * The native thumb stays consumer-owned, as the component intends, but the
+   * beveled face is the whole point of the look so it is supplied here for the
+   * slotted input.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    rc-slider
+    > input[type='range']::-webkit-slider-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);
+    appearance: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    rc-slider
+    > input[type='range']::-moz-range-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);
+  }
+}

package/components/snackbar.css

@@ -0,0 +1,50 @@
+@layer rc-theme-win31.components {
+  /*
+   * A deliberate deviation, stated rather than hidden.
+   *
+   * 3.1 had no transient toast. Its equivalent channel was the status bar: a
+   * sunken strip along the bottom edge that reported what just happened and
+   * what the focused command would do. This renders the snackbar as that
+   * strip rather than as a floating card, so it reads as part of the window
+   * instead of hovering above it.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-snackbar {
+    --rc-snackbar-bg: var(--win31-color-surface);
+    --rc-snackbar-color: var(--win31-color-frame);
+    --rc-snackbar-border: var(--win31-hairline) solid;
+    --rc-snackbar-radius: var(--win31-radius);
+    --rc-snackbar-shadow: none;
+    --rc-snackbar-gap: var(--win31-gap);
+    --rc-snackbar-min-block-size: var(--win31-control-height);
+    --rc-snackbar-padding-block: var(--win31-padding-block);
+    --rc-snackbar-padding-inline: var(--win31-padding-inline);
+    --rc-snackbar-inset-block-end: 0;
+    --rc-snackbar-inset-inline: 0;
+    --rc-snackbar-max-inline-size: none;
+    --rc-snackbar-action-bg: var(--win31-color-surface);
+    --rc-snackbar-action-color: var(--win31-color-frame);
+    --rc-snackbar-action-border: var(--win31-border);
+    --rc-snackbar-action-radius: var(--win31-radius);
+    --rc-snackbar-action-padding-block: var(--win31-padding-block);
+    --rc-snackbar-action-padding-inline: calc(8 * var(--win31-unit));
+    --rc-snackbar-action-font: var(--rc-button-font);
+    --rc-snackbar-focus-ring: var(--win31-focus-ring);
+    --rc-snackbar-focus-ring-offset: var(--win31-focus-ring-offset);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-snackbar::part(surface) {
+    border-color: var(--win31-inset-border-color);
+    box-shadow: none;
+    font-family: var(--win31-font-family);
+    font-size: var(--win31-font-size);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-snackbar::part(action) {
+    box-shadow: var(--win31-bevel-outset-1);
+    cursor: default;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-snackbar::part(action):active {
+    box-shadow: var(--win31-bevel-inset-1);
+  }
+}

package/components/splitter.css

@@ -0,0 +1,42 @@
+@layer rc-theme-win31.components {
+  /*
+   * The split bar between panes in File Manager and the MDI shells: a surface
+   * strip carrying one highlight edge and one shadow edge, with no grab dots.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-splitter {
+    --rc-splitter-separator-size: calc(5 * var(--win31-unit));
+    --rc-splitter-separator-color: var(--win31-color-surface);
+    --rc-splitter-separator-border-inline-start: var(--win31-hairline) solid
+      var(--win31-color-highlight);
+    --rc-splitter-separator-border-inline-end: var(--win31-hairline) solid var(--win31-color-shadow);
+    --rc-splitter-separator-border-block-start: var(--win31-hairline) solid
+      var(--win31-color-highlight);
+    --rc-splitter-separator-border-block-end: var(--win31-hairline) solid var(--win31-color-shadow);
+    --rc-splitter-separator-handle-size: 100%;
+    --rc-splitter-handle-color: transparent;
+    --rc-splitter-handle-fill: transparent;
+    --rc-splitter-handle-hover-fill: transparent;
+    --rc-splitter-handle-border-radius: var(--win31-radius);
+    --rc-splitter-handle-transition: none;
+    --rc-splitter-snap-duration: 0ms;
+    --rc-splitter-keyline: var(--win31-hairline) solid var(--win31-color-shadow);
+    --rc-splitter-collapse-button-bg: var(--win31-color-surface);
+    --rc-splitter-collapse-button-color: var(--win31-color-frame);
+    --rc-splitter-collapse-button-border: var(--win31-border);
+    --rc-splitter-collapse-button-hover-bg: var(--win31-color-surface);
+    --rc-splitter-collapse-button-size: var(--win31-scrollbar-size);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-splitter::part(separator-handle) {
+    border-radius: var(--win31-radius);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-splitter::part(collapse-button) {
+    border-radius: var(--win31-radius);
+    box-shadow: var(--win31-bevel-outset-1);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-splitter::part(collapse-button):active {
+    box-shadow: var(--win31-bevel-inset-1);
+  }
+}

package/components/switch.css

@@ -0,0 +1,75 @@
+@layer rc-theme-win31.components {
+  /*
+   * Windows 3.1 had no switch. Its two-state control was the checkbox: a 13 by
+   * 13 sunken white box that draws a check when set. That is the default here,
+   * because it is the honest mapping and it keeps the native input's own
+   * semantics intact.
+   *
+   * Consumers who want a sliding control can opt into the beveled two-position
+   * variant with the documented data-rc-win31-toggle marker below.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-switch {
+    --rc-switch-track-inline-size: var(--win31-check-size);
+    --rc-switch-track-block-size: var(--win31-check-size);
+    --rc-switch-thumb-translate: 0;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-switch::part(track) {
+    inline-size: var(--win31-check-size);
+    block-size: var(--win31-check-size);
+    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;
+    transition: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-switch::part(thumb) {
+    inline-size: var(--win31-check-size);
+    block-size: var(--win31-check-size);
+    background-color: transparent;
+    background-image: none;
+    border: 0;
+    border-radius: var(--win31-radius);
+    box-shadow: none;
+    translate: none;
+    transition: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-switch[checked]::part(thumb) {
+    background-image: var(--win31-glyph-check);
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-switch::part(selected-icon),
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-switch::part(deselected-icon) {
+    display: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-switch:focus-within::part(track) {
+    outline: var(--win31-focus-ring);
+    outline-offset: var(--win31-unit);
+  }
+
+  /* Opt-in sliding variant: a beveled thumb travelling in a sunken channel. */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-switch[data-rc-win31-toggle] {
+    --rc-switch-track-inline-size: calc(36 * var(--win31-unit));
+    --rc-switch-track-block-size: var(--win31-control-height);
+    --rc-switch-thumb-translate: calc(16 * var(--win31-unit));
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-switch[data-rc-win31-toggle]::part(track) {
+    inline-size: calc(36 * var(--win31-unit));
+    block-size: var(--win31-control-height);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-switch[data-rc-win31-toggle]::part(thumb) {
+    inline-size: calc(18 * var(--win31-unit));
+    block-size: calc(100% - (2 * var(--win31-unit)));
+    background-color: var(--win31-color-surface);
+    background-image: none;
+    box-shadow: var(--win31-bevel-outset-1);
+  }
+}

package/components/textarea.css

@@ -0,0 +1,42 @@
+@layer rc-theme-win31.components {
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-textarea::part(root) {
+    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);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-textarea::part(editor),
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-textarea::part(editor-area) {
+    padding: var(--win31-gap-tight);
+    line-height: var(--win31-line-height);
+  }
+
+  /*
+   * The gutter reads as a separate sunken strip, the way a 3.1 editor split
+   * line numbers from text.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-textarea::part(gutter) {
+    color: var(--win31-color-shadow);
+    background: var(--win31-color-surface);
+    border-inline-end: var(--win31-hairline) solid var(--win31-color-shadow);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-textarea > textarea {
+    color: var(--win31-color-field-text);
+    background: transparent;
+    border: 0;
+    border-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-textarea:focus-within::part(root) {
+    outline: var(--win31-focus-ring);
+    outline-offset: var(--win31-focus-ring-offset);
+  }
+}

package/components/toolbar.css

@@ -0,0 +1,68 @@
+@layer rc-theme-win31.components {
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-toolbar {
+    --rc-toolbar-gap-inline: calc(3 * var(--win31-unit));
+    --rc-toolbar-padding-inline: calc(3 * var(--win31-unit));
+    --rc-toolbar-padding-block: var(--win31-gap-tight);
+    --rc-toolbar-radius: var(--win31-radius);
+    --rc-toolbar-vertical-radius: var(--win31-radius);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-toolbar::part(root) {
+    min-block-size: var(--win31-toolbar-height);
+    color: var(--win31-color-frame);
+    background: var(--win31-color-surface);
+    border-block-end: var(--win31-border);
+    font-family: var(--win31-font-family);
+    font-size: var(--win31-font-size);
+  }
+
+  /* Toolbar buttons are square icon wells at the 3.1 toolbar size. */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-toolbar button {
+    display: block;
+    inline-size: var(--win31-toolbar-button-size);
+    block-size: var(--win31-toolbar-button-size);
+    min-inline-size: var(--win31-toolbar-button-size);
+    min-block-size: var(--win31-toolbar-button-size);
+    padding: 0;
+    color: var(--win31-color-frame);
+    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-toolbar button:active:not(:disabled) {
+    box-shadow: var(--win31-bevel-inset-1);
+  }
+
+  /*
+   * A latched toolbar button stays pressed and takes the dithered face, which
+   * is how 3.1 showed a mode that is currently on.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    rc-toolbar
+    :is([data-active], [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-toolbar button:disabled {
+    color: var(--win31-color-disabled-text);
+    text-shadow: var(--win31-unit) var(--win31-unit) 0 var(--win31-color-disabled-emboss);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-toolbar hr,
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-toolbar [role='separator'] {
+    inline-size: calc(2 * var(--win31-unit));
+    margin-inline: var(--win31-gap-tight);
+    background: linear-gradient(
+      to right,
+      var(--win31-color-shadow) 0 var(--win31-unit),
+      var(--win31-color-highlight) var(--win31-unit) 100%
+    );
+    border: 0;
+  }
+}

package/components/tooltip.css

@@ -0,0 +1,23 @@
+@layer rc-theme-win31.components {
+  /*
+   * A deliberate deviation, stated rather than hidden.
+   *
+   * 3.1 had no tooltips; they arrived with later toolbars. Its nearest
+   * equivalent is the WinHelp definition popup: a plain window-colored box
+   * with a hard one-pixel frame and a hard drop shadow, opened to explain a
+   * term. Tooltips borrow that look rather than the yellow balloon of later
+   * releases. Tokens are declared on the theme root so tooltips inside other
+   * shadow roots inherit them.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) {
+    --rc-tooltip-padding-block: calc(2 * var(--win31-unit));
+    --rc-tooltip-padding-inline: var(--win31-padding-inline);
+    --rc-tooltip-border: var(--win31-border);
+    --rc-tooltip-radius: var(--win31-radius);
+    --rc-tooltip-background: var(--win31-color-field);
+    --rc-tooltip-color: var(--win31-color-field-text);
+    --rc-tooltip-shadow: var(--win31-drop-shadow);
+    --rc-tooltip-font: var(--win31-font-weight) var(--win31-font-size) / var(--win31-line-height)
+      var(--win31-font-family);
+  }
+}