@utilitywarehouse/hearth-react-native 0.31.0 → 0.31.1

package/.turbo/turbo-build.log

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

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.31.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.31.1 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -48,15 +48,15 @@
 
 ✖ 21 problems (0 errors, 21 warnings)
 
-Rule                              | Time (ms) | Relative
-:---------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars |  1597.954 |    62.7%
-react-hooks/exhaustive-deps       |   115.835 |     4.5%
-no-global-assign                  |    84.158 |     3.3%
-react-hooks/rules-of-hooks        |    72.932 |     2.9%
-no-loss-of-precision              |    56.146 |     2.2%
-no-unexpected-multiline           |    49.645 |     1.9%
-no-misleading-character-class     |    42.468 |     1.7%
-@typescript-eslint/ban-ts-comment |    32.905 |     1.3%
-no-useless-escape                 |    31.038 |     1.2%
-no-control-regex                  |    24.764 |     1.0%
+Rule                                              | Time (ms) | Relative
+:-------------------------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars                 |  1546.291 |    60.2%
+react-hooks/exhaustive-deps                       |   108.680 |     4.2%
+no-global-assign                                  |    99.957 |     3.9%
+react-hooks/rules-of-hooks                        |    90.616 |     3.5%
+no-misleading-character-class                     |    53.413 |     2.1%
+no-unexpected-multiline                           |    51.887 |     2.0%
+@typescript-eslint/ban-ts-comment                 |    49.938 |     1.9%
+@typescript-eslint/no-unnecessary-type-constraint |    38.622 |     1.5%
+no-loss-of-precision                              |    33.899 |     1.3%
+no-useless-escape                                 |    30.813 |     1.2%

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.31.1
+
+### Patch Changes
+
+- [#1119](https://github.com/utilitywarehouse/hearth/pull/1119) [`19415d4`](https://github.com/utilitywarehouse/hearth/commit/19415d4d54458b3fb019df6647b9a5e4c375b672) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Refresh dark mode tokens across components and semantic colors.
+
+  Dark mode color tokens have been updated across semantic and component tokens to improve contrast and visual consistency. This also fixes `TableHeaderCell` text colors so purple and white header variants resolve the correct foreground token.
+
+  **Components affected**:
+  - dark mode tokens
+  - `TableHeaderCell`
+
+  **Developer changes**:
+
+  No code changes are required unless you rely on the previous dark mode token values or visual snapshots.
+
 ## 0.31.0
 
 ### Minor Changes

package/build/components/Table/TableHeaderCell.js

@@ -6,8 +6,9 @@ import { BodyText } from '../BodyText';
 import { useTableContext } from './Table.context';
 import { getColumnStyle } from './Table.utils';
 const renderContent = (children, weight = 'semibold', color = 'white') => {
+    styles.useVariants({ color });
     if (typeof children === 'string' || typeof children === 'number') {
-        return (_jsx(BodyText, { size: "md", weight: weight, style: styles.text, inverted: color === 'purple', children: children }));
+        return (_jsx(BodyText, { size: "md", weight: weight, style: styles.text, children: children }));
     }
     return children;
 };
@@ -91,6 +92,14 @@ const styles = StyleSheet.create(theme => ({
                     color: theme.color.text.primary,
                 },
             },
+            color: {
+                purple: {
+                    color: theme.components.table.headerCell.foregoundColorInverted,
+                },
+                white: {
+                    color: theme.components.table.headerCell.foregoundColor,
+                },
+            },
         },
     },
 }));

package/build/core/themes.d.ts

@@ -1276,6 +1276,7 @@ export declare const lightTheme: {
             readonly '700': "#4c4c4c";
             readonly '800': "#3f3f3f";
             readonly '900': "#3a3837";
+            readonly '925': "#2f2d2d";
             readonly '950': "#232323";
             readonly '975': "#191919";
             readonly '1000': "#101010";
@@ -1409,14 +1410,14 @@ export declare const darkTheme: {
     readonly helpers: {
         readonly semanticColor: {
             readonly background: {
-                readonly brand: "#7a42c8";
+                readonly brand: "#442484";
                 readonly loading: "#30302c";
                 readonly primary: "#191917";
-                readonly secondary: "#232323";
+                readonly secondary: "#2f2d2d";
             };
             readonly border: {
-                readonly strong: "#ebebeb";
-                readonly subtle: "#4c473d";
+                readonly strong: "#888888";
+                readonly subtle: "#5b5b5b";
             };
             readonly text: {
                 readonly affirmative: "#58ca93";
@@ -2360,25 +2361,25 @@ export declare const darkTheme: {
          */
         readonly black: "#000000";
         readonly background: {
-            readonly brand: "#7a42c8";
+            readonly brand: "#442484";
             readonly loading: "#30302c";
             readonly primary: "#191917";
-            readonly secondary: "#232323";
+            readonly secondary: "#2f2d2d";
         };
         readonly border: {
-            readonly strong: "#ebebeb";
-            readonly subtle: "#4c473d";
+            readonly strong: "#888888";
+            readonly subtle: "#5b5b5b";
         };
         readonly feedback: {
             readonly danger: {
-                readonly border: "#ff7964";
+                readonly border: "#f4412a";
                 readonly foreground: {
-                    readonly default: "#101010";
+                    readonly default: "#ffffff";
                     readonly subtle: "#ff7964";
                 };
                 readonly surface: {
-                    readonly default: "#ff634a";
-                    readonly subtle: "#ffa89d";
+                    readonly default: "#de2612";
+                    readonly subtle: "#6b1f1a";
                 };
             };
             readonly functional: {
@@ -2393,36 +2394,36 @@ export declare const darkTheme: {
                 };
             };
             readonly info: {
-                readonly border: "#6bb0ff";
+                readonly border: "#2786f1";
                 readonly foreground: {
-                    readonly default: "#101010";
+                    readonly default: "#ffffff";
                     readonly subtle: "#6bb0ff";
                 };
                 readonly surface: {
-                    readonly default: "#6bb0ff";
-                    readonly subtle: "#bcddff";
+                    readonly default: "#1c6cd4";
+                    readonly subtle: "#0b3375";
                 };
             };
             readonly positive: {
-                readonly border: "#58ca93";
+                readonly border: "#19a660";
                 readonly foreground: {
-                    readonly default: "#101010";
+                    readonly default: "#ffffff";
                     readonly subtle: "#58ca93";
                 };
                 readonly surface: {
-                    readonly default: "#36bf7d";
-                    readonly subtle: "#a2e2c3";
+                    readonly default: "#0f834a";
+                    readonly subtle: "#074b2a";
                 };
             };
             readonly warning: {
-                readonly border: "#ff9639";
+                readonly border: "#f56e00";
                 readonly foreground: {
-                    readonly default: "#101010";
+                    readonly default: "#ffffff";
                     readonly subtle: "#ff9639";
                 };
                 readonly surface: {
-                    readonly default: "#ff8010";
-                    readonly subtle: "#ffcca8";
+                    readonly default: "#cf5d00";
+                    readonly subtle: "#893900";
                 };
             };
         };
@@ -2465,9 +2466,9 @@ export declare const darkTheme: {
                 };
                 readonly surface: {
                     readonly strong: {
-                        readonly active: "#c6b5e2";
-                        readonly default: "#996cda";
-                        readonly hover: "#af90de";
+                        readonly active: "#ddd5eb";
+                        readonly default: "#af90de";
+                        readonly hover: "#c6b5e2";
                     };
                 };
             };
@@ -2550,52 +2551,52 @@ export declare const darkTheme: {
             };
         };
         readonly shadow: {
-            readonly brand: "#7a42c8";
-            readonly broadband: "#506c21";
-            readonly cashback: "#8b2bc9";
-            readonly default: "#f7f7f7";
-            readonly energy: "#326e7a";
-            readonly insurance: "#9b4c0e";
-            readonly mobile: "#a7266d";
-            readonly pig: "#8f358f";
+            readonly brand: "#442484";
+            readonly broadband: "#4f6b20";
+            readonly cashback: "#7429b5";
+            readonly default: "#3f3f3f";
+            readonly energy: "#2c6370";
+            readonly insurance: "#7f4518";
+            readonly mobile: "#8a3260";
+            readonly pig: "#7a1f7e";
         };
         readonly surface: {
             readonly brand: {
-                readonly default: "#996cda";
+                readonly default: "#af90de";
                 readonly strong: "#26164f";
                 readonly subtle: "#442484";
             };
             readonly broadband: {
                 readonly default: "#506c21";
-                readonly subtle: "#35421c";
+                readonly subtle: "#4f6b20";
             };
             readonly cashback: {
                 readonly default: "#8b2bc9";
-                readonly subtle: "#522270";
+                readonly subtle: "#7429b5";
             };
             readonly energy: {
                 readonly default: "#326e7a";
-                readonly subtle: "#254348";
+                readonly subtle: "#2c6370";
             };
             readonly highlight: {
                 readonly default: "#ffb921";
-                readonly subtle: "#756230";
+                readonly subtle: "#82692b";
             };
             readonly insurance: {
                 readonly default: "#9b4c0e";
-                readonly subtle: "#5a3213";
+                readonly subtle: "#7f4518";
             };
             readonly mobile: {
                 readonly default: "#a7266d";
-                readonly subtle: "#601f42";
+                readonly subtle: "#8a3260";
             };
             readonly neutral: {
-                readonly strong: "#232323";
+                readonly strong: "#2f2d2d";
                 readonly subtle: "#191917";
             };
             readonly pig: {
                 readonly default: "#8f358f";
-                readonly subtle: "#5d2167";
+                readonly subtle: "#7a1f7e";
             };
         };
         readonly text: {
@@ -2692,6 +2693,7 @@ export declare const darkTheme: {
             readonly '700': "#4c4c4c";
             readonly '800': "#3f3f3f";
             readonly '900': "#3a3837";
+            readonly '925': "#2f2d2d";
             readonly '950': "#232323";
             readonly '975': "#191919";
             readonly '1000': "#101010";
@@ -4098,6 +4100,7 @@ export declare const themes: {
                 readonly '700': "#4c4c4c";
                 readonly '800': "#3f3f3f";
                 readonly '900': "#3a3837";
+                readonly '925': "#2f2d2d";
                 readonly '950': "#232323";
                 readonly '975': "#191919";
                 readonly '1000': "#101010";
@@ -4231,14 +4234,14 @@ export declare const themes: {
         readonly helpers: {
             readonly semanticColor: {
                 readonly background: {
-                    readonly brand: "#7a42c8";
+                    readonly brand: "#442484";
                     readonly loading: "#30302c";
                     readonly primary: "#191917";
-                    readonly secondary: "#232323";
+                    readonly secondary: "#2f2d2d";
                 };
                 readonly border: {
-                    readonly strong: "#ebebeb";
-                    readonly subtle: "#4c473d";
+                    readonly strong: "#888888";
+                    readonly subtle: "#5b5b5b";
                 };
                 readonly text: {
                     readonly affirmative: "#58ca93";
@@ -5182,25 +5185,25 @@ export declare const themes: {
              */
             readonly black: "#000000";
             readonly background: {
-                readonly brand: "#7a42c8";
+                readonly brand: "#442484";
                 readonly loading: "#30302c";
                 readonly primary: "#191917";
-                readonly secondary: "#232323";
+                readonly secondary: "#2f2d2d";
             };
             readonly border: {
-                readonly strong: "#ebebeb";
-                readonly subtle: "#4c473d";
+                readonly strong: "#888888";
+                readonly subtle: "#5b5b5b";
             };
             readonly feedback: {
                 readonly danger: {
-                    readonly border: "#ff7964";
+                    readonly border: "#f4412a";
                     readonly foreground: {
-                        readonly default: "#101010";
+                        readonly default: "#ffffff";
                         readonly subtle: "#ff7964";
                     };
                     readonly surface: {
-                        readonly default: "#ff634a";
-                        readonly subtle: "#ffa89d";
+                        readonly default: "#de2612";
+                        readonly subtle: "#6b1f1a";
                     };
                 };
                 readonly functional: {
@@ -5215,36 +5218,36 @@ export declare const themes: {
                     };
                 };
                 readonly info: {
-                    readonly border: "#6bb0ff";
+                    readonly border: "#2786f1";
                     readonly foreground: {
-                        readonly default: "#101010";
+                        readonly default: "#ffffff";
                         readonly subtle: "#6bb0ff";
                     };
                     readonly surface: {
-                        readonly default: "#6bb0ff";
-                        readonly subtle: "#bcddff";
+                        readonly default: "#1c6cd4";
+                        readonly subtle: "#0b3375";
                     };
                 };
                 readonly positive: {
-                    readonly border: "#58ca93";
+                    readonly border: "#19a660";
                     readonly foreground: {
-                        readonly default: "#101010";
+                        readonly default: "#ffffff";
                         readonly subtle: "#58ca93";
                     };
                     readonly surface: {
-                        readonly default: "#36bf7d";
-                        readonly subtle: "#a2e2c3";
+                        readonly default: "#0f834a";
+                        readonly subtle: "#074b2a";
                     };
                 };
                 readonly warning: {
-                    readonly border: "#ff9639";
+                    readonly border: "#f56e00";
                     readonly foreground: {
-                        readonly default: "#101010";
+                        readonly default: "#ffffff";
                         readonly subtle: "#ff9639";
                     };
                     readonly surface: {
-                        readonly default: "#ff8010";
-                        readonly subtle: "#ffcca8";
+                        readonly default: "#cf5d00";
+                        readonly subtle: "#893900";
                     };
                 };
             };
@@ -5287,9 +5290,9 @@ export declare const themes: {
                     };
                     readonly surface: {
                         readonly strong: {
-                            readonly active: "#c6b5e2";
-                            readonly default: "#996cda";
-                            readonly hover: "#af90de";
+                            readonly active: "#ddd5eb";
+                            readonly default: "#af90de";
+                            readonly hover: "#c6b5e2";
                         };
                     };
                 };
@@ -5372,52 +5375,52 @@ export declare const themes: {
                 };
             };
             readonly shadow: {
-                readonly brand: "#7a42c8";
-                readonly broadband: "#506c21";
-                readonly cashback: "#8b2bc9";
-                readonly default: "#f7f7f7";
-                readonly energy: "#326e7a";
-                readonly insurance: "#9b4c0e";
-                readonly mobile: "#a7266d";
-                readonly pig: "#8f358f";
+                readonly brand: "#442484";
+                readonly broadband: "#4f6b20";
+                readonly cashback: "#7429b5";
+                readonly default: "#3f3f3f";
+                readonly energy: "#2c6370";
+                readonly insurance: "#7f4518";
+                readonly mobile: "#8a3260";
+                readonly pig: "#7a1f7e";
             };
             readonly surface: {
                 readonly brand: {
-                    readonly default: "#996cda";
+                    readonly default: "#af90de";
                     readonly strong: "#26164f";
                     readonly subtle: "#442484";
                 };
                 readonly broadband: {
                     readonly default: "#506c21";
-                    readonly subtle: "#35421c";
+                    readonly subtle: "#4f6b20";
                 };
                 readonly cashback: {
                     readonly default: "#8b2bc9";
-                    readonly subtle: "#522270";
+                    readonly subtle: "#7429b5";
                 };
                 readonly energy: {
                     readonly default: "#326e7a";
-                    readonly subtle: "#254348";
+                    readonly subtle: "#2c6370";
                 };
                 readonly highlight: {
                     readonly default: "#ffb921";
-                    readonly subtle: "#756230";
+                    readonly subtle: "#82692b";
                 };
                 readonly insurance: {
                     readonly default: "#9b4c0e";
-                    readonly subtle: "#5a3213";
+                    readonly subtle: "#7f4518";
                 };
                 readonly mobile: {
                     readonly default: "#a7266d";
-                    readonly subtle: "#601f42";
+                    readonly subtle: "#8a3260";
                 };
                 readonly neutral: {
-                    readonly strong: "#232323";
+                    readonly strong: "#2f2d2d";
                     readonly subtle: "#191917";
                 };
                 readonly pig: {
                     readonly default: "#8f358f";
-                    readonly subtle: "#5d2167";
+                    readonly subtle: "#7a1f7e";
                 };
             };
             readonly text: {
@@ -5514,6 +5517,7 @@ export declare const themes: {
                 readonly '700': "#4c4c4c";
                 readonly '800': "#3f3f3f";
                 readonly '900': "#3a3837";
+                readonly '925': "#2f2d2d";
                 readonly '950': "#232323";
                 readonly '975': "#191919";
                 readonly '1000': "#101010";