@ni/nimble-components 34.3.2 → 34.4.0

package/dist/esm/theme-provider/design-tokens.js

@@ -1,161 +1,146 @@
 import { DesignToken } from '@ni/fast-foundation';
-import { parseColorHexRGB } from '@ni/fast-colors';
-import { Black, Black7, Black15, Black80, Black85, Black88, Black91, White, ForestGreen, DigitalGreenLight, Fail100LightUi, SmallDelay, MediumDelay, LargeDelay, Fail100DarkUi, Warning100LightUi, Warning100DarkUi, Pass100LightUi, Pass100DarkUi, BodyFamily, BodySize, BodyWeight, Body2Family, Body2Size, Body2Weight, ControlLabel1Family, ControlLabel1Size, ControlLabel1Weight, GroupLabel1Family, GroupLabel1Size, GroupLabel1Weight, Headline2Size, Headline2Family, Headline2Weight, Headline1Size, Headline1Family, Headline1Weight, Title3Size, Title3Family, Title3Weight, Title2Size, Title2Family, Title2Weight, Title1Size, Title1Family, Title1Weight, Subtitle2Size, Subtitle2Family, Subtitle2Weight, Subtitle1Size, Subtitle1Family, Subtitle1Weight, LinkLightUiSize, LinkLightUiFamily, LinkLightUiWeight, PlaceholderSize, PlaceholderFamily, PlaceholderWeight, BodyEmphasizedSize, BodyEmphasizedFamily, BodyEmphasizedWeight, BodyEmphasized2Size, BodyEmphasized2Family, BodyEmphasized2Weight, ButtonLabel1Size, ButtonLabel1Family, ButtonLabel1Weight, TooltipCaptionSize, TooltipCaptionFamily, TooltipCaptionWeight, ErrorLightUiSize, ErrorLightUiFamily, ErrorLightUiWeight, Headline2LineHeight, Headline1LineHeight, Title3LineHeight, Title2LineHeight, Title1LineHeight, Subtitle2LineHeight, Subtitle1LineHeight, LinkLineHeight, PlaceholderLineHeight, BodyEmphasizedLineHeight, BodyEmphasized2LineHeight, BodyLineHeight, Body2LineHeight, GroupLabel1LineHeight, ControlLabel1LineHeight, ButtonLabel1LineHeight, TooltipCaptionLineHeight, Information100LightUi, Information100DarkUi, DigitalGreenDark, PowerGreen, GridHeaderFamily, GridHeaderWeight, GridHeaderSize, DigitalGreenDark105, NiFern, NiFernDark1, NiHoneyLight, NiIndigo, NiIndigoDark2, NiPlumDark1, NiScarlet, NiScarletDark1, NiScarletDark3, NiSea, NiSeaLight, NiSeaDark2, NiSky, NiTulip, DigitalGreenLight10, PowerGreen10, DigitalGreenDark110, Black82, Black22, PowerGreen30, DigitalGreenLight30, PowerGreenDark50 } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import { Theme } from './types';
 import { tokenNames, styleNameFromTokenName } from './design-token-names';
 import { theme } from '.';
-import { hexToRgbaCssColor } from '../utilities/style/colors';
-// Color Tokens
-export const actionRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.actionRgbPartialColor)).withDefault((element) => hexToRgbPartial(getColorForTheme(element, Black91, Black15, White)));
-export const applicationBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.applicationBackgroundColor)).withDefault((element) => getColorForTheme(element, White, Black85, ForestGreen));
-export const headerBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.headerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black7, Black88, ForestGreen));
-export const sectionBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.sectionBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
-export const sectionBackgroundImage = DesignToken.create(styleNameFromTokenName(tokenNames.sectionBackgroundImage)).withDefault((element) => {
-    const start = getColorForTheme(element, Black15, Black82, ForestGreen);
-    const end = getColorForTheme(element, hexToRgbaCssColor(Black15, 0), hexToRgbaCssColor(Black82, 0), hexToRgbaCssColor(ForestGreen, 0));
-    return `linear-gradient(${start}, ${end})`;
-});
-export const dividerBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.dividerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
-export const fillSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.2));
-export const fillSelectedRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillSelectedColorForTheme(element)));
-export const fillHoverSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.15));
-export const fillHoverColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverColor)).withDefault((element) => hexToRgbaCssColor(getFillHoverColorForTheme(element), 0.1));
-export const fillHoverRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillHoverColorForTheme(element)));
-export const fillDownColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillDownColor)).withDefault((element) => hexToRgbaCssColor(getFillDownColorForTheme(element), 0.15));
-export const borderColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderColor)).withDefault((element) => getDefaultLineColorForTheme(element));
-export const borderRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderRgbPartialColor)).withDefault((element) => hexToRgbPartial(getDefaultLineColorForTheme(element)));
-export const failColor = DesignToken.create(styleNameFromTokenName(tokenNames.failColor)).withDefault((element) => getFailColorForTheme(element));
-export const warningColor = DesignToken.create(styleNameFromTokenName(tokenNames.warningColor)).withDefault((element) => getWarningColorForTheme(element));
-export const passColor = DesignToken.create(styleNameFromTokenName(tokenNames.passColor)).withDefault((element) => getPassColorForTheme(element));
-export const informationColor = DesignToken.create(styleNameFromTokenName(tokenNames.informationColor)).withDefault((element) => getInformationColorForTheme(element));
-export const borderHoverColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderHoverColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, PowerGreen, White));
-// Component Color Tokens
-export const iconColor = DesignToken.create(styleNameFromTokenName(tokenNames.iconColor)).withDefault((element) => getColorForTheme(element, Black91, Black15, White));
-export const modalBackdropColor = DesignToken.create(styleNameFromTokenName(tokenNames.modalBackdropColor)).withDefault((element) => getModalBackdropForTheme(element));
-export const popupBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBorderColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.3));
-export const cardBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.cardBorderColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.1));
-export const graphGridlineColor = DesignToken.create(styleNameFromTokenName(tokenNames.graphGridlineColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.2));
-export const graphTrace1Color = DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace1Color)).withDefault((element) => getColorForTheme(element, NiIndigoDark2, NiSky, White));
-export const graphTrace2Color = DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace2Color)).withDefault((element) => getColorForTheme(element, NiScarletDark1, NiScarlet, hexToRgbaCssColor(White, 0.7)));
-export const graphTrace3Color = DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace3Color)).withDefault((element) => getColorForTheme(element, NiFernDark1, NiFern, hexToRgbaCssColor(White, 0.4)));
-export const graphTrace4Color = DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace4Color)).withDefault((element) => getColorForTheme(element, NiPlumDark1, NiSeaLight, hexToRgbaCssColor(White, 0.25)));
-export const graphTrace5Color = DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace5Color)).withDefault((element) => getColorForTheme(element, NiSeaDark2, NiSea, hexToRgbaCssColor(White, 0.55)));
-export const graphTrace6Color = DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace6Color)).withDefault((element) => getColorForTheme(element, NiTulip, NiTulip, hexToRgbaCssColor(White, 0.85)));
-export const graphTrace7Color = DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace7Color)).withDefault((element) => getColorForTheme(element, NiScarletDark3, NiHoneyLight, hexToRgbaCssColor(White, 0.325)));
-export const graphTrace8Color = DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace8Color)).withDefault((element) => getColorForTheme(element, NiIndigo, NiIndigo, hexToRgbaCssColor(White, 0.625)));
-export const tooltipBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.tooltipBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black85, ForestGreen));
-export const tableRowBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.tableRowBorderColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
-export const tagFillColor = DesignToken.create(styleNameFromTokenName(tokenNames.tagFillColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.1));
-export const buttonFillPrimaryColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonFillPrimaryColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(Black91, 0.75), hexToRgbaCssColor(Black15, 0.3), hexToRgbaCssColor(White, 0.3)));
-export const buttonPrimaryFontColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonPrimaryFontColor)).withDefault((element) => getColorForTheme(element, Black15, Black15, White));
-export const buttonFillAccentColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonFillAccentColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark, DigitalGreenLight, hexToRgbaCssColor(White, 0.1)));
-export const buttonAccentBlockFontColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonAccentBlockFontColor)).withDefault((element) => getColorForTheme(element, White, Black15, White));
-export const buttonAccentOutlineFontColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonAccentOutlineFontColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark105, PowerGreen, White));
-export const buttonBorderAccentOutlineColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonBorderAccentOutlineColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, PowerGreen, hexToRgbaCssColor(White, 0.3)));
-export const calendarEventBackgroundStaticColor = DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundStaticColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight10, PowerGreen10, PowerGreen10));
-export const calendarEventBackgroundDynamicColor = DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundDynamicColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark105, DigitalGreenDark, DigitalGreenDark));
-export const calendarEventBackgroundTransientColor = DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundTransientColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark105, DigitalGreenDark, DigitalGreenDark));
-export const calendarEventBorderStaticColor = DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBorderStaticColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, DigitalGreenLight));
-export const calendarEventBorderTransientColor = DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBorderTransientColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, hexToRgbaCssColor(PowerGreen, 0.85), hexToRgbaCssColor(PowerGreen, 0.85)));
-export const calendarEventStaticFontColor = DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventStaticFontColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, PowerGreenDark50, PowerGreenDark50));
-export const calendarEventDynamicFontColor = DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventDynamicFontColor)).withDefault((element) => getColorForTheme(element, White, White, White));
-export const calendarEventTransientFontColor = DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventTransientFontColor)).withDefault((element) => getColorForTheme(element, White, White, White));
-export const calendarEventBackgroundHoverStaticColor = DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverStaticColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight30, PowerGreen30, PowerGreen30));
-export const calendarEventBackgroundHoverDynamicColor = DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverDynamicColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, DigitalGreenDark105, DigitalGreenDark105));
-export const calendarEventBackgroundHoverTransientColor = DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverTransientColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, DigitalGreenDark105, DigitalGreenDark105));
-export const calendarEventOuterBorderHighlightedColor = DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventOuterBorderHighlightedColor)).withDefault((element) => getColorForTheme(element, Black88, hexToRgbaCssColor(White, 0.85), hexToRgbaCssColor(White, 0.85)));
-export const calendarRowBackgroundSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.calendarRowBackgroundSelectedColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(DigitalGreenLight, 0.2), hexToRgbaCssColor(PowerGreen, 0.2), hexToRgbaCssColor(PowerGreen, 0.2)));
-export const calendarRowBackgroundConflictColor = DesignToken.create(styleNameFromTokenName(tokenNames.calendarRowBackgroundConflictColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(Fail100LightUi, 0.2), hexToRgbaCssColor(Fail100DarkUi, 0.2), hexToRgbaCssColor(Fail100DarkUi, 0.2)));
-export const calendarEventFillBlockedColor = DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventFillBlockedColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(Black91, 0.07), Black82, Black82));
-export const calendarGrabHandleBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.calendarGrabHandleBackgroundColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, PowerGreen, PowerGreen));
-export const calendarGridBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.calendarGridBorderColor)).withDefault((element) => getColorForTheme(element, Black22, Black80, Black80));
-export const calendarGroupHeaderBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.calendarGroupHeaderBackgroundColor)).withDefault((element) => getColorForTheme(element, Black7, hexToRgbaCssColor(Black91, 0.1), hexToRgbaCssColor(Black91, 0.1)));
-// Component Sizing Tokens
-export const controlHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlHeight)).withDefault('32px');
-export const controlSlimHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlSlimHeight)).withDefault('24px');
-export const smallPadding = DesignToken.create(styleNameFromTokenName(tokenNames.smallPadding)).withDefault('4px');
-export const mediumPadding = DesignToken.create(styleNameFromTokenName(tokenNames.mediumPadding)).withDefault('8px');
-export const standardPadding = DesignToken.create(styleNameFromTokenName(tokenNames.standardPadding)).withDefault('16px');
-export const largePadding = DesignToken.create(styleNameFromTokenName(tokenNames.largePadding)).withDefault('24px');
-export const labelHeight = DesignToken.create(styleNameFromTokenName(tokenNames.labelHeight)).withDefault('16px');
-export const borderWidth = DesignToken.create(styleNameFromTokenName(tokenNames.borderWidth)).withDefault('1px');
-export const dividerWidth = DesignToken.create(styleNameFromTokenName(tokenNames.dividerWidth)).withDefault('2px');
-export const iconSize = DesignToken.create(styleNameFromTokenName(tokenNames.iconSize)).withDefault('16px');
-export const drawerWidth = DesignToken.create(styleNameFromTokenName(tokenNames.drawerWidth)).withDefault('784px');
-export const dialogSmallWidth = DesignToken.create(styleNameFromTokenName(tokenNames.dialogSmallWidth)).withDefault('400px');
-export const dialogSmallHeight = DesignToken.create(styleNameFromTokenName(tokenNames.dialogSmallHeight)).withDefault('fit-content');
-export const dialogSmallMaxHeight = DesignToken.create(styleNameFromTokenName(tokenNames.dialogSmallMaxHeight)).withDefault('600px');
-export const dialogLargeWidth = DesignToken.create(styleNameFromTokenName(tokenNames.dialogLargeWidth)).withDefault('1024px');
-export const dialogLargeHeight = DesignToken.create(styleNameFromTokenName(tokenNames.dialogLargeHeight)).withDefault('680px');
-export const dialogLargeMaxHeight = DesignToken.create(styleNameFromTokenName(tokenNames.dialogLargeMaxHeight)).withDefault('680px');
-export const menuMinWidth = DesignToken.create(styleNameFromTokenName(tokenNames.menuMinWidth)).withDefault('176px');
-export const bannerGapSize = DesignToken.create(styleNameFromTokenName(tokenNames.bannerGapSize)).withDefault('1px');
-export const spinnerSmallHeight = DesignToken.create(styleNameFromTokenName(tokenNames.spinnerSmallHeight)).withDefault('16px');
-export const spinnerMediumHeight = DesignToken.create(styleNameFromTokenName(tokenNames.spinnerMediumHeight)).withDefault('32px');
-export const spinnerLargeHeight = DesignToken.create(styleNameFromTokenName(tokenNames.spinnerLargeHeight)).withDefault('64px');
-// The token gets a default value of the table's default height (480px)
-// but is given a calculated value in the table styles.
-export const tableFitRowsHeight = DesignToken.create(styleNameFromTokenName(tokenNames.tableFitRowsHeight)).withDefault('480px');
-// Drop Shadow Tokens
-export const elevation1BoxShadow = DesignToken.create(styleNameFromTokenName(tokenNames.elevation1BoxShadow)).withDefault((element) => `0px 1px 4px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.16)}`);
-export const elevation2BoxShadow = DesignToken.create(styleNameFromTokenName(tokenNames.elevation2BoxShadow)).withDefault((element) => `0px 2px 4px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.16)}`);
-export const elevation3BoxShadow = DesignToken.create(styleNameFromTokenName(tokenNames.elevation3BoxShadow)).withDefault((element) => `0px 4px 8px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.3)}`);
-// Font Tokens
-export const [headlineFont, headlineFontColor, headlineDisabledFontColor, headlineFontFamily, headlineFontWeight, headlineFontSize, headlineFontLineHeight] = createFontTokens(tokenNames.headlineFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Headline1Family, Headline1Weight, Headline1Size, Headline1LineHeight);
-export const [headlinePlus1Font, headlinePlus1FontColor, headlinePlus1DisabledFontColor, headlinePlus1FontFamily, headlinePlus1FontWeight, headlinePlus1FontSize, headlinePlus1FontLineHeight] = createFontTokens(tokenNames.headlinePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Headline2Family, Headline2Weight, Headline2Size, Headline2LineHeight);
-export const [titlePlus2Font, titlePlus2FontColor, titlePlus2DisabledFontColor, titlePlus2FontFamily, titlePlus2FontWeight, titlePlus2FontSize, titlePlus2FontLineHeight] = createFontTokens(tokenNames.titlePlus2Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title3Family, Title3Weight, Title3Size, Title3LineHeight);
-export const [titlePlus1Font, titlePlus1FontColor, titlePlus1DisabledFontColor, titlePlus1FontFamily, titlePlus1FontWeight, titlePlus1FontSize, titlePlus1FontLineHeight] = createFontTokens(tokenNames.titlePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title2Family, Title2Weight, Title2Size, Title2LineHeight);
-export const [titleFont, titleFontColor, titleDisabledFontColor, titleFontFamily, titleFontWeight, titleFontSize, titleFontLineHeight] = createFontTokens(tokenNames.titleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title1Family, Title1Weight, Title1Size, Title1LineHeight);
-export const [subtitlePlus1Font, subtitlePlus1FontColor, subtitlePlus1DisabledFontColor, subtitlePlus1FontFamily, subtitlePlus1FontWeight, subtitlePlus1FontSize, subtitlePlus1FontLineHeight] = createFontTokens(tokenNames.subtitlePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle2Family, Subtitle2Weight, Subtitle2Size, Subtitle2LineHeight);
-export const [subtitleFont, subtitleFontColor, subtitleDisabledFontColor, subtitleFontFamily, subtitleFontWeight, subtitleFontSize, subtitleFontLineHeight] = createFontTokens(tokenNames.subtitleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle1Family, Subtitle1Weight, Subtitle1Size, Subtitle1LineHeight);
-export const [linkFont, linkFontColor, linkDisabledFontColor, linkFontFamily, linkFontWeight, linkFontSize, linkFontLineHeight] = createFontTokens(tokenNames.linkFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
-export const [linkActiveFont, linkActiveFontColor, linkActiveDisabledFontColor, linkActiveFontFamily, linkActiveFontWeight, linkActiveFontSize, linkActiveFontLineHeight] = createFontTokens(tokenNames.linkActiveFont, (element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.75)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
-export const [linkProminentFont, linkProminentFontColor, linkProminentDisabledFontColor, linkProminentFontFamily, linkProminentFontWeight, linkProminentFontSize, linkProminentFontLineHeight] = createFontTokens(tokenNames.linkProminentFont, (element) => getColorForTheme(element, DigitalGreenDark105, PowerGreen, White), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
-export const [linkActiveProminentFont, linkActiveProminentFontColor, linkActiveProminentDisabledFontColor, linkActiveProminentFontFamily, linkActiveProminentFontWeight, linkActiveProminentFontSize, linkActiveProminentFontLineHeight] = createFontTokens(tokenNames.linkActiveProminentFont, (element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.75)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
-export const [placeholderFont, placeholderFontColor, placeholderDisabledFontColor, placeholderFontFamily, placeholderFontWeight, placeholderFontSize, placeholderFontLineHeight] = createFontTokens(tokenNames.placeholderFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), PlaceholderFamily, PlaceholderWeight, PlaceholderSize, PlaceholderLineHeight);
-export const [bodyFont, bodyFontColor, bodyDisabledFontColor, bodyFontFamily, bodyFontWeight, bodyFontSize, bodyFontLineHeight] = createFontTokens(tokenNames.bodyFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyFamily, BodyWeight, BodySize, BodyLineHeight);
-export const [bodyEmphasizedFont, bodyEmphasizedFontColor, bodyEmphasizedDisabledFontColor, bodyEmphasizedFontFamily, bodyEmphasizedFontWeight, bodyEmphasizedFontSize, bodyEmphasizedFontLineHeight] = createFontTokens(tokenNames.bodyEmphasizedFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyEmphasizedFamily, BodyEmphasizedWeight, BodyEmphasizedSize, BodyEmphasizedLineHeight);
-export const [bodyPlus1Font, bodyPlus1FontColor, bodyPlus1DisabledFontColor, bodyPlus1FontFamily, bodyPlus1FontWeight, bodyPlus1FontSize, bodyPlus1FontLineHeight] = createFontTokens(tokenNames.bodyPlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Body2Family, Body2Weight, Body2Size, Body2LineHeight);
-export const [bodyPlus1EmphasizedFont, bodyPlus1EmphasizedFontColor, bodyPlus1EmphasizedDisabledFontColor, bodyPlus1EmphasizedFontFamily, bodyPlus1EmphasizedFontWeight, bodyPlus1EmphasizedFontSize, bodyPlus1EmphasizedFontLineHeight] = createFontTokens(tokenNames.bodyPlus1EmphasizedFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyEmphasized2Family, BodyEmphasized2Weight, BodyEmphasized2Size, BodyEmphasized2LineHeight);
-export const [groupHeaderFont, groupHeaderFontColor, groupHeaderDisabledFontColor, groupHeaderFontFamily, groupHeaderFontWeight, groupHeaderFontSize, groupHeaderFontLineHeight] = createFontTokens(tokenNames.groupHeaderFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), GroupLabel1Family, GroupLabel1Weight, GroupLabel1Size, GroupLabel1LineHeight);
-export const [controlLabelFont, controlLabelFontColor, controlLabelDisabledFontColor, controlLabelFontFamily, controlLabelFontWeight, controlLabelFontSize, controlLabelFontLineHeight] = createFontTokens(tokenNames.controlLabelFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), ControlLabel1Family, ControlLabel1Weight, ControlLabel1Size, ControlLabel1LineHeight);
-export const [buttonLabelFont, buttonLabelFontColor, buttonLabelDisabledFontColor, buttonLabelFontFamily, buttonLabelFontWeight, buttonLabelFontSize, buttonLabelFontLineHeight] = createFontTokens(tokenNames.buttonLabelFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), ButtonLabel1Family, ButtonLabel1Weight, ButtonLabel1Size, ButtonLabel1LineHeight);
-export const [tooltipCaptionFont, tooltipCaptionFontColor, tooltipCaptionDisabledFontColor, tooltipCaptionFontFamily, tooltipCaptionFontWeight, tooltipCaptionFontSize, tooltipCaptionFontLineHeight] = createFontTokens(tokenNames.tooltipCaptionFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), TooltipCaptionFamily, TooltipCaptionWeight, TooltipCaptionSize, TooltipCaptionLineHeight);
-export const [errorTextFont, errorTextFontColor, errorTextDisabledFontColor, errorTextFontFamily, errorTextFontWeight, errorTextFontSize, errorTextFontLineHeight] = createFontTokens(tokenNames.errorTextFont, (element) => getFailColorForTheme(element), (element) => hexToRgbaCssColor(getFailColorForTheme(element), 0.3), ErrorLightUiFamily, ErrorLightUiWeight, ErrorLightUiSize, TooltipCaptionLineHeight);
-export const [tableHeaderFont, tableHeaderFontColor, tableHeaderDisabledFontColor, tableHeaderFontFamily, tableHeaderFontWeight, tableHeaderFontSize, tableHeaderFontLineHeight] = createFontTokens(tokenNames.tableHeaderFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), GridHeaderFamily, GridHeaderWeight, GridHeaderSize, TooltipCaptionLineHeight);
-export const [mentionFont, mentionFontColor, mentionDisabledFontColor, mentionFontFamily, mentionFontWeight, mentionFontSize, mentionFontLineHeight] = createFontTokens(tokenNames.mentionFont, (element) => getColorForTheme(element, DigitalGreenDark, PowerGreen, PowerGreen), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyFamily, BodyEmphasizedWeight, BodySize, BodyLineHeight);
-// Font Transform Tokens
-export const groupHeaderTextTransform = DesignToken.create(styleNameFromTokenName(tokenNames.groupHeaderTextTransform)).withDefault('uppercase');
-// Animation Tokens
-export const smallDelay = DesignToken.create(styleNameFromTokenName(tokenNames.smallDelay)).withDefault(SmallDelay);
-export const mediumDelay = DesignToken.create(styleNameFromTokenName(tokenNames.mediumDelay)).withDefault(MediumDelay);
-export const largeDelay = DesignToken.create(styleNameFromTokenName(tokenNames.largeDelay)).withDefault(LargeDelay);
-// Private helpers functions
-function hexToRgbPartial(hexValue) {
-    const { r, g, b } = parseColorHexRGB(hexValue);
-    return `${r * 255}, ${g * 255}, ${b * 255}`;
-}
-function createFontTokens(fontTokenName, colorFunction, disabledColorFunction, family, weight, size, lineHeight) {
-    if (fontTokenName === ''
-        || family === ''
-        || weight === ''
-        || size === ''
-        || lineHeight === '') {
-        throw new Error('createFontTokens parameter unexpectedly set to empty string');
-    }
-    const familyWithFallback = `${family}, ${family} Fallback`;
-    const fontToken = DesignToken.create(styleNameFromTokenName(fontTokenName)).withDefault(`${weight} ${size}/${lineHeight} ${familyWithFallback}`);
+import { tokenValues } from './design-token-values';
+// #region color tokens
+export const actionRgbPartialColor = createThemeColorToken(tokenNames.actionRgbPartialColor, tokenValues.actionRgbPartialColor);
+export const applicationBackgroundColor = createThemeColorToken(tokenNames.applicationBackgroundColor, tokenValues.applicationBackgroundColor);
+export const headerBackgroundColor = createThemeColorToken(tokenNames.headerBackgroundColor, tokenValues.headerBackgroundColor);
+export const sectionBackgroundColor = createThemeColorToken(tokenNames.sectionBackgroundColor, tokenValues.sectionBackgroundColor);
+export const sectionBackgroundImage = createThemeColorToken(tokenNames.sectionBackgroundImage, tokenValues.sectionBackgroundImage);
+export const dividerBackgroundColor = createThemeColorToken(tokenNames.dividerBackgroundColor, tokenValues.dividerBackgroundColor);
+export const fillSelectedColor = createThemeColorToken(tokenNames.fillSelectedColor, tokenValues.fillSelectedColor);
+export const fillSelectedRgbPartialColor = createThemeColorToken(tokenNames.fillSelectedRgbPartialColor, tokenValues.fillSelectedRgbPartialColor);
+export const fillHoverSelectedColor = createThemeColorToken(tokenNames.fillHoverSelectedColor, tokenValues.fillHoverSelectedColor);
+export const fillHoverColor = createThemeColorToken(tokenNames.fillHoverColor, tokenValues.fillHoverColor);
+export const fillHoverRgbPartialColor = createThemeColorToken(tokenNames.fillHoverRgbPartialColor, tokenValues.fillHoverRgbPartialColor);
+export const fillDownColor = createThemeColorToken(tokenNames.fillDownColor, tokenValues.fillDownColor);
+export const borderColor = createThemeColorToken(tokenNames.borderColor, tokenValues.borderColor);
+export const borderRgbPartialColor = createThemeColorToken(tokenNames.borderRgbPartialColor, tokenValues.borderRgbPartialColor);
+export const failColor = createThemeColorToken(tokenNames.failColor, tokenValues.failColor);
+export const warningColor = createThemeColorToken(tokenNames.warningColor, tokenValues.warningColor);
+export const passColor = createThemeColorToken(tokenNames.passColor, tokenValues.passColor);
+export const informationColor = createThemeColorToken(tokenNames.informationColor, tokenValues.informationColor);
+export const borderHoverColor = createThemeColorToken(tokenNames.borderHoverColor, tokenValues.borderHoverColor);
+// #endregion
+// #region component color tokens
+export const iconColor = createThemeColorToken(tokenNames.iconColor, tokenValues.iconColor);
+export const modalBackdropColor = createThemeColorToken(tokenNames.modalBackdropColor, tokenValues.modalBackdropColor);
+export const popupBorderColor = createThemeColorToken(tokenNames.popupBorderColor, tokenValues.popupBorderColor);
+export const cardBorderColor = createThemeColorToken(tokenNames.cardBorderColor, tokenValues.cardBorderColor);
+export const graphGridlineColor = createThemeColorToken(tokenNames.graphGridlineColor, tokenValues.graphGridlineColor);
+export const graphTrace1Color = createThemeColorToken(tokenNames.graphTrace1Color, tokenValues.graphTrace1Color);
+export const graphTrace2Color = createThemeColorToken(tokenNames.graphTrace2Color, tokenValues.graphTrace2Color);
+export const graphTrace3Color = createThemeColorToken(tokenNames.graphTrace3Color, tokenValues.graphTrace3Color);
+export const graphTrace4Color = createThemeColorToken(tokenNames.graphTrace4Color, tokenValues.graphTrace4Color);
+export const graphTrace5Color = createThemeColorToken(tokenNames.graphTrace5Color, tokenValues.graphTrace5Color);
+export const graphTrace6Color = createThemeColorToken(tokenNames.graphTrace6Color, tokenValues.graphTrace6Color);
+export const graphTrace7Color = createThemeColorToken(tokenNames.graphTrace7Color, tokenValues.graphTrace7Color);
+export const graphTrace8Color = createThemeColorToken(tokenNames.graphTrace8Color, tokenValues.graphTrace8Color);
+export const tooltipBackgroundColor = createThemeColorToken(tokenNames.tooltipBackgroundColor, tokenValues.tooltipBackgroundColor);
+export const tableRowBorderColor = createThemeColorToken(tokenNames.tableRowBorderColor, tokenValues.tableRowBorderColor);
+export const tagFillColor = createThemeColorToken(tokenNames.tagFillColor, tokenValues.tagFillColor);
+export const buttonFillPrimaryColor = createThemeColorToken(tokenNames.buttonFillPrimaryColor, tokenValues.buttonFillPrimaryColor);
+export const buttonPrimaryFontColor = createThemeColorToken(tokenNames.buttonPrimaryFontColor, tokenValues.buttonPrimaryFontColor);
+export const buttonFillAccentColor = createThemeColorToken(tokenNames.buttonFillAccentColor, tokenValues.buttonFillAccentColor);
+export const buttonAccentBlockFontColor = createThemeColorToken(tokenNames.buttonAccentBlockFontColor, tokenValues.buttonAccentBlockFontColor);
+export const buttonAccentOutlineFontColor = createThemeColorToken(tokenNames.buttonAccentOutlineFontColor, tokenValues.buttonAccentOutlineFontColor);
+export const buttonBorderAccentOutlineColor = createThemeColorToken(tokenNames.buttonBorderAccentOutlineColor, tokenValues.buttonBorderAccentOutlineColor);
+export const calendarEventBackgroundStaticColor = createThemeColorToken(tokenNames.calendarEventBackgroundStaticColor, tokenValues.calendarEventBackgroundStaticColor);
+export const calendarEventBackgroundDynamicColor = createThemeColorToken(tokenNames.calendarEventBackgroundDynamicColor, tokenValues.calendarEventBackgroundDynamicColor);
+export const calendarEventBackgroundTransientColor = createThemeColorToken(tokenNames.calendarEventBackgroundTransientColor, tokenValues.calendarEventBackgroundTransientColor);
+export const calendarEventBorderStaticColor = createThemeColorToken(tokenNames.calendarEventBorderStaticColor, tokenValues.calendarEventBorderStaticColor);
+export const calendarEventBorderTransientColor = createThemeColorToken(tokenNames.calendarEventBorderTransientColor, tokenValues.calendarEventBorderTransientColor);
+export const calendarEventStaticFontColor = createThemeColorToken(tokenNames.calendarEventStaticFontColor, tokenValues.calendarEventStaticFontColor);
+export const calendarEventDynamicFontColor = createThemeColorToken(tokenNames.calendarEventDynamicFontColor, tokenValues.calendarEventDynamicFontColor);
+export const calendarEventTransientFontColor = createThemeColorToken(tokenNames.calendarEventTransientFontColor, tokenValues.calendarEventTransientFontColor);
+export const calendarEventBackgroundHoverStaticColor = createThemeColorToken(tokenNames.calendarEventBackgroundHoverStaticColor, tokenValues.calendarEventBackgroundHoverStaticColor);
+export const calendarEventBackgroundHoverDynamicColor = createThemeColorToken(tokenNames.calendarEventBackgroundHoverDynamicColor, tokenValues.calendarEventBackgroundHoverDynamicColor);
+export const calendarEventBackgroundHoverTransientColor = createThemeColorToken(tokenNames.calendarEventBackgroundHoverTransientColor, tokenValues.calendarEventBackgroundHoverTransientColor);
+export const calendarEventOuterBorderHighlightedColor = createThemeColorToken(tokenNames.calendarEventOuterBorderHighlightedColor, tokenValues.calendarEventOuterBorderHighlightedColor);
+export const calendarRowBackgroundSelectedColor = createThemeColorToken(tokenNames.calendarRowBackgroundSelectedColor, tokenValues.calendarRowBackgroundSelectedColor);
+export const calendarRowBackgroundConflictColor = createThemeColorToken(tokenNames.calendarRowBackgroundConflictColor, tokenValues.calendarRowBackgroundConflictColor);
+export const calendarEventFillBlockedColor = createThemeColorToken(tokenNames.calendarEventFillBlockedColor, tokenValues.calendarEventFillBlockedColor);
+export const calendarGrabHandleBackgroundColor = createThemeColorToken(tokenNames.calendarGrabHandleBackgroundColor, tokenValues.calendarGrabHandleBackgroundColor);
+export const calendarGridBorderColor = createThemeColorToken(tokenNames.calendarGridBorderColor, tokenValues.calendarGridBorderColor);
+export const calendarGroupHeaderBackgroundColor = createThemeColorToken(tokenNames.calendarGroupHeaderBackgroundColor, tokenValues.calendarGroupHeaderBackgroundColor);
+// #endregion
+// #region size tokens
+export const controlHeight = createStringToken(tokenNames.controlHeight, tokenValues.controlHeight);
+export const controlSlimHeight = createStringToken(tokenNames.controlSlimHeight, tokenValues.controlSlimHeight);
+export const smallPadding = createStringToken(tokenNames.smallPadding, tokenValues.smallPadding);
+export const mediumPadding = createStringToken(tokenNames.mediumPadding, tokenValues.mediumPadding);
+export const standardPadding = createStringToken(tokenNames.standardPadding, tokenValues.standardPadding);
+export const largePadding = createStringToken(tokenNames.largePadding, tokenValues.largePadding);
+export const labelHeight = createStringToken(tokenNames.labelHeight, tokenValues.labelHeight);
+export const borderWidth = createStringToken(tokenNames.borderWidth, tokenValues.borderWidth);
+export const dividerWidth = createStringToken(tokenNames.dividerWidth, tokenValues.dividerWidth);
+export const iconSize = createStringToken(tokenNames.iconSize, tokenValues.iconSize);
+export const drawerWidth = createStringToken(tokenNames.drawerWidth, tokenValues.drawerWidth);
+export const dialogSmallWidth = createStringToken(tokenNames.dialogSmallWidth, tokenValues.dialogSmallWidth);
+export const dialogSmallHeight = createStringToken(tokenNames.dialogSmallHeight, tokenValues.dialogSmallHeight);
+export const dialogSmallMaxHeight = createStringToken(tokenNames.dialogSmallMaxHeight, tokenValues.dialogSmallMaxHeight);
+export const dialogLargeWidth = createStringToken(tokenNames.dialogLargeWidth, tokenValues.dialogLargeWidth);
+export const dialogLargeHeight = createStringToken(tokenNames.dialogLargeHeight, tokenValues.dialogLargeHeight);
+export const dialogLargeMaxHeight = createStringToken(tokenNames.dialogLargeMaxHeight, tokenValues.dialogLargeMaxHeight);
+export const menuMinWidth = createStringToken(tokenNames.menuMinWidth, tokenValues.menuMinWidth);
+export const bannerGapSize = createStringToken(tokenNames.bannerGapSize, tokenValues.bannerGapSize);
+export const spinnerSmallHeight = createStringToken(tokenNames.spinnerSmallHeight, tokenValues.spinnerSmallHeight);
+export const spinnerMediumHeight = createStringToken(tokenNames.spinnerMediumHeight, tokenValues.spinnerMediumHeight);
+export const spinnerLargeHeight = createStringToken(tokenNames.spinnerLargeHeight, tokenValues.spinnerLargeHeight);
+export const tableFitRowsHeight = createStringToken(tokenNames.tableFitRowsHeight, tokenValues.tableFitRowsHeight);
+// #endregion
+// #region drop shadow tokens
+export const elevation1BoxShadow = createThemeColorToken(tokenNames.elevation1BoxShadow, tokenValues.elevation1BoxShadow);
+export const elevation2BoxShadow = createThemeColorToken(tokenNames.elevation2BoxShadow, tokenValues.elevation2BoxShadow);
+export const elevation3BoxShadow = createThemeColorToken(tokenNames.elevation3BoxShadow, tokenValues.elevation3BoxShadow);
+// #endregion
+// #region font tokens
+export const [headlineFont, headlineFontColor, headlineDisabledFontColor, headlineFontFamily, headlineFontWeight, headlineFontSize, headlineFontLineHeight] = createFontTokens(tokenNames.headlineFont, tokenValues.headlineFont, tokenValues.headlineFontColor, tokenValues.headlineDisabledFontColor, tokenValues.headlineFontFamily, tokenValues.headlineFontWeight, tokenValues.headlineFontSize, tokenValues.headlineFontLineHeight);
+export const [headlinePlus1Font, headlinePlus1FontColor, headlinePlus1DisabledFontColor, headlinePlus1FontFamily, headlinePlus1FontWeight, headlinePlus1FontSize, headlinePlus1FontLineHeight] = createFontTokens(tokenNames.headlinePlus1Font, tokenValues.headlinePlus1Font, tokenValues.headlinePlus1FontColor, tokenValues.headlinePlus1DisabledFontColor, tokenValues.headlinePlus1FontFamily, tokenValues.headlinePlus1FontWeight, tokenValues.headlinePlus1FontSize, tokenValues.headlinePlus1FontLineHeight);
+export const [titlePlus2Font, titlePlus2FontColor, titlePlus2DisabledFontColor, titlePlus2FontFamily, titlePlus2FontWeight, titlePlus2FontSize, titlePlus2FontLineHeight] = createFontTokens(tokenNames.titlePlus2Font, tokenValues.titlePlus2Font, tokenValues.titlePlus2FontColor, tokenValues.titlePlus2DisabledFontColor, tokenValues.titlePlus2FontFamily, tokenValues.titlePlus2FontWeight, tokenValues.titlePlus2FontSize, tokenValues.titlePlus2FontLineHeight);
+export const [titlePlus1Font, titlePlus1FontColor, titlePlus1DisabledFontColor, titlePlus1FontFamily, titlePlus1FontWeight, titlePlus1FontSize, titlePlus1FontLineHeight] = createFontTokens(tokenNames.titlePlus1Font, tokenValues.titlePlus1Font, tokenValues.titlePlus1FontColor, tokenValues.titlePlus1DisabledFontColor, tokenValues.titlePlus1FontFamily, tokenValues.titlePlus1FontWeight, tokenValues.titlePlus1FontSize, tokenValues.titlePlus1FontLineHeight);
+export const [titleFont, titleFontColor, titleDisabledFontColor, titleFontFamily, titleFontWeight, titleFontSize, titleFontLineHeight] = createFontTokens(tokenNames.titleFont, tokenValues.titleFont, tokenValues.titleFontColor, tokenValues.titleDisabledFontColor, tokenValues.titleFontFamily, tokenValues.titleFontWeight, tokenValues.titleFontSize, tokenValues.titleFontLineHeight);
+export const [subtitlePlus1Font, subtitlePlus1FontColor, subtitlePlus1DisabledFontColor, subtitlePlus1FontFamily, subtitlePlus1FontWeight, subtitlePlus1FontSize, subtitlePlus1FontLineHeight] = createFontTokens(tokenNames.subtitlePlus1Font, tokenValues.subtitlePlus1Font, tokenValues.subtitlePlus1FontColor, tokenValues.subtitlePlus1DisabledFontColor, tokenValues.subtitlePlus1FontFamily, tokenValues.subtitlePlus1FontWeight, tokenValues.subtitlePlus1FontSize, tokenValues.subtitlePlus1FontLineHeight);
+export const [subtitleFont, subtitleFontColor, subtitleDisabledFontColor, subtitleFontFamily, subtitleFontWeight, subtitleFontSize, subtitleFontLineHeight] = createFontTokens(tokenNames.subtitleFont, tokenValues.subtitleFont, tokenValues.subtitleFontColor, tokenValues.subtitleDisabledFontColor, tokenValues.subtitleFontFamily, tokenValues.subtitleFontWeight, tokenValues.subtitleFontSize, tokenValues.subtitleFontLineHeight);
+export const [linkFont, linkFontColor, linkDisabledFontColor, linkFontFamily, linkFontWeight, linkFontSize, linkFontLineHeight] = createFontTokens(tokenNames.linkFont, tokenValues.linkFont, tokenValues.linkFontColor, tokenValues.linkDisabledFontColor, tokenValues.linkFontFamily, tokenValues.linkFontWeight, tokenValues.linkFontSize, tokenValues.linkFontLineHeight);
+export const [linkActiveFont, linkActiveFontColor, linkActiveDisabledFontColor, linkActiveFontFamily, linkActiveFontWeight, linkActiveFontSize, linkActiveFontLineHeight] = createFontTokens(tokenNames.linkActiveFont, tokenValues.linkActiveFont, tokenValues.linkActiveFontColor, tokenValues.linkActiveDisabledFontColor, tokenValues.linkActiveFontFamily, tokenValues.linkActiveFontWeight, tokenValues.linkActiveFontSize, tokenValues.linkActiveFontLineHeight);
+export const [linkProminentFont, linkProminentFontColor, linkProminentDisabledFontColor, linkProminentFontFamily, linkProminentFontWeight, linkProminentFontSize, linkProminentFontLineHeight] = createFontTokens(tokenNames.linkProminentFont, tokenValues.linkProminentFont, tokenValues.linkProminentFontColor, tokenValues.linkProminentDisabledFontColor, tokenValues.linkProminentFontFamily, tokenValues.linkProminentFontWeight, tokenValues.linkProminentFontSize, tokenValues.linkProminentFontLineHeight);
+export const [linkActiveProminentFont, linkActiveProminentFontColor, linkActiveProminentDisabledFontColor, linkActiveProminentFontFamily, linkActiveProminentFontWeight, linkActiveProminentFontSize, linkActiveProminentFontLineHeight] = createFontTokens(tokenNames.linkActiveProminentFont, tokenValues.linkActiveProminentFont, tokenValues.linkActiveProminentFontColor, tokenValues.linkActiveProminentDisabledFontColor, tokenValues.linkActiveProminentFontFamily, tokenValues.linkActiveProminentFontWeight, tokenValues.linkActiveProminentFontSize, tokenValues.linkActiveProminentFontLineHeight);
+export const [placeholderFont, placeholderFontColor, placeholderDisabledFontColor, placeholderFontFamily, placeholderFontWeight, placeholderFontSize, placeholderFontLineHeight] = createFontTokens(tokenNames.placeholderFont, tokenValues.placeholderFont, tokenValues.placeholderFontColor, tokenValues.placeholderDisabledFontColor, tokenValues.placeholderFontFamily, tokenValues.placeholderFontWeight, tokenValues.placeholderFontSize, tokenValues.placeholderFontLineHeight);
+export const [bodyFont, bodyFontColor, bodyDisabledFontColor, bodyFontFamily, bodyFontWeight, bodyFontSize, bodyFontLineHeight] = createFontTokens(tokenNames.bodyFont, tokenValues.bodyFont, tokenValues.bodyFontColor, tokenValues.bodyDisabledFontColor, tokenValues.bodyFontFamily, tokenValues.bodyFontWeight, tokenValues.bodyFontSize, tokenValues.bodyFontLineHeight);
+export const [bodyEmphasizedFont, bodyEmphasizedFontColor, bodyEmphasizedDisabledFontColor, bodyEmphasizedFontFamily, bodyEmphasizedFontWeight, bodyEmphasizedFontSize, bodyEmphasizedFontLineHeight] = createFontTokens(tokenNames.bodyEmphasizedFont, tokenValues.bodyEmphasizedFont, tokenValues.bodyEmphasizedFontColor, tokenValues.bodyEmphasizedDisabledFontColor, tokenValues.bodyEmphasizedFontFamily, tokenValues.bodyEmphasizedFontWeight, tokenValues.bodyEmphasizedFontSize, tokenValues.bodyEmphasizedFontLineHeight);
+export const [bodyPlus1Font, bodyPlus1FontColor, bodyPlus1DisabledFontColor, bodyPlus1FontFamily, bodyPlus1FontWeight, bodyPlus1FontSize, bodyPlus1FontLineHeight] = createFontTokens(tokenNames.bodyPlus1Font, tokenValues.bodyPlus1Font, tokenValues.bodyPlus1FontColor, tokenValues.bodyPlus1DisabledFontColor, tokenValues.bodyPlus1FontFamily, tokenValues.bodyPlus1FontWeight, tokenValues.bodyPlus1FontSize, tokenValues.bodyPlus1FontLineHeight);
+export const [bodyPlus1EmphasizedFont, bodyPlus1EmphasizedFontColor, bodyPlus1EmphasizedDisabledFontColor, bodyPlus1EmphasizedFontFamily, bodyPlus1EmphasizedFontWeight, bodyPlus1EmphasizedFontSize, bodyPlus1EmphasizedFontLineHeight] = createFontTokens(tokenNames.bodyPlus1EmphasizedFont, tokenValues.bodyPlus1EmphasizedFont, tokenValues.bodyPlus1EmphasizedFontColor, tokenValues.bodyPlus1EmphasizedDisabledFontColor, tokenValues.bodyPlus1EmphasizedFontFamily, tokenValues.bodyPlus1EmphasizedFontWeight, tokenValues.bodyPlus1EmphasizedFontSize, tokenValues.bodyPlus1EmphasizedFontLineHeight);
+export const [groupHeaderFont, groupHeaderFontColor, groupHeaderDisabledFontColor, groupHeaderFontFamily, groupHeaderFontWeight, groupHeaderFontSize, groupHeaderFontLineHeight] = createFontTokens(tokenNames.groupHeaderFont, tokenValues.groupHeaderFont, tokenValues.groupHeaderFontColor, tokenValues.groupHeaderDisabledFontColor, tokenValues.groupHeaderFontFamily, tokenValues.groupHeaderFontWeight, tokenValues.groupHeaderFontSize, tokenValues.groupHeaderFontLineHeight);
+export const [controlLabelFont, controlLabelFontColor, controlLabelDisabledFontColor, controlLabelFontFamily, controlLabelFontWeight, controlLabelFontSize, controlLabelFontLineHeight] = createFontTokens(tokenNames.controlLabelFont, tokenValues.controlLabelFont, tokenValues.controlLabelFontColor, tokenValues.controlLabelDisabledFontColor, tokenValues.controlLabelFontFamily, tokenValues.controlLabelFontWeight, tokenValues.controlLabelFontSize, tokenValues.controlLabelFontLineHeight);
+export const [buttonLabelFont, buttonLabelFontColor, buttonLabelDisabledFontColor, buttonLabelFontFamily, buttonLabelFontWeight, buttonLabelFontSize, buttonLabelFontLineHeight] = createFontTokens(tokenNames.buttonLabelFont, tokenValues.buttonLabelFont, tokenValues.buttonLabelFontColor, tokenValues.buttonLabelDisabledFontColor, tokenValues.buttonLabelFontFamily, tokenValues.buttonLabelFontWeight, tokenValues.buttonLabelFontSize, tokenValues.buttonLabelFontLineHeight);
+export const [tooltipCaptionFont, tooltipCaptionFontColor, tooltipCaptionDisabledFontColor, tooltipCaptionFontFamily, tooltipCaptionFontWeight, tooltipCaptionFontSize, tooltipCaptionFontLineHeight] = createFontTokens(tokenNames.tooltipCaptionFont, tokenValues.tooltipCaptionFont, tokenValues.tooltipCaptionFontColor, tokenValues.tooltipCaptionDisabledFontColor, tokenValues.tooltipCaptionFontFamily, tokenValues.tooltipCaptionFontWeight, tokenValues.tooltipCaptionFontSize, tokenValues.tooltipCaptionFontLineHeight);
+export const [errorTextFont, errorTextFontColor, errorTextDisabledFontColor, errorTextFontFamily, errorTextFontWeight, errorTextFontSize, errorTextFontLineHeight] = createFontTokens(tokenNames.errorTextFont, tokenValues.errorTextFont, tokenValues.errorTextFontColor, tokenValues.errorTextDisabledFontColor, tokenValues.errorTextFontFamily, tokenValues.errorTextFontWeight, tokenValues.errorTextFontSize, tokenValues.errorTextFontLineHeight);
+export const [tableHeaderFont, tableHeaderFontColor, tableHeaderDisabledFontColor, tableHeaderFontFamily, tableHeaderFontWeight, tableHeaderFontSize, tableHeaderFontLineHeight] = createFontTokens(tokenNames.tableHeaderFont, tokenValues.tableHeaderFont, tokenValues.tableHeaderFontColor, tokenValues.tableHeaderDisabledFontColor, tokenValues.tableHeaderFontFamily, tokenValues.tableHeaderFontWeight, tokenValues.tableHeaderFontSize, tokenValues.tableHeaderFontLineHeight);
+export const [mentionFont, mentionFontColor, mentionDisabledFontColor, mentionFontFamily, mentionFontWeight, mentionFontSize, mentionFontLineHeight] = createFontTokens(tokenNames.mentionFont, tokenValues.mentionFont, tokenValues.mentionFontColor, tokenValues.mentionDisabledFontColor, tokenValues.mentionFontFamily, tokenValues.mentionFontWeight, tokenValues.mentionFontSize, tokenValues.mentionFontLineHeight);
+// #endregion
+// #region text transform tokens
+export const groupHeaderTextTransform = createStringToken(tokenNames.groupHeaderTextTransform, tokenValues.groupHeaderTextTransform);
+// #endregion
+// #region animation tokens
+export const smallDelay = createStringToken(tokenNames.smallDelay, tokenValues.smallDelay);
+export const mediumDelay = createStringToken(tokenNames.mediumDelay, tokenValues.mediumDelay);
+export const largeDelay = createStringToken(tokenNames.largeDelay, tokenValues.largeDelay);
+// #endregion
+// #region helpers
+function createFontTokens(fontTokenName, font, fontColor, disabledFontColor, fontFamily, fontWeight, fontSize, fontLineHeight) {
     const fontNameParts = fontTokenName.split('-font');
     const tokenPrefixWithoutFont = fontNameParts[0];
-    if (tokenPrefixWithoutFont === undefined || fontNameParts[1] !== '') {
-        throw new Error(`fontTokenName value of ${fontTokenName} did not have the expected '-font' suffix`);
-    }
-    const fontColorToken = DesignToken.create(styleNameFromTokenName(`${tokenPrefixWithoutFont}-font-color`)).withDefault((element) => colorFunction(element));
-    const fontDisabledColorToken = DesignToken.create(styleNameFromTokenName(`${tokenPrefixWithoutFont}-disabled-font-color`)).withDefault((element) => disabledColorFunction(element));
-    const fontFamilyToken = DesignToken.create(styleNameFromTokenName(`${tokenPrefixWithoutFont}-font-family`)).withDefault(familyWithFallback);
-    const fontWeightToken = DesignToken.create(styleNameFromTokenName(`${tokenPrefixWithoutFont}-font-weight`)).withDefault(weight);
-    const fontSizeToken = DesignToken.create(styleNameFromTokenName(`${tokenPrefixWithoutFont}-font-size`)).withDefault(size);
-    const fontLineHeightToken = DesignToken.create(styleNameFromTokenName(`${tokenPrefixWithoutFont}-font-line-height`)).withDefault(lineHeight);
+    const fontFamilyWithFallback = `${fontFamily}, ${fontFamily} Fallback`;
+    const fontToken = createStringToken(fontTokenName, font);
+    const fontColorToken = createThemeColorToken(`${tokenPrefixWithoutFont}-font-color`, fontColor);
+    const fontDisabledColorToken = createThemeColorToken(`${tokenPrefixWithoutFont}-disabled-font-color`, disabledFontColor);
+    const fontFamilyToken = createStringToken(`${tokenPrefixWithoutFont}-font-family`, fontFamilyWithFallback);
+    const fontWeightToken = createStringToken(`${tokenPrefixWithoutFont}-font-weight`, fontWeight);
+    const fontSizeToken = createStringToken(`${tokenPrefixWithoutFont}-font-size`, fontSize);
+    const fontLineHeightToken = createStringToken(`${tokenPrefixWithoutFont}-font-line-height`, fontLineHeight);
     return [
         fontToken,
         fontColorToken,
@@ -166,55 +151,22 @@ function createFontTokens(fontTokenName, colorFunction, disabledColorFunction, f
         fontLineHeightToken
     ];
 }
-function getColorForTheme(element, lightThemeColor, darkThemeColor, colorThemeColor) {
-    switch (theme.getValueFor(element)) {
-        case Theme.light:
-            return lightThemeColor;
-        case Theme.dark:
-            return darkThemeColor;
-        case Theme.color:
-            return colorThemeColor;
-        default:
-            return lightThemeColor;
-    }
-}
-function getWarningColorForTheme(element) {
-    return getColorForTheme(element, Warning100LightUi, Warning100DarkUi, White);
-}
-function getFailColorForTheme(element) {
-    return getColorForTheme(element, Fail100LightUi, Fail100DarkUi, White);
-}
-function getPassColorForTheme(element) {
-    return getColorForTheme(element, Pass100LightUi, Pass100DarkUi, White);
-}
-function getInformationColorForTheme(element) {
-    return getColorForTheme(element, Information100LightUi, Information100DarkUi, White);
-}
-function getDefaultLineColorForTheme(element) {
-    return getColorForTheme(element, Black91, Black15, White);
-}
-function getDefaultFontColorForTheme(element) {
-    return getColorForTheme(element, Black91, Black15, White);
-}
-function getFillSelectedColorForTheme(element) {
-    return getColorForTheme(element, DigitalGreenLight, PowerGreen, White);
-}
-function getFillHoverColorForTheme(element) {
-    return getColorForTheme(element, Black91, Black15, White);
-}
-function getFillDownColorForTheme(element) {
-    return getColorForTheme(element, Black91, Black15, White);
+function createStringToken(tokenName, tokenValue) {
+    return DesignToken.create(styleNameFromTokenName(tokenName)).withDefault(tokenValue);
 }
-function getModalBackdropForTheme(element) {
-    switch (theme.getValueFor(element)) {
-        case Theme.light:
-            return hexToRgbaCssColor(Black, 0.3);
-        case Theme.dark:
-            return hexToRgbaCssColor(Black, 0.6);
-        case Theme.color:
-            return hexToRgbaCssColor(Black, 0.6);
-        default:
-            return hexToRgbaCssColor(Black, 0.3);
-    }
+function createThemeColorToken(tokenName, themeColor) {
+    return DesignToken.create(styleNameFromTokenName(tokenName)).withDefault((element) => {
+        switch (theme.getValueFor(element)) {
+            case Theme.light:
+                return themeColor.light;
+            case Theme.dark:
+                return themeColor.dark;
+            case Theme.color:
+                return themeColor.color;
+            default:
+                return themeColor.light;
+        }
+    });
 }
+// #endregion
 //# sourceMappingURL=design-tokens.js.map