@navikt/ds-css 7.8.0 → 7.9.0

package/darkside/tag.darkside.css

@@ -1,194 +1,132 @@
 .navds-tag {
-  --__ac-tag-icon-size: 1.5rem;
-  --__ac-tag-icon-margin: -2px;
-
-  border: 1px solid;
-  border-radius: var(--a-border-radius-small);
+  --__axc-tag-icon-size: 1.5rem;
+  --__axc-tag-icon-margin: -2px;
+  --__axc-tag-border: ;
+  --__axc-tag-bg: ;
+  --__axc-tag-bg-strong: ;
+  --__axc-tag-text: ;
+  --__axc-tag-text-strong: ;
+
+  border-radius: var(--ax-border-radius-medium);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--a-spacing-05) var(--a-spacing-2);
+  padding: var(--ax-spacing-05) var(--ax-spacing-2);
   min-height: 2rem;
   line-height: 1;
-}
-
-.navds-tag--small {
-  min-height: 1.5rem;
-  padding: 0 var(--a-spacing-1-alt);
-
-  --__ac-tag-icon-size: 1.25rem;
-}
-
-.navds-tag--xsmall {
-  min-height: 1.25rem;
-  padding: 0 var(--a-spacing-1);
-
-  --__ac-tag-icon-size: 1rem;
-  --__ac-tag-icon-margin: -1px;
-}
-
-.navds-tag:has(.navds-tag__icon--left) {
-  gap: var(--a-spacing-05);
-}
 
-.navds-tag__icon--left {
-  font-size: var(--__ac-tag-icon-size);
-  margin-inline-start: var(--__ac-tag-icon-margin);
-  display: flex;
-}
-
-.navds-tag--error {
-  border-color: var(--ac-tag-error-border, var(--a-border-danger));
-  background-color: var(--ac-tag-error-bg, var(--a-surface-danger-subtle));
-  color: var(--ac-tag-error-text, var(--a-text-default));
-}
-
-.navds-tag--error-filled {
-  border-color: transparent;
-  background-color: var(--ac-tag-error-filled-bg, var(--a-surface-danger));
-  color: var(--ac-tag-error-filled-text, var(--a-text-on-danger));
+  &:has(.navds-tag__icon--left) {
+    gap: var(--ax-spacing-05);
+  }
 }
 
-.navds-tag--error-moderate {
-  border-color: transparent;
-  background-color: var(--ac-tag-error-moderate-bg, var(--a-surface-danger-moderate));
-  color: var(--ac-tag-error-moderate-text, var(--a-text-default));
+.navds-tag--info,
+.navds-tag--alt3 {
+  --__axc-tag-border: var(--ax-border-info);
+  --__axc-tag-bg: var(--ax-bg-info-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-info-strong);
+  --__axc-tag-text: var(--ax-text-info-strong);
+  --__axc-tag-text-strong: var(--ax-text-info-contrast);
 }
 
 .navds-tag--success {
-  border-color: var(--ac-tag-success-border, var(--a-border-success));
-  background-color: var(--ac-tag-success-bg, var(--a-surface-success-subtle));
-  color: var(--ac-tag-success-text, var(--a-text-default));
-}
-
-.navds-tag--success-filled {
-  border-color: transparent;
-  background-color: var(--ac-tag-success-filled-bg, var(--a-surface-success));
-  color: var(--ac-tag-success-filled-text, var(--a-text-on-success));
-}
-
-.navds-tag--success-moderate {
-  border-color: transparent;
-  background-color: var(--ac-tag-success-moderate-bg, var(--a-surface-success-moderate));
-  color: var(--ac-tag-success-moderate-text, var(--a-text-default));
+  --__axc-tag-border: var(--ax-border-success);
+  --__axc-tag-bg: var(--ax-bg-success-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-success-strong);
+  --__axc-tag-text: var(--ax-text-success-strong);
+  --__axc-tag-text-strong: var(--ax-text-success-contrast);
 }
 
 .navds-tag--warning {
-  border-color: var(--ac-tag-warning-border, var(--a-border-warning));
-  background-color: var(--ac-tag-warning-bg, var(--a-surface-warning-subtle));
-  color: var(--ac-tag-warning-text, var(--a-text-default));
+  --__axc-tag-border: var(--ax-border-warning);
+  --__axc-tag-bg: var(--ax-bg-warning-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-warning-strong);
+  --__axc-tag-text: var(--ax-text-warning-strong);
+  --__axc-tag-text-strong: var(--ax-text-warning-contrast);
 }
 
-.navds-tag--warning-filled {
-  border-color: transparent;
-  background-color: var(--ac-tag-warning-filled-bg, var(--a-surface-warning));
-  color: var(--ac-tag-warning-filled-text, var(--a-text-on-warning));
-}
-
-.navds-tag--warning-moderate {
-  border-color: transparent;
-  background-color: var(--ac-tag-warning-moderate-bg, var(--a-surface-warning-moderate));
-  color: var(--ac-tag-warning-moderate-text, var(--a-text-default));
-}
-
-.navds-tag--info {
-  border-color: var(--ac-tag-info-border, var(--a-border-info));
-  background-color: var(--ac-tag-info-bg, var(--a-surface-info-subtle));
-  color: var(--ac-tag-info-text, var(--a-text-default));
-}
-
-.navds-tag--info-filled {
-  border-color: transparent;
-  background-color: var(--ac-tag-info-filled-bg, var(--a-surface-info));
-  color: var(--ac-tag-info-filled-text, var(--a-text-on-info));
-}
-
-.navds-tag--info-moderate {
-  border-color: transparent;
-  background-color: var(--ac-tag-info-moderate-bg, var(--a-surface-info-moderate));
-  color: var(--ac-tag-info-moderate-text, var(--a-text-default));
+.navds-tag--error {
+  --__axc-tag-border: var(--ax-border-danger);
+  --__axc-tag-bg: var(--ax-bg-danger-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-danger-strong);
+  --__axc-tag-text: var(--ax-text-danger-strong);
+  --__axc-tag-text-strong: var(--ax-text-danger-contrast);
 }
 
 .navds-tag--neutral {
-  border-color: var(--ac-tag-neutral-border, var(--a-border-default));
-  background-color: var(--ac-tag-neutral-bg, var(--a-surface-neutral-subtle));
-  color: var(--ac-tag-neutral-text, var(--a-text-default));
-}
-
-.navds-tag--neutral-filled {
-  border-color: transparent;
-  background-color: var(--ac-tag-neutral-filled-bg, var(--a-surface-neutral));
-  color: var(--ac-tag-neutral-filled-text, var(--a-text-on-neutral));
-}
-
-.navds-tag--neutral-moderate {
-  border-color: transparent;
-  background-color: var(--ac-tag-neutral-moderate-bg, var(--a-surface-neutral-moderate));
-  color: var(--ac-tag-neutral-moderate-text, var(--a-text-default));
+  --__axc-tag-border: var(--ax-border-neutral);
+  --__axc-tag-bg: var(--ax-bg-neutral-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-neutral-strong);
+  --__axc-tag-text: var(--ax-text-neutral-strong);
+  --__axc-tag-text-strong: var(--ax-text-neutral-contrast);
 }
 
+.navds-tag--meta-purple,
 .navds-tag--alt1 {
-  border-color: var(--ac-tag-alt-1-border, var(--a-border-alt-1));
-  background-color: var(--ac-tag-alt-1-bg, var(--a-surface-alt-1-subtle));
-  color: var(--ac-tag-alt-1-text, var(--a-text-default));
+  --__axc-tag-border: var(--ax-border-meta-purple);
+  --__axc-tag-bg: var(--ax-bg-meta-purple-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-meta-purple-strong);
+  --__axc-tag-text: var(--ax-text-meta-purple-strong);
+  --__axc-tag-text-strong: var(--ax-text-meta-purple-contrast);
 }
 
-.navds-tag--alt1-filled {
-  border-color: transparent;
-  background-color: var(--ac-tag-alt-1-filled-bg, var(--a-surface-alt-1));
-  color: var(--ac-tag-alt-1-filled-text, var(--a-text-on-alt-1));
+.navds-tag--meta-lime,
+.navds-tag--alt2 {
+  --__axc-tag-border: var(--ax-border-meta-lime);
+  --__axc-tag-bg: var(--ax-bg-meta-lime-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-meta-lime-strong);
+  --__axc-tag-text: var(--ax-text-meta-lime-strong);
+  --__axc-tag-text-strong: var(--ax-text-meta-lime-contrast);
 }
 
-.navds-tag--alt1-moderate {
-  border-color: transparent;
-  background-color: var(--ac-tag-alt-1-moderate-bg, var(--a-surface-alt-1-moderate));
-  color: var(--ac-tag-alt-1-moderate-text, var(--a-text-default));
-}
+.navds-tag--small {
+  min-height: 1.5rem;
+  padding: 0 var(--ax-spacing-1-alt);
 
-.navds-tag--alt2 {
-  border-color: var(--ac-tag-alt-2-border, var(--a-border-alt-2));
-  background-color: var(--ac-tag-alt-2-bg, var(--a-surface-alt-2-subtle));
-  color: var(--ac-tag-alt-2-text, var(--a-text-default));
+  --__axc-tag-icon-size: 1.25rem;
 }
 
-.navds-tag--alt2-filled {
-  border-color: transparent;
-  background-color: var(--ac-tag-alt-2-filled-bg, var(--a-surface-alt-2));
-  color: var(--ac-tag-alt-2-filled-text, var(--a-text-on-alt-2));
+.navds-tag--xsmall {
+  min-height: 1.25rem;
+  padding: 0 var(--ax-spacing-1);
+
+  --__axc-tag-icon-size: 1rem;
+  --__axc-tag-icon-margin: -1px;
 }
 
-.navds-tag--alt2-moderate {
-  border-color: transparent;
-  background-color: var(--ac-tag-alt-2-moderate-bg, var(--a-surface-alt-2-moderate));
-  color: var(--ac-tag-alt-2-moderate-text, var(--a-text-default));
+.navds-tag__icon--left {
+  font-size: var(--__axc-tag-icon-size);
+  margin-inline-start: var(--__axc-tag-icon-margin);
+  display: flex;
 }
 
-.navds-tag--alt3 {
-  border-color: var(--ac-tag-alt-3-border, var(--a-border-alt-3));
-  background-color: var(--ac-tag-alt-3-bg, var(--a-surface-alt-3-subtle));
-  color: var(--ac-tag-alt-3-text, var(--a-text-default));
+.navds-tag--outline {
+  box-shadow: inset 0 0 0 1px var(--__axc-tag-border);
+  background: var(--__axc-tag-bg);
+  color: var(--__axc-tag-text);
 }
 
-.navds-tag--alt3-filled {
-  border-color: transparent;
-  background-color: var(--ac-tag-alt-3-filled-bg, var(--a-surface-alt-3));
-  color: var(--ac-tag-alt-3-filled-text, var(--a-text-on-alt-3));
+.navds-tag--moderate {
+  background: var(--__axc-tag-bg);
+  color: var(--__axc-tag-text);
 }
 
-.navds-tag--alt3-moderate {
-  border-color: transparent;
-  background-color: var(--ac-tag-alt-3-moderate-bg, var(--a-surface-alt-3-moderate));
-  color: var(--ac-tag-alt-3-moderate-text, var(--a-text-default));
+.navds-tag--strong {
+  background: var(--__axc-tag-bg-strong);
+  color: var(--__axc-tag-text-strong);
 }
 
 @media (forced-colors: active) {
   .navds-tag {
     forced-color-adjust: none;
+    color: canvastext;
   }
 
-  .navds-tag--neutral,
-  .navds-tag--neutral-moderate {
-    border-color: canvastext;
-    color: canvastext;
+  .navds-tag--moderate {
+    box-shadow: inset 0 0 0 1px var(--__axc-tag-bg-strong);
+  }
+
+  .navds-tag--strong {
+    color: canvas;
   }
 }