@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

package/.storybook/preview.tsx

@@ -2,9 +2,14 @@ import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import '@utilitywarehouse/hearth-fonts';
 import { color } from '@utilitywarehouse/hearth-tokens';
 import { useEffect } from 'react';
+import '../../../shared/storybook/styles/diff-highlighting.css';
 import '../../../shared/storybook/styles/preview.css';
 import theme from '../../../shared/storybook/theme';
 import { breakpoints, StyleSheet, themes, UnistylesRuntime } from '../src/core';
+import { initializePrism } from './prism-setup';
+
+// Initialize Prism.js for syntax highlighting
+initializePrism();
 
 StyleSheet.configure({
   themes,

package/.storybook/prism-setup.ts

@@ -0,0 +1,104 @@
+import Prism from 'prismjs';
+import 'prismjs/components/prism-diff';
+import 'prismjs/themes/prism.css';
+
+// Function to escape HTML entities to prevent interpretation
+const escapeHtml = (text: string): string => {
+  return text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+};
+
+// Function to manually highlight diff content
+const highlightDiffContent = (element: Element) => {
+  const content = element.textContent || '';
+  const lines = content.split('\n');
+  
+  // Process each line and collect the HTML, keeping original structure
+  const processedLines = lines.map((line) => {
+    // Skip completely empty lines
+    if (line.length === 0) {
+      return '';
+    }
+    
+    const escapedLine = escapeHtml(line);
+    
+    if (line.startsWith('-')) {
+      return `<span class="token deleted">${escapedLine}</span>`;
+    } else if (line.startsWith('+')) {
+      return `<span class="token inserted">${escapedLine}</span>`;
+    } else {
+      return `<span class="token unchanged">${escapedLine}</span>`;
+    }
+  });
+  
+  // Join with newlines to preserve structure
+  element.innerHTML = processedLines.join('\n');
+};
+
+// Function to process all diff blocks
+const processDiffBlocks = () => {
+  const diffBlocks = document.querySelectorAll('.language-diff:not(.diff-processed), .language-patch:not(.diff-processed)');
+  diffBlocks.forEach((block) => {
+    highlightDiffContent(block);
+    block.classList.add('diff-processed');
+  });
+};
+
+// Initialize Prism.js for diff highlighting
+export const initializePrism = () => {
+  // Ensure Prism is available globally for Storybook
+  if (typeof window !== 'undefined') {
+    (window as any).Prism = Prism;
+    
+    // Process diff blocks immediately
+    setTimeout(processDiffBlocks, 100);
+    
+    // Set up a mutation observer to highlight new code blocks
+    const observer = new MutationObserver((mutations) => {
+      let shouldProcess = false;
+      
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'childList') {
+          mutation.addedNodes.forEach((node) => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              const element = node as Element;
+              const diffBlocks = element.querySelectorAll('.language-diff:not(.diff-processed), .language-patch:not(.diff-processed)');
+              if (diffBlocks.length > 0) {
+                shouldProcess = true;
+              }
+              // Also check if the node itself is a diff block
+              if ((element.classList.contains('language-diff') || element.classList.contains('language-patch')) && !element.classList.contains('diff-processed')) {
+                shouldProcess = true;
+              }
+            }
+          });
+        }
+      });
+      
+      if (shouldProcess) {
+        setTimeout(processDiffBlocks, 10);
+      }
+    });
+    
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    
+    // Also process on page navigation (for Storybook)
+    window.addEventListener('popstate', () => {
+      setTimeout(processDiffBlocks, 100);
+    });
+    
+    // Process when hash changes (Storybook story navigation)
+    window.addEventListener('hashchange', () => {
+      setTimeout(processDiffBlocks, 100);
+    });
+  }
+};
+
+export default Prism;

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.1.0 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.2.0 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.1.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.2.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint --max-warnings 0
 
 Rule | Time (ms) | Relative

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.2.0
+
+### Minor Changes
+
+- [#419](https://github.com/utilitywarehouse/hearth/pull/419) [`8b5d1fb`](https://github.com/utilitywarehouse/hearth/commit/8b5d1fbe44d7d7e6dd70d79011d273dbf868c5a6) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `fullscreen` prop to `Modal`
+
+- [#410](https://github.com/utilitywarehouse/hearth/pull/410) [`22cf96c`](https://github.com/utilitywarehouse/hearth/commit/22cf96c17d8ebf4f3c90264b1345a2a2131d7722) Thanks [@jordmccord](https://github.com/jordmccord)! - [BREAKING] Updates the `colorScheme` component props to semantic meaning
+
+- [#412](https://github.com/utilitywarehouse/hearth/pull/412) [`bc92ff1`](https://github.com/utilitywarehouse/hearth/commit/bc92ff1ef2e1527fa5f8639a8367b039d14cd30b) Thanks [@dorota-uw](https://github.com/dorota-uw)! - Added SectionHeader component
+
+- [#415](https://github.com/utilitywarehouse/hearth/pull/415) [`614839e`](https://github.com/utilitywarehouse/hearth/commit/614839efec9c7eb7aaed59b4a4289439c170156f) Thanks [@jordmccord](https://github.com/jordmccord)! - [BREAKING] Removed `AccordionHeading` and `ListHeading` components in favour of `SectionHeader`
+
+- [#417](https://github.com/utilitywarehouse/hearth/pull/417) [`2df513f`](https://github.com/utilitywarehouse/hearth/commit/2df513f6f4fd0d695816badf254486f917996a93) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `Modal` component
+
+### Patch Changes
+
+- [#420](https://github.com/utilitywarehouse/hearth/pull/420) [`960ab43`](https://github.com/utilitywarehouse/hearth/commit/960ab436ee5da9359849ff40557171a9c4edb192) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds our semantic colours to the color value types so they can be accessed in things like the `Box` props
+
+- [#410](https://github.com/utilitywarehouse/hearth/pull/410) [`22cf96c`](https://github.com/utilitywarehouse/hearth/commit/22cf96c17d8ebf4f3c90264b1345a2a2131d7722) Thanks [@jordmccord](https://github.com/jordmccord)! - Moves components to use semantic tokens and exposes the new semantic tokens via the color object in the theme
+
 ## 0.1.0
 
 ### Minor Changes

package/build/components/Accordion/Accordion.d.ts

@@ -15,7 +15,7 @@ export declare const AccordionContentText: import("react").ForwardRefExoticCompo
 export declare const AccordionIcon: import("react").ForwardRefExoticComponent<import("..").IconProps & import("react").RefAttributes<import("..").IconProps>>;
 export declare const AccordionTitleText: import("react").ForwardRefExoticComponent<import("react-native").TextProps & import("react").RefAttributes<import("react-native").TextProps>>;
 declare const Accordion: {
-    ({ children, collapsible, type, headingText, headingHelperText, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, collapsible, type, heading, helperText, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const AccordionItem: {

package/build/components/Accordion/Accordion.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Children, isValidElement, useMemo } from 'react';
 import { createAccordion } from '@gluestack-ui/accordion';
-import AccordionRoot from './AccordionRoot';
-import AccordionContentTextComponent from './AccordionContentText';
-import AccordionIconComponent from './AccordionIcon';
+import { ChevronDownSmallIcon, ChevronUpSmallIcon, } from '@utilitywarehouse/hearth-react-native-icons';
+import { Children, isValidElement, useMemo } from 'react';
+import { SectionHeader } from '../SectionHeader';
 import AccordionContentComponent from './AccordionContent';
+import AccordionContentTextComponent from './AccordionContentText';
 import AccordionHeaderComponent from './AccordionHeader';
+import AccordionIconComponent from './AccordionIcon';
 import AccordionItemRoot from './AccordionItemRoot';
+import AccordionRoot from './AccordionRoot';
 import AccordionTitleTextComponent from './AccordionTitleText';
 import AccordionTriggerComponent from './AccordionTrigger';
-import { ChevronDownSmallIcon, ChevronUpSmallIcon, } from '@utilitywarehouse/hearth-react-native-icons';
-import { AccordionHeading } from './AccordionHeading';
 const AccordionComponent = createAccordion({
     Root: AccordionRoot,
     ContentText: AccordionContentTextComponent,
@@ -28,7 +28,7 @@ export const AccordionContent = AccordionComponent.Content;
 export const AccordionContentText = AccordionComponent.ContentText;
 export const AccordionIcon = AccordionComponent.Icon;
 export const AccordionTitleText = AccordionComponent.TitleText;
-const Accordion = ({ children, collapsible, type = 'multiple', headingText, headingHelperText, ...props }) => (_jsxs(AccordionComponent, { isDisabled: props.disabled, isCollapsible: collapsible, type: type, contentNoPadding: props.contentNoPadding, ...props, children: [headingText ? _jsx(AccordionHeading, { text: headingText, helperText: headingHelperText }) : null, children] }));
+const Accordion = ({ children, collapsible, type = 'multiple', heading, helperText, ...props }) => (_jsxs(AccordionComponent, { isDisabled: props.disabled, isCollapsible: collapsible, type: type, contentNoPadding: props.contentNoPadding, ...props, children: [heading ? _jsx(SectionHeader, { heading: heading, helperText: helperText }) : null, children] }));
 let accordionItemCounter = 0;
 export const AccordionItem = ({ children, value, title, expanded, triggerContent, testID, ...props }) => {
     const itemValue = useMemo(() => {

package/build/components/Accordion/Accordion.props.d.ts

@@ -37,6 +37,6 @@ export interface AccordionProps extends ViewProps {
      * @default false
      */
     contentNoPadding?: boolean;
-    headingText?: string;
-    headingHelperText?: string;
+    heading?: string;
+    helperText?: string;
 }

package/build/components/Accordion/AccordionIcon.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon } from '../../components/Icon';
 import { useTheme } from '../../hooks';
 const AccordionIcon = ({ as, ...props }) => {
-    const { components } = useTheme();
-    return _jsx(Icon, { as: as, color: components.icon.color, ...props });
+    const { color } = useTheme();
+    return _jsx(Icon, { as: as, color: color.icon.primary, ...props });
 };
 AccordionIcon.displayName = 'AccordionIcon';
 export default AccordionIcon;

package/build/components/Accordion/AccordionItemRoot.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { View } from 'react-native';
-import AccordionItemContext from './AccordionItem.context';
 import { StyleSheet } from 'react-native-unistyles';
+import AccordionItemContext from './AccordionItem.context';
 const AccordionItem = ({ children, style, noPadding, disabled, ...props }) => {
     const context = useMemo(() => ({ noPadding, disabled }), [noPadding, disabled]);
     return (_jsx(AccordionItemContext.Provider, { value: context, children: _jsx(View, { style: [styles.item, style], ...props, children: children }) }));
@@ -11,7 +11,7 @@ AccordionItem.displayName = 'AccordionItemRoot';
 const styles = StyleSheet.create(theme => ({
     item: {
         borderBottomWidth: theme.components.divider.borderWidth,
-        borderBottomColor: theme.components.divider.color,
+        borderBottomColor: theme.color.border.subtle,
     },
 }));
 export default AccordionItem;

package/build/components/Accordion/AccordionTrigger.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Pressable } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { useAccordionContext } from './Accordion.context';
 import { useAccordionItemContext } from './AccordionItem.context';
-import { StyleSheet } from 'react-native-unistyles';
 const AccordionTrigger = ({ states, ...props }) => {
     const { active } = states || { active: false };
     const { noPadding: contextMoPadding } = useAccordionContext();
@@ -23,11 +23,11 @@ const styles = StyleSheet.create(theme => ({
         width: '100%',
         _web: {
             _hover: {
-                backgroundColor: theme.components.accordion.item.backgroundColorHover,
+                backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
             },
             '_focus-visible': theme.helpers.focusVisible,
             _active: {
-                backgroundColor: theme.components.accordion.item.backgroundColorActive,
+                backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
             },
         },
         variants: {
@@ -38,7 +38,7 @@ const styles = StyleSheet.create(theme => ({
             },
             active: {
                 true: {
-                    backgroundColor: theme.components.accordion.item.backgroundColorActive,
+                    backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
                 },
             },
         },

package/build/components/Accordion/index.d.ts

@@ -1,2 +1 @@
-export { default as Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, AccordionContentText, AccordionIcon, AccordionTitleText, } from './Accordion';
-export * from './AccordionHeader';
+export { default as Accordion, AccordionContent, AccordionContentText, AccordionHeader, AccordionIcon, AccordionItem, AccordionTitleText, AccordionTrigger, } from './Accordion';

package/build/components/Accordion/index.js

@@ -1,2 +1 @@
-export { default as Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, AccordionContentText, AccordionIcon, AccordionTitleText, } from './Accordion';
-export * from './AccordionHeader';
+export { default as Accordion, AccordionContent, AccordionContentText, AccordionHeader, AccordionIcon, AccordionItem, AccordionTitleText, AccordionTrigger, } from './Accordion';

package/build/components/Alert/Alert.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo } from 'react';
-import AlertTitle from './AlertTitle';
-import AlertLink from './AlertLink';
-import AlertIconButton from './AlertIconButton';
-import AlertCloseButton from './AlertCloseButton';
-import { AlertContext } from './Alert.context';
-import { StyleSheet } from 'react-native-unistyles';
 import { Pressable } from 'react-native';
-import AlertText from './AlertText';
-import AlertIcon from './AlertIcon';
+import { StyleSheet } from 'react-native-unistyles';
+import { AlertContext } from './Alert.context';
+import AlertCloseButton from './AlertCloseButton';
 import AlertContent from './AlertContent';
-const Alert = ({ text, title, link, onPressLink, colorScheme = 'blue', onPressIconButton, onClose, children, onPress, iconButtonTestID, linkTestID, style, ...props }) => {
+import AlertIcon from './AlertIcon';
+import AlertIconButton from './AlertIconButton';
+import AlertLink from './AlertLink';
+import AlertText from './AlertText';
+import AlertTitle from './AlertTitle';
+const Alert = ({ text, title, link, onPressLink, colorScheme = 'info', onPressIconButton, onClose, children, onPress, iconButtonTestID, linkTestID, style, ...props }) => {
     useEffect(() => {
         if (__DEV__) {
             if (onPressIconButton && link) {
@@ -33,21 +33,21 @@ const styles = StyleSheet.create(theme => ({
         borderWidth: theme.components.alert.borderWidth,
         variants: {
             colorScheme: {
-                blue: {
-                    borderColor: theme.components.alert.blue.borderColor,
-                    backgroundColor: theme.components.alert.blue.backgroundColor,
+                info: {
+                    borderColor: theme.color.feedback.info.border,
+                    backgroundColor: theme.color.feedback.info.surface.subtle,
                 },
-                green: {
-                    borderColor: theme.components.alert.green.borderColor,
-                    backgroundColor: theme.components.alert.green.backgroundColor,
+                positive: {
+                    borderColor: theme.color.feedback.positive.border,
+                    backgroundColor: theme.color.feedback.positive.surface.subtle,
                 },
-                orange: {
-                    borderColor: theme.components.alert.orange.borderColor,
-                    backgroundColor: theme.components.alert.orange.backgroundColor,
+                warning: {
+                    borderColor: theme.color.feedback.warning.border,
+                    backgroundColor: theme.color.feedback.warning.surface.subtle,
                 },
-                red: {
-                    borderColor: theme.components.alert.red.borderColor,
-                    backgroundColor: theme.components.alert.red.backgroundColor,
+                danger: {
+                    borderColor: theme.color.feedback.danger.border,
+                    backgroundColor: theme.color.feedback.danger.surface.subtle,
                 },
             },
         },

package/build/components/Alert/Alert.props.d.ts

@@ -25,10 +25,10 @@ interface AlertWithoutChildrenProps extends PressableProps {
     iconButtonTestID?: string;
     /**
      * The color scheme of the alert.
-     * Possible values: 'blue', 'green', 'orange', 'red'.
-     * @default 'blue'
+     * Possible values: 'info', 'positive', 'warning', 'danger'.
+     * @default 'info'
      */
-    colorScheme?: 'blue' | 'green' | 'orange' | 'red';
+    colorScheme?: 'info' | 'positive' | 'warning' | 'danger';
     /**
      * Callback function for when the icon button is pressed.
      */

package/build/components/Alert/AlertCloseButton.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { UnstyledIconButton } from '../UnstyledIconButton';
 import { StyleSheet } from 'react-native-unistyles';
+import { UnstyledIconButton } from '../UnstyledIconButton';
 const AlertCloseButton = ({ style, icon = CloseSmallIcon, ...props }) => (_jsx(UnstyledIconButton, { ...props, size: "sm", style: [styles.icon, style], icon: icon }));
 const styles = StyleSheet.create(theme => ({
     icon: {
         alignSelf: 'flex-start',
-        color: theme.components.icon.color,
+        color: theme.color.icon.primary,
         minWidth: 20,
         minHeight: 20,
     },

package/build/components/Alert/AlertIcon.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { InfoMediumIcon, TickCircleMediumIcon, WarningMediumIcon, } from '@utilitywarehouse/hearth-react-native-icons';
 import { StyleSheet } from 'react-native-unistyles';
-import { WarningMediumIcon, TickCircleMediumIcon, InfoMediumIcon, } from '@utilitywarehouse/hearth-react-native-icons';
-import { useAlertContext } from './Alert.context';
 import { Icon } from '../Icon';
+import { useAlertContext } from './Alert.context';
 const AlertIcon = (props) => {
     const { colorScheme } = useAlertContext();
     const asProp = (() => {
-        if (colorScheme === 'red' || colorScheme === 'orange') {
+        if (colorScheme === 'danger' || colorScheme === 'warning') {
             return WarningMediumIcon;
         }
-        if (colorScheme === 'green') {
+        if (colorScheme === 'positive') {
             return TickCircleMediumIcon;
         }
         return InfoMediumIcon;
@@ -24,7 +24,7 @@ const styles = StyleSheet.create(theme => ({
         minWidth: 24,
         minHeight: 24,
         alignSelf: 'flex-start',
-        color: theme.components.icon.color,
+        color: theme.color.icon.primary,
     },
 }));
 export default AlertIcon;

package/build/components/Badge/Badge.context.d.ts

@@ -3,8 +3,12 @@ import type BadgeProps from './Badge.props';
 export declare const BadgeContext: React.Context<{
     colorScheme?: BadgeProps["colorScheme"];
     variant?: BadgeProps["variant"];
+    flatBase?: BadgeProps["flatBase"];
+    size?: BadgeProps["size"];
 }>;
 export declare const useBadgeContext: () => {
     colorScheme?: BadgeProps["colorScheme"];
     variant?: BadgeProps["variant"];
+    flatBase?: BadgeProps["flatBase"];
+    size?: BadgeProps["size"];
 };

package/build/components/Badge/Badge.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { StyleSheet } from 'react-native-unistyles';
 import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { BadgeContext } from './Badge.context';
-import BadgeText from './BadgeText';
 import BadgeIcon from './BadgeIcon';
+import BadgeText from './BadgeText';
 const Badge = ({ children, ...props }) => {
-    const { variant = 'solid', icon, colorScheme = 'blue', flatBase = false, style, ...rest } = props;
-    const value = useMemo(() => ({ colorScheme, flatBase, variant }), [colorScheme, flatBase, variant]);
+    const { variant = 'solid', icon, colorScheme = 'info', flatBase = false, size = 'sm', style, ...rest } = props;
+    const value = useMemo(() => ({ colorScheme, flatBase, variant, size }), [colorScheme, flatBase, variant, size]);
     const childIsText = typeof children === 'string' || typeof children === 'number';
-    styles.useVariants({ colorScheme, flatBase, variant });
+    styles.useVariants({ colorScheme, flatBase, variant, size });
     return (_jsx(BadgeContext.Provider, { value: value, children: _jsxs(View, { ...rest, style: [styles.container, style], children: [!!icon && _jsx(BadgeIcon, { as: icon }), childIsText ? _jsx(BadgeText, { children: children }) : children] }) }));
 };
 Badge.displayName = 'Badge';
@@ -20,21 +20,36 @@ const styles = StyleSheet.create(theme => ({
         alignSelf: 'flex-start',
         paddingHorizontal: theme.components.badge.paddingHorizontal,
         borderRadius: theme.components.badge.borderRadius,
-        paddingVertical: theme.components.badge.paddingVertical,
         gap: theme.components.badge.gap,
         variants: {
             colorScheme: {
-                blue: {},
-                red: {},
-                green: {},
-                orange: {},
-                grey: {},
+                info: {},
+                danger: {},
+                positive: {},
+                warning: {},
+                functional: {},
+                energy: {},
+                broadband: {},
+                mobile: {},
+                insurance: {},
+                cashback: {},
+                pig: {},
             },
             variant: {
                 solid: {},
                 outline: {
                     borderWidth: theme.components.badge.outline.borderWidth,
-                    borderColor: theme.components.badge.outline.borderColor,
+                    borderColor: theme.color.border.subtle,
+                },
+            },
+            size: {
+                sm: {
+                    paddingVertical: theme.components.badge.sm.paddingVertical,
+                    height: theme.components.badge.sm.height,
+                },
+                md: {
+                    paddingVertical: theme.components.badge.md.paddingVertical,
+                    height: theme.components.badge.md.height,
                 },
             },
             flatBase: {
@@ -46,71 +61,115 @@ const styles = StyleSheet.create(theme => ({
             },
         },
         compoundVariants: [
+            // Solid
+            {
+                colorScheme: 'info',
+                variant: 'solid',
+                styles: {
+                    backgroundColor: theme.color.feedback.info.surface.default,
+                },
+            },
+            {
+                colorScheme: 'danger',
+                variant: 'solid',
+                styles: {
+                    backgroundColor: theme.color.feedback.danger.surface.default,
+                },
+            },
+            {
+                colorScheme: 'positive',
+                variant: 'solid',
+                styles: {
+                    backgroundColor: theme.color.feedback.positive.surface.default,
+                },
+            },
+            {
+                colorScheme: 'warning',
+                variant: 'solid',
+                styles: {
+                    backgroundColor: theme.color.feedback.warning.surface.default,
+                },
+            },
+            {
+                colorScheme: 'functional',
+                variant: 'solid',
+                styles: {
+                    backgroundColor: theme.color.feedback.functional.surface.default,
+                },
+            },
+            {
+                colorScheme: 'energy',
+                variant: 'solid',
+                styles: {
+                    backgroundColor: theme.color.surface.energy.default,
+                },
+            },
             {
-                colorScheme: 'blue',
+                colorScheme: 'broadband',
                 variant: 'solid',
                 styles: {
-                    backgroundColor: theme.components.badge.solid.blue.backgroundColor,
+                    backgroundColor: theme.color.surface.broadband.default,
                 },
             },
             {
-                colorScheme: 'red',
+                colorScheme: 'mobile',
                 variant: 'solid',
                 styles: {
-                    backgroundColor: theme.components.badge.solid.red.backgroundColor,
+                    backgroundColor: theme.color.surface.mobile.default,
                 },
             },
             {
-                colorScheme: 'green',
+                colorScheme: 'insurance',
                 variant: 'solid',
                 styles: {
-                    backgroundColor: theme.components.badge.solid.green.backgroundColor,
+                    backgroundColor: theme.color.surface.insurance.default,
                 },
             },
             {
-                colorScheme: 'orange',
+                colorScheme: 'cashback',
                 variant: 'solid',
                 styles: {
-                    backgroundColor: theme.components.badge.solid.orange.backgroundColor,
+                    backgroundColor: theme.color.surface.cashback.default,
                 },
             },
             {
-                colorScheme: 'grey',
+                colorScheme: 'pig',
                 variant: 'solid',
                 styles: {
-                    backgroundColor: theme.components.badge.solid.grey.backgroundColor,
+                    backgroundColor: theme.color.surface.pig.default,
                 },
             },
+            // Outline
             {
-                colorScheme: 'blue',
+                colorScheme: 'info',
                 variant: 'outline',
                 styles: {
                     backgroundColor: 'transparent',
                 },
             },
             {
-                colorScheme: 'red',
+                colorScheme: 'danger',
                 variant: 'outline',
                 styles: {
                     backgroundColor: 'transparent',
                 },
             },
             {
-                colorScheme: 'green',
+                colorScheme: 'positive',
                 variant: 'outline',
                 styles: {
                     backgroundColor: 'transparent',
                 },
             },
             {
-                colorScheme: 'orange',
+                colorScheme: 'warning',
                 variant: 'outline',
                 styles: {
                     backgroundColor: 'transparent',
                 },
             },
             {
-                colorScheme: 'grey',
+                colorScheme: 'functional',
                 variant: 'outline',
                 styles: {
                     backgroundColor: 'transparent',

package/build/components/Badge/Badge.props.d.ts

@@ -2,7 +2,8 @@ import type { ComponentType } from 'react';
 import type { ViewProps } from 'react-native';
 interface BadgeProps extends ViewProps {
     variant?: 'solid' | 'outline';
-    colorScheme?: 'blue' | 'green' | 'red' | 'orange' | 'grey';
+    colorScheme?: 'info' | 'positive' | 'danger' | 'warning' | 'functional' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig';
+    size?: 'sm' | 'md';
     icon?: ComponentType;
     flatBase?: boolean;
 }