fix(*): add design tokens plugin (#1024)

* fix(*): add design tokens plugin * fix: indent
Kong · Dec 20, 2023 · 0d6b971 · 0d6b971
1 parent 2e6591c
commit 0d6b971
Show file tree

Hide file tree

Showing 39 changed files with 99 additions and 92 deletions.
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -15,6 +15,7 @@ module.exports = {
       rules: {
         // Disallow relative font units
         'unit-disallowed-list': ['rem', 'em'],
+        '@kong/design-tokens/use-proper-token': true,
         // Only allow @kong/design-tokens or `--kong-ui-*` CSS custom properties
         'custom-property-pattern': [
           "^(kui-|kong-ui-).+$",
@@ -28,6 +29,9 @@ module.exports = {
       }
     }
   ],
-  plugins: [ 'stylelint-order' ],
+  plugins: [
+    'stylelint-order',
+    '@kong/design-tokens/stylelint-plugin',
+  ],
   rules: { 'order/properties-alphabetical-order': true }
 }
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "@commitlint/config-conventional": "^18.4.3",
     "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
     "@evilmartians/lefthook": "^1.5.5",
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "@rushstack/eslint-patch": "^1.5.1",
     "@types/flat": "^5.0.5",

diff --git a/packages/analytics/analytics-chart/package.json b/packages/analytics/analytics-chart/package.json
@@ -27,7 +27,7 @@
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
     "@kong-ui-public/sandbox-layout": "workspace:^",
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "@types/uuid": "^9.0.7",
     "file-saver": "^2.0.5",

diff --git a/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue b/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue
@@ -273,12 +273,12 @@ const positionToClass = (position: `${ChartLegendPosition}`) => {
 
     .label {
       font-size: $kui-font-size-30;
-      line-height: $kui-font-size-50;
+      line-height: $kui-line-height-50;
     }
 
     .sub-label {
       font-size: $kui-font-size-20;
-      line-height: $kui-font-size-30;
+      line-height: $kui-line-height-20;
       word-break: none;
     }
 

diff --git a/packages/analytics/analytics-chart/src/components/chart-plugins/ChartTooltip.vue b/packages/analytics/analytics-chart/src/components/chart-plugins/ChartTooltip.vue
@@ -221,7 +221,7 @@ function handleMouseUp() {
     display: flex;
     flex-direction: column;
     margin: $kui-space-40;
-    min-height: $kui-space-80;
+    min-height: 24px;
     padding-bottom: $kui-space-40;
 
     .title {

diff --git a/packages/analytics/analytics-utilities/package.json b/packages/analytics/analytics-utilities/package.json
@@ -60,6 +60,6 @@
     "date-fns-tz": "^2.0.0"
   },
   "devDependencies": {
-    "@kong/design-tokens": "^1.12.1"
+    "@kong/design-tokens": "1.12.3"
   }
 }
diff --git a/packages/analytics/dashboard-renderer/package.json b/packages/analytics/dashboard-renderer/package.json
@@ -41,7 +41,7 @@
     "@kong-ui-public/analytics-chart": "workspace:^",
     "@kong-ui-public/i18n": "workspace:^",
     "@kong-ui-public/sandbox-layout": "workspace:^",
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "json-schema-to-ts": "^2.9.2",
     "vue": "^3.3.11"

diff --git a/packages/analytics/metric-cards/package.json b/packages/analytics/metric-cards/package.json
@@ -42,7 +42,7 @@
     "vue": "^3.3.11"
   },
   "devDependencies": {
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "vue": "^3.3.11"
   },

diff --git a/packages/analytics/metric-cards/src/components/display/MetricsCard.vue b/packages/analytics/metric-cards/src/components/display/MetricsCard.vue
@@ -329,7 +329,7 @@ $row-gap-size: 12px;
       }
       &.negative {
         background-color: var(--kong-ui-metric-card-trend-bg-negative, $kui-color-background-danger-weakest);
-        color: var(--kong-ui-metric-card-trend-negative, $kui-color-border-danger-strong);
+        color: var(--kong-ui-metric-card-trend-negative, $kui-color-text-danger-strong);
       }
       &.neutral {
         background-color: var(--kong-ui-metric-card-trend-bg-neutral, $kui-color-background-neutral-weaker);

diff --git a/packages/core/app-layout/package.json b/packages/core/app-layout/package.json
@@ -49,7 +49,7 @@
     "lodash.clonedeep": "^4.5.0"
   },
   "devDependencies": {
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "@types/lodash.clonedeep": "^4.5.9",
     "vue": "^3.3.11",

diff --git a/packages/core/app-layout/src/components/aboutSection/AppAboutSection.vue b/packages/core/app-layout/src/components/aboutSection/AppAboutSection.vue
@@ -205,7 +205,7 @@ const displayModified = computed(() => {
 
   :deep(hr),
   hr {
-    background-color: $kui-color-border;
+    background-color: $kui-color-background-disabled;
     border: none;
     height: 1px;
     margin: $kui-space-0;

diff --git a/packages/core/app-layout/src/components/navbar/AccountDropdown.vue b/packages/core/app-layout/src/components/navbar/AccountDropdown.vue
@@ -73,7 +73,7 @@ defineProps({
 
     &:focus-visible {
       border-radius: $kui-border-radius-round;
-      outline: $kui-border-width-10 solid $kui-navigation-color-text !important;
+      outline: 1px solid #bee2ff !important;
       outline-offset: 2px;
     }
   }

diff --git a/packages/core/app-layout/src/components/sidebar/AppSidebar.vue b/packages/core/app-layout/src/components/sidebar/AppSidebar.vue
@@ -410,6 +410,7 @@ onBeforeUnmount(() => {
 }
 
 .sidebar-level-divider {
+  /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
   background-color: $kui-navigation-color-border-divider;
   height: 1px;
   margin: $kui-space-80 auto;

diff --git a/packages/core/app-layout/src/components/sidebar/SidebarItem.vue b/packages/core/app-layout/src/components/sidebar/SidebarItem.vue
@@ -225,6 +225,7 @@ const navigate = (event: Event, item: SidebarPrimaryItem | SidebarSecondaryItem,
 
       // Add a top border to the ul element, offset from the left and right to prevent overlap
       &:before {
+        /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
         background-color: $kui-navigation-color-border;
         content: '';
         height: 1px;
@@ -350,7 +351,7 @@ const navigate = (event: Event, item: SidebarPrimaryItem | SidebarSecondaryItem,
 
         span {
           height: auto;
-          min-width: $kui-space-0; // Important: must be present to truncate the text
+          min-width: 0; // Important: must be present to truncate the text
         }
       }
     }

diff --git a/packages/core/copy-uuid/package.json b/packages/core/copy-uuid/package.json
@@ -42,7 +42,7 @@
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "vue": "^3.3.11"
   },

diff --git a/packages/core/core/package.json b/packages/core/core/package.json
@@ -58,7 +58,7 @@
     "date-fns": "^2.30.0"
   },
   "devDependencies": {
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "axios": "^1.6.2",
     "swrv": "^1.0.4"
   }

diff --git a/packages/core/documentation/package.json b/packages/core/documentation/package.json
@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "axios": "^1.6.2",
     "vue": "^3.3.11"

diff --git a/packages/core/error-boundary/package.json b/packages/core/error-boundary/package.json
@@ -38,7 +38,7 @@
     "test:unit:open": "cross-env FORCE_COLOR=1 vitest --ui"
   },
   "devDependencies": {
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/icons": "^1.8.3",
     "vue": "^3.3.11"
   },

diff --git a/packages/core/forms/package.json b/packages/core/forms/package.json
@@ -60,7 +60,7 @@
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "@types/lodash": "^4.14.202",
     "pug": "^3.0.2"

diff --git a/packages/core/sandbox-layout/package.json b/packages/core/sandbox-layout/package.json
@@ -38,7 +38,7 @@
     "test:unit:open": "cross-env FORCE_COLOR=1 vitest --ui"
   },
   "devDependencies": {
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "vue": "^3.3.11",
     "vue-router": "^4.2.5"

diff --git a/packages/entities/entities-certificates/package.json b/packages/entities/entities-certificates/package.json
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "axios": "^1.6.2",
     "vue": "^3.3.11",

diff --git a/packages/entities/entities-consumer-credentials/package.json b/packages/entities/entities-consumer-credentials/package.json
@@ -30,7 +30,7 @@
   "devDependencies": {
     "@kong-ui-public/copy-uuid": "workspace:^",
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "axios": "^1.6.2",
     "vue": "^3.3.11",

diff --git a/packages/entities/entities-consumer-groups/package.json b/packages/entities/entities-consumer-groups/package.json
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "axios": "^1.6.2",
     "vue": "^3.3.11",

diff --git a/packages/entities/entities-consumers/package.json b/packages/entities/entities-consumers/package.json
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "axios": "^1.6.2",
     "vue": "^3.3.11",

diff --git a/packages/entities/entities-gateway-services/package.json b/packages/entities/entities-gateway-services/package.json
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "axios": "^1.6.2",
     "vue": "^3.3.11",

diff --git a/packages/entities/entities-keys/package.json b/packages/entities/entities-keys/package.json
@@ -30,7 +30,7 @@
   "devDependencies": {
     "@kong-ui-public/copy-uuid": "workspace:^",
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "axios": "^1.6.2",
     "vue": "^3.3.11",

diff --git a/packages/entities/entities-keys/src/components/KeyForm.vue b/packages/entities/entities-keys/src/components/KeyForm.vue
@@ -476,7 +476,7 @@ onBeforeMount(async () => {
   }
 
   .invalid-key-set-message {
-    color: $kui-color-background-danger;
+    color: $kui-color-text-danger;
     font-size: 11px;
     font-weight: 500;
     margin-top: 3px !important;

diff --git a/packages/entities/entities-plugins/package.json b/packages/entities/entities-plugins/package.json
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "axios": "^1.6.2",
     "vue": "^3.3.11",

diff --git a/packages/entities/entities-plugins/src/components/select/PluginCardSkeleton.vue b/packages/entities/entities-plugins/src/components/select/PluginCardSkeleton.vue
@@ -35,6 +35,7 @@ defineProps({
 <style lang="scss" scoped>
 .plugin-card-skeleton {
   :deep(.skeleton-card-column) {
+    /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
     width: calc(25% - $kui-space-70);
   }
 

diff --git a/packages/entities/entities-routes/package.json b/packages/entities/entities-routes/package.json
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "axios": "^1.6.2",
     "vue": "^3.3.11",

diff --git a/packages/entities/entities-shared/package.json b/packages/entities/entities-shared/package.json
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "axios": "^1.6.2",
     "vue": "^3.3.11",

diff --git a/packages/entities/entities-shared/src/components/entity-form-section/EntityFormSection.vue b/packages/entities/entities-shared/src/components/entity-form-section/EntityFormSection.vue
@@ -101,15 +101,15 @@ fieldset {
           height: fit-content;
           margin-bottom: $kui-space-60;
           position: sticky;
-          top: $kui-space-60;
+          top: 16px;
         }
       }
 
       .form-section-title {
         color: $kui-color-text;
         font-size: $kui-font-size-50;
         font-weight: 600;
-        line-height: $kui-line_height-40;
+        line-height: $kui-line-height-40;
         margin-bottom: $kui-space-40;
         margin-top: 0;
       }

diff --git a/packages/entities/entities-snis/package.json b/packages/entities/entities-snis/package.json
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "axios": "^1.6.2",
     "vue": "^3.3.11",

diff --git a/packages/entities/entities-upstreams-targets/package.json b/packages/entities/entities-upstreams-targets/package.json
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "axios": "^1.6.2",
     "vue": "^3.3.11",

diff --git a/packages/entities/entities-upstreams-targets/src/components/TargetForm.vue b/packages/entities/entities-upstreams-targets/src/components/TargetForm.vue
@@ -318,7 +318,7 @@ watch(() => props.targetId, () => {
     .target-form-info :deep(p) {
       color: $kui-color-text;
       font-size: $kui-font-size-30;
-      line-height: $kui-space-80;
+      line-height: $kui-line-height-30;
       margin-bottom: $kui-space-90;
     }
 

diff --git a/packages/entities/entities-vaults/package.json b/packages/entities/entities-vaults/package.json
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "axios": "^1.6.2",
     "vue": "^3.3.11",

diff --git a/packages/portal/document-viewer/package.json b/packages/portal/document-viewer/package.json
@@ -40,7 +40,7 @@
     "vue": "^3.3.11"
   },
   "devDependencies": {
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "@types/prismjs": "^1.26.3",
     "@vitejs/plugin-vue-jsx": "^3.1.0",

diff --git a/packages/portal/spec-renderer/package.json b/packages/portal/spec-renderer/package.json
@@ -42,7 +42,7 @@
     "vue": "^3.3.11"
   },
   "devDependencies": {
-    "@kong/design-tokens": "^1.12.1",
+    "@kong/design-tokens": "1.12.3",
     "@kong/kongponents": "9.0.0-alpha.73",
     "@modyfi/vite-plugin-yaml": "^1.0.4",
     "@types/lodash.clonedeep": "^4.5.9",