@navikt/ds-css 7.27.0 → 7.28.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-css
 
+## 7.28.0
+
+## 7.27.1
+
+### Patch Changes
+
+- Stepper: Increase size of circle from 28px to 32px to sync with new Process component. ([#3968](https://github.com/navikt/aksel/pull/3968))
+
 ## 7.27.0
 
 ### Patch Changes

package/darkside/stepper.darkside.css

@@ -1,5 +1,5 @@
 .aksel-stepper {
-  --__axc-stepper-circle-size: 1.75rem;
+  --__axc-stepper-circle-size: 2rem;
   --__axc-stepper-border-width: 2px;
   --__axc-stepper-line-length: 1rem;
 
@@ -95,6 +95,7 @@
   grid-column: circle;
   display: inline-grid;
   place-items: center;
+  place-content: center;
   width: var(--__axc-stepper-circle-size);
   height: var(--__axc-stepper-circle-size);
   border: var(--__axc-stepper-border-width) solid currentColor;
@@ -104,7 +105,7 @@
 
 .aksel-stepper__circle--success {
   background: none;
-  font-size: var(--__axc-stepper-circle-size);
+  font-size: calc(var(--__axc-stepper-circle-size) * 0.75);
 }
 
 .aksel-stepper__step[data-interactive="true"] {
@@ -173,7 +174,7 @@
   min-width: fit-content;
   line-height: 1.5;
   grid-column: content;
-  padding-top: 0.035rem;
+  padding-top: 0.16rem;
 }
 
 /* Horizontal */

package/dist/component/stepper.css

@@ -1,5 +1,5 @@
 .navds-stepper {
-  --navds-stepper-circle-size: 1.75rem;
+  --navds-stepper-circle-size: 2rem;
   --navds-stepper-border-width: 2px;
   --navds-stepper-line-length: 1rem;
 
@@ -67,7 +67,8 @@
   text-decoration: none;
   cursor: pointer;
   padding: var(--navds-stepper-border-width);
-  margin: calc(var(--navds-stepper-border-width) * -1) calc(var(--navds-stepper-border-width) * -1) 1.75rem;
+  margin: calc(var(--navds-stepper-border-width) * -1) calc(var(--navds-stepper-border-width) * -1)
+    var(--navds-stepper-circle-size);
 }
 
 .navds-stepper__item:last-child .navds-stepper__step {
@@ -141,6 +142,7 @@ button.navds-stepper__step {
   grid-column: circle;
   display: inline-grid;
   place-items: center;
+  place-content: center;
   flex-shrink: 0;
   width: var(--navds-stepper-circle-size);
   height: var(--navds-stepper-circle-size);
@@ -152,7 +154,9 @@ button.navds-stepper__step {
 .navds-stepper__circle--success {
   border: none;
   background: none;
-  font-size: 1.75rem;
+  font-size: calc(var(--navds-stepper-circle-size) * 0.75);
+  width: var(--navds-stepper-circle-size);
+  height: var(--navds-stepper-circle-size);
   color: var(--a-text-on-action);
   background-color: var(--ac-stepper-text, var(--a-surface-action));
 }
@@ -161,7 +165,7 @@ button.navds-stepper__step {
   min-width: fit-content;
   line-height: 1.5;
   grid-column: content;
-  padding-top: 0.035rem;
+  padding-top: 0.16rem;
 }
 
 /* Horizontal */

package/dist/component/stepper.min.css

@@ -1 +1 @@
-.navds-stepper{--navds-stepper-circle-size:1.75rem;--navds-stepper-border-width:2px;--navds-stepper-line-length:1rem;color:var(--ac-stepper-text,var(--a-surface-action));font-weight:600;line-height:1;list-style:none;margin:0;padding-left:0}.navds-stepper--horizontal{align-items:flex-start;display:flex;text-align:center}.navds-stepper__item{display:grid;gap:.5rem;grid-template-columns:var(--navds-stepper-circle-size) auto;grid-template-rows:[line-1] auto [step-start] var(--navds-stepper-circle-size) [line-2 step-end] auto;justify-items:flex-start}.navds-stepper__line{background-color:var(--ac-stepper-line,var(--a-border-default));grid-column:1;height:100%;justify-self:center;min-height:var(--navds-stepper-line-length);width:var(--navds-stepper-border-width)}.navds-stepper__item--behind.navds-stepper__item--completed+.navds-stepper__item>.navds-stepper__line--1,.navds-stepper__step--behind.navds-stepper__step--completed+.navds-stepper__line{background-color:var(--ac-stepper-line-completed,var(--a-border-selected))}.navds-stepper__line--1{display:none;grid-row:line-1}.navds-stepper__line--2{grid-row:line-2}:where(.navds-stepper__item:last-of-type) .navds-stepper__line--2{display:none}.navds-stepper__step{cursor:pointer;display:grid;gap:var(--a-spacing-2);grid-column:1/-1;grid-row:2/-1;grid-template-columns:[circle] var(--navds-stepper-circle-size) [content] auto;justify-content:flex-start;margin:calc(var(--navds-stepper-border-width)*-1) calc(var(--navds-stepper-border-width)*-1) 1.75rem;padding:var(--navds-stepper-border-width);text-decoration:none}.navds-stepper__item:last-child .navds-stepper__step{margin-bottom:0}@media (forced-colors:active){.navds-stepper__step{background-color:ButtonFace;color:ButtonText}.navds-stepper__circle.navds-stepper__circle{border:0}.navds-stepper__step .navds-stepper__circle{background-color:ButtonText;border-color:ButtonText;color:ButtonFace;forced-color-adjust:none}.navds-stepper__step.navds-stepper__step:focus-visible{box-shadow:none;outline:2px solid highlight;outline-offset:2px}.navds-stepper__step.navds-stepper__step--active .navds-stepper__circle{background-color:highlight;border-color:highlighttext;color:highlighttext;forced-color-adjust:none}.navds-stepper__line{background-color:ButtonText}}button.navds-stepper__step{-webkit-appearance:none;appearance:none;background-color:initial;border:none;color:inherit;font:inherit;text-align:inherit}.navds-stepper__step--non-interactive{color:var(--ac-stepper-non-interactive,var(--a-text-subtle));cursor:default}:where(.navds-stepper__step):focus-visible{box-shadow:var(--a-shadow-focus);isolation:isolate;outline:none}@supports not selector(:focus-visible){.navds-stepper__step:focus{box-shadow:var(--a-shadow-focus);isolation:isolate;outline:none}}.navds-stepper__circle{border:var(--navds-stepper-border-width) solid;border-radius:var(--a-border-radius-full);display:inline-grid;flex-shrink:0;grid-column:circle;height:var(--navds-stepper-circle-size);line-height:1;place-items:center;width:var(--navds-stepper-circle-size)}.navds-stepper__circle--success{background:none;background-color:var(--ac-stepper-text,var(--a-surface-action));border:none;color:var(--a-text-on-action);font-size:1.75rem}.navds-stepper__content{grid-column:content;line-height:1.5;min-width:-webkit-fit-content;min-width:fit-content;padding-top:.035rem}:where(.navds-stepper--horizontal) .navds-stepper__item{flex:1 1 100%;grid-template-columns:[line-1-start] 1fr [step-start] auto [line-1-end] var(--navds-stepper-circle-size) [line-2-start] auto [step-end] 1fr [line-2-end];grid-template-rows:var(--navds-stepper-circle-size) auto}:where(.navds-stepper--horizontal) .navds-stepper__line{align-self:center;display:block;grid-row:1;height:var(--navds-stepper-border-width);min-height:auto;width:100%}:where(.navds-stepper--horizontal) .navds-stepper__line--1{grid-column:line-1}:where(.navds-stepper--horizontal) .navds-stepper__line--2{grid-column:line-2}:where(.navds-stepper--horizontal .navds-stepper__item:first-of-type) .navds-stepper__line--1,:where(.navds-stepper--horizontal .navds-stepper__item:last-of-type) .navds-stepper__line--2{visibility:hidden}:where(.navds-stepper--horizontal) .navds-stepper__step{display:grid;grid-column:step;grid-row:1/-1;grid-template-columns:[content-start] auto [circle] var(--navds-stepper-circle-size) [content-end] auto;grid-template-rows:[circle] var(--navds-stepper-circle-size) [content] auto;margin-bottom:0;place-items:center center}:where(.navds-stepper--horizontal) .navds-stepper__circle{grid-column:2;grid-row:circle}:where(.navds-stepper--horizontal) .navds-stepper__content{grid-column:1/-1;grid-row:content;max-width:24ch}:where(.navds-stepper__step--active) .navds-stepper__content{color:var(--ac-stepper-active,var(--a-text-action-selected))}.navds-stepper__step:hover:where(:not(.navds-stepper__step--non-interactive)){color:var(--ac-stepper-hover-active,var(--a-text-action-hover))}:where(.navds-stepper__step:hover) .navds-stepper__content{text-decoration:underline}:where(.navds-stepper__step--non-interactive:hover,.navds-stepper__step--active:hover) .navds-stepper__content{text-decoration:none}:where(.navds-stepper__step--active) .navds-stepper__circle{background-color:var(--ac-stepper-active-bg,var(--a-surface-action-selected));border-color:var(--ac-stepper-active-border,var(--a-border-action-selected));color:var(--ac-stepper-active-text,var(--a-text-on-action))}:where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle{background-color:var(--ac-stepper-hover-bg,var(--a-surface-action-subtle-hover))}:where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle--success{background-color:var(--ac-stepper-text,var(--a-surface-action-hover))}:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__content{color:var(--ac-stepper-non-interactive-active,var(--a-text-default))}.navds-stepper__item--non-interactive.navds-stepper__item--behind.navds-stepper__item--completed+.navds-stepper__item>.navds-stepper__line--1,.navds-stepper__step--non-interactive.navds-stepper__step--behind.navds-stepper__step--completed+.navds-stepper__line{background-color:var(--ac-stepper-non-interactive-line-completed,var(--a-border-strong))}:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle{background-color:var(--ac-stepper-non-interactive-active-bg,var(--a-surface-inverted));border-color:var(--ac-stepper-non-interactive-active-border,var(--a-surface-inverted));color:var(--ac-stepper-non-interactive-active-text,var(--a-text-on-inverted))}:where(.navds-stepper__step--non-interactive:hover) .navds-stepper__circle{background-color:initial}:where(.navds-stepper__step--non-interactive.navds-stepper__step--active:hover) .navds-stepper__circle{background-color:var(--ac-stepper-non-interactive-active-bg,var(--a-surface-inverted))}:where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle{background-color:inherit;color:var(--ac-stepper-active-completed,var(--a-text-action-selected))}:where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle--success{background-color:var(--ac-stepper-active-completed,var(--a-surface-action-selected));color:var(--a-text-on-action)}:where(.navds-stepper__step--non-interactive,.navds-stepper__step--non-interactive:hover) .navds-stepper__circle--success{background-color:var(--ac-stepper-non-interactive-completed-bg,var(--a-surface-neutral));color:var(--a-text-on-inverted)}:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle--success{background-color:var(--ac-stepper-non-interactive-active-completed,var(--a-surface-inverted));color:var(--a-text-on-inverted)}:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive) .navds-stepper__circle{color:var(--ac-stepper-non-interactive-active-completed,var(--a-text-default))}:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive) .navds-stepper__circle--success{color:var(--ac-stepper-non-interactive-active-completed,var(--a-text-on-inverted))}
+.navds-stepper{--navds-stepper-circle-size:2rem;--navds-stepper-border-width:2px;--navds-stepper-line-length:1rem;color:var(--ac-stepper-text,var(--a-surface-action));font-weight:600;line-height:1;list-style:none;margin:0;padding-left:0}.navds-stepper--horizontal{align-items:flex-start;display:flex;text-align:center}.navds-stepper__item{display:grid;gap:.5rem;grid-template-columns:var(--navds-stepper-circle-size) auto;grid-template-rows:[line-1] auto [step-start] var(--navds-stepper-circle-size) [line-2 step-end] auto;justify-items:flex-start}.navds-stepper__line{background-color:var(--ac-stepper-line,var(--a-border-default));grid-column:1;height:100%;justify-self:center;min-height:var(--navds-stepper-line-length);width:var(--navds-stepper-border-width)}.navds-stepper__item--behind.navds-stepper__item--completed+.navds-stepper__item>.navds-stepper__line--1,.navds-stepper__step--behind.navds-stepper__step--completed+.navds-stepper__line{background-color:var(--ac-stepper-line-completed,var(--a-border-selected))}.navds-stepper__line--1{display:none;grid-row:line-1}.navds-stepper__line--2{grid-row:line-2}:where(.navds-stepper__item:last-of-type) .navds-stepper__line--2{display:none}.navds-stepper__step{cursor:pointer;display:grid;gap:var(--a-spacing-2);grid-column:1/-1;grid-row:2/-1;grid-template-columns:[circle] var(--navds-stepper-circle-size) [content] auto;justify-content:flex-start;margin:calc(var(--navds-stepper-border-width)*-1) calc(var(--navds-stepper-border-width)*-1) var(--navds-stepper-circle-size);padding:var(--navds-stepper-border-width);text-decoration:none}.navds-stepper__item:last-child .navds-stepper__step{margin-bottom:0}@media (forced-colors:active){.navds-stepper__step{background-color:ButtonFace;color:ButtonText}.navds-stepper__circle.navds-stepper__circle{border:0}.navds-stepper__step .navds-stepper__circle{background-color:ButtonText;border-color:ButtonText;color:ButtonFace;forced-color-adjust:none}.navds-stepper__step.navds-stepper__step:focus-visible{box-shadow:none;outline:2px solid highlight;outline-offset:2px}.navds-stepper__step.navds-stepper__step--active .navds-stepper__circle{background-color:highlight;border-color:highlighttext;color:highlighttext;forced-color-adjust:none}.navds-stepper__line{background-color:ButtonText}}button.navds-stepper__step{-webkit-appearance:none;appearance:none;background-color:initial;border:none;color:inherit;font:inherit;text-align:inherit}.navds-stepper__step--non-interactive{color:var(--ac-stepper-non-interactive,var(--a-text-subtle));cursor:default}:where(.navds-stepper__step):focus-visible{box-shadow:var(--a-shadow-focus);isolation:isolate;outline:none}@supports not selector(:focus-visible){.navds-stepper__step:focus{box-shadow:var(--a-shadow-focus);isolation:isolate;outline:none}}.navds-stepper__circle{border:var(--navds-stepper-border-width) solid;border-radius:var(--a-border-radius-full);display:inline-grid;flex-shrink:0;grid-column:circle;line-height:1;place-content:center;place-items:center}.navds-stepper__circle,.navds-stepper__circle--success{height:var(--navds-stepper-circle-size);width:var(--navds-stepper-circle-size)}.navds-stepper__circle--success{background:none;background-color:var(--ac-stepper-text,var(--a-surface-action));border:none;color:var(--a-text-on-action);font-size:calc(var(--navds-stepper-circle-size)*.75)}.navds-stepper__content{grid-column:content;line-height:1.5;min-width:-webkit-fit-content;min-width:fit-content;padding-top:.16rem}:where(.navds-stepper--horizontal) .navds-stepper__item{flex:1 1 100%;grid-template-columns:[line-1-start] 1fr [step-start] auto [line-1-end] var(--navds-stepper-circle-size) [line-2-start] auto [step-end] 1fr [line-2-end];grid-template-rows:var(--navds-stepper-circle-size) auto}:where(.navds-stepper--horizontal) .navds-stepper__line{align-self:center;display:block;grid-row:1;height:var(--navds-stepper-border-width);min-height:auto;width:100%}:where(.navds-stepper--horizontal) .navds-stepper__line--1{grid-column:line-1}:where(.navds-stepper--horizontal) .navds-stepper__line--2{grid-column:line-2}:where(.navds-stepper--horizontal .navds-stepper__item:first-of-type) .navds-stepper__line--1,:where(.navds-stepper--horizontal .navds-stepper__item:last-of-type) .navds-stepper__line--2{visibility:hidden}:where(.navds-stepper--horizontal) .navds-stepper__step{display:grid;grid-column:step;grid-row:1/-1;grid-template-columns:[content-start] auto [circle] var(--navds-stepper-circle-size) [content-end] auto;grid-template-rows:[circle] var(--navds-stepper-circle-size) [content] auto;margin-bottom:0;place-items:center center}:where(.navds-stepper--horizontal) .navds-stepper__circle{grid-column:2;grid-row:circle}:where(.navds-stepper--horizontal) .navds-stepper__content{grid-column:1/-1;grid-row:content;max-width:24ch}:where(.navds-stepper__step--active) .navds-stepper__content{color:var(--ac-stepper-active,var(--a-text-action-selected))}.navds-stepper__step:hover:where(:not(.navds-stepper__step--non-interactive)){color:var(--ac-stepper-hover-active,var(--a-text-action-hover))}:where(.navds-stepper__step:hover) .navds-stepper__content{text-decoration:underline}:where(.navds-stepper__step--non-interactive:hover,.navds-stepper__step--active:hover) .navds-stepper__content{text-decoration:none}:where(.navds-stepper__step--active) .navds-stepper__circle{background-color:var(--ac-stepper-active-bg,var(--a-surface-action-selected));border-color:var(--ac-stepper-active-border,var(--a-border-action-selected));color:var(--ac-stepper-active-text,var(--a-text-on-action))}:where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle{background-color:var(--ac-stepper-hover-bg,var(--a-surface-action-subtle-hover))}:where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle--success{background-color:var(--ac-stepper-text,var(--a-surface-action-hover))}:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__content{color:var(--ac-stepper-non-interactive-active,var(--a-text-default))}.navds-stepper__item--non-interactive.navds-stepper__item--behind.navds-stepper__item--completed+.navds-stepper__item>.navds-stepper__line--1,.navds-stepper__step--non-interactive.navds-stepper__step--behind.navds-stepper__step--completed+.navds-stepper__line{background-color:var(--ac-stepper-non-interactive-line-completed,var(--a-border-strong))}:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle{background-color:var(--ac-stepper-non-interactive-active-bg,var(--a-surface-inverted));border-color:var(--ac-stepper-non-interactive-active-border,var(--a-surface-inverted));color:var(--ac-stepper-non-interactive-active-text,var(--a-text-on-inverted))}:where(.navds-stepper__step--non-interactive:hover) .navds-stepper__circle{background-color:initial}:where(.navds-stepper__step--non-interactive.navds-stepper__step--active:hover) .navds-stepper__circle{background-color:var(--ac-stepper-non-interactive-active-bg,var(--a-surface-inverted))}:where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle{background-color:inherit;color:var(--ac-stepper-active-completed,var(--a-text-action-selected))}:where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle--success{background-color:var(--ac-stepper-active-completed,var(--a-surface-action-selected));color:var(--a-text-on-action)}:where(.navds-stepper__step--non-interactive,.navds-stepper__step--non-interactive:hover) .navds-stepper__circle--success{background-color:var(--ac-stepper-non-interactive-completed-bg,var(--a-surface-neutral));color:var(--a-text-on-inverted)}:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle--success{background-color:var(--ac-stepper-non-interactive-active-completed,var(--a-surface-inverted));color:var(--a-text-on-inverted)}:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive) .navds-stepper__circle{color:var(--ac-stepper-non-interactive-active-completed,var(--a-text-default))}:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive) .navds-stepper__circle--success{color:var(--ac-stepper-non-interactive-active-completed,var(--a-text-on-inverted))}

package/dist/components.css

@@ -7164,7 +7164,7 @@ span.rdp-weeknumber {
 }
 
 .navds-stepper {
-  --navds-stepper-circle-size: 1.75rem;
+  --navds-stepper-circle-size: 2rem;
   --navds-stepper-border-width: 2px;
   --navds-stepper-line-length: 1rem;
 
@@ -7232,7 +7232,8 @@ span.rdp-weeknumber {
   text-decoration: none;
   cursor: pointer;
   padding: var(--navds-stepper-border-width);
-  margin: calc(var(--navds-stepper-border-width) * -1) calc(var(--navds-stepper-border-width) * -1) 1.75rem;
+  margin: calc(var(--navds-stepper-border-width) * -1) calc(var(--navds-stepper-border-width) * -1)
+    var(--navds-stepper-circle-size);
 }
 
 .navds-stepper__item:last-child .navds-stepper__step {
@@ -7306,6 +7307,7 @@ button.navds-stepper__step {
   grid-column: circle;
   display: inline-grid;
   place-items: center;
+  place-content: center;
   flex-shrink: 0;
   width: var(--navds-stepper-circle-size);
   height: var(--navds-stepper-circle-size);
@@ -7317,7 +7319,9 @@ button.navds-stepper__step {
 .navds-stepper__circle--success {
   border: none;
   background: none;
-  font-size: 1.75rem;
+  font-size: calc(var(--navds-stepper-circle-size) * 0.75);
+  width: var(--navds-stepper-circle-size);
+  height: var(--navds-stepper-circle-size);
   color: var(--a-text-on-action);
   background-color: var(--ac-stepper-text, var(--a-surface-action));
 }
@@ -7326,7 +7330,7 @@ button.navds-stepper__step {
   min-width: fit-content;
   line-height: 1.5;
   grid-column: content;
-  padding-top: 0.035rem;
+  padding-top: 0.16rem;
 }
 
 /* Horizontal */