@appscode/design-system 1.0.43-alpha.6 → 1.0.43-alpha.63

package/layouts/_code-preview.scss

@@ -18,6 +18,10 @@
       .ac-html-preview {
         width: 100%;
 
+        i.is-block {
+          color: $ac-color-value;
+        }
+
         .ac-navbar-area {
           position: inherit;
         }
@@ -29,7 +33,7 @@
     }
 
     &.ac-bg-dark {
-      background-color: $ac-bg-dark;
+      background-color: $ac-color-heading;
     }
 
     .ac-html-preview {
@@ -54,13 +58,13 @@
 
       /* Handle */
       &::-webkit-scrollbar-thumb {
-        background: #8392a5;
+        background-color: $ac-gray-light;
         border-radius: 10px;
       }
 
       /* Handle on hover */
       &::-webkit-scrollbar-thumb:hover {
-        background: #8392a5;
+        background-color: $ac-gray-light;
       }
 
       .number {
@@ -91,7 +95,7 @@
 }
 
 .ac-code-preview-wrapper {
-  border: 1px solid #e5e8ea;
+  border: 1px solid $ac-white-light;
   border-radius: 4px;
 
   .ac-code-header {
@@ -113,7 +117,7 @@
     .component-header {
       display: flex;
       justify-content: space-between;
-      border-bottom: 1px solid #edf2f7;
+      border-bottom: 1px solid $ac-white-light;
       background-color: $ac-white;
 
       h3 {
@@ -121,7 +125,7 @@
         font-size: 16px;
         font-weight: 500;
         font-family: $ac-family-paragraph;
-        color: #333;
+        color: $ac-color-value;
       }
 
       .component-switch {
@@ -145,18 +149,21 @@
         z-index: 1;
         max-height: 500px;
         overflow-y: auto;
+
         .copy-button {
           position: absolute;
           right: 5px;
           top: 5px;
+
           &:hover {
             box-shadow: none;
           }
         }
+
         pre {
           margin: 0;
           border-radius: 4px;
-          font-size: 12px;
+          font-size: 14px;
 
           .token {
             &.tag {

package/main.scss

@@ -7,6 +7,7 @@
 
 // BASE
 @import "~assets/design-system/base/utilities/initial-variables";
+@import "~assets/design-system/base/utilities/dark-theme";
 @import "~assets/design-system/base/utilities/derived-variables";
 @import "~assets/design-system/base/utilities/typography";
 @import "~assets/design-system/base/utilities/default";
@@ -48,6 +49,7 @@
 @import "~assets/design-system/components/overview-info";
 @import "~assets/design-system/components/pricing-table";
 @import "~assets/design-system/components/table-of-content";
+@import "~assets/design-system/components/direct-deploy";
 @import "~assets/design-system/components/preview-modal";
 @import "~assets/design-system/components/wizard";
 @import "~assets/design-system/components/preloader";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.0.43-alpha.6",
+  "version": "1.0.43-alpha.63",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/plugins/theme.js

@@ -0,0 +1,142 @@
+export function HSLToHex(h, s, l) {
+  s /= 100;
+  l /= 100;
+
+  const c = (1 - Math.abs(2 * l - 1)) * s,
+    x = c * (1 - Math.abs(((h / 60) % 2) - 1)),
+    m = l - c / 2;
+
+  let r = 0,
+    g = 0,
+    b = 0;
+
+  if (0 <= h && h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (60 <= h && h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (120 <= h && h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (180 <= h && h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (240 <= h && h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else if (300 <= h && h < 360) {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  // Having obtained RGB, convert channels to hex
+  r = Math.round((r + m) * 255).toString(16);
+  g = Math.round((g + m) * 255).toString(16);
+  b = Math.round((b + m) * 255).toString(16);
+
+  // Prepend 0s, if necessary
+  if (r.length == 1) r = "0" + r;
+  if (g.length == 1) g = "0" + g;
+  if (b.length == 1) b = "0" + b;
+
+  return "#" + r + g + b;
+}
+export function HexToHSL(H) {
+  // Convert hex to RGB first
+  let r = 0,
+    g = 0,
+    b = 0;
+  if (H.length == 4) {
+    r = parseInt("0x" + H[1] + H[1]);
+    g = parseInt("0x" + H[2] + H[2]);
+    b = parseInt("0x" + H[3] + H[3]);
+  } else if (H.length == 7) {
+    r = parseInt("0x" + H[1] + H[2]);
+    g = parseInt("0x" + H[3] + H[4]);
+    b = parseInt("0x" + H[5] + H[6]);
+  }
+  // Then to HSL
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const cmin = Math.min(r, g, b),
+    cmax = Math.max(r, g, b),
+    delta = cmax - cmin;
+  let h = 0,
+    s = 0,
+    l = 0;
+
+  if (delta == 0) h = 0;
+  else if (cmax == r) h = ((g - b) / delta) % 6;
+  else if (cmax == g) h = (b - r) / delta + 2;
+  else h = (r - g) / delta + 4;
+
+  h = Math.round(h * 60);
+
+  if (h < 0) h += 360;
+
+  l = (cmax + cmin) / 2;
+  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  s = +(s * 100).toFixed(1);
+  l = +(l * 100).toFixed(1);
+
+  return {
+    hue: `${h}`,
+    saturation: `${s}%`,
+    lightness: `${l}%`,
+  };
+}
+export function getThemeHSL() {
+  const hue = getComputedStyle(document.documentElement).getPropertyValue(
+    "--hsl-hue"
+  );
+  const saturation = getComputedStyle(
+    document.documentElement
+  ).getPropertyValue("--hsl-saturation");
+  const lightness = getComputedStyle(
+    document.documentElement
+  ).getPropertyValue("--hsl-lightness");
+
+  return {
+    hue,
+    saturation,
+    lightness,
+  };
+}
+export function setThemeHSL(h, s, l) {
+  document.documentElement.style.setProperty("--hsl-hue", h);
+  document.documentElement.style.setProperty("--hsl-saturation", s);
+  document.documentElement.style.setProperty("--hsl-lightness", l);
+}
+export function setFontHSL(h, s, l) {
+document.documentElement.style.setProperty("--font-hsl-hue", h);
+document.documentElement.style.setProperty("--font-hsl-saturation", s);
+document.documentElement.style.setProperty("--font-hsl-lightness", l);
+}
+export function getFontHSL() {
+  const hue = getComputedStyle(document.documentElement).getPropertyValue(
+    "--font-hsl-hue"
+  );
+  const saturation = getComputedStyle(
+    document.documentElement
+  ).getPropertyValue("--font-hsl-saturation");
+  const lightness = getComputedStyle(
+    document.documentElement
+  ).getPropertyValue("--font-hsl-lightness");
+
+  return {
+    hue,
+    saturation,
+    lightness,
+  };
+}
+export const loaderLightThemePrimaryColor = "#f5f7f9";
+export const loaderDarkThemePrimaryColor = "#2e323c";
+export const loaderLightThemeSecondaryColor = "#ecebeb";
+export const loaderDarkThemeSecondaryColor = "#21272e";

package/plugins/vue-toaster.js

@@ -2,9 +2,9 @@ module.exports = {
   position: "top-center",
   theme: "toasted-primary",
   iconPack: "fontawesome",
-  className: "ac-toasted",
+  className: "ac-toast",
   action: {
-    text: "Close",
+    icon: "close",
     class: "ac-toast-action",
     onClick: (e, toastObject) => {
       toastObject.goAway(0);
@@ -26,7 +26,7 @@ module.exports = {
         icon: "fa-check",
         duration: 2500,
         type: "success",
-        className: "ac-toasted is-success",
+        className: "ac-toast is-success",
       },
     },
     {
@@ -42,7 +42,7 @@ module.exports = {
       options: {
         icon: "fa-warning",
         type: "error",
-        className: "ac-toasted is-error",
+        className: "ac-toast is-error",
       },
     },
     {
@@ -57,7 +57,7 @@ module.exports = {
       options: {
         icon: "fa-info",
         type: "info",
-        className: "ac-toasted is-info",
+        className: "ac-toast is-info",
       },
     },
     {
@@ -74,7 +74,7 @@ module.exports = {
       options: {
         icon: "fa-warning",
         type: "error",
-        className: "ac-toasted is-warning",
+        className: "ac-toast is-warning",
       },
     },
   ],

package/vue-components/v2/card/PaymentCards.vue

@@ -5,8 +5,8 @@
       <content-loader
         :height="235"
         :speed="2"
-        :primary-color="'#f3f3fa'"
-        :secondary-color="'#ffffff'"
+        :primaryColor="primaryColor"
+        :secondaryColor="secondaryColor"
       />
     </div>
     <!-- loader end -->
@@ -20,6 +20,7 @@
 </template>
 <script>
 import { ContentLoader } from "vue-content-loader";
+import {loaderLightThemePrimaryColor, loaderDarkThemePrimaryColor, loaderLightThemeSecondaryColor, loaderDarkThemeSecondaryColor} from "@appscode/design-system/plugins/theme";
 
 export default {
   components: {
@@ -31,5 +32,13 @@ export default {
       default: false,
     },
   },
+  computed: {
+    primaryColor() {
+      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemePrimaryColor : loaderLightThemePrimaryColor;
+    },
+    secondaryColor() {
+      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemeSecondaryColor : loaderLightThemeSecondaryColor;
+    }  
+  }
 };
 </script>

package/vue-components/v2/editor/Editor.vue

@@ -15,10 +15,11 @@
       :language="language"
       :options="{
         minimap: {
-          enabled: calcShowMinimap,
+          enabled: calcShowMinimap
         },
+        theme: theme,
         readOnly: readOnly,
-        scrollBeyondLastLine: false,
+        scrollBeyondLastLine: false
       }"
     />
     <monaco-editor
@@ -29,10 +30,11 @@
       :language="language"
       :options="{
         minimap: {
-          enabled: calcShowMinimap,
+          enabled: calcShowMinimap
         },
+        theme: theme,
         readOnly: true,
-        scrollBeyondLastLine: false,
+        scrollBeyondLastLine: false
       }"
       :original="originalEditorContent"
       :diff-editor="true"
@@ -45,39 +47,43 @@ export default {
   props: {
     value: {
       type: String,
-      default: "",
+      default: ""
     },
     originalValue: {
       type: String,
-      default: "",
+      default: ""
     },
     readOnly: {
       type: Boolean,
-      default: false,
+      default: false
     },
     language: {
       type: String,
-      default: "yaml",
+      default: "yaml"
     },
     showMinimap: {
       type: Boolean,
-      default: true,
+      default: true
     },
     editorHeight: {
       type: Number,
-      default: 40,
+      default: 40
     },
+    editorTheme: {
+      type: String,
+      default: ""
+    }
   },
   components: {
     EditorTabs: () => import("../tabs/EditorTabs.vue"),
-    MonacoEditor: () => import("vue-monaco"),
+    MonacoEditor: () => import("vue-monaco")
   },
 
   data() {
     return {
       activeTab: "edit",
       editorContent: "",
-      originalEditorContent: "",
+      originalEditorContent: ""
     };
   },
 
@@ -86,6 +92,14 @@ export default {
       const noOfLines = this.editorContent.split("\n").length;
       return this.showMinimap && noOfLines * 2 > this.editorHeight;
     },
+    theme() {
+      return (
+        this.editorTheme ||
+        (document.documentElement.classList.contains("is-dark-theme")
+          ? "vs-dark"
+          : "vs")
+      );
+    }
   },
 
   watch: {
@@ -95,7 +109,7 @@ export default {
         if (this.editorContent !== n) {
           this.editorContent = n;
         }
-      },
+      }
     },
     originalValue: {
       immediate: true,
@@ -103,8 +117,8 @@ export default {
         if (this.originalEditorContent !== n) {
           this.originalEditorContent = n;
         }
-      },
-    },
+      }
+    }
   },
 
   methods: {
@@ -114,7 +128,7 @@ export default {
       editor.onDidBlurEditorText(() => {
         this.$emit("input", this.editorContent);
       });
-    },
-  },
+    }
+  }
 };
 </script>

package/vue-components/v2/navbar/Appdrawer.vue

@@ -1,10 +1,13 @@
 <template>
-  <div class="app-drawer-wrapper d-table-cell">
-    <div class="drawer-icon">
+  <div class="app-drawer-wrapper is-flex">
+    <div
+      class="drawer-icon  is-flex is-justify-content-center is-align-items-center"
+    >
       <svg
         class="gb_We"
         focusable="false"
         viewBox="0 0 24 24"
+        style="width: 22px;margin-top: 2px;"
         :style="{ fill: 'white' }"
       >
         <path
@@ -20,16 +23,14 @@
             <article class="media">
               <figure class="media-left">
                 <p class="image">
-                  <img
-                    :src="app.icon_url"
-                  />
+                  <img :src="app.icon_url" />
                 </p>
               </figure>
               <div class="media-content">
                 <div class="content">
                   <p>
-                    <strong>{{app.title}}</strong>
-                    <span>{{app.sub_title}}</span>
+                    <strong>{{ app.title }}</strong>
+                    <span>{{ app.sub_title }}</span>
                   </p>
                 </div>
               </div>
@@ -50,7 +51,7 @@ export default {
     }
   },
   components: {
-    NavbarItemContent: () => import("./NavbarItemContent.vue"),
-  },
+    NavbarItemContent: () => import("./NavbarItemContent.vue")
+  }
 };
 </script>

package/vue-components/v2/navbar/ThemeMode.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <button
+      v-if="themeMode"
+      class="button ac-nav-button"
+      style="color: #ffffff; font-size: 15px;"
+      @click="toggleTheme"
+      :title="themeModeIconTooltip"
+    >
+      <i :class="`fa ${themeModeIconClass}`" />
+    </button>
+    <div class="ac-menu-content theme-choice">
+      <ul class="is-flex is-flex-direction-row is-justify-content-space-around">
+        <li class="is-active"><i class="fa fa-moon-o"></i></li>
+        <li><i class="fa fa-desktop"></i></li>
+        <li><i class="fa fa-sun-o"></i></li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      themeMode: ""
+    };
+  },
+
+  computed: {
+    // to set icon class for theme mode
+    themeModeIconClass() {
+      if (this.themeMode === "system") {
+        return "fa-desktop";
+      } else if (this.themeMode === "light") {
+        return "fa-sun-o";
+      } else if (this.themeMode === "dark") {
+        return "fa-moon-o";
+      }
+    },
+
+    // to set icon tooltip for theme mode
+    themeModeIconTooltip() {
+      if (this.themeMode === "system") {
+        return "System theme";
+      } else if (this.themeMode === "light") {
+        return "Light theme";
+      } else if (this.themeMode === "dark") {
+        return "Dark theme";
+      }
+    }
+  },
+
+  mounted() {
+    // get theme mode from localStorage or set default one
+    this.themeMode = localStorage.getItem("themeMode") || "light";
+  },
+
+  destroyed() {
+    this.removeColorSchemeEventListener();
+  },
+
+  watch: {
+    themeMode: {
+      handler(n) {
+        this.onThemeModeChange(n);
+      }
+    }
+  },
+
+  methods: {
+    // handle theme mode button click
+    toggleTheme() {
+      if (this.themeMode === "light") this.themeMode = "dark";
+      else if (this.themeMode === "dark") this.themeMode = "system";
+      else if (this.themeMode === "system") this.themeMode = "light";
+    },
+
+    // triggered when theme mode is updated
+    onThemeModeChange(n) {
+      localStorage.setItem("themeMode", n);
+
+      let theme = n;
+      if (n === "system") {
+        const isDarkMode =
+          window.matchMedia &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches;
+        this.addColorSchemeEventListener();
+        theme = isDarkMode ? "dark" : "light";
+      } else {
+        this.removeColorSchemeEventListener();
+      }
+      this.$emit("set:theme", theme);
+      this.handleDarkThemeClass(theme);
+    },
+
+    // add proper css class to update the ui theme
+    handleDarkThemeClass(currentTheme) {
+      if (currentTheme === "light") {
+        document.documentElement.classList.remove("is-dark-theme");
+      } else {
+        document.documentElement.classList.add("is-dark-theme");
+      }
+    },
+
+    // add system theme listener event
+    addColorSchemeEventListener() {
+      window
+        .matchMedia("(prefers-color-scheme: dark)")
+        .addEventListener("change", this.handleSystemThemeChange);
+    },
+
+    // remove system theme listener event
+    removeColorSchemeEventListener() {
+      window
+        .matchMedia("(prefers-color-scheme: dark)")
+        .removeEventListener("change", this.handleSystemThemeChange);
+    },
+
+    handleSystemThemeChange() {
+      this.onThemeModeChange(this.themeMode);
+    }
+  }
+};
+</script>

package/vue-components/v2/preloader/Preloader.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="is-flex is-justify-content-center is-align-items-center is-flex-direction-column"
+    class="is-flex is-justify-content-center is-align-items-center is-flex-direction-column ac-preloader"
     style="height: calc(100vh - 200px);"
   >
     <span v-if="showSpinner" class="spinner"></span>
@@ -15,12 +15,12 @@ export default {
   props: {
     showSpinner: {
       type: Boolean,
-      default: true,
+      default: true
     },
     message: {
       type: String,
-      default: "Fetching! Please wait for sometime...",
-    },
-  },
+      default: "Fetching! Please wait for sometime..."
+    }
+  }
 };
 </script>

package/vue-components/v2/table/table-cell/CellValue.vue

@@ -1,6 +1,7 @@
 <template>
   <div v-if="isLoaderActive" ref="cellLoaderDiv" :style="{ maxWidth: '300px' }">
-    <content-loader :height="10" :width="computedCellWidth || 300" />
+    <content-loader :height="10" :width="computedCellWidth || 300" :primaryColor="primaryColor"
+    :secondaryColor="secondaryColor" />
   </div>
   <div v-else class="haha" ref="cellDiv">
     <object-cell
@@ -24,6 +25,8 @@
 </template>
 
 <script>
+import {loaderLightThemePrimaryColor, loaderDarkThemePrimaryColor, loaderLightThemeSecondaryColor, loaderDarkThemeSecondaryColor} from "@appscode/design-system/plugins/theme";
+
 export default {
   props: {
     isLoaderActive: {
@@ -56,6 +59,12 @@ export default {
     maxCharacterLength() {
       return Math.ceil(this.computedCellWidth / 8);
     },
+    primaryColor() {
+      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemePrimaryColor : loaderLightThemePrimaryColor;
+    },
+    secondaryColor() {
+      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemeSecondaryColor : loaderLightThemeSecondaryColor;
+    }
   },
 
   data() {

package/vue-components/v3/dropdown/DropdownMenu.vue

@@ -57,9 +57,9 @@ export default defineComponent({
 
     // attach click event listener on window, and close the dropdown
     function deactivateDropdown(e: Event) {
-      e.preventDefault();
       const { target } = e;
       if (
+        isDropdownActive.value &&
         dropdown.value &&
         dropdown.value !== target &&
         !dropdown.value.contains(target as Node)