@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

package/src/components/Button/ButtonRoot.tsx

@@ -7,7 +7,7 @@ import type { BaseButtonProps } from './Button.props';
 
 const ButtonRoot = ({
   children,
-  colorScheme = 'yellow',
+  colorScheme = 'highlight',
   variant = 'solid',
   size = 'md',
   inverted = false,
@@ -59,17 +59,17 @@ const styles = StyleSheet.create(theme => ({
       '_focus-visible': {
         outlineStyle: 'solid',
         outlineWidth: 2,
-        outlineColor: theme.components.focus.border,
+        outlineColor: theme.color.focus.primary,
         outlineOffset: 1,
         boxShadow: 'none',
       },
     },
     variants: {
       colorScheme: {
-        yellow: {},
-        green: {},
-        red: {},
-        grey: {},
+        highlight: {},
+        affirmative: {},
+        destructive: {},
+        functional: {},
       },
       disabled: {
         true: {
@@ -80,7 +80,7 @@ const styles = StyleSheet.create(theme => ({
         true: {
           _web: {
             '_focus-visible': {
-              outlineColor: theme.components.focus.borderInverted,
+              outlineColor: theme.color.focus.inverted,
             },
           },
         },
@@ -90,11 +90,11 @@ const styles = StyleSheet.create(theme => ({
       },
       variant: {
         emphasis: {
-          borderColor: theme.components.button.emphasis.borderColor,
-          boxShadow: `${theme.shadow.mobile.sm.x}px ${theme.shadow.mobile.sm.y}px ${theme.shadow.mobile.sm.spread}px ${theme.components.button.emphasis.shadowColor}`,
+          borderColor: theme.color.interactive.highlight.border.strong,
+          boxShadow: `${theme.shadow.mobile.sm.x}px ${theme.shadow.mobile.sm.y}px ${theme.shadow.mobile.sm.spread}px ${theme.color.shadow.default}`,
         },
         solid: {
-          borderColor: theme.components.button.solid.borderColor,
+          borderColor: theme.color.interactive.highlight.border.strong,
         },
         outline: {
           backgroundColor: 'transparent',
@@ -148,301 +148,291 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         variant: 'emphasis',
-        colorScheme: 'yellow',
+        colorScheme: 'highlight',
         styles: {
-          backgroundColor: theme.components.button.emphasis.yellow.backgroundColor,
-          borderColor: theme.components.button.emphasis.borderColor,
+          backgroundColor: theme.color.interactive.highlight.surface.strong.default,
+          borderColor: theme.color.interactive.highlight.border.strong,
           _web: {
             _hover: {
-              backgroundColor: theme.components.button.emphasis.yellow.backgroundColorHover,
+              backgroundColor: theme.color.interactive.highlight.surface.strong.hover,
             },
             _active: {
-              backgroundColor: theme.components.button.emphasis.yellow.backgroundColorActive,
+              backgroundColor: theme.color.interactive.highlight.surface.strong.active,
             },
           },
         },
       },
       {
         variant: 'emphasis',
-        colorScheme: 'yellow',
+        colorScheme: 'highlight',
         active: true,
         styles: {
-          backgroundColor: theme.components.button.emphasis.yellow.backgroundColorActive,
+          backgroundColor: theme.color.interactive.highlight.surface.strong.active,
         },
       },
       // Solid
       // Solid Yellow
       {
         variant: 'solid',
-        colorScheme: 'yellow',
+        colorScheme: 'highlight',
         styles: {
-          backgroundColor: theme.components.button.solid.yellow.backgroundColor,
+          backgroundColor: theme.color.interactive.highlight.surface.strong.default,
           _web: {
             _hover: {
-              backgroundColor: theme.components.button.solid.yellow.backgroundColorHover,
+              backgroundColor: theme.color.interactive.highlight.surface.strong.hover,
             },
             _active: {
-              backgroundColor: theme.components.button.solid.yellow.backgroundColorActive,
+              backgroundColor: theme.color.interactive.highlight.surface.strong.active,
             },
           },
         },
       },
       {
         variant: 'solid',
-        colorScheme: 'yellow',
+        colorScheme: 'highlight',
         active: true,
         styles: {
-          backgroundColor: theme.components.button.solid.yellow.backgroundColorActive,
+          backgroundColor: theme.color.interactive.highlight.surface.strong.active,
         },
       },
       // Solid Green
       {
         variant: 'solid',
-        colorScheme: 'green',
+        colorScheme: 'affirmative',
         styles: {
-          backgroundColor: theme.components.button.solid.green.backgroundColor,
+          backgroundColor: theme.color.interactive.affirmative.surface.strong.default,
           _web: {
             _hover: {
-              backgroundColor: theme.components.button.solid.green.backgroundColorHover,
+              backgroundColor: theme.color.interactive.affirmative.surface.strong.hover,
             },
             _active: {
-              backgroundColor: theme.components.button.solid.green.backgroundColorActive,
+              backgroundColor: theme.color.interactive.affirmative.surface.strong.active,
             },
           },
         },
       },
       {
         variant: 'solid',
-        colorScheme: 'green',
+        colorScheme: 'affirmative',
         active: true,
         styles: {
-          backgroundColor: theme.components.button.solid.green.backgroundColorActive,
+          backgroundColor: theme.color.interactive.affirmative.surface.strong.active,
         },
       },
       // Solid Red
       {
         variant: 'solid',
-        colorScheme: 'red',
+        colorScheme: 'destructive',
         styles: {
-          backgroundColor: theme.components.button.solid.red.backgroundColor,
+          backgroundColor: theme.color.interactive.destructive.surface.strong.default,
           _web: {
             _hover: {
-              backgroundColor: theme.components.button.solid.red.backgroundColorHover,
+              backgroundColor: theme.color.interactive.destructive.surface.strong.hover,
             },
             _active: {
-              backgroundColor: theme.components.button.solid.red.backgroundColorActive,
+              backgroundColor: theme.color.interactive.destructive.surface.strong.active,
             },
           },
         },
       },
       {
         variant: 'solid',
-        colorScheme: 'red',
+        colorScheme: 'destructive',
         active: true,
         styles: {
-          backgroundColor: theme.components.button.solid.red.backgroundColorActive,
+          backgroundColor: theme.color.interactive.destructive.surface.strong.active,
         },
       },
       // Outline
       // Outline Grey
       {
         variant: 'outline',
-        colorScheme: 'grey',
+        colorScheme: 'functional',
         styles: {
-          borderColor: theme.components.button.outline.grey.borderColor,
+          borderColor: theme.color.interactive.functional.border.subtle,
           _web: {
             _hover: {
-              backgroundColor: theme.components.button.outline.grey.backgroundColorHover,
+              backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
             },
             _active: {
-              backgroundColor: theme.components.button.outline.grey.backgroundColorActive,
+              backgroundColor: theme.color.interactive.functional.surface.subtle.active,
             },
           },
         },
       },
       {
         variant: 'outline',
-        colorScheme: 'grey',
+        colorScheme: 'functional',
         active: true,
         styles: {
-          backgroundColor: theme.components.button.outline.grey.backgroundColorActive,
+          backgroundColor: theme.color.interactive.functional.surface.subtle.active,
         },
       },
       {
         variant: 'outline',
-        colorScheme: 'grey',
+        colorScheme: 'functional',
         inverted: true,
         styles: {
-          borderColor: theme.components.button.outline.grey.inverted.borderColor,
+          borderColor: theme.color.interactive.functional.border.inverted,
           _web: {
             _hover: {
-              backgroundColor: theme.components.button.outline.grey.inverted.backgroundColorHover,
+              backgroundColor: theme.color.interactive.functional.surface.subtle.inverted.hover,
             },
             _active: {
-              backgroundColor: theme.components.button.outline.grey.inverted.backgroundColorActive,
+              backgroundColor: theme.color.interactive.functional.surface.subtle.inverted.active,
             },
           },
         },
       },
       {
         variant: 'outline',
-        colorScheme: 'grey',
+        colorScheme: 'functional',
         inverted: true,
         active: true,
         styles: {
-          backgroundColor: theme.components.button.outline.grey.inverted.backgroundColorActive,
-        },
-      },
-      {
-        variant: 'outline',
-        colorScheme: 'grey',
-        inverted: true,
-        active: true,
-        styles: {
-          backgroundColor: theme.components.button.outline.grey.inverted.backgroundColorActive,
+          backgroundColor: theme.color.interactive.functional.surface.subtle.inverted.active,
         },
       },
       // Outline Green
-
       {
         variant: 'outline',
-        colorScheme: 'green',
+        colorScheme: 'affirmative',
         styles: {
-          borderColor: theme.components.button.outline.green.borderColor,
+          borderColor: theme.color.interactive.affirmative.border.subtle,
           _web: {
             _hover: {
-              backgroundColor: theme.components.button.outline.green.backgroundColorHover,
+              backgroundColor: theme.color.interactive.affirmative.surface.subtle.hover,
             },
             _active: {
-              backgroundColor: theme.components.button.outline.green.backgroundColorActive,
+              backgroundColor: theme.color.interactive.affirmative.surface.subtle.active,
             },
           },
         },
       },
       {
         variant: 'outline',
-        colorScheme: 'green',
+        colorScheme: 'affirmative',
         active: true,
         styles: {
-          backgroundColor: theme.components.button.outline.green.backgroundColorActive,
+          backgroundColor: theme.color.interactive.affirmative.surface.subtle.active,
         },
       },
       // Outline Red
       {
         variant: 'outline',
-        colorScheme: 'red',
+        colorScheme: 'destructive',
         styles: {
-          borderColor: theme.components.button.outline.red.borderColor,
+          borderColor: theme.color.interactive.destructive.border.subtle,
           _web: {
             _hover: {
-              backgroundColor: theme.components.button.outline.red.backgroundColorHover,
+              backgroundColor: theme.color.interactive.destructive.surface.subtle.hover,
             },
             _active: {
-              backgroundColor: theme.components.button.outline.red.backgroundColorActive,
+              backgroundColor: theme.color.interactive.destructive.surface.subtle.active,
             },
           },
         },
       },
       {
         variant: 'outline',
-        colorScheme: 'red',
+        colorScheme: 'destructive',
         active: true,
         styles: {
-          backgroundColor: theme.components.button.outline.red.backgroundColorActive,
+          backgroundColor: theme.color.interactive.destructive.surface.subtle.active,
         },
       },
       // Ghost
       // Ghost Grey
       {
         variant: 'ghost',
-        colorScheme: 'grey',
+        colorScheme: 'functional',
         styles: {
           _web: {
             _hover: {
-              backgroundColor: theme.components.button.ghost.grey.backgroundColorHover,
+              backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
             },
             _active: {
-              backgroundColor: theme.components.button.ghost.grey.backgroundColorActive,
+              backgroundColor: theme.color.interactive.functional.surface.subtle.active,
             },
           },
         },
       },
       {
         variant: 'ghost',
-        colorScheme: 'grey',
+        colorScheme: 'functional',
         active: true,
         styles: {
-          backgroundColor: theme.components.button.ghost.grey.backgroundColorActive,
+          backgroundColor: theme.color.interactive.functional.surface.subtle.active,
         },
       },
       {
         variant: 'ghost',
-        colorScheme: 'grey',
+        colorScheme: 'functional',
         inverted: true,
         styles: {
           _web: {
             _hover: {
-              backgroundColor: theme.components.button.ghost.grey.inverted.backgroundColorHover,
+              backgroundColor: theme.color.interactive.functional.surface.subtle.inverted.hover,
             },
             _active: {
-              backgroundColor: theme.components.button.ghost.grey.inverted.backgroundColorActive,
+              backgroundColor: theme.color.interactive.functional.surface.subtle.inverted.active,
             },
           },
         },
       },
       {
         variant: 'ghost',
-        colorScheme: 'grey',
+        colorScheme: 'functional',
         inverted: true,
         active: true,
         styles: {
-          backgroundColor: theme.components.button.ghost.grey.inverted.backgroundColorActive,
+          backgroundColor: theme.color.interactive.functional.surface.subtle.inverted.active,
         },
       },
       // Ghost Green
       {
         variant: 'ghost',
-        colorScheme: 'green',
+        colorScheme: 'affirmative',
         styles: {
           _web: {
             _hover: {
-              backgroundColor: theme.components.button.ghost.green.backgroundColorHover,
+              backgroundColor: theme.color.interactive.affirmative.surface.subtle.hover,
             },
             _active: {
-              backgroundColor: theme.components.button.ghost.green.backgroundColorActive,
+              backgroundColor: theme.color.interactive.affirmative.surface.subtle.active,
             },
           },
         },
       },
       {
         variant: 'ghost',
-        colorScheme: 'green',
+        colorScheme: 'affirmative',
         active: true,
         styles: {
-          backgroundColor: theme.components.button.ghost.green.backgroundColorActive,
+          backgroundColor: theme.color.interactive.affirmative.surface.subtle.active,
         },
       },
       // Ghost Red
       {
         variant: 'ghost',
-        colorScheme: 'red',
+        colorScheme: 'destructive',
         styles: {
           _web: {
             _hover: {
-              backgroundColor: theme.components.button.ghost.red.backgroundColorHover,
+              backgroundColor: theme.color.interactive.destructive.surface.subtle.hover,
             },
             _active: {
-              backgroundColor: theme.components.button.ghost.red.backgroundColorActive,
+              backgroundColor: theme.color.interactive.destructive.surface.subtle.active,
             },
           },
         },
       },
       {
         variant: 'ghost',
-        colorScheme: 'red',
+        colorScheme: 'destructive',
         active: true,
         styles: {
-          backgroundColor: theme.components.button.ghost.red.backgroundColorActive,
+          backgroundColor: theme.color.interactive.destructive.surface.subtle.active,
         },
       },
     ],

package/src/components/Button/ButtonSpinner.tsx

@@ -1,56 +1,53 @@
 import { useMemo } from 'react';
-import { Spinner } from '../Spinner';
-import type { SpinnerProps } from '../Spinner';
-import { useButtonContext } from './Button.context';
 import { useTheme } from '../../hooks';
 import { ColorValue } from '../../types';
+import type { SpinnerProps } from '../Spinner';
+import { Spinner } from '../Spinner';
+import { useButtonContext } from './Button.context';
 
 const ButtonSpinner = ({ color, ...props }: Omit<SpinnerProps, 'size'>) => {
   const { colorScheme, variant, disabled, inverted } = useButtonContext();
-  const { components, colorMode } = useTheme();
+  const { color: themeColor, colorMode } = useTheme();
 
   const colorProp = useMemo(() => {
-    if (variant === 'emphasis' && colorScheme === 'yellow' && inverted) {
-      return components.button.emphasis.yellow.foregroundColor;
-    }
-    if (variant === 'emphasis' && colorScheme === 'yellow') {
-      return components.button.emphasis.yellow.foregroundColor;
+    if (variant === 'emphasis' && colorScheme === 'highlight') {
+      return themeColor.interactive.highlight.foreground.strong;
     }
-    if (variant === 'solid' && colorScheme === 'yellow' && inverted) {
-      return components.button.solid.yellow.inverted.foregroundColor;
+    if (variant === 'solid' && colorScheme === 'highlight') {
+      return themeColor.interactive.highlight.foreground.strong;
     }
-    if (variant === 'solid' && colorScheme === 'yellow') {
-      return components.button.solid.yellow.foregroundColor;
+    if (variant === 'solid' && colorScheme === 'destructive') {
+      return themeColor.interactive.destructive.foreground.strong;
     }
-    if (variant === 'solid' && colorScheme === 'red') {
-      return components.button.solid.red.foregroundColor;
+    if (variant === 'solid' && colorScheme === 'affirmative') {
+      return themeColor.interactive.affirmative.foreground.strong;
     }
-    if (variant === 'solid' && colorScheme === 'green') {
-      return components.button.solid.green.foregroundColor;
+    if (variant === 'outline' && colorScheme === 'destructive') {
+      return themeColor.interactive.destructive.foreground.subtle;
     }
-    if (variant === 'outline' && colorScheme === 'red') {
-      return components.button.outline.red.foregroundColor;
+    if (variant === 'outline' && colorScheme === 'affirmative') {
+      return themeColor.interactive.affirmative.foreground.subtle;
     }
-    if (variant === 'outline' && colorScheme === 'green') {
-      return components.button.outline.green.foregroundColor;
+    if (variant === 'outline' && colorScheme === 'functional' && inverted) {
+      return themeColor.interactive.functional.foreground.strong;
     }
-    if (variant === 'outline' && colorScheme === 'grey' && inverted) {
-      return components.button.outline.grey.inverted.foregroundColor;
+    if (variant === 'outline' && colorScheme === 'functional') {
+      return themeColor.interactive.functional.foreground.subtle;
     }
-    if (variant === 'outline' && colorScheme === 'grey') {
-      return components.button.outline.grey.foregroundColor;
+    if (variant === 'ghost' && colorScheme === 'destructive') {
+      return themeColor.interactive.destructive.foreground.subtle;
     }
-    if (variant === 'ghost' && colorScheme === 'red') {
-      return components.button.ghost.red.foregroundColor;
+    if (variant === 'ghost' && colorScheme === 'affirmative') {
+      return themeColor.interactive.affirmative.foreground.subtle;
     }
-    if (variant === 'ghost' && colorScheme === 'green') {
-      return components.button.ghost.green.foregroundColor;
+    if (variant === 'ghost' && colorScheme === 'functional' && inverted) {
+      return themeColor.interactive.functional.foreground.strong;
     }
-    if (variant === 'ghost' && colorScheme === 'grey' && inverted) {
-      return components.button.ghost.grey.inverted.foregroundColor;
+    if (variant === 'ghost' && colorScheme === 'functional') {
+      return themeColor.interactive.functional.foreground.subtle;
     }
-    if (variant === 'ghost' && colorScheme === 'grey') {
-      return components.button.ghost.grey.foregroundColor;
+    if (variant === 'ghost' && colorScheme === 'destructive') {
+      return themeColor.interactive.destructive.foreground.subtle;
     }
     return color;
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/Button/ButtonText.tsx

@@ -25,10 +25,10 @@ const styles = StyleSheet.create(theme => ({
         ghost: {},
       },
       colorScheme: {
-        yellow: {},
-        red: {},
-        green: {},
-        grey: {},
+        highlight: {},
+        destructive: {},
+        affirmative: {},
+        functional: {},
       },
       inverted: {
         true: {},
@@ -40,74 +40,88 @@ const styles = StyleSheet.create(theme => ({
     compoundVariants: [
       {
         variant: 'emphasis',
-        colorScheme: 'yellow',
+        colorScheme: 'highlight',
         styles: {
-          color: theme.components.button.emphasis.yellow.foregroundColor,
+          color: theme.color.interactive.highlight.foreground.strong,
         },
       },
       {
         variant: 'solid',
-        colorScheme: 'yellow',
+        colorScheme: 'highlight',
         styles: {
-          color: theme.components.button.solid.yellow.foregroundColor,
+          color: theme.color.interactive.highlight.foreground.strong,
         },
       },
       {
         variant: 'solid',
-        colorScheme: 'red',
+        colorScheme: 'destructive',
         styles: {
-          color: theme.components.button.solid.red.foregroundColor,
+          color: theme.color.interactive.destructive.foreground.strong,
         },
       },
       {
         variant: 'solid',
-        colorScheme: 'green',
+        colorScheme: 'affirmative',
         styles: {
-          color: theme.components.button.solid.green.foregroundColor,
+          color: theme.color.interactive.affirmative.foreground.strong,
         },
       },
       {
         variant: 'outline',
-        colorScheme: 'red',
+        colorScheme: 'destructive',
         styles: {
-          color: theme.components.button.outline.red.foregroundColor,
+          color: theme.color.interactive.destructive.foreground.subtle,
         },
       },
       {
         variant: 'outline',
-        colorScheme: 'green',
+        colorScheme: 'affirmative',
         styles: {
-          color: theme.components.button.outline.green.foregroundColor,
+          color: theme.color.interactive.affirmative.foreground.subtle,
+        },
+      },
+      {
+        variant: 'outline',
+        colorScheme: 'functional',
+        styles: {
+          color: theme.color.interactive.functional.foreground.subtle,
+        },
+      },
+      {
+        variant: 'outline',
+        colorScheme: 'functional',
+        inverted: true,
+        styles: {
+          color: theme.color.interactive.functional.foreground.strong,
         },
       },
       {
         variant: 'ghost',
-        colorScheme: 'red',
+        colorScheme: 'destructive',
         styles: {
-          color: theme.components.button.ghost.red.foregroundColor,
+          color: theme.color.interactive.destructive.foreground.subtle,
         },
       },
       {
         variant: 'ghost',
-        colorScheme: 'green',
+        colorScheme: 'affirmative',
         styles: {
-          color: theme.components.button.ghost.green.foregroundColor,
+          color: theme.color.interactive.affirmative.foreground.subtle,
         },
       },
       {
-        variant: 'outline',
-        colorScheme: 'grey',
-        inverted: true,
+        variant: 'ghost',
+        colorScheme: 'functional',
         styles: {
-          color: theme.components.button.outline.grey.inverted.foregroundColor,
+          color: theme.color.interactive.functional.foreground.subtle,
         },
       },
       {
         variant: 'ghost',
-        colorScheme: 'grey',
+        colorScheme: 'functional',
         inverted: true,
         styles: {
-          color: theme.components.button.outline.grey.inverted.foregroundColor,
+          color: theme.color.interactive.functional.foreground.strong,
         },
       },
     ],