github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-26 08:36:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: update css

Browse Source
This commit is contained in:
vben
2024-06-23 14:21:27 +08:00
parent 6f0c05dd50
commit 26b8c6ef27
49 changed files with 401 additions and 920 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/@core/forward/preferences/src/constants.ts
View File

@@ -9,9 +9,10 @@ export const COLOR_PRIMARY_RESETS = [
'hsl(211 91% 39%)',
'hsl(212 100% 45%)',
'hsl(181 84% 32%)',
'hsl(230 99% 66%)',
'hsl(161 90% 43%)',
'hsl(231 98% 65%)',
'hsl(245 82% 67%)',
'hsl(340 100% 68%)',
'hsl(347 77% 60%)',
];
export const SUPPORT_LANGUAGES: Language[] = [

3
packages/@core/forward/preferences/src/preferences.ts
View File

@@ -182,8 +182,7 @@ class PreferenceManager {
if (preference.theme) {
for (const [key, value] of Object.entries(preference.theme)) {
if (['colorPrimary'].includes(key)) {
const cssVarKey = key.replaceAll(/([A-Z])/g, '-$1').toLowerCase();
const cssVarValue = useCssVar(`--${cssVarKey}`);
const cssVarValue = useCssVar(`--primary`);
cssVarValue.value = convertToHslCssVar(value);
}
}

98
packages/@core/shared/design-tokens/src/dark/index.css
View File

@@ -1,76 +1,68 @@
:root.dark {
/* 基础背景颜色颜色 */
/* Default background color of <body />...etc */
--background: 220deg 13.04% 8%;
--foreground: 220 13% 91%;
--color-background: 220deg 13.04% 8%;
/* Background color for <Card /> */
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
/* 基础文本颜色 */
--color-foreground: 220 13% 91%;
/* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
--popover: 222.86deg 8.43% 16.27%;
--popover-foreground: 210 40% 98%;
/* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
--muted: 220deg 6.82% 17.25%;
--muted-foreground: 215 20.2% 65.1%;
/* 主题颜色 */
--color-primary: 211 91% 39%;
--primary: 211 91% 39%;
--primary-foreground: 0 0 98%;
/* 前景色，如按钮文本颜色 */
--color-primary-foreground: 0 0 98%;
/* Used for destructive actions such as <Button variant="destructive"> */
--destructive: 0 63% 31%;
--destructive-foreground: 0 0 98%;
/* Used for success actions such as <message> */
--success: 144 57% 58%;
--success-foreground: 0 0 98%;
/* Used for warning actions such as <message> */
--warning: 42 84% 61%;
--warning-foreground: 0 0 98%;
/* 颜色次要 */
--color-secondary: 240 5% 17%;
--secondary: 240 5% 17%;
--secondary-foreground: 0 0 98%;
/* 前景色，如按钮文本颜色 */
--color-secondary-foreground: 0 0 98%;
/* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
--accent: 0deg 0% 100% / 8%;
--accent-hover: 0deg 0% 100% / 12%;
--accent-foreground: 0 0 98%;
/* 次要文本颜色 */
--color-secondary-desc: 210 12.16% 70.98%;
/* Darker color */
--heavy: 0deg 0% 100% / 12%;
--heavy-foreground: var(--accent-foreground);
/* 普通颜色 */
/* Default border color */
--border: 0deg 0% 100% / 10%;
/* --color-accent: 240 3.7% 15.9%; */
/* Border color for inputs such as <Input />, <Select />, <Textarea /> */
--input: 0deg 0% 100% / 10%;
--input-placeholder: 218deg 11% 65%;
--input-background: 0deg 0% 100% / 5%;
/* --color-accent: 220deg 7.32% 16.08%; */
--color-accent: 0deg 0% 100% / 8%;
--color-accent-hover: 0deg 0% 100% / 12%;
/* 普通颜色前景色，如按钮文本颜色 */
--color-accent-foreground: 0 0 98%;
/* 破坏性颜色 */
--color-destructive: 0 63% 31%;
/* 破坏性颜色 */
--color-destructive-foreground: 0 86% 97%;
--color-muted: 220deg 6.82% 17.25%;
--color-muted-foreground: 215 20.2% 65.1%;
--color-heavy: 0deg 0% 100% / 12%;
--color-heavy-foreground: var(--color-accent-foreground);
/* 基础边框色 */
--color-border: 0deg 0% 100% / 10%;
/* --color-popover: 240 4% 29%; */
--color-popover: 222.86deg 8.43% 16.27%;
--color-popover-foreground: 210 40% 98%;
--color-card: 222.2 84% 4.9%;
--color-card-foreground: 210 40% 98%;
/* 基础文本边框色 */
--color-input: 0deg 0% 100% / 10%;
/* input placeholder 颜色 */
--color-input-placeholder: 218deg 11% 65%;
/* 基础文本背景色 */
/* --color-input-background: 216deg 5.38% 18.24%; */
--color-input-background: 0deg 0% 100% / 5%;
/* Used for focus ring */
--ring: 222.2 84% 4.9%;
/* 遮罩颜色 */
--color-overlay: 0deg 0% 0% / 40%;
--color-ring: 222.2 84% 4.9%;
--overlay: 0deg 0% 0% / 40%;
/* 基本文字大小 */
--font-size-base: 16px;
/* 基本圆角大小 */
--radius-base: 0.5rem;
--radius: 0.5rem;
color-scheme: dark;
}

116
packages/@core/shared/design-tokens/src/default/index.css
View File

@@ -1,86 +1,86 @@
/* https://gavin-yyc.github.io/colorconvert/ */
:root {
--color-background: 0 0 100%;
/* Default background color of <body />...etc */
--background: 0 0 100%;
--foreground: 210 6% 21%;
/* 基础文本颜色 */
--color-foreground: 210 6% 21%;
/* Background color for <Card /> */
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
/* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
/* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
/* 主题颜色 */
--color-primary: 211 91% 39%;
--primary: 211 91% 39%;
--primary-foreground: 0 0 98%;
/* 前景色，如按钮文本颜色 */
--color-primary-foreground: 0 0 98%;
/* Used for destructive actions such as <Button variant="destructive"> */
--destructive: 0 78% 68%;
--destructive-foreground: 0 0 98%;
/* 颜色次要 */
--color-secondary: 240 5% 96%;
/* Used for success actions such as <message> */
--success: 144 57% 58%;
--success-foreground: 0 0 98%;
/* 前景色，如按钮文本颜色 */
--color-secondary-foreground: 240 6% 10%;
/* Used for warning actions such as <message> */
--warning: 42 84% 61%;
--warning-foreground: 0 0 98%;
/* 次要文本颜色 */
--color-secondary-desc: 216.4 16.09% 34.12%;
/* Secondary colors for <Button /> */
--secondary: 240 5% 96%;
--secondary-foreground: 240 6% 10%;
/* 普通颜色 */
--color-accent: 240 5% 96%;
--color-accent-hover: 200deg 10% 90%;
/* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
--accent: 240 5% 96%;
--accent-hover: 200deg 10% 90%;
--accent-foreground: 240 6% 10%;
/* 普通颜色前景色，如按钮文本颜色 */
--color-accent-foreground: 240 6% 10%;
/* Darker color */
--heavy: 192deg 9.43% 89.61%;
--heavy-foreground: var(--accent-foreground);
/* 破坏性颜色 */
--color-destructive: 0 77.78% 68.24%;
/* Default border color */
--border: 240 6% 90%;
/* 破坏性颜色 */
--color-destructive-foreground: 0 0 98%;
--color-muted: 210 40% 96.1%;
--color-muted-foreground: 215.4 16.3% 46.9%;
--color-heavy: 192deg 9.43% 89.61%;
--color-heavy-foreground: var(--color-accent-foreground);
--color-popover: 0 0% 100%;
--color-popover-foreground: 222.2 84% 4.9%;
--color-card: 0 0% 100%;
--color-card-foreground: 222.2 84% 4.9%;
/* Border color for inputs such as <Input />, <Select />, <Textarea /> */
--input: 240deg 5.88% 90%;
--input-placeholder: 217 10.6% 65%;
--input-background: 0 0 100%;
/* 基础边框色 */
--color-border: 240 6% 90%;
/* 基础文本边框色 */
--color-input: 240deg 5.88% 90%;
/* input placeholder 颜色 */
--color-input-placeholder: 217 10.6% 65%;
/* 基础文本背景色 */
--color-input-background: 0 0 100%;
--color-ring: 222.2 84% 4.9%;
/* Used for focus ring */
--ring: 222.2 84% 4.9%;
/* 遮罩颜色 */
--color-overlay: 0deg 0% 0% / 40%;
/* dark */
--color-dark-foreground: 220 13% 91%;
--color-dark-border: 0deg 0% 100% / 10%;
--color-dark-accent: 0deg 0% 100% / 8%;
--color-dark-accent-hover: 0deg 0% 100% / 12%;
--overlay: 0deg 0% 0% / 40%;
/* 基本文字大小 */
--font-size-base: 16px;
/* 基本圆角大小 */
--radius-base: 0.5rem;
/* Border radius for card, input and buttons */
--radius: 0.5rem;
/* ======================================== */
/* 用于浅色主题下一些暗色主题的颜色 */
--dark-foreground: 220 13% 91%;
--dark-border: 0deg 0% 100% / 10%;
--dark-accent: 0deg 0% 100% / 8%;
--dark-accent-hover: 0deg 0% 100% / 12%;
/* =============component & UI============= */
/* ======================================== */
/* menu */
--color-menu-dark: 225deg 12% 13%;
--color-menu-dark-darken: 223deg 11% 10%;
--color-menu: 0deg 0% 100%;
--color-menu-darken: 0deg 0% 95%;
--menu: 0deg 0% 100%;
--menu-darken: 0deg 0% 95%;
accent-color: var(--color-primary);
/* menu-dark */
--menu-dark: 225deg 12% 13%;
--menu-dark-darken: 223deg 11% 10%;
accent-color: var(--primary);
color-scheme: light;
}

327
packages/@core/shared/design/src/index.css
View File

@@ -1,327 +0,0 @@
@charset "UTF-8";
/** css 样式重置 */
@import 'modern-normalize/modern-normalize.css';
#app,
.ant-app,
body,
html {
width: 100%;
height: 100%;
overscroll-behavior: none;
}
*,
::after,
::before {
@apply border-border;
box-sizing: border-box;
border-style: solid;
border-width: 0;
}
body.invert-mode {
@apply invert;
}
body.grayscale-mode {
@apply grayscale;
}
html {
@apply text-foreground bg-background;
font-variation-settings: normal;
text-size-adjust: 100%;
font-synthesis-weight: none;
scroll-behavior: smooth;
text-rendering: optimizelegibility;
-webkit-tap-highlight-color: transparent;
}
a,
a:active,
a:hover,
a:link,
a:visited {
color: inherit;
text-decoration: none;
}
::view-transition-new(root),
::view-transition-old(root) {
mix-blend-mode: normal;
animation: none;
}
::view-transition-old(root) {
z-index: 1;
}
::view-transition-new(root) {
z-index: 2147483646;
}
html.dark::view-transition-old(root) {
z-index: 2147483646;
}
html.dark::view-transition-new(root) {
z-index: 1;
}
input::placeholder,
textarea::placeholder {
opacity: 1;
}
input:-webkit-autofill {
border: none;
box-shadow: 0 0 0 1000px transparent inset;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
margin: 0;
appearance: none;
}
.slide-up-enter-active,
.slide-up-leave-active {
transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.slide-up-move {
transition: transform 0.3s;
}
.slide-up-enter-from,
.slide-up-leave-to {
opacity: 0;
transform: translateY(-15px);
}
.slide-down-enter-active,
.slide-down-leave-active {
transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.slide-down-move {
transition: transform 0.3s;
}
.slide-down-enter-from,
.slide-down-leave-to {
opacity: 0;
transform: translateY(15px);
}
.slide-left-enter-active,
.slide-left-leave-active {
transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.slide-left-move {
transition: transform 0.3s;
}
.slide-left-enter-from,
.slide-left-leave-to {
opacity: 0;
transform: translateX(-15px);
}
.slide-right-enter-active,
.slide-right-leave-active {
transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.slide-right-move {
transition: transform 0.3s;
}
.slide-right-enter-from,
.slide-right-leave-to {
opacity: 0;
transform: translateX(15px);
}
.fade-transition-enter-active,
.fade-transition-leave-active {
transition: opacity 0.2s ease-in-out;
}
.fade-transition-enter-from,
.fade-transition-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.2s ease-in-out;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
/* fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {
transition: all 0.3s;
}
.fade-slide-enter-from {
opacity: 0;
transform: translateX(-30px);
}
.fade-slide-leave-to {
opacity: 0;
transform: translateX(30px);
}
.fade-down-enter-active,
.fade-down-leave-active {
transition:
opacity 0.25s,
transform 0.3s;
}
.fade-down-enter-from {
opacity: 0;
transform: translateY(-10%);
}
.fade-down-leave-to {
opacity: 0;
transform: translateY(10%);
}
.fade-scale-leave-active,
.fade-scale-enter-active {
transition: all 0.28s;
}
.fade-scale-enter-from {
opacity: 0;
transform: scale(1.2);
}
.fade-scale-leave-to {
opacity: 0;
transform: scale(0.8);
}
.fade-up-enter-active,
.fade-up-leave-active {
transition:
opacity 0.2s,
transform 0.25s;
}
.fade-up-enter-from {
opacity: 0;
transform: translateY(10%);
}
.fade-up-leave-to {
opacity: 0;
transform: translateY(-10%);
}
@keyframes fade-slide {
0% {
opacity: 0;
transform: translateX(-30px);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateX(30px);
}
}
@keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fade-up {
0% {
opacity: 0;
transform: translateY(10%);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-10%);
}
}
@keyframes fade-down {
0% {
opacity: 0;
transform: translateY(-10%);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(10%);
}
}
.fade-slow {
animation: fade 3s infinite;
}
.fade-slide-slow {
animation: fade-slide 3s infinite;
}
.fade-up-slow {
animation: fade-up 3s infinite;
}
.fade-down-slow {
animation: fade-down 3s infinite;
}
.collapse-transition {
transition:
0.2s height ease-in-out,
0.2s padding-top ease-in-out,
0.2s padding-bottom ease-in-out;
}
.collapse-transition-leave-active,
.collapse-transition-enter-active {
transition:
0.2s max-height ease-in-out,
0.2s padding-top ease-in-out,
0.2s margin-top ease-in-out;
}

2
packages/@core/uikit/layout-ui/src/components/layout-footer.vue
View File

@@ -35,7 +35,7 @@ interface Props {
}
const props = withDefaults(defineProps<Props>(), {
backgroundColor: 'hsl(var(--color-background))',
backgroundColor: 'hsl(var(--background))',
fixed: true,
height: 32,
show: true,

2
packages/@core/uikit/layout-ui/src/components/layout-header.vue
View File

@@ -60,7 +60,7 @@ interface Props {
}
const props = withDefaults(defineProps<Props>(), {
backgroundColor: 'hsl(var(--color-background))',
backgroundColor: 'hsl(var(--background))',
// fixed: true,
height: 60,
isMixedNav: false,

2
packages/@core/uikit/layout-ui/src/components/layout-tabbar.vue
View File

@@ -15,7 +15,7 @@ interface Props {
}
const props = withDefaults(defineProps<Props>(), {
backgroundColor: 'hsl(var(--color-background))',
backgroundColor: 'hsl(var(--background))',
fixed: true,
height: 30,
});

2
packages/@core/uikit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
View File

@@ -17,7 +17,7 @@ function handleCollapsed() {
<template>
<div
:data-theme="theme"
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300 data-[theme=dark]:bg-[hsl(var(--color-dark-accent))] data-[theme=dark]:text-[hsl(var(--color-dark-foreground)/60%)] data-[theme=dark]:hover:bg-[hsl(var(--color-dark-accent-hover))] data-[theme=dark]:hover:text-[hsl(var(--color-dark-foreground))]"
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300 data-[theme=dark]:bg-[hsl(var(--dark-accent))] data-[theme=dark]:text-[hsl(var(--dark-foreground)/60%)] data-[theme=dark]:hover:bg-[hsl(var(--dark-accent-hover))] data-[theme=dark]:hover:text-[hsl(var(--dark-foreground))]"
@click.stop="handleCollapsed"
>
<MdiMenuClose v-if="collapsed" />

2
packages/@core/uikit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
View File

@@ -17,7 +17,7 @@ function toggleFixed() {
<template>
<div
:data-theme="theme"
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300 data-[theme=dark]:bg-[hsl(var(--color-dark-accent))] data-[theme=dark]:text-[hsl(var(--color-dark-foreground)/60%)] data-[theme=dark]:hover:bg-[hsl(var(--color-dark-accent-hover))] data-[theme=dark]:hover:text-[hsl(var(--color-dark-foreground))]"
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300 data-[theme=dark]:bg-[hsl(var(--dark-accent))] data-[theme=dark]:text-[hsl(var(--dark-foreground)/60%)] data-[theme=dark]:hover:bg-[hsl(var(--dark-accent-hover))] data-[theme=dark]:hover:text-[hsl(var(--dark-foreground))]"
@click="toggleFixed"
>
<MdiPinOff v-if="!expandOnHover" />

16
packages/@core/uikit/layout-ui/src/vben-layout.vue
View File

@@ -30,7 +30,7 @@ const props = withDefaults(defineProps<Props>(), {
// footerBackgroundColor: '#fff',
footerFixed: true,
footerHeight: 32,
// headerBackgroundColor: 'hsl(var(--color-background))',
// headerBackgroundColor: 'hsl(var(--background))',
headerHeight: 50,
headerHeightOffset: 10,
headerHidden: false,
@@ -48,7 +48,7 @@ const props = withDefaults(defineProps<Props>(), {
sidebarTheme: 'dark',
sidebarWidth: 180,
tabbarEnable: true,
// tabsBackgroundColor: 'hsl(var(--color-background))',
// tabsBackgroundColor: 'hsl(var(--background))',
tabsHeight: 36,
zIndex: 200,
});
@@ -213,17 +213,15 @@ const sidebarFace = computed(() => {
if (isDark) {
backgroundColor = isSidebarMixedNav.value
? 'hsl(var(--color-menu-dark-darken))'
: 'hsl(var(--color-menu-dark))';
? 'hsl(var(--menu-dark-darken))'
: 'hsl(var(--menu-dark))';
} else {
backgroundColor = isSidebarMixedNav.value
? 'hsl(var(--color-menu-darken))'
: 'hsl(var(--color-menu))';
? 'hsl(var(--menu-darken))'
: 'hsl(var(--menu))';
}
extraBackgroundColor = isDark
? 'hsl(var(--color-menu-dark))'
: 'hsl(var(--color-menu))';
extraBackgroundColor = isDark ? 'hsl(var(--menu-dark))' : 'hsl(var(--menu))';
return {
backgroundColor,

16
packages/@core/uikit/menu-ui/src/components/normal-menu/normal-menu.vue
View File

@@ -78,7 +78,7 @@ function handleMouseenter(menu: MenuRecordRaw) {
@include is('dark') {
.#{$namespace}-normal-menu__item {
color: hsl(var(--color-dark-foreground) / 80%);
color: hsl(var(--dark-foreground) / 80%);
}
}
@@ -92,7 +92,7 @@ function handleMouseenter(menu: MenuRecordRaw) {
// max-height: 64px;
padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
margin: var(--menu-item-margin-y) var(--menu-item-margin-x);
color: hsl(var(--color-foreground) / 90%);
color: hsl(var(--foreground) / 90%);
cursor: pointer;
border-radius: var(--menu-item-radius);
transition:
@@ -103,20 +103,20 @@ function handleMouseenter(menu: MenuRecordRaw) {
@include is('active') {
font-weight: 700;
color: hsl(var(--color-primary-foreground));
background-color: hsl(var(--color-primary));
color: hsl(var(--primary-foreground));
background-color: hsl(var(--primary));
.#{$namespace}-normal-menu__name {
color: hsl(var(--color-primary-foreground));
color: hsl(var(--primary-foreground));
}
.#{$namespace}-normal-menu__icon {
color: hsl(var(--color-primary-foreground));
color: hsl(var(--primary-foreground));
}
}
&:not(.is-active):hover {
color: hsl(var(--color-foreground));
color: hsl(var(--foreground));
background-color: hsl(var(--menu-dark-background));
}
@@ -130,7 +130,7 @@ function handleMouseenter(menu: MenuRecordRaw) {
@include is('dark') {
.#{$namespace}-normal-menu__item {
&:not(.is-active):hover {
color: hsl(var(--color-primary-foreground));
color: hsl(var(--primary-foreground));
background-color: hsl(var(--menu-dark-background));
}
}

48
packages/@core/uikit/menu-ui/src/styles/index.scss
View File

@@ -22,33 +22,33 @@
--menu-light-background: 192deg 1% 93%;
&.is-dark {
--menu-background-color: hsl(var(--color-menu-dark));
// --menu-submenu-opened-background-color: hsl(var(--color-menu-opened-dark));
--menu-background-color: hsl(var(--menu-dark));
// --menu-submenu-opened-background-color: hsl(var(--menu-opened-dark));
--menu-item-background-color: var(--menu-background-color);
--menu-item-color: hsl(var(--color-dark-foreground) / 80%);
--menu-item-hover-color: hsl(var(--color-primary-foreground));
--menu-item-color: hsl(var(--dark-foreground) / 80%);
--menu-item-hover-color: hsl(var(--primary-foreground));
--menu-item-hover-background-color: hsl(var(--menu-dark-background));
--menu-item-active-color: hsl(var(--color-primary-foreground));
--menu-item-active-background-color: hsl(var(--color-primary));
--menu-submenu-hover-color: hsl(var(--color-dark-foreground));
--menu-item-active-color: hsl(var(--primary-foreground));
--menu-item-active-background-color: hsl(var(--primary));
--menu-submenu-hover-color: hsl(var(--dark-foreground));
--menu-submenu-hover-background-color: hsl(var(--menu-dark-background));
--menu-submenu-active-color: hsl(var(--color-dark-foreground));
--menu-submenu-active-color: hsl(var(--dark-foreground));
--menu-submenu-active-background-color: transparent;
--menu-submenu-background-color: var(--menu-background-color);
}
&.is-light {
--menu-background-color: hsl(var(--color-menu));
// --menu-submenu-opened-background-color: hsl(var(--color-menu-opened));
--menu-background-color: hsl(var(--menu));
// --menu-submenu-opened-background-color: hsl(var(--menu-opened));
--menu-item-background-color: var(--menu-background-color);
--menu-item-color: hsl(var(--color-foreground));
--menu-item-color: hsl(var(--foreground));
--menu-item-hover-color: var(--menu-item-color);
--menu-item-hover-background-color: hsl(var(--menu-light-background));
--menu-item-active-color: hsl(var(--color-primary-foreground));
--menu-item-active-background-color: hsl(var(--color-primary));
--menu-submenu-hover-color: hsl(var(--color-primary));
--menu-item-active-color: hsl(var(--primary-foreground));
--menu-item-active-background-color: hsl(var(--primary));
--menu-submenu-hover-color: hsl(var(--primary));
--menu-submenu-hover-background-color: hsl(var(--menu-light-background));
--menu-submenu-active-color: hsl(var(--color-primary));
--menu-submenu-active-color: hsl(var(--primary));
--menu-submenu-active-background-color: transparent;
--menu-submenu-background-color: var(--menu-background-color);
}
@@ -79,24 +79,24 @@
--menu-background-color: transparent;
&.is-dark {
--menu-item-hover-color: var(--color-foreground);
--menu-item-hover-color: var(--foreground);
--menu-item-hover-background-color: hsl(var(--menu-dark-background));
--menu-item-active-color: hsl(var(--color-foreground));
--menu-item-active-color: hsl(var(--foreground));
--menu-item-active-background-color: hsl(var(--menu-dark-background));
--menu-submenu-active-color: hsl(var(--color-foreground));
--menu-submenu-active-color: hsl(var(--foreground));
--menu-submenu-active-background-color: hsl(var(--menu-dark-background));
--menu-submenu-hover-color: hsl(var(--color-foreground));
--menu-submenu-hover-color: hsl(var(--foreground));
--menu-submenu-hover-background-color: hsl(var(--menu-dark-background));
}
&.is-light {
--menu-item-active-color: hsl(var(--color-foreground));
--menu-item-active-color: hsl(var(--foreground));
--menu-item-active-background-color: hsl(var(--menu-light-background));
--menu-item-hover-background-color: hsl(var(--menu-light-background));
--menu-item-hover-color: hsl(var(--color-primary));
--menu-submenu-hover-color: hsl(var(--color-primary));
--menu-item-hover-color: hsl(var(--primary));
--menu-submenu-hover-color: hsl(var(--primary));
--menu-submenu-hover-background-color: hsl(var(--menu-light-background));
--menu-submenu-active-color: hsl(var(--color-foreground));
--menu-submenu-active-color: hsl(var(--foreground));
--menu-submenu-active-background-color: hsl(var(--menu-light-background));
}
}
@@ -316,7 +316,7 @@
.#{$namespace}-sub-menu-content,
.#{$namespace}-menu-item {
&.is-active {
color: hsl(var(--color-primary-foreground)) !important;
color: hsl(var(--primary-foreground)) !important;
background: var(--menu-item-active-background-color) !important;
}
}

2
packages/@core/uikit/shadcn-ui/package.json
View File

@@ -48,7 +48,7 @@
"@vben-core/typings": "workspace:*",
"@vueuse/core": "^10.11.0",
"class-variance-authority": "^0.7.0",
"radix-vue": "^1.8.4",
"radix-vue": "^1.8.5",
"vue": "^3.4.30",
"vue-sonner": "^1.1.3"
}

2
packages/@core/uikit/shadcn-ui/src/components/logo/logo.vue
View File

@@ -66,7 +66,7 @@ const logoClass = computed(() => {
/>
<span
v-if="!collapse"
class="text-primary truncate text-nowrap group-[.dark]:text-[hsl(var(--color-dark-foreground))]"
class="text-primary truncate text-nowrap group-[.dark]:text-[hsl(var(--dark-foreground))]"
>
{{ text }}
<!-- <span class="text-primary ml-1 align-super text-[smaller]">Pro</span> -->

4
packages/@core/uikit/shadcn-ui/src/components/segmented/segmented.vue
View File

@@ -22,6 +22,8 @@ const props = withDefaults(defineProps<Props>(), {
tabs: () => [],
});
const activeTab = defineModel<string>();
const getDefaultValue = computed(() => {
return props.defaultValue || props.tabs[0]?.value;
});
@@ -40,7 +42,7 @@ const tabsIndicatorStyle = computed(() => {
</script>
<template>
<Tabs :default-value="getDefaultValue">
<Tabs v-model="activeTab" :default-value="getDefaultValue">
<TabsList :style="tabsStyle" class="bg-accent relative grid w-full">
<TabsIndicator :style="tabsIndicatorStyle" />
<template v-for="tab in tabs" :key="tab.value">

2
packages/@core/uikit/shadcn-ui/src/components/ui/sonner/Sonner.vue
View File

@@ -33,7 +33,7 @@ const props = withDefaults(defineProps<ToasterProps>(), {
<!-- <style scoped>
:deep([data-sonner-toaster][data-theme='dark']),
:deep([data-sonner-toaster][data-theme='light']) {
--normal-bg: hsl(var(--color-background));
--normal-bg: hsl(var(--background));
--normal-border: theme('colors.border');
--normal-text: theme('colors.popover.foreground');
--border-radius: theme('borderRadius.md');

16
packages/@core/uikit/tabs-ui/src/components/chrome-tabs/chrome-tabs.scss
View File

@@ -1,12 +1,12 @@
@import '@vben-core/design/global';
@include b('chrome-tabs') {
--tabs-background: hsl(var(--color-background));
--tabs-background: hsl(var(--background));
--tabs-gap: 7px;
--tabs-divider: hsl(var(--color-border));
--tabs-hover: hsl(var(--color-heavy));
--tabs-active-background: hsl(var(--color-primary) / 100%);
--tabs-active: hsl(var(--color-primary-foreground));
--tabs-divider: hsl(var(--border));
--tabs-hover: hsl(var(--heavy));
--tabs-active-background: hsl(var(--primary) / 100%);
--tabs-active: hsl(var(--primary-foreground));
position: relative;
width: 100%;
@@ -26,7 +26,7 @@
display: flex;
align-items: center;
height: 100%;
color: hsl(var(--color-muted-foreground));
color: hsl(var(--muted-foreground));
cursor: pointer;
user-select: none;
@@ -81,7 +81,7 @@
transform: translateY(-50%);
// &:hover {
// background-color: hsl(var(--color-accent));
// background-color: hsl(var(--accent));
// }
}
@@ -94,7 +94,7 @@
transition: all 0.15s ease;
&:hover {
color: hsl(var(--color-foreground));
color: hsl(var(--foreground));
transform: scale(1.05);
}
}