changes

app/assets/styles/overrides-components.scss

@@ -7,7 +7,7 @@
 
 :root {
   // somehow this value keeps picking dark mode values despite [data-theme]="light"
-  --bulma-hr-background-color: var(--bulma-grey-90);
+  --bulma-hr-background-color: var(--bulma-white-ter);
 }
 
 .title,

app/components/TopMenu.vue

@@ -56,7 +56,7 @@
             v-if="!v.submenu"
             :class="[
               'navbar-item rounded-lg is-clipped font-medium',
-              currentTab.code === v.code ? 'has-text-primary-50 has-background-primary-95' : 'has-text-grey-30',
+              currentTab.code === v.code ? 'has-text-primary-50 has-background-primary-95' : 'has-text-grey-dark',
             ]"
             style="font-size: 13.5px"
             @click="changeTab(v)"
@@ -70,7 +70,7 @@
             <a
               :class="[
                 'navbar-link rounded-lg is-arrowless font-medium',
-                currentTab.code === v.code ? 'has-text-primary-50 has-background-primary-95' : 'has-text-grey-30',
+                currentTab.code === v.code ? 'has-text-primary-50 has-background-primary-95' : 'has-text-grey-dark',
               ]"
               @click="changeTab(v)"
               style="font-size: 13.5px"

app/components/common/Avatarbox.vue

@@ -11,7 +11,7 @@ const props = defineProps({
     @click="$emit('justclick')"
     class="rounded-full mx-0 px-0 size-10 font-bold is-flex is-justify-content-center is-align-items-center"
     :style="{
-      border: image ? 'none' : '1px solid var(--bulma-grey-70)',
+      border: image ? 'none' : '1px solid var(--bulma-grey-light)',
     }"
   >
     <figure

app/components/dashboard/AvatarBox.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="fs-13 font-semibold mx-0 px-0 is-flex is-justify-content-center is-align-items-center is-flex-shrink-0 rounded-full size-10"
-    style="border: 1px solid var(--bulma-grey-80)"
+    style="border: 1px solid var(--bulma-grey-lighter)"
     :style="image && 'border: none'"
   >
     <div>
@@ -21,8 +21,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--grey-100);
+  border: var(--bulma-grey-lighter);
-  border: 1px solid hsl(0, 0%, 85%);
   border-radius: 50%;
 }
 </style>

app/components/dashboard/DeliveryInteractive.vue

@@ -538,6 +538,6 @@
   border-left-width: 1px;
 }
 .border-gray-300 {
-  border-color: var(--bulma-grey-85);
+  border-color: var(--bulma-grey-lighter);
 }
 </style>

app/components/dashboard/Driver.vue

@@ -12,7 +12,7 @@ const props = defineProps({
   <div
     class="is-flex is-gap-2 fs-14 p-3 rounded-lg"
     :style="{
-      border: '1px solid var(--bulma-grey-80)',
+      border: '1px solid var(--bulma-grey-lighter)',
     }"
   >
     <AvatarBox :text="name.slice(0, 2)" />

app/components/dashboard/TopProduct.vue

@@ -13,7 +13,7 @@ const { $shortenCurrency } = useNuxtApp();
     <div class="is-flex is-gap-1 is-justify-content-space-between mb-2">
       <div>
         <p>{{ name }}</p>
-        <p class="fs-13 has-text-grey-60">Đã bán {{ sold_count }} sản phẩm</p>
+        <p class="fs-13 has-text-grey">Đã bán {{ sold_count }} sản phẩm</p>
       </div>
       <p class="font-semibold">{{ $shortenCurrency(revenue) }}</p>
     </div>

app/components/datatable/TableSetting.vue

@@ -234,8 +234,8 @@ input[type="color"]::-webkit-color-swatch {
 
 .box {
   box-shadow: none;
-  border: 1px solid var(--bulma-grey-90);
+  border: 1px solid var(--bulma-grey-lighter);
-  background-color: var(--bulma-grey-95);
+  background-color: var(--bulma-white-bis);
   height: 100%;
 }
 </style>

app/components/datatable/TimeOption.vue

@@ -2,7 +2,7 @@
   <div
     v-if="timeRanges || !enableTime"
     class="has-text-primary fixed-grid has-12-cols"
-    style="border-bottom: 2px solid var(--bulma-grey-80)"
+    style="border-bottom: 2px solid var(--bulma-grey-lighter)"
   >
     <div class="grid mb-3">
       <div
@@ -22,7 +22,7 @@
           @click="v.code !== current && changeOption(v)"
         >
           <span
-            :class="v.code === current ? 'font-bold has-text-orange' : 'font-medium has-text-grey-50'"
+            :class="v.code === current ? 'font-bold has-text-orange' : 'font-medium has-text-grey'"
             style="text-wrap: nowrap"
           >
             {{ v.name }}
@@ -32,7 +32,7 @@
               'tag rounded-md w-5 h-6 fs-13',
               v.code === current
                 ? 'font-bold has-text-orange has-background-orange-90'
-                : 'font-medium has-text-grey-40 has-background-grey-90',
+                : 'font-medium has-text-grey has-background-grey-white-ter',
             ]"
             >{{ v.count }}</span
           >

app/components/datepicker/PickDay.vue

@@ -68,7 +68,7 @@
         >
           <span
             v-if="m.disable"
-            class="fs-13 has-text-grey-80"
+            class="fs-13 has-text-grey-lighter"
           >
             {{ m.dayPrint }}
           </span>
@@ -84,7 +84,7 @@
                 {
                   'has-background-primary-50 has-text-white': m.date === curdate,
                   'has-background-success-50 has-text-white': m.date === today,
-                  'has-text-grey-70': m.currentMonth !== m.monthCondition,
+                  'has-text-grey-light': m.currentMonth !== m.monthCondition,
                 },
               ]"
             >

app/components/imports/Color.vue

@@ -7,6 +7,6 @@ const props = defineProps({
 <template>
   <div
     class="w-full h-4"
-    :style="{ backgroundColor: color, outline: '1px solid var(--bulma-grey-85)' }"
+    :style="{ backgroundColor: color, outline: '1px solid var(--bulma-grey-lighter)' }"
   ></div>
 </template>

app/components/imports/Imports.vue

@@ -1,9 +1,31 @@
 <script setup>
 import Products from "@/components/imports/Products.vue";
+const { $snackbar } = useNuxtApp();
 </script>
 <template>
   <div class="fixed-grid has-12-cols">
     <div class="grid">
+      <div class="cell is-col-span-12">
+        <button @click="$snackbar('heyo', 'Success')">click</button>
+        <hr />
+        <div class="is-flex">
+          <div class="size-16 has-background-black"></div>
+          <div class="size-16 has-background-black-bis"></div>
+          <div class="size-16 has-background-black-ter"></div>
+          <div class="size-16 has-background-grey-darker"></div>
+          <div class="size-16 has-background-grey-dark"></div>
+          <div class="size-16 has-background-grey"></div>
+          <div class="size-16 has-background-grey-light"></div>
+          <div class="size-16 has-background-grey-lighter"></div>
+          <div class="size-16 has-background-grey-lightest"></div>
+          <div class="size-16 has-background-white-ter"></div>
+          <div class="size-16 has-background-white-bis"></div>
+          <div class="size-16 has-background-white"></div>
+        </div>
+        <div class="is-flex">
+          <div class="size-16 has-background-grey"></div>
+        </div>
+      </div>
       <div class="cell is-col-span-12">
         <Products />
       </div>

app/components/imports/ProductVariantForm.vue

@@ -217,7 +217,7 @@ async function submit() {
               <div
                 v-if="uploadedImage"
                 class="relative"
-                style="border: 1px solid var(--bulma-grey-50)"
+                style="border: 1px solid var(--bulma-grey)"
               >
                 <figure class="image is-128x128">
                   <img :src="$buildFileUrl(uploadedImage.file)" />
@@ -244,7 +244,7 @@ async function submit() {
               <div
                 v-else
                 class="w-36 h-36 rounded-md is-flex is-align-items-center is-justify-content-center"
-                style="border: 1px solid var(--bulma-grey-80)"
+                style="border: 1px solid var(--bulma-grey-lighter)"
               >
                 <Icon
                   name="material-symbols:add-photo-alternate-outline-rounded"

app/components/imports/ProductVariantFormNew.vue

@@ -194,7 +194,7 @@ async function submit() {
               <div
                 v-if="uploadedImage"
                 class="relative"
-                style="border: 1px solid var(--bulma-grey-50)"
+                style="border: 1px solid var(--bulma-grey)"
               >
                 <figure class="image is-128x128">
                   <img :src="$buildFileUrl(uploadedImage.file)" />
@@ -221,7 +221,7 @@ async function submit() {
               <div
                 v-else
                 class="w-36 h-36 rounded-md is-flex is-align-items-center is-justify-content-center"
-                style="border: 1px solid var(--bulma-grey-80)"
+                style="border: 1px solid var(--bulma-grey-lighter)"
               >
                 <Icon
                   name="material-symbols:add-photo-alternate-outline-rounded"

app/components/inventory/SelectedInvItem.vue

@@ -45,7 +45,7 @@ const emit = defineEmits("unselect");
                 </div>
                 <div>
                   <p class="font-semibold mb-1">{{ invItem.name }}</p>
-                  <p class="has-text-grey-40">SKU: {{ invItem.sku }}</p>
+                  <p class="has-text-grey-dark">SKU: {{ invItem.sku }}</p>
                   <p class="fs-12 has-text-grey">{{ invItem.category }}</p>
                 </div>
               </div>
@@ -68,19 +68,19 @@ const emit = defineEmits("unselect");
               <p class="fs-15 font-semibold mb-4">Tóm tắt tồn kho</p>
               <div class="is-flex is-flex-direction-column">
                 <div class="py-2 is-flex is-justify-content-space-between">
-                  <p class="has-text-grey-40">Tồn hiện tại</p>
+                  <p class="has-text-grey">Tồn hiện tại</p>
                   <p class="fs-14 font-semibold">{{ invItem.stock }}</p>
                 </div>
-                <hr class="my-1 has-background-grey-95" />
+                <hr class="my-1" />
                 <div class="py-2 is-flex is-justify-content-space-between">
-                  <p class="has-text-grey-40">Đặt trước</p>
+                  <p class="has-text-grey">Đặt trước</p>
                   <p class="fs-14 font-semibold has-text-orange">
                     {{ invItem.preorder }}
                   </p>
                 </div>
-                <hr class="my-1 has-background-grey-95" />
+                <hr class="my-1" />
                 <div class="py-2 is-flex is-justify-content-space-between">
-                  <p class="has-text-grey-40">Khả dụng</p>
+                  <p class="has-text-grey">Khả dụng</p>
                   <p class="fs-14 font-semibold has-text-green">
                     {{ invItem.available }}
                   </p>
@@ -89,7 +89,7 @@ const emit = defineEmits("unselect");
             </div>
             <div class="mt-6">
               <p class="fs-15 font-semibold mb-4">Vị trí lưu kho</p>
-              <div class="p-4 rounded-md has-background-grey-95">
+              <div class="p-4 rounded-md has-background-white-bis">
                 <div class="is-flex is-gap-1">
                   <Icon
                     name="material-symbols:location-on-outline-rounded"
@@ -106,16 +106,16 @@ const emit = defineEmits("unselect");
             </div>
             <div class="mt-6">
               <p class="fs-15 font-semibold mb-4">Thông tin lô hàng</p>
-              <div class="p-4 rounded-md has-background-grey-95">
+              <div class="p-4 rounded-md has-background-white-bis">
                 <p class="fs-13 has-text-grey">Mã lô</p>
                 <p class="mt-1 is-family-monospace">{{ invItem.batch }}</p>
               </div>
-              <div class="p-4 mt-4 rounded-md has-background-grey-95">
+              <div class="p-4 mt-4 rounded-md has-background-white-bis">
                 <div class="is-flex is-gap-1 is-align-items-center">
                   <Icon
                     name="material-symbols:calendar-today-outline-rounded"
                     :size="18"
-                    class="has-text-grey-50"
+                    class="has-text-grey"
                   />
                   <p class="fs-13 has-text-grey">Hạn sử dụng</p>
                 </div>
@@ -127,7 +127,7 @@ const emit = defineEmits("unselect");
               <div
                 v-for="move in invItem.moveHistory"
                 :key="move.id"
-                class="p-4 mb-4 rounded-md has-background-grey-95 has-text-grey-40 fs-12"
+                class="p-4 mb-4 rounded-md has-background-white-bis has-text-grey fs-12"
               >
                 <div class="is-flex is-justify-content-space-between mb-1">
                   <div class="is-flex is-gap-1 is-align-items-center">

app/components/orders/OrderDeliveryTab.vue

@@ -12,10 +12,10 @@ const props = defineProps({
         {{ order.delivery_status__name }}
       </p>
     </div>
-    <div class="p-4 rounded-md has-background-grey-95">
+    <div class="p-4 rounded-md has-background-white-bis">
       <p class="has-text-grey">Địa chỉ giao hàng</p>
-      <p class="mt-1 has-text-grey-10">{{ order.customer__name }}</p>
+      <p class="mt-1 has-text-grey-darker">{{ order.customer__name }}</p>
-      <p class="has-text-grey-10">{{ order.customer__phone }}</p>
+      <p class="has-text-grey-darker">{{ order.customer__phone }}</p>
     </div>
   </div>
 </template>

app/components/orders/OrderHistoryTab.vue

@@ -79,7 +79,7 @@ const historyItems = [
             </p>
           </div>
           <hr
-            class="mt-4 mb-0 has-background-grey-95"
+            class="mt-4 mb-0"
             style="height: 2px"
           />
         </div>

app/components/orders/OrderKanbanCard.vue

@@ -23,7 +23,7 @@ const emit = defineEmits(["selectOrder", "unselect"]);
       <div class="is-flex is-flex-direction-column is-gap-2">
         <!-- customer info -->
         <div>
-          <p class="has-text-grey-10">{{ order.customer__name }}</p>
+          <p class="has-text-grey-darker">{{ order.customer__name }}</p>
           <div class="has-text-grey fs-13 mt-1 is-flex is-gap-1 is-align-items-center">
             <Icon name="material-symbols:call-outline-rounded" />
             <p>{{ order.customer__phone }}</p>
@@ -31,12 +31,12 @@ const emit = defineEmits(["selectOrder", "unselect"]);
         </div>
         <!-- product info -->
         <div>
-          <p class="fs-24 has-text-grey-10 font-bold">
+          <p class="fs-24 has-text-grey-darker font-bold">
             {{ $shortenCurrency(order.total) }}
           </p>
           <p class="fs-13 has-text-grey">{{ order.order__products.length }} sản phẩm</p>
         </div>
-        <hr class="m-0" />
+        <hr class="m-0 has-background-grey-lighter" />
         <div class="is-flex is-flex-direction-column is-gap-0.5 fs-13 has-text-grey">
           <p class="is-flex is-align-items-center is-gap-0.5">
             <Icon

app/components/orders/OrderPaymentTab.vue

@@ -8,7 +8,7 @@ const { $numtoString } = useNuxtApp();
 <template>
   <div>
     <div class="is-flex is-gap-2">
-      <div class="is-flex-grow-1 p-3 rounded-md has-background-grey-95">
+      <div class="is-flex-grow-1 p-3 rounded-md has-background-white-bis">
         <p class="fs-13 has-text-grey">Tổng tiền</p>
         <p class="font-bold">
           {{ $numtoString(order.total, { hasUnit: true }) }}

app/components/orders/OrderProductTab.vue

@@ -12,7 +12,7 @@ const { $numtoString } = useNuxtApp();
       <div
         v-for="product in order.order__products"
         :key="product.id"
-        class="p-3 has-background-grey-95 rounded-md"
+        class="p-3 has-background-white-ter rounded-md"
       >
         <div class="fs-15 is-flex is-justify-content-space-between">
           <p class="">{{ product.name }}</p>
@@ -20,7 +20,7 @@ const { $numtoString } = useNuxtApp();
             {{ $numtoString(product.total, { hasUnit: true }) }}
           </p>
         </div>
-        <div class="is-flex is-gap-8 fs-13 has-text-grey-50 mt-1">
+        <div class="is-flex is-gap-8 fs-13 has-text-grey-dark mt-1">
           <p>SL: {{ product.quantity }}</p>
           <p>Đơn giá: {{ $numtoString(product.unit_price, { hasUnit: true }) }}</p>
           <p>

app/components/orders/OrderReceiptTab.vue

@@ -9,7 +9,7 @@ const props = defineProps({
     <Icon
       name="material-symbols:receipt-long-outline-rounded"
       :size="50"
-      class="has-text-grey-70"
+      class="has-text-grey-light"
     />
     <p>Chưa có hoá đơn</p>
     <button class="button is-purple">Tạo hoá đơn</button>

app/components/orders/OrdersKanban.vue

@@ -25,7 +25,7 @@ const emit = defineEmits(["selectOrder", "unselect"]);
               `has-background-${status.color}-90`,
             ]"
           >
-            <p class="font-semibold has-text-grey-10">{{ status.name }}</p>
+            <p class="font-semibold has-text-grey-darker">{{ status.name }}</p>
             <p
               class="px-2 py-1 font-semibold rounded-lg has-background-white"
               :style="{ border: `1px solid var(--bulma-${status.color}-60)` }"
@@ -33,8 +33,8 @@ const emit = defineEmits(["selectOrder", "unselect"]);
               {{ orders.filter((o) => o.status === status.id).length }}
             </p>
           </div>
-          <hr class="m-0 has-background-grey-80" />
+          <hr class="m-0 has-background-grey-lighter" />
-          <div class="has-background-grey-95 p-4">
+          <div class="has-background-white-bis p-4">
             <OrderKanbanCard
               v-if="orders.filter((o) => o.status === status.id).length > 0"
               v-for="order in orders.filter((o) => o.status === status.id)"

app/components/orders/PipelinePhase.vue

@@ -29,7 +29,7 @@ const progressUnfilled = computed(() => `var(--bulma-${props.color}-85)`);
     <Icon
       name="material-symbols:arrow-forward-rounded"
       :size="24"
-      class="has-text-grey-70"
+      class="has-text-grey-light"
     />
   </div>
 </template>

app/components/snackbar/SnackBar.vue

@@ -34,13 +34,11 @@ function loadDynamicComponent() {
 watchEffect(() => {
   loadDynamicComponent();
 });
-setTimeout(() => store.commit("snackbar", undefined), 3900);
+// setTimeout(() => store.commit("snackbar", undefined), 3900);
 </script>
 
 <template>
-  <div
+  <div class="snackbar is-flex is-align-items-center is-gap-3 pl-3 pr-1.5 py-2 rounded-md has-text-white">
-    class="snackbar is-flex is-align-items-center is-gap-3 pl-3 pr-1.5 py-2 rounded-md has-background-grey-25 has-text-white"
-  >
     <Info
       v-if="component === 'Info'"
       v-bind="vbind"
@@ -80,6 +78,7 @@ setTimeout(() => store.commit("snackbar", undefined), 3900);
   margin-inline: auto;
   width: fit-content;
   max-width: 500px;
+  background-color: hsl(from var(--bulma-grey-darker) h s l / 0.9);
 }
 
 .button.is-ghost {
@@ -87,6 +86,6 @@ setTimeout(() => store.commit("snackbar", undefined), 3900);
 }
 .button.is-ghost:hover,
 .button.is-ghost.is-hovered {
-  color: hsl(0, 0%, 100%, 0.6);
+  color: hsl(from white h s l / 0.6);
 }
 </style>

my-bulma-project.scss

@@ -8,7 +8,6 @@ $cyan: #03c2c2;
 $blue: #1678ff;
 $purple: #833bff;
 $pink: #ff2bdd;
-$grey: #767676;
 
 @use "bulma/sass" with (
   $family-primary: string.unquote("'Inter', 'SF Pro', 'Helvetica', 'Arial', sans-serif"),
@@ -28,7 +27,6 @@ $grey: #767676;
     "blue": $blue,
     "purple": $purple,
     "pink": $pink,
-    "grey": $grey,
   ),
   $spacing-values: (
     "auto": auto,