Skip to content

chore: Introduce visualAccent prop to box#4679

Draft
at-susie wants to merge 20 commits into
mainfrom
onetheme/box-accent
Draft

chore: Introduce visualAccent prop to box#4679
at-susie wants to merge 20 commits into
mainfrom
onetheme/box-accent

Conversation

@at-susie

@at-susie at-susie commented Jul 1, 2026

Copy link
Copy Markdown
Member

Description

This PR introduces a new property visualAccent prop to the box component. The new prop allows builders to visually emphasize specific elements through a curated set of background and content color combinations.

Related links, issue #, if available: n/a

How has this been tested?

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@at-susie at-susie changed the title chore: Introduce accentColor prop chore: Introduce visualAccent prop to box Jul 3, 2026
@codecov

codecov Bot commented Jul 3, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.57%. Comparing base (e4c3d49) to head (1f5db4c).

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #4679   +/-   ##
=======================================
  Coverage   97.57%   97.57%           
=======================================
  Files         948      948           
  Lines       30517    30530   +13     
  Branches    11168    11178   +10     
=======================================
+ Hits        29777    29790   +13     
- Misses        693      733   +40     
+ Partials       47        7   -40     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

at-susie added 18 commits July 9, 2026 13:47
- Remove redundant `color: inherit` from `.awsui-accent-base` base class
- Increase specificity of accent color selectors from `.accent-*` to `.box.accent-*` (0,1,0 to 0,2,0) to ensure accent text colors override root default-text-style
- Add `color: inherit` to nested Box elements within accented containers to properly propagate parent accent color
- Remove explicit `variant="subtle"` from Icon in accent context to use inherited styling
- Remove unnecessary `color="inherit"` from Icon wrapper in table rows as specificity fix handles propagation
- Update SCSS documentation to clarify specificity strategy and color inheritance behavior
- Ensures accent content text colors take precedence and cascade correctly to descendants
- Replace `variant="awsui-accent"` and `accentColor` props with new `visualAccent` prop object
- Add `boxVisualAccentBorderRadius` custom CSS property to design tokens
- Update Box interfaces to support `visualAccent` with color, aspectRatio, and borderRadius options
- Simplify accent box implementation in Box component internal styles
- Replace `accentShape` prop with `aspectRatio` and `borderRadius` in visualAccent object
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant