@ledgerhq/react-ui 0.3.1 → 0.4.0

package/components/message/Tip/index.js

@@ -13,19 +13,19 @@ const StyledIconContainer = styled.div `
     switch (p.type) {
         case "warning":
             return css `
-          background: ${p.theme.colors.palette.warning.c10};
-          color: ${p.theme.colors.palette.warning.c100};
+          background: ${p.theme.colors.warning.c10};
+          color: ${p.theme.colors.warning.c100};
         `;
         case "error":
             return css `
-          background: ${p.theme.colors.palette.error.c10};
-          color: ${p.theme.colors.palette.error.c100};
+          background: ${p.theme.colors.error.c10};
+          color: ${p.theme.colors.error.c100};
         `;
         case "success":
         default:
             return css `
-          background: ${p.theme.colors.palette.success.c30};
-          color: ${p.theme.colors.palette.success.c100};
+          background: ${p.theme.colors.success.c30};
+          color: ${p.theme.colors.success.c100};
         `;
     }
 }}
@@ -39,5 +39,5 @@ const StyledIconContainer = styled.div `
 export default function Tip({ type, label }) {
     return (React.createElement(Flex, { alignItems: "center" },
         type && React.createElement(StyledIconContainer, { type: type }, icons[type]),
-        React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: "palette.neutral.c100", flexShrink: 1 }, label)));
+        React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: "neutral.c100", flexShrink: 1 }, label)));
 }

package/components/message/Tooltip/index.js

@@ -36,6 +36,6 @@ const Wrapper = forwardRef((props, ref) => {
 });
 export default function Tooltip(props) {
     const { content, placement = "auto", children } = props, rest = __rest(props, ["content", "placement", "children"]);
-    return (React.createElement(Tippy, Object.assign({}, rest, { placement: placement, content: React.createElement(Text, { fontWeight: "medium", variant: "paragraph", color: "palette.neutral.c00" }, content) }),
+    return (React.createElement(Tippy, Object.assign({}, rest, { placement: placement, content: React.createElement(Text, { fontWeight: "medium", variant: "paragraph", color: "neutral.c00" }, content) }),
         React.createElement(Wrapper, { children: children })));
 }

package/components/message/Tooltip/styles.js

@@ -10,8 +10,8 @@ export default css `
 
   .tippy-box {
     position: relative;
-    background-color: ${(p) => p.theme.colors.palette.neutral.c100};
-    color: ${(p) => p.theme.colors.palette.neutral.c00};
+    background-color: ${(p) => p.theme.colors.neutral.c100};
+    color: ${(p) => p.theme.colors.neutral.c00};
     border-radius: 4px;
     font-size: 14px;
     line-height: 1.4;
@@ -72,7 +72,7 @@ export default css `
   .tippy-arrow {
     width: 16px;
     height: 16px;
-    color: ${(p) => p.theme.colors.palette.neutral.c100};
+    color: ${(p) => p.theme.colors.neutral.c100};
   }
 
   .tippy-arrow:before {

package/components/message/index.d.ts

@@ -1,5 +1,7 @@
 export { default as Alert } from "./Alert";
 export { default as Log } from "./Log";
 export { default as Notification } from "./Notification";
+export { default as Badge } from "./Notification/Badge";
 export { default as Tooltip } from "./Tooltip";
 export { default as Tip } from "./Tip";
+export { default as StatusNotification } from "./StatusNotification";

package/components/message/index.js

@@ -1,5 +1,7 @@
 export { default as Alert } from "./Alert";
 export { default as Log } from "./Log";
 export { default as Notification } from "./Notification";
+export { default as Badge } from "./Notification/Badge";
 export { default as Tooltip } from "./Tooltip";
 export { default as Tip } from "./Tip";
+export { default as StatusNotification } from "./StatusNotification";

package/components/navigation/Breadcrumb/index.js

@@ -7,14 +7,14 @@ import * as ControlModule from "../../form/SelectInput/Control";
 const Link = styled(Text).attrs({
     ff: "Inter|SemiBold",
     fontSize: 3,
-    color: "palette.neutral.c80",
+    color: "neutral.c80",
     tabIndex: 0,
 }) `
   cursor: pointer;
   :hover,
   :active,
   :focus {
-    color: ${(p) => p.theme.colors.palette.neutral.c100};
+    color: ${(p) => p.theme.colors.neutral.c100};
     text-decoration: underline;
   }
 `;
@@ -26,11 +26,11 @@ export default memo(function Breadcrumb({ segments, onChange }) {
     const [contents] = segments.reduce(([renderArray, valuesArray], segment, index) => {
         const values = [...valuesArray];
         renderArray.push(React.createElement(React.Fragment, null,
-            index > 0 ? (React.createElement(Text, { fontWeight: "semiBold", color: "palette.neutral.c40", variant: "paragraph" }, "/")) : null,
+            index > 0 ? (React.createElement(Text, { fontWeight: "semiBold", color: "neutral.c40", variant: "paragraph" }, "/")) : null,
             isMultiSegment(segment) ? (React.createElement(Dropdown, { label: "", options: segment.options, value: segment.value, onChange: (elt) => elt && onChange([...values, elt.value]), styles: {
                     control: (provided, state) => (Object.assign(Object.assign({}, ControlModule.getStyles()(provided, state)), { cursor: "pointer" })),
-                    singleValue: (provided) => (Object.assign(Object.assign({}, provided), { margin: 0, top: undefined, position: undefined, overflow: undefined, maxWidth: undefined, transform: undefined, color: theme.colors.palette.neutral.c80, ":hover": {
-                            color: theme.colors.palette.neutral.c100,
+                    singleValue: (provided) => (Object.assign(Object.assign({}, provided), { margin: 0, top: undefined, position: undefined, overflow: undefined, maxWidth: undefined, transform: undefined, color: theme.colors.neutral.c80, ":hover": {
+                            color: theme.colors.neutral.c100,
                             textDecoration: "underline",
                         } })),
                 } })) : (React.createElement(Link, { onKeyDown: (event) => ["Enter", " "].includes(event.key) && onChange([...values, segment.value]), onClick: () => onChange([...values, segment.value]) }, segment.label))));

package/components/navigation/progress/ProgressBar/Onboarding.js

@@ -15,12 +15,12 @@ const Bar = styled.div `
   border-top-${(p) => (p.on ? "right" : "left")}-radius: 0;
   border-bottom-${(p) => (p.on ? "right" : "left")}-radius: 0;
   flex: ${(p) => p.fill};
-  background: ${(p) => p.on ? p.theme.colors.palette.neutral.c100 : p.theme.colors.palette.neutral.c40};
+  background: ${(p) => (p.on ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c40)};
 `;
 const Handler = styled.div `
   transition: all 600ms linear;
   padding: 4px;
-  background: ${(p) => p.theme.colors.palette.neutral.c100};
+  background: ${(p) => p.theme.colors.neutral.c100};
   border-radius: ${(p) => `${p.theme.radii[1]}px`};
 
   display: flex;
@@ -35,8 +35,8 @@ const Handler = styled.div `
     width: 16px;
     justify-content: center;
     align-items: center;
-    color: ${(p) => p.theme.colors.palette.neutral.c100};
-    background: ${(p) => p.theme.colors.palette.neutral.c00};
+    color: ${(p) => p.theme.colors.neutral.c100};
+    background: ${(p) => p.theme.colors.neutral.c00};
   }
 `;
 const Onboarding = ({ steps, currentIndex }) => {
@@ -45,8 +45,8 @@ const Onboarding = ({ steps, currentIndex }) => {
     return (React.createElement(Container, null,
         React.createElement(Bar, { on: true, fill: fill }),
         React.createElement(Handler, { key: currentStep.key },
-            React.createElement(Text, { className: "index", color: "palette.neutral.c00", fontWeight: "medium", variant: "micro" }, currentIndex + 1),
-            React.createElement(Text, { color: "palette.neutral.c00", fontWeight: "medium", textTransform: "uppercase", variant: "micro" }, currentStep.label)),
+            React.createElement(Text, { className: "index", color: "neutral.c00", fontWeight: "medium", variant: "micro" }, currentIndex + 1),
+            React.createElement(Text, { color: "neutral.c00", fontWeight: "medium", textTransform: "uppercase", variant: "micro" }, currentStep.label)),
         React.createElement(Bar, { fill: 100 - Number(fill) })));
 };
 export default Onboarding;

package/components/navigation/progress/Stepper/index.js

@@ -24,7 +24,7 @@ export const Item = {
     ${space}
   `,
     Current: styled.div.attrs({
-        backgroundColor: "palette.primary.c90",
+        backgroundColor: "primary.c90",
     }) `
     width: 6px;
     height: 6px;
@@ -32,7 +32,7 @@ export const Item = {
     ${color}
   `,
     Pending: styled.div.attrs({
-        backgroundColor: "palette.neutral.c70",
+        backgroundColor: "neutral.c70",
     }) `
     width: ${(p) => p.theme.space[2]}px;
     height: ${(p) => p.theme.space[2]}px;
@@ -45,19 +45,19 @@ export const Item = {
 const StepText = styled(Text) `
   color: ${(p) => {
     if (p.errored) {
-        return p.theme.colors.palette.error.c100;
+        return p.theme.colors.error.c100;
     }
     if (p.inactive) {
-        return p.theme.colors.palette.neutral.c70;
+        return p.theme.colors.neutral.c70;
     }
-    return p.theme.colors.palette.neutral.c100;
+    return p.theme.colors.neutral.c100;
 }};
 `;
 const BaseSeparator = styled.div `
   flex: 1;
   position: relative;
   overflow-x: hidden;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c40};
+  background-color: ${(p) => p.theme.colors.neutral.c40};
   height: 1px;
   top: ${(p) => p.theme.space[5]}px;
 `;
@@ -68,11 +68,11 @@ const Separator = {
 const stepContentsByState = {
     pending: (React.createElement(Item.Container, null,
         React.createElement(Item.Pending, null))),
-    current: (React.createElement(Item.Container, { backgroundColor: "palette.primary.c20", borderRadius: "8px" },
+    current: (React.createElement(Item.Container, { backgroundColor: "primary.c20", borderRadius: "8px" },
         React.createElement(Item.Current, null))),
-    completed: (React.createElement(Item.Container, { color: "palette.primary.c90", backgroundColor: "palette.primary.c20", borderRadius: "8px" },
+    completed: (React.createElement(Item.Container, { color: "primary.c90", backgroundColor: "primary.c20", borderRadius: "8px" },
         React.createElement(Item.Completed, null))),
-    errored: (React.createElement(Item.Container, { color: "palette.error.c100", backgroundColor: "palette.warning.c30", borderRadius: "8px" },
+    errored: (React.createElement(Item.Container, { color: "error.c100", backgroundColor: "warning.c30", borderRadius: "8px" },
         React.createElement(Item.Errored, null))),
 };
 export const Step = memo(function Step({ state, label, hideLeftSeparator, nextState, }) {

package/components/navigation/sideBar/Item/Item.js

@@ -6,8 +6,8 @@ import TransitionInOut from "../../../transitions/TransitionInOut";
 import Flex from "../../../layout/Flex";
 const ItemWrapper = styled.li `
   /** DEFAULT VARIANT **/
-  --ll-sidebar-item-label-color: ${(props) => props.theme.colors.palette.neutral.c80};
-  --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.palette.neutral.c80};
+  --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c80};
+  --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.neutral.c80};
   --ll-sidebar-item-background-color: unset;
 
   display: flex;
@@ -26,8 +26,8 @@ const ItemWrapper = styled.li `
 
   /** HOVER VARIANT **/
   &:hover {
-    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.palette.neutral.c100};
-    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.palette.primary.c80};
+    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c100};
+    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.primary.c80};
     --ll-sidebar-item-background-color: unset;
   }
 
@@ -39,15 +39,15 @@ const ItemWrapper = styled.li `
 
   /** ACTIVE VARIANT **/
   &[data-active="true"] {
-    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.palette.neutral.c100};
-    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.palette.primary.c80};
-    --ll-sidebar-item-background-color: ${(props) => props.theme.colors.palette.primary.c20};
+    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c100};
+    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.primary.c80};
+    --ll-sidebar-item-background-color: ${(props) => props.theme.colors.primary.c20};
   }
 
   /** DISABLE VARIANT **/
   &[data-disable="true"] {
-    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.palette.neutral.c80};
-    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.palette.neutral.c80};
+    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c80};
+    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.neutral.c80};
     --ll-sidebar-item-background-color: unset;
     opacity: 0.3;
     cursor: unset;
@@ -63,7 +63,7 @@ const DefaultBadge = styled.div `
   height: ${(p) => p.theme.space[4]}px;
   width: ${(p) => p.theme.space[4]}px;
   border-radius: ${(p) => p.theme.radii[2]}px;
-  background-color: ${(p) => p.theme.colors.palette.primary.c80};
+  background-color: ${(p) => p.theme.colors.primary.c80};
 `;
 export const ItemLabel = styled(Text) `
   display: inline-block;

package/components/navigation/sideBar/SideBar/SideBar.js

@@ -12,9 +12,9 @@ const Nav = styled(Flex) `
   row-gap: 1.5rem;
   height: 100vh;
   max-width: 14.875rem;
-  color: ${(props) => props.theme.colors.palette.neutral.c100};
-  border-right: 1px solid ${(props) => props.theme.colors.palette.neutral.c40};
-  background-color: ${(props) => props.theme.colors.palette.background.main};
+  color: ${(props) => props.theme.colors.neutral.c100};
+  border-right: 1px solid ${(props) => props.theme.colors.neutral.c40};
+  background-color: ${(props) => props.theme.colors.background.main};
   transition: max-width 200ms;
   will-change: max-width;
 

package/components/navigation/sideBar/Toggle/Toggle.js

@@ -15,8 +15,8 @@ const ToggleButtonContainer = styled(TransitionInOut) `
   right: calc(var(--ll-side-bar-toggle-button-size) / -2);
   cursor: pointer;
 
-  background: ${(p) => p.theme.colors.palette.neutral.c20};
-  border: 1px solid ${(p) => p.theme.colors.palette.neutral.c100};
+  background: ${(p) => p.theme.colors.neutral.c20};
+  border: 1px solid ${(p) => p.theme.colors.neutral.c100};
   border-radius: 50%;
   width: var(--ll-side-bar-toggle-button-size);
   height: var(--ll-side-bar-toggle-button-size);

package/components/tabs/Bar/index.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import Flex from "../../layout/Flex";
 const Bar = styled.div `
   display: inline-flex;
-  border: 1px solid ${(p) => p.theme.colors.palette.neutral.c40};
+  border: 1px solid ${(p) => p.theme.colors.neutral.c40};
   border-radius: 33px;
   padding: 2px;
 `;
@@ -15,8 +15,8 @@ const Item = styled(Flex).attrs({
   cursor: pointer;
   padding: 8px 12px 8px 12px;
   border-radius: 33px;
-  color: ${(p) => p.active ? p.theme.colors.palette.neutral.c00 : p.theme.colors.palette.neutral.c80};
-  background-color: ${(p) => (p.active ? p.theme.colors.palette.neutral.c100 : "unset")};
+  color: ${(p) => (p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c80)};
+  background-color: ${(p) => (p.active ? p.theme.colors.neutral.c100 : "unset")};
 `;
 export default function BarTabs({ children, onTabChange, initialActiveIndex }) {
     const [activeIndex, setActiveIndex] = useState(initialActiveIndex);

package/components/tabs/Chip/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export declare type Props = React.PropsWithChildren<{
+    /**
+     * An optional callback that will be called when the active tab changes.
+     */
+    onTabChange?: (activeIndex: number) => void;
+    /**
+     * The tab index to mark as active when rendering for the first time.
+     * If omitted, then initially no tabs will be selected.
+     */
+    initialActiveIndex?: number;
+}>;
+export default function BarTabs({ children, onTabChange, initialActiveIndex }: Props): JSX.Element;

package/components/tabs/Chip/index.js

@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import Flex from "../../layout/Flex";
+const Item = styled(Flex).attrs({
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+}) `
+  cursor: pointer;
+  padding: 8px 12px 8px 12px;
+  border-radius: ${(p) => p.theme.radii[2]}px;
+  color: ${(p) => p.theme.colors.neutral.c100};
+  background-color: ${(p) => (p.active ? p.theme.colors.primary.c30 : "unset")};
+`;
+export default function BarTabs({ children, onTabChange, initialActiveIndex }) {
+    const [activeIndex, setActiveIndex] = useState(initialActiveIndex);
+    return (React.createElement(Flex, { justifyContent: "space-between", flex: 1, columnGap: 5 }, React.Children.toArray(children).map((child, index) => (React.createElement(Item, { key: index, active: index === activeIndex, onClick: () => {
+            setActiveIndex(index);
+            onTabChange && onTabChange(index);
+        } }, child)))));
+}

package/components/tabs/Pill/index.js

@@ -24,14 +24,14 @@ const Item = styled(Flex).attrs({ flex: 1, justifyContent: "center", alignItems:
   padding: 8px 10px 8px 10px;
   border: 1px solid;
   &[data-active="false"] {
-    color: ${(p) => p.theme.colors.palette.neutral.c80};
-    background-color: ${(p) => p.theme.colors.palette.neutral.c00};
-    border-color: ${(p) => p.theme.colors.palette.neutral.c40};
+    color: ${(p) => p.theme.colors.neutral.c80};
+    background-color: ${(p) => p.theme.colors.neutral.c00};
+    border-color: ${(p) => p.theme.colors.neutral.c40};
   }
   &[data-active="true"] {
-    color: ${(p) => p.theme.colors.palette.neutral.c00};
-    background-color: ${(p) => p.theme.colors.palette.neutral.c100};
-    border-color: ${(p) => p.theme.colors.palette.neutral.c100};
+    color: ${(p) => p.theme.colors.neutral.c00};
+    background-color: ${(p) => p.theme.colors.neutral.c100};
+    border-color: ${(p) => p.theme.colors.neutral.c100};
 
     &:not(:last-child) {
       border-right-width: 0;

package/components/tabs/Tabs/index.js

@@ -32,7 +32,7 @@ const HeaderTitle = styled(Text).attrs({
     fontWeight: "600",
 }) `
   margin-inline: 12px;
-  color: ${(p) => p.selected ? p.theme.colors.palette.neutral.c100 : p.theme.colors.palette.neutral.c80};
+  color: ${(p) => (p.selected ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c80)};
 `;
 const HeaderBottomBarFixed = styled(Flex).attrs({
     flex: 1,
@@ -40,7 +40,7 @@ const HeaderBottomBarFixed = styled(Flex).attrs({
   width: 100%;
   position: relative;
   top: 3px;
-  border-bottom: 1px solid ${(p) => p.theme.colors.palette.neutral.c40};
+  border-bottom: 1px solid ${(p) => p.theme.colors.neutral.c40};
 `;
 const HeaderBottomBarMoving = styled.div `
   position: relative;
@@ -48,12 +48,12 @@ const HeaderBottomBarMoving = styled.div `
   width: ${(p) => p.width}px;
   transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   border-bottom: solid 3px;
-  border-bottom-color: ${(p) => p.theme.colors.palette.primary.c70};
+  border-bottom-color: ${(p) => p.theme.colors.primary.c70};
 `;
 const Badge = styled(Tag).attrs((p) => ({
     borderRadius: p.theme.radii[3],
-    backgroundColor: p.theme.colors.palette.primary.c70,
-    color: p.theme.colors.palette.neutral.c00,
+    backgroundColor: p.theme.colors.primary.c70,
+    color: p.theme.colors.neutral.c00,
 })) `
   padding: 5px;
   min-width: 24px;
@@ -74,8 +74,8 @@ const MainContent = styled(Flex).attrs({
     flex: 1,
 }) `
   width: 100%;
-  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)};
 `;
 export default function Tabs(props) {
     const { tabs, onTabChange } = props;

package/components/tabs/index.d.ts

@@ -1,3 +1,4 @@
 export { default as Bar } from "./Bar";
 export { default as Pill } from "./Pill";
 export { default as Tabs } from "./Tabs";
+export { default as Chip } from "./Chip";

package/components/tabs/index.js

@@ -1,3 +1,4 @@
 export { default as Bar } from "./Bar";
 export { default as Pill } from "./Pill";
 export { default as Tabs } from "./Tabs";
+export { default as Chip } from "./Chip";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ledgerhq/react-ui",
   "description": "Ledger Live - Desktop UI",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",

package/styles/StyleProvider.js

@@ -3,7 +3,7 @@ import { ThemeProvider } from "styled-components";
 import { defaultTheme, GlobalStyle } from ".";
 import { palettes } from "@ledgerhq/ui-shared";
 export const StyleProvider = ({ children, fontsPath, fontMappings, selectedPalette = "light", }) => {
-    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 },
         React.createElement(GlobalStyle, { fontsPath: fontsPath, fontMappings: fontMappings }),
         children));

package/styles/global.js

@@ -1,59 +1,38 @@
 import { createGlobalStyle } from "styled-components";
 import { rgba } from "./helpers";
-import reset from "./reset";
 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) => (typeof props.fontsPath === "string" ? fontStyles : "")}
-
-  .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

@@ -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

@@ -141,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 `
@@ -149,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 `
@@ -157,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,
@@ -201,9 +201,7 @@ const theme = {
     fontWeights,
     space,
     shadows,
-    colors: {
-        palette: palettes.light,
-    },
+    colors: Object.assign({ palette: palettes.light }, palettes.light),
     animations,
     overflow,
     transition,

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;