@ovotech/element-native 4.4.9 → 5.0.0-canary-bcb1788-338

package/dist/components/Badge/Badge.js

@@ -54,44 +54,34 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var element_core_1 = require("@ovotech/element-core");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var StyledBadge = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, component = _b.component, _c = _a.variant, variant = _c === void 0 ? 'info' : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, customVariant = _a.customVariant;
-    var surface;
-    var message;
-    if (variant in semantic) {
-        surface = semantic[variant].surface;
-        message = semantic[variant].message;
-    }
-    else {
-        surface = component.badge.variants[variant].background;
-        message = component.badge.variants[variant].foreground;
-    }
-    if ((customVariant === null || customVariant === void 0 ? void 0 : customVariant.foregroundColor) && (customVariant === null || customVariant === void 0 ? void 0 : customVariant.backgroundColor)) {
-        surface = customVariant.backgroundColor;
-        message = customVariant.foregroundColor;
-    }
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: 2px ", ";\n      border-radius: 16px;\n      border: ", " solid\n        ", ";\n      background-color: ", ";\n      align-self: flex-start;\n    "], ["\n      padding: 2px ", ";\n      border-radius: 16px;\n      border: ", " solid\n        ", ";\n      background-color: ", ";\n      align-self: flex-start;\n    "])), (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.borderWidth.medium), core.color.brand.white, inverted ? message : surface);
+    var inverted = _a.inverted, theme = _a.theme, $surface = _a.$surface, $message = _a.$message;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", " ", "\n      ", " ", ";\n    border-radius: 16px;\n    border: ", " solid ", ";\n    background-color: ", ";\n    align-self: flex-start;\n  "], ["\n    padding: ", " ", "\n      ", " ", ";\n    border-radius: 16px;\n    border: ", " solid ", ";\n    background-color: ", ";\n    align-self: flex-start;\n  "])), (0, element_core_1.numToPx)(theme.space[50]), (0, element_core_1.numToPx)(theme.space[200]), (0, element_core_1.numToPx)(theme.space[100]), (0, element_core_1.numToPx)(theme.space[200]), (0, element_core_1.numToPx)(theme.border.width.md), theme.color.brand.onBrand, inverted ? $message : $surface);
 });
 var StyledBadgeText = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, component = _b.component, _c = _a.variant, variant = _c === void 0 ? 'info' : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, customVariant = _a.customVariant;
-    var surface;
-    var message;
-    if (variant in semantic) {
-        surface = semantic[variant].surface;
-        message = semantic[variant].message;
-    }
-    else {
-        surface = component.badge.variants[variant].background;
-        message = component.badge.variants[variant].foreground;
-    }
-    if ((customVariant === null || customVariant === void 0 ? void 0 : customVariant.foregroundColor) && (customVariant === null || customVariant === void 0 ? void 0 : customVariant.backgroundColor)) {
-        surface = customVariant.backgroundColor;
-        message = customVariant.foregroundColor;
-    }
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), core.fontFamily.bodyBold.native, (0, element_core_1.numToPx)(core.lineHeight.body.small), inverted ? surface : message, (0, element_core_1.numToPx)(core.fontSize.body.small));
+    var inverted = _a.inverted, theme = _a.theme, $surface = _a.$surface, $message = _a.$message;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n  "])), theme.native.font.family.bold, (0, element_core_1.numToPx)(theme.font.lineHeight.md.mediaQuery.sm), inverted ? $surface : $message, (0, element_core_1.numToPx)(theme.font.size.md.mediaQuery.sm));
 });
 var Badge = function (_a) {
-    var children = _a.children, variant = _a.variant, inverted = _a.inverted, rest = __rest(_a, ["children", "variant", "inverted"]);
-    return ((0, jsx_runtime_1.jsx)(StyledBadge, __assign({ variant: variant, inverted: inverted }, rest, { children: (0, jsx_runtime_1.jsx)(StyledBadgeText, { variant: variant, inverted: inverted, children: children }) })));
+    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'neutral' : _b, _c = _a.inverted, inverted = _c === void 0 ? false : _c, customVariant = _a.customVariant, rest = __rest(_a, ["children", "variant", "inverted", "customVariant"]);
+    var theme = (0, styled_native_1.useTheme)();
+    // check if variant is primitive, otherwise use alert colours
+    var isPrimitive = Object.keys(theme.color).includes(variant);
+    var message = isPrimitive
+        ? // @ts-ignore we're checking the variants above...
+            theme.color[variant]['70']
+        : // @ts-ignore we're checking the variants above...
+            theme.color.alert[variant];
+    var surface = isPrimitive
+        ? // @ts-ignore we're checking the variants above...
+            theme.color[variant]['20']
+        : // @ts-ignore we're checking the variants above...
+            theme.color.alert["".concat(variant, "Tint")];
+    if ((customVariant === null || customVariant === void 0 ? void 0 : customVariant.backgroundColor) !== undefined &&
+        (customVariant === null || customVariant === void 0 ? void 0 : customVariant.color) !== undefined) {
+        message = customVariant.color;
+        surface = customVariant.backgroundColor;
+    }
+    return ((0, jsx_runtime_1.jsx)(StyledBadge, __assign({ inverted: inverted, "$surface": surface, "$message": message }, rest, { children: (0, jsx_runtime_1.jsx)(StyledBadgeText, { inverted: inverted, "$surface": surface, "$message": message, children: children }) })));
 };
 exports.Badge = Badge;
 var templateObject_1, templateObject_2;

package/dist/components/Badge/index.d.ts

@@ -1 +1 @@
-export { Badge } from './Badge';
+export { Badge, type SemanticVariants } from './Badge';

package/dist/components/Card/Card.d.ts

@@ -1,7 +1,15 @@
 import { ViewProps } from 'react-native';
+import { DisplayStylesBase } from '../../utils/types';
 type CardProps = ViewProps & {
+    displayStyle?: DisplayStylesBase;
+    /**
+     * @deprecated inline prop no longer affects styling
+     */
     inline?: boolean;
+    /**
+     * @deprecated inverted prop no longer affects styling
+     */
     inverted?: boolean;
 };
-export declare const Card: ({ children, inline, inverted, ...rest }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: ({ children, displayStyle, ...rest }: CardProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Card/Card.js

@@ -31,14 +31,13 @@ var element_core_1 = require("@ovotech/element-core");
 var hooks_1 = require("../../hooks");
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var CardWrapper = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.smallAndUp, smallAndUp = _e === void 0 ? false : _e;
-    return "\n      background: ".concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding: ").concat(inline
-        ? (0, element_core_1.numToPx)(core.space[smallAndUp ? 6 : 4])
-        : (0, element_core_1.numToPx)(core.space[smallAndUp ? 9 : 6]), ";\n      border-radius: ").concat(inline ? (0, element_core_1.numToPx)(core.radius.max) : 0, ";\n    ");
+    var theme = _a.theme, displayStyle = _a.displayStyle, _b = _a.smallAndUp, smallAndUp = _b === void 0 ? false : _b;
+    var isSolid = displayStyle === 'solid';
+    return "\n      position: relative;\n      background: ".concat(isSolid ? theme.color.surface.bright : 'transparent', ";\n      padding: ").concat((0, element_core_1.numToPx)(theme.space[smallAndUp ? 900 : 600]), ";\n      border-width: ").concat((0, element_core_1.numToPx)(theme.border.width.md), ";\n      border-style: solid;\n      border-color: ").concat(isSolid ? 'transparent' : theme.color.surface.bright, ";\n      border-radius: ").concat((0, element_core_1.numToPx)(theme.border.radius['2xl']), ";\n    ");
 });
 var Card = function (_a) {
-    var children = _a.children, inline = _a.inline, inverted = _a.inverted, rest = __rest(_a, ["children", "inline", "inverted"]);
+    var children = _a.children, _b = _a.displayStyle, displayStyle = _b === void 0 ? 'solid' : _b, rest = __rest(_a, ["children", "displayStyle"]);
     var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
-    return ((0, jsx_runtime_1.jsx)(CardWrapper, __assign({ inline: inline, inverted: inverted, smallAndUp: smallAndUp }, rest, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(CardWrapper, __assign({ smallAndUp: smallAndUp, displayStyle: displayStyle }, rest, { children: children })));
 };
 exports.Card = Card;

package/dist/components/Checkbox/Checkbox.js

@@ -42,33 +42,33 @@ var Icon_1 = require("../Icon/Icon");
 var LabelText_1 = require("../LabelText");
 var Stack_1 = require("../Stack");
 var StyledCheckboxInputWrapper = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core;
-    var checkboxSize = core.space[6];
-    var gap = core.space[2];
-    return "\n      width: ".concat((0, element_core_1.numToPx)(checkboxSize + gap), ";\n      height: ").concat((0, element_core_1.numToPx)(core.space[11]), ";\n    ");
+    var theme = _a.theme;
+    var checkboxSize = theme.space[600];
+    var gap = theme.space[200];
+    return "\n      width: ".concat((0, element_core_1.numToPx)(checkboxSize + gap), ";\n      height: ").concat((0, element_core_1.numToPx)(theme.space[1100]), ";\n    ");
 });
 var StyledCheckboxInput = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, checked = _a.checked;
-    return "\n      width: ".concat((0, element_core_1.numToPx)(core.space[6]), ";\n      height: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n      border: ").concat((0, element_core_1.numToPx)(core.borderWidth.small), " solid;\n      margin-top: 10px;\n      border-radius: ").concat((0, element_core_1.numToPx)(core.radius.small), ";\n      border-color: ").concat(invalid
-        ? semantic.message.error
+    var theme = _a.theme, invalid = _a.invalid, checked = _a.checked;
+    return "\n      width: ".concat((0, element_core_1.numToPx)(theme.space[600]), ";\n      height: ").concat((0, element_core_1.numToPx)(theme.space[600]), ";\n      border: ").concat((0, element_core_1.numToPx)(theme.border.width.md), " solid;\n      margin-top: 10px;\n      border-radius: ").concat((0, element_core_1.numToPx)(theme.border.radius.xs), ";\n      border-color: ").concat(invalid
+        ? theme.input.color.borderError
         : checked
-            ? core.color.blue.dark
-            : semantic.border.functional, ";\n      background: ").concat(checked ? core.color.blue.lightest : 'transparent', ";\n    ");
+            ? theme.input.color.selected
+            : theme.input.color.border, ";\n      background: ").concat(checked ? theme.input.color.selectedTint : 'transparent', ";\n    ");
 });
 var CheckboxCheck = function (props) {
     return (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({ name: "check", size: 16 }, props));
 };
 var StyledCheckboxInputCheck = (0, styled_native_1.default)(CheckboxCheck)(function (_a) {
-    var core = _a.theme.core, checked = _a.checked;
-    return "\n      margin-top: 3px;\n      margin-left: 3px;\n      color: ".concat(core.color.blue.dark, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
+    var theme = _a.theme, checked = _a.checked;
+    return "\n      margin-top: ".concat((0, element_core_1.numToPx)(theme.space[50]), ";\n      margin-left: ").concat((0, element_core_1.numToPx)(theme.space[50]), ";\n      color: ").concat(theme.color.alert.info, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
 });
 var Input = function (_a) {
     var checked = _a.checked, invalid = _a.invalid, testID = _a.testID, rest = __rest(_a, ["checked", "invalid", "testID"]);
     return ((0, jsx_runtime_1.jsx)(StyledCheckboxInputWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(StyledCheckboxInput, { invalid: invalid, checked: checked, testID: testID, children: (0, jsx_runtime_1.jsx)(StyledCheckboxInputCheck, { checked: checked }) }) })));
 };
 var CheckLabelText = (0, styled_native_1.default)(LabelText_1.LabelText)(function (_a) {
-    var core = _a.theme.core;
-    return "\n    padding-top: ".concat((0, element_core_1.numToPx)(core.space[3]), ";\n  ");
+    var theme = _a.theme;
+    return "\n    padding-top: ".concat((0, element_core_1.numToPx)(theme.space[300]), ";\n  ");
 });
 var StyledWrapper = styled_native_1.default.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
 var Checkbox = (0, react_1.forwardRef)(function (_a, ref) {