From c2a26420fe53c0284dd9c776b43dd01e48090d4c Mon Sep 17 00:00:00 2001 From: Joanna Qu <55368679+joannaquu@users.noreply.github.com> Date: Wed, 13 Dec 2023 16:46:18 -0800 Subject: [PATCH 1/2] add subtle neutral button --- .../Demos/ButtonDemoController.swift | 2 ++ ios/FluentUI/Button/ButtonTokenSet.swift | 28 +++++++++++-------- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/ButtonDemoController.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/ButtonDemoController.swift index 922b271c61..4f16dce40f 100644 --- a/ios/FluentUI.Demo/FluentUI.Demo/Demos/ButtonDemoController.swift +++ b/ios/FluentUI.Demo/FluentUI.Demo/Demos/ButtonDemoController.swift @@ -141,6 +141,8 @@ extension ButtonStyle { return "Outline neutral" case .subtle: return "Subtle" + case .subtleNeutral: + return "Subtle neutral" case .danger: return "Danger" case .dangerOutline: diff --git a/ios/FluentUI/Button/ButtonTokenSet.swift b/ios/FluentUI/Button/ButtonTokenSet.swift index 2071c48b0e..1cf6b5f1a1 100644 --- a/ios/FluentUI/Button/ButtonTokenSet.swift +++ b/ios/FluentUI/Button/ButtonTokenSet.swift @@ -14,6 +14,7 @@ public enum ButtonStyle: Int, CaseIterable { outlineAccent, outlineNeutral, subtle, + subtleNeutral, danger, dangerOutline, dangerSubtle, @@ -30,12 +31,15 @@ public enum ButtonStyle: Int, CaseIterable { /// A button with brand border, brand foreground, and no background. case outlineAccent - /// A button with neutral border, neutral foreground, and no brackground. + /// A button with neutral border, neutral foreground, and no background. case outlineNeutral /// A button with no border, brand foreground, and no background. case subtle + /// A button with no border, neutral foreground, and no background. + case subtleNeutral + /// A button with no border, neutral foreground, and danger background. case danger @@ -133,7 +137,7 @@ public class ButtonTokenSet: ControlTokenSet { switch style() { case .accent, .floatingAccent: return theme.color(.brandBackground1) - case .outline, .outlineAccent, .outlineNeutral, .subtle, .dangerOutline, .dangerSubtle: + case .outline, .outlineAccent, .outlineNeutral, .subtle, .subtleNeutral, .dangerOutline, .dangerSubtle: return .clear case .danger: return theme.color(.dangerBackground2) @@ -146,7 +150,7 @@ public class ButtonTokenSet: ControlTokenSet { switch style() { case .accent, .floatingAccent: return theme.color(.brandBackground1Selected) - case .outline, .outlineAccent, .outlineNeutral, .subtle, .dangerOutline, .dangerSubtle: + case .outline, .outlineAccent, .outlineNeutral, .subtle, .subtleNeutral, .dangerOutline, .dangerSubtle: return .clear case .danger: return theme.color(.dangerBackground2) @@ -159,7 +163,7 @@ public class ButtonTokenSet: ControlTokenSet { switch style() { case .accent, .danger, .floatingAccent, .floatingSubtle: return theme.color(.background5) - case .outline, .outlineAccent, .outlineNeutral, .subtle, .dangerOutline, .dangerSubtle: + case .outline, .outlineAccent, .outlineNeutral, .subtle, .subtleNeutral, .dangerOutline, .dangerSubtle: return .clear } } @@ -168,7 +172,7 @@ public class ButtonTokenSet: ControlTokenSet { switch style() { case .accent, .floatingAccent: return theme.color(.brandBackground1Pressed) - case .outline, .outlineAccent, .outlineNeutral, .subtle, .dangerOutline, .dangerSubtle: + case .outline, .outlineAccent, .outlineNeutral, .subtle, .subtleNeutral, .dangerOutline, .dangerSubtle: return .clear case .danger: return theme.color(.dangerBackground2) @@ -179,7 +183,7 @@ public class ButtonTokenSet: ControlTokenSet { case .borderColor: return .uiColor { switch style() { - case .accent, .subtle, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle: + case .accent, .subtle, .subtleNeutral, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle: return .clear case .outline, .outlineAccent: return theme.color(.brandStroke1) @@ -192,7 +196,7 @@ public class ButtonTokenSet: ControlTokenSet { case .borderFocusedColor: return .uiColor { switch style() { - case .accent, .subtle, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle: + case .accent, .subtle, .subtleNeutral, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle: return .clear case .outline, .outlineAccent, .outlineNeutral, .dangerOutline: return theme.color(.strokeFocus2) @@ -201,7 +205,7 @@ public class ButtonTokenSet: ControlTokenSet { case .borderDisabledColor: return .uiColor { switch style() { - case .accent, .subtle, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle: + case .accent, .subtle, .subtleNeutral, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle: return .clear case .outline, .outlineAccent, .outlineNeutral, .dangerOutline: return theme.color(.strokeDisabled) @@ -210,7 +214,7 @@ public class ButtonTokenSet: ControlTokenSet { case .borderPressedColor: return .uiColor { switch style() { - case .accent, .subtle, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle: + case .accent, .subtle, .subtleNeutral, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle: return .clear case .outline, .outlineAccent: return theme.color(.brandStroke1Pressed) @@ -223,7 +227,7 @@ public class ButtonTokenSet: ControlTokenSet { case .borderWidth: return .float { switch style() { - case .accent, .subtle, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle: + case .accent, .subtle, .subtleNeutral, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle: return GlobalTokens.stroke(.widthNone) case .outline, .outlineAccent, .outlineNeutral, .dangerOutline: return GlobalTokens.stroke(.width10) @@ -245,7 +249,7 @@ public class ButtonTokenSet: ControlTokenSet { return theme.color(.foregroundOnColor) case .outline, .outlineAccent, .subtle: return theme.color(.brandForeground1) - case .outlineNeutral: + case .outlineNeutral, .subtleNeutral: return theme.color(.foreground1) case .danger: return theme.color(.foregroundLightStatic) @@ -264,7 +268,7 @@ public class ButtonTokenSet: ControlTokenSet { return theme.color(.foregroundOnColor) case .outline, .outlineAccent, .subtle: return theme.color(.brandForeground1Pressed) - case .outlineNeutral: + case .outlineNeutral, .subtleNeutral: return theme.color(.foreground1) case .danger: return theme.color(.foregroundLightStatic) From 8e65f94a871d7f32b8c5292c0c67881df8acb8b2 Mon Sep 17 00:00:00 2001 From: Joanna Qu <55368679+joannaquu@users.noreply.github.com> Date: Mon, 18 Dec 2023 10:23:53 -0800 Subject: [PATCH 2/2] rename to transparentNeutral --- .../Demos/ButtonDemoController.swift | 4 +-- ios/FluentUI/Button/ButtonTokenSet.swift | 26 +++++++++---------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/ButtonDemoController.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/ButtonDemoController.swift index 4f16dce40f..aa65b76096 100644 --- a/ios/FluentUI.Demo/FluentUI.Demo/Demos/ButtonDemoController.swift +++ b/ios/FluentUI.Demo/FluentUI.Demo/Demos/ButtonDemoController.swift @@ -141,8 +141,8 @@ extension ButtonStyle { return "Outline neutral" case .subtle: return "Subtle" - case .subtleNeutral: - return "Subtle neutral" + case .transparentNeutral: + return "Transparent neutral" case .danger: return "Danger" case .dangerOutline: diff --git a/ios/FluentUI/Button/ButtonTokenSet.swift b/ios/FluentUI/Button/ButtonTokenSet.swift index 1cf6b5f1a1..90d766dc9b 100644 --- a/ios/FluentUI/Button/ButtonTokenSet.swift +++ b/ios/FluentUI/Button/ButtonTokenSet.swift @@ -14,7 +14,7 @@ public enum ButtonStyle: Int, CaseIterable { outlineAccent, outlineNeutral, subtle, - subtleNeutral, + transparentNeutral, danger, dangerOutline, dangerSubtle, @@ -38,7 +38,7 @@ public enum ButtonStyle: Int, CaseIterable { case subtle /// A button with no border, neutral foreground, and no background. - case subtleNeutral + case transparentNeutral /// A button with no border, neutral foreground, and danger background. case danger @@ -137,7 +137,7 @@ public class ButtonTokenSet: ControlTokenSet { switch style() { case .accent, .floatingAccent: return theme.color(.brandBackground1) - case .outline, .outlineAccent, .outlineNeutral, .subtle, .subtleNeutral, .dangerOutline, .dangerSubtle: + case .outline, .outlineAccent, .outlineNeutral, .subtle, .transparentNeutral, .dangerOutline, .dangerSubtle: return .clear case .danger: return theme.color(.dangerBackground2) @@ -150,7 +150,7 @@ public class ButtonTokenSet: ControlTokenSet { switch style() { case .accent, .floatingAccent: return theme.color(.brandBackground1Selected) - case .outline, .outlineAccent, .outlineNeutral, .subtle, .subtleNeutral, .dangerOutline, .dangerSubtle: + case .outline, .outlineAccent, .outlineNeutral, .subtle, .transparentNeutral, .dangerOutline, .dangerSubtle: return .clear case .danger: return theme.color(.dangerBackground2) @@ -163,7 +163,7 @@ public class ButtonTokenSet: ControlTokenSet { switch style() { case .accent, .danger, .floatingAccent, .floatingSubtle: return theme.color(.background5) - case .outline, .outlineAccent, .outlineNeutral, .subtle, .subtleNeutral, .dangerOutline, .dangerSubtle: + case .outline, .outlineAccent, .outlineNeutral, .subtle, .transparentNeutral, .dangerOutline, .dangerSubtle: return .clear } } @@ -172,7 +172,7 @@ public class ButtonTokenSet: ControlTokenSet { switch style() { case .accent, .floatingAccent: return theme.color(.brandBackground1Pressed) - case .outline, .outlineAccent, .outlineNeutral, .subtle, .subtleNeutral, .dangerOutline, .dangerSubtle: + case .outline, .outlineAccent, .outlineNeutral, .subtle, .transparentNeutral, .dangerOutline, .dangerSubtle: return .clear case .danger: return theme.color(.dangerBackground2) @@ -183,7 +183,7 @@ public class ButtonTokenSet: ControlTokenSet { case .borderColor: return .uiColor { switch style() { - case .accent, .subtle, .subtleNeutral, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle: + case .accent, .subtle, .transparentNeutral, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle: return .clear case .outline, .outlineAccent: return theme.color(.brandStroke1) @@ -196,7 +196,7 @@ public class ButtonTokenSet: ControlTokenSet { case .borderFocusedColor: return .uiColor { switch style() { - case .accent, .subtle, .subtleNeutral, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle: + case .accent, .subtle, .transparentNeutral, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle: return .clear case .outline, .outlineAccent, .outlineNeutral, .dangerOutline: return theme.color(.strokeFocus2) @@ -205,7 +205,7 @@ public class ButtonTokenSet: ControlTokenSet { case .borderDisabledColor: return .uiColor { switch style() { - case .accent, .subtle, .subtleNeutral, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle: + case .accent, .subtle, .transparentNeutral, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle: return .clear case .outline, .outlineAccent, .outlineNeutral, .dangerOutline: return theme.color(.strokeDisabled) @@ -214,7 +214,7 @@ public class ButtonTokenSet: ControlTokenSet { case .borderPressedColor: return .uiColor { switch style() { - case .accent, .subtle, .subtleNeutral, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle: + case .accent, .subtle, .transparentNeutral, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle: return .clear case .outline, .outlineAccent: return theme.color(.brandStroke1Pressed) @@ -227,7 +227,7 @@ public class ButtonTokenSet: ControlTokenSet { case .borderWidth: return .float { switch style() { - case .accent, .subtle, .subtleNeutral, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle: + case .accent, .subtle, .transparentNeutral, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle: return GlobalTokens.stroke(.widthNone) case .outline, .outlineAccent, .outlineNeutral, .dangerOutline: return GlobalTokens.stroke(.width10) @@ -249,7 +249,7 @@ public class ButtonTokenSet: ControlTokenSet { return theme.color(.foregroundOnColor) case .outline, .outlineAccent, .subtle: return theme.color(.brandForeground1) - case .outlineNeutral, .subtleNeutral: + case .outlineNeutral, .transparentNeutral: return theme.color(.foreground1) case .danger: return theme.color(.foregroundLightStatic) @@ -268,7 +268,7 @@ public class ButtonTokenSet: ControlTokenSet { return theme.color(.foregroundOnColor) case .outline, .outlineAccent, .subtle: return theme.color(.brandForeground1Pressed) - case .outlineNeutral, .subtleNeutral: + case .outlineNeutral, .transparentNeutral: return theme.color(.foreground1) case .danger: return theme.color(.foregroundLightStatic)