diff --git a/packages/lib/src/bulleted-list/BulletedList.tsx b/packages/lib/src/bulleted-list/BulletedList.tsx
index f52b11cdb..204866392 100644
--- a/packages/lib/src/bulleted-list/BulletedList.tsx
+++ b/packages/lib/src/bulleted-list/BulletedList.tsx
@@ -82,44 +82,40 @@ const ListItem = styled.li`
 
 const BulletedListItem = ({ children }: BulletedListItemPropsType): JSX.Element => <>{children}</>;
 
-const DxcBulletedList = ({ children, type = "disc", icon = "" }: BulletedListPropsType): JSX.Element => {
-  const colorsTheme = useContext(HalstackContext);
-
-  return (
-    <ListContainer>
-      <DxcFlex direction="column" as={type === "number" ? "ol" : "ul"} gap="0.125rem">
-        {Children.map(children, (child, index) => (
-          <ListItem>
-            <GeneralContent>
-              {type === "number" ? (
-                <Number>
-                  <DxcTypography color={colorsTheme.bulletedList.fontColor}>{index + 1}.</DxcTypography>
-                </Number>
-              ) : type === "square" ? (
-                <Bullet>
-                  <Square />
-                </Bullet>
-              ) : type === "circle" ? (
-                <Bullet>
-                  <Circle />
-                </Bullet>
-              ) : type === "icon" ? (
-                <Bullet>
-                  <Icon>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</Icon>
-                </Bullet>
-              ) : (
-                <Bullet>
-                  <Disc />
-                </Bullet>
-              )}
-              <DxcTypography color={colorsTheme.bulletedList.fontColor}>{child}</DxcTypography>
-            </GeneralContent>
-          </ListItem>
-        ))}
-      </DxcFlex>
-    </ListContainer>
-  );
-};
+const DxcBulletedList = ({ children, type = "disc", icon = "" }: BulletedListPropsType): JSX.Element => (
+  <ListContainer>
+    <DxcFlex direction="column" as={type === "number" ? "ol" : "ul"} gap="0.125rem">
+      {Children.map(children, (child, index) => (
+        <ListItem>
+          <GeneralContent>
+            {type === "number" ? (
+              <Number>
+                <DxcTypography>{index + 1}.</DxcTypography>
+              </Number>
+            ) : type === "square" ? (
+              <Bullet>
+                <Square />
+              </Bullet>
+            ) : type === "circle" ? (
+              <Bullet>
+                <Circle />
+              </Bullet>
+            ) : type === "icon" ? (
+              <Bullet>
+                <Icon>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</Icon>
+              </Bullet>
+            ) : (
+              <Bullet>
+                <Disc />
+              </Bullet>
+            )}
+            <DxcTypography>{child}</DxcTypography>
+          </GeneralContent>
+        </ListItem>
+      ))}
+    </DxcFlex>
+  </ListContainer>
+);
 
 DxcBulletedList.Item = BulletedListItem;
 
diff --git a/packages/lib/src/contextual-menu/ContextualMenu.stories.tsx b/packages/lib/src/contextual-menu/ContextualMenu.stories.tsx
index 82aa8727b..a3ff8a3b3 100644
--- a/packages/lib/src/contextual-menu/ContextualMenu.stories.tsx
+++ b/packages/lib/src/contextual-menu/ContextualMenu.stories.tsx
@@ -176,46 +176,42 @@ const ContextualMenu = () => (
   </>
 );
 
-const Single = () => {
-  const colorsTheme = useContext(HalstackContext);
-
-  return (
-    <DxcContainer width="300px">
-      <ContextualMenuContext.Provider value={{ selectedItemId: -1, setSelectedItemId: () => {} }}>
-        <Title title="Default" theme="light" level={3} />
-        <ExampleContainer>
-          <SingleItem {...items[0]!} id={0} depthLevel={0} />
-        </ExampleContainer>
-        <Title title="Focus" theme="light" level={3} />
-        <ExampleContainer pseudoState="pseudo-focus">
-          <SingleItem {...items[0]!} id={0} depthLevel={0} />
-        </ExampleContainer>
-        <Title title="Hover" theme="light" level={3} />
-        <ExampleContainer pseudoState="pseudo-hover">
-          <SingleItem {...items[0]!} id={0} depthLevel={0} />
-        </ExampleContainer>
-        <Title title="Active" theme="light" level={3} />
-        <ExampleContainer pseudoState="pseudo-active">
-          <SingleItem {...items[0]!} id={0} depthLevel={0} />
-        </ExampleContainer>
-      </ContextualMenuContext.Provider>
-      <ContextualMenuContext.Provider value={{ selectedItemId: 0, setSelectedItemId: () => {} }}>
-        <Title title="Selected" theme="light" level={3} />
-        <ExampleContainer>
-          <SingleItem {...items[0]!} id={0} depthLevel={0} />
-        </ExampleContainer>
-        <Title title="Selected hover" theme="light" level={3} />
-        <ExampleContainer pseudoState="pseudo-hover">
-          <SingleItem {...items[0]!} id={0} depthLevel={0} />
-        </ExampleContainer>
-        <Title title="Selected active" theme="light" level={3} />
-        <ExampleContainer pseudoState="pseudo-active">
-          <SingleItem {...items[0]!} id={0} depthLevel={0} />
-        </ExampleContainer>
-      </ContextualMenuContext.Provider>
-    </DxcContainer>
-  );
-};
+const Single = () => (
+  <DxcContainer width="300px">
+    <ContextualMenuContext.Provider value={{ selectedItemId: -1, setSelectedItemId: () => {} }}>
+      <Title title="Default" theme="light" level={3} />
+      <ExampleContainer>
+        <SingleItem {...items[0]!} id={0} depthLevel={0} />
+      </ExampleContainer>
+      <Title title="Focus" theme="light" level={3} />
+      <ExampleContainer pseudoState="pseudo-focus">
+        <SingleItem {...items[0]!} id={0} depthLevel={0} />
+      </ExampleContainer>
+      <Title title="Hover" theme="light" level={3} />
+      <ExampleContainer pseudoState="pseudo-hover">
+        <SingleItem {...items[0]!} id={0} depthLevel={0} />
+      </ExampleContainer>
+      <Title title="Active" theme="light" level={3} />
+      <ExampleContainer pseudoState="pseudo-active">
+        <SingleItem {...items[0]!} id={0} depthLevel={0} />
+      </ExampleContainer>
+    </ContextualMenuContext.Provider>
+    <ContextualMenuContext.Provider value={{ selectedItemId: 0, setSelectedItemId: () => {} }}>
+      <Title title="Selected" theme="light" level={3} />
+      <ExampleContainer>
+        <SingleItem {...items[0]!} id={0} depthLevel={0} />
+      </ExampleContainer>
+      <Title title="Selected hover" theme="light" level={3} />
+      <ExampleContainer pseudoState="pseudo-hover">
+        <SingleItem {...items[0]!} id={0} depthLevel={0} />
+      </ExampleContainer>
+      <Title title="Selected active" theme="light" level={3} />
+      <ExampleContainer pseudoState="pseudo-active">
+        <SingleItem {...items[0]!} id={0} depthLevel={0} />
+      </ExampleContainer>
+    </ContextualMenuContext.Provider>
+  </DxcContainer>
+);
 
 const ItemWithEllipsis = () => (
   <ExampleContainer expanded>
diff --git a/packages/lib/src/dropdown/Dropdown.stories.tsx b/packages/lib/src/dropdown/Dropdown.stories.tsx
index 31399aa90..855da9c7a 100644
--- a/packages/lib/src/dropdown/Dropdown.stories.tsx
+++ b/packages/lib/src/dropdown/Dropdown.stories.tsx
@@ -211,111 +211,102 @@ const Dropdown = () => (
   </>
 );
 
-const DropdownListStates = () => {
-  const colorsTheme: any = useContext(HalstackContext);
-
-  return (
-    <>
-      <Title title="Dropdown Menu" theme="light" level={2} />
-      <ExampleContainer>
-        <Title
-          title="List dialog uses a Radix Popover to appear over elements with a certain z-index"
-          theme="light"
-          level={3}
-        />
-        <div
-          style={{
-            position: "relative",
-            display: "flex",
-            flexDirection: "column",
-            gap: "20px",
-            height: "150px",
-            width: "min-content",
-            marginBottom: "100px",
-            padding: "20px",
-            border: "1px solid black",
-            borderRadius: "4px",
-            overflow: "auto",
-            zIndex: "1300",
-          }}
-        >
-          <DxcDropdown
-            label="Select a platform"
-            options={defaultOptions}
-            onSelectOption={(option) => {}}
-            size="medium"
-          />
-          <button style={{ zIndex: "1", width: "100px" }}>Submit</button>
-        </div>
-      </ExampleContainer>
-      <Title title="Option states" theme="light" level={3} />
-      <ExampleContainer pseudoState="pseudo-hover">
-        <Title title="Hovered option" theme="light" level={4} />
-        <DropdownMenu
-          id="x1"
-          dropdownTriggerId="dtx1"
-          iconsPosition="before"
-          visualFocusIndex={-1}
-          menuItemOnClick={() => {}}
-          onKeyDown={() => {}}
-          options={optionWithIcon}
-          styles={{ width: 240 }}
-        />
-      </ExampleContainer>
-      <ExampleContainer pseudoState="pseudo-active">
-        <Title title="Active option" theme="light" level={4} />
-        <DropdownMenu
-          id="x2"
-          dropdownTriggerId="dtx2"
-          iconsPosition="before"
-          visualFocusIndex={-1}
-          menuItemOnClick={() => {}}
-          onKeyDown={() => {}}
-          options={optionWithIcon}
-          styles={{ width: 240 }}
-        />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Focused option" theme="light" level={4} />
-        <DropdownMenu
-          id="x3"
-          dropdownTriggerId="dtx3"
-          iconsPosition="before"
-          visualFocusIndex={0}
-          menuItemOnClick={() => {}}
-          onKeyDown={() => {}}
-          options={options}
-          styles={{ width: 240 }}
-        />
-      </ExampleContainer>
-      <Title title="Icons" theme="light" level={3} />
-      <ExampleContainer>
-        <Title title="Before" theme="light" level={4} />
-        <DropdownMenu
-          id="x4"
-          dropdownTriggerId="dtx4"
-          iconsPosition="before"
-          visualFocusIndex={-1}
-          menuItemOnClick={() => {}}
-          onKeyDown={() => {}}
-          options={optionsIcon}
-          styles={{ width: 240 }}
-        />
-        <Title title="After" theme="light" level={4} />
-        <DropdownMenu
-          id="x5"
-          dropdownTriggerId="dtx5"
-          iconsPosition="after"
-          visualFocusIndex={-1}
-          menuItemOnClick={() => {}}
-          onKeyDown={() => {}}
-          options={optionsIcon}
-          styles={{ width: 240 }}
-        />
-      </ExampleContainer>
-    </>
-  );
-};
+const DropdownListStates = () => (
+  <>
+    <Title title="Dropdown Menu" theme="light" level={2} />
+    <ExampleContainer>
+      <Title
+        title="List dialog uses a Radix Popover to appear over elements with a certain z-index"
+        theme="light"
+        level={3}
+      />
+      <div
+        style={{
+          position: "relative",
+          display: "flex",
+          flexDirection: "column",
+          gap: "20px",
+          height: "150px",
+          width: "min-content",
+          marginBottom: "100px",
+          padding: "20px",
+          border: "1px solid black",
+          borderRadius: "4px",
+          overflow: "auto",
+          zIndex: "1300",
+        }}
+      >
+        <DxcDropdown label="Select a platform" options={defaultOptions} onSelectOption={(option) => {}} size="medium" />
+        <button style={{ zIndex: "1", width: "100px" }}>Submit</button>
+      </div>
+    </ExampleContainer>
+    <Title title="Option states" theme="light" level={3} />
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered option" theme="light" level={4} />
+      <DropdownMenu
+        id="x1"
+        dropdownTriggerId="dtx1"
+        iconsPosition="before"
+        visualFocusIndex={-1}
+        menuItemOnClick={() => {}}
+        onKeyDown={() => {}}
+        options={optionWithIcon}
+        styles={{ width: 240 }}
+      />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Active option" theme="light" level={4} />
+      <DropdownMenu
+        id="x2"
+        dropdownTriggerId="dtx2"
+        iconsPosition="before"
+        visualFocusIndex={-1}
+        menuItemOnClick={() => {}}
+        onKeyDown={() => {}}
+        options={optionWithIcon}
+        styles={{ width: 240 }}
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Focused option" theme="light" level={4} />
+      <DropdownMenu
+        id="x3"
+        dropdownTriggerId="dtx3"
+        iconsPosition="before"
+        visualFocusIndex={0}
+        menuItemOnClick={() => {}}
+        onKeyDown={() => {}}
+        options={options}
+        styles={{ width: 240 }}
+      />
+    </ExampleContainer>
+    <Title title="Icons" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="Before" theme="light" level={4} />
+      <DropdownMenu
+        id="x4"
+        dropdownTriggerId="dtx4"
+        iconsPosition="before"
+        visualFocusIndex={-1}
+        menuItemOnClick={() => {}}
+        onKeyDown={() => {}}
+        options={optionsIcon}
+        styles={{ width: 240 }}
+      />
+      <Title title="After" theme="light" level={4} />
+      <DropdownMenu
+        id="x5"
+        dropdownTriggerId="dtx5"
+        iconsPosition="after"
+        visualFocusIndex={-1}
+        menuItemOnClick={() => {}}
+        onKeyDown={() => {}}
+        options={optionsIcon}
+        styles={{ width: 240 }}
+      />
+    </ExampleContainer>
+  </>
+);
 
 const TooltipTitle = () => (
   <ExampleContainer expanded>