@manamerge/mana-atomic-ui 1.0.157 → 1.0.159

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 (10) hide show
  1. package/dist/index.d.ts +1 -0
  2. package/dist/index.js +11 -6
  3. package/dist/index.js.map +1 -1
  4. package/dist/themes/themes/manamerge/atoms/heading.ts +91 -54
  5. package/dist/themes/themes/manamerge/molecules/breakerTape.ts +11 -7
  6. package/dist/types/components/Atoms/Heading/Heading.d.ts +1 -0
  7. package/dist/types/themes/ManamergeTheme.d.ts +74 -1
  8. package/dist/types/themes/manamerge/atoms/heading.d.ts +36 -0
  9. package/dist/types/themes/manamerge/molecules/breakerTape.d.ts +2 -1
  10. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -29,6 +29,7 @@ declare const Text: React.FC<TextTypes>;
29
29
  interface HeadingTypes {
30
30
  variant?: string;
31
31
  children: ReactNode;
32
+ vColor?: string;
32
33
  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
33
34
  }
34
35
  declare const Heading: React.FC<HeadingTypes>;
package/dist/index.js CHANGED
@@ -188,7 +188,8 @@ const Text = (_a) => {
188
188
  };
189
189
 
190
190
  const HeadingContainer = styled.h1 `
191
- ${({ variant, theme }) => {
191
+ ${(_a) => {
192
+ var { variant, theme } = _a, props = __rest(_a, ["variant", "theme"]);
192
193
  const { media, heading } = theme;
193
194
  const { tinyMobileUp, largeMobileUp, superLargeDesktopUp } = media;
194
195
  const headingStyles = (heading === null || heading === void 0 ? void 0 : heading[variant]) || {};
@@ -198,31 +199,34 @@ const HeadingContainer = styled.h1 `
198
199
  font-size: ${mobile === null || mobile === void 0 ? void 0 : mobile.fontSize};
199
200
  font-weight: ${mobile === null || mobile === void 0 ? void 0 : mobile.fontWeight};
200
201
  line-height: ${mobile === null || mobile === void 0 ? void 0 : mobile.lineHeight};
201
- color: ${mobile === null || mobile === void 0 ? void 0 : mobile.color};
202
+ color: ${(props === null || props === void 0 ? void 0 : props.vColor) || (mobile === null || mobile === void 0 ? void 0 : mobile.color)};
202
203
  margin: ${mobile === null || mobile === void 0 ? void 0 : mobile.margin};
204
+ font-family: ${mobile === null || mobile === void 0 ? void 0 : mobile.fontFamily};
203
205
  }
204
206
  ${largeMobileUp} {
205
207
  font-size: ${tablet === null || tablet === void 0 ? void 0 : tablet.fontSize};
206
208
  font-weight: ${tablet === null || tablet === void 0 ? void 0 : tablet.fontWeight};
207
209
  line-height: ${tablet === null || tablet === void 0 ? void 0 : tablet.lineHeight};
208
- color: ${tablet === null || tablet === void 0 ? void 0 : tablet.color};
210
+ color: ${(props === null || props === void 0 ? void 0 : props.vColor) || (tablet === null || tablet === void 0 ? void 0 : tablet.color)};
209
211
  margin: ${tablet === null || tablet === void 0 ? void 0 : tablet.margin};
212
+ font-family: ${tablet === null || tablet === void 0 ? void 0 : tablet.fontFamily};
210
213
  }
211
214
  ${superLargeDesktopUp} {
212
215
  font-size: ${desktop === null || desktop === void 0 ? void 0 : desktop.fontSize};
213
216
  font-weight: ${desktop === null || desktop === void 0 ? void 0 : desktop.fontWeight};
214
217
  line-height: ${desktop === null || desktop === void 0 ? void 0 : desktop.lineHeight};
215
- color: ${desktop === null || desktop === void 0 ? void 0 : desktop.color};
218
+ color: ${(props === null || props === void 0 ? void 0 : props.vColor) || (desktop === null || desktop === void 0 ? void 0 : desktop.color)};
216
219
  margin: ${desktop === null || desktop === void 0 ? void 0 : desktop.margin};
220
+ font-family: ${desktop === null || desktop === void 0 ? void 0 : desktop.fontFamily};
217
221
  }
218
222
  `;
219
223
  }}
220
224
  `;
221
225
 
222
226
  const Heading = (_a) => {
223
- var { variant = "primary", as = "h1", children } = _a, props = __rest(_a, ["variant", "as", "children"]);
227
+ var { variant = "primary", as = "h1", vColor, children } = _a, props = __rest(_a, ["variant", "as", "vColor", "children"]);
224
228
  const headingVariant = `Heading-${variant}-${as}`;
225
- return (jsx(HeadingContainer, Object.assign({ className: classNames("Heading-", variant), variant: headingVariant, as: as }, props, { children: children })));
229
+ return (jsx(HeadingContainer, Object.assign({ className: classNames("Heading-", variant), variant: headingVariant, vColor: vColor, as: as }, props, { children: children })));
226
230
  };
227
231
 
228
232
  const StyledSvg = styled.svg `
@@ -1208,6 +1212,7 @@ const TextBreakerTape = styled(Text).attrs(({ theme, moleculeVariant }) => {
1208
1212
  const textTheme = ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.breakerTape) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.text) || {};
1209
1213
  return css `
1210
1214
  color: ${textTheme === null || textTheme === void 0 ? void 0 : textTheme.color};
1215
+ font-size: ${textTheme === null || textTheme === void 0 ? void 0 : textTheme.fontSize};
1211
1216
  `;
1212
1217
  }}
1213
1218
  `;