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

package/es/common/components/shared/Card/CardContent/theme.js

@@ -6,13 +6,13 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     transitions = _ref.transitions;
   return {
     contentTransitionDuration: transitions.duration,
-    contentBackgroundColor: colors.white,
+    contentBackgroundColor: colors.contrasts.white1010,
     contentMaxWidth: '79.5rem',
     contentMargin: spacing.medium,
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
     phoneContentMargin: spacing.xSmall,
     contentBoxShadow: shadows.depth1,
-    contentBorderColor: colors.tiara,
+    contentBorderColor: colors.contrasts.grey1214,
     contentBorderRadius: '4px'
   };
 };

package/es/common/components/shared/InteractionTypes/theme.js

@@ -4,7 +4,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     spacing = _ref.spacing;
   return {
     stimulusDividerBorderWidth: borders.widthSmall,
-    stimulusDividerBorderColor: colors.ash,
+    stimulusDividerBorderColor: colors.contrasts.grey4570,
     stimulusDividerMarginTop: spacing.xSmall,
     stimulusDividerMarginBottom: spacing.small
   };

package/es/common/components/shared/PaginatedCollection/theme.js

@@ -5,7 +5,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     emptyPadding: spacing.small,
     emptyFontSize: typography.fontSizeLarge,
-    emptyColor: colors.ash
+    emptyColor: colors.contrasts.grey4570
   };
 };
 export default generateComponentTheme;

package/es/common/components/shared/drag_and_drop/DragAndDropZone/theme.js

@@ -4,16 +4,16 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     borders = _ref.borders;
   return {
     DnDZoneBorderWidth: borders.widthSmall,
-    DnDZoneBorderColor: colors.tiara,
-    DnDZoneBackgroundColor: colors.porcelain,
+    DnDZoneBorderColor: colors.contrasts.grey1214,
+    DnDZoneBackgroundColor: colors.contrasts.grey1111,
     DnDZonePadding: spacing.medium,
     // sidebar:
     sidebarDnDZoneBorderWidth: borders.widthSmall,
-    sidebarDnDZoneBorderColor: colors.oxford,
-    sidebarDnDZoneBackgroundColor: colors.porcelain,
+    sidebarDnDZoneBorderColor: colors.contrasts.grey100100,
+    sidebarDnDZoneBackgroundColor: colors.contrasts.grey1111,
     sidebarDnDZonePadding: spacing.small,
     sidebarDnDZoneMargin: spacing.xSmall,
-    sidebarDnDZoneColor: colors.licorice
+    sidebarDnDZoneColor: colors.contrasts.grey125125
   };
 };
 export default generateComponentTheme;

package/es/common/components/shared/errors/theme.js

@@ -4,7 +4,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     errorFontFamily: typography.fontFamily,
     errorFontSize: typography.fontSizeSmall,
-    errorColor: colors.crimson
+    errorColor: colors.contrasts.red4570
   };
 };
 export default generateComponentTheme;

package/es/common/components/shared/file_selector/theme.js

@@ -3,9 +3,9 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     spacing = _ref.spacing,
     borders = _ref.borders;
   return {
-    dropzoneBackgroundColor: colors.porcelain,
+    dropzoneBackgroundColor: colors.contrasts.grey1111,
     dropzoneBorderWidth: borders.widthSmall,
-    dropzoneBorderColor: colors.ash,
+    dropzoneBorderColor: colors.contrasts.grey4570,
     dropzonePadding: spacing.medium
   };
 };

package/es/common/components/shared/overlay/theme.js

@@ -4,7 +4,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     spacing = _ref.spacing;
   return {
     overlayZIndex: '2222',
-    overlayBarColor: colors.electric,
+    overlayBarColor: colors.contrasts.blue4570,
     overlayBarSize: '0.3rem'
   };
 };

package/es/moderating/components/events/theme.js

@@ -6,7 +6,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     embeddedImageMargin: spacing.xSmall,
     embeddedImagePadding: spacing.small,
     mediaToggleMargin: spacing.xSmall,
-    mediaToggleColor: colors.tiara
+    mediaToggleColor: colors.contrasts.grey1214
   };
 };
 export default generateComponentTheme;

package/es/moderating/components/resources/ModerateTable/theme.js

@@ -3,7 +3,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     colors = _ref.colors;
   return {
     emptyTextMargin: spacing.small,
-    pageBackgroundColor: colors.white
+    pageBackgroundColor: colors.contrasts.white1010
   };
 };
 export default generateComponentTheme;

package/es/reporting/components/charts/Distribution/theme.js

@@ -2,8 +2,8 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
     typography = _ref.typography;
   return {
-    barFillColor: colors.electric,
-    barStarFillColor: colors.fire,
+    barFillColor: colors.contrasts.blue4570,
+    barStarFillColor: colors.contrasts.orange4570,
     barLabelColor: colors.textDarkest,
     barLabelFontFamily: typography.fontFamily,
     barLabelFontSize: typography.fontSizeSmall,

package/es/reporting/components/charts/Legend/theme.js

@@ -5,11 +5,11 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     typography = _ref.typography;
   return {
     containerBorderWidth: borders.widthSmall,
-    containerBorderColor: colors.tiara,
+    containerBorderColor: colors.contrasts.grey1214,
     seriesContainerMargin: spacing.small,
     seriesContainerRowMargin: spacing.medium,
     seriesSwatchMargin: spacing.small,
-    seriesSwatchBackgroundColor: colors.electric,
+    seriesSwatchBackgroundColor: colors.contrasts.blue4570,
     seriesLabelFontFamily: typography.fontFamily,
     seriesLabelFontSize: typography.fontSizeXSmall,
     seriesLabelColor: colors.textDarkest

package/es/reporting/components/itemAnalysis/AnswerFrequencySummary/theme.js

@@ -6,20 +6,20 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     borders = _ref.borders,
     transitions = _ref.transitions;
   return {
-    contentCellBorderColor: colors.tiara,
+    contentCellBorderColor: colors.contrasts.grey1214,
     answerRowCellPadding: spacing.xSmall,
-    answerRowCorrectBackgroundColor: colors.white,
-    answerRowAnswerIconColor: colors.shamrock,
+    answerRowCorrectBackgroundColor: colors.contrasts.white1010,
+    answerRowAnswerIconColor: colors.contrasts.green4570,
     answerRowCorrectTextFieldFontWeight: typography.fontWeightBold,
-    answerRowCorrectBarBackgroundColor: colors.shamrock,
+    answerRowCorrectBarBackgroundColor: colors.contrasts.green4570,
     answerIconFontSize: typography.fontSizeXSmall,
-    answerIconColor: colors.ash,
+    answerIconColor: colors.contrasts.grey4570,
     answerTextfieldFontWeight: typography.fontWeightNormal,
-    respondentLinkColor: colors.ash,
-    respondentLinkPresentColor: colors.electric,
+    respondentLinkColor: colors.contrasts.grey4570,
+    respondentLinkPresentColor: colors.contrasts.blue4570,
     answerRatioPaddingLeft: spacing.small,
     barMinWidth: borders.widthSmall,
-    barBackgroundColor: colors.licorice,
+    barBackgroundColor: colors.contrasts.grey125125,
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
     barTransition: "width ".concat(transitions.duration)
   };

package/es/reporting/components/itemAnalysis/ItemAnalysisRow/theme.js

@@ -6,20 +6,20 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     itemAnalysisRowPadding: spacing.small,
     itemAnalysisRowMargin: spacing.small,
-    headerTextColor: colors.ash,
+    headerTextColor: colors.contrasts.grey4570,
     headerTextFontSize: typography.fontSizeXSmall,
     metricNoteFontSize: typography.fontSizeMedium,
-    metricNoteColor: colors.ash,
+    metricNoteColor: colors.contrasts.grey4570,
     metricsRowLowerPadding: spacing.large,
     stemFontSize: typography.fontSizeXSmall,
     stemLineHeight: typography.lineHeight,
     stemMargin: spacing.small,
     emptyTextPadding: spacing.small,
-    emptyTextColor: colors.ash,
+    emptyTextColor: colors.contrasts.grey4570,
     answerDistributionPadding: spacing.small,
     answerDistributionChartPadding: spacing.small,
     answerDistributionLegendPadding: spacing.small,
-    answerDistributionSwatchColor: colors.electric,
+    answerDistributionSwatchColor: colors.contrasts.blue4570,
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium)
   };
 };

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/LegacyChoiceType/ChoiceTypeTableRow/theme.js

@@ -1,7 +1,7 @@
 var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors;
   return {
-    colorGreen: colors.shamrock,
+    colorGreen: colors.contrasts.green4570,
     cellPadding: '0.75rem 0.75rem'
   };
 };

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AggregationTable/theme.js

@@ -1,11 +1,11 @@
 var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors;
   return {
-    colorGreen: colors.shamrock,
-    colorBlue: colors.brand,
-    colorRed: colors.crimson,
-    colorGrey: colors.ash,
-    colorHeaderBottomBorder: colors.tiara,
+    colorGreen: colors.contrasts.green4570,
+    colorBlue: colors.contrasts.blue4570,
+    colorRed: colors.contrasts.red4570,
+    colorGrey: colors.contrasts.grey4570,
+    colorHeaderBottomBorder: colors.contrasts.grey1214,
     cellPadding: '13.5px 13.5px;'
   };
 };

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/ChoiceTypeTable/theme.js

@@ -3,8 +3,8 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     colors = _ref.colors;
   return {
     tableBottomPadding: spacing.medium,
-    colorGreen: colors.shamrock,
-    colorGray: colors.tiara,
+    colorGreen: colors.contrasts.green4570,
+    colorGray: colors.contrasts.grey1214,
     cellPadding: '0.75rem 0.75rem'
   };
 };

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/BlankIcon/theme.js

@@ -1,7 +1,7 @@
 var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors;
   return {
-    blankBorderColor: colors.tiara,
+    blankBorderColor: colors.contrasts.grey1214,
     blankBorderRadius: '14px',
     blankMinWidth: '20px',
     blankHeight: '20px'

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/theme.js

@@ -9,7 +9,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     viewPaddingRight: spacing.xxSmall,
     metricNumberContextFontSize: typography.fontSizeMedium,
     metricNumberContextFontWeight: typography.fontWeightNormal,
-    blankBorderColor: colors.tiara,
+    blankBorderColor: colors.contrasts.grey1214,
     blankBorderRadius: '14px',
     blankMinWidth: '20px',
     blankHeight: '20px'

package/es/reporting/components/resources/NewQuizAndItemAnalysis/ReportCard/theme.js

@@ -7,7 +7,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     cardWidth: '19.5rem',
     cardPadding: spacing.medium,
     cardMargin: spacing.xSmall,
-    quizSummaryBorderBottomColor: colors.tiara
+    quizSummaryBorderBottomColor: colors.contrasts.grey1214
   };
 };
 export default generateComponentTheme;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/charts/ScoreDistribution/theme.js

@@ -3,9 +3,9 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     spacing = _ref.spacing,
     typography = _ref.typography;
   return {
-    legendRectFillColor: colors.electric,
+    legendRectFillColor: colors.contrasts.blue4570,
     legendPadding: spacing.small,
-    legendBorderColor: colors.ash,
+    legendBorderColor: colors.contrasts.grey4570,
     legendFontSize: typography.fontSizeXSmall,
     legendMargin: spacing.medium
   };

package/es/reporting/components/resources/QuizAndItemAnalysis/theme.js

@@ -8,7 +8,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     titleMarginBottom: spacing.xSmall,
     emptyTextPadding: spacing.small,
     emptyTextFontSize: typography.fontSizeLarge,
-    emptyTextColor: colors.ash
+    emptyTextColor: colors.contrasts.grey4570
   };
 };
 export default generateComponentTheme;

package/es/reporting/components/resources/StudentAnalysis/ReportCard/theme.js

@@ -9,6 +9,6 @@ export var generateComponentTheme = function generateComponentTheme(_ref) {
     cardWidth: '19.5rem',
     cardPadding: spacing.medium,
     cardMargin: spacing.xSmall,
-    quizSummaryBorderBottomColor: colors.tiara
+    quizSummaryBorderBottomColor: colors.contrasts.grey1214
   };
 };

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

@@ -9,7 +9,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/lib/banks/components/BankEntry/theme.js

@@ -10,17 +10,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,
@@ -28,7 +28,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     rightHeaderPaddingLeft: spacing.xSmall,
     rightFooterPaddingLeftRight: spacing.small,
     entryEditBorderWidth: borders.widthSmall,
-    entryEditBorderColor: colors.tiara
+    entryEditBorderColor: colors.contrasts.grey1214
   };
 };
 var _default = generateComponentTheme;

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

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

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

@@ -11,18 +11,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/lib/banks/components/Banks/theme.js

@@ -9,13 +9,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
   };
 };
 var _default = generateComponentTheme;

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

@@ -11,13 +11,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/lib/banks/components/NavWrapper/theme.js

@@ -14,9 +14,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/lib/banks/components/SharingModal/theme.js

@@ -9,7 +9,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/lib/building/components/resources/ActionButtons/theme.js

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

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

@@ -8,8 +8,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
   };
 };
 var _default = generateComponentTheme;

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

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

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

@@ -16,7 +16,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/lib/building/components/resources/quiz/title/Title/theme.js

@@ -14,10 +14,10 @@ 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/lib/building/components/resources/quizEntry/QuizEntry/theme.js

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

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

@@ -11,9 +11,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,
@@ -22,7 +22,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     borderLineTopMargin: spacing.small,
     borderLineBottomMargin: spacing.small,
     borderLineBottomBorderSize: borders.widthSmall,
-    borderLineBottomBorderColor: colors.ash
+    borderLineBottomBorderColor: colors.contrasts.grey4570
   };
 };
 var _default = generateComponentTheme;

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

@@ -10,8 +10,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/lib/building/components/resources/quizEntry/QuizEntryEdit/Header/theme.js

@@ -9,8 +9,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/lib/building/components/resources/quizEntry/QuizEntryShow/theme.js

@@ -12,13 +12,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,
@@ -26,7 +26,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/lib/common/components/ImportModal/ImportFileSelector/theme.js

@@ -9,15 +9,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
   };
 };
 var _default = generateComponentTheme;

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

@@ -9,7 +9,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/lib/common/components/layout/header/HeaderMenuButton/theme.js

@@ -11,7 +11,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/lib/common/components/layout/header/Timer/theme.js

@@ -10,10 +10,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,