feat(tokens): Add/update theme tokens

apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/colorMap.ts

@@ -135,6 +135,8 @@ export const alias = {
   colorCompoundBrandForeground1Pressed: 'brand[60]',
   colorBrandForeground1: 'brand[80]',
   colorBrandForeground2: 'brand[70]',
+  colorBrandForeground2Hover: 'brand[60]',
+  colorBrandForeground2Pressed: 'brand[30]',
   colorNeutralForeground1Static: 'grey[14]',
   colorNeutralForegroundInverted: 'white',
   colorNeutralForegroundInvertedHover: 'white',
@@ -204,6 +206,8 @@ export const alias = {
   colorCompoundBrandBackgroundPressed: 'brand[60]',
   colorBrandBackgroundStatic: 'brand[80]',
   colorBrandBackground2: 'brand[160]',
+  colorBrandBackground2Hover: 'brand[150]',
+  colorBrandBackground2Pressed: 'brand[130]',
   colorBrandBackgroundInverted: 'white',
   colorBrandBackgroundInvertedHover: 'brand[160]',
   colorBrandBackgroundInvertedPressed: 'brand[140]',
@@ -218,13 +222,16 @@ export const alias = {
   colorNeutralStroke1Selected: 'grey[74]',
   colorNeutralStroke2: 'grey[88]',
   colorNeutralStroke3: 'grey[94]',
+  colorNeutralStrokeSubtle: 'grey[88]',
   colorNeutralStrokeOnBrand: 'white',
   colorNeutralStrokeOnBrand2: 'white',
   colorNeutralStrokeOnBrand2Hover: 'white',
   colorNeutralStrokeOnBrand2Pressed: 'white',
   colorNeutralStrokeOnBrand2Selected: 'white',
   colorBrandStroke1: 'brand[80]',
   colorBrandStroke2: 'brand[140]',
+  colorBrandStroke2Hover: 'brand[120]',
+  colorBrandStroke2Pressed: 'brand[80]',
   colorCompoundBrandStroke: 'brand[80]',
   colorCompoundBrandStrokeHover: 'brand[70]',
   colorCompoundBrandStrokePressed: 'brand[60]',

apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts

@@ -47,6 +47,8 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => {
     colorCompoundBrandForeground1Pressed: palette.themeDark,
     colorBrandForeground1: palette.themePrimary,
     colorBrandForeground2: palette.themeDarkAlt,
+    colorBrandForeground2Hover: palette.themeDarkAlt,
+    colorBrandForeground2Pressed: palette.themeDarkAlt,
     colorNeutralForeground1Static: palette.neutralPrimary,
     colorNeutralForegroundInverted: palette.white,
     colorNeutralForegroundInvertedHover: palette.white,
@@ -123,6 +125,8 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => {
     colorCompoundBrandBackgroundPressed: palette.themeDark,
     colorBrandBackgroundStatic: palette.themePrimary,
     colorBrandBackground2: palette.themeLighterAlt,
+    colorBrandBackground2Hover: palette.themeLighterAlt,
+    colorBrandBackground2Pressed: palette.themeLighterAlt,
     colorBrandBackgroundInverted: palette.white,
     colorBrandBackgroundInvertedHover: palette.themeLighterAlt,
     colorBrandBackgroundInvertedPressed: palette.themeLight,
@@ -137,13 +141,16 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => {
     colorNeutralStroke1Selected: palette.neutralTertiaryAlt,
     colorNeutralStroke2: palette.neutralQuaternaryAlt,
     colorNeutralStroke3: palette.neutralLighter,
+    colorNeutralStrokeSubtle: palette.neutralQuaternaryAlt,
     colorNeutralStrokeOnBrand: palette.white,
     colorNeutralStrokeOnBrand2: palette.white,
     colorNeutralStrokeOnBrand2Hover: palette.white,
     colorNeutralStrokeOnBrand2Pressed: palette.white,
     colorNeutralStrokeOnBrand2Selected: palette.white,
     colorBrandStroke1: palette.themePrimary,
     colorBrandStroke2: palette.themeLight,
+    colorBrandStroke2Hover: palette.themeLight,
+    colorBrandStroke2Pressed: palette.themeLight,
     colorCompoundBrandStroke: palette.themePrimary,
     colorCompoundBrandStrokeHover: palette.themeDarkAlt,
     colorCompoundBrandStrokePressed: palette.themeDark,

change/@fluentui-react-migration-v8-v9-8f5aa54e-09af-40d7-8d1b-48b603d3ca88.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add/update theme tokens",
+  "packageName": "@fluentui/react-migration-v8-v9",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-table-01d8f535-459b-49ce-98da-dfe35961923c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Update table styles to reflect token changes",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-theme-sass-906c4792-b060-4628-b52f-8f27a864d8e1.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add theme tokens",
+  "packageName": "@fluentui/react-theme-sass",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-tokens-19f04d6b-7899-48d5-81a4-2c81b15d4d1f.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add/update theme tokens",
+  "packageName": "@fluentui/tokens",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts

@@ -43,6 +43,8 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => {
     colorCompoundBrandForeground1Pressed: palette.themeDark,
     colorBrandForeground1: palette.themePrimary,
     colorBrandForeground2: palette.themeDarkAlt,
+    colorBrandForeground2Hover: palette.themeDarkAlt,
+    colorBrandForeground2Pressed: palette.themeDarkAlt,
     colorNeutralForeground1Static: palette.neutralPrimary,
     colorNeutralForegroundInverted: palette.white,
     colorNeutralForegroundInvertedHover: palette.white,
@@ -119,6 +121,8 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => {
     colorCompoundBrandBackgroundPressed: palette.themeDark,
     colorBrandBackgroundStatic: palette.themePrimary,
     colorBrandBackground2: palette.themeLighterAlt,
+    colorBrandBackground2Hover: palette.themeLighterAlt,
+    colorBrandBackground2Pressed: palette.themeLighterAlt,
     colorBrandBackgroundInverted: palette.white,
     colorBrandBackgroundInvertedHover: palette.themeLighterAlt,
     colorBrandBackgroundInvertedPressed: palette.themeLight,
@@ -133,13 +137,16 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => {
     colorNeutralStroke1Selected: palette.neutralTertiaryAlt,
     colorNeutralStroke2: palette.neutralQuaternaryAlt,
     colorNeutralStroke3: palette.neutralLighter,
+    colorNeutralStrokeSubtle: palette.neutralQuaternaryAlt,
     colorNeutralStrokeOnBrand: palette.white,
     colorNeutralStrokeOnBrand2: palette.white,
     colorNeutralStrokeOnBrand2Hover: palette.white,
     colorNeutralStrokeOnBrand2Pressed: palette.white,
     colorNeutralStrokeOnBrand2Selected: palette.white,
     colorBrandStroke1: palette.themePrimary,
     colorBrandStroke2: palette.themeLight,
+    colorBrandStroke2Hover: palette.themeLight,
+    colorBrandStroke2Pressed: palette.themeLight,
     colorCompoundBrandStroke: palette.themePrimary,
     colorCompoundBrandStrokeHover: palette.themeDarkAlt,
     colorCompoundBrandStrokePressed: palette.themeDark,

packages/react-components/react-table/src/components/TableRow/useTableRowStyles.styles.ts

@@ -100,11 +100,7 @@ const useStyles = makeStyles({
 
   brand: {
     backgroundColor: tokens.colorBrandBackground2,
-    color: tokens.colorNeutralForeground1Hover,
-    ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),
-    ':hover': {
-      backgroundColor: tokens.colorBrandBackground2,
-    },
+    ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),
     ':active': {
       backgroundColor: tokens.colorBrandBackgroundInvertedSelected,
     },

packages/react-components/react-theme-sass/sass/colorTokens.scss

@@ -32,6 +32,8 @@ $colorCompoundBrandForeground1Hover: var(--colorCompoundBrandForeground1Hover);
 $colorCompoundBrandForeground1Pressed: var(--colorCompoundBrandForeground1Pressed);
 $colorBrandForeground1: var(--colorBrandForeground1);
 $colorBrandForeground2: var(--colorBrandForeground2);
+$colorBrandForeground2Hover: var(--colorBrandForeground2Hover);
+$colorBrandForeground2Pressed: var(--colorBrandForeground2Pressed);
 $colorNeutralForeground1Static: var(--colorNeutralForeground1Static);
 $colorNeutralForegroundInverted: var(--colorNeutralForegroundInverted);
 $colorNeutralForegroundInvertedHover: var(--colorNeutralForegroundInvertedHover);
@@ -108,6 +110,8 @@ $colorCompoundBrandBackgroundHover: var(--colorCompoundBrandBackgroundHover);
 $colorCompoundBrandBackgroundPressed: var(--colorCompoundBrandBackgroundPressed);
 $colorBrandBackgroundStatic: var(--colorBrandBackgroundStatic);
 $colorBrandBackground2: var(--colorBrandBackground2);
+$colorBrandBackground2Hover: var(--colorBrandBackground2Hover);
+$colorBrandBackground2Pressed: var(--colorBrandBackground2Pressed);
 $colorBrandBackgroundInverted: var(--colorBrandBackgroundInverted);
 $colorBrandBackgroundInvertedHover: var(--colorBrandBackgroundInvertedHover);
 $colorBrandBackgroundInvertedPressed: var(--colorBrandBackgroundInvertedPressed);
@@ -122,13 +126,16 @@ $colorNeutralStroke1Pressed: var(--colorNeutralStroke1Pressed);
 $colorNeutralStroke1Selected: var(--colorNeutralStroke1Selected);
 $colorNeutralStroke2: var(--colorNeutralStroke2);
 $colorNeutralStroke3: var(--colorNeutralStroke3);
+$colorNeutralStrokeSubtle: var(--colorNeutralStrokeSubtle);
 $colorNeutralStrokeOnBrand: var(--colorNeutralStrokeOnBrand);
 $colorNeutralStrokeOnBrand2: var(--colorNeutralStrokeOnBrand2);
 $colorNeutralStrokeOnBrand2Hover: var(--colorNeutralStrokeOnBrand2Hover);
 $colorNeutralStrokeOnBrand2Pressed: var(--colorNeutralStrokeOnBrand2Pressed);
 $colorNeutralStrokeOnBrand2Selected: var(--colorNeutralStrokeOnBrand2Selected);
 $colorBrandStroke1: var(--colorBrandStroke1);
 $colorBrandStroke2: var(--colorBrandStroke2);
+$colorBrandStroke2Hover: var(--colorBrandStroke2Hover);
+$colorBrandStroke2Pressed: var(--colorBrandStroke2Pressed);
 $colorCompoundBrandStroke: var(--colorCompoundBrandStroke);
 $colorCompoundBrandStrokeHover: var(--colorCompoundBrandStrokeHover);
 $colorCompoundBrandStrokePressed: var(--colorCompoundBrandStrokePressed);

packages/tokens/etc/tokens.api.md

@@ -164,6 +164,8 @@ export type ColorTokens = {
     colorCompoundBrandForeground1Pressed: string;
     colorBrandForeground1: string;
     colorBrandForeground2: string;
+    colorBrandForeground2Hover: string;
+    colorBrandForeground2Pressed: string;
     colorNeutralForeground1Static: string;
     colorNeutralForegroundInverted: string;
     colorNeutralForegroundInvertedHover: string;
@@ -240,6 +242,8 @@ export type ColorTokens = {
     colorCompoundBrandBackgroundPressed: string;
     colorBrandBackgroundStatic: string;
     colorBrandBackground2: string;
+    colorBrandBackground2Hover: string;
+    colorBrandBackground2Pressed: string;
     colorBrandBackgroundInverted: string;
     colorBrandBackgroundInvertedHover: string;
     colorBrandBackgroundInvertedPressed: string;
@@ -254,13 +258,16 @@ export type ColorTokens = {
     colorNeutralStroke1Selected: string;
     colorNeutralStroke2: string;
     colorNeutralStroke3: string;
+    colorNeutralStrokeSubtle: string;
     colorNeutralStrokeOnBrand: string;
     colorNeutralStrokeOnBrand2: string;
     colorNeutralStrokeOnBrand2Hover: string;
     colorNeutralStrokeOnBrand2Pressed: string;
     colorNeutralStrokeOnBrand2Selected: string;
     colorBrandStroke1: string;
     colorBrandStroke2: string;
+    colorBrandStroke2Hover: string;
+    colorBrandStroke2Pressed: string;
     colorCompoundBrandStroke: string;
     colorCompoundBrandStrokeHover: string;
     colorCompoundBrandStrokePressed: string;

packages/tokens/src/alias/darkColor.ts

@@ -39,6 +39,8 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
   colorCompoundBrandForeground1Pressed: brand[90], // #1890f1 Global.Color.Brand.90
   colorBrandForeground1: brand[100], // #2899f5 Global.Color.Brand.100
   colorBrandForeground2: brand[110], // #3aa0f3 Global.Color.Brand.110
+  colorBrandForeground2Hover: brand[130], // #82c7ff Global.Color.Brand.130
+  colorBrandForeground2Pressed: brand[160], // #eff6fc Global.Color.Brand.160
   colorNeutralForeground1Static: grey[14], // #242424 Global.Color.Grey.14
   colorNeutralForegroundStaticInverted: white, // #ffffff Global.Color.White
   colorNeutralForegroundInverted: grey[14], // #242424 Global.Color.Grey.14
@@ -114,7 +116,9 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
   colorCompoundBrandBackgroundHover: brand[110], // #3aa0f3 Global.Color.Brand.110
   colorCompoundBrandBackgroundPressed: brand[90], // #1890f1 Global.Color.Brand.90
   colorBrandBackgroundStatic: brand[80], // #0078d4 Global.Color.Brand.80
-  colorBrandBackground2: brand[40], // #004578 Global.Color.Brand.40
+  colorBrandBackground2: brand[20], // #002848 Global.Color.Brand.20
+  colorBrandBackground2Hover: brand[40], // #004578 Global.Color.Brand.40
+  colorBrandBackground2Pressed: brand[10], // #001526 Global.Color.Brand.10
   colorBrandBackgroundInverted: white, // #ffffff Global.Color.White
   colorBrandBackgroundInvertedHover: brand[160], // #eff6fc Global.Color.Brand.160
   colorBrandBackgroundInvertedPressed: brand[140], // #c7e0f4 Global.Color.Brand.140
@@ -129,13 +133,16 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
   colorNeutralStroke1Selected: grey[44], // #707070 Global.Color.Grey.44
   colorNeutralStroke2: grey[32], // #525252 Global.Color.Grey.32
   colorNeutralStroke3: grey[24], // #3d3d3d Global.Color.Grey.24
+  colorNeutralStrokeSubtle: grey[4], // #0a0a0a Global.Color.Grey.4
   colorNeutralStrokeOnBrand: grey[16], // #292929 Global.Color.Grey.16
   colorNeutralStrokeOnBrand2: white, // #ffffff Global.Color.White
   colorNeutralStrokeOnBrand2Hover: white, // #ffffff Global.Color.White
   colorNeutralStrokeOnBrand2Pressed: white, // #ffffff Global.Color.White
   colorNeutralStrokeOnBrand2Selected: white, // #ffffff Global.Color.White
   colorBrandStroke1: brand[100], // #2899f5 Global.Color.Brand.100
   colorBrandStroke2: brand[50], // #004c87 Global.Color.Brand.50
+  colorBrandStroke2Hover: brand[50], // #004c87 Global.Color.Brand.50
+  colorBrandStroke2Pressed: brand[30], // #043862 Global.Color.Brand.30
   colorCompoundBrandStroke: brand[100], // #2899f5 Global.Color.Brand.100
   colorCompoundBrandStrokeHover: brand[110], // #3aa0f3 Global.Color.Brand.110
   colorCompoundBrandStrokePressed: brand[90], // #1890f1 Global.Color.Brand.90

packages/tokens/src/alias/highContrastColor.ts

@@ -48,7 +48,9 @@ export const generateColorTokens = (): ColorTokens => ({
   colorCompoundBrandForeground1Hover: hcHighlight, // Highlight Global.Color.hcHighlight
   colorCompoundBrandForeground1Pressed: hcHighlight, // Highlight Global.Color.hcHighlight
   colorBrandForeground1: hcCanvasText, // CanvasText Global.Color.hcCanvasText
-  colorBrandForeground2: hcButtonText, // ButtonText Global.Color.hcButtonText
+  colorBrandForeground2: hcCanvasText, // CanvasText Global.Color.hcCanvasText
+  colorBrandForeground2Hover: hcCanvasText, // CanvasText Global.Color.hcCanvasText
+  colorBrandForeground2Pressed: hcCanvasText, // CanvasText Global.Color.hcCanvasText
   colorNeutralForeground1Static: hcCanvas, // Canvas Global.Color.hcCanvas
   colorNeutralForegroundStaticInverted: hcCanvasText, // CanvasText Global.Color.hcCanvasText
   colorNeutralForegroundInverted: hcHighlightText, // HighlightText Global.Color.hcHighlightText
@@ -124,7 +126,9 @@ export const generateColorTokens = (): ColorTokens => ({
   colorCompoundBrandBackgroundHover: hcHighlight, // Highlight Global.Color.hcHighlight
   colorCompoundBrandBackgroundPressed: hcHighlight, // Highlight Global.Color.hcHighlight
   colorBrandBackgroundStatic: hcCanvas, // Canvas Global.Color.hcCanvas
-  colorBrandBackground2: hcButtonFace, // ButtonFace Global.Color.hcButtonFace
+  colorBrandBackground2: hcCanvas, // Canvas Global.Color.hcCanvas
+  colorBrandBackground2Hover: hcCanvas, // Canvas Global.Color.hcCanvas
+  colorBrandBackground2Pressed: hcCanvas, // Canvas Global.Color.hcCanvas
   colorBrandBackgroundInverted: hcButtonFace, // ButtonFace Global.Color.hcButtonFace
   colorBrandBackgroundInvertedHover: hcHighlight, // Highlight Global.Color.hcHighlight
   colorBrandBackgroundInvertedPressed: hcHighlight, // Highlight Global.Color.hcHighlight
@@ -139,13 +143,16 @@ export const generateColorTokens = (): ColorTokens => ({
   colorNeutralStroke1Selected: hcHighlight, // Highlight Global.Color.hcHighlight
   colorNeutralStroke2: hcCanvasText, // CanvasText Global.Color.hcCanvasText
   colorNeutralStroke3: hcCanvasText, // CanvasText Global.Color.hcCanvasText
+  colorNeutralStrokeSubtle: hcCanvasText, // CanvasText Global.Color.hcCanvasText
   colorNeutralStrokeOnBrand: hcCanvas, // Canvas Global.Color.hcCanvas
   colorNeutralStrokeOnBrand2: hcCanvasText, // CanvasText Global.Color.hcCanvasText
   colorNeutralStrokeOnBrand2Hover: hcCanvasText, // CanvasText Global.Color.hcCanvasText
   colorNeutralStrokeOnBrand2Pressed: hcCanvasText, // CanvasText Global.Color.hcCanvasText
   colorNeutralStrokeOnBrand2Selected: hcCanvasText, // CanvasText Global.Color.hcCanvasText
   colorBrandStroke1: hcCanvasText, // CanvasText Global.Color.hcCanvasText
   colorBrandStroke2: hcCanvasText, // CanvasText Global.Color.hcCanvasText
+  colorBrandStroke2Hover: hcHighlight, // Highlight Global.Color.hcHighlight
+  colorBrandStroke2Pressed: hcHighlight, // Highlight Global.Color.hcHighlight
   colorCompoundBrandStroke: hcHighlight, // Highlight Global.Color.hcHighlight
   colorCompoundBrandStrokeHover: hcHighlight, // Highlight Global.Color.hcHighlight
   colorCompoundBrandStrokePressed: hcHighlight, // Highlight Global.Color.hcHighlight

packages/tokens/src/alias/lightColor.ts

@@ -39,6 +39,8 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
   colorCompoundBrandForeground1Pressed: brand[60], // #005a9e Global.Color.Brand.60
   colorBrandForeground1: brand[80], // #0078d4 Global.Color.Brand.80
   colorBrandForeground2: brand[70], // #106ebe Global.Color.Brand.70
+  colorBrandForeground2Hover: brand[60], // #005a9e Global.Color.Brand.60
+  colorBrandForeground2Pressed: brand[30], // #043862 Global.Color.Brand.30
   colorNeutralForeground1Static: grey[14], // #242424 Global.Color.Grey.14
   colorNeutralForegroundStaticInverted: white, // #ffffff Global.Color.White
   colorNeutralForegroundInverted: white, // #ffffff Global.Color.White
@@ -115,6 +117,8 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
   colorCompoundBrandBackgroundPressed: brand[60], // #005a9e Global.Color.Brand.60
   colorBrandBackgroundStatic: brand[80], // #0078d4 Global.Color.Brand.80
   colorBrandBackground2: brand[160], // #eff6fc Global.Color.Brand.160
+  colorBrandBackground2Hover: brand[150], // #deecf9 Global.Color.Brand.150
+  colorBrandBackground2Pressed: brand[130], // #82c7ff Global.Color.Brand.130
   colorBrandBackgroundInverted: white, // #ffffff Global.Color.White
   colorBrandBackgroundInvertedHover: brand[160], // #eff6fc Global.Color.Brand.160
   colorBrandBackgroundInvertedPressed: brand[140], // #c7e0f4 Global.Color.Brand.140
@@ -129,13 +133,16 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
   colorNeutralStroke1Selected: grey[74], // #bdbdbd Global.Color.Grey.74
   colorNeutralStroke2: grey[88], // #e0e0e0 Global.Color.Grey.88
   colorNeutralStroke3: grey[94], // #f0f0f0 Global.Color.Grey.94
+  colorNeutralStrokeSubtle: grey[88], // #e0e0e0 Global.Color.Grey.88
   colorNeutralStrokeOnBrand: white, // #ffffff Global.Color.White
   colorNeutralStrokeOnBrand2: white, // #ffffff Global.Color.White
   colorNeutralStrokeOnBrand2Hover: white, // #ffffff Global.Color.White
   colorNeutralStrokeOnBrand2Pressed: white, // #ffffff Global.Color.White
   colorNeutralStrokeOnBrand2Selected: white, // #ffffff Global.Color.White
   colorBrandStroke1: brand[80], // #0078d4 Global.Color.Brand.80
   colorBrandStroke2: brand[140], // #c7e0f4 Global.Color.Brand.140
+  colorBrandStroke2Hover: brand[120], // #6cb8f6 Global.Color.Brand.120
+  colorBrandStroke2Pressed: brand[80], // #0078d4 Global.Color.Brand.80
   colorCompoundBrandStroke: brand[80], // #0078d4 Global.Color.Brand.80
   colorCompoundBrandStrokeHover: brand[70], // #106ebe Global.Color.Brand.70
   colorCompoundBrandStrokePressed: brand[60], // #005a9e Global.Color.Brand.60