fix: enable token validation

.stylelintrc.cjs

@@ -4,32 +4,25 @@ module.exports = {
     'stylelint-config-recommended-scss',
     'stylelint-config-recommended-vue/scss'
   ],
-  overrides: [
-    {
-      files: [
-        '**/*.vue',
-        '**/*.scss'
-      ],
-      rules: {
-        'unit-disallowed-list': [
-          ['rem', 'em'],
-        ],
-        // Only allow @kong/design-tokens or `--kong-ui-*` CSS custom properties
-        'custom-property-pattern': [
-          "^(kui-).+$",
-          {
-            message: "Expected custom property \"%s\" to be sourced from @kong/design-tokens with prefix '--kui-'",
-          }
-        ],
-        // Disable the following rules
-        'custom-property-no-missing-var-function': null,
-        'no-descending-specificity': null,
-      }
-    }
-  ],
   plugins: [
     'stylelint-order',
     '@kong/design-tokens/stylelint-plugin',
   ],
-  rules: { 'order/properties-alphabetical-order': true }
+  rules: {
+    'order/properties-alphabetical-order': true,
+    'unit-disallowed-list': [
+      ['rem', 'em'],
+    ],
+    // Only allow @kong/design-tokens or `--kong-ui-*` CSS custom properties
+    'custom-property-pattern': [
+      "^(kui-).+$",
+      {
+        message: "Expected custom property \"%s\" to be sourced from @kong/design-tokens with prefix '--kui-'",
+      }
+    ],
+    '@kong/design-tokens/use-proper-token': true,
+    // Disable the following rules
+    'custom-property-no-missing-var-function': null,
+    'no-descending-specificity': null,
+  }
 }

sandbox/App.vue

@@ -7,7 +7,6 @@
       <MarkdownUi
         v-model="content"
         :editable="editable"
-        mode="split"
         theme="light"
         @cancel="cancelEdit"
         @mode="modeChanged"

src/components/MarkdownContent.vue

@@ -231,8 +231,8 @@ $header-anchor-offset-top: calc(var(--kui-space-80, $kui-space-80) + 2px);
       @include toolbar-button;
       color: var(--kui-color-text-neutral-weak, $kui-color-text-neutral-weak);
       position: absolute;
-      right: var(--kui-space-20, $kui-space-20);
-      top: var(--kui-space-20, $kui-space-20);
+      right: 4px;
+      top: 4px;
     }
 
     .line.highlighted {

src/components/MarkdownUi.vue

@@ -587,8 +587,8 @@ const markdownEditorMaxHeight = computed((): string => `${props.editorMaxHeight}
 
     .edit-button {
       position: absolute;
-      right: 0;
-      top: 0;
+      right: 4px;
+      top: 4px;
     }
   }
 

src/components/toolbar/MarkdownToolbar.vue

@@ -291,7 +291,7 @@ onMounted(() => {
   }
 
   .toolbar-divider {
-    background-color: var(--kui-color-border, $kui-color-border);
+    background-color: var(--kui-color-background-disabled, $kui-color-background-disabled);
     height: 16px;
     margin: var(--kui-space-0, $kui-space-0) var(--kui-space-20, $kui-space-20);
     width: 2px;