@codecademy/gamut-styles 21.0.1-alpha.909ba2.0 → 21.0.1-alpha.aeff7c.0

package/dist/themes/admin.d.ts

@@ -40,7 +40,7 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly md: "5rem";
     };
     readonly headerZ: 15;
-}, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
+}, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
     c_base: string;
     c_xs: string;
     c_sm: string;
@@ -544,7 +544,7 @@ export declare const adminTheme: Record<"breakpoints", {
 }>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
     1: string;
     2: string;
-}, "-">>>, Record<"elevation", import("@codecademy/variance").LiteralPaths<import("..").ElevationScale, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
+}, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
     colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         primary: {
             _: "blue-500";
@@ -914,7 +914,7 @@ export declare const adminTheme: Record<"breakpoints", {
         }, "-", "_">;
     }>;
     mode: "light" | "dark";
-    _getColorValue: (color: "shadow-primary" | "shadow-secondary" | import("@codecademy/variance").Path<{
+    _getColorValue: (color: import("@codecademy/variance").Path<{
         readonly beige: "#FFF0E5";
         readonly blue: "#1557FF";
         readonly green: "#008A27";
@@ -983,7 +983,7 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "white-200": string;
         readonly "white-600": string;
         readonly "white-700": string;
-    }, "-"> | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary") => string;
+    }, "-"> | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "shadow-secondary" | "shadow-primary" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary") => string;
 }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
 export type AdminThemeShape = typeof adminTheme;
 export interface AdminTheme extends AdminThemeShape {

package/dist/themes/core.d.ts

@@ -21,7 +21,7 @@ export declare const coreTheme: Record<"breakpoints", {
         readonly md: "5rem";
     };
     readonly headerZ: 15;
-}, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
+}, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
     c_base: string;
     c_xs: string;
     c_sm: string;
@@ -525,7 +525,7 @@ export declare const coreTheme: Record<"breakpoints", {
 }>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
     1: string;
     2: string;
-}, "-">>>, Record<"elevation", import("@codecademy/variance").LiteralPaths<import("../variables").ElevationScale, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
+}, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
 export type CoreThemeShape = typeof coreTheme;
 export interface CoreTheme extends CoreThemeShape {
 }

package/dist/themes/core.js

@@ -1,5 +1,5 @@
 import { createTheme } from '@codecademy/variance';
-import { borderRadii, containerQueries, coreElevation, corePalette, elements, fontFamily, fontSize, fontWeight, lineHeight, mediaQueries, spacing } from '../variables';
+import { borderRadii, containerQueries, corePalette, elements, fontFamily, fontSize, fontWeight, lineHeight, mediaQueries, spacing } from '../variables';
 
 /**
  *  @description  This is the core theme that all other Codecademy themes are extended from
@@ -129,4 +129,4 @@ export const coreTheme = createTheme({
 }) => ({
   1: `1px solid ${colors['border-primary']}`,
   2: `2px solid ${colors['border-primary']}`
-})).addScale('elevation', coreElevation).createScaleVariables('elements').addName('core').build();
+})).createScaleVariables('elements').addName('core').build();

package/dist/themes/lxStudio.d.ts

@@ -544,7 +544,6 @@ export declare const lxStudioTheme: Record<"breakpoints", {
         1: string;
         2: string;
     }, "-">;
-    elevation: import("@codecademy/variance").LiteralPaths<import("../variables").ElevationScale, "-">;
     name: string;
 } & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     lxStudioSuccess: "#06844F";
@@ -1087,7 +1086,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
         }, "-", "_">;
     }>;
     mode: "light";
-    _getColorValue: (color: "beige" | "blue" | "navy" | "green" | "yellow" | "pink" | "red" | "orange" | "hyper" | "white" | "beige-100" | "blue-0" | "blue-100" | "blue-300" | "blue-400" | "blue-500" | "blue-800" | "navy-100" | "navy-300" | "navy-400" | "navy-500" | "navy-800" | "navy-200" | "navy-600" | "navy-700" | "navy-900" | "green-0" | "green-100" | "green-400" | "green-700" | "green-900" | "yellow-0" | "yellow-400" | "yellow-500" | "yellow-900" | "pink-0" | "pink-400" | "red-0" | "red-300" | "red-400" | "red-500" | "red-600" | "red-900" | "orange-100" | "orange-500" | "hyper-400" | "hyper-500" | "gray-100" | "gray-300" | "gray-800" | "gray-200" | "gray-600" | "gray-900" | "white-100" | "white-300" | "white-400" | "white-500" | "white-200" | "white-600" | "white-700" | "shadow-primary" | "shadow-secondary" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "black" | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary" | "lxStudioSuccess" | "lxStudioBgPrimary" | "sapphire") => string;
+    _getColorValue: (color: "beige" | "blue" | "navy" | "green" | "yellow" | "pink" | "red" | "orange" | "hyper" | "white" | "beige-100" | "blue-0" | "blue-100" | "blue-300" | "blue-400" | "blue-500" | "blue-800" | "navy-100" | "navy-300" | "navy-400" | "navy-500" | "navy-800" | "navy-200" | "navy-600" | "navy-700" | "navy-900" | "green-0" | "green-100" | "green-400" | "green-700" | "green-900" | "yellow-0" | "yellow-400" | "yellow-500" | "yellow-900" | "pink-0" | "pink-400" | "red-0" | "red-300" | "red-400" | "red-500" | "red-600" | "red-900" | "orange-100" | "orange-500" | "hyper-400" | "hyper-500" | "gray-100" | "gray-300" | "gray-800" | "gray-200" | "gray-600" | "gray-900" | "white-100" | "white-300" | "white-400" | "white-500" | "white-200" | "white-600" | "white-700" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "black" | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "shadow-secondary" | "shadow-primary" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary" | "lxStudioSuccess" | "lxStudioBgPrimary" | "sapphire") => string;
 }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
 export type LxStudioThemeShape = typeof lxStudioTheme;
 export type LxStudioTheme = LxStudioThemeShape;

package/dist/themes/percipio.d.ts

@@ -22,7 +22,7 @@ export declare const percipioTheme: Record<"breakpoints", {
     md: string;
     lg: string;
     xl: string;
-}> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
+}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"breakpoints", {
     c_base: string;
     c_xs: string;
     c_sm: string;
@@ -536,7 +536,6 @@ export declare const percipioTheme: Record<"breakpoints", {
         1: string;
         2: string;
     }, "-">;
-    elevation: import("@codecademy/variance").LiteralPaths<import("../variables").ElevationScale, "-">;
     name: string;
 } & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     percipioTextPrimary: "#222325";
@@ -1149,8 +1148,8 @@ export declare const percipioTheme: Record<"breakpoints", {
         }, "-", "_">;
     }>;
     mode: "light";
-    _getColorValue: (color: "beige" | "blue" | "navy" | "green" | "yellow" | "pink" | "red" | "orange" | "hyper" | "white" | "beige-100" | "blue-0" | "blue-100" | "blue-300" | "blue-400" | "blue-500" | "blue-800" | "navy-100" | "navy-300" | "navy-400" | "navy-500" | "navy-800" | "navy-200" | "navy-600" | "navy-700" | "navy-900" | "green-0" | "green-100" | "green-400" | "green-700" | "green-900" | "yellow-0" | "yellow-400" | "yellow-500" | "yellow-900" | "pink-0" | "pink-400" | "red-0" | "red-300" | "red-400" | "red-500" | "red-600" | "red-900" | "orange-100" | "orange-500" | "hyper-400" | "hyper-500" | "gray-100" | "gray-300" | "gray-800" | "gray-200" | "gray-600" | "gray-900" | "white-100" | "white-300" | "white-400" | "white-500" | "white-200" | "white-600" | "white-700" | "shadow-primary" | "shadow-secondary" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "black" | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary" | "sapphire" | "percipioTextPrimary" | "percipioTextSecondary" | "percipioTextDisabled" | "percipioTextAccent" | "percipioBgPrimary" | "percipioBgSuccess" | "percipioBgWarning" | "percipioBgError" | "percipioActionPrimaryHover" | "percipioActionSecondary" | "percipioActionSecondaryHover" | "percipioActionDangerHover" | "percipioFeedbackSuccess" | "percipioFeedbackWarning" | "percipioDanger") => string;
-}>, Record<"elevation", import("@codecademy/variance").LiteralPaths<import("../variables").ElevationScale, "-">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
+    _getColorValue: (color: "beige" | "blue" | "navy" | "green" | "yellow" | "pink" | "red" | "orange" | "hyper" | "white" | "beige-100" | "blue-0" | "blue-100" | "blue-300" | "blue-400" | "blue-500" | "blue-800" | "navy-100" | "navy-300" | "navy-400" | "navy-500" | "navy-800" | "navy-200" | "navy-600" | "navy-700" | "navy-900" | "green-0" | "green-100" | "green-400" | "green-700" | "green-900" | "yellow-0" | "yellow-400" | "yellow-500" | "yellow-900" | "pink-0" | "pink-400" | "red-0" | "red-300" | "red-400" | "red-500" | "red-600" | "red-900" | "orange-100" | "orange-500" | "hyper-400" | "hyper-500" | "gray-100" | "gray-300" | "gray-800" | "gray-200" | "gray-600" | "gray-900" | "white-100" | "white-300" | "white-400" | "white-500" | "white-200" | "white-600" | "white-700" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "black" | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "shadow-secondary" | "shadow-primary" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary" | "sapphire" | "percipioTextPrimary" | "percipioTextSecondary" | "percipioTextDisabled" | "percipioTextAccent" | "percipioBgPrimary" | "percipioBgSuccess" | "percipioBgWarning" | "percipioBgError" | "percipioActionPrimaryHover" | "percipioActionSecondary" | "percipioActionSecondaryHover" | "percipioActionDangerHover" | "percipioFeedbackSuccess" | "percipioFeedbackWarning" | "percipioDanger") => string;
+}> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
 export type PercipioThemeShape = typeof percipioTheme;
 export interface PercipioTheme extends PercipioThemeShape {
 }

package/dist/themes/percipio.js

@@ -1,5 +1,5 @@
 import { createTheme } from '@codecademy/variance';
-import { fontWeightMediumTitle, percipioElevation, percipioFontFamily, percipioPalette } from '../variables';
+import { fontWeightMediumTitle, percipioFontFamily, percipioPalette } from '../variables';
 import { coreTheme } from './core';
 export const percipioTheme = createTheme({
   ...coreTheme,
@@ -53,4 +53,4 @@ export const percipioTheme = createTheme({
       disabled: 'navy-300'
     }
   }
-}).addScale('elevation', percipioElevation).addName('percipio').build();
+}).addName('percipio').build();

package/dist/themes/platform.d.ts

@@ -56,7 +56,7 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly md: "5rem";
     };
     readonly headerZ: 15;
-}, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
+}, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
     c_base: string;
     c_xs: string;
     c_sm: string;
@@ -560,7 +560,7 @@ export declare const platformTheme: Record<"breakpoints", {
 }>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
     1: string;
     2: string;
-}, "-">>>, Record<"elevation", import("@codecademy/variance").LiteralPaths<import("../variables").ElevationScale, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+}, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     readonly lightBeige: "#FFFBF8";
     readonly gold: "#8A7300";
     readonly teal: "#006D82";
@@ -1084,7 +1084,7 @@ export declare const platformTheme: Record<"breakpoints", {
         }, "-", "_">;
     }>;
     mode: "light" | "dark";
-    _getColorValue: (color: "shadow-primary" | "shadow-secondary" | import("@codecademy/variance").Path<{
+    _getColorValue: (color: import("@codecademy/variance").Path<{
         readonly beige: "#FFF0E5";
         readonly blue: "#1557FF";
         readonly green: "#008A27";
@@ -1153,7 +1153,7 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "white-200": string;
         readonly "white-600": string;
         readonly "white-700": string;
-    }, "-"> | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary" | import("@codecademy/variance").Path<{
+    }, "-"> | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "shadow-secondary" | "shadow-primary" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary" | import("@codecademy/variance").Path<{
         readonly lightBeige: "#FFFBF8";
         readonly gold: "#8A7300";
         readonly teal: "#006D82";

package/dist/variables/index.d.ts

@@ -1,7 +1,6 @@
 export * from './borderRadii';
 export * from './colors';
 export * from './elements';
-export * from './elevation';
 export * from './responsive';
 export * from './spacing';
 export * from './timing';

package/dist/variables/index.js

@@ -1,7 +1,6 @@
 export * from './borderRadii';
 export * from './colors';
 export * from './elements';
-export * from './elevation';
 export * from './responsive';
 export * from './spacing';
 export * from './timing';

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "21.0.1-alpha.909ba2.0",
+  "version": "21.0.1-alpha.aeff7c.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
-    "@codecademy/variance": "1.0.1-alpha.909ba2.0",
+    "@codecademy/variance": "1.0.1-alpha.aeff7c.0",
     "@emotion/is-prop-valid": "^1.1.0",
     "framer-motion": "^12.0.0",
     "get-nonce": "^1.0.0",

package/dist/variables/elevation.d.ts

@@ -1,17 +0,0 @@
-type ThemeColors = Record<string, string>;
-export type ElevationStateStyles = {
-    shadow: string;
-    transform: string;
-};
-export type ElevationScale = {
-    rest: ElevationStateStyles;
-    hover: ElevationStateStyles;
-    hoverMirrored: ElevationStateStyles;
-};
-export type ElevationState = keyof ElevationScale;
-export type ElevationScaleFactory = (theme: {
-    colors: ThemeColors;
-}) => ElevationScale;
-export declare const coreElevation: ElevationScaleFactory;
-export declare const percipioElevation: ElevationScaleFactory;
-export {};

package/dist/variables/elevation.js

@@ -1,43 +0,0 @@
-export const coreElevation = ({
-  colors
-}) => {
-  const shadowPrimary = colors['shadow-primary'];
-  const offset = 8;
-  const lift = 4;
-  const shadow = x => `${x}px ${offset}px 0 0 ${shadowPrimary}`;
-  return {
-    rest: {
-      shadow: `0 0 0 0 ${shadowPrimary}`,
-      transform: 'none'
-    },
-    hover: {
-      shadow: shadow(-offset),
-      transform: `translate(${lift}px, -${lift}px)`
-    },
-    hoverMirrored: {
-      shadow: shadow(offset),
-      transform: `translate(-${lift}px, -${lift}px)`
-    }
-  };
-};
-export const percipioElevation = ({
-  colors
-}) => {
-  const shadowPrimary = colors['shadow-primary'];
-  const shadowSecondary = colors['shadow-secondary'];
-  const hover = `0 1px 4px 0 ${shadowPrimary}, 0 2px 11px 0 ${shadowSecondary}`;
-  return {
-    rest: {
-      shadow: `0 1px 4px 0 ${shadowPrimary}, 0 2px 7px 0 ${shadowPrimary}`,
-      transform: 'none'
-    },
-    hover: {
-      shadow: hover,
-      transform: 'none'
-    },
-    hoverMirrored: {
-      shadow: hover,
-      transform: 'none'
-    }
-  };
-};