@ledgerhq/react-ui 0.2.0 → 0.5.0

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,7 @@
 import { DefaultTheme } from "styled-components";
 import { ColorPalette } from "@ledgerhq/ui-shared";
 export declare const space: number[];
-export declare type TextVariants = "h1" | "h2" | "h3" | "h4" | "h5" | "large" | "body" | "bodyLineHeight" | "paragraph" | "paragraphLineHeight" | "small" | "extraSmall" | "tiny" | "micro" | "subtitle";
+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[];
@@ -98,7 +98,10 @@ declare module "styled-components" {
         fontSizes: number[];
         space: number[];
         shadows: string[];
-        colors: {
+        colors: ColorPalette & {
+            /**
+             * @deprecated Do not use the .palette prefix anymore!
+             */
             palette: ColorPalette;
         };
         fontWeights: Record<string, string>;

package/styles/theme.js

@@ -21,6 +21,7 @@ export const fontSizes = [8, 10, 11, 12, 13, 14, 16, 20, 24, 28, 32, 36];
     fontSizes.h2,
     fontSizes.h1,
 ] = fontSizes;
+fontSizes.largeLineHeight = fontSizes.large;
 fontSizes.bodyLineHeight = fontSizes.body;
 fontSizes.paragraphLineHeight = fontSizes.paragraph;
 fontSizes.subtitle = fontSizes.extraSmall;
@@ -33,7 +34,7 @@ const fontWeights = {
     bold: "700",
     extraBold: "800",
 };
-export const radii = [0, 4, 8, 12];
+export const radii = [0, 4, 8, 12, 16, 20];
 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];
 // Those fonts are now defined in global.css, this is just a mapping for styled-system
@@ -140,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 `
@@ -148,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 `
@@ -156,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,
@@ -200,9 +201,7 @@ const theme = {
     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;
-}`;