@appscode/design-system 2.0.10 → 2.0.12

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.10",
+  "version": "2.0.12",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

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/OrgCard.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+const AcButton = defineAsyncComponent(() => import("../button/Button.vue"));
+const HeroiconsArrowSmallRight = defineAsyncComponent(
+  () => import("~icons/heroicons/arrow-small-right")
+);
+const HeroiconsPlus = defineAsyncComponent(
+  () => import("~icons/heroicons/plus")
+);
+
+interface Props {
+  title?: string;
+  type?: string;
+  modifierClasses?: string;
+  roundedThumbnail?: boolean;
+  thumbnail?: string;
+  url?: string;
+  urlLabel?: string;
+  noDataAvailable?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  title: "no-title",
+  type: "organization",
+  modifierClasses: "",
+  roundedThumbnail: true,
+  thumbnail: "//via.placeholder.com/100/dddddd/808080",
+  url: "#",
+  urlLabel: "Details",
+  noDataAvailable: false,
+});
+</script>
+<template>
+  <div
+    class="card-details has-hover-style"
+    :class="[
+      modifierClasses,
+      { 'no-data-available is-justify-content-center': noDataAvailable },
+    ]"
+  >
+    <div
+      class="left-content"
+      :class="{ 'is-align-items-center': noDataAvailable }"
+    >
+      <figure class="image" :class="{ 'is-48x48': !noDataAvailable }">
+        <img :class="{ 'is-rounded': !noDataAvailable }" :src="thumbnail" />
+      </figure>
+      <h5>{{ title }}</h5>
+
+      <AcButton v-if="noDataAvailable" :title="urlLabel" icon-class="unplugin">
+        <template #icon><HeroiconsPlus /></template>
+      </AcButton>
+
+      <AcButton
+        v-else
+        :title="urlLabel"
+        modifier-classes="is-text px-0 is-flex-direction-row-reverse gap-8"
+        icon-class="unplugin"
+      >
+        <template #icon><HeroiconsArrowSmallRight /></template>
+      </AcButton>
+    </div>
+    <div class="right-content" v-if="!noDataAvailable">
+      <figure class="image is-48x48">
+        <img
+          v-if="type === 'organization'"
+          src="../../images/icons/org-icon.svg"
+        />
+        <img v-else src="../../images/icons/cluster-icon.svg" />
+      </figure>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.card-details {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  border: 1px solid $primary-90;
+  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;
+    button.ac-button.is-text {
+      gap: 16px;
+    }
+
+    .right-content {
+      img {
+        filter: grayscale(0);
+      }
+    }
+  }
+
+  .left-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    justify-content: space-between;
+
+    .image {
+      border-radius: 50%;
+
+      &:has(.is-rounded) {
+        box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.1);
+      }
+    }
+  }
+
+  .right-content {
+    img {
+      filter: grayscale(1);
+    }
+  }
+}
+</style>

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;

package/plugins/theme.js

@@ -1,144 +0,0 @@
-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/OrgClusterCard.vue

@@ -1,86 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  title?: string;
-  type?: string;
-  modifierClasses?: string;
-  roundedThumbnail?: boolean;
-  thumbnail?: string;
-  url?: string;
-  urlLabel?: string;
-}
-
-withDefaults(defineProps<Props>(), {
-  title: "no-title",
-  type: "organization",
-  modifierClasses: "",
-  roundedThumbnail: true,
-  thumbnail: "https://via.placeholder.com/80/dddddd/808080",
-  url: "#",
-  urlLabel: "Details",
-});
-</script>
-<template>
-  <div class="card-details is-clickable" :class="modifierClasses">
-    <div class="left-content">
-      <figure class="image is-64x64">
-        <img :class="{ 'is-rounded': roundedThumbnail }" :src="thumbnail" />
-      </figure>
-      <h5>{{ title }}</h5>
-      <a :href="url" class="is-underlined has-text-weight-medium">
-        {{ urlLabel }}
-      </a>
-    </div>
-    <div class="right-content">
-      <figure class="image is-64x64">
-        <img
-          v-if="type === 'organization'"
-          src="../../images/icons/org-icon.svg"
-        />
-        <img v-else src="../../images/icons/cluster-icon.svg" />
-      </figure>
-    </div>
-  </div>
-</template>
-<style lang="scss" scoped>
-.card-details {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  border: 1px solid $primary-90;
-  padding: 32px 20px;
-  border-radius: 4px;
-  transition: 0.3s ease-in-out;
-
-  &:hover {
-    border: 1px solid $primary;
-
-    .right-content {
-      img {
-        filter: grayscale(0);
-      }
-    }
-  }
-
-  .left-content {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 16px;
-    justify-content: space-between;
-
-    .image {
-      border-radius: 50%;
-
-      &:has(.is-rounded) {
-        box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.1);
-      }
-    }
-  }
-
-  .right-content {
-    img {
-      filter: grayscale(1);
-    }
-  }
-}
-</style>