@ledgerhq/native-ui 0.3.0 → 0.4.0

package/README.md

@@ -10,7 +10,7 @@
 
 ## Reference
 
-[📚 The storybook is hosted here.](https://ledger-live-ui-native.vercel.app/)
+**[🔗 Storybook](https://ledger-live-ui-native.vercel.app/)**
 
 ## Installation
 
@@ -22,31 +22,21 @@ npm i @ledgerhq/native-ui
 
 ### Peer dependencies
 
-This library uses [styled components](https://styled-components.com/) heavily relies on it being installed separately (to avoid package duplication).
+_This library uses the following packages under the hood and relies on them being installed separately to avoid package duplication._
 
 ```sh
-npm i styled-components
+npm i styled-components react-native-reanimated react-native-svg
 ```
 
-### Required Dependencies
+### Additional setup
 
-**Skip this step if your project is using Expo! ✨**
+**Skip this step if your project is managed by Expo.**
 
-```sh
-npm i react react-native@^0.64.0 react-native-reanimated@~2.2.3 react-native-svg@^12.1.1
-```
-
-Then, follow the installation instructions for:
+Follow the installation instructions for:
 
 - [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/installation)
 - [react-native-svg](https://github.com/react-native-svg/react-native-svg#installation)
 
-### Recommended Dependencies
-
-```sh
-npm i styled-components
-```
-
 ## Usage
 
 ### Provider
@@ -72,7 +62,7 @@ import { Flex, Text } from "@ledgerhq/native-ui";
 function Hello() {
   return (
     <Flex flexDirection="column" alignItems="center">
-      <Text variant="h1" color="palette.neutral.c100">
+      <Text variant="h1" color="neutral.c100">
         Hello, world!
       </Text>
     </Flex>
@@ -143,7 +133,7 @@ import { useFonts } from "expo-font";
 
 function Logo() {
   const theme = useTheme();
-  return <Logos.LedgerLiveRegular color={theme.colors.palette.neutral.c100} />;
+  return <Logos.LedgerLiveRegular color={theme.colors.neutral.c100} />;
 }
 
 function FontProvider({ children }) {
@@ -173,10 +163,10 @@ export default function App() {
           justifyContent="center"
           alignItems="center"
           flexDirection="column"
-          backgroundColor="palette.neutral.c00"
+          backgroundColor="neutral.c00"
         >
           <Logo />
-          <Text variant="h2" color="palette.neutral.c100" my={10}>
+          <Text variant="h2" color="neutral.c100" my={10}>
             Hello, world!
           </Text>
           <Switch
@@ -200,7 +190,7 @@ import { useTheme } from "styled-components/native";
 
 function Logo() {
   const theme = useTheme();
-  return <Logos.LedgerLiveRegular color={theme.colors.palette.neutral.c100} />;
+  return <Logos.LedgerLiveRegular color={theme.colors.neutral.c100} />;
 }
 
 export default function App() {
@@ -215,10 +205,10 @@ export default function App() {
         justifyContent="center"
         alignItems="center"
         flexDirection="column"
-        backgroundColor="palette.neutral.c00"
+        backgroundColor="neutral.c00"
       >
         <Logo />
-        <Text variant="h2" color="palette.neutral.c100" my={10}>
+        <Text variant="h2" color="neutral.c100" my={10}>
           Hello, world!
         </Text>
         <Switch

package/components/Form/Checkbox/index.js

@@ -11,16 +11,16 @@ const Square = styled(Flex).attrs({
   width: 18px;
   height: 18px;
   border-radius: 4px;
-  color: ${({ theme }) => theme.colors.palette.neutral.c00};
+  color: ${({ theme }) => theme.colors.neutral.c00};
   ${({ checked, theme }) => checked
-    ? `background-color: ${theme.colors.palette.primary.c90};`
-    : `border: 1px solid ${theme.colors.palette.neutral.c50};`}
+    ? `background-color: ${theme.colors.primary.c90};`
+    : `border: 1px solid ${theme.colors.neutral.c50};`}
 `;
 const Checkbox = ({ checked, onChange, disabled, label, }) => {
     const { colors, space } = useTheme();
     return (React.createElement(Pressable, { onPress: onChange, disabled: disabled },
         React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
-            React.createElement(Square, { checked: checked }, checked ? (React.createElement(CheckAlone, { size: 13, color: colors.palette.neutral.c00 })) : null),
-            label ? (React.createElement(Text, { variant: "body", color: checked ? colors.palette.primary.c90 : colors.palette.neutral.c100, style: { marginLeft: space[2] } }, label)) : null)));
+            React.createElement(Square, { checked: checked }, checked ? React.createElement(CheckAlone, { size: 13, color: colors.neutral.c00 }) : null),
+            label ? (React.createElement(Text, { variant: "body", color: checked ? colors.primary.c90 : colors.neutral.c100, style: { marginLeft: space[2] } }, label)) : null)));
 };
 export default Checkbox;

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

@@ -18,38 +18,38 @@ const InputContainer = styled.View `
   display: flex;
   flex-direction: row;
   width: 100%;
-  background: ${(p) => p.theme.colors.palette.neutral.c00};
+  background: ${(p) => p.theme.colors.neutral.c00};
   height: 48px;
-  border: ${(p) => `1px solid ${p.theme.colors.palette.neutral.c40}`};
+  border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};
   border-radius: 24px;
-  color: ${(p) => p.theme.colors.palette.neutral.c100};
+  color: ${(p) => p.theme.colors.neutral.c100};
 
   ${(p) => p.disabled &&
     css `
-      color: ${p.theme.colors.palette.neutral.c60};
-      background: ${(p) => p.theme.colors.palette.neutral.c30};
+      color: ${p.theme.colors.neutral.c60};
+      background: ${(p) => p.theme.colors.neutral.c30};
     `};
 
   ${(p) => p.focus &&
     !p.error &&
     css `
-      border: 1px solid ${p.theme.colors.palette.primary.c80};
+      border: 1px solid ${p.theme.colors.primary.c80};
     `};
 
   ${(p) => p.error &&
     !p.disabled &&
     css `
-      border: 1px solid ${p.theme.colors.palette.error.c100};
+      border: 1px solid ${p.theme.colors.error.c100};
     `};
 
   ${(p) => p.disabled &&
     css `
-      color: ${p.theme.colors.palette.neutral.c60};
-      background: ${(p) => p.theme.colors.palette.neutral.c30};
+      color: ${p.theme.colors.neutral.c60};
+      background: ${(p) => p.theme.colors.neutral.c30};
     `};
 `;
 const BaseInput = styled.TextInput.attrs((p) => ({
-    selectionColor: p.theme.colors.palette.primary.c80,
+    selectionColor: p.theme.colors.primary.c80,
 })) `
   height: 100%;
   width: 100%;
@@ -61,7 +61,7 @@ const BaseInput = styled.TextInput.attrs((p) => ({
   padding-right: 20px;
 `;
 const InputErrorContainer = styled(Text) `
-  color: ${(p) => p.theme.colors.palette.error.c100};
+  color: ${(p) => p.theme.colors.error.c100};
   margin-left: 12px;
 `;
 export const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({

package/components/Form/Input/LegendInput/index.js

@@ -15,5 +15,5 @@ import Text from "../../../Text";
 export default function LegendInput(_a) {
     var { legend } = _a, inputProps = __rest(_a, ["legend"]);
     return (React.createElement(Input, Object.assign({}, inputProps, { renderRight: React.createElement(InputRenderRightContainer, null,
-            React.createElement(Text, { color: "palette.neutral.c70", variant: "body" }, legend)) })));
+            React.createElement(Text, { color: "neutral.c70", variant: "body" }, legend)) })));
 }

package/components/Form/Input/NumberInput/index.js

@@ -16,12 +16,8 @@ import Input from "../BaseInput";
 import FlexBox from "../../../Layout/Flex";
 import Text from "../../../Text";
 const PercentButton = styled(TouchableOpacity) `
-  color: ${(p) => p.active
-    ? p.theme.colors.palette.neutral.c00
-    : p.theme.colors.palette.neutral.c70};
-  background-color: ${(p) => p.active
-    ? p.theme.colors.palette.neutral.c100
-    : p.theme.colors.palette.neutral.c00};
+  color: ${(p) => p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c70};
+  background-color: ${(p) => p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c00};
   border-radius: 100px;
   border-width: 0;
   height: 31px;
@@ -47,7 +43,7 @@ export default function NumberInput(_a) {
     return (React.createElement(Input, Object.assign({ serialize: serialize, deserialize: deserialize }, inputProps, { value: value, disabled: disabled, keyboardType: "numeric", renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", py: "3px", mr: "8px", flexDirection: "row" }, [0.25, 0.5, 0.75, 1].map((percent) => {
             const active = !!value && !!max && Number(value) === percent * Number(max);
             return (React.createElement(PercentButton, { key: percent, onPress: () => onPercentClick(percent), active: active, disabled: disabled },
-                React.createElement(Text, { variant: "small", color: active ? "palette.neutral.c00" : "palette.neutral.c70" },
+                React.createElement(Text, { variant: "small", color: active ? "neutral.c00" : "neutral.c70" },
                     percent * 100,
                     "%")));
         })) })));

package/components/Form/Input/QrCodeInput/index.js

@@ -16,7 +16,7 @@ import Input from "../BaseInput";
 import FlexBox from "../../../Layout/Flex";
 import QrCodeMedium from "@ledgerhq/icons-ui/native/QrCodeMedium";
 const QrCodeButton = styled(TouchableOpacity) `
-  background-color: ${(p) => p.theme.colors.palette.neutral.c100};
+  background-color: ${(p) => p.theme.colors.neutral.c100};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -26,7 +26,7 @@ const QrCodeButton = styled(TouchableOpacity) `
   border-width: 0;
 `;
 const Icon = styled(QrCodeMedium).attrs((p) => ({
-    color: p.theme.colors.palette.neutral.c00,
+    color: p.theme.colors.neutral.c00,
 })) ``;
 export default function QrCodeInput(_a) {
     var { onQrCodeClick } = _a, inputProps = __rest(_a, ["onQrCodeClick"]);

package/components/Form/Input/SearchInput/index.js

@@ -3,7 +3,7 @@ import styled from "styled-components/native";
 import Input, { InputRenderLeftContainer } from "../BaseInput";
 import SearchMedium from "@ledgerhq/icons-ui/native/SearchMedium";
 const Icon = styled(SearchMedium).attrs((p) => ({
-    color: p.theme.colors.palette.neutral.c70,
+    color: p.theme.colors.neutral.c70,
 })) ``;
 export default function SearchInput(props) {
     return (React.createElement(Input, Object.assign({}, props, { renderLeft: React.createElement(InputRenderLeftContainer, null,

package/components/Form/SelectableList.js

@@ -12,7 +12,7 @@ const ElementContainer = styled(Flex).attrs({
 `;
 function Element({ first, value, selected, onPress, children, }) {
     return (React.createElement(TouchableOpacity, { onPress: onPress },
-        React.createElement(ElementContainer, { p: 6, mt: first ? 0 : 4, backgroundColor: selected ? "palette.primary.c20" : "palette.neutral.c00", border: "1px solid", borderColor: selected ? "palette.primary.c100" : "palette.neutral.c40", borderRadius: 1 },
+        React.createElement(ElementContainer, { p: 6, mt: first ? 0 : 4, backgroundColor: selected ? "primary.c20" : "neutral.c00", border: "1px solid", borderColor: selected ? "primary.c100" : "neutral.c40", borderRadius: 1 },
             React.createElement(Text, { variant: "large" }, children || value))));
 }
 function SelectableList({ currentValue, onChange, children }) {

package/components/Form/Slider/components.js

@@ -17,19 +17,19 @@ export const RailSelected = styled.View `
   margin-left: -5px;
   margin-right: -5px;
   height: 40px;
-  background-color: ${(p) => p.theme.colors.palette.primary.c40};
+  background-color: ${(p) => p.theme.colors.primary.c40};
   border-radius: 30px;
 `;
 export const Rail = styled.View `
   flex: 1;
   height: 40px;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c30};
+  background-color: ${(p) => p.theme.colors.neutral.c30};
   border-radius: 30px;
 `;
 const ThumbContainer = styled.View `
   height: 40px;
   width: 40px;
-  background-color: ${(p) => p.theme.colors.palette.primary.c90};
+  background-color: ${(p) => p.theme.colors.primary.c90};
   border-radius: 40px;
   display: flex;
   align-items: center;
@@ -38,7 +38,7 @@ const ThumbContainer = styled.View `
 export const Thumb = () => {
     const { colors } = useTheme();
     return (React.createElement(ThumbContainer, null,
-        React.createElement(ArrowsHMedium, { color: colors.palette.neutral.c00, size: 24 })));
+        React.createElement(ArrowsHMedium, { color: colors.neutral.c00, size: 24 })));
 };
 const LabelContainer = styled.View `
   display: flex;
@@ -46,10 +46,10 @@ const LabelContainer = styled.View `
   justify-content: center;
   align-items: center;
   padding: 3.5px 6px;
-  background-color: ${(p) => p.theme.colors.palette.primary.c20};
+  background-color: ${(p) => p.theme.colors.primary.c20};
   border-radius: 4px;
 `;
 export const Label = ({ children }) => {
     return (React.createElement(LabelContainer, null,
-        React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: "palette.primary.c90" }, children)));
+        React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: "primary.c90" }, children)));
 };

package/components/Form/Slider/index.native.js

@@ -20,7 +20,7 @@ const Slider = ({ value, min, max, step, onChange, disabled }) => {
                 width: "100%",
             }, min: min, max: max, low: value, disabled: disabled, step: step, disableRange: true, floatingLabel: true, renderThumb: Thumb, renderRail: renderRail, renderRailSelected: renderRailSelected, renderLabel: renderLabel, renderNotch: renderNotch, onValueChanged: onChange }),
         React.createElement(MinMaxTextContainer, null,
-            React.createElement(Text, { variant: "small", fontWeight: "medium", color: "palette.neutral.c70" }, min),
-            React.createElement(Text, { variant: "small", fontWeight: "medium", color: "palette.neutral.c70" }, max))));
+            React.createElement(Text, { variant: "small", fontWeight: "medium", color: "neutral.c70" }, min),
+            React.createElement(Text, { variant: "small", fontWeight: "medium", color: "neutral.c70" }, max))));
 };
 export default Slider;

package/components/Form/Switch/index.js

@@ -7,9 +7,9 @@ const Switch = ({ checked, onChange, disabled, label, }) => {
     const { colors, space } = useTheme();
     return (React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
         React.createElement(NativeSwitch, { trackColor: {
-                false: colors.palette.neutral.c50,
-                true: colors.palette.primary.c80,
-            }, thumbColor: colors.palette.neutral.c00, onValueChange: onChange, value: checked, disabled: disabled, ios_backgroundColor: colors.palette.neutral.c50 }),
-        label ? (React.createElement(Text, { variant: "body", color: checked ? colors.palette.primary.c90 : colors.palette.neutral.c100, style: { marginLeft: space[3] } }, label)) : null));
+                false: colors.neutral.c50,
+                true: colors.primary.c80,
+            }, thumbColor: colors.neutral.c00, onValueChange: onChange, value: checked, disabled: disabled, ios_backgroundColor: colors.neutral.c50 }),
+        label ? (React.createElement(Text, { variant: "body", color: checked ? colors.primary.c90 : colors.neutral.c100, style: { marginLeft: space[3] } }, label)) : null));
 };
 export default Switch;

package/components/Icon/IconBox/index.js

@@ -9,11 +9,11 @@ const IconContainer = styled.View `
   align-items: center;
   justify-content: center;
   border-width: 1px;
-  border-color: ${(p) => p.theme.colors.palette.neutral.c40};
+  border-color: ${(p) => p.theme.colors.neutral.c40};
   border-radius: ${(p) => `${p.theme.radii[1]}px`};
 `;
 export default function IconBox({ Icon, color, boxSize = DEFAULT_BOX_SIZE, iconSize = DEFAULT_ICON_SIZE, }) {
     const { colors } = useTheme();
     return (React.createElement(IconContainer, { size: boxSize },
-        React.createElement(Icon, { size: iconSize, color: color || colors.palette.neutral.c100 })));
+        React.createElement(Icon, { size: iconSize, color: color || colors.neutral.c100 })));
 }

package/components/Layout/Modals/BaseModal/index.js

@@ -19,7 +19,7 @@ import FlexBox from "../../../Layout/Flex";
 import Text from "../../../Text";
 const { width, height } = sizes;
 const Container = styled.View `
-  background-color: ${(p) => p.theme.colors.palette.background.main};
+  background-color: ${(p) => p.theme.colors.background.main};
   width: 100%;
   padding: 16px;
   min-height: 350px;
@@ -43,14 +43,14 @@ const StyledTitle = styled(Text).attrs({ variant: "h3" }) `
 `;
 const StyledDescription = styled(Text).attrs({
     variant: "body",
-    color: "palette.neutral.c80",
+    color: "neutral.c80",
 }) `
   text-transform: capitalize;
   margin-top: ${(p) => p.theme.space[2]}px;
 `;
 const StyledSubtitle = styled(Text).attrs({
     variant: "subtitle",
-    color: "palette.neutral.c80",
+    color: "neutral.c80",
 }) `
   text-transform: uppercase;
   margin-bottom: ${(p) => p.theme.space[2]}px;
@@ -77,7 +77,7 @@ export default function BaseModal(_a) {
                 Icon && (React.createElement(FlexBox, { mb: 24 }, typeof Icon === "function"
                     ? Icon({
                         size: 48,
-                        color: iconColor || colors.palette.neutral.c100,
+                        color: iconColor || colors.neutral.c100,
                     })
                     : Icon)),
                 subtitle && React.createElement(StyledSubtitle, null, subtitle),

package/components/Layout/ScrollContainerHeader/Header.js

@@ -6,7 +6,7 @@ import Flex from "../Flex";
 const Container = styled(Flex).attrs({
     paddingHorizontal: 16,
 }) `
-  background-color: ${(p) => p.theme.colors.palette.background.main};
+  background-color: ${(p) => p.theme.colors.background.main};
   width: 100%;
 `;
 const SCROLL_BREAKPOINT = 80;

package/components/Layout/index.d.ts

@@ -1,4 +1,6 @@
+export { default as Accordion } from "./Collapse/Accordion";
 export { default as Flex } from "./Flex";
 export * from "./Modals";
 export { default as ScrollContainer } from "./ScrollContainer";
+export { default as ScrollContainerHeader } from "./ScrollContainerHeader";
 export { default as Row } from "./Table/Row";

package/components/Layout/index.js

@@ -1,4 +1,6 @@
+export { default as Accordion } from "./Collapse/Accordion";
 export { default as Flex } from "./Flex";
 export * from "./Modals";
 export { default as ScrollContainer } from "./ScrollContainer";
+export { default as ScrollContainerHeader } from "./ScrollContainerHeader";
 export { default as Row } from "./Table/Row";

package/components/Loader/index.js

@@ -10,8 +10,8 @@ const iconSize = radius * 0.88;
 const iconOffset = radius - iconSize / 2;
 const ProgressLoader = ({ progress = 0, onPress, Icon, }) => {
     const { colors } = useTheme();
-    const backgroundColor = colors.palette.primary.c20;
-    const progressColor = colors.palette.primary.c90;
+    const backgroundColor = colors.primary.c20;
+    const progressColor = colors.primary.c90;
     const strokeDashoffset = circumference - progress * circumference;
     return (React.createElement(TouchableOpacity, { disabled: !onPress, onPress: onPress },
         React.createElement(Svg, { width: radius * 2, height: radius * 2 },

package/components/Navigation/SlideIndicator/index.js

@@ -13,10 +13,10 @@ const Bullet = styled.TouchableOpacity `
   height: 6px;
   border-radius: 6px;
   margin: 0 6px;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c40};
+  background-color: ${(p) => p.theme.colors.neutral.c40};
 `;
 const ActiveBullet = styled(Bullet) `
-  background-color: ${(p) => p.theme.colors.palette.neutral.c100};
+  background-color: ${(p) => p.theme.colors.neutral.c100};
   position: absolute;
   top: 0;
   left: 0;

package/components/Navigation/Stepper/index.js

@@ -19,12 +19,12 @@ import Animated, { useAnimatedStyle, withTiming, withDelay, Easing, } from "reac
 const Separator = styled.View `
   flex: 1;
   height: 1px;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c40};
+  background-color: ${(p) => p.theme.colors.neutral.c40};
   ${space}
 `;
 const SeparatorFilling = Animated.createAnimatedComponent(styled.View `
   height: 100%;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c100};
+  background-color: ${(p) => p.theme.colors.neutral.c100};
 `);
 const AnimatedSeparator = (_a) => {
     var { filled, delay, duration } = _a, spaceProps = __rest(_a, ["filled", "delay", "duration"]);
@@ -67,13 +67,13 @@ const StepIcon = {
     width: ${(p) => p.theme.space[2]}px;
     height: ${(p) => p.theme.space[2]}px;
     border-radius: ${(p) => p.theme.radii[2]}px;
-    background-color: ${(p) => p.theme.colors.palette.primary.c90};
+    background-color: ${(p) => p.theme.colors.primary.c90};
   `,
     Pending: styled.View `
     width: ${(p) => p.theme.space[1]}px;
     height: ${(p) => p.theme.space[1]}px;
     border-radius: ${(p) => p.theme.space[1]}px;
-    background-color: ${(p) => p.theme.colors.palette.neutral.c70};
+    background-color: ${(p) => p.theme.colors.neutral.c70};
   `,
     Completed: ({ color }) => (React.createElement(CheckAlone, { size: 16, color: color })),
     Errored: ({ color }) => (React.createElement(CloseMedium, { size: 16, color: color })),
@@ -85,13 +85,13 @@ const StepView = styled.View `
   justify-content: center;
 `;
 const ActiveText = styled(Text) `
-  color: ${(p) => p.theme.colors.palette.neutral.c100};
+  color: ${(p) => p.theme.colors.neutral.c100};
 `;
 const PendingText = styled(Text) `
-  color: ${(p) => p.theme.colors.palette.neutral.c70};
+  color: ${(p) => p.theme.colors.neutral.c70};
 `;
 const ErroredText = styled(Text) `
-  color: ${(p) => p.theme.colors.palette.error.c100};
+  color: ${(p) => p.theme.colors.error.c100};
 `;
 function Step({ state, label, showLeftSeparator, showRightSeparator, }) {
     const labelText = useMemo(() => {
@@ -109,14 +109,14 @@ function Step({ state, label, showLeftSeparator, showRightSeparator, }) {
     const icon = useMemo(() => {
         switch (state) {
             case "COMPLETED":
-                return (React.createElement(StepIcon.Background, { backgroundColor: "palette.primary.c20" },
-                    React.createElement(StepIcon.Completed, { color: colors.palette.primary.c90 })));
+                return (React.createElement(StepIcon.Background, { backgroundColor: "primary.c20" },
+                    React.createElement(StepIcon.Completed, { color: colors.primary.c90 })));
             case "CURRENT":
-                return (React.createElement(StepIcon.Background, { backgroundColor: "palette.primary.c20" },
+                return (React.createElement(StepIcon.Background, { backgroundColor: "primary.c20" },
                     React.createElement(StepIcon.Current, null)));
             case "ERRORED":
-                return (React.createElement(StepIcon.Background, { backgroundColor: "palette.warning.c30" },
-                    React.createElement(StepIcon.Errored, { color: colors.palette.error.c100 })));
+                return (React.createElement(StepIcon.Background, { backgroundColor: "warning.c30" },
+                    React.createElement(StepIcon.Errored, { color: colors.error.c100 })));
             case "PENDING":
                 return (React.createElement(StepIcon.Background, null,
                     React.createElement(StepIcon.Pending, null)));

package/components/Navigation/ToggleGroup/index.js

@@ -9,7 +9,7 @@ export const ToggleGroupContainer = styled(FlexBox).attrs({
     alignItems: "stretch",
 }) `
   width: 100%;
-  border: ${(p) => `1px solid ${p.theme.colors.palette.neutral.c40}`};
+  border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};
   border-radius: 35px;
   padding: 4px;
 `;

package/components/Text/index.js

@@ -20,7 +20,7 @@ const Base = styled.Text.attrs((p) => {
     var _a;
     return ({
         fontSize: p.fontSize ? p.fontSize : (_a = p.variant) !== null && _a !== void 0 ? _a : "paragraph",
-        color: p.color || "palette.neutral.c100",
+        color: p.color || "neutral.c100",
     });
 }) `
   ${(p) => getTextStyle(p)}
@@ -39,7 +39,7 @@ const T = styled.View `
   align-items: center;
 `;
 const BracketText = (_a) => {
-    var { children, color = "palette.neutral.c100", lineHeight } = _a, props = __rest(_a, ["children", "color", "lineHeight"]);
+    var { children, color = "neutral.c100", lineHeight } = _a, props = __rest(_a, ["children", "color", "lineHeight"]);
     const size = lineHeight || getTextStyle(props).lineHeight;
     const theme = useTheme();
     const c = theme ? getColor(theme, color) : "transparent";

package/components/chart/index.js

@@ -6,7 +6,7 @@ import { VictoryLine, VictoryChart, VictoryAxis, VictoryArea, VictoryScatter, }
 import { hex } from "../../styles/helpers";
 import Flex from "../Layout/Flex";
 const Container = styled(Flex) `
-  background-color: ${(p) => p.theme.colors.palette.background.main};
+  background-color: ${(p) => p.theme.colors.background.main};
 `;
 const sortByDate = (a, b) => {
     if (a.date.getTime() < b.date.getTime())
@@ -22,7 +22,7 @@ const Chart = ({ data, color, tickFormat = "MMM", valueKey = "value", height = 1
         React.createElement(VictoryChart, { scale: { x: "time" }, height: height, domainPadding: { x: [0, 5], y: [30, 10] } },
             React.createElement(VictoryAxis, { dependentAxis: true, crossAxis: true, style: {
                     grid: {
-                        stroke: theme.colors.palette.neutral.c40,
+                        stroke: theme.colors.neutral.c40,
                         strokeDasharray: "4 4",
                     },
                     axisLabel: { display: "none" },
@@ -32,11 +32,11 @@ const Chart = ({ data, color, tickFormat = "MMM", valueKey = "value", height = 1
                 } }),
             React.createElement(VictoryAxis, { crossAxis: false, tickFormat: (timestamp) => moment(timestamp).format(tickFormat), style: {
                     axis: {
-                        stroke: theme.colors.palette.neutral.c40,
+                        stroke: theme.colors.neutral.c40,
                         strokeDasharray: "4 4",
                     },
                     tickLabels: {
-                        fill: theme.colors.palette.neutral.c80,
+                        fill: theme.colors.neutral.c80,
                         fontSize: 12,
                         lineHeight: 14.52,
                     },
@@ -45,14 +45,14 @@ const Chart = ({ data, color, tickFormat = "MMM", valueKey = "value", height = 1
             React.createElement(Defs, null,
                 React.createElement(LinearGradient, { id: "chartGradient", x1: "0.5", x2: "0.5", y1: "0", y2: "1" },
                     React.createElement(Stop, { stopColor: hex(color), stopOpacity: "0.11" }),
-                    React.createElement(Stop, { offset: "1", stopColor: hex(theme.colors.palette.neutral.c00), stopOpacity: "0" }))),
+                    React.createElement(Stop, { offset: "1", stopColor: hex(theme.colors.neutral.c00), stopOpacity: "0" }))),
             React.createElement(VictoryArea, { data: sortData, interpolation: "monotoneX", sortKey: "date", x: "date", y: valueKey, style: { data: { fill: `url(#chartGradient)` } }, standalone: false }),
             React.createElement(VictoryLine, { data: sortData, interpolation: "monotoneX", x: "date", y: valueKey, style: { data: { stroke: color } } }),
             React.createElement(VictoryScatter, { style: {
                     data: {
                         stroke: color,
                         strokeWidth: 3,
-                        fill: theme.colors.palette.background.main,
+                        fill: theme.colors.background.main,
                     },
                 }, size: 5, data: [sortData[sortData.length - 1]], x: "date", y: valueKey }))));
 };

package/components/cta/Button/getButtonStyle.js

@@ -1,29 +1,29 @@
 export function getButtonColors(colors) {
     return {
         default: {
-            primaryColor: colors.palette.neutral.c100,
+            primaryColor: colors.neutral.c100,
             secondaryColor: "rgba(0,0,0,0)",
         },
         disabled: {
-            primaryColor: colors.palette.neutral.c50,
-            secondaryColor: colors.palette.neutral.c30,
+            primaryColor: colors.neutral.c50,
+            secondaryColor: colors.neutral.c30,
         },
         main: {
-            primaryColor: colors.palette.neutral.c00,
-            secondaryColor: colors.palette.neutral.c100,
+            primaryColor: colors.neutral.c00,
+            secondaryColor: colors.neutral.c100,
         },
         shade: {
-            primaryColor: colors.palette.neutral.c00,
-            secondaryColor: colors.palette.neutral.c100,
-            tertiaryColor: colors.palette.neutral.c40,
+            primaryColor: colors.neutral.c00,
+            secondaryColor: colors.neutral.c100,
+            tertiaryColor: colors.neutral.c40,
         },
         error: {
-            primaryColor: colors.palette.neutral.c00,
-            secondaryColor: colors.palette.error.c100,
+            primaryColor: colors.neutral.c00,
+            secondaryColor: colors.error.c100,
         },
         color: {
-            primaryColor: colors.palette.neutral.c00,
-            secondaryColor: colors.palette.primary.c80,
+            primaryColor: colors.neutral.c00,
+            secondaryColor: colors.primary.c80,
         },
     };
 }

package/components/cta/Button/index.js

@@ -91,6 +91,6 @@ export const PromisableButton = (props) => {
     return (React.createElement(Base, Object.assign({}, props, { type: type, size: size, iconButton: !!Icon && !children, disabled: disabled || spinnerOn, onPress: onPressHandler }),
         React.createElement(ButtonContainer, Object.assign({}, props, { type: type, size: size, hide: spinnerOn })),
         React.createElement(SpinnerContainer, null,
-            React.createElement(ActivityIndicator, { color: theme.colors.palette.neutral.c50, animating: spinnerOn }))));
+            React.createElement(ActivityIndicator, { color: theme.colors.neutral.c50, animating: spinnerOn }))));
 };
 export default Button;

package/components/cta/Link/getLinkStyle.js

@@ -1,16 +1,16 @@
 export function getLinkColors(colors) {
     return {
         default: {
-            disabled: colors.palette.neutral.c50,
-            main: colors.palette.neutral.c100,
-            color: colors.palette.primary.c80,
-            shade: colors.palette.neutral.c70,
+            disabled: colors.neutral.c50,
+            main: colors.neutral.c100,
+            color: colors.primary.c80,
+            shade: colors.neutral.c70,
         },
         reversed: {
-            disabled: colors.palette.neutral.c80,
-            main: colors.palette.neutral.c00,
-            color: colors.palette.primary.c60,
-            shade: colors.palette.neutral.c50,
+            disabled: colors.neutral.c80,
+            main: colors.neutral.c00,
+            color: colors.primary.c60,
+            shade: colors.neutral.c50,
         },
     };
 }

package/components/drawer/Notification/index.js

@@ -10,25 +10,19 @@ const NotificationContainer = styled.View `
   flex-direction: row;
   align-items: center;
   padding: 16px;
-  background-color: ${(p) => p.variant === "primary"
-    ? p.theme.colors.palette.primary.c90
-    : "transparent"};
+  background-color: ${(p) => p.variant === "primary" ? p.theme.colors.primary.c90 : "transparent"};
   border-radius: ${(p) => `${p.theme.radii[1]}px`};
 `;
 export default function Notification({ Icon, color, variant = "primary", numberOfLines, title, subtitle, onClose, onLearnMore, }) {
     const { colors } = useTheme();
-    const textColor = variant === "primary"
-        ? colors.palette.neutral.c00
-        : colors.palette.neutral.c100;
+    const textColor = variant === "primary" ? colors.neutral.c00 : colors.neutral.c100;
     return (React.createElement(NotificationContainer, { variant: variant },
         React.createElement(FlexBox, null,
             React.createElement(Icon, { size: 18, color: color || textColor })),
         React.createElement(FlexBox, { ml: 16, flexShrink: 1 },
             React.createElement(Text, { variant: "body", fontWeight: "medium", color: color || textColor, numberOfLines: numberOfLines }, title),
             !!subtitle && (React.createElement(Text, { variant: "body", fontWeight: "medium", color: color ||
-                    (variant === "primary"
-                        ? colors.palette.neutral.c00
-                        : colors.palette.neutral.c80), mt: "2px", mb: "2px" }, subtitle)),
+                    (variant === "primary" ? colors.neutral.c00 : colors.neutral.c80), mt: "2px", mb: "2px" }, subtitle)),
             onLearnMore && (React.createElement(TouchableOpacity, { onPress: onLearnMore },
                 React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: color || textColor }, "Learn more")))),
         onClose && (React.createElement(FlexBox, { marginLeft: "auto", pl: 16 },

package/components/message/Alert/index.js

@@ -13,16 +13,16 @@ const icons = {
 };
 const alertColors = {
     info: {
-        backgroundColor: "palette.primary.c20",
-        color: "palette.primary.c90",
+        backgroundColor: "primary.c20",
+        color: "primary.c90",
     },
     warning: {
-        backgroundColor: "palette.warning.c30",
-        color: "palette.warning.c100",
+        backgroundColor: "warning.c30",
+        color: "warning.c100",
     },
     error: {
-        backgroundColor: "palette.error.c30",
-        color: "palette.error.c100",
+        backgroundColor: "error.c30",
+        color: "error.c100",
     },
 };
 const StyledIconContainer = styled.View `

package/components/tags/Badge/index.js

@@ -4,22 +4,22 @@ import Text from "../../Text";
 const badgesStyle = {
     main: {
         default: {
-            color: "palette.neutral.c80",
+            color: "neutral.c80",
             borderWidth: 1,
-            borderColor: "palette.neutral.c40",
+            borderColor: "neutral.c40",
         },
         active: {
-            color: "palette.neutral.c00",
-            backgroundColor: "palette.neutral.c100",
+            color: "neutral.c00",
+            backgroundColor: "neutral.c100",
         },
     },
     primary: {
         default: {
-            color: "palette.primary.c90",
+            color: "primary.c90",
         },
         active: {
-            color: "palette.primary.c90",
-            backgroundColor: "palette.primary.c20",
+            color: "primary.c90",
+            backgroundColor: "primary.c20",
         },
     },
 };

package/icons/Close.js

@@ -4,5 +4,5 @@ import { useTheme } from "styled-components/native";
 export default function Close({ size = 16, color }) {
     const { colors } = useTheme();
     return (React.createElement(Svg, { viewBox: "0 0 16 16", width: size, height: size },
-        React.createElement(Path, { fill: color || colors.palette.neutral.c100, d: "M9.65 8.413l4.066-4.065a.375.375 0 0 0 0-.532l-.706-.706a.375.375 0 0 0-.531 0L8.413 7.176 4.348 3.11a.375.375 0 0 0-.532 0l-.706.706a.375.375 0 0 0 0 .532l4.066 4.065L3.11 12.48a.375.375 0 0 0 0 .531l.706.706a.375.375 0 0 0 .532 0l4.065-4.065 4.066 4.065a.375.375 0 0 0 .531 0l.706-.706a.375.375 0 0 0 0-.531L9.651 8.413z" })));
+        React.createElement(Path, { fill: color || colors.neutral.c100, d: "M9.65 8.413l4.066-4.065a.375.375 0 0 0 0-.532l-.706-.706a.375.375 0 0 0-.531 0L8.413 7.176 4.348 3.11a.375.375 0 0 0-.532 0l-.706.706a.375.375 0 0 0 0 .532l4.066 4.065L3.11 12.48a.375.375 0 0 0 0 .531l.706.706a.375.375 0 0 0 .532 0l4.065-4.065 4.066 4.065a.375.375 0 0 0 .531 0l.706-.706a.375.375 0 0 0 0-.531L9.651 8.413z" })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Ledger Live - Desktop UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
@@ -25,8 +25,6 @@
     "color": "^3.1.3",
     "moment": "^2.29.1",
     "react-native-modal": "^12.0.3",
-    "react-native-reanimated": "~2.2.4",
-    "react-native-svg": "12.1.1",
     "rn-range-slider": "^2.1.1",
     "styled-system": "^5.1.5",
     "victory-native": "^35.5.5"
@@ -34,8 +32,8 @@
   "peerDependencies": {
     "react": "^17.0.2",
     "react-native": "^0.64.0",
-    "react-native-reanimated": "~2.2.3",
-    "react-native-svg": "12.1.1",
+    "react-native-reanimated": "^2.2.4",
+    "react-native-svg": "^12.1.1",
     "styled-components": "^5.3.3"
   }
 }

package/styles/StyleProvider.js

@@ -3,6 +3,6 @@ import { ThemeProvider } from "styled-components/native";
 import defaultTheme from "./theme";
 import { palettes } from "@ledgerhq/ui-shared";
 export const StyleProvider = ({ children, selectedPalette, }) => {
-    const theme = useMemo(() => (Object.assign(Object.assign({}, defaultTheme), { colors: Object.assign(Object.assign({}, defaultTheme.colors), { palette: palettes[selectedPalette] }), theme: selectedPalette })), [selectedPalette]);
+    const theme = useMemo(() => (Object.assign(Object.assign({}, defaultTheme), { colors: Object.assign(Object.assign(Object.assign({}, defaultTheme.colors), palettes[selectedPalette]), { palette: palettes[selectedPalette] }), theme: selectedPalette })), [selectedPalette]);
     return React.createElement(ThemeProvider, { theme: theme }, children);
 };

package/styles/theme.d.ts

@@ -14,7 +14,10 @@ export declare type Theme = {
     radii: number[];
     fontSizes: number[];
     space: number[];
-    colors: {
+    colors: ColorPalette & {
+        /**
+         * @deprecated Do not use the .palette prefix anymore!
+         */
         palette: ColorPalette;
     };
     zIndexes: number[];

package/styles/theme.js

@@ -26,9 +26,7 @@ const theme = {
     radii,
     fontSizes,
     space,
-    colors: {
-        palette: palettes.light,
-    },
+    colors: Object.assign(Object.assign({}, palettes.light), { palette: palettes.light }),
     zIndexes,
 };
 export default theme;