@appscode/design-system 2.0.2 → 2.0.5

package/base/utilities/_colors.scss

@@ -305,6 +305,67 @@ $black-97: hsl($black-hue, $black-saturation, 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",

package/package.json

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

package/vue-components/v3/form/Form.vue

@@ -28,10 +28,7 @@ withDefaults(defineProps<Props>(), {
     >
       <slot />
     </div>
-    <div
-      class="form-footer b-t-1 pt-10 pb-10 pl-20 pr-20 mt-15"
-      v-if="hasFooter"
-    >
+    <div class="form-footer pt-8 pb-8 pl-20 mt-16 b-t-1" v-if="hasFooter">
       <div
         class="ac-vcentered"
         :class="{

package/vue-components/v3/sidebar/SidebarFooter.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { defineAsyncComponent } from "vue";
+
 interface Props {
   isColorpickerEnabled?: boolean;
-  hideBorder?: boolean;
+  hideFooter?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
   isColorpickerEnabled: false,
-  hideBorder: false,
+  hideFooter: false,
 });
+
 defineEmits(["toggleSidebar"]);
 const AccentColorPicker = defineAsyncComponent(
   () => import("./AccentColorPicker.vue")
@@ -16,10 +18,11 @@ const AccentColorPicker = defineAsyncComponent(
 </script>
 
 <template>
-  <div class="sidebar-footer" :class="{ 'b-t-n': hideBorder }">
+  <div class="sidebar-footer" :class="{ 'b-t-n': hideFooter }">
     <!-- back button  -->
     <button
       class="back-button is-transparent"
+      :class="{ 'back-button-hide': hideFooter }"
       data-testid="sidebar-footer-back-button"
       @click="$emit('toggleSidebar')"
     >
@@ -64,6 +67,13 @@ const AccentColorPicker = defineAsyncComponent(
   height: 30px;
   border-top: 1px solid #3d5e7c;
 
+  .back-button-hide {
+    display: none !important;
+    color: $primary-20;
+    margin-bottom: 10px !important;
+    background-color: transparent;
+  }
+
   .back-button {
     display: flex;
     padding: 5px 16px;