@ledgerhq/react-ui 0.1.1 → 0.4.0

package/styles/global.js

@@ -1,60 +1,38 @@
 import { createGlobalStyle } from "styled-components";
 import { rgba } from "./helpers";
-import reset from "./reset";
-import textStyles, { fontStyles } from "../components/asorted/Text/styles";
 import tippyStyles from "../components/message/Tooltip/styles";
+import { fontStyles } from "../components/asorted/Text/styles";
 export const GlobalStyle = createGlobalStyle `
-  ${reset};
+  html {
+    box-sizing: border-box;
+  }
 
   body {
     font-family: Inter;
     font-size: 100%;
   }
 
-  ${(props) => (props.fontsPath ? fontStyles : "")}
-  ${textStyles}
-
-  .spectron-run canvas:not(.visible-for-spectron) {
-    visibility: hidden;
+  *, *:before, *:after {
+    box-sizing: inherit;
   }
 
-  #react-root {
-    display: flex;
-    flex-direction: column;
-    max-width: 100%;
-    max-height: 100%;
-    width: 100vw;
-    height: 100vh;
-    background-color: ${(p) => p.theme.colors.palette.neutral.c00};
+  * {
+    margin: 0;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    user-select: inherit;
+    cursor: inherit;
+    outline: none;
   }
 
   ::selection {
-    background: ${(p) => rgba(p.theme.colors.palette.primary.c100, 0.1)};
+    background: ${(p) => rgba(p.theme.colors.primary.c100, 0.1)};
   }
 
   --track-color: rgba(0,0,0,0);
 
-  ::-webkit-scrollbar              {
-    width: ${(p) => p.theme.overflow.trackSize}px;
-    height: ${(p) => p.theme.overflow.trackSize}px;
-    background-color: rgba(0,0,0,0);
-  }
-  ::-webkit-scrollbar-button       {
-    opacity: 0;
-    height: 0;
-    width: 0;
-  }
-  ::-webkit-scrollbar-track        {
-    background-color: rgba(0,0,0,0);
-  }
-  ::-webkit-scrollbar-thumb        {
-    box-shadow: inset 0 0 0 ${(p) => p.theme.overflow.trackSize}px var(--track-color);
-    border: 2px solid rgba(0,0,0,0);
-    border-radius: ${(p) => p.theme.overflow.trackSize}px;
-  }
-  ::-webkit-scrollbar-corner {
-    opacity: 0;
-  }
+  ${(props) => (typeof props.fontsPath === "string" ? fontStyles : "")}
 
   ${tippyStyles}
 `;

package/styles/index.d.ts

@@ -1,7 +1,6 @@
 export { default as defaultTheme } from "./theme";
 export * from "./helpers";
 export * from "./global";
-export { default as resetCss } from "./reset";
 export * from "./StyleProvider";
 export type { ThemeNames, ColorPalette } from "@ledgerhq/ui-shared";
 export { palettes } from "@ledgerhq/ui-shared";

package/styles/index.js

@@ -1,6 +1,5 @@
 export { default as defaultTheme } from "./theme";
 export * from "./helpers";
 export * from "./global";
-export { default as resetCss } from "./reset";
 export * from "./StyleProvider";
 export { palettes } from "@ledgerhq/ui-shared";

package/styles/theme.d.ts

@@ -1,7 +1,9 @@
 import { DefaultTheme } from "styled-components";
 import { ColorPalette } from "@ledgerhq/ui-shared";
 export declare const space: number[];
-export declare const fontSizes: number[];
+export declare type TextVariants = "h1" | "h2" | "h3" | "h4" | "h5" | "large" | "largeLineHeight" | "body" | "bodyLineHeight" | "paragraph" | "paragraphLineHeight" | "small" | "extraSmall" | "tiny" | "micro" | "subtitle";
+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 shadows: string[];
 export declare const zIndexes: number[];
@@ -43,47 +45,69 @@ export declare const fontFamilies: {
         };
     };
 };
-interface Font {
-    weight: number;
-    style: string;
-}
-export interface Theme extends DefaultTheme {
-    sizes: {
-        topBarHeight: number;
-        sideBarWidth: number;
-        drawer: {
-            side: {
-                big: {
-                    width: number;
-                };
-                small: {
-                    width: number;
-                };
-            };
-            popin: {
-                min: {
-                    height: number;
-                    width: number;
+declare const transition: (properties?: string[]) => FlattenSimpleInterpolation;
+declare const animations: {
+    fadeIn: () => FlattenSimpleInterpolation;
+    fadeOut: () => FlattenSimpleInterpolation;
+    fadeInGrowX: () => FlattenSimpleInterpolation;
+    fadeInUp: () => FlattenSimpleInterpolation;
+};
+declare const overflow: {
+    x: FlattenInterpolation<ThemeProps<DefaultTheme>>;
+    y: FlattenInterpolation<ThemeProps<DefaultTheme>>;
+    yAuto: FlattenInterpolation<ThemeProps<DefaultTheme>>;
+    xy: FlattenInterpolation<ThemeProps<DefaultTheme>>;
+    trackSize: number;
+};
+declare module "styled-components" {
+    interface Font {
+        weight: number;
+        style: string;
+    }
+    interface DefaultTheme {
+        theme: string;
+        animations: typeof animations;
+        transition: typeof transition;
+        overflow: typeof overflow;
+        sizes: {
+            topBarHeight: number;
+            sideBarWidth: number;
+            drawer: {
+                side: {
+                    big: {
+                        width: number;
+                    };
+                    small: {
+                        width: number;
+                    };
                 };
-                max: {
-                    height: number;
-                    width: number;
+                popin: {
+                    min: {
+                        height: number;
+                        width: number;
+                    };
+                    max: {
+                        height: number;
+                        width: number;
+                    };
                 };
             };
         };
-    };
-    radii: number[];
-    fontFamilies: Record<string, Record<string, Font>>;
-    fontSizes: number[];
-    space: number[];
-    shadows: string[];
-    colors: {
-        palette: ColorPalette;
-    };
-    animations: Record<string, (props: never) => any>;
-    transition: (properties?: Array<string>) => any;
-    overflow: Record<string, any>;
-    zIndexes: number[];
+        radii: number[];
+        fontFamilies: Record<string, Record<string, Font>>;
+        fontSizes: number[];
+        space: number[];
+        shadows: string[];
+        colors: ColorPalette & {
+            /**
+             * @deprecated Do not use the .palette prefix anymore!
+             */
+            palette: ColorPalette;
+        };
+        fontWeights: Record<string, string>;
+        zIndexes: number[];
+    }
 }
-declare const theme: Theme;
+declare const theme: DefaultTheme;
 export default theme;
+export declare type Theme = DefaultTheme;

package/styles/theme.js

@@ -6,7 +6,34 @@ import { palettes } from "@ledgerhq/ui-shared";
 export const space = [
     0, 2, 4, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 68, 72, 76,
 ];
-export const fontSizes = [8, 9, 10, 12, 13, 16, 18, 22, 32];
+export const fontSizes = [8, 10, 11, 12, 13, 14, 16, 20, 24, 28, 32, 36];
+[
+    fontSizes.micro,
+    fontSizes.tiny,
+    fontSizes.extraSmall,
+    fontSizes.small,
+    fontSizes.paragraph,
+    fontSizes.body,
+    fontSizes.large,
+    fontSizes.h5,
+    fontSizes.h4,
+    fontSizes.h3,
+    fontSizes.h2,
+    fontSizes.h1,
+] = fontSizes;
+fontSizes.largeLineHeight = fontSizes.large;
+fontSizes.bodyLineHeight = fontSizes.body;
+fontSizes.paragraphLineHeight = fontSizes.paragraph;
+fontSizes.subtitle = fontSizes.extraSmall;
+const fontWeights = {
+    extraLight: "100",
+    light: "300",
+    regular: "400",
+    medium: "500",
+    semiBold: "600",
+    bold: "700",
+    extraBold: "800",
+};
 export const radii = [0, 4, 8, 12];
 export const shadows = ["0 4px 8px 0 rgba(0, 0, 0, 0.03)"];
 export const zIndexes = [-1, 0, 1, 9, 10, 90, 100, 900, 1000];
@@ -114,7 +141,7 @@ const overflow = {
     overflow-x: scroll;
     will-change: transform;
     &:hover {
-      --track-color: ${(p) => p.theme.colors.palette.neutral.c30};
+      --track-color: ${(p) => p.theme.colors.neutral.c30};
     }
   `,
     y: css `
@@ -122,7 +149,7 @@ const overflow = {
     overflow-y: scroll;
     will-change: transform;
     &:hover {
-      --track-color: ${(p) => p.theme.colors.palette.neutral.c30};
+      --track-color: ${(p) => p.theme.colors.neutral.c30};
     }
   `,
     yAuto: css `
@@ -130,14 +157,14 @@ const overflow = {
     overflow-y: auto;
     will-change: transform;
     &:hover {
-      --track-color: ${(p) => p.theme.colors.palette.neutral.c30};
+      --track-color: ${(p) => p.theme.colors.neutral.c30};
     }
   `,
     xy: css `
     overflow: scroll;
     will-change: transform;
     &:hover {
-      --track-color: ${(p) => p.theme.colors.palette.neutral.c30};
+      --track-color: ${(p) => p.theme.colors.neutral.c30};
     }
   `,
     trackSize: 12,
@@ -171,11 +198,10 @@ const theme = {
     radii,
     fontFamilies,
     fontSizes,
+    fontWeights,
     space,
     shadows,
-    colors: {
-        palette: palettes.light,
-    },
+    colors: Object.assign({ palette: palettes.light }, palettes.light),
     animations,
     overflow,
     transition,

package/components/layout/Side/Side.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-interface DrawerProps {
-    isOpen: boolean;
-    children: React.ReactNode;
-    title?: React.ReactNode;
-    big?: boolean;
-    small?: boolean;
-    onClose: () => void;
-    onBack?: () => void;
-    setTransitionsEnabled: (arg0: boolean) => void;
-}
-declare const DrawerWrapper: ({ children, ...sideProps }: DrawerProps) => React.ReactElement;
-export default DrawerWrapper;

package/styles/reset.d.ts

@@ -1,2 +0,0 @@
-declare const _default: "\n* {\n  -webkit-font-smoothing: antialiased;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font: inherit;\n  color: inherit;\n  user-select: inherit;\n  cursor: inherit;\n  min-width: 0;\n  outline: none;\n\n  /* it will surely make problem in the future... to be inspected. */\n  /* ;_; */\n  flex-shrink: 0;\n}\n\nbody {\n  cursor: default;\n  font-family: Inter, Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  font-weight: 300;\n  line-height: 1.5;\n  user-select: none;\n  cursor: default;\n}\n\nb {\n  font-weight: bold;\n}\n\nem {\n  font-style: italic;\n}\n\n#a11y-status-message {\n  display: none;\n}\n\n.scroll-content {\n  height: 100%;\n\n  > div {\n    height: 100%;\n  }\n}\n.scrollbar-thumb {\n  background: rgb(102, 102, 102) !important;\n  padding: 2px;\n  background-clip: content-box !important;\n}\n.scrollbar-track {\n  background: transparent !important;\n  transition: opacity 0.2s ease-in-out !important;\n  z-index: 20 !important;\n}\n\n.currentTicker {\n  background: palette.background.paper;\n  z-index: 11 !important;\n}";
-export default _default;

package/styles/reset.js

@@ -1,62 +0,0 @@
-export default `
-* {
-  -webkit-font-smoothing: antialiased;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  font: inherit;
-  color: inherit;
-  user-select: inherit;
-  cursor: inherit;
-  min-width: 0;
-  outline: none;
-
-  /* it will surely make problem in the future... to be inspected. */
-  /* ;_; */
-  flex-shrink: 0;
-}
-
-body {
-  cursor: default;
-  font-family: Inter, Arial, Helvetica, sans-serif;
-  font-size: 16px;
-  font-weight: 300;
-  line-height: 1.5;
-  user-select: none;
-  cursor: default;
-}
-
-b {
-  font-weight: bold;
-}
-
-em {
-  font-style: italic;
-}
-
-#a11y-status-message {
-  display: none;
-}
-
-.scroll-content {
-  height: 100%;
-
-  > div {
-    height: 100%;
-  }
-}
-.scrollbar-thumb {
-  background: rgb(102, 102, 102) !important;
-  padding: 2px;
-  background-clip: content-box !important;
-}
-.scrollbar-track {
-  background: transparent !important;
-  transition: opacity 0.2s ease-in-out !important;
-  z-index: 20 !important;
-}
-
-.currentTicker {
-  background: palette.background.paper;
-  z-index: 11 !important;
-}`;