vft 0.0.1 → 0.0.3

package/theme-style/src/dark/css-vars.scss

@@ -0,0 +1,41 @@
+@use 'sass:map';
+
+// CSS3 var
+@use './var' as *;
+@use '../mixins/_var.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+html.dark {
+  color-scheme: dark;
+
+  // hex colors
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-type($colors, $type);
+  }
+
+  // --el-box-shadow-#{$type}
+  @include set-component-css-var('box-shadow', $box-shadow);
+
+  // color-scheme
+  // Background --el-bg-color-#{$type}
+  @include set-component-css-var('bg-color', $bg-color);
+  // --el-text-color-#{$type}
+  @include set-component-css-var('text-color', $text-color);
+  // --el-border-color-#{$type}
+  @include set-component-css-var('border-color', $border-color);
+  // Fill --el-fill-color-#{$type}
+  @include set-component-css-var('fill-color', $fill-color);
+  @include set-component-css-var('mask-color', $mask-color);
+}
+
+@include dark(button) {
+  @include set-component-css-var('button', $button);
+}
+
+@include dark(card) {
+  @include set-component-css-var('card', $card);
+}
+
+@include dark(empty) {
+  @include set-component-css-var('empty', $empty);
+}

package/theme-style/src/dark/var.scss

@@ -0,0 +1,221 @@
+@use 'sass:map';
+@use 'sass:math';
+
+@use '../common/var.scss' as common;
+@use '../mixins/mixins.scss' as *;
+@use '../color/index.scss' as *;
+
+$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;
+}
+
+// Background
+$bg-color: () !default;
+$bg-color: map.merge(
+  (
+    'page': #0a0a0a,
+    '': #141414,
+    'overlay': #1d1e1f,
+  ),
+  $bg-color
+);
+
+// dark-mode
+@each $type in common.$types {
+  @for $i from 1 through 9 {
+    @include set-color-mix-level($type, $i, 'light', map.get($bg-color, ''));
+  }
+}
+@each $type in common.$types {
+  @include set-color-mix-level($type, 2, 'dark', common.$color-white);
+}
+
+// border
+$border-color-base: #f5f8ff;
+$border-color: () !default;
+$border-color: map.merge(
+  (
+    'darker': rgba($border-color-base, 0.35),
+    'dark': rgba($border-color-base, 0.3),
+    '': rgba($border-color-base, 0.25),
+    'light': rgba($border-color-base, 0.2),
+    'lighter': rgba($border-color-base, 0.15),
+    'extra-light': rgba($border-color-base, 0.1),
+  ),
+  $border-color
+);
+
+// mix to hex to avoid overlay issues
+@each $key, $val in $border-color {
+  $border-color: map.merge(
+    $border-color,
+    (
+      $key: mix-overlay-color($val, map.get($bg-color, '')),
+    )
+  ) !global;
+}
+
+// Box-shadow
+$box-shadow: () !default;
+$box-shadow: map.merge(
+  (
+    '': (
+      0px 12px 32px 4px rgba(0, 0, 0, 0.36),
+      0px 8px 20px rgba(0, 0, 0, 0.72),
+    ),
+    'light': (
+      0px 0px 12px rgba(0, 0, 0, 0.72),
+    ),
+    'lighter': (
+      0px 0px 6px rgba(0, 0, 0, 0.72),
+    ),
+    'dark': (
+      0px 16px 48px 16px rgba(0, 0, 0, 0.72),
+      0px 12px 32px #000000,
+      0px 8px 16px -8px #000000,
+    ),
+  ),
+  $box-shadow
+);
+
+// fill
+$fill-color-base: #fafcff;
+$fill-color: () !default;
+$fill-color: map.merge(
+  (
+    'darker': rgba($fill-color-base, 0.2),
+    'dark': rgba($fill-color-base, 0.16),
+    '': rgba($fill-color-base, 0.12),
+    'light': rgba($fill-color-base, 0.08),
+    'lighter': rgba($fill-color-base, 0.04),
+    'extra-light': rgba($fill-color-base, 0.02),
+    'blank': transparent,
+  ),
+  $fill-color
+);
+
+// mix to hex to avoid overlay issues
+@each $key, $val in $fill-color {
+  @if ($key != 'blank') {
+    $fill-color: map.merge(
+      $fill-color,
+      (
+        $key: mix-overlay-color($val, map.get($bg-color, '')),
+      )
+    ) !global;
+  }
+}
+
+// text
+$text-color-base: #f0f5ff;
+$text-color: () !default;
+$text-color: map.merge(
+  (
+    'primary': rgba($text-color-base, 0.95),
+    'regular': rgba($text-color-base, 0.85),
+    'secondary': rgba($text-color-base, 0.65),
+    'placeholder': rgba($text-color-base, 0.55),
+    'disabled': rgba($text-color-base, 0.4),
+  ),
+  $text-color
+);
+// mix to hex to avoid overlay issues
+@each $key, $val in $text-color {
+  $text-color: map.merge(
+    $text-color,
+    (
+      $key: mix-overlay-color($val, map.get($bg-color, '')),
+    )
+  ) !global;
+}
+
+// mask
+$mask-color: () !default;
+$mask-color: map.merge(
+  (
+    '': rgba(0, 0, 0, 0.8),
+    'extra-light': rgba(0, 0, 0, 0.3),
+  ),
+  $mask-color
+);
+
+// Button
+// css3 var in packages/theme-style/src/button.scss
+$button: () !default;
+$button: map.merge(
+  (
+    'disabled-text-color': rgba(255, 255, 255, 0.5),
+  ),
+  $button
+);
+
+// card
+$card: () !default;
+$card: map.merge(
+  (
+    'bg-color': getCssVar('bg-color', 'overlay'),
+  ),
+  $card
+);
+
+// Empty
+// css3 var in packages/theme-style/src/empty.scss
+$empty: () !default;
+$empty: map.merge(
+  (
+    'fill-color-0': getCssVar('color-black'),
+    'fill-color-1': #4b4b52,
+    'fill-color-2': #36383d,
+    'fill-color-3': #1e1e20,
+    'fill-color-4': #262629,
+    'fill-color-5': #202124,
+    'fill-color-6': #212224,
+    'fill-color-7': #1b1c1f,
+    'fill-color-8': #1c1d1f,
+    'fill-color-9': #18181a,
+  ),
+  $empty
+);

package/{src/web/divider/index.scss → theme-style/src/divider.scss}

@@ -1,3 +1,6 @@
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
 $name: divider;
 
 @include set-root-css-vars($name, $divider);
@@ -32,7 +35,7 @@ $name: divider;
     background-color: getCssVar('bg-color');
     padding: 0 20px;
     font-weight: 500;
-    color: getCssVar('text-color', 'primary');
+    color: getCssVar('text', 'primary-color');
     font-size: 14px;
 
     @include when(left) {

package/{src/web/empty/index.scss → theme-style/src/empty.scss}

@@ -1,14 +1,7 @@
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
 $name: empty;
-$empty: () !default;
-$empty: map-merge((
-  'img-size': '160px',
-  'img-size-small': '80px',
-  'img-size-large': '240px',
-  'text-color': white,
-  'desc-top': '10px',
-  'desc-color': getCssVar('text-placeholder-color'),
-  'desc-size': 14px,
-), $empty);
 
 @include set-root-css-vars($name, $empty);
 

package/{src/web/full-screen/index.scss → theme-style/src/full-screen.scss}

@@ -1,3 +1,6 @@
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
 $name: full-screen;
 
 @include set-root-css-vars($name, $full-screen);

package/{src/common/icon/index.scss → theme-style/src/icon.scss}

@@ -1,4 +1,5 @@
-@use './iconfont/iconfont.css';
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
 
 $name: icon;
 

package/{src/web/image/index.scss → theme-style/src/image.scss}

@@ -1,3 +1,6 @@
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
 %size {
   width: 100%;
   height: 100%;

package/theme-style/src/index.scss

@@ -0,0 +1,7 @@
+@use './base.scss';
+// component styles
+@use './divider.scss';
+@use './avatar.scss';
+@use './back-top.scss';
+@use './empty.scss';
+@use './result.scss';

package/{src/web/input/index.scss → theme-style/src/input.scss}

@@ -1,3 +1,6 @@
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
 $name: input;
 
 @function getCompCssVar($value) {

package/theme-style/src/mixins/_var.scss

@@ -0,0 +1,91 @@
+@use 'sass:map';
+
+@use 'config';
+@use 'function' as *;
+@use '../common/var' as *;
+
+// set css var value, because we need translate value to string
+// for example:
+// @include set-css-var-value('color-white', white); --vri-color-white: white;
+// @include set-css-var-value(('color', 'primary'), red); --vri-primary-color: red;
+// @include set-css-var-value('color' 'primary', red); --vri-primary-color: red;
+// --vri-primary-color: red;
+@mixin set-css-var-value($name, $value) {
+  #{joinVarName($name)}: #{$value};
+}
+
+// @include set-css-var-type('color', 'primary', $map);
+// --vri-primary-color: #{map.get($map, 'primary')};
+@mixin set-css-var-type($name, $type, $variables) {
+  #{getCssVarName($name, $type)}: #{map.get($variables, $type)};
+}
+
+// generate color vars
+// --vri-primary-color: red;
+// --vri-primary-color-light-3: #ff4d4d;
+// --vri-primary-color-light-5: #ff8080;
+// --vri-primary-color-light-7: #ffb3b3;
+// --vri-primary-color-light-8: #ffcccc;
+// --vri-primary-color-light-9: #ffe6e6;
+// --vri-primary-color-dark-2: #cc0000;
+@mixin set-css-color-type($colors, $type) {
+  @include set-css-var-value(($type, 'color'), map.get($colors, $type, 'base'));
+
+  @each $i in (3, 5, 7, 8, 9) {
+    @include set-css-var-value(($type, 'color', 'light', $i), map.get($colors, $type, 'light-#{$i}'));
+  }
+
+  @include set-css-var-value(($type, 'color', 'dark-2'), map.get($colors, $type, 'dark-2'));
+}
+
+// html css vars (can set dark)
+@mixin set-root-css-vars($name, $variables, $isDark: false) {
+  $selector: ':root';
+  @if $isDark {
+    $selector: ':root.dark';
+  }
+
+  #{$selector} {
+    @include set-component-css-var($name, $variables);
+  }
+}
+
+
+/**
+ * @description 给组件生成 css 变量
+ * @author wfd
+ * @date 2022/10/19 13:12
+ * @example
+   set-component-css-var('tabs', ('header-height': 40px,'bg-color': red ))
+   {
+     --vri-tabs-header-height: 40px;
+     --vri-tabs-bg-color: red;
+   }
+ */
+@mixin set-component-css-var($name, $variables) {
+  @each $attribute, $value in $variables {
+    @if $attribute == 'default' {
+      #{getCssVarName($name)}: #{$value};
+    } @else {
+      #{getCssVarName($name, $attribute)}: #{$value};
+    }
+  }
+}
+
+// generate rgb css var
+// --vri-primary-color-rgb: 255, 0, 0;
+// --vri-success-color-rgb: 62, 175, 124;
+@mixin set-css-color-rgb($type) {
+  $color: map.get($colors, $type, 'base');
+  @include set-css-var-value(($type, 'color', 'rgb'), #{red($color), green($color), blue($color)});
+}
+
+// generate css var from existing css var
+// for example:
+// @include css-var-from-global(('button', 'text-color'), ('color', $type))
+// --vri-button-text-color: var(--vri-color-#{$type});
+@mixin css-var-from-global($var, $gVar) {
+  $varName: joinVarName($var);
+  $gVarName: joinVarName($gVar);
+  #{$varName}: var(#{$gVarName});
+}

package/theme-style/src/mixins/config.scss

@@ -0,0 +1,5 @@
+$namespace: 'vft' !default;
+$common-separator: '-' !default;
+$element-separator: '__' !default;
+$modifier-separator: '--' !default;
+$state-prefix: 'is-' !default;

package/theme-style/src/mixins/function.scss

@@ -0,0 +1,86 @@
+@use 'config';
+
+// 返回一个值的 第二位到倒数第二位之间的字符串
+@function selectorToString($selector) {
+  $selector: inspect($selector);
+  $selector: str-slice($selector, 2, -2);
+  @return $selector;
+}
+
+//
+@function containsModifier($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, config.$modifier-separator) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containWhenFlag($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, '.' + config.$state-prefix) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containPseudoClass($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, ':') {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function hitAllSpecialNestRule($selector) {
+  @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
+}
+
+// join var name
+// joinVarName(('button', 'text-color')) => '--vri-button-text-color'
+@function joinVarName($list) {
+  $name: '--' + config.$namespace;
+  @each $item in $list {
+    @if $item != '' {
+      $name: $name + '-' + $item;
+    }
+  }
+  @return $name;
+}
+
+// getCssVarName('button', 'text-color') => '--vri-button-text-color'
+@function getCssVarName($args...) {
+  @return joinVarName($args);
+}
+
+// getCssVar('button', 'text-color') => var(--vri-button-text-color)
+@function getCssVar($args...) {
+  @return var(#{joinVarName($args)});
+}
+
+// getCssVarWithDefault(('button', 'text-color'), red) => var(--vri-button-text-color, red)
+@function getCssVarWithDefault($args, $default) {
+  @return var(#{joinVarName($args)}, #{$default});
+}
+
+// bem('block', 'element', 'modifier') => 'el-block__element--modifier'
+@function bem($block, $element: '', $modifier: '') {
+  $name: config.$namespace + config.$common-separator + $block;
+
+  @if $element != '' {
+    $name: $name + config.$element-separator + $element;
+  }
+
+  @if $modifier != '' {
+    $name: $name + config.$modifier-separator + $modifier;
+  }
+
+  // @debug $name;
+  @return $name;
+}