@ledgerhq/native-ui 0.18.1-next.0 → 0.19.0-nightly.1

package/lib/components/Cards/FullBackgroundCard/index.js

@@ -12,8 +12,8 @@ const FullBackgroundCard = ({ variant, backgroundImage, tag, description, onPres
     const { colors } = useTheme();
     const backgroundVariants = useMemo(() => ({
         purple: colors.primary.c80,
-        red: colors.error.c60,
-    }), [colors.primary.c80, colors.error.c60]);
+        red: colors.error.c30,
+    }), [colors.primary.c80, colors.error.c30]);
     const backgroundVariantColor = variant && backgroundVariants[variant]
         ? backgroundVariants[variant]
         : backgroundVariants.purple;
@@ -26,7 +26,7 @@ const FullBackgroundCard = ({ variant, backgroundImage, tag, description, onPres
                 React.createElement(ShadowGradient, { color: colors.neutral.c00 }))) : (React.createElement(ColoredGradient, { color: backgroundVariantColor, opacityColor: colors.neutral.c20 })),
             React.createElement(Flex, { p: 6 },
                 React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between", mb: 3 },
-                    React.createElement(Flex, { bg: "neutral.c100a01", borderRadius: 6, px: 3, py: "6px", maxWidth: "80%" },
+                    React.createElement(Flex, { bg: "opacityDefault.c10", borderRadius: 6, px: 3, py: "6px", maxWidth: "80%" },
                         React.createElement(Text, { variant: "small", fontWeight: "semiBold", color: "neutral.c90", numberOfLines: 1 }, tag)),
                     React.createElement(TouchableOpacity, { onPress: onDismiss, style: { top: -8, right: -8 } },
                         React.createElement(Flex, { bg: "neutral.c30", p: "6px", borderRadius: 24 },

package/lib/components/Cards/NotificationCard/index.js

@@ -6,11 +6,11 @@ import Box from "../../Layout/Box";
 import Link from "../../cta/Link";
 import styled from "styled-components/native";
 import { TouchableOpacity } from "react-native";
-const Tag = ({ tag }) => (React.createElement(Flex, { bg: "neutral.c100a01", borderRadius: 6, px: 3, py: "3px", maxWidth: "75%" },
+const Tag = ({ tag }) => (React.createElement(Flex, { bg: "opacityDefault.c10", borderRadius: 6, px: 3, py: "3px", maxWidth: "75%" },
     React.createElement(Text, { variant: "small", fontWeight: "semiBold", color: "neutral.c90", numberOfLines: 1 }, tag)));
 const Timer = ({ time, viewed }) => (React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", ml: 2 },
     React.createElement(Text, { variant: "small", fontWeight: "semiBold", color: "neutral.c90", numberOfLines: 1 }, time),
-    React.createElement(Box, { ml: 3, backgroundColor: viewed ? "transparent" : "error.c80", height: "8px", width: "8px", borderRadius: 24 })));
+    React.createElement(Box, { ml: 3, backgroundColor: viewed ? "transparent" : "error.c40", height: "8px", width: "8px", borderRadius: 24 })));
 const NotificationCard = (props) => {
     const { tag = "", time = "", title, description, cta, viewed, onClickCard, showLinkCta, link = "", } = props;
     const ctaIcon = useMemo(() => {

package/lib/components/Form/Input/BaseInput/index.js

@@ -38,7 +38,7 @@ const InputContainer = styled.View `
   ${(p) => p.error &&
     !p.disabled &&
     css `
-      border: 1px solid ${p.theme.colors.error.c100};
+      border: 1px solid ${p.theme.colors.error.c50};
     `};
 
   ${(p) => p.disabled &&
@@ -62,7 +62,7 @@ const BaseInput = styled.TextInput.attrs((p) => ({
   padding-right: 20px;
 `;
 const InputErrorContainer = styled(Text) `
-  color: ${(p) => p.theme.colors.error.c100};
+  color: ${(p) => p.theme.colors.error.c50};
   margin-left: 12px;
 `;
 export const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({

package/lib/components/Layout/List/TipList/index.js

@@ -15,6 +15,6 @@ import Check from "@ledgerhq/icons-ui/native/CheckAloneMedium";
 import Close from "@ledgerhq/icons-ui/native/CloseMedium";
 export default function TipList(_a) {
     var { items } = _a, props = __rest(_a, ["items"]);
-    const tipItems = useMemo(() => items.map((item) => (Object.assign(Object.assign({}, item), { bullet: item.isPositive ? (React.createElement(Check, { size: 20, color: "success.c100" })) : (React.createElement(Close, { size: 20, color: "error.c100" })) }))), [items]);
+    const tipItems = useMemo(() => items.map((item) => (Object.assign(Object.assign({}, item), { bullet: item.isPositive ? (React.createElement(Check, { size: 20, color: "success.c50" })) : (React.createElement(Close, { size: 20, color: "error.c50" })) }))), [items]);
     return React.createElement(List, Object.assign({ items: tipItems }, props));
 }

package/lib/components/Layout/List/VerticalStepper/StepperItem.js

@@ -43,7 +43,7 @@ export default function StepperItem({ item, progress, nested, isLastItem, setAct
             React.createElement(Container, { nested: nested, status: item.status, isLastItem: isLastItem },
                 React.createElement(Flex, { px: nested ? 0 : 4, py: nested ? 4 : 7, flexDirection: nested ? "row-reverse" : "row", justifyContent: nested ? "space-between" : "flex-start" },
                     React.createElement(Flex, { width: "28px", alignItems: "center" },
-                        item.status === "completed" && React.createElement(CheckAloneMedium, { size: 20, color: "success.c100" }),
+                        item.status === "completed" && React.createElement(CheckAloneMedium, { size: 20, color: "success.c50" }),
                         item.status === "active" && (React.createElement(ProgressLoader, { progress: progress, infinite: !progress, radius: 10, strokeWidth: 2 }))),
                     React.createElement(Flex, { flex: 1, ml: nested ? 0 : 4, mr: nested ? 0 : 2 },
                         React.createElement(Flex, { pb: item.status === "active" && item.renderBody ? 4 : undefined },

package/lib/components/Layout/List/VerticalTimeline/TimelineIndicator.js

@@ -58,7 +58,7 @@ const getIconBackground = (theme, status, isLastItem) => {
 };
 const getIconBorder = (theme, status, isLastItem) => {
     if (isLastItem) {
-        return theme.colors.success.c100;
+        return theme.colors.success.c50;
     }
     else if (status === "inactive") {
         return theme.colors.neutral.c50;
@@ -79,7 +79,7 @@ export default function TimelineIndicator(_a) {
     const { colors } = useTheme();
     return (React.createElement(Flex, Object.assign({ flexDirection: "column", alignItems: "center" }, props),
         React.createElement(TopSegmentSvg, { status: status, hidden: isFirstItem, height: PixelRatio.roundToNearestPixel(topHeight || topSegmentDefaultHeight) }),
-        React.createElement(CenterCircle, { status: status, isLastItem: isLastItem }, status === "completed" && (React.createElement(CircledCheckSolidMedium, { color: isLastItem ? colors.success.c100 : colors.primary.c80, size: 20 }))),
+        React.createElement(CenterCircle, { status: status, isLastItem: isLastItem }, status === "completed" && (React.createElement(CircledCheckSolidMedium, { color: isLastItem ? colors.success.c50 : colors.primary.c80, size: 20 }))),
         React.createElement(BottomSegmentSvg, { status: status, hidden: isLastItem })));
 }
 TimelineIndicator.topSegmentDefaultHeight = topSegmentDefaultHeight;

package/lib/components/Layout/List/VerticalTimeline/TimelineItem.js

@@ -20,7 +20,7 @@ const getContainerBorder = (theme, status, isLastItem) => {
         return "transparent";
     }
     else if (isLastItem && status === "active") {
-        return theme.colors.success.c100;
+        return theme.colors.success.c50;
     }
     else if (status === "active") {
         return theme.colors.neutral.c40;
@@ -70,7 +70,7 @@ export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, i
             React.createElement(Container, { status: item.status, isLastItem: isLastItem, mt: withExtraMarginOnActiveStep && !isFirstItem && item.status === "active" ? 4 : 0, mb: withExtraMarginOnActiveStep && !isLastItem && item.status === "active" ? 4 : 0 },
                 React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between" },
                     React.createElement(Text, { variant: "body", fontWeight: "semiBold", flexShrink: 1, color: item.status === "completed" && isLastItem
-                            ? "success.c80"
+                            ? "success.c40"
                             : item.status === "active"
                                 ? "primary.c80"
                                 : "neutral.c70" }, item.status === "completed" ? (_a = item.doneTitle) !== null && _a !== void 0 ? _a : item.title : item.title),

package/lib/components/Navigation/Stepper/index.js

@@ -91,7 +91,7 @@ const PendingText = styled(Text) `
   color: ${(p) => p.theme.colors.neutral.c70};
 `;
 const ErroredText = styled(Text) `
-  color: ${(p) => p.theme.colors.error.c100};
+  color: ${(p) => p.theme.colors.error.c50};
 `;
 function Step({ state, label, showLeftSeparator, showRightSeparator, }) {
     const labelText = useMemo(() => {
@@ -116,7 +116,7 @@ function Step({ state, label, showLeftSeparator, showRightSeparator, }) {
                     React.createElement(StepIcon.Current, null)));
             case "ERRORED":
                 return (React.createElement(StepIcon.Background, { backgroundColor: "warning.c30" },
-                    React.createElement(StepIcon.Errored, { color: colors.error.c100 })));
+                    React.createElement(StepIcon.Errored, { color: colors.error.c50 })));
             case "PENDING":
                 return (React.createElement(StepIcon.Background, null,
                     React.createElement(StepIcon.Pending, null)));

package/lib/components/cta/Button/getButtonStyle.js

@@ -13,21 +13,21 @@ export function getButtonColors(colors) {
         main: {
             primaryColor: colors.neutral.c00,
             secondaryColor: colors.neutral.c100,
-            pressedColor: colors.neutral.c100a06,
-            pressedOutlineColor: colors.neutral.c100a01,
+            pressedColor: colors.opacityDefault.c60,
+            pressedOutlineColor: colors.opacityDefault.c10,
         },
         shade: {
             primaryColor: colors.neutral.c00,
             secondaryColor: colors.neutral.c100,
             tertiaryColor: colors.neutral.c40,
-            pressedColor: colors.neutral.c100a06,
-            pressedOutlineColor: colors.neutral.c100a01,
+            pressedColor: colors.opacityDefault.c60,
+            pressedOutlineColor: colors.opacityDefault.c10,
         },
         error: {
             primaryColor: colors.neutral.c00,
-            secondaryColor: colors.error.c100,
-            pressedColor: colors.error.c100a07,
-            pressedOutlineColor: colors.error.c100a025,
+            secondaryColor: colors.error.c50,
+            pressedColor: colors.error.c50a07,
+            pressedOutlineColor: colors.error.c50a025,
         },
         color: {
             primaryColor: colors.neutral.c00,

package/lib/components/message/Alert/index.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="styled-components-react-native" />
 import React from "react";
-type AlertType = "info" | "warning" | "error";
+type AlertType = "info" | "secondary" | "success" | "warning" | "error";
 export type IconProps = {
     size?: number;
     color?: string;
@@ -15,13 +16,18 @@ export interface AlertProps {
     title?: React.ReactNode;
     showIcon?: boolean;
     children?: React.ReactNode;
-    /**
-     * Alternative to using the `children` prop in order to render something using the value of `textColor`
-     * that is passed as a parameter.
-     */
-    renderContent?: ({ textColor }: {
-        textColor: string;
-    }) => React.ReactNode | null;
 }
-export default function Alert({ type, Icon, title, showIcon, children, renderContent, }: AlertProps): JSX.Element;
-export {};
+declare function Alert({ type, Icon, title, showIcon, children }: AlertProps): JSX.Element;
+declare namespace Alert {
+    var BodyText: import("styled-components").StyledComponent<({ children, bracket, textAlign, ...props }: import("../../Text").BaseTextProps) => JSX.Element, import("styled-components").DefaultTheme, {
+        flexShrink: 1;
+        variant: "bodyLineHeight";
+        fontWeight: "semiBold";
+    }, "fontWeight" | "variant" | "flexShrink">;
+    var UnderlinedText: import("styled-components").StyledComponent<({ children, bracket, textAlign, ...props }: import("../../Text").BaseTextProps) => JSX.Element, import("styled-components").DefaultTheme, {
+        flexShrink: 1;
+        variant: "bodyLineHeight";
+        fontWeight: "semiBold";
+    }, "fontWeight" | "variant" | "flexShrink">;
+}
+export default Alert;

package/lib/components/message/Alert/index.js

@@ -1,51 +1,72 @@
 import React from "react";
 import styled, { useTheme } from "styled-components/native";
-import InfoMedium from "@ledgerhq/icons-ui/native/InfoMedium";
-import CircledCrossMedium from "@ledgerhq/icons-ui/native/CircledCrossMedium";
-import CircledAlertMedium from "@ledgerhq/icons-ui/native/CircledAlertMedium";
+import InfoAltFillMedium from "@ledgerhq/icons-ui/native/InfoAltFillMedium";
+import CircledCheckSolidMedium from "@ledgerhq/icons-ui/native/CircledCheckSolidMedium";
+import WarningSolidMedium from "@ledgerhq/icons-ui/native/WarningSolidMedium";
+import CircledCrossSolidMedium from "@ledgerhq/icons-ui/native/CircledCrossSolidMedium";
 import Text from "../../Text";
-import { getColor } from "../../../styles";
 import FlexBox from "../../Layout/Flex";
+import { getColor } from "../../../styles";
 const icons = {
-    info: InfoMedium,
-    warning: CircledAlertMedium,
-    error: CircledCrossMedium,
+    info: InfoAltFillMedium,
+    secondary: InfoAltFillMedium,
+    success: CircledCheckSolidMedium,
+    warning: WarningSolidMedium,
+    error: CircledCrossSolidMedium,
 };
 const alertColors = {
     info: {
-        backgroundColor: "primary.c20",
-        color: "primary.c90",
+        backgroundColor: "primary.c10",
+        iconColor: "primary.c80",
+    },
+    secondary: {
+        backgroundColor: "opacityDefault.c05",
+        iconColor: "neutral.c80",
+    },
+    success: {
+        backgroundColor: "success.c10",
+        iconColor: "success.c50",
     },
     warning: {
-        backgroundColor: "warning.c30",
-        color: "warning.c100",
+        backgroundColor: "warning.c10",
+        iconColor: "warning.c70",
     },
     error: {
-        backgroundColor: "error.c30",
-        color: "error.c100",
+        backgroundColor: "error.c10",
+        iconColor: "error.c50",
     },
 };
-const StyledIconContainer = styled.View `
-  margin-right: 12px;
-  display: flex;
-  align-items: center;
-`;
+const StyledIconContainer = styled(FlexBox).attrs({
+    mr: 4,
+    alignItems: "center",
+}) ``;
 const StyledAlertContainer = styled(FlexBox).attrs((p) => ({
     backgroundColor: alertColors[p.type || "info"].backgroundColor,
+    p: 6,
 })) `
   width: 100%;
-  border-radius: ${(p) => `${p.theme.radii[1]}px`};
-  padding: 16px;
+  border-radius: ${(p) => `${p.theme.radii[2]}px`};
   flex-direction: row;
-  align-items: center;
+  align-items: flex-start;
+`;
+const AlertBodyText = styled(Text).attrs({
+    flexShrink: 1,
+    variant: "bodyLineHeight",
+    fontWeight: "semiBold",
+}) ``;
+const AlertUnderlinedText = styled(AlertBodyText) `
+  text-decoration-line: underline;
 `;
-export default function Alert({ type = "info", Icon, title, showIcon = true, children, renderContent, }) {
+function Alert({ type = "info", Icon, title, showIcon = true, children }) {
     const theme = useTheme();
-    const textColor = getColor(theme, alertColors[type || "info"].color);
-    const iconProps = { size: 20, color: textColor };
+    const textColor = "neutral.c100";
+    const IconComponent = Icon !== null && Icon !== void 0 ? Icon : icons[type];
     return (React.createElement(StyledAlertContainer, { type: type },
-        showIcon && !!icons[type] && (React.createElement(StyledIconContainer, null, Icon ? React.createElement(Icon, Object.assign({}, iconProps)) : icons[type || "info"](iconProps))),
-        title && (React.createElement(Text, { color: textColor, flexShrink: 1 }, title)),
-        children,
-        renderContent && renderContent({ textColor })));
+        showIcon && !!icons[type] && (React.createElement(StyledIconContainer, null,
+            React.createElement(IconComponent, { size: 20, color: getColor(theme, alertColors[type || "info"].iconColor) }))),
+        title ? (React.createElement(Text, { color: textColor, flexShrink: 1, variant: "bodyLineHeight", fontWeight: "semiBold" }, title)) : null,
+        children));
 }
+Alert.BodyText = AlertBodyText;
+Alert.UnderlinedText = AlertUnderlinedText;
+export default Alert;

package/lib/components/message/Notification/index.js

@@ -14,17 +14,17 @@ const variantProps = {
         padding: 6,
     },
     success: {
-        bg: "success.c100",
+        bg: "success.c50",
         color: "neutral.c00",
         padding: 6,
     },
     warning: {
-        bg: "warning.c100",
+        bg: "warning.c50",
         color: "neutral.c00",
         padding: 6,
     },
     error: {
-        bg: "error.c100",
+        bg: "error.c50",
         color: "neutral.c00",
         padding: 6,
     },

package/lib/components/tags/Tag/index.js

@@ -16,7 +16,7 @@ import { Box } from "../../Layout";
 const typeColor = {
     color: "primary.c80",
     shade: "neutral.c30",
-    warning: "warning.c100",
+    warning: "warning.c50",
 };
 export default function Tag(_a) {
     var { type = "shade", size = "small", color, textColor, uppercase, Icon, children, numberOfLines, ellipsizeMode } = _a, props = __rest(_a, ["type", "size", "color", "textColor", "uppercase", "Icon", "children", "numberOfLines", "ellipsizeMode"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.18.1-next.0",
+  "version": "0.19.0-nightly.1",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -46,9 +46,9 @@
     "rn-range-slider": "2.1.1",
     "styled-system": "^5.1.5",
     "victory-native": "^35.5.5",
-    "@ledgerhq/crypto-icons-ui": "^0.2.2-next.0",
-    "@ledgerhq/icons-ui": "^0.4.0-next.0",
-    "@ledgerhq/ui-shared": "^0.1.10"
+    "@ledgerhq/crypto-icons-ui": "^0.2.2-nightly.0",
+    "@ledgerhq/icons-ui": "^0.4.0-nightly.1",
+    "@ledgerhq/ui-shared": "^0.2.0-nightly.0"
   },
   "peerDependencies": {
     "@types/react": "*",