@ni/spright-components 6.3.2 → 6.3.3

package/dist/all-components-bundle.js

@@ -14803,6 +14803,258 @@
    */
   const focusVisible = `:${focusVisible$1}`;
 
+  const Theme = {
+      light: 'light',
+      dark: 'dark',
+      color: 'color'
+  };
+
+  /**
+   * Design token names should follow the token naming convention:
+   * See: https://github.com/ni/nimble/blob/main/packages/nimble-components/CONTRIBUTING.md#token-naming
+   */
+  const tokenNames = {
+      actionRgbPartialColor: 'action-rgb-partial-color',
+      applicationBackgroundColor: 'application-background-color',
+      dividerBackgroundColor: 'divider-background-color',
+      headerBackgroundColor: 'header-background-color',
+      sectionBackgroundColor: 'section-background-color',
+      sectionBackgroundImage: 'section-background-image',
+      buttonFillPrimaryColor: 'button-fill-primary-color',
+      buttonPrimaryFontColor: 'button-primary-font-color',
+      buttonFillAccentColor: 'button-fill-accent-color',
+      buttonAccentBlockFontColor: 'button-accent-block-font-color',
+      buttonAccentOutlineFontColor: 'button-accent-outline-font-color',
+      buttonBorderAccentOutlineColor: 'button-border-accent-outline-color',
+      fillSelectedColor: 'fill-selected-color',
+      fillSelectedRgbPartialColor: 'fill-selected-rgb-partial-color',
+      fillHoverSelectedColor: 'fill-hover-selected-color',
+      fillHoverColor: 'fill-hover-color',
+      fillHoverRgbPartialColor: 'fill-hover-rgb-partial-color',
+      fillDownColor: 'fill-down-color',
+      borderColor: 'border-color',
+      borderRgbPartialColor: 'border-rgb-partial-color',
+      failColor: 'fail-color',
+      warningColor: 'warning-color',
+      passColor: 'pass-color',
+      informationColor: 'information-color',
+      borderHoverColor: 'border-hover-color',
+      iconColor: 'icon-color',
+      modalBackdropColor: 'modal-backdrop-color',
+      popupBorderColor: 'popup-border-color',
+      cardBorderColor: 'card-border-color',
+      tagFillColor: 'tag-fill-color',
+      controlHeight: 'control-height',
+      controlSlimHeight: 'control-slim-height',
+      smallPadding: 'small-padding',
+      mediumPadding: 'medium-padding',
+      standardPadding: 'standard-padding',
+      largePadding: 'large-padding',
+      labelHeight: 'label-height',
+      borderWidth: 'border-width',
+      dividerWidth: 'divider-width',
+      iconSize: 'icon-size',
+      groupHeaderTextTransform: 'group-header-text-transform',
+      drawerWidth: 'drawer-width',
+      dialogSmallWidth: 'dialog-small-width',
+      dialogSmallHeight: 'dialog-small-height',
+      dialogSmallMaxHeight: 'dialog-small-max-height',
+      dialogLargeWidth: 'dialog-large-width',
+      dialogLargeHeight: 'dialog-large-height',
+      dialogLargeMaxHeight: 'dialog-large-max-height',
+      menuMinWidth: 'menu-min-width',
+      bannerGapSize: 'banner-gap-size',
+      spinnerSmallHeight: 'spinner-small-height',
+      spinnerMediumHeight: 'spinner-medium-height',
+      spinnerLargeHeight: 'spinner-large-height',
+      tableFitRowsHeight: 'table-fit-rows-height',
+      smallDelay: 'small-delay',
+      mediumDelay: 'medium-delay',
+      largeDelay: 'large-delay',
+      headlinePlus1Font: 'headline-plus-1-font',
+      headlineFont: 'headline-font',
+      tableHeaderFont: 'table-header-font',
+      titlePlus2Font: 'title-plus-2-font',
+      titlePlus1Font: 'title-plus-1-font',
+      titleFont: 'title-font',
+      subtitlePlus1Font: 'subtitle-plus-1-font',
+      subtitleFont: 'subtitle-font',
+      linkFont: 'link-font',
+      linkActiveFont: 'link-active-font',
+      linkProminentFont: 'link-prominent-font',
+      linkActiveProminentFont: 'link-active-prominent-font',
+      placeholderFont: 'placeholder-font',
+      bodyFont: 'body-font',
+      bodyEmphasizedFont: 'body-emphasized-font',
+      bodyPlus1Font: 'body-plus-1-font',
+      bodyPlus1EmphasizedFont: 'body-plus-1-emphasized-font',
+      groupHeaderFont: 'group-header-font',
+      controlLabelFont: 'control-label-font',
+      buttonLabelFont: 'button-label-font',
+      tooltipCaptionFont: 'tooltip-caption-font',
+      tooltipBackgroundColor: 'tooltip-background-color',
+      errorTextFont: 'error-text-font',
+      tableRowBorderColor: 'table-row-border-color',
+      elevation1BoxShadow: 'elevation-1-box-shadow',
+      elevation2BoxShadow: 'elevation-2-box-shadow',
+      elevation3BoxShadow: 'elevation-3-box-shadow',
+      graphGridlineColor: 'graph-gridline-color',
+      graphTrace1Color: 'graph-trace-1-color',
+      graphTrace2Color: 'graph-trace-2-color',
+      graphTrace3Color: 'graph-trace-3-color',
+      graphTrace4Color: 'graph-trace-4-color',
+      graphTrace5Color: 'graph-trace-5-color',
+      graphTrace6Color: 'graph-trace-6-color',
+      graphTrace7Color: 'graph-trace-7-color',
+      graphTrace8Color: 'graph-trace-8-color',
+      mentionFont: 'mention-font',
+      calendarEventBackgroundStaticColor: 'calendar-event-background-static-color',
+      calendarEventBackgroundDynamicColor: 'calendar-event-background-dynamic-color',
+      calendarEventBackgroundTransientColor: 'calendar-event-background-transient-color',
+      calendarEventBorderStaticColor: 'calendar-event-border-static-color',
+      calendarEventBorderTransientColor: 'calendar-event-border-transient-color',
+      calendarEventStaticFontColor: 'calendar-event-static-font-color',
+      calendarEventDynamicFontColor: 'calendar-event-dynamic-font-color',
+      calendarEventTransientFontColor: 'calendar-event-transient-font-color',
+      calendarEventBackgroundHoverStaticColor: 'calendar-event-background-hover-static-color',
+      calendarEventBackgroundHoverDynamicColor: 'calendar-event-background-hover-dynamic-color',
+      calendarEventBackgroundHoverTransientColor: 'calendar-event-background-hover-transient-color',
+      calendarEventOuterBorderHighlightedColor: 'calendar-event-outer-border-highlighted-color',
+      calendarRowBackgroundSelectedColor: 'calendar-row-background-selected-color',
+      calendarRowBackgroundConflictColor: 'calendar-row-background-conflict-color',
+      calendarEventFillBlockedColor: 'calendar-event-fill-blocked-color',
+      calendarGrabHandleBackgroundColor: 'calendar-grab-handle-background-color',
+      calendarGridBorderColor: 'calendar-grid-border-color',
+      calendarGroupHeaderBackgroundColor: 'calendar-group-header-background-color'
+  };
+  const prefix = 'ni-nimble';
+  const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
+
+  const template$S = html `<slot></slot>`;
+
+  const styles$15 = css `
+    ${display$1('contents')}
+`;
+
+  /**
+   * Observable class to subscribe to changes in the page's lang attribute
+   */
+  class DocumentElementLang {
+      constructor() {
+          this.lang = document.documentElement.lang;
+          const observer = new MutationObserver(mutations => {
+              for (const mutation of mutations) {
+                  if (mutation.type === 'attributes'
+                      && mutation.attributeName === 'lang') {
+                      this.lang = mutation.target.lang;
+                  }
+              }
+          });
+          observer.observe(document.documentElement, {
+              attributeFilter: ['lang']
+          });
+      }
+  }
+  __decorate([
+      observable
+  ], DocumentElementLang.prototype, "lang", void 0);
+  const documentElementLang = new DocumentElementLang();
+
+  function isValidLang(value) {
+      try {
+          // We are relying on the Locale constructor to validate the value
+          // eslint-disable-next-line no-new
+          new Intl.Locale(value);
+          return true;
+      }
+      catch (e) {
+          return false;
+      }
+  }
+  const lang = DesignToken.create({
+      name: 'lang',
+      cssCustomPropertyName: null
+  }).withDefault(() => (isValidLang(documentElementLang.lang) ? documentElementLang.lang : 'en-US'));
+  // Not represented as a CSS Custom Property, instead available
+  // as an attribute of theme provider.
+  const direction = DesignToken.create({
+      name: 'direction',
+      cssCustomPropertyName: null
+  }).withDefault(Direction.ltr);
+  const theme = DesignToken.create({
+      name: 'theme',
+      cssCustomPropertyName: null
+  }).withDefault(Theme.light);
+  /**
+   * The ThemeProvider implementation. Add this component to the page and set its `theme` attribute to control
+   * the values of design tokens that provide colors and fonts as CSS custom properties to any descendant components.
+   * @internal
+   */
+  class ThemeProvider extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          this.theme = Theme.light;
+          this.langIsInvalid = false;
+      }
+      get validity() {
+          return {
+              invalidLang: this.langIsInvalid
+          };
+      }
+      checkValidity() {
+          return !this.langIsInvalid;
+      }
+      langChanged(_prev, next) {
+          if (next === null || next === undefined) {
+              lang.deleteValueFor(this);
+              this.langIsInvalid = false;
+              return;
+          }
+          if (isValidLang(next)) {
+              lang.setValueFor(this, next);
+              this.langIsInvalid = false;
+          }
+          else {
+              lang.deleteValueFor(this);
+              this.langIsInvalid = true;
+          }
+      }
+      directionChanged(_prev, next) {
+          if (next !== undefined && next !== null) {
+              direction.setValueFor(this, next);
+          }
+          else {
+              direction.deleteValueFor(this);
+          }
+      }
+      themeChanged(_prev, next) {
+          if (next !== undefined && next !== null) {
+              theme.setValueFor(this, next);
+          }
+          else {
+              theme.deleteValueFor(this);
+          }
+      }
+  }
+  __decorate([
+      attr()
+  ], ThemeProvider.prototype, "lang", void 0);
+  __decorate([
+      attr()
+  ], ThemeProvider.prototype, "direction", void 0);
+  __decorate([
+      attr()
+  ], ThemeProvider.prototype, "theme", void 0);
+  const nimbleDesignSystemProvider = ThemeProvider.compose({
+      baseName: 'theme-provider',
+      styles: styles$15,
+      template: template$S
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(nimbleDesignSystemProvider());
+  const themeProviderTag = 'nimble-theme-provider';
+
   /**
    * Ensures that an input number does not exceed a max value and is not less than a min value.
    * @param i - the number to clamp
@@ -16029,258 +16281,6 @@
   const MediumDelay = "0.15s"; // Medium animation delay for control state change animation
   const LargeDelay = "0.25s"; // Long animation delay used for control state change animation
 
-  const Theme = {
-      light: 'light',
-      dark: 'dark',
-      color: 'color'
-  };
-
-  /**
-   * Design token names should follow the token naming convention:
-   * See: https://github.com/ni/nimble/blob/main/packages/nimble-components/CONTRIBUTING.md#token-naming
-   */
-  const tokenNames = {
-      actionRgbPartialColor: 'action-rgb-partial-color',
-      applicationBackgroundColor: 'application-background-color',
-      dividerBackgroundColor: 'divider-background-color',
-      headerBackgroundColor: 'header-background-color',
-      sectionBackgroundColor: 'section-background-color',
-      sectionBackgroundImage: 'section-background-image',
-      buttonFillPrimaryColor: 'button-fill-primary-color',
-      buttonPrimaryFontColor: 'button-primary-font-color',
-      buttonFillAccentColor: 'button-fill-accent-color',
-      buttonAccentBlockFontColor: 'button-accent-block-font-color',
-      buttonAccentOutlineFontColor: 'button-accent-outline-font-color',
-      buttonBorderAccentOutlineColor: 'button-border-accent-outline-color',
-      fillSelectedColor: 'fill-selected-color',
-      fillSelectedRgbPartialColor: 'fill-selected-rgb-partial-color',
-      fillHoverSelectedColor: 'fill-hover-selected-color',
-      fillHoverColor: 'fill-hover-color',
-      fillHoverRgbPartialColor: 'fill-hover-rgb-partial-color',
-      fillDownColor: 'fill-down-color',
-      borderColor: 'border-color',
-      borderRgbPartialColor: 'border-rgb-partial-color',
-      failColor: 'fail-color',
-      warningColor: 'warning-color',
-      passColor: 'pass-color',
-      informationColor: 'information-color',
-      borderHoverColor: 'border-hover-color',
-      iconColor: 'icon-color',
-      modalBackdropColor: 'modal-backdrop-color',
-      popupBorderColor: 'popup-border-color',
-      cardBorderColor: 'card-border-color',
-      tagFillColor: 'tag-fill-color',
-      controlHeight: 'control-height',
-      controlSlimHeight: 'control-slim-height',
-      smallPadding: 'small-padding',
-      mediumPadding: 'medium-padding',
-      standardPadding: 'standard-padding',
-      largePadding: 'large-padding',
-      labelHeight: 'label-height',
-      borderWidth: 'border-width',
-      dividerWidth: 'divider-width',
-      iconSize: 'icon-size',
-      groupHeaderTextTransform: 'group-header-text-transform',
-      drawerWidth: 'drawer-width',
-      dialogSmallWidth: 'dialog-small-width',
-      dialogSmallHeight: 'dialog-small-height',
-      dialogSmallMaxHeight: 'dialog-small-max-height',
-      dialogLargeWidth: 'dialog-large-width',
-      dialogLargeHeight: 'dialog-large-height',
-      dialogLargeMaxHeight: 'dialog-large-max-height',
-      menuMinWidth: 'menu-min-width',
-      bannerGapSize: 'banner-gap-size',
-      spinnerSmallHeight: 'spinner-small-height',
-      spinnerMediumHeight: 'spinner-medium-height',
-      spinnerLargeHeight: 'spinner-large-height',
-      tableFitRowsHeight: 'table-fit-rows-height',
-      smallDelay: 'small-delay',
-      mediumDelay: 'medium-delay',
-      largeDelay: 'large-delay',
-      headlinePlus1Font: 'headline-plus-1-font',
-      headlineFont: 'headline-font',
-      tableHeaderFont: 'table-header-font',
-      titlePlus2Font: 'title-plus-2-font',
-      titlePlus1Font: 'title-plus-1-font',
-      titleFont: 'title-font',
-      subtitlePlus1Font: 'subtitle-plus-1-font',
-      subtitleFont: 'subtitle-font',
-      linkFont: 'link-font',
-      linkActiveFont: 'link-active-font',
-      linkProminentFont: 'link-prominent-font',
-      linkActiveProminentFont: 'link-active-prominent-font',
-      placeholderFont: 'placeholder-font',
-      bodyFont: 'body-font',
-      bodyEmphasizedFont: 'body-emphasized-font',
-      bodyPlus1Font: 'body-plus-1-font',
-      bodyPlus1EmphasizedFont: 'body-plus-1-emphasized-font',
-      groupHeaderFont: 'group-header-font',
-      controlLabelFont: 'control-label-font',
-      buttonLabelFont: 'button-label-font',
-      tooltipCaptionFont: 'tooltip-caption-font',
-      tooltipBackgroundColor: 'tooltip-background-color',
-      errorTextFont: 'error-text-font',
-      tableRowBorderColor: 'table-row-border-color',
-      elevation1BoxShadow: 'elevation-1-box-shadow',
-      elevation2BoxShadow: 'elevation-2-box-shadow',
-      elevation3BoxShadow: 'elevation-3-box-shadow',
-      graphGridlineColor: 'graph-gridline-color',
-      graphTrace1Color: 'graph-trace-1-color',
-      graphTrace2Color: 'graph-trace-2-color',
-      graphTrace3Color: 'graph-trace-3-color',
-      graphTrace4Color: 'graph-trace-4-color',
-      graphTrace5Color: 'graph-trace-5-color',
-      graphTrace6Color: 'graph-trace-6-color',
-      graphTrace7Color: 'graph-trace-7-color',
-      graphTrace8Color: 'graph-trace-8-color',
-      mentionFont: 'mention-font',
-      calendarEventBackgroundStaticColor: 'calendar-event-background-static-color',
-      calendarEventBackgroundDynamicColor: 'calendar-event-background-dynamic-color',
-      calendarEventBackgroundTransientColor: 'calendar-event-background-transient-color',
-      calendarEventBorderStaticColor: 'calendar-event-border-static-color',
-      calendarEventBorderTransientColor: 'calendar-event-border-transient-color',
-      calendarEventStaticFontColor: 'calendar-event-static-font-color',
-      calendarEventDynamicFontColor: 'calendar-event-dynamic-font-color',
-      calendarEventTransientFontColor: 'calendar-event-transient-font-color',
-      calendarEventBackgroundHoverStaticColor: 'calendar-event-background-hover-static-color',
-      calendarEventBackgroundHoverDynamicColor: 'calendar-event-background-hover-dynamic-color',
-      calendarEventBackgroundHoverTransientColor: 'calendar-event-background-hover-transient-color',
-      calendarEventOuterBorderHighlightedColor: 'calendar-event-outer-border-highlighted-color',
-      calendarRowBackgroundSelectedColor: 'calendar-row-background-selected-color',
-      calendarRowBackgroundConflictColor: 'calendar-row-background-conflict-color',
-      calendarEventFillBlockedColor: 'calendar-event-fill-blocked-color',
-      calendarGrabHandleBackgroundColor: 'calendar-grab-handle-background-color',
-      calendarGridBorderColor: 'calendar-grid-border-color',
-      calendarGroupHeaderBackgroundColor: 'calendar-group-header-background-color'
-  };
-  const prefix = 'ni-nimble';
-  const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
-
-  const template$S = html `<slot></slot>`;
-
-  const styles$15 = css `
-    ${display$1('contents')}
-`;
-
-  /**
-   * Observable class to subscribe to changes in the page's lang attribute
-   */
-  class DocumentElementLang {
-      constructor() {
-          this.lang = document.documentElement.lang;
-          const observer = new MutationObserver(mutations => {
-              for (const mutation of mutations) {
-                  if (mutation.type === 'attributes'
-                      && mutation.attributeName === 'lang') {
-                      this.lang = mutation.target.lang;
-                  }
-              }
-          });
-          observer.observe(document.documentElement, {
-              attributeFilter: ['lang']
-          });
-      }
-  }
-  __decorate([
-      observable
-  ], DocumentElementLang.prototype, "lang", void 0);
-  const documentElementLang = new DocumentElementLang();
-
-  function isValidLang(value) {
-      try {
-          // We are relying on the Locale constructor to validate the value
-          // eslint-disable-next-line no-new
-          new Intl.Locale(value);
-          return true;
-      }
-      catch (e) {
-          return false;
-      }
-  }
-  const lang = DesignToken.create({
-      name: 'lang',
-      cssCustomPropertyName: null
-  }).withDefault(() => (isValidLang(documentElementLang.lang) ? documentElementLang.lang : 'en-US'));
-  // Not represented as a CSS Custom Property, instead available
-  // as an attribute of theme provider.
-  const direction = DesignToken.create({
-      name: 'direction',
-      cssCustomPropertyName: null
-  }).withDefault(Direction.ltr);
-  const theme = DesignToken.create({
-      name: 'theme',
-      cssCustomPropertyName: null
-  }).withDefault(Theme.light);
-  /**
-   * The ThemeProvider implementation. Add this component to the page and set its `theme` attribute to control
-   * the values of design tokens that provide colors and fonts as CSS custom properties to any descendant components.
-   * @internal
-   */
-  class ThemeProvider extends FoundationElement {
-      constructor() {
-          super(...arguments);
-          this.theme = Theme.light;
-          this.langIsInvalid = false;
-      }
-      get validity() {
-          return {
-              invalidLang: this.langIsInvalid
-          };
-      }
-      checkValidity() {
-          return !this.langIsInvalid;
-      }
-      langChanged(_prev, next) {
-          if (next === null || next === undefined) {
-              lang.deleteValueFor(this);
-              this.langIsInvalid = false;
-              return;
-          }
-          if (isValidLang(next)) {
-              lang.setValueFor(this, next);
-              this.langIsInvalid = false;
-          }
-          else {
-              lang.deleteValueFor(this);
-              this.langIsInvalid = true;
-          }
-      }
-      directionChanged(_prev, next) {
-          if (next !== undefined && next !== null) {
-              direction.setValueFor(this, next);
-          }
-          else {
-              direction.deleteValueFor(this);
-          }
-      }
-      themeChanged(_prev, next) {
-          if (next !== undefined && next !== null) {
-              theme.setValueFor(this, next);
-          }
-          else {
-              theme.deleteValueFor(this);
-          }
-      }
-  }
-  __decorate([
-      attr()
-  ], ThemeProvider.prototype, "lang", void 0);
-  __decorate([
-      attr()
-  ], ThemeProvider.prototype, "direction", void 0);
-  __decorate([
-      attr()
-  ], ThemeProvider.prototype, "theme", void 0);
-  const nimbleDesignSystemProvider = ThemeProvider.compose({
-      baseName: 'theme-provider',
-      styles: styles$15,
-      template: template$S
-  });
-  DesignSystem.getOrCreate()
-      .withPrefix('nimble')
-      .register(nimbleDesignSystemProvider());
-  const themeProviderTag = 'nimble-theme-provider';
-
   /**
    * Convert a hexadecimal color string to an RGBA CSS color string
    * Example: '#ff0102' to 'rgba(255, 1, 2, 1)'
@@ -16293,157 +16293,305 @@
       return `rgba(${r * 255}, ${g * 255}, ${b * 255}, ${alpha})`;
   }
 
-  // Color Tokens
-  const actionRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.actionRgbPartialColor)).withDefault((element) => hexToRgbPartial(getColorForTheme(element, Black91, Black15, White)));
-  const applicationBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.applicationBackgroundColor)).withDefault((element) => getColorForTheme(element, White, Black85, ForestGreen));
-  DesignToken.create(styleNameFromTokenName(tokenNames.headerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black7, Black88, ForestGreen));
-  DesignToken.create(styleNameFromTokenName(tokenNames.sectionBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
-  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})`;
-  });
-  DesignToken.create(styleNameFromTokenName(tokenNames.dividerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
-  const fillSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.2));
-  const fillSelectedRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillSelectedColorForTheme(element)));
-  const fillHoverSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.15));
-  const fillHoverColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverColor)).withDefault((element) => hexToRgbaCssColor(getFillHoverColorForTheme(element), 0.1));
-  DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillHoverColorForTheme(element)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.fillDownColor)).withDefault((element) => hexToRgbaCssColor(getFillDownColorForTheme(element), 0.15));
-  const borderColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderColor)).withDefault((element) => getDefaultLineColorForTheme(element));
-  const borderRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderRgbPartialColor)).withDefault((element) => hexToRgbPartial(getDefaultLineColorForTheme(element)));
-  const failColor = DesignToken.create(styleNameFromTokenName(tokenNames.failColor)).withDefault((element) => getFailColorForTheme(element));
-  const warningColor = DesignToken.create(styleNameFromTokenName(tokenNames.warningColor)).withDefault((element) => getWarningColorForTheme(element));
-  const passColor = DesignToken.create(styleNameFromTokenName(tokenNames.passColor)).withDefault((element) => getPassColorForTheme(element));
-  const informationColor = DesignToken.create(styleNameFromTokenName(tokenNames.informationColor)).withDefault((element) => getInformationColorForTheme(element));
-  const borderHoverColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderHoverColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, PowerGreen, White));
-  // Component Color Tokens
-  const iconColor = DesignToken.create(styleNameFromTokenName(tokenNames.iconColor)).withDefault((element) => getColorForTheme(element, Black91, Black15, White));
-  const modalBackdropColor = DesignToken.create(styleNameFromTokenName(tokenNames.modalBackdropColor)).withDefault((element) => getModalBackdropForTheme(element));
-  const popupBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBorderColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.3));
-  const cardBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.cardBorderColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.1));
-  DesignToken.create(styleNameFromTokenName(tokenNames.graphGridlineColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.2));
-  DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace1Color)).withDefault((element) => getColorForTheme(element, NiIndigoDark2, NiSky, White));
-  DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace2Color)).withDefault((element) => getColorForTheme(element, NiScarletDark1, NiScarlet, hexToRgbaCssColor(White, 0.7)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace3Color)).withDefault((element) => getColorForTheme(element, NiFernDark1, NiFern, hexToRgbaCssColor(White, 0.4)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace4Color)).withDefault((element) => getColorForTheme(element, NiPlumDark1, NiSeaLight, hexToRgbaCssColor(White, 0.25)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace5Color)).withDefault((element) => getColorForTheme(element, NiSeaDark2, NiSea, hexToRgbaCssColor(White, 0.55)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace6Color)).withDefault((element) => getColorForTheme(element, NiTulip, NiTulip, hexToRgbaCssColor(White, 0.85)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace7Color)).withDefault((element) => getColorForTheme(element, NiScarletDark3, NiHoneyLight, hexToRgbaCssColor(White, 0.325)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace8Color)).withDefault((element) => getColorForTheme(element, NiIndigo, NiIndigo, hexToRgbaCssColor(White, 0.625)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.tooltipBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black85, ForestGreen));
-  const tableRowBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.tableRowBorderColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
-  DesignToken.create(styleNameFromTokenName(tokenNames.tagFillColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.1));
-  const buttonFillPrimaryColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonFillPrimaryColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(Black91, 0.75), hexToRgbaCssColor(Black15, 0.3), hexToRgbaCssColor(White, 0.3)));
-  const buttonPrimaryFontColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonPrimaryFontColor)).withDefault((element) => getColorForTheme(element, Black15, Black15, White));
-  const buttonFillAccentColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonFillAccentColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark, DigitalGreenLight, hexToRgbaCssColor(White, 0.1)));
-  const buttonAccentBlockFontColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonAccentBlockFontColor)).withDefault((element) => getColorForTheme(element, White, Black15, White));
-  const buttonAccentOutlineFontColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonAccentOutlineFontColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark105, PowerGreen, White));
-  const buttonBorderAccentOutlineColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonBorderAccentOutlineColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, PowerGreen, hexToRgbaCssColor(White, 0.3)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundStaticColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight10, PowerGreen10, PowerGreen10));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundDynamicColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark105, DigitalGreenDark, DigitalGreenDark));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundTransientColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark105, DigitalGreenDark, DigitalGreenDark));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBorderStaticColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, DigitalGreenLight));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBorderTransientColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, hexToRgbaCssColor(PowerGreen, 0.85), hexToRgbaCssColor(PowerGreen, 0.85)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventStaticFontColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, PowerGreenDark50, PowerGreenDark50));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventDynamicFontColor)).withDefault((element) => getColorForTheme(element, White, White, White));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventTransientFontColor)).withDefault((element) => getColorForTheme(element, White, White, White));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverStaticColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight30, PowerGreen30, PowerGreen30));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverDynamicColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, DigitalGreenDark105, DigitalGreenDark105));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverTransientColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, DigitalGreenDark105, DigitalGreenDark105));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventOuterBorderHighlightedColor)).withDefault((element) => getColorForTheme(element, Black88, hexToRgbaCssColor(White, 0.85), hexToRgbaCssColor(White, 0.85)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarRowBackgroundSelectedColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(DigitalGreenLight, 0.2), hexToRgbaCssColor(PowerGreen, 0.2), hexToRgbaCssColor(PowerGreen, 0.2)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarRowBackgroundConflictColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(Fail100LightUi, 0.2), hexToRgbaCssColor(Fail100DarkUi, 0.2), hexToRgbaCssColor(Fail100DarkUi, 0.2)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventFillBlockedColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(Black91, 0.07), Black82, Black82));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarGrabHandleBackgroundColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, PowerGreen, PowerGreen));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarGridBorderColor)).withDefault((element) => getColorForTheme(element, Black22, Black80, Black80));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarGroupHeaderBackgroundColor)).withDefault((element) => getColorForTheme(element, Black7, hexToRgbaCssColor(Black91, 0.1), hexToRgbaCssColor(Black91, 0.1)));
-  // Component Sizing Tokens
-  const controlHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlHeight)).withDefault('32px');
-  const controlSlimHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlSlimHeight)).withDefault('24px');
-  const smallPadding = DesignToken.create(styleNameFromTokenName(tokenNames.smallPadding)).withDefault('4px');
-  const mediumPadding = DesignToken.create(styleNameFromTokenName(tokenNames.mediumPadding)).withDefault('8px');
-  const standardPadding = DesignToken.create(styleNameFromTokenName(tokenNames.standardPadding)).withDefault('16px');
-  const largePadding = DesignToken.create(styleNameFromTokenName(tokenNames.largePadding)).withDefault('24px');
-  DesignToken.create(styleNameFromTokenName(tokenNames.labelHeight)).withDefault('16px');
-  const borderWidth = DesignToken.create(styleNameFromTokenName(tokenNames.borderWidth)).withDefault('1px');
-  DesignToken.create(styleNameFromTokenName(tokenNames.dividerWidth)).withDefault('2px');
-  const iconSize = DesignToken.create(styleNameFromTokenName(tokenNames.iconSize)).withDefault('16px');
-  const drawerWidth = DesignToken.create(styleNameFromTokenName(tokenNames.drawerWidth)).withDefault('784px');
-  const dialogSmallWidth = DesignToken.create(styleNameFromTokenName(tokenNames.dialogSmallWidth)).withDefault('400px');
-  const dialogSmallHeight = DesignToken.create(styleNameFromTokenName(tokenNames.dialogSmallHeight)).withDefault('fit-content');
-  const dialogSmallMaxHeight = DesignToken.create(styleNameFromTokenName(tokenNames.dialogSmallMaxHeight)).withDefault('600px');
-  DesignToken.create(styleNameFromTokenName(tokenNames.dialogLargeWidth)).withDefault('1024px');
-  DesignToken.create(styleNameFromTokenName(tokenNames.dialogLargeHeight)).withDefault('680px');
-  DesignToken.create(styleNameFromTokenName(tokenNames.dialogLargeMaxHeight)).withDefault('680px');
-  const menuMinWidth = DesignToken.create(styleNameFromTokenName(tokenNames.menuMinWidth)).withDefault('176px');
-  DesignToken.create(styleNameFromTokenName(tokenNames.bannerGapSize)).withDefault('1px');
-  const spinnerSmallHeight = DesignToken.create(styleNameFromTokenName(tokenNames.spinnerSmallHeight)).withDefault('16px');
-  DesignToken.create(styleNameFromTokenName(tokenNames.spinnerMediumHeight)).withDefault('32px');
-  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.
-  const tableFitRowsHeight = DesignToken.create(styleNameFromTokenName(tokenNames.tableFitRowsHeight)).withDefault('480px');
-  // Drop Shadow Tokens
-  DesignToken.create(styleNameFromTokenName(tokenNames.elevation1BoxShadow)).withDefault((element) => `0px 1px 4px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.16)}`);
-  const elevation2BoxShadow = DesignToken.create(styleNameFromTokenName(tokenNames.elevation2BoxShadow)).withDefault((element) => `0px 2px 4px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.16)}`);
-  const elevation3BoxShadow = DesignToken.create(styleNameFromTokenName(tokenNames.elevation3BoxShadow)).withDefault((element) => `0px 4px 8px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.3)}`);
-  // Font Tokens
-  createFontTokens(tokenNames.headlineFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Headline1Family, Headline1Weight, Headline1Size, Headline1LineHeight);
-  createFontTokens(tokenNames.headlinePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Headline2Family, Headline2Weight, Headline2Size, Headline2LineHeight);
-  createFontTokens(tokenNames.titlePlus2Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title3Family, Title3Weight, Title3Size, Title3LineHeight);
-  const [titlePlus1Font, titlePlus1FontColor] = createFontTokens(tokenNames.titlePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title2Family, Title2Weight, Title2Size, Title2LineHeight);
-  createFontTokens(tokenNames.titleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title1Family, Title1Weight, Title1Size, Title1LineHeight);
-  const [subtitlePlus1Font] = createFontTokens(tokenNames.subtitlePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle2Family, Subtitle2Weight, Subtitle2Size, Subtitle2LineHeight);
-  const [subtitleFont, subtitleFontColor] = createFontTokens(tokenNames.subtitleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle1Family, Subtitle1Weight, Subtitle1Size, Subtitle1LineHeight);
-  const [linkFont, linkFontColor, linkDisabledFontColor] = createFontTokens(tokenNames.linkFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
-  const [linkActiveFont, linkActiveFontColor] = createFontTokens(tokenNames.linkActiveFont, (element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.75)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
-  const [linkProminentFont, linkProminentFontColor] = createFontTokens(tokenNames.linkProminentFont, (element) => getColorForTheme(element, DigitalGreenDark105, PowerGreen, White), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
-  const [linkActiveProminentFont, linkActiveProminentFontColor] = createFontTokens(tokenNames.linkActiveProminentFont, (element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.75)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
-  const [placeholderFont, placeholderFontColor] = createFontTokens(tokenNames.placeholderFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), PlaceholderFamily, PlaceholderWeight, PlaceholderSize, PlaceholderLineHeight);
-  const [bodyFont, bodyFontColor, bodyDisabledFontColor, bodyFontFamily, bodyFontWeight, bodyFontSize, bodyFontLineHeight] = createFontTokens(tokenNames.bodyFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyFamily, BodyWeight, BodySize, BodyLineHeight);
-  const [bodyEmphasizedFont, bodyEmphasizedFontColor, bodyEmphasizedDisabledFontColor, bodyEmphasizedFontFamily, bodyEmphasizedFontWeight] = createFontTokens(tokenNames.bodyEmphasizedFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyEmphasizedFamily, BodyEmphasizedWeight, BodyEmphasizedSize, BodyEmphasizedLineHeight);
-  createFontTokens(tokenNames.bodyPlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Body2Family, Body2Weight, Body2Size, Body2LineHeight);
-  createFontTokens(tokenNames.bodyPlus1EmphasizedFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyEmphasized2Family, BodyEmphasized2Weight, BodyEmphasized2Size, BodyEmphasized2LineHeight);
-  const [groupHeaderFont, groupHeaderFontColor] = createFontTokens(tokenNames.groupHeaderFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), GroupLabel1Family, GroupLabel1Weight, GroupLabel1Size, GroupLabel1LineHeight);
-  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);
-  const [buttonLabelFont, buttonLabelFontColor, buttonLabelDisabledFontColor] = createFontTokens(tokenNames.buttonLabelFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), ButtonLabel1Family, ButtonLabel1Weight, ButtonLabel1Size, ButtonLabel1LineHeight);
-  const [tooltipCaptionFont, tooltipCaptionFontColor] = createFontTokens(tokenNames.tooltipCaptionFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), TooltipCaptionFamily, TooltipCaptionWeight, TooltipCaptionSize, TooltipCaptionLineHeight);
-  const [errorTextFont, errorTextFontColor, errorTextDisabledFontColor, errorTextFontFamily, errorTextFontWeight, errorTextFontSize, errorTextFontLineHeight] = createFontTokens(tokenNames.errorTextFont, (element) => getFailColorForTheme(element), (element) => hexToRgbaCssColor(getFailColorForTheme(element), 0.3), ErrorLightUiFamily, ErrorLightUiWeight, ErrorLightUiSize, TooltipCaptionLineHeight);
-  const [tableHeaderFont, tableHeaderFontColor] = createFontTokens(tokenNames.tableHeaderFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), GridHeaderFamily, GridHeaderWeight, GridHeaderSize, TooltipCaptionLineHeight);
-  createFontTokens(tokenNames.mentionFont, (element) => getColorForTheme(element, DigitalGreenDark, PowerGreen, PowerGreen), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyFamily, BodyEmphasizedWeight, BodySize, BodyLineHeight);
-  // Font Transform Tokens
-  const groupHeaderTextTransform = DesignToken.create(styleNameFromTokenName(tokenNames.groupHeaderTextTransform)).withDefault('uppercase');
-  // Animation Tokens
-  const smallDelay = DesignToken.create(styleNameFromTokenName(tokenNames.smallDelay)).withDefault(SmallDelay);
-  const mediumDelay = DesignToken.create(styleNameFromTokenName(tokenNames.mediumDelay)).withDefault(MediumDelay);
-  const largeDelay = DesignToken.create(styleNameFromTokenName(tokenNames.largeDelay)).withDefault(LargeDelay);
-  // Private helpers functions
+  // #region token values
+  const alias = {
+      failColor: createThemeColor(Fail100LightUi, Fail100DarkUi, White),
+      lineColor: createThemeColor(Black91, Black15, White),
+      fillSelectedColor: createThemeColor(DigitalGreenLight, PowerGreen, White),
+      fillHoverColor: createThemeColor(Black91, Black15, White),
+      defaultFontColor: createThemeColor(Black91, Black15, White)
+  };
+  const tokenValues = {
+      actionRgbPartialColor: hexToRgbPartialThemeColor(createThemeColor(Black91, Black15, White)),
+      applicationBackgroundColor: createThemeColor(White, Black85, ForestGreen),
+      headerBackgroundColor: createThemeColor(Black7, Black88, ForestGreen),
+      sectionBackgroundColor: createThemeColor(Black15, Black80, ForestGreen),
+      sectionBackgroundImage: createThemeColor(`linear-gradient(${Black15}, ${hexToRgbaCssColor(Black15, 0)})`, `linear-gradient(${Black82}, ${hexToRgbaCssColor(Black82, 0)})`, `linear-gradient(${ForestGreen}, ${hexToRgbaCssColor(ForestGreen, 0)})`),
+      dividerBackgroundColor: createThemeColor(Black15, Black80, ForestGreen),
+      fillSelectedColor: hexToRgbaCssThemeColor(alias.fillSelectedColor, 0.2, 0.2, 0.2),
+      fillSelectedRgbPartialColor: hexToRgbPartialThemeColor(alias.fillSelectedColor),
+      fillHoverSelectedColor: hexToRgbaCssThemeColor(alias.fillSelectedColor, 0.15, 0.15, 0.15),
+      fillHoverColor: hexToRgbaCssThemeColor(alias.fillHoverColor, 0.1, 0.1, 0.1),
+      fillHoverRgbPartialColor: hexToRgbPartialThemeColor(alias.fillHoverColor),
+      fillDownColor: hexToRgbaCssThemeColor(alias.fillHoverColor, 0.15, 0.15, 0.15),
+      borderColor: alias.lineColor,
+      borderRgbPartialColor: hexToRgbPartialThemeColor(alias.lineColor),
+      failColor: alias.failColor,
+      warningColor: createThemeColor(Warning100LightUi, Warning100DarkUi, White),
+      passColor: createThemeColor(Pass100LightUi, Pass100DarkUi, White),
+      informationColor: createThemeColor(Information100LightUi, Information100DarkUi, White),
+      borderHoverColor: createThemeColor(DigitalGreenLight, PowerGreen, White),
+      iconColor: createThemeColor(Black91, Black15, White),
+      modalBackdropColor: hexToRgbaCssThemeColor(createThemeColor(Black, Black, Black), 0.3, 0.6, 0.6),
+      popupBorderColor: hexToRgbaCssThemeColor(alias.lineColor, 0.3, 0.3, 0.3),
+      cardBorderColor: hexToRgbaCssThemeColor(alias.lineColor, 0.1, 0.1, 0.1),
+      graphGridlineColor: hexToRgbaCssThemeColor(alias.lineColor, 0.2, 0.2, 0.2),
+      graphTrace1Color: createThemeColor(NiIndigoDark2, NiSky, White),
+      graphTrace2Color: createThemeColor(NiScarletDark1, NiScarlet, hexToRgbaCssColor(White, 0.7)),
+      graphTrace3Color: createThemeColor(NiFernDark1, NiFern, hexToRgbaCssColor(White, 0.4)),
+      graphTrace4Color: createThemeColor(NiPlumDark1, NiSeaLight, hexToRgbaCssColor(White, 0.25)),
+      graphTrace5Color: createThemeColor(NiSeaDark2, NiSea, hexToRgbaCssColor(White, 0.55)),
+      graphTrace6Color: createThemeColor(NiTulip, NiTulip, hexToRgbaCssColor(White, 0.85)),
+      graphTrace7Color: createThemeColor(NiScarletDark3, NiHoneyLight, hexToRgbaCssColor(White, 0.325)),
+      graphTrace8Color: createThemeColor(NiIndigo, NiIndigo, hexToRgbaCssColor(White, 0.625)),
+      tooltipBackgroundColor: createThemeColor(Black15, Black85, ForestGreen),
+      tableRowBorderColor: createThemeColor(Black15, Black80, ForestGreen),
+      tagFillColor: hexToRgbaCssThemeColor(alias.lineColor, 0.1, 0.1, 0.1),
+      buttonFillPrimaryColor: hexToRgbaCssThemeColor(createThemeColor(Black91, Black15, White), 0.75, 0.3, 0.3),
+      buttonPrimaryFontColor: createThemeColor(Black15, Black15, White),
+      buttonFillAccentColor: createThemeColor(DigitalGreenDark, DigitalGreenLight, hexToRgbaCssColor(White, 0.1)),
+      buttonAccentBlockFontColor: createThemeColor(White, Black15, White),
+      buttonAccentOutlineFontColor: createThemeColor(DigitalGreenDark105, PowerGreen, White),
+      buttonBorderAccentOutlineColor: createThemeColor(DigitalGreenLight, PowerGreen, hexToRgbaCssColor(White, 0.3)),
+      calendarEventBackgroundStaticColor: createThemeColor(DigitalGreenLight10, PowerGreen10, PowerGreen10),
+      calendarEventBackgroundDynamicColor: createThemeColor(DigitalGreenDark105, DigitalGreenDark, DigitalGreenDark),
+      calendarEventBackgroundTransientColor: createThemeColor(DigitalGreenDark105, DigitalGreenDark, DigitalGreenDark),
+      calendarEventBorderStaticColor: createThemeColor(DigitalGreenLight, DigitalGreenLight, DigitalGreenLight),
+      calendarEventBorderTransientColor: createThemeColor(DigitalGreenLight, hexToRgbaCssColor(PowerGreen, 0.85), hexToRgbaCssColor(PowerGreen, 0.85)),
+      calendarEventStaticFontColor: createThemeColor(DigitalGreenDark110, PowerGreenDark50, PowerGreenDark50),
+      calendarEventDynamicFontColor: createThemeColor(White, White, White),
+      calendarEventTransientFontColor: createThemeColor(White, White, White),
+      calendarEventBackgroundHoverStaticColor: createThemeColor(DigitalGreenLight30, PowerGreen30, PowerGreen30),
+      calendarEventBackgroundHoverDynamicColor: createThemeColor(DigitalGreenDark110, DigitalGreenDark105, DigitalGreenDark105),
+      calendarEventBackgroundHoverTransientColor: createThemeColor(DigitalGreenDark110, DigitalGreenDark105, DigitalGreenDark105),
+      calendarEventOuterBorderHighlightedColor: createThemeColor(Black88, hexToRgbaCssColor(White, 0.85), hexToRgbaCssColor(White, 0.85)),
+      calendarRowBackgroundSelectedColor: hexToRgbaCssThemeColor(createThemeColor(DigitalGreenLight, PowerGreen, PowerGreen), 0.2, 0.2, 0.2),
+      calendarRowBackgroundConflictColor: hexToRgbaCssThemeColor(createThemeColor(Fail100LightUi, Fail100DarkUi, Fail100DarkUi), 0.2, 0.2, 0.2),
+      calendarEventFillBlockedColor: createThemeColor(hexToRgbaCssColor(Black91, 0.07), Black82, Black82),
+      calendarGrabHandleBackgroundColor: createThemeColor(DigitalGreenLight, PowerGreen, PowerGreen),
+      calendarGridBorderColor: createThemeColor(Black22, Black80, Black80),
+      calendarGroupHeaderBackgroundColor: createThemeColor(Black7, hexToRgbaCssColor(Black91, 0.1), hexToRgbaCssColor(Black91, 0.1)),
+      controlHeight: '32px',
+      controlSlimHeight: '24px',
+      smallPadding: '4px',
+      mediumPadding: '8px',
+      standardPadding: '16px',
+      largePadding: '24px',
+      labelHeight: '16px',
+      borderWidth: '1px',
+      dividerWidth: '2px',
+      iconSize: '16px',
+      drawerWidth: '784px',
+      dialogSmallWidth: '400px',
+      dialogSmallHeight: 'fit-content',
+      dialogSmallMaxHeight: '600px',
+      dialogLargeWidth: '1024px',
+      dialogLargeHeight: '680px',
+      dialogLargeMaxHeight: '680px',
+      menuMinWidth: '176px',
+      bannerGapSize: '1px',
+      spinnerSmallHeight: '16px',
+      spinnerMediumHeight: '32px',
+      spinnerLargeHeight: '64px',
+      tableFitRowsHeight: '480px',
+      elevation1BoxShadow: createThemeColor(`0px 1px 4px ${hexToRgbaCssColor(Black, 0.16)}`, `0px 1px 4px ${hexToRgbaCssColor(Black, 0.16)}`, `0px 1px 4px ${hexToRgbaCssColor(Black, 0.16)}`),
+      elevation2BoxShadow: createThemeColor(`0px 2px 4px ${hexToRgbaCssColor(Black, 0.16)}`, `0px 2px 4px ${hexToRgbaCssColor(Black, 0.16)}`, `0px 2px 4px ${hexToRgbaCssColor(Black, 0.16)}`),
+      elevation3BoxShadow: createThemeColor(`0px 4px 8px ${hexToRgbaCssColor(Black, 0.3)}`, `0px 4px 8px ${hexToRgbaCssColor(Black, 0.3)}`, `0px 4px 8px ${hexToRgbaCssColor(Black, 0.3)}`),
+      ...createFont('headline', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), Headline1Family, Headline1Weight, Headline1Size, Headline1LineHeight),
+      ...createFont('headlinePlus1', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), Headline2Family, Headline2Weight, Headline2Size, Headline2LineHeight),
+      ...createFont('titlePlus2', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), Title3Family, Title3Weight, Title3Size, Title3LineHeight),
+      ...createFont('titlePlus1', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), Title2Family, Title2Weight, Title2Size, Title2LineHeight),
+      ...createFont('title', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), Title1Family, Title1Weight, Title1Size, Title1LineHeight),
+      ...createFont('subtitlePlus1', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), Subtitle2Family, Subtitle2Weight, Subtitle2Size, Subtitle2LineHeight),
+      ...createFont('subtitle', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), Subtitle1Family, Subtitle1Weight, Subtitle1Size, Subtitle1LineHeight),
+      ...createFont('link', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight),
+      ...createFont('linkActive', createThemeColor(DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.75)), hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight),
+      ...createFont('linkProminent', createThemeColor(DigitalGreenDark105, PowerGreen, White), hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight),
+      ...createFont('linkActiveProminent', createThemeColor(DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.75)), hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight),
+      ...createFont('placeholder', hexToRgbaCssThemeColor(alias.defaultFontColor, 0.6, 0.6, 0.6), hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), PlaceholderFamily, PlaceholderWeight, PlaceholderSize, PlaceholderLineHeight),
+      ...createFont('body', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), BodyFamily, BodyWeight, BodySize, BodyLineHeight),
+      ...createFont('bodyEmphasized', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), BodyEmphasizedFamily, BodyEmphasizedWeight, BodyEmphasizedSize, BodyEmphasizedLineHeight),
+      ...createFont('bodyPlus1', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), Body2Family, Body2Weight, Body2Size, Body2LineHeight),
+      ...createFont('bodyPlus1Emphasized', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), BodyEmphasized2Family, BodyEmphasized2Weight, BodyEmphasized2Size, BodyEmphasized2LineHeight),
+      ...createFont('groupHeader', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), GroupLabel1Family, GroupLabel1Weight, GroupLabel1Size, GroupLabel1LineHeight),
+      ...createFont('controlLabel', hexToRgbaCssThemeColor(alias.defaultFontColor, 0.6, 0.6, 0.6), hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), ControlLabel1Family, ControlLabel1Weight, ControlLabel1Size, ControlLabel1LineHeight),
+      ...createFont('buttonLabel', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), ButtonLabel1Family, ButtonLabel1Weight, ButtonLabel1Size, ButtonLabel1LineHeight),
+      ...createFont('tooltipCaption', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), TooltipCaptionFamily, TooltipCaptionWeight, TooltipCaptionSize, TooltipCaptionLineHeight),
+      ...createFont('errorText', alias.failColor, hexToRgbaCssThemeColor(alias.failColor, 0.3, 0.3, 0.3), ErrorLightUiFamily, ErrorLightUiWeight, ErrorLightUiSize, TooltipCaptionLineHeight),
+      ...createFont('tableHeader', hexToRgbaCssThemeColor(alias.defaultFontColor, 0.6, 0.6, 0.6), hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), GridHeaderFamily, GridHeaderWeight, GridHeaderSize, TooltipCaptionLineHeight),
+      ...createFont('mention', createThemeColor(DigitalGreenDark, PowerGreen, PowerGreen), hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), BodyFamily, BodyEmphasizedWeight, BodySize, BodyLineHeight),
+      groupHeaderTextTransform: 'uppercase',
+      smallDelay: SmallDelay,
+      mediumDelay: MediumDelay,
+      largeDelay: LargeDelay
+  };
+  // #endregion
+  function hexToRgbaCssThemeColor(themeColor, lightAlpha, darkAlpha, colorAlpha) {
+      return {
+          light: hexToRgbaCssColor(themeColor.light, lightAlpha),
+          dark: hexToRgbaCssColor(themeColor.dark, darkAlpha),
+          color: hexToRgbaCssColor(themeColor.color, colorAlpha),
+      };
+  }
   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');
-      }
+  function hexToRgbPartialThemeColor(themeColor) {
+      return {
+          light: hexToRgbPartial(themeColor.light),
+          dark: hexToRgbPartial(themeColor.dark),
+          color: hexToRgbPartial(themeColor.color),
+      };
+  }
+  function createThemeColor(light, dark, color) {
+      return {
+          light,
+          dark,
+          color
+      };
+  }
+  function createFont(token, color, disabledColor, family, weight, size, lineHeight) {
       const familyWithFallback = `${family}, ${family} Fallback`;
-      const fontToken = DesignToken.create(styleNameFromTokenName(fontTokenName)).withDefault(`${weight} ${size}/${lineHeight} ${familyWithFallback}`);
+      return {
+          [`${token}Font`]: `${weight} ${size}/${lineHeight} ${familyWithFallback}`,
+          [`${token}FontColor`]: color,
+          [`${token}DisabledFontColor`]: disabledColor,
+          [`${token}FontFamily`]: family,
+          [`${token}FontWeight`]: weight,
+          [`${token}FontSize`]: size,
+          [`${token}FontLineHeight`]: lineHeight,
+      };
+  }
+
+  // #region color tokens
+  const actionRgbPartialColor = createThemeColorToken(tokenNames.actionRgbPartialColor, tokenValues.actionRgbPartialColor);
+  const applicationBackgroundColor = createThemeColorToken(tokenNames.applicationBackgroundColor, tokenValues.applicationBackgroundColor);
+  createThemeColorToken(tokenNames.headerBackgroundColor, tokenValues.headerBackgroundColor);
+  createThemeColorToken(tokenNames.sectionBackgroundColor, tokenValues.sectionBackgroundColor);
+  const sectionBackgroundImage = createThemeColorToken(tokenNames.sectionBackgroundImage, tokenValues.sectionBackgroundImage);
+  createThemeColorToken(tokenNames.dividerBackgroundColor, tokenValues.dividerBackgroundColor);
+  const fillSelectedColor = createThemeColorToken(tokenNames.fillSelectedColor, tokenValues.fillSelectedColor);
+  const fillSelectedRgbPartialColor = createThemeColorToken(tokenNames.fillSelectedRgbPartialColor, tokenValues.fillSelectedRgbPartialColor);
+  const fillHoverSelectedColor = createThemeColorToken(tokenNames.fillHoverSelectedColor, tokenValues.fillHoverSelectedColor);
+  const fillHoverColor = createThemeColorToken(tokenNames.fillHoverColor, tokenValues.fillHoverColor);
+  createThemeColorToken(tokenNames.fillHoverRgbPartialColor, tokenValues.fillHoverRgbPartialColor);
+  createThemeColorToken(tokenNames.fillDownColor, tokenValues.fillDownColor);
+  const borderColor = createThemeColorToken(tokenNames.borderColor, tokenValues.borderColor);
+  const borderRgbPartialColor = createThemeColorToken(tokenNames.borderRgbPartialColor, tokenValues.borderRgbPartialColor);
+  const failColor = createThemeColorToken(tokenNames.failColor, tokenValues.failColor);
+  const warningColor = createThemeColorToken(tokenNames.warningColor, tokenValues.warningColor);
+  const passColor = createThemeColorToken(tokenNames.passColor, tokenValues.passColor);
+  const informationColor = createThemeColorToken(tokenNames.informationColor, tokenValues.informationColor);
+  const borderHoverColor = createThemeColorToken(tokenNames.borderHoverColor, tokenValues.borderHoverColor);
+  // #endregion
+  // #region component color tokens
+  const iconColor = createThemeColorToken(tokenNames.iconColor, tokenValues.iconColor);
+  const modalBackdropColor = createThemeColorToken(tokenNames.modalBackdropColor, tokenValues.modalBackdropColor);
+  const popupBorderColor = createThemeColorToken(tokenNames.popupBorderColor, tokenValues.popupBorderColor);
+  const cardBorderColor = createThemeColorToken(tokenNames.cardBorderColor, tokenValues.cardBorderColor);
+  createThemeColorToken(tokenNames.graphGridlineColor, tokenValues.graphGridlineColor);
+  createThemeColorToken(tokenNames.graphTrace1Color, tokenValues.graphTrace1Color);
+  createThemeColorToken(tokenNames.graphTrace2Color, tokenValues.graphTrace2Color);
+  createThemeColorToken(tokenNames.graphTrace3Color, tokenValues.graphTrace3Color);
+  createThemeColorToken(tokenNames.graphTrace4Color, tokenValues.graphTrace4Color);
+  createThemeColorToken(tokenNames.graphTrace5Color, tokenValues.graphTrace5Color);
+  createThemeColorToken(tokenNames.graphTrace6Color, tokenValues.graphTrace6Color);
+  createThemeColorToken(tokenNames.graphTrace7Color, tokenValues.graphTrace7Color);
+  createThemeColorToken(tokenNames.graphTrace8Color, tokenValues.graphTrace8Color);
+  createThemeColorToken(tokenNames.tooltipBackgroundColor, tokenValues.tooltipBackgroundColor);
+  const tableRowBorderColor = createThemeColorToken(tokenNames.tableRowBorderColor, tokenValues.tableRowBorderColor);
+  createThemeColorToken(tokenNames.tagFillColor, tokenValues.tagFillColor);
+  const buttonFillPrimaryColor = createThemeColorToken(tokenNames.buttonFillPrimaryColor, tokenValues.buttonFillPrimaryColor);
+  const buttonPrimaryFontColor = createThemeColorToken(tokenNames.buttonPrimaryFontColor, tokenValues.buttonPrimaryFontColor);
+  const buttonFillAccentColor = createThemeColorToken(tokenNames.buttonFillAccentColor, tokenValues.buttonFillAccentColor);
+  const buttonAccentBlockFontColor = createThemeColorToken(tokenNames.buttonAccentBlockFontColor, tokenValues.buttonAccentBlockFontColor);
+  const buttonAccentOutlineFontColor = createThemeColorToken(tokenNames.buttonAccentOutlineFontColor, tokenValues.buttonAccentOutlineFontColor);
+  const buttonBorderAccentOutlineColor = createThemeColorToken(tokenNames.buttonBorderAccentOutlineColor, tokenValues.buttonBorderAccentOutlineColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundStaticColor, tokenValues.calendarEventBackgroundStaticColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundDynamicColor, tokenValues.calendarEventBackgroundDynamicColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundTransientColor, tokenValues.calendarEventBackgroundTransientColor);
+  createThemeColorToken(tokenNames.calendarEventBorderStaticColor, tokenValues.calendarEventBorderStaticColor);
+  createThemeColorToken(tokenNames.calendarEventBorderTransientColor, tokenValues.calendarEventBorderTransientColor);
+  createThemeColorToken(tokenNames.calendarEventStaticFontColor, tokenValues.calendarEventStaticFontColor);
+  createThemeColorToken(tokenNames.calendarEventDynamicFontColor, tokenValues.calendarEventDynamicFontColor);
+  createThemeColorToken(tokenNames.calendarEventTransientFontColor, tokenValues.calendarEventTransientFontColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundHoverStaticColor, tokenValues.calendarEventBackgroundHoverStaticColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundHoverDynamicColor, tokenValues.calendarEventBackgroundHoverDynamicColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundHoverTransientColor, tokenValues.calendarEventBackgroundHoverTransientColor);
+  createThemeColorToken(tokenNames.calendarEventOuterBorderHighlightedColor, tokenValues.calendarEventOuterBorderHighlightedColor);
+  createThemeColorToken(tokenNames.calendarRowBackgroundSelectedColor, tokenValues.calendarRowBackgroundSelectedColor);
+  createThemeColorToken(tokenNames.calendarRowBackgroundConflictColor, tokenValues.calendarRowBackgroundConflictColor);
+  createThemeColorToken(tokenNames.calendarEventFillBlockedColor, tokenValues.calendarEventFillBlockedColor);
+  createThemeColorToken(tokenNames.calendarGrabHandleBackgroundColor, tokenValues.calendarGrabHandleBackgroundColor);
+  createThemeColorToken(tokenNames.calendarGridBorderColor, tokenValues.calendarGridBorderColor);
+  createThemeColorToken(tokenNames.calendarGroupHeaderBackgroundColor, tokenValues.calendarGroupHeaderBackgroundColor);
+  // #endregion
+  // #region size tokens
+  const controlHeight = createStringToken(tokenNames.controlHeight, tokenValues.controlHeight);
+  const controlSlimHeight = createStringToken(tokenNames.controlSlimHeight, tokenValues.controlSlimHeight);
+  const smallPadding = createStringToken(tokenNames.smallPadding, tokenValues.smallPadding);
+  const mediumPadding = createStringToken(tokenNames.mediumPadding, tokenValues.mediumPadding);
+  const standardPadding = createStringToken(tokenNames.standardPadding, tokenValues.standardPadding);
+  const largePadding = createStringToken(tokenNames.largePadding, tokenValues.largePadding);
+  createStringToken(tokenNames.labelHeight, tokenValues.labelHeight);
+  const borderWidth = createStringToken(tokenNames.borderWidth, tokenValues.borderWidth);
+  createStringToken(tokenNames.dividerWidth, tokenValues.dividerWidth);
+  const iconSize = createStringToken(tokenNames.iconSize, tokenValues.iconSize);
+  const drawerWidth = createStringToken(tokenNames.drawerWidth, tokenValues.drawerWidth);
+  const dialogSmallWidth = createStringToken(tokenNames.dialogSmallWidth, tokenValues.dialogSmallWidth);
+  const dialogSmallHeight = createStringToken(tokenNames.dialogSmallHeight, tokenValues.dialogSmallHeight);
+  const dialogSmallMaxHeight = createStringToken(tokenNames.dialogSmallMaxHeight, tokenValues.dialogSmallMaxHeight);
+  createStringToken(tokenNames.dialogLargeWidth, tokenValues.dialogLargeWidth);
+  createStringToken(tokenNames.dialogLargeHeight, tokenValues.dialogLargeHeight);
+  createStringToken(tokenNames.dialogLargeMaxHeight, tokenValues.dialogLargeMaxHeight);
+  const menuMinWidth = createStringToken(tokenNames.menuMinWidth, tokenValues.menuMinWidth);
+  createStringToken(tokenNames.bannerGapSize, tokenValues.bannerGapSize);
+  const spinnerSmallHeight = createStringToken(tokenNames.spinnerSmallHeight, tokenValues.spinnerSmallHeight);
+  createStringToken(tokenNames.spinnerMediumHeight, tokenValues.spinnerMediumHeight);
+  createStringToken(tokenNames.spinnerLargeHeight, tokenValues.spinnerLargeHeight);
+  const tableFitRowsHeight = createStringToken(tokenNames.tableFitRowsHeight, tokenValues.tableFitRowsHeight);
+  // #endregion
+  // #region drop shadow tokens
+  createThemeColorToken(tokenNames.elevation1BoxShadow, tokenValues.elevation1BoxShadow);
+  const elevation2BoxShadow = createThemeColorToken(tokenNames.elevation2BoxShadow, tokenValues.elevation2BoxShadow);
+  const elevation3BoxShadow = createThemeColorToken(tokenNames.elevation3BoxShadow, tokenValues.elevation3BoxShadow);
+  // #endregion
+  // #region font tokens
+  createFontTokens(tokenNames.headlineFont, tokenValues.headlineFont, tokenValues.headlineFontColor, tokenValues.headlineDisabledFontColor, tokenValues.headlineFontFamily, tokenValues.headlineFontWeight, tokenValues.headlineFontSize, tokenValues.headlineFontLineHeight);
+  createFontTokens(tokenNames.headlinePlus1Font, tokenValues.headlinePlus1Font, tokenValues.headlinePlus1FontColor, tokenValues.headlinePlus1DisabledFontColor, tokenValues.headlinePlus1FontFamily, tokenValues.headlinePlus1FontWeight, tokenValues.headlinePlus1FontSize, tokenValues.headlinePlus1FontLineHeight);
+  createFontTokens(tokenNames.titlePlus2Font, tokenValues.titlePlus2Font, tokenValues.titlePlus2FontColor, tokenValues.titlePlus2DisabledFontColor, tokenValues.titlePlus2FontFamily, tokenValues.titlePlus2FontWeight, tokenValues.titlePlus2FontSize, tokenValues.titlePlus2FontLineHeight);
+  const [titlePlus1Font, titlePlus1FontColor] = createFontTokens(tokenNames.titlePlus1Font, tokenValues.titlePlus1Font, tokenValues.titlePlus1FontColor, tokenValues.titlePlus1DisabledFontColor, tokenValues.titlePlus1FontFamily, tokenValues.titlePlus1FontWeight, tokenValues.titlePlus1FontSize, tokenValues.titlePlus1FontLineHeight);
+  createFontTokens(tokenNames.titleFont, tokenValues.titleFont, tokenValues.titleFontColor, tokenValues.titleDisabledFontColor, tokenValues.titleFontFamily, tokenValues.titleFontWeight, tokenValues.titleFontSize, tokenValues.titleFontLineHeight);
+  const [subtitlePlus1Font] = createFontTokens(tokenNames.subtitlePlus1Font, tokenValues.subtitlePlus1Font, tokenValues.subtitlePlus1FontColor, tokenValues.subtitlePlus1DisabledFontColor, tokenValues.subtitlePlus1FontFamily, tokenValues.subtitlePlus1FontWeight, tokenValues.subtitlePlus1FontSize, tokenValues.subtitlePlus1FontLineHeight);
+  const [subtitleFont, subtitleFontColor] = createFontTokens(tokenNames.subtitleFont, tokenValues.subtitleFont, tokenValues.subtitleFontColor, tokenValues.subtitleDisabledFontColor, tokenValues.subtitleFontFamily, tokenValues.subtitleFontWeight, tokenValues.subtitleFontSize, tokenValues.subtitleFontLineHeight);
+  const [linkFont, linkFontColor, linkDisabledFontColor] = createFontTokens(tokenNames.linkFont, tokenValues.linkFont, tokenValues.linkFontColor, tokenValues.linkDisabledFontColor, tokenValues.linkFontFamily, tokenValues.linkFontWeight, tokenValues.linkFontSize, tokenValues.linkFontLineHeight);
+  const [linkActiveFont, linkActiveFontColor] = createFontTokens(tokenNames.linkActiveFont, tokenValues.linkActiveFont, tokenValues.linkActiveFontColor, tokenValues.linkActiveDisabledFontColor, tokenValues.linkActiveFontFamily, tokenValues.linkActiveFontWeight, tokenValues.linkActiveFontSize, tokenValues.linkActiveFontLineHeight);
+  const [linkProminentFont, linkProminentFontColor] = createFontTokens(tokenNames.linkProminentFont, tokenValues.linkProminentFont, tokenValues.linkProminentFontColor, tokenValues.linkProminentDisabledFontColor, tokenValues.linkProminentFontFamily, tokenValues.linkProminentFontWeight, tokenValues.linkProminentFontSize, tokenValues.linkProminentFontLineHeight);
+  const [linkActiveProminentFont, linkActiveProminentFontColor] = createFontTokens(tokenNames.linkActiveProminentFont, tokenValues.linkActiveProminentFont, tokenValues.linkActiveProminentFontColor, tokenValues.linkActiveProminentDisabledFontColor, tokenValues.linkActiveProminentFontFamily, tokenValues.linkActiveProminentFontWeight, tokenValues.linkActiveProminentFontSize, tokenValues.linkActiveProminentFontLineHeight);
+  const [placeholderFont, placeholderFontColor] = createFontTokens(tokenNames.placeholderFont, tokenValues.placeholderFont, tokenValues.placeholderFontColor, tokenValues.placeholderDisabledFontColor, tokenValues.placeholderFontFamily, tokenValues.placeholderFontWeight, tokenValues.placeholderFontSize, tokenValues.placeholderFontLineHeight);
+  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);
+  const [bodyEmphasizedFont, bodyEmphasizedFontColor, bodyEmphasizedDisabledFontColor, bodyEmphasizedFontFamily, bodyEmphasizedFontWeight] = createFontTokens(tokenNames.bodyEmphasizedFont, tokenValues.bodyEmphasizedFont, tokenValues.bodyEmphasizedFontColor, tokenValues.bodyEmphasizedDisabledFontColor, tokenValues.bodyEmphasizedFontFamily, tokenValues.bodyEmphasizedFontWeight, tokenValues.bodyEmphasizedFontSize, tokenValues.bodyEmphasizedFontLineHeight);
+  createFontTokens(tokenNames.bodyPlus1Font, tokenValues.bodyPlus1Font, tokenValues.bodyPlus1FontColor, tokenValues.bodyPlus1DisabledFontColor, tokenValues.bodyPlus1FontFamily, tokenValues.bodyPlus1FontWeight, tokenValues.bodyPlus1FontSize, tokenValues.bodyPlus1FontLineHeight);
+  createFontTokens(tokenNames.bodyPlus1EmphasizedFont, tokenValues.bodyPlus1EmphasizedFont, tokenValues.bodyPlus1EmphasizedFontColor, tokenValues.bodyPlus1EmphasizedDisabledFontColor, tokenValues.bodyPlus1EmphasizedFontFamily, tokenValues.bodyPlus1EmphasizedFontWeight, tokenValues.bodyPlus1EmphasizedFontSize, tokenValues.bodyPlus1EmphasizedFontLineHeight);
+  const [groupHeaderFont, groupHeaderFontColor] = createFontTokens(tokenNames.groupHeaderFont, tokenValues.groupHeaderFont, tokenValues.groupHeaderFontColor, tokenValues.groupHeaderDisabledFontColor, tokenValues.groupHeaderFontFamily, tokenValues.groupHeaderFontWeight, tokenValues.groupHeaderFontSize, tokenValues.groupHeaderFontLineHeight);
+  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);
+  const [buttonLabelFont, buttonLabelFontColor, buttonLabelDisabledFontColor] = createFontTokens(tokenNames.buttonLabelFont, tokenValues.buttonLabelFont, tokenValues.buttonLabelFontColor, tokenValues.buttonLabelDisabledFontColor, tokenValues.buttonLabelFontFamily, tokenValues.buttonLabelFontWeight, tokenValues.buttonLabelFontSize, tokenValues.buttonLabelFontLineHeight);
+  const [tooltipCaptionFont, tooltipCaptionFontColor] = createFontTokens(tokenNames.tooltipCaptionFont, tokenValues.tooltipCaptionFont, tokenValues.tooltipCaptionFontColor, tokenValues.tooltipCaptionDisabledFontColor, tokenValues.tooltipCaptionFontFamily, tokenValues.tooltipCaptionFontWeight, tokenValues.tooltipCaptionFontSize, tokenValues.tooltipCaptionFontLineHeight);
+  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);
+  const [tableHeaderFont, tableHeaderFontColor] = createFontTokens(tokenNames.tableHeaderFont, tokenValues.tableHeaderFont, tokenValues.tableHeaderFontColor, tokenValues.tableHeaderDisabledFontColor, tokenValues.tableHeaderFontFamily, tokenValues.tableHeaderFontWeight, tokenValues.tableHeaderFontSize, tokenValues.tableHeaderFontLineHeight);
+  createFontTokens(tokenNames.mentionFont, tokenValues.mentionFont, tokenValues.mentionFontColor, tokenValues.mentionDisabledFontColor, tokenValues.mentionFontFamily, tokenValues.mentionFontWeight, tokenValues.mentionFontSize, tokenValues.mentionFontLineHeight);
+  // #endregion
+  // #region text transform tokens
+  const groupHeaderTextTransform = createStringToken(tokenNames.groupHeaderTextTransform, tokenValues.groupHeaderTextTransform);
+  // #endregion
+  // #region animation tokens
+  const smallDelay = createStringToken(tokenNames.smallDelay, tokenValues.smallDelay);
+  const mediumDelay = createStringToken(tokenNames.mediumDelay, tokenValues.mediumDelay);
+  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,
@@ -16454,57 +16602,24 @@
           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 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 createStringToken(tokenName, tokenValue) {
+      return DesignToken.create(styleNameFromTokenName(tokenName)).withDefault(tokenValue);
+  }
+  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
 
   const styles$14 = css `
     @layer base, hover, focusVisible, active, disabled;