update element to address touch interactions

ods-button/package.json

@@ -18,7 +18,7 @@
   },
   "devDependencies": {
     "@alaskaair/orion-design-tokens": "^0.4.1419434",
-    "@alaskaair/orion-web-core-style-sheets": "^0.3.1419101",
+    "@alaskaair/orion-web-core-style-sheets": "^0.3.1422151",
     "@polymer/iron-demo-helpers": "^3.0.0-pre.19",
     "@polymer/test-fixture": "^4.0.2",
     "@webcomponents/webcomponentsjs": "^2.0.0",

ods-button/src/ods-button.js

@@ -3,7 +3,6 @@ import buttonProperties from './generated/_buttonProperties-css.js';
 import dotsProperties from './generated/_dotsProperties-css.js';
 import odsButtonCss from "./ods-button-css.js";
 
-
 class OdsButton extends LitElement {
   constructor() {
     super();
@@ -15,6 +14,11 @@ class OdsButton extends LitElement {
     this.getButtonType = this.getButtonType.bind(this);
     this.getButtonState = this.getButtonState.bind(this);
     this.getButtonContext = this.getButtonContext.bind(this);
+
+    // adds event based on activelly being touched
+    this.addEventListener('touchstart', function() {
+      this.classList.add('is-touching');
+    });
   }
 
   static get properties() {

ods-button/src/ods-button.scss

@@ -51,11 +51,15 @@ span {
   white-space: var(--ods-button-white-space);
   cursor: var(--ods-button-cursor);
 
-  &:hover {
-    background-color: var(--ods-button-hover-background-color); // atlas hacked color
-    box-shadow: 0 0 16px var(--ods-button-hover-shadow-color); // midnight hacked color
+  // refeerence :host selector for .is-touching state selector
+  // only use hover UI if non-touch scenario
+  :host(:not(.is-touching)) & {
+    &:hover {
+      background-color: var(--ods-button-hover-background-color);
+      box-shadow: 0 0 16px var(--ods-button-hover-shadow-color);
+    }
   }
-
+  
   &:active {
     background-color: var(--ods-button-active-background-color);
   }