@navikt/ds-css 7.21.1 → 7.22.0

package/dist/darkside/version/{7.21.1 → 7.22.0}/component/timeline.css

@@ -74,7 +74,7 @@
   }
 
   .aksel-timeline__period {
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     z-index: 2;
     border: none;
     align-items: center;
@@ -106,7 +106,7 @@
   .aksel-timeline__period--success {
     background: var(--ax-bg-success-moderate);
     border: solid 1px var(--ax-border-success);
-    color: var(--ax-text-success-icon);
+    color: var(--ax-text-success-decoration);
   }
 
   .aksel-timeline__period--success.aksel-timeline__period--clickable:hover {
@@ -123,7 +123,7 @@
   .aksel-timeline__period--warning {
     background: var(--ax-bg-warning-moderate);
     border: solid 1px var(--ax-border-warning);
-    color: var(--ax-text-warning-icon);
+    color: var(--ax-text-warning-decoration);
   }
 
   .aksel-timeline__period--warning.aksel-timeline__period--clickable:hover {
@@ -140,7 +140,7 @@
   .aksel-timeline__period--danger {
     background: var(--ax-bg-danger-moderate);
     border: solid 1px var(--ax-border-danger);
-    color: var(--ax-text-danger-icon);
+    color: var(--ax-text-danger-decoration);
   }
 
   .aksel-timeline__period--danger.aksel-timeline__period--clickable:hover {
@@ -157,7 +157,7 @@
   .aksel-timeline__period--info {
     background: var(--ax-bg-info-moderate);
     border: solid 1px var(--ax-border-info);
-    color: var(--ax-text-info-icon);
+    color: var(--ax-text-info-decoration);
   }
 
   .aksel-timeline__period--info.aksel-timeline__period--clickable:hover {
@@ -174,7 +174,7 @@
   .aksel-timeline__period--neutral {
     background: var(--ax-bg-neutral-moderate);
     border: solid 1px var(--ax-border-neutral);
-    color: var(--ax-text-neutral-icon);
+    color: var(--ax-text-neutral-decoration);
   }
 
   .aksel-timeline__period--neutral.aksel-timeline__period--clickable:hover {
@@ -218,7 +218,7 @@
     background: var(--ax-bg-default);
     box-shadow: inset 0 0 0 4px var(--ax-bg-danger-strong);
     z-index: 2;
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     padding: var(--ax-space-8);
     border: none;
     position: relative;
@@ -226,7 +226,7 @@
 
   .aksel-timeline__pin-button:before {
     content: "";
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     width: 25px;
     height: 25px;
     position: absolute;
@@ -269,16 +269,16 @@
   }
 
   .aksel-timeline__zoom li:first-child .aksel-timeline__zoom-button {
-    border-radius: var(--ax-border-radius-medium) 0 0 var(--ax-border-radius-medium);
+    border-radius: var(--ax-radius-4) 0 0 var(--ax-radius-4);
   }
 
   .aksel-timeline__zoom li:last-child .aksel-timeline__zoom-button {
-    border-radius: 0 var(--ax-border-radius-medium) var(--ax-border-radius-medium) 0;
+    border-radius: 0 var(--ax-radius-4) var(--ax-radius-4) 0;
     border-width: 1px;
   }
 
   .aksel-timeline__zoom li:only-child .aksel-timeline__zoom-button {
-    border-radius: var(--ax-border-radius-medium);
+    border-radius: var(--ax-radius-4);
   }
 
   .aksel-timeline__zoom-button:not([aria-pressed="true"]):hover {
@@ -311,7 +311,7 @@
     box-shadow: var(--ax-shadow-dialog);
     border: 1px solid;
     border-color: var(--ax-border-neutral-subtleA);
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     padding: var(--ax-space-16) var(--ax-space-20);
   }
 

package/dist/darkside/version/7.22.0/component/timeline.min.css

@@ -0,0 +1 @@
+@layer aksel.components{.aksel-timeline{grid-template-columns:auto minmax(0,1fr);align-items:center;width:100%;min-width:fit-content;display:grid;position:relative}.aksel-timeline__axislabels{box-sizing:content-box;height:1rem;margin-bottom:var(--ax-space-4);grid-column:2;position:relative}.aksel-timeline__row-label{white-space:nowrap;width:auto;margin-right:var(--ax-space-16);align-items:center;gap:var(--ax-space-8);grid-column:1;min-height:1.5rem;display:flex}.aksel-timeline__row-label:where(:nth-last-child(2)){align-self:flex-end}.aksel-timeline__axislabels-label{color:var(--ax-text-neutral-subtle);white-space:nowrap;position:absolute}.aksel-timeline__row{background:var(--ax-bg-neutral-softA);margin:var(--ax-space-16) 0;grid-column:2;display:flex}.aksel-timeline__row--active{background:var(--ax-bg-accent-moderate)}.aksel-timeline__row:last-of-type{margin-bottom:0}.aksel-timeline__row-periods{width:100%;min-height:1.5rem;margin:0;position:relative}.aksel-timeline__row-periods>li{list-style-type:none}.aksel-timeline__period:focus-visible{z-index:4;outline:3px solid var(--ax-border-focus);outline-offset:3px}.aksel-timeline__period:focus-visible.aksel-timeline__period:focus-visible{box-shadow:0 0 0 3px var(--ax-bg-default)}.aksel-timeline__period{border-radius:var(--ax-radius-full);z-index:2;border:none;align-items:center;height:100%;padding:0;font-size:1rem;display:flex;position:absolute}.aksel-timeline__period--inner{margin:0 var(--ax-space-8);white-space:nowrap;text-overflow:clip;text-align:left;align-items:center;display:flex;overflow:hidden}.aksel-timeline__period--inner svg{flex-shrink:0}.aksel-timeline__period--clickable{cursor:pointer}.aksel-timeline__period--success{background:var(--ax-bg-success-moderate);border:solid 1px var(--ax-border-success);color:var(--ax-text-success-decoration)}.aksel-timeline__period--success.aksel-timeline__period--clickable:hover{background:var(--ax-bg-success-moderate-hover);border-color:var(--ax-border-success-strong)}.aksel-timeline__period--success.aksel-timeline__period--clickable.aksel-timeline__period--selected{background:var(--ax-bg-success-strong-pressed);color:var(--ax-text-success-contrast);border:none}.aksel-timeline__period--warning{background:var(--ax-bg-warning-moderate);border:solid 1px var(--ax-border-warning);color:var(--ax-text-warning-decoration)}.aksel-timeline__period--warning.aksel-timeline__period--clickable:hover{background:var(--ax-bg-warning-moderate-hover);border-color:var(--ax-border-warning-strong)}.aksel-timeline__period--warning.aksel-timeline__period--clickable.aksel-timeline__period--selected{background:var(--ax-bg-warning-strong-pressed);color:var(--ax-text-warning-contrast);border:none}.aksel-timeline__period--danger{background:var(--ax-bg-danger-moderate);border:solid 1px var(--ax-border-danger);color:var(--ax-text-danger-decoration)}.aksel-timeline__period--danger.aksel-timeline__period--clickable:hover{background:var(--ax-bg-danger-moderate-hover);border-color:var(--ax-border-danger-strong)}.aksel-timeline__period--danger.aksel-timeline__period--clickable.aksel-timeline__period--selected{background:var(--ax-bg-danger-strong-pressed);color:var(--ax-text-danger-contrast);border:none}.aksel-timeline__period--info{background:var(--ax-bg-info-moderate);border:solid 1px var(--ax-border-info);color:var(--ax-text-info-decoration)}.aksel-timeline__period--info.aksel-timeline__period--clickable:hover{background:var(--ax-bg-info-moderate-hover);border-color:var(--ax-border-info-strong)}.aksel-timeline__period--info.aksel-timeline__period--clickable.aksel-timeline__period--selected{background:var(--ax-bg-info-strong-pressed);color:var(--ax-text-info-contrast);border:none}.aksel-timeline__period--neutral{background:var(--ax-bg-neutral-moderate);border:solid 1px var(--ax-border-neutral);color:var(--ax-text-neutral-decoration)}.aksel-timeline__period--neutral.aksel-timeline__period--clickable:hover{background:var(--ax-bg-neutral-moderate-hover);border-color:var(--ax-border-neutral-strong)}.aksel-timeline__period--neutral.aksel-timeline__period--clickable.aksel-timeline__period--selected{background:var(--ax-bg-neutral-strong-pressed);color:var(--ax-text-neutral-contrast);border:none}.aksel-timeline__period--connected-both{border-radius:0}.aksel-timeline__period--connected-right{border-top-right-radius:0;border-bottom-right-radius:0}.aksel-timeline__period--connected-left{border-top-left-radius:0;border-bottom-left-radius:0}.aksel-timeline__pin-wrapper{z-index:1;isolation:isolate;flex-direction:column-reverse;grid-column:2;height:100%;display:flex;position:absolute;top:0}.aksel-timeline__pin-button{cursor:pointer;background:var(--ax-bg-default);box-shadow:inset 0 0 0 4px var(--ax-bg-danger-strong);z-index:2;border-radius:var(--ax-radius-full);padding:var(--ax-space-8);border:none;position:relative}.aksel-timeline__pin-button:before{content:"";border-radius:var(--ax-radius-full);width:25px;height:25px;position:absolute;inset:-9px 0 0 -9px}.aksel-timeline__pin-button:hover{box-shadow:inset 0 0 0 4px var(--ax-bg-danger-strong-hover)}.aksel-timeline__pin-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ax-border-danger-strong),0 0 0 3px var(--ax-bg-default);outline:3px solid var(--ax-border-focus);outline-offset:3px}.aksel-timeline__pin-wrapper:before{content:"";background:var(--ax-border-neutral-strong);width:1px;height:calc(100% - 1.8rem);margin:0 auto;top:.9rem}.aksel-timeline__zoom{margin-top:var(--ax-space-24);float:right;list-style-type:none;display:flex}.aksel-timeline__zoom-button{all:unset;cursor:pointer;border:1px solid var(--ax-border-neutral);background:var(--ax-bg-default);border-width:1px 0 1px 1px;padding:6px 9px 6px 8px}.aksel-timeline__zoom li:first-child .aksel-timeline__zoom-button{border-radius:var(--ax-radius-4) 0 0 var(--ax-radius-4)}.aksel-timeline__zoom li:last-child .aksel-timeline__zoom-button{border-radius:0 var(--ax-radius-4) var(--ax-radius-4) 0;border-width:1px}.aksel-timeline__zoom li:only-child .aksel-timeline__zoom-button{border-radius:var(--ax-radius-4)}.aksel-timeline__zoom-button:not([aria-pressed=true]):hover{background:var(--ax-bg-neutral-moderate-hoverA)}.aksel-timeline__zoom-button[aria-pressed=true]{background:var(--ax-bg-neutral-strong-pressed);border-color:var(--ax-bg-neutral-strong-pressed);color:var(--ax-text-neutral-contrast)}.aksel-timeline__zoom li:focus-within{z-index:5}.aksel-timeline__zoom-button:focus-visible{box-shadow:0 0 0 1px var(--ax-bg-default),0 0 0 4px var(--ax-border-focus);border-width:1px}.aksel-timeline__zoom li:not(:last-child) .aksel-timeline__zoom-button:focus-visible{margin-right:2px;padding-right:6px}.aksel-timeline__popover{z-index:5;background-color:var(--ax-bg-raised);box-shadow:var(--ax-shadow-dialog);border:1px solid;border-color:var(--ax-border-neutral-subtleA);border-radius:var(--ax-radius-8);padding:var(--ax-space-16) var(--ax-space-20)}.aksel-timeline__popover:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px}@media (forced-colors: active){.aksel-timeline__period:focus{outline-offset:3px;outline:3px solid highlight}.aksel-timeline__period--success,.aksel-timeline__period--warning,.aksel-timeline__period--info,.aksel-timeline__period--neutral,.aksel-timeline__period--danger{forced-color-adjust:none}.aksel-timeline__row,.aksel-timeline__pin-wrapper:before{border:1px solid rgba(0,0,0,0)}.aksel-timeline__pin-button{outline:4px solid rgba(0,0,0,0)}.aksel-timeline__pin-button:focus,.aksel-timeline__pin-button:focus-visible{outline-offset:3px;box-shadow:none;outline:4px solid highlight}}}

package/dist/darkside/version/{7.21.1 → 7.22.0}/component/togglegroup.css

@@ -10,7 +10,7 @@
   }
 
   .aksel-toggle-group {
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     background-color: var(--ax-bg-input);
     box-shadow: inset 0 0 0 1px var(--ax-border-neutral);
     grid-auto-columns: 1fr;
@@ -24,7 +24,7 @@
     cursor: pointer;
     min-height: 3rem;
     color: var(--ax-text-neutral);
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     background-color: rgba(0, 0, 0, 0);
     border: none;
     justify-content: center;

package/dist/darkside/version/7.22.0/component/togglegroup.min.css

@@ -0,0 +1 @@
+@layer aksel.components{.aksel-toggle-group__wrapper{justify-items:start;gap:var(--ax-space-8);display:grid}.aksel-toggle-group__wrapper--fill{justify-items:initial}.aksel-toggle-group{border-radius:var(--ax-radius-8);background-color:var(--ax-bg-input);box-shadow:inset 0 0 0 1px var(--ax-border-neutral);grid-auto-columns:1fr;grid-auto-flow:column;gap:1px;display:inline-grid}.aksel-toggle-group__button{padding:var(--ax-space-4) var(--ax-space-12);cursor:pointer;min-height:3rem;color:var(--ax-text-neutral);border-radius:var(--ax-radius-8);background-color:#0000;border:none;justify-content:center;align-items:center;min-width:fit-content;display:inline-flex;position:relative}.aksel-toggle-group__button:hover{background-color:var(--ax-bg-accent-moderate-hoverA);color:var(--ax-text-neutral)}.aksel-toggle-group__button:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px;z-index:1}.aksel-toggle-group__button[data-selected=true]{background-color:var(--ax-bg-accent-strong-pressed);color:var(--ax-text-accent-contrast)}.aksel-toggle-group__button:not([data-selected=true],:first-child,.aksel-toggle-group__button[data-selected=true]+.aksel-toggle-group__button):before{content:"";background-color:var(--ax-border-neutral-subtleA);width:1px;height:50%;display:block;position:absolute;left:-1px}.aksel-toggle-group__button-inner{align-items:center;gap:var(--ax-space-8);display:flex}.aksel-toggle-group__button-inner>*{flex-shrink:0}.aksel-toggle-group__button-inner>svg{font-size:var(--ax-font-size-heading-medium)}:where(.aksel-toggle-group--neutral) .aksel-toggle-group__button:hover{background-color:var(--ax-bg-neutral-moderate-hoverA)}:where(.aksel-toggle-group--neutral) .aksel-toggle-group__button[data-selected=true]{background-color:var(--ax-bg-neutral-strong-pressed);color:var(--ax-text-neutral-contrast)}.aksel-toggle-group--small .aksel-toggle-group__button{padding:var(--ax-space-2) var(--ax-space-12);min-height:2rem}.aksel-toggle-group--small .aksel-toggle-group__button-inner>svg{font-size:var(--ax-font-size-xlarge)}@media (forced-colors: active){.aksel-toggle-group{border:2px solid rgba(0,0,0,0)}.aksel-toggle-group__button:hover{color:highlight;background-color:highlighttext;outline:1px solid highlight}.aksel-toggle-group__button[data-selected=true]{color:selecteditemtext;forced-color-adjust:none;background-color:selecteditem}.aksel-toggle-group__button:focus-visible{outline-color:highlight}}}

package/dist/darkside/version/{7.21.1 → 7.22.0}/component/tooltip.css

@@ -3,7 +3,7 @@
     z-index: 3000;
     background-color: var(--ax-bg-neutral-strong);
     color: var(--ax-text-neutral-contrast);
-    border-radius: var(--ax-border-radius-medium);
+    border-radius: var(--ax-radius-4);
     padding: 0 var(--ax-space-6);
     text-align: center;
     box-shadow: var(--ax-shadow-dialog);
@@ -111,7 +111,7 @@
     font-family: var(--ax-font-family);
     color: var(--ax-text-neutral);
     padding: 0 var(--ax-space-4);
-    border-radius: var(--ax-border-radius-small);
+    border-radius: var(--ax-radius-2);
     background: var(--ax-bg-neutral-moderate);
     justify-content: center;
     align-items: center;

package/dist/darkside/version/7.22.0/component/tooltip.min.css

@@ -0,0 +1 @@
+@layer aksel.components{.aksel-tooltip{z-index:3000;background-color:var(--ax-bg-neutral-strong);color:var(--ax-text-neutral-contrast);border-radius:var(--ax-radius-4);padding:0 var(--ax-space-6);text-align:center;box-shadow:var(--ax-shadow-dialog);border:1px solid rgba(0,0,0,0);flex-direction:column;align-items:center;animation-duration:.15s;animation-timing-function:cubic-bezier(.16,1,.3,1);display:flex}.aksel-tooltip:focus{outline:0}.navds-tooltip__arrow{z-index:-1;background-color:var(--ax-bg-neutral-strong);border-radius:1px;width:.5rem;height:.5rem;position:absolute;transform:rotate(45deg)}@media (forced-colors: active){.navds-tooltip__arrow{display:none}}.aksel-tooltip:where([data-state=open]):where([data-side=bottom]){animation-name:aksel-tooltip-from-bottom,aksel-tooltip-fade-in}.aksel-tooltip:where([data-state=open]):where([data-side=top]){animation-name:aksel-tooltip-from-top,aksel-tooltip-fade-in}.aksel-tooltip:where([data-state=open]):where([data-side=left]){animation-name:aksel-tooltip-from-left,aksel-tooltip-fade-in}.aksel-tooltip:where([data-state=open]):where([data-side=right]){animation-name:aksel-tooltip-from-right,aksel-tooltip-fade-in}@keyframes aksel-tooltip-from-bottom{0%{transform:translateY(-4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-top{0%{transform:translateY(4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-left{0%{transform:translate(4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-right{0%{transform:translate(-4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-fade-in{0%{opacity:.01}to{opacity:1}}.aksel-tooltip__keys{padding-bottom:var(--ax-space-4);gap:var(--ax-space-4);display:flex}.aksel-tooltip__key{font-family:var(--ax-font-family);color:var(--ax-text-neutral);padding:0 var(--ax-space-4);border-radius:var(--ax-radius-2);background:var(--ax-bg-neutral-moderate);justify-content:center;align-items:center;min-width:1.125rem;height:1.125rem;display:inline-flex}@media (forced-colors: active){.aksel-tooltip__key{outline:1px solid}}}