@appscode/design-system 2.0.58 → 2.0.60

package/package.json

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

package/plugins/theme.js

@@ -95,11 +95,8 @@ export function HexToHSL(H) {
 export function getThemeHSL() {
   const themeElement = document.querySelector(":root");
   const hue = getComputedStyle(themeElement).getPropertyValue("--primary-hue");
-  const saturation = getComputedStyle(themeElement).getPropertyValue(
-    "--primary-saturation"
-  );
-  const lightness =
-    getComputedStyle(themeElement).getPropertyValue("--primary-light");
+  const saturation = getComputedStyle(themeElement).getPropertyValue("--primary-saturation");
+  const lightness = getComputedStyle(themeElement).getPropertyValue("--primary-light");
 
   return {
     hue,

package/plugins/time-convert.js

@@ -1,23 +1,19 @@
 import moment from "moment";
 import { useNow, useThrottleFn } from "@vueuse/core";
 
-const getTime = option => {
+const getTime = (option) => {
   if (parseInt(option.time, 10) < 0 || !option.time) {
     return undefined;
   }
   let time = option.time;
 
   // moment(option.time).valueOf('x') needs to convert pharmer's api date to epoch time
-  time = moment(option.time).valueOf("x")
-    ? moment(option.time).valueOf("x")
-    : time * 1000;
+  time = moment(option.time).valueOf("x") ? moment(option.time).valueOf("x") : time * 1000;
 
   return moment(time).format("MMM DD YYYY, h:mm A");
 };
-const getDayDifferences = options => {
-  const past = moment(options.past).isValid()
-    ? moment(options.past).valueOf("x") / 1000
-    : options.past;
+const getDayDifferences = (options) => {
+  const past = moment(options.past).isValid() ? moment(options.past).valueOf("x") / 1000 : options.past;
   const now = Date.now() / 1000;
   const diff = now - past;
   if (parseInt(options.past, 10) > 10) {
@@ -45,5 +41,5 @@ const getDayDifferences = options => {
 export default {
   getTime,
   // formatMoment,
-  getDayDifferences
+  getDayDifferences,
 };

package/plugins/vue-toaster.js

@@ -34,7 +34,8 @@ module.exports = {
       message: (payload) => {
         if (payload) {
           if (typeof payload === "string") return payload;
-          else if (payload.response && payload.response.data && payload.response.data.message) return payload.response.data.message;
+          else if (payload.response && payload.response.data && payload.response.data.message)
+            return payload.response.data.message;
           else if (payload.message) return payload.message;
           else return "Something Went Wrong";
         } else return "Something Went Wrong";

package/vue-components/plugins/time-convert.js

@@ -8,16 +8,12 @@ const getTime = (option) => {
   let time = option.time;
 
   // moment(option.time).valueOf('x') needs to convert pharmer's api date to epoch time
-  time = moment(option.time).valueOf("x")
-    ? moment(option.time).valueOf("x")
-    : time * 1000;
+  time = moment(option.time).valueOf("x") ? moment(option.time).valueOf("x") : time * 1000;
 
   return moment(time).format("MMM DD YYYY, h:mm A");
 };
 const getDayDifferences = (options) => {
-  const past = moment(options.past).isValid()
-    ? moment(options.past).valueOf("x") / 1000
-    : options.past;
+  const past = moment(options.past).isValid() ? moment(options.past).valueOf("x") / 1000 : options.past;
   const now = Date.now() / 1000;
   const diff = now - past;
   if (parseInt(options.past, 10) > 10) {

package/vue-components/styles/base/utilities/_colors.scss

@@ -4,7 +4,7 @@
 
 // white and black
 $white-100: hsl(0, 0%, 100%);
-$black-100: hsl(0, 0%, 0%);
+$gray-100: hsl(0, 0%, 0%);
 
 // primary color guides
 $primary-hue: var(--primary-hue);
@@ -16,8 +16,8 @@ $primary-5: hsl($primary-hue, $primary-saturation, 5%);
 $primary-10: hsl($primary-hue, $primary-saturation, 10%);
 $primary-20: hsl($primary-hue, $primary-saturation, 20%);
 $primary-30: hsl($primary-hue, $primary-saturation, 30%);
-$primary-40: hsl($primary-hue, $primary-saturation, 40%);
 $ac-primary: hsl($primary-hue, $primary-saturation, $primary-light);
+$primary-40: hsl($primary-hue, $primary-saturation, 40%);
 $primary-50: hsl($primary-hue, $primary-saturation, 50%);
 $primary-60: hsl($primary-hue, $primary-saturation, 60%);
 $primary-70: hsl($primary-hue, $primary-saturation, 70%);
@@ -60,11 +60,7 @@ $color-border: hsl($secondary-hue, 10%, 90%);
 $color-border-dark: hsl($secondary-hue, 10%, 80%);
 
 // tweak sidebar bg color. update value (--sidebar-light)
-$color-sidebar: hsl(
-  $primary-hue,
-  $primary-saturation,
-  var(--sidebar-light, 5%)
-);
+$color-sidebar: hsl($primary-hue, $primary-saturation, var(--sidebar-light, 5%));
 
 // green color guides
 $green-hue: 141;
@@ -157,32 +153,30 @@ $red-95: hsl($red-hue, $red-saturation, 95%);
 $red-97: hsl($red-hue, $red-saturation, 97%);
 
 // black color guides
-$black-hue: 0;
-$black-saturation: 0%;
-$black-5: hsl($black-hue, $black-saturation, 5%);
-$black-10: hsl($black-hue, $black-saturation, 10%);
-$black-20: hsl($black-hue, $black-saturation, 20%);
-$black-30: hsl($black-hue, $black-saturation, 30%);
-$black-40: hsl($black-hue, $black-saturation, 40%);
-$black-50: hsl($black-hue, $black-saturation, 50%);
-$gray: hsl($black-hue, $black-saturation, 50%);
-$black-60: hsl($black-hue, $black-saturation, 60%);
-$black-70: hsl($black-hue, $black-saturation, 70%);
-$black-80: hsl($black-hue, $black-saturation, 80%);
-$black-90: hsl($black-hue, $black-saturation, 90%);
-$black-93: hsl($black-hue, $black-saturation, 93%);
-$black-95: hsl($black-hue, $black-saturation, 95%);
-$black-97: hsl($black-hue, $black-saturation, 97%);
+$gray-hue: 0;
+$gray-saturation: 0%;
+$gray-5: hsl($gray-hue, $gray-saturation, 5%);
+$gray-10: hsl($gray-hue, $gray-saturation, 10%);
+$gray-20: hsl($gray-hue, $gray-saturation, 20%);
+$gray-30: hsl($gray-hue, $gray-saturation, 30%);
+$gray-40: hsl($gray-hue, $gray-saturation, 40%);
+$gray-50: hsl($gray-hue, $gray-saturation, 50%);
+$gray: hsl($gray-hue, $gray-saturation, 50%);
+$gray-60: hsl($gray-hue, $gray-saturation, 60%);
+$gray-70: hsl($gray-hue, $gray-saturation, 70%);
+$gray-80: hsl($gray-hue, $gray-saturation, 80%);
+$gray-90: hsl($gray-hue, $gray-saturation, 90%);
+$gray-93: hsl($gray-hue, $gray-saturation, 93%);
+$gray-95: hsl($gray-hue, $gray-saturation, 95%);
+$gray-97: hsl($gray-hue, $gray-saturation, 97%);
 
 // Box Shadow
 $ac-shadow-1: 0 1px 4px rgba(26, 80, 151, 0.16);
 $ac-shadow-2: 0px 8px 57px rgba(0, 0, 0, 0.16);
-$ac-shadow-3: 0 3px 4px 0 rgba(0, 0, 0, 0.18),
-  0 3px 3px -2px rgba(0, 0, 0, 0.16), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
+$ac-shadow-3: 0 3px 4px 0 rgba(0, 0, 0, 0.18), 0 3px 3px -2px rgba(0, 0, 0, 0.16), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
 
 $shadow-sm: 0 1px 4px rgba(26, 80, 151, 0.16);
 $shadow-xl: 0px 8px 57px rgba(0, 0, 0, 0.16);
-$shadow-lg: 0 3px 4px 0 rgba(0, 0, 0, 0.18), 0 3px 3px -2px rgba(0, 0, 0, 0.16),
-  0 1px 6px 0 rgba(0, 0, 0, 0.12);
+$shadow-lg: 0 3px 4px 0 rgba(0, 0, 0, 0.18), 0 3px 3px -2px rgba(0, 0, 0, 0.16), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
 
 // @import "../../theme/appscode";

package/vue-components/styles/base/utilities/_generate-color-classes.scss

@@ -12,242 +12,50 @@
 }
 
 // for primary classes
-@include generate-color-classes(
-  "text",
-  "primary",
-  $primary-hue,
-  $primary-saturation,
-  10,
-  90,
-  10
-);
-
-@include generate-color-classes(
-  "bg",
-  "primary",
-  $primary-hue,
-  $primary-saturation,
-  10,
-  90,
-  10
-);
-
-@include generate-color-classes(
-  "text",
-  "primary",
-  $primary-hue,
-  $primary-saturation,
-  5,
-  5,
-  1
-);
-
-@include generate-color-classes(
-  "bg",
-  "primary",
-  $primary-hue,
-  $primary-saturation,
-  5,
-  5,
-  1
-);
-
-@include generate-color-classes(
-  "text",
-  "primary",
-  $primary-hue,
-  $primary-saturation,
-  93,
-  97,
-  2
-);
-
-@include generate-color-classes(
-  "bg",
-  "primary",
-  $primary-hue,
-  $primary-saturation,
-  93,
-  97,
-  2
-);
+@include generate-color-classes("text", "primary", $primary-hue, $primary-saturation, 10, 90, 10);
+
+@include generate-color-classes("bg", "primary", $primary-hue, $primary-saturation, 10, 90, 10);
+
+@include generate-color-classes("text", "primary", $primary-hue, $primary-saturation, 5, 5, 1);
+
+@include generate-color-classes("bg", "primary", $primary-hue, $primary-saturation, 5, 5, 1);
+
+@include generate-color-classes("text", "primary", $primary-hue, $primary-saturation, 93, 97, 2);
+
+@include generate-color-classes("bg", "primary", $primary-hue, $primary-saturation, 93, 97, 2);
 
 // for green classes
-@include generate-color-classes(
-  "text",
-  "green",
-  $green-hue,
-  $green-saturation,
-  10,
-  90,
-  10
-);
-@include generate-color-classes(
-  "bg",
-  "green",
-  $green-hue,
-  $green-saturation,
-  10,
-  90,
-  10
-);
-
-@include generate-color-classes(
-  "text",
-  "green",
-  $green-hue,
-  $green-saturation,
-  5,
-  5,
-  1
-);
-
-@include generate-color-classes(
-  "bg",
-  "green",
-  $green-hue,
-  $green-saturation,
-  5,
-  5,
-  1
-);
-
-@include generate-color-classes(
-  "text",
-  "green",
-  $green-hue,
-  $green-saturation,
-  93,
-  97,
-  2
-);
-
-@include generate-color-classes(
-  "bg",
-  "green",
-  $green-hue,
-  $green-saturation,
-  93,
-  97,
-  2
-);
+@include generate-color-classes("text", "green", $green-hue, $green-saturation, 10, 90, 10);
+@include generate-color-classes("bg", "green", $green-hue, $green-saturation, 10, 90, 10);
+
+@include generate-color-classes("text", "green", $green-hue, $green-saturation, 5, 5, 1);
+
+@include generate-color-classes("bg", "green", $green-hue, $green-saturation, 5, 5, 1);
+
+@include generate-color-classes("text", "green", $green-hue, $green-saturation, 93, 97, 2);
+
+@include generate-color-classes("bg", "green", $green-hue, $green-saturation, 93, 97, 2);
 
 // for yellow classes
-@include generate-color-classes(
-  "text",
-  "yellow",
-  $yellow-hue,
-  $yellow-saturation,
-  10,
-  90,
-  10
-);
-@include generate-color-classes(
-  "bg",
-  "yellow",
-  $yellow-hue,
-  $yellow-saturation,
-  10,
-  90,
-  10
-);
-
-@include generate-color-classes(
-  "text",
-  "yellow",
-  $yellow-hue,
-  $yellow-saturation,
-  5,
-  5,
-  1
-);
-
-@include generate-color-classes(
-  "bg",
-  "yellow",
-  $yellow-hue,
-  $yellow-saturation,
-  5,
-  5,
-  1
-);
-
-@include generate-color-classes(
-  "text",
-  "yellow",
-  $yellow-hue,
-  $yellow-saturation,
-  93,
-  97,
-  2
-);
-
-@include generate-color-classes(
-  "bg",
-  "yellow",
-  $yellow-hue,
-  $yellow-saturation,
-  93,
-  97,
-  2
-);
+@include generate-color-classes("text", "yellow", $yellow-hue, $yellow-saturation, 10, 90, 10);
+@include generate-color-classes("bg", "yellow", $yellow-hue, $yellow-saturation, 10, 90, 10);
+
+@include generate-color-classes("text", "yellow", $yellow-hue, $yellow-saturation, 5, 5, 1);
+
+@include generate-color-classes("bg", "yellow", $yellow-hue, $yellow-saturation, 5, 5, 1);
+
+@include generate-color-classes("text", "yellow", $yellow-hue, $yellow-saturation, 93, 97, 2);
+
+@include generate-color-classes("bg", "yellow", $yellow-hue, $yellow-saturation, 93, 97, 2);
 
 // for purple classes
-@include generate-color-classes(
-  "text",
-  "purple",
-  $purple-hue,
-  $purple-saturation,
-  10,
-  90,
-  10
-);
-@include generate-color-classes(
-  "bg",
-  "purple",
-  $purple-hue,
-  $purple-saturation,
-  10,
-  90,
-  10
-);
-
-@include generate-color-classes(
-  "text",
-  "purple",
-  $purple-hue,
-  $purple-saturation,
-  5,
-  5,
-  1
-);
-
-@include generate-color-classes(
-  "bg",
-  "purple",
-  $purple-hue,
-  $purple-saturation,
-  5,
-  5,
-  1
-);
-
-@include generate-color-classes(
-  "text",
-  "purple",
-  $purple-hue,
-  $purple-saturation,
-  93,
-  97,
-  2
-);
-
-@include generate-color-classes(
-  "bg",
-  "purple",
-  $purple-hue,
-  $purple-saturation,
-  93,
-  97,
-  2
-);
+@include generate-color-classes("text", "purple", $purple-hue, $purple-saturation, 10, 90, 10);
+@include generate-color-classes("bg", "purple", $purple-hue, $purple-saturation, 10, 90, 10);
+
+@include generate-color-classes("text", "purple", $purple-hue, $purple-saturation, 5, 5, 1);
+
+@include generate-color-classes("bg", "purple", $purple-hue, $purple-saturation, 5, 5, 1);
+
+@include generate-color-classes("text", "purple", $purple-hue, $purple-saturation, 93, 97, 2);
+
+@include generate-color-classes("bg", "purple", $purple-hue, $purple-saturation, 93, 97, 2);

package/vue-components/styles/base/utilities/_global.scss

@@ -66,13 +66,12 @@ $positions: (
     -webkit-box-orient: vertical;
   }
 }
-.sidebar-collapsed{
+.sidebar-collapsed {
   .ac-left-sidebar {
     .brand-tag {
       display: none;
     }
   }
- 
 }
 .brand-tag {
   color: $color-sidebar;
@@ -208,13 +207,13 @@ hr {
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: $black-80;
+    background-color: $gray-80;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: $black-80;
+    background-color: $gray-80;
   }
 
   &:hover::-webkit-scrollbar-corner {
@@ -255,33 +254,33 @@ hr {
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: $black-80;
+    background-color: $gray-80;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-moz-scrollbar-thumb {
-    background-color: $black-80;
+    background-color: $gray-80;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-ms-scrollbar-thumb {
-    background-color: $black-80;
+    background-color: $gray-80;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: $black-80;
+    background-color: $gray-80;
   }
 
   &::-moz-scrollbar-thumb:hover {
-    background-color: $black-80;
+    background-color: $gray-80;
   }
 
   &::-ms-scrollbar-thumb:hover {
-    background-color: $black-80;
+    background-color: $gray-80;
   }
 
   &:hover::-webkit-scrollbar-corner {
@@ -312,13 +311,13 @@ hr {
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: $black-80;
+    background-color: $gray-80;
     border-radius: 50px;
     width: 2px !important;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: $black-80;
+    background-color: $gray-80;
   }
 
   &:hover::-webkit-scrollbar-corner {
@@ -353,7 +352,7 @@ code {
 
 .is-dark-theme {
   code {
-    background-color: $black-80;
+    background-color: $gray-80;
     color: $white-100;
   }
 }
@@ -648,7 +647,7 @@ $border_color_4: transparent transparent #585d6e transparent;
   height: 10px;
   width: 10px;
   border-radius: 50%;
-  background-color: $black-80;
+  background-color: $gray-80;
   border: 2px solid $white-100;
   display: inline-flex;
 

package/vue-components/styles/base/utilities/_layouts.scss

@@ -9,9 +9,8 @@
   &.is-fullwidth {
     grid-template-columns: auto !important;
   }
-
 }
-// sidebar collapsed 
+// sidebar collapsed
 .sidebar-collapsed {
   .ac-system-body {
     grid-template-columns: 60px calc(100% - 60px);

package/vue-components/styles/base/utilities/_mixin.scss

@@ -8,12 +8,7 @@
     @if (type_of($colorName) == "color") {
       background-color: darken($colorName, 9);
     } @else {
-      background-color: hsla(
-        var(--hsl-hue),
-        var(--hsl-saturation),
-        calc(var(--hsl-lightness) - 9%),
-        1
-      );
+      background-color: hsla(var(--hsl-hue), var(--hsl-saturation), calc(var(--hsl-lightness) - 9%), 1);
     }
 
     // box-shadow: 0px 6px 12px scale-color($color: $colorName, $lightness: 70%);
@@ -27,12 +22,7 @@
     @if (type_of($colorName) == "color") {
       background-color: scale-color($colorName, $lightness: 90%);
     } @else {
-      background-color: hsla(
-        var(--hsl-hue),
-        var(--hsl-saturation),
-        var(--hsl-lightness),
-        0.1
-      );
+      background-color: hsla(var(--hsl-hue), var(--hsl-saturation), var(--hsl-lightness), 0.1);
     }
 
     color: $colorName;
@@ -45,12 +35,7 @@
       @if (type_of($colorName) == "color") {
         background-color: scale-color($colorName, $lightness: 80%);
       } @else {
-        background-color: hsla(
-          var(--hsl-hue),
-          var(--hsl-saturation),
-          var(--hsl-lightness),
-          0.2
-        );
+        background-color: hsla(var(--hsl-hue), var(--hsl-saturation), var(--hsl-lightness), 0.2);
       }
     }
   }
@@ -70,12 +55,7 @@
     @if (type_of($colorName) == "color") {
       background-color: scale-color($colorName, $lightness: 80%);
     } @else {
-      background-color: hsla(
-        var(--hsl-hue),
-        var(--hsl-saturation),
-        var(--hsl-lightness),
-        0.2
-      );
+      background-color: hsla(var(--hsl-hue), var(--hsl-saturation), var(--hsl-lightness), 0.2);
     }
 
     color: $colorName;
@@ -99,12 +79,7 @@
       @if (type_of($colorName) == "color") {
         background-color: scale-color($colorName, $lightness: 80%);
       } @else {
-        background-color: hsla(
-          var(--hsl-hue),
-          var(--hsl-saturation),
-          var(--hsl-lightness),
-          0.2
-        );
+        background-color: hsla(var(--hsl-hue), var(--hsl-saturation), var(--hsl-lightness), 0.2);
       }
     }
 
@@ -133,10 +108,7 @@
     @if (type_of($colorName) == "color") {
       box-shadow: 0px 6px 12px scale-color($color: $colorName, $lightness: 70%);
     } @else {
-      box-shadow: 0px
-        6px
-        12px
-        hsla(var(--hsl-hue), var(--hsl-saturation), var(--hsl-lightness), 0.3);
+      box-shadow: 0px 6px 12px hsla(var(--hsl-hue), var(--hsl-saturation), var(--hsl-lightness), 0.3);
     }
   }
 
@@ -149,12 +121,7 @@
     @if (type_of($colorName) == "color") {
       background-color: scale-color($colorName, $lightness: 80%);
     } @else {
-      background-color: hsla(
-        var(--hsl-hue),
-        var(--hsl-saturation),
-        var(--hsl-lightness),
-        0.2
-      );
+      background-color: hsla(var(--hsl-hue), var(--hsl-saturation), var(--hsl-lightness), 0.2);
     }
 
     span {
@@ -196,12 +163,7 @@
   @if (type_of($colorName) == "color") {
     background-color: scale-color($colorName, $lightness: 85%);
   } @else {
-    background-color: hsla(
-      var(--hsl-hue),
-      var(--hsl-saturation),
-      var(--hsl-lightness),
-      0.15
-    );
+    background-color: hsla(var(--hsl-hue), var(--hsl-saturation), var(--hsl-lightness), 0.15);
   }
 
   border-color: $colorName;

package/vue-components/styles/base/utilities/_root-variables.scss

@@ -8,7 +8,7 @@
   --primary-saturation: 100%;
   --primary-light: 30%;
 
-  // appscode dark 
+  // appscode dark
   --secondary-hue: 196;
   --secondary-saturation: 50%;
   --secondary-light: 20%;