@instructure/quiz-core 20.38.0 → 21.0.1-rc.0

package/es/banks/components/Bank/theme.js

@@ -3,7 +3,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     colors = _ref.colors,
     breakpoints = _ref.breakpoints;
   return {
-    contentBackgroundColor: colors.white,
+    contentBackgroundColor: colors.contrasts.white1010,
     contentPaddingTopBottom: spacing.medium,
     contentPaddingLeftRight: spacing.medium,
     breadCrumbMarginBottom: spacing.large,

package/es/banks/components/BankEntry/theme.js

@@ -4,17 +4,17 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     typography = _ref.typography,
     borders = _ref.borders;
   return {
-    contentBackgroundColor: colors.white,
+    contentBackgroundColor: colors.contrasts.white1010,
     contentPaddingTopBottom: 0,
     contentPaddingLeftRight: 0,
     breadCrumbMarginBottom: spacing.large,
     entryRowMargin: spacing.small,
-    headerRowColor: colors.ash,
+    headerRowColor: colors.contrasts.grey4570,
     headerRowPadding: spacing.small,
     headerTextFontSize: typography.fontSizeSmall,
     leftHeaderMargin: spacing.small,
-    headerBackgroundColor: colors.porcelain,
-    headerColor: colors.licorice,
+    headerBackgroundColor: colors.contrasts.grey1111,
+    headerColor: colors.contrasts.grey125125,
     headerPaddingTopBottom: spacing.xSmall,
     headerPaddingLeftRight: spacing.small,
     footerPaddingBottom: spacing.xSmall,
@@ -22,7 +22,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     rightHeaderPaddingLeft: spacing.xSmall,
     rightFooterPaddingLeftRight: spacing.small,
     entryEditBorderWidth: borders.widthSmall,
-    entryEditBorderColor: colors.tiara
+    entryEditBorderColor: colors.contrasts.grey1214
   };
 };
 export default generateComponentTheme;

package/es/banks/components/BankEntryRow/styles.js

@@ -32,7 +32,6 @@ var generateStyle = function generateStyle(componentTheme) {
       fontSize: componentTheme.headerTextFontSize
     },
     stem: {
-      overflowX: 'auto',
       fontSize: componentTheme.stemFontSize,
       lineHeight: componentTheme.stemLineHeight,
       '& p': {

package/es/banks/components/BankEntryRow/theme.js

@@ -5,18 +5,18 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     typography = _ref.typography;
   return {
     entryDetailPadding: spacing.small,
-    headerRowColor: colors.ash,
+    headerRowColor: colors.contrasts.grey4570,
     buttonsZIndex: '3333',
     expandButtonContainerBorderWidth: borders.widthMedium,
-    expandButtonContainerBorderColor: colors.tiara,
+    expandButtonContainerBorderColor: colors.contrasts.grey1214,
     addButtonMargin: spacing.small,
-    headerTextColor: colors.ash,
+    headerTextColor: colors.contrasts.grey4570,
     headerTextFontSize: typography.fontSizeXSmall,
     stemFontSize: typography.fontSizeMedium,
     stemLineHeight: typography.lineHeight,
     footerPadding: spacing.medium,
     footerBorderWidth: borders.widthSmall,
-    footerBorderColor: colors.tiara,
+    footerBorderColor: colors.contrasts.grey1214,
     footerFontSize: typography.fontSizeXSmall,
     deletePrefaceMargin: spacing.xxSmall
   };

package/es/banks/components/Banks/theme.js

@@ -3,13 +3,13 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     spacing = _ref.spacing,
     borders = _ref.borders;
   return {
-    contentBackgroundColor: colors.white,
+    contentBackgroundColor: colors.contrasts.white1010,
     contentPaddingTopBottom: spacing.medium,
     contentPaddingLeftRight: spacing.xLarge,
     breadCrumbMarginBottom: spacing.large,
     headerPaddingBottom: spacing.large,
     headerBorderWidth: borders.widthSmall,
-    headerBorderColor: colors.tiara
+    headerBorderColor: colors.contrasts.grey1214
   };
 };
 export default generateComponentTheme;

package/es/banks/components/BanksList/theme.js

@@ -5,13 +5,13 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     spacing = _ref.spacing;
   return {
     bankRowBorderWidth: borders.widthSmall,
-    bankRowBorderColor: colors.tiara,
+    bankRowBorderColor: colors.contrasts.grey1214,
     bankInfoMargin: spacing.small,
     bankTitleFontSize: typography.fontSizeSmall,
     bankTitlePadding: spacing.xSmall,
-    bankTitleLinkColor: colors.licorice,
-    bankTitleLinkHoverColor: colors.licorice,
-    bankDetailsColor: colors.ash,
+    bankTitleLinkColor: colors.contrasts.grey125125,
+    bankTitleLinkHoverColor: colors.contrasts.grey125125,
+    bankDetailsColor: colors.contrasts.grey4570,
     bankDetailsFontSize: typography.fontSizeXSmall,
     bankOptionsMargin: spacing.small,
     BankOptionIconMargin: spacing.xSmall,

package/es/banks/components/CreateBankModal/presenter.js

@@ -2,9 +2,9 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-var _dec, _class, _CreateBankModal;
+var _CreateBankModal;
 /** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Button, CloseButton } from '@instructure/ui-buttons';
 import { Checkbox } from '@instructure/ui-checkbox';
@@ -14,19 +14,14 @@ import { jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import Bank from "../../../common/records/Bank.js";
 import { toErrors } from "../../../common/util/instUIMessages.js";
-import { Modal, ModalHeader, ModalBody, ModalFooter, TextInput, XSMALL_SIDE_MARGIN, withStyleOverrides } from '@instructure/quiz-common';
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
-export var CreateBankModal = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_CreateBankModal = /*#__PURE__*/function (_Component) {
+import { Modal, ModalHeader, ModalBody, ModalFooter, TextInput, XSMALL_SIDE_MARGIN } from '@instructure/quiz-common';
+export var CreateBankModal = /*#__PURE__*/function (_Component) {
   _inherits(CreateBankModal, _Component);
   var _super = _createSuper(CreateBankModal);
-  function CreateBankModal() {
+  function CreateBankModal(props) {
     var _this;
     _classCallCheck(this, CreateBankModal);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props);
     _this.state = {
       shareWithCourse: false
     };
@@ -38,7 +33,8 @@ export var CreateBankModal = (_dec = withStyleOverrides(generateStyle, generateC
         _this.props.onCreateBank();
         _this.closeAction();
       } else {
-        _this.props.screenreaderNotification(t('Bank name cannot be blank.'));
+        var _this$bankNameInput$c;
+        (_this$bankNameInput$c = _this.bankNameInput.current) === null || _this$bankNameInput$c === void 0 ? void 0 : _this$bankNameInput$c.focus();
       }
     };
     _this.closeAction = function () {
@@ -68,6 +64,7 @@ export var CreateBankModal = (_dec = withStyleOverrides(generateStyle, generateC
         shareWithCourse: event.target.checked
       });
     };
+    _this.bankNameInput = /*#__PURE__*/React.createRef();
     return _this;
   }
   _createClass(CreateBankModal, [{
@@ -92,17 +89,14 @@ export var CreateBankModal = (_dec = withStyleOverrides(generateStyle, generateC
   }, {
     key: "renderContent",
     value: function renderContent() {
-      return jsx("div", {
-        css: this.props.styles.bankNameInput
-      }, jsx(TextInput, {
+      return jsx("div", null, jsx(TextInput, {
         messages: this.getErrors(),
         onChange: this.onNameChange,
-        renderLabel: jsx("div", {
-          css: this.props.styles.bankNameLabel
-        }, t('Bank Name')),
+        renderLabel: t('Bank Name'),
+        isRequired: true,
         type: "text",
-        placeholder: t('Enter a name...'),
-        "data-automation": "sdk-create-bank-name-textinput"
+        "data-automation": "sdk-create-bank-name-textinput",
+        ref: this.bankNameInput
       }), this.renderCheckbox());
     }
   }, {
@@ -134,7 +128,6 @@ export var CreateBankModal = (_dec = withStyleOverrides(generateStyle, generateC
         label: t('Item Bank'),
         "data-automation": "sdk-create-bank-modal"
       }, jsx(ModalHeader, null, jsx(Heading, {
-        level: "reset",
         as: "h2"
       }, t('New Item Bank')), jsx(CloseButton, {
         onClick: this.closeAction,
@@ -146,7 +139,11 @@ export var CreateBankModal = (_dec = withStyleOverrides(generateStyle, generateC
   }]);
   CreateBankModal.displayName = "CreateBankModal";
   return CreateBankModal;
-}(Component), _CreateBankModal.displayName = 'CreateBankModal', _CreateBankModal.componentId = "Quizzes".concat(_CreateBankModal.displayName), _CreateBankModal.propTypes = {
+}(Component);
+_CreateBankModal = CreateBankModal;
+CreateBankModal.displayName = 'CreateBankModal';
+CreateBankModal.componentId = "Quizzes".concat(_CreateBankModal.displayName);
+CreateBankModal.propTypes = {
   modalOpen: PropTypes.bool.isRequired,
   modalTrigger: PropTypes.instanceOf(Component),
   temporaryBank: PropTypes.instanceOf(Bank).isRequired,
@@ -169,11 +166,12 @@ export var CreateBankModal = (_dec = withStyleOverrides(generateStyle, generateC
     root_account_name: PropTypes.string
   }),
   styles: PropTypes.object
-}, _CreateBankModal.defaultProps = {
+};
+CreateBankModal.defaultProps = {
   displayError: false,
   modalTrigger: null,
   showShareBankOnCreate: false,
   itemBanksScope: {},
   onCreateBank: function onCreateBank() {}
-}, _CreateBankModal)) || _class);
+};
 export default CreateBankModal;

package/es/banks/components/EditBankModal/presenter.js

@@ -2,34 +2,32 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-var _dec, _class, _EditBankModal;
+var _EditBankModal;
 /** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Button, CloseButton } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
 import { jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { toErrors } from "../../../common/util/instUIMessages.js";
-import { Modal, ModalHeader, ModalBody, ModalFooter, TextInput, XSMALL_SIDE_MARGIN, withStyleOverrides } from '@instructure/quiz-common';
+import { Modal, ModalHeader, ModalBody, ModalFooter, TextInput, XSMALL_SIDE_MARGIN } from '@instructure/quiz-common';
 import Bank from "../../../common/records/Bank.js";
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
-export var EditBankModal = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_EditBankModal = /*#__PURE__*/function (_Component) {
+export var EditBankModal = /*#__PURE__*/function (_Component) {
   _inherits(EditBankModal, _Component);
   var _super = _createSuper(EditBankModal);
-  function EditBankModal() {
+  function EditBankModal(props) {
     var _this;
     _classCallCheck(this, EditBankModal);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props);
     _this.continueAction = function () {
       _this.props.showError(_this.props.errorKey);
       if (_this.props.workingBank.isValid()) {
         _this.props.updateBank(_this.props.workingBank);
         _this.closeAction();
+      } else {
+        var _this$bankNameInput$c;
+        (_this$bankNameInput$c = _this.bankNameInput.current) === null || _this$bankNameInput$c === void 0 ? void 0 : _this$bankNameInput$c.focus();
       }
     };
     _this.closeAction = function () {
@@ -51,6 +49,7 @@ export var EditBankModal = (_dec = withStyleOverrides(generateStyle, generateCom
         return toErrors(_this.props.workingBank.errorsFor('title').toJS());
       }
     };
+    _this.bankNameInput = /*#__PURE__*/React.createRef();
     return _this;
   }
   _createClass(EditBankModal, [{
@@ -75,17 +74,16 @@ export var EditBankModal = (_dec = withStyleOverrides(generateStyle, generateCom
   }, {
     key: "renderContent",
     value: function renderContent() {
-      return jsx("div", {
-        css: this.props.styles.bankNameInput
-      }, jsx(TextInput, {
+      return jsx(TextInput, {
         value: this.props.workingBank.title,
         messages: this.getErrors(),
         onChange: this.onNameChange,
-        renderLabel: jsx("div", null, t('Bank Name')),
+        renderLabel: t('Bank Name'),
         type: "text",
-        placeholder: t('Enter a name...'),
-        "data-automation": "sdk-edit-bank-name-textinput"
-      }));
+        isRequired: true,
+        "data-automation": "sdk-edit-bank-name-textinput",
+        ref: this.bankNameInput
+      });
     }
   }, {
     key: "render",
@@ -97,7 +95,6 @@ export var EditBankModal = (_dec = withStyleOverrides(generateStyle, generateCom
         label: t('Item Bank'),
         "data-automation": "sdk-edit-bank-modal"
       }, jsx(ModalHeader, null, jsx(Heading, {
-        level: "reset",
         as: "h2"
       }, t('Edit Item Bank')), jsx(CloseButton, {
         onClick: this.closeAction,
@@ -109,7 +106,11 @@ export var EditBankModal = (_dec = withStyleOverrides(generateStyle, generateCom
   }]);
   EditBankModal.displayName = "EditBankModal";
   return EditBankModal;
-}(Component), _EditBankModal.displayName = 'EditBankModal', _EditBankModal.componentId = "Quizzes".concat(_EditBankModal.displayName), _EditBankModal.propTypes = {
+}(Component);
+_EditBankModal = EditBankModal;
+EditBankModal.displayName = 'EditBankModal';
+EditBankModal.componentId = "Quizzes".concat(_EditBankModal.displayName);
+EditBankModal.propTypes = {
   modalOpen: PropTypes.bool.isRequired,
   modalTrigger: PropTypes.instanceOf(Component),
   workingBank: PropTypes.instanceOf(Bank).isRequired,
@@ -122,8 +123,9 @@ export var EditBankModal = (_dec = withStyleOverrides(generateStyle, generateCom
   hideError: PropTypes.func.isRequired,
   closeModal: PropTypes.func.isRequired,
   styles: PropTypes.object
-}, _EditBankModal.defaultProps = {
+};
+EditBankModal.defaultProps = {
   displayError: false,
   modalTrigger: null
-}, _EditBankModal)) || _class);
+};
 export default EditBankModal;

package/es/banks/components/NavWrapper/theme.js

@@ -8,9 +8,9 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     navPaddingTopBottom: spacing.small,
     navPaddingLeftRight: spacing.xLarge,
     navBorderWidth: borders.widthSmall,
-    navBorderColor: colors.tiara,
-    navBackgroundColor: colors.white,
-    bankIconColor: colors.electric,
+    navBorderColor: colors.contrasts.grey1214,
+    navBackgroundColor: colors.contrasts.white1010,
+    bankIconColor: colors.contrasts.blue4570,
     bankIconFontSize: typography.fontSizeLarge,
     bankIconPadding: spacing.xSmall
   };

package/es/banks/components/SharingModal/presenter.js

@@ -22,7 +22,6 @@ import { Grid } from '@instructure/ui-grid';
 import { Tabs } from '@instructure/ui-tabs';
 import { Text } from '@instructure/ui-text';
 import { jsx } from '@instructure/emotion';
-import elementsForSelectors from "../../../common/util/ElementsForSelectors.js";
 import CustomPropTypes from "../../../common/util/CustomPropTypes.js";
 import ShareList from "./ShareList/index.js";
 import AsyncSearch from "../AsyncSearch/index.js";
@@ -54,9 +53,6 @@ export var SharingModalPresenter = (_dec = withStyleOverrides(generateStyle, gen
     };
     _this.shareListRef = null;
     _this.shareButtonRef = null;
-    _this.applicationElement = function () {
-      return elementsForSelectors(_this.props.appContainer);
-    };
     // =============
     //   LIFECYCLE
     // =============

package/es/banks/components/SharingModal/theme.js

@@ -3,7 +3,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     borders = _ref.borders,
     spacing = _ref.spacing;
   return {
-    separatorColor: colors.tiara,
+    separatorColor: colors.contrasts.grey1214,
     separatorBorderWidth: borders.widthSmall,
     separatorMargin: spacing.medium
   };

package/es/building/components/resources/ActionButtons/theme.js

@@ -3,7 +3,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     colors = _ref.colors;
   return {
     buttonsZIndex: '3333',
-    buttonsColor: colors.oxford,
+    buttonsColor: colors.contrasts.grey100100,
     buttonsPadding: spacing.xSmall
   };
 };

package/es/building/components/resources/AddToBankOptions/theme.js

@@ -2,8 +2,8 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
     colors = _ref.colors;
   return {
-    addToBankBackgroundColor: colors.porcelain,
-    addToBankBorderColor: colors.oxford
+    addToBankBackgroundColor: colors.contrasts.grey1111,
+    addToBankBorderColor: colors.contrasts.grey100100
   };
 };
 export default generateComponentTheme;

package/es/building/components/resources/quiz/instructions/Instructions/theme.js

@@ -7,7 +7,7 @@ export default function generator(_ref) {
     labelLeftPadding: spacing.large,
     labelBottomPadding: spacing.xxSmall,
     labelFontSize: typography.fontSizeSmall,
-    labelColor: colors.slate,
+    labelColor: colors.contrasts.grey4570,
     editButtonWrapperRightMargin: spacing.large
   };
 }

package/es/building/components/resources/quiz/title/Edit/theme.js

@@ -10,7 +10,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     titleEditInputFontSize: typography.fontSizeXLarge,
     errorBorderMargin: spacing.xxSmall,
     errorBorderPadding: spacing.xxSmall,
-    errorBorderColor: colors.crimson,
+    errorBorderColor: colors.contrasts.red4570,
     errorBorderBorderRadius: borders.radiusSmall
   };
 };

package/es/building/components/resources/quiz/title/Title/theme.js

@@ -8,10 +8,10 @@ export default function generator(_ref) {
     labelLeftPadding: spacing.large,
     labelBottomPadding: spacing.xxSmall,
     labelFontSize: typography.fontSizeSmall,
-    labelColor: colors.slate,
+    labelColor: colors.contrasts.grey4570,
     editButtonWrapperRightMargin: spacing.large,
-    titleShowWrapperBottomBorder: "".concat(borders.widthMedium, " ").concat(borders.style, " ").concat(colors.porcelain),
+    titleShowWrapperBottomBorder: "".concat(borders.widthMedium, " ").concat(borders.style, " ").concat(colors.contrasts.grey1111),
     titleEditWrapperBorderWidth: borders.widthSmall,
-    titleEditWrapperBorderColor: colors.ash
+    titleEditWrapperBorderColor: colors.contrasts.grey4570
   };
 }

package/es/building/components/resources/quizEntry/QuizEntry/theme.js

@@ -6,7 +6,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     footerPadding: spacing.small,
     footerBorderWidth: borders.widthSmall,
-    footerBorderColor: colors.tiara,
+    footerBorderColor: colors.contrasts.grey1214,
     footerFontSize: typography.fontSizeXSmall
   };
 };

package/es/building/components/resources/quizEntry/QuizEntryBank/QuizEntryBankEdit/theme.js

@@ -5,9 +5,9 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     borders = _ref.borders;
   return {
     marginAddMargin: spacing.xSmall,
-    quizEntryBankEditBackgroundColor: colors.white,
+    quizEntryBankEditBackgroundColor: colors.contrasts.white1010,
     quizEntryBankEditBorderSize: borders.widthSmall,
-    quizEntryBankEditBorderColor: colors.oxford,
+    quizEntryBankEditBorderColor: colors.contrasts.grey100100,
     quizEntryBankEditPadding: borders.small,
     quizEntryBankEditMargin: spacing.medium,
     numberInputFontSize: typography.fontSizeMedium,
@@ -16,7 +16,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     borderLineTopMargin: spacing.small,
     borderLineBottomMargin: spacing.small,
     borderLineBottomBorderSize: borders.widthSmall,
-    borderLineBottomBorderColor: colors.ash
+    borderLineBottomBorderColor: colors.contrasts.grey4570
   };
 };
 export default generateComponentTheme;

package/es/building/components/resources/quizEntry/QuizEntryBank/QuizEntryBankShow/theme.js

@@ -4,8 +4,8 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     typography = _ref.typography,
     borders = _ref.borders;
   return {
-    quizEntryBankBackgroundColor: colors.white,
-    quizEntryBankBorder: "".concat(borders.widthSmall, " dashed ").concat(colors.oxford),
+    quizEntryBankBackgroundColor: colors.contrasts.white1010,
+    quizEntryBankBorder: "".concat(borders.widthSmall, " dashed ").concat(colors.contrasts.grey100100),
     quizEntryBankPadding: "".concat(spacing.xxSmall, " ").concat(spacing.medium),
     quizEntryBankTopMargin: spacing.small,
     alertWrapperMargin: spacing.small

package/es/building/components/resources/quizEntry/QuizEntryEdit/Header/theme.js

@@ -3,8 +3,8 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     colors = _ref.colors,
     typography = _ref.typography;
   return {
-    headerBackgroundColor: colors.porcelain,
-    headerColor: colors.oxford,
+    headerBackgroundColor: colors.contrasts.grey1111,
+    headerColor: colors.contrasts.grey100100,
     headerPadding: "".concat(spacing.xSmall, " ").concat(spacing.small)
   };
 };

package/es/building/components/resources/quizEntry/QuizEntryShow/theme.js

@@ -6,13 +6,13 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     breakpoints = _ref.breakpoints;
   return {
     quizEntryShowPadding: "".concat(spacing.large, " ").concat(spacing.small),
-    quizEntryShowBackgroundColor: colors.white,
+    quizEntryShowBackgroundColor: colors.contrasts.white1010,
     headerHeight: '2rem',
     headerRightPadding: spacing.xSmall,
-    dndBorder: "".concat(borders.style, " ").concat(borders.widthSmall, " ").concat(colors.brand),
+    dndBorder: "".concat(borders.style, " ").concat(borders.widthSmall, " ").concat(colors.contrasts.blue4570),
     rightHeaderZIndex: '3333',
-    rightHeaderColor: colors.oxford,
-    titleInteractionTypeNamePointsColor: colors.slate,
+    rightHeaderColor: colors.contrasts.grey100100,
+    titleInteractionTypeNamePointsColor: colors.contrasts.grey4570,
     titleInteractionTypeNamePointsFontSize: typography.fontSizeSmall,
     titleInteractionTypeNamePointsLeftMargin: spacing.xSmall,
     titleInteractionTypeNamePointsRightMargin: spacing.xSmall,
@@ -20,7 +20,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     optionsButtonDragDropHandleFontSize: typography.fontSizeMedium,
     optionsButtonDragDropHandleMargin: spacing.xSmall,
     phoneConnectingLinesBorderWidth: borders.widthSmall,
-    phoneConnectingLinesBorderColor: colors.ash,
+    phoneConnectingLinesBorderColor: colors.contrasts.grey4570,
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium)
   };
 };

package/es/common/components/ConfirmationModal/presenter.js

@@ -57,19 +57,20 @@ export var ConfirmationModal = /*#__PURE__*/function (_Component) {
         continueText = _this$props2.continueText,
         size = _this$props2.size,
         shouldReturnFocus = _this$props2.shouldReturnFocus,
-        continueVariant = _this$props2.continueVariant;
+        continueVariant = _this$props2.continueVariant,
+        automationPrefix = _this$props2.automationPrefix;
       return /*#__PURE__*/React.createElement(ImportantModal, {
         open: this.props.modalOpen,
         size: size || 'small',
         label: title || t('Confirm'),
         onDismiss: this.cancelAction,
-        "data-automation": "sdk-confirmation-modal",
+        "data-automation": automationPrefix ? "sdk-".concat(automationPrefix, "-confirmation-modal") : 'sdk-confirmation-modal',
         shouldReturnFocus: shouldReturnFocus,
         onClose: this.doAction
       }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(Heading, {
         level: "reset",
         as: "h2",
-        "data-automation": "sdk-confirmation-modal-heading"
+        "data-automation": automationPrefix ? "sdk-".concat(automationPrefix, "-confirmation-modal-heading") : 'sdk-confirmation-modal-heading'
       }, title || t('Confirm')), /*#__PURE__*/React.createElement(CloseButton, {
         onClick: this.cancelAction,
         placement: "end",
@@ -80,12 +81,12 @@ export var ConfirmationModal = /*#__PURE__*/function (_Component) {
       }, text || t('Are you sure?'))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
         onClick: this.cancelAction,
         margin: XSMALL_SIDE_MARGIN,
-        "data-automation": "sdk-confirmation-modal-cancel"
+        "data-automation": automationPrefix ? "sdk-".concat(automationPrefix, "-confirmation-modal-cancel") : 'sdk-confirmation-modal-cancel'
       }, cancelText || t('Cancel')), /*#__PURE__*/React.createElement(Button, {
         color: continueVariant || 'primary',
         onClick: this.continueAction,
         margin: XSMALL_SIDE_MARGIN,
-        "data-automation": "sdk-confirmation-modal-confirm"
+        "data-automation": automationPrefix ? "sdk-".concat(automationPrefix, "-confirmation-modal-confirm") : 'sdk-confirmation-modal-confirm'
       }, continueText || t('Confirm'))));
     }
   }]);
@@ -103,7 +104,8 @@ ConfirmationModal.propTypes = {
   size: PropTypes.string,
   shouldReturnFocus: PropTypes.bool,
   onContinue: PropTypes.func,
-  onCancel: PropTypes.func
+  onCancel: PropTypes.func,
+  automationPrefix: PropTypes.string
 };
 ConfirmationModal.defaultProps = {
   title: null,
@@ -114,6 +116,7 @@ ConfirmationModal.defaultProps = {
   size: null,
   shouldReturnFocus: true,
   onContinue: null,
-  onCancel: null
+  onCancel: null,
+  automationPrefix: null
 };
 export default ConfirmationModal;

package/es/common/components/ImportModal/ImportFileSelector/theme.js

@@ -3,15 +3,15 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     colors = _ref.colors,
     typography = _ref.typography;
   return {
-    uploadIconContainerColor: colors.ash,
+    uploadIconContainerColor: colors.contrasts.grey4570,
     uploadIconContainerColorFontSize: typography.fontSizeXLarge,
     checkIconContainerFontSize: typography.fontSizeXLarge,
-    checkIconContainerColor: colors.shamrock,
+    checkIconContainerColor: colors.contrasts.green4570,
     smallTextFontSize: typography.fontSizeXSmall,
-    smallTextColor: colors.ash,
+    smallTextColor: colors.contrasts.grey4570,
     smallTextPadding: spacing.xSmall,
     selectorMargin: spacing.xSmall,
-    fileListSuccessColor: colors.shamrock
+    fileListSuccessColor: colors.contrasts.green4570
   };
 };
 export default generateComponentTheme;

package/es/common/components/PrintFontSizeModal/theme.js

@@ -3,7 +3,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     borders = _ref.borders,
     spacing = _ref.spacing;
   return {
-    separatorColor: colors.tiara,
+    separatorColor: colors.contrasts.grey1214,
     separatorBorderWidth: borders.widthSmall,
     separatorMargin: spacing.medium
   };

package/es/common/components/layout/header/HeaderMenuButton/theme.js

@@ -5,7 +5,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
     menuButtonFontSize: typography.fontSizeLarge,
-    menuButtonColor: colors.licorice,
+    menuButtonColor: colors.contrasts.grey125125,
     menuButtonHoverOpacity: '0.6'
   };
 };

package/es/common/components/layout/header/Timer/theme.js

@@ -4,10 +4,10 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     colors = _ref.colors,
     typography = _ref.typography;
   return {
-    timerBackgroundColor: colors.porcelain,
-    timerColor: colors.ash,
+    timerBackgroundColor: colors.contrasts.grey1111,
+    timerColor: colors.contrasts.grey4570,
     timerBorderWidth: borders.widthSmall,
-    timerBorderColor: colors.tiara,
+    timerBorderColor: colors.contrasts.grey1214,
     timerBorderRadius: borders.radiusMedium,
     timerFontSize: typography.fontSizeMedium,
     timerPadding: spacing.xxSmall,