@vitality-ds/components 4.1.2 → 4.2.0

package/dist/Avatar/styles/BaseAvatarContainer.styles.js

@@ -41,10 +41,6 @@ var avatarColorVariants = exports.avatarColorVariants = {
   primary: {
     color: (0, _system.getColorScaleValueByUseCase)("neutral", text.onSolidBackgrounds),
     backgroundColor: (0, _system.getColorScaleValueByUseCase)("primary", backgrounds.uiElementSolid)
-  },
-  onPrimary: {
-    color: (0, _system.getColorScaleValueByUseCase)("primary", text.onSolidBackgrounds),
-    backgroundColor: (0, _system.getColorScaleValueByUseCase)("primary", backgrounds.uiElementSolid_hovered)
   }
 };
 var _default = exports["default"] = (0, _system.css)((0, _extends3["default"])({
@@ -95,7 +91,6 @@ var _default = exports["default"] = (0, _system.css)((0, _extends3["default"])({
    * Optional colour set on the component when displaying initials
    */
   color: {
-    primary: (0, _extends3["default"])({}, avatarColorVariants.primary),
-    onPrimary: (0, _extends3["default"])({}, avatarColorVariants.onPrimary)
+    primary: (0, _extends3["default"])({}, avatarColorVariants.primary)
   }
 }), _extends2)));

package/dist/Button/constants.js

@@ -11,6 +11,11 @@ var APPEARANCES = exports.APPEARANCES = {
     variant: "subtle",
     spinnerColor: null
   },
+  onSurface: {
+    color: "neutral",
+    variant: "onSurface",
+    spinnerColor: null
+  },
   primary: {
     color: "primary",
     variant: "solid",

package/dist/Button/primitives/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BUTTON_BORDER_WIDTH = void 0;
+// eslint-disable-next-line import/prefer-default-export
+var BUTTON_BORDER_WIDTH = exports.BUTTON_BORDER_WIDTH = "1px";

package/dist/Button/primitives/styles/BaseButton.styles.js

@@ -7,13 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _system = require("@vitality-ds/system");
+var _constants = require("../constants");
 var _helpers = require("./helpers");
 var text = _system.colorUseCases.text;
 var _default = exports["default"] = (0, _system.css)({
   fontFamily: "$button",
   fontSize: "$button",
   fontWeight: "$button",
-  lineHeight: "$button",
+  lineHeight: "calc($button * 1em - (".concat(_constants.BUTTON_BORDER_WIDTH, " * 2))"),
   letterSpacing: "$button",
   borderRadius: "$default",
   border: "none",
@@ -42,6 +43,7 @@ var _default = exports["default"] = (0, _system.css)({
     variant: {
       solid: {},
       subtle: {},
+      onSurface: {},
       ghost: {},
       link: {}
     },
@@ -84,7 +86,7 @@ var _default = exports["default"] = (0, _system.css)({
   {
     color: "neutral",
     variant: "subtle",
-    css: (0, _extends2["default"])({}, (0, _helpers.getSubtleVariant)("neutralA"), {
+    css: (0, _extends2["default"])({}, (0, _helpers.getSubtleVariant)("neutral"), {
       // Override the usual colour use case
       color: (0, _system.getColorScaleValueByUseCase)("neutralA", text.lowContrast)
     })
@@ -109,6 +111,37 @@ var _default = exports["default"] = (0, _system.css)({
     variant: "subtle",
     css: (0, _helpers.getSubtleVariant)("info")
   },
+  /**
+   * OnSurface Variants
+   */
+  {
+    color: "neutral",
+    variant: "onSurface",
+    css: (0, _extends2["default"])({}, (0, _helpers.getOnSurfaceVariant)("neutral"), {
+      // Override the usual colour use case
+      color: (0, _system.getColorScaleValueByUseCase)("neutralA", text.lowContrast)
+    })
+  }, {
+    color: "primary",
+    variant: "onSurface",
+    css: (0, _helpers.getOnSurfaceVariant)("primary")
+  }, {
+    color: "success",
+    variant: "onSurface",
+    css: (0, _helpers.getOnSurfaceVariant)("success")
+  }, {
+    color: "warning",
+    variant: "onSurface",
+    css: (0, _helpers.getOnSurfaceVariant)("warning")
+  }, {
+    color: "critical",
+    variant: "onSurface",
+    css: (0, _helpers.getOnSurfaceVariant)("critical")
+  }, {
+    color: "info",
+    variant: "onSurface",
+    css: (0, _helpers.getOnSurfaceVariant)("info")
+  },
   /**
    * Ghost Variants
    */

package/dist/Button/primitives/styles/helpers.js

@@ -3,14 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSubtleVariant = exports.getLinkVariant = exports.getGhostVariant = exports.getColorVariant = void 0;
+exports.getSubtleVariant = exports.getOnSurfaceVariant = exports.getLinkVariant = exports.getGhostVariant = exports.getColorVariant = void 0;
 var _system = require("@vitality-ds/system");
 var _tokens = require("@vitality-ds/tokens");
+var _constants = require("../constants");
 var text = _tokens.colorUseCases.text,
   backgrounds = _tokens.colorUseCases.backgrounds,
   borders = _tokens.colorUseCases.borders;
 var getColorVariant = exports.getColorVariant = function getColorVariant(colorScale) {
   return {
+    border: "".concat(_constants.BUTTON_BORDER_WIDTH, " solid transparent"),
     color: (0, _system.getColorScaleValueByUseCase)(colorScale, text.onSolidBackgrounds),
     backgroundColor: (0, _system.getColorScaleValueByUseCase)(colorScale, backgrounds.uiElementSolid),
     "&:hover": {
@@ -33,6 +35,7 @@ var getColorVariant = exports.getColorVariant = function getColorVariant(colorSc
 var getSubtleVariant = exports.getSubtleVariant = function getSubtleVariant(colorScale) {
   return {
     color: (0, _system.getColorScaleValueByUseCase)(colorScale, text.hiSaturation),
+    border: "".concat(_constants.BUTTON_BORDER_WIDTH, " solid ").concat((0, _system.getColorScaleValueByUseCase)(colorScale, borders.uiElement)),
     backgroundColor: (0, _system.getColorScaleValueByUseCase)(colorScale, backgrounds.uiElement),
     "&:hover": {
       backgroundColor: (0, _system.getColorScaleValueByUseCase)(colorScale, backgrounds.uiElement_hovered)
@@ -47,12 +50,37 @@ var getSubtleVariant = exports.getSubtleVariant = function getSubtleVariant(colo
     "&[disabled]": {
       cursor: "not-allowed",
       color: (0, _system.getColorScaleValueByUseCase)("neutral", text.disabled),
-      backgroundColor: (0, _system.getColorScaleValueByUseCase)("neutral", backgrounds.uiElement_disabled)
+      backgroundColor: (0, _system.getColorScaleValueByUseCase)("neutral", backgrounds.uiElement_disabled),
+      borderColor: "transparent"
+    }
+  };
+};
+var getOnSurfaceVariant = exports.getOnSurfaceVariant = function getOnSurfaceVariant(colorScale) {
+  return {
+    color: (0, _system.getColorScaleValueByUseCase)(colorScale, text.hiSaturation),
+    border: "".concat(_constants.BUTTON_BORDER_WIDTH, " solid ").concat((0, _system.getColorScaleValueByUseCase)(colorScale, borders.uiElement)),
+    backgroundColor: (0, _system.getColorScaleValueByUseCase)(colorScale, backgrounds.uiElementOnSurface),
+    "&:hover": {
+      backgroundColor: (0, _system.getColorScaleValueByUseCase)(colorScale, backgrounds.uiElementOnSurface_hovered)
+    },
+    "&:active": {
+      backgroundColor: (0, _system.getColorScaleValueByUseCase)(colorScale, backgrounds.uiElementOnSurface_active)
+    },
+    "&:focus-visible": {
+      boxShadow: "0 0 0 $space$outlineWidth ".concat((0, _system.getColorScaleValueByUseCase)(colorScale, borders.focusRing)),
+      outline: "none"
+    },
+    "&[disabled]": {
+      cursor: "not-allowed",
+      color: (0, _system.getColorScaleValueByUseCase)("neutral", text.disabled),
+      backgroundColor: (0, _system.getColorScaleValueByUseCase)("neutral", backgrounds.uiElement_disabled),
+      borderColor: "transparent"
     }
   };
 };
 var getGhostVariant = exports.getGhostVariant = function getGhostVariant(colorScale) {
   return {
+    border: "".concat(_constants.BUTTON_BORDER_WIDTH, " solid transparent"),
     backgroundColor: "transparent",
     color: (0, _system.getColorScaleValueByUseCase)(colorScale, text.lowContrast),
     "&:hover": {
@@ -74,6 +102,7 @@ var getGhostVariant = exports.getGhostVariant = function getGhostVariant(colorSc
 };
 var getLinkVariant = exports.getLinkVariant = function getLinkVariant(colorScale) {
   return {
+    border: "".concat(_constants.BUTTON_BORDER_WIDTH, " solid transparent"),
     backgroundColor: "transparent",
     color: (0, _system.getColorScaleValueByUseCase)(colorScale, text.hiSaturation),
     "&:hover:not([disabled])": {

package/dist/Button/primitives/styles/helpers.spec.js

@@ -20,6 +20,7 @@ describe("getColorVariant", function () {
         cursor: "not-allowed"
       },
       backgroundColor: "$colors$neutral9",
+      border: "1px solid transparent",
       color: "$colors$neutral13"
     });
   });
@@ -39,10 +40,12 @@ describe("getSubtleVariant", function () {
       },
       "&[disabled]": {
         backgroundColor: "$colors$neutral2",
+        borderColor: "transparent",
         color: "$colors$neutral8",
         cursor: "not-allowed"
       },
       backgroundColor: "$colors$neutral3",
+      border: "1px solid $colors$neutral7",
       color: "$colors$neutral9"
     });
   });
@@ -66,6 +69,7 @@ describe("getGhostVariant", function () {
         backgroundColor: "$colors$neutral2"
       },
       backgroundColor: "transparent",
+      border: "1px solid transparent",
       color: "$colors$neutral11"
     });
   });
@@ -90,6 +94,32 @@ describe("getLinkVariant", function () {
         backgroundColor: "transparent"
       },
       backgroundColor: "transparent",
+      border: "1px solid transparent",
+      color: "$colors$neutral9"
+    });
+  });
+});
+describe("getOnSurfaceVariant", function () {
+  it("should show the appropriate output", function () {
+    expect((0, _helpers.getOnSurfaceVariant)("neutral")).toEqual({
+      "&:active": {
+        backgroundColor: "$colors$neutral6"
+      },
+      "&:focus-visible": {
+        boxShadow: "0 0 0 $space$outlineWidth $colors$neutral7",
+        outline: "none"
+      },
+      "&:hover": {
+        backgroundColor: "$colors$neutral5"
+      },
+      "&[disabled]": {
+        backgroundColor: "$colors$neutral2",
+        borderColor: "transparent",
+        color: "$colors$neutral8",
+        cursor: "not-allowed"
+      },
+      backgroundColor: "$colors$neutral4",
+      border: "1px solid $colors$neutral7",
       color: "$colors$neutral9"
     });
   });

package/dist/ModalDialog/index.js

@@ -5,38 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _Dialog = _interopRequireDefault(require("../Dialog"));
 var _Modal = _interopRequireDefault(require("../Modal"));
-var _constants = _interopRequireDefault(require("./constants"));
-var _excluded = ["variant"];
 function ModalDialog(_ref) {
   var modalProps = _ref.modalProps,
     dialogProps = _ref.dialogProps;
-  var _ref2 = modalProps || null,
-    onEscapeKeyDown = _ref2.onEscapeKeyDown,
-    onInteractOutside = _ref2.onInteractOutside,
-    onPointerDownOutside = _ref2.onPointerDownOutside,
-    onOpenAutoFocus = _ref2.onOpenAutoFocus,
-    onCloseAutoFocus = _ref2.onCloseAutoFocus,
-    open = _ref2.open,
-    isLayeredModal = _ref2.isLayeredModal;
-  var _ref3 = dialogProps || null,
-    _ref3$variant = _ref3.variant,
-    variant = _ref3$variant === void 0 ? "transactional" : _ref3$variant,
-    restProps = (0, _objectWithoutProperties2["default"])(_ref3, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
-    onEscapeKeyDown: _constants["default"][variant].escapeAllowed ? onEscapeKeyDown : null,
-    onPointerDownOutside: _constants["default"][variant].clickingOutsideAllowed ? onPointerDownOutside : null,
-    onInteractOutside: _constants["default"][variant].clickingOutsideAllowed ? onInteractOutside : null,
-    onOpenAutoFocus: onOpenAutoFocus,
-    onCloseAutoFocus: onCloseAutoFocus,
-    open: open,
-    isLayeredModal: isLayeredModal
-  }, /*#__PURE__*/_react["default"].createElement(_Dialog["default"], (0, _extends2["default"])({
-    variant: variant
-  }, restProps)));
+  return /*#__PURE__*/_react["default"].createElement(_Modal["default"], modalProps, /*#__PURE__*/_react["default"].createElement(_Dialog["default"], dialogProps));
 }
 var _default = exports["default"] = ModalDialog;

package/dist/components/src/AuditTrail/components/IconAvatar/styled.d.ts

@@ -98,15 +98,6 @@ export declare const IconAvatarContainer: import("@stitches/react/types/styled-c
         pink11: string;
         red11: string;
         yellow11: string;
-        blue8: string;
-        cyan8: string;
-        green8: string;
-        grey8: string;
-        greyA8: string;
-        orange8: string;
-        pink8: string;
-        red8: string;
-        yellow8: string;
         blue6: string;
         cyan6: string;
         green6: string;
@@ -116,6 +107,15 @@ export declare const IconAvatarContainer: import("@stitches/react/types/styled-c
         pink6: string;
         red6: string;
         yellow6: string;
+        blue8: string;
+        cyan8: string;
+        green8: string;
+        grey8: string;
+        greyA8: string;
+        orange8: string;
+        pink8: string;
+        red8: string;
+        yellow8: string;
         blue13: string;
         cyan13: string;
         green13: string;
@@ -205,14 +205,6 @@ export declare const IconAvatarContainer: import("@stitches/react/types/styled-c
         info11: string;
         warning11: string;
         critical11: string;
-        neutral8: string;
-        neutralA8: string;
-        primary8: string;
-        accent8: string;
-        success8: string;
-        info8: string;
-        warning8: string;
-        critical8: string;
         neutral6: string;
         neutralA6: string;
         primary6: string;
@@ -221,6 +213,14 @@ export declare const IconAvatarContainer: import("@stitches/react/types/styled-c
         info6: string;
         warning6: string;
         critical6: string;
+        neutral8: string;
+        neutralA8: string;
+        primary8: string;
+        accent8: string;
+        success8: string;
+        info8: string;
+        warning8: string;
+        critical8: string;
         neutral13: string;
         neutralA13: string;
         primary13: string;

package/dist/components/src/AuditTrail/components/IconAvatar/styles/IconAvatarContainer.styles.d.ts

@@ -98,15 +98,6 @@ declare const _default: import("@stitches/react/types/styled-component").CssComp
         pink11: string;
         red11: string;
         yellow11: string;
-        blue8: string;
-        cyan8: string;
-        green8: string;
-        grey8: string;
-        greyA8: string;
-        orange8: string;
-        pink8: string;
-        red8: string;
-        yellow8: string;
         blue6: string;
         cyan6: string;
         green6: string;
@@ -116,6 +107,15 @@ declare const _default: import("@stitches/react/types/styled-component").CssComp
         pink6: string;
         red6: string;
         yellow6: string;
+        blue8: string;
+        cyan8: string;
+        green8: string;
+        grey8: string;
+        greyA8: string;
+        orange8: string;
+        pink8: string;
+        red8: string;
+        yellow8: string;
         blue13: string;
         cyan13: string;
         green13: string;
@@ -205,14 +205,6 @@ declare const _default: import("@stitches/react/types/styled-component").CssComp
         info11: string;
         warning11: string;
         critical11: string;
-        neutral8: string;
-        neutralA8: string;
-        primary8: string;
-        accent8: string;
-        success8: string;
-        info8: string;
-        warning8: string;
-        critical8: string;
         neutral6: string;
         neutralA6: string;
         primary6: string;
@@ -221,6 +213,14 @@ declare const _default: import("@stitches/react/types/styled-component").CssComp
         info6: string;
         warning6: string;
         critical6: string;
+        neutral8: string;
+        neutralA8: string;
+        primary8: string;
+        accent8: string;
+        success8: string;
+        info8: string;
+        warning8: string;
+        critical8: string;
         neutral13: string;
         neutralA13: string;
         primary13: string;