@appscode/design-system 2.0.58 → 2.0.59

package/package.json

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

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

@@ -16,8 +16,8 @@ $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%);
 $ac-primary: hsl($primary-hue, $primary-saturation, $primary-light);
+$primary-40: hsl($primary-hue, $primary-saturation, 40%);
 $primary-50: hsl($primary-hue, $primary-saturation, 50%);
 $primary-60: hsl($primary-hue, $primary-saturation, 60%);
 $primary-70: hsl($primary-hue, $primary-saturation, 70%);

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

@@ -10,7 +10,7 @@
     &.is-primary {
       background-color: $ac-primary;
       &:hover {
-        background-color: $primary-30;
+        background-color: hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-light) - 3%));
       }
       &.is-light {
         color: $ac-primary;

package/vue-components/v3/badge/Badge.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>Badge</h1>
+</template>

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

@@ -1,3 +1,21 @@
+<script setup lang="ts">
+interface Props {
+  message: string;
+}
+withDefaults(defineProps<Props>(), {
+  message: "",
+});
+</script>
+
 <template>
-  <h1>Message</h1>
+  <div class="is-flex is-flex-direction-column is-align-items-center">
+    <div class="thumbnail">
+      <slot name="thumbnail" />
+    </div>
+    <p>
+      {{ message }}
+    </p>
+
+    <slot name="details" />
+  </div>
 </template>

package/vue-components/images/illustrations/error-message.svg

@@ -1,47 +0,0 @@
-<svg width="155" height="116" viewBox="0 0 155 116" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M123.609 21.5334H35.6094V82.2633H123.609V21.5334Z" fill="#F1F8FD"/>
-<path opacity="0.44" d="M123.609 34.1775H35.6094V82.2634H123.609V34.1775Z" fill="#C4CDD4"/>
-<path opacity="0.08" d="M120.247 69.4801L113.543 79.0192H119.853V82.2633H123.608L123.373 70.6285L120.247 69.4801Z" fill="black"/>
-<path opacity="0.08" d="M36.7073 39.3317C36.7073 39.3317 38.531 38.1021 39.3849 42.6184C40.2389 47.1347 37.7351 50.9704 43.7318 51.8984C49.7285 52.8264 53.6542 50.2899 55.0375 57.4973C56.4208 64.7048 64.2103 67.9644 61.5481 74.4797C58.8859 80.9951 56.6642 82.2633 56.6642 82.2633H35.6099C35.6099 82.2633 35.4515 41.8992 36.7073 39.3317Z" fill="black"/>
-<path opacity="0.45" d="M38.8356 107.257C54.5885 107.257 67.3587 106.43 67.3587 105.409C67.3587 104.388 54.5885 103.561 38.8356 103.561C23.0827 103.561 10.3125 104.388 10.3125 105.409C10.3125 106.43 23.0827 107.257 38.8356 107.257Z" fill="#F1F8FD"/>
-<path opacity="0.45" d="M123.045 106.631C130.921 106.631 137.306 105.987 137.306 105.193C137.306 104.398 130.921 103.754 123.045 103.754C115.168 103.754 108.783 104.398 108.783 105.193C108.783 105.987 115.168 106.631 123.045 106.631Z" fill="#F1F8FD"/>
-<path d="M42.708 28.7989C43.6427 28.7989 44.4004 28.0407 44.4004 27.1053C44.4004 26.17 43.6427 25.4117 42.708 25.4117C41.7733 25.4117 41.0156 26.17 41.0156 27.1053C41.0156 28.0407 41.7733 28.7989 42.708 28.7989Z" fill="#24285B"/>
-<path d="M47.7432 28.7989C48.6778 28.7989 49.4355 28.0407 49.4355 27.1053C49.4355 26.17 48.6778 25.4117 47.7432 25.4117C46.8085 25.4117 46.0508 26.17 46.0508 27.1053C46.0508 28.0407 46.8085 28.7989 47.7432 28.7989Z" fill="#A5CFF3"/>
-<path d="M52.4873 28.7989C53.422 28.7989 54.1797 28.0407 54.1797 27.1053C54.1797 26.17 53.422 25.4117 52.4873 25.4117C51.5526 25.4117 50.7949 26.17 50.7949 27.1053C50.7949 28.0407 51.5526 28.7989 52.4873 28.7989Z" fill="#F6A009"/>
-<path d="M25.9115 102.246C25.9115 102.246 25.4362 103.569 24.2423 103.669C23.0483 103.77 22.7392 104.937 23.8095 105.239C24.8798 105.541 27.6502 104.164 27.6502 104.164L27.5691 102.443L25.9115 102.246Z" fill="#A5CFF3"/>
-<path d="M42.2934 102.246C42.2934 102.246 42.7648 103.569 43.9588 103.669C45.1527 103.77 45.4618 104.937 44.3915 105.239C43.3212 105.541 40.5547 104.164 40.5547 104.164L40.632 102.443L42.2934 102.246Z" fill="#A5CFF3"/>
-<path d="M59.5572 52.9733C59.4673 52.8835 59.3959 52.7769 59.3472 52.6594C59.2985 52.542 59.2734 52.4161 59.2734 52.2889C59.2734 52.1618 59.2985 52.0359 59.3472 51.9184C59.3959 51.801 59.4673 51.6943 59.5572 51.6045L65.3183 45.8432C65.5023 45.6786 65.7423 45.5907 65.9891 45.5976C66.2358 45.6045 66.4705 45.7057 66.6451 45.8804C66.8196 46.055 66.9207 46.2899 66.9276 46.5369C66.9345 46.7838 66.8467 47.024 66.6822 47.2081L60.9212 52.9733C60.7401 53.154 60.4949 53.2554 60.2392 53.2554C59.9835 53.2554 59.7383 53.154 59.5572 52.9733Z" fill="white"/>
-<path d="M65.4123 53.0661L59.6513 47.3009C59.5592 47.2116 59.4857 47.1049 59.4353 46.9869C59.3848 46.8689 59.3584 46.742 59.3574 46.6136C59.3565 46.4853 59.3811 46.358 59.4299 46.2393C59.4786 46.1206 59.5505 46.0128 59.6413 45.9221C59.7321 45.8315 59.8401 45.7599 59.9589 45.7114C60.0776 45.663 60.2049 45.6387 60.3331 45.64C60.4614 45.6413 60.5881 45.6681 60.7059 45.719C60.8236 45.7698 60.9301 45.8436 61.0191 45.936L66.7763 51.6973C66.8687 51.7864 66.9424 51.893 66.9932 52.0108C67.044 52.1287 67.0708 52.2555 67.0721 52.3838C67.0734 52.5122 67.0491 52.6395 67.0007 52.7584C66.9523 52.8772 66.8807 52.9852 66.7902 53.0761C66.6996 53.167 66.5918 53.239 66.4732 53.2877C66.3546 53.3365 66.2274 53.3611 66.0992 53.3602C65.9709 53.3593 65.8441 53.3328 65.7262 53.2823C65.6083 53.2318 65.5016 53.1583 65.4123 53.0661Z" fill="white"/>
-<path d="M91.5045 52.9733C91.4145 52.8835 91.3432 52.7768 91.2945 52.6594C91.2458 52.542 91.2207 52.4161 91.2207 52.2889C91.2207 52.1618 91.2458 52.0359 91.2945 51.9184C91.3432 51.801 91.4145 51.6943 91.5045 51.6045L97.2655 45.8432C97.3531 45.7451 97.4597 45.666 97.5789 45.6106C97.6981 45.5553 97.8273 45.5248 97.9587 45.5211C98.09 45.5175 98.2208 45.5406 98.3428 45.5892C98.4649 45.6379 98.5758 45.7109 98.6687 45.8039C98.7617 45.8969 98.8346 46.0078 98.8832 46.13C98.9318 46.2522 98.955 46.383 98.9513 46.5145C98.9476 46.6459 98.9172 46.7752 98.8618 46.8945C98.8065 47.0138 98.7274 47.1205 98.6295 47.2081L92.8723 52.9733C92.6901 53.1532 92.4444 53.2541 92.1884 53.2541C91.9324 53.2541 91.6867 53.1532 91.5045 52.9733Z" fill="white"/>
-<path d="M97.3694 53.0661L91.6083 47.3009C91.5162 47.2116 91.4428 47.1049 91.3923 46.9869C91.3419 46.8689 91.3154 46.742 91.3145 46.6136C91.3135 46.4853 91.3382 46.358 91.3869 46.2393C91.4357 46.1206 91.5075 46.0128 91.5983 45.9221C91.6892 45.8315 91.7971 45.7599 91.9159 45.7114C92.0347 45.663 92.1619 45.6387 92.2902 45.64C92.4184 45.6413 92.5451 45.6681 92.6629 45.719C92.7807 45.7698 92.8872 45.8436 92.9761 45.936L98.7333 51.6973C98.8257 51.7864 98.8994 51.893 98.9502 52.0108C99.001 52.1287 99.0278 52.2555 99.0291 52.3838C99.0304 52.5122 99.0061 52.6395 98.9577 52.7584C98.9093 52.8772 98.8378 52.9852 98.7472 53.0761C98.6566 53.167 98.5489 53.239 98.4302 53.2877C98.3116 53.3365 98.1844 53.3611 98.0562 53.3602C97.9279 53.3593 97.8011 53.3328 97.6832 53.2823C97.5653 53.2318 97.4586 53.1583 97.3694 53.0661Z" fill="white"/>
-<path d="M71.4588 69.4801C71.2165 69.4799 70.9833 69.3881 70.8056 69.2233C70.628 69.0584 70.5191 68.8326 70.5006 68.5908C70.2301 65.3003 71.4781 58.8236 78.1201 57.8801C80.195 57.5901 81.9299 58.0657 83.2745 59.3031C86.4313 62.2069 86.1183 68.3124 86.1068 68.5831C86.0997 68.71 86.0676 68.8343 86.0125 68.9489C85.9574 69.0634 85.8803 69.166 85.7856 69.2508C85.6909 69.3355 85.5804 69.4007 85.4605 69.4427C85.3406 69.4848 85.2135 69.5027 85.0867 69.4956C84.9598 69.4885 84.8356 69.4565 84.7211 69.4013C84.6067 69.3462 84.5042 69.269 84.4195 69.1742C84.3348 69.0794 84.2696 68.9689 84.2276 68.8489C84.1857 68.7289 84.1677 68.6018 84.1748 68.4748C84.1748 68.4207 84.4492 63.0228 81.9647 60.7415C81.0528 59.9063 79.8859 59.6047 78.3906 59.8135C71.8684 60.7067 72.3977 68.1191 72.4248 68.44C72.4451 68.6953 72.3633 68.9482 72.1974 69.1433C72.0315 69.3383 71.795 69.4594 71.54 69.4801H71.4588Z" fill="white"/>
-<path d="M43.8196 49.4121C43.8196 49.4121 52.3201 51.1328 51.6207 59.0788C50.9214 67.0248 58.6491 71.367 53.912 75.9529C49.1749 80.5388 42.8613 77.9597 42.8613 77.9597L43.8196 49.4121Z" fill="#A5CFF3"/>
-<path opacity="0.39" d="M43.8196 49.4121C43.8196 49.4121 52.3201 51.1328 51.6207 59.0788C50.9214 67.0248 58.6491 71.367 53.912 75.9529C49.1749 80.5388 42.8613 77.9597 42.8613 77.9597L43.8196 49.4121Z" fill="white"/>
-<path d="M36.7834 41.5474C37.1427 42.4735 37.3767 43.4436 37.4789 44.4319C37.483 44.55 37.4638 44.6678 37.4223 44.7785C37.3808 44.8891 37.3178 44.9905 37.237 45.0768C37.1562 45.163 37.0592 45.2324 36.9515 45.281C36.8438 45.3296 36.7276 45.3564 36.6095 45.3599C36.2304 45.3968 35.8487 45.3229 35.5106 45.1473C35.1725 44.9716 34.8926 44.7016 34.7046 44.37L33.7503 43.0283C33.5878 42.7387 33.5191 42.4057 33.5537 42.0753C33.5883 41.745 33.7245 41.4335 33.9435 41.1839C34.7085 40.2134 36.4357 40.515 36.7834 41.5474Z" fill="#309C56"/>
-<path d="M34.1914 43.3647L34.2648 49.215L37.4834 48.9443L36.1349 44.7954L34.1914 43.3647Z" fill="#309C56"/>
-<path d="M33.9322 44.4202C33.9419 44.4563 33.9637 44.4879 33.9939 44.5097C34.0242 44.5316 34.0611 44.5423 34.0983 44.5401C34.3571 44.5364 34.6077 44.4483 34.812 44.2892C35.0163 44.1301 35.1632 43.9087 35.2304 43.6585C35.3105 43.3834 35.3093 43.091 35.227 42.8166C35.1448 42.5422 34.9849 42.2974 34.7667 42.1118C35.3168 42.059 35.8588 41.9422 36.3818 41.7638C36.5584 41.7048 36.7242 41.6173 36.8726 41.5048L36.9305 40.0896C36.9305 40.0896 37.2551 38.597 36.4166 38.5429C35.5782 38.4888 35.4738 39.4554 34.6817 39.0069C33.8896 38.5584 33.6771 38.3689 33.1362 38.8948C32.5953 39.4206 33.4646 39.7106 32.4252 40.0084C31.3859 40.3061 31.4825 40.7392 31.61 41.2148C31.6765 41.3736 31.7897 41.5084 31.9345 41.6014C32.8866 42.301 33.5873 43.2897 33.9322 44.4202Z" fill="#24285B"/>
-<path d="M35.4014 43.5542C35.4014 43.5542 35.1928 42.8968 34.7137 43.094C34.2345 43.2912 34.5282 44.254 35.2276 44.1303L35.4014 43.5542Z" fill="#309C56"/>
-<path d="M37.1426 42.6184L37.811 43.1365C37.8489 43.1659 37.8787 43.2043 37.8978 43.2482C37.917 43.2921 37.9248 43.3402 37.9206 43.3879C37.9163 43.4356 37.9002 43.4815 37.8736 43.5214C37.8471 43.5612 37.8109 43.5938 37.7685 43.616L37.1503 43.9331L37.1426 42.6184Z" fill="#309C56"/>
-<path opacity="0.31" d="M36.3197 45.3521C35.8588 45.3245 35.4122 45.1808 35.0215 44.9345C35.0215 44.9345 35.2224 46.0945 36.7255 46.5701L36.3197 45.3521Z" fill="#CE8172"/>
-<path d="M40.3421 48.6504C35.0334 48.7448 29.793 49.8662 24.9098 51.9525C24.1612 52.2693 23.4854 52.7364 22.9242 53.3248C22.3629 53.9132 21.9282 54.6105 21.6469 55.3736C21.3655 56.1368 21.2435 56.9495 21.2884 57.7617C21.3332 58.5739 21.5439 59.3683 21.9076 60.0957L30.3038 76.8577L45.8675 75.9336C45.8675 75.9336 48.7035 66.5144 48.1356 55.8617C48.021 53.8843 47.1451 52.0283 45.6918 50.6835C44.2385 49.3388 42.321 48.6101 40.3421 48.6504Z" fill="#A5CFF3"/>
-<path d="M30.3046 76.8578L25.668 102.486H27.9863L33.8169 88.566C35.8817 83.6379 39.5224 79.5349 44.1682 76.9003L45.876 75.9297L30.3046 76.8578Z" fill="#24285B"/>
-<path opacity="0.08" d="M29.018 54.1797C30.1208 55.0793 30.9729 56.2485 31.4921 57.5741C32.0113 58.8997 32.1799 60.3369 31.9816 61.7468C31.2706 66.5995 30.5249 70.3734 35.007 69.2404C39.4891 68.1075 41.8963 57.7062 41.8963 57.7062L47.1125 57.8338L46.2122 69.4338L43.1868 69.6426C42.471 69.6914 41.7912 69.9745 41.2521 70.4483C40.713 70.9221 40.3447 71.5602 40.2039 72.2642L39.3886 76.3126L30.3046 76.85L29.018 74.9167L23.3497 68.7919L22.6426 58.9938L29.018 54.1797Z" fill="black"/>
-<path d="M35.1968 67.5978L45.3047 68.3059L46.2738 54.4516L36.1659 53.7436L35.1968 67.5978Z" fill="#F6A009"/>
-<path d="M45.8689 75.9336L43.4695 102.486H40.3784C40.3784 102.486 41.1009 82.5069 35.5215 78.2536L45.8689 75.9336Z" fill="#24285B"/>
-<path d="M29.366 55.68C29.3445 54.8982 29.0821 54.1422 28.6146 53.5154C28.1471 52.8887 27.4975 52.4218 26.7547 52.1788C26.0118 51.9358 25.2121 51.9286 24.4649 52.158C23.7178 52.3874 23.0598 52.8424 22.581 53.4605C20.7959 55.7419 19.1499 59.5467 19.2851 65.7952C19.5749 79.1352 27.3993 82.7119 39.4739 68.1152L37.0937 66.2785C37.0937 66.2785 32.3412 70.3153 27.9866 70.3733C24.7293 70.4197 29.5862 62.0445 29.366 55.68Z" fill="#A5CFF3"/>
-<path opacity="0.39" d="M29.366 55.68C29.3445 54.8982 29.0821 54.1422 28.6146 53.5154C28.1471 52.8887 27.4975 52.4218 26.7547 52.1788C26.0118 51.9358 25.2121 51.9286 24.4649 52.158C23.7178 52.3874 23.0598 52.8424 22.581 53.4605C20.7959 55.7419 19.1499 59.5467 19.2851 65.7952C19.5749 79.1352 27.3993 82.7119 39.4739 68.1152L37.0937 66.2785C37.0937 66.2785 32.3412 70.3153 27.9866 70.3733C24.7293 70.4197 29.5862 62.0445 29.366 55.68Z" fill="white"/>
-<path opacity="0.08" d="M45.7785 60.9967C45.7785 60.9967 42.301 67.3883 35.346 65.5826L35.1953 67.8214L45.28 68.5058L45.7785 60.9967Z" fill="black"/>
-<path d="M37.5332 66.615C37.5332 66.615 38.9551 64.1016 40.6939 64.7667C42.4326 65.4318 39.4729 68.1152 39.4729 68.1152L37.5332 66.615Z" fill="#309C56"/>
-<path opacity="0.58" d="M53.1982 101.117C53.1982 101.117 49.9062 100.216 49.1914 97.1539C49.1914 97.1539 54.2879 96.1215 54.4347 101.388L53.1982 101.117Z" fill="#A5CFF3"/>
-<path opacity="0.73" d="M53.6004 100.789C53.6004 100.789 51.3014 97.1539 53.326 93.7512C53.326 93.7512 57.1899 96.2181 55.4782 100.796L53.6004 100.789Z" fill="#A5CFF3"/>
-<path d="M54.1914 100.792C54.1914 100.792 55.4085 96.9528 59.0792 96.2259C59.0792 96.2259 59.767 98.7199 56.7029 100.804L54.1914 100.792Z" fill="#A5CFF3"/>
-<path d="M51.8066 100.707L52.4712 105.274L56.6751 105.289L57.2933 100.731L51.8066 100.707Z" fill="#0C365A"/>
-<path opacity="0.08" d="M123.614 40.2249H106.021V46.2917H123.614V40.2249Z" fill="black"/>
-<path d="M124.621 74.0505H122.121V99.2303H124.621V74.0505Z" fill="#F1F8FD"/>
-<path d="M123.608 60.7917L113.543 76.2236H123.608H133.678L123.608 60.7917Z" fill="#F6A009"/>
-<path d="M127.152 97.0726H119.854V105.293H127.152V97.0726Z" fill="#0C365A"/>
-<path d="M124.242 66.5298H122.812V71.1698H124.242V66.5298Z" fill="#24285B"/>
-<path d="M124.242 72.0746H122.812V73.5053H124.242V72.0746Z" fill="#24285B"/>
-<path d="M136.169 13H86V50.9281H136.169V13Z" fill="#660014"/>
-<path d="M93.6044 36.2521V25.6357H100.758V27.4863H95.8489V30.016H100.39V31.8666H95.8489V34.4015H100.779V36.2521H93.6044ZM102.501 36.2521V28.2898H104.642V29.679H104.725C104.87 29.1848 105.114 28.8116 105.456 28.5593C105.798 28.3036 106.192 28.1757 106.638 28.1757C106.748 28.1757 106.868 28.1826 106.995 28.1965C107.123 28.2103 107.236 28.2293 107.332 28.2535V30.213C107.229 30.1819 107.085 30.1542 106.902 30.13C106.719 30.1058 106.551 30.0937 106.399 30.0937C106.074 30.0937 105.784 30.1646 105.528 30.3063C105.276 30.4445 105.076 30.638 104.927 30.8869C104.782 31.1357 104.709 31.4225 104.709 31.7474V36.2521H102.501ZM108.474 36.2521V28.2898H110.615V29.679H110.698C110.843 29.1848 111.087 28.8116 111.429 28.5593C111.771 28.3036 112.165 28.1757 112.611 28.1757C112.721 28.1757 112.841 28.1826 112.968 28.1965C113.096 28.2103 113.209 28.2293 113.305 28.2535V30.213C113.202 30.1819 113.058 30.1542 112.875 30.13C112.692 30.1058 112.524 30.0937 112.372 30.0937C112.047 30.0937 111.757 30.1646 111.501 30.3063C111.249 30.4445 111.049 30.638 110.9 30.8869C110.755 31.1357 110.682 31.4225 110.682 31.7474V36.2521H108.474ZM117.674 36.4076C116.869 36.4076 116.172 36.2365 115.585 35.8944C115.001 35.5488 114.55 35.0684 114.232 34.4533C113.914 33.8347 113.755 33.1176 113.755 32.302C113.755 31.4795 113.914 30.7607 114.232 30.1456C114.55 29.527 115.001 29.0466 115.585 28.7045C116.172 28.3589 116.869 28.1861 117.674 28.1861C118.479 28.1861 119.174 28.3589 119.758 28.7045C120.345 29.0466 120.798 29.527 121.116 30.1456C121.434 30.7607 121.593 31.4795 121.593 32.302C121.593 33.1176 121.434 33.8347 121.116 34.4533C120.798 35.0684 120.345 35.5488 119.758 35.8944C119.174 36.2365 118.479 36.4076 117.674 36.4076ZM117.684 34.6969C118.051 34.6969 118.357 34.5933 118.602 34.3859C118.847 34.1751 119.032 33.8883 119.157 33.5254C119.284 33.1625 119.348 32.7496 119.348 32.2865C119.348 31.8234 119.284 31.4104 119.157 31.0476C119.032 30.6847 118.847 30.3978 118.602 30.187C118.357 29.9762 118.051 29.8708 117.684 29.8708C117.315 29.8708 117.004 29.9762 116.751 30.187C116.502 30.3978 116.314 30.6847 116.186 31.0476C116.062 31.4104 116 31.8234 116 32.2865C116 32.7496 116.062 33.1625 116.186 33.5254C116.314 33.8883 116.502 34.1751 116.751 34.3859C117.004 34.5933 117.315 34.6969 117.684 34.6969ZM123.029 36.2521V28.2898H125.17V29.679H125.253C125.398 29.1848 125.641 28.8116 125.984 28.5593C126.326 28.3036 126.72 28.1757 127.166 28.1757C127.276 28.1757 127.395 28.1826 127.523 28.1965C127.651 28.2103 127.763 28.2293 127.86 28.2535V30.213C127.756 30.1819 127.613 30.1542 127.43 30.13C127.247 30.1058 127.079 30.0937 126.927 30.0937C126.602 30.0937 126.312 30.1646 126.056 30.3063C125.804 30.4445 125.603 30.638 125.455 30.8869C125.31 31.1357 125.237 31.4225 125.237 31.7474V36.2521H123.029Z" fill="white"/>
-</svg>