@ropav/styles 0.3.0 → 0.4.0

package/dist/components/number-field.css

@@ -18,6 +18,14 @@
   @apply grid h-9 items-center overflow-hidden rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none;
   border-width: var(--border-width-field);
   border-color: var(--field-border);
+
+  /* Forced Colors Mode flattens the fill onto the page and strips the shadow, leaving a control
+   * with nothing to say it is one. `ButtonBorder` is the keyword the platform uses for a
+   * control's edge. */
+  @media (forced-colors: active) {
+    outline: 1px solid ButtonBorder;
+    outline-offset: -1px;
+  }
   grid-template-columns: 1fr;
 
   &:has([slot="decrement"]) {

package/dist/components/pagination.css

@@ -79,6 +79,10 @@
     --pagination-link-bg: var(--default);
     --pagination-link-bg-hover: var(--default-hover);
     --pagination-link-bg-pressed: var(--default-hover);
+
+    /* The active page is a background and nothing else, and an inactive link is transparent -
+     * forced colors flattens the first onto the page and leaves the pair identical. */
+    @apply forced-selected;
   }
 }
 

package/dist/components/progress-bar.css

@@ -32,6 +32,14 @@
 
     /* Default height (matches --md) */
     @apply h-2;
+
+    /* Track and fill are both plain backgrounds, so forced colors flattens the pair onto the
+     * page and the whole bar stops rendering. */
+    @media (forced-colors: active) {
+      background-color: Canvas;
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
   }
 
   .progress-bar__fill {
@@ -39,6 +47,10 @@
 
     background-color: var(--progress-bar-fill);
 
+    @media (forced-colors: active) {
+      background-color: Highlight;
+    }
+
     /**
      * Transitions
      * CRITICAL: motion-reduce must be AFTER transition for correct override specificity

package/dist/components/progress-circle.css

@@ -17,11 +17,23 @@
 
   .progress-circle__track-circle {
     stroke: var(--progress-circle-track-stroke);
+
+    /* Forced colors leaves SVG strokes alone, so the ring renders but in the library's own
+     * palette rather than the user's. The track steps out of the way entirely: every keyword
+     * dark enough to read against `Canvas` is also close enough to `Highlight` to swallow the
+     * arc in one palette or the other, and the arc is the part carrying the value. */
+    @media (forced-colors: active) {
+      stroke: Canvas;
+    }
   }
 
   .progress-circle__fill-circle {
     stroke: var(--progress-circle-stroke);
 
+    @media (forced-colors: active) {
+      stroke: Highlight;
+    }
+
     /**
      * Transitions
      * CRITICAL: motion-reduce must be AFTER transition for correct override specificity

package/dist/components/radio.css

@@ -162,6 +162,13 @@
 .radio:has(input:checked) .radio__indicator:empty::before {
   @apply bg-accent-foreground;
   scale: 0.4286; /* 6px */
+
+  /* Forced Colors Mode paints the control and this dot the same `Canvas`, which leaves a
+   * checked radio looking exactly like an unchecked one - the scale change shows nothing on
+   * its own. */
+  @media (forced-colors: active) {
+    background-color: CanvasText;
+  }
 }
 
 /* Selected + Pressed state */

package/dist/components/range-calendar.css

@@ -218,6 +218,12 @@
   &[data-today="true"] {
     .range-calendar__cell-button {
       @apply bg-accent-soft text-accent-soft-foreground;
+
+      /* An edge rather than a fill, so today still reads as itself once it is also in range */
+      @media (forced-colors: active) {
+        outline: 1px solid CanvasText;
+        outline-offset: -1px;
+      }
     }
 
     @media (hover: hover) {
@@ -233,6 +239,20 @@
   /* Range selected track (middle segment) */
   &[data-selected="true"]:not([data-outside-month="true"]) {
     @apply rounded-none bg-accent-soft;
+
+    /* The track is a background and nothing else, so Forced Colors Mode flattens it into the
+     * page and the range stops being visible. The day button declares its own `color`, so
+     * `HighlightText` has to be restated there rather than left to inherit. */
+    @media (forced-colors: active) {
+      background-color: Highlight;
+
+      .range-calendar__cell-button {
+        /* Suppresses the `Canvas` backplate behind the day number, which would otherwise cover
+         * the track and leave the digits invisible against it. */
+        forced-color-adjust: none;
+        color: HighlightText;
+      }
+    }
   }
 
   /* Round row boundaries so the range track looks continuous across weeks */
@@ -257,6 +277,14 @@
 
     .range-calendar__cell-button {
       @apply bg-accent text-accent-foreground;
+
+      /* Caps read the same as the track here. Forced colors offers one selection colour, and
+       * spending it on the shape that matters - the range - beats splitting it. */
+      @media (forced-colors: active) {
+        forced-color-adjust: none;
+        background-color: Highlight;
+        color: HighlightText;
+      }
     }
   }
 

package/dist/components/search-field.css

@@ -25,6 +25,14 @@
   border-width: var(--border-width-field);
   border-color: var(--field-border);
 
+  /* Forced Colors Mode flattens the fill onto the page and strips the shadow, leaving a control
+   * with nothing to say it is one. `ButtonBorder` is the keyword the platform uses for a
+   * control's edge. */
+  @media (forced-colors: active) {
+    outline: 1px solid ButtonBorder;
+    outline-offset: -1px;
+  }
+
   /**
    * Transitions
    * CRITICAL: motion-reduce must be AFTER transition for correct override specificity

package/dist/components/select.css

@@ -17,6 +17,15 @@
 .select__trigger {
   @apply relative isolate inline-flex min-h-9 rounded-field border bg-field px-3 py-2 text-sm text-field-foreground shadow-field outline-none select-none no-highlight;
 
+  /* Forced Colors Mode flattens the fill onto the page and strips the shadow, leaving a field that
+   * reads as bare text - `--border-width-field` is 0, so the declared border brings nothing back on
+   * its own. An outline rather than a width so nothing shifts, and the focus ring replaces it while
+   * focused, which is the right order of importance. */
+  @media (forced-colors: active) {
+    outline: 1px solid ButtonBorder;
+    outline-offset: -1px;
+  }
+
   /**
    * Transitions
    * CRITICAL: motion-reduce must be AFTER transition for correct override specificity

package/dist/components/separator.css

@@ -17,17 +17,34 @@
   @apply h-auto min-h-2 w-px self-stretch;
 }
 
-/* Color variants */
+/* Color variants
+ *
+ * The whole separator *is* its background, so Forced Colors Mode flattening it onto the page
+ * removes the rule entirely rather than weakening it. Each variant restates the fallback because
+ * each one sets `background-color` after the base rule and would otherwise win. All three land on
+ * the same ink - the mode has no second tier to give them. */
 .separator--default {
   @apply bg-separator;
+
+  @media (forced-colors: active) {
+    background-color: CanvasText;
+  }
 }
 
 .separator--secondary {
   @apply bg-separator-secondary;
+
+  @media (forced-colors: active) {
+    background-color: CanvasText;
+  }
 }
 
 .separator--tertiary {
   @apply bg-separator-tertiary;
+
+  @media (forced-colors: active) {
+    background-color: CanvasText;
+  }
 }
 
 .separator__container {

package/dist/components/skeleton.css

@@ -1,5 +1,14 @@
 .skeleton {
   @apply pointer-events-none relative overflow-hidden rounded-sm bg-surface-tertiary/70;
+
+  /* Forced Colors Mode flattens the fill to `Canvas` - the same colour as the page behind it -
+   * and drops the shimmer gradient outright, so the placeholder disappears entirely. An inset
+   * outline is what is left to say something is loading here, and unlike a border it costs no
+   * layout. */
+  @media (forced-colors: active) {
+    outline: 1px solid GrayText;
+    outline-offset: -1px;
+  }
 }
 
 /* TODO: Skeleton with parent are not visible */

package/dist/components/slider.css

@@ -24,16 +24,37 @@
     @apply relative rounded-xl bg-default;
 
     grid-area: track;
+
+    /* Forced Colors Mode flattens the bar to `Canvas`, the colour of the page behind it, so
+     * the track stops existing - hence the edge. The spacer borders are dealt with per
+     * orientation below, which is where they are set. */
+    @media (forced-colors: active) {
+      background-color: Canvas;
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
   }
 
   .slider__fill {
     @apply pointer-events-none absolute bg-accent;
+
+    /* The only thing showing how far along the value is */
+    @media (forced-colors: active) {
+      background-color: Highlight;
+    }
   }
 
   .slider__thumb {
     /* Flex container for centering pseudo-elements */
     @apply absolute flex cursor-grab items-center justify-center rounded-xl bg-accent no-highlight;
 
+    /* The wrapper is the fill colour in ordinary use, which hides it against the fill. Flattened
+     * to `Canvas` it would punch a hole through the fill instead, so it steps back and lets
+     * `::after` - the knob you actually see - carry the control. */
+    @media (forced-colors: active) {
+      background-color: transparent;
+    }
+
     /**
    * Transitions
    * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
@@ -49,6 +70,15 @@
       @apply relative z-10 rounded-lg bg-accent-foreground text-black shadow-field;
       content: "";
 
+      /* Both the knob's fill and the shadow that separates it from the track are gone under
+       * forced colors. `Canvas` inside a `CanvasText` ring reads against the bare track on one
+       * side and the `Highlight` fill on the other, which no single flat colour manages. */
+      @media (forced-colors: active) {
+        background-color: Canvas;
+        outline: 2px solid CanvasText;
+        outline-offset: -2px;
+      }
+
       /**
        * Transitions
        */
@@ -96,12 +126,29 @@
       /* Thumb width is 1.5rem (24px), so half is 0.75rem (12px) */
       @apply border-x-[0.75rem] border-x-transparent;
 
+      /* A transparent border-color is one of the few things forced colors turns *opaque*, so
+       * without this the two spacers render as solid blocks at either end of the track. */
+      @media (forced-colors: active) {
+        border-inline-start-color: Canvas;
+        border-inline-end-color: Canvas;
+      }
+
       &[data-fill-start="true"] {
         @apply border-s-accent;
+
+        /* Carries the fill past the spacer to the end of the bar, so it has to be the fill
+         * colour rather than the `Canvas` the base rule neutralises the spacers with. */
+        @media (forced-colors: active) {
+          border-inline-start-color: Highlight;
+        }
       }
 
       &[data-fill-end="true"] {
         @apply border-e-accent;
+
+        @media (forced-colors: active) {
+          border-inline-end-color: Highlight;
+        }
       }
     }
 
@@ -150,12 +197,26 @@
       @apply border-y-[0.75rem] border-y-transparent;
       justify-self: center;
 
+      /* Same as the horizontal spacers - opaque without this */
+      @media (forced-colors: active) {
+        border-top-color: Canvas;
+        border-bottom-color: Canvas;
+      }
+
       &[data-fill-start="true"] {
         @apply border-b-accent;
+
+        @media (forced-colors: active) {
+          border-bottom-color: Highlight;
+        }
       }
 
       &[data-fill-end="true"] {
         @apply border-t-accent;
+
+        @media (forced-colors: active) {
+          border-top-color: Highlight;
+        }
       }
     }
 

package/dist/components/surface.css

@@ -12,12 +12,36 @@
 
 .surface--default {
   @apply bg-surface text-surface-foreground;
+
+  /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container
+   * stops having any shape - its contents just sit loose on the page. An outline rather than a
+   * border so nothing shifts, and it follows the radius the component sets. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
 }
 
 .surface--secondary {
   @apply bg-surface-secondary text-surface-secondary-foreground;
+
+  /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container
+   * stops having any shape - its contents just sit loose on the page. An outline rather than a
+   * border so nothing shifts, and it follows the radius the component sets. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
 }
 
 .surface--tertiary {
   @apply bg-surface-tertiary text-surface-tertiary-foreground;
+
+  /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container
+   * stops having any shape - its contents just sit loose on the page. An outline rather than a
+   * border so nothing shifts, and it follows the radius the component sets. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
 }

package/dist/components/switch.css

@@ -23,6 +23,10 @@
 
     .switch__thumb {
       @apply bg-default-foreground/20;
+
+      @media (forced-colors: active) {
+        background-color: GrayText;
+      }
     }
   }
 
@@ -95,6 +99,15 @@
     box-shadow 150ms var(--ease-out);
   @apply motion-reduce:transition-none;
 
+  /* Forced Colors Mode paints the track and the thumb the same `Canvas`, so the thumb vanishes
+   * inside the track and the switch stops showing its state - the position it moved to is not
+   * visible on a shape that has no visible edge. Give the track a border, then pair each track
+   * colour with the thumb colour the platform means to sit on it. */
+  @media (forced-colors: active) {
+    background-color: Canvas;
+    border: 1px solid ButtonBorder;
+  }
+
   /* Focus states */
   .switch:focus-visible &,
   .switch:has([data-slot="switch-content"][data-focus-visible="true"]) &,
@@ -121,6 +134,11 @@
   .switch[aria-checked="true"] &,
   .switch[data-selected="true"] & {
     background-color: var(--switch-control-bg-checked);
+
+    @media (forced-colors: active) {
+      background-color: Highlight;
+      border-color: Highlight;
+    }
   }
 
   /* Checked + Hover states */
@@ -170,6 +188,13 @@
   height: 1rem; /* ~14px on desktop, ~16px on mobile */
   width: 1.375rem; /* ~19px on desktop, ~22px on mobile */
 
+  /* Reads against the `Canvas` track the control falls back to; the `color` carries any icon
+   * slotted inside, which would otherwise be `CanvasText` on `CanvasText`. */
+  @media (forced-colors: active) {
+    background-color: CanvasText;
+    color: Canvas;
+  }
+
   /**
    * Transitions
    * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
@@ -187,6 +212,11 @@
       0px 0px 5px 0px rgb(0 0 0 / 0.02),
       0px 2px 10px 0px rgb(0 0 0 / 0.06),
       0px 0px 1px 0px rgb(0 0 0 / 0.3);
+
+    @media (forced-colors: active) {
+      background-color: HighlightText;
+      color: Highlight;
+    }
   }
 
   .switch:active &,

package/dist/components/table.css

@@ -25,6 +25,13 @@
 .table-root--primary {
   @apply bg-surface-secondary px-1 pb-1;
   border-radius: min(32px, calc(var(--radius) * 2.5));
+
+  /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container
+   * stops having any shape and its contents sit loose on the page. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
 }
 
 .table-root--secondary {
@@ -232,6 +239,7 @@
   /* Selected state */
   &[data-selected="true"] .table__cell {
     @apply bg-surface/10;
+    @apply forced-selected;
   }
 
   /* Disabled state */

package/dist/components/tabs.css

@@ -141,6 +141,14 @@
   &[data-selected="true"] {
     @apply text-segment-foreground;
 
+    /* Sits on top of the indicator, which forced colors paints `Highlight`. `forced-color-adjust`
+     * suppresses the `Canvas` backplate Chromium would otherwise paint behind this label - it
+     * covers the indicator, and black-on-black is exactly what it would leave. */
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      color: HighlightText;
+    }
+
     /* Hide separator on the selected tab and the one following it */
     .tabs__separator,
     & + .tabs__tab .tabs__separator {
@@ -217,6 +225,13 @@
 
   z-index: -1;
 
+  /* The indicator is a background and nothing else, so Forced Colors Mode flattens it away
+   * and nothing marks the selected tab. `Highlight` behind `HighlightText` is the platform's
+   * own pairing for a selected segment. */
+  @media (forced-colors: active) {
+    background-color: Highlight;
+  }
+
   /**
    * Transitions
    * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
@@ -254,12 +269,25 @@
       /* Selected state - use text-foreground */
       &[data-selected="true"] {
         @apply text-foreground;
+
+        /* Here the indicator is a line under the tab rather than a pill behind it, so the
+         * label keeps the ordinary text colour instead of the base variant's
+         * `HighlightText`, which would be invisible against the page. */
+        @media (forced-colors: active) {
+          color: CanvasText;
+        }
       }
     }
 
     /* Tab indicator - line style */
     .tabs__indicator {
       @apply rounded-none bg-accent shadow-none;
+
+      /* `bg-accent` outranks the base rule's forced-colors fallback and is itself flattened
+       * to `Canvas`, so the underline has to be restated here or it disappears. */
+      @media (forced-colors: active) {
+        background-color: Highlight;
+      }
     }
   }
 

package/dist/components/tag.css

@@ -19,6 +19,15 @@
   /* Cursor */
   cursor: var(--cursor-interactive);
 
+  /* Forced Colors Mode flattens the fill onto the page and strips the shadow, leaving a control
+   * that reads as bare text. `ButtonBorder` is the keyword the platform uses for a control's
+   * edge; an outline rather than a border so nothing shifts, and the focus ring replaces it
+   * while focused, which is the right order of importance. */
+  @media (forced-colors: active) {
+    outline: 1px solid ButtonBorder;
+    outline-offset: -1px;
+  }
+
   /* SVG icon styling */
   & svg {
     @apply pointer-events-none size-3 shrink-0 self-center text-current;
@@ -42,6 +51,7 @@
 /* Selected state */
 .tag:is([data-selected="true"], [aria-selected="true"]) {
   @apply bg-accent-soft text-accent-soft-foreground;
+  @apply forced-selected;
 
   /* Selected + Hover state */
   @media (hover: hover) {

package/dist/components/textarea.css

@@ -7,6 +7,16 @@
   border-width: var(--border-width-field);
   border-color: var(--field-border);
 
+  /* Forced Colors Mode flattens the fill onto the page and strips the shadow, leaving a field that
+   * reads as bare text - `--border-width-field` is 0, so the declared border brings nothing
+   * back on its own. `ButtonBorder` is the keyword the platform uses for a control's
+   * edge; an outline rather than a border so nothing shifts, and the focus ring replaces it
+   * while focused, which is the right order of importance. */
+  @media (forced-colors: active) {
+    outline: 1px solid ButtonBorder;
+    outline-offset: -1px;
+  }
+
   /**
    * Transitions
    * CRITICAL: motion-reduce must be AFTER transition for correct override specificity

package/dist/components/toggle-button.css

@@ -16,6 +16,15 @@
     box-shadow 100ms var(--ease-out);
   @apply transform-gpu motion-reduce:transition-none;
 
+  /* Forced Colors Mode flattens the fill onto the page and strips the shadow, leaving a control
+   * that reads as bare text. `ButtonBorder` is the keyword the platform uses for a control's
+   * edge; an outline rather than a border so nothing shifts, and the focus ring replaces it
+   * while focused, which is the right order of importance. */
+  @media (forced-colors: active) {
+    outline: 1px solid ButtonBorder;
+    outline-offset: -1px;
+  }
+
   /* Cursor */
   cursor: var(--cursor-interactive);
 
@@ -65,6 +74,7 @@
   &[data-selected="true"] {
     background-color: var(--toggle-button-bg-selected);
     color: var(--toggle-button-fg-selected);
+    @apply forced-selected;
 
     @media (hover: hover) {
       &:hover,

package/dist/components/toolbar.css

@@ -29,4 +29,11 @@
 /* Attached variant */
 .toolbar--attached {
   @apply rounded-3xl bg-surface p-1 shadow-overlay;
+
+  /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container
+   * stops having any shape and its contents sit loose on the page. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
 }

package/dist/components/typography.css

@@ -36,6 +36,13 @@
 
 .typography-prose code {
   @apply rounded-md bg-default px-1.5 py-0.5 font-mono text-sm text-foreground;
+
+  /* Code is marked out by a tinted background and nothing else, so forced colors leaves it
+   * indistinguishable from the prose around it - the monospace face is all that is left. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
 }
 
 .typography-prose a {
@@ -64,6 +71,13 @@
 
 .typography-prose pre {
   @apply my-4 overflow-x-auto rounded-xl bg-default p-4 font-mono text-sm leading-relaxed;
+
+  /* Code is marked out by a tinted background and nothing else, so forced colors leaves it
+   * indistinguishable from the prose around it - the monospace face is all that is left. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
 }
 
 .typography-prose strong {
@@ -116,6 +130,13 @@
 
 .typography--code {
   @apply rounded-md bg-default px-1.5 py-0.5 font-mono text-sm text-foreground;
+
+  /* Code is marked out by a tinted background and nothing else, so forced colors leaves it
+   * indistinguishable from the prose around it - the monospace face is all that is left. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
 }
 
 .typography--align-start {

package/dist/index.css

@@ -13,8 +13,13 @@
 /* Base component structures (unstyled) */
 @import "./components/index.css" layer(components);
 
-/* Default theme (variables + component customizations) */
-@import "./themes/default/index.css" layer(theme);
+/* Maps the theme tokens onto Tailwind's namespaces - @see https://tailwindcss.com/docs/theme.
+ * Must stay unlayered: Tailwind only picks up `@theme` outside a cascade layer. */
+@import "./themes/shared/theme.css";
+
+/* Default theme. Declares its own `@layer theme`; the bundled alternatives in
+ * `themes/*.css` are opt-in and layer themselves the same way. */
+@import "./themes/default.css";
 
 /* Utilities */
 @import "./utilities/index.css";