@sdata/web-vue 4.7.1 → 5.0.0

package/es/dropdown/style/index.css

@@ -25,10 +25,10 @@
 .sd-dropdown {
   box-sizing: border-box;
   padding: 4px 0;
-  background-color: var(--sd-color-bg-popup);
-  border: 1px solid var(--sd-color-fill-3);
-  border-radius: var(--sd-border-radius-medium);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
+  background-color: var(--component-dropdown-dropdown-color-bg, var(--component-dropdown-color-bg, var(--sd-color-bg-popup)));
+  border: 1px solid var(--component-dropdown-dropdown-color-border, var(--component-dropdown-color-border, var(--sd-color-fill-3)));
+  border-radius: var(--component-dropdown-dropdown-border-radius, var(--component-dropdown-border-radius, var(--sd-border-radius-medium)));
+  box-shadow: var(--component-dropdown-dropdown-box-shadow, var(--component-dropdown-box-shadow, 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08)));
 }
 .sd-dropdown-list {
   margin-top: 0;
@@ -37,7 +37,7 @@
   list-style: none;
 }
 .sd-dropdown-list-wrapper {
-  max-height: 200px;
+  max-height: var(--component-dropdown-dropdown-max-height, var(--component-dropdown-max-height, var(--size-50, 200px)));
   overflow-y: auto;
 }
 .sd-dropdown-option {
@@ -47,12 +47,12 @@
   align-items: center;
   box-sizing: border-box;
   width: 100%;
-  padding: 0 12px;
-  color: var(--sd-color-text-1);
-  font-size: 14px;
-  line-height: 36px;
+  padding: 0 var(--component-dropdown-dropdown-option-padding-horizontal, var(--component-dropdown-option-padding-horizontal, var(--spacing-6, 12px)));
+  color: var(--component-dropdown-dropdown-option-color-text-default, var(--component-dropdown-option-color-text-default, var(--sd-color-text-1)));
+  font-size: var(--component-dropdown-dropdown-font-size, var(--component-dropdown-font-size, var(--font-size-body-3, 14px)));
+  line-height: var(--component-dropdown-dropdown-option-height, var(--component-dropdown-option-height, var(--size-9, 36px)));
   text-align: left;
-  background-color: transparent;
+  background-color: var(--component-dropdown-dropdown-option-color-bg-default, var(--component-dropdown-option-color-bg-default, var(--color-transparent, var(--sd-color-transparent, transparent))));
   cursor: pointer;
 }
 .sd-dropdown-option-content {
@@ -63,14 +63,15 @@
 .sd-dropdown-option-has-suffix {
   justify-content: space-between;
 }
-.sd-dropdown-option-active, .sd-dropdown-option:not(.sd-dropdown-option-disabled):hover {
-  color: var(--sd-color-text-1);
-  background-color: var(--sd-color-fill-2);
+.sd-dropdown-option-active, .sd-dropdown-option:not(.sd-dropdown-option-disabled):hover, .sd-dropdown-option:not(.sd-dropdown-option-disabled):focus-visible {
+  color: var(--component-dropdown-dropdown-option-color-text-hover, var(--component-dropdown-option-color-text-hover, var(--sd-color-text-1)));
+  background-color: var(--component-dropdown-dropdown-option-color-bg-hover, var(--component-dropdown-option-color-bg-hover, var(--sd-color-fill-2)));
+  outline: 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);
 }
 .sd-dropdown-option-disabled {
-  color: var(--sd-color-text-4);
-  background-color: transparent;
+  color: var(--component-dropdown-dropdown-option-color-text-disabled, var(--component-dropdown-option-color-text-disabled, var(--sd-color-text-4)));
+  background-color: var(--component-dropdown-dropdown-option-color-bg-disabled, var(--component-dropdown-option-color-bg-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
   cursor: not-allowed;
 }
 .sd-dropdown-option-icon {
@@ -78,19 +79,19 @@
   margin-right: 8px;
 }
 .sd-dropdown-option-suffix {
-  margin-left: 12px;
+  margin-left: var(--component-dropdown-dropdown-margin-left-suffix-icon, var(--component-dropdown-margin-left-suffix-icon, var(--spacing-6, 12px)));
 }
 .sd-dropdown-group:first-child .sd-dropdown-group-title {
-  margin-top: 8px;
+  margin-top: var(--component-dropdown-dropdown-group-title-margin-top, var(--component-dropdown-group-title-margin-top, var(--spacing-4, 8px)));
 }
 .sd-dropdown-group-title {
   box-sizing: border-box;
   width: 100%;
-  margin-top: 8px;
-  padding: 0 12px;
-  color: var(--sd-color-text-3);
-  font-size: 12px;
-  line-height: 20px;
+  margin-top: var(--component-dropdown-dropdown-group-title-margin-top, var(--component-dropdown-group-title-margin-top, var(--spacing-4, 8px)));
+  padding: 0 var(--component-dropdown-dropdown-group-title-padding-horizontal, var(--component-dropdown-group-title-padding-horizontal, var(--spacing-6, 12px)));
+  color: var(--component-dropdown-dropdown-group-title-color-text, var(--component-dropdown-group-title-color-text, var(--sd-color-text-3)));
+  font-size: var(--component-dropdown-dropdown-group-title-font-size, var(--component-dropdown-group-title-font-size, var(--font-size-body-1, 12px)));
+  line-height: var(--component-dropdown-dropdown-group-title-height, var(--component-dropdown-group-title-height, var(--size-5, 20px)));
   cursor: default;
   overflow: hidden;
   white-space: nowrap;
@@ -103,5 +104,5 @@
   padding-bottom: 0;
 }
 .sd-dropdown-footer {
-  border-top: 1px solid var(--sd-color-fill-3);
+  border-top: 1px solid var(--component-dropdown-dropdown-color-border, var(--component-dropdown-color-border, var(--sd-color-fill-3)));
 }

package/es/dropdown/style/index.scss

@@ -51,11 +51,13 @@ $dropdown-prefix-cls: string.unquote('#{theme.$prefix}-dropdown');
       justify-content: space-between;
     }
 
-    // hover
+    // 键盘焦点（程序化聚焦后属于 focus-visible）与 hover 保持同一视觉
     &-active,
-    &:not(#{&}-disabled):hover {
+    &:not(#{&}-disabled):hover,
+    &:not(#{&}-disabled):focus-visible {
       color: $dropdown-option-color-text_hover;
       background-color: $dropdown-option-color-bg_hover;
+      outline: none;
       transition:
         color theme.$transition-duration-1 theme.$transition-timing-function-standard,
         background-color theme.$transition-duration-1 theme.$transition-timing-function-standard;

package/es/dropdown/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';
@@ -50,3 +51,125 @@ $dropdown-group-title-font-size: global.$font-size-body-1;
 $dropdown-group-title-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
 
 $dropdown-margin-left-suffix-icon: global.$spacing-6;
+
+// @generated runtime tokens — pnpm theme:generate
+$dropdown-max-height: theme-runtime.token(
+  'dropdown',
+  'dropdown-max-height',
+  $dropdown-max-height,
+  'size-50'
+);
+$dropdown-border-radius: theme-runtime.token(
+  'dropdown',
+  'dropdown-border-radius',
+  $dropdown-border-radius
+);
+$dropdown-font-size: theme-runtime.token(
+  'dropdown',
+  'dropdown-font-size',
+  $dropdown-font-size,
+  'font-size-body-3'
+);
+$dropdown-color-bg: theme-runtime.token('dropdown', 'dropdown-color-bg', $dropdown-color-bg);
+$dropdown-color-border: theme-runtime.token(
+  'dropdown',
+  'dropdown-color-border',
+  $dropdown-color-border
+);
+$dropdown-box-shadow: theme-runtime.token('dropdown', 'dropdown-box-shadow', $dropdown-box-shadow);
+$dropdown-option-height: theme-runtime.token(
+  'dropdown',
+  'dropdown-option-height',
+  $dropdown-option-height,
+  'size-9'
+);
+$dropdown-option-padding-horizontal: theme-runtime.token(
+  'dropdown',
+  'dropdown-option-padding-horizontal',
+  $dropdown-option-padding-horizontal,
+  'spacing-6'
+);
+$dropdown-option-font-weight_selected: theme-runtime.token(
+  'dropdown',
+  'dropdown-option-font-weight-selected',
+  $dropdown-option-font-weight_selected,
+  'font-weight-500'
+);
+$dropdown-option-color-bg_default: theme-runtime.token(
+  'dropdown',
+  'dropdown-option-color-bg-default',
+  $dropdown-option-color-bg_default,
+  'color-transparent'
+);
+$dropdown-option-color-bg_hover: theme-runtime.token(
+  'dropdown',
+  'dropdown-option-color-bg-hover',
+  $dropdown-option-color-bg_hover
+);
+$dropdown-option-color-bg_selected: theme-runtime.token(
+  'dropdown',
+  'dropdown-option-color-bg-selected',
+  $dropdown-option-color-bg_selected,
+  'color-transparent'
+);
+$dropdown-option-color-bg_disabled: theme-runtime.token(
+  'dropdown',
+  'dropdown-option-color-bg-disabled',
+  $dropdown-option-color-bg_disabled,
+  'color-transparent'
+);
+$dropdown-option-color-text_default: theme-runtime.token(
+  'dropdown',
+  'dropdown-option-color-text-default',
+  $dropdown-option-color-text_default
+);
+$dropdown-option-color-text_hover: theme-runtime.token(
+  'dropdown',
+  'dropdown-option-color-text-hover',
+  $dropdown-option-color-text_hover
+);
+$dropdown-option-color-text_selected: theme-runtime.token(
+  'dropdown',
+  'dropdown-option-color-text-selected',
+  $dropdown-option-color-text_selected
+);
+$dropdown-option-color-text_disabled: theme-runtime.token(
+  'dropdown',
+  'dropdown-option-color-text-disabled',
+  $dropdown-option-color-text_disabled
+);
+$dropdown-group-title-height: theme-runtime.token(
+  'dropdown',
+  'dropdown-group-title-height',
+  $dropdown-group-title-height,
+  'size-5'
+);
+$dropdown-group-title-padding-horizontal: theme-runtime.token(
+  'dropdown',
+  'dropdown-group-title-padding-horizontal',
+  $dropdown-group-title-padding-horizontal,
+  'spacing-6'
+);
+$dropdown-group-title-margin-top: theme-runtime.token(
+  'dropdown',
+  'dropdown-group-title-margin-top',
+  $dropdown-group-title-margin-top,
+  'spacing-4'
+);
+$dropdown-group-title-font-size: theme-runtime.token(
+  'dropdown',
+  'dropdown-group-title-font-size',
+  $dropdown-group-title-font-size,
+  'font-size-body-1'
+);
+$dropdown-group-title-color-text: theme-runtime.token(
+  'dropdown',
+  'dropdown-group-title-color-text',
+  $dropdown-group-title-color-text
+);
+$dropdown-margin-left-suffix-icon: theme-runtime.token(
+  'dropdown',
+  'dropdown-margin-left-suffix-icon',
+  $dropdown-margin-left-suffix-icon,
+  'spacing-6'
+);

package/es/ellipsis/ellipsis.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ import { RichLineClamp } from "../clamp/index.js";
 import Tooltip from "../tooltip/index.js";
 import { computed, createBlock, createElementBlock, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, openBlock, renderSlot, resolveDynamicComponent, shallowRef, unref, watch, withCtx } from "vue";
 //#region components/ellipsis/ellipsis.vue?vue&type=script&setup=true&lang.ts
-var _excluded = ["disabled"];
+var _excluded = ["always", "disabled"];
 var INTERACTIVE_SELECTOR = "a,button,input,textarea,select,[role=\"button\"]";
 var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
 	name: "Ellipsis",
@@ -50,11 +50,11 @@ var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		});
 		const tooltipConfig = computed(() => isObject(props.tooltip) ? props.tooltip : {});
 		const tooltipBindings = computed(() => {
-			const _tooltipConfig$value = tooltipConfig.value, { disabled: _disabled } = _tooltipConfig$value;
+			const _tooltipConfig$value = tooltipConfig.value, { always: _always, disabled: _disabled } = _tooltipConfig$value;
 			return _objectWithoutProperties(_tooltipConfig$value, _excluded);
 		});
 		const enableTooltip = computed(() => props.tooltip !== false);
-		const tooltipDisabled = computed(() => !isEllipsis.value || expanded.value || Boolean(tooltipConfig.value.disabled));
+		const tooltipDisabled = computed(() => expanded.value || Boolean(tooltipConfig.value.disabled) || !isEllipsis.value && !tooltipConfig.value.always);
 		const isExpandable = computed(() => props.expandTrigger === "click" && (isEllipsis.value || expanded.value));
 		const rootCls = computed(() => [prefixCls, {
 			[`${prefixCls}--single-line`]: !isLineClamp.value && !expanded.value,

package/es/ellipsis/interface.d.ts

@@ -12,4 +12,5 @@ export interface EllipsisTooltipProps extends Omit<Partial<TriggerProps>, 'popup
     arrowStyle?: CSSProperties;
     renderToBody?: boolean;
     disabled?: boolean;
+    always?: boolean;
 }

package/es/ellipsis/style/index.css

@@ -17,8 +17,8 @@
 /********* icon hover *********/
 .sd-ellipsis {
   display: inline-block;
-  max-width: 100%;
-  color: inherit;
+  max-width: var(--component-ellipsis-ellipsis-max-width, var(--component-ellipsis-max-width, 100%));
+  color: var(--component-ellipsis-ellipsis-color-text, var(--component-ellipsis-color-text, inherit));
   vertical-align: bottom;
 }
 .sd-ellipsis--single-line {

package/es/ellipsis/style/token.scss

@@ -1,5 +1,10 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as *;
 
 $ellipsis-max-width: 100%;
 
 $ellipsis-color-text: inherit;
+
+// @generated runtime tokens — pnpm theme:generate
+$ellipsis-max-width: theme-runtime.token('ellipsis', 'ellipsis-max-width', $ellipsis-max-width);
+$ellipsis-color-text: theme-runtime.token('ellipsis', 'ellipsis-color-text', $ellipsis-color-text);

package/es/empty/style/index.css

@@ -18,19 +18,19 @@
 .sd-empty {
   box-sizing: border-box;
   width: 100%;
-  padding: 10px 0;
+  padding: var(--component-empty-empty-spacing-padding, var(--component-empty-spacing-padding, var(--spacing-5, 10px))) 0;
   text-align: center;
 }
 .sd-empty-image {
-  margin-bottom: 4px;
-  color: rgb(var(--sd-gray-5));
-  font-size: 48px;
+  margin-bottom: var(--component-empty-empty-spacing-image-margin-bottom, var(--component-empty-spacing-image-margin-bottom, var(--spacing-2, 4px)));
+  color: var(--component-empty-empty-color-icon, var(--component-empty-color-icon, rgb(var(--sd-gray-5))));
+  font-size: var(--component-empty-empty-font-size-image, var(--component-empty-font-size-image, var(--size-12, 48px)));
   line-height: 1;
 }
 .sd-empty-image img {
-  height: 80px;
+  height: var(--component-empty-empty-size-img-height, var(--component-empty-size-img-height, var(--size-20, 80px)));
 }
 .sd-empty .sd-empty-description {
-  color: rgb(var(--sd-gray-5));
-  font-size: 14px;
+  color: var(--component-empty-empty-color-text, var(--component-empty-color-text, rgb(var(--sd-gray-5))));
+  font-size: var(--component-empty-empty-font-size-text, var(--component-empty-font-size-text, var(--font-size-body-3, 14px)));
 }

package/es/empty/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';
@@ -19,3 +20,37 @@ $empty-size-img-height: global.$size-20;
 $empty-color-icon: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gray-5')));
 
 $empty-font-size-text: global.$font-size-body-3;
+
+// @generated runtime tokens — pnpm theme:generate
+$empty-spacing-padding: theme-runtime.token(
+  'empty',
+  'empty-spacing-padding',
+  $empty-spacing-padding,
+  'spacing-5'
+);
+$empty-color-text: theme-runtime.token('empty', 'empty-color-text', $empty-color-text);
+$empty-font-size-image: theme-runtime.token(
+  'empty',
+  'empty-font-size-image',
+  $empty-font-size-image,
+  'size-12'
+);
+$empty-spacing-image-margin-bottom: theme-runtime.token(
+  'empty',
+  'empty-spacing-image-margin-bottom',
+  $empty-spacing-image-margin-bottom,
+  'spacing-2'
+);
+$empty-size-img-height: theme-runtime.token(
+  'empty',
+  'empty-size-img-height',
+  $empty-size-img-height,
+  'size-20'
+);
+$empty-color-icon: theme-runtime.token('empty', 'empty-color-icon', $empty-color-icon);
+$empty-font-size-text: theme-runtime.token(
+  'empty',
+  'empty-font-size-text',
+  $empty-font-size-text,
+  'font-size-body-3'
+);

package/es/file-previewer/style/index.css

@@ -19,7 +19,7 @@
   position: relative;
   width: 100%;
   height: 100%;
-  min-height: 240px;
+  min-height: var(--component-file-previewer-file-previewer-size-inline-min-height, var(--component-file-previewer-size-inline-min-height, 240px));
 }
 .sd-file-previewer-fullscreen {
   inset: 0;
@@ -27,12 +27,12 @@
 }
 .sd-file-previewer-inline {
   overflow: hidden;
-  color: var(--sd-color-text-1);
+  color: var(--component-file-previewer-file-previewer-color-content-text, var(--component-file-previewer-color-content-text, var(--sd-color-text-1)));
 }
 .sd-file-previewer-mask {
   position: absolute;
   inset: 0;
-  background-color: var(--sd-color-mask-bg);
+  background-color: var(--component-file-previewer-file-previewer-color-mask-bg, var(--component-file-previewer-color-mask-bg, var(--sd-color-mask-bg)));
 }
 .sd-file-previewer-content {
   z-index: 1;
@@ -43,27 +43,27 @@
 }
 .sd-file-previewer-content-fullscreen {
   position: absolute;
-  inset: 40px;
+  inset: var(--component-file-previewer-file-previewer-spacing-viewport-padding, var(--component-file-previewer-spacing-viewport-padding, 40px));
 }
 .sd-file-previewer-content-inline {
   position: relative;
   width: 100%;
   height: 100%;
-  min-height: 240px;
+  min-height: var(--component-file-previewer-file-previewer-size-inline-min-height, var(--component-file-previewer-size-inline-min-height, 240px));
 }
 .sd-file-previewer-fullscreen .sd-file-previewer-content-audio {
   inset: 50% auto auto 50%;
-  width: min(560px, 100% - 40px * 2);
-  max-height: 78vh;
-  background: var(--sd-color-bg-2);
-  border-radius: var(--sd-border-radius-medium);
+  width: min(var(--component-file-previewer-file-previewer-size-audio-width, var(--component-file-previewer-size-audio-width, 560px)), 100% - var(--component-file-previewer-file-previewer-spacing-viewport-padding, var(--component-file-previewer-spacing-viewport-padding, 40px)) * 2);
+  max-height: var(--component-file-previewer-file-previewer-size-media-height, var(--component-file-previewer-size-media-height, 78vh));
+  background: var(--component-file-previewer-file-previewer-color-content-bg, var(--component-file-previewer-color-content-bg, var(--sd-color-bg-2)));
+  border-radius: var(--component-file-previewer-file-previewer-radius-panel, var(--component-file-previewer-radius-panel, var(--sd-border-radius-medium)));
   transform: translate(-50%, -50%);
 }
 .sd-file-previewer-header {
   box-sizing: border-box;
-  padding: 12px 20px;
-  color: var(--sd-color-text-1);
-  font-size: 16px;
+  padding: var(--component-file-previewer-file-previewer-spacing-header-padding-vertical, var(--component-file-previewer-spacing-header-padding-vertical, 12px)) var(--component-file-previewer-file-previewer-spacing-header-padding-horizontal, var(--component-file-previewer-spacing-header-padding-horizontal, 20px));
+  color: var(--component-file-previewer-file-previewer-color-content-text, var(--component-file-previewer-color-content-text, var(--sd-color-text-1)));
+  font-size: var(--component-file-previewer-file-previewer-font-size-title, var(--component-file-previewer-font-size-title, 16px));
 }
 .sd-file-previewer-title {
   display: block;
@@ -92,8 +92,8 @@
   min-height: 0 !important;
 }
 .sd-file-previewer-video-player {
-  max-width: 1180px;
-  max-height: 78vh;
+  max-width: var(--component-file-previewer-file-previewer-size-media-width, var(--component-file-previewer-size-media-width, 1180px));
+  max-height: var(--component-file-previewer-file-previewer-size-media-height, var(--component-file-previewer-size-media-height, 78vh));
 }
 .sd-file-previewer-media-skin {
   display: block;
@@ -115,7 +115,7 @@
 .sd-file-previewer-audio-panel {
   box-sizing: border-box;
   width: 100%;
-  padding: 20px;
+  padding: var(--component-file-previewer-file-previewer-spacing-panel-padding, var(--component-file-previewer-spacing-panel-padding, 20px));
 }
 .sd-file-previewer-audio-player, .sd-file-previewer-audio {
   display: block;
@@ -124,7 +124,7 @@
 .sd-file-previewer-pdf {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--component-file-previewer-file-previewer-spacing-pdf-gap, var(--component-file-previewer-spacing-pdf-gap, 6px));
   width: 100%;
   height: 100%;
 }
@@ -136,8 +136,8 @@
   min-width: 0;
   min-height: 0;
   overflow: auto;
-  background: var(--sd-color-bg-1);
-  border-radius: var(--sd-border-radius-medium);
+  background: var(--component-file-previewer-file-previewer-color-pdf-canvas-bg, var(--component-file-previewer-color-pdf-canvas-bg, var(--sd-color-bg-1)));
+  border-radius: var(--component-file-previewer-file-previewer-radius-pdf-canvas, var(--component-file-previewer-radius-pdf-canvas, var(--sd-border-radius-medium)));
 }
 .sd-file-previewer-pdf-canvas {
   display: block;
@@ -145,51 +145,51 @@
 .sd-file-previewer-pdf-toolbar {
   display: flex;
   flex-shrink: 0;
-  gap: 6px;
+  gap: var(--component-file-previewer-file-previewer-spacing-pdf-toolbar-gap, var(--component-file-previewer-spacing-pdf-toolbar-gap, 6px));
   align-items: center;
   justify-content: center;
-  padding: 4px;
-  color: var(--sd-color-white);
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: var(--sd-border-radius-medium);
+  padding: var(--component-file-previewer-file-previewer-spacing-pdf-toolbar-padding, var(--component-file-previewer-spacing-pdf-toolbar-padding, 4px));
+  color: var(--component-file-previewer-file-previewer-color-pdf-toolbar-text, var(--component-file-previewer-color-pdf-toolbar-text, var(--sd-color-white)));
+  background: var(--component-file-previewer-file-previewer-color-pdf-toolbar-bg, var(--component-file-previewer-color-pdf-toolbar-bg, rgba(0, 0, 0, 0.5)));
+  border-radius: var(--component-file-previewer-file-previewer-radius-pdf-canvas, var(--component-file-previewer-radius-pdf-canvas, var(--sd-border-radius-medium)));
 }
 .sd-file-previewer-pdf-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 28px;
-  height: 28px;
-  padding: 0 6px;
+  min-width: var(--component-file-previewer-file-previewer-size-pdf-btn-min-width, var(--component-file-previewer-size-pdf-btn-min-width, 28px));
+  height: var(--component-file-previewer-file-previewer-size-pdf-btn, var(--component-file-previewer-size-pdf-btn, 28px));
+  padding: 0 var(--component-file-previewer-file-previewer-spacing-pdf-toolbar-gap, var(--component-file-previewer-spacing-pdf-toolbar-gap, 6px));
   color: inherit;
-  font-size: 16px;
+  font-size: var(--component-file-previewer-file-previewer-font-size-pdf-btn, var(--component-file-previewer-font-size-pdf-btn, 16px));
   line-height: 1;
   background: transparent;
   border: 0;
-  border-radius: var(--sd-border-radius-small);
+  border-radius: var(--component-file-previewer-file-previewer-radius-pdf-btn, var(--component-file-previewer-radius-pdf-btn, var(--sd-border-radius-small)));
   cursor: pointer;
 }
 .sd-file-previewer-pdf-btn:disabled {
-  color: var(--sd-color-fill-3);
+  color: var(--component-file-previewer-file-previewer-color-pdf-btn-disabled, var(--component-file-previewer-color-pdf-btn-disabled, var(--sd-color-fill-3)));
   cursor: not-allowed;
 }
 .sd-file-previewer-pdf-page {
   min-width: 64px;
-  font-size: 14px;
+  font-size: var(--component-file-previewer-file-previewer-font-size-pdf-page, var(--component-file-previewer-font-size-pdf-page, 14px));
   text-align: center;
 }
 .sd-file-previewer-close-btn {
   position: absolute;
-  top: 36px;
-  right: 36px;
+  top: var(--component-file-previewer-file-previewer-position-close-top, var(--component-file-previewer-position-close-top, 36px));
+  right: var(--component-file-previewer-file-previewer-position-close-right, var(--component-file-previewer-position-close-right, 36px));
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
-  color: var(--sd-color-white);
-  font-size: 14px;
-  background: rgba(0, 0, 0, 0.5);
+  width: var(--component-file-previewer-file-previewer-size-close, var(--component-file-previewer-size-close, 32px));
+  height: var(--component-file-previewer-file-previewer-size-close, var(--component-file-previewer-size-close, 32px));
+  color: var(--component-file-previewer-file-previewer-color-close-text, var(--component-file-previewer-color-close-text, var(--sd-color-white)));
+  font-size: var(--component-file-previewer-file-previewer-size-close-icon, var(--component-file-previewer-size-close-icon, 14px));
+  background: var(--component-file-previewer-file-previewer-color-close-bg, var(--component-file-previewer-color-close-bg, rgba(0, 0, 0, 0.5)));
   border: 0;
   border-radius: 50%;
   cursor: pointer;
@@ -200,11 +200,11 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  width: 48px;
-  height: 48px;
-  color: rgb(var(--sd-primary-6));
-  background-color: #232324;
-  border-radius: var(--sd-border-radius-medium);
+  width: var(--component-file-previewer-file-previewer-size-loading, var(--component-file-previewer-size-loading, 48px));
+  height: var(--component-file-previewer-file-previewer-size-loading, var(--component-file-previewer-size-loading, 48px));
+  color: var(--component-file-previewer-file-previewer-color-loading-text, var(--component-file-previewer-color-loading-text, rgb(var(--sd-primary-6))));
+  background-color: var(--component-file-previewer-file-previewer-color-loading-bg, var(--component-file-previewer-color-loading-bg, #232324));
+  border-radius: var(--component-file-previewer-file-previewer-radius-panel, var(--component-file-previewer-radius-panel, var(--sd-border-radius-medium)));
   position: absolute;
   top: 50%;
   left: 50%;
@@ -212,12 +212,12 @@
 }
 .sd-file-previewer-error {
   z-index: 2;
-  color: var(--sd-color-white);
+  color: var(--component-file-previewer-file-previewer-color-error-text, var(--component-file-previewer-color-error-text, var(--sd-color-white)));
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
 .sd-file-previewer-inline .sd-file-previewer-error {
-  color: var(--sd-color-danger-6);
+  color: var(--component-file-previewer-file-previewer-color-inline-error-text, var(--component-file-previewer-color-inline-error-text, var(--sd-color-danger-6)));
 }