Skip to content

Commit

Permalink
Add transparent neutral button (#1944)
Browse files Browse the repository at this point in the history 
* add subtle neutral button

* rename to transparentNeutral
  • Loading branch information
@joannaquu
joannaquu authored Dec 20, 2023
1 parent 22f70c5 commit 3053e63
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 12 deletions.
2 changes: 2 additions & 0 deletions ios/FluentUI.Demo/FluentUI.Demo/Demos/ButtonDemoController.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,8 @@ extension ButtonStyle {
return "Outline neutral"
case .subtle:
return "Subtle"
case .transparentNeutral:
return "Transparent neutral"
case .danger:
return "Danger"
case .dangerOutline:
Expand Down
28 changes: 16 additions & 12 deletions ios/FluentUI/Button/ButtonTokenSet.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ public enum ButtonStyle: Int, CaseIterable {
outlineAccent,
outlineNeutral,
subtle,
transparentNeutral,
danger,
dangerOutline,
dangerSubtle,
Expand All @@ -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 transparentNeutral

/// A button with no border, neutral foreground, and danger background.
case danger

Expand Down Expand Up @@ -133,7 +137,7 @@ public class ButtonTokenSet: ControlTokenSet<ButtonToken> {
switch style() {
case .accent, .floatingAccent:
return theme.color(.brandBackground1)
case .outline, .outlineAccent, .outlineNeutral, .subtle, .dangerOutline, .dangerSubtle:
case .outline, .outlineAccent, .outlineNeutral, .subtle, .transparentNeutral, .dangerOutline, .dangerSubtle:
return .clear
case .danger:
return theme.color(.dangerBackground2)
Expand All @@ -146,7 +150,7 @@ public class ButtonTokenSet: ControlTokenSet<ButtonToken> {
switch style() {
case .accent, .floatingAccent:
return theme.color(.brandBackground1Selected)
case .outline, .outlineAccent, .outlineNeutral, .subtle, .dangerOutline, .dangerSubtle:
case .outline, .outlineAccent, .outlineNeutral, .subtle, .transparentNeutral, .dangerOutline, .dangerSubtle:
return .clear
case .danger:
return theme.color(.dangerBackground2)
Expand All @@ -159,7 +163,7 @@ public class ButtonTokenSet: ControlTokenSet<ButtonToken> {
switch style() {
case .accent, .danger, .floatingAccent, .floatingSubtle:
return theme.color(.background5)
case .outline, .outlineAccent, .outlineNeutral, .subtle, .dangerOutline, .dangerSubtle:
case .outline, .outlineAccent, .outlineNeutral, .subtle, .transparentNeutral, .dangerOutline, .dangerSubtle:
return .clear
}
}
Expand All @@ -168,7 +172,7 @@ public class ButtonTokenSet: ControlTokenSet<ButtonToken> {
switch style() {
case .accent, .floatingAccent:
return theme.color(.brandBackground1Pressed)
case .outline, .outlineAccent, .outlineNeutral, .subtle, .dangerOutline, .dangerSubtle:
case .outline, .outlineAccent, .outlineNeutral, .subtle, .transparentNeutral, .dangerOutline, .dangerSubtle:
return .clear
case .danger:
return theme.color(.dangerBackground2)
Expand All @@ -179,7 +183,7 @@ public class ButtonTokenSet: ControlTokenSet<ButtonToken> {
case .borderColor:
return .uiColor {
switch style() {
case .accent, .subtle, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle:
case .accent, .subtle, .transparentNeutral, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle:
return .clear
case .outline, .outlineAccent:
return theme.color(.brandStroke1)
Expand All @@ -192,7 +196,7 @@ public class ButtonTokenSet: ControlTokenSet<ButtonToken> {
case .borderFocusedColor:
return .uiColor {
switch style() {
case .accent, .subtle, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle:
case .accent, .subtle, .transparentNeutral, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle:
return .clear
case .outline, .outlineAccent, .outlineNeutral, .dangerOutline:
return theme.color(.strokeFocus2)
Expand All @@ -201,7 +205,7 @@ public class ButtonTokenSet: ControlTokenSet<ButtonToken> {
case .borderDisabledColor:
return .uiColor {
switch style() {
case .accent, .subtle, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle:
case .accent, .subtle, .transparentNeutral, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle:
return .clear
case .outline, .outlineAccent, .outlineNeutral, .dangerOutline:
return theme.color(.strokeDisabled)
Expand All @@ -210,7 +214,7 @@ public class ButtonTokenSet: ControlTokenSet<ButtonToken> {
case .borderPressedColor:
return .uiColor {
switch style() {
case .accent, .subtle, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle:
case .accent, .subtle, .transparentNeutral, .danger, .dangerSubtle, .floatingAccent, .floatingSubtle:
return .clear
case .outline, .outlineAccent:
return theme.color(.brandStroke1Pressed)
Expand All @@ -223,7 +227,7 @@ public class ButtonTokenSet: ControlTokenSet<ButtonToken> {
case .borderWidth:
return .float {
switch style() {
case .accent, .subtle, .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)
Expand All @@ -245,7 +249,7 @@ public class ButtonTokenSet: ControlTokenSet<ButtonToken> {
return theme.color(.foregroundOnColor)
case .outline, .outlineAccent, .subtle:
return theme.color(.brandForeground1)
case .outlineNeutral:
case .outlineNeutral, .transparentNeutral:
return theme.color(.foreground1)
case .danger:
return theme.color(.foregroundLightStatic)
Expand All @@ -264,7 +268,7 @@ public class ButtonTokenSet: ControlTokenSet<ButtonToken> {
return theme.color(.foregroundOnColor)
case .outline, .outlineAccent, .subtle:
return theme.color(.brandForeground1Pressed)
case .outlineNeutral:
case .outlineNeutral, .transparentNeutral:
return theme.color(.foreground1)
case .danger:
return theme.color(.foregroundLightStatic)
Expand Down

0 comments on commit 3053e63

Please sign in to comment.