@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

package/build/components/Button/ButtonRoot.js

@@ -4,7 +4,7 @@ import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useCardActionContext } from '../Card';
 import { ButtonContext } from './Button.context';
-const ButtonRoot = ({ children, colorScheme = 'yellow', variant = 'solid', size = 'md', inverted = false, states, onPress, paddingNone = false, ...props }) => {
+const ButtonRoot = ({ children, colorScheme = 'highlight', variant = 'solid', size = 'md', inverted = false, states, onPress, paddingNone = false, ...props }) => {
     const { active, disabled = false } = states || {};
     const { pressed } = useCardActionContext();
     styles.useVariants({
@@ -35,17 +35,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: {
@@ -56,7 +56,7 @@ const styles = StyleSheet.create(theme => ({
                 true: {
                     _web: {
                         '_focus-visible': {
-                            outlineColor: theme.components.focus.borderInverted,
+                            outlineColor: theme.color.focus.inverted,
                         },
                     },
                 },
@@ -66,11 +66,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',
@@ -124,300 +124,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/build/components/Button/ButtonSpinner.js

@@ -1,53 +1,50 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
+import { useTheme } from '../../hooks';
 import { Spinner } from '../Spinner';
 import { useButtonContext } from './Button.context';
-import { useTheme } from '../../hooks';
 const ButtonSpinner = ({ color, ...props }) => {
     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/build/components/Button/ButtonText.js

@@ -18,10 +18,10 @@ const styles = StyleSheet.create(theme => ({
                 ghost: {},
             },
             colorScheme: {
-                yellow: {},
-                red: {},
-                green: {},
-                grey: {},
+                highlight: {},
+                destructive: {},
+                affirmative: {},
+                functional: {},
             },
             inverted: {
                 true: {},
@@ -33,74 +33,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,
                 },
             },
         ],