[Rendering] TextBlock, style Default, isSubtle=true: not picking up setting from host config json

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
    }
  };
}

microsoft / AdaptiveCards