fix(Tag): css adjustments (#2397)

Part of #2295 
Not fixing accessibility/wrapping/display:flex in this PR as this will
be part of work after #2355

Author: eirikbacker

.changeset/stupid-tables-applaud.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Tag: Make neutral default color in CSS

packages/css/tag.css

@@ -1,70 +1,62 @@
 .ds-tag {
-  --dsc-tag-background: var(--ds-color-neutral-background-subtle);
+  --dsc-tag-background: var(--ds-color-neutral-surface-default);
   --dsc-tag-color: var(--ds-color-neutral-text-default);
+  --dsc-tag-min-height: var(--ds-sizing-8);
+  --dsc-tag-padding: 0 var(--ds-spacing-2);
 
-  color: var(--dsc-tag-color);
-  padding: 0 var(--ds-spacing-2);
-  min-height: var(--ds-sizing-8);
-  background-color: var(--dsc-tag-background);
-  border-radius: min(1rem, var(--ds-border-radius-sm));
-  display: flex;
   align-items: center;
+  background: var(--dsc-tag-background);
+  border-radius: min(1rem, var(--ds-border-radius-sm));
   box-sizing: border-box;
-  word-break: break-word;
+  color: var(--dsc-tag-color);
+  display: flex;
+  min-height: var(--dsc-tag-min-height);
+  padding: var(--dsc-tag-padding);
   width: max-content;
-}
-
-.ds-tag--sm {
-  padding: 0 var(--ds-spacing-2);
-  min-height: var(--ds-sizing-7);
-}
-
-.ds-tag--md {
-  padding: 0 var(--ds-spacing-2);
-  min-height: var(--ds-sizing-8);
-}
-
-.ds-tag--lg {
-  padding: 0 var(--ds-spacing-3);
-  min-height: var(--ds-sizing-9);
-}
-
-.ds-tag--neutral {
-  --dsc-tag-background: var(--ds-color-neutral-surface-default);
-  --dsc-tag-color: var(--ds-color-neutral-text-default);
-}
-
-.ds-tag--info {
-  --dsc-tag-background: var(--ds-color-info-surface-default);
-  --dsc-tag-color: var(--ds-color-info-text-default);
-}
-
-.ds-tag--success {
-  --dsc-tag-background: var(--ds-color-success-surface-default);
-  --dsc-tag-color: var(--ds-color-success-text-default);
-}
-
-.ds-tag--warning {
-  --dsc-tag-background: var(--ds-color-warning-surface-default);
-  --dsc-tag-color: var(--ds-color-warning-text-default);
-}
-
-.ds-tag--danger {
-  --dsc-tag-background: var(--ds-color-danger-surface-default);
-  --dsc-tag-color: var(--ds-color-danger-text-default);
-}
-
-.ds-tag--brand1 {
-  --dsc-tag-background: var(--ds-color-brand1-surface-default);
-  --dsc-tag-color: var(--ds-color-brand1-text-default);
-}
-
-.ds-tag--brand2 {
-  --dsc-tag-background: var(--ds-color-brand2-surface-default);
-  --dsc-tag-color: var(--ds-color-brand2-text-default);
-}
+  word-break: break-word;
 
-.ds-tag--brand3 {
-  --dsc-tag-background: var(--ds-color-brand3-surface-default);
-  --dsc-tag-color: var(--ds-color-brand3-text-default);
+  &[data-size='sm'] {
+    --dsc-tag-padding: 0 var(--ds-spacing-2);
+    --dsc-tag-min-height: var(--ds-sizing-7);
+  }
+
+  &[data-size='lg'] {
+    --dsc-tag-padding: 0 var(--ds-spacing-3);
+    --dsc-tag-min-height: var(--ds-sizing-9);
+  }
+
+  &[data-color='info'] {
+    --dsc-tag-background: var(--ds-color-info-surface-default);
+    --dsc-tag-color: var(--ds-color-info-text-default);
+  }
+
+  &[data-color='success'] {
+    --dsc-tag-background: var(--ds-color-success-surface-default);
+    --dsc-tag-color: var(--ds-color-success-text-default);
+  }
+
+  &[data-color='warning'] {
+    --dsc-tag-background: var(--ds-color-warning-surface-default);
+    --dsc-tag-color: var(--ds-color-warning-text-default);
+  }
+
+  &[data-color='danger'] {
+    --dsc-tag-background: var(--ds-color-danger-surface-default);
+    --dsc-tag-color: var(--ds-color-danger-text-default);
+  }
+
+  &[data-color='brand1'] {
+    --dsc-tag-background: var(--ds-color-brand1-surface-default);
+    --dsc-tag-color: var(--ds-color-brand1-text-default);
+  }
+
+  &[data-color='brand2'] {
+    --dsc-tag-background: var(--ds-color-brand2-surface-default);
+    --dsc-tag-color: var(--ds-color-brand2-text-default);
+  }
+
+  &[data-color='brand3'] {
+    --dsc-tag-background: var(--ds-color-brand3-surface-default);
+    --dsc-tag-color: var(--ds-color-brand3-text-default);
+  }
 }

packages/react/src/components/Tag/Tag.tsx

@@ -33,25 +33,19 @@ export type TagProps = {
  * @example
  * <Tag color='success'>Success</Tag>
  */
-export const Tag = forwardRef<HTMLSpanElement, TagProps>(
-  ({ size = 'md', color = 'neutral', children, className, ...rest }, ref) => {
-    return (
-      <Paragraph asChild size={size}>
-        <span
-          className={cl(
-            'ds-tag',
-            `ds-tag--${color}`,
-            `ds-tag--${size}`,
-            className,
-          )}
-          ref={ref}
-          {...rest}
-        >
-          {children}
-        </span>
-      </Paragraph>
-    );
-  },
-);
-
-Tag.displayName = 'Tag';
+export const Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(
+  { size = 'md', color = 'neutral', className, ...rest },
+  ref,
+) {
+  return (
+    <Paragraph asChild size={size}>
+      <span
+        className={cl('ds-tag', className)}
+        data-color={size}
+        data-size={size}
+        ref={ref}
+        {...rest}
+      />
+    </Paragraph>
+  );
+});