fix(*): apply token-var-usage stylelint rule

.stylelintrc.mjs

@@ -17,6 +17,7 @@ export default {
     'unit-disallowed-list': ['rem', 'em'],
     'order/properties-alphabetical-order': true,
     '@kong/design-tokens/use-proper-token': true,
+    '@kong/design-tokens/token-var-usage': [true, { severity: 'warning' }],
     '@stylistic/indentation': [2, { baseIndentLevel: 0 }],
     // Only allow @kong/design-tokens or `--kong-ui-*` CSS custom properties
     'custom-property-pattern': [

package.json

@@ -24,7 +24,7 @@
     "@commitlint/config-conventional": "^20.3.1",
     "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
     "@evilmartians/lefthook": "^2.0.16",
-    "@kong/design-tokens": "1.18.2",
+    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",
     "@kong/eslint-config-kong-ui": "^1.6.0",
     "@kong/kongponents": "9.50.0",
     "@stylistic/stylelint-plugin": "^5.0.1",
@@ -79,7 +79,7 @@
       "ignoreGhsas": [
         "GHSA-3ppc-4f35-3m26",
         "GHSA-23c5-xmqv-rm74",
-        "GHSA-7r86-cg39-jmmj"      
+        "GHSA-7r86-cg39-jmmj"
       ]
     },
     "overrides": {

packages/analytics/analytics-chart/package.json

@@ -28,7 +28,7 @@
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
     "@kong-ui-public/sandbox-layout": "workspace:^",
-    "@kong/design-tokens": "1.18.2",
+    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",
     "@kong/kongponents": "9.50.0",
     "@types/uuid": "^11.0.0",
     "file-saver": "^2.0.5",

packages/analytics/analytics-chart/src/components/CsvExportModal.vue

@@ -267,24 +267,24 @@ watch(tableData, () => {
     min-width: 580px;
 
     .selected-range {
-      font-size: $kui-font-size-30;
+      font-size: var(--kui-font-size-30, $kui-font-size-30);
     }
 
     .text-muted {
       color: rgba(0, 0, 0, 0.45) !important;
-      font-size: $kui-font-size-30;
+      font-size: var(--kui-font-size-30, $kui-font-size-30);
     }
 
     .vitals-table {
-      font-size: $kui-font-size-30;
-      margin-bottom: $kui-space-70;
-      margin-top: $kui-space-30;
+      font-size: var(--kui-font-size-30, $kui-font-size-30);
+      margin-bottom: var(--kui-space-70, $kui-space-70);
+      margin-top: var(--kui-space-30, $kui-space-30);
       width: 100%;
     }
 
     .k-table {
       thead {
-        border-top: $kui-border-width-10 solid $kui-color-border;
+        border-top: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
         height: auto;   // Match KTable legacy styling
       }
     }

packages/analytics/analytics-chart/src/components/SparklineChart.vue

@@ -381,8 +381,8 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .container {
   align-items: center;
-  border: 1px solid $kui-color-border-neutral-weaker;
-  border-radius: $kui-border-radius-20;
+  border: 1px solid var(--kui-color-border-neutral-weaker, $kui-color-border-neutral-weaker);
+  border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
   display: flex;
   height: 30px;
   justify-content: center;
@@ -391,21 +391,21 @@ onUnmounted(() => {
   position: relative;
 
   .no-data {
-    color: $kui-color-text-neutral;
+    color: var(--kui-color-text-neutral, $kui-color-text-neutral);
     cursor: default;
-    font-size: $kui-font-size-20;
+    font-size: var(--kui-font-size-20, $kui-font-size-20);
     user-select: none;
   }
 
   .label {
-    background-color: $kui-method-color-background-patch;
-    border-bottom: 1px solid $kui-color-border-neutral-weaker;
+    background-color: var(--kui-method-color-background-patch, $kui-method-color-background-patch);
+    border-bottom: 1px solid var(--kui-color-border-neutral-weaker, $kui-color-border-neutral-weaker);
     border-bottom-left-radius: 0;
-    border-bottom-right-radius: $kui-border-radius-20;
-    border-right: 1px solid $kui-color-border-neutral-weaker;
-    border-top-left-radius: $kui-border-radius-20;
+    border-bottom-right-radius: var(--kui-border-radius-20, $kui-border-radius-20);
+    border-right: 1px solid var(--kui-color-border-neutral-weaker, $kui-color-border-neutral-weaker);
+    border-top-left-radius: var(--kui-border-radius-20, $kui-border-radius-20);
     border-top-right-radius: 0;
-    color: $kui-color-text-primary;
+    color: var(--kui-color-text-primary, $kui-color-text-primary);
     cursor: default;
     font-size: 10px;
     left: 0;

packages/analytics/analytics-chart/src/components/TopNTable.vue

@@ -416,8 +416,8 @@ const translateChartUnit = (unit: string, value: number): string => {
   width: 100%;
 
   .top-n-card-description {
-    color: $kui-color-text-neutral;
-    font-size: $kui-font-size-20;
+    color: var(--kui-color-text-neutral, $kui-color-text-neutral);
+    font-size: var(--kui-font-size-20, $kui-font-size-20);
     text-align: right;
   }
 
@@ -449,7 +449,7 @@ const translateChartUnit = (unit: string, value: number): string => {
     }
 
     &-header-row {
-      border-bottom: $kui-border-width-10 solid $kui-color-border;
+      border-bottom: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
     }
 
     &-header-cell {
@@ -461,18 +461,18 @@ const translateChartUnit = (unit: string, value: number): string => {
       }
 
       .table-header-label {
-        color: $kui-color-text;
-        font-size: $kui-font-size-30;
-        font-weight: $kui-font-weight-semibold;
-        line-height: $kui-line-height-40;
+        color: var(--kui-color-text, $kui-color-text);
+        font-size: var(--kui-font-size-30, $kui-font-size-30);
+        font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
+        line-height: var(--kui-line-height-40, $kui-line-height-40);
       }
     }
 
     &-row {
-      border-bottom: $kui-border-width-10 solid $kui-color-border;
+      border-bottom: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
 
       &:first-of-type {
-        border-top: $kui-border-width-10 solid $kui-color-border;
+        border-top: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
       }
 
       &:last-of-type {
@@ -491,17 +491,17 @@ const translateChartUnit = (unit: string, value: number): string => {
       padding: var(--kui-space-50, $kui-space-50) var(--kui-space-0, $kui-space-0);
 
       &--name {
-        color: $kui-color-text-neutral-stronger;
-        font-size: $kui-font-size-30;
+        color: var(--kui-color-text-neutral-stronger, $kui-color-text-neutral-stronger);
+        font-size: var(--kui-font-size-30, $kui-font-size-30);
         min-width: 200px;
         padding-right: var(--kui-space-80, $kui-space-80);
       }
     }
   }
 
   :deep(a) {
-    color: $kui-color-text-primary;
-    font-weight: $kui-font-weight-bold;
+    color: var(--kui-color-text-primary, $kui-color-text-primary);
+    font-weight: var(--kui-font-weight-bold, $kui-font-weight-bold);
     text-decoration: none;
   }
 }

packages/analytics/analytics-chart/src/components/ZoomTimerange.vue

@@ -76,7 +76,7 @@ watch(() => [props.start, props.end], ([newStart, newEnd]) => {
     margin: var(--kui-space-30, $kui-space-30) var(--kui-space-10, $kui-space-10);
 
     .label {
-      color: var(--kui-color-text-netural-strong, $kui-color-text-neutral-strong);
+      color: var(--kui-color-text-neutral-strong, $kui-color-text-neutral-strong);
     }
   }
 }

packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue

@@ -122,7 +122,7 @@ const isDatasetVisible = (datasetIndex: number = 0, segmentIndex: number): boole
   max-height: inherit;
   overflow: auto;
   -ms-overflow-style: thin;
-  padding: $kui-space-40 calc(5% + $kui-space-20);
+  padding: var(--kui-space-40, $kui-space-40) calc(5% + var(--kui-space-20, $kui-space-20));
   width: 100%;
 
   // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
@@ -142,13 +142,13 @@ const isDatasetVisible = (datasetIndex: number = 0, segmentIndex: number): boole
     // Color bar preceding label
     .square-marker {
       height: 8px;
-      margin: $kui-space-0;
-      margin-right: $kui-space-30;
+      margin: var(--kui-space-0, $kui-space-0);
+      margin-right: var(--kui-space-30, $kui-space-30);
       width: 8px;
     }
 
     .label {
-      font-size: $kui-font-size-20;
+      font-size: var(--kui-font-size-20, $kui-font-size-20);
       white-space: nowrap;
 
       &.truncate-label {
@@ -159,8 +159,8 @@ const isDatasetVisible = (datasetIndex: number = 0, segmentIndex: number): boole
     }
 
     .sub-label {
-      font-size: $kui-font-size-20;
-      line-height: $kui-line-height-20;
+      font-size: var(--kui-font-size-20, $kui-font-size-20);
+      line-height: var(--kui-line-height-20, $kui-line-height-20);
       word-break: none;
     }
 

packages/analytics/analytics-chart/src/components/chart-plugins/ChartTooltip.vue

@@ -158,7 +158,7 @@ watch(tooltipEl, value => {
 }
 
 .tooltip-container {
-  background-color: $kui-color-background;
+  background-color: var(--kui-color-background, $kui-color-background);
   border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12), 0 5px 10px rgba(0, 0, 0, 0.24);
   max-width: 425px;

packages/analytics/analytics-chart/src/components/chart-types/SingleValue.vue

@@ -286,17 +286,17 @@ onMounted(() => {
     }
 
     .single-value {
-      color: $kui-color-text;
-      font-size: $kui-font-size-70;
-      font-weight: $kui-font-weight-bold;
-      line-height: $kui-line-height-70;
+      color: var(--kui-color-text, $kui-color-text);
+      font-size: var(--kui-font-size-70, $kui-font-size-70);
+      font-weight: var(--kui-font-weight-bold, $kui-font-weight-bold);
+      line-height: var(--kui-line-height-70, $kui-line-height-70);
     }
 
     .single-value-unit {
-      color: $kui-color-text;
-      font-size: $kui-font-size-60;
-      font-weight: $kui-font-weight-bold;
-      line-height: $kui-line-height-60;
+      color: var(--kui-color-text, $kui-color-text);
+      font-size: var(--kui-font-size-60, $kui-font-size-60);
+      font-weight: var(--kui-font-weight-bold, $kui-font-weight-bold);
+      line-height: var(--kui-line-height-60, $kui-line-height-60);
     }
 
     .single-value-trend {
@@ -342,13 +342,13 @@ onMounted(() => {
 
     @container (min-width: 300px) {
       .single-value {
-        font-size: $kui-font-size-100;
-        line-height: $kui-line-height-100;
+        font-size: var(--kui-font-size-100, $kui-font-size-100);
+        line-height: var(--kui-line-height-100, $kui-line-height-100);
       }
 
       .single-value-unit {
-        font-size: $kui-font-size-90;
-        line-height: $kui-line-height-90;
+        font-size: var(--kui-font-size-90, $kui-font-size-90);
+        line-height: var(--kui-line-height-90, $kui-line-height-90);
       }
     }
 
@@ -359,8 +359,8 @@ onMounted(() => {
       }
 
       .single-value-unit {
-        font-size: $kui-font-size-100;
-        line-height: $kui-line-height-100;
+        font-size: var(--kui-font-size-100, $kui-font-size-100);
+        line-height: var(--kui-line-height-100, $kui-line-height-100);
       }
     }
 

packages/analytics/analytics-chart/src/styles/chart.scss

@@ -1,7 +1,7 @@
 @use "./globals" as *;
 
-$legend-height: $kui-space-110 + 1px;
-$legend-height-values: $kui-space-140;
+$legend-height: calc(var(--kui-space-110, $kui-space-110) + 1px);
+$legend-height-values: var(--kui-space-140, $kui-space-140);
 
 .chart-parent {
   align-items: center;

packages/analytics/analytics-geo-map/package.json

@@ -40,7 +40,7 @@
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/design-tokens": "1.18.2",
+    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",
     "@kong/kongponents": "9.50.0",
     "@types/geobuf": "^3.0.4",
     "@types/geojson": "^7946.0.16",

packages/analytics/analytics-geo-map/src/components/MapLegend.vue

@@ -57,7 +57,7 @@ const {
   }
 
   .legend-item:not(:last-child) {
-    margin-bottom: var(--kui-space-20,$kui-space-20);
+    margin-bottom: var(--kui-space-20, $kui-space-20);
   }
 
   .legend-color {

packages/analytics/analytics-metric-provider/package.json

@@ -66,7 +66,7 @@
     "@kong-ui-public/analytics-config-store": "workspace:^",
     "@kong-ui-public/analytics-utilities": "workspace:^",
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/design-tokens": "1.18.2",
+    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",
     "@kong/kongponents": "9.50.0",
     "pinia": ">= 3.0.4 < 4"
   }

packages/analytics/analytics-utilities/package.json

@@ -67,7 +67,7 @@
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/design-tokens": "1.18.2",
+    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",
     "json-schema-to-ts": "^3.1.1",
     "vue": "^3.5.27"
   }

packages/analytics/dashboard-renderer/package.json

@@ -47,7 +47,7 @@
     "@kong-ui-public/entities-shared": "workspace:^",
     "@kong-ui-public/i18n": "workspace:^",
     "@kong-ui-public/sandbox-layout": "workspace:^",
-    "@kong/design-tokens": "1.18.2",
+    "@kong/design-tokens": "1.18.3-pr.613.e59423d.0",
     "@kong/icons": "^1.42.0",
     "@kong/kongponents": "9.50.0",
     "ajv": "^8.17.1",

packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue

@@ -324,12 +324,12 @@ defineExpose({
     background-color: white;
 
     .fullscreen-header {
-      margin-bottom: $kui-space-60;
+      margin-bottom: var(--kui-space-60, $kui-space-60);
     }
 
     .layout {
       background-color: white;
-      padding: $kui-space-60;
+      padding: var(--kui-space-60, $kui-space-60);
       transform: v-bind(scale);
       transform-origin: top;
     }
@@ -341,14 +341,14 @@ defineExpose({
 
   .fullscreen-control {
     align-items: center;
-    background-color: $kui-color-background-decorative-purple-weakest;
+    background-color: var(--kui-color-background-decorative-purple-weakest, $kui-color-background-decorative-purple-weakest);
     border-radius: 4px;
     bottom: -10px;
-    color: $kui-color-text-decorative-purple-strong;
+    color: var(--kui-color-text-decorative-purple-strong, $kui-color-text-decorative-purple-strong);
     cursor: pointer;
     display: inline-flex;
     font-size: 10px;
-    gap: $kui-space-10;
+    gap: var(--kui-space-10, $kui-space-10);
     line-height: 0;
     margin: 0;
     opacity: 0.5;