ketekny-ui-kit 1.0.15 → 1.0.16

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [

package/src/layout/kAppFooter.vue

@@ -1,5 +1,5 @@
 <template lang="">
-  <footer class="py-4 mt-auto text-gray-500 border-t no-print" :class="class">
+  <footer class="py-4 mt-auto text-primary/80 border-t border-primary/20 no-print" :class="class">
     <div class="container mx-auto" v-if="fullWidth == null">
       <slot></slot>
     </div>

package/src/layout/kAppMain.vue

@@ -1,5 +1,5 @@
 <template lang="">
-  <main>
+  <main class="text-primary/90">
     <div :class="class">
       <div :class="fullWidth == null ? 'md:container md:mx-auto rounded-xl' : ''">
         <slot></slot>

package/src/layout/kHero.vue

@@ -1,5 +1,5 @@
 <template lang="">
-  <section class="py-16 text-white border bg-dark rounded-xl">
+  <section class="py-16 text-white border rounded-xl bg-dark border-primary/30 shadow-[0_0_0_1px_rgb(34_197_94_/_0.12)]">
     <div class="container px-4 mx-auto text-center">
       <slot></slot>
     </div>

package/src/ui/kAlert.vue

@@ -6,7 +6,7 @@
 
       <!-- Alert card -->
       <div
-        class="relative w-full max-w-sm p-6 space-y-4 text-center bg-white shadow-2xl z-5010 rounded-2xl"
+        class="relative w-full max-w-sm p-6 space-y-4 text-center bg-white border shadow-2xl z-5010 rounded-2xl border-primary/20 ring-1 ring-primary/10"
         :class="['border-semantic-' + type + '-border']"
         style="z-index: 5010"
       >

package/src/ui/kArrayList.vue

@@ -1,7 +1,7 @@
 <!-- kInputList.vue -->
 <template>
   <div class="w-full">
-    <label v-if="label" :for="id" class="block mb-1 text-sm font-medium text-gray-700">
+    <label v-if="label" :for="id" class="block mb-1 text-sm font-medium text-primary/90">
       {{ label }}
     </label>
 
@@ -13,7 +13,7 @@
       :disabled="disabled"
       :class="[
         'block w-full p-3 transition border border-gray-300 shadow-sm outline-none rounded-xl',
-        disabled ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white focus:border-gray-400 focus:ring-2 focus:ring-gray-200',
+        disabled ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white focus:border-primary focus:ring-2 focus:ring-primary/20',
       ]"
       @focus="isFocused = true"
       @blur="isFocused = false"
@@ -22,7 +22,7 @@
     ></textarea>
 
     <div class="flex items-center justify-between mt-2 text-xs text-gray-500">
-      <span>Items: <span class="font-semibold text-gray-700">{{ count }}</span></span>
+      <span>Items: <span class="font-semibold text-primary">{{ count }}</span></span>
       <span v-if="hint">{{ hint }}</span>
     </div>
   </div>

package/src/ui/kCode.vue

@@ -1,6 +1,6 @@
 <!-- kCode.vue -->
 <template>
-  <div class="p-4 mt-3 overflow-hidden text-white whitespace-pre bg-gray-900 border rounded-lg">
+  <div class="p-4 mt-3 overflow-hidden text-white whitespace-pre bg-gray-900 border rounded-lg border-primary/30">
     <div class="overflow-auto">
       <code>{{ normalizedContent }}</code>
     </div>

package/src/ui/kConfirmDialog.vue

@@ -1,9 +1,9 @@
 <template>
   <Teleport to="body">
     <Transition name="fade">
-      <div v-if="visible" class="fixed inset-0  flex items-center justify-center bg-black bg-opacity-40" style="z-index: 1500">
-        <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-xl">
-          <h2 class="mb-2 text-lg font-semibold">{{ title }}</h2>
+      <div v-if="visible" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-40" style="z-index: 1500">
+        <div class="w-full max-w-md p-6 bg-white border rounded-lg shadow-xl border-primary/20">
+          <h2 class="mb-2 text-lg font-semibold text-primary">{{ title }}</h2>
           <div class="mb-6 text-gray-700"><span v-html="message" /></div>
           <div class="flex justify-end gap-3">
             <kButton :disabled="loading" secondary label="Άκυρο" @click="cancel" />

package/src/ui/kDatatable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="disabled ? 'pointer-events-none opacity-60' : ''">
+  <div :class="['rounded-lg border border-primary/15', disabled ? 'pointer-events-none opacity-60' : '']">
     <EasyDataTable
       v-bind="$attrs"
       :headers="headers"
@@ -120,7 +120,7 @@ export default {
   --easy-table-body-row-height: 3.2rem;
   --easy-table-body-row-font-size: 12px;
   --easy-table-body-row-hover-font-color: #1f2937;
-  --easy-table-body-row-hover-background-color: #f9fafb;
+  --easy-table-body-row-hover-background-color: #ecfdf3;
   --easy-table-body-item-padding: 0.5rem 0.75rem;
 
   --easy-table-footer-background-color: transparent;
@@ -137,7 +137,7 @@ export default {
 
   --easy-table-scrollbar-track-color: transparent;
   --easy-table-scrollbar-color: transparent;
-  --easy-table-scrollbar-thumb-color: #d1d5db;
+  --easy-table-scrollbar-thumb-color: #86efac;
   --easy-table-scrollbar-corner-color: transparent;
 
   --easy-table-loading-mask-background-color: rgba(255, 255, 255, 0.6);
@@ -155,7 +155,7 @@ export default {
   background-color: #fff; /* white dropdown background */
   color: #1f2937; /* gray-800 text */
   padding: 0.25rem 0.5rem; /* small padding */
-  border: 1px solid #d1d5db;
+  border: 1px solid #bbf7d0;
   border-radius: 0.25rem;
 }
 

package/src/ui/kDateSelector.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="relative w-full">
-    <label :for="id" class="inputLabel" :class="hasError || inputInvalid ? 'text-red-500' : 'text-gray-700'">
+    <label :for="id" class="inputLabel" :class="hasError || inputInvalid ? 'text-red-500' : 'text-primary/90'">
       {{ label }}
     </label>
 
@@ -22,7 +22,7 @@
         <!-- Right-side calendar icon (opens popup) -->
         <button
           type="button"
-          class="absolute p-1 text-gray-500 -translate-y-1/2 right-2 top-1/2 hover:text-black disabled:opacity-50"
+          class="absolute p-1 text-primary/70 -translate-y-1/2 right-2 top-1/2 hover:text-primary disabled:opacity-50"
           :disabled="disabled"
           @click="openCalendar"
           aria-label="Open calendar"
@@ -45,7 +45,7 @@
         <!-- Right-side calendar icon (opens month grid) -->
         <button
           type="button"
-          class="absolute p-1 text-gray-500 -translate-y-1/2 right-2 top-1/2 hover:text-black disabled:opacity-50"
+          class="absolute p-1 text-primary/70 -translate-y-1/2 right-2 top-1/2 hover:text-primary disabled:opacity-50"
           :disabled="disabled"
           @click.stop="togglePopup"
           aria-label="Open month selector"
@@ -67,14 +67,14 @@
 
       <!-- Month Grid Popover (Teleported) -->
       <teleport to="body">
-        <div v-if="showPopup" class="p-4 bg-white border border-gray-200 rounded-lg shadow-lg" :style="popupStyles">
+        <div v-if="showPopup" class="p-4 bg-white border rounded-lg shadow-lg border-primary/20" :style="popupStyles">
           <!-- Year Nav -->
           <div class="flex items-center justify-between pb-3 mb-4 border-b">
-            <button @click.stop="currentYear--" class="text-gray-600 hover:text-black" aria-label="Previous year">
+            <button @click.stop="currentYear--" class="text-primary/80 hover:text-primary" aria-label="Previous year">
               <ChevronLeft />
             </button>
-            <span class="font-medium text-gray-700">{{ currentYear }}</span>
-            <button @click.stop="currentYear++" class="text-gray-600 hover:text-black" aria-label="Next year">
+            <span class="font-medium text-primary">{{ currentYear }}</span>
+            <button @click.stop="currentYear++" class="text-primary/80 hover:text-primary" aria-label="Next year">
               <ChevronRight />
             </button>
           </div>
@@ -86,7 +86,7 @@
               :key="index"
               @click="selectMonth(index + 1)"
               class="px-3 py-2 text-center transition rounded-lg cursor-pointer"
-              :class="[isSelected(index + 1) ? 'bg-blue-600 text-white' : 'hover:bg-gray-100 text-gray-700']"
+              :class="[isSelected(index + 1) ? 'bg-primary text-white' : 'hover:bg-primary/10 text-gray-700']"
             >
               {{ month }}
             </div>
@@ -104,7 +104,7 @@
     <div class="text-sm text-red-500" v-if="inputInvalid && !hasError">Μη έγκυρη ημερομηνία. Χρησιμοποιήστε μορφή dd/mm/yyyy.</div>
 
     <!-- Info message -->
-    <div class="text-sm text-gray-500" v-if="info != null">
+    <div class="text-sm text-primary/80" v-if="info != null">
       {{ info }}
     </div>
   </div>
@@ -148,7 +148,7 @@ export default {
     })();
 
     return {
-      defaultStyle: "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-0 focus:border-green-500 bg-white placeholder-gray-400",
+      defaultStyle: "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white placeholder-gray-400",
       errorStyle: "border-red-500 focus:ring focus:ring-red-300",
       disabledStyle: "!bg-gray-100 !text-gray-400 !cursor-not-allowed",
 

package/src/ui/kEditor.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="inputLabel" :class="hasError ? 'text-red-500' : 'text-gray-700'">
+  <div class="inputLabel" :class="hasError ? 'text-red-500' : 'text-primary/90'">
     {{ label }}
   </div>
   <div class="w-full">
     <!-- Toolbar -->
-    <div class="flex items-center gap-2 px-2 py-1 border rounded-t-md bg-gray-50">
+    <div class="flex items-center gap-2 px-2 py-1 border rounded-t-md bg-primary/5 border-primary/20">
       <button
         :disabled="disabled"
         v-for="(cmd, i) in toolbar"
@@ -12,7 +12,7 @@
         @click.prevent="exec(cmd.command, cmd.value)"
         :title="cmd.title"
         class="text-gray-600 p-1.5 rounded"
-        :class="disabled == false ? 'hover:text-black hover:bg-gray-200' : ''"
+        :class="disabled == false ? 'hover:text-primary hover:bg-primary/10' : ''"
       >
         <component :is="cmd.icon" class="w-5 h-5" />
       </button>
@@ -32,7 +32,7 @@
     </div>
 
     <!-- Info message -->
-    <div class="text-sm text-gray-500" v-if="info != null">
+    <div class="text-sm text-primary/80" v-if="info != null">
       {{ info }}
     </div>
   </div>
@@ -65,7 +65,7 @@ export default {
   data() {
     return {
       defaultStyle:
-        "w-full px-3 py-2 border rounded-b-lg transition shadow-sm focus:outline-none focus:ring-0 min-h-[150px] focus:border-green-500 bg-white placeholder-gray-400 !list-disc !list-inside prose",
+        "w-full px-3 py-2 border rounded-b-lg transition shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/20 min-h-[150px] focus:border-primary bg-white placeholder-gray-400 !list-disc !list-inside prose",
       errorStyle: "border-red-500 focus:ring focus:ring-red-300' : 'border-gray-300 focus:ring focus:ring-blue-300",
       disabledStyle: "!bg-gray-100 !text-gray-400 !cursor-not-allowed editor pointer-events-none select-none",
       toolbar: [

package/src/ui/kIcon.vue

@@ -3,7 +3,7 @@
   <component
     :is="iconComponent"
     v-bind="iconProps"
-    class="inline-block"
+    class="inline-block text-primary"
   />
 </template>
 

package/src/ui/kInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full">
+  <div class="w-full text-primary/90">
     <label v-if="label != null" :for="inputId" class="inputLabel" :class="hasError ? theme.labelError : theme.label">
       {{ label }}
     </label>

package/src/ui/kMenu.vue

@@ -1,51 +1,209 @@
 <template>
-  <div class="relative inline-block text-left">
-    <div @click="toggleMenu">
-      <slot name="trigger"></slot>
-    </div>
+  <div ref="menuRef" class="relative inline-block text-left">
     <div
-      v-if="isOpen"
-      class="absolute right-0 z-10 w-56 mt-2 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5"
-    >
-      <slot name="items"></slot>
+      ref="triggerRef"
+      role="button"
+      tabindex="0"
+      :aria-expanded="isOpen.toString()"
+      :aria-haspopup="'menu'"
+      :aria-label="ariaLabel"
+      class="rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30"
+      @click="toggleMenu"
+      @keydown.enter.prevent="toggleMenu"
+      @keydown.space.prevent="toggleMenu">
+      <slot name="trigger">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center px-3 py-2 text-base font-medium text-center transition border rounded-lg shadow-sm bg-white border-slate-200 text-slate-700 hover:bg-slate-50">
+          Menu
+        </button>
+      </slot>
     </div>
+
+    <Teleport to="body">
+      <div
+        v-if="isOpen"
+        ref="menuPanelRef"
+        class="z-[9999] overflow-visible border rounded-lg shadow-lg bg-white/95 backdrop-blur-sm border-primary/20 ring-1 ring-primary/10"
+        :style="panelStyle"
+        role="menu">
+        <span
+          aria-hidden="true"
+          class="absolute w-3 h-3 -translate-x-1/2 rotate-45 bg-white"
+          :class="[
+            placement === 'top'
+              ? 'bottom-[-7px] border-r border-b border-primary/20'
+              : 'top-[-7px] border-l border-t border-primary/20',
+          ]"
+          :style="{ left: `${chevronOffset}px` }"></span>
+        <slot name="items">
+          <ul class="p-2">
+            <li v-for="(link, index) in normalizedLinks" :key="link.key || `${link.label}-${index}`">
+              <component
+                :is="resolveLinkTag(link)"
+                class="flex items-center w-full gap-2 px-3 py-2 min-h-11 text-base rounded-md text-slate-700"
+                :class="[
+                  link.disabled
+                    ? 'cursor-not-allowed opacity-50'
+                    : 'cursor-pointer hover:bg-primary/10 hover:text-primary active:bg-primary/15',
+                ]"
+                :to="isRouterLink(link) ? link.to : undefined"
+                :href="!isRouterLink(link) && link.href ? link.href : undefined"
+                :target="!isRouterLink(link) && link.target ? link.target : undefined"
+                :rel="!isRouterLink(link) ? resolvedRel(link) : undefined"
+                :disabled="resolveLinkTag(link) === 'button' ? !!link.disabled : undefined"
+                role="menuitem"
+                @click="handleLinkClick(link, $event)">
+                <kIcon v-if="link.icon" :name="link.icon" :size="16" class="shrink-0 self-center text-primary/80" />
+                <span class="leading-none">{{ link.label }}</span>
+              </component>
+            </li>
+          </ul>
+        </slot>
+      </div>
+    </Teleport>
   </div>
 </template>
 
 <script>
+import kIcon from "./kIcon.vue";
+
 export default {
-  name: 'kMenu',
+  name: "kMenu",
+  components: {
+    kIcon,
+  },
+  props: {
+    links: {
+      type: Array,
+      default: () => [],
+    },
+    closeOnSelect: {
+      type: Boolean,
+      default: true,
+    },
+    ariaLabel: {
+      type: String,
+      default: "Toggle menu",
+    },
+  },
+  emits: ["select"],
   data() {
     return {
       isOpen: false,
-    }
+      placement: "bottom",
+      chevronOffset: 24,
+      panelStyle: {
+        position: "absolute",
+        top: "0px",
+        left: "0px",
+        width: "224px",
+      },
+    };
   },
-  methods: {
-    toggleMenu() {
-      this.isOpen = !this.isOpen
+  computed: {
+    normalizedLinks() {
+      return this.links.filter((link) => link && typeof link === "object" && typeof link.label === "string" && link.label.length > 0);
     },
-    closeMenu() {
-      this.isOpen = false
+    hasRouterLink() {
+      return Boolean(this.$?.appContext?.components?.RouterLink || this.$router);
     },
   },
-  mounted() {
-    document.addEventListener('click', this.handleClickOutside)
-  },
-  beforeUnmount() {
-    document.removeEventListener('click', this.handleClickOutside)
-  },
   methods: {
     toggleMenu() {
-      this.isOpen = !this.isOpen
+      this.isOpen = !this.isOpen;
+      if (this.isOpen) this.$nextTick(() => this.updatePanelPosition());
+    },
+    isRouterLink(link) {
+      return this.hasRouterLink && link && link.to !== undefined;
+    },
+    resolveLinkTag(link) {
+      if (this.isRouterLink(link)) return "RouterLink";
+      if (link && link.href) return "a";
+      return "button";
+    },
+    resolvedRel(link) {
+      if (!link?.target || link.target !== "_blank") return link?.rel || undefined;
+      return link?.rel || "noopener noreferrer";
+    },
+    handleLinkClick(link, event) {
+      if (link?.disabled) {
+        event.preventDefault();
+        return;
+      }
+      if (typeof link?.action === "function") link.action(link, event);
+      if (typeof link?.onClick === "function") link.onClick(link, event);
+      this.$emit("select", link);
+      if (this.closeOnSelect) this.closeMenu();
     },
     handleClickOutside(event) {
-      if (!this.$el.contains(event.target)) {
-        this.closeMenu()
+      const clickedTrigger = this.$refs.menuRef?.contains(event.target);
+      const clickedPanel = this.$refs.menuPanelRef?.contains(event.target);
+      if (!clickedTrigger && !clickedPanel) {
+        this.closeMenu();
       }
     },
+    handleEscapeKey(event) {
+      if (event.key === "Escape") this.closeMenu();
+    },
+    updatePanelPosition() {
+      const trigger = this.$refs.triggerRef;
+      if (!trigger) return;
+
+      const rect = trigger.getBoundingClientRect();
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+      const panelWidth = this.$refs.menuPanelRef?.offsetWidth || 224;
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const pad = 8;
+      const gap = 8;
+      const panelHeight = this.$refs.menuPanelRef?.offsetHeight || 0;
+
+      // bottom-end (default): align panel right edge with trigger right edge, below trigger.
+      const preferredLeft = rect.right + scrollLeft - panelWidth;
+      const minLeft = scrollLeft + pad;
+      const maxLeft = scrollLeft + viewportWidth - panelWidth - pad;
+      const left = Math.max(minLeft, Math.min(preferredLeft, maxLeft));
+
+      const bottomTop = rect.bottom + scrollTop + gap;
+      const topTop = rect.top + scrollTop - panelHeight - gap;
+      const maxVisibleTop = scrollTop + viewportHeight - panelHeight - pad;
+      const minVisibleTop = scrollTop + pad;
+
+      // Flip to top-end only when bottom placement overflows and top has room.
+      const shouldFlipTop = bottomTop > maxVisibleTop && topTop >= minVisibleTop;
+      const top = shouldFlipTop
+        ? topTop
+        : Math.max(minVisibleTop, Math.min(bottomTop, maxVisibleTop));
+      this.placement = shouldFlipTop ? "top" : "bottom";
+
+      const triggerCenterX = rect.left + scrollLeft + rect.width / 2;
+      const relativeChevronX = triggerCenterX - left;
+      this.chevronOffset = Math.max(14, Math.min(relativeChevronX, panelWidth - 14));
+
+      this.panelStyle = {
+        position: "absolute",
+        top: `${top}px`,
+        left: `${left}px`,
+        width: `${panelWidth}px`,
+      };
+    },
     closeMenu() {
-      this.isOpen = false
+      this.isOpen = false;
     },
   },
+  mounted() {
+    document.addEventListener("click", this.handleClickOutside);
+    document.addEventListener("keydown", this.handleEscapeKey);
+    window.addEventListener("resize", this.updatePanelPosition);
+    window.addEventListener("scroll", this.updatePanelPosition, true);
+  },
+  beforeUnmount() {
+    document.removeEventListener("click", this.handleClickOutside);
+    document.removeEventListener("keydown", this.handleEscapeKey);
+    window.removeEventListener("resize", this.updatePanelPosition);
+    window.removeEventListener("scroll", this.updatePanelPosition, true);
+  },
 }
 </script>

package/src/ui/kMessage.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex rounded-lg overflow-hidden min-h-[50px] border-l-8"
+    class="flex rounded-lg overflow-hidden min-h-[50px] border-l-8 ring-1 ring-primary/10"
     :class="['border-semantic-' + type + '-border', 'bg-semantic-' + type + '-bg']"
   >
     <!-- Icon Column -->

package/src/ui/kSearch.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relative w-full">
     <input type="text" v-model="localValue" @input="onInput" :class="[defaultStyle, disabled ? disabledStyle : '']" :placeholder="placeholder" :disabled="disabled" />
-    <Search class="absolute w-4 h-4 text-gray-400 -translate-y-1/2 pointer-events-none right-3 top-1/2" />
+    <Search class="absolute w-4 h-4 text-primary/70 -translate-y-1/2 pointer-events-none right-3 top-1/2" />
   </div>
 </template>
 
@@ -20,7 +20,7 @@ export default {
   },
   data() {
     return {
-      defaultStyle: "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-0 focus:border-green-500 bg-white placeholder-gray-400",
+      defaultStyle: "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white placeholder-gray-400",
       disabledStyle: "bg-gray-100 text-gray-400 cursor-not-allowed",
 
       localValue: this.modelValue,

package/src/ui/kSelect.vue

@@ -123,7 +123,7 @@ export default {
       searchQuery: "",
       dropdownPositionStyle: {},
       generatedId: `select-${Math.random().toString(36).substr(2, 9)}`,
-      defaultStyle: "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-0 focus:border-green-500 bg-white placeholder-gray-400",
+      defaultStyle: "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white placeholder-gray-400",
       errorStyle: "border-red-500 focus:ring focus:ring-red-300",
       disabledStyle: "!bg-gray-100 !text-gray-400 !cursor-not-allowed",
     };

package/src/ui/kSelectButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex overflow-hidden border border-gray-300 rounded-md" style="width: fit-content;" :aria-disabled="disabled.toString()">
+  <div class="inline-flex overflow-hidden border rounded-md border-primary/25" style="width: fit-content;" :aria-disabled="disabled.toString()">
 
     <button
       v-for="(option, index) in options"
@@ -34,13 +34,13 @@ export default {
   emits: ["update:modelValue"],
   computed: {
     baseClasses() {
-      return "px-4 py-2 text-sm font-medium border-none focus:outline-none";
+      return "px-4 py-2 text-sm font-medium border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:ring-inset";
     },
     activeClasses() {
       return "bg-primary text-white";
     },
     inactiveClasses() {
-      return this.disabled ? "bg-white text-gray-500" : "bg-white text-gray-700 hover:bg-gray-100";
+      return this.disabled ? "bg-white text-gray-500" : "bg-white text-primary/90 hover:bg-primary/10";
     },
   },
   methods: {

package/src/ui/kSkeleton.vue

@@ -1,7 +1,7 @@
 <template lang="">
   <template v-if="type === 'text'">
     <div class="space-y-2 animate-pulse">
-      <div v-for="n in normalizedRows" :key="n" class="w-full h-4 bg-gray-300 rounded"></div>
+      <div v-for="n in normalizedRows" :key="n" class="w-full h-4 rounded bg-primary/20"></div>
     </div>
   </template>
 </template>

package/src/ui/kSpinner.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="flex items-center justify-center w-16 space-x-1" v-if="type == 'line'">
-    <i class="ml-1 text-blue-500 pi pi-wave-pulse" />
-    <div class="w-2 h-2 bg-blue-500 rounded-full animate-fade" :style="{ animationDelay: '0s' }"></div>
-    <div class="w-2 h-2 bg-blue-500 rounded-full animate-fade" :style="{ animationDelay: '0.15s' }"></div>
-    <div class="w-2 h-2 bg-blue-500 rounded-full animate-fade" :style="{ animationDelay: '0.3s' }"></div>
-    <div class="w-2 h-2 bg-blue-500 rounded-full animate-fade" :style="{ animationDelay: '0.45s' }"></div>
+    <i class="ml-1 text-primary pi pi-wave-pulse" />
+    <div class="w-2 h-2 rounded-full bg-primary animate-fade" :style="{ animationDelay: '0s' }"></div>
+    <div class="w-2 h-2 rounded-full bg-primary animate-fade" :style="{ animationDelay: '0.15s' }"></div>
+    <div class="w-2 h-2 rounded-full bg-primary animate-fade" :style="{ animationDelay: '0.3s' }"></div>
+    <div class="w-2 h-2 rounded-full bg-primary animate-fade" :style="{ animationDelay: '0.45s' }"></div>
   </div>
 
   <Loader class="w-6 h-6 mr-2 animate-spin" style="animation-duration: 1.5s" v-else-if="type == 'circle'" />

package/src/ui/kTags.vue

@@ -1,20 +1,20 @@
 <template>
   <div class="w-full">
-    <div v-if="label != null" class="inputLabel" :class="hasError ? 'text-rose-800' : 'text-gray-700'">
+    <div v-if="label != null" class="inputLabel" :class="hasError ? 'text-rose-800' : 'text-primary/90'">
       {{ label }}
     </div>
     <div
       :class="[
         'flex flex-wrap items-center gap-2 p-2 border rounded-xl shadow-sm min-h-[3rem] transition',
-        hasError ? 'border-rose-500 bg-rose-50/40 focus-within:border-rose-600 focus-within:ring-2 focus-within:ring-rose-500/20' : 'border-gray-300',
+        hasError ? 'border-rose-500 bg-rose-50/40 focus-within:border-rose-600 focus-within:ring-2 focus-within:ring-rose-500/20' : 'border-gray-300 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20',
         disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white',
       ]">
-      <span v-for="(tag, index) in internalTags" :key="index" class="flex items-center px-2 py-1 text-blue-700 bg-blue-100 rounded-full">
+      <span v-for="(tag, index) in internalTags" :key="index" class="flex items-center px-2 py-1 rounded-full text-primary bg-primary/10">
         {{ tag }}
         <button
           @click="removeTag(index)"
           :disabled="disabled"
-          :class="['ml-1', disabled ? 'text-blue-300 cursor-not-allowed' : 'text-blue-500 hover:text-blue-700']">
+          :class="['ml-1', disabled ? 'text-primary/30 cursor-not-allowed' : 'text-primary/70 hover:text-primary']">
           &times;
         </button>
       </span>

package/src/ui/kTextArea.vue

@@ -4,7 +4,7 @@
       v-if="label != null"
       :for="inputId"
       class="inputLabel"
-      :class="hasError ? 'text-red-500' : 'text-gray-700'"
+      :class="hasError ? 'text-red-500' : 'text-primary/90'"
     >
       {{ label }}
     </label>
@@ -26,7 +26,7 @@
       {{ error }}
     </div>
 
-    <div :id="infoId" class="mt-1 text-gray-500" v-if="info != null">
+    <div :id="infoId" class="mt-1 text-primary/80" v-if="info != null">
       {{ info }}
     </div>
   </div>
@@ -74,7 +74,7 @@ export default {
     },
     textareaClass() {
       return [
-        'w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-0 focus:border-green-500 bg-white placeholder-gray-400',
+        'w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white placeholder-gray-400',
         this.hasError ? 'border-red-500 focus:ring focus:ring-red-300' : '',
         this.disabled ? '!bg-gray-100 !text-gray-400 !cursor-not-allowed' : '',
       ]

package/src/ui/kToast.vue

@@ -24,7 +24,7 @@
             <div v-if="toast.actionLabel && typeof toast.onAction === 'function'" class="mt-2">
               <button
                 type="button"
-                class="px-2.5 py-1.5 text-xs font-semibold rounded-md ring-1 ring-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-slate-900"
+                class="px-2.5 py-1.5 text-xs font-semibold rounded-md ring-1 ring-primary/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary"
                 :class="'text-semantic-' + toast.type + '-text'"
                 @click="handleAction(toast)">
                 {{ toast.actionLabel }}
@@ -38,7 +38,7 @@
           v-if="toast.closable !== false"
           type="button"
           @click="remove(toast.id)"
-          class="absolute text-xl leading-none text-gray-500 rounded-md top-2 right-2 hover:text-black focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-slate-900"
+          class="absolute text-xl leading-none text-gray-500 rounded-md top-2 right-2 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary"
           :aria-label="`Close ${toast.type} toast`">
           <X class="w-5 h-5" />
         </button>

package/src/ui/kToggle.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="labelStyle === 'inline' ? 'flex items-center' : ''">
     <!-- Block-style label -->
-    <div v-if="showLabel && labelStyle !== 'inline'" class="block mb-1 text-sm font-bold text-gray-700" for="toggle">
+    <div v-if="showLabel && labelStyle !== 'inline'" class="block mb-1 text-sm font-bold text-primary/90" for="toggle">
       {{ label }}
     </div>
 
@@ -14,14 +14,14 @@
       :disabled="disabled"
       :class="[
         'w-16 h-8 flex items-center rounded-full p-1 transition duration-300',
-        modelValue ? 'bg-green-500' : 'bg-gray-400',
+        modelValue ? 'bg-primary' : 'bg-gray-400',
         disabled ? 'opacity-50 cursor-not-allowed' : '',
       ]">
       <div :class="['w-6 h-6 bg-white rounded-full shadow-md transform transition duration-300', modelValue ? 'translate-x-8' : 'translate-x-0']"></div>
     </button>
 
     <!-- Inline-style label -->
-    <div v-if="showLabel && labelStyle === 'inline'" class="ml-2 text-sm font-bold text-gray-700 cursor-pointer" :for="computedId" @click="toggle">
+    <div v-if="showLabel && labelStyle === 'inline'" class="ml-2 text-sm font-bold cursor-pointer text-primary/90" :for="computedId" @click="toggle">
       {{ label }}
     </div>
   </div>

package/src/ui/kToolbar.vue

@@ -7,13 +7,13 @@
     :class="[
       'k-toolbar relative w-full',
       dense ? 'p-0 md:p-0' : 'px-3 md:px-4 py-2.5',
-      variant === 'plain' ? 'bg-transparent border-0 rounded-none shadow-none px-0 md:px-0' : 'border border-slate-200 rounded-lg bg-white shadow-sm',
+      variant === 'plain' ? 'bg-transparent border-0 rounded-none shadow-none px-0 md:px-0' : 'border rounded-lg bg-white shadow-sm border-primary/20',
       disabled ? 'pointer-events-none opacity-60' : '',
     ]">
     <div class="flex flex-wrap items-center gap-2 md:gap-3">
       <div :class="['flex items-center min-w-0 gap-2 shrink-0', isCompact ? 'w-full' : 'w-auto']">
         <slot name="leading" />
-        <h1 v-if="title" class="text-base font-semibold leading-6 text-slate-900 truncate">{{ title }}</h1>
+        <h1 v-if="title" class="text-base font-semibold leading-6 truncate text-primary">{{ title }}</h1>
       </div>
 
       <div :class="['flex items-center min-w-0', isCompact ? 'w-full' : 'w-auto flex-1 min-w-[180px]']">
@@ -29,7 +29,7 @@
         ref="menuTriggerRef"
         type="button"
         v-show="isCompact"
-        class="inline-flex items-center justify-center p-2 ml-auto border rounded-md border-slate-300 text-slate-700 hover:bg-slate-50"
+        class="inline-flex items-center justify-center p-2 ml-auto border rounded-md border-primary/30 text-slate-700 hover:bg-primary/10"
         :aria-label="mobileMenuOpen ? 'Close toolbar actions menu' : 'Open toolbar actions menu'"
         :aria-expanded="mobileMenuOpen.toString()"
         @click="toggleMobileMenu">
@@ -46,7 +46,8 @@
           :disabled="disabled || !!action.disabled"
           :aria-label="action.ariaLabel || action.label"
           :tooltip="action.tooltip"
-          :small="action.small !== false"
+          :size="resolveActionButtonSize(action)"
+          :small="action.small === true"
           :icon-only="!!action.iconOnly"
           :variant="action.variant || 'outlined'"
           :secondary="!!action.secondary"
@@ -68,11 +69,11 @@
         role="dialog"
         aria-modal="true"
         aria-label="Toolbar actions"
-        class="absolute bottom-0 left-0 right-0 p-3 border-t shadow-2xl rounded-t-2xl bg-white/95 backdrop-blur-sm border-slate-200"
+        class="absolute bottom-0 left-0 right-0 p-3 border-t shadow-2xl rounded-t-2xl bg-white/95 backdrop-blur-sm border-primary/20"
         style="padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));">
-        <div class="flex items-center justify-between pb-2 mb-2 border-b border-slate-200">
-          <h3 class="text-sm font-semibold text-slate-900">Actions</h3>
-          <button type="button" class="p-2 rounded-md hover:bg-slate-100" aria-label="Close actions menu" @click="closeMobileMenu()">
+        <div class="flex items-center justify-between pb-2 mb-2 border-b border-primary/20">
+          <h3 class="text-sm font-semibold text-primary">Actions</h3>
+          <button type="button" class="p-2 rounded-md hover:bg-primary/10" aria-label="Close actions menu" @click="closeMobileMenu()">
             <kIcon name="X" :size="18" />
           </button>
         </div>
@@ -85,7 +86,7 @@
             :disabled="disabled || !!action.disabled || !!action.loading"
             :class="[
               'flex items-center w-full gap-3 px-2 py-3 text-left rounded-lg min-h-11',
-              disabled || action.disabled || action.loading ? 'opacity-50 cursor-not-allowed' : 'hover:bg-slate-100 active:bg-slate-200',
+              disabled || action.disabled || action.loading ? 'opacity-50 cursor-not-allowed' : 'hover:bg-primary/10 active:bg-primary/15',
             ]"
             @click="handleMobileAction(action)">
             <kIcon v-if="action.icon" :name="action.icon" :size="18" class="shrink-0 text-slate-600" />
@@ -138,6 +139,8 @@ const menuTriggerRef = ref(null);
 const isCompact = ref(false);
 let resizeObserver = null;
 
+const VALID_BUTTON_SIZES = ["small", "normal", "large"];
+
 const handleActionClick = (action) => {
   if (typeof action?.onClick === "function") action.onClick();
 };
@@ -147,6 +150,13 @@ const handleMobileAction = (action) => {
   closeMobileMenu();
 };
 
+const resolveActionButtonSize = (action) => {
+  if (VALID_BUTTON_SIZES.includes(action?.size)) return action.size;
+  // Legacy support: `small: true` maps to the new `size="small"`.
+  if (action?.small === true) return "small";
+  return "normal";
+};
+
 const updateCompactMode = () => {
   if (!toolbarRef.value) return;
   isCompact.value = toolbarRef.value.clientWidth < 768;

package/src/ui/kTree.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="k-tree" :class="disabled ? 'k-tree--disabled' : ''">
+  <div class="k-tree text-primary/90" :class="disabled ? 'k-tree--disabled' : ''">
     <HETree
       ref="treeRef"
       class="k-tree__root"
@@ -212,8 +212,8 @@ export default {
 }
 
 .k-tree-node-content--selected {
-  background: #e0ecff;
-  color: #1d4ed8;
+  background: #ecfdf3;
+  color: #15803d;
 }
 
 .k-tree-node-toggler {

package/src/ui/kUploader.vue

@@ -7,16 +7,16 @@
       @drop.prevent="onDrop"
       :class="[
         'border-2 border-dashed rounded-lg p-8 text-center transition-colors mb-8',
-        dragover ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-gray-400',
+        dragover ? 'border-primary bg-primary/10' : 'border-gray-300 hover:border-primary/50',
       ]"
     >
       <div class="flex flex-col items-center justify-center space-y-4">
-        <UploadCloudIcon class="w-12 h-12 text-gray-400" />
+        <UploadCloudIcon class="w-12 h-12 text-primary/60" />
         <p class="text-lg font-medium text-gray-700">
           Σύρετε το αρχείο εδώ, ή
           <label
             for="file-input"
-            class="underline cursor-pointer text-dark hover:text-blue-600 focus:outline-none"
+            class="underline cursor-pointer text-primary hover:text-primary/80 focus:outline-none"
           >
             αναζητήστε
           </label>
@@ -45,7 +45,7 @@
           class="flex items-center justify-between p-4 bg-white rounded-lg shadow"
         >
           <div class="flex items-center space-x-4">
-            <FileIcon class="w-8 h-8 text-gray-400" />
+            <FileIcon class="w-8 h-8 text-primary/60" />
             <div>
               <p class="text-sm font-medium text-gray-700">{{ file.fileName }}</p>
               <p class="text-xs text-gray-500">{{ formatFileSize(file.fileSize) }}</p>

package/src/ui/themes/kInput.theme.js

@@ -1,16 +1,16 @@
 export const K_INPUT_THEME = {
-  label: "text-gray-700",
+  label: "text-primary/90",
   labelError: "text-rose-800",
   baseInput:
-    "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-slate-900 bg-white placeholder-gray-400 focus:ring-2 focus:ring-sky-700/30 focus:border-sky-700",
+    "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-slate-900 bg-white placeholder-gray-400 focus:ring-2 focus:ring-primary/25 focus:border-primary",
   withRightAdornment: "pr-10",
   withPasswordToggle: "pr-14",
   disabled: "bg-slate-100 text-slate-500 cursor-not-allowed border-slate-300",
   errorInput: "border-rose-500 bg-rose-50/40 focus:border-rose-600 focus:ring-rose-500/20",
   infoText: "text-sm text-slate-600",
   errorText: "text-sm text-rose-700",
-  trailingIcon: "absolute w-4 h-4 text-gray-500 -translate-y-1/2 pointer-events-none right-3 top-1/2",
+  trailingIcon: "absolute w-4 h-4 text-primary/70 -translate-y-1/2 pointer-events-none right-3 top-1/2",
   passwordToggle: "absolute inset-y-0 right-0 flex items-center pr-3 text-slate-700",
   passwordToggleButton:
-    "text-xs font-medium select-none rounded px-1 py-0.5 hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-900",
+    "text-xs font-medium select-none rounded px-1 py-0.5 hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
 };