feat(theme-chalk): dark palette & common color mixins (#6999)

* feat(theme-chalk): dark palette & common color mixins

* chore: move layouts var

* feat: add dark transparent colors for designer

* refactor: remove example-showcase dark bg

docs/.vitepress/vitepress/components/demo/vp-example.vue

@@ -36,10 +36,5 @@ defineProps({
     background-size: 20px 20px;
     background-position: 0px 0px, 10px 0px, 10px -10px, 0px 10px;
   }
-
-  @at-root .dark .example-showcase {
-    background-image: unset;
-    background-color: var(--bg-color-soft);
-  }
 }
 </style>

docs/.vitepress/vitepress/components/navbar/vp-search.vue

@@ -176,6 +176,7 @@ function initialize(userOptions: any) {
   --docsearch-footer-background: var(--bg-color);
   --docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8,
     0 -3px 6px 0 rgba(69, 98, 155, 0.12);
+  --docsearch-searchbox-background: var(--bg-color);
   --docsearch-searchbox-focus-background: var(--bg-color-mute);
   --docsearch-muted-color: var(--text-color-lighter);
   --docsearch-text-color: var(--text-color-light);

docs/.vitepress/vitepress/index.ts

@@ -8,6 +8,7 @@ import '../../../packages/theme-chalk/src/index.scss'
 // for dark mode
 import '../../../packages/theme-chalk/src/dark/css-vars.scss'
 
+import './styles/css-vars.scss'
 import './styles/app.scss'
 
 import 'uno.css'

docs/.vitepress/vitepress/styles/css-vars.scss

@@ -0,0 +1,70 @@
+// css variables
+:root {
+  // layouts
+  --vp-screen-max-width: 1376px;
+
+  // colors
+  --text-color: var(--el-text-color-primary);
+  --text-color-light: var(--el-text-color-regular);
+  --text-color-lighter: var(--el-text-color-secondary);
+
+  --brand-color: var(--el-color-primary);
+  --brand-color-light: var(--el-color-primary-light-1);
+  --bg-brand-color: var(--el-color-primary-light-9);
+
+  --bg-color: var(--el-bg-color);
+  --bg-color-soft: #fafafa;
+  --bg-color-mute: #f2f2f2;
+  --border-color: var(--el-border-color);
+  --border-color-light: var(--el-border-color-lighter);
+
+  --font-family: var(--el-font-family);
+  --font-family-mono: 'JetBrains Mono', source-code-pro, Menlo, Monaco, Consolas,
+    'Courier New', monospace;
+
+  // info
+  --success-color: var(--el-color-success);
+  --warning-color: var(--el-color-warning);
+  --danger-color: var(--el-color-danger);
+
+  // header vars
+  --header-height: 55px;
+  --nav-height: 55px; // alias of --header-height
+
+  /* Screen Size */
+  --vp-screen-max-width: 1376px;
+
+  // sidebar
+  --vp-sidebar-width-mobile: 320px;
+  --vp-sidebar-width-small: 272px;
+
+  --sidebar-width-sm: 16rem;
+  --sidebar-width-xs: 20rem;
+  --content-min-width: 16rem;
+  --content-max-width: 48rem;
+
+  --nav-z-index: 20;
+  --sub-nav-z-index: 10;
+  --sidebar-z-index: 40;
+  --overlay-z-index: 30;
+  // --dropdown-z-index: 22;
+
+  // code block vars
+  --code-line-height: 1.4;
+  --code-font-size: var(--el-font-size-base);
+  --code-bg-color: var(--el-fill-color-light);
+  --code-text-color: var(--text-color);
+  --code-font-family: var(--font-family-mono);
+
+  // tip block
+  --block-tip-bg-color: rgba(var(--el-color-primary-rgb), 0.1);
+  --block-warning-bg-color: rgba(var(--el-color-danger-rgb), 0.1);
+
+  // link
+  --link-active-bg-color: rgba(var(--el-color-primary-rgb), 0.1);
+}
+
+.dark {
+  --bg-color-soft: #242424;
+  --bg-color-mute: #2c2c2c;
+}

docs/.vitepress/vitepress/styles/vars.scss

@@ -1,80 +1,3 @@
-// css variables
-:root {
-  --text-color: var(--el-text-color-primary);
-  --text-color-light: var(--el-text-color-regular);
-  --text-color-lighter: var(--el-text-color-secondary);
-
-  --brand-color: var(--el-color-primary);
-  --brand-color-light: var(--el-color-primary-light-1);
-  --bg-brand-color: var(--el-color-primary-light-9);
-
-  --bg-color: var(--el-bg-color);
-  --bg-color-soft: #fafafa;
-  --bg-color-mute: #f2f2f2;
-  --border-color: var(--el-border-color);
-  --border-color-light: var(--el-border-color-lighter);
-
-  --font-family: var(--el-font-family);
-
-  --font-family-mono: 'JetBrains Mono', source-code-pro, Menlo, Monaco, Consolas,
-    'Courier New', monospace;
-
-  // info
-  --success-color: var(--el-color-success);
-  --warning-color: var(--el-color-warning);
-  --danger-color: var(--el-color-danger);
-
-  // header vars
-  --header-height: 55px;
-  --nav-height: 55px; // alias of --header-height
-
-  /* Screen Size */
-  --vp-screen-max-width: 1376px;
-
-  // sidebar
-  --vp-sidebar-width-mobile: 320px;
-  --vp-sidebar-width-small: 272px;
-
-  --sidebar-width-sm: 16rem;
-  --sidebar-width-xs: 20rem;
-  --content-min-width: 16rem;
-  --content-max-width: 48rem;
-
-  --nav-z-index: 20;
-  --sub-nav-z-index: 10;
-  --sidebar-z-index: 40;
-  --overlay-z-index: 30;
-  // --dropdown-z-index: 22;
-
-  // code block vars
-  --code-line-height: 1.4;
-  --code-font-size: var(--el-font-size-base);
-  --code-bg-color: var(--el-fill-color-lighter);
-  --code-text-color: var(--text-color);
-  --code-font-family: var(--font-family-mono);
-
-  // doc search vars
-  --docsearch-primary-color: var(--brand-color);
-  --docsearch-searchbox-background: var(--el-bg-color);
-
-  // tip block
-  --block-tip-bg-color: rgba(var(--el-color-primary-rgb), 0.1);
-  --block-warning-bg-color: rgba(var(--el-color-danger-rgb), 0.1);
-
-  // link
-  --link-active-bg-color: rgba(var(--el-color-primary-rgb), 0.1);
-}
-
-// layouts
-:root {
-  --vp-screen-max-width: 1376px;
-}
-
-.dark {
-  --bg-color-soft: var(--el-bg-color);
-  --bg-color-mute: #2c2c2c;
-}
-
 // SCSS variables
 // breakpoints
 $breakpoint-xxl: 1440px !default;

packages/theme-chalk/src/common/var.scss

@@ -49,31 +49,19 @@ $color-error: map.get($colors, 'error', 'base') !default;
 $color-info: map.get($colors, 'info', 'base') !default;
 
 // https://sass-lang.com/documentation/values/maps#immutability
-// mix color with white
+// mix colors with white/black to generate light/dark level
-@mixin set-color-type-light($type, $number) {
+@mixin set-color-mix-level(
+  $type,
+  $number,
+  $mode: 'light',
+  $mix-color: $color-white
+) {
   $colors: map.deep-merge(
     (
       $type: (
-        'light-#{$number}':
+        '#{$mode}-#{$number}':
           mix(
-            $color-white,
+            $mix-color,
-            map.get($colors, $type, 'base'),
-            math.percentage(math.div($number, 10))
-          ),
-      ),
-    ),
-    $colors
-  ) !global;
-}
-
-// mix color with black
-@mixin set-color-type-dark($type, $number) {
-  $colors: map.deep-merge(
-    (
-      $type: (
-        'dark-#{$number}':
-          mix(
-            $color-black,
             map.get($colors, $type, 'base'),
             math.percentage(math.div($number, 10))
           ),
@@ -94,14 +82,15 @@ $color-info: map.get($colors, 'info', 'base') !default;
 // 70% c6e2ff
 // 80% d9ecff
 // 90% ecf5ff
-@for $i from 1 through 9 {
+@each $type in $types {
-  @each $type in $types {
+  @for $i from 1 through 9 {
-    @include set-color-type-light($type, $i);
+    @include set-color-mix-level($type, $i, 'light', $color-white);
   }
 }
+
 // --el-color-primary-dark-2
 @each $type in $types {
-  @include set-color-type-dark($type, 2);
+  @include set-color-mix-level($type, 2, 'dark', $color-black);
 }
 
 $text-color: () !default;

packages/theme-chalk/src/dark/css-vars.scss

@@ -8,7 +8,10 @@
 html.dark {
   color-scheme: dark;
 
-  // todo dark.scss
+  // hex colors
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-type($colors, $type);
+  }
 
   // color-scheme
   // Background --el-bg-color-#{$type}

packages/theme-chalk/src/dark/var.scss

@@ -1,7 +1,64 @@
 @use 'sass:map';
-@use '../mixins/mixins.scss' as *;
+@use 'sass:math';
+
+@use '../common/var.scss' as common;
+
+$colors: () !default;
+@each $type in common.$types {
+  $colors: map.deep-merge(
+    (
+      $type: (
+        'base': map.get(common.$colors, $type, 'base'),
+      ),
+    ),
+    $colors
+  ) !global;
+}
+
+// https://sass-lang.com/documentation/values/maps#immutability
+// mix colors with white/black to generate light/dark level
+@mixin set-color-mix-level(
+  $type,
+  $number,
+  $mode: 'light',
+  $mix-color: $color-white
+) {
+  // hex mix color
+  $colors: map.deep-merge(
+    (
+      $type: (
+        '#{$mode}-#{$number}':
+          mix(
+            $mix-color,
+            map.get($colors, $type, 'base'),
+            math.percentage(math.div($number, 10))
+          ),
+      ),
+    ),
+    $colors
+  ) !global;
+
+  // for designer to view transparent
+  // $colors: map.deep-merge(
+  //   (
+  //     $type: (
+  //       '#{$mode}-#{$number}':
+  //         rgba(map.get($colors, $type, 'base'), math.div(10 - $number, 10)),
+  //     ),
+  //   ),
+  //   $colors
+  // ) !global;
+}
 
 // dark-mode
+@each $type in common.$types {
+  @for $i from 1 through 9 {
+    @include set-color-mix-level($type, $i, 'light', common.$color-black);
+  }
+}
+@each $type in common.$types {
+  @include set-color-mix-level($type, 2, 'dark', common.$color-white);
+}
 
 // Background
 $bg-color: () !default;

packages/theme-chalk/src/mixins/_var.scss

@@ -12,30 +12,28 @@
   #{joinVarName($name)}: #{$value};
 }
 
-@mixin set-css-color-type-light($type, $i) {
+// @include set-css-var-type('color', 'primary', $map);
-  #{getCssVarName('color', $type, 'light', $i)}: #{map.get(
+// --el-color-primary: #{map.get($map, 'primary')};
-      $colors,
-      $type,
-      'light-#{$i}'
-    )};
-}
-
-@mixin set-css-color-type($type) {
-  #{getCssVarName('color', $type)}: #{map.get($colors, $type, 'base')};
-  @each $i in (3, 5, 7, 8, 9) {
-    @include set-css-color-type-light($type, $i);
-  }
-  #{getCssVarName('color', $type, 'dark-2')}: #{map.get(
-      $colors,
-      $type,
-      'dark-2'
-    )};
-}
-
 @mixin set-css-var-type($name, $type, $variables) {
   #{getCssVarName($name, $type)}: #{map.get($variables, $type)};
 }
 
+@mixin set-css-color-type($colors, $type) {
+  @include set-css-var-value(('color', $type), map.get($colors, $type, 'base'));
+
+  @each $i in (3, 5, 7, 8, 9) {
+    @include set-css-var-value(
+      ('color', $type, 'light', $i),
+      map.get($colors, $type, 'light-#{$i}')
+    );
+  }
+
+  @include set-css-var-value(
+    ('color', $type, 'dark-2'),
+    map.get($colors, $type, 'dark-2')
+  );
+}
+
 // set all css var for component by map
 @mixin set-component-css-var($name, $variables) {
   @each $attribute, $value in $variables {

packages/theme-chalk/src/var.scss

@@ -8,30 +8,49 @@
 // do not need that, since this could introduce recalculation overhead for rendering.
 // https://lisilinhart.info/posts/css-variables-performance/
 
+// common
 :root {
-  color-scheme: light;
-
   @include set-css-var-value('color-white', $color-white);
   @include set-css-var-value('color-black', $color-black);
-  @include set-css-var-value('color-primary', $color-primary);
 
   // get rgb
   @each $type in (primary, success, warning, danger, error, info) {
     @include set-css-color-rgb($type);
   }
 
-  @for $i from 1 through 9 {
+  // Typography
-    @include set-css-color-type-light('primary', $i);
+  @include set-component-css-var('font-size', $font-size);
-  }
+  @include set-component-css-var('font-family', $font-family);
-  @include set-css-var-value(
+
-    ('color-primary', 'dark-2'),
+  @include set-css-var-value('font-weight-primary', 500);
-    map.get($colors, 'primary', 'dark-2')
+  @include set-css-var-value('font-line-height-primary', 24px);
-  );
+
+  // z-index --el-index-#{$type}
+  @include set-component-css-var('index', $z-index);
+
+  // --el-border-radius-#{$type}
+  @include set-component-css-var('border-radius', $border-radius);
+
+  // Transition
+  // refer to this website to get the bezier motion function detail
+  // https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter)
+  @include set-component-css-var('transition-duration', $transition-duration);
+
+  @include set-component-css-var('transition-function', $transition-function);
+  @include set-component-css-var('transition', $transition);
+}
+
+// for light
+:root {
+  color-scheme: light;
+
+  @include set-css-var-value('color-white', $color-white);
+  @include set-css-var-value('color-black', $color-black);
 
   // --el-color-#{$type}
   // --el-color-#{$type}-light-{$i}
-  @each $type in (success, warning, danger, error, info) {
+  @each $type in (primary, success, warning, danger, error, info) {
-    @include set-css-color-type($type);
+    @include set-css-color-type($colors, $type);
   }
 
   // color-scheme
@@ -44,18 +63,12 @@
   // Fill --el-fill-color-#{$type}
   @include set-component-css-var('fill-color', $fill-color);
 
-  // --el-border-radius-#{$type}
-  @include set-component-css-var('border-radius', $border-radius);
-  // Typography
-  @include set-component-css-var('font-size', $font-size);
-  @include set-component-css-var('font-family', $font-family);
   // Box-shadow
   // --el-box-shadow-#{$type}
   @include set-component-css-var('box-shadow', $box-shadow);
   // Disable base
   @include set-component-css-var('disabled', $disabled);
-  // z-index --el-index-#{$type}
+
-  @include set-component-css-var('index', $z-index);
   // overlay & mask
   @include set-component-css-var('overlay-color', $overlay-color);
   @include set-component-css-var('mask-color', $mask-color);
@@ -71,18 +84,4 @@
 
   // Svg
   @include css-var-from-global('svg-monochrome-grey', 'border-color');
-
-  @include set-css-var-value('font-weight-primary', 500);
-  @include set-css-var-value('font-line-height-primary', 24px);
-
-  // z-index
-
-  /* Transition
--------------------------- */
-  // refer to this website to get the bezier motion function detail
-  // https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter)
-  @include set-component-css-var('transition-duration', $transition-duration);
-
-  @include set-component-css-var('transition-function', $transition-function);
-  @include set-component-css-var('transition', $transition);
 }