ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Get rid of Themeable in RCEWrapper, StatusBar, and checker of RCE 

closes FOO-3641
flag=none

Test plan:
- Make sure the above components in the RCE and the RCE itself
  have the correct look and feel
- Make sure planner tests pass in packages/canvas-rce

Change-Id: If977d945e933c2f1e39215e3700f1a68dd05b068
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/322712
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
QA-Review: Ajmal Esa <ajmal.esa@instructure.com>
Product-Review: Ajmal Esa <ajmal.esa@instructure.com>
Reviewed-by: Jason Perry <jason.perry@instructure.com>
This commit is contained in:
AJ Esa 2023-07-13 11:58:44 -06:00 committed by Ajmal Esa
parent 9cca33371c
commit 24e2b55cc1
10 changed files with 1028 additions and 3352 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/canvas-rce/package.json
View File

@ -78,6 +78,7 @@
"@instructure/canvas-media": "*",
"@instructure/canvas-theme": "7",
"@instructure/debounce": "^7",
"@instructure/emotion": "^8.38.1",
"@instructure/k5uploader": "*",
"@instructure/media-capture": "~8.4.1-rc.16",
"@instructure/ui-a11y-content": "^7",
@ -158,18 +159,18 @@
"redux-batch-middleware": "^0.2.0",
"redux-thunk": "^2",
"scroll-into-view": "https://github.com/bkirkby/scroll-into-view.git#588b0ced98eeecf84e6fb2074aa076e80b7cffab",
"tinymce": "^5",
"text-field-edit": "^3.2.0",
"tinymce": "^5",
"uri-js": "^4.2.2",
"wcag-element-contrast": "^1.0.1"
},
"devDependencies": {
"@babel/cli": "^7",
"@babel/core": "^7",
"@babel/preset-typescript": "^7",
"@babel/register": "7",
"@babel/plugin-proposal-optional-chaining": "^7.20.7",
"@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
"@babel/preset-typescript": "^7",
"@babel/register": "7",
"@instructure/babel-plugin-themeable-styles": "7.19.0-canvas",
"@instructure/browserslist-config-canvas-lms": ">=2",
"@instructure/translations": ">=1",
@ -198,6 +199,7 @@
"jest": "^28",
"jest-canvas-mock": "^2",
"jest-junit": "^7",
"jest-mock-proxy": "3.1.2",
"mathjax": "^3.2.0",
"mocha": "^6",
"mocha-junit-reporter": "^1.18.0",
@ -209,6 +211,7 @@
"shelljs": "^0.8.3",
"sinon": "^7",
"skin-deep": "^1",
"source-map-support": "0.5.21",
"testcafe": "1.14.2",
"testcafe-browser-provider-selenium": "^1.2.0",
"testcafe-react-selectors": "^3.3.0",
@ -218,9 +221,7 @@
"webpack": "^5",
"webpack-merge": "^5",
"webpack-nano": "^1",
"webpack-plugin-serve": "^1",
"source-map-support": "0.5.21",
"jest-mock-proxy": "3.1.2"
"webpack-plugin-serve": "^1"
},
"resolutions": {
"format-message-estree-util": "./packages/format-message-estree-util"

43
packages/canvas-rce/src/getThemeVars.js Normal file
View File

@ -0,0 +1,43 @@
/*
* Copyright (C) 2023 - 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 {ThemeRegistry} from '@instructure/ui-themeable'
// ^^ at InstUI 8, just directly import getRegistry directly from @instructure/theme-registry
import {merge, cloneDeep} from 'lodash'
// The running theme is the running theme for this page load, and it never
// changes, so there's no point in doing the work more than once.
let memoizedVariables
function getThemeVars() {
if (memoizedVariables) return memoizedVariables
const {defaultThemeKey, overrides, themes} = ThemeRegistry.getRegistry()
// Just assume the "canvas" theme if the default key is null. This will
// never happen in the live app because one way or another a theme gets
// used, but unit tests don't always do that.
// Also we have to cloneDeep this because the merge below is about to
// mutate the whole thing.
const variables = cloneDeep(themes[defaultThemeKey ?? 'canvas'].variables)
merge(variables, overrides)
memoizedVariables = {variables, key: defaultThemeKey}
return memoizedVariables
}
export {getThemeVars}

223
packages/canvas-rce/src/rce/RCEWrapper.js
View File

@ -21,7 +21,6 @@ import {Editor} from '@tinymce/tinymce-react'
import _ from 'lodash'
import {StoreProvider} from './plugins/shared/StoreContext'
import themeable from '@instructure/ui-themeable'
import {IconKeyboardShortcutsLine} from '@instructure/ui-icons'
import {Alert} from '@instructure/ui-alerts'
import {Spinner} from '@instructure/ui-spinner'
@ -54,7 +53,6 @@ import CanvasContentTray from './plugins/shared/CanvasContentTray'
import StatusBar, {PRETTY_HTML_EDITOR_VIEW, RAW_HTML_EDITOR_VIEW, WYSIWYG_VIEW} from './StatusBar'
import {VIEW_CHANGE} from './customEvents'
import ShowOnFocusButton from './ShowOnFocusButton'
import theme from '../skins/theme'
import KeyboardShortcutModal from './KeyboardShortcutModal'
import AlertMessageArea from './AlertMessageArea'
import alertHandler from './alertHandler'
@ -63,13 +61,13 @@ import {countShouldIgnore} from './plugins/instructure_wordcount/utils/countCont
import launchWordcountModal from './plugins/instructure_wordcount/clickCallback'
import {determineOSDependentKey} from './userOS'
import styles from '../skins/skin-delta.css'
import skinCSSBinding from 'tinymce/skins/ui/oxide/skin.min.css'
import contentCSSBinding from 'tinymce/skins/ui/oxide/content.css'
import {rceWrapperPropTypes} from './RCEWrapperProps'
import {insertPlaceholder, placeholderInfoFor, removePlaceholder} from '../util/loadingPlaceholder'
import {transformRceContentForEditing} from './transformContent'
import {IconMoreSolid} from '@instructure/ui-icons/es/svg'
import buildStyle from './style'
const RestoreAutoSaveModal = React.lazy(() => import('./RestoreAutoSaveModal'))
const RceHtmlEditor = React.lazy(() => import('./RceHtmlEditor'))
@ -178,7 +176,6 @@ function renderLoading() {
let alertIdValue = 0
@themeable(theme, styles)
class RCEWrapper extends React.Component {
static getByEditor(editor) {
return editorWrappers.get(editor)
@ -201,6 +198,7 @@ class RCEWrapper extends React.Component {
constructor(props) {
super(props)
this.style = buildStyle()
// Set up some limited global state that can be referenced
// as needed in RCE's components and function / plugin definitions
@ -1496,7 +1494,7 @@ class RCEWrapper extends React.Component {
addKebabIcon(editor)
editorWrappers.set(editor, this)
const trayPropsWithColor = {
brandColor: this.theme.canvasBrandColor,
brandColor: this.style.theme.canvasBrandColor,
...this.props.trayProps,
}
bridge.trayProps?.set(editor, trayPropsWithColor)
@ -1830,116 +1828,119 @@ class RCEWrapper extends React.Component {
)
}
return (
<StoreProvider
jwt={this.props.trayProps?.jwt}
refreshToken={this.props.trayProps?.refreshToken}
host={this.props.trayProps?.host}
contextType={this.props.trayProps?.contextType}
contextId={this.props.trayProps?.contextId}
canvasOrigin={this.props.canvasOrigin}
>
{storeProps => {
return (
<div
key={this.id}
className={`${styles.root} rce-wrapper`}
ref={this._elementRef}
onFocus={this.handleFocusRCE}
onBlur={this.handleBlurRCE}
>
{this.state.shouldShowOnFocusButton && (
<ShowOnFocusButton
id={`show-on-focus-btn-${this.id}`}
onClick={this.openKBShortcutModal}
margin="xx-small"
screenReaderLabel={formatMessage('View keyboard shortcuts')}
ref={el => (this._showOnFocusButton = el)}
>
<IconKeyboardShortcutsLine />
</ShowOnFocusButton>
)}
<AlertMessageArea
messages={this.state.messages}
liveRegion={this.props.liveRegion}
afterDismiss={this.removeAlert}
/>
{this.state.editorView === PRETTY_HTML_EDITOR_VIEW && this.renderHtmlEditor()}
<>
<style>{this.style.css}</style>
<StoreProvider
jwt={this.props.trayProps?.jwt}
refreshToken={this.props.trayProps?.refreshToken}
host={this.props.trayProps?.host}
contextType={this.props.trayProps?.contextType}
contextId={this.props.trayProps?.contextId}
canvasOrigin={this.props.canvasOrigin}
>
{storeProps => {
return (
<div
style={{
display: this.state.editorView === PRETTY_HTML_EDITOR_VIEW ? 'none' : 'block',
}}
key={this.id}
className={`${this.style.classNames.root} rce-wrapper`}
ref={this._elementRef}
onFocus={this.handleFocusRCE}
onBlur={this.handleBlurRCE}
>
<Editor
id={mceProps.textareaId}
textareaName={mceProps.name}
init={this.tinymceInitOptions}
initialValue={this.initialContent}
onInit={this.onInit}
onClick={this.handleFocusEditor}
onKeypress={this.handleFocusEditor}
onActivate={this.handleFocusEditor}
onRemove={this.onRemove}
onFocus={this.handleFocusEditor}
onBlur={this.handleBlurEditor}
onNodeChange={this.onNodeChange}
onEditorChange={this.onEditorChange}
{this.state.shouldShowOnFocusButton && (
<ShowOnFocusButton
id={`show-on-focus-btn-${this.id}`}
onClick={this.openKBShortcutModal}
margin="xx-small"
screenReaderLabel={formatMessage('View keyboard shortcuts')}
ref={el => (this._showOnFocusButton = el)}
>
<IconKeyboardShortcutsLine />
</ShowOnFocusButton>
)}
<AlertMessageArea
messages={this.state.messages}
liveRegion={this.props.liveRegion}
afterDismiss={this.removeAlert}
/>
</div>
<StatusBar
id={this._statusBarId}
rceIsFullscreen={this._isFullscreen()}
readOnly={this.props.readOnly}
onChangeView={newView => this.toggleView(newView)}
path={this.state.path}
wordCount={this.state.wordCount}
editorView={this.state.editorView}
preferredHtmlEditor={getHtmlEditorCookie()}
onResize={this.onResize}
onKBShortcutModalOpen={this.openKBShortcutModal}
onA11yChecker={this.onA11yChecker}
onFullscreen={this.handleClickFullscreen}
a11yBadgeColor={this.theme.canvasBadgeBackgroundColor}
a11yErrorsCount={this.state.a11yErrorsCount}
onWordcountModalOpen={() =>
launchWordcountModal(this.mceInstance(), document, {skipEditorFocus: true})
}
disabledPlugins={this.pluginsToExclude}
/>
{this.props.trayProps?.containingContext && (
<CanvasContentTray
mountNode={this.state.popupMountNode}
key={this.id}
canvasOrigin={this.getCanvasUrl()}
bridge={bridge}
editor={this}
onTrayClosing={this.handleContentTrayClosing}
use_rce_icon_maker={this.props.use_rce_icon_maker}
{...trayProps}
storeProps={storeProps}
/>
)}
<KeyboardShortcutModal
onExited={this.KBShortcutModalExited}
onDismiss={this.closeKBShortcutModal}
open={this.state.KBShortcutModalOpen}
/>
{this.state.confirmAutoSave ? (
<Suspense fallback={<Spinner renderTitle={renderLoading} size="small" />}>
<RestoreAutoSaveModal
savedContent={this.state.autoSavedContent}
open={this.state.confirmAutoSave}
onNo={() => this.restoreAutoSave(false)}
onYes={() => this.restoreAutoSave(true)}
{this.state.editorView === PRETTY_HTML_EDITOR_VIEW && this.renderHtmlEditor()}
<div
style={{
display: this.state.editorView === PRETTY_HTML_EDITOR_VIEW ? 'none' : 'block',
}}
>
<Editor
id={mceProps.textareaId}
textareaName={mceProps.name}
init={this.tinymceInitOptions}
initialValue={this.initialContent}
onInit={this.onInit}
onClick={this.handleFocusEditor}
onKeypress={this.handleFocusEditor}
onActivate={this.handleFocusEditor}
onRemove={this.onRemove}
onFocus={this.handleFocusEditor}
onBlur={this.handleBlurEditor}
onNodeChange={this.onNodeChange}
onEditorChange={this.onEditorChange}
/>
</Suspense>
) : null}
<Alert screenReaderOnly={true} liveRegion={this.props.liveRegion}>
{this.state.announcement}
</Alert>
</div>
)
}}
</StoreProvider>
</div>
<StatusBar
id={this._statusBarId}
rceIsFullscreen={this._isFullscreen()}
readOnly={this.props.readOnly}
onChangeView={newView => this.toggleView(newView)}
path={this.state.path}
wordCount={this.state.wordCount}
editorView={this.state.editorView}
preferredHtmlEditor={getHtmlEditorCookie()}
onResize={this.onResize}
onKBShortcutModalOpen={this.openKBShortcutModal}
onA11yChecker={this.onA11yChecker}
onFullscreen={this.handleClickFullscreen}
a11yBadgeColor={this.style.theme.canvasBadgeBackgroundColor}
a11yErrorsCount={this.state.a11yErrorsCount}
onWordcountModalOpen={() =>
launchWordcountModal(this.mceInstance(), document, {skipEditorFocus: true})
}
disabledPlugins={this.pluginsToExclude}
/>
{this.props.trayProps?.containingContext && (
<CanvasContentTray
mountNode={this.state.popupMountNode}
key={this.id}
canvasOrigin={this.getCanvasUrl()}
bridge={bridge}
editor={this}
onTrayClosing={this.handleContentTrayClosing}
use_rce_icon_maker={this.props.use_rce_icon_maker}
{...trayProps}
storeProps={storeProps}
/>
)}
<KeyboardShortcutModal
onExited={this.KBShortcutModalExited}
onDismiss={this.closeKBShortcutModal}
open={this.state.KBShortcutModalOpen}
/>
{this.state.confirmAutoSave ? (
<Suspense fallback={<Spinner renderTitle={renderLoading} size="small" />}>
<RestoreAutoSaveModal
savedContent={this.state.autoSavedContent}
open={this.state.confirmAutoSave}
onNo={() => this.restoreAutoSave(false)}
onYes={() => this.restoreAutoSave(true)}
/>
</Suspense>
) : null}
<Alert screenReaderOnly={true} liveRegion={this.props.liveRegion}>
{this.state.announcement}
</Alert>
</div>
)
}}
</StoreProvider>
</>
)
}
}

10
packages/canvas-rce/src/rce/StatusBar.js
View File

@ -25,7 +25,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 {ApplyTheme} from '@instructure/ui-themeable'
import {InstUISettingsProvider} from '@instructure/emotion'
import {Text} from '@instructure/ui-text'
import {SVGIcon} from '@instructure/ui-svg-images'
@ -202,15 +202,17 @@ export default function StatusBar(props) {
return button
}
return (
<ApplyTheme
<InstUISettingsProvider
theme={{
[Badge.theme]: {colorPrimary: props.a11yBadgeColor},
componentOverrides: {
Badge: {colorPrimary: props.a11yBadgeColor},
},
}}
>
<Badge count={props.a11yErrorsCount} countUntil={100}>
{button}
</Badge>
</ApplyTheme>
</InstUISettingsProvider>
)
}

2
packages/canvas-rce/src/rce/__tests__/RCE.test.js
View File

@ -39,7 +39,7 @@ describe('RCE', () => {
it('bridges newly rendered editors', async () => {
render(<RCE textareaId="textarea3" />, target)
await waitFor(() => expect(bridge.activeEditor().constructor.displayName).toEqual('RCEWrapper'))
await waitFor(() => expect(bridge.activeEditor().constructor.name).toEqual('RCEWrapper'))
})
it('supports getCode() and setCode() on its ref', async () => {

12
packages/canvas-rce/src/rce/plugins/tinymce-a11y-checker/components/checker.js
View File

@ -37,7 +37,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 {ApplyTheme} from '@instructure/ui-themeable'
import {InstUISettingsProvider} from '@instructure/emotion'
import {Alert} from '@instructure/ui-alerts'
import ColorField from './color-field'
import PlaceholderSVG from './placeholder-svg'
@ -402,17 +402,19 @@ export default class Checker extends React.Component {
<p>{rule.why()}</p>
<p>
{rule.link && rule.link.length && (
<ApplyTheme
<InstUISettingsProvider
theme={{
[Link.theme]: {
textDecoration: 'underline',
componentOverrides: {
Link: {
textDecoration: 'underline',
},
},
}}
>
<Link href={rule.link} target="_blank">
{rule.linkText()}
</Link>
</ApplyTheme>
</InstUISettingsProvider>
)}
</p>
</Text>

852
packages/canvas-rce/src/rce/style.js Normal file
View File

@ -0,0 +1,852 @@
/*
* Copyright (C) 2023 - 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 {getThemeVars} from '../getThemeVars'
import {darken, lighten, alpha} from '@instructure/ui-color-utils'
export default function buildStyle() {
/*
* If the theme variables to be used when generating the styles below
* are dependent on the actual theme in use, you can also pull out the
* `key` property from the return from `getThemeVars()` and do a bit of
* if or switch statement logic to get the result you want.
*/
const {variables, key} = getThemeVars()
let themeCanvasLinkColor = ''
let themeCanvasLinkDecoration = ''
let themeCanvasTextColor = ''
let themeCanvasBrandColor = ''
let themeCanvasFocusBorderColor = ''
let themeCanvasFocusBoxShadow = ''
let themeCanvasEnabledColor = ''
let themeCanvasPrimaryButtonBackground = ''
let themeCanvasPrimaryButtonColor = ''
let themeCanvasPrimaryButtonHoverBackground = ''
let themeActiveMenuItemBackground = ''
let themeActiveMenuItemLabelColor = ''
let themeTableSelectorHighlightColor = ''
let themeCanvasButtonBackground = ''
let themeCanvasSecondaryButtonBorderColor = ''
switch (key) {
case 'canvas':
themeCanvasLinkColor = variables['ic-link-color']
themeCanvasLinkDecoration = variables['ic-link-decoration']
themeCanvasTextColor = variables['ic-brand-font-color-dark']
themeCanvasBrandColor = variables['ic-brand-primary']
themeCanvasFocusBorderColor = variables['ic-brand-primary']
themeCanvasFocusBoxShadow = `0 0 0 2px ${variables['ic-brand-primary']}`
themeCanvasEnabledColor = variables['ic-brand-primary']
themeCanvasPrimaryButtonBackground = variables['ic-brand-primary']
themeCanvasPrimaryButtonColor = variables['ic-brand-button--primary-text']
themeCanvasPrimaryButtonHoverBackground = darken(
variables['ic-brand-button--primary-bgd'],
10
)
themeActiveMenuItemBackground = variables['ic-brand-button--primary-bgd']
themeActiveMenuItemLabelColor = variables['ic-brand-button--primary-text']
themeTableSelectorHighlightColor = alpha(lighten(variables['ic-brand-primary'], 10), 50)
break
case 'canvas-a11y':
case 'canvas-high-contrast':
themeCanvasButtonBackground = variables.colors.backgroundLight
themeCanvasSecondaryButtonBorderColor = variables.colors.borderMedium
themeCanvasLinkDecoration = 'underline'
themeCanvasFocusBorderColor = variables.colors.borderBrand
themeCanvasFocusBoxShadow = `0 0 0 2px ${variables.colors.brand}`
themeCanvasBrandColor = variables.colors.brand
break
default:
themeCanvasLinkColor = variables.colors.link
themeCanvasLinkDecoration = 'none'
themeCanvasTextColor = variables.colors.textDarkest
themeCanvasBrandColor = variables.colors.brand
themeCanvasFocusBorderColor = variables.borders.brand
themeCanvasFocusBoxShadow = `0 0 0 2px ${variables.colors.brand}`
themeCanvasEnabledColor = variables.borders.brand
themeCanvasPrimaryButtonBackground = variables.colors.backgroundBrand
themeCanvasPrimaryButtonColor = variables.colors.textLightest
themeCanvasPrimaryButtonHoverBackground = darken(variables.colors.backgroundBrand, 10)
themeActiveMenuItemBackground = variables.colors.backgroundBrand
themeActiveMenuItemLabelColor = variables.colors.textLightest
themeTableSelectorHighlightColor = alpha(lighten(variables.colors.brand, 10), 50)
themeCanvasButtonBackground = variables.colors.backgroundLightest
themeCanvasSecondaryButtonBorderColor = darken(variables.colors.backgroundLight, 10)
break
}
const classNames = {
root: 'canvas-rce__skins--root',
}
const toolbarButtonHoverBackgroundConst = darken(variables.colors.backgroundLightest, 5)
const tinySplitButtonChevronHoverBackgroundConst = darken(toolbarButtonHoverBackgroundConst, 10)
const theme = {
canvasBackgroundColor: variables.colors.white,
canvasTextColor: themeCanvasTextColor,
canvasErrorColor: variables.colors.textDanger,
canvasWarningColor: variables.colors.textWarning,
canvasInfoColor: variables.colors.textInfo,
canvasSuccessColor: variables.colors.textSuccess,
canvasBorderColor: variables.colors.borderMedium,
toolbarButtonHoverBackground: toolbarButtonHoverBackgroundConst, // copied from INSTUI "light" Button
tinySplitButtonChevronHoverBackground: tinySplitButtonChevronHoverBackgroundConst,
canvasBrandColor: themeCanvasBrandColor,
activeMenuItemBackground: themeActiveMenuItemBackground,
activeMenuItemLabelColor: themeActiveMenuItemLabelColor,
tableSelectorHighlightColor: themeTableSelectorHighlightColor,
canvasLinkColor: themeCanvasLinkColor,
canvasLinkDecoration: themeCanvasLinkDecoration,
// the instui default button
canvasButtonBackground: themeCanvasButtonBackground,
canvasButtonBorderColor: 'transparent',
canvasButtonColor: variables.colors.textDarkest,
canvasButtonHoverBackground: variables.colors.backgroundLightest,
canvasButtonHoverColor: variables.colors.brand,
canvasButtonActiveBackground: variables.colors.backgroundLightest,
canvasButtonFontWeight: variables.typography.fontWeightNormal,
canvasButtonFontSize: variables.typography.fontSizeMedium,
canvasButtonLineHeight: variables.forms.inputHeightMedium,
canvasButtonPadding: `0 ${variables.spacing.small}`,
// the instui primary button
canvasPrimaryButtonBackground: themeCanvasPrimaryButtonBackground,
canvasPrimaryButtonColor: themeCanvasPrimaryButtonColor,
canvasPrimaryButtonBorderColor: 'transparent',
canvasPrimaryButtonHoverBackground: themeCanvasPrimaryButtonHoverBackground,
canvasPrimaryButtonHoverColor: variables.colors.textLightest,
// the instui secondary button
canvasSecondaryButtonBackground: variables.colors.backgroundLight,
canvasSecondaryButtonColor: variables.colors.textDarkest,
canvasSecondaryButtonBorderColor: themeCanvasSecondaryButtonBorderColor,
canvasSecondaryButtonHoverBackground: darken(variables.colors.backgroundLight, 10),
canvasSecondaryButtonHoverColor: variables.colors.textDarkest,
canvasFocusBorderColor: themeCanvasFocusBorderColor,
canvasFocusBorderWidth: variables.borders.widthSmall, // canvas really uses widthMedium
canvasFocusBoxShadow: themeCanvasFocusBoxShadow,
canvasEnabledColor: themeCanvasEnabledColor,
canvasEnabledBoxShadow: `inset 0 0 0.1875rem 0.0625rem ${darken(
variables.colors.borderLightest,
25
)}`,
canvasFontFamily: variables.typography.fontFamily,
canvasFontSize: '1rem',
canvasFontSizeSmall: variables.typography.fontSizeSmall,
// modal dialogs
canvasModalShadow: variables.shadows.depth3,
canvasModalHeadingPadding: variables.spacing.medium,
canvasModalHeadingFontSize: variables.typography.fontSizeXLarge,
canvasModalHeadingFontWeight: variables.typography.fontWeightNormal,
canvasModalBodyPadding: variables.spacing.medium,
canvasModalFooterPadding: variables.spacing.small,
canvasModalFooterBackground: variables.colors.backgroundLight,
canvasFormElementMargin: `0 0 ${variables.spacing.medium} 0`,
canvasFormElementLabelColor: variables.colors.textDarkest,
canvasFormElementLabelMargin: `0 0 ${variables.spacing.small} 0`,
canvasFormElementLabelFontSize: variables.typography.fontSizeMedium,
canvasFormElementLabelFontWeight: variables.typography.fontWeightBold,
// a11y button badge
canvasBadgeBackgroundColor: variables.colors.textInfo,
}
const css = `
.${classNames.root} {
background-color: ${theme.canvasBackgroundColor};
}
.rce-wrapper textarea {
width: 100%;
box-sizing: border-box;
min-height: auto;
}
.tox,
.tox *:not(svg) {
color: inherit;
font-family: inherit;
}
[dir=rtl] .tox :not(svg) {
direction: rtl;
}
.tox:not(.tox-tinymce-inline) .tox-editor-header {
background-color: ${theme.canvasBackgroundColor};
}
.tox.tox-tinymce .screenreader-only {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
transform: translatez(0);
}
.tox-tinymce-aux {
font-family: ${theme.canvasFontFamily};
}
.tox.tox-tinymce-aux {
z-index: 10000;
}
.tox .tox-button {
background-color: ${theme.canvasPrimaryButtonHoverBackground};
font-family: ${theme.canvasFontFamily};
font-weight: ${theme.canvasButtonFontWeight};
font-size: ${theme.canvasButtonFontSize};
color: ${theme.canvasPrimaryButtonColor};
border-color: ${theme.canvasPrimaryButtonBorderColor};
line-height: calc(${theme.canvasButtonLineHeight} - 2px);
padding: ${theme.canvasButtonPadding};
}
.tox .tox-button[disabled] {
opacity: 0.5;
border-color: inherit;
color: inherit;
}
.tox .tox-button:focus:not(:disabled) {
background-color: ${theme.canvasPrimaryButtonBackground};
color: ${theme.canvasPrimaryButtonColor};
border-color: ${theme.canvasBackgroundColor};
box-shadow: ${theme.canvasFocusBoxShadow};
}
.tox .tox-button:hover:not(:disabled) {
background-color: ${theme.canvasPrimaryButtonHoverBackground};
color: ${theme.canvasPrimaryButtonHoverColor};
}
.tox .tox-button:active:not(:disabled) {
background-color: ${theme.canvasPrimaryButtonBackground};
border-color: ${theme.canvasPrimaryButtonBorderColor};
color: ${theme.canvasPrimaryButtonColor};
}
.tox .tox-button--secondary {
background-color: ${theme.canvasSecondaryButtonBackground};
border-color: ${theme.canvasSecondaryButtonBorderColor};
color: ${theme.canvasSecondaryButtonColor};
}
.tox .tox-button--secondary[disabled] {
background-color: inherit;
border-color: ${theme.canvasSecondaryButtonBorderColor};
color: inherit;
opacity: 0.5;
}
.tox .tox-button--secondary:focus:not(:disabled) {
background-color: inherit;
border-color: ${theme.canvasFocusBorderColor};
color: inherit;
}
.tox .tox-button--secondary:hover:not(:disabled) {
background-color: ${theme.canvasSecondaryButtonHoverBackground};
border-color: ${theme.canvasSecondaryButtonBorderColor};
color: ${theme.canvasSecondaryButtonHoverColor};
}
.tox .tox-button--secondary:active:not(:disabled) {
background-color: inherit;
border-color: ${theme.canvasSecondaryButtonBorderColor};
color: inherit;
}
.tox .tox-button-link {
font-family: ${theme.canvasFontFamily};
}
.tox .tox-button--naked {
background: ${theme.canvasButtonBackground};
border-color: ${theme.canvasButtonBorderColor};
color: ${theme.canvasButtonColor};
}
.tox .tox-button--naked:hover:not(:disabled) {
background-color: ${theme.canvasButtonHoverBackground};
border-color: ${theme.canvasButtonBorderColor};
color: ${theme.canvasButtonHoverColor};
}
.tox .tox-button--naked:focus:not(:disabled) {
background-color: ${theme.canvasButtonBackground};
color: ${theme.canvasButtonColor};
border-color: ${theme.canvasBackgroundColor};
box-shadow: ${theme.canvasFocusBoxShadow};
}
.tox .tox-button--naked:active:not(:disabled) {
background-color: inherit;
color: inherit;
}
.tox .tox-button--naked.tox-button--icon {
color: ${theme.canvasButtonColor};
}
.tox .tox-button--naked.tox-button--icon:hover:not(:disabled) {
background: ${theme.canvasButtonHoverBackground};
color: ${theme.canvasButtonHoverColor};
}
.tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
fill: rgba(45, 59, 69, 0.3);
}
.tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
fill: ${theme.canvasTextColor};
}
.tox .tox-checkbox__icons .tox-checkbox-icon__checked svg {
fill: ${theme.canvasTextColor};
}
.tox input.tox-checkbox__input:focus + .tox-checkbox__icons {
box-shadow: ${theme.canvasFocusBoxShadow};
}
.tox .tox-collection--list .tox-collection__group {
border-color: ${theme.canvasBorderColor};
}
.tox .tox-collection__group-heading {
background-color: #e3e6e8;
color: rgba(45, 59, 69, 0.6);
}
.tox .tox-collection__item {
color: ${theme.canvasTextColor};
}
.tox .tox-collection__item--state-disabled {
background-color: unset;
opacity: 0.5;
cursor: default;
}
.tox .tox-collection--list .tox-collection__item--enabled {
color: contrast(inherit, ${theme.canvasTextColor}, #fff);
}
.tox .tox-collection--list .tox-collection__item--active {
background-color: ${theme.activeMenuItemBackground};
color: ${theme.activeMenuItemLabelColor};
}
.tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
background-color: ${theme.activeMenuItemBackground};
color: ${theme.activeMenuItemLabelColor};
}
.tox .tox-collection--toolbar .tox-collection__item--enabled {
background-color: #cbced1;
color: ${theme.canvasTextColor};
}
.tox .tox-collection--toolbar .tox-collection__item--active {
background-color: #e0e2e3;
color: ${theme.canvasTextColor};
}
.tox .tox-collection--grid .tox-collection__item--enabled {
background-color: #cbced1;
color: ${theme.canvasTextColor};
}
.tox .tox-collection--grid .tox-collection__item--active {
background-color: #e0e2e3;
color: ${theme.canvasTextColor};
}
.tox .tox-collection--list .tox-collection__item-icon:first-child {
margin-right: 8px;
}
.tox .tox-collection__item-accessory {
color: rgba(45, 59, 69, 0.6);
}
.tox .tox-sv-palette {
border: 1px solid black;
box-sizing: border-box;
}
.tox .tox-hue-slider {
border: 1px solid black;
}
.tox .tox-rgb-form input.tox-invalid {
/* Need !important to override Chrome's focus styling unfortunately */
border-color: ${theme.canvasErrorColor} !important;
}
.tox .tox-rgb-form {
padding: 2px;
/* make room for the canvas focus ring on contained input elements */
}
.tox .tox-swatches__picker-btn:hover {
background: #e0e2e3;
}
.tox .tox-comment-thread {
background: ${theme.canvasBackgroundColor};
}
.tox .tox-comment {
background: ${theme.canvasBackgroundColor};
border-color: ${theme.canvasBorderColor};
box-shadow: 0 4px 8px 0 rgba(45, 59, 69, 0.1);
}
.tox .tox-comment__header {
color: ${theme.canvasTextColor};
}
.tox .tox-comment__date {
color: rgba(45, 59, 69, 0.6);
}
.tox .tox-comment__body {
color: ${theme.canvasTextColor};
}
.tox .tox-comment__expander p {
color: rgba(45, 59, 69, 0.6);
}
.tox .tox-comment-thread__overlay::after {
background: ${theme.canvasBackgroundColor};
}
.tox .tox-comment__overlay {
background: ${theme.canvasBackgroundColor};
}
.tox .tox-comment__loading-text {
color: ${theme.canvasTextColor};
}
.tox .tox-comment__overlaytext p {
background-color: ${theme.canvasBackgroundColor};
color: ${theme.canvasTextColor};
}
.tox .tox-comment__busy-spinner {
background-color: ${theme.canvasBackgroundColor};
}
.tox .tox-user__avatar svg {
fill: rgba(45, 59, 69, 0.6);
}
.tox .tox-user__name {
color: rgba(45, 59, 69, 0.6);
}
.tox .tox-dialog-wrap__backdrop {
background-color: rgba(255, 255, 255, 0.75);
}
.tox .tox-dialog {
background-color: ${theme.canvasBackgroundColor};
border-color: ${theme.canvasBorderColor};
box-shadow: ${theme.canvasModalShadow};
}
.tox .tox-dialog__header {
background-color: ${theme.canvasBackgroundColor};
color: ${theme.canvasTextColor};
border-bottom: 1px solid ${theme.canvasBorderColor};
padding: ${theme.canvasModalHeadingPadding};
margin: 0;
}
.tox .tox-dialog__title {
font-family: ${theme.canvasFontFamily};
font-size: ${theme.canvasModalHeadingFontSize};
font-weight: ${theme.canvasModalHeadingFontWeight};
}
.tox .tox-dialog__body {
color: ${theme.canvasTextColor};
padding: ${theme.canvasModalBodyPadding};
}
.tox .tox-dialog__body-nav-item {
color: rgba(45, 59, 69, 0.75);
}
.tox .tox-dialog__body-nav-item:focus {
box-shadow: ${theme.canvasFocusBoxShadow};
}
.tox .tox-dialog__body-nav-item--active {
border-bottom-color: ${theme.canvasBrandColor};
color: ${theme.canvasBrandColor};
}
.tox .tox-dialog__footer {
background-color: ${theme.canvasModalFooterBackground};
border-top: 1px solid ${theme.canvasBorderColor};
padding: ${theme.canvasModalFooterPadding};
margin: 0;
}
.tox .tox-dialog__table tbody tr {
border-bottom-color: ${theme.canvasBorderColor};
}
.tox .tox-dropzone {
background: ${theme.canvasBackgroundColor};
border: 2px dashed ${theme.canvasBorderColor};
}
.tox .tox-dropzone p {
color: rgba(45, 59, 69, 0.6);
}
.tox .tox-edit-area {
border: 1px solid ${theme.canvasBorderColor};
border-radius: 3px;
}
.tox .tox-edit-area__iframe {
background-color: ${theme.canvasBackgroundColor};
border: ${theme.canvasFocusBorderWidth} solid transparent;
}
.tox.tox-inline-edit-area {
border-color: ${theme.canvasBorderColor};
}
.tox .tox-form__group {
padding: 2px;
}
.tox .tox-control-wrap .tox-textfield {
padding-right: 32px;
}
.tox .tox-control-wrap__status-icon-invalid svg {
fill: ${theme.canvasErrorColor};
}
.tox .tox-control-wrap__status-icon-unknown svg {
fill: ${theme.canvasWarningColor};
}
.tox .tox-control-wrap__status-icon-valid svg {
fill: ${theme.canvasSuccessColor};
}
.tox .tox-color-input span {
border-color: rgba(45, 59, 69, 0.2);
}
.tox .tox-color-input span:focus {
border-color: ${theme.canvasBrandColor};
}
.tox .tox-label,
.tox .tox-toolbar-label {
color: rgba(45, 59, 69, 0.6);
}
.tox .tox-form__group {
margin: ${theme.canvasFormElementMargin};
}
.tox .tox-form__group:last-child {
margin: 0;
}
.tox .tox-form__group .tox-label {
color: ${theme.canvasFormElementLabelColor};
margin: ${theme.canvasFormElementLabelMargin};
font-size: ${theme.canvasFormElementLabelFontSize};
font-weight: ${theme.canvasFormElementLabelFontWeight};
}
.tox .tox-form__group--error {
color: ${theme.canvasErrorColor};
}
.tox .tox-textfield,
.tox .tox-selectfield select,
.tox .tox-textarea,
.tox .tox-toolbar-textfield {
background-color: ${theme.canvasBackgroundColor};
border-color: ${theme.canvasBorderColor};
color: ${theme.canvasTextColor};
font-family: ${theme.canvasFontFamily};
}
.tox .tox-textfield:focus,
.tox .tox-selectfield select:focus,
.tox .tox-textarea:focus {
/*border-color: ${theme.canvasFocusBorderColor};*/
border-color: ${theme.canvasBorderColor};
box-shadow: ${theme.canvasFocusBoxShadow};
}
.tox .tox-naked-btn {
color: ${theme.canvasButtonColor};
}
.tox .tox-naked-btn svg {
fill: ${theme.canvasButtonColor};
}
.tox .tox-insert-table-picker > div {
border-color: #cccccc;
}
.tox .tox-insert-table-picker .tox-insert-table-picker__selected {
background-color: ${theme.tableSelectorHighlightColor};
border-color: ${theme.tableSelectorHighlightColor};
}
.tox-selected-menu .tox-insert-table-picker {
background-color: ${theme.canvasBackgroundColor};
}
.tox .tox-insert-table-picker__label {
color: ${theme.canvasTextColor};
}
.tox .tox-menu {
background-color: ${theme.canvasBackgroundColor};
border-color: ${theme.canvasBorderColor};
}
.tox .tox-menubar {
background-color: ${theme.canvasBackgroundColor};
}
.tox .tox-mbtn {
color: ${theme.canvasButtonColor};
}
.tox .tox-mbtn[disabled] {
opacity: 0.5;
}
.tox .tox-mbtn:hover:not(:disabled) {
background: ${theme.toolbarButtonHoverBackground};
color: ${theme.canvasButtonColor};
}
.tox .tox-mbtn:focus:not(:disabled) {
background-color: transparent;
color: ${theme.canvasButtonColor};
border-color: ${theme.canvasBackgroundColor};
box-shadow: ${theme.canvasFocusBoxShadow};
}
.tox .tox-mbtn--active {
background: ${theme.toolbarButtonHoverBackground};
color: ${theme.canvasButtonColor};
}
.tox .tox-notification {
background-color: ${theme.canvasBackgroundColor};
border-color: #c5c5c5;
}
.tox .tox-notification--success {
background-color: #dff0d8;
border-color: ${theme.canvasSuccessColor};
}
.tox .tox-notification--error {
background-color: #f2dede;
border-color: ${theme.canvasErrorColor};
}
.tox .tox-notification--warn {
background-color: #fcf8e3;
border-color: ${theme.canvasWarningColor};
}
.tox .tox-notification--info {
background-color: #d9edf7;
border-color: ${theme.canvasInfoColor};
}
.tox .tox-notification__body {
color: ${theme.canvasTextColor};
}
.tox .tox-pop__dialog {
background-color: ${theme.canvasBackgroundColor};
border-color: ${theme.canvasBorderColor};
}
.tox .tox-pop.tox-pop--bottom::before {
border-color: ${theme.canvasBorderColor} transparent transparent transparent;
}
.tox .tox-pop.tox-pop--top::before {
border-color: transparent transparent ${theme.canvasBorderColor} transparent;
}
.tox .tox-pop.tox-pop--left::before {
border-color: transparent ${theme.canvasBorderColor} transparent transparent;
}
.tox .tox-pop.tox-pop--right::before {
border-color: transparent transparent transparent ${theme.canvasBorderColor};
}
.tox .tox-slider {
width: 100%;
}
.tox .tox-slider__rail {
border-color: ${theme.canvasBorderColor};
}
.tox .tox-slider__handle {
background-color: ${theme.canvasBrandColor};
}
.tox .tox-spinner > div {
background-color: rgba(45, 59, 69, 0.6);
}
.tox .tox-tbtn {
border-style: none;
color: ${theme.canvasButtonColor};
position: relative;
}
.tox .tox-tbtn svg {
fill: ${theme.canvasButtonColor};
}
.tox .tox-tbtn.tox-tbtn--enabled {
background: inherit;
}
.tox .tox-tbtn:focus,
.tox .tox-split-button:focus {
background: ${theme.canvasBackgroundColor};
color: ${theme.canvasButtonColor};
box-shadow: ${theme.canvasFocusBoxShadow};
}
.tox .tox-tbtn:hover,
.tox .tox-split-button:hover,
.tox .tox-tbtn.tox-tbtn--enabled:hover,
.tox .tox-split-button .tox-tbtn.tox-split-button__chevron:hover {
background: ${theme.toolbarButtonHoverBackground};
color: ${theme.canvasButtonColor};
}
.tox-tbtn.tox-split-button__chevron {
position: relative;
}
.tox .tox-tbtn.tox-tbtn--enabled::after {
position: absolute;
top: -3px;
content: "\\25BC";
text-align: center;
height: 8px;
font-size: 8px;
width: 100%;
color: ${theme.canvasEnabledColor};
}
.tox .tox-tbtn.tox-tbtn--enabled.tox-tbtn--select::after {
text-align: left;
padding-left: 18px;
}
.tox-tbtn.tox-split-button__chevron.tox-tbtn--enabled::after {
display: none;
}
.tox .tox-tbtn--disabled,
.tox .tox-tbtn--disabled:hover,
.tox .tox-tbtn:disabled,
.tox .tox-tbtn:disabled:hover {
opacity: 0.5;
}
.tox .tox-tbtn--disabled svg,
.tox .tox-tbtn--disabled:hover svg,
.tox .tox-tbtn:disabled svg,
.tox .tox-tbtn:disabled:hover svg {
/* stylelint-disable-line no-descending-specificity */
opacity: 0.5;
}
.tox .tox-tbtn__select-chevron svg {
fill: ${theme.canvasButtonColor};
width: 10px;
height: 10px;
}
.tox .tox-split-button__chevron svg {
fill: ${theme.canvasButtonColor};
width: 10px;
height: 10px;
}
.tox .tox-split-button.tox-tbtn--disabled:hover,
.tox .tox-split-button.tox-tbtn--disabled:focus,
.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover,
.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:focus {
opacity: 0.5;
}
.tox .tox-toolbar {
background-color: ${theme.canvasBackgroundColor};
border-top: 1px solid ${theme.canvasBorderColor};
}
.tox .tox-toolbar__group:not(:last-of-type) {
border-right: 1px solid ${theme.canvasBorderColor};
}
.tox .tox-tooltip__body {
background-color: ${theme.canvasTextColor};
box-shadow: 0 2px 4px rgba(45, 59, 69, 0.3);
color: rgba(255, 255, 255, 0.75);
}
.tox .tox-tooltip--down .tox-tooltip__arrow {
border-top-color: ${theme.canvasTextColor};
}
.tox .tox-tooltip--up .tox-tooltip__arrow {
border-bottom-color: ${theme.canvasTextColor};
}
.tox .tox-tooltip--right .tox-tooltip__arrow {
border-left-color: ${theme.canvasTextColor};
}
.tox .tox-tooltip--left .tox-tooltip__arrow {
border-right-color: ${theme.canvasTextColor};
}
.tox .tox-well {
border-color: ${theme.canvasBorderColor};
}
.tox .tox-custom-editor {
border-color: ${theme.canvasBorderColor};
}
.tox a {
color: ${theme.canvasLinkColor};
}
.tox.tox-tinymce {
border-style: none;
}
.tox-editor-container .tox-toolbar,
.tox-editor-container .tox-toolbar-overlord {
background-image: none;
margin-bottom: 5px;
}
.tox-editor-container .tox-toolbar__primary {
background-image: none;
}
.tox .tox-menubar + .tox-toolbar-overlord .tox-toolbar__primary {
border-style: none;
}
.tox .tox-toolbar .tox-toolbar__group,
.tox .tox-toolbar-overlord .tox-toolbar__group,
.tox-toolbar__overflow .tox-toolbar__group,
.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type),
.tox[dir=rtl] .tox-toolbar__group:not(:last-of-type) {
border-style: none;
}
.tox-toolbar .tox-toolbar__group::after,
.tox-toolbar-overlord .tox-toolbar__group::after,
.tox-toolbar__overflow .tox-toolbar__group::after,
.tox-tinymce-aux .tox-toolbar .tox-toolbar__group::after {
/* popup toolbar */
content: "";
display: inline-block;
box-sizing: border-box;
border-inline-end: 1px solid ${theme.canvasBorderColor};
width: 8px;
height: 24px;
}
.tox-toolbar .tox-toolbar__group:last-child::after,
.tox-toolbar-overlord .tox-toolbar__group:last-child::after,
.tox-toolbar__overflow .tox-toolbar__group:last-child::after,
.tox-tinymce-aux .tox-toolbar .tox-toolbar__group:last-child::after {
border-inline-end-width: 0;
padding-inline-start: 0;
width: 0;
}
.tox .tox-tbtn--bespoke .tox-tbtn__select-label {
width: auto;
padding-inline-end: 0;
}
.tox .tox-tbtn {
box-sizing: border-box;
}
.tox .tox-tbtn,
.tox .tox-split-button,
.tox .tox-tbtn--select {
border-style: none;
margin: 2px 2px 3px;
}
.tox .tox-split-button .tox-tbtn {
margin-inline-end: 0;
}
.tox .tox-split-button .tox-tbtn.tox-split-button__chevron {
margin-inline-start: 0;
}
.tox .tox-edit-area.active,
.tox .tox-edit-area.active iframe {
border-color: ${theme.canvasFocusBorderColor};
}
.tox .tox-split-button .tox-tbtn {
margin-inline-end: 0;
}
.tox .tox-split-button .tox-tbtn.tox-split-button__chevron {
margin-inline-start: -6px;
background-color: ${theme.canvasBackgroundColor};
/* Increases touch-target width of split-button dropdowns for MAT-602 */
width: 30px;
}
.tox .tox-split-button:hover {
box-shadow: none;
}
.tox .tox-split-button:hover .tox-split-button__chevron {
background: ${theme.canvasBackgroundColor};
color: ${theme.canvasButtonColor};
box-shadow: none;
}
.tox .tox-tbtn:hover.tox-split-button__chevron,
.tox .tox-tbtn:focus.tox-split-button__chevron {
box-shadow: none;
}
.tox .tox-toolbar__primary {
border-width: 0;
}
.tox-tbtn.tox-tbtn--select .tox-icon.tox-tbtn__icon-wrap {
margin-inline-end: 4px;
}
.tox .tox-icon svg:not([height]),
.tox .tox-collection__item-icon svg:not([height]) {
height: 16px;
}
.tox .tox-collection--toolbar-lg .tox-collection__item-icon {
height: 30px;
width: 30px;
}
.tox-selectfield__icon-js svg {
width: 10px;
height: 10px;
}
[data-canvascontenttray-content]:focus {
outline-color: ${theme.canvasFocusBorderColor};
}
.tox .tox-toolbar-overlord .tox-toolbar__overflow {
/* Remove the errant gray line below the expanded toolbar in "sliding" mode */
background: none;
}
`
return {css, classNames, theme}
}

762
packages/canvas-rce/src/skins/skin-delta.css
View File

@ -1,762 +0,0 @@
/*
* 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/>.
*/
/*
* This file started as modified copy of skin.css generated by tinymce's skin tool
* (see https://github.com/tinymce/oxide for details). Then I diffed it with
* the tinymce/skins/ui/oxide/skin.css file and deleted anything that was unique
* or that I though I might eventually have to change (mostly colors).
* See ./skin.css for the full css file that's being kept for reference.
*
* Where the colors are left hard-coded, they are different from the default skin,
* and are what came out of the skin builder when the canvas theme colors were used.
* I didn't find any of those elements in the RCE, so I didn't want to guess what it
* should look like.
*/
.root {
background-color: var(--canvasBackgroundColor);
}
:global {
/* not part of the skin, but necessary to properly size the RCE's textarea */
.rce-wrapper textarea {
width: 100%;
box-sizing: border-box;
min-height: auto;
}
.tox,
.tox *:not(svg) {
color: inherit;
font-family: inherit;
}
/* fix RTL. tinyMCE tries to do this in its default theme but it's base style is too specific so when it does it, it isn't specific enough to override the base */
[dir='rtl'] .tox :not(svg) {
direction: rtl;
}
.tox:not(.tox-tinymce-inline) .tox-editor-header {
background-color: var(--canvasBackgroundColor);
}
.tox.tox-tinymce .screenreader-only {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
transform: translatez(0);
}
.tox-tinymce-aux {
font-family: var(--canvasFontFamily);
}
/* z-index must be greater than the InstUI Modal/Tray ones */
.tox.tox-tinymce-aux {
z-index: 10000;
}
.tox .tox-button {
background-color: var(--canvasPrimaryButtonHoverBackground);
font-family: var(--canvasFontFamily);
font-weight: var(--canvasButtonFontWeight);
font-size: var(--canvasButtonFontSize);
color: var(--canvasPrimaryButtonColor);
border-color: var(--canvasPrimaryButtonBorderColor);
line-height: calc(var(--canvasButtonLineHeight) - 2px);
padding: var(--canvasButtonPadding);
}
.tox .tox-button[disabled] {
opacity: 0.5;
border-color: inherit;
color: inherit;
}
.tox .tox-button:focus:not(:disabled) {
background-color: var(--canvasPrimaryButtonBackground);
color: var(--canvasPrimaryButtonColor);
border-color: var(--canvasBackgroundColor);
box-shadow: var(--canvasFocusBoxShadow);
}
.tox .tox-button:hover:not(:disabled) {
background-color: var(--canvasPrimaryButtonHoverBackground);
color: var(--canvasPrimaryButtonHoverColor);
}
.tox .tox-button:active:not(:disabled) {
background-color: var(--canvasPrimaryButtonBackground);
border-color: var(--canvasPrimaryButtonBorderColor);
color: var(--canvasPrimaryButtonColor);
}
.tox .tox-button--secondary {
background-color: var(--canvasSecondaryButtonBackground);
border-color: var(--canvasSecondaryButtonBorderColor);
color: var(--canvasSecondaryButtonColor);
}
.tox .tox-button--secondary[disabled] {
background-color: inherit;
border-color: var(--canvasSecondaryButtonBorderColor);
color: inherit;
opacity: 0.5;
}
.tox .tox-button--secondary:focus:not(:disabled) {
background-color: inherit;
border-color: var(--canvasFocusBorderColor);
color: inherit;
}
.tox .tox-button--secondary:hover:not(:disabled) {
background-color: var(--canvasSecondaryButtonHoverBackground);
border-color: var(--canvasSecondaryButtonBorderColor);
color: var(--canvasSecondaryButtonHoverColor);
}
.tox .tox-button--secondary:active:not(:disabled) {
background-color: inherit;
border-color: var(--canvasSecondaryButtonBorderColor);
color: inherit;
}
.tox .tox-button-link {
font-family: var(--canvasFontFamily);
}
.tox .tox-button--naked {
background: var(--canvasButtonBackground);
border-color: var(--canvasButtonBorderColor);
color: var(--canvasButtonColor);
}
.tox .tox-button--naked:hover:not(:disabled) {
background-color: var(--canvasButtonHoverBackground);
border-color: var(--canvasButtonBorderColor);
color: var(--canvasButtonHoverColor);
}
.tox .tox-button--naked:focus:not(:disabled) {
background-color: var(--canvasButtonBackground);
color: var(--canvasButtonColor);
border-color: var(--canvasBackgroundColor);
box-shadow: var(--canvasFocusBoxShadow);
}
.tox .tox-button--naked:active:not(:disabled) {
background-color: inherit;
color: inherit;
}
.tox .tox-button--naked.tox-button--icon {
color: var(--canvasButtonColor);
}
.tox .tox-button--naked.tox-button--icon:hover:not(:disabled) {
background: var(--canvasButtonHoverBackground);
color: var(--canvasButtonHoverColor);
}
.tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
fill: rgba(45, 59, 69, 0.3);
}
.tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
fill: var(--canvasTextColor);
}
.tox .tox-checkbox__icons .tox-checkbox-icon__checked svg {
fill: var(--canvasTextColor);
}
.tox input.tox-checkbox__input:focus + .tox-checkbox__icons {
box-shadow: var(--canvasFocusBoxShadow);
}
.tox .tox-collection--list .tox-collection__group {
border-color: var(--canvasBorderColor);
}
.tox .tox-collection__group-heading {
background-color: #e3e6e8;
color: rgba(45, 59, 69, 0.6);
}
.tox .tox-collection__item {
color: var(--canvasTextColor);
}
.tox .tox-collection__item--state-disabled {
background-color: unset;
opacity: 0.5;
cursor: default;
}
.tox .tox-collection--list .tox-collection__item--enabled {
color: contrast(inherit, var(--canvasTextColor), #fff);
}
.tox .tox-collection--list .tox-collection__item--active {
background-color: var(--activeMenuItemBackground);
color: var(--activeMenuItemLabelColor);
}
.tox
.tox-collection--list
.tox-collection__item--active:not(.tox-collection__item--state-disabled) {
background-color: var(--activeMenuItemBackground);
color: var(--activeMenuItemLabelColor);
}
.tox .tox-collection--toolbar .tox-collection__item--enabled {
background-color: #cbced1;
color: var(--canvasTextColor);
}
.tox .tox-collection--toolbar .tox-collection__item--active {
background-color: #e0e2e3;
color: var(--canvasTextColor);
}
.tox .tox-collection--grid .tox-collection__item--enabled {
background-color: #cbced1;
color: var(--canvasTextColor);
}
.tox .tox-collection--grid .tox-collection__item--active {
background-color: #e0e2e3;
color: var(--canvasTextColor);
}
.tox .tox-collection--list .tox-collection__item-icon:first-child {
margin-right: 8px;
}
.tox .tox-collection__item-accessory {
color: rgba(45, 59, 69, 0.6);
}
.tox .tox-sv-palette {
border: 1px solid black;
box-sizing: border-box;
}
.tox .tox-hue-slider {
border: 1px solid black;
}
.tox .tox-rgb-form input.tox-invalid {
/* Need !important to override Chrome's focus styling unfortunately */
border-color: var(--canvasErrorColor) !important;
}
.tox .tox-rgb-form {
padding: 2px; /* make room for the canvas focus ring on contained input elements */
}
.tox .tox-swatches__picker-btn:hover {
background: #e0e2e3;
}
.tox .tox-comment-thread {
background: var(--canvasBackgroundColor);
}
.tox .tox-comment {
background: var(--canvasBackgroundColor);
border-color: var(--canvasBorderColor);
box-shadow: 0 4px 8px 0 rgba(45, 59, 69, 0.1);
}
.tox .tox-comment__header {
color: var(--canvasTextColor);
}
.tox .tox-comment__date {
color: rgba(45, 59, 69, 0.6);
}
.tox .tox-comment__body {
color: var(--canvasTextColor);
}
.tox .tox-comment__expander p {
color: rgba(45, 59, 69, 0.6);
}
.tox .tox-comment-thread__overlay::after {
background: var(--canvasBackgroundColor);
}
.tox .tox-comment__overlay {
background: var(--canvasBackgroundColor);
}
.tox .tox-comment__loading-text {
color: var(--canvasTextColor);
}
.tox .tox-comment__overlaytext p {
background-color: var(--canvasBackgroundColor);
color: var(--canvasTextColor);
}
.tox .tox-comment__busy-spinner {
background-color: var(--canvasBackgroundColor);
}
.tox .tox-user__avatar svg {
fill: rgba(45, 59, 69, 0.6);
}
.tox .tox-user__name {
color: rgba(45, 59, 69, 0.6);
}
.tox .tox-dialog-wrap__backdrop {
background-color: rgba(255, 255, 255, 0.75);
}
.tox .tox-dialog {
background-color: var(--canvasBackgroundColor);
border-color: var(--canvasBorderColor);
box-shadow: var(--canvasModalShadow);
}
.tox .tox-dialog__header {
background-color: var(--canvasBackgroundColor);
color: var(--canvasTextColor);
border-bottom: 1px solid var(--canvasBorderColor);
padding: var(--canvasModalHeadingPadding);
margin: 0;
}
.tox .tox-dialog__title {
font-family: var(--canvasFontFamily);
font-size: var(--canvasModalHeadingFontSize);
font-weight: var(--canvasModalHeadingFontWeight);
}
.tox .tox-dialog__body {
color: var(--canvasTextColor);
padding: var(--canvasModalBodyPadding);
}
.tox .tox-dialog__body-nav-item {
color: rgba(45, 59, 69, 0.75);
&:focus {
box-shadow: var(--canvasFocusBoxShadow);
}
}
.tox .tox-dialog__body-nav-item--active {
border-bottom-color: var(--canvasBrandColor);
color: var(--canvasBrandColor);
}
.tox .tox-dialog__footer {
background-color: var(--canvasModalFooterBackground);
border-top: 1px solid var(--canvasBorderColor);
padding: var(--canvasModalFooterPadding);
margin: 0;
}
.tox .tox-dialog__table tbody tr {
border-bottom-color: var(--canvasBorderColor);
}
.tox .tox-dropzone {
background: var(--canvasBackgroundColor);
border: 2px dashed var(--canvasBorderColor);
}
.tox .tox-dropzone p {
color: rgba(45, 59, 69, 0.6);
}
.tox .tox-edit-area {
border: 1px solid var(--canvasBorderColor);
border-radius: 3px;
}
.tox .tox-edit-area__iframe {
background-color: var(--canvasBackgroundColor);
border: var(--canvasFocusBorderWidth) solid transparent;
}
.tox.tox-inline-edit-area {
border-color: var(--canvasBorderColor);
}
.tox .tox-form__group {
padding: 2px;
}
.tox .tox-control-wrap .tox-textfield {
padding-right: 32px;
}
.tox .tox-control-wrap__status-icon-invalid svg {
fill: var(--canvasErrorColor);
}
.tox .tox-control-wrap__status-icon-unknown svg {
fill: var(--canvasWarningColor);
}
.tox .tox-control-wrap__status-icon-valid svg {
fill: var(--canvasSuccessColor);
}
.tox .tox-color-input span {
border-color: rgba(45, 59, 69, 0.2);
}
.tox .tox-color-input span:focus {
border-color: var(--canvasBrandColor);
}
.tox .tox-label,
.tox .tox-toolbar-label {
color: rgba(45, 59, 69, 0.6);
}
.tox .tox-form__group {
margin: var(--canvasFormElementMargin);
}
.tox .tox-form__group:last-child {
margin: 0;
}
.tox .tox-form__group .tox-label {
color: var(--canvasFormElementLabelColor);
margin: var(--canvasFormElementLabelMargin);
font-size: var(--canvasFormElementLabelFontSize);
font-weight: var(--canvasFormElementLabelFontWeight);
}
.tox .tox-form__group--error {
color: var(--canvasErrorColor);
}
.tox .tox-textfield,
.tox .tox-selectfield select,
.tox .tox-textarea,
.tox .tox-toolbar-textfield {
background-color: var(--canvasBackgroundColor);
border-color: var(--canvasBorderColor);
color: var(--canvasTextColor);
font-family: var(--canvasFontFamily);
}
.tox .tox-textfield:focus,
.tox .tox-selectfield select:focus,
.tox .tox-textarea:focus {
/*border-color: var(--canvasFocusBorderColor);*/
border-color: var(--canvasBorderColor);
box-shadow: var(--canvasFocusBoxShadow);
}
.tox .tox-naked-btn {
color: var(--canvasButtonColor);
}
.tox .tox-naked-btn svg {
fill: var(--canvasButtonColor);
}
.tox .tox-insert-table-picker > div {
border-color: #cccccc;
}
.tox .tox-insert-table-picker .tox-insert-table-picker__selected {
background-color: var(--tableSelectorHighlightColor);
border-color: var(--tableSelectorHighlightColor);
}
.tox-selected-menu .tox-insert-table-picker {
background-color: var(--canvasBackgroundColor);
}
.tox .tox-insert-table-picker__label {
color: var(--canvasTextColor);
}
.tox .tox-menu {
background-color: var(--canvasBackgroundColor);
border-color: var(--canvasBorderColor);
}
.tox .tox-menubar {
background-color: var(--canvasBackgroundColor);
}
.tox .tox-mbtn {
color: var(--canvasButtonColor);
}
.tox .tox-mbtn[disabled] {
opacity: 0.5;
}
.tox .tox-mbtn:hover:not(:disabled) {
background: var(--toolbarButtonHoverBackground);
color: var(--canvasButtonColor);
}
.tox .tox-mbtn:focus:not(:disabled) {
background-color: transparent;
color: var(--canvasButtonColor);
border-color: var(--canvasBackgroundColor);
box-shadow: var(--canvasFocusBoxShadow);
}
.tox .tox-mbtn--active {
background: var(--toolbarButtonHoverBackground);
color: var(--canvasButtonColor);
}
.tox .tox-notification {
background-color: var(--canvasBackgroundColor);
border-color: #c5c5c5;
}
.tox .tox-notification--success {
background-color: #dff0d8;
border-color: var(--canvasSuccessColor);
}
.tox .tox-notification--error {
background-color: #f2dede;
border-color: var(--canvasErrorColor);
}
.tox .tox-notification--warn {
background-color: #fcf8e3;
border-color: var(--canvasWarningColor);
}
.tox .tox-notification--info {
background-color: #d9edf7;
border-color: var(--canvasInfoColor);
}
.tox .tox-notification__body {
color: var(--canvasTextColor);
}
.tox .tox-pop__dialog {
background-color: var(--canvasBackgroundColor);
border-color: var(--canvasBorderColor);
}
.tox .tox-pop.tox-pop--bottom::before {
border-color: var(--canvasBorderColor) transparent transparent transparent;
}
.tox .tox-pop.tox-pop--top::before {
border-color: transparent transparent var(--canvasBorderColor) transparent;
}
.tox .tox-pop.tox-pop--left::before {
border-color: transparent var(--canvasBorderColor) transparent transparent;
}
.tox .tox-pop.tox-pop--right::before {
border-color: transparent transparent transparent var(--canvasBorderColor);
}
.tox .tox-slider {
width: 100%;
}
.tox .tox-slider__rail {
border-color: var(--canvasBorderColor);
}
.tox .tox-slider__handle {
background-color: var(--canvasBrandColor);
}
.tox .tox-spinner > div {
background-color: rgba(45, 59, 69, 0.6);
}
/* deleted all the .tox-statusbar rules, since we use our own custom statusbar */
.tox .tox-tbtn {
border-style: none;
color: var(--canvasButtonColor);
position: relative;
}
.tox .tox-tbtn svg {
fill: var(--canvasButtonColor);
}
.tox .tox-tbtn.tox-tbtn--enabled {
background: inherit;
}
.tox .tox-tbtn:focus,
.tox .tox-split-button:focus {
background: var(--canvasBackgroundColor);
color: var(--canvasButtonColor);
box-shadow: var(--canvasFocusBoxShadow);
}
.tox .tox-tbtn:hover,
.tox .tox-split-button:hover,
.tox .tox-tbtn.tox-tbtn--enabled:hover,
.tox .tox-split-button .tox-tbtn.tox-split-button__chevron:hover {
background: var(--toolbarButtonHoverBackground);
color: var(--canvasButtonColor);
}
.tox-tbtn.tox-split-button__chevron {
position: relative;
}
/* styling lifted from instui Tabs */
.tox .tox-tbtn.tox-tbtn--enabled::after {
position: absolute;
top: -3px;
content: '\\25BC';
text-align: center;
height: 8px;
font-size: 8px;
width: 100%;
color: var(--canvasEnabledColor);
}
/* place the chevron above the icon for buttons with dropdowns */
.tox .tox-tbtn.tox-tbtn--enabled.tox-tbtn--select::after {
text-align: left;
padding-left: 18px;
}
/* the split button is not enabled and the chevron has been clicked to open the popup
* hide the enabled bar that's under just the chevron
*/
.tox-tbtn.tox-split-button__chevron.tox-tbtn--enabled::after {
display: none;
}
.tox .tox-tbtn--disabled,
.tox .tox-tbtn--disabled:hover,
.tox .tox-tbtn:disabled,
.tox .tox-tbtn:disabled:hover {
opacity: 0.5;
}
.tox .tox-tbtn--disabled svg,
.tox .tox-tbtn--disabled:hover svg,
.tox .tox-tbtn:disabled svg,
.tox .tox-tbtn:disabled:hover svg {
/* stylelint-disable-line no-descending-specificity */
opacity: 0.5;
}
.tox .tox-tbtn__select-chevron svg {
fill: var(--canvasButtonColor);
width: 10px;
height: 10px;
}
.tox .tox-split-button__chevron svg {
fill: var(--canvasButtonColor);
width: 10px;
height: 10px;
}
.tox .tox-split-button.tox-tbtn--disabled:hover,
.tox .tox-split-button.tox-tbtn--disabled:focus,
.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover,
.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:focus {
opacity: 0.5;
}
.tox .tox-toolbar {
background-color: var(--canvasBackgroundColor);
border-top: 1px solid var(--canvasBorderColor);
}
.tox .tox-toolbar__group:not(:last-of-type) {
border-right: 1px solid var(--canvasBorderColor);
}
.tox .tox-tooltip__body {
background-color: var(--canvasTextColor);
box-shadow: 0 2px 4px rgba(45, 59, 69, 0.3);
color: rgba(255, 255, 255, 0.75);
}
.tox .tox-tooltip--down .tox-tooltip__arrow {
border-top-color: var(--canvasTextColor);
}
.tox .tox-tooltip--up .tox-tooltip__arrow {
border-bottom-color: var(--canvasTextColor);
}
.tox .tox-tooltip--right .tox-tooltip__arrow {
border-left-color: var(--canvasTextColor);
}
.tox .tox-tooltip--left .tox-tooltip__arrow {
border-right-color: var(--canvasTextColor);
}
.tox .tox-well {
border-color: var(--canvasBorderColor);
}
.tox .tox-custom-editor {
border-color: var(--canvasBorderColor);
}
.tox a {
color: var(--canvasLinkColor);
}
.tox.tox-tinymce {
border-style: none;
}
/*
* .tox-toolbar is the regular wrapping toolbar
* .tox-toolbar-overlord and .tox-toolbar__primary crop up when toolbar_drawer: 'floating'
*
* These rules create the short separater between toolbar sections
*/
.tox-editor-container .tox-toolbar,
.tox-editor-container .tox-toolbar-overlord {
background-image: none;
margin-bottom: 5px;
}
.tox-editor-container .tox-toolbar__primary {
background-image: none;
}
/* tinymce 5.3 picked up a border since 5.0 */
.tox .tox-menubar + .tox-toolbar-overlord .tox-toolbar__primary {
border-style: none;
}
.tox .tox-toolbar .tox-toolbar__group,
.tox .tox-toolbar-overlord .tox-toolbar__group,
.tox-toolbar__overflow .tox-toolbar__group,
.tox:not([dir='rtl']) .tox-toolbar__group:not(:last-of-type),
.tox[dir='rtl'] .tox-toolbar__group:not(:last-of-type) {
border-style: none;
}
.tox-toolbar .tox-toolbar__group::after, /* regular toolbar */
.tox-toolbar-overlord .tox-toolbar__group::after, /* wrapping toolbar */
.tox-toolbar__overflow .tox-toolbar__group::after, /* overflow toolbar */
.tox-tinymce-aux .tox-toolbar .tox-toolbar__group::after {
/* popup toolbar */
content: '';
display: inline-block;
box-sizing: border-box;
border-inline-end: 1px solid var(--canvasBorderColor);
width: 8px;
height: 24px;
}
.tox-toolbar .tox-toolbar__group:last-child::after,
.tox-toolbar-overlord .tox-toolbar__group:last-child::after,
.tox-toolbar__overflow .tox-toolbar__group:last-child::after,
.tox-tinymce-aux .tox-toolbar .tox-toolbar__group:last-child::after {
border-inline-end-width: 0;
padding-inline-start: 0;
width: 0;
}
.tox .tox-tbtn--bespoke .tox-tbtn__select-label {
width: auto;
padding-inline-end: 0;
}
.tox .tox-tbtn {
box-sizing: border-box;
}
.tox .tox-tbtn,
.tox .tox-split-button,
.tox .tox-tbtn--select {
border-style: none;
margin: 2px 2px 3px;
}
.tox .tox-split-button .tox-tbtn {
margin-inline-end: 0;
}
.tox .tox-split-button .tox-tbtn.tox-split-button__chevron {
margin-inline-start: 0;
}
.tox .tox-edit-area.active,
.tox .tox-edit-area.active iframe {
border-color: var(--canvasFocusBorderColor);
}
.tox .tox-split-button .tox-tbtn {
margin-inline-end: 0;
}
.tox .tox-split-button .tox-tbtn.tox-split-button__chevron {
margin-inline-start: -6px;
background-color: var(--canvasBackgroundColor);
/* Increases touch-target width of split-button dropdowns for MAT-602 */
width: 30px;
}
.tox .tox-split-button:hover {
box-shadow: none;
}
.tox .tox-split-button:hover .tox-split-button__chevron {
background: var(--canvasBackgroundColor);
color: var(--canvasButtonColor);
box-shadow: none;
}
.tox .tox-tbtn:hover.tox-split-button__chevron,
.tox .tox-tbtn:focus.tox-split-button__chevron {
box-shadow: none;
}
.tox .tox-toolbar__primary {
border-width: 0;
}
.tox-tbtn.tox-tbtn--select .tox-icon.tox-tbtn__icon-wrap {
margin-inline-end: 4px;
}
/* MAKE INSTUI ICONS THE SAME SIZE AS THE DEFAULT TINYMCE ONES */
/* this is because instUI icons don't have a "height" attribute like tinymce ones do, so this will make them consistent */
.tox .tox-icon svg:not([height]),
.tox .tox-collection__item-icon svg:not([height]) {
height: 16px;
}
/* the default icon size for tinymce's large toolbar groups is 24px, so since we shrink all icons to 16px, we also need
to shrink the padding around these large groups */
.tox .tox-collection--toolbar-lg .tox-collection__item-icon {
height: 30px;
width: 30px;
}
.tox-selectfield__icon-js svg {
width: 10px;
height: 10px;
}
/* not part of tinymce, but a convenient place to add a style I need */
[data-canvascontenttray-content]:focus {
outline-color: var(--canvasFocusBorderColor);
}
.tox .tox-toolbar-overlord .tox-toolbar__overflow {
/* Remove the errant gray line below the expanded toolbar in "sliding" mode */
background: none;
}
}

2335
packages/canvas-rce/src/skins/skin.css
View File

File diff suppressed because it is too large Load Diff

128
packages/canvas-rce/src/skins/theme.js
View File

@ -1,128 +0,0 @@
/*
* 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({borders, colors, forms, shadows, spacing, typography}) {
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 ({colors}) {
return {
canvasButtonBackground: colors.backgroundLight,
canvasSecondaryButtonBorderColor: colors.borderMedium,
canvasLinkDecoration: 'underline',
canvasFocusBorderColor: colors.borderBrand,
canvasFocusBoxShadow: `0 0 0 2px ${colors.brand}`,
canvasBrandColor: colors.brand,
}
}