@appscode/design-system 2.0.60 → 2.0.61

package/package.json

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

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

@@ -4,7 +4,7 @@
 
 // white and black
 $white-100: hsl(0, 0%, 100%);
-$gray-100: hsl(0, 0%, 0%);
+$black-100: hsl(0, 0%, 0%);
 
 // primary color guides
 $primary-hue: var(--primary-hue);

package/vue-components/styles/components/_accordion.scss

@@ -69,7 +69,7 @@
 
     .accordion-body {
       max-height: 0;
-      transition: max-height 0.2s ease-out;
+      // transition: max-height 0.2s ease-out;
       overflow: hidden;
 
       p {

package/vue-components/styles/components/_terminal.scss

@@ -15,7 +15,7 @@
 
   .terminal-body {
     font-family: "Inconsolata", monospace;
-    background-color: $gray-100;
+    background-color: $black-100;
     height: 100%;
     color: $white-100;
 

package/vue-components/styles/theme/_dark.scss

@@ -32,7 +32,7 @@
 
 // // white and black
 // $white-100: hsl($primary-hue, 50%, 5%);
-// $gray-100: hsl(0, 0%, 90%);
+// $black-100: hsl(0, 0%, 90%);
 
 // $color-text: hsl($primary-hue, 10%, 80%);
 // $color-heading: hsl($primary-hue, 10%, 90%);

package/vue-components/v3/accordion/Accordion.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref } from "vue";
+
 interface Props {
   modifierClasses?: string;
 }
@@ -6,6 +8,8 @@ interface Props {
 withDefaults(defineProps<Props>(), {
   modifierClasses: "",
 });
+
+const isActive = ref(true);
 </script>
 
 <template>
@@ -16,13 +20,13 @@ withDefaults(defineProps<Props>(), {
       <!-- accordion heading start  -->
       <div class="accordion-heading">
         <h6 class="is-small">Hello Accordion title</h6>
-        <button class="icon">
+        <button class="icon" @click="isActive = !isActive">
           <i class="fa fa-plus" aria-hidden="true"></i>
         </button>
       </div>
       <!-- accordion heading end -->
       <!-- accordion body start  -->
-      <div class="accordion-body">
+      <div class="accordion-body" :style="{ 'max-height': isActive ? '100%' : 0 }">
         <slot />
       </div>
       <!-- accordion body end -->

package/vue-components/v3/alert/Toast.vue

@@ -13,8 +13,8 @@ withDefaults(defineProps<Props>(), {
     <div class="toast-header is-flex is-align-items-center">
       <h6 class="mr-auto">Toast Header</h6>
       <small>2 hours ago</small>
-      <button type="button" class="button ac-button is-transparent w-18 h-18 flex ml-8">
-        <span class="material-icons close-icon is-size-5">close</span>
+      <button type="button" class="button ac-button is-danger is-outlined w-18 h-18 flex ml-8">
+        <span class="material-icons close-icon">close</span>
       </button>
     </div>
     <div class="toast-body">

package/vue-components/v3/messages/Message.vue

@@ -12,10 +12,12 @@ withDefaults(defineProps<Props>(), {
     <div class="thumbnail">
       <slot name="thumbnail" />
     </div>
-    <p>
-      {{ message }}
-    </p>
+    <div class="is-flex is-align-items-center gap-4">
+      <span>
+        {{ message }}
+      </span>
 
-    <slot name="details" />
+      <slot name="details" />
+    </div>
   </div>
 </template>