Make filled OcButton use gradient background

owncloud · Mar 21, 2022 · fc76782 · fc76782
1 parent 7d94f74
commit fc76782
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/changelog/unreleased/enhancement-primary-button-gradient b/changelog/unreleased/enhancement-primary-button-gradient
@@ -0,0 +1,6 @@
+Enhancement: Make filled primary OcButton use gradient background
+
+We've updated the OcButton to use the gradient background color when used in its `filled` appearance.
+
+https://github.com/owncloud/owncloud-design-system/issues/1952
+https://github.com/owncloud/owncloud-design-system/pull/2036
diff --git a/src/components/atoms/OcButton/OcButton.vue b/src/components/atoms/OcButton/OcButton.vue
@@ -147,6 +147,8 @@ export default {
         case "outline":
           classes.push(`oc-button-${this.variation}-outline`)
           break
+        default:
+          classes.push(`oc-button-${this.variation}-filled`)
       }
 
       return classes
@@ -358,6 +360,9 @@ export default {
       var(--oc-color-swatch-primary-hover),
       var(--oc-color-swatch-primary-muted)
     );
+    &-filled {
+      @extend .oc-background-primary-gradient;
+    }
   }
 
   &-success {

diff --git a/src/styles/theme/background.scss b/src/styles/theme/background.scss
@@ -15,7 +15,7 @@
   border-color:
     linear-gradient(90deg,
     var(--oc-color-swatch-primary-muted) 0%,
-    var(--oc-color-swatch-primary-gradient) 100%);
+    var(--oc-color-swatch-primary-gradient) 100%) !important;
 }
 /* stylelint-enable */