Button colors

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,
+  positive: tokens.color.green_500,
-  negative: tokens.color.red_400,
+  negative: tokens.color.red_500,
 
   contrast_25: tokens.color.gray_900,
   contrast_50: tokens.color.gray_800,

src/alf/tokens.ts

@@ -1,5 +1,6 @@
 export const color = {
   white: '#FFFFFF',
+  black: '#000000',
 
   gray_25: `#FCFCFD`,
   gray_50: `#F9FAFB`,

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,
+          {paddingVertical: 15},
-          atoms.px_xl,
+          atoms.px_2xl,
-          atoms.rounded_md,
+          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}),
         )