@sdata/web-vue 4.7.1 → 5.0.0

package/es/input/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';
@@ -137,3 +138,329 @@ $input-feedback-icon-color_success: global.$color-success-6;
 $input-feedback-icon-color_error: global.$color-danger-6;
 $input-feedback-icon-color_warning: global.$color-warning-6;
 $input-feedback-icon-color_validating: global.$color-primary-6;
+
+// @generated runtime tokens — pnpm theme:generate
+$input-color-bg: theme-runtime.token('input', 'input-color-bg', $input-color-bg);
+$input-color-bg_hover: theme-runtime.token('input', 'input-color-bg-hover', $input-color-bg_hover);
+$input-color-bg_focus: theme-runtime.token('input', 'input-color-bg-focus', $input-color-bg_focus);
+$input-color-bg_disabled: theme-runtime.token(
+  'input',
+  'input-color-bg-disabled',
+  $input-color-bg_disabled
+);
+$input-color-addon-bg: theme-runtime.token('input', 'input-color-addon-bg', $input-color-bg);
+$input-color-addon-border: theme-runtime.token(
+  'input',
+  'input-color-addon-border',
+  $input-color-addon-border
+);
+$input-border-addon-separator-width: theme-runtime.token(
+  'input',
+  'input-border-addon-separator-width',
+  $input-border-addon-separator-width,
+  'border-1'
+);
+$input-color-border_focus: theme-runtime.token(
+  'input',
+  'input-color-border-focus',
+  $input-color-border_focus,
+  'color-primary-6'
+);
+$input-color-shadow_focus: theme-runtime.token(
+  'input',
+  'input-color-shadow-focus',
+  $input-color-shadow_focus
+);
+$input-size-shadow_focus: theme-runtime.token(
+  'input',
+  'input-size-shadow-focus',
+  $input-size-shadow_focus,
+  'shadow-distance-none'
+);
+$input-color-addon-border_default: theme-runtime.token(
+  'input',
+  'input-color-addon-border-default',
+  $input-color-addon-border_default,
+  'color-transparent'
+);
+$input-color-text: theme-runtime.token('input', 'input-color-text', $input-color-text);
+$input-color-placeholder-text: theme-runtime.token(
+  'input',
+  'input-color-placeholder-text',
+  $input-color-placeholder-text
+);
+$input-color-text_disabled: theme-runtime.token(
+  'input',
+  'input-color-text-disabled',
+  $input-color-text_disabled
+);
+$textarea-color-tip-text: theme-runtime.token(
+  'input',
+  'textarea-color-tip-text',
+  $textarea-color-tip-text
+);
+$input-color-bg_error: theme-runtime.token('input', 'input-color-bg-error', $input-color-bg_error);
+$input-color-bg_error_hover: theme-runtime.token(
+  'input',
+  'input-color-bg-error-hover',
+  $input-color-bg_error_hover
+);
+$input-color-bg_error_focus: theme-runtime.token(
+  'input',
+  'input-color-bg-error-focus',
+  $input-color-bg_focus
+);
+$input-color-border_error_focus: theme-runtime.token(
+  'input',
+  'input-color-border-error-focus',
+  $input-color-border_error_focus,
+  'color-danger-6'
+);
+$input-color-shadow_error_focus: theme-runtime.token(
+  'input',
+  'input-color-shadow-error-focus',
+  $input-color-shadow_error_focus
+);
+$input-size-shadow_error_focus: theme-runtime.token(
+  'input',
+  'input-size-shadow-error-focus',
+  $input-size-shadow_error_focus,
+  'shadow-distance-none'
+);
+$input-border-radius: theme-runtime.token('input', 'input-border-radius', $input-border-radius);
+$input-color-border: theme-runtime.token(
+  'input',
+  'input-color-border',
+  $input-color-border,
+  'color-transparent'
+);
+$input-color-border_disabled: theme-runtime.token(
+  'input',
+  'input-color-border-disabled',
+  $input-color-border_disabled,
+  'color-transparent'
+);
+$input-color-border_hover: theme-runtime.token(
+  'input',
+  'input-color-border-hover',
+  $input-color-border_hover,
+  'color-transparent'
+);
+$input-color-border_error: theme-runtime.token(
+  'input',
+  'input-color-border-error',
+  $input-color-border_error,
+  'color-transparent'
+);
+$input-color-border_error_hover: theme-runtime.token(
+  'input',
+  'input-color-border-error-hover',
+  $input-color-border_error_hover,
+  'color-transparent'
+);
+$input-size-default-font-size: theme-runtime.token(
+  'input',
+  'input-size-default-font-size',
+  $input-size-default-font-size,
+  'font-size-body-3'
+);
+$input-size-small-font-size: theme-runtime.token(
+  'input',
+  'input-size-small-font-size',
+  $input-size-small-font-size,
+  'font-size-body-3'
+);
+$input-size-large-font-size: theme-runtime.token(
+  'input',
+  'input-size-large-font-size',
+  $input-size-large-font-size,
+  'font-size-body-3'
+);
+$input-size-mini-font-size: theme-runtime.token(
+  'input',
+  'input-size-mini-font-size',
+  $input-size-mini-font-size,
+  'font-size-body-1'
+);
+$input-font-tip-size: theme-runtime.token(
+  'input',
+  'input-font-tip-size',
+  $input-font-tip-size,
+  'font-size-body-1'
+);
+$input-size-mini-icon-suffix-size: theme-runtime.token(
+  'input',
+  'input-size-mini-icon-suffix-size',
+  $input-size-mini-icon-suffix-size,
+  'size-3'
+);
+$input-size-small-icon-suffix-size: theme-runtime.token(
+  'input',
+  'input-size-small-icon-suffix-size',
+  $input-size-small-icon-suffix-size
+);
+$input-size-default-icon-suffix-size: theme-runtime.token(
+  'input',
+  'input-size-default-icon-suffix-size',
+  $input-size-default-icon-suffix-size
+);
+$input-size-large-icon-suffix-size: theme-runtime.token(
+  'input',
+  'input-size-large-icon-suffix-size',
+  $input-size-large-icon-suffix-size
+);
+$input-size-mini-icon-addon-size: theme-runtime.token(
+  'input',
+  'input-size-mini-icon-addon-size',
+  $input-size-mini-icon-addon-size,
+  'size-3'
+);
+$input-size-small-icon-addon-size: theme-runtime.token(
+  'input',
+  'input-size-small-icon-addon-size',
+  $input-size-small-icon-addon-size
+);
+$input-size-default-icon-addon-size: theme-runtime.token(
+  'input',
+  'input-size-default-icon-addon-size',
+  $input-size-default-icon-addon-size
+);
+$input-size-large-icon-addon-size: theme-runtime.token(
+  'input',
+  'input-size-large-icon-addon-size',
+  $input-size-large-icon-addon-size
+);
+$input-size-icon-clear: theme-runtime.token(
+  'input',
+  'input-size-icon-clear',
+  $input-size-icon-clear,
+  'size-3'
+);
+$input-color-suffix-text: theme-runtime.token(
+  'input',
+  'input-color-suffix-text',
+  $input-color-suffix-text
+);
+$input-color-tip-text: theme-runtime.token('input', 'input-color-tip-text', $input-color-tip-text);
+$input-color-icon-clear: theme-runtime.token(
+  'input',
+  'input-color-icon-clear',
+  $input-color-icon-clear
+);
+$input-color-icon-clear-bg_hover: theme-runtime.token(
+  'input',
+  'input-color-icon-clear-bg-hover',
+  $input-color-icon-clear-bg_hover
+);
+$search-color-icon: theme-runtime.token('input', 'search-color-icon', $search-color-icon);
+$search-size-icon: theme-runtime.token('input', 'search-size-icon', $search-size-icon);
+$input-margin-left-clear-btn: theme-runtime.token(
+  'input',
+  'input-margin-left-clear-btn',
+  $input-margin-left-clear-btn,
+  'spacing-6'
+);
+$input-spacing-clear-icon-right: theme-runtime.token(
+  'input',
+  'input-spacing-clear-icon-right',
+  $input-spacing-clear-icon-right,
+  'spacing-4'
+);
+$input-padding-word-limit-left: theme-runtime.token(
+  'input',
+  'input-padding-word-limit-left',
+  $input-padding-word-limit-left,
+  'spacing-4'
+);
+$textarea-font-size: theme-runtime.token(
+  'input',
+  'textarea-font-size',
+  $textarea-font-size,
+  'font-size-body-3'
+);
+$textarea-font-tip-size: theme-runtime.token(
+  'input',
+  'textarea-font-tip-size',
+  $textarea-font-tip-size,
+  'font-size-body-1'
+);
+$textarea-layout-tip-bottom: theme-runtime.token(
+  'input',
+  'textarea-layout-tip-bottom',
+  $textarea-layout-tip-bottom,
+  'spacing-3'
+);
+$textarea-size-min-height: theme-runtime.token(
+  'input',
+  'textarea-size-min-height',
+  $textarea-size-min-height,
+  'size-default'
+);
+$textarea-size-icon-clear: theme-runtime.token(
+  'input',
+  'textarea-size-icon-clear',
+  $textarea-size-icon-clear,
+  'font-size-body-1'
+);
+$textarea-layout-top-icon-clear: theme-runtime.token(
+  'input',
+  'textarea-layout-top-icon-clear',
+  $textarea-layout-top-icon-clear,
+  'spacing-5'
+);
+$password-color-eye-icon: theme-runtime.token(
+  'input',
+  'password-color-eye-icon',
+  $password-color-eye-icon
+);
+$password-size-eye-icon: theme-runtime.token(
+  'input',
+  'password-size-eye-icon',
+  $password-size-eye-icon,
+  'size-3'
+);
+$input-group-border-radius_compact: theme-runtime.token(
+  'input',
+  'input-group-border-radius-compact',
+  $input-group-border-radius_compact
+);
+$input-group-border-separator-width: theme-runtime.token(
+  'input',
+  'input-group-border-separator-width',
+  $input-group-border-separator-width,
+  'border-1'
+);
+$input-group-color-separator-border: theme-runtime.token(
+  'input',
+  'input-group-color-separator-border',
+  $input-group-color-separator-border
+);
+$input-size-medium-font-size: theme-runtime.token(
+  'input',
+  'input-size-medium-font-size',
+  $input-size-default-font-size
+);
+$input-feedback-icon-color_success: theme-runtime.token(
+  'input',
+  'input-feedback-icon-color-success',
+  $input-feedback-icon-color_success,
+  'color-success-6'
+);
+$input-feedback-icon-color_error: theme-runtime.token(
+  'input',
+  'input-feedback-icon-color-error',
+  $input-feedback-icon-color_error,
+  'color-danger-6'
+);
+$input-feedback-icon-color_warning: theme-runtime.token(
+  'input',
+  'input-feedback-icon-color-warning',
+  $input-feedback-icon-color_warning,
+  'color-warning-6'
+);
+$input-feedback-icon-color_validating: theme-runtime.token(
+  'input',
+  'input-feedback-icon-color-validating',
+  $input-feedback-icon-color_validating,
+  'color-primary-6'
+);

package/es/input-mask/style/index.css

@@ -16,5 +16,5 @@
 /******** radius *******/
 /********* icon hover *********/
 .sd-input-mask .sd-input {
-  font-variant-numeric: tabular-nums;
+  font-variant-numeric: var(--component-input-mask-input-mask-font-variant-numeric, var(--component-input-mask-font-variant-numeric, tabular-nums));
 }

package/es/input-mask/style/token.scss

@@ -1,5 +1,13 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
 
 $input-mask-font-variant-numeric: tabular-nums;
+
+// @generated runtime tokens — pnpm theme:generate
+$input-mask-font-variant-numeric: theme-runtime.token(
+  'input-mask',
+  'input-mask-font-variant-numeric',
+  $input-mask-font-variant-numeric
+);

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

@@ -24,7 +24,7 @@
   position: relative;
   box-sizing: border-box;
   width: 100%;
-  border-radius: var(--sd-border-radius-small);
+  border-radius: var(--component-input-number-input-number-border-radius, var(--component-input-number-border-radius, var(--sd-border-radius-small)));
 }
 .sd-input-number-step-button {
   display: flex;
@@ -32,28 +32,28 @@
   justify-content: center;
   box-sizing: border-box;
   padding: 0;
-  color: var(--sd-color-text-2);
-  background-color: var(--sd-color-fill-2);
+  color: var(--component-input-number-input-number-step-button-color, var(--component-input-number-step-button-color, var(--sd-color-text-2)));
+  background-color: var(--component-input-number-input-number-step-button-color-bg-default, var(--component-input-number-step-button-color-bg-default, var(--sd-color-fill-2)));
   cursor: pointer;
   user-select: none;
   transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), 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), opacity 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-input-number-step-button:hover {
-  background-color: var(--sd-color-fill-3);
-  border-color: var(--sd-color-fill-3);
+  background-color: var(--component-input-number-input-number-step-button-color-bg-default-hover, var(--component-input-number-step-button-color-bg-default-hover, var(--sd-color-fill-3)));
+  border-color: var(--component-input-number-input-number-step-button-color-bg-default-hover, var(--component-input-number-step-button-color-bg-default-hover, var(--sd-color-fill-3)));
 }
 .sd-input-number-step-button:active {
-  background-color: var(--sd-color-fill-4);
-  border-color: var(--sd-color-fill-4);
+  background-color: var(--component-input-number-input-number-step-button-color-bg-default-active, var(--component-input-number-step-button-color-bg-default-active, var(--sd-color-fill-4)));
+  border-color: var(--component-input-number-input-number-step-button-color-bg-default-active, var(--component-input-number-step-button-color-bg-default-active, var(--sd-color-fill-4)));
 }
 .sd-input-number-step-button:disabled {
-  color: var(--sd-color-text-4);
-  background-color: var(--sd-color-fill-2);
+  color: var(--component-input-number-input-number-step-button-color-disabled, var(--component-input-number-step-button-color-disabled, var(--sd-color-text-4)));
+  background-color: var(--component-input-number-input-number-step-button-color-bg-disabled, var(--component-input-number-step-button-color-bg-disabled, var(--sd-color-fill-2)));
   cursor: not-allowed;
 }
 .sd-input-number-step-button:disabled:hover, .sd-input-number-step-button:disabled:active {
-  background-color: var(--sd-color-fill-2);
-  border-color: var(--sd-color-neutral-3);
+  background-color: var(--component-input-number-input-number-step-button-color-bg-disabled-hover, var(--component-input-number-step-button-color-bg-disabled-hover, var(--sd-color-fill-2)));
+  border-color: var(--component-input-number-input-number-step-button-color-border, var(--component-input-number-step-button-color-border, var(--sd-color-neutral-3)));
 }
 .sd-input-number .sd-input-wrapper {
   position: relative;
@@ -68,7 +68,7 @@
   bottom: 4px;
   width: 18px;
   overflow: hidden;
-  border-radius: 1px;
+  border-radius: var(--component-input-number-input-number-step-layer-border-radius, var(--component-input-number-step-layer-border-radius, 1px));
   opacity: 0;
   transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), 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), opacity 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
@@ -77,7 +77,7 @@
   height: 50%;
   font-size: 10px;
   border: none;
-  border-color: var(--sd-color-neutral-3);
+  border-color: var(--component-input-number-input-number-step-button-color-border, var(--component-input-number-step-button-color-border, var(--sd-color-neutral-3)));
 }
 .sd-input-number-mode-embed .sd-input-suffix {
   justify-content: flex-end;
@@ -100,29 +100,29 @@
   pointer-events: none;
 }
 .sd-input-number-mode-embed.sd-input-wrapper:not(.sd-input-focus) .sd-input-number-step-button:not(.sd-input-number-step-button-disabled):hover {
-  background-color: var(--sd-color-fill-4);
+  background-color: var(--component-input-number-input-number-step-button-color-bg-default-active, var(--component-input-number-step-button-color-bg-default-active, var(--sd-color-fill-4)));
 }
 .sd-input-number-mode-button .sd-input-prepend, .sd-input-number-mode-button .sd-input-append {
   padding: 0;
   border: none;
 }
 .sd-input-number-mode-button .sd-input-prepend .sd-input-number-step-button {
-  border-right: 1px solid transparent;
+  border-right: var(--component-input-input-border-addon-separator-width, var(--component-input-border-addon-separator-width, var(--border-1, 1px))) solid transparent;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 .sd-input-number-mode-button .sd-input-prepend .sd-input-number-step-button:not(.sd-input-number-mode-button .sd-input-prepend .sd-input-number-step-button:active) {
-  border-right-color: var(--sd-color-neutral-3);
+  border-right-color: var(--component-input-number-input-number-step-button-color-border, var(--component-input-number-step-button-color-border, var(--sd-color-neutral-3)));
 }
 .sd-input-number-mode-button .sd-input-append .sd-input-number-step-button {
-  border-left: 1px solid transparent;
+  border-left: var(--component-input-input-border-addon-separator-width, var(--component-input-border-addon-separator-width, var(--border-1, 1px))) solid transparent;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 .sd-input-number-mode-button .sd-input-append .sd-input-number-step-button:not(.sd-input-number-mode-button .sd-input-append .sd-input-number-step-button:active) {
-  border-left-color: var(--sd-color-neutral-3);
+  border-left-color: var(--component-input-number-input-number-step-button-color-border, var(--component-input-number-step-button-color-border, var(--sd-color-neutral-3)));
 }
 .sd-input-number-readonly .sd-input-number-step-button {
-  color: var(--sd-color-text-4);
+  color: var(--component-input-number-input-number-step-button-color-disabled, var(--component-input-number-step-button-color-disabled, var(--sd-color-text-4)));
   pointer-events: none;
 }

package/es/input-number/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';
@@ -51,3 +52,84 @@ $input-number-step-button-color-bg_disabled_hover: var(
 $input-number-step-button-color-bg_disabled_active: var(
   string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2')
 );
+
+// @generated runtime tokens — pnpm theme:generate
+$input-number-border-radius: theme-runtime.token(
+  'input-number',
+  'input-number-border-radius',
+  $input-number-border-radius
+);
+$input-number-step-layer-border-radius: theme-runtime.token(
+  'input-number',
+  'input-number-step-layer-border-radius',
+  $input-number-step-layer-border-radius
+);
+$input-number-size-mini-step-button-width: theme-runtime.token(
+  'input-number',
+  'input-number-size-mini-step-button-width',
+  $input-number-size-mini-step-button-width,
+  'size-mini'
+);
+$input-number-size-small-step-button-width: theme-runtime.token(
+  'input-number',
+  'input-number-size-small-step-button-width',
+  $input-number-size-small-step-button-width,
+  'size-small'
+);
+$input-number-size-default-step-button-width: theme-runtime.token(
+  'input-number',
+  'input-number-size-default-step-button-width',
+  $input-number-size-default-step-button-width,
+  'size-default'
+);
+$input-number-size-large-step-button-width: theme-runtime.token(
+  'input-number',
+  'input-number-size-large-step-button-width',
+  $input-number-size-large-step-button-width,
+  'size-large'
+);
+$input-number-step-button-color: theme-runtime.token(
+  'input-number',
+  'input-number-step-button-color',
+  $input-number-step-button-color
+);
+$input-number-step-button-color_disabled: theme-runtime.token(
+  'input-number',
+  'input-number-step-button-color-disabled',
+  $input-number-step-button-color_disabled
+);
+$input-number-step-button-color-border: theme-runtime.token(
+  'input-number',
+  'input-number-step-button-color-border',
+  $input-number-step-button-color-border
+);
+$input-number-step-button-color-bg_default: theme-runtime.token(
+  'input-number',
+  'input-number-step-button-color-bg-default',
+  $input-number-step-button-color-bg_default
+);
+$input-number-step-button-color-bg_default_hover: theme-runtime.token(
+  'input-number',
+  'input-number-step-button-color-bg-default-hover',
+  $input-number-step-button-color-bg_default_hover
+);
+$input-number-step-button-color-bg_default_active: theme-runtime.token(
+  'input-number',
+  'input-number-step-button-color-bg-default-active',
+  $input-number-step-button-color-bg_default_active
+);
+$input-number-step-button-color-bg_disabled: theme-runtime.token(
+  'input-number',
+  'input-number-step-button-color-bg-disabled',
+  $input-number-step-button-color-bg_disabled
+);
+$input-number-step-button-color-bg_disabled_hover: theme-runtime.token(
+  'input-number',
+  'input-number-step-button-color-bg-disabled-hover',
+  $input-number-step-button-color-bg_disabled_hover
+);
+$input-number-step-button-color-bg_disabled_active: theme-runtime.token(
+  'input-number',
+  'input-number-step-button-color-bg-disabled-active',
+  $input-number-step-button-color-bg_disabled_active
+);