// This needs to be in sync with Theme shape and how ThemeProvider provides the css variables.
// generated using: https://codepen.io/xugao/pen/wvKrmYo
$paletteThemeDarker: --palette-themeDarker;
$paletteThemeDark: --palette-themeDark;
$paletteThemeDarkAlt: --palette-themeDarkAlt;
$paletteThemePrimary: --palette-themePrimary;
$paletteThemeSecondary: --palette-themeSecondary;
$paletteThemeTertiary: --palette-themeTertiary;
$paletteThemeLight: --palette-themeLight;
$paletteThemeLighter: --palette-themeLighter;
$paletteThemeLighterAlt: --palette-themeLighterAlt;
$paletteBlack: --palette-black;
$paletteBlackTranslucent40: --palette-blackTranslucent40;
$paletteNeutralDark: --palette-neutralDark;
$paletteNeutralPrimary: --palette-neutralPrimary;
$paletteNeutralPrimaryAlt: --palette-neutralPrimaryAlt;
$paletteNeutralSecondary: --palette-neutralSecondary;
$paletteNeutralSecondaryAlt: --palette-neutralSecondaryAlt;
$paletteNeutralTertiary: --palette-neutralTertiary;
$paletteNeutralTertiaryAlt: --palette-neutralTertiaryAlt;
$paletteNeutralQuaternary: --palette-neutralQuaternary;
$paletteNeutralQuaternaryAlt: --palette-neutralQuaternaryAlt;
$paletteNeutralLight: --palette-neutralLight;
$paletteNeutralLighter: --palette-neutralLighter;
$paletteNeutralLighterAlt: --palette-neutralLighterAlt;
$paletteAccent: --palette-accent;
$paletteWhite: --palette-white;
$paletteWhiteTranslucent40: --palette-whiteTranslucent40;
$paletteYellowDark: --palette-yellowDark;
$paletteYellow: --palette-yellow;
$paletteYellowLight: --palette-yellowLight;
$paletteOrange: --palette-orange;
$paletteOrangeLight: --palette-orangeLight;
$paletteOrangeLighter: --palette-orangeLighter;
$paletteRedDark: --palette-redDark;
$paletteRed: --palette-red;
$paletteMagentaDark: --palette-magentaDark;
$paletteMagenta: --palette-magenta;
$paletteMagentaLight: --palette-magentaLight;
$palettePurpleDark: --palette-purpleDark;
$palettePurple: --palette-purple;
$palettePurpleLight: --palette-purpleLight;
$paletteBlueDark: --palette-blueDark;
$paletteBlueMid: --palette-blueMid;
$paletteBlue: --palette-blue;
$paletteBlueLight: --palette-blueLight;
$paletteTealDark: --palette-tealDark;
$paletteTeal: --palette-teal;
$paletteTealLight: --palette-tealLight;
$paletteGreenDark: --palette-greenDark;
$paletteGreen: --palette-green;
$paletteGreenLight: --palette-greenLight;
$fontsTinyFontFamily: --fonts-tiny-fontFamily;
$fontsTinyMozOsxFontSmoothing: --fonts-tiny-MozOsxFontSmoothing;
$fontsTinyWebkitFontSmoothing: --fonts-tiny-WebkitFontSmoothing;
$fontsTinyFontSize: --fonts-tiny-fontSize;
$fontsTinyFontWeight: --fonts-tiny-fontWeight;
$fontsXSmallFontFamily: --fonts-xSmall-fontFamily;
$fontsXSmallMozOsxFontSmoothing: --fonts-xSmall-MozOsxFontSmoothing;
$fontsXSmallWebkitFontSmoothing: --fonts-xSmall-WebkitFontSmoothing;
$fontsXSmallFontSize: --fonts-xSmall-fontSize;
$fontsXSmallFontWeight: --fonts-xSmall-fontWeight;
$fontsSmallFontFamily: --fonts-small-fontFamily;
$fontsSmallMozOsxFontSmoothing: --fonts-small-MozOsxFontSmoothing;
$fontsSmallWebkitFontSmoothing: --fonts-small-WebkitFontSmoothing;
$fontsSmallFontSize: --fonts-small-fontSize;
$fontsSmallFontWeight: --fonts-small-fontWeight;
$fontsSmallPlusFontFamily: --fonts-smallPlus-fontFamily;
$fontsSmallPlusMozOsxFontSmoothing: --fonts-smallPlus-MozOsxFontSmoothing;
$fontsSmallPlusWebkitFontSmoothing: --fonts-smallPlus-WebkitFontSmoothing;
$fontsSmallPlusFontSize: --fonts-smallPlus-fontSize;
$fontsSmallPlusFontWeight: --fonts-smallPlus-fontWeight;
$fontsMediumFontFamily: --fonts-medium-fontFamily;
$fontsMediumMozOsxFontSmoothing: --fonts-medium-MozOsxFontSmoothing;
$fontsMediumWebkitFontSmoothing: --fonts-medium-WebkitFontSmoothing;
$fontsMediumFontSize: --fonts-medium-fontSize;
$fontsMediumFontWeight: --fonts-medium-fontWeight;
$fontsMediumPlusFontFamily: --fonts-mediumPlus-fontFamily;
$fontsMediumPlusMozOsxFontSmoothing: --fonts-mediumPlus-MozOsxFontSmoothing;
$fontsMediumPlusWebkitFontSmoothing: --fonts-mediumPlus-WebkitFontSmoothing;
$fontsMediumPlusFontSize: --fonts-mediumPlus-fontSize;
$fontsMediumPlusFontWeight: --fonts-mediumPlus-fontWeight;
$fontsLargeFontFamily: --fonts-large-fontFamily;
$fontsLargeMozOsxFontSmoothing: --fonts-large-MozOsxFontSmoothing;
$fontsLargeWebkitFontSmoothing: --fonts-large-WebkitFontSmoothing;
$fontsLargeFontSize: --fonts-large-fontSize;
$fontsLargeFontWeight: --fonts-large-fontWeight;
$fontsXLargeFontFamily: --fonts-xLarge-fontFamily;
$fontsXLargeMozOsxFontSmoothing: --fonts-xLarge-MozOsxFontSmoothing;
$fontsXLargeWebkitFontSmoothing: --fonts-xLarge-WebkitFontSmoothing;
$fontsXLargeFontSize: --fonts-xLarge-fontSize;
$fontsXLargeFontWeight: --fonts-xLarge-fontWeight;
$fontsXLargePlusFontFamily: --fonts-xLargePlus-fontFamily;
$fontsXLargePlusMozOsxFontSmoothing: --fonts-xLargePlus-MozOsxFontSmoothing;
$fontsXLargePlusWebkitFontSmoothing: --fonts-xLargePlus-WebkitFontSmoothing;
$fontsXLargePlusFontSize: --fonts-xLargePlus-fontSize;
$fontsXLargePlusFontWeight: --fonts-xLargePlus-fontWeight;
$fontsXxLargeFontFamily: --fonts-xxLarge-fontFamily;
$fontsXxLargeMozOsxFontSmoothing: --fonts-xxLarge-MozOsxFontSmoothing;
$fontsXxLargeWebkitFontSmoothing: --fonts-xxLarge-WebkitFontSmoothing;
$fontsXxLargeFontSize: --fonts-xxLarge-fontSize;
$fontsXxLargeFontWeight: --fonts-xxLarge-fontWeight;
$fontsXxLargePlusFontFamily: --fonts-xxLargePlus-fontFamily;
$fontsXxLargePlusMozOsxFontSmoothing: --fonts-xxLargePlus-MozOsxFontSmoothing;
$fontsXxLargePlusWebkitFontSmoothing: --fonts-xxLargePlus-WebkitFontSmoothing;
$fontsXxLargePlusFontSize: --fonts-xxLargePlus-fontSize;
$fontsXxLargePlusFontWeight: --fonts-xxLargePlus-fontWeight;
$fontsSuperLargeFontFamily: --fonts-superLarge-fontFamily;
$fontsSuperLargeMozOsxFontSmoothing: --fonts-superLarge-MozOsxFontSmoothing;
$fontsSuperLargeWebkitFontSmoothing: --fonts-superLarge-WebkitFontSmoothing;
$fontsSuperLargeFontSize: --fonts-superLarge-fontSize;
$fontsSuperLargeFontWeight: --fonts-superLarge-fontWeight;
$fontsMegaFontFamily: --fonts-mega-fontFamily;
$fontsMegaMozOsxFontSmoothing: --fonts-mega-MozOsxFontSmoothing;
$fontsMegaWebkitFontSmoothing: --fonts-mega-WebkitFontSmoothing;
$fontsMegaFontSize: --fonts-mega-fontSize;
$fontsMegaFontWeight: --fonts-mega-fontWeight;
$semanticColorsBodyBackground: --semanticColors-bodyBackground;
$semanticColorsBodyBackgroundHovered: --semanticColors-bodyBackgroundHovered;
$semanticColorsBodyBackgroundChecked: --semanticColors-bodyBackgroundChecked;
$semanticColorsBodyStandoutBackground: --semanticColors-bodyStandoutBackground;
$semanticColorsBodyFrameBackground: --semanticColors-bodyFrameBackground;
$semanticColorsBodyFrameDivider: --semanticColors-bodyFrameDivider;
$semanticColorsBodyText: --semanticColors-bodyText;
$semanticColorsBodyTextChecked: --semanticColors-bodyTextChecked;
$semanticColorsBodySubtext: --semanticColors-bodySubtext;
$semanticColorsBodyDivider: --semanticColors-bodyDivider;
$semanticColorsDisabledBodyText: --semanticColors-disabledBodyText;
$semanticColorsDisabledBodySubtext: --semanticColors-disabledBodySubtext;
$semanticColorsDisabledBorder: --semanticColors-disabledBorder;
$semanticColorsFocusBorder: --semanticColors-focusBorder;
$semanticColorsVariantBorder: --semanticColors-variantBorder;
$semanticColorsVariantBorderHovered: --semanticColors-variantBorderHovered;
$semanticColorsDefaultStateBackground: --semanticColors-defaultStateBackground;
$semanticColorsActionLink: --semanticColors-actionLink;
$semanticColorsActionLinkHovered: --semanticColors-actionLinkHovered;
$semanticColorsLink: --semanticColors-link;
$semanticColorsLinkHovered: --semanticColors-linkHovered;
$semanticColorsButtonBackground: --semanticColors-buttonBackground;
$semanticColorsButtonBackgroundChecked: --semanticColors-buttonBackgroundChecked;
$semanticColorsButtonBackgroundHovered: --semanticColors-buttonBackgroundHovered;
$semanticColorsButtonBackgroundCheckedHovered: --semanticColors-buttonBackgroundCheckedHovered;
$semanticColorsButtonBackgroundPressed: --semanticColors-buttonBackgroundPressed;
$semanticColorsButtonBackgroundDisabled: --semanticColors-buttonBackgroundDisabled;
$semanticColorsButtonBorder: --semanticColors-buttonBorder;
$semanticColorsButtonText: --semanticColors-buttonText;
$semanticColorsButtonTextHovered: --semanticColors-buttonTextHovered;
$semanticColorsButtonTextChecked: --semanticColors-buttonTextChecked;
$semanticColorsButtonTextCheckedHovered: --semanticColors-buttonTextCheckedHovered;
$semanticColorsButtonTextPressed: --semanticColors-buttonTextPressed;
$semanticColorsButtonTextDisabled: --semanticColors-buttonTextDisabled;
$semanticColorsButtonBorderDisabled: --semanticColors-buttonBorderDisabled;
$semanticColorsPrimaryButtonBackground: --semanticColors-primaryButtonBackground;
$semanticColorsPrimaryButtonBackgroundHovered: --semanticColors-primaryButtonBackgroundHovered;
$semanticColorsPrimaryButtonBackgroundPressed: --semanticColors-primaryButtonBackgroundPressed;
$semanticColorsPrimaryButtonBackgroundDisabled: --semanticColors-primaryButtonBackgroundDisabled;
$semanticColorsPrimaryButtonBorder: --semanticColors-primaryButtonBorder;
$semanticColorsPrimaryButtonText: --semanticColors-primaryButtonText;
$semanticColorsPrimaryButtonTextHovered: --semanticColors-primaryButtonTextHovered;
$semanticColorsPrimaryButtonTextPressed: --semanticColors-primaryButtonTextPressed;
$semanticColorsPrimaryButtonTextDisabled: --semanticColors-primaryButtonTextDisabled;
$semanticColorsAccentButtonBackground: --semanticColors-accentButtonBackground;
$semanticColorsAccentButtonText: --semanticColors-accentButtonText;
$semanticColorsInputBorder: --semanticColors-inputBorder;
$semanticColorsInputBorderHovered: --semanticColors-inputBorderHovered;
$semanticColorsInputBackground: --semanticColors-inputBackground;
$semanticColorsInputBackgroundChecked: --semanticColors-inputBackgroundChecked;
$semanticColorsInputBackgroundCheckedHovered: --semanticColors-inputBackgroundCheckedHovered;
$semanticColorsInputPlaceholderBackgroundChecked: --semanticColors-inputPlaceholderBackgroundChecked;
$semanticColorsInputForegroundChecked: --semanticColors-inputForegroundChecked;
$semanticColorsInputIcon: --semanticColors-inputIcon;
$semanticColorsInputIconHovered: --semanticColors-inputIconHovered;
$semanticColorsInputIconDisabled: --semanticColors-inputIconDisabled;
$semanticColorsInputFocusBorderAlt: --semanticColors-inputFocusBorderAlt;
$semanticColorsSmallInputBorder: --semanticColors-smallInputBorder;
$semanticColorsInputText: --semanticColors-inputText;
$semanticColorsInputTextHovered: --semanticColors-inputTextHovered;
$semanticColorsInputPlaceholderText: --semanticColors-inputPlaceholderText;
$semanticColorsDisabledBackground: --semanticColors-disabledBackground;
$semanticColorsDisabledText: --semanticColors-disabledText;
$semanticColorsDisabledSubtext: --semanticColors-disabledSubtext;
$semanticColorsListBackground: --semanticColors-listBackground;
$semanticColorsListText: --semanticColors-listText;
$semanticColorsListItemBackgroundHovered: --semanticColors-listItemBackgroundHovered;
$semanticColorsListItemBackgroundChecked: --semanticColors-listItemBackgroundChecked;
$semanticColorsListItemBackgroundCheckedHovered: --semanticColors-listItemBackgroundCheckedHovered;
$semanticColorsListHeaderBackgroundHovered: --semanticColors-listHeaderBackgroundHovered;
$semanticColorsListHeaderBackgroundPressed: --semanticColors-listHeaderBackgroundPressed;
$semanticColorsMenuBackground: --semanticColors-menuBackground;
$semanticColorsMenuDivider: --semanticColors-menuDivider;
$semanticColorsMenuIcon: --semanticColors-menuIcon;
$semanticColorsMenuHeader: --semanticColors-menuHeader;
$semanticColorsMenuItemBackgroundHovered: --semanticColors-menuItemBackgroundHovered;
$semanticColorsMenuItemBackgroundPressed: --semanticColors-menuItemBackgroundPressed;
$semanticColorsMenuItemText: --semanticColors-menuItemText;
$semanticColorsMenuItemTextHovered: --semanticColors-menuItemTextHovered;
$semanticColorsErrorText: --semanticColors-errorText;
$semanticColorsMessageText: --semanticColors-messageText;
$semanticColorsMessageLink: --semanticColors-messageLink;
$semanticColorsMessageLinkHovered: --semanticColors-messageLinkHovered;
$semanticColorsInfoIcon: --semanticColors-infoIcon;
$semanticColorsErrorIcon: --semanticColors-errorIcon;
$semanticColorsBlockingIcon: --semanticColors-blockingIcon;
$semanticColorsWarningIcon: --semanticColors-warningIcon;
$semanticColorsSevereWarningIcon: --semanticColors-severeWarningIcon;
$semanticColorsSuccessIcon: --semanticColors-successIcon;
$semanticColorsInfoBackground: --semanticColors-infoBackground;
$semanticColorsErrorBackground: --semanticColors-errorBackground;
$semanticColorsBlockingBackground: --semanticColors-blockingBackground;
$semanticColorsWarningBackground: --semanticColors-warningBackground;
$semanticColorsSevereWarningBackground: --semanticColors-severeWarningBackground;
$semanticColorsSuccessBackground: --semanticColors-successBackground;
$semanticColorsWarningHighlight: --semanticColors-warningHighlight;
$semanticColorsWarningText: --semanticColors-warningText;
$semanticColorsSuccessText: --semanticColors-successText;
$semanticColorsListTextColor: --semanticColors-listTextColor;
$semanticColorsMenuItemBackgroundChecked: --semanticColors-menuItemBackgroundChecked;
$spacingS2: --spacing-s2;
$spacingS1: --spacing-s1;
$spacingM: --spacing-m;
$spacingL1: --spacing-l1;
$spacingL2: --spacing-l2;
$effectsElevation4: --effects-elevation4;
$effectsElevation8: --effects-elevation8;
$effectsElevation16: --effects-elevation16;
$effectsElevation64: --effects-elevation64;
$effectsRoundedCorner2: --effects-roundedCorner2;

@mixin fonts-medium {
  font-family: var($fontsMediumFontFamily);
  font-size: var($fontsMediumFontSize);
  font-weight: var($fontsMediumFontWeight);
  -webkit-font-smoothing: var($fontsMediumWebkitFontSmoothing);
  -moz-osx-font-smoothing: var($fontsMediumMozOsxFontSmoothing);
}