@navikt/ds-css 7.20.0 → 7.21.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-css
 
+## 7.21.0
+
+### Patch Changes
+
+- Darkside: Update Chips.Toggle hover-border. ([#3738](https://github.com/navikt/aksel/pull/3738))
+
 ## 7.20.0
 
 ### Minor Changes

package/darkside/chips.darkside.css

@@ -73,9 +73,11 @@
   box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
   background-color: var(--ax-bg-accent-moderate);
   color: var(--ax-text-accent);
+  transition: box-shadow 200ms cubic-bezier(0.15, 1, 0.3, 1);
 
   &:hover {
     background-color: var(--ax-bg-accent-moderate-hover);
+    box-shadow: inset 0 0 0 1px var(--ax-border-accent);
   }
 
   &[data-pressed="true"] {
@@ -93,9 +95,11 @@
   box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
   background-color: var(--ax-bg-neutral-moderate);
   color: var(--ax-text-neutral);
+  transition: box-shadow 200ms cubic-bezier(0.15, 1, 0.3, 1);
 
   &:hover {
     background-color: var(--ax-bg-neutral-moderate-hover);
+    box-shadow: inset 0 0 0 1px var(--ax-border-neutral);
   }
 
   &[data-pressed="true"] {

package/darkside/tag.darkside.css

@@ -14,6 +14,7 @@
   padding: var(--ax-space-2) var(--ax-space-8);
   min-height: 2rem;
   line-height: 1;
+  text-decoration: none;
 
   &:has(.aksel-tag__icon--left) {
     gap: var(--ax-space-2);

package/dist/darkside/component/chips.css

@@ -69,10 +69,12 @@
     box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
     background-color: var(--ax-bg-accent-moderate);
     color: var(--ax-text-accent);
+    transition: box-shadow .2s cubic-bezier(.15, 1, .3, 1);
   }
 
   .aksel-chips__toggle--action:hover {
     background-color: var(--ax-bg-accent-moderate-hover);
+    box-shadow: inset 0 0 0 1px var(--ax-border-accent);
   }
 
   .aksel-chips__toggle--action[data-pressed="true"] {
@@ -89,10 +91,12 @@
     box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
     background-color: var(--ax-bg-neutral-moderate);
     color: var(--ax-text-neutral);
+    transition: box-shadow .2s cubic-bezier(.15, 1, .3, 1);
   }
 
   .aksel-chips__toggle--neutral:hover {
     background-color: var(--ax-bg-neutral-moderate-hover);
+    box-shadow: inset 0 0 0 1px var(--ax-border-neutral);
   }
 
   .aksel-chips__toggle--neutral[data-pressed="true"] {

package/dist/darkside/component/chips.min.css

@@ -1 +1 @@
-@layer aksel.components{.aksel-chips{gap:var(--ax-space-8);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.aksel-chips li{margin:0;padding:0;list-style:none;display:block}.aksel-chips__chip{all:unset;cursor:pointer;justify-content:center;align-items:center;gap:var(--ax-space-2);padding:0 var(--ax-space-12);border-radius:var(--ax-border-radius-full);min-height:2rem;margin:0;text-decoration:none;display:flex}.aksel-chips__chip:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px}.aksel-chips--readonly .aksel-chips__chip{background-color:var(--ax-bg-neutral-moderateA)}.aksel-chips--small .aksel-chips__chip{min-height:1.5rem;padding:0 var(--ax-space-8)}.aksel-chips--small .aksel-chips__toggle-icon{width:1rem;height:1rem}.aksel-chips--small .aksel-chips__toggle--with-checkmark{padding-left:var(--ax-space-4)}.aksel-chips--small .aksel-chips__removable-icon{width:1.25rem;height:1.25rem}.aksel-chips--small .aksel-chips__removable-icon>svg{width:1rem}.aksel-chips--small .aksel-chips--icon-right{padding-right:var(--ax-space-2)}.aksel-chips__toggle--action{box-shadow:inset 0 0 0 1px var(--ax-border-accent-subtleA);background-color:var(--ax-bg-accent-moderate);color:var(--ax-text-accent)}.aksel-chips__toggle--action:hover{background-color:var(--ax-bg-accent-moderate-hover)}.aksel-chips__toggle--action[data-pressed=true]{box-shadow:none;background-color:var(--ax-bg-accent-strong-pressed);color:var(--ax-text-accent-contrast)}.aksel-chips__toggle--action[data-pressed=true]:hover{background-color:var(--ax-bg-accent-strong-hover)}.aksel-chips__toggle--neutral{box-shadow:inset 0 0 0 1px var(--ax-border-neutral-subtleA);background-color:var(--ax-bg-neutral-moderate);color:var(--ax-text-neutral)}.aksel-chips__toggle--neutral:hover{background-color:var(--ax-bg-neutral-moderate-hover)}.aksel-chips__toggle--neutral[data-pressed=true]{box-shadow:none;background-color:var(--ax-bg-neutral-strong-pressed);color:var(--ax-text-neutral-contrast)}.aksel-chips__toggle--neutral[data-pressed=true]:hover{background-color:var(--ax-bg-neutral-strong-hover)}.aksel-chips--medium .aksel-chips__toggle--with-checkmark{padding-left:var(--ax-space-6)}.aksel-chips__removable{gap:0}.aksel-chips__removable--action{background:var(--ax-bg-accent-strong-pressed);color:var(--ax-text-accent-contrast)}.aksel-chips__removable--action:hover{background:var(--ax-bg-accent-strong-hover)}.aksel-chips__removable--neutral{background:var(--ax-bg-neutral-strong-pressed);color:var(--ax-text-neutral-contrast)}.aksel-chips__removable--neutral:hover{background:var(--ax-bg-neutral-strong-hover)}.aksel-chips__removable-icon{border-radius:var(--ax-border-radius-full);place-items:center;width:1.5rem;height:1.5rem;font-size:1.25rem;display:grid}.aksel-chips--icon-left{padding-left:var(--ax-space-6)}.aksel-chips--icon-right{padding-right:var(--ax-space-6)}@media (forced-colors: active){.aksel-chips__chip{border:1px solid rgba(0,0,0,0)}.aksel-chips__chip:hover{color:highlight;background-color:highlighttext}.aksel-chips__chip:where([data-pressed=true],:active,:hover)>span{forced-color-adjust:none}.aksel-chips__toggle[data-pressed=true]{color:selecteditemtext;background-color:selecteditem;border:1px solid selecteditem}.aksel-chips__toggle[data-pressed=true]:hover{color:selecteditem;background-color:selecteditemtext}}}
+@layer aksel.components{.aksel-chips{gap:var(--ax-space-8);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.aksel-chips li{margin:0;padding:0;list-style:none;display:block}.aksel-chips__chip{all:unset;cursor:pointer;justify-content:center;align-items:center;gap:var(--ax-space-2);padding:0 var(--ax-space-12);border-radius:var(--ax-border-radius-full);min-height:2rem;margin:0;text-decoration:none;display:flex}.aksel-chips__chip:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px}.aksel-chips--readonly .aksel-chips__chip{background-color:var(--ax-bg-neutral-moderateA)}.aksel-chips--small .aksel-chips__chip{min-height:1.5rem;padding:0 var(--ax-space-8)}.aksel-chips--small .aksel-chips__toggle-icon{width:1rem;height:1rem}.aksel-chips--small .aksel-chips__toggle--with-checkmark{padding-left:var(--ax-space-4)}.aksel-chips--small .aksel-chips__removable-icon{width:1.25rem;height:1.25rem}.aksel-chips--small .aksel-chips__removable-icon>svg{width:1rem}.aksel-chips--small .aksel-chips--icon-right{padding-right:var(--ax-space-2)}.aksel-chips__toggle--action{box-shadow:inset 0 0 0 1px var(--ax-border-accent-subtleA);background-color:var(--ax-bg-accent-moderate);color:var(--ax-text-accent);transition:box-shadow .2s cubic-bezier(.15,1,.3,1)}.aksel-chips__toggle--action:hover{background-color:var(--ax-bg-accent-moderate-hover);box-shadow:inset 0 0 0 1px var(--ax-border-accent)}.aksel-chips__toggle--action[data-pressed=true]{box-shadow:none;background-color:var(--ax-bg-accent-strong-pressed);color:var(--ax-text-accent-contrast)}.aksel-chips__toggle--action[data-pressed=true]:hover{background-color:var(--ax-bg-accent-strong-hover)}.aksel-chips__toggle--neutral{box-shadow:inset 0 0 0 1px var(--ax-border-neutral-subtleA);background-color:var(--ax-bg-neutral-moderate);color:var(--ax-text-neutral);transition:box-shadow .2s cubic-bezier(.15,1,.3,1)}.aksel-chips__toggle--neutral:hover{background-color:var(--ax-bg-neutral-moderate-hover);box-shadow:inset 0 0 0 1px var(--ax-border-neutral)}.aksel-chips__toggle--neutral[data-pressed=true]{box-shadow:none;background-color:var(--ax-bg-neutral-strong-pressed);color:var(--ax-text-neutral-contrast)}.aksel-chips__toggle--neutral[data-pressed=true]:hover{background-color:var(--ax-bg-neutral-strong-hover)}.aksel-chips--medium .aksel-chips__toggle--with-checkmark{padding-left:var(--ax-space-6)}.aksel-chips__removable{gap:0}.aksel-chips__removable--action{background:var(--ax-bg-accent-strong-pressed);color:var(--ax-text-accent-contrast)}.aksel-chips__removable--action:hover{background:var(--ax-bg-accent-strong-hover)}.aksel-chips__removable--neutral{background:var(--ax-bg-neutral-strong-pressed);color:var(--ax-text-neutral-contrast)}.aksel-chips__removable--neutral:hover{background:var(--ax-bg-neutral-strong-hover)}.aksel-chips__removable-icon{border-radius:var(--ax-border-radius-full);place-items:center;width:1.5rem;height:1.5rem;font-size:1.25rem;display:grid}.aksel-chips--icon-left{padding-left:var(--ax-space-6)}.aksel-chips--icon-right{padding-right:var(--ax-space-6)}@media (forced-colors: active){.aksel-chips__chip{border:1px solid rgba(0,0,0,0)}.aksel-chips__chip:hover{color:highlight;background-color:highlighttext}.aksel-chips__chip:where([data-pressed=true],:active,:hover)>span{forced-color-adjust:none}.aksel-chips__toggle[data-pressed=true]{color:selecteditemtext;background-color:selecteditem;border:1px solid selecteditem}.aksel-chips__toggle[data-pressed=true]:hover{color:selecteditem;background-color:selecteditemtext}}}

package/dist/darkside/component/tag.css

@@ -13,6 +13,7 @@
     align-items: center;
     min-height: 2rem;
     line-height: 1;
+    text-decoration: none;
     display: inline-flex;
   }
 

package/dist/darkside/component/tag.min.css

@@ -1 +1 @@
-@layer aksel.components{.aksel-tag{--__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);padding:var(--ax-space-2) var(--ax-space-8);justify-content:center;align-items:center;min-height:2rem;line-height:1;display:inline-flex}.aksel-tag:has(.aksel-tag__icon--left){gap:var(--ax-space-2)}.aksel-tag--info,.aksel-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);--__axc-tag-text-strong: var(--ax-text-info-contrast)}.aksel-tag--success{--__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);--__axc-tag-text-strong: var(--ax-text-success-contrast)}.aksel-tag--warning{--__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);--__axc-tag-text-strong: var(--ax-text-warning-contrast)}.aksel-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);--__axc-tag-text-strong: var(--ax-text-danger-contrast)}.aksel-tag--neutral{--__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);--__axc-tag-text-strong: var(--ax-text-neutral-contrast)}.aksel-tag--meta-purple,.aksel-tag--alt1{--__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);--__axc-tag-text-strong: var(--ax-text-meta-purple-contrast)}.aksel-tag--meta-lime,.aksel-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);--__axc-tag-text-strong: var(--ax-text-meta-lime-contrast)}.aksel-tag--small{min-height:1.5rem;padding:0 var(--ax-space-6);--__axc-tag-icon-size: 1.25rem}.aksel-tag--xsmall{min-height:1.25rem;padding:0 var(--ax-space-4);--__axc-tag-icon-size: 1rem;--__axc-tag-icon-margin: -1px}.aksel-tag__icon--left{font-size:var(--__axc-tag-icon-size);margin-inline-start:var(--__axc-tag-icon-margin);display:flex}.aksel-tag--outline{box-shadow:inset 0 0 0 1px var(--__axc-tag-border);background:var(--__axc-tag-bg);color:var(--__axc-tag-text)}.aksel-tag--moderate{background:var(--__axc-tag-bg);color:var(--__axc-tag-text)}.aksel-tag--strong{background:var(--__axc-tag-bg-strong);color:var(--__axc-tag-text-strong)}@media (forced-colors: active){.aksel-tag{forced-color-adjust:none;color:canvastext}.aksel-tag--moderate{box-shadow:inset 0 0 0 1px var(--__axc-tag-bg-strong)}.aksel-tag--strong{color:canvas}}}
+@layer aksel.components{.aksel-tag{--__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);padding:var(--ax-space-2) var(--ax-space-8);justify-content:center;align-items:center;min-height:2rem;line-height:1;text-decoration:none;display:inline-flex}.aksel-tag:has(.aksel-tag__icon--left){gap:var(--ax-space-2)}.aksel-tag--info,.aksel-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);--__axc-tag-text-strong: var(--ax-text-info-contrast)}.aksel-tag--success{--__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);--__axc-tag-text-strong: var(--ax-text-success-contrast)}.aksel-tag--warning{--__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);--__axc-tag-text-strong: var(--ax-text-warning-contrast)}.aksel-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);--__axc-tag-text-strong: var(--ax-text-danger-contrast)}.aksel-tag--neutral{--__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);--__axc-tag-text-strong: var(--ax-text-neutral-contrast)}.aksel-tag--meta-purple,.aksel-tag--alt1{--__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);--__axc-tag-text-strong: var(--ax-text-meta-purple-contrast)}.aksel-tag--meta-lime,.aksel-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);--__axc-tag-text-strong: var(--ax-text-meta-lime-contrast)}.aksel-tag--small{min-height:1.5rem;padding:0 var(--ax-space-6);--__axc-tag-icon-size: 1.25rem}.aksel-tag--xsmall{min-height:1.25rem;padding:0 var(--ax-space-4);--__axc-tag-icon-size: 1rem;--__axc-tag-icon-margin: -1px}.aksel-tag__icon--left{font-size:var(--__axc-tag-icon-size);margin-inline-start:var(--__axc-tag-icon-margin);display:flex}.aksel-tag--outline{box-shadow:inset 0 0 0 1px var(--__axc-tag-border);background:var(--__axc-tag-bg);color:var(--__axc-tag-text)}.aksel-tag--moderate{background:var(--__axc-tag-bg);color:var(--__axc-tag-text)}.aksel-tag--strong{background:var(--__axc-tag-bg-strong);color:var(--__axc-tag-text-strong)}@media (forced-colors: active){.aksel-tag{forced-color-adjust:none;color:canvastext}.aksel-tag--moderate{box-shadow:inset 0 0 0 1px var(--__axc-tag-bg-strong)}.aksel-tag--strong{color:canvas}}}

package/dist/darkside/components.css

@@ -614,10 +614,12 @@
     box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
     background-color: var(--ax-bg-accent-moderate);
     color: var(--ax-text-accent);
+    transition: box-shadow .2s cubic-bezier(.15, 1, .3, 1);
   }
 
   .aksel-chips__toggle--action:hover {
     background-color: var(--ax-bg-accent-moderate-hover);
+    box-shadow: inset 0 0 0 1px var(--ax-border-accent);
   }
 
   .aksel-chips__toggle--action[data-pressed="true"] {
@@ -634,10 +636,12 @@
     box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
     background-color: var(--ax-bg-neutral-moderate);
     color: var(--ax-text-neutral);
+    transition: box-shadow .2s cubic-bezier(.15, 1, .3, 1);
   }
 
   .aksel-chips__toggle--neutral:hover {
     background-color: var(--ax-bg-neutral-moderate-hover);
+    box-shadow: inset 0 0 0 1px var(--ax-border-neutral);
   }
 
   .aksel-chips__toggle--neutral[data-pressed="true"] {
@@ -4387,6 +4391,7 @@
     align-items: center;
     min-height: 2rem;
     line-height: 1;
+    text-decoration: none;
     display: inline-flex;
   }