page-notice: border color using undefined variable

[mkchang]

I verified there's no existing issue for this bug.

• There are no existing issues

Current behavior

1px border in confirmation case matches background color instead of success color. Happening in both Marko and React implementations (issue appears to be at skin level)

Expected behavior

Expected border to be same color as the rest of the notice. Changed the background here in the storybook to highlight that the border does not match in confirmation case, and instead matches the default background color.

Package and version

skin@19.23.0

Device/OS/Browser info

Chrome Version 146.0.7680.80 (Official Build) (arm64) on MacOS.

Steps to reproduce

1. Inspect the border for confirmation case on https://opensource.ebay.com/evo-web/ebayui-core/?path=/story/notices-tips-ebay-page-notice--basic&args=status:confirmation
2. See the border color set as part of class `.page-notice--confirmation`

Relevant code block

No response

Additional context

While investigating a gap on the edges for our confirmation page notice (attention notice was fine), found the border color is being set to

border-color: var(
        --page-notice-confirmation-border-color,
        var(--color-border-confirmation)
    )

but neither were defined on the page. Looking into the code, --color-border-confirmation does not seem defined, while --color-border-success is. Happy to contribute a fix, but was not sure if page-notice.css should switch to --color-border-success or if the variables should all be aligned to confirmation given the page-notice status enum is confirmation and not success.

[ArtBlue]

@mkchang , can you please provide some insight into how this issue was created and why? Did you check the DS specs and find some sort of misalignment?