[ui] fix font weights and button themes for uma auth (#13048)

GitOrigin-RevId: beae699a80ed52f16f9bebe83e8eded623395778
lightsparkdev · Oct 22, 2024 · 5b6a6bb · 5b6a6bb
1 parent 3ed30e5
commit 5b6a6bb
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 19 deletions.
diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx
@@ -44,6 +44,7 @@ export const buttonKinds = [
   "danger",
   "warning",
   "tertiary",
+  "quaternary",
 ] as const;
 export type ButtonKind = (typeof buttonKinds)[number];
 

diff --git a/packages/ui/src/styles/themeDefaults/buttons.tsx b/packages/ui/src/styles/themeDefaults/buttons.tsx
@@ -80,6 +80,14 @@ export const defaultButtonsTheme = {
         Large: 0,
       },
     },
+    quaternary: {
+      defaultBackgroundColor: "transparent",
+      defaultBorderColor: "gray80",
+      defaultHoverBackgroundColor: "transparenta02",
+      defaultHoverBorderColor: "gray80",
+      defaultActiveBackgroundColor: "transparenta08",
+      defaultActiveBorderColor: "gray80",
+    },
     transparent: {
       defaultBackgroundColor: "transparent",
       defaultBorderColor: "transparent",

diff --git a/packages/ui/src/styles/themes.tsx b/packages/ui/src/styles/themes.tsx
@@ -209,7 +209,7 @@ const umaAuthSdkLightTheme = extend(lightTheme, {
   linkLight: "#0068C90F",
   inputBackground: colors.white,
   typography: getTypography(TypographyGroup.UmaAuthSdk, {
-    main: "Inter",
+    main: "Manrope",
     code: "Monaco",
   }),
   content: extendBase(lightBaseTheme, {
@@ -270,6 +270,14 @@ const umaAuthSdkLightTheme = extend(lightTheme, {
         defaultHoverBorderColor: "transparent",
       },
       secondary: {
+        defaultBackgroundColor: "grayBlue94",
+        defaultBorderColor: "grayBlue94",
+        defaultHoverBackgroundColor: "grayBlue88",
+        defaultHoverBorderColor: "grayBlue88",
+        defaultActiveBackgroundColor: "grayBlue69",
+        defaultActiveBorderColor: "grayBlue69",
+      },
+      quaternary: {
         defaultBackgroundColor: "transparent",
         defaultBorderColor: "grayBlue80",
         defaultHoverBackgroundColor: "grayBlue94",
@@ -326,7 +334,7 @@ const umaAuthSdkDarkTheme = extend(darkTheme, {
   link: colors.blue39,
   inputBackground: colors.gray5,
   typography: getTypography(TypographyGroup.UmaAuthSdk, {
-    main: "Inter",
+    main: "Manrope",
     code: "Monaco",
   }),
   content: extendBase(lightBaseTheme, {

diff --git a/packages/ui/src/styles/tokens/typography.ts b/packages/ui/src/styles/tokens/typography.ts
@@ -336,7 +336,7 @@ function getTypographyTypes(fontFamilies: FontFamilies): TypographyTypes {
         [TypographyType.Headline]: {
           [TokenSize.Large]: {
             fontFamily: `${fontFamilies.main}`,
-            fontWeight: `${FONT_WEIGHTS.main.ExtraBold}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
             lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["4xl"]}`,
             fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["3xl"]}`,
             letterSpacing: "-.96px",
@@ -347,7 +347,7 @@ function getTypographyTypes(fontFamilies: FontFamilies): TypographyTypes {
           },
           [TokenSize.Medium]: {
             fontFamily: `${fontFamilies.main}`,
-            fontWeight: `${FONT_WEIGHTS.main.ExtraBold}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
             lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["3xl"]}`,
             fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["2xl"]}`,
             letterSpacing: "-.84px",
@@ -358,7 +358,7 @@ function getTypographyTypes(fontFamilies: FontFamilies): TypographyTypes {
           },
           [TokenSize.Small]: {
             fontFamily: `${fontFamilies.main}`,
-            fontWeight: `${FONT_WEIGHTS.main.ExtraBold}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
             lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["2xl"]}`,
             fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xl}`,
             letterSpacing: "-.72px",
@@ -761,7 +761,7 @@ function getTypographyTypes(fontFamilies: FontFamilies): TypographyTypes {
         [TypographyType.Headline]: {
           [TokenSize.Large]: {
             fontFamily: `${fontFamilies.main}`,
-            fontWeight: `${FONT_WEIGHTS.main.ExtraBold}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
             lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["4xl"]}`,
             fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["3xl"]}`,
             letterSpacing: "-.96px",
@@ -772,7 +772,7 @@ function getTypographyTypes(fontFamilies: FontFamilies): TypographyTypes {
           },
           [TokenSize.Medium]: {
             fontFamily: `${fontFamilies.main}`,
-            fontWeight: `${FONT_WEIGHTS.main.ExtraBold}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
             lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["3xl"]}`,
             fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["2xl"]}`,
             letterSpacing: "-.84px",
@@ -783,7 +783,7 @@ function getTypographyTypes(fontFamilies: FontFamilies): TypographyTypes {
           },
           [TokenSize.Small]: {
             fontFamily: `${fontFamilies.main}`,
-            fontWeight: `${FONT_WEIGHTS.main.ExtraBold}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
             lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["2xl"]}`,
             fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xl}`,
             letterSpacing: "-.72px",
@@ -2260,7 +2260,7 @@ function getTypographyTypes(fontFamilies: FontFamilies): TypographyTypes {
         [TypographyType.LabelModerate]: {
           [TokenSize.Large]: {
             fontFamily: `${fontFamilies.main}`,
-            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
             lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmaAuthSdk].xs}`,
             fontSize: `${FONT_SIZE[TypographyGroup.UmaAuthSdk].sm}`,
             letterSpacing: `${
@@ -2273,7 +2273,7 @@ function getTypographyTypes(fontFamilies: FontFamilies): TypographyTypes {
           },
           [TokenSize.Medium]: {
             fontFamily: `${fontFamilies.main}`,
-            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
             lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmaAuthSdk]["2xs"]}`,
             fontSize: `${FONT_SIZE[TypographyGroup.UmaAuthSdk].xs}`,
             letterSpacing: `${
@@ -2286,7 +2286,7 @@ function getTypographyTypes(fontFamilies: FontFamilies): TypographyTypes {
           },
           [TokenSize.Small]: {
             fontFamily: `${fontFamilies.main}`,
-            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
             lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmaAuthSdk]["2xs"]}`,
             fontSize: `${FONT_SIZE[TypographyGroup.UmaAuthSdk]["2xs"]}`,
             letterSpacing: `${
@@ -2603,7 +2603,7 @@ function getTypographyTypes(fontFamilies: FontFamilies): TypographyTypes {
         [TypographyType.Body]: {
           [TokenSize.Large]: {
             fontFamily: `${fontFamilies.main}`,
-            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
             lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmaAuthSdk].sm}`,
             fontSize: `${FONT_SIZE[TypographyGroup.UmaAuthSdk].md}`,
             letterSpacing: `${
@@ -2617,7 +2617,7 @@ function getTypographyTypes(fontFamilies: FontFamilies): TypographyTypes {
           [TokenSize.Medium]: {
             fontFamily: `${fontFamilies.main}`,
             fontWeight: `${FONT_WEIGHTS.main.Medium}`,
-            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmaAuthSdk].sm}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmaAuthSdk].xs}`,
             fontSize: `${FONT_SIZE[TypographyGroup.UmaAuthSdk].sm}`,
             letterSpacing: `${
               LETTER_SPACING[TypographyGroup.UmaAuthSdk].normal
@@ -2685,7 +2685,7 @@ function getTypographyTypes(fontFamilies: FontFamilies): TypographyTypes {
         [TypographyType.Label]: {
           [TokenSize.Large]: {
             fontFamily: `${fontFamilies.main}`,
-            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
             lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmaAuthSdk].xs}`,
             fontSize: `${FONT_SIZE[TypographyGroup.UmaAuthSdk].sm}`,
             letterSpacing: `${
@@ -2698,7 +2698,7 @@ function getTypographyTypes(fontFamilies: FontFamilies): TypographyTypes {
           },
           [TokenSize.Medium]: {
             fontFamily: `${fontFamilies.main}`,
-            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
             lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmaAuthSdk]["2xs"]}`,
             fontSize: `${FONT_SIZE[TypographyGroup.UmaAuthSdk].xs}`,
             letterSpacing: `${
@@ -2711,7 +2711,7 @@ function getTypographyTypes(fontFamilies: FontFamilies): TypographyTypes {
           },
           [TokenSize.Small]: {
             fontFamily: `${fontFamilies.main}`,
-            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
             lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmaAuthSdk]["2xs"]}`,
             fontSize: `${FONT_SIZE[TypographyGroup.UmaAuthSdk]["2xs"]}`,
             letterSpacing: `${
@@ -2726,7 +2726,7 @@ function getTypographyTypes(fontFamilies: FontFamilies): TypographyTypes {
         [TypographyType.LabelModerate]: {
           [TokenSize.Large]: {
             fontFamily: `${fontFamilies.main}`,
-            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
             lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmaAuthSdk].xs}`,
             fontSize: `${FONT_SIZE[TypographyGroup.UmaAuthSdk].sm}`,
             letterSpacing: `${
@@ -2739,7 +2739,7 @@ function getTypographyTypes(fontFamilies: FontFamilies): TypographyTypes {
           },
           [TokenSize.Medium]: {
             fontFamily: `${fontFamilies.main}`,
-            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
             lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmaAuthSdk]["2xs"]}`,
             fontSize: `${FONT_SIZE[TypographyGroup.UmaAuthSdk].xs}`,
             letterSpacing: `${
@@ -2752,7 +2752,7 @@ function getTypographyTypes(fontFamilies: FontFamilies): TypographyTypes {
           },
           [TokenSize.Small]: {
             fontFamily: `${fontFamilies.main}`,
-            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
             lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmaAuthSdk]["2xs"]}`,
             fontSize: `${FONT_SIZE[TypographyGroup.UmaAuthSdk]["2xs"]}`,
             letterSpacing: `${