diff --git a/apps/public-docsite-v9/src/shims/ThemeShim/themeDuplicates.ts b/apps/public-docsite-v9/src/shims/ThemeShim/themeDuplicates.ts index 4f0c1bbff6c93..e84e21ea6ccbe 100644 --- a/apps/public-docsite-v9/src/shims/ThemeShim/themeDuplicates.ts +++ b/apps/public-docsite-v9/src/shims/ThemeShim/themeDuplicates.ts @@ -233,6 +233,32 @@ export const blackAlpha: Record = { '90': 'rgba(0, 0, 0, 0.9)', }; +export const grey10Alpha: Record = { + '5': 'rgba(26, 26, 26, 0.05)', + '10': 'rgba(26, 26, 26, 0.1)', + '20': 'rgba(26, 26, 26, 0.2)', + '30': 'rgba(26, 26, 26, 0.3)', + '40': 'rgba(26, 26, 26, 0.4)', + '50': 'rgba(26, 26, 26, 0.5)', + '60': 'rgba(26, 26, 26, 0.6)', + '70': 'rgba(26, 26, 26, 0.7)', + '80': 'rgba(26, 26, 26, 0.8)', + '90': 'rgba(26, 26, 26, 0.9)', +}; + +export const grey12Alpha: Record = { + '5': 'rgba(31, 31, 31, 0.05)', + '10': 'rgba(31, 31, 31, 0.1)', + '20': 'rgba(31, 31, 31, 0.2)', + '30': 'rgba(31, 31, 31, 0.3)', + '40': 'rgba(31, 31, 31, 0.4)', + '50': 'rgba(31, 31, 31, 0.5)', + '60': 'rgba(31, 31, 31, 0.6)', + '70': 'rgba(31, 31, 31, 0.7)', + '80': 'rgba(31, 31, 31, 0.8)', + '90': 'rgba(31, 31, 31, 0.9)', +}; + export const grey14Alpha: Record = { '5': 'rgba(36, 36, 36, 0.05)', '10': 'rgba(36, 36, 36, 0.1)', diff --git a/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts b/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts index aa08398dd7b68..554cd05a74ce2 100644 --- a/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts +++ b/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts @@ -6,7 +6,7 @@ import { Theme as ThemeV9, webLightTheme, } from '@fluentui/react-components'; -import { blackAlpha, whiteAlpha, grey } from './themeDuplicates'; +import { blackAlpha, whiteAlpha, grey, grey10Alpha, grey12Alpha } from './themeDuplicates'; /** * Creates v9 color tokens from a v8 palette. @@ -89,6 +89,8 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => { colorNeutralBackground6: palette.neutralLight, colorNeutralBackgroundStatic: grey[20], colorNeutralBackgroundInverted: palette.neutralSecondary, + colorNeutralBackgroundAlpha: inverted ? grey10Alpha[50] : whiteAlpha[50], + colorNeutralBackgroundAlpha2: inverted ? grey12Alpha[70] : whiteAlpha[80], colorSubtleBackground: 'transparent', colorSubtleBackgroundHover: palette.neutralLighter, colorSubtleBackgroundPressed: palette.neutralQuaternaryAlt, @@ -150,6 +152,7 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => { colorTransparentStroke: 'transparent', colorTransparentStrokeInteractive: 'transparent', colorTransparentStrokeDisabled: 'transparent', + colorNeutralStrokeAlpha: inverted ? whiteAlpha[10] : blackAlpha[5], colorStrokeFocus1: palette.white, colorStrokeFocus2: palette.black, colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)', diff --git a/change/@fluentui-react-migration-v8-v9-daf3e7a9-933f-46b2-8b57-d229db417da9.json b/change/@fluentui-react-migration-v8-v9-daf3e7a9-933f-46b2-8b57-d229db417da9.json new file mode 100644 index 0000000000000..44cef110c43c7 --- /dev/null +++ b/change/@fluentui-react-migration-v8-v9-daf3e7a9-933f-46b2-8b57-d229db417da9.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Add colorNeutralBackgroundAlpha and colorNeutralStrokeAlpha tokens", + "packageName": "@fluentui/react-migration-v8-v9", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-theme-sass-4bdf2baf-feb1-440f-8668-e0dbfe237205.json b/change/@fluentui-react-theme-sass-4bdf2baf-feb1-440f-8668-e0dbfe237205.json new file mode 100644 index 0000000000000..da2f1b77d930f --- /dev/null +++ b/change/@fluentui-react-theme-sass-4bdf2baf-feb1-440f-8668-e0dbfe237205.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "feat(tokens): Add colorNeutralBackgroundAlpha and colorNeutralStrokeAlpha tokens", + "packageName": "@fluentui/react-theme-sass", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-tokens-86792b1a-5f16-4f70-b208-7a2d6f471f33.json b/change/@fluentui-tokens-86792b1a-5f16-4f70-b208-7a2d6f471f33.json new file mode 100644 index 0000000000000..febb5002d83fc --- /dev/null +++ b/change/@fluentui-tokens-86792b1a-5f16-4f70-b208-7a2d6f471f33.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "feat(tokens): Add colorNeutralBackgroundAlpha and colorNeutralStrokeAlpha tokens", + "packageName": "@fluentui/tokens", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-migration-v8-v9/src/components/Theme/themeDuplicates.ts b/packages/react-components/react-migration-v8-v9/src/components/Theme/themeDuplicates.ts index 7b9a0eb9078b9..f3dadf866783d 100644 --- a/packages/react-components/react-migration-v8-v9/src/components/Theme/themeDuplicates.ts +++ b/packages/react-components/react-migration-v8-v9/src/components/Theme/themeDuplicates.ts @@ -233,6 +233,32 @@ export const blackAlpha: Record = { '90': 'rgba(0, 0, 0, 0.9)', }; +export const grey10Alpha: Record = { + '5': 'rgba(26, 26, 26, 0.05)', + '10': 'rgba(26, 26, 26, 0.1)', + '20': 'rgba(26, 26, 26, 0.2)', + '30': 'rgba(26, 26, 26, 0.3)', + '40': 'rgba(26, 26, 26, 0.4)', + '50': 'rgba(26, 26, 26, 0.5)', + '60': 'rgba(26, 26, 26, 0.6)', + '70': 'rgba(26, 26, 26, 0.7)', + '80': 'rgba(26, 26, 26, 0.8)', + '90': 'rgba(26, 26, 26, 0.9)', +}; + +export const grey12Alpha: Record = { + '5': 'rgba(31, 31, 31, 0.05)', + '10': 'rgba(31, 31, 31, 0.1)', + '20': 'rgba(31, 31, 31, 0.2)', + '30': 'rgba(31, 31, 31, 0.3)', + '40': 'rgba(31, 31, 31, 0.4)', + '50': 'rgba(31, 31, 31, 0.5)', + '60': 'rgba(31, 31, 31, 0.6)', + '70': 'rgba(31, 31, 31, 0.7)', + '80': 'rgba(31, 31, 31, 0.8)', + '90': 'rgba(31, 31, 31, 0.9)', +}; + export const grey14Alpha: Record = { '5': 'rgba(36, 36, 36, 0.05)', '10': 'rgba(36, 36, 36, 0.1)', diff --git a/packages/react-components/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts b/packages/react-components/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts index c9295228ab2a6..3dce2645be911 100644 --- a/packages/react-components/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts +++ b/packages/react-components/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts @@ -2,7 +2,7 @@ import { Theme as ThemeV8 } from '@fluentui/react'; import type { IEffects, IPalette } from '@fluentui/react'; import { Theme as ThemeV9, webLightTheme } from '@fluentui/react-components'; import type { BorderRadiusTokens, ColorTokens, ShadowTokens } from '@fluentui/react-components'; -import { blackAlpha, whiteAlpha, grey } from './themeDuplicates'; +import { blackAlpha, whiteAlpha, grey, grey10Alpha, grey12Alpha } from './themeDuplicates'; /** * Creates v9 color tokens from a v8 palette. @@ -85,6 +85,8 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => { colorNeutralBackground6: palette.neutralLight, colorNeutralBackgroundStatic: grey[20], colorNeutralBackgroundInverted: palette.neutralSecondary, + colorNeutralBackgroundAlpha: inverted ? grey10Alpha[50] : whiteAlpha[50], + colorNeutralBackgroundAlpha2: inverted ? grey12Alpha[70] : whiteAlpha[80], colorSubtleBackground: 'transparent', colorSubtleBackgroundHover: palette.neutralLighter, colorSubtleBackgroundPressed: palette.neutralQuaternaryAlt, @@ -146,6 +148,7 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => { colorTransparentStroke: 'transparent', colorTransparentStrokeInteractive: 'transparent', colorTransparentStrokeDisabled: 'transparent', + colorNeutralStrokeAlpha: inverted ? whiteAlpha[10] : blackAlpha[5], colorStrokeFocus1: palette.white, colorStrokeFocus2: palette.black, colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)', diff --git a/packages/react-components/react-theme-sass/sass/colorTokens.scss b/packages/react-components/react-theme-sass/sass/colorTokens.scss index 42aa5e28edadf..7072ecb9ffa66 100644 --- a/packages/react-components/react-theme-sass/sass/colorTokens.scss +++ b/packages/react-components/react-theme-sass/sass/colorTokens.scss @@ -72,8 +72,10 @@ $colorNeutralBackground5Hover: var(--colorNeutralBackground5Hover); $colorNeutralBackground5Pressed: var(--colorNeutralBackground5Pressed); $colorNeutralBackground5Selected: var(--colorNeutralBackground5Selected); $colorNeutralBackground6: var(--colorNeutralBackground6); -$colorNeutralBackgroundStatic: var(--colorNeutralBackgroundStatic); $colorNeutralBackgroundInverted: var(--colorNeutralBackgroundInverted); +$colorNeutralBackgroundStatic: var(--colorNeutralBackgroundStatic); +$colorNeutralBackgroundAlpha: var(--colorNeutralBackgroundAlpha); +$colorNeutralBackgroundAlpha2: var(--colorNeutralBackgroundAlpha2); $colorSubtleBackground: var(--colorSubtleBackground); $colorSubtleBackgroundHover: var(--colorSubtleBackgroundHover); $colorSubtleBackgroundPressed: var(--colorSubtleBackgroundPressed); @@ -135,6 +137,7 @@ $colorNeutralStrokeInvertedDisabled: var(--colorNeutralStrokeInvertedDisabled); $colorTransparentStroke: var(--colorTransparentStroke); $colorTransparentStrokeInteractive: var(--colorTransparentStrokeInteractive); $colorTransparentStrokeDisabled: var(--colorTransparentStrokeDisabled); +$colorNeutralStrokeAlpha: var(--colorNeutralStrokeAlpha); $colorStrokeFocus1: var(--colorStrokeFocus1); $colorStrokeFocus2: var(--colorStrokeFocus2); $colorNeutralShadowAmbient: var(--colorNeutralShadowAmbient); diff --git a/packages/tokens/etc/tokens.api.md b/packages/tokens/etc/tokens.api.md index 50ea8ca3e2df5..35035b9c21f26 100644 --- a/packages/tokens/etc/tokens.api.md +++ b/packages/tokens/etc/tokens.api.md @@ -204,8 +204,10 @@ export type ColorTokens = { colorNeutralBackground5Pressed: string; colorNeutralBackground5Selected: string; colorNeutralBackground6: string; - colorNeutralBackgroundStatic: string; colorNeutralBackgroundInverted: string; + colorNeutralBackgroundStatic: string; + colorNeutralBackgroundAlpha: string; + colorNeutralBackgroundAlpha2: string; colorSubtleBackground: string; colorSubtleBackgroundHover: string; colorSubtleBackgroundPressed: string; @@ -267,6 +269,7 @@ export type ColorTokens = { colorTransparentStroke: string; colorTransparentStrokeInteractive: string; colorTransparentStrokeDisabled: string; + colorNeutralStrokeAlpha: string; colorStrokeFocus1: string; colorStrokeFocus2: string; colorNeutralShadowAmbient: string; diff --git a/packages/tokens/src/alias/darkColor.ts b/packages/tokens/src/alias/darkColor.ts index 83ed8b672398a..db18339eeef36 100644 --- a/packages/tokens/src/alias/darkColor.ts +++ b/packages/tokens/src/alias/darkColor.ts @@ -1,7 +1,7 @@ /* !!! DO NOT EDIT !!! */ /* This file has been generated by the token pipeline */ -import { black, blackAlpha, grey, grey14Alpha, white, whiteAlpha } from '../global/colors'; +import { black, blackAlpha, grey, grey10Alpha, grey12Alpha, grey14Alpha, white, whiteAlpha } from '../global/colors'; import type { BrandVariants, ColorTokens } from '../types'; export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ @@ -81,6 +81,8 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorNeutralBackground6: grey[20], // #333333 Global.Color.Grey.20 colorNeutralBackgroundInverted: white, // #ffffff Global.Color.White colorNeutralBackgroundStatic: grey[24], // #3d3d3d Global.Color.Grey.24 + colorNeutralBackgroundAlpha: grey10Alpha[50], // rgba(26, 26, 26, 0.5) Global.Color.Grey10Alpha.50 + colorNeutralBackgroundAlpha2: grey12Alpha[70], // rgba(31, 31, 31, 0.7) Global.Color.Grey12Alpha.70 colorSubtleBackground: 'transparent', // transparent undefined colorSubtleBackgroundHover: grey[22], // #383838 Global.Color.Grey.22 colorSubtleBackgroundPressed: grey[18], // #2e2e2e Global.Color.Grey.18 @@ -142,6 +144,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorTransparentStroke: 'transparent', // transparent undefined colorTransparentStrokeInteractive: 'transparent', // transparent undefined colorTransparentStrokeDisabled: 'transparent', // transparent undefined + colorNeutralStrokeAlpha: whiteAlpha[10], // rgba(255, 255, 255, 0.1) Global.Color.WhiteAlpha.10 colorStrokeFocus1: black, // #000000 Global.Color.Black colorStrokeFocus2: white, // #ffffff Global.Color.White colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)', // rgba(0,0,0,0.24) undefined diff --git a/packages/tokens/src/alias/highContrastColor.ts b/packages/tokens/src/alias/highContrastColor.ts index 9e095d05c530c..3314730506e29 100644 --- a/packages/tokens/src/alias/highContrastColor.ts +++ b/packages/tokens/src/alias/highContrastColor.ts @@ -91,6 +91,8 @@ export const generateColorTokens = (): ColorTokens => ({ colorNeutralBackground6: hcCanvas, // Canvas Global.Color.hcCanvas colorNeutralBackgroundInverted: hcCanvas, // Canvas Global.Color.hcCanvas colorNeutralBackgroundStatic: hcCanvas, // Canvas Global.Color.hcCanvas + colorNeutralBackgroundAlpha: hcCanvas, // Canvas Global.Color.hcCanvas + colorNeutralBackgroundAlpha2: hcCanvas, // Canvas Global.Color.hcCanvas colorSubtleBackground: 'transparent', // transparent undefined colorSubtleBackgroundHover: hcHighlight, // Highlight Global.Color.hcHighlight colorSubtleBackgroundPressed: hcHighlight, // Highlight Global.Color.hcHighlight @@ -152,6 +154,7 @@ export const generateColorTokens = (): ColorTokens => ({ colorTransparentStroke: hcCanvasText, // CanvasText Global.Color.hcCanvasText colorTransparentStrokeInteractive: hcHighlight, // Highlight Global.Color.hcHighlight colorTransparentStrokeDisabled: hcDisabled, // GrayText Global.Color.hcDisabled + colorNeutralStrokeAlpha: hcCanvasText, // CanvasText Global.Color.hcCanvasText colorStrokeFocus1: hcCanvas, // Canvas Global.Color.hcCanvas colorStrokeFocus2: hcHighlight, // Highlight Global.Color.hcHighlight colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)', // rgba(0,0,0,0.24) undefined diff --git a/packages/tokens/src/alias/lightColor.ts b/packages/tokens/src/alias/lightColor.ts index 70fcf99deb673..a638bd7fa1723 100644 --- a/packages/tokens/src/alias/lightColor.ts +++ b/packages/tokens/src/alias/lightColor.ts @@ -81,6 +81,8 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorNeutralBackground6: grey[90], // #e6e6e6 Global.Color.Grey.90 colorNeutralBackgroundInverted: grey[16], // #292929 Global.Color.Grey.16 colorNeutralBackgroundStatic: grey[20], // #333333 Global.Color.Grey.20 + colorNeutralBackgroundAlpha: whiteAlpha[50], // rgba(255, 255, 255, 0.5) Global.Color.WhiteAlpha.50 + colorNeutralBackgroundAlpha2: whiteAlpha[80], // rgba(255, 255, 255, 0.8) Global.Color.WhiteAlpha.80 colorSubtleBackground: 'transparent', // transparent undefined colorSubtleBackgroundHover: grey[96], // #f5f5f5 Global.Color.Grey.96 colorSubtleBackgroundPressed: grey[88], // #e0e0e0 Global.Color.Grey.88 @@ -142,6 +144,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorTransparentStroke: 'transparent', // transparent undefined colorTransparentStrokeInteractive: 'transparent', // transparent undefined colorTransparentStrokeDisabled: 'transparent', // transparent undefined + colorNeutralStrokeAlpha: blackAlpha[5], // rgba(0, 0, 0, 0.05) Global.Color.BlackAlpha.5 colorStrokeFocus1: white, // #ffffff Global.Color.White colorStrokeFocus2: black, // #000000 Global.Color.Black colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)', // rgba(0,0,0,0.12) undefined diff --git a/packages/tokens/src/alias/teamsDarkColor.ts b/packages/tokens/src/alias/teamsDarkColor.ts index 521e4bef89ca4..bf1b30e9e23ae 100644 --- a/packages/tokens/src/alias/teamsDarkColor.ts +++ b/packages/tokens/src/alias/teamsDarkColor.ts @@ -1,7 +1,7 @@ /* !!! DO NOT EDIT !!! */ /* This file has been generated by the token pipeline */ -import { black, blackAlpha, grey, grey14Alpha, white, whiteAlpha } from '../global/colors'; +import { black, blackAlpha, grey, grey10Alpha, grey12Alpha, grey14Alpha, white, whiteAlpha } from '../global/colors'; import type { BrandVariants, ColorTokens } from '../types'; export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ @@ -81,6 +81,8 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorNeutralBackground6: grey[20], // #333333 Global.Color.Grey.20 colorNeutralBackgroundInverted: white, // #ffffff Global.Color.White colorNeutralBackgroundStatic: grey[24], // #3d3d3d Global.Color.Grey.24 + colorNeutralBackgroundAlpha: grey10Alpha[50], // rgba(26, 26, 26, 0.5) Global.Color.Grey10Alpha.50 + colorNeutralBackgroundAlpha2: grey12Alpha[70], // rgba(31, 31, 31, 0.7) Global.Color.Grey12Alpha.70 colorSubtleBackground: 'transparent', // transparent undefined colorSubtleBackgroundHover: grey[22], // #383838 Global.Color.Grey.22 colorSubtleBackgroundPressed: grey[18], // #2e2e2e Global.Color.Grey.18 @@ -142,6 +144,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorTransparentStroke: 'transparent', // transparent undefined colorTransparentStrokeInteractive: 'transparent', // transparent undefined colorTransparentStrokeDisabled: 'transparent', // transparent undefined + colorNeutralStrokeAlpha: whiteAlpha[10], // rgba(255, 255, 255, 0.1) Global.Color.WhiteAlpha.10 colorStrokeFocus1: black, // #000000 Global.Color.Black colorStrokeFocus2: white, // #ffffff Global.Color.White colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)', // rgba(0,0,0,0.24) undefined diff --git a/packages/tokens/src/global/colors.ts b/packages/tokens/src/global/colors.ts index bc333c602c3b4..62229ac5d8123 100644 --- a/packages/tokens/src/global/colors.ts +++ b/packages/tokens/src/global/colors.ts @@ -4,7 +4,6 @@ import type { ColorVariants, Greys, AlphaColors } from '../types'; export const grey: Record = { - '0': '#000000', '2': '#050505', '4': '#0a0a0a', '6': '#0f0f0f', @@ -54,7 +53,6 @@ export const grey: Record = { '94': '#f0f0f0', '96': '#f5f5f5', '98': '#fafafa', - '100': '#ffffff', }; export const whiteAlpha: Record = { @@ -83,6 +81,32 @@ export const blackAlpha: Record = { '90': 'rgba(0, 0, 0, 0.9)', }; +export const grey10Alpha: Record = { + '5': 'rgba(26, 26, 26, 0.05)', + '10': 'rgba(26, 26, 26, 0.1)', + '20': 'rgba(26, 26, 26, 0.2)', + '30': 'rgba(26, 26, 26, 0.3)', + '40': 'rgba(26, 26, 26, 0.4)', + '50': 'rgba(26, 26, 26, 0.5)', + '60': 'rgba(26, 26, 26, 0.6)', + '70': 'rgba(26, 26, 26, 0.7)', + '80': 'rgba(26, 26, 26, 0.8)', + '90': 'rgba(26, 26, 26, 0.9)', +}; + +export const grey12Alpha: Record = { + '5': 'rgba(31, 31, 31, 0.05)', + '10': 'rgba(31, 31, 31, 0.1)', + '20': 'rgba(31, 31, 31, 0.2)', + '30': 'rgba(31, 31, 31, 0.3)', + '40': 'rgba(31, 31, 31, 0.4)', + '50': 'rgba(31, 31, 31, 0.5)', + '60': 'rgba(31, 31, 31, 0.6)', + '70': 'rgba(31, 31, 31, 0.7)', + '80': 'rgba(31, 31, 31, 0.8)', + '90': 'rgba(31, 31, 31, 0.9)', +}; + export const grey14Alpha: Record = { '5': 'rgba(36, 36, 36, 0.05)', '10': 'rgba(36, 36, 36, 0.1)', diff --git a/packages/tokens/src/tokens.ts b/packages/tokens/src/tokens.ts index a2cbb1a0c0bbf..20115b8d4d85c 100644 --- a/packages/tokens/src/tokens.ts +++ b/packages/tokens/src/tokens.ts @@ -76,8 +76,10 @@ export const tokens: Record = { colorNeutralBackground5Pressed: 'var(--colorNeutralBackground5Pressed)', colorNeutralBackground5Selected: 'var(--colorNeutralBackground5Selected)', colorNeutralBackground6: 'var(--colorNeutralBackground6)', - colorNeutralBackgroundStatic: 'var(--colorNeutralBackgroundStatic)', colorNeutralBackgroundInverted: 'var(--colorNeutralBackgroundInverted)', + colorNeutralBackgroundStatic: 'var(--colorNeutralBackgroundStatic)', + colorNeutralBackgroundAlpha: 'var(--colorNeutralBackgroundAlpha)', + colorNeutralBackgroundAlpha2: 'var(--colorNeutralBackgroundAlpha2)', colorSubtleBackground: 'var(--colorSubtleBackground)', colorSubtleBackgroundHover: 'var(--colorSubtleBackgroundHover)', colorSubtleBackgroundPressed: 'var(--colorSubtleBackgroundPressed)', @@ -139,6 +141,7 @@ export const tokens: Record = { colorTransparentStroke: 'var(--colorTransparentStroke)', colorTransparentStrokeInteractive: 'var(--colorTransparentStrokeInteractive)', colorTransparentStrokeDisabled: 'var(--colorTransparentStrokeDisabled)', + colorNeutralStrokeAlpha: 'var(--colorNeutralStrokeAlpha)', colorStrokeFocus1: 'var(--colorStrokeFocus1)', colorStrokeFocus2: 'var(--colorStrokeFocus2)', colorNeutralShadowAmbient: 'var(--colorNeutralShadowAmbient)', diff --git a/packages/tokens/src/types.ts b/packages/tokens/src/types.ts index a96d6c379ca1e..7f5ee40270aeb 100644 --- a/packages/tokens/src/types.ts +++ b/packages/tokens/src/types.ts @@ -78,8 +78,10 @@ export type ColorTokens = { colorNeutralBackground5Pressed: string; colorNeutralBackground5Selected: string; colorNeutralBackground6: string; - colorNeutralBackgroundStatic: string; colorNeutralBackgroundInverted: string; + colorNeutralBackgroundStatic: string; + colorNeutralBackgroundAlpha: string; + colorNeutralBackgroundAlpha2: string; colorSubtleBackground: string; colorSubtleBackgroundHover: string; colorSubtleBackgroundPressed: string; @@ -141,6 +143,7 @@ export type ColorTokens = { colorTransparentStroke: string; colorTransparentStrokeInteractive: string; colorTransparentStrokeDisabled: string; + colorNeutralStrokeAlpha: string; colorStrokeFocus1: string; colorStrokeFocus2: string; colorNeutralShadowAmbient: string; @@ -638,7 +641,6 @@ export type ShadowBrandTokens = { }; export type Greys = - | 0 | 2 | 4 | 6 @@ -687,8 +689,7 @@ export type Greys = | 92 | 94 | 96 - | 98 - | 100; + | 98; export type AlphaColors = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;