From 0e8dd50d91f015d85756ac11c3699a0a0ba27997 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= <mikel@moodle.com>
Date: Thu, 20 Feb 2025 16:41:52 +0100
Subject: [PATCH 1/2] MDL-84346 theme_boost: Add new '.btn-subtle-' helper
 class

- Add new .btn-subtle helper class that accept different colour themes
(.btn-subtle-success, .btn-subtle-warning, ...) and also .btn-subtle-body
for basic styling
- Remove specific styles in course.scss that are not needed anymore
- Adjust some styles in course.scss that were affected by this change
---
 .../content/moodle/components/buttons.md      |  10 +
 theme/boost/scss/moodle/buttons.scss          |  34 ++
 theme/boost/scss/moodle/course.scss           |  36 +-
 theme/boost/style/moodle.css                  | 349 ++++++++----------
 theme/classic/style/moodle.css                | 349 ++++++++----------
 5 files changed, 348 insertions(+), 430 deletions(-)

diff --git a/admin/tool/componentlibrary/content/moodle/components/buttons.md b/admin/tool/componentlibrary/content/moodle/components/buttons.md
index 9a697eef0a5..b20a9f7aaca 100644
--- a/admin/tool/componentlibrary/content/moodle/components/buttons.md
+++ b/admin/tool/componentlibrary/content/moodle/components/buttons.md
@@ -58,6 +58,16 @@ Use a danger button when the primary action is a potentially dangerous action, l
 
 Outline buttons are used for buttons that controll part of the user interface, like filters on a table or the display type on the user dashboard. Outline buttons look more subtle than secondary buttons and do not distract the user from the main user interface too much.
 
+### Subtle buttons
+
+{{< example >}}
+<button type="button" class="btn btn-subtle-secondary">Subtle Secondary</button>
+<button type="button" class="btn btn-subtle-success">Subtle Succcess</button>
+<button type="button" class="btn btn-sm btn-subtle-success">Subtle Succcess Small</button>
+{{< /example >}}
+
+The subtle class is designed to create buttons that offer a balance between the visual prominence of standard buttons and the minimalism of outline buttons. This class aims to provide a softer, more understated appearance compared to regular buttons while still maintaining more visual presence than outline buttons.
+
 ## Adding buttons to a page
 
 ### Using the single_select renderer
diff --git a/theme/boost/scss/moodle/buttons.scss b/theme/boost/scss/moodle/buttons.scss
index 32728d953b0..2bdf0851bd0 100644
--- a/theme/boost/scss/moodle/buttons.scss
+++ b/theme/boost/scss/moodle/buttons.scss
@@ -90,3 +90,37 @@ p.arrow_button {
         @include button-focus($value, $gray-800);
     }
 }
+
+// Small buttons should have the same border-radius as the normal buttons.
+.btn-sm,
+.btn-group-sm > .btn {
+    --bs-btn-border-radius: var(--#{$prefix}border-radius);
+}
+
+//
+// Subtle buttons.
+//
+
+@each $color, $value in $theme-colors {
+    .btn-subtle-#{$color} {
+        --#{$prefix}btn-font-weight: #{$font-weight-bold};
+        --#{$prefix}btn-color: var(--#{$prefix}#{$color}-text-emphasis);
+        --#{$prefix}btn-bg: var(--#{$prefix}#{$color}-bg-subtle);
+        --#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-text-emphasis);
+        --#{$prefix}btn-active-bg: var(--#{$prefix}#{$color}-bg-subtle);
+        --#{$prefix}btn-hover-color: #{color-contrast($value)};
+        --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color});
+        --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($value)};
+        @include button-focus($value, $white);
+    }
+}
+.btn-subtle-body {
+    --#{$prefix}btn-font-weight: #{$font-weight-bold};
+    --#{$prefix}btn-color: var(--#{$prefix}body-color);
+    --#{$prefix}btn-bg: transparent;
+    --#{$prefix}btn-border-color: var(--#{$prefix}border-color);
+    --#{$prefix}btn-hover-color: #{color-contrast($gray-600)};
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}gray-600);
+    --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($gray-600)};
+    @include button-focus($gray-600, $white);
+}
diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss
index 25256df77bc..aabf1b5afa5 100644
--- a/theme/boost/scss/moodle/course.scss
+++ b/theme/boost/scss/moodle/course.scss
@@ -11,29 +11,6 @@ $divider-color: $gray-300 !default;
 $divider-width: 2px !default;
 $divider-hover-color: $primary !default;
 
-// Mixins.
-@mixin completion-button() {
-    &.btn {
-        @include button-variant($white, $gray-400, $gray-600);
-        min-height: map-get($iconsizes, 5);
-        font-weight: bold;
-        @include border-radius();
-        .icon {
-            font-size: inherit;
-        }
-    }
-    @each $color, $value in $theme-colors {
-        &.btn-#{$color} {
-            $bg-color: shift-color($value, $alert-bg-scale);
-            @include button-variant($bg-color, $bg-color, $value);
-            color: shift-color($value, $alert-color-scale);
-            &:hover {
-                color: color-contrast($value);
-            }
-        }
-    }
-}
-
 /* Course content */
 
 .course-content ul.section-list {
@@ -197,7 +174,7 @@ $divider-hover-color: $primary !default;
     .action-menu {
         .btn.btn-icon {
             height: map-get($iconsizes, 5);
-            width: map-get($iconwidthsizes, 5);
+            width: map-get($iconsizes, 5);
             @include border-radius();
         }
         &.section-actions .btn.btn-icon {
@@ -394,10 +371,9 @@ $divider-hover-color: $primary !default;
     .activity-completion {
         grid-area: completion;
         justify-self: end;
-        // Re-style completion buttons (mark as done & dropdown).
         button,
         a[role="button"] {
-            @include completion-button();
+            min-height: map-get($iconsizes, 5);
         }
         @include media-breakpoint-down(sm) {
             width: 100%;
@@ -433,8 +409,12 @@ $divider-hover-color: $primary !default;
         justify-self: end;
         .groupmode-information {
             height: map-get($iconsizes, 5);
-            width: map-get($iconwidthsizes, 5);
+            width: map-get($iconsizes, 5);
             @include border-radius();
+            .icon {
+                width: map-get($iconsizes, 3);
+                height: map-get($iconsizes, 3);
+            }
         }
         .groupmode-icon-info {
             display: none;
@@ -790,7 +770,7 @@ $divider-hover-color: $primary !default;
         }
         .icons-collapse-expand:has(+ h4) {
             height: map-get($iconsizes, 4);
-            width: map-get($iconwidthsizes, 4);
+            width: map-get($iconsizes, 4);
             font-size: $font-size-sm;
         }
         h4 {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 4fb73932626..6ad7b257bbb 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -30691,7 +30691,7 @@ table.calendartable caption {
 }
 .course-section .action-menu .btn.btn-icon {
   height: 32px;
-  width: 40px;
+  width: 32px;
   border-radius: 0.5rem;
 }
 .course-section .action-menu.section-actions .btn.btn-icon {
@@ -30838,205 +30838,9 @@ table.calendartable caption {
   grid-area: completion;
   justify-self: end;
 }
-.activity-item .activity-completion button.btn,
-.activity-item .activity-completion a[role=button].btn {
-  --bs-btn-color: #6a737b;
-  --bs-btn-bg: #fff;
-  --bs-btn-border-color: #ced4da;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: white;
-  --bs-btn-hover-border-color: #d3d8de;
-  --bs-btn-focus-shadow-rgb: 191, 197, 204;
-  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: white;
-  --bs-btn-active-border-color: #d3d8de;
-  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #fff;
-  --bs-btn-disabled-border-color: #ced4da;
+.activity-item .activity-completion button,
+.activity-item .activity-completion a[role=button] {
   min-height: 32px;
-  font-weight: bold;
-  border-radius: 0.5rem;
-}
-.activity-item .activity-completion button.btn .icon,
-.activity-item .activity-completion a[role=button].btn .icon {
-  font-size: inherit;
-}
-.activity-item .activity-completion button.btn-primary,
-.activity-item .activity-completion a[role=button].btn-primary {
-  --bs-btn-color: #0f6cbf;
-  --bs-btn-bg: #cfe2f2;
-  --bs-btn-border-color: #cfe2f2;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #d6e6f4;
-  --bs-btn-hover-border-color: #d4e5f3;
-  --bs-btn-focus-shadow-rgb: 178, 208, 234;
-  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #d9e8f5;
-  --bs-btn-active-border-color: #d4e5f3;
-  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #cfe2f2;
-  --bs-btn-disabled-border-color: #cfe2f2;
-  color: #094173;
-}
-.activity-item .activity-completion button.btn-primary:hover,
-.activity-item .activity-completion a[role=button].btn-primary:hover {
-  color: #fff;
-}
-.activity-item .activity-completion button.btn-secondary,
-.activity-item .activity-completion a[role=button].btn-secondary {
-  --bs-btn-color: #ced4da;
-  --bs-btn-bg: #f5f6f8;
-  --bs-btn-border-color: #f5f6f8;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #f7f7f9;
-  --bs-btn-hover-border-color: #f6f7f9;
-  --bs-btn-focus-shadow-rgb: 239, 241, 244;
-  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #f7f8f9;
-  --bs-btn-active-border-color: #f6f7f9;
-  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #f5f6f8;
-  --bs-btn-disabled-border-color: #f5f6f8;
-  color: #7c7f83;
-}
-.activity-item .activity-completion button.btn-secondary:hover,
-.activity-item .activity-completion a[role=button].btn-secondary:hover {
-  color: #000;
-}
-.activity-item .activity-completion button.btn-success,
-.activity-item .activity-completion a[role=button].btn-success {
-  --bs-btn-color: #357a32;
-  --bs-btn-bg: #d7e4d6;
-  --bs-btn-border-color: #d7e4d6;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #dde8dc;
-  --bs-btn-hover-border-color: #dbe7da;
-  --bs-btn-focus-shadow-rgb: 191, 212, 189;
-  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #dfe9de;
-  --bs-btn-active-border-color: #dbe7da;
-  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #d7e4d6;
-  --bs-btn-disabled-border-color: #d7e4d6;
-  color: #20491e;
-}
-.activity-item .activity-completion button.btn-success:hover,
-.activity-item .activity-completion a[role=button].btn-success:hover {
-  color: #fff;
-}
-.activity-item .activity-completion button.btn-info,
-.activity-item .activity-completion a[role=button].btn-info {
-  --bs-btn-color: #008196;
-  --bs-btn-bg: #cce6ea;
-  --bs-btn-border-color: #cce6ea;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #d4eaed;
-  --bs-btn-hover-border-color: #d1e9ec;
-  --bs-btn-focus-shadow-rgb: 173, 215, 221;
-  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #d6ebee;
-  --bs-btn-active-border-color: #d1e9ec;
-  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #cce6ea;
-  --bs-btn-disabled-border-color: #cce6ea;
-  color: #004d5a;
-}
-.activity-item .activity-completion button.btn-info:hover,
-.activity-item .activity-completion a[role=button].btn-info:hover {
-  color: #fff;
-}
-.activity-item .activity-completion button.btn-warning,
-.activity-item .activity-completion a[role=button].btn-warning {
-  --bs-btn-color: #f0ad4e;
-  --bs-btn-bg: #fcefdc;
-  --bs-btn-border-color: #fcefdc;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #fcf1e1;
-  --bs-btn-hover-border-color: #fcf1e0;
-  --bs-btn-focus-shadow-rgb: 250, 229, 199;
-  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #fdf2e3;
-  --bs-btn-active-border-color: #fcf1e0;
-  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #fcefdc;
-  --bs-btn-disabled-border-color: #fcefdc;
-  color: #90682f;
-}
-.activity-item .activity-completion button.btn-warning:hover,
-.activity-item .activity-completion a[role=button].btn-warning:hover {
-  color: #000;
-}
-.activity-item .activity-completion button.btn-danger,
-.activity-item .activity-completion a[role=button].btn-danger {
-  --bs-btn-color: #ca3120;
-  --bs-btn-bg: #f4d6d2;
-  --bs-btn-border-color: #f4d6d2;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #f6dcd9;
-  --bs-btn-hover-border-color: #f5dad7;
-  --bs-btn-focus-shadow-rgb: 238, 189, 183;
-  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #f6dedb;
-  --bs-btn-active-border-color: #f5dad7;
-  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #f4d6d2;
-  --bs-btn-disabled-border-color: #f4d6d2;
-  color: #791d13;
-}
-.activity-item .activity-completion button.btn-danger:hover,
-.activity-item .activity-completion a[role=button].btn-danger:hover {
-  color: #fff;
-}
-.activity-item .activity-completion button.btn-light,
-.activity-item .activity-completion a[role=button].btn-light {
-  --bs-btn-color: #f8f9fa;
-  --bs-btn-bg: #fefefe;
-  --bs-btn-border-color: #fefefe;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #fefefe;
-  --bs-btn-hover-border-color: #fefefe;
-  --bs-btn-focus-shadow-rgb: 253, 253, 253;
-  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #fefefe;
-  --bs-btn-active-border-color: #fefefe;
-  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #fefefe;
-  --bs-btn-disabled-border-color: #fefefe;
-  color: #959596;
-}
-.activity-item .activity-completion button.btn-light:hover,
-.activity-item .activity-completion a[role=button].btn-light:hover {
-  color: #000;
-}
-.activity-item .activity-completion button.btn-dark,
-.activity-item .activity-completion a[role=button].btn-dark {
-  --bs-btn-color: #1d2125;
-  --bs-btn-bg: #d2d3d3;
-  --bs-btn-border-color: #d2d3d3;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #d9dada;
-  --bs-btn-hover-border-color: #d7d7d7;
-  --bs-btn-focus-shadow-rgb: 183, 184, 185;
-  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #dbdcdc;
-  --bs-btn-active-border-color: #d7d7d7;
-  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #d2d3d3;
-  --bs-btn-disabled-border-color: #d2d3d3;
-  color: #111416;
-}
-.activity-item .activity-completion button.btn-dark:hover,
-.activity-item .activity-completion a[role=button].btn-dark:hover {
-  color: #fff;
 }
 @media (max-width: 575.98px) {
   .activity-item .activity-completion {
@@ -31073,9 +30877,13 @@ table.calendartable caption {
 }
 .activity-item .activity-groupmode-info .groupmode-information {
   height: 32px;
-  width: 40px;
+  width: 32px;
   border-radius: 0.5rem;
 }
+.activity-item .activity-groupmode-info .groupmode-information .icon {
+  width: 16px;
+  height: 16px;
+}
 .activity-item .activity-groupmode-info .groupmode-icon-info {
   display: none;
 }
@@ -31372,7 +31180,7 @@ table.calendartable caption {
 }
 .activity.subsection .section .icons-collapse-expand:has(+ h4, + .h4) {
   height: 24px;
-  width: 30px;
+  width: 24px;
   font-size: 0.8203125rem;
 }
 .activity.subsection .section h4, .activity.subsection .section .h4 {
@@ -37543,6 +37351,145 @@ p.arrow_button {
   box-shadow: inset 0 0 0 2px #343a40;
 }
 
+.btn-sm,
+.btn-group-sm > .btn {
+  --bs-btn-border-radius: var(--bs-border-radius);
+}
+
+.btn-subtle-primary {
+  --bs-btn-font-weight: 700;
+  --bs-btn-color: var(--bs-primary-text-emphasis);
+  --bs-btn-bg: var(--bs-primary-bg-subtle);
+  --bs-btn-active-color: var(--bs-primary-text-emphasis);
+  --bs-btn-active-bg: var(--bs-primary-bg-subtle);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--bs-primary);
+  --bs-btn-focus-shadow-rgb: 15, 108, 191;
+}
+.btn-subtle-primary:focus, .btn-subtle-primary.focus {
+  outline: 0.25rem solid #000102;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-subtle-secondary {
+  --bs-btn-font-weight: 700;
+  --bs-btn-color: var(--bs-secondary-text-emphasis);
+  --bs-btn-bg: var(--bs-secondary-bg-subtle);
+  --bs-btn-active-color: var(--bs-secondary-text-emphasis);
+  --bs-btn-active-bg: var(--bs-secondary-bg-subtle);
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: var(--bs-secondary);
+  --bs-btn-focus-shadow-rgb: 206, 212, 218;
+}
+.btn-subtle-secondary:focus, .btn-subtle-secondary.focus {
+  outline: 0.25rem solid #5f6e7d;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-subtle-success {
+  --bs-btn-font-weight: 700;
+  --bs-btn-color: var(--bs-success-text-emphasis);
+  --bs-btn-bg: var(--bs-success-bg-subtle);
+  --bs-btn-active-color: var(--bs-success-text-emphasis);
+  --bs-btn-active-bg: var(--bs-success-bg-subtle);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--bs-success);
+  --bs-btn-focus-shadow-rgb: 53, 122, 50;
+}
+.btn-subtle-success:focus, .btn-subtle-success.focus {
+  outline: 0.25rem solid black;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-subtle-info {
+  --bs-btn-font-weight: 700;
+  --bs-btn-color: var(--bs-info-text-emphasis);
+  --bs-btn-bg: var(--bs-info-bg-subtle);
+  --bs-btn-active-color: var(--bs-info-text-emphasis);
+  --bs-btn-active-bg: var(--bs-info-bg-subtle);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--bs-info);
+  --bs-btn-focus-shadow-rgb: 0, 129, 150;
+}
+.btn-subtle-info:focus, .btn-subtle-info.focus {
+  outline: 0.25rem solid black;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-subtle-warning {
+  --bs-btn-font-weight: 700;
+  --bs-btn-color: var(--bs-warning-text-emphasis);
+  --bs-btn-bg: var(--bs-warning-bg-subtle);
+  --bs-btn-active-color: var(--bs-warning-text-emphasis);
+  --bs-btn-active-bg: var(--bs-warning-bg-subtle);
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: var(--bs-warning);
+  --bs-btn-focus-shadow-rgb: 240, 173, 78;
+}
+.btn-subtle-warning:focus, .btn-subtle-warning.focus {
+  outline: 0.25rem solid #694109;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-subtle-danger {
+  --bs-btn-font-weight: 700;
+  --bs-btn-color: var(--bs-danger-text-emphasis);
+  --bs-btn-bg: var(--bs-danger-bg-subtle);
+  --bs-btn-active-color: var(--bs-danger-text-emphasis);
+  --bs-btn-active-bg: var(--bs-danger-bg-subtle);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--bs-danger);
+  --bs-btn-focus-shadow-rgb: 202, 49, 32;
+}
+.btn-subtle-danger:focus, .btn-subtle-danger.focus {
+  outline: 0.25rem solid #1a0604;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-subtle-light {
+  --bs-btn-font-weight: 700;
+  --bs-btn-color: var(--bs-light-text-emphasis);
+  --bs-btn-bg: var(--bs-light-bg-subtle);
+  --bs-btn-active-color: var(--bs-light-text-emphasis);
+  --bs-btn-active-bg: var(--bs-light-bg-subtle);
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: var(--bs-light);
+  --bs-btn-focus-shadow-rgb: 248, 249, 250;
+}
+.btn-subtle-light:focus, .btn-subtle-light.focus {
+  outline: 0.25rem solid #8193a5;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-subtle-dark {
+  --bs-btn-font-weight: 700;
+  --bs-btn-color: var(--bs-dark-text-emphasis);
+  --bs-btn-bg: var(--bs-dark-bg-subtle);
+  --bs-btn-active-color: var(--bs-dark-text-emphasis);
+  --bs-btn-active-bg: var(--bs-dark-bg-subtle);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--bs-dark);
+  --bs-btn-focus-shadow-rgb: 29, 33, 37;
+}
+.btn-subtle-dark:focus, .btn-subtle-dark.focus {
+  outline: 0.25rem solid black;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-subtle-body {
+  --bs-btn-font-weight: 700;
+  --bs-btn-color: var(--bs-body-color);
+  --bs-btn-bg: transparent;
+  --bs-btn-border-color: var(--bs-border-color);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--bs-gray-600);
+  --bs-btn-focus-shadow-rgb: 106, 115, 123;
+}
+.btn-subtle-body:focus, .btn-subtle-body.focus {
+  outline: 0.25rem solid #0c0d0d;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
 .gradetreebox {
   margin: 20px 0 30px 0;
 }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 767c7d8554c..d67d77d9ee7 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -30697,7 +30697,7 @@ table.calendartable caption {
 }
 .course-section .action-menu .btn.btn-icon {
   height: 32px;
-  width: 40px;
+  width: 32px;
   border-radius: 0.375rem;
 }
 .course-section .action-menu.section-actions .btn.btn-icon {
@@ -30844,205 +30844,9 @@ table.calendartable caption {
   grid-area: completion;
   justify-self: end;
 }
-.activity-item .activity-completion button.btn,
-.activity-item .activity-completion a[role=button].btn {
-  --bs-btn-color: #6a737b;
-  --bs-btn-bg: #fff;
-  --bs-btn-border-color: #ced4da;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: white;
-  --bs-btn-hover-border-color: #d3d8de;
-  --bs-btn-focus-shadow-rgb: 191, 197, 204;
-  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: white;
-  --bs-btn-active-border-color: #d3d8de;
-  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #fff;
-  --bs-btn-disabled-border-color: #ced4da;
+.activity-item .activity-completion button,
+.activity-item .activity-completion a[role=button] {
   min-height: 32px;
-  font-weight: bold;
-  border-radius: 0.375rem;
-}
-.activity-item .activity-completion button.btn .icon,
-.activity-item .activity-completion a[role=button].btn .icon {
-  font-size: inherit;
-}
-.activity-item .activity-completion button.btn-primary,
-.activity-item .activity-completion a[role=button].btn-primary {
-  --bs-btn-color: #0f6cbf;
-  --bs-btn-bg: #cfe2f2;
-  --bs-btn-border-color: #cfe2f2;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #d6e6f4;
-  --bs-btn-hover-border-color: #d4e5f3;
-  --bs-btn-focus-shadow-rgb: 178, 208, 234;
-  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #d9e8f5;
-  --bs-btn-active-border-color: #d4e5f3;
-  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #cfe2f2;
-  --bs-btn-disabled-border-color: #cfe2f2;
-  color: #094173;
-}
-.activity-item .activity-completion button.btn-primary:hover,
-.activity-item .activity-completion a[role=button].btn-primary:hover {
-  color: #fff;
-}
-.activity-item .activity-completion button.btn-secondary,
-.activity-item .activity-completion a[role=button].btn-secondary {
-  --bs-btn-color: #ced4da;
-  --bs-btn-bg: #f5f6f8;
-  --bs-btn-border-color: #f5f6f8;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #f7f7f9;
-  --bs-btn-hover-border-color: #f6f7f9;
-  --bs-btn-focus-shadow-rgb: 239, 241, 244;
-  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #f7f8f9;
-  --bs-btn-active-border-color: #f6f7f9;
-  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #f5f6f8;
-  --bs-btn-disabled-border-color: #f5f6f8;
-  color: #7c7f83;
-}
-.activity-item .activity-completion button.btn-secondary:hover,
-.activity-item .activity-completion a[role=button].btn-secondary:hover {
-  color: #000;
-}
-.activity-item .activity-completion button.btn-success,
-.activity-item .activity-completion a[role=button].btn-success {
-  --bs-btn-color: #357a32;
-  --bs-btn-bg: #d7e4d6;
-  --bs-btn-border-color: #d7e4d6;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #dde8dc;
-  --bs-btn-hover-border-color: #dbe7da;
-  --bs-btn-focus-shadow-rgb: 191, 212, 189;
-  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #dfe9de;
-  --bs-btn-active-border-color: #dbe7da;
-  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #d7e4d6;
-  --bs-btn-disabled-border-color: #d7e4d6;
-  color: #20491e;
-}
-.activity-item .activity-completion button.btn-success:hover,
-.activity-item .activity-completion a[role=button].btn-success:hover {
-  color: #fff;
-}
-.activity-item .activity-completion button.btn-info,
-.activity-item .activity-completion a[role=button].btn-info {
-  --bs-btn-color: #008196;
-  --bs-btn-bg: #cce6ea;
-  --bs-btn-border-color: #cce6ea;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #d4eaed;
-  --bs-btn-hover-border-color: #d1e9ec;
-  --bs-btn-focus-shadow-rgb: 173, 215, 221;
-  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #d6ebee;
-  --bs-btn-active-border-color: #d1e9ec;
-  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #cce6ea;
-  --bs-btn-disabled-border-color: #cce6ea;
-  color: #004d5a;
-}
-.activity-item .activity-completion button.btn-info:hover,
-.activity-item .activity-completion a[role=button].btn-info:hover {
-  color: #fff;
-}
-.activity-item .activity-completion button.btn-warning,
-.activity-item .activity-completion a[role=button].btn-warning {
-  --bs-btn-color: #f0ad4e;
-  --bs-btn-bg: #fcefdc;
-  --bs-btn-border-color: #fcefdc;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #fcf1e1;
-  --bs-btn-hover-border-color: #fcf1e0;
-  --bs-btn-focus-shadow-rgb: 250, 229, 199;
-  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #fdf2e3;
-  --bs-btn-active-border-color: #fcf1e0;
-  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #fcefdc;
-  --bs-btn-disabled-border-color: #fcefdc;
-  color: #90682f;
-}
-.activity-item .activity-completion button.btn-warning:hover,
-.activity-item .activity-completion a[role=button].btn-warning:hover {
-  color: #000;
-}
-.activity-item .activity-completion button.btn-danger,
-.activity-item .activity-completion a[role=button].btn-danger {
-  --bs-btn-color: #ca3120;
-  --bs-btn-bg: #f4d6d2;
-  --bs-btn-border-color: #f4d6d2;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #f6dcd9;
-  --bs-btn-hover-border-color: #f5dad7;
-  --bs-btn-focus-shadow-rgb: 238, 189, 183;
-  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #f6dedb;
-  --bs-btn-active-border-color: #f5dad7;
-  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #f4d6d2;
-  --bs-btn-disabled-border-color: #f4d6d2;
-  color: #791d13;
-}
-.activity-item .activity-completion button.btn-danger:hover,
-.activity-item .activity-completion a[role=button].btn-danger:hover {
-  color: #fff;
-}
-.activity-item .activity-completion button.btn-light,
-.activity-item .activity-completion a[role=button].btn-light {
-  --bs-btn-color: #f8f9fa;
-  --bs-btn-bg: #fefefe;
-  --bs-btn-border-color: #fefefe;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #fefefe;
-  --bs-btn-hover-border-color: #fefefe;
-  --bs-btn-focus-shadow-rgb: 253, 253, 253;
-  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #fefefe;
-  --bs-btn-active-border-color: #fefefe;
-  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #fefefe;
-  --bs-btn-disabled-border-color: #fefefe;
-  color: #959596;
-}
-.activity-item .activity-completion button.btn-light:hover,
-.activity-item .activity-completion a[role=button].btn-light:hover {
-  color: #000;
-}
-.activity-item .activity-completion button.btn-dark,
-.activity-item .activity-completion a[role=button].btn-dark {
-  --bs-btn-color: #1d2125;
-  --bs-btn-bg: #d2d3d3;
-  --bs-btn-border-color: #d2d3d3;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #d9dada;
-  --bs-btn-hover-border-color: #d7d7d7;
-  --bs-btn-focus-shadow-rgb: 183, 184, 185;
-  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #dbdcdc;
-  --bs-btn-active-border-color: #d7d7d7;
-  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #d2d3d3;
-  --bs-btn-disabled-border-color: #d2d3d3;
-  color: #111416;
-}
-.activity-item .activity-completion button.btn-dark:hover,
-.activity-item .activity-completion a[role=button].btn-dark:hover {
-  color: #fff;
 }
 @media (max-width: 575.98px) {
   .activity-item .activity-completion {
@@ -31079,9 +30883,13 @@ table.calendartable caption {
 }
 .activity-item .activity-groupmode-info .groupmode-information {
   height: 32px;
-  width: 40px;
+  width: 32px;
   border-radius: 0.375rem;
 }
+.activity-item .activity-groupmode-info .groupmode-information .icon {
+  width: 16px;
+  height: 16px;
+}
 .activity-item .activity-groupmode-info .groupmode-icon-info {
   display: none;
 }
@@ -31378,7 +31186,7 @@ table.calendartable caption {
 }
 .activity.subsection .section .icons-collapse-expand:has(+ h4, + .h4) {
   height: 24px;
-  width: 30px;
+  width: 24px;
   font-size: 0.8203125rem;
 }
 .activity.subsection .section h4, .activity.subsection .section .h4 {
@@ -37549,6 +37357,145 @@ p.arrow_button {
   box-shadow: inset 0 0 0 2px #343a40;
 }
 
+.btn-sm,
+.btn-group-sm > .btn {
+  --bs-btn-border-radius: var(--bs-border-radius);
+}
+
+.btn-subtle-primary {
+  --bs-btn-font-weight: 700;
+  --bs-btn-color: var(--bs-primary-text-emphasis);
+  --bs-btn-bg: var(--bs-primary-bg-subtle);
+  --bs-btn-active-color: var(--bs-primary-text-emphasis);
+  --bs-btn-active-bg: var(--bs-primary-bg-subtle);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--bs-primary);
+  --bs-btn-focus-shadow-rgb: 15, 108, 191;
+}
+.btn-subtle-primary:focus, .btn-subtle-primary.focus {
+  outline: 0.25rem solid #000102;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-subtle-secondary {
+  --bs-btn-font-weight: 700;
+  --bs-btn-color: var(--bs-secondary-text-emphasis);
+  --bs-btn-bg: var(--bs-secondary-bg-subtle);
+  --bs-btn-active-color: var(--bs-secondary-text-emphasis);
+  --bs-btn-active-bg: var(--bs-secondary-bg-subtle);
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: var(--bs-secondary);
+  --bs-btn-focus-shadow-rgb: 206, 212, 218;
+}
+.btn-subtle-secondary:focus, .btn-subtle-secondary.focus {
+  outline: 0.25rem solid #5f6e7d;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-subtle-success {
+  --bs-btn-font-weight: 700;
+  --bs-btn-color: var(--bs-success-text-emphasis);
+  --bs-btn-bg: var(--bs-success-bg-subtle);
+  --bs-btn-active-color: var(--bs-success-text-emphasis);
+  --bs-btn-active-bg: var(--bs-success-bg-subtle);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--bs-success);
+  --bs-btn-focus-shadow-rgb: 53, 122, 50;
+}
+.btn-subtle-success:focus, .btn-subtle-success.focus {
+  outline: 0.25rem solid black;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-subtle-info {
+  --bs-btn-font-weight: 700;
+  --bs-btn-color: var(--bs-info-text-emphasis);
+  --bs-btn-bg: var(--bs-info-bg-subtle);
+  --bs-btn-active-color: var(--bs-info-text-emphasis);
+  --bs-btn-active-bg: var(--bs-info-bg-subtle);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--bs-info);
+  --bs-btn-focus-shadow-rgb: 0, 129, 150;
+}
+.btn-subtle-info:focus, .btn-subtle-info.focus {
+  outline: 0.25rem solid black;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-subtle-warning {
+  --bs-btn-font-weight: 700;
+  --bs-btn-color: var(--bs-warning-text-emphasis);
+  --bs-btn-bg: var(--bs-warning-bg-subtle);
+  --bs-btn-active-color: var(--bs-warning-text-emphasis);
+  --bs-btn-active-bg: var(--bs-warning-bg-subtle);
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: var(--bs-warning);
+  --bs-btn-focus-shadow-rgb: 240, 173, 78;
+}
+.btn-subtle-warning:focus, .btn-subtle-warning.focus {
+  outline: 0.25rem solid #694109;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-subtle-danger {
+  --bs-btn-font-weight: 700;
+  --bs-btn-color: var(--bs-danger-text-emphasis);
+  --bs-btn-bg: var(--bs-danger-bg-subtle);
+  --bs-btn-active-color: var(--bs-danger-text-emphasis);
+  --bs-btn-active-bg: var(--bs-danger-bg-subtle);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--bs-danger);
+  --bs-btn-focus-shadow-rgb: 202, 49, 32;
+}
+.btn-subtle-danger:focus, .btn-subtle-danger.focus {
+  outline: 0.25rem solid #1a0604;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-subtle-light {
+  --bs-btn-font-weight: 700;
+  --bs-btn-color: var(--bs-light-text-emphasis);
+  --bs-btn-bg: var(--bs-light-bg-subtle);
+  --bs-btn-active-color: var(--bs-light-text-emphasis);
+  --bs-btn-active-bg: var(--bs-light-bg-subtle);
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: var(--bs-light);
+  --bs-btn-focus-shadow-rgb: 248, 249, 250;
+}
+.btn-subtle-light:focus, .btn-subtle-light.focus {
+  outline: 0.25rem solid #8193a5;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-subtle-dark {
+  --bs-btn-font-weight: 700;
+  --bs-btn-color: var(--bs-dark-text-emphasis);
+  --bs-btn-bg: var(--bs-dark-bg-subtle);
+  --bs-btn-active-color: var(--bs-dark-text-emphasis);
+  --bs-btn-active-bg: var(--bs-dark-bg-subtle);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--bs-dark);
+  --bs-btn-focus-shadow-rgb: 29, 33, 37;
+}
+.btn-subtle-dark:focus, .btn-subtle-dark.focus {
+  outline: 0.25rem solid black;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
+.btn-subtle-body {
+  --bs-btn-font-weight: 700;
+  --bs-btn-color: var(--bs-body-color);
+  --bs-btn-bg: transparent;
+  --bs-btn-border-color: var(--bs-border-color);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--bs-gray-600);
+  --bs-btn-focus-shadow-rgb: 106, 115, 123;
+}
+.btn-subtle-body:focus, .btn-subtle-body.focus {
+  outline: 0.25rem solid #0c0d0d;
+  box-shadow: inset 0 0 0 2px #fff;
+}
+
 .gradetreebox {
   margin: 20px 0 30px 0;
 }

From c69e005068178d5a1304012d37a6089dfd1c7592 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= <mikel@moodle.com>
Date: Thu, 20 Feb 2025 16:43:32 +0100
Subject: [PATCH 2/2] MDL-84346 courseformat: Replace css class for completion
 buttons

---
 .../format/classes/output/local/content/cm/completion.php   | 5 ++---
 course/templates/completion_manual.mustache                 | 6 +++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/course/format/classes/output/local/content/cm/completion.php b/course/format/classes/output/local/content/cm/completion.php
index 32252e865d3..e8874c25e94 100644
--- a/course/format/classes/output/local/content/cm/completion.php
+++ b/course/format/classes/output/local/content/cm/completion.php
@@ -122,13 +122,12 @@ class completion implements named_templatable, renderable {
         $dialogcontent = $output->render_from_template('core_courseformat/local/content/cm/completion_dialog', $completioninfo);
 
         $buttoncontent = get_string('completionmenuitem', 'completion');
-        $buttonclass = '';
+        $buttonclass = 'btn-subtle-body';
         if ($completioninfo->istrackeduser) {
-            $buttonclass = 'btn-outline-secondary';
             $buttoncontent = get_string('todo', 'completion');
             if ($completioninfo->overallcomplete) {
                 $buttoncontent = $output->pix_icon('i/checked', '') . " " . get_string('completion_manual:done', 'core_course');
-                $buttonclass = 'btn-success';
+                $buttonclass = 'btn-subtle-success';
             }
         }
 
diff --git a/course/templates/completion_manual.mustache b/course/templates/completion_manual.mustache
index 8cfe1b387f4..b2d1dddedbf 100644
--- a/course/templates/completion_manual.mustache
+++ b/course/templates/completion_manual.mustache
@@ -30,7 +30,7 @@
 {{#istrackeduser}}
     {{#overallcomplete}}
         <button
-            class="btn btn-success  {{^normalbutton}}btn-sm{{/normalbutton}} text-nowrap"
+            class="btn btn-subtle-success  {{^normalbutton}}btn-sm{{/normalbutton}} text-nowrap"
             data-action="toggle-manual-completion"
             data-toggletype="manual:undo"
             data-cmid="{{cmid}}"
@@ -50,7 +50,7 @@
     {{/overallcomplete}}
     {{#overallincomplete}}
         <button
-            class="btn btn-outline-secondary  {{^normalbutton}}btn-sm{{/normalbutton}} text-nowrap"
+            class="btn btn-subtle-body  {{^normalbutton}}btn-sm{{/normalbutton}} text-nowrap"
             data-action="toggle-manual-completion"
             data-toggletype="manual:mark-done"
             data-cmid="{{cmid}}"
@@ -71,7 +71,7 @@
 {{/istrackeduser}}
 {{^istrackeduser}}
     <button
-        class="btn btn-outline-secondary  {{^normalbutton}}btn-sm{{/normalbutton}} text-nowrap"
+        class="btn btn-subtle-body {{^normalbutton}}btn-sm{{/normalbutton}} text-nowrap"
         disabled
     >
         {{#str}} completion_manual:markdone, core_course {{/str}}