Skip to content

feat(tokens): Add colorNeutralBackgroundAlpha and colorNeutralStrokeAlpha tokens #27034

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
layershifter merged 10 commits into from
Mar 15, 2023
Merged

feat(tokens): Add colorNeutralBackgroundAlpha and colorNeutralStrokeAlpha tokens #27034

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3b04404
feat(tokens): Add colorNeutralBackgroundAlpha and colorNeutralStrokeA…
miroslavstastny Mar 2, 2023
92cd206
change files
miroslavstastny Mar 2, 2023
dbca9fa
Update migration package
miroslavstastny Mar 2, 2023
072e37c
Add colorNeutralBackgroundAlpha2
miroslavstastny Mar 2, 2023
4cd6807
chnage file
miroslavstastny Mar 2, 2023
12b8c65
fix docsite
miroslavstastny Mar 2, 2023
6710d1b
Apply suggestions from code review
miroslavstastny Mar 6, 2023
b7c9cb8
revert debugging code
miroslavstastny Mar 6, 2023
8ca3188
Merge branch 'master' into feat/theme-tokens
layershifter Mar 14, 2023
3ae2cb4
Merge branch 'master' into feat/theme-tokens
layershifter Mar 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions apps/public-docsite-v9/src/shims/ThemeShim/themeDuplicates.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,32 @@ export const blackAlpha: Record<AlphaColors, string> = {
'90': 'rgba(0, 0, 0, 0.9)',
};

export const grey10Alpha: Record<AlphaColors, string> = {
'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<AlphaColors, string> = {
'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<AlphaColors, string> = {
'5': 'rgba(36, 36, 36, 0.05)',
'10': 'rgba(36, 36, 36, 0.1)',
Expand Down
5 changes: 4 additions & 1 deletion apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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)',
Expand Down
7 changes: 7 additions & 0 deletions change/@fluentui-react-migration-v8-v9-daf3e7a9-933f-46b2-8b57-d229db417da9.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "minor",
"comment": "feat: Add colorNeutralBackgroundAlpha and colorNeutralStrokeAlpha tokens",
"packageName": "@fluentui/react-migration-v8-v9",
"email": "[email protected]",
"dependentChangeType": "patch"
}
7 changes: 7 additions & 0 deletions change/@fluentui-react-theme-sass-4bdf2baf-feb1-440f-8668-e0dbfe237205.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "feat(tokens): Add colorNeutralBackgroundAlpha and colorNeutralStrokeAlpha tokens",
"packageName": "@fluentui/react-theme-sass",
"email": "[email protected]",
"dependentChangeType": "patch"
}
7 changes: 7 additions & 0 deletions change/@fluentui-tokens-86792b1a-5f16-4f70-b208-7a2d6f471f33.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "feat(tokens): Add colorNeutralBackgroundAlpha and colorNeutralStrokeAlpha tokens",
"packageName": "@fluentui/tokens",
"email": "[email protected]",
"dependentChangeType": "patch"
}
26 changes: 26 additions & 0 deletions packages/react-components/react-migration-v8-v9/src/components/Theme/themeDuplicates.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,32 @@ export const blackAlpha: Record<AlphaColors, string> = {
'90': 'rgba(0, 0, 0, 0.9)',
};

export const grey10Alpha: Record<AlphaColors, string> = {
'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<AlphaColors, string> = {
'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<AlphaColors, string> = {
'5': 'rgba(36, 36, 36, 0.05)',
'10': 'rgba(36, 36, 36, 0.1)',
Expand Down
5 changes: 4 additions & 1 deletion packages/react-components/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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)',
Expand Down
5 changes: 4 additions & 1 deletion packages/react-components/react-theme-sass/sass/colorTokens.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down
5 changes: 4 additions & 1 deletion packages/tokens/etc/tokens.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -267,6 +269,7 @@ export type ColorTokens = {
colorTransparentStroke: string;
colorTransparentStrokeInteractive: string;
colorTransparentStrokeDisabled: string;
colorNeutralStrokeAlpha: string;
colorStrokeFocus1: string;
colorStrokeFocus2: string;
colorNeutralShadowAmbient: string;
Expand Down
5 changes: 4 additions & 1 deletion packages/tokens/src/alias/darkColor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 => ({
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
3 changes: 3 additions & 0 deletions packages/tokens/src/alias/highContrastColor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
3 changes: 3 additions & 0 deletions packages/tokens/src/alias/lightColor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
5 changes: 4 additions & 1 deletion packages/tokens/src/alias/teamsDarkColor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 => ({
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
28 changes: 26 additions & 2 deletions packages/tokens/src/global/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
import type { ColorVariants, Greys, AlphaColors } from '../types';

export const grey: Record<Greys, string> = {
'0': '#000000',
'2': '#050505',
'4': '#0a0a0a',
'6': '#0f0f0f',
Expand Down Expand Up @@ -54,7 +53,6 @@ export const grey: Record<Greys, string> = {
'94': '#f0f0f0',
'96': '#f5f5f5',
'98': '#fafafa',
'100': '#ffffff',
};

export const whiteAlpha: Record<AlphaColors, string> = {
Expand Down Expand Up @@ -83,6 +81,32 @@ export const blackAlpha: Record<AlphaColors, string> = {
'90': 'rgba(0, 0, 0, 0.9)',
};

export const grey10Alpha: Record<AlphaColors, string> = {
'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<AlphaColors, string> = {
'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<AlphaColors, string> = {
'5': 'rgba(36, 36, 36, 0.05)',
'10': 'rgba(36, 36, 36, 0.1)',
Expand Down
5 changes: 4 additions & 1 deletion packages/tokens/src/tokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,10 @@ export const tokens: Record<keyof Theme, string> = {
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)',
Expand Down Expand Up @@ -139,6 +141,7 @@ export const tokens: Record<keyof Theme, string> = {
colorTransparentStroke: 'var(--colorTransparentStroke)',
colorTransparentStrokeInteractive: 'var(--colorTransparentStrokeInteractive)',
colorTransparentStrokeDisabled: 'var(--colorTransparentStrokeDisabled)',
colorNeutralStrokeAlpha: 'var(--colorNeutralStrokeAlpha)',
colorStrokeFocus1: 'var(--colorStrokeFocus1)',
colorStrokeFocus2: 'var(--colorStrokeFocus2)',
colorNeutralShadowAmbient: 'var(--colorNeutralShadowAmbient)',
Expand Down
9 changes: 5 additions & 4 deletions packages/tokens/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -141,6 +143,7 @@ export type ColorTokens = {
colorTransparentStroke: string;
colorTransparentStrokeInteractive: string;
colorTransparentStrokeDisabled: string;
colorNeutralStrokeAlpha: string;
colorStrokeFocus1: string;
colorStrokeFocus2: string;
colorNeutralShadowAmbient: string;
Expand Down Expand Up @@ -638,7 +641,6 @@ export type ShadowBrandTokens = {
};

export type Greys =
| 0
| 2
| 4
| 6
Expand Down Expand Up @@ -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;

Expand Down