feat(skin): update design tokens from mistica-design (#485)

* feat(skin): update design tokens
* Run swiftformat
* Record screenshots automatically launched from GH action
* feat: Add secondaryBrand style to buttons
* feat: Add tests
* Change SwiftUI, add tests
* Run swiftformat
* Fix text color
* Add primary Brand style to buttons
* Rerun new screenshots
* Fix: new movistar feedback success lottie animation
* Record screenshots automatically launched from GH action

---------

Co-authored-by: tuentisre <tuentisre@users.noreply.github.com>
Co-authored-by: Luis Ángel García <luisangel.garciamunoz@telefonica.com>

Author: tuentisre

MisticaCatalog/Source/Catalog/Mistica/Components/UICatalogButtonsViewController.swift

@@ -22,6 +22,8 @@ class UICatalogButtonsViewController: UITableViewController {
                 Style(buttonStyle: .linkDanger, title: "Link Danger", isInverse: false, isSmall: false),
                 Style(buttonStyle: .primaryInverse, title: "Primary Inverse", isInverse: true, isSmall: false),
                 Style(buttonStyle: .secondaryInverse, title: "Secondary Inverse", isInverse: true, isSmall: false),
+                Style(buttonStyle: .primaryBrand, title: "Primary Brand", isInverse: true, isSmall: false),
+                Style(buttonStyle: .secondaryBrand, title: "Secondary Brand", isInverse: true, isSmall: false),
                 Style(buttonStyle: .linkInverse, title: "Link Inverse", isInverse: true, isSmall: false),
                 Style(buttonStyle: .linkDangerInverse, title: "Link Danger Inverse", isInverse: true, isSmall: false),
 

MisticaCatalog/Source/Catalog/MisticaSwiftUI/Components/ButtonCatalogView.swift

@@ -22,6 +22,8 @@ struct ButtonsCatalogView: View {
                 Style(buttonStyle: .misticaPrimaryInverse(), title: "Primary Inverse", inverse: true),
                 Style(buttonStyle: .misticaSecondaryInverse(), title: "Secondary Inverse", inverse: true),
                 Style(buttonStyle: .misticaLinkInverse(), title: "Link Inverse", inverse: true),
+                Style(buttonStyle: .misticaPrimaryBrand(), title: "Primary Brand", inverse: true),
+                Style(buttonStyle: .misticaSecondaryBrand(), title: "Secondary Brand", inverse: true),
 
                 Style(buttonStyle: .misticaPrimary(small: true), title: "Primary Small", inverse: false),
                 Style(buttonStyle: .misticaSecondary(small: true), title: "Secondary Small", inverse: false),

Package.resolved

@@ -157,6 +157,62 @@ public extension Button.Style {
         return style
     }
 
+    static var primaryBrand: Button.Style {
+        Button.Style(
+            allowsBleedingAlignment: false,
+            stateStyleByState: [
+                .normal: Button.StateStyle(
+                    textColor: .textButtonPrimaryBrand,
+                    backgroundColor: .buttonPrimaryBackgroundBrand,
+                    borderColor: .clear
+                ),
+                .selected: Button.StateStyle(
+                    textColor: .textButtonPrimaryBrandPressed,
+                    backgroundColor: .buttonPrimaryBackgroundBrandPressed,
+                    borderColor: .clear
+                ),
+                .disabled: Button.StateStyle(
+                    textColor: .textButtonPrimaryBrand,
+                    backgroundColor: .buttonPrimaryBackgroundBrand,
+                    borderColor: .clear
+                ),
+                .loading: Button.StateStyle(
+                    textColor: .textButtonPrimaryBrand,
+                    backgroundColor: .buttonPrimaryBackgroundBrand,
+                    borderColor: .clear
+                )
+            ]
+        )
+    }
+
+    static var secondaryBrand: Button.Style {
+        Button.Style(
+            allowsBleedingAlignment: false,
+            stateStyleByState: [
+                .normal: Button.StateStyle(
+                    textColor: .textButtonSecondaryBrand,
+                    backgroundColor: .buttonSecondaryBackgroundBrand,
+                    borderColor: .buttonSecondaryBorderBrand
+                ),
+                .selected: Button.StateStyle(
+                    textColor: .textButtonSecondaryBrandPressed,
+                    backgroundColor: .buttonSecondaryBackgroundBrandPressed,
+                    borderColor: .buttonSecondaryBorderBrandPressed
+                ),
+                .disabled: Button.StateStyle(
+                    textColor: .textButtonSecondaryBrand,
+                    backgroundColor: .buttonSecondaryBackgroundBrand,
+                    borderColor: .buttonSecondaryBorderBrand
+                ),
+                .loading: Button.StateStyle(
+                    textColor: .textButtonSecondaryBrand,
+                    backgroundColor: .buttonSecondaryBackgroundBrand,
+                    borderColor: .buttonSecondaryBorderBrand
+                )
+            ]
+        )
+    }
+
     func insets(isSmall: Bool) -> UIEdgeInsets {
         if let overriddenSizes = overriddenSizes {
             return overriddenSizes.insets