@pagopa/io-app-design-system 5.6.1 → 5.6.3

package/src/components/layout/HeaderFirstLevel.tsx

@@ -32,12 +32,15 @@ type HeaderActionsProp =
   | readonly [HeaderActionProps, HeaderActionProps] // Two actions
   | readonly [HeaderActionProps, HeaderActionProps, HeaderActionProps]; // Three actions
 
+type Variant = "primary" | "contrast";
+
 export type HeaderFirstLevel = WithTestID<{
   title: string;
   actions: HeaderActionsProp;
   animatedRef?: AnimatedRef<Animated.ScrollView>;
   animatedFlatListRef?: AnimatedRef<Animated.FlatList<any>>;
   ignoreSafeAreaMargin?: boolean;
+  variant?: Variant;
 }>;
 
 const styles = StyleSheet.create({
@@ -65,12 +68,14 @@ export const HeaderFirstLevel = ({
   actions = [],
   ignoreSafeAreaMargin = false,
   animatedRef,
+  variant = "primary",
   animatedFlatListRef
 }: HeaderFirstLevel) => {
   const titleRef = createRef<View>();
   const insets = useSafeAreaInsets();
   const theme = useIOTheme();
   const paddingTop = useSharedValue(ignoreSafeAreaMargin ? 0 : insets.top);
+  const isPrimary = variant === "primary";
 
   useLayoutEffect(() => {
     const reactNode = findNodeHandle(titleRef.current);
@@ -105,14 +110,18 @@ export const HeaderFirstLevel = ({
   return (
     <Animated.View
       style={[
-        { backgroundColor: IOColors[theme["appBackground-primary"]] },
+        {
+          backgroundColor: isPrimary
+            ? IOColors[theme["appBackground-primary"]]
+            : IOColors[theme["appBackground-accent"]]
+        },
         animatedStyle
       ]}
       accessibilityRole="header"
       testID={testID}
     >
       {/* Divider */}
-      {(animatedRef || animatedFlatListRef) && (
+      {(animatedRef || animatedFlatListRef) && isPrimary && (
         <Animated.View
           style={[
             {
@@ -130,7 +139,11 @@ export const HeaderFirstLevel = ({
             weight="Bold"
             style={{ flexShrink: 1 }}
             numberOfLines={1}
-            color={theme["textHeading-default"]}
+            color={
+              isPrimary
+                ? theme["textHeading-default"]
+                : theme["textHeading-constrast"]
+            }
             maxFontSizeMultiplier={1.25}
           >
             {title}
@@ -141,7 +154,7 @@ export const HeaderFirstLevel = ({
             <IconButton
               key={`header-first-level-action-${index}`}
               {...action}
-              color={"primary"}
+              color={variant}
             />
           ))}
         </HStack>

package/src/core/IOColors.ts

@@ -221,6 +221,7 @@ const themeKeys = [
   "textHeading-default",
   "textHeading-secondary",
   "textHeading-tertiary",
+  "textHeading-constrast",
   "textBody-default",
   "textBody-secondary",
   "textBody-tertiary",
@@ -294,6 +295,7 @@ export const IOThemeLight: IOTheme = {
   "textHeading-default": "black",
   "textHeading-secondary": "grey-850",
   "textHeading-tertiary": "grey-700",
+  "textHeading-constrast": "white",
   "textBody-default": "black",
   "textBody-secondary": "grey-850",
   "textBody-tertiary": "grey-700",