y-admin-pro 0.0.1

package/packages/style/themes/rounded-css-var.scss

@@ -0,0 +1,6 @@
+/** 圆角主题 css 变量 */
+@use './rounded.scss' as *;
+@use './theme-util.scss' as *;
+$rounded-selector: 'html.rounded' !default;
+
+@include set-theme-var($rounded-selector, $ele-rounded);

package/packages/style/themes/rounded.scss

@@ -0,0 +1,256 @@
+/** 圆角主题 */
+@use 'sass:map';
+@use '../util.scss' as *;
+$radius-large: 8px !default;
+
+$ele-rounded: () !default;
+$ele-rounded: map.deep-merge(
+  (
+    'header': (
+      'menu-height': 38px,
+      'tool-height': 38px,
+      'tool-radius': elVar('border-radius', 'base'),
+      'primary-active-bg': rgba(255, 255, 255, 0.24)
+    ),
+    'sidebar': (
+      'tool-height': 38px
+    ),
+    'alert': (
+      'radius': $radius-large,
+      'close-hover-bg': hsla(0, 0%, 60%, 0.15)
+    ),
+    'alert-dark': (
+      'close-hover-bg': rgba(255, 255, 255, 0.2)
+    ),
+    'message': (
+      'radius': $radius-large,
+      'close-hover-bg': hsla(0, 0%, 60%, 0.15)
+    ),
+    'card': (
+      'radius': $radius-large,
+      'header-font-weight': bold
+    ),
+    'drawer': (
+      'icon-hover-bg': elVar('fill-color', 'light')
+    ),
+    'dropdown': (
+      'padding': 6px 4px,
+      'item-margin': 2px,
+      'item-padding': 0 12px,
+      'item-radius': elVar('border-radius', 'small'),
+      'sm-padding': 3px 2px,
+      'sm-item-padding': 0 10px,
+      'lg-padding': 8px 6px,
+      'lg-item-padding': 0 14px
+    ),
+    'file': (
+      'item-radius': $radius-large
+    ),
+    'icon': (
+      'menus-padding': 12px 4px,
+      'menu-radius': elVar('border-radius', 'small'),
+      'menu-hover-color': elVar('text-color', 'primary'),
+      'menu-hover-bg': elVar('fill-color', 'light'),
+      'menu-active-line': 0
+    ),
+    'map': (
+      'search-padding': 2px 12px 6px 12px
+    ),
+    'menu': (
+      'arrow-margin': 0 -8px 0 6px,
+      'item-padding': 6px,
+      'item-radius': elVar('border-radius', 'base'),
+      'item-hover-color': elVar('text-color', 'primary'),
+      'item-hover-bg': elVar('fill-color', 'light'),
+      'item-focus-bg': elVar('fill-color', 'light'),
+      'item-active-line': 0
+    ),
+    'menu-popup': (
+      'radius': $radius-large,
+      'item-padding': 12px
+    ),
+    'menu-horizontal': (
+      'padding': 8px 6px,
+      'height': 40px,
+      'item-padding': 12px,
+      'item-margin': 4px,
+      'item-radius': elVar('border-radius', 'base'),
+      'hover-bg': rgba(0, 0, 0, 0.04),
+      'focus-bg': rgba(0, 0, 0, 0.04),
+      'active-bg': elVar('color-primary', 'light-9'),
+      'arrow-margin': 0 -4px 0 4px,
+      'line-size': 0,
+      'dark-hover-bg': rgba(255, 255, 255, 0.1),
+      'dark-focus-bg': rgba(255, 255, 255, 0.1),
+      'dark-active-bg': elVar('color-primary')
+    ),
+    'menu-dark': (
+      'hover-bg': rgba(255, 255, 255, 0.1),
+      'focus-bg': rgba(255, 255, 255, 0.1)
+    ),
+    'menu-colorful': (
+      'icon-radius': elVar('border-radius', 'base'),
+      'icon-size': 22px
+    ),
+    'modal': (
+      'radius': $radius-large,
+      'header-font-weight': bold,
+      'header-padding': 18px 20px 12px 20px,
+      'header-border': none,
+      'icon-hover-bg': elVar('fill-color', 'light'),
+      'body-padding': 16px 22px 24px 22px,
+      'form-body-padding': 16px 22px 8px 20px,
+      'footer-padding': 8px 20px 18px 20px,
+      'footer-border': none
+    ),
+    'pagination': (
+      'radius': elVar('border-radius', 'base'),
+      'active-color': elVar('color', 'primary'),
+      'active-bg': none,
+      'active-border': 1px solid elVar('color', 'primary'),
+      'active-font-weight': bold,
+      'sm-radius': elVar('border-radius', 'base'),
+      'lg-radius': $radius-large
+    ),
+    'segmented': (
+      'radius': elVar('border-radius', 'small')
+    ),
+    'segmented-large': (
+      'radius': elVar('border-radius', 'base')
+    ),
+    'step': (
+      'icon-color': elVar('text-color', 'secondary'),
+      'icon-bg': elVar('fill-color', 'light'),
+      'icon-border': none,
+      'active-icon-border': none,
+      'finish-icon-bg': elVar('color-primary', 'light-9'),
+      'finish-icon-border': none
+    ),
+    'tab': (
+      //
+      'close-size': 18px,
+      'close-radius': elVar('border-radius', 'small'),
+      'close-hover-color': elVar('text-color', 'primary'),
+      'close-hover-bg': hsla(0, 0%, 60%, 0.15),
+      'active-close-hover-color': elVar('text-color', 'primary'),
+      'active-close-hover-bg': hsla(0, 0%, 60%, 0.15),
+      'sm-close-size': 14px,
+      'lg-close-size': 20px,
+      'simple-radius': 10px 10px 0px 0px,
+      'simple-active-weight': bold,
+      'simple-active-line': 0px,
+      'simple-line-display': none,
+      'simple-angle-size': 12px,
+      'simple-angle-display': block,
+      'simple-tool-hover-bg': transparent,
+      'button-radius': $radius-large,
+      'button-active-shadow': 0 0 4px 2px rgba(0, 0, 0, 0.04),
+      'button-active-weight': bold
+    ),
+    'text': (
+      'heading-weight': bold
+    ),
+    'table': (
+      'radius': elVar('border-radius', 'base'),
+      'th-font-weight': bold,
+      'lg-radius': $radius-large,
+      'sm-radius': elVar('border-radius', 'small')
+    ),
+    'table-filter': (
+      'padding': 6px 4px,
+      'item-margin': 2px,
+      'item-padding': 0 12px,
+      'item-radius': elVar('border-radius', 'small')
+    ),
+    'tool-column': (
+      'body-padding': 6px 4px,
+      'item-padding': 10px,
+      'item-radius': elVar('border-radius', 'small'),
+      'btn-hover-bg': elVar('color-primary', 'light-8'),
+      'btn-active-bg': elVar('color-primary', 'light-7')
+    ),
+    'toolbar': (
+      'radius': $radius-large
+    ),
+    'tree-select': (
+      'padding': 6px 4px
+    ),
+    'upload-list': (
+      'file-tool-hover-color': elVar('text-color', 'primary'),
+      'file-tool-hover-bg': elVar('fill-color', 'light')
+    ),
+    'popper': (
+      'radius': $radius-large
+    ),
+    'popover': (
+      'title-padding': 13px 16px 0 16px,
+      'title-border': none
+    ),
+    'select': (
+      'padding': 6px 4px,
+      'item-margin': 2px,
+      'item-padding': 0 12px,
+      'item-radius': elVar('border-radius', 'small')
+    ),
+    'autocomplete': (
+      'padding': 6px 4px,
+      'item-margin': 2px,
+      'item-padding': 0 12px,
+      'item-radius': elVar('border-radius', 'small')
+    ),
+    'cascader': (
+      'menu-padding': 6px,
+      'item-margin': 2px,
+      'item-padding': 0 12px,
+      'item-radius': elVar('border-radius', 'small')
+    ),
+    'message-box': (
+      'radius': $radius-large,
+      'header-font-weight': bold,
+      'icon-hover-bg': elVar('fill-color', 'light')
+    ),
+    'notification': (
+      'radius': $radius-large,
+      'close-hover-bg': elVar('fill-color', 'light')
+    ),
+    'tag': (
+      'close-hover-bg': elVar('color-primary', 'light-8'),
+      'info-close-hover-bg': hsla(0, 0%, 60%, 0.25),
+      'success-close-hover-bg': elVar('color-success', 'light-8'),
+      'warning-close-hover-bg': elVar('color-warning', 'light-8'),
+      'danger-close-hover-bg': elVar('color-error', 'light-8'),
+      'dark-close-hover-bg': rgba(255, 255, 255, 0.2),
+      'dark-info-close-hover-bg': hsla(0, 0%, 60%, 0.25),
+      'dark-success-close-hover-bg': rgba(255, 255, 255, 0.2),
+      'dark-warning-close-hover-bg': rgba(255, 255, 255, 0.2),
+      'dark-danger-close-hover-bg': rgba(255, 255, 255, 0.2),
+      'plain-close-hover-bg': elVar('color-primary', 'light-8'),
+      'plain-info-close-hover-bg': hsla(0, 0%, 60%, 0.25),
+      'plain-success-close-hover-bg': elVar('color-success', 'light-8'),
+      'plain-warning-close-hover-bg': elVar('color-warning', 'light-8'),
+      'plain-danger-close-hover-bg': elVar('color-error', 'light-8')
+    ),
+    'tree': (
+      'item-margin': 2px,
+      'item-padding': 0 12px,
+      'item-radius': elVar('border-radius', 'small'),
+      'expand-hover-bg': hsla(0, 0%, 60%, 0.15)
+    ),
+    'descriptions': (
+      'radius': $radius-large
+    ),
+    'datepicker': (
+      'cell-radius': elVar('border-radius', 'small'),
+      'year-radius': elVar('border-radius', 'base'),
+      'sidebar-padding': 8px 6px,
+      'shortcut-height': 28px,
+      'shortcut-padding': 0 8px,
+      'shortcut-margin': 4px,
+      'shortcut-radius': elVar('border-radius', 'small')
+    ),
+    'timepicker': (
+      'item-radius': elVar('border-radius', 'small')
+    )
+  ),
+  $ele-rounded
+);

package/packages/style/themes/theme-util.scss

@@ -0,0 +1,86 @@
+@use '../../ele-admin-layout/style/css-var.scss' as *;
+@use '../../ele-alert/style/css-var.scss' as *;
+@use '../../ele-backtop/style/css-var.scss' as *;
+@use '../../ele-app/style/css-var.scss' as *;
+@use '../../ele-basic-select/style/css-var.scss' as *;
+@use '../../ele-bottom-bar/style/css-var.scss' as *;
+@use '../../ele-card/style/css-var.scss' as *;
+@use '../../ele-check-card/style/css-var.scss' as *;
+@use '../../ele-data-table/style/css-var.scss' as *;
+@use '../../ele-drawer/style/css-var.scss' as *;
+@use '../../ele-dropdown/style/css-var.scss' as *;
+@use '../../ele-file-list/style/css-var.scss' as *;
+@use '../../ele-icon-select/style/css-var.scss' as *;
+@use '../../ele-image-viewer/style/css-var.scss' as *;
+@use '../../ele-loading/style/css-var.scss' as *;
+@use '../../ele-map-picker/style/css-var.scss' as *;
+@use '../../ele-menus/style/css-var.scss' as *;
+@use '../../ele-modal/style/css-var.scss' as *;
+@use '../../ele-page/style/css-var.scss' as *;
+@use '../../ele-pagination/style/css-var.scss' as *;
+@use '../../ele-popconfirm/style/css-var.scss' as *;
+@use '../../ele-pro-form/style/css-var.scss' as *;
+@use '../../ele-pro-form-builder/style/css-var.scss' as *;
+@use '../../ele-pro-table/style/css-var.scss' as *;
+@use '../../ele-segmented/style/css-var.scss' as *;
+@use '../../ele-steps/style/css-var.scss' as *;
+@use '../../ele-tab-bar/style/css-var.scss' as *;
+@use '../../ele-table/style/css-var.scss' as *;
+@use '../../ele-table-select/style/css-var.scss' as *;
+@use '../../ele-tabs/style/css-var.scss' as *;
+@use '../../ele-text/style/css-var.scss' as *;
+@use '../../ele-timeline/style/css-var.scss' as *;
+@use '../../ele-tool/style/css-var.scss' as *;
+@use '../../ele-toolbar/style/css-var.scss' as *;
+@use '../../ele-tooltip/style/css-var.scss' as *;
+@use '../../ele-tree-select/style/css-var.scss' as *;
+@use '../../ele-tree-table/style/css-var.scss' as *;
+@use '../../ele-upload-list/style/css-var.scss' as *;
+@use '../../ele-viewer/style/css-var.scss' as *;
+@use '../../ele-virtual-table/style/css-var.scss' as *;
+
+/* 生成主题的 css 变量 */
+@mixin set-theme-var($selector, $var) {
+  #{$selector} {
+    @include set-layout-var($var);
+    @include set-alert-var($var);
+    @include set-backtop-var($var);
+    @include set-app-var($var);
+    @include set-basic-select-var($var);
+    @include set-bottom-bar-var($var);
+    @include set-card-var($var);
+    @include set-check-card-var($var);
+    @include set-data-table-var($var);
+    @include set-drawer-var($var);
+    @include set-dropdown-var($var);
+    @include set-file-var($var);
+    @include set-icon-var($var);
+    @include set-image-viewer-var($var);
+    @include set-loading-var($var);
+    @include set-map-var($var);
+    @include set-menus-var($var);
+    @include set-modal-var($var);
+    @include set-page-var($var);
+    @include set-pagination-var($var);
+    @include set-popconfirm-var($var);
+    @include set-pro-form-var($var);
+    @include set-pro-form-builder-var($var);
+    @include set-pro-table-var($var);
+    @include set-segmented-var($var);
+    @include set-step-var($var);
+    @include set-tab-bar-var($var);
+    @include set-table-var($var);
+    @include set-table-select-var($var);
+    @include set-tab-var($var);
+    @include set-text-var($var);
+    @include set-timeline-var($var);
+    @include set-tool-var($var);
+    @include set-toolbar-var($var);
+    @include set-tooltip-var($var);
+    @include set-tree-select-var($var);
+    @include set-tree-table-var($var);
+    @include set-upload-list-var($var);
+    @include set-viewer-var($var);
+    @include set-virtual-table-var($var);
+  }
+}

package/packages/style/themes/transparent-css-var.scss

@@ -0,0 +1,45 @@
+/** 透明主题 css 变量 */
+@use 'element-plus/theme-chalk/src/mixins/_var.scss' as el;
+@use './transparent.scss' as *;
+@use './theme-util.scss' as *;
+@use '../util.scss' as *;
+$transparent-selector: 'html.is-transparent' !default;
+
+@include set-theme-var($transparent-selector, $ele-transparent);
+
+#{$transparent-selector} {
+  @include set-ele-var('skin-bg', $ele-transparent);
+
+  & {
+    @include el.set-component-css-var(
+      'border-color',
+      (
+        '': hsla(0, 0%, 60%, 0.28),
+        'light': hsla(0, 0%, 60%, 0.24),
+        'lighter': hsla(0, 0%, 60%, 0.2),
+        'extra-light': hsla(0, 0%, 60%, 0.16)
+      )
+    );
+
+    @include el.set-component-css-var(
+      'fill-color',
+      (
+        '': hsla(0, 0%, 60%, 0.2),
+        'light': hsla(0, 0%, 60%, 0.1),
+        'lighter': hsla(0, 0%, 60%, 0.08),
+        'blank': $bg-transparent
+      )
+    );
+
+    @include el.set-component-css-var(
+      'bg-color',
+      (
+        'overlay': eleVar('skin-bg', 'overlay')
+      )
+    );
+  }
+
+  body {
+    background: eleVar('skin-bg', 'wallpaper');
+  }
+}

package/packages/style/themes/transparent.scss

@@ -0,0 +1,86 @@
+/** 透明主题 */
+@use 'sass:map';
+@use '../util.scss' as *;
+$bg-transparent: transparent !default;
+
+$ele-transparent: () !default;
+$ele-transparent: map.deep-merge(
+  (
+    'skin-bg': (
+      'wallpaper': $bg-transparent,
+      'header': hsla(0, 0%, 60%, 0.2),
+      'sidebar': hsla(0, 0%, 60%, 0.2),
+      'card': hsla(0, 0%, 60%, 0.2),
+      'overlay': hsla(0, 0%, 60%, 0.4),
+      'tooltip': hsla(0, 0%, 18%, 0.8)
+    ),
+    'layout': (
+      'bg': $bg-transparent
+    ),
+    'header': (
+      'bg': eleVar('skin-bg', 'header')
+    ),
+    'sidebar': (
+      'bg': eleVar('skin-bg', 'sidebar'),
+      'mobile-backdrop-filter': blur(18px)
+    ),
+    'card': (
+      'bg': eleVar('skin-bg', 'card')
+    ),
+    'table': (
+      'tr-bg': $bg-transparent,
+      'fixed-backdrop-filter': blur(18px)
+    ),
+    'table-select': (
+      'tr-bg': $bg-transparent
+    ),
+    'bottom-bar': (
+      'bg': eleVar('skin-bg', 'card')
+    ),
+    'scrollbar': (
+      'color': hsla(0, 0%, 68%, 0.4),
+      'hover-color': hsla(0, 0%, 68%, 0.68)
+    ),
+    'menu-thumb': (
+      'color': hsla(0, 0%, 68%, 0.4),
+      'hover-color': hsla(0, 0%, 68%, 0.68)
+    ),
+    'menu': (
+      'bg': $bg-transparent
+    ),
+    'segmented': (
+      'bg': elVar('fill-color', 'light')
+    ),
+    'tab': (
+      'bg': eleVar('skin-bg', 'card')
+    ),
+    'step': (
+      'bg': none,
+      'backdrop-filter': blur(3px)
+    ),
+    'backtop': (
+      'bg': eleVar('skin-bg', 'card')
+    ),
+    'viewer': (
+      'bg': radial-gradient(
+          #{elVar('text-color', 'placeholder')} 8%,
+          $bg-transparent 8%
+        )
+        center / 16px 16px repeat
+    ),
+    'pro-form-builder': (
+      'group-label-bg': none,
+      'group-label-backdrop-filter': blur(18px)
+    ),
+    'checkbox': (
+      'bg': $bg-transparent
+    ),
+    'radio': (
+      'bg': $bg-transparent
+    ),
+    'tooltip': (
+      'bg': eleVar('skin-bg', 'tooltip')
+    )
+  ),
+  $ele-transparent
+);

package/packages/style/util.scss

@@ -0,0 +1,70 @@
+@use 'element-plus/theme-chalk/src/mixins/function.scss' as el;
+@use 'sass:map';
+
+/* 生成 css 变量名 */
+@function eleJoinVar($list) {
+  $name: '--ele';
+  @each $item in $list {
+    @if $item != '' {
+      $name: $name + '-' + $item;
+    }
+  }
+  @return $name;
+}
+
+/* 获取 css 变量值 */
+@function eleVar($arg1, $arg2: '', $arg3: '') {
+  $args: $arg1, $arg2;
+  @if $arg3 != '' {
+    @return var(#{eleJoinVar($args)}, $arg3);
+  } @else {
+    @return var(#{eleJoinVar($args)});
+  }
+}
+
+/* 获取 css 变量名 */
+@function eleVarName($args...) {
+  @return eleJoinVar($args);
+}
+
+/* 生成 css 变量 */
+@mixin set-ele-var-value($name, $attribute, $value) {
+  #{eleVarName($name, $attribute)}: #{$value};
+}
+
+/* 生成组件 css 变量 */
+@mixin set-ele-var($name, $variables) {
+  & {
+    @if map.has-key($variables, $name) {
+      @each $attribute, $value in map.get($variables, $name) {
+        @include set-ele-var-value($name, $attribute, $value);
+      }
+    }
+  }
+}
+
+/* 获取 element 的 css 变量值 */
+@function elVar($args...) {
+  @return el.getCssVar($args...);
+}
+
+/* 获取 element 的 css 变量值带默认值 */
+@function elVarDefault($args, $default) {
+  @return el.getCssVarWithDefault($args, $default);
+}
+
+/* 获取 element 的 css 变量名 */
+@function elVarName($args...) {
+  @return el.getCssVarName($args...);
+}
+
+/* 生成 not 选择器 */
+@function joinNotSelectors($list) {
+  $selector: '';
+  @each $item in $list {
+    @if $item != '' {
+      $selector: $selector + ':not(' + $item + ')';
+    }
+  }
+  @return $selector;
+}