@ovotech/element-native 0.0.2 → 2.0.0-beta.0

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

@@ -1,4 +1,45 @@
 import deepMerge from 'deepmerge';
+var brand = {
+    focus: { base: '#3F64E6' },
+    primary: {
+        muted: '#E7F3EA',
+        lightest: '#B6D727',
+        lighter: '#9DC431',
+        light: '#6CBD27',
+        base: '#0D8426',
+        dark: '#0D8426',
+        darker: '#006945',
+    },
+    grey: {
+        lightest: '#FFFFFF',
+        lighter: '#F9F9F9',
+        light: '#F3F3F3',
+        base: '#D1D6DE',
+        dark: '#666D78',
+        darker: '#2F3749',
+        darkest: '#111111',
+    },
+    mission: {
+        base: '#DE1D8D',
+        dark: '#C6187D',
+    },
+    complementary: {
+        base: '#197278',
+    },
+    electricity: {
+        base: '#E7A234',
+        dark: '#D1760A',
+    },
+    gas: {
+        base: '#26ADE4',
+        dark: '#3F64E6',
+    },
+    error: {
+        lightest: '#FAE8EC',
+        base: '#C7153E',
+        dark: '#8C0A28',
+    },
+};
 export var defaultTokens = {
     borderWidths: {
         standard: '1px',
@@ -6,18 +47,20 @@ export var defaultTokens = {
         heavier: '4px',
     },
     radii: {
-        standard: '4px',
+        small: '4px',
+        medium: '8px',
+        large: '12px',
     },
     shadows: {
         standard: {
             color: '#000',
             offset: '1px',
-            opacity: 0.1,
-            radius: '6px',
+            opacity: 0.15,
+            radius: '4px',
             elevation: 3,
         },
     },
-    breakpoints: { small: 480, medium: 768, large: 1208 },
+    breakpoints: { small: 576, medium: 768, large: 1200 },
     space: {
         1: '4px',
         2: '8px',
@@ -33,62 +76,81 @@ export var defaultTokens = {
         12: '48px',
     },
     fonts: {
-        display: 'Arial',
-        body: 'Arial',
-        monospace: 'Courier',
+        body: 'OVOCircular-Book',
+        bold: 'OVOCircular-Bold',
+        heading: 'OVOCircular-Black',
     },
     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,
+        heading: 900,
     },
     colors: {
-        primary: '#0C7494',
-        primaryAlt: '#096885',
+        primary: brand.primary.base,
+        primaryAlt: brand.primary.darker,
         primaryContrast: '#FFFFFF',
-        primaryMuted: '#F3F7F9',
+        primaryMuted: brand.primary.muted,
         error: '#C7153E',
-        errorAlt: '#AE0A30',
+        errorAlt: '#8C0A28',
         errorContrast: '#FFFFFF',
-        errorMuted: '#FCF3F5',
-        info: '#147D88',
-        infoAlt: '#05696C',
+        errorMuted: '#FAE8EC',
+        focus: '#3F64E6',
+        focusMuted: '#C6D1F8',
+        canvas: '#FFFFFF',
+        body: brand.grey.darker,
+        heading: brand.grey.darker,
+        border: brand.grey.dark,
+        canvasMuted: '#F0F2F5',
+        borderMuted: brand.grey.base,
+        info: '#3F64E6',
+        infoAlt: '#004CA0',
         infoContrast: '#FFFFFF',
-        infoMuted: '#F2F7F8',
-        warning: '#C64A18',
-        warningAlt: '#B74E08',
+        infoMuted: '#ECF0FD',
+        warning: '#BE5409',
+        warningAlt: '#8A3C05',
         warningContrast: '#FFFFFF',
-        warningMuted: '#FDF7F3',
-        success: '#258244',
-        successAlt: '#1E6937',
+        warningMuted: '#F7F0E7',
+        success: brand.primary.base,
+        successAlt: brand.primary.darker,
         successContrast: '#FFFFFF',
-        successMuted: '#F4F9F6',
-        focus: '#2A71BE',
-        canvas: '#FFFFFF',
-        body: '#555C6B',
-        heading: '#2F3749',
-        border: '#2F3749',
-        canvasMuted: '#F9F9F9',
-        borderMuted: '#D9D9D9',
+        successMuted: brand.primary.muted,
+        mission: '#DE1D8D',
+        missionMuted: '#FDF4F9',
+        missionAlt: '#C6187D',
+        missionContrast: '#FFFFFF',
+        brand: brand,
     },
     responsiveFontSizes: {
-        small: ['12px', '14px'],
-        body: ['14px', '16px'],
-        level1: ['28px', '32px'],
-        level2: ['24px', '28px'],
-        level3: ['20px', '24px'],
-        level4: ['16px', '20px'],
+        label: ['11px', '14px'],
+        small: ['14px', '14px'],
+        body: ['16px', '16px'],
+        level1: ['28px', '48px'],
+        level2: ['24px', '36px'],
+        level3: ['20px', '28px'],
+        level4: ['16px', '22px'],
+        lead: ['18px', '22px'],
+    },
+    responsiveLineHeights: {
+        label: ['20px', '20px'],
+        small: ['20px', '20px'],
+        body: ['24px', '24px'],
+        level1: ['36px', '52px'],
+        level2: ['32px', '44px'],
+        level3: ['24px', '36px'],
+        level4: ['20px', '28px'],
+        lead: ['24px', '28px'],
     },
 };
 export function createTheme(customTheme, additional) {
     var mergeOptions = { arrayMerge: function (_, source) { return source; } };
     var customThemeWithAdditional = deepMerge(customTheme, additional || {}, mergeOptions);
     var theme = deepMerge(defaultTokens, customThemeWithAdditional, mergeOptions);
-    var fontSizes = theme.fontSizes, breakpoints = theme.breakpoints, colors = theme.colors, fontWeights = theme.fontWeights, fonts = theme.fonts, lineHeights = theme.lineHeights, space = theme.space, radii = theme.radii, shadows = theme.shadows, borderWidths = theme.borderWidths, responsiveFontSizes = theme.responsiveFontSizes;
+    var fontSizes = theme.fontSizes, breakpoints = theme.breakpoints, colors = theme.colors, fontWeights = theme.fontWeights, fonts = theme.fonts, lineHeights = theme.lineHeights, space = theme.space, radii = theme.radii, shadows = theme.shadows, borderWidths = theme.borderWidths, responsiveFontSizes = theme.responsiveFontSizes, responsiveLineHeights = theme.responsiveLineHeights;
     return deepMerge({
         field: {
             fontFamily: fonts.body,
@@ -99,25 +161,27 @@ export function createTheme(customTheme, additional) {
             error: {
                 color: colors.error,
                 fontWeight: fontWeights.bold,
+                fontFamily: fonts.bold,
             },
             hint: {
                 fontWeight: fontWeights.normal,
-                color: colors.body,
+                color: colors.border,
             },
             label: {
                 color: colors.heading,
                 fontWeight: fontWeights.bold,
+                fontFamily: fonts.bold,
             },
             subLabel: {
-                color: colors.heading,
-                fontWeight: fontWeights.semiBold,
+                color: colors.border,
+                fontWeight: fontWeights.normal,
             },
             legend: {
                 marginBottom: space[1],
             },
             errorIndent: {
                 borderWidth: space[1],
-                borderRadius: radii.standard,
+                borderRadius: radii.small,
             },
         },
         focusRing: {
@@ -131,12 +195,12 @@ export function createTheme(customTheme, additional) {
             color: colors.body,
             lineHeight: lineHeights.standard,
             fontWeight: fontWeights.normal,
-            height: space[12],
+            height: space[11],
             borderColor: colors.border,
             borderWidth: borderWidths.standard,
             background: colors.canvas,
             padding: space[2],
-            borderRadius: radii.standard,
+            borderRadius: radii.small,
             error: {
                 borderWidth: borderWidths.heavy,
                 color: colors.error,
@@ -149,57 +213,49 @@ export function createTheme(customTheme, additional) {
             background: colors.canvas,
             borderWidth: borderWidths.standard,
             borderColor: colors.borderMuted,
-            borderRadius: radii.standard,
-            shadow: shadows.standard,
-            padding: [space[4], space[8]],
+            padding: [space[3], space[6], space[9]],
         },
         badge: {
             fontWeight: fontWeights.bold,
+            fontFamily: fonts.bold,
             lineHeight: lineHeights.standard,
-            paddingVertical: space[1],
             paddingHorizontal: space[2],
-            borderRadius: radii.standard,
-            borderWidth: borderWidths.standard,
-            fontSize: responsiveFontSizes.small,
+            borderRadius: radii.small,
+            fontSize: responsiveFontSizes.body,
             variants: {
                 default: {
                     background: colors.primaryMuted,
-                    foreground: colors.primary,
-                    borderColor: colors.primary,
+                    foreground: colors.primaryAlt,
                 },
                 error: {
                     background: colors.errorMuted,
-                    foreground: colors.error,
-                    borderColor: colors.error,
+                    foreground: colors.errorAlt,
                 },
                 success: {
                     background: colors.successMuted,
-                    foreground: colors.success,
-                    borderColor: colors.success,
+                    foreground: colors.successAlt,
                 },
                 info: {
                     background: colors.infoMuted,
-                    foreground: colors.info,
-                    borderColor: colors.info,
+                    foreground: colors.infoAlt,
                 },
                 warning: {
                     background: colors.warningMuted,
-                    foreground: colors.warning,
-                    borderColor: colors.warning,
+                    foreground: colors.warningAlt,
                 },
             },
         },
         cta: {
             fontSize: responsiveFontSizes.body,
             fontWeight: fontWeights.bold,
-            font: fonts.display,
+            fontFamily: fonts.bold,
             lineHeight: lineHeights.standard,
             paddingVertical: space[2],
-            paddingHorizontal: space[4],
-            borderRadius: radii.standard,
+            paddingHorizontal: space[3],
+            borderRadius: radii.small,
             borderWidth: borderWidths.standard,
             iconGap: space[1],
-            minHeight: space[12],
+            minHeight: space[11],
             variants: {
                 primary: {
                     background: colors.primary,
@@ -216,67 +272,85 @@ export function createTheme(customTheme, additional) {
                     foreground: colors.errorContrast,
                     border: colors.error,
                 },
+                missionPrimary: {
+                    background: colors.mission,
+                    foreground: colors.missionContrast,
+                    border: colors.mission,
+                },
+                missionSecondary: {
+                    background: colors.primaryContrast,
+                    foreground: colors.primary,
+                    border: colors.primary,
+                },
             },
         },
         checkbox: {
-            touchSize: space[12],
-            size: space[8],
-            checkSize: space[6],
+            touchSize: space[11],
+            size: space[6],
+            checkSize: space[5],
             gap: space[2],
             paddingTop: space[3],
-            borderWidth: borderWidths.heavy,
+            borderWidth: borderWidths.standard,
             borderColor: colors.border,
-            borderRadius: radii.standard,
+            borderRadius: radii.small,
             background: colors.canvas,
-            checkColor: colors.primary,
+            checkedBackground: colors.infoMuted,
+            checkColor: colors.info,
             errorColor: colors.error,
         },
         notification: {
-            borderRadius: radii.standard,
+            borderRadius: radii.small,
             borderWidth: borderWidths.heavy,
             borderColor: colors.error,
             background: colors.errorMuted,
-            padding: [space[3], space[6]],
+            paddingX: [space[2], space[2]],
+            paddingY: [space[3], space[6]],
             dismiss: {
-                touchSize: space[12],
+                touchSize: space[6],
                 size: space[4],
                 icon: 'cross',
-                color: colors.heading,
             },
             variants: {
                 error: {
-                    borderColor: colors.error,
+                    borderColor: colors.errorMuted,
                     background: colors.errorMuted,
+                    textColor: colors.errorAlt,
                 },
                 success: {
-                    borderColor: colors.success,
+                    borderColor: colors.successMuted,
                     background: colors.successMuted,
+                    textColor: colors.successAlt,
                 },
                 info: {
-                    borderColor: colors.info,
+                    borderColor: colors.infoMuted,
                     background: colors.infoMuted,
+                    textColor: colors.infoAlt,
                 },
                 warning: {
-                    borderColor: colors.warning,
+                    borderColor: colors.warningMuted,
                     background: colors.warningMuted,
+                    textColor: colors.warningAlt,
                 },
             },
         },
         text: {
             fontFamily: fonts.body,
-            lineHeight: lineHeights.standard,
             fontWeight: fontWeights.normal,
+            lineHeight: 1,
             color: colors.body,
             p: {
                 fontSize: responsiveFontSizes.body,
-                marginTop: [space[2], space[3]],
-                marginBottom: [space[2], space[3]],
+                lineHeight: responsiveLineHeights.body,
+                marginTop: [space[3], space[3]],
+                marginBottom: [space[3], space[3]],
             },
             small: {
                 fontSize: responsiveFontSizes.small,
+                lineHeight: responsiveLineHeights.small,
             },
             strong: {
                 fontWeight: fontWeights.bold,
+                fontFamily: fonts.bold,
             },
         },
         list: {
@@ -287,11 +361,12 @@ export function createTheme(customTheme, additional) {
                 fontSize: responsiveFontSizes.body,
                 marginVertical: 2,
                 bulletGap: space[2],
-                bulletWidth: space[4],
+                bulletWidth: space[2],
             },
             descriptionTerm: {
                 color: colors.heading,
                 fontWeight: fontWeights.bold,
+                fontFamily: fonts.bold,
                 marginTop: [space[3], space[4]],
                 marginBottom: [space[1], space[1]],
             },
@@ -301,49 +376,54 @@ export function createTheme(customTheme, additional) {
             fontWeight: fontWeights.normal,
         },
         heading: {
-            fontFamily: fonts.display,
-            lineHeight: lineHeights.standard,
-            fontWeight: fontWeights.bold,
+            fontFamily: fonts.heading,
+            fontWeight: fontWeights.heading,
             color: colors.heading,
             heading1: {
                 fontSize: responsiveFontSizes.level1,
+                lineHeight: responsiveLineHeights.level1,
                 marginTop: [space[8], space[12]],
-                marginBottom: [space[2], space[3]],
+                marginBottom: [space[3], space[4]],
             },
             heading2: {
                 fontSize: responsiveFontSizes.level2,
+                lineHeight: responsiveLineHeights.level2,
                 marginTop: [space[6], space[8]],
-                marginBottom: [space[2], space[3]],
+                marginBottom: [space[3], space[4]],
             },
             heading3: {
                 fontSize: responsiveFontSizes.level3,
+                lineHeight: responsiveLineHeights.level3,
                 marginTop: [space[4], space[6]],
-                marginBottom: [space[2], space[3]],
+                marginBottom: [space[3], space[4]],
             },
             heading4: {
                 fontSize: responsiveFontSizes.level4,
+                lineHeight: responsiveLineHeights.level4,
                 marginTop: [space[3], space[4]],
-                marginBottom: [space[2], space[3]],
+                marginBottom: [space[3], space[4]],
             },
         },
         shadows: shadows,
         radii: radii,
         radio: {
-            touchSize: space[12],
+            touchSize: space[11],
             size: space[8],
             dotSize: space[5],
             gap: space[2],
             paddingTop: space[3],
-            borderWidth: borderWidths.heavy,
+            borderWidth: borderWidths.standard,
             borderColor: colors.border,
             background: colors.canvas,
-            dotColor: colors.primary,
+            dotColor: colors.info,
+            checkedBackground: colors.infoMuted,
             errorColor: colors.error,
         },
         fontWeights: fontWeights,
         fontSizes: fontSizes,
         fonts: fonts,
         responsiveFontSizes: responsiveFontSizes,
+        responsiveLineHeights: responsiveLineHeights,
         colors: colors,
         borderWidths: borderWidths,
         breakpoints: breakpoints,
@@ -356,39 +436,34 @@ export function createTheme(customTheme, additional) {
         disclosure: {
             iconGap: [space[1], space[2]],
             panelGap: [space[2], space[3]],
-            lineIndent: {
-                borderRadius: radii.standard,
-                width: borderWidths.heavier,
-                backgroundColor: colors.borderMuted,
-            },
         },
         dataTable: {
             borderWidth: borderWidths.standard,
-            borderRadius: radii.standard,
-            borderColor: colors.borderMuted,
+            borderRadius: radii.small,
+            borderColor: colors.canvasMuted,
+            responsivePadding: {
+                vertical: [space[2], space[3]],
+                horizontal: [space[1], space[1]],
+            },
             tableHeader: {
                 color: colors.heading,
                 backgroundColor: colors.canvas,
                 borderWidth: borderWidths.standard,
                 borderColor: colors.border,
                 fontWeight: fontWeights.bold,
+                fontFamily: fonts.bold,
             },
             tableCaption: {
                 color: colors.heading,
                 fontWeight: fontWeights.bold,
-                paddingVertical: space[3],
-                paddingHorizontal: space[3],
+                fontFamily: fonts.bold,
             },
             tableCell: {
                 color: colors.body,
-                borderWidth: borderWidths.standard,
-                borderColor: colors.borderMuted,
-                paddingVertical: space[3],
-                paddingHorizontal: space[3],
             },
             tableRow: {
-                backgroundColor: colors.canvasMuted,
-                stripeColor: colors.canvas,
+                backgroundColor: colors.canvas,
+                stripeColor: colors.canvasMuted,
             },
         },
         accordion: {
@@ -401,21 +476,23 @@ export function createTheme(customTheme, additional) {
         },
         tabs: {
             tab: {
-                borderTopWidth: borderWidths.heavier,
+                borderTopWidth: borderWidths.heavy,
+                borderBottomWidth: borderWidths.heavy,
+                borderColor: colors.canvas,
                 fontSize: responsiveFontSizes.body,
                 fontWeight: fontWeights.bold,
-                fontFamily: fonts.display,
+                fontFamily: fonts.bold,
                 lineHeight: lineHeights.standard,
                 paddingHorizontal: [space[4], space[4]],
                 paddingVertical: [space[3], space[3]],
                 active: {
-                    borderTopColor: colors.primary,
-                    foregroundColor: colors.heading,
+                    borderColor: colors.primary,
+                    foregroundColor: colors.primary,
                     backgroundColor: colors.canvas,
                 },
                 inactive: {
-                    foregroundColor: colors.primary,
-                    backgroundColor: colors.canvasMuted,
+                    foregroundColor: colors.heading,
+                    backgroundColor: colors.canvas,
                 },
                 hover: {
                     foregroundColor: colors.primaryAlt,

package/dist/providers/IconsProvider.js

@@ -38,24 +38,44 @@ exports.defaultIcons = exports.IconsProvider = exports.useIcons = void 0;
 var react_1 = __importStar(require("react"));
 var icons_1 = require("./icons");
 var defaultIcons = {
+    'arrow-down': icons_1.ArrowDown,
+    'arrow-left': icons_1.ArrowLeft,
+    'arrow-right': icons_1.ArrowRight,
+    'arrow-up': icons_1.ArrowUp,
     'caret-down': icons_1.CaretDown,
+    'caret-left': icons_1.CaretLeft,
     'caret-right': icons_1.CaretRight,
+    'caret-up': icons_1.CaretUp,
+    chart: icons_1.Chart,
+    check: icons_1.Check,
     'chevron-left': icons_1.ChevronLeft,
+    'chevron-left-small': icons_1.ChevronLeftSmall,
+    'chevron-left-small-first': icons_1.ChevronLeftSmallFirst,
     'chevron-right': icons_1.ChevronRight,
+    'chevron-right-small': icons_1.ChevronRightSmall,
+    'chevron-right-small-last': icons_1.ChevronRightSmallLast,
     'chevron-up': icons_1.ChevronUp,
     'chevron-down': icons_1.ChevronDown,
     cross: icons_1.Cross,
-    check: icons_1.Check,
-    euro: icons_1.Euro,
-    pound: icons_1.Pound,
     dollar: icons_1.Dollar,
-    'new-window': icons_1.NewWindow,
-    gas: icons_1.Gas,
+    download: icons_1.Download,
     electricity: icons_1.Electricity,
+    euro: icons_1.Euro,
+    gas: icons_1.Gas,
+    help: icons_1.Help,
+    hide: icons_1.Hide,
+    home: icons_1.Home,
+    info: icons_1.Info,
+    'new-window': icons_1.NewWindow,
     link: icons_1.Link,
-    download: icons_1.Download,
-    plus: icons_1.Plus,
+    logo: icons_1.Logo,
     minus: icons_1.Minus,
+    'payment-card': icons_1.PaymentCard,
+    plus: icons_1.Plus,
+    pound: icons_1.Pound,
+    search: icons_1.Search,
+    show: icons_1.Show,
+    user: icons_1.User,
 };
 exports.defaultIcons = defaultIcons;
 var IconsContext = (0, react_1.createContext)(null);

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

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

package/dist/providers/icons/ArrowDown.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.ArrowDown = void 0;
+var react_1 = __importDefault(require("react"));
+var react_native_svg_1 = require("react-native-svg");
+var ArrowDown = 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: "M7 -1.07324e-07L9 -8.34742e-08L9 12.2L14.6 6.6L16 8L8 16L9.5399e-08 8L1.4 6.6L7 12.2L7 -1.07324e-07Z", fill: "currentColor", fillRule: "evenodd" }))); };
+exports.ArrowDown = ArrowDown;

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

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

package/dist/providers/icons/ArrowLeft.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.ArrowLeft = void 0;
+var react_1 = __importDefault(require("react"));
+var react_native_svg_1 = require("react-native-svg");
+var ArrowLeft = 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: "M16 9V7H3.8L9.4 1.4L8 0L0 8L8 16L9.4 14.6L3.8 9H16Z", fill: "currentColor" }))); };
+exports.ArrowLeft = ArrowLeft;

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

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