@sigx/lynx-icons 0.4.1 → 0.4.2

package/dist/Icon.d.ts

@@ -1,6 +1,27 @@
 import { type Define } from '@sigx/lynx';
 import '@sigx/lynx-icons/__font-face.css';
-export type IconProps = Define.Prop<'set', string, true> & Define.Prop<'name', string, true> & Define.Prop<'size', number, false> & Define.Prop<'color', string, false> & Define.Prop<'class', string, false>;
+import type { IconColorResolver, IconPropsExtensions } from './types.js';
+/**
+ * Injectable for the active theme's color resolver. Receives the full
+ * `<Icon>` props (including theme-augmented fields like daisy's
+ * `variant`) and returns a CSS color value to substitute into the SVG
+ * `fill=`, or `undefined` to fall through.
+ *
+ * Themes provide this via `defineProvide(useIconColorResolver, …)` from
+ * inside a provider component (e.g. daisy's `<ThemeProvider>`). Core
+ * `<Icon>` has no concept of named variants — it just asks the resolver
+ * for a color.
+ */
+export declare const useIconColorResolver: import("@sigx/runtime-core").InjectableFunction<IconColorResolver | null>;
+export type IconProps = Define.Prop<'set', string, true> & Define.Prop<'name', string, true> & Define.Prop<'size', number, false> & Define.Prop<'color', string, false> & Define.Prop<'class', string, false>
+/**
+ * Augmentation point — theme packages declaration-merge into
+ * `IconPropsExtensions` to add their own typed props (e.g. daisy
+ * adds `variant?: DaisyColor`). Core declares no specific
+ * extensions, so without a theme installed, no extra props exist
+ * and the type system rejects `<Icon variant="…">` at compile time.
+ */
+ & IconPropsExtensions;
 export declare function sanitizeColor(color: string): string;
 export declare function inlineSvg(template: string, color: string): string;
 /**

package/dist/Icon.js

@@ -1,15 +1,32 @@
 import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
-import { component } from '@sigx/lynx';
+import { component, defineInjectable } from '@sigx/lynx';
 import { codepoints } from '@sigx/lynx-icons/__codepoints';
 import { svgs } from '@sigx/lynx-icons/__svgs';
 import '@sigx/lynx-icons/__font-face.css';
 import { lookupGlyph } from './registry.js';
+/**
+ * Injectable for the active theme's color resolver. Receives the full
+ * `<Icon>` props (including theme-augmented fields like daisy's
+ * `variant`) and returns a CSS color value to substitute into the SVG
+ * `fill=`, or `undefined` to fall through.
+ *
+ * Themes provide this via `defineProvide(useIconColorResolver, …)` from
+ * inside a provider component (e.g. daisy's `<ThemeProvider>`). Core
+ * `<Icon>` has no concept of named variants — it just asks the resolver
+ * for a color.
+ */
+export const useIconColorResolver = defineInjectable(() => null);
 /**
  * Match a conservative subset of valid CSS color formats:
  * - `currentColor` and named colors (`red`, `dodgerblue`, `transparent` …)
  * - `#rgb` / `#rgba` / `#rrggbb` / `#rrggbbaa`
  * - `rgb(...)` / `rgba(...)` / `hsl(...)` / `hsla(...)` with digits, dots,
  *   commas, percent signs, and whitespace inside the parens
+ * - `var(--name)` referencing a CSS custom property — the only way to
+ *   plumb theme tokens (`var(--color-primary)`) into the SVG `fill=`
+ *   attribute, since Lynx's `<svg content=…>` parses the SVG string as
+ *   a standalone fragment that doesn't inherit `color` from the host
+ *   element (so `fill="currentColor"` + a host-level class is a no-op).
  *
  * Anything else (quotes, angle brackets, ampersands, arbitrary HTML) falls
  * back to `currentColor`. The `color` prop ends up substituted directly into
@@ -17,7 +34,7 @@ import { lookupGlyph } from './registry.js';
  * value like `red" stroke="…` would break out of the `fill=""` attribute.
  * Allow-list, not escape-list — keeps the surface area provably small.
  */
-const SAFE_COLOR_RE = /^(?:currentColor|[a-zA-Z]+|#[0-9a-fA-F]{3,8}|(?:rgb|rgba|hsl|hsla)\(\s*[\d.,%\s]+\))$/;
+const SAFE_COLOR_RE = /^(?:currentColor|[a-zA-Z]+|#[0-9a-fA-F]{3,8}|(?:rgb|rgba|hsl|hsla)\(\s*[\d.,%\s]+\)|var\(\s*--[\w-]+\s*\))$/;
 export function sanitizeColor(color) {
     return SAFE_COLOR_RE.test(color) ? color : 'currentColor';
 }
@@ -48,14 +65,34 @@ export function inlineSvg(template, color) {
  * ```
  */
 export const Icon = component(({ props }) => {
+    // Resolve the active theme's color resolver once at setup. The
+    // resolver itself is a stable function reference; it reads the
+    // theme-augmented props (e.g. `props.variant` for daisy) and any
+    // reactive theme state (e.g. `theme.name`) on each call.
+    const resolveColor = useIconColorResolver();
     return () => {
         const size = props.size ?? 16;
         const set = props.set;
         const name = props.name;
         const sizeStyle = { width: size, height: size };
+        // Resolution order: explicit `props.color` wins → then the
+        // theme resolver's return (driven by augmented props like
+        // `variant`) → finally `currentColor`. Substituted directly
+        // into the SVG `fill=` attribute by `inlineSvg`; class is not
+        // used to convey color because Lynx's `<svg content=…>` parses
+        // the SVG string in isolation and doesn't inherit host CSS
+        // `color`.
+        //
+        // `props` is cast to the unknown-record shape the resolver
+        // signature expects — at compile time the augmented fields are
+        // typed correctly inside the resolver itself (where the theme
+        // package's augmentation is in scope).
+        const themeColor = resolveColor
+            ? resolveColor(props)
+            : undefined;
+        const color = props.color ?? themeColor ?? 'currentColor';
         const glyph = lookupGlyph(codepoints, svgs, set, name);
         if (glyph?.svg) {
-            const color = props.color ?? 'currentColor';
             return (_jsx("svg", { content: inlineSvg(glyph.svg.svg, color), class: props.class, style: sizeStyle }));
         }
         if (glyph?.codepoint !== undefined) {
@@ -65,9 +102,8 @@ export const Icon = component(({ props }) => {
                 lineHeight: `${size}px`,
                 width: size,
                 height: size,
+                color,
             };
-            if (props.color)
-                textStyle.color = props.color;
             return (_jsx("text", { class: props.class, style: textStyle, children: String.fromCodePoint(glyph.codepoint) }));
         }
         return _jsx("view", { class: props.class, style: sizeStyle });

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Icon } from './Icon.js';
+export { Icon, useIconColorResolver } from './Icon.js';
 export type { IconProps } from './Icon.js';
 export { defineIconSet } from './defineIconSet.js';
-export type { GlyphData, GlyphSvg, IconAdapter, IconSetDef } from './types.js';
+export type { GlyphData, GlyphSvg, IconAdapter, IconColorResolver, IconPropsExtensions, IconSetDef, IconSpec, } from './types.js';

package/dist/index.js

@@ -1,2 +1,2 @@
-export { Icon } from './Icon.js';
+export { Icon, useIconColorResolver } from './Icon.js';
 export { defineIconSet } from './defineIconSet.js';

package/dist/types.d.ts

@@ -1,3 +1,61 @@
+/**
+ * Augmentation point for theme / extension packages. Declaration-merge
+ * into this interface to add fields that `<Icon>` accepts beyond the
+ * core props. The pinned components in adapter packages and the daisy
+ * navigation primitives inherit the augmentation automatically via
+ * intersection.
+ *
+ * `@sigx/lynx-icons` deliberately knows nothing about themes — the
+ * extension shape is up to whatever theme is installed. Daisy adds a
+ * `variant?: DaisyColor` field; a custom theme could add anything else
+ * (`tone?: 'muted' | 'loud'`, `tint?: number`, …) and provide its own
+ * resolver.
+ *
+ * @example
+ * ```ts
+ * // In a theme package:
+ * declare module '@sigx/lynx-icons' {
+ *     interface IconPropsExtensions {
+ *         variant?: 'primary' | 'secondary' | 'accent';
+ *     }
+ * }
+ * ```
+ */
+export interface IconPropsExtensions {
+}
+/**
+ * Function form provided to `useIconColorResolver`. Receives the full
+ * `<Icon>` props (including whatever fields the active theme augmented
+ * onto `IconPropsExtensions`) and returns a **CSS color value**
+ * substituted into the rendered SVG's `fill=` attribute. Return
+ * `undefined` to fall through to `props.color` / `currentColor`.
+ *
+ * Color rather than class: Lynx's `<svg content=…>` parses the inline
+ * SVG markup as a standalone fragment that doesn't inherit `color` CSS
+ * from the host element. Substituting the value into the markup is the
+ * only reliable way to make theme tokens show through.
+ *
+ * Props rather than a single variant string: the core has no opinion on
+ * how a theme keys its colors. A theme picks whichever augmented field
+ * (or combination) makes sense and reads it from `props` itself.
+ */
+export type IconColorResolver = (props: Readonly<Record<string, unknown>>) => string | undefined;
+/**
+ * Lightweight `{ set, name }` reference to an icon in a registered set —
+ * the canonical "data" form a consumer can pass to a UI primitive that
+ * accepts an icon (e.g. `<Tabs.Screen icon={{ set: 'lucide', name: 'map' }}>`).
+ *
+ * The receiving component (e.g. `<NavTabBar>`, `<NavHeader>`) is responsible
+ * for turning the spec into rendered JSX — typically by composing
+ * `<Icon set={spec.set} name={spec.name} color="currentColor" size={…}>`
+ * with theme-aware wrapping. Consumers who want full control (custom
+ * color, third-party component, size override) pass JSX directly instead
+ * of a spec.
+ */
+export interface IconSpec {
+    readonly set: string;
+    readonly name: string;
+}
 /**
  * Per-glyph vector data. Used by SVG-mode rendering.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigx/lynx-icons",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Icon component and registry for sigx-lynx — works with adapter packages like @sigx/lynx-icons-fa-free and @sigx/lynx-icons-lucide.",
   "type": "module",
   "main": "./dist/index.js",
@@ -35,12 +35,12 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "@sigx/lynx": "^0.4.1"
+    "@sigx/lynx": "^0.4.2"
   },
   "devDependencies": {
-    "@typescript/native-preview": "7.0.0-dev.20260511.1",
+    "@typescript/native-preview": "7.0.0-dev.20260521.1",
     "typescript": "^6.0.3",
-    "@sigx/lynx": "^0.4.1"
+    "@sigx/lynx": "^0.4.2"
   },
   "author": "Andreas Ekdahl",
   "license": "MIT",