feat(client): enhance theme css vars

koishijs · May 22, 2023 · 856f49c · 856f49c
1 parent 5614aaa
commit 856f49c
Show file tree

Hide file tree

Showing 38 changed files with 522 additions and 544 deletions.
diff --git a/packages/client/client/components/common/k-button.vue b/packages/client/client/components/common/k-button.vue
@@ -65,18 +65,18 @@ function onClick(event: MouseEvent) {
   &.disabled {
     cursor: default;
   }
+
   // default: transparent & framed
   color: var(--fg2);
-  border: 1px solid var(--border);
+  border: 1px solid var(--k-color-border);
   background-color: transparent;
   &.disabled {
     color: var(--disabled);
-    border-color: var(--border);
+    border-color: var(--k-color-border);
   }
   &:hover:not(.disabled) {
     color: var(--fg1);
-    border: 1px solid var(--border-dark);
-    background-color: var(--bg1);
+    border: 1px solid var(--k-color-border);
   }
 
   &.solid {

diff --git a/packages/client/client/components/layout/card.vue b/packages/client/client/components/layout/card.vue
@@ -31,9 +31,9 @@ $paddingY: 1.5rem;
   border-radius: 8px;
   overflow: hidden;
   position: relative;
-  background-color: var(--card-bg);
-  border: 1px solid var(--card-border);
-  box-shadow: var(--card-shadow);
+  background-color: var(--k-card-bg);
+  border: 1px solid var(--k-card-border);
+  box-shadow: var(--k-card-shadow);
   transition: var(--color-transition);
 
   header {

diff --git a/packages/client/client/components/layout/empty.vue b/packages/client/client/components/layout/empty.vue
@@ -24,7 +24,7 @@
 
   .image {
     width: 10rem;
-    color: var(--page-bg);
+    color: var(--k-page-bg);
     transition: color 0.3s ease;
 
     svg {

diff --git a/packages/client/client/components/layout/tab-item.vue b/packages/client/client/components/layout/tab-item.vue
@@ -27,7 +27,7 @@ defineProps<{
   text-overflow: ellipsis;
 
   &.active {
-    background-color: var(--hover-bg);
+    background-color: var(--k-hover-bg);
   }
 }
 

diff --git a/packages/client/client/components/slot.ts b/packages/client/client/components/slot.ts
@@ -48,8 +48,11 @@ const KSlotItem = defineComponent({
 })
 
 function defineSlotComponent(name: string) {
-  return defineComponent((_, { attrs, slots }) => {
-    return () => h(KSlot, { name, data: attrs, single: true }, slots)
+  return defineComponent({
+    inheritAttrs: false,
+    setup(_, { slots, attrs }) {
+      return () => h(KSlot, { name, data: attrs, single: true }, slots)
+    },
   })
 }
 

diff --git a/packages/client/client/index.ts b/packages/client/client/index.ts
@@ -7,8 +7,6 @@ import { initTask } from './loader'
 import { Context } from './context'
 import { createI18n } from 'vue-i18n'
 
-import './styles/index.scss'
-
 export * from './activity'
 export * from './components'
 export * from './config'

diff --git a/packages/client/client/settings/index.vue b/packages/client/client/settings/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <k-layout main="darker page-settings">
+  <k-layout main="page-settings">
     <template #left>
       <el-scrollbar>
         <el-tree
@@ -57,7 +57,7 @@ function handleClick(tree: Tree) {
 
 const path = computed({
   get() {
-    const name = route.params.name.toString()
+    const name = route.params.name?.toString()
     return name in components ? name : ''
   },
   set(value) {

diff --git a/packages/client/client/styles/aside.scss b/packages/client/client/styles/aside.scss