@ledgerhq/react-ui 0.3.1 → 0.4.0

package/README.md

@@ -10,7 +10,7 @@
 
 ## Reference
 
-[📚 The storybook is hosted here.](https://ledger-live-ui-react.vercel.app/)
+**[🔗 Storybook](https://ledger-live-ui-react.vercel.app/)**
 
 ## Installation
 
@@ -22,7 +22,7 @@ npm i @ledgerhq/react-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 [styled components](https://styled-components.com/) heavily and relies on it being installed separately (to avoid package duplication).
 
 ```sh
 npm i styled-components
@@ -59,7 +59,7 @@ import { Text, Flex, Logos } from "@ledgerhq/react-ui";
 function Hello() {
   return (
     <Flex flexDirection="column" alignItems="center" rowGap={12} p={12}>
-      <Text color="palette.neutral.c100">
+      <Text color="neutral.c100">
         <Logos.LedgerLiveRegular />
       </Text>
       <Text variant="h1">Hello, world!</Text>
@@ -172,7 +172,7 @@ function Root() {
   return (
     <StyleProvider fontsPath="assets" selectedPalette={palette}>
       <Flex flexDirection="column" alignItems="center" rowGap={12} p={12}>
-        <Text color="palette.neutral.c100">
+        <Text color="neutral.c100">
           <Logos.LedgerLiveRegular />
         </Text>
         <Text variant="h1">Hello, world!</Text>

package/components/Chart/index.js

@@ -72,7 +72,7 @@ const defaultValue = {
 export default (_a) => {
     var { data, color, variant = defaultValue.variant, valueKey = defaultValue.valueKey, timeOptions = defaultValue.timeOptions } = _a, chartProps = __rest(_a, ["data", "color", "variant", "valueKey", "timeOptions"]);
     const theme = useTheme();
-    const config = useMemo(() => getConfig(variant, { gridColor: theme.colors.palette.neutral.c40, timeOptions }), [variant, theme.colors.palette.neutral.c40, timeOptions]);
+    const config = useMemo(() => getConfig(variant, { gridColor: theme.colors.neutral.c40, timeOptions }), [variant, theme.colors.neutral.c40, timeOptions]);
     // inject default font configuration at mount
     useEffect(() => {
         defaults.font = fontConfig;

package/components/Table/Columns.js

@@ -46,8 +46,8 @@ subtitleProps, }) {
     return {
         layout: layout || "auto",
         render: ({ elt }) => (React.createElement(FlexBox, { flexDirection: "column" },
-            title && (React.createElement(Text, Object.assign({ fontWeight: "medium", variant: "body", textOverflow: "ellipsis", overflow: "hidden", color: "palette.neutral.c100" }, ((titleProps && titleProps(elt)) || {})), title(elt))),
-            subtitle && (React.createElement(Text, Object.assign({ fontWeight: "medium", variant: "paragraph", textOverflow: "ellipsis", overflow: "hidden", color: "palette.neutral.c80" }, ((subtitleProps && subtitleProps(elt)) || {})), subtitle(elt))))),
+            title && (React.createElement(Text, Object.assign({ fontWeight: "medium", variant: "body", textOverflow: "ellipsis", overflow: "hidden", color: "neutral.c100" }, ((titleProps && titleProps(elt)) || {})), title(elt))),
+            subtitle && (React.createElement(Text, Object.assign({ fontWeight: "medium", variant: "paragraph", textOverflow: "ellipsis", overflow: "hidden", color: "neutral.c80" }, ((subtitleProps && subtitleProps(elt)) || {})), subtitle(elt))))),
         header,
     };
 }

package/components/Table/stories.helper.js

@@ -4,7 +4,7 @@ import Text from "../asorted/Text";
 import { IconColumn, TextColumn } from "./Columns";
 function Header({ children }) {
     const theme = useTheme();
-    return (React.createElement(Text, { fontWeight: "semiBold", variant: "paragraph", style: { borderBottom: `1px solid ${theme.colors.palette.neutral.c40}` }, mx: -4, px: 4, pb: 8 }, children));
+    return (React.createElement(Text, { fontWeight: "semiBold", variant: "paragraph", style: { borderBottom: `1px solid ${theme.colors.neutral.c40}` }, mx: -4, px: 4, pb: 8 }, children));
 }
 export const balance = {
     data: [
@@ -59,14 +59,14 @@ export const balance = {
             header: () => React.createElement(Header, null, "Evolution"),
             subtitle: (elt) => (elt.evolution > 0 ? "+" : "") + elt.evolution,
             subtitleProps: (elt) => ({
-                color: elt.evolution < 0 ? "palette.error.c100" : "palette.success.c100",
+                color: elt.evolution < 0 ? "error.c100" : "success.c100",
             }),
         }),
         IconColumn({
             header: () => React.createElement(Header, null, "\u00A0"),
             props: (elt) => ({
                 name: "StarSolid",
-                color: elt.starred ? "palette.neutral.c100" : "palette.neutral.c70",
+                color: elt.starred ? "neutral.c100" : "neutral.c70",
             }),
         }),
     ],
@@ -145,7 +145,7 @@ export const accounts = {
         IconColumn({
             props: (elt) => ({
                 name: elt.synchronized ? "CircledCheck" : "Clock",
-                color: elt.synchronized ? "palette.success.c100" : "palette.neutral.c80",
+                color: elt.synchronized ? "success.c100" : "neutral.c80",
             }),
         }),
         TextColumn({
@@ -160,13 +160,13 @@ export const accounts = {
             layout: "1fr",
             subtitle: (elt) => (elt.evolution > 0 ? "+" : "") + elt.evolution,
             subtitleProps: (elt) => ({
-                color: elt.evolution < 0 ? "palette.error.c100" : "palette.success.c100",
+                color: elt.evolution < 0 ? "error.c100" : "success.c100",
             }),
         }),
         IconColumn({
             props: (elt) => ({
                 name: "StarSolid",
-                color: elt.starred ? "palette.neutral.c100" : "palette.neutral.c70",
+                color: elt.starred ? "neutral.c100" : "neutral.c70",
             }),
         }),
     ],

package/components/Tag/index.js

@@ -17,18 +17,18 @@ function getColor({ type, active, disabled }) {
     switch (type) {
         case "plain":
             if (disabled)
-                return active ? "palette.neutral.c00" : "palette.neutral.c70";
-            return active ? "palette.neutral.c00" : "palette.primary.c90";
+                return active ? "neutral.c00" : "neutral.c70";
+            return active ? "neutral.c00" : "primary.c90";
         default:
-            return disabled ? "palette.neutral.c70" : "palette.primary.c90";
+            return disabled ? "neutral.c70" : "primary.c90";
     }
 }
 function getBgColor({ type, active, disabled }) {
     switch (type) {
         case "plain":
-            return active ? (disabled ? "palette.neutral.c70" : "palette.primary.c90") : undefined;
+            return active ? (disabled ? "neutral.c70" : "primary.c90") : undefined;
         case "opacity":
-            return active ? (disabled ? "palette.neutral.c30" : "palette.primary.c20") : undefined;
+            return active ? (disabled ? "neutral.c30" : "primary.c20") : undefined;
         default:
             return;
     }
@@ -38,9 +38,9 @@ function getBorderColor({ type, active, disabled }) {
         return;
     switch (type) {
         case "outlined":
-            return disabled ? "palette.neutral.c70" : "palette.primary.c90";
+            return disabled ? "neutral.c70" : "primary.c90";
         case "outlinedOpacity":
-            return disabled ? "palette.neutral.c40" : "palette.primary.c40";
+            return disabled ? "neutral.c40" : "primary.c40";
     }
 }
 function getPadding({ size }) {

package/components/asorted/Divider/index.js

@@ -2,11 +2,11 @@ import React from "react";
 import styled from "styled-components";
 const Divider = styled.div `
   display: block;
-  background: ${(p) => p.theme.colors.palette.neutral.c90};
+  background: ${(p) => p.theme.colors.neutral.c90};
   height: 1px;
 
   &[data-variant="light"] {
-    background: ${(p) => p.theme.colors.palette.neutral.c40};
+    background: ${(p) => p.theme.colors.neutral.c40};
   }
 `;
 export default ({ variant = "default" }) => React.createElement(Divider, { "data-variant": variant });

package/components/asorted/Icon/Icon.d.ts

@@ -7,4 +7,5 @@ export declare type Props = {
 };
 export declare const iconNames: string[];
 declare const Icon: ({ name, size, color, weight, }: Props) => JSX.Element | null;
+export declare const IconBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export default Icon;

package/components/asorted/Icon/Icon.js

@@ -1,5 +1,6 @@
 import * as icons from "@ledgerhq/icons-ui/react";
 import React from "react";
+import styled from "styled-components";
 export const iconNames = Array.from(Object.keys(icons).reduce((set, rawKey) => {
     const key = rawKey
         .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, "$1")
@@ -17,4 +18,10 @@ const Icon = ({ name, size = 16, color = "currentColor", weight = "Medium", }) =
     }
     return null;
 };
+export const IconBox = styled.div `
+  padding: ${(p) => p.theme.space[6]}px;
+  border: 1px solid ${(p) => p.theme.colors.neutral.c40};
+  border-radius: ${(p) => p.theme.radii[2]}px;
+  display: inline-flex;
+`;
 export default Icon;

package/components/asorted/Icon/index.d.ts

@@ -1,2 +1,2 @@
-export { default, iconNames } from "./Icon";
+export { default, iconNames, IconBox } from "./Icon";
 export type { Props } from "./Icon";

package/components/asorted/Icon/index.js

@@ -1 +1 @@
-export { default, iconNames } from "./Icon";
+export { default, iconNames, IconBox } from "./Icon";

package/components/asorted/Text/index.d.ts

@@ -1,6 +1,7 @@
 import { BaseStyledProps } from "../../styled";
 import { TextVariants } from "../../../styles/theme";
 declare type FontFamilies = "Inter|ExtraLight" | "Inter|Light" | "Inter|Regular" | "Inter|Medium" | "Inter|SemiBold" | "Inter|Bold" | "Inter|ExtraBold" | "Alpha|Medium";
+declare type WhiteSpace = "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
 export interface TextProps extends BaseStyledProps {
     fontFamily?: string;
     ff?: FontFamilies;
@@ -12,6 +13,7 @@ export interface TextProps extends BaseStyledProps {
     textTransform?: string;
     textOverflow?: string;
     uppercase?: boolean;
+    whiteSpace?: WhiteSpace;
 }
 declare const Text: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, TextProps, keyof TextProps>;
 export default Text;

package/components/asorted/Text/index.js

@@ -10,9 +10,10 @@ const uppercase = system({
 });
 const Text = baseStyled.span.attrs(({ variant = "body", fontSize, color }) => ({
     fontSize: fontSize ? fontSize : variant,
-    color: color || "palette.neutral.c100",
+    color: color || "neutral.c100",
 })) `
   font-weight: 500;
+  white-space: ${(props) => { var _a; return (_a = props.whiteSpace) !== null && _a !== void 0 ? _a : "normal"; }};
   ${(p) => textVariantStyle[p.variant || "body"]}
   ${compose(uppercase, lineHeight, fontFamily, fontSize, textAlign, fontWeight, letterSpacing, system({
     textOverflow: true,

package/components/asorted/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Divider } from "./Divider";
-export { default as Icon } from "./Icon";
+export { default as Icon, IconBox } from "./Icon";
 export { default as Text } from "./Text";

package/components/asorted/index.js

@@ -1,3 +1,3 @@
 export { default as Divider } from "./Divider";
-export { default as Icon } from "./Icon";
+export { default as Icon, IconBox } from "./Icon";
 export { default as Text } from "./Text";

package/components/cards/Carousel/Slide.js

@@ -10,13 +10,13 @@ const Wrapper = styled(Flex) `
   padding: ${(p) => p.theme.space[8]}px ${(p) => p.theme.space[10]}px;
   padding-right: 280px; // Nb gives air to not overlap the illustration
   z-index: ${(p) => p.theme.zIndexes[8]};
-  background: url(${(p) => p.image}) no-repeat ${(p) => p.theme.colors.palette.neutral.c100};
+  background: url(${(p) => p.image}) no-repeat ${(p) => p.theme.colors.neutral.c100};
   background-size: contain;
   background-position: right 60px bottom;
 `;
 const Slide = ({ title, description, image, onClick }) => {
     return (React.createElement(Wrapper, { key: "key", image: image, onClick: onClick },
-        React.createElement(Text, { variant: "tiny", color: "palette.neutral.c00", fontWeight: "regular" }, title),
-        React.createElement(Text, { variant: "h5", color: "palette.neutral.c00", textTransform: "uppercase" }, description)));
+        React.createElement(Text, { variant: "tiny", color: "neutral.c00", fontWeight: "regular" }, title),
+        React.createElement(Text, { variant: "h5", color: "neutral.c00", textTransform: "uppercase" }, description)));
 };
 export default Slide;

package/components/cards/Carousel/index.js

@@ -17,7 +17,7 @@ const CarouselWrapper = styled.div `
   cursor: pointer;
   position: relative;
   flex: 1;
-  background: ${(p) => p.theme.colors.palette.neutral.c100};
+  background: ${(p) => p.theme.colors.neutral.c100};
 `;
 const Controllers = styled(Flex) `
   position: absolute;
@@ -25,7 +25,7 @@ const Controllers = styled(Flex) `
   right: ${(p) => p.theme.space[5]}px;
   bottom: ${(p) => p.theme.space[4]}px;
   column-gap: ${(p) => p.theme.space[4]}px;
-  color: ${(p) => p.theme.colors.palette.neutral.c00};
+  color: ${(p) => p.theme.colors.neutral.c00};
 
   > div {
     &:hover {
@@ -45,7 +45,7 @@ const Bullets = styled.div `
     position: relative;
     height: ${(p) => p.theme.space[1]}px;
     width: ${(p) => p.theme.space[8]}px;
-    background: ${(p) => p.theme.colors.palette.neutral.c00};
+    background: ${(p) => p.theme.colors.neutral.c00};
     opacity: 0.5;
     &:hover {
       opacity: 0.75;
@@ -71,7 +71,7 @@ const Close = styled.div `
   position: absolute;
   top: ${(p) => p.theme.space[7]}px;
   right: ${(p) => p.theme.space[5]}px;
-  color: ${(p) => p.theme.colors.palette.neutral.c00};
+  color: ${(p) => p.theme.colors.neutral.c00};
   &:hover {
     opacity: 0.5;
   }
@@ -124,10 +124,10 @@ const Carousel = ({ timeout = DEFAULT_TIMEOUT, queue, isDismissed, onDismiss, di
     if (!(queue === null || queue === void 0 ? void 0 : queue.length) || isDismissed)
         return null;
     return (React.createElement(CarouselWrapper, { id: "carousel", onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, wantToDismiss ? (React.createElement(DismissWrapper, null,
-        React.createElement(Text, { color: "palette.neutral.c00", fontWeight: "medium", variant: "paragraph" }, dismissText),
+        React.createElement(Text, { color: "neutral.c00", fontWeight: "medium", variant: "paragraph" }, dismissText),
         React.createElement(Flex, { columnGap: 5 },
-            React.createElement(Button, { color: "palette.neutral.c100", backgroundColor: "palette.neutral.c00", onClick: onDismiss }, dismissConfirmText),
-            React.createElement(Button, { outline: true, color: "palette.neutral.c00", backgroundColor: "palette.neutral.c100", borderColor: "palette.neutral.c00", onClick: onCancelDismiss }, dismissCancelText)))) : (React.createElement("div", null,
+            React.createElement(Button, { color: "neutral.c100", backgroundColor: "neutral.c00", onClick: onDismiss }, dismissConfirmText),
+            React.createElement(Button, { outline: true, color: "neutral.c00", backgroundColor: "neutral.c100", borderColor: "neutral.c00", onClick: onCancelDismiss }, dismissCancelText)))) : (React.createElement("div", null,
         React.createElement(TransitionGroup, { component: null, childFactory: childFactory },
             React.createElement(TransitionSlide, { key: index, direction: direction },
                 React.createElement(Slide, Object.assign({}, queue[index])))),

package/components/cta/Button/index.d.ts

@@ -26,9 +26,9 @@ export interface ButtonProps extends BaseProps {
 }
 export declare const ButtonUnstyled: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const Base: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
-    ff: string;
+    fontFamily: string;
     fontSize: number;
-} & BaseProps, "fontSize" | "ff">;
+} & BaseProps, "fontFamily" | "fontSize">;
 declare const Button: {
     ({ Icon, iconPosition, iconSize, children, onClick, ...props }: ButtonProps): React.ReactElement;
     Unstyled: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;

package/components/cta/Button/index.js

@@ -24,93 +24,93 @@ const IconContainer = styled.div `
 const getVariantColors = (p) => ({
     main: {
         outline: `
-        border-color: ${p.theme.colors.palette.neutral.c100};
-        color: ${p.theme.colors.palette.neutral.c100};
-        background-color: ${p.theme.colors.palette.neutral.c00};
+        border-color: ${p.theme.colors.neutral.c100};
+        color: ${p.theme.colors.neutral.c100};
+        background-color: ${p.theme.colors.neutral.c00};
         &:hover, &:focus {
-          background-color: ${p.theme.colors.palette.neutral.c20};
+          background-color: ${p.theme.colors.neutral.c20};
         }
         &:active {
-          background-color: ${p.theme.colors.palette.neutral.c30};
+          background-color: ${p.theme.colors.neutral.c30};
         }
       `,
         filled: `
-        color: ${p.theme.colors.palette.neutral.c00};
-        background-color: ${p.theme.colors.palette.neutral.c100};
+        color: ${p.theme.colors.neutral.c00};
+        background-color: ${p.theme.colors.neutral.c100};
         &:hover, &:focus {
-          background-color: ${p.theme.colors.palette.neutral.c90};
+          background-color: ${p.theme.colors.neutral.c90};
         }
       `,
     },
     shade: `
-      border-color: ${p.theme.colors.palette.neutral.c40};
-      color: ${p.theme.colors.palette.neutral.c100};
-      background-color: ${p.theme.colors.palette.neutral.c00};
+      border-color: ${p.theme.colors.neutral.c40};
+      color: ${p.theme.colors.neutral.c100};
+      background-color: ${p.theme.colors.neutral.c00};
       &:focus {
-        border-color: ${p.theme.colors.palette.primary.c80};
+        border-color: ${p.theme.colors.primary.c80};
       }
 
       &:hover, &:focus {
-        background-color: ${p.theme.colors.palette.neutral.c20};
+        background-color: ${p.theme.colors.neutral.c20};
       }
 
       &:active {
-        background-color: ${p.theme.colors.palette.neutral.c30};
+        background-color: ${p.theme.colors.neutral.c30};
       }
     `,
     error: {
         outline: `
-      border-color: ${p.theme.colors.palette.error.c100};
-      color: ${p.theme.colors.palette.error.c100};
-      background-color: ${p.theme.colors.palette.neutral.c00};
+      border-color: ${p.theme.colors.error.c100};
+      color: ${p.theme.colors.error.c100};
+      background-color: ${p.theme.colors.neutral.c00};
       &:hover {
-        background-color: ${p.theme.colors.palette.error.c10};
+        background-color: ${p.theme.colors.error.c10};
       }
       &:active {
-        background-color: ${p.theme.colors.palette.error.c30};
+        background-color: ${p.theme.colors.error.c30};
       }
     `,
         filled: `
-      color: ${p.theme.colors.palette.neutral.c00};
-      background-color: ${p.theme.colors.palette.error.c100};
+      color: ${p.theme.colors.neutral.c00};
+      background-color: ${p.theme.colors.error.c100};
       &:hover {
-        background-color: ${p.theme.colors.palette.error.c80};
+        background-color: ${p.theme.colors.error.c80};
       }
     `,
     },
     color: {
         outline: `
-      border-color: ${p.theme.colors.palette.primary.c80};
-      color: ${p.theme.colors.palette.primary.c80};
-      background-color: ${p.theme.colors.palette.neutral.c00};
+      border-color: ${p.theme.colors.primary.c80};
+      color: ${p.theme.colors.primary.c80};
+      background-color: ${p.theme.colors.neutral.c00};
       &:hover {
-        background-color: ${p.theme.colors.palette.primary.c10};
+        background-color: ${p.theme.colors.primary.c10};
       }
       &:active {
-        background-color: ${p.theme.colors.palette.primary.c20};
+        background-color: ${p.theme.colors.primary.c20};
       }
     `,
         filled: `
-      color: ${p.theme.colors.palette.neutral.c00};
-      background-color: ${p.theme.colors.palette.primary.c80};
+      color: ${p.theme.colors.neutral.c00};
+      background-color: ${p.theme.colors.primary.c80};
       &:hover {
-        background-color: ${p.theme.colors.palette.primary.c70};
+        background-color: ${p.theme.colors.primary.c70};
       }
     `,
     },
     disabled: {
         outline: `
-        border-color: ${p.theme.colors.palette.neutral.c50};
-        color: ${p.theme.colors.palette.neutral.c50};
-        background-color: ${p.theme.colors.palette.neutral.c00};
+        border-color: ${p.theme.colors.neutral.c50};
+        color: ${p.theme.colors.neutral.c50};
+        background-color: ${p.theme.colors.neutral.c00};
       `,
         filled: `
-        color: ${p.theme.colors.palette.neutral.c50};
-        background-color: ${p.theme.colors.palette.neutral.c30};
+        color: ${p.theme.colors.neutral.c50};
+        background-color: ${p.theme.colors.neutral.c30};
       `,
     },
     default: `
-    color: ${p.theme.colors.palette.neutral.c100};
+    color: ${p.theme.colors.neutral.c100};
     background-color: transparent;
     &:hover {
       text-decoration: underline;
@@ -128,7 +128,7 @@ export const ButtonUnstyled = styled.button `
 export const Base = baseStyled.button.attrs((p) => {
     var _a;
     return ({
-        ff: "Inter|SemiBold",
+        fontFamily: "Inter",
         fontSize: (_a = p.fontSize) !== null && _a !== void 0 ? _a : 4,
     });
 }) `
@@ -137,6 +137,7 @@ export const Base = baseStyled.button.attrs((p) => {
   border-radius: ${(p) => p.theme.space[13]}px;
   border-style: solid;
   border-width: ${(p) => (p.outline || p.variant === "shade" ? 1 : 0)}px;
+  font-weight: 600;
   ${compose(fontFamily, fontSize, border)};
   height: ${(p) => p.theme.space[13]}px;
   line-height: ${(p) => p.theme.fontSizes[p.fontSize]}px;
@@ -152,7 +153,7 @@ export const Base = baseStyled.button.attrs((p) => {
   position: relative;
   cursor: ${(p) => (p.disabled ? "default" : "pointer")};
   &:active {
-    box-shadow: 0 0 0 4px ${(p) => p.theme.colors.palette.primary.c60};
+    box-shadow: 0 0 0 4px ${(p) => p.theme.colors.primary.c60};
   }
 
   ${(p) => {

package/components/form/BaseInput/index.js

@@ -18,30 +18,30 @@ import { rgba } from "../../../styles/helpers";
 export const InputContainer = styled.div `
   display: flex;
   height: 48px;
-  border: ${(p) => `1px solid ${p.theme.colors.palette.neutral.c40}`};
+  border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};
   border-radius: 24px;
   transition: all 0.2s ease;
-  color: ${(p) => p.theme.colors.palette.neutral.c100};
+  color: ${(p) => p.theme.colors.neutral.c100};
 
   ${(p) => p.focus &&
     !p.error &&
     !p.warning &&
     css `
-      border: 1px solid ${p.theme.colors.palette.primary.c80};
-      box-shadow: 0 0 0 4px ${rgba(p.theme.colors.palette.primary.c60, 0.48)};
+      border: 1px solid ${p.theme.colors.primary.c80};
+      box-shadow: 0 0 0 4px ${rgba(p.theme.colors.primary.c60, 0.48)};
     `};
 
   ${(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.error &&
     p.warning &&
     !p.disabled &&
     css `
-      border: 1px solid ${p.theme.colors.palette.warning.c80};
+      border: 1px solid ${p.theme.colors.warning.c80};
     `};
 
   ${(p) => !p.error &&
@@ -49,14 +49,14 @@ export const InputContainer = styled.div `
     !p.disabled &&
     css `
       &:hover {
-        border: ${!p.disabled && `1px solid ${p.theme.colors.palette.primary.c80}`};
+        border: ${!p.disabled && `1px solid ${p.theme.colors.primary.c80}`};
       }
     `};
 
   ${(p) => p.disabled &&
     css `
-      color: ${p.theme.colors.palette.neutral.c60};
-      background: ${(p) => p.theme.colors.palette.neutral.c20};
+      color: ${p.theme.colors.neutral.c60};
+      background: ${(p) => p.theme.colors.neutral.c20};
     `};
 `;
 export const BaseInput = styled.input.attrs({
@@ -66,7 +66,7 @@ export const BaseInput = styled.input.attrs({
   height: 100%;
   width: 100%;
   border: 0;
-  caret-color: ${(p) => p.error ? p.theme.colors.palette.error.c100 : p.theme.colors.palette.primary.c80};
+  caret-color: ${(p) => (p.error ? p.theme.colors.error.c100 : p.theme.colors.primary.c80)};
   background: none;
   outline: none;
   cursor: ${(p) => (p.disabled ? "not-allowed" : "text")};
@@ -76,7 +76,7 @@ export const BaseInput = styled.input.attrs({
   padding-left: 20px;
   padding-right: 20px;
   &::placeholder {
-    color: ${(p) => p.disabled ? p.theme.colors.palette.neutral.c50 : p.theme.colors.palette.neutral.c70};
+    color: ${(p) => (p.disabled ? p.theme.colors.neutral.c50 : p.theme.colors.neutral.c70)};
   }
 
   /* Hide type=number arrow for Chrome, Safari, Edge, Opera */
@@ -94,11 +94,11 @@ export const BaseInput = styled.input.attrs({
   ${typography}
 `;
 export const InputErrorContainer = styled(Text) `
-  color: ${(p) => p.theme.colors.palette.error.c100};
+  color: ${(p) => p.theme.colors.error.c100};
   margin-left: 12px;
 `;
 export const InputWarningContainer = styled(Text) `
-  color: ${(p) => p.theme.colors.palette.warning.c80};
+  color: ${(p) => p.theme.colors.warning.c80};
   margin-left: 12px;
 `;
 export const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({

package/components/form/Checkbox/Checkbox.js

@@ -17,7 +17,7 @@ const Input = styled.input `
   width: ${(p) => p.theme.space[7]}px;
   height: ${(p) => p.theme.space[7]}px;
   appearance: none;
-  border: 1px solid ${(props) => props.theme.colors.palette.neutral.c90};
+  border: 1px solid ${(props) => props.theme.colors.neutral.c90};
   box-shadow: none;
 
   &:checked {
@@ -42,7 +42,7 @@ const Input = styled.input `
   }
 `;
 const Label = styled(Text).attrs({ type: "body", fontWeight: "500" }) `
-  color: ${(props) => props.theme.colors.palette.neutral.c80};
+  color: ${(props) => props.theme.colors.neutral.c80};
 
   /* Version when the input is checked */
   ${Input}:checked + & {
@@ -55,7 +55,7 @@ const Label = styled(Text).attrs({ type: "body", fontWeight: "500" }) `
 `;
 const Container = styled.div `
   --ll-checkbox-color: unset;
-  color: var(--ll-checkbox-color, ${(props) => props.theme.colors.palette.primary.c90});
+  color: var(--ll-checkbox-color, ${(props) => props.theme.colors.primary.c90});
 
   display: inline-flex;
   column-gap: ${(p) => p.theme.space[5]}px;
@@ -63,19 +63,19 @@ const Container = styled.div `
   cursor: pointer;
 
   &[data-variant="default"] {
-    --ll-checkbox-color: ${(props) => props.theme.colors.palette.primary.c90};
+    --ll-checkbox-color: ${(props) => props.theme.colors.primary.c90};
   }
 
   &[data-variant="success"] {
-    --ll-checkbox-color: ${(props) => props.theme.colors.palette.success.c100};
+    --ll-checkbox-color: ${(props) => props.theme.colors.success.c100};
   }
 
   &[data-variant="error"] {
-    --ll-checkbox-color: ${(props) => props.theme.colors.palette.error.c100};
+    --ll-checkbox-color: ${(props) => props.theme.colors.error.c100};
   }
 
   &[data-disabled="true"] {
-    --ll-checkbox-color: ${(props) => props.theme.colors.palette.neutral.c80};
+    --ll-checkbox-color: ${(props) => props.theme.colors.neutral.c80};
     cursor: unset;
   }
 `;

package/components/form/Dropdown/index.js

@@ -20,7 +20,7 @@ import FlexBox from "../../layout/Flex";
 function DropdownControl(props) {
     const { selectProps: { label }, children, } = props;
     return (React.createElement(components.Control, Object.assign({}, props),
-        React.createElement(Text, { fontWeight: "semiBold", variant: "paragraph", color: "palette.neutral.c80", mr: 2 }, label),
+        React.createElement(Text, { fontWeight: "semiBold", variant: "paragraph", color: "neutral.c80", mr: 2 }, label),
         children));
 }
 function DropdownValueContainer(props) {
@@ -37,7 +37,7 @@ function DropdownIndicatorsContainer() {
 export default function Dropdown(props) {
     const theme = useTheme();
     const { styles } = props, rest = __rest(props, ["styles"]);
-    return (React.createElement(SelectInput, Object.assign({ placeholder: "", isSearchable: false, styles: Object.assign({ singleValue: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.palette.neutral.c100, margin: 0, top: undefined, position: undefined, overflow: undefined, maxWidth: undefined, transform: undefined })), input: () => ({ display: "none" }), menu: (provided) => (Object.assign(Object.assign({}, provided), { border: 0, boxShadow: "none", background: "none", width: "auto", minWidth: "200px" })) }, styles) }, rest, { components: {
+    return (React.createElement(SelectInput, Object.assign({ placeholder: "", isSearchable: false, styles: Object.assign({ singleValue: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.neutral.c100, margin: 0, top: undefined, position: undefined, overflow: undefined, maxWidth: undefined, transform: undefined })), input: () => ({ display: "none" }), menu: (provided) => (Object.assign(Object.assign({}, provided), { border: 0, boxShadow: "none", background: "none", width: "auto", minWidth: "200px" })) }, styles) }, rest, { components: {
             Control: DropdownControl,
             ValueContainer: DropdownValueContainer,
             IndicatorsContainer: DropdownIndicatorsContainer,

package/components/form/LegendInput/index.js

@@ -14,10 +14,10 @@ import Input, { InputRenderRightContainer } from "../BaseInput";
 import Text from "../../asorted/Text";
 import styled from "styled-components";
 const Legend = styled(Text) `
-  color: ${(props) => props.theme.colors.palette.neutral.c70};
+  color: ${(props) => props.theme.colors.neutral.c70};
 
   &[data-disabled="true"] {
-    color: ${(props) => props.theme.colors.palette.neutral.c50};
+    color: ${(props) => props.theme.colors.neutral.c50};
   }
 `;
 export default function LegendInput(_a) {