@navikt/ds-css 7.23.1 → 7.24.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @navikt/ds-css
 
+## 7.24.0
+
+### Minor Changes
+
+- LinkCard: :tada: Added new component 'LinkCard'. ([#3883](https://github.com/navikt/aksel/pull/3883))
+
+- Table: :tada: Added prop 'stickyHeader', allowing header to remain sticky while scrolling in table. ([#3893](https://github.com/navikt/aksel/pull/3893))
+
+### Patch Changes
+
+- Forms: Added built-in scroll-margin to TextField, Textarea and Select. ([#3897](https://github.com/navikt/aksel/pull/3897))
+
+- Switch: Size='small' are now visually comparable to radio and checkbox in the same size. ([#3892](https://github.com/navikt/aksel/pull/3892))
+
+## 7.23.2
+
+### Patch Changes
+
+- Darkside: Outline Tag in high-contrast mode had wrong text-color. ([#3889](https://github.com/navikt/aksel/pull/3889))
+
+- Darkside: Update padding for all 'panel' type components. ([#3864](https://github.com/navikt/aksel/pull/3864))
+
+- Form components: Fix edge case where description container would take up space when empty ([#3866](https://github.com/navikt/aksel/pull/3866))
+
 ## 7.23.1
 
 ## 7.23.0

package/config/_mappings.js

@@ -145,6 +145,11 @@ const StyleMappings = {
     },
     { component: "Label", main: typoCss },
     { component: "Link", main: "link.css", dependencies: [typoCss] },
+    {
+      component: "LinkCard",
+      main: "link-card.css",
+      dependencies: [typoCss, "link-anchor.css"],
+    },
     {
       component: "LinkPanel",
       main: "link-panel.css",

package/darkside/alert.darkside.css

@@ -1,7 +1,7 @@
 .aksel-alert {
   border-radius: var(--ax-radius-12);
   border: 1px solid;
-  padding: var(--ax-space-20);
+  padding: var(--ax-space-16) var(--ax-space-20);
   display: flex;
   gap: var(--ax-space-12);
   align-items: center;
@@ -31,7 +31,7 @@
 }
 
 .aksel-alert--small {
-  padding: var(--ax-space-16);
+  padding: var(--ax-space-12) var(--ax-space-16);
   gap: var(--ax-space-8);
 
   > .aksel-alert__icon {

package/darkside/chat.darkside.css

@@ -70,7 +70,7 @@
 }
 
 .aksel-chat__bubble {
-  padding: var(--ax-space-20);
+  padding: var(--ax-space-16) var(--ax-space-20);
   width: fit-content;
   display: flex;
   flex-direction: column;
@@ -80,7 +80,7 @@
 }
 
 .aksel-chat--small .aksel-chat__bubble {
-  padding: var(--ax-space-16);
+  padding: var(--ax-space-12) var(--ax-space-16);
 }
 
 /* ------------------------------ Chat top text ----------------------------- */

package/darkside/expansioncard.darkside.css

@@ -1,6 +1,6 @@
 .aksel-expansioncard {
   --__axc-expansioncard-border-radius: calc(var(--ax-radius-12) - 1px);
-  --__axc-expansioncard-padding-block: var(--ax-space-20);
+  --__axc-expansioncard-padding-block: var(--ax-space-16);
   --__axc-expansioncard-padding-inline: var(--ax-space-20);
 
   border-radius: var(--ax-radius-12);
@@ -21,7 +21,7 @@
 /* ------------------------ ExpansionCard Small-size ------------------------ */
 .aksel-expansioncard--small {
   --__axc-expansioncard-padding-inline: var(--ax-space-16);
-  --__axc-expansioncard-padding-block: var(--ax-space-16);
+  --__axc-expansioncard-padding-block: var(--ax-space-12);
 
   & > .aksel-expansioncard__header .aksel-expansioncard__title--small {
     margin-top: var(--ax-space-2);

package/darkside/form/error-summary.darkside.css

@@ -1,6 +1,6 @@
 .aksel-error-summary {
   background-color: var(--ax-bg-default);
-  padding: var(--ax-space-20);
+  padding: var(--ax-space-16) var(--ax-space-20);
   border: 4px solid var(--ax-border-danger);
   border-radius: var(--ax-radius-12);
   outline-offset: 3px;
@@ -18,7 +18,7 @@
 }
 
 .aksel-error-summary--small {
-  padding: var(--ax-space-16);
+  padding: var(--ax-space-12) var(--ax-space-16);
 
   & .aksel-error-summary__heading {
     scroll-margin-top: var(--ax-space-16);

package/darkside/form/file-upload.darkside.css

@@ -14,7 +14,7 @@
   flex-direction: column;
   gap: var(--ax-space-16);
   text-align: center;
-  padding: var(--ax-space-20);
+  padding: var(--ax-space-16) var(--ax-space-20);
   border: 1px dashed var(--ax-border-neutral);
   border-radius: var(--ax-radius-12);
   background-color: var(--__axc-dropzone-background);
@@ -162,7 +162,7 @@ li.aksel-file-item {
   outline-offset: -1px;
   transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
   border-radius: var(--ax-radius-12);
-  padding: var(--ax-space-20);
+  padding: var(--ax-space-16) var(--ax-space-20);
   display: flex;
   gap: var(--ax-space-12);
   align-items: flex-start;

package/darkside/form/form-progress.darkside.css

@@ -45,7 +45,7 @@
     margin-top: var(--ax-space-4);
     grid-template-rows: 1fr;
     visibility: visible;
-    padding-block: var(--ax-space-20);
+    padding-block: var(--ax-space-16);
     opacity: 1;
   }
 }

package/darkside/form/form-summary.darkside.css

@@ -7,7 +7,7 @@
 
 .aksel-form-summary__header {
   background: var(--ax-bg-neutral-moderateA);
-  padding: var(--ax-space-20) var(--ax-space-20) var(--ax-space-16) var(--ax-space-20);
+  padding: var(--ax-space-16) var(--ax-space-20);
   display: flex;
   justify-content: space-between;
   gap: 0 var(--ax-space-12);
@@ -15,7 +15,7 @@
 
 @media (max-width: 479px) {
   .aksel-form-summary__header {
-    padding: var(--ax-space-16) var(--ax-space-16) var(--ax-space-12) var(--ax-space-16);
+    padding: var(--ax-space-12) var(--ax-space-16);
     flex-direction: column;
   }
 }

package/darkside/form/form.darkside.css

@@ -7,6 +7,11 @@
 .aksel-form-field__description {
   margin-top: -0.375rem;
   color: var(--ax-text-neutral-subtle);
+
+  /* In case a component returning null is passed */
+  &:empty {
+    display: none;
+  }
 }
 
 .aksel-form-field--disabled {

package/darkside/form/select.darkside.css

@@ -11,6 +11,7 @@
   position: relative;
   padding: var(--ax-space-8);
   padding-right: var(--ax-space-40);
+  scroll-margin-block-start: 4rem;
 
   &:hover {
     border-color: var(--ax-border-strong);

package/darkside/form/switch.darkside.css

@@ -20,6 +20,7 @@
 
   .aksel-switch--small > & {
     height: 2rem;
+    width: 2.5rem;
     top: 0;
   }
 }
@@ -32,19 +33,21 @@
 
 .aksel-switch__content {
   --__axc-switch-block-padding: 0.75rem;
+  --__axc-switch-inline-padding: 3.25rem;
 
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--ax-space-2);
-  padding: var(--__axc-switch-block-padding) 0 var(--__axc-switch-block-padding) 3.25rem;
+  padding: var(--__axc-switch-block-padding) 0 var(--__axc-switch-block-padding) var(--__axc-switch-inline-padding);
 
   .aksel-switch--right & {
-    padding: var(--__axc-switch-block-padding) 3.25rem var(--__axc-switch-block-padding) 0;
+    padding: var(--__axc-switch-block-padding) var(--__axc-switch-inline-padding) var(--__axc-switch-block-padding) 0;
   }
 
   .aksel-switch--small & {
     --__axc-switch-block-padding: 0.375rem;
+    --__axc-switch-inline-padding: 2.75rem;
   }
 
   &.aksel-switch--with-description {
@@ -87,7 +90,9 @@
   transition-timing-function: ease;
 
   .aksel-switch--small > & {
-    top: var(--ax-space-4);
+    top: var(--ax-space-6);
+    width: 2.25rem;
+    height: 1.25rem;
   }
 
   .aksel-switch__input:checked ~ & {
@@ -135,6 +140,11 @@
   left: 0.0625rem;
   top: 0.0625rem;
 
+  .aksel-switch--small & {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
   .aksel-switch__input:checked ~ .aksel-switch__track > & {
     background-color: var(--ax-bg-raised);
     transform: translateX(1.25rem);
@@ -145,18 +155,15 @@
     top: 0;
   }
 
-  .aksel-switch__input:checked ~ .aksel-switch__track > & > .aksel-switch__checkmark {
-    visibility: visible;
-    opacity: 1;
+  .aksel-switch--small > .aksel-switch__input:checked ~ .aksel-switch__track > & {
+    transform: translateX(1rem);
+    width: 1rem;
+    height: 1rem;
+    left: 0;
+    top: 0;
   }
 }
 
-.aksel-switch__checkmark {
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 @media (hover: hover) and (pointer: fine) {
   .aksel-switch__input:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
     transform: translateX(0.17rem);
@@ -165,6 +172,10 @@
   .aksel-switch__input:checked:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
     transform: translateX(1.1rem);
   }
+
+  .aksel-switch--small > .aksel-switch__input:checked:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
+    transform: translateX(0.875rem);
+  }
 }
 
 .aksel-switch--right {
@@ -227,6 +238,10 @@
     & > .aksel-switch__input:checked:hover ~ .aksel-switch__track > .aksel-switch__thumb {
       transform: translateX(1.25rem);
     }
+
+    &.aksel-switch--small > .aksel-switch__input:checked:hover ~ .aksel-switch__track > .aksel-switch__thumb {
+      transform: translateX(1rem);
+    }
   }
 }
 

package/darkside/form/text-field.darkside.css

@@ -7,6 +7,7 @@
   min-height: 3rem;
   width: 100%;
   color: var(--ax-text-neutral);
+  scroll-margin-block-start: 4rem;
 
   &:hover {
     border-color: var(--ax-border-strong);

package/darkside/form/textarea.darkside.css

@@ -10,6 +10,7 @@
   width: 100%;
   display: block;
   color: var(--ax-text-neutral);
+  scroll-margin-block-start: 4rem;
 
   &::placeholder {
     color: var(--ax-text-neutral-subtle);

package/darkside/guide-panel.darkside.css

@@ -71,7 +71,7 @@
 }
 
 .aksel-guide-panel__content-inner {
-  padding: var(--ax-space-16);
+  padding: var(--ax-space-12) var(--ax-space-16);
   border-radius: var(--ax-radius-12);
   background-color: var(--ax-bg-raised);
   position: relative;
@@ -83,7 +83,7 @@
 
   @media (min-width: 480px) {
     & {
-      padding: var(--ax-space-20);
+      padding: var(--ax-space-16) var(--ax-space-20);
     }
 
     .aksel-guide-panel[data-responsive="true"] & {

package/darkside/index.css

@@ -38,6 +38,8 @@
 @import "./internalheader.darkside.css" layer(aksel.components);
 @import "./link.darkside.css" layer(aksel.components);
 @import "./link-panel.darkside.css" layer(aksel.components);
+@import "./link-anchor.darkside.css" layer(aksel.components);
+@import "./link-card.darkside.css" layer(aksel.components);
 @import "./loader.darkside.css" layer(aksel.components);
 @import "./modal.darkside.css" layer(aksel.components);
 @import "./pagination.darkside.css" layer(aksel.components);

package/darkside/link-anchor.darkside.css

@@ -0,0 +1,53 @@
+.aksel-link-anchor__overlay {
+  cursor: pointer;
+
+  &:focus-within {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
+}
+
+@supports selector(:has(*)) {
+  .aksel-link-anchor__overlay:focus-within {
+    outline: unset;
+  }
+
+  .aksel-link-anchor__overlay:has(:focus-visible) {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
+}
+
+.aksel-link-anchor {
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  text-underline-offset: 0.1em;
+  text-decoration-thickness: 0.05em;
+  color: inherit;
+
+  &:hover,
+  .aksel-link-anchor__overlay:hover & {
+    text-decoration-thickness: 0.111em;
+  }
+
+  &:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    border-radius: 1px;
+  }
+
+  .aksel-link-anchor__overlay &:focus-visible {
+    outline: none;
+  }
+}
+
+.aksel-link-anchor__arrow {
+  transition: transform 200ms;
+  transform: translateX(0);
+  flex-shrink: 0;
+
+  .aksel-link-anchor:hover &,
+  .aksel-link-anchor__overlay:hover & {
+    transform: translateX(4px);
+  }
+}

package/darkside/link-card.darkside.css

@@ -0,0 +1,109 @@
+.aksel-link-card {
+  --__axc-link-card-padding-block: var(--ax-space-16);
+  --__axc-link-card-padding-inline: var(--ax-space-20);
+
+  border-radius: var(--ax-border-radius-xlarge);
+  text-decoration: none;
+  color: var(--ax-text-neutral);
+  transition-property: border-color, box-shadow, transform, background-color;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0, 0, 0, 1);
+  position: relative;
+  background-color: var(--ax-bg-raised);
+  border: 1px solid var(--ax-border-subtleA);
+  padding: var(--__axc-link-card-padding-block) var(--__axc-link-card-padding-inline);
+  cursor: pointer;
+  display: grid;
+  grid-template-areas:
+    "image image"
+    "icon title"
+    "icon description"
+    "icon footer";
+  grid-template-columns: auto 1fr;
+  grid-template-rows: min-content min-content min-content auto;
+  align-items: center;
+
+  &:not(:has(.aksel-link-card__description, .aksel-link-card__footer)) {
+    grid-template-rows: auto 1fr;
+
+    & .aksel-link-card__title {
+      align-items: center;
+    }
+
+    & .aksel-link-card__icon {
+      align-self: center;
+    }
+  }
+
+  &:hover {
+    border-color: var(--ax-border-default);
+    box-shadow: 0 0 0 1px var(--ax-border-default);
+  }
+}
+
+.aksel-link-card--small {
+  --__axc-link-card-padding-block: var(--ax-space-12);
+  --__axc-link-card-padding-inline: var(--ax-space-16);
+}
+
+.aksel-link-card__title {
+  grid-area: title;
+  color: var(--ax-text-subtle);
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--ax-space-8);
+  hyphens: auto;
+
+  .aksel-link-card[data-color="neutral"] &,
+  &[data-color="neutral"] {
+    color: var(--ax-text-default);
+  }
+}
+
+.aksel-link-card__description {
+  grid-area: description;
+  margin-block-start: var(--ax-space-4);
+}
+
+.aksel-link-card__footer {
+  grid-area: footer;
+  margin-block-start: var(--ax-space-16);
+  display: flex;
+  align-self: flex-end;
+  gap: var(--ax-space-8);
+  flex-wrap: wrap;
+}
+
+.aksel-link-card__icon {
+  grid-area: icon;
+  width: max-content;
+  height: max-content;
+  display: grid;
+  place-content: center;
+  color: var(--ax-text-default);
+  align-self: flex-start;
+  margin-inline-end: var(--ax-space-16);
+
+  .aksel-link-card--small & {
+    margin-inline-end: var(--ax-space-12);
+  }
+}
+
+.aksel-link-card__image-container {
+  overflow: hidden;
+  grid-area: image;
+  margin-block: calc(var(--__axc-link-card-padding-block) * -1) var(--__axc-link-card-padding-block);
+  margin-inline: calc(var(--__axc-link-card-padding-inline) * 1 * -1);
+  border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  position: relative;
+
+  & :is(img, picture) {
+    object-fit: cover;
+    display: block;
+    max-width: 100%;
+    height: 100%;
+  }
+}

package/darkside/modal.darkside.css

@@ -61,7 +61,7 @@
   width: 450px;
 
   & .aksel-modal__header {
-    padding: var(--ax-space-16);
+    padding: var(--ax-space-12) var(--ax-space-16);
   }
 
   & .aksel-modal__body {
@@ -69,7 +69,8 @@
   }
 
   & .aksel-modal__footer {
-    padding: var(--ax-space-16);
+    padding-block: var(--ax-space-12) var(--ax-space-16);
+    padding-inline: var(--ax-space-16);
   }
 }
 
@@ -122,7 +123,7 @@
 }
 
 .aksel-modal__header {
-  padding: var(--ax-space-20);
+  padding: var(--ax-space-16) var(--ax-space-20);
 }
 
 .aksel-modal__header-icon {
@@ -165,7 +166,8 @@
   display: flex;
   flex-flow: row-reverse wrap;
   gap: var(--ax-space-16);
-  padding: var(--ax-space-20);
+  padding-block: var(--ax-space-16) var(--ax-space-20);
+  padding-inline: var(--ax-space-20);
 }
 
 .aksel-modal__footer :nth-of-type(2) {

package/darkside/popover.darkside.css

@@ -10,12 +10,12 @@
 }
 
 .aksel-popover__content {
-  padding: var(--ax-space-16);
+  padding: var(--ax-space-12) var(--ax-space-16);
 }
 
 @media (min-width: 480px) {
   .aksel-popover__content {
-    padding: var(--ax-space-20);
+    padding: var(--ax-space-16) var(--ax-space-20);
   }
 }
 

package/darkside/table.darkside.css

@@ -2,10 +2,23 @@
   width: 100%;
   border-collapse: collapse;
   display: table;
+
+  &.aksel-table--sticky-header {
+    border-collapse: separate;
+    border-spacing: 0;
+  }
 }
 
 .aksel-table__header {
   display: table-header-group;
+
+  .aksel-table--sticky-header & {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background-color: var(--ax-bg-default);
+    box-sizing: border-box;
+  }
 }
 
 .aksel-table__body {

package/darkside/tag.darkside.css

@@ -23,10 +23,6 @@
     box-shadow: inset 0 0 0 1px var(--ax-border-default);
     background: var(--ax-bg-moderate);
     color: var(--ax-text-default);
-
-    @media (forced-colors: active) {
-      color: canvastext;
-    }
   }
 
   &[data-variant="moderate"] {