diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 78deedb8a7997ae9fd84a6befe1df3ad8a1c6f59..9846f6526e36e131555b180f18b24e2a4f1661fd 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -3,8 +3,8 @@ import { createGlobalStyle } from 'styled-components';
import { Wax } from 'wax-prosemirror-core';
-import { EditoriaLayout } from '../Editoria/layout';
-import { config } from '../Editoria/config';
+import { HhmiLayout } from './layout';
+import { config } from './config';
const GlobalStyle = createGlobalStyle`
body {
@@ -41,7 +41,7 @@ const Hhmi = () => {
value=""
targetFormat="JSON"
// readonly
- layout={EditoriaLayout}
+ layout={HhmiLayout}
// onChange={source => console.log(source)}
// user={user}
/>
diff --git a/editors/demo/src/HHMI/config/config.js b/editors/demo/src/HHMI/config/config.js
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..e972699d6d16745d994cca0fe55f689ca55f7f92 100644
--- a/editors/demo/src/HHMI/config/config.js
+++ b/editors/demo/src/HHMI/config/config.js
@@ -0,0 +1,126 @@
+import { emDash, ellipsis } from 'prosemirror-inputrules';
+import { debounce } from 'lodash';
+import { columnResizing, tableEditing } from 'prosemirror-tables';
+import {
+ InlineAnnotationsService,
+ AnnotationToolGroupService,
+ ImageService,
+ ImageToolGroupService,
+ LinkService,
+ ListsService,
+ ListToolGroupService,
+ TablesService,
+ TableToolGroupService,
+ BaseService,
+ BaseToolGroupService,
+ DisplayBlockLevelService,
+ DisplayToolGroupService,
+ TextBlockLevelService,
+ TextToolGroupService,
+ NoteService,
+ NoteToolGroupService,
+ TrackChangeService,
+ CommentsService,
+ CodeBlockService,
+ CodeBlockToolGroupService,
+ DisplayTextToolGroupService,
+ MathService,
+ FindAndReplaceService,
+ EditingSuggestingService,
+ TrackingAndEditingToolGroupService,
+ FullScreenService,
+ FullScreenToolGroupService,
+ SpecialCharactersService,
+ SpecialCharactersToolGroupService,
+ HighlightService,
+ TextHighlightToolGroupServices,
+ EditorInfoToolGroupServices,
+ BottomInfoService,
+ TransformService,
+ TransformToolGroupService,
+ TrackOptionsToolGroupService,
+ TrackCommentOptionsToolGroupService,
+ CustomTagInlineToolGroupService,
+ CustomTagBlockToolGroupService,
+ CustomTagService,
+} from 'wax-prosemirror-services';
+
+import { DefaultSchema } from 'wax-prosemirror-utilities';
+
+import { WaxSelectionPlugin } from 'wax-prosemirror-plugins';
+
+import invisibles, {
+ space,
+ hardBreak,
+ paragraph,
+} from '@guardian/prosemirror-invisibles';
+
+export default {
+ MenuService: [
+ {
+ templateArea: 'mainMenuToolBar',
+ toolGroups: [
+ 'Base',
+ {
+ name: 'Annotations',
+ more: [
+ 'Superscript',
+ 'Subscript',
+ 'SmallCaps',
+ 'Underline',
+ 'StrikeThrough',
+ ],
+ },
+ 'HighlightToolGroup',
+ 'TransformToolGroup',
+ 'Lists',
+ 'Images',
+ 'SpecialCharacters',
+ 'Tables',
+ 'FullScreen',
+ ],
+ },
+ ],
+
+ SchemaService: DefaultSchema,
+ RulesService: [emDash, ellipsis],
+
+ PmPlugins: [
+ columnResizing(),
+ tableEditing(),
+ invisibles([hardBreak()]),
+ WaxSelectionPlugin,
+ ],
+
+ services: [
+ new DisplayBlockLevelService(),
+ new DisplayToolGroupService(),
+ new TextBlockLevelService(),
+ new TextToolGroupService(),
+ new ListsService(),
+ new LinkService(),
+ new InlineAnnotationsService(),
+ new ImageService(),
+ new TablesService(),
+ new BaseService(),
+ new BaseToolGroupService(),
+ new TableToolGroupService(),
+ new ImageToolGroupService(),
+ new AnnotationToolGroupService(),
+ new ListToolGroupService(),
+ // new CodeBlockService(),
+ // new CodeBlockToolGroupService(),
+ new DisplayTextToolGroupService(),
+ new MathService(),
+ new FullScreenService(),
+ new FullScreenToolGroupService(),
+ new SpecialCharactersService(),
+ new SpecialCharactersToolGroupService(),
+ new HighlightService(),
+ new TextHighlightToolGroupServices(),
+ new EditorInfoToolGroupServices(),
+ new BottomInfoService(),
+ new TransformService(),
+ new TransformToolGroupService(),
+ ],
+};
diff --git a/editors/demo/src/HHMI/layout/EditorElements.js b/editors/demo/src/HHMI/layout/EditorElements.js
new file mode 100644
index 0000000000000000000000000000000000000000..deec1057692687c96a3c84d2567ae6642b424c29
--- /dev/null
+++ b/editors/demo/src/HHMI/layout/EditorElements.js
@@ -0,0 +1,476 @@
+import { css } from 'styled-components';
+
+import { lighten, th } from '@pubsweet/ui-toolkit';
+
+/* All styles regarding ProseMirror surface and elements */
+
+const fontWriting = css`
+ font-family: ${th('fontWriting')};
+ font-size: ${th('fontSizeBase')};
+ color: ${th('colorText')};
+`;
+
+export default css`
+ .ProseMirror {
+ background: white;
+ counter-reset: footnote;
+ line-height: 1.6;
+ ${fontWriting}
+
+ p::selection,
+ h1::selection,
+ h2::selection,
+ h3::selection,
+ code::selection,
+ span::selection,
+ p span::selection,
+ h1 span::selection,
+ h2 span::selection,
+ h3 span::selection,
+ h4 span::selection,
+ code span::selection,
+ custom-tag-block::selection,
+ custom-tag-inline::selection {
+ background-color: transparent;
+ }
+
+ &:focus {
+ outline: none;
+ }
+ }
+
+ .ProseMirror .wax-selection-marker {
+ background-color: ${th('colorSelection')};
+ opacity: 0.8;
+ }
+
+ div[contenteditable='false'] {
+ pointer-events: none;
+ user-select: none;
+ }
+
+ /* .ProseMirror title {
+ display: inline;
+ font-size: 14px;
+ } */
+
+ .ProseMirror footnote {
+ font-variant-numeric: lining-nums proportional-nums;
+ display: inline-block;
+ text-align: center;
+ width: 17px;
+ height: 17px;
+ background: white;
+ border-bottom: 2px solid black;
+ color: black;
+ cursor: pointer;
+ }
+
+ .ProseMirror footnote::after {
+ content: counter(footnote);
+ position: relative;
+ bottom: 2px;
+ font-size: 16px;
+ counter-increment: footnote;
+ }
+
+ hr {
+ padding: 2px 10px;
+ border: none;
+ margin: 1em 0;
+ }
+
+ hr:after {
+ content: '';
+ display: block;
+ height: 1px;
+ background-color: silver;
+ line-height: 2px;
+ }
+
+ ul,
+ ol {
+ padding-left: 30px;
+ }
+
+ blockquote {
+ padding-left: 1em;
+ border-left: 3px solid #eee;
+ margin-left: 0;
+ margin-right: 0;
+ }
+
+ figure {
+ display: table;
+ margin-left: auto;
+ margin-right: auto;
+ word-break: break-word;
+
+ img {
+ cursor: default;
+ height: auto;
+ max-width: 100%;
+ width: auto;
+ }
+
+ figcaption {
+ background: #e2ebff;
+ caption-side: bottom;
+ display: table-caption;
+ max-width: 100%;
+ min-height: 20px;
+ padding: 4px;
+ width: auto;
+
+ &:focus {
+ outline: none;
+ }
+ &:before {
+ content: 'Caption: ';
+ font-weight: bold;
+ }
+ }
+ }
+
+ sup,
+ sub {
+ line-height: 0;
+ }
+
+ strong {
+ font-weight: bold;
+ }
+
+ /* Tables */
+
+ table {
+ border-collapse: initial;
+ border-spacing: 0;
+ border-width: 0 thin thin 0;
+ border: 1px solid #eee;
+ table-layout: fixed;
+ width: 100%;
+ margin: 0;
+ overflow: hidden;
+ page-break-inside: avoid;
+ }
+
+ th,
+ td {
+ border: 1px solid #eee;
+ /*width: 200px;*/
+ padding: 2px 5px;
+ vertical-align: top;
+ box-sizing: border-box;
+ position: relative;
+ }
+
+ .tableWrapper {
+ overflow-x: auto;
+ }
+
+ .column-resize-handle {
+ position: absolute;
+ right: -2px;
+ top: 0;
+ bottom: 0;
+ width: 4px;
+ z-index: 20;
+ background-color: #adf;
+ pointer-events: none;
+ }
+
+ .ProseMirror.resize-cursor {
+ cursor: ew-resize;
+ cursor: col-resize;
+ }
+ /* Give selected cells a blue overlay */
+ .selectedCell:after {
+ z-index: 2;
+ position: absolute;
+ content: '';
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ background: rgba(200, 200, 255, 0.4);
+ pointer-events: none;
+ }
+
+ /* placeholder */
+ .empty-node::before {
+ color: #aaa;
+ float: left;
+ font-style: italic;
+ pointer-events: none;
+ height: 0;
+ }
+
+ p.empty-node:first-child::before {
+ content: attr(data-content);
+ }
+
+ /* invisible characters */
+ .invisible {
+ pointer-events: none;
+ user-select: none;
+ }
+
+ .invisible:before {
+ caret-color: inherit;
+ color: gray;
+ display: inline-block;
+ font-weight: 400;
+ font-style: normal;
+ line-height: 1em;
+ width: 0;
+ }
+
+ .invisible--space:before {
+ content: '·';
+ }
+
+ .invisible--break:before {
+ content: '¬';
+ }
+
+ .invisible--par:after {
+ content: '¶';
+ }
+
+ span.deletion {
+ text-decoration: line-through;
+ color: ${th('colorError')};
+ footnote {
+ background: ${th('colorError')};
+ }
+ }
+
+ span.insertion {
+ color: royalblue;
+ footnote {
+ background: royalblue;
+ }
+ }
+
+ .selected-insertion {
+ background: ${lighten('royalblue', 0.65)};
+ }
+
+ .selected-deletion {
+ background: ${lighten('indianred', 0.65)};
+ }
+
+ .selected-format-change,
+ .selected-block-change {
+ background-color: #eefbfb;
+ }
+
+ .format-change {
+ border-bottom: 2px solid royalblue;
+ }
+
+ [data-track] {
+ position: relative;
+ }
+
+ [data-track]::before {
+ content: '';
+ position: absolute;
+ border-left: 2px solid royalblue;
+ left: -10px;
+ height: 100%;
+ }
+
+ .insertion .show-insertion {
+ color: black;
+ }
+
+ .deletion .hide-deletion {
+ display: none;
+ }
+
+ li[data-track]::before,
+ li [data-track]::before {
+ left: -5px;
+ }
+
+ span.comment {
+ border-bottom: 2px solid gold;
+ border-radius: 3px 3px 0 0;
+
+ .active-comment {
+ background-color: gold;
+ /* color: black; */
+ }
+ }
+
+ span.search-result {
+ background: #bee594;
+ }
+
+ /* == Math Nodes ======================================== */
+
+ .math-node {
+ min-width: 1em;
+ min-height: 1em;
+ font-size: 0.95em;
+ font-family: 'Consolas', 'Ubuntu Mono', monospace;
+ cursor: auto;
+ .ProseMirror {
+ box-shadow: none;
+ min-height: 100%;
+ padding: 0;
+ background: #eee;
+ color: rgb(132, 33, 162);
+ }
+ }
+
+ .math-node.empty-math .math-render::before {
+ content: '(empty)';
+ color: red;
+ }
+
+ .math-node .math-render.parse-error::before {
+ content: '(math error)';
+ color: red;
+ cursor: help;
+ }
+
+ .math-node.ProseMirror-selectednode {
+ outline: none;
+ }
+
+ .math-node .math-src {
+ display: none;
+ color: rgb(132, 33, 162);
+ tab-size: 4;
+ }
+
+ .math-node.ProseMirror-selectednode .math-src {
+ display: flex;
+ }
+ .math-node.ProseMirror-selectednode .math-render {
+ display: none;
+ }
+
+ /* -- Inline Math --------------------------------------- */
+
+ math-inline {
+ display: inline;
+ white-space: nowrap;
+ }
+
+ math-inline .math-render {
+ display: inline-block;
+ font-size: 0.85em;
+ cursor: pointer;
+ }
+
+ math-inline .math-src .ProseMirror {
+ display: inline;
+ }
+
+ math-inline .math-src::after,
+ math-inline .math-src::before {
+ content: '$';
+ color: #b0b0b0;
+ }
+
+ /* -- Block Math ---------------------------------------- */
+
+ math-display {
+ display: block;
+ }
+
+ math-display .math-render {
+ display: block;
+ }
+
+ math-display.ProseMirror-selectednode {
+ background-color: #eee;
+ }
+
+ math-display .math-src .ProseMirror {
+ width: 100%;
+ display: block;
+ }
+
+ math-display .math-src::after,
+ math-display .math-src::before {
+ content: '$$';
+ text-align: left;
+ color: #b0b0b0;
+ }
+
+ math-display .katex-display {
+ margin: 0;
+ }
+
+ /* -- Selection Plugin ---------------------------------- */
+
+ p::selection,
+ p > *::selection {
+ background-color: #c0c0c0;
+ }
+ .katex-html *::selection {
+ background-color: none !important;
+ }
+
+ .math-node.math-select .math-render {
+ background-color: #c0c0c0ff;
+ }
+ math-inline.math-select .math-render {
+ padding-top: 2px;
+ }
+
+ span[data-type='inline'] {
+ display: inline;
+ font-weight: 500;
+ }
+
+ span[data-type='inline']:before {
+ color: #006f19;
+ content: ' | ';
+ font-weight: 600;
+ margin-left: 0;
+ }
+
+ span[data-type='inline']:after {
+ color: #006f19;
+ content: ' | ';
+ display: inline;
+ font-weight: 600;
+ }
+
+ p[data-type='block'] {
+ display: block;
+ margin-top: 1em;
+ }
+
+ p[data-type='block']:before {
+ color: #006f19;
+ content: '⌜';
+ display: inline;
+ font-weight: 600;
+ font-size: 22px;
+ position: relative;
+ top: 2px;
+ left: 6px;
+ }
+
+ p[data-type='block']:after {
+ color: #006f19;
+ content: '⌟';
+ display: inline;
+ font-weight: 600;
+ font-size: 22px;
+ position: relative;
+ top: 5px;
+ right: 6px;
+ }
+
+ .transform-icon {
+ transform: rotate(40deg);
+ }
+`;
diff --git a/editors/demo/src/HHMI/layout/HhmiLayout.js b/editors/demo/src/HHMI/layout/HhmiLayout.js
new file mode 100644
index 0000000000000000000000000000000000000000..e0c14eb82a6709978b66f766bf786ef2ccbd3602
--- /dev/null
+++ b/editors/demo/src/HHMI/layout/HhmiLayout.js
@@ -0,0 +1,304 @@
+import React, { useContext, useState, useCallback, useEffect } from 'react';
+import styled, { css, ThemeProvider } from 'styled-components';
+import PanelGroup from 'react-panelgroup';
+import { DocumentHelpers } from 'wax-prosemirror-utilities';
+import { WaxContext, ComponentPlugin } from 'wax-prosemirror-core';
+import { grid, th } from '@pubsweet/ui-toolkit';
+import { cokoTheme } from '../theme';
+import EditorElements from './EditorElements';
+
+/* Katex css */
+import '~../../katex/dist/katex.min.css';
+
+const divider = css`
+ .panelGroup {
+ background: #fff;
+ }
+ .divider {
+ > div {
+ background: ${th('colorBorder')};
+ height: ${grid(1)};
+ max-height: ${grid(1)};
+
+ &:hover {
+ height: ${grid(2)};
+ max-height: ${grid(2)};
+ }
+ }
+ }
+`;
+
+const Wrapper = styled.div`
+ background: ${th('colorBackground')};
+ font-family: ${th('fontInterface')};
+ font-size: ${th('fontSizeBase')};
+ line-height: ${grid(4)};
+ display: flex;
+ flex-direction: column;
+
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+
+ ${divider}
+
+ * {
+ box-sizing: border-box;
+ }
+`;
+
+const Main = styled.div`
+ display: flex;
+ flex-grow: 1;
+ height: calc(100% - 40px);
+`;
+
+const TopMenu = styled.div`
+ display: flex;
+ min-height: 40px;
+ user-select: none;
+ background: ${th('colorBackgroundToolBar')};
+ border-top: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
+ border-bottom: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
+
+ > div:not(:last-child) {
+ border-right: ${th('borderWidth')} ${th('borderStyle')}
+ ${th('colorFurniture')};
+ }
+
+ > div:nth-last-of-type(-n + 2) {
+ margin-left: auto;
+ }
+
+ > div:last-child {
+ margin-left: 0;
+ margin-right: ${grid(5)};
+ }
+
+ > div[data-name='Tables'] {
+ border-right: none;
+ }
+`;
+
+const EditorArea = styled.div`
+ flex-grow: 1;
+`;
+
+const WaxSurfaceScroll = styled.div`
+ overflow-y: auto;
+ display: flex;
+ box-sizing: border-box;
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ /* PM styles for main content*/
+ ${EditorElements};
+`;
+
+const EditorContainer = styled.div`
+ width: 65%;
+ height: 100%;
+
+ .ProseMirror {
+ box-shadow: 0 0 8px #ecedf1;
+ min-height: 98%;
+ padding: ${grid(10)};
+ }
+`;
+
+const CommentsContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 35%;
+ height: 100%;
+`;
+
+const CommentsContainerNotes = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 35%;
+ height: 100%;
+`;
+
+const CommentTrackToolsContainer = styled.div`
+ display: flex;
+ position: fixed;
+ padding-top: 5px;
+ right: 30px;
+ z-index: 1;
+ background: white;
+ width: 25%;
+`;
+
+const CommentTrackTools = styled.div`
+ margin-left: auto;
+ display: flex;
+ position: relative;
+ z-index: 1;
+`;
+
+const CommentTrackOptions = styled.div`
+ display: flex;
+ margin-left: 10px;
+ bottom: 5px;
+ position: relative;
+`;
+
+const NotesAreaContainer = styled.div`
+ background: #fff;
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ height: 100%;
+ overflow-y: scroll;
+ position: absolute;
+ /* PM styles for note content*/
+ ${EditorElements};
+ .ProseMirror {
+ display: inline;
+ }
+`;
+
+const NotesContainer = styled.div`
+ box-shadow: 0 0 8px #ecedf1;
+ counter-reset: footnote-view;
+ display: flex;
+ flex-direction: column;
+ padding-bottom: ${grid(4)};
+ height: 100%;
+ width: 65%;
+`;
+const WaxBottomRightInfo = styled.div``;
+const InfoContainer = styled.div`
+ display: flex;
+ position: fixed;
+ bottom: 1px;
+ right: 21px;
+ z-index: 999;
+`;
+
+let surfaceHeight = (window.innerHeight / 5) * 3;
+let notesHeight = (window.innerHeight / 5) * 2;
+
+const onResizeEnd = arr => {
+ surfaceHeight = arr[0].size;
+ notesHeight = arr[1].size;
+};
+
+const getNotes = main => {
+ const notes = DocumentHelpers.findChildrenByType(
+ main.state.doc,
+ main.state.schema.nodes.footnote,
+ true,
+ );
+ return notes;
+};
+
+const LeftSideBar = ComponentPlugin('leftSideBar');
+const MainMenuToolBar = ComponentPlugin('mainMenuToolBar');
+const NotesArea = ComponentPlugin('notesArea');
+const RightArea = ComponentPlugin('rightArea');
+const CommentTrackToolBar = ComponentPlugin('commentTrackToolBar');
+const WaxOverlays = ComponentPlugin('waxOverlays');
+const BottomRightInfo = ComponentPlugin('BottomRightInfo');
+
+const HhmiLayout = ({ editor }) => {
+ const {
+ view: { main },
+ options,
+ } = useContext(WaxContext);
+
+ let fullScreenStyles = {};
+
+ if (options.fullScreen) {
+ fullScreenStyles = {
+ backgroundColor: '#fff',
+ height: '100%',
+ left: '0',
+ margin: '0',
+ padding: '0',
+ position: 'fixed',
+ top: '0',
+ width: '100%',
+ zIndex: '99999',
+ };
+ }
+ const notes = main && getNotes(main);
+ const commentsTracksCount =
+ main && DocumentHelpers.getCommentsTracksCount(main);
+ const trackBlockNodesCount =
+ main && DocumentHelpers.getTrackBlockNodesCount(main);
+
+ const areNotes = notes && !!notes.length && notes.length > 0;
+
+ const [hasNotes, setHasNotes] = useState(areNotes);
+
+ const showNotes = () => {
+ setHasNotes(areNotes);
+ };
+
+ const delayedShowedNotes = useCallback(
+ setTimeout(() => showNotes(), 100),
+ [],
+ );
+
+ useEffect(() => {}, [delayedShowedNotes]);
+
+ return (
+ <ThemeProvider theme={cokoTheme}>
+ <Wrapper style={fullScreenStyles} id="wax-container">
+ <TopMenu>
+ <MainMenuToolBar />
+ </TopMenu>
+
+ <Main>
+ <EditorArea>
+ <PanelGroup
+ direction="column"
+ panelWidths={[
+ { size: surfaceHeight, resize: 'stretch' },
+ { size: notesHeight, resize: 'resize' },
+ ]}
+ onResizeEnd={onResizeEnd}
+ >
+ <WaxSurfaceScroll>
+ <EditorContainer>{editor}</EditorContainer>
+ <CommentsContainer>
+ <CommentTrackToolsContainer>
+ <CommentTrackTools>
+ {commentsTracksCount + trackBlockNodesCount} COMMENTS AND
+ SUGGESTIONS
+ <CommentTrackOptions>
+ <CommentTrackToolBar />
+ </CommentTrackOptions>
+ </CommentTrackTools>
+ </CommentTrackToolsContainer>
+ <RightArea area="main" />
+ </CommentsContainer>
+ </WaxSurfaceScroll>
+
+ {hasNotes && (
+ <NotesAreaContainer>
+ <NotesContainer id="notes-container">
+ <NotesArea view={main} />
+ </NotesContainer>
+ <CommentsContainerNotes>
+ <RightArea area="notes" />
+ </CommentsContainerNotes>
+ </NotesAreaContainer>
+ )}
+ </PanelGroup>
+ </EditorArea>
+ </Main>
+ <WaxOverlays />
+ <WaxBottomRightInfo>
+ <InfoContainer id="info-container">
+ <BottomRightInfo />
+ </InfoContainer>
+ </WaxBottomRightInfo>
+ </Wrapper>
+ </ThemeProvider>
+ );
+};
+
+export default HhmiLayout;
diff --git a/editors/demo/src/HHMI/layout/index.js b/editors/demo/src/HHMI/layout/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..177426595094a532db95142e23c817fcd3e8047b
--- /dev/null
+++ b/editors/demo/src/HHMI/layout/index.js
@@ -0,0 +1 @@
+export { default as HhmiLayout } from './HhmiLayout';
diff --git a/editors/demo/src/HHMI/theme/elements/ButtonStyles.js b/editors/demo/src/HHMI/theme/elements/ButtonStyles.js
new file mode 100644
index 0000000000000000000000000000000000000000..5a54e9877430650d1835b3b5a117d0cbbe51b350
--- /dev/null
+++ b/editors/demo/src/HHMI/theme/elements/ButtonStyles.js
@@ -0,0 +1,17 @@
+import styled, { css } from "styled-components";
+
+export default css`
+ background: #fff;
+ border: none;
+ font-size: inherit;
+ cursor: pointer;
+ border-radius: 0;
+ padding: 5px 10px;
+ &:disabled {
+ color: #ccc;
+ pointer-events: none;
+ }
+ &:hover {
+ background: #f6f6f6;
+ }
+`;
diff --git a/editors/demo/src/HHMI/theme/elements/index.js b/editors/demo/src/HHMI/theme/elements/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..06cac1a0c26cbd6d124cdec09c7ca44d9cd57b12
--- /dev/null
+++ b/editors/demo/src/HHMI/theme/elements/index.js
@@ -0,0 +1 @@
+export { default as ButtonStyles } from "./ButtonStyles";
diff --git a/editors/demo/src/HHMI/theme/index.js b/editors/demo/src/HHMI/theme/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..1f02e50799efeb994f4ff204cbdd25244128375f
--- /dev/null
+++ b/editors/demo/src/HHMI/theme/index.js
@@ -0,0 +1,2 @@
+export { default as cokoTheme } from "./theme";
+
diff --git a/editors/demo/src/HHMI/theme/theme.js b/editors/demo/src/HHMI/theme/theme.js
new file mode 100644
index 0000000000000000000000000000000000000000..011ea8916f75580b4474d3ab63d6d5c8e10fdaa0
--- /dev/null
+++ b/editors/demo/src/HHMI/theme/theme.js
@@ -0,0 +1,87 @@
+/* eslint-disable import/extensions */
+import 'typeface-fira-sans-condensed';
+import 'fontsource-merriweather';
+import 'typeface-vollkorn';
+import 'typeface-inter';
+
+import { css } from 'styled-components';
+
+const cokoTheme = {
+ /* Colors */
+ colorBackground: 'white',
+ colorPrimary: '#525E76',
+ colorSecondary: '#E7E7E7',
+ colorFurniture: '#CCC',
+ colorBorder: '#EBEBF0',
+ colorBackgroundHue: '#F1F5FF',
+ colorBackgroundTabs: '#e1ebff',
+ colorSuccess: '#008800',
+ colorError: 'indianred',
+ colorText: '#111',
+ colorTextReverse: '#FFF',
+ colorTextPlaceholder: '#595959',
+ colorWarning: '#ffc107',
+ colorBackgroundToolBar: '#fff',
+ colorSelection: '#C5D7FE',
+ colorBackgroundButton: '#0042C7',
+ /* Text variables */
+
+ // fonts
+ fontInterface: 'Fira Sans Condensed',
+ fontHeading: 'Fira Sans Condensed',
+ fontReading: 'Vollkorn',
+ fontWriting: 'Merriweather',
+ fontTools: 'Inter',
+
+ // font sizes
+ fontSizeBase: '14px',
+ fontSizeBaseSmall: '12px',
+ fontSizeHeading1: '40px',
+ fontSizeHeading2: '36px',
+ fontSizeHeading3: '28px',
+ fontSizeHeading4: '24px',
+ fontSizeHeading5: '20px',
+ fontSizeHeading6: '16px',
+
+ // line heights
+ lineHeightBase: '24px',
+ lineHeightBaseSmall: '16px',
+ lineHeightHeading1: '48px',
+ lineHeightHeading2: '40px',
+ lineHeightHeading3: '32px',
+ lineHeightHeading4: '32px',
+ lineHeightHeading5: '24px',
+ lineHeightHeading6: '24px',
+
+ /* Spacing */
+ gridUnit: '4px',
+
+ /* Border */
+ borderRadius: '0',
+ borderWidth: '1px',
+ borderStyle: 'solid',
+
+ /* Shadow (for tooltip) */
+ boxShadow: '0 2px 4px 0 rgba(51, 51, 51, 0.3)',
+
+ /* Transition */
+ transitionDuration: '0.2s',
+ transitionTimingFunction: 'ease',
+ transitionDelay: '0',
+ /* Breakpoints */
+ breakpoints: [480, 768, 1000, 1272],
+
+ cssOverrides: {
+ Wax: {
+ MenuButton: css`
+ /* color: magenta;
+
+ > svg {
+ fill: indianred;
+ } */
+ `,
+ },
+ },
+};
+
+export default cokoTheme;