@aurora-ds/components 0.22.4 → 0.22.5

package/dist/esm/components/foundation/icon/Icon.d.ts

@@ -5,7 +5,7 @@ import { IconProps } from '@components/foundation/icon/Icon.props.ts';
  *
  * **Features:**
  * - Theme-aware sizing via font sizes
- * - Color and fill support from theme
+ * - Color (stroke) and fill support from theme
  * - Optional background with padding and border radius
  * - Transition animation on color changes
  *
@@ -13,9 +13,15 @@ import { IconProps } from '@components/foundation/icon/Icon.props.ts';
  * ```tsx
  * import { SomeIcon } from 'some-icon-library'
  *
+ * // Stroke color only
  * <Icon size="md" color="primary">
  *   <SomeIcon />
  * </Icon>
+ *
+ * // With fill color
+ * <Icon size="md" color="primary" fill="secondary">
+ *   <SomeIcon />
+ * </Icon>
  * ```
  *
  * **With background:**
@@ -23,6 +29,7 @@ import { IconProps } from '@components/foundation/icon/Icon.props.ts';
  * <Icon
  *   size="lg"
  *   color="onPrimary"
+ *   fill="onPrimary"
  *   backgroundColor="primary"
  *   padding="sm"
  *   borderRadius="full"

package/dist/esm/components/foundation/icon/Icon.props.d.ts

@@ -5,6 +5,8 @@ export type IconProps = PropsWithChildren<{
     size?: keyof ThemeContract['fontSize'];
     /** Icon stroke/line color from theme */
     color?: keyof ThemeContract['colors'];
+    /** Icon fill color from theme (for filled icons) */
+    fill?: keyof ThemeContract['colors'];
     /** Background color from theme */
     backgroundColor?: keyof ThemeContract['colors'];
     /** Padding from theme spacing */

package/dist/esm/components/foundation/icon/Icon.styles.d.ts

@@ -1,3 +1,3 @@
 export declare const ICON_STYLES: {
-    root: (size?: keyof import("@/interfaces").ThemeFontSizeContract | undefined, color?: keyof import("@/interfaces").ThemeColorContract | undefined, backgroundColor?: keyof import("@/interfaces").ThemeColorContract | undefined, padding?: keyof import("@/interfaces").ThemeSpacingContract | undefined, borderRadius?: keyof import("@/interfaces").ThemeRadiusContract | undefined) => string;
+    root: (size?: keyof import("@/interfaces").ThemeFontSizeContract | undefined, color?: keyof import("@/interfaces").ThemeColorContract | undefined, fill?: keyof import("@/interfaces").ThemeColorContract | undefined, backgroundColor?: keyof import("@/interfaces").ThemeColorContract | undefined, padding?: keyof import("@/interfaces").ThemeSpacingContract | undefined, borderRadius?: keyof import("@/interfaces").ThemeRadiusContract | undefined) => string;
 };

package/dist/esm/index.js

@@ -4,13 +4,13 @@ import { createStyles, useTheme, keyframes, colors } from '@aurora-ds/theme';
 import { createPortal } from 'react-dom';
 
 const ICON_STYLES = createStyles((theme) => ({
-    root: (size, color, backgroundColor, padding, borderRadius) => ({
+    root: (size, color, fill, backgroundColor, padding, borderRadius) => ({
         boxSizing: 'content-box',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         overflow: 'hidden',
-        transition: 'color 150ms ease-in-out',
+        transition: 'color 150ms ease-in-out, fill 150ms ease-in-out',
         flexShrink: 0,
         lineHeight: 0,
         height: theme.fontSize[size ?? 'md'],
@@ -18,9 +18,13 @@ const ICON_STYLES = createStyles((theme) => ({
         minWidth: theme.fontSize[size ?? 'md'],
         minHeight: theme.fontSize[size ?? 'md'],
         color: color ? theme.colors[color] : 'inherit',
+        fill: fill ? theme.colors[fill] : undefined,
         backgroundColor: backgroundColor ? theme.colors[backgroundColor] : undefined,
         padding: padding ? theme.spacing[padding] : 0,
         borderRadius: theme.radius[borderRadius ?? 'md'],
+        '& svg': {
+            fill: fill ? theme.colors[fill] : undefined,
+        },
     }),
 }));
 
@@ -29,7 +33,7 @@ const ICON_STYLES = createStyles((theme) => ({
  *
  * **Features:**
  * - Theme-aware sizing via font sizes
- * - Color and fill support from theme
+ * - Color (stroke) and fill support from theme
  * - Optional background with padding and border radius
  * - Transition animation on color changes
  *
@@ -37,9 +41,15 @@ const ICON_STYLES = createStyles((theme) => ({
  * ```tsx
  * import { SomeIcon } from 'some-icon-library'
  *
+ * // Stroke color only
  * <Icon size="md" color="primary">
  *   <SomeIcon />
  * </Icon>
+ *
+ * // With fill color
+ * <Icon size="md" color="primary" fill="secondary">
+ *   <SomeIcon />
+ * </Icon>
  * ```
  *
  * **With background:**
@@ -47,6 +57,7 @@ const ICON_STYLES = createStyles((theme) => ({
  * <Icon
  *   size="lg"
  *   color="onPrimary"
+ *   fill="onPrimary"
  *   backgroundColor="primary"
  *   padding="sm"
  *   borderRadius="full"
@@ -55,7 +66,7 @@ const ICON_STYLES = createStyles((theme) => ({
  * </Icon>
  * ```
  */
-const Icon = ({ children, size, color, backgroundColor, padding, borderRadius, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
+const Icon = ({ children, size, color, fill, backgroundColor, padding, borderRadius, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     // Clone child element to apply width and height
     const child = Children.only(children);
     const styledChild = isValidElement(child)
@@ -64,7 +75,7 @@ const Icon = ({ children, size, color, backgroundColor, padding, borderRadius, a
             height: '100%',
         })
         : child;
-    return (jsx("div", { className: ICON_STYLES.root(size, color, backgroundColor, padding, borderRadius), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: styledChild }));
+    return (jsx("div", { className: ICON_STYLES.root(size, color, fill, backgroundColor, padding, borderRadius), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: styledChild }));
 };
 Icon.displayName = 'Icon';