feat: add number badge border design tokens

nl-design-system · Oct 6, 2024 · 200e34b · 200e34b
1 parent 24b4813
commit 200e34b
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 3 deletions.
diff --git a/.changeset/good-rice-cover.md b/.changeset/good-rice-cover.md
@@ -0,0 +1,10 @@
+---
+"@utrecht/number-badge-css": minor
+"@utrecht/components": minor
+"@utrecht/component-library-css": minor
+"@utrecht/component-library-react": minor
+"@utrecht/component-library-vue": minor
+"@utrecht/web-component-library-stencil": minor
+---
+
+Add `utrecht.number-badge.border-color` and `utrecht.number-badge.border-width` design tokens.
diff --git a/components/number-badge/src/_mixin.scss b/components/number-badge/src/_mixin.scss
@@ -7,7 +7,13 @@
 @mixin utrecht-number-badge {
   /* Limit size to `max-content`, so the badge will not be stretched out of proportion inside a flexbox */
   background-color: var(--utrecht-number-badge-background-color, var(--utrecht-badge-background-color, hsl(0 0% 0%)));
+  border-color: var(--utrecht-number-badge-border-color, var(--utrecht-badge-border-color));
   border-radius: var(--utrecht-number-badge-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
+  border-style: solid;
+  border-width: max(
+    var(--utrecht-number-badge-border-width, var(--utrecht-badge-border-width, 0)),
+    var(--_utrecht-number-badge-min-border-width, 0)
+  );
   color: var(--utrecht-number-badge-color, var(--utrecht-badge-color, hsl(0 0% 100%)));
   display: inline-block;
   font-family: var(
@@ -33,3 +39,12 @@
   text-decoration: none; /* no inheritance */
   white-space: nowrap;
 }
+
+@mixin utrecht-number-badge--media-query-forced-colors {
+  @media screen and (forced-colors: active) {
+    /* Warning: there layout difference because of the added 1px border */
+    --_utrecht-number-badge-min-border-width: 1px;
+
+    border-color: currentColor;
+  }
+}
diff --git a/components/number-badge/src/index.scss b/components/number-badge/src/index.scss
@@ -9,5 +9,5 @@
 
 .utrecht-number-badge {
   @include utrecht-number-badge;
-  @include utrecht-badge--media-query-forced-colors;
+  @include utrecht-number-badge--media-query-forced-colors;
 }
diff --git a/components/number-badge/src/tokens.json b/components/number-badge/src/tokens.json
@@ -2,7 +2,6 @@
   "utrecht": {
     "number-badge": {
       "background-color": {
-        "comment": "Default background color for badge components",
         "$extensions": {
           "nl.nldesignsystem.css.property": {
             "syntax": "<color>",
@@ -13,8 +12,18 @@
         },
         "type": "color"
       },
+      "border-color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.fallback": ["utrecht.badge.border-color"],
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "color"
+      },
       "border-radius": {
-        "comment": "Default corner radius for badge components",
         "$extensions": {
           "nl.nldesignsystem.css.property": {
             "syntax": "<length-percentage>",
@@ -25,6 +34,17 @@
         },
         "type": "borderRadius"
       },
+      "border-width": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.fallback": ["utrecht.badge.border-width"],
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "borderWidth"
+      },
       "color": {
         "comment": "Default text color for badge components",
         "$extensions": {