@ledgerhq/react-ui 0.12.0 → 0.12.1-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/Tag/index.js +1 -2
- package/lib/cjs/components/Tag/index.js.map +2 -2
- package/lib/cjs/styles/helpers.js +4 -0
- package/lib/cjs/styles/helpers.js.map +2 -2
- package/lib/cjs/styles/palettes/colors.stories.js +30 -26
- package/lib/cjs/styles/palettes/colors.stories.js.map +2 -2
- package/lib/components/Tag/index.js +0 -1
- package/lib/styles/helpers.d.ts +2 -0
- package/lib/styles/helpers.js +2 -0
- package/package.json +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/Tag/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport { TextVariants } from \"src/styles/theme\";\nimport { border, BorderProps } from \"styled-system\";\nimport Text, { TextProps } from \"../asorted/Text\";\nimport baseStyled, { BaseStyledProps } from \"../styled\";\n\nexport type Size = \"large\" | \"medium\" | \"small\";\nexport type Type = \"plain\" | \"opacity\" | \"outlined\" | \"outlinedOpacity\";\n\nexport type TagProps = BaseStyledProps &\n BorderProps &\n React.PropsWithChildren<{\n /**\n * Changes the appearance based on the active state.\n */\n active?: boolean;\n /**\n * Tag style.\n */\n type?: Type;\n /**\n * Size of the tag, affects the padding and the casing (uppercase for small and medium)\n */\n size?: Size;\n /**\n * Props passed to the text component, overriding props set internally by Tag component\n */\n textProps?: TextProps;\n\n disabled?: boolean;\n }>;\n\nfunction getColor({ type, active, disabled }: TagProps) {\n switch (type) {\n case \"plain\":\n if (disabled) return active ? \"neutral.c00\" : \"neutral.c70\";\n return active ? \"neutral.c00\" : \"primary.c90\";\n default:\n return disabled ? \"neutral.c70\" : \"primary.c90\";\n }\n}\n\nfunction getBgColor({ type, active, disabled }: TagProps) {\n switch (type) {\n case \"plain\":\n return active ? (disabled ? \"neutral.c70\" : \"primary.c90\") : undefined;\n case \"opacity\":\n return active ? (disabled ? \"neutral.c30\" : \"primary.c20\") : undefined;\n default:\n return;\n }\n}\n\nfunction getBorderColor({ type, active, disabled }: TagProps) {\n if (!active) return;\n switch (type) {\n case \"outlined\":\n return disabled ? \"neutral.c70\" : \"primary.c90\";\n case \"outlinedOpacity\":\n return disabled ? \"neutral.c40\" : \"primary.c40\";\n }\n}\n\nfunction getPadding({ size }: TagProps) {\n switch (size) {\n case \"small\":\n return \"3px 5px\";\n case \"medium\":\n return \"6px 8px\";\n case \"large\":\n default:\n return \"9px 10px 10px\";\n }\n}\n\nfunction getTextProps({ size }: TagProps): {\n variant: TextVariants;\n fontWeight?: string;\n uppercase?: boolean;\n} {\n switch (size) {\n case \"small\":\n case \"medium\":\n return {\n variant: \"tiny\",\n fontWeight: \"semiBold\",\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,2BAAoC;AACpC,kBAAgC;AAChC,oBAA4C;AA4B5C,kBAAkB,EAAE,MAAM,QAAQ,YAAsB;AACtD,UAAQ;AAAA,SACD;AACH,UAAI;AAAU,eAAO,SAAS,gBAAgB;AAC9C,aAAO,SAAS,gBAAgB;AAAA;AAEhC,aAAO,WAAW,gBAAgB;AAAA;AAAA;AAIxC,oBAAoB,EAAE,MAAM,QAAQ,YAAsB;AACxD,UAAQ;AAAA,SACD;AACH,aAAO,SAAU,WAAW,gBAAgB,gBAAiB;AAAA,SAC1D;AACH,aAAO,SAAU,WAAW,gBAAgB,gBAAiB;AAAA;AAE7D;AAAA;AAAA;AAIN,wBAAwB,EAAE,MAAM,QAAQ,YAAsB;AAC5D,MAAI,CAAC;AAAQ;AACb,UAAQ;AAAA,SACD;AACH,aAAO,WAAW,gBAAgB;AAAA,SAC/B;AACH,aAAO,WAAW,gBAAgB;AAAA;AAAA;AAIxC,oBAAoB,EAAE,QAAkB;AACtC,UAAQ;AAAA,SACD;AACH,aAAO;AAAA,SACJ;AACH,aAAO;AAAA,SACJ;AAAA;AAEH,aAAO;AAAA;AAAA;AAIb,sBAAsB,EAAE,QAItB;AACA,UAAQ;AAAA,SACD;AAAA,SACA;AACH,aAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport { TextVariants } from \"src/styles/theme\";\nimport { border, BorderProps } from \"styled-system\";\nimport Text, { TextProps } from \"../asorted/Text\";\nimport baseStyled, { BaseStyledProps } from \"../styled\";\n\nexport type Size = \"large\" | \"medium\" | \"small\";\nexport type Type = \"plain\" | \"opacity\" | \"outlined\" | \"outlinedOpacity\";\n\nexport type TagProps = BaseStyledProps &\n BorderProps &\n React.PropsWithChildren<{\n /**\n * Changes the appearance based on the active state.\n */\n active?: boolean;\n /**\n * Tag style.\n */\n type?: Type;\n /**\n * Size of the tag, affects the padding and the casing (uppercase for small and medium)\n */\n size?: Size;\n /**\n * Props passed to the text component, overriding props set internally by Tag component\n */\n textProps?: TextProps;\n\n disabled?: boolean;\n }>;\n\nfunction getColor({ type, active, disabled }: TagProps) {\n switch (type) {\n case \"plain\":\n if (disabled) return active ? \"neutral.c00\" : \"neutral.c70\";\n return active ? \"neutral.c00\" : \"primary.c90\";\n default:\n return disabled ? \"neutral.c70\" : \"primary.c90\";\n }\n}\n\nfunction getBgColor({ type, active, disabled }: TagProps) {\n switch (type) {\n case \"plain\":\n return active ? (disabled ? \"neutral.c70\" : \"primary.c90\") : undefined;\n case \"opacity\":\n return active ? (disabled ? \"neutral.c30\" : \"primary.c20\") : undefined;\n default:\n return;\n }\n}\n\nfunction getBorderColor({ type, active, disabled }: TagProps) {\n if (!active) return;\n switch (type) {\n case \"outlined\":\n return disabled ? \"neutral.c70\" : \"primary.c90\";\n case \"outlinedOpacity\":\n return disabled ? \"neutral.c40\" : \"primary.c40\";\n }\n}\n\nfunction getPadding({ size }: TagProps) {\n switch (size) {\n case \"small\":\n return \"3px 5px\";\n case \"medium\":\n return \"6px 8px\";\n case \"large\":\n default:\n return \"9px 10px 10px\";\n }\n}\n\nfunction getTextProps({ size }: TagProps): {\n variant: TextVariants;\n fontWeight?: string;\n uppercase?: boolean;\n} {\n switch (size) {\n case \"small\":\n case \"medium\":\n return {\n variant: \"tiny\",\n fontWeight: \"semiBold\",\n };\n case \"large\":\n default:\n return {\n variant: \"extraSmall\",\n fontWeight: \"semiBold\",\n };\n }\n}\n\nconst TagContainer = baseStyled.div.attrs<TagProps, TagProps>((props) => ({\n backgroundColor: props.bg || props.backgroundColor || getBgColor(props),\n color: props.color || getColor(props),\n borderColor: getBorderColor(props),\n}))`\n display: inline-flex;\n justify-content: center;\n border: 1px solid transparent;\n border-radius: ${(p) => `${p.theme.radii[1]}px`};\n padding: ${(p) => getPadding(p)};\n ${border}\n`;\n\nexport default function Tag({\n children,\n textProps,\n size = \"large\",\n ...props\n}: TagProps): JSX.Element {\n const textColor = getColor(props);\n const baseTextProps = getTextProps({ size, ...props });\n return (\n <TagContainer size={size} {...props}>\n <Text {...baseTextProps} color={textColor} {...(textProps ? textProps : {})}>\n {children}\n </Text>\n </TagContainer>\n );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,2BAAoC;AACpC,kBAAgC;AAChC,oBAA4C;AA4B5C,kBAAkB,EAAE,MAAM,QAAQ,YAAsB;AACtD,UAAQ;AAAA,SACD;AACH,UAAI;AAAU,eAAO,SAAS,gBAAgB;AAC9C,aAAO,SAAS,gBAAgB;AAAA;AAEhC,aAAO,WAAW,gBAAgB;AAAA;AAAA;AAIxC,oBAAoB,EAAE,MAAM,QAAQ,YAAsB;AACxD,UAAQ;AAAA,SACD;AACH,aAAO,SAAU,WAAW,gBAAgB,gBAAiB;AAAA,SAC1D;AACH,aAAO,SAAU,WAAW,gBAAgB,gBAAiB;AAAA;AAE7D;AAAA;AAAA;AAIN,wBAAwB,EAAE,MAAM,QAAQ,YAAsB;AAC5D,MAAI,CAAC;AAAQ;AACb,UAAQ;AAAA,SACD;AACH,aAAO,WAAW,gBAAgB;AAAA,SAC/B;AACH,aAAO,WAAW,gBAAgB;AAAA;AAAA;AAIxC,oBAAoB,EAAE,QAAkB;AACtC,UAAQ;AAAA,SACD;AACH,aAAO;AAAA,SACJ;AACH,aAAO;AAAA,SACJ;AAAA;AAEH,aAAO;AAAA;AAAA;AAIb,sBAAsB,EAAE,QAItB;AACA,UAAQ;AAAA,SACD;AAAA,SACA;AACH,aAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA;AAAA,SAEX;AAAA;AAEH,aAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA;AAAA;AAAA;AAKpB,MAAM,eAAe,sBAAW,IAAI,MAA0B,CAAC,UAAW;AAAA,EACxE,iBAAiB,MAAM,MAAM,MAAM,mBAAmB,WAAW;AAAA,EACjE,OAAO,MAAM,SAAS,SAAS;AAAA,EAC/B,aAAa,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKX,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM;AAAA,aAC9B,CAAC,MAAM,WAAW;AAAA,IAC3B;AAAA;AAGW,aAAa;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,OAAO;AAAA,KACJ;AAAA,GACqB;AACxB,QAAM,YAAY,SAAS;AAC3B,QAAM,gBAAgB,aAAa,EAAE,SAAS;AAC9C,SACE,mDAAC,cAAD;AAAA,IAAc;AAAA,OAAgB;AAAA,KAC5B,mDAAC,qBAAD;AAAA,OAAU;AAAA,IAAe,OAAO;AAAA,OAAgB,YAAY,YAAY;AAAA,KACrE;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -25,6 +25,8 @@ __export(exports, {
|
|
|
25
25
|
darken: () => darken,
|
|
26
26
|
ensureContrast: () => ensureContrast,
|
|
27
27
|
ff: () => ff,
|
|
28
|
+
getAlpha: () => getAlpha,
|
|
29
|
+
hex: () => hex,
|
|
28
30
|
lighten: () => lighten,
|
|
29
31
|
mix: () => mix,
|
|
30
32
|
rgba: () => rgba
|
|
@@ -32,6 +34,8 @@ __export(exports, {
|
|
|
32
34
|
var import_color = __toModule(require("color"));
|
|
33
35
|
var import_theme = __toModule(require("./theme"));
|
|
34
36
|
const rgba = (c, a) => (0, import_color.default)(c).alpha(a).rgb().toString();
|
|
37
|
+
const hex = (color) => (0, import_color.default)(color).hex().toString();
|
|
38
|
+
const getAlpha = (color) => (0, import_color.default)(color).alpha();
|
|
35
39
|
const darken = (c, a) => (0, import_color.default)(c).darken(a).toString();
|
|
36
40
|
const lighten = (c, a) => (0, import_color.default)(c).lighten(a).toString();
|
|
37
41
|
const mix = (c, b, a) => (0, import_color.default)(c).mix((0, import_color.default)(b), a).toString();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/styles/helpers.ts"],
|
|
4
|
-
"sourcesContent": ["import Color from \"color\";\n\nimport { fontFamilies } from \"./theme\";\n\nexport const rgba = (c: string, a: number): string => Color(c).alpha(a).rgb().toString();\n\nexport const darken = (c: string, a: number): string => Color(c).darken(a).toString();\n\nexport const lighten = (c: string, a: number): string => Color(c).lighten(a).toString();\n\nexport const mix = (c: string, b: string, a: number): string =>\n Color(c).mix(Color(b), a).toString();\n\nexport const ff = (v: string) => {\n const [font, type = \"Regular\"] = v.split(\"|\");\n // @ts-expect-error FIXME\n const { style, weight } = fontFamilies[font][type];\n // @ts-expect-error FIXME\n const fallback: string = fontFamilies[font].fallback ?? \"Arial\";\n\n return {\n fontFamily: `${font}, ${fallback}`,\n fontWeight: weight,\n fontStyle: style,\n };\n};\n\nexport const ensureContrast = (color1: string, color2: string) => {\n const colorL1 = Color(color1).luminosity() + 0.05;\n const colorL2 = Color(color2).luminosity() + 0.05;\n\n const lRatio = colorL1 > colorL2 ? colorL1 / colorL2 : colorL2 / colorL1;\n\n if (lRatio < 1.5) {\n return Color(color1).rotate(180).negate().string();\n }\n return color1;\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,mBAA6B;AAEtB,MAAM,OAAO,CAAC,GAAW,MAAsB,0BAAM,GAAG,MAAM,GAAG,MAAM;AAEvE,MAAM,SAAS,CAAC,GAAW,MAAsB,0BAAM,GAAG,OAAO,GAAG;AAEpE,MAAM,UAAU,CAAC,GAAW,MAAsB,0BAAM,GAAG,QAAQ,GAAG;AAEtE,MAAM,MAAM,CAAC,GAAW,GAAW,MACxC,0BAAM,GAAG,IAAI,0BAAM,IAAI,GAAG;AAErB,MAAM,KAAK,CAAC,MAAc;AAC/B,QAAM,CAAC,MAAM,OAAO,aAAa,EAAE,MAAM;AAEzC,QAAM,EAAE,OAAO,WAAW,0BAAa,MAAM;AAE7C,QAAM,WAAmB,0BAAa,MAAM,YAAY;AAExD,SAAO;AAAA,IACL,YAAY,GAAG,SAAS;AAAA,IACxB,YAAY;AAAA,IACZ,WAAW;AAAA;AAAA;AAIR,MAAM,iBAAiB,CAAC,QAAgB,WAAmB;AAChE,QAAM,UAAU,0BAAM,QAAQ,eAAe;AAC7C,QAAM,UAAU,0BAAM,QAAQ,eAAe;AAE7C,QAAM,SAAS,UAAU,UAAU,UAAU,UAAU,UAAU;AAEjE,MAAI,SAAS,KAAK;AAChB,WAAO,0BAAM,QAAQ,OAAO,KAAK,SAAS;AAAA;AAE5C,SAAO;AAAA;",
|
|
4
|
+
"sourcesContent": ["import Color from \"color\";\n\nimport { fontFamilies } from \"./theme\";\n\nexport const rgba = (c: string, a: number): string => Color(c).alpha(a).rgb().toString();\n\nexport const hex = (color: string): string => Color(color).hex().toString();\n\nexport const getAlpha = (color: string): number => Color(color).alpha();\n\nexport const darken = (c: string, a: number): string => Color(c).darken(a).toString();\n\nexport const lighten = (c: string, a: number): string => Color(c).lighten(a).toString();\n\nexport const mix = (c: string, b: string, a: number): string =>\n Color(c).mix(Color(b), a).toString();\n\nexport const ff = (v: string) => {\n const [font, type = \"Regular\"] = v.split(\"|\");\n // @ts-expect-error FIXME\n const { style, weight } = fontFamilies[font][type];\n // @ts-expect-error FIXME\n const fallback: string = fontFamilies[font].fallback ?? \"Arial\";\n\n return {\n fontFamily: `${font}, ${fallback}`,\n fontWeight: weight,\n fontStyle: style,\n };\n};\n\nexport const ensureContrast = (color1: string, color2: string) => {\n const colorL1 = Color(color1).luminosity() + 0.05;\n const colorL2 = Color(color2).luminosity() + 0.05;\n\n const lRatio = colorL1 > colorL2 ? colorL1 / colorL2 : colorL2 / colorL1;\n\n if (lRatio < 1.5) {\n return Color(color1).rotate(180).negate().string();\n }\n return color1;\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,mBAA6B;AAEtB,MAAM,OAAO,CAAC,GAAW,MAAsB,0BAAM,GAAG,MAAM,GAAG,MAAM;AAEvE,MAAM,MAAM,CAAC,UAA0B,0BAAM,OAAO,MAAM;AAE1D,MAAM,WAAW,CAAC,UAA0B,0BAAM,OAAO;AAEzD,MAAM,SAAS,CAAC,GAAW,MAAsB,0BAAM,GAAG,OAAO,GAAG;AAEpE,MAAM,UAAU,CAAC,GAAW,MAAsB,0BAAM,GAAG,QAAQ,GAAG;AAEtE,MAAM,MAAM,CAAC,GAAW,GAAW,MACxC,0BAAM,GAAG,IAAI,0BAAM,IAAI,GAAG;AAErB,MAAM,KAAK,CAAC,MAAc;AAC/B,QAAM,CAAC,MAAM,OAAO,aAAa,EAAE,MAAM;AAEzC,QAAM,EAAE,OAAO,WAAW,0BAAa,MAAM;AAE7C,QAAM,WAAmB,0BAAa,MAAM,YAAY;AAExD,SAAO;AAAA,IACL,YAAY,GAAG,SAAS;AAAA,IACxB,YAAY;AAAA,IACZ,WAAW;AAAA;AAAA;AAIR,MAAM,iBAAiB,CAAC,QAAgB,WAAmB;AAChE,QAAM,UAAU,0BAAM,QAAQ,eAAe;AAC7C,QAAM,UAAU,0BAAM,QAAQ,eAAe;AAE7C,QAAM,SAAS,UAAU,UAAU,UAAU,UAAU,UAAU;AAEjE,MAAI,SAAS,KAAK;AAChB,WAAO,0BAAM,QAAQ,OAAO,KAAK,SAAS;AAAA;AAE5C,SAAO;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -29,7 +29,7 @@ var import_react = __toModule(require("react"));
|
|
|
29
29
|
var import_styled_components = __toModule(require("styled-components"));
|
|
30
30
|
var import_Text = __toModule(require("../../components/asorted/Text"));
|
|
31
31
|
var import_Flex = __toModule(require("../../components/layout/Flex"));
|
|
32
|
-
var
|
|
32
|
+
var import_helpers = __toModule(require("../helpers"));
|
|
33
33
|
var colors_stories_default = { title: "Particles" };
|
|
34
34
|
const ColorArea = import_styled_components.default.div`
|
|
35
35
|
width: 200px;
|
|
@@ -41,41 +41,45 @@ const ColorArea = import_styled_components.default.div`
|
|
|
41
41
|
border-radius: 2px;
|
|
42
42
|
`;
|
|
43
43
|
const CardColor = ({ shade, type, value }) => {
|
|
44
|
-
const
|
|
44
|
+
const rgba = (0, import_react.useMemo)(() => value.length > 7 ? `${(0, import_helpers.hex)(value)} ${(0, import_helpers.getAlpha)(value) * 100}%` : value, [value]);
|
|
45
45
|
const onClick = (type2, shade2) => {
|
|
46
46
|
navigator.clipboard.writeText(`p.theme.colors.${type2}.${shade2}`);
|
|
47
47
|
};
|
|
48
48
|
return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
|
|
49
49
|
flexDirection: "column",
|
|
50
|
-
alignItems: "center"
|
|
51
|
-
onMouseEnter: () => setIsHovered(true),
|
|
52
|
-
onMouseLeave: () => setIsHovered(false)
|
|
50
|
+
alignItems: "center"
|
|
53
51
|
}, /* @__PURE__ */ import_react.default.createElement(ColorArea, {
|
|
54
52
|
type,
|
|
55
53
|
shade,
|
|
56
54
|
onClick: () => onClick(type, shade)
|
|
57
55
|
}), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
|
|
58
56
|
variant: "tiny"
|
|
59
|
-
},
|
|
57
|
+
}, shade), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
|
|
58
|
+
variant: "tiny",
|
|
59
|
+
color: "neutral.c60"
|
|
60
|
+
}, rgba));
|
|
61
|
+
};
|
|
62
|
+
const Colors = () => {
|
|
63
|
+
const { colors } = (0, import_styled_components.useTheme)();
|
|
64
|
+
const { palette, type, ...others } = colors;
|
|
65
|
+
return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
|
|
66
|
+
flexDirection: "column",
|
|
67
|
+
rowGap: "2rem"
|
|
68
|
+
}, Object.entries(others).map(([type2, shades]) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
|
|
69
|
+
flexDirection: "column",
|
|
70
|
+
rowGap: "1rem"
|
|
71
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
|
|
72
|
+
variant: "h2",
|
|
73
|
+
textTransform: "uppercase"
|
|
74
|
+
}, type2), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
|
|
75
|
+
columnGap: "0.5rem",
|
|
76
|
+
rowGap: "0.5rem",
|
|
77
|
+
flexWrap: "wrap"
|
|
78
|
+
}, Object.entries(shades).map(([shade, value]) => /* @__PURE__ */ import_react.default.createElement(CardColor, {
|
|
79
|
+
key: shade,
|
|
80
|
+
shade,
|
|
81
|
+
type: type2,
|
|
82
|
+
value
|
|
83
|
+
}))))));
|
|
60
84
|
};
|
|
61
|
-
const { type: _, ...palette } = import_ui_shared.palettes.light;
|
|
62
|
-
const Colors = () => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
|
|
63
|
-
flexDirection: "column",
|
|
64
|
-
rowGap: "2rem"
|
|
65
|
-
}, Object.entries(palette).map(([type, shades]) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
|
|
66
|
-
flexDirection: "column",
|
|
67
|
-
rowGap: "1rem"
|
|
68
|
-
}, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
|
|
69
|
-
variant: "h2",
|
|
70
|
-
textTransform: "uppercase"
|
|
71
|
-
}, type), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
|
|
72
|
-
columnGap: "0.5rem",
|
|
73
|
-
rowGap: "0.5rem",
|
|
74
|
-
flexWrap: "wrap"
|
|
75
|
-
}, Object.entries(shades).map(([shade, value]) => /* @__PURE__ */ import_react.default.createElement(CardColor, {
|
|
76
|
-
key: shade,
|
|
77
|
-
shade,
|
|
78
|
-
type,
|
|
79
|
-
value
|
|
80
|
-
}))))));
|
|
81
85
|
//# sourceMappingURL=colors.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/styles/palettes/colors.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from \"react\";\nimport styled, { useTheme } from \"styled-components\";\nimport Text from \"../../components/asorted/Text\";\nimport Flex from \"../../components/layout/Flex\";\nimport { getAlpha, hex } from \"../helpers\";\nimport { ColorPalette } from \"@ledgerhq/ui-shared\";\n\nexport default { title: \"Particles\" };\n\nconst ColorArea = styled.div<{ type: keyof ColorPalette; shade: string }>`\n width: 200px;\n aspect-ratio: 1;\n background-color: ${(p) => {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore next-line\n return p.theme.colors[p.type][p.shade];\n }};\n cursor: pointer;\n border-radius: 2px;\n`;\n\ntype CardColorProps = { shade: string; type: string; value: string };\nconst CardColor = ({ shade, type, value }: CardColorProps): JSX.Element => {\n const rgba = useMemo(\n () => (value.length > 7 ? `${hex(value)} ${getAlpha(value) * 100}%` : value),\n [value],\n );\n\n const onClick = (type: string, shade: string): void => {\n navigator.clipboard.writeText(`p.theme.colors.${type}.${shade}`);\n };\n\n return (\n <Flex flexDirection=\"column\" alignItems=\"center\">\n <ColorArea\n type={type as keyof ColorPalette}\n shade={shade}\n onClick={() => onClick(type, shade)}\n />\n <Text variant=\"tiny\">{shade}</Text>\n <Text variant=\"tiny\" color=\"neutral.c60\">\n {rgba}\n </Text>\n </Flex>\n );\n};\n\nexport const Colors = (): JSX.Element => {\n const { colors } = useTheme();\n const { palette, type, ...others } = colors; // eslint-disable-line @typescript-eslint/no-unused-vars\n return (\n <Flex flexDirection=\"column\" rowGap=\"2rem\">\n {Object.entries(others).map(([type, shades]) => (\n <Flex flexDirection=\"column\" rowGap=\"1rem\">\n <Text variant=\"h2\" textTransform=\"uppercase\">\n {type}\n </Text>\n <Flex columnGap=\"0.5rem\" rowGap=\"0.5rem\" flexWrap=\"wrap\">\n {Object.entries(shades).map(([shade, value]) => (\n <CardColor key={shade} shade={shade} type={type} value={value} />\n ))}\n </Flex>\n </Flex>\n ))}\n </Flex>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAC/B,+BAAiC;AACjC,kBAAiB;AACjB,kBAAiB;AACjB,qBAA8B;AAG9B,IAAO,yBAAQ,EAAE,OAAO;AAExB,MAAM,YAAY,iCAAO;AAAA;AAAA;AAAA,sBAGH,CAAC,MAAM;AAGzB,SAAO,EAAE,MAAM,OAAO,EAAE,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAOpC,MAAM,YAAY,CAAC,EAAE,OAAO,MAAM,YAAyC;AACzE,QAAM,OAAO,0BACX,MAAO,MAAM,SAAS,IAAI,GAAG,wBAAI,UAAU,6BAAS,SAAS,SAAS,OACtE,CAAC;AAGH,QAAM,UAAU,CAAC,OAAc,WAAwB;AACrD,cAAU,UAAU,UAAU,kBAAkB,SAAQ;AAAA;AAG1D,SACE,mDAAC,qBAAD;AAAA,IAAM,eAAc;AAAA,IAAS,YAAW;AAAA,KACtC,mDAAC,WAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,SAAS,MAAM,QAAQ,MAAM;AAAA,MAE/B,mDAAC,qBAAD;AAAA,IAAM,SAAQ;AAAA,KAAQ,QACtB,mDAAC,qBAAD;AAAA,IAAM,SAAQ;AAAA,IAAO,OAAM;AAAA,KACxB;AAAA;AAMF,MAAM,SAAS,MAAmB;AACvC,QAAM,EAAE,WAAW;AACnB,QAAM,EAAE,SAAS,SAAS,WAAW;AACrC,SACE,mDAAC,qBAAD;AAAA,IAAM,eAAc;AAAA,IAAS,QAAO;AAAA,KACjC,OAAO,QAAQ,QAAQ,IAAI,CAAC,CAAC,OAAM,YAClC,mDAAC,qBAAD;AAAA,IAAM,eAAc;AAAA,IAAS,QAAO;AAAA,KAClC,mDAAC,qBAAD;AAAA,IAAM,SAAQ;AAAA,IAAK,eAAc;AAAA,KAC9B,QAEH,mDAAC,qBAAD;AAAA,IAAM,WAAU;AAAA,IAAS,QAAO;AAAA,IAAS,UAAS;AAAA,KAC/C,OAAO,QAAQ,QAAQ,IAAI,CAAC,CAAC,OAAO,WACnC,mDAAC,WAAD;AAAA,IAAW,KAAK;AAAA,IAAO;AAAA,IAAc,MAAM;AAAA,IAAM;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/lib/styles/helpers.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export declare const rgba: (c: string, a: number) => string;
|
|
2
|
+
export declare const hex: (color: string) => string;
|
|
3
|
+
export declare const getAlpha: (color: string) => number;
|
|
2
4
|
export declare const darken: (c: string, a: number) => string;
|
|
3
5
|
export declare const lighten: (c: string, a: number) => string;
|
|
4
6
|
export declare const mix: (c: string, b: string, a: number) => string;
|
package/lib/styles/helpers.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import Color from "color";
|
|
2
2
|
import { fontFamilies } from "./theme";
|
|
3
3
|
export const rgba = (c, a) => Color(c).alpha(a).rgb().toString();
|
|
4
|
+
export const hex = (color) => Color(color).hex().toString();
|
|
5
|
+
export const getAlpha = (color) => Color(color).alpha();
|
|
4
6
|
export const darken = (c, a) => Color(c).darken(a).toString();
|
|
5
7
|
export const lighten = (c, a) => Color(c).lighten(a).toString();
|
|
6
8
|
export const mix = (c, b, a) => Color(c).mix(Color(b), a).toString();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/react-ui",
|
|
3
|
-
"version": "0.12.0",
|
|
3
|
+
"version": "0.12.1-next.0",
|
|
4
4
|
"description": "Ledger Live - Desktop UI",
|
|
5
5
|
"author": "Ledger Live Team <team-live@ledger.fr>",
|
|
6
6
|
"repository": {
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"styled-system": "^5.1.5",
|
|
78
78
|
"@ledgerhq/crypto-icons-ui": "^0.2.1",
|
|
79
79
|
"@ledgerhq/icons-ui": "^0.3.5",
|
|
80
|
-
"@ledgerhq/ui-shared": "^0.1.
|
|
80
|
+
"@ledgerhq/ui-shared": "^0.1.11-next.0"
|
|
81
81
|
},
|
|
82
82
|
"peerDependencies": {
|
|
83
83
|
"react": "^17.0.2",
|