Opinionated theme created for left components

lib/src/HalstackContext.tsx

@@ -61,6 +61,12 @@ const parseAdvancedTheme = (advancedTheme) => {
 const parseTheme = (theme) => {
   const componentTokensCopy = JSON.parse(JSON.stringify(componentTokens));
 
+  const alertTokens = componentTokensCopy.alert;
+  alertTokens.infoBackgroundColor = theme?.alert?.baseColor ?? alertTokens.infoBackgroundColor;
+  alertTokens.infoIconColor = theme?.alert?.accentColor ?? alertTokens.infoIconColor;
+  alertTokens.infoBorderColor = theme?.alert?.accentColor ?? alertTokens.infoBorderColor;
+  alertTokens.overlayColor = theme?.alert?.overlayColor ?? alertTokens.overlayColor;
+
   const accordionTokens = componentTokensCopy.accordion;
   accordionTokens.assistiveTextFontColor =
     theme?.accordion?.assistiveTextFontColor ?? accordionTokens.assistiveTextFontColor;
@@ -70,6 +76,9 @@ const parseTheme = (theme) => {
   accordionTokens.hoverBackgroundColor =
     addLightness(theme?.accordion?.accentColor, 57) ?? accordionTokens.hoverBackgroundColor;
 
+  const boxTokens = componentTokensCopy.box;
+  boxTokens.backgroundColor = theme?.box?.baseColor ?? boxTokens.backgroundColor;
+
   const buttonTokens = componentTokensCopy.button;
   buttonTokens.primaryFontColor = theme?.button?.primaryFontColor ?? buttonTokens.primaryFontColor;
   buttonTokens.primaryBackgroundColor = theme?.button?.baseColor ?? buttonTokens.primaryBackgroundColor;
@@ -104,11 +113,27 @@ const parseTheme = (theme) => {
   chipTokens.iconColor = theme?.chip?.iconColor ?? chipTokens.iconColor;
 
   const dateTokens = componentTokensCopy.dateInput;
-  dateTokens.pickerSelectedBackgroundColor =
-    theme?.dateInput?.selectedDateBackgroundColor ?? dateTokens.pickerSelectedBackgroundColor;
-  dateTokens.pickerSelectedFontColor = theme?.dateInput?.selectedDateFontColor ?? dateTokens.pickerSelectedFontColor;
+  dateTokens.pickerSelectedBackgroundColor = theme?.dateInput?.baseColor ?? dateTokens.pickerSelectedBackgroundColor;
+  dateTokens.pickerSelectedFontColor = theme?.dateInput?.selectedFontColor ?? dateTokens.pickerSelectedFontColor;
+  dateTokens.pickerActiveBackgroundColor =
+    subLightness(theme?.dateInput?.baseColor, 8) ?? dateTokens.pickerActiveBackgroundColor;
+  dateTokens.pickerActiveFontColor = theme?.dateInput?.selectedFontColor ?? dateTokens.pickerActiveFontColor;
+  dateTokens.pickerCurrentYearFontColor = theme?.dateInput?.baseColor ?? dateTokens.pickerCurrentYearFontColor;
+  dateTokens.pickerHeaderActiveBackgroundColor =
+    subLightness(theme?.dateInput?.baseColor, 8) ?? dateTokens.pickerHeaderActiveBackgroundColor;
+  dateTokens.pickerHeaderActiveFontColor =
+    theme?.dateInput?.selectedFontColor ?? dateTokens.pickerHeaderActiveFontColor;
   dateTokens.pickerHoverBackgroundColor =
-    setOpacity(theme?.dateInput?.selectedDateBackgroundColor, 0.34) ?? dateTokens.pickerHoverBackgroundColor;
+    addLightness(theme?.dateInput?.baseColor, 52) ?? dateTokens.pickerHoverBackgroundColor;
+  dateTokens.pickerCurrentDateBorderColor =
+    addLightness(theme?.dateInput?.baseColor, 42) ?? dateTokens.pickerCurrentDateBorderColor;
+  dateTokens.pickerHeaderHoverBackgroundColor =
+    addLightness(theme?.dateInput?.baseColor, 52) ?? dateTokens.pickerHeaderHoverBackgroundColor;
+
+  const dialogTokens = componentTokensCopy.dialog;
+  dialogTokens.backgroundColor = theme?.dialog?.baseColor ?? dialogTokens.backgroundColor;
+  dialogTokens.closeIconColor = theme?.dialog?.closeIconColor ?? dialogTokens.closeIconColor;
+  dialogTokens.overlayColor = theme?.dialog?.overlayColor ?? dialogTokens.overlayColor;
 
   const dropdownTokens = componentTokensCopy.dropdown;
   dropdownTokens.buttonBackgroundColor = theme?.dropdown?.baseColor ?? dropdownTokens.buttonBackgroundColor;
@@ -151,6 +176,11 @@ const parseTheme = (theme) => {
   headerTokens.logo = theme?.header?.logo ?? headerTokens.logo;
   headerTokens.logoResponsive = theme?.header?.logoResponsive ?? headerTokens.logoResponsive;
   headerTokens.contentColor = theme?.header?.contentColor ?? headerTokens.contentColor;
+  headerTokens.overlayColor = theme?.header?.overlayColor ?? headerTokens.overlayColor;
+
+  const linkTokens = componentTokensCopy.link;
+  linkTokens.visitedFontColor = theme?.link?.baseColor ?? linkTokens.visitedFontColor;
+  linkTokens.visitedUnderlineColor = theme?.link?.baseColor ?? linkTokens.visitedUnderlineColor;
 
   const paginatorTokens = componentTokensCopy.paginator;
   paginatorTokens.backgroundColor = theme?.paginator?.baseColor ?? paginatorTokens.backgroundColor;
@@ -162,6 +192,7 @@ const parseTheme = (theme) => {
   progressBarTokens.labelFontColor = theme?.progressBar?.fontColor ?? progressBarTokens.labelFontColor;
   progressBarTokens.valueFontColor = theme?.progressBar?.fontColor ?? progressBarTokens.valueFontColor;
   progressBarTokens.helperTextFontColor = theme?.progressBar?.fontColor ?? progressBarTokens.helperTextFontColor;
+  progressBarTokens.overlayColor = theme?.progressBar?.overlayColor ?? progressBarTokens.overlayColor;
 
   const quickNavTokens = componentTokensCopy.quickNav;
   quickNavTokens.fontColor = theme?.quickNav?.fontColor ?? quickNavTokens.fontColor;
@@ -242,6 +273,10 @@ const parseTheme = (theme) => {
   tabsTokens.hoverBackgroundColor = addLightness(theme?.tabs?.baseColor, 57) ?? tabsTokens.hoverBackgroundColor;
   tabsTokens.pressedBackgroundColor = addLightness(theme?.tabs?.baseColor, 52) ?? tabsTokens.pressedBackgroundColor;
 
+  const tagTokens = componentTokensCopy.tag;
+  tagTokens.fontColor = theme?.tag?.fontColor ?? tagTokens.fontColor;
+  tagTokens.iconColor = theme?.tag?.iconColor ?? tagTokens.iconColor;
+
   const textInputTokens = componentTokensCopy.textInput;
   textInputTokens.labelFontColor = theme?.textInput?.fontColor ?? textInputTokens.labelFontColor;
   textInputTokens.helperTextFontColor = theme?.textInput?.fontColor ?? textInputTokens.helperTextFontColor;
@@ -256,6 +291,14 @@ const parseTheme = (theme) => {
   textInputTokens.placeholderFontColor =
     addLightness(theme?.textInput?.fontColor, 30) ?? textInputTokens.placeholderFontColor;
 
+  const textareaTokens = componentTokensCopy.textarea;
+  textareaTokens.labelFontColor = theme?.textarea?.fontColor ?? textareaTokens.labelFontColor;
+  textareaTokens.helperTextFontColor = theme?.textarea?.fontColor ?? textareaTokens.helperTextFontColor;
+  textareaTokens.valueFontColor = theme?.textarea?.fontColor ?? textareaTokens.valueFontColor;
+  textareaTokens.hoverBorderColor = theme?.textarea?.hoverBorderColor ?? textareaTokens.hoverBorderColor;
+  textareaTokens.placeholderFontColor =
+    addLightness(theme?.textarea?.fontColor, 30) ?? textareaTokens.placeholderFontColor;
+
   const toggleGroupTokens = componentTokensCopy.toggleGroup;
   toggleGroupTokens.selectedBackgroundColor =
     theme?.toggleGroup?.selectedBaseColor ?? buttonTokens.selectedBackgroundColor;

lib/src/alert/Alert.stories.tsx

@@ -2,12 +2,21 @@ import React from "react";
 import DxcAlert from "./Alert";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Alert",
   component: DxcAlert,
 };
 
+const opinionatedTheme = {
+  alert: {
+    baseColor: "#e6f4ff",
+    accentColor: "#0067b3",
+    overlayColor: "#000000b3",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
@@ -155,6 +164,12 @@ export const Chromatic = () => (
         </div>
       </DxcAlert>
     </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcAlert inlineText="Info type alert with inline text." />
+      </HalstackProvider>
+    </ExampleContainer>
   </>
 );
 
@@ -168,3 +183,16 @@ export const ModalAlert = () => (
     </DxcAlert>
   </ExampleContainer>
 );
+
+export const ModalAlertOpinionated = () => (
+  <ExampleContainer>
+    <HalstackProvider theme={opinionatedTheme}>
+      <DxcAlert inlineText="Modal alert." mode="modal" onClose={() => {}}>
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
+          lobortis eget.
+        </div>
+      </DxcAlert>
+    </HalstackProvider>
+  </ExampleContainer>
+);

lib/src/box/Box.stories.tsx

@@ -2,12 +2,19 @@ import React from "react";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import DxcBox from "./Box";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Box ",
   component: DxcBox,
 };
 
+const opinionatedTheme = {
+  box: {
+    baseColor: "#ffffff",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <Title title="Display flex" theme="light" level={2} />
@@ -128,5 +135,13 @@ export const Chromatic = () => (
       <Title title="FitContent" theme="light" level={4} />
       <DxcBox size="fitContent">Box</DxcBox>
     </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcBox display="flex" padding="medium">
+          Box
+        </DxcBox>
+      </HalstackProvider>
+    </ExampleContainer>
   </>
 );

lib/src/common/variables.js

@@ -447,7 +447,7 @@ export const componentTokens = {
     pickerHeaderFontSize: globalTokens.type_scale_02,
   },
   dialog: {
-    overlayColor: globalTokens.hal_black,
+    overlayColor: globalTokens.color_grey_a_800,
     backgroundColor: globalTokens.hal_white,
     closeIconWidth: "24px",
     closeIconHeight: "24px",
@@ -463,7 +463,6 @@ export const componentTokens = {
     boxShadowOffsetY: "1px",
     boxShadowBlur: "3px",
     boxShadowColor: globalTokens.color_grey_a_300,
-    overlayOpacity: "0.7",
     fontFamily: globalTokens.type_sans,
     fontSize: globalTokens.type_scale_03,
     fontWeight: globalTokens.type_regular,
@@ -675,8 +674,8 @@ export const componentTokens = {
     disabledColor: globalTokens.lightGrey,
     hoverFontColor: globalTokens.hal_blue_s_35,
     hoverUnderlineColor: globalTokens.hal_blue_s_35,
-    visitedFontColor: globalTokens.purple,
-    visitedUnderlineColor: globalTokens.purple,
+    visitedFontColor: globalTokens.hal_purple_s_38,
+    visitedUnderlineColor: globalTokens.hal_purple_s_38,
     activeFontColor: globalTokens.hal_black,
     activeUnderlineColor: globalTokens.hal_black,
     focusColor: globalTokens.hal_blue_l_50,

lib/src/date-input/DateInput.stories.tsx

@@ -11,12 +11,20 @@ import DarkContainer from "../../.storybook/components/DarkSection";
 import dayjs from "dayjs";
 import useTheme from "../useTheme";
 import { ThemeProvider } from "styled-components";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Date input",
   component: DxcDateInput,
 };
 
+const opinionatedTheme = {
+  dateInput: {
+    baseColor: "#5f249f",
+    selectedFontColor: "#ffffff",
+  },
+};
+
 const DateInputChromatic = () => (
   <>
     <ExampleContainer>
@@ -124,6 +132,65 @@ Chromatic.play = async ({ canvasElement }) => {
   await fireEvent.click(screen.getByText("April 1905"));
 };
 
+const DateInputOpinionatedTheme = () => (
+  <>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Enabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcDateInput
+          label="Date input"
+          helperText="Help message"
+          format="dd/mm/yy"
+          placeholder
+          optional
+          defaultValue="10-10-2022"
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcDateInput label="Date input" helperText="Help message" format="dd/mm/yy" placeholder optional />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Invalid" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcDateInput label="Error date input" error="Error message." placeholder />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer expanded>
+      <Title title="Date picker" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcDateInput label="Date input" defaultValue="06-04-1905" />
+      </HalstackProvider>
+    </ExampleContainer>
+  </>
+);
+
+export const DateInputOpinionated = DateInputOpinionatedTheme.bind({});
+DateInputOpinionated.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await userEvent.click(canvas.getAllByRole("combobox")[canvas.getAllByRole("combobox").length - 1]);
+};
+
+const YearPickerOpinionatedTheme = () => (
+  <ExampleContainer expanded>
+    <Title title="Year picker" theme="light" level={4} />
+    <HalstackProvider theme={opinionatedTheme}>
+      <DxcDateInput label="Date input" defaultValue="06-04-1905" />
+    </HalstackProvider>
+  </ExampleContainer>
+);
+
+export const YearPickerOpinionated = YearPickerOpinionatedTheme.bind({});
+YearPickerOpinionated.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await userEvent.click(canvas.getByRole("combobox"));
+  await fireEvent.click(screen.getByText("April 1905"));
+};
+
 const DatePickerButtonStates = () => {
   const colorsTheme: any = useTheme();
   return (