@marwes-ui/core 1.2.0 → 1.3.0

package/dist/index.d.ts

@@ -31,6 +31,13 @@ declare function resolveTone(tone: ToneName): ToneDefinition;
 type Density = "compact" | "comfortable" | "spacious";
 type HeadingSize = "h1" | "h2" | "h3";
 type ParagraphSize = "sm" | "md" | "lg";
+type StatusColorTokens = {
+    background: string;
+    text: string;
+    icon: string;
+    border: string;
+    borderStrong: string;
+};
 /**
  * Theme mode determines which default color palette is used.
  * - 'light': Uses light mode color defaults (dark text on light backgrounds)
@@ -62,10 +69,12 @@ type Theme = {
         textSubtle: string;
         textDisabled: string;
         textInverted: string;
+        textBrand: string;
         border: string;
         borderSubtle: string;
         borderStrong: string;
         borderDisabled: string;
+        borderBrand: string;
         /**
          * Focus color used for focus-visible outlines on interactive elements.
          * Defaults to the source focus ring token from docs/marwes-colors.json.
@@ -74,6 +83,12 @@ type Theme = {
         danger: string;
         success: string;
         warning: string;
+        status: {
+            success: StatusColorTokens;
+            warning: StatusColorTokens;
+            error: StatusColorTokens;
+            info: StatusColorTokens;
+        };
     };
     font: {
         primary: string;
@@ -194,11 +209,19 @@ interface ResolvedTheme {
         textSubtle: string;
         textDisabled: string;
         textInverted: string;
+        textBrand: string;
         border: string;
         borderSubtle: string;
         borderStrong: string;
         borderDisabled: string;
+        borderBrand: string;
         focus: string;
+        status: {
+            success: StatusColorTokens;
+            warning: StatusColorTokens;
+            error: StatusColorTokens;
+            info: StatusColorTokens;
+        };
     };
     font: {
         primary: string;
@@ -246,7 +269,7 @@ interface ResolvedTheme {
 }
 /**
  * Maps every field of a resolved theme to its CSS custom property name.
- * Returns 86 entries total. `variant` is excluded — it is deprecated.
+ * Returns 108 entries total. `variant` is excluded — it is deprecated.
  * Density is emitted as 10 `--mw-density-*` vars via densityToCSSVars.
  *
  * Variable naming follows D11: --mw-color-{role}-{state}, --mw-font-*, etc.
@@ -384,11 +407,43 @@ declare const mwThemeVarNames: {
         readonly textSubtle: "--mw-color-text-subtle";
         readonly textDisabled: "--mw-color-text-disabled";
         readonly textInverted: "--mw-color-text-inverted";
+        readonly textBrand: "--mw-color-text-brand";
         readonly border: "--mw-color-border";
         readonly borderSubtle: "--mw-color-border-subtle";
         readonly borderStrong: "--mw-color-border-strong";
         readonly borderDisabled: "--mw-color-border-disabled";
+        readonly borderBrand: "--mw-color-border-brand";
         readonly focus: "--mw-color-focus";
+        readonly status: {
+            readonly success: {
+                readonly background: "--mw-color-status-success-background";
+                readonly text: "--mw-color-status-success-text";
+                readonly icon: "--mw-color-status-success-icon";
+                readonly border: "--mw-color-status-success-border";
+                readonly borderStrong: "--mw-color-status-success-border-strong";
+            };
+            readonly warning: {
+                readonly background: "--mw-color-status-warning-background";
+                readonly text: "--mw-color-status-warning-text";
+                readonly icon: "--mw-color-status-warning-icon";
+                readonly border: "--mw-color-status-warning-border";
+                readonly borderStrong: "--mw-color-status-warning-border-strong";
+            };
+            readonly error: {
+                readonly background: "--mw-color-status-error-background";
+                readonly text: "--mw-color-status-error-text";
+                readonly icon: "--mw-color-status-error-icon";
+                readonly border: "--mw-color-status-error-border";
+                readonly borderStrong: "--mw-color-status-error-border-strong";
+            };
+            readonly info: {
+                readonly background: "--mw-color-status-info-background";
+                readonly text: "--mw-color-status-info-text";
+                readonly icon: "--mw-color-status-info-icon";
+                readonly border: "--mw-color-status-info-border";
+                readonly borderStrong: "--mw-color-status-info-border-strong";
+            };
+        };
     };
     readonly spacing: {
         readonly sp0: "--mw-spacing-sp-0";
@@ -532,11 +587,43 @@ declare const mwThemeVars: {
         readonly textSubtle: "var(--mw-color-text-subtle)";
         readonly textDisabled: "var(--mw-color-text-disabled)";
         readonly textInverted: "var(--mw-color-text-inverted)";
+        readonly textBrand: "var(--mw-color-text-brand)";
         readonly border: "var(--mw-color-border)";
         readonly borderSubtle: "var(--mw-color-border-subtle)";
         readonly borderStrong: "var(--mw-color-border-strong)";
         readonly borderDisabled: "var(--mw-color-border-disabled)";
+        readonly borderBrand: "var(--mw-color-border-brand)";
         readonly focus: "var(--mw-color-focus)";
+        readonly status: {
+            readonly success: {
+                readonly background: "var(--mw-color-status-success-background)";
+                readonly text: "var(--mw-color-status-success-text)";
+                readonly icon: "var(--mw-color-status-success-icon)";
+                readonly border: "var(--mw-color-status-success-border)";
+                readonly borderStrong: "var(--mw-color-status-success-border-strong)";
+            };
+            readonly warning: {
+                readonly background: "var(--mw-color-status-warning-background)";
+                readonly text: "var(--mw-color-status-warning-text)";
+                readonly icon: "var(--mw-color-status-warning-icon)";
+                readonly border: "var(--mw-color-status-warning-border)";
+                readonly borderStrong: "var(--mw-color-status-warning-border-strong)";
+            };
+            readonly error: {
+                readonly background: "var(--mw-color-status-error-background)";
+                readonly text: "var(--mw-color-status-error-text)";
+                readonly icon: "var(--mw-color-status-error-icon)";
+                readonly border: "var(--mw-color-status-error-border)";
+                readonly borderStrong: "var(--mw-color-status-error-border-strong)";
+            };
+            readonly info: {
+                readonly background: "var(--mw-color-status-info-background)";
+                readonly text: "var(--mw-color-status-info-text)";
+                readonly icon: "var(--mw-color-status-info-icon)";
+                readonly border: "var(--mw-color-status-info-border)";
+                readonly borderStrong: "var(--mw-color-status-info-border-strong)";
+            };
+        };
     };
     readonly spacing: {
         readonly sp0: "var(--mw-spacing-sp-0)";
@@ -680,11 +767,43 @@ declare const mwStyledTheme: {
         readonly textSubtle: "var(--mw-color-text-subtle)";
         readonly textDisabled: "var(--mw-color-text-disabled)";
         readonly textInverted: "var(--mw-color-text-inverted)";
+        readonly textBrand: "var(--mw-color-text-brand)";
         readonly border: "var(--mw-color-border)";
         readonly borderSubtle: "var(--mw-color-border-subtle)";
         readonly borderStrong: "var(--mw-color-border-strong)";
         readonly borderDisabled: "var(--mw-color-border-disabled)";
+        readonly borderBrand: "var(--mw-color-border-brand)";
         readonly focus: "var(--mw-color-focus)";
+        readonly status: {
+            readonly success: {
+                readonly background: "var(--mw-color-status-success-background)";
+                readonly text: "var(--mw-color-status-success-text)";
+                readonly icon: "var(--mw-color-status-success-icon)";
+                readonly border: "var(--mw-color-status-success-border)";
+                readonly borderStrong: "var(--mw-color-status-success-border-strong)";
+            };
+            readonly warning: {
+                readonly background: "var(--mw-color-status-warning-background)";
+                readonly text: "var(--mw-color-status-warning-text)";
+                readonly icon: "var(--mw-color-status-warning-icon)";
+                readonly border: "var(--mw-color-status-warning-border)";
+                readonly borderStrong: "var(--mw-color-status-warning-border-strong)";
+            };
+            readonly error: {
+                readonly background: "var(--mw-color-status-error-background)";
+                readonly text: "var(--mw-color-status-error-text)";
+                readonly icon: "var(--mw-color-status-error-icon)";
+                readonly border: "var(--mw-color-status-error-border)";
+                readonly borderStrong: "var(--mw-color-status-error-border-strong)";
+            };
+            readonly info: {
+                readonly background: "var(--mw-color-status-info-background)";
+                readonly text: "var(--mw-color-status-info-text)";
+                readonly icon: "var(--mw-color-status-info-icon)";
+                readonly border: "var(--mw-color-status-info-border)";
+                readonly borderStrong: "var(--mw-color-status-info-border-strong)";
+            };
+        };
     };
     readonly spacing: {
         readonly sp0: "var(--mw-spacing-sp-0)";

package/dist/index.js

@@ -84,6 +84,15 @@ function colorRoleVars(role, cr) {
     [`--mw-color-${role}-label-disabled`]: cr.labelDisabled
   };
 }
+function statusColorVars(role, tokens) {
+  return {
+    [`--mw-color-status-${role}-background`]: tokens.background,
+    [`--mw-color-status-${role}-text`]: tokens.text,
+    [`--mw-color-status-${role}-icon`]: tokens.icon,
+    [`--mw-color-status-${role}-border`]: tokens.border,
+    [`--mw-color-status-${role}-border-strong`]: tokens.borderStrong
+  };
+}
 function themeToCSSVars(theme) {
   const { color, font, ui, typography } = theme;
   return {
@@ -109,11 +118,18 @@ function themeToCSSVars(theme) {
     "--mw-color-text-subtle": color.textSubtle,
     "--mw-color-text-disabled": color.textDisabled,
     "--mw-color-text-inverted": color.textInverted,
+    "--mw-color-text-brand": color.textBrand,
     "--mw-color-border": color.border,
     "--mw-color-border-subtle": color.borderSubtle,
     "--mw-color-border-strong": color.borderStrong,
     "--mw-color-border-disabled": color.borderDisabled,
+    "--mw-color-border-brand": color.borderBrand,
     "--mw-color-focus": color.focus,
+    // Status role tokens (4 × 5 = 20)
+    ...statusColorVars("success", color.status.success),
+    ...statusColorVars("warning", color.status.warning),
+    ...statusColorVars("error", color.status.error),
+    ...statusColorVars("info", color.status.info),
     // Font (3)
     "--mw-font-primary": font.primary,
     "--mw-font-secondary": font.secondary,
@@ -359,17 +375,49 @@ var lightThemeDefaults = {
     textSubtle: "#737373",
     textDisabled: "#737373",
     textInverted: "#FFFFFF",
+    textBrand: "#2F31FC",
     // Borders
     border: "#D8D8D8",
     borderSubtle: "#D8D8D8",
     borderStrong: "#A3A3A3",
     borderDisabled: "#D8D8D8",
+    borderBrand: "#2F31FC",
     // Focus
     focus: "#2F31FC",
     // Semantic colors
     danger: "#D90429",
     success: "#006633",
-    warning: "#B45309"
+    warning: "#B45309",
+    status: {
+      success: {
+        background: "#E6F4ED",
+        text: "#006633",
+        icon: "#006D48",
+        border: "#90CAAD",
+        borderStrong: "#2E9970"
+      },
+      warning: {
+        background: "#FFF8E6",
+        text: "#B45309",
+        icon: "#D97706",
+        border: "#FDE08A",
+        borderStrong: "#E46F00"
+      },
+      error: {
+        background: "#FFE8EB",
+        text: "#A8031F",
+        icon: "#D90429",
+        border: "#FF8A95",
+        borderStrong: "#FF2847"
+      },
+      info: {
+        background: "#EEEEFF",
+        text: "#1B1D97",
+        icon: "#2F31FC",
+        border: "#ABABFD",
+        borderStrong: "#5859FC"
+      }
+    }
   },
   font: {
     primary: "'Instrument Sans', Inter, system-ui, sans-serif",
@@ -433,17 +481,49 @@ var darkThemeDefaults = {
     textSubtle: "#595959",
     textDisabled: "#595959",
     textInverted: "#141414",
+    textBrand: "#8182FC",
     // Borders
     border: "#474747",
     borderSubtle: "#474747",
     borderStrong: "#A3A3A3",
     borderDisabled: "#474747",
+    borderBrand: "#5859FC",
     // Focus
     focus: "#8182FC",
     // Semantic colors
     danger: "#FF002C",
     success: "#90CAAD",
-    warning: "#FCC94A"
+    warning: "#FCC94A",
+    status: {
+      success: {
+        background: "#001A0C",
+        text: "#90CAAD",
+        icon: "#5DB189",
+        border: "#5DB189",
+        borderStrong: "#006D48"
+      },
+      warning: {
+        background: "#221004",
+        text: "#FCC94A",
+        icon: "#F9B21A",
+        border: "#E46F00",
+        borderStrong: "#B45308"
+      },
+      error: {
+        background: "#240006",
+        text: "#FF5566",
+        icon: "#FF2847",
+        border: "#FF2847",
+        borderStrong: "#FF2847"
+      },
+      info: {
+        background: "#040519",
+        text: "#ABABFD",
+        icon: "#8182FC",
+        border: "#8182FC",
+        borderStrong: "#252599"
+      }
+    }
   },
   font: {
     primary: "'Instrument Sans', Inter, system-ui, sans-serif",
@@ -655,11 +735,14 @@ function resolveThemeInput(input) {
       textSubtle: input.color?.textSubtle ?? colorBase.textSubtle,
       textDisabled: input.color?.textDisabled ?? colorBase.textDisabled,
       textInverted: input.color?.textInverted ?? colorBase.textInverted,
+      textBrand: colorBase.textBrand,
       border: input.color?.border ?? colorBase.border,
       borderSubtle: input.color?.borderSubtle ?? colorBase.borderSubtle,
       borderStrong: input.color?.borderStrong ?? colorBase.borderStrong,
       borderDisabled: input.color?.borderDisabled ?? colorBase.borderDisabled,
-      focus: input.color?.focus ?? colorBase.focus
+      borderBrand: colorBase.borderBrand,
+      focus: input.color?.focus ?? colorBase.focus,
+      status: colorBase.status
     },
     font: { ...base.font, ...tone.font, ...input.font },
     ui: { ...base.ui, ...tone.ui, ...input.ui },
@@ -802,11 +885,43 @@ var mwThemeVarNames = {
     textSubtle: "--mw-color-text-subtle",
     textDisabled: "--mw-color-text-disabled",
     textInverted: "--mw-color-text-inverted",
+    textBrand: "--mw-color-text-brand",
     border: "--mw-color-border",
     borderSubtle: "--mw-color-border-subtle",
     borderStrong: "--mw-color-border-strong",
     borderDisabled: "--mw-color-border-disabled",
-    focus: "--mw-color-focus"
+    borderBrand: "--mw-color-border-brand",
+    focus: "--mw-color-focus",
+    status: {
+      success: {
+        background: "--mw-color-status-success-background",
+        text: "--mw-color-status-success-text",
+        icon: "--mw-color-status-success-icon",
+        border: "--mw-color-status-success-border",
+        borderStrong: "--mw-color-status-success-border-strong"
+      },
+      warning: {
+        background: "--mw-color-status-warning-background",
+        text: "--mw-color-status-warning-text",
+        icon: "--mw-color-status-warning-icon",
+        border: "--mw-color-status-warning-border",
+        borderStrong: "--mw-color-status-warning-border-strong"
+      },
+      error: {
+        background: "--mw-color-status-error-background",
+        text: "--mw-color-status-error-text",
+        icon: "--mw-color-status-error-icon",
+        border: "--mw-color-status-error-border",
+        borderStrong: "--mw-color-status-error-border-strong"
+      },
+      info: {
+        background: "--mw-color-status-info-background",
+        text: "--mw-color-status-info-text",
+        icon: "--mw-color-status-info-icon",
+        border: "--mw-color-status-info-border",
+        borderStrong: "--mw-color-status-info-border-strong"
+      }
+    }
   },
   spacing: {
     sp0: "--mw-spacing-sp-0",
@@ -946,11 +1061,43 @@ var mwThemeVars = {
     textSubtle: "var(--mw-color-text-subtle)",
     textDisabled: "var(--mw-color-text-disabled)",
     textInverted: "var(--mw-color-text-inverted)",
+    textBrand: "var(--mw-color-text-brand)",
     border: "var(--mw-color-border)",
     borderSubtle: "var(--mw-color-border-subtle)",
     borderStrong: "var(--mw-color-border-strong)",
     borderDisabled: "var(--mw-color-border-disabled)",
-    focus: "var(--mw-color-focus)"
+    borderBrand: "var(--mw-color-border-brand)",
+    focus: "var(--mw-color-focus)",
+    status: {
+      success: {
+        background: "var(--mw-color-status-success-background)",
+        text: "var(--mw-color-status-success-text)",
+        icon: "var(--mw-color-status-success-icon)",
+        border: "var(--mw-color-status-success-border)",
+        borderStrong: "var(--mw-color-status-success-border-strong)"
+      },
+      warning: {
+        background: "var(--mw-color-status-warning-background)",
+        text: "var(--mw-color-status-warning-text)",
+        icon: "var(--mw-color-status-warning-icon)",
+        border: "var(--mw-color-status-warning-border)",
+        borderStrong: "var(--mw-color-status-warning-border-strong)"
+      },
+      error: {
+        background: "var(--mw-color-status-error-background)",
+        text: "var(--mw-color-status-error-text)",
+        icon: "var(--mw-color-status-error-icon)",
+        border: "var(--mw-color-status-error-border)",
+        borderStrong: "var(--mw-color-status-error-border-strong)"
+      },
+      info: {
+        background: "var(--mw-color-status-info-background)",
+        text: "var(--mw-color-status-info-text)",
+        icon: "var(--mw-color-status-info-icon)",
+        border: "var(--mw-color-status-info-border)",
+        borderStrong: "var(--mw-color-status-info-border-strong)"
+      }
+    }
   },
   spacing: {
     sp0: "var(--mw-spacing-sp-0)",
@@ -5018,7 +5165,7 @@ function createDotsSquareNodes() {
       y: "1.5",
       width: "4",
       height: "5",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.89375"
     }),
@@ -5027,7 +5174,7 @@ function createDotsSquareNodes() {
       y: "4.4",
       width: "4.8",
       height: "4.8",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.46875"
     }),
@@ -5036,7 +5183,7 @@ function createDotsSquareNodes() {
       y: "10",
       width: "5",
       height: "4",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.3625"
     }),
@@ -5045,7 +5192,7 @@ function createDotsSquareNodes() {
       y: "14.8",
       width: "4.8",
       height: "4.8",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.15"
     }),
@@ -5054,7 +5201,7 @@ function createDotsSquareNodes() {
       y: "17.5",
       width: "4",
       height: "5",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.575"
     }),
@@ -5063,7 +5210,7 @@ function createDotsSquareNodes() {
       y: "14.8",
       width: "4.8",
       height: "4.8",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.7875"
     }),
@@ -5072,7 +5219,7 @@ function createDotsSquareNodes() {
       y: "10",
       width: "5",
       height: "4",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.68125"
     }),
@@ -5081,7 +5228,7 @@ function createDotsSquareNodes() {
       y: "4.4",
       width: "4.8",
       height: "4.8",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.25625"
     })