Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-81816

Refactor theme-color-level() function renamed in Bootstrap 5

XMLWordPrintable

    • MOODLE_405_STABLE
    • MOODLE_405_STABLE
    • MDL-81816-main
    • Hide

      For this ticket as the change might be really small in term of difference (tint of colors ...), best is to just have a check on the generated theme/boost/style/moodle.css

      1. Copy the diff-theme-css.php script to the root of your moodle folder
      2. run 

        git checkout main
        git pull
        git checkout -    # Goes back to the current branch which should be MDL-81816-main
        git diff main theme/boost/style/moodle.css > MDL-81816.css.diff 
        

      1. go to <siteurl>/diff-theme-css.php
      2. Ensure there is no visible difference between original colors and the new ones.

      Additionally check a couple of pages:

      You can check mostly on the course page where text is close / closer to the background color (you can check that you have at least a 4.5:1 ratio on https://accessibleweb.com/color-contrast-checker/)

      1. Go into a course and edit in line any activity
      2. Check that the edit instruction are contrasted enough with the text.
      3. If you have a doubt look for 'span.editinstructions' in the theme/moodle.css file and check the background color vs text color contrast.

      • Go to a course with some activities
        1. Open the contextual menu and select the "Availability" item
        2. Ensure that there is sufficient contrast between the selected option and the text color

       

      Show
      For this ticket as the change might be really small in term of difference (tint of colors ...), best is to just have a check on the generated theme/boost/style/moodle.css Copy the diff-theme-css.php script to the root of your moodle folder run  git checkout main git pull git checkout - # Goes back to the current branch which should be MDL-81816-main git diff main theme /boost/style/moodle .css > MDL-81816.css. diff go to <siteurl>/diff-theme-css.php Ensure there is no visible difference between original colors and the new ones. Additionally check a couple of pages: You can check mostly on the course page where text is close / closer to the background color (you can check that you have at least a 4.5:1 ratio on https://accessibleweb.com/color-contrast-checker/ ) Go into a course and edit in line any activity Check that the edit instruction are contrasted enough with the text. If you have a doubt look for 'span.editinstructions' in the theme/moodle.css file and check the background color vs text color contrast. Go to a course with some activities Open the contextual menu and select the "Availability" item Ensure that there is sufficient contrast between the selected option and the text color  
    • 2
    • HQ 2024 Sprint I3.1 Moppies

      In BS5 the theme-color-level() function has been renamed.

      Generate the needed SCSS code in bs5bridge.scss (so we can start using BS5 syntax) and refactor all the occurrences in the codebase.

      https://getbootstrap.com/docs/5.2/migration/:

      Renamed theme-color-level() function to color-level() and now accepts any color you want instead of only $theme-color colors. See #29083 Watch out: color-level() was later on dropped in v5.0.0-alpha3.

        1. (1) 2 Passed -- (Main)MDL-81816.png
          (1) 2 Passed -- (Main)MDL-81816.png
          74 kB
        2. (2) 3 Passed -- (Main)MDL-81816.png
          (2) 3 Passed -- (Main)MDL-81816.png
          109 kB
        3. CSS Diff Visualization-final.pdf
          44 kB
        4. diff-theme-css.php
          3 kB
        5. image-2024-06-10-11-52-38-738.png
          image-2024-06-10-11-52-38-738.png
          10 kB
        6. image-2024-08-20-07-09-35-459.png
          image-2024-08-20-07-09-35-459.png
          30 kB
        7. image-2024-08-20-07-20-01-854.png
          image-2024-08-20-07-20-01-854.png
          12 kB
        8. image-2024-08-28-16-28-22-506.png
          image-2024-08-28-16-28-22-506.png
          9 kB
        9. image-2024-08-28-16-29-47-373.png
          image-2024-08-28-16-29-47-373.png
          10 kB
        10. image-2024-08-29-22-10-25-055.png
          image-2024-08-29-22-10-25-055.png
          339 kB
        11. image-2024-09-09-11-21-04-568.png
          image-2024-09-09-11-21-04-568.png
          17 kB
        12. screenshot-1.png
          screenshot-1.png
          66 kB
        13. screenshot-2.png
          screenshot-2.png
          130 kB

            laurent.david@moodle.com Laurent David
            mikelmartíncorrales Mikel Martín Corrales
            Mikel Martín Corrales Mikel Martín Corrales
            Amaia Anabitarte Amaia Anabitarte
            Kim Jared Lucas Kim Jared Lucas
            Votes:
            0 Vote for this issue
            Watchers:
            8 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 4 hours, 7 minutes
                1d 4h 7m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.