@allxsmith/bestax-bulma 5.54.0 → 5.55.0

package/src/scss/components/_datatable.scss

@@ -0,0 +1,152 @@
+// Bestax Extras - DataTable Styles
+// DataTable renders Bulma's own table, checkboxes and pager, which Bulma and
+// the Checkbox partial style. This adds what Bulma has no class for: the
+// toolbar above the table, the button a sortable header holds, and the
+// indicator that shows which way it sorts.
+//
+// The sort button is styled on its own class rather than inside
+// `.data-table`, so a table built from `useDataTable`'s props, with no
+// DataTable around it, gets the same button. Its variables are declared on
+// the button for the same reason.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+@use '../mixins' as *;
+
+// Between the toolbar's items, and under the toolbar.
+$data-table-gap: 0.75rem !default;
+// Between a header's text and its indicator.
+$data-table-sort-gap: 0.375em !default;
+$data-table-sort-indicator-size: 0.75em !default;
+// How strongly an unsorted column shows that it sorts.
+$data-table-sort-unsorted-opacity: 0.35 !default;
+
+// The indicator's shapes, used as masks so they're painted in the text's
+// color, or a system color in forced colors. Private, since they're shapes
+// rather than themable values; the fill only marks what each mask keeps.
+// An unsorted column shows both triangles, a sorted one the one pointing
+// the way it sorts, up for ascending as the APG example draws it.
+$-unsorted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 12.5 7h-9zM8 14.5 3.5 9h9z'/%3E%3C/svg%3E");
+$-ascending: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5 13.5 11h-11z'/%3E%3C/svg%3E");
+$-descending: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 12.5 2.5 5h11z'/%3E%3C/svg%3E");
+
+.#{iv.$class-prefix}data-table {
+  @include cv.register-vars(
+    (
+      'data-table-gap': #{$data-table-gap},
+    )
+  );
+}
+
+.#{iv.$class-prefix}data-table-sort {
+  @include cv.register-vars(
+    (
+      'data-table-sort-gap': #{$data-table-sort-gap},
+      'data-table-sort-indicator-size': #{$data-table-sort-indicator-size},
+      'data-table-sort-unsorted-opacity': #{$data-table-sort-unsorted-opacity},
+    )
+  );
+}
+
+// A block, spaced as Bulma spaces its table and its other blocks.
+.#{iv.$class-prefix}data-table:not(:last-child) {
+  margin-block-end: cv.getVar('block-spacing');
+}
+
+// The caption names the table from the start of the line, over the header
+// cells it names, rather than centered over them as browsers place it.
+.#{iv.$class-prefix}data-table .#{iv.$class-prefix}table > caption {
+  padding-block-end: cv.getVar('data-table-gap');
+  text-align: start;
+}
+
+// The toolbar: the search field at the start, anything else at the end, and
+// the two stacked when the line runs out of room.
+.#{iv.$class-prefix}data-table-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: cv.getVar('data-table-gap');
+  margin-block-end: cv.getVar('data-table-gap');
+
+  > .#{iv.$class-prefix}field {
+    margin-block-end: 0;
+  }
+}
+
+.#{iv.$class-prefix}data-table-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: cv.getVar('data-table-gap');
+  margin-inline-start: auto;
+}
+
+// A sortable header's button reads as the header's own text, with the
+// indicator after it.
+.#{iv.$class-prefix}data-table-sort {
+  @include extras-button-reset;
+  display: inline-flex;
+  align-items: center;
+  gap: cv.getVar('data-table-sort-gap');
+  font-weight: inherit;
+  line-height: inherit;
+  text-align: inherit;
+
+  &::after {
+    content: '';
+    flex-shrink: 0;
+    width: cv.getVar('data-table-sort-indicator-size');
+    height: cv.getVar('data-table-sort-indicator-size');
+    background-color: currentColor;
+    opacity: cv.getVar('data-table-sort-unsorted-opacity');
+    -webkit-mask-image: $-unsorted;
+    -webkit-mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-image: $-unsorted;
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+  }
+
+  &:hover::after {
+    opacity: 1;
+  }
+
+  &:focus-visible {
+    @include extras-focus-outline;
+  }
+}
+
+// The sorted header says which way in `aria-sort`, so the indicator reads it
+// from there, and markup built from `useDataTable`'s props shows it too.
+th[aria-sort='ascending'] > .#{iv.$class-prefix}data-table-sort::after {
+  opacity: 1;
+  -webkit-mask-image: $-ascending;
+  mask-image: $-ascending;
+}
+
+th[aria-sort='descending'] > .#{iv.$class-prefix}data-table-sort::after {
+  opacity: 1;
+  -webkit-mask-image: $-descending;
+  mask-image: $-descending;
+}
+
+// Forced colors replaces a background color that isn't a system one, which
+// would take the indicator's paint away. The mask is left alone, so the
+// shape stays.
+@media (forced-colors: active) {
+  .#{iv.$class-prefix}data-table-sort {
+    // A faint indicator would fall short of the contrast forced colors is
+    // for. The two shapes, one triangle or both, still tell the states apart.
+    &::after {
+      background-color: ButtonText;
+      opacity: 1;
+    }
+
+    &:focus-visible {
+      outline-color: Highlight;
+    }
+  }
+}

package/src/scss/components/_index.scss

@@ -24,3 +24,4 @@
 @use 'treeview';
 @use 'scrollarea';
 @use 'command';
+@use 'datatable';

package/src/scss/elements/_colorswatch.scss

@@ -0,0 +1,100 @@
+// Bestax Extras - ColorSwatch Styles
+// A color shown as a small chip. Bulma has no swatch.
+//
+// The component sets the color as `--color-swatch-color`, which is painted
+// as a gradient over a checkerboard, so a see-through color shows the
+// checks through it. Forced colors would turn both into the page's
+// background, so the swatch opts out of it and takes an edge in the
+// system's text color instead.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+
+$color-swatch-size: 1.5rem !default;
+$color-swatch-size-small: 1rem !default;
+$color-swatch-size-medium: 2rem !default;
+$color-swatch-size-large: 3rem !default;
+$color-swatch-radius: cv.getVar('radius') !default;
+// A faint edge in the text color, so a white swatch shows on a white page
+// and a black one on a dark page.
+$color-swatch-edge-color: hsla(
+  cv.getVar('text-h'),
+  cv.getVar('text-s'),
+  cv.getVar('text-l'),
+  0.2
+) !default;
+// The checkerboard behind a see-through color, from scheme colors so it
+// follows dark mode.
+$color-swatch-checker-color: cv.getVar('border') !default;
+$color-swatch-checker-background: cv.getVar('scheme-main') !default;
+$color-swatch-checker-size: 0.5rem !default;
+
+.#{iv.$class-prefix}color-swatch {
+  @include cv.register-vars(
+    (
+      'color-swatch-size': #{$color-swatch-size},
+      'color-swatch-radius': #{$color-swatch-radius},
+      'color-swatch-edge-color': #{$color-swatch-edge-color},
+      'color-swatch-checker-color': #{$color-swatch-checker-color},
+      'color-swatch-checker-background': #{$color-swatch-checker-background},
+      'color-swatch-checker-size': #{$color-swatch-checker-size},
+    )
+  );
+}
+
+@each $size,
+  $value
+    in (
+      'small': $color-swatch-size-small,
+      'medium': $color-swatch-size-medium,
+      'large': $color-swatch-size-large
+    )
+{
+  .#{iv.$class-prefix}color-swatch.#{iv.$class-prefix}is-#{$size} {
+    @include cv.register-vars(
+      (
+        'color-swatch-size': #{$value},
+      )
+    );
+  }
+}
+
+.#{iv.$class-prefix}color-swatch {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  inline-size: cv.getVar('color-swatch-size');
+  block-size: cv.getVar('color-swatch-size');
+  border-radius: cv.getVar('color-swatch-radius');
+  vertical-align: middle;
+  // The color over the checkerboard: a tile of four squares, two of each.
+  background:
+    linear-gradient(var(--color-swatch-color), var(--color-swatch-color)),
+    repeating-conic-gradient(
+        cv.getVar('color-swatch-checker-color') 0% 25%,
+        cv.getVar('color-swatch-checker-background') 0% 50%
+      )
+      0 0 / calc(#{cv.getVar('color-swatch-checker-size')} * 2)
+      calc(#{cv.getVar('color-swatch-checker-size')} * 2);
+  box-shadow: inset 0 0 0 1px cv.getVar('color-swatch-edge-color');
+  // A swatch is its color, so forced colors leaves it alone.
+  forced-color-adjust: none;
+}
+
+.#{iv.$class-prefix}color-swatch.#{iv.$class-prefix}is-rounded {
+  border-radius: cv.getVar('radius-rounded');
+}
+
+// What's drawn on the swatch, such as an icon, sits in its middle.
+.#{iv.$class-prefix}color-swatch > span {
+  display: inline-flex;
+  line-height: 1;
+}
+
+@media (forced-colors: active) {
+  // Kept apart from the page by the system's text color.
+  .#{iv.$class-prefix}color-swatch {
+    box-shadow: inset 0 0 0 1px CanvasText;
+  }
+}

package/src/scss/elements/_index.scss

@@ -2,6 +2,7 @@
 // Import all element partials here
 
 // Element Components
+@use 'colorswatch';
 @use 'descriptionlist';
 @use 'kbd';
 @use 'linkbutton';

package/src/scss/form/_checkbox.scss

@@ -2,8 +2,10 @@
 // Custom-styled checkbox with colors, sizes, and visual states
 // Follows Bulma v1 CSS variable convention (see _dialog.scss)
 
+@use "sass:list";
 @use "bulma/sass/utilities/initial-variables" as iv;
 @use "bulma/sass/utilities/css-variables" as cv;
+@use "bulma/sass/utilities/derived-variables" as dv;
 @use "bulma/sass/utilities/mixins" as mx;
 
 // Bulma's horizontal field: `.field-label` takes one part of the row and
@@ -182,6 +184,57 @@ $-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
   }
 }
 
+// On Bulma's selected table row (`Tr isSelected`, or a cell with
+// `is-selected`), the row's fill is the same color a checked box fills and
+// borders with, so the box would vanish into it and leave its tick floating.
+// There the box takes the row's text color, and its tick and dash the row's
+// fill, so it reads as the row's text does. An unchecked box's border takes
+// the text color too. This outranks the color variants on purpose: any color
+// on that fill is a guess, and the row's own pair is the one Bulma made to
+// read.
+//
+// Only a Checkbox placed straight in one of those cells sits on the row's
+// fill, so the rule names each step down to it rather than any checkbox
+// below the row. One inside a menu, a card or a table nested in the cell sits
+// on that surface's own background, and keeps its own colors there.
+//
+// A cell with a color of its own (`Td color="white"`) paints its own
+// background over the row's, and so does every cell of a row with a color
+// (`Tr color="white" isSelected`), which hands its color to its cells. Both
+// are left out, and a box there keeps its usual look. Bulma colors those cells with custom properties alone, which a
+// selector can't read, so the cells are named by class, one for each color
+// Bulma makes them from: its `$colors` map, which its table's
+// `$table-colors` is built from, custom colors included. A selected cell is
+// the row's fill whatever its color, as Bulma paints it.
+$-colored-cells: ();
+@each $name, $color in dv.$colors {
+  $-colored-cells: list.append(
+    $-colored-cells,
+    ".#{iv.$class-prefix}is-#{$name}",
+    $separator: comma
+  );
+}
+
+.#{iv.$class-prefix}table {
+  tr.#{iv.$class-prefix}is-selected:not(#{$-colored-cells})
+    > td:not(#{$-colored-cells}),
+  tr.#{iv.$class-prefix}is-selected:not(#{$-colored-cells})
+    > th:not(#{$-colored-cells}),
+  td.#{iv.$class-prefix}is-selected,
+  th.#{iv.$class-prefix}is-selected {
+    > .#{iv.$class-prefix}styled-checkbox {
+      @include cv.register-vars(
+        (
+          "checkbox-border-color": #{cv.getVar("table-row-active-color")},
+          "checkbox-active-color": #{cv.getVar("table-row-active-color")},
+          "checkbox-indeterminate-color": #{cv.getVar("table-row-active-color")},
+          "checkbox-check-color": #{cv.getVar("table-row-active-background-color")},
+        )
+      );
+    }
+  }
+}
+
 // Size variants
 .#{iv.$class-prefix}styled-checkbox.#{iv.$class-prefix}is-small {
   font-size: cv.getVar("size-small");

package/src/scss/form/_colorpicker.scss

@@ -0,0 +1,354 @@
+// Bestax Extras - ColorPicker Styles
+// A panel for choosing a color: a saturation and brightness square, a hue
+// slider, an alpha slider, the value as text, and swatches. Bulma has no
+// color picker.
+//
+// The square and the sliders are drawn here, and the native range inputs
+// that operate them are visually hidden inside their thumbs. The component
+// sets the hue as `--color-picker-hue`, the color's channels as
+// `--color-picker-rgb`, and the thumbs' places as `--color-area-x`,
+// `--color-area-y` and `--color-slider-position`. Forced colors would wipe
+// the gradients, so everything that shows a color opts out of it and takes
+// an edge in the system's text color instead.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+@use '../mixins' as *;
+
+// The square and the hue track are the color model itself, so they're
+// fixed, not themed.
+$-black: hsl(0, 0%, 0%);
+$-white: hsl(0, 0%, 100%);
+$-hue-stops: hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(360, 100%, 50%);
+// The check on a chosen swatch, black or white, whichever reads better, in
+// a ring of the other, so it shows whatever is under it.
+$-ink-dark: hsl(0, 0%, 0%);
+$-ink-light: hsl(0, 0%, 100%);
+
+$color-picker-width: 16rem !default;
+$color-picker-gap: 0.75rem !default;
+$color-picker-area-height: 10rem !default;
+$color-picker-area-radius: cv.getVar('radius') !default;
+// The sliders' height is what a press lands on; the track is drawn thinner
+// inside it.
+$color-picker-slider-height: 1.5rem !default;
+$color-picker-track-height: 0.75rem !default;
+$color-picker-track-radius: cv.getVar('radius-rounded') !default;
+$color-picker-thumb-size: 1.25rem !default;
+$color-picker-thumb-border-width: 3px !default;
+$color-picker-thumb-color: hsl(0, 0%, 100%) !default;
+// A dark ring each side of the white one, so a thumb shows on any color.
+$color-picker-thumb-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.45), inset 0 0 0 1px hsla(0, 0%, 0%, 0.45) !default;
+$color-picker-edge-color: hsla(
+  cv.getVar('text-h'),
+  cv.getVar('text-s'),
+  cv.getVar('text-l'),
+  0.2
+) !default;
+$color-picker-checker-color: cv.getVar('border') !default;
+$color-picker-checker-background: cv.getVar('scheme-main') !default;
+$color-picker-checker-size: 0.375rem !default;
+$color-picker-swatch-size: 1.5rem !default;
+$color-picker-swatch-gap: 0.25rem !default;
+$color-picker-swatch-radius: cv.getVar('radius') !default;
+$color-picker-swatch-ring-color: cv.getVar('text-strong') !default;
+$color-picker-preview-size: 1.875rem !default;
+$color-picker-disabled-opacity: 0.5 !default;
+
+.#{iv.$class-prefix}color-picker {
+  @include cv.register-vars(
+    (
+      'color-picker-width': #{$color-picker-width},
+      'color-picker-gap': #{$color-picker-gap},
+      'color-picker-area-height': #{$color-picker-area-height},
+      'color-picker-area-radius': #{$color-picker-area-radius},
+      'color-picker-slider-height': #{$color-picker-slider-height},
+      'color-picker-track-height': #{$color-picker-track-height},
+      'color-picker-track-radius': #{$color-picker-track-radius},
+      'color-picker-thumb-size': #{$color-picker-thumb-size},
+      'color-picker-thumb-border-width': #{$color-picker-thumb-border-width},
+      'color-picker-thumb-color': #{$color-picker-thumb-color},
+      'color-picker-thumb-shadow': #{$color-picker-thumb-shadow},
+      'color-picker-edge-color': #{$color-picker-edge-color},
+      'color-picker-checker-color': #{$color-picker-checker-color},
+      'color-picker-checker-background': #{$color-picker-checker-background},
+      'color-picker-checker-size': #{$color-picker-checker-size},
+      'color-picker-swatch-size': #{$color-picker-swatch-size},
+      'color-picker-swatch-gap': #{$color-picker-swatch-gap},
+      'color-picker-swatch-radius': #{$color-picker-swatch-radius},
+      'color-picker-swatch-ring-color': #{$color-picker-swatch-ring-color},
+      'color-picker-preview-size': #{$color-picker-preview-size},
+      'color-picker-disabled-opacity': #{$color-picker-disabled-opacity},
+    )
+  );
+}
+
+// ---- The panel -------------------------------------------------------------------
+
+.#{iv.$class-prefix}color-picker {
+  display: flex;
+  flex-direction: column;
+  gap: cv.getVar('color-picker-gap');
+  inline-size: cv.getVar('color-picker-width');
+  max-inline-size: 100%;
+}
+
+// ---- The square ------------------------------------------------------------------
+
+.#{iv.$class-prefix}color-area {
+  position: relative;
+  block-size: cv.getVar('color-picker-area-height');
+  border-radius: cv.getVar('color-picker-area-radius');
+  // White to the hue across, black up from the bottom: saturation by
+  // brightness at this hue.
+  background:
+    linear-gradient(to top, #{$-black}, transparent),
+    linear-gradient(
+      to right,
+      #{$-white},
+      hsl(var(--color-picker-hue, 0) 100% 50%)
+    );
+  box-shadow: inset 0 0 0 1px cv.getVar('color-picker-edge-color');
+  cursor: crosshair;
+  // A drag moves the thumb rather than scrolling the page.
+  touch-action: none;
+  user-select: none;
+  forced-color-adjust: none;
+}
+
+// Saturation runs from the inline start, so right to left it grows leftward.
+.#{iv.$class-prefix}color-area:dir(rtl) {
+  background:
+    linear-gradient(to top, #{$-black}, transparent),
+    linear-gradient(
+      to left,
+      #{$-white},
+      hsl(var(--color-picker-hue, 0) 100% 50%)
+    );
+}
+
+// ---- The sliders -----------------------------------------------------------------
+
+.#{iv.$class-prefix}color-slider {
+  position: relative;
+  block-size: cv.getVar('color-picker-slider-height');
+  cursor: pointer;
+  touch-action: none;
+  user-select: none;
+  forced-color-adjust: none;
+}
+
+.#{iv.$class-prefix}color-slider-track {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: 50%;
+  block-size: cv.getVar('color-picker-track-height');
+  margin-block-start: calc(#{cv.getVar('color-picker-track-height')} / -2);
+  border-radius: cv.getVar('color-picker-track-radius');
+  box-shadow: inset 0 0 0 1px cv.getVar('color-picker-edge-color');
+}
+
+.#{iv.$class-prefix}color-slider.#{iv.$class-prefix}is-hue
+  .#{iv.$class-prefix}color-slider-track {
+  background: linear-gradient(to right, $-hue-stops);
+}
+
+.#{iv.$class-prefix}color-slider.#{iv.$class-prefix}is-hue
+  .#{iv.$class-prefix}color-slider-track:dir(rtl) {
+  background: linear-gradient(to left, $-hue-stops);
+}
+
+// From see-through to the solid color, over a checkerboard.
+.#{iv.$class-prefix}color-slider.#{iv.$class-prefix}is-alpha
+  .#{iv.$class-prefix}color-slider-track {
+  background:
+    linear-gradient(
+      to right,
+      rgb(var(--color-picker-rgb, 0 0 0) / 0),
+      rgb(var(--color-picker-rgb, 0 0 0))
+    ),
+    repeating-conic-gradient(
+        cv.getVar('color-picker-checker-color') 0% 25%,
+        cv.getVar('color-picker-checker-background') 0% 50%
+      )
+      0 0 / calc(#{cv.getVar('color-picker-checker-size')} * 2)
+      calc(#{cv.getVar('color-picker-checker-size')} * 2);
+}
+
+.#{iv.$class-prefix}color-slider.#{iv.$class-prefix}is-alpha
+  .#{iv.$class-prefix}color-slider-track:dir(rtl) {
+  background:
+    linear-gradient(
+      to left,
+      rgb(var(--color-picker-rgb, 0 0 0) / 0),
+      rgb(var(--color-picker-rgb, 0 0 0))
+    ),
+    repeating-conic-gradient(
+        cv.getVar('color-picker-checker-color') 0% 25%,
+        cv.getVar('color-picker-checker-background') 0% 50%
+      )
+      0 0 / calc(#{cv.getVar('color-picker-checker-size')} * 2)
+      calc(#{cv.getVar('color-picker-checker-size')} * 2);
+}
+
+// ---- Thumbs ----------------------------------------------------------------------
+
+// A ring that shows the color under it; its centre is the value.
+.#{iv.$class-prefix}color-area-thumb,
+.#{iv.$class-prefix}color-slider-thumb {
+  position: absolute;
+  inline-size: cv.getVar('color-picker-thumb-size');
+  block-size: cv.getVar('color-picker-thumb-size');
+  margin-inline-start: calc(#{cv.getVar('color-picker-thumb-size')} / -2);
+  margin-block-start: calc(#{cv.getVar('color-picker-thumb-size')} / -2);
+  border: cv.getVar('color-picker-thumb-border-width') solid
+    cv.getVar('color-picker-thumb-color');
+  border-radius: 50%;
+  box-shadow: cv.getVar('color-picker-thumb-shadow');
+  pointer-events: none;
+}
+
+.#{iv.$class-prefix}color-area-thumb {
+  inset-inline-start: var(--color-area-x, 0%);
+  inset-block-start: var(--color-area-y, 100%);
+}
+
+.#{iv.$class-prefix}color-slider-thumb {
+  inset-inline-start: var(--color-slider-position, 0%);
+  inset-block-start: 50%;
+}
+
+// The inputs that operate them, there for the keyboard and assistive tech.
+.#{iv.$class-prefix}color-area-input,
+.#{iv.$class-prefix}color-slider-input {
+  @include extras-sr-only;
+}
+
+.#{iv.$class-prefix}color-area-thumb:has(:focus-visible),
+.#{iv.$class-prefix}color-slider-thumb:has(:focus-visible) {
+  @include extras-focus-outline;
+}
+
+// ---- The value -------------------------------------------------------------------
+
+.#{iv.$class-prefix}color-picker-value {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.#{iv.$class-prefix}color-picker-value
+  > .#{iv.$class-prefix}color-picker-preview {
+  inline-size: cv.getVar('color-picker-preview-size');
+  block-size: cv.getVar('color-picker-preview-size');
+}
+
+.#{iv.$class-prefix}color-picker-value > .#{iv.$class-prefix}input {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+// ---- Swatches --------------------------------------------------------------------
+
+.#{iv.$class-prefix}color-picker-swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: cv.getVar('color-picker-swatch-gap');
+}
+
+// The button rings the swatch when it's chosen, so the choice shows as an
+// edge and a check as well as a color.
+.#{iv.$class-prefix}color-picker-swatch {
+  @include extras-button-reset;
+  display: inline-flex;
+  padding: 2px;
+  border: 2px solid transparent;
+  border-radius: calc(#{cv.getVar('color-picker-swatch-radius')} + 4px);
+  line-height: 0;
+
+  &:focus-visible {
+    @include extras-focus-outline;
+  }
+
+  .#{iv.$class-prefix}color-swatch {
+    inline-size: cv.getVar('color-picker-swatch-size');
+    block-size: cv.getVar('color-picker-swatch-size');
+    border-radius: cv.getVar('color-picker-swatch-radius');
+    color: $-ink-light;
+    font-size: calc(#{cv.getVar('color-picker-swatch-size')} * 0.75);
+  }
+
+  .#{iv.$class-prefix}color-picker-check-halo {
+    stroke: $-ink-dark;
+  }
+
+  &.#{iv.$class-prefix}is-dark-ink {
+    .#{iv.$class-prefix}color-swatch {
+      color: $-ink-dark;
+    }
+
+    .#{iv.$class-prefix}color-picker-check-halo {
+      stroke: $-ink-light;
+    }
+  }
+
+  // A see-through swatch shows the checkerboard under it, which is drawn in
+  // the scheme's colors, so the check takes the scheme's text color in a ring
+  // of its background, and follows dark mode.
+  &.#{iv.$class-prefix}is-see-through {
+    .#{iv.$class-prefix}color-swatch {
+      color: cv.getVar('text-strong');
+    }
+
+    .#{iv.$class-prefix}color-picker-check-halo {
+      stroke: cv.getVar('scheme-main');
+    }
+  }
+
+  &.#{iv.$class-prefix}is-checked {
+    border-color: cv.getVar('color-picker-swatch-ring-color');
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+// ---- Disabled --------------------------------------------------------------------
+
+.#{iv.$class-prefix}color-picker.#{iv.$class-prefix}is-disabled,
+.#{iv.$class-prefix}color-area.#{iv.$class-prefix}is-disabled,
+.#{iv.$class-prefix}color-slider.#{iv.$class-prefix}is-disabled {
+  cursor: not-allowed;
+}
+
+.#{iv.$class-prefix}color-area.#{iv.$class-prefix}is-disabled,
+.#{iv.$class-prefix}color-slider.#{iv.$class-prefix}is-disabled,
+.#{iv.$class-prefix}color-picker-swatches[aria-disabled='true'] {
+  opacity: cv.getVar('color-picker-disabled-opacity');
+}
+
+// ---- Forced colors ---------------------------------------------------------------
+
+@media (forced-colors: active) {
+  // The colors stay, edged in the system's text color.
+  .#{iv.$class-prefix}color-area,
+  .#{iv.$class-prefix}color-slider-track {
+    box-shadow: inset 0 0 0 1px CanvasText;
+  }
+
+  .#{iv.$class-prefix}color-area-thumb:has(:focus-visible),
+  .#{iv.$class-prefix}color-slider-thumb:has(:focus-visible) {
+    outline-color: Highlight;
+  }
+
+  // An unchosen swatch's border would otherwise show like the chosen one's.
+  .#{iv.$class-prefix}color-picker-swatch {
+    border-color: Canvas;
+  }
+
+  .#{iv.$class-prefix}color-picker-swatch.#{iv.$class-prefix}is-checked {
+    border-color: Highlight;
+  }
+}