update docs: only shows available ColorPalettes

apps/docs/src/.vitepress/components/OnyxColorPalettes.vue

@@ -1,9 +1,18 @@
 <script lang="ts" setup>
+import { ONYX_COLORS } from "sit-onyx";
 import { useData } from "vitepress";
+import { computed } from "vue";
 import ColorPalette from "./ColorPalette.vue";
 import DesignVariableBadge from "./DesignVariableBadge.vue";
 
 const { isDark } = useData();
+// Checks if ColorPalettes are available in the given theme
+const isColorDefined = (name: string) => {
+  const cssVar = `--onyx-color-base-${name}-500`;
+  const value = getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim();
+  return !!value;
+};
+const availableColors = computed(() => ONYX_COLORS.filter((name) => isColorDefined(name)));
 </script>
 
 <template>
@@ -12,13 +21,7 @@ const { isDark } = useData();
       <DesignVariableBadge text="Light mode" :active="!isDark" @click="isDark = false" />
       <DesignVariableBadge text="Dark mode" :active="isDark" @click="isDark = true" />
     </div>
-
-    <ColorPalette name="primary" />
-    <ColorPalette name="neutral" />
-    <ColorPalette name="danger" />
-    <ColorPalette name="warning" />
-    <ColorPalette name="success" />
-    <ColorPalette name="info" />
+    <ColorPalette v-for="name in availableColors" :key="name" :name="name" />
   </div>
 </template>