@ledgerhq/native-ui 0.1.1 → 0.5.0

package/styles/InvertTheme.d.ts

@@ -3,7 +3,6 @@ import { ThemeNames } from "@ledgerhq/ui-shared";
 interface Props {
     children: React.ReactNode;
     selectedPalette?: ThemeNames;
-    fontsPath?: string;
 }
 export declare const InvertTheme: ({ children }: Props) => React.ReactElement;
 export {};

package/styles/StyleProvider.d.ts

@@ -7,15 +7,6 @@ declare type Props = {
 };
 declare module "styled-components" {
     interface DefaultTheme extends Theme {
-        sizes: {
-            topBarHeight: number;
-            sideBarWidth: number;
-        };
-        radii: number[];
-        fontSizes: number[];
-        space: number[];
-        colors: Record<string, any>;
-        zIndexes: number[];
     }
 }
 export declare const StyleProvider: ({ children, selectedPalette, }: Props) => React.ReactElement;

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/helpers.d.ts

@@ -3,4 +3,6 @@ export declare const hex: (color: string) => string;
 export declare const darken: (c: string, a: number) => string;
 export declare const lighten: (c: string, a: number) => string;
 export declare const mix: (c: string, b: string, a: number) => string;
-export declare const getColor: (p: Record<string, any>, color: string) => string;
+export declare const getColor: (p: {
+    colors: unknown;
+}, color: string) => string;

package/styles/helpers.js

@@ -5,13 +5,10 @@ export const darken = (c, a) => Color(c).darken(a).toString();
 export const lighten = (c, a) => Color(c).lighten(a).toString();
 export const mix = (c, b, a) => Color(c).mix(Color(b), a).toString();
 const get = (object, path) => {
-    let p = path;
-    if (typeof path === "string")
-        p = path.split(".").filter((key) => key.length);
-    // @ts-expect-error FIXME
-    return p.reduce(
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-    (dive, key) => dive && dive[key], object);
+    const p = typeof path === "string"
+        ? path.split(".").filter((key) => key.length)
+        : path;
+    return p.reduce((dive, key) => dive && dive[key], object);
 };
 export const getColor = (p, color) => {
     const c = get(p.colors, color);

package/styles/theme.d.ts

@@ -1,39 +1,10 @@
+import { ColorPalette } from "@ledgerhq/ui-shared";
 export declare const space: number[];
-export declare const fontSizes: number[];
+export declare type TextVariants = "h1" | "h2" | "h3" | "h4" | "large" | "body" | "bodyLineHeight" | "paragraph" | "paragraphLineHeight" | "small" | "subtitle" | "tiny";
+export declare type ThemeScale<Type, Aliases extends string> = Array<Type> & Record<Aliases, Type>;
+export declare const fontSizes: ThemeScale<number, TextVariants>;
 export declare const radii: number[];
 export declare const zIndexes: number[];
-declare const exportedColors: {
-    transparent: string;
-    pearl: string;
-    alertRed: string;
-    warning: string;
-    black: string;
-    dark: string;
-    separator: string;
-    fog: string;
-    gold: string;
-    graphite: string;
-    grey: string;
-    identity: string;
-    lightFog: string;
-    sliderGrey: string;
-    lightGraphite: string;
-    lightGrey: string;
-    starYellow: string;
-    orange: string;
-    positiveGreen: string;
-    greenPill: string;
-    smoke: string;
-    wallet: string;
-    blueTransparentBackground: string;
-    pillActiveBackground: string;
-    lightGreen: string;
-    lightRed: string;
-    lightWarning: string;
-    white: string;
-    experimentalBlue: string;
-};
-export { exportedColors as colors };
 export declare type Theme = {
     theme: string;
     sizes: {
@@ -43,7 +14,12 @@ export declare type Theme = {
     radii: number[];
     fontSizes: number[];
     space: number[];
-    colors: Record<string, any>;
+    colors: ColorPalette & {
+        /**
+         * @deprecated Do not use the .palette prefix anymore!
+         */
+        palette: ColorPalette;
+    };
     zIndexes: number[];
 };
 declare const theme: Theme;

package/styles/theme.js

@@ -1,42 +1,24 @@
+import { palettes } from "@ledgerhq/ui-shared";
+//                    0  1  2  3  4   5   6   7   8   9   10  11  12  13  14
 export const space = [0, 2, 4, 8, 12, 14, 16, 24, 32, 40, 48, 64, 80, 96, 120];
-export const fontSizes = [8, 9, 10, 12, 13, 16, 18, 22, 32];
+//                        0   1   2   3   4   5   6   7   8
+export const fontSizes = [10, 11, 12, 13, 14, 16, 18, 24, 28];
+[
+    fontSizes.tiny,
+    fontSizes.subtitle,
+    fontSizes.small,
+    fontSizes.paragraph,
+    fontSizes.body,
+    fontSizes.large,
+    fontSizes.h3,
+    fontSizes.h2,
+    fontSizes.h1,
+] = fontSizes;
+fontSizes.bodyLineHeight = fontSizes.body;
+fontSizes.paragraphLineHeight = fontSizes.paragraph;
+fontSizes.h4 = fontSizes.h3;
 export const radii = [0, 4, 8];
 export const zIndexes = [-1, 0, 1, 9, 10, 90, 100, 900, 1000];
-// @Rebrand remove this
-const colors = {
-    transparent: "transparent",
-    pearl: "#ff0000",
-    alertRed: "#ea2e49",
-    warning: "#f57f17",
-    black: "#000000",
-    dark: "#142533",
-    separator: "#aaaaaa",
-    fog: "#d8d8d8",
-    gold: "#d6ad42",
-    graphite: "#767676",
-    grey: "#999999",
-    identity: "#41ccb4",
-    lightFog: "#eeeeee",
-    sliderGrey: "#F0EFF1",
-    lightGraphite: "#fafafa",
-    lightGrey: "#f9f9f9",
-    starYellow: "#FFD24A",
-    orange: "#ffa726",
-    positiveGreen: "rgba(102, 190, 84, 1)",
-    greenPill: "#41ccb4",
-    smoke: "#666666",
-    wallet: "#6490f1",
-    blueTransparentBackground: "rgba(100, 144, 241, 0.15)",
-    pillActiveBackground: "rgba(100, 144, 241, 0.1)",
-    lightGreen: "rgba(102, 190, 84, 0.1)",
-    lightRed: "rgba(234, 46, 73, 0.1)",
-    lightWarning: "rgba(245, 127, 23, 0.1)",
-    white: "#ffffff",
-    experimentalBlue: "#165edb",
-};
-// prettier-ignore
-const exportedColors = colors;
-export { exportedColors as colors };
 const theme = {
     theme: "light",
     sizes: {
@@ -46,7 +28,7 @@ const theme = {
     radii,
     fontSizes,
     space,
-    colors,
+    colors: Object.assign(Object.assign({}, palettes.light), { palette: palettes.light }),
     zIndexes,
 };
 export default theme;