@appscode/design-system 1.0.43-alpha.10 → 1.0.43-alpha.15

package/base/utilities/_default.scss

@@ -686,7 +686,7 @@ $border_color_4: transparent transparent #585d6e transparent;
   height: 10px;
   width: 10px;
   border-radius: 50%;
-  background: $ac-grey-lightest;
+  background: $ac-gray-lightest;
   border: 2px solid $ac-white;
   display: inline-flex;
 

package/base/utilities/_initial-variables.scss

@@ -95,7 +95,7 @@ $ac-gray-dark: #5f5f5f;
 $ac-gray: #767676;
 $ac-gray-light: #8d8d8d;
 $ac-gray-lighter: #a4a4a4;
-$ac-grey-lightest: #d1d1d1;
+$ac-gray-lightest: #d1d1d1;
 $ac-white-light: #e7e7e7;
 $ac-white-lighter: #f1f1f1;
 $ac-white: #ffffff;

package/components/_ac-multi-select.scss

@@ -2,7 +2,7 @@
   // margin-top: 3px;
   &.cluster-select {
     .multiselect__tags {
-      border: 1px solid $ac-grey-lightest;
+      border: 1px solid $ac-gray-lightest;
       background-color: $table-header;
 
       .multiselect__input {

package/components/_ac-table.scss

@@ -49,13 +49,16 @@
       td {
         border: none;
         font-size: $font-size-small;
-        color: $ac-gray-dark;
+        color: hsl(
+          var(--font-hsl-hue),
+          var(--font-hsl-saturation),
+          calc(var(--font-hsl-lightness) + 25%)
+        );
         font-weight: 400;
         padding: 3px 0px;
         min-width: 230px;
 
         &:first-child {
-          color: $ac-black;
           font-weight: 400;
           padding-right: 10px;
           color: $ac-color-heading;

package/components/_ac-tags.scss

@@ -3,7 +3,7 @@
   align-items: center;
 
   li {
-    background: $ac-grey-lightest;
+    background: $ac-gray-lightest;
     list-style: none;
     padding: 2px 10px;
     border-radius: 4px;

package/components/_buttons.scss

@@ -143,7 +143,7 @@
         }
 
         &:hover {
-          background-color: $ac-grey-lightest;
+          background-color: $ac-gray-lightest;
         }
       }
 

package/components/_wizard.scss

@@ -282,7 +282,7 @@
       position: absolute;
       right: -5px;
       top: -5px;
-      border: 1px solid $ac-grey-lightest;
+      border: 1px solid $ac-gray-lightest;
       font-size: 10px;
       height: 25px;
       width: 25px;

package/components/bbum/_information-center.scss

@@ -72,7 +72,7 @@
         height: 160px;
         background-size: cover;
         background-position: center;
-        background-color: $ac-grey-lightest;
+        background-color: $ac-gray-lightest;
         position: relative;
         z-index: 1;
 
@@ -126,7 +126,7 @@
             transition: 0.3s;
 
             &:hover {
-              color: $ac-grey-lightest;
+              color: $ac-gray-lightest;
             }
           }
         }

package/components/bbum/_user-profile.scss

@@ -12,7 +12,7 @@
       height: 240px;
       background-size: cover;
       background-position: center;
-      background-color: $ac-grey-lightest;
+      background-color: $ac-gray-lightest;
       background-repeat: no-repeat;
       border-radius: 10px;
 

package/package.json

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

package/plugins/theme.js

@@ -0,0 +1,138 @@
+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,
+  };
+}

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)