@sdata/web-vue 4.7.1 → 5.0.0

package/es/notification/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
@@ -131,3 +132,243 @@ $notification-error-color-text-content: var(
 $notification-error-color-border: var(
   string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
 );
+
+// @generated runtime tokens — pnpm theme:generate
+$notification-wrapper-margin-top: theme-runtime.token(
+  'notification',
+  'notification-wrapper-margin-top',
+  $notification-wrapper-margin-top,
+  'spacing-8'
+);
+$notification-wrapper-margin-bottom: theme-runtime.token(
+  'notification',
+  'notification-wrapper-margin-bottom',
+  $notification-wrapper-margin-bottom,
+  'spacing-8'
+);
+$notification-wrapper-margin-left: theme-runtime.token(
+  'notification',
+  'notification-wrapper-margin-left',
+  $notification-wrapper-margin-left,
+  'spacing-8'
+);
+$notification-wrapper-margin-right: theme-runtime.token(
+  'notification',
+  'notification-wrapper-margin-right',
+  $notification-wrapper-margin-right,
+  'spacing-8'
+);
+$notification-border-radius: theme-runtime.token(
+  'notification',
+  'notification-border-radius',
+  $notification-border-radius
+);
+$notification-margin-bottom: theme-runtime.token(
+  'notification',
+  'notification-margin-bottom',
+  $notification-margin-bottom,
+  'spacing-8'
+);
+$notification-padding-top: theme-runtime.token(
+  'notification',
+  'notification-padding-top',
+  $notification-padding-top,
+  'spacing-8'
+);
+$notification-padding-bottom: theme-runtime.token(
+  'notification',
+  'notification-padding-bottom',
+  $notification-padding-bottom,
+  'spacing-8'
+);
+$notification-font-size-icon: theme-runtime.token(
+  'notification',
+  'notification-font-size-icon',
+  $notification-font-size-icon
+);
+$notification-font-size-title: theme-runtime.token(
+  'notification',
+  'notification-font-size-title',
+  $notification-font-size-title,
+  'font-size-title-1'
+);
+$notification-font-size-content: theme-runtime.token(
+  'notification',
+  'notification-font-size-content',
+  $notification-font-size-content,
+  'font-size-body-3'
+);
+$notification-icon-margin-right: theme-runtime.token(
+  'notification',
+  'notification-icon-margin-right',
+  $notification-icon-margin-right,
+  'spacing-7'
+);
+$notification-title-margin-bottom: theme-runtime.token(
+  'notification',
+  'notification-title-margin-bottom',
+  $notification-title-margin-bottom,
+  'spacing-2'
+);
+$notification-btn-wrapper-margin-top: theme-runtime.token(
+  'notification',
+  'notification-btn-wrapper-margin-top',
+  $notification-btn-wrapper-margin-top,
+  'spacing-7'
+);
+$notification-border-width: theme-runtime.token(
+  'notification',
+  'notification-border-width',
+  $notification-border-width
+);
+$notification-border-style: theme-runtime.token(
+  'notification',
+  'notification-border-style',
+  $notification-border-style
+);
+$notification-color-close-icon: theme-runtime.token(
+  'notification',
+  'notification-color-close-icon',
+  $notification-color-close-icon
+);
+$notification-close-icon-top: theme-runtime.token(
+  'notification',
+  'notification-close-icon-top',
+  $notification-close-icon-top,
+  'spacing-6'
+);
+$notification-close-icon-right: theme-runtime.token(
+  'notification',
+  'notification-close-icon-right',
+  $notification-close-icon-right,
+  'spacing-6'
+);
+$notification-normal-color-bg: theme-runtime.token(
+  'notification',
+  'notification-normal-color-bg',
+  $notification-normal-color-bg
+);
+$notification-normal-color-icon: theme-runtime.token(
+  'notification',
+  'notification-normal-color-icon',
+  $notification-normal-color-icon
+);
+$notification-normal-color-text-title: theme-runtime.token(
+  'notification',
+  'notification-normal-color-text-title',
+  $notification-normal-color-text-title
+);
+$notification-normal-color-text-content: theme-runtime.token(
+  'notification',
+  'notification-normal-color-text-content',
+  $notification-normal-color-text-content
+);
+$notification-normal-color-border: theme-runtime.token(
+  'notification',
+  'notification-normal-color-border',
+  $notification-normal-color-border
+);
+$notification-info-color-bg: theme-runtime.token(
+  'notification',
+  'notification-info-color-bg',
+  $notification-info-color-bg
+);
+$notification-info-color-icon: theme-runtime.token(
+  'notification',
+  'notification-info-color-icon',
+  $notification-info-color-icon,
+  'color-primary-6'
+);
+$notification-info-color-text-title: theme-runtime.token(
+  'notification',
+  'notification-info-color-text-title',
+  $notification-info-color-text-title
+);
+$notification-info-color-text-content: theme-runtime.token(
+  'notification',
+  'notification-info-color-text-content',
+  $notification-info-color-text-content
+);
+$notification-info-color-border: theme-runtime.token(
+  'notification',
+  'notification-info-color-border',
+  $notification-info-color-border
+);
+$notification-success-color-bg: theme-runtime.token(
+  'notification',
+  'notification-success-color-bg',
+  $notification-success-color-bg
+);
+$notification-success-color-icon: theme-runtime.token(
+  'notification',
+  'notification-success-color-icon',
+  $notification-success-color-icon,
+  'color-success-6'
+);
+$notification-success-color-text-title: theme-runtime.token(
+  'notification',
+  'notification-success-color-text-title',
+  $notification-success-color-text-title
+);
+$notification-success-color-text-content: theme-runtime.token(
+  'notification',
+  'notification-success-color-text-content',
+  $notification-success-color-text-content
+);
+$notification-success-color-border: theme-runtime.token(
+  'notification',
+  'notification-success-color-border',
+  $notification-success-color-border
+);
+$notification-warning-color-bg: theme-runtime.token(
+  'notification',
+  'notification-warning-color-bg',
+  $notification-warning-color-bg
+);
+$notification-warning-color-icon: theme-runtime.token(
+  'notification',
+  'notification-warning-color-icon',
+  $notification-warning-color-icon,
+  'color-warning-6'
+);
+$notification-warning-color-text-title: theme-runtime.token(
+  'notification',
+  'notification-warning-color-text-title',
+  $notification-warning-color-text-title
+);
+$notification-warning-color-text-content: theme-runtime.token(
+  'notification',
+  'notification-warning-color-text-content',
+  $notification-warning-color-text-content
+);
+$notification-warning-color-border: theme-runtime.token(
+  'notification',
+  'notification-warning-color-border',
+  $notification-warning-color-border
+);
+$notification-error-color-bg: theme-runtime.token(
+  'notification',
+  'notification-error-color-bg',
+  $notification-error-color-bg
+);
+$notification-error-color-icon: theme-runtime.token(
+  'notification',
+  'notification-error-color-icon',
+  $notification-error-color-icon,
+  'color-danger-6'
+);
+$notification-error-color-text-title: theme-runtime.token(
+  'notification',
+  'notification-error-color-text-title',
+  $notification-error-color-text-title
+);
+$notification-error-color-text-content: theme-runtime.token(
+  'notification',
+  'notification-error-color-text-content',
+  $notification-error-color-text-content
+);
+$notification-error-color-border: theme-runtime.token(
+  'notification',
+  'notification-error-color-border',
+  $notification-error-color-border
+);

package/es/number-flow/style/index.css

@@ -27,8 +27,8 @@
   display: inline-block;
 }
 .sd-number-flow-content {
-  margin: -0.25em -0.2em;
-  padding: 0.25em 0.2em;
+  margin: calc(-1 * var(--component-number-flow-number-flow-mask-height, var(--component-number-flow-mask-height, 0.25em))) calc(-1 * var(--component-number-flow-number-flow-mask-width, var(--component-number-flow-mask-width, 0.2em)));
+  padding: var(--component-number-flow-number-flow-mask-height, var(--component-number-flow-mask-height, 0.25em)) var(--component-number-flow-number-flow-mask-width, var(--component-number-flow-mask-width, 0.2em));
   overflow: hidden;
 }
 .sd-number-flow-part {
@@ -66,15 +66,15 @@
   will-change: transform;
 }
 .sd-number-flow-custom-prefix {
-  margin-right: 4px;
+  margin-right: var(--component-number-flow-number-flow-gap, var(--component-number-flow-gap, var(--spacing-2, 4px)));
 }
 .sd-number-flow-custom-suffix {
-  margin-left: 4px;
+  margin-left: var(--component-number-flow-number-flow-gap, var(--component-number-flow-gap, var(--spacing-2, 4px)));
 }
 
 .sd-number-flow-group {
   display: inline-flex;
-  gap: 4px;
+  gap: var(--component-number-flow-number-flow-gap, var(--component-number-flow-gap, var(--spacing-2, 4px)));
   align-items: baseline;
 }
 

package/es/number-flow/style/token.scss

@@ -1,5 +1,24 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 $number-flow-gap: global.$spacing-2;
 $number-flow-mask-height: 0.25em;
 $number-flow-mask-width: 0.2em;
+
+// @generated runtime tokens — pnpm theme:generate
+$number-flow-gap: theme-runtime.token(
+  'number-flow',
+  'number-flow-gap',
+  $number-flow-gap,
+  'spacing-2'
+);
+$number-flow-mask-height: theme-runtime.token(
+  'number-flow',
+  'number-flow-mask-height',
+  $number-flow-mask-height
+);
+$number-flow-mask-width: theme-runtime.token(
+  'number-flow',
+  'number-flow-mask-width',
+  $number-flow-mask-width
+);

package/es/page-header/style/index.css

@@ -16,20 +16,20 @@
 /******** radius *******/
 /********* icon hover *********/
 .sd-page-header {
-  padding: 16px 0;
+  padding: var(--component-page-header-page-header-padding-vertical, var(--component-page-header-padding-vertical, var(--spacing-7, 16px))) 0;
 }
 .sd-page-header-breadcrumb + .sd-page-header-header {
-  margin-top: 4px;
+  margin-top: var(--component-page-header-page-header-margin-breadcrumb-bottom, var(--component-page-header-margin-breadcrumb-bottom, var(--spacing-2, 4px)));
 }
 .sd-page-header-wrapper {
-  padding-right: 20px;
-  padding-left: 24px;
+  padding-right: var(--component-page-header-page-header-padding-right, var(--component-page-header-padding-right, var(--spacing-8, 20px)));
+  padding-left: var(--component-page-header-page-header-padding-left, var(--component-page-header-padding-left, var(--spacing-9, 24px)));
 }
 .sd-page-header-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  line-height: 28px;
+  line-height: var(--component-page-header-page-header-line-height, var(--component-page-header-line-height, var(--size-7, 28px)));
 }
 .sd-page-header-header-left {
   display: flex;
@@ -53,11 +53,11 @@
   height: 30px;
 }
 .sd-page-header .sd-icon-hover.sd-page-header-icon-hover:hover::before {
-  background-color: var(--sd-color-fill-2);
+  background-color: var(--component-page-header-page-header-color-back-icon-bg-hover, var(--component-page-header-color-back-icon-bg-hover, var(--sd-color-fill-2)));
 }
 .sd-page-header-back-btn {
-  margin-right: 12px;
-  color: var(--sd-color-text-2);
+  margin-right: var(--component-page-header-page-header-margin-back-icon-right, var(--component-page-header-margin-back-icon-right, var(--spacing-6, 12px)));
+  color: var(--component-page-header-page-header-color-back-icon, var(--component-page-header-color-back-icon, var(--sd-color-text-2)));
   font-size: 14px;
 }
 .sd-page-header-back-btn-icon {
@@ -67,39 +67,39 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: var(--sd-color-text-1);
-  font-weight: 600;
-  font-size: 20px;
+  color: var(--component-page-header-page-header-color-title-text, var(--component-page-header-color-title-text, var(--sd-color-text-1)));
+  font-weight: var(--component-page-header-page-header-weight-title-text, var(--component-page-header-weight-title-text, 600));
+  font-size: var(--component-page-header-page-header-size-title-text, var(--component-page-header-size-title-text, var(--font-size-title-2, 20px)));
 }
 .sd-page-header-divider {
-  width: 1px;
-  height: 16px;
-  margin-right: 12px;
-  margin-left: 12px;
-  background-color: var(--sd-color-fill-3);
+  width: var(--component-page-header-page-header-size-divider-width, var(--component-page-header-size-divider-width, 1px));
+  height: var(--component-page-header-page-header-size-divider-height, var(--component-page-header-size-divider-height, var(--size-4, 16px)));
+  margin-right: var(--component-page-header-page-header-margin-divider-right, var(--component-page-header-margin-divider-right, var(--spacing-6, 12px)));
+  margin-left: var(--component-page-header-page-header-margin-divider-left, var(--component-page-header-margin-divider-left, var(--spacing-6, 12px)));
+  background-color: var(--component-page-header-page-header-color-divider-bg, var(--component-page-header-color-divider-bg, var(--sd-color-fill-3)));
 }
 .sd-page-header-subtitle {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: var(--sd-color-text-3);
-  font-size: 14px;
+  color: var(--component-page-header-page-header-color-sub-title-text, var(--component-page-header-color-sub-title-text, var(--sd-color-text-3)));
+  font-size: var(--component-page-header-page-header-size-sub-title-text, var(--component-page-header-size-sub-title-text, var(--font-size-body-3, 14px)));
 }
 .sd-page-header-content {
-  padding: 20px 32px;
-  border-top: 1px solid var(--sd-color-neutral-3);
+  padding: var(--component-page-header-page-header-padding-content-vertical, var(--component-page-header-padding-content-vertical, var(--spacing-8, 20px))) var(--component-page-header-page-header-padding-content-horizontal, var(--component-page-header-padding-content-horizontal, var(--spacing-10, 32px)));
+  border-top: var(--component-page-header-page-header-border-header-width, var(--component-page-header-border-header-width, var(--border-1, 1px))) var(--component-page-header-page-header-border-header-style, var(--component-page-header-border-header-style, var(--border-solid, solid))) var(--component-page-header-page-header-color-header-border, var(--component-page-header-color-header-border, var(--sd-color-neutral-3)));
 }
 .sd-page-header-footer {
-  padding: 16px 20px 0 24px;
+  padding: var(--component-page-header-page-header-padding-vertical, var(--component-page-header-padding-vertical, var(--spacing-7, 16px))) var(--component-page-header-page-header-padding-right, var(--component-page-header-padding-right, var(--spacing-8, 20px))) 0 var(--component-page-header-page-header-padding-left, var(--component-page-header-padding-left, var(--spacing-9, 24px)));
 }
 .sd-page-header-with-breadcrumb {
-  padding: 12px 0;
+  padding: var(--component-page-header-page-header-padding-vertical-breadcrumb, var(--component-page-header-padding-vertical-breadcrumb, var(--spacing-6, 12px))) 0;
 }
 .sd-page-header-with-breadcrumb .sd-page-header-footer {
-  padding-top: 12px;
+  padding-top: var(--component-page-header-page-header-padding-vertical-breadcrumb, var(--component-page-header-padding-vertical-breadcrumb, var(--spacing-6, 12px)));
 }
 .sd-page-header-with-content .sd-page-header-wrapper {
-  padding-bottom: 12px;
+  padding-bottom: var(--component-page-header-page-header-padding-vertical-breadcrumb, var(--component-page-header-padding-vertical-breadcrumb, var(--spacing-6, 12px)));
 }
 .sd-page-header-with-footer {
   padding-bottom: 0;
@@ -108,5 +108,5 @@
   flex-wrap: wrap;
 }
 .sd-page-header-wrapper .sd-page-header-header .sd-page-header-head-extra {
-  margin-top: 4px;
+  margin-top: var(--component-page-header-page-header-margin-breadcrumb-bottom, var(--component-page-header-margin-breadcrumb-bottom, var(--spacing-2, 4px)));
 }

package/es/page-header/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
@@ -61,3 +62,141 @@ $page-header-padding-content-vertical: global.$spacing-8;
 $page-header-padding-content-horizontal: global.$spacing-10;
 
 $page-header-margin-breadcrumb-bottom: global.$spacing-2;
+
+// @generated runtime tokens — pnpm theme:generate
+$page-header-padding-left: theme-runtime.token(
+  'page-header',
+  'page-header-padding-left',
+  $page-header-padding-left,
+  'spacing-9'
+);
+$page-header-padding-right: theme-runtime.token(
+  'page-header',
+  'page-header-padding-right',
+  $page-header-padding-right,
+  'spacing-8'
+);
+$page-header-padding-vertical: theme-runtime.token(
+  'page-header',
+  'page-header-padding-vertical',
+  $page-header-padding-vertical,
+  'spacing-7'
+);
+$page-header-padding-vertical_breadcrumb: theme-runtime.token(
+  'page-header',
+  'page-header-padding-vertical-breadcrumb',
+  $page-header-padding-vertical_breadcrumb,
+  'spacing-6'
+);
+$page-header-color-back-icon: theme-runtime.token(
+  'page-header',
+  'page-header-color-back-icon',
+  $page-header-color-back-icon
+);
+$page-header-margin-back-icon-right: theme-runtime.token(
+  'page-header',
+  'page-header-margin-back-icon-right',
+  $page-header-margin-back-icon-right,
+  'spacing-6'
+);
+$page-header-line-height: theme-runtime.token(
+  'page-header',
+  'page-header-line-height',
+  $page-header-line-height,
+  'size-7'
+);
+$page-header-color-title-text: theme-runtime.token(
+  'page-header',
+  'page-header-color-title-text',
+  $page-header-color-title-text
+);
+$page-header-weight-title-text: theme-runtime.token(
+  'page-header',
+  'page-header-weight-title-text',
+  $page-header-weight-title-text
+);
+$page-header-color-back-icon-bg_hover: theme-runtime.token(
+  'page-header',
+  'page-header-color-back-icon-bg-hover',
+  $page-header-color-back-icon-bg_hover
+);
+$page-header-size-title-text: theme-runtime.token(
+  'page-header',
+  'page-header-size-title-text',
+  $page-header-size-title-text,
+  'font-size-title-2'
+);
+$page-header-color-divider-bg: theme-runtime.token(
+  'page-header',
+  'page-header-color-divider-bg',
+  $page-header-color-divider-bg
+);
+$page-header-size-divider-height: theme-runtime.token(
+  'page-header',
+  'page-header-size-divider-height',
+  $page-header-size-divider-height,
+  'size-4'
+);
+$page-header-size-divider-width: theme-runtime.token(
+  'page-header',
+  'page-header-size-divider-width',
+  $page-header-size-divider-width
+);
+$page-header-margin-divider-left: theme-runtime.token(
+  'page-header',
+  'page-header-margin-divider-left',
+  $page-header-margin-divider-left,
+  'spacing-6'
+);
+$page-header-margin-divider-right: theme-runtime.token(
+  'page-header',
+  'page-header-margin-divider-right',
+  $page-header-margin-divider-right,
+  'spacing-6'
+);
+$page-header-color-sub-title-text: theme-runtime.token(
+  'page-header',
+  'page-header-color-sub-title-text',
+  $page-header-color-sub-title-text
+);
+$page-header-size-sub-title-text: theme-runtime.token(
+  'page-header',
+  'page-header-size-sub-title-text',
+  $page-header-size-sub-title-text,
+  'font-size-body-3'
+);
+$page-header-color-header-border: theme-runtime.token(
+  'page-header',
+  'page-header-color-header-border',
+  $page-header-color-header-border
+);
+$page-header-border-header-width: theme-runtime.token(
+  'page-header',
+  'page-header-border-header-width',
+  $page-header-border-header-width,
+  'border-1'
+);
+$page-header-border-header-style: theme-runtime.token(
+  'page-header',
+  'page-header-border-header-style',
+  $page-header-border-header-style,
+  'border-solid'
+);
+$page-header-padding-content-vertical: theme-runtime.token(
+  'page-header',
+  'page-header-padding-content-vertical',
+  $page-header-padding-content-vertical,
+  'spacing-8'
+);
+$page-header-padding-content-horizontal: theme-runtime.token(
+  'page-header',
+  'page-header-padding-content-horizontal',
+  $page-header-padding-content-horizontal,
+  'spacing-10'
+);
+$page-header-margin-breadcrumb-bottom: theme-runtime.token(
+  'page-header',
+  'page-header-margin-breadcrumb-bottom',
+  $page-header-margin-breadcrumb-bottom,
+  'spacing-2'
+);