✨ feat: css 变量控制暗黑模式

zzxming · May 18, 2024 · 26936c8 · 26936c8
1 parent b0358d4
commit 26936c8
Show file tree

Hide file tree

Showing 19 changed files with 402 additions and 245 deletions.
diff --git a/docs/.vitepress/config/index.ts b/docs/.vitepress/config/index.ts
@@ -11,7 +11,7 @@ export default defineConfig({
     rewrites: {
         '/index.md': '/component/usage.md',
     },
-    appearance: false,
+    // appearance: false,
     themeConfig: {
         sidebar: {
             '/component/': [

diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
@@ -1,8 +1,9 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    content: ['./**/*.{less,vue}'],
-    theme: {
-        extend: {},
-    },
-    plugins: [],
-};
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ['./**/*.{less,vue}'],
+    darkMode: 'selector',
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+};
diff --git a/packages/theme/src/animation/direction.less b/packages/theme/src/animation/direction.less
@@ -3,66 +3,58 @@
 
 .direction(@animationName, @isSibling: false) {
     @directions: ltr, rtl, ttb, btt;
-    .@{namespace}-@{animationName} {
-        &-enter-active,
-        &-leave-active {
-            each(range(length(@directions)), {
-                @direction: extract(@directions, @value);
-                @resultClass: if(@isSibling, ~'&.@{direction}', ~'.@{direction}');
 
+    each(@directions, {
+        @resultClass: if(@isSibling, ~'&.@{value}', ~'.@{value}');
+
+        .@{namespace}-@{animationName} {
+            &-enter-active,
+            &-leave-active {
                 @{resultClass} {
                     @apply transition-transform;
                     transition-duration: .getCssVar(transition-duration) [];
                 }
-            });
+            }
+            &-enter-from,
+            &-leave-to {
+                @{resultClass} when (@value = ltr) {
+                    --tw-translate-x: -100%;
+                }
+                @{resultClass} when (@value = rtl) {
+                    --tw-translate-x: 100%;
+                }
+                @{resultClass} when (@value = ttb) {
+                    --tw-translate-y: -100%;
+                }
+                @{resultClass} when (@value = btt) {
+                    --tw-translate-y: 100%;
+                }
+            }
         }
-    }
-    each(range(length(@directions)), {
-        @direction: extract(@directions, @value);
-        @resultClass: if(@isSibling, ~'&.@{direction}', ~'.@{direction}');
+    });
+    each(@directions, {
+        @resultClass:if(@isSibling, ~'&.@{value}', ~'.@{value}');
 
         @{resultClass} {
             @apply absolute transform-gpu;
         }
-        @{resultClass} when (@direction = ltr), (@direction = rtl) {
+        @{resultClass} when (@value = ltr), (@value = rtl) {
             @apply top-0 bottom-0;
         }
-        @{resultClass} when (@direction = ttb), (@direction = btt) {
+        @{resultClass} when (@value = ttb), (@value = btt) {
             @apply left-0 right-0;
         }
-        @{resultClass} when (@direction = ltr) {
+        @{resultClass} when (@value = ltr) {
             @apply left-0;
         }
-        @{resultClass} when (@direction = rtl) {
+        @{resultClass} when (@value = rtl) {
             @apply right-0;
         }
-        @{resultClass} when (@direction = ttb) {
+        @{resultClass} when (@value = ttb) {
             @apply top-0;
         }
-        @{resultClass} when (@direction = btt) {
+        @{resultClass} when (@value = btt) {
             @apply bottom-0;
         }
     });
-    each(range(length(@directions)), {
-        @direction: extract(@directions, @value);
-        @resultClass: if(@isSibling, ~'&.@{direction}', ~'.@{direction}');
-
-        .@{namespace}-@{animationName} {
-            &-enter-from,
-            &-leave-to {
-                @{resultClass} when (@direction = ltr) {
-                    --tw-translate-x: -100%;
-                }
-                @{resultClass} when (@direction = rtl) {
-                    --tw-translate-x: 100%;
-                }
-                @{resultClass} when (@direction = ttb) {
-                    --tw-translate-y: -100%;
-                }
-                @{resultClass} when (@direction = btt) {
-                    --tw-translate-y: 100%;
-                }
-            }
-        }
-    });
 }
diff --git a/packages/theme/src/animation/fade.less b/packages/theme/src/animation/fade.less
@@ -1,35 +1,35 @@
-@import '../shared/variables.less';
-@import '../shared/functions.less';
-@import './createKeyframe.less';
-
-.keyframes(e('@{namespace}-fade-out'), {
-    0% {
-        opacity: 1;
-    }
-    100% {
-        opacity: 0;
-    }
-});
-.keyframes(e('@{namespace}-fade-in'), {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-});
-.fade-in() {
-    animation: e('@{namespace}-fade-in') .getCssVar(transition-duration) [] ease-in-out;
-}
-.fade-out() {
-    animation: e('@{namespace}-fade-out') .getCssVar(transition-duration) [] ease-in-out;
-}
-
-.@{namespace}-fade {
-    &-enter-active {
-        .fade-in();
-    }
-    &-leave-active {
-        .fade-out();
-    }
-}
+@import '../shared/variables.less';
+@import '../shared/functions.less';
+@import './createKeyframe.less';
+
+.keyframes(e('@{namespace}-fade-out'), {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+});
+.keyframes(e('@{namespace}-fade-in'), {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+});
+.fade-in() {
+    animation: e('@{namespace}-fade-in') .getCssVar(transition-duration) [] ease-in-out;
+}
+.fade-out() {
+    animation: e('@{namespace}-fade-out') .getCssVar(transition-duration) [] ease-in-out;
+}
+
+.@{namespace}-fade {
+    &-enter-active {
+        .fade-in();
+    }
+    &-leave-active {
+        .fade-out();
+    }
+}
diff --git a/packages/theme/src/base.less b/packages/theme/src/base.less
@@ -3,19 +3,7 @@
 @tailwind utilities;
 @import './shared/variables.less';
 
-:root {
-    .setCssVar(transition-duration, 300ms);
-
-    .setCssVar(border-color-light-2, #e9ecef);
-
-    .setCssVar(color-white, #ffffff);
-    .setCssVar(color-black, #000000);
-    .setCssVar(text-color-primary, #303133);
-    .setCssVar(text-color-regular, #606266);
-    .setCssVar(text-color-secondary, #909399);
-    .setCssVar(text-color-placeholder, #a8abb2);
-    .setCssVar(text-color-disabled, #c0c4cc);
-}
+@import './variables.less';
 
 .@{namespace}-relative {
     @apply relative;

diff --git a/packages/theme/src/captcha-slider.less b/packages/theme/src/captcha-slider.less
@@ -1,29 +1,28 @@
 @import './shared/variables.less';
-@import './shared/functions.less';
 
 .@{namespace}-captcha-slider {
-    .setCssVar(captcha-slider-bg, #f8f9fa);
-    .setCssVar(captcha-slider-bg-color, #67e8f9);
+    .setCssVar(captcha-slider-bg-color, .getCssVar(fill-color-background) []);
+    .setCssVar(captcha-slider-bg-color-fill, .getCssVar(blue-2) []);
     .setCssVar(captcha-slider-bg-transition, width 0ms ease);
     .setCssVar(captcha-slider-height, 40px);
-    .setCssVar(captcha-slider-tip-color, #495057);
-    .setCssVar(captcha-slider-tip-color-fill, #ffffff);
+    .setCssVar(captcha-slider-tip-color, .getCssVar(text-color-primary) []);
+    .setCssVar(captcha-slider-tip-color-fill, .getCssVar(color-white) []);
     .setCssVar(captcha-slider-tip-transition, background-position-x 0ms ease);
     .setCssVar(captcha-slider-trigger-width, 40px);
     .setCssVar(captcha-slider-trigger-height, 40px);
-    .setCssVar(captcha-slider-trigger-color, #a1adb1);
-    .setCssVar(captcha-slider-trigger-shadow,  0 0 6px #dee2e6);
+    .setCssVar(captcha-slider-trigger-color, .getCssVar(text-color-placeholder) []);
+    .setCssVar(captcha-slider-trigger-shadow,  .getCssVar(shadow-base) []);
     .setCssVar(captcha-slider-trigger-transition, width 0ms ease);
 
     height: .getCssVar(captcha-slider-height) [];
     padding: 0 calc(.getCssVar(captcha-slider-trigger-width) [] * 0.5);
-    background-color: .getCssVar(captcha-slider-bg) [];
+    background-color: .getCssVar(captcha-slider-bg-color) [];
     @apply relative border border-gray-300 rounded select-none;
     &__track {
         @apply relative flex items-center justify-center w-full h-full;
     }
     &__bg {
-        background-color: .getCssVar(captcha-slider-bg-color) [];
+        background-color: .getCssVar(captcha-slider-bg-color-fill) [];
         transition: .getCssVar(captcha-slider-bg-transition) [];
         @apply absolute top-0 left-0 h-full;
     }
@@ -52,5 +51,8 @@
         &--lock {
             @apply cursor-not-allowed;
         }
+        &:hover {
+            color: .getCssVar(captcha-slider-bg-color-fill) [];
+        }
     }
 }