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

SMS Design React UI Library.

@import '../../style/theme/default.less';

@carousel-content-border-radius: 0;

// arrow
@carousel-arrow-position: @spacing-6;
@carousel-arrow-size: @size-6;
@carousel-arrow-font-size: @font-size-body-3;
@carousel-arrow-color-icon: var(--color-white);
@carousel-arrow-color-bg: rgba(@color-white, 0.3);
@carousel-arrow-color-bg_hover: rgba(@color-white, 0.5);

// indicator
@carousel-indicator-size-wrapper: @size-12;
@carousel-indicator-color-bg-wrapper: rgba(0, 0, 0, 0.15);

@carousel-indicator-dot-size: 6px;
@carousel-indicator-line-size-width: @size-3;
@carousel-indicator-line-size-height: @size-1;
@carousel-indicator-slider-size-width: @size-12;
@carousel-indicator-slider-size-height: @size-1;

@carousel-indicator-position: @spacing-6;
@carousel-indicator-gap: @spacing-4;
@carousel-indicator-border-radius: @radius-medium;
@carousel-indicator-color_default: rgba(@color-white, 0.3);
@carousel-indicator-color_active: var(--color-white);

@carousel-indicator-outer-border-radius: 20px;
@carousel-indicator-outer-padding: @spacing-2;
@carousel-indicator-outer-color_default: rgba(var(--gray-4), 0.5);
@carousel-indicator-outer-color_active: var(--color-fill-4);
@carousel-indicator-outer-color-bg: @color-transparent;