From f61ef43a06cf493b709f40928dce74d4f2ccd66f Mon Sep 17 00:00:00 2001 From: Ruslan Lekhman Date: Thu, 9 Apr 2026 00:50:32 -0600 Subject: [PATCH] feat(material/expansion): add border design tokens Adds `expansion-container-outline-width` and `expansion-container-outline-color` tokens to both M2 and M3 themes, wired to CSS `border` properties on `.mat-expansion-panel`. Defaults are `0` and `transparent` respectively, preserving existing visual behavior. close #32878 Signed-off-by: Ruslan Lekhman --- src/material/expansion/_m2-expansion.scss | 2 ++ src/material/expansion/_m3-expansion.scss | 2 ++ src/material/expansion/expansion-panel.scss | 3 +++ 3 files changed, 7 insertions(+) diff --git a/src/material/expansion/_m2-expansion.scss b/src/material/expansion/_m2-expansion.scss index 4224d7ddc353..989f0cd0489b 100644 --- a/src/material/expansion/_m2-expansion.scss +++ b/src/material/expansion/_m2-expansion.scss @@ -11,12 +11,14 @@ @return ( base: ( expansion-container-shape: 4px, + expansion-container-outline-width: 0, expansion-container-elevation-shadow: elevation.get-box-shadow(2), expansion-legacy-header-indicator-display: inline-block, expansion-header-indicator-display: none, ), color: ( expansion-container-background-color: map.get($system, surface), + expansion-container-outline-color: transparent, expansion-container-text-color: map.get($system, on-surface), expansion-actions-divider-color: map.get($system, outline), expansion-header-hover-state-layer-color: m3-utils.color-with-opacity( diff --git a/src/material/expansion/_m3-expansion.scss b/src/material/expansion/_m3-expansion.scss index 4ae185f87754..99dbff707ced 100644 --- a/src/material/expansion/_m3-expansion.scss +++ b/src/material/expansion/_m3-expansion.scss @@ -15,6 +15,7 @@ $prefix: (mat, expansion); @return ( base: ( expansion-container-shape: 12px, + expansion-container-outline-width: 0, expansion-header-indicator-display: inline-block, expansion-legacy-header-indicator-display: none, expansion-container-elevation-shadow: elevation.get-box-shadow(2), @@ -22,6 +23,7 @@ $prefix: (mat, expansion); color: ( expansion-actions-divider-color: map.get($system, outline), expansion-container-background-color: map.get($system, surface), + expansion-container-outline-color: transparent, expansion-container-text-color: map.get($system, on-surface), expansion-header-description-color: map.get($system, on-surface-variant), expansion-header-disabled-state-text-color: diff --git a/src/material/expansion/expansion-panel.scss b/src/material/expansion/expansion-panel.scss index 62b6cb4b727d..86e73454a715 100644 --- a/src/material/expansion/expansion-panel.scss +++ b/src/material/expansion/expansion-panel.scss @@ -25,6 +25,9 @@ $fallbacks: m3-expansion.get-tokens(); background: token-utils.slot(expansion-container-background-color, $fallbacks); color: token-utils.slot(expansion-container-text-color, $fallbacks); border-radius: token-utils.slot(expansion-container-shape, $fallbacks); + border-width: token-utils.slot(expansion-container-outline-width, $fallbacks); + border-color: token-utils.slot(expansion-container-outline-color, $fallbacks); + border-style: solid; &:not([class*='#{elevation.$prefix}']) { box-shadow: token-utils.slot(expansion-container-elevation-shadow, $fallbacks);