Review opcity page to conform figma

Orange-OpenSource · Sep 27, 2024 · 8409bc7 · 8409bc7
1 parent 4dac346
commit 8409bc7
Showing 1 changed file with 14 additions and 14 deletions.
diff --git a/Showcase/Showcase/Pages/Tokens/Opacity/OpacityTokenPage.swift b/Showcase/Showcase/Pages/Tokens/Opacity/OpacityTokenPage.swift
@@ -14,7 +14,6 @@
 import SwiftUI
 import OUDS
 import OUDSTokensSemantic
-import OUDSTokensRaw
 
 struct OpacityTokenPage: View {
 
@@ -24,42 +23,43 @@ struct OpacityTokenPage: View {
     // MARK: Body
 
     var body: some View {
-        VStack(alignment: .leading) {
-            illustration(for: theme.opacityTransparent, named: "Transparent")
-            illustration(for: theme.opacityWeaker, named: "Weaker")
-            illustration(for: theme.opacityWeak, named: "Weak")
-            illustration(for: theme.opacityMedium, named: "Medium")
-            illustration(for: theme.opacityStrong, named: "Strong")
-            illustration(for: theme.opacityOpaque, named: "Opaque")
+        VStack(alignment: .leading, spacing: theme.spaceFixedNone) {
+            illustration(for: theme.opacityTransparent, named: "opacityTransparent")
+            illustration(for: theme.opacityWeaker, named: "opacityWeaker")
+            illustration(for: theme.opacityWeak, named: "opacityWeak")
+            illustration(for: theme.opacityMedium, named: "opacityMedium")
+            illustration(for: theme.opacityStrong, named: "opacityStrong")
+            illustration(for: theme.opacityOpaque, named: "opacityOpaque")
         }
         .frame(maxWidth: .infinity, alignment: .leading)
-        .padding(.horizontal, theme.spaceFixedShort)
+        .padding(.horizontal, theme.spaceFixedMedium)
     }
 
     // MARK: Private helper
-    
+
     private var fillColor: Color {
         theme.colorContentBrandPrimary?.color(for: colorScheme) ?? .green
     }
 
     private func illustration(for opacityToken: OpacitySemanticToken, named name: String) -> some View {
-        HStack(alignment: .center, spacing: theme.spaceFixedShorter) {
+        HStack(alignment: .center, spacing: theme.spaceFixedMedium) {
             ZStack {
                 Rectangle().fill(fillColor)
                     .frame(width: 44, height: 44)
-                Rectangle().fill(fillColor)
+
+                Rectangle().fill( colorScheme == .dark ? .white : .black)
                     .opacity(opacityToken)
                     .frame(width: 44, height: 44)
                     .transformEffect(CGAffineTransform(translationX: 10, y: 10))
             }
             .frame(width: 54, height: 54, alignment: .leading)
 
-            VStack(alignment: .leading) {
+            VStack(alignment: .leading, spacing: theme.spaceFixedNone) {
                 Text(name).bold()
                 Text("\(opacityToken, specifier: "%.2f")")
             }
             .frame(maxWidth: .infinity, alignment: .leading)
         }
-        .padding(.bottom, theme.spaceFixedMedium)
+        .padding(.vertical, theme.spaceFixedShorter)
     }
 }