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` -
-
+
`; } + willUpdate(changedProperties) { + super.willUpdate(changedProperties); + if (changedProperties.has('loading')) { + this.skeleton = this.loading; + } + } + } customElements.define('d2l-card-loading-shimmer', CardLoadingShimmer); diff --git a/components/card/card.js b/components/card/card.js index e83448b70f7..1324a322160 100644 --- a/components/card/card.js +++ b/components/card/card.js @@ -87,8 +87,8 @@ class Card extends LitElement { static get styles() { return [offscreenStyles, css` :host { - background-color: #ffffff; - border: 1px solid var(--d2l-color-gypsum); + background-color: var(--d2l-theme-background-color-base); + border: 1px solid var(--d2l-theme-border-color-subtle); border-radius: 6px; box-sizing: border-box; display: inline-block; @@ -191,20 +191,18 @@ class Card extends LitElement { border: none; } :host([subtle][href]) { - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03); - } - :host([href]:not([_active]):hover) { - box-shadow: 0 2px 14px 1px rgba(0, 0, 0, 0.06); + box-shadow: var(--d2l-theme-shadow-attached); } + :host([href]:not([_active]):hover), :host([subtle][href]:not([_active]):hover) { - box-shadow: 0 4px 18px 2px rgba(0, 0, 0, 0.06); + box-shadow: var(--d2l-theme-shadow-floating); } ${getFocusRingStyles(() => ':host([_active])', { 'extraStyles': css`border-color: transparent;` })} /* .d2l-card-link-container-hover is used to only color/underline when hovering the anchor; these styles are not applied when hovering actions */ :host([href]) .d2l-card-link-container-hover, :host([href][_active]) .d2l-card-content { - color: var(--d2l-color-celestine); + color: var(--d2l-theme-text-color-interactive-default); text-decoration: underline; } /* this is needed to ensure tooltip is not be clipped by adjacent cards */ @@ -222,7 +220,7 @@ class Card extends LitElement { } @media (prefers-contrast: more) { :host([subtle]) { - border: 1px solid var(--d2l-color-gypsum); + border: 1px solid var(--d2l-theme-border-color-subtle); } } `]; diff --git a/components/card/demo/card.html b/components/card/demo/card.html index 65782dbd139..34f70be129d 100644 --- a/components/card/demo/card.html +++ b/components/card/demo/card.html @@ -18,6 +18,8 @@ import '../card-content-meta.js'; import '../card-content-title.js'; import '../card-footer-link.js'; + import { registerCustomSemanticVariableValue } from '../../colors/colors.js'; + registerCustomSemanticVariableValue('--d2l-subtle-cards-background', 'var(--d2l-theme-background-color-sunken)', 'var(--d2l-color-ferrite)');