diff --git a/change/@fluentui-react-native-apple-theme-a8cb917c-87e5-4321-a390-557f7166dce7.json b/change/@fluentui-react-native-apple-theme-a8cb917c-87e5-4321-a390-557f7166dce7.json new file mode 100644 index 0000000000..bed0e249fd --- /dev/null +++ b/change/@fluentui-react-native-apple-theme-a8cb917c-87e5-4321-a390-557f7166dce7.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Bump all design-tokens packages to 0.29.0", + "packageName": "@fluentui-react-native/apple-theme", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-avatar-690f1b7f-b86f-47b7-974b-e249c12830d0.json b/change/@fluentui-react-native-avatar-690f1b7f-b86f-47b7-974b-e249c12830d0.json new file mode 100644 index 0000000000..b467121dbe --- /dev/null +++ b/change/@fluentui-react-native-avatar-690f1b7f-b86f-47b7-974b-e249c12830d0.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Bump all design-tokens packages to 0.29.0", + "packageName": "@fluentui-react-native/avatar", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-badge-ae5b76d0-7b73-438e-98d1-88111b61dc70.json b/change/@fluentui-react-native-badge-ae5b76d0-7b73-438e-98d1-88111b61dc70.json new file mode 100644 index 0000000000..037924d77d --- /dev/null +++ b/change/@fluentui-react-native-badge-ae5b76d0-7b73-438e-98d1-88111b61dc70.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Bump all design-tokens packages to 0.29.0", + "packageName": "@fluentui-react-native/badge", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-button-1989496a-41d0-4455-98a9-014fe2db4c2b.json b/change/@fluentui-react-native-button-1989496a-41d0-4455-98a9-014fe2db4c2b.json new file mode 100644 index 0000000000..04e46c0c5a --- /dev/null +++ b/change/@fluentui-react-native-button-1989496a-41d0-4455-98a9-014fe2db4c2b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Bump all design-tokens packages to 0.29.0", + "packageName": "@fluentui-react-native/button", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-checkbox-0c1beb26-6f7c-4430-983b-970e159e5c46.json b/change/@fluentui-react-native-checkbox-0c1beb26-6f7c-4430-983b-970e159e5c46.json new file mode 100644 index 0000000000..90704f0a43 --- /dev/null +++ b/change/@fluentui-react-native-checkbox-0c1beb26-6f7c-4430-983b-970e159e5c46.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Bump all design-tokens packages to 0.29.0", + "packageName": "@fluentui-react-native/checkbox", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-default-theme-a913db7c-d9d8-44ee-bbd7-3c67b44a1a78.json b/change/@fluentui-react-native-default-theme-a913db7c-d9d8-44ee-bbd7-3c67b44a1a78.json new file mode 100644 index 0000000000..9ac784d782 --- /dev/null +++ b/change/@fluentui-react-native-default-theme-a913db7c-d9d8-44ee-bbd7-3c67b44a1a78.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Bump all design-tokens packages to 0.29.0", + "packageName": "@fluentui-react-native/default-theme", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-dropdown-1788b234-e5bd-4bb1-af3b-e1c2c72bd945.json b/change/@fluentui-react-native-dropdown-1788b234-e5bd-4bb1-af3b-e1c2c72bd945.json new file mode 100644 index 0000000000..e287742fad --- /dev/null +++ b/change/@fluentui-react-native-dropdown-1788b234-e5bd-4bb1-af3b-e1c2c72bd945.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Bump design tokens packages from 0.29.0 to 0.31.0", + "packageName": "@fluentui-react-native/dropdown", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-menu-button-bb9c2010-9fa5-4a37-aeee-c92dddd5bd57.json b/change/@fluentui-react-native-experimental-menu-button-bb9c2010-9fa5-4a37-aeee-c92dddd5bd57.json new file mode 100644 index 0000000000..5ebde06e5e --- /dev/null +++ b/change/@fluentui-react-native-experimental-menu-button-bb9c2010-9fa5-4a37-aeee-c92dddd5bd57.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Bump all design-tokens packages to 0.29.0", + "packageName": "@fluentui-react-native/experimental-menu-button", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-radio-group-ecbab668-1263-4305-adf6-0cd2a0610d01.json b/change/@fluentui-react-native-experimental-radio-group-ecbab668-1263-4305-adf6-0cd2a0610d01.json new file mode 100644 index 0000000000..31de07a46c --- /dev/null +++ b/change/@fluentui-react-native-experimental-radio-group-ecbab668-1263-4305-adf6-0cd2a0610d01.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Bump all design-tokens packages to 0.29.0", + "packageName": "@fluentui-react-native/experimental-radio-group", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-link-3309cce0-5501-4ac4-8741-4c8ab926a05b.json b/change/@fluentui-react-native-link-3309cce0-5501-4ac4-8741-4c8ab926a05b.json new file mode 100644 index 0000000000..43c78f4d52 --- /dev/null +++ b/change/@fluentui-react-native-link-3309cce0-5501-4ac4-8741-4c8ab926a05b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Bump all design-tokens packages to 0.29.0", + "packageName": "@fluentui-react-native/link", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-menu-button-894f100a-fe28-42bf-859c-b6942da46d51.json b/change/@fluentui-react-native-menu-button-894f100a-fe28-42bf-859c-b6942da46d51.json new file mode 100644 index 0000000000..8e2d11f15c --- /dev/null +++ b/change/@fluentui-react-native-menu-button-894f100a-fe28-42bf-859c-b6942da46d51.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Bump all design-tokens packages to 0.29.0", + "packageName": "@fluentui-react-native/menu-button", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-menu-ccf94936-f5da-47dc-9ce8-051118bb3d9b.json b/change/@fluentui-react-native-menu-ccf94936-f5da-47dc-9ce8-051118bb3d9b.json new file mode 100644 index 0000000000..cfea0b21f7 --- /dev/null +++ b/change/@fluentui-react-native-menu-ccf94936-f5da-47dc-9ce8-051118bb3d9b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Bump all design-tokens packages to 0.29.0", + "packageName": "@fluentui-react-native/menu", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-notification-15b81463-1ab9-446d-b73b-01f9dd6b6ef5.json b/change/@fluentui-react-native-notification-15b81463-1ab9-446d-b73b-01f9dd6b6ef5.json new file mode 100644 index 0000000000..d29124958a --- /dev/null +++ b/change/@fluentui-react-native-notification-15b81463-1ab9-446d-b73b-01f9dd6b6ef5.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Bump all design-tokens packages to 0.29.0", + "packageName": "@fluentui-react-native/notification", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-text-161bac84-58c2-4ff0-91d4-9e4fc49ecec8.json b/change/@fluentui-react-native-text-161bac84-58c2-4ff0-91d4-9e4fc49ecec8.json new file mode 100644 index 0000000000..7a201e4f63 --- /dev/null +++ b/change/@fluentui-react-native-text-161bac84-58c2-4ff0-91d4-9e4fc49ecec8.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Bump all design-tokens packages to 0.29.0", + "packageName": "@fluentui-react-native/text", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-theme-tokens-11e7f1d3-3e4a-46b7-a4c8-5c4dbd970ec2.json b/change/@fluentui-react-native-theme-tokens-11e7f1d3-3e4a-46b7-a4c8-5c4dbd970ec2.json new file mode 100644 index 0000000000..a458c44139 --- /dev/null +++ b/change/@fluentui-react-native-theme-tokens-11e7f1d3-3e4a-46b7-a4c8-5c4dbd970ec2.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Bump all design-tokens packages to 0.29.0", + "packageName": "@fluentui-react-native/theme-tokens", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-theming-utils-6e8d88e0-feb1-41a7-beb5-a8708b02f722.json b/change/@fluentui-react-native-theming-utils-6e8d88e0-feb1-41a7-beb5-a8708b02f722.json new file mode 100644 index 0000000000..e2e0843f31 --- /dev/null +++ b/change/@fluentui-react-native-theming-utils-6e8d88e0-feb1-41a7-beb5-a8708b02f722.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Bump all design-tokens packages to 0.29.0", + "packageName": "@fluentui-react-native/theming-utils", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-win32-theme-bd431773-a8a5-4064-a241-be49c8725d96.json b/change/@fluentui-react-native-win32-theme-bd431773-a8a5-4064-a241-be49c8725d96.json new file mode 100644 index 0000000000..98bcb4e3dd --- /dev/null +++ b/change/@fluentui-react-native-win32-theme-bd431773-a8a5-4064-a241-be49c8725d96.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Bump all design-tokens packages to 0.29.0", + "packageName": "@fluentui-react-native/win32-theme", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/docs/pages/Theming/Tokens/Overrides.md b/docs/pages/Theming/Tokens/Overrides.md index 0619d38866..178851fbe4 100644 --- a/docs/pages/Theming/Tokens/Overrides.md +++ b/docs/pages/Theming/Tokens/Overrides.md @@ -11,7 +11,7 @@ For example, the following will not result in any changes to FURN components: ```ts import { globalTokens } from '@fluentui-react-native/theme-tokens'; -globalTokens.corner.radius.small = 5; +globalTokens.corner.radius20 = 5; export const updatedGlobalTokens = globalTokens; ``` diff --git a/packages/components/Avatar/src/Avatar.styling.ts b/packages/components/Avatar/src/Avatar.styling.ts index 0c77318cd7..46efd49c2f 100644 --- a/packages/components/Avatar/src/Avatar.styling.ts +++ b/packages/components/Avatar/src/Avatar.styling.ts @@ -178,9 +178,9 @@ function getRingConfig(tokens: AvatarTokens): any { const innerGap = tokens.ringInnerGap || ringThickness; const strokeSize = { - small: globalTokens.stroke.width.thick, - medium: globalTokens.stroke.width.thicker, - large: globalTokens.stroke.width.thickest, + small: globalTokens.stroke.width20, + medium: globalTokens.stroke.width30, + large: globalTokens.stroke.width40, }; if (ringThickness) { return { diff --git a/packages/components/Avatar/src/AvatarTokens.ts b/packages/components/Avatar/src/AvatarTokens.ts index 3d91fc3998..dc414bce37 100644 --- a/packages/components/Avatar/src/AvatarTokens.ts +++ b/packages/components/Avatar/src/AvatarTokens.ts @@ -10,7 +10,7 @@ export const defaultAvatarTokens: TokenSettings = (t: Theme avatarOpacity: 1, fontFamily: t.typography.families.primary, fontWeight: globalTokens.font.weight.semibold, - fontSize: globalTokens.font.size[200], + fontSize: globalTokens.font.size200, size: 24, iconSize: 16, iconColor: t.colors.neutralForeground3, @@ -18,10 +18,10 @@ export const defaultAvatarTokens: TokenSettings = (t: Theme borderColor: t.colors.neutralStroke1, borderWidth: t.host.appearance === 'highContrast' ? 1 : 0, circular: { - borderRadius: globalTokens.corner.radius.circle, + borderRadius: globalTokens.corner.radiusCircular, }, square: { - borderRadius: globalTokens.corner.radius.medium, + borderRadius: globalTokens.corner.radius40, }, inactive: { avatarOpacity: 0.8, @@ -30,18 +30,18 @@ export const defaultAvatarTokens: TokenSettings = (t: Theme size: 20, badgeSize: 'tiny', iconSize: 16, - fontSize: globalTokens.font.size[100], + fontSize: globalTokens.font.size100, square: { - borderRadius: globalTokens.corner.radius.small, + borderRadius: globalTokens.corner.radius20, }, }, size24: { size: 24, badgeSize: 'tiny', iconSize: 16, - fontSize: globalTokens.font.size[100], + fontSize: globalTokens.font.size100, square: { - borderRadius: globalTokens.corner.radius.small, + borderRadius: globalTokens.corner.radius20, }, }, size28: { @@ -49,13 +49,13 @@ export const defaultAvatarTokens: TokenSettings = (t: Theme badgeSize: 'extraSmall', iconSize: 20, fontWeight: globalTokens.font.weight.semibold, - fontSize: globalTokens.font.size[100], + fontSize: globalTokens.font.size100, }, size32: { size: 32, badgeSize: 'extraSmall', iconSize: 20, - fontSize: globalTokens.font.size[100], + fontSize: globalTokens.font.size100, }, size36: { size: 36, @@ -76,27 +76,27 @@ export const defaultAvatarTokens: TokenSettings = (t: Theme size: 56, badgeSize: 'medium', iconSize: 28, - fontSize: globalTokens.font.size[400], + fontSize: globalTokens.font.size400, square: { - borderRadius: globalTokens.corner.radius.large, + borderRadius: globalTokens.corner.radius60, }, }, size64: { size: 64, badgeSize: 'large', iconSize: 32, - fontSize: globalTokens.font.size[500], + fontSize: globalTokens.font.size500, square: { - borderRadius: globalTokens.corner.radius.large, + borderRadius: globalTokens.corner.radius60, }, }, size72: { size: 72, badgeSize: 'large', iconSize: 32, - fontSize: globalTokens.font.size[500], + fontSize: globalTokens.font.size500, square: { - borderRadius: globalTokens.corner.radius.large, + borderRadius: globalTokens.corner.radius60, }, }, size96: { @@ -104,9 +104,9 @@ export const defaultAvatarTokens: TokenSettings = (t: Theme badgeSize: 'extraLarge', iconSize: 48, fontWeight: globalTokens.font.weight.regular, - fontSize: globalTokens.font.size[700], + fontSize: globalTokens.font.size700, square: { - borderRadius: globalTokens.corner.radius.extraLarge, + borderRadius: globalTokens.corner.radius80, }, }, size120: { @@ -114,9 +114,9 @@ export const defaultAvatarTokens: TokenSettings = (t: Theme badgeSize: 'extraLarge', iconSize: 48, fontWeight: globalTokens.font.weight.regular, - fontSize: globalTokens.font.size[900], + fontSize: globalTokens.font.size900, square: { - borderRadius: globalTokens.corner.radius.extraLarge, + borderRadius: globalTokens.corner.radius80, }, }, neutral: { diff --git a/packages/components/Avatar/src/AvatarTokens.win32.ts b/packages/components/Avatar/src/AvatarTokens.win32.ts index 4148a08210..2ebb95f6a1 100644 --- a/packages/components/Avatar/src/AvatarTokens.win32.ts +++ b/packages/components/Avatar/src/AvatarTokens.win32.ts @@ -11,7 +11,7 @@ export const defaultAvatarTokens: TokenSettings = (t: Theme avatarOpacity: 1, fontFamily: t.typography.families.primary, fontWeight: globalTokens.font.weight.semibold, - fontSize: globalTokens.font.size[200], + fontSize: globalTokens.font.size200, size: 24, iconSize: 16, iconColor: t.colors.neutralForeground3, @@ -19,10 +19,10 @@ export const defaultAvatarTokens: TokenSettings = (t: Theme borderColor: t.colors.neutralStroke1, borderWidth: t.name === 'HighContrast' ? 1 : 0, circular: { - borderRadius: globalTokens.corner.radius.circle, + borderRadius: globalTokens.corner.radiusCircular, }, square: { - borderRadius: globalTokens.corner.radius.medium, + borderRadius: globalTokens.corner.radius40, }, inactive: { avatarOpacity: 0.8, @@ -31,18 +31,18 @@ export const defaultAvatarTokens: TokenSettings = (t: Theme size: 20, badgeSize: 'tiny', iconSize: 16, - fontSize: globalTokens.font.size[100], + fontSize: globalTokens.font.size100, square: { - borderRadius: globalTokens.corner.radius.small, + borderRadius: globalTokens.corner.radius20, }, }, size24: { size: 24, badgeSize: 'tiny', iconSize: 16, - fontSize: globalTokens.font.size[100], + fontSize: globalTokens.font.size100, square: { - borderRadius: globalTokens.corner.radius.small, + borderRadius: globalTokens.corner.radius20, }, }, size28: { @@ -50,13 +50,13 @@ export const defaultAvatarTokens: TokenSettings = (t: Theme badgeSize: 'extraSmall', iconSize: 20, fontWeight: globalTokens.font.weight.semibold, - fontSize: globalTokens.font.size[100], + fontSize: globalTokens.font.size100, }, size32: { size: 32, badgeSize: 'extraSmall', iconSize: 20, - fontSize: globalTokens.font.size[100], + fontSize: globalTokens.font.size100, }, size36: { size: 36, @@ -77,27 +77,27 @@ export const defaultAvatarTokens: TokenSettings = (t: Theme size: 56, badgeSize: 'medium', iconSize: 28, - fontSize: globalTokens.font.size[400], + fontSize: globalTokens.font.size400, square: { - borderRadius: globalTokens.corner.radius.large, + borderRadius: globalTokens.corner.radius60, }, }, size64: { size: 64, badgeSize: 'large', iconSize: 32, - fontSize: globalTokens.font.size[500], + fontSize: globalTokens.font.size500, square: { - borderRadius: globalTokens.corner.radius.large, + borderRadius: globalTokens.corner.radius60, }, }, size72: { size: 72, badgeSize: 'large', iconSize: 32, - fontSize: globalTokens.font.size[500], + fontSize: globalTokens.font.size500, square: { - borderRadius: globalTokens.corner.radius.large, + borderRadius: globalTokens.corner.radius60, }, }, size96: { @@ -105,9 +105,9 @@ export const defaultAvatarTokens: TokenSettings = (t: Theme badgeSize: 'extraLarge', iconSize: 48, fontWeight: globalTokens.font.weight.regular, - fontSize: globalTokens.font.size[700], + fontSize: globalTokens.font.size700, square: { - borderRadius: globalTokens.corner.radius.extraLarge, + borderRadius: globalTokens.corner.radius80, }, }, size120: { @@ -115,9 +115,9 @@ export const defaultAvatarTokens: TokenSettings = (t: Theme badgeSize: 'extraLarge', iconSize: 48, fontWeight: globalTokens.font.weight.regular, - fontSize: globalTokens.font.size[900], + fontSize: globalTokens.font.size900, square: { - borderRadius: globalTokens.corner.radius.extraLarge, + borderRadius: globalTokens.corner.radius80, }, }, neutral: { diff --git a/packages/components/Badge/src/BadgeColorTokens.ts b/packages/components/Badge/src/BadgeColorTokens.ts index c9ef9a647f..cf3f523703 100644 --- a/packages/components/Badge/src/BadgeColorTokens.ts +++ b/packages/components/Badge/src/BadgeColorTokens.ts @@ -124,7 +124,7 @@ export const defaultBadgeColorTokens: TokenSettings = (t: Theme) => ...getFilledColorProps( { backgroundColor: globalTokens.color.yellow.primary, - color: globalTokens.color.grey[14], // It should be neutralForegroundStatic1. It's hardcoded because the token doesn't exist right now + color: globalTokens.color.grey14, // It should be neutralForegroundStatic1. It's hardcoded because the token doesn't exist right now }, t, ), @@ -209,9 +209,9 @@ export const defaultBadgeColorTokens: TokenSettings = (t: Theme) => backgroundColor: t.colors.neutralForeground3, color: t.colors.neutralBackground1, borderColor: t.colors.neutralStrokeAccessible, - backgroundColorDark: globalTokens.color.grey[68], - colorDark: globalTokens.color.grey[16], - borderColorDark: globalTokens.color.grey[68], + backgroundColorDark: globalTokens.color.grey68, + colorDark: globalTokens.color.grey16, + borderColorDark: globalTokens.color.grey68, }, t, ), diff --git a/packages/components/Badge/src/BadgeColorTokens.win32.ts b/packages/components/Badge/src/BadgeColorTokens.win32.ts index 009c48050e..bc6aa88346 100644 --- a/packages/components/Badge/src/BadgeColorTokens.win32.ts +++ b/packages/components/Badge/src/BadgeColorTokens.win32.ts @@ -137,7 +137,7 @@ export const defaultBadgeColorTokens: TokenSettings = (t: Theme) => ...getFilledColorProps( { backgroundColor: globalTokens.color.yellow.primary, - color: globalTokens.color.grey[14], // It should be neutralForegroundStatic1. It's hardcoded because the token doesn't exist right now + color: globalTokens.color.grey14, // It should be neutralForegroundStatic1. It's hardcoded because the token doesn't exist right now }, t, getWin32Props, @@ -233,9 +233,9 @@ export const defaultBadgeColorTokens: TokenSettings = (t: Theme) => backgroundColor: t.colors.neutralForeground3, color: t.colors.neutralBackground1, borderColor: t.colors.neutralStrokeAccessible, - backgroundColorDark: globalTokens.color.grey[68], - colorDark: globalTokens.color.grey[16], - borderColorDark: globalTokens.color.grey[68], + backgroundColorDark: globalTokens.color.grey68, + colorDark: globalTokens.color.grey16, + borderColorDark: globalTokens.color.grey68, }, t, getWin32Props, diff --git a/packages/components/Badge/src/BadgeFontTokens.win32.ts b/packages/components/Badge/src/BadgeFontTokens.win32.ts index 7972a6c24c..cc6e6cf5f6 100644 --- a/packages/components/Badge/src/BadgeFontTokens.win32.ts +++ b/packages/components/Badge/src/BadgeFontTokens.win32.ts @@ -6,12 +6,12 @@ import { BadgeTokens } from './Badge.types'; export const badgeFontTokens: TokenSettings = (t: Theme) => ({ fontFamily: t.typography.families.primary, - fontSize: globalTokens.font.size[100], + fontSize: globalTokens.font.size100, fontWeight: globalTokens.font.weight.regular, large: { - fontSize: globalTokens.font.size[200], + fontSize: globalTokens.font.size200, }, extraLarge: { - fontSize: globalTokens.font.size[200], + fontSize: globalTokens.font.size200, }, } as BadgeTokens); diff --git a/packages/components/Badge/src/BadgeTokens.ts b/packages/components/Badge/src/BadgeTokens.ts index fe453f19ef..f39cb8843d 100644 --- a/packages/components/Badge/src/BadgeTokens.ts +++ b/packages/components/Badge/src/BadgeTokens.ts @@ -6,7 +6,7 @@ import { BadgeTokens } from './Badge.types'; export const defaultBadgeTokens: TokenSettings = () => ({ iconSize: 12, - borderWidth: globalTokens.stroke.width.thin, + borderWidth: globalTokens.stroke.width10, bottom: globalTokens.spacing.none, right: globalTokens.spacing.none, textMargin: globalTokens.spacing.xxs, @@ -16,7 +16,7 @@ export const defaultBadgeTokens: TokenSettings = () => minWidth: 6, minHeight: 6, rounded: { - borderRadius: globalTokens.corner.radius.small, + borderRadius: globalTokens.corner.radius20, }, }, extraSmall: { @@ -24,7 +24,7 @@ export const defaultBadgeTokens: TokenSettings = () => minHeight: 10, iconSize: 10, rounded: { - borderRadius: globalTokens.corner.radius.small, + borderRadius: globalTokens.corner.radius20, }, }, small: { @@ -35,7 +35,7 @@ export const defaultBadgeTokens: TokenSettings = () => textMargin: globalTokens.spacing.xxs, flexGap: globalTokens.spacing.xxs, rounded: { - borderRadius: globalTokens.corner.radius.small, + borderRadius: globalTokens.corner.radius20, }, }, medium: { @@ -63,13 +63,13 @@ export const defaultBadgeTokens: TokenSettings = () => flexGap: globalTokens.spacing.xs, }, rounded: { - borderRadius: globalTokens.corner.radius.medium, + borderRadius: globalTokens.corner.radius40, }, circular: { - borderRadius: globalTokens.corner.radius.circle, + borderRadius: globalTokens.corner.radiusCircular, }, square: { - borderRadius: globalTokens.corner.radius.none, + borderRadius: globalTokens.corner.radiusNone, }, rtl: { left: globalTokens.spacing.none, diff --git a/packages/components/Badge/src/CounterBadge/CounterBadgeTokens.ts b/packages/components/Badge/src/CounterBadge/CounterBadgeTokens.ts index d75d008192..386bf738be 100644 --- a/packages/components/Badge/src/CounterBadge/CounterBadgeTokens.ts +++ b/packages/components/Badge/src/CounterBadge/CounterBadgeTokens.ts @@ -10,6 +10,6 @@ export const counterBadgeTokens: TokenSettings = () => minHeight: 6, paddingHorizontal: 0, borderWidth: 0, - borderRadius: globalTokens.corner.radius.circle, + borderRadius: globalTokens.corner.radiusCircular, }, } as CounterBadgeTokens); diff --git a/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.macos.ts b/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.macos.ts index 2f5bafcf3b..79d7946159 100644 --- a/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.macos.ts +++ b/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.macos.ts @@ -43,7 +43,7 @@ export const defaultPresenceBadgeTokens: TokenSettings = () blocked: getBadgeColor('red'), unknown: getBadgeColor('red'), offline: { - iconColor: globalTokens.color.grey[38], + iconColor: globalTokens.color.grey38, }, outOfOffice: getBadgeColor('berry'), } as PresenceBadgeTokens); diff --git a/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.ts b/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.ts index b4712cb9d4..f3b8ddcf94 100644 --- a/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.ts +++ b/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.ts @@ -49,7 +49,7 @@ export const defaultPresenceBadgeTokens: TokenSettings = (t blocked: getBadgeColor('red', t), unknown: getBadgeColor('red', t), offline: { - iconColor: isHighContrast(t) ? t.colors.neutralForeground3 : globalTokens.color.grey[38], + iconColor: isHighContrast(t) ? t.colors.neutralForeground3 : globalTokens.color.grey38, }, outOfOffice: getBadgeColor('berry', t), } as PresenceBadgeTokens); diff --git a/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.win32.ts b/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.win32.ts index 6c577df3b0..43da9fa46a 100644 --- a/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.win32.ts +++ b/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.win32.ts @@ -50,7 +50,7 @@ export const defaultPresenceBadgeTokens: TokenSettings = (t unknown: getBadgeColor('red', t), doNotDisturb: getBadgeColor('red', t), offline: { - iconColor: isHighContrast(t) ? t.colors.neutralForeground3 : globalTokens.color.grey[38], + iconColor: isHighContrast(t) ? t.colors.neutralForeground3 : globalTokens.color.grey38, }, outOfOffice: getBadgeColor('berry', t), } as PresenceBadgeTokens); diff --git a/packages/components/Badge/src/__tests__/__snapshots__/Badge.test.tsx.snap b/packages/components/Badge/src/__tests__/__snapshots__/Badge.test.tsx.snap index e7b94cf079..23b04e076a 100644 --- a/packages/components/Badge/src/__tests__/__snapshots__/Badge.test.tsx.snap +++ b/packages/components/Badge/src/__tests__/__snapshots__/Badge.test.tsx.snap @@ -11,7 +11,7 @@ exports[`Badge component tests Badge all props 1`] = ` "backgroundColor": "transparent", "borderColor": "transparent", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 1, "bottom": 0, "flexDirection": "row", "justifyContent": "center", @@ -108,7 +108,7 @@ exports[`Badge component tests Empty Badge 1`] = ` "backgroundColor": "#0078d4", "borderColor": "transparent", "borderRadius": 9999, - "borderWidth": 1.5, + "borderWidth": 1, "bottom": 0, "flexDirection": "row", "justifyContent": "center", @@ -135,7 +135,7 @@ exports[`CounterBadge component tests CounterBadge all props 1`] = ` "backgroundColor": "transparent", "borderColor": "transparent", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 1, "bottom": 0, "flexDirection": "row", "justifyContent": "center", @@ -192,7 +192,7 @@ exports[`CounterBadge component tests CounterBadge shows 99+ 1`] = ` "backgroundColor": "#0078d4", "borderColor": "transparent", "borderRadius": 9999, - "borderWidth": 1.5, + "borderWidth": 1, "bottom": 0, "flexDirection": "row", "justifyContent": "center", @@ -235,7 +235,7 @@ exports[`CounterBadge component tests CounterBadge shows 1000+ 1`] = ` "backgroundColor": "#0078d4", "borderColor": "transparent", "borderRadius": 9999, - "borderWidth": 1.5, + "borderWidth": 1, "bottom": 0, "flexDirection": "row", "justifyContent": "center", @@ -279,7 +279,7 @@ exports[`CounterBadge component tests CounterBadge shows zero 1`] = ` "backgroundColor": "#0078d4", "borderColor": "transparent", "borderRadius": 9999, - "borderWidth": 1.5, + "borderWidth": 1, "bottom": 0, "flexDirection": "row", "justifyContent": "center", diff --git a/packages/components/Button/src/ButtonFontTokens.win32.ts b/packages/components/Button/src/ButtonFontTokens.win32.ts index 20e626a13b..386ccd7ea3 100644 --- a/packages/components/Button/src/ButtonFontTokens.win32.ts +++ b/packages/components/Button/src/ButtonFontTokens.win32.ts @@ -8,21 +8,21 @@ export const defaultButtonFontTokens: TokenSettings = (t: T medium: { hasContent: { fontFamily: t.typography.families.secondary, - fontSize: globalTokens.font.size[300], + fontSize: globalTokens.font.size300, fontWeight: globalTokens.font.weight.semibold, }, }, small: { hasContent: { fontFamily: t.typography.families.primary, - fontSize: globalTokens.font.size[200], + fontSize: globalTokens.font.size200, fontWeight: globalTokens.font.weight.regular, }, }, large: { hasContent: { fontFamily: t.typography.families.secondary, - fontSize: globalTokens.font.size[400], + fontSize: globalTokens.font.size400, fontWeight: globalTokens.font.weight.semibold, }, }, diff --git a/packages/components/Button/src/ButtonTokens.android.ts b/packages/components/Button/src/ButtonTokens.android.ts index 3f0779b946..ca0dc73363 100644 --- a/packages/components/Button/src/ButtonTokens.android.ts +++ b/packages/components/Button/src/ButtonTokens.android.ts @@ -10,7 +10,7 @@ export const defaultButtonTokens: TokenSettings = () => }, medium: { padding: globalTokens.spacing.xs, - borderWidth: globalTokens.stroke.width.thin, + borderWidth: globalTokens.stroke.width10, iconSize: 16, focused: { borderWidth: 0, @@ -18,7 +18,7 @@ export const defaultButtonTokens: TokenSettings = () => }, hasContent: { minWidth: 96, - paddingHorizontal: globalTokens.spacing.m - globalTokens.stroke.width.thin, + paddingHorizontal: globalTokens.spacing.m - globalTokens.stroke.width10, hasIconAfter: { spacingIconContentAfter: globalTokens.spacing.sNudge, }, @@ -31,8 +31,8 @@ export const defaultButtonTokens: TokenSettings = () => }, }, small: { - padding: globalTokens.spacing.xs - globalTokens.stroke.width.thin, - borderWidth: globalTokens.stroke.width.thin, + padding: globalTokens.spacing.xs - globalTokens.stroke.width10, + borderWidth: globalTokens.stroke.width10, iconSize: 16, focused: { borderWidth: 0, @@ -40,7 +40,7 @@ export const defaultButtonTokens: TokenSettings = () => }, hasContent: { minWidth: 64, - paddingHorizontal: globalTokens.spacing.s - globalTokens.stroke.width.thin, + paddingHorizontal: globalTokens.spacing.s - globalTokens.stroke.width10, hasIconAfter: { spacingIconContentAfter: globalTokens.spacing.xs, }, @@ -53,8 +53,8 @@ export const defaultButtonTokens: TokenSettings = () => }, }, large: { - padding: globalTokens.spacing.s - globalTokens.stroke.width.thin, - borderWidth: globalTokens.stroke.width.thin, + padding: globalTokens.spacing.s - globalTokens.stroke.width10, + borderWidth: globalTokens.stroke.width10, iconSize: 20, focused: { borderWidth: 0, @@ -62,7 +62,7 @@ export const defaultButtonTokens: TokenSettings = () => }, hasContent: { minWidth: 96, - paddingHorizontal: globalTokens.spacing.l - globalTokens.stroke.width.thin, + paddingHorizontal: globalTokens.spacing.l - globalTokens.stroke.width10, hasIconAfter: { spacingIconContentAfter: globalTokens.spacing.sNudge, }, @@ -75,12 +75,12 @@ export const defaultButtonTokens: TokenSettings = () => }, }, rounded: { - borderRadius: globalTokens.corner.radius.medium, + borderRadius: globalTokens.corner.radius40, }, circular: { - borderRadius: globalTokens.corner.radius.circle, + borderRadius: globalTokens.corner.radiusCircular, }, square: { - borderRadius: globalTokens.corner.radius.none, + borderRadius: globalTokens.corner.radiusNone, }, } as ButtonTokens); diff --git a/packages/components/Button/src/ButtonTokens.ios.ts b/packages/components/Button/src/ButtonTokens.ios.ts index 3f0779b946..ca0dc73363 100644 --- a/packages/components/Button/src/ButtonTokens.ios.ts +++ b/packages/components/Button/src/ButtonTokens.ios.ts @@ -10,7 +10,7 @@ export const defaultButtonTokens: TokenSettings = () => }, medium: { padding: globalTokens.spacing.xs, - borderWidth: globalTokens.stroke.width.thin, + borderWidth: globalTokens.stroke.width10, iconSize: 16, focused: { borderWidth: 0, @@ -18,7 +18,7 @@ export const defaultButtonTokens: TokenSettings = () => }, hasContent: { minWidth: 96, - paddingHorizontal: globalTokens.spacing.m - globalTokens.stroke.width.thin, + paddingHorizontal: globalTokens.spacing.m - globalTokens.stroke.width10, hasIconAfter: { spacingIconContentAfter: globalTokens.spacing.sNudge, }, @@ -31,8 +31,8 @@ export const defaultButtonTokens: TokenSettings = () => }, }, small: { - padding: globalTokens.spacing.xs - globalTokens.stroke.width.thin, - borderWidth: globalTokens.stroke.width.thin, + padding: globalTokens.spacing.xs - globalTokens.stroke.width10, + borderWidth: globalTokens.stroke.width10, iconSize: 16, focused: { borderWidth: 0, @@ -40,7 +40,7 @@ export const defaultButtonTokens: TokenSettings = () => }, hasContent: { minWidth: 64, - paddingHorizontal: globalTokens.spacing.s - globalTokens.stroke.width.thin, + paddingHorizontal: globalTokens.spacing.s - globalTokens.stroke.width10, hasIconAfter: { spacingIconContentAfter: globalTokens.spacing.xs, }, @@ -53,8 +53,8 @@ export const defaultButtonTokens: TokenSettings = () => }, }, large: { - padding: globalTokens.spacing.s - globalTokens.stroke.width.thin, - borderWidth: globalTokens.stroke.width.thin, + padding: globalTokens.spacing.s - globalTokens.stroke.width10, + borderWidth: globalTokens.stroke.width10, iconSize: 20, focused: { borderWidth: 0, @@ -62,7 +62,7 @@ export const defaultButtonTokens: TokenSettings = () => }, hasContent: { minWidth: 96, - paddingHorizontal: globalTokens.spacing.l - globalTokens.stroke.width.thin, + paddingHorizontal: globalTokens.spacing.l - globalTokens.stroke.width10, hasIconAfter: { spacingIconContentAfter: globalTokens.spacing.sNudge, }, @@ -75,12 +75,12 @@ export const defaultButtonTokens: TokenSettings = () => }, }, rounded: { - borderRadius: globalTokens.corner.radius.medium, + borderRadius: globalTokens.corner.radius40, }, circular: { - borderRadius: globalTokens.corner.radius.circle, + borderRadius: globalTokens.corner.radiusCircular, }, square: { - borderRadius: globalTokens.corner.radius.none, + borderRadius: globalTokens.corner.radiusNone, }, } as ButtonTokens); diff --git a/packages/components/Button/src/ButtonTokens.ts b/packages/components/Button/src/ButtonTokens.ts index 45a03abaca..37cb97c14a 100644 --- a/packages/components/Button/src/ButtonTokens.ts +++ b/packages/components/Button/src/ButtonTokens.ts @@ -9,8 +9,8 @@ export const defaultButtonTokens: TokenSettings = () => width: '100%', }, medium: { - padding: globalTokens.spacing.sNudge - globalTokens.stroke.width.thin, - borderWidth: globalTokens.stroke.width.thin, + padding: globalTokens.spacing.sNudge - globalTokens.stroke.width10, + borderWidth: globalTokens.stroke.width10, iconSize: 16, focused: { borderWidth: 0, @@ -18,7 +18,7 @@ export const defaultButtonTokens: TokenSettings = () => }, hasContent: { minWidth: 96, - paddingHorizontal: globalTokens.spacing.m - globalTokens.stroke.width.thin, + paddingHorizontal: globalTokens.spacing.m - globalTokens.stroke.width10, hasIconAfter: { spacingIconContentAfter: globalTokens.spacing.sNudge, }, @@ -31,8 +31,8 @@ export const defaultButtonTokens: TokenSettings = () => }, }, small: { - padding: globalTokens.spacing.xs - globalTokens.stroke.width.thin, - borderWidth: globalTokens.stroke.width.thin, + padding: globalTokens.spacing.xs - globalTokens.stroke.width10, + borderWidth: globalTokens.stroke.width10, iconSize: 16, focused: { borderWidth: 0, @@ -40,7 +40,7 @@ export const defaultButtonTokens: TokenSettings = () => }, hasContent: { minWidth: 64, - paddingHorizontal: globalTokens.spacing.s - globalTokens.stroke.width.thin, + paddingHorizontal: globalTokens.spacing.s - globalTokens.stroke.width10, hasIconAfter: { spacingIconContentAfter: globalTokens.spacing.xs, }, @@ -53,8 +53,8 @@ export const defaultButtonTokens: TokenSettings = () => }, }, large: { - padding: globalTokens.spacing.s - globalTokens.stroke.width.thin, - borderWidth: globalTokens.stroke.width.thin, + padding: globalTokens.spacing.s - globalTokens.stroke.width10, + borderWidth: globalTokens.stroke.width10, iconSize: 20, focused: { borderWidth: 0, @@ -62,7 +62,7 @@ export const defaultButtonTokens: TokenSettings = () => }, hasContent: { minWidth: 96, - paddingHorizontal: globalTokens.spacing.l - globalTokens.stroke.width.thin, + paddingHorizontal: globalTokens.spacing.l - globalTokens.stroke.width10, hasIconAfter: { spacingIconContentAfter: globalTokens.spacing.sNudge, }, @@ -75,12 +75,12 @@ export const defaultButtonTokens: TokenSettings = () => }, }, rounded: { - borderRadius: globalTokens.corner.radius.medium, + borderRadius: globalTokens.corner.radius40, }, circular: { - borderRadius: globalTokens.corner.radius.circle, + borderRadius: globalTokens.corner.radiusCircular, }, square: { - borderRadius: globalTokens.corner.radius.none, + borderRadius: globalTokens.corner.radiusNone, }, } as ButtonTokens); diff --git a/packages/components/Button/src/ButtonTokens.win32.ts b/packages/components/Button/src/ButtonTokens.win32.ts index 6382c8e6d4..0f10a09e8e 100644 --- a/packages/components/Button/src/ButtonTokens.win32.ts +++ b/packages/components/Button/src/ButtonTokens.win32.ts @@ -9,8 +9,8 @@ export const defaultButtonTokens: TokenSettings = () => width: '100%', }, medium: { - padding: globalTokens.spacing.s - globalTokens.stroke.width.thin, - borderWidth: globalTokens.stroke.width.thin, + padding: globalTokens.spacing.s - globalTokens.stroke.width10, + borderWidth: globalTokens.stroke.width10, iconSize: 16, focused: { borderWidth: 0, @@ -18,8 +18,8 @@ export const defaultButtonTokens: TokenSettings = () => }, hasContent: { minWidth: 96, - padding: globalTokens.spacing.sNudge - globalTokens.stroke.width.thin, - paddingHorizontal: globalTokens.spacing.m - globalTokens.stroke.width.thin, + padding: globalTokens.spacing.sNudge - globalTokens.stroke.width10, + paddingHorizontal: globalTokens.spacing.m - globalTokens.stroke.width10, hasIconAfter: { spacingIconContentAfter: globalTokens.spacing.s, }, @@ -33,8 +33,8 @@ export const defaultButtonTokens: TokenSettings = () => }, }, small: { - padding: globalTokens.spacing.xs - globalTokens.stroke.width.thin, - borderWidth: globalTokens.stroke.width.thin, + padding: globalTokens.spacing.xs - globalTokens.stroke.width10, + borderWidth: globalTokens.stroke.width10, iconSize: 16, focused: { borderWidth: 0, @@ -43,7 +43,7 @@ export const defaultButtonTokens: TokenSettings = () => hasContent: { minWidth: 64, minHeight: 32, - paddingHorizontal: globalTokens.spacing.s - globalTokens.stroke.width.thin, + paddingHorizontal: globalTokens.spacing.s - globalTokens.stroke.width10, hasIconAfter: { spacingIconContentAfter: globalTokens.spacing.xs, }, @@ -56,8 +56,8 @@ export const defaultButtonTokens: TokenSettings = () => }, }, large: { - padding: globalTokens.spacing.mNudge - globalTokens.stroke.width.thin, - borderWidth: globalTokens.stroke.width.thin, + padding: globalTokens.spacing.mNudge - globalTokens.stroke.width10, + borderWidth: globalTokens.stroke.width10, iconSize: 20, focused: { borderWidth: 0, @@ -66,8 +66,8 @@ export const defaultButtonTokens: TokenSettings = () => hasContent: { minWidth: 96, minHeight: 40, - padding: globalTokens.spacing.s - globalTokens.stroke.width.thin, - paddingHorizontal: globalTokens.spacing.l - globalTokens.stroke.width.thin, + padding: globalTokens.spacing.s - globalTokens.stroke.width10, + paddingHorizontal: globalTokens.spacing.l - globalTokens.stroke.width10, hasIconAfter: { spacingIconContentAfter: globalTokens.spacing.sNudge, }, @@ -81,12 +81,12 @@ export const defaultButtonTokens: TokenSettings = () => }, }, rounded: { - borderRadius: globalTokens.corner.radius.medium, + borderRadius: globalTokens.corner.radius40, }, circular: { - borderRadius: globalTokens.corner.radius.circle, + borderRadius: globalTokens.corner.radiusCircular, }, square: { - borderRadius: globalTokens.corner.radius.none, + borderRadius: globalTokens.corner.radiusNone, }, } as ButtonTokens); diff --git a/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.win32.ts b/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.win32.ts index 16356b303c..98388e1baa 100644 --- a/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.win32.ts +++ b/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.win32.ts @@ -7,11 +7,11 @@ export const defaultCompoundButtonFontTokens: TokenSettings = (): CompoundButtonTokens => ({ medium: { - padding: globalTokens.spacing.m - globalTokens.stroke.width.thin, + padding: globalTokens.spacing.m - globalTokens.stroke.width10, focused: { padding: globalTokens.spacing.m, }, hasContent: { - paddingHorizontal: globalTokens.spacing.m - globalTokens.stroke.width.thin, + paddingHorizontal: globalTokens.spacing.m - globalTokens.stroke.width10, minWidth: 96, focused: { paddingHorizontal: globalTokens.spacing.m, @@ -24,12 +24,12 @@ export const defaultCompoundButtonTokens: TokenSettings = (t: Theme) => ({ - borderRadius: globalTokens.corner.radius.circle, + borderRadius: globalTokens.corner.radiusCircular, minHeight: 56, minWidth: 56, padding: globalTokens.spacing.l, diff --git a/packages/components/Button/src/FAB/__snapshots__/FAB.test.tsx.snap b/packages/components/Button/src/FAB/__snapshots__/FAB.test.tsx.snap index b6749aea2c..ed278b302a 100644 --- a/packages/components/Button/src/FAB/__snapshots__/FAB.test.tsx.snap +++ b/packages/components/Button/src/FAB/__snapshots__/FAB.test.tsx.snap @@ -22,8 +22,8 @@ exports[`Custom FAB with no shadow(iOS) 1`] = ` Object { "alignItems": "center", "alignSelf": "flex-start", - "backgroundColor": "#0078d4", - "borderColor": "#005a9e", + "backgroundColor": "#0f6cbd", + "borderColor": "#0f548c", "borderRadius": 9999, "display": "flex", "flexDirection": "row", @@ -62,8 +62,8 @@ exports[`Default FAB (iOS) 1`] = ` style={ Object { "alignSelf": "flex-start", - "backgroundColor": "#0078d4", - "borderColor": "#005a9e", + "backgroundColor": "#0f6cbd", + "borderColor": "#0f548c", "borderRadius": 9999, "bottom": undefined, "display": "flex", @@ -116,9 +116,9 @@ exports[`Default FAB (iOS) 1`] = ` Object { "alignItems": "center", "alignSelf": "flex-start", - "backgroundColor": "#0078d4", + "backgroundColor": "#0f6cbd", "borderBottomWidth": undefined, - "borderColor": "#005a9e", + "borderColor": "#0f548c", "borderEndWidth": undefined, "borderLeftWidth": undefined, "borderRadius": 9999, 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 8438617db2..9550c015cc 100644 --- a/packages/components/Button/src/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap +++ b/packages/components/Button/src/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap @@ -37,13 +37,13 @@ exports[`ToggleButton default 1`] = ` "backgroundColor": "#f3f2f1", "borderColor": "#8a8886", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 1, "display": "flex", "flexDirection": "row", "justifyContent": "center", "minWidth": 96, "padding": 8, - "paddingHorizontal": 14.5, + "paddingHorizontal": 15, "width": undefined, } } diff --git a/packages/components/Button/src/__snapshots__/Button.test.tsx.snap b/packages/components/Button/src/__snapshots__/Button.test.tsx.snap index 33da3998b2..76d5da97af 100644 --- a/packages/components/Button/src/__snapshots__/Button.test.tsx.snap +++ b/packages/components/Button/src/__snapshots__/Button.test.tsx.snap @@ -25,13 +25,13 @@ exports[`Button component tests Button circular 1`] = ` "backgroundColor": "#f3f2f1", "borderColor": "#8a8886", "borderRadius": 9999, - "borderWidth": 1.5, + "borderWidth": 1, "display": "flex", "flexDirection": "row", "justifyContent": "center", "minWidth": 96, "padding": 8, - "paddingHorizontal": 14.5, + "paddingHorizontal": 15, "width": undefined, } } @@ -82,13 +82,13 @@ exports[`Button component tests Button composed 1`] = ` "backgroundColor": "#f3f2f1", "borderColor": "#8a8886", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 1, "display": "flex", "flexDirection": "row", "justifyContent": "center", "minWidth": 96, "padding": 8, - "paddingHorizontal": 14.5, + "paddingHorizontal": 15, "width": undefined, } } @@ -138,13 +138,13 @@ exports[`Button component tests Button customized 1`] = ` "backgroundColor": "pink", "borderColor": "#8a8886", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 1, "display": "flex", "flexDirection": "row", "justifyContent": "center", "minWidth": 96, "padding": 8, - "paddingHorizontal": 14.5, + "paddingHorizontal": 15, "width": undefined, } } @@ -195,13 +195,13 @@ exports[`Button component tests Button default 1`] = ` "backgroundColor": "#f3f2f1", "borderColor": "#8a8886", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 1, "display": "flex", "flexDirection": "row", "justifyContent": "center", "minWidth": 96, "padding": 8, - "paddingHorizontal": 14.5, + "paddingHorizontal": 15, "width": undefined, } } @@ -257,13 +257,13 @@ exports[`Button component tests Button disabled 1`] = ` "backgroundColor": "#f3f2f1", "borderColor": "#f3f2f1", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 1, "display": "flex", "flexDirection": "row", "justifyContent": "center", "minWidth": 96, "padding": 8, - "paddingHorizontal": 14.5, + "paddingHorizontal": 15, "width": undefined, } } @@ -315,13 +315,13 @@ exports[`Button component tests Button large 1`] = ` "backgroundColor": "#f3f2f1", "borderColor": "#8a8886", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 1, "display": "flex", "flexDirection": "row", "justifyContent": "center", "minWidth": 96, - "padding": 10.5, - "paddingHorizontal": 18.5, + "padding": 11, + "paddingHorizontal": 19, "width": undefined, } } @@ -370,16 +370,16 @@ exports[`Button component tests Button primary 1`] = ` Object { "alignItems": "center", "alignSelf": "flex-start", - "backgroundColor": "#0078d4", - "borderColor": "#005a9e", + "backgroundColor": "#0f6cbd", + "borderColor": "#0f548c", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 1, "display": "flex", "flexDirection": "row", "justifyContent": "center", "minWidth": 96, "padding": 8, - "paddingHorizontal": 14.5, + "paddingHorizontal": 15, "width": undefined, } } @@ -431,13 +431,13 @@ exports[`Button component tests Button small 1`] = ` "backgroundColor": "#f3f2f1", "borderColor": "#8a8886", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 1, "display": "flex", "flexDirection": "row", "justifyContent": "center", "minWidth": 64, - "padding": 6.5, - "paddingHorizontal": 10.5, + "padding": 7, + "paddingHorizontal": 11, "width": undefined, } } @@ -489,13 +489,13 @@ exports[`Button component tests Button square 1`] = ` "backgroundColor": "#f3f2f1", "borderColor": "#8a8886", "borderRadius": 0, - "borderWidth": 1.5, + "borderWidth": 1, "display": "flex", "flexDirection": "row", "justifyContent": "center", "minWidth": 96, "padding": 8, - "paddingHorizontal": 14.5, + "paddingHorizontal": 15, "width": undefined, } } @@ -547,13 +547,13 @@ exports[`Button component tests Button subtle 1`] = ` "backgroundColor": "#ffffff", "borderColor": "#ffffff", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 1, "display": "flex", "flexDirection": "row", "justifyContent": "center", "minWidth": 96, "padding": 8, - "paddingHorizontal": 14.5, + "paddingHorizontal": 15, "width": undefined, } } diff --git a/packages/components/Checkbox/src/CheckboxTokens.ts b/packages/components/Checkbox/src/CheckboxTokens.ts index 22b1f233e3..34e6eb3ca6 100644 --- a/packages/components/Checkbox/src/CheckboxTokens.ts +++ b/packages/components/Checkbox/src/CheckboxTokens.ts @@ -8,14 +8,14 @@ export const defaultCheckboxTokens: TokenSettings = (t: T requiredColor: t.colors.redForeground1, requiredPadding: globalTokens.spacing.s, medium: { - borderRadius: globalTokens.corner.radius.small, - checkboxBorderWidth: globalTokens.stroke.width.thin, - checkboxBorderRadius: globalTokens.corner.radius.small, + borderRadius: globalTokens.corner.radius20, + checkboxBorderWidth: globalTokens.stroke.width10, + checkboxBorderRadius: globalTokens.corner.radius20, checkboxSize: 16, checkmarkSize: 12, label: { padding: globalTokens.spacing.s, - borderRadius: globalTokens.corner.radius.medium, + borderRadius: globalTokens.corner.radius40, spacingLabelAfter: globalTokens.spacing.m, labelIsBefore: { spacingLabelBefore: globalTokens.spacing.m, @@ -26,14 +26,14 @@ export const defaultCheckboxTokens: TokenSettings = (t: T variant: 'bodyStandard', }, large: { - borderRadius: globalTokens.corner.radius.small, - checkboxBorderWidth: globalTokens.stroke.width.thin, - checkboxBorderRadius: globalTokens.corner.radius.small, + borderRadius: globalTokens.corner.radius20, + checkboxBorderWidth: globalTokens.stroke.width10, + checkboxBorderRadius: globalTokens.corner.radius20, checkboxSize: 20, checkmarkSize: 16, label: { padding: globalTokens.spacing.s, - borderRadius: globalTokens.corner.radius.medium, + borderRadius: globalTokens.corner.radius40, spacingLabelAfter: globalTokens.spacing.m, labelIsBefore: { spacingLabelBefore: globalTokens.spacing.m, @@ -68,7 +68,7 @@ export const defaultCheckboxTokens: TokenSettings = (t: T checkmarkOpacity: 1, }, circular: { - borderRadius: globalTokens.corner.radius.circle, - checkboxBorderRadius: globalTokens.corner.radius.circle, + borderRadius: globalTokens.corner.radiusCircular, + checkboxBorderRadius: globalTokens.corner.radiusCircular, }, } as CheckboxTokens); diff --git a/packages/components/Checkbox/src/CheckboxTokens.win32.ts b/packages/components/Checkbox/src/CheckboxTokens.win32.ts index 2f7b8ce401..026cd273f9 100644 --- a/packages/components/Checkbox/src/CheckboxTokens.win32.ts +++ b/packages/components/Checkbox/src/CheckboxTokens.win32.ts @@ -8,15 +8,15 @@ export const defaultCheckboxTokens: TokenSettings = (t: T requiredColor: t.colors.redForeground1, requiredPadding: globalTokens.spacing.s, medium: { - borderRadius: globalTokens.corner.radius.small, - checkboxBorderWidth: globalTokens.stroke.width.thin, - checkboxBorderRadius: globalTokens.corner.radius.small, + borderRadius: globalTokens.corner.radius20, + checkboxBorderWidth: globalTokens.stroke.width10, + checkboxBorderRadius: globalTokens.corner.radius20, checkboxSize: 16, checkmarkSize: 12, label: { padding: globalTokens.spacing.s, paddingHorizontal: globalTokens.spacing.m, - borderRadius: globalTokens.corner.radius.medium, + borderRadius: globalTokens.corner.radius40, spacingLabelAfter: globalTokens.spacing.s, labelIsBefore: { spacingLabelBefore: globalTokens.spacing.s, @@ -24,19 +24,19 @@ export const defaultCheckboxTokens: TokenSettings = (t: T }, }, padding: globalTokens.spacing.xs, - fontSize: globalTokens.font.size[200], + fontSize: globalTokens.font.size200, fontWeight: globalTokens.font.weight.regular, fontFamily: t.typography.families.primary, }, large: { - borderRadius: globalTokens.corner.radius.small, - checkboxBorderWidth: globalTokens.stroke.width.thin, - checkboxBorderRadius: globalTokens.corner.radius.small, + borderRadius: globalTokens.corner.radius20, + checkboxBorderWidth: globalTokens.stroke.width10, + checkboxBorderRadius: globalTokens.corner.radius20, checkboxSize: 20, checkmarkSize: 16, label: { padding: globalTokens.spacing.s, - borderRadius: globalTokens.corner.radius.medium, + borderRadius: globalTokens.corner.radius40, spacingLabelAfter: globalTokens.spacing.m, labelIsBefore: { spacingLabelBefore: globalTokens.spacing.m, @@ -44,7 +44,7 @@ export const defaultCheckboxTokens: TokenSettings = (t: T }, }, padding: globalTokens.spacing.xs, - fontSize: globalTokens.font.size[300], + fontSize: globalTokens.font.size300, fontWeight: globalTokens.font.weight.regular, fontFamily: t.typography.families.primary, }, @@ -91,7 +91,7 @@ export const defaultCheckboxTokens: TokenSettings = (t: T }, }, circular: { - borderRadius: globalTokens.corner.radius.circle, - checkboxBorderRadius: globalTokens.corner.radius.circle, + borderRadius: globalTokens.corner.radiusCircular, + checkboxBorderRadius: globalTokens.corner.radiusCircular, }, } as CheckboxTokens); diff --git a/packages/components/Checkbox/src/CheckboxTokens.windows.ts b/packages/components/Checkbox/src/CheckboxTokens.windows.ts index 93a1e08476..de8f340626 100644 --- a/packages/components/Checkbox/src/CheckboxTokens.windows.ts +++ b/packages/components/Checkbox/src/CheckboxTokens.windows.ts @@ -8,15 +8,15 @@ export const defaultCheckboxTokens: TokenSettings = (t: T requiredColor: t.colors.redForeground1, requiredPadding: globalTokens.spacing.s, medium: { - borderRadius: globalTokens.corner.radius.small, - checkboxBorderWidth: globalTokens.stroke.width.thin, - checkboxBorderRadius: globalTokens.corner.radius.small, + borderRadius: globalTokens.corner.radius20, + checkboxBorderWidth: globalTokens.stroke.width10, + checkboxBorderRadius: globalTokens.corner.radius20, checkboxSize: 16, checkmarkSize: 8, spacingLabelAfter: globalTokens.spacing.m, label: { padding: globalTokens.spacing.s, - borderRadius: globalTokens.corner.radius.medium, + borderRadius: globalTokens.corner.radius40, spacingLabelAfter: globalTokens.spacing.m, labelIsBefore: { spacingLabelBefore: globalTokens.spacing.m, @@ -27,15 +27,15 @@ export const defaultCheckboxTokens: TokenSettings = (t: T variant: 'bodyStandard', }, large: { - borderRadius: globalTokens.corner.radius.small, - checkboxBorderWidth: globalTokens.stroke.width.thin, - checkboxBorderRadius: globalTokens.corner.radius.small, + borderRadius: globalTokens.corner.radius20, + checkboxBorderWidth: globalTokens.stroke.width10, + checkboxBorderRadius: globalTokens.corner.radius20, checkboxSize: 20, checkmarkSize: 10, spacingLabelAfter: globalTokens.spacing.m, label: { padding: globalTokens.spacing.s, - borderRadius: globalTokens.corner.radius.medium, + borderRadius: globalTokens.corner.radius40, spacingLabelAfter: globalTokens.spacing.m, labelIsBefore: { spacingLabelBefore: globalTokens.spacing.m, @@ -86,7 +86,7 @@ export const defaultCheckboxTokens: TokenSettings = (t: T }, }, circular: { - borderRadius: globalTokens.corner.radius.circle, - checkboxBorderRadius: globalTokens.corner.radius.circle, + borderRadius: globalTokens.corner.radiusCircular, + checkboxBorderRadius: globalTokens.corner.radiusCircular, }, } as CheckboxTokens); diff --git a/packages/components/Link/src/__tests__/__snapshots__/Link.test.tsx.snap b/packages/components/Link/src/__tests__/__snapshots__/Link.test.tsx.snap index 27004d5dbe..658bc36099 100644 --- a/packages/components/Link/src/__tests__/__snapshots__/Link.test.tsx.snap +++ b/packages/components/Link/src/__tests__/__snapshots__/Link.test.tsx.snap @@ -32,7 +32,7 @@ exports[`Link all props 1`] = ` "borderRadius": 4, "borderStyle": "solid", "borderWidth": 2, - "color": "link", + "color": "#0f6cbd", "fontFamily": "Segoe UI", "fontSize": 13, "fontWeight": "400", @@ -79,7 +79,7 @@ exports[`Link with child 1`] = ` "borderRadius": 4, "borderStyle": "solid", "borderWidth": 2, - "color": "link", + "color": "#0f6cbd", "fontFamily": "Segoe UI", "fontSize": 13, "fontWeight": "400", diff --git a/packages/components/Menu/src/MenuDivider/MenuDividerTokens.macos.ts b/packages/components/Menu/src/MenuDivider/MenuDividerTokens.macos.ts index d652cc0def..acc8919181 100644 --- a/packages/components/Menu/src/MenuDivider/MenuDividerTokens.macos.ts +++ b/packages/components/Menu/src/MenuDivider/MenuDividerTokens.macos.ts @@ -5,6 +5,6 @@ import { MenuDividerTokens } from './MenuDivider.types'; export const defaultMenuDividerTokens: TokenSettings = (t: Theme): MenuDividerTokens => ({ backgroundColor: t.colors.neutralStroke2, - height: globalTokens.stroke.width.thin, + height: globalTokens.stroke.width10, margin: globalTokens.spacing.xxs, }); diff --git a/packages/components/Menu/src/MenuDivider/MenuDividerTokens.ts b/packages/components/Menu/src/MenuDivider/MenuDividerTokens.ts index 5d9e9cb2de..cbff3144ef 100644 --- a/packages/components/Menu/src/MenuDivider/MenuDividerTokens.ts +++ b/packages/components/Menu/src/MenuDivider/MenuDividerTokens.ts @@ -5,6 +5,6 @@ import { MenuDividerTokens } from './MenuDivider.types'; export const defaultMenuDividerTokens: TokenSettings = (t: Theme): MenuDividerTokens => ({ backgroundColor: t.colors.neutralStroke2, - height: globalTokens.stroke.width.thin, + height: globalTokens.stroke.width10, marginVertical: globalTokens.spacing.xs, }); diff --git a/packages/components/Menu/src/MenuDivider/MenuDividerTokens.win32.ts b/packages/components/Menu/src/MenuDivider/MenuDividerTokens.win32.ts index cb53027c0f..1e45dabc33 100644 --- a/packages/components/Menu/src/MenuDivider/MenuDividerTokens.win32.ts +++ b/packages/components/Menu/src/MenuDivider/MenuDividerTokens.win32.ts @@ -5,6 +5,6 @@ import { MenuDividerTokens } from './MenuDivider.types'; export const defaultMenuDividerTokens: TokenSettings = (t: Theme): MenuDividerTokens => ({ backgroundColor: t.colors.neutralStroke1, - height: globalTokens.stroke.width.thin, + height: globalTokens.stroke.width10, margin: globalTokens.spacing.xxs, }); diff --git a/packages/components/Menu/src/MenuItem/MenuItemTokens.macos.ts b/packages/components/Menu/src/MenuItem/MenuItemTokens.macos.ts index c914869938..1118d0e6f8 100644 --- a/packages/components/Menu/src/MenuItem/MenuItemTokens.macos.ts +++ b/packages/components/Menu/src/MenuItem/MenuItemTokens.macos.ts @@ -9,7 +9,7 @@ export const defaultMenuItemTokens: TokenSettings = (t: T checkmarkSize: 16, color: t.colors.menuItemText, // matches ContextualMenu fontFamily: t.typography.families.primary, - fontSize: globalTokens.font.size[300], + fontSize: globalTokens.font.size300, fontWeight: globalTokens.font.weight.regular as FontWeightValue, gap: globalTokens.spacing.xs, paddingHorizontal: 5, // hardcoded for now to match ContextualMenu diff --git a/packages/components/Menu/src/MenuItem/MenuItemTokens.ts b/packages/components/Menu/src/MenuItem/MenuItemTokens.ts index b3ff065a9a..3c16041bd7 100644 --- a/packages/components/Menu/src/MenuItem/MenuItemTokens.ts +++ b/packages/components/Menu/src/MenuItem/MenuItemTokens.ts @@ -5,11 +5,11 @@ import { MenuItemTokens } from './MenuItem.types'; export const defaultMenuItemTokens: TokenSettings = (t: Theme): MenuItemTokens => ({ backgroundColor: t.colors.neutralBackground1, - borderRadius: globalTokens.corner.radius.medium, + borderRadius: globalTokens.corner.radius40, checkmarkSize: 16, color: t.colors.neutralForeground2, fontFamily: t.typography.families.primary, - fontSize: globalTokens.font.size[300], + fontSize: globalTokens.font.size300, fontWeight: globalTokens.font.weight.regular as FontWeightValue, gap: globalTokens.spacing.xs, minHeight: 32, diff --git a/packages/components/Menu/src/MenuItem/MenuItemTokens.win32.ts b/packages/components/Menu/src/MenuItem/MenuItemTokens.win32.ts index c9f2bd1645..c7a0a3e947 100644 --- a/packages/components/Menu/src/MenuItem/MenuItemTokens.win32.ts +++ b/packages/components/Menu/src/MenuItem/MenuItemTokens.win32.ts @@ -5,11 +5,11 @@ import { MenuItemTokens } from './MenuItem.types'; export const defaultMenuItemTokens: TokenSettings = (t: Theme): MenuItemTokens => ({ backgroundColor: t.colors.neutralBackground1, - borderRadius: globalTokens.corner.radius.none, + borderRadius: globalTokens.corner.radiusNone, checkmarkSize: 16, color: t.colors.neutralForeground1, fontFamily: t.typography.families.primary, - fontSize: globalTokens.font.size[200], + fontSize: globalTokens.font.size200, fontWeight: globalTokens.font.weight.regular as FontWeightValue, gap: globalTokens.spacing.xs, minHeight: 24, diff --git a/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.macos.ts b/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.macos.ts index 03dda087ac..7f5051e6d1 100644 --- a/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.macos.ts +++ b/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.macos.ts @@ -11,7 +11,7 @@ export const defaultMenuItemCheckboxTokens: TokenSettings = (t: Theme): MenuItemCheckboxTokens => ({ backgroundColor: t.colors.neutralBackground1, - borderRadius: globalTokens.corner.radius.medium, + borderRadius: globalTokens.corner.radius40, checkmarkPadding: globalTokens.spacing.none, checkmarkSize: 16, checkmarkVisibility: 0, color: t.colors.neutralForeground2, fontFamily: t.typography.families.primary, - fontSize: globalTokens.font.size[300], + fontSize: globalTokens.font.size300, fontWeight: globalTokens.font.weight.regular as FontWeightValue, gap: globalTokens.spacing.xs, minHeight: 32, diff --git a/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.win32.ts b/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.win32.ts index 06ec52e60e..1cdb41597d 100644 --- a/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.win32.ts +++ b/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.win32.ts @@ -5,13 +5,13 @@ import { MenuItemCheckboxTokens } from './MenuItemCheckbox.types'; export const defaultMenuItemCheckboxTokens: TokenSettings = (t: Theme): MenuItemCheckboxTokens => ({ backgroundColor: t.colors.neutralBackground1, - borderRadius: globalTokens.corner.radius.none, + borderRadius: globalTokens.corner.radiusNone, checkmarkPadding: globalTokens.spacing.xxs, checkmarkSize: 16, checkmarkVisibility: 0, color: t.colors.neutralForeground1, fontFamily: t.typography.families.primary, - fontSize: globalTokens.font.size[200], + fontSize: globalTokens.font.size200, fontWeight: globalTokens.font.weight.regular as FontWeightValue, gap: globalTokens.spacing.xs, minHeight: 24, diff --git a/packages/components/Menu/src/__tests__/__snapshots__/Menu.test.tsx.snap b/packages/components/Menu/src/__tests__/__snapshots__/Menu.test.tsx.snap index 6687b263ee..98ab731449 100644 --- a/packages/components/Menu/src/__tests__/__snapshots__/Menu.test.tsx.snap +++ b/packages/components/Menu/src/__tests__/__snapshots__/Menu.test.tsx.snap @@ -32,13 +32,13 @@ exports[`Checkbox component tests Menu default 1`] = ` "backgroundColor": "#f3f2f1", "borderColor": "#8a8886", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 1, "display": "flex", "flexDirection": "row", "justifyContent": "center", "minWidth": 96, "padding": 8, - "paddingHorizontal": 14.5, + "paddingHorizontal": 15, "width": undefined, } } @@ -98,13 +98,13 @@ Array [ "backgroundColor": "#f3f2f1", "borderColor": "#8a8886", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 1, "display": "flex", "flexDirection": "row", "justifyContent": "center", "minWidth": 96, "padding": 8, - "paddingHorizontal": 14.5, + "paddingHorizontal": 15, "width": undefined, } } @@ -306,13 +306,13 @@ Array [ "backgroundColor": "#f3f2f1", "borderColor": "#8a8886", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 1, "display": "flex", "flexDirection": "row", "justifyContent": "center", "minWidth": 96, "padding": 8, - "paddingHorizontal": 14.5, + "paddingHorizontal": 15, "width": undefined, } } @@ -467,13 +467,13 @@ Array [ "backgroundColor": "#f3f2f1", "borderColor": "#8a8886", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 1, "display": "flex", "flexDirection": "row", "justifyContent": "center", "minWidth": 96, "padding": 8, - "paddingHorizontal": 14.5, + "paddingHorizontal": 15, "width": undefined, } } @@ -654,7 +654,7 @@ Array [ Object { "backgroundColor": "#d1d1d1", "display": "flex", - "height": 1.5, + "height": 1, "margin": 4, "marginVertical": undefined, "width": undefined, @@ -813,13 +813,13 @@ Array [ "backgroundColor": "#f3f2f1", "borderColor": "#8a8886", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 1, "display": "flex", "flexDirection": "row", "justifyContent": "center", "minWidth": 96, "padding": 8, - "paddingHorizontal": 14.5, + "paddingHorizontal": 15, "width": undefined, } } @@ -1000,7 +1000,7 @@ Array [ Object { "backgroundColor": "#d1d1d1", "display": "flex", - "height": 1.5, + "height": 1, "margin": 4, "marginVertical": undefined, "width": undefined, @@ -1159,13 +1159,13 @@ Array [ "backgroundColor": "#f3f2f1", "borderColor": "#8a8886", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 1, "display": "flex", "flexDirection": "row", "justifyContent": "center", "minWidth": 96, "padding": 8, - "paddingHorizontal": 14.5, + "paddingHorizontal": 15, "width": undefined, } } @@ -1346,7 +1346,7 @@ Array [ Object { "backgroundColor": "#d1d1d1", "display": "flex", - "height": 1.5, + "height": 1, "margin": 4, "marginVertical": undefined, "width": undefined, @@ -1505,13 +1505,13 @@ Array [ "backgroundColor": "#f3f2f1", "borderColor": "#8a8886", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 1, "display": "flex", "flexDirection": "row", "justifyContent": "center", "minWidth": 96, "padding": 8, - "paddingHorizontal": 14.5, + "paddingHorizontal": 15, "width": undefined, } } @@ -1839,13 +1839,13 @@ Array [ "backgroundColor": "#f3f2f1", "borderColor": "#8a8886", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 1, "display": "flex", "flexDirection": "row", "justifyContent": "center", "minWidth": 96, "padding": 8, - "paddingHorizontal": 14.5, + "paddingHorizontal": 15, "width": undefined, } } diff --git a/packages/components/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap b/packages/components/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap index 1ad06ca38c..292a2e1363 100644 --- a/packages/components/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap +++ b/packages/components/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap @@ -25,7 +25,7 @@ exports[`ContextualMenu default 1`] = ` "backgroundColor": "#f3f2f1", "borderColor": "#8a8886", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 1, "display": "flex", "flexDirection": "row", "justifyContent": "center", diff --git a/packages/components/Notification/src/__tests__/__snapshots__/Notification.test.tsx.snap b/packages/components/Notification/src/__tests__/__snapshots__/Notification.test.tsx.snap index 0923d64837..18ccc7b553 100644 --- a/packages/components/Notification/src/__tests__/__snapshots__/Notification.test.tsx.snap +++ b/packages/components/Notification/src/__tests__/__snapshots__/Notification.test.tsx.snap @@ -191,14 +191,14 @@ exports[`Notification component tests Notification default 1`] = ` "backgroundColor": "transparent", "borderColor": "#ffffff", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 1, "display": "flex", "flexDirection": "row", "justifyContent": "center", "marginStart": 16, "minWidth": 96, "padding": 8, - "paddingHorizontal": 14.5, + "paddingHorizontal": 15, } } > diff --git a/packages/components/text/src/Text.tsx b/packages/components/text/src/Text.tsx index e6baf714bb..c924023bc6 100644 --- a/packages/components/text/src/Text.tsx +++ b/packages/components/text/src/Text.tsx @@ -69,7 +69,7 @@ export const Text = compressible((props: TextProps, useTo color, variant, fontFamily: font == 'base' ? 'primary' : font, - fontSize: globalTokens.font.size[size], + fontSize: globalTokens.font['size' + size], fontWeight: globalTokens.font.weight[weight] as FontWeightValue, // leave it undefined for tokens to be set by user fontStyle: italic ? 'italic' : undefined, diff --git a/packages/experimental/Dropdown/src/Option/OptionTokens.ts b/packages/experimental/Dropdown/src/Option/OptionTokens.ts index dfb8e6a492..16e6328819 100644 --- a/packages/experimental/Dropdown/src/Option/OptionTokens.ts +++ b/packages/experimental/Dropdown/src/Option/OptionTokens.ts @@ -4,7 +4,7 @@ import type { OptionTokens } from './Option.types'; export const defaultOptionTokens: TokenSettings = (t: Theme): OptionTokens => ({ backgroundColor: t.colors.neutralBackground1, - borderRadius: globalTokens.corner.radius.medium, + borderRadius: globalTokens.corner.radius40, checkmarkColor: t.colors.neutralForeground2, checkmarkSize: 16, color: t.colors.neutralForeground2, diff --git a/packages/experimental/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap b/packages/experimental/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap index 0a5e8167b0..8b3de968e0 100644 --- a/packages/experimental/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap +++ b/packages/experimental/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap @@ -25,13 +25,13 @@ exports[`ContextualMenu default 1`] = ` "backgroundColor": "#f3f2f1", "borderColor": "#8a8886", "borderRadius": 4, - "borderWidth": 1.5, + "borderWidth": 1, "display": "flex", "flexDirection": "row", "justifyContent": "center", "minWidth": 96, "padding": 8, - "paddingHorizontal": 14.5, + "paddingHorizontal": 15, "width": undefined, } } diff --git a/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts b/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts index c272abfd9c..47094a683b 100644 --- a/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts +++ b/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts @@ -7,9 +7,9 @@ export const defaultRadioTokens: TokenSettings = (t: Theme) ({ borderColor: t.colors.transparentStroke, borderStyle: 'solid', - borderWidth: globalTokens.stroke.width.thin, - borderRadius: globalTokens.corner.radius.medium, - radioBorderWidth: globalTokens.stroke.width.thin, + borderWidth: globalTokens.stroke.width10, + borderRadius: globalTokens.corner.radius40, + radioBorderWidth: globalTokens.stroke.width10, radioVisibility: 0, variant: 'subheaderStandard', radioBorderStyle: 'solid', diff --git a/packages/theming/apple-theme/package.json b/packages/theming/apple-theme/package.json index f20fd5eb72..8536b56b5d 100644 --- a/packages/theming/apple-theme/package.json +++ b/packages/theming/apple-theme/package.json @@ -32,8 +32,8 @@ }, "dependencies": { "@fluentui-react-native/default-theme": ">=0.16.10 <1.0.0", - "@fluentui-react-native/design-tokens-ios": "^0.26.0", - "@fluentui-react-native/design-tokens-macos": "^0.13.0", + "@fluentui-react-native/design-tokens-ios": "^0.31.0", + "@fluentui-react-native/design-tokens-macos": "^0.31.0", "@fluentui-react-native/memo-cache": "^1.1.7", "@fluentui-react-native/theme": ">=0.7.8 <1.0.0", "@fluentui-react-native/theme-types": ">=0.23.1 <1.0.0", diff --git a/packages/theming/apple-theme/src/appleTypography.ios.ts b/packages/theming/apple-theme/src/appleTypography.ios.ts index 8f1d27c491..8f569f1d33 100644 --- a/packages/theming/apple-theme/src/appleTypography.ios.ts +++ b/packages/theming/apple-theme/src/appleTypography.ios.ts @@ -52,86 +52,86 @@ export function appleTypography(): Typography { // iOS styles caption2: { face: fontTokens.family.base, - size: fontTokens.size[100], + size: fontTokens.size100, weight: fontTokens.weight.regular, - lineHeight: fontTokens.lineHeight[100], + lineHeight: fontTokens.lineHeight100, letterSpacing: 0, }, caption1: { face: fontTokens.family.base, - size: fontTokens.size[200], + size: fontTokens.size200, weight: fontTokens.weight.regular, - lineHeight: fontTokens.lineHeight[200], + lineHeight: fontTokens.lineHeight200, letterSpacing: -0.08, }, caption1Strong: { face: fontTokens.family.base, - size: fontTokens.size[200], + size: fontTokens.size200, weight: fontTokens.weight.semibold, - lineHeight: fontTokens.lineHeight[200], + lineHeight: fontTokens.lineHeight200, letterSpacing: -0.08, }, body2: { face: fontTokens.family.base, - size: fontTokens.size[300], + size: fontTokens.size300, weight: fontTokens.weight.regular, - lineHeight: fontTokens.lineHeight[300], + lineHeight: fontTokens.lineHeight300, letterSpacing: -0.23, }, body2Strong: { face: fontTokens.family.base, - size: fontTokens.size[300], + size: fontTokens.size300, weight: fontTokens.weight.semibold, - lineHeight: fontTokens.lineHeight[300], + lineHeight: fontTokens.lineHeight300, letterSpacing: -0.23, }, body1: { face: fontTokens.family.base, - size: fontTokens.size[400], + size: fontTokens.size400, weight: fontTokens.weight.regular, - lineHeight: fontTokens.lineHeight[400], + lineHeight: fontTokens.lineHeight400, letterSpacing: -0.43, }, body1Strong: { face: fontTokens.family.base, - size: fontTokens.size[400], + size: fontTokens.size400, weight: fontTokens.weight.semibold, - lineHeight: fontTokens.lineHeight[400], + lineHeight: fontTokens.lineHeight400, letterSpacing: -0.43, }, title3: { face: fontTokens.family.base, - size: fontTokens.size[500], + size: fontTokens.size500, weight: fontTokens.weight.semibold, - lineHeight: fontTokens.lineHeight[500], + lineHeight: fontTokens.lineHeight500, letterSpacing: -0.45, }, title2: { face: fontTokens.family.base, - size: fontTokens.size[600], + size: fontTokens.size600, weight: fontTokens.weight.semibold, - lineHeight: fontTokens.lineHeight[600], + lineHeight: fontTokens.lineHeight600, letterSpacing: -0.26, }, title1: { face: fontTokens.family.base, - size: fontTokens.size[700], + size: fontTokens.size700, weight: fontTokens.weight.bold, - lineHeight: fontTokens.lineHeight[700], + lineHeight: fontTokens.lineHeight700, letterSpacing: 0.38, }, largeTitle: { face: fontTokens.family.base, - size: fontTokens.size[800], + size: fontTokens.size800, weight: fontTokens.weight.bold, - lineHeight: fontTokens.lineHeight[800], + lineHeight: fontTokens.lineHeight800, letterSpacing: 0.4, }, display: { face: fontTokens.family.base, - size: fontTokens.size[900], + size: fontTokens.size900, weight: fontTokens.weight.bold, - lineHeight: fontTokens.lineHeight[900], + lineHeight: fontTokens.lineHeight900, letterSpacing: 0.26, }, } as Variants, diff --git a/packages/theming/apple-theme/src/getMacOSTokens.ts b/packages/theming/apple-theme/src/getMacOSTokens.ts index ac48d9ea84..4c251b7e9b 100644 --- a/packages/theming/apple-theme/src/getMacOSTokens.ts +++ b/packages/theming/apple-theme/src/getMacOSTokens.ts @@ -32,15 +32,15 @@ export function getMacOSAliasTokens(mode: AppearanceOptions, isHighContrast: boo export function getMacOSShadowTokens(mode: AppearanceOptions, isHighContrast: boolean) { if (mode === 'light') { if (isHighContrast) { - return macOSLightHCShadowTokens.shadow; + return macOSLightHCShadowTokens; } else { - return macOSLightShadowTokens.shadow; + return macOSLightShadowTokens; } } else if (mode === 'dark') { if (isHighContrast) { - return macOSDarkHCShadowTokens.shadow; + return macOSDarkHCShadowTokens; } else { - return macOSDarkShadowTokens.shadow; + return macOSDarkShadowTokens; } } else if (mode === 'highContrast') { throw new Error('highContrast is not a valid AppearanceOptions on macOS'); diff --git a/packages/theming/apple-theme/src/getiOSTokens.ts b/packages/theming/apple-theme/src/getiOSTokens.ts index 99ab64305b..e59c1b79e8 100644 --- a/packages/theming/apple-theme/src/getiOSTokens.ts +++ b/packages/theming/apple-theme/src/getiOSTokens.ts @@ -5,9 +5,9 @@ import { assertNever } from 'assert-never'; export function getiOSShadowTokens(mode: AppearanceOptions) { if (mode === 'light') { - return iOSLightShadowTokens.shadow; + return iOSLightShadowTokens; } else if (mode === 'dark') { - return iOSDarkShadowTokens.shadow; + return iOSDarkShadowTokens; } else if (mode === 'highContrast') { throw new Error('highContrast is not a valid AppearanceOptions on iOS'); } else { diff --git a/packages/theming/default-theme/src/__tests__/__snapshots__/default-theme.test.ts.snap b/packages/theming/default-theme/src/__tests__/__snapshots__/default-theme.test.ts.snap index c9a9fa9963..31224f010e 100644 --- a/packages/theming/default-theme/src/__tests__/__snapshots__/default-theme.test.ts.snap +++ b/packages/theming/default-theme/src/__tests__/__snapshots__/default-theme.test.ts.snap @@ -769,7 +769,7 @@ Object { exports[`createDefaultTheme test themeOption - { appearance: 'dark', defaultAppearance: 'light' } 1`] = ` Object { "colors": Object { - "accentButtonBackground": "#0078d4", + "accentButtonBackground": "#0c3b5e", "accentButtonText": "#1b1a19", "actionLink": "#f3f2f1", "actionLinkHovered": "#faf9f8", @@ -798,8 +798,8 @@ Object { "brandForegroundLinkSelected": "#2899f5", "brandStroke1": "#2899f5", "brandStroke2": "#004c87", - "brandedBackground": "#2b88d8", - "brandedBorder": "#deecf9", + "brandedBackground": "#2886de", + "brandedBorder": "#479ef5", "brandedCheckedBackground": "#484644", "brandedCheckedContent": "#faf9f8", "brandedCheckedHoveredBackground": "#292827", @@ -809,19 +809,19 @@ Object { "brandedDisabledBorder": "#252423", "brandedDisabledContent": "#3b3a39", "brandedDisabledIcon": "#3b3a39", - "brandedFocusedBackground": "#c7e0f4", - "brandedFocusedBorder": "#82c7ff", + "brandedFocusedBackground": "#479ef5", + "brandedFocusedBorder": "#62abf5", "brandedFocusedContent": "#1b1a19", "brandedFocusedIcon": "#1b1a19", "brandedFocusedSecondaryContent": "#201f1e", - "brandedHoveredBackground": "#c7e0f4", - "brandedHoveredBorder": "#82c7ff", + "brandedHoveredBackground": "#479ef5", + "brandedHoveredBorder": "#62abf5", "brandedHoveredContent": "#1b1a19", "brandedHoveredIcon": "#1b1a19", "brandedHoveredSecondaryContent": "#201f1e", "brandedIcon": "#1b1a19", - "brandedPressedBackground": "#deecf9", - "brandedPressedBorder": "#82c7ff", + "brandedPressedBackground": "#479ef5", + "brandedPressedBorder": "#62abf5", "brandedPressedContent": "#1b1a19", "brandedPressedIcon": "#1b1a19", "brandedPressedSecondaryContent": "#201f1e", @@ -841,7 +841,7 @@ Object { "buttonTextDisabled": "#797775", "buttonTextHovered": "#f3f2f1", "buttonTextPressed": "#faf9f8", - "checkboxBackground": "#2b88d8", + "checkboxBackground": "#2886de", "checkboxBackgroundDisabled": "#252423", "checkboxBorderColor": "#979693", "checkmarkColor": "#1b1a19", @@ -920,18 +920,18 @@ Object { "ghostPressedSecondaryContent": "#a19f9d", "ghostSecondaryContent": "#a19f9d", "inputBackground": "#1b1a19", - "inputBackgroundChecked": "#2b88d8", - "inputBackgroundCheckedHovered": "#c7e0f4", + "inputBackgroundChecked": "#2886de", + "inputBackgroundCheckedHovered": "#479ef5", "inputBorder": "#797775", "inputBorderHovered": "#f3f2f1", - "inputFocusBorderAlt": "#2b88d8", + "inputFocusBorderAlt": "#2886de", "inputForegroundChecked": "#1b1a19", "inputPlaceholderText": "#a19f9d", "inputText": "#f3f2f1", "inputTextHovered": "#faf9f8", - "link": "#2b88d8", - "linkHovered": "#82c7ff", - "linkPressed": "#deecf9", + "link": "#2886de", + "linkHovered": "#62abf5", + "linkPressed": "#479ef5", "listBackground": "#1b1a19", "listHeaderBackgroundHovered": "#252423", "listHeaderBackgroundPressed": "#292827", @@ -942,7 +942,7 @@ Object { "menuBackground": "#252423", "menuDivider": "#484644", "menuHeader": "#ffffff", - "menuIcon": "#c7e0f4", + "menuIcon": "#479ef5", "menuItemBackgroundHovered": "#323130", "menuItemBackgroundPressed": "#3b3a39", "menuItemText": "#f3f2f1", @@ -1012,12 +1012,12 @@ Object { "neutralStrokeAccessiblePressed": "#b3b3b3", "neutralStrokeAccessibleSelected": "#3aa0f3", "neutralStrokeDisabled": "#424242", - "personaActivityGlow": "#2b88d8", + "personaActivityGlow": "#2886de", "personaActivityRing": "#1b1a19", - "primaryButtonBackground": "#2b88d8", + "primaryButtonBackground": "#2886de", "primaryButtonBackgroundDisabled": "#252423", - "primaryButtonBackgroundHovered": "#c7e0f4", - "primaryButtonBackgroundPressed": "#deecf9", + "primaryButtonBackgroundHovered": "#479ef5", + "primaryButtonBackgroundPressed": "#479ef5", "primaryButtonBorder": "transparent", "primaryButtonBorderFocused": "transparent", "primaryButtonText": "#1b1a19", @@ -1397,7 +1397,7 @@ Object { exports[`createDefaultTheme test themeOption - { appearance: 'dynamic', defaultAppearance: 'light' } 1`] = ` Object { "colors": Object { - "accentButtonBackground": "#0078d4", + "accentButtonBackground": "#0c3b5e", "accentButtonText": "#1b1a19", "actionLink": "#f3f2f1", "actionLinkHovered": "#faf9f8", @@ -1426,8 +1426,8 @@ Object { "brandForegroundLinkSelected": "#2899f5", "brandStroke1": "#2899f5", "brandStroke2": "#004c87", - "brandedBackground": "#2b88d8", - "brandedBorder": "#deecf9", + "brandedBackground": "#2886de", + "brandedBorder": "#479ef5", "brandedCheckedBackground": "#484644", "brandedCheckedContent": "#faf9f8", "brandedCheckedHoveredBackground": "#292827", @@ -1437,19 +1437,19 @@ Object { "brandedDisabledBorder": "#252423", "brandedDisabledContent": "#3b3a39", "brandedDisabledIcon": "#3b3a39", - "brandedFocusedBackground": "#c7e0f4", - "brandedFocusedBorder": "#82c7ff", + "brandedFocusedBackground": "#479ef5", + "brandedFocusedBorder": "#62abf5", "brandedFocusedContent": "#1b1a19", "brandedFocusedIcon": "#1b1a19", "brandedFocusedSecondaryContent": "#201f1e", - "brandedHoveredBackground": "#c7e0f4", - "brandedHoveredBorder": "#82c7ff", + "brandedHoveredBackground": "#479ef5", + "brandedHoveredBorder": "#62abf5", "brandedHoveredContent": "#1b1a19", "brandedHoveredIcon": "#1b1a19", "brandedHoveredSecondaryContent": "#201f1e", "brandedIcon": "#1b1a19", - "brandedPressedBackground": "#deecf9", - "brandedPressedBorder": "#82c7ff", + "brandedPressedBackground": "#479ef5", + "brandedPressedBorder": "#62abf5", "brandedPressedContent": "#1b1a19", "brandedPressedIcon": "#1b1a19", "brandedPressedSecondaryContent": "#201f1e", @@ -1469,7 +1469,7 @@ Object { "buttonTextDisabled": "#797775", "buttonTextHovered": "#f3f2f1", "buttonTextPressed": "#faf9f8", - "checkboxBackground": "#2b88d8", + "checkboxBackground": "#2886de", "checkboxBackgroundDisabled": "#252423", "checkboxBorderColor": "#979693", "checkmarkColor": "#1b1a19", @@ -1548,18 +1548,18 @@ Object { "ghostPressedSecondaryContent": "#a19f9d", "ghostSecondaryContent": "#a19f9d", "inputBackground": "#1b1a19", - "inputBackgroundChecked": "#2b88d8", - "inputBackgroundCheckedHovered": "#c7e0f4", + "inputBackgroundChecked": "#2886de", + "inputBackgroundCheckedHovered": "#479ef5", "inputBorder": "#797775", "inputBorderHovered": "#f3f2f1", - "inputFocusBorderAlt": "#2b88d8", + "inputFocusBorderAlt": "#2886de", "inputForegroundChecked": "#1b1a19", "inputPlaceholderText": "#a19f9d", "inputText": "#f3f2f1", "inputTextHovered": "#faf9f8", - "link": "#2b88d8", - "linkHovered": "#82c7ff", - "linkPressed": "#deecf9", + "link": "#2886de", + "linkHovered": "#62abf5", + "linkPressed": "#479ef5", "listBackground": "#1b1a19", "listHeaderBackgroundHovered": "#252423", "listHeaderBackgroundPressed": "#292827", @@ -1570,7 +1570,7 @@ Object { "menuBackground": "#252423", "menuDivider": "#484644", "menuHeader": "#ffffff", - "menuIcon": "#c7e0f4", + "menuIcon": "#479ef5", "menuItemBackgroundHovered": "#323130", "menuItemBackgroundPressed": "#3b3a39", "menuItemText": "#f3f2f1", @@ -1640,12 +1640,12 @@ Object { "neutralStrokeAccessiblePressed": "#b3b3b3", "neutralStrokeAccessibleSelected": "#3aa0f3", "neutralStrokeDisabled": "#424242", - "personaActivityGlow": "#2b88d8", + "personaActivityGlow": "#2886de", "personaActivityRing": "#1b1a19", - "primaryButtonBackground": "#2b88d8", + "primaryButtonBackground": "#2886de", "primaryButtonBackgroundDisabled": "#252423", - "primaryButtonBackgroundHovered": "#c7e0f4", - "primaryButtonBackgroundPressed": "#deecf9", + "primaryButtonBackgroundHovered": "#479ef5", + "primaryButtonBackgroundPressed": "#479ef5", "primaryButtonBorder": "transparent", "primaryButtonBorderFocused": "transparent", "primaryButtonText": "#1b1a19", @@ -3065,7 +3065,7 @@ Object { exports[`createDefaultTheme test themeOption - { appearance: 'light', defaultAppearance: 'light' } 1`] = ` Object { "colors": Object { - "accentButtonBackground": "#0078d4", + "accentButtonBackground": "#0f6cbd", "accentButtonText": "#ffffff", "actionLink": "#323130", "actionLinkHovered": "#201f1e", @@ -3094,8 +3094,8 @@ Object { "brandForegroundLinkSelected": "#106ebe", "brandStroke1": "#0078d4", "brandStroke2": "#c7e0f4", - "brandedBackground": "#0078d4", - "brandedBorder": "#005a9e", + "brandedBackground": "#0f6cbd", + "brandedBorder": "#0f548c", "brandedCheckedBackground": "#c8c6c4", "brandedCheckedContent": "#201f1e", "brandedCheckedHoveredBackground": "#edebe9", @@ -3105,19 +3105,19 @@ Object { "brandedDisabledBorder": "#f3f2f1", "brandedDisabledContent": "#d2d0ce", "brandedDisabledIcon": "#d2d0ce", - "brandedFocusedBackground": "#106ebe", - "brandedFocusedBorder": undefined, + "brandedFocusedBackground": "#115ea3", + "brandedFocusedBorder": "#0c3b5e", "brandedFocusedContent": "#ffffff", "brandedFocusedIcon": "#ffffff", "brandedFocusedSecondaryContent": "#faf9f8", - "brandedHoveredBackground": "#106ebe", - "brandedHoveredBorder": undefined, + "brandedHoveredBackground": "#115ea3", + "brandedHoveredBorder": "#0c3b5e", "brandedHoveredContent": "#ffffff", "brandedHoveredIcon": "#ffffff", "brandedHoveredSecondaryContent": "#faf9f8", "brandedIcon": "#ffffff", - "brandedPressedBackground": "#005a9e", - "brandedPressedBorder": undefined, + "brandedPressedBackground": "#0f548c", + "brandedPressedBorder": "#0c3b5e", "brandedPressedContent": "#ffffff", "brandedPressedIcon": "#ffffff", "brandedPressedSecondaryContent": "#faf9f8", @@ -3137,7 +3137,7 @@ Object { "buttonTextDisabled": "#a19f9d", "buttonTextHovered": "#201f1e", "buttonTextPressed": "#201f1e", - "checkboxBackground": "#0078d4", + "checkboxBackground": "#0f6cbd", "checkboxBackgroundDisabled": "#f3f2f1", "checkboxBorderColor": "#8a8886", "checkmarkColor": "#ffffff", @@ -3216,18 +3216,18 @@ Object { "ghostPressedSecondaryContent": "#605e5c", "ghostSecondaryContent": "#605e5c", "inputBackground": "#ffffff", - "inputBackgroundChecked": "#0078d4", - "inputBackgroundCheckedHovered": "#106ebe", + "inputBackgroundChecked": "#0f6cbd", + "inputBackgroundCheckedHovered": "#115ea3", "inputBorder": "#a19f9d", "inputBorderHovered": "#323130", - "inputFocusBorderAlt": "#0078d4", + "inputFocusBorderAlt": "#0f6cbd", "inputForegroundChecked": "#ffffff", "inputPlaceholderText": "#605e5c", "inputText": "#323130", "inputTextHovered": "#201f1e", - "link": "#0078d4", - "linkHovered": undefined, - "linkPressed": "#005a9e", + "link": "#0f6cbd", + "linkHovered": "#0c3b5e", + "linkPressed": "#0f548c", "listBackground": "#ffffff", "listHeaderBackgroundHovered": "#f3f2f1", "listHeaderBackgroundPressed": "#edebe9", @@ -3237,8 +3237,8 @@ Object { "listText": "#323130", "menuBackground": "#ffffff", "menuDivider": "#c8c6c4", - "menuHeader": "#0078d4", - "menuIcon": "#0078d4", + "menuHeader": "#0f6cbd", + "menuIcon": "#0f6cbd", "menuItemBackgroundHovered": "#f3f2f1", "menuItemBackgroundPressed": "#edebe9", "menuItemText": "#323130", @@ -3308,12 +3308,12 @@ Object { "neutralStrokeAccessiblePressed": "#4d4d4d", "neutralStrokeAccessibleSelected": "#0078d4", "neutralStrokeDisabled": "#e0e0e0", - "personaActivityGlow": "#0078d4", + "personaActivityGlow": "#0f6cbd", "personaActivityRing": "#ffffff", - "primaryButtonBackground": "#0078d4", + "primaryButtonBackground": "#0f6cbd", "primaryButtonBackgroundDisabled": "#f3f2f1", - "primaryButtonBackgroundHovered": "#106ebe", - "primaryButtonBackgroundPressed": "#005a9e", + "primaryButtonBackgroundHovered": "#115ea3", + "primaryButtonBackgroundPressed": "#0f548c", "primaryButtonBorder": "transparent", "primaryButtonBorderFocused": "transparent", "primaryButtonText": "#ffffff", @@ -3693,7 +3693,7 @@ Object { exports[`createDefaultTheme test themeOption - { appearance: undefined, defaultAppearance: 'light' } 1`] = ` Object { "colors": Object { - "accentButtonBackground": "#0078d4", + "accentButtonBackground": "#0f6cbd", "accentButtonText": "#ffffff", "actionLink": "#323130", "actionLinkHovered": "#201f1e", @@ -3722,8 +3722,8 @@ Object { "brandForegroundLinkSelected": "#106ebe", "brandStroke1": "#0078d4", "brandStroke2": "#c7e0f4", - "brandedBackground": "#0078d4", - "brandedBorder": "#005a9e", + "brandedBackground": "#0f6cbd", + "brandedBorder": "#0f548c", "brandedCheckedBackground": "#c8c6c4", "brandedCheckedContent": "#201f1e", "brandedCheckedHoveredBackground": "#edebe9", @@ -3733,19 +3733,19 @@ Object { "brandedDisabledBorder": "#f3f2f1", "brandedDisabledContent": "#d2d0ce", "brandedDisabledIcon": "#d2d0ce", - "brandedFocusedBackground": "#106ebe", - "brandedFocusedBorder": undefined, + "brandedFocusedBackground": "#115ea3", + "brandedFocusedBorder": "#0c3b5e", "brandedFocusedContent": "#ffffff", "brandedFocusedIcon": "#ffffff", "brandedFocusedSecondaryContent": "#faf9f8", - "brandedHoveredBackground": "#106ebe", - "brandedHoveredBorder": undefined, + "brandedHoveredBackground": "#115ea3", + "brandedHoveredBorder": "#0c3b5e", "brandedHoveredContent": "#ffffff", "brandedHoveredIcon": "#ffffff", "brandedHoveredSecondaryContent": "#faf9f8", "brandedIcon": "#ffffff", - "brandedPressedBackground": "#005a9e", - "brandedPressedBorder": undefined, + "brandedPressedBackground": "#0f548c", + "brandedPressedBorder": "#0c3b5e", "brandedPressedContent": "#ffffff", "brandedPressedIcon": "#ffffff", "brandedPressedSecondaryContent": "#faf9f8", @@ -3765,7 +3765,7 @@ Object { "buttonTextDisabled": "#a19f9d", "buttonTextHovered": "#201f1e", "buttonTextPressed": "#201f1e", - "checkboxBackground": "#0078d4", + "checkboxBackground": "#0f6cbd", "checkboxBackgroundDisabled": "#f3f2f1", "checkboxBorderColor": "#8a8886", "checkmarkColor": "#ffffff", @@ -3844,18 +3844,18 @@ Object { "ghostPressedSecondaryContent": "#605e5c", "ghostSecondaryContent": "#605e5c", "inputBackground": "#ffffff", - "inputBackgroundChecked": "#0078d4", - "inputBackgroundCheckedHovered": "#106ebe", + "inputBackgroundChecked": "#0f6cbd", + "inputBackgroundCheckedHovered": "#115ea3", "inputBorder": "#a19f9d", "inputBorderHovered": "#323130", - "inputFocusBorderAlt": "#0078d4", + "inputFocusBorderAlt": "#0f6cbd", "inputForegroundChecked": "#ffffff", "inputPlaceholderText": "#605e5c", "inputText": "#323130", "inputTextHovered": "#201f1e", - "link": "#0078d4", - "linkHovered": undefined, - "linkPressed": "#005a9e", + "link": "#0f6cbd", + "linkHovered": "#0c3b5e", + "linkPressed": "#0f548c", "listBackground": "#ffffff", "listHeaderBackgroundHovered": "#f3f2f1", "listHeaderBackgroundPressed": "#edebe9", @@ -3865,8 +3865,8 @@ Object { "listText": "#323130", "menuBackground": "#ffffff", "menuDivider": "#c8c6c4", - "menuHeader": "#0078d4", - "menuIcon": "#0078d4", + "menuHeader": "#0f6cbd", + "menuIcon": "#0f6cbd", "menuItemBackgroundHovered": "#f3f2f1", "menuItemBackgroundPressed": "#edebe9", "menuItemText": "#323130", @@ -3936,12 +3936,12 @@ Object { "neutralStrokeAccessiblePressed": "#4d4d4d", "neutralStrokeAccessibleSelected": "#0078d4", "neutralStrokeDisabled": "#e0e0e0", - "personaActivityGlow": "#0078d4", + "personaActivityGlow": "#0f6cbd", "personaActivityRing": "#ffffff", - "primaryButtonBackground": "#0078d4", + "primaryButtonBackground": "#0f6cbd", "primaryButtonBackgroundDisabled": "#f3f2f1", - "primaryButtonBackgroundHovered": "#106ebe", - "primaryButtonBackgroundPressed": "#005a9e", + "primaryButtonBackgroundHovered": "#115ea3", + "primaryButtonBackgroundPressed": "#0f548c", "primaryButtonBorder": "transparent", "primaryButtonBorderFocused": "transparent", "primaryButtonText": "#ffffff", @@ -4840,7 +4840,7 @@ Object { exports[`defaultFluentDarkTheme test 1`] = ` Object { "colors": Object { - "accentButtonBackground": "#0078d4", + "accentButtonBackground": "#0c3b5e", "accentButtonText": "#1b1a19", "actionLink": "#f3f2f1", "actionLinkHovered": "#faf9f8", @@ -4869,8 +4869,8 @@ Object { "brandForegroundLinkSelected": "#2899f5", "brandStroke1": "#2899f5", "brandStroke2": "#004c87", - "brandedBackground": "#2b88d8", - "brandedBorder": "#deecf9", + "brandedBackground": "#2886de", + "brandedBorder": "#479ef5", "brandedCheckedBackground": "#484644", "brandedCheckedContent": "#faf9f8", "brandedCheckedHoveredBackground": "#292827", @@ -4880,19 +4880,19 @@ Object { "brandedDisabledBorder": "#252423", "brandedDisabledContent": "#3b3a39", "brandedDisabledIcon": "#3b3a39", - "brandedFocusedBackground": "#c7e0f4", - "brandedFocusedBorder": "#82c7ff", + "brandedFocusedBackground": "#479ef5", + "brandedFocusedBorder": "#62abf5", "brandedFocusedContent": "#1b1a19", "brandedFocusedIcon": "#1b1a19", "brandedFocusedSecondaryContent": "#201f1e", - "brandedHoveredBackground": "#c7e0f4", - "brandedHoveredBorder": "#82c7ff", + "brandedHoveredBackground": "#479ef5", + "brandedHoveredBorder": "#62abf5", "brandedHoveredContent": "#1b1a19", "brandedHoveredIcon": "#1b1a19", "brandedHoveredSecondaryContent": "#201f1e", "brandedIcon": "#1b1a19", - "brandedPressedBackground": "#deecf9", - "brandedPressedBorder": "#82c7ff", + "brandedPressedBackground": "#479ef5", + "brandedPressedBorder": "#62abf5", "brandedPressedContent": "#1b1a19", "brandedPressedIcon": "#1b1a19", "brandedPressedSecondaryContent": "#201f1e", @@ -4912,7 +4912,7 @@ Object { "buttonTextDisabled": "#797775", "buttonTextHovered": "#f3f2f1", "buttonTextPressed": "#faf9f8", - "checkboxBackground": "#2b88d8", + "checkboxBackground": "#2886de", "checkboxBackgroundDisabled": "#252423", "checkboxBorderColor": "#979693", "checkmarkColor": "#1b1a19", @@ -4991,18 +4991,18 @@ Object { "ghostPressedSecondaryContent": "#a19f9d", "ghostSecondaryContent": "#a19f9d", "inputBackground": "#1b1a19", - "inputBackgroundChecked": "#2b88d8", - "inputBackgroundCheckedHovered": "#c7e0f4", + "inputBackgroundChecked": "#2886de", + "inputBackgroundCheckedHovered": "#479ef5", "inputBorder": "#797775", "inputBorderHovered": "#f3f2f1", - "inputFocusBorderAlt": "#2b88d8", + "inputFocusBorderAlt": "#2886de", "inputForegroundChecked": "#1b1a19", "inputPlaceholderText": "#a19f9d", "inputText": "#f3f2f1", "inputTextHovered": "#faf9f8", - "link": "#2b88d8", - "linkHovered": "#82c7ff", - "linkPressed": "#deecf9", + "link": "#2886de", + "linkHovered": "#62abf5", + "linkPressed": "#479ef5", "listBackground": "#1b1a19", "listHeaderBackgroundHovered": "#252423", "listHeaderBackgroundPressed": "#292827", @@ -5013,7 +5013,7 @@ Object { "menuBackground": "#252423", "menuDivider": "#484644", "menuHeader": "#ffffff", - "menuIcon": "#c7e0f4", + "menuIcon": "#479ef5", "menuItemBackgroundHovered": "#323130", "menuItemBackgroundPressed": "#3b3a39", "menuItemText": "#f3f2f1", @@ -5083,12 +5083,12 @@ Object { "neutralStrokeAccessiblePressed": "#b3b3b3", "neutralStrokeAccessibleSelected": "#3aa0f3", "neutralStrokeDisabled": "#424242", - "personaActivityGlow": "#2b88d8", + "personaActivityGlow": "#2886de", "personaActivityRing": "#1b1a19", - "primaryButtonBackground": "#2b88d8", + "primaryButtonBackground": "#2886de", "primaryButtonBackgroundDisabled": "#252423", - "primaryButtonBackgroundHovered": "#c7e0f4", - "primaryButtonBackgroundPressed": "#deecf9", + "primaryButtonBackgroundHovered": "#479ef5", + "primaryButtonBackgroundPressed": "#479ef5", "primaryButtonBorder": "transparent", "primaryButtonBorderFocused": "transparent", "primaryButtonText": "#1b1a19", @@ -5468,7 +5468,7 @@ Object { exports[`defaultFluentTheme test 1`] = ` Object { "colors": Object { - "accentButtonBackground": "#0078d4", + "accentButtonBackground": "#0f6cbd", "accentButtonText": "#ffffff", "actionLink": "#323130", "actionLinkHovered": "#201f1e", @@ -5497,8 +5497,8 @@ Object { "brandForegroundLinkSelected": "#106ebe", "brandStroke1": "#0078d4", "brandStroke2": "#c7e0f4", - "brandedBackground": "#0078d4", - "brandedBorder": "#005a9e", + "brandedBackground": "#0f6cbd", + "brandedBorder": "#0f548c", "brandedCheckedBackground": "#c8c6c4", "brandedCheckedContent": "#201f1e", "brandedCheckedHoveredBackground": "#edebe9", @@ -5508,19 +5508,19 @@ Object { "brandedDisabledBorder": "#f3f2f1", "brandedDisabledContent": "#d2d0ce", "brandedDisabledIcon": "#d2d0ce", - "brandedFocusedBackground": "#106ebe", - "brandedFocusedBorder": undefined, + "brandedFocusedBackground": "#115ea3", + "brandedFocusedBorder": "#0c3b5e", "brandedFocusedContent": "#ffffff", "brandedFocusedIcon": "#ffffff", "brandedFocusedSecondaryContent": "#faf9f8", - "brandedHoveredBackground": "#106ebe", - "brandedHoveredBorder": undefined, + "brandedHoveredBackground": "#115ea3", + "brandedHoveredBorder": "#0c3b5e", "brandedHoveredContent": "#ffffff", "brandedHoveredIcon": "#ffffff", "brandedHoveredSecondaryContent": "#faf9f8", "brandedIcon": "#ffffff", - "brandedPressedBackground": "#005a9e", - "brandedPressedBorder": undefined, + "brandedPressedBackground": "#0f548c", + "brandedPressedBorder": "#0c3b5e", "brandedPressedContent": "#ffffff", "brandedPressedIcon": "#ffffff", "brandedPressedSecondaryContent": "#faf9f8", @@ -5540,7 +5540,7 @@ Object { "buttonTextDisabled": "#a19f9d", "buttonTextHovered": "#201f1e", "buttonTextPressed": "#201f1e", - "checkboxBackground": "#0078d4", + "checkboxBackground": "#0f6cbd", "checkboxBackgroundDisabled": "#f3f2f1", "checkboxBorderColor": "#8a8886", "checkmarkColor": "#ffffff", @@ -5619,18 +5619,18 @@ Object { "ghostPressedSecondaryContent": "#605e5c", "ghostSecondaryContent": "#605e5c", "inputBackground": "#ffffff", - "inputBackgroundChecked": "#0078d4", - "inputBackgroundCheckedHovered": "#106ebe", + "inputBackgroundChecked": "#0f6cbd", + "inputBackgroundCheckedHovered": "#115ea3", "inputBorder": "#a19f9d", "inputBorderHovered": "#323130", - "inputFocusBorderAlt": "#0078d4", + "inputFocusBorderAlt": "#0f6cbd", "inputForegroundChecked": "#ffffff", "inputPlaceholderText": "#605e5c", "inputText": "#323130", "inputTextHovered": "#201f1e", - "link": "#0078d4", - "linkHovered": undefined, - "linkPressed": "#005a9e", + "link": "#0f6cbd", + "linkHovered": "#0c3b5e", + "linkPressed": "#0f548c", "listBackground": "#ffffff", "listHeaderBackgroundHovered": "#f3f2f1", "listHeaderBackgroundPressed": "#edebe9", @@ -5640,8 +5640,8 @@ Object { "listText": "#323130", "menuBackground": "#ffffff", "menuDivider": "#c8c6c4", - "menuHeader": "#0078d4", - "menuIcon": "#0078d4", + "menuHeader": "#0f6cbd", + "menuIcon": "#0f6cbd", "menuItemBackgroundHovered": "#f3f2f1", "menuItemBackgroundPressed": "#edebe9", "menuItemText": "#323130", @@ -5711,12 +5711,12 @@ Object { "neutralStrokeAccessiblePressed": "#4d4d4d", "neutralStrokeAccessibleSelected": "#0078d4", "neutralStrokeDisabled": "#e0e0e0", - "personaActivityGlow": "#0078d4", + "personaActivityGlow": "#0f6cbd", "personaActivityRing": "#ffffff", - "primaryButtonBackground": "#0078d4", + "primaryButtonBackground": "#0f6cbd", "primaryButtonBackgroundDisabled": "#f3f2f1", - "primaryButtonBackgroundHovered": "#106ebe", - "primaryButtonBackgroundPressed": "#005a9e", + "primaryButtonBackgroundHovered": "#115ea3", + "primaryButtonBackgroundPressed": "#0f548c", "primaryButtonBorder": "transparent", "primaryButtonBorderFocused": "transparent", "primaryButtonText": "#ffffff", diff --git a/packages/theming/default-theme/src/defaultColors.macos.ts b/packages/theming/default-theme/src/defaultColors.macos.ts new file mode 100644 index 0000000000..f31da718a6 --- /dev/null +++ b/packages/theming/default-theme/src/defaultColors.macos.ts @@ -0,0 +1,510 @@ +import { Palette, FabricWebPalette, ThemeColorDefinition } from '@fluentui-react-native/theme-types'; +import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import { createColorAliasTokens } from './createAliasTokens'; + +/** + * Generate a palette from a set of fabric web colors, like those output from the theme designer. + * + * @param palette - fabric web palette definition. This allows initializing our color values in the same + * manner the fabric web does it + */ +export function paletteFromFabricColors(p: FabricWebPalette, isInverted?: boolean): Palette { + return { + background: p.white, + bodyStandoutBackground: p.neutralLighterAlt, + bodyFrameBackground: p.white, + bodyFrameDivider: p.neutralLight, + bodyText: p.neutralPrimary, + bodyTextChecked: p.black, + subText: p.neutralSecondary, + bodyDivider: p.neutralLight, + + disabledBackground: isInverted ? p.neutralQuaternaryAlt : p.neutralLighter, + disabledText: p.neutralTertiary, + disabledBodyText: p.neutralTertiary, + disabledSubtext: p.neutralQuaternary, + disabledBodySubtext: p.neutralTertiaryAlt, + + focusBorder: p.neutralSecondary, + variantBorder: p.neutralLight, + variantBorderHovered: p.neutralTertiary, + defaultStateBackground: p.neutralLighterAlt, + + errorText: !isInverted ? p.redDark : '#ff5f5f', + warningText: !isInverted ? globalTokens.color.grey20 : globalTokens.color.white, + errorBackground: !isInverted ? 'rgba(245, 135, 145, .2)' : 'rgba(232, 17, 35, .5)', + blockingBackground: !isInverted ? 'rgba(250, 65, 0, .2)' : 'rgba(234, 67, 0, .5)', + warningBackground: !isInverted ? 'rgba(255, 200, 10, .2)' : 'rgba(255, 251, 0, .6)', + warningHighlight: !isInverted ? '#ffb900' : '#fff100', + successBackground: !isInverted ? 'rgba(95, 210, 85, .2)' : 'rgba(186, 216, 10, .4)', + + inputBorder: p.neutralTertiary, + inputBorderHovered: p.neutralPrimary, + inputBackground: p.white, + inputBackgroundChecked: p.themePrimary, + inputBackgroundCheckedHovered: p.themeDarkAlt, + inputForegroundChecked: p.white, + inputFocusBorderAlt: p.themePrimary, + smallInputBorder: p.neutralSecondary, + inputText: p.neutralPrimary, + inputTextHovered: p.neutralDark, + inputPlaceholderText: p.neutralSecondary, + + buttonBackground: p.neutralLighter, + buttonBackgroundChecked: p.neutralTertiaryAlt, + buttonBackgroundHovered: p.neutralLight, + buttonBackgroundCheckedHovered: p.neutralLight, + buttonBackgroundPressed: p.neutralLight, + buttonBackgroundDisabled: p.neutralLighter, + buttonBorder: p.neutralSecondaryAlt, + buttonText: isInverted ? p.black : p.neutralPrimary, + buttonTextHovered: isInverted ? p.neutralPrimary : p.neutralDark, + buttonTextChecked: p.neutralDark, + buttonTextCheckedHovered: p.black, + buttonTextPressed: p.neutralDark, + buttonTextDisabled: p.neutralTertiary, + buttonBorderDisabled: p.neutralLighter, + buttonBorderFocused: p.neutralSecondaryAlt, + + primaryButtonBackground: p.themePrimary, + primaryButtonBackgroundHovered: p.themeDarkAlt, + primaryButtonBackgroundPressed: p.themeDark, + primaryButtonBackgroundDisabled: p.neutralLighter, + primaryButtonBorder: 'transparent', + primaryButtonBorderFocused: 'transparent', + primaryButtonText: p.white, + primaryButtonTextHovered: p.white, + primaryButtonTextPressed: p.white, + primaryButtonTextDisabled: p.neutralQuaternary, + + accentButtonBackground: p.accent, + accentButtonText: p.white, + + menuBackground: isInverted ? p.neutralLighter : p.white, + menuDivider: isInverted ? p.neutralTertiaryAlt : p.neutralTertiaryAlt, + menuIcon: isInverted ? p.themeDarkAlt : p.themePrimary, + menuHeader: isInverted ? p.black : p.themePrimary, + menuItemBackgroundHovered: isInverted ? p.neutralQuaternaryAlt : p.neutralLighter, + menuItemBackgroundPressed: isInverted ? p.neutralQuaternary : p.neutralLight, + menuItemText: p.neutralPrimary, + menuItemTextHovered: p.neutralDark, + + listBackground: p.white, + listText: p.neutralPrimary, + listItemBackgroundHovered: p.neutralLighter, + listItemBackgroundChecked: p.neutralLight, + listItemBackgroundCheckedHovered: p.neutralQuaternaryAlt, + + listHeaderBackgroundHovered: p.neutralLighter, + listHeaderBackgroundPressed: p.neutralLight, + + actionLink: p.neutralPrimary, + actionLinkHovered: p.neutralDark, + link: p.themePrimary, + linkHovered: p.themeDarker, + linkPressed: p.themeDark, + + // Control Color Tokens + defaultBackground: p.neutralLighter, + defaultBorder: p.neutralSecondaryAlt, + defaultContent: isInverted ? p.black : p.neutralPrimary, + defaultIcon: isInverted ? p.black : p.neutralPrimary, + + defaultHoveredBackground: p.neutralLight, + defaultHoveredBorder: p.neutralSecondaryAlt, + defaultHoveredContent: isInverted ? p.neutralPrimary : p.neutralDark, + defaultHoveredIcon: isInverted ? p.neutralPrimary : p.neutralDark, + + defaultFocusedBackground: p.neutralLight, + defaultFocusedBorder: p.neutralSecondaryAlt, + defaultFocusedContent: isInverted ? p.neutralPrimary : p.neutralDark, + defaultFocusedIcon: isInverted ? p.neutralPrimary : p.neutralDark, + + defaultPressedBackground: p.neutralLight, + defaultPressedBorder: p.neutralSecondaryAlt, + defaultPressedContent: p.neutralDark, + defaultPressedIcon: p.neutralDark, + + defaultDisabledBackground: p.neutralLighter, + defaultDisabledBorder: p.neutralLighter, + defaultDisabledContent: p.neutralTertiary, + defaultDisabledIcon: p.neutralTertiary, + + ghostBackground: p.white, + ghostBorder: p.white, + ghostContent: p.neutralPrimary, + ghostIcon: p.neutralPrimary, + + ghostHoveredBackground: p.neutralLighter, + ghostHoveredBorder: p.neutralLighter, + ghostHoveredContent: p.neutralDark, + ghostHoveredIcon: p.neutralDark, + + ghostFocusedBackground: p.neutralLighter, + ghostFocusedBorder: p.neutralSecondaryAlt, + ghostFocusedContent: p.neutralDark, + ghostFocusedIcon: p.neutralDark, + + ghostPressedBackground: p.neutralLight, + ghostPressedBorder: p.neutralLight, + ghostPressedContent: p.neutralDark, + ghostPressedIcon: p.neutralDark, + + ghostDisabledBackground: p.white, + ghostDisabledBorder: p.white, + ghostDisabledContent: p.neutralTertiary, + ghostDisabledIcon: p.neutralTertiary, + + brandedBackground: p.themePrimary, + brandedBorder: p.themeDark, + brandedContent: p.white, + brandedIcon: p.white, + + brandedHoveredBackground: p.themeDarkAlt, + brandedHoveredBorder: p.themeDarker, + brandedHoveredContent: p.white, + brandedHoveredIcon: p.white, + + brandedFocusedBackground: p.themeDarkAlt, + brandedFocusedBorder: p.themeDarker, + brandedFocusedContent: p.white, + brandedFocusedIcon: p.white, + + brandedPressedBackground: p.themeDark, + brandedPressedBorder: p.themeDarker, + brandedPressedContent: p.white, + brandedPressedIcon: p.white, + + brandedDisabledBackground: p.neutralLighter, + brandedDisabledBorder: p.neutralLighter, + brandedDisabledContent: p.neutralQuaternary, + brandedDisabledIcon: p.neutralQuaternary, + + defaultCheckedBackground: p.neutralTertiaryAlt, + defaultCheckedContent: p.neutralDark, + defaultCheckedHoveredBackground: p.neutralLight, + defaultCheckedHoveredContent: isInverted ? p.neutralPrimary : p.neutralDark, + + brandedCheckedBackground: p.neutralTertiaryAlt, + brandedCheckedContent: p.neutralDark, + brandedCheckedHoveredBackground: p.neutralLight, + brandedCheckedHoveredContent: isInverted ? p.neutralPrimary : p.neutralDark, + + ghostCheckedBackground: p.neutralLight, + ghostCheckedContent: p.black, + ghostCheckedHoveredBackground: p.neutralLighter, + ghostCheckedHoveredContent: p.neutralDark, + ghostCheckedHoveredBorder: p.neutralDark, + + ghostSecondaryContent: p.neutralSecondary, + ghostFocusedSecondaryContent: p.neutralSecondary, + ghostHoveredSecondaryContent: p.neutralSecondary, + ghostPressedSecondaryContent: p.neutralSecondary, + + brandedSecondaryContent: p.neutralLighterAlt, + brandedFocusedSecondaryContent: p.neutralLighterAlt, + brandedHoveredSecondaryContent: p.neutralLighterAlt, + brandedPressedSecondaryContent: p.neutralLighterAlt, + + defaultDisabledSecondaryContent: p.neutralTertiary, + defaultHoveredSecondaryContent: p.neutralTertiary, + defaultPressedSecondaryContent: p.neutralTertiary, + + checkmarkColor: p.white, + checkboxBackground: p.themePrimary, + checkboxBackgroundDisabled: p.neutralLighter, + checkboxBorderColor: p.neutralSecondaryAlt, + + personaActivityRing: p.white, + personaActivityGlow: p.themePrimary, + }; +} + +export function getStockWebPalette(): ThemeColorDefinition { + return { + ...paletteFromFabricColors({ + black: globalTokens.color.black, + neutralDark: '#201f1e', + neutralPrimary: '#323130', + neutralPrimaryAlt: '#3b3a39', + neutralSecondary: '#605e5c', + neutralSecondaryAlt: '#8a8886', + neutralTertiary: '#a19f9d', + neutralTertiaryAlt: '#c8c6c4', + neutralQuaternary: '#d2d0ce', + neutralQuaternaryAlt: '#e1dfdd', + neutralLight: '#edebe9', + neutralLighter: '#f3f2f1', + neutralLighterAlt: '#faf9f8', + white: globalTokens.color.white, + // Shared Colors + red: globalTokens.color.red.primary, + redDark: globalTokens.color.burgundy.primary, + + themeDarker: globalTokens.color.brand.shade40, + themeDark: globalTokens.color.brand.shade20, + themeDarkAlt: globalTokens.color.brand.shade10, + themePrimary: globalTokens.color.brand.primary, + themeSecondary: '#2b88d8', + themeTertiary: '#71afe5', + themeLight: globalTokens.color.brand.tint40, + themeLighter: globalTokens.color.brand.tint50, + themeLighterAlt: globalTokens.color.brand.tint60, + accent: globalTokens.color.brand.primary, + blackTranslucent40: 'rgba(0,0,0,.4)', + }), + ...createColorAliasTokens('light'), + }; +} + +export function getStockWebDarkPalette(): ThemeColorDefinition { + return { + ...paletteFromFabricColors( + { + // colors taken from fluentui DarkCustomizations.ts + themeDarker: '#82c7ff', + themeDark: globalTokens.color.brand.tint30, + themeDarkAlt: globalTokens.color.brand.tint20, + themePrimary: globalTokens.color.brand.tint10, + themeSecondary: globalTokens.color.brand.primary, + themeTertiary: '#235a85', + themeLight: globalTokens.color.brand.shade30, + themeLighter: globalTokens.color.brand.shade50, + themeLighterAlt: globalTokens.color.brand.shade60, + black: globalTokens.color.white, + neutralDark: '#faf9f8', + neutralPrimary: '#f3f2f1', + neutralPrimaryAlt: '#c8c6c4', + neutralSecondary: '#a19f9d', + neutralSecondaryAlt: '#979693', + neutralTertiary: '#797775', + neutralTertiaryAlt: '#484644', + neutralQuaternary: '#3b3a39', + neutralQuaternaryAlt: '#323130', + neutralLight: '#292827', + neutralLighter: '#252423', + neutralLighterAlt: '#201f1e', + white: '#1b1a19', + red: globalTokens.color.red.primary, + accent: globalTokens.color.brand.primary, + redDark: '#f1707b', + blackTranslucent40: 'rgba(0,0,0,.4)', + }, + true, + ), + ...createColorAliasTokens('dark'), + }; +} + +export function getStockWebHCPalette(): ThemeColorDefinition { + return { + background: '#000000', + bodyStandoutBackground: '#000000', + bodyFrameBackground: '#000000', + bodyFrameDivider: '#000000', + bodyText: '#ffffff', + bodyTextChecked: '#000000', + subText: '#ffffff', + bodyDivider: '#ffffff', + + disabledBackground: '#000000', + disabledText: '#3ff23f', + disabledBodyText: '#3ff23f', + disabledSubtext: '#3ff23f', + disabledBodySubtext: '#3ff23f', + + focusBorder: '#ffffff', + variantBorder: '#ffffff', + variantBorderHovered: '#ffffff', + defaultStateBackground: '#000000', + + errorText: '#ffffff', + warningText: '#ffffff', + errorBackground: '#000000', + blockingBackground: '#000000', + warningBackground: '#000000', + warningHighlight: '#ffffff', + successBackground: '#000000', + + inputBorder: '#ffffff', + inputBorderHovered: '#1aebff', + inputBackground: '#000000', + inputBackgroundChecked: '#1aebff', + inputBackgroundCheckedHovered: '#1aebff', + inputForegroundChecked: '#000000', + inputFocusBorderAlt: '#ffffff', + smallInputBorder: '#ffffff', + inputText: '#ffffff', + inputTextHovered: '#000000', + inputPlaceholderText: '#ffffff', + + buttonBackground: '#000000', + buttonBackgroundChecked: '#1aebff', + buttonBackgroundHovered: '#1aebff', + buttonBackgroundCheckedHovered: '#1aebff', + buttonBackgroundPressed: '#1aebff', + buttonBackgroundDisabled: '#000000', + buttonBorder: '#ffffff', + buttonText: '#ffffff', + buttonTextHovered: '#000000', + buttonTextChecked: '#000000', + buttonTextCheckedHovered: '#000000', + buttonTextPressed: '#000000', + buttonTextDisabled: '#3ff23f', + buttonBorderDisabled: '#3ff23f', + buttonBorderFocused: '#ffffff', + + primaryButtonBackground: '#000000', + primaryButtonBackgroundHovered: '#1aebff', + primaryButtonBackgroundPressed: '#1aebff', + primaryButtonBackgroundDisabled: '#000000', + primaryButtonBorder: '#ffffff', + primaryButtonBorderFocused: '#ffffff', + primaryButtonText: '#ffffff', + primaryButtonTextHovered: '#000000', + primaryButtonTextPressed: '#000000', + primaryButtonTextDisabled: '#3ff23f', + + accentButtonBackground: '#000000', + accentButtonText: '#ffffff', + + menuBackground: '#000000', + menuDivider: '#ffffff', + menuIcon: '#ffffff', + menuHeader: '#ffffff', + menuItemBackgroundHovered: '#1aebff', + menuItemBackgroundPressed: '#1aebff', + menuItemText: '#ffffff', + menuItemTextHovered: '#000000', + + listBackground: '#000000', + listText: '#ffffff', + listItemBackgroundHovered: '#1aebff', + listItemBackgroundChecked: '#1aebff', + listItemBackgroundCheckedHovered: '#1aebff', + + listHeaderBackgroundHovered: '#1aebff', + listHeaderBackgroundPressed: '#1aebff', + + actionLink: '#ffff00', + actionLinkHovered: '#ffffff', + link: '#ffff00', + linkHovered: '#ffffff', + linkPressed: '#ffffff', + + // Control Color Tokens + defaultBackground: '#000000', + defaultBorder: '#ffffff', + defaultContent: '#ffffff', + defaultIcon: '#ffffff', + + defaultHoveredBackground: '#1aebff', + defaultHoveredBorder: '#1aebff', + defaultHoveredContent: '#000000', + defaultHoveredIcon: '#000000', + + defaultFocusedBackground: '#000000', + defaultFocusedBorder: '#ffffff', + defaultFocusedContent: '#ffffff', + defaultFocusedIcon: '#ffffff', + + defaultPressedBackground: '#1aebff', + defaultPressedBorder: '#1aebff', + defaultPressedContent: '#000000', + defaultPressedIcon: '#000000', + + defaultDisabledBackground: '#000000', + defaultDisabledBorder: '#3ff23f', + defaultDisabledContent: '#3ff23f', + defaultDisabledIcon: '#3ff23f', + + ghostBackground: '#000000', + ghostBorder: '#000000', + ghostContent: '#ffffff', + ghostIcon: '#ffffff', + + ghostHoveredBackground: '#1aebff', + ghostHoveredBorder: '#1aebff', + ghostHoveredContent: '#000000', + ghostHoveredIcon: '#000000', + + ghostFocusedBackground: '#000000', + ghostFocusedBorder: '#ffffff', + ghostFocusedContent: '#ffffff', + ghostFocusedIcon: '#ffffff', + + ghostPressedBackground: '#1aebff', + ghostPressedBorder: '#1aebff', + ghostPressedContent: '#000000', + ghostPressedIcon: '#000000', + + ghostDisabledBackground: '#000000', + ghostDisabledBorder: '#000000', + ghostDisabledContent: '#3ff23f', + ghostDisabledIcon: '#3ff23f', + + brandedBackground: '#000000', + brandedBorder: '#ffffff', + brandedContent: '#ffffff', + brandedIcon: '#ffffff', + + brandedHoveredBackground: '#1aebff', + brandedHoveredBorder: '#1aebff', + brandedHoveredContent: '#000000', + brandedHoveredIcon: '#000000', + + brandedFocusedBackground: '#000000', + brandedFocusedBorder: '#ffffff', + brandedFocusedContent: '#ffffff', + brandedFocusedIcon: '#ffffff', + + brandedPressedBackground: '#1aebff', + brandedPressedBorder: '#1aebff', + brandedPressedContent: '#000000', + brandedPressedIcon: '#000000', + + brandedDisabledBackground: '#000000', + brandedDisabledBorder: '#3ff23f', + brandedDisabledContent: '#3ff23f', + brandedDisabledIcon: '#3ff23f', + + defaultCheckedBackground: '#1aebff', + defaultCheckedContent: '#000000', + defaultCheckedHoveredBackground: '#1aebff', + defaultCheckedHoveredContent: '#000000', + + brandedCheckedBackground: '#1aebff', + brandedCheckedContent: '#000000', + brandedCheckedHoveredBackground: '#1aebff', + brandedCheckedHoveredContent: '#000000', + + ghostCheckedBackground: '#1aebff', + ghostCheckedContent: '#000000', + ghostCheckedHoveredBackground: '#1aebff', + ghostCheckedHoveredContent: '#000000', + ghostCheckedHoveredBorder: '#000000', + + ghostSecondaryContent: '#ffffff', + ghostFocusedSecondaryContent: '#ffffff', + ghostHoveredSecondaryContent: '#000000', + ghostPressedSecondaryContent: '#000000', + + brandedSecondaryContent: '#ffffff', + brandedFocusedSecondaryContent: '#ffffff', + brandedHoveredSecondaryContent: '#000000', + brandedPressedSecondaryContent: '#000000', + + defaultDisabledSecondaryContent: '#ffffff', + defaultHoveredSecondaryContent: '#000000', + defaultPressedSecondaryContent: '#000000', + + checkmarkColor: '#ffffff', + checkboxBackground: '#000000', + checkboxBackgroundDisabled: '#000000', + checkboxBorderColor: '#ffffff', + + personaActivityRing: '#ffffff', + personaActivityGlow: 'transparent', // glow probably doesn't make sense on HC + ...createColorAliasTokens('highContrast'), + }; +} diff --git a/packages/theming/default-theme/src/defaultColors.ts b/packages/theming/default-theme/src/defaultColors.ts index d3a94eded3..6db635191a 100644 --- a/packages/theming/default-theme/src/defaultColors.ts +++ b/packages/theming/default-theme/src/defaultColors.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/ban-ts-comment */ import { Palette, FabricWebPalette, ThemeColorDefinition } from '@fluentui-react-native/theme-types'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import { createColorAliasTokens } from './createAliasTokens'; @@ -31,7 +32,7 @@ export function paletteFromFabricColors(p: FabricWebPalette, isInverted?: boolea defaultStateBackground: p.neutralLighterAlt, errorText: !isInverted ? p.redDark : '#ff5f5f', - warningText: !isInverted ? globalTokens.color.grey['20'] : globalTokens.color.white, + warningText: !isInverted ? globalTokens.color.grey20 : globalTokens.color.white, errorBackground: !isInverted ? 'rgba(245, 135, 145, .2)' : 'rgba(232, 17, 35, .5)', blockingBackground: !isInverted ? 'rgba(250, 65, 0, .2)' : 'rgba(234, 67, 0, .5)', warningBackground: !isInverted ? 'rgba(255, 200, 10, .2)' : 'rgba(255, 251, 0, .6)', @@ -241,17 +242,29 @@ export function getStockWebPalette(): ThemeColorDefinition { red: globalTokens.color.red.primary, redDark: globalTokens.color.burgundy.primary, - themeDarker: globalTokens.color.brand.shade40, - themeDark: globalTokens.color.brand.shade20, - themeDarkAlt: globalTokens.color.brand.shade10, - themePrimary: globalTokens.color.brand.primary, - themeSecondary: '#2b88d8', - themeTertiary: '#71afe5', - themeLight: globalTokens.color.brand.tint40, - themeLighter: globalTokens.color.brand.tint50, - themeLighterAlt: globalTokens.color.brand.tint60, - accent: globalTokens.color.brand.primary, + // @ts-ignore + accent: globalTokens.color.brand80, blackTranslucent40: 'rgba(0,0,0,.4)', + + // Colors to be deprecated + // @ts-ignore + themeDarker: globalTokens.color.brand40, + // @ts-ignore + themeDark: globalTokens.color.brand60, + // @ts-ignore + themeDarkAlt: globalTokens.color.brand70, + // @ts-ignore + themePrimary: globalTokens.color.brand80, + // @ts-ignore + themeSecondary: globalTokens.color.brand90, + // @ts-ignore + themeTertiary: globalTokens.color.brand120, + // @ts-ignore + themeLight: globalTokens.color.brand140, + // @ts-ignore + themeLighter: globalTokens.color.brand150, + // @ts-ignore + themeLighterAlt: globalTokens.color.brand160, }), ...createColorAliasTokens('light'), }; @@ -262,15 +275,6 @@ export function getStockWebDarkPalette(): ThemeColorDefinition { ...paletteFromFabricColors( { // colors taken from fluentui DarkCustomizations.ts - themeDarker: '#82c7ff', - themeDark: globalTokens.color.brand.tint30, - themeDarkAlt: globalTokens.color.brand.tint20, - themePrimary: globalTokens.color.brand.tint10, - themeSecondary: globalTokens.color.brand.primary, - themeTertiary: '#235a85', - themeLight: globalTokens.color.brand.shade30, - themeLighter: globalTokens.color.brand.shade50, - themeLighterAlt: globalTokens.color.brand.shade60, black: globalTokens.color.white, neutralDark: '#faf9f8', neutralPrimary: '#f3f2f1', @@ -286,9 +290,30 @@ export function getStockWebDarkPalette(): ThemeColorDefinition { neutralLighterAlt: '#201f1e', white: '#1b1a19', red: globalTokens.color.red.primary, - accent: globalTokens.color.brand.primary, + // @ts-ignore + accent: globalTokens.color.brand40, redDark: '#f1707b', blackTranslucent40: 'rgba(0,0,0,.4)', + + // Colors to be deprecated + // @ts-ignore + themeDarker: globalTokens.color.brand110, + // @ts-ignore + themeDark: globalTokens.color.brand100, + // @ts-ignore + themeDarkAlt: globalTokens.color.brand100, + // @ts-ignore + themePrimary: globalTokens.color.brand90, + // @ts-ignore + themeSecondary: globalTokens.color.brand90, + // @ts-ignore + themeTertiary: globalTokens.color.brand60, + // @ts-ignore + themeLight: globalTokens.color.brand50, + // @ts-ignore + themeLighter: globalTokens.color.brand40, + // @ts-ignore + themeLighterAlt: globalTokens.color.brand30, }, true, ), diff --git a/packages/theming/default-theme/src/defaultColors.win32.ts b/packages/theming/default-theme/src/defaultColors.win32.ts new file mode 100644 index 0000000000..f31da718a6 --- /dev/null +++ b/packages/theming/default-theme/src/defaultColors.win32.ts @@ -0,0 +1,510 @@ +import { Palette, FabricWebPalette, ThemeColorDefinition } from '@fluentui-react-native/theme-types'; +import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import { createColorAliasTokens } from './createAliasTokens'; + +/** + * Generate a palette from a set of fabric web colors, like those output from the theme designer. + * + * @param palette - fabric web palette definition. This allows initializing our color values in the same + * manner the fabric web does it + */ +export function paletteFromFabricColors(p: FabricWebPalette, isInverted?: boolean): Palette { + return { + background: p.white, + bodyStandoutBackground: p.neutralLighterAlt, + bodyFrameBackground: p.white, + bodyFrameDivider: p.neutralLight, + bodyText: p.neutralPrimary, + bodyTextChecked: p.black, + subText: p.neutralSecondary, + bodyDivider: p.neutralLight, + + disabledBackground: isInverted ? p.neutralQuaternaryAlt : p.neutralLighter, + disabledText: p.neutralTertiary, + disabledBodyText: p.neutralTertiary, + disabledSubtext: p.neutralQuaternary, + disabledBodySubtext: p.neutralTertiaryAlt, + + focusBorder: p.neutralSecondary, + variantBorder: p.neutralLight, + variantBorderHovered: p.neutralTertiary, + defaultStateBackground: p.neutralLighterAlt, + + errorText: !isInverted ? p.redDark : '#ff5f5f', + warningText: !isInverted ? globalTokens.color.grey20 : globalTokens.color.white, + errorBackground: !isInverted ? 'rgba(245, 135, 145, .2)' : 'rgba(232, 17, 35, .5)', + blockingBackground: !isInverted ? 'rgba(250, 65, 0, .2)' : 'rgba(234, 67, 0, .5)', + warningBackground: !isInverted ? 'rgba(255, 200, 10, .2)' : 'rgba(255, 251, 0, .6)', + warningHighlight: !isInverted ? '#ffb900' : '#fff100', + successBackground: !isInverted ? 'rgba(95, 210, 85, .2)' : 'rgba(186, 216, 10, .4)', + + inputBorder: p.neutralTertiary, + inputBorderHovered: p.neutralPrimary, + inputBackground: p.white, + inputBackgroundChecked: p.themePrimary, + inputBackgroundCheckedHovered: p.themeDarkAlt, + inputForegroundChecked: p.white, + inputFocusBorderAlt: p.themePrimary, + smallInputBorder: p.neutralSecondary, + inputText: p.neutralPrimary, + inputTextHovered: p.neutralDark, + inputPlaceholderText: p.neutralSecondary, + + buttonBackground: p.neutralLighter, + buttonBackgroundChecked: p.neutralTertiaryAlt, + buttonBackgroundHovered: p.neutralLight, + buttonBackgroundCheckedHovered: p.neutralLight, + buttonBackgroundPressed: p.neutralLight, + buttonBackgroundDisabled: p.neutralLighter, + buttonBorder: p.neutralSecondaryAlt, + buttonText: isInverted ? p.black : p.neutralPrimary, + buttonTextHovered: isInverted ? p.neutralPrimary : p.neutralDark, + buttonTextChecked: p.neutralDark, + buttonTextCheckedHovered: p.black, + buttonTextPressed: p.neutralDark, + buttonTextDisabled: p.neutralTertiary, + buttonBorderDisabled: p.neutralLighter, + buttonBorderFocused: p.neutralSecondaryAlt, + + primaryButtonBackground: p.themePrimary, + primaryButtonBackgroundHovered: p.themeDarkAlt, + primaryButtonBackgroundPressed: p.themeDark, + primaryButtonBackgroundDisabled: p.neutralLighter, + primaryButtonBorder: 'transparent', + primaryButtonBorderFocused: 'transparent', + primaryButtonText: p.white, + primaryButtonTextHovered: p.white, + primaryButtonTextPressed: p.white, + primaryButtonTextDisabled: p.neutralQuaternary, + + accentButtonBackground: p.accent, + accentButtonText: p.white, + + menuBackground: isInverted ? p.neutralLighter : p.white, + menuDivider: isInverted ? p.neutralTertiaryAlt : p.neutralTertiaryAlt, + menuIcon: isInverted ? p.themeDarkAlt : p.themePrimary, + menuHeader: isInverted ? p.black : p.themePrimary, + menuItemBackgroundHovered: isInverted ? p.neutralQuaternaryAlt : p.neutralLighter, + menuItemBackgroundPressed: isInverted ? p.neutralQuaternary : p.neutralLight, + menuItemText: p.neutralPrimary, + menuItemTextHovered: p.neutralDark, + + listBackground: p.white, + listText: p.neutralPrimary, + listItemBackgroundHovered: p.neutralLighter, + listItemBackgroundChecked: p.neutralLight, + listItemBackgroundCheckedHovered: p.neutralQuaternaryAlt, + + listHeaderBackgroundHovered: p.neutralLighter, + listHeaderBackgroundPressed: p.neutralLight, + + actionLink: p.neutralPrimary, + actionLinkHovered: p.neutralDark, + link: p.themePrimary, + linkHovered: p.themeDarker, + linkPressed: p.themeDark, + + // Control Color Tokens + defaultBackground: p.neutralLighter, + defaultBorder: p.neutralSecondaryAlt, + defaultContent: isInverted ? p.black : p.neutralPrimary, + defaultIcon: isInverted ? p.black : p.neutralPrimary, + + defaultHoveredBackground: p.neutralLight, + defaultHoveredBorder: p.neutralSecondaryAlt, + defaultHoveredContent: isInverted ? p.neutralPrimary : p.neutralDark, + defaultHoveredIcon: isInverted ? p.neutralPrimary : p.neutralDark, + + defaultFocusedBackground: p.neutralLight, + defaultFocusedBorder: p.neutralSecondaryAlt, + defaultFocusedContent: isInverted ? p.neutralPrimary : p.neutralDark, + defaultFocusedIcon: isInverted ? p.neutralPrimary : p.neutralDark, + + defaultPressedBackground: p.neutralLight, + defaultPressedBorder: p.neutralSecondaryAlt, + defaultPressedContent: p.neutralDark, + defaultPressedIcon: p.neutralDark, + + defaultDisabledBackground: p.neutralLighter, + defaultDisabledBorder: p.neutralLighter, + defaultDisabledContent: p.neutralTertiary, + defaultDisabledIcon: p.neutralTertiary, + + ghostBackground: p.white, + ghostBorder: p.white, + ghostContent: p.neutralPrimary, + ghostIcon: p.neutralPrimary, + + ghostHoveredBackground: p.neutralLighter, + ghostHoveredBorder: p.neutralLighter, + ghostHoveredContent: p.neutralDark, + ghostHoveredIcon: p.neutralDark, + + ghostFocusedBackground: p.neutralLighter, + ghostFocusedBorder: p.neutralSecondaryAlt, + ghostFocusedContent: p.neutralDark, + ghostFocusedIcon: p.neutralDark, + + ghostPressedBackground: p.neutralLight, + ghostPressedBorder: p.neutralLight, + ghostPressedContent: p.neutralDark, + ghostPressedIcon: p.neutralDark, + + ghostDisabledBackground: p.white, + ghostDisabledBorder: p.white, + ghostDisabledContent: p.neutralTertiary, + ghostDisabledIcon: p.neutralTertiary, + + brandedBackground: p.themePrimary, + brandedBorder: p.themeDark, + brandedContent: p.white, + brandedIcon: p.white, + + brandedHoveredBackground: p.themeDarkAlt, + brandedHoveredBorder: p.themeDarker, + brandedHoveredContent: p.white, + brandedHoveredIcon: p.white, + + brandedFocusedBackground: p.themeDarkAlt, + brandedFocusedBorder: p.themeDarker, + brandedFocusedContent: p.white, + brandedFocusedIcon: p.white, + + brandedPressedBackground: p.themeDark, + brandedPressedBorder: p.themeDarker, + brandedPressedContent: p.white, + brandedPressedIcon: p.white, + + brandedDisabledBackground: p.neutralLighter, + brandedDisabledBorder: p.neutralLighter, + brandedDisabledContent: p.neutralQuaternary, + brandedDisabledIcon: p.neutralQuaternary, + + defaultCheckedBackground: p.neutralTertiaryAlt, + defaultCheckedContent: p.neutralDark, + defaultCheckedHoveredBackground: p.neutralLight, + defaultCheckedHoveredContent: isInverted ? p.neutralPrimary : p.neutralDark, + + brandedCheckedBackground: p.neutralTertiaryAlt, + brandedCheckedContent: p.neutralDark, + brandedCheckedHoveredBackground: p.neutralLight, + brandedCheckedHoveredContent: isInverted ? p.neutralPrimary : p.neutralDark, + + ghostCheckedBackground: p.neutralLight, + ghostCheckedContent: p.black, + ghostCheckedHoveredBackground: p.neutralLighter, + ghostCheckedHoveredContent: p.neutralDark, + ghostCheckedHoveredBorder: p.neutralDark, + + ghostSecondaryContent: p.neutralSecondary, + ghostFocusedSecondaryContent: p.neutralSecondary, + ghostHoveredSecondaryContent: p.neutralSecondary, + ghostPressedSecondaryContent: p.neutralSecondary, + + brandedSecondaryContent: p.neutralLighterAlt, + brandedFocusedSecondaryContent: p.neutralLighterAlt, + brandedHoveredSecondaryContent: p.neutralLighterAlt, + brandedPressedSecondaryContent: p.neutralLighterAlt, + + defaultDisabledSecondaryContent: p.neutralTertiary, + defaultHoveredSecondaryContent: p.neutralTertiary, + defaultPressedSecondaryContent: p.neutralTertiary, + + checkmarkColor: p.white, + checkboxBackground: p.themePrimary, + checkboxBackgroundDisabled: p.neutralLighter, + checkboxBorderColor: p.neutralSecondaryAlt, + + personaActivityRing: p.white, + personaActivityGlow: p.themePrimary, + }; +} + +export function getStockWebPalette(): ThemeColorDefinition { + return { + ...paletteFromFabricColors({ + black: globalTokens.color.black, + neutralDark: '#201f1e', + neutralPrimary: '#323130', + neutralPrimaryAlt: '#3b3a39', + neutralSecondary: '#605e5c', + neutralSecondaryAlt: '#8a8886', + neutralTertiary: '#a19f9d', + neutralTertiaryAlt: '#c8c6c4', + neutralQuaternary: '#d2d0ce', + neutralQuaternaryAlt: '#e1dfdd', + neutralLight: '#edebe9', + neutralLighter: '#f3f2f1', + neutralLighterAlt: '#faf9f8', + white: globalTokens.color.white, + // Shared Colors + red: globalTokens.color.red.primary, + redDark: globalTokens.color.burgundy.primary, + + themeDarker: globalTokens.color.brand.shade40, + themeDark: globalTokens.color.brand.shade20, + themeDarkAlt: globalTokens.color.brand.shade10, + themePrimary: globalTokens.color.brand.primary, + themeSecondary: '#2b88d8', + themeTertiary: '#71afe5', + themeLight: globalTokens.color.brand.tint40, + themeLighter: globalTokens.color.brand.tint50, + themeLighterAlt: globalTokens.color.brand.tint60, + accent: globalTokens.color.brand.primary, + blackTranslucent40: 'rgba(0,0,0,.4)', + }), + ...createColorAliasTokens('light'), + }; +} + +export function getStockWebDarkPalette(): ThemeColorDefinition { + return { + ...paletteFromFabricColors( + { + // colors taken from fluentui DarkCustomizations.ts + themeDarker: '#82c7ff', + themeDark: globalTokens.color.brand.tint30, + themeDarkAlt: globalTokens.color.brand.tint20, + themePrimary: globalTokens.color.brand.tint10, + themeSecondary: globalTokens.color.brand.primary, + themeTertiary: '#235a85', + themeLight: globalTokens.color.brand.shade30, + themeLighter: globalTokens.color.brand.shade50, + themeLighterAlt: globalTokens.color.brand.shade60, + black: globalTokens.color.white, + neutralDark: '#faf9f8', + neutralPrimary: '#f3f2f1', + neutralPrimaryAlt: '#c8c6c4', + neutralSecondary: '#a19f9d', + neutralSecondaryAlt: '#979693', + neutralTertiary: '#797775', + neutralTertiaryAlt: '#484644', + neutralQuaternary: '#3b3a39', + neutralQuaternaryAlt: '#323130', + neutralLight: '#292827', + neutralLighter: '#252423', + neutralLighterAlt: '#201f1e', + white: '#1b1a19', + red: globalTokens.color.red.primary, + accent: globalTokens.color.brand.primary, + redDark: '#f1707b', + blackTranslucent40: 'rgba(0,0,0,.4)', + }, + true, + ), + ...createColorAliasTokens('dark'), + }; +} + +export function getStockWebHCPalette(): ThemeColorDefinition { + return { + background: '#000000', + bodyStandoutBackground: '#000000', + bodyFrameBackground: '#000000', + bodyFrameDivider: '#000000', + bodyText: '#ffffff', + bodyTextChecked: '#000000', + subText: '#ffffff', + bodyDivider: '#ffffff', + + disabledBackground: '#000000', + disabledText: '#3ff23f', + disabledBodyText: '#3ff23f', + disabledSubtext: '#3ff23f', + disabledBodySubtext: '#3ff23f', + + focusBorder: '#ffffff', + variantBorder: '#ffffff', + variantBorderHovered: '#ffffff', + defaultStateBackground: '#000000', + + errorText: '#ffffff', + warningText: '#ffffff', + errorBackground: '#000000', + blockingBackground: '#000000', + warningBackground: '#000000', + warningHighlight: '#ffffff', + successBackground: '#000000', + + inputBorder: '#ffffff', + inputBorderHovered: '#1aebff', + inputBackground: '#000000', + inputBackgroundChecked: '#1aebff', + inputBackgroundCheckedHovered: '#1aebff', + inputForegroundChecked: '#000000', + inputFocusBorderAlt: '#ffffff', + smallInputBorder: '#ffffff', + inputText: '#ffffff', + inputTextHovered: '#000000', + inputPlaceholderText: '#ffffff', + + buttonBackground: '#000000', + buttonBackgroundChecked: '#1aebff', + buttonBackgroundHovered: '#1aebff', + buttonBackgroundCheckedHovered: '#1aebff', + buttonBackgroundPressed: '#1aebff', + buttonBackgroundDisabled: '#000000', + buttonBorder: '#ffffff', + buttonText: '#ffffff', + buttonTextHovered: '#000000', + buttonTextChecked: '#000000', + buttonTextCheckedHovered: '#000000', + buttonTextPressed: '#000000', + buttonTextDisabled: '#3ff23f', + buttonBorderDisabled: '#3ff23f', + buttonBorderFocused: '#ffffff', + + primaryButtonBackground: '#000000', + primaryButtonBackgroundHovered: '#1aebff', + primaryButtonBackgroundPressed: '#1aebff', + primaryButtonBackgroundDisabled: '#000000', + primaryButtonBorder: '#ffffff', + primaryButtonBorderFocused: '#ffffff', + primaryButtonText: '#ffffff', + primaryButtonTextHovered: '#000000', + primaryButtonTextPressed: '#000000', + primaryButtonTextDisabled: '#3ff23f', + + accentButtonBackground: '#000000', + accentButtonText: '#ffffff', + + menuBackground: '#000000', + menuDivider: '#ffffff', + menuIcon: '#ffffff', + menuHeader: '#ffffff', + menuItemBackgroundHovered: '#1aebff', + menuItemBackgroundPressed: '#1aebff', + menuItemText: '#ffffff', + menuItemTextHovered: '#000000', + + listBackground: '#000000', + listText: '#ffffff', + listItemBackgroundHovered: '#1aebff', + listItemBackgroundChecked: '#1aebff', + listItemBackgroundCheckedHovered: '#1aebff', + + listHeaderBackgroundHovered: '#1aebff', + listHeaderBackgroundPressed: '#1aebff', + + actionLink: '#ffff00', + actionLinkHovered: '#ffffff', + link: '#ffff00', + linkHovered: '#ffffff', + linkPressed: '#ffffff', + + // Control Color Tokens + defaultBackground: '#000000', + defaultBorder: '#ffffff', + defaultContent: '#ffffff', + defaultIcon: '#ffffff', + + defaultHoveredBackground: '#1aebff', + defaultHoveredBorder: '#1aebff', + defaultHoveredContent: '#000000', + defaultHoveredIcon: '#000000', + + defaultFocusedBackground: '#000000', + defaultFocusedBorder: '#ffffff', + defaultFocusedContent: '#ffffff', + defaultFocusedIcon: '#ffffff', + + defaultPressedBackground: '#1aebff', + defaultPressedBorder: '#1aebff', + defaultPressedContent: '#000000', + defaultPressedIcon: '#000000', + + defaultDisabledBackground: '#000000', + defaultDisabledBorder: '#3ff23f', + defaultDisabledContent: '#3ff23f', + defaultDisabledIcon: '#3ff23f', + + ghostBackground: '#000000', + ghostBorder: '#000000', + ghostContent: '#ffffff', + ghostIcon: '#ffffff', + + ghostHoveredBackground: '#1aebff', + ghostHoveredBorder: '#1aebff', + ghostHoveredContent: '#000000', + ghostHoveredIcon: '#000000', + + ghostFocusedBackground: '#000000', + ghostFocusedBorder: '#ffffff', + ghostFocusedContent: '#ffffff', + ghostFocusedIcon: '#ffffff', + + ghostPressedBackground: '#1aebff', + ghostPressedBorder: '#1aebff', + ghostPressedContent: '#000000', + ghostPressedIcon: '#000000', + + ghostDisabledBackground: '#000000', + ghostDisabledBorder: '#000000', + ghostDisabledContent: '#3ff23f', + ghostDisabledIcon: '#3ff23f', + + brandedBackground: '#000000', + brandedBorder: '#ffffff', + brandedContent: '#ffffff', + brandedIcon: '#ffffff', + + brandedHoveredBackground: '#1aebff', + brandedHoveredBorder: '#1aebff', + brandedHoveredContent: '#000000', + brandedHoveredIcon: '#000000', + + brandedFocusedBackground: '#000000', + brandedFocusedBorder: '#ffffff', + brandedFocusedContent: '#ffffff', + brandedFocusedIcon: '#ffffff', + + brandedPressedBackground: '#1aebff', + brandedPressedBorder: '#1aebff', + brandedPressedContent: '#000000', + brandedPressedIcon: '#000000', + + brandedDisabledBackground: '#000000', + brandedDisabledBorder: '#3ff23f', + brandedDisabledContent: '#3ff23f', + brandedDisabledIcon: '#3ff23f', + + defaultCheckedBackground: '#1aebff', + defaultCheckedContent: '#000000', + defaultCheckedHoveredBackground: '#1aebff', + defaultCheckedHoveredContent: '#000000', + + brandedCheckedBackground: '#1aebff', + brandedCheckedContent: '#000000', + brandedCheckedHoveredBackground: '#1aebff', + brandedCheckedHoveredContent: '#000000', + + ghostCheckedBackground: '#1aebff', + ghostCheckedContent: '#000000', + ghostCheckedHoveredBackground: '#1aebff', + ghostCheckedHoveredContent: '#000000', + ghostCheckedHoveredBorder: '#000000', + + ghostSecondaryContent: '#ffffff', + ghostFocusedSecondaryContent: '#ffffff', + ghostHoveredSecondaryContent: '#000000', + ghostPressedSecondaryContent: '#000000', + + brandedSecondaryContent: '#ffffff', + brandedFocusedSecondaryContent: '#ffffff', + brandedHoveredSecondaryContent: '#000000', + brandedPressedSecondaryContent: '#000000', + + defaultDisabledSecondaryContent: '#ffffff', + defaultHoveredSecondaryContent: '#000000', + defaultPressedSecondaryContent: '#000000', + + checkmarkColor: '#ffffff', + checkboxBackground: '#000000', + checkboxBackgroundDisabled: '#000000', + checkboxBorderColor: '#ffffff', + + personaActivityRing: '#ffffff', + personaActivityGlow: 'transparent', // glow probably doesn't make sense on HC + ...createColorAliasTokens('highContrast'), + }; +} diff --git a/packages/theming/default-theme/src/defaultTheme.ts b/packages/theming/default-theme/src/defaultTheme.ts index 020b1a9917..6ecf1632af 100644 --- a/packages/theming/default-theme/src/defaultTheme.ts +++ b/packages/theming/default-theme/src/defaultTheme.ts @@ -7,13 +7,13 @@ import { createShadowAliasTokens } from './createAliasTokens'; function _defaultTypography(): Typography { const defaultsDict = { sizes: { - caption: globalTokens.font.size['100'] as FontSize, - secondary: globalTokens.font.size['200'] as FontSize, - body: globalTokens.font.size['300'] as FontSize, - subheader: globalTokens.font.size['400'] as FontSize, - header: globalTokens.font.size['500'] as FontSize, - hero: globalTokens.font.size['700'] as FontSize, - heroLarge: globalTokens.font.size['900'] as FontSize, + caption: globalTokens.font.size100 as FontSize, + secondary: globalTokens.font.size200 as FontSize, + body: globalTokens.font.size300 as FontSize, + subheader: globalTokens.font.size400 as FontSize, + header: globalTokens.font.size500 as FontSize, + hero: globalTokens.font.size700 as FontSize, + heroLarge: globalTokens.font.size900 as FontSize, } as FontSizes, weights: { regular: globalTokens.font.weight.regular as FontWeightValue, diff --git a/packages/theming/theme-tokens/package.json b/packages/theming/theme-tokens/package.json index 0f7fe7ce5f..f2835f25d0 100644 --- a/packages/theming/theme-tokens/package.json +++ b/packages/theming/theme-tokens/package.json @@ -31,10 +31,10 @@ "author": "", "license": "MIT", "dependencies": { - "@fluentui-react-native/design-tokens-android": "^0.28.0", - "@fluentui-react-native/design-tokens-ios": "^0.26.0", - "@fluentui-react-native/design-tokens-win32": "^0.13.0", - "@fluentui-react-native/design-tokens-windows": "^0.13.0", + "@fluentui-react-native/design-tokens-android": "^0.31.0", + "@fluentui-react-native/design-tokens-ios": "^0.31.0", + "@fluentui-react-native/design-tokens-win32": "^0.31.0", + "@fluentui-react-native/design-tokens-windows": "^0.31.0", "@fluentui-react-native/theme-types": ">=0.23.1 <1.0.0", "assert-never": "^1.2.1" }, diff --git a/packages/theming/theme-tokens/src/getShadowTokens.ts b/packages/theming/theme-tokens/src/getShadowTokens.ts index c291ed844c..2be146af9a 100644 --- a/packages/theming/theme-tokens/src/getShadowTokens.ts +++ b/packages/theming/theme-tokens/src/getShadowTokens.ts @@ -5,11 +5,11 @@ import { AppearanceOptions } from '@fluentui-react-native/theme-types'; export function getShadowTokens(mode: AppearanceOptions) { if (mode === 'light') { - return lightShadowTokens.shadow; + return lightShadowTokens; } else if (mode === 'dark') { - return darkShadowTokens.shadow; + return darkShadowTokens; } // HC mode. - return hcShadowTokens.shadow; + return hcShadowTokens; } diff --git a/packages/theming/theming-utils/package.json b/packages/theming/theming-utils/package.json index 244c4bf995..cb319da4a4 100644 --- a/packages/theming/theming-utils/package.json +++ b/packages/theming/theming-utils/package.json @@ -29,8 +29,8 @@ "@fluentui-react-native/theme-types": ">=0.23.1 <1.0.0" }, "devDependencies": { - "@fluentui-react-native/design-tokens-win32": "^0.14.0", - "@fluentui-react-native/design-tokens-windows": "^0.14.0", + "@fluentui-react-native/design-tokens-win32": "^0.31.0", + "@fluentui-react-native/design-tokens-windows": "^0.31.0", "@fluentui-react-native/eslint-config-rules": "^0.1.1", "@fluentui-react-native/scripts": "^0.1.1", "@types/react-native": "^0.68.0", diff --git a/packages/theming/theming-utils/src/__tests__/__snapshots__/theming-utils.test.ts.snap b/packages/theming/theming-utils/src/__tests__/__snapshots__/theming-utils.test.ts.snap index cf400f1e78..8ed904ba89 100644 --- a/packages/theming/theming-utils/src/__tests__/__snapshots__/theming-utils.test.ts.snap +++ b/packages/theming/theming-utils/src/__tests__/__snapshots__/theming-utils.test.ts.snap @@ -210,7 +210,7 @@ Object { } `; -exports[`mapPipelineToShadow test darkShadowTokens.shadow 1`] = ` +exports[`mapPipelineToShadow test darkShadowTokens 1`] = ` Object { "shadow16": Object { "ambient": Object { @@ -383,7 +383,7 @@ Object { } `; -exports[`mapPipelineToShadow test hcShadowTokens.shadow 1`] = ` +exports[`mapPipelineToShadow test hcShadowTokens 1`] = ` Object { "shadow16": Object { "ambient": Object { @@ -556,7 +556,7 @@ Object { } `; -exports[`mapPipelineToShadow test lightShadowTokens.shadow 1`] = ` +exports[`mapPipelineToShadow test lightShadowTokens 1`] = ` Object { "shadow16": Object { "ambient": Object { diff --git a/packages/theming/theming-utils/src/__tests__/theming-utils.test.ts b/packages/theming/theming-utils/src/__tests__/theming-utils.test.ts index 06a6944b72..d5d594ff97 100644 --- a/packages/theming/theming-utils/src/__tests__/theming-utils.test.ts +++ b/packages/theming/theming-utils/src/__tests__/theming-utils.test.ts @@ -70,18 +70,18 @@ describe('mapFontPipelineToTheme test', () => { }); describe('mapPipelineToShadow test', () => { - it('lightShadowTokens.shadow', () => { - const fontTheme = mapPipelineToShadow(lightShadowTokens.shadow); + it('lightShadowTokens', () => { + const fontTheme = mapPipelineToShadow(lightShadowTokens); expect(fontTheme).toMatchSnapshot(); }); - it('darkShadowTokens.shadow', () => { - const fontTheme = mapPipelineToShadow(darkShadowTokens.shadow); + it('darkShadowTokens', () => { + const fontTheme = mapPipelineToShadow(darkShadowTokens); expect(fontTheme).toMatchSnapshot(); }); - it('hcShadowTokens.shadow', () => { - const fontTheme = mapPipelineToShadow(hcShadowTokens.shadow); + it('hcShadowTokens', () => { + const fontTheme = mapPipelineToShadow(hcShadowTokens); expect(fontTheme).toMatchSnapshot(); }); }); diff --git a/packages/theming/theming-utils/src/mapPipelineToShadow.ts b/packages/theming/theming-utils/src/mapPipelineToShadow.ts index 9596dc9f89..449fbe1aa4 100644 --- a/packages/theming/theming-utils/src/mapPipelineToShadow.ts +++ b/packages/theming/theming-utils/src/mapPipelineToShadow.ts @@ -2,22 +2,22 @@ import { ThemeShadowDefinition } from '@fluentui-react-native/theme-types/src/Sh /** * Given design token pipeline output for shadow tokens, creates an object that can be used in Theme object. - * @param pipelineOutputShadow Assumes that this is the object at the shadow property of the pipeline output + * @param pipelineOutputShadow Assumes that this is the object in the tokens-shadow.json file of the pipeline output * @returns Object containing shadow tokens */ export function mapPipelineToShadow(pipelineOutputShadow: any): ThemeShadowDefinition { return { - shadow2: { ambient: pipelineOutputShadow[2][0], key: pipelineOutputShadow[2][1] }, - shadow4: { ambient: pipelineOutputShadow[4][0], key: pipelineOutputShadow[4][1] }, - shadow8: { ambient: pipelineOutputShadow[8][0], key: pipelineOutputShadow[8][1] }, - shadow16: { ambient: pipelineOutputShadow[16][0], key: pipelineOutputShadow[16][1] }, - shadow28: { ambient: pipelineOutputShadow[28][0], key: pipelineOutputShadow[28][1] }, - shadow64: { ambient: pipelineOutputShadow[64][0], key: pipelineOutputShadow[64][1] }, - shadow2brand: { ambient: pipelineOutputShadow.brand[2][0], key: pipelineOutputShadow.brand[2][1] }, - shadow4brand: { ambient: pipelineOutputShadow.brand[4][0], key: pipelineOutputShadow.brand[4][1] }, - shadow8brand: { ambient: pipelineOutputShadow.brand[8][0], key: pipelineOutputShadow.brand[8][1] }, - shadow16brand: { ambient: pipelineOutputShadow.brand[16][0], key: pipelineOutputShadow.brand[16][1] }, - shadow28brand: { ambient: pipelineOutputShadow.brand[28][0], key: pipelineOutputShadow.brand[28][1] }, - shadow64brand: { ambient: pipelineOutputShadow.brand[64][0], key: pipelineOutputShadow.brand[64][1] }, + shadow2: { ambient: pipelineOutputShadow.global.shadow2[0], key: pipelineOutputShadow.global.shadow2[1] }, + shadow4: { ambient: pipelineOutputShadow.global.shadow4[0], key: pipelineOutputShadow.global.shadow4[1] }, + shadow8: { ambient: pipelineOutputShadow.global.shadow8[0], key: pipelineOutputShadow.global.shadow8[1] }, + shadow16: { ambient: pipelineOutputShadow.global.shadow16[0], key: pipelineOutputShadow.global.shadow16[1] }, + shadow28: { ambient: pipelineOutputShadow.global.shadow28[0], key: pipelineOutputShadow.global.shadow28[1] }, + shadow64: { ambient: pipelineOutputShadow.global.shadow64[0], key: pipelineOutputShadow.global.shadow64[1] }, + shadow2brand: { ambient: pipelineOutputShadow.global.shadowBrand2[0], key: pipelineOutputShadow.global.shadowBrand2[1] }, + shadow4brand: { ambient: pipelineOutputShadow.global.shadowBrand4[0], key: pipelineOutputShadow.global.shadowBrand4[1] }, + shadow8brand: { ambient: pipelineOutputShadow.global.shadowBrand8[0], key: pipelineOutputShadow.global.shadowBrand8[1] }, + shadow16brand: { ambient: pipelineOutputShadow.global.shadowBrand16[0], key: pipelineOutputShadow.global.shadowBrand16[1] }, + shadow28brand: { ambient: pipelineOutputShadow.global.shadowBrand28[0], key: pipelineOutputShadow.global.shadowBrand28[1] }, + shadow64brand: { ambient: pipelineOutputShadow.global.shadowBrand64[0], key: pipelineOutputShadow.global.shadowBrand64[1] }, }; } diff --git a/packages/theming/win32-theme/package.json b/packages/theming/win32-theme/package.json index 9da5d569d9..211fcb839b 100644 --- a/packages/theming/win32-theme/package.json +++ b/packages/theming/win32-theme/package.json @@ -32,7 +32,7 @@ "license": "MIT", "dependencies": { "@fluentui-react-native/default-theme": ">=0.16.10 <1.0.0", - "@fluentui-react-native/design-tokens-win32": "^0.13.0", + "@fluentui-react-native/design-tokens-win32": "^0.31.0", "@fluentui-react-native/memo-cache": "^1.1.7", "@fluentui-react-native/theme-tokens": ">=0.21.2 <1.0.0", "@fluentui-react-native/theme-types": ">=0.23.1 <1.0.0", diff --git a/packages/theming/win32-theme/src/getOfficeTokens.ts b/packages/theming/win32-theme/src/getOfficeTokens.ts index b24cb509bd..ffb1961374 100644 --- a/packages/theming/win32-theme/src/getOfficeTokens.ts +++ b/packages/theming/win32-theme/src/getOfficeTokens.ts @@ -23,13 +23,13 @@ export function getOfficeAliasTokens(officeTheme: string) { export function getOfficeShadowTokens(officeTheme: string) { if (officeTheme === 'White' || officeTheme === 'Colorful') { - return colorfulShadowTokens.shadow; + return colorfulShadowTokens; } else if (officeTheme === 'DarkGray') { - return darkGrayShadowTokens.shadow; + return darkGrayShadowTokens; } else if (officeTheme === 'Black') { - return blackShadowTokens.shadow; + return blackShadowTokens; } else if (officeTheme === 'HighContrast') { - return hcShadowTokens.shadow; + return hcShadowTokens; } return colorfulAliasTokens; diff --git a/yarn.lock b/yarn.lock index cd850d801e..ae08b8e20f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1457,40 +1457,30 @@ minimatch "^3.1.2" strip-json-comments "^3.1.1" -"@fluentui-react-native/design-tokens-android@^0.28.0": - version "0.28.0" - resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-android/-/design-tokens-android-0.28.0.tgz#45a55696e96351bb31be045d73499ffa2d75be95" - integrity sha512-jsiU3XcF2421T2y35J33qXiR1ZczovPAFsr/dTSh7aT+0goXjl4RF9nrnZygsOaVKZosGlRZs23QjtDRvZaJCA== +"@fluentui-react-native/design-tokens-android@^0.31.0": + version "0.31.0" + resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-android/-/design-tokens-android-0.31.0.tgz#52a1209522f7d8eb8530b3b31cd1a63267f5483f" + integrity sha512-WjJBHW+Sd8CFQl6QnaoD/QMtMXJOCH2iPhCvosil7Z9zlDsjw1BBwU86FcqU1TK8W+oBZf+HYuYMIXu8bogUzg== -"@fluentui-react-native/design-tokens-ios@^0.26.0": - version "0.26.0" - resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-ios/-/design-tokens-ios-0.26.0.tgz#f477416ac88d42336cce4b5f182c2bdb7600c523" - integrity sha512-CGXuTisSlKzIMIq1JLkKBrhqy5LJpEai8BXiyrD9yw0WWU2jm9sWUoqXfH7EseJ/VrfZVueD9dUQW1jrI63e9Q== +"@fluentui-react-native/design-tokens-ios@^0.31.0": + version "0.31.0" + resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-ios/-/design-tokens-ios-0.31.0.tgz#b0195aede1eea607a95fe4682cb2970ff5989877" + integrity sha512-Ncl0aPlSLIeA+YFmINxiwbCA1K97oJeDKK6lA9AnI/88ObnkO5F68I5UscQopCCQunfyVW8b3g8fJF4IsUnJDA== -"@fluentui-react-native/design-tokens-macos@^0.13.0": - version "0.13.0" - resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-macos/-/design-tokens-macos-0.13.0.tgz#e1098f2ad2476867b8c656522efc3445c25b1ecc" - integrity sha512-Le0bZeMBQ7W5CbivzDUwzlfmumKdYuKhBtvsRYODRIC+i0ST9Iy29ZBz1o6O+s/xXtW8l/PX2eVVozMEOQ5mig== +"@fluentui-react-native/design-tokens-macos@^0.31.0": + version "0.31.0" + resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-macos/-/design-tokens-macos-0.31.0.tgz#e91ad674e4c58ffcf70fdaf496ffb0b585fb4086" + integrity sha512-JIphZwHEakTGmY4QeNOVMzQu0YS+iOpzcpagU924xV5PwSaRx1wgO96giWkDuR/o+bRbbNHOcgvue2MBJ8YbsQ== -"@fluentui-react-native/design-tokens-win32@^0.13.0": - version "0.13.0" - resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-win32/-/design-tokens-win32-0.13.0.tgz#6481f3d543fbc2534d4fb242e9b33e23ec32efd6" - integrity sha512-jSJD291L22ZRZiH0CFBbLW8y1kBoESrrARcPUk8bCgzyIRFCEkq0iGL8k3W8OY7ov8/TLAflfChY3GtVX99ynA== +"@fluentui-react-native/design-tokens-win32@^0.31.0": + version "0.31.0" + resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-win32/-/design-tokens-win32-0.31.0.tgz#4cfd08d212d9c210e1a89e8288cdd0838933e952" + integrity sha512-0a+zUnS8IzAqdUJ2rNra0Z3zxT8jzC549mV1o0FcgTNwgIyQo7DB4DW63ZK67ZFeh611PZm3a9omrrHbREB+Nw== -"@fluentui-react-native/design-tokens-win32@^0.14.0": - version "0.14.0" - resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-win32/-/design-tokens-win32-0.14.0.tgz#357b4244828bfc797edc6531f6c35519c2d4a736" - integrity sha512-xUdy2EpGQ2O/5cLVAP2tyKnCF9p6GGVKKo4Gtt0D7hbmuwXTcI/iOh2ReUOfMtgDOMjbbKpi8k8C49NHxUZLKA== - -"@fluentui-react-native/design-tokens-windows@^0.13.0": - version "0.13.0" - resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-windows/-/design-tokens-windows-0.13.0.tgz#1d8610634920bd5decaca669cae8183c0713d2ef" - integrity sha512-o9ir+tpie+Fm9zO+nCbJLBfzVjUhugRWRsPS8n6wBaujC1qyeUYjhoGg6ejXzKc0nVCkIsFmRRRgC0brfrPIzw== - -"@fluentui-react-native/design-tokens-windows@^0.14.0": - version "0.14.0" - resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-windows/-/design-tokens-windows-0.14.0.tgz#1483caa1dd4e7097ac48a5872e93d7f896e8402c" - integrity sha512-WNNVTMpRir6a2Voa0yu3BZJmy2w7fofrokL+nyFQM40bACtX68KDRDE96HA5W5+4q8rEaNSXV3DzSzLXm6ekfA== +"@fluentui-react-native/design-tokens-windows@^0.31.0": + version "0.31.0" + resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-windows/-/design-tokens-windows-0.31.0.tgz#b871e8e4e4af408033e03205572294fde5770cea" + integrity sha512-OphIR5RkLIup7uUd4SCh0nU/WGhGw2w0ZkSYhxQ49k2KmHTA14L3W9hPxtgDfVBE8uS7/PMJ3L3tSCBiFgb9hg== "@hapi/hoek@^9.0.0": version "9.3.0"