Merge remote-tracking branch 'origin/main' into fix/2014-tabs-weird-behavior-in-safari-ff

Author: anna-lach

.changeset/hip-pianos-teach.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/skeleton': minor
+---
+
+Refactor component to use contextual tokens

packages/components/skeleton/src/skeleton.scss

@@ -1,51 +1,44 @@
 :host {
-  --_animation-duration: var(--sl-skeleton-animation-duration, 3000ms);
-  --_background: var(--sl-color-skeleton-base);
-  --_border-radius-circle: var(--sl-border-radius-circle);
-  --_border-radius: var(--sl-border-radius-skeleton-default);
-  --_min-block-size: var(--sl-size-skeleton-min-height);
-  --_shine-color: var(--sl-color-skeleton-effect);
-
-  background: var(--_background);
+  background: linear-gradient(
+    to right,
+    var(--sl-color-skeleton-plain) 4%,
+    var(--sl-color-skeleton-subtle) 25%,
+    var(--sl-color-skeleton-plain) 36%
+  );
+  background-size: 2000px 100%;
+  border-radius: var(--sl-size-borderRadius-default);
   display: block;
-  min-block-size: var(--_min-block-size);
-}
+  min-block-size: var(--sl-size-100);
 
-:host([variant='default']) {
-  border-radius: var(--_border-radius);
+  @media (prefers-reduced-motion: no-preference) {
+    animation: shimmer-effect 3s linear infinite;
+  }
 }
 
 :host([variant='circle']) {
-  border-radius: var(--_border-radius-circle);
-}
-
-:host([effect='shimmer']) {
-  background: linear-gradient(to right, var(--_background) 4%, var(--_shine-color) 25%, var(--_background) 36%);
-  background-size: 2000px 100%;
-
-  @media (prefers-reduced-motion: no-preference) {
-    animation: shimmer-effect var(--_animation-duration) linear infinite;
-  }
+  border-radius: 50%;
 }
 
 :host([effect='sheen']) {
   background-image: linear-gradient(
     100deg,
-    var(--_shine-color),
-    var(--_background),
-    var(--_background),
-    var(--_shine-color)
+    var(--sl-color-skeleton-subtle),
+    var(--sl-color-skeleton-plain),
+    var(--sl-color-skeleton-plain),
+    var(--sl-color-skeleton-subtle)
   );
   background-size: 200% 100%;
 
   @media (prefers-reduced-motion: no-preference) {
-    animation: sheen-effect var(--_animation-duration) linear infinite;
+    animation: sheen-effect 3s linear infinite;
   }
 }
 
 :host([effect='pulse']) {
+  background: var(--sl-color-skeleton-plain);
+
   @media (prefers-reduced-motion: no-preference) {
-    animation: pulse-effect var(--_animation-duration) ease-in-out 0.5s infinite;
+    animation: pulse-effect 3s ease-in-out 0.5s infinite;
   }
 }
 

packages/components/skeleton/src/skeleton.spec.ts

@@ -10,47 +10,52 @@ describe('sl-skeleton', () => {
     el = await fixture(html`<sl-skeleton></sl-skeleton>`);
   });
 
-  it('should render correctly', () => {
-    expect(el).shadowDom.to.equalSnapshot();
-  });
-
   it('should have an aria busy', () => {
     expect(el).to.have.attribute('aria-busy', 'true');
   });
 
-  it('should have a shimmer effect by default', () => {
-    expect(el).to.have.attribute('effect', 'shimmer');
+  it('should not have a default effect', () => {
+    expect(el).not.to.have.attribute('effect');
+    expect(el.effect).to.be.undefined;
   });
 
   it('should have a pulse effect when set', async () => {
     el.effect = 'pulse';
     await el.updateComplete;
 
-    const effect = el.getAttribute('effect');
-    expect(effect).to.equal('pulse');
+    expect(el).to.have.attribute('effect', 'pulse');
   });
 
   it('should have a shimmer effect when set', async () => {
     el.effect = 'shimmer';
     await el.updateComplete;
 
-    const effect = el.getAttribute('effect');
-    expect(effect).to.equal('shimmer');
+    expect(el).to.have.attribute('effect', 'shimmer');
   });
 
   it('should have a sheen effect when set', async () => {
     el.effect = 'sheen';
     await el.updateComplete;
 
-    const effect = el.getAttribute('effect');
-    expect(effect).to.equal('sheen');
+    expect(el).to.have.attribute('effect', 'sheen');
   });
 
   it('should have no effect when set to none', async () => {
     el.effect = 'none';
     await el.updateComplete;
 
-    const effect = el.getAttribute('effect');
-    expect(effect).to.equal('none');
+    expect(el).to.have.attribute('effect', 'none');
+  });
+
+  it('should not have a default variant', () => {
+    expect(el).not.to.have.attribute('variant');
+    expect(el.variant).to.be.undefined;
+  });
+
+  it('should have a circle variant when set', async () => {
+    el.variant = 'circle';
+    await el.updateComplete;
+
+    expect(el).to.have.attribute('variant', 'circle');
   });
 });

packages/components/skeleton/src/skeleton.ts

@@ -9,24 +9,26 @@ declare global {
 }
 
 export type SkeletonEffect = 'none' | 'shimmer' | 'pulse' | 'sheen';
-
 export type SkeletonVariant = 'circle' | 'default';
 
+/**
+ * Skeletons are used as a temporary placeholder while content is loading to improve the user experience.
+ */
 export class Skeleton extends LitElement {
   /** @internal */
   static override styles: CSSResultGroup = styles;
 
   /**
    * Skeleton's effect.
-   * @type {'none' | 'shimmer' | 'pulse' | 'sheen'}
+   * @default 'shimmer'
    */
-  @property({ reflect: true }) effect: SkeletonEffect = 'shimmer';
+  @property({ reflect: true }) effect?: SkeletonEffect;
 
   /**
    * Skeleton's variant.
-   * @type {'circle' | 'default'}
+   * @default 'default'
    */
-  @property({ reflect: true }) variant: SkeletonVariant = 'default';
+  @property({ reflect: true }) variant?: SkeletonVariant;
 
   override connectedCallback(): void {
     super.connectedCallback();

packages/tokens/src/clickedu/light-new.json

@@ -692,12 +692,12 @@
 			"skeleton": {
 				"plain": {
 					"$type": "color",
-					"$value": "{clickedu.color.background.accent.grey.subtlest}",
+					"$value": "{clickedu.color.palette.grey.100}",
 					"$description": "Use for skeleton loading states."
 				},
 				"subtle": {
 					"$type": "color",
-					"$value": "{clickedu.color.background.accent.grey.subtle}",
+					"$value": "{clickedu.color.palette.grey.050}",
 					"$description": "Use for the pulse or shimmer effect in skeleton loading states."
 				}
 			},

packages/tokens/src/editorial-suite/light-new.json

@@ -692,12 +692,12 @@
 			"skeleton": {
 				"plain": {
 					"$type": "color",
-					"$value": "{editorial-suite.color.background.accent.grey.subtlest}",
+					"$value": "{editorial-suite.color.palette.grey.100}",
 					"$description": "Use for skeleton loading states."
 				},
 				"subtle": {
 					"$type": "color",
-					"$value": "{editorial-suite.color.background.accent.grey.subtle}",
+					"$value": "{editorial-suite.color.palette.grey.050}",
 					"$description": "Use for the pulse or shimmer effect in skeleton loading states."
 				}
 			},

packages/tokens/src/itslearning/light-new.json

@@ -692,12 +692,12 @@
 			"skeleton": {
 				"plain": {
 					"$type": "color",
-					"$value": "{itslearning.color.background.accent.grey.subtlest}",
+					"$value": "{itslearning.color.palette.grey.100}",
 					"$description": "Use for skeleton loading states."
 				},
 				"subtle": {
 					"$type": "color",
-					"$value": "{itslearning.color.background.accent.grey.subtle}",
+					"$value": "{itslearning.color.palette.grey.050}",
 					"$description": "Use for the pulse or shimmer effect in skeleton loading states."
 				}
 			},

packages/tokens/src/magister/light-new.json

@@ -692,12 +692,12 @@
 			"skeleton": {
 				"plain": {
 					"$type": "color",
-					"$value": "{magister.color.background.accent.grey.subtlest}",
+					"$value": "{magister.color.palette.grey.100}",
 					"$description": "Use for skeleton loading states."
 				},
 				"subtle": {
 					"$type": "color",
-					"$value": "{magister.color.background.accent.grey.subtle}",
+					"$value": "{magister.color.palette.grey.050}",
 					"$description": "Use for the pulse or shimmer effect in skeleton loading states."
 				}
 			},

packages/tokens/src/neon/light-new.json

@@ -692,12 +692,12 @@
 			"skeleton": {
 				"plain": {
 					"$type": "color",
-					"$value": "{neon.color.background.accent.grey.subtlest}",
+					"$value": "{neon.color.palette.grey.100}",
 					"$description": "Use for skeleton loading states."
 				},
 				"subtle": {
 					"$type": "color",
-					"$value": "{neon.color.background.accent.grey.subtle}",
+					"$value": "{neon.color.palette.grey.050}",
 					"$description": "Use for the pulse or shimmer effect in skeleton loading states."
 				}
 			},

packages/tokens/src/sanoma-learning/dark-new.json

@@ -692,12 +692,12 @@
 			"skeleton": {
 				"plain": {
 					"$type": "color",
-					"$value": "{sanoma-learning.color.background.accent.grey.subtlest}",
+					"$value": "rgba( {sanoma-learning.color.palette.grey.900}, 5%)",
 					"$description": "Use for skeleton loading states."
 				},
 				"subtle": {
 					"$type": "color",
-					"$value": "{sanoma-learning.color.background.accent.grey.subtle}",
+					"$value": "{sanoma-learning.color.palette.grey.000}",
 					"$description": "Use for the pulse or shimmer effect in skeleton loading states."
 				}
 			},