Merge branch 'main' into darkside-focus-rewrite

@navikt/core/css/darkside/action-menu.darkside.css

@@ -1,7 +1,7 @@
 /* --------------------------- ActionMenu content --------------------------- */
 .navds-action-menu__content {
   overflow: hidden;
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-border-radius-xlarge);
   border: 1px solid var(--ax-border-subtleA);
   box-shadow: var(--ax-shadow-dialog);
   transition: transform 250ms cubic-bezier(0, 0, 0, 1) allow-discrete;
@@ -39,7 +39,7 @@
   --__axc-action-menu-item-pl: var(--ax-space-8);
   --__axc-action-menu-item-height: 2rem;
 
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--ax-bg-raised);
   min-width: 128px;
   max-width: min(95vw, 640px);
@@ -60,7 +60,7 @@
   gap: var(--ax-space-8);
   min-height: var(--__axc-action-menu-item-height);
   cursor: default;
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   position: relative;
   padding-left: var(--__axc-action-menu-item-pl);
   padding-right: var(--__axc-action-menu-item-pr);

@navikt/core/css/darkside/baseline/fonts.darkside.css

@@ -2,7 +2,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-cyrillic_ext.woff2) format("woff2");
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
@@ -12,7 +12,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-cyrillic.woff2) format("woff2");
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
@@ -22,7 +22,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin_ext.woff2) format("woff2");
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
@@ -33,7 +33,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
@@ -44,7 +44,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-cyrillic_ext.woff2) format("woff2");
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
@@ -54,7 +54,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-cyrillic.woff2) format("woff2");
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
@@ -64,7 +64,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-latin_ext.woff2) format("woff2");
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
@@ -75,7 +75,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
@@ -88,7 +88,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin_ext.woff2) format("woff2");
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
@@ -99,7 +99,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
@@ -110,7 +110,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-latin_ext.woff2) format("woff2");
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
@@ -121,7 +121,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,

@navikt/core/css/darkside/button.darkside.css

@@ -5,7 +5,7 @@
   --__axc-button-border-width: 2px;
 
   padding: var(--ax-space-12) var(--ax-space-20);
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   display: inline-flex;
   cursor: pointer;
   text-decoration: none;
@@ -161,7 +161,7 @@
 * .navds-button--secondary-neutral *
  **************************/
 .navds-button--secondary-neutral {
-  --__axc-button-border-color: var(--ax-border-strong);
+  --__axc-button-border-color: var(--ax-border-default);
 
   background-color: transparent;
   color: var(--ax-text-default);
@@ -180,7 +180,7 @@
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    --__axc-button-border-color: var(--ax-border-strong);
+    --__axc-button-border-color: var(--ax-border-default);
 
     color: var(--ax-text-default);
     background-color: transparent;

@navikt/core/css/darkside/copybutton.darkside.css

@@ -5,7 +5,7 @@
   margin: 0;
   text-decoration: none;
   border: none;
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   padding: var(--__axc-copybutton-padding);
   display: grid;
   place-content: center;

@navikt/core/css/darkside/date.darkside.css

@@ -35,21 +35,19 @@
     width: 2.5rem;
     height: 2.5rem;
     text-align: center;
-    border-radius: var(--ax-border-radius-medium);
+    border-radius: var(--ax-border-radius-large);
   }
 
   .rdp-day_range_start {
-    border-radius: var(--ax-border-radius-xlarge) var(--ax-border-radius-medium) var(--ax-border-radius-medium)
-      var(--ax-border-radius-xlarge);
+    border-radius: 100% var(--ax-border-radius-xlarge) var(--ax-border-radius-xlarge) 100%;
   }
 
   .rdp-day_range_end:not(.rdp-day_range_start) {
-    border-radius: var(--ax-border-radius-medium) var(--ax-border-radius-xlarge) var(--ax-border-radius-xlarge)
-      var(--ax-border-radius-medium);
+    border-radius: var(--ax-border-radius-large) 100% 100% var(--ax-border-radius-large);
   }
 
   .rdp-day_range_start.rdp-day_range_end {
-    border-radius: var(--ax-border-radius-xlarge);
+    border-radius: var(--ax-border-radius-large);
   }
 
   .navds-date__field {
@@ -142,7 +140,7 @@
   width: 3rem;
   height: 3rem;
   text-transform: capitalize;
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   cursor: pointer;
 }
 
@@ -192,7 +190,7 @@
   text-decoration: none;
   border: none;
   background: none;
-  border-radius: calc(var(--ax-border-radius-medium) - 1px);
+  border-radius: calc(var(--ax-border-radius-large) - 1px);
   padding: var(--ax-space-12);
   align-items: center;
   justify-content: center;

@navikt/core/css/darkside/expansioncard.darkside.css

@@ -1,6 +1,6 @@
 .navds-expansioncard {
   --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
-  --__axc-expansioncard-padding-block: var(--ax-space-16);
+  --__axc-expansioncard-padding-block: var(--ax-space-20);
   --__axc-expansioncard-padding-inline: var(--ax-space-20);
 
   border-radius: var(--ax-border-radius-xlarge);
@@ -17,7 +17,7 @@
 /* ------------------------ ExpansionCard Small-size ------------------------ */
 .navds-expansioncard--small {
   --__axc-expansioncard-padding-inline: var(--ax-space-16);
-  --__axc-expansioncard-padding-block: var(--ax-space-12);
+  --__axc-expansioncard-padding-block: var(--ax-space-16);
 
   & > .navds-expansioncard__header .navds-expansioncard__title--small {
     margin-top: var(--ax-space-2);
@@ -45,7 +45,7 @@
   justify-content: space-between;
 
   &:hover {
-    background-color: var(--ax-bg-hover);
+    background-color: var(--ax-bg-hoverA);
   }
 
   &[data-open="true"] {
@@ -55,7 +55,7 @@
     /* Divider between header and content */
     &::after {
       content: "";
-      background-color: var(--ax-border-subtle);
+      background-color: var(--ax-border-subtleA);
       bottom: 0;
       left: var(--__axc-expansioncard-padding-inline);
       height: 1px;

@navikt/core/css/darkside/form/combobox.darkside.css

@@ -10,7 +10,7 @@
   flex-direction: column;
   width: 100%;
   position: relative;
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
 }
 
 .navds-form-field:not(:is(.navds-combobox--disabled, .navds-combobox--readonly)) {
@@ -81,7 +81,7 @@
 
 .navds-combobox__wrapper-inner {
   border: 1px solid var(--ax-border-default);
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
 
   &:has(.navds-combobox__input:focus-visible) {
     outline: 3px solid var(--ax-border-focus);
@@ -215,7 +215,6 @@
 }
 
 .navds-combobox__button-toggle-list {
-  border-radius: var(--ax-border-radius-medium);
   color: var(--ax-text-default);
   display: flex;
   justify-content: center;
@@ -273,7 +272,7 @@
   justify-content: space-between;
   padding-block: var(--__axc-combobox-list-item-padding-block);
   padding-inline: var(--__axc-combobox-list-item-padding-inline);
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   border: 0;
   margin-inline: var(--ax-space-8);
   margin-block: var(--ax-space-2);

@navikt/core/css/darkside/form/form-progress.darkside.css

@@ -50,7 +50,7 @@
 
 .navds-form-progress__stepper {
   border: 1px solid var(--ax-border-subtle);
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-border-radius-xlarge);
   padding: var(--ax-space-16) var(--ax-space-20);
   margin-top: var(--ax-space-4);
   background: var(--ax-bg-raised);

@navikt/core/css/darkside/form/radio-checkbox.darkside.css

@@ -68,26 +68,42 @@
   height: 1.25rem;
 }
 
-.navds-checkbox__input:focus + .navds-checkbox__label::before,
-.navds-radio__input:focus + .navds-radio__label::before {
-  outline: 2px solid var(--ax-border-focus);
-  outline-offset: 2px;
-}
-
-.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+.navds-checkbox__input:focus + .navds-checkbox__label::after,
+.navds-radio__input:focus + .navds-radio__label::after {
   content: "";
   position: absolute;
-  top: 50%;
-  transform: translate(var(--ax-space-6), -50%);
-  background-color: var(--ax-bg-default);
+  width: 100%;
+  height: calc(100% - var(--ax-space-24));
+  border-radius: var(--ax-border-radius-medium);
+  outline: 3px solid var(--ax-border-focus);
+  outline-offset: 3px;
+  pointer-events: none;
+}
+
+.navds-checkbox--small > .navds-checkbox__input:focus + .navds-checkbox__label::after,
+.navds-radio--small > .navds-radio__input:focus + .navds-radio__label::after {
+  height: calc(100% - var(--ax-space-12));
+}
+
+.navds-checkbox__icon-indeterminate {
+  display: none;
+}
+
+.navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+  display: block;
   width: 0.75rem;
   height: 0.25rem;
+  background-color: var(--ax-bg-default);
   border-radius: 1px;
-  flex-shrink: 0;
+  position: absolute;
+  transform: translate(var(--ax-space-6), -50%);
+  top: 50%;
+  pointer-events: none;
 }
 
-.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-  transform: translate(0.25rem, -50%);
+.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+  transform: translate(var(--ax-space-4), -50%);
+  height: 0.1875rem;
 }
 
 .navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
@@ -221,7 +237,7 @@
     inset 0 0 0 8px var(--ax-bg-moderate);
 }
 
-.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
   background-color: var(--ax-text-subtle);
 }
 
@@ -246,7 +262,7 @@
     color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
-  .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
     background-color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
@@ -264,7 +280,10 @@
     background-color: var(--__axc-radio-checkbox-high-contrast-bg);
   }
 
-  .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  .navds-checkbox--readonly
+    > .navds-checkbox__input:indeterminate
+    + .navds-checkbox__label
+    > .navds-checkbox__icon-indeterminate {
     background-color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 

@navikt/core/css/darkside/form/search.darkside.css

@@ -22,7 +22,7 @@
 .navds-search__wrapper {
   display: inline-flex;
   align-items: center;
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
 
   /* We have to outline the whole container to include the Search-buttons */
   &:has(.navds-search__input:focus-visible) {
@@ -97,8 +97,8 @@
 .navds-search__button-search {
   flex-shrink: 0;
   border-radius: 0;
-  border-top-right-radius: var(--ax-border-radius-medium);
-  border-bottom-right-radius: var(--ax-border-radius-medium);
+  border-top-right-radius: var(--ax-border-radius-large);
+  border-bottom-right-radius: var(--ax-border-radius-large);
 }
 
 .navds-search__button-search.navds-button--secondary {