Bump token packages to 0.31.0 (#2318)
* Bump all design-tokens packages to 0.29.0 * Update shadow naming * Update font size naming (except Text) * Update font size naming for Text * Update naming for the color grey * More shadow token naming updates * Update line height naming + more font size naming updates * Update stroke width token naming * Forgot to save a color grey naming update * More shadow renaming updates: missing .global, update comments * Update snapshots affected by spacing rename * Another shadow rename related change * Split defaultColors.ts to fix brand color issues * Update snapshots after previous commit * Change files * Bump design tokens packages from 0.29.0 to 0.31.0 * Update snapshots - no more undefined properties All changes are related to the updated brand color ramp, there should be no other changes. * Update corner radius tokens (the obvious ones - everything except large/extraLarge) corner.radius.none -> corner.radiusNone corner.radius.small -> corner.radius20 corner.radius.medium -> corner.radius40 corner.radius.circle -> corner.radiusCircular * Update corner radius token naming (large/extra large), all in AvatarTokens Used large -> 60 and extraLarge -> 80, based on the old win32 values. The old values for mobile were large -> 80 and extraLarge -> 120 * Change files * Forgot to save apple-theme/package.json * This line got deleted by accident * Update brand color ramp mapping * Just grouping the colors we want to deprecate together, no changes to token definitions * Update snapshots after updating brand color mapping
This commit is contained in:
lyzhan7
GitHub
Родитель
785ee9ae3c
Коммит
b4bc2de790
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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;
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (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<AvatarTokens, Theme> = (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<AvatarTokens, Theme> = (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<AvatarTokens, Theme> = (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<AvatarTokens, Theme> = (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<AvatarTokens, Theme> = (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<AvatarTokens, Theme> = (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: {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (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<AvatarTokens, Theme> = (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<AvatarTokens, Theme> = (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<AvatarTokens, Theme> = (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<AvatarTokens, Theme> = (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<AvatarTokens, Theme> = (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<AvatarTokens, Theme> = (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: {
|
||||
|
|
|
|||
|
|
@ -124,7 +124,7 @@ export const defaultBadgeColorTokens: TokenSettings<BadgeTokens> = (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<BadgeTokens> = (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,
|
||||
),
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ export const defaultBadgeColorTokens: TokenSettings<BadgeTokens> = (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<BadgeTokens> = (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,
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@ import { BadgeTokens } from './Badge.types';
|
|||
export const badgeFontTokens: TokenSettings<BadgeTokens, Theme> = (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);
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { BadgeTokens } from './Badge.types';
|
|||
export const defaultBadgeTokens: TokenSettings<BadgeTokens, Theme> = () =>
|
||||
({
|
||||
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<BadgeTokens, Theme> = () =>
|
|||
minWidth: 6,
|
||||
minHeight: 6,
|
||||
rounded: {
|
||||
borderRadius: globalTokens.corner.radius.small,
|
||||
borderRadius: globalTokens.corner.radius20,
|
||||
},
|
||||
},
|
||||
extraSmall: {
|
||||
|
|
@ -24,7 +24,7 @@ export const defaultBadgeTokens: TokenSettings<BadgeTokens, Theme> = () =>
|
|||
minHeight: 10,
|
||||
iconSize: 10,
|
||||
rounded: {
|
||||
borderRadius: globalTokens.corner.radius.small,
|
||||
borderRadius: globalTokens.corner.radius20,
|
||||
},
|
||||
},
|
||||
small: {
|
||||
|
|
@ -35,7 +35,7 @@ export const defaultBadgeTokens: TokenSettings<BadgeTokens, Theme> = () =>
|
|||
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<BadgeTokens, Theme> = () =>
|
|||
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,
|
||||
|
|
|
|||
|
|
@ -10,6 +10,6 @@ export const counterBadgeTokens: TokenSettings<CounterBadgeTokens> = () =>
|
|||
minHeight: 6,
|
||||
paddingHorizontal: 0,
|
||||
borderWidth: 0,
|
||||
borderRadius: globalTokens.corner.radius.circle,
|
||||
borderRadius: globalTokens.corner.radiusCircular,
|
||||
},
|
||||
} as CounterBadgeTokens);
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export const defaultPresenceBadgeTokens: TokenSettings<PresenceBadgeTokens> = ()
|
|||
blocked: getBadgeColor('red'),
|
||||
unknown: getBadgeColor('red'),
|
||||
offline: {
|
||||
iconColor: globalTokens.color.grey[38],
|
||||
iconColor: globalTokens.color.grey38,
|
||||
},
|
||||
outOfOffice: getBadgeColor('berry'),
|
||||
} as PresenceBadgeTokens);
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ export const defaultPresenceBadgeTokens: TokenSettings<PresenceBadgeTokens> = (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);
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export const defaultPresenceBadgeTokens: TokenSettings<PresenceBadgeTokens> = (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);
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -8,21 +8,21 @@ export const defaultButtonFontTokens: TokenSettings<ButtonTokens, Theme> = (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,
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
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<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
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<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
},
|
||||
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<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
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<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
},
|
||||
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<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
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<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
},
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
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<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
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<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
},
|
||||
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<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
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<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
},
|
||||
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<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
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<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
},
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
|
|||
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<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
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<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
},
|
||||
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<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
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<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
},
|
||||
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<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
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<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
},
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
|
|||
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<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
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<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
},
|
||||
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<ButtonTokens, Theme> = () =>
|
|||
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<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
},
|
||||
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<ButtonTokens, Theme> = () =>
|
|||
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<ButtonTokens, Theme> = () =>
|
|||
},
|
||||
},
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@ export const defaultCompoundButtonFontTokens: TokenSettings<CompoundButtonTokens
|
|||
medium: {
|
||||
hasContent: {
|
||||
fontFamily: t.typography.families.secondary,
|
||||
fontSize: globalTokens.font.size[200],
|
||||
fontSize: globalTokens.font.size200,
|
||||
fontWeight: globalTokens.font.weight.semibold as FontWeightValue,
|
||||
secondaryContentFont: {
|
||||
fontFamily: t.typography.families.secondary,
|
||||
fontSize: globalTokens.font.size[100],
|
||||
fontSize: globalTokens.font.size100,
|
||||
fontWeight: globalTokens.font.weight.semibold as FontWeightValue,
|
||||
},
|
||||
},
|
||||
|
|
@ -19,11 +19,11 @@ export const defaultCompoundButtonFontTokens: TokenSettings<CompoundButtonTokens
|
|||
small: {
|
||||
hasContent: {
|
||||
fontFamily: t.typography.families.primary,
|
||||
fontSize: globalTokens.font.size[200],
|
||||
fontSize: globalTokens.font.size200,
|
||||
fontWeight: globalTokens.font.weight.regular as FontWeightValue,
|
||||
secondaryContentFont: {
|
||||
fontFamily: t.typography.families.secondary,
|
||||
fontSize: globalTokens.font.size[100],
|
||||
fontSize: globalTokens.font.size100,
|
||||
fontWeight: globalTokens.font.weight.semibold as FontWeightValue,
|
||||
},
|
||||
},
|
||||
|
|
@ -31,11 +31,11 @@ export const defaultCompoundButtonFontTokens: TokenSettings<CompoundButtonTokens
|
|||
large: {
|
||||
hasContent: {
|
||||
fontFamily: t.typography.families.secondary,
|
||||
fontSize: globalTokens.font.size[400],
|
||||
fontSize: globalTokens.font.size400,
|
||||
fontWeight: globalTokens.font.weight.semibold as FontWeightValue,
|
||||
secondaryContentFont: {
|
||||
fontFamily: t.typography.families.primary,
|
||||
fontSize: globalTokens.font.size[200],
|
||||
fontSize: globalTokens.font.size200,
|
||||
fontWeight: globalTokens.font.weight.regular as FontWeightValue,
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@ import { CompoundButtonTokens } from './CompoundButton.types';
|
|||
|
||||
export const defaultCompoundButtonTokens: TokenSettings<CompoundButtonTokens, Theme> = (): 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<CompoundButtonTokens, Th
|
|||
},
|
||||
},
|
||||
small: {
|
||||
padding: globalTokens.spacing.s - globalTokens.stroke.width.thin,
|
||||
padding: globalTokens.spacing.s - globalTokens.stroke.width10,
|
||||
focused: {
|
||||
padding: globalTokens.spacing.s,
|
||||
},
|
||||
hasContent: {
|
||||
paddingHorizontal: globalTokens.spacing.s - globalTokens.stroke.width.thin,
|
||||
paddingHorizontal: globalTokens.spacing.s - globalTokens.stroke.width10,
|
||||
minWidth: 64,
|
||||
focused: {
|
||||
paddingHorizontal: globalTokens.spacing.s,
|
||||
|
|
@ -43,12 +43,12 @@ export const defaultCompoundButtonTokens: TokenSettings<CompoundButtonTokens, Th
|
|||
},
|
||||
},
|
||||
large: {
|
||||
padding: globalTokens.spacing.l - globalTokens.stroke.width.thin,
|
||||
padding: globalTokens.spacing.l - globalTokens.stroke.width10,
|
||||
focused: {
|
||||
padding: globalTokens.spacing.l,
|
||||
},
|
||||
hasContent: {
|
||||
paddingHorizontal: globalTokens.spacing.l - globalTokens.stroke.width.thin,
|
||||
paddingHorizontal: globalTokens.spacing.l - globalTokens.stroke.width10,
|
||||
minWidth: 96,
|
||||
focused: {
|
||||
paddingHorizontal: globalTokens.spacing.l,
|
||||
|
|
|
|||
|
|
@ -24,13 +24,13 @@ exports[`CompoundButton default 1`] = `
|
|||
"backgroundColor": "#f3f2f1",
|
||||
"borderColor": "#8a8886",
|
||||
"borderRadius": 4,
|
||||
"borderWidth": 1.5,
|
||||
"borderWidth": 1,
|
||||
"display": "flex",
|
||||
"flexDirection": "row",
|
||||
"justifyContent": "center",
|
||||
"minWidth": 96,
|
||||
"padding": 14.5,
|
||||
"paddingHorizontal": 14.5,
|
||||
"padding": 15,
|
||||
"paddingHorizontal": 15,
|
||||
"width": undefined,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { FABTokens } from './FAB.types';
|
|||
|
||||
export const defaultFABTokens: TokenSettings<FABTokens, Theme> = (t: Theme) =>
|
||||
({
|
||||
borderRadius: globalTokens.corner.radius.circle,
|
||||
borderRadius: globalTokens.corner.radiusCircular,
|
||||
minHeight: 56,
|
||||
minWidth: 56,
|
||||
padding: globalTokens.spacing.l,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,14 +8,14 @@ export const defaultCheckboxTokens: TokenSettings<CheckboxTokens, Theme> = (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<CheckboxTokens, Theme> = (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<CheckboxTokens, Theme> = (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);
|
||||
|
|
|
|||
|
|
@ -8,15 +8,15 @@ export const defaultCheckboxTokens: TokenSettings<CheckboxTokens, Theme> = (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<CheckboxTokens, Theme> = (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<CheckboxTokens, Theme> = (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<CheckboxTokens, Theme> = (t: T
|
|||
},
|
||||
},
|
||||
circular: {
|
||||
borderRadius: globalTokens.corner.radius.circle,
|
||||
checkboxBorderRadius: globalTokens.corner.radius.circle,
|
||||
borderRadius: globalTokens.corner.radiusCircular,
|
||||
checkboxBorderRadius: globalTokens.corner.radiusCircular,
|
||||
},
|
||||
} as CheckboxTokens);
|
||||
|
|
|
|||
|
|
@ -8,15 +8,15 @@ export const defaultCheckboxTokens: TokenSettings<CheckboxTokens, Theme> = (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<CheckboxTokens, Theme> = (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<CheckboxTokens, Theme> = (t: T
|
|||
},
|
||||
},
|
||||
circular: {
|
||||
borderRadius: globalTokens.corner.radius.circle,
|
||||
checkboxBorderRadius: globalTokens.corner.radius.circle,
|
||||
borderRadius: globalTokens.corner.radiusCircular,
|
||||
checkboxBorderRadius: globalTokens.corner.radiusCircular,
|
||||
},
|
||||
} as CheckboxTokens);
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -5,6 +5,6 @@ import { MenuDividerTokens } from './MenuDivider.types';
|
|||
|
||||
export const defaultMenuDividerTokens: TokenSettings<MenuDividerTokens, Theme> = (t: Theme): MenuDividerTokens => ({
|
||||
backgroundColor: t.colors.neutralStroke2,
|
||||
height: globalTokens.stroke.width.thin,
|
||||
height: globalTokens.stroke.width10,
|
||||
margin: globalTokens.spacing.xxs,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,6 +5,6 @@ import { MenuDividerTokens } from './MenuDivider.types';
|
|||
|
||||
export const defaultMenuDividerTokens: TokenSettings<MenuDividerTokens, Theme> = (t: Theme): MenuDividerTokens => ({
|
||||
backgroundColor: t.colors.neutralStroke2,
|
||||
height: globalTokens.stroke.width.thin,
|
||||
height: globalTokens.stroke.width10,
|
||||
marginVertical: globalTokens.spacing.xs,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,6 +5,6 @@ import { MenuDividerTokens } from './MenuDivider.types';
|
|||
|
||||
export const defaultMenuDividerTokens: TokenSettings<MenuDividerTokens, Theme> = (t: Theme): MenuDividerTokens => ({
|
||||
backgroundColor: t.colors.neutralStroke1,
|
||||
height: globalTokens.stroke.width.thin,
|
||||
height: globalTokens.stroke.width10,
|
||||
margin: globalTokens.spacing.xxs,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (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
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@ import { MenuItemTokens } from './MenuItem.types';
|
|||
|
||||
export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (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,
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@ import { MenuItemTokens } from './MenuItem.types';
|
|||
|
||||
export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (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,
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens
|
|||
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,
|
||||
paddingHorizontal: 5,
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@ import { MenuItemCheckboxTokens } from './MenuItemCheckbox.types';
|
|||
|
||||
export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens, Theme> = (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,
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@ import { MenuItemCheckboxTokens } from './MenuItemCheckbox.types';
|
|||
|
||||
export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens, Theme> = (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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ export const Text = compressible<TextProps, TextTokens>((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,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import type { OptionTokens } from './Option.types';
|
|||
|
||||
export const defaultOptionTokens: TokenSettings<OptionTokens> = (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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@ export const defaultRadioTokens: TokenSettings<RadioTokens, Theme> = (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',
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
};
|
||||
}
|
||||
|
|
@ -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,
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
};
|
||||
}
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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] },
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
50
yarn.lock
50
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"
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче