@navikt/ds-css 2.9.7 → 3.0.0

package/read-more.css

@@ -32,32 +32,36 @@
 .navds-read-more__content {
   margin-top: var(--a-spacing-1);
   border-left: 2px solid var(--ac-read-more-line, var(--a-border-divider));
+  margin-left: 13px;
+  padding-left: 13px;
+}
+
+.navds-read-more--small .navds-read-more__content {
   margin-left: 11px;
   padding-left: 11px;
 }
 
+.navds-read-more__content--closed {
+  display: none;
+}
+
 .navds-read-more__expand-icon {
-  font-size: 1.25rem;
-  height: 1.5rem;
+  font-size: 1.5rem;
   flex-shrink: 0;
 }
 
 .navds-read-more--small .navds-read-more__expand-icon {
-  height: 1.25rem;
-}
-
-.navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
-  transform: rotate(-180deg);
+  font-size: 1.25rem;
 }
 
-.navds-read-more__expand-icon--filled {
-  display: none;
+.navds-read-more__button:hover > .navds-read-more__expand-icon {
+  transform: translateY(1px);
 }
 
-.navds-read-more__button:hover > .navds-read-more__expand-icon.navds-read-more__expand-icon--filled {
-  display: inherit;
+.navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
+  transform: rotate(-180deg);
 }
 
-.navds-read-more__button:hover > .navds-read-more__expand-icon {
-  display: none;
+.navds-read-more--open > .navds-read-more__button:hover > .navds-read-more__expand-icon {
+  transform: translateY(-1px) rotate(-180deg);
 }

package/stepper.css

@@ -102,6 +102,8 @@ button.navds-stepper__step {
   border: none;
   background: none;
   font-size: 28px;
+  color: var(--a-text-on-action);
+  background-color: var(--ac-stepper-text, var(--a-surface-action));
 }
 
 .navds-stepper__content {
@@ -189,6 +191,11 @@ button.navds-stepper__step {
   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 {
+  color: var(--ac-stepper-hover-bg, var(--a-surface-action-subtle-hover));
+  background-color: var(--ac-stepper-text, var(--a-surface-action));
+}
+
 /* Non-interactive */
 :where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__content {
   color: var(--ac-stepper-non-interactive-active, var(--a-text-default));
@@ -217,6 +224,26 @@ button.navds-stepper__step {
   color: var(--ac-stepper-active-completed, var(--a-text-action-selected));
 }
 
+:where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle--success {
+  color: var(--a-text-on-action);
+  background-color: var(--ac-stepper-active-completed, var(--a-surface-action-selected));
+}
+
+:where(.navds-stepper__step--non-interactive, .navds-stepper__step--non-interactive:hover) .navds-stepper__circle--success {
+  color: var(--a-text-on-inverted);
+  background-color: var(--ac-stepper-non-interactive-completed-bg, var(--a-surface-neutral));
+}
+
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle--success {
+  color: var(--a-text-on-inverted);
+  background-color: var(--ac-stepper-non-interactive-active-completed, var(--a-surface-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/table.css

@@ -193,19 +193,18 @@
   font-size: 1.25rem;
 }
 
-.navds-table__toggle-expand-button:hover .navds-table__expandable-icon,
-.navds-table__expandable-icon--filled {
-  display: none;
-}
-
-.navds-table__toggle-expand-button:hover .navds-table__expandable-icon--filled {
-  display: block;
+.navds-table__toggle-expand-button:hover .navds-table__expandable-icon {
+  transform: translateY(1px);
 }
 
 .navds-table__toggle-expand-cell--open .navds-table__expandable-icon {
   transform: rotate(180deg);
 }
 
+.navds-table__toggle-expand-cell--open .navds-table__toggle-expand-button:hover .navds-table__expandable-icon {
+  transform: translateY(-1px) rotate(180deg);
+}
+
 .navds-table__expanded-row-cell {
   padding: 0;
 }

package/tabs.css

@@ -49,7 +49,7 @@
   align-items: center;
   background: none;
   border: none;
-  color: var(--ac-tabs-text, var(--a-text-subtle));
+  color: var(--ac-tabs-text, var(--a-text-default));
   cursor: pointer;
 }
 

package/tokens.json

@@ -14,26 +14,22 @@
     "--ac-alert-icon-success-color": "--a-icon-success"
   },
   "accordion": {
-    "--ac-accordion-header-bg": "--ac-surface-transparent",
-    "--ac-accordion-header-bg-hover": "--ac-surface-transparent",
+    "--ac-accordion-header-bg": "--a-surface-transparent",
+    "--ac-accordion-header-bg-hover": "--a-surface-hover",
+    "--ac-accordion-header-text-hover": "inherit",
     "--ac-accordion-header-border": "--a-border-divider",
-    "--ac-accordion-header-text-hover": "--a-text-action-on-action-subtle",
-    "--ac-accordion-header-border-hover": "--a-border-default",
     "--ac-accordion-item-bg-open": "--a-surface-action-subtle",
-    "--ac-accordion-header-bg-open": "--ac-accordion-item-bg-open",
-    "--ac-accordion-header-bg-open-hover": "--a-surface-action-subtle",
-    "--ac-accordion-item-border-open": "--a-surface-action-subtle",
-    "--ac-accordion-content-border": "--a-border-divider",
-    "--ac-accordion-content-border-open": "--a-border-default"
+    "--ac-accordion-neutral-item-bg-open": "--a-surface-neutral-subtle",
+    "--ac-accordion-header-icon-bg-hover": "--a-surface-neutral-subtle-hover"
   },
   "button": {
     "--ac-button-border-radius": "--a-border-radius-medium",
-    "--ac-button-padding": "var(--a-spacing-3) var(--a-spacing-5)",
-    "--ac-button-padding-small": "0.375rem var(--a-spacing-3)",
-    "--ac-button-padding-xsmall": "var(--a-spacing-05) var(--a-spacing-2)",
-    "--ac-button-padding-icon-only": "var(--a-spacing-3)",
-    "--ac-button-padding-icon-only-small": "0.375rem",
-    "--ac-button-padding-icon-only-xsmall": "var(--a-spacing-1)",
+    "--ac-button-padding": "--a-spacing-3 --a-spacing-5",
+    "--ac-button-padding-small": "--a-spacing-1 --a-spacing-3",
+    "--ac-button-padding-xsmall": "--a-spacing-05 --a-spacing-2",
+    "--ac-button-padding-icon-only": "--a-spacing-3",
+    "--ac-button-padding-icon-only-small": "--a-spacing-1",
+    "--ac-button-padding-icon-only-xsmall": "--a-spacing-05",
     "--ac-button-primary-bg": "--a-surface-action",
     "--ac-button-primary-text": "--a-text-on-action",
     "--ac-button-primary-hover-bg": "--a-surface-action-hover",
@@ -204,8 +200,9 @@
     "--ac-stepper-active-border": "--a-border-action-selected",
     "--ac-stepper-active-text": "--a-text-on-action",
     "--ac-stepper-hover-bg": "--a-surface-action-subtle-hover",
-    "--ac-stepper-non-interactive-active": "--a-text-default",
+    "--ac-stepper-non-interactive-completed-bg": "--a-surface-subtle",
     "--ac-stepper-non-interactive-line-completed": "--a-border-strong",
+    "--ac-stepper-non-interactive-active": "--a-text-default",
     "--ac-stepper-non-interactive-active-bg": "--a-surface-inverted",
     "--ac-stepper-non-interactive-active-border": "--a-surface-inverted",
     "--ac-stepper-non-interactive-active-text": "--a-text-on-inverted",
@@ -226,7 +223,7 @@
   },
   "tabs": {
     "--ac-tabs-border": "--a-border-divider",
-    "--ac-tabs-text": "--a-text-subtle",
+    "--ac-tabs-text": "--a-text-default",
     "--ac-tabs-hover-border": "--a-border-subtle-hover",
     "--ac-tabs-selected-border": "--a-border-action",
     "--ac-tabs-selected-text": "--a-text-default",