@reliability-design/web 1.4.7 → 1.4.8

package/dist/styles/focus-ring.ts

@@ -0,0 +1,84 @@
+import { css } from "lit";
+
+/**
+ * The composed focus ring (S1).
+ *
+ * Figma draws focus as up to two concentric strokes, and several components
+ * also draw a hover / dragged stroke on the same edge. Implementing those as
+ * per-component `outline` + `box-shadow` pairs does not work: `box-shadow` is
+ * a single property, so a `:hover` rule that sets it wipes the focus ring a
+ * `:focus-visible` rule set, and specificity decides the winner rather than
+ * intent. rel-chip hit exactly this (its subtle tones set `border-color` on
+ * hover, and moving that to an inset shadow clobbered the inner focus ring).
+ *
+ * So the layers are composed ONCE here, and every state rule contributes by
+ * setting a custom property instead of re-declaring `box-shadow`. Widths
+ * default to `0px`, so a layer costs nothing until a state turns it on, and
+ * hover / dragged / focus can all be active at the same time.
+ *
+ *   --_rel-ring-w / -c          outer ring  (Figma strokeAlign=OUTSIDE)
+ *   --_rel-ring-inner-w / -c    inner ring  (Figma strokeAlign=INSIDE)
+ *   --_rel-ring-stroke-w / -c   hover / dragged stroke, also INSIDE
+ *   --_rel-ring-elevation       the element's own box-shadow, if it has one
+ *
+ * ## Why the outer ring is an `outline` and not another shadow layer
+ *
+ * `box-shadow` is not painted in forced-colors mode (Windows High Contrast),
+ * but `outline` is, and the UA forces it to the user's highlight colour. A
+ * ring built entirely from shadows therefore disappears for exactly the users
+ * who most depend on it — a WCAG 2.4.11 failure. Keeping the OUTER ring on
+ * `outline` means focus stays visible there even though the inner ring and the
+ * hover stroke (both decorative refinements) drop out. `outline` also never
+ * affects layout, and at `outline-offset: 0` it sits flush against the border
+ * box, which is precisely what strokeAlign=OUTSIDE means.
+ *
+ * ## Usage
+ *
+ *   static styles = [focusRing, css`…`];
+ *
+ * Put `class="rel-ring"` on the element that carries the ring, then drive it
+ * from state rules:
+ *
+ *   .chip:has(.chip-action:focus-visible) { --_rel-ring-w: 1.5px; --_rel-ring-inner-w: 1px; }
+ *   .chip:hover                           { --_rel-ring-stroke-w: 1px; --_rel-ring-stroke-c: …; }
+ *
+ * Recipe A (button, chip, checkbox, radio, switch): outer `--rel-border-focus`
+ * at 1.5px, plus `--rel-border-focus-inner` INSIDE on filled styles only —
+ * 2px on button, 1px on chip and switch.
+ *
+ * Recipe B (textfield, select, otp, picker triggers): keep the resting 1px
+ * hairline and draw `--rel-border-strong` 2px outside it. Recipe B needs only
+ * the outer ring here; the hairline stays the element's own `border`.
+ *
+ * An element that already has a shadow (elevation) must hand it over as
+ * `--_rel-ring-elevation` instead of declaring `box-shadow` itself, or the
+ * composed declaration below will replace it.
+ */
+export const focusRing = css`
+  :host {
+    --_rel-ring-w: 0px;
+    --_rel-ring-c: var(--rel-border-focus);
+    --_rel-ring-inner-w: 0px;
+    --_rel-ring-inner-c: var(--rel-border-focus-inner);
+    --_rel-ring-stroke-w: 0px;
+    --_rel-ring-stroke-c: transparent;
+    --_rel-ring-elevation: 0 0 #0000;
+  }
+
+  .rel-ring {
+    outline: var(--_rel-ring-w) solid var(--_rel-ring-c);
+    outline-offset: 0;
+    box-shadow:
+      inset 0 0 0 var(--_rel-ring-stroke-w) var(--_rel-ring-stroke-c),
+      inset 0 0 0 var(--_rel-ring-inner-w) var(--_rel-ring-inner-c),
+      var(--_rel-ring-elevation);
+  }
+
+  /* Both inset layers are dropped here by the UA; the outer ring carries the
+     whole indication, so force it to the system highlight colour. */
+  @media (forced-colors: active) {
+    .rel-ring {
+      outline-color: Highlight;
+    }
+  }
+`;

package/dist/styles/vars.css

@@ -1,5 +1,5 @@
 /* AUTO-GENERATED by figma-pipeline/scripts/build-vars.ts — DO NOT EDIT */
-/* Source: figma-pipeline/tokens/{primitives, color tokens}/*.tokens.json (RelDS_A1 V2) */
+/* Source: figma-pipeline/tokens/{primitives, dimensions, color tokens, typography tokens}/*.tokens.json */
 /* Contains: color + foundation primitives, semantic color tokens (light/dark). */
 
 :root {
@@ -9,7 +9,6 @@
   --rel-colors-gray-100: #E5E5E5;
   --rel-colors-gray-200: #C2C2C2;
   --rel-colors-gray-300: #A3A3A3;
-  --rel-colors-gray-350: #8C8C8C;
   --rel-colors-gray-400: #7D7D7D;
   --rel-colors-gray-500: #525252;
   --rel-colors-gray-600: #404040;
@@ -23,7 +22,7 @@
   --rel-colors-green-50: #EDF8F4;
   --rel-colors-green-100: #D5F1E7;
   --rel-colors-green-200: #91D9BF;
-  --rel-colors-green-300: #5FC9A3;
+  --rel-colors-green-300: #30B887;
   --rel-colors-green-400: #30B887;
   --rel-colors-green-500: #00A86B;
   --rel-colors-green-600: #008655;
@@ -366,17 +365,23 @@
   --rel-action-md-letter-spacing: var(--rel-fonts-letter-spacing-xs);
 
   /* ==================== CARRY-FORWARD (not in Figma export) ==================== */
-  /* --- shadows (carry-forward) --- */
+  /* --- shadows (carry-forward, DEPRECATED — no Figma origin; repoint to xs–2xl) --- */
   --rel-shadows-shadow-100: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
   --rel-shadows-shadow-200: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 2px 6px 2px rgba(0,0,0,0.15);
   --rel-shadows-shadow-300: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 4px 8px 3px rgba(0,0,0,0.15);
   --rel-shadows-shadow-400: 0px 2px 3px 0px rgba(0,0,0,0.3), 0px 6px 10px 4px rgba(0,0,0,0.15);
   --rel-shadows-shadow-500: 0px 4px 4px 0px rgba(0,0,0,0.3), 0px 8px 12px 6px rgba(0,0,0,0.15);
-  /* --- shadows (Figma effect styles shadow/sm, shadow/md) --- */
+  /* --- shadows (Figma effect styles shadow/xs … shadow/2xl) --- */
+  --rel-shadows-xs: 0 0 1px rgba(11,11,11,0.20), 0 1px 2px rgba(11,11,11,0.10);
   --rel-shadows-sm: 0 2px 4px rgba(11,11,11,0.10);
   --rel-shadows-md: 0 4px 8px rgba(11,11,11,0.10);
-  /* --- overlay (carry-forward) --- */
-  --rel-overlay-scrim: rgba(0,0,0,0.5);
+  --rel-shadows-lg: 0 8px 16px rgba(11,11,11,0.10);
+  --rel-shadows-xl: 0 0 1px rgba(11,11,11,0.30), 0 16px 24px rgba(11,11,11,0.10);
+  --rel-shadows-2xl: 0 0 1px rgba(11,11,11,0.30), 0 24px 40px rgba(11,11,11,0.10);
+  /* --- shadow colour (ADDED: no Figma variable; drop-shadow() needs a bare color) --- */
+  --rel-shadow-color: rgba(11,11,11,0.10);
+  /* --- overlay (DEPRECATED alias — bind --rel-bg-overlay-scrim) --- */
+  --rel-overlay-scrim: var(--rel-bg-overlay-scrim);
 
   /* ==================== SEMANTIC — LIGHT ==================== */
   /* --- bg --- */
@@ -407,46 +412,48 @@
   --rel-bg-success-light: var(--rel-colors-green-50);
   --rel-bg-success: var(--rel-colors-green-500);
   --rel-bg-success-strong: var(--rel-colors-green-800);
+  --rel-bg-overlay-scrim: var(--rel-colors-dark-alpha-8);
 
   /* --- text --- */
   --rel-text-static-light: var(--rel-colors-gray-0);
   --rel-text-static-dark: var(--rel-colors-gray-950);
   --rel-text-default: var(--rel-colors-gray-950);
   --rel-text-label: var(--rel-colors-gray-700);
-  --rel-text-body: var(--rel-colors-gray-500);
+  --rel-text-body: var(--rel-colors-gray-600);
   --rel-text-caption: var(--rel-colors-gray-500);
-  --rel-text-placeholder: var(--rel-colors-gray-500);
+  --rel-text-placeholder: var(--rel-colors-gray-300);
   --rel-text-disabled: var(--rel-colors-gray-200);
   --rel-text-inverse: var(--rel-colors-gray-0);
   --rel-text-danger: var(--rel-colors-red-600);
   --rel-text-warning: var(--rel-colors-yellow-800);
-  --rel-text-info: var(--rel-colors-blue-700);
-  --rel-text-success: var(--rel-colors-green-700);
+  --rel-text-info: var(--rel-colors-blue-500);
+  --rel-text-success: var(--rel-colors-green-600);
 
   /* --- border --- */
   --rel-border-default: var(--rel-colors-gray-100);
   --rel-border-subtle: var(--rel-colors-gray-50);
-  --rel-border-accent: var(--rel-colors-gray-350);
+  --rel-border-accent: var(--rel-colors-gray-200);
   --rel-border-strong: var(--rel-colors-gray-950);
   --rel-border-inverse: var(--rel-colors-gray-0);
   --rel-border-brand: var(--rel-colors-brand-500);
   --rel-border-success-subtle: var(--rel-colors-green-100);
-  --rel-border-success: var(--rel-colors-green-600);
+  --rel-border-success: var(--rel-colors-green-500);
   --rel-border-success-strong: var(--rel-colors-green-800);
   --rel-border-danger-subtle: var(--rel-colors-red-100);
-  --rel-border-danger: var(--rel-colors-red-600);
+  --rel-border-danger: var(--rel-colors-red-500);
   --rel-border-danger-strong: var(--rel-colors-red-800);
   --rel-border-warning-subtle: var(--rel-colors-yellow-100);
-  --rel-border-warning: var(--rel-colors-yellow-700);
+  --rel-border-warning: var(--rel-colors-yellow-500);
   --rel-border-warning-strong: var(--rel-colors-yellow-800);
   --rel-border-focus: var(--rel-colors-gray-950);
+  --rel-border-focus-static: var(--rel-colors-gray-100);
   --rel-border-focus-subtle: var(--rel-colors-gray-100);
   --rel-border-focus-inner: var(--rel-colors-gray-0);
 
   /* --- action --- */
   --rel-action-overlay-hover: var(--rel-colors-dark-alpha-1);
-  --rel-action-overlay-pressed: var(--rel-colors-dark-alpha-2);
-  --rel-action-overlay-hover-strong: var(--rel-colors-dark-alpha-3);
+  --rel-action-overlay-hover-strong: var(--rel-colors-dark-alpha-2);
+  --rel-action-overlay-pressed: var(--rel-colors-dark-alpha-3);
   --rel-action-overlay-dragged: var(--rel-colors-dark-alpha-6);
   --rel-action-overlay-hover-inverse: var(--rel-colors-light-alpha-4);
   --rel-action-neutral-static-hover: var(--rel-colors-light-alpha-1);
@@ -454,8 +461,8 @@
   --rel-action-neutral-fill-hover: var(--rel-colors-gray-700);
   --rel-action-neutral-fill-dragged: var(--rel-colors-gray-600);
   --rel-action-neutral-subtle: var(--rel-colors-gray-50);
-  --rel-action-neutral-subtle-hover: var(--rel-colors-gray-100);
-  --rel-action-neutral-subtle-dragged: var(--rel-colors-gray-200);
+  --rel-action-neutral-subtle-hover: var(--rel-colors-gray-50);
+  --rel-action-neutral-subtle-dragged: var(--rel-colors-gray-100);
   --rel-action-neutral-ghost-hover: var(--rel-colors-dark-alpha-1);
   --rel-action-neutral-label-icons-fill-inverse: var(--rel-colors-gray-0);
   --rel-action-neutral-label-icons-subtle: var(--rel-colors-gray-950);
@@ -465,24 +472,23 @@
   --rel-action-neutral-label-icons-link-hover: var(--rel-colors-gray-600);
   --rel-action-neutral-border-subtle-hover: var(--rel-colors-gray-100);
   --rel-action-neutral-border-subtle-dragged: var(--rel-colors-gray-200);
-  --rel-action-neutral-border-outline: var(--rel-colors-gray-350);
+  --rel-action-neutral-border-outline: var(--rel-colors-gray-300);
   --rel-action-neutral-border-outline-hover: var(--rel-colors-gray-950);
   --rel-action-brand-fill: var(--rel-colors-brand-500);
   --rel-action-brand-fill-hover: var(--rel-colors-brand-600);
   --rel-action-brand-fill-disabled: var(--rel-colors-gray-200);
   --rel-action-brand-label-icons-primary: var(--rel-colors-gray-950);
-  --rel-action-brand-label-icons-primary-disabled: var(--rel-colors-gray-950);
-  --rel-action-danger-fill: var(--rel-colors-red-600);
-  --rel-action-danger-fill-hover: var(--rel-colors-red-700);
-  --rel-action-danger-fill-dragged: var(--rel-colors-red-500);
+  --rel-action-danger-fill: var(--rel-colors-red-500);
+  --rel-action-danger-fill-hover: var(--rel-colors-red-600);
+  --rel-action-danger-fill-dragged: var(--rel-colors-red-400);
   --rel-action-danger-subtle: var(--rel-colors-red-50);
-  --rel-action-danger-subtle-hover: var(--rel-colors-red-100);
-  --rel-action-danger-subtle-dragged: var(--rel-colors-red-200);
+  --rel-action-danger-subtle-hover: var(--rel-colors-red-50);
+  --rel-action-danger-subtle-dragged: var(--rel-colors-red-100);
   --rel-action-danger-outline-hover: var(--rel-colors-red-50);
   --rel-action-danger-ghost-hover: var(--rel-colors-red-50);
   --rel-action-danger-label-icons-fill: var(--rel-colors-gray-0);
   --rel-action-danger-label-icons-subtle: var(--rel-colors-red-600);
-  --rel-action-danger-label-icons-subtle-hover: var(--rel-colors-red-700);
+  --rel-action-danger-label-icons-subtle-hover: var(--rel-colors-red-600);
   --rel-action-danger-label-icons-subtle-dragged: var(--rel-colors-red-700);
   --rel-action-danger-label-icons-outline: var(--rel-colors-red-600);
   --rel-action-danger-label-icons-ghost: var(--rel-colors-red-600);
@@ -496,34 +502,34 @@
   --rel-action-warning-fill-hover: var(--rel-colors-yellow-500);
   --rel-action-warning-fill-dragged: var(--rel-colors-yellow-300);
   --rel-action-warning-subtle: var(--rel-colors-yellow-100);
-  --rel-action-warning-subtle-hover: var(--rel-colors-yellow-200);
-  --rel-action-warning-subtle-dragged: var(--rel-colors-yellow-300);
+  --rel-action-warning-subtle-hover: var(--rel-colors-yellow-100);
+  --rel-action-warning-subtle-dragged: var(--rel-colors-yellow-200);
   --rel-action-warning-label-icons-fill: var(--rel-colors-gray-950);
   --rel-action-warning-label-icons-subtle: var(--rel-colors-yellow-800);
   --rel-action-warning-label-icons-subtle-hover: var(--rel-colors-yellow-800);
   --rel-action-warning-label-icons-subtle-dragged: var(--rel-colors-yellow-900);
   --rel-action-warning-border-subtle-hover: var(--rel-colors-yellow-300);
   --rel-action-warning-border-subtle-dragged: var(--rel-colors-yellow-300);
-  --rel-action-success-fill: var(--rel-colors-green-600);
-  --rel-action-success-fill-hover: var(--rel-colors-green-700);
-  --rel-action-success-fill-dragged: var(--rel-colors-green-500);
+  --rel-action-success-fill: var(--rel-colors-green-500);
+  --rel-action-success-fill-hover: var(--rel-colors-green-600);
+  --rel-action-success-fill-dragged: var(--rel-colors-green-400);
   --rel-action-success-subtle: var(--rel-colors-green-50);
-  --rel-action-success-subtle-hover: var(--rel-colors-green-100);
-  --rel-action-success-subtle-dragged: var(--rel-colors-green-200);
+  --rel-action-success-subtle-hover: var(--rel-colors-green-50);
+  --rel-action-success-subtle-dragged: var(--rel-colors-green-100);
   --rel-action-success-outline-hover: var(--rel-colors-green-300);
   --rel-action-success-ghost-hover: var(--rel-colors-green-50);
   --rel-action-success-label-icons-fill: var(--rel-colors-gray-0);
-  --rel-action-success-label-icons-subtle: var(--rel-colors-green-700);
-  --rel-action-success-label-icons-subtle-hover: var(--rel-colors-green-700);
-  --rel-action-success-label-icons-subtle-dragged: var(--rel-colors-green-800);
+  --rel-action-success-label-icons-subtle: var(--rel-colors-green-600);
+  --rel-action-success-label-icons-subtle-hover: var(--rel-colors-green-600);
+  --rel-action-success-label-icons-subtle-dragged: var(--rel-colors-green-700);
   --rel-action-success-border-subtle-hover: var(--rel-colors-green-200);
   --rel-action-success-border-subtle-dragged: var(--rel-colors-green-200);
-  --rel-action-info-fill: var(--rel-colors-blue-700);
-  --rel-action-info-fill-hover: var(--rel-colors-blue-800);
-  --rel-action-info-fill-dragged: var(--rel-colors-blue-600);
+  --rel-action-info-fill: var(--rel-colors-blue-500);
+  --rel-action-info-fill-hover: var(--rel-colors-blue-600);
+  --rel-action-info-fill-dragged: var(--rel-colors-blue-400);
   --rel-action-info-subtle: var(--rel-colors-blue-50);
-  --rel-action-info-subtle-hover: var(--rel-colors-blue-100);
-  --rel-action-info-subtle-dragged: var(--rel-colors-blue-200);
+  --rel-action-info-subtle-hover: var(--rel-colors-blue-50);
+  --rel-action-info-subtle-dragged: var(--rel-colors-blue-100);
   --rel-action-info-label-icons-fill: var(--rel-colors-gray-0);
   --rel-action-info-label-icons-subtle: var(--rel-colors-blue-700);
   --rel-action-info-label-icons-subtle-hover: var(--rel-colors-blue-700);
@@ -542,7 +548,7 @@
   --rel-shadows-shadow-300: 0px 4px 10px rgba(0,0,0,0.65);
   --rel-shadows-shadow-400: 0px 6px 16px rgba(0,0,0,0.7);
   --rel-shadows-shadow-500: 0px 10px 24px rgba(0,0,0,0.75);
-  --rel-overlay-scrim: rgba(0,0,0,0.6);
+  --rel-overlay-scrim: var(--rel-bg-overlay-scrim);
 
   /* ==================== SEMANTIC — DARK (overrides) ==================== */
   --rel-bg-static-dark: var(--rel-colors-gray-800);
@@ -566,12 +572,13 @@
   --rel-bg-info-strong: var(--rel-colors-blue-100);
   --rel-bg-success-light: var(--rel-colors-green-900);
   --rel-bg-success-strong: var(--rel-colors-green-100);
+  --rel-bg-overlay-scrim: var(--rel-colors-dark-alpha-10);
   --rel-text-default: var(--rel-colors-gray-0);
   --rel-text-label: var(--rel-colors-gray-200);
-  --rel-text-body: var(--rel-colors-gray-300);
+  --rel-text-body: var(--rel-colors-gray-200);
   --rel-text-caption: var(--rel-colors-gray-300);
-  --rel-text-placeholder: var(--rel-colors-gray-300);
-  --rel-text-disabled: var(--rel-colors-gray-400);
+  --rel-text-placeholder: var(--rel-colors-gray-400);
+  --rel-text-disabled: var(--rel-colors-gray-500);
   --rel-text-inverse: var(--rel-colors-gray-950);
   --rel-text-danger: var(--rel-colors-red-300);
   --rel-text-warning: var(--rel-colors-yellow-400);
@@ -579,7 +586,7 @@
   --rel-text-success: var(--rel-colors-green-300);
   --rel-border-default: var(--rel-colors-gray-700);
   --rel-border-subtle: var(--rel-colors-gray-800);
-  --rel-border-accent: var(--rel-colors-gray-400);
+  --rel-border-accent: var(--rel-colors-gray-500);
   --rel-border-strong: var(--rel-colors-gray-0);
   --rel-border-inverse: var(--rel-colors-gray-950);
   --rel-border-success-subtle: var(--rel-colors-green-800);
@@ -595,29 +602,31 @@
   --rel-border-focus-subtle: var(--rel-colors-gray-700);
   --rel-border-focus-inner: var(--rel-colors-gray-900);
   --rel-action-overlay-hover: var(--rel-colors-light-alpha-1);
-  --rel-action-overlay-pressed: var(--rel-colors-light-alpha-2);
+  --rel-action-overlay-hover-strong: var(--rel-colors-light-alpha-2);
+  --rel-action-overlay-pressed: var(--rel-colors-light-alpha-3);
+  --rel-action-overlay-dragged: var(--rel-colors-light-alpha-6);
+  --rel-action-overlay-hover-inverse: var(--rel-colors-dark-alpha-4);
   --rel-action-neutral-fill: var(--rel-colors-gray-0);
   --rel-action-neutral-fill-hover: var(--rel-colors-gray-50);
   --rel-action-neutral-fill-dragged: var(--rel-colors-gray-100);
   --rel-action-neutral-subtle: var(--rel-colors-gray-700);
-  --rel-action-neutral-subtle-hover: var(--rel-colors-gray-600);
-  --rel-action-neutral-subtle-dragged: var(--rel-colors-gray-500);
+  --rel-action-neutral-subtle-hover: var(--rel-colors-gray-700);
+  --rel-action-neutral-subtle-dragged: var(--rel-colors-gray-600);
   --rel-action-neutral-ghost-hover: var(--rel-colors-light-alpha-1);
   --rel-action-neutral-label-icons-fill-inverse: var(--rel-colors-gray-950);
   --rel-action-neutral-label-icons-subtle: var(--rel-colors-gray-0);
   --rel-action-neutral-label-icons-outline: var(--rel-colors-gray-0);
   --rel-action-neutral-label-icons-ghost: var(--rel-colors-gray-0);
   --rel-action-neutral-label-icons-link: var(--rel-colors-gray-0);
-  --rel-action-neutral-label-icons-link-hover: var(--rel-colors-gray-300);
+  --rel-action-neutral-label-icons-link-hover: var(--rel-colors-gray-0);
   --rel-action-neutral-border-subtle-hover: var(--rel-colors-gray-600);
   --rel-action-neutral-border-subtle-dragged: var(--rel-colors-gray-500);
   --rel-action-neutral-border-outline: var(--rel-colors-gray-400);
   --rel-action-neutral-border-outline-hover: var(--rel-colors-gray-0);
   --rel-action-brand-fill-disabled: var(--rel-colors-gray-600);
-  --rel-action-brand-label-icons-primary-disabled: var(--rel-colors-gray-0);
   --rel-action-danger-subtle: var(--rel-colors-red-900);
-  --rel-action-danger-subtle-hover: var(--rel-colors-red-800);
-  --rel-action-danger-subtle-dragged: var(--rel-colors-red-700);
+  --rel-action-danger-subtle-hover: var(--rel-colors-red-900);
+  --rel-action-danger-subtle-dragged: var(--rel-colors-red-800);
   --rel-action-danger-outline-hover: var(--rel-colors-red-900);
   --rel-action-danger-ghost-hover: var(--rel-colors-red-900);
   --rel-action-danger-label-icons-subtle: var(--rel-colors-red-100);
@@ -634,16 +643,19 @@
   --rel-action-warning-fill: var(--rel-colors-yellow-500);
   --rel-action-warning-fill-dragged: var(--rel-colors-yellow-400);
   --rel-action-warning-subtle: var(--rel-colors-yellow-900);
-  --rel-action-warning-subtle-hover: var(--rel-colors-yellow-800);
-  --rel-action-warning-subtle-dragged: var(--rel-colors-yellow-700);
+  --rel-action-warning-subtle-hover: var(--rel-colors-yellow-900);
+  --rel-action-warning-subtle-dragged: var(--rel-colors-yellow-800);
   --rel-action-warning-label-icons-subtle: var(--rel-colors-yellow-100);
   --rel-action-warning-label-icons-subtle-hover: var(--rel-colors-yellow-100);
   --rel-action-warning-label-icons-subtle-dragged: var(--rel-colors-yellow-50);
   --rel-action-warning-border-subtle-hover: var(--rel-colors-yellow-800);
   --rel-action-warning-border-subtle-dragged: var(--rel-colors-yellow-700);
+  --rel-action-success-fill: var(--rel-colors-green-600);
+  --rel-action-success-fill-hover: var(--rel-colors-green-700);
+  --rel-action-success-fill-dragged: var(--rel-colors-green-500);
   --rel-action-success-subtle: var(--rel-colors-green-900);
-  --rel-action-success-subtle-hover: var(--rel-colors-green-800);
-  --rel-action-success-subtle-dragged: var(--rel-colors-green-700);
+  --rel-action-success-subtle-hover: var(--rel-colors-green-900);
+  --rel-action-success-subtle-dragged: var(--rel-colors-green-800);
   --rel-action-success-outline-hover: var(--rel-colors-green-700);
   --rel-action-success-ghost-hover: var(--rel-colors-green-900);
   --rel-action-success-label-icons-subtle: var(--rel-colors-green-100);
@@ -651,9 +663,12 @@
   --rel-action-success-label-icons-subtle-dragged: var(--rel-colors-green-50);
   --rel-action-success-border-subtle-hover: var(--rel-colors-green-800);
   --rel-action-success-border-subtle-dragged: var(--rel-colors-green-700);
+  --rel-action-info-fill: var(--rel-colors-blue-600);
+  --rel-action-info-fill-hover: var(--rel-colors-blue-700);
+  --rel-action-info-fill-dragged: var(--rel-colors-blue-500);
   --rel-action-info-subtle: var(--rel-colors-blue-900);
-  --rel-action-info-subtle-hover: var(--rel-colors-blue-800);
-  --rel-action-info-subtle-dragged: var(--rel-colors-blue-700);
+  --rel-action-info-subtle-hover: var(--rel-colors-blue-900);
+  --rel-action-info-subtle-dragged: var(--rel-colors-blue-800);
   --rel-action-info-label-icons-subtle: var(--rel-colors-blue-100);
   --rel-action-info-label-icons-subtle-hover: var(--rel-colors-blue-100);
   --rel-action-info-label-icons-subtle-dragged: var(--rel-colors-blue-50);