From a33fa45b7483b5e11f8c74d8663c3b0453307cb4 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 12 Jan 2024 11:35:47 -0600
Subject: [PATCH] Button colors

---
 src/alf/themes.ts       |  8 ++++++--
 src/alf/tokens.ts       |  1 +
 src/view/com/Button.tsx | 26 ++++++++++++++++----------
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/alf/themes.ts b/src/alf/themes.ts
index 4be901c647..614bab66f1 100644
--- a/src/alf/themes.ts
+++ b/src/alf/themes.ts
@@ -8,6 +8,8 @@ export type ReadonlyPalette = typeof lightPalette
 export type Palette = Mutable<ReadonlyPalette>
 
 export const lightPalette = {
+  white: tokens.color.white,
+  black: tokens.color.black,
   primary: tokens.color.blue_500,
   positive: tokens.color.green_500,
   negative: tokens.color.red_500,
@@ -26,9 +28,11 @@ export const lightPalette = {
 } as const
 
 export const darkPalette: Palette = {
+  white: tokens.color.white,
+  black: tokens.color.black,
   primary: tokens.color.blue_500,
-  positive: tokens.color.green_400,
-  negative: tokens.color.red_400,
+  positive: tokens.color.green_500,
+  negative: tokens.color.red_500,
 
   contrast_25: tokens.color.gray_900,
   contrast_50: tokens.color.gray_800,
diff --git a/src/alf/tokens.ts b/src/alf/tokens.ts
index 564c7fc8e1..34bef53bd7 100644
--- a/src/alf/tokens.ts
+++ b/src/alf/tokens.ts
@@ -1,5 +1,6 @@
 export const color = {
   white: '#FFFFFF',
+  black: '#000000',
 
   gray_25: `#FCFCFD`,
   gray_50: `#F9FAFB`,
diff --git a/src/view/com/Button.tsx b/src/view/com/Button.tsx
index be3c0d67ab..62227b5830 100644
--- a/src/view/com/Button.tsx
+++ b/src/view/com/Button.tsx
@@ -106,23 +106,29 @@ export function Button({
       case 'primary': {
         if (disabled) {
           baseStyles.push({
-            backgroundColor: tokens.color.blue_300,
+            backgroundColor: tokens.color.blue_200,
           })
         } else {
           baseStyles.push({
             backgroundColor: tokens.color.blue_500,
           })
+          hoverStyles.push({
+            backgroundColor: tokens.color.blue_600,
+          })
         }
         break
       }
       case 'secondary': {
         if (disabled) {
           baseStyles.push({
-            backgroundColor: tokens.color.gray_100,
+            backgroundColor: tokens.color.gray_200,
           })
         } else {
           baseStyles.push({
-            backgroundColor: tokens.color.gray_200,
+            backgroundColor: tokens.color.gray_300,
+          })
+          hoverStyles.push({
+            backgroundColor: tokens.color.gray_400,
           })
         }
         break
@@ -145,16 +151,16 @@ export function Button({
     switch (size) {
       case 'large': {
         baseStyles.push(
-          atoms.py_md,
-          atoms.px_xl,
-          atoms.rounded_md,
+          {paddingVertical: 15},
+          atoms.px_2xl,
+          atoms.rounded_sm,
           atoms.gap_sm,
         )
         break
       }
       case 'small': {
         baseStyles.push(
-          atoms.py_sm,
+          {paddingVertical: 9},
           atoms.px_md,
           atoms.rounded_sm,
           atoms.gap_xs,
@@ -239,11 +245,11 @@ export function ButtonText({
       case 'secondary': {
         if (disabled) {
           baseStyles.push({
-            color: tokens.color.gray_500,
+            color: tokens.color.gray_400,
           })
         } else {
           baseStyles.push({
-            color: tokens.color.gray_700,
+            color: tokens.color.gray_800,
           })
         }
         break
@@ -261,7 +267,7 @@ export function ButtonText({
     switch (size) {
       case 'small': {
         baseStyles.push(
-          atoms.text_sm,
+          atoms.text_md,
           web({paddingBottom: 1}),
           native({marginTop: 2}),
         )