Delete colors pass 5 (#3339)

* Remove brandedPressed* (except secondary text) * Remove brandedDiabled* except Border * Remove brandedChecked* * Remove defaultDisabledSecondaryContent * Update tests * Change files
microsoft · Jan 4, 2024 · da4796b · da4796b
1 parent b484a7c
commit da4796b
Show file tree

Hide file tree

Showing 17 changed files with 42 additions and 311 deletions.
diff --git a/apps/fluent-tester/src/theme/applyBrand.ts b/apps/fluent-tester/src/theme/applyBrand.ts
@@ -152,8 +152,6 @@ export const applyBrand = (parent: Theme, currentBrand: string): PartialTheme =>
           defaultPressedBackground: ramp.App2,
           defaultPressedBorder: ramp.App5,
           brandedBackground: ramp.App6,
-          brandedPressedBackground: ramp.App8,
-          brandedPressedBorder: ramp.App7,
           defaultCheckedHoveredBackground: ramp.App1,
           ...getCurrentBrandAliasTokens(parent.name, ramp.AppPrimary),
         },

diff --git a/change/@fluentui-react-native-android-theme-ae45e2d8-9a4a-44f9-a66e-48fb52c63585.json b/change/@fluentui-react-native-android-theme-ae45e2d8-9a4a-44f9-a66e-48fb52c63585.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": " Remove unused colors",
+  "packageName": "@fluentui-react-native/android-theme",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-apple-theme-2b16aafb-ac09-4ef3-bc32-0e3b8ed677d3.json b/change/@fluentui-react-native-apple-theme-2b16aafb-ac09-4ef3-bc32-0e3b8ed677d3.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": " Remove unused colors",
+  "packageName": "@fluentui-react-native/apple-theme",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-default-theme-d9d4ce2d-fd2f-47eb-988d-721c444755c4.json b/change/@fluentui-react-native-default-theme-d9d4ce2d-fd2f-47eb-988d-721c444755c4.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": " Remove unused colors",
+  "packageName": "@fluentui-react-native/default-theme",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-tester-ae01632e-3076-41c9-8ea6-6e6035f127e0.json b/change/@fluentui-react-native-tester-ae01632e-3076-41c9-8ea6-6e6035f127e0.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Remove unused colors",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-theme-types-f444d10a-766e-4323-be7d-ede70bbb98df.json b/change/@fluentui-react-native-theme-types-f444d10a-766e-4323-be7d-ede70bbb98df.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": " Remove unused colors",
+  "packageName": "@fluentui-react-native/theme-types",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-win32-theme-a212d105-1c4f-461d-a086-d431ce85679e.json b/change/@fluentui-react-native-win32-theme-a212d105-1c4f-461d-a086-d431ce85679e.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": " Remove unused colors",
+  "packageName": "@fluentui-react-native/win32-theme",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/theming/android-theme/src/__tests__/__snapshots__/android-theme.test.ts.snap b/packages/theming/android-theme/src/__tests__/__snapshots__/android-theme.test.ts.snap
@@ -33,20 +33,9 @@ exports[`createAndroidTheme test option { appearance: 'dark', defaultAppearance:
     "brandStroke1Pressed": "#96c6fa",
     "brandStroke1Selected": "#77b7f7",
     "brandedBackground": "#0086F0",
-    "brandedCheckedBackground": "#0078D4",
-    "brandedCheckedContent": "#FFFFFF",
-    "brandedCheckedHoveredBackground": "#0078D4",
-    "brandedCheckedHoveredContent": "#FFFFFF",
-    "brandedDisabledBackground": "#E1E1E1",
     "brandedDisabledBorder": "transparent",
-    "brandedDisabledContent": "#404040",
-    "brandedDisabledIcon": "#404040",
     "brandedFocusedSecondaryContent": "#6E6E6E",
     "brandedHoveredSecondaryContent": "#6E6E6E",
-    "brandedPressedBackground": "#0078D4",
-    "brandedPressedBorder": "transparent",
-    "brandedPressedContent": "#FFFFFF",
-    "brandedPressedIcon": "#FFFFFF",
     "brandedPressedSecondaryContent": "#6E6E6E",
     "brandedSecondaryContent": "#6E6E6E",
     "buttonBackground": "#0086F0",
@@ -81,7 +70,6 @@ exports[`createAndroidTheme test option { appearance: 'dark', defaultAppearance:
     "defaultDisabledBorder": "transparent",
     "defaultDisabledContent": "#004C87",
     "defaultDisabledIcon": "#004C87",
-    "defaultDisabledSecondaryContent": "#919191",
     "defaultHoveredSecondaryContent": "#6E6E6E",
     "defaultIcon": "#6E6E6E",
     "defaultPressedBackground": "#004C87",
@@ -634,20 +622,9 @@ exports[`createAndroidTheme test option { appearance: 'darkElevated', defaultApp
     "brandStroke1Pressed": "#96c6fa",
     "brandStroke1Selected": "#77b7f7",
     "brandedBackground": "#0086F0",
-    "brandedCheckedBackground": "#0078D4",
-    "brandedCheckedContent": "#FFFFFF",
-    "brandedCheckedHoveredBackground": "#0078D4",
-    "brandedCheckedHoveredContent": "#FFFFFF",
-    "brandedDisabledBackground": "#E1E1E1",
     "brandedDisabledBorder": "transparent",
-    "brandedDisabledContent": "#404040",
-    "brandedDisabledIcon": "#404040",
     "brandedFocusedSecondaryContent": "#6E6E6E",
     "brandedHoveredSecondaryContent": "#6E6E6E",
-    "brandedPressedBackground": "#0078D4",
-    "brandedPressedBorder": "transparent",
-    "brandedPressedContent": "#FFFFFF",
-    "brandedPressedIcon": "#FFFFFF",
     "brandedPressedSecondaryContent": "#6E6E6E",
     "brandedSecondaryContent": "#6E6E6E",
     "buttonBackground": "#0086F0",
@@ -682,7 +659,6 @@ exports[`createAndroidTheme test option { appearance: 'darkElevated', defaultApp
     "defaultDisabledBorder": "transparent",
     "defaultDisabledContent": "#004C87",
     "defaultDisabledIcon": "#004C87",
-    "defaultDisabledSecondaryContent": "#919191",
     "defaultHoveredSecondaryContent": "#6E6E6E",
     "defaultIcon": "#6E6E6E",
     "defaultPressedBackground": "#004C87",
@@ -1235,20 +1211,9 @@ exports[`createAndroidTheme test option { appearance: 'dynamic', defaultAppearan
     "brandStroke1Pressed": "#96c6fa",
     "brandStroke1Selected": "#77b7f7",
     "brandedBackground": "#0086F0",
-    "brandedCheckedBackground": "#0078D4",
-    "brandedCheckedContent": "#FFFFFF",
-    "brandedCheckedHoveredBackground": "#0078D4",
-    "brandedCheckedHoveredContent": "#FFFFFF",
-    "brandedDisabledBackground": "#E1E1E1",
     "brandedDisabledBorder": "transparent",
-    "brandedDisabledContent": "#404040",
-    "brandedDisabledIcon": "#404040",
     "brandedFocusedSecondaryContent": "#6E6E6E",
     "brandedHoveredSecondaryContent": "#6E6E6E",
-    "brandedPressedBackground": "#0078D4",
-    "brandedPressedBorder": "transparent",
-    "brandedPressedContent": "#FFFFFF",
-    "brandedPressedIcon": "#FFFFFF",
     "brandedPressedSecondaryContent": "#6E6E6E",
     "brandedSecondaryContent": "#6E6E6E",
     "buttonBackground": "#0086F0",
@@ -1283,7 +1248,6 @@ exports[`createAndroidTheme test option { appearance: 'dynamic', defaultAppearan
     "defaultDisabledBorder": "transparent",
     "defaultDisabledContent": "#004C87",
     "defaultDisabledIcon": "#004C87",
-    "defaultDisabledSecondaryContent": "#919191",
     "defaultHoveredSecondaryContent": "#6E6E6E",
     "defaultIcon": "#6E6E6E",
     "defaultPressedBackground": "#004C87",
@@ -1836,20 +1800,9 @@ exports[`createAndroidTheme test option { appearance: 'highContrast', defaultApp
     "brandStroke1Pressed": "#96c6fa",
     "brandStroke1Selected": "#77b7f7",
     "brandedBackground": "#0086F0",
-    "brandedCheckedBackground": "#0078D4",
-    "brandedCheckedContent": "#FFFFFF",
-    "brandedCheckedHoveredBackground": "#0078D4",
-    "brandedCheckedHoveredContent": "#FFFFFF",
-    "brandedDisabledBackground": "#E1E1E1",
     "brandedDisabledBorder": "transparent",
-    "brandedDisabledContent": "#404040",
-    "brandedDisabledIcon": "#404040",
     "brandedFocusedSecondaryContent": "#6E6E6E",
     "brandedHoveredSecondaryContent": "#6E6E6E",
-    "brandedPressedBackground": "#0078D4",
-    "brandedPressedBorder": "transparent",
-    "brandedPressedContent": "#FFFFFF",
-    "brandedPressedIcon": "#FFFFFF",
     "brandedPressedSecondaryContent": "#6E6E6E",
     "brandedSecondaryContent": "#6E6E6E",
     "buttonBackground": "#0086F0",
@@ -1884,7 +1837,6 @@ exports[`createAndroidTheme test option { appearance: 'highContrast', defaultApp
     "defaultDisabledBorder": "transparent",
     "defaultDisabledContent": "#004C87",
     "defaultDisabledIcon": "#004C87",
-    "defaultDisabledSecondaryContent": "#919191",
     "defaultHoveredSecondaryContent": "#6E6E6E",
     "defaultIcon": "#6E6E6E",
     "defaultPressedBackground": "#004C87",
@@ -2437,20 +2389,9 @@ exports[`createAndroidTheme test option { appearance: 'light', defaultAppearance
     "brandStroke1Pressed": "#0e4775",
     "brandStroke1Selected": "#0f548c",
     "brandedBackground": "#0078D4",
-    "brandedCheckedBackground": "#2B88D8",
-    "brandedCheckedContent": "#212121",
-    "brandedCheckedHoveredBackground": "#2B88D8",
-    "brandedCheckedHoveredContent": "#212121",
-    "brandedDisabledBackground": "#E1E1E1",
     "brandedDisabledBorder": "transparent",
-    "brandedDisabledContent": "#ACACAC",
-    "brandedDisabledIcon": "#ACACAC",
     "brandedFocusedSecondaryContent": "#919191",
     "brandedHoveredSecondaryContent": "#919191",
-    "brandedPressedBackground": "#2B88D8",
-    "brandedPressedBorder": "transparent",
-    "brandedPressedContent": "#212121",
-    "brandedPressedIcon": "#212121",
     "brandedPressedSecondaryContent": "#919191",
     "brandedSecondaryContent": "#919191",
     "buttonBackground": "#0078D4",
@@ -2485,7 +2426,6 @@ exports[`createAndroidTheme test option { appearance: 'light', defaultAppearance
     "defaultDisabledBorder": "transparent",
     "defaultDisabledContent": "#ACACAC",
     "defaultDisabledIcon": "#ACACAC",
-    "defaultDisabledSecondaryContent": "#6E6E6E",
     "defaultHoveredSecondaryContent": "#919191",
     "defaultIcon": "#919191",
     "defaultPressedBackground": "#005A9E",
@@ -3038,20 +2978,9 @@ exports[`getAndroidTheme dark appearance test 1`] = `
     "brandStroke1Pressed": "#96c6fa",
     "brandStroke1Selected": "#77b7f7",
     "brandedBackground": "#0086F0",
-    "brandedCheckedBackground": "#0078D4",
-    "brandedCheckedContent": "#FFFFFF",
-    "brandedCheckedHoveredBackground": "#0078D4",
-    "brandedCheckedHoveredContent": "#FFFFFF",
-    "brandedDisabledBackground": "#E1E1E1",
     "brandedDisabledBorder": "transparent",
-    "brandedDisabledContent": "#404040",
-    "brandedDisabledIcon": "#404040",
     "brandedFocusedSecondaryContent": "#6E6E6E",
     "brandedHoveredSecondaryContent": "#6E6E6E",
-    "brandedPressedBackground": "#0078D4",
-    "brandedPressedBorder": "transparent",
-    "brandedPressedContent": "#FFFFFF",
-    "brandedPressedIcon": "#FFFFFF",
     "brandedPressedSecondaryContent": "#6E6E6E",
     "brandedSecondaryContent": "#6E6E6E",
     "buttonBackground": "#0086F0",
@@ -3086,7 +3015,6 @@ exports[`getAndroidTheme dark appearance test 1`] = `
     "defaultDisabledBorder": "transparent",
     "defaultDisabledContent": "#004C87",
     "defaultDisabledIcon": "#004C87",
-    "defaultDisabledSecondaryContent": "#919191",
     "defaultHoveredSecondaryContent": "#6E6E6E",
     "defaultIcon": "#6E6E6E",
     "defaultPressedBackground": "#004C87",
@@ -3639,20 +3567,9 @@ exports[`getAndroidTheme light appearance test 1`] = `
     "brandStroke1Pressed": "#0e4775",
     "brandStroke1Selected": "#0f548c",
     "brandedBackground": "#0078D4",
-    "brandedCheckedBackground": "#2B88D8",
-    "brandedCheckedContent": "#212121",
-    "brandedCheckedHoveredBackground": "#2B88D8",
-    "brandedCheckedHoveredContent": "#212121",
-    "brandedDisabledBackground": "#E1E1E1",
     "brandedDisabledBorder": "transparent",
-    "brandedDisabledContent": "#ACACAC",
-    "brandedDisabledIcon": "#ACACAC",
     "brandedFocusedSecondaryContent": "#919191",
     "brandedHoveredSecondaryContent": "#919191",
-    "brandedPressedBackground": "#2B88D8",
-    "brandedPressedBorder": "transparent",
-    "brandedPressedContent": "#212121",
-    "brandedPressedIcon": "#212121",
     "brandedPressedSecondaryContent": "#919191",
     "brandedSecondaryContent": "#919191",
     "buttonBackground": "#0078D4",
@@ -3687,7 +3604,6 @@ exports[`getAndroidTheme light appearance test 1`] = `
     "defaultDisabledBorder": "transparent",
     "defaultDisabledContent": "#ACACAC",
     "defaultDisabledIcon": "#ACACAC",
-    "defaultDisabledSecondaryContent": "#6E6E6E",
     "defaultHoveredSecondaryContent": "#919191",
     "defaultIcon": "#919191",
     "defaultPressedBackground": "#005A9E",

diff --git a/packages/theming/android-theme/src/colorsTokens.ts b/packages/theming/android-theme/src/colorsTokens.ts
@@ -119,26 +119,13 @@ export function paletteFromAndroidColors(p: FluentUIAndroidPalette): ThemeColorD
 
     brandedBackground: p.communicationBlue,
 
-    brandedPressedBackground: p.communicationBlueTint10,
-    brandedPressedBorder: 'transparent',
-    brandedPressedContent: p.textDominant,
-    brandedPressedIcon: p.textDominant,
-
-    brandedDisabledBackground: p.gray100,
     brandedDisabledBorder: 'transparent',
-    brandedDisabledContent: p.textDisabled,
-    brandedDisabledIcon: p.textDisabled,
 
     defaultCheckedBackground: p.communicationBlueTint10,
     defaultCheckedContent: p.textDominant,
     defaultCheckedHoveredBackground: p.communicationBlueTint10,
     defaultCheckedHoveredContent: p.textDominant,
 
-    brandedCheckedBackground: p.communicationBlueTint10,
-    brandedCheckedContent: p.textDominant,
-    brandedCheckedHoveredBackground: p.communicationBlueTint10,
-    brandedCheckedHoveredContent: p.textDominant,
-
     ghostCheckedBackground: 'transparent',
     ghostCheckedContent: p.communicationBlueTint20,
     ghostCheckedHoveredBackground: 'transparent',
@@ -155,7 +142,6 @@ export function paletteFromAndroidColors(p: FluentUIAndroidPalette): ThemeColorD
     brandedHoveredSecondaryContent: p.iconsSecondary,
     brandedPressedSecondaryContent: p.iconsSecondary,
 
-    defaultDisabledSecondaryContent: p.textSecondary,
     defaultHoveredSecondaryContent: p.iconsSecondary,
     defaultPressedSecondaryContent: p.iconsSecondary,
 

diff --git a/packages/theming/apple-theme/src/__tests__/__snapshots__/apple-theme.test.ts.snap b/packages/theming/apple-theme/src/__tests__/__snapshots__/apple-theme.test.ts.snap
@@ -69,34 +69,9 @@ exports[`createAppleTheme test 1`] = `
     "brandStroke1": "#0078d4",
     "brandStroke2": "#c7e0f4",
     "brandedBackground": "#0078d4",
-    "brandedCheckedBackground": {
-      "dynamic": {
-        "dark": "#1890F1",
-        "highContrastDark": undefined,
-        "highContrastLight": undefined,
-        "light": "#0078D4",
-      },
-    },
-    "brandedCheckedContent": "#ffffff",
-    "brandedCheckedHoveredBackground": {
-      "dynamic": {
-        "dark": "#1890F1",
-        "highContrastDark": undefined,
-        "highContrastLight": undefined,
-        "light": "#0078D4",
-      },
-    },
-    "brandedCheckedHoveredContent": "#ffffff",
-    "brandedDisabledBackground": "#f0f0f0",
     "brandedDisabledBorder": "transparent",
-    "brandedDisabledContent": "#757575",
-    "brandedDisabledIcon": "#616161",
     "brandedFocusedSecondaryContent": "#ffffff",
     "brandedHoveredSecondaryContent": "#ffffff",
-    "brandedPressedBackground": "#106ebe",
-    "brandedPressedBorder": "transparent",
-    "brandedPressedContent": "#ffffff",
-    "brandedPressedIcon": "#ffffff",
     "brandedPressedSecondaryContent": {
       "colorWithSystemEffect": {
         "baseColor": "#ffffff",
@@ -192,7 +167,6 @@ exports[`createAppleTheme test 1`] = `
     "defaultDisabledBorder": "#d6d6d6",
     "defaultDisabledContent": "#757575",
     "defaultDisabledIcon": "#616161",
-    "defaultDisabledSecondaryContent": "#757575",
     "defaultFocusedBackground": "#ffffff",
     "defaultFocusedBorder": "#d6d6d6",
     "defaultFocusedContent": "#000000",

diff --git a/packages/theming/apple-theme/src/appleColors.ios.ts b/packages/theming/apple-theme/src/appleColors.ios.ts
@@ -193,26 +193,13 @@ export function paletteFromAppleColors(isLightMode: boolean, isElevated: boolean
 
     brandedBackground: fluentApple.communicationBlue,
 
-    brandedPressedBackground: fluentApple.buttonBackgroundFilledPressed,
-    brandedPressedBorder: 'transparent',
-    brandedPressedContent: fluent2AliasColorTokens.neutralForegroundOnColor,
-    brandedPressedIcon: fluent2AliasColorTokens.neutralForegroundOnColor,
-
-    brandedDisabledBackground: fluent2AliasColorTokens.neutralBackgroundDisabled,
     brandedDisabledBorder: 'transparent',
-    brandedDisabledContent: fluent2AliasColorTokens.neutralForegroundOnColor,
-    brandedDisabledIcon: fluent2AliasColorTokens.neutralForegroundOnColor,
 
     defaultCheckedBackground: 'transparent',
     defaultCheckedContent: fluentApple.communicationBlue,
     defaultCheckedHoveredBackground: 'transparent',
     defaultCheckedHoveredContent: fluentApple.communicationBlue,
 
-    brandedCheckedBackground: fluentApple.communicationBlue,
-    brandedCheckedContent: fluent2AliasColorTokens.neutralForegroundOnColor,
-    brandedCheckedHoveredBackground: fluent2AliasColorTokens.neutralForegroundOnColor,
-    brandedCheckedHoveredContent: fluent2AliasColorTokens.neutralForegroundOnColor,
-
     ghostCheckedBackground: 'transparent',
     ghostCheckedContent: fluentApple.communicationBlue,
     ghostCheckedHoveredBackground: 'transparent',
@@ -230,7 +217,6 @@ export function paletteFromAppleColors(isLightMode: boolean, isElevated: boolean
     brandedHoveredSecondaryContent: fluent2AliasColorTokens.neutralForegroundOnColor,
     brandedPressedSecondaryContent: fluent2AliasColorTokens.neutralForegroundOnColor,
 
-    defaultDisabledSecondaryContent: fluentApple.buttonTitleDisabled,
     defaultHoveredSecondaryContent: fluentApple.communicationBlue,
     defaultPressedSecondaryContent: fluentApple.communicationBlueTint20,