From cc42896f4f3b85d7931764f177098e1ebb591125 Mon Sep 17 00:00:00 2001 From: Lena Hong Date: Wed, 25 Oct 2023 04:45:41 -0700 Subject: [PATCH 1/5] remove deprecated alias tokens from v1 components --- .../Button/src/ButtonColorTokens.macos.ts | 40 +++++++++---------- .../Button/src/ButtonColorTokens.ts | 36 +++++++---------- .../MenuItemCheckboxTokens.macos.ts | 10 ++--- .../theming/theme-types/src/Color.types.ts | 2 +- 4 files changed, 40 insertions(+), 48 deletions(-) diff --git a/packages/components/Button/src/ButtonColorTokens.macos.ts b/packages/components/Button/src/ButtonColorTokens.macos.ts index d324820617..acb09755b9 100644 --- a/packages/components/Button/src/ButtonColorTokens.macos.ts +++ b/packages/components/Button/src/ButtonColorTokens.macos.ts @@ -34,33 +34,33 @@ export const defaultButtonColorTokens: TokenSettings = (t: icon: t.colors.defaultFocusedIcon, }, primary: { - backgroundColor: t.colors.brandedBackground, - color: t.colors.primaryButtonText, - borderColor: t.colors.brandedBorder, - iconColor: t.colors.brandedIcon, + backgroundColor: t.colors.brandBackground, + color: t.colors.neutralForegroundOnBrand, + borderColor: t.colors.brandStroke1, + iconColor: t.colors.neutralForegroundOnBrand, disabled: { - backgroundColor: t.colors.primaryButtonBackgroundDisabled, - color: t.colors.brandedDisabledContent, - borderColor: t.colors.defaultDisabledBorder, - iconColor: t.colors.brandedDisabledIcon, + backgroundColor: t.colors.neutralBackgroundDisabled, + color: t.colors.neutralForegroundDisabled, + borderColor: t.colors.neutralStrokeDisabled, + iconColor: t.colors.neutralForegroundDisabled, }, hovered: { - backgroundColor: t.colors.brandedBackground, - color: t.colors.brandedHoveredContent, - borderColor: t.colors.brandedHoveredBorder, - iconColor: t.colors.brandedHoveredIcon, + backgroundColor: t.colors.brandBackgroundHover, + color: t.colors.neutralForegroundOnBrandHover, + borderColor: t.colors.brandBackgroundHover, + iconColor: t.colors.neutralForegroundOnBrandHover, }, pressed: { - backgroundColor: t.colors.primaryButtonBackgroundPressed, - color: t.colors.brandedPressedContent, - borderColor: t.colors.brandedPressedBorder, - iconColor: t.colors.brandedPressedIcon, + backgroundColor: t.colors.brandBackgroundPressed, + color: t.colors.neutralForegroundOnBrandPressed, + borderColor: t.colors.brandBackgroundPressed, + iconColor: t.colors.neutralForegroundOnBrandPressed, }, focused: { - backgroundColor: t.colors.brandedFocusedBackground, - color: t.colors.brandedFocusedContent, - borderColor: t.colors.brandedFocusedBorder, - iconColor: t.colors.brandedFocusedIcon, + backgroundColor: t.colors.brandBackgroundHover, + color: t.colors.neutralForegroundOnBrandHover, + borderColor: t.colors.strokeFocus2, + iconColor: t.colors.neutralForegroundOnBrandHover, }, }, subtle: { diff --git a/packages/components/Button/src/ButtonColorTokens.ts b/packages/components/Button/src/ButtonColorTokens.ts index 63d9c780c1..b2a6f4461a 100644 --- a/packages/components/Button/src/ButtonColorTokens.ts +++ b/packages/components/Button/src/ButtonColorTokens.ts @@ -34,33 +34,25 @@ export const defaultButtonColorTokens: TokenSettings = (t: icon: t.colors.defaultFocusedIcon, }, primary: { - backgroundColor: t.colors.brandedBackground, - color: t.colors.brandedContent, - borderColor: t.colors.brandedBorder, - iconColor: t.colors.brandedIcon, + backgroundColor: t.colors.brandBackground, + color: t.colors.neutralForegroundOnColor, + borderColor: t.colors.brandStroke1, + iconColor: t.colors.neutralForegroundOnColor, disabled: { - backgroundColor: t.colors.brandedDisabledBackground, - color: t.colors.brandedDisabledContent, - borderColor: t.colors.brandedDisabledBorder, - iconColor: t.colors.brandedDisabledIcon, - }, - hovered: { - backgroundColor: t.colors.brandedHoveredBackground, - color: t.colors.brandedHoveredContent, - borderColor: t.colors.brandedHoveredBorder, - iconColor: t.colors.brandedHoveredIcon, + backgroundColor: t.colors.brandBackgroundDisabled, + color: t.colors.neutralForegroundDisabled1, + iconColor: t.colors.neutralForegroundDisabled1, }, pressed: { - backgroundColor: t.colors.brandedPressedBackground, - color: t.colors.brandedPressedContent, - borderColor: t.colors.brandedPressedBorder, - iconColor: t.colors.brandedPressedIcon, + backgroundColor: t.colors.brandBackgroundPressed, + color: t.colors.neutralForegroundOnColor, + iconColor: t.colors.neutralForegroundOnColor, }, focused: { - backgroundColor: t.colors.brandedFocusedBackground, - color: t.colors.brandedFocusedContent, - borderColor: t.colors.brandedFocusedBorder, - iconColor: t.colors.brandedFocusedIcon, + backgroundColor: t.colors.brandBackground, + color: t.colors.neutralForegroundOnColor, + borderColor: t.colors.strokeFocus2, + iconColor: t.colors.neutralForegroundOnColor, }, }, subtle: { diff --git a/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.macos.ts b/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.macos.ts index 9d65f39902..426ab88d35 100644 --- a/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.macos.ts +++ b/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.macos.ts @@ -21,8 +21,8 @@ export const defaultMenuItemCheckboxTokens: TokenSettings Date: Wed, 25 Oct 2023 10:38:15 -0700 Subject: [PATCH 2/5] Change files --- ...native-button-60667924-f4c4-48c7-b922-5f306006fe27.json | 7 +++++++ ...t-native-menu-112f97c0-db5a-4404-ab29-754ec92deaec.json | 7 +++++++ ...e-theme-types-514e76f6-3a89-444f-971f-ec22f3891112.json | 7 +++++++ 3 files changed, 21 insertions(+) create mode 100644 change/@fluentui-react-native-button-60667924-f4c4-48c7-b922-5f306006fe27.json create mode 100644 change/@fluentui-react-native-menu-112f97c0-db5a-4404-ab29-754ec92deaec.json create mode 100644 change/@fluentui-react-native-theme-types-514e76f6-3a89-444f-971f-ec22f3891112.json diff --git a/change/@fluentui-react-native-button-60667924-f4c4-48c7-b922-5f306006fe27.json b/change/@fluentui-react-native-button-60667924-f4c4-48c7-b922-5f306006fe27.json new file mode 100644 index 0000000000..52917ac1d1 --- /dev/null +++ b/change/@fluentui-react-native-button-60667924-f4c4-48c7-b922-5f306006fe27.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "remove deprecated alias tokens from v1 components", + "packageName": "@fluentui-react-native/button", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-menu-112f97c0-db5a-4404-ab29-754ec92deaec.json b/change/@fluentui-react-native-menu-112f97c0-db5a-4404-ab29-754ec92deaec.json new file mode 100644 index 0000000000..467437f0da --- /dev/null +++ b/change/@fluentui-react-native-menu-112f97c0-db5a-4404-ab29-754ec92deaec.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "remove deprecated alias tokens from v1 components", + "packageName": "@fluentui-react-native/menu", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-theme-types-514e76f6-3a89-444f-971f-ec22f3891112.json b/change/@fluentui-react-native-theme-types-514e76f6-3a89-444f-971f-ec22f3891112.json new file mode 100644 index 0000000000..ae1a94e13b --- /dev/null +++ b/change/@fluentui-react-native-theme-types-514e76f6-3a89-444f-971f-ec22f3891112.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "remove deprecated alias tokens from v1 components", + "packageName": "@fluentui-react-native/theme-types", + "email": "email not defined", + "dependentChangeType": "patch" +} From fd7ff39ae48133c4ce75262b5ac41f7f117cbe65 Mon Sep 17 00:00:00 2001 From: Lena Hong Date: Wed, 25 Oct 2023 11:41:05 -0700 Subject: [PATCH 3/5] add deprecated tag above every toke --- .../theming/theme-types/src/Color.types.ts | 48 +++++++++++++++---- 1 file changed, 38 insertions(+), 10 deletions(-) diff --git a/packages/theming/theme-types/src/Color.types.ts b/packages/theming/theme-types/src/Color.types.ts index e49585a3a7..a8ef170152 100644 --- a/packages/theming/theme-types/src/Color.types.ts +++ b/packages/theming/theme-types/src/Color.types.ts @@ -385,42 +385,75 @@ export interface ControlColorTokens { ghostDisabledBorder: ColorValue; ghostDisabledContent: ColorValue; ghostDisabledIcon: ColorValue; + /* Deprecated */ brandedBackground: ColorValue; + /* Deprecated */ brandedBorder: ColorValue; + /* Deprecated */ brandedContent: ColorValue; + /* Deprecated */ brandedIcon: ColorValue; + /* Deprecated */ brandedHoveredBackground: ColorValue; + /* Deprecated */ brandedHoveredBorder: ColorValue; + /* Deprecated */ brandedHoveredContent: ColorValue; + /* Deprecated */ brandedHoveredIcon: ColorValue; + /* Deprecated */ brandedFocusedBackground: ColorValue; + /* Deprecated */ brandedFocusedBorder: ColorValue; + /* Deprecated */ brandedFocusedContent: ColorValue; + /* Deprecated */ brandedFocusedIcon: ColorValue; + /* Deprecated */ brandedPressedBackground: ColorValue; + /* Deprecated */ brandedPressedBorder: ColorValue; + /* Deprecated */ brandedPressedContent: ColorValue; + /* Deprecated */ brandedPressedIcon: ColorValue; + /* Deprecated */ brandedDisabledBackground: ColorValue; + /* Deprecated */ brandedDisabledBorder: ColorValue; + /* Deprecated */ brandedDisabledContent: ColorValue; + /* Deprecated */ brandedDisabledIcon: ColorValue; - defaultCheckedBackground: ColorValue; - defaultCheckedContent: ColorValue; - defaultCheckedHoveredBackground: ColorValue; - defaultCheckedHoveredContent: ColorValue; - + /* Deprecated */ brandedCheckedBackground: ColorValue; + /* Deprecated */ brandedCheckedContent: ColorValue; + /* Deprecated */ brandedCheckedHoveredBackground: ColorValue; + /* Deprecated */ brandedCheckedHoveredContent: ColorValue; + /* Deprecated */ + brandedSecondaryContent: ColorValue; + /* Deprecated */ + brandedFocusedSecondaryContent: ColorValue; + /* Deprecated */ + brandedHoveredSecondaryContent: ColorValue; + /* Deprecated */ + brandedPressedSecondaryContent: ColorValue; + + defaultCheckedBackground: ColorValue; + defaultCheckedContent: ColorValue; + defaultCheckedHoveredBackground: ColorValue; + defaultCheckedHoveredContent: ColorValue; + ghostCheckedBackground: ColorValue; ghostCheckedContent: ColorValue; ghostCheckedHoveredBackground: ColorValue; @@ -432,11 +465,6 @@ export interface ControlColorTokens { ghostHoveredSecondaryContent: ColorValue; ghostPressedSecondaryContent: ColorValue; - brandedSecondaryContent: ColorValue; - brandedFocusedSecondaryContent: ColorValue; - brandedHoveredSecondaryContent: ColorValue; - brandedPressedSecondaryContent: ColorValue; - defaultDisabledSecondaryContent: ColorValue; defaultHoveredSecondaryContent: ColorValue; defaultPressedSecondaryContent: ColorValue; From dfa23bb660b42a3f5acf366e2b43166e186e7811 Mon Sep 17 00:00:00 2001 From: Lena Hong Date: Wed, 25 Oct 2023 11:44:25 -0700 Subject: [PATCH 4/5] update-snapshots --- .../__snapshots__/ToggleButton.test.tsx.snap | 2 +- .../src/__snapshots__/Button.test.tsx.snap | 20 +++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/components/Button/src/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap b/packages/components/Button/src/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap index 3a7d224a96..b9fe3758ca 100644 --- a/packages/components/Button/src/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap +++ b/packages/components/Button/src/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap @@ -48,7 +48,7 @@ exports[`ToggleButton default 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#0f6cbd", - "borderColor": "#0f548c", + "borderColor": "#0f6cbd", "borderRadius": 4, "borderWidth": 1, "display": "flex", diff --git a/packages/components/Button/src/__snapshots__/Button.test.tsx.snap b/packages/components/Button/src/__snapshots__/Button.test.tsx.snap index dcdf473d93..5bee1981f2 100644 --- a/packages/components/Button/src/__snapshots__/Button.test.tsx.snap +++ b/packages/components/Button/src/__snapshots__/Button.test.tsx.snap @@ -41,7 +41,7 @@ exports[`Button component tests Button circular 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#0f6cbd", - "borderColor": "#0f548c", + "borderColor": "#0f6cbd", "borderRadius": 9999, "borderWidth": 1, "display": "flex", @@ -117,7 +117,7 @@ exports[`Button component tests Button composed 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#0f6cbd", - "borderColor": "#0f548c", + "borderColor": "#0f6cbd", "borderRadius": 4, "borderWidth": 1, "display": "flex", @@ -196,7 +196,7 @@ exports[`Button component tests Button customized 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#0f6cbd", - "borderColor": "#0f548c", + "borderColor": "#0f6cbd", "borderRadius": 4, "borderWidth": 1, "display": "flex", @@ -272,7 +272,7 @@ exports[`Button component tests Button default 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#0f6cbd", - "borderColor": "#0f548c", + "borderColor": "#0f6cbd", "borderRadius": 4, "borderWidth": 1, "display": "flex", @@ -347,7 +347,7 @@ exports[`Button component tests Button disabled 1`] = ` { "alignItems": "center", "alignSelf": "flex-start", - "backgroundColor": "#f3f2f1", + "backgroundColor": "#b4d6fa", "borderColor": "#f3f2f1", "borderRadius": 4, "borderWidth": 1, @@ -367,7 +367,7 @@ exports[`Button component tests Button disabled 1`] = ` numberOfLines={0} style={ { - "color": "#d2d0ce", + "color": "#bdbdbd", "fontFamily": "System", "fontSize": 15, "fontWeight": "600", @@ -425,7 +425,7 @@ exports[`Button component tests Button large 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#0f6cbd", - "borderColor": "#0f548c", + "borderColor": "#0f6cbd", "borderRadius": 4, "borderWidth": 1, "display": "flex", @@ -502,7 +502,7 @@ exports[`Button component tests Button primary 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#0f6cbd", - "borderColor": "#0f548c", + "borderColor": "#0f6cbd", "borderRadius": 4, "borderWidth": 1, "display": "flex", @@ -579,7 +579,7 @@ exports[`Button component tests Button small 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#0f6cbd", - "borderColor": "#0f548c", + "borderColor": "#0f6cbd", "borderRadius": 4, "borderWidth": 1, "display": "flex", @@ -657,7 +657,7 @@ exports[`Button component tests Button square 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#0f6cbd", - "borderColor": "#0f548c", + "borderColor": "#0f6cbd", "borderRadius": 0, "borderWidth": 1, "display": "flex", From 8f19bb8a8fe15e96490c117fe6cc3009f7cacaca Mon Sep 17 00:00:00 2001 From: Lena Hong Date: Mon, 30 Oct 2023 11:48:20 -0700 Subject: [PATCH 5/5] update snapshots --- .../__snapshots__/ToggleButton.test.tsx.snap | 3 +-- .../Button/src/__snapshots__/Button.test.tsx.snap | 12 ++++++------ 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/components/Button/src/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap b/packages/components/Button/src/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap index 2554a8c4f5..bff788bf31 100644 --- a/packages/components/Button/src/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap +++ b/packages/components/Button/src/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap @@ -48,9 +48,8 @@ exports[`ToggleButton default 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#0f6cbd", - "borderColor": "#0f548c", + "borderColor": "#0f6cbd", "borderRadius": 8, - "borderWidth": 1, "display": "flex", "flexDirection": "row", diff --git a/packages/components/Button/src/__snapshots__/Button.test.tsx.snap b/packages/components/Button/src/__snapshots__/Button.test.tsx.snap index 6bd93ec04c..c7eeff61ec 100644 --- a/packages/components/Button/src/__snapshots__/Button.test.tsx.snap +++ b/packages/components/Button/src/__snapshots__/Button.test.tsx.snap @@ -117,7 +117,7 @@ exports[`Button component tests Button composed 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#0f6cbd", - "borderColor": "#0f548c", + "borderColor": "#0f6cbd", "borderRadius": 8, "borderWidth": 1, "display": "flex", @@ -196,7 +196,7 @@ exports[`Button component tests Button customized 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#0f6cbd", - "borderColor": "#0f548c", + "borderColor": "#0f6cbd", "borderRadius": 8, "borderWidth": 1, "display": "flex", @@ -272,7 +272,7 @@ exports[`Button component tests Button default 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#0f6cbd", - "borderColor": "#0f548c", + "borderColor": "#0f6cbd", "borderRadius": 8, "borderWidth": 1, "display": "flex", @@ -425,7 +425,7 @@ exports[`Button component tests Button large 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#0f6cbd", - "borderColor": "#0f548c", + "borderColor": "#0f6cbd", "borderRadius": 12, "borderWidth": 1, "display": "flex", @@ -502,7 +502,7 @@ exports[`Button component tests Button primary 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#0f6cbd", - "borderColor": "#0f548c", + "borderColor": "#0f6cbd", "borderRadius": 8, "borderWidth": 1, "display": "flex", @@ -579,7 +579,7 @@ exports[`Button component tests Button small 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#0f6cbd", - "borderColor": "#0f548c", + "borderColor": "#0f6cbd", "borderRadius": 8, "borderWidth": 1, "display": "flex",