Fix minor styling issues

Tap30 · Jun 2, 2024 · a8c0834 · a8c0834
1 parent 378c81e
commit a8c0834
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 16 deletions.
diff --git a/src/skeleton/skeleton.stories.ts b/src/skeleton/skeleton.stories.ts
@@ -61,5 +61,4 @@ export const Skeleton = Template.bind({});
 Skeleton.args = {
   variant: 'line',
   animationMode: 'progress',
-  height: '200',
 };
diff --git a/src/skeleton/skeleton.style.ts b/src/skeleton/skeleton.style.ts
@@ -19,33 +19,39 @@ export default css`
     position: relative;
     overflow: hidden;
     outline: none;
-    background: var(--tap-skeleton-background, var(--tap-palette-gray-100))
+    background: var(
+        --tap-skeleton-background,
+        var(--tap-sys-color-surface-tertiary)
+      )
       no-repeat;
     border-radius: var(--tap-skeleton-radius, var(--tap-sys-radius-2));
     width: var(--tap-skeleton-width, 100%);
-    height: var(--tap-skeleton-height, 20px);
+    height: var(--tap-skeleton-height, var(--tap-sys-spacing-8));
     display: inline-block;
     will-change: transform;
   }
 
   :host([variant='rect']) .skeleton {
-    border-radius: var(--tap-skeleton-radius, 0px);
+    border-radius: var(--tap-skeleton-rect-radius, var(--tap-sys-spacing-0));
   }
 
   :host([variant='circle']) .skeleton {
-    width: var(--tap-skeleton-width, 40px);
-    height: var(--tap-skeleton-height, 40px);
-    border-radius: var(--tap-skeleton-radius, var(--tap-sys-radius-full));
+    width: var(--tap-skeleton-circle-width, var(--tap-sys-spacing-10));
+    height: var(--tap-skeleton-circle-height, var(--tap-sys-spacing-10));
+    border-radius: var(
+      --tap-skeleton-circle-radius,
+      var(--tap-sys-radius-full)
+    );
   }
 
   :host([animationMode='progress']) .skeleton {
     animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
     background-size: 200px 100%;
     background-image: linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 0.6),
-      rgba(255, 255, 255, 0)
+      color-mix(in srgb, var(--tap-sys-color-surface-white), transparent 100%),
+      color-mix(in srgb, var(--tap-sys-color-surface-white), transparent 40%),
+      color-mix(in srgb, var(--tap-sys-color-surface-white), transparent 100%)
     );
   }
   :host([animationMode='pulse']) .skeleton {
@@ -67,17 +73,15 @@ export default css`
     }
 
     50% {
-      opacity: 0.4%;
+      opacity: 0.4;
     }
 
     100% {
       opacity: 1;
     }
   }
 
-  /*
-    Removing animation if user enabled the 'Reduce Motion' option.
-  */
+  // Removing animation if user enabled the 'Reduce Motion' option.
   @media (prefers-reduced-motion: reduce) {
     :host([animationMode='progress']) .skeleton,
     :host([animationMode='pulse']) .skeleton {

diff --git a/src/skeleton/skeleton.ts b/src/skeleton/skeleton.ts
@@ -6,15 +6,15 @@ export class Skeleton extends LitElement {
   @property({ reflect: true }) variant?: SkeletonVariant = 'line';
   @property({ reflect: true }) animationMode?: SkeletonAnimation = 'progress';
   @property({ reflect: true }) width?: string = '100%';
-  @property({ reflect: true }) height?: string = '100';
+  @property({ reflect: true }) height?: string = '20px';
 
   render() {
     return html`<div
       class="skeleton"
       aria-label="Loading"
       aria-labeledby=${nothing}
       aria-describedby=${nothing}
-      style="height: ${this.height}px; width: ${this.width};"
+      style="height: ${this.height}; width: ${this.width};"
     ></div>`;
   }
 }