@atlaskit/ds-explorations 5.0.7 → 5.1.0

package/dist/cjs/components/interaction-surface.partial.js

@@ -58,211 +58,211 @@ var InteractionSurface = function InteractionSurface(_ref) {
 var _default = exports.default = InteractionSurface;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9270ce27eb45821e281f5499e575ce4f>>
+ * @codegen <<SignedSource::c096f2538ebfdcb14824c88311f0c686>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::2271390eb3f104f20bb791b00250b316>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
  */
 var backgroundActiveColorMap = {
   'accent.lime.subtlest': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-lime-subtlest-pressed, #B3DF72)"
+      backgroundColor: "var(--ds-background-accent-lime-subtlest-pressed, #BDE97C)"
     }
   }),
   'accent.lime.subtler': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-lime-subtler-pressed, #94C748)"
+      backgroundColor: "var(--ds-background-accent-lime-subtler-pressed, #B3DF72)"
     }
   }),
   'accent.lime.subtle': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-lime-subtle-pressed, #D3F1A7)"
+      backgroundColor: "var(--ds-background-accent-lime-subtle-pressed, #BDE97C)"
     }
   }),
   'accent.lime.bolder': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-lime-bolder-pressed, #37471F)"
+      backgroundColor: "var(--ds-background-accent-lime-bolder-pressed, #3F5224)"
     }
   }),
   'accent.red.subtlest': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-red-subtlest-pressed, #FD9891)"
+      backgroundColor: "var(--ds-background-accent-red-subtlest-pressed, #FFB8B2)"
     }
   }),
   'accent.red.subtler': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-red-subtler-pressed, #F87168)"
+      backgroundColor: "var(--ds-background-accent-red-subtler-pressed, #FD9891)"
     }
   }),
   'accent.red.subtle': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-red-subtle-pressed, #FFD5D2)"
+      backgroundColor: "var(--ds-background-accent-red-subtle-pressed, #FFB8B2)"
     }
   }),
   'accent.red.bolder': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-red-bolder-pressed, #5D1F1A)"
+      backgroundColor: "var(--ds-background-accent-red-bolder-pressed, #872821)"
     }
   }),
   'accent.orange.subtlest': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-orange-subtlest-pressed, #FEC195)"
+      backgroundColor: "var(--ds-background-accent-orange-subtlest-pressed, #FBD779)"
     }
   }),
   'accent.orange.subtler': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-orange-subtler-pressed, #FEA362)"
+      backgroundColor: "var(--ds-background-accent-orange-subtler-pressed, #FBC828)"
     }
   }),
   'accent.orange.subtle': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-orange-subtle-pressed, #FEDEC8)"
+      backgroundColor: "var(--ds-background-accent-orange-subtle-pressed, #FBD779)"
     }
   }),
   'accent.orange.bolder': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-orange-bolder-pressed, #702E00)"
+      backgroundColor: "var(--ds-background-accent-orange-bolder-pressed, #7A3B00)"
     }
   }),
   'accent.yellow.subtlest': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
+      backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #EFDD4E)"
     }
   }),
   'accent.yellow.subtler': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"
+      backgroundColor: "var(--ds-background-accent-yellow-subtler-pressed, #EED12B)"
     }
   }),
   'accent.yellow.subtle': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-yellow-subtle-pressed, #CF9F02)"
+      backgroundColor: "var(--ds-background-accent-yellow-subtle-pressed, #EFDD4E)"
     }
   }),
   'accent.yellow.bolder': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)"
+      backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #614A05)"
     }
   }),
   'accent.green.subtlest': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-green-subtlest-pressed, #7EE2B8)"
+      backgroundColor: "var(--ds-background-accent-green-subtlest-pressed, #97EDC9)"
     }
   }),
   'accent.green.subtler': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-green-subtler-pressed, #4BCE97)"
+      backgroundColor: "var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"
     }
   }),
   'accent.green.subtle': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-green-subtle-pressed, #BAF3DB)"
+      backgroundColor: "var(--ds-background-accent-green-subtle-pressed, #97EDC9)"
     }
   }),
   'accent.green.bolder': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-green-bolder-pressed, #164B35)"
+      backgroundColor: "var(--ds-background-accent-green-bolder-pressed, #19573D)"
     }
   }),
   'accent.teal.subtlest': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-teal-subtlest-pressed, #9DD9EE)"
+      backgroundColor: "var(--ds-background-accent-teal-subtlest-pressed, #B1E4F7)"
     }
   }),
   'accent.teal.subtler': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-teal-subtler-pressed, #6CC3E0)"
+      backgroundColor: "var(--ds-background-accent-teal-subtler-pressed, #9DD9EE)"
     }
   }),
   'accent.teal.subtle': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-teal-subtle-pressed, #C6EDFB)"
+      backgroundColor: "var(--ds-background-accent-teal-subtle-pressed, #B1E4F7)"
     }
   }),
   'accent.teal.bolder': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-teal-bolder-pressed, #164555)"
+      backgroundColor: "var(--ds-background-accent-teal-bolder-pressed, #1A5265)"
     }
   }),
   'accent.blue.subtlest': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-blue-subtlest-pressed, #85B8FF)"
+      backgroundColor: "var(--ds-background-accent-blue-subtlest-pressed, #ADCBFB)"
     }
   }),
   'accent.blue.subtler': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-blue-subtler-pressed, #579DFF)"
+      backgroundColor: "var(--ds-background-accent-blue-subtler-pressed, #8FB8F6)"
     }
   }),
   'accent.blue.subtle': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-blue-subtle-pressed, #CCE0FF)"
+      backgroundColor: "var(--ds-background-accent-blue-subtle-pressed, #ADCBFB)"
     }
   }),
   'accent.blue.bolder': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-blue-bolder-pressed, #09326C)"
+      backgroundColor: "var(--ds-background-accent-blue-bolder-pressed, #144794)"
     }
   }),
   'accent.purple.subtlest': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-purple-subtlest-pressed, #B8ACF6)"
+      backgroundColor: "var(--ds-background-accent-purple-subtlest-pressed, #E3BDFA)"
     }
   }),
   'accent.purple.subtler': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-purple-subtler-pressed, #9F8FEF)"
+      backgroundColor: "var(--ds-background-accent-purple-subtler-pressed, #D8A0F7)"
     }
   }),
   'accent.purple.subtle': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-purple-subtle-pressed, #DFD8FD)"
+      backgroundColor: "var(--ds-background-accent-purple-subtle-pressed, #E3BDFA)"
     }
   }),
   'accent.purple.bolder': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-purple-bolder-pressed, #352C63)"
+      backgroundColor: "var(--ds-background-accent-purple-bolder-pressed, #673286)"
     }
   }),
   'accent.magenta.subtlest': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)"
+      backgroundColor: "var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)"
     }
   }),
   'accent.magenta.subtler': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-magenta-subtler-pressed, #E774BB)"
+      backgroundColor: "var(--ds-background-accent-magenta-subtler-pressed, #F797D2)"
     }
   }),
   'accent.magenta.subtle': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-magenta-subtle-pressed, #FDD0EC)"
+      backgroundColor: "var(--ds-background-accent-magenta-subtle-pressed, #FCB6E1)"
     }
   }),
   'accent.magenta.bolder': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-magenta-bolder-pressed, #50253F)"
+      backgroundColor: "var(--ds-background-accent-magenta-bolder-pressed, #77325B)"
     }
   }),
   'accent.gray.subtlest': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-gray-subtlest-pressed, #B3B9C4)"
+      backgroundColor: "var(--ds-background-accent-gray-subtlest-pressed, #B7B9BE)"
     }
   }),
   'accent.gray.subtler': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-gray-subtler-pressed, #8590A2)"
+      backgroundColor: "var(--ds-background-accent-gray-subtler-pressed, #8C8F97)"
     }
   }),
   'accent.gray.subtle': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-gray-subtle-pressed, #DCDFE4)"
+      backgroundColor: "var(--ds-background-accent-gray-subtle-pressed, #DDDEE1)"
     }
   }),
   'accent.gray.bolder': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-accent-gray-bolder-pressed, #2C3E5D)"
+      backgroundColor: "var(--ds-background-accent-gray-bolder-pressed, #3B3D42)"
     }
   }),
   input: (0, _react2.css)({
@@ -277,107 +277,132 @@ var backgroundActiveColorMap = {
   }),
   neutral: (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-neutral-pressed, #091E424F)"
+      backgroundColor: "var(--ds-background-neutral-pressed, #080F214A)"
     }
   }),
   'neutral.subtle': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+      backgroundColor: "var(--ds-background-neutral-subtle-pressed, #0B120E24)"
     }
   }),
   'neutral.bold': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-neutral-bold-pressed, #172B4D)"
+      backgroundColor: "var(--ds-background-neutral-bold-pressed, #505258)"
     }
   }),
   selected: (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-selected-pressed, #85B8FF)"
+      backgroundColor: "var(--ds-background-selected-pressed, #8FB8F6)"
     }
   }),
   'selected.bold': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-selected-bold-pressed, #09326C)"
+      backgroundColor: "var(--ds-background-selected-bold-pressed, #123263)"
     }
   }),
   'brand.subtlest': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-brand-subtlest-pressed, #85B8FF)"
+      backgroundColor: "var(--ds-background-brand-subtlest-pressed, #ADCBFB)"
     }
   }),
   'brand.bold': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-brand-bold-pressed, #09326C)"
+      backgroundColor: "var(--ds-background-brand-bold-pressed, #144794)"
     }
   }),
   'brand.boldest': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-brand-boldest-pressed, #0055CC)"
+      backgroundColor: "var(--ds-background-brand-boldest-pressed, #144794)"
     }
   }),
   danger: (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-danger-pressed, #FD9891)"
+      backgroundColor: "var(--ds-background-danger-pressed, #FFB8B2)"
+    }
+  }),
+  'danger.subtler': (0, _react2.css)({
+    '&:active': {
+      backgroundColor: "var(--ds-background-danger-subtler-pressed, #FD9891)"
     }
   }),
   'danger.bold': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-danger-bold-pressed, #5D1F1A)"
+      backgroundColor: "var(--ds-background-danger-bold-pressed, #872821)"
     }
   }),
   warning: (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-warning-pressed, #F5CD47)"
+      backgroundColor: "var(--ds-background-warning-pressed, #FBD779)"
+    }
+  }),
+  'warning.subtler': (0, _react2.css)({
+    '&:active': {
+      backgroundColor: "var(--ds-background-warning-subtler-pressed, #FBC828)"
     }
   }),
   'warning.bold': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-warning-bold-pressed, #CF9F02)"
+      backgroundColor: "var(--ds-background-warning-bold-pressed, #F68909)"
     }
   }),
   success: (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-success-pressed, #7EE2B8)"
+      backgroundColor: "var(--ds-background-success-pressed, #BDE97C)"
+    }
+  }),
+  'success.subtler': (0, _react2.css)({
+    '&:active': {
+      backgroundColor: "var(--ds-background-success-subtler-pressed, #B3DF72)"
     }
   }),
   'success.bold': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-success-bold-pressed, #164B35)"
+      backgroundColor: "var(--ds-background-success-bold-pressed, #3F5224)"
     }
   }),
   discovery: (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-discovery-pressed, #B8ACF6)"
+      backgroundColor: "var(--ds-background-discovery-pressed, #E3BDFA)"
+    }
+  }),
+  'discovery.subtler': (0, _react2.css)({
+    '&:active': {
+      backgroundColor: "var(--ds-background-discovery-subtler-pressed, #D8A0F7)"
     }
   }),
   'discovery.bold': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-discovery-bold-pressed, #352C63)"
+      backgroundColor: "var(--ds-background-discovery-bold-pressed, #673286)"
     }
   }),
   information: (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-information-pressed, #85B8FF)"
+      backgroundColor: "var(--ds-background-information-pressed, #ADCBFB)"
+    }
+  }),
+  'information.subtler': (0, _react2.css)({
+    '&:active': {
+      backgroundColor: "var(--ds-background-information-subtler-pressed, #8FB8F6)"
     }
   }),
   'information.bold': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-background-information-bold-pressed, #09326C)"
+      backgroundColor: "var(--ds-background-information-bold-pressed, #144794)"
     }
   }),
   'elevation.surface': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-surface-pressed, #DCDFE4)"
+      backgroundColor: "var(--ds-surface-pressed, #DDDEE1)"
     }
   }),
   'elevation.surface.overlay': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-surface-overlay-pressed, #DCDFE4)"
+      backgroundColor: "var(--ds-surface-overlay-pressed, #DDDEE1)"
     }
   }),
   'elevation.surface.raised': (0, _react2.css)({
     '&:active': {
-      backgroundColor: "var(--ds-surface-raised-pressed, #DCDFE4)"
+      backgroundColor: "var(--ds-surface-raised-pressed, #DDDEE1)"
     }
   })
 };
@@ -389,7 +414,7 @@ var backgroundHoverColorMap = {
   }),
   'accent.lime.subtler': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-lime-subtler-hovered, #B3DF72)"
+      backgroundColor: "var(--ds-background-accent-lime-subtler-hovered, #BDE97C)"
     }
   }),
   'accent.lime.subtle': (0, _react2.css)({
@@ -409,7 +434,7 @@ var backgroundHoverColorMap = {
   }),
   'accent.red.subtler': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-red-subtler-hovered, #FD9891)"
+      backgroundColor: "var(--ds-background-accent-red-subtler-hovered, #FFB8B2)"
     }
   }),
   'accent.red.subtle': (0, _react2.css)({
@@ -424,37 +449,37 @@ var backgroundHoverColorMap = {
   }),
   'accent.orange.subtlest': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-orange-subtlest-hovered, #FEDEC8)"
+      backgroundColor: "var(--ds-background-accent-orange-subtlest-hovered, #FCE4A6)"
     }
   }),
   'accent.orange.subtler': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-orange-subtler-hovered, #FEC195)"
+      backgroundColor: "var(--ds-background-accent-orange-subtler-hovered, #FBD779)"
     }
   }),
   'accent.orange.subtle': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-orange-subtle-hovered, #FEC195)"
+      backgroundColor: "var(--ds-background-accent-orange-subtle-hovered, #FBC828)"
     }
   }),
   'accent.orange.bolder': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-orange-bolder-hovered, #A54800)"
+      backgroundColor: "var(--ds-background-accent-orange-bolder-hovered, #9E4C00)"
     }
   }),
   'accent.yellow.subtlest': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-yellow-subtlest-hovered, #F8E6A0)"
+      backgroundColor: "var(--ds-background-accent-yellow-subtlest-hovered, #F5E989)"
     }
   }),
   'accent.yellow.subtler': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-yellow-subtler-hovered, #F5CD47)"
+      backgroundColor: "var(--ds-background-accent-yellow-subtler-hovered, #EFDD4E)"
     }
   }),
   'accent.yellow.subtle': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-yellow-subtle-hovered, #E2B203)"
+      backgroundColor: "var(--ds-background-accent-yellow-subtle-hovered, #DDB30E)"
     }
   }),
   'accent.yellow.bolder': (0, _react2.css)({
@@ -469,7 +494,7 @@ var backgroundHoverColorMap = {
   }),
   'accent.green.subtler': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-green-subtler-hovered, #7EE2B8)"
+      backgroundColor: "var(--ds-background-accent-green-subtler-hovered, #97EDC9)"
     }
   }),
   'accent.green.subtle': (0, _react2.css)({
@@ -489,7 +514,7 @@ var backgroundHoverColorMap = {
   }),
   'accent.teal.subtler': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-teal-subtler-hovered, #9DD9EE)"
+      backgroundColor: "var(--ds-background-accent-teal-subtler-hovered, #B1E4F7)"
     }
   }),
   'accent.teal.subtle': (0, _react2.css)({
@@ -504,42 +529,42 @@ var backgroundHoverColorMap = {
   }),
   'accent.blue.subtlest': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-blue-subtlest-hovered, #CCE0FF)"
+      backgroundColor: "var(--ds-background-accent-blue-subtlest-hovered, #CFE1FD)"
     }
   }),
   'accent.blue.subtler': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-blue-subtler-hovered, #85B8FF)"
+      backgroundColor: "var(--ds-background-accent-blue-subtler-hovered, #ADCBFB)"
     }
   }),
   'accent.blue.subtle': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-blue-subtle-hovered, #85B8FF)"
+      backgroundColor: "var(--ds-background-accent-blue-subtle-hovered, #8FB8F6)"
     }
   }),
   'accent.blue.bolder': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-blue-bolder-hovered, #0055CC)"
+      backgroundColor: "var(--ds-background-accent-blue-bolder-hovered, #1558BC)"
     }
   }),
   'accent.purple.subtlest': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-purple-subtlest-hovered, #DFD8FD)"
+      backgroundColor: "var(--ds-background-accent-purple-subtlest-hovered, #EED7FC)"
     }
   }),
   'accent.purple.subtler': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-purple-subtler-hovered, #B8ACF6)"
+      backgroundColor: "var(--ds-background-accent-purple-subtler-hovered, #E3BDFA)"
     }
   }),
   'accent.purple.subtle': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-purple-subtle-hovered, #B8ACF6)"
+      backgroundColor: "var(--ds-background-accent-purple-subtle-hovered, #D8A0F7)"
     }
   }),
   'accent.purple.bolder': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-purple-bolder-hovered, #5E4DB2)"
+      backgroundColor: "var(--ds-background-accent-purple-bolder-hovered, #803FA5)"
     }
   }),
   'accent.magenta.subtlest': (0, _react2.css)({
@@ -549,7 +574,7 @@ var backgroundHoverColorMap = {
   }),
   'accent.magenta.subtler': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-magenta-subtler-hovered, #F797D2)"
+      backgroundColor: "var(--ds-background-accent-magenta-subtler-hovered, #FCB6E1)"
     }
   }),
   'accent.magenta.subtle': (0, _react2.css)({
@@ -564,27 +589,27 @@ var backgroundHoverColorMap = {
   }),
   'accent.gray.subtlest': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-gray-subtlest-hovered, #DCDFE4)"
+      backgroundColor: "var(--ds-background-accent-gray-subtlest-hovered, #DDDEE1)"
     }
   }),
   'accent.gray.subtler': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-gray-subtler-hovered, #B3B9C4)"
+      backgroundColor: "var(--ds-background-accent-gray-subtler-hovered, #B7B9BE)"
     }
   }),
   'accent.gray.subtle': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-gray-subtle-hovered, #B3B9C4)"
+      backgroundColor: "var(--ds-background-accent-gray-subtle-hovered, #B7B9BE)"
     }
   }),
   'accent.gray.bolder': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-accent-gray-bolder-hovered, #44546F)"
+      backgroundColor: "var(--ds-background-accent-gray-bolder-hovered, #505258)"
     }
   }),
   input: (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-input-hovered, #F7F8F9)"
+      backgroundColor: "var(--ds-background-input-hovered, #F8F8F8)"
     }
   }),
   'inverse.subtle': (0, _react2.css)({
@@ -594,42 +619,42 @@ var backgroundHoverColorMap = {
   }),
   neutral: (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
+      backgroundColor: "var(--ds-background-neutral-hovered, #0B120E24)"
     }
   }),
   'neutral.subtle': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
     }
   }),
   'neutral.bold': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-neutral-bold-hovered, #2C3E5D)"
+      backgroundColor: "var(--ds-background-neutral-bold-hovered, #3B3D42)"
     }
   }),
   selected: (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-selected-hovered, #CCE0FF)"
+      backgroundColor: "var(--ds-background-selected-hovered, #CFE1FD)"
     }
   }),
   'selected.bold': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-selected-bold-hovered, #0055CC)"
+      backgroundColor: "var(--ds-background-selected-bold-hovered, #1558BC)"
     }
   }),
   'brand.subtlest': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-brand-subtlest-hovered, #CCE0FF)"
+      backgroundColor: "var(--ds-background-brand-subtlest-hovered, #CFE1FD)"
     }
   }),
   'brand.bold': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-brand-bold-hovered, #0055CC)"
+      backgroundColor: "var(--ds-background-brand-bold-hovered, #1558BC)"
     }
   }),
   'brand.boldest': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-brand-boldest-hovered, #09326C)"
+      backgroundColor: "var(--ds-background-brand-boldest-hovered, #123263)"
     }
   }),
   danger: (0, _react2.css)({
@@ -637,6 +662,11 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)"
     }
   }),
+  'danger.subtler': (0, _react2.css)({
+    '&:hover': {
+      backgroundColor: "var(--ds-background-danger-subtler-hovered, #FFB8B2)"
+    }
+  }),
   'danger.bold': (0, _react2.css)({
     '&:hover': {
       backgroundColor: "var(--ds-background-danger-bold-hovered, #AE2E24)"
@@ -644,57 +674,77 @@ var backgroundHoverColorMap = {
   }),
   warning: (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-warning-hovered, #F8E6A0)"
+      backgroundColor: "var(--ds-background-warning-hovered, #FCE4A6)"
+    }
+  }),
+  'warning.subtler': (0, _react2.css)({
+    '&:hover': {
+      backgroundColor: "var(--ds-background-warning-subtler-hovered, #FBD779)"
     }
   }),
   'warning.bold': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-warning-bold-hovered, #E2B203)"
+      backgroundColor: "var(--ds-background-warning-bold-hovered, #FCA700)"
     }
   }),
   success: (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-success-hovered, #BAF3DB)"
+      backgroundColor: "var(--ds-background-success-hovered, #D3F1A7)"
+    }
+  }),
+  'success.subtler': (0, _react2.css)({
+    '&:hover': {
+      backgroundColor: "var(--ds-background-success-subtler-hovered, #BDE97C)"
     }
   }),
   'success.bold': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-success-bold-hovered, #216E4E)"
+      backgroundColor: "var(--ds-background-success-bold-hovered, #4C6B1F)"
     }
   }),
   discovery: (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-discovery-hovered, #DFD8FD)"
+      backgroundColor: "var(--ds-background-discovery-hovered, #EED7FC)"
+    }
+  }),
+  'discovery.subtler': (0, _react2.css)({
+    '&:hover': {
+      backgroundColor: "var(--ds-background-discovery-subtler-hovered, #E3BDFA)"
     }
   }),
   'discovery.bold': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-discovery-bold-hovered, #5E4DB2)"
+      backgroundColor: "var(--ds-background-discovery-bold-hovered, #803FA5)"
     }
   }),
   information: (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-information-hovered, #CCE0FF)"
+      backgroundColor: "var(--ds-background-information-hovered, #CFE1FD)"
+    }
+  }),
+  'information.subtler': (0, _react2.css)({
+    '&:hover': {
+      backgroundColor: "var(--ds-background-information-subtler-hovered, #ADCBFB)"
     }
   }),
   'information.bold': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-background-information-bold-hovered, #0055CC)"
+      backgroundColor: "var(--ds-background-information-bold-hovered, #1558BC)"
     }
   }),
   'elevation.surface': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-surface-hovered, #F1F2F4)"
+      backgroundColor: "var(--ds-surface-hovered, #F0F1F2)"
     }
   }),
   'elevation.surface.overlay': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-surface-overlay-hovered, #F1F2F4)"
+      backgroundColor: "var(--ds-surface-overlay-hovered, #F0F1F2)"
     }
   }),
   'elevation.surface.raised': (0, _react2.css)({
     '&:hover': {
-      backgroundColor: "var(--ds-surface-raised-hovered, #F1F2F4)"
+      backgroundColor: "var(--ds-surface-raised-hovered, #F0F1F2)"
     }
   })
 };