@octaviaflow/icons 3.0.18-beta.0 → 3.0.18-beta.7

package/dist/BaseIcon.d.ts

@@ -4,7 +4,17 @@ export type IconTone = "primary" | "accent" | "muted" | "inverse" | "success" |
 export interface BaseIconProps extends Omit<SVGAttributes<SVGSVGElement>, "color"> {
     /** Width + height in px. Token name or number. Default "lg" (24px). */
     size?: IconSize;
-    /** Stroke/fill color from the design-system tone enum. Default "primary". */
+    /**
+     * Stroke/fill color from the design-system tone enum.
+     *
+     * **Default: undefined — the icon inherits its parent's CSS `color`.**
+     * That keeps icons coloured by their context: a primary Button's white
+     * text colours its icons white; a Stat tile's accent slot colours its
+     * icon accent; a muted Sidebar item tints its icon to match.
+     *
+     * Pass an explicit tone only when you want to override that inheritance
+     * (e.g. `tone="success"` on a status row inside a default-tone surface).
+     */
     tone?: IconTone;
     /**
      * Arbitrary CSS color (hex, rgb, hsl, named color, CSS variable). When set,
@@ -26,5 +36,10 @@ export interface BaseIconProps extends Omit<SVGAttributes<SVGSVGElement>, "color
 /**
  * BaseIcon — every generated icon wraps this primitive. Pictograms have
  * BasePictogram with the same shape but a coarser size scale.
+ *
+ * When neither `tone` nor `color` is passed, the SVG inherits its parent's
+ * CSS `color`. This is the default because hard-coding an inline color
+ * (the previous behaviour, `tone="primary"`) silently overrode every
+ * Button / Stat / Sidebar / Card that had its own `color:` styling.
  */
 export declare const BaseIcon: import("react").ForwardRefExoticComponent<BaseIconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist/index.cjs

@@ -22,13 +22,11 @@ var TONE_COLOR = {
   running: "var(--ods-status-running-fg)"
 };
 var BaseIcon = react.forwardRef(
-  ({ size = "lg", tone = "primary", color, title, viewBox, children, style, ...rest }, ref) => {
+  ({ size = "lg", tone, color, title, viewBox, children, style, ...rest }, ref) => {
     const pixels = typeof size === "number" ? size : SIZE_PX[size];
+    const resolvedColor = color ?? (tone ? TONE_COLOR[tone] : void 0);
     const mergedStyle = {
-      // `color` wins over `tone` so the consumer can override an inherited
-      // tone without having to switch the API. Either way the value drives
-      // the SVG's CSS `color`, which the inner paths resolve via currentColor.
-      color: color ?? TONE_COLOR[tone],
+      ...resolvedColor !== void 0 && { color: resolvedColor },
       ...style
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -44,6 +42,7 @@ var BaseIcon = react.forwardRef(
         "aria-label": title,
         style: mergedStyle,
         focusable: "false",
+        fill: "currentColor",
         fillRule: "evenodd",
         clipRule: "evenodd",
         ...rest,