Add in theme options

FlowFuse · Apr 14, 2022 · 7f6d841 · 7f6d841
1 parent f77dae2
commit 7f6d841
Show file tree

Hide file tree

Showing 14 changed files with 287 additions and 108 deletions.
diff --git a/README.md b/README.md
@@ -43,6 +43,16 @@ npm run build-docs
 
 The GitHub pages documentation is built into `/dist/docs` (defined in `vue.config.js`). It is configured as a subtree of the GitHub repo on the `gh-pages` branch.
 
+
+### Running Documentation
+
+```bash
+npm run serve
+```
+
+The documentation should then become available at `http://localhost:8080` (or the next available port)
+
+
 ## References
 
 Project structure inspired by: https://blog.logrocket.com/building-vue-3-component-library/
diff --git a/dist/forge-ui-components.css b/dist/forge-ui-components.css
@@ -29,7 +29,6 @@ h3 {
   margin-bottom: 6px;
   font-weight: bold; }
 code {
-  background-color: #F3F4F6;
   border-radius: 6px;
   border: 1px solid #E5E7EB;
   padding: 9px; }
@@ -44,7 +43,12 @@ code {
   font-size: 0.85rem;
   line-height: 20px;
   height: 32px;
-  position: relative; }
+  position: relative;
+  justify-content: center;
+  font-weight: bold;
+  height: auto;
+  padding: 8px 16px;
+  border: 0; }
 .ff-btn.ff-btn-icon {
     padding: 6px 9px; }
 .ff-btn.ff-btn-small {
@@ -57,29 +61,26 @@ code {
 .ff-btn:hover {
     cursor: pointer; }
 .ff-btn--primary {
-    background-color: #1E3A8A;
-    border: 1px solid #1E3A8A;
-    color: #F9FAFB; }
+    background-color: #BC3838;
+    color: white; }
 .ff-btn--primary:hover {
-      background-color: #4338CA; }
+      background-color: #AB1818; }
 .ff-btn--secondary {
-    background-color: white;
-    color: #1E3A8A;
-    border: 1px solid #1E3A8A; }
+    color: white;
+    background-color: #31959A; }
 .ff-btn--secondary:hover {
-      background-color: #4338CA;
-      border-color: #4338CA;
-      color: white; }
+      background-color: #397B7E; }
 .ff-btn--tertiary {
-    color: #1E3A8A; }
+    color: #31959A; }
 .ff-btn--tertiary:hover {
-      background-color: #4338CA;
+      background-color: #397B7E;
       color: white; }
 .ff-btn--danger {
-    color: #D12B2B;
-    border: 1px solid #D12B2B; }
+    color: white;
+    background-color: #D82525;
+    border: 1px solid #D82525; }
 .ff-btn--danger:hover {
-      background-color: #D12B2B;
+      background-color: #D82525;
       color: white; }
 .ff-btn .ff-btn--icon,
   .ff-btn .ff-btn--icon svg {
@@ -117,3 +118,41 @@ code {
   padding: 6px 9px;
   height: 32px;
   width: 100%; }
+.ff-input.ff-text-input:focus {
+    outline: none; }
+.ff-bg-light {
+  color: #1F2937;
+  background-color: #F9FAFB;
+  /* Core */
+  /* FlowForge Components */ }
+.ff-bg-light h1, .ff-bg-light h2, .ff-bg-light h3, .ff-bg-light h4, .ff-bg-light h5 {
+    color: #374151; }
+.ff-bg-light p {
+    color: #1F2937; }
+.ff-bg-light select {
+    background-color: #F9FAFB; }
+.ff-bg-light code {
+    background-color: #F3F4F6;
+    border-color: #E5E7EB; }
+.ff-bg-light .ff-input.ff-text-input {
+    background-color: white;
+    border-color: #D1D5DB; }
+.ff-bg-light .ff-input.ff-text-input:focus {
+      border-color: #31959A; }
+.ff-bg-dark {
+  color: #F9FAFB;
+  background-color: #1F2937;
+  /* Core */
+  /* FlowForge Components */ }
+.ff-bg-dark table td, .ff-bg-dark table th {
+    border-color: #6B7280; }
+.ff-bg-dark select {
+    background-color: #1F2937; }
+.ff-bg-dark code {
+    background-color: #111827;
+    border-color: #374151; }
+.ff-bg-dark .ff-input.ff-text-input {
+    background-color: #374151;
+    border-color: #111827; }
+.ff-bg-dark .ff-input.ff-text-input:focus {
+      border-color: #31959A; }
diff --git a/dist/forge-ui-components.js b/dist/forge-ui-components.js
@@ -5,6 +5,10 @@ var vue = require('vue');
 var script$1 = {
     name: 'ff-button',
     props: {
+        type: {
+            default: 'button', // "button" or "submit"
+            type: String
+        },
         kind: {
             default: 'primary',
             type: String // "primary", "secondary", "tertiary"
@@ -56,6 +60,7 @@ const _hoisted_3 = {
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createElementBlock("button", {
     class: vue.normalizeClass(["ff-btn", 'ff-btn--' + $props.kind + ($options.hasIcon ? ' ff-btn-icon' : '') + ($props.size === 'small' ? ' ff-btn-small' : '') + ($props.size === 'full-width' ? ' ff-btn-fwidth' : '')]),
+    type: "button",
     onClick: _cache[0] || (_cache[0] = $event => ($options.go()))
   }, [
     ($options.hasIconLeft)
@@ -111,13 +116,14 @@ var script = {
     emits: ['update:modelValue', 'input', 'blur', 'keyup']
 };
 
-const _hoisted_1 = ["type", "placeholder", "value"];
+const _hoisted_1 = ["type", "placeholder", "disabled", "value"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createElementBlock("input", {
     type: $props.password ? 'password' : 'text',
     class: "ff-input ff-text-input",
     placeholder: $props.placeholder,
+    disabled: $props.disabled,
     value: $props.modelValue,
     onChange: _cache[0] || (_cache[0] = $event => (_ctx.$emit('update:modelValue', $event.target.value))),
     onInput: _cache[1] || (_cache[1] = $event => (_ctx.$emit('update:modelValue', $event.target.value))),

diff --git a/dist/forge-ui-components.mjs b/dist/forge-ui-components.mjs
@@ -3,6 +3,10 @@ import { openBlock, createElementBlock, normalizeClass, renderSlot, createCommen
 var script$1 = {
     name: 'ff-button',
     props: {
+        type: {
+            default: 'button', // "button" or "submit"
+            type: String
+        },
         kind: {
             default: 'primary',
             type: String // "primary", "secondary", "tertiary"
@@ -54,6 +58,7 @@ const _hoisted_3 = {
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("button", {
     class: normalizeClass(["ff-btn", 'ff-btn--' + $props.kind + ($options.hasIcon ? ' ff-btn-icon' : '') + ($props.size === 'small' ? ' ff-btn-small' : '') + ($props.size === 'full-width' ? ' ff-btn-fwidth' : '')]),
+    type: "button",
     onClick: _cache[0] || (_cache[0] = $event => ($options.go()))
   }, [
     ($options.hasIconLeft)
@@ -109,13 +114,14 @@ var script = {
     emits: ['update:modelValue', 'input', 'blur', 'keyup']
 };
 
-const _hoisted_1 = ["type", "placeholder", "value"];
+const _hoisted_1 = ["type", "placeholder", "disabled", "value"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("input", {
     type: $props.password ? 'password' : 'text',
     class: "ff-input ff-text-input",
     placeholder: $props.placeholder,
+    disabled: $props.disabled,
     value: $props.modelValue,
     onChange: _cache[0] || (_cache[0] = $event => (_ctx.$emit('update:modelValue', $event.target.value))),
     onInput: _cache[1] || (_cache[1] = $event => (_ctx.$emit('update:modelValue', $event.target.value))),

diff --git a/docs/DesignLanguage.vue b/docs/DesignLanguage.vue
@@ -10,83 +10,92 @@
             </li>
         </ul>
     </nav>
-    <main>
-        <!-- <h1>Documentation</h1> -->
-        <div class="section" id="section-buttons">
-            <!-- <markdown-viewer :content="'# Hello World'"/> -->
-            <div>
-                <h1>Buttons</h1>
-                <h2 ref="ff-button"><pre>ff-button</pre></h2>
-                <h3>Properties:</h3>
-                <props-table :rows="groups[0].components[0].props"></props-table>
-                <h3>Slots:</h3>
-                <slots-table :rows="groups[0].components[0].slots"></slots-table>
-                <h3>Examples:</h3>
-                <div class="examples">
-                    <div class="example">
-                        <ff-button>Hello World</ff-button>
-                        <code>{{ groups[0].components[0].examples[0].code }}</code>
-                    </div>
-                    <div class="example">
-                        <ff-button kind="secondary">Hello World</ff-button>
-                        <code>{{ groups[0].components[0].examples[1].code }}</code>
-                    </div>
-                    <div class="example">
-                        <ff-button kind="tertiary">Hello World</ff-button>
-                        <code>{{ groups[0].components[0].examples[2].code }}</code>
-                    </div>
-                    <div class="example">
-                        <ff-button kind="danger">Hello World</ff-button>
-                        <code>{{ groups[0].components[0].examples[3].code }}</code>
-                    </div>
-                    <div class="example">
-                        <ff-button :disabled="true">Hello World</ff-button>
-                        <code>{{ groups[0].components[0].examples[4].code }}</code>
-                    </div>
-                    <div class="example">
-                        <ff-button kind="primary">
-                            <template v-slot:icon-left><PlusSmIcon /></template>
-                            Hello World
-                        </ff-button>
-                        <code>{{ groups[0].components[0].examples[5].code }}</code>
-                    </div>
-                    <div class="example">
-                        <ff-button kind="primary">
-                            <template v-slot:icon-right><PlusSmIcon /></template>
-                            Hello World
-                        </ff-button>
-                        <code>{{ groups[0].components[0].examples[6].code }}</code>
-                    </div>
-                    <div class="example">
-                        <ff-button kind="primary" size="small">
-                            <template v-slot:icon-left><PlusSmIcon /></template>
-                            Hello World
-                        </ff-button>
-                        <code>{{ groups[0].components[0].examples[7].code }}</code>
-                    </div>
-                    <div class="example">
-                        <ff-button kind="primary">
-                            <template v-slot:icon><PlusSmIcon /></template>
-                        </ff-button>
-                        <code>{{ groups[0].components[0].examples[8].code }}</code>
+    <main :class="{'ff-bg-light': theme === 'light', 'ff-bg-dark': theme === 'dark'}">
+        <!-- Theme Selection -->
+        <div class="theme-selection">
+            <label>Theme:</label>
+            <select v-model="theme">
+                <option value="light">Light</option>
+                <option value="dark">Dark</option>
+            </select>
+        </div>
+        <div class="container">
+            <div class="section" id="section-buttons">
+                <!-- <markdown-viewer :content="'# Hello World'"/> -->
+                <div>
+                    <h1>Buttons</h1>
+                    <h2 ref="ff-button"><pre>ff-button</pre></h2>
+                    <h3>Properties:</h3>
+                    <props-table :rows="groups[0].components[0].props"></props-table>
+                    <h3>Slots:</h3>
+                    <slots-table :rows="groups[0].components[0].slots"></slots-table>
+                    <h3>Examples:</h3>
+                    <div class="examples">
+                        <div class="example">
+                            <ff-button>Hello World</ff-button>
+                            <code>{{ groups[0].components[0].examples[0].code }}</code>
+                        </div>
+                        <div class="example">
+                            <ff-button kind="secondary">Hello World</ff-button>
+                            <code>{{ groups[0].components[0].examples[1].code }}</code>
+                        </div>
+                        <div class="example">
+                            <ff-button kind="tertiary">Hello World</ff-button>
+                            <code>{{ groups[0].components[0].examples[2].code }}</code>
+                        </div>
+                        <div class="example">
+                            <ff-button kind="danger">Hello World</ff-button>
+                            <code>{{ groups[0].components[0].examples[3].code }}</code>
+                        </div>
+                        <div class="example">
+                            <ff-button :disabled="true">Hello World</ff-button>
+                            <code>{{ groups[0].components[0].examples[4].code }}</code>
+                        </div>
+                        <div class="example">
+                            <ff-button kind="primary">
+                                <template v-slot:icon-left><PlusSmIcon /></template>
+                                Hello World
+                            </ff-button>
+                            <code>{{ groups[0].components[0].examples[5].code }}</code>
+                        </div>
+                        <div class="example">
+                            <ff-button kind="primary">
+                                <template v-slot:icon-right><PlusSmIcon /></template>
+                                Hello World
+                            </ff-button>
+                            <code>{{ groups[0].components[0].examples[6].code }}</code>
+                        </div>
+                        <div class="example">
+                            <ff-button kind="primary" size="small">
+                                <template v-slot:icon-left><PlusSmIcon /></template>
+                                Hello World
+                            </ff-button>
+                            <code>{{ groups[0].components[0].examples[7].code }}</code>
+                        </div>
+                        <div class="example">
+                            <ff-button kind="primary">
+                                <template v-slot:icon><PlusSmIcon /></template>
+                            </ff-button>
+                            <code>{{ groups[0].components[0].examples[8].code }}</code>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div>
-                <h1>Inputs</h1>
-                <h2 ref="ff-text-input"><pre>ff-text-input</pre></h2>
-                <h3>Properties:</h3>
-                <props-table :rows="groups[1].components[0].props"></props-table>
-                <h3>Examples:</h3>
-                <div class="examples">
-                    <div class="example">
-                        <ff-text-input placeholder="Insert something here..." v-model="models.textInput0"/>
-                        {{ models.textInput0 }}
-                        <code>{{ groups[1].components[0].examples[0].code }}</code>
-                    </div>
-                    <div class="example">
-                        <ff-text-input :password="true" placeholder="Password goes here..."/>
-                        <code>{{ groups[1].components[0].examples[1].code }}</code>
+                <div>
+                    <h1>Inputs</h1>
+                    <h2 ref="ff-text-input"><pre>ff-text-input</pre></h2>
+                    <h3>Properties:</h3>
+                    <props-table :rows="groups[1].components[0].props"></props-table>
+                    <h3>Examples:</h3>
+                    <div class="examples">
+                        <div class="example">
+                            <ff-text-input placeholder="Insert something here..." v-model="models.textInput0"/>
+                            {{ models.textInput0 }}
+                            <code>{{ groups[1].components[0].examples[0].code }}</code>
+                        </div>
+                        <div class="example">
+                            <ff-text-input :password="true" placeholder="Password goes here..."/>
+                            <code>{{ groups[1].components[0].examples[1].code }}</code>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -114,6 +123,7 @@ export default {
     },
     data () {
         return {
+            theme: 'light',
             models: {
                 textInput0: ''
             },

diff --git a/docs/index.scss b/docs/index.scss
@@ -23,11 +23,17 @@ nav {
     color: $ff-white;
 }
 
-main {
-    color: $ff-grey-800;
+.container {
     max-width: 968px;
 }
 
+.theme-selection {
+    position: fixed;
+    top: 0;
+    right: 0;
+    padding: $ff-unit-sm $ff-unit-md;
+}
+
 h1 {
     border-bottom-width: 1px;
 }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@flowforge/forge-ui-components",
-    "version": "0.1.2",
+    "version": "0.2.0",
     "description": "",
     "author": {
         "name": "FlowForge Inc."