chore(dotcms-ui): fix color (#29615)

### Parent Issue

#29472

### Proposed Changes
* Fix icon color

### Checklist
- [x] Tests
- [x] Translations
- [x] Security Implications Contemplated (add notes if applicable)

### Screenshots
Original             |  Updated
:-------------------------:|:-------------------------:
<img width="641" alt="Screenshot 2024-08-16 at 11 38 48 AM"
src="https://github.com/user-attachments/assets/69233b42-d4b0-4523-94bb-babe503b8fa2">
| <img width="632" alt="Screenshot 2024-08-16 at 11 37 42 AM"
src="https://github.com/user-attachments/assets/80eae706-2520-4e24-a14c-d9536e9c410b">

core-web/apps/dotcms-ui/src/stories/primeng/form/AutoComplete.stories.ts

@@ -2,7 +2,7 @@ import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { UPDATE_STORY_ARGS } from '@storybook/core-events';
 
 import { BrowserModule } from '@angular/platform-browser';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AutoComplete, AutoCompleteModule } from 'primeng/autocomplete';
 
@@ -41,7 +41,7 @@ const meta: Meta<AutoComplete> = {
     },
     decorators: [
         moduleMetadata({
-            imports: [AutoCompleteModule, NoopAnimationsModule, BrowserModule]
+            imports: [AutoCompleteModule, BrowserAnimationsModule, BrowserModule]
         })
     ],
     args: {

core-web/apps/dotcms-ui/src/stories/primeng/form/Calendar.stories.ts

@@ -1,9 +1,16 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import {
+    Meta,
+    moduleMetadata,
+    StoryObj,
+    argsToTemplate,
+    componentWrapperDecorator
+} from '@storybook/angular';
 
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { ButtonModule } from 'primeng/button';
-import { Calendar } from 'primeng/calendar';
+import { Calendar, CalendarModule } from 'primeng/calendar';
+import { ChevronLeftIcon } from 'primeng/icons/chevronleft';
 
 const TODAY = new Date();
 const DAYS_TO_DISABLE = 5;
@@ -16,13 +23,14 @@ const meta: Meta<Calendar> = {
     component: Calendar,
     decorators: [
         moduleMetadata({
-            imports: [BrowserAnimationsModule, ButtonModule]
-        })
+            imports: [BrowserAnimationsModule, ButtonModule, CalendarModule, ChevronLeftIcon]
+        }),
+        componentWrapperDecorator((story) => `<div class="h-30rem">${story}</div>`)
     ],
     args: {
         disabled: false,
         readonlyInput: true,
-        showIcon: true,
+        showIcon: false,
         showTime: true,
         showClear: true,
         inline: false,
@@ -72,11 +80,21 @@ const meta: Meta<Calendar> = {
             description:
                 'Defines the quantity of the selection, valid values are "single", "multiple" and "range".'
         }
-    }
+    },
+    render: (args) => ({
+        props: args,
+        template: `<p-calendar ${argsToTemplate(args)} />`
+    })
 };
 
 export default meta;
 
 type Story = StoryObj<Calendar>;
 
-export const Primary: Story = {};
+export const Default: Story = {};
+
+export const WithIcon: Story = {
+    args: {
+        showIcon: true
+    }
+};

core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_calendar.scss

@@ -47,6 +47,10 @@
             width: $icon-lg-box;
             font-size: $icon-lg;
         }
+
+        .p-icon-wrapper {
+            color: $color-palette-primary-500;
+        }
     }
 
     .p-button:enabled.p-datepicker-trigger .pi {
@@ -238,7 +242,7 @@ p-calendar.p-calendar-clearable {
     }
 
     .p-calendar-clear-icon {
-        margin-top: -12px;
+        margin-top: -0.438rem;
         color: $color-palette-gray-500;
         width: $icon-lg-box;
         font-size: $icon-lg;