diff --git a/src/components/KButton/KButton.vue b/src/components/KButton/KButton.vue index 22a05dede1..7fd890397f 100644 --- a/src/components/KButton/KButton.vue +++ b/src/components/KButton/KButton.vue @@ -170,15 +170,19 @@ export default { // TODO: [beta] remove :deep(.kong-icon) once once we remove the icon prop & slot // enforce icon size exported by @kong/icons because it's defined by the design system :deep(#{$kongponentsKongIconSelector}), :deep(.kong-icon) { + // override use-proper-token stylelint rule here to override the icon size /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */ height: var(--kui-icon-size-40, $kui-icon-size-40) !important; + // override use-proper-token stylelint rule here to override the icon size /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */ width: var(--kui-icon-size-40, $kui-icon-size-40) !important; // TODO: [beta] remove this once once we remove the icon prop & slot svg { + // override use-proper-token stylelint rule here to override the icon size /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */ height: var(--kui-icon-size-40, $kui-icon-size-40) !important; + // override use-proper-token stylelint rule here to override the icon size /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */ width: var(--kui-icon-size-40, $kui-icon-size-40) !important; } @@ -324,15 +328,19 @@ export default { // TODO: [beta] remove :deep(.kong-icon) once once we remove the icon prop & slot // enforce icon size exported by @kong/icons because it's defined by the design system :deep(#{$kongponentsKongIconSelector}), :deep(.kong-icon) { + // override use-proper-token stylelint rule here to override the icon size /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */ height: var(--kui-icon-size-50, $kui-icon-size-50) !important; + // override use-proper-token stylelint rule here to override the icon size /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */ width: var(--kui-icon-size-50, $kui-icon-size-50) !important; // TODO: [beta] remove this once once we remove the icon prop & slot svg { + // override use-proper-token stylelint rule here to override the icon size /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */ height: var(--kui-icon-size-50, $kui-icon-size-50) !important; + // override use-proper-token stylelint rule here to override the icon size /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */ width: var(--kui-icon-size-50, $kui-icon-size-50) !important; } @@ -358,15 +366,19 @@ export default { // TODO: [beta] remove :deep(.kong-icon) once once we remove the icon prop & slot // enforce icon size exported by @kong/icons because it's defined by the design system :deep(#{$kongponentsKongIconSelector}), :deep(.kong-icon) { + // override use-proper-token stylelint rule here to override the icon size /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */ height: var(--kui-icon-size-30, $kui-icon-size-30) !important; + // override use-proper-token stylelint rule here to override the icon size /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */ width: var(--kui-icon-size-30, $kui-icon-size-30) !important; // TODO: [beta] remove this once once we remove the icon prop & slot svg { + // override use-proper-token stylelint rule here to override the icon size /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */ height: var(--kui-icon-size-30, $kui-icon-size-30) !important; + // override use-proper-token stylelint rule here to override the icon size /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */ width: var(--kui-icon-size-30, $kui-icon-size-30) !important; } diff --git a/src/components/KLabel/KLabel.vue b/src/components/KLabel/KLabel.vue index cd90e966ef..c81bfa29a8 100644 --- a/src/components/KLabel/KLabel.vue +++ b/src/components/KLabel/KLabel.vue @@ -53,6 +53,7 @@ const hasTooltip = computed((): boolean => !!(props.info || slots.tooltip)) /* Component variables */ $kLabelSpacingX: var(--kui-space-40, $kui-space-40); +$kLabelRequiredDotSize: 6px; /* Component styles */ @@ -67,7 +68,7 @@ $kLabelSpacingX: var(--kui-space-40, $kui-space-40); margin-bottom: var(--kui-space-40, $kui-space-40); &.is-required { - margin-left: calc($kLabelSpacingX + 6px); // 6px to compensate for the 6px width of the dot + margin-left: calc($kLabelSpacingX + $kLabelRequiredDotSize); // 6px to compensate for the 6px width of the dot position: relative; &::before { @@ -75,11 +76,11 @@ $kLabelSpacingX: var(--kui-space-40, $kui-space-40); border-radius: var(--kui-border-radius-circle, $kui-border-radius-circle); bottom: calc(50% - 2px); // place the dot in the middle of the text content: ''; - height: 6px; + height: $kLabelRequiredDotSize; left: 0px; - margin-left: calc((-1 * $kLabelSpacingX) - 6px); // -6px to compensate for the 6px width + margin-left: calc((-1 * $kLabelSpacingX) - $kLabelRequiredDotSize); // -6px to compensate for the 6px width position: absolute; - width: 6px; + width: $kLabelRequiredDotSize; } } @@ -88,8 +89,10 @@ $kLabelSpacingX: var(--kui-space-40, $kui-space-40); .tooltip-trigger-icon { cursor: pointer; + // override use-proper-token stylelint rule here to override the icon size /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */ height: var(--kui-icon-size-30, $kui-icon-size-30) !important; + // override use-proper-token stylelint rule here to override the icon size /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */ width: var(--kui-icon-size-30, $kui-icon-size-30) !important; } diff --git a/src/components/KTooltip/KTooltip.vue b/src/components/KTooltip/KTooltip.vue index c83f9596d9..681a26e71f 100644 --- a/src/components/KTooltip/KTooltip.vue +++ b/src/components/KTooltip/KTooltip.vue @@ -11,7 +11,7 @@ trigger="hover" width="auto" > -