OZG-7707 rename "color" prop to "fill"

alfa-client/apps/demo/src/app/app.component.html

@@ -58,10 +58,10 @@
 
       <div class="my-12">
         <h2 class="heading-2">Icons</h2>
-        <div class="mb-6 flex">
+        <div class="mb-6 flex gap-1">
           <ods-icon name="account-circle" size="xxl" />
-          <ods-icon name="accessibility" size="extra-large" color="text" />
-          <ods-icon name="accessibility" size="large" color="error" />
+          <ods-icon name="accessibility" size="extra-large" fill="text" />
+          <ods-icon name="accessibility" size="large" fill="error" />
           <ods-icon name="accessibility" class="fill-red-500" />
           <ods-icon name="accessibility" size="small" />
           <ods-icon name="admin-logo" size="unset" />

alfa-client/libs/design-system/src/lib/icon/icon.component.ts

@@ -38,7 +38,7 @@ const iconVariants = cva('', {
       xxl: 'size-12',
       unset: '',
     },
-    color: {
+    fill: {
       primary: 'fill-primary',
       text: 'fill-text',
       whitetext: 'fill-whitetext',
@@ -56,14 +56,14 @@ type IconVariants = VariantProps<typeof iconVariants>;
   selector: 'ods-icon',
   standalone: true,
   imports: [CommonModule, SvgIconComponent],
-  template: `<svg-icon [src]="'assets/icons/' + name + '.svg'" [svgClass]="twMerge(iconVariants({ size, color }), class)" />`,
+  template: `<svg-icon [src]="'assets/icons/' + name + '.svg'" [svgClass]="twMerge(iconVariants({ size, fill }), class)" />`,
   styles: [':host {@apply block w-fit}'],
 })
 export class IconComponent {
   @Input({ required: true }) name!: string;
   @Input() class: string;
   @Input() size: IconVariants['size'] = 'medium';
-  @Input() color: IconVariants['color'] = 'primary';
+  @Input() fill: IconVariants['fill'] = 'primary';
 
   readonly iconVariants = iconVariants;
   readonly twMerge = twMerge;