feat(typography): caption label variant added

lumada-design · Mar 13, 2024 · 0e96794 · 0e96794
1 parent 8af93b6
commit 0e96794
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 1 deletion.
diff --git a/packages/core/src/Typography/Typography.styles.ts b/packages/core/src/Typography/Typography.styles.ts
@@ -27,6 +27,7 @@ export const { useClasses, staticClasses } = createClasses("HvTypography", {
   title4: { ...theme.typography.title4 },
   body: { ...theme.typography.body },
   label: { ...theme.typography.label },
+  captionLabel: { ...theme.typography.captionLabel },
   caption1: { ...theme.typography.caption1 },
   caption2: { ...theme.typography.caption2 },
   // legacy variants

diff --git a/packages/core/src/Typography/Typography.tsx b/packages/core/src/Typography/Typography.tsx
@@ -25,6 +25,7 @@ const HvTypographyMap = {
   title4: "h4",
   body: "p",
   label: "span",
+  captionLabel: "p",
   caption1: "p",
   caption2: "p",
   // LEGACY

diff --git a/packages/core/src/Typography/Usage.mdx b/packages/core/src/Typography/Usage.mdx
@@ -51,7 +51,8 @@ The Typography component comes with 9 variants that are mapped to an HTML elemen
 | title3       | h3           |
 | title4       | h4           |
 | body         | p            |
-| label        | label        |
+| label        | span         |
+| captionLabel | p            |
 | caption1     | p            |
 | caption2     | p            |
 

diff --git a/packages/core/src/Typography/utils.ts b/packages/core/src/Typography/utils.ts
@@ -6,6 +6,7 @@ export const typographyVariants = [
   "title4",
   "body",
   "label",
+  "captionLabel",
   "caption1",
   "caption2",
 ] as const;

diff --git a/packages/styles/src/theme.ts b/packages/styles/src/theme.ts
@@ -71,6 +71,7 @@ const typographySpec: DeepString<HvThemeTypography> = {
     title4: { ...typographyProps },
     label: { ...typographyProps },
     body: { ...typographyProps },
+    captionLabel: { ...typographyProps },
     caption1: { ...typographyProps },
     caption2: { ...typographyProps },
     // LEGACY UNMAPPABLE (DS3)

diff --git a/packages/styles/src/themes/ds3.ts b/packages/styles/src/themes/ds3.ts
@@ -122,6 +122,12 @@ const ds3 = makeTheme((theme) => ({
       lineHeight: "16px",
       fontWeight: 400,
     },
+    captionLabel: {
+      color: theme.colors.secondary,
+      fontWeight: theme.fontWeights.semibold,
+      fontSize: theme.fontSizes.sm,
+      lineHeight: theme.lineHeights.sm,
+    },
     caption1: {
       color: theme.colors.secondary,
       fontSize: "10px",

diff --git a/packages/styles/src/themes/ds5.ts b/packages/styles/src/themes/ds5.ts
@@ -66,6 +66,12 @@ const ds5 = makeTheme((theme) => ({
       fontSize: theme.fontSizes.base,
       lineHeight: theme.lineHeights.base,
     },
+    captionLabel: {
+      color: theme.colors.secondary,
+      fontWeight: theme.fontWeights.semibold,
+      fontSize: theme.fontSizes.sm,
+      lineHeight: theme.lineHeights.sm,
+    },
     caption1: {
       color: theme.colors.secondary,
       fontWeight: theme.fontWeights.normal,

diff --git a/packages/styles/src/themes/pentahoPlus.ts b/packages/styles/src/themes/pentahoPlus.ts
@@ -96,6 +96,12 @@ const pentahoPlus = makeTheme((theme) => ({
       fontSize: theme.fontSizes.base,
       lineHeight: theme.lineHeights.base,
     },
+    captionLabel: {
+      color: theme.colors.secondary,
+      fontWeight: theme.fontWeights.semibold,
+      fontSize: theme.fontSizes.sm,
+      lineHeight: theme.lineHeights.sm,
+    },
     caption1: {
       color: theme.colors.secondary,
       fontWeight: theme.fontWeights.normal,

diff --git a/packages/styles/src/types.ts b/packages/styles/src/types.ts
@@ -83,6 +83,7 @@ export type HvThemeTypography = {
     title4: HvThemeTypographyProps;
     label: HvThemeTypographyProps;
     body: HvThemeTypographyProps;
+    captionLabel: HvThemeTypographyProps;
     caption1: HvThemeTypographyProps;
     caption2: HvThemeTypographyProps;
     // LEGACY UNMAPPABLE (DS3)