@instructure/canvas-rce 5.10.1 → 5.10.2

package/es/rce/StatusBar.js

@@ -24,7 +24,7 @@ import { Button, IconButton, CondensedButton } from '@instructure/ui-buttons';
 import { Flex } from '@instructure/ui-flex';
 import { View } from '@instructure/ui-view';
 import { Badge } from '@instructure/ui-badge';
-import { InstUISettingsProvider } from '@instructure/emotion';
+import { ApplyTheme } from '@instructure/ui-themeable';
 import { Text } from '@instructure/ui-text';
 import { SVGIcon } from '@instructure/ui-svg-images';
 import { IconA11yLine, IconKeyboardShortcutsLine, IconMiniArrowEndLine, IconFullScreenLine, IconExitFullScreenLine } from '@instructure/ui-icons';
@@ -190,12 +190,10 @@ export default function StatusBar(props) {
       return button;
     }
 
-    return /*#__PURE__*/React.createElement(InstUISettingsProvider, {
+    return /*#__PURE__*/React.createElement(ApplyTheme, {
       theme: {
-        componentOverrides: {
-          Badge: {
-            colorPrimary: props.a11yBadgeColor
-          }
+        [Badge.theme]: {
+          colorPrimary: props.a11yBadgeColor
         }
       }
     }, /*#__PURE__*/React.createElement(Badge, {

package/es/rce/plugins/tinymce-a11y-checker/components/checker.js

@@ -36,7 +36,7 @@ import { TextInput } from '@instructure/ui-text-input';
 import { TextArea } from '@instructure/ui-text-area';
 import { SimpleSelect } from '@instructure/ui-simple-select';
 import { IconQuestionLine } from '@instructure/ui-icons';
-import { InstUISettingsProvider } from '@instructure/emotion';
+import { ApplyTheme } from '@instructure/ui-themeable';
 import { Alert } from '@instructure/ui-alerts';
 import ColorField from './color-field';
 import PlaceholderSVG from './placeholder-svg';
@@ -428,12 +428,10 @@ export default class Checker extends React.Component {
       onClick: () => this.setState({
         showWhyPopover: false
       })
-    }, formatMessage('Close')), /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("p", null, rule.why()), /*#__PURE__*/React.createElement("p", null, rule.link && rule.link.length && /*#__PURE__*/React.createElement(InstUISettingsProvider, {
+    }, formatMessage('Close')), /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("p", null, rule.why()), /*#__PURE__*/React.createElement("p", null, rule.link && rule.link.length && /*#__PURE__*/React.createElement(ApplyTheme, {
       theme: {
-        componentOverrides: {
-          Link: {
-            textDecoration: 'underline'
-          }
+        [Link.theme]: {
+          textDecoration: 'underline'
         }
       }
     }, /*#__PURE__*/React.createElement(Link, {

package/es/skins/theme.js

@@ -0,0 +1,127 @@
+/*
+ * Copyright (C) 2019 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import { darken, lighten, alpha } from '@instructure/ui-color-utils'; // pull canvas theme values we need for the rce skin
+
+export default function generator(_ref) {
+  let {
+    borders,
+    colors,
+    forms,
+    shadows,
+    spacing,
+    typography
+  } = _ref;
+  const vars = {
+    canvasBackgroundColor: colors.white,
+    canvasTextColor: colors.textDarkest,
+    canvasErrorColor: colors.textDanger,
+    canvasWarningColor: colors.textWarning,
+    canvasInfoColor: colors.textInfo,
+    canvasSuccessColor: colors.textSuccess,
+    canvasBorderColor: colors.borderMedium,
+    toolbarButtonHoverBackground: darken(colors.backgroundLightest, 5),
+    // copied from INSTUI "light" Button
+    canvasBrandColor: colors.brand,
+    activeMenuItemBackground: colors.backgroundBrand,
+    activeMenuItemLabelColor: colors.textLightest,
+    tableSelectorHighlightColor: alpha(lighten(colors.brand, 10), 50),
+    canvasLinkColor: colors.link,
+    canvasLinkDecoration: 'none',
+    // the instui default button
+    canvasButtonBackground: colors.backgroundLightest,
+    canvasButtonBorderColor: 'transparent',
+    canvasButtonColor: colors.textDarkest,
+    canvasButtonHoverBackground: colors.backgroundLightest,
+    canvasButtonHoverColor: colors.brand,
+    canvasButtonActiveBackground: colors.backgroundLightest,
+    canvasButtonFontWeight: typography.fontWeightNormal,
+    canvasButtonFontSize: typography.fontSizeMedium,
+    canvasButtonLineHeight: forms.inputHeightMedium,
+    canvasButtonPadding: `0 ${spacing.small}`,
+    // the instui primary button
+    canvasPrimaryButtonBackground: colors.backgroundBrand,
+    canvasPrimaryButtonColor: colors.textLightest,
+    canvasPrimaryButtonBorderColor: 'transparent',
+    canvasPrimaryButtonHoverBackground: darken(colors.backgroundBrand, 10),
+    canvasPrimaryButtonHoverColor: colors.textLightest,
+    // the instui secondary button
+    canvasSecondaryButtonBackground: colors.backgroundLight,
+    canvasSecondaryButtonColor: colors.textDarkest,
+    canvasSecondaryButtonBorderColor: darken(colors.backgroundLight, 10),
+    canvasSecondaryButtonHoverBackground: darken(colors.backgroundLight, 10),
+    canvasSecondaryButtonHoverColor: colors.textDarkest,
+    canvasFocusBorderColor: borders.brand,
+    canvasFocusBorderWidth: borders.widthSmall,
+    // canvas really uses widthMedium
+    canvasFocusBoxShadow: `0 0 0 2px ${colors.brand}`,
+    canvasEnabledColor: borders.brand,
+    canvasEnabledBoxShadow: `inset 0 0 0.1875rem 0.0625rem ${darken(colors.borderLightest, 25)}`,
+    canvasFontFamily: typography.fontFamily,
+    canvasFontSize: '1rem',
+    canvasFontSizeSmall: typography.fontSizeSmall,
+    // modal dialogs
+    canvasModalShadow: shadows.depth3,
+    canvasModalHeadingPadding: spacing.medium,
+    canvasModalHeadingFontSize: typography.fontSizeXLarge,
+    canvasModalHeadingFontWeight: typography.fontWeightNormal,
+    canvasModalBodyPadding: spacing.medium,
+    canvasModalFooterPadding: spacing.small,
+    canvasModalFooterBackground: colors.backgroundLight,
+    canvasFormElementMargin: `0 0 ${spacing.medium} 0`,
+    canvasFormElementLabelColor: colors.textDarkest,
+    canvasFormElementLabelMargin: `0 0 ${spacing.small} 0`,
+    canvasFormElementLabelFontSize: typography.fontSizeMedium,
+    canvasFormElementLabelFontWeight: typography.fontWeightBold,
+    // a11y button badge
+    canvasBadgeBackgroundColor: colors.textInfo
+  };
+  vars.tinySplitButtonChevronHoverBackground = darken(vars.toolbarButtonHoverBackground, 10);
+  return vars;
+}
+
+generator.canvas = function (variables) {
+  return {
+    canvasLinkColor: variables['ic-link-color'],
+    canvasLinkDecoration: variables['ic-link-decoration'],
+    canvasTextColor: variables['ic-brand-font-color-dark'],
+    canvasBrandColor: variables['ic-brand-primary'],
+    canvasFocusBorderColor: variables['ic-brand-primary'],
+    canvasFocusBoxShadow: `0 0 0 2px ${variables['ic-brand-primary']}`,
+    canvasEnabledColor: variables['ic-brand-primary'],
+    canvasPrimaryButtonBackground: variables['ic-brand-primary'],
+    canvasPrimaryButtonColor: variables['ic-brand-button--primary-text'],
+    canvasPrimaryButtonHoverBackground: darken(variables['ic-brand-button--primary-bgd'], 10),
+    activeMenuItemBackground: variables['ic-brand-button--primary-bgd'],
+    activeMenuItemLabelColor: variables['ic-brand-button--primary-text'],
+    tableSelectorHighlightColor: alpha(lighten(variables['ic-brand-primary'], 10), 50)
+  };
+};
+
+generator['canvas-a11y'] = generator['canvas-high-contrast'] = function (_ref2) {
+  let {
+    colors
+  } = _ref2;
+  return {
+    canvasButtonBackground: colors.backgroundLight,
+    canvasSecondaryButtonBorderColor: colors.borderMedium,
+    canvasLinkDecoration: 'underline',
+    canvasFocusBorderColor: colors.borderBrand,
+    canvasFocusBoxShadow: `0 0 0 2px ${colors.brand}`,
+    canvasBrandColor: colors.brand
+  };
+};