@ovotech/element-native 2.1.0 → 2.2.0-canary-1cac2ba-73

package/dist/theme/create-theme.d.ts

@@ -12,7 +12,7 @@ declare type TwoLevelPartial<T> = {
 declare type OneLevelPartial<T> = {
     [P in keyof T]?: Partial<T[P]>;
 };
-export declare type RequiredThemeKeys = Pick<Theme, 'borderWidths' | 'radii' | 'breakpoints' | 'shadows' | 'space' | 'fonts' | 'lineHeights' | 'fontSizes' | 'responsiveFontSizes' | 'responsiveLineHeights' | 'fontWeights' | 'colors'>;
+export declare type RequiredThemeKeys = Pick<Theme, 'borderWidths' | 'radii' | 'breakpoints' | 'shadows' | 'space' | 'fonts' | 'lineHeights' | 'fontSizes' | 'responsiveFontSizes' | 'responsiveLineHeights' | 'colors'>;
 export declare const defaultTokens: RequiredThemeKeys;
 export declare function createTheme<T, A = {}>(customTheme: ThreeLevelPartial<Theme> & T, additional?: ThreeLevelPartial<Theme> & A): Theme & T & A;
 export {};

package/dist/theme/create-theme.js

@@ -90,12 +90,6 @@ exports.defaultTokens = {
         standard: 1.5,
     },
     fontSizes: ['12px', '14px', '16px', '20px', '24px', '28px', '32px', '48px'],
-    fontWeights: {
-        normal: 400,
-        bold: 700,
-        semiBold: 600,
-        heading: 900,
-    },
     colors: {
         primary: brand.primary.base,
         primaryAlt: brand.primary.darker,
@@ -156,7 +150,7 @@ 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, responsiveLineHeights = theme.responsiveLineHeights;
+    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,
@@ -166,21 +160,17 @@ function createTheme(customTheme, additional) {
             gap: space[2],
             error: {
                 color: colors.error,
-                fontWeight: fontWeights.bold,
                 fontFamily: fonts.bold,
             },
             hint: {
-                fontWeight: fontWeights.normal,
                 color: colors.border,
             },
             label: {
                 color: colors.heading,
-                fontWeight: fontWeights.bold,
                 fontFamily: fonts.bold,
             },
             subLabel: {
                 color: colors.border,
-                fontWeight: fontWeights.normal,
             },
             legend: {
                 marginBottom: space[1],
@@ -200,7 +190,6 @@ function createTheme(customTheme, additional) {
             fontSize: responsiveFontSizes.body,
             color: colors.body,
             lineHeight: lineHeights.standard,
-            fontWeight: fontWeights.normal,
             height: space[11],
             borderColor: colors.border,
             borderWidth: borderWidths.standard,
@@ -221,75 +210,6 @@ function createTheme(customTheme, additional) {
             borderColor: colors.borderMuted,
             padding: [space[3], space[6], space[9]],
         },
-        badge: {
-            fontWeight: fontWeights.bold,
-            fontFamily: fonts.bold,
-            lineHeight: lineHeights.standard,
-            paddingHorizontal: space[2],
-            borderRadius: radii.small,
-            fontSize: responsiveFontSizes.body,
-            variants: {
-                default: {
-                    background: colors.primaryMuted,
-                    foreground: colors.primaryAlt,
-                },
-                error: {
-                    background: colors.errorMuted,
-                    foreground: colors.errorAlt,
-                },
-                success: {
-                    background: colors.successMuted,
-                    foreground: colors.successAlt,
-                },
-                info: {
-                    background: colors.infoMuted,
-                    foreground: colors.infoAlt,
-                },
-                warning: {
-                    background: colors.warningMuted,
-                    foreground: colors.warningAlt,
-                },
-            },
-        },
-        cta: {
-            fontSize: responsiveFontSizes.body,
-            fontWeight: fontWeights.bold,
-            fontFamily: fonts.bold,
-            lineHeight: lineHeights.standard,
-            paddingVertical: space[2],
-            paddingHorizontal: space[3],
-            borderRadius: radii.small,
-            borderWidth: borderWidths.standard,
-            iconGap: space[1],
-            minHeight: space[11],
-            variants: {
-                primary: {
-                    background: colors.primary,
-                    foreground: colors.primaryContrast,
-                    border: colors.primary,
-                },
-                secondary: {
-                    background: colors.primaryContrast,
-                    foreground: colors.primary,
-                    border: colors.primary,
-                },
-                destructive: {
-                    background: colors.error,
-                    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[11],
             size: space[6],
@@ -304,44 +224,8 @@ function createTheme(customTheme, additional) {
             checkColor: colors.info,
             errorColor: colors.error,
         },
-        notification: {
-            borderRadius: radii.small,
-            borderWidth: borderWidths.heavy,
-            borderColor: colors.error,
-            background: colors.errorMuted,
-            paddingX: [space[2], space[2]],
-            paddingY: [space[3], space[6]],
-            dismiss: {
-                touchSize: space[6],
-                size: space[4],
-                icon: 'cross',
-            },
-            variants: {
-                error: {
-                    borderColor: colors.errorMuted,
-                    background: colors.errorMuted,
-                    textColor: colors.errorAlt,
-                },
-                success: {
-                    borderColor: colors.successMuted,
-                    background: colors.successMuted,
-                    textColor: colors.successAlt,
-                },
-                info: {
-                    borderColor: colors.infoMuted,
-                    background: colors.infoMuted,
-                    textColor: colors.infoAlt,
-                },
-                warning: {
-                    borderColor: colors.warningMuted,
-                    background: colors.warningMuted,
-                    textColor: colors.warningAlt,
-                },
-            },
-        },
         text: {
             fontFamily: fonts.body,
-            fontWeight: fontWeights.normal,
             lineHeight: 1,
             color: colors.body,
             p: {
@@ -355,7 +239,6 @@ function createTheme(customTheme, additional) {
                 lineHeight: responsiveLineHeights.small,
             },
             strong: {
-                fontWeight: fontWeights.bold,
                 fontFamily: fonts.bold,
             },
         },
@@ -372,19 +255,17 @@ function createTheme(customTheme, additional) {
             },
             descriptionTerm: {
                 color: colors.heading,
-                fontWeight: fontWeights.bold,
                 fontFamily: fonts.bold,
                 marginTop: [space[3], space[4]],
                 marginBottom: [space[1], space[1]],
             },
         },
         textLink: {
+            fontFamily: fonts.body,
             color: colors.primary,
-            fontWeight: fontWeights.normal,
         },
         heading: {
             fontFamily: fonts.heading,
-            fontWeight: fontWeights.heading,
             color: colors.heading,
             heading1: {
                 fontSize: responsiveFontSizes.level1,
@@ -426,7 +307,6 @@ function createTheme(customTheme, additional) {
             checkedBackground: colors.infoMuted,
             errorColor: colors.error,
         },
-        fontWeights: fontWeights,
         fontSizes: fontSizes,
         fonts: fonts,
         responsiveFontSizes: responsiveFontSizes,
@@ -444,35 +324,6 @@ function createTheme(customTheme, additional) {
             iconGap: [space[1], space[2]],
             panelGap: [space[2], space[3]],
         },
-        dataTable: {
-            borderWidth: borderWidths.standard,
-            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,
-                fontFamily: fonts.bold,
-            },
-            tableCell: {
-                color: colors.body,
-            },
-            tableRow: {
-                backgroundColor: colors.canvas,
-                stripeColor: colors.canvasMuted,
-            },
-        },
         accordion: {
             header: {
                 color: colors.primary,
@@ -481,31 +332,6 @@ function createTheme(customTheme, additional) {
                 iconGap: space[3],
             },
         },
-        tabs: {
-            tab: {
-                borderTopWidth: borderWidths.heavy,
-                borderBottomWidth: borderWidths.heavy,
-                borderColor: colors.canvas,
-                fontSize: responsiveFontSizes.body,
-                fontWeight: fontWeights.bold,
-                fontFamily: fonts.bold,
-                lineHeight: lineHeights.standard,
-                paddingHorizontal: [space[4], space[4]],
-                paddingVertical: [space[3], space[3]],
-                active: {
-                    borderColor: colors.primary,
-                    foregroundColor: colors.primary,
-                    backgroundColor: colors.canvas,
-                },
-                inactive: {
-                    foregroundColor: colors.heading,
-                    backgroundColor: colors.canvas,
-                },
-                hover: {
-                    foregroundColor: colors.primaryAlt,
-                },
-            },
-        },
     }, theme, mergeOptions);
 }
 exports.createTheme = createTheme;

package/dist/theme/index.d.ts

@@ -1,5 +1,231 @@
-export * from './theme';
 export * from './create-theme';
-export declare const theme: import("./theme").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;
+                };
+            };
+        };
+    };
+};
 export declare type Theme = typeof theme;
 export declare const calculateLineHeight: (size: string, lineHeight?: number) => string;

package/dist/theme/index.js

@@ -1,4 +1,15 @@
 "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);
@@ -15,11 +26,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 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("./theme"), exports);
 __exportStar(require("./create-theme"), exports);
-exports.theme = (0, create_theme_1.createTheme)({});
+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';
 };