[Rendering] TextBlock, style Default, isSubtle=true: not picking up setting from host config json #6580
Description
Target Platforms
NodeJS
SDK Version
1.3
Application Name
Viva Connections
Problem Description
We have our own custom host config json. In that, we have specified all the background and foreground colors. The subtle property for default foregroundColors has no effect. This is set within the containerStyles property - I don't see any other way to specify font color so please direct me if that is the solution. Here is our host config with the property highlight that is not working for us:
Screenshots
Here is an example of what we see in product. Note that isSubtle does work for every foreground color except default:
Card JSON
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"wrap": true,
"text": "Without isSubtle",
"weight": "Bolder"
},
{
"type": "TextBlock",
"text": "Default",
"wrap": true,
"id": "0",
"separator": true
},
{
"type": "TextBlock",
"text": "Dark",
"wrap": true,
"id": "1",
"color": "Dark"
},
{
"type": "TextBlock",
"text": "Light",
"wrap": true,
"id": "2",
"color": "Light"
},
{
"type": "TextBlock",
"text": "Accent",
"wrap": true,
"id": "3",
"color": "Accent"
},
{
"type": "TextBlock",
"text": "Good",
"wrap": true,
"id": "4",
"color": "Good"
},
{
"type": "TextBlock",
"text": "Warning",
"wrap": true,
"id": "5",
"color": "Warning"
},
{
"type": "TextBlock",
"text": "Attention",
"wrap": true,
"id": "6",
"color": "Attention"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"wrap": true,
"text": "With isSubtle",
"weight": "Bolder"
},
{
"type": "TextBlock",
"text": "Default",
"wrap": true,
"id": "00",
"isSubtle": true,
"separator": true
},
{
"type": "TextBlock",
"text": "Dark",
"wrap": true,
"id": "11",
"color": "Dark",
"isSubtle": true
},
{
"type": "TextBlock",
"text": "Light",
"wrap": true,
"id": "22",
"color": "Light",
"isSubtle": true
},
{
"type": "TextBlock",
"text": "Accent",
"wrap": true,
"id": "33",
"color": "Accent",
"isSubtle": true
},
{
"type": "TextBlock",
"text": "Good",
"wrap": true,
"id": "44",
"color": "Good",
"isSubtle": true
},
{
"type": "TextBlock",
"text": "Warning",
"wrap": true,
"id": "55",
"color": "Warning",
"isSubtle": true
},
{
"type": "TextBlock",
"text": "Attention",
"wrap": true,
"id": "66",
"color": "Attention",
"isSubtle": true
}
]
}
]
}
]
}Sample Code Language
Typescript
Sample Code
// Some of our host config styles with theme values replaced with hex values -->
containerStyles: {
default: {
backgroundColor: '#ffffff',
foregroundColors: {
default: {
default: '#323130',
subtle: '#8a8886'
},
dark: {
default: '#000000',
subtle: '#605E5C'
},
light: {
default: '#F3F2F1',
subtle: '#E1DFDD'
},
accent: {
default: '#6264A7',
subtle: '#A6A7DC'
},
attention: {
default: '#D83B01',
subtle: '#DC816A'
},
good: {
default: '#107C10',
subtle: '#55B17E'
},
warning: {
default: '#797673',
subtle: '#A19F9D'
}
}
}
// Our entire host config -->
import { ITheme } from 'office-ui-fabric-react';
export function ACEHostConfigJson(
theme: ITheme
// tslint:disable-next-line: no-any
): any {
return {
preExpandSingleShowCardAction: true,
supportsInteractivity: true,
spacing: {
small: 4,
default: 8,
medium: 16,
large: 24,
extraLarge: 32,
padding: 16
},
separator: {
lineThickness: 1,
lineColor: theme.semanticColors.bodyDivider
},
imageSizes: {
small: 32,
medium: 120,
large: 175
},
fontTypes: {
default: {
fontFamily: 'Segoe UI, Tahoma, Geneva, Verdana, sans-serif',
fontSizes: {
small: 12,
default: 14,
medium: 18,
large: 24,
extraLarge: 32
},
fontWeights: {
lighter: 300,
default: 400,
bolder: 600
}
},
monospace: {
fontFamily: 'Courier New, Courier, monospace',
fontSizes: {
small: 12,
default: 14,
medium: 18,
large: 24,
extraLarge: 32
},
fontWeights: {
lighter: 300,
default: 400,
bolder: 600
}
}
},
containerStyles: {
default: {
backgroundColor: theme.palette.white,
foregroundColors: foregroundColors(theme)
},
emphasis: {
backgroundColor: theme.palette.neutralQuaternaryAlt,
foregroundColors: foregroundColors(theme)
},
accent: {
backgroundColor: theme.palette.themeLighterAlt,
foregroundColors: foregroundColors(theme)
},
good: {
backgroundColor: theme.semanticColors.successBackground,
foregroundColors: foregroundColors(theme)
},
attention: {
backgroundColor: theme.semanticColors.severeWarningBackground,
foregroundColors: foregroundColors(theme)
},
warning: {
backgroundColor: theme.semanticColors.warningBackground,
foregroundColors: foregroundColors(theme)
}
},
actions: {
maxActions: 5,
spacing: 'default',
buttonSpacing: 10,
showCard: {
actionMode: 'inline',
inlineTopMargin: 16
},
actionsOrientation: 'horizontal',
actionAlignment: 'left'
},
adaptiveCard: {
allowCustomStyle: true
},
imageSet: {
imageSize: 'medium',
maxImageHeight: 100
},
factSet: {
title: {
color: 'default',
size: 'default',
isSubtle: false,
weight: 'bolder',
wrap: true,
maxWidth: 150
},
value: {
color: 'default',
size: 'default',
isSubtle: false,
weight: 'default',
wrap: true
},
spacing: 10
}
};
}
function foregroundColors(
theme: ITheme
// tslint:disable-next-line: no-any
): any {
return {
default: {
default: theme.palette.neutralPrimary,
subtle: theme.palette.neutralSecondaryAlt
},
dark: {
default: theme.palette.black,
subtle: theme.palette.neutralSecondary
},
light: {
default: theme.palette.neutralLighter,
subtle: theme.palette.neutralQuaternaryAlt
},
accent: {
default: theme.palette.themePrimary,
subtle: theme.palette.themeLight
},
attention: {
default: theme.semanticColors.severeWarningIcon,
subtle: '#A3' + theme.semanticColors.severeWarningIcon.substr(1)
},
good: {
default: theme.semanticColors.successIcon,
subtle: '#A3' + theme.semanticColors.successIcon.substr(1)
},
warning: {
default: theme.semanticColors.warningIcon,
subtle: theme.palette.neutralTertiary
}
};
}