From 547d0a31ecd75c03eadef65b9525e70728d90d11 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Mon, 13 May 2024 12:27:09 +0300 Subject: [PATCH] Tokens for Carousel --- .../lib/carousel/style/CarouselStyle.js | 19 ++++++++++--------- components/lib/themes/aura/carousel/index.js | 18 ++++++++++++++++++ components/lib/themes/lara/carousel/index.js | 18 ++++++++++++++++++ 3 files changed, 46 insertions(+), 9 deletions(-) diff --git a/components/lib/carousel/style/CarouselStyle.js b/components/lib/carousel/style/CarouselStyle.js index f161d4c9d..c9a04b867 100644 --- a/components/lib/carousel/style/CarouselStyle.js +++ b/components/lib/carousel/style/CarouselStyle.js @@ -37,8 +37,8 @@ const theme = ({ dt }) => ` flex-direction: row; justify-content: center; flex-wrap: wrap; - padding: 1rem; - gap: 0.5rem; + padding: ${dt('carousel.indicator.list.padding')}; + gap: ${dt('carousel.indicator.list.gap')}; margin: 0; list-style: none; } @@ -48,21 +48,22 @@ const theme = ({ dt }) => ` align-items: center; justify-content: center; background: ${dt('carousel.indicator.background')}; - width: 2rem; - height: 0.5rem; + width: ${dt('carousel.indicator.width')}; + height: ${dt('carousel.indicator.height')}; border: 0 none; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}; outline-color: transparent; - border-radius: ${dt('border.radius.md')}; + border-radius: ${dt('carousel.indicator.border.radius')}; padding: 0; margin: 0; - border: none; user-select: none; + cursor: pointer; } .p-carousel-indicator-button:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; + box-shadow: ${dt('carousel.indicator.focus.ring.shadow')}; + outline: ${dt('carousel.indicator.focus.ring.width')} ${dt('carousel.indicator.focus.ring.style')} ${dt('carousel.indicator.focus.ring.color')}; + outline-offset: ${dt('carousel.indicator.focus.ring.offset')}; } .p-carousel-indicator-button:hover { diff --git a/components/lib/themes/aura/carousel/index.js b/components/lib/themes/aura/carousel/index.js index d81d4456a..e0d05b7af 100644 --- a/components/lib/themes/aura/carousel/index.js +++ b/components/lib/themes/aura/carousel/index.js @@ -1,4 +1,22 @@ export default { + root: { + indicatorList: { + padding: '1rem', + gap: '0.5rem' + }, + indicator: { + width: '2rem', + height: '0.5rem', + borderRadius: '{content.border.radius}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + } + }, colorScheme: { light: { indicator: { diff --git a/components/lib/themes/lara/carousel/index.js b/components/lib/themes/lara/carousel/index.js index d81d4456a..a89c5a563 100644 --- a/components/lib/themes/lara/carousel/index.js +++ b/components/lib/themes/lara/carousel/index.js @@ -1,4 +1,22 @@ export default { + root: { + indicatorList: { + padding: '1rem', + gap: '0.5rem' + }, + indicator: { + width: '1rem', + height: '1rem', + borderRadius: '50', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } + } + }, colorScheme: { light: { indicator: {