@sdata/web-vue 4.7.1 → 5.0.0

package/es/style/theme/css-variables.scss

@@ -2,145 +2,339 @@
 @use '@style/theme/index.scss' as theme;
 
 #{theme.$sd-theme-tag} {
-  #{theme.$sd-cssvars-prefix}-color-white: theme.$color-white;
-  #{theme.$sd-cssvars-prefix}-color-black: theme.$color-black;
-  #{theme.$sd-cssvars-prefix}-color-border: theme.$color-border;
-  #{theme.$sd-cssvars-prefix}-color-bg-popup: theme.$color-bg-popup;
-  #{theme.$sd-cssvars-prefix}-color-bg-1: theme.$color-bg-1;
-  #{theme.$sd-cssvars-prefix}-color-bg-2: theme.$color-bg-2;
-  #{theme.$sd-cssvars-prefix}-color-bg-3: theme.$color-bg-3;
-  #{theme.$sd-cssvars-prefix}-color-bg-4: theme.$color-bg-4;
-  #{theme.$sd-cssvars-prefix}-color-bg-5: theme.$color-bg-5;
-  #{theme.$sd-cssvars-prefix}-color-bg-white: theme.$color-bg-white;
-  #{theme.$sd-cssvars-prefix}-color-neutral-1: rgb(
-    var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-1'))
-  );
-  #{theme.$sd-cssvars-prefix}-color-neutral-2: rgb(
-    var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-2'))
-  );
-  #{theme.$sd-cssvars-prefix}-color-neutral-3: rgb(
-    var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-3'))
-  );
-  #{theme.$sd-cssvars-prefix}-color-neutral-4: rgb(
-    var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-4'))
-  );
-  #{theme.$sd-cssvars-prefix}-color-neutral-5: rgb(
-    var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-5'))
-  );
-  #{theme.$sd-cssvars-prefix}-color-neutral-6: rgb(
-    var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-6'))
-  );
-  #{theme.$sd-cssvars-prefix}-color-neutral-7: rgb(
-    var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-7'))
-  );
-  #{theme.$sd-cssvars-prefix}-color-neutral-8: rgb(
-    var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-8'))
-  );
-  #{theme.$sd-cssvars-prefix}-color-neutral-9: rgb(
-    var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-9'))
-  );
-  #{theme.$sd-cssvars-prefix}-color-neutral-10: rgb(
-    var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-10'))
-  );
-  #{theme.$sd-cssvars-prefix}-color-text-1: theme.$color-text-1;
-  #{theme.$sd-cssvars-prefix}-color-text-2: theme.$color-text-2;
-  #{theme.$sd-cssvars-prefix}-color-text-3: theme.$color-text-3;
-  #{theme.$sd-cssvars-prefix}-color-text-4: theme.$color-text-4;
-  #{theme.$sd-cssvars-prefix}-color-border-1: theme.$color-border-1;
-  #{theme.$sd-cssvars-prefix}-color-border-2: theme.$color-border-2;
-  #{theme.$sd-cssvars-prefix}-color-border-3: theme.$color-border-3;
-  #{theme.$sd-cssvars-prefix}-color-border-4: theme.$color-border-4;
-  #{theme.$sd-cssvars-prefix}-color-fill-1: theme.$color-fill-1;
-  #{theme.$sd-cssvars-prefix}-color-fill-2: theme.$color-fill-2;
-  #{theme.$sd-cssvars-prefix}-color-fill-3: theme.$color-fill-3;
-  #{theme.$sd-cssvars-prefix}-color-fill-4: theme.$color-fill-4;
-  #{theme.$sd-cssvars-prefix}-color-primary-light-1: theme.$color-primary-light-1;
-  #{theme.$sd-cssvars-prefix}-color-primary-light-2: theme.$color-primary-light-2;
-  #{theme.$sd-cssvars-prefix}-color-primary-light-3: theme.$color-primary-light-3;
-  #{theme.$sd-cssvars-prefix}-color-primary-light-4: theme.$color-primary-light-4;
-  #{theme.$sd-cssvars-prefix}-color-link-light-1: theme.$color-link-light-1;
-  #{theme.$sd-cssvars-prefix}-color-link-light-2: theme.$color-link-light-2;
-  #{theme.$sd-cssvars-prefix}-color-link-light-3: theme.$color-link-light-3;
-  #{theme.$sd-cssvars-prefix}-color-link-light-4: theme.$color-link-light-4;
-  #{theme.$sd-cssvars-prefix}-color-secondary: theme.$color-secondary;
-  #{theme.$sd-cssvars-prefix}-color-secondary-hover: theme.$color-secondary-hover;
-  #{theme.$sd-cssvars-prefix}-color-secondary-active: theme.$color-secondary-active;
-  #{theme.$sd-cssvars-prefix}-color-secondary-disabled: theme.$color-secondary-disabled;
-  #{theme.$sd-cssvars-prefix}-color-danger-light-1: theme.$color-danger-light-1;
-  #{theme.$sd-cssvars-prefix}-color-danger-light-2: theme.$color-danger-light-2;
-  #{theme.$sd-cssvars-prefix}-color-danger-light-3: theme.$color-danger-light-3;
-  #{theme.$sd-cssvars-prefix}-color-danger-light-4: theme.$color-danger-light-4;
-  #{theme.$sd-cssvars-prefix}-color-success-light-1: theme.$color-success-light-1;
-  #{theme.$sd-cssvars-prefix}-color-success-light-2: theme.$color-success-light-2;
-  #{theme.$sd-cssvars-prefix}-color-success-light-3: theme.$color-success-light-3;
-  #{theme.$sd-cssvars-prefix}-color-success-light-4: theme.$color-success-light-4;
-  #{theme.$sd-cssvars-prefix}-color-warning-light-1: theme.$color-warning-light-1;
-  #{theme.$sd-cssvars-prefix}-color-warning-light-2: theme.$color-warning-light-2;
-  #{theme.$sd-cssvars-prefix}-color-warning-light-3: theme.$color-warning-light-3;
-  #{theme.$sd-cssvars-prefix}-color-warning-light-4: theme.$color-warning-light-4;
+  #{theme.$sd-cssvars-prefix}-color-white: var(--color-white, #{theme.$color-white});
+  #{theme.$sd-cssvars-prefix}-color-black: var(--color-black, #{theme.$color-black});
+  #{theme.$sd-cssvars-prefix}-color-border: var(--color-border, #{theme.$color-border});
+  #{theme.$sd-cssvars-prefix}-color-bg-popup: var(--color-bg-popup, #{theme.$color-bg-popup});
+  #{theme.$sd-cssvars-prefix}-color-bg-1: var(--color-bg-1, #{theme.$color-bg-1});
+  #{theme.$sd-cssvars-prefix}-color-bg-2: var(--color-bg-2, #{theme.$color-bg-2});
+  #{theme.$sd-cssvars-prefix}-color-bg-3: var(--color-bg-3, #{theme.$color-bg-3});
+  #{theme.$sd-cssvars-prefix}-color-bg-4: var(--color-bg-4, #{theme.$color-bg-4});
+  #{theme.$sd-cssvars-prefix}-color-bg-5: var(--color-bg-5, #{theme.$color-bg-5});
+  #{theme.$sd-cssvars-prefix}-color-bg-white: var(--color-bg-white, #{theme.$color-bg-white});
+  #{theme.$sd-cssvars-prefix}-color-neutral-1: var(
+    --color-neutral-1,
+    #{rgb(var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-1')))}
+  );
+  #{theme.$sd-cssvars-prefix}-color-neutral-2: var(
+    --color-neutral-2,
+    #{rgb(var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-2')))}
+  );
+  #{theme.$sd-cssvars-prefix}-color-neutral-3: var(
+    --color-neutral-3,
+    #{rgb(var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-3')))}
+  );
+  #{theme.$sd-cssvars-prefix}-color-neutral-4: var(
+    --color-neutral-4,
+    #{rgb(var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-4')))}
+  );
+  #{theme.$sd-cssvars-prefix}-color-neutral-5: var(
+    --color-neutral-5,
+    #{rgb(var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-5')))}
+  );
+  #{theme.$sd-cssvars-prefix}-color-neutral-6: var(
+    --color-neutral-6,
+    #{rgb(var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-6')))}
+  );
+  #{theme.$sd-cssvars-prefix}-color-neutral-7: var(
+    --color-neutral-7,
+    #{rgb(var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-7')))}
+  );
+  #{theme.$sd-cssvars-prefix}-color-neutral-8: var(
+    --color-neutral-8,
+    #{rgb(var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-8')))}
+  );
+  #{theme.$sd-cssvars-prefix}-color-neutral-9: var(
+    --color-neutral-9,
+    #{rgb(var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-9')))}
+  );
+  #{theme.$sd-cssvars-prefix}-color-neutral-10: var(
+    --color-neutral-10,
+    #{rgb(var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-10')))}
+  );
+  #{theme.$sd-cssvars-prefix}-color-text-1: var(--color-text-1, #{theme.$color-text-1});
+  #{theme.$sd-cssvars-prefix}-color-text-2: var(--color-text-2, #{theme.$color-text-2});
+  #{theme.$sd-cssvars-prefix}-color-text-3: var(--color-text-3, #{theme.$color-text-3});
+  #{theme.$sd-cssvars-prefix}-color-text-4: var(--color-text-4, #{theme.$color-text-4});
+  #{theme.$sd-cssvars-prefix}-color-border-1: var(--color-border-1, #{theme.$color-border-1});
+  #{theme.$sd-cssvars-prefix}-color-border-2: var(--color-border-2, #{theme.$color-border-2});
+  #{theme.$sd-cssvars-prefix}-color-border-3: var(--color-border-3, #{theme.$color-border-3});
+  #{theme.$sd-cssvars-prefix}-color-border-4: var(--color-border-4, #{theme.$color-border-4});
+  #{theme.$sd-cssvars-prefix}-color-fill-1: var(--color-fill-1, #{theme.$color-fill-1});
+  #{theme.$sd-cssvars-prefix}-color-fill-2: var(--color-fill-2, #{theme.$color-fill-2});
+  #{theme.$sd-cssvars-prefix}-color-fill-3: var(--color-fill-3, #{theme.$color-fill-3});
+  #{theme.$sd-cssvars-prefix}-color-fill-4: var(--color-fill-4, #{theme.$color-fill-4});
+  #{theme.$sd-cssvars-prefix}-color-primary-light-1: var(
+    --color-primary-light-1,
+    #{theme.$color-primary-light-1}
+  );
+  #{theme.$sd-cssvars-prefix}-color-primary-light-2: var(
+    --color-primary-light-2,
+    #{theme.$color-primary-light-2}
+  );
+  #{theme.$sd-cssvars-prefix}-color-primary-light-3: var(
+    --color-primary-light-3,
+    #{theme.$color-primary-light-3}
+  );
+  #{theme.$sd-cssvars-prefix}-color-primary-light-4: var(
+    --color-primary-light-4,
+    #{theme.$color-primary-light-4}
+  );
+  #{theme.$sd-cssvars-prefix}-color-link-light-1: var(
+    --color-link-light-1,
+    #{theme.$color-link-light-1}
+  );
+  #{theme.$sd-cssvars-prefix}-color-link-light-2: var(
+    --color-link-light-2,
+    #{theme.$color-link-light-2}
+  );
+  #{theme.$sd-cssvars-prefix}-color-link-light-3: var(
+    --color-link-light-3,
+    #{theme.$color-link-light-3}
+  );
+  #{theme.$sd-cssvars-prefix}-color-link-light-4: var(
+    --color-link-light-4,
+    #{theme.$color-link-light-4}
+  );
+  #{theme.$sd-cssvars-prefix}-color-secondary: var(--color-secondary, #{theme.$color-secondary});
+  #{theme.$sd-cssvars-prefix}-color-secondary-hover: var(
+    --color-secondary-hover,
+    #{theme.$color-secondary-hover}
+  );
+  #{theme.$sd-cssvars-prefix}-color-secondary-active: var(
+    --color-secondary-active,
+    #{theme.$color-secondary-active}
+  );
+  #{theme.$sd-cssvars-prefix}-color-secondary-disabled: var(
+    --color-secondary-disabled,
+    #{theme.$color-secondary-disabled}
+  );
+  #{theme.$sd-cssvars-prefix}-color-danger-light-1: var(
+    --color-danger-light-1,
+    #{theme.$color-danger-light-1}
+  );
+  #{theme.$sd-cssvars-prefix}-color-danger-light-2: var(
+    --color-danger-light-2,
+    #{theme.$color-danger-light-2}
+  );
+  #{theme.$sd-cssvars-prefix}-color-danger-light-3: var(
+    --color-danger-light-3,
+    #{theme.$color-danger-light-3}
+  );
+  #{theme.$sd-cssvars-prefix}-color-danger-light-4: var(
+    --color-danger-light-4,
+    #{theme.$color-danger-light-4}
+  );
+  #{theme.$sd-cssvars-prefix}-color-success-light-1: var(
+    --color-success-light-1,
+    #{theme.$color-success-light-1}
+  );
+  #{theme.$sd-cssvars-prefix}-color-success-light-2: var(
+    --color-success-light-2,
+    #{theme.$color-success-light-2}
+  );
+  #{theme.$sd-cssvars-prefix}-color-success-light-3: var(
+    --color-success-light-3,
+    #{theme.$color-success-light-3}
+  );
+  #{theme.$sd-cssvars-prefix}-color-success-light-4: var(
+    --color-success-light-4,
+    #{theme.$color-success-light-4}
+  );
+  #{theme.$sd-cssvars-prefix}-color-warning-light-1: var(
+    --color-warning-light-1,
+    #{theme.$color-warning-light-1}
+  );
+  #{theme.$sd-cssvars-prefix}-color-warning-light-2: var(
+    --color-warning-light-2,
+    #{theme.$color-warning-light-2}
+  );
+  #{theme.$sd-cssvars-prefix}-color-warning-light-3: var(
+    --color-warning-light-3,
+    #{theme.$color-warning-light-3}
+  );
+  #{theme.$sd-cssvars-prefix}-color-warning-light-4: var(
+    --color-warning-light-4,
+    #{theme.$color-warning-light-4}
+  );
 
   // radius
-  #{theme.$sd-cssvars-prefix}-border-radius-none: theme.$border-radius-none;
-  #{theme.$sd-cssvars-prefix}-border-radius-small: theme.$border-radius-small;
-  #{theme.$sd-cssvars-prefix}-border-radius-medium: theme.$border-radius-medium;
-  #{theme.$sd-cssvars-prefix}-border-radius-large: theme.$border-radius-large;
-  #{theme.$sd-cssvars-prefix}-border-radius-circle: theme.$border-radius-circle;
+  #{theme.$sd-cssvars-prefix}-border-radius-none: var(
+    --border-radius-none,
+    #{theme.$border-radius-none}
+  );
+  #{theme.$sd-cssvars-prefix}-border-radius-small: var(
+    --border-radius-small,
+    #{theme.$border-radius-small}
+  );
+  #{theme.$sd-cssvars-prefix}-border-radius-medium: var(
+    --border-radius-medium,
+    #{theme.$border-radius-medium}
+  );
+  #{theme.$sd-cssvars-prefix}-border-radius-large: var(
+    --border-radius-large,
+    #{theme.$border-radius-large}
+  );
+  #{theme.$sd-cssvars-prefix}-border-radius-circle: var(
+    --border-radius-circle,
+    #{theme.$border-radius-circle}
+  );
   // component
-  #{theme.$sd-cssvars-prefix}-color-tooltip-bg: theme.$color-tooltip-bg;
-  #{theme.$sd-cssvars-prefix}-color-spin-layer-bg: theme.$color-spin-layer-bg;
-  #{theme.$sd-cssvars-prefix}-color-menu-dark-bg: theme.$color-menu-dark-bg;
-  #{theme.$sd-cssvars-prefix}-color-menu-light-bg: theme.$color-menu-light-bg;
-  #{theme.$sd-cssvars-prefix}-color-menu-dark-hover: theme.$color-menu-dark-hover;
-  #{theme.$sd-cssvars-prefix}-color-mask-bg: theme.$mask-color-bg;
+  #{theme.$sd-cssvars-prefix}-color-tooltip-bg: var(--color-tooltip-bg, #{theme.$color-tooltip-bg});
+  #{theme.$sd-cssvars-prefix}-color-spin-layer-bg: var(
+    --color-spin-layer-bg,
+    #{theme.$color-spin-layer-bg}
+  );
+  #{theme.$sd-cssvars-prefix}-color-menu-dark-bg: var(
+    --color-menu-dark-bg,
+    #{theme.$color-menu-dark-bg}
+  );
+  #{theme.$sd-cssvars-prefix}-color-menu-light-bg: var(
+    --color-menu-light-bg,
+    #{theme.$color-menu-light-bg}
+  );
+  #{theme.$sd-cssvars-prefix}-color-menu-dark-hover: var(
+    --color-menu-dark-hover,
+    #{theme.$color-menu-dark-hover}
+  );
+  #{theme.$sd-cssvars-prefix}-color-mask-bg: var(--color-mask-bg, #{theme.$mask-color-bg});
 }
 
-#{theme.$sd-theme-tag}[sd-theme='dark'] {
-  #{theme.$sd-cssvars-prefix}-color-white: theme.$dark-color-white;
-  #{theme.$sd-cssvars-prefix}-color-black: theme.$dark-color-black;
-  #{theme.$sd-cssvars-prefix}-color-border: theme.$dark-color-border;
-  #{theme.$sd-cssvars-prefix}-color-bg-1: theme.$dark-color-bg-1;
-  #{theme.$sd-cssvars-prefix}-color-bg-2: theme.$dark-color-bg-2;
-  #{theme.$sd-cssvars-prefix}-color-bg-3: theme.$dark-color-bg-3;
-  #{theme.$sd-cssvars-prefix}-color-bg-4: theme.$dark-color-bg-4;
-  #{theme.$sd-cssvars-prefix}-color-bg-5: theme.$dark-color-bg-5;
-  #{theme.$sd-cssvars-prefix}-color-bg-white: theme.$dark-color-bg-white;
-  #{theme.$sd-cssvars-prefix}-color-text-1: theme.$dark-color-text-1;
-  #{theme.$sd-cssvars-prefix}-color-text-2: theme.$dark-color-text-2;
-  #{theme.$sd-cssvars-prefix}-color-text-3: theme.$dark-color-text-3;
-  #{theme.$sd-cssvars-prefix}-color-text-4: theme.$dark-color-text-4;
-  #{theme.$sd-cssvars-prefix}-color-fill-1: theme.$dark-color-fill-1;
-  #{theme.$sd-cssvars-prefix}-color-fill-2: theme.$dark-color-fill-2;
-  #{theme.$sd-cssvars-prefix}-color-fill-3: theme.$dark-color-fill-3;
-  #{theme.$sd-cssvars-prefix}-color-fill-4: theme.$dark-color-fill-4;
-  #{theme.$sd-cssvars-prefix}-color-primary-light-1: theme.$dark-color-primary-light-1;
-  #{theme.$sd-cssvars-prefix}-color-primary-light-2: theme.$dark-color-primary-light-2;
-  #{theme.$sd-cssvars-prefix}-color-primary-light-3: theme.$dark-color-primary-light-3;
-  #{theme.$sd-cssvars-prefix}-color-primary-light-4: theme.$dark-color-primary-light-4;
-  #{theme.$sd-cssvars-prefix}-color-secondary: theme.$dark-color-secondary;
-  #{theme.$sd-cssvars-prefix}-color-secondary-hover: theme.$dark-color-secondary-hover;
-  #{theme.$sd-cssvars-prefix}-color-secondary-active: theme.$dark-color-secondary-active;
-  #{theme.$sd-cssvars-prefix}-color-secondary-disabled: theme.$dark-color-secondary-disabled;
-  #{theme.$sd-cssvars-prefix}-color-danger-light-1: theme.$dark-color-danger-light-1;
-  #{theme.$sd-cssvars-prefix}-color-danger-light-2: theme.$dark-color-danger-light-2;
-  #{theme.$sd-cssvars-prefix}-color-danger-light-3: theme.$dark-color-danger-light-3;
-  #{theme.$sd-cssvars-prefix}-color-danger-light-4: theme.$dark-color-danger-light-4;
-  #{theme.$sd-cssvars-prefix}-color-success-light-1: theme.$dark-color-success-light-1;
-  #{theme.$sd-cssvars-prefix}-color-success-light-2: theme.$dark-color-success-light-2;
-  #{theme.$sd-cssvars-prefix}-color-success-light-3: theme.$dark-color-success-light-3;
-  #{theme.$sd-cssvars-prefix}-color-success-light-4: theme.$dark-color-success-light-4;
-  #{theme.$sd-cssvars-prefix}-color-warning-light-1: theme.$dark-color-warning-light-1;
-  #{theme.$sd-cssvars-prefix}-color-warning-light-2: theme.$dark-color-warning-light-2;
-  #{theme.$sd-cssvars-prefix}-color-warning-light-3: theme.$dark-color-warning-light-3;
-  #{theme.$sd-cssvars-prefix}-color-warning-light-4: theme.$dark-color-warning-light-4;
-  #{theme.$sd-cssvars-prefix}-color-link-light-1: theme.$dark-color-link-light-1;
-  #{theme.$sd-cssvars-prefix}-color-link-light-2: theme.$dark-color-link-light-2;
-  #{theme.$sd-cssvars-prefix}-color-link-light-3: theme.$dark-color-link-light-3;
-  #{theme.$sd-cssvars-prefix}-color-link-light-4: theme.$dark-color-link-light-4;
+#{theme.$sd-theme-tag}[sd-theme='dark'],
+#{theme.$sd-theme-tag}[data-sd-theme='dark'] {
+  #{theme.$sd-cssvars-prefix}-color-white: var(--color-white, #{theme.$dark-color-white});
+  #{theme.$sd-cssvars-prefix}-color-black: var(--color-black, #{theme.$dark-color-black});
+  #{theme.$sd-cssvars-prefix}-color-border: var(--color-border, #{theme.$dark-color-border});
+  #{theme.$sd-cssvars-prefix}-color-bg-1: var(--color-bg-1, #{theme.$dark-color-bg-1});
+  #{theme.$sd-cssvars-prefix}-color-bg-2: var(--color-bg-2, #{theme.$dark-color-bg-2});
+  #{theme.$sd-cssvars-prefix}-color-bg-3: var(--color-bg-3, #{theme.$dark-color-bg-3});
+  #{theme.$sd-cssvars-prefix}-color-bg-4: var(--color-bg-4, #{theme.$dark-color-bg-4});
+  #{theme.$sd-cssvars-prefix}-color-bg-5: var(--color-bg-5, #{theme.$dark-color-bg-5});
+  #{theme.$sd-cssvars-prefix}-color-bg-white: var(--color-bg-white, #{theme.$dark-color-bg-white});
+  #{theme.$sd-cssvars-prefix}-color-text-1: var(--color-text-1, #{theme.$dark-color-text-1});
+  #{theme.$sd-cssvars-prefix}-color-text-2: var(--color-text-2, #{theme.$dark-color-text-2});
+  #{theme.$sd-cssvars-prefix}-color-text-3: var(--color-text-3, #{theme.$dark-color-text-3});
+  #{theme.$sd-cssvars-prefix}-color-text-4: var(--color-text-4, #{theme.$dark-color-text-4});
+  #{theme.$sd-cssvars-prefix}-color-fill-1: var(--color-fill-1, #{theme.$dark-color-fill-1});
+  #{theme.$sd-cssvars-prefix}-color-fill-2: var(--color-fill-2, #{theme.$dark-color-fill-2});
+  #{theme.$sd-cssvars-prefix}-color-fill-3: var(--color-fill-3, #{theme.$dark-color-fill-3});
+  #{theme.$sd-cssvars-prefix}-color-fill-4: var(--color-fill-4, #{theme.$dark-color-fill-4});
+  #{theme.$sd-cssvars-prefix}-color-primary-light-1: var(
+    --color-primary-light-1,
+    #{theme.$dark-color-primary-light-1}
+  );
+  #{theme.$sd-cssvars-prefix}-color-primary-light-2: var(
+    --color-primary-light-2,
+    #{theme.$dark-color-primary-light-2}
+  );
+  #{theme.$sd-cssvars-prefix}-color-primary-light-3: var(
+    --color-primary-light-3,
+    #{theme.$dark-color-primary-light-3}
+  );
+  #{theme.$sd-cssvars-prefix}-color-primary-light-4: var(
+    --color-primary-light-4,
+    #{theme.$dark-color-primary-light-4}
+  );
+  #{theme.$sd-cssvars-prefix}-color-secondary: var(
+    --color-secondary,
+    #{theme.$dark-color-secondary}
+  );
+  #{theme.$sd-cssvars-prefix}-color-secondary-hover: var(
+    --color-secondary-hover,
+    #{theme.$dark-color-secondary-hover}
+  );
+  #{theme.$sd-cssvars-prefix}-color-secondary-active: var(
+    --color-secondary-active,
+    #{theme.$dark-color-secondary-active}
+  );
+  #{theme.$sd-cssvars-prefix}-color-secondary-disabled: var(
+    --color-secondary-disabled,
+    #{theme.$dark-color-secondary-disabled}
+  );
+  #{theme.$sd-cssvars-prefix}-color-danger-light-1: var(
+    --color-danger-light-1,
+    #{theme.$dark-color-danger-light-1}
+  );
+  #{theme.$sd-cssvars-prefix}-color-danger-light-2: var(
+    --color-danger-light-2,
+    #{theme.$dark-color-danger-light-2}
+  );
+  #{theme.$sd-cssvars-prefix}-color-danger-light-3: var(
+    --color-danger-light-3,
+    #{theme.$dark-color-danger-light-3}
+  );
+  #{theme.$sd-cssvars-prefix}-color-danger-light-4: var(
+    --color-danger-light-4,
+    #{theme.$dark-color-danger-light-4}
+  );
+  #{theme.$sd-cssvars-prefix}-color-success-light-1: var(
+    --color-success-light-1,
+    #{theme.$dark-color-success-light-1}
+  );
+  #{theme.$sd-cssvars-prefix}-color-success-light-2: var(
+    --color-success-light-2,
+    #{theme.$dark-color-success-light-2}
+  );
+  #{theme.$sd-cssvars-prefix}-color-success-light-3: var(
+    --color-success-light-3,
+    #{theme.$dark-color-success-light-3}
+  );
+  #{theme.$sd-cssvars-prefix}-color-success-light-4: var(
+    --color-success-light-4,
+    #{theme.$dark-color-success-light-4}
+  );
+  #{theme.$sd-cssvars-prefix}-color-warning-light-1: var(
+    --color-warning-light-1,
+    #{theme.$dark-color-warning-light-1}
+  );
+  #{theme.$sd-cssvars-prefix}-color-warning-light-2: var(
+    --color-warning-light-2,
+    #{theme.$dark-color-warning-light-2}
+  );
+  #{theme.$sd-cssvars-prefix}-color-warning-light-3: var(
+    --color-warning-light-3,
+    #{theme.$dark-color-warning-light-3}
+  );
+  #{theme.$sd-cssvars-prefix}-color-warning-light-4: var(
+    --color-warning-light-4,
+    #{theme.$dark-color-warning-light-4}
+  );
+  #{theme.$sd-cssvars-prefix}-color-link-light-1: var(
+    --color-link-light-1,
+    #{theme.$dark-color-link-light-1}
+  );
+  #{theme.$sd-cssvars-prefix}-color-link-light-2: var(
+    --color-link-light-2,
+    #{theme.$dark-color-link-light-2}
+  );
+  #{theme.$sd-cssvars-prefix}-color-link-light-3: var(
+    --color-link-light-3,
+    #{theme.$dark-color-link-light-3}
+  );
+  #{theme.$sd-cssvars-prefix}-color-link-light-4: var(
+    --color-link-light-4,
+    #{theme.$dark-color-link-light-4}
+  );
   // component
-  #{theme.$sd-cssvars-prefix}-color-tooltip-bg: theme.$dark-color-tooltip-bg;
-  #{theme.$sd-cssvars-prefix}-color-spin-layer-bg: theme.$dark-color-spin-layer-bg;
-  #{theme.$sd-cssvars-prefix}-color-menu-dark-bg: theme.$color-menu-dark-bg;
-  #{theme.$sd-cssvars-prefix}-color-menu-light-bg: theme.$color-menu-dark-bg;
-  #{theme.$sd-cssvars-prefix}-color-menu-dark-hover: theme.$dark-color-menu-dark-hover;
-  #{theme.$sd-cssvars-prefix}-color-mask-bg: theme.$dark-mask-color-bg;
+  #{theme.$sd-cssvars-prefix}-color-tooltip-bg: var(
+    --color-tooltip-bg,
+    #{theme.$dark-color-tooltip-bg}
+  );
+  #{theme.$sd-cssvars-prefix}-color-spin-layer-bg: var(
+    --color-spin-layer-bg,
+    #{theme.$dark-color-spin-layer-bg}
+  );
+  #{theme.$sd-cssvars-prefix}-color-menu-dark-bg: var(
+    --color-menu-dark-bg,
+    #{theme.$color-menu-dark-bg}
+  );
+  #{theme.$sd-cssvars-prefix}-color-menu-light-bg: var(
+    --color-menu-light-bg,
+    #{theme.$color-menu-dark-bg}
+  );
+  #{theme.$sd-cssvars-prefix}-color-menu-dark-hover: var(
+    --color-menu-dark-hover,
+    #{theme.$dark-color-menu-dark-hover}
+  );
+  #{theme.$sd-cssvars-prefix}-color-mask-bg: var(--color-mask-bg, #{theme.$dark-mask-color-bg});
 }

package/es/style/theme/global.scss

@@ -1,7 +1,7 @@
 @use 'sass:string';
 @use '@style/color/colors.scss' as *;
 
-$sd-theme-tag: ':where(body, [sd-theme])'; // css 变量定义的选择器
+$sd-theme-tag: ':where(body, [sd-theme], [data-sd-theme])'; // css 变量定义的选择器
 
 $sd-vars-prefix: 'sd'; // css 变量的前缀
 
@@ -391,10 +391,10 @@ $dark-color-bg-3: #2a2a2b; // Secondary container background
 $dark-color-bg-4: #313132; // Three-level container background
 $dark-color-bg-5: #373739; // Drop-down box, Tooltips background
 $dark-color-bg-white: #f6f6f6; // In bright color mode radio, switch white background
-$dark-color-text-1: rgb(255 255 255 / 90%);
-$dark-color-text-2: rgb(255 255 255 / 70%);
-$dark-color-text-3: rgb(255 255 255 / 50%);
-$dark-color-text-4: rgb(255 255 255 / 30%);
+$dark-color-text-1: rgb(var(string.unquote('#{$sd-cssvars-prefix}-gray-10')));
+$dark-color-text-2: rgb(var(string.unquote('#{$sd-cssvars-prefix}-gray-8')));
+$dark-color-text-3: rgb(var(string.unquote('#{$sd-cssvars-prefix}-gray-6')));
+$dark-color-text-4: rgb(var(string.unquote('#{$sd-cssvars-prefix}-gray-4')));
 $dark-color-fill-1: rgb(255 255 255 / 4%);
 $dark-color-fill-2: rgb(255 255 255 / 8%);
 $dark-color-fill-3: rgb(255 255 255 / 12%);

package/es/style/theme/index.scss

@@ -10,7 +10,7 @@
 colors.$sd-vars-prefix: string.unquote('sd');
 colors.$sd-cssvars-prefix: string.unquote('--sd');
 
-$sd-theme-tag: ':where(body, [sd-theme])';
+$sd-theme-tag: ':where(body, [sd-theme], [data-sd-theme])';
 $sd-vars-prefix: string.unquote('sd');
 $sd-cssvars-prefix: string.unquote('--sd');
 

package/es/style/theme/runtime.scss

@@ -0,0 +1,29 @@
+@use 'sass:string';
+
+// 组件覆盖 → 简写兼容别名 → 全局值 → Sass 默认值。
+@function token($component, $name, $fallback, $global: null) {
+  $prefix-length: string.length($component) + 1;
+
+  @if string.slice($name, 1, $prefix-length) != '#{$component}-' {
+    $prefix-length: string.index($name, '-');
+  }
+
+  $alias: $name;
+
+  @if $prefix-length {
+    $alias: string.slice($name, $prefix-length + 1);
+  }
+
+  @if $global {
+    @if string.index($global, 'color-') == 1 {
+      $fallback: var(--sd-#{$global}, #{$fallback});
+    }
+
+    $fallback: var(--#{$global}, #{$fallback});
+  }
+
+  @return var(
+    --component-#{$component}-#{$name},
+    var(--component-#{$component}-#{$alias}, #{$fallback})
+  );
+}