@sdata/web-vue 4.7.1 → 5.0.0

package/es/menu/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';
@@ -143,3 +144,392 @@ $dropdown-dark-option-color-text_disabled: var(
 $dropdown-dark-group-title-color-text: var(
   string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
 );
+
+// @generated runtime tokens — pnpm theme:generate
+$menu-font-size: theme-runtime.token('menu', 'menu-font-size', $menu-font-size);
+$menu-line-height: theme-runtime.token('menu', 'menu-line-height', $line-height-base);
+$menu-border-radius: theme-runtime.token('menu', 'menu-border-radius', $menu-border-radius);
+$menu-font-weight-item-selected: theme-runtime.token(
+  'menu',
+  'menu-font-weight-item-selected',
+  $menu-font-weight-item-selected,
+  'font-weight-500'
+);
+$menu-color-label-item-selected: theme-runtime.token(
+  'menu',
+  'menu-color-label-item-selected',
+  $menu-color-label-item-selected,
+  'color-primary-6'
+);
+$menu-height-label-item-selected: theme-runtime.token(
+  'menu',
+  'menu-height-label-item-selected',
+  $menu-height-label-item-selected
+);
+$menu-margin-left-item-suffix-icon: theme-runtime.token(
+  'menu',
+  'menu-margin-left-item-suffix-icon',
+  $menu-margin-left-item-suffix-icon,
+  'spacing-3'
+);
+$menu-item-gap: theme-runtime.token('menu', 'menu-item-gap', $menu-item-gap, 'spacing-2');
+$menu-item-indent-spacing: theme-runtime.token(
+  'menu',
+  'menu-item-indent-spacing',
+  $menu-item-indent-spacing,
+  'spacing-8'
+);
+$menu-width-collapse-button: theme-runtime.token(
+  'menu',
+  'menu-width-collapse-button',
+  $menu-width-collapse-button,
+  'size-6'
+);
+$menu-height-collapse-button: theme-runtime.token(
+  'menu',
+  'menu-height-collapse-button',
+  $menu-height-collapse-button,
+  'size-6'
+);
+$menu-border-radius-collapse-button: theme-runtime.token(
+  'menu',
+  'menu-border-radius-collapse-button',
+  $menu-border-radius-collapse-button
+);
+$menu-light-color-bg: theme-runtime.token('menu', 'menu-light-color-bg', $menu-light-color-bg);
+$menu-light-color-bg-item_default: theme-runtime.token(
+  'menu',
+  'menu-light-color-bg-item-default',
+  $menu-light-color-bg
+);
+$menu-light-color-bg-item_hover: theme-runtime.token(
+  'menu',
+  'menu-light-color-bg-item-hover',
+  $menu-light-color-bg-item_hover
+);
+$menu-light-color-bg-item_selected: theme-runtime.token(
+  'menu',
+  'menu-light-color-bg-item-selected',
+  $menu-light-color-bg-item_selected
+);
+$menu-light-color-bg-item_disabled: theme-runtime.token(
+  'menu',
+  'menu-light-color-bg-item-disabled',
+  $menu-light-color-bg
+);
+$menu-light-color-item_default: theme-runtime.token(
+  'menu',
+  'menu-light-color-item-default',
+  $menu-light-color-item_default
+);
+$menu-light-color-item_hover: theme-runtime.token(
+  'menu',
+  'menu-light-color-item-hover',
+  $menu-light-color-item_hover
+);
+$menu-light-color-item_selected: theme-runtime.token(
+  'menu',
+  'menu-light-color-item-selected',
+  $menu-light-color-item_selected,
+  'color-primary-6'
+);
+$menu-light-color-submenu_selected: theme-runtime.token(
+  'menu',
+  'menu-light-color-submenu-selected',
+  $menu-light-color-submenu_selected,
+  'color-primary-6'
+);
+$menu-light-color-bg-submenu_selected_hover: theme-runtime.token(
+  'menu',
+  'menu-light-color-bg-submenu-selected-hover',
+  $menu-light-color-bg-submenu_selected_hover
+);
+$menu-light-color-item_disabled: theme-runtime.token(
+  'menu',
+  'menu-light-color-item-disabled',
+  $menu-light-color-item_disabled
+);
+$menu-light-color-icon_default: theme-runtime.token(
+  'menu',
+  'menu-light-color-icon-default',
+  $menu-light-color-icon_default
+);
+$menu-light-color-icon_hover: theme-runtime.token(
+  'menu',
+  'menu-light-color-icon-hover',
+  $menu-light-color-icon_hover
+);
+$menu-light-color-icon_selected: theme-runtime.token(
+  'menu',
+  'menu-light-color-icon-selected',
+  $menu-light-color-icon_selected,
+  'color-primary-6'
+);
+$menu-light-color-icon_disabled: theme-runtime.token(
+  'menu',
+  'menu-light-color-icon-disabled',
+  $menu-light-color-icon_disabled
+);
+$menu-light-color-group-title: theme-runtime.token(
+  'menu',
+  'menu-light-color-group-title',
+  $menu-light-color-group-title
+);
+$menu-dark-color-bg: theme-runtime.token('menu', 'menu-dark-color-bg', $menu-dark-color-bg);
+$menu-dark-color-bg-item_default: theme-runtime.token(
+  'menu',
+  'menu-dark-color-bg-item-default',
+  $menu-dark-color-bg
+);
+$menu-dark-color-bg-item_hover: theme-runtime.token(
+  'menu',
+  'menu-dark-color-bg-item-hover',
+  $menu-dark-color-bg-item_hover
+);
+$menu-dark-color-bg-item_selected: theme-runtime.token(
+  'menu',
+  'menu-dark-color-bg-item-selected',
+  $menu-dark-color-bg-item_selected
+);
+$menu-dark-color-bg-item_disabled: theme-runtime.token(
+  'menu',
+  'menu-dark-color-bg-item-disabled',
+  $menu-dark-color-bg
+);
+$menu-dark-color-submenu_selected: theme-runtime.token(
+  'menu',
+  'menu-dark-color-submenu-selected',
+  $menu-dark-color-submenu_selected,
+  'color-primary-6'
+);
+$menu-dark-color-bg-submenu_selected_hover: theme-runtime.token(
+  'menu',
+  'menu-dark-color-bg-submenu-selected-hover',
+  $menu-dark-color-bg-submenu_selected_hover
+);
+$menu-dark-color-item_default: theme-runtime.token(
+  'menu',
+  'menu-dark-color-item-default',
+  $menu-dark-color-item_default
+);
+$menu-dark-color-item_hover: theme-runtime.token(
+  'menu',
+  'menu-dark-color-item-hover',
+  $menu-dark-color-item_hover
+);
+$menu-dark-color-item_selected: theme-runtime.token(
+  'menu',
+  'menu-dark-color-item-selected',
+  $menu-dark-color-item_selected
+);
+$menu-dark-color-item_disabled: theme-runtime.token(
+  'menu',
+  'menu-dark-color-item-disabled',
+  $menu-dark-color-item_disabled
+);
+$menu-dark-color-icon_default: theme-runtime.token(
+  'menu',
+  'menu-dark-color-icon-default',
+  $menu-dark-color-icon_default
+);
+$menu-dark-color-icon_hover: theme-runtime.token(
+  'menu',
+  'menu-dark-color-icon-hover',
+  $menu-dark-color-icon_hover
+);
+$menu-dark-color-icon_selected: theme-runtime.token(
+  'menu',
+  'menu-dark-color-icon-selected',
+  $menu-dark-color-icon_selected
+);
+$menu-dark-color-icon_disabled: theme-runtime.token(
+  'menu',
+  'menu-dark-color-icon-disabled',
+  $menu-dark-color-icon_disabled
+);
+$menu-dark-color-group-title: theme-runtime.token(
+  'menu',
+  'menu-dark-color-group-title',
+  $menu-dark-color-group-title
+);
+$menu-color-border-popup: theme-runtime.token(
+  'menu',
+  'menu-color-border-popup',
+  $menu-color-border-popup
+);
+$menu-light-color-bg-button: theme-runtime.token(
+  'menu',
+  'menu-light-color-bg-button',
+  $menu-light-color-bg-button
+);
+$menu-light-color-bg-button_hover: theme-runtime.token(
+  'menu',
+  'menu-light-color-bg-button-hover',
+  $menu-light-color-bg-button_hover
+);
+$menu-light-color-button: theme-runtime.token(
+  'menu',
+  'menu-light-color-button',
+  $menu-light-color-button
+);
+$menu-dark-color-bg-button: theme-runtime.token(
+  'menu',
+  'menu-dark-color-bg-button',
+  $menu-dark-color-bg-button,
+  'color-primary-6'
+);
+$menu-dark-color-bg-button_hover: theme-runtime.token(
+  'menu',
+  'menu-dark-color-bg-button-hover',
+  $menu-dark-color-bg-button_hover,
+  'color-primary-7'
+);
+$menu-dark-color-button: theme-runtime.token(
+  'menu',
+  'menu-dark-color-button',
+  $menu-dark-color-button
+);
+$menu-horizontal-padding-vertical: theme-runtime.token(
+  'menu',
+  'menu-horizontal-padding-vertical',
+  $menu-horizontal-padding-vertical
+);
+$menu-horizontal-padding-horizontal: theme-runtime.token(
+  'menu',
+  'menu-horizontal-padding-horizontal',
+  $menu-horizontal-padding-horizontal,
+  'spacing-8'
+);
+$menu-horizontal-item-gap: theme-runtime.token(
+  'menu',
+  'menu-horizontal-item-gap',
+  $menu-horizontal-item-gap,
+  'spacing-6'
+);
+$menu-horizontal-item-height: theme-runtime.token(
+  'menu',
+  'menu-horizontal-item-height',
+  $menu-horizontal-item-height
+);
+$menu-horizontal-item-padding-horizontal: theme-runtime.token(
+  'menu',
+  'menu-horizontal-item-padding-horizontal',
+  $menu-horizontal-item-padding-horizontal,
+  'spacing-6'
+);
+$menu-vertical-padding-vertical: theme-runtime.token(
+  'menu',
+  'menu-vertical-padding-vertical',
+  $menu-vertical-padding-vertical,
+  'spacing-2'
+);
+$menu-vertical-padding-horizontal: theme-runtime.token(
+  'menu',
+  'menu-vertical-padding-horizontal',
+  $menu-vertical-padding-horizontal,
+  'spacing-4'
+);
+$menu-vertical-item-height: theme-runtime.token(
+  'menu',
+  'menu-vertical-item-height',
+  $menu-vertical-item-height
+);
+$menu-collapse-width: theme-runtime.token(
+  'menu',
+  'menu-collapse-width',
+  $menu-collapse-width,
+  'size-12'
+);
+$menu-collapse-padding-vertical: theme-runtime.token(
+  'menu',
+  'menu-collapse-padding-vertical',
+  $menu-collapse-padding-vertical,
+  'spacing-2'
+);
+$menu-collapse-padding-horizontal: theme-runtime.token(
+  'menu',
+  'menu-collapse-padding-horizontal',
+  $menu-collapse-padding-horizontal,
+  'spacing-2'
+);
+$menu-pop-button-size: theme-runtime.token(
+  'menu',
+  'menu-pop-button-size',
+  $menu-pop-button-size,
+  'size-10'
+);
+$menu-pop-button-margin-bottom: theme-runtime.token(
+  'menu',
+  'menu-pop-button-margin-bottom',
+  $menu-pop-button-margin-bottom,
+  'spacing-7'
+);
+$menu-pop-button-box-shadow: theme-runtime.token(
+  'menu',
+  'menu-pop-button-box-shadow',
+  $menu-pop-button-box-shadow
+);
+$menu-pop-button-border-color: theme-runtime.token(
+  'menu',
+  'menu-pop-button-border-color',
+  $menu-pop-button-border-color,
+  'color-transparent'
+);
+$dropdown-dark-color-bg: theme-runtime.token(
+  'menu',
+  'dropdown-dark-color-bg',
+  $dropdown-dark-color-bg
+);
+$dropdown-dark-color-border: theme-runtime.token(
+  'menu',
+  'dropdown-dark-color-border',
+  $dropdown-dark-color-bg
+);
+$dropdown-dark-option-color-bg_default: theme-runtime.token(
+  'menu',
+  'dropdown-dark-option-color-bg-default',
+  $dropdown-dark-option-color-bg_default,
+  'color-transparent'
+);
+$dropdown-dark-option-color-bg_hover: theme-runtime.token(
+  'menu',
+  'dropdown-dark-option-color-bg-hover',
+  $dropdown-dark-option-color-bg_hover
+);
+$dropdown-dark-option-color-bg_selected: theme-runtime.token(
+  'menu',
+  'dropdown-dark-option-color-bg-selected',
+  $dropdown-dark-option-color-bg_selected,
+  'color-transparent'
+);
+$dropdown-dark-option-color-bg_disabled: theme-runtime.token(
+  'menu',
+  'dropdown-dark-option-color-bg-disabled',
+  $dropdown-dark-option-color-bg_disabled,
+  'color-transparent'
+);
+$dropdown-dark-option-color-text_default: theme-runtime.token(
+  'menu',
+  'dropdown-dark-option-color-text-default',
+  $dropdown-dark-option-color-text_default
+);
+$dropdown-dark-option-color-text_hover: theme-runtime.token(
+  'menu',
+  'dropdown-dark-option-color-text-hover',
+  $dropdown-dark-option-color-text_hover
+);
+$dropdown-dark-option-color-text_selected: theme-runtime.token(
+  'menu',
+  'dropdown-dark-option-color-text-selected',
+  $dropdown-dark-option-color-text_selected
+);
+$dropdown-dark-option-color-text_disabled: theme-runtime.token(
+  'menu',
+  'dropdown-dark-option-color-text-disabled',
+  $dropdown-dark-option-color-text_disabled
+);
+$dropdown-dark-group-title-color-text: theme-runtime.token(
+  'menu',
+  'dropdown-dark-group-title-color-text',
+  $dropdown-dark-group-title-color-text
+);

package/es/message/style/index.css

@@ -30,95 +30,95 @@
   pointer-events: none;
 }
 .sd-message-list-top {
-  top: 40px;
+  top: var(--component-message-message-wrapper-margin-top, var(--component-message-wrapper-margin-top, var(--spacing-12, 40px)));
 }
 .sd-message-list-bottom {
-  bottom: 40px;
+  bottom: var(--component-message-message-wrapper-margin-bottom, var(--component-message-wrapper-margin-bottom, var(--spacing-12, 40px)));
 }
 
 .sd-message {
   position: relative;
   display: inline-flex;
   align-items: center;
-  margin-bottom: 16px;
-  padding: 10px 16px 10px 16px;
+  margin-bottom: var(--component-message-message-margin-bottom, var(--component-message-margin-bottom, var(--spacing-7, 16px)));
+  padding: var(--component-message-message-padding-top, var(--component-message-padding-top, var(--spacing-5, 10px))) var(--component-message-message-padding-right, var(--component-message-padding-right, var(--spacing-7, 16px))) var(--component-message-message-padding-bottom, var(--component-message-padding-bottom, var(--spacing-5, 10px))) var(--component-message-message-padding-left, var(--component-message-padding-left, var(--spacing-7, 16px)));
   overflow: hidden;
   line-height: 1;
   text-align: center;
   list-style: none;
-  background-color: var(--sd-color-bg-popup);
-  border: 1px solid var(--sd-color-neutral-3);
-  border-radius: var(--sd-border-radius-small);
+  background-color: var(--component-message-message-normal-color-bg, var(--component-message-normal-color-bg, var(--sd-color-bg-popup)));
+  border: var(--component-message-message-border-width, var(--component-message-border-width, 1px)) var(--component-message-message-border-style, var(--component-message-border-style, solid)) var(--component-message-message-normal-color-border, var(--component-message-normal-color-border, var(--sd-color-neutral-3)));
+  border-radius: var(--component-message-message-border-radius, var(--component-message-border-radius, var(--sd-border-radius-small)));
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
   transition: background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), border-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
   pointer-events: auto;
 }
 .sd-message-icon {
   display: inline-block;
-  margin-right: 8px;
-  color: var(--sd-color-text-1);
-  font-size: 20px;
+  margin-right: var(--component-message-message-icon-margin-right, var(--component-message-icon-margin-right, var(--spacing-4, 8px)));
+  color: var(--component-message-message-normal-color-icon, var(--component-message-normal-color-icon, var(--sd-color-text-1)));
+  font-size: var(--component-message-message-font-size-icon, var(--component-message-font-size-icon, 20px));
   vertical-align: middle;
   animation: sd-msg-fade 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), sd-msg-fade 0.4s cubic-bezier(0.3, 1.3, 0.3, 1);
 }
 .sd-message-content {
-  color: var(--sd-color-text-1);
-  font-size: 14px;
+  color: var(--component-message-message-normal-color-content, var(--component-message-normal-color-content, var(--sd-color-text-1)));
+  font-size: var(--component-message-message-font-size-content, var(--component-message-font-size-content, var(--font-size-body-3, 14px)));
   vertical-align: middle;
 }
 .sd-message-info {
-  background-color: var(--sd-color-bg-popup);
-  border-color: var(--sd-color-neutral-3);
+  background-color: var(--component-message-message-info-color-bg, var(--component-message-info-color-bg, var(--sd-color-bg-popup)));
+  border-color: var(--component-message-message-info-color-border, var(--component-message-info-color-border, var(--sd-color-neutral-3)));
 }
 .sd-message-info .sd-message-icon {
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-message-message-info-color-icon, var(--component-message-info-color-icon, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-message-info .sd-message-content {
-  color: var(--sd-color-text-1);
+  color: var(--component-message-message-info-color-content, var(--component-message-info-color-content, var(--sd-color-text-1)));
 }
 .sd-message-success {
-  background-color: var(--sd-color-bg-popup);
-  border-color: var(--sd-color-neutral-3);
+  background-color: var(--component-message-message-success-color-bg, var(--component-message-success-color-bg, var(--sd-color-bg-popup)));
+  border-color: var(--component-message-message-success-color-border, var(--component-message-success-color-border, var(--sd-color-neutral-3)));
 }
 .sd-message-success .sd-message-icon {
-  color: rgb(var(--sd-success-6));
+  color: var(--component-message-message-success-color-icon, var(--component-message-success-color-icon, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
 }
 .sd-message-success .sd-message-content {
-  color: var(--sd-color-text-1);
+  color: var(--component-message-message-success-color-content, var(--component-message-success-color-content, var(--sd-color-text-1)));
 }
 .sd-message-warning {
-  background-color: var(--sd-color-bg-popup);
-  border-color: var(--sd-color-neutral-3);
+  background-color: var(--component-message-message-warning-color-bg, var(--component-message-warning-color-bg, var(--sd-color-bg-popup)));
+  border-color: var(--component-message-message-warning-color-border, var(--component-message-warning-color-border, var(--sd-color-neutral-3)));
 }
 .sd-message-warning .sd-message-icon {
-  color: rgb(var(--sd-warning-6));
+  color: var(--component-message-message-warning-color-icon, var(--component-message-warning-color-icon, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
 }
 .sd-message-warning .sd-message-content {
-  color: var(--sd-color-text-1);
+  color: var(--component-message-message-warning-color-content, var(--component-message-warning-color-content, var(--sd-color-text-1)));
 }
 .sd-message-error {
-  background-color: var(--sd-color-bg-popup);
-  border-color: var(--sd-color-neutral-3);
+  background-color: var(--component-message-message-error-color-bg, var(--component-message-error-color-bg, var(--sd-color-bg-popup)));
+  border-color: var(--component-message-message-error-color-border, var(--component-message-error-color-border, var(--sd-color-neutral-3)));
 }
 .sd-message-error .sd-message-icon {
-  color: rgb(var(--sd-danger-6));
+  color: var(--component-message-message-error-color-icon, var(--component-message-error-color-icon, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
 }
 .sd-message-error .sd-message-content {
-  color: var(--sd-color-text-1);
+  color: var(--component-message-message-error-color-content, var(--component-message-error-color-content, var(--sd-color-text-1)));
 }
 .sd-message-loading {
-  background-color: var(--sd-color-bg-popup);
-  border-color: var(--sd-color-neutral-3);
+  background-color: var(--component-message-message-loading-color-bg, var(--component-message-loading-color-bg, var(--sd-color-bg-popup)));
+  border-color: var(--component-message-message-loading-color-border, var(--component-message-loading-color-border, var(--sd-color-neutral-3)));
 }
 .sd-message-loading .sd-message-icon {
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-message-message-loading-color-icon, var(--component-message-loading-color-icon, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-message-loading .sd-message-content {
-  color: var(--sd-color-text-1);
+  color: var(--component-message-message-loading-color-content, var(--component-message-loading-color-content, var(--sd-color-text-1)));
 }
 .sd-message-close-btn {
   margin-left: 8px;
-  color: var(--sd-color-text-1);
+  color: var(--component-message-message-color-close-icon, var(--component-message-color-close-icon, var(--sd-color-text-1)));
   font-size: 12px;
 }
 .sd-message .sd-icon-hover.sd-message-icon-hover::before {