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

package/dist/theme/create-theme.js

@@ -5,6 +5,47 @@ 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: '#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',
+    },
+};
 exports.defaultTokens = {
     borderWidths: {
         standard: '1px',
@@ -12,18 +53,20 @@ exports.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',
@@ -39,62 +82,81 @@ exports.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'],
     },
 };
 function createTheme(customTheme, additional) {
     var mergeOptions = { arrayMerge: function (_, source) { return source; } };
     var customThemeWithAdditional = (0, deepmerge_1.default)(customTheme, additional || {}, mergeOptions);
     var theme = (0, deepmerge_1.default)(exports.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 (0, deepmerge_1.default)({
         field: {
             fontFamily: fonts.body,
@@ -105,25 +167,27 @@ 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: {
@@ -137,12 +201,12 @@ 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,
@@ -155,57 +219,49 @@ 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,
@@ -222,67 +278,85 @@ 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: {
@@ -293,11 +367,12 @@ 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]],
             },
@@ -307,49 +382,54 @@ 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,
@@ -362,39 +442,34 @@ 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: {
@@ -407,21 +482,23 @@ 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,