From cc4e24f73461d97f4ce9057cd18b4cdd257adc8b Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 14 Oct 2024 14:23:57 -0500
Subject: [PATCH] Update theme tokens

---
 docs/pages-components/DocsKCard.vue |  4 ++--
 docs/pages/colors.vue               | 16 ++++++++--------
 docs/pages/kcard.vue                | 10 +++++-----
 docs/pages/kcardgrid.vue            | 12 ++++++------
 lib/KImg/index.vue                  |  6 +-----
 lib/KTable/index.vue                | 14 +++++++-------
 6 files changed, 29 insertions(+), 33 deletions(-)

diff --git a/docs/pages-components/DocsKCard.vue b/docs/pages-components/DocsKCard.vue
index 3e452e7c3..f734ee51d 100644
--- a/docs/pages-components/DocsKCard.vue
+++ b/docs/pages-components/DocsKCard.vue
@@ -45,14 +45,14 @@
       <div class="footer-wrapper">
         <div class="pills" :style="{ 'color': $themeTokens.annotation }">
           <span
-            :style="{ 'background-color': $themePalette.grey.v_50 }"
+            :style="{ 'background-color': $themePalette.grey.v_100 }"
           >
             <KIcon icon="readSolid" :style="{ fontSize: '13px', position: 'relative', top: '3px' }" />
             Read
           </span>
           <span
             v-if="!showMenuInFooter"
-            :style="{ 'background-color': $themePalette.grey.v_50 }"
+            :style="{ 'background-color': $themePalette.grey.v_100 }"
           >
             Short Activity
           </span>
diff --git a/docs/pages/colors.vue b/docs/pages/colors.vue
index 6f39cbcab..de29ed610 100644
--- a/docs/pages/colors.vue
+++ b/docs/pages/colors.vue
@@ -97,30 +97,30 @@
       <p>You can apply darken utilities <code>$darken1</code>, <code>$darken2</code>, and <code>$darken3</code> to palette colors and tokens to achieve their darker shades. They are available on every Vue component.</p>
 
       <DocsShowCode language="html">
-        <div :style="{ backgroundColor: $themePalette.red.v_1100 }">
+        <div :style="{ backgroundColor: $themePalette.red.v_600 }">
           base
         </div>
-        <div :style="{ backgroundColor: $darken1($themePalette.red.v_1100) }">
+        <div :style="{ backgroundColor: $darken1($themePalette.red.v_600) }">
           $darken1
         </div>
-        <div :style="{ backgroundColor: $darken2($themePalette.red.v_1100) }">
+        <div :style="{ backgroundColor: $darken2($themePalette.red.v_600) }">
           $darken2
         </div>
-        <div :style="{ backgroundColor: $darken3($themePalette.red.v_1100) }">
+        <div :style="{ backgroundColor: $darken3($themePalette.red.v_600) }">
           $darken3
         </div>
       </DocsShowCode>
       <DocsShow>
-        <div class="darken-block" :style="{ backgroundColor: $themePalette.red.v_1100 }">
+        <div class="darken-block" :style="{ backgroundColor: $themePalette.red.v_600 }">
           <code>base</code>
         </div>
-        <div class="darken-block" :style="{ backgroundColor: $darken1($themePalette.red.v_1100) }">
+        <div class="darken-block" :style="{ backgroundColor: $darken1($themePalette.red.v_600) }">
           <code>$darken1</code>
         </div>
-        <div class="darken-block" :style="{ backgroundColor: $darken2($themePalette.red.v_1100) }">
+        <div class="darken-block" :style="{ backgroundColor: $darken2($themePalette.red.v_600) }">
           <code>$darken2</code>
         </div>
-        <div class="darken-block" :style="{ backgroundColor: $darken3($themePalette.red.v_1100) }">
+        <div class="darken-block" :style="{ backgroundColor: $darken3($themePalette.red.v_600) }">
           <code>$darken3</code>
         </div>
       </DocsShow>
diff --git a/docs/pages/kcard.vue b/docs/pages/kcard.vue
index e2140295a..889979dee 100644
--- a/docs/pages/kcard.vue
+++ b/docs/pages/kcard.vue
@@ -256,12 +256,12 @@
             <template #footer>
               <div class="pills" :style="{ 'color': $themeTokens.annotation }">
                 <span
-                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                  :style="{ 'background-color': $themePalette.grey.v_100 }"
                 >
                   Short Activity
                 </span>
                 <span
-                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                  :style="{ 'background-color': $themePalette.grey.v_100 }"
                 >
                   Biology
                 </span>
@@ -281,7 +281,7 @@
             <template #footer>
               <div class="pills" :style="{ 'color': $themeTokens.annotation }">
                 <span
-                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                  :style="{ 'background-color': $themePalette.grey.v_100 }"
                 >
                   Short Activity
                 </span>
@@ -433,12 +433,12 @@
             <template #footer>
               <div class="pills" :style="{ 'color': $themeTokens.annotation }">
                 <span
-                  :style="{ 'backgroundColor': $themePalette.grey.v_50 }"
+                  :style="{ 'backgroundColor': $themePalette.grey.v_100 }"
                 >
                   Short Activity
                 </span>
                 <span
-                  :style="{ 'backgroundColor': $themePalette.grey.v_50 }"
+                  :style="{ 'backgroundColor': $themePalette.grey.v_100 }"
                 >
                   Biology
                 </span>
diff --git a/docs/pages/kcardgrid.vue b/docs/pages/kcardgrid.vue
index ac5293981..4b5fe735c 100644
--- a/docs/pages/kcardgrid.vue
+++ b/docs/pages/kcardgrid.vue
@@ -263,7 +263,7 @@
                 <span
                   v-for="(pill, i) in slicedPills"
                   :key="i"
-                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                  :style="{ 'background-color': $themePalette.grey.v_100 }"
                 >
                   {{ pill }}
                 </span>
@@ -325,7 +325,7 @@
                 <span
                   v-for="(pill, i) in slicedPills"
                   :key="i"
-                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                  :style="{ 'background-color': $themePalette.grey.v_100 }"
                 >
                   {{ pill }}
                 </span>
@@ -451,24 +451,24 @@
             <template #footer>
               <div class="pills" :style="{ 'color': $themeTokens.annotation }">
                 <span
-                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                  :style="{ 'background-color': $themePalette.grey.v_100 }"
                 >
                   <KIcon icon="readSolid" :style="{ fontSize: '13px', position: 'relative', top: '3px' }" />
                   Read
                 </span>
                 <span
-                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                  :style="{ 'background-color': $themePalette.grey.v_100 }"
                 >
                   Short Activity
                 </span>
                 <template v-if="windowBreakpoint > 3">
                   <span
-                    :style="{ 'background-color': $themePalette.grey.v_50 }"
+                    :style="{ 'background-color': $themePalette.grey.v_100 }"
                   >
                     Biology
                   </span>
                   <span
-                    :style="{ 'background-color': $themePalette.grey.v_50 }"
+                    :style="{ 'background-color': $themePalette.grey.v_100 }"
                   >
                     Ecology
                   </span>
diff --git a/lib/KImg/index.vue b/lib/KImg/index.vue
index d79e1db0e..3fe8cb47d 100644
--- a/lib/KImg/index.vue
+++ b/lib/KImg/index.vue
@@ -142,11 +142,7 @@
        * (3) a progressive loading experience as the colored background
        * is displayed while an image is loading.
        *
-<<<<<<< HEAD
-       * Its default value is `$themePalette.grey.v_50`.
-=======
        * Its default value is `$themePalette.grey.v_100`.
->>>>>>> release-v4
        */
       backgroundColor: {
         type: String,
@@ -179,7 +175,7 @@
       baseStyles() {
         const backgroundColor = this.backgroundColor
           ? this.backgroundColor
-          : this.$themePalette.grey.v_100;    
+          : this.$themePalette.grey.v_100;
         const borderRadius = this.borderRadius ? this.borderRadius : 0;
 
         return {
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index c3d743863..a8acb8814 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -24,9 +24,9 @@
                 'sticky-column': index === 0,
               }"
               :style="[getHeaderStyle(header),
-                       isColumnSortActive(index) ? { color: $themeBrand.primary.v_1000 } : { color: $themePalette.grey.v_800 },
+                       isColumnSortActive(index) ? { color: $themeBrand.primary.v_500 } : { color: $themePalette.grey.v_800 },
                        { backgroundColor: $themePalette.white } ,
-                       isColumnFocused(index) ? { backgroundColor: $themePalette.grey.v_50 } : {},
+                       isColumnFocused(index) ? { backgroundColor: $themePalette.grey.v_100 } : {},
                        { textAlign: getTextAlign(header.dataType) }]"
               role="columnheader"
               data-focus="true"
@@ -39,8 +39,8 @@
                 {{ header.label }}
               </slot>
               <span v-if="isColumnSortable(index)" class="sort-icon">
-                <span v-if="isColumnSortActive(index) && sortOrder === SORT_ORDER_ASC"><KIcon icon="dropup" :color="isColumnSortActive(index) ? $themeBrand.primary.v_1100 : $themePalette.grey.v_800 " /></span>
-                <span v-else-if="isColumnSortActive(index) && sortOrder === SORT_ORDER_DESC"><KIcon icon="dropdown" :color="isColumnSortActive(index) ? $themeBrand.primary.v_1100 : $themePalette.grey.v_800 " /></span>
+                <span v-if="isColumnSortActive(index) && sortOrder === SORT_ORDER_ASC"><KIcon icon="dropup" :color="isColumnSortActive(index) ? $themeBrand.primary.v_600 : $themePalette.grey.v_800 " /></span>
+                <span v-else-if="isColumnSortActive(index) && sortOrder === SORT_ORDER_DESC"><KIcon icon="dropdown" :color="isColumnSortActive(index) ? $themeBrand.primary.v_600 : $themePalette.grey.v_800 " /></span>
                 <span v-else><KIcon icon="sortColumn" :color="$themePalette.grey.v_800" /></span>
               </span>
             </th>
@@ -251,7 +251,7 @@
       getRowStyle() {
         return rowIndex => {
           return this.hoveredRowIndex === rowIndex || this.focusedRowIndex === rowIndex
-            ? { backgroundColor: this.$themePalette.grey.v_50 }
+            ? { backgroundColor: this.$themePalette.grey.v_100 }
             : {};
         };
       },
@@ -265,7 +265,7 @@
             (this.hoveredRowIndex === rowIndex || this.focusedRowIndex === rowIndex) &&
             colIndex === 0
           ) {
-            styles.push({ backgroundColor: this.$themePalette.grey.v_50 });
+            styles.push({ backgroundColor: this.$themePalette.grey.v_100 });
           }
           return styles;
         };
@@ -496,7 +496,7 @@
       },
       setHighlightHeader(header, highlight) {
         header.style.backgroundColor = highlight
-          ? this.$themePalette.grey.v_50
+          ? this.$themePalette.grey.v_100
           : this.$themePalette.white;
       },
       highlightHeader(colIndex) {