Color and docs updates

apps/website/screens/components/heading/specs/HeadingSpecsPage.tsx

@@ -54,7 +54,7 @@ const sections = [
                     <td>
                       <Code>font-size</Code>
                     </td>
-                    <td>32px / 2.5rem</td>
+                    <td>40px / 2.5rem</td>
                     <td>
                       <Code>font-scale-07</Code>
                     </td>

packages/lib/src/action-icon/ActionIcon.tsx

@@ -5,39 +5,16 @@ import CoreTokens from "../common/coreTokens";
 import DxcIcon from "../icon/Icon";
 import { Tooltip } from "../tooltip/Tooltip";
 
-const DxcActionIcon = forwardRef<RefType, ActionIconPropsTypes>(
-  ({ disabled = false, title, icon, onClick, tabIndex }, ref): JSX.Element => (
-    <Tooltip label={title}>
-      <ActionIcon
-        aria-label={title}
-        disabled={disabled}
-        onClick={onClick}
-        onMouseDown={(event) => {
-          event.stopPropagation();
-        }}
-        tabIndex={tabIndex}
-        type="button"
-        ref={ref}
-      >
-        {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}
-      </ActionIcon>
-    </Tooltip>
-  )
-);
-
 const ActionIcon = styled.button`
+  all: unset;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  border: none;
   border-radius: 2px;
   width: 24px;
   height: 24px;
-  font-size: 16px;
-  padding: 0px;
   ${(props) => (props.disabled ? `cursor: not-allowed;` : `cursor: pointer;`)}
-
   box-shadow: 0 0 0 2px transparent;
   background-color: ${(props) =>
     props.disabled
@@ -46,7 +23,7 @@ const ActionIcon = styled.button`
   color: ${(props) =>
     props.disabled
       ? (props.theme.disabledActionIconColor ?? CoreTokens.color_grey_500)
-      : (props.theme.actionIconColor ?? CoreTokens.color_black)};
+      : (props.theme.actionIconColor ?? CoreTokens.color_grey_900)};
 
   ${(props) =>
     !props.disabled &&
@@ -55,22 +32,41 @@ const ActionIcon = styled.button`
       &:focus-visible {
         outline: none;
         box-shadow: 0 0 0 2px ${props.theme.focusActionBorderColor ?? CoreTokens.color_blue_600};
-        color: ${props.theme.focusActionIconColor ?? CoreTokens.color_black};
+        color: ${props.theme.focusActionIconColor ?? CoreTokens.color_grey_900};
       }
       &:hover {
         background-color: ${props.theme.hoverActionBackgroundColor ?? CoreTokens.color_grey_100};
-        color: ${props.theme.hoverActionIconColor ?? CoreTokens.color_black};
+        color: ${props.theme.hoverActionIconColor ?? CoreTokens.color_grey_900};
       }
       &:active {
         background-color: ${props.theme.activeActionBackgroundColor ?? CoreTokens.color_grey_300};
-        color: ${props.theme.activeActionIconColor ?? CoreTokens.color_black};
+        color: ${props.theme.activeActionIconColor ?? CoreTokens.color_grey_900};
       }
     `}
 
-  svg {
+  font-size: 16px;  
+  > svg {
     width: 16px;
     height: 16px;
   }
 `;
 
-export default DxcActionIcon;
+export default forwardRef<RefType, ActionIconPropsTypes>(
+  ({ disabled = false, title, icon, onClick, tabIndex }, ref) => (
+    <Tooltip label={title}>
+      <ActionIcon
+        aria-label={title}
+        disabled={disabled}
+        onClick={onClick}
+        onMouseDown={(event) => {
+          event.stopPropagation();
+        }}
+        tabIndex={tabIndex}
+        type="button"
+        ref={ref}
+      >
+        {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}
+      </ActionIcon>
+    </Tooltip>
+  )
+);

packages/lib/src/toast/Toast.tsx

@@ -37,29 +37,6 @@ const getSemantic = (semantic: ToastPropsType["semantic"]) => {
   }
 };
 
-const ContentContainer = styled.div<{ loading: ToastPropsType["loading"] }>`
-  display: flex;
-  align-items: center;
-  gap: ${CoreTokens.spacing_8};
-  overflow: hidden;
-
-  ${({ loading }) => !loading && `font-size: ${CoreTokens.type_scale_05}`};
-  > svg {
-    width: 24px;
-    height: 24px;
-  }
-`;
-
-const Message = styled.span`
-  color: ${CoreTokens.color_black};
-  font-family: ${CoreTokens.type_sans};
-  font-size: ${CoreTokens.type_scale_02};
-  font-weight: ${CoreTokens.type_semibold};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
 const fadeInUp = keyframes`
   0% {
     transform: translateY(100%);
@@ -95,14 +72,37 @@ const Toast = styled.output<{ semantic: ToastPropsType["semantic"]; isClosing: b
   gap: ${CoreTokens.spacing_24};
   padding: ${CoreTokens.spacing_8} ${CoreTokens.spacing_12};
   background-color: ${({ semantic }) => getSemantic(semantic).secondaryColor};
-  color: ${({ semantic }) => getSemantic(semantic).primaryColor};
   animation: ${({ isClosing }) => (isClosing ? fadeOutDown : fadeInUp)} 0.3s ease forwards;
 
   @media (max-width: ${responsiveSizes.medium}rem) {
     max-width: 100%;
   }
 `;
 
+const ContentContainer = styled.div<{ loading: ToastPropsType["loading"]; semantic: ToastPropsType["semantic"] }>`
+  display: flex;
+  align-items: center;
+  gap: ${CoreTokens.spacing_8};
+  overflow: hidden;
+  color: ${({ semantic }) => getSemantic(semantic).primaryColor};
+
+  ${({ loading }) => !loading && `font-size: ${CoreTokens.type_scale_05}`};
+  > svg {
+    width: 24px;
+    height: 24px;
+  }
+`;
+
+const Message = styled.span`
+  color: ${CoreTokens.color_grey_900};
+  font-family: ${CoreTokens.type_sans};
+  font-size: ${CoreTokens.type_scale_02};
+  font-weight: ${CoreTokens.type_semibold};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
 const spinnerTheme = {
   spinner: {
     accentColor: getSemantic("info").primaryColor,
@@ -156,24 +156,23 @@ const DxcToast = ({
 
   return (
     <Toast semantic={semantic} isClosing={isClosing} role="status">
-      <ContentContainer loading={loading}>
-        <ToastIcon semantic={semantic} icon={icon} loading={loading} hideSemanticIcon={hideSemanticIcon} />
+      <ContentContainer loading={loading} semantic={semantic}>
+        <ToastIcon hideSemanticIcon={hideSemanticIcon} icon={icon} loading={loading} semantic={semantic} />
         <Message>{message}</Message>
       </ContentContainer>
       <DxcFlex alignItems="center" gap="0.25rem">
         {action && (
           <DxcButton
-            semantic={semantic}
-            mode="tertiary"
-            size={{ height: "small" }}
-            label={action.label}
             icon={action.icon}
+            label={action.label}
+            mode="tertiary"
             onClick={action.onClick}
+            semantic={semantic}
+            size={{ height: "small" }}
           />
         )}
         <DxcActionIcon
           icon="clear"
-          title={translatedLabels.toast.clearToastActionTitle}
           onClick={() => {
             if (!loading) {
               clearClosingAnimationTimer();
@@ -184,6 +183,7 @@ const DxcToast = ({
               onClear();
             }, 300);
           }}
+          title={translatedLabels.toast.clearToastActionTitle}
         />
       </DxcFlex>
     </Toast>