From 11626656e124dd6120d7f7f2628343aacbc43a52 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 12 Nov 2019 18:30:31 +0200
Subject: [PATCH] get basic coko-theme
---
editors/editoria/src/Editoria.js | 53 ++++++++-------
wax-prosemirror-themes/index.js | 1 +
wax-prosemirror-themes/package.json | 5 +-
.../src/coko-theme/index.js | 67 +++++++++++++++++++
.../{themes => src}/default-theme.css | 0
.../{themes => src}/editoria-theme.css | 0
.../themes/coko-theme/index.js | 67 +++++++++++++++++++
7 files changed, 166 insertions(+), 27 deletions(-)
create mode 100644 wax-prosemirror-themes/index.js
create mode 100644 wax-prosemirror-themes/src/coko-theme/index.js
rename wax-prosemirror-themes/{themes => src}/default-theme.css (100%)
rename wax-prosemirror-themes/{themes => src}/editoria-theme.css (100%)
create mode 100644 wax-prosemirror-themes/themes/coko-theme/index.js
diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js
index 062d88535..04eed035a 100644
--- a/editors/editoria/src/Editoria.js
+++ b/editors/editoria/src/Editoria.js
@@ -3,10 +3,11 @@ import styled, { createGlobalStyle } from "styled-components";
import { Wax } from "wax-prosemirror-core";
import { MainMenuBar, SideMenuBar } from "wax-prosemirror-components";
+import { ThemeProvider } from "styled-components";
import "wax-prosemirror-layouts/layouts/editoria-layout.css";
import "wax-prosemirror-layouts/vars/wax-editoria-vars.css";
-import "wax-prosemirror-themes/themes/editoria-theme.css";
+import { cokoTheme } from "wax-prosemirror-themes";
import { schema, keys, plugins, rules } from "./EditorConfig";
const options = {
@@ -54,30 +55,32 @@ const text = `<ul><li><p class="paragraph">this is the li content</p></li><li><p
class Editoria extends Component {
render() {
return (
- <React.Fragment>
- <GlobalStyle />
- <StyledWax
- options={options}
- autoFocus
- placeholder="Type Something..."
- theme="editoria"
- layout="editoria"
- fileUpload={file => renderImage(file)}
- debug
- value=""
- user={user}
- >
- {({ editor, view, ...props }) => (
- <React.Fragment>
- <MainMenuBar view={view} {...props} />
- <div className="wax-surface-container">
- <SideMenuBar view={view} {...props} />
- {editor}
- </div>
- </React.Fragment>
- )}
- </StyledWax>
- </React.Fragment>
+ <ThemeProvider theme={cokoTheme}>
+ <React.Fragment>
+ <GlobalStyle />
+ <StyledWax
+ options={options}
+ autoFocus
+ placeholder="Type Something..."
+ theme="editoria"
+ layout="editoria"
+ fileUpload={file => renderImage(file)}
+ debug
+ value=""
+ user={user}
+ >
+ {({ editor, view, ...props }) => (
+ <React.Fragment>
+ <MainMenuBar view={view} {...props} />
+ <div className="wax-surface-container">
+ <SideMenuBar view={view} {...props} />
+ {editor}
+ </div>
+ </React.Fragment>
+ )}
+ </StyledWax>
+ </React.Fragment>
+ </ThemeProvider>
);
}
}
diff --git a/wax-prosemirror-themes/index.js b/wax-prosemirror-themes/index.js
new file mode 100644
index 000000000..b1ec4b46b
--- /dev/null
+++ b/wax-prosemirror-themes/index.js
@@ -0,0 +1 @@
+export { default as cokoTheme } from "./src/coko-theme/index";
diff --git a/wax-prosemirror-themes/package.json b/wax-prosemirror-themes/package.json
index 1a625f3f6..5950199f2 100644
--- a/wax-prosemirror-themes/package.json
+++ b/wax-prosemirror-themes/package.json
@@ -4,8 +4,9 @@
"version": "0.0.2",
"description": "Wax prosemirror themes",
"license": "MIT",
- "main": "",
+ "main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
- }
+ },
+ "dependencies": {}
}
diff --git a/wax-prosemirror-themes/src/coko-theme/index.js b/wax-prosemirror-themes/src/coko-theme/index.js
new file mode 100644
index 000000000..724eeaaef
--- /dev/null
+++ b/wax-prosemirror-themes/src/coko-theme/index.js
@@ -0,0 +1,67 @@
+/* eslint-disable import/extensions */
+// import "typeface-fira-sans-condensed";
+// import "typeface-vollkorn";
+
+const cokoTheme = {
+ /* Colors */
+ colorBackground: "white",
+ colorPrimary: "#0B65CB",
+ colorSecondary: "#E7E7E7",
+ colorFurniture: "#CCC",
+ colorBorder: "#AAA",
+ colorBackgroundHue: "#F1F1F1",
+ colorSuccess: "#008800",
+ colorError: "#FF2D1A",
+ colorText: "#111",
+ colorTextReverse: "#FFF",
+ colorTextPlaceholder: "#595959",
+ colorWarning: "#ffc107",
+
+ /* Text variables */
+
+ // fonts
+ fontInterface: "'Fira Sans Condensed'",
+ fontHeading: "'Fira Sans Condensed'",
+ fontReading: "'Vollkorn'",
+ fontWriting: "'Cokourier Prime Sans'",
+
+ // font sizes
+ fontSizeBase: "16px",
+ fontSizeBaseSmall: "14px",
+ 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: "8px",
+
+ /* 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]
+};
+
+export default cokoTheme;
diff --git a/wax-prosemirror-themes/themes/default-theme.css b/wax-prosemirror-themes/src/default-theme.css
similarity index 100%
rename from wax-prosemirror-themes/themes/default-theme.css
rename to wax-prosemirror-themes/src/default-theme.css
diff --git a/wax-prosemirror-themes/themes/editoria-theme.css b/wax-prosemirror-themes/src/editoria-theme.css
similarity index 100%
rename from wax-prosemirror-themes/themes/editoria-theme.css
rename to wax-prosemirror-themes/src/editoria-theme.css
diff --git a/wax-prosemirror-themes/themes/coko-theme/index.js b/wax-prosemirror-themes/themes/coko-theme/index.js
new file mode 100644
index 000000000..724eeaaef
--- /dev/null
+++ b/wax-prosemirror-themes/themes/coko-theme/index.js
@@ -0,0 +1,67 @@
+/* eslint-disable import/extensions */
+// import "typeface-fira-sans-condensed";
+// import "typeface-vollkorn";
+
+const cokoTheme = {
+ /* Colors */
+ colorBackground: "white",
+ colorPrimary: "#0B65CB",
+ colorSecondary: "#E7E7E7",
+ colorFurniture: "#CCC",
+ colorBorder: "#AAA",
+ colorBackgroundHue: "#F1F1F1",
+ colorSuccess: "#008800",
+ colorError: "#FF2D1A",
+ colorText: "#111",
+ colorTextReverse: "#FFF",
+ colorTextPlaceholder: "#595959",
+ colorWarning: "#ffc107",
+
+ /* Text variables */
+
+ // fonts
+ fontInterface: "'Fira Sans Condensed'",
+ fontHeading: "'Fira Sans Condensed'",
+ fontReading: "'Vollkorn'",
+ fontWriting: "'Cokourier Prime Sans'",
+
+ // font sizes
+ fontSizeBase: "16px",
+ fontSizeBaseSmall: "14px",
+ 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: "8px",
+
+ /* 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]
+};
+
+export default cokoTheme;
--
GitLab