@xsolla/xui-icons-brand 0.172.2 → 0.173.0

package/README.md

@@ -29,7 +29,8 @@ Switch the visual treatment with `variant`:
 
 ```tsx
 <Github variant="colored" />  {/* default */}
-<Github variant="mono" />
+<Github variant="mono" />     {/* uses theme.colors.content.primary */}
+<Github variant="mono" color="#FF7A00" />
 ```
 
 ## API Reference
@@ -40,8 +41,11 @@ All brand icons accept the same props (`BrandIconProps`).
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `variant` | `"colored" \| "mono"` | `"colored"` | Renders the colour or monochrome glyph. Mono inherits the surrounding `color`. |
+| `variant` | `"colored" \| "mono"` | `"colored"` | Renders the colour or monochrome glyph. Mono uses the active theme `content.primary` token by default. |
 | `size` | `number` | `24` | Pixel size (square). |
+| `color` | `string` | `theme.colors.content.primary` | Manual color override for the mono variant. |
+| `themeMode` | `ThemeMode` | current design-system context | Optional theme mode override used to resolve the default mono color. |
+| `themeProductContext` | `ProductContext` | current design-system context | Optional product context override used to resolve the default mono color. |
 | `className` | `string` | — | CSS class on the wrapper. |
 | `style` | `CSSProperties` | — | Inline styles. |
 | `data-testid` | `string` | — | Test ID (web). |
@@ -49,7 +53,7 @@ All brand icons accept the same props (`BrandIconProps`).
 | `aria-label` | `string` | — | Accessible label. When set, the icon is exposed as `role="img"`. |
 | `aria-hidden` | `boolean` | `true` if no `aria-label` | Hide from assistive tech. |
 
-This package does not consume `ThemeOverrideProps`.
+Mono icons consume `ThemeOverrideProps` so their default color follows the same theme context as the rest of the UI kit. Colored icons keep their original brand fills.
 
 ### `<BaseIcon>`
 
@@ -100,7 +104,7 @@ export default function Variants() {
         <Steam size={32} aria-label="Steam" />
         <Twitch size={32} aria-label="Twitch" />
       </div>
-      <div style={{ display: 'flex', gap: 16, color: '#333' }}>
+      <div style={{ display: 'flex', gap: 16 }}>
         <Github size={32} variant="mono" aria-label="GitHub" />
         <Discord size={32} variant="mono" aria-label="Discord" />
         <Steam size={32} variant="mono" aria-label="Steam" />
@@ -111,6 +115,23 @@ export default function Variants() {
 }
 ```
 
+### Mono color override
+
+```tsx
+import * as React from 'react';
+import { Github, Discord, Steam } from '@xsolla/xui-icons-brand';
+
+export default function MonoColorOverride() {
+  return (
+    <div style={{ display: 'flex', gap: 16 }}>
+      <Github size={32} variant="mono" color="#FF7A00" aria-label="GitHub" />
+      <Discord size={32} variant="mono" color="#5865F2" aria-label="Discord" />
+      <Steam size={32} variant="mono" color="#1B2838" aria-label="Steam" />
+    </div>
+  );
+}
+```
+
 ### Social media links
 
 ```tsx

package/native/index.d.mts

@@ -1,11 +1,14 @@
 import React from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
 
 type IconVariant = "colored" | "mono";
-interface BrandIconProps {
+interface BrandIconProps extends ThemeOverrideProps {
     /** Icon variant style. Default: 'colored' */
     variant?: IconVariant;
     /** Size in pixels. Default: 24 */
     size?: number;
+    /** Icon color (only applies to mono variant). Default: theme content.primary */
+    color?: string;
     /** Additional CSS class */
     className?: string;
     /** Inline styles */

package/native/index.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
 
 type IconVariant = "colored" | "mono";
-interface BrandIconProps {
+interface BrandIconProps extends ThemeOverrideProps {
     /** Icon variant style. Default: 'colored' */
     variant?: IconVariant;
     /** Size in pixels. Default: 24 */
     size?: number;
+    /** Icon color (only applies to mono variant). Default: theme content.primary */
+    color?: string;
     /** Additional CSS class */
     className?: string;
     /** Inline styles */

package/native/index.js

@@ -188,23 +188,31 @@ module.exports = __toCommonJS(index_exports);
 
 // src/BaseIcon.native.tsx
 var import_react_native_svg = require("react-native-svg");
+var import_xui_core = require("@xsolla/xui-core");
 var import_jsx_runtime = require("react/jsx-runtime");
 var BaseIcon = ({
   variant = "colored",
   size = 24,
+  color,
+  themeMode,
+  themeProductContext,
   coloredContent: coloredContent163,
   monoContent: monoContent163,
   style,
   testID,
   "aria-label": ariaLabel
 }) => {
+  const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
+  const themeContentPrimary = theme.colors.content.primary;
   const svgContent = variant === "colored" ? coloredContent163 : monoContent163;
+  const resolvedColor = variant === "mono" ? color != null ? color : themeContentPrimary : "currentColor";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_react_native_svg.SvgXml,
     {
       xml: svgContent,
       width: size,
       height: size,
+      color: resolvedColor,
       style,
       testID,
       accessible: !!ariaLabel,