fix(*): misc alpha fixes

.eslintrc.cjs

@@ -1,5 +1,3 @@
-const deprecatedUtilityClasses = require('./deprecated-classes.cjs')
-
 module.exports = {
   root: true,
   parserOptions: {
@@ -38,8 +36,6 @@ module.exports = {
     'vue/attributes-order': ['error', {
       alphabetical: true,
     }],
-    // Disallow Kongponents utility classes
-    'vue/no-restricted-class': ['error', ...deprecatedUtilityClasses],
     '@typescript-eslint/no-explicit-any': 'off',
     // Avoids false errors like “'NodeListOf' is not defined”.
     'no-undef': 'off',

.github/CODEOWNERS

@@ -22,7 +22,6 @@
 # Dev tools
 /.eslintrc.js @adamdehaven @jillztom
 /.stylelintrc.cjs @adamdehaven @jillztom @portikM
-/deprecated-classes.cjs @adamdehaven @jillztom @portikM
 /.gitignore @adamdehaven @jillztom @kaiarrowood
 /vite.config.ts @adamdehaven @jillztom
 

sandbox/pages/SandboxBadge.vue

@@ -76,14 +76,6 @@
           Long truncating method badge
         </KBadge>
       </SandboxSectionComponent>
-      <SandboxSectionComponent title="backgroundColor & color">
-        <KBadge
-          :background-color="KUI_COLOR_BACKGROUND_PRIMARY_WEAK"
-          :color="KUI_COLOR_TEXT_INVERSE"
-        >
-          Custom
-        </KBadge>
-      </SandboxSectionComponent>
       <SandboxSectionComponent title="tooltip">
         <KBadge tooltip="I always tooltip">
           Truncation unnecessary
@@ -415,7 +407,6 @@
 import { inject } from 'vue'
 import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
 import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
-import { KUI_COLOR_BACKGROUND_PRIMARY_WEAK, KUI_COLOR_TEXT_INVERSE } from '@kong/design-tokens'
 import { KongIcon, WarningOutlineIcon, CloseIcon } from '@kong/icons'
 
 const handleIconClick = (): void => {

src/components/KDateTimePicker/KDateTimePicker.vue

@@ -37,7 +37,7 @@
         <CalIcon
           v-if="icon"
           class="calendar-icon"
-          :color="KUI_COLOR_TEXT_NEUTRAL"
+          :color="`var(--kui-color-text-neutral, ${KUI_COLOR_TEXT_NEUTRAL})`"
           decorative
           :size="KUI_ICON_SIZE_40"
         />

src/components/KModal/KModal.vue

@@ -47,7 +47,7 @@
                 @click="$emit('cancel')"
               >
                 <CloseIcon
-                  :color="KUI_COLOR_TEXT_NEUTRAL"
+                  :color="`var(--kui-color-text-neutral, ${KUI_COLOR_TEXT_NEUTRAL})`"
                   decorative
                 />
               </button>

src/components/KSkeleton/KSkeleton.vue

@@ -49,7 +49,7 @@
     <ProgressIcon
       v-else-if="type === 'spinner'"
       class="skeleton-spinner"
-      :color="KUI_COLOR_TEXT_NEUTRAL"
+      :color="`var(--kui-color-text-neutral, ${KUI_COLOR_TEXT_NEUTRAL})`"
       title="Loading"
     />
 

src/components/KSlideout/KSlideout.vue

@@ -32,7 +32,7 @@
             @click.stop="$emit('close')"
           >
             <CloseIcon
-              :color="KUI_COLOR_TEXT_NEUTRAL"
+              :color="`var(--kui-color-text-neutral, ${KUI_COLOR_TEXT_NEUTRAL})`"
               decorative
             />
           </button>

src/components/KStepper/KStep.vue

@@ -11,19 +11,19 @@
       <div class="step-circle">
         <CheckIcon
           v-if="state === 'completed'"
-          :color="KUI_COLOR_TEXT_INVERSE"
+          :color="`var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})`"
           :size="KUI_ICON_SIZE_40"
           title="Completed"
         />
         <ProgressIcon
           v-else-if="state === 'pending'"
-          :color="KUI_COLOR_TEXT_PRIMARY"
+          :color="`var(--kui-color-text-primary, ${KUI_COLOR_TEXT_PRIMARY})`"
           :size="KUI_ICON_SIZE_40"
           title="Pending"
         />
         <CloseIcon
           v-else-if="state === 'error'"
-          :color="KUI_COLOR_TEXT_INVERSE"
+          :color="`var(--kui-color-text-inverse, ${KUI_COLOR_TEXT_INVERSE})`"
           :size="KUI_ICON_SIZE_40"
           title="Error"
         />