ketekny-ui-kit 1.0.120 → 1.0.121

package/package.json

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

package/src/twoColLayout/components/MultilevelSidebar.vue

@@ -75,14 +75,15 @@ export default {
     },
     theme: {
       type: String,
-      default: 'dark',
-      validator: value => ['dark', 'light'].includes(value),
+      default: null,
+      validator: value => value === null || ['dark', 'light'].includes(value),
     },
   },
   emits: ['select', 'logo-click', 'signin', 'signup', 'signout', 'edit-profile', 'item-click'],
   data() {
     return {
       demoAvatarUrl,
+      logoBaseUrl: LOGO_BASE_URL,
       activeId: '',
       activeMenuTab: 'all',
       query: '',
@@ -105,15 +106,7 @@ export default {
       }
     },
     themeClass() {
-      return this.theme === 'light' ? 'sidebar-theme-light' : 'sidebar-theme-dark'
-    },
-    activeExpandedLogoSrc() {
-      if (this.theme === 'light') return `${LOGO_BASE_URL}/logo-light.png`
-      return `${LOGO_BASE_URL}/logo-dark.png`
-    },
-    activeCollapsedLogoSrc() {
-      if (this.theme === 'light') return `${LOGO_BASE_URL}/logo_icon.jpg`
-      return `${LOGO_BASE_URL}/logo-icon-dark.png`
+      return this.theme ? `sidebar-force-${this.theme}` : ''
     },
     collapsedTitle() {
       if (!this.title) return ''
@@ -469,7 +462,7 @@ export default {
 
 <template>
   <aside
-    class="group/sidebar fixed inset-y-0 left-0 z-40 flex h-full shrink-0 flex-col border-r border-[var(--sidebar-border)] bg-[var(--sidebar-bg)] text-[var(--sidebar-text)] transition-[width,transform] duration-200 ease-out lg:static lg:translate-x-0"
+    class="group/sidebar sidebar-root fixed inset-y-0 left-0 z-40 flex h-full shrink-0 flex-col border-r border-[var(--sidebar-border)] bg-[var(--sidebar-bg)] text-[var(--sidebar-text)] transition-[width,transform] duration-200 ease-out lg:static lg:translate-x-0"
     :style="sidebarWidthStyle"
     :class="[
       themeClass,
@@ -488,20 +481,34 @@ export default {
     </button>
 
     <div class="relative flex items-center px-4 py-4" :class="collapsed ? 'justify-center' : 'gap-2.5'">
-      <img
-        v-if="collapsed"
-        :src="activeCollapsedLogoSrc"
-        alt="Ketekny logo"
-        class="size-9 shrink-0 rounded-lg object-contain cursor-pointer"
-        @click="handleLogoClick"
-      />
-      <img
-        v-else
-        :src="activeExpandedLogoSrc"
-        alt="Ketekny logo"
-        class="min-w-0 flex-1 object-contain cursor-pointer"
-        @click="handleLogoClick"
-      />
+      <template v-if="collapsed">
+        <img
+          :src="`${logoBaseUrl}/logo_icon.jpg`"
+          alt="Ketekny logo"
+          class="sidebar-logo-light size-9 shrink-0 rounded-lg object-contain cursor-pointer"
+          @click="handleLogoClick"
+        />
+        <img
+          :src="`${logoBaseUrl}/logo-icon-dark.png`"
+          alt="Ketekny logo"
+          class="sidebar-logo-dark size-9 shrink-0 rounded-lg object-contain cursor-pointer"
+          @click="handleLogoClick"
+        />
+      </template>
+      <template v-else>
+        <img
+          :src="`${logoBaseUrl}/logo-light.png`"
+          alt="Ketekny logo"
+          class="sidebar-logo-light min-w-0 flex-1 object-contain cursor-pointer"
+          @click="handleLogoClick"
+        />
+        <img
+          :src="`${logoBaseUrl}/logo-dark.png`"
+          alt="Ketekny logo"
+          class="sidebar-logo-dark min-w-0 flex-1 object-contain cursor-pointer"
+          @click="handleLogoClick"
+        />
+      </template>
     </div>
 
     <div v-if="title && !collapsed" class="px-4 pb-2">
@@ -596,7 +603,6 @@ export default {
           :open-ids="effectiveOpenIds"
           :collapsed="collapsed"
           :favorites="favoriteIds"
-          :theme="theme"
           @select="handleMenuSelect"
           @toggle="toggle"
           @toggle-favorite="toggleFavorite"
@@ -741,7 +747,27 @@ export default {
 </template>
 
 <style scoped>
-.sidebar-theme-dark {
+.sidebar-root {
+  --sidebar-bg: #f9f9f9;
+  --sidebar-surface: #ffffff;
+  --sidebar-surface-muted: #eef4fb;
+  --sidebar-text: #0f172a;
+  --sidebar-text-soft: rgba(15, 23, 42, 0.8);
+  --sidebar-text-strong: rgba(15, 23, 42, 0.9);
+  --sidebar-text-muted: #64748b;
+  --sidebar-border: rgba(148, 163, 184, 0.28);
+  --sidebar-border-strong: rgba(100, 116, 139, 0.4);
+  --sidebar-hover: #e2e8f0;
+  --sidebar-shadow: rgba(15, 23, 42, 0.12);
+  --sidebar-danger: #ea580c;
+  --sidebar-danger-hover: #c2410c;
+  --sidebar-danger-bg: #ffedd5;
+  --sidebar-logo-light-display: block;
+  --sidebar-logo-dark-display: none;
+}
+
+html.dark .sidebar-root:not(.sidebar-force-light),
+.sidebar-root.sidebar-force-dark {
   --sidebar-bg: #0b0c0f;
   --sidebar-surface: #161a22;
   --sidebar-surface-muted: rgba(255, 255, 255, 0.06);
@@ -756,22 +782,10 @@ export default {
   --sidebar-danger: #f59e0b;
   --sidebar-danger-hover: #fbbf24;
   --sidebar-danger-bg: rgba(245, 158, 11, 0.12);
+  --sidebar-logo-light-display: none;
+  --sidebar-logo-dark-display: block;
 }
 
-.sidebar-theme-light {
-  --sidebar-bg: #f9f9f9;
-  --sidebar-surface: #ffffff;
-  --sidebar-surface-muted: #eef4fb;
-  --sidebar-text: #0f172a;
-  --sidebar-text-soft: rgba(15, 23, 42, 0.8);
-  --sidebar-text-strong: rgba(15, 23, 42, 0.9);
-  --sidebar-text-muted: #64748b;
-  --sidebar-border: rgba(148, 163, 184, 0.28);
-  --sidebar-border-strong: rgba(100, 116, 139, 0.4);
-  --sidebar-hover: #e2e8f0;
-  --sidebar-shadow: rgba(15, 23, 42, 0.12);
-  --sidebar-danger: #ea580c;
-  --sidebar-danger-hover: #c2410c;
-  --sidebar-danger-bg: #ffedd5;
-}
+.sidebar-logo-light { display: var(--sidebar-logo-light-display); }
+.sidebar-logo-dark  { display: var(--sidebar-logo-dark-display); }
 </style>

package/src/twoColLayout/components/SidebarMenuItem.vue

@@ -18,7 +18,6 @@ export default {
     openIds: { type: Object, required: true },
     collapsed: { type: Boolean, default: false },
     favorites: { type: Object, default: null },
-    theme: { type: String, default: 'dark' },
   },
   emits: ['select', 'toggle', 'toggle-favorite'],
   data() {
@@ -245,7 +244,6 @@ export default {
             :open-ids="openIds"
             :collapsed="collapsed"
             :favorites="favorites"
-            :theme="theme"
             @select="$emit('select', $event)"
             @toggle="$emit('toggle', $event)"
             @toggle-favorite="$emit('toggle-favorite', $event)"
@@ -292,7 +290,6 @@ export default {
             :open-ids="openIds"
             :collapsed="false"
             :favorites="favorites"
-            :theme="theme"
             @select="$emit('select', $event)"
             @toggle="$emit('toggle', $event)"
             @toggle-favorite="$emit('toggle-favorite', $event)"

package/src/twoColLayout/components/TwoColLayout.vue

@@ -41,10 +41,7 @@
     <button
       v-if="!mobileMenuOpen && showMobileMenuButton"
       type="button"
-      class="fixed bottom-0 left-0 z-50 inline-flex size-14 items-center justify-center rounded-tr-2xl transition-colors lg:hidden"
-      :class="theme === 'light'
-        ? 'border border-rose-200 bg-rose-100 text-rose-900 shadow-lg shadow-slate-900/10 hover:bg-rose-200'
-        : ' bg-[#e63933] text-white shadow-lg shadow-black/25'"
+      class="fixed bottom-0 left-0 z-50 inline-flex size-14 items-center justify-center rounded-tr-2xl transition-colors lg:hidden bg-brand text-brand-foreground shadow-lg shadow-black/25"
       aria-label="Open menu"
       @click="toggleMenu">
       <Menu class="size-6" :stroke-width="2.25" />
@@ -99,8 +96,8 @@ export default {
     },
     theme: {
       type: String,
-      default: "dark",
-      validator: value => ["dark", "light"].includes(value),
+      default: null,
+      validator: value => value === null || ["dark", "light"].includes(value),
     },
   },
   emits: ["select-menu", "logo-click", "signin", "signup", "signout", "edit-profile", "item-click"],

package/src/ui/kToggle.vue

@@ -148,29 +148,29 @@ export default {
   border: 1px solid #cbd5e1;
 }
 
-:global(html.dark) .k-toggle-track--on {
+html.dark .k-toggle-track--on {
   background: #0369A1;
   border-color: #0369A1;
   box-shadow: 0 2px 8px rgb(2 6 23 / 0.45);
 }
 
-:global(html.dark) .k-toggle-track--off {
+html.dark .k-toggle-track--off {
   background: #475569;
   border-color: #475569;
 }
 
-:global(html.dark) .k-toggle-track--disabled {
+html.dark .k-toggle-track--disabled {
   background: #334155;
   border-color: #334155;
 }
 
-:global(html.dark) .k-toggle-thumb--on,
-:global(html.dark) .k-toggle-thumb--off {
+html.dark .k-toggle-thumb--on,
+html.dark .k-toggle-thumb--off {
   background: #f8fafc;
   border-color: #cbd5e1;
 }
 
-:global(html.dark) .k-toggle-thumb--disabled {
+html.dark .k-toggle-thumb--disabled {
   background: #94a3b8;
   border-color: #64748b;
 }