@marwes-ui/presets 1.3.0 → 1.4.0

package/src/firstEdition/banner.css

@@ -0,0 +1,190 @@
+/*
+ * Banner Component Styles
+ * Figma:
+ * - .figma/marwes/components/banner.json (component definition)
+ * - .figma/marwes/pages/-banner/-banner_1593-5094.json (light)
+ * - .figma/marwes/pages/-banner/-banner-dark_2444-2179.json (dark)
+ *
+ * Single token-driven component. Color → Banner states.
+ * Supports: info, success, warning, error, neutral.
+ */
+
+.mw-banner {
+  --mw-banner-surface: var(--mw-color-surface-primary, #ffffff);
+  --mw-banner-border: var(--mw-color-border-low, #000000);
+  --mw-banner-icon: var(--mw-color-text-muted, #595959);
+  --mw-banner-text: var(--mw-color-text, #141414);
+
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--mw-spacing-sp-8, 8px) 12px var(--mw-spacing-sp-8, 8px) 20px;
+  border: 0;
+  border-bottom: 1px solid var(--mw-banner-border);
+  border-radius: 0;
+  background: var(--mw-banner-surface);
+}
+
+/* Content area: icon + message */
+.mw-banner__content {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  gap: var(--mw-spacing-sp-8);
+  padding-right: var(--mw-spacing-sp-8);
+}
+
+/* Leading icon */
+.mw-banner__icon {
+  display: flex;
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  color: var(--mw-banner-icon);
+}
+
+.mw-banner__icon svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* Message text */
+.mw-banner__message {
+  min-width: 0;
+  flex: 1;
+  color: var(--mw-banner-text);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: -0.42px;
+}
+
+/* CTA action slot */
+.mw-banner__action {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+}
+
+/* Dismiss/close button */
+.mw-banner__dismiss {
+  display: flex;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  color: var(--mw-color-text-muted, #595959);
+  cursor: pointer;
+}
+
+.mw-banner__dismiss:hover {
+  background: var(--mw-color-surface-subtle, rgba(0, 0, 0, 0.04));
+}
+
+.mw-banner__dismiss:focus-visible {
+  outline: 2px solid var(--mw-color-focus, #2f31fc);
+  outline-offset: 2px;
+}
+
+.mw-banner__dismiss::before {
+  content: "";
+  display: block;
+  width: 12px;
+  height: 12px;
+  background-color: currentColor;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='18' y1='6' x2='6' y2='18' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='6' y1='6' x2='18' y2='18' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='18' y1='6' x2='6' y2='18' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='6' y1='6' x2='18' y2='18' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
+}
+
+/* ============================================
+   LIGHT VARIANTS
+   ============================================ */
+
+.mw-banner--neutral {
+  --mw-banner-surface: var(--mw-color-surface, #ffffff);
+  --mw-banner-border: var(--mw-color-border, #000000);
+  --mw-banner-icon: var(--mw-color-text-muted, #595959);
+  --mw-banner-text: var(--mw-color-text, #141414);
+}
+
+.mw-banner--info {
+  --mw-banner-surface: var(--mw-color-status-info-background, #eeeeff);
+  --mw-banner-border: var(--mw-color-status-info-border, #ababfd);
+  --mw-banner-icon: var(--mw-color-status-info-icon, #2527ca);
+  --mw-banner-text: var(--mw-color-text, #141414);
+}
+
+.mw-banner--success {
+  --mw-banner-surface: var(--mw-color-status-success-background, #e6f4ed);
+  --mw-banner-border: var(--mw-color-status-success-border, #90caad);
+  --mw-banner-icon: var(--mw-color-status-success-icon, #006d48);
+  --mw-banner-text: var(--mw-color-text, #141414);
+}
+
+.mw-banner--warning {
+  --mw-banner-surface: var(--mw-color-status-warning-background, #fff8e6);
+  --mw-banner-border: var(--mw-color-status-warning-border, #fde08a);
+  --mw-banner-icon: var(--mw-color-status-warning-icon, #d97706);
+  --mw-banner-text: var(--mw-color-text, #141414);
+}
+
+.mw-banner--error {
+  --mw-banner-surface: var(--mw-color-status-error-background, #ffe8eb);
+  --mw-banner-border: var(--mw-color-status-error-border, #ff8a95);
+  --mw-banner-icon: var(--mw-color-status-error-icon, #d90429);
+  --mw-banner-text: var(--mw-color-text, #141414);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+.mw-theme--dark .mw-banner--neutral {
+  --mw-banner-surface: var(--mw-color-surface, #0f0f0f);
+  --mw-banner-border: var(--mw-color-border, #ffffff);
+  --mw-banner-icon: var(--mw-color-text-muted, #a3a3a3);
+  --mw-banner-text: var(--mw-color-text, #f9fafb);
+}
+
+.mw-theme--dark .mw-banner--info {
+  --mw-banner-surface: var(--mw-color-status-info-background, #040519);
+  --mw-banner-border: var(--mw-color-status-info-border, #8182fc);
+  --mw-banner-icon: var(--mw-color-border-brand, #5859fc);
+  --mw-banner-text: var(--mw-color-text, #f9fafb);
+}
+
+.mw-theme--dark .mw-banner--success {
+  --mw-banner-surface: var(--mw-color-status-success-background, #001a0c);
+  --mw-banner-border: var(--mw-color-status-success-border, #006d48);
+  --mw-banner-icon: var(--mw-color-status-success-icon, #5db189);
+  --mw-banner-text: var(--mw-color-text, #f9fafb);
+}
+
+.mw-theme--dark .mw-banner--warning {
+  --mw-banner-surface: var(--mw-color-status-warning-background, #221004);
+  --mw-banner-border: var(--mw-color-status-warning-border, #b45309);
+  --mw-banner-icon: var(--mw-color-status-warning-icon, #f9b21a);
+  --mw-banner-text: var(--mw-color-text, #f9fafb);
+}
+
+.mw-theme--dark .mw-banner--error {
+  --mw-banner-surface: var(--mw-color-status-error-background, #240006);
+  --mw-banner-border: var(--mw-color-status-error-border, #ff2847);
+  --mw-banner-icon: var(--mw-color-status-error-icon, #ff2847);
+  --mw-banner-text: var(--mw-color-text, #f9fafb);
+}

package/src/firstEdition/breadcrumb.css

@@ -0,0 +1,125 @@
+/*
+ * Breadcrumb Styles
+ * Figma refs: 1574:26965, 1574:26960, 1574:26962
+ */
+
+.mw-breadcrumb {
+  --mw-breadcrumb-link: var(--mw-color-text-muted, #595959);
+  --mw-breadcrumb-link-hover: var(--mw-color-text, #141414);
+  --mw-breadcrumb-current: var(--mw-color-text, #141414);
+  --mw-breadcrumb-icon: var(--mw-color-text, #141414);
+  --mw-breadcrumb-focus: var(--mw-color-focus, #2f31fc);
+  --mw-breadcrumb-font: var(--mw-font-primary, "Instrument Sans", sans-serif);
+  --mw-breadcrumb-font-size: 12px;
+  --mw-breadcrumb-line-height: 12px;
+  --mw-breadcrumb-letter-spacing: -0.36px;
+  --mw-breadcrumb-font-weight: 500;
+  --mw-breadcrumb-home-size: 14px;
+  --mw-breadcrumb-separator-size: 12px;
+  --mw-breadcrumb-separator-padding: 6px;
+  --mw-breadcrumb-row-gap: 4px;
+
+  display: inline-flex;
+  max-width: 100%;
+  color: var(--mw-breadcrumb-current);
+  font-family: var(--mw-breadcrumb-font);
+  font-size: var(--mw-breadcrumb-font-size);
+  font-weight: var(--mw-breadcrumb-font-weight);
+  line-height: var(--mw-breadcrumb-line-height);
+  letter-spacing: var(--mw-breadcrumb-letter-spacing);
+}
+
+.mw-breadcrumb__list {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  row-gap: var(--mw-breadcrumb-row-gap);
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.mw-breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.mw-breadcrumb__action {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: var(--mw-breadcrumb-link);
+  font: inherit;
+  letter-spacing: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.mw-breadcrumb__action:hover {
+  color: var(--mw-breadcrumb-link-hover);
+  text-decoration: none;
+}
+
+.mw-breadcrumb__action:visited {
+  color: var(--mw-breadcrumb-link);
+}
+
+.mw-breadcrumb__action:focus-visible {
+  outline: 2px solid var(--mw-breadcrumb-focus);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.mw-breadcrumb__home {
+  width: var(--mw-breadcrumb-home-size);
+  height: var(--mw-breadcrumb-home-size);
+  justify-content: center;
+  color: var(--mw-breadcrumb-icon);
+  line-height: 0;
+  margin-bottom: 1px;
+}
+
+.mw-breadcrumb__home:visited,
+.mw-breadcrumb__home:hover {
+  color: var(--mw-breadcrumb-icon);
+}
+
+.mw-breadcrumb__home svg {
+  width: var(--mw-breadcrumb-home-size);
+  height: var(--mw-breadcrumb-home-size);
+}
+
+.mw-breadcrumb__current {
+  color: var(--mw-breadcrumb-current);
+  cursor: default;
+}
+
+.mw-breadcrumb__current:hover {
+  color: var(--mw-breadcrumb-current);
+  text-decoration: none;
+}
+
+.mw-breadcrumb__separator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--mw-breadcrumb-separator-size) + (var(--mw-breadcrumb-separator-padding) * 2));
+  height: var(--mw-breadcrumb-separator-size);
+  padding-inline: var(--mw-breadcrumb-separator-padding);
+  color: var(--mw-breadcrumb-icon);
+  line-height: 0;
+  flex: 0 0 auto;
+}
+
+.mw-breadcrumb__separator svg {
+  width: var(--mw-breadcrumb-separator-size);
+  height: var(--mw-breadcrumb-separator-size);
+}

package/src/firstEdition/button.css

@@ -20,20 +20,41 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 6px; /* off-scale — icon-to-label spacing */
+  gap: var(--mw-spacing-sp-4);
   height: var(--mw-density-height);
-  padding: 0 var(--mw-density-padding-x);
+  padding: var(--mw-density-padding-y) var(--mw-density-padding-x);
   border-radius: var(--mw-ui-radius);
-  border: 1px solid transparent;
+  border: 0;
   font-family: var(--mw-font-primary, inherit);
   font-size: var(--mw-density-font-size);
   font-weight: 500;
-  line-height: 0;
+  line-height: var(--mw-typography-text-label-line-height);
+  letter-spacing: var(--mw-typography-text-label-letter-spacing);
+  min-inline-size: 0;
   cursor: pointer;
   user-select: none;
   transition: all 150ms ease;
 }
 
+.mw-btn__label {
+  display: block;
+  line-height: inherit;
+  letter-spacing: inherit;
+  min-inline-size: 0;
+}
+
+.mw-btn[data-has-affordance="true"] .mw-btn__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mw-btn[data-icon-only="true"] {
+  width: var(--mw-density-height);
+  min-width: var(--mw-density-height);
+  padding: 0;
+}
+
 /* FOCUS STATE - Figma spec: 2px white space + 2px Accessible blue outline */
 .mw-btn:focus-visible {
   outline: 2px solid var(--mw-color-focus);
@@ -60,6 +81,7 @@
   background: transparent;
   color: var(--mw-color-secondary-label);
   border-color: var(--mw-color-secondary-border);
+  box-shadow: inset 0 0 0 1px var(--mw-color-secondary-border);
 }
 
 .mw-btn--secondary:hover:not(:disabled) {
@@ -85,24 +107,36 @@
   background: color-mix(in srgb, var(--mw-color-text) 8%, transparent);
 }
 
-/* TEXT - Minimal text-only button, content-hugging (no fixed height).
-   Uses the same 6px icon-to-label spacing as every other button. */
+/* TEXT - Minimal text-only button, content-hugging (no fixed height). */
 .mw-btn.mw-btn--text {
+  position: relative;
+  isolation: isolate;
   background: transparent;
   color: var(--mw-color-text);
   border-color: transparent;
+  border-width: 0;
   height: auto;
-  padding: 0.25rem 0.5rem;
-  line-height: 1;
+  padding: 0;
   border-radius: var(--mw-ui-radius);
+  overflow: visible;
 }
 
-.mw-btn--text:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--mw-color-text) 8%, transparent);
+.mw-btn.mw-btn--text::before {
+  content: "";
+  position: absolute;
+  inset: -0.25rem -0.5rem;
+  z-index: -1;
+  border-radius: var(--mw-ui-radius);
+  background: transparent;
+  pointer-events: none;
+}
+
+.mw-btn--text:hover:not(:disabled)::before {
+  background: color-mix(in srgb, var(--mw-color-border-full) 10%, transparent);
 }
 
-.mw-btn--text:active:not(:disabled) {
-  background: color-mix(in srgb, var(--mw-color-text) 12%, transparent);
+.mw-btn--text:active:not(:disabled)::before {
+  background: color-mix(in srgb, var(--mw-color-border-full) 20%, transparent);
 }
 
 .mw-btn.mw-btn--text[data-action="navigate"] {
@@ -111,6 +145,10 @@
   text-underline-offset: 2px;
 }
 
+.mw-btn.mw-btn--text[data-action="navigate"]::before {
+  content: none;
+}
+
 /* SIZES */
 .mw-btn--xs {
   height: 30px;
@@ -142,6 +180,10 @@
   cursor: not-allowed;
 }
 
+.mw-btn.mw-btn--text:disabled {
+  color: var(--mw-color-text-disabled);
+}
+
 /* Dark mode disabled state: #FFFFFF 40% (middle of 20-60% range from Figma) */
 .mw-theme--dark .mw-btn:disabled {
   opacity: 0.4;
@@ -150,7 +192,7 @@
 /* ERROR STATE - Figma node: 1:1072 includes error state */
 .mw-btn[data-error="true"],
 .mw-btn--error {
-  border-color: var(--mw-color-danger-base);
+  border-color: var(--mw-color-status-error-border);
 }
 
 .mw-btn--primary[data-error="true"],
@@ -161,13 +203,14 @@
 
 .mw-btn--secondary[data-error="true"],
 .mw-btn--secondary.mw-btn--error {
-  color: var(--mw-color-danger-base);
-  border-color: var(--mw-color-danger-base);
+  color: var(--mw-color-status-error-text);
+  border-color: var(--mw-color-status-error-border);
+  box-shadow: inset 0 0 0 1px var(--mw-color-status-error-border);
 }
 
 .mw-btn--text[data-error="true"],
 .mw-btn--text.mw-btn--error {
-  color: var(--mw-color-danger-base);
+  color: var(--mw-color-status-error-text);
 }
 
 /* SUCCESS - Positive confirmation actions */
@@ -185,6 +228,21 @@
   opacity: 0.95;
 }
 
+/* DANGER - Destructive confirmation actions */
+.mw-btn--danger {
+  background: var(--mw-color-danger-base);
+  color: var(--mw-color-danger-label);
+  border-color: var(--mw-color-danger-base);
+}
+
+.mw-btn--danger:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.mw-btn--danger:active:not(:disabled) {
+  opacity: 0.95;
+}
+
 /* ============================================
    DARK MODE OVERRIDES
    ============================================ */
@@ -206,8 +264,9 @@
 /* Dark mode: Error state for Secondary button (red outline on dark background) */
 .mw-theme--dark .mw-btn--secondary[data-error="true"],
 .mw-theme--dark .mw-btn--secondary.mw-btn--error {
-  border-color: var(--mw-color-danger-base);
-  color: var(--mw-color-danger-base);
+  border-color: var(--mw-color-status-error-border);
+  color: var(--mw-color-status-error-text);
+  box-shadow: inset 0 0 0 1px var(--mw-color-status-error-border);
 }
 
 /* Dark mode: Error state for Primary button */

package/src/firstEdition/card.css

@@ -6,8 +6,8 @@
  *
  * Live Figma values from the synced state matrix:
  * - container: 8px radius, 24px padding, 8px gap
- * - title: 16/18, weight 500
- * - body: 14/18, weight 400
+ * - title: 16/18, weight 600, letter-spacing -0.48px
+ * - body: 16/24, weight 400, letter-spacing -0.48px
  *
  * Light mode:
  * - default border: #d8d8d8
@@ -25,14 +25,10 @@
  */
 
 .mw-card {
-  --mw-card-surface: var(--mw-color-surface-elevated, #ffffff);
-  --mw-card-border: var(--mw-color-border-subtle, #d8d8d8);
+  --mw-card-surface: var(--mw-color-surface, var(--mw-color-surface-elevated, #ffffff));
+  --mw-card-border: var(--mw-color-border-low, #d8d8d8);
   --mw-card-title: var(--mw-color-text, #141414);
-  --mw-card-body: color-mix(
-    in srgb,
-    var(--mw-color-text, #141414) 65%,
-    var(--mw-color-background, #ffffff)
-  );
+  --mw-card-body: var(--mw-color-text-muted, #595959);
   --mw-card-radius: calc(var(--mw-ui-radius, 4px) * 2);
 
   display: flex;
@@ -42,9 +38,12 @@
   padding: 24px;
   box-sizing: border-box;
   background: var(--mw-card-surface);
-  border: 1px solid var(--mw-card-border);
+  border: 0;
   border-radius: var(--mw-card-radius);
-  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
+  box-shadow: inset 0 0 0 1px var(--mw-card-border);
+  transition: background-color 120ms ease, box-shadow 120ms ease, color 120ms ease;
+  -webkit-font-smoothing: antialiased;
+  font-synthesis: none;
 }
 
 .mw-card__header {
@@ -57,8 +56,9 @@
   color: var(--mw-card-title);
   font-family: var(--mw-font-primary, inherit);
   font-size: 16px;
-  font-weight: 500;
+  font-weight: 600;
   line-height: 18px;
+  letter-spacing: -0.48px;
 }
 
 .mw-card__body {
@@ -66,19 +66,20 @@
   margin: 0;
   color: var(--mw-card-body);
   font-family: var(--mw-font-primary, inherit);
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 400;
-  line-height: 18px;
+  line-height: 24px;
+  letter-spacing: -0.48px;
 }
 
 .mw-card:hover,
 .mw-card--state-hover {
-  --mw-card-border: color-mix(in srgb, var(--mw-color-border, #141414) 70%, transparent);
+  --mw-card-border: var(--mw-color-border-strong, #a3a3a3);
 }
 
 .mw-card:active,
 .mw-card--state-pressed {
-  --mw-card-border: color-mix(in srgb, var(--mw-color-border, #141414) 70%, transparent);
+  --mw-card-border: var(--mw-color-border-strong, #a3a3a3);
 }
 
 .mw-card:focus-visible,
@@ -99,20 +100,23 @@
   pointer-events: none;
 }
 
+.mw-card--error,
+.mw-card[data-state="error"] {
+  --mw-card-surface: var(--mw-color-status-error-background, #ffe8eb);
+  --mw-card-border: var(--mw-color-status-error-border, #ff8a95);
+  --mw-card-title: var(--mw-color-status-error-text, #d90429);
+}
+
 .mw-theme--dark .mw-card {
-  --mw-card-surface: var(--mw-color-surface-elevated, #474747);
-  --mw-card-border: var(--mw-color-border-subtle, #474747);
+  --mw-card-surface: var(--mw-color-surface-elevated, #2b2b2b);
+  --mw-card-border: var(--mw-color-border-low, #474747);
   --mw-card-title: var(--mw-color-text, #f9fafb);
-  --mw-card-body: color-mix(
-    in srgb,
-    var(--mw-color-text, #f9fafb) 65%,
-    var(--mw-color-background, #141414)
-  );
+  --mw-card-body: var(--mw-color-text-muted, #a3a3a3);
 }
 
 .mw-theme--dark .mw-card:hover,
 .mw-theme--dark .mw-card--state-hover {
-  --mw-card-border: color-mix(in srgb, var(--mw-color-border, #f9fafb) 70%, transparent);
+  --mw-card-border: var(--mw-color-border-strong, #a3a3a3);
 }
 
 .mw-theme--dark .mw-card:active,

package/src/firstEdition/checkbox.css

@@ -8,10 +8,10 @@
 
 .mw-checkbox {
   /* Component-level CSS variables (overridden by modifiers) */
-  --mw-checkbox-size: var(--mw-density-checkbox-size);
+  --mw-checkbox-size: 16px;
   --mw-checkbox-radius: var(--mw-ui-radius);
-  --mw-checkbox-border: var(--mw-color-border);
-  --mw-checkbox-bg: var(--mw-color-surface);
+  --mw-checkbox-border: var(--mw-color-border-subtle);
+  --mw-checkbox-bg: var(--mw-color-surface, var(--mw-color-surface-primary));
   --mw-checkbox-checked-bg: var(--mw-color-primary-base);
   --mw-checkbox-check: var(--mw-color-primary-label);
 
@@ -28,8 +28,8 @@
   place-content: center;
 
   /* Visual styling - aligned with Figma design */
-  border-radius: max(2px, calc(var(--mw-checkbox-radius) * 0.4));
-  border: 1px solid var(--mw-checkbox-border);
+  border-radius: 3px;
+  border: 1.5px solid var(--mw-checkbox-border);
   background: var(--mw-checkbox-bg);
 
   /* Interaction */
@@ -37,8 +37,7 @@
   vertical-align: middle;
   transition: all 150ms ease;
 
-  /* Space Protection */
-  margin: var(--mw-density-field-gap);
+  margin: 0;
 
   /* Typography */
   font-family: var(--mw-font-primary, inherit);
@@ -53,7 +52,7 @@
 }
 
 .mw-checkbox--md {
-  --mw-checkbox-size: 18px;
+  --mw-checkbox-size: 16px;
 }
 
 .mw-checkbox--lg {
@@ -142,6 +141,7 @@
 .mw-checkbox--disabled {
   cursor: not-allowed;
   opacity: 0.2;
+  color: var(--mw-color-text-disabled);
 }
 
 /* ============================================
@@ -150,7 +150,7 @@
 
 .mw-checkbox--invalid,
 .mw-checkbox[aria-invalid="true"] {
-  border-color: var(--mw-color-danger-base);
+  border-color: var(--mw-color-status-error-text, var(--mw-color-danger-base));
 }
 
 .mw-checkbox:checked.mw-checkbox--invalid,