@navikt/ds-css 2.1.7 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @navikt/ds-css
 
+## 2.3.0
+
+### Minor Changes
+
+- [#1813](https://github.com/navikt/aksel/pull/1813) [`7702c6527`](https://github.com/navikt/aksel/commit/7702c65275a4d86a8260852d091e6dd4cfe9217c) Thanks [@ingfo](https://github.com/ingfo)! - Fiksa sentrering av tekst i Select i Firefox
+
+### Patch Changes
+
+- [`51b62cca7`](https://github.com/navikt/aksel/commit/51b62cca7b857e92669cd0b09e620b131faf80e5) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Select small 34px høyde -> 32px
+
+## 2.2.0
+
+### Minor Changes
+
+- [#1789](https://github.com/navikt/aksel/pull/1789) [`c0929a534`](https://github.com/navikt/aksel/commit/c0929a534dc8effece5435f8be550cb7931a52b1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Button og ToggleGroup har nå en neutral-variant, oppdatert neutral-tokens
+
 ## 2.1.7
 
 ## 2.1.6

package/accordion.css

@@ -14,7 +14,7 @@
   background: transparent;
   cursor: pointer;
   border: none;
-  border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-strong));
+  border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-divider));
 }
 
 .navds-accordion__header:focus {
@@ -24,7 +24,7 @@
 
 .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-strong));
+  border-color: var(--ac-accordion-header-border-hover, var(--a-border-default));
 }
 
 .navds-accordion__header-content {
@@ -39,11 +39,11 @@
 
 .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-strong));
+  border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-divider));
 }
 
 .navds-accordion__item--open > .navds-accordion__header:hover + * .navds-accordion__content {
-  border-color: var(--ac-accordion-content-border-open, var(--a-border-strong));
+  border-color: var(--ac-accordion-content-border-open, var(--a-border-default));
 }
 
 .navds-accordion__expand-icon {

package/alert.css

@@ -24,6 +24,7 @@
   font-size: 1.5rem;
   align-self: flex-start;
   height: var(--a-font-line-height-xlarge);
+  background: radial-gradient(circle, var(--a-surface-default) 50%, 0, transparent);
 }
 
 .navds-alert--small > .navds-alert__icon {
@@ -41,6 +42,10 @@
   background-color: var(--ac-alert-warning-bg, var(--a-surface-warning-subtle));
 }
 
+.navds-alert--warning > .navds-alert__icon {
+  background: radial-gradient(circle at 50% 57%, var(--a-surface-default) 32%, 0, transparent);
+}
+
 .navds-alert--info {
   border-color: var(--ac-alert-info-border, var(--a-border-info));
   background-color: var(--ac-alert-info-bg, var(--a-surface-info-subtle));

package/button.css

@@ -112,13 +112,39 @@
   background-color: var(--ac-button-primary-bg, var(--a-surface-action));
 }
 
+/*************************
+ * .navds-button--primary-neutral *
+ *************************/
+
+.navds-button--primary-neutral {
+  background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
+  color: var(--ac-button-primary-neutral-text, var(--a-text-on-neutral));
+}
+
+.navds-button--primary-neutral:hover {
+  background-color: var(--ac-button-primary-neutral-hover-bg, var(--a-surface-neutral-hover));
+}
+
+.navds-button--primary-neutral:active {
+  background-color: var(--ac-button-primary-neutral-active-bg, var(--a-surface-neutral-active));
+}
+
+.navds-button--primary-neutral:focus {
+  box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+}
+
+.navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled),
+.navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) {
+  background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
+}
+
 /**************************
 * .navds-button--secondary *
  **************************/
 
 .navds-button--secondary {
   color: var(--ac-button-secondary-text, var(--a-text-action));
-  background-color: var(--ac-button-secondary-bg, var(--a-surface-default));
+  background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
   box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
 }
 
@@ -144,10 +170,47 @@
 .navds-button--secondary:where(:disabled, .navds-button--disabled),
 .navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
   color: var(--ac-button-secondary-text, var(--a-text-action));
-  background-color: var(--ac-button-secondary-bg, var(--a-surface-default));
+  background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
   box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
 }
 
+/**************************
+* .navds-button--secondary-neutral *
+ **************************/
+
+.navds-button--secondary-neutral {
+  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
+  background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong));
+}
+
+.navds-button--secondary-neutral:hover {
+  background-color: var(--ac-button-secondary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+}
+
+.navds-button--secondary-neutral:focus {
+  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+}
+
+.navds-button--secondary-neutral:active {
+  color: var(--ac-button-secondary-neutral-active-text, var(--a-text-on-neutral));
+  background-color: var(--ac-button-secondary-neutral-active-bg, var(--a-surface-neutral-active));
+  box-shadow: none;
+}
+
+.navds-button--secondary-neutral:focus:active {
+  box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
+    var(--a-shadow-focus);
+}
+
+.navds-button--secondary-neutral:where(:disabled, .navds-button--disabled),
+.navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
+  background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong));
+}
+
 /****************************
  * .navds-button--tertiary *
  ****************************/
@@ -188,6 +251,46 @@
   box-shadow: none;
 }
 
+/****************************
+ * .navds-button--tertiary-neutral *
+ ****************************/
+
+.navds-button--tertiary-neutral {
+  color: var(--ac-button-tertiary-neutral-text, var(--a-text-default));
+}
+
+.navds-button--tertiary-neutral:hover {
+  color: var(--ac-button-tertiary-neutral-hover-text, var(--a-text-default));
+  background-color: var(--ac-button-tertiary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+}
+
+.navds-button--tertiary-neutral:focus {
+  box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+}
+
+.navds-button--tertiary-neutral:active {
+  color: var(--ac-button-tertiary-neutral-active-text, var(--a-text-on-neutral));
+  background-color: var(--ac-button-tertiary-neutral-active-bg, var(--a-surface-neutral-active));
+  box-shadow: inset 0 0 0 1px var(--a-surface-default);
+}
+
+.navds-button--tertiary-neutral:active:hover {
+  background-color: var(--ac-button-tertiary-neutral-active-hover-bg, var(--a-surface-neutral-active));
+}
+
+.navds-button--tertiary-neutral:active:focus {
+  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+}
+
+.navds-button--tertiary-neutral:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:hover:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:active:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:active:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ac-button-tertiary-neutral-text, var(--a-text-default));
+  background: none;
+  box-shadow: none;
+}
+
 /*************************
  * .navds-button--danger *
  *************************/