@amboss/design-system 1.18.0 → 1.19.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/build/cjs/build-tokens/visualConfig.js +125 -29
- package/build/cjs/src/components/Callout/Callout.js +8 -24
- package/build/cjs/src/components/Link/Link.js +42 -33
- package/build/cjs/src/components/Typography/Text/Text.js +56 -17
- package/build/cjs/src/index.js +1 -0
- package/build/cjs/src/shared/mediaQueries.js +2 -0
- package/build/esm/build-tokens/_colors.json +39 -4
- package/build/esm/build-tokens/_sizes.json +2 -2
- package/build/esm/build-tokens/visualConfig.d.ts +48 -0
- package/build/esm/build-tokens/visualConfig.js +125 -29
- package/build/esm/build-tokens/visualConfig.js.map +1 -1
- package/build/esm/src/components/Callout/Callout.js +8 -24
- package/build/esm/src/components/Callout/Callout.js.map +1 -1
- package/build/esm/src/components/Link/Link.d.ts +15 -5
- package/build/esm/src/components/Link/Link.js +43 -34
- package/build/esm/src/components/Link/Link.js.map +1 -1
- package/build/esm/src/components/Typography/Text/Text.d.ts +5 -6
- package/build/esm/src/components/Typography/Text/Text.js +55 -18
- package/build/esm/src/components/Typography/Text/Text.js.map +1 -1
- package/build/esm/src/index.js +1 -1
- package/build/esm/src/shared/mediaQueries.js +2 -0
- package/build/esm/src/shared/mediaQueries.js.map +1 -1
- package/build/esm/src/types/index.d.ts +6 -4
- package/build/scss/_theming.scss +10 -2
- package/build/scss/_variables.scss +4 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Callout.js","sources":["../../../../../src/components/Callout/Callout.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { IconName, Icon } from \"../Icon/Icon\";\nimport { Inline } from \"../Inline/Inline\";\nimport { Stack } from \"../Stack/Stack\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { CalloutVariations } from \"../../types\";\n\nexport type CalloutProps = {\n type?: CalloutVariations;\n icon?: IconName;\n \"data-e2e-test-id\"?: string;\n text: string | ReactElement;\n description?: string | ReactElement;\n};\n\nconst defaultProps: Partial<CalloutProps> = {\n icon: \"info\",\n type: \"info\",\n \"data-e2e-test-id\": undefined,\n};\n\nconst StyledContainer = styled.div<Partial<CalloutProps>>(\n ({ theme, type }) => ({\n display: \"flex\",\n borderRadius: theme.variables.size.borderRadius.button.m,\n padding: theme.variables.size.spacing.m,\n
|
|
1
|
+
{"version":3,"file":"Callout.js","sources":["../../../../../src/components/Callout/Callout.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { IconName, Icon } from \"../Icon/Icon\";\nimport { Inline } from \"../Inline/Inline\";\nimport { Stack } from \"../Stack/Stack\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { CalloutVariations } from \"../../types\";\n\nexport type CalloutProps = {\n type?: CalloutVariations;\n icon?: IconName;\n \"data-e2e-test-id\"?: string;\n text: string | ReactElement;\n description?: string | ReactElement;\n};\n\nconst defaultProps: Partial<CalloutProps> = {\n icon: \"info\",\n type: \"info\",\n \"data-e2e-test-id\": undefined,\n};\n\nconst StyledContainer = styled.div<Partial<CalloutProps>>(\n ({ theme, type }) => ({\n display: \"flex\",\n borderRadius: theme.variables.size.borderRadius.button.m,\n padding: theme.variables.size.spacing.m,\n backgroundColor: theme.values.color.background[`${type}Subtle`].default,\n })\n);\n\nconst StyledIconContainer = styled.div({\n paddingTop: \"1px\",\n});\n\nexport function Callout({\n text,\n description,\n type,\n icon,\n \"data-e2e-test-id\": dataE2eTestId,\n}: CalloutProps): React.ReactElement {\n const titleFontWeight = description ? \"bold\" : \"normal\";\n\n return (\n <StyledContainer\n data-e2e-test-id={dataE2eTestId}\n data-ds-id=\"Callout\"\n type={type}\n >\n <Inline vAlignItems=\"top\" space=\"xs\" noWrap>\n <StyledIconContainer>\n <Icon name={icon} color={type} size=\"s\" />\n </StyledIconContainer>\n <Stack space=\"xxs\">\n <Text weight={titleFontWeight} size=\"s\" color={type}>\n {text}\n </Text>\n {description && (\n <Text size=\"s\" color={type}>\n {description}\n </Text>\n )}\n </Stack>\n </Inline>\n </StyledContainer>\n );\n}\n\nCallout.defaultProps = defaultProps;\n"],"names":["defaultProps","icon","type","undefined","StyledContainer","_styled","process","env","NODE_ENV","target","label","_ref","theme","display","borderRadius","variables","size","button","m","padding","spacing","backgroundColor","values","color","background","default","StyledIconContainer","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","Callout","_ref2","text","description","dataE2eTestId","titleFontWeight","React","createElement","Inline","vAlignItems","space","noWrap","Icon","Stack","Text","weight"],"mappings":";;;;;;;;AAgBA,MAAMA,YAAmC,GAAG;AAC1CC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,IAAI,EAAE,MAAM;AACZ,EAAA,kBAAkB,EAAEC,SAAAA;AACtB,CAAC,CAAA;AAED,MAAMC,eAAe,gBAAGC,OAAA,CAAA,KAAA,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAC,MAAA,EAAA,UAAA;AAAA,CAAA,GAAA;EAAAA,MAAA,EAAA,UAAA;EAAAC,KAAA,EAAA,iBAAA;AAAA,CAAA,CAAA,CACtBC,IAAA,IAAA;EAAA,IAAC;IAAEC,KAAK;AAAEV,IAAAA,IAAAA;AAAK,GAAC,GAAAS,IAAA,CAAA;EAAA,OAAM;AACpBE,IAAAA,OAAO,EAAE,MAAM;IACfC,YAAY,EAAEF,KAAK,CAACG,SAAS,CAACC,IAAI,CAACF,YAAY,CAACG,MAAM,CAACC,CAAC;IACxDC,OAAO,EAAEP,KAAK,CAACG,SAAS,CAACC,IAAI,CAACI,OAAO,CAACF,CAAC;AACvCG,IAAAA,eAAe,EAAET,KAAK,CAACU,MAAM,CAACC,KAAK,CAACC,UAAU,CAAE,CAAA,EAAEtB,IAAK,CAAA,MAAA,CAAO,CAAC,CAACuB,OAAAA;GACjE,CAAA;AAAA,CAAC,EAAAnB,OAAA,CAAAC,GAAA,CAAAC,QAAA,8wFACJ,CAAC,CAAA;AAED,MAAMkB,mBAAmB,gBAAGrB,OAAA,CAAA,KAAA,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAC,MAAA,EAAA,UAAA;AAAA,CAAA,GAAA;EAAAA,MAAA,EAAA,UAAA;EAAAC,KAAA,EAAA,qBAAA;AAAA,CAAA,CAAA,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAmB,IAAA,EAAA,SAAA;EAAAC,MAAA,EAAA,iBAAA;AAAA,CAAA,GAAA;EAAAD,IAAA,EAAA,SAAA;EAAAC,MAAA,EAAA,iBAAA;EAAAC,GAAA,EAAA,qvFAAA;AAAAC,EAAAA,QAAA,EAAAC,gCAAAA;AAAA,CAE3B,CAAC,CAAA;AAEK,SAASC,OAAOA,CAAAC,KAAA,EAMc;EAAA,IANb;IACtBC,IAAI;IACJC,WAAW;IACXjC,IAAI;IACJD,IAAI;AACJ,IAAA,kBAAkB,EAAEmC,aAAAA;AACR,GAAC,GAAAH,KAAA,CAAA;AACb,EAAA,MAAMI,eAAe,GAAGF,WAAW,GAAG,MAAM,GAAG,QAAQ,CAAA;AAEvD,EAAA,oBACEG,KAAA,CAAAC,aAAA,CAACnC,eAAe,EAAA;AACd,IAAA,kBAAA,EAAkBgC,aAAc;AAChC,IAAA,YAAA,EAAW,SAAS;AACpBlC,IAAAA,IAAI,EAAEA,IAAAA;AAAK,GAAA,eAEXoC,KAAA,CAAAC,aAAA,CAACC,MAAM,EAAA;AAACC,IAAAA,WAAW,EAAC,KAAK;AAACC,IAAAA,KAAK,EAAC,IAAI;IAACC,MAAM,EAAA,IAAA;GACzCL,eAAAA,KAAA,CAAAC,aAAA,CAACb,mBAAmB,qBAClBY,KAAA,CAAAC,aAAA,CAACK,IAAI,EAAA;AAACjB,IAAAA,IAAI,EAAE1B,IAAK;AAACsB,IAAAA,KAAK,EAAErB,IAAK;AAACc,IAAAA,IAAI,EAAC,GAAA;AAAG,GAAE,CACtB,CAAC,eACtBsB,KAAA,CAAAC,aAAA,CAACM,KAAK,EAAA;AAACH,IAAAA,KAAK,EAAC,KAAA;AAAK,GAAA,eAChBJ,KAAA,CAAAC,aAAA,CAACO,IAAI,EAAA;AAACC,IAAAA,MAAM,EAAEV,eAAgB;AAACrB,IAAAA,IAAI,EAAC,GAAG;AAACO,IAAAA,KAAK,EAAErB,IAAAA;GAC5CgC,EAAAA,IACG,CAAC,EACNC,WAAW,iBACVG,KAAA,CAAAC,aAAA,CAACO,IAAI,EAAA;AAAC9B,IAAAA,IAAI,EAAC,GAAG;AAACO,IAAAA,KAAK,EAAErB,IAAAA;AAAK,GAAA,EACxBiC,WACG,CAEH,CACD,CACO,CAAC,CAAA;AAEtB,CAAA;AAEAH,OAAO,CAAChC,YAAY,GAAGA,YAAY;;;;"}
|
|
@@ -1,14 +1,24 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { TextColors, TextSize, TextWeight, PolymorphicComponentPropsWithRef, LinkVariations } from "../../types";
|
|
3
|
+
export type LinkConditionalProps = {
|
|
4
|
+
/** It forces to inherit color, weight, size from parent */
|
|
5
|
+
inline?: true;
|
|
6
|
+
/** A color is inherited from its parent Text otherwise set as 'primary' */
|
|
7
|
+
color: TextColors;
|
|
8
|
+
} | {
|
|
9
|
+
inline?: false;
|
|
10
|
+
color?: TextColors;
|
|
11
|
+
};
|
|
3
12
|
export type LinkProps = {
|
|
4
|
-
size
|
|
5
|
-
|
|
13
|
+
/** A size is inherited from its parent */
|
|
14
|
+
size?: TextSize;
|
|
15
|
+
/** A weight is inherited from its parent */
|
|
16
|
+
weight?: TextWeight;
|
|
6
17
|
/** @deprecated variant, please use "color" prop instead */
|
|
7
18
|
variant?: LinkVariations;
|
|
8
|
-
color?: LinkColors;
|
|
9
19
|
onClick?: () => void;
|
|
10
20
|
"data-e2e-test-id"?: string;
|
|
11
|
-
};
|
|
21
|
+
} & LinkConditionalProps;
|
|
12
22
|
type LinkComponent = <C extends React.ElementType = "a">(props: PolymorphicComponentPropsWithRef<C, LinkProps>) => React.ReactElement | null;
|
|
13
23
|
export declare const Link: LinkComponent;
|
|
14
24
|
export {};
|
|
@@ -1,18 +1,8 @@
|
|
|
1
1
|
import _extends from '@babel/runtime/helpers/extends';
|
|
2
2
|
import _styled from '@emotion/styled/base';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import {
|
|
3
|
+
import React, { useContext } from 'react';
|
|
4
|
+
import { TextContext } from '../Typography/Text/Text.js';
|
|
5
5
|
|
|
6
|
-
const handleVariant = (theme, variant, state) => {
|
|
7
|
-
switch (variant) {
|
|
8
|
-
case "primary":
|
|
9
|
-
return theme.values.color.text.accent[state];
|
|
10
|
-
case "secondary":
|
|
11
|
-
return theme.values.color.text.primary[state];
|
|
12
|
-
default:
|
|
13
|
-
return theme.values.color.text[variant][state];
|
|
14
|
-
}
|
|
15
|
-
};
|
|
16
6
|
const StyledLink = /*#__PURE__*/_styled("a", process.env.NODE_ENV === "production" ? {
|
|
17
7
|
target: "eadqxyf0"
|
|
18
8
|
} : {
|
|
@@ -22,48 +12,67 @@ const StyledLink = /*#__PURE__*/_styled("a", process.env.NODE_ENV === "productio
|
|
|
22
12
|
let {
|
|
23
13
|
theme,
|
|
24
14
|
weight,
|
|
25
|
-
variant,
|
|
26
15
|
size,
|
|
27
|
-
color
|
|
16
|
+
color,
|
|
17
|
+
inline
|
|
28
18
|
} = _ref;
|
|
29
19
|
return {
|
|
30
|
-
textDecoration: "underline",
|
|
31
20
|
cursor: "pointer",
|
|
32
21
|
background: "none",
|
|
33
22
|
border: "none",
|
|
34
23
|
padding: 0,
|
|
35
|
-
|
|
36
|
-
"&:hover": {
|
|
37
|
-
color: variant ? handleVariant(theme, variant, "hover") : theme.values.color.text[color].hover
|
|
38
|
-
},
|
|
39
|
-
fontSize: theme.variables.size.font.link[size],
|
|
24
|
+
fontSize: theme.variables.size.font[size],
|
|
40
25
|
fontWeight: theme.variables.weight[weight],
|
|
41
26
|
lineHeight: theme.variables.size.lineHeight.link[size],
|
|
42
|
-
fontFamily: theme.variables.fontFamily.lato
|
|
27
|
+
fontFamily: theme.variables.fontFamily.lato,
|
|
28
|
+
textDecorationLine: inline ? "underline" : "none",
|
|
29
|
+
color: color ? theme.values.color.text[color].default : "inherit",
|
|
30
|
+
...((color === "primary" || color === "secondary" || color === "tertiary") && {
|
|
31
|
+
textDecorationColor: theme.values.color.text.underline.default
|
|
32
|
+
}),
|
|
33
|
+
"&:hover": {
|
|
34
|
+
textDecorationLine: "underline",
|
|
35
|
+
textDecorationThickness: "0.125em",
|
|
36
|
+
// it's not working in Safari for a link as button
|
|
37
|
+
...((color === "primary" || color === "secondary" || color === "tertiary") && {
|
|
38
|
+
textDecorationColor: theme.values.color.text.underline.hover,
|
|
39
|
+
color: theme.values.color.text[color].hover
|
|
40
|
+
})
|
|
41
|
+
}
|
|
43
42
|
};
|
|
44
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
43
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxpbmsudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlDbUIiLCJmaWxlIjoiTGluay50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSByZWFjdC9qc3gtcHJvcHMtbm8tc3ByZWFkaW5nICovXG5pbXBvcnQgUmVhY3QsIHsgdXNlQ29udGV4dCB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgQ1NTT2JqZWN0IH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IFRleHRDb250ZXh0IH0gZnJvbSBcIi4uL1R5cG9ncmFwaHkvVGV4dC9UZXh0XCI7XG5pbXBvcnQge1xuICBUZXh0Q29sb3JzLFxuICBUZXh0U2l6ZSxcbiAgVGV4dFdlaWdodCxcbiAgUG9seW1vcnBoaWNDb21wb25lbnRQcm9wc1dpdGhSZWYsXG4gIFBvbHltb3JwaGljUmVmLFxuICBMaW5rVmFyaWF0aW9ucyxcbn0gZnJvbSBcIi4uLy4uL3R5cGVzXCI7XG5cbmV4cG9ydCB0eXBlIExpbmtDb25kaXRpb25hbFByb3BzID1cbiAgfCB7XG4gICAgICAvKiogSXQgZm9yY2VzIHRvIGluaGVyaXQgY29sb3IsIHdlaWdodCwgc2l6ZSBmcm9tIHBhcmVudCAqL1xuICAgICAgaW5saW5lPzogdHJ1ZTtcbiAgICAgIC8qKiBBIGNvbG9yIGlzIGluaGVyaXRlZCBmcm9tIGl0cyBwYXJlbnQgVGV4dCBvdGhlcndpc2Ugc2V0IGFzICdwcmltYXJ5JyAqL1xuICAgICAgY29sb3I6IFRleHRDb2xvcnM7XG4gICAgfVxuICB8IHtcbiAgICAgIGlubGluZT86IGZhbHNlO1xuICAgICAgY29sb3I/OiBUZXh0Q29sb3JzO1xuICAgIH07XG5cbmV4cG9ydCB0eXBlIExpbmtQcm9wcyA9IHtcbiAgLyoqIEEgc2l6ZSBpcyBpbmhlcml0ZWQgZnJvbSBpdHMgcGFyZW50ICovXG4gIHNpemU/OiBUZXh0U2l6ZTtcbiAgLyoqIEEgd2VpZ2h0IGlzIGluaGVyaXRlZCBmcm9tIGl0cyBwYXJlbnQgKi9cbiAgd2VpZ2h0PzogVGV4dFdlaWdodDtcbiAgLyoqIEBkZXByZWNhdGVkIHZhcmlhbnQsIHBsZWFzZSB1c2UgXCJjb2xvclwiIHByb3AgaW5zdGVhZCAqL1xuICB2YXJpYW50PzogTGlua1ZhcmlhdGlvbnM7XG4gIG9uQ2xpY2s/OiAoKSA9PiB2b2lkO1xuICBcImRhdGEtZTJlLXRlc3QtaWRcIj86IHN0cmluZztcbn0gJiBMaW5rQ29uZGl0aW9uYWxQcm9wcztcblxudHlwZSBMaW5rQ29tcG9uZW50ID0gPEMgZXh0ZW5kcyBSZWFjdC5FbGVtZW50VHlwZSA9IFwiYVwiPihcbiAgcHJvcHM6IFBvbHltb3JwaGljQ29tcG9uZW50UHJvcHNXaXRoUmVmPEMsIExpbmtQcm9wcz5cbikgPT4gUmVhY3QuUmVhY3RFbGVtZW50IHwgbnVsbDtcblxuY29uc3QgU3R5bGVkTGluayA9IHN0eWxlZC5hPFBhcnRpYWw8TGlua1Byb3BzPj4oXG4gICh7IHRoZW1lLCB3ZWlnaHQsIHNpemUsIGNvbG9yLCBpbmxpbmUgfSkgPT5cbiAgICAoe1xuICAgICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgICAgIGJhY2tncm91bmQ6IFwibm9uZVwiLFxuICAgICAgYm9yZGVyOiBcIm5vbmVcIixcbiAgICAgIHBhZGRpbmc6IDAsXG4gICAgICBmb250U2l6ZTogdGhlbWUudmFyaWFibGVzLnNpemUuZm9udFtzaXplXSxcbiAgICAgIGZvbnRXZWlnaHQ6IHRoZW1lLnZhcmlhYmxlcy53ZWlnaHRbd2VpZ2h0XSxcbiAgICAgIGxpbmVIZWlnaHQ6IHRoZW1lLnZhcmlhYmxlcy5zaXplLmxpbmVIZWlnaHQubGlua1tzaXplXSxcbiAgICAgIGZvbnRGYW1pbHk6IHRoZW1lLnZhcmlhYmxlcy5mb250RmFtaWx5LmxhdG8sXG5cbiAgICAgIHRleHREZWNvcmF0aW9uTGluZTogaW5saW5lID8gXCJ1bmRlcmxpbmVcIiA6IFwibm9uZVwiLFxuICAgICAgY29sb3I6IGNvbG9yID8gdGhlbWUudmFsdWVzLmNvbG9yLnRleHRbY29sb3JdLmRlZmF1bHQgOiBcImluaGVyaXRcIixcblxuICAgICAgLi4uKChjb2xvciA9PT0gXCJwcmltYXJ5XCIgfHxcbiAgICAgICAgY29sb3IgPT09IFwic2Vjb25kYXJ5XCIgfHxcbiAgICAgICAgY29sb3IgPT09IFwidGVydGlhcnlcIikgJiYge1xuICAgICAgICB0ZXh0RGVjb3JhdGlvbkNvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IudGV4dC51bmRlcmxpbmUuZGVmYXVsdCxcbiAgICAgIH0pLFxuXG4gICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICB0ZXh0RGVjb3JhdGlvbkxpbmU6IFwidW5kZXJsaW5lXCIsXG4gICAgICAgIHRleHREZWNvcmF0aW9uVGhpY2tuZXNzOiBcIjAuMTI1ZW1cIiwgLy8gaXQncyBub3Qgd29ya2luZyBpbiBTYWZhcmkgZm9yIGEgbGluayBhcyBidXR0b25cbiAgICAgICAgLi4uKChjb2xvciA9PT0gXCJwcmltYXJ5XCIgfHxcbiAgICAgICAgICBjb2xvciA9PT0gXCJzZWNvbmRhcnlcIiB8fFxuICAgICAgICAgIGNvbG9yID09PSBcInRlcnRpYXJ5XCIpICYmIHtcbiAgICAgICAgICB0ZXh0RGVjb3JhdGlvbkNvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IudGV4dC51bmRlcmxpbmUuaG92ZXIsXG4gICAgICAgICAgY29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci50ZXh0W2NvbG9yXS5ob3ZlcixcbiAgICAgICAgfSksXG4gICAgICB9LFxuICAgIH0gYXMgQ1NTT2JqZWN0KVxuKTtcblxuZXhwb3J0IGNvbnN0IExpbms6IExpbmtDb21wb25lbnQgPSBSZWFjdC5mb3J3YXJkUmVmKFxuICA8QyBleHRlbmRzIFJlYWN0LkVsZW1lbnRUeXBlID0gXCJhXCI+KFxuICAgIHtcbiAgICAgIHdlaWdodCxcbiAgICAgIGNvbG9yOiBjb2xvclByb3AsXG4gICAgICBzaXplLFxuICAgICAgdmFyaWFudCxcbiAgICAgIGlubGluZSxcbiAgICAgIFwiZGF0YS1lMmUtdGVzdC1pZFwiOiBkYXRhRTJlVGVzdElkLFxuICAgICAgLi4ucmVzdFxuICAgIH06IFBvbHltb3JwaGljQ29tcG9uZW50UHJvcHNXaXRoUmVmPEMsIExpbmtQcm9wcz4sXG4gICAgcmVmPzogUG9seW1vcnBoaWNSZWY8Qz5cbiAgKSA9PiB7XG4gICAgY29uc3QgaW5oZXJpdFByb3BzRnJvbVRleHQgPSB1c2VDb250ZXh0KFRleHRDb250ZXh0KTtcblxuICAgIGNvbnN0IGdldENvbG9yID0gKCkgPT4ge1xuICAgICAgaWYgKHZhcmlhbnQpIHtcbiAgICAgICAgLy8gdGhpcyBpcyBnb2luZyB0byBiZSBkZWxldGVkIGFmdGVyIG1pZ3JhdGlvblxuICAgICAgICBpZiAodmFyaWFudCA9PT0gXCJwcmltYXJ5XCIpIHJldHVybiBcImFjY2VudFwiO1xuICAgICAgICBpZiAodmFyaWFudCA9PT0gXCJzZWNvbmRhcnlcIikgcmV0dXJuIFwicHJpbWFyeVwiO1xuICAgICAgICByZXR1cm4gdmFyaWFudDtcbiAgICAgIH1cbiAgICAgIGlmIChjb2xvclByb3ApIHJldHVybiBjb2xvclByb3A7XG4gICAgICBpZiAoaW5oZXJpdFByb3BzRnJvbVRleHQ/LmNvbG9yKSByZXR1cm4gaW5oZXJpdFByb3BzRnJvbVRleHQ/LmNvbG9yO1xuICAgICAgaWYgKCFpbmxpbmUpIHJldHVybiBcImFjY2VudFwiO1xuICAgICAgcmV0dXJuIHVuZGVmaW5lZDtcbiAgICB9O1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRMaW5rXG4gICAgICAgIGRhdGEtZTJlLXRlc3QtaWQ9e2RhdGFFMmVUZXN0SWR9XG4gICAgICAgIGRhdGEtZHMtaWQ9XCJMaW5rXCJcbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIGlubGluZT17aW5saW5lIHx8ICEhaW5oZXJpdFByb3BzRnJvbVRleHR9XG4gICAgICAgIGNvbG9yPXtnZXRDb2xvcigpfVxuICAgICAgICBzaXplPXtzaXplIHx8IGluaGVyaXRQcm9wc0Zyb21UZXh0Py5zaXplfVxuICAgICAgICB3ZWlnaHQ9e3dlaWdodCB8fCBpbmhlcml0UHJvcHNGcm9tVGV4dD8ud2VpZ2h0fVxuICAgICAgICB7Li4ucmVzdH1cbiAgICAgIC8+XG4gICAgKTtcbiAgfVxuKTtcbiJdfQ== */");
|
|
45
44
|
const Link = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
|
|
46
45
|
let {
|
|
47
|
-
children,
|
|
48
|
-
size,
|
|
49
46
|
weight,
|
|
47
|
+
color: colorProp,
|
|
48
|
+
size,
|
|
50
49
|
variant,
|
|
51
|
-
|
|
50
|
+
inline,
|
|
52
51
|
"data-e2e-test-id": dataE2eTestId,
|
|
53
52
|
...rest
|
|
54
53
|
} = _ref2;
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
54
|
+
const inheritPropsFromText = useContext(TextContext);
|
|
55
|
+
const getColor = () => {
|
|
56
|
+
if (variant) {
|
|
57
|
+
// this is going to be deleted after migration
|
|
58
|
+
if (variant === "primary") return "accent";
|
|
59
|
+
if (variant === "secondary") return "primary";
|
|
60
|
+
return variant;
|
|
61
|
+
}
|
|
62
|
+
if (colorProp) return colorProp;
|
|
63
|
+
if (inheritPropsFromText?.color) return inheritPropsFromText?.color;
|
|
64
|
+
if (!inline) return "accent";
|
|
65
|
+
return undefined;
|
|
66
|
+
};
|
|
58
67
|
return /*#__PURE__*/React.createElement(StyledLink, _extends({
|
|
59
68
|
"data-e2e-test-id": dataE2eTestId,
|
|
60
69
|
"data-ds-id": "Link",
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
}, rest)
|
|
70
|
+
ref: ref,
|
|
71
|
+
inline: inline || !!inheritPropsFromText,
|
|
72
|
+
color: getColor(),
|
|
73
|
+
size: size || inheritPropsFromText?.size,
|
|
74
|
+
weight: weight || inheritPropsFromText?.weight
|
|
75
|
+
}, rest));
|
|
67
76
|
});
|
|
68
77
|
|
|
69
78
|
export { Link };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sources":["../../../../../src/components/Link/Link.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\
|
|
1
|
+
{"version":3,"file":"Link.js","sources":["../../../../../src/components/Link/Link.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\nimport React, { useContext } from \"react\";\nimport { CSSObject } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport { TextContext } from \"../Typography/Text/Text\";\nimport {\n TextColors,\n TextSize,\n TextWeight,\n PolymorphicComponentPropsWithRef,\n PolymorphicRef,\n LinkVariations,\n} from \"../../types\";\n\nexport type LinkConditionalProps =\n | {\n /** It forces to inherit color, weight, size from parent */\n inline?: true;\n /** A color is inherited from its parent Text otherwise set as 'primary' */\n color: TextColors;\n }\n | {\n inline?: false;\n color?: TextColors;\n };\n\nexport type LinkProps = {\n /** A size is inherited from its parent */\n size?: TextSize;\n /** A weight is inherited from its parent */\n weight?: TextWeight;\n /** @deprecated variant, please use \"color\" prop instead */\n variant?: LinkVariations;\n onClick?: () => void;\n \"data-e2e-test-id\"?: string;\n} & LinkConditionalProps;\n\ntype LinkComponent = <C extends React.ElementType = \"a\">(\n props: PolymorphicComponentPropsWithRef<C, LinkProps>\n) => React.ReactElement | null;\n\nconst StyledLink = styled.a<Partial<LinkProps>>(\n ({ theme, weight, size, color, inline }) =>\n ({\n cursor: \"pointer\",\n background: \"none\",\n border: \"none\",\n padding: 0,\n fontSize: theme.variables.size.font[size],\n fontWeight: theme.variables.weight[weight],\n lineHeight: theme.variables.size.lineHeight.link[size],\n fontFamily: theme.variables.fontFamily.lato,\n\n textDecorationLine: inline ? \"underline\" : \"none\",\n color: color ? theme.values.color.text[color].default : \"inherit\",\n\n ...((color === \"primary\" ||\n color === \"secondary\" ||\n color === \"tertiary\") && {\n textDecorationColor: theme.values.color.text.underline.default,\n }),\n\n \"&:hover\": {\n textDecorationLine: \"underline\",\n textDecorationThickness: \"0.125em\", // it's not working in Safari for a link as button\n ...((color === \"primary\" ||\n color === \"secondary\" ||\n color === \"tertiary\") && {\n textDecorationColor: theme.values.color.text.underline.hover,\n color: theme.values.color.text[color].hover,\n }),\n },\n } as CSSObject)\n);\n\nexport const Link: LinkComponent = React.forwardRef(\n <C extends React.ElementType = \"a\">(\n {\n weight,\n color: colorProp,\n size,\n variant,\n inline,\n \"data-e2e-test-id\": dataE2eTestId,\n ...rest\n }: PolymorphicComponentPropsWithRef<C, LinkProps>,\n ref?: PolymorphicRef<C>\n ) => {\n const inheritPropsFromText = useContext(TextContext);\n\n const getColor = () => {\n if (variant) {\n // this is going to be deleted after migration\n if (variant === \"primary\") return \"accent\";\n if (variant === \"secondary\") return \"primary\";\n return variant;\n }\n if (colorProp) return colorProp;\n if (inheritPropsFromText?.color) return inheritPropsFromText?.color;\n if (!inline) return \"accent\";\n return undefined;\n };\n\n return (\n <StyledLink\n data-e2e-test-id={dataE2eTestId}\n data-ds-id=\"Link\"\n ref={ref}\n inline={inline || !!inheritPropsFromText}\n color={getColor()}\n size={size || inheritPropsFromText?.size}\n weight={weight || inheritPropsFromText?.weight}\n {...rest}\n />\n );\n }\n);\n"],"names":["StyledLink","_styled","process","env","NODE_ENV","target","label","_ref","theme","weight","size","color","inline","cursor","background","border","padding","fontSize","variables","font","fontWeight","lineHeight","link","fontFamily","lato","textDecorationLine","values","text","default","textDecorationColor","underline","textDecorationThickness","hover","Link","React","forwardRef","_ref2","ref","colorProp","variant","dataE2eTestId","rest","inheritPropsFromText","useContext","TextContext","getColor","undefined","createElement","_extends"],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { TextAlignment, TextVariations, TextColors, TextSize, MQ, Hyphens } from "../../../types";
|
|
2
|
+
import { TextAlignment, TextVariations, TextColors, TextSize, TextWeight, MQ, Hyphens } from "../../../types";
|
|
3
3
|
export type TextProps = {
|
|
4
4
|
children: React.ReactNode;
|
|
5
5
|
size?: TextSize;
|
|
6
|
-
weight?:
|
|
6
|
+
weight?: TextWeight;
|
|
7
7
|
transform?: "none" | "capitalize" | "uppercase" | "lowercase";
|
|
8
8
|
as?: "p" | "span";
|
|
9
9
|
/** @deprecated variant property is deprecated now. Please use color prop. */
|
|
@@ -11,11 +11,10 @@ export type TextProps = {
|
|
|
11
11
|
color?: TextColors;
|
|
12
12
|
align?: TextAlignment;
|
|
13
13
|
hyphens?: Hyphens | MQ<Hyphens>;
|
|
14
|
+
className?: string;
|
|
14
15
|
"data-e2e-test-id"?: string;
|
|
15
16
|
/** @ignore */
|
|
16
17
|
"data-ds-id"?: string;
|
|
17
18
|
};
|
|
18
|
-
export declare const
|
|
19
|
-
|
|
20
|
-
as?: React.ElementType<any>;
|
|
21
|
-
} & TextProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
|
|
19
|
+
export declare const TextContext: React.Context<Pick<TextProps, "color" | "size" | "weight">>;
|
|
20
|
+
export declare const Text: ({ size, weight, transform, as, color: colorProp, align, hyphens, variant, "data-e2e-test-id": dataE2eTestId, children, className, }: TextProps) => React.ReactElement;
|
|
@@ -1,25 +1,16 @@
|
|
|
1
1
|
import _styled from '@emotion/styled/base';
|
|
2
|
+
import React from 'react';
|
|
2
3
|
import isPropValid from '@emotion/is-prop-valid';
|
|
3
4
|
import { mq } from '../../../shared/mediaQueries.js';
|
|
4
5
|
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
weight: "normal",
|
|
8
|
-
transform: "none",
|
|
9
|
-
as: "p",
|
|
10
|
-
color: "primary",
|
|
11
|
-
align: "left",
|
|
12
|
-
hyphens: "none",
|
|
13
|
-
"data-e2e-test-id": undefined,
|
|
14
|
-
"data-ds-id": "Text"
|
|
15
|
-
};
|
|
16
|
-
const Text = /*#__PURE__*/_styled("p", process.env.NODE_ENV === "production" ? {
|
|
6
|
+
const TextContext = /*#__PURE__*/React.createContext(null);
|
|
7
|
+
const StyledText = /*#__PURE__*/_styled("p", process.env.NODE_ENV === "production" ? {
|
|
17
8
|
shouldForwardProp: prop => isPropValid(prop) && prop !== "transform",
|
|
18
9
|
target: "efktmsx0"
|
|
19
10
|
} : {
|
|
20
11
|
shouldForwardProp: prop => isPropValid(prop) && prop !== "transform",
|
|
21
12
|
target: "efktmsx0",
|
|
22
|
-
label: "
|
|
13
|
+
label: "StyledText"
|
|
23
14
|
})(_ref => {
|
|
24
15
|
let {
|
|
25
16
|
theme,
|
|
@@ -28,8 +19,8 @@ const Text = /*#__PURE__*/_styled("p", process.env.NODE_ENV === "production" ? {
|
|
|
28
19
|
size,
|
|
29
20
|
transform,
|
|
30
21
|
hyphens,
|
|
31
|
-
|
|
32
|
-
|
|
22
|
+
color,
|
|
23
|
+
variant
|
|
33
24
|
} = _ref;
|
|
34
25
|
return {
|
|
35
26
|
fontFamily: theme.variables.fontFamily.lato,
|
|
@@ -58,8 +49,54 @@ const Text = /*#__PURE__*/_styled("p", process.env.NODE_ENV === "production" ? {
|
|
|
58
49
|
}]
|
|
59
50
|
})
|
|
60
51
|
};
|
|
61
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
62
|
-
Text
|
|
52
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRleHQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFDbUIiLCJmaWxlIjoiVGV4dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkLCB7IENTU09iamVjdCB9IGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCBpc1Byb3BWYWxpZCBmcm9tIFwiQGVtb3Rpb24vaXMtcHJvcC12YWxpZFwiO1xuaW1wb3J0IHsgbXEgfSBmcm9tIFwiLi4vLi4vLi4vc2hhcmVkL21lZGlhUXVlcmllc1wiO1xuXG5pbXBvcnQge1xuICBUZXh0QWxpZ25tZW50LFxuICBUZXh0VmFyaWF0aW9ucyxcbiAgVGV4dENvbG9ycyxcbiAgVGV4dFNpemUsXG4gIFRleHRXZWlnaHQsXG4gIE1RLFxuICBIeXBoZW5zLFxufSBmcm9tIFwiLi4vLi4vLi4vdHlwZXNcIjtcblxuZXhwb3J0IHR5cGUgVGV4dFByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xuICBzaXplPzogVGV4dFNpemU7XG4gIHdlaWdodD86IFRleHRXZWlnaHQ7XG4gIHRyYW5zZm9ybT86IFwibm9uZVwiIHwgXCJjYXBpdGFsaXplXCIgfCBcInVwcGVyY2FzZVwiIHwgXCJsb3dlcmNhc2VcIjtcbiAgYXM/OiBcInBcIiB8IFwic3BhblwiO1xuICAvKiogQGRlcHJlY2F0ZWQgdmFyaWFudCBwcm9wZXJ0eSBpcyBkZXByZWNhdGVkIG5vdy4gUGxlYXNlIHVzZSBjb2xvciBwcm9wLiAqL1xuICB2YXJpYW50PzogVGV4dFZhcmlhdGlvbnM7XG4gIGNvbG9yPzogVGV4dENvbG9ycztcbiAgYWxpZ24/OiBUZXh0QWxpZ25tZW50O1xuICBoeXBoZW5zPzogSHlwaGVucyB8IE1RPEh5cGhlbnM+O1xuICBjbGFzc05hbWU/OiBzdHJpbmc7XG4gIFwiZGF0YS1lMmUtdGVzdC1pZFwiPzogc3RyaW5nO1xuICAvKiogQGlnbm9yZSAqL1xuICBcImRhdGEtZHMtaWRcIj86IHN0cmluZztcbn07XG5cbmV4cG9ydCBjb25zdCBUZXh0Q29udGV4dCA9IFJlYWN0LmNyZWF0ZUNvbnRleHQ8UGljazxcbiAgVGV4dFByb3BzLFxuICBcImNvbG9yXCIgfCBcInNpemVcIiB8IFwid2VpZ2h0XCJcbj4gfCBudWxsPihudWxsKTtcblxuY29uc3QgU3R5bGVkVGV4dCA9IHN0eWxlZChcInBcIiwge1xuICBzaG91bGRGb3J3YXJkUHJvcDogKHByb3A6IHN0cmluZykgPT5cbiAgICBpc1Byb3BWYWxpZChwcm9wKSAmJiBwcm9wICE9PSBcInRyYW5zZm9ybVwiLFxufSk8VGV4dFByb3BzPihcbiAgKHsgdGhlbWUsIGFsaWduLCB3ZWlnaHQsIHNpemUsIHRyYW5zZm9ybSwgaHlwaGVucywgY29sb3IsIHZhcmlhbnQgfSkgPT5cbiAgICAoe1xuICAgICAgZm9udEZhbWlseTogdGhlbWUudmFyaWFibGVzLmZvbnRGYW1pbHkubGF0byxcbiAgICAgIG1hcmdpbjogMCxcbiAgICAgIHRleHRUcmFuc2Zvcm06IHRyYW5zZm9ybSxcbiAgICAgIHRleHRBbGlnbjogYWxpZ24sXG4gICAgICBmb250V2VpZ2h0OiB0aGVtZS52YXJpYWJsZXMud2VpZ2h0W3dlaWdodF0sXG4gICAgICBjb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLnRleHRbY29sb3JdLmRlZmF1bHQsXG5cbiAgICAgIC8vIHZhcmlhbnQgaXMgZGVwcmVjYXRlZCBhbmQgaXQgc2hvdWxkIGJlIGRlbGV0ZWQgYXNhcFxuICAgICAgLi4uKHZhcmlhbnQgJiYge1xuICAgICAgICBjb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLnRleHRbdmFyaWFudF0uZGVmYXVsdCxcbiAgICAgICAgLi4uKHZhcmlhbnQgPT09IFwicHJpbWFyeVwiICYmIHtcbiAgICAgICAgICBjb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLnRleHQuYWNjZW50LmRlZmF1bHQsXG4gICAgICAgIH0pLFxuICAgICAgICAuLi4odmFyaWFudCA9PT0gXCJzZWNvbmRhcnlcIiAmJiB7XG4gICAgICAgICAgY29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci50ZXh0LnByaW1hcnkuZGVmYXVsdCxcbiAgICAgICAgfSksXG4gICAgICB9KSxcblxuICAgICAgZm9udFNpemU6IHRoZW1lLnZhcmlhYmxlcy5zaXplLmZvbnRbc2l6ZV0sXG4gICAgICBsaW5lSGVpZ2h0OiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5saW5lSGVpZ2h0LnRleHRbc2l6ZV0sXG4gICAgICAuLi5tcSh7XG4gICAgICAgIGh5cGhlbnM6IFtoeXBoZW5zLCB7IG5vbmU6IFwibm9uZVwiLCBhdXRvOiBcImF1dG9cIiwgbWFudWFsOiBcIm1hbnVhbFwiIH1dLFxuICAgICAgfSksXG4gICAgfSBhcyBDU1NPYmplY3QpXG4pO1xuXG5leHBvcnQgY29uc3QgVGV4dCA9ICh7XG4gIHNpemUgPSBcIm1cIixcbiAgd2VpZ2h0ID0gXCJub3JtYWxcIixcbiAgdHJhbnNmb3JtID0gXCJub25lXCIsXG4gIGFzID0gXCJwXCIsXG4gIGNvbG9yOiBjb2xvclByb3AgPSBcInByaW1hcnlcIixcbiAgYWxpZ24gPSBcImxlZnRcIixcbiAgaHlwaGVucyA9IFwibm9uZVwiLFxuICB2YXJpYW50LFxuICBcImRhdGEtZTJlLXRlc3QtaWRcIjogZGF0YUUyZVRlc3RJZCxcbiAgY2hpbGRyZW4sXG4gIGNsYXNzTmFtZSxcbn06IFRleHRQcm9wcyk6IFJlYWN0LlJlYWN0RWxlbWVudCA9PiB7XG4gIGxldCBjb2xvciA9IGNvbG9yUHJvcDtcblxuICAvLyB0aGlzIGlzIGdvaW5nIHRvIGJlIGRlbGV0ZWQgYWZ0ZXIgbWlncmF0aW9uXG4gIGlmICh2YXJpYW50KSB7XG4gICAgaWYgKHZhcmlhbnQgPT09IFwicHJpbWFyeVwiKSB7XG4gICAgICBjb2xvciA9IFwiYWNjZW50XCI7XG4gICAgfSBlbHNlIGlmICh2YXJpYW50ID09PSBcInNlY29uZGFyeVwiKSB7XG4gICAgICBjb2xvciA9IFwicHJpbWFyeVwiO1xuICAgIH0gZWxzZSB7XG4gICAgICBjb2xvciA9IHZhcmlhbnQ7XG4gICAgfVxuICB9XG5cbiAgY29uc3QgY29udGV4dFZhbHVlcyA9IFJlYWN0LnVzZU1lbW8oXG4gICAgKCkgPT4gKHsgY29sb3IsIHNpemUsIHdlaWdodCB9KSxcbiAgICBbY29sb3IsIHNpemUsIHdlaWdodF1cbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRUZXh0XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICBzaXplPXtzaXplfVxuICAgICAgd2VpZ2h0PXt3ZWlnaHR9XG4gICAgICB0cmFuc2Zvcm09e3RyYW5zZm9ybX1cbiAgICAgIGFzPXthc31cbiAgICAgIGNvbG9yPXtjb2xvcn1cbiAgICAgIGFsaWduPXthbGlnbn1cbiAgICAgIGh5cGhlbnM9e2h5cGhlbnN9XG4gICAgICBkYXRhLWUyZS10ZXN0LWlkPXtkYXRhRTJlVGVzdElkfVxuICAgICAgZGF0YS1kcy1pZD1cIlRleHRcIlxuICAgID5cbiAgICAgIDxUZXh0Q29udGV4dC5Qcm92aWRlciB2YWx1ZT17Y29udGV4dFZhbHVlc30+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvVGV4dENvbnRleHQuUHJvdmlkZXI+XG4gICAgPC9TdHlsZWRUZXh0PlxuICApO1xufTtcbiJdfQ== */");
|
|
53
|
+
const Text = _ref2 => {
|
|
54
|
+
let {
|
|
55
|
+
size = "m",
|
|
56
|
+
weight = "normal",
|
|
57
|
+
transform = "none",
|
|
58
|
+
as = "p",
|
|
59
|
+
color: colorProp = "primary",
|
|
60
|
+
align = "left",
|
|
61
|
+
hyphens = "none",
|
|
62
|
+
variant,
|
|
63
|
+
"data-e2e-test-id": dataE2eTestId,
|
|
64
|
+
children,
|
|
65
|
+
className
|
|
66
|
+
} = _ref2;
|
|
67
|
+
let color = colorProp;
|
|
68
|
+
|
|
69
|
+
// this is going to be deleted after migration
|
|
70
|
+
if (variant) {
|
|
71
|
+
if (variant === "primary") {
|
|
72
|
+
color = "accent";
|
|
73
|
+
} else if (variant === "secondary") {
|
|
74
|
+
color = "primary";
|
|
75
|
+
} else {
|
|
76
|
+
color = variant;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
const contextValues = React.useMemo(() => ({
|
|
80
|
+
color,
|
|
81
|
+
size,
|
|
82
|
+
weight
|
|
83
|
+
}), [color, size, weight]);
|
|
84
|
+
return /*#__PURE__*/React.createElement(StyledText, {
|
|
85
|
+
className: className,
|
|
86
|
+
variant: variant,
|
|
87
|
+
size: size,
|
|
88
|
+
weight: weight,
|
|
89
|
+
transform: transform,
|
|
90
|
+
as: as,
|
|
91
|
+
color: color,
|
|
92
|
+
align: align,
|
|
93
|
+
hyphens: hyphens,
|
|
94
|
+
"data-e2e-test-id": dataE2eTestId,
|
|
95
|
+
"data-ds-id": "Text"
|
|
96
|
+
}, /*#__PURE__*/React.createElement(TextContext.Provider, {
|
|
97
|
+
value: contextValues
|
|
98
|
+
}, children));
|
|
99
|
+
};
|
|
63
100
|
|
|
64
|
-
export { Text };
|
|
101
|
+
export { Text, TextContext };
|
|
65
102
|
//# sourceMappingURL=Text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sources":["../../../../../../src/components/Typography/Text/Text.tsx"],"sourcesContent":["import React from \"react\";\nimport styled, { CSSObject } from \"@emotion/styled\";\nimport isPropValid from \"@emotion/is-prop-valid\";\nimport { mq } from \"../../../shared/mediaQueries\";\n\nimport {\n TextAlignment,\n TextVariations,\n TextColors,\n TextSize,\n MQ,\n Hyphens,\n} from \"../../../types\";\n\nexport type TextProps = {\n children: React.ReactNode;\n size?: TextSize;\n weight?:
|
|
1
|
+
{"version":3,"file":"Text.js","sources":["../../../../../../src/components/Typography/Text/Text.tsx"],"sourcesContent":["import React from \"react\";\nimport styled, { CSSObject } from \"@emotion/styled\";\nimport isPropValid from \"@emotion/is-prop-valid\";\nimport { mq } from \"../../../shared/mediaQueries\";\n\nimport {\n TextAlignment,\n TextVariations,\n TextColors,\n TextSize,\n TextWeight,\n MQ,\n Hyphens,\n} from \"../../../types\";\n\nexport type TextProps = {\n children: React.ReactNode;\n size?: TextSize;\n weight?: TextWeight;\n transform?: \"none\" | \"capitalize\" | \"uppercase\" | \"lowercase\";\n as?: \"p\" | \"span\";\n /** @deprecated variant property is deprecated now. Please use color prop. */\n variant?: TextVariations;\n color?: TextColors;\n align?: TextAlignment;\n hyphens?: Hyphens | MQ<Hyphens>;\n className?: string;\n \"data-e2e-test-id\"?: string;\n /** @ignore */\n \"data-ds-id\"?: string;\n};\n\nexport const TextContext = React.createContext<Pick<\n TextProps,\n \"color\" | \"size\" | \"weight\"\n> | null>(null);\n\nconst StyledText = styled(\"p\", {\n shouldForwardProp: (prop: string) =>\n isPropValid(prop) && prop !== \"transform\",\n})<TextProps>(\n ({ theme, align, weight, size, transform, hyphens, color, variant }) =>\n ({\n fontFamily: theme.variables.fontFamily.lato,\n margin: 0,\n textTransform: transform,\n textAlign: align,\n fontWeight: theme.variables.weight[weight],\n color: theme.values.color.text[color].default,\n\n // variant is deprecated and it should be deleted asap\n ...(variant && {\n color: theme.values.color.text[variant].default,\n ...(variant === \"primary\" && {\n color: theme.values.color.text.accent.default,\n }),\n ...(variant === \"secondary\" && {\n color: theme.values.color.text.primary.default,\n }),\n }),\n\n fontSize: theme.variables.size.font[size],\n lineHeight: theme.variables.size.lineHeight.text[size],\n ...mq({\n hyphens: [hyphens, { none: \"none\", auto: \"auto\", manual: \"manual\" }],\n }),\n } as CSSObject)\n);\n\nexport const Text = ({\n size = \"m\",\n weight = \"normal\",\n transform = \"none\",\n as = \"p\",\n color: colorProp = \"primary\",\n align = \"left\",\n hyphens = \"none\",\n variant,\n \"data-e2e-test-id\": dataE2eTestId,\n children,\n className,\n}: TextProps): React.ReactElement => {\n let color = colorProp;\n\n // this is going to be deleted after migration\n if (variant) {\n if (variant === \"primary\") {\n color = \"accent\";\n } else if (variant === \"secondary\") {\n color = \"primary\";\n } else {\n color = variant;\n }\n }\n\n const contextValues = React.useMemo(\n () => ({ color, size, weight }),\n [color, size, weight]\n );\n\n return (\n <StyledText\n className={className}\n variant={variant}\n size={size}\n weight={weight}\n transform={transform}\n as={as}\n color={color}\n align={align}\n hyphens={hyphens}\n data-e2e-test-id={dataE2eTestId}\n data-ds-id=\"Text\"\n >\n <TextContext.Provider value={contextValues}>\n {children}\n </TextContext.Provider>\n </StyledText>\n );\n};\n"],"names":["TextContext","React","createContext","StyledText","_styled","process","env","NODE_ENV","shouldForwardProp","prop","isPropValid","target","label","_ref","theme","align","weight","size","transform","hyphens","color","variant","fontFamily","variables","lato","margin","textTransform","textAlign","fontWeight","values","text","default","accent","primary","fontSize","font","lineHeight","mq","none","auto","manual","Text","_ref2","as","colorProp","dataE2eTestId","children","className","contextValues","useMemo","createElement","Provider","value"],"mappings":"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"}
|
package/build/esm/src/index.js
CHANGED
|
@@ -7,7 +7,7 @@ export { Box } from './components/Box/Box.js';
|
|
|
7
7
|
export { Inline } from './components/Inline/Inline.js';
|
|
8
8
|
export { Stack } from './components/Stack/Stack.js';
|
|
9
9
|
export { H1, H2, H3, H4, H5, H6 } from './components/Typography/Header/Header.js';
|
|
10
|
-
export { Text } from './components/Typography/Text/Text.js';
|
|
10
|
+
export { Text, TextContext } from './components/Typography/Text/Text.js';
|
|
11
11
|
export { TextClamped } from './components/Typography/TextClamped/TextClamped.js';
|
|
12
12
|
export { StyledText, makeStyledJSX } from './components/Typography/StyledText/StyledText.js';
|
|
13
13
|
export { Link } from './components/Link/Link.js';
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import breakpoints from '../../build-tokens/_breakpoints.json.js';
|
|
2
2
|
|
|
3
3
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
4
|
+
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
5
|
+
|
|
4
6
|
|
|
5
7
|
/*
|
|
6
8
|
Although, mq implementation supports any property type, the following types are specified to provide type safety. If you need support for a new type, add it here.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mediaQueries.js","sources":["../../../../src/shared/mediaQueries.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport {\n ColumnSizes,\n HorizontalAlignment,\n MQ,\n SpaceSizes,\n TextAlignment,\n VerticalAlignment,\n Order,\n ColumnAlignment,\n Hyphens,\n} from \"../types\";\nimport breakpoints from \"../../build-tokens/_breakpoints.json\";\n\ntype MqProp<T> = [\n T | MQ<T>,\n Record<T extends string ? T : never, string | number>\n];\n\n/*\n Although, mq implementation supports any property type, the following types are specified to provide type safety. If you need support for a new type, add it here.\n*/\ntype MqRules = Record<\n string,\n | MqProp<TextAlignment>\n | MqProp<SpaceSizes>\n | MqProp<HorizontalAlignment>\n | MqProp<VerticalAlignment>\n | MqProp<ColumnSizes>\n | MqProp<Order>\n | MqProp<ColumnAlignment>\n | MqProp<Hyphens>\n>;\n\ntype EmotionCssPropertyName = string;\ntype EmotionCssValue = string | number;\ntype EmotionCssDescription = Record<EmotionCssPropertyName, EmotionCssValue>;\ntype MqFunc = (\n rules: MqRules\n) => Record<string, EmotionCssValue | EmotionCssDescription>;\n\n// this thing probably deserves to be a separate library, like facepaint for emotion\nfunction getMq(breakpointRules: string[]): MqFunc {\n const keys = breakpointRules;\n\n return (rules) => {\n const res: Record<string, EmotionCssValue | EmotionCssDescription> = {};\n\n keys.forEach((key: string) => {\n res[key] = {};\n });\n res[`@media screen`] = {};\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Object.entries(rules).forEach(([cssProperty, [prop, map]]: any) => {\n if (Array.isArray(prop)) {\n const sm = prop[0];\n const md = prop[1] || prop[0];\n const lg = prop[2] || prop[1] || prop[0];\n const [s, m, l]: string[] = keys;\n\n (res[s] as EmotionCssDescription)[cssProperty] = map[sm];\n (res[m] as EmotionCssDescription)[cssProperty] = map[md];\n (res[l] as EmotionCssDescription)[cssProperty] = map[lg];\n } else {\n (res[`@media screen`] as EmotionCssDescription)[cssProperty] = map[\n prop as string\n ] as string;\n }\n });\n\n return res;\n };\n}\n\nexport const mq = getMq([\n `@media (max-width: ${breakpoints.medium.value}px)`,\n `@media (min-width: ${breakpoints.medium.value}px) and (max-width: ${breakpoints.large.value}px)`,\n `@media (min-width: ${breakpoints.large.value}px)`,\n]);\n\nfunction getMqValue(breakpointRules: string[]) {\n const keys = breakpointRules;\n return (\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n rules: Record<EmotionCssPropertyName, EmotionCssValue[] | EmotionCssValue>\n ): Record<string, EmotionCssValue | EmotionCssDescription> => {\n const res: Record<string, EmotionCssValue | EmotionCssDescription> = {};\n keys.forEach((key: string) => {\n res[key] = {};\n });\n res[`@media screen`] = {};\n\n Object.entries(rules).forEach(([cssProperty, cssValues]) => {\n if (Array.isArray(cssValues)) {\n breakpointRules.forEach((breakpoint, index) => {\n let i = index;\n while (!cssValues[i] && i !== 0) {\n i -= 1;\n }\n\n (res[breakpoint] as EmotionCssDescription)[cssProperty] =\n cssValues[i];\n });\n } else {\n (res[`@media screen`] as EmotionCssDescription)[cssProperty] =\n cssValues;\n }\n });\n\n return res;\n };\n}\n\nexport const mqValue = getMqValue([\n `@media (max-width: ${breakpoints.medium.value}px)`,\n `@media (min-width: ${breakpoints.medium.value}px) and (max-width: ${breakpoints.large.value}px)`,\n `@media (min-width: ${breakpoints.large.value}px)`,\n]);\n\nexport function getMediaQueryClasses<T>(\n s: T | MQ<T> | undefined,\n styles: Record<string, string>,\n prefix = \"\"\n): string[] {\n if (s === undefined) return [];\n\n let res;\n if (Array.isArray(s)) {\n const sm = s[0];\n const md = s[1] || s[0];\n const lg = s[2] || s[1] || s[0];\n\n res = [`${sm}-small`, `${md}-medium`, `${lg}-large`];\n } else {\n res = [s as unknown as string];\n }\n\n return res.map((cl) => `${prefix}${cl}`).map((cl) => styles[cl]);\n}\n"],"names":["getMq","breakpointRules","keys","rules","res","forEach","key","Object","entries","_ref","cssProperty","prop","map","Array","isArray","sm","md","lg","s","m","l","mq","breakpoints","medium","value","large","getMqValue","_ref2","cssValues","breakpoint","index","i","mqValue"],"mappings":";;AAAA
|
|
1
|
+
{"version":3,"file":"mediaQueries.js","sources":["../../../../src/shared/mediaQueries.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport {\n ColumnSizes,\n HorizontalAlignment,\n MQ,\n SpaceSizes,\n TextAlignment,\n VerticalAlignment,\n Order,\n ColumnAlignment,\n Hyphens,\n} from \"../types\";\nimport breakpoints from \"../../build-tokens/_breakpoints.json\";\n\ntype MqProp<T> = [\n T | MQ<T>,\n Record<T extends string ? T : never, string | number>\n];\n\n/*\n Although, mq implementation supports any property type, the following types are specified to provide type safety. If you need support for a new type, add it here.\n*/\ntype MqRules = Record<\n string,\n | MqProp<TextAlignment>\n | MqProp<SpaceSizes>\n | MqProp<HorizontalAlignment>\n | MqProp<VerticalAlignment>\n | MqProp<ColumnSizes>\n | MqProp<Order>\n | MqProp<ColumnAlignment>\n | MqProp<Hyphens>\n>;\n\ntype EmotionCssPropertyName = string;\ntype EmotionCssValue = string | number;\ntype EmotionCssDescription = Record<EmotionCssPropertyName, EmotionCssValue>;\ntype MqFunc = (\n rules: MqRules\n) => Record<string, EmotionCssValue | EmotionCssDescription>;\n\n// this thing probably deserves to be a separate library, like facepaint for emotion\nfunction getMq(breakpointRules: string[]): MqFunc {\n const keys = breakpointRules;\n\n return (rules) => {\n const res: Record<string, EmotionCssValue | EmotionCssDescription> = {};\n\n keys.forEach((key: string) => {\n res[key] = {};\n });\n res[`@media screen`] = {};\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Object.entries(rules).forEach(([cssProperty, [prop, map]]: any) => {\n if (Array.isArray(prop)) {\n const sm = prop[0];\n const md = prop[1] || prop[0];\n const lg = prop[2] || prop[1] || prop[0];\n const [s, m, l]: string[] = keys;\n\n (res[s] as EmotionCssDescription)[cssProperty] = map[sm];\n (res[m] as EmotionCssDescription)[cssProperty] = map[md];\n (res[l] as EmotionCssDescription)[cssProperty] = map[lg];\n } else {\n (res[`@media screen`] as EmotionCssDescription)[cssProperty] = map[\n prop as string\n ] as string;\n }\n });\n\n return res;\n };\n}\n\nexport const mq = getMq([\n `@media (max-width: ${breakpoints.medium.value}px)`,\n `@media (min-width: ${breakpoints.medium.value}px) and (max-width: ${breakpoints.large.value}px)`,\n `@media (min-width: ${breakpoints.large.value}px)`,\n]);\n\nfunction getMqValue(breakpointRules: string[]) {\n const keys = breakpointRules;\n return (\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n rules: Record<EmotionCssPropertyName, EmotionCssValue[] | EmotionCssValue>\n ): Record<string, EmotionCssValue | EmotionCssDescription> => {\n const res: Record<string, EmotionCssValue | EmotionCssDescription> = {};\n keys.forEach((key: string) => {\n res[key] = {};\n });\n res[`@media screen`] = {};\n\n Object.entries(rules).forEach(([cssProperty, cssValues]) => {\n if (Array.isArray(cssValues)) {\n breakpointRules.forEach((breakpoint, index) => {\n let i = index;\n while (!cssValues[i] && i !== 0) {\n i -= 1;\n }\n\n (res[breakpoint] as EmotionCssDescription)[cssProperty] =\n cssValues[i];\n });\n } else {\n (res[`@media screen`] as EmotionCssDescription)[cssProperty] =\n cssValues;\n }\n });\n\n return res;\n };\n}\n\nexport const mqValue = getMqValue([\n `@media (max-width: ${breakpoints.medium.value}px)`,\n `@media (min-width: ${breakpoints.medium.value}px) and (max-width: ${breakpoints.large.value}px)`,\n `@media (min-width: ${breakpoints.large.value}px)`,\n]);\n\nexport function getMediaQueryClasses<T>(\n s: T | MQ<T> | undefined,\n styles: Record<string, string>,\n prefix = \"\"\n): string[] {\n if (s === undefined) return [];\n\n let res;\n if (Array.isArray(s)) {\n const sm = s[0];\n const md = s[1] || s[0];\n const lg = s[2] || s[1] || s[0];\n\n res = [`${sm}-small`, `${md}-medium`, `${lg}-large`];\n } else {\n res = [s as unknown as string];\n }\n\n return res.map((cl) => `${prefix}${cl}`).map((cl) => styles[cl]);\n}\n"],"names":["getMq","breakpointRules","keys","rules","res","forEach","key","Object","entries","_ref","cssProperty","prop","map","Array","isArray","sm","md","lg","s","m","l","mq","breakpoints","medium","value","large","getMqValue","_ref2","cssValues","breakpoint","index","i","mqValue"],"mappings":"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"}
|
|
@@ -24,13 +24,15 @@ export declare const BaseVariationsRuntype: Union<[Literal<"primary">, Literal<"
|
|
|
24
24
|
export declare const BaseColorsRuntype: Union<[Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>, Literal<"accent">]>;
|
|
25
25
|
export type BaseVariations = Static<typeof BaseVariationsRuntype>;
|
|
26
26
|
export type BaseColors = Static<typeof BaseColorsRuntype>;
|
|
27
|
-
declare const TextColorsRuntype: Union<[Union<[Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>, Literal<"accent">]>, Literal<"info">, Literal<"error">, Literal<"warning">]>;
|
|
27
|
+
declare const TextColorsRuntype: Union<[Union<[Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>, Literal<"accent">]>, Literal<"success">, Literal<"info">, Literal<"error">, Literal<"warning">]>;
|
|
28
28
|
export type TextColors = Static<typeof TextColorsRuntype>;
|
|
29
|
-
declare const TextVariationsRuntype: Union<[Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>, Literal<"info">, Literal<"error">, Literal<"warning">]>;
|
|
29
|
+
declare const TextVariationsRuntype: Union<[Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>, Literal<"success">, Literal<"info">, Literal<"error">, Literal<"warning">]>;
|
|
30
30
|
export type TextVariations = Static<typeof TextVariationsRuntype>;
|
|
31
|
-
declare const
|
|
31
|
+
declare const TextWeightRuntype: Union<[Literal<"normal">, Literal<"bold">, Literal<"black">, Literal<"inherit">]>;
|
|
32
|
+
export type TextWeight = Static<typeof TextWeightRuntype>;
|
|
33
|
+
declare const IconsColorsRuntime: Union<[Union<[Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>, Literal<"accent">]>, Literal<"success">, Literal<"info">, Literal<"error">, Literal<"warning">, Literal<"inherit">, Literal<"brand">, Literal<"quaternary">]>;
|
|
32
34
|
export type IconsColors = Static<typeof IconsColorsRuntime>;
|
|
33
|
-
declare const IconsVariationsRuntype: Union<[Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>, Literal<"info">, Literal<"error">, Literal<"warning">, Literal<"inherit">, Literal<"brand">]>;
|
|
35
|
+
declare const IconsVariationsRuntype: Union<[Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>, Literal<"success">, Literal<"info">, Literal<"error">, Literal<"warning">, Literal<"inherit">, Literal<"brand">]>;
|
|
34
36
|
export type IconsVariations = Static<typeof IconsVariationsRuntype>;
|
|
35
37
|
declare const CalloutVariationsRuntype: Union<[Literal<"info">, Literal<"success">, Literal<"error">, Literal<"warning">]>;
|
|
36
38
|
export type CalloutVariations = Static<typeof CalloutVariationsRuntype>;
|
package/build/scss/_theming.scss
CHANGED
|
@@ -37,10 +37,10 @@
|
|
|
37
37
|
--color-text-primary-default: #1a1c1c;
|
|
38
38
|
--color-text-primary-hover: #1a1c1c;
|
|
39
39
|
--color-text-secondary-default: #40515e;
|
|
40
|
-
--color-text-secondary-hover: #
|
|
40
|
+
--color-text-secondary-hover: #1a1c1c;
|
|
41
41
|
--color-text-tertiary-default: #607585;
|
|
42
42
|
--color-text-tertiary-disabled: rgba(64, 81, 94, 0.3);
|
|
43
|
-
--color-text-tertiary-hover: #
|
|
43
|
+
--color-text-tertiary-hover: #1a1c1c;
|
|
44
44
|
--color-text-quaternary-default: #a3b2bd;
|
|
45
45
|
--color-text-accent-default: #0b8363;
|
|
46
46
|
--color-text-accent-hover: #0a5c45;
|
|
@@ -52,6 +52,10 @@
|
|
|
52
52
|
--color-text-error-disabled: rgba(192, 39, 37, 0.3);
|
|
53
53
|
--color-text-warning-default: #314554;
|
|
54
54
|
--color-text-success-default: #0a5c45;
|
|
55
|
+
--color-text-underline-default: #a3b2bd;
|
|
56
|
+
--color-text-underline-hover: #607585;
|
|
57
|
+
--color-text-dottedUnderline-default: #607585;
|
|
58
|
+
--color-text-dottedUnderline-hover: #40515e;
|
|
55
59
|
--color-icon-primary: #1a1c1c;
|
|
56
60
|
--color-icon-secondary: #40515e;
|
|
57
61
|
--color-icon-tertiary: #607585;
|
|
@@ -171,6 +175,10 @@
|
|
|
171
175
|
--color-text-error-disabled: rgba(244, 154, 154, 0.3);
|
|
172
176
|
--color-text-warning-default: #fae0b3;
|
|
173
177
|
--color-text-success-default: #a6f2dd;
|
|
178
|
+
--color-text-underline-default: #757a84;
|
|
179
|
+
--color-text-underline-hover: #93979f;
|
|
180
|
+
--color-text-dottedUnderline-default: #93979f;
|
|
181
|
+
--color-text-dottedUnderline-hover: #b9bcc3;
|
|
174
182
|
--color-icon-primary: #d8dade;
|
|
175
183
|
--color-icon-secondary: #ced1d6;
|
|
176
184
|
--color-icon-tertiary: #93979f;
|
|
@@ -50,6 +50,10 @@ $colorTextError: var(--color-text-error-default);
|
|
|
50
50
|
$colorTextErrorDisabled: var(--color-text-error-disabled);
|
|
51
51
|
$colorTextWarning: var(--color-text-warning-default);
|
|
52
52
|
$colorTextSuccess: var(--color-text-success-default);
|
|
53
|
+
$colorTextUnderline: var(--color-text-underline-default);
|
|
54
|
+
$colorTextUnderlineHover: var(--color-text-underline-hover);
|
|
55
|
+
$colorTextDottedUnderline: var(--color-text-dottedUnderline-default);
|
|
56
|
+
$colorTextDottedUnderlineHover: var(--color-text-dottedUnderline-hover);
|
|
53
57
|
$colorIconPrimary: var(--color-icon-primary);
|
|
54
58
|
$colorIconSecondary: var(--color-icon-secondary);
|
|
55
59
|
$colorIconTertiary: var(--color-icon-tertiary);
|