@appscode/design-system 2.0.11 → 2.0.13

package/base/utilities/_extended.scss

@@ -1,4 +1,4 @@
-.has-hover-style {
+.has-hover-style:not(.is-disabled) {
   cursor: pointer;
 
   &::before {
@@ -30,10 +30,9 @@
   }
 
   &:hover {
-
     &::before,
     &::after {
       transform: scale(1);
     }
   }
-}
+}

package/package.json

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

package/plugins/theme.js

@@ -0,0 +1,144 @@
+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";
+export const sidebarLoaderLightThemePrimaryColor = "#0F4371";
+export const sidebarLoaderLightThemeSecondaryColor = "#0C365A";

package/vue-components/v3/cards/Cluster.vue

@@ -71,21 +71,22 @@ const OptionDots = defineAsyncComponent(
 <style lang="scss" scoped>
 .card-details {
   border: 1px solid $primary-90;
-  padding: 30px 20px;
+  padding: 24px 20px;
   transition: 0.3s ease-in-out;
   position: relative;
   z-index: 1;
   width: 100%;
+  border-radius: 2px;
 
   .ac-options {
     position: absolute;
     right: 20px;
-    top: 30px;
+    top: 24px;
     z-index: 999;
   }
   .c-header {
     display: flex;
-    margin-bottom: 20px;
+    margin-bottom: 24px;
 
     .c-logo {
       width: 54px;

package/vue-components/v3/cards/Counter.vue

@@ -23,7 +23,7 @@
   width: calc(25% - 8px);
   max-width: 390px;
   min-width: 290px;
-
+  border-radius: 2px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;

package/vue-components/v3/cards/FeatureCard.vue

@@ -47,6 +47,7 @@ withDefaults(
   max-width: 390px;
   min-width: 290px;
   position: relative;
+  border-radius: 2px;
 
   .required {
     position: absolute;

package/vue-components/v3/cards/Monitoring.vue

@@ -70,6 +70,7 @@ withDefaults(defineProps<Props>(), {
   max-width: 390px;
   min-width: 290px;
   position: relative;
+  border-radius: 2px;
 
   .required {
     position: absolute;

package/vue-components/v3/cards/{OrgClusterCard.vue → OrgCard.vue}

@@ -32,7 +32,7 @@ withDefaults(defineProps<Props>(), {
 </script>
 <template>
   <div
-    class="card-details"
+    class="card-details has-hover-style"
     :class="[
       modifierClasses,
       { 'no-data-available is-justify-content-center': noDataAvailable },
@@ -42,7 +42,7 @@ withDefaults(defineProps<Props>(), {
       class="left-content"
       :class="{ 'is-align-items-center': noDataAvailable }"
     >
-      <figure class="image" :class="{ 'is-64x64': !noDataAvailable }">
+      <figure class="image" :class="{ 'is-48x48': !noDataAvailable }">
         <img :class="{ 'is-rounded': !noDataAvailable }" :src="thumbnail" />
       </figure>
       <h5>{{ title }}</h5>
@@ -61,7 +61,7 @@ withDefaults(defineProps<Props>(), {
       </AcButton>
     </div>
     <div class="right-content" v-if="!noDataAvailable">
-      <figure class="image is-64x64">
+      <figure class="image is-48x48">
         <img
           v-if="type === 'organization'"
           src="../../images/icons/org-icon.svg"
@@ -77,20 +77,27 @@ withDefaults(defineProps<Props>(), {
   align-items: flex-end;
   justify-content: space-between;
   border: 1px solid $primary-90;
-  padding: 32px 20px;
-  border-radius: 4px;
+  padding: 24px 20px;
+  border-radius: 2px;
   transition: 0.3s ease-in-out;
+  position: relative;
+
+  figure {
+    margin-bottom: 8px;
+  }
 
   button.ac-button.is-text {
     color: $primary;
     transition: 0.3s ease-in-out;
+    padding: 2px 0;
+    height: auto;
     &:hover {
       background-color: transparent;
     }
   }
 
   &:hover:not(.no-data-available) {
-    border: 1px solid $primary;
+    // border: 1px solid $primary;
     button.ac-button.is-text {
       gap: 16px;
     }
@@ -106,7 +113,7 @@ withDefaults(defineProps<Props>(), {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 16px;
+    gap: 8px;
     justify-content: space-between;
 
     .image {

package/vue-components/v3/cards/Vendor.vue

@@ -32,7 +32,7 @@ withDefaults(defineProps<Props>(), {
 .ac-single-card {
   border: 1px solid $primary-90;
   transition: 0.3s ease-in-out;
-
+  border-radius: 2px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;