@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

package/src/components/IconButton/IconButton.stories.tsx

@@ -1,12 +1,12 @@
-import React, { ComponentType } from 'react';
-import { IconButton, IconButtonProps } from '.';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { VariantTitle } from '../../../docs/components';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
+import { ComponentType } from 'react';
+import { IconButton, IconButtonProps } from '.';
+import { VariantTitle } from '../../../docs/components';
 import { Box } from '../Box';
 import { ButtonGroup } from '../Button';
-import { Flex } from '../Flex';
 import { DetailText } from '../DetailText';
+import { Flex } from '../Flex';
 
 const meta = {
   title: 'Stories / IconButton',
@@ -26,7 +26,7 @@ const meta = {
       description: 'The variant of the button.',
     },
     colorScheme: {
-      options: ['yellow', 'red', 'green', 'grey'],
+      options: ['highlight', 'destructive', 'affirmative', 'functional'],
       control: 'select',
       description: 'The color scheme of the button.',
     },
@@ -59,7 +59,7 @@ const meta = {
   args: {
     size: 'md',
     variant: 'solid',
-    colorScheme: 'yellow',
+    colorScheme: 'highlight',
     icon: 'AddMediumIcon' as unknown as ComponentType,
     loading: false,
     disabled: false,
@@ -89,17 +89,17 @@ export const Variants: Story = {
     return (
       <ButtonGroup flexDirection="column" space="md">
         <>
-          {args.colorScheme === 'yellow' && (
+          {args.colorScheme === 'highlight' && (
             <VariantTitle title="Emphasis" invert={args.inverted}>
               <IconButton {...args} variant="emphasis" icon={icon} />
             </VariantTitle>
           )}
-          {args.colorScheme !== 'grey' && (
+          {args.colorScheme !== 'functional' && (
             <VariantTitle title="Solid" invert={args.inverted}>
               <IconButton {...args} variant="solid" icon={icon} />
             </VariantTitle>
           )}
-          {args.colorScheme !== 'yellow' && (
+          {args.colorScheme !== 'highlight' && (
             <>
               <VariantTitle title="Outline" invert={args.inverted}>
                 {/* @ts-expect-error - story loop types don't match */}
@@ -127,7 +127,7 @@ export const KitchenSink: Story = {
   render: ({ icon: _icon, inverted, size }) => {
     // @ts-expect-error - This is a playground
     const icon = _icon === 'none' ? undefined : Icons[_icon];
-    const schemes: Array<ColorScheme> = ['yellow', 'red', 'green', 'grey'];
+    const schemes: Array<ColorScheme> = ['highlight', 'destructive', 'affirmative', 'functional'];
     const variants: Array<Variant> = ['emphasis', 'solid', 'outline', 'ghost'];
     return (
       <Flex direction="row" space="lg" wrap="wrap">
@@ -136,17 +136,17 @@ export const KitchenSink: Story = {
             {variants
               .filter(variant => {
                 if (inverted) {
-                  if (scheme === 'yellow') {
+                  if (scheme === 'highlight') {
                     return variant === 'emphasis' || variant === 'solid';
                   }
-                  if (scheme === 'grey') {
+                  if (scheme === 'functional') {
                     return variant === 'outline' || variant === 'ghost';
                   } else return false;
                 }
-                if (scheme === 'yellow') {
+                if (scheme === 'highlight') {
                   return variant === 'emphasis' || variant === 'solid';
                 }
-                if (scheme === 'grey') {
+                if (scheme === 'functional') {
                   return variant === 'outline' || variant === 'ghost';
                 } else {
                   return variant === 'solid' || variant === 'ghost' || variant === 'outline';

package/src/components/IconButton/IconButtonIcon.tsx

@@ -1,8 +1,8 @@
 import { Platform, StyleProp, ViewStyle } from 'react-native';
-import { useIconButtonContext } from './IconButton.context';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 import IconProps from '../Icon/Icon.props';
+import { useIconButtonContext } from './IconButton.context';
 
 const IconButtonIcon = (props: IconProps) => {
   const { colorScheme, variant, inverted, disabled, size } = useIconButtonContext();
@@ -39,10 +39,10 @@ const styles = StyleSheet.create(theme => ({
         ghost: {},
       },
       colorScheme: {
-        yellow: {},
-        red: {},
-        green: {},
-        grey: {},
+        highlight: {},
+        destructive: {},
+        affirmative: {},
+        functional: {},
       },
       inverted: {
         true: {},
@@ -64,88 +64,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: 'grey',
+        colorScheme: 'functional',
         styles: {
-          color: theme.components.button.outline.grey.foregroundColor,
+          color: theme.color.interactive.functional.foreground.subtle,
         },
       },
       {
         variant: 'outline',
-        colorScheme: 'grey',
+        colorScheme: 'functional',
         inverted: true,
         styles: {
-          color: theme.components.button.outline.grey.inverted.foregroundColor,
+          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: 'ghost',
-        colorScheme: 'grey',
+        colorScheme: 'functional',
         styles: {
-          color: theme.components.button.outline.grey.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,
         },
       },
     ],

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,
         },
       },
     ],