option to set the token base styles #6

EnlighterJS · Apr 19, 2020 · 0e512c3 · 0e512c3
1 parent c703c82
commit 0e512c3
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 97 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,5 +1,9 @@
 ## Branch 2.X ##
 
+### 2.2.0 ###
+
+* Added: option to set the token base styles inlcuding font-size - feature requested [on GitHub](https://github.com/EnlighterJS/Plugin.ThemeCustomizer/issues/6)
+
 ### 2.1.0 ###
 
 * Added: `wp-skltn` component wrapper around the settings elements

diff --git a/dist/enlighterjs.customizer.min.js b/dist/enlighterjs.customizer.min.js
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "enlighterjs-theme-customizer",
     "description": "an open source syntax highlighter written in pure javascript",
-    "version": "2.1.0",
+    "version": "2.2.0",
     "private": true,
     "homepage": "https://enlighterjs.org",
     "author": {

diff --git a/src/customizer/selectors.js b/src/customizer/selectors.js
@@ -22,5 +22,7 @@ export const selectors = {
         codegroup: '.enlighter-t-${THEME_NAME}.enlighter-v-codegroup .enlighter-codegroup-switch .enlighter-btn'
     },
 
-    token: '.enlighter-t-${THEME_NAME} .enlighter-'
+    token: '.enlighter-t-${THEME_NAME} .enlighter-',
+
+    genericToken: '.enlighter-t-${THEME_NAME} .enlighter span'
 }
diff --git a/src/ui/views/token-generic.jsx b/src/ui/views/token-generic.jsx
@@ -11,10 +11,25 @@ import * as React from 'dom-magic';
 
 import {Token} from '../components/token.jsx';
 import {Container} from '../components/container.jsx';
+import {selectors} from '../../customizer/selectors';
+import {Group} from '../components/group.jsx';
+import {FontStyle} from '../elements/font-style.jsx';
+import {FontWeight} from '../elements/font-weight.jsx';
+import {FontColor} from '../elements/font-color.jsx';
+import {FontSize} from '../elements/font-size.jsx';
+import {BackgroundColor} from '../elements/bg-color.jsx';
 
 export function TokenGenericView(){
     return <Container className="ejs-customizer-token-generic">
 
+        <Group title="Token base style (applied to all tokens)">
+            <FontStyle selector={selectors.genericToken} />
+            <FontWeight selector={selectors.genericToken} />
+            <FontSize selector={selectors.genericToken} />
+            <FontColor selector={selectors.genericToken} />
+            <BackgroundColor selector={selectors.genericToken} />
+        </Group>
+
         <Token type="g0" name="Generic Symbols" />
         <Token type="g1" name="Brackets" />
 

diff --git a/src/ui/views/tokens.jsx b/src/ui/views/tokens.jsx