@jxsuite/studio 4.0.0 → 5.0.0

package/styles/forced-colors.css

@@ -1,110 +1,76 @@
-/*
- * Forced colours (Windows High Contrast, and its equivalents).
- *
- * WHAT BREAKS, CONCRETELY. In forced-colors mode the browser replaces every author colour with a
- * value from the user's chosen system palette, and it drops `background-image` and `box-shadow`
- * outright. Most of this app's "you are here" affordances are drawn with exactly those two:
- *
- *   - the selected pane tab's underline           inset box-shadow
- *   - the Problems/dirty row marker               inset box-shadow
- *   - the media-picker selection ring             `0 0 0 1px` box-shadow
- *   - the drop-target ring                        `0 0 0 3px` box-shadow
- *
- * All four vanish, silently, and the result is an editor where nothing shows what is selected. That
- * is not a contrast problem to tune; it is a category of affordance the mode deletes. Each one is
- * therefore redrawn here with a BORDER or an OUTLINE, which forced colours keep and recolour.
- *
- * The system colour keywords (`Highlight`, `CanvasText`, `LinkText`) are the point: they resolve to
- * whatever palette the user chose, so the result honours a high-contrast theme instead of imposing
- * this app's idea of one. `-1px` outline offsets keep a redrawn ring inside the element's own box,
- * where the shadow it replaces was.
- *
- * This file loads LAST, so it wins on specificity ties without `!important` on anything but the
- * declarations forced colours would otherwise re-force.
- */
+/* GENERATED FILE — do not edit.
+   Source: styles/forced-colors.json. Regenerate with `bun run styles:sync`.
 
-@media (forced-colors: active) {
-  /* ── Selection and state markers ────────────────────────────────────────── */
+   Forced colours (Windows High Contrast, and its equivalents). In that mode the browser replaces
+   every author colour with one from the user's palette, and drops background-image and box-shadow
+   outright — so every "you are here" affordance drawn with a shadow vanishes silently, and an
+   editor where nothing shows what is selected is not a contrast problem to tune but a category of
+   affordance the mode deletes. Each is redrawn below with a border or an outline, which forced
+   colours keep and recolour, and the system keywords (Highlight, CanvasText, GrayText) resolve to
+   whatever palette the user chose rather than to this app's idea of one.
 
-  /*
-   * The pane tab's underline and the row markers. `box-shadow: inset …` is gone in this mode, so
-   * the same 2px is drawn as a border on the same edge — which forced colours keep.
-   */
-  .pane-tab[aria-selected="true"],
-  .tab--active {
-    border-bottom: 2px solid Highlight;
-  }
+   This file is linked LAST, so it wins a specificity tie without reaching for !important. Its rules
+   are emitted UNSCOPED for the same reason they were written that way: each addresses elements
+   across the whole app rather than one element's own subtree. */
 
-  .notification-row--problem,
-  .problem-row {
+/* The Problems and dirty row markers, drawn with the same inset shadow and lost the same way.
+   `.problem-row` left this list when the Problems panel became a document: its marker is the
+   document's own `[part="row"][data-severity]` rule, which draws a border rather than a shadow and
+   so survives the mode without help. */
+@media (forced-colors: active) {
+  .notification-row--problem {
     border-left: 2px solid Highlight;
   }
-
-  /* A media-picker or grid selection ring, redrawn as an outline. */
-  .media-item--selected,
-  .media-tile--selected,
-  [aria-selected="true"] {
-    outline: 2px solid Highlight;
-    outline-offset: -2px;
-  }
-
-  /* The rail's gear while its menu is open. That state is drawn with a `background`, which this
-     mode re-forces to the system canvas — so it says nothing. An outline says it instead. */
-  .rail-item--menu-open {
-    outline: 2px solid Highlight;
-    outline-offset: -2px;
+}
+/* The pane tab's underline. `box-shadow: inset …` is gone in this mode, so the same 2px is drawn
+   as a border on the same edge — which forced colours keep. */
+@media (forced-colors: active) {
+  .pane-tab[aria-selected="true"],
+  .tab--active {
+    border-bottom: 2px solid Highlight;
   }
-
-  /* The drop target. A 3px translucent ring is invisible here twice over — shadow and alpha. */
+}
+/* The drop target. A 3px translucent ring is invisible here twice over — shadow and alpha. */
+@media (forced-colors: active) {
   .drop-target,
   .is-drop-target {
     outline: 3px solid Highlight;
     outline-offset: -3px;
   }
-
-  /* ── Focus ──────────────────────────────────────────────────────────────── */
-
-  /*
-   * Keyboard focus must survive whatever a component drew it with. `Highlight` is the palette's
-   * own focus colour, and the offset puts the ring outside the control rather than over its label.
-   */
+}
+/* Keyboard focus must survive whatever a component drew it with. `Highlight` is the palette's own
+   focus colour, and the offset puts the ring outside the control rather than over its label. */
+@media (forced-colors: active) {
   :focus-visible {
     outline: 2px solid Highlight;
     outline-offset: 2px;
   }
-
-  /* ── The canvas ─────────────────────────────────────────────────────────── */
-
-  /*
-   * The canvas renders the USER'S OWN DOCUMENT, and forcing colours over it would misrepresent
-   * what they are building: an author in high-contrast mode would see their site's palette replaced
-   * by the system's and have no way to tell what visitors see. `forced-color-adjust: none` opts the
-   * artboard — and only the artboard — back out. Every affordance the editor draws ON TOP of it
-   * (selection outlines, hover rules, the grid) lives outside this element and keeps the mode.
-   */
+}
+/* The canvas renders the USER'S OWN DOCUMENT, and forcing colours over it would misrepresent what
+   they are building: an author in high-contrast mode would see their site's palette replaced by
+   the system's and have no way to tell what visitors see. `forced-color-adjust: none` opts the
+   artboard — and only the artboard — back out. Every affordance the editor draws ON TOP of it
+   (selection outlines, hover rules, the grid) lives outside this element and keeps the mode. */
+@media (forced-colors: active) {
   .artboard,
   .canvas-frame,
   iframe.canvas-iframe {
     forced-color-adjust: none;
   }
-
-  /* ── Affordances drawn only with colour ─────────────────────────────────── */
-
-  /*
-   * A dot or a bar whose whole meaning is its fill loses that meaning when every fill becomes the
-   * same system colour. A border restores the shape distinction the fill was carrying.
-   */
+}
+/* A dot or a bar whose whole meaning is its fill loses that meaning when every fill becomes the
+   same system colour. A border restores the shape distinction the fill was carrying. */
+@media (forced-colors: active) {
   .status-dot,
   .severity-dot,
   .provenance-chip {
     border: 1px solid CanvasText;
   }
-
-  /*
-   * Disabled controls: forced colours map them to `GrayText`, which the browser will apply — but
-   * only if the app has not painted over it with an opacity trick. Opacity is not a colour, so it
-   * survives the mode and stacks with GrayText into something unreadable.
-   */
+}
+/* Disabled controls: forced colours map them to `GrayText`, which the browser will apply — but
+   only if the app has not painted over it with an opacity trick. Opacity is not a colour, so it
+   survives the mode and stacks with GrayText into something unreadable. */
+@media (forced-colors: active) {
   [disabled],
   [aria-disabled="true"] {
     opacity: 1;

package/styles/forced-colors.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StudioForcedColors",
+  "$description": "Studio's forced-colours block. `styles/forced-colors.css` is GENERATED from this by `scripts/build-tokens.ts`; edit this file and run `bun run styles:sync`. It is emitted UNSCOPED, so each selector reaches the same elements it always did, and it is linked LAST so it still wins a specificity tie without reaching for `!important`.",
+  "tagName": "html",
+  "style": {
+    "@(forced-colors: active)": {
+      ".notification-row--problem": {
+        "$description": "The Problems and dirty row markers, drawn with the same inset shadow and lost the same way. `.problem-row` left this list when the Problems panel became a document: its marker is the document's own `[part=\"row\"][data-severity]` rule, which draws a border rather than a shadow and so survives the mode without help.",
+        "border-left": "2px solid Highlight"
+      },
+      ".pane-tab[aria-selected=\"true\"], .tab--active": {
+        "$description": "The pane tab's underline. `box-shadow: inset …` is gone in this mode, so the same 2px is drawn as a border on the same edge — which forced colours keep.",
+        "border-bottom": "2px solid Highlight"
+      },
+      ".drop-target, .is-drop-target": {
+        "$description": "The drop target. A 3px translucent ring is invisible here twice over — shadow and alpha.",
+        "outline": "3px solid Highlight",
+        "outline-offset": "-3px"
+      },
+      ":focus-visible": {
+        "$description": "Keyboard focus must survive whatever a component drew it with. `Highlight` is the palette's own focus colour, and the offset puts the ring outside the control rather than over its label.",
+        "outline": "2px solid Highlight",
+        "outline-offset": "2px"
+      },
+      ".artboard, .canvas-frame, iframe.canvas-iframe": {
+        "$description": "The canvas renders the USER'S OWN DOCUMENT, and forcing colours over it would misrepresent what they are building: an author in high-contrast mode would see their site's palette replaced by the system's and have no way to tell what visitors see. `forced-color-adjust: none` opts the artboard — and only the artboard — back out. Every affordance the editor draws ON TOP of it (selection outlines, hover rules, the grid) lives outside this element and keeps the mode.",
+        "forced-color-adjust": "none"
+      },
+      ".status-dot, .severity-dot, .provenance-chip": {
+        "$description": "A dot or a bar whose whole meaning is its fill loses that meaning when every fill becomes the same system colour. A border restores the shape distinction the fill was carrying.",
+        "border": "1px solid CanvasText"
+      },
+      "[disabled], [aria-disabled=\"true\"]": {
+        "$description": "Disabled controls: forced colours map them to `GrayText`, which the browser will apply — but only if the app has not painted over it with an opacity trick. Opacity is not a colour, so it survives the mode and stacks with GrayText into something unreadable.",
+        "opacity": "1",
+        "color": "GrayText"
+      }
+    }
+  }
+}