@utilitywarehouse/hearth-react-native 0.4.0 → 0.4.2

package/.turbo/turbo-build.log

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

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.4.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.4.2 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,21 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.4.2
+
+### Patch Changes
+
+- [#570](https://github.com/utilitywarehouse/hearth/pull/570) [`364e1ac`](https://github.com/utilitywarehouse/hearth/commit/364e1ac1ee6c83327b0614d90bf280e283144ae6) Thanks [@dorota-uw](https://github.com/dorota-uw)! - Switched the logic for enabling/disabling comma separator in CurrencyInput
+
+- [#573](https://github.com/utilitywarehouse/hearth/pull/573) [`2c28614`](https://github.com/utilitywarehouse/hearth/commit/2c28614b5a9335dda15895c90e08774574d82d85) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes `Radio` and `Checkbox` helper overflow issue
+
+- [#573](https://github.com/utilitywarehouse/hearth/pull/573) [`2c28614`](https://github.com/utilitywarehouse/hearth/commit/2c28614b5a9335dda15895c90e08774574d82d85) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes semantic text colour issue
+
+## 0.4.1
+
+### Patch Changes
+
+- [#544](https://github.com/utilitywarehouse/hearth/pull/544) [`98e6423`](https://github.com/utilitywarehouse/hearth/commit/98e642347a0aca8c23babb15ea6b5c70b6adca0f) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds legacy colour palette for backwards compatibility
+
 ## 0.4.0
 
 ### Minor Changes

package/build/components/Checkbox/CheckboxTextContent.d.ts

@@ -1,6 +1,6 @@
 import FlexProps from '../Flex/Flex.props';
 declare const CheckboxTextContent: {
-    ({ children, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, style, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default CheckboxTextContent;

package/build/components/Checkbox/CheckboxTextContent.js

@@ -1,7 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native-unistyles';
 import { Flex } from '../Flex';
-const CheckboxTextContent = ({ children, ...props }) => {
-    return (_jsx(Flex, { direction: "column", space: "none", ...props, children: children }));
+const CheckboxTextContent = ({ children, style, ...props }) => {
+    return (_jsx(Flex, { style: [styles.content, style], direction: "column", space: "none", ...props, children: children }));
 };
+const styles = StyleSheet.create({
+    content: {
+        flex: 1,
+        flexShrink: 1,
+    },
+});
 CheckboxTextContent.displayName = 'CheckboxTextContent';
 export default CheckboxTextContent;

package/build/components/CurrencyInput/CurrencyInput.d.ts

@@ -1,6 +1,6 @@
 import type CurrencyInputProps from './CurrencyInput.props';
 declare const CurrencyInput: {
-    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, required, autoFormatThousands, value, onChangeText, ...rest }: CurrencyInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, required, disableGroupSeparator, value, onChangeText, ...rest }: CurrencyInputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default CurrencyInput;

package/build/components/CurrencyInput/CurrencyInput.js

@@ -5,14 +5,14 @@ import { formatThousands } from '../../utils';
 import { DetailText } from '../DetailText';
 import { useFormFieldContext } from '../FormField';
 import { Input, InputField, InputSlot } from '../Input';
-const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, required, autoFormatThousands = false, value, onChangeText, ...rest }) => {
+const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, required, disableGroupSeparator = false, value, onChangeText, ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const { disabled: formFieldDisabled } = formFieldContext;
     const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
     const defaultFormat = '0.00';
     const getPlaceholder = placeholder ?? defaultFormat;
     const handleChangeText = (text) => {
-        if (autoFormatThousands) {
+        if (!disableGroupSeparator) {
             const formatted = formatThousands(text);
             onChangeText?.(formatted);
         }
@@ -20,7 +20,7 @@ const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readon
             onChangeText?.(text);
         }
     };
-    const displayValue = autoFormatThousands && typeof value === 'string' ? formatThousands(value) : value;
+    const displayValue = !disableGroupSeparator && typeof value === 'string' ? formatThousands(value) : value;
     return (_jsxs(Input, { validationStatus: validationStatusFromContext, disabled: formFieldDisabled ?? disabled, readonly: readonly, focused: focused, style: styles.wrap, children: [_jsx(InputSlot, { children: _jsx(DetailText, { size: "4xl", style: styles.text, accessible: false, children: "\u00A3" }) }), _jsx(InputField, { inputMode: "decimal", inBottomSheet: inBottomSheet, accessibilityHint: 'Enter the amount in pounds and pence, for example "10.99"', ...rest, placeholder: getPlaceholder, keyboardType: "decimal-pad", style: styles.input, value: displayValue, onChangeText: handleChangeText })] }));
 };
 CurrencyInput.displayName = 'CurrencyInput';

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

@@ -7,8 +7,8 @@ export interface CurrencyInputBaseProps {
     placeholder?: string;
     inBottomSheet?: boolean;
     required?: boolean;
-    /** When true, automatically formats the numeric value with thousand separators (e.g. 1234 -> 1,234). */
-    autoFormatThousands?: boolean;
+    /** When not specifically disabled, the numeric value is automatically formatted with thousand separators (e.g. 1234 -> 1,234). */
+    disableGroupSeparator?: boolean;
 }
 export type CurrencyInputProps = CurrencyInputBaseProps & Omit<TextInputProps, 'children'> & ViewProps;
 export default CurrencyInputProps;

package/build/components/Radio/RadioTextContent.d.ts

@@ -1,6 +1,6 @@
 import FlexProps from '../Flex/Flex.props';
 declare const RadioTextContent: {
-    ({ children, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, style, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default RadioTextContent;

package/build/components/Radio/RadioTextContent.js

@@ -1,7 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native-unistyles';
 import { Flex } from '../Flex';
-const RadioTextContent = ({ children, ...props }) => {
-    return (_jsx(Flex, { direction: "column", space: "none", ...props, children: children }));
+const RadioTextContent = ({ children, style, ...props }) => {
+    return (_jsx(Flex, { direction: "column", space: "none", style: [styles.content, style], ...props, children: children }));
 };
+const styles = StyleSheet.create({
+    content: {
+        flex: 1,
+        flexShrink: 1,
+    },
+});
 RadioTextContent.displayName = 'RadioTextContent';
 export default RadioTextContent;

package/build/core/themes.d.ts

@@ -771,6 +771,121 @@ export declare const lightTheme: {
     readonly colorMode: "light";
     readonly isLight: true;
     readonly isDark: false;
+    /**
+     * @deprecated This will be removed in the next major version. This is kept for backward compatibility
+     */
+    readonly colors: {
+        readonly white: "#ffffff";
+        readonly black: "#000000";
+        readonly brandMidnight: "#1e0a46";
+        readonly brandWhite: "#ffffff";
+        readonly brandPink: "#f495f9";
+        readonly brandPrimaryPurple: "#550091";
+        readonly serviceGas: "#75A7FD";
+        readonly serviceElectricity: "#62DD99";
+        readonly serviceInsurance: "#F25192";
+        readonly serviceMobile: "#FFD76F";
+        readonly serviceLandline: "#A66DE8";
+        readonly red50: "#ffebeb";
+        readonly red100: "#ffd8d9";
+        readonly red200: "#ffb3b4";
+        readonly red300: "#f58e92";
+        readonly red400: "#ec515d";
+        readonly red500: "#df2a38";
+        readonly red600: "#c31d2a";
+        readonly red700: "#891e27";
+        readonly red800: "#611a20";
+        readonly red900: "#3b1216";
+        readonly pink50: "#fde6fb";
+        readonly pink100: "#fccff9";
+        readonly pink200: "#f9bdfa";
+        readonly pink300: "#f495f9";
+        readonly pink500: "#c933d1";
+        readonly pink700: "#8f248f";
+        readonly pink900: "#48104b";
+        readonly grey25: "#fafafa";
+        readonly grey50: "#f5f5f5";
+        readonly grey75: "#f0f0f0";
+        readonly grey100: "#e3e3e3";
+        readonly grey150: "#d8d8d8";
+        readonly grey175: "#cccccc";
+        readonly grey200: "#c1c1c1";
+        readonly grey300: "#b8b8b8";
+        readonly grey400: "#a0a0a0";
+        readonly grey500: "#888888";
+        readonly grey600: "#707070";
+        readonly grey700: "#585858";
+        readonly grey800: "#414141";
+        readonly grey900: "#242424";
+        readonly grey1000: "#121212";
+        readonly apple50: "#e5f9ed";
+        readonly apple200: "#c1f0d3";
+        readonly apple300: "#96e6b7";
+        readonly apple400: "#62dd99";
+        readonly apple700: "#10b259";
+        readonly apple800: "#087a3c";
+        readonly apple900: "#03361b";
+        readonly cyan50: "#ecf4fe";
+        readonly cyan75: "#e5f1ff";
+        readonly cyan100: "#cce0ff";
+        readonly cyan200: "#a6c8fc";
+        readonly cyan300: "#8fbaff";
+        readonly cyan400: "#75a7fd";
+        readonly cyan500: "#4789fa";
+        readonly cyan600: "#0550d1";
+        readonly cyan700: "#003a9e";
+        readonly cyan800: "#002b75";
+        readonly cyan900: "#001e52";
+        readonly cyan1000: "#001333";
+        readonly gold50: "#fef9e6";
+        readonly gold75: "#fef6dc";
+        readonly gold100: "#fff1d1";
+        readonly gold200: "#ffe6a8";
+        readonly gold300: "#ffd76f";
+        readonly gold400: "#f7b51d";
+        readonly gold500: "#c77800";
+        readonly gold600: "#ac6406";
+        readonly gold700: "#894e16";
+        readonly gold800: "#6e3311";
+        readonly gold900: "#52210c";
+        readonly green50: "#eefcf3";
+        readonly green100: "#e0f5e8";
+        readonly green200: "#bdead0";
+        readonly green300: "#a3e1bf";
+        readonly green400: "#2fb66d";
+        readonly green500: "#1c874d";
+        readonly green600: "#297f50";
+        readonly green700: "#21693f";
+        readonly green800: "#0a522c";
+        readonly green900: "#003d1e";
+        readonly grape50: "#f1e6fb";
+        readonly grape100: "#e4d3f8";
+        readonly grape200: "#d4baf3";
+        readonly grape300: "#bc92ed";
+        readonly grape400: "#a66de8";
+        readonly grape500: "#7b39c6";
+        readonly grape800: "#2c094e";
+        readonly rose50: "#fde2ec";
+        readonly rose200: "#f9b6d0";
+        readonly rose300: "#f586b1";
+        readonly rose400: "#f25192";
+        readonly rose500: "#ed176c";
+        readonly rose700: "#c8185c";
+        readonly rose800: "#9f1446";
+        readonly rose900: "#4a1125";
+        readonly purple50: "#f8f5fe";
+        readonly purple75: "#f1ebfe";
+        readonly purple100: "#e5d7fe";
+        readonly purple200: "#cfadff";
+        readonly purple300: "#c08dfc";
+        readonly purple400: "#b46ef7";
+        readonly purple500: "#9d38f0";
+        readonly purple600: "#8f23e7";
+        readonly purple700: "#7415c1";
+        readonly purple800: "#550091";
+        readonly purple900: "#48007a";
+        readonly purple1000: "#35005c";
+    };
     readonly color: {
         readonly white: "#ffffff";
         readonly black: "#000000";
@@ -2006,8 +2121,134 @@ export declare const darkTheme: {
     readonly colorMode: "dark";
     readonly isLight: false;
     readonly isDark: true;
+    /**
+     * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+     */
+    readonly colors: {
+        /**
+         * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+         */
+        readonly white: "#ffffff";
+        /**
+         * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+         */
+        readonly black: "#000000";
+        readonly brandMidnight: "#1e0a46";
+        readonly brandWhite: "#ffffff";
+        readonly brandPink: "#f495f9";
+        readonly brandPrimaryPurple: "#550091";
+        readonly serviceGas: "#75A7FD";
+        readonly serviceElectricity: "#62DD99";
+        readonly serviceInsurance: "#F25192";
+        readonly serviceMobile: "#FFD76F";
+        readonly serviceLandline: "#A66DE8";
+        readonly gold50: "#2e1103";
+        readonly gold75: "#411907";
+        readonly gold100: "#52210c";
+        readonly gold200: "#743711";
+        readonly gold300: "#925317";
+        readonly gold400: "#cd7d04";
+        readonly gold500: "#f7b51d";
+        readonly gold600: "#fbc64b";
+        readonly gold700: "#ffd76f";
+        readonly gold800: "#ffe6a8";
+        readonly gold900: "#fff6e0";
+        readonly pink50: "#2c0a2e";
+        readonly pink100: "#48104b";
+        readonly pink300: "#8f248f";
+        readonly pink500: "#c933d1";
+        readonly pink700: "#f495f9";
+        readonly pink900: "#fccff9";
+        readonly pink950: "#fde6fb";
+        readonly grey25: "#050505";
+        readonly grey50: "#0b0b0b";
+        readonly grey75: "#121212";
+        readonly grey100: "#1d1d1d";
+        readonly grey150: "#242424";
+        readonly grey175: "#2c2c2c";
+        readonly grey200: "#323232";
+        readonly grey300: "#414141";
+        readonly grey400: "#585858";
+        readonly grey500: "#707070";
+        readonly grey600: "#b8b8b8";
+        readonly grey700: "#c1c1c1";
+        readonly grey800: "#e3e3e3";
+        readonly grey900: "#f0f0f0";
+        readonly grey1000: "#fafafa";
+        readonly cyan50: "#010a19";
+        readonly cyan75: "#001333";
+        readonly cyan100: "#011537";
+        readonly cyan200: "#00225c";
+        readonly cyan300: "#002d80";
+        readonly cyan400: "#013992";
+        readonly cyan500: "#0658e5";
+        readonly cyan600: "#5692fb";
+        readonly cyan700: "#75a7fd";
+        readonly cyan800: "#a6c8fc";
+        readonly cyan900: "#dbeaff";
+        readonly cyan1000: "#ecf4fe";
+        readonly red50: "#3b1216";
+        readonly red100: "#581a20";
+        readonly red200: "#721d25";
+        readonly red300: "#891e27";
+        readonly red400: "#bd1f2c";
+        readonly red500: "#f24550";
+        readonly red600: "#f2636a";
+        readonly red700: "#f58e92";
+        readonly red800: "#f9aeb3";
+        readonly red900: "#ffebeb";
+        readonly green50: "#133922";
+        readonly green100: "#164429";
+        readonly green200: "#1b5533";
+        readonly green300: "#21693f";
+        readonly green400: "#34a868";
+        readonly green500: "#55ce8b";
+        readonly green600: "#76d5a1";
+        readonly green700: "#90dab2";
+        readonly green800: "#bae8cf";
+        readonly green900: "#e3faeb";
+        readonly apple100: "#03361b";
+        readonly apple200: "#087a3c";
+        readonly apple300: "#10b259";
+        readonly apple600: "#62dd99";
+        readonly apple700: "#96e6b7";
+        readonly apple800: "#c1f0d3";
+        readonly apple950: "#e5f9ed";
+        readonly grape100: "#240444";
+        readonly grape200: "#2d025e";
+        readonly grape500: "#7b39c6";
+        readonly grape600: "#a66de8";
+        readonly grape700: "#bc92ed";
+        readonly grape800: "#d4baf3";
+        readonly grape950: "#f1e6fb";
+        readonly rose100: "#45081e";
+        readonly rose200: "#710e32";
+        readonly rose500: "#e34584";
+        readonly rose600: "#f25192";
+        readonly rose700: "#f586b1";
+        readonly rose800: "#f9b6d0";
+        readonly rose950: "#fde2ec";
+        readonly purple50: "#2f0052";
+        readonly purple75: "#35005c";
+        readonly purple100: "#48007a";
+        readonly purple200: "#550091";
+        readonly purple300: "#7415c1";
+        readonly purple400: "#8f23e7";
+        readonly purple500: "#9d38f0";
+        readonly purple600: "#b46ef7";
+        readonly purple700: "#c08dfc";
+        readonly purple800: "#cfadff";
+        readonly purple900: "#e5d7fe";
+        readonly purple1000: "#f1ebfe";
+    };
     readonly color: {
+        /**
+         * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+         */
         readonly white: "#ffffff";
+        /**
+         * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+         */
         readonly black: "#000000";
         readonly background: {
             readonly brand: "#7a42c8";
@@ -3242,6 +3483,121 @@ export declare const themes: {
         readonly colorMode: "light";
         readonly isLight: true;
         readonly isDark: false;
+        /**
+         * @deprecated This will be removed in the next major version. This is kept for backward compatibility
+         */
+        readonly colors: {
+            readonly white: "#ffffff";
+            readonly black: "#000000";
+            readonly brandMidnight: "#1e0a46";
+            readonly brandWhite: "#ffffff";
+            readonly brandPink: "#f495f9";
+            readonly brandPrimaryPurple: "#550091";
+            readonly serviceGas: "#75A7FD";
+            readonly serviceElectricity: "#62DD99";
+            readonly serviceInsurance: "#F25192";
+            readonly serviceMobile: "#FFD76F";
+            readonly serviceLandline: "#A66DE8";
+            readonly red50: "#ffebeb";
+            readonly red100: "#ffd8d9";
+            readonly red200: "#ffb3b4";
+            readonly red300: "#f58e92";
+            readonly red400: "#ec515d";
+            readonly red500: "#df2a38";
+            readonly red600: "#c31d2a";
+            readonly red700: "#891e27";
+            readonly red800: "#611a20";
+            readonly red900: "#3b1216";
+            readonly pink50: "#fde6fb";
+            readonly pink100: "#fccff9";
+            readonly pink200: "#f9bdfa";
+            readonly pink300: "#f495f9";
+            readonly pink500: "#c933d1";
+            readonly pink700: "#8f248f";
+            readonly pink900: "#48104b";
+            readonly grey25: "#fafafa";
+            readonly grey50: "#f5f5f5";
+            readonly grey75: "#f0f0f0";
+            readonly grey100: "#e3e3e3";
+            readonly grey150: "#d8d8d8";
+            readonly grey175: "#cccccc";
+            readonly grey200: "#c1c1c1";
+            readonly grey300: "#b8b8b8";
+            readonly grey400: "#a0a0a0";
+            readonly grey500: "#888888";
+            readonly grey600: "#707070";
+            readonly grey700: "#585858";
+            readonly grey800: "#414141";
+            readonly grey900: "#242424";
+            readonly grey1000: "#121212";
+            readonly apple50: "#e5f9ed";
+            readonly apple200: "#c1f0d3";
+            readonly apple300: "#96e6b7";
+            readonly apple400: "#62dd99";
+            readonly apple700: "#10b259";
+            readonly apple800: "#087a3c";
+            readonly apple900: "#03361b";
+            readonly cyan50: "#ecf4fe";
+            readonly cyan75: "#e5f1ff";
+            readonly cyan100: "#cce0ff";
+            readonly cyan200: "#a6c8fc";
+            readonly cyan300: "#8fbaff";
+            readonly cyan400: "#75a7fd";
+            readonly cyan500: "#4789fa";
+            readonly cyan600: "#0550d1";
+            readonly cyan700: "#003a9e";
+            readonly cyan800: "#002b75";
+            readonly cyan900: "#001e52";
+            readonly cyan1000: "#001333";
+            readonly gold50: "#fef9e6";
+            readonly gold75: "#fef6dc";
+            readonly gold100: "#fff1d1";
+            readonly gold200: "#ffe6a8";
+            readonly gold300: "#ffd76f";
+            readonly gold400: "#f7b51d";
+            readonly gold500: "#c77800";
+            readonly gold600: "#ac6406";
+            readonly gold700: "#894e16";
+            readonly gold800: "#6e3311";
+            readonly gold900: "#52210c";
+            readonly green50: "#eefcf3";
+            readonly green100: "#e0f5e8";
+            readonly green200: "#bdead0";
+            readonly green300: "#a3e1bf";
+            readonly green400: "#2fb66d";
+            readonly green500: "#1c874d";
+            readonly green600: "#297f50";
+            readonly green700: "#21693f";
+            readonly green800: "#0a522c";
+            readonly green900: "#003d1e";
+            readonly grape50: "#f1e6fb";
+            readonly grape100: "#e4d3f8";
+            readonly grape200: "#d4baf3";
+            readonly grape300: "#bc92ed";
+            readonly grape400: "#a66de8";
+            readonly grape500: "#7b39c6";
+            readonly grape800: "#2c094e";
+            readonly rose50: "#fde2ec";
+            readonly rose200: "#f9b6d0";
+            readonly rose300: "#f586b1";
+            readonly rose400: "#f25192";
+            readonly rose500: "#ed176c";
+            readonly rose700: "#c8185c";
+            readonly rose800: "#9f1446";
+            readonly rose900: "#4a1125";
+            readonly purple50: "#f8f5fe";
+            readonly purple75: "#f1ebfe";
+            readonly purple100: "#e5d7fe";
+            readonly purple200: "#cfadff";
+            readonly purple300: "#c08dfc";
+            readonly purple400: "#b46ef7";
+            readonly purple500: "#9d38f0";
+            readonly purple600: "#8f23e7";
+            readonly purple700: "#7415c1";
+            readonly purple800: "#550091";
+            readonly purple900: "#48007a";
+            readonly purple1000: "#35005c";
+        };
         readonly color: {
             readonly white: "#ffffff";
             readonly black: "#000000";
@@ -4477,8 +4833,134 @@ export declare const themes: {
         readonly colorMode: "dark";
         readonly isLight: false;
         readonly isDark: true;
+        /**
+         * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+         */
+        readonly colors: {
+            /**
+             * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+             */
+            readonly white: "#ffffff";
+            /**
+             * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+             */
+            readonly black: "#000000";
+            readonly brandMidnight: "#1e0a46";
+            readonly brandWhite: "#ffffff";
+            readonly brandPink: "#f495f9";
+            readonly brandPrimaryPurple: "#550091";
+            readonly serviceGas: "#75A7FD";
+            readonly serviceElectricity: "#62DD99";
+            readonly serviceInsurance: "#F25192";
+            readonly serviceMobile: "#FFD76F";
+            readonly serviceLandline: "#A66DE8";
+            readonly gold50: "#2e1103";
+            readonly gold75: "#411907";
+            readonly gold100: "#52210c";
+            readonly gold200: "#743711";
+            readonly gold300: "#925317";
+            readonly gold400: "#cd7d04";
+            readonly gold500: "#f7b51d";
+            readonly gold600: "#fbc64b";
+            readonly gold700: "#ffd76f";
+            readonly gold800: "#ffe6a8";
+            readonly gold900: "#fff6e0";
+            readonly pink50: "#2c0a2e";
+            readonly pink100: "#48104b";
+            readonly pink300: "#8f248f";
+            readonly pink500: "#c933d1";
+            readonly pink700: "#f495f9";
+            readonly pink900: "#fccff9";
+            readonly pink950: "#fde6fb";
+            readonly grey25: "#050505";
+            readonly grey50: "#0b0b0b";
+            readonly grey75: "#121212";
+            readonly grey100: "#1d1d1d";
+            readonly grey150: "#242424";
+            readonly grey175: "#2c2c2c";
+            readonly grey200: "#323232";
+            readonly grey300: "#414141";
+            readonly grey400: "#585858";
+            readonly grey500: "#707070";
+            readonly grey600: "#b8b8b8";
+            readonly grey700: "#c1c1c1";
+            readonly grey800: "#e3e3e3";
+            readonly grey900: "#f0f0f0";
+            readonly grey1000: "#fafafa";
+            readonly cyan50: "#010a19";
+            readonly cyan75: "#001333";
+            readonly cyan100: "#011537";
+            readonly cyan200: "#00225c";
+            readonly cyan300: "#002d80";
+            readonly cyan400: "#013992";
+            readonly cyan500: "#0658e5";
+            readonly cyan600: "#5692fb";
+            readonly cyan700: "#75a7fd";
+            readonly cyan800: "#a6c8fc";
+            readonly cyan900: "#dbeaff";
+            readonly cyan1000: "#ecf4fe";
+            readonly red50: "#3b1216";
+            readonly red100: "#581a20";
+            readonly red200: "#721d25";
+            readonly red300: "#891e27";
+            readonly red400: "#bd1f2c";
+            readonly red500: "#f24550";
+            readonly red600: "#f2636a";
+            readonly red700: "#f58e92";
+            readonly red800: "#f9aeb3";
+            readonly red900: "#ffebeb";
+            readonly green50: "#133922";
+            readonly green100: "#164429";
+            readonly green200: "#1b5533";
+            readonly green300: "#21693f";
+            readonly green400: "#34a868";
+            readonly green500: "#55ce8b";
+            readonly green600: "#76d5a1";
+            readonly green700: "#90dab2";
+            readonly green800: "#bae8cf";
+            readonly green900: "#e3faeb";
+            readonly apple100: "#03361b";
+            readonly apple200: "#087a3c";
+            readonly apple300: "#10b259";
+            readonly apple600: "#62dd99";
+            readonly apple700: "#96e6b7";
+            readonly apple800: "#c1f0d3";
+            readonly apple950: "#e5f9ed";
+            readonly grape100: "#240444";
+            readonly grape200: "#2d025e";
+            readonly grape500: "#7b39c6";
+            readonly grape600: "#a66de8";
+            readonly grape700: "#bc92ed";
+            readonly grape800: "#d4baf3";
+            readonly grape950: "#f1e6fb";
+            readonly rose100: "#45081e";
+            readonly rose200: "#710e32";
+            readonly rose500: "#e34584";
+            readonly rose600: "#f25192";
+            readonly rose700: "#f586b1";
+            readonly rose800: "#f9b6d0";
+            readonly rose950: "#fde2ec";
+            readonly purple50: "#2f0052";
+            readonly purple75: "#35005c";
+            readonly purple100: "#48007a";
+            readonly purple200: "#550091";
+            readonly purple300: "#7415c1";
+            readonly purple400: "#8f23e7";
+            readonly purple500: "#9d38f0";
+            readonly purple600: "#b46ef7";
+            readonly purple700: "#c08dfc";
+            readonly purple800: "#cfadff";
+            readonly purple900: "#e5d7fe";
+            readonly purple1000: "#f1ebfe";
+        };
         readonly color: {
+            /**
+             * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+             */
             readonly white: "#ffffff";
+            /**
+             * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+             */
             readonly black: "#000000";
             readonly background: {
                 readonly brand: "#7a42c8";