fix(Alert): change colors for AlertButton subtle

kiwicom · Apr 21, 2023 · 961c6a1 · 961c6a1
1 parent 50c69e8
commit 961c6a1
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 12 deletions.
diff --git a/packages/orbit-components/src/Alert/AlertButton/consts.ts b/packages/orbit-components/src/Alert/AlertButton/consts.ts
@@ -16,5 +16,7 @@ export enum TOKENS {
   backgroundButtonActive = "backgroundButtonActive",
   backgroundButtonFocus = "backgroundButtonFocus",
   colorTextButton = "colorTextButton",
+  colorTextButtonHover = "colorTextButtonHover",
+  colorTextButtonActive = "colorTextButtonActive",
   borderColorButtonFocus = "borderColorButtonFocus",
 }
diff --git a/packages/orbit-components/src/Alert/AlertButton/helpers/getAlertButtonStyles.ts b/packages/orbit-components/src/Alert/AlertButton/helpers/getAlertButtonStyles.ts
@@ -30,6 +30,8 @@ const getAlertButtonStyles = ({
     backgroundActive: wrappedTypeToken(TOKENS.backgroundButtonActive),
     backgroundFocus: null,
     foreground: wrappedTypeToken(TOKENS.colorTextButton),
+    foregroundHover: wrappedTypeToken(TOKENS.colorTextButtonHover),
+    foregroundActive: wrappedTypeToken(TOKENS.colorTextButtonActive),
     ...boxShadow,
   };
 };

diff --git a/packages/orbit-components/src/Alert/AlertButton/helpers/getAlertButtonTypeToken.ts b/packages/orbit-components/src/Alert/AlertButton/helpers/getAlertButtonTypeToken.ts
@@ -10,6 +10,8 @@ export type TokenName =
   | "backgroundButtonActive"
   | "backgroundButtonFocus"
   | "colorTextButton"
+  | "colorTextButtonHover"
+  | "colorTextButtonActive"
   | "borderColorButtonFocus";
 
 type GetAlertButtonTypeToken = (name: TokenName, type: Type, theme: Theme) => string;
@@ -21,31 +23,31 @@ const getAlertButtonTypeToken: GetAlertButtonTypeToken = (name, type, theme) =>
       [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundButtonSuccess,
       [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundButtonWarning,
       [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonCritical,
-      [TYPE_OPTIONS.INFO_SUBTLE]: theme.orbit.paletteBlueLightHover,
-      [TYPE_OPTIONS.SUCCESS_SUBTLE]: theme.orbit.paletteGreenLightHover,
-      [TYPE_OPTIONS.WARNING_SUBTLE]: theme.orbit.paletteOrangeLightHover,
-      [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.paletteRedLightHover,
+      [TYPE_OPTIONS.INFO_SUBTLE]: convertHexToRgba(theme.orbit.paletteBlueNormal, 12),
+      [TYPE_OPTIONS.SUCCESS_SUBTLE]: convertHexToRgba(theme.orbit.paletteGreenNormal, 12),
+      [TYPE_OPTIONS.WARNING_SUBTLE]: convertHexToRgba(theme.orbit.paletteOrangeNormal, 12),
+      [TYPE_OPTIONS.CRITICAL_SUBTLE]: convertHexToRgba(theme.orbit.paletteRedNormal, 12),
       [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonSecondary,
     },
     [TOKENS.backgroundButtonHover]: {
       [TYPE_OPTIONS.INFO]: theme.orbit.backgroundButtonInfoHover,
       [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundButtonSuccessHover,
       [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundButtonWarningHover,
       [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonCriticalHover,
-      [TYPE_OPTIONS.INFO_SUBTLE]: theme.orbit.paletteBlueLightHover,
-      [TYPE_OPTIONS.SUCCESS_SUBTLE]: theme.orbit.paletteGreenLightHover,
-      [TYPE_OPTIONS.WARNING_SUBTLE]: theme.orbit.paletteOrangeLightHover,
-      [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.paletteRedLightHover,
+      [TYPE_OPTIONS.INFO_SUBTLE]: convertHexToRgba(theme.orbit.paletteBlueNormal, 18),
+      [TYPE_OPTIONS.SUCCESS_SUBTLE]: convertHexToRgba(theme.orbit.paletteGreenNormal, 18),
+      [TYPE_OPTIONS.WARNING_SUBTLE]: convertHexToRgba(theme.orbit.paletteOrangeNormal, 18),
+      [TYPE_OPTIONS.CRITICAL_SUBTLE]: convertHexToRgba(theme.orbit.paletteRedNormal, 18),
     },
     [TOKENS.backgroundButtonActive]: {
       [TYPE_OPTIONS.INFO]: theme.orbit.backgroundButtonInfoActive,
       [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundButtonSuccessActive,
       [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundButtonWarningActive,
       [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonCriticalActive,
-      [TYPE_OPTIONS.INFO_SUBTLE]: theme.orbit.paletteBlueLightActive,
-      [TYPE_OPTIONS.SUCCESS_SUBTLE]: theme.orbit.paletteGreenLightActive,
-      [TYPE_OPTIONS.WARNING_SUBTLE]: theme.orbit.paletteOrangeLightActive,
-      [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.paletteRedLightActive,
+      [TYPE_OPTIONS.INFO_SUBTLE]: convertHexToRgba(theme.orbit.paletteBlueNormal, 24),
+      [TYPE_OPTIONS.SUCCESS_SUBTLE]: convertHexToRgba(theme.orbit.paletteGreenNormal, 24),
+      [TYPE_OPTIONS.WARNING_SUBTLE]: convertHexToRgba(theme.orbit.paletteOrangeNormal, 24),
+      [TYPE_OPTIONS.CRITICAL_SUBTLE]: convertHexToRgba(theme.orbit.paletteRedNormal, 24),
     },
     [TOKENS.backgroundButtonFocus]: {
       [TYPE_OPTIONS.INFO]: convertHexToRgba(theme.orbit.paletteBlueNormal, 10),
@@ -68,6 +70,28 @@ const getAlertButtonTypeToken: GetAlertButtonTypeToken = (name, type, theme) =>
       [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.paletteRedDark,
       [TYPE_OPTIONS.SECONDARY]: theme.orbit.paletteInkDark,
     },
+    [TOKENS.colorTextButtonHover]: {
+      [TYPE_OPTIONS.INFO]: theme.orbit.colorTextButtonInfo,
+      [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextButtonSuccess,
+      [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextButtonWarning,
+      [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCritical,
+      [TYPE_OPTIONS.INFO_SUBTLE]: theme.orbit.paletteBlueDarkHover,
+      [TYPE_OPTIONS.SUCCESS_SUBTLE]: theme.orbit.paletteGreenDarkHover,
+      [TYPE_OPTIONS.WARNING_SUBTLE]: theme.orbit.paletteOrangeDarkHover,
+      [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.paletteRedDarkHover,
+      [TYPE_OPTIONS.SECONDARY]: theme.orbit.paletteInkDark,
+    },
+    [TOKENS.colorTextButtonActive]: {
+      [TYPE_OPTIONS.INFO]: theme.orbit.colorTextButtonInfo,
+      [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextButtonSuccess,
+      [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextButtonWarning,
+      [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCritical,
+      [TYPE_OPTIONS.INFO_SUBTLE]: theme.orbit.paletteBlueDarkActive,
+      [TYPE_OPTIONS.SUCCESS_SUBTLE]: theme.orbit.paletteGreenDarkActive,
+      [TYPE_OPTIONS.WARNING_SUBTLE]: theme.orbit.paletteOrangeDarkActive,
+      [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.paletteRedDarkActive,
+      [TYPE_OPTIONS.SECONDARY]: theme.orbit.paletteInkDark,
+    },
     [TOKENS.borderColorButtonFocus]: {
       [TYPE_OPTIONS.INFO]: convertHexToRgba(theme.orbit.paletteBlueNormal, 50),
       [TYPE_OPTIONS.SUCCESS]: convertHexToRgba(theme.orbit.paletteGreenNormal, 50),