Merge ecac090 into c29d2ab

.changeset/honest-doors-flow.md

@@ -0,0 +1,11 @@
+---
+"@navikt/ds-css": major
+"@navikt/ds-react": major
+---
+
+**Accordion**
+
+- Accordion oppdatet til å ha chevron left-aligned.
+- Neutral-variant lagt til
+- Diverse nye size-options for heading og paddinger.
+- Deler av Accordion-CSS er refaktorert. Dette vil kunne brekke overskrevne stiler.

.changeset/stupid-boats-approve.md

@@ -0,0 +1,20 @@
+---
+"@navikt/ds-css": major
+"@navikt/ds-react": major
+"@navikt/ds-react-internal": major
+---
+
+Aksels løsninger bruker nå `@navikt/aksel-icons`
+
+**Sideeffects av ikonendringer**
+
+- Komponenter som tidligere brukte Expand-ikon har fått oppdatert animasjon (table, readmore og accordion)
+- Alert bruker samme ikonstørrelse for alle størrelser
+- Chips har justert padding/ikonstørrelser
+- Datepicker hover-bug på knapper er fikset
+- Helptekst bruker nå et custom-ikon.
+- Select har fått justert padding rundt ikon
+- Switch bruker samme checkmark som checkbox, er nå avrundet
+- ReadMore har justert margin for alignment med ikon, fjernet content-animasjon
+- Tabs bruker default text-default nå
+- Stepper har endret hvordan den styler checkmark-ikon.

@navikt/core/css/accordion.css

@@ -2,73 +2,170 @@
   position: relative;
 }
 
+/*************************
+ * Header *
+ *************************/
 .navds-accordion__header {
+  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
+  --__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent),
+    inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
+
   width: 100%;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: flex-start;
   gap: var(--a-spacing-2);
-  padding: 14px var(--a-spacing-3) var(--a-spacing-3);
+  padding: var(--a-spacing-3);
   margin: 0;
   text-align: left;
   background: var(--ac-accordion-header-bg, var(--a-surface-transparent));
   cursor: pointer;
   border: none;
-  border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-divider));
+  position: relative;
+  box-shadow: var(--__ac-accordion-header-shadow);
+  z-index: 1;
+}
+
+.navds-accordion__header:hover {
+  background-color: var(--ac-accordion-header-bg-hover, var(--a-surface-hover));
+  text-decoration: underline;
+  color: var(--ac-accordion-header-text-hover, inherit);
+}
+
+.navds-accordion--small .navds-accordion__header {
+  padding: var(--a-spacing-2) var(--a-spacing-3);
+}
+
+.navds-accordion--medium .navds-accordion__header {
+  padding: var(--a-spacing-3);
+}
+
+.navds-accordion--large .navds-accordion__header {
+  padding: var(--a-spacing-4) var(--a-spacing-3);
+}
+
+.navds-accordion__item:last-child > :where(.navds-accordion__header) {
+  box-shadow: var(--__ac-accordion-header-shadow), inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
+}
+
+.navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header) {
+  box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--a-transparent),
+    inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
+}
+
+.navds-accordion__item:last-child:where(.navds-accordion__item--open) {
+  box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--a-transparent),
+    inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
+}
+
+.navds-accordion__item--open > :where(.navds-accordion__header) {
+  box-shadow: var(--__ac-accordion-header-shadow);
 }
 
-.navds-accordion__header:focus {
+.navds-accordion__header:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
+  border-radius: var(--a-border-radius-large);
 }
 
-.navds-accordion__header:hover {
-  color: var(--ac-accordion-header-text-hover, var(--a-text-action-on-action-subtle));
-  border-color: var(--ac-accordion-header-border-hover, var(--a-border-default));
-  background: var(--ac-accordion-header-bg-hover, var(--a-surface-transparent));
+@supports not selector(:focus-visible) {
+  .navds-accordion__header:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+    border-radius: var(--a-border-radius-large);
+  }
 }
 
 .navds-accordion__header-content {
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.navds-accordion__item--open > .navds-accordion__header {
-  background-color: var(--ac-accordion-header-bg-open, var(--ac-accordion-item-bg-open, var(--a-surface-action-subtle)));
-  border-color: var(--ac-accordion-item-border-open, var(--a-surface-action-subtle));
+/*************************
+ * Icon *
+ *************************/
+.navds-accordion__icon-wrapper {
+  display: grid;
+  place-content: center;
+  border-radius: var(--a-border-radius-medium);
+  height: var(--a-spacing-6);
+  width: var(--a-spacing-6);
+  align-self: center;
 }
 
-.navds-accordion__item--open > :where(.navds-accordion__header:hover) {
-  background-color: var(--ac-accordion-header-bg-open-hover, var(--a-surface-action-subtle));
+.navds-accordion__header:hover > .navds-accordion__icon-wrapper {
+  background-color: var(--ac-accordion-header-icon-bg-hover, var(--a-surface-neutral-subtle-hover));
 }
 
-.navds-accordion__content {
-  padding: var(--a-spacing-3) var(--a-spacing-3) 18px;
-  border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-divider));
+.navds-accordion__header-chevron {
+  border-radius: var(--a-border-radius-medium);
+  font-size: 1.5rem;
+  height: 1.75rem;
+  flex-shrink: 0;
+  transition: transform 150ms ease-in-out;
+  align-self: center;
 }
 
-.navds-accordion__item--open > .navds-accordion__header:hover + * .navds-accordion__content {
-  border-color: var(--ac-accordion-content-border-open, var(--a-border-default));
+:where(.navds-accordion__header):hover > :where(.navds-accordion__icon-wrapper) > :where(.navds-accordion__header-chevron) {
+  transform: translateY(1px);
 }
 
-.navds-accordion__expand-icon {
-  font-size: 1.5rem;
-  height: 1.75rem;
-  flex-shrink: 0;
+.navds-accordion__item--open
+  > :where(.navds-accordion__header)
+  > :where(.navds-accordion__icon-wrapper)
+  > :where(.navds-accordion__header-chevron) {
+  transform: translateY(0) rotate(-180deg);
 }
 
-.navds-accordion__item--open > .navds-accordion__header > .navds-accordion__expand-icon {
-  transform: rotateZ(180deg);
+.navds-accordion__item--open
+  > :where(.navds-accordion__header):hover
+  > :where(.navds-accordion__icon-wrapper)
+  > :where(.navds-accordion__header-chevron) {
+  transform: translateY(-1px) rotate(-180deg);
 }
 
-.navds-accordion__expand-icon--filled {
-  display: none;
+/*************************
+ * Variant/Default *
+ *************************/
+.navds-accordion__item--open {
+  background-color: var(--ac-accordion-item-bg-open, var(--a-transparent));
 }
 
-.navds-accordion__header:hover > .navds-accordion__expand-icon.navds-accordion__expand-icon--filled {
-  display: inherit;
+/*************************
+ * Variant/Neutral *
+ *************************/
+.navds-accordion__item--open.navds-accordion__item--neutral {
+  background-color: var(--ac-accordion-neutral-item-bg-open, var(--a-surface-neutral-subtle));
 }
 
-.navds-accordion__header:hover > .navds-accordion__expand-icon {
+/*************************
+ * Content *
+ *************************/
+.navds-accordion__content {
+  padding: 0 var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
+  animation: fadeAccordionContent 250ms ease;
+}
+
+.navds-accordion__content--closed {
   display: none;
 }
+
+.navds-accordion__item--no-animation :where(.navds-accordion__content) {
+  animation: none;
+}
+
+@keyframes fadeAccordionContent {
+  0% {
+    opacity: 0.25;
+    transform: translateY(-8px);
+  }
+
+  40% {
+    opacity: 0.7;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

@navikt/core/css/alert.css

@@ -28,7 +28,6 @@
 }
 
 .navds-alert--small > .navds-alert__icon {
-  font-size: 1.25rem;
   height: var(--a-font-line-height-large);
 }
 

@navikt/core/css/button.css

@@ -32,9 +32,10 @@
 }
 
 .navds-button--small {
-  --__ac-button-padding: 0.375rem var(--a-spacing-3);
+  --__ac-button-padding: var(--a-spacing-1) var(--a-spacing-3);
 
   padding: var(--ac-button-padding-small, var(--__ac-button-padding));
+  min-height: 2rem;
 }
 
 .navds-button--xsmall {
@@ -51,13 +52,13 @@
 }
 
 .navds-button--small.navds-button--icon-only {
-  --__ac-button-padding: 0.375rem;
+  --__ac-button-padding: var(--a-spacing-1);
 
   padding: var(--ac-button-padding-icon-only-small, var(--__ac-button-padding));
 }
 
 .navds-button--xsmall.navds-button--icon-only {
-  --__ac-button-padding: var(--a-spacing-1);
+  --__ac-button-padding: var(--a-spacing-05);
 
   padding: var(--ac-button-padding-icon-only-xsmall, var(--__ac-button-padding));
 }
@@ -88,14 +89,12 @@
 
 .navds-button--small .navds-button__icon {
   --ac-button-icon-margin: -2px;
-
-  font-size: 1.25rem;
 }
 
 .navds-button--xsmall .navds-button__icon {
   --ac-button-icon-margin: -2px;
 
-  font-size: 1rem;
+  font-size: 1.25rem;
 }
 
 /*************************

@navikt/core/css/chips.css

@@ -63,6 +63,10 @@
   box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
 }
 
+.navds-chips__removable {
+  gap: 0;
+}
+
 .navds-chips__removable--action {
   background-color: var(--ac-chip-removable-action-bg, var(--a-surface-action-selected));
   color: var(--ac-chip-removable-action-text, var(--a-text-on-action));
@@ -77,22 +81,23 @@
 .navds-chips__removable-icon {
   width: 1.5rem;
   height: 1.5rem;
+  font-size: 1.25rem;
   display: grid;
   place-items: center;
   border-radius: var(--a-border-radius-full);
 }
 
 .navds-chips__toggle-icon {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1.5rem;
+  height: 1.5rem;
   display: grid;
   place-items: center;
   border-radius: var(--a-border-radius-full);
 }
 
 .navds-chips--small .navds-chips__toggle-icon {
-  width: 1rem;
-  height: 1rem;
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .navds-chips--small .navds-chips__removable-icon {
@@ -101,7 +106,7 @@
 }
 
 .navds-chips--small .navds-chips__removable-icon > svg {
-  width: 0.75rem;
+  width: 1rem;
 }
 
 .navds-chips__removable--action:focus-visible {
@@ -126,7 +131,7 @@
 }
 
 .navds-chips--icon-right {
-  padding-right: var(--a-spacing-1);
+  padding-right: 0.375rem;
 }
 
 .navds-chips--small .navds-chips--icon-right {

@navikt/core/css/date.css

@@ -164,7 +164,8 @@
 }
 
 .navds-date__caption-button,
-.navds-date__caption-button:disabled {
+.navds-date__caption-button:disabled,
+.navds-date__caption-button:disabled:hover {
   color: var(--ac-date-caption-text, var(--a-text-default));
 }
 

@navikt/core/css/expansioncard.css

@@ -173,13 +173,13 @@
   animation: fadeExpansionCard 250ms ease;
 }
 
-.navds-expansioncard--no-fade :where(.navds-expansioncard__content-inner) {
+.navds-expansioncard--no-animation :where(.navds-expansioncard__content-inner) {
   animation: none;
 }
 
 @keyframes fadeExpansionCard {
   0% {
-    opacity: 0;
+    opacity: 0.25;
     transform: translateY(-8px);
   }
 

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

@@ -72,7 +72,7 @@
   cursor: pointer;
   background: none;
   border: none;
-  font-size: 1rem;
+  font-size: 1.25rem;
   padding: 0;
 }
 

@navikt/core/css/form/select.css

@@ -31,8 +31,8 @@
 
 .navds-select__chevron {
   position: absolute;
-  font-size: 1rem;
-  right: 0.5rem;
+  font-size: 1.5rem;
+  right: var(--a-spacing-2);
   pointer-events: none;
   align-self: center;
 }
@@ -42,6 +42,10 @@
   padding: 0 2rem 0 0.25rem;
 }
 
+.navds-form-field--small .navds-select__chevron {
+  right: 0.375rem;
+}
+
 /**
   Error handling
 */