From 5b6a6bb1a0736c36ea8da532e1c9b370ca46bf19 Mon Sep 17 00:00:00 2001 From: Brian Siao Tick Chong Date: Tue, 22 Oct 2024 13:35:06 -0700 Subject: [PATCH] [ui] fix font weights and button themes for uma auth (#13048) GitOrigin-RevId: beae699a80ed52f16f9bebe83e8eded623395778 --- packages/ui/src/components/Button.tsx | 1 + .../ui/src/styles/themeDefaults/buttons.tsx | 8 +++++ packages/ui/src/styles/themes.tsx | 12 +++++-- packages/ui/src/styles/tokens/typography.ts | 34 +++++++++---------- 4 files changed, 36 insertions(+), 19 deletions(-) diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx index 16e07f42..50674206 100644 --- 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 index be0e9b96..a1ce4a75 100644 --- 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 index 86a7d0b2..c2dc3539 100644 --- 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 index f017de6f..54d552c4 100644 --- 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: `${