Merge pull request #2615 from eBay/19.2.0

Author: agliga

.changeset/curvy-mangos-send.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(accordion): update expansion icon

.changeset/cyan-spiders-turn.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(link): updated legal link colors

.changeset/forty-poets-pump.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(icons): added new icons

.changeset/fuzzy-badgers-fix.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(button): added animation to buttons

.changeset/gold-hairs-mate.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(item-tile,item-tile-group): created new components

.changeset/heavy-webs-try.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(eek): flipped EEK direction

.changeset/tough-jobs-melt.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+fix(table): a11y fixes for table loading state

.gitignore

@@ -12,6 +12,7 @@ yarn.lock
 docs/_babel
 lint.log
 dist/bundles
+dist/.marko-run
 docs/static/*.min.css
 docs/static/*.min.css.map
 !docs/static/docs.min.css

dist/accordion/accordion.css

@@ -20,6 +20,13 @@ ul.accordion summary.details__summary {
     padding: 12px 16px;
 }
 
+ul.accordion summary.details__summary span.details__icon svg {
+    fill: var(
+        --details-secondary-foreground-color,
+        var(--color-foreground-secondary)
+    );
+}
+
 ul.accordion details .details__content {
     margin: 0 16px 6px;
     opacity: 0;
@@ -34,12 +41,6 @@ ul.accordion details[open] .details__content {
     opacity: 1;
     transform: scaleY(1);
 }
-
-ul.accordion--large summary.details__summary {
-    font-size: var(--font-size-large-1);
-    min-height: 52px;
-}
-
 ul.accordion details svg.details__expand,
 ul.accordion details[open] svg.details__collapse {
     display: inline-block;
@@ -50,6 +51,11 @@ ul.accordion details[open] svg.details__expand {
     display: none;
 }
 
+ul.accordion--large summary.details__summary {
+    font-size: var(--font-size-large-1);
+    min-height: 52px;
+}
+
 @media (prefers-reduced-motion) {
     ul.accordion details .details__content,
     ul.accordion details[open] .details__content {

dist/button/button.css

@@ -171,6 +171,12 @@ button.btn--primary {
         var(--color-foreground-on-accent)
     );
     font-weight: 700;
+    transition: all var(--motion-duration-short-3)
+        var(--motion-easing-quick-enter);
+}
+a.fake-btn--primary:active,
+button.btn--primary:active {
+    transform: scale(0.97);
 }
 
 a.fake-btn--primary {
@@ -324,11 +330,19 @@ a.fake-btn--secondary,
 button.btn--secondary {
     background-color: var(--btn-secondary-background-color, transparent);
     border-color: var(--btn-secondary-border-color, var(--color-stroke-accent));
+    color: var(
+        --btn-secondary-foreground-color,
+        var(--color-foreground-accent)
+    );
+    transition: all var(--motion-duration-short-3)
+        var(--motion-easing-quick-enter);
+}
+a.fake-btn--secondary:active,
+button.btn--secondary:active {
+    transform: scale(0.97);
 }
 
-a.fake-btn--secondary,
-a.fake-btn--secondary:visited,
-button.btn--secondary {
+a.fake-btn--secondary:visited {
     color: var(
         --btn-secondary-foreground-color,
         var(--color-foreground-accent)
@@ -435,6 +449,12 @@ a.fake-btn--secondary[aria-disabled="true"] {
 a.fake-btn--tertiary,
 button.btn--tertiary {
     border-color: var(--btn-tertiary-border-color, var(--color-stroke-default));
+    transition: all var(--motion-duration-short-3)
+        var(--motion-easing-quick-enter);
+}
+a.fake-btn--tertiary:active,
+button.btn--tertiary:active {
+    transform: scale(0.97);
 }
 
 a.fake-btn--tertiary[href]:focus,