diff --git a/.changeset/big-glasses-check.md b/.changeset/big-glasses-check.md index a87529b6de6..0445862d7c3 100644 --- a/.changeset/big-glasses-check.md +++ b/.changeset/big-glasses-check.md @@ -2,6 +2,7 @@ "@spectrum-css/accordion": major "@spectrum-css/actionbar": major "@spectrum-css/actiongroup": major +"@spectrum-css/well": major --- This update removes `--mod-*` custom property hooks per SWC-1264, see also the RFC for extensible styling. diff --git a/components/well/dist/metadata.json b/components/well/dist/metadata.json index c9fdd7f6da1..0a8d99d7d55 100644 --- a/components/well/dist/metadata.json +++ b/components/well/dist/metadata.json @@ -1,22 +1,9 @@ { "sourceFile": "index.css", "selectors": [".spectrum-Well"], - "modifiers": [ - "--mod-well-background-color", - "--mod-well-border-color", - "--mod-well-border-radius", - "--mod-well-border-width", - "--mod-well-content-color", - "--mod-well-margin-top", - "--mod-well-min-width", - "--mod-well-padding" - ], + "modifiers": [], "component": [ - "--spectrum-well-background-color", - "--spectrum-well-border-color", "--spectrum-well-border-radius", - "--spectrum-well-border-width", - "--spectrum-well-content-color", "--spectrum-well-margin-top", "--spectrum-well-min-width", "--spectrum-well-padding" @@ -24,8 +11,8 @@ "global": [ "--spectrum-body-color", "--spectrum-border-width-100", - "--spectrum-gray-1000-rgb", - "--spectrum-gray-800-rgb" + "--spectrum-gray-1000", + "--spectrum-gray-800" ], "passthroughs": [], "high-contrast": [] diff --git a/components/well/index.css b/components/well/index.css index 4c24597f735..2157a062d87 100644 --- a/components/well/index.css +++ b/components/well/index.css @@ -12,21 +12,15 @@ */ .spectrum-Well { - --spectrum-well-border-color: rgb(var(--spectrum-gray-1000-rgb), 0.05); - - --spectrum-well-border-width: var(--spectrum-border-width-100); - --spectrum-well-content-color: var(--spectrum-body-color); - --spectrum-well-background-color: rgb(var(--spectrum-gray-800-rgb), 0.02); - text-align: start; display: block; - min-inline-size: var(--mod-well-min-width, var(--spectrum-well-min-width)); - padding: var(--mod-well-padding, var(--spectrum-well-padding)); - margin-block-start: var(--mod-well-margin-top, var(--spectrum-well-margin-top)); - border-width: var(--mod-well-border-width, var(--spectrum-well-border-width)); + min-inline-size: var(--spectrum-well-min-width); + padding: var(--spectrum-well-padding); + margin-block-start: var(--spectrum-well-margin-top); + border-width: var(--spectrum-border-width-100); border-style: solid; - border-radius: var(--mod-well-border-radius, var(--spectrum-well-border-radius)); - background-color: var(--mod-well-background-color, var(--spectrum-well-background-color)); - border-color: var(--mod-well-border-color, var(--spectrum-well-border-color)); - color: var(--mod-well-content-color, var(--spectrum-well-content-color)); + border-radius: var(--spectrum-well-border-radius); + background-color: color-mix(in sRGB, var(--spectrum-gray-800) 2%, transparent); + border-color: color-mix(in sRGB, var(--spectrum-gray-1000) 5%, transparent); + color: var(--spectrum-body-color); }