@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

package/build/components/IconButton/IconButtonRoot.js

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { IconButtonContext } from './IconButton.context';
-const IconButtonRoot = ({ children, colorScheme = 'yellow', variant = 'solid', size = 'md', inverted = false, states, ...props }) => {
+const IconButtonRoot = ({ children, colorScheme = 'highlight', variant = 'solid', size = 'md', inverted = false, states, ...props }) => {
     const { active, disabled } = states || {};
     styles.useVariants({ colorScheme, variant, size, inverted, disabled, active });
     const value = useMemo(() => ({ colorScheme, variant, size, inverted, disabled, active }), [colorScheme, variant, size, inverted, disabled, active]);
@@ -21,17 +21,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: {
@@ -42,7 +42,7 @@ const styles = StyleSheet.create(theme => ({
                 true: {
                     _web: {
                         '_focus-visible': {
-                            outlineColor: theme.components.focus.borderInverted,
+                            outlineColor: theme.color.focus.inverted,
                         },
                     },
                 },
@@ -52,11 +52,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',
@@ -89,6 +89,9 @@ const styles = StyleSheet.create(theme => ({
             },
         },
         compoundVariants: [
+            // Variant Color Schemes
+            // Emphasis
+            // Emphasis Yellow
             {
                 variant: 'emphasis',
                 active: true,
@@ -102,288 +105,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,
+                    backgroundColor: theme.color.interactive.functional.surface.subtle.inverted.active,
                 },
             },
+            // Outline Green
             {
                 variant: 'outline',
-                colorScheme: 'grey',
-                inverted: true,
-                active: true,
-                styles: {
-                    backgroundColor: theme.components.button.outline.grey.inverted.backgroundColorActive,
-                },
-            },
-            {
-                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/IconButton/IconButtonSpinner.js

@@ -6,49 +6,46 @@ import { useIconButtonContext } from './IconButton.context';
 const IconButtonSpinner = (props) => {
     const { color = '', ...rest } = props;
     const { colorScheme, variant, disabled, inverted, size } = useIconButtonContext();
-    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 === 'highlight') {
+            return themeColor.interactive.highlight.foreground.strong;
         }
-        if (variant === 'emphasis' && colorScheme === 'yellow') {
-            return components.button.emphasis.yellow.foregroundColor;
+        if (variant === 'solid' && 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 === 'destructive') {
+            return themeColor.interactive.destructive.foreground.strong;
         }
-        if (variant === 'solid' && colorScheme === 'yellow') {
-            return components.button.solid.yellow.foregroundColor;
+        if (variant === 'solid' && colorScheme === 'affirmative') {
+            return themeColor.interactive.affirmative.foreground.strong;
         }
-        if (variant === 'solid' && colorScheme === 'red') {
-            return components.button.solid.red.foregroundColor;
+        if (variant === 'outline' && colorScheme === 'destructive') {
+            return themeColor.interactive.destructive.foreground.subtle;
         }
-        if (variant === 'solid' && colorScheme === 'green') {
-            return components.button.solid.green.foregroundColor;
+        if (variant === 'outline' && colorScheme === 'affirmative') {
+            return themeColor.interactive.affirmative.foreground.subtle;
         }
-        if (variant === 'outline' && colorScheme === 'red') {
-            return components.button.outline.red.foregroundColor;
+        if (variant === 'outline' && colorScheme === 'functional' && inverted) {
+            return themeColor.interactive.functional.foreground.strong;
         }
-        if (variant === 'outline' && colorScheme === 'green') {
-            return components.button.outline.green.foregroundColor;
+        if (variant === 'outline' && colorScheme === 'functional') {
+            return themeColor.interactive.functional.foreground.subtle;
         }
-        if (variant === 'outline' && colorScheme === 'grey' && inverted) {
-            return components.button.outline.grey.inverted.foregroundColor;
+        if (variant === 'ghost' && colorScheme === 'destructive') {
+            return themeColor.interactive.destructive.foreground.subtle;
         }
-        if (variant === 'outline' && colorScheme === 'grey') {
-            return components.button.outline.grey.foregroundColor;
+        if (variant === 'ghost' && colorScheme === 'affirmative') {
+            return themeColor.interactive.affirmative.foreground.subtle;
         }
-        if (variant === 'ghost' && colorScheme === 'red') {
-            return components.button.ghost.red.foregroundColor;
+        if (variant === 'ghost' && colorScheme === 'functional' && inverted) {
+            return themeColor.interactive.functional.foreground.strong;
         }
-        if (variant === 'ghost' && colorScheme === 'green') {
-            return components.button.ghost.green.foregroundColor;
+        if (variant === 'ghost' && colorScheme === 'functional') {
+            return themeColor.interactive.functional.foreground.subtle;
         }
-        if (variant === 'ghost' && colorScheme === 'grey' && inverted) {
-            return components.button.ghost.grey.inverted.foregroundColor;
-        }
-        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/IconContainer/IconContainer.d.ts

@@ -0,0 +1,5 @@
+import type IconContainerProps from './IconContainer.props';
+declare const IconContainer: import("react").ForwardRefExoticComponent<Partial<IconContainerProps> & {
+    uniProps?: import("react-native-unistyles/lib/typescript/src/core/withUnistyles/types").Mappings<IconContainerProps> | undefined;
+} & import("react").RefAttributes<never>>;
+export default IconContainer;