add more button styles

catppuccin · Nov 1, 2024 · 024ac51 · 024ac51
1 parent 81edbd9
commit 024ac51
Showing 1 changed file with 53 additions and 5 deletions.
diff --git a/styles/canvas-lms/catppuccin.user.css b/styles/canvas-lms/catppuccin.user.css
@@ -420,6 +420,7 @@
       }
     }
 
+    /* the below styles are taken from canvas's common css sheet */
     .btn,
     .Button,
     .ui-button {
@@ -479,9 +480,9 @@
     }
 
     /* filled-in buttons with colored bg */
-    --ic-brand-button--primary-bgd: darken(@accent-color, 20%);
-    --ic-brand-button--primary-bgd-darkened-5: darken(@accent-color, 25%);
-    --ic-brand-button--primary-bgd-darkened-15: darken(@accent-color, 35%);
+    --ic-brand-button--primary-bgd: darken(@accent-color, 15%);
+    --ic-brand-button--primary-bgd-darkened-5: darken(@accent-color, 20%);
+    --ic-brand-button--primary-bgd-darkened-15: darken(@accent-color, 30%);
     .btn-primary,
     .Button--primary {
       background: var(--ic-brand-button--primary-bgd);
@@ -499,21 +500,68 @@
     .ui-progressbar .Button--primary.ui-button.ui-widget-header,
     .Button--primary:active {
       background: var(--ic-brand-button--primary-bgd-darkened-5);
-      box-shadow: none;
     }
     .btn-primary:hover,
     .Button--primary:hover {
       background: var(--ic-brand-button--primary-bgd-darkened-5);
       color: var(--ic-brand-button--primary-text);
     }
+    .btn-link,
+    .Button--link {
+      border-color: transparent;
+      cursor: pointer;
+      color: var(--ic-link-color);
+    }
+
+    .btn-link:hover:focus,
+    .Button--link:hover:focus {
+      color: var(--ic-link-color);
+    }
+    .btn-link:hover,
+    .Button--link:hover {
+      color: var(--ic-link-color-darkened-10);
+      background: transparent;
+    }
+
+    .btn-link:focus,
+    .Button--link:focus {
+      color: var(--ic-link-color);
+    }
+
+    .btn-link.active,
+    .btn-link.Button--active,
+    .btn-link.ui-button.ui-state-active,
+    .ui-progressbar .btn-link.ui-button.ui-widget-header,
+    .btn-link:active,
+    .Button--link.active,
+    .Button--link.Button--active,
+    .Button--link.ui-button.ui-state-active,
+    .ui-progressbar .Button--link.ui-button.ui-widget-header,
+    .Button--link:active {
+      background: @surface0;
+      box-shadow: none;
+      border-color: transparent;
+      color: var(--ic-link-color);
+    }
+
+    .btn-link.disabled,
+    .btn-link.ui-button.ui-state-disabled,
+    .btn-link[disabled],
+    .Button--link.disabled,
+    .Button--link.ui-button.ui-state-disabled,
+    .Button--link[disabled] {
+      color: var(--ic-brand-font-color-dark);
+      background: transparent;
+    }
+    /* end of copy-pasted styles */
 
     :is(button, a)[class$="baseButton"]::before {
       border-color: @accent-color;
     }
 
     #apply_select_menus,
     #ColorPicker__Apply,
-    a:has(.css-10t1mdw-baseButton__content), /* another auto-generated class that covers a lot of buttons */
+    a:has(.css-10t1mdw-baseButton__content),
     button:has(.css-10t1mdw-baseButton__content) {
       &:disabled {
         filter: brightness(85%);