@appscode/design-system 1.0.43-alpha.12 → 1.0.43-alpha.16

package/components/bbum/_mobile-desktop.scss

@@ -17,7 +17,7 @@
     top: 12px;
     left: 50%;
     transform: translate(-50%, -50%);
-    background: $ac-white;
+    background-color: $ac-white;
     border-radius: 0 0 50px 50px;
   }
 
@@ -30,21 +30,21 @@
     left: 50%;
     top: 7px;
     transform: translate(-50%, -50%);
-    background: $ac-bg;
+    background-color: $ac-bg;
     border-radius: 10px;
   }
 
   .content {
     width: 360px;
     height: 640px;
-    background: white;
+    background-color: white;
   }
 
   .circle-shape {
     width: 10px;
     height: 10px;
     border-radius: 50%;
-    background: $ac-bg;
+    background-color: $ac-bg;
     display: block;
     position: absolute;
     top: 2px;
@@ -67,7 +67,7 @@
     position: absolute;
     width: calc(683px + 200px);
     height: 30px;
-    background: $ac-white;
+    background-color: $ac-white;
     border-radius: 6px 6px 12px 12px;
     top: 390px;
     left: -100px;

package/components/bbum/_post.scss

@@ -5,8 +5,8 @@
   .textarea {
     height: 83px;
     width: 100%;
-    background: $ac-white;
-    border: 1px solid #e5e9f2;
+    background-color: $ac-white;
+    border: 1px solid $ac-white-light;
     border-radius: 4px;
     padding: 30px 170px 30px 30px;
     font-size: $font-size-normal;
@@ -41,12 +41,13 @@
 
     label {
       display: block;
-      border-left: 1px solid #e5e9f2;
+      border-left: 1px solid $ac-white-light;
       padding: 30px;
       cursor: pointer;
 
       img {
-        min-width: 24px;
+        width: auto;
+        height: 20px;
       }
     }
 

package/components/bbum/_sign-up-notification.scss

@@ -46,10 +46,10 @@
     background-color: lighten($color: $ac-danger, $amount: 40);
     font-size: $font-size-small;
     transition: 0.3s ease-in-out;
-    &:hover{
+    &:hover {
       background-color: $ac-danger;
       color: $ac-white;
-      img{
+      img {
         filter: brightness(100);
       }
     }
@@ -74,7 +74,7 @@
     }
 
     p {
-      color: #74818d;
+      color: $ac-color-text;
       font-size: $font-size-small;
       margin-bottom: 10px;
     }

package/components/bbum/_single-post-preview.scss

@@ -1,6 +1,6 @@
 .single-post-preview {
-  background: $ac-white;
-  border: 1px solid #e5e9f2;
+  background-color: $ac-white;
+  border: 1px solid $ac-white-light;
   border-radius: 4px;
   margin-bottom: 15px;
 
@@ -35,7 +35,7 @@
 
           a {
             font-size: $font-size-medium;
-            color: #1c2d41;
+            color: $ac-color-heading;
             line-height: 1;
             font-weight: 500;
           }
@@ -68,10 +68,10 @@
 
   .post-body {
     padding: 0 20px 15px;
-    border-bottom: 1px solid #ebeff5;
+    border-bottom: 1px solid $ac-white-light;
 
     p {
-      color: #3c4858;
+      color: $ac-color-text;
       font-size: $font-size-small;
       line-height: 160%;
     }
@@ -90,7 +90,7 @@
 
         li {
           font-size: $font-size-normal;
-          color: #3c4858;
+          color: $ac-color-value;
         }
       }
     }
@@ -220,13 +220,13 @@
       button {
         background-color: transparent;
         border: none;
-        color: #3c4858;
+        color: $ac-color-value;
         transition: 0.3s;
         font-weight: 500;
         cursor: pointer;
         display: block;
         width: 50%;
-        border-right: 1px solid #ebeff5 !important;
+        border-right: 1px solid $ac-white-light !important;
         padding: 10px;
 
         &:last-child {

package/components/bbum/_user-profile.scss

@@ -48,7 +48,7 @@
           line-height: 1.5;
           font-weight: 400;
           display: block;
-          color: #74818d;
+          color: $ac-color-text;
         }
       }
     }
@@ -59,7 +59,7 @@
 
     p {
       font-size: 14px;
-      color: #74818d;
+      color: $ac-color-text;
       line-height: 160%;
       margin-bottom: 20px;
     }

package/components/ui-builder/_ui-builder.scss

@@ -18,6 +18,7 @@
   p {
     font-size: 13px;
     margin-bottom: 10px;
+    color: $ac-color-value;
   }
 }
 .key-value-save {
@@ -63,7 +64,7 @@
     top: 5px;
     width: 1px;
     height: calc(100% - 20px);
-    border: 1px dashed #ddd;
+    border: 1px dashed $ac-white-light;
     z-index: -1;
   }
 
@@ -74,7 +75,7 @@
     bottom: 6px;
     width: 12px;
     height: 12px;
-    background: #eee;
+    background-color: $ac-white-light;
     border-radius: 50%;
     z-index: -1;
   }
@@ -94,11 +95,12 @@
         display: inline-block;
         text-align: center;
         font-size: 10px;
-        border: 1px solid #a6abbd;
+        border: 1px solid $ac-white-light;
         border-radius: 50%;
         margin-right: 10px;
         cursor: pointer;
-        background-color: #fff;
+        background-color: $ac-white;
+        color: $ac-color-value;
       }
     }
   }
@@ -114,13 +116,13 @@
   .table-inner {
     min-width: 630px;
     .thead {
-      background-color: #f1f1f1;
+      background-color: $ac-white-lighter;
       .tr {
         .th {
           font-weight: 600;
         }
-        border-top: 1px solid #e7e7e7;
-        border-bottom: 1px solid #e7e7e7;
+        border-top: 1px solid var(--ac-white-light);
+        border-bottom: 1px solid var(--ac-white-light);
       }
     }
     .thead,
@@ -143,7 +145,7 @@
 
     .tbody {
       .tr {
-        border-bottom: 1px solid #e7e7e7;
+        border-bottom: 1px solid $ac-white-light;
       }
     }
   }

package/layouts/_404.scss

@@ -80,7 +80,8 @@
                   Full HD Min Width 1407
 **************************************************************** */
 /* Full HD Min Width 1408px */
-@media (min-width: 1408px) {}
+@media (min-width: 1408px) {
+}
 
 /**************************************************************** 
                   Widescreen Between 1216px and 1407px

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.0.43-alpha.12",
+  "version": "1.0.43-alpha.16",
   "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)