Add FISE colors in slate styles

eea · Nov 23, 2021 · 2921654 · 2921654
1 parent 0b5a328
commit 2921654
Show file tree

Hide file tree

Showing 2 changed files with 136 additions and 0 deletions.
diff --git a/src/index.js b/src/index.js
@@ -12,6 +12,8 @@ import {
   RAZZLE_FRONTEND_PUBLISHED_AT,
 } from './constants/runtime';
 
+import './slate-styles.css';
+
 export default function applyConfig(config) {
   // Add here your project's configuration here by modifying `config` accordingly
   config = [installBlocks, installFiseFrontend].reduce(
@@ -68,5 +70,46 @@ export default function applyConfig(config) {
     ...config.editForms,
   };
 
+  config.settings.slate = config.settings.slate || {};
+  config.settings.slate.styleMenu = config.settings.slate.styleMenu || {};
+  config.settings.slate.styleMenu.inlineStyles = [
+    ...(config.settings.slate.styleMenu?.inlineStyles || []),
+    { cssClass: 'white-text', label: 'White text' },
+    // blue series
+    { cssClass: 'blue-powder-text', label: 'Blue powder text' },
+    { cssClass: 'blue-lightsteel-text', label: 'Blue lightsteel text' },
+    { cssClass: 'blue-cadet-text', label: 'Blue cadet text' },
+    { cssClass: 'blue-teal-text', label: 'Blue teal text' },
+    { cssClass: 'blue-darkslate-text', label: 'Blue darkslate text' },
+    // green series
+    {
+      cssClass: 'green-blanchedalmond-text',
+      label: 'Green blanchedalmond text',
+    },
+    { cssClass: 'green-tan-text', label: 'Green tan text' },
+    { cssClass: 'green-olivedrab-text', label: 'Green olivedrab text' },
+    { cssClass: 'light-green-text', label: 'Light green text' },
+    { cssClass: 'green-forest-text', label: 'Green forest text' },
+    { cssClass: 'green-darkslate-text', label: 'Green darkslate text' },
+
+    // army series
+    { cssClass: 'army-darkolivegreen-text', label: 'Army darkolivegreen text' },
+    { cssClass: 'army-yellowgreen-text', label: 'Army yellowgreen text' },
+    { cssClass: 'army-olivedrab-text', label: 'Army olivedrab text' },
+    { cssClass: 'army-moccasin-text', label: 'Army moccasin text' },
+    { cssClass: 'army-khaki-text', label: 'Army khaki text' },
+
+    { cssClass: 'vivid-green-text', label: 'Vivid green text' },
+    { cssClass: 'blue-text', label: 'Blue text' },
+    { cssClass: 'red-text', label: 'Red text' },
+    { cssClass: 'yellow-text', label: 'Yellow text' },
+    { cssClass: 'grey-text', label: 'Grey text' },
+  ];
+  // config.settings.slate.styleMenu.blockStyles = [
+  //   ...config.settings.slate.styleMenu.blockStyles,
+  //   { cssClass: 'green-block-text', label: 'Green Text' },
+  //   { cssClass: 'underline-block-text', label: 'Underline Text' },
+  // ];
+
   return config;
 }
diff --git a/src/slate-styles.css b/src/slate-styles.css
@@ -0,0 +1,93 @@
+.primary-big-text {
+  font-size: 45px;
+  line-height: 45px;
+}
+
+.medium-text {
+  font-size: 30px;
+  line-height: 30px;
+}
+
+.white-text {
+  color: #fff;
+}
+
+/* blue set */
+
+.blue-powder-text {
+  color: #bbdbec;
+}
+
+.blue-lightsteel-text {
+  color: #9dc6d4;
+}
+
+.blue-cadet-text {
+  color: #5a93aa;
+}
+
+.blue-teal-text {
+  color: #005d7b;
+}
+
+.blue-darkslate-text {
+  color: #003d53;
+}
+
+/* green set */
+.green-blanchedalmond-text {
+  color: #ebefc6;
+}
+
+.green-tan-text {
+  color: #bdd494;
+}
+
+.green-olivedrab-text {
+  color: #6bb535;
+}
+
+.green-forest-text {
+  color: #1e8339;
+}
+
+.green-darkslate-text {
+  color: #025e37;
+}
+
+/* army set */
+.army-darkolivegreen-text {
+  color: #464b0b;
+}
+
+.army-yellowgreen-text {
+  color: #b5c234;
+}
+
+.army-olivedrab-text {
+  color: #777b1a;
+}
+
+.army-moccasin-text {
+  color: #f4f1bc;
+}
+
+.army-khaki-text {
+  color: #e1e070;
+}
+
+.blue-text {
+  color: #0070ae;
+}
+
+.red-text {
+  color: #ed1834;
+}
+
+.yellow-text {
+  color: #f2a70e;
+}
+
+.grey-text {
+  color: #8d8d8d;
+}