@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

package/build/tokens/semantic-dark.js

@@ -2,23 +2,250 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    color: {
-        background: '#191917',
-        background1: '#222222',
-        backgroundPurple: '#7a42c8',
-        invalidText: '#ff7964',
+    background: {
+        brand: '#996cda',
+        primary: '#191917',
+        secondary: '#232323',
+    },
+    border: {
+        strong: '#ebebeb',
+        subtle: '#4c473d',
+    },
+    feedback: {
+        danger: {
+            border: '#ff7964',
+            foreground: {
+                default: '#fcfbf2',
+                subtle: '#ff7964',
+            },
+            surface: {
+                default: '#de2612',
+                subtle: '#521a16',
+            },
+        },
+        functional: {
+            border: '#b2afae',
+            foreground: {
+                default: '#fcfbf2',
+                subtle: '#b2afae',
+            },
+            surface: {
+                default: '#888888',
+                subtle: '#232323',
+            },
+        },
+        info: {
+            border: '#6bb0ff',
+            foreground: {
+                default: '#fcfbf2',
+                subtle: '#6bb0ff',
+            },
+            surface: {
+                default: '#1c6cd4',
+                subtle: '#042455',
+            },
+        },
+        positive: {
+            border: '#58ca93',
+            foreground: {
+                default: '#fcfbf2',
+                subtle: '#58ca93',
+            },
+            surface: {
+                default: '#0f834a',
+                subtle: '#033d21',
+            },
+        },
+        warning: {
+            border: '#ff9639',
+            foreground: {
+                default: '#fcfbf2',
+                subtle: '#ff9639',
+            },
+            surface: {
+                default: '#cb5b00',
+                subtle: '#6b2d00',
+            },
+        },
+    },
+    focus: {
+        inverted: '#fcfbf2',
+        primary: '#ebebeb',
+    },
+    icon: {
+        inverted: '#fcfbf2',
+        primary: '#ebebeb',
+    },
+    interactive: {
+        affirmative: {
+            border: {
+                strong: '#ebebeb',
+                subtle: '#58ca93',
+            },
+            foreground: {
+                strong: '#191917',
+                subtle: '#58ca93',
+            },
+            surface: {
+                strong: {
+                    active: '#58ca93',
+                    default: '#19a660',
+                    hover: '#36bf7d',
+                },
+                subtle: {
+                    active: '#033d21',
+                    hover: '#002e18',
+                },
+            },
+        },
+        brand: {
+            border: {
+                strong: '#ebebeb',
+            },
+            foreground: {
+                strong: '#191917',
+            },
+            surface: {
+                strong: {
+                    active: '#c6b5e2',
+                    default: '#996cda',
+                    hover: '#af90de',
+                },
+            },
+        },
+        destructive: {
+            border: {
+                strong: '#ebebeb',
+                subtle: '#ff7964',
+            },
+            foreground: {
+                strong: '#191917',
+                subtle: '#ff7964',
+            },
+            surface: {
+                strong: {
+                    active: '#ff7964',
+                    default: '#f4412a',
+                    hover: '#ff634a',
+                },
+                subtle: {
+                    active: '#521a16',
+                    hover: '#3b1512',
+                },
+            },
+        },
+        functional: {
+            border: {
+                strong: '#ebebeb',
+                subtle: '#ebebeb',
+                inverted: '#f7f7f7',
+            },
+            foreground: {
+                strong: '#fcfbf2',
+                subtle: '#ebebeb',
+                inverted: '#f7f7f7',
+            },
+            surface: {
+                strong: {
+                    active: '#d3d3d3',
+                    default: '#919191',
+                    hover: '#b2afae',
+                },
+                subtle: {
+                    active: '#4c4c4c',
+                    hover: '#3a3837',
+                    inverted: {
+                        active: '#d3d3d3',
+                        hover: '#ebebeb',
+                    },
+                },
+            },
+        },
+        highlight: {
+            border: {
+                strong: '#f7f7f7',
+            },
+            foreground: {
+                strong: '#101010',
+            },
+            surface: {
+                strong: {
+                    active: '#ffd885',
+                    default: '#ffb921',
+                    hover: '#ffc852',
+                },
+            },
+        },
+        neutral: {
+            border: {
+                subtle: '#ebebeb',
+            },
+            foreground: {
+                subtle: '#ebebeb',
+            },
+            surface: {
+                subtle: {
+                    active: '#30302c',
+                    hover: '#282825',
+                },
+            },
+        },
     },
     opacity: {
         disabled: 50,
     },
     shadow: {
-        broadbandGreenColor: '#506c21',
-        cashbackLilacColor: '#8b2bc9',
-        defaultColor: '#e7e6e6',
-        energyBlueColor: '#326e7a',
-        insuranceOrangeColor: '#9b4c0e',
-        mobileRoseColor: '#a7266d',
-        piggyPinkColor: '#8f358f',
-        purpleColor: '#7a42c8',
+        brand: '#7a42c8',
+        broadband: '#506c21',
+        cashback: '#8b2bc9',
+        default: '#f7f7f7',
+        energy: '#326e7a',
+        insurance: '#9b4c0e',
+        mobile: '#a7266d',
+        pig: '#8f358f',
+    },
+    surface: {
+        brand: {
+            default: '#996cda',
+            strong: '#26164f',
+            subtle: '#442484',
+        },
+        broadband: {
+            default: '#506c21',
+            subtle: '#35421c',
+        },
+        cashback: {
+            default: '#8b2bc9',
+            subtle: '#522270',
+        },
+        energy: {
+            default: '#326e7a',
+            subtle: '#254348',
+        },
+        highlight: {
+            default: '#ffb921',
+            subtle: '#756230',
+        },
+        insurance: {
+            default: '#9b4c0e',
+            subtle: '#5a3213',
+        },
+        mobile: {
+            default: '#a7266d',
+            subtle: '#601f42',
+        },
+        neutral: {
+            strong: '#232323',
+            subtle: '#191917',
+        },
+        pig: {
+            default: '#8f358f',
+            subtle: '#5d2167',
+        },
+    },
+    text: {
+        inverted: '#191917',
+        primary: '#ebebeb',
+        secondary: '#b2afae',
     },
 };

package/build/tokens/semantic-light.d.ts

@@ -2,24 +2,251 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly color: {
-        readonly background: "#fcfbf2";
-        readonly background1: "#ffffff";
-        readonly backgroundPurple: "#7a42c8";
-        readonly invalidText: "#de2612";
+    readonly background: {
+        readonly brand: "#7a42c8";
+        readonly primary: "#fcfbf2";
+        readonly secondary: "#ffffff";
+    };
+    readonly border: {
+        readonly strong: "#101010";
+        readonly subtle: "#d4d2c0";
+    };
+    readonly feedback: {
+        readonly danger: {
+            readonly border: "#de2612";
+            readonly foreground: {
+                readonly default: "#fcfbf2";
+                readonly subtle: "#de2612";
+            };
+            readonly surface: {
+                readonly default: "#de2612";
+                readonly subtle: "#ffccc5";
+            };
+        };
+        readonly functional: {
+            readonly border: "#888888";
+            readonly foreground: {
+                readonly default: "#fcfbf2";
+                readonly subtle: "#888888";
+            };
+            readonly surface: {
+                readonly default: "#888888";
+                readonly subtle: "#d3d3d3";
+            };
+        };
+        readonly info: {
+            readonly border: "#1c6cd4";
+            readonly foreground: {
+                readonly default: "#fcfbf2";
+                readonly subtle: "#1c6cd4";
+            };
+            readonly surface: {
+                readonly default: "#1c6cd4";
+                readonly subtle: "#bcddff";
+            };
+        };
+        readonly positive: {
+            readonly border: "#0f834a";
+            readonly foreground: {
+                readonly default: "#fcfbf2";
+                readonly subtle: "#0f834a";
+            };
+            readonly surface: {
+                readonly default: "#0f834a";
+                readonly subtle: "#a2e2c3";
+            };
+        };
+        readonly warning: {
+            readonly border: "#be5400";
+            readonly foreground: {
+                readonly default: "#fcfbf2";
+                readonly subtle: "#be5400";
+            };
+            readonly surface: {
+                readonly default: "#be5400";
+                readonly subtle: "#ffcca8";
+            };
+        };
+    };
+    readonly focus: {
+        readonly inverted: "#fcfbf2";
+        readonly primary: "#101010";
+    };
+    readonly icon: {
+        readonly inverted: "#fcfbf2";
+        readonly primary: "#101010";
+    };
+    readonly interactive: {
+        readonly affirmative: {
+            readonly border: {
+                readonly strong: "#101010";
+                readonly subtle: "#04663a";
+            };
+            readonly foreground: {
+                readonly strong: "#fcfbf2";
+                readonly subtle: "#04663a";
+            };
+            readonly surface: {
+                readonly strong: {
+                    readonly active: "#074b2a";
+                    readonly default: "#0f834a";
+                    readonly hover: "#04663a";
+                };
+                readonly subtle: {
+                    readonly active: "#c5edda";
+                    readonly hover: "#e7f9f0";
+                };
+            };
+        };
+        readonly brand: {
+            readonly border: {
+                readonly strong: "#101010";
+            };
+            readonly foreground: {
+                readonly strong: "#fcfbf2";
+            };
+            readonly surface: {
+                readonly strong: {
+                    readonly active: "#442484";
+                    readonly default: "#7a42c8";
+                    readonly hover: "#5c2ca9";
+                };
+            };
+        };
+        readonly destructive: {
+            readonly border: {
+                readonly strong: "#101010";
+                readonly subtle: "#a4281e";
+            };
+            readonly foreground: {
+                readonly strong: "#fcfbf2";
+                readonly subtle: "#a4281e";
+            };
+            readonly surface: {
+                readonly strong: {
+                    readonly active: "#6b1f1a";
+                    readonly default: "#de2612";
+                    readonly hover: "#a4281e";
+                };
+                readonly subtle: {
+                    readonly active: "#ffe3df";
+                    readonly hover: "#fff3f1";
+                };
+            };
+        };
+        readonly functional: {
+            readonly border: {
+                readonly strong: "#101010";
+                readonly subtle: "#101010";
+                readonly inverted: "#f7f7f7";
+            };
+            readonly foreground: {
+                readonly strong: "#fcfbf2";
+                readonly subtle: "#101010";
+                readonly inverted: "#f7f7f7";
+            };
+            readonly surface: {
+                readonly strong: {
+                    readonly active: "#4c4c4c";
+                    readonly default: "#888888";
+                    readonly hover: "#5b5b5b";
+                };
+                readonly subtle: {
+                    readonly active: "#d3d3d3";
+                    readonly hover: "#ebebeb";
+                    readonly inverted: {
+                        readonly active: "#3a3837";
+                        readonly hover: "#3f3f3f";
+                    };
+                };
+            };
+        };
+        readonly highlight: {
+            readonly border: {
+                readonly strong: "#101010";
+            };
+            readonly foreground: {
+                readonly strong: "#101010";
+            };
+            readonly surface: {
+                readonly strong: {
+                    readonly active: "#d1950b";
+                    readonly default: "#ffb921";
+                    readonly hover: "#eba400";
+                };
+            };
+        };
+        readonly neutral: {
+            readonly border: {
+                readonly subtle: "#101010";
+            };
+            readonly foreground: {
+                readonly subtle: "#101010";
+            };
+            readonly surface: {
+                readonly subtle: {
+                    readonly active: "#f1efe4";
+                    readonly hover: "#f7f6eb";
+                };
+            };
+        };
     };
     readonly opacity: {
         readonly disabled: 50;
     };
     readonly shadow: {
-        readonly broadbandGreenColor: "#8cba3b";
-        readonly cashbackLilacColor: "#be7aeb";
-        readonly defaultColor: "#101010";
-        readonly energyBlueColor: "#6db5c3";
-        readonly insuranceOrangeColor: "#ff7b00";
-        readonly mobileRoseColor: "#ee6dbb";
-        readonly piggyPinkColor: "#f295ff";
-        readonly purpleColor: "#7a42c8";
+        readonly brand: "#7a42c8";
+        readonly broadband: "#8cba3b";
+        readonly cashback: "#be7aeb";
+        readonly default: "#101010";
+        readonly energy: "#6db5c3";
+        readonly insurance: "#ff7b00";
+        readonly mobile: "#ee6dbb";
+        readonly pig: "#f295ff";
+    };
+    readonly surface: {
+        readonly brand: {
+            readonly default: "#7a42c8";
+            readonly strong: "#26164f";
+            readonly subtle: "#af90de";
+        };
+        readonly broadband: {
+            readonly default: "#8cba3b";
+            readonly subtle: "#d2e6b0";
+        };
+        readonly cashback: {
+            readonly default: "#be7aeb";
+            readonly subtle: "#dfbdf5";
+        };
+        readonly energy: {
+            readonly default: "#6db5c3";
+            readonly subtle: "#bddee4";
+        };
+        readonly highlight: {
+            readonly default: "#ffb921";
+            readonly subtle: "#ffd885";
+        };
+        readonly insurance: {
+            readonly default: "#ff7b00";
+            readonly subtle: "#ffb46d";
+        };
+        readonly mobile: {
+            readonly default: "#ee6dbb";
+            readonly subtle: "#fad0e9";
+        };
+        readonly neutral: {
+            readonly strong: "#ffffff";
+            readonly subtle: "#fcfbf2";
+        };
+        readonly pig: {
+            readonly default: "#f295ff";
+            readonly subtle: "#f9ceff";
+        };
+    };
+    readonly text: {
+        readonly inverted: "#fcfbf2";
+        readonly primary: "#101010";
+        readonly secondary: "#888888";
     };
 };
 export default _default;