@ovotech/element-native 3.2.3-canary-490fc38-128 → 3.2.3

package/dist/theme/create-theme.js

@@ -0,0 +1,337 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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',
+        heavy: '2px',
+        heavier: '4px',
+    },
+    radii: {
+        small: '4px',
+        medium: '8px',
+        large: '12px',
+    },
+    shadows: {
+        standard: {
+            color: '#000',
+            offset: '1px',
+            opacity: 0.15,
+            radius: '4px',
+            elevation: 3,
+        },
+    },
+    breakpoints: { small: 576, medium: 768, large: 1200 },
+    space: {
+        1: '4px',
+        2: '8px',
+        3: '12px',
+        4: '16px',
+        5: '20px',
+        6: '24px',
+        7: '28px',
+        8: '32px',
+        9: '36px',
+        10: '40px',
+        11: '44px',
+        12: '48px',
+    },
+    fonts: {
+        body: 'OVOCircularTT-Book',
+        bold: 'OVOCircularTT-Bold',
+        heading: 'OVOCircularTT-Black',
+    },
+    lineHeights: {
+        standard: 1.5,
+    },
+    fontSizes: ['12px', '14px', '16px', '20px', '24px', '28px', '32px', '48px'],
+    colors: {
+        primary: brand.primary.base,
+        primaryAlt: brand.primary.darker,
+        primaryContrast: '#FFFFFF',
+        primaryMuted: brand.primary.muted,
+        error: '#C7153E',
+        errorAlt: '#8C0A28',
+        errorContrast: '#FFFFFF',
+        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: '#ECF0FD',
+        warning: '#BE5409',
+        warningAlt: '#8A3C05',
+        warningContrast: '#FFFFFF',
+        warningMuted: '#F7F0E7',
+        success: brand.primary.base,
+        successAlt: brand.primary.darker,
+        successContrast: '#FFFFFF',
+        successMuted: brand.primary.muted,
+        mission: '#DE1D8D',
+        missionMuted: '#FDF4F9',
+        missionAlt: '#C6187D',
+        missionContrast: '#FFFFFF',
+        brand: brand,
+    },
+    responsiveFontSizes: {
+        label: ['11px', '14px'],
+        small: ['14px', '14px'],
+        body: ['16px', '16px'],
+        level1: ['28px', '48px'],
+        level2: ['24px', '32px'],
+        level3: ['20px', '28px'],
+        level4: ['16px', '22px'],
+        lead: ['18px', '22px'],
+    },
+    responsiveLineHeights: {
+        label: ['20px', '20px'],
+        small: ['20px', '20px'],
+        body: ['24px', '24px'],
+        level1: ['36px', '52px'],
+        level2: ['32px', '40px'],
+        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, 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,
+            fontSize: responsiveFontSizes.body,
+            lineHeight: lineHeights.standard,
+            dateWidth: '265px',
+            gap: space[2],
+            error: {
+                color: colors.error,
+                fontFamily: fonts.bold,
+            },
+            hint: {
+                color: colors.border,
+            },
+            label: {
+                color: colors.heading,
+                fontFamily: fonts.bold,
+            },
+            subLabel: {
+                color: colors.border,
+            },
+            legend: {
+                marginBottom: space[1],
+            },
+            errorIndent: {
+                borderWidth: space[1],
+                borderRadius: radii.small,
+            },
+        },
+        focusRing: {
+            color: colors.focus,
+            width: borderWidths.heavy,
+            distance: borderWidths.heavy,
+        },
+        input: {
+            fontFamily: fonts.body,
+            fontSize: responsiveFontSizes.body,
+            color: colors.body,
+            lineHeight: lineHeights.standard,
+            height: space[11],
+            borderColor: colors.border,
+            borderWidth: borderWidths.standard,
+            background: colors.canvas,
+            padding: space[2],
+            borderRadius: radii.small,
+            error: {
+                borderWidth: borderWidths.heavy,
+                color: colors.error,
+            },
+            icon: {
+                size: space[4],
+            },
+        },
+        card: {
+            background: colors.canvas,
+            borderWidth: borderWidths.standard,
+            borderColor: colors.borderMuted,
+            padding: [space[3], space[6], space[9]],
+        },
+        checkbox: {
+            touchSize: space[11],
+            size: space[6],
+            checkSize: space[5],
+            gap: space[2],
+            paddingTop: space[3],
+            borderWidth: borderWidths.standard,
+            borderColor: colors.border,
+            borderRadius: radii.small,
+            background: colors.canvas,
+            checkedBackground: colors.infoMuted,
+            checkColor: colors.info,
+            errorColor: colors.error,
+        },
+        text: {
+            fontFamily: fonts.body,
+            lineHeight: 1,
+            color: colors.body,
+            p: {
+                fontSize: responsiveFontSizes.body,
+                lineHeight: responsiveLineHeights.body,
+                marginTop: [space[3], space[3]],
+                marginBottom: [space[3], space[3]],
+            },
+            small: {
+                fontSize: responsiveFontSizes.small,
+                lineHeight: responsiveLineHeights.small,
+            },
+            strong: {
+                fontFamily: fonts.bold,
+            },
+        },
+        list: {
+            marginTop: [space[2], space[3]],
+            marginBottom: [space[2], space[3]],
+            marginLeft: space[6],
+            listItem: {
+                fontSize: responsiveFontSizes.body,
+                lineHeight: responsiveLineHeights.body,
+                marginVertical: 2,
+                bulletGap: space[2],
+                bulletWidth: space[2],
+            },
+            descriptionTerm: {
+                color: colors.heading,
+                fontFamily: fonts.bold,
+                marginTop: [space[3], space[4]],
+                marginBottom: [space[1], space[1]],
+            },
+        },
+        textLink: {
+            fontFamily: fonts.body,
+            color: colors.primary,
+        },
+        heading: {
+            fontFamily: fonts.heading,
+            color: colors.heading,
+            heading1: {
+                fontSize: responsiveFontSizes.level1,
+                lineHeight: responsiveLineHeights.level1,
+                marginTop: [space[8], space[12]],
+                marginBottom: [space[3], space[4]],
+            },
+            heading2: {
+                fontSize: responsiveFontSizes.level2,
+                lineHeight: responsiveLineHeights.level2,
+                marginTop: [space[6], space[8]],
+                marginBottom: [space[3], space[4]],
+            },
+            heading3: {
+                fontSize: responsiveFontSizes.level3,
+                lineHeight: responsiveLineHeights.level3,
+                marginTop: [space[4], space[6]],
+                marginBottom: [space[3], space[4]],
+            },
+            heading4: {
+                fontSize: responsiveFontSizes.level4,
+                lineHeight: responsiveLineHeights.level4,
+                marginTop: [space[3], space[4]],
+                marginBottom: [space[3], space[4]],
+            },
+        },
+        shadows: shadows,
+        radii: radii,
+        radio: {
+            touchSize: space[11],
+            size: space[8],
+            dotSize: space[5],
+            gap: space[2],
+            paddingTop: space[3],
+            borderWidth: borderWidths.standard,
+            borderColor: colors.border,
+            background: colors.canvas,
+            dotColor: colors.info,
+            checkedBackground: colors.infoMuted,
+            errorColor: colors.error,
+        },
+        fontSizes: fontSizes,
+        fonts: fonts,
+        responsiveFontSizes: responsiveFontSizes,
+        responsiveLineHeights: responsiveLineHeights,
+        colors: colors,
+        borderWidths: borderWidths,
+        breakpoints: breakpoints,
+        lineHeights: lineHeights,
+        space: space,
+        grid: {
+            maxWidth: breakpoints.large + 'px',
+            gutter: [space[4], space[8]],
+        },
+        disclosure: {
+            iconGap: [space[1], space[2]],
+            panelGap: [space[2], space[3]],
+        },
+        accordion: {
+            header: {
+                color: colors.primary,
+                paddingVertical: [space[3], space[5]],
+                iconSize: space[4],
+                iconGap: space[3],
+            },
+        },
+    }, theme, mergeOptions);
+}
+exports.createTheme = createTheme;

package/dist/theme/index.d.ts

@@ -0,0 +1,231 @@
+export * from './create-theme';
+export declare const theme: import("./theme").Theme & {
+    core: {
+        radius: Record<"small" | "medium" | "large" | "max", string>;
+        borderWidth: Record<"small" | "medium" | "large", string>;
+        breakpoint: Record<"small" | "medium" | "large", string | number>;
+        mediaQuery: Record<"small" | "medium" | "large", string>;
+        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
+        transition: Record<"medium" | "slow" | "fast", string>;
+        opacity: Record<"solid" | "transparent" | "translucent", string | number>;
+        color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
+            lightest: string;
+            lighter: string;
+            light: string;
+            base: string;
+            dark: string;
+            darker: string;
+            darkest: string;
+        }> & {
+            brand: Record<string, string>;
+        };
+        fontFamily: Record<"heading" | "body" | "mono" | "bodyBold", {
+            native: string;
+            web: string;
+        }>;
+        fontWeight: Record<"bold" | "book" | "black", string | number>;
+        fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+            small: string | number;
+            large: string | number;
+        }>;
+        lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+            small: string | number;
+            large: string | number;
+        }>;
+        letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
+    };
+    semantic: {
+        surface: Record<"base" | "cutout" | "elevated", string>;
+        message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
+        border: Record<"graphic" | "differentiated" | "functional", string>;
+        focus: Record<"surface" | "outline" | "hover", string>;
+        inverted: Record<"border" | "surface", string> & {
+            message: Record<"base" | "link" | "secondary" | "branded", string>;
+        };
+        success: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
+        warning: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
+        error: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
+        info: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
+        data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
+    };
+    component: {
+        heading1: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        heading2: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        heading3: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        heading4: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        lead: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        body: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        small: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        label: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        cta: {
+            primary: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+            };
+            secondary: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+            };
+            destructive: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+            };
+        };
+        badge: {
+            variants: {
+                red: {
+                    foreground: string;
+                    background: string;
+                };
+                orange: {
+                    foreground: string;
+                    background: string;
+                };
+                yellow: {
+                    foreground: string;
+                    background: string;
+                };
+                green: {
+                    foreground: string;
+                    background: string;
+                };
+                blue: {
+                    foreground: string;
+                    background: string;
+                };
+            };
+        };
+    };
+} & object;
+export declare type Theme = typeof theme;
+export declare const calculateLineHeight: (size: string, lineHeight?: number) => string;

package/dist/theme/index.js

@@ -0,0 +1,37 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateLineHeight = exports.theme = void 0;
+var element_core_1 = require("@ovotech/element-core");
+var utils_1 = require("../utils");
+var create_theme_1 = require("./create-theme");
+__exportStar(require("./create-theme"), exports);
+exports.theme = (0, create_theme_1.createTheme)(__assign({}, element_core_1.themeNative));
+var calculateLineHeight = function (size, lineHeight) {
+    return (0, utils_1.pxToNumber)(size) * (lineHeight || 1) + 'px';
+};
+exports.calculateLineHeight = calculateLineHeight;