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

New Sass var $btn-link-focus-shadow-rgb to allow customisation #39119

Merged
merged 2 commits into from
Sep 13, 2023

Conversation

giovannipiller
Copy link
Contributor

@giovannipiller giovannipiller commented Aug 28, 2023

Description

Adds $btn-link-focus-shadow-rgb so that users can customise focus shadow for .btn-link.

Motivation & Context

Right now, for .btn-link, it's generated using only $link-color.

--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($link-color), $link-color, 15%))};

This might be undesirable and there should be an easy way to override it (e.g. users might want to change how it's calculated, or have specific design requirements that differ between light/dark theme).

Type of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (non-breaking change)
  • Breaking change (fix or feature that would change existing functionality)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • I have added tests to cover my changes
  • All new and existing tests passed

Live previews

Copy link
Member

@louismaximepiton louismaximepiton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something has to be rethought in order not to increase the bundles size too much.

scss/_root.scss Outdated Show resolved Hide resolved
scss/_buttons.scss Outdated Show resolved Hide resolved
scss/_variables-dark.scss Outdated Show resolved Hide resolved
@giovannipiller
Copy link
Contributor Author

Something has to be rethought in order not to increase the bundles size too much.

That's fair. I'm going to simply introduce a new Sass variable then, as you suggested: $btn-link-focus-shadow-rgb.
This should give enough flexibility to users that want to customise the shadow.

@giovannipiller giovannipiller changed the title New CSS var btn-link-focus-shadow-rgb to allow customisation between color modes New Sass var $btn-link-focus-shadow-rgb to allow customisation Aug 30, 2023
Copy link
Member

@louismaximepiton louismaximepiton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this PR!

@julien-deramond julien-deramond merged commit d1d49ff into twbs:main Sep 13, 2023
13 checks passed
@giovannipiller giovannipiller deleted the btn-link-focus-shadow branch September 14, 2023 08:51
romankupchak93 pushed a commit to romankupchak93/bootstrap that referenced this pull request Jan 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

3 participants