refactor: use variable for color

This will be used to change color for different doc later on

src/pages/05_quotation/preview/ViewForm.vue

@@ -234,7 +234,7 @@ function print() {
   <div class="toolbar">
     <PrintButton solid @click="print" />
   </div>
-  <div class="row justify-between container">
+  <div class="row justify-between container color-quotation">
     <section class="content" v-for="chunk in chunks">
       <ViewHeader
         v-if="!!branch && !!customer && !!details"
@@ -248,9 +248,9 @@ function print() {
         style="
           font-weight: 800;
           font-size: 16px;
-          color: var(--orange-5);
+          color: var(--main);
           display: block;
-          border-bottom: 2px solid var(--orange-5);
+          border-bottom: 2px solid var(--main);
         "
       >
         {{ $t('preview.productList') }}
@@ -362,14 +362,14 @@ function print() {
 
       <div class="row justify-between q-mb-md" style="width: 100%">
         <div
-          class="column set-width bg-color-orange full-height"
+          class="column set-width bg-color full-height"
           style="padding: 12px"
         >
           ({{ ThaiBahtText(summaryPrice.finalPrice) }})
         </div>
         <div
           class="row text-right border-5 items-center"
-          style="width: 40%; background: var(--orange-5); padding: 8px"
+          style="width: 40%; background: var(--main); padding: 8px"
         >
           <span style="color: white; font-weight: 600">ยอดรวมสุทธิ</span>
           <span
@@ -403,9 +403,9 @@ function print() {
         style="
           font-weight: 800;
           font-size: 16px;
-          color: var(--orange-5);
+          color: var(--main);
           display: block;
-          border-bottom: 2px solid var(--orange-5);
+          border-bottom: 2px solid var(--main);
         "
       >
         หมายเหตุ
@@ -432,9 +432,9 @@ function print() {
         style="
           font-weight: 800;
           font-size: 16px;
-          color: var(--orange-5);
+          color: var(--main);
           display: block;
-          border-bottom: 2px solid var(--orange-5);
+          border-bottom: 2px solid var(--main);
         "
       >
         ช่องทางซำระเงิน
@@ -463,6 +463,11 @@ function print() {
 </template>
 
 <style scoped>
+.color-quotation {
+  --main: var(--orange-6);
+  --main-hsl: var(--orange-6-hsl);
+}
+
 .toolbar {
   width: 100%;
   position: sticky;
@@ -481,7 +486,7 @@ table {
 }
 
 th {
-  background: var(--orange-5);
+  background: var(--main);
   color: white;
 
   padding: 4px;
@@ -497,12 +502,12 @@ td {
   width: 50%;
 }
 
-.bg-color-orange {
+.bg-color {
-  background-color: hsla(var(--orange-5-hsl) / 0.1);
+  background-color: hsla(var(--main-hsl) / 0.1);
 }
 
 .color-tr > tr:nth-child(odd) {
-  background-color: hsla(var(--orange-5-hsl) / 0.1);
+  background-color: hsla(var(--main-hsl) / 0.1);
 }
 
 .container {
@@ -545,7 +550,7 @@ td {
 
 hr {
   border-style: solid;
-  border-color: var(--orange-5);
+  border-color: var(--main);
 }
 
 @media print {

src/pages/05_quotation/preview/ViewHeader.vue

@@ -121,7 +121,7 @@ defineProps<{
     flex-direction: column;
 
     & > :first-child {
-      color: var(--orange-5);
+      color: var(--main);
     }
   }
 }
@@ -131,7 +131,7 @@ defineProps<{
     display: flex;
 
     & > :first-child {
-      color: var(--orange-5);
+      color: var(--main);
     }
 
     & > * {