Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hover state color to be changed #227

Closed
leeejune opened this issue Jul 24, 2023 · 5 comments · Fixed by #228
Closed

Hover state color to be changed #227

leeejune opened this issue Jul 24, 2023 · 5 comments · Fixed by #228
Assignees
Labels
auro-button Type: Perf Performance update to existing code

Comments

@leeejune
Copy link
Contributor

leeejune commented Jul 24, 2023

Please verify the version of auro-button you have installed

@current

Please describe the bug

  1. Go to https://auro.alaskaair.com/components/auro/button#:~:text=element%20be%20used.-,Default,-Example
  2. Hover over the secondary button
  3. See transparent background

Reproducing the error on the docsite

This issue is reproducible on the Auro docsite

Expected behavior

The hover color should be a combination of a white background (auro-color-background-lightest) and the hover color (auro-color-ui-bkg-hover-on-light).

When hovering over the button, it should not become transparent.

What browsers are you seeing the problem on?

No response

Additional context

This issue is related to the back-to-top component.

Exit criteria

No response

@blackfalcon
Copy link
Member

@leeejune is this a new spec or a regression? The work we did in the past was to update the tertiary button 615d5d6

I can't find a reference to updating the secondary.

@blackfalcon blackfalcon added Type: Perf Performance update to existing code and removed Type: Bug Bug or Bug fixes labels Jul 24, 2023
@braven112
Copy link
Member

We'll need to finalize the background color for each hover state for each secondary button.

@Patrick-Daly-AA
Copy link

@jordanjones243
Copy link
Contributor

for future reference: https://www.geeksforgeeks.org/css-combine-background-image-with-gradient-overlay/

This will not work because linear-gradient does not combine two colors into one solid color, but rather transitions from one color to another in a certain direction.

@jordanjones243
Copy link
Contributor

Moving this ticket as blocked, as it is a part of a PR that has another blocked ticket:

blackfalcon pushed a commit that referenced this issue Jan 2, 2024
## [7.2.2](v7.2.1...v7.2.2) (2024-01-02)

### Bug Fixes

* **demo:** update surge demo branch ([5393ed9](5393ed9))
* **marked:** update marked package to script ([9ad605c](9ad605c))
* **tokens:** replace invalid tokens [#229](#229) ([7652913](7652913))

### Performance Improvements

* **accordion:** use new version of accordion ([eba6c1e](eba6c1e))
* **alert:** update to use auro-alert ([e18015c](e18015c))
* **deps:** update dependencies ([7daaf28](7daaf28))
* **eslint:** install auro eslint rules ([d9fd3ed](d9fd3ed))
* **focus:** remove focus-visible support ([c0511e5](c0511e5))
* **hover:** update hover css rules ([f64446d](f64446d))
* **hover:** update secondary hover color [#227](#227) ([1eff68d](1eff68d))
* **hover:** update tertiary hover color [#236](#236) ([2d346fa](2d346fa))
* **jsdocs:** update jsdocs ([ebec779](ebec779))
* **node:** update to support node 20 ([816d29e](816d29e))
* **tokens:** add css fallbacks for tokens [#229](#229) ([423502b](423502b))
* **token:** update design token names [#229](#229) ([f94ab5d](f94ab5d))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
auro-button Type: Perf Performance update to existing code
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants