fix(badge,styles): bump to latest release

Author: castastrophe

.changeset/cute-peas-chew.md

@@ -0,0 +1,6 @@
+---
+'@spectrum-web-components/badge': patch
+'@spectrum-web-components/styles': patch
+---
+
+Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.

packages/badge/src/badge-overrides.css

@@ -11,260 +11,3 @@ governing permissions and limitations under the License.
 */
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
-:host {
-    --spectrum-badge-corner-radius: var(--system-badge-corner-radius);
-    --spectrum-badge-line-height: var(--system-badge-line-height);
-    --spectrum-badge-line-height-cjk: var(--system-badge-line-height-cjk);
-    --spectrum-badge-label-icon-color: var(--system-badge-label-icon-color);
-    --spectrum-badge-background-color-default: var(
-        --system-badge-background-color-default
-    );
-    --spectrum-badge-background-color-accent: var(
-        --system-badge-background-color-accent
-    );
-    --spectrum-badge-background-color-informative: var(
-        --system-badge-background-color-informative
-    );
-    --spectrum-badge-background-color-negative: var(
-        --system-badge-background-color-negative
-    );
-    --spectrum-badge-background-color-positive: var(
-        --system-badge-background-color-positive
-    );
-    --spectrum-badge-background-color-notice: var(
-        --system-badge-background-color-notice
-    );
-    --spectrum-badge-background-color-gray: var(
-        --system-badge-background-color-gray
-    );
-    --spectrum-badge-background-color-red: var(
-        --system-badge-background-color-red
-    );
-    --spectrum-badge-background-color-orange: var(
-        --system-badge-background-color-orange
-    );
-    --spectrum-badge-background-color-yellow: var(
-        --system-badge-background-color-yellow
-    );
-    --spectrum-badge-background-color-chartreuse: var(
-        --system-badge-background-color-chartreuse
-    );
-    --spectrum-badge-background-color-celery: var(
-        --system-badge-background-color-celery
-    );
-    --spectrum-badge-background-color-green: var(
-        --system-badge-background-color-green
-    );
-    --spectrum-badge-background-color-seafoam: var(
-        --system-badge-background-color-seafoam
-    );
-    --spectrum-badge-background-color-cyan: var(
-        --system-badge-background-color-cyan
-    );
-    --spectrum-badge-background-color-blue: var(
-        --system-badge-background-color-blue
-    );
-    --spectrum-badge-background-color-indigo: var(
-        --system-badge-background-color-indigo
-    );
-    --spectrum-badge-background-color-purple: var(
-        --system-badge-background-color-purple
-    );
-    --spectrum-badge-background-color-fuchsia: var(
-        --system-badge-background-color-fuchsia
-    );
-    --spectrum-badge-background-color-magenta: var(
-        --system-badge-background-color-magenta
-    );
-    --spectrum-badge-height: var(--system-badge-height);
-    --spectrum-badge-font-size: var(--system-badge-font-size);
-    --spectrum-badge-label-spacing-vertical-top: var(
-        --system-badge-label-spacing-vertical-top
-    );
-    --spectrum-badge-label-spacing-vertical-bottom: var(
-        --system-badge-label-spacing-vertical-bottom
-    );
-    --spectrum-badge-label-spacing-horizontal: var(
-        --system-badge-label-spacing-horizontal
-    );
-    --spectrum-badge-workflow-icon-size: var(--system-badge-workflow-icon-size);
-    --spectrum-badge-icon-text-spacing: var(--system-badge-icon-text-spacing);
-    --spectrum-badge-icon-spacing-horizontal: var(
-        --system-badge-icon-spacing-horizontal
-    );
-    --spectrum-badge-icon-spacing-vertical-top: var(
-        --system-badge-icon-spacing-vertical-top
-    );
-    --spectrum-badge-icon-only-spacing-horizontal: var(
-        --system-badge-icon-only-spacing-horizontal
-    );
-}
-
-:host([variant='orange']) {
-    --spectrum-badge-label-icon-color: var(
-        --system-badge-orange-label-icon-color
-    );
-}
-
-:host([variant='yellow']) {
-    --spectrum-badge-label-icon-color: var(
-        --system-badge-yellow-label-icon-color
-    );
-}
-
-:host([variant='chartreuse']) {
-    --spectrum-badge-label-icon-color: var(
-        --system-badge-chartreuse-label-icon-color
-    );
-}
-
-:host([variant='celery']) {
-    --spectrum-badge-label-icon-color: var(
-        --system-badge-celery-label-icon-color
-    );
-}
-
-:host([variant='gray']) {
-    --spectrum-badge-label-icon-color: var(
-        --system-badge-gray-label-icon-color
-    );
-}
-
-:host([variant='red']) {
-    --spectrum-badge-label-icon-color: var(--system-badge-red-label-icon-color);
-}
-
-:host([variant='green']) {
-    --spectrum-badge-label-icon-color: var(
-        --system-badge-green-label-icon-color
-    );
-}
-
-:host([variant='seafoam']) {
-    --spectrum-badge-label-icon-color: var(
-        --system-badge-seafoam-label-icon-color
-    );
-}
-
-:host([variant='cyan']) {
-    --spectrum-badge-label-icon-color: var(
-        --system-badge-cyan-label-icon-color
-    );
-}
-
-:host([variant='blue']) {
-    --spectrum-badge-label-icon-color: var(
-        --system-badge-blue-label-icon-color
-    );
-}
-
-:host([variant='indigo']) {
-    --spectrum-badge-label-icon-color: var(
-        --system-badge-indigo-label-icon-color
-    );
-}
-
-:host([variant='purple']) {
-    --spectrum-badge-label-icon-color: var(
-        --system-badge-purple-label-icon-color
-    );
-}
-
-:host([variant='fuchsia']) {
-    --spectrum-badge-label-icon-color: var(
-        --system-badge-fuchsia-label-icon-color
-    );
-}
-
-:host([variant='magenta']) {
-    --spectrum-badge-label-icon-color: var(
-        --system-badge-magenta-label-icon-color
-    );
-}
-
-:host([size='s']) {
-    --spectrum-badge-height: var(--system-badge-size-s-height);
-    --spectrum-badge-font-size: var(--system-badge-size-s-font-size);
-    --spectrum-badge-label-spacing-vertical-top: var(
-        --system-badge-size-s-label-spacing-vertical-top
-    );
-    --spectrum-badge-label-spacing-vertical-bottom: var(
-        --system-badge-size-s-label-spacing-vertical-bottom
-    );
-    --spectrum-badge-label-spacing-horizontal: var(
-        --system-badge-size-s-label-spacing-horizontal
-    );
-    --spectrum-badge-workflow-icon-size: var(
-        --system-badge-size-s-workflow-icon-size
-    );
-    --spectrum-badge-icon-text-spacing: var(
-        --system-badge-size-s-icon-text-spacing
-    );
-    --spectrum-badge-icon-spacing-horizontal: var(
-        --system-badge-size-s-icon-spacing-horizontal
-    );
-    --spectrum-badge-icon-spacing-vertical-top: var(
-        --system-badge-size-s-icon-spacing-vertical-top
-    );
-    --spectrum-badge-icon-only-spacing-horizontal: var(
-        --system-badge-size-s-icon-only-spacing-horizontal
-    );
-}
-
-:host([size='l']) {
-    --spectrum-badge-height: var(--system-badge-size-l-height);
-    --spectrum-badge-font-size: var(--system-badge-size-l-font-size);
-    --spectrum-badge-label-spacing-vertical-top: var(
-        --system-badge-size-l-label-spacing-vertical-top
-    );
-    --spectrum-badge-label-spacing-vertical-bottom: var(
-        --system-badge-size-l-label-spacing-vertical-bottom
-    );
-    --spectrum-badge-label-spacing-horizontal: var(
-        --system-badge-size-l-label-spacing-horizontal
-    );
-    --spectrum-badge-workflow-icon-size: var(
-        --system-badge-size-l-workflow-icon-size
-    );
-    --spectrum-badge-icon-text-spacing: var(
-        --system-badge-size-l-icon-text-spacing
-    );
-    --spectrum-badge-icon-spacing-horizontal: var(
-        --system-badge-size-l-icon-spacing-horizontal
-    );
-    --spectrum-badge-icon-spacing-vertical-top: var(
-        --system-badge-size-l-icon-spacing-vertical-top
-    );
-    --spectrum-badge-icon-only-spacing-horizontal: var(
-        --system-badge-size-l-icon-only-spacing-horizontal
-    );
-}
-
-:host([size='xl']) {
-    --spectrum-badge-height: var(--system-badge-size-xl-height);
-    --spectrum-badge-font-size: var(--system-badge-size-xl-font-size);
-    --spectrum-badge-label-spacing-vertical-top: var(
-        --system-badge-size-xl-label-spacing-vertical-top
-    );
-    --spectrum-badge-label-spacing-vertical-bottom: var(
-        --system-badge-size-xl-label-spacing-vertical-bottom
-    );
-    --spectrum-badge-label-spacing-horizontal: var(
-        --system-badge-size-xl-label-spacing-horizontal
-    );
-    --spectrum-badge-workflow-icon-size: var(
-        --system-badge-size-xl-workflow-icon-size
-    );
-    --spectrum-badge-icon-text-spacing: var(
-        --system-badge-size-xl-icon-text-spacing
-    );
-    --spectrum-badge-icon-spacing-horizontal: var(
-        --system-badge-size-xl-icon-spacing-horizontal
-    );
-    --spectrum-badge-icon-spacing-vertical-top: var(
-        --system-badge-size-xl-icon-spacing-vertical-top
-    );
-    --spectrum-badge-icon-only-spacing-horizontal: var(
-        --system-badge-size-xl-icon-only-spacing-horizontal
-    );
-}

packages/badge/src/badge.css

@@ -11,7 +11,6 @@ governing permissions and limitations under the License.
 */
 
 @import url('./spectrum-badge.css');
-@import url('./badge-overrides.css');
 
 /* center align icons and text */
 

packages/badge/src/spectrum-badge.css

@@ -11,9 +11,106 @@ governing permissions and limitations under the License.
 */
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
+:host {
+    --spectrum-badge-corner-radius: var(--spectrum-corner-radius-100);
+    --spectrum-badge-line-height: var(--spectrum-line-height-100);
+    --spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100);
+    --spectrum-badge-label-icon-color: var(--spectrum-white);
+    --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);
+    --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-height: var(--spectrum-component-height-100);
+    --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);
+    --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;
+}
+
+:host([variant='celery']),
+:host([variant='chartreuse']),
+:host([variant='orange']),
+:host([variant='yellow']) {
+    --spectrum-badge-label-icon-color: var(--spectrum-black);
+}
+
+:host([variant='blue']),
+:host([variant='cyan']),
+:host([variant='fuchsia']),
+:host([variant='gray']),
+:host([variant='green']),
+:host([variant='indigo']),
+:host([variant='magenta']),
+:host([variant='purple']),
+:host([variant='red']),
+:host([variant='seafoam']) {
+    --spectrum-badge-label-icon-color: var(--spectrum-badge-label-icon-color-primary);
+}
+
+:host([size='s']) {
+    --spectrum-badge-height: var(--spectrum-component-height-75);
+    --spectrum-badge-font-size: var(--spectrum-font-size-75);
+    --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-75);
+    --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-75);
+    --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-75);
+    --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-75);
+    --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-75);
+    --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-75);
+    --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-75);
+    --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-75);
+}
+
+:host([size='l']) {
+    --spectrum-badge-height: var(--spectrum-component-height-100);
+    --spectrum-badge-font-size: var(--spectrum-font-size-200);
+    --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-200);
+    --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-200);
+    --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-200);
+    --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-200);
+    --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-200);
+    --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-200);
+    --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-200);
+    --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-200);
+}
+
+:host([size='xl']) {
+    --spectrum-badge-height: var(--spectrum-component-height-100);
+    --spectrum-badge-font-size: var(--spectrum-font-size-300);
+    --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-300);
+    --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-300);
+    --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-300);
+    --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-300);
+    --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-300);
+    --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-300);
+    --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-300);
+    --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-300);
+}
+
 @media (forced-colors: active) {
     :host {
-        border-color: CanvasText;
+        border-color: var(--highcontrast-badge-border-color);
     }
 }