feat: add borders for color squares in demo app color screen (#280) (#…

…281)

Reviewed-by: Pierre-Yves Lapersonne <[email protected]>

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- [DemoApp] Update color screen to add a border on color illustration square ([#280](https://github.com/Orange-OpenSource/ouds-ios/issues/280))
 - [DemoApp] Add grid tokens screen in demo app ([#151](https://github.com/Orange-OpenSource/ouds-ios/issues/151))
 - [Tool] GitHub Action to run SwiftLint for *main* and *develop* branches
 

Showcase/Showcase/Pages/Tokens/Color/ColorTokenPage.swift

@@ -127,33 +127,11 @@ struct ColorTokenPage: View {
                 Rectangle()
                     .fill(colorRawToken.color)
                     .frame(width: 64, height: 64)
-                    .modifier(ExtraBorderModifier(color: colorRawToken))
+                    .oudsBorder(style: theme.borderStyleDefault,
+                                width: theme.borderWidthThin,
+                                radius: theme.borderRadiusNone,
+                                color: theme.colorBorderDefault)
             }
         }
     }
 }
-
-// MARK: - Extra border modifier
-
-// Add a border if color defined by token is equal to default background color of the root view
-private struct ExtraBorderModifier: ViewModifier {
-
-    @Environment(\.theme) private var theme
-    @Environment(\.colorScheme) private var colorScheme
-
-    let color: ColorRawToken
-
-    func body(content: Content) -> some View {
-        let defaultContentBackground = theme.colorBgPrimary.color(for: colorScheme)
-        let addBorder = color.color == defaultContentBackground
-
-        if addBorder {
-            content.oudsBorder(style: theme.borderStyleDefault,
-                               width: theme.borderWidthThin,
-                               radius: theme.borderRadiusNone,
-                               color: theme.colorContentDefault)
-        } else {
-            content
-        }
-    }
-}