@nova-design-system/nova-base 3.0.0-beta.34 → 3.0.0-beta.36

package/dist/{lib/generated → generated}/nova-tailwind-tokens.js

@@ -181,54 +181,81 @@ export const NOVA_TAILWIND_TOKENS = {
     '.bg-interaction-container-branded-high': {
         'background-color': 'var(--color-interaction-container-branded-high-background)'
     },
+    '.bg-interaction-container-branded-high-active': {
+        'background-color': 'var(--color-interaction-container-branded-high-background-active)'
+    },
     '.bg-interaction-container-branded-high-hover': {
         'background-color': 'var(--color-interaction-container-branded-high-background-hover)'
     },
     '.border-interaction-container-branded-high': {
         'border-color': 'var(--color-interaction-container-branded-high-border)'
     },
+    '.border-interaction-container-branded-high-active': {
+        'border-color': 'var(--color-interaction-container-branded-high-border-active)'
+    },
     '.border-interaction-container-branded-high-hover': {
         'border-color': 'var(--color-interaction-container-branded-high-border-hover)'
     },
     '.icon-interaction-container-branded-high': {
         'color': 'var(--color-interaction-container-branded-high-icon)'
     },
+    '.icon-interaction-container-branded-high-active': {
+        'color': 'var(--color-interaction-container-branded-high-icon-active)'
+    },
     '.icon-interaction-container-branded-high-hover': {
         'color': 'var(--color-interaction-container-branded-high-icon-hover)'
     },
     '.text-interaction-container-branded-high': {
         'color': 'var(--color-interaction-container-branded-high-text)'
     },
+    '.text-interaction-container-branded-high-active': {
+        'color': 'var(--color-interaction-container-branded-high-text-active)'
+    },
     '.text-interaction-container-branded-high-hover': {
         'color': 'var(--color-interaction-container-branded-high-text-hover)'
     },
     '.bg-interaction-container-branded-low': {
         'background-color': 'var(--color-interaction-container-branded-low-background)'
     },
+    '.bg-interaction-container-branded-low-active': {
+        'background-color': 'var(--color-interaction-container-branded-low-background-active)'
+    },
     '.bg-interaction-container-branded-low-hover': {
         'background-color': 'var(--color-interaction-container-branded-low-background-hover)'
     },
     '.border-interaction-container-branded-low': {
         'border-color': 'var(--color-interaction-container-branded-low-border)'
     },
+    '.border-interaction-container-branded-low-active': {
+        'border-color': 'var(--color-interaction-container-branded-low-border-active)'
+    },
     '.border-interaction-container-branded-low-hover': {
         'border-color': 'var(--color-interaction-container-branded-low-border-hover)'
     },
     '.icon-interaction-container-branded-low': {
         'color': 'var(--color-interaction-container-branded-low-icon)'
     },
+    '.icon-interaction-container-branded-low-active': {
+        'color': 'var(--color-interaction-container-branded-low-icon-active)'
+    },
     '.icon-interaction-container-branded-low-hover': {
         'color': 'var(--color-interaction-container-branded-low-icon-hover)'
     },
     '.text-interaction-container-branded-low': {
         'color': 'var(--color-interaction-container-branded-low-text)'
     },
+    '.text-interaction-container-branded-low-active': {
+        'color': 'var(--color-interaction-container-branded-low-text-active)'
+    },
     '.text-interaction-container-branded-low-hover': {
         'color': 'var(--color-interaction-container-branded-low-text-hover)'
     },
     '.bg-interaction-container-neutral': {
         'background-color': 'var(--color-interaction-container-neutral-background)'
     },
+    '.bg-interaction-container-neutral-active': {
+        'background-color': 'var(--color-interaction-container-neutral-background-active)'
+    },
     '.bg-interaction-container-neutral-hover': {
         'background-color': 'var(--color-interaction-container-neutral-background-hover)'
     },
@@ -241,12 +268,18 @@ export const NOVA_TAILWIND_TOKENS = {
     '.icon-interaction-container-neutral': {
         'color': 'var(--color-interaction-container-neutral-icon)'
     },
+    '.icon-interaction-container-neutral-active': {
+        'color': 'var(--color-interaction-container-neutral-icon-active)'
+    },
     '.icon-interaction-container-neutral-hover': {
         'color': 'var(--color-interaction-container-neutral-icon-hover)'
     },
     '.text-interaction-container-neutral': {
         'color': 'var(--color-interaction-container-neutral-text)'
     },
+    '.text-interaction-container-neutral-active': {
+        'color': 'var(--color-interaction-container-neutral-text-active)'
+    },
     '.text-interaction-container-neutral-hover': {
         'color': 'var(--color-interaction-container-neutral-text-hover)'
     },
@@ -262,6 +295,18 @@ export const NOVA_TAILWIND_TOKENS = {
     '.text-interaction-link-high-hover': {
         'color': 'var(--color-interaction-link-high-text-hover)'
     },
+    '.icon-interaction-link-inverted': {
+        'color': 'var(--color-interaction-link-inverted-icon)'
+    },
+    '.icon-interaction-link-inverted-hover': {
+        'color': 'var(--color-interaction-link-inverted-icon-hover)'
+    },
+    '.text-interaction-link-inverted': {
+        'color': 'var(--color-interaction-link-inverted-text)'
+    },
+    '.text-interaction-link-inverted-hover': {
+        'color': 'var(--color-interaction-link-inverted-text-hover)'
+    },
     '.icon-interaction-link-low': {
         'color': 'var(--color-interaction-link-low-icon)'
     },
@@ -283,6 +328,9 @@ export const NOVA_TAILWIND_TOKENS = {
     '.bg-level-10': {
         'background-color': 'var(--color-level-10-background)'
     },
+    '.bg-level-15': {
+        'background-color': 'var(--color-level-15-background)'
+    },
     '.bg-level-20': {
         'background-color': 'var(--color-level-20-background)'
     },
@@ -292,6 +340,27 @@ export const NOVA_TAILWIND_TOKENS = {
     '.bg-level-40': {
         'background-color': 'var(--color-level-40-background)'
     },
+    '.bg-level-inverted-00': {
+        'background-color': 'var(--color-level-inverted-00-background)'
+    },
+    '.bg-level-inverted-05': {
+        'background-color': 'var(--color-level-inverted-05-background)'
+    },
+    '.bg-level-inverted-10': {
+        'background-color': 'var(--color-level-inverted-10-background)'
+    },
+    '.bg-level-inverted-15': {
+        'background-color': 'var(--color-level-inverted-15-background)'
+    },
+    '.bg-level-inverted-20': {
+        'background-color': 'var(--color-level-inverted-20-background)'
+    },
+    '.bg-level-inverted-30': {
+        'background-color': 'var(--color-level-inverted-30-background)'
+    },
+    '.bg-level-inverted-40': {
+        'background-color': 'var(--color-level-inverted-40-background)'
+    },
     '.bg-rainbow-1': {
         'background-color': 'var(--color-rainbow-1-background)'
     },

package/dist/js/mccs_dark.d.ts

@@ -3,29 +3,40 @@
  */
 
 export const ColorInteractionContainerBrandedLowBackground : string;
+export const ColorInteractionContainerBrandedLowBackgroundActive : string;
 export const ColorInteractionContainerBrandedLowBackgroundHover : string;
-export const ColorInteractionContainerBrandedLowText : string;
-export const ColorInteractionContainerBrandedLowTextHover : string;
-export const ColorInteractionContainerBrandedLowIcon : string;
-export const ColorInteractionContainerBrandedLowIconHover : string;
 export const ColorInteractionContainerBrandedLowBorder : string;
+export const ColorInteractionContainerBrandedLowBorderActive : string;
 export const ColorInteractionContainerBrandedLowBorderHover : string;
+export const ColorInteractionContainerBrandedLowIcon : string;
+export const ColorInteractionContainerBrandedLowIconActive : string;
+export const ColorInteractionContainerBrandedLowIconHover : string;
+export const ColorInteractionContainerBrandedLowText : string;
+export const ColorInteractionContainerBrandedLowTextActive : string;
+export const ColorInteractionContainerBrandedLowTextHover : string;
 export const ColorInteractionContainerBrandedHighBackground : string;
+export const ColorInteractionContainerBrandedHighBackgroundActive : string;
 export const ColorInteractionContainerBrandedHighBackgroundHover : string;
-export const ColorInteractionContainerBrandedHighText : string;
-export const ColorInteractionContainerBrandedHighTextHover : string;
-export const ColorInteractionContainerBrandedHighIcon : string;
-export const ColorInteractionContainerBrandedHighIconHover : string;
 export const ColorInteractionContainerBrandedHighBorder : string;
+export const ColorInteractionContainerBrandedHighBorderActive : string;
 export const ColorInteractionContainerBrandedHighBorderHover : string;
+export const ColorInteractionContainerBrandedHighIcon : string;
+export const ColorInteractionContainerBrandedHighIconActive : string;
+export const ColorInteractionContainerBrandedHighIconHover : string;
+export const ColorInteractionContainerBrandedHighText : string;
+export const ColorInteractionContainerBrandedHighTextActive : string;
+export const ColorInteractionContainerBrandedHighTextHover : string;
 export const ColorInteractionContainerNeutralBackground : string;
 export const ColorInteractionContainerNeutralBackgroundHover : string;
-export const ColorInteractionContainerNeutralText : string;
-export const ColorInteractionContainerNeutralTextHover : string;
-export const ColorInteractionContainerNeutralIcon : string;
-export const ColorInteractionContainerNeutralIconHover : string;
+export const ColorInteractionContainerNeutralBackgroundActive : string;
 export const ColorInteractionContainerNeutralBorder : string;
 export const ColorInteractionContainerNeutralBorderHover : string;
+export const ColorInteractionContainerNeutralIcon : string;
+export const ColorInteractionContainerNeutralIconActive : string;
+export const ColorInteractionContainerNeutralIconHover : string;
+export const ColorInteractionContainerNeutralText : string;
+export const ColorInteractionContainerNeutralTextActive : string;
+export const ColorInteractionContainerNeutralTextHover : string;
 export const ColorInteractionLinkHighText : string;
 export const ColorInteractionLinkHighTextHover : string;
 export const ColorInteractionLinkHighIcon : string;
@@ -34,13 +45,25 @@ export const ColorInteractionLinkLowText : string;
 export const ColorInteractionLinkLowTextHover : string;
 export const ColorInteractionLinkLowIcon : string;
 export const ColorInteractionLinkLowIconHover : string;
+export const ColorInteractionLinkInvertedText : string;
+export const ColorInteractionLinkInvertedTextHover : string;
+export const ColorInteractionLinkInvertedIcon : string;
+export const ColorInteractionLinkInvertedIconHover : string;
 export const ColorBlack : string;
 export const ColorLevel10Background : string;
+export const ColorLevel15Background : string;
 export const ColorLevel20Background : string;
 export const ColorLevel30Background : string;
 export const ColorLevel40Background : string;
 export const ColorLevel00Background : string;
 export const ColorLevel05Background : string;
+export const ColorLevelInverted10Background : string;
+export const ColorLevelInverted15Background : string;
+export const ColorLevelInverted20Background : string;
+export const ColorLevelInverted30Background : string;
+export const ColorLevelInverted40Background : string;
+export const ColorLevelInverted00Background : string;
+export const ColorLevelInverted05Background : string;
 export const ColorContentHighBorder : string;
 export const ColorContentHighText : string;
 export const ColorContentHighIcon : string;
@@ -192,30 +215,42 @@ export const ShadowYAxis2xl : string;
 export const ComponentsWpfComponents2 : string;
 export const ComponentsButtonHighBorder : string;
 export const ComponentsButtonHighBorderHover : string;
+export const ComponentsButtonHighBorderActive : string;
 export const ComponentsButtonHighBackground : string;
+export const ComponentsButtonHighBackgroundActive : string;
 export const ComponentsButtonHighBackgroundHover : string;
 export const ComponentsButtonHighText : string;
+export const ComponentsButtonHighTextActive : string;
 export const ComponentsButtonHighTextHover : string;
 export const ComponentsButtonHighIcon : string;
+export const ComponentsButtonHighIconActive : string;
 export const ComponentsButtonHighIconHover : string;
 export const ComponentsButtonLowBackground : string;
+export const ComponentsButtonLowBackgroundActive : string;
 export const ComponentsButtonLowBackgroundHover : string;
-export const ComponentsButtonLowText : string;
-export const ComponentsButtonLowTextHover : string;
-export const ComponentsButtonLowIcon : string;
-export const ComponentsButtonLowIconHover : string;
 export const ComponentsButtonLowBorder : string;
+export const ComponentsButtonLowBorderActive : string;
 export const ComponentsButtonLowBorderHover : string;
+export const ComponentsButtonLowIcon : string;
+export const ComponentsButtonLowIconActive : string;
+export const ComponentsButtonLowIconHover : string;
+export const ComponentsButtonLowText : string;
+export const ComponentsButtonLowTextActive : string;
+export const ComponentsButtonLowTextHover : string;
 export const ComponentsButtonLowerBorder : string;
+export const ComponentsButtonLowerBorderActive : string;
 export const ComponentsButtonLowerBorderHover : string;
 export const ComponentsButtonLowerBorder2 : string;
 export const ComponentsButtonLowerBorderHover2 : string;
 export const ComponentsButtonLowerBackground : string;
+export const ComponentsButtonLowerBackgroundActive : string;
 export const ComponentsButtonLowerBackgroundHover : string;
-export const ComponentsButtonLowerText : string;
-export const ComponentsButtonLowerTextHover : string;
 export const ComponentsButtonLowerIcon : string;
+export const ComponentsButtonLowerIconActive : string;
 export const ComponentsButtonLowerIconHover : string;
+export const ComponentsButtonLowerText : string;
+export const ComponentsButtonLowerTextActive : string;
+export const ComponentsButtonLowerTextHover : string;
 export const ComponentsButtonGrAsComplementaryBorder : string;
 export const ComponentsButtonGrAsComplementaryBorderHover : string;
 export const ComponentsButtonGrAsComplementaryBackground : string;
@@ -225,13 +260,17 @@ export const ComponentsButtonGrAsComplementaryTextHover : string;
 export const ComponentsButtonGrAsComplementaryIcon : string;
 export const ComponentsButtonGrAsComplementaryIconHover : string;
 export const ComponentsButtonMediumBackground : string;
+export const ComponentsButtonMediumBackgroundActive : string;
 export const ComponentsButtonMediumBackgroundHover : string;
-export const ComponentsButtonMediumText : string;
-export const ComponentsButtonMediumTextHover : string;
-export const ComponentsButtonMediumIcon : string;
-export const ComponentsButtonMediumIconHover : string;
 export const ComponentsButtonMediumBorder : string;
+export const ComponentsButtonMediumBorderActive : string;
 export const ComponentsButtonMediumBorderHover : string;
+export const ComponentsButtonMediumIcon : string;
+export const ComponentsButtonMediumIconActive : string;
+export const ComponentsButtonMediumIconHover : string;
+export const ComponentsButtonMediumText : string;
+export const ComponentsButtonMediumTextActive : string;
+export const ComponentsButtonMediumTextHover : string;
 export const ComponentsFormOpacityDefault : string;
 export const ComponentsFormOpacityDisabled : string;
 export const ComponentsFormTextRequired : string;
@@ -330,6 +369,8 @@ export const ComponentsButtonDestructiveLowerIcon : string;
 export const ComponentsButtonDestructiveLowerIconHover : string;
 export const ComponentsButtonDestructiveLowerBorder : string;
 export const ComponentsButtonDestructiveLowerBorderHover : string;
+export const ComponentsOverlayOpacity : string;
+export const ComponentsOverlayBackground : string;
 export const ComponentsAlertInformationBackground : string;
 export const ComponentsAlertInformationIcon : string;
 export const ComponentsAlertInformationBorder : string;

package/dist/js/mccs_dark.js

@@ -3,29 +3,40 @@
  */
 
 export const ColorInteractionContainerBrandedLowBackground = "#ffffff";
+export const ColorInteractionContainerBrandedLowBackgroundActive = "#ffffff";
 export const ColorInteractionContainerBrandedLowBackgroundHover = "#ffffff";
-export const ColorInteractionContainerBrandedLowText = "#4b9eaa";
-export const ColorInteractionContainerBrandedLowTextHover = "#71b2bc";
-export const ColorInteractionContainerBrandedLowIcon = "#4b9eaa";
-export const ColorInteractionContainerBrandedLowIconHover = "#71b2bc";
 export const ColorInteractionContainerBrandedLowBorder = "#4b9eaa";
+export const ColorInteractionContainerBrandedLowBorderActive = "#71b2bc";
 export const ColorInteractionContainerBrandedLowBorderHover = "#71b2bc";
+export const ColorInteractionContainerBrandedLowIcon = "#4b9eaa";
+export const ColorInteractionContainerBrandedLowIconActive = "#71b2bc";
+export const ColorInteractionContainerBrandedLowIconHover = "#71b2bc";
+export const ColorInteractionContainerBrandedLowText = "#4b9eaa";
+export const ColorInteractionContainerBrandedLowTextActive = "#71b2bc";
+export const ColorInteractionContainerBrandedLowTextHover = "#71b2bc";
 export const ColorInteractionContainerBrandedHighBackground = "#1f717d";
+export const ColorInteractionContainerBrandedHighBackgroundActive = "#258998";
 export const ColorInteractionContainerBrandedHighBackgroundHover = "#258998";
-export const ColorInteractionContainerBrandedHighText = "#ffffff";
-export const ColorInteractionContainerBrandedHighTextHover = "#ffffff";
-export const ColorInteractionContainerBrandedHighIcon = "#ffffff";
-export const ColorInteractionContainerBrandedHighIconHover = "#ffffff";
 export const ColorInteractionContainerBrandedHighBorder = "#1f717d";
+export const ColorInteractionContainerBrandedHighBorderActive = "#258998";
 export const ColorInteractionContainerBrandedHighBorderHover = "#258998";
+export const ColorInteractionContainerBrandedHighIcon = "#ffffff";
+export const ColorInteractionContainerBrandedHighIconActive = "#ffffff";
+export const ColorInteractionContainerBrandedHighIconHover = "#ffffff";
+export const ColorInteractionContainerBrandedHighText = "#ffffff";
+export const ColorInteractionContainerBrandedHighTextActive = "#ffffff";
+export const ColorInteractionContainerBrandedHighTextHover = "#ffffff";
 export const ColorInteractionContainerNeutralBackground = "#ffffff";
 export const ColorInteractionContainerNeutralBackgroundHover = "#ffffff";
-export const ColorInteractionContainerNeutralText = "#889499";
-export const ColorInteractionContainerNeutralTextHover = "#bac1c4";
-export const ColorInteractionContainerNeutralIcon = "#889499";
-export const ColorInteractionContainerNeutralIconHover = "#bac1c4";
+export const ColorInteractionContainerNeutralBackgroundActive = "#ffffff";
 export const ColorInteractionContainerNeutralBorder = "#889499";
 export const ColorInteractionContainerNeutralBorderHover = "#bac1c4";
+export const ColorInteractionContainerNeutralIcon = "#889499";
+export const ColorInteractionContainerNeutralIconActive = "#71b2bc";
+export const ColorInteractionContainerNeutralIconHover = "#bac1c4";
+export const ColorInteractionContainerNeutralText = "#889499";
+export const ColorInteractionContainerNeutralTextActive = "#71b2bc";
+export const ColorInteractionContainerNeutralTextHover = "#bac1c4";
 export const ColorInteractionLinkHighText = "#4b9eaa";
 export const ColorInteractionLinkHighTextHover = "#71b2bc";
 export const ColorInteractionLinkHighIcon = "#4b9eaa";
@@ -34,13 +45,25 @@ export const ColorInteractionLinkLowText = "#f5f6f7";
 export const ColorInteractionLinkLowTextHover = "#4b9eaa";
 export const ColorInteractionLinkLowIcon = "#f5f6f7";
 export const ColorInteractionLinkLowIconHover = "#4b9eaa";
+export const ColorInteractionLinkInvertedText = "#27353b";
+export const ColorInteractionLinkInvertedTextHover = "#4b9eaa";
+export const ColorInteractionLinkInvertedIcon = "#27353b";
+export const ColorInteractionLinkInvertedIconHover = "#4b9eaa";
 export const ColorBlack = "#000000";
 export const ColorLevel10Background = "#171f22";
+export const ColorLevel15Background = "#1e272b";
 export const ColorLevel20Background = "#222e33";
 export const ColorLevel30Background = "#2e3e44";
 export const ColorLevel40Background = "#394d55";
 export const ColorLevel00Background = "#0b0f11";
 export const ColorLevel05Background = "#11171a";
+export const ColorLevelInverted10Background = "#f5f6f7";
+export const ColorLevelInverted15Background = "#eaeef0";
+export const ColorLevelInverted20Background = "#ffffff";
+export const ColorLevelInverted30Background = "#f5f6f7";
+export const ColorLevelInverted40Background = "#ffffff";
+export const ColorLevelInverted00Background = "#ffffff";
+export const ColorLevelInverted05Background = "#fafbfb";
 export const ColorContentHighBorder = "#889499";
 export const ColorContentHighText = "#f5f6f7";
 export const ColorContentHighIcon = "#f5f6f7";
@@ -192,30 +215,42 @@ export const ShadowYAxis2xl = "25px";
 export const ComponentsWpfComponents2 = "#ffffff";
 export const ComponentsButtonHighBorder = "#ffffff";
 export const ComponentsButtonHighBorderHover = "#ffffff";
+export const ComponentsButtonHighBorderActive = "#ffffff";
 export const ComponentsButtonHighBackground = "#1f717d";
+export const ComponentsButtonHighBackgroundActive = "#258998";
 export const ComponentsButtonHighBackgroundHover = "#258998";
 export const ComponentsButtonHighText = "#ffffff";
+export const ComponentsButtonHighTextActive = "#ffffff";
 export const ComponentsButtonHighTextHover = "#ffffff";
 export const ComponentsButtonHighIcon = "#ffffff";
+export const ComponentsButtonHighIconActive = "#ffffff";
 export const ComponentsButtonHighIconHover = "#ffffff";
 export const ComponentsButtonLowBackground = "#ffffff";
+export const ComponentsButtonLowBackgroundActive = "#ffffff";
 export const ComponentsButtonLowBackgroundHover = "#ffffff";
-export const ComponentsButtonLowText = "#4b9eaa";
-export const ComponentsButtonLowTextHover = "#71b2bc";
-export const ComponentsButtonLowIcon = "#4b9eaa";
-export const ComponentsButtonLowIconHover = "#71b2bc";
 export const ComponentsButtonLowBorder = "#4b9eaa";
+export const ComponentsButtonLowBorderActive = "#71b2bc";
 export const ComponentsButtonLowBorderHover = "#71b2bc";
+export const ComponentsButtonLowIcon = "#4b9eaa";
+export const ComponentsButtonLowIconActive = "#71b2bc";
+export const ComponentsButtonLowIconHover = "#71b2bc";
+export const ComponentsButtonLowText = "#4b9eaa";
+export const ComponentsButtonLowTextActive = "#71b2bc";
+export const ComponentsButtonLowTextHover = "#71b2bc";
 export const ComponentsButtonLowerBorder = "#ffffff";
+export const ComponentsButtonLowerBorderActive = "#ffffff";
 export const ComponentsButtonLowerBorderHover = "#ffffff";
 export const ComponentsButtonLowerBorder2 = "#ffffff";
 export const ComponentsButtonLowerBorderHover2 = "#ffffff";
 export const ComponentsButtonLowerBackground = "#ffffff";
+export const ComponentsButtonLowerBackgroundActive = "#ffffff";
 export const ComponentsButtonLowerBackgroundHover = "#ffffff";
-export const ComponentsButtonLowerText = "#4b9eaa";
-export const ComponentsButtonLowerTextHover = "#71b2bc";
 export const ComponentsButtonLowerIcon = "#4b9eaa";
+export const ComponentsButtonLowerIconActive = "#71b2bc";
 export const ComponentsButtonLowerIconHover = "#71b2bc";
+export const ComponentsButtonLowerText = "#4b9eaa";
+export const ComponentsButtonLowerTextActive = "#71b2bc";
+export const ComponentsButtonLowerTextHover = "#71b2bc";
 export const ComponentsButtonGrAsComplementaryBorder = "#ffffff";
 export const ComponentsButtonGrAsComplementaryBorderHover = "#ffffff";
 export const ComponentsButtonGrAsComplementaryBackground = "#3f555e";
@@ -225,13 +260,17 @@ export const ComponentsButtonGrAsComplementaryTextHover = "#ffffff";
 export const ComponentsButtonGrAsComplementaryIcon = "#ffffff";
 export const ComponentsButtonGrAsComplementaryIconHover = "#ffffff";
 export const ComponentsButtonMediumBackground = "#3f555e";
+export const ComponentsButtonMediumBackgroundActive = "#72858c";
 export const ComponentsButtonMediumBackgroundHover = "#72858c";
-export const ComponentsButtonMediumText = "#ffffff";
-export const ComponentsButtonMediumTextHover = "#ffffff";
-export const ComponentsButtonMediumIcon = "#ffffff";
-export const ComponentsButtonMediumIconHover = "#ffffff";
 export const ComponentsButtonMediumBorder = "#ffffff";
+export const ComponentsButtonMediumBorderActive = "#ffffff";
 export const ComponentsButtonMediumBorderHover = "#ffffff";
+export const ComponentsButtonMediumIcon = "#ffffff";
+export const ComponentsButtonMediumIconActive = "#ffffff";
+export const ComponentsButtonMediumIconHover = "#ffffff";
+export const ComponentsButtonMediumText = "#ffffff";
+export const ComponentsButtonMediumTextActive = "#ffffff";
+export const ComponentsButtonMediumTextHover = "#ffffff";
 export const ComponentsFormOpacityDefault = "100px";
 export const ComponentsFormOpacityDisabled = "50px";
 export const ComponentsFormTextRequired = "#ff3d3d";
@@ -330,6 +369,8 @@ export const ComponentsButtonDestructiveLowerIcon = "#1e272b";
 export const ComponentsButtonDestructiveLowerIconHover = "#1e272b";
 export const ComponentsButtonDestructiveLowerBorder = "#1e272b";
 export const ComponentsButtonDestructiveLowerBorderHover = "#1e272b";
+export const ComponentsOverlayOpacity = "75px";
+export const ComponentsOverlayBackground = "#27353b";
 export const ComponentsAlertInformationBackground = "#001c37";
 export const ComponentsAlertInformationIcon = "#659fff";
 export const ComponentsAlertInformationBorder = "#659fff";

package/dist/js/mccs_light.d.ts

@@ -3,29 +3,40 @@
  */
 
 export const ColorInteractionContainerBrandedLowBackground : string;
+export const ColorInteractionContainerBrandedLowBackgroundActive : string;
 export const ColorInteractionContainerBrandedLowBackgroundHover : string;
-export const ColorInteractionContainerBrandedLowText : string;
-export const ColorInteractionContainerBrandedLowTextHover : string;
-export const ColorInteractionContainerBrandedLowIcon : string;
-export const ColorInteractionContainerBrandedLowIconHover : string;
 export const ColorInteractionContainerBrandedLowBorder : string;
+export const ColorInteractionContainerBrandedLowBorderActive : string;
 export const ColorInteractionContainerBrandedLowBorderHover : string;
+export const ColorInteractionContainerBrandedLowIcon : string;
+export const ColorInteractionContainerBrandedLowIconActive : string;
+export const ColorInteractionContainerBrandedLowIconHover : string;
+export const ColorInteractionContainerBrandedLowText : string;
+export const ColorInteractionContainerBrandedLowTextActive : string;
+export const ColorInteractionContainerBrandedLowTextHover : string;
 export const ColorInteractionContainerBrandedHighBackground : string;
+export const ColorInteractionContainerBrandedHighBackgroundActive : string;
 export const ColorInteractionContainerBrandedHighBackgroundHover : string;
-export const ColorInteractionContainerBrandedHighText : string;
-export const ColorInteractionContainerBrandedHighTextHover : string;
-export const ColorInteractionContainerBrandedHighIcon : string;
-export const ColorInteractionContainerBrandedHighIconHover : string;
 export const ColorInteractionContainerBrandedHighBorder : string;
+export const ColorInteractionContainerBrandedHighBorderActive : string;
 export const ColorInteractionContainerBrandedHighBorderHover : string;
+export const ColorInteractionContainerBrandedHighIcon : string;
+export const ColorInteractionContainerBrandedHighIconActive : string;
+export const ColorInteractionContainerBrandedHighIconHover : string;
+export const ColorInteractionContainerBrandedHighText : string;
+export const ColorInteractionContainerBrandedHighTextActive : string;
+export const ColorInteractionContainerBrandedHighTextHover : string;
 export const ColorInteractionContainerNeutralBackground : string;
 export const ColorInteractionContainerNeutralBackgroundHover : string;
-export const ColorInteractionContainerNeutralText : string;
-export const ColorInteractionContainerNeutralTextHover : string;
-export const ColorInteractionContainerNeutralIcon : string;
-export const ColorInteractionContainerNeutralIconHover : string;
+export const ColorInteractionContainerNeutralBackgroundActive : string;
 export const ColorInteractionContainerNeutralBorder : string;
 export const ColorInteractionContainerNeutralBorderHover : string;
+export const ColorInteractionContainerNeutralIcon : string;
+export const ColorInteractionContainerNeutralIconActive : string;
+export const ColorInteractionContainerNeutralIconHover : string;
+export const ColorInteractionContainerNeutralText : string;
+export const ColorInteractionContainerNeutralTextActive : string;
+export const ColorInteractionContainerNeutralTextHover : string;
 export const ColorInteractionLinkHighText : string;
 export const ColorInteractionLinkHighTextHover : string;
 export const ColorInteractionLinkHighIcon : string;
@@ -34,13 +45,25 @@ export const ColorInteractionLinkLowText : string;
 export const ColorInteractionLinkLowTextHover : string;
 export const ColorInteractionLinkLowIcon : string;
 export const ColorInteractionLinkLowIconHover : string;
+export const ColorInteractionLinkInvertedText : string;
+export const ColorInteractionLinkInvertedTextHover : string;
+export const ColorInteractionLinkInvertedIcon : string;
+export const ColorInteractionLinkInvertedIconHover : string;
 export const ColorBlack : string;
 export const ColorLevel10Background : string;
+export const ColorLevel15Background : string;
 export const ColorLevel20Background : string;
 export const ColorLevel30Background : string;
 export const ColorLevel40Background : string;
 export const ColorLevel00Background : string;
 export const ColorLevel05Background : string;
+export const ColorLevelInverted10Background : string;
+export const ColorLevelInverted15Background : string;
+export const ColorLevelInverted20Background : string;
+export const ColorLevelInverted30Background : string;
+export const ColorLevelInverted40Background : string;
+export const ColorLevelInverted00Background : string;
+export const ColorLevelInverted05Background : string;
 export const ColorContentHighBorder : string;
 export const ColorContentHighText : string;
 export const ColorContentHighIcon : string;
@@ -192,30 +215,42 @@ export const ShadowYAxis2xl : string;
 export const ComponentsWpfComponents2 : string;
 export const ComponentsButtonHighBorder : string;
 export const ComponentsButtonHighBorderHover : string;
+export const ComponentsButtonHighBorderActive : string;
 export const ComponentsButtonHighBackground : string;
+export const ComponentsButtonHighBackgroundActive : string;
 export const ComponentsButtonHighBackgroundHover : string;
 export const ComponentsButtonHighText : string;
+export const ComponentsButtonHighTextActive : string;
 export const ComponentsButtonHighTextHover : string;
 export const ComponentsButtonHighIcon : string;
+export const ComponentsButtonHighIconActive : string;
 export const ComponentsButtonHighIconHover : string;
 export const ComponentsButtonLowBackground : string;
+export const ComponentsButtonLowBackgroundActive : string;
 export const ComponentsButtonLowBackgroundHover : string;
-export const ComponentsButtonLowText : string;
-export const ComponentsButtonLowTextHover : string;
-export const ComponentsButtonLowIcon : string;
-export const ComponentsButtonLowIconHover : string;
 export const ComponentsButtonLowBorder : string;
+export const ComponentsButtonLowBorderActive : string;
 export const ComponentsButtonLowBorderHover : string;
+export const ComponentsButtonLowIcon : string;
+export const ComponentsButtonLowIconActive : string;
+export const ComponentsButtonLowIconHover : string;
+export const ComponentsButtonLowText : string;
+export const ComponentsButtonLowTextActive : string;
+export const ComponentsButtonLowTextHover : string;
 export const ComponentsButtonLowerBorder : string;
+export const ComponentsButtonLowerBorderActive : string;
 export const ComponentsButtonLowerBorderHover : string;
 export const ComponentsButtonLowerBorder2 : string;
 export const ComponentsButtonLowerBorderHover2 : string;
 export const ComponentsButtonLowerBackground : string;
+export const ComponentsButtonLowerBackgroundActive : string;
 export const ComponentsButtonLowerBackgroundHover : string;
-export const ComponentsButtonLowerText : string;
-export const ComponentsButtonLowerTextHover : string;
 export const ComponentsButtonLowerIcon : string;
+export const ComponentsButtonLowerIconActive : string;
 export const ComponentsButtonLowerIconHover : string;
+export const ComponentsButtonLowerText : string;
+export const ComponentsButtonLowerTextActive : string;
+export const ComponentsButtonLowerTextHover : string;
 export const ComponentsButtonGrAsComplementaryBorder : string;
 export const ComponentsButtonGrAsComplementaryBorderHover : string;
 export const ComponentsButtonGrAsComplementaryBackground : string;
@@ -225,13 +260,17 @@ export const ComponentsButtonGrAsComplementaryTextHover : string;
 export const ComponentsButtonGrAsComplementaryIcon : string;
 export const ComponentsButtonGrAsComplementaryIconHover : string;
 export const ComponentsButtonMediumBackground : string;
+export const ComponentsButtonMediumBackgroundActive : string;
 export const ComponentsButtonMediumBackgroundHover : string;
-export const ComponentsButtonMediumText : string;
-export const ComponentsButtonMediumTextHover : string;
-export const ComponentsButtonMediumIcon : string;
-export const ComponentsButtonMediumIconHover : string;
 export const ComponentsButtonMediumBorder : string;
+export const ComponentsButtonMediumBorderActive : string;
 export const ComponentsButtonMediumBorderHover : string;
+export const ComponentsButtonMediumIcon : string;
+export const ComponentsButtonMediumIconActive : string;
+export const ComponentsButtonMediumIconHover : string;
+export const ComponentsButtonMediumText : string;
+export const ComponentsButtonMediumTextActive : string;
+export const ComponentsButtonMediumTextHover : string;
 export const ComponentsFormOpacityDefault : string;
 export const ComponentsFormOpacityDisabled : string;
 export const ComponentsFormTextRequired : string;
@@ -330,6 +369,8 @@ export const ComponentsButtonDestructiveLowerIcon : string;
 export const ComponentsButtonDestructiveLowerIconHover : string;
 export const ComponentsButtonDestructiveLowerBorder : string;
 export const ComponentsButtonDestructiveLowerBorderHover : string;
+export const ComponentsOverlayOpacity : string;
+export const ComponentsOverlayBackground : string;
 export const ComponentsAlertInformationBackground : string;
 export const ComponentsAlertInformationIcon : string;
 export const ComponentsAlertInformationBorder : string;