web: define & use new button variants

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

apps/web/src/app.css

@@ -248,3 +248,7 @@ kbd {
     opacity: 1;
   }
 }
+
+button {
+  line-height: 100%;
+}

apps/web/src/components/auth-container/index.jsx

@@ -152,14 +152,8 @@ function AuthContainer(props) {
             }}
           >
             <Button
-              variant="anchor"
+              variant="new_anchor"
               onClick={() => SettingsDialog.show({ activeSection: "servers" })}
-              sx={{
-                fontSize: "sm",
-                fontWeight: 500,
-                color: "accent",
-                textDecoration: "underline"
-              }}
             >
               {"Change server"}
             </Button>

apps/web/src/views/auth.tsx

@@ -285,7 +285,7 @@ function Login(props: BaseAuthComponentProps<"login">) {
           <Button
             data-test-id="auth-forgot-password"
             type="button"
-            variant="anchor"
+            variant="new_anchor"
             onClick={() => navigate("recover", { email: form?.email || "" })}
             sx={{
               mt: "spacing4",
@@ -1092,19 +1092,8 @@ export function AuthForm<T extends AuthRoutes>(props: AuthFormProps<T>) {
       {canSkip && (
         <Button
           type="button"
-          variant="anchor"
-          sx={{
-            mt: "spacing4",
-            paddingY: "spacing6",
-            paddingX: "spacing5",
-            fontWeight: 600,
-            fontSize: "md",
-            color: "buttonForeground-secondary",
-            textDecoration: "none",
-            border: "1px solid",
-            borderColor: "border",
-            borderRadius: "radius2"
-          }}
+          variant="new_bordered"
+          sx={{ width: "100%", mt: "spacing4" }}
           onClick={() => {
             openURL("/notes/", { authenticated: false });
           }}
@@ -1232,19 +1221,10 @@ export function SubmitButton(props: SubmitButtonProps) {
     <Button
       data-test-id="submitButton"
       type="submit"
-      variant="accent"
+      variant="new_accent"
       sx={{
         marginTop: "spacing8",
-        alignItems: "center",
-        justifyContent: "center",
-        alignSelf: "center",
-        display: "flex",
-        paddingY: "spacing6",
-        paddingX: "spacing5",
-        fontSize: "md",
-        fontWeight: 600,
-        width: "100%",
-        borderRadius: "radius2"
+        width: "100%"
       }}
       disabled={props.disabled}
     >

packages/theme/src/theme/variants/button.ts

@@ -70,6 +70,49 @@ export const createButtonVariant = (
   }
 });
 
+/**
+ * will eventually replace createButtonVariant when redesign is completed
+ */
+export const newCreateButtonVariant = (
+  background: SchemeColors = "transparent",
+  color: SchemeColors = "paragraph",
+  states?: {
+    hover?: ThemeUIStyleObject;
+    active?: ThemeUIStyleObject;
+  }
+): ThemeUIStyleObject => ({
+  ...createButtonVariant(background, color, states),
+  alignItems: "center",
+  justifyContent: "center",
+  alignSelf: "center",
+  display: "flex",
+  paddingY: "spacing6",
+  paddingX: "spacing5",
+  fontSize: "md",
+  fontWeight: 600,
+  borderRadius: "radius2"
+});
+
+const newAccent = newCreateButtonVariant("accent", "accentForeground", {
+  hover: { bg: alpha("accent", 0.9) },
+  active: { bg: alpha("accent", 0.8) }
+});
+
+const newBordered: ThemeUIStyleObject = {
+  ...newCreateButtonVariant("transparent", "buttonForeground-secondary", {
+    hover: { bg: "hover" },
+    active: { bg: "hover" }
+  }),
+  border: "1px solid",
+  borderColor: "border"
+};
+
+const newAnchor: ThemeUIStyleObject = {
+  variant: "buttons.anchor",
+  fontSize: "sm",
+  fontWeight: 500
+};
+
 const primary = createButtonVariant("transparent", "paragraph", {
   hover: { bg: "hover" },
   active: { bg: "hover" }
@@ -152,11 +195,14 @@ export const buttonVariants = {
   tertiary,
 
   accent,
+  new_accent: newAccent,
+  new_bordered: newBordered,
   accentSecondary,
   error,
   errorSecondary,
 
   anchor,
+  new_anchor: newAnchor,
   dialog,
   statusitem: statusItem,
   icon: menuItem,