@sdata/web-vue 1.5.0 → 1.7.0

package/es/calendar/style/{index.less → index.scss}

@@ -1,14 +1,17 @@
-@import url('./token.less');
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use '@components/calendar/style/token.scss' as *;
 
-@calendar-prefix-cls: ~'@{prefix}-calendar';
+$calendar-prefix-cls: string.unquote('#{theme.$prefix}-calendar');
 
-.@{calendar-prefix-cls} {
+.#{$calendar-prefix-cls} {
   box-sizing: border-box;
-  border: 1px solid @calendar-color-border;
+  border: 1px solid $calendar-color-border;
 
   &-header {
     display: flex;
-    padding: @calendar-header-padding-vertical @calendar-header-padding-horizontal;
+    padding: $calendar-header-padding-vertical $calendar-header-padding-horizontal;
 
     &-left {
       position: relative;
@@ -25,8 +28,8 @@
     }
 
     &-value {
-      color: var(~'@{sd-cssvars-prefix}-color-text-1');
-      font-weight: @font-weight-500;
+      color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-text-1'));
+      font-weight: global.$font-weight-500;
       font-size: 20px;
     }
 
@@ -34,13 +37,13 @@
       width: 28px;
       height: 28px;
       margin-right: 12px;
-      color: @calendar-color-switch-icon;
+      color: $calendar-color-switch-icon;
       font-size: 12px;
       line-height: 28px;
       text-align: center;
-      background-color: @calendar-color-bg-switch-icon;
+      background-color: $calendar-color-bg-switch-icon;
       border-radius: 50%;
-      transition: all @transition-duration-1 @transition-timing-function-linear;
+      transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
       user-select: none;
 
       &:not(:first-child) {
@@ -48,15 +51,15 @@
       }
 
       &:focus-visible {
-        box-shadow: 0 0 0 2px @calendar-color-box-shadow;
+        box-shadow: 0 0 0 2px $calendar-color-box-shadow;
       }
     }
 
-    &-icon:not(&-icon-hidden) {
+    &-icon:not(#{&}-icon-hidden) {
       cursor: pointer;
 
       &:hover {
-        background-color: @calendar-color-bg-switch-icon_hover;
+        background-color: $calendar-color-bg-switch-icon_hover;
       }
     }
   }
@@ -80,13 +83,13 @@
       display: flex;
       height: 100px;
 
-      .@{calendar-prefix-cls}-cell {
+      .#{$calendar-prefix-cls}-cell {
         flex: 1;
         overflow: hidden;
-        border-bottom: 1px solid @calendar-color-border;
+        border-bottom: 1px solid $calendar-color-border;
       }
 
-      &:last-child .@{calendar-prefix-cls}-cell {
+      &:last-child .#{$calendar-prefix-cls}-cell {
         border-bottom: unset;
       }
     }
@@ -96,8 +99,8 @@
     }
   }
 
-  &-mode-month:not(&-panel) &-cell:not(:last-child) {
-    border-right: 1px solid @calendar-color-border;
+  &-mode-month:not(#{&}-panel) &-cell:not(:last-child) {
+    border-right: 1px solid $calendar-color-border;
   }
 
   &-week-list {
@@ -105,7 +108,7 @@
     box-sizing: border-box;
     width: 100%;
     padding: 0;
-    border-bottom: 1px solid @calendar-color-border;
+    border-bottom: 1px solid $calendar-color-border;
 
     &-item {
       flex: 1;
@@ -139,40 +142,40 @@
 
   &-cell-today &-date-circle {
     box-sizing: border-box;
-    border: 1px solid @color-primary-6;
+    border: 1px solid global.$color-primary-6;
   }
 
   &-date-value {
-    color: @calendar-color-cell-text-not-in-view;
-    font-weight: @font-weight-500;
+    color: $calendar-color-cell-text-not-in-view;
+    font-weight: global.$font-weight-500;
     font-size: 16px;
   }
 
   &-cell-in-view &-date-value {
-    color: @calendar-color-cell-text-in-view;
+    color: $calendar-color-cell-text-in-view;
   }
 
   &-mode-month &-cell-selected &-date-circle {
     box-sizing: border-box;
     color: #fff;
-    background-color: @calendar-color-bg-circle_selected;
-    border: 1px solid @calendar-color-bg-circle_selected;
+    background-color: $calendar-color-bg-circle_selected;
+    border: 1px solid $calendar-color-bg-circle_selected;
   }
 
   &-mode-year &-cell-selected &-cell-selected &-date-circle {
     box-sizing: border-box;
     color: #fff;
-    background-color: @calendar-color-bg-circle_selected;
-    border: 1px solid @calendar-color-bg-circle_selected;
+    background-color: $calendar-color-bg-circle_selected;
+    border: 1px solid $calendar-color-bg-circle_selected;
   }
 
   // Mode: year
-  &-mode-year:not(&-panel) {
+  &-mode-year:not(#{&}-panel) {
     min-width: 820px;
   }
 
   &-mode-year &-header {
-    border-bottom: 1px solid @calendar-color-border;
+    border-bottom: 1px solid $calendar-color-border;
   }
 
   &-mode-year &-body {
@@ -188,12 +191,12 @@
     padding: 20px 8px;
 
     &:not(:last-child) {
-      border-right: 1px solid @calendar-color-border;
+      border-right: 1px solid $calendar-color-border;
     }
   }
 
   &-year-row:not(:last-child) > &-cell {
-    border-bottom: 1px solid @calendar-color-border;
+    border-bottom: 1px solid $calendar-color-border;
   }
 
   &-month-with-days &-month-row {
@@ -210,8 +213,8 @@
 
   &-month-with-days &-month-title {
     padding: 10px 6px;
-    color: @calendar-color-text-title;
-    font-weight: @font-weight-500;
+    color: $calendar-color-text-title;
+    font-weight: global.$font-weight-500;
     font-size: 16px;
   }
 
@@ -254,15 +257,15 @@
 }
 
 // panel
-.@{calendar-prefix-cls} {
+.#{$calendar-prefix-cls} {
   &-panel {
-    background-color: var(~'@{sd-cssvars-prefix}-color-bg-5');
-    border: 1px solid @calendar-color-border;
+    background-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-5'));
+    border: 1px solid $calendar-color-border;
   }
 
   &-panel &-header {
     padding: 8px 16px;
-    border-bottom: 1px solid @calendar-color-border;
+    border-bottom: 1px solid $calendar-color-border;
 
     &-value {
       flex: 1;
@@ -317,23 +320,23 @@
   &-panel &-cell &-date {
     display: flex;
     justify-content: center;
-    padding: @calendar-panel-date-cell-padding-vertical 0;
+    padding: $calendar-panel-date-cell-padding-vertical 0;
 
     &-value {
-      min-width: @calendar-panel-date-cell-circle-height;
-      height: @calendar-panel-date-cell-circle-height;
+      min-width: $calendar-panel-date-cell-circle-height;
+      height: $calendar-panel-date-cell-circle-height;
       font-size: 14px;
-      line-height: @calendar-panel-date-cell-circle-height;
+      line-height: $calendar-panel-date-cell-circle-height;
       cursor: pointer;
     }
   }
 
-  &-panel&-mode-year &-cell {
+  &-panel#{&}-mode-year &-cell {
     padding: 4px 0;
   }
 
-  &-panel&-mode-year &-cell &-date {
-    padding: @calendar-panel-year-cell-padding-vertical;
+  &-panel#{&}-mode-year &-cell &-date {
+    padding: $calendar-panel-year-cell-padding-vertical;
 
     &-value {
       width: 100%;
@@ -342,8 +345,8 @@
   }
 
   &-panel &-cell-selected &-date-value {
-    color: @calendar-panel-color-text-cell_selected;
-    background-color: @calendar-panel-color-bg-cell_selected;
+    color: $calendar-panel-color-text-cell_selected;
+    background-color: $calendar-panel-color-bg-cell_selected;
     border-radius: 50%;
   }
 
@@ -358,12 +361,12 @@
       &-cell-week
     )
     &-date-value:hover {
-    color: @calendar-panel-color-text-cell_hover;
-    background-color: @calendar-panel-color-bg-cell_hover;
+    color: $calendar-panel-color-text-cell_hover;
+    background-color: $calendar-panel-color-bg-cell_hover;
     border-radius: 50%;
   }
 
-  &-panel&-mode-year
+  &-panel#{&}-mode-year
     &-cell:not(
       &-cell-selected,
       &-cell-range-start,
@@ -373,7 +376,7 @@
       &-cell-disabled
     )
     &-date-value:hover {
-    border-radius: (@calendar-panel-year-cell-circle-height / 2);
+    border-radius: ($calendar-panel-year-cell-circle-height * 0.5);
   }
 
   &-panel &-cell-today {
@@ -387,24 +390,24 @@
       width: 4px;
       height: 4px;
       margin-left: -2px;
-      background-color: @calendar-panel-color-current-time-dot;
+      background-color: $calendar-panel-color-current-time-dot;
       border-radius: 50%;
       content: '';
     }
   }
 
   &-cell-in-range &-date {
-    background-color: @calendar-color-bg-cell-in-range;
+    background-color: $calendar-color-bg-cell-in-range;
   }
 
   &-cell-range-start &-date {
-    border-radius: @calendar-panel-cell-boundary-border-radius 0 0
-      @calendar-panel-cell-boundary-border-radius;
+    border-radius: $calendar-panel-cell-boundary-border-radius 0 0
+      $calendar-panel-cell-boundary-border-radius;
   }
 
   &-cell-range-end &-date {
-    border-radius: 0 @calendar-panel-cell-boundary-border-radius
-      @calendar-panel-cell-boundary-border-radius 0;
+    border-radius: 0 $calendar-panel-cell-boundary-border-radius
+      $calendar-panel-cell-boundary-border-radius 0;
   }
 
   &-cell-in-range-near-hover &-date {
@@ -413,40 +416,40 @@
 
   &-cell-range-start &-date-value,
   &-cell-range-end &-date-value {
-    color: @calendar-color-text-cell-range-boundary;
-    background-color: @calendar-color-bg-cell-range-boundary;
+    color: $calendar-color-text-cell-range-boundary;
+    background-color: $calendar-color-bg-cell-range-boundary;
     border-radius: 50%;
   }
 
   &-cell-hover-in-range &-date {
-    background-color: @calendar-color-bg-cell-hover-in-range;
+    background-color: $calendar-color-bg-cell-hover-in-range;
   }
 
   &-cell-hover-range-start &-date {
-    border-radius: @calendar-panel-cell-boundary-border-radius 0 0
-      @calendar-panel-cell-boundary-border-radius;
+    border-radius: $calendar-panel-cell-boundary-border-radius 0 0
+      $calendar-panel-cell-boundary-border-radius;
   }
 
   &-cell-hover-range-end &-date {
-    border-radius: 0 @calendar-panel-cell-boundary-border-radius
-      @calendar-panel-cell-boundary-border-radius 0;
+    border-radius: 0 $calendar-panel-cell-boundary-border-radius
+      $calendar-panel-cell-boundary-border-radius 0;
   }
 
   &-cell-hover-range-start &-date-value,
   &-cell-hover-range-end &-date-value {
-    color: @calendar-color-text-cell-hover-range-boundary;
-    background-color: @calendar-color-bg-cell-hover-range-boundary;
+    color: $calendar-color-text-cell-hover-range-boundary;
+    background-color: $calendar-color-bg-cell-hover-range-boundary;
     border-radius: 50%;
   }
 
   &-panel &-cell-disabled {
-    > .@{calendar-prefix-cls}-date {
-      background-color: @calendar-color-bg-cell-disabled;
+    > .#{$calendar-prefix-cls}-date {
+      background-color: $calendar-color-bg-cell-disabled;
       cursor: not-allowed;
 
-      > .@{calendar-prefix-cls}-date-value {
-        color: @calendar-color-cell-text-not-in-view;
-        background-color: @calendar-color-bg-cell-disabled;
+      > .#{$calendar-prefix-cls}-date-value {
+        color: $calendar-color-cell-text-not-in-view;
+        background-color: $calendar-color-bg-cell-disabled;
         cursor: not-allowed;
       }
     }
@@ -454,10 +457,10 @@
 
   &-panel &-footer-btn-wrapper {
     height: 38px;
-    color: var(~'@{sd-cssvars-prefix}-color-text-1');
+    color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-text-1'));
     line-height: 38px;
     text-align: center;
-    border-top: 1px solid @calendar-color-border;
+    border-top: 1px solid $calendar-color-border;
     cursor: pointer;
   }
 
@@ -476,9 +479,9 @@
     text-align: right;
   }
 
-  &-rtl&-mode-month:not(&-panel) &-cell:not(:last-child) {
+  &-rtl#{&}-mode-month:not(#{&}-panel) &-cell:not(:last-child) {
     border-right: 0;
-    border-left: 1px solid @calendar-color-border;
+    border-left: 1px solid $calendar-color-border;
   }
 
   &-rtl &-header-value-year {

package/es/calendar/style/token.scss

@@ -0,0 +1,65 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
+
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+$calendar-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$calendar-header-padding-horizontal: 24px;
+$calendar-header-padding-vertical: 24px;
+
+$calendar-panel-date-cell-padding-vertical: 4px;
+$calendar-panel-date-cell-circle-height: 24px;
+$calendar-panel-year-cell-padding-vertical: 4px;
+$calendar-panel-year-cell-circle-height: 24px;
+
+$calendar-color-switch-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$calendar-color-bg-switch-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-5'));
+$calendar-color-bg-switch-icon_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3')
+);
+
+$calendar-color-text-title: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$calendar-color-cell-text-in-view: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$calendar-color-cell-text-not-in-view: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
+);
+$calendar-color-bg-circle_selected: global.$color-primary-6;
+$calendar-color-bg-cell-in-range: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-1')
+);
+$calendar-color-bg-cell-disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-1'));
+$calendar-color-text-cell-range-boundary: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
+);
+$calendar-color-bg-cell-range-boundary: global.$color-primary-6;
+$calendar-color-bg-cell-hover-in-range: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-1')
+);
+$calendar-color-text-cell-hover-range-boundary: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+$calendar-color-bg-cell-hover-range-boundary: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-2')
+);
+
+$calendar-panel-color-text-cell_hover: global.$color-primary-6;
+$calendar-panel-color-bg-cell_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-1')
+);
+$calendar-panel-color-text-cell_selected: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
+);
+$calendar-panel-color-bg-cell_selected: global.$color-primary-6;
+$calendar-panel-color-current-time-dot: global.$color-primary-6;
+
+// 不放到风格配置平台
+$calendar-panel-cell-boundary-border-radius: (
+  ($calendar-panel-date-cell-circle-height + $calendar-panel-date-cell-padding-vertical * 2) * 0.5
+);
+$calendar-color-box-shadow: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-3')
+);

package/es/card/style/index.css

@@ -32,7 +32,7 @@
 }
 .sd-card-header-no-title::before {
   display: block;
-  content: ' ';
+  content: " ";
 }
 .sd-card-header-title {
   flex: 1;
@@ -67,7 +67,7 @@
 }
 .sd-card-actions::before {
   visibility: hidden;
-  content: '';
+  content: "";
 }
 .sd-card-actions-right {
   display: flex;
@@ -100,7 +100,7 @@
 }
 .sd-card-meta-footer-only-actions::before {
   visibility: hidden;
-  content: '';
+  content: "";
 }
 .sd-card-meta-footer .sd-card-actions {
   margin-top: 0;
@@ -125,7 +125,7 @@
   position: absolute;
   inset: 0;
   transition: box-shadow 0.2s cubic-bezier(0, 0, 1, 1);
-  content: '';
+  content: "";
   pointer-events: none;
 }
 .sd-card-grid-hoverable:hover {
@@ -192,7 +192,8 @@
 .sd-card-size-small .sd-card-body {
   padding: 12px 16px;
 }
-body[sd-theme='dark'] .sd-card-grid-hoverable:hover::before,
-body[sd-theme='dark'] .sd-card-hoverable:hover {
-  box-shadow: 0 4px 10px rgba(var(--gray-1), 40%);
-}
+
+:where(body, [sd-theme])[sd-theme=dark] .sd-card-grid-hoverable:hover::before,
+:where(body, [sd-theme])[sd-theme=dark] .sd-card-hoverable:hover {
+  box-shadow: 0 4px 10px rgb(var(--gray-1), 40%);
+}

package/es/card/style/index.d.ts

@@ -1,3 +1,3 @@
-import '../../style/index.less';
+import '../../style/index.scss';
 import '../../spin/style';
-import './index.less';
+import './index.scss';

package/es/card/style/index.js

@@ -1,2 +1,2 @@
-import "../../style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "./index.scss";