From d61a75155abbc0f686a2940816bdf309f4f3d40f Mon Sep 17 00:00:00 2001
From: William Ernest <wernest@vmware.com>
Date: Wed, 20 Sep 2023 16:02:53 -0700
Subject: [PATCH] feat(core): add button typography tokens and styles

---
 projects/core/build/tokens.ts                   |  6 ++++++
 .../core/src/styles/typography/_typography.scss | 17 ++++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/projects/core/build/tokens.ts b/projects/core/build/tokens.ts
index e16e700e3..c4fa6af6f 100644
--- a/projects/core/build/tokens.ts
+++ b/projects/core/build/tokens.ts
@@ -461,6 +461,12 @@ const generateTypographyTokens = () => {
       letterSpacing: token('0.05em'),
       fontWeight: token('500'),
     },
+    button: {
+      fontSize: token(13, { scale: internal.scale3 }),
+      lineHeight: token('1.23077em', { static: true }),
+      letterSpacing: token('-0.05em'),
+      fontWeight: token('500'),
+    },
     infoHover: {
       value: token(color.blue[800]),
     },
diff --git a/projects/core/src/styles/typography/_typography.scss b/projects/core/src/styles/typography/_typography.scss
index 54e98a1ab..bc8074eea 100644
--- a/projects/core/src/styles/typography/_typography.scss
+++ b/projects/core/src/styles/typography/_typography.scss
@@ -45,7 +45,8 @@
 [cds-text*='message'],
 [cds-text*='secondary'],
 [cds-text*='caption'],
-[cds-text*='smallcaption'] {
+[cds-text*='smallcaption'],
+[cds-text*='button'] {
   color: $cds-global-typography-color-500;
 }
 
@@ -190,6 +191,20 @@ body[cds-text*='body'] {
   letter-spacing: $cds-global-typography-smallcaption-letter-spacing;
 }
 
+[cds-text*='button'] {
+  $lh-gap: getLineHeightGap(
+    $cds-global-typography-button-line-height-static,
+    $cds-global-typography-button-line-height
+  );
+  @include LHE($lh-gap);
+
+  font-size: $cds-global-typography-button-font-size;
+  font-weight: $cds-global-typography-button-font-weight;
+  line-height: $cds-global-typography-button-line-height;
+  letter-spacing: $cds-global-typography-button-letter-spacing;
+  text-decoration: underline;
+}
+
 [cds-text~='link'] {
   color: $cds-global-typography-link-color !important;
   text-decoration: underline !important;