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

eBay · Feb 4, 2025 · 6f51583 · 6f51583
1 parent c59f7e6
commit 6f51583
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 1 deletion.
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;