@appscode/design-system 2.0.41-alpha.9 → 2.0.42-alpha.1

package/main.scss

@@ -18,6 +18,8 @@
 
 // COMPONENTS
 // @import "@/components/vue-components/styles/components/all";
+@import "@/components/vue-components/styles/components/button";
 @import "@/components/vue-components/styles/components/form-fields/input";
 @import "@/components/vue-components/styles/components/ui-builder/vue-open-api";
 @import "@/components/vue-components/styles/components/ui-builder/ui-builder";
+// @import "@/components/vue-components/styles/theme/appscode.scss";

package/package.json

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

package/plugins/theme.js

@@ -93,15 +93,13 @@ export function HexToHSL(H) {
   };
 }
 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"
+  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");
 
   return {
     hue,
@@ -110,32 +108,12 @@ export function getThemeHSL() {
   };
 }
 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);
+  const themeElement = document.querySelector(":root");
+  themeElement.style.setProperty("--primary-hue", h);
+  themeElement.style.setProperty("--primary-saturation", s);
+  themeElement.style.setProperty("--primary-light", 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";

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

@@ -1,4 +1,6 @@
 // @import "colors";
+@import "root-variables";
+@import "generate-color-classes";
 @import "typography";
 @import "mixin";
 @import "extended";
@@ -6,4 +8,4 @@
 @import "grid";
 @import "spacing";
 @import "layouts";
-// @import "dark-theme";
+// @import "dark-theme";

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

@@ -1,16 +1,23 @@
+// :root {
+//   --theme-mode: light;
+// }
+
 // white and black
 $white-100: hsl(0, 0%, 100%);
 $black-100: hsl(0, 0%, 0%);
 
 // primary color guides
-$primary-hue: 208;
-$primary-saturation: 77%;
+$primary-hue: var(--primary-hue);
+$primary-saturation: var(--primary-saturation);
+$primary-light: var(--primary-light);
+// $theme-mode: var(--theme-mode);
+
 $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%);
-$primary: hsl($primary-hue, $primary-saturation, 40%);
+$ac-primary: hsl($primary-hue, $primary-saturation, $primary-light);
 $primary-50: hsl($primary-hue, $primary-saturation, 50%);
 $primary-60: hsl($primary-hue, $primary-saturation, 60%);
 $primary-70: hsl($primary-hue, $primary-saturation, 70%);
@@ -21,6 +28,7 @@ $primary-95: hsl($primary-hue, $primary-saturation, 95%);
 $primary-97: hsl($primary-hue, $primary-saturation, 97%);
 
 $primary-light-grey: hsl($primary-hue, 30%, 96%);
+$primary-grey: hsl($primary-hue, 30%, 90%);
 $primary-dark-grey: hsl($primary-hue, 30%, 10%);
 
 $color-text: hsl($primary-hue, 10%, 35%);
@@ -140,260 +148,6 @@ $black-93: hsl($black-hue, $black-saturation, 93%);
 $black-95: hsl($black-hue, $black-saturation, 95%);
 $black-97: hsl($black-hue, $black-saturation, 97%);
 
-// classes
-@mixin generate-color-classes($type, $color, $h, $s, $from, $to, $step) {
-  $i: $from;
-
-  @while $i <=$to {
-    .#{$type}-#{$color}-#{$i} {
-      #{if($type == "text", "color", "background-color")}: hsl($h, $s, $i * 1%);
-    }
-
-    $i: $i + $step;
-  }
-}
-
-// 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
-);
-
-// 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
-);
-
-// 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
-);
-
-// 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
-);
-
 // 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);

package/vue-components/styles/base/utilities/_customize-bulma.scss

@@ -75,7 +75,7 @@ $weight-bold: 700 !default;
 // // Derived-Variables
 
 // $primary: $turquoise !default;
-$primary: $primary !default;
+// $primary: hsl(208, 77%, 40) !default;
 $info: $blue !default;
 $success: $success !default;
 $warning: $warning !default;

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

@@ -12,7 +12,7 @@
     border-bottom: solid 1px;
     transition: 0.3s;
     transform: scaleX(0);
-    border-color: $primary;
+    border-color: $ac-primary;
   }
 
   &::after {
@@ -26,7 +26,7 @@
     border-right: solid 1px;
     transition: 0.3s;
     transform: scaleY(0);
-    border-color: $primary;
+    border-color: $ac-primary;
   }
 
   &:hover {

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

@@ -0,0 +1,253 @@
+// classes
+@mixin generate-color-classes($type, $color, $h, $s, $from, $to, $step) {
+  $i: $from;
+
+  @while $i <=$to {
+    .#{$type}-#{$color}-#{$i} {
+      #{if($type == "text", "color", "background-color")}: hsl($h, $s, $i * 1%);
+    }
+
+    $i: $i + $step;
+  }
+}
+
+// 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
+);
+
+// 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
+);
+
+// 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
+);
+
+// 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
+);

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

@@ -154,7 +154,7 @@ hr {
 .is-dark-theme {
   .toasted-container {
     i.fa {
-      color: #ffffff !important;
+      color: $white-100 !important;
     }
   }
 }
@@ -486,7 +486,7 @@ $border_color_4: transparent transparent #585d6e transparent;
   &.is-button-info {
     .tooltip-inner {
       background: $white-100;
-      color: $primary;
+      color: $ac-primary;
       border-radius: 4px;
       padding: 5px 20px 4px;
       box-shadow: $ac-shadow-1;
@@ -663,7 +663,7 @@ body:has(.has-info-content) {
   margin-left: auto;
   position: fixed;
   right: 0;
-  background: #fff;
+  background: $white-100;
   top: 0;
   z-index: 99999;
   box-shadow: -3px 2px 10px 3px rgba(0, 0, 0, 0.1);
@@ -675,8 +675,10 @@ body:has(.has-info-content) {
 
 .tag:not(body) {
   &.is-primary {
+    background-color: $ac-primary;
+    color: $white-100;
     &.is-light {
-      color: $primary;
+      color: $ac-primary;
       background-color: $primary-95;
     }
   }

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

@@ -0,0 +1,5 @@
+:root {
+  --primary-hue: 208;
+  --primary-saturation: 77%;
+  --primary-light: 40%;
+}