From f1808ce099ec8d31a2f3b93050016895d985a866 Mon Sep 17 00:00:00 2001
From: Adam DeHaven <adam.dehaven@konghq.com>
Date: Sat, 30 Dec 2023 20:44:38 -0500
Subject: [PATCH] fix: enable token validation

---
 .stylelintrc.cjs                           | 41 +++++++++-------------
 sandbox/App.vue                            |  1 -
 src/components/MarkdownContent.vue         |  4 +--
 src/components/MarkdownUi.vue              |  4 +--
 src/components/toolbar/MarkdownToolbar.vue |  2 +-
 5 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs
index 128b0797..a7473bdb 100644
--- a/.stylelintrc.cjs
+++ b/.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,
+  }
 }
diff --git a/sandbox/App.vue b/sandbox/App.vue
index 3b700f80..0bf886ef 100644
--- a/sandbox/App.vue
+++ b/sandbox/App.vue
@@ -7,7 +7,6 @@
       <MarkdownUi
         v-model="content"
         :editable="editable"
-        mode="split"
         theme="light"
         @cancel="cancelEdit"
         @mode="modeChanged"
diff --git a/src/components/MarkdownContent.vue b/src/components/MarkdownContent.vue
index 95e59f3d..3dcfcc33 100644
--- a/src/components/MarkdownContent.vue
+++ b/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 {
diff --git a/src/components/MarkdownUi.vue b/src/components/MarkdownUi.vue
index 94118de4..7ef24496 100644
--- a/src/components/MarkdownUi.vue
+++ b/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;
     }
   }
 
diff --git a/src/components/toolbar/MarkdownToolbar.vue b/src/components/toolbar/MarkdownToolbar.vue
index bdea99ae..992366bd 100644
--- a/src/components/toolbar/MarkdownToolbar.vue
+++ b/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;