@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

package/src/components/IconButton/IconButtonRoot.tsx

@@ -6,7 +6,7 @@ import type { IconButtonProps } from './IconButton.props';
 
 const IconButtonRoot = ({
   children,
-  colorScheme = 'yellow',
+  colorScheme = 'highlight',
   variant = 'solid',
   size = 'md',
   inverted = false,
@@ -41,17 +41,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: {
@@ -62,7 +62,7 @@ const styles = StyleSheet.create(theme => ({
         true: {
           _web: {
             '_focus-visible': {
-              outlineColor: theme.components.focus.borderInverted,
+              outlineColor: theme.color.focus.inverted,
             },
           },
         },
@@ -72,11 +72,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',
@@ -115,6 +115,9 @@ const styles = StyleSheet.create(theme => ({
       },
     },
     compoundVariants: [
+      // Variant Color Schemes
+      // Emphasis
+      // Emphasis Yellow
       {
         variant: 'emphasis',
         active: true,
@@ -128,288 +131,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/src/components/IconButton/IconButtonSpinner.tsx

@@ -8,49 +8,46 @@ import { useIconButtonContext } from './IconButton.context';
 const IconButtonSpinner = (props: Omit<SpinnerProps, 'size'>) => {
   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/src/components/InlineLink/InlineLinkRoot.tsx

@@ -35,7 +35,7 @@ const styles = StyleSheet.create(theme => ({
         borderRadius: theme.borderRadius.xs,
         outlineStyle: 'solid',
         outlineWidth: 2,
-        outlineColor: theme.components.focus.border,
+        outlineColor: theme.color.focus.primary,
         outlineOffset: 1,
         boxShadow: 'none',
       },
@@ -55,7 +55,7 @@ const styles = StyleSheet.create(theme => ({
           textDecorationColor: theme.components.inlineLink.inverted.color,
           _web: {
             '_focus-visible': {
-              outlineColor: theme.components.focus.borderInverted,
+              outlineColor: theme.color.focus.inverted,
             },
           },
         },

package/src/components/Input/Input.docs.mdx

@@ -1,13 +1,13 @@
-import { Meta, Controls, Story, Canvas } from '@storybook/addon-docs/blocks';
-import * as Stories from './Input.stories';
-import { Input, InputField, InputIcon, InputSlot, Center, Pressable, FormField } from '../../';
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
 import { EmailMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { Center, FormField, Input, InputField, InputIcon, InputSlot, Pressable } from '../../';
 import {
-  ViewFigmaButton,
+  AdvancedInputExample,
   BackToTopButton,
   UsageWrap,
-  AdvancedInputExample,
+  ViewFigmaButton,
 } from '../../../docs/components';
+import * as Stories from './Input.stories';
 
 <Meta title="Forms / Input" />
 
@@ -94,6 +94,7 @@ all of the React Native [`View` props](https://reactnative.dev/docs/view).
 | onFocus          | function                           | `-`         | Callback function that is triggered when the input gains focus. **(Only to be used if the input has no children)**                                                      |
 | placeholder      | string                             | `-`         | The placeholder text for the input. **(Only to be used if the input has no children)**                                                                                  |
 | required         | boolean                            | `true`      | Indicates that the input is required. **(Only to be used if the input has no children)**                                                                                |
+| inBottomSheet    | boolean                            | `false`     | Indicates if the input is within a bottom sheet.                                                                                                                        |
 
 If the `leadingIcon` or `trailingIcon` props are used, the `Input` component should not have any children.
 
@@ -101,15 +102,16 @@ If the `leadingIcon` or `trailingIcon` props are used, the `Input` component sho
 
 The `InputField` inherits all of the React Native [`TextInput` props](https://reactnative.dev/docs/textinput).
 
-| Prop        | Type                   | Default  | Description                                                       |
-| ----------- | ---------------------- | -------- | ----------------------------------------------------------------- |
-| type        | `'text' \| 'password'` | `'text'` | The type of the input.                                            |
-| value       | string                 | `-`      | The value of the input.                                           |
-| onChange    | function               | `-`      | Callback function that is triggered when the input value changes. |
-| onBlur      | function               | `-`      | Callback function that is triggered when the input loses focus.   |
-| onFocus     | function               | `-`      | Callback function that is triggered when the input gains focus.   |
-| placeholder | string                 | `-`      | The placeholder text for the input.                               |
-| required    | boolean                | `true`   | Indicates that the input is required.                             |
+| Prop          | Type                   | Default  | Description                                                       |
+| ------------- | ---------------------- | -------- | ----------------------------------------------------------------- |
+| type          | `'text' \| 'password'` | `'text'` | The type of the input.                                            |
+| value         | string                 | `-`      | The value of the input.                                           |
+| onChange      | function               | `-`      | Callback function that is triggered when the input value changes. |
+| onBlur        | function               | `-`      | Callback function that is triggered when the input loses focus.   |
+| onFocus       | function               | `-`      | Callback function that is triggered when the input gains focus.   |
+| placeholder   | string                 | `-`      | The placeholder text for the input.                               |
+| required      | boolean                | `true`   | Indicates that the input is required.                             |
+| inBottomSheet | boolean                | `false`  | Indicates if the input is within a bottom sheet.                  |
 
 ### `InputIcon`
 

package/src/components/Input/Input.props.ts

@@ -26,6 +26,7 @@ export interface InputBaseProps {
   readonly?: boolean;
   focused?: boolean;
   placeholder?: string;
+  inBottomSheet?: boolean;
 }
 
 // For inputs that have children

package/src/components/Input/Input.stories.tsx

@@ -1,10 +1,11 @@
-import { Input } from '.';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { VariantTitle } from '../../../docs/components';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
-import { Flex } from '../Flex';
 import { EmailMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useState } from 'react';
 import { NativeSyntheticEvent, TextInputChangeEventData } from 'react-native';
+import { Input } from '.';
+import { VariantTitle } from '../../../docs/components';
+import { Flex } from '../Flex';
 
 const meta = {
   title: 'Stories / Input',
@@ -86,7 +87,7 @@ export const Variants: Story = {
     controls: { include: [] },
   },
   render: () => {
-    const [clearableSearchValue, setClearableSearchValue] = React.useState('clearble search');
+    const [clearableSearchValue, setClearableSearchValue] = useState('clearble search');
     const handleClearableSearchChange = (e: NativeSyntheticEvent<TextInputChangeEventData>) => {
       setClearableSearchValue(e.nativeEvent.text);
     };