[C-3201] Audit harmony button styles (#6298)

AudiusProject · Oct 12, 2023 · 4bf5201 · 4bf5201
1 parent 847c3fb
commit 4bf5201
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 51 deletions.
diff --git a/packages/harmony/src/assets/styles/animations.css b/packages/harmony/src/assets/styles/animations.css
@@ -9,7 +9,7 @@
 root {
   --harmony-quick: 0.07s ease-in-out;
   --harmony-expressive: 0.18s ease-in-out;
-  --harmony-hover: 0.14s cubic-bezier(0.44, 0, 0.56, 1);
-  --harmony-press: 0.1s cubic-bezier(0.44, 0, 0.56, 1);
+  --harmony-hover: 0.12s cubic-bezier(0.44, 0, 0.56, 1);
+  --harmony-press: 0.12s cubic-bezier(0.44, 0, 0.56, 1);
   --harmony-calm: 0.5s ease-in-out;
 }
diff --git a/packages/harmony/src/assets/styles/spacing.css b/packages/harmony/src/assets/styles/spacing.css
@@ -9,6 +9,15 @@
 root {
   --harmony-unit: 4px;
 
+  --harmony-spacing-xs: 4px;
+  --harmony-spacing-s: 8px;
+  --harmony-spacing-m: 12px;
+  --harmony-spacing-l: 16px;
+  --harmony-spacing-xl: 24px;
+  --harmony-spacing-2xl: 32px;
+  --harmony-spacing-3xl: 48px;
+  --harmony-spacing-4xl: 64px;
+
   --harmony-unit-1: 4px;
   --harmony-unit-2: 8px;
   --harmony-unit-3: 12px;

diff --git a/packages/harmony/src/components/button/BaseButton.module.css b/packages/harmony/src/components/button/BaseButton.module.css
@@ -22,12 +22,13 @@
 @media (hover: hover) {
   .button:not(.disabled):hover {
     transform: scale(1.04);
+    transition: all var(--harmony-hover);
   }
 }
 
 .button:not(.disabled):active {
-  transition: all var(--harmony-press);
   transform: scale(0.98);
+  transition: all var(--harmony-press);
 }
 
 .button.disabled {

diff --git a/packages/harmony/src/components/button/Button.module.css b/packages/harmony/src/components/button/Button.module.css
@@ -7,6 +7,8 @@
   border: 1px solid var(--button-color);
   border-radius: var(--harmony-unit-1);
   color: var(--text-color);
+  background-color: var(--button-color);
+  box-shadow: var(--harmony-shadow-near);
 }
 
 /* Overlay used for hover/press styling */
@@ -34,7 +36,7 @@
 .buttonSmall {
   gap: var(--harmony-unit-1);
   height: var(--harmony-unit-8);
-  padding: var(--harmony-unit-2) var(--harmony-unit-3);
+  padding-inline: var(--harmony-unit-3);
 }
 
 .iconSmall {
@@ -53,7 +55,7 @@
 .buttonDefault {
   gap: var(--harmony-unit-2);
   height: var(--harmony-unit-12);
-  padding: var(--harmony-unit-3) var(--harmony-unit-6);
+  padding-inline: var(--harmony-unit-6);
 }
 
 .iconDefault {
@@ -72,7 +74,7 @@
 .buttonLarge {
   gap: var(--harmony-unit-2);
   height: var(--harmony-unit-15);
-  padding: var(--harmony-unit-5) var(--harmony-unit-6);
+  padding-inline: var(--harmony-unit-6);
 }
 
 .iconLarge {
@@ -95,15 +97,12 @@
   --text-color: var(--harmony-static-white);
   --button-color: var(--harmony-primary);
   background: var(--button-color);
-  box-shadow: var(--harmony-shadow-near);
 }
-
 .primary:hover {
   --overlay-color: var(--harmony-static-white);
   --overlay-opacity: 0.1;
   box-shadow: var(--harmony-shadow-mid);
 }
-
 .primary:active {
   --overlay-color: var(--harmony-static-black);
   --overlay-opacity: 0.2;
@@ -115,66 +114,95 @@
   --button-color: var(--harmony-n-300);
   --text-color: var(--harmony-text-default);
   background: transparent;
+  box-shadow: none;
 }
-
 .secondary:hover {
   --button-color: var(--harmony-primary);
-  --text-color: var(--harmony-primary);
+  --text-color: var(--harmony-static-white);
+  background-color: var(--button-color);
+  --overlay-color: var(--harmony-static-white);
+  --overlay-opacity: 0.1;
+  box-shadow: var(--harmony-shadow-mid);
 }
 .secondary:active {
-  --button-color: var(--harmony-p-500);
-  --text-color: var(--harmony-p-500);
+  --button-color: var(--harmony-primary);
+  --text-color: var(--harmony-static-white);
+  background-color: var(--button-color);
+  --overlay-color: var(--harmony-static-black);
+  --overlay-opacity: 0.2;
+  box-shadow: none;
 }
 
 /* Tertiary */
 .tertiary {
-  --button-color: var(--harmony-border-strong);
-  --text-color: var(--harmony-secondary);
+  --button-color: var(--harmony-n-300);
+  --text-color: var(--harmony-text-default);
   background: var(--harmony-static-white);
 }
 .tertiary:hover {
-  --text-color: var(--harmony-secondary);
   box-shadow: var(--harmony-shadow-mid);
 }
 .tertiary:active {
-  --overlay-color: var(--harmony-static-black);
-  --overlay-opacity: 0.2;
+  background-color: var(--harmony-n-50);
+  box-shadow: none;
 }
 
 /* Destructive */
 .destructive {
   --button-color: var(--harmony-red);
-  --text-color: var(--harmony-red);
-  background: transparent;
+  --text-color: var(--harmony-static-white);
 }
 .destructive:hover {
-  --text-color: var(--harmony-static-white);
-  background: var(--button-color);
+  --overlay-color: var(--harmony-static-white);
+  --overlay-opacity: 0.1;
+  box-shadow: var(--harmony-shadow-mid);
 }
 .destructive:active {
-  --button-color: var(--harmony-dark-red);
-  --text-color: var(--harmony-static-white);
-  background: var(--button-color);
+  --overlay-color: var(--harmony-static-black);
+  --overlay-opacity: 0.2;
+  box-shadow: none;
 }
 
-/* Ghost */
-.ghost {
+/* Destructive Secondary */
+.destructiveSecondary {
   --button-color: var(--harmony-n-300);
-  --text-color: var(--harmony-text-default);
-  background: transparent;
+    --text-color: var(--harmony-text-default);
+    background: transparent;
+    box-shadow: none;
 }
-.ghost:hover {
-  --button-color: var(--harmony-neutral);
+.destructiveSecondary:hover {
+  --button-color: var(--harmony-red);
+  --text-color: var(--harmony-static-white);
+  --overlay-color: var(--harmony-static-white);
+  --overlay-opacity: 0.1;
+  background-color: var(--button-color);
+  box-shadow: var(--harmony-shadow-mid);
 }
-.ghost:active {
-  --button-color: var(--harmony-n-300);
-  background: var(--harmony-bg-surface-2);
+.destructiveSecondary:active {
+  --button-color: var(--harmony-red);
+  --text-color: var(--harmony-static-white);  --overlay-color: var(--harmony-static-black);
+  --overlay-opacity: 0.2;
+  background-color: var(--button-color);
+  box-shadow: none;
 }
 
 /* Disabled states */
-.primary.disabled {
+.disabled {
+  box-shadow: none;
+}
+
+.primary.disabled,
+.secondary.disabled,
+.destructiveSecondary.disabled {
   --button-color: var(--harmony-n-150);
-  --text-color: var(--harmony-text-default);
+  --text-color: var(--harmony-static-white);
+  background-color: var(--harmony-n-150);
+  border-color: var(--harmony-n-150);
+}
+
+.destructive.disabled,
+.tertiary.disabled {
+  opacity: 0.45;
 }
 
 /* Plain */
@@ -187,10 +215,3 @@
   padding: 0;
   height: 100%;
 }
-
-.secondary.disabled,
-.tertiary.disabled,
-.destructive.disabled,
-.ghost.disabled {
-  opacity: 0.45;
-}
diff --git a/packages/harmony/src/components/button/Button.stories.tsx b/packages/harmony/src/components/button/Button.stories.tsx
@@ -46,7 +46,7 @@ type Story = StoryObj<typeof Button>
 export const Primary: Story = {}
 
 // Primary w/ color
-export const PrimaryWithColor: Story = { args: { color: 'blue' } }
+export const PrimaryWithColor: Story = { args: { hexColor: '#13C65A' } }
 
 // Secondary
 export const Secondary: Story = { args: { variant: ButtonType.SECONDARY } }
@@ -57,5 +57,7 @@ export const Tertiary: Story = { args: { variant: ButtonType.TERTIARY } }
 // Destructive
 export const Destructive: Story = { args: { variant: ButtonType.DESTRUCTIVE } }
 
-// Ghost
-export const Ghost: Story = { args: { variant: ButtonType.GHOST } }
+// Destructive Secondary
+export const DestructiveSecondary: Story = {
+  args: { variant: ButtonType.DESTRUCTIVE_SECONDARY }
+}
diff --git a/packages/harmony/src/components/button/Button.tsx b/packages/harmony/src/components/button/Button.tsx
@@ -24,7 +24,7 @@ const TYPE_STYLE_MAP: { [k in ButtonType]: string } = {
   [ButtonType.SECONDARY]: styles.secondary,
   [ButtonType.TERTIARY]: styles.tertiary,
   [ButtonType.DESTRUCTIVE]: styles.destructive,
-  [ButtonType.GHOST]: styles.ghost
+  [ButtonType.DESTRUCTIVE_SECONDARY]: styles.destructiveSecondary
 }
 
 /**
@@ -35,6 +35,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   function Button(props, ref) {
     const {
       color,
+      hexColor,
       variant = ButtonType.PRIMARY,
       size = ButtonSize.DEFAULT,
       disabled,
@@ -43,7 +44,11 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     const style: CSSCustomProperties = {
       '--button-color':
-        !disabled && color ? `var(${toCSSVariableName(color)})` : undefined
+        !disabled && hexColor
+          ? hexColor
+          : color
+          ? `var(${toCSSVariableName(color)})`
+          : undefined
     }
 
     const [buttonSizeClass, iconSizeClass, textSizeClass] = SIZE_STYLE_MAP[size]

diff --git a/packages/harmony/src/components/button/types.ts b/packages/harmony/src/components/button/types.ts
@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react'
+import type { ComponentPropsWithoutRef } from 'react'
 
 import type { IconComponent } from '../../components/typography/Icons/types'
 import type { ColorValue } from '../../types/colors'
@@ -8,7 +8,7 @@ export enum ButtonType {
   SECONDARY = 'secondary',
   TERTIARY = 'tertiary',
   DESTRUCTIVE = 'destructive',
-  GHOST = 'ghost'
+  DESTRUCTIVE_SECONDARY = 'destructive_secondary'
 }
 
 export enum ButtonSize {
@@ -32,7 +32,7 @@ export type BaseButtonProps = {
   /**
    * The text of the button
    */
-  text: ReactNode
+  text?: string
 
   /**
    * Optional icon element to include on the left side of the button
@@ -73,6 +73,11 @@ export type ButtonProps = {
    */
   color?: ColorValue
 
+  /**
+   * Override the color of the button using any hex color, only valid for the `PRIMARY` variant
+   */
+  hexColor?: `#${string}`
+
   /**
    * The type of the button
    */