Update to match ensemble theme even more

components.d.ts

@@ -93,17 +93,24 @@ declare module '@vue/runtime-core' {
     'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
     'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
     IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
+    IconMdiCamera: typeof import('~icons/mdi/camera')['default']
     IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     IconMdiClose: typeof import('~icons/mdi/close')['default']
     IconMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
+    IconMdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
+    IconMdiDownload: typeof import('~icons/mdi/download')['default']
     IconMdiEye: typeof import('~icons/mdi/eye')['default']
     IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
     IconMdiHeart: typeof import('~icons/mdi/heart')['default']
+    IconMdiPause: typeof import('~icons/mdi/pause')['default']
+    IconMdiPlay: typeof import('~icons/mdi/play')['default']
+    IconMdiRecord: typeof import('~icons/mdi/record')['default']
     IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
     IconMdiSearch: typeof import('~icons/mdi/search')['default']
     IconMdiTranslate: typeof import('~icons/mdi/translate')['default']
     IconMdiTriangleDown: typeof import('~icons/mdi/triangle-down')['default']
+    IconMdiVideo: typeof import('~icons/mdi/video')['default']
     InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
     IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
     Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
@@ -141,6 +148,7 @@ declare module '@vue/runtime-core' {
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDivider: typeof import('naive-ui')['NDivider']
     NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
@@ -149,6 +157,7 @@ declare module '@vue/runtime-core' {
     NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
     NH1: typeof import('naive-ui')['NH1']
+    NH2: typeof import('naive-ui')['NH2']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
     NImage: typeof import('naive-ui')['NImage']
@@ -165,6 +174,7 @@ declare module '@vue/runtime-core' {
     NStatistic: typeof import('naive-ui')['NStatistic']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTable: typeof import('naive-ui')['NTable']
+    NTag: typeof import('naive-ui')['NTag']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']

src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { RouterView, useRoute } from 'vue-router';
 import { NGlobalStyle, NMessageProvider, NNotificationProvider, darkTheme } from 'naive-ui';
-import { darkThemeOverrides, lightThemeOverrides } from './themes';
+import { darkThemeOverrides, lightThemeOverrides } from './theme-ensemble';
 import { layouts } from './layouts';
 import { useStyleStore } from './stores/style.store';
 

src/components/ToolCard.vue

@@ -1,16 +1,34 @@
 <script setup lang="ts">
 import { useThemeVars } from 'naive-ui';
+import { ref, toRefs } from 'vue';
 import FavoriteButton from './FavoriteButton.vue';
+
+// import { useAppTheme } from '/theme_ensemble';
 import type { Tool } from '@/tools/tools.types';
 
 const props = defineProps<{ tool: Tool & { category: string } }>();
 const { tool } = toRefs(props);
 const theme = useThemeVars();
+// const appTheme = useAppTheme();
+
+const isHovered = ref(false);
+
+const cardStyle = computed(() => ({
+  border: '2px solid',
+  borderColor: isHovered.value ? '#2886BB' : 'transparent',
+  transition: 'border-color 0.3s ease-in-out',
+}));
 </script>
 
 <template>
   <router-link :to="tool.path" class="decoration-none">
-    <c-card class="h-full transition transition-duration-0.5s !border-2px !hover:border-primary">
+    <!-- <c-card class="h-full transition transition-duration-0.5s !border-2px !hover:border-primary"> -->
+    <c-card
+      class="h-full"
+      :style="cardStyle"
+      @mouseenter="isHovered = true"
+      @mouseleave="isHovered = false"
+    >
       <div flex items-center justify-between>
         <n-icon class="text-neutral-400 dark:text-neutral-600" size="40" :component="tool.icon" />
 
@@ -39,3 +57,12 @@ const theme = useThemeVars();
     </c-card>
   </router-link>
 </template>
+
+<!-- <style lang="less" scoped>
+.ToolCard {
+
+  &:hover {
+    border-color: v-bind('appTheme.primary.color');
+  }
+}
+</style> -->

src/theme-ensemble.ts

@@ -0,0 +1,55 @@
+import type { GlobalThemeOverrides } from 'naive-ui';
+
+export const lightThemeOverrides: GlobalThemeOverrides = {
+  Menu: {
+    itemHeight: '32px',
+  },
+
+  Layout: { color: '#f1f5f9' },
+
+  AutoComplete: {
+    peers: {
+      InternalSelectMenu: { height: '500px' },
+    },
+  },
+};
+
+export const darkThemeOverrides: GlobalThemeOverrides = {
+  common: {
+    primaryColor: '#2886BB',
+    primaryColorHover: '#3C98C9',
+    primaryColorPressed: '#1A5E87',
+    primaryColorSuppl: '#2886BB',
+  },
+
+  Notification: {
+    color: '#333333',
+  },
+
+  AutoComplete: {
+    peers: {
+      InternalSelectMenu: { height: '500px', color: '#1e1e1e' },
+    },
+  },
+
+  Menu: {
+    itemHeight: '32px',
+  },
+
+  Layout: {
+    color: '#1c1c1c',
+    siderColor: '#232323',
+    siderBorderColor: 'transparent',
+  },
+
+  Card: {
+    color: '#232323',
+    borderColor: '#282828',
+  },
+
+  Table: {
+    tdColor: '#232323',
+    thColor: '#353535',
+  },
+
+};

src/tools/json-diff/diff-viewer/diff-viewer.vue

@@ -2,7 +2,7 @@
 import _ from 'lodash';
 import { diff } from '../json-diff.models';
 import { DiffRootViewer } from './diff-viewer.models';
-import { useAppTheme } from '@/ui/theme/themes';
+import { useAppTheme } from '@/ui/theme/theme-ensemble';
 
 const props = defineProps<{ leftJson: unknown; rightJson: unknown }>();
 const onlyShowDifferences = ref(false);

src/ui/c-alert/c-alert.theme.ts

@@ -1,6 +1,6 @@
 import { darken } from '../color/color.models';
 import { defineThemes } from '../theme/theme.models';
-import { appThemes } from '../theme/themes';
+import { appThemes } from '../theme/theme-ensemble';
 
 import WarningIcon from '~icons/mdi/alert-circle-outline';
 import ErrorIcon from '~icons/mdi/close-circle-outline';

src/ui/c-button/c-button.theme.ts

@@ -1,6 +1,6 @@
 import { darken, lighten } from '../color/color.models';
 import { defineThemes } from '../theme/theme.models';
-import { appThemes } from '../theme/themes';
+import { appThemes } from '../theme/theme-ensemble';
 
 function createState({
   textColor,

src/ui/c-button/c-button.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { RouteLocationRaw } from 'vue-router';
-import { useAppTheme } from '../theme/themes';
+import { useAppTheme } from '../theme/theme-ensemble';
 import { useTheme } from './c-button.theme';
 
 const props = withDefaults(
@@ -105,6 +105,7 @@ const size = computed(() => theme.value.size[sizeName.value]);
 
     &:active {
       background-color: v-bind('variantTheme.pressed.backgroundColor');
+      color: white;
     }
   }
 

src/ui/c-card/c-card.vue

@@ -31,5 +31,9 @@ const theme = useTheme();
     font-weight: 500;
     margin-bottom: 20px;
   }
+
+  // &:hover {
+  //   border: 1px solid red;
+  // }
 }
 </style>

src/ui/c-input-text/c-input-text.theme.ts

@@ -6,7 +6,7 @@ export const { useTheme } = defineThemes({
     borderColor: '#333333',
 
     focus: {
-      backgroundColor: '#1ea54c1a',
+      backgroundColor: '#2886BB2f',
     },
   },
   light: {

src/ui/c-input-text/c-input-text.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useAppTheme } from '../theme/themes';
+import { useAppTheme } from '../theme/theme-ensemble';
 import { useTheme } from './c-input-text.theme';
 import { generateRandomId } from '@/utils/random';
 import { type UseValidationRule, useValidation } from '@/composable/validation';

src/ui/c-link/c-link.theme.ts

@@ -1,5 +1,5 @@
 import { defineThemes } from '../theme/theme.models';
-import { appThemes } from '../theme/themes';
+import { appThemes } from '../theme/theme-ensemble';
 
 export const { useTheme } = defineThemes({
   dark: {

src/ui/c-modal/c-modal.theme.ts

@@ -1,5 +1,5 @@
 import { defineThemes } from '../theme/theme.models';
-import { appThemes } from '../theme/themes';
+import { appThemes } from '../theme/theme-ensemble';
 
 export const { useTheme } = defineThemes({
   dark: {

src/ui/c-select/c-select.theme.ts

@@ -1,5 +1,5 @@
 import { defineThemes } from '../theme/theme.models';
-import { appThemes } from '../theme/themes';
+import { appThemes } from '../theme/theme-ensemble';
 
 const sizes = {
   small: {

src/ui/c-select/c-select.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends unknown">
-import { useAppTheme } from '../theme/themes';
+import { useAppTheme } from '../theme/theme-ensemble';
 import type { CLabelProps } from '../c-label/c-label.types';
 import type { CSelectOption } from './c-select.types';
 import { useTheme } from './c-select.theme';
@@ -142,16 +142,15 @@ function onSearchInput() {
     <div ref="elementRef" relative class="c-select" w-full>
       <div
         flex flex-nowrap cursor-pointer items-center
-        :class="{ 'is-open': isOpen, 'important:border-primary': isOpen }"
+        :class="{ 'is-open': isOpen }"
         class="c-select-input"
         tabindex="0"
-        hover:important:border-primary
         @click="toggleOpen"
         @keydown="handleKeydown"
       >
         <div flex-1 truncate>
           <slot name="displayed-value">
-            <input v-if="searchable && isOpen" ref="searchInputRef" v-model="searchQuery" type="text" placeholder="Search..." class="search-input" w-full lh-normal color-current @input="onSearchInput">
+            <input v-if="searchable && isOpen" ref="searchInputRef" v-model="searchQuery" type="text" placeholder="Search..." class="search-input" w-full color-current lh-normal @input="onSearchInput">
             <span v-else-if="selectedOption" lh-normal>
               {{ selectedOption.label }}
             </span>
@@ -180,7 +179,11 @@ function onSearchInput() {
               cursor-pointer
               px-4
               py-1
-              :class="{ active: selectedOption?.label === option.label, hover: focusIndex === index }"
+              :class="{
+                active: selectedOption?.label === option.label,
+                hover: isOpen && focusIndex === index && searchable,
+              }"
+
               class="c-select-dropdown-option"
               @click="selectOption({ option })"
             >
@@ -213,6 +216,10 @@ function onSearchInput() {
     height: v-bind('size.height');
     transition: border-color 0.2s ease-in-out;
 
+    &:hover {
+      border-color: v-bind('appTheme.primary.color');
+    }
+
     .placeholder, .chevron {
       color: v-bind('appTheme.text.mutedColor');
     }
@@ -221,7 +228,7 @@ function onSearchInput() {
   .c-select-dropdown {
     background-color: v-bind('theme.backgroundColor');
     border-radius: 4px;
-    // box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
     box-shadow: v-bind('theme.dropdownShadow');
     font-family: inherit;
     font-size: inherit;
@@ -238,9 +245,17 @@ function onSearchInput() {
         color: v-bind('theme.option.active.textColor');
       }
 
-      &:hover, &.hover {
-        background-color: v-bind('theme.option.hover.backgroundColor');
+      &:hover {
+        background-color: v-bind('appTheme.primary.color');
+        color: white;
       }
+
+      &.focused {
+        background-color: v-bind('appTheme.primary.color');
+        color: white;
+        box-shadow: none;
+      }
+
     }
   }
 }

src/ui/theme/theme-ensemble.ts

@@ -0,0 +1,76 @@
+import { defineThemes } from './theme.models';
+
+export const { themes: appThemes, useTheme: useAppTheme } = defineThemes({
+  light: {
+    background: '#ffffff',
+    text: {
+      baseColor: '#333639',
+      mutedColor: '#767c82',
+    },
+    default: {
+      color: 'rgba(46, 51, 56, 0.05)',
+      colorHover: 'rgba(46, 51, 56, 0.09)',
+      colorPressed: 'rgba(46, 51, 56, 0.22)',
+    },
+    primary: {
+      color: '#2886BB',
+      colorHover: '#52ABD3',
+      colorPressed: '#0079C0',
+      colorFaded: '#1F5170',
+    },
+    warning: {
+      color: '#f59e0b',
+      colorHover: '#f59e0b',
+      colorPressed: '#f59e0b',
+      colorFaded: '#f59e0b2f',
+    },
+    success: {
+      color: '#2886BB',
+      colorHover: '#52ABD3',
+      colorPressed: '#0079C0',
+      colorFaded: '#1F5170',
+    },
+    error: {
+      color: '#d03050',
+      colorHover: '#de576d',
+      colorPressed: '#ab1f3f',
+      colorFaded: '#d030502a',
+    },
+  },
+  dark: {
+    background: '#1e1e1e',
+    text: {
+      baseColor: '#ffffffd1',
+      mutedColor: '#ffffff80',
+    },
+    default: {
+      color: 'rgba(255, 255, 255, 0.08)',
+      colorHover: 'rgba(255, 255, 255, 0.12)',
+      colorPressed: 'rgba(255, 255, 255, 0.24)',
+    },
+    primary: {
+      color: '#2886BB',
+      colorHover: '#52ABD3',
+      colorPressed: '#0079C0',
+      colorFaded: '#1F5170',
+    },
+    warning: {
+      color: '#f59e0b',
+      colorHover: '#f59e0b',
+      colorPressed: '#f59e0b',
+      colorFaded: '#f59e0b2f',
+    },
+    success: {
+      color: '#2886BB',
+      colorHover: '#52ABD3',
+      colorPressed: '#0079C0',
+      colorFaded: '#1F5170',
+    },
+    error: {
+      color: '#e88080',
+      colorHover: '#e98b8b',
+      colorPressed: '#e57272',
+      colorFaded: '#e8808029',
+    },
+  },
+});