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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/lib/components/Cards/FullBackgroundCard/index.js +3 -3
  2. package/lib/components/Cards/NotificationCard/index.js +2 -2
  3. package/lib/components/Form/Input/BaseInput/index.js +2 -2
  4. package/lib/components/Layout/List/TipList/index.js +1 -1
  5. package/lib/components/Layout/List/VerticalStepper/StepperItem.js +1 -1
  6. package/lib/components/Layout/List/VerticalTimeline/TimelineIndicator.js +2 -2
  7. package/lib/components/Layout/List/VerticalTimeline/TimelineItem.js +2 -2
  8. package/lib/components/Navigation/Stepper/index.js +2 -2
  9. package/lib/components/cta/Button/getButtonStyle.js +7 -7
  10. package/lib/components/message/Alert/index.js +4 -4
  11. package/lib/components/message/Notification/index.js +3 -3
  12. package/lib/components/tags/Tag/index.js +1 -1
  13. package/package.json +4 -4
package/lib/components/Cards/FullBackgroundCard/index.js CHANGED
@@ -12,8 +12,8 @@ const FullBackgroundCard = ({ variant, backgroundImage, tag, description, onPres
12
12
  const { colors } = useTheme();
13
13
  const backgroundVariants = useMemo(() => ({
14
14
  purple: colors.primary.c80,
15
- red: colors.error.c60,
16
- }), [colors.primary.c80, colors.error.c60]);
15
+ red: colors.error.c30,
16
+ }), [colors.primary.c80, colors.error.c30]);
17
17
  const backgroundVariantColor = variant && backgroundVariants[variant]
18
18
  ? backgroundVariants[variant]
19
19
  : backgroundVariants.purple;
@@ -26,7 +26,7 @@ const FullBackgroundCard = ({ variant, backgroundImage, tag, description, onPres
26
26
  React.createElement(ShadowGradient, { color: colors.neutral.c00 }))) : (React.createElement(ColoredGradient, { color: backgroundVariantColor, opacityColor: colors.neutral.c20 })),
27
27
  React.createElement(Flex, { p: 6 },
28
28
  React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between", mb: 3 },
29
- React.createElement(Flex, { bg: "neutral.c100a01", borderRadius: 6, px: 3, py: "6px", maxWidth: "80%" },
29
+ React.createElement(Flex, { bg: "opacityDefault.c10", borderRadius: 6, px: 3, py: "6px", maxWidth: "80%" },
30
30
  React.createElement(Text, { variant: "small", fontWeight: "semiBold", color: "neutral.c90", numberOfLines: 1 }, tag)),
31
31
  React.createElement(TouchableOpacity, { onPress: onDismiss, style: { top: -8, right: -8 } },
32
32
  React.createElement(Flex, { bg: "neutral.c30", p: "6px", borderRadius: 24 },
package/lib/components/Cards/NotificationCard/index.js CHANGED
@@ -6,11 +6,11 @@ import Box from "../../Layout/Box";
6
6
  import Link from "../../cta/Link";
7
7
  import styled from "styled-components/native";
8
8
  import { TouchableOpacity } from "react-native";
9
- const Tag = ({ tag }) => (React.createElement(Flex, { bg: "neutral.c100a01", borderRadius: 6, px: 3, py: "3px", maxWidth: "75%" },
9
+ const Tag = ({ tag }) => (React.createElement(Flex, { bg: "opacityDefault.c10", borderRadius: 6, px: 3, py: "3px", maxWidth: "75%" },
10
10
  React.createElement(Text, { variant: "small", fontWeight: "semiBold", color: "neutral.c90", numberOfLines: 1 }, tag)));
11
11
  const Timer = ({ time, viewed }) => (React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", ml: 2 },
12
12
  React.createElement(Text, { variant: "small", fontWeight: "semiBold", color: "neutral.c90", numberOfLines: 1 }, time),
13
- React.createElement(Box, { ml: 3, backgroundColor: viewed ? "transparent" : "error.c80", height: "8px", width: "8px", borderRadius: 24 })));
13
+ React.createElement(Box, { ml: 3, backgroundColor: viewed ? "transparent" : "error.c40", height: "8px", width: "8px", borderRadius: 24 })));
14
14
  const NotificationCard = (props) => {
15
15
  const { tag = "", time = "", title, description, cta, viewed, onClickCard, showLinkCta, link = "", } = props;
16
16
  const ctaIcon = useMemo(() => {
package/lib/components/Form/Input/BaseInput/index.js CHANGED
@@ -38,7 +38,7 @@ const InputContainer = styled.View `
38
38
  ${(p) => p.error &&
39
39
  !p.disabled &&
40
40
  css `
41
- border: 1px solid ${p.theme.colors.error.c100};
41
+ border: 1px solid ${p.theme.colors.error.c50};
42
42
  `};
43
43
 
44
44
  ${(p) => p.disabled &&
@@ -62,7 +62,7 @@ const BaseInput = styled.TextInput.attrs((p) => ({
62
62
  padding-right: 20px;
63
63
  `;
64
64
  const InputErrorContainer = styled(Text) `
65
- color: ${(p) => p.theme.colors.error.c100};
65
+ color: ${(p) => p.theme.colors.error.c50};
66
66
  margin-left: 12px;
67
67
  `;
68
68
  export const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({
package/lib/components/Layout/List/TipList/index.js CHANGED
@@ -15,6 +15,6 @@ import Check from "@ledgerhq/icons-ui/native/CheckAloneMedium";
15
15
  import Close from "@ledgerhq/icons-ui/native/CloseMedium";
16
16
  export default function TipList(_a) {
17
17
  var { items } = _a, props = __rest(_a, ["items"]);
18
- 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]);
18
+ 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]);
19
19
  return React.createElement(List, Object.assign({ items: tipItems }, props));
20
20
  }
package/lib/components/Layout/List/VerticalStepper/StepperItem.js CHANGED
@@ -43,7 +43,7 @@ export default function StepperItem({ item, progress, nested, isLastItem, setAct
43
43
  React.createElement(Container, { nested: nested, status: item.status, isLastItem: isLastItem },
44
44
  React.createElement(Flex, { px: nested ? 0 : 4, py: nested ? 4 : 7, flexDirection: nested ? "row-reverse" : "row", justifyContent: nested ? "space-between" : "flex-start" },
45
45
  React.createElement(Flex, { width: "28px", alignItems: "center" },
46
- item.status === "completed" && React.createElement(CheckAloneMedium, { size: 20, color: "success.c100" }),
46
+ item.status === "completed" && React.createElement(CheckAloneMedium, { size: 20, color: "success.c50" }),
47
47
  item.status === "active" && (React.createElement(ProgressLoader, { progress: progress, infinite: !progress, radius: 10, strokeWidth: 2 }))),
48
48
  React.createElement(Flex, { flex: 1, ml: nested ? 0 : 4, mr: nested ? 0 : 2 },
49
49
  React.createElement(Flex, { pb: item.status === "active" && item.renderBody ? 4 : undefined },
package/lib/components/Layout/List/VerticalTimeline/TimelineIndicator.js CHANGED
@@ -58,7 +58,7 @@ const getIconBackground = (theme, status, isLastItem) => {
58
58
  };
59
59
  const getIconBorder = (theme, status, isLastItem) => {
60
60
  if (isLastItem) {
61
- return theme.colors.success.c100;
61
+ return theme.colors.success.c50;
62
62
  }
63
63
  else if (status === "inactive") {
64
64
  return theme.colors.neutral.c50;
@@ -79,7 +79,7 @@ export default function TimelineIndicator(_a) {
79
79
  const { colors } = useTheme();
80
80
  return (React.createElement(Flex, Object.assign({ flexDirection: "column", alignItems: "center" }, props),
81
81
  React.createElement(TopSegmentSvg, { status: status, hidden: isFirstItem, height: PixelRatio.roundToNearestPixel(topHeight || topSegmentDefaultHeight) }),
82
- React.createElement(CenterCircle, { status: status, isLastItem: isLastItem }, status === "completed" && (React.createElement(CircledCheckSolidMedium, { color: isLastItem ? colors.success.c100 : colors.primary.c80, size: 20 }))),
82
+ React.createElement(CenterCircle, { status: status, isLastItem: isLastItem }, status === "completed" && (React.createElement(CircledCheckSolidMedium, { color: isLastItem ? colors.success.c50 : colors.primary.c80, size: 20 }))),
83
83
  React.createElement(BottomSegmentSvg, { status: status, hidden: isLastItem })));
84
84
  }
85
85
  TimelineIndicator.topSegmentDefaultHeight = topSegmentDefaultHeight;
package/lib/components/Layout/List/VerticalTimeline/TimelineItem.js CHANGED
@@ -20,7 +20,7 @@ const getContainerBorder = (theme, status, isLastItem) => {
20
20
  return "transparent";
21
21
  }
22
22
  else if (isLastItem && status === "active") {
23
- return theme.colors.success.c100;
23
+ return theme.colors.success.c50;
24
24
  }
25
25
  else if (status === "active") {
26
26
  return theme.colors.neutral.c40;
@@ -70,7 +70,7 @@ export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, i
70
70
  React.createElement(Container, { status: item.status, isLastItem: isLastItem, mt: withExtraMarginOnActiveStep && !isFirstItem && item.status === "active" ? 4 : 0, mb: withExtraMarginOnActiveStep && !isLastItem && item.status === "active" ? 4 : 0 },
71
71
  React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between" },
72
72
  React.createElement(Text, { variant: "body", fontWeight: "semiBold", flexShrink: 1, color: item.status === "completed" && isLastItem
73
- ? "success.c80"
73
+ ? "success.c40"
74
74
  : item.status === "active"
75
75
  ? "primary.c80"
76
76
  : "neutral.c70" }, item.status === "completed" ? (_a = item.doneTitle) !== null && _a !== void 0 ? _a : item.title : item.title),
package/lib/components/Navigation/Stepper/index.js CHANGED
@@ -91,7 +91,7 @@ const PendingText = styled(Text) `
91
91
  color: ${(p) => p.theme.colors.neutral.c70};
92
92
  `;
93
93
  const ErroredText = styled(Text) `
94
- color: ${(p) => p.theme.colors.error.c100};
94
+ color: ${(p) => p.theme.colors.error.c50};
95
95
  `;
96
96
  function Step({ state, label, showLeftSeparator, showRightSeparator, }) {
97
97
  const labelText = useMemo(() => {
@@ -116,7 +116,7 @@ function Step({ state, label, showLeftSeparator, showRightSeparator, }) {
116
116
  React.createElement(StepIcon.Current, null)));
117
117
  case "ERRORED":
118
118
  return (React.createElement(StepIcon.Background, { backgroundColor: "warning.c30" },
119
- React.createElement(StepIcon.Errored, { color: colors.error.c100 })));
119
+ React.createElement(StepIcon.Errored, { color: colors.error.c50 })));
120
120
  case "PENDING":
121
121
  return (React.createElement(StepIcon.Background, null,
122
122
  React.createElement(StepIcon.Pending, null)));
package/lib/components/cta/Button/getButtonStyle.js CHANGED
@@ -13,21 +13,21 @@ export function getButtonColors(colors) {
13
13
  main: {
14
14
  primaryColor: colors.neutral.c00,
15
15
  secondaryColor: colors.neutral.c100,
16
- pressedColor: colors.neutral.c100a06,
17
- pressedOutlineColor: colors.neutral.c100a01,
16
+ pressedColor: colors.opacityDefault.c60,
17
+ pressedOutlineColor: colors.opacityDefault.c10,
18
18
  },
19
19
  shade: {
20
20
  primaryColor: colors.neutral.c00,
21
21
  secondaryColor: colors.neutral.c100,
22
22
  tertiaryColor: colors.neutral.c40,
23
- pressedColor: colors.neutral.c100a06,
24
- pressedOutlineColor: colors.neutral.c100a01,
23
+ pressedColor: colors.opacityDefault.c60,
24
+ pressedOutlineColor: colors.opacityDefault.c10,
25
25
  },
26
26
  error: {
27
27
  primaryColor: colors.neutral.c00,
28
- secondaryColor: colors.error.c100,
29
- pressedColor: colors.error.c100a07,
30
- pressedOutlineColor: colors.error.c100a025,
28
+ secondaryColor: colors.error.c50,
29
+ pressedColor: colors.error.c50a07,
30
+ pressedOutlineColor: colors.error.c50a025,
31
31
  },
32
32
  color: {
33
33
  primaryColor: colors.neutral.c00,
package/lib/components/message/Alert/index.js CHANGED
@@ -17,12 +17,12 @@ const alertColors = {
17
17
  color: "primary.c90",
18
18
  },
19
19
  warning: {
20
- backgroundColor: "warning.c30",
21
- color: "warning.c100",
20
+ backgroundColor: "warning.c20",
21
+ color: "warning.c90",
22
22
  },
23
23
  error: {
24
- backgroundColor: "error.c30",
25
- color: "error.c100",
24
+ backgroundColor: "error.c20",
25
+ color: "error.c90",
26
26
  },
27
27
  };
28
28
  const StyledIconContainer = styled.View `
package/lib/components/message/Notification/index.js CHANGED
@@ -14,17 +14,17 @@ const variantProps = {
14
14
  padding: 6,
15
15
  },
16
16
  success: {
17
- bg: "success.c100",
17
+ bg: "success.c50",
18
18
  color: "neutral.c00",
19
19
  padding: 6,
20
20
  },
21
21
  warning: {
22
- bg: "warning.c100",
22
+ bg: "warning.c50",
23
23
  color: "neutral.c00",
24
24
  padding: 6,
25
25
  },
26
26
  error: {
27
- bg: "error.c100",
27
+ bg: "error.c50",
28
28
  color: "neutral.c00",
29
29
  padding: 6,
30
30
  },
package/lib/components/tags/Tag/index.js CHANGED
@@ -16,7 +16,7 @@ import { Box } from "../../Layout";
16
16
  const typeColor = {
17
17
  color: "primary.c80",
18
18
  shade: "neutral.c30",
19
- warning: "warning.c100",
19
+ warning: "warning.c50",
20
20
  };
21
21
  export default function Tag(_a) {
22
22
  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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ledgerhq/native-ui",
3
- "version": "0.18.1-next.0",
3
+ "version": "0.18.1-nightly.0",
4
4
  "description": "Ledger Live - Mobile UI",
5
5
  "repository": {
6
6
  "type": "git",
@@ -46,9 +46,9 @@
46
46
  "rn-range-slider": "2.1.1",
47
47
  "styled-system": "^5.1.5",
48
48
  "victory-native": "^35.5.5",
49
- "@ledgerhq/crypto-icons-ui": "^0.2.2-next.0",
50
- "@ledgerhq/icons-ui": "^0.4.0-next.0",
51
- "@ledgerhq/ui-shared": "^0.1.10"
49
+ "@ledgerhq/crypto-icons-ui": "^0.2.2-nightly.0",
50
+ "@ledgerhq/icons-ui": "^0.4.0-nightly.1",
51
+ "@ledgerhq/ui-shared": "^0.2.0-nightly.0"
52
52
  },
53
53
  "peerDependencies": {
54
54
  "@types/react": "*",