feat(badge): added new border (#2556)

ArtBlue · web-flow · commit 6f515835c71d · 2025-02-04T14:06:01.000-08:00
diff --git a/.changeset/kind-flies-turn.md b/.changeset/kind-flies-turn.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(badge): added new border
diff --git a/dist/badge/badge.css b/dist/badge/badge.css
@@ -4,6 +4,7 @@
         --badge-background-color,
         var(--color-background-attention)
     );
+    border: 2px solid var(--color-stroke-on-attention);
     border-radius: 16px;
     color: var(--badge-foreground-color, var(--color-foreground-on-attention));
     display: inline-flex;
diff --git a/dist/tokens/evo-dark.css b/dist/tokens/evo-dark.css
@@ -34,12 +34,17 @@
         --color-foreground-on-strong: var(--color-neutral-800);
         --color-stroke-default: var(--color-neutral-600);
         --color-stroke-accent: var(--color-blue-400);
+        --color-stroke-on-accent: var(--color-neutral-800);
         --color-stroke-attention: var(--color-red-400);
+        --color-stroke-on-attention: var(--color-neutral-800);
         --color-stroke-confirmation: var(--color-kiwi-600);
+        --color-stroke-on-confirmation: var(--color-neutral-800);
         --color-stroke-information: var(--color-blue-400);
         --color-stroke-disabled: var(--color-neutral-500);
+        --color-stroke-on-disabled: var(--color-neutral-800);
         --color-stroke-strong: var(--color-neutral-100);
         --color-stroke-subtle: var(--color-neutral-600);
+        --color-stroke-inverse: var(--color-neutral-800);
         --color-state-visited: var(--color-magenta-3);
         --color-state-primary-hover: #17212c;
         --color-state-primary-active: #1e2a38;
diff --git a/dist/tokens/evo-light.css b/dist/tokens/evo-light.css
@@ -33,11 +33,16 @@
     --color-foreground-on-strong: var(--color-neutral-100);
     --color-stroke-default: var(--color-neutral-500);
     --color-stroke-accent: var(--color-blue-500);
+    --color-stroke-on-accent: var(--color-neutral-100);
     --color-stroke-attention: var(--color-red-500);
+    --color-stroke-on-attention: var(--color-neutral-100);
     --color-stroke-confirmation: var(--color-kiwi-600);
+    --color-stroke-on-confirmation: var(--color-neutral-100);
     --color-stroke-information: var(--color-blue-500);
     --color-stroke-disabled: var(--color-neutral-400);
+    --color-stroke-on-disabled: var(--color-neutral-100);
     --color-stroke-strong: var(--color-neutral-800);
+    --color-stroke-inverse: var(--color-neutral-100);
     --color-stroke-subtle: var(--color-neutral-300);
     --color-state-visited: var(--color-pink-600);
     --color-state-focus-stroke: #005fcc;
diff --git a/src/components/section-header.marko b/src/components/section-header.marko
@@ -8,7 +8,9 @@ $ if (dsComponent.length > 0) {
 style {
     .section-header {
         display: flex;
+        flex-wrap: wrap;
         margin: var(--spacing-200) 0 var(--spacing-200);
+        justify-content: space-between
     }
 
     .section-header h1 {
@@ -21,7 +23,6 @@ style {
         background-color: var(--color-background-tertiary);
         font-family: monospace, sans-serif, Helvetica;
         font-size: var(--font-size-small);
-        margin-left: auto;
         padding: 2px 4px;
     }
 }
diff --git a/src/sass/badge/badge.scss b/src/sass/badge/badge.scss
@@ -3,6 +3,7 @@
 
 .badge {
     align-items: center;
+    border: 2px solid var(--color-stroke-on-attention);
     border-radius: 16px;
     display: inline-flex;
     font-size: 10px;
diff --git a/src/tokens/evo-dark.css b/src/tokens/evo-dark.css
@@ -34,12 +34,17 @@
         --color-foreground-on-strong: var(--color-neutral-800);
         --color-stroke-default: var(--color-neutral-600);
         --color-stroke-accent: var(--color-blue-400);
+        --color-stroke-on-accent: var(--color-neutral-800);
         --color-stroke-attention: var(--color-red-400);
+        --color-stroke-on-attention: var(--color-neutral-800);
         --color-stroke-confirmation: var(--color-kiwi-600);
+        --color-stroke-on-confirmation: var(--color-neutral-800);
         --color-stroke-information: var(--color-blue-400);
         --color-stroke-disabled: var(--color-neutral-500);
+        --color-stroke-on-disabled: var(--color-neutral-800);
         --color-stroke-strong: var(--color-neutral-100);
         --color-stroke-subtle: var(--color-neutral-600);
+        --color-stroke-inverse: var(--color-neutral-800);
         --color-state-visited: var(--color-magenta-3);
         --color-state-primary-hover: #17212c;
         --color-state-primary-active: #1e2a38;
diff --git a/src/tokens/evo-light.css b/src/tokens/evo-light.css
@@ -33,11 +33,16 @@
     --color-foreground-on-strong: var(--color-neutral-100);
     --color-stroke-default: var(--color-neutral-500);
     --color-stroke-accent: var(--color-blue-500);
+    --color-stroke-on-accent: var(--color-neutral-100);
     --color-stroke-attention: var(--color-red-500);
+    --color-stroke-on-attention: var(--color-neutral-100);
     --color-stroke-confirmation: var(--color-kiwi-600);
+    --color-stroke-on-confirmation: var(--color-neutral-100);
     --color-stroke-information: var(--color-blue-500);
     --color-stroke-disabled: var(--color-neutral-400);
+    --color-stroke-on-disabled: var(--color-neutral-100);
     --color-stroke-strong: var(--color-neutral-800);
+    --color-stroke-inverse: var(--color-neutral-100);
     --color-stroke-subtle: var(--color-neutral-300);
     --color-state-visited: var(--color-pink-600);
     --color-state-focus-stroke: #005fcc;

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@ebay/skin": minor
 +---
++
 +feat(badge): added new border
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,9 @@ $ if (dsComponent.length > 0) {`
`8`	`8`	`style {`
`9`	`9`	`.section-header {`
`10`	`10`	`display: flex;`
	`11`	`+ flex-wrap: wrap;`
`11`	`12`	`margin: var(--spacing-200) 0 var(--spacing-200);`
	`13`	`+ justify-content: space-between`
`12`	`14`	`}`
`13`	`15`
`14`	`16`	`.section-header h1 {`
`@@ -21,7 +23,6 @@ style {`
`21`	`23`	`background-color: var(--color-background-tertiary);`
`22`	`24`	`font-family: monospace, sans-serif, Helvetica;`
`23`	`25`	`font-size: var(--font-size-small);`
`24`		`- margin-left: auto;`
`25`	`26`	`padding: 2px 4px;`
`26`	`27`	`}`
`27`	`28`	`}`