From d37f31b437647df9865220955bd80c569cb053d2 Mon Sep 17 00:00:00 2001 From: GZolla <43836485+GZolla@users.noreply.github.com> Date: Wed, 15 Apr 2026 19:12:21 -0700 Subject: [PATCH 1/7] Update card to support semantic variables --- components/card/card-content-meta.js | 2 +- components/card/card-loading-shimmer.js | 41 ++++++++++------------ components/card/card.js | 16 ++++----- components/card/demo/card.html | 4 ++- components/card/test/card-content.vdiff.js | 24 +++++++------ components/card/test/card.vdiff.js | 33 +++++++++++------ components/colors/colors.js | 18 +++++++--- 7 files changed, 77 insertions(+), 61 deletions(-) diff --git a/components/card/card-content-meta.js b/components/card/card-content-meta.js index 28e8371038d..3e9a9d7ae7a 100644 --- a/components/card/card-content-meta.js +++ b/components/card/card-content-meta.js @@ -11,7 +11,7 @@ class CardContentMeta extends LitElement { return css` :host { box-sizing: border-box; - color: var(--d2l-color-tungsten); + color: var(--d2l-theme-text-color-static-subtle); display: inline-block; font-size: 0.7rem; font-weight: 400; diff --git a/components/card/card-loading-shimmer.js b/components/card/card-loading-shimmer.js index ad51cc1cdb8..267b52a2e9b 100644 --- a/components/card/card-loading-shimmer.js +++ b/components/card/card-loading-shimmer.js @@ -1,11 +1,12 @@ import '../colors/colors.js'; import { css, html, LitElement } from 'lit'; +import { SkeletonMixin, skeletonStyles } from '../skeleton/skeleton-mixin.js'; /** * A card layout component for when the card header is loading. * @slot - Slot for header content being loaded */ -class CardLoadingShimmer extends LitElement { +class CardLoadingShimmer extends SkeletonMixin(LitElement) { static get properties() { return { @@ -18,37 +19,25 @@ class CardLoadingShimmer extends LitElement { } static get styles() { - return css` + return [skeletonStyles, css` :host([hidden]) { display: none; } - - .d2l-card-loading-indicator { - background-color: var(--d2l-color-regolith); + .d2l-skeletize { border-radius: 7px 7px 0 0; - box-shadow: inset 0 -1px 0 0 var(--d2l-color-gypsum); height: inherit; overflow: hidden; position: relative; } - .d2l-card-loading-indicator::after { - animation: loadingShimmer 1.5s ease-in-out infinite; - background: linear-gradient(90deg, rgba(249, 250, 251, 0.1), rgba(114, 119, 122, 0.1), rgba(249, 250, 251, 0.1)); - background-color: var(--d2l-color-regolith); - content: ""; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; + :host([skeleton]) .d2l-skeletize::before { + box-shadow: inset 0 -1px 0 0 var(--d2l-color-gypsum); + border-radius: 0; } - - @keyframes loadingShimmer { - 0% { transform: translate3d(-100%, 0, 0); } - 100% { transform: translate3d(100%, 0, 0); } + :host([skeleton]) slot { + display: none; } - `; + `]; } constructor() { @@ -58,11 +47,17 @@ class CardLoadingShimmer extends LitElement { render() { return html` -
-