@ovotech/element-native 0.0.2 → 1.0.0

package/dist/components/CTAButton/CTAButton.d.ts

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, ComponentProps, Ref } from 'react';
 import { TouchableOpacityProps, TouchableOpacity } from 'react-native';
 import { IconName } from '../Icon/Icon';
-export declare type CTAVariantName = 'primary' | 'secondary' | 'destructive';
+export declare type CTAVariantName = 'primary' | 'secondary' | 'destructive' | 'missionPrimary' | 'missionSecondary';
 export declare type CTAVariant = {
     background: string;
     foreground: string;

package/dist/components/Icon/Icon.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SvgProps } from 'react-native-svg';
-export declare type IconName = 'caret-down' | 'caret-right' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevron-down' | 'cross' | 'new-window' | 'euro' | 'pound' | 'dollar' | 'check' | 'gas' | 'electricity' | 'link' | 'download' | 'plus' | 'minus';
+export declare type IconName = 'caret-down' | 'caret-right' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevron-down' | 'cross' | 'new-window' | 'euro' | 'pound' | 'dollar' | 'check' | 'gas' | 'electricity' | 'link' | 'download' | 'plus' | 'minus' | 'logo';
 export declare type IconBase = React.FunctionComponent<SvgProps>;
 declare type Props = SvgProps & {
     name: IconName | (string & {});

package/dist/esm/providers/IconsProvider.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React, { createContext, useContext } from 'react';
-import { CaretDown, CaretRight, ChevronLeft, ChevronRight, ChevronUp, ChevronDown, Cross, Check, Euro, Pound, Dollar, NewWindow, Gas, Electricity, Link, Download, Plus, Minus, } from './icons';
+import { CaretDown, CaretRight, ChevronLeft, ChevronRight, ChevronUp, ChevronDown, Cross, Check, Euro, Pound, Dollar, NewWindow, Gas, Electricity, Link, Download, Plus, Minus, Logo, } from './icons';
 var defaultIcons = {
     'caret-down': CaretDown,
     'caret-right': CaretRight,
@@ -30,6 +30,7 @@ var defaultIcons = {
     download: Download,
     plus: Plus,
     minus: Minus,
+    logo: Logo,
 };
 var IconsContext = createContext(null);
 function useIcons() {

package/dist/esm/providers/icons/Electricity.js

@@ -11,6 +11,5 @@ var __assign = (this && this.__assign) || function () {
 };
 import React from 'react';
 import { Path, Svg } from 'react-native-svg';
-var Electricity = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
-    React.createElement(Path, { d: "M6.246 9.44l1 6.56L14.5 4H10l1.5-4H5c-.382 1.015-1.93 5.196-2.834 7.64L1.5 9.44h4.746zm-2.161-1.8A8716.587 8716.587 0 016.249 1.8h2.654l-1.5 4h3.906l-3.033 5.016-.484-3.176H4.085z", fill: "currentColor" }))); };
-export { Electricity };
+export var Electricity = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
+    React.createElement(Path, { d: "M9.52,0V6.22h4L6,16V9.78H2Z", fill: "currentColor" }))); };

package/dist/esm/providers/icons/Gas.js

@@ -11,6 +11,6 @@ var __assign = (this && this.__assign) || function () {
 };
 import React from 'react';
 import { Path, Svg } from 'react-native-svg';
-var Gas = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
-    React.createElement(Path, { d: "M8 16c1.59-.001 3.116-.564 4.24-1.565 1.126-1.001 1.758-2.358 1.76-3.774C14 7 8 0 8 0S2 7 2 10.661c0 1.473.634 2.773 1.76 3.774 1.124 1 2.65 1.564 4.24 1.565zm-1.5-3.114C6.5 11.877 7.5 10.5 8 10c.5.5 1.5 2 1.5 2.886 0 .354-.158.693-.44.944a1.6 1.6 0 01-1.06.39 1.6 1.6 0 01-1.06-.39c-.282-.25-.44-.59-.44-.944zM8 2.5c1.349 1.65 4 5.5 4 8.161a3.227 3.227 0 01-.531 1.739C11 10 8 6.5 8 6.5S5 10 4.531 12.4A3.227 3.227 0 014 10.661C4 8 6.651 4.151 8 2.5z", fill: "currentColor" }))); };
-export { Gas };
+export var Gas = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
+    React.createElement(Path, { d: "M8 0v.31a3.59 3.59 0 01-2.09 3.25 4.68 4.68 0 00-2.8 4.22A4.77 4.77 0 008 12.44v-.31a3.57 3.57 0 012.09-3.24 4.7 4.7 0 002.8-4.22A4.78 4.78 0 008 0z", fill: "currentColor" }),
+    React.createElement(Path, { d: "M1.33 14.22V16h13.34v-1.78z", fill: "currentColor", opacity: 0.3 }))); };

package/dist/esm/providers/icons/Logo.js

@@ -0,0 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { Path, Svg } from 'react-native-svg';
+export var Logo = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 155 64", width: 155, height: 64 }, props),
+    React.createElement(Path, { fill: "#0a9928", d: "M10.6,19a15.29,15.29,0,0,1,8.8,2.7l-.9-2.3H28l3.2,11.4.7,2.6s.4-1.3.7-2.6l3.3-11.4h9.5l-.8,2.4a14.59,14.59,0,0,1,8.8-2.7,6.6,6.6,0,0,1,1.4.1L49.9.8.7,14l1.9,7.2A15.22,15.22,0,0,1,10.6,19Zm42.8,8.3a4.62,4.62,0,0,0-4.7,4.9A4.49,4.49,0,0,0,53.4,37a4.54,4.54,0,0,0,4.7-4.8,3.75,3.75,0,0,0-.1-1.1l-.2-.6A4.44,4.44,0,0,0,53.4,27.3ZM15.2,32.1a4.62,4.62,0,0,0-4.7-4.9,4.62,4.62,0,0,0-4.7,4.9,4.49,4.49,0,0,0,4.7,4.8C13.3,37,15.2,35,15.2,32.1ZM53.4,44.9c-6.9,0-12.6-3.9-13.7-10.5L35.8,44.5H28.1L24.2,34.4C23.1,41,17.4,44.9,10.5,44.9a8.6,8.6,0,0,1-1.6-.1l4.9,18.4L63,50l-1.9-7.1A14.7,14.7,0,0,1,53.4,44.9ZM70.8,33.5a4.7,4.7,0,0,0,4.9,5c3.6,0,4.6-2.2,5.6-2.2a1.06,1.06,0,0,1,1,1.2c0,1.3-3.4,3.4-6.6,3.4-5.3,0-7.6-4.1-7.6-8.5s2.8-8.5,7.4-8.5S82.6,28,82.6,32c0,1-.3,1.5-1.5,1.5Zm9.1-2.1c0-2.4-1.4-5.1-4.4-5.1-3.4-.1-4.6,2.6-4.7,5.1Zm4.9-6a1.34,1.34,0,0,1,1.4-1.5,1.39,1.39,0,0,1,1.4,1.5v.7l.1.1A5.53,5.53,0,0,1,92.3,24c2.6,0,5.8,1.6,5.8,6.3v9.2A1.34,1.34,0,0,1,96.7,41a1.39,1.39,0,0,1-1.4-1.5v-9a3.81,3.81,0,1,0-7.6,0v9A1.34,1.34,0,0,1,86.3,41a1.39,1.39,0,0,1-1.4-1.5V25.4ZM103,33.5a4.7,4.7,0,0,0,4.9,5c3.6,0,4.6-2.2,5.6-2.2a1.06,1.06,0,0,1,1,1.2c0,1.3-3.4,3.4-6.6,3.4-5.3,0-7.6-4.1-7.6-8.5s2.8-8.5,7.4-8.5,7.1,4.1,7.1,8.1c0,1-.3,1.5-1.5,1.5Zm9.1-2.1c0-2.4-1.4-5.1-4.4-5.1-3.4-.1-4.6,2.6-4.7,5.1Zm4.9-6a1.34,1.34,0,0,1,1.4-1.5,1.39,1.39,0,0,1,1.4,1.5v1.4h.1c.6-1.3,2.1-2.9,3.7-2.9a1.34,1.34,0,0,1,1.5,1.4c0,.8-.6,1.3-1.7,1.5-1.6.3-3.6,1.5-3.6,4.7v7.9a1.34,1.34,0,0,1-1.4,1.5,1.39,1.39,0,0,1-1.4-1.5Zm23,14.1c0,4.9-3,7.9-7.5,7.9-2.8,0-6.3-1.6-6.3-3a1.17,1.17,0,0,1,1.2-1.3c1.2,0,2.5,1.9,5.4,1.9,3.5,0,4.5-2.7,4.5-5.1V38.5h-.1a4.75,4.75,0,0,1-4.2,2.4c-4.7,0-7.3-4.1-7.3-8.5s2.6-8.5,7.3-8.5a5.53,5.53,0,0,1,4.2,2.1h.1v-.7c0-1,.7-1.3,1.5-1.3a1.31,1.31,0,0,1,1.3,1.3V39.5Zm-7-1c3.4,0,4.5-3.3,4.5-6.1s-1.2-6.1-4.5-6.1-4.5,3.3-4.5,6.1S129.6,38.5,133,38.5Zm9.4-11.9a5.37,5.37,0,0,1-.4-1.5,1.22,1.22,0,0,1,1.2-1.2,1.41,1.41,0,0,1,1.4,1l3.8,11.4h.1l3.7-11.4a1.3,1.3,0,0,1,1.3-1,1.22,1.22,0,0,1,1.2,1.2,5.37,5.37,0,0,1-.4,1.5l-6.9,19.7a1.38,1.38,0,0,1-1.3,1,1.22,1.22,0,0,1-1.2-1.2,5.37,5.37,0,0,1,.4-1.5L147,40Z" }))); };

package/dist/esm/providers/icons/index.js

@@ -16,3 +16,4 @@ export * from './Minus';
 export * from './NewWindow';
 export * from './Plus';
 export * from './Pound';
+export * from './Logo';

package/dist/esm/theme/create-theme.js

@@ -1,4 +1,44 @@
 import deepMerge from 'deepmerge';
+var brand = {
+    focus: { base: '#028FC8' },
+    primary: {
+        lightest: '#B6D727',
+        lighter: '#9DC431',
+        light: '#6CBD27',
+        base: '#0A9828',
+        dark: '#0D8426',
+        darker: '#006945',
+    },
+    grey: {
+        lightest: '#FFFFFF',
+        lighter: '#F9F9F9',
+        light: '#F3F3F3',
+        base: '#D1D6DE',
+        dark: '#555C6B',
+        darker: '#2F3749',
+        darkest: '#111111',
+    },
+    mission: {
+        base: '#DE1D8D',
+        dark: '#C6187D',
+    },
+    complementary: {
+        base: '#197278',
+    },
+    electricity: {
+        base: '#E7A234',
+        dark: '#D1760A',
+    },
+    gas: {
+        base: '#26ADE4',
+        dark: '#028FC8',
+    },
+    error: {
+        lightest: '#FCF3F5',
+        base: '#C7153E',
+        dark: '#AE0A30',
+    },
+};
 export var defaultTokens = {
     borderWidths: {
         standard: '1px',
@@ -33,28 +73,35 @@ export var defaultTokens = {
         12: '48px',
     },
     fonts: {
-        display: 'Arial',
-        body: 'Arial',
+        display: 'Montserrat-Regular',
+        body: 'OpenSans-Regular',
         monospace: 'Courier',
     },
     lineHeights: {
         standard: 1.5,
     },
-    fontSizes: ['12px', '14px', '16px', '20px', '24px', '28px', '32px'],
+    fontSizes: ['12px', '14px', '16px', '20px', '24px', '28px', '32px', '48px'],
     fontWeights: {
         normal: 400,
         bold: 700,
         semiBold: 600,
     },
     colors: {
-        primary: '#0C7494',
-        primaryAlt: '#096885',
+        primary: '#0D8426',
+        primaryAlt: '#006945',
         primaryContrast: '#FFFFFF',
         primaryMuted: '#F3F7F9',
         error: '#C7153E',
         errorAlt: '#AE0A30',
         errorContrast: '#FFFFFF',
         errorMuted: '#FCF3F5',
+        focus: '#028FC8',
+        canvas: '#FFFFFF',
+        body: '#555C6B',
+        heading: '#2F3749',
+        border: '#2F3749',
+        canvasMuted: '#F9F9F9',
+        borderMuted: '#F3F3F3',
         info: '#147D88',
         infoAlt: '#05696C',
         infoContrast: '#FFFFFF',
@@ -67,13 +114,11 @@ export var defaultTokens = {
         successAlt: '#1E6937',
         successContrast: '#FFFFFF',
         successMuted: '#F4F9F6',
-        focus: '#2A71BE',
-        canvas: '#FFFFFF',
-        body: '#555C6B',
-        heading: '#2F3749',
-        border: '#2F3749',
-        canvasMuted: '#F9F9F9',
-        borderMuted: '#D9D9D9',
+        mission: '#DE1D8D',
+        missionMuted: '#FDF4F9',
+        missionAlt: '#C6187D',
+        missionContrast: '#FFFFFF',
+        brand: brand,
     },
     responsiveFontSizes: {
         small: ['12px', '14px'],
@@ -82,6 +127,7 @@ export var defaultTokens = {
         level2: ['24px', '28px'],
         level3: ['20px', '24px'],
         level4: ['16px', '20px'],
+        display: ['32px', '48px'],
     },
 };
 export function createTheme(customTheme, additional) {
@@ -216,6 +262,16 @@ export function createTheme(customTheme, additional) {
                     foreground: colors.errorContrast,
                     border: colors.error,
                 },
+                missionPrimary: {
+                    background: colors.mission,
+                    foreground: colors.missionContrast,
+                    border: colors.mission,
+                },
+                missionSecondary: {
+                    background: colors.missionContrast,
+                    foreground: colors.mission,
+                    border: colors.mission,
+                },
             },
         },
         checkbox: {
@@ -387,8 +443,8 @@ export function createTheme(customTheme, additional) {
                 paddingHorizontal: space[3],
             },
             tableRow: {
-                backgroundColor: colors.canvasMuted,
-                stripeColor: colors.canvas,
+                backgroundColor: colors.canvas,
+                stripeColor: colors.canvasMuted,
             },
         },
         accordion: {

package/dist/providers/IconsProvider.js

@@ -56,6 +56,7 @@ var defaultIcons = {
     download: icons_1.Download,
     plus: icons_1.Plus,
     minus: icons_1.Minus,
+    logo: icons_1.Logo,
 };
 exports.defaultIcons = defaultIcons;
 var IconsContext = (0, react_1.createContext)(null);

package/dist/providers/icons/Electricity.d.ts

@@ -1,3 +1,2 @@
 import { SvgProps } from 'react-native-svg';
-declare const Electricity: (props: SvgProps) => JSX.Element;
-export { Electricity };
+export declare const Electricity: (props: SvgProps) => JSX.Element;

package/dist/providers/icons/Electricity.js

@@ -18,5 +18,5 @@ exports.Electricity = void 0;
 var react_1 = __importDefault(require("react"));
 var react_native_svg_1 = require("react-native-svg");
 var Electricity = function (props) { return (react_1.default.createElement(react_native_svg_1.Svg, __assign({ viewBox: "0 0 16 16" }, props),
-    react_1.default.createElement(react_native_svg_1.Path, { d: "M6.246 9.44l1 6.56L14.5 4H10l1.5-4H5c-.382 1.015-1.93 5.196-2.834 7.64L1.5 9.44h4.746zm-2.161-1.8A8716.587 8716.587 0 016.249 1.8h2.654l-1.5 4h3.906l-3.033 5.016-.484-3.176H4.085z", fill: "currentColor" }))); };
+    react_1.default.createElement(react_native_svg_1.Path, { d: "M9.52,0V6.22h4L6,16V9.78H2Z", fill: "currentColor" }))); };
 exports.Electricity = Electricity;

package/dist/providers/icons/Gas.d.ts

@@ -1,3 +1,2 @@
 import { SvgProps } from 'react-native-svg';
-declare const Gas: (props: SvgProps) => JSX.Element;
-export { Gas };
+export declare const Gas: (props: SvgProps) => JSX.Element;

package/dist/providers/icons/Gas.js

@@ -18,5 +18,6 @@ exports.Gas = void 0;
 var react_1 = __importDefault(require("react"));
 var react_native_svg_1 = require("react-native-svg");
 var Gas = function (props) { return (react_1.default.createElement(react_native_svg_1.Svg, __assign({ viewBox: "0 0 16 16" }, props),
-    react_1.default.createElement(react_native_svg_1.Path, { d: "M8 16c1.59-.001 3.116-.564 4.24-1.565 1.126-1.001 1.758-2.358 1.76-3.774C14 7 8 0 8 0S2 7 2 10.661c0 1.473.634 2.773 1.76 3.774 1.124 1 2.65 1.564 4.24 1.565zm-1.5-3.114C6.5 11.877 7.5 10.5 8 10c.5.5 1.5 2 1.5 2.886 0 .354-.158.693-.44.944a1.6 1.6 0 01-1.06.39 1.6 1.6 0 01-1.06-.39c-.282-.25-.44-.59-.44-.944zM8 2.5c1.349 1.65 4 5.5 4 8.161a3.227 3.227 0 01-.531 1.739C11 10 8 6.5 8 6.5S5 10 4.531 12.4A3.227 3.227 0 014 10.661C4 8 6.651 4.151 8 2.5z", fill: "currentColor" }))); };
+    react_1.default.createElement(react_native_svg_1.Path, { d: "M8 0v.31a3.59 3.59 0 01-2.09 3.25 4.68 4.68 0 00-2.8 4.22A4.77 4.77 0 008 12.44v-.31a3.57 3.57 0 012.09-3.24 4.7 4.7 0 002.8-4.22A4.78 4.78 0 008 0z", fill: "currentColor" }),
+    react_1.default.createElement(react_native_svg_1.Path, { d: "M1.33 14.22V16h13.34v-1.78z", fill: "currentColor", opacity: 0.3 }))); };
 exports.Gas = Gas;

package/dist/providers/icons/Logo.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from 'react-native-svg';
+export declare const Logo: (props: SvgProps) => JSX.Element;

package/dist/providers/icons/Logo.js

@@ -0,0 +1,22 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Logo = void 0;
+var react_1 = __importDefault(require("react"));
+var react_native_svg_1 = require("react-native-svg");
+var Logo = function (props) { return (react_1.default.createElement(react_native_svg_1.Svg, __assign({ viewBox: "0 0 155 64", width: 155, height: 64 }, props),
+    react_1.default.createElement(react_native_svg_1.Path, { fill: "#0a9928", d: "M10.6,19a15.29,15.29,0,0,1,8.8,2.7l-.9-2.3H28l3.2,11.4.7,2.6s.4-1.3.7-2.6l3.3-11.4h9.5l-.8,2.4a14.59,14.59,0,0,1,8.8-2.7,6.6,6.6,0,0,1,1.4.1L49.9.8.7,14l1.9,7.2A15.22,15.22,0,0,1,10.6,19Zm42.8,8.3a4.62,4.62,0,0,0-4.7,4.9A4.49,4.49,0,0,0,53.4,37a4.54,4.54,0,0,0,4.7-4.8,3.75,3.75,0,0,0-.1-1.1l-.2-.6A4.44,4.44,0,0,0,53.4,27.3ZM15.2,32.1a4.62,4.62,0,0,0-4.7-4.9,4.62,4.62,0,0,0-4.7,4.9,4.49,4.49,0,0,0,4.7,4.8C13.3,37,15.2,35,15.2,32.1ZM53.4,44.9c-6.9,0-12.6-3.9-13.7-10.5L35.8,44.5H28.1L24.2,34.4C23.1,41,17.4,44.9,10.5,44.9a8.6,8.6,0,0,1-1.6-.1l4.9,18.4L63,50l-1.9-7.1A14.7,14.7,0,0,1,53.4,44.9ZM70.8,33.5a4.7,4.7,0,0,0,4.9,5c3.6,0,4.6-2.2,5.6-2.2a1.06,1.06,0,0,1,1,1.2c0,1.3-3.4,3.4-6.6,3.4-5.3,0-7.6-4.1-7.6-8.5s2.8-8.5,7.4-8.5S82.6,28,82.6,32c0,1-.3,1.5-1.5,1.5Zm9.1-2.1c0-2.4-1.4-5.1-4.4-5.1-3.4-.1-4.6,2.6-4.7,5.1Zm4.9-6a1.34,1.34,0,0,1,1.4-1.5,1.39,1.39,0,0,1,1.4,1.5v.7l.1.1A5.53,5.53,0,0,1,92.3,24c2.6,0,5.8,1.6,5.8,6.3v9.2A1.34,1.34,0,0,1,96.7,41a1.39,1.39,0,0,1-1.4-1.5v-9a3.81,3.81,0,1,0-7.6,0v9A1.34,1.34,0,0,1,86.3,41a1.39,1.39,0,0,1-1.4-1.5V25.4ZM103,33.5a4.7,4.7,0,0,0,4.9,5c3.6,0,4.6-2.2,5.6-2.2a1.06,1.06,0,0,1,1,1.2c0,1.3-3.4,3.4-6.6,3.4-5.3,0-7.6-4.1-7.6-8.5s2.8-8.5,7.4-8.5,7.1,4.1,7.1,8.1c0,1-.3,1.5-1.5,1.5Zm9.1-2.1c0-2.4-1.4-5.1-4.4-5.1-3.4-.1-4.6,2.6-4.7,5.1Zm4.9-6a1.34,1.34,0,0,1,1.4-1.5,1.39,1.39,0,0,1,1.4,1.5v1.4h.1c.6-1.3,2.1-2.9,3.7-2.9a1.34,1.34,0,0,1,1.5,1.4c0,.8-.6,1.3-1.7,1.5-1.6.3-3.6,1.5-3.6,4.7v7.9a1.34,1.34,0,0,1-1.4,1.5,1.39,1.39,0,0,1-1.4-1.5Zm23,14.1c0,4.9-3,7.9-7.5,7.9-2.8,0-6.3-1.6-6.3-3a1.17,1.17,0,0,1,1.2-1.3c1.2,0,2.5,1.9,5.4,1.9,3.5,0,4.5-2.7,4.5-5.1V38.5h-.1a4.75,4.75,0,0,1-4.2,2.4c-4.7,0-7.3-4.1-7.3-8.5s2.6-8.5,7.3-8.5a5.53,5.53,0,0,1,4.2,2.1h.1v-.7c0-1,.7-1.3,1.5-1.3a1.31,1.31,0,0,1,1.3,1.3V39.5Zm-7-1c3.4,0,4.5-3.3,4.5-6.1s-1.2-6.1-4.5-6.1-4.5,3.3-4.5,6.1S129.6,38.5,133,38.5Zm9.4-11.9a5.37,5.37,0,0,1-.4-1.5,1.22,1.22,0,0,1,1.2-1.2,1.41,1.41,0,0,1,1.4,1l3.8,11.4h.1l3.7-11.4a1.3,1.3,0,0,1,1.3-1,1.22,1.22,0,0,1,1.2,1.2,5.37,5.37,0,0,1-.4,1.5l-6.9,19.7a1.38,1.38,0,0,1-1.3,1,1.22,1.22,0,0,1-1.2-1.2,5.37,5.37,0,0,1,.4-1.5L147,40Z" }))); };
+exports.Logo = Logo;

package/dist/providers/icons/index.d.ts

@@ -16,3 +16,4 @@ export * from './Minus';
 export * from './NewWindow';
 export * from './Plus';
 export * from './Pound';
+export * from './Logo';

package/dist/providers/icons/index.js

@@ -32,3 +32,4 @@ __exportStar(require("./Minus"), exports);
 __exportStar(require("./NewWindow"), exports);
 __exportStar(require("./Plus"), exports);
 __exportStar(require("./Pound"), exports);
+__exportStar(require("./Logo"), exports);

package/dist/providers/types.d.ts

@@ -1,4 +1,4 @@
 import { FunctionComponent } from 'react';
 import { SvgProps } from 'react-native-svg';
-export declare type IconName = 'caret-down' | 'caret-right' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevron-down' | 'cross' | 'euro' | 'pound' | 'new-window' | 'gas' | 'electricity' | 'link' | 'download' | 'plus' | 'minus' | 'check';
+export declare type IconName = 'caret-down' | 'caret-right' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevron-down' | 'cross' | 'euro' | 'pound' | 'new-window' | 'gas' | 'electricity' | 'link' | 'download' | 'plus' | 'minus' | 'check' | 'logo';
 export declare type IconsType = Record<string, FunctionComponent<SvgProps>>;

package/dist/theme/create-theme.js

@@ -5,6 +5,46 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTheme = exports.defaultTokens = void 0;
 var deepmerge_1 = __importDefault(require("deepmerge"));
+var brand = {
+    focus: { base: '#028FC8' },
+    primary: {
+        lightest: '#B6D727',
+        lighter: '#9DC431',
+        light: '#6CBD27',
+        base: '#0A9828',
+        dark: '#0D8426',
+        darker: '#006945',
+    },
+    grey: {
+        lightest: '#FFFFFF',
+        lighter: '#F9F9F9',
+        light: '#F3F3F3',
+        base: '#D1D6DE',
+        dark: '#555C6B',
+        darker: '#2F3749',
+        darkest: '#111111',
+    },
+    mission: {
+        base: '#DE1D8D',
+        dark: '#C6187D',
+    },
+    complementary: {
+        base: '#197278',
+    },
+    electricity: {
+        base: '#E7A234',
+        dark: '#D1760A',
+    },
+    gas: {
+        base: '#26ADE4',
+        dark: '#028FC8',
+    },
+    error: {
+        lightest: '#FCF3F5',
+        base: '#C7153E',
+        dark: '#AE0A30',
+    },
+};
 exports.defaultTokens = {
     borderWidths: {
         standard: '1px',
@@ -39,28 +79,35 @@ exports.defaultTokens = {
         12: '48px',
     },
     fonts: {
-        display: 'Arial',
-        body: 'Arial',
+        display: 'Montserrat-Regular',
+        body: 'OpenSans-Regular',
         monospace: 'Courier',
     },
     lineHeights: {
         standard: 1.5,
     },
-    fontSizes: ['12px', '14px', '16px', '20px', '24px', '28px', '32px'],
+    fontSizes: ['12px', '14px', '16px', '20px', '24px', '28px', '32px', '48px'],
     fontWeights: {
         normal: 400,
         bold: 700,
         semiBold: 600,
     },
     colors: {
-        primary: '#0C7494',
-        primaryAlt: '#096885',
+        primary: '#0D8426',
+        primaryAlt: '#006945',
         primaryContrast: '#FFFFFF',
         primaryMuted: '#F3F7F9',
         error: '#C7153E',
         errorAlt: '#AE0A30',
         errorContrast: '#FFFFFF',
         errorMuted: '#FCF3F5',
+        focus: '#028FC8',
+        canvas: '#FFFFFF',
+        body: '#555C6B',
+        heading: '#2F3749',
+        border: '#2F3749',
+        canvasMuted: '#F9F9F9',
+        borderMuted: '#F3F3F3',
         info: '#147D88',
         infoAlt: '#05696C',
         infoContrast: '#FFFFFF',
@@ -73,13 +120,11 @@ exports.defaultTokens = {
         successAlt: '#1E6937',
         successContrast: '#FFFFFF',
         successMuted: '#F4F9F6',
-        focus: '#2A71BE',
-        canvas: '#FFFFFF',
-        body: '#555C6B',
-        heading: '#2F3749',
-        border: '#2F3749',
-        canvasMuted: '#F9F9F9',
-        borderMuted: '#D9D9D9',
+        mission: '#DE1D8D',
+        missionMuted: '#FDF4F9',
+        missionAlt: '#C6187D',
+        missionContrast: '#FFFFFF',
+        brand: brand,
     },
     responsiveFontSizes: {
         small: ['12px', '14px'],
@@ -88,6 +133,7 @@ exports.defaultTokens = {
         level2: ['24px', '28px'],
         level3: ['20px', '24px'],
         level4: ['16px', '20px'],
+        display: ['32px', '48px'],
     },
 };
 function createTheme(customTheme, additional) {
@@ -222,6 +268,16 @@ function createTheme(customTheme, additional) {
                     foreground: colors.errorContrast,
                     border: colors.error,
                 },
+                missionPrimary: {
+                    background: colors.mission,
+                    foreground: colors.missionContrast,
+                    border: colors.mission,
+                },
+                missionSecondary: {
+                    background: colors.missionContrast,
+                    foreground: colors.mission,
+                    border: colors.mission,
+                },
             },
         },
         checkbox: {
@@ -393,8 +449,8 @@ function createTheme(customTheme, additional) {
                 paddingHorizontal: space[3],
             },
             tableRow: {
-                backgroundColor: colors.canvasMuted,
-                stripeColor: colors.canvas,
+                backgroundColor: colors.canvas,
+                stripeColor: colors.canvasMuted,
             },
         },
         accordion: {

package/dist/theme/theme.d.ts

@@ -11,11 +11,13 @@ declare type Shadow = {
 };
 export declare type Theme = {
     space: Record<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12, string>;
-    colors: Record<'primary' | 'primaryAlt' | 'primaryContrast' | 'primaryMuted' | 'error' | 'errorAlt' | 'errorContrast' | 'errorMuted' | 'info' | 'infoAlt' | 'infoContrast' | 'infoMuted' | 'warning' | 'warningAlt' | 'warningContrast' | 'warningMuted' | 'success' | 'successAlt' | 'successContrast' | 'successMuted' | 'focus' | 'body' | 'heading' | 'border' | 'borderMuted' | 'canvas' | 'canvasMuted', string>;
+    colors: Record<'primary' | 'primaryAlt' | 'primaryContrast' | 'primaryMuted' | 'error' | 'errorAlt' | 'errorContrast' | 'errorMuted' | 'info' | 'infoAlt' | 'infoContrast' | 'infoMuted' | 'warning' | 'warningAlt' | 'warningContrast' | 'warningMuted' | 'success' | 'successAlt' | 'successContrast' | 'successMuted' | 'focus' | 'body' | 'heading' | 'border' | 'borderMuted' | 'canvas' | 'canvasMuted' | 'mission' | 'missionMuted' | 'missionAlt' | 'missionContrast', string> & {
+        brand: Record<string, Record<string, string>>;
+    };
     fonts: Record<'display' | 'body' | 'monospace', string>;
     lineHeights: Record<'standard', number>;
     fontSizes: string[];
-    responsiveFontSizes: Record<'body' | 'small' | 'level1' | 'level2' | 'level3' | 'level4', string[]>;
+    responsiveFontSizes: Record<'body' | 'small' | 'level1' | 'level2' | 'level3' | 'level4' | 'display', string[]>;
     breakpoints: Record<'small' | 'medium' | 'large', number>;
     radii: Record<'standard', string>;
     shadows: Record<'standard', Shadow>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",