@sms-frontend/components/lib/Image/style/token.less

SMS Design React UI Library.

@image-radius: @radius-small;
// title
@image-font-size-title: @font-size-title-1;
@image-font-weight-title: @font-weight-500;
// description
@image-font-size-description: @font-size-body-3;
@image-color-title_footer_outer-text: var(--color-text-1);
@image-color-title_footer_inner-text: var(--color-white);
@image-color-description_footer_inner-text: var(--color-white);
@image-color-description_footer_outer-text: var(--color-neutral-6);
// actions
@image-spacing-actions-left: @spacing-6;
// actions item
@image-font-size-actions-item: 14px;
@image-padding-actions-item-vertical: @spacing-none;
@image-padding-actions-item-horizontal: @spacing-none;
@image-spacing-actions-item-left: @spacing-6;
@image-radius-actions-item: @radius-small;
@image-color-actions-item_footer_inner_hover-bg: rgba(0, 0, 0, 0.5);
@image-color-actions-item_footer_outer_hover-bg: var(--color-neutral-2);
@image-color-actions-item_trigger-text: var(--color-neutral-8);
@image-color-actions-item_trigger_hover-bg: var(--color-neutral-2);
@image-spacing-actions-trigger-item-vertical: 5px;
@image-spacing-actions-trigger-item-horizontal: 4px;
// footer
@image-color-footer_inner-bg: linear-gradient(360deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
@image-color-footer_inner-text: var(--color-white);
@image-padding-footer_inner_vertical: 9px;
@image-padding-footer_inner_horizontal: 16px;

@image-spacing-footer_inner_simple-vertical: @spacing-6;
@image-spacing-footer_inner_simple-horizontal: @spacing-7;
@image-color-footer_outer-text: var(--color-neutral-8);
@image-spacing-footer-top: @spacing-2;
// error
@image-color-error-bg: var(--color-neutral-1);
@image-color-error-text: var(--color-neutral-4);
@image-font-size-error-icon: 60px;
@image-font-size-error-text: @font-size-body-1;
@image-line-height-error-text: 1.6667;
@image-size-error-min-height: 100px;
@image-spacing-error-padding: @spacing-7;
// loader
@image-color-loader-bg: var(--color-neutral-1);
@image-size-loader-min-height: 100px;
// loader spin
@image-font-size-loader-spin: 32px;
@image-color-loader-spin-text: @color-primary-6;
@image-color-loader-spin-text-text: var(--color-neutral-6);
@image-font-size-loader-spin-text: @font-size-title-1;

// preview mask
@image-preview-color-mask-bg: var(--color-mask-bg);
// preview scale value
@image-preview-size-scale-value-height: 32px;
@image-preview-spacing-scale-value-vertical: 7px;
@image-preview-spacing-scale-value-horizontal: 10px;
@image-preview-font-size-scale-value: @font-size-body-1;
@image-preview-color-scale-value-text: var(--color-white);
@image-preview-color-scale-value-bg: rgba(255, 255, 255, 0.08);
// preview toolbar
@image-preview-color-toolbar-bg: var(--color-bg-2);
@image-preview-radius-toolbar: @radius-medium;
@image-preview-spacing-toolbar-vertical: @spacing-2;
@image-preview-spacing-toolbar-horizontal: @spacing-7;
@image-preview-spacing-toolbar-horizontal_simple: @spacing-2;
@image-preview-spacing-toolbar-vertical_simple: @spacing-2;

@image-preview-position-toolbar-bottom: 46px;
// preview toolbar action
@image-preview-font-size-action: 14px;
@image-preview-color-action-text: var(--color-neutral-8);
@image-preview-radius-action: @radius-small;
@image-preview-color-action-bg: @color-transparent;
@image-preview-color-action_hover-bg: var(--color-neutral-2);
@image-preview-color-action_hover-text: @color-primary-6;
@image-preview-color-action_disabled-bg: transparent;
@image-preview-color-action_disabled-text: var(--color-text-4);
@image-preview-font-size-action-name: @font-size-body-1;
@image-preview-spacing-action-name-right: @spacing-6;
@image-preview-padding-action-content: 13px;
@image-preview-margin-action-right: @spacing-none;
// preview trigger
@image-preview-spacing-trigger-padding-vertical: @spacing-6;
@image-preview-spacing-trigger-padding-horizontal: @spacing-7;
@image-preview-margin-action-bottom: @spacing-none;

// preview loading
@image-preview-color-loading-text: @color-primary-6;
@image-preview-color-loading-bg: #232324;
@image-preview-font-size-loading: 18px;
@image-preview-spacing-loading-padding: @spacing-5;
@image-preview-size-loading-width: 48px;
@image-preview-size-loading-height: 48px;
@image-preview-radius-loading: @radius-medium;
// preview close-btn
@image-preview-size-close-btn-width: 32px;
@image-preview-size-close-icon: 14px;
@image-preview-color-close-btn-bg: rgba(0, 0, 0, 0.5);
@image-preview-color-close-btn-text: var(--color-white);
@image-preview-position-close-btn-right: 36px;
@image-preview-position-close-btn-top: 36px;
// preview arrow
@image-preview-arrow-position: @spacing-8;
@image-preview-arrow-size: @size-8;
@image-preview-arrow-font-size: @size-4;
@image-preview-arrow-color-icon: var(--color-white);
@image-preview-arrow-color-icon_disabled: rgba(255, 355, 255, 0.3);
@image-preview-arrow-color-bg: rgba(255, 355, 255, 0.3);
@image-preview-arrow-color-bg_hover: rgba(255, 355, 255, 0.5);
@image-preview-arrow-color-bg_disabled: rgba(255, 355, 255, 0.2);

// image trigger
@image-trigger-spacing-padding-vertical: 6px;
@image-trigger-spacing-padding-horizontal: 4px;
@image-trigger-color-bg: var(--color-bg-5);
@image-trigger-color-border: var(--color-neutral-3);
@image-trigger-size-border: 1px;
@image-trigger-radius: 4px;