adding new color

Author: gabrielpereirapinheiro

packages/gestalt/src/Button.css

@@ -202,26 +202,26 @@ a.lgVr:focus {
   background-color: var(--color-background-button-white-active);
 }
 
-.light {
+.alwaysLight {
   background-color: var(--color-background-light);
 }
 
-.light:hover {
+.alwaysLight:hover {
   background-color: var(--color-background-button-tertiary-hover);
 }
 
-.light:active {
+.alwaysLight:active {
   background-color: var(--color-background-button-tertiary-active);
 }
 
-.dark {
+.alwaysDark {
   background-color: var(--color-background-dark);
 }
 
-.dark:hover {
+.alwaysDark:hover {
   background-color: var(--color-background-button-tertiary-hover);
 }
 
-.dark:active {
+.alwaysDark:active {
   background-color: var(--color-background-button-tertiary-active);
 }

packages/gestalt/src/Button.tsx

@@ -256,8 +256,8 @@ const ButtonWithForwardRef = forwardRef<HTMLButtonElement, Props>(function Butto
 
   let colorClass = color === 'transparentWhiteText' && !isInVRExperiment ? 'transparent' : color;
 
-  colorClass = color === 'alwaysLight' ? 'light' : colorClass;
-  colorClass = color === 'alwaysDark' ? 'dark' : colorClass;
+  colorClass = color === 'alwaysLight' ? 'alwaysLight' : colorClass;
+  colorClass = color === 'alwaysDark' ? 'alwaysDark' : colorClass;
 
 
   const { isFocusVisible } = useFocusVisible();