fix(a11y): improve contrast ratio on component style stories (#3421)

Author: Mnickii

stories/components/person/person.properties.stories.js

@@ -351,7 +351,7 @@ export const moreExamples = () => html`
 
      .styled-person {
        --default-font-family: 'Comic Sans MS', cursive, sans-serif;
-       --person-line1-text-color: red;
+       --person-line1-text-color: #CB1919;
        --person-avatar-size: 60px;
        --default-font-size: 20px;
        --person-line2-text-color: green;
@@ -361,7 +361,7 @@ export const moreExamples = () => html`
 
     .person-initials {
       --person-initials-text-color: yellow;
-      --person-initials-background-color: red;
+      --person-initials-background-color: #CB1919;
       --person-avatar-size: 60px;
       --person-avatar-border-radius: 10% 35%;
     }

stories/components/planner/planner.style.stories.js

@@ -58,7 +58,7 @@ export const customCSSProperties = () => html`
 
         --task-title-text-font-size: large;
         --task-title-text-font-weight: 500;
-        --task-complete-title-text-color: green;
+        --task-complete-title-text-color: #066406;
         --task-incomplete-title-text-color: purple;
 
         --task-icons-width: 32px;
@@ -70,7 +70,7 @@ export const customCSSProperties = () => html`
 
         --task-complete-background-color: powderblue;
         --task-incomplete-background-color: salmon;
-        --task-complete-border: 2px dashed green;
+        --task-complete-border: 2px dashed #066406;
         --task-incomplete-border: 2px double red;
         --task-complete-border-radius: 8px;
         --task-incomplete-border-radius: 12px;
@@ -108,6 +108,9 @@ export const customCSSProperties = () => html`
         --dot-options-menu-shadow-color: yellow;
         --dot-options-menu-item-color: maroon;
         --dot-options-menu-item-hover-background-color: white;
+
+        /** affects the assignments dropdown **/
+        --arrow-options-button-font-color: #004074;
       }
   </style>
   <mgt-planner class="tasks"></mgt-planner>