From 9eb4b29cb87570e22860ffd019ecb559ca4c99a9 Mon Sep 17 00:00:00 2001 From: axolotle Date: Thu, 14 Mar 2024 20:15:38 +0100 Subject: [PATCH] migration(bs5): update to new color functions --- app/src/components/CardCollapse.vue | 2 +- app/src/components/RecursiveListGroup.vue | 5 +++-- app/src/components/globals/YIcon.vue | 2 +- app/src/components/globals/YListGroupItem.vue | 6 +++--- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/app/src/components/CardCollapse.vue b/app/src/components/CardCollapse.vue index ef647168..37726594 100644 --- a/app/src/components/CardCollapse.vue +++ b/app/src/components/CardCollapse.vue @@ -78,7 +78,7 @@ export default { @each $color, $value in $theme-colors { &-#{$color} { background-color: $value; - color: color-yiq($value); + color: color-contrast($value); } } } diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue index 2e30a3dc..9a781ce9 100644 --- a/app/src/components/RecursiveListGroup.vue +++ b/app/src/components/RecursiveListGroup.vue @@ -112,8 +112,9 @@ export default { text-decoration: none; background-color: $list-group-hover-bg; - @include hover-focus() { - background-color: darken($list-group-hover-bg, 3%); + &:hover, + &:focus { + background-color: shade-color($gray-100, 3%); } } } diff --git a/app/src/components/globals/YIcon.vue b/app/src/components/globals/YIcon.vue index 15fbcc8c..e25beedc 100644 --- a/app/src/components/globals/YIcon.vue +++ b/app/src/components/globals/YIcon.vue @@ -48,7 +48,7 @@ export default { @each $color, $value in $theme-colors { &.#{$color} { background-color: $value; - color: color-yiq($value); + color: color-contrast($value); } } } diff --git a/app/src/components/globals/YListGroupItem.vue b/app/src/components/globals/YListGroupItem.vue index daf32ac0..3ed5c9f4 100644 --- a/app/src/components/globals/YListGroupItem.vue +++ b/app/src/components/globals/YListGroupItem.vue @@ -61,15 +61,15 @@ export default { @each $color, $value in $theme-colors { &-#{$color} { - color: theme-color-level($color, 6); + color: tint-color($value, 50%); [data-bs-theme='light'] & { - color: theme-color-level($color, -6); + color: shade-color($value, 60%); } .yuno-list-group-item-status { background-color: $value; - color: color-yiq($value); + color: color-contrast($value); } } }