@rcarls/rc-theme-win31 0.0.0 → 0.7.0

package/bridge.css

@@ -0,0 +1,257 @@
+@layer rc-base, rc-theme-win31.defaults, rc-theme-win31.bridge, rc-theme-win31.native, rc-theme-win31.components, rc-theme-win31.css-components,
+  rc-theme-win31.overrides;
+
+@layer rc-theme-win31.bridge {
+  /*
+   * Maps the Windows 3.1 reference tokens onto the rc-webcomponents public
+   * styling contract. Consumers can replace --win31-* values and keep this file
+   * as their bridge.
+   *
+   * Three decisions run through the whole mapping and are worth knowing before
+   * reading it:
+   *
+   * - Disabled is a color, never an opacity. --rc-disabled-opacity stays at 1
+   *   and components/modes.css supplies the embossed gray instead.
+   * - Motion is zero. Windows 3.1 had no transitions anywhere.
+   * - Depth is geometry. --rc-shadow is none; bevels come from the box-shadow
+   *   and border-color tokens, which forced-colors can delete cleanly.
+   */
+  .rc-theme-win31,
+  :host(.rc-theme-win31) {
+    --rc-surface: var(--win31-color-surface);
+    --rc-field: var(--win31-color-field);
+    --rc-field-text: var(--win31-color-field-text);
+    --rc-field-error-color: var(--win31-color-frame);
+    --rc-button-bg: var(--win31-color-surface);
+    --rc-button-text: var(--win31-color-frame);
+    --rc-highlight: var(--win31-color-selection);
+    --rc-highlight-text: var(--win31-color-selection-text);
+    --rc-text-disabled: var(--win31-color-disabled-text);
+    --rc-accent: var(--win31-color-selection);
+    --rc-border-color: var(--win31-color-frame);
+    --rc-border-width: var(--win31-hairline);
+    --rc-border-style: solid;
+    --rc-border: var(--rc-border-width) var(--rc-border-style) var(--rc-border-color);
+    --rc-shadow: none;
+    /* A 3.1 menu is a flat panel with a hard frame and a hard drop shadow. */
+    --rc-popup-background: var(--win31-color-menu);
+    --rc-popup-color: var(--win31-color-menu-text);
+    --rc-popup-border: var(--win31-border);
+    --rc-popup-radius: var(--win31-radius);
+    --rc-popup-shadow: var(--win31-drop-shadow);
+    --rc-popup-padding-block: var(--win31-unit);
+
+    --rc-font-family: var(--win31-font-family);
+    --rc-font-size: var(--win31-font-size);
+    --rc-font-weight: var(--win31-font-weight);
+    --rc-line-height: var(--win31-line-height);
+    --rc-icon-font-size: var(--win31-check-size);
+    --rc-icon-font-line-height: var(--rc-icon-font-size);
+
+    --rc-control-block-size: var(--win31-control-height);
+    --rc-control-padding-block: var(--win31-padding-block);
+    --rc-control-padding-inline: var(--win31-padding-inline);
+    --rc-control-gap: var(--win31-gap-tight);
+    --rc-item-padding-block: var(--win31-padding-block);
+    --rc-item-padding-inline: var(--win31-padding-inline);
+    --rc-item-gap: var(--win31-gap-tight);
+
+    --rc-radius-sm: var(--win31-radius);
+    --rc-radius-md: var(--win31-radius);
+    --rc-control-radius: var(--win31-radius);
+    --rc-thumb-radius: var(--win31-radius);
+
+    --rc-focus-ring: var(--win31-focus-ring);
+    --rc-focus-ring-offset: var(--win31-focus-ring-offset);
+    --rc-disabled-opacity: 1;
+    /*
+     * Period chrome switches state instantly. All thirteen shared motion
+     * tokens are declared here at zero, not left to base.css's fallbacks:
+     * base.css is optional, and an app that loads it alongside this theme
+     * would otherwise inherit base's real 180/300/450ms spatial motion for
+     * whichever of these a bridge left unmapped. A step function is the
+     * honest curve even though a 0ms duration already makes the curve shape
+     * invisible.
+     */
+    --rc-motion-effects-duration-fast: 0ms;
+    --rc-motion-effects-easing-fast: step-end;
+    --rc-motion-effects-duration-default: 0ms;
+    --rc-motion-effects-easing-default: step-end;
+    --rc-motion-effects-duration-slow: 0ms;
+    --rc-motion-effects-easing-slow: step-end;
+    --rc-motion-spatial-duration-fast: 0ms;
+    --rc-motion-spatial-easing-fast: step-end;
+    --rc-motion-spatial-duration-default: 0ms;
+    --rc-motion-spatial-easing-default: step-end;
+    --rc-motion-spatial-duration-slow: 0ms;
+    --rc-motion-spatial-easing-slow: step-end;
+    --rc-motion-effects-easing-enter: step-end;
+    --rc-motion-effects-easing-exit: step-end;
+    --rc-motion-spatial-easing-enter: step-end;
+    --rc-motion-spatial-easing-exit: step-end;
+    --rc-motion-duration: var(--rc-motion-effects-duration-default);
+
+    --rc-button-color: var(--rc-button-text);
+    --rc-button-block-size: var(--rc-control-block-size);
+    --rc-button-radius: var(--win31-radius);
+    --rc-button-border: var(--rc-border);
+    --rc-button-padding-block: var(--rc-control-padding-block);
+    --rc-button-padding-inline: calc(8 * var(--win31-unit));
+    --rc-button-gap: var(--rc-control-gap);
+    --rc-button-font: var(--rc-font-weight) var(--rc-font-size) / 1 var(--rc-font-family);
+    /*
+     * Windows 3.1 gave push buttons no hover or focus wash at all. The state
+     * layers stay at zero and pressed is drawn as an inverted bevel instead.
+     */
+    --rc-button-hover-state-layer-opacity: 0;
+    --rc-button-focus-state-layer-opacity: 0;
+    --rc-button-pressed-state-layer-opacity: 0;
+
+    --rc-card-bg: var(--win31-color-surface);
+    --rc-card-color: var(--win31-color-frame);
+    --rc-card-radius: var(--win31-radius);
+    --rc-card-padding-block: var(--win31-gap-tight);
+    --rc-card-padding-inline: var(--win31-padding-inline);
+    --rc-card-actions-gap: var(--win31-gap);
+    --rc-card-subtitle-color: var(--win31-color-frame);
+    --rc-card-hover-state-layer-opacity: 0;
+    --rc-card-pressed-state-layer-opacity: 0;
+
+    --rc-chip-block-size: var(--win31-control-height);
+    --rc-chip-gap: var(--win31-gap-tight);
+    --rc-chip-padding-inline: calc(8 * var(--win31-unit));
+    --rc-chip-border: var(--rc-border);
+    --rc-chip-radius: var(--win31-radius);
+    --rc-chip-bg: var(--win31-color-surface);
+    --rc-chip-color: var(--win31-color-frame);
+    --rc-chip-font: inherit;
+    --rc-chip-text-decoration: none;
+    --rc-chip-selected-bg: var(--win31-dither-surface);
+
+    --rc-switch-native-appearance: none;
+    --rc-switch-native-inline-size: 100%;
+    --rc-switch-native-block-size: 100%;
+    --rc-switch-native-margin: 0;
+    --rc-switch-native-opacity: 0;
+    --rc-switch-decoration-display: block;
+    --rc-switch-icon-display: grid;
+    --rc-switch-track-inline-size: calc(36 * var(--win31-unit));
+    --rc-switch-track-block-size: var(--win31-control-height);
+    --rc-switch-selected-track-bg: var(--win31-color-surface);
+    --rc-switch-thumb-translate: calc(16 * var(--win31-unit));
+
+    --rc-segmented-button-segment-min-block-size: var(--rc-control-block-size);
+    --rc-segmented-button-selected-bg: var(--win31-dither-surface);
+
+    --rc-snackbar-bg: var(--win31-color-surface);
+    --rc-snackbar-color: var(--win31-color-frame);
+    --rc-snackbar-border: var(--rc-border);
+    --rc-snackbar-action-color: var(--win31-color-frame);
+    --rc-snackbar-action-border: var(--rc-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-bg: var(--win31-color-surface);
+    --rc-snackbar-action-font: var(--rc-button-font);
+
+    --rc-list-item-gap: var(--rc-item-gap);
+    --rc-list-item-min-block-size: var(--win31-listbox-row-height);
+    --rc-list-item-padding-block: var(--rc-item-padding-block);
+    --rc-list-item-padding-inline: var(--rc-item-padding-inline);
+    --rc-list-item-selected-bg: var(--win31-color-selection);
+    --rc-list-item-selected-color: var(--win31-color-selection-text);
+
+    /*
+     * The scrim is transparent on purpose. Windows 3.1 dimmed nothing behind a
+     * modal dialog; the dialog's own frame carried the separation.
+     */
+    --rc-dialog-scrim: transparent;
+  }
+
+  /*
+   * Listboxes and menus diverge here, and the divergence is period-correct
+   * rather than an oversight: menus highlighted under the pointer, and list
+   * rows did not. A list row's resting and hover appearance are the same.
+   */
+  .rc-theme-win31 rc-listbox,
+  :host(.rc-theme-win31) rc-listbox {
+    --rc-listbox-option-gap: var(--win31-gap-tight);
+    --rc-listbox-option-min-block-size: var(--win31-listbox-row-height);
+    --rc-listbox-option-padding-block: var(--win31-padding-block);
+    --rc-listbox-option-padding-inline: var(--win31-padding-inline);
+    --rc-listbox-hover-bg: transparent;
+    --rc-listbox-hover-color: var(--win31-color-field-text);
+    --rc-listbox-active-bg: var(--win31-color-selection);
+    --rc-listbox-active-color: var(--win31-color-selection-text);
+    --rc-listbox-selected-bg: var(--win31-color-selection);
+    --rc-listbox-selected-color: var(--win31-color-selection-text);
+  }
+
+  .rc-theme-win31 rc-menu,
+  :host(.rc-theme-win31) rc-menu {
+    --rc-listbox-option-gap: 0;
+    --rc-listbox-option-min-block-size: calc(20 * var(--win31-unit));
+    --rc-listbox-option-padding-block: 0;
+    --rc-listbox-option-padding-inline: var(--win31-padding-inline);
+    --rc-listbox-hover-bg: var(--win31-color-selection);
+    --rc-listbox-hover-color: var(--win31-color-selection-text);
+    --rc-listbox-active-bg: var(--win31-color-selection);
+    --rc-listbox-active-color: var(--win31-color-selection-text);
+    --rc-listbox-selected-bg: var(--win31-color-selection);
+    --rc-listbox-selected-color: var(--win31-color-selection-text);
+  }
+
+  .rc-theme-win31 rc-select,
+  :host(.rc-theme-win31) rc-select,
+  .rc-theme-win31 rc-combobox,
+  :host(.rc-theme-win31) rc-combobox {
+    --rc-select-control-block-size: calc(20 * var(--win31-unit));
+    --rc-select-radius: var(--win31-radius);
+    /* Drop-down lists are field surfaces, not menus. */
+    --rc-select-shadow: none;
+    --rc-select-listbox-background: var(--rc-surface);
+    --rc-select-listbox-color: var(--rc-field-text);
+    --rc-select-chip-radius: var(--win31-radius);
+    --rc-combobox-control-block-size: calc(20 * var(--win31-unit));
+    --rc-combobox-radius: var(--win31-radius);
+    --rc-combobox-shadow: none;
+    --rc-combobox-listbox-background: var(--rc-surface);
+    --rc-combobox-listbox-color: var(--rc-field-text);
+    --rc-combobox-listbox-padding-block: var(--rc-control-padding-block);
+    --rc-combobox-chip-radius: var(--win31-radius);
+  }
+
+  .rc-theme-win31 rc-slider,
+  :host(.rc-theme-win31) rc-slider,
+  .rc-theme-win31 rc-range-slider,
+  :host(.rc-theme-win31) rc-range-slider {
+    --rc-slider-track-size: calc(4 * var(--win31-unit));
+    --rc-slider-track-background: var(--win31-color-field);
+    --rc-slider-progress-background: var(--win31-color-selection);
+    --rc-slider-track-radius: var(--win31-radius);
+    --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-theme-win31 rc-progress,
+  :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-theme-win31 rc-bottom-sheet,
+  :host(.rc-theme-win31) rc-bottom-sheet {
+    --rc-bottom-sheet-bg: var(--win31-color-surface);
+    --rc-bottom-sheet-color: var(--win31-color-frame);
+    --rc-bottom-sheet-radius: var(--win31-radius);
+    --rc-bottom-sheet-shadow: none;
+    --rc-bottom-sheet-scrim: transparent;
+    --rc-bottom-sheet-handle-color: var(--win31-color-shadow);
+    --rc-bottom-sheet-handle-radius: var(--win31-radius);
+  }
+}

package/components/accordion.css

@@ -0,0 +1,21 @@
+@layer rc-theme-win31.components {
+  /*
+   * 3.1 had no accordion, so this is a stack of the window-shade panels above
+   * with no gap between them, which is how a column of 3.1 panes actually read.
+   *
+   * rc-accordion owns only the group gap by design. Panel chrome reaches the
+   * children through the shared --rc-disclosure-* recipe, so there is no
+   * parallel accordion-panel vocabulary to keep in step. Panel styling belongs
+   * in disclosure.css rather than here.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-accordion {
+    --rc-accordion-gap: 0;
+    display: block;
+    font-family: var(--win31-font-family);
+    font-size: var(--win31-font-size);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-accordion > rc-disclosure + rc-disclosure {
+    margin-block-start: calc(-1 * var(--win31-hairline));
+  }
+}

package/components/adaptive-menu.css

@@ -0,0 +1,108 @@
+@layer rc-theme-win31.components {
+  /*
+   * Declared on the theme root rather than on rc-adaptive-menu so menus
+   * rendered inside other shadow roots inherit the same values.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) {
+    --rc-adaptive-menu-gap: var(--win31-gap-tight);
+    --rc-adaptive-menu-item-gap: var(--win31-gap-tight);
+    --rc-adaptive-menu-item-min-block-size: var(--win31-control-height);
+    --rc-adaptive-menu-item-padding-block: var(--win31-padding-block);
+    --rc-adaptive-menu-item-padding-inline: calc(8 * var(--win31-unit));
+    --rc-adaptive-menu-icon-size: var(--win31-check-size);
+    --rc-adaptive-menu-trigger-background: var(--win31-color-surface);
+    --rc-adaptive-menu-trigger-color: var(--win31-color-frame);
+    --rc-adaptive-menu-trigger-border: var(--win31-border);
+    --rc-adaptive-menu-trigger-radius: var(--win31-radius);
+    --rc-adaptive-menu-trigger-shadow: var(--win31-bevel-outset-1);
+    --rc-adaptive-menu-trigger-active-shadow: var(--win31-bevel-inset-1);
+    --rc-adaptive-menu-trigger-block-size: var(--win31-control-height);
+    --rc-adaptive-menu-trigger-inline-size: var(--win31-control-height);
+    --rc-adaptive-menu-trigger-padding: 0;
+    --rc-adaptive-menu-popup-min-inline-size: calc(142 * var(--win31-unit));
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-adaptive-menu {
+    font-family: var(--win31-font-family);
+    font-size: var(--win31-font-size);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-adaptive-menu::part(overflow-trigger) {
+    cursor: default;
+  }
+}
+
+/*
+ * An action rc-adaptive-menu moves into its overflow renders as a menu row.
+ * rc-adaptive-menu maps the action's own tokens onto its item tokens in rc-base,
+ * which sits below every theme layer, so this layer repeats the mapping above the
+ * theme's button and menu-button variants (filled, tonal, icon-only sizes, and so
+ * on) that would otherwise restyle the row as a standalone control.
+ */
+@layer rc-theme-win31.overrides {
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    rc-adaptive-menu
+    > rc-button[data-rc-action-overflowed] {
+    --rc-button-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
+    --rc-button-icon-size: 100%;
+    --rc-button-touch-target-inline-size: 100%;
+    --rc-button-touch-target-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
+    --rc-button-padding-inline: var(
+      --rc-adaptive-menu-item-padding-inline,
+      var(--rc-item-padding-inline, 0.75em)
+    );
+    --rc-button-padding-block: var(
+      --rc-adaptive-menu-item-padding-block,
+      var(--rc-item-padding-block, 0.3em)
+    );
+    --rc-button-radius: 0;
+    --rc-button-bg: transparent;
+    --rc-button-color: currentColor;
+    --rc-button-border: 0;
+    --rc-button-state-layer-bg: currentColor;
+    --rc-button-progress-color: currentColor;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    rc-adaptive-menu
+    > rc-menu-button[data-rc-action-overflowed] {
+    --rc-menu-button-trigger-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
+    --rc-menu-button-icon-size: 100%;
+    --rc-menu-button-touch-target-inline-size: 100%;
+    --rc-menu-button-touch-target-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
+    --rc-menu-button-trigger-padding-block: var(
+      --rc-adaptive-menu-item-padding-block,
+      var(--rc-item-padding-block, 0.3em)
+    );
+    --rc-menu-button-trigger-padding-inline: var(
+      --rc-adaptive-menu-item-padding-inline,
+      var(--rc-item-padding-inline, 0.75em)
+    );
+    --rc-menu-button-trigger-gap: var(--rc-adaptive-menu-item-gap, var(--rc-item-gap, 0.5em));
+    --rc-menu-button-trigger-radius: 0;
+    --rc-menu-button-trigger-border: 0;
+    --rc-menu-button-trigger-background: transparent;
+    --rc-menu-button-trigger-color: currentColor;
+    --rc-menu-button-trigger-hover-color: currentColor;
+    --rc-menu-button-trigger-open-color: currentColor;
+  }
+
+  /* Win31 draws its buttons on the native control, not through tokens. */
+  :where(.rc-theme-win31, :host(.rc-theme-win31))
+    rc-adaptive-menu
+    > :is(rc-button, rc-menu-button)[data-rc-action-overflowed]
+    > :is(button, a[href]) {
+    inline-size: 100%;
+    min-inline-size: 0;
+    min-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
+    block-size: auto;
+    padding: var(--rc-adaptive-menu-item-padding-block, var(--rc-item-padding-block, 0.3em))
+      var(--rc-adaptive-menu-item-padding-inline, var(--rc-item-padding-inline, 0.75em));
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    color: inherit;
+    text-align: start;
+  }
+}

package/components/app-bar.css

@@ -0,0 +1,66 @@
+@layer rc-theme-win31.components {
+  /*
+   * The application window's caption bar. Same construction as the dialog
+   * caption above: a solid active-title fill, a centered bold title, and
+   * beveled caption buttons at the trailing edge.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-app-bar {
+    --rc-app-bar-bg: var(--win31-color-title-active);
+    --rc-app-bar-color: var(--win31-color-title-active-text);
+    --rc-app-bar-compact-min-height: var(--win31-title-height);
+    --rc-app-bar-title-font-size: var(--win31-title-font-size);
+    --rc-app-bar-expanded-title-font-size: var(--win31-title-font-size);
+    --rc-app-bar-expanded-padding-block: 0;
+    --rc-app-bar-padding-inline: 0;
+    --rc-app-bar-title-start-padding: var(--win31-padding-inline);
+    --rc-app-bar-gap: 0;
+    --rc-app-bar-shadow: none;
+    --rc-app-bar-scroll-divider: var(--win31-border);
+    --rc-app-bar-transition-duration: 0ms;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-app-bar::part(root) {
+    min-block-size: var(--win31-title-height);
+    border-block-end: var(--win31-border);
+    font-family: var(--win31-font-family);
+    user-select: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-app-bar::part(title) {
+    flex: 1;
+    font-weight: 700;
+    text-align: center;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-app-bar::part(scroll-shadow) {
+    display: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-app-bar button {
+    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-app-bar button:active {
+    box-shadow: var(--win31-bevel-inset-1);
+  }
+
+  /*
+   * An inactive window took the muted caption pair. rc-app-bar has no inactive
+   * state of its own, so this is offered as a documented opt-in marker.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-app-bar[data-rc-win31-inactive] {
+    --rc-app-bar-bg: var(--win31-color-title-inactive);
+    --rc-app-bar-color: var(--win31-color-title-inactive-text);
+  }
+}

package/components/bottom-sheet.css

@@ -0,0 +1,41 @@
+@layer rc-theme-win31.components {
+  /*
+   * 3.1 had no bottom sheet. The nearest real thing is a non-modal tool
+   * palette parked against an edge of the workspace, so that is what this
+   * renders: a framed panel with a caption-height grab strip and no rounding,
+   * no elevation, and no scrim.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-bottom-sheet {
+    --rc-bottom-sheet-bg: var(--win31-color-surface);
+    --rc-bottom-sheet-color: var(--win31-color-frame);
+    --rc-bottom-sheet-radius: var(--win31-radius);
+    --rc-bottom-sheet-shadow: var(--win31-window-frame);
+    --rc-bottom-sheet-scrim: transparent;
+    --rc-bottom-sheet-padding: var(--win31-gap-panel);
+    --rc-bottom-sheet-handle-color: var(--win31-color-title-active);
+    --rc-bottom-sheet-handle-radius: var(--win31-radius);
+    --rc-bottom-sheet-handle-inline-size: calc(32 * var(--win31-unit));
+    --rc-bottom-sheet-handle-block-size: calc(4 * var(--win31-unit));
+    --rc-bottom-sheet-snap-duration: 0ms;
+    font-family: var(--win31-font-family);
+    font-size: var(--win31-font-size);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-bottom-sheet > dialog {
+    color: var(--win31-color-frame);
+    background: var(--win31-color-surface);
+    border: var(--win31-border);
+    border-radius: var(--win31-radius);
+    box-shadow: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-bottom-sheet > dialog::backdrop {
+    background: transparent;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-bottom-sheet [data-rc-bottom-sheet-handle] {
+    border: var(--win31-hairline) solid;
+    border-color: var(--win31-outset-border-color);
+    border-radius: var(--win31-radius);
+  }
+}

package/components/button.css

@@ -0,0 +1,74 @@
+@layer rc-theme-win31.components {
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-button > button {
+    min-block-size: var(--win31-control-height);
+    min-inline-size: var(--win31-control-height);
+    padding-block: var(--win31-padding-block);
+    padding-inline: calc(8 * var(--win31-unit));
+    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);
+    font: var(--rc-button-font);
+    /* Windows 3.1 never showed a text cursor over a push button. */
+    cursor: default;
+    transition: none;
+  }
+
+  /*
+   * Pressed is a geometry change rather than a color change: the bevel inverts
+   * and the label moves one pixel down and right, so the control reads as
+   * physically depressed.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-button > button:active:not(:disabled) {
+    box-shadow: var(--win31-bevel-inset-1);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-button > button:active:not(:disabled) > * {
+    translate: var(--win31-unit) var(--win31-unit);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-button > button:focus-visible {
+    outline: var(--win31-focus-ring);
+    outline-offset: var(--win31-focus-ring-offset);
+  }
+
+  /*
+   * Disabled is embossed, not faded. Windows 3.1 had no alpha channel, so it
+   * drew gray text over a one-pixel highlight offset. --rc-disabled-opacity
+   * stays at 1 for exactly this reason.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-button > button:disabled {
+    color: var(--win31-color-disabled-text);
+    text-shadow: var(--win31-unit) var(--win31-unit) 0 var(--win31-color-disabled-emboss);
+    opacity: 1;
+  }
+
+  /*
+   * The default button in a dialog carried a second frame, which is how Enter
+   * was advertised before a focus ring could be relied on.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-button[data-rc-win31-default] > button {
+    outline: calc(2 * var(--win31-unit)) solid var(--win31-color-frame);
+    outline-offset: var(--win31-unit);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-button[icon-only] > button {
+    inline-size: var(--win31-toolbar-button-size);
+    block-size: var(--win31-toolbar-button-size);
+    padding-inline: 0;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-button::part(state-layer) {
+    display: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-button::part(progress) {
+    inset: var(--win31-gap-tight);
+    background: var(--win31-color-surface);
+    border: var(--win31-border);
+    border-radius: var(--win31-radius);
+    box-shadow: var(--win31-bevel-inset-1);
+    font: var(--rc-button-font);
+  }
+}

package/components/card.css

@@ -0,0 +1,50 @@
+@layer rc-theme-win31.components {
+  /*
+   * A card is a group box: an outset panel with no radius and no elevation.
+   * Depth comes from the one-pixel bevel, which is all Windows 3.1 had.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-card::part(container) {
+    background: var(--win31-color-surface);
+    color: var(--win31-color-frame);
+    border: var(--win31-hairline) solid;
+    border-color: var(--win31-outset-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-card::part(header) {
+    padding-block: var(--win31-gap-tight);
+    padding-inline: var(--win31-padding-inline);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-card::part(title) {
+    font-size: var(--win31-font-size);
+    font-weight: 700;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-card::part(subtitle) {
+    color: var(--win31-color-frame);
+    font-size: var(--win31-font-size);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-card::part(media) img {
+    image-rendering: pixelated;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-card::part(state-layer) {
+    display: none;
+  }
+
+  /*
+   * A horizontal rule in a 3.1 panel is a two-pixel ridge, not a line: one
+   * shadow pixel above one highlight pixel.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-card hr {
+    margin-block: var(--win31-gap-tight);
+    border: 0;
+    border-block-start: var(--win31-hairline) solid var(--win31-color-shadow);
+    border-block-end: var(--win31-hairline) solid var(--win31-color-highlight);
+  }
+}

package/components/carousel.css

@@ -0,0 +1,59 @@
+@layer rc-theme-win31.components {
+  /*
+   * No 3.1 analogue. Rendered as a framed filmstrip whose navigation reuses
+   * the scrollbar button construction, which is the only stepping affordance
+   * the period actually had.
+   */
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-carousel::part(track) {
+    border: var(--win31-hairline) solid;
+    border-color: var(--win31-inset-border-color);
+    border-radius: var(--win31-radius);
+    background: var(--win31-color-field);
+    scroll-behavior: auto;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-carousel::part(navigation-button) {
+    inline-size: var(--win31-scrollbar-size);
+    block-size: var(--win31-scrollbar-size);
+    color: transparent;
+    background-color: var(--win31-color-surface);
+    background-position: center;
+    background-repeat: no-repeat;
+    border: var(--win31-border);
+    border-radius: var(--win31-radius);
+    box-shadow: var(--win31-bevel-outset-1);
+    font-size: 0;
+    cursor: default;
+    transition: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-carousel::part(navigation-button):active {
+    box-shadow: var(--win31-bevel-inset-1);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-carousel::part(navigation-button-previous) {
+    background-image: var(--win31-glyph-arrow-left);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-carousel::part(navigation-button-next) {
+    background-image: var(--win31-glyph-arrow-right);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-carousel::part(pagination-item) {
+    inline-size: calc(8 * var(--win31-unit));
+    block-size: calc(8 * var(--win31-unit));
+    background: var(--win31-color-surface);
+    border: var(--win31-hairline) solid;
+    border-color: var(--win31-inset-border-color);
+    border-radius: var(--win31-radius);
+    transition: none;
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-carousel::part(pagination-item-active) {
+    background: var(--win31-color-selection);
+  }
+
+  :where(.rc-theme-win31, :host(.rc-theme-win31)) rc-carousel img {
+    image-rendering: pixelated;
+  }
+}