Changes opinionated theme

lib/src/HalstackContext.tsx

@@ -111,6 +111,8 @@ const parseTheme = (theme) => {
   chipTokens.backgroundColor = theme?.chip?.baseColor ?? chipTokens.backgroundColor;
   chipTokens.fontColor = theme?.chip?.fontColor ?? chipTokens.fontColor;
   chipTokens.iconColor = theme?.chip?.iconColor ?? chipTokens.iconColor;
+  chipTokens.hoverIconColor = subLightness(theme?.chip?.iconColor, 10) ?? chipTokens.hoverIconColor;
+  chipTokens.activeIconColor = subLightness(theme?.chip?.iconColor, 30) ?? chipTokens.activeIconColor;
 
   const dateTokens = componentTokensCopy.dateInput;
   dateTokens.pickerSelectedBackgroundColor = theme?.dateInput?.baseColor ?? dateTokens.pickerSelectedBackgroundColor;
@@ -193,6 +195,7 @@ const parseTheme = (theme) => {
   progressBarTokens.valueFontColor = theme?.progressBar?.fontColor ?? progressBarTokens.valueFontColor;
   progressBarTokens.helperTextFontColor = theme?.progressBar?.fontColor ?? progressBarTokens.helperTextFontColor;
   progressBarTokens.overlayColor = theme?.progressBar?.overlayColor ?? progressBarTokens.overlayColor;
+  progressBarTokens.overlayFontColor = theme?.progressBar?.overlayFontColor ?? progressBarTokens.overlayFontColor;
 
   const quickNavTokens = componentTokensCopy.quickNav;
   quickNavTokens.fontColor = theme?.quickNav?.fontColor ?? quickNavTokens.fontColor;
@@ -322,7 +325,7 @@ const parseTheme = (theme) => {
 
   const wizardTokens = componentTokensCopy.wizard;
   wizardTokens.selectedStepBackgroundColor = theme?.wizard?.baseColor ?? wizardTokens.selectedStepBackgroundColor;
-  wizardTokens.selectedStepFontColor = theme?.wizard?.selectedFontColor ?? wizardTokens.selectedStepFontColor;
+  wizardTokens.selectedStepFontColor = theme?.wizard?.selectedStepFontColor ?? wizardTokens.selectedStepFontColor;
   wizardTokens.selectedStepBorderColor = theme?.wizard?.baseColor ?? wizardTokens.selectedStepBorderColor;
   wizardTokens.visitedLabelFontColor = theme?.wizard?.fontColor ?? wizardTokens.visitedLabelFontColor;
   wizardTokens.selectedLabelFontColor = theme?.wizard?.fontColor ?? wizardTokens.selectedLabelFontColor;

lib/src/common/variables.js

@@ -733,6 +733,7 @@ export const componentTokens = {
     thickness: "9px",
     borderRadius: "5px",
     overlayColor: globalTokens.color_grey_a_800,
+    overlayFontColor: globalTokens.hal_white,
   },
   quickNav: {
     fontColor: globalTokens.hal_grey_s_40,

lib/src/progress-bar/ProgressBar.stories.jsx

@@ -15,6 +15,7 @@ const opinionatedTheme = {
     baseColor: "#e6e6e6",
     fontColor: "#000000",
     overlayColor: "#000000b3",
+    overlayFontColor: "#ffffff",
   },
 };
 

lib/src/progress-bar/ProgressBar.tsx

@@ -130,7 +130,7 @@ const ProgressBarLabel = styled.div<LabelProps>`
     props.backgroundType === "dark"
       ? props.theme.labelFontColorOnDark
       : props.overlay === true
-      ? "#FFFFFF"
+      ? props.theme.overlayFontColor
       : props.theme.labelFontColor};
   overflow: hidden;
   text-overflow: ellipsis;
@@ -155,7 +155,7 @@ const ProgressBarProgress = styled.div<ProgressProps>`
     props.backgroundType === "dark"
       ? props.theme.valueFontColorOnDark
       : props.overlay === true
-      ? "#FFFFFF"
+      ? props.theme.overlayFontColor
       : props.theme.valueFontColor};
   display: ${(props) =>
     (props.value !== undefined && props.value !== null && props.showValue === true && "block") || "none"};
@@ -172,7 +172,7 @@ const HelperText = styled.span<HelperTextProps>`
     props.backgroundType === "dark"
       ? props.theme.helperTextFontColorOnDark
       : props.overlay === true
-      ? "#FFFFFF"
+      ? props.theme.overlayFontColor
       : props.theme.helperTextFontColor};
   font-family: ${(props) => props.theme.helperTextFontFamily};
   font-size: ${(props) => props.theme.helperTextFontSize};

lib/src/wizard/Wizard.stories.tsx

@@ -137,7 +137,7 @@ const opinionatedTheme = {
   wizard: {
     baseColor: "#5f249f",
     fontColor: "#000000",
-    selectedFontColor: "#ffffff",
+    selectedStepFontColor: "#ffffff",
   },
 };
 

website/screens/components/progress-bar/specs/ProgressBarSpecsPage.tsx

@@ -170,6 +170,16 @@ const sections = [
                 </td>
                 <td>#000000b3</td>
               </tr>
+              <tr>
+                <td>
+                  <Code>overlayFontColor</Code>
+                </td>
+                <td>Overlay font color</td>
+                <td>
+                  <Code>color-white</Code>
+                </td>
+                <td>#ffffff</td>
+              </tr>
             </tbody>
           </DxcTable>
         ),

website/screens/principles/themes/ThemesPage.tsx

@@ -361,6 +361,12 @@ const sections = [
                         <td>Icon color</td>
                         <td>
                           <Code>iconColor</Code>
+                          <br />
+                          <br />
+                          <Code>hoverIconColor</Code> (+10% lightness)
+                          <br />
+                          <br />
+                          <Code>activeIconColor</Code> (+30% lightness)
                         </td>
                       </tr>
                     </tbody>
@@ -753,6 +759,12 @@ const sections = [
                           <Code>overlayColor</Code>
                         </td>
                       </tr>
+                      <tr>
+                        <td>Overlay font color</td>
+                        <td>
+                          <Code>overlayFontColor</Code>
+                        </td>
+                      </tr>
                     </tbody>
                   </DxcTable>
                 ),
@@ -1318,7 +1330,7 @@ const sections = [
                         </td>
                       </tr>
                       <tr>
-                        <td>Selected font color</td>
+                        <td>Selected step font color</td>
                         <td>
                           <Code>selectedStepFontColor</Code>
                         </td>

website/screens/theme-generator/themes/opinionated-theme.json

@@ -1,14 +1,14 @@
 {
-  "alert": {
-    "baseColor": "#e6f4ff",
-    "accentColor": "#0067b3",
-    "overlayColor": "#000000b3"
-  },
   "accordion": {
     "accentColor": "#5f249f",
     "titleFontColor": "#000000",
     "assistiveTextFontColor": "#666666"
   },
+  "alert": {
+    "baseColor": "#e6f4ff",
+    "accentColor": "#0067b3",
+    "overlayColor": "#000000b3"
+  },
   "box": {
     "baseColor": "#ffffff"
   },
@@ -72,7 +72,8 @@
     "accentColor": "#5f249f",
     "baseColor": "#e6e6e6",
     "fontColor": "#000000",
-    "overlayColor": "#000000b3"
+    "overlayColor": "#000000b3",
+    "overlayFontColor": "#ffffff"
   },
   "quickNav": {
     "fontColor": "#666666",
@@ -136,6 +137,6 @@
   "wizard": {
     "baseColor": "#5f249f",
     "fontColor": "#000000",
-    "selectedFontColor": "#ffffff"
+    "selectedStepFontColor": "#ffffff"
   }
 }

website/screens/theme-generator/themes/schemas/opinionated.schema.json

@@ -72,7 +72,8 @@
     "accentColor": "color",
     "baseColor": "color",
     "fontColor": "color",
-    "overlayColor": "color"
+    "overlayColor": "color",
+    "overlayFontColor": "color"
   },
   "quickNav": {
     "fontColor": "color",
@@ -120,8 +121,8 @@
     "iconColor": "color"
   },
   "textarea": {
-    "fontColor": "#000000",
-    "hoverBorderColor": "#a46ede"
+    "fontColor": "color",
+    "hoverBorderColor": "color"
   },
   "textInput": {
     "fontColor": "color",
@@ -136,6 +137,6 @@
   "wizard": {
     "baseColor": "color",
     "fontColor": "color",
-    "selectedFontColor": "color"
+    "selectedStepFontColor": "color"
   }
 }