@ledgerhq/react-ui 0.7.7 → 0.7.9-nightly.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/form/Checkbox/Checkbox.js +1 -1
- package/lib/cjs/components/form/Checkbox/Checkbox.js.map +2 -2
- package/lib/cjs/components/message/Tip/index.js +1 -1
- package/lib/cjs/components/message/Tip/index.js.map +2 -2
- package/lib/cjs/styles/breakpoints.stories.js +124 -0
- package/lib/cjs/styles/breakpoints.stories.js.map +7 -0
- package/lib/cjs/styles/theme.js +10 -1
- package/lib/cjs/styles/theme.js.map +2 -2
- package/lib/components/form/Checkbox/Checkbox.js +1 -1
- package/lib/components/message/Tip/index.js +1 -1
- package/lib/styles/theme.d.ts +3 -0
- package/lib/styles/theme.js +8 -0
- package/package.json +3 -3
|
@@ -39,7 +39,7 @@ const Input = import_styled_components.default.input`
|
|
|
39
39
|
border-radius: ${(p) => `${p.theme.radii[1]}px`};
|
|
40
40
|
position: relative;
|
|
41
41
|
|
|
42
|
-
width: ${(p) => p.theme.space[7]}px;
|
|
42
|
+
min-width: ${(p) => p.theme.space[7]}px;
|
|
43
43
|
height: ${(p) => p.theme.space[7]}px;
|
|
44
44
|
appearance: none;
|
|
45
45
|
border: 1px solid ${(props) => props.theme.colors.neutral.c90};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/form/Checkbox/Checkbox.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport CheckAloneRegular from \"@ledgerhq/icons-ui/react/CheckAloneRegular\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\n\nconst Icon = () =>\n React.cloneElement(CheckAloneRegular({ size: 13, color: \"white\" }), {\n // the xmlns attribute is required to properly display the checkbox\n xmlns: \"http://www.w3.org/2000/svg\",\n });\nconst CheckMarkIcon = encodeURIComponent(renderToStaticMarkup(<Icon />));\n\nconst Input = styled.input`\n background-color: transparent;\n\n border-radius: ${(p) => `${p.theme.radii[1]}px`};\n position: relative;\n\n width: ${(p) => p.theme.space[7]}px;\n height: ${(p) => p.theme.space[7]}px;\n appearance: none;\n border: 1px solid ${(props) => props.theme.colors.neutral.c90};\n box-shadow: none;\n\n &:checked {\n background-color: currentColor;\n border-color: currentColor;\n }\n\n &:checked::after {\n content: \" \";\n width: ${(p) => p.theme.space[7]}px;\n height: ${(p) => p.theme.space[7]}px;\n display: inline-block;\n\n background-image: url(\"data:image/svg+xml,${CheckMarkIcon}\");\n background-position: center;\n background-repeat: no-repeat;\n\n /* Trick to center the check mark by taking into account the border */\n position: absolute;\n top: -1px;\n left: -1px;\n }\n`;\n\nconst Label = styled(Text).attrs({ type: \"body\", fontWeight: \"500\" })`\n color: ${(props) => props.theme.colors.neutral.c80};\n\n /* Version when the input is checked */\n ${Input}:checked + & {\n color: currentColor;\n }\n\n &:first-letter {\n text-transform: uppercase;\n }\n`;\n\nconst Container = styled.div`\n --ll-checkbox-color: unset;\n color: var(--ll-checkbox-color, ${(props) => props.theme.colors.primary.c90});\n\n display: inline-flex;\n column-gap: ${(p) => p.theme.space[5]}px;\n align-items: center;\n cursor: pointer;\n\n &[data-variant=\"default\"] {\n --ll-checkbox-color: ${(props) => props.theme.colors.primary.c90};\n }\n\n &[data-variant=\"success\"] {\n --ll-checkbox-color: ${(props) => props.theme.colors.success.c100};\n }\n\n &[data-variant=\"error\"] {\n --ll-checkbox-color: ${(props) => props.theme.colors.error.c100};\n }\n\n &[data-disabled=\"true\"] {\n --ll-checkbox-color: ${(props) => props.theme.colors.neutral.c80};\n cursor: unset;\n }\n`;\n\nexport type CheckboxProps = {\n isDisabled?: boolean;\n isChecked: boolean;\n variant?: \"default\" | \"success\" | \"error\";\n label?: React.ReactNode;\n name: string;\n onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n};\n\nconst Checkbox = ({\n isDisabled = false,\n variant = \"default\",\n label,\n isChecked,\n name,\n onChange,\n}: CheckboxProps): JSX.Element => (\n <Container data-variant={variant} data-disabled={isDisabled}>\n <Input\n type=\"checkbox\"\n name={name}\n id={name}\n checked={isChecked}\n disabled={isDisabled}\n onChange={onChange}\n />\n {label ? (\n <Label as=\"label\" htmlFor={name}>\n {label}\n </Label>\n ) : null}\n </Container>\n);\n\nexport default Checkbox;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,+BAA8B;AAC9B,oBAAqC;AAErC,MAAM,OAAO,MACX,qBAAM,aAAa,sCAAkB,EAAE,MAAM,IAAI,OAAO,YAAY;AAAA,EAElE,OAAO;AAAA;AAEX,MAAM,gBAAgB,mBAAmB,wCAAqB,mDAAC,MAAD;AAE9D,MAAM,QAAQ,iCAAO;AAAA;AAAA;AAAA,mBAGF,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport CheckAloneRegular from \"@ledgerhq/icons-ui/react/CheckAloneRegular\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\n\nconst Icon = () =>\n React.cloneElement(CheckAloneRegular({ size: 13, color: \"white\" }), {\n // the xmlns attribute is required to properly display the checkbox\n xmlns: \"http://www.w3.org/2000/svg\",\n });\nconst CheckMarkIcon = encodeURIComponent(renderToStaticMarkup(<Icon />));\n\nconst Input = styled.input`\n background-color: transparent;\n\n border-radius: ${(p) => `${p.theme.radii[1]}px`};\n position: relative;\n\n min-width: ${(p) => p.theme.space[7]}px;\n height: ${(p) => p.theme.space[7]}px;\n appearance: none;\n border: 1px solid ${(props) => props.theme.colors.neutral.c90};\n box-shadow: none;\n\n &:checked {\n background-color: currentColor;\n border-color: currentColor;\n }\n\n &:checked::after {\n content: \" \";\n width: ${(p) => p.theme.space[7]}px;\n height: ${(p) => p.theme.space[7]}px;\n display: inline-block;\n\n background-image: url(\"data:image/svg+xml,${CheckMarkIcon}\");\n background-position: center;\n background-repeat: no-repeat;\n\n /* Trick to center the check mark by taking into account the border */\n position: absolute;\n top: -1px;\n left: -1px;\n }\n`;\n\nconst Label = styled(Text).attrs({ type: \"body\", fontWeight: \"500\" })`\n color: ${(props) => props.theme.colors.neutral.c80};\n\n /* Version when the input is checked */\n ${Input}:checked + & {\n color: currentColor;\n }\n\n &:first-letter {\n text-transform: uppercase;\n }\n`;\n\nconst Container = styled.div`\n --ll-checkbox-color: unset;\n color: var(--ll-checkbox-color, ${(props) => props.theme.colors.primary.c90});\n\n display: inline-flex;\n column-gap: ${(p) => p.theme.space[5]}px;\n align-items: center;\n cursor: pointer;\n\n &[data-variant=\"default\"] {\n --ll-checkbox-color: ${(props) => props.theme.colors.primary.c90};\n }\n\n &[data-variant=\"success\"] {\n --ll-checkbox-color: ${(props) => props.theme.colors.success.c100};\n }\n\n &[data-variant=\"error\"] {\n --ll-checkbox-color: ${(props) => props.theme.colors.error.c100};\n }\n\n &[data-disabled=\"true\"] {\n --ll-checkbox-color: ${(props) => props.theme.colors.neutral.c80};\n cursor: unset;\n }\n`;\n\nexport type CheckboxProps = {\n isDisabled?: boolean;\n isChecked: boolean;\n variant?: \"default\" | \"success\" | \"error\";\n label?: React.ReactNode;\n name: string;\n onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n};\n\nconst Checkbox = ({\n isDisabled = false,\n variant = \"default\",\n label,\n isChecked,\n name,\n onChange,\n}: CheckboxProps): JSX.Element => (\n <Container data-variant={variant} data-disabled={isDisabled}>\n <Input\n type=\"checkbox\"\n name={name}\n id={name}\n checked={isChecked}\n disabled={isDisabled}\n onChange={onChange}\n />\n {label ? (\n <Label as=\"label\" htmlFor={name}>\n {label}\n </Label>\n ) : null}\n </Container>\n);\n\nexport default Checkbox;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,+BAA8B;AAC9B,oBAAqC;AAErC,MAAM,OAAO,MACX,qBAAM,aAAa,sCAAkB,EAAE,MAAM,IAAI,OAAO,YAAY;AAAA,EAElE,OAAO;AAAA;AAEX,MAAM,gBAAgB,mBAAmB,wCAAqB,mDAAC,MAAD;AAE9D,MAAM,QAAQ,iCAAO;AAAA;AAAA;AAAA,mBAGF,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA,eAG5B,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,YACxB,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA,sBAEX,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAU/C,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,cACpB,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA,gDAGa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWhD,MAAM,QAAQ,sCAAO,qBAAM,MAAM,EAAE,MAAM,QAAQ,YAAY;AAAA,WAClD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,IAG7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASJ,MAAM,YAAY,iCAAO;AAAA;AAAA,oCAEW,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gBAG1D,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKV,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,2BAItC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,2BAItC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,2BAIpC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAcjE,MAAM,WAAW,CAAC;AAAA,EAChB,aAAa;AAAA,EACb,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAEA,mDAAC,WAAD;AAAA,EAAW,gBAAc;AAAA,EAAS,iBAAe;AAAA,GAC/C,mDAAC,OAAD;AAAA,EACE,MAAK;AAAA,EACL;AAAA,EACA,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,UAAU;AAAA,EACV;AAAA,IAED,QACC,mDAAC,OAAD;AAAA,EAAO,IAAG;AAAA,EAAQ,SAAS;AAAA,GACxB,SAED;AAIR,IAAO,mBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -63,7 +63,7 @@ const StyledIconContainer = import_styled_components.default.div`
|
|
|
63
63
|
}}
|
|
64
64
|
|
|
65
65
|
border-radius: ${(p) => `${p.theme.radii[1]}px`};
|
|
66
|
-
margin-right ${(p) => `${p.theme.space[6]}px`};
|
|
66
|
+
margin-right: ${(p) => `${p.theme.space[6]}px`};
|
|
67
67
|
padding: 6px;
|
|
68
68
|
display: flex;
|
|
69
69
|
align-items: center;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/message/Tip/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport { CheckAloneMedium, CloseMedium, CircledAlertMedium } from \"@ledgerhq/icons-ui/react\";\nimport { Flex } from \"../../layout\";\n\ntype TipType = \"success\" | \"warning\" | \"error\";\n\nexport interface TipProps {\n type?: TipType;\n label: string;\n}\n\nconst icons = {\n success: <CheckAloneMedium size={16} />,\n warning: <CircledAlertMedium size={16} />,\n error: <CloseMedium size={16} />,\n};\n\nconst StyledIconContainer = styled.div<{ type?: TipType }>`\n ${(p) => {\n switch (p.type) {\n case \"warning\":\n return css`\n background: ${p.theme.colors.warning.c10};\n color: ${p.theme.colors.warning.c100};\n `;\n case \"error\":\n return css`\n background: ${p.theme.colors.error.c10};\n color: ${p.theme.colors.error.c100};\n `;\n case \"success\":\n default:\n return css`\n background: ${p.theme.colors.success.c30};\n color: ${p.theme.colors.success.c100};\n `;\n }\n }}\n\n border-radius: ${(p) => `${p.theme.radii[1]}px`};\n margin-right ${(p) => `${p.theme.space[6]}px`};\n padding: 6px;\n display: flex;\n align-items: center;\n`;\n\nexport default function Tip({ type, label }: TipProps): JSX.Element {\n return (\n <Flex alignItems={\"center\"}>\n {type && <StyledIconContainer type={type}>{icons[type]}</StyledIconContainer>}\n <Text variant={\"paragraph\"} fontWeight={\"medium\"} color={\"neutral.c100\"} flexShrink={1}>\n {label}\n </Text>\n </Flex>\n );\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAA4B;AAC5B,kBAAiB;AACjB,oBAAkE;AAClE,oBAAqB;AASrB,MAAM,QAAQ;AAAA,EACZ,SAAS,mDAAC,gCAAD;AAAA,IAAkB,MAAM;AAAA;AAAA,EACjC,SAAS,mDAAC,kCAAD;AAAA,IAAoB,MAAM;AAAA;AAAA,EACnC,OAAO,mDAAC,2BAAD;AAAA,IAAa,MAAM;AAAA;AAAA;AAG5B,MAAM,sBAAsB,iCAAO;AAAA,IAC/B,CAAC,MAAM;AACP,UAAQ,EAAE;AAAA,SACH;AACH,aAAO;AAAA,wBACS,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC5B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,SAE/B;AACH,aAAO;AAAA,wBACS,EAAE,MAAM,OAAO,MAAM;AAAA,mBAC1B,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA,SAE7B;AAAA;AAEH,aAAO;AAAA,wBACS,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC5B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKvB,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM;AAAA,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport { CheckAloneMedium, CloseMedium, CircledAlertMedium } from \"@ledgerhq/icons-ui/react\";\nimport { Flex } from \"../../layout\";\n\ntype TipType = \"success\" | \"warning\" | \"error\";\n\nexport interface TipProps {\n type?: TipType;\n label: string;\n}\n\nconst icons = {\n success: <CheckAloneMedium size={16} />,\n warning: <CircledAlertMedium size={16} />,\n error: <CloseMedium size={16} />,\n};\n\nconst StyledIconContainer = styled.div<{ type?: TipType }>`\n ${(p) => {\n switch (p.type) {\n case \"warning\":\n return css`\n background: ${p.theme.colors.warning.c10};\n color: ${p.theme.colors.warning.c100};\n `;\n case \"error\":\n return css`\n background: ${p.theme.colors.error.c10};\n color: ${p.theme.colors.error.c100};\n `;\n case \"success\":\n default:\n return css`\n background: ${p.theme.colors.success.c30};\n color: ${p.theme.colors.success.c100};\n `;\n }\n }}\n\n border-radius: ${(p) => `${p.theme.radii[1]}px`};\n margin-right: ${(p) => `${p.theme.space[6]}px`};\n padding: 6px;\n display: flex;\n align-items: center;\n`;\n\nexport default function Tip({ type, label }: TipProps): JSX.Element {\n return (\n <Flex alignItems={\"center\"}>\n {type && <StyledIconContainer type={type}>{icons[type]}</StyledIconContainer>}\n <Text variant={\"paragraph\"} fontWeight={\"medium\"} color={\"neutral.c100\"} flexShrink={1}>\n {label}\n </Text>\n </Flex>\n );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAA4B;AAC5B,kBAAiB;AACjB,oBAAkE;AAClE,oBAAqB;AASrB,MAAM,QAAQ;AAAA,EACZ,SAAS,mDAAC,gCAAD;AAAA,IAAkB,MAAM;AAAA;AAAA,EACjC,SAAS,mDAAC,kCAAD;AAAA,IAAoB,MAAM;AAAA;AAAA,EACnC,OAAO,mDAAC,2BAAD;AAAA,IAAa,MAAM;AAAA;AAAA;AAG5B,MAAM,sBAAsB,iCAAO;AAAA,IAC/B,CAAC,MAAM;AACP,UAAQ,EAAE;AAAA,SACH;AACH,aAAO;AAAA,wBACS,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC5B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,SAE/B;AACH,aAAO;AAAA,wBACS,EAAE,MAAM,OAAO,MAAM;AAAA,mBAC1B,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA,SAE7B;AAAA;AAEH,aAAO;AAAA,wBACS,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC5B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKvB,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM;AAAA,kBACzB,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAM3B,aAAa,EAAE,MAAM,SAAgC;AAClE,SACE,mDAAC,oBAAD;AAAA,IAAM,YAAY;AAAA,KACf,QAAQ,mDAAC,qBAAD;AAAA,IAAqB;AAAA,KAAa,MAAM,QACjD,mDAAC,qBAAD;AAAA,IAAM,SAAS;AAAA,IAAa,YAAY;AAAA,IAAU,OAAO;AAAA,IAAgB,YAAY;AAAA,KAClF;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
__markAsModule(target);
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __reExport = (target, module2, desc) => {
|
|
14
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(module2))
|
|
16
|
+
if (!__hasOwnProp.call(target, key) && key !== "default")
|
|
17
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return target;
|
|
20
|
+
};
|
|
21
|
+
var __toModule = (module2) => {
|
|
22
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
23
|
+
};
|
|
24
|
+
__export(exports, {
|
|
25
|
+
Breakpoints: () => Breakpoints,
|
|
26
|
+
default: () => breakpoints_stories_default
|
|
27
|
+
});
|
|
28
|
+
var import_react = __toModule(require("react"));
|
|
29
|
+
var import_Flex = __toModule(require("../components/layout/Flex"));
|
|
30
|
+
var import_Text = __toModule(require("../components/asorted/Text"));
|
|
31
|
+
const description = `
|
|
32
|
+
## <Heading hidden>Overview</Heading>
|
|
33
|
+
|
|
34
|
+
Every utility class can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.
|
|
35
|
+
|
|
36
|
+
There are five breakpoints by default, inspired by common device resolutions:
|
|
37
|
+
|
|
38
|
+
| Breakpoint prefix | Minimum width | CSS |
|
|
39
|
+
| --- | --- | --- |
|
|
40
|
+
| 'sm' | 640px | '@media (min-width: 640px) { ... }' |
|
|
41
|
+
| 'md' | 768px | '@media (min-width: 768px) { ... }' |
|
|
42
|
+
| 'lg' | 1024px | '@media (min-width: 1024px) { ... }' |
|
|
43
|
+
| 'xl' | 1280px | '@media (min-width: 1280px) { ... }' |
|
|
44
|
+
| 'xxl' | 1536px | '@media (min-width: 1536px) { ... }' |
|
|
45
|
+
|
|
46
|
+
To add a utility but only have it take effect at a certain breakpoint, all you need to do is to specify an object in the class you want to be responsive
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
\`\`\`html
|
|
50
|
+
<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
|
|
51
|
+
<Flex
|
|
52
|
+
height={400}
|
|
53
|
+
width="100%"
|
|
54
|
+
backgroundColor={{_: 'yellow', sm: 'purple', md: 'green', lg:'cyan', xl: 'orange', xxl: 'red'}}>
|
|
55
|
+
</Flex>
|
|
56
|
+
\`\`\`
|
|
57
|
+
|
|
58
|
+
## Mobile First
|
|
59
|
+
|
|
60
|
+
By default, Ledger ui uses a mobile first breakpoint system, similar to what you might be used to in other frameworks like Bootstrap or tailwind.
|
|
61
|
+
|
|
62
|
+
What this means is that unprefixed utilities (like \`uppercase\`) take effect on all screen sizes, while prefixed utilities (like \`md:uppercase\`) only take effect at the specified breakpoint *and above*.
|
|
63
|
+
|
|
64
|
+
### Targeting mobile screens
|
|
65
|
+
|
|
66
|
+
Where this approach surprises people most often is that to style something for mobile, you need to use the unprefixed version of a utility, not the \`sm:\` prefixed version. Don't think of \`sm:\` as meaning "on small screens", think of it as "at the small *breakpoint*".
|
|
67
|
+
|
|
68
|
+
<TipBad>Don't use <code className="text-sm font-bold text-slate-800">sm:</code> to target mobile devices</TipBad>
|
|
69
|
+
|
|
70
|
+
\`\`\`html
|
|
71
|
+
<!-- This will only center text on screens 640px and wider, not on small screens -->
|
|
72
|
+
<Text textAlign={{sm: "center"}}></Text>
|
|
73
|
+
\`\`\`
|
|
74
|
+
|
|
75
|
+
<TipGood>Use unprefixed utilities to target mobile, and override them at larger breakpoints</TipGood>
|
|
76
|
+
|
|
77
|
+
\`\`\`html
|
|
78
|
+
<!-- This will center text on mobile, and left align it on screens 640px and wider -->
|
|
79
|
+
<Text textAlign={{_: "center", sm: "left"}}></Text>
|
|
80
|
+
\`\`\`
|
|
81
|
+
|
|
82
|
+
`;
|
|
83
|
+
var breakpoints_stories_default = {
|
|
84
|
+
title: "Particles",
|
|
85
|
+
parameters: {
|
|
86
|
+
docs: {
|
|
87
|
+
description: {
|
|
88
|
+
component: description
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
const Breakpoints = () => {
|
|
94
|
+
return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
|
|
95
|
+
flexDirection: "column",
|
|
96
|
+
rowGap: "24px"
|
|
97
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
|
|
98
|
+
flexDirection: "column",
|
|
99
|
+
rowGap: "4px",
|
|
100
|
+
justifyContent: "center",
|
|
101
|
+
alignItems: "center",
|
|
102
|
+
height: 400,
|
|
103
|
+
width: "100%",
|
|
104
|
+
backgroundColor: {
|
|
105
|
+
_: "yellow",
|
|
106
|
+
sm: "purple",
|
|
107
|
+
md: "green",
|
|
108
|
+
lg: "cyan",
|
|
109
|
+
xl: "orange",
|
|
110
|
+
xxl: "red"
|
|
111
|
+
}
|
|
112
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
|
|
113
|
+
display: { _: "none", sm: "block", md: "none" }
|
|
114
|
+
}, "SM breakpoint"), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
|
|
115
|
+
display: { _: "none", md: "block", lg: "none" }
|
|
116
|
+
}, "MD breakpoint"), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
|
|
117
|
+
display: { _: "none", lg: "block", xl: "none" }
|
|
118
|
+
}, "LG breakpoint"), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
|
|
119
|
+
display: { _: "none", xl: "block", xxl: "none" }
|
|
120
|
+
}, "XL breakpoint"), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
|
|
121
|
+
display: { _: "none", xxl: "block" }
|
|
122
|
+
}, "XXL breakpoint")));
|
|
123
|
+
};
|
|
124
|
+
//# sourceMappingURL=breakpoints.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/styles/breakpoints.stories.tsx"],
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\n\nimport Flex from \"../components/layout/Flex\";\nimport Text from \"../components/asorted/Text\";\n\nconst description = `\n## <Heading hidden>Overview</Heading>\n\nEvery utility class can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.\n\nThere are five breakpoints by default, inspired by common device resolutions:\n\n| Breakpoint prefix | Minimum width | CSS |\n| --- | --- | --- |\n| 'sm' | 640px | '@media (min-width: 640px) { ... }' |\n| 'md' | 768px | '@media (min-width: 768px) { ... }' |\n| 'lg' | 1024px | '@media (min-width: 1024px) { ... }' |\n| 'xl' | 1280px | '@media (min-width: 1280px) { ... }' |\n| 'xxl' | 1536px | '@media (min-width: 1536px) { ... }' |\n\nTo add a utility but only have it take effect at a certain breakpoint, all you need to do is to specify an object in the class you want to be responsive\n\n\n\\`\\`\\`html\n<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->\n<Flex \n height={400} \n width=\"100%\" \n backgroundColor={{_: 'yellow', sm: 'purple', md: 'green', lg:'cyan', xl: 'orange', xxl: 'red'}}>\n</Flex>\n\\`\\`\\`\n\n## Mobile First\n\nBy default, Ledger ui uses a mobile first breakpoint system, similar to what you might be used to in other frameworks like Bootstrap or tailwind.\n\nWhat this means is that unprefixed utilities (like \\`uppercase\\`) take effect on all screen sizes, while prefixed utilities (like \\`md:uppercase\\`) only take effect at the specified breakpoint *and above*.\n\n### Targeting mobile screens\n\nWhere this approach surprises people most often is that to style something for mobile, you need to use the unprefixed version of a utility, not the \\`sm:\\` prefixed version. Don't think of \\`sm:\\` as meaning \"on small screens\", think of it as \"at the small *breakpoint*\".\n\n<TipBad>Don't use <code className=\"text-sm font-bold text-slate-800\">sm:</code> to target mobile devices</TipBad>\n\n\\`\\`\\`html\n<!-- This will only center text on screens 640px and wider, not on small screens -->\n<Text textAlign={{sm: \"center\"}}></Text>\n\\`\\`\\`\n\n<TipGood>Use unprefixed utilities to target mobile, and override them at larger breakpoints</TipGood>\n\n\\`\\`\\`html\n<!-- This will center text on mobile, and left align it on screens 640px and wider -->\n<Text textAlign={{_: \"center\", sm: \"left\"}}></Text>\n\\`\\`\\`\n\n`;\nexport default {\n title: \"Particles\",\n parameters: {\n docs: {\n description: {\n component: description,\n },\n },\n },\n};\n\nexport const Breakpoints = (): JSX.Element => {\n return (\n <Flex flexDirection=\"column\" rowGap=\"24px\">\n <Flex\n flexDirection=\"column\"\n rowGap=\"4px\"\n justifyContent=\"center\"\n alignItems=\"center\"\n height={400}\n width=\"100%\"\n backgroundColor={{\n _: \"yellow\",\n sm: \"purple\",\n md: \"green\",\n lg: \"cyan\",\n xl: \"orange\",\n xxl: \"red\",\n }}\n >\n <Text display={{ _: \"none\", sm: \"block\", md: \"none\" }}>SM breakpoint</Text>\n <Text display={{ _: \"none\", md: \"block\", lg: \"none\" }}>MD breakpoint</Text>\n <Text display={{ _: \"none\", lg: \"block\", xl: \"none\" }}>LG breakpoint</Text>\n <Text display={{ _: \"none\", xl: \"block\", xxl: \"none\" }}>XL breakpoint</Text>\n <Text display={{ _: \"none\", xxl: \"block\" }}>XXL breakpoint</Text>\n </Flex>\n </Flex>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,kBAAiB;AACjB,kBAAiB;AAEjB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoDpB,IAAO,8BAAQ;AAAA,EACb,OAAO;AAAA,EACP,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA;AAAA;AAAA;AAAA;AAMZ,MAAM,cAAc,MAAmB;AAC5C,SACE,mDAAC,qBAAD;AAAA,IAAM,eAAc;AAAA,IAAS,QAAO;AAAA,KAClC,mDAAC,qBAAD;AAAA,IACE,eAAc;AAAA,IACd,QAAO;AAAA,IACP,gBAAe;AAAA,IACf,YAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAM;AAAA,IACN,iBAAiB;AAAA,MACf,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA;AAAA,KAGP,mDAAC,qBAAD;AAAA,IAAM,SAAS,EAAE,GAAG,QAAQ,IAAI,SAAS,IAAI;AAAA,KAAU,kBACvD,mDAAC,qBAAD;AAAA,IAAM,SAAS,EAAE,GAAG,QAAQ,IAAI,SAAS,IAAI;AAAA,KAAU,kBACvD,mDAAC,qBAAD;AAAA,IAAM,SAAS,EAAE,GAAG,QAAQ,IAAI,SAAS,IAAI;AAAA,KAAU,kBACvD,mDAAC,qBAAD;AAAA,IAAM,SAAS,EAAE,GAAG,QAAQ,IAAI,SAAS,KAAK;AAAA,KAAU,kBACxD,mDAAC,qBAAD;AAAA,IAAM,SAAS,EAAE,GAAG,QAAQ,KAAK;AAAA,KAAW;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/lib/cjs/styles/theme.js
CHANGED
|
@@ -22,6 +22,7 @@ var __toModule = (module2) => {
|
|
|
22
22
|
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
23
23
|
};
|
|
24
24
|
__export(exports, {
|
|
25
|
+
breakpoints: () => breakpoints,
|
|
25
26
|
default: () => theme_default,
|
|
26
27
|
fontFamilies: () => fontFamilies,
|
|
27
28
|
fontSizes: () => fontSizes,
|
|
@@ -32,6 +33,13 @@ __export(exports, {
|
|
|
32
33
|
});
|
|
33
34
|
var import_styled_components = __toModule(require("styled-components"));
|
|
34
35
|
var import_ui_shared = __toModule(require("@ledgerhq/ui-shared"));
|
|
36
|
+
const breakpoints = {
|
|
37
|
+
sm: "640px",
|
|
38
|
+
md: "768px",
|
|
39
|
+
lg: "1024px",
|
|
40
|
+
xl: "1280px",
|
|
41
|
+
xxl: "1536px"
|
|
42
|
+
};
|
|
35
43
|
const space = [
|
|
36
44
|
0,
|
|
37
45
|
2,
|
|
@@ -257,7 +265,8 @@ const theme = {
|
|
|
257
265
|
animations,
|
|
258
266
|
overflow,
|
|
259
267
|
transition,
|
|
260
|
-
zIndexes
|
|
268
|
+
zIndexes,
|
|
269
|
+
breakpoints
|
|
261
270
|
};
|
|
262
271
|
var theme_default = theme;
|
|
263
272
|
//# sourceMappingURL=theme.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/styles/theme.ts"],
|
|
4
|
-
"sourcesContent": ["import { keyframes, css, DefaultTheme } from \"styled-components\";\nimport { palettes, ColorPalette } from \"@ledgerhq/ui-shared\";\n\n/* space indexes:\n 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21\n */\nexport const space = [\n 0, 2, 4, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 68, 72, 76,\n];\n\nexport type TextVariants =\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"large\"\n | \"largeLineHeight\"\n | \"body\"\n | \"bodyLineHeight\"\n | \"paragraph\"\n | \"paragraphLineHeight\"\n | \"small\"\n | \"extraSmall\"\n | \"tiny\"\n | \"micro\"\n | \"subtitle\";\n\nexport type ThemeScale<Type, Aliases extends string> = Array<Type> & Record<Aliases, Type>;\n\nexport const fontSizes = [8, 10, 11, 12, 13, 14, 16, 20, 24, 28, 32, 36] as ThemeScale<\n number,\n TextVariants\n>;\n\n[\n fontSizes.micro,\n fontSizes.tiny,\n fontSizes.extraSmall,\n fontSizes.small,\n fontSizes.paragraph,\n fontSizes.body,\n fontSizes.large,\n fontSizes.h5,\n fontSizes.h4,\n fontSizes.h3,\n fontSizes.h2,\n fontSizes.h1,\n] = fontSizes;\nfontSizes.largeLineHeight = fontSizes.large;\nfontSizes.bodyLineHeight = fontSizes.body;\nfontSizes.paragraphLineHeight = fontSizes.paragraph;\nfontSizes.subtitle = fontSizes.extraSmall;\n\nconst fontWeights = {\n extraLight: \"100\",\n light: \"300\",\n regular: \"400\",\n medium: \"500\",\n semiBold: \"600\",\n bold: \"700\",\n extraBold: \"800\",\n};\n\nexport const radii = [0, 4, 8, 12, 16, 20];\nexport const shadows = [\"0 4px 8px 0 rgba(0, 0, 0, 0.03)\"];\nexport const zIndexes = [-1, 0, 1, 9, 10, 90, 100, 900, 1000];\n\n// Those fonts are now defined in global.css, this is just a mapping for styled-system\nexport const fontFamilies = {\n Inter: {\n ExtraLight: {\n weight: 100,\n style: \"normal\",\n },\n Light: {\n weight: 300,\n style: \"normal\",\n },\n Regular: {\n weight: 400,\n style: \"normal\",\n },\n Medium: {\n weight: 500,\n style: \"normal\",\n },\n SemiBold: {\n weight: 600,\n style: \"normal\",\n },\n Bold: {\n weight: 700,\n style: \"normal\",\n },\n ExtraBold: {\n weight: 800,\n style: \"normal\",\n },\n },\n Alpha: {\n Medium: {\n weight: 500,\n style: \"normal\",\n },\n },\n};\n\nconst animationDuration = \"0.33s\";\nconst easings = {\n outQuadratic: \"cubic-bezier(0.25, 0.46, 0.45, 0.94)\",\n};\n\nconst transition = (\n properties = [\"all\"],\n duration = animationDuration,\n easing = easings.outQuadratic,\n) => css`\n transition-property: ${properties.join(\",\")};\n transition-duration: ${duration};\n transition-timing-function: ${easing};\n`;\n\nconst fadeIn = keyframes`\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n `;\nconst fadeOut = keyframes`\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n `;\nconst fadeInGrowX = keyframes`\n 0% {\n opacity: 0;\n transform: scaleX(0);\n }\n 100% {\n opacity: 1;\n transform: scaleX(1);\n }\n`;\nconst fadeInUp = keyframes`\n 0% {\n opacity: 0;\n transform: translateY(66%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0%);\n }\n `;\nconst animations = {\n fadeIn: () =>\n css`\n ${fadeIn} ${animationDuration} ${easings.outQuadratic} forwards\n `,\n fadeOut: () =>\n css`\n ${fadeOut} ${animationDuration} ${easings.outQuadratic} forwards\n `,\n fadeInGrowX: () =>\n css`\n ${fadeInGrowX} 0.6s ${easings.outQuadratic} forwards\n `,\n fadeInUp: () =>\n css`\n ${fadeInUp} ${animationDuration} ${easings.outQuadratic} forwards\n `,\n};\nconst overflow = {\n x: css`\n overflow-y: hidden;\n overflow-x: scroll;\n will-change: transform;\n &:hover {\n --track-color: ${(p) => p.theme.colors.neutral.c30};\n }\n `,\n y: css`\n overflow-x: hidden;\n overflow-y: scroll;\n will-change: transform;\n &:hover {\n --track-color: ${(p) => p.theme.colors.neutral.c30};\n }\n `,\n yAuto: css`\n overflow-x: hidden;\n overflow-y: auto;\n will-change: transform;\n &:hover {\n --track-color: ${(p) => p.theme.colors.neutral.c30};\n }\n `,\n xy: css`\n overflow: scroll;\n will-change: transform;\n &:hover {\n --track-color: ${(p) => p.theme.colors.neutral.c30};\n }\n `,\n trackSize: 12,\n};\n\ndeclare module \"styled-components\" {\n export interface Font {\n weight: number;\n style: string;\n }\n export interface DefaultTheme {\n theme: string;\n animations: typeof animations;\n transition: typeof transition;\n overflow: typeof overflow;\n sizes: {\n topBarHeight: number;\n sideBarWidth: number;\n drawer: {\n side: {\n big: {\n width: number;\n };\n small: {\n width: number;\n };\n };\n popin: {\n min: {\n height: number;\n width: number;\n };\n max: {\n height: number;\n width: number;\n };\n };\n };\n };\n radii: number[];\n fontFamilies: Record<string, Record<string, Font>>;\n fontSizes: number[];\n space: number[];\n shadows: string[];\n colors: ColorPalette & {\n /**\n * @deprecated Do not use the .palette prefix anymore!\n */\n palette: ColorPalette;\n };\n fontWeights: Record<string, string>;\n zIndexes: number[];\n }\n}\n\nconst theme: DefaultTheme = {\n theme: \"light\",\n sizes: {\n drawer: {\n side: {\n big: {\n width: 580,\n },\n small: {\n width: 420,\n },\n },\n popin: {\n min: {\n height: 158,\n width: 462,\n },\n max: {\n height: 522,\n width: 622,\n },\n },\n },\n topBarHeight: 58,\n sideBarWidth: 230,\n },\n radii,\n fontFamilies,\n fontSizes,\n fontWeights,\n space,\n shadows,\n colors: {\n palette: palettes.light,\n ...palettes.light,\n },\n animations,\n overflow,\n transition,\n zIndexes,\n};\n\nexport default theme;\nexport type Theme = DefaultTheme;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAA6C;AAC7C,uBAAuC;
|
|
4
|
+
"sourcesContent": ["import { keyframes, css, DefaultTheme } from \"styled-components\";\nimport { palettes, ColorPalette } from \"@ledgerhq/ui-shared\";\n\nexport type screensBreakpoints = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\";\n\nexport const breakpoints = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n xxl: \"1536px\",\n} as Record<screensBreakpoints, string>;\n\n/* space indexes:\n 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21\n */\nexport const space = [\n 0, 2, 4, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 68, 72, 76,\n];\n\nexport type TextVariants =\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"large\"\n | \"largeLineHeight\"\n | \"body\"\n | \"bodyLineHeight\"\n | \"paragraph\"\n | \"paragraphLineHeight\"\n | \"small\"\n | \"extraSmall\"\n | \"tiny\"\n | \"micro\"\n | \"subtitle\";\n\nexport type ThemeScale<Type, Aliases extends string> = Array<Type> & Record<Aliases, Type>;\n\nexport const fontSizes = [8, 10, 11, 12, 13, 14, 16, 20, 24, 28, 32, 36] as ThemeScale<\n number,\n TextVariants\n>;\n\n[\n fontSizes.micro,\n fontSizes.tiny,\n fontSizes.extraSmall,\n fontSizes.small,\n fontSizes.paragraph,\n fontSizes.body,\n fontSizes.large,\n fontSizes.h5,\n fontSizes.h4,\n fontSizes.h3,\n fontSizes.h2,\n fontSizes.h1,\n] = fontSizes;\nfontSizes.largeLineHeight = fontSizes.large;\nfontSizes.bodyLineHeight = fontSizes.body;\nfontSizes.paragraphLineHeight = fontSizes.paragraph;\nfontSizes.subtitle = fontSizes.extraSmall;\n\nconst fontWeights = {\n extraLight: \"100\",\n light: \"300\",\n regular: \"400\",\n medium: \"500\",\n semiBold: \"600\",\n bold: \"700\",\n extraBold: \"800\",\n};\n\nexport const radii = [0, 4, 8, 12, 16, 20];\nexport const shadows = [\"0 4px 8px 0 rgba(0, 0, 0, 0.03)\"];\nexport const zIndexes = [-1, 0, 1, 9, 10, 90, 100, 900, 1000];\n\n// Those fonts are now defined in global.css, this is just a mapping for styled-system\nexport const fontFamilies = {\n Inter: {\n ExtraLight: {\n weight: 100,\n style: \"normal\",\n },\n Light: {\n weight: 300,\n style: \"normal\",\n },\n Regular: {\n weight: 400,\n style: \"normal\",\n },\n Medium: {\n weight: 500,\n style: \"normal\",\n },\n SemiBold: {\n weight: 600,\n style: \"normal\",\n },\n Bold: {\n weight: 700,\n style: \"normal\",\n },\n ExtraBold: {\n weight: 800,\n style: \"normal\",\n },\n },\n Alpha: {\n Medium: {\n weight: 500,\n style: \"normal\",\n },\n },\n};\n\nconst animationDuration = \"0.33s\";\nconst easings = {\n outQuadratic: \"cubic-bezier(0.25, 0.46, 0.45, 0.94)\",\n};\n\nconst transition = (\n properties = [\"all\"],\n duration = animationDuration,\n easing = easings.outQuadratic,\n) => css`\n transition-property: ${properties.join(\",\")};\n transition-duration: ${duration};\n transition-timing-function: ${easing};\n`;\n\nconst fadeIn = keyframes`\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n `;\nconst fadeOut = keyframes`\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n `;\nconst fadeInGrowX = keyframes`\n 0% {\n opacity: 0;\n transform: scaleX(0);\n }\n 100% {\n opacity: 1;\n transform: scaleX(1);\n }\n`;\nconst fadeInUp = keyframes`\n 0% {\n opacity: 0;\n transform: translateY(66%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0%);\n }\n `;\nconst animations = {\n fadeIn: () =>\n css`\n ${fadeIn} ${animationDuration} ${easings.outQuadratic} forwards\n `,\n fadeOut: () =>\n css`\n ${fadeOut} ${animationDuration} ${easings.outQuadratic} forwards\n `,\n fadeInGrowX: () =>\n css`\n ${fadeInGrowX} 0.6s ${easings.outQuadratic} forwards\n `,\n fadeInUp: () =>\n css`\n ${fadeInUp} ${animationDuration} ${easings.outQuadratic} forwards\n `,\n};\nconst overflow = {\n x: css`\n overflow-y: hidden;\n overflow-x: scroll;\n will-change: transform;\n &:hover {\n --track-color: ${(p) => p.theme.colors.neutral.c30};\n }\n `,\n y: css`\n overflow-x: hidden;\n overflow-y: scroll;\n will-change: transform;\n &:hover {\n --track-color: ${(p) => p.theme.colors.neutral.c30};\n }\n `,\n yAuto: css`\n overflow-x: hidden;\n overflow-y: auto;\n will-change: transform;\n &:hover {\n --track-color: ${(p) => p.theme.colors.neutral.c30};\n }\n `,\n xy: css`\n overflow: scroll;\n will-change: transform;\n &:hover {\n --track-color: ${(p) => p.theme.colors.neutral.c30};\n }\n `,\n trackSize: 12,\n};\n\ndeclare module \"styled-components\" {\n export interface Font {\n weight: number;\n style: string;\n }\n export interface DefaultTheme {\n theme: string;\n animations: typeof animations;\n transition: typeof transition;\n overflow: typeof overflow;\n sizes: {\n topBarHeight: number;\n sideBarWidth: number;\n drawer: {\n side: {\n big: {\n width: number;\n };\n small: {\n width: number;\n };\n };\n popin: {\n min: {\n height: number;\n width: number;\n };\n max: {\n height: number;\n width: number;\n };\n };\n };\n };\n radii: number[];\n fontFamilies: Record<string, Record<string, Font>>;\n fontSizes: number[];\n space: number[];\n shadows: string[];\n colors: ColorPalette & {\n /**\n * @deprecated Do not use the .palette prefix anymore!\n */\n palette: ColorPalette;\n };\n fontWeights: Record<string, string>;\n breakpoints: Record<screensBreakpoints, string>;\n zIndexes: number[];\n }\n}\n\nconst theme: DefaultTheme = {\n theme: \"light\",\n sizes: {\n drawer: {\n side: {\n big: {\n width: 580,\n },\n small: {\n width: 420,\n },\n },\n popin: {\n min: {\n height: 158,\n width: 462,\n },\n max: {\n height: 522,\n width: 622,\n },\n },\n },\n topBarHeight: 58,\n sideBarWidth: 230,\n },\n radii,\n fontFamilies,\n fontSizes,\n fontWeights,\n space,\n shadows,\n colors: {\n palette: palettes.light,\n ...palettes.light,\n },\n animations,\n overflow,\n transition,\n zIndexes,\n breakpoints,\n};\n\nexport default theme;\nexport type Theme = DefaultTheme;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -14,7 +14,7 @@ const Input = styled.input `
|
|
|
14
14
|
border-radius: ${(p) => `${p.theme.radii[1]}px`};
|
|
15
15
|
position: relative;
|
|
16
16
|
|
|
17
|
-
width: ${(p) => p.theme.space[7]}px;
|
|
17
|
+
min-width: ${(p) => p.theme.space[7]}px;
|
|
18
18
|
height: ${(p) => p.theme.space[7]}px;
|
|
19
19
|
appearance: none;
|
|
20
20
|
border: 1px solid ${(props) => props.theme.colors.neutral.c90};
|
|
@@ -31,7 +31,7 @@ const StyledIconContainer = styled.div `
|
|
|
31
31
|
}}
|
|
32
32
|
|
|
33
33
|
border-radius: ${(p) => `${p.theme.radii[1]}px`};
|
|
34
|
-
margin-right ${(p) => `${p.theme.space[6]}px`};
|
|
34
|
+
margin-right: ${(p) => `${p.theme.space[6]}px`};
|
|
35
35
|
padding: 6px;
|
|
36
36
|
display: flex;
|
|
37
37
|
align-items: center;
|
package/lib/styles/theme.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { DefaultTheme } from "styled-components";
|
|
2
2
|
import { ColorPalette } from "@ledgerhq/ui-shared";
|
|
3
|
+
export declare type screensBreakpoints = "sm" | "md" | "lg" | "xl" | "xxl";
|
|
4
|
+
export declare const breakpoints: Record<screensBreakpoints, string>;
|
|
3
5
|
export declare const space: number[];
|
|
4
6
|
export declare type TextVariants = "h1" | "h2" | "h3" | "h4" | "h5" | "large" | "largeLineHeight" | "body" | "bodyLineHeight" | "paragraph" | "paragraphLineHeight" | "small" | "extraSmall" | "tiny" | "micro" | "subtitle";
|
|
5
7
|
export declare type ThemeScale<Type, Aliases extends string> = Array<Type> & Record<Aliases, Type>;
|
|
@@ -105,6 +107,7 @@ declare module "styled-components" {
|
|
|
105
107
|
palette: ColorPalette;
|
|
106
108
|
};
|
|
107
109
|
fontWeights: Record<string, string>;
|
|
110
|
+
breakpoints: Record<screensBreakpoints, string>;
|
|
108
111
|
zIndexes: number[];
|
|
109
112
|
}
|
|
110
113
|
}
|
package/lib/styles/theme.js
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
import { keyframes, css } from "styled-components";
|
|
2
2
|
import { palettes } from "@ledgerhq/ui-shared";
|
|
3
|
+
export const breakpoints = {
|
|
4
|
+
sm: "640px",
|
|
5
|
+
md: "768px",
|
|
6
|
+
lg: "1024px",
|
|
7
|
+
xl: "1280px",
|
|
8
|
+
xxl: "1536px",
|
|
9
|
+
};
|
|
3
10
|
/* space indexes:
|
|
4
11
|
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21
|
|
5
12
|
*/
|
|
@@ -206,5 +213,6 @@ const theme = {
|
|
|
206
213
|
overflow,
|
|
207
214
|
transition,
|
|
208
215
|
zIndexes,
|
|
216
|
+
breakpoints,
|
|
209
217
|
};
|
|
210
218
|
export default theme;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/react-ui",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.9-nightly.0",
|
|
4
4
|
"description": "Ledger Live - Desktop UI",
|
|
5
5
|
"author": "Ledger Live Team <team-live@ledger.fr>",
|
|
6
6
|
"repository": "https://github.com/LedgerHQ/ui",
|
|
@@ -34,8 +34,8 @@
|
|
|
34
34
|
],
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@floating-ui/react-dom": "^0.4.0",
|
|
37
|
-
"@ledgerhq/icons-ui": "^0.2.
|
|
38
|
-
"@ledgerhq/ui-shared": "^0.1.
|
|
37
|
+
"@ledgerhq/icons-ui": "^0.2.6-nightly.0",
|
|
38
|
+
"@ledgerhq/ui-shared": "^0.1.9",
|
|
39
39
|
"@tippyjs/react": "^4.2.6",
|
|
40
40
|
"@types/color": "^3.0.2",
|
|
41
41
|
"@types/react": "~17.0.37",
|