fix(plugin-sass-palette): remove dark-selector config

docs/plugins/development/sass-palette/guide.md

@@ -97,20 +97,6 @@ We are using `additionalData` options to let `${id}-config` module available in
 
 If the Scss file is not imported directly, but is imported through `@use` or `@import` api, the module won't be available. So that in this case, you should manually import the module with `@use "@sass-palette/${id}-config";`.
 
-### Preserved Variables
-
-`$dark-selector` is preserved for darkmode selector. You are expected to set this variable if you want your plugin or theme support darkmode. This variable will be used later in palette files.
-
-::: tip
-
-- If you are developing a plugin, you may set `$dark-selector: [data-theme="dark"] !default;` in default config files, as our guideline is asking this.
-
-  Your plugin will work with most of theme, and users are still allowed to change this selector in config file if they are using a third-party theme with different dark selector.
-
-- If you are developing a theme, you may set `$dark-selector` in default config files with your darkmode selector without `!default`, to insure users cannot override it.
-
-:::
-
 ## Palette
 
 Palette files are used for CSS variable injection, where each variable will be injected in to root with kebab-name of variable name.
@@ -158,7 +144,7 @@ Then the below CSS variables will be available under root selector:
 
 Since the default theme is providing darkmode, so you probably want different colors under lightmode and darkmode.
 
-To achieve that, you should set color variables with a map containing `light` and `dark` keys. Later, the plugin will read `$dark-selector` in your config and generate different colors for you.
+To achieve that, you should set color variables with a map containing `light` and `dark` keys. Later, the plugin will generate different colors for you.
 
 ::: details An example
 
@@ -180,7 +166,7 @@ $bg-color: (
 ) !default;
 ```
 
-Then if `$dark-selector` has a value `"[data-theme="dark"]"` in config file, you will get:
+Then you will get:
 
 ```scss
 :root {

docs/zh/plugins/development/sass-palette/guide.md

@@ -95,20 +95,6 @@ $sidebar-width: 18rem !default;
 
 如果 scss 文件不是直接导入的，而是通过 `@use` 或 `@import` API 导入的，模块将不可用。因此，在这种情况下，你应该通过 `@use "@sass-palette/${id}-config";` 手动导入模块。
 
-### 保留的配置名称
-
-`$dark-selector` 保留用于深色模式选择器。如果你希望你的插件或主题支持深色模式，则需要设置此变量。此变量稍后将在调色板文件中使用。
-
-::: tip
-
-- 如果你正在开发插件，你可以在默认配置文件中设置 `$dark-selector: [data-theme="dark"] !default;`，因为这是社区对主题的推荐要求。
-
-  你的插件将在绝大多主题中正常工作，如果用户使用具有不同深色模式选择器的第三方主题，则用户可以在配置文件中更改此选择器。
-
-- 如果你在开发主题，你可以在默认配置文件中设置 `$dark-selector` 为你的深色模式选择器同时不包含 `!default`，确保用户不能覆盖它。
-
-:::
-
 ## 调色板
 
 调色板文件用于 CSS 变量注入，其中每个变量将被注入到 root 中，变量名称转换为 kebab-name 格式。
@@ -156,7 +142,7 @@ $color-b: green !default;
 
 由于默认主题支持深色模式，因此你可能希望在浅色模式和深色模式下使用不同的颜色。
 
-为此，你应该使用包含 `light` 和 `dark` 键的映射设置颜色变量。 稍后，此插件将在你的配置中读取 `$dark-selector` 并为你生成不同的颜色。
+为此，你应该使用包含 `light` 和 `dark` 键的映射设置颜色变量。 稍后，此插件将为你生成不同的颜色。
 
 ::: details 一个例子
 
@@ -178,7 +164,7 @@ $bg-color: (
 ) !default;
 ```
 
-然后，如果在配置文件中 `$dark-selector` 的值为 `"[data-theme="dark"]"`，你会得到:
+然后你会得到:
 
 ```scss
 :root {

plugins/development/plugin-sass-palette/src/node/options.ts

@@ -53,8 +53,6 @@ export interface SassPalettePluginOptions {
    * 默认的调色板文件路径，应为绝对路径。
    *
    * @description 这是你应该通过 `!default` 来提供默认调色板值的文件。所有的变量会被转换为连字符格式然后被注入。
-   *
-   * @default "@vuepress/plugin-sass-palette/styles/default/palette.scss"
    */
 
   defaultPalette?: string

plugins/development/plugin-sass-palette/src/node/prepare/prepareConfigSass.ts

@@ -4,7 +4,7 @@ import { getIdPrefix, getPath } from '../utils.js'
 export interface PrepareConfigOptions {
   id: string
   defaultConfig: string
-  defaultPalette: string
+  defaultPalette?: string
   generator: string
   userConfig: string
   userPalette: string
@@ -24,7 +24,7 @@ export const prepareConfigSass = (
   app.writeTemp(
     `sass-palette/${getIdPrefix(id)}config.scss`,
     `\
-@import "file:///${getPath(defaultPalette)}";
+${defaultPalette ? `@import "file:///${getPath(defaultPalette)}";` : ''}
 @import "file:///${getPath(defaultConfig)}";
 @import "file:///${getPath(userPalette)}";
 @import "file:///${getPath(userConfig)}";

plugins/development/plugin-sass-palette/src/node/prepare/prepareInjectSass.ts

@@ -20,10 +20,6 @@ ${
     : ''
 }
 
-@if meta.global-variable-exists("dark-selector", $module: "${getIdPrefix(id)}config") {
-  @include helper.inject($palette-variables, ${getIdPrefix(id)}config.$dark-selector);
-} @else {
-  @include helper.inject($palette-variables);
-}
+@include helper.inject($palette-variables);
 `,
   )

plugins/development/plugin-sass-palette/src/node/prepare/preparePaletteSass.ts

@@ -3,7 +3,7 @@ import { getIdPrefix, getPath } from '../utils.js'
 
 export interface PreparePaletteOptions {
   id: string
-  defaultPalette: string
+  defaultPalette?: string
   generator: string
   userPalette: string
 }
@@ -15,7 +15,7 @@ export const preparePaletteSass = (
   app.writeTemp(
     `sass-palette/${getIdPrefix(id)}palette.scss`,
     `\
-@import "file:///${getPath(defaultPalette)}";
+${defaultPalette ? `@import "file:///${getPath(defaultPalette)}";` : ''}
 @import "file:///${getPath(userPalette)}";
 @import "file:///${getPath(generator)}";
 `,

plugins/development/plugin-sass-palette/src/node/sassPalettePlugin.ts

@@ -27,10 +27,7 @@ export const sassPalettePlugin =
         '../../styles/default/config.scss',
       ),
       palette = `.vuepress/styles/${getIdPrefix(id)}palette.scss`,
-      defaultPalette = path.resolve(
-        __dirname,
-        '../../styles/default/palette.scss',
-      ),
+      defaultPalette,
       generator = EMPTY_FILE,
       style = '',
     } = options

plugins/development/plugin-sass-palette/styles/default/config.scss

@@ -14,14 +14,3 @@ $tablet: 719px !default;
 
 // narrow mobile
 $mobile: 419px !default;
-
-/* rtl */
-$rtl-selector: 'html[dir="rtl"]' !default;
-
-/** dark mode selectors */
-$dark-selector: "[data-theme='dark']" !default;
-$light-selector: "[data-theme='light']" !default;
-
-/* Color list */
-$colors: #cf1322, #fa541c, #f39c12, #2ecc71, #25a55b, #10a5a5, #096dd9, #aa6fe9,
-  #eb2f96 !default;

plugins/development/plugin-sass-palette/styles/helper.scss

@@ -66,7 +66,7 @@
   @return get-color($color, $is-dark: true);
 }
 
-@function get-variables($variables, $dark-selector: '') {
+@function get-variables($variables) {
   $root-variables: ();
   $dark-variables: ();
 
@@ -77,26 +77,23 @@
       $root-variables: map.set($root-variables, $key, $value);
     } @else if color-is-legal($value) {
       $light-color: get-color($value, false);
+      $dark-color: get-color($value, true);
       $root-variables: map.set($root-variables, $key, $light-color);
 
-      @if $dark-selector {
-        $dark-color: get-color($value, true);
-
-        @if $light-color != $dark-color {
-          $dark-variables: map.set(
-            $dark-variables,
-            $key,
-            get-color($value, true)
-          );
-        }
+      @if $light-color != $dark-color {
+        $dark-variables: map.set(
+          $dark-variables,
+          $key,
+          get-color($value, true)
+        );
       }
     }
   }
 
   @return ('root': $root-variables, 'dark': $dark-variables);
 }
 
-@mixin inject-color($key, $config, $dark-selector: '') {
+@mixin inject-color($key, $config) {
   @if meta.type-of($config) == color {
     :root {
       #{$key}: #{$config};
@@ -110,30 +107,28 @@
         #{$key}: #{$light-color};
       }
 
-      @if $light-color != $dark-color and $dark-selector {
-        #{$dark-selector} {
+      @if $light-color != $dark-color {
+        [data-theme='dark'] {
           #{$key}: #{$dark-color};
         }
       }
     }
   }
 }
 
-@mixin inject($variables, $dark-selector: '') {
-  $result: get-variables($variables, $dark-selector);
+@mixin inject($variables) {
+  $result: get-variables($variables);
   $root-variables: map.get($result, 'root');
   $dark-variables: map.get($result, 'dark');
 
-  @if $dark-selector {
-    #{$dark-selector} {
-      @each $key, $value in $dark-variables {
-        #{$key}: #{$value};
-      }
+  :root {
+    @each $key, $value in $root-variables {
+      #{$key}: #{$value};
     }
   }
 
-  :root {
-    @each $key, $value in $root-variables {
+  [data-theme='dark'] {
+    @each $key, $value in $dark-variables {
       #{$key}: #{$value};
     }
   }