feat(shared-types,ui-buttons): add theme variables for default and ho…

…ver states for buttons Closes: INSTUI-4421
instructure · Jan 8, 2025 · eeb9c3b · eeb9c3b
1 parent 47f6eb8
commit eeb9c3b
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 22 deletions.
diff --git a/packages/shared-types/src/ComponentThemeVariables.ts b/packages/shared-types/src/ComponentThemeVariables.ts
@@ -182,6 +182,10 @@ export type BaseButtonTheme = {
   primaryGhostHoverBackground: Colors['contrasts']['blue1212']
   primaryGhostActiveBackground: string
   primaryGhostActiveBoxShadow: string
+  primaryBoxShadow: string
+  primaryGhostBoxShadow: string
+  primaryHoverBoxShadow: string
+  primaryGhostHoverBoxShadow: string
 
   secondaryColor: Colors['contrasts']['grey125125']
   secondaryBorderColor: Colors['contrasts']['grey1214']
@@ -195,6 +199,10 @@ export type BaseButtonTheme = {
   secondaryGhostHoverBackground: Colors['contrasts']['grey1111']
   secondaryGhostActiveBackground: string
   secondaryGhostActiveBoxShadow: string
+  secondaryBoxShadow: string
+  secondaryGhostBoxShadow: string
+  secondaryHoverBoxShadow: string
+  secondaryGhostHoverBoxShadow: string
 
   successColor: Colors['contrasts']['white1010']
   successBorderColor: Colors['contrasts']['green5782']
@@ -208,6 +216,10 @@ export type BaseButtonTheme = {
   successGhostHoverBackground: Colors['contrasts']['green1212']
   successGhostActiveBackground: string
   successGhostActiveBoxShadow: string
+  successBoxShadow: string
+  successGhostBoxShadow: string
+  successHoverBoxShadow: string
+  successGhostHoverBoxShadow: string
 
   dangerColor: Colors['contrasts']['white1010']
   dangerBorderColor: Colors['contrasts']['red5782']
@@ -221,6 +233,10 @@ export type BaseButtonTheme = {
   dangerGhostHoverBackground: Colors['contrasts']['red1212']
   dangerGhostActiveBackground: string
   dangerGhostActiveBoxShadow: string
+  dangerBoxShadow: string
+  dangerGhostBoxShadow: string
+  dangerHoverBoxShadow: string
+  dangerGhostHoverBoxShadow: string
 
   primaryInverseColor: Colors['contrasts']['grey125125']
   primaryInverseBorderColor: Colors['contrasts']['grey1214']
@@ -234,6 +250,10 @@ export type BaseButtonTheme = {
   primaryInverseGhostHoverBackground: Colors['contrasts']['grey1111']
   primaryInverseGhostActiveBackground: string
   primaryInverseGhostActiveBoxShadow: string
+  primaryInverseBoxShadow: string
+  primaryInverseGhostBoxShadow: string
+  primaryInverseHoverBoxShadow: string
+  primaryInverseGhostHoverBoxShadow: string
 }
 
 export type CloseButtonTheme = {

diff --git a/packages/ui-buttons/src/BaseButton/styles.ts b/packages/ui-buttons/src/BaseButton/styles.ts
@@ -136,28 +136,32 @@ const generateStyle = (
           default: {
             color: componentTheme.primaryColor,
             background: componentTheme.primaryBackground,
-            borderColor: componentTheme.primaryBorderColor
+            borderColor: componentTheme.primaryBorderColor,
+            boxShadow: componentTheme.primaryBoxShadow
           },
           active: {
             background: componentTheme.primaryActiveBackground,
             boxShadow: componentTheme.primaryActiveBoxShadow
           },
           hover: {
-            background: componentTheme.primaryHoverBackground
+            background: componentTheme.primaryHoverBackground,
+            boxShadow: componentTheme.primaryHoverBoxShadow
           }
         }
       : {
           default: {
             color: componentTheme.primaryGhostColor,
             borderColor: componentTheme.primaryGhostBorderColor,
-            background: componentTheme.primaryGhostBackground
+            background: componentTheme.primaryGhostBackground,
+            boxShadow: componentTheme.primaryBoxShadow
           },
           active: {
             background: componentTheme.primaryGhostActiveBackground,
             boxShadow: componentTheme.primaryGhostActiveBoxShadow
           },
           hover: {
-            background: componentTheme.primaryGhostHoverBackground
+            background: componentTheme.primaryGhostHoverBackground,
+            boxShadow: componentTheme.primaryHoverBoxShadow
           }
         },
 
@@ -166,28 +170,32 @@ const generateStyle = (
           default: {
             color: componentTheme.secondaryColor,
             background: componentTheme.secondaryBackground,
-            borderColor: componentTheme.secondaryBorderColor
+            borderColor: componentTheme.secondaryBorderColor,
+            boxShadow: componentTheme.secondaryBoxShadow
           },
           active: {
             background: componentTheme.secondaryActiveBackground,
             boxShadow: componentTheme.secondaryActiveBoxShadow
           },
           hover: {
-            background: componentTheme.secondaryHoverBackground
+            background: componentTheme.secondaryHoverBackground,
+            boxShadow: componentTheme.secondaryHoverBoxShadow
           }
         }
       : {
           default: {
             color: componentTheme.secondaryGhostColor,
             borderColor: componentTheme.secondaryGhostBorderColor,
-            background: componentTheme.secondaryGhostBackground
+            background: componentTheme.secondaryGhostBackground,
+            boxShadow: componentTheme.secondaryGhostBoxShadow
           },
           active: {
             background: componentTheme.secondaryGhostActiveBackground,
             boxShadow: componentTheme.secondaryGhostActiveBoxShadow
           },
           hover: {
-            background: componentTheme.secondaryGhostHoverBackground
+            background: componentTheme.secondaryGhostHoverBackground,
+            boxShadow: componentTheme.secondaryGhostHoverBoxShadow
           }
         },
 
@@ -196,28 +204,32 @@ const generateStyle = (
           default: {
             color: componentTheme.primaryInverseColor,
             background: componentTheme.primaryInverseBackground,
-            borderColor: componentTheme.primaryInverseBorderColor
+            borderColor: componentTheme.primaryInverseBorderColor,
+            boxShadow: componentTheme.primaryInverseBoxShadow
           },
           active: {
             background: componentTheme.primaryInverseActiveBackground,
             boxShadow: componentTheme.primaryInverseActiveBoxShadow
           },
           hover: {
-            background: componentTheme.primaryInverseHoverBackground
+            background: componentTheme.primaryInverseHoverBackground,
+            boxShadow: componentTheme.primaryInverseHoverBoxShadow
           }
         }
       : {
           default: {
             color: componentTheme.primaryInverseGhostColor,
             borderColor: componentTheme.primaryInverseGhostBorderColor,
-            background: componentTheme.primaryInverseGhostBackground
+            background: componentTheme.primaryInverseGhostBackground,
+            boxShadow: componentTheme.primaryInverseGhostBoxShadow
           },
           active: {
             background: componentTheme.primaryInverseGhostActiveBackground,
             boxShadow: componentTheme.primaryInverseGhostActiveBoxShadow
           },
           hover: {
-            background: componentTheme.primaryInverseGhostHoverBackground
+            background: componentTheme.primaryInverseGhostHoverBackground,
+            boxShadow: componentTheme.primaryInverseGhostHoverBoxShadow
           }
         },
 
@@ -226,28 +238,32 @@ const generateStyle = (
           default: {
             color: componentTheme.successColor,
             background: componentTheme.successBackground,
-            borderColor: componentTheme.successBorderColor
+            borderColor: componentTheme.successBorderColor,
+            boxShadow: componentTheme.successBoxShadow
           },
           active: {
             background: componentTheme.successActiveBackground,
             boxShadow: componentTheme.successActiveBoxShadow
           },
           hover: {
-            background: componentTheme.successHoverBackground
+            background: componentTheme.successHoverBackground,
+            boxShadow: componentTheme.successHoverBoxShadow
           }
         }
       : {
           default: {
             color: componentTheme.successGhostColor,
             borderColor: componentTheme.successGhostBorderColor,
-            background: componentTheme.successGhostBackground
+            background: componentTheme.successGhostBackground,
+            boxShadow: componentTheme.successGhostBoxShadow
           },
           active: {
             background: componentTheme.successGhostActiveBackground,
             boxShadow: componentTheme.successGhostActiveBoxShadow
           },
           hover: {
-            background: componentTheme.successGhostHoverBackground
+            background: componentTheme.successGhostHoverBackground,
+            boxShadow: componentTheme.successGhostHoverBoxShadow
           }
         },
 
@@ -256,28 +272,32 @@ const generateStyle = (
           default: {
             color: componentTheme.dangerColor,
             background: componentTheme.dangerBackground,
-            borderColor: componentTheme.dangerBorderColor
+            borderColor: componentTheme.dangerBorderColor,
+            boxShadow: componentTheme.dangerBoxShadow
           },
           active: {
             background: componentTheme.dangerActiveBackground,
             boxShadow: componentTheme.dangerActiveBoxShadow
           },
           hover: {
-            background: componentTheme.dangerHoverBackground
+            background: componentTheme.dangerHoverBackground,
+            boxShadow: componentTheme.dangerHoverBoxShadow
           }
         }
       : {
           default: {
             color: componentTheme.dangerGhostColor,
             borderColor: componentTheme.dangerGhostBorderColor,
-            background: componentTheme.dangerGhostBackground
+            background: componentTheme.dangerGhostBackground,
+            boxShadow: componentTheme.dangerGhostBoxShadow
           },
           active: {
             background: componentTheme.dangerGhostActiveBackground,
             boxShadow: componentTheme.dangerGhostActiveBoxShadow
           },
           hover: {
-            background: componentTheme.dangerGhostHoverBackground
+            background: componentTheme.dangerGhostHoverBackground,
+            boxShadow: componentTheme.dangerGhostHoverBoxShadow
           }
         }
   }

diff --git a/packages/ui-buttons/src/BaseButton/theme.ts b/packages/ui-buttons/src/BaseButton/theme.ts
@@ -113,6 +113,10 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
       colors?.contrasts?.blue1212,
       28
     )}`,
+    primaryBoxShadow: 'none',
+    primaryGhostBoxShadow: 'none',
+    primaryHoverBoxShadow: 'none',
+    primaryGhostHoverBoxShadow: 'none',
 
     secondaryColor: colors?.contrasts?.grey125125,
     secondaryBorderColor: colors?.contrasts?.grey1214,
@@ -129,6 +133,10 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
       colors?.contrasts?.grey125125,
       28
     )}`,
+    secondaryBoxShadow: 'none',
+    secondaryGhostBoxShadow: 'none',
+    secondaryHoverBoxShadow: 'none',
+    secondaryGhostHoverBoxShadow: 'none',
 
     successColor: colors?.contrasts?.white1010,
     successBorderColor: colors?.contrasts?.green5782,
@@ -145,6 +153,10 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
       colors?.contrasts?.green4570,
       28
     )}`,
+    successBoxShadow: 'none',
+    successGhostBoxShadow: 'none',
+    successHoverBoxShadow: 'none',
+    successGhostHoverBoxShadow: 'none',
 
     dangerColor: colors?.contrasts?.white1010,
     dangerBorderColor: colors?.contrasts?.red5782,
@@ -161,6 +173,10 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
       colors?.contrasts?.red4570,
       28
     )}`,
+    dangerBoxShadow: 'none',
+    dangerGhostBoxShadow: 'none',
+    dangerHoverBoxShadow: 'none',
+    dangerGhostHoverBoxShadow: 'none',
 
     primaryInverseColor: colors?.contrasts?.grey125125,
     primaryInverseBorderColor: colors?.contrasts?.grey1214,
@@ -176,7 +192,11 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
     primaryInverseGhostActiveBoxShadow: `${activeShadow}  ${alpha(
       colors?.contrasts?.white1010,
       28
-    )}`
+    )}`,
+    primaryInverseBoxShadow: 'none',
+    primaryInverseGhostBoxShadow: 'none',
+    primaryInverseHoverBoxShadow: 'none',
+    primaryInverseGhostHoverBoxShadow: 'none'
   }
 
   return {

diff --git a/packages/ui-buttons/src/Button/README.md b/packages/ui-buttons/src/Button/README.md
@@ -249,7 +249,15 @@ type: example
         secondaryGhostActiveBackground: '#FF0000',
         secondaryGhostActiveBoxShadow: '10px 5px 5px green',
 
-        secondaryGhostHoverBackground: '#00FFFF'
+        secondaryGhostHoverBackground: '#00FFFF',
+
+        secondaryBoxShadow: '0 0 0.4875rem 0.625rem yellow',
+        secondaryHoverBoxShadow: '0 0 0.1875rem 0.625rem lime',
+        secondaryActiveBoxShadow: '0 0px 0px 25px red',
+        secondaryGhostHoverBoxShadow: '0 0 0.7875rem 0.625rem pink',
+        secondaryGhostBoxShadow: '0 0 0.2875rem 0.625rem green',
+        secondaryGhostActiveBoxShadow: '10px 5px 5px blue'
+
       }
       return (
         <>