Skip to content

Commit

Permalink
Update theme tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlexVelezLl
AlexVelezLl committed Oct 14, 2024
1 parent d215525 commit cc4e24f
Show file tree
Hide file tree
Showing 6 changed files with 29 additions and 33 deletions.
4 changes: 2 additions & 2 deletions docs/pages-components/DocsKCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
16 changes: 8 additions & 8 deletions docs/pages/colors.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions docs/pages/kcard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
12 changes: 6 additions & 6 deletions docs/pages/kcardgrid.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
6 changes: 1 addition & 5 deletions lib/KImg/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 {
Expand Down
14 changes: 7 additions & 7 deletions lib/KTable/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
Expand Down Expand Up @@ -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 }
: {};
};
},
Expand All @@ -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;
};
Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit cc4e24f

Please sign in to comment.