Add styling css methods

packages/common/utils.js

@@ -9,7 +9,8 @@ export function getThemeCSS() {
             --vpu-primary-text-color: var(--vpu-override-primary-text-color, #fff);
             --vpu-secondary-bg-color: var(--vpu-override-secondary-bg-color, #6c757d);
             --vpu-secondary-text-color: var(--vpu-override-secondary-text-color, #fff);
-            --vpu-info-bg-color: var(--vpu-override-info-bg-color, #17a2b8);
+//            --vpu-info-bg-color: var(--vpu-override-info-bg-color, #17a2b8);
+            --vpu-info-bg-color: var(--vpu-override-info-bg-color, #245b78);
             --vpu-info-text-color: var(--vpu-override-info-text-color, #fff);
             --vpu-success-bg-color: var(--vpu-override-success-bg-color, #28a745);
             --vpu-success-text-color: var(--vpu-override-success-text-color, #fff);
@@ -26,6 +27,104 @@ export function getThemeCSS() {
     `;
 }
 
+export function getGeneralCSS() {
+    // language=css
+    return css`
+        code {
+            background-color: var(--vpu-light);
+            color: var(--vpu-danger-bg-color);
+            font-size: 0.875em;
+            font-weight: normal;
+            padding: 0.25em 0.5em 0.25em;
+        }
+
+        .field:not(:last-child) {
+            margin-bottom: 0.75rem;
+        }
+
+        .field.has-addons {
+            display: flex;
+            justify-content: flex-start;
+        }
+
+        .input, .textarea, .select select {
+            border-radius: var(--vpu-border-radius);
+            padding-bottom: calc(.375em - 1px);
+            padding-left: calc(.625em - 1px);
+            padding-right: calc(.625em - 1px);
+            padding-top: calc(.375em - 1px);
+        }
+    `;
+}
+
+export function getNotificationCSS() {
+    // language=css
+    return css`
+        .notification {
+            background-color: var(--vpu-light);
+            padding: 1.25rem 2.5rem 1.25rem 1.5rem;
+            position: relative;
+            border-radius: var(--vpu-border-radius);
+        }
+
+        .notification a:not(.button):not(.dropdown-item) {
+            color: currentColor;
+            text-decoration: underline;
+        }
+
+        .notification strong {
+            color: currentColor;
+        }
+
+        .notification code,
+        .notification pre {
+            color: var(--vpu-light);
+            background: var(--vpu-muted-text);
+        }
+
+        .notification pre code {
+            background: transparent;
+        }
+
+        .notification > .delete {
+            position: absolute;
+            right: 0.5rem;
+            top: 0.5rem;
+        }
+
+        .notification .title,
+        .notification .subtitle,
+        .notification .content {
+            color: currentColor;
+        }
+
+        .notification.is-primary {
+            background-color: var(--vpu-primary-bg-color);
+            color: var(--vpu-primary-text-color);
+        }
+
+        .notification.is-info {
+            background-color: var(--vpu-info-bg-color);
+            color: var(--vpu-info-text-color);
+        }
+
+        .notification.is-success {
+            background-color: var(--vpu-success-bg-color);
+            color: var(--vpu-success-text-color);
+        }
+
+        .notification.is-warning {
+            background-color: var(--vpu-warning-bg-color);
+            color: var(--vpu-warning-text-color);
+        }
+
+        .notification.is-danger {
+            background-color: var(--vpu-danger-bg-color);
+            color: var(--vpu-danger-text-color);
+        }
+    `;
+}
+
 /**
  * Parses a link header
  *