@sdata/web-vue 1.6.0 → 1.7.0

package/es/style/theme/global.less

@@ -1,382 +0,0 @@
-@import url('../color/colors.less');
-
-@sd-theme-tag: body; // css 变量定义的选择器
-
-@sd-vars-prefix: ~''; // css 变量的前缀
-
-// --sd-color-white or --color-white
-@sd-cssvars-prefix: if(@sd-vars-prefix = ~'', -, ~'--@{sd-vars-prefix}');
-
-/******** borderSize *******/
-
-@border-none: 0;
-@border-1: 1px;
-@border-2: 2px;
-@border-3: 3px;
-@border-4: 4px;
-@border-5: 5px;
-
-/******** borderStyle *******/
-
-@border-solid: solid;
-@border-dashed: dashed;
-@border-dotted: dotted;
-
-/******** radius *******/
-
-@border-radius-none: 0;
-@border-radius-small: 2px;
-@border-radius-medium: 4px;
-@border-radius-large: 8px;
-@border-radius-circle: 50%;
-
-/******** shadow distance *******/
-
-@shadow-distance-none: 0;
-@shadow-distance-1: 1px;
-@shadow-distance-2: 2px;
-@shadow-distance-3: 3px;
-@shadow-distance-4: 4px;
-
-/******** size *******/
-
-@size-none: 0;
-@size-1: 4px;
-@size-2: 8px;
-@size-3: 12px;
-@size-4: 16px;
-@size-5: 20px;
-@size-6: 24px;
-@size-7: 28px;
-@size-8: 32px;
-@size-9: 36px;
-@size-10: 40px;
-@size-11: 44px;
-@size-12: 48px;
-@size-13: 52px;
-@size-14: 56px;
-@size-15: 60px;
-@size-16: 64px;
-@size-17: 68px;
-@size-18: 72px;
-@size-19: 76px;
-@size-20: 80px;
-@size-21: 84px;
-@size-22: 88px;
-@size-23: 92px;
-@size-24: 96px;
-@size-25: 100px;
-@size-26: 104px;
-@size-27: 108px;
-@size-28: 112px;
-@size-29: 116px;
-@size-30: 120px;
-@size-31: 124px;
-@size-32: 128px;
-@size-33: 132px;
-@size-34: 136px;
-@size-35: 140px;
-@size-36: 144px;
-@size-37: 148px;
-@size-38: 152px;
-@size-39: 156px;
-@size-40: 160px;
-@size-41: 164px;
-@size-42: 168px;
-@size-43: 172px;
-@size-44: 176px;
-@size-45: 180px;
-@size-46: 184px;
-@size-47: 188px;
-@size-48: 192px;
-@size-49: 196px;
-@size-50: 200px;
-
-@size-mini: @size-6;
-@size-small: @size-7;
-@size-default: @size-8;
-@size-large: @size-9;
-
-/******** spacing *******/
-
-@spacing-none: 0;
-@spacing-1: 2px;
-@spacing-2: 4px;
-@spacing-3: 6px;
-@spacing-4: 8px;
-@spacing-5: 10px;
-@spacing-6: 12px;
-@spacing-7: 16px;
-@spacing-8: 20px;
-@spacing-9: 24px;
-@spacing-10: 32px;
-@spacing-11: 36px;
-@spacing-12: 40px;
-@spacing-13: 48px;
-@spacing-14: 56px;
-@spacing-15: 60px;
-@spacing-16: 64px;
-@spacing-17: 72px;
-@spacing-18: 80px;
-@spacing-19: 84px;
-@spacing-20: 96px;
-@spacing-21: 100px;
-@spacing-22: 120px;
-
-@color-transparent: transparent;
-
-/******** shadow *******/
-
-@shadow-none: none;
-@shadow-special: 0 0 1px rgba(0, 0, 0, 0.3);
-@shadow1-center: 0 0 5px rgba(0, 0, 0, 0.1);
-@shadow1-up: 0 -2px 5px rgba(0, 0, 0, 0.1);
-@shadow1-down: 0 2px 5px rgba(0, 0, 0, 0.1);
-@shadow1-left: -2px 0 5px rgba(0, 0, 0, 0.1);
-@shadow1-right: 2px 0 5px rgba(0, 0, 0, 0.1);
-@shadow1-left-up: -2px -2px 5px rgba(0, 0, 0, 0.1);
-@shadow1-left-down: -2px 2px 5px rgba(0, 0, 0, 0.1);
-@shadow1-right-up: 2px -2px 5px rgba(0, 0, 0, 0.1);
-@shadow1-right-down: 2px 2px 5px rgba(0, 0, 0, 0.1);
-@shadow2-center: 0 0 10px rgba(0, 0, 0, 0.1);
-@shadow2-up: 0 -4px 10px rgba(0, 0, 0, 0.1);
-@shadow2-down: 0 4px 10px rgba(0, 0, 0, 0.1);
-@shadow2-left: -4px 0 10px rgba(0, 0, 0, 0.1);
-@shadow2-right: 4px 0 10px rgba(0, 0, 0, 0.1);
-@shadow2-left-up: -4px -4px 10px rgba(0, 0, 0, 0.1);
-@shadow2-left-down: -4px 4px 10px rgba(0, 0, 0, 0.1);
-@shadow2-right-up: 4px -4px 10px rgba(0, 0, 0, 0.1);
-@shadow2-right-down: 4px 4px 10px rgba(0, 0, 0, 0.1);
-@shadow3-center: 0 0 20px rgba(0, 0, 0, 0.1);
-@shadow3-up: 0 -8px 20px rgba(0, 0, 0, 0.1);
-@shadow3-down: 0 8px 20px rgba(0, 0, 0, 0.1);
-@shadow3-left: -8px 0 20px rgba(0, 0, 0, 0.1);
-@shadow3-right: 8px 0 20px rgba(0, 0, 0, 0.1);
-@shadow3-left-up: -8px -8px 20px rgba(0, 0, 0, 0.1);
-@shadow3-left-down: -8px 8px 20px rgba(0, 0, 0, 0.1);
-@shadow3-right-up: 8px -8px 20px rgba(0, 0, 0, 0.1);
-@shadow3-right-down: 8px 8px 20px rgba(0, 0, 0, 0.1);
-
-/******** opacity *******/
-
-@opacity-none: 0;
-@opacity-1: 10%;
-@opacity-2: 20%;
-@opacity-3: 30%;
-@opacity-4: 40%;
-@opacity-5: 50%;
-@opacity-6: 60%;
-@opacity-7: 70%;
-@opacity-8: 80%;
-@opacity-9: 90%;
-@opacity-10: 100%;
-
-/******** fontSize *******/
-
-@font-size-display-3: 56px;
-@font-size-display-2: 48px;
-@font-size-display-1: 36px;
-@font-size-title-3: 24px;
-@font-size-title-2: 20px;
-@font-size-title-1: 16px;
-@font-size-body-3: 14px;
-@font-size-body-2: 13px;
-@font-size-body-1: 12px;
-@font-size-caption: 12px;
-
-/******** fontWeight ********/
-@font-weight-100: 100;
-@font-weight-200: 200;
-@font-weight-300: 300;
-@font-weight-400: 400;
-@font-weight-500: 500;
-@font-weight-600: 600;
-@font-weight-700: 700;
-@font-weight-800: 800;
-@font-weight-900: 900;
-
-/******** Primary *******/
-
-@color-primary-1: rgb(var(~'@{sd-cssvars-prefix}-primary-1'));
-@color-primary-2: rgb(var(~'@{sd-cssvars-prefix}-primary-2'));
-@color-primary-3: rgb(var(~'@{sd-cssvars-prefix}-primary-3'));
-@color-primary-4: rgb(var(~'@{sd-cssvars-prefix}-primary-4'));
-@color-primary-5: rgb(var(~'@{sd-cssvars-prefix}-primary-5'));
-@color-primary-6: rgb(var(~'@{sd-cssvars-prefix}-primary-6'));
-@color-primary-7: rgb(var(~'@{sd-cssvars-prefix}-primary-7'));
-@color-primary-8: rgb(var(~'@{sd-cssvars-prefix}-primary-8'));
-@color-primary-9: rgb(var(~'@{sd-cssvars-prefix}-primary-9'));
-@color-primary-10: rgb(var(~'@{sd-cssvars-prefix}-primary-10'));
-
-/******** success *******/
-
-@color-success-1: rgb(var(~'@{sd-cssvars-prefix}-success-1'));
-@color-success-2: rgb(var(~'@{sd-cssvars-prefix}-success-2'));
-@color-success-3: rgb(var(~'@{sd-cssvars-prefix}-success-3'));
-@color-success-4: rgb(var(~'@{sd-cssvars-prefix}-success-4'));
-@color-success-5: rgb(var(~'@{sd-cssvars-prefix}-success-5'));
-@color-success-6: rgb(var(~'@{sd-cssvars-prefix}-success-6'));
-@color-success-7: rgb(var(~'@{sd-cssvars-prefix}-success-7'));
-@color-success-8: rgb(var(~'@{sd-cssvars-prefix}-success-8'));
-@color-success-9: rgb(var(~'@{sd-cssvars-prefix}-success-9'));
-@color-success-10: rgb(var(~'@{sd-cssvars-prefix}-success-10'));
-
-/******** warning *******/
-
-@color-warning-1: rgb(var(~'@{sd-cssvars-prefix}-warning-1'));
-@color-warning-2: rgb(var(~'@{sd-cssvars-prefix}-warning-2'));
-@color-warning-3: rgb(var(~'@{sd-cssvars-prefix}-warning-3'));
-@color-warning-4: rgb(var(~'@{sd-cssvars-prefix}-warning-4'));
-@color-warning-5: rgb(var(~'@{sd-cssvars-prefix}-warning-5'));
-@color-warning-6: rgb(var(~'@{sd-cssvars-prefix}-warning-6'));
-@color-warning-7: rgb(var(~'@{sd-cssvars-prefix}-warning-7'));
-@color-warning-8: rgb(var(~'@{sd-cssvars-prefix}-warning-8'));
-@color-warning-9: rgb(var(~'@{sd-cssvars-prefix}-warning-9'));
-@color-warning-10: rgb(var(~'@{sd-cssvars-prefix}-warning-10'));
-
-/******** danger *******/
-
-@color-danger-1: rgb(var(~'@{sd-cssvars-prefix}-danger-1'));
-@color-danger-2: rgb(var(~'@{sd-cssvars-prefix}-danger-2'));
-@color-danger-3: rgb(var(~'@{sd-cssvars-prefix}-danger-3'));
-@color-danger-4: rgb(var(~'@{sd-cssvars-prefix}-danger-4'));
-@color-danger-5: rgb(var(~'@{sd-cssvars-prefix}-danger-5'));
-@color-danger-6: rgb(var(~'@{sd-cssvars-prefix}-danger-6'));
-@color-danger-7: rgb(var(~'@{sd-cssvars-prefix}-danger-7'));
-@color-danger-8: rgb(var(~'@{sd-cssvars-prefix}-danger-8'));
-@color-danger-9: rgb(var(~'@{sd-cssvars-prefix}-danger-9'));
-@color-danger-10: rgb(var(~'@{sd-cssvars-prefix}-danger-10'));
-
-/******** link *******/
-
-@color-link-1: rgb(var(~'@{sd-cssvars-prefix}-link-1'));
-@color-link-2: rgb(var(~'@{sd-cssvars-prefix}-link-2'));
-@color-link-3: rgb(var(~'@{sd-cssvars-prefix}-link-3'));
-@color-link-4: rgb(var(~'@{sd-cssvars-prefix}-link-4'));
-@color-link-5: rgb(var(~'@{sd-cssvars-prefix}-link-5'));
-@color-link-6: rgb(var(~'@{sd-cssvars-prefix}-link-6'));
-@color-link-7: rgb(var(~'@{sd-cssvars-prefix}-link-7'));
-@color-link-8: rgb(var(~'@{sd-cssvars-prefix}-link-8'));
-@color-link-9: rgb(var(~'@{sd-cssvars-prefix}-link-9'));
-@color-link-10: rgb(var(~'@{sd-cssvars-prefix}-link-10'));
-
-/******** radius *******/
-
-@radius-none: var(~'@{sd-cssvars-prefix}-border-radius-none');
-@radius-small: var(~'@{sd-cssvars-prefix}-border-radius-small');
-@radius-medium: var(~'@{sd-cssvars-prefix}-border-radius-medium');
-@radius-large: var(~'@{sd-cssvars-prefix}-border-radius-large');
-@radius-circle: var(~'@{sd-cssvars-prefix}-border-radius-circle');
-
-// Other
-@color-white: #ffffff;
-@dark-color-white: fade(#fff, 90%); // 在亮色模式下所有白色文字对应。对应 @color-white;
-
-@color-black: #000000;
-@dark-color-black: #000000;
-
-@mask-bg-opacity: @opacity-6;
-@mask-color-bg: rgba(@gray-10, @mask-bg-opacity);
-
-@dark-mask-color-bg: rgba(@dark-gray-1, @mask-bg-opacity);
-
-// 暗黑主题的导航组件背景色，需要在主题商店可配置
-@color-menu-dark-bg: #232324;
-@color-menu-light-bg: #ffffff;
-@color-spin-layer-bg: rgba(255, 255, 255, 0.6);
-@color-menu-dark-hover: fade(#fff, 4%);
-@color-tooltip-bg: rgb(var(~'@{sd-cssvars-prefix}-gray-10'));
-
-// component
-@dark-color-tooltip-bg: #373739;
-@dark-color-spin-layer-bg: rgba(51, 51, 51, 0.6);
-@dark-color-menu-dark-hover: var(~'@{sd-cssvars-prefix}-color-fill-2');
-
-// variables
-@color-border: rgb(var(~'@{sd-cssvars-prefix}-gray-3'));
-@color-bg-popup: var(~'@{sd-cssvars-prefix}-color-bg-5');
-@color-bg-1: #fff;
-@color-bg-2: #fff;
-@color-bg-3: #fff;
-@color-bg-4: #fff;
-@color-bg-5: #fff;
-@color-bg-white: #fff;
-@color-text-1: var(~'@{sd-cssvars-prefix}-color-neutral-10'); // Title, body
-@color-text-2: var(~'@{sd-cssvars-prefix}-color-neutral-8'); // Statement
-@color-text-3: var(~'@{sd-cssvars-prefix}-color-neutral-6'); // Secondary information
-@color-text-4: var(~'@{sd-cssvars-prefix}-color-neutral-4'); // Secondary information
-@color-fill-1: var(~'@{sd-cssvars-prefix}-color-neutral-1');
-@color-fill-2: var(~'@{sd-cssvars-prefix}-color-neutral-2');
-@color-fill-3: var(~'@{sd-cssvars-prefix}-color-neutral-3');
-@color-fill-4: var(~'@{sd-cssvars-prefix}-color-neutral-4');
-@color-border-1: var(~'@{sd-cssvars-prefix}-color-neutral-2');
-@color-border-2: var(~'@{sd-cssvars-prefix}-color-neutral-3');
-@color-border-3: var(~'@{sd-cssvars-prefix}-color-neutral-4');
-@color-border-4: var(~'@{sd-cssvars-prefix}-color-neutral-6');
-@color-primary-light-1: rgb(var(~'@{sd-cssvars-prefix}-primary-1'));
-@color-primary-light-2: rgb(var(~'@{sd-cssvars-prefix}-primary-2'));
-@color-primary-light-3: rgb(var(~'@{sd-cssvars-prefix}-primary-3'));
-@color-primary-light-4: rgb(var(~'@{sd-cssvars-prefix}-primary-4'));
-@color-secondary: var(~'@{sd-cssvars-prefix}-color-neutral-2');
-@color-secondary-hover: var(~'@{sd-cssvars-prefix}-color-neutral-3');
-@color-secondary-active: var(~'@{sd-cssvars-prefix}-color-neutral-4');
-@color-secondary-disabled: var(~'@{sd-cssvars-prefix}-color-neutral-1');
-@color-danger-light-1: rgb(var(~'@{sd-cssvars-prefix}-danger-1'));
-@color-danger-light-2: rgb(var(~'@{sd-cssvars-prefix}-danger-2'));
-@color-danger-light-3: rgb(var(~'@{sd-cssvars-prefix}-danger-3'));
-@color-danger-light-4: rgb(var(~'@{sd-cssvars-prefix}-danger-4'));
-@color-success-light-1: rgb(var(~'@{sd-cssvars-prefix}-success-1'));
-@color-success-light-2: rgb(var(~'@{sd-cssvars-prefix}-success-2'));
-@color-success-light-3: rgb(var(~'@{sd-cssvars-prefix}-success-3'));
-@color-success-light-4: rgb(var(~'@{sd-cssvars-prefix}-success-4'));
-@color-warning-light-1: rgb(var(~'@{sd-cssvars-prefix}-warning-1'));
-@color-warning-light-2: rgb(var(~'@{sd-cssvars-prefix}-warning-2'));
-@color-warning-light-3: rgb(var(~'@{sd-cssvars-prefix}-warning-3'));
-@color-warning-light-4: rgb(var(~'@{sd-cssvars-prefix}-warning-4'));
-@color-link-light-1: rgb(var(~'@{sd-cssvars-prefix}-link-1'));
-@color-link-light-2: rgb(var(~'@{sd-cssvars-prefix}-link-2'));
-@color-link-light-3: rgb(var(~'@{sd-cssvars-prefix}-link-3'));
-@color-link-light-4: rgb(var(~'@{sd-cssvars-prefix}-link-4'));
-
-@dark-color-border: #333335;
-@dark-color-bg-1: #17171a; // The overall background is @dark-gray-1
-@dark-color-bg-2: #232324; // Primary container background ("white")
-@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: fade(#fff, 90%);
-@dark-color-text-2: fade(#fff, 70%);
-@dark-color-text-3: fade(#fff, 50%);
-@dark-color-text-4: fade(#fff, 30%);
-@dark-color-fill-1: fade(#fff, 4%);
-@dark-color-fill-2: fade(#fff, 8%);
-@dark-color-fill-3: fade(#fff, 12%);
-@dark-color-fill-4: fade(#fff, 16%);
-@dark-color-primary-light-1: rgba(var(~'@{sd-cssvars-prefix}-primary-6'), 0.2);
-@dark-color-primary-light-2: rgba(var(~'@{sd-cssvars-prefix}-primary-6'), 0.35);
-@dark-color-primary-light-3: rgba(var(~'@{sd-cssvars-prefix}-primary-6'), 0.5);
-@dark-color-primary-light-4: rgba(var(~'@{sd-cssvars-prefix}-primary-6'), 0.65);
-@dark-color-secondary: rgba(var(~'@{sd-cssvars-prefix}-gray-9'), 0.08);
-@dark-color-secondary-hover: rgba(var(~'@{sd-cssvars-prefix}-gray-8'), 0.16);
-@dark-color-secondary-active: rgba(var(~'@{sd-cssvars-prefix}-gray-7'), 0.24);
-@dark-color-secondary-disabled: rgba(var(~'@{sd-cssvars-prefix}-gray-9'), 0.08);
-@dark-color-danger-light-1: rgba(var(~'@{sd-cssvars-prefix}-danger-6'), 0.2);
-@dark-color-danger-light-2: rgba(var(~'@{sd-cssvars-prefix}-danger-6'), 0.35);
-@dark-color-danger-light-3: rgba(var(~'@{sd-cssvars-prefix}-danger-6'), 0.5);
-@dark-color-danger-light-4: rgba(var(~'@{sd-cssvars-prefix}-danger-6'), 0.65);
-@dark-color-success-light-1: rgb(var(~'@{sd-cssvars-prefix}-success-6'), 0.2);
-@dark-color-success-light-2: rgb(var(~'@{sd-cssvars-prefix}-success-6'), 0.35);
-@dark-color-success-light-3: rgb(var(~'@{sd-cssvars-prefix}-success-6'), 0.5);
-@dark-color-success-light-4: rgb(var(~'@{sd-cssvars-prefix}-success-6'), 0.65);
-@dark-color-warning-light-1: rgb(var(~'@{sd-cssvars-prefix}-warning-6'), 0.2);
-@dark-color-warning-light-2: rgb(var(~'@{sd-cssvars-prefix}-warning-6'), 0.35);
-@dark-color-warning-light-3: rgb(var(~'@{sd-cssvars-prefix}-warning-6'), 0.5);
-@dark-color-warning-light-4: rgb(var(~'@{sd-cssvars-prefix}-warning-6'), 0.65);
-@dark-color-link-light-1: rgb(var(~'@{sd-cssvars-prefix}-link-6'), 0.2);
-@dark-color-link-light-2: rgb(var(~'@{sd-cssvars-prefix}-link-6'), 0.35);
-@dark-color-link-light-3: rgb(var(~'@{sd-cssvars-prefix}-link-6'), 0.5);
-@dark-color-link-light-4: rgb(var(~'@{sd-cssvars-prefix}-link-6'), 0.65);
-
-// vue overwrite token
-@size-medium: @size-default;

package/es/style/theme/index.css

@@ -1,17 +0,0 @@
-/******** borderSize *******/
-/******** borderStyle *******/
-/******** radius *******/
-/******** shadow distance *******/
-/******** size *******/
-/******** spacing *******/
-/******** shadow *******/
-/******** opacity *******/
-/******** fontSize *******/
-/******** fontWeight ********/
-/******** Primary *******/
-/******** success *******/
-/******** warning *******/
-/******** danger *******/
-/******** link *******/
-/******** radius *******/
-/********* icon hover *********/

package/es/style/theme/index.less

@@ -1,43 +0,0 @@
-@import url('./global.less');
-@import url('./component.less');
-
-@prefix: sd;
-
-@font-family: Inter, '-apple-system', BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
-  'noto sans', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-
-@code-family: Consolas, Menlo;
-
-// global font size
-@font-size-body: 14px;
-
-@transition-duration-1: 0.1s;
-@transition-duration-2: 0.2s;
-@transition-duration-3: 0.3s;
-@transition-duration-4: 0.4s;
-@transition-duration-5: 0.5s;
-@transition-duration-loading: 1s;
-
-// 线性
-@transition-timing-function-linear: cubic-bezier(0, 0, 1, 1);
-// 标准
-@transition-timing-function-standard: cubic-bezier(0.34, 0.69, 0.1, 1);
-// 过冲
-@transition-timing-function-overshoot: cubic-bezier(0.3, 1.3, 0.3, 1);
-// 减速
-@transition-timing-function-decelerate: cubic-bezier(0.4, 0.8, 0.74, 1);
-// 加速
-@transition-timing-function-accelerate: cubic-bezier(0.26, 0, 0.6, 0.2);
-
-@z-index-popup-base: 1000;
-@z-index-affix: @z-index-popup-base - 1; // 999
-@z-index-popup: @z-index-popup-base; // 1000
-@z-index-drawer: @z-index-popup-base + 1; // 1001
-@z-index-modal: @z-index-drawer; // 1001
-@z-index-message: @z-index-popup-base + 3; // 1003
-@z-index-notification: @z-index-popup-base + 3; // 1003
-@z-index-image-preview: @z-index-modal; // 1001
-
-@line-height-base: 1.5715;
-
-@popup-box-shadow-base: @shadow1-down;