diff --git a/src/components/carousel/carousel.styles.ts b/src/components/carousel/carousel.styles.ts index 569fd9cf2..8c8a6d5ee 100644 --- a/src/components/carousel/carousel.styles.ts +++ b/src/components/carousel/carousel.styles.ts @@ -5,7 +5,7 @@ export default css` ${componentStyles} :host { - --slide-gap: var(--sl-spacing-medium, 1rem); + --slide-gap: var(--wa-space-m, 1rem); --aspect-ratio: 16 / 9; --scroll-hint: 0px; @@ -19,7 +19,7 @@ export default css` grid-template-areas: '. slides .' '. pagination .'; - gap: var(--sl-spacing-medium); + gap: var(--wa-space-m); align-items: center; min-height: 100%; min-width: 100%; @@ -31,7 +31,7 @@ export default css` display: flex; flex-wrap: wrap; justify-content: center; - gap: var(--sl-spacing-small); + gap: var(--wa-space-s); } .carousel__slides { @@ -46,7 +46,7 @@ export default css` overscroll-behavior-x: contain; scrollbar-width: none; aspect-ratio: calc(var(--aspect-ratio) * var(--slides-per-page)); - border-radius: var(--sl-border-radius-small); + border-radius: var(--wa-corners-1x); --slide-size: calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page)); } @@ -95,7 +95,7 @@ export default css` .carousel__navigation { grid-area: navigation; display: contents; - font-size: var(--sl-font-size-x-large); + font-size: var(--wa-font-size-xl); } .carousel__navigation-button { @@ -104,12 +104,12 @@ export default css` align-items: center; background: none; border: none; - border-radius: var(--sl-border-radius-small); + border-radius: var(--wa-corners-1x); font-size: inherit; - color: var(--sl-color-neutral-600); - padding: var(--sl-spacing-x-small); + color: var(--wa-color-text-quiet); + padding: var(--wa-space-xs); cursor: pointer; - transition: var(--sl-transition-medium) color; + transition: var(--wa-transition-fast) color; appearance: none; } @@ -137,16 +137,16 @@ export default css` cursor: pointer; background: none; border: 0; - border-radius: var(--sl-border-radius-circle); - width: var(--sl-spacing-small); - height: var(--sl-spacing-small); - background-color: var(--sl-color-neutral-300); + border-radius: var(--wa-corners-circle); + width: var(--wa-space-s); + height: var(--wa-space-s); + background-color: var(--wa-color-neutral-element-fill-muted); padding: 0; margin: 0; } .carousel__pagination-item--active { - background-color: var(--sl-color-neutral-700); + background-color: var(--wa-color-brand-element-fill-vivid); transform: scale(1.2); } @@ -154,7 +154,7 @@ export default css` .carousel__slides:focus-visible, .carousel__navigation-button:focus-visible, .carousel__pagination-item:focus-visible { - outline: var(--sl-focus-ring); - outline-offset: var(--sl-focus-ring-offset); + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); } `;