default colors don't match with vanilla bootstrap 5

Created on 10 June 2023, about 1 year ago
Updated 15 September 2023, 9 months ago

E.g. as documented here (if we inspect) https://getbootstrap.com/docs/5.0/components/buttons/ the default .btn-primary background color is:

.btn-primary {
	background-color: #0d6efd;
	border-color: #0d6efd;
}

But when we deploy bootstrap5 to fresh D10 installation, the default .btn-primary is very dark/bright blue and does not match official original color?

.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: #003CC5;
	--bs-btn-border-color: #003CC5;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #0033a7;
	--bs-btn-hover-border-color: #00309e;
	--bs-btn-focus-shadow-rgb: 38, 89, 206;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #00309e;
	--bs-btn-active-border-color: #002d94;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #003CC5;
	--bs-btn-disabled-border-color: #003CC5;
}

E.g. D10 ships with Search block that has Search button with .btn-primary set.

vs

🐛 Bug report
Status

Fixed

Version

3.0

Component

Code

Created by

🇱🇹Lithuania vibrasphere

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @vibrasphere
  • 🇺🇦Ukraine Abyss

    @vibrasphere you can replace the colors for your elements in the variables you specify.
    These variables are described in the style.css file of your current theme.

  • 🇱🇹Lithuania vibrasphere

    Yes, but the question is why it does not follow official colors?

  • 🇺🇦Ukraine Abyss

    @vibrasphere Earlier, the color styles were updated to match Drupal.
    This may have been a mistake, and we may need to update the styles to match bootstrap.
    More details can be found here:
    https://www.drupal.org/project/bootstrap5/issues/3236564
    https://git.drupalcode.org/project/bootstrap5/-/merge_requests/4

    @vladimiraus What do you think?

  • Status changed to Needs review 12 months ago
  • 🇮🇳India mayursolaskar

    I observed a change in the primary colour style value (#003CC5). I have updated the hex value to the default primary colour Bootstrap hex value (#0D6EFD) and compiled the SCSS code. Please review.

    Thanks:

  • 🇱🇹Lithuania vibrasphere

    This worked for 3.0.8 (but not for 3.0.7)

    $ curl https://www.drupal.org/files/issues/2023-07-05/3366009-5.patch | git apply -v
      % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                     Dload  Upload   Total   Spent    Left  Speed
    100 63472  100 63472    0     0   308k      0 --:--:-- --:--:-- --:--:--  311k
    Checking patch css/ck5style.css...
    Checking patch css/style-52.css...
    Checking patch css/style.css...
    Checking patch scss/_variables_bootstrap.scss...
    warning: scss/_variables_bootstrap.scss has type 100644, expected 100755
    Applied patch css/ck5style.css cleanly.
    Applied patch css/style-52.css cleanly.
    Applied patch css/style.css cleanly.
    Applied patch scss/_variables_bootstrap.scss cleanly.

    It also changed input.form-search border color.

  • It would be great to get the default colors via this module. It was a base assumption for me, so thanks for creating this issue. However the #5 patch did not apply for me in 3.0.9.

  • First commit to issue fork.
  • @jannakha opened merge request.
  • 🇦🇺Australia jannakha Brisbane!

    MR45 is just an update on the patch and move to git-process.

    To give a background of why the colour was changed is that originally Bootstrap was not accessible, so colours were slightly darkened to make sure contrast was 4.5:1 then Bootstrap 5 actually fixed their colours to be accessible OOTB.

    I have cleaned up all colour overrides in this patch (no need to keep this $blue variable anyway).

    Updated version to 3.0.x-dev

  • Status changed to RTBC 9 months ago
  • 🇦🇺Australia VladimirAus Brisbane, Australia

    Thank you! 🍰
    Approved!

  • Status changed to Fixed 9 months ago
  • 🇦🇺Australia VladimirAus Brisbane, Australia

    Committed! 🍻

  • 🇦🇺Australia VladimirAus Brisbane, Australia
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.69.0 2024