@tak-ps/vue-tabler 4.11.3 → 4.12.1

package/CHANGELOG.md

@@ -10,6 +10,14 @@
 
 ## Version History
 
+### v4.12.1
+
+- :rocket: Additional Light mode improvements
+
+### v4.12.0
+
+- :rocket: Light mode support for TablerIconButton and TablerInput
+
 ### v4.11.3
 
 - :bug: GH Actions Updates

package/components/Dropdown.vue

@@ -84,20 +84,40 @@ const menuClasses = computed(() => {
 
 <style scoped>
 .tabler-dropdown__menu {
-    --tblr-body-color: rgba(255, 255, 255, 0.92);
-    --tblr-body-bg: rgba(20, 20, 25, 0.96);
-    --tblr-border-color: rgba(255, 255, 255, 0.15);
-    --tblr-dropdown-bg: rgba(20, 20, 25, 0.96);
-    --tblr-dropdown-border-color: rgba(255, 255, 255, 0.25);
-    --tblr-dropdown-link-hover-bg: rgba(255, 255, 255, 0.1);
-    --tblr-dropdown-link-active-bg: rgba(var(--tblr-primary-rgb), 0.25);
-    --tblr-dropdown-link-active-color: var(--tblr-primary);
+    --tabler-dropdown-color: rgba(255, 255, 255, 0.92);
+    --tabler-dropdown-bg: rgba(20, 20, 25, 0.96);
+    --tabler-dropdown-border-color: rgba(255, 255, 255, 0.25);
+    --tabler-dropdown-hover-bg: rgba(255, 255, 255, 0.1);
+    --tabler-dropdown-active-bg: rgba(var(--tblr-primary-rgb), 0.25);
+    --tabler-dropdown-active-color: var(--tblr-primary);
+    --tabler-dropdown-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35);
     margin-block: 0.25rem;
     padding: 0.25rem 0;
     overflow: hidden;
-    border-color: var(--tblr-dropdown-border-color);
-    background: var(--tblr-dropdown-bg);
+    color: var(--tabler-dropdown-color);
+    border-color: var(--tabler-dropdown-border-color);
+    background: var(--tabler-dropdown-bg);
     backdrop-filter: blur(8px);
+    box-shadow: var(--tabler-dropdown-shadow);
+}
+
+[data-bs-theme='light'] .tabler-dropdown__menu {
+    --tabler-dropdown-color: var(--tblr-body-color);
+    --tabler-dropdown-bg: rgba(255, 255, 255, 0.96);
+    --tabler-dropdown-border-color: rgba(var(--tblr-primary-rgb), 0.15);
+    --tabler-dropdown-hover-bg: rgba(var(--tblr-primary-rgb), 0.08);
+    --tabler-dropdown-active-bg: rgba(var(--tblr-primary-rgb), 0.16);
+    --tabler-dropdown-shadow: 0 0.5rem 1rem rgba(15, 23, 42, 0.08);
+}
+
+[data-bs-theme='light'] .tabler-dropdown__menu :deep(.dropdown-item),
+[data-bs-theme='light'] .tabler-dropdown__menu :deep(.tabler-dropdown__item),
+[data-bs-theme='light'] .tabler-dropdown__menu :deep(.text-white) {
+    color: var(--tblr-body-color) !important;
+}
+
+[data-bs-theme='light'] .tabler-dropdown__menu :deep(.text-white-50) {
+    color: var(--tblr-secondary-color) !important;
 }
 
 .tabler-dropdown__menu.dropdown-menu-arrow::before,
@@ -109,22 +129,29 @@ const menuClasses = computed(() => {
 .tabler-dropdown__menu :deep(.tabler-dropdown__item) {
     cursor: pointer;
     color: inherit;
-    transition: background 0.1s ease;
+    transition: background 0.1s ease, color 0.1s ease;
 }
 
 .tabler-dropdown__menu :deep(.dropdown-item:hover),
 .tabler-dropdown__menu :deep(.tabler-dropdown__item:hover) {
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--tabler-dropdown-hover-bg);
 }
 
 .tabler-dropdown__menu :deep(.dropdown-item.active),
 .tabler-dropdown__menu :deep(.dropdown-item:active),
 .tabler-dropdown__menu :deep(.tabler-dropdown__item--active) {
-    background: rgba(var(--tblr-primary-rgb), 0.25);
-    color: var(--tblr-primary);
+    background: var(--tabler-dropdown-active-bg);
+    color: var(--tabler-dropdown-active-color);
+}
+
+.tabler-dropdown__menu :deep(.dropdown-item.active .text-white),
+.tabler-dropdown__menu :deep(.dropdown-item:active .text-white),
+.tabler-dropdown__menu :deep(.tabler-dropdown__item--active .text-white) {
+    color: var(--tabler-dropdown-active-color) !important;
 }
 
 .tabler-dropdown__menu :deep(.dropdown-item.active .text-white-50),
+.tabler-dropdown__menu :deep(.dropdown-item:active .text-white-50),
 .tabler-dropdown__menu :deep(.tabler-dropdown__item--active .text-white-50) {
     color: rgba(var(--tblr-primary-rgb), 0.7) !important;
 }

package/components/IconButton.vue

@@ -48,7 +48,24 @@ const iconButtonStyle = computed(() => {
     color: var(--tblr-gray-500);
 }
 
-.custom-hover:not(.disabled):hover {
-    background-color: var(--tblr-border-color);
+.custom-hover:not(.disabled) {
+    border: 1px solid transparent;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+[data-bs-theme='light'] .custom-hover:not(.disabled):hover,
+[data-bs-theme='light'] .custom-hover:not(.disabled):focus-visible,
+[data-bs-theme='light'] .custom-hover:not(.disabled):focus-within {
+    border-radius: 6px;
+    border-color: color-mix(in srgb, var(--tblr-body-color) 18%, transparent);
+    background: color-mix(in srgb, var(--tblr-body-color) 8%, transparent);
+}
+
+[data-bs-theme='dark'] .custom-hover:not(.disabled):hover,
+[data-bs-theme='dark'] .custom-hover:not(.disabled):focus-visible,
+[data-bs-theme='dark'] .custom-hover:not(.disabled):focus-within {
+    border-radius: 6px;
+    border-color: color-mix(in srgb, var(--tblr-light) 30%, transparent);
+    background: color-mix(in srgb, var(--tblr-light) 12%, transparent);
 }
 </style>

package/components/input/Input.vue

@@ -318,6 +318,29 @@ input:autofill {
         color calc(infinity * 1s) step-end;
 }
 
+.input-group :deep(.form-control),
+.position-relative > .form-control,
+.input-group :deep(.input-group-text) {
+    border-color: var(--tblr-border-color);
+}
+
+.input-group :deep(.form-control),
+.position-relative > .form-control {
+    color: var(--tblr-body-color);
+    background-color: var(--tabler-input-bg, var(--tblr-bg-forms, var(--tblr-bg-surface, var(--tblr-body-bg))));
+}
+
+.input-group :deep(.form-control)::placeholder,
+.position-relative > .form-control::placeholder {
+    color: var(--tblr-secondary-color);
+    opacity: 1;
+}
+
+.input-group :deep(.input-group-text) {
+    color: var(--tblr-body-color);
+    background-color: var(--tabler-input-bg, var(--tblr-bg-forms, var(--tblr-bg-surface, var(--tblr-body-bg))));
+}
+
 .tabler-input-with-end {
     padding-right: 3rem;
 }
@@ -357,7 +380,7 @@ input:autofill {
 }
 
 .tabler-input-end {
-    color: var(--tblr-white);
+    color: var(--tblr-body-color);
     opacity: 1;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "4.11.3",
+    "version": "4.12.1",
     "lib": "lib.ts",
     "main": "lib.ts",
     "module": "lib.ts",

package/test/IconButton.spec.ts

@@ -0,0 +1,64 @@
+/// <reference types="vite/client" />
+
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import IconButton from '../components/IconButton.vue'
+import iconButtonSource from '../components/IconButton.vue?raw'
+
+const global = {
+    directives: {
+        tooltip: {
+            mounted() {
+                return undefined
+            },
+        },
+    },
+}
+
+describe('TablerIconButton', () => {
+    it('adds hover styling when no explicit color is provided', () => {
+        const wrapper = mount(IconButton, {
+            props: {
+                title: 'Toggle Panel',
+            },
+            slots: {
+                default: 'X',
+            },
+            global,
+        })
+
+        expect(wrapper.get('div').classes()).toContain('custom-hover')
+    })
+
+    it('skips hover styling when a custom color is provided', () => {
+        const wrapper = mount(IconButton, {
+            props: {
+                title: 'Toggle Panel',
+                color: '#123456',
+            },
+            slots: {
+                default: 'X',
+            },
+            global,
+        })
+
+        expect(wrapper.get('div').classes()).not.toContain('custom-hover')
+    })
+
+    it('uses theme-derived hover colors and borders instead of fixed values', () => {
+        expect(iconButtonSource).toContain('transition: background-color 0.15s ease, border-color 0.15s ease;')
+        expect(iconButtonSource).toContain('border: 1px solid transparent;')
+
+        expect(iconButtonSource).toContain("[data-bs-theme='light'] .custom-hover:not(.disabled):hover,")
+        expect(iconButtonSource).toContain("[data-bs-theme='light'] .custom-hover:not(.disabled):focus-visible,")
+        expect(iconButtonSource).toContain("[data-bs-theme='light'] .custom-hover:not(.disabled):focus-within {")
+        expect(iconButtonSource).toContain('border-color: color-mix(in srgb, var(--tblr-body-color) 18%, transparent);')
+        expect(iconButtonSource).toContain('background: color-mix(in srgb, var(--tblr-body-color) 8%, transparent);')
+
+        expect(iconButtonSource).toContain("[data-bs-theme='dark'] .custom-hover:not(.disabled):hover,")
+        expect(iconButtonSource).toContain("[data-bs-theme='dark'] .custom-hover:not(.disabled):focus-visible,")
+        expect(iconButtonSource).toContain("[data-bs-theme='dark'] .custom-hover:not(.disabled):focus-within {")
+        expect(iconButtonSource).toContain('border-color: color-mix(in srgb, var(--tblr-light) 30%, transparent);')
+        expect(iconButtonSource).toContain('background: color-mix(in srgb, var(--tblr-light) 12%, transparent);')
+    })
+})