Added brand color CSS variable

no refs.
- added brand color CSS variable to iframe styles so that it's possible to use on UI elements

ghost/portal/src/components/PopupModal.js

@@ -211,8 +211,13 @@ export default class PopupModal extends React.Component {
     }
 
     renderFrameStyles() {
+        const styles = `
+            :root {
+                --brandcolor: ${this.context.brandColor}
+            }
+        ` + FrameStyle;
         return (
-            <style dangerouslySetInnerHTML={{__html: FrameStyle}} />
+            <style dangerouslySetInnerHTML={{__html: styles}} />
         );
     }
 

ghost/portal/src/components/common/InputField.js

@@ -15,9 +15,14 @@ export const InputFieldStyles = `
         margin-bottom: 12px;
         box-sizing: border-box;
     }
+
+    .gh-portal-input:focus {
+        border: 1px solid transparent;
+        box-shadow: 0 0 0 2px var(--brandcolor);
+    }
 `;
 
-function InputField({name, id, label, type, value, placeholder, disabled, onChange, style}) {
+function InputField({name, id, label, type, value, placeholder, disabled, onChange, brandColor}) {
     id = id || `input-${name}`;
     return (
         <>

ghost/portal/src/components/pages/AccountProfilePage.js

@@ -129,14 +129,16 @@ export default class AccountProfilePage extends React.Component {
                 value: this.state.name,
                 placeholder: 'Name...',
                 label: 'Name',
-                name: 'name'
+                name: 'name',
+                brandColor: this.context.brandColor
             },
             email: {
                 type: 'email',
                 value: this.state.email,
                 placeholder: 'Email...',
                 label: 'Email',
-                name: 'email'
+                name: 'email',
+                brandColor: this.context.brandColor
             }
         };
         const field = fields[fieldName];