Make filled OcButton use gradient background

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

src/components/atoms/OcButton/OcButton.vue

@@ -130,26 +130,15 @@ export default {
  },
  computed: {
  $_ocButton_buttonClass() {
- const classes = [
+ return [
  "oc-button",
  "oc-rounded",
  `oc-button-${getSizeClass(this.size)}`,
  `oc-button-justify-content-${this.justifyContent}`,
  `oc-button-gap-${getSizeClass(this.gapSize)}`,
+ `oc-button-${this.variation}`,
+ `oc-button-${this.variation}-${this.appearance}`,
  ]
-
- classes.push(`oc-button-${this.variation}`)
-
- switch (this.appearance) {
- case "raw":
- classes.push(`oc-button-${this.variation}-raw`)
- break
- case "outline":
- classes.push(`oc-button-${this.variation}-outline`)
- break
- }
-
- return classes
  },
 
  additionalAttributes() {
@@ -358,6 +347,9 @@ export default {
  var(--oc-color-swatch-primary-hover),
  var(--oc-color-swatch-primary-muted)
  );
+ &-filled {
+ @extend .oc-background-primary-gradient;
+ }
  }
 
  &-success {

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 */