From 8237249672c646c82976b22370075a4c6f39b50f Mon Sep 17 00:00:00 2001 From: castastrophe Date: Wed, 22 Oct 2025 14:38:27 -0400 Subject: [PATCH] feat(badge): remove modifiers from the API [SWC-1264] --- .changeset/weak-colts-divide.md | 1 + components/badge/dist/metadata.json | 264 +++---------- components/badge/index.css | 462 ++++++++-------------- components/badge/stories/badge.stories.js | 8 +- components/badge/stories/template.js | 6 +- 5 files changed, 244 insertions(+), 497 deletions(-) diff --git a/.changeset/weak-colts-divide.md b/.changeset/weak-colts-divide.md index ac5b61000a2..8f2bfb9b651 100644 --- a/.changeset/weak-colts-divide.md +++ b/.changeset/weak-colts-divide.md @@ -4,6 +4,7 @@ "@spectrum-css/assetcard": major "@spectrum-css/assetlist": major "@spectrum-css/avatar": major +"@spectrum-css/badge": major "@spectrum-css/miller": major "@spectrum-css/well": major --- diff --git a/components/badge/dist/metadata.json b/components/badge/dist/metadata.json index 29aa729974a..5f4c783c596 100644 --- a/components/badge/dist/metadata.json +++ b/components/badge/dist/metadata.json @@ -2,232 +2,92 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Badge", - ".spectrum-Badge--accent", - ".spectrum-Badge--blue", - ".spectrum-Badge--brown", - ".spectrum-Badge--celery", - ".spectrum-Badge--chartreuse", - ".spectrum-Badge--cinnamon", - ".spectrum-Badge--cyan", ".spectrum-Badge--fixed-block-end", ".spectrum-Badge--fixed-block-start", ".spectrum-Badge--fixed-inline-end", ".spectrum-Badge--fixed-inline-start", - ".spectrum-Badge--fuchsia", - ".spectrum-Badge--gray", - ".spectrum-Badge--green", - ".spectrum-Badge--indigo", - ".spectrum-Badge--informative", - ".spectrum-Badge--magenta", - ".spectrum-Badge--negative", - ".spectrum-Badge--neutral", - ".spectrum-Badge--notice", - ".spectrum-Badge--orange", - ".spectrum-Badge--pink", - ".spectrum-Badge--positive", - ".spectrum-Badge--purple", - ".spectrum-Badge--red", - ".spectrum-Badge--seafoam", - ".spectrum-Badge--silver", + ".spectrum-Badge--outline:where(.spectrum-Badge--accent)", + ".spectrum-Badge--outline:where(.spectrum-Badge--informative)", + ".spectrum-Badge--outline:where(.spectrum-Badge--negative)", + ".spectrum-Badge--outline:where(.spectrum-Badge--neutral)", + ".spectrum-Badge--outline:where(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice)", + ".spectrum-Badge--outline:where(.spectrum-Badge--notice)", + ".spectrum-Badge--outline:where(.spectrum-Badge--positive)", ".spectrum-Badge--sizeL", ".spectrum-Badge--sizeS", ".spectrum-Badge--sizeXL", - ".spectrum-Badge--style-outline.spectrum-Badge--accent", - ".spectrum-Badge--style-outline.spectrum-Badge--informative", - ".spectrum-Badge--style-outline.spectrum-Badge--negative", - ".spectrum-Badge--style-outline.spectrum-Badge--neutral", - ".spectrum-Badge--style-outline.spectrum-Badge--notice", - ".spectrum-Badge--style-outline.spectrum-Badge--positive", - ".spectrum-Badge--style-outline:is(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice)", - ".spectrum-Badge--style-subtle", - ".spectrum-Badge--style-subtle.spectrum-Badge--accent", - ".spectrum-Badge--style-subtle.spectrum-Badge--blue", - ".spectrum-Badge--style-subtle.spectrum-Badge--brown", - ".spectrum-Badge--style-subtle.spectrum-Badge--celery", - ".spectrum-Badge--style-subtle.spectrum-Badge--chartreuse", - ".spectrum-Badge--style-subtle.spectrum-Badge--cinnamon", - ".spectrum-Badge--style-subtle.spectrum-Badge--cyan", - ".spectrum-Badge--style-subtle.spectrum-Badge--fuchsia", - ".spectrum-Badge--style-subtle.spectrum-Badge--gray", - ".spectrum-Badge--style-subtle.spectrum-Badge--green", - ".spectrum-Badge--style-subtle.spectrum-Badge--indigo", - ".spectrum-Badge--style-subtle.spectrum-Badge--informative", - ".spectrum-Badge--style-subtle.spectrum-Badge--magenta", - ".spectrum-Badge--style-subtle.spectrum-Badge--negative", - ".spectrum-Badge--style-subtle.spectrum-Badge--neutral", - ".spectrum-Badge--style-subtle.spectrum-Badge--notice", - ".spectrum-Badge--style-subtle.spectrum-Badge--orange", - ".spectrum-Badge--style-subtle.spectrum-Badge--pink", - ".spectrum-Badge--style-subtle.spectrum-Badge--positive", - ".spectrum-Badge--style-subtle.spectrum-Badge--purple", - ".spectrum-Badge--style-subtle.spectrum-Badge--red", - ".spectrum-Badge--style-subtle.spectrum-Badge--seafoam", - ".spectrum-Badge--style-subtle.spectrum-Badge--silver", - ".spectrum-Badge--style-subtle.spectrum-Badge--turquoise", - ".spectrum-Badge--style-subtle.spectrum-Badge--yellow", - ".spectrum-Badge--turquoise", - ".spectrum-Badge--yellow", + ".spectrum-Badge--subtle", + ".spectrum-Badge--subtle:where(.spectrum-Badge--accent)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--blue)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--brown)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--celery)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--chartreuse)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--cinnamon)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--cyan)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--fuchsia)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--gray)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--green)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--indigo)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--informative)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--magenta)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--negative)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--neutral)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--notice)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--orange)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--pink)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--positive)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--purple)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--red)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--seafoam)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--silver)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--turquoise)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--yellow)", ".spectrum-Badge-icon", ".spectrum-Badge-icon + .spectrum-Badge-label", ".spectrum-Badge-icon--no-label", ".spectrum-Badge-label", ".spectrum-Badge-label:lang(ja)", ".spectrum-Badge-label:lang(ko)", - ".spectrum-Badge-label:lang(zh)" - ], - "modifiers": [ - "--mod-badge-background-color-accent", - "--mod-badge-background-color-blue", - "--mod-badge-background-color-brown", - "--mod-badge-background-color-celery", - "--mod-badge-background-color-chartreuse", - "--mod-badge-background-color-cinnamon", - "--mod-badge-background-color-cyan", - "--mod-badge-background-color-default", - "--mod-badge-background-color-fuchsia", - "--mod-badge-background-color-gray", - "--mod-badge-background-color-green", - "--mod-badge-background-color-indigo", - "--mod-badge-background-color-informative", - "--mod-badge-background-color-magenta", - "--mod-badge-background-color-negative", - "--mod-badge-background-color-notice", - "--mod-badge-background-color-orange", - "--mod-badge-background-color-pink", - "--mod-badge-background-color-positive", - "--mod-badge-background-color-purple", - "--mod-badge-background-color-red", - "--mod-badge-background-color-seafoam", - "--mod-badge-background-color-silver", - "--mod-badge-background-color-turquoise", - "--mod-badge-background-color-yellow", - "--mod-badge-border-color", - "--mod-badge-border-width", - "--mod-badge-corner-radius", - "--mod-badge-font-size", - "--mod-badge-height", - "--mod-badge-icon-only-spacing-horizontal", - "--mod-badge-icon-spacing-horizontal", - "--mod-badge-icon-spacing-vertical-top", - "--mod-badge-icon-text-spacing", - "--mod-badge-label-icon-color", - "--mod-badge-label-spacing-horizontal", - "--mod-badge-label-spacing-vertical-bottom", - "--mod-badge-label-spacing-vertical-top", - "--mod-badge-line-height", - "--mod-badge-line-height-cjk", - "--mod-badge-outline-background-color-default", - "--mod-badge-outline-border-color-accent", - "--mod-badge-outline-border-color-informative", - "--mod-badge-outline-border-color-negative", - "--mod-badge-outline-border-color-neutral", - "--mod-badge-outline-border-color-notice", - "--mod-badge-outline-border-color-positive", - "--mod-badge-outline-label-icon-color", - "--mod-badge-subtle-background-color-accent", - "--mod-badge-subtle-background-color-blue", - "--mod-badge-subtle-background-color-brown", - "--mod-badge-subtle-background-color-celery", - "--mod-badge-subtle-background-color-chartreuse", - "--mod-badge-subtle-background-color-cinnamon", - "--mod-badge-subtle-background-color-cyan", - "--mod-badge-subtle-background-color-default", - "--mod-badge-subtle-background-color-fuchsia", - "--mod-badge-subtle-background-color-gray", - "--mod-badge-subtle-background-color-green", - "--mod-badge-subtle-background-color-indigo", - "--mod-badge-subtle-background-color-informative", - "--mod-badge-subtle-background-color-magenta", - "--mod-badge-subtle-background-color-negative", - "--mod-badge-subtle-background-color-notice", - "--mod-badge-subtle-background-color-orange", - "--mod-badge-subtle-background-color-pink", - "--mod-badge-subtle-background-color-positive", - "--mod-badge-subtle-background-color-purple", - "--mod-badge-subtle-background-color-red", - "--mod-badge-subtle-background-color-seafoam", - "--mod-badge-subtle-background-color-silver", - "--mod-badge-subtle-background-color-turquoise", - "--mod-badge-subtle-background-color-yellow", - "--mod-badge-subtle-label-icon-color", - "--mod-badge-workflow-icon-size" + ".spectrum-Badge-label:lang(zh)", + ".spectrum-Badge:where(.spectrum-Badge--accent)", + ".spectrum-Badge:where(.spectrum-Badge--blue)", + ".spectrum-Badge:where(.spectrum-Badge--brown)", + ".spectrum-Badge:where(.spectrum-Badge--celery)", + ".spectrum-Badge:where(.spectrum-Badge--chartreuse)", + ".spectrum-Badge:where(.spectrum-Badge--cinnamon)", + ".spectrum-Badge:where(.spectrum-Badge--cyan)", + ".spectrum-Badge:where(.spectrum-Badge--fuchsia)", + ".spectrum-Badge:where(.spectrum-Badge--gray)", + ".spectrum-Badge:where(.spectrum-Badge--green)", + ".spectrum-Badge:where(.spectrum-Badge--indigo)", + ".spectrum-Badge:where(.spectrum-Badge--informative)", + ".spectrum-Badge:where(.spectrum-Badge--magenta)", + ".spectrum-Badge:where(.spectrum-Badge--negative)", + ".spectrum-Badge:where(.spectrum-Badge--neutral)", + ".spectrum-Badge:where(.spectrum-Badge--notice)", + ".spectrum-Badge:where(.spectrum-Badge--notice, .spectrum-Badge--orange, .spectrum-Badge--yellow, .spectrum-Badge--chartreuse, .spectrum-Badge--celery)", + ".spectrum-Badge:where(.spectrum-Badge--orange)", + ".spectrum-Badge:where(.spectrum-Badge--pink)", + ".spectrum-Badge:where(.spectrum-Badge--positive)", + ".spectrum-Badge:where(.spectrum-Badge--purple)", + ".spectrum-Badge:where(.spectrum-Badge--red)", + ".spectrum-Badge:where(.spectrum-Badge--seafoam)", + ".spectrum-Badge:where(.spectrum-Badge--silver)", + ".spectrum-Badge:where(.spectrum-Badge--turquoise)", + ".spectrum-Badge:where(.spectrum-Badge--yellow)" ], + "modifiers": [], "component": [ - "--spectrum-badge-background-color-accent", - "--spectrum-badge-background-color-blue", - "--spectrum-badge-background-color-brown", - "--spectrum-badge-background-color-celery", - "--spectrum-badge-background-color-chartreuse", - "--spectrum-badge-background-color-cinnamon", - "--spectrum-badge-background-color-cyan", - "--spectrum-badge-background-color-default", - "--spectrum-badge-background-color-fuchsia", - "--spectrum-badge-background-color-gray", - "--spectrum-badge-background-color-green", - "--spectrum-badge-background-color-indigo", - "--spectrum-badge-background-color-informative", - "--spectrum-badge-background-color-magenta", - "--spectrum-badge-background-color-negative", - "--spectrum-badge-background-color-notice", - "--spectrum-badge-background-color-orange", - "--spectrum-badge-background-color-pink", - "--spectrum-badge-background-color-positive", - "--spectrum-badge-background-color-purple", - "--spectrum-badge-background-color-red", - "--spectrum-badge-background-color-seafoam", - "--spectrum-badge-background-color-silver", - "--spectrum-badge-background-color-turquoise", - "--spectrum-badge-background-color-yellow", - "--spectrum-badge-border-color", - "--spectrum-badge-border-width", "--spectrum-badge-corner-radius", "--spectrum-badge-font-size", - "--spectrum-badge-font-weight", "--spectrum-badge-height", "--spectrum-badge-icon-only-spacing-horizontal", "--spectrum-badge-icon-spacing-horizontal", "--spectrum-badge-icon-spacing-vertical-top", "--spectrum-badge-icon-text-spacing", - "--spectrum-badge-label-icon-color", "--spectrum-badge-label-spacing-horizontal", "--spectrum-badge-label-spacing-vertical-bottom", "--spectrum-badge-label-spacing-vertical-top", - "--spectrum-badge-line-height", - "--spectrum-badge-line-height-cjk", - "--spectrum-badge-outline-background-color", - "--spectrum-badge-outline-border-color-accent", - "--spectrum-badge-outline-border-color-informative", - "--spectrum-badge-outline-border-color-negative", - "--spectrum-badge-outline-border-color-neutral", - "--spectrum-badge-outline-border-color-notice", - "--spectrum-badge-outline-border-color-positive", - "--spectrum-badge-outline-label-icon-color", - "--spectrum-badge-subtle-background-color-accent", - "--spectrum-badge-subtle-background-color-blue", - "--spectrum-badge-subtle-background-color-brown", - "--spectrum-badge-subtle-background-color-celery", - "--spectrum-badge-subtle-background-color-chartreuse", - "--spectrum-badge-subtle-background-color-cinnamon", - "--spectrum-badge-subtle-background-color-cyan", - "--spectrum-badge-subtle-background-color-default", - "--spectrum-badge-subtle-background-color-fuchsia", - "--spectrum-badge-subtle-background-color-gray", - "--spectrum-badge-subtle-background-color-green", - "--spectrum-badge-subtle-background-color-indigo", - "--spectrum-badge-subtle-background-color-informative", - "--spectrum-badge-subtle-background-color-magenta", - "--spectrum-badge-subtle-background-color-negative", - "--spectrum-badge-subtle-background-color-notice", - "--spectrum-badge-subtle-background-color-orange", - "--spectrum-badge-subtle-background-color-pink", - "--spectrum-badge-subtle-background-color-positive", - "--spectrum-badge-subtle-background-color-purple", - "--spectrum-badge-subtle-background-color-red", - "--spectrum-badge-subtle-background-color-seafoam", - "--spectrum-badge-subtle-background-color-silver", - "--spectrum-badge-subtle-background-color-turquoise", - "--spectrum-badge-subtle-background-color-yellow", - "--spectrum-badge-subtle-label-icon-color", "--spectrum-badge-workflow-icon-size" ], "global": [ @@ -339,5 +199,5 @@ "--spectrum-yellow-subtle-background-color-default" ], "passthroughs": [], - "high-contrast": ["--highcontrast-badge-border-color"] + "high-contrast": [] } diff --git a/components/badge/index.css b/components/badge/index.css index 3498a25777f..647593d6906 100644 --- a/components/badge/index.css +++ b/components/badge/index.css @@ -12,123 +12,22 @@ */ .spectrum-Badge { - /* base badge styling for all t-shirt sizes and all themes */ - --spectrum-badge-border-width: var(--mod-badge-border-width, var(--spectrum-border-width-200)); - --spectrum-badge-border-color: transparent; - - /* label text styles for all t-shirt sizes and all themes */ - --spectrum-badge-line-height: var(--spectrum-line-height-100); - --spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); - --spectrum-badge-font-weight: var(--spectrum-medium-font-weight); - - /* text and icon color default white for all t-shirt sizes and all themes */ - --spectrum-badge-label-icon-color: var(--spectrum-white); - - /* semantic background colors for all t-shirt sizes and all themes */ - --spectrum-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - --spectrum-badge-background-color-accent: var(--spectrum-accent-background-color-default); - --spectrum-badge-background-color-informative: var(--spectrum-informative-background-color-default); - --spectrum-badge-background-color-negative: var(--spectrum-negative-background-color-default); - --spectrum-badge-background-color-positive: var(--spectrum-positive-background-color-default); - --spectrum-badge-background-color-notice: var(--spectrum-notice-background-color-default); - - /* non-semantic background colors */ - --spectrum-badge-background-color-gray: var(--spectrum-gray-background-color-default); - --spectrum-badge-background-color-red: var(--spectrum-red-background-color-default); - --spectrum-badge-background-color-orange: var(--spectrum-orange-background-color-default); - --spectrum-badge-background-color-yellow: var(--spectrum-yellow-background-color-default); - --spectrum-badge-background-color-chartreuse: var(--spectrum-chartreuse-background-color-default); - --spectrum-badge-background-color-celery: var(--spectrum-celery-background-color-default); - --spectrum-badge-background-color-green: var(--spectrum-green-background-color-default); - --spectrum-badge-background-color-seafoam: var(--spectrum-seafoam-background-color-default); - --spectrum-badge-background-color-cyan: var(--spectrum-cyan-background-color-default); - --spectrum-badge-background-color-blue: var(--spectrum-blue-background-color-default); - --spectrum-badge-background-color-indigo: var(--spectrum-indigo-background-color-default); - --spectrum-badge-background-color-purple: var(--spectrum-purple-background-color-default); - --spectrum-badge-background-color-fuchsia: var(--spectrum-fuchsia-background-color-default); - --spectrum-badge-background-color-magenta: var(--spectrum-magenta-background-color-default); - --spectrum-badge-background-color-pink: var(--spectrum-pink-background-color-default); - --spectrum-badge-background-color-turquoise: var(--spectrum-turquoise-background-color-default); - --spectrum-badge-background-color-brown: var(--spectrum-brown-background-color-default); - --spectrum-badge-background-color-cinnamon: var(--spectrum-cinnamon-background-color-default); - --spectrum-badge-background-color-silver: var(--spectrum-silver-background-color-default); - - /** - Style = subtle - */ - - --spectrum-badge-subtle-label-icon-color: var(--spectrum-gray-1000); - - /* semantic background colors */ - --spectrum-badge-subtle-background-color-default: var(--spectrum-neutral-subtle-background-color-default); - --spectrum-badge-subtle-background-color-accent: var(--spectrum-accent-subtle-background-color-default); - --spectrum-badge-subtle-background-color-informative: var(--spectrum-informative-subtle-background-color-default); - --spectrum-badge-subtle-background-color-negative: var(--spectrum-negative-subtle-background-color-default); - --spectrum-badge-subtle-background-color-positive: var(--spectrum-positive-subtle-background-color-default); - --spectrum-badge-subtle-background-color-notice: var(--spectrum-notice-subtle-background-color-default); - - /* non-semantic background colors */ - --spectrum-badge-subtle-background-color-gray: var(--spectrum-gray-subtle-background-color-default); - --spectrum-badge-subtle-background-color-red: var(--spectrum-red-subtle-background-color-default); - --spectrum-badge-subtle-background-color-orange: var(--spectrum-orange-subtle-background-color-default); - --spectrum-badge-subtle-background-color-yellow: var(--spectrum-yellow-subtle-background-color-default); - --spectrum-badge-subtle-background-color-chartreuse: var(--spectrum-chartreuse-subtle-background-color-default); - --spectrum-badge-subtle-background-color-celery: var(--spectrum-celery-subtle-background-color-default); - --spectrum-badge-subtle-background-color-green: var(--spectrum-green-subtle-background-color-default); - --spectrum-badge-subtle-background-color-seafoam: var(--spectrum-seafoam-subtle-background-color-default); - --spectrum-badge-subtle-background-color-cyan: var(--spectrum-cyan-subtle-background-color-default); - --spectrum-badge-subtle-background-color-blue: var(--spectrum-blue-subtle-background-color-default); - --spectrum-badge-subtle-background-color-indigo: var(--spectrum-indigo-subtle-background-color-default); - --spectrum-badge-subtle-background-color-purple: var(--spectrum-purple-subtle-background-color-default); - --spectrum-badge-subtle-background-color-fuchsia: var(--spectrum-fuchsia-subtle-background-color-default); - --spectrum-badge-subtle-background-color-magenta: var(--spectrum-magenta-subtle-background-color-default); - --spectrum-badge-subtle-background-color-pink: var(--spectrum-pink-subtle-background-color-default); - --spectrum-badge-subtle-background-color-turquoise: var(--spectrum-turquoise-subtle-background-color-default); - --spectrum-badge-subtle-background-color-brown: var(--spectrum-brown-subtle-background-color-default); - --spectrum-badge-subtle-background-color-cinnamon: var(--spectrum-cinnamon-subtle-background-color-default); - --spectrum-badge-subtle-background-color-silver: var(--spectrum-silver-subtle-background-color-default); - - /** - Style = outline - Only valid for semantic colors - */ - --spectrum-badge-outline-label-icon-color: var(--spectrum-gray-1000); - --spectrum-badge-outline-background-color: var(--spectrum-background-layer-2-color); - --spectrum-badge-outline-border-color-neutral: var(--spectrum-neutral-visual-color); - --spectrum-badge-outline-border-color-accent: var(--spectrum-accent-visual-color); - --spectrum-badge-outline-border-color-informative: var(--spectrum-informative-visual-color); - --spectrum-badge-outline-border-color-negative: var(--spectrum-negative-visual-color); - --spectrum-badge-outline-border-color-notice: var(--spectrum-notice-visual-color); - --spectrum-badge-outline-border-color-positive: var(--spectrum-positive-visual-color); - /*** DEFAULT STYLE fallbacks if no t-shirt size - uses Medium t-shirt styles ***/ - --spectrum-badge-corner-radius: var(--spectrum-corner-radius-medium-size-medium); - --spectrum-badge-height: var(--spectrum-component-height-100); + /* label */ --spectrum-badge-font-size: var(--spectrum-font-size-100); - --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-100); --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-100); --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-100); + /* icon */ --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-100); --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100); --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-100); - - --highcontrast-badge-border-color: CanvasText; -} - -/* text and icon color is black for these background colors */ -.spectrum-Badge--notice, -.spectrum-Badge--orange, -.spectrum-Badge--yellow, -.spectrum-Badge--chartreuse, -.spectrum-Badge--celery { - --spectrum-badge-label-icon-color: var(--spectrum-black); } .spectrum-Badge--sizeS { @@ -185,275 +84,270 @@ --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-300); } -/* windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Badge { - border-color: var(--highcontrast-badge-border-color); - } -} - .spectrum-Badge { - min-block-size: var(--mod-badge-height, var(--spectrum-badge-height)); + box-sizing: border-box; + min-block-size: var(--spectrum-badge-height); inline-size: auto; - display: inline-flex; vertical-align: middle; position: relative; - cursor: default; + border: var(--spectrum-border-width-200) solid transparent; + border-radius: var(--spectrum-badge-corner-radius); - /* Due to calc() for spacing, --mod is included in base border-width token */ - border: var(--spectrum-badge-border-width) solid var(--mod-badge-border-color, var(--spectrum-badge-border-color)); - border-radius: var(--mod-badge-corner-radius, var(--spectrum-badge-corner-radius)); - - background: var(--mod-badge-background-color-default, var(--spectrum-badge-background-color-default)); - color: var(--mod-badge-label-icon-color, var(--spectrum-badge-label-icon-color)); + background: var(--spectrum-neutral-subdued-background-color-default); + color: var(--spectrum-white); /* Show background color under transparent border to correct visual height */ background-origin: border-box; /* Prevent stretch height behavior next to other flex/grid children */ align-self: start; -} -/* background color variants */ -.spectrum-Badge--neutral { - background: var(--mod-badge-background-color-default, var(--spectrum-badge-background-color-default)); -} + /* text and icon color is black for these background colors */ + &:where(.spectrum-Badge--notice, .spectrum-Badge--orange, .spectrum-Badge--yellow, .spectrum-Badge--chartreuse, .spectrum-Badge--celery) { + color: var(--spectrum-black); + } -.spectrum-Badge--accent { - background: var(--mod-badge-background-color-accent, var(--spectrum-badge-background-color-accent)); -} + /* background color variants */ + &:where(.spectrum-Badge--neutral) { + background: var(--spectrum-neutral-subdued-background-color-default); + } -.spectrum-Badge--informative { - background: var(--mod-badge-background-color-informative, var(--spectrum-badge-background-color-informative)); -} + &:where(.spectrum-Badge--accent) { + background: var(--spectrum-accent-background-color-default); + } -.spectrum-Badge--negative { - background: var(--mod-badge-background-color-negative, var(--spectrum-badge-background-color-negative)); -} + &:where(.spectrum-Badge--informative) { + background: var(--spectrum-informative-background-color-default); + } -.spectrum-Badge--positive { - background: var(--mod-badge-background-color-positive, var(--spectrum-badge-background-color-positive)); -} + &:where(.spectrum-Badge--negative) { + background: var(--spectrum-negative-background-color-default); + } -.spectrum-Badge--notice { - background: var(--mod-badge-background-color-notice, var(--spectrum-badge-background-color-notice)); -} + &:where(.spectrum-Badge--positive) { + background: var(--spectrum-positive-background-color-default); + } -/* non-semantic colors */ -.spectrum-Badge--gray { - background: var(--mod-badge-background-color-gray, var(--spectrum-badge-background-color-gray)); -} + &:where(.spectrum-Badge--notice) { + background: var(--spectrum-notice-background-color-default); + } -.spectrum-Badge--red { - background: var(--mod-badge-background-color-red, var(--spectrum-badge-background-color-red)); -} + /* non-semantic colors */ + &:where(.spectrum-Badge--gray) { + background: var(--spectrum-gray-background-color-default); + } -.spectrum-Badge--orange { - background: var(--mod-badge-background-color-orange, var(--spectrum-badge-background-color-orange)); -} + &:where(.spectrum-Badge--red) { + background: var(--spectrum-red-background-color-default); + } -.spectrum-Badge--yellow { - background: var(--mod-badge-background-color-yellow, var(--spectrum-badge-background-color-yellow)); -} + &:where(.spectrum-Badge--orange) { + background: var(--spectrum-orange-background-color-default); + } -.spectrum-Badge--chartreuse { - background: var(--mod-badge-background-color-chartreuse, var(--spectrum-badge-background-color-chartreuse)); -} + &:where(.spectrum-Badge--yellow) { + background: var(--spectrum-yellow-background-color-default); + } -.spectrum-Badge--celery { - background: var(--mod-badge-background-color-celery, var(--spectrum-badge-background-color-celery)); -} + &:where(.spectrum-Badge--chartreuse) { + background: var(--spectrum-chartreuse-background-color-default); + } -.spectrum-Badge--green { - background: var(--mod-badge-background-color-green, var(--spectrum-badge-background-color-green)); -} + &:where(.spectrum-Badge--celery) { + background: var(--spectrum-celery-background-color-default); + } -.spectrum-Badge--seafoam { - background: var(--mod-badge-background-color-seafoam, var(--spectrum-badge-background-color-seafoam)); -} + &:where(.spectrum-Badge--green) { + background: var(--spectrum-green-background-color-default); + } -.spectrum-Badge--cyan { - background: var(--mod-badge-background-color-cyan, var(--spectrum-badge-background-color-cyan)); -} + &:where(.spectrum-Badge--seafoam) { + background: var(--spectrum-seafoam-background-color-default); + } -.spectrum-Badge--blue { - background: var(--mod-badge-background-color-blue, var(--spectrum-badge-background-color-blue)); -} + &:where(.spectrum-Badge--cyan) { + background: var(--spectrum-cyan-background-color-default); + } -.spectrum-Badge--indigo { - background: var(--mod-badge-background-color-indigo, var(--spectrum-badge-background-color-indigo)); -} + &:where(.spectrum-Badge--blue) { + background: var(--spectrum-blue-background-color-default); + } -.spectrum-Badge--purple { - background: var(--mod-badge-background-color-purple, var(--spectrum-badge-background-color-purple)); -} + &:where(.spectrum-Badge--indigo) { + background: var(--spectrum-indigo-background-color-default); + } -.spectrum-Badge--fuchsia { - background: var(--mod-badge-background-color-fuchsia, var(--spectrum-badge-background-color-fuchsia)); -} + &:where(.spectrum-Badge--purple) { + background: var(--spectrum-purple-background-color-default); + } -.spectrum-Badge--magenta { - background: var(--mod-badge-background-color-magenta, var(--spectrum-badge-background-color-magenta)); -} + &:where(.spectrum-Badge--fuchsia) { + background: var(--spectrum-fuchsia-background-color-default); + } -.spectrum-Badge--pink { - background: var(--mod-badge-background-color-pink, var(--spectrum-badge-background-color-pink)); -} + &:where(.spectrum-Badge--magenta) { + background: var(--spectrum-magenta-background-color-default); + } -.spectrum-Badge--turquoise { - background: var(--mod-badge-background-color-turquoise, var(--spectrum-badge-background-color-turquoise)); -} + &:where(.spectrum-Badge--pink) { + background: var(--spectrum-pink-background-color-default); + } -.spectrum-Badge--brown { - background: var(--mod-badge-background-color-brown, var(--spectrum-badge-background-color-brown)); -} + &:where(.spectrum-Badge--turquoise) { + background: var(--spectrum-turquoise-background-color-default); + } -.spectrum-Badge--cinnamon { - background: var(--mod-badge-background-color-cinnamon, var(--spectrum-badge-background-color-cinnamon)); -} + &:where(.spectrum-Badge--brown) { + background: var(--spectrum-brown-background-color-default); + } -.spectrum-Badge--silver { - background: var(--mod-badge-background-color-silver, var(--spectrum-badge-background-color-silver)); + &:where(.spectrum-Badge--cinnamon) { + background: var(--spectrum-cinnamon-background-color-default); + } + + &:where(.spectrum-Badge--silver) { + background: var(--spectrum-silver-background-color-default); + } } /* Style = subtle */ -.spectrum-Badge--style-subtle { - color: var(--mod-badge-subtle-label-icon-color, var(--spectrum-badge-subtle-label-icon-color)); +.spectrum-Badge--subtle { + color: var(--spectrum-gray-1000); /* background color variants */ - &.spectrum-Badge--neutral { - background: var(--mod-badge-subtle-background-color-default, var(--spectrum-badge-subtle-background-color-default)); + &:where(.spectrum-Badge--neutral) { + background: var(--spectrum-neutral-subtle-background-color-default); } - &.spectrum-Badge--accent { - background: var(--mod-badge-subtle-background-color-accent, var(--spectrum-badge-subtle-background-color-accent)); + &:where(.spectrum-Badge--accent) { + background: var(--spectrum-accent-subtle-background-color-default); } - &.spectrum-Badge--informative { - background: var(--mod-badge-subtle-background-color-informative, var(--spectrum-badge-subtle-background-color-informative)); + &:where(.spectrum-Badge--informative) { + background: var(--spectrum-informative-subtle-background-color-default); } - &.spectrum-Badge--negative { - background: var(--mod-badge-subtle-background-color-negative, var(--spectrum-badge-subtle-background-color-negative)); + &:where(.spectrum-Badge--negative) { + background: var(--spectrum-negative-subtle-background-color-default); } - &.spectrum-Badge--positive { - background: var(--mod-badge-subtle-background-color-positive, var(--spectrum-badge-subtle-background-color-positive)); + &:where(.spectrum-Badge--positive) { + background: var(--spectrum-positive-subtle-background-color-default); } - &.spectrum-Badge--notice { - background: var(--mod-badge-subtle-background-color-notice, var(--spectrum-badge-subtle-background-color-notice)); + &:where(.spectrum-Badge--notice) { + background: var(--spectrum-notice-subtle-background-color-default); } /* non-semantic colors */ - &.spectrum-Badge--gray { - background: var(--mod-badge-subtle-background-color-gray, var(--spectrum-badge-subtle-background-color-gray)); + &:where(.spectrum-Badge--gray) { + background: var(--spectrum-gray-subtle-background-color-default); } - &.spectrum-Badge--red { - background: var(--mod-badge-subtle-background-color-red, var(--spectrum-badge-subtle-background-color-red)); + &:where(.spectrum-Badge--red) { + background: var(--spectrum-red-subtle-background-color-default); } - &.spectrum-Badge--orange { - background: var(--mod-badge-subtle-background-color-orange, var(--spectrum-badge-subtle-background-color-orange)); + &:where(.spectrum-Badge--orange) { + background: var(--spectrum-orange-subtle-background-color-default); } - &.spectrum-Badge--yellow { - background: var(--mod-badge-subtle-background-color-yellow, var(--spectrum-badge-subtle-background-color-yellow)); + &:where(.spectrum-Badge--yellow) { + background: var(--spectrum-yellow-subtle-background-color-default); } - &.spectrum-Badge--chartreuse { - background: var(--mod-badge-subtle-background-color-chartreuse, var(--spectrum-badge-subtle-background-color-chartreuse)); + &:where(.spectrum-Badge--chartreuse) { + background: var(--spectrum-chartreuse-subtle-background-color-default); } - &.spectrum-Badge--celery { - background: var(--mod-badge-subtle-background-color-celery, var(--spectrum-badge-subtle-background-color-celery)); + &:where(.spectrum-Badge--celery) { + background: var(--spectrum-celery-subtle-background-color-default); } - &.spectrum-Badge--green { - background: var(--mod-badge-subtle-background-color-green, var(--spectrum-badge-subtle-background-color-green)); + &:where(.spectrum-Badge--green) { + background: var(--spectrum-green-subtle-background-color-default); } - &.spectrum-Badge--seafoam { - background: var(--mod-badge-subtle-background-color-seafoam, var(--spectrum-badge-subtle-background-color-seafoam)); + &:where(.spectrum-Badge--seafoam) { + background: var(--spectrum-seafoam-subtle-background-color-default); } - &.spectrum-Badge--cyan { - background: var(--mod-badge-subtle-background-color-cyan, var(--spectrum-badge-subtle-background-color-cyan)); + &:where(.spectrum-Badge--cyan) { + background: var(--spectrum-cyan-subtle-background-color-default); } - &.spectrum-Badge--blue { - background: var(--mod-badge-subtle-background-color-blue, var(--spectrum-badge-subtle-background-color-blue)); + &:where(.spectrum-Badge--blue) { + background: var(--spectrum-blue-subtle-background-color-default); } - &.spectrum-Badge--indigo { - background: var(--mod-badge-subtle-background-color-indigo, var(--spectrum-badge-subtle-background-color-indigo)); + &:where(.spectrum-Badge--indigo) { + background: var(--spectrum-indigo-subtle-background-color-default); } - &.spectrum-Badge--purple { - background: var(--mod-badge-subtle-background-color-purple, var(--spectrum-badge-subtle-background-color-purple)); + &:where(.spectrum-Badge--purple) { + background: var(--spectrum-purple-subtle-background-color-default); } - &.spectrum-Badge--fuchsia { - background: var(--mod-badge-subtle-background-color-fuchsia, var(--spectrum-badge-subtle-background-color-fuchsia)); + &:where(.spectrum-Badge--fuchsia) { + background: var(--spectrum-fuchsia-subtle-background-color-default); } - &.spectrum-Badge--magenta { - background: var(--mod-badge-subtle-background-color-magenta, var(--spectrum-badge-subtle-background-color-magenta)); + &:where(.spectrum-Badge--magenta) { + background: var(--spectrum-magenta-subtle-background-color-default); } - &.spectrum-Badge--pink { - background: var(--mod-badge-subtle-background-color-pink, var(--spectrum-badge-subtle-background-color-pink)); + &:where(.spectrum-Badge--pink) { + background: var(--spectrum-pink-subtle-background-color-default); } - &.spectrum-Badge--turquoise { - background: var(--mod-badge-subtle-background-color-turquoise, var(--spectrum-badge-subtle-background-color-turquoise)); + &:where(.spectrum-Badge--turquoise) { + background: var(--spectrum-turquoise-subtle-background-color-default); } - &.spectrum-Badge--brown { - background: var(--mod-badge-subtle-background-color-brown, var(--spectrum-badge-subtle-background-color-brown)); + &:where(.spectrum-Badge--brown) { + background: var(--spectrum-brown-subtle-background-color-default); } - &.spectrum-Badge--cinnamon { - background: var(--mod-badge-subtle-background-color-cinnamon, var(--spectrum-badge-subtle-background-color-cinnamon)); + &:where(.spectrum-Badge--cinnamon) { + background: var(--spectrum-cinnamon-subtle-background-color-default); } - &.spectrum-Badge--silver { - background: var(--mod-badge-subtle-background-color-silver, var(--spectrum-badge-subtle-background-color-silver)); + &:where(.spectrum-Badge--silver) { + background: var(--spectrum-silver-subtle-background-color-default); } } /* Style = outline - only valid for semantic colors */ -.spectrum-Badge--style-outline { - &:is(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice) { - background: var(--mod-badge-outline-background-color-default, var(--spectrum-badge-outline-background-color)); - color: var(--mod-badge-outline-label-icon-color, var(--spectrum-badge-outline-label-icon-color)); +.spectrum-Badge--outline { + &:where(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice) { + background: var(--spectrum-background-layer-2-color); + color: var(--spectrum-gray-1000); } - &.spectrum-Badge--neutral { - border-color: var(--mod-badge-outline-border-color-neutral, var(--spectrum-badge-outline-border-color-neutral)); + &:where(.spectrum-Badge--neutral) { + border-color: var(--spectrum-neutral-visual-color); } - &.spectrum-Badge--accent { - border-color: var(--mod-badge-outline-border-color-accent, var(--spectrum-badge-outline-border-color-accent)); + &:where(.spectrum-Badge--accent) { + border-color: var(--spectrum-accent-visual-color); } - &.spectrum-Badge--informative { - border-color: var(--mod-badge-outline-border-color-informative, var(--spectrum-badge-outline-border-color-informative)); + &:where(.spectrum-Badge--informative) { + border-color: var(--spectrum-informative-visual-color); } - &.spectrum-Badge--negative { - border-color: var(--mod-badge-outline-border-color-negative, var(--spectrum-badge-outline-border-color-negative)); + &:where(.spectrum-Badge--negative) { + border-color: var(--spectrum-negative-visual-color); } - &.spectrum-Badge--positive { - border-color: var(--mod-badge-outline-border-color-positive, var(--spectrum-badge-outline-border-color-positive)); + &:where(.spectrum-Badge--positive) { + border-color: var(--spectrum-positive-visual-color); } - &.spectrum-Badge--notice { - border-color: var(--mod-badge-outline-border-color-notice, var(--spectrum-badge-outline-border-color-notice)); + &:where(.spectrum-Badge--notice) { + border-color: var(--spectrum-notice-visual-color); } } @@ -480,20 +374,21 @@ /* label */ .spectrum-Badge-label { - font-size: var(--mod-badge-font-size, var(--spectrum-badge-font-size)); - font-weight: var(--spectrum-badge-font-weight); - line-height: var(--mod-badge-line-height, var(--spectrum-badge-line-height)); + box-sizing: border-box; + font-size: var(--spectrum-badge-font-size); + font-weight: var(--spectrum-medium-font-weight); + line-height: var(--spectrum-line-height-100); - padding-inline-end: calc(var(--mod-badge-label-spacing-horizontal, var(--spectrum-badge-label-spacing-horizontal)) - var(--spectrum-badge-border-width)); - padding-inline-start: var(--mod-badge-label-spacing-horizontal, var(--spectrum-badge-label-spacing-horizontal)); - padding-block-start: calc(var(--mod-badge-label-spacing-vertical-top, var(--spectrum-badge-label-spacing-vertical-top)) - var(--spectrum-badge-border-width)); - padding-block-end: calc(var(--mod-badge-label-spacing-vertical-bottom, var(--spectrum-badge-label-spacing-vertical-bottom)) - var(--spectrum-badge-border-width)); + padding-inline-end: calc(var(--spectrum-badge-label-spacing-horizontal) - var(--spectrum-border-width-200)); + padding-inline-start: var(--spectrum-badge-label-spacing-horizontal); + padding-block-start: calc(var(--spectrum-badge-label-spacing-vertical-top) - var(--spectrum-border-width-200)); + padding-block-end: calc(var(--spectrum-badge-label-spacing-vertical-bottom) - var(--spectrum-border-width-200)); /* cjk language support */ &:lang(ja), &:lang(zh), &:lang(ko) { - line-height: var(--mod-badge-line-height-cjk, var(--spectrum-badge-line-height-cjk)); + line-height: var(--spectrum-cjk-line-height-100); } /* remove left padding from label if preceded by an icon */ @@ -504,28 +399,21 @@ /* optional icon */ .spectrum-Badge-icon { - block-size: var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size)); - inline-size: var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size)); + box-sizing: border-box; + block-size: var(--spectrum-badge-workflow-icon-size); + inline-size: var(--spectrum-badge-workflow-icon-size); /* ensures icon does not shrink when badge width is limited */ - flex: 0 0 var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size)); + flex: 0 0 var(--spectrum-badge-workflow-icon-size); - margin-inline-start: calc(var(--mod-badge-icon-spacing-horizontal, var(--spectrum-badge-icon-spacing-horizontal)) - var(--spectrum-badge-border-width)); + margin-inline-start: calc(var(--spectrum-badge-icon-spacing-horizontal) - var(--spectrum-border-width-200)); /* icon with label has reduced padding between icon and text */ - margin-inline-end: var(--mod-badge-icon-text-spacing, var(--spectrum-badge-icon-text-spacing)); - margin-block-start: calc(var(--mod-badge-icon-spacing-vertical-top, var(--spectrum-badge-icon-spacing-vertical-top)) - var(--spectrum-badge-border-width)); - margin-block-end: calc(var(--mod-badge-icon-spacing-vertical-top, var(--spectrum-badge-icon-spacing-vertical-top)) - var(--spectrum-badge-border-width)); + margin-inline-end: var(--spectrum-badge-icon-text-spacing); + margin-block: calc(var(--spectrum-badge-icon-spacing-vertical-top) - var(--spectrum-border-width-200)); } .spectrum-Badge-icon--no-label { /* icon without label has identical padding left and right */ - margin-inline-start: calc(var(--mod-badge-icon-only-spacing-horizontal, var(--spectrum-badge-icon-only-spacing-horizontal)) - var(--spectrum-badge-border-width)); - margin-inline-end: calc(var(--mod-badge-icon-only-spacing-horizontal, var(--spectrum-badge-icon-only-spacing-horizontal)) - var(--spectrum-badge-border-width)); -} - -.spectrum-Badge, -.spectrum-Badge-label, -.spectrum-Badge-icon { - box-sizing: border-box; + margin-inline: calc(var(--spectrum-badge-icon-only-spacing-horizontal) - var(--spectrum-border-width-200)); } diff --git a/components/badge/stories/badge.stories.js b/components/badge/stories/badge.stories.js index e5027efded1..104a0d6e1ca 100644 --- a/components/badge/stories/badge.stories.js +++ b/components/badge/stories/badge.stories.js @@ -40,7 +40,7 @@ export default { type: { summary: "string" }, category: "Component", }, - options: ["default", "subtle", "outline"], + options: ["subtle", "outline"], control: "select", }, variant: { @@ -61,17 +61,15 @@ export default { type: { summary: "string" }, category: "Advanced", }, - options: ["none", "fixed-inline-start", "fixed-inline-end", "fixed-block-start", "fixed-block-end"], + options: ["fixed-inline-start", "fixed-inline-end", "fixed-block-start", "fixed-block-end"], control: "select", }, }, args: { rootClass: "spectrum-Badge", size: "m", - style: "default", variant: "neutral", - iconSet: "workflow", - fixed: "none" + iconSet: "workflow" }, parameters: { design: { diff --git a/components/badge/stories/template.js b/components/badge/stories/template.js index 128d3eabe4f..9b2a21bd4be 100644 --- a/components/badge/stories/template.js +++ b/components/badge/stories/template.js @@ -15,7 +15,7 @@ export const Template = ({ iconName, iconSet = "workflow", variant = "neutral", - style = "default", + style, fixed, customStyles = {}, customClasses = [], @@ -28,8 +28,8 @@ export const Template = ({ [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", [`${rootClass}--${variant}`]: typeof variant !== "undefined", - [`${rootClass}--style-${style}`]: style !== "default", - [`${rootClass}--${fixed}`]: typeof fixed !== "undefined" && fixed !== "none", + [`${rootClass}--${style}`]: typeof style !== "undefined", + [`${rootClass}--${fixed}`]: typeof fixed !== "undefined", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} id=${ifDefined(id)}