fix(buttons): add inverted, disabled, and active modes to button

Author: oleast

components/common/Button.tsx

@@ -12,6 +12,9 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   className?: string;
   disableTracking?: boolean;
   variant?: Variant;
+  disabled?: boolean;
+  active?: boolean;
+  invertedActive?: boolean;
 }
 
 export const Button: FC<Props> = ({
@@ -21,10 +24,13 @@ export const Button: FC<Props> = ({
   variant = 'button',
   onClick,
   children,
+  disabled = false,
+  active = false,
+  invertedActive = false,
   ...props
 }) => {
-  const handleClick: typeof onClick = (...props) => {
-    onClick?.(...props);
+  const handleClick: typeof onClick = (...params) => {
+    onClick?.(...params);
     if (!disableTracking) {
       const value = extractTextFromElement(children);
       trackEvent({ action: 'click', category: 'button', value });
@@ -36,9 +42,13 @@ export const Button: FC<Props> = ({
       className={cx(className, styles.base, {
         [styles.buttonVariant]: variant === 'button',
         [styles.linkVariant]: variant === 'link',
+        [styles.disabled]: disabled,
+        [styles.active]: active,
+        [styles.inverted]: invertedActive,
       })}
       type={type}
       onClick={handleClick}
+      disabled={disabled}
       {...props}
     >
       {children}

components/common/button.module.scss

@@ -16,6 +16,32 @@
   &:hover {
     border: solid 1px var(--text-color);
   }
+
+  &:disabled,
+  &.disabled {
+    cursor: auto;
+  }
+
+  &:focus,
+  &:focus-visible,
+  &:active,
+  &.active {
+    border: solid 1px var(--text-color);
+  }
+
+  &.active,
+  &:active {
+    &.inverted {
+      color: var(--inverted-text-color);
+      background-color: var(--inverted-background-color-offset);
+      outline: 0;
+    }
+  }
+
+  &:not(:focus, :focus-visible, :active, .active) {
+    border: none;
+    outline: 0;
+  }
 }
 
 .linkVariant {

pages/global.scss

@@ -77,18 +77,27 @@
     --text-color: var(--white-base);
     --background-color: var(--black-base);
     --background-color-offset: var(--black-base-offset);
+    --inverted-text-color: var(--black-text);
+    --inverted-background-color: var(--white-base);
+    --inverted-background-color-offset: var(--white-offset);
   }
 
   @media (prefers-color-scheme: light) {
-    --background-color: var(--white-base);
     --text-color: var(--black-text);
+    --background-color: var(--white-base);
     --background-color-offset: var(--white-offset);
+    --inverted-text-color: var(--white-base);
+    --inverted-background-color: var(--black-base);
+    --inverted-background-color-offset: var(--black-base-offset);
   }
 
   [data-reach-dialog-content] {
-    --background-color: var(--white-base);
     --text-color: var(--black-text);
+    --background-color: var(--white-base);
     --background-color-offset: var(--white-offset);
+    --inverted-text-color: var(--white-base);
+    --inverted-background-color: var(--black-base);
+    --inverted-background-color-offset: var(--black-base-offset);
   }
 }