diff --git a/src/components/KCopy/KCopy.vue b/src/components/KCopy/KCopy.vue index fbf78fa961..5d07de635a 100644 --- a/src/components/KCopy/KCopy.vue +++ b/src/components/KCopy/KCopy.vue @@ -37,6 +37,7 @@
- + > + + diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue index 2757ae845b..3a87205c17 100644 --- a/src/components/KSelect/KSelect.vue +++ b/src/components/KSelect/KSelect.vue @@ -61,15 +61,16 @@ @update:model-value="onQueryChange" > @@ -150,13 +151,16 @@ const getToastIcon = (appearance?: ToasterAppearance): ToastIcon => { } .toaster-close-icon { + @include defaultButtonReset; + border-radius: var(--kui-border-radius-20, $kui-border-radius-20); - cursor: pointer; margin-left: var(--kui-space-auto, $kui-space-auto); outline: none; &:hover, &:focus { - color: var(--kui-color-text-neutral-weaker, $kui-color-text-neutral-weaker) !important; + :deep(#{$kongponentsKongIconSelector}) { + color: var(--kui-color-text-neutral-weaker, $kui-color-text-neutral-weaker) !important; + } } &:focus-visible { diff --git a/src/components/KTruncate/KTruncate.vue b/src/components/KTruncate/KTruncate.vue index 9bdea040a0..a22ca50ffc 100644 --- a/src/components/KTruncate/KTruncate.vue +++ b/src/components/KTruncate/KTruncate.vue @@ -42,14 +42,14 @@ :collapse="handleToggleClick" name="collapse-trigger" > - + > + +
@@ -97,7 +97,7 @@ import { onMounted, onUnmounted, ref, nextTick, computed } from 'vue' import useUtilities from '@/composables/useUtilities' import { ChevronUpIcon } from '@kong/icons' -import { KUI_SPACE_40 } from '@kong/design-tokens' +import { KUI_ICON_SIZE_30, KUI_SPACE_40 } from '@kong/design-tokens' import { ResizeObserverHelper } from '@/utilities/resizeObserverHelper' const { getSizeFromString } = useUtilities() @@ -284,10 +284,11 @@ onUnmounted(() => { } .collapse-trigger { + @include defaultButtonReset; + background-color: var(--kui-color-background-primary-weakest, $kui-color-background-primary-weakest); border-radius: var(--kui-border-radius-round, $kui-border-radius-round); color: var(--kui-color-text-primary, $kui-color-text-primary); - cursor: pointer; outline: none; padding: var(--kui-space-20, $kui-space-20); @@ -297,13 +298,19 @@ onUnmounted(() => { &:hover { background-color: var(--kui-color-background-primary-weaker, $kui-color-background-primary-weaker); - color: var(--kui-color-text-primary-strong, $kui-color-text-primary-strong) !important; + + :deep(#{$kongponentsKongIconSelector}) { + color: var(--kui-color-text-primary-strong, $kui-color-text-primary-strong) !important; + } } &:focus, &:focus-within { background-color: var(--kui-color-background-primary-weak, $kui-color-background-primary-weak); - color: var(--kui-color-text-primary-stronger, $kui-color-text-primary-stronger) !important; + + :deep(#{$kongponentsKongIconSelector}) { + color: var(--kui-color-text-primary-stronger, $kui-color-text-primary-stronger) !important; + } } } diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 2eec14a900..633e558452 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -4,6 +4,7 @@ @import "@/styles/mixins/cards"; @import "@/styles/mixins/badges"; @import "@/styles/mixins/loaders"; +@import "@/styles/mixins/buttons"; @import "@/styles/tmp-variables"; diff --git a/src/styles/mixins/_buttons.scss b/src/styles/mixins/_buttons.scss new file mode 100644 index 0000000000..f2385c7d50 --- /dev/null +++ b/src/styles/mixins/_buttons.scss @@ -0,0 +1,9 @@ +/* Buttons mixins */ + +@mixin defaultButtonReset { + background-color: var(--kui-color-background-transparent, $kui-color-background-transparent); + border: none; + color: inherit; + cursor: pointer; + padding: var(--kui-space-0, $kui-space-0); +}