@elliemae/ds-typography 3.70.0-next.37 → 3.70.0-next.39

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.
Files changed (52) hide show
  1. package/dist/cjs/index.js +3 -1
  2. package/dist/cjs/index.js.map +2 -2
  3. package/dist/cjs/parts/styled.js +4 -6
  4. package/dist/cjs/parts/styled.js.map +2 -2
  5. package/dist/cjs/parts/typographyFontFamily.js +39 -0
  6. package/dist/cjs/parts/typographyFontFamily.js.map +7 -0
  7. package/dist/cjs/parts/variants/body-article.js +4 -0
  8. package/dist/cjs/parts/variants/body-article.js.map +2 -2
  9. package/dist/cjs/parts/variants/body.js +9 -0
  10. package/dist/cjs/parts/variants/body.js.map +2 -2
  11. package/dist/cjs/parts/variants/button.js +5 -0
  12. package/dist/cjs/parts/variants/button.js.map +2 -2
  13. package/dist/cjs/parts/variants/feedback.js +5 -0
  14. package/dist/cjs/parts/variants/feedback.js.map +2 -2
  15. package/dist/cjs/parts/variants/header-article.js +6 -0
  16. package/dist/cjs/parts/variants/header-article.js.map +2 -2
  17. package/dist/cjs/parts/variants/header.js +9 -0
  18. package/dist/cjs/parts/variants/header.js.map +2 -2
  19. package/dist/cjs/parts/variants/highlight.js +5 -0
  20. package/dist/cjs/parts/variants/highlight.js.map +2 -2
  21. package/dist/cjs/parts/variants/link.js +5 -0
  22. package/dist/cjs/parts/variants/link.js.map +2 -2
  23. package/dist/cjs/parts/variants/quote.js +3 -0
  24. package/dist/cjs/parts/variants/quote.js.map +2 -2
  25. package/dist/esm/index.js +3 -1
  26. package/dist/esm/index.js.map +2 -2
  27. package/dist/esm/parts/styled.js +4 -6
  28. package/dist/esm/parts/styled.js.map +2 -2
  29. package/dist/esm/parts/typographyFontFamily.js +9 -0
  30. package/dist/esm/parts/typographyFontFamily.js.map +7 -0
  31. package/dist/esm/parts/variants/body-article.js +4 -0
  32. package/dist/esm/parts/variants/body-article.js.map +2 -2
  33. package/dist/esm/parts/variants/body.js +9 -0
  34. package/dist/esm/parts/variants/body.js.map +2 -2
  35. package/dist/esm/parts/variants/button.js +5 -0
  36. package/dist/esm/parts/variants/button.js.map +2 -2
  37. package/dist/esm/parts/variants/feedback.js +5 -0
  38. package/dist/esm/parts/variants/feedback.js.map +2 -2
  39. package/dist/esm/parts/variants/header-article.js +6 -0
  40. package/dist/esm/parts/variants/header-article.js.map +2 -2
  41. package/dist/esm/parts/variants/header.js +9 -0
  42. package/dist/esm/parts/variants/header.js.map +2 -2
  43. package/dist/esm/parts/variants/highlight.js +5 -0
  44. package/dist/esm/parts/variants/highlight.js.map +2 -2
  45. package/dist/esm/parts/variants/link.js +5 -0
  46. package/dist/esm/parts/variants/link.js.map +2 -2
  47. package/dist/esm/parts/variants/quote.js +3 -0
  48. package/dist/esm/parts/variants/quote.js.map +2 -2
  49. package/dist/types/index.d.ts +1 -0
  50. package/dist/types/parts/styled.d.ts +2 -0
  51. package/dist/types/parts/typographyFontFamily.d.ts +1 -0
  52. package/package.json +6 -6
package/dist/esm/parts/variants/feedback.js CHANGED
@@ -1,18 +1,23 @@
1
1
  import * as React from "react";
2
2
  import { css } from "@elliemae/ds-system";
3
3
  import { TYPOGRAPHY_VARIANTS } from "../../constants/index.js";
4
+ import { typographyFontFamily } from "../typographyFontFamily.js";
4
5
  const typedCss = () => css``;
5
6
  const VARIANTS_CSS_FEEDBACK = {
6
7
  [TYPOGRAPHY_VARIANTS.FEEDBACK_NEUTRAL]: css`
8
+ ${typographyFontFamily}
7
9
  color: ${(props) => props.theme.colors.neutral[600]};
8
10
  `,
9
11
  [TYPOGRAPHY_VARIANTS.FEEDBACK_BRAND]: css`
12
+ ${typographyFontFamily}
10
13
  color: ${(props) => props.theme.colors.brand[800]};
11
14
  `,
12
15
  [TYPOGRAPHY_VARIANTS.FEEDBACK_IMPORTANT]: css`
16
+ ${typographyFontFamily}
13
17
  color: ${(props) => props.theme.colors.warning[950]};
14
18
  `,
15
19
  [TYPOGRAPHY_VARIANTS.FEEDBACK_CRITICAL]: css`
20
+ ${typographyFontFamily}
16
21
  color: ${(props) => props.theme.colors.danger[950]};
17
22
  `
18
23
  };
package/dist/esm/parts/variants/feedback.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/variants/feedback.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype FeedbackCSSMap = {\n [key in DSTypographyT.FeedbackVariants]: ReturnType<typeof typedCss>;\n};\n\nexport const VARIANTS_CSS_FEEDBACK: FeedbackCSSMap = {\n [TYPOGRAPHY_VARIANTS.FEEDBACK_NEUTRAL]: css<DSTypographyT.StyledPropsInterface>`\n color: ${(props) => props.theme.colors.neutral[600]};\n `,\n [TYPOGRAPHY_VARIANTS.FEEDBACK_BRAND]: css<DSTypographyT.StyledPropsInterface>`\n color: ${(props) => props.theme.colors.brand[800]};\n `,\n [TYPOGRAPHY_VARIANTS.FEEDBACK_IMPORTANT]: css<DSTypographyT.StyledPropsInterface>`\n color: ${(props) => props.theme.colors.warning[950]};\n `,\n [TYPOGRAPHY_VARIANTS.FEEDBACK_CRITICAL]: css<DSTypographyT.StyledPropsInterface>`\n color: ${(props) => props.theme.colors.danger[950]};\n `,\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AACpB,SAAS,2BAA2B;AAKpC,MAAM,WAAW,MAAM;AAKhB,MAAM,wBAAwC;AAAA,EACnD,CAAC,oBAAoB,gBAAgB,GAAG;AAAA,aAC7B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,EAErD,CAAC,oBAAoB,cAAc,GAAG;AAAA,aAC3B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,EAEnD,CAAC,oBAAoB,kBAAkB,GAAG;AAAA,aAC/B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,EAErD,CAAC,oBAAoB,iBAAiB,GAAG;AAAA,aAC9B,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAEtD;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\nimport { typographyFontFamily } from '../typographyFontFamily.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype FeedbackCSSMap = {\n [key in DSTypographyT.FeedbackVariants]: ReturnType<typeof typedCss>;\n};\n\nexport const VARIANTS_CSS_FEEDBACK: FeedbackCSSMap = {\n [TYPOGRAPHY_VARIANTS.FEEDBACK_NEUTRAL]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n color: ${(props) => props.theme.colors.neutral[600]};\n `,\n [TYPOGRAPHY_VARIANTS.FEEDBACK_BRAND]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n color: ${(props) => props.theme.colors.brand[800]};\n `,\n [TYPOGRAPHY_VARIANTS.FEEDBACK_IMPORTANT]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n color: ${(props) => props.theme.colors.warning[950]};\n `,\n [TYPOGRAPHY_VARIANTS.FEEDBACK_CRITICAL]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n color: ${(props) => props.theme.colors.danger[950]};\n `,\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AACpB,SAAS,2BAA2B;AAEpC,SAAS,4BAA4B;AAIrC,MAAM,WAAW,MAAM;AAKhB,MAAM,wBAAwC;AAAA,EACnD,CAAC,oBAAoB,gBAAgB,GAAG;AAAA,MACpC,oBAAoB;AAAA,aACb,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,EAErD,CAAC,oBAAoB,cAAc,GAAG;AAAA,MAClC,oBAAoB;AAAA,aACb,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,EAEnD,CAAC,oBAAoB,kBAAkB,GAAG;AAAA,MACtC,oBAAoB;AAAA,aACb,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,EAErD,CAAC,oBAAoB,iBAAiB,GAAG;AAAA,MACrC,oBAAoB;AAAA,aACb,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAEtD;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/variants/header-article.js CHANGED
@@ -1,10 +1,12 @@
1
1
  import * as React from "react";
2
2
  import { css } from "@elliemae/ds-system";
3
3
  import { TYPOGRAPHY_VARIANTS } from "../../constants/index.js";
4
+ import { typographyFontFamily } from "../typographyFontFamily.js";
4
5
  const typedCss = () => css``;
5
6
  const VARIANTS_CSS_HEADER_ARTICLE = {
6
7
  // font-size: 34px/RT | line-height: 41px/RT
7
8
  [TYPOGRAPHY_VARIANTS.H1_ARTICLE]: css`
9
+ ${typographyFontFamily}
8
10
  font-size: ${(props) => props.fontSize ?? "2.125rem"}; // 34px -> 34/16 = 2.125rem
9
11
  line-height: ${(props) => props.lineHeight ?? "2.5625rem"}; // 41px -> 41/16 = 2.5625rem
10
12
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -19,6 +21,7 @@ const VARIANTS_CSS_HEADER_ARTICLE = {
19
21
  `,
20
22
  // font-size: 24px/RT | line-height: 31px/RT
21
23
  [TYPOGRAPHY_VARIANTS.H2_ARTICLE]: css`
24
+ ${typographyFontFamily}
22
25
  font-size: ${(props) => props.fontSize ?? "1.5rem"}; // 24px -> 24/16 = 1.5rem
23
26
  line-height: ${(props) => props.lineHeight ?? "1.9375rem"}; // 31px -> 31/16 = 1.9375rem
24
27
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -33,6 +36,7 @@ const VARIANTS_CSS_HEADER_ARTICLE = {
33
36
  `,
34
37
  // font-size: 18px/RT | line-height: 22px/RT
35
38
  [TYPOGRAPHY_VARIANTS.H3_ARTICLE]: css`
39
+ ${typographyFontFamily}
36
40
  font-size: ${(props) => props.fontSize ?? "1.125rem"}; // 18px -> 18/16 = 1.125rem
37
41
  line-height: ${(props) => props.lineHeight ?? "1.375rem"}; // 22px -> 22/16 = 1.375rem
38
42
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -47,6 +51,7 @@ const VARIANTS_CSS_HEADER_ARTICLE = {
47
51
  `,
48
52
  // font-size: 16px/RT | line-height: 20px/RT
49
53
  [TYPOGRAPHY_VARIANTS.H4_ARTICLE]: css`
54
+ ${typographyFontFamily}
50
55
  font-size: ${(props) => props.fontSize ?? "1rem"}; // 16px -> 16/16 = 1rem
51
56
  line-height: ${(props) => props.lineHeight ?? "1.25rem"}; // 20px -> 20/16 = 1.25rem
52
57
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -61,6 +66,7 @@ const VARIANTS_CSS_HEADER_ARTICLE = {
61
66
  `,
62
67
  // font-size: 14px/RT | line-height: 17px/RT
63
68
  [TYPOGRAPHY_VARIANTS.H5_ARTICLE]: css`
69
+ ${typographyFontFamily}
64
70
  font-size: ${(props) => props.fontSize ?? "0.875rem"}; // 14px -> 14/16 = 0.875rem
65
71
  line-height: ${(props) => props.lineHeight ?? "1.0625rem"}; // 17px -> 17/16 = 1.0625rem
66
72
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
package/dist/esm/parts/variants/header-article.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/variants/header-article.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype ArticleHeadingsCSSMap = {\n [key in DSTypographyT.ArticleHeadingVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_CSS_HEADER_ARTICLE: ArticleHeadingsCSSMap = {\n // font-size: 34px/RT | line-height: 41px/RT\n [TYPOGRAPHY_VARIANTS.H1_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '2.125rem'}; // 34px -> 34/16 = 2.125rem\n line-height: ${(props) => props.lineHeight ?? '2.5625rem'}; // 41px -> 41/16 = 2.5625rem\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '2.615384615384615rem'}; // 34px -> 34/13 = 2.615384615384615rem\n line-height: ${(props) => props.lineHeight ?? '3.153846153846154rem'}; // 41px -> 41/13 = 3.153846153846154rem\n }\n margin-bottom: 24px;\n color: ${(props) => props.theme.colors.neutral[700]};\n font-weight: 400;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n `,\n // font-size: 24px/RT | line-height: 31px/RT\n [TYPOGRAPHY_VARIANTS.H2_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '1.5rem'}; // 24px -> 24/16 = 1.5rem\n line-height: ${(props) => props.lineHeight ?? '1.9375rem'}; // 31px -> 31/16 = 1.9375rem\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.846153846153846rem'}; // 24px -> 24/13 = 1.846153846153846rem\n line-height: ${(props) => props.lineHeight ?? '2.384615384615385rem'}; // 31px -> 31/13 = 2.384615384615385rem\n }\n margin-bottom: 12px;\n color: ${(props) => props.theme.colors.neutral[700]};\n font-weight: 400;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n `,\n // font-size: 18px/RT | line-height: 22px/RT\n [TYPOGRAPHY_VARIANTS.H3_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '1.125rem'}; // 18px -> 18/16 = 1.125rem\n line-height: ${(props) => props.lineHeight ?? '1.375rem'}; // 22px -> 22/16 = 1.375rem\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.384615384615385rem'}; // 18px -> 18/13 = 1.384615384615385rem\n line-height: ${(props) => props.lineHeight ?? '1.692307692307692rem'}; // 22px -> 22/13 = 1.692307692307692rem\n }\n padding-bottom: 12px;\n color: ${(props) => props.theme.colors.neutral[700]};\n font-weight: 400;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n `,\n // font-size: 16px/RT | line-height: 20px/RT\n [TYPOGRAPHY_VARIANTS.H4_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '1rem'}; // 16px -> 16/16 = 1rem\n line-height: ${(props) => props.lineHeight ?? '1.25rem'}; // 20px -> 20/16 = 1.25rem\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.230769230769231rem'}; // 16px -> 16/13 = 1.230769230769231rem\n line-height: ${(props) => props.lineHeight ?? '1.538461538461538rem'}; // 20px -> 20/13 = 1.538461538461538rem\n }\n padding-bottom: 4px;\n color: ${(props) => props.theme.colors.neutral[700]};\n font-weight: 600;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n `,\n // font-size: 14px/RT | line-height: 17px/RT\n [TYPOGRAPHY_VARIANTS.H5_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.875rem'}; // 14px -> 14/16 = 0.875rem\n line-height: ${(props) => props.lineHeight ?? '1.0625rem'}; // 17px -> 17/16 = 1.0625rem\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.076923076923077rem'}; // 14px -> 14/13 = 1.076923076923077rem\n line-height: ${(props) => props.lineHeight ?? '1.307692307692308rem'}; // 17px -> 17/13 = 1.307692307692308rem\n }\n margin-bottom: 4px;\n color: ${(props) => props.theme.colors.neutral[700]};\n font-weight: 600;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n `,\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AACpB,SAAS,2BAA2B;AAKpC,MAAM,WAAW,MAAM;AAWhB,MAAM,8BAAqD;AAAA;AAAA,EAEhE,CAAC,oBAAoB,UAAU,GAAG;AAAA,iBACnB,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,CAAC,UAAU,MAAM,cAAc,WAAW;AAAA,yBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrD,CAAC,oBAAoB,UAAU,GAAG;AAAA,iBACnB,CAAC,UAAU,MAAM,YAAY,QAAQ;AAAA,mBACnC,CAAC,UAAU,MAAM,cAAc,WAAW;AAAA,yBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrD,CAAC,oBAAoB,UAAU,GAAG;AAAA,iBACnB,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,CAAC,UAAU,MAAM,cAAc,UAAU;AAAA,yBACnC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrD,CAAC,oBAAoB,UAAU,GAAG;AAAA,iBACnB,CAAC,UAAU,MAAM,YAAY,MAAM;AAAA,mBACjC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA,yBAClC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrD,CAAC,oBAAoB,UAAU,GAAG;AAAA,iBACnB,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,CAAC,UAAU,MAAM,cAAc,WAAW;AAAA,yBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAKvD;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\nimport { typographyFontFamily } from '../typographyFontFamily.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype ArticleHeadingsCSSMap = {\n [key in DSTypographyT.ArticleHeadingVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_CSS_HEADER_ARTICLE: ArticleHeadingsCSSMap = {\n // font-size: 34px/RT | line-height: 41px/RT\n [TYPOGRAPHY_VARIANTS.H1_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '2.125rem'}; // 34px -> 34/16 = 2.125rem\n line-height: ${(props) => props.lineHeight ?? '2.5625rem'}; // 41px -> 41/16 = 2.5625rem\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '2.615384615384615rem'}; // 34px -> 34/13 = 2.615384615384615rem\n line-height: ${(props) => props.lineHeight ?? '3.153846153846154rem'}; // 41px -> 41/13 = 3.153846153846154rem\n }\n margin-bottom: 24px;\n color: ${(props) => props.theme.colors.neutral[700]};\n font-weight: 400;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n `,\n // font-size: 24px/RT | line-height: 31px/RT\n [TYPOGRAPHY_VARIANTS.H2_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '1.5rem'}; // 24px -> 24/16 = 1.5rem\n line-height: ${(props) => props.lineHeight ?? '1.9375rem'}; // 31px -> 31/16 = 1.9375rem\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.846153846153846rem'}; // 24px -> 24/13 = 1.846153846153846rem\n line-height: ${(props) => props.lineHeight ?? '2.384615384615385rem'}; // 31px -> 31/13 = 2.384615384615385rem\n }\n margin-bottom: 12px;\n color: ${(props) => props.theme.colors.neutral[700]};\n font-weight: 400;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n `,\n // font-size: 18px/RT | line-height: 22px/RT\n [TYPOGRAPHY_VARIANTS.H3_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '1.125rem'}; // 18px -> 18/16 = 1.125rem\n line-height: ${(props) => props.lineHeight ?? '1.375rem'}; // 22px -> 22/16 = 1.375rem\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.384615384615385rem'}; // 18px -> 18/13 = 1.384615384615385rem\n line-height: ${(props) => props.lineHeight ?? '1.692307692307692rem'}; // 22px -> 22/13 = 1.692307692307692rem\n }\n padding-bottom: 12px;\n color: ${(props) => props.theme.colors.neutral[700]};\n font-weight: 400;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n `,\n // font-size: 16px/RT | line-height: 20px/RT\n [TYPOGRAPHY_VARIANTS.H4_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '1rem'}; // 16px -> 16/16 = 1rem\n line-height: ${(props) => props.lineHeight ?? '1.25rem'}; // 20px -> 20/16 = 1.25rem\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.230769230769231rem'}; // 16px -> 16/13 = 1.230769230769231rem\n line-height: ${(props) => props.lineHeight ?? '1.538461538461538rem'}; // 20px -> 20/13 = 1.538461538461538rem\n }\n padding-bottom: 4px;\n color: ${(props) => props.theme.colors.neutral[700]};\n font-weight: 600;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n `,\n // font-size: 14px/RT | line-height: 17px/RT\n [TYPOGRAPHY_VARIANTS.H5_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.875rem'}; // 14px -> 14/16 = 0.875rem\n line-height: ${(props) => props.lineHeight ?? '1.0625rem'}; // 17px -> 17/16 = 1.0625rem\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.076923076923077rem'}; // 14px -> 14/13 = 1.076923076923077rem\n line-height: ${(props) => props.lineHeight ?? '1.307692307692308rem'}; // 17px -> 17/13 = 1.307692307692308rem\n }\n margin-bottom: 4px;\n color: ${(props) => props.theme.colors.neutral[700]};\n font-weight: 600;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n `,\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AACpB,SAAS,2BAA2B;AAEpC,SAAS,4BAA4B;AAIrC,MAAM,WAAW,MAAM;AAWhB,MAAM,8BAAqD;AAAA;AAAA,EAEhE,CAAC,oBAAoB,UAAU,GAAG;AAAA,MAC9B,oBAAoB;AAAA,iBACT,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,CAAC,UAAU,MAAM,cAAc,WAAW;AAAA,yBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrD,CAAC,oBAAoB,UAAU,GAAG;AAAA,MAC9B,oBAAoB;AAAA,iBACT,CAAC,UAAU,MAAM,YAAY,QAAQ;AAAA,mBACnC,CAAC,UAAU,MAAM,cAAc,WAAW;AAAA,yBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrD,CAAC,oBAAoB,UAAU,GAAG;AAAA,MAC9B,oBAAoB;AAAA,iBACT,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,CAAC,UAAU,MAAM,cAAc,UAAU;AAAA,yBACnC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrD,CAAC,oBAAoB,UAAU,GAAG;AAAA,MAC9B,oBAAoB;AAAA,iBACT,CAAC,UAAU,MAAM,YAAY,MAAM;AAAA,mBACjC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA,yBAClC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrD,CAAC,oBAAoB,UAAU,GAAG;AAAA,MAC9B,oBAAoB;AAAA,iBACT,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,CAAC,UAAU,MAAM,cAAc,WAAW;AAAA,yBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAKvD;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/variants/header.js CHANGED
@@ -1,9 +1,11 @@
1
1
  import * as React from "react";
2
2
  import { css } from "@elliemae/ds-system";
3
3
  import { TYPOGRAPHY_VARIANTS } from "../../constants/index.js";
4
+ import { typographyFontFamily } from "../typographyFontFamily.js";
4
5
  const typedCss = () => css``;
5
6
  const VARIANTS_CSS_HEADER = {
6
7
  [TYPOGRAPHY_VARIANTS.H1]: css`
8
+ ${typographyFontFamily}
7
9
  font-size: ${(props) => props.fontSize ?? "2.12875rem"};
8
10
  line-height: ${(props) => props.lineHeight ?? "2.5593749999999997rem"};
9
11
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -13,6 +15,7 @@ const VARIANTS_CSS_HEADER = {
13
15
  font-weight: 400;
14
16
  `,
15
17
  [TYPOGRAPHY_VARIANTS.H2]: css`
18
+ ${typographyFontFamily}
16
19
  font-size: ${(props) => props.fontSize ?? "1.503125rem"};
17
20
  line-height: ${(props) => props.lineHeight ?? "1.9337499999999999rem"};
18
21
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -22,6 +25,7 @@ const VARIANTS_CSS_HEADER = {
22
25
  font-weight: 400;
23
26
  `,
24
27
  [TYPOGRAPHY_VARIANTS.H3]: css`
28
+ ${typographyFontFamily}
25
29
  font-size: ${(props) => props.fontSize ?? "1.1212499999999999rem"};
26
30
  line-height: ${(props) => props.lineHeight ?? "1.373125rem"};
27
31
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -31,6 +35,7 @@ const VARIANTS_CSS_HEADER = {
31
35
  font-weight: 400;
32
36
  `,
33
37
  [TYPOGRAPHY_VARIANTS.H4]: css`
38
+ ${typographyFontFamily}
34
39
  font-size: ${(props) => props.fontSize ?? "0.999375rem"};
35
40
  line-height: ${(props) => props.lineHeight ?? "1.25125rem"};
36
41
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -40,6 +45,7 @@ const VARIANTS_CSS_HEADER = {
40
45
  font-weight: 400;
41
46
  `,
42
47
  [TYPOGRAPHY_VARIANTS.H5]: css`
48
+ ${typographyFontFamily}
43
49
  font-size: ${(props) => props.fontSize ?? "0.8775000000000001rem"};
44
50
  line-height: ${(props) => props.lineHeight ?? "1.064375rem"};
45
51
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -49,6 +55,7 @@ const VARIANTS_CSS_HEADER = {
49
55
  font-weight: 400;
50
56
  `,
51
57
  [TYPOGRAPHY_VARIANTS.H5_STRONG]: css`
58
+ ${typographyFontFamily}
52
59
  font-size: ${(props) => props.fontSize ?? "0.8775000000000001rem"};
53
60
  line-height: ${(props) => props.lineHeight ?? "1.064375rem"};
54
61
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -58,6 +65,7 @@ const VARIANTS_CSS_HEADER = {
58
65
  font-weight: 600;
59
66
  `,
60
67
  [TYPOGRAPHY_VARIANTS.H4_STRONG]: css`
68
+ ${typographyFontFamily}
61
69
  font-size: ${(props) => props.fontSize ?? "0.999375rem"};
62
70
  line-height: ${(props) => props.lineHeight ?? "1.25125rem"};
63
71
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -67,6 +75,7 @@ const VARIANTS_CSS_HEADER = {
67
75
  font-weight: 600;
68
76
  `,
69
77
  [TYPOGRAPHY_VARIANTS.H3_STRONG]: css`
78
+ ${typographyFontFamily}
70
79
  font-size: ${(props) => props.fontSize ?? "1.1212499999999999rem"};
71
80
  line-height: ${(props) => props.lineHeight ?? "1.373125rem"};
72
81
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
package/dist/esm/parts/variants/header.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/variants/header.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype HeadingCSSMap = {\n [key in DSTypographyT.HeadingVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_CSS_HEADER: HeadingCSSMap = {\n [TYPOGRAPHY_VARIANTS.H1]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '2.12875rem'};\n line-height: ${(props) => props.lineHeight ?? '2.5593749999999997rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '2.62rem'};\n line-height: ${(props) => props.lineHeight ?? '3.15rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H2]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '1.503125rem'};\n line-height: ${(props) => props.lineHeight ?? '1.9337499999999999rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.85rem'};\n line-height: ${(props) => props.lineHeight ?? '2.38rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H3]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '1.1212499999999999rem'};\n line-height: ${(props) => props.lineHeight ?? '1.373125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.38rem'};\n line-height: ${(props) => props.lineHeight ?? '1.69rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H4]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.999375rem'};\n line-height: ${(props) => props.lineHeight ?? '1.25125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.23rem'};\n line-height: ${(props) => props.lineHeight ?? '1.54rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H5]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.08rem'};\n line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H5_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.08rem'};\n line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n }\n font-weight: 600;\n `,\n [TYPOGRAPHY_VARIANTS.H4_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.999375rem'};\n line-height: ${(props) => props.lineHeight ?? '1.25125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.23rem'};\n line-height: ${(props) => props.lineHeight ?? '1.54rem'};\n }\n font-weight: 600;\n `,\n [TYPOGRAPHY_VARIANTS.H3_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '1.1212499999999999rem'};\n line-height: ${(props) => props.lineHeight ?? '1.373125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.38rem'};\n line-height: ${(props) => props.lineHeight ?? '1.69rem'};\n }\n font-weight: 600;\n `,\n};\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\nimport { typographyFontFamily } from '../typographyFontFamily.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype HeadingCSSMap = {\n [key in DSTypographyT.HeadingVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_CSS_HEADER: HeadingCSSMap = {\n [TYPOGRAPHY_VARIANTS.H1]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '2.12875rem'};\n line-height: ${(props) => props.lineHeight ?? '2.5593749999999997rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '2.62rem'};\n line-height: ${(props) => props.lineHeight ?? '3.15rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H2]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '1.503125rem'};\n line-height: ${(props) => props.lineHeight ?? '1.9337499999999999rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.85rem'};\n line-height: ${(props) => props.lineHeight ?? '2.38rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H3]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '1.1212499999999999rem'};\n line-height: ${(props) => props.lineHeight ?? '1.373125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.38rem'};\n line-height: ${(props) => props.lineHeight ?? '1.69rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H4]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.999375rem'};\n line-height: ${(props) => props.lineHeight ?? '1.25125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.23rem'};\n line-height: ${(props) => props.lineHeight ?? '1.54rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H5]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.08rem'};\n line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H5_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.08rem'};\n line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n }\n font-weight: 600;\n `,\n [TYPOGRAPHY_VARIANTS.H4_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.999375rem'};\n line-height: ${(props) => props.lineHeight ?? '1.25125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.23rem'};\n line-height: ${(props) => props.lineHeight ?? '1.54rem'};\n }\n font-weight: 600;\n `,\n [TYPOGRAPHY_VARIANTS.H3_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '1.1212499999999999rem'};\n line-height: ${(props) => props.lineHeight ?? '1.373125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.38rem'};\n line-height: ${(props) => props.lineHeight ?? '1.69rem'};\n }\n font-weight: 600;\n `,\n};\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/variants/highlight.js CHANGED
@@ -1,9 +1,11 @@
1
1
  import * as React from "react";
2
2
  import { css } from "@elliemae/ds-system";
3
3
  import { TYPOGRAPHY_VARIANTS } from "../../constants/index.js";
4
+ import { typographyFontFamily } from "../typographyFontFamily.js";
4
5
  const typedCss = () => css``;
5
6
  const VARIANTS_CSS_HIGHLIGHT = {
6
7
  [TYPOGRAPHY_VARIANTS.HIGHLIGHT_NEUTRAL]: css`
8
+ ${typographyFontFamily}
7
9
  padding: 0px 4px;
8
10
  margin: 0px 1px;
9
11
  border-radius: 4px;
@@ -11,6 +13,7 @@ const VARIANTS_CSS_HIGHLIGHT = {
11
13
  color: ${(props) => props.theme.colors.neutral[600]};
12
14
  `,
13
15
  [TYPOGRAPHY_VARIANTS.HIGHLIGHT_BRAND]: css`
16
+ ${typographyFontFamily}
14
17
  padding: 0px 4px;
15
18
  margin: 0px 1px;
16
19
  border-radius: 4px;
@@ -18,6 +21,7 @@ const VARIANTS_CSS_HIGHLIGHT = {
18
21
  color: ${(props) => props.theme.colors.brand[800]};
19
22
  `,
20
23
  [TYPOGRAPHY_VARIANTS.HIGHLIGHT_IMPORTANT]: css`
24
+ ${typographyFontFamily}
21
25
  padding: 0px 4px;
22
26
  margin: 0px 1px;
23
27
  border-radius: 4px;
@@ -25,6 +29,7 @@ const VARIANTS_CSS_HIGHLIGHT = {
25
29
  color: ${(props) => props.theme.colors.warning[950]};
26
30
  `,
27
31
  [TYPOGRAPHY_VARIANTS.HIGHLIGHT_CRITICAL]: css`
32
+ ${typographyFontFamily}
28
33
  padding: 0px 4px;
29
34
  margin: 0px 1px;
30
35
  border-radius: 4px;
package/dist/esm/parts/variants/highlight.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/variants/highlight.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype HighlightCSSMap = {\n [key in DSTypographyT.HighlightVariants]: ReturnType<typeof typedCss>;\n};\n\nexport const VARIANTS_CSS_HIGHLIGHT: HighlightCSSMap = {\n [TYPOGRAPHY_VARIANTS.HIGHLIGHT_NEUTRAL]: css<DSTypographyT.StyledPropsInterface>`\n padding: 0px 4px;\n margin: 0px 1px;\n border-radius: 4px;\n background-color: ${(props) => props.theme.colors.neutral['050']};\n color: ${(props) => props.theme.colors.neutral[600]};\n `,\n [TYPOGRAPHY_VARIANTS.HIGHLIGHT_BRAND]: css<DSTypographyT.StyledPropsInterface>`\n padding: 0px 4px;\n margin: 0px 1px;\n border-radius: 4px;\n background-color: ${(props) => props.theme.colors.brand[200]};\n color: ${(props) => props.theme.colors.brand[800]};\n `,\n [TYPOGRAPHY_VARIANTS.HIGHLIGHT_IMPORTANT]: css<DSTypographyT.StyledPropsInterface>`\n padding: 0px 4px;\n margin: 0px 1px;\n border-radius: 4px;\n background-color: ${(props) => props.theme.colors.warning[400]};\n color: ${(props) => props.theme.colors.warning[950]};\n `,\n [TYPOGRAPHY_VARIANTS.HIGHLIGHT_CRITICAL]: css<DSTypographyT.StyledPropsInterface>`\n padding: 0px 4px;\n margin: 0px 1px;\n border-radius: 4px;\n background-color: ${(props) => props.theme.colors.danger[400]};\n color: ${(props) => props.theme.colors.danger[950]};\n `,\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AACpB,SAAS,2BAA2B;AAKpC,MAAM,WAAW,MAAM;AAKhB,MAAM,yBAA0C;AAAA,EACrD,CAAC,oBAAoB,iBAAiB,GAAG;AAAA;AAAA;AAAA;AAAA,wBAInB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,aACvD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,EAErD,CAAC,oBAAoB,eAAe,GAAG;AAAA;AAAA;AAAA;AAAA,wBAIjB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,aACnD,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,EAEnD,CAAC,oBAAoB,mBAAmB,GAAG;AAAA;AAAA;AAAA;AAAA,wBAIrB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,aACrD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,EAErD,CAAC,oBAAoB,kBAAkB,GAAG;AAAA;AAAA;AAAA;AAAA,wBAIpB,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA,aACpD,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAEtD;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\nimport { typographyFontFamily } from '../typographyFontFamily.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype HighlightCSSMap = {\n [key in DSTypographyT.HighlightVariants]: ReturnType<typeof typedCss>;\n};\n\nexport const VARIANTS_CSS_HIGHLIGHT: HighlightCSSMap = {\n [TYPOGRAPHY_VARIANTS.HIGHLIGHT_NEUTRAL]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n padding: 0px 4px;\n margin: 0px 1px;\n border-radius: 4px;\n background-color: ${(props) => props.theme.colors.neutral['050']};\n color: ${(props) => props.theme.colors.neutral[600]};\n `,\n [TYPOGRAPHY_VARIANTS.HIGHLIGHT_BRAND]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n padding: 0px 4px;\n margin: 0px 1px;\n border-radius: 4px;\n background-color: ${(props) => props.theme.colors.brand[200]};\n color: ${(props) => props.theme.colors.brand[800]};\n `,\n [TYPOGRAPHY_VARIANTS.HIGHLIGHT_IMPORTANT]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n padding: 0px 4px;\n margin: 0px 1px;\n border-radius: 4px;\n background-color: ${(props) => props.theme.colors.warning[400]};\n color: ${(props) => props.theme.colors.warning[950]};\n `,\n [TYPOGRAPHY_VARIANTS.HIGHLIGHT_CRITICAL]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n padding: 0px 4px;\n margin: 0px 1px;\n border-radius: 4px;\n background-color: ${(props) => props.theme.colors.danger[400]};\n color: ${(props) => props.theme.colors.danger[950]};\n `,\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AACpB,SAAS,2BAA2B;AAEpC,SAAS,4BAA4B;AAIrC,MAAM,WAAW,MAAM;AAKhB,MAAM,yBAA0C;AAAA,EACrD,CAAC,oBAAoB,iBAAiB,GAAG;AAAA,MACrC,oBAAoB;AAAA;AAAA;AAAA;AAAA,wBAIF,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,aACvD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,EAErD,CAAC,oBAAoB,eAAe,GAAG;AAAA,MACnC,oBAAoB;AAAA;AAAA;AAAA;AAAA,wBAIF,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,aACnD,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,EAEnD,CAAC,oBAAoB,mBAAmB,GAAG;AAAA,MACvC,oBAAoB;AAAA;AAAA;AAAA;AAAA,wBAIF,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,aACrD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,EAErD,CAAC,oBAAoB,kBAAkB,GAAG;AAAA,MACtC,oBAAoB;AAAA;AAAA;AAAA;AAAA,wBAIF,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA,aACpD,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAEtD;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/variants/link.js CHANGED
@@ -1,9 +1,11 @@
1
1
  import * as React from "react";
2
2
  import { css } from "@elliemae/ds-system";
3
3
  import { TYPOGRAPHY_VARIANTS } from "../../constants/index.js";
4
+ import { typographyFontFamily } from "../typographyFontFamily.js";
4
5
  const typedCss = () => css``;
5
6
  const VARIANTS_LINK = {
6
7
  [TYPOGRAPHY_VARIANTS.LINK]: css`
8
+ ${typographyFontFamily}
7
9
  font-size: ${(props) => props.fontSize ?? "0.8125rem"};
8
10
  line-height: ${(props) => props.lineHeight ?? "1.503125rem"};
9
11
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -26,6 +28,7 @@ const VARIANTS_LINK = {
26
28
  }
27
29
  `,
28
30
  [TYPOGRAPHY_VARIANTS.LINK_SML_TITLE]: css`
31
+ ${typographyFontFamily}
29
32
  font-size: ${(props) => props.fontSize ?? "0.875rem"};
30
33
  line-height: ${(props) => props.lineHeight ?? "1.503125rem"};
31
34
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -48,6 +51,7 @@ const VARIANTS_LINK = {
48
51
  }
49
52
  `,
50
53
  [TYPOGRAPHY_VARIANTS.LINK_MED_TITLE]: css`
54
+ ${typographyFontFamily}
51
55
  font-size: ${(props) => props.fontSize ?? "1rem"};
52
56
  line-height: ${(props) => props.lineHeight ?? "1.503125rem"};
53
57
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -70,6 +74,7 @@ const VARIANTS_LINK = {
70
74
  }
71
75
  `,
72
76
  [TYPOGRAPHY_VARIANTS.LINK_LRG_TITLE]: css`
77
+ ${typographyFontFamily}
73
78
  font-size: ${(props) => props.fontSize ?? "1.125rem"};
74
79
  line-height: ${(props) => props.lineHeight ?? "1.503125rem"};
75
80
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
package/dist/esm/parts/variants/link.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/variants/link.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype LinkCSSMap = {\n [key in DSTypographyT.LinkVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_LINK: LinkCSSMap = {\n [TYPOGRAPHY_VARIANTS.LINK]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1rem'};\n line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n }\n text-decoration: underline;\n color: ${(props) => props.theme.colors.brand[600]};\n display: inline-block;\n text-align: left;\n cursor: pointer;\n &:hover {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n &:active {\n color: ${(props) => props.theme.colors.brand[800]};\n }\n &:focus {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n `,\n [TYPOGRAPHY_VARIANTS.LINK_SML_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.875rem'};\n line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.077rem'};\n line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n }\n text-decoration: underline;\n color: ${(props) => props.theme.colors.brand[600]};\n display: inline-block;\n text-align: left;\n cursor: pointer;\n &:hover {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n &:active {\n color: ${(props) => props.theme.colors.brand[800]};\n }\n &:focus {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n `,\n [TYPOGRAPHY_VARIANTS.LINK_MED_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '1rem'};\n line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.231rem'};\n line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n }\n text-decoration: underline;\n color: ${(props) => props.theme.colors.brand[600]};\n display: inline-block;\n text-align: left;\n cursor: pointer;\n &:hover {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n &:active {\n color: ${(props) => props.theme.colors.brand[800]};\n }\n &:focus {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n `,\n [TYPOGRAPHY_VARIANTS.LINK_LRG_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '1.125rem'};\n line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.385rem'};\n line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n }\n text-decoration: underline;\n color: ${(props) => props.theme.colors.brand[600]};\n display: inline-block;\n text-align: left;\n cursor: pointer;\n &:hover {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n &:active {\n color: ${(props) => props.theme.colors.brand[800]};\n }\n &:focus {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n `,\n};\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport { typographyFontFamily } from '../typographyFontFamily.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype LinkCSSMap = {\n [key in DSTypographyT.LinkVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_LINK: LinkCSSMap = {\n [TYPOGRAPHY_VARIANTS.LINK]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1rem'};\n line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n }\n text-decoration: underline;\n color: ${(props) => props.theme.colors.brand[600]};\n display: inline-block;\n text-align: left;\n cursor: pointer;\n &:hover {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n &:active {\n color: ${(props) => props.theme.colors.brand[800]};\n }\n &:focus {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n `,\n [TYPOGRAPHY_VARIANTS.LINK_SML_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.875rem'};\n line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.077rem'};\n line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n }\n text-decoration: underline;\n color: ${(props) => props.theme.colors.brand[600]};\n display: inline-block;\n text-align: left;\n cursor: pointer;\n &:hover {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n &:active {\n color: ${(props) => props.theme.colors.brand[800]};\n }\n &:focus {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n `,\n [TYPOGRAPHY_VARIANTS.LINK_MED_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '1rem'};\n line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.231rem'};\n line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n }\n text-decoration: underline;\n color: ${(props) => props.theme.colors.brand[600]};\n display: inline-block;\n text-align: left;\n cursor: pointer;\n &:hover {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n &:active {\n color: ${(props) => props.theme.colors.brand[800]};\n }\n &:focus {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n `,\n [TYPOGRAPHY_VARIANTS.LINK_LRG_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '1.125rem'};\n line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.385rem'};\n line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n }\n text-decoration: underline;\n color: ${(props) => props.theme.colors.brand[600]};\n display: inline-block;\n text-align: left;\n cursor: pointer;\n &:hover {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n &:active {\n color: ${(props) => props.theme.colors.brand[800]};\n }\n &:focus {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n `,\n};\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/variants/quote.js CHANGED
@@ -1,10 +1,12 @@
1
1
  import * as React from "react";
2
2
  import { css } from "@elliemae/ds-system";
3
3
  import { TYPOGRAPHY_VARIANTS } from "../../constants/index.js";
4
+ import { typographyFontFamily } from "../typographyFontFamily.js";
4
5
  const typedCss = () => css``;
5
6
  const VARIANTS_CSS_QUOTE = {
6
7
  // font-size: 18px/RT | line-height: 28px/RT
7
8
  [TYPOGRAPHY_VARIANTS.QUOTE_NEUTRAL]: css`
9
+ ${typographyFontFamily}
8
10
  font-size: ${(props) => props.fontSize ?? "1.125rem"}; // 18px -> 18/16 = 1.125rem
9
11
  line-height: ${(props) => props.lineHeight ?? "1.75rem"}; // 28px -> 28/16 = 1.75rem
10
12
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -23,6 +25,7 @@ const VARIANTS_CSS_QUOTE = {
23
25
  `,
24
26
  // font-size: 18px/RT | line-height: 28px/RT
25
27
  [TYPOGRAPHY_VARIANTS.QUOTE_BRAND]: css`
28
+ ${typographyFontFamily}
26
29
  font-size: ${(props) => props.fontSize ?? "1.125rem"}; // 18px -> 18/16 = 1.125rem
27
30
  line-height: ${(props) => props.lineHeight ?? "1.75rem"}; // 28px -> 28/16 = 1.75rem
28
31
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
package/dist/esm/parts/variants/quote.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/variants/quote.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype QuoteCSSMap = {\n [key in DSTypographyT.QuoteVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_CSS_QUOTE: QuoteCSSMap = {\n // font-size: 18px/RT | line-height: 28px/RT\n [TYPOGRAPHY_VARIANTS.QUOTE_NEUTRAL]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '1.125rem'}; // 18px -> 18/16 = 1.125rem\n line-height: ${(props) => props.lineHeight ?? '1.75rem'}; // 28px -> 28/16 = 1.75rem\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.384615384615385rem'}; // 18px -> 18/13 = 1.384615384615385rem\n line-height: ${(props) => props.lineHeight ?? '2.153846153846154rem'}; // 28px -> 28/13 = 2.153846153846154rem\n }\n padding: 16px;\n margin-bottom: 24px;\n color: ${(props) => props.theme.colors.neutral[600]};\n background-color: ${(props) => props.theme.colors.neutral['050']};\n border-radius: 4px;\n font-weight: 400;\n font-style: italic;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n `,\n // font-size: 18px/RT | line-height: 28px/RT\n [TYPOGRAPHY_VARIANTS.QUOTE_BRAND]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '1.125rem'}; // 18px -> 18/16 = 1.125rem\n line-height: ${(props) => props.lineHeight ?? '1.75rem'}; // 28px -> 28/16 = 1.75rem\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.384615384615385rem'}; // 18px -> 18/13 = 1.384615384615385rem\n line-height: ${(props) => props.lineHeight ?? '2.153846153846154rem'}; // 28px -> 28/13 = 2.153846153846154rem\n }\n padding: 24px;\n margin-bottom: 24px;\n color: ${(props) => props.theme.colors.brand[700]};\n background-color: ${(props) => props.theme.colors.brand[200]};\n border-radius: 4px;\n font-weight: 400;\n font-style: italic;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n `,\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AACpB,SAAS,2BAA2B;AAKpC,MAAM,WAAW,MAAM;AAWhB,MAAM,qBAAkC;AAAA;AAAA,EAE7C,CAAC,oBAAoB,aAAa,GAAG;AAAA,iBACtB,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA,yBAClC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA;AAAA,aAI7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,wBAC/B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQlE,CAAC,oBAAoB,WAAW,GAAG;AAAA,iBACpB,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA,yBAClC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA;AAAA,aAI7D,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,wBAC7B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhE;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\nimport { typographyFontFamily } from '../typographyFontFamily.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype QuoteCSSMap = {\n [key in DSTypographyT.QuoteVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_CSS_QUOTE: QuoteCSSMap = {\n // font-size: 18px/RT | line-height: 28px/RT\n [TYPOGRAPHY_VARIANTS.QUOTE_NEUTRAL]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '1.125rem'}; // 18px -> 18/16 = 1.125rem\n line-height: ${(props) => props.lineHeight ?? '1.75rem'}; // 28px -> 28/16 = 1.75rem\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.384615384615385rem'}; // 18px -> 18/13 = 1.384615384615385rem\n line-height: ${(props) => props.lineHeight ?? '2.153846153846154rem'}; // 28px -> 28/13 = 2.153846153846154rem\n }\n padding: 16px;\n margin-bottom: 24px;\n color: ${(props) => props.theme.colors.neutral[600]};\n background-color: ${(props) => props.theme.colors.neutral['050']};\n border-radius: 4px;\n font-weight: 400;\n font-style: italic;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n `,\n // font-size: 18px/RT | line-height: 28px/RT\n [TYPOGRAPHY_VARIANTS.QUOTE_BRAND]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '1.125rem'}; // 18px -> 18/16 = 1.125rem\n line-height: ${(props) => props.lineHeight ?? '1.75rem'}; // 28px -> 28/16 = 1.75rem\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.384615384615385rem'}; // 18px -> 18/13 = 1.384615384615385rem\n line-height: ${(props) => props.lineHeight ?? '2.153846153846154rem'}; // 28px -> 28/13 = 2.153846153846154rem\n }\n padding: 24px;\n margin-bottom: 24px;\n color: ${(props) => props.theme.colors.brand[700]};\n background-color: ${(props) => props.theme.colors.brand[200]};\n border-radius: 4px;\n font-weight: 400;\n font-style: italic;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n `,\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AACpB,SAAS,2BAA2B;AAEpC,SAAS,4BAA4B;AAIrC,MAAM,WAAW,MAAM;AAWhB,MAAM,qBAAkC;AAAA;AAAA,EAE7C,CAAC,oBAAoB,aAAa,GAAG;AAAA,MACjC,oBAAoB;AAAA,iBACT,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA,yBAClC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA;AAAA,aAI7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,wBAC/B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQlE,CAAC,oBAAoB,WAAW,GAAG;AAAA,MAC/B,oBAAoB;AAAA,iBACT,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA,yBAClC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA;AAAA,aAI7D,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,wBAC7B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhE;",
6
6
  "names": []
7
7
  }
package/dist/types/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export { DSTypography, DSTypographyWithSchema } from './Typography.js';
2
2
  export { TYPOGRAPHY_VARIANTS, TYPOGRAPHY_SLOTS, TYPOGRAPHY_DATA_TESTID, DSTypographyName } from './constants/index.js';
3
3
  export type { DSTypographyT } from './react-desc-prop-types.js';
4
+ export { VARIANTS_CSS_BODY } from './parts/variants/body.js';
package/dist/types/parts/styled.d.ts CHANGED
@@ -1,2 +1,4 @@
1
1
  import type { DSTypographyT } from '../react-desc-prop-types.js';
2
+ import { typographyFontFamily } from './typographyFontFamily.js';
3
+ export { typographyFontFamily };
2
4
  export declare const StyledTypography: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, DSTypographyT.StyledPropsInterface, string | number | symbol>;
package/dist/types/parts/typographyFontFamily.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const typographyFontFamily: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("@xstyled/system").Theme>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-typography",
3
- "version": "3.70.0-next.37",
3
+ "version": "3.70.0-next.39",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Typography",
6
6
  "files": [
@@ -38,17 +38,17 @@
38
38
  "dependencies": {
39
39
  "@xstyled/system": "~3.8.1",
40
40
  "@xstyled/util": "~3.7.0",
41
- "@elliemae/ds-props-helpers": "3.70.0-next.37",
42
- "@elliemae/ds-typescript-helpers": "3.70.0-next.37",
43
- "@elliemae/ds-system": "3.70.0-next.37"
41
+ "@elliemae/ds-props-helpers": "3.70.0-next.39",
42
+ "@elliemae/ds-system": "3.70.0-next.39",
43
+ "@elliemae/ds-typescript-helpers": "3.70.0-next.39"
44
44
  },
45
45
  "devDependencies": {
46
46
  "jest": "^30.0.0",
47
47
  "react": "^18.3.1",
48
48
  "react-dom": "^18.3.1",
49
49
  "react-test-renderer": "^18.3.1",
50
- "@elliemae/ds-monorepo-devops": "3.70.0-next.37",
51
- "@elliemae/ds-test-utils": "3.70.0-next.37"
50
+ "@elliemae/ds-monorepo-devops": "3.70.0-next.39",
51
+ "@elliemae/ds-test-utils": "3.70.0-next.39"
52
52
  },
53
53
  "peerDependencies": {
54
54
  "@testing-library/jest-dom": "^6.6.3",