public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Update to match ensemble theme even more

Browse Source
This commit is contained in:
Bryan Liao 2025-07-31 14:25:37 -07:00
parent 5a96e1affb
commit a8ac7b8b63
16 changed files with 207 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components.d.ts vendored
View File

@ -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']

2
src/App.vue
View File

@ -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';

29
src/components/ToolCard.vue
View File

@ -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> -->

55
src/theme-ensemble.ts Normal file
View File

@ -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',
},
};

2
src/tools/json-diff/diff-viewer/diff-viewer.vue
View File

@ -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);

2
src/ui/c-alert/c-alert.theme.ts
View File

@ -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';

2
src/ui/c-button/c-button.theme.ts
View File

@ -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,

3
src/ui/c-button/c-button.vue
View File

@ -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;
}
}

4
src/ui/c-card/c-card.vue
View File

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

2
src/ui/c-input-text/c-input-text.theme.ts
View File

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

2
src/ui/c-input-text/c-input-text.vue
View File

@ -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';

2
src/ui/c-link/c-link.theme.ts
View File

@ -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: {

2
src/ui/c-modal/c-modal.theme.ts
View File

@ -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: {

2
src/ui/c-select/c-select.theme.ts
View File

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

31
src/ui/c-select/c-select.vue
View File

@ -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;
}
}
}
}

76
src/ui/theme/theme-ensemble.ts Normal file
View File

@ -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',
},
},
});