style(tag): add border variant

.changeset/popular-points-change.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**tag**: Add new variant, `[data-variant="outline"]`.
+- To use the old variant, either don't set `data-variant`, or set it to `default`.

.changeset/sharp-terms-double.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**Tag**: Add new prop `variant`
+- Accepts `default|outline`. `default` is the default value.

.changeset/tricky-dragons-jam.md

@@ -0,0 +1,8 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**tag**: New css variables to go with `[data-variant="outline"]`:
+- `--dsc-tag-border-width`
+- `--dsc-tag-border-color`
+- `--dsc-tag-border-style`

packages/css/src/tag.css

@@ -3,10 +3,16 @@
   --dsc-tag-color: var(--ds-color-text-default);
   --dsc-tag-min-height: var(--ds-size-8);
   --dsc-tag-padding: 0 var(--ds-size-2);
+  --dsc-tag-border-width: var(--ds-border-width-default);
+  --dsc-tag-border-color: transparent;
+  --dsc-tag-border-style: solid;
 
   align-items: center;
   background: var(--dsc-tag-background);
   border-radius: var(--ds-border-radius-sm);
+  border-width: var(--dsc-tag-border-width);
+  border-color: var(--dsc-tag-border-color);
+  border-style: var(--dsc-tag-border-style);
   box-sizing: border-box;
   color: var(--dsc-tag-color);
   height: fit-content; /* In case placed in display: flex */
@@ -27,6 +33,10 @@
     display: inline-flex;
   }
 
+  &[data-variant='outline'] {
+    --dsc-tag-border-color: var(--ds-color-border-subtle);
+  }
+
   @media (forced-colors: active) {
     border-width: var(--ds-border-width-default);
     border-style: solid;

packages/react/src/components/tag/tag.mdx

@@ -28,6 +28,11 @@ Du kan bruke ikoner i `Tag` for å gi ekstra visuell informasjon. Du må selv be
 
 <Canvas of={TagStories.Icons} />
 
+### Variant
+Taggen kan være svak på noen bakgrunnsfarger. Ved å sette `variant="outline"` får taggen en border som gjør den mer synlig.
+
+<Canvas of={TagStories.VariantOutline} />
+
 ## Retningslinjer
 Bruk `Tag` når du vil hjelpe brukeren med å raskt identifisere innhold basert på kategori, status eller egenskap. `Tag` fungerer godt for å vise metadata, som for eksempel hvilken type dokument det er, hvilken status noe har, eller hvilket tema det tilhører. De bør brukes konsistent, være korte og lett forståelige, og unngås dersom informasjonen allerede er tydelig i konteksten. Tag er ikke klikkbar, det er bare en merkelapp.
 

packages/react/src/components/tag/tag.stories.tsx

@@ -27,6 +27,7 @@ const colorVariants = [
 export const Preview: Story = {
   args: {
     children: 'New',
+    variant: 'default',
   },
 };
 
@@ -118,3 +119,31 @@ Icons.parameters = {
     placeItems: 'center',
   },
 };
+
+export const VariantOutline: StoryFn<typeof Tag> = ({ ...rest }) => {
+  return (
+    <>
+      {colorVariants.map((color) => (
+        <Tag
+          key={color}
+          data-color={color as TagProps['data-color']}
+          variant='outline'
+          {...rest}
+        >
+          {color}
+        </Tag>
+      ))}
+    </>
+  );
+};
+
+VariantOutline.parameters = {
+  customStyles: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(4, 1fr)',
+    gap: 'var(--ds-size-2)',
+    height: '100%',
+    width: '100%',
+    placeItems: 'center',
+  },
+};

packages/react/src/components/tag/tag.tsx

@@ -12,6 +12,12 @@ export type TagProps = MergeRight<
      * Change the color scheme of the tag
      */
     'data-color'?: Color | SeverityColors;
+    /**
+     * The visual variant of the tag
+     *
+     * @default 'default'
+     */
+    variant?: 'default' | 'outline';
   }
 >;
 
@@ -22,8 +28,15 @@ export type TagProps = MergeRight<
  * <Tag>Melk</Tag>
  */
 export const Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(
-  { className, ...rest },
+  { className, variant = 'default', ...rest },
   ref,
 ) {
-  return <span className={cl('ds-tag', className)} ref={ref} {...rest} />;
+  return (
+    <span
+      className={cl('ds-tag', className)}
+      ref={ref}
+      data-variant={variant}
+      {...rest}
+    />
+  );
 });