@rcarls/rc-theme-win31 0.0.0 → 0.7.0

package/components/chip-group.css

@@ -0,0 +1,33 @@
+@layer rc-theme-win31.components {
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-chip-group::part(root) {
+    gap: var(--win31-gap-tight);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-chip-group::part(toggle) {
+    min-block-size: var(--win31-control-height);
+    padding-inline: calc(8 * var(--win31-unit));
+    color: var(--win31-color-frame);
+    background: var(--win31-color-surface);
+    border: var(--win31-border);
+    border-radius: var(--win31-radius);
+    box-shadow: var(--win31-bevel-outset-1);
+    font-family: var(--win31-font-family);
+    font-size: var(--win31-font-size);
+    transition: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-chip-group::part(toggle):active {
+    box-shadow: var(--win31-bevel-inset-1);
+  }
+
+  /* A separator in a 3.1 strip is a two-pixel ridge, not a hairline. */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-chip-group::part(toggle-separator) {
+    inline-size: calc(2 * var(--win31-unit));
+    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/chip.css

@@ -0,0 +1,56 @@
+@layer rc-theme-win31.components {
+  /*
+   * There is no 3.1 chip. The closest real control is the latched toolbar
+   * toggle: a small beveled square that stays pressed while its state is on.
+   * Selected therefore inverts the bevel and dithers the face rather than
+   * filling it with an accent color, which is how 3.1 expressed "on" without
+   * an alpha channel.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-chip {
+    --rc-chip-padding-block: var(--win31-padding-block);
+    --rc-chip-disabled-opacity: 1;
+    --rc-chip-hover-state-layer-opacity: 0;
+    --rc-chip-focus-state-layer-opacity: 0;
+    --rc-chip-pressed-state-layer-opacity: 0;
+    --rc-chip-state-layer-transition-duration: 0ms;
+    --rc-chip-state-layer-transition-easing: step-end;
+    --rc-chip-focus-ring: var(--win31-focus-ring);
+    --rc-chip-focus-ring-offset: var(--win31-focus-ring-offset);
+    --rc-chip-selected-color: var(--win31-color-frame);
+    --rc-chip-selected-border-color: var(--win31-color-frame);
+    --rc-chip-remove-radius: var(--win31-radius);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-chip > :is(button, a, span) {
+    box-shadow: var(--win31-bevel-outset-1);
+    cursor: default;
+    transition: none;
+  }
+
+  /*
+   * The dithered face arrives through --rc-chip-selected-bg, which the
+   * component applies as a background shorthand. Only the bevel is left to set
+   * here, because the component does not own one.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-chip[selected] > :is(button, a, span) {
+    box-shadow: var(--win31-bevel-inset-1);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-chip > :is(button, a):active:not(:disabled) {
+    box-shadow: var(--win31-bevel-inset-1);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-chip > 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-chip::part(state-layer) {
+    display: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-chip::part(remove) {
+    border-radius: var(--win31-radius);
+    box-shadow: var(--win31-bevel-outset-1);
+  }
+}

package/components/combobox.css

@@ -0,0 +1,83 @@
+@layer rc-theme-win31.components {
+  /*
+   * The editable sibling of the drop-down list. Windows 3.1 distinguished a
+   * "drop-down combo" (typing allowed) from a "drop-down list" (selection
+   * only), and the difference was visible: the combo shows a text caret in the
+   * well while the list does not.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-combobox {
+    display: block;
+    min-inline-size: 0;
+    --rc-combobox-gap: var(--win31-gap-tight);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-combobox::part(anchor) {
+    position: relative;
+    min-inline-size: 0;
+    min-block-size: calc(20 * 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;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-combobox::part(input),
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-combobox > input {
+    padding-block: var(--win31-padding-block);
+    padding-inline: var(--win31-padding-inline) calc(18 * var(--win31-unit));
+    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-combobox > input:focus-visible {
+    outline: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-combobox:focus-within::part(anchor) {
+    outline: var(--win31-focus-ring);
+    outline-offset: var(--win31-focus-ring-offset);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-combobox::part(toggle) {
+    position: absolute;
+    inset-block-start: var(--win31-unit);
+    inset-inline-end: var(--win31-unit);
+    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;
+    border-radius: var(--win31-radius);
+    box-shadow: var(--win31-bevel-outset-1);
+    color: transparent;
+    font-size: 0;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-combobox::part(toggle):active {
+    box-shadow: var(--win31-bevel-inset-1);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-combobox::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-combobox::part(chip) {
+    border: var(--win31-border);
+    border-radius: var(--win31-radius);
+    box-shadow: var(--win31-bevel-outset-1);
+  }
+}

package/components/dialog.css

@@ -0,0 +1,156 @@
+@layer rc-theme-win31.components {
+  /*
+   * Window chrome.
+   *
+   * rc-dialog deliberately keeps the native <dialog> in consumer light DOM and
+   * exposes no CSS parts, so the caption bar is authored markup. The component
+   * already contracts on that markup through its move-handle selector, and its
+   * documented demo shape is a <header> as the first child of the <dialog>.
+   * This theme styles that shape, which means a themed window needs no new
+   * markers and no upstream change:
+   *
+   *   <rc-dialog movable move-handle="header">
+   *     <dialog aria-labelledby="t">
+   *       <header><h2 id="t">Title</h2></header>
+   *       ...
+   *       <footer><button>OK</button><button>Cancel</button></footer>
+   *     </dialog>
+   *   </rc-dialog>
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-dialog {
+    --rc-dialog-background: var(--win31-color-surface);
+    --rc-dialog-color: var(--win31-color-frame);
+    --rc-dialog-border: var(--win31-border);
+    --rc-dialog-radius: var(--win31-radius);
+    --rc-dialog-padding: 0;
+    --rc-dialog-shadow: var(--win31-dialog-frame);
+    --rc-dialog-scrim: transparent;
+    --rc-dialog-fullscreen-background: var(--win31-color-surface);
+    --rc-dialog-fullscreen-padding-block: 0;
+    --rc-dialog-fullscreen-padding-inline: 0;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-dialog > dialog {
+    padding: 0;
+    color: var(--win31-color-frame);
+    background: var(--win31-color-surface);
+    border: var(--win31-border);
+    border-radius: var(--win31-radius);
+    box-shadow: var(--win31-dialog-frame);
+    font-family: var(--win31-font-family);
+    font-size: var(--win31-font-size);
+  }
+
+  /*
+   * 3.1 dimmed nothing behind a modal. The dialog's own frame carried the
+   * separation, so the backdrop stays fully transparent.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-dialog > dialog::backdrop {
+    background: transparent;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-dialog > dialog > header {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    min-block-size: var(--win31-title-height);
+    padding: 0;
+    color: var(--win31-color-title-active-text);
+    background: var(--win31-color-title-active);
+    font-size: var(--win31-title-font-size);
+    font-weight: 700;
+    line-height: 1;
+    /* The caption bar is a grab handle, not text to select. */
+    cursor: default;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-dialog > dialog > header > :is(h1, h2, h3) {
+    flex: 1;
+    margin: 0;
+    padding-inline: var(--win31-padding-inline);
+    font-size: inherit;
+    font-weight: inherit;
+    /* 3.1 centered the window title rather than aligning it to the start. */
+    text-align: center;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-dialog > dialog > header button {
+    flex-shrink: 0;
+    inline-size: var(--win31-title-height);
+    block-size: var(--win31-title-height);
+    min-inline-size: var(--win31-title-height);
+    min-block-size: var(--win31-title-height);
+    padding: 0;
+    color: var(--win31-color-frame);
+    background-color: var(--win31-color-surface);
+    border: 0;
+    border-inline-start: var(--win31-border);
+    border-radius: var(--win31-radius);
+    box-shadow: var(--win31-bevel-outset-1);
+    cursor: default;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-dialog > dialog > header button:active {
+    box-shadow: var(--win31-bevel-inset-1);
+  }
+
+  /*
+   * The system-menu box sits at the leading edge and is drawn rather than
+   * lettered: a white bar with a black frame and a one-pixel shadow.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-dialog > dialog > header button:first-child {
+    border-inline-start: 0;
+    border-inline-end: var(--win31-border);
+    box-shadow: none;
+    font-size: 0;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    rc-dialog
+    > dialog
+    > header
+    button:first-child::before {
+    content: '';
+    display: block;
+    box-sizing: border-box;
+    inline-size: calc(10 * var(--win31-unit));
+    block-size: calc(3 * var(--win31-unit));
+    margin-inline: auto;
+    background-color: var(--win31-color-highlight);
+    border: var(--win31-border);
+    box-shadow: var(--win31-unit) var(--win31-unit) 0 var(--win31-color-shadow);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-dialog > dialog > footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--win31-gap);
+    padding-block: calc(3 * var(--win31-unit)) calc(8 * var(--win31-unit));
+    padding-inline: calc(8 * var(--win31-unit));
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-dialog > dialog > :not(header, footer) {
+    padding: var(--win31-gap-panel);
+  }
+
+  /*
+   * A group box is a sunken frame with its legend notched into the top edge.
+   * It is still the most accessible grouping primitive in HTML and it is worth
+   * having it look deliberate again.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-dialog fieldset {
+    margin-block: var(--win31-gap-panel) 0;
+    padding-block: calc(5 * var(--win31-unit)) var(--win31-gap-panel);
+    padding-inline: var(--win31-gap-panel);
+    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-dialog fieldset > legend {
+    padding-inline: var(--win31-padding-inline);
+  }
+}

package/components/disclosure.css

@@ -0,0 +1,106 @@
+@layer rc-theme-win31.components {
+  /*
+   * The window-shade roll-up: an outset panel whose header carries a small
+   * beveled box at its trailing edge holding a triangle. 3.1 shells used this
+   * for independently collapsible panes, which is still a better density tool
+   * than an accordion when the panes are not mutually exclusive.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-disclosure {
+    display: block;
+    --rc-disclosure-background: var(--win31-color-surface);
+    --rc-disclosure-open-background: var(--win31-color-surface);
+    --rc-disclosure-color: var(--win31-color-frame);
+    --rc-disclosure-border: var(--win31-hairline) solid var(--win31-color-shadow);
+    --rc-disclosure-radius: var(--win31-radius);
+    --rc-disclosure-open-shadow: none;
+    --rc-disclosure-duration: 0ms;
+    --rc-disclosure-summary-color: var(--win31-color-frame);
+    --rc-disclosure-summary-font: var(--win31-font-weight) var(--win31-font-size) / 1
+      var(--win31-font-family);
+    --rc-disclosure-summary-min-block-size: calc(18 * var(--win31-unit));
+    --rc-disclosure-summary-padding-block: var(--win31-padding-block);
+    --rc-disclosure-summary-padding-inline: var(--win31-padding-inline);
+    --rc-disclosure-summary-gap: var(--win31-gap-tight);
+    --rc-disclosure-summary-hover-background: var(--win31-color-surface);
+    --rc-disclosure-summary-marker-color: var(--win31-color-frame);
+    --rc-disclosure-content-color: var(--win31-color-frame);
+    --rc-disclosure-content-font: var(--win31-font-weight) var(--win31-font-size) /
+      var(--win31-line-height) var(--win31-font-family);
+    --rc-disclosure-content-padding-block: var(--win31-gap-tight);
+    --rc-disclosure-content-padding-inline: var(--win31-gap-tight);
+    --rc-disclosure-focus-ring: var(--win31-focus-ring);
+    --rc-disclosure-focus-ring-offset: var(--win31-focus-ring-offset);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-disclosure > details {
+    padding: 0;
+    background: var(--win31-color-surface);
+    border: var(--win31-hairline) solid;
+    border-color: var(--win31-outset-border-color);
+    border-radius: var(--win31-radius);
+    box-shadow: none;
+    font-size: var(--win31-font-size);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-disclosure > details > summary {
+    display: block;
+    position: relative;
+    min-block-size: calc(18 * var(--win31-unit));
+    padding-block: var(--win31-padding-block);
+    padding-inline: var(--win31-padding-inline) calc(18 * var(--win31-unit));
+    background-color: var(--win31-color-surface);
+    border: var(--win31-hairline) solid;
+    border-color: var(--win31-outset-border-color);
+    border-radius: var(--win31-radius);
+    box-shadow: none;
+    font-weight: var(--win31-font-weight);
+    line-height: calc(16 * var(--win31-unit));
+    /* 3.1 centered a pane caption rather than aligning it to the start. */
+    text-align: center;
+    list-style: none;
+    cursor: default;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    rc-disclosure
+    > details
+    > summary::-webkit-details-marker {
+    display: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-disclosure > details > summary::marker {
+    content: '';
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-disclosure > details > summary::after {
+    content: '';
+    position: absolute;
+    inset-block-start: var(--win31-gap-tight);
+    inset-inline-end: var(--win31-gap-tight);
+    inline-size: var(--win31-check-size);
+    block-size: var(--win31-check-size);
+    background-color: var(--win31-color-surface);
+    background-image: var(--win31-glyph-collapse);
+    background-position: center;
+    background-repeat: no-repeat;
+    border: var(--win31-hairline) solid;
+    border-color: var(--win31-outset-border-color);
+    box-shadow: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    rc-disclosure
+    > details:not([open])
+    > summary::after {
+    background-image: var(--win31-glyph-expand);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-disclosure > details > summary:focus-visible {
+    outline: var(--win31-focus-ring);
+    outline-offset: var(--win31-focus-ring-offset);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-disclosure > details > :not(summary) {
+    margin: var(--win31-gap-tight);
+  }
+}

package/components/fab-menu.css

@@ -0,0 +1,47 @@
+@layer rc-theme-win31.components {
+  /* The same knowing anachronism as rc-fab, with a menu hung off it. */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-fab-menu {
+    --rc-fab-menu-bg: var(--win31-color-surface);
+    --rc-fab-menu-bg-hover: var(--win31-color-surface);
+    --rc-fab-menu-bg-open: var(--win31-color-selection);
+    --rc-fab-menu-color: var(--win31-color-frame);
+    --rc-fab-menu-border: var(--win31-border);
+    --rc-fab-menu-radius: var(--win31-radius);
+    --rc-fab-menu-size: var(--win31-toolbar-height);
+    --rc-fab-menu-padding-block: var(--win31-padding-block);
+    --rc-fab-menu-padding-inline: calc(8 * var(--win31-unit));
+    --rc-fab-menu-font-family: var(--win31-font-family);
+    --rc-fab-menu-font-size: var(--win31-font-size);
+    --rc-fab-menu-font-weight: var(--win31-font-weight);
+    --rc-fab-menu-letter-spacing: normal;
+    --rc-fab-menu-text-decoration: none;
+    --rc-fab-menu-shadow: none;
+    --rc-fab-menu-shadow-hover: none;
+    --rc-fab-menu-shadow-active: none;
+    --rc-fab-menu-shadow-open: none;
+    --rc-fab-menu-disabled-shadow: none;
+    --rc-fab-menu-disabled-opacity: 1;
+    --rc-fab-menu-active-transform: none;
+    --rc-fab-menu-transition: none;
+    --rc-fab-menu-popup-duration: 0ms;
+    --rc-fab-menu-trigger-gap: var(--win31-gap-tight);
+    --rc-fab-menu-focus-ring: var(--win31-focus-ring);
+    --rc-fab-menu-focus-ring-offset: var(--win31-focus-ring-offset);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-fab-menu > button {
+    box-shadow: var(--win31-bevel-outset-1);
+    cursor: default;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-fab-menu > button:active:not(:disabled) {
+    box-shadow: var(--win31-bevel-inset-1);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-fab-menu::part(popup) {
+    background: var(--win31-color-menu);
+    border: var(--win31-border);
+    border-radius: var(--win31-radius);
+    box-shadow: var(--win31-drop-shadow);
+  }
+}

package/components/fab.css

@@ -0,0 +1,49 @@
+@layer rc-theme-win31.components {
+  /*
+   * A knowing anachronism, and the only one in this theme.
+   *
+   * Windows 3.1 had no floating action button and no concept that would have
+   * produced one: nothing hovered above the window, and there was no primary
+   * action promoted out of the command set. Rather than leave the component
+   * unstyled in a themed page, it is drawn as the nearest period object, a
+   * floating tool-palette button, and labelled here as the deviation it is.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-fab {
+    --rc-fab-bg: var(--win31-color-surface);
+    --rc-fab-bg-hover: var(--win31-color-surface);
+    --rc-fab-color: var(--win31-color-frame);
+    --rc-fab-border: var(--win31-border);
+    --rc-fab-radius: var(--win31-radius);
+    --rc-fab-size: var(--win31-toolbar-height);
+    --rc-fab-gap: var(--win31-gap-tight);
+    --rc-fab-padding-block: var(--win31-padding-block);
+    --rc-fab-padding-inline: calc(8 * var(--win31-unit));
+    --rc-fab-font-family: var(--win31-font-family);
+    --rc-fab-font-size: var(--win31-font-size);
+    --rc-fab-font-weight: var(--win31-font-weight);
+    --rc-fab-letter-spacing: normal;
+    --rc-fab-shadow: none;
+    --rc-fab-shadow-hover: none;
+    --rc-fab-shadow-active: none;
+    --rc-fab-disabled-shadow: none;
+    --rc-fab-disabled-opacity: 1;
+    --rc-fab-active-transform: none;
+    --rc-fab-transition: none;
+    --rc-fab-focus-ring: var(--win31-focus-ring);
+    --rc-fab-focus-ring-offset: var(--win31-focus-ring-offset);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-fab > button {
+    box-shadow: var(--win31-bevel-outset-1);
+    cursor: default;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-fab > button:active:not(:disabled) {
+    box-shadow: var(--win31-bevel-inset-1);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-fab > button:disabled {
+    color: var(--win31-color-disabled-text);
+    text-shadow: var(--win31-unit) var(--win31-unit) 0 var(--win31-color-disabled-emboss);
+  }
+}

package/components/field.css

@@ -0,0 +1,73 @@
+@layer rc-theme-win31.components {
+  /*
+   * A 3.1 edit control is a sunken white well with a hard one-pixel frame. The
+   * label sits outside it as plain text; there is no floating-label behavior to
+   * reproduce because the idiom did not exist yet.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-field::part(field) {
+    min-block-size: var(--win31-control-height);
+    padding-block: var(--win31-padding-block);
+    padding-inline: var(--win31-padding-inline);
+    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-field::part(label) {
+    position: static;
+    transform: none;
+    padding: 0;
+    margin-block-end: var(--win31-gap-tight);
+    color: var(--win31-color-frame);
+    background: transparent;
+    font-size: var(--win31-font-size);
+  }
+
+  /* A grouped field's legend reads like the label above a single field. */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-field[data-group] > fieldset > legend {
+    margin-block-end: var(--win31-gap-tight);
+    color: var(--win31-color-frame);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-field::part(supporting-text),
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-field::part(hint),
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-field::part(counter) {
+    color: var(--win31-color-frame);
+    font-size: var(--win31-font-size);
+  }
+
+  /*
+   * 3.1 had no inline validation styling, so an error is stated in text rather
+   * than colored. The frame is left alone deliberately.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-field::part(error) {
+    color: var(--win31-color-frame);
+    font-size: var(--win31-font-size);
+    font-weight: 700;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-field :is(input, textarea, select) {
+    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);
+    line-height: var(--win31-line-height);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-field :is(input, textarea):focus-visible {
+    outline: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-field:focus-within::part(field) {
+    outline: var(--win31-focus-ring);
+    outline-offset: var(--win31-focus-ring-offset);
+  }
+}

package/components/icons.css

@@ -0,0 +1,56 @@
+@layer rc-theme-win31.components {
+  /*
+   * Not an icon font.
+   *
+   * 3.1 iconography was one-bit and two-bit bitmap art at 16 and 32 pixels,
+   * so this sizes icon slots to those grids and turns off smoothing rather
+   * than wiring a variable font. Component-drawn affordances (scrollbar
+   * arrows, the disclosure triangle, the checkbox tick) come from the
+   * --win31-glyph-* data URIs in defaults.css instead.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    :where([data-rc-icon], [data-rc-navigation-icon]) {
+    display: inline-grid;
+    place-items: center;
+    inline-size: var(--rc-icon-font-size, var(--win31-check-size));
+    block-size: var(--rc-icon-font-size, var(--win31-check-size));
+    font-size: var(--rc-icon-font-size, var(--win31-check-size));
+    /*
+     * Unlayered icon-font boilerplate otherwise beats this layered theme rule.
+     * Keep the geometry invariant important, but let consumers override the
+     * normally-cascaded custom property.
+     */
+    line-height: var(--rc-icon-font-line-height, var(--win31-check-size)) !important;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    :where([data-rc-button-icon], [data-rc-button-selected-icon], [data-rc-chip-icon]) {
+    display: inline-grid;
+    place-items: center;
+    /* Reserve the icon square while an SVG icon element is still empty. */
+    min-inline-size: 1em;
+    min-block-size: 1em;
+    font-size: var(--rc-compact-icon-font-size, var(--win31-check-size));
+    line-height: var(
+      --rc-compact-icon-font-line-height,
+      var(--rc-compact-icon-font-size, var(--win31-check-size))
+    ) !important;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    rc-button[icon-only]
+    :where([data-rc-button-icon], [data-rc-button-selected-icon]) {
+    font-size: var(--rc-icon-button-icon-font-size, var(--win31-scrollbar-size));
+    line-height: var(--rc-icon-button-icon-font-size, var(--win31-scrollbar-size)) !important;
+  }
+
+  /* Period art is pixel art. Never let the UA smooth it. */
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    :where([data-rc-icon], [data-rc-navigation-icon])
+    img,
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    :where([data-rc-icon], [data-rc-navigation-icon])
+    svg {
+    image-rendering: pixelated;
+  }
+}