feat(skeletons): added on-secondary color (#2306)

eBay · Apr 10, 2024 · 8cdc782 · 8cdc782
1 parent a8f2c6b
commit 8cdc782
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 42 deletions.
diff --git a/.changeset/metal-cars-promise.md b/.changeset/metal-cars-promise.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+skeleton: added on-secondary color and changed elevated to use on-secondary
diff --git a/dist/skeleton/skeleton.css b/dist/skeleton/skeleton.css
@@ -103,13 +103,19 @@ div.skeleton__textbox:not(:last-child) {
 .skeleton--elevated {
   --skeleton-background: var(--color-loading-fill-elevated);
 }
+.skeleton--on-secondary {
+  --skeleton-background: var(--color-loading-fill-on-secondary);
+}
 @media screen and (max-width: 512px) {
   .skeleton {
     --skeleton-background: var(--color-loading-shimmer);
   }
   .skeleton--elevated {
     --skeleton-background: var(--color-loading-shimmer-elevated);
   }
+  .skeleton--on-secondary {
+    --skeleton-background: var(--color-loading-shimmer-on-secondary);
+  }
 }
 .skeleton--purple {
   --skeleton-background: var(--color-loading-ai-gradient-purple-subtle);

diff --git a/dist/tokens/evo-dark.css b/dist/tokens/evo-dark.css
@@ -137,24 +137,27 @@
             var(--color-ai-solid-green-subtle) 0%,
             var(--color-ai-solid-blue-subtle) 154.5%
         );
-        --color-loading-fill: #1b1b1b;
+        --color-loading-fill: #2d2d2d;
         --color-loading-shimmer: linear-gradient(
             270deg,
             var(--color-loading-fill) 0%,
             var(--color-loading-fill) 34%,
-            #0e0e0e 50%,
+            #1b1b1b 50%,
             var(--color-loading-fill) 66%,
             var(--color-loading-fill) 100%
         );
-        --color-loading-fill-elevated: #222;
-        --color-loading-shimmer-elevated: linear-gradient(
+        --color-loading-fill-on-secondary: #353535;
+        --color-loading-shimmer-on-secondary: linear-gradient(
             270deg,
-            var(--color-loading-fill-elevated) 0%,
-            var(--color-loading-fill-elevated) 34%,
-            #1c1c1c 50%,
-            var(--color-loading-fill-elevated) 66%,
-            var(--color-loading-fill-elevated) 100%
-        );
+            var(--color-loading-fill-on-secondary) 0%,
+            var(--color-loading-fill-on-secondary) 34%,
+            #232323 50%,
+            var(--color-loading-fill-on-secondary) 66%,
+            var(--color-loading-fill-on-secondary) 100%
+        );
+        /* deprecated, remove next major both fill-elevated and shimmer-elevated */
+        --color-loading-fill-elevated: var(--color-loading-fill-on-secondary);
+        --color-loading-shimmer-elevated: var(--color-loading-shimmer-on-secondary);
         --color-loading-ai-gradient-purple-subtle: linear-gradient(
             270deg,
             var(--color-ai-solid-red-subtle-dark) 0%,

diff --git a/dist/tokens/evo-light.css b/dist/tokens/evo-light.css
@@ -138,7 +138,7 @@
     --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
     --shadow-strong: 0px 5px 17px 0px rgba(0, 0, 0, 0.2),
         0px 2px 7px 0px rgba(0, 0, 0, 0.15);
-    --color-loading-fill: #f2f2f2;
+    --color-loading-fill: #ededed;
     --color-loading-shimmer: linear-gradient(
         270deg,
         var(--color-loading-fill) 0%,
@@ -147,8 +147,18 @@
         var(--color-loading-fill) 66%,
         var(--color-loading-fill) 100%
     );
-    --color-loading-fill-elevated: var(--color-loading-fill);
-    --color-loading-shimmer-elevated: var(--color-loading-shimmer);
+    --color-loading-fill-on-secondary: #e4e4e4;
+    --color-loading-shimmer-on-secondary: linear-gradient(
+        270deg,
+        var(--color-loading-fill-on-secondary) 0%,
+        var(--color-loading-fill-on-secondary) 34%,
+        #ededed 50%,
+        var(--color-loading-fill-on-secondary) 66%,
+        var(--color-loading-fill-on-secondary) 100%
+    );
+    /* deprecated, remove next major both fill-elevated and shimmer-elevated */
+    --color-loading-fill-elevated: var(--color-loading-fill-on-secondary);
+    --color-loading-shimmer-elevated: var(--color-loading-shimmer-on-secondary);
     --color-loading-ai-gradient-purple-subtle: linear-gradient(
         270deg,
         var(--color-ai-solid-red-subtle) 0%,

diff --git a/docs/_includes/skeleton.html b/docs/_includes/skeleton.html
@@ -26,7 +26,7 @@ <h3 id="skeleton-types">Skeleton Types</h3>
       <tr>
         <th>Skeleton</th>
         <th>Default</th>
-        <!--<th>Elevated</th>-->
+        <th>On-Secondary</th>
         <th>Purple</th>
         <th>Green</th>
         <th>Blue</th>
@@ -40,13 +40,13 @@ <h3 id="skeleton-types">Skeleton Types</h3>
             <div class="skeleton__avatar"></div>
           </div>
         </td>
-        <!--
+
         <td>
-          <div class="skeleton skeleton--elevated" role="img" aria-label="loading">
+          <div class="skeleton skeleton--on-secondary" role="img" aria-label="loading">
             <div class="skeleton__avatar"></div>
           </div>
         </td>
-        -->
+
         <td>
           <div class="skeleton skeleton--purple" role="img" aria-label="loading">
             <div class="skeleton__avatar"></div>
@@ -70,13 +70,13 @@ <h3 id="skeleton-types">Skeleton Types</h3>
             <div class="skeleton__button"></div>
           </div>
         </td>
-        <!--
+
         <td>
-          <div class="skeleton skeleton--elevated" role="img" aria-label="loading">
+          <div class="skeleton skeleton--on-secondary" role="img" aria-label="loading">
             <div class="skeleton__button"></div>
           </div>
         </td>
-        -->
+
         <td>
           <div class="skeleton skeleton--purple" role="img" aria-label="loading">
             <div class="skeleton__button"></div>
@@ -100,13 +100,11 @@ <h3 id="skeleton-types">Skeleton Types</h3>
             <div class="skeleton__textbox"></div>
           </div>
         </td>
-        <!--
         <td>
-          <div class="skeleton skeleton--elevated" role="img" aria-label="loading">
+          <div class="skeleton skeleton--on-secondary" role="img" aria-label="loading">
             <div class="skeleton__textbox"></div>
           </div>
         </td>
-        -->
         <td>
           <div class="skeleton skeleton--purple" role="img" aria-label="loading">
             <div class="skeleton__textbox"></div>
@@ -130,13 +128,11 @@ <h3 id="skeleton-types">Skeleton Types</h3>
             <div class="skeleton__image" style="height: 50px; width: 50px;"></div>
           </div>
         </td>
-        <!--
         <td>
-          <div class="skeleton skeleton--elevated" role="img" aria-label="loading">
+          <div class="skeleton skeleton--on-secondary" role="img" aria-label="loading">
             <div class="skeleton__image" style="height: 50px; width: 50px;"></div>
           </div>
         </td>
-        -->
         <td>
           <div class="skeleton skeleton--purple" role="img" aria-label="loading">
             <div class="skeleton__image" style="height: 50px; width: 50px;"></div>
@@ -160,13 +156,11 @@ <h3 id="skeleton-types">Skeleton Types</h3>
             <div class="skeleton__text"></div>
           </div>
         </td>
-        <!--
         <td>
-          <div class="skeleton skeleton--elevated" role="img" aria-label="loading">
+          <div class="skeleton skeleton--on-secondary" role="img" aria-label="loading">
             <div class="skeleton__text"></div>
           </div>
         </td>
-        -->
         <td>
           <div class="skeleton skeleton--purple" role="img" aria-label="loading">
             <div class="skeleton__text"></div>

diff --git a/src/less/skeleton/skeleton.less b/src/less/skeleton/skeleton.less
@@ -124,17 +124,28 @@ div.skeleton__textbox:not(:last-child) {
     margin-block-end: var(--spacing-150);
 }
 
+// Deprecated, remove next major
 .skeleton--elevated {
     --skeleton-background: var(--color-loading-fill-elevated);
 }
 
+.skeleton--on-secondary {
+    --skeleton-background: var(--color-loading-fill-on-secondary);
+}
+
 @media screen and (max-width: @_screen-size-SM) {
     .skeleton {
         --skeleton-background: var(--color-loading-shimmer);
     }
+
+    // Deprecated, remove next major
     .skeleton--elevated {
         --skeleton-background: var(--color-loading-shimmer-elevated);
     }
+
+    .skeleton--on-secondary {
+        --skeleton-background: var(--color-loading-shimmer-on-secondary);
+    }
 }
 
 .skeleton--purple {

diff --git a/src/less/skeleton/stories/composite.stories.js b/src/less/skeleton/stories/composite.stories.js
@@ -30,7 +30,7 @@ export const inlineSkeletons = () =>
     </div>`;
 
 export const blockSkeletons = () =>
-    `<div class="skeleton skeleton--elevated" role="img" aria-label="loading">
+    `<div class="skeleton skeleton--on-secondary" role="img" aria-label="loading">
         <div class="skeleton__button"></div>
         <div class="skeleton__button"></div>
     </div>`;
diff --git a/src/tokens/evo-dark.css b/src/tokens/evo-dark.css
@@ -137,23 +137,28 @@
             var(--color-ai-solid-green-subtle) 0%,
             var(--color-ai-solid-blue-subtle) 154.5%
         );
-        --color-loading-fill: #1b1b1b;
+        --color-loading-fill: #2d2d2d;
         --color-loading-shimmer: linear-gradient(
             270deg,
             var(--color-loading-fill) 0%,
             var(--color-loading-fill) 34%,
-            #0e0e0e 50%,
+            #1b1b1b 50%,
             var(--color-loading-fill) 66%,
             var(--color-loading-fill) 100%
         );
-        --color-loading-fill-elevated: #222;
-        --color-loading-shimmer-elevated: linear-gradient(
+        --color-loading-fill-on-secondary: #353535;
+        --color-loading-shimmer-on-secondary: linear-gradient(
             270deg,
-            var(--color-loading-fill-elevated) 0%,
-            var(--color-loading-fill-elevated) 34%,
-            #1c1c1c 50%,
-            var(--color-loading-fill-elevated) 66%,
-            var(--color-loading-fill-elevated) 100%
+            var(--color-loading-fill-on-secondary) 0%,
+            var(--color-loading-fill-on-secondary) 34%,
+            #232323 50%,
+            var(--color-loading-fill-on-secondary) 66%,
+            var(--color-loading-fill-on-secondary) 100%
+        );
+        /* deprecated, remove next major both fill-elevated and shimmer-elevated */
+        --color-loading-fill-elevated: var(--color-loading-fill-on-secondary);
+        --color-loading-shimmer-elevated: var(
+            --color-loading-shimmer-on-secondary
         );
         --color-loading-ai-gradient-purple-subtle: linear-gradient(
             270deg,

diff --git a/src/tokens/evo-light.css b/src/tokens/evo-light.css
@@ -138,7 +138,7 @@
     --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
     --shadow-strong: 0px 5px 17px 0px rgba(0, 0, 0, 0.2),
         0px 2px 7px 0px rgba(0, 0, 0, 0.15);
-    --color-loading-fill: #f2f2f2;
+    --color-loading-fill: #ededed;
     --color-loading-shimmer: linear-gradient(
         270deg,
         var(--color-loading-fill) 0%,
@@ -147,8 +147,18 @@
         var(--color-loading-fill) 66%,
         var(--color-loading-fill) 100%
     );
-    --color-loading-fill-elevated: var(--color-loading-fill);
-    --color-loading-shimmer-elevated: var(--color-loading-shimmer);
+    --color-loading-fill-on-secondary: #e4e4e4;
+    --color-loading-shimmer-on-secondary: linear-gradient(
+        270deg,
+        var(--color-loading-fill-on-secondary) 0%,
+        var(--color-loading-fill-on-secondary) 34%,
+        #ededed 50%,
+        var(--color-loading-fill-on-secondary) 66%,
+        var(--color-loading-fill-on-secondary) 100%
+    );
+    /* deprecated, remove next major both fill-elevated and shimmer-elevated */
+    --color-loading-fill-elevated: var(--color-loading-fill-on-secondary);
+    --color-loading-shimmer-elevated: var(--color-loading-shimmer-on-secondary);
     --color-loading-ai-gradient-purple-subtle: linear-gradient(
         270deg,
         var(--color-ai-solid-red-subtle) 0%,