Design system tweaks (#2822)

* Tweak palette, theme naming, update usages

* Update Typography, replace the few usages

src/components/forms/TextField.tsx

@@ -241,7 +241,8 @@ export const Input = createInput(TextInput)
 export function Label({children}: React.PropsWithChildren<{}>) {
   const t = useTheme()
   return (
-    <Text style={[a.text_sm, a.font_bold, t.atoms.text_contrast_600, a.mb_sm]}>
+    <Text
+      style={[a.text_sm, a.font_bold, t.atoms.text_contrast_medium, a.mb_sm]}>
       {children}
     </Text>
   )
@@ -315,7 +316,7 @@ export function Suffix({
         a.z_20,
         a.pr_sm,
         a.text_md,
-        t.atoms.text_contrast_400,
+        t.atoms.text_contrast_medium,
         {
           pointerEvents: 'none',
         },

src/components/forms/Toggle.tsx

@@ -347,7 +347,7 @@ export function Checkbox() {
         a.align_center,
         a.border,
         a.rounded_xs,
-        t.atoms.border_contrast,
+        t.atoms.border_contrast_high,
         {
           height: 20,
           width: 20,
@@ -393,7 +393,7 @@ export function Switch() {
         a.border,
         a.rounded_full,
         t.atoms.bg,
-        t.atoms.border_contrast,
+        t.atoms.border_contrast_high,
         {
           height: 20,
           width: 30,
@@ -445,7 +445,7 @@ export function Radio() {
         a.align_center,
         a.border,
         a.rounded_full,
-        t.atoms.border_contrast,
+        t.atoms.border_contrast_high,
         {
           height: 20,
           width: 20,

src/components/forms/ToggleButton.tsx

@@ -25,7 +25,7 @@ export function Group({children, multiple, ...props}: GroupProps) {
           a.border,
           a.rounded_sm,
           a.overflow_hidden,
-          t.atoms.border,
+          t.atoms.border_contrast_low,
         ]}>
         {children}
       </View>
@@ -103,7 +103,7 @@ function ButtonInner({children}: React.PropsWithChildren<{}>) {
         }),
         a.px_sm,
         t.atoms.bg,
-        t.atoms.border,
+        t.atoms.border_contrast_low,
         baseStyles,
         activeStyles,
         (state.hovered || state.focused || state.pressed) && hoverStyles,
@@ -113,7 +113,7 @@ function ButtonInner({children}: React.PropsWithChildren<{}>) {
           style={[
             a.text_center,
             a.font_bold,
-            t.atoms.text_contrast_500,
+            t.atoms.text_contrast_medium,
             textStyles,
           ]}>
           {children}