fix(carousel): [carousel] change demo of theme #3149
Conversation
WalkthroughThis pull request updates the visual styles across numerous Vue carousel demo components. The changes primarily involve CSS enhancements: the color of Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
examples/sites/demos/pc/app/carousel/autoplay-composition-api.vueOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. examples/sites/demos/pc/app/carousel/basic-usage.vueOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. examples/sites/demos/pc/app/carousel/basic-usage-composition-api.vueOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.
Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
James-9696
changed the title
WalkthroughThis pull request updates the theme of the carousel component demos by changing the text and background colors across multiple demo files. The changes are primarily in the CSS styling, altering color codes to new values for a more consistent theme. Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| .carousel-item-demo:nth-child(2n + 1) { | ||
| background-color: #edf0f3; | ||
| background-color: rgba(221, 221, 221, 0.2); |
There was a problem hiding this comment.
Ensure the background color change to rgba(221, 221, 221, 0.2) is intentional for both even and odd items, as this might affect visual distinction.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
examples/sites/demos/pc/app/carousel/manual-play-composition-api.vue (2)
46-54: Updated Carousel Item Text Color:
The<h3>text color has been updated from#475669to#808080, which aligns with the new demo theme styling.Consider defining this color as a CSS variable if it is reused across multiple components.
56-62: Adjusted Background Colors for Carousel Items:
The background colors for carousel items are now set as semi-transparent grays with even items usingrgba(221, 221, 221, 0.2)and odd items usingrgba(221, 221, 221, 0.1). This creates a subtle visual differentiation consistent with the updated demo theme.If these colors repeat in other components, consider centralizing them via CSS variables.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (37)
examples/sites/demos/pc/app/carousel/autoplay-composition-api.vue(2 hunks)examples/sites/demos/pc/app/carousel/autoplay.vue(2 hunks)examples/sites/demos/pc/app/carousel/basic-usage-composition-api.vue(2 hunks)examples/sites/demos/pc/app/carousel/basic-usage.vue(2 hunks)examples/sites/demos/pc/app/carousel/card-mode-composition-api.vue(2 hunks)examples/sites/demos/pc/app/carousel/card-mode.vue(2 hunks)examples/sites/demos/pc/app/carousel/card-show-composition-api.vue(1 hunks)examples/sites/demos/pc/app/carousel/card-show.vue(1 hunks)examples/sites/demos/pc/app/carousel/carousel-arrow-always-composition-api.vue(2 hunks)examples/sites/demos/pc/app/carousel/carousel-arrow-always.vue(2 hunks)examples/sites/demos/pc/app/carousel/carousel-arrow-hover-composition-api.vue(2 hunks)examples/sites/demos/pc/app/carousel/carousel-arrow-hover.vue(2 hunks)examples/sites/demos/pc/app/carousel/carousel-arrow-never-composition-api.vue(2 hunks)examples/sites/demos/pc/app/carousel/carousel-arrow-never.vue(2 hunks)examples/sites/demos/pc/app/carousel/carousel-events-composition-api.vue(2 hunks)examples/sites/demos/pc/app/carousel/carousel-events.vue(2 hunks)examples/sites/demos/pc/app/carousel/close-loop-composition-api.vue(2 hunks)examples/sites/demos/pc/app/carousel/close-loop.vue(2 hunks)examples/sites/demos/pc/app/carousel/custom-height-composition-api.vue(1 hunks)examples/sites/demos/pc/app/carousel/custom-height.vue(1 hunks)examples/sites/demos/pc/app/carousel/dialog-show-composition-api.vue(2 hunks)examples/sites/demos/pc/app/carousel/dialog-show.vue(2 hunks)examples/sites/demos/pc/app/carousel/indicator-trigger-composition-api.vue(2 hunks)examples/sites/demos/pc/app/carousel/indicator-trigger.vue(2 hunks)examples/sites/demos/pc/app/carousel/initial-index-composition-api.vue(2 hunks)examples/sites/demos/pc/app/carousel/initial-index.vue(1 hunks)examples/sites/demos/pc/app/carousel/manual-play-composition-api.vue(2 hunks)examples/sites/demos/pc/app/carousel/manual-play.vue(2 hunks)examples/sites/demos/pc/app/carousel/play-interval-composition-api.vue(2 hunks)examples/sites/demos/pc/app/carousel/play-interval.vue(2 hunks)examples/sites/demos/pc/app/carousel/show-title-composition-api.vue(2 hunks)examples/sites/demos/pc/app/carousel/show-title.vue(2 hunks)examples/sites/demos/pc/app/carousel/swipeable-composition-api.vue(2 hunks)examples/sites/demos/pc/app/carousel/swipeable.vue(2 hunks)examples/sites/demos/pc/app/carousel/up-down-carousel-composition-api.vue(2 hunks)examples/sites/demos/pc/app/carousel/up-down-carousel.vue(2 hunks)packages/theme/src/carousel-item/vars.less(1 hunks)
🔇 Additional comments (82)
packages/theme/src/carousel-item/vars.less (1)
15-15: Theme update looks good.This change updates the text color variable for carousel item titles to use a more subdued color, which aligns nicely with the other visual updates in this PR.
examples/sites/demos/pc/app/carousel/initial-index.vue (2)
21-28: Consistent styling for carousel text elements.The added styling for heading elements follows modern design principles with a more subdued color palette. The text styling is well-defined with appropriate spacing and alignment properties.
31-31: Good use of semi-transparent background colors.The change from solid background colors to semi-transparent ones creates a more modern, subtle appearance for the carousel items, which is consistent with the overall theme update.
Also applies to: 35-35
examples/sites/demos/pc/app/carousel/play-interval.vue (2)
22-22: Text color update matches theme changes.This color update to
#808080is consistent with the other carousel components and the global theme variable change.
31-31: Background color updates for better visual consistency.The background color changes to semi-transparent variants create a more subtle and modern appearance, maintaining visual consistency across carousel components.
Also applies to: 35-35
examples/sites/demos/pc/app/carousel/card-show-composition-api.vue (1)
185-185: Hover state uses more subdued color.Changing the hover fill color from a near-black to a medium grey (
#b3b3b3) is consistent with the overall design direction of using more subdued colors throughout the carousel components.examples/sites/demos/pc/app/carousel/custom-height-composition-api.vue (3)
22-24: Style enhancement with new block class.The addition of the
.blockclass with consistent margins improves the spacing between elements in the carousel demo.
26-26: Improved color scheme update.Changed text color from
#475669to#808080for a more muted, modern appearance that enhances readability.
35-35: Consistent background updates with semi-transparent colors.Replaced solid background colors with semi-transparent variants (
rgba(221, 221, 221, 0.2)andrgba(221, 221, 221, 0.1)), creating a more subtle visual distinction between carousel items.Also applies to: 39-39
examples/sites/demos/pc/app/carousel/carousel-events-composition-api.vue (2)
28-28: Improved text color update.Changed text color from
#475669to#808080for better visual consistency with other carousel demos.
37-37: Enhanced background styling with transparency.Updated background colors to semi-transparent values (
rgba(221, 221, 221, 0.2)andrgba(221, 221, 221, 0.1)), creating a more modern and cohesive appearance across carousel items.Also applies to: 41-41
examples/sites/demos/pc/app/carousel/custom-height.vue (3)
29-31: Style enhancement with new block class.Added the
.blockclass with consistent margins to improve spacing in the carousel demo, matching the composition API counterpart.
33-33: Improved text color update.Changed text color from
#475669to#808080for better visual consistency across carousel demos.
42-42: Consistent background updates with semi-transparent colors.Replaced solid background colors with semi-transparent variants (
rgba(221, 221, 221, 0.2)andrgba(221, 221, 221, 0.1)), creating a more subtle and modern visual appearance.Also applies to: 46-46
examples/sites/demos/pc/app/carousel/manual-play.vue (2)
58-58: Improved text color update.Changed text color from
#475669to#808080for better visual consistency with other carousel demos.
67-67: Enhanced background styling with transparency.Updated background colors to semi-transparent values (
rgba(221, 221, 221, 0.2)andrgba(221, 221, 221, 0.1)), creating a more modern and cohesive appearance that aligns with the updated theme across all carousel demos.Also applies to: 71-71
examples/sites/demos/pc/app/carousel/close-loop-composition-api.vue (3)
14-21: Consistent Theme Update for h3 Elements.
The color for<h3>elements is updated to#808080, which aligns with the new demo theme and improves visual consistency.
23-25: Updated Background for Even Carousel Items.
The background color for even items usingrgba(221, 221, 221, 0.2)provides a light, semi-transparent effect that fits well with the new theme.
27-29: Updated Background for Odd Carousel Items.
The background color for odd items is nowrgba(221, 221, 221, 0.1), complementing the change for even items and enhancing overall visual balance.examples/sites/demos/pc/app/carousel/close-loop.vue (3)
21-28: Revised h3 Style in Carousel Item.
The<h3>elements now usecolor: #808080with maintained opacity and sizing. This change is in line with the new demo theme and appears consistently applied.
30-32: Consistent Even Item Background Update.
The even carousel items now use a semi-transparent background (rgba(221, 221, 221, 0.2)), which enhances the look of the component.
34-36: Consistent Odd Item Background Update.
The odd carousel items’ background color is updated torgba(221, 221, 221, 0.1), ensuring a subtle yet effective differentiation between items.examples/sites/demos/pc/app/carousel/autoplay.vue (3)
21-28: h3 Element Styling Updated for Autoplay Demo.
The<h3>elements’ color change to#808080standardizes the text appearance across demos, matching the revised theme.
30-32: Background Color Refined for Even Items.
The updated background colorrgba(221, 221, 221, 0.2)for even carousel items offers a subtle and modern look, consistent with the new theme.
34-36: Background Color Refined for Odd Items.
The change torgba(221, 221, 221, 0.1)for odd items complements the even items’ styling and provides a balanced appearance.examples/sites/demos/pc/app/carousel/swipeable-composition-api.vue (3)
14-21: Unified h3 Text Color for Swipeable Demo.
The updated color#808080for<h3>elements ensures that the text style is consistent with the overall theme update across demos.
23-25: Even Item Background Update.
The even items now adopt a semi-transparent background (rgba(221, 221, 221, 0.2)), which is in line with the newly defined theme.
27-29: Odd Item Background Update.
The odd items’ background change torgba(221, 221, 221, 0.1)helps maintain a coherent and modern look across carousel demos.examples/sites/demos/pc/app/carousel/autoplay-composition-api.vue (3)
14-21: Consistent h3 Styling in Autoplay (Composition API) Demo.
The<h3>elements now reflect the updated color (#808080) along with the established typography settings, supporting theme consistency.
23-25: Even Carousel Item Background Adjusted.
Applyingrgba(221, 221, 221, 0.2)for even items delivers a refined visual effect as part of the theme update.
27-29: Odd Carousel Item Background Adjusted.
The newrgba(221, 221, 221, 0.1)background for odd items offers a subtle contrast, rounding off the unified theme update efficiently.examples/sites/demos/pc/app/carousel/swipeable.vue (1)
22-22: UI Theme Update: Improved color scheme for better visual consistencyThe updated color scheme uses a softer gray (#808080) for text and semi-transparent backgrounds (rgba(221, 221, 221, 0.2) and rgba(221, 221, 221, 0.1)) instead of solid colors, creating a more modern, subtle appearance.
Also applies to: 31-31, 35-35
examples/sites/demos/pc/app/carousel/dialog-show.vue (1)
49-49: UI Theme Update: Consistent styling with other carousel componentsThe color changes match the styling updates made across other carousel components, ensuring visual consistency throughout the application.
Also applies to: 58-58, 62-62
examples/sites/demos/pc/app/carousel/up-down-carousel.vue (1)
22-22: UI Theme Update: Improved aesthetics for vertical carouselThe updated styling with semi-transparent backgrounds works well for this vertical carousel implementation, maintaining consistency with the horizontal variants.
Also applies to: 31-31, 35-35
examples/sites/demos/pc/app/carousel/show-title.vue (1)
22-22: UI Theme Update: Enhanced visibility for titled carousel itemsThe new color scheme works well with the
show-titlefeature, providing better contrast between the title and content areas.Also applies to: 31-31, 35-35
examples/sites/demos/pc/app/carousel/initial-index-composition-api.vue (1)
15-15: UI Theme Update: Consistent styling for composition API versionThe color and background updates maintain visual consistency between the options API and composition API implementations of the carousel component.
Also applies to: 24-24, 28-28
examples/sites/demos/pc/app/carousel/play-interval-composition-api.vue (3)
14-21: Uniform Header Text Color UpdateThe
<h3>style now usescolor: #808080, which aligns with the new demo theme and enhances visual consistency.
23-25: Even Item Background Color UpdateThe background color for even carousel items has been updated to
rgba(221, 221, 221, 0.2)to introduce a softer, semi-transparent tone.
27-29: Odd Item Background Color UpdateThe odd carousel items now use
rgba(221, 221, 221, 0.1)for their background, creating a subtle contrast and consistent style across items.examples/sites/demos/pc/app/carousel/show-title-composition-api.vue (3)
14-21: Updated Header Text Color for Title ComponentThe
<h3>element’s text color is updated to#808080, ensuring a uniform look with the other carousel demos.
23-25: Even Item Background Color ConsistencyThe even-numbered items now have a background color of
rgba(221, 221, 221, 0.2), which maintains consistency with the new theme across the components.
27-29: Odd Item Background Color ConsistencyThe odd-numbered carousel items have been updated to use
rgba(221, 221, 221, 0.1), contributing to a subtle yet consistent styling approach.examples/sites/demos/pc/app/carousel/carousel-arrow-never-composition-api.vue (3)
14-21: Header Text Color Update in Arrow-Never CarouselThe
<h3>header text now usescolor: #808080, which helps standardize the appearance across different carousel configurations.
23-25: Even Item Background UpdateUpdating the even carousel item background to
rgba(221, 221, 221, 0.2)introduces the desired semi-transparency for a modern appearance.
27-29: Odd Item Background UpdateThe odd carousel items now feature a background of
rgba(221, 221, 221, 0.1), ensuring that the visual pattern remains consistent.examples/sites/demos/pc/app/carousel/basic-usage.vue (3)
21-28: Basic Usage Header Styling EnhancementThe update to the
<h3>style withcolor: #808080reinforces the new visual standard for carousel headers, promoting a cohesive look.
30-32: Even Item Background Color ModificationThe background for even-numbered carousel items is now
rgba(221, 221, 221, 0.2), which enhances the aesthetic appeal with a gentle semi-transparent effect.
34-36: Odd Item Background Color ModificationThe background for odd-numbered items is updated to
rgba(221, 221, 221, 0.1), aligning the styling across all carousel components.examples/sites/demos/pc/app/carousel/indicator-trigger.vue (3)
21-28: Indicator Trigger Header Color UpdateThe
<h3>header now consistently usescolor: #808080, which improves readability and standardizes the text appearance within the component.
30-32: Even Indicator Background UpdateThe even carousel item background has been revised to
rgba(221, 221, 221, 0.2), contributing to a softer, modern visual effect.
34-36: Odd Indicator Background UpdateThe background for odd carousel items is now set to
rgba(221, 221, 221, 0.1), which complements the even item background and reinforces a unified design.examples/sites/demos/pc/app/carousel/carousel-events.vue (3)
37-44: Updated h3 Text Color:
The change of the<h3>text color to#808080in the.tiny-carousel__item h3selector gives the carousel items a softer, more modern appearance that aligns well with the new demo theme.
46-49: Updated Background for Even Carousel Items:
The new background colorrgba(221, 221, 221, 0.2)for even-numbered carousel items introduces a subtle semi-transparent effect that enhances depth and modernizes the look without being too bold.
50-53: Updated Background for Odd Carousel Items:
Changing the odd items’ background color torgba(221, 221, 221, 0.1)maintains a balanced visual rhythm and provides a gentle contrast with the even items, supporting a cohesive theme design.examples/sites/demos/pc/app/carousel/carousel-arrow-always-composition-api.vue (3)
14-21: Consistent h3 Text Color Update:
The adjustment of the<h3>text color to#808080ensures that text elements display a softer tone that blends well with the updated demo theme. All other text styling properties remain consistent, preserving readability.
23-25: Even Carousel Item Background Update:
The even carousel items now usergba(221, 221, 221, 0.2)as their background color, providing a modern semi-transparent look that enhances visual appeal while aligning with the new theme.
27-29: Odd Carousel Item Background Update:
The update torgba(221, 221, 221, 0.1)for odd carousel items delivers a subtle contrast that is both modern and harmonious with the overall design, ensuring visual consistency across components.examples/sites/demos/pc/app/carousel/carousel-arrow-hover-composition-api.vue (3)
14-21: h3 Text Color Harmonization:
The revised text color#808080for<h3>elements is a welcome update that softens the display while remaining legible and consistent with the demo theme modifications across the project.
23-25: Even Carousel Item Background Adjustment:
The new background usingrgba(221, 221, 221, 0.2)for even items adds a tasteful, semi-transparent effect that aligns well with the intended design direction.
27-29: Odd Carousel Item Background Adjustment:
The odd items’ background has been updated torgba(221, 221, 221, 0.1), which provides a pleasing variation and maintains the visual balance of the carousel component.examples/sites/demos/pc/app/carousel/carousel-arrow-hover.vue (1)
21-28: Refined h3 Styling in Carousel:
The update to the<h3>element’s text color (changed to#808080) enhances modernity and readability. Even though this file only includes the text color change (without adjustments to background styles), it remains consistent with the overall theme updates applied elsewhere.examples/sites/demos/pc/app/carousel/basic-usage-composition-api.vue (3)
14-21: h3 Text Color Enhancement:
By updating the<h3>element’s color to#808080, the component now reflects a more modern and gentle visual style that fits the revamped demo theme while preserving text clarity.
23-25: Even Carousel Item Background Update:
The even carousel items now feature a semi-transparent background withrgba(221, 221, 221, 0.2), which introduces a refined, contemporary look consistent with the design updates across the demos.
27-29: Odd Carousel Item Background Update:
The background for odd carousel items has been revised torgba(221, 221, 221, 0.1), supporting a subtle yet effective differentiation that harmonizes with the overall updated theme.examples/sites/demos/pc/app/carousel/up-down-carousel-composition-api.vue (2)
13-21: Consistent Update of Text Color:
The<h3>element’s text color has been updated to#808080, ensuring consistency with the new visual style of the demo theme.
23-29: Updated Background Colors:
The even-indexed carousel items now have a background ofrgba(221, 221, 221, 0.2)and odd-indexed items usergba(221, 221, 221, 0.1), which provides a modern and refined look.examples/sites/demos/pc/app/carousel/carousel-arrow-never.vue (2)
20-28: Refined Text Color for Carousel Items:
The<h3>element’s color has been changed to#808080, which is in line with the new theme.
29-36: Updated Background Colors:
The background for even carousel items is nowrgba(221, 221, 221, 0.2)and for odd itemsrgba(221, 221, 221, 0.1). These changes are consistent with the demo theme update and improve visual clarity.examples/sites/demos/pc/app/carousel/card-mode-composition-api.vue (2)
13-21: Consistent Text Color in Card Mode:
The<h3>text color is now set to#808080, aligning with the new theme across demo components.
23-29: Uniform Background Color for Card Mode Items:
Both even and odd carousel items now usergba(221, 221, 221, 0.2). If a uniform background is the intended design for the card-mode variant, this change is correct.Please confirm that using the same background for all items is intentional, as other demos differentiate between even and odd items.
examples/sites/demos/pc/app/carousel/card-mode.vue (2)
20-28: Updated Text Color for Carousel Items:
The<h3>element has its color updated to#808080, consistent with the new demo theme configuration.
30-36: Differentiated Background Colors in Card Mode:
Even carousel items now have a background ofrgba(221, 221, 221, 0.1)while odd items usergba(221, 221, 221, 0.2), introducing a subtle differentiation.This approach differs from the uniform background in
card-mode-composition-api.vue; please verify that this distinction between the Options API and Composition API demos is intentional.examples/sites/demos/pc/app/carousel/carousel-arrow-always.vue (3)
21-28: Style update for carousel text appears consistent with theme changes.The text color for carousel items has been changed to a gray tone (#808080), making it more subtle and modern.
30-32: Background color update for even carousel items looks good.Changed from solid color to semi-transparent for a more contemporary look.
34-36: Background color update for odd carousel items creates nice visual distinction.The subtle difference in opacity between even (0.2) and odd (0.1) items creates a pleasant visual rhythm.
examples/sites/demos/pc/app/carousel/indicator-trigger-composition-api.vue (3)
14-21: Text color update maintains visual consistency across components.The gray tone (#808080) for carousel item text matches the updated theme applied to other carousel components.
23-25: Even item background update is consistent with theme changes.The semi-transparent background (rgba(221, 221, 221, 0.2)) aligns with the styling in other carousel components.
27-29: Odd item background update follows the established pattern.The lighter opacity background (rgba(221, 221, 221, 0.1)) for odd items maintains visual hierarchy.
examples/sites/demos/pc/app/carousel/dialog-show-composition-api.vue (3)
35-42: Dialog carousel text styling updated for consistency.The heading color change to #808080 maintains visual consistency with other carousel components.
44-46: Even item background styling is consistent with theme updates.The semi-transparent background styling for even carousel items matches the pattern established in other components.
48-50: Odd item background styling follows the theme pattern.The slightly more transparent background for odd items creates a subtle visual distinction.
examples/sites/demos/pc/app/carousel/card-show.vue (1)
187-189: Updated hover fill color for navigation icons.Changed from a dark #191919 to a more subtle #b3b3b3, which aligns with the overall lighter theme being applied to carousel components.
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit