chore: more management of colors (#264)

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

DesignToolbox/DesignToolbox.xcworkspace/xcuserdata/xhrs0459.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist

@@ -3,22 +3,4 @@
    uuid = "B4A15A02-0B7C-4A17-81BE-9CA389B02C0B"
    type = "0"
    version = "2.0">
-   <Breakpoints>
-      <BreakpointProxy
-         BreakpointExtensionID = "Xcode.Breakpoint.FileBreakpoint">
-         <BreakpointContent
-            uuid = "B2039618-7129-4C46-B831-E1CBCBA78082"
-            shouldBeEnabled = "Yes"
-            ignoreCount = "0"
-            continueAfterRunningActions = "No"
-            filePath = "../OUDS/Core/Components/Sources/Checkbox/Internal/OUDSCheckboxLabel.swift"
-            startingColumnNumber = "9223372036854775807"
-            endingColumnNumber = "9223372036854775807"
-            startingLineNumber = "95"
-            endingLineNumber = "95"
-            landmarkName = "labelColor"
-            landmarkType = "24">
-         </BreakpointContent>
-      </BreakpointProxy>
-   </Breakpoints>
 </Bucket>

DesignToolbox/DesignToolbox/Pages/Components/Checkbox/CheckboxConfiguration.swift

@@ -53,6 +53,10 @@ final class CheckboxConfigurationModel: ComponentConfiguration {
 
     @Published var helperTextContent: String
 
+    private var isReadOnly: Bool {
+        status == .readOnly
+    }
+
     // MARK: - Internal types
 
     enum DesignToolboxCheckboxStatus: CaseIterable, CustomStringConvertible { // CheckboxInternalState is not accessible
@@ -123,7 +127,7 @@ final class CheckboxConfigurationModel: ComponentConfiguration {
         } else {
             code =
               """
-            OUDSCheckbox(state: $state, label: \"Label\"\(helperTextPatern)\(iconPatern)\(isInversedPattern)\(isErrorPattern)\(dividerPatern))
+            OUDSCheckbox(state: $state, label: \"Label\"\(helperTextPatern)\(iconPatern)\(isInversedPattern)\(isErrorPattern)\(isReadOnlyPattern)\(dividerPatern))
             \(disableCode))
             """
         }
@@ -154,13 +158,21 @@ final class CheckboxConfigurationModel: ComponentConfiguration {
     }
 
     private var isErrorPattern: String {
-        if isError && status == .enabled {
+        if isError && status == .enabled && !isReadOnly {
             return ", isError: true"
         } else {
             return ""
         }
     }
 
+    private var isReadOnlyPattern: String {
+        if isReadOnly && !isError {
+            return ", isReadOnly: true"
+        } else {
+            return ""
+        }
+    }
+
     private var dividerPatern: String {
         divider ? ", divider: true" : ""
     }

DesignToolbox/DesignToolbox/Resources/en.lproj/Localizable.strings

@@ -147,7 +147,7 @@
 
 // TODO: #264 - Update wording
 "app_components_checkbox_label" = "Checkbox";
-"app_components_checkbox_description_text" = "A checkbox is a component that allows the user to toggle between two or three states, typically \"on\", \"off\" or \"undeterminate\". It is often represented as a square whichc an be ticked or not and color to indicate the current state. Checkboxes are used to select things like features, options, or settings in an intuitive and visual manner.";
+"app_components_checkbox_description_text" = "A checkbox is a component that allows the user to toggle between two or three states, typically \"on\", \"off\" or \"undeterminate\". It is often represented as a square which can be ticked or not, and the square may vary with different colors and border widths to indicate the current state. Checkboxes are used to select things like features, options, or settings in an intuitive and visual manner.";
 "app_components_checkbox_label_text" = "Label";
 "app_components_checkbox_switchOnly_label" = "Checkbox only";
 "app_components_checkbox_helperText_text" = "Helper Text";

OUDS/Core/Components/Sources/Checkbox/Internal/OUDSCheckboxLabel.swift

@@ -12,6 +12,7 @@
 //
 
 import OUDS
+import OUDSFoundations
 import OUDSTokensSemantic
 import SwiftUI
 
@@ -60,7 +61,7 @@ struct OUDSCheckboxLabel: View {
             Text(LocalizedStringKey(items.label))
                 .typeLabelDefaultLarge(theme)
                 .multilineTextAlignment(.leading)
-                .foregroundStyle(labelColor)
+                .foregroundStyle(labelTextColor)
                 .frame(maxWidth: .infinity, alignment: .leading)
 
             if let helperText = items.helperText {
@@ -91,13 +92,26 @@ struct OUDSCheckboxLabel: View {
 
     // MARK: - Colors
 
-    private var labelColor: Color {
-        switch internalState {
-        case .enabled, .pressed, .hover, .readOnly:
-            (items.isError ? theme.colors.colorContentStatusNegative : theme.colors.colorContentDefault)
-                .color(for: colorScheme)
-        case .disabled:
-            theme.colors.colorContentDisabled.color(for: colorScheme)
+    private var labelTextColor: Color {
+        if items.isError {
+            switch internalState {
+            case .enabled:
+                return theme.colors.colorActionNegativeEnabled.color(for: colorScheme)
+            case .hover:
+                return theme.colors.colorActionNegativeHover.color(for: colorScheme)
+            case .pressed:
+                return theme.colors.colorActionNegativePressed.color(for: colorScheme)
+            case .readOnly, .disabled:
+                OL.fatal("An OUDSCheckbox with a disabled state and an error situation has been detected, which is not allowed."
+                             + " Only non-error situation are allowed to have a disabled state.")
+            }
+        } else {
+            switch internalState {
+            case .enabled, .hover, .pressed, .readOnly:
+                return theme.colors.colorContentDefault.color(for: colorScheme)
+            case .disabled:
+                return theme.colors.colorContentDisabled.color(for: colorScheme)
+            }
         }
     }
 

OUDS/Core/Components/Sources/Checkbox/Internal/OUDSCheckboxSelectorButton.swift

@@ -56,6 +56,34 @@ struct OUDSCheckboxSelectorButton: View {
             .scaledToFit()
             .modifier(SelectorFrameModifier())
             .accessibilityHidden(true)
+            .foregroundColor(appliedColor.color(for: colorScheme))
+    }
+
+    private var appliedColor: MultipleColorSemanticTokens {
+        if isError {
+            switch internalState {
+            case .enabled:
+                return theme.checkRadio.checkRadioColorContentAssetErrorEnabled
+            case .hover:
+                return theme.checkRadio.checkRadioColorContentAssetErrorHover
+            case .pressed:
+                return theme.checkRadio.checkRadioColorContentAssetErrorPressed
+            case .disabled, .readOnly:
+                OL.fatal("An OUDSCheckbox with a disabled state and an error situation has been detected, which is not allowed"
+                         + " Only non-error situation are allowed to have a disabled state.")
+            }
+        } else {
+            switch internalState {
+            case .enabled:
+                return theme.checkRadio.checkRadioColorContentAssetSelected
+            case .hover:
+                return theme.checkRadio.checkRadioColorContentAssetHover
+            case .pressed:
+                return theme.checkRadio.checkRadioColorContentAssetPressed
+            case .disabled, .readOnly:
+                return theme.checkRadio.checkRadioColorContentAssetDisabled
+            }
+        }
     }
 }
 

OUDS/Core/Components/Sources/Checkbox/OUDSCheckbox.swift

@@ -35,6 +35,14 @@ import SwiftUI
 /// - **unselected**: the checkbox is empty, does not contain a tick, the user has made the action to unselect or did not select yet the checkbox
 /// - **undeterminate**: mike a prefilled or preticked checkbox, the user did not do anything on it yet
 ///
+/// ## Particular cases
+///
+/// An ``OUDSCheckbox`` can be related to an error situation, for example troubles for a formular.
+/// A dedicated look and feel is implemented for that if the `isError` flag is risen.
+/// In addition, the ``OUDSCheckbox`` can be in read only mode, i.e. the user cannot interact with the component yet but this component must not be considered
+/// as disabled.
+/// However the design kit does not manage the case where the component is both in read only mode and in an error context, this is forbidden by design.
+///
 /// ## Code samples
 ///
 /// ```swift
@@ -132,6 +140,7 @@ public struct OUDSCheckbox: View {
     // MARK: - Initializers
 
     /// Creates a checkbox with no label.
+    /// **The design system does not allow to have both an error situation and a read only mode for the component.**
     ///
     /// - Parameters:
     ///    - state: A binding to a property that determines wether the selector is ticked, unticked or preticked.
@@ -140,11 +149,15 @@ public struct OUDSCheckbox: View {
     public init(state: Binding<SelectorState>,
                 isError: Bool = false,
                 isReadOnly: Bool = false) {
+        if isError && isReadOnly {
+            OL.fatal("It is forbidden by design to have an OUDSCheckbox in an error context and in read only mode")
+        }
         self._state = state
         self.layout = .selectorOnly(isError, isReadOnly)
     }
 
     /// Creates a checkbox with label and optional helper text, icon, divider.
+    /// **The design system does not allow to have both an error situation and a read only mode for the component.**
     ///
     /// - Parameters:
     ///   - state: A binding to a property that determines wether the selector is ticked, unticker or preticked.
@@ -163,6 +176,9 @@ public struct OUDSCheckbox: View {
                 isError: Bool = false,
                 isReadOnly: Bool = false,
                 divider: Bool = false) {
+        if isError && isReadOnly {
+            OL.fatal("It is forbidden by design to have an OUDSCheckbox in an error context and in read only mode")
+        }
         self._state = state
         if isInversed {
             self.layout = .inverse(.init(label: label,