@elliemae/ds-typography 3.14.0-rc.4 → 3.14.0-rc.5

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.
@@ -25,7 +25,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
25
25
  var styled_exports = {};
26
26
  __export(styled_exports, {
27
27
  StyledTypography: () => StyledTypography,
28
- styleMap: () => styleMap
28
+ styleMap: () => styleMap,
29
+ styleMapMobile: () => styleMapMobile
29
30
  });
30
31
  module.exports = __toCommonJS(styled_exports);
31
32
  var React = __toESM(require("react"));
@@ -77,46 +78,99 @@ const styleMap = {
77
78
  lineHeight: "1.85rem"
78
79
  }
79
80
  };
81
+ const styleMapMobile = {
82
+ h1: { fontSize: "2.12875rem", lineHeight: "2.5593749999999997rem" },
83
+ h2: { fontSize: "1.503125rem", lineHeight: "1.9337499999999999rem" },
84
+ h3: { fontSize: "1.1212499999999999rem", lineHeight: "1.373125rem" },
85
+ h4: { fontSize: "0.999375rem", lineHeight: "1.25125rem" },
86
+ h5: { fontSize: "0.8775000000000001rem", lineHeight: "1.064375rem" },
87
+ b1: { fontSize: "0.8775000000000001rem", lineHeight: "1.1212499999999999rem" },
88
+ b2: { fontSize: "0.8125rem", lineHeight: "1.064375rem" },
89
+ b3: { fontSize: "0.7475rem", lineHeight: "0.999375rem" },
90
+ b4: { fontSize: "0.6906249999999999rem", lineHeight: "0.8125rem" },
91
+ button: { fontSize: "0.8125rem", lineHeight: "1.503125rem" },
92
+ link: { fontSize: "0.8125rem", lineHeight: "1.503125rem" }
93
+ };
80
94
  const mapper = {
81
95
  h1: import_ds_system.css`
82
- font-size: ${styleMap.h1.fontSize};
83
- line-height: ${styleMap.h1.lineHeight};
96
+ font-size: ${styleMapMobile.h1.fontSize};
97
+ line-height: ${styleMapMobile.h1.lineHeight};
98
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
99
+ font-size: ${styleMap.h1.fontSize};
100
+ line-height: ${styleMap.h1.lineHeight};
101
+ }
84
102
  `,
85
103
  h2: import_ds_system.css`
86
- font-size: ${styleMap.h2.fontSize};
87
- line-height: ${styleMap.h2.lineHeight};
104
+ font-size: ${styleMapMobile.h2.fontSize};
105
+ line-height: ${styleMapMobile.h2.lineHeight};
106
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
107
+ font-size: ${styleMap.h2.fontSize};
108
+ line-height: ${styleMap.h2.lineHeight};
109
+ }
88
110
  `,
89
111
  h3: import_ds_system.css`
90
- font-size: ${styleMap.h3.fontSize};
91
- line-height: ${styleMap.h3.lineHeight};
112
+ font-size: ${styleMapMobile.h3.fontSize};
113
+ line-height: ${styleMapMobile.h3.lineHeight};
114
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
115
+ font-size: ${styleMap.h3.fontSize};
116
+ line-height: ${styleMap.h3.lineHeight};
117
+ }
92
118
  `,
93
119
  h4: import_ds_system.css`
94
- font-size: ${styleMap.h4.fontSize};
95
- line-height: ${styleMap.h4.lineHeight};
120
+ font-size: ${styleMapMobile.h4.fontSize};
121
+ line-height: ${styleMapMobile.h4.lineHeight};
122
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
123
+ font-size: ${styleMap.h4.fontSize};
124
+ line-height: ${styleMap.h4.lineHeight};
125
+ }
96
126
  `,
97
127
  h5: import_ds_system.css`
98
- font-size: ${styleMap.h5.fontSize};
99
- line-height: ${styleMap.h5.lineHeight};
128
+ font-size: ${styleMapMobile.h5.fontSize};
129
+ line-height: ${styleMapMobile.h5.lineHeight};
130
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
131
+ font-size: ${styleMap.h5.fontSize};
132
+ line-height: ${styleMap.h5.lineHeight};
133
+ }
100
134
  `,
101
135
  b1: import_ds_system.css`
102
- font-size: ${styleMap.b1.fontSize};
103
- line-height: ${styleMap.b1.lineHeight};
136
+ font-size: ${styleMapMobile.b1.fontSize};
137
+ line-height: ${styleMapMobile.b1.lineHeight};
138
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
139
+ font-size: ${styleMap.b1.fontSize};
140
+ line-height: ${styleMap.b1.lineHeight};
141
+ }
104
142
  `,
105
143
  b2: import_ds_system.css`
106
- font-size: ${styleMap.b2.fontSize};
107
- line-height: ${styleMap.b2.lineHeight};
144
+ font-size: ${styleMapMobile.b2.fontSize};
145
+ line-height: ${styleMapMobile.b2.lineHeight};
146
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
147
+ font-size: ${styleMap.b2.fontSize};
148
+ line-height: ${styleMap.b2.lineHeight};
149
+ }
108
150
  `,
109
151
  b3: import_ds_system.css`
110
- font-size: ${styleMap.b3.fontSize};
111
- line-height: ${styleMap.b3.lineHeight};
152
+ font-size: ${styleMapMobile.b3.fontSize};
153
+ line-height: ${styleMapMobile.b3.lineHeight};
154
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
155
+ font-size: ${styleMap.b3.fontSize};
156
+ line-height: ${styleMap.b3.lineHeight};
157
+ }
112
158
  `,
113
159
  b4: import_ds_system.css`
114
- font-size: ${styleMap.b4.fontSize};
115
- line-height: ${styleMap.b4.lineHeight};
160
+ font-size: ${styleMapMobile.b4.fontSize};
161
+ line-height: ${styleMapMobile.b4.lineHeight};
162
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
163
+ font-size: ${styleMap.b4.fontSize};
164
+ line-height: ${styleMap.b4.lineHeight};
165
+ }
116
166
  `,
117
167
  button: import_ds_system.css`
118
- font-size: ${styleMap.button.fontSize};
119
- line-height: ${styleMap.button.lineHeight};
168
+ font-size: ${styleMapMobile.button.fontSize};
169
+ line-height: ${styleMapMobile.button.lineHeight};
170
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
171
+ font-size: ${styleMap.button.fontSize};
172
+ line-height: ${styleMap.button.lineHeight};
173
+ }
120
174
  text-decoration: underline;
121
175
  color: ${(props) => props.theme.colors.brand[600]};
122
176
  background: none;
@@ -135,8 +189,12 @@ const mapper = {
135
189
  }
136
190
  `,
137
191
  link: import_ds_system.css`
138
- font-size: ${styleMap.button.fontSize};
139
- line-height: ${styleMap.button.lineHeight};
192
+ font-size: ${styleMapMobile.button.fontSize};
193
+ line-height: ${styleMapMobile.button.lineHeight};
194
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
195
+ font-size: ${styleMap.button.fontSize};
196
+ line-height: ${styleMap.button.lineHeight};
197
+ }
140
198
  text-decoration: underline;
141
199
  color: ${(props) => props.theme.colors.brand[600]};
142
200
  display: inline-block;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/styled.ts", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSTypographyT } from './react-desc-prop-types';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\n\nexport const styleMap = {\n h1: {\n fontSize: '2.62rem',\n lineHeight: '3.15rem',\n },\n h2: {\n fontSize: '1.85rem',\n lineHeight: '2.38rem',\n },\n h3: {\n fontSize: '1.38rem',\n lineHeight: '1.69rem',\n },\n h4: {\n fontSize: '1.23rem',\n lineHeight: '1.54rem',\n },\n h5: {\n fontSize: '1.08rem',\n lineHeight: '1.31rem',\n },\n b1: {\n fontSize: '1.08rem',\n lineHeight: '1.38rem',\n },\n b2: {\n fontSize: '1rem',\n lineHeight: '1.31rem',\n },\n b3: {\n fontSize: '0.92rem',\n lineHeight: '1.23rem',\n },\n b4: {\n fontSize: '0.85rem',\n lineHeight: '1rem',\n },\n button: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n link: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n};\n\nconst mapper = {\n h1: css`\n font-size: ${styleMap.h1.fontSize};\n line-height: ${styleMap.h1.lineHeight};\n `,\n h2: css`\n font-size: ${styleMap.h2.fontSize};\n line-height: ${styleMap.h2.lineHeight};\n `,\n h3: css`\n font-size: ${styleMap.h3.fontSize};\n line-height: ${styleMap.h3.lineHeight};\n `,\n h4: css`\n font-size: ${styleMap.h4.fontSize};\n line-height: ${styleMap.h4.lineHeight};\n `,\n h5: css`\n font-size: ${styleMap.h5.fontSize};\n line-height: ${styleMap.h5.lineHeight};\n `,\n b1: css`\n font-size: ${styleMap.b1.fontSize};\n line-height: ${styleMap.b1.lineHeight};\n `,\n b2: css`\n font-size: ${styleMap.b2.fontSize};\n line-height: ${styleMap.b2.lineHeight};\n `,\n b3: css`\n font-size: ${styleMap.b3.fontSize};\n line-height: ${styleMap.b3.lineHeight};\n `,\n b4: css`\n font-size: ${styleMap.b4.fontSize};\n line-height: ${styleMap.b4.lineHeight};\n `,\n button: css`\n font-size: ${styleMap.button.fontSize};\n line-height: ${styleMap.button.lineHeight};\n text-decoration: underline;\n color: ${(props) => props.theme.colors.brand[600]};\n background: none;\n border: none;\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 link: css`\n font-size: ${styleMap.button.fontSize};\n line-height: ${styleMap.button.lineHeight};\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\ntype StyleIProp = DSTypographyT.InternalProps & {\n children: DSTypographyT.InternalProps['children'];\n};\n\nexport const StyledTypography = styled('div', {\n name: DSTypographyName,\n slot: DSTypographyDataTestId.TYPOGRAPHY_ELEMENT,\n}).withConfig({\n shouldForwardProp: (prop, defaultValidatorFn) =>\n !['fontSize', 'color', 'as', 'variant'].includes(String(prop)) && defaultValidatorFn(prop),\n})<StyleIProp>`\n margin: 0;\n padding: 0;\n ${(props: StyleIProp) => mapper[props.variant]}\n ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSTypographyT } from './react-desc-prop-types';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\n\nexport const styleMap = {\n h1: {\n fontSize: '2.62rem',\n lineHeight: '3.15rem',\n },\n h2: {\n fontSize: '1.85rem',\n lineHeight: '2.38rem',\n },\n h3: {\n fontSize: '1.38rem',\n lineHeight: '1.69rem',\n },\n h4: {\n fontSize: '1.23rem',\n lineHeight: '1.54rem',\n },\n h5: {\n fontSize: '1.08rem',\n lineHeight: '1.31rem',\n },\n b1: {\n fontSize: '1.08rem',\n lineHeight: '1.38rem',\n },\n b2: {\n fontSize: '1rem',\n lineHeight: '1.31rem',\n },\n b3: {\n fontSize: '0.92rem',\n lineHeight: '1.23rem',\n },\n b4: {\n fontSize: '0.85rem',\n lineHeight: '1rem',\n },\n button: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n link: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n};\n\nexport const styleMapMobile = {\n h1: { fontSize: '2.12875rem', lineHeight: '2.5593749999999997rem' },\n h2: { fontSize: '1.503125rem', lineHeight: '1.9337499999999999rem' },\n h3: { fontSize: '1.1212499999999999rem', lineHeight: '1.373125rem' },\n h4: { fontSize: '0.999375rem', lineHeight: '1.25125rem' },\n h5: { fontSize: '0.8775000000000001rem', lineHeight: '1.064375rem' },\n b1: { fontSize: '0.8775000000000001rem', lineHeight: '1.1212499999999999rem' },\n b2: { fontSize: '0.8125rem', lineHeight: '1.064375rem' },\n b3: { fontSize: '0.7475rem', lineHeight: '0.999375rem' },\n b4: { fontSize: '0.6906249999999999rem', lineHeight: '0.8125rem' },\n button: { fontSize: '0.8125rem', lineHeight: '1.503125rem' },\n link: { fontSize: '0.8125rem', lineHeight: '1.503125rem' },\n};\n\nconst mapper = {\n h1: css`\n font-size: ${styleMapMobile.h1.fontSize};\n line-height: ${styleMapMobile.h1.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${styleMap.h1.fontSize};\n line-height: ${styleMap.h1.lineHeight};\n }\n `,\n h2: css`\n font-size: ${styleMapMobile.h2.fontSize};\n line-height: ${styleMapMobile.h2.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${styleMap.h2.fontSize};\n line-height: ${styleMap.h2.lineHeight};\n }\n `,\n h3: css`\n font-size: ${styleMapMobile.h3.fontSize};\n line-height: ${styleMapMobile.h3.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${styleMap.h3.fontSize};\n line-height: ${styleMap.h3.lineHeight};\n }\n `,\n h4: css`\n font-size: ${styleMapMobile.h4.fontSize};\n line-height: ${styleMapMobile.h4.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${styleMap.h4.fontSize};\n line-height: ${styleMap.h4.lineHeight};\n }\n `,\n h5: css`\n font-size: ${styleMapMobile.h5.fontSize};\n line-height: ${styleMapMobile.h5.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${styleMap.h5.fontSize};\n line-height: ${styleMap.h5.lineHeight};\n }\n `,\n b1: css`\n font-size: ${styleMapMobile.b1.fontSize};\n line-height: ${styleMapMobile.b1.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${styleMap.b1.fontSize};\n line-height: ${styleMap.b1.lineHeight};\n }\n `,\n b2: css`\n font-size: ${styleMapMobile.b2.fontSize};\n line-height: ${styleMapMobile.b2.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${styleMap.b2.fontSize};\n line-height: ${styleMap.b2.lineHeight};\n }\n `,\n b3: css`\n font-size: ${styleMapMobile.b3.fontSize};\n line-height: ${styleMapMobile.b3.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${styleMap.b3.fontSize};\n line-height: ${styleMap.b3.lineHeight};\n }\n `,\n b4: css`\n font-size: ${styleMapMobile.b4.fontSize};\n line-height: ${styleMapMobile.b4.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${styleMap.b4.fontSize};\n line-height: ${styleMap.b4.lineHeight};\n }\n `,\n button: css`\n font-size: ${styleMapMobile.button.fontSize};\n line-height: ${styleMapMobile.button.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${styleMap.button.fontSize};\n line-height: ${styleMap.button.lineHeight};\n }\n text-decoration: underline;\n color: ${(props) => props.theme.colors.brand[600]};\n background: none;\n border: none;\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 link: css`\n font-size: ${styleMapMobile.button.fontSize};\n line-height: ${styleMapMobile.button.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${styleMap.button.fontSize};\n line-height: ${styleMap.button.lineHeight};\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\ntype StyleIProp = DSTypographyT.InternalProps & {\n children: DSTypographyT.InternalProps['children'];\n};\n\nexport const StyledTypography = styled('div', {\n name: DSTypographyName,\n slot: DSTypographyDataTestId.TYPOGRAPHY_ELEMENT,\n}).withConfig({\n shouldForwardProp: (prop, defaultValidatorFn) =>\n !['fontSize', 'color', 'as', 'variant'].includes(String(prop)) && defaultValidatorFn(prop),\n})<StyleIProp>`\n margin: 0;\n padding: 0;\n ${(props: StyleIProp) => mapper[props.variant]}\n ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -47,46 +47,99 @@ const styleMap = {
47
47
  lineHeight: "1.85rem"
48
48
  }
49
49
  };
50
+ const styleMapMobile = {
51
+ h1: { fontSize: "2.12875rem", lineHeight: "2.5593749999999997rem" },
52
+ h2: { fontSize: "1.503125rem", lineHeight: "1.9337499999999999rem" },
53
+ h3: { fontSize: "1.1212499999999999rem", lineHeight: "1.373125rem" },
54
+ h4: { fontSize: "0.999375rem", lineHeight: "1.25125rem" },
55
+ h5: { fontSize: "0.8775000000000001rem", lineHeight: "1.064375rem" },
56
+ b1: { fontSize: "0.8775000000000001rem", lineHeight: "1.1212499999999999rem" },
57
+ b2: { fontSize: "0.8125rem", lineHeight: "1.064375rem" },
58
+ b3: { fontSize: "0.7475rem", lineHeight: "0.999375rem" },
59
+ b4: { fontSize: "0.6906249999999999rem", lineHeight: "0.8125rem" },
60
+ button: { fontSize: "0.8125rem", lineHeight: "1.503125rem" },
61
+ link: { fontSize: "0.8125rem", lineHeight: "1.503125rem" }
62
+ };
50
63
  const mapper = {
51
64
  h1: css`
52
- font-size: ${styleMap.h1.fontSize};
53
- line-height: ${styleMap.h1.lineHeight};
65
+ font-size: ${styleMapMobile.h1.fontSize};
66
+ line-height: ${styleMapMobile.h1.lineHeight};
67
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
68
+ font-size: ${styleMap.h1.fontSize};
69
+ line-height: ${styleMap.h1.lineHeight};
70
+ }
54
71
  `,
55
72
  h2: css`
56
- font-size: ${styleMap.h2.fontSize};
57
- line-height: ${styleMap.h2.lineHeight};
73
+ font-size: ${styleMapMobile.h2.fontSize};
74
+ line-height: ${styleMapMobile.h2.lineHeight};
75
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
76
+ font-size: ${styleMap.h2.fontSize};
77
+ line-height: ${styleMap.h2.lineHeight};
78
+ }
58
79
  `,
59
80
  h3: css`
60
- font-size: ${styleMap.h3.fontSize};
61
- line-height: ${styleMap.h3.lineHeight};
81
+ font-size: ${styleMapMobile.h3.fontSize};
82
+ line-height: ${styleMapMobile.h3.lineHeight};
83
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
84
+ font-size: ${styleMap.h3.fontSize};
85
+ line-height: ${styleMap.h3.lineHeight};
86
+ }
62
87
  `,
63
88
  h4: css`
64
- font-size: ${styleMap.h4.fontSize};
65
- line-height: ${styleMap.h4.lineHeight};
89
+ font-size: ${styleMapMobile.h4.fontSize};
90
+ line-height: ${styleMapMobile.h4.lineHeight};
91
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
92
+ font-size: ${styleMap.h4.fontSize};
93
+ line-height: ${styleMap.h4.lineHeight};
94
+ }
66
95
  `,
67
96
  h5: css`
68
- font-size: ${styleMap.h5.fontSize};
69
- line-height: ${styleMap.h5.lineHeight};
97
+ font-size: ${styleMapMobile.h5.fontSize};
98
+ line-height: ${styleMapMobile.h5.lineHeight};
99
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
100
+ font-size: ${styleMap.h5.fontSize};
101
+ line-height: ${styleMap.h5.lineHeight};
102
+ }
70
103
  `,
71
104
  b1: css`
72
- font-size: ${styleMap.b1.fontSize};
73
- line-height: ${styleMap.b1.lineHeight};
105
+ font-size: ${styleMapMobile.b1.fontSize};
106
+ line-height: ${styleMapMobile.b1.lineHeight};
107
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
108
+ font-size: ${styleMap.b1.fontSize};
109
+ line-height: ${styleMap.b1.lineHeight};
110
+ }
74
111
  `,
75
112
  b2: css`
76
- font-size: ${styleMap.b2.fontSize};
77
- line-height: ${styleMap.b2.lineHeight};
113
+ font-size: ${styleMapMobile.b2.fontSize};
114
+ line-height: ${styleMapMobile.b2.lineHeight};
115
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
116
+ font-size: ${styleMap.b2.fontSize};
117
+ line-height: ${styleMap.b2.lineHeight};
118
+ }
78
119
  `,
79
120
  b3: css`
80
- font-size: ${styleMap.b3.fontSize};
81
- line-height: ${styleMap.b3.lineHeight};
121
+ font-size: ${styleMapMobile.b3.fontSize};
122
+ line-height: ${styleMapMobile.b3.lineHeight};
123
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
124
+ font-size: ${styleMap.b3.fontSize};
125
+ line-height: ${styleMap.b3.lineHeight};
126
+ }
82
127
  `,
83
128
  b4: css`
84
- font-size: ${styleMap.b4.fontSize};
85
- line-height: ${styleMap.b4.lineHeight};
129
+ font-size: ${styleMapMobile.b4.fontSize};
130
+ line-height: ${styleMapMobile.b4.lineHeight};
131
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
132
+ font-size: ${styleMap.b4.fontSize};
133
+ line-height: ${styleMap.b4.lineHeight};
134
+ }
86
135
  `,
87
136
  button: css`
88
- font-size: ${styleMap.button.fontSize};
89
- line-height: ${styleMap.button.lineHeight};
137
+ font-size: ${styleMapMobile.button.fontSize};
138
+ line-height: ${styleMapMobile.button.lineHeight};
139
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
140
+ font-size: ${styleMap.button.fontSize};
141
+ line-height: ${styleMap.button.lineHeight};
142
+ }
90
143
  text-decoration: underline;
91
144
  color: ${(props) => props.theme.colors.brand[600]};
92
145
  background: none;
@@ -105,8 +158,12 @@ const mapper = {
105
158
  }
106
159
  `,
107
160
  link: css`
108
- font-size: ${styleMap.button.fontSize};
109
- line-height: ${styleMap.button.lineHeight};
161
+ font-size: ${styleMapMobile.button.fontSize};
162
+ line-height: ${styleMapMobile.button.lineHeight};
163
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
164
+ font-size: ${styleMap.button.fontSize};
165
+ line-height: ${styleMap.button.lineHeight};
166
+ }
110
167
  text-decoration: underline;
111
168
  color: ${(props) => props.theme.colors.brand[600]};
112
169
  display: inline-block;
@@ -136,6 +193,7 @@ const StyledTypography = styled("div", {
136
193
  `;
137
194
  export {
138
195
  StyledTypography,
139
- styleMap
196
+ styleMap,
197
+ styleMapMobile
140
198
  };
141
199
  //# sourceMappingURL=styled.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSTypographyT } from './react-desc-prop-types';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\n\nexport const styleMap = {\n h1: {\n fontSize: '2.62rem',\n lineHeight: '3.15rem',\n },\n h2: {\n fontSize: '1.85rem',\n lineHeight: '2.38rem',\n },\n h3: {\n fontSize: '1.38rem',\n lineHeight: '1.69rem',\n },\n h4: {\n fontSize: '1.23rem',\n lineHeight: '1.54rem',\n },\n h5: {\n fontSize: '1.08rem',\n lineHeight: '1.31rem',\n },\n b1: {\n fontSize: '1.08rem',\n lineHeight: '1.38rem',\n },\n b2: {\n fontSize: '1rem',\n lineHeight: '1.31rem',\n },\n b3: {\n fontSize: '0.92rem',\n lineHeight: '1.23rem',\n },\n b4: {\n fontSize: '0.85rem',\n lineHeight: '1rem',\n },\n button: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n link: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n};\n\nconst mapper = {\n h1: css`\n font-size: ${styleMap.h1.fontSize};\n line-height: ${styleMap.h1.lineHeight};\n `,\n h2: css`\n font-size: ${styleMap.h2.fontSize};\n line-height: ${styleMap.h2.lineHeight};\n `,\n h3: css`\n font-size: ${styleMap.h3.fontSize};\n line-height: ${styleMap.h3.lineHeight};\n `,\n h4: css`\n font-size: ${styleMap.h4.fontSize};\n line-height: ${styleMap.h4.lineHeight};\n `,\n h5: css`\n font-size: ${styleMap.h5.fontSize};\n line-height: ${styleMap.h5.lineHeight};\n `,\n b1: css`\n font-size: ${styleMap.b1.fontSize};\n line-height: ${styleMap.b1.lineHeight};\n `,\n b2: css`\n font-size: ${styleMap.b2.fontSize};\n line-height: ${styleMap.b2.lineHeight};\n `,\n b3: css`\n font-size: ${styleMap.b3.fontSize};\n line-height: ${styleMap.b3.lineHeight};\n `,\n b4: css`\n font-size: ${styleMap.b4.fontSize};\n line-height: ${styleMap.b4.lineHeight};\n `,\n button: css`\n font-size: ${styleMap.button.fontSize};\n line-height: ${styleMap.button.lineHeight};\n text-decoration: underline;\n color: ${(props) => props.theme.colors.brand[600]};\n background: none;\n border: none;\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 link: css`\n font-size: ${styleMap.button.fontSize};\n line-height: ${styleMap.button.lineHeight};\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\ntype StyleIProp = DSTypographyT.InternalProps & {\n children: DSTypographyT.InternalProps['children'];\n};\n\nexport const StyledTypography = styled('div', {\n name: DSTypographyName,\n slot: DSTypographyDataTestId.TYPOGRAPHY_ELEMENT,\n}).withConfig({\n shouldForwardProp: (prop, defaultValidatorFn) =>\n !['fontSize', 'color', 'as', 'variant'].includes(String(prop)) && defaultValidatorFn(prop),\n})<StyleIProp>`\n margin: 0;\n padding: 0;\n ${(props: StyleIProp) => mapper[props.variant]}\n ${xStyledCommonProps}\n`;\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSTypographyT } from './react-desc-prop-types';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\n\nexport const styleMap = {\n h1: {\n fontSize: '2.62rem',\n lineHeight: '3.15rem',\n },\n h2: {\n fontSize: '1.85rem',\n lineHeight: '2.38rem',\n },\n h3: {\n fontSize: '1.38rem',\n lineHeight: '1.69rem',\n },\n h4: {\n fontSize: '1.23rem',\n lineHeight: '1.54rem',\n },\n h5: {\n fontSize: '1.08rem',\n lineHeight: '1.31rem',\n },\n b1: {\n fontSize: '1.08rem',\n lineHeight: '1.38rem',\n },\n b2: {\n fontSize: '1rem',\n lineHeight: '1.31rem',\n },\n b3: {\n fontSize: '0.92rem',\n lineHeight: '1.23rem',\n },\n b4: {\n fontSize: '0.85rem',\n lineHeight: '1rem',\n },\n button: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n link: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n};\n\nexport const styleMapMobile = {\n h1: { fontSize: '2.12875rem', lineHeight: '2.5593749999999997rem' },\n h2: { fontSize: '1.503125rem', lineHeight: '1.9337499999999999rem' },\n h3: { fontSize: '1.1212499999999999rem', lineHeight: '1.373125rem' },\n h4: { fontSize: '0.999375rem', lineHeight: '1.25125rem' },\n h5: { fontSize: '0.8775000000000001rem', lineHeight: '1.064375rem' },\n b1: { fontSize: '0.8775000000000001rem', lineHeight: '1.1212499999999999rem' },\n b2: { fontSize: '0.8125rem', lineHeight: '1.064375rem' },\n b3: { fontSize: '0.7475rem', lineHeight: '0.999375rem' },\n b4: { fontSize: '0.6906249999999999rem', lineHeight: '0.8125rem' },\n button: { fontSize: '0.8125rem', lineHeight: '1.503125rem' },\n link: { fontSize: '0.8125rem', lineHeight: '1.503125rem' },\n};\n\nconst mapper = {\n h1: css`\n font-size: ${styleMapMobile.h1.fontSize};\n line-height: ${styleMapMobile.h1.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${styleMap.h1.fontSize};\n line-height: ${styleMap.h1.lineHeight};\n }\n `,\n h2: css`\n font-size: ${styleMapMobile.h2.fontSize};\n line-height: ${styleMapMobile.h2.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${styleMap.h2.fontSize};\n line-height: ${styleMap.h2.lineHeight};\n }\n `,\n h3: css`\n font-size: ${styleMapMobile.h3.fontSize};\n line-height: ${styleMapMobile.h3.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${styleMap.h3.fontSize};\n line-height: ${styleMap.h3.lineHeight};\n }\n `,\n h4: css`\n font-size: ${styleMapMobile.h4.fontSize};\n line-height: ${styleMapMobile.h4.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${styleMap.h4.fontSize};\n line-height: ${styleMap.h4.lineHeight};\n }\n `,\n h5: css`\n font-size: ${styleMapMobile.h5.fontSize};\n line-height: ${styleMapMobile.h5.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${styleMap.h5.fontSize};\n line-height: ${styleMap.h5.lineHeight};\n }\n `,\n b1: css`\n font-size: ${styleMapMobile.b1.fontSize};\n line-height: ${styleMapMobile.b1.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${styleMap.b1.fontSize};\n line-height: ${styleMap.b1.lineHeight};\n }\n `,\n b2: css`\n font-size: ${styleMapMobile.b2.fontSize};\n line-height: ${styleMapMobile.b2.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${styleMap.b2.fontSize};\n line-height: ${styleMap.b2.lineHeight};\n }\n `,\n b3: css`\n font-size: ${styleMapMobile.b3.fontSize};\n line-height: ${styleMapMobile.b3.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${styleMap.b3.fontSize};\n line-height: ${styleMap.b3.lineHeight};\n }\n `,\n b4: css`\n font-size: ${styleMapMobile.b4.fontSize};\n line-height: ${styleMapMobile.b4.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${styleMap.b4.fontSize};\n line-height: ${styleMap.b4.lineHeight};\n }\n `,\n button: css`\n font-size: ${styleMapMobile.button.fontSize};\n line-height: ${styleMapMobile.button.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${styleMap.button.fontSize};\n line-height: ${styleMap.button.lineHeight};\n }\n text-decoration: underline;\n color: ${(props) => props.theme.colors.brand[600]};\n background: none;\n border: none;\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 link: css`\n font-size: ${styleMapMobile.button.fontSize};\n line-height: ${styleMapMobile.button.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${styleMap.button.fontSize};\n line-height: ${styleMap.button.lineHeight};\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\ntype StyleIProp = DSTypographyT.InternalProps & {\n children: DSTypographyT.InternalProps['children'];\n};\n\nexport const StyledTypography = styled('div', {\n name: DSTypographyName,\n slot: DSTypographyDataTestId.TYPOGRAPHY_ELEMENT,\n}).withConfig({\n shouldForwardProp: (prop, defaultValidatorFn) =>\n !['fontSize', 'color', 'as', 'variant'].includes(String(prop)) && defaultValidatorFn(prop),\n})<StyleIProp>`\n margin: 0;\n padding: 0;\n ${(props: StyleIProp) => mapper[props.variant]}\n ${xStyledCommonProps}\n`;\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -45,6 +45,52 @@ export declare const styleMap: {
45
45
  lineHeight: string;
46
46
  };
47
47
  };
48
+ export declare const styleMapMobile: {
49
+ h1: {
50
+ fontSize: string;
51
+ lineHeight: string;
52
+ };
53
+ h2: {
54
+ fontSize: string;
55
+ lineHeight: string;
56
+ };
57
+ h3: {
58
+ fontSize: string;
59
+ lineHeight: string;
60
+ };
61
+ h4: {
62
+ fontSize: string;
63
+ lineHeight: string;
64
+ };
65
+ h5: {
66
+ fontSize: string;
67
+ lineHeight: string;
68
+ };
69
+ b1: {
70
+ fontSize: string;
71
+ lineHeight: string;
72
+ };
73
+ b2: {
74
+ fontSize: string;
75
+ lineHeight: string;
76
+ };
77
+ b3: {
78
+ fontSize: string;
79
+ lineHeight: string;
80
+ };
81
+ b4: {
82
+ fontSize: string;
83
+ lineHeight: string;
84
+ };
85
+ button: {
86
+ fontSize: string;
87
+ lineHeight: string;
88
+ };
89
+ link: {
90
+ fontSize: string;
91
+ lineHeight: string;
92
+ };
93
+ };
48
94
  type StyleIProp = DSTypographyT.InternalProps & {
49
95
  children: DSTypographyT.InternalProps['children'];
50
96
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-typography",
3
- "version": "3.14.0-rc.4",
3
+ "version": "3.14.0-rc.5",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Typography",
6
6
  "files": [
@@ -35,8 +35,8 @@
35
35
  "indent": 4
36
36
  },
37
37
  "dependencies": {
38
- "@elliemae/ds-system": "3.14.0-rc.4",
39
- "@elliemae/ds-utilities": "3.14.0-rc.4"
38
+ "@elliemae/ds-system": "3.14.0-rc.5",
39
+ "@elliemae/ds-utilities": "3.14.0-rc.5"
40
40
  },
41
41
  "devDependencies": {
42
42
  "@testing-library/jest-dom": "~5.16.4",