@nubisco/ui 4.1.4 → 5.1.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nubisco/ui",
-  "version": "4.1.4",
+  "version": "5.1.0",
   "description": "Vue 3 UI component library",
-  "packageManager": "pnpm@11.0.8",
+  "packageManager": "pnpm@12.3.4+sha512.961aa41fb077da3a04a441d9f8e15ebc0c96da8ef710b2eb67bf9ee7cb0610eabd48f1fd85f51cffe73846785fa0f87c56a3a872a1d893f8446741b5cce45457",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nubisco/ui.git"
@@ -140,7 +140,7 @@
     "build:lib": "vite build",
     "build:types": "vue-tsc --noEmit false --declaration --emitDeclarationOnly --outDir dist && node scripts/copy-type-modules.mjs && node scripts/rewrite-dist-aliases.mjs dist",
     "build:plugins": "tsc --project tsconfig.plugins.json",
-    "verify:types": "pnpm run verify:dist-types && pnpm run verify:consumer-types && pnpm run verify:consumer-globals && pnpm run verify:resolution && pnpm run verify:styles && pnpm run verify:glyph-defaults",
+    "verify:types": "pnpm run verify:dist-types && pnpm run verify:consumer-types && pnpm run verify:consumer-globals && pnpm run verify:resolution && pnpm run verify:styles && pnpm run verify:glyph-defaults && pnpm run verify:theme-export",
     "verify:dist-types": "node scripts/verify-dist-types.mjs dist",
     "verify:consumer-types": "node scripts/verify-consumer-types.mjs",
     "verify:consumer-globals": "node scripts/verify-consumer-globals.mjs",
@@ -162,7 +162,9 @@
     "generate": "node scripts/generate-component-manifest.mjs && node scripts/generate-assets.mjs && node scripts/generate-entries.mjs",
     "verify:resolution": "node scripts/verify-compile-time-resolution.mjs dist",
     "verify:styles": "node scripts/verify-style-split.mjs dist",
-    "verify:glyph-defaults": "node scripts/verify-default-glyphs.mjs dist"
+    "verify:glyph-defaults": "node scripts/verify-default-glyphs.mjs dist",
+    "verify:theme-export": "node scripts/verify-theme-export.mjs",
+    "test:e2e": "playwright test"
   },
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged && pnpm run quality:check",
@@ -192,6 +194,7 @@
     "@fontsource/fira-code": "^5.2.7",
     "@fontsource/plus-jakarta-sans": "^5.2.8",
     "@phosphor-icons/core": "^2.1.1",
+    "@playwright/test": "^1.63.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/node": "^25.5.0",

package/src/plugins/vite/index.ts

@@ -91,6 +91,15 @@ const RESOLVER_ENTRIES = Object.entries(COMPONENT_MANIFEST) as [
   string,
 ][]
 
+/**
+ * The full-stylesheet import, in the two spellings that reach the same file:
+ * the `./css` export condition and the path it maps to. Matched against source
+ * text rather than a resolved id so it is found before the CSS pipeline turns
+ * it into something else.
+ */
+const FULL_SHEET =
+  /(?:^|["'\s(])@nubisco\/ui\/(?:css|dist\/ui\.css)(?=["'\s)]|$)/m
+
 export function nubiscoUI(options: INubiscoUIOptions = {}): Plugin[] {
   const { components = true, glyphs = true, styles = true } = options
   const componentOptions = typeof components === 'object' ? components : {}
@@ -103,6 +112,8 @@ export function nubiscoUI(options: INubiscoUIOptions = {}): Plugin[] {
 
   if (components !== false) {
     const lookup = new Map(RESOLVER_ENTRIES)
+    // Set by the first non-vendor module found importing the full sheet.
+    let fullSheetImporter: string | null = null
     const styleManifest = styles
       ? loadStyleManifest(options.distRoot ?? defaultDistRoot())
       : {}
@@ -149,7 +160,58 @@ export function nubiscoUI(options: INubiscoUIOptions = {}): Plugin[] {
       plugins.push({
         name: 'nubisco-ui:styles-check',
         apply: 'build',
+
+        /*
+         * The other half of the same mistake.
+         *
+         * `@nubisco/ui/css` is the whole 214KB sheet for all 86 components. It
+         * still exists and still works, so an app that keeps importing it
+         * while this plugin also links per-component sheets gets every rule
+         * twice: byte-identical, same specificity, nothing renders
+         * differently, and the only symptom is a CSS bundle roughly twice the
+         * size it should be.
+         *
+         * That combination is exactly what an upgrade produces, because
+         * importing the full sheet was the correct thing to do beforehand.
+         * The upgrade guide says to drop the line; this says so at the moment
+         * it starts costing something, which is the difference between a
+         * sentence someone read and a sentence someone acts on.
+         */
+        transform(code, id) {
+          if (fullSheetImporter) return
+          if (id.includes('/node_modules/')) return
+          if (!FULL_SHEET.test(code)) return
+          fullSheetImporter = id
+          return null
+        },
+
         closeBundle() {
+          /*
+           * Both halves of the condition matter, and the second one is not
+           * decoration.
+           *
+           * The full sheet is the RIGHT answer for a build that links no
+           * per-component stylesheets: an entry built without this plugin at
+           * all, or one whose components never got resolved. Warning on the
+           * import alone would fire on a file where importing it is the only
+           * thing keeping the app styled, and a diagnostic that cries wolf on
+           * correct code is how people learn to ignore it.
+           *
+           * So this fires only when both sources are actually feeding the same
+           * build. That also makes it mutually exclusive with the "nothing was
+           * linked" warning below, which is the opposite failure.
+           */
+          if (fullSheetImporter && resolvedComponents > 0) {
+            const where = fullSheetImporter.split('/').slice(-2).join('/')
+            console.warn(
+              `[nubisco-ui] ${where} imports the full stylesheet ` +
+                `('@nubisco/ui/css') and this plugin is also linking ` +
+                `per-component stylesheets, so every component rule is in ` +
+                `this build twice. It renders correctly and costs roughly ` +
+                `double the component CSS. Drop the import, or keep it and ` +
+                `pass \`nubiscoUI({ styles: false })\`.`,
+            )
+          }
           if (resolvedComponents) return
           console.warn(
             `[nubisco-ui] no components were linked in this build, so none of ` +

package/src/styles/_appearance.scss

@@ -0,0 +1,144 @@
+/// Square and rounded geometry.
+///
+/// One attribute on `<html>` selects the scale:
+///
+/// ```html
+/// <html data-nb-appearance="rounded">
+/// ```
+///
+/// which is what `configureAppearance()` and `useAppearance()` write. It is on
+/// the document element rather than the application root so that teleported
+/// overlays, which mount as siblings of that root, inherit it too.
+///
+/// Square is the default and needs no rules at all: the semantic roles in
+/// `_theme.scss` are already the square scale, and they are the geometry the
+/// library renders today. Everything here is the opt-in half.
+///
+/// ## Independence
+///
+/// Nothing in this file mentions a colour. Appearance and colour mode are
+/// selected by different selectors (`[data-nb-appearance]` and `.dark`) that
+/// never appear in the same rule, so the two cannot interfere: switching one
+/// cannot reset the other, and a theme exported by the theme builder carries
+/// colours only, never a baked-in corner.
+///
+/// @group @nubisco/appearance
+
+@use 'sass:map';
+
+/// The rounded scale.
+///
+/// This is not "square with the corners knocked off". Rounded is a different
+/// design language, and the reference is Apple's: controls are capsules, and
+/// every container carries a generous corner that its contents are concentric
+/// with.
+///
+/// Two families, because one radius cannot serve both:
+///
+/// - **`control`** is a capsule. A button, a single-line field or a tag is a
+///   pill: the radius exceeds half the height, so CSS clamps it and both ends
+///   are semicircles. This is what "round" means on a control, and it is why
+///   4px was wrong.
+/// - **`control-sm`** is a rounded rectangle, for the small square-ish
+///   affordances a capsule would destroy. A checkbox at capsule radius is a
+///   circle, which is a radio button; a sidebar row at capsule radius is a
+///   lozenge that fights the rows above and below it.
+///
+/// Containers step up with their size: a popover is small and close to the
+/// pointer, a modal is the largest surface on screen and can carry the most
+/// corner before it stops reading as geometric.
+///
+/// The container values are deliberately larger than the previous 6/8/12, so
+/// that an inset surface still has a corner left after the enclosing padding
+/// is subtracted. Concentric geometry is only visible when the outer radius
+/// exceeds the inset; at 8px against 16px of padding it always collapsed to
+/// square, which is correct arithmetic and a wasted mechanism.
+$rounded: (
+  control: '9999px',
+  control-sm: 'var(--nb-base-unit)',
+  // 8px
+  popover: 'calc(var(--nb-base-unit) * 1.5)',
+  // 12px
+  panel: 'calc(var(--nb-base-unit) * 1.75)',
+  // 14px
+  modal: 'calc(var(--nb-base-unit) * 2.5)',
+);
+
+@mixin appearance {
+  [data-nb-appearance='rounded'] {
+    --nb-radius-control: #{map.get($rounded, control)};
+    --nb-radius-control-sm: #{map.get($rounded, control-sm)};
+    --nb-radius-popover: #{map.get($rounded, popover)};
+    --nb-radius-panel: #{map.get($rounded, panel)};
+    --nb-radius-modal: #{map.get($rounded, modal)};
+
+    /*
+     * Fields become boxes.
+     *
+     * Square keeps the library's own idiom: a filled box with one bottom rule.
+     * A capsule cannot be drawn with a bottom rule alone, so rounded gives the
+     * field the outline the shape needs. Both are deliberate, and the square
+     * treatment is untouched.
+     *
+     * A textarea is not a capsule. It is a box of text, and a pill around
+     * several lines reads as a speech bubble, so multiline steps down to the
+     * panel corner.
+     *
+     * The side borders are added by ROUNDED, not neutralised by square, and
+     * only their WIDTH is set here. The colour stays `--nb-c-field-border`,
+     * named by each field component itself: a `var()` written in this block
+     * would substitute against the root palette and inherit that resolved
+     * value into a nested `.dark` region, giving one field light sides and a
+     * dark bottom rule.
+     *
+     * Drawing a transparent 1px side border in square too would keep the two
+     * appearances pixel-identical, and was tried: it makes every square field
+     * one pixel taller than it is today, which is a change to the default
+     * every existing application renders. Square compatibility is worth more
+     * than a pixel of parity on an opt-in switch, so a field is 1px taller in
+     * rounded and square is exactly what it was.
+     */
+    --nb-field-border-width: 1px;
+    --nb-field-radius: var(--nb-radius-control);
+    --nb-field-radius-multiline: var(--nb-radius-panel);
+    /*
+     * A validation state colours the whole box under rounded, because the
+     * whole box is drawn. The doubled bottom rule square uses would smear a
+     * one-sided shadow across a capsule, so it is switched off here and the
+     * border colour carries the state on its own.
+     */
+    --nb-field-status-emphasis: 0;
+
+    /*
+     * How far a child is held off a rounded parent's edge.
+     *
+     * Apple's rule, and the reason a rounded interface reads as calm: nothing
+     * sits hard against a rounded border, because a square child in a rounded
+     * corner cuts the arc. Square needs none of this, so it is zero there and
+     * every flush layout stays exactly as it was.
+     */
+    --nb-overlay-inset: calc(var(--nb-base-unit) * 0.75);
+  }
+
+  /*
+   * Square is written out as well as being the default.
+   *
+   * An application can nest the attribute to pin one region square inside a
+   * rounded page (a dense report inside a rounded shell, say). Without this
+   * block the inner region would inherit the rounded values, because custom
+   * properties inherit and "default" is not a thing the cascade knows about.
+   */
+  [data-nb-appearance='square'] {
+    --nb-radius-control: 0;
+    --nb-radius-control-sm: 0;
+    --nb-radius-popover: 0;
+    --nb-radius-panel: 0;
+    --nb-radius-modal: 0;
+    --nb-field-border-width: 0;
+    --nb-field-radius: 0;
+    --nb-field-radius-multiline: 0;
+    // Square states the validation on the one edge it draws.
+    --nb-field-status-emphasis: 1;
+    --nb-overlay-inset: 0px;
+  }
+}

package/src/styles/_theme-api.scss

@@ -0,0 +1,193 @@
+/// The public API for authoring a named theme.
+///
+/// This file **emits nothing on its own**. That is the point: `@nubisco/ui/styles`
+/// emits the whole stylesheet, so a theme file that imported it would ship a
+/// second copy of the library's CSS. A theme imports this instead, calls
+/// `theme()`, and emits only its own tokens.
+///
+/// ```scss
+/// @use '@nubisco/ui/styles/theme-api' as nb;
+///
+/// @include nb.theme(
+///   'ocean',
+///   $light: (primary: #0f6f8c, surface: #ffffff),
+///   $dark:  (primary: #4fb3cf, surface: #14232a)
+/// );
+/// ```
+///
+/// ```ts
+/// import '@nubisco/ui/styles'   // the library, once
+/// import './themes/ocean.scss'  // the theme's tokens
+///
+/// configureNamedTheme({ defaultTheme: 'ocean' })
+/// ```
+///
+/// ## Three independent axes
+///
+/// A named theme carries **colour only**. It says nothing about light versus
+/// dark (it supplies both halves and the existing `.dark` class chooses between
+/// them) and nothing about square versus rounded (that is
+/// `data-nb-appearance`). Selecting a theme cannot reset the other two, and
+/// neither of them can reset it.
+///
+/// ## What a theme has to supply
+///
+/// Nothing, strictly: every key is optional and anything omitted falls through
+/// to the default theme, because these rules only re-declare custom properties
+/// on a scope that sits inside `:root`. A theme that changes one accent is one
+/// key long.
+///
+/// The keys are the semantic token names with the `--nb-c-` prefix dropped, so
+/// `primary` writes `--nb-c-primary`. Layer keys are spelled as they are in the
+/// token contract: `layer-0`, `layer-border-0`, `layer-hover-0`.
+///
+/// The `.nb-layer-N` classes that re-point `--nb-c-surface` at each layer are
+/// emitted once by the library and are shared by every theme, so a theme
+/// redefines the twelve layer values and gets the whole surface system with
+/// them. It does not need to restate the machinery.
+///
+/// @group @nubisco/theme-api
+
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'logic' as logic;
+
+/// The tints every palette colour is expanded into, matching the library's own
+/// ramp exactly.
+$tints:
+  100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800,
+  850, 900;
+
+/// The roles the library pairs with a readable foreground.
+///
+/// A theme that points one of these at a palette step gets the matching
+/// `-a11y` value for free, so text on a themed button stays readable without
+/// the author having to work it out. This is the list the library itself
+/// maintains in `_theme.scss`; anything outside it has no `-a11y` counterpart
+/// to set.
+$a11y-roles:
+  'primary', 'primary-hover', 'primary-active', 'secondary', 'secondary-hover',
+  'secondary-active', 'success', 'success-hover', 'success-active', 'info',
+  'info-hover', 'info-active', 'warning', 'warning-hover', 'warning-active',
+  'danger', 'danger-hover', 'danger-active';
+
+/// Turns a token key into its custom-property name.
+@function _prop($key) {
+  @return --nb-c-#{$key};
+}
+
+/// Expands one base colour into the full ramp, plus its readable foregrounds.
+///
+/// Same two functions the library uses, so a themed ramp and a built-in ramp
+/// are generated by one implementation rather than by two that agree today.
+@mixin _palette($palette) {
+  @each $name, $base in $palette {
+    $shades: logic.make-shades($base);
+    @each $tint in $tints {
+      $value: map.get($shades, $tint);
+      --nb-c-#{$name}-#{$tint}: #{$value};
+      --nb-c-#{$name}-#{$tint}-a11y: #{logic.color-contrast($value)};
+    }
+  }
+}
+
+/// Whether a role value names a step of a declared palette colour.
+///
+/// `primary: 'accent-500'` points at the ramp; `primary: #0f6f8c` is a literal.
+/// Both are allowed: a ramp step is how a theme normally works, and a literal
+/// is the escape hatch for the handful of values (pure white, say) that are not
+/// a step of anything.
+@function _ramp-ref($value, $palette) {
+  @if meta.type-of($value) != string {
+    @return null;
+  }
+  @each $name, $base in $palette {
+    $prefix: '#{$name}-';
+    @if string.index($value, $prefix) == 1 {
+      @return $value;
+    }
+  }
+  @return null;
+}
+
+/// Emits one map as custom-property declarations.
+@mixin _emit($tokens, $palette: ()) {
+  @each $key, $value in $tokens {
+    $ref: _ramp-ref($value, $palette);
+    @if $ref {
+      #{_prop($key)}: var(--nb-c-#{$ref});
+      /*
+       * The readable foreground travels with the colour it belongs to. A theme
+       * that moves `primary` to a darker step and leaves `primary-a11y`
+       * behind ships black text on a dark button, which is the failure this
+       * pairing exists to prevent.
+       */
+      @if list.index($a11y-roles, $key) {
+        #{_prop('#{$key}-a11y')}: var(--nb-c-#{$ref}-a11y);
+      }
+    } @else {
+      #{_prop($key)}: #{$value};
+    }
+  }
+}
+
+/// Declares a named theme.
+///
+/// @param {String} $id - the identifier selected at runtime. Lowercase
+///   letters, digits and hyphens; it becomes an attribute value, so it is
+///   validated rather than interpolated blindly.
+/// @param {Map} $light - tokens for the light half
+/// @param {Map} $dark - tokens for the dark half
+@mixin theme($id, $palette: (), $light: (), $dark: ()) {
+  // A theme id lands inside an attribute selector. Anything outside this set
+  // could close the selector and inject rules, so an invalid id is a build
+  // error rather than something that silently ships.
+  @if not _valid-id($id) {
+    @error "Invalid theme id #{$id}. Use lowercase letters, digits and hyphens.";
+  }
+
+  /*
+   * The ramp is emitted once, not per colour mode.
+   *
+   * A palette is a set of colours, and a colour does not change because the
+   * page went dark: what changes is which STEP of it a role points at. Both
+   * halves therefore read the same ramp, and only the role mappings below
+   * differ, which is also how the library's own `:root` ramp behaves.
+   */
+  @if $palette != () or map.keys($light) != () or $light != () {
+    [data-nb-theme='#{$id}'] {
+      @include _palette($palette);
+      @include _emit($light, $palette);
+    }
+  }
+
+  /*
+   * Two selectors, because the theme attribute and the dark class can land on
+   * the same element or on different ones. Both are more specific than the
+   * single-attribute block above, so the dark half wins inside a dark document
+   * regardless of the order the stylesheets happen to be concatenated in.
+   */
+  @if map.keys($dark) != () or $dark != () {
+    .dark[data-nb-theme='#{$id}'],
+    .dark [data-nb-theme='#{$id}'] {
+      @include _emit($dark, $palette);
+    }
+  }
+}
+
+/// Whether a string is safe to use as a theme id.
+@function _valid-id($id) {
+  $allowed: 'abcdefghijklmnopqrstuvwxyz0123456789-';
+  @if string.length($id) == 0 {
+    @return false;
+  }
+  @for $i from 1 through string.length($id) {
+    $char: string.slice($id, $i, $i);
+    @if string.index($allowed, $char) == null {
+      @return false;
+    }
+  }
+  @return true;
+}

package/src/styles/_theme.scss

@@ -251,9 +251,30 @@
         layers.token(layers.$light, text-subtle)
       )};
 
-    // Form field tokens: heights and padding relative to --nb-base-unit (8px)
-    --nb-c-field-bg: #{layers.token(layers.$light, field-bg)};
+    /*
+     * Form fields.
+     *
+     * The enabled fill used to be `field-bg` (#cacbcc): a mid grey, darker
+     * than every surface it sits on. A grey box with no outline is what most
+     * interfaces use to mean "unavailable", so the enabled state was wearing
+     * the disabled state's clothes, and `disabled` on top of it was only a
+     * 0.45 opacity. The two differed in brightness rather than in kind, and
+     * the enabled field read as the heavier of the two.
+     *
+     * The geometry is untouched: still a filled box with a single bottom
+     * rule, still square. Only the fills and the boundary contrast moved.
+     * `[data-nb-preset='classic-fields']` restores the old values.
+     */
+    --nb-c-field-bg: #f1f2f3;
     --nb-c-field-border: #{layers.token(layers.$light, field-border)};
+    // The historic enabled fill, now carrying the disabled state.
+    --nb-c-field-bg-disabled: #{layers.token(layers.$light, field-bg)};
+    // Disabled loses boundary contrast as well as gaining the darker fill,
+    // so the two states differ in kind. Deliberately under the 3:1 that WCAG
+    // 1.4.11 asks of an *operable* control boundary: this one is not operable.
+    --nb-c-field-border-disabled: #949596;
+    // Read-only sits between the two: quieter than editable, but still a rule.
+    --nb-c-field-border-readonly: #949596;
 
     // ── Status foregrounds ────────────────────────────────────────────────
     // Drawn as glyphs and outlines directly on a layer surface, so they are
@@ -389,6 +410,55 @@
     --nb-radius-lg: calc(var(--nb-base-unit) * 1.5); // 12px
     --nb-radius-pill: 9999px;
 
+    /*
+     * Semantic radius roles.
+     *
+     * The scale above is a set of sizes; these are the roles components
+     * actually consume, and they are what the square/rounded appearance
+     * setting switches. A component asks for "the radius a popover has", not
+     * for "4px", so one setting moves all of them coherently and nothing has
+     * to be hunted down by hand.
+     *
+     * These values are the SQUARE scale, and square is the default. They are
+     * not aspirational zeroes: they are what the library renders today, so an
+     * application that upgrades and calls nothing gets the pixels it had
+     * before. The rounded scale lives in the `appearance` mixin below.
+     *
+     * Roles are proportionate rather than uniform. A 12px corner on a modal
+     * and a 12px corner on a checkbox are not the same design; the larger the
+     * surface, the more corner it can carry before it stops reading as
+     * geometric.
+     */
+    --nb-radius-control: 0; // buttons and single-line fields (capsule when round)
+    --nb-radius-control-sm: 0; // checkboxes, sidebar rows, step markers
+    --nb-radius-popover: 0; // menus, dropdowns, tooltips
+    --nb-radius-panel: 0; // cards, panels, inspectors, table shells
+    --nb-radius-modal: 0; // modals, drawers
+
+    /*
+     * Geometry that is not decoration and never follows the appearance
+     * setting. An avatar is round because it is an avatar, a radio is round
+     * because a square radio is a checkbox, and a switch track is a track.
+     * Squaring these would not make the library look more geometric, it would
+     * make it look broken.
+     */
+    --nb-radius-circle: 50%;
+
+    /*
+     * The concentric context.
+     *
+     * A surface that draws a corner publishes it here, and any inset surface
+     * that follows that corner derives from it rather than picking its own
+     * value: `inner = max(0, outer - inset)`, which is the geometry that makes
+     * two nested rounded boxes look like one object instead of two.
+     *
+     * At the document root there is no enclosing surface, so the context is
+     * zero and a derived radius collapses to its own floor. Components that
+     * are standalone rather than inset ignore this entirely.
+     */
+    --nb-radius-context: 0px;
+    --nb-radius-inset: 0px;
+
     --nb-grid-max-width: #{grid.$grid-max-width}px;
     --nb-grid-columns: #{grid.$grid-columns};
     --nb-grid-gutter: #{grid.$grid-gutter}px;
@@ -756,9 +826,25 @@
     --nb-c-bg: var(--nb-c-layer-0);
     --nb-c-bg-soft: var(--nb-c-layer-1);
 
-    // Form fields
-    --nb-c-field-bg: #{layers.token(layers.$dark, field-bg)};
-    --nb-c-field-border: #{layers.token(layers.$dark, field-border)};
+    /*
+     * Form fields. The dark ramp's old fill was an inset near-black rather
+     * than a mid grey, so it never had the light theme's "looks disabled"
+     * problem; it moves up one surface so an enabled field reads as raised
+     * out of the page, matching the relationship the light half now has.
+     *
+     * The dark ramp cannot separate enabled from disabled by fill at all
+     * (every surface in it sits within 1.21:1 of every other), so in this
+     * theme the bottom rule is the whole signal.
+     */
+    --nb-c-field-bg: #{layers.level(layers.$dark, surface, 1)};
+    // Picked against that fill directly rather than taken from the layer
+    // border ramp, whose brightest step (#696a6b) measures 3.05:1 here and
+    // clears 1.4.11 by four hundredths. This is 4.29:1.
+    --nb-c-field-border: #818283;
+    // Flush with the page ground: enabled is raised, disabled is not.
+    --nb-c-field-bg-disabled: #{layers.level(layers.$dark, surface, 0)};
+    --nb-c-field-border-disabled: #{layers.level(layers.$dark, border, 0)};
+    --nb-c-field-border-readonly: #{layers.level(layers.$dark, border, 1)};
 
     // Status foregrounds. The light values are mid-ramp fills that fall to
     // ~3:1 or below on the dark surfaces, so the dark theme steps up the

package/src/styles/index.scss

@@ -8,6 +8,8 @@
 @use 'typography';
 @use 'utils';
 @use 'patterns/inspector';
+@use 'presets/classic-fields';
+@use 'appearance';
 
 @include theme.base;
 @include theme.classes;
@@ -15,3 +17,9 @@
 @include theme.dark;
 @include directives.tooltip;
 @include grid.grid;
+// Opt-out only: every rule inside is scoped to [data-nb-preset], so including
+// it changes nothing until an application asks for the old field fills.
+@include classic-fields.classic-fields;
+// The rounded scale. Square needs no rules: the semantic roles are already
+// the square values, so this only adds the opt-in half.
+@include appearance.appearance;