@navikt/ds-css 7.3.1 → 7.4.1

package/darkside/button.darkside.css

@@ -1,6 +1,320 @@
-/* stylelint-disable csstools/value-no-unknown-custom-properties */
-/* stylelint-disable aksel/design-token-exists */
-
 .navds-button {
-  background-color: var(--a-bg-accent-strong);
+  padding: var(--ax-spacing-3) var(--ax-spacing-5);
+  border-radius: var(--ax-border-radius-medium);
+  display: inline-flex;
+  cursor: pointer;
+  text-decoration: none;
+  border: none;
+  background: none;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ax-spacing-2);
+}
+
+.navds-button--small {
+  padding: var(--ax-spacing-1) var(--ax-spacing-3);
+  min-height: 2rem;
+  min-width: 2rem;
+}
+
+.navds-button--xsmall {
+  padding: var(--ax-spacing-05) var(--ax-spacing-2);
+  gap: var(--ax-spacing-1);
+}
+
+.navds-button--icon-only {
+  padding: var(--ax-spacing-3);
+}
+
+.navds-button--small.navds-button--icon-only {
+  padding: var(--ax-spacing-1);
+}
+
+.navds-button--xsmall.navds-button--icon-only {
+  padding: var(--ax-spacing-05);
+}
+
+.navds-button:focus-visible {
+  outline: 4px solid var(--ax-border-focus);
+  outline-offset: 2px;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-button:focus {
+    outline: 4px solid var(--ax-border-focus);
+  }
+}
+
+.navds-button__icon {
+  font-size: 1.5rem;
+  display: flex;
+
+  --__axc-button-icon-margin: -4px;
+}
+
+.navds-button__icon:first-child {
+  margin-left: var(--__axc-button-icon-margin);
+}
+
+.navds-button__icon:last-child {
+  margin-right: var(--__axc-button-icon-margin);
+}
+
+:where(.navds-button--xsmall, .navds-button--small) .navds-button__icon {
+  --__axc-button-icon-margin: -2px;
+
+  font-size: 1.25rem;
+}
+
+.navds-button__icon:only-child {
+  margin: 0;
+}
+
+/*************************
+ * .navds-button--primary *
+ *************************/
+
+.navds-button--primary {
+  background-color: var(--ax-bg-accent-strong);
+  color: var(--ax-text-accent-contrast);
+}
+
+@media (forced-colors: active) {
+  .navds-button.navds-button--primary {
+    background-color: highlight;
+    color: highlighttext;
+  }
+
+  .navds-button.navds-button--primary span {
+    forced-color-adjust: none;
+  }
+}
+
+.navds-button--primary:hover {
+  background-color: var(--ax-bg-accent-strong-hover);
+}
+
+.navds-button--primary:active {
+  background-color: var(--ax-bg-accent-strong-pressed);
+}
+
+.navds-button--primary:hover:where(:disabled, .navds-button--disabled),
+.navds-button--primary:active:where(:disabled, .navds-button--disabled) {
+  background-color: var(--ax-bg-accent-strong);
+}
+
+/*************************
+ * .navds-button--primary-neutral *
+ *************************/
+
+.navds-button--primary-neutral {
+  background-color: var(--ax-bg-neutral-strong);
+  color: var(--ax-text-neutral-contrast);
+}
+
+.navds-button--primary-neutral:hover {
+  background-color: var(--ax-bg-neutral-strong-hover);
+}
+
+.navds-button--primary-neutral:active {
+  background-color: var(--ax-bg-neutral-strong-pressed);
+}
+
+.navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled),
+.navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) {
+  background-color: var(--ax-bg-neutral-strong);
+}
+
+/**************************
+* .navds-button--secondary *
+ **************************/
+
+.navds-button--secondary {
+  background-color: transparent;
+  color: var(--ax-text-accent);
+  box-shadow: inset 0 0 0 2px var(--ax-border-accent);
+}
+
+.navds-button--secondary:hover {
+  background-color: var(--ax-bg-accent-moderate-hoverA);
+  color: var(--ax-bg-accent-strong-hover);
+  box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
+}
+
+.navds-button--secondary:active {
+  background-color: var(--ax-bg-accent-strong-pressed);
+  color: var(--ax-text-accent-contrast);
+  box-shadow: none;
+}
+
+.navds-button--secondary:where(:disabled, .navds-button--disabled),
+.navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
+  background-color: transparent;
+  color: var(--ax-text-accent);
+}
+
+/**************************
+* .navds-button--secondary-neutral *
+ **************************/
+
+.navds-button--secondary-neutral {
+  background-color: transparent;
+  color: var(--ax-text-default);
+  box-shadow: inset 0 0 0 2px var(--ax-border-neutral);
+}
+
+.navds-button--secondary-neutral:hover {
+  background-color: var(--ax-bg-neutral-moderate-hoverA);
+}
+
+.navds-button--secondary-neutral:active {
+  color: var(--ax-text-neutral-contrast);
+  background-color: var(--ax-bg-neutral-strong-pressed);
+  box-shadow: none;
+}
+
+.navds-button--secondary-neutral:where(:disabled, .navds-button--disabled),
+.navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ax-text-default);
+  background-color: transparent;
+  box-shadow: inset 0 0 0 2px var(--ax-border-strong);
+}
+
+/****************************
+ * .navds-button--tertiary *
+ ****************************/
+
+.navds-button--tertiary {
+  background-color: transparent;
+  color: var(--ax-text-accent);
+}
+
+.navds-button--tertiary:hover {
+  background-color: var(--ax-bg-accent-hoverA);
+  color: var(--ax-text-accent);
+}
+
+.navds-button--tertiary:active {
+  background-color: var(--ax-bg-accent-strong-pressed);
+  color: var(--ax-text-accent-contrast);
+}
+
+.navds-button--tertiary:active:hover {
+  background-color: var(--ax-bg-accent-strong-pressed);
+}
+
+.navds-button--tertiary:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary:hover:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary:active:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary:active:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ax-text-accent);
+  background: none;
+  box-shadow: none;
+}
+
+/****************************
+ * .navds-button--tertiary-neutral *
+ ****************************/
+
+.navds-button--tertiary-neutral {
+  color: var(--ax-text-default);
+}
+
+.navds-button--tertiary-neutral:hover {
+  background-color: var(--ax-bg-neutral-hoverA);
+}
+
+.navds-button--tertiary-neutral:active {
+  background-color: var(--ax-bg-neutral-strong-pressed);
+  color: var(--ax-text-neutral-contrast);
+}
+
+.navds-button--tertiary-neutral:active:hover {
+  background-color: var(--ax-bg-neutral-strong-pressed);
+}
+
+.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(--ax-text-default);
+  background: none;
+  box-shadow: none;
+}
+
+/*************************
+ * .navds-button--danger *
+ *************************/
+
+.navds-button--danger {
+  background-color: var(--ax-bg-danger-strong);
+  color: var(--ax-text-danger-contrast);
+}
+
+.navds-button--danger:hover {
+  background-color: var(--ax-bg-danger-strong-hover);
+}
+
+.navds-button--danger:active {
+  background-color: var(--ax-bg-danger-strong-pressed);
+}
+
+.navds-button--danger:active:where(:disabled, .navds-button--disabled),
+.navds-button--danger:hover:where(:disabled, .navds-button--disabled) {
+  background-color: var(--ax-bg-danger-strong);
+}
+
+/**************************
+ * .navds-button:disabled *
+ **************************/
+
+.navds-button:where(:disabled, .navds-button--disabled) {
+  cursor: not-allowed;
+}
+
+.navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
+  opacity: 0.3;
+}
+
+/* Loader overrides */
+.navds-button .navds-loader .navds-loader__foreground {
+  stroke: currentColor;
+}
+
+.navds-button--primary .navds-loader .navds-loader__background,
+.navds-button--danger .navds-loader .navds-loader__background {
+  stroke: rgb(255 255 255 / 0.3);
+}
+
+@media (forced-colors: active) {
+  .navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
+    opacity: 1;
+    color: GrayText;
+  }
+
+  .navds-button {
+    border: 1px solid transparent;
+    color: ButtonText;
+    background-color: ButtonFace;
+  }
+
+  .navds-button:hover {
+    background-color: highlighttext;
+    border-color: highlight;
+    color: highlight;
+    box-shadow: none;
+  }
+
+  .navds-button:hover span {
+    forced-color-adjust: none;
+  }
+
+  .navds-button .navds-loader .navds-loader__foreground {
+    stroke: canvas;
+  }
+
+  .navds-button--primary .navds-loader .navds-loader__background,
+  .navds-button--danger .navds-loader .navds-loader__background {
+    stroke: canvastext;
+  }
 }

package/darkside/chat.darkside.css

@@ -0,0 +1,120 @@
+.navds-chat {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--a-spacing-3);
+  max-width: 40.75rem;
+}
+
+.navds-chat--right {
+  flex-direction: row-reverse;
+}
+
+.navds-chat__bubble-wrapper {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-spacing-3);
+}
+
+.navds-chat--right .navds-chat__bubble-wrapper {
+  align-items: flex-end;
+}
+
+.navds-chat__avatar {
+  align-items: center;
+  box-shadow: var(--a-shadow-xsmall);
+  background-color: var(--ac-chat-avatar-bg, var(--a-surface-neutral-subtle));
+  border-radius: var(--a-border-radius-full);
+  color: var(--ac-chat-avatar-color, var(--a-text-default));
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  overflow: hidden;
+  height: 2.5rem;
+  width: 2.5rem;
+  line-height: 2.5rem; /* Makes text properly vertically centered in Chrome */
+  font-size: 1.06rem;
+  letter-spacing: 0.024rem;
+}
+
+.navds-chat__avatar svg {
+  align-self: center;
+  width: 100%;
+  max-width: 1.5rem;
+  max-height: 1.5rem;
+}
+
+.navds-chat__bubble {
+  padding: var(--a-spacing-4);
+  box-shadow: var(--a-shadow-xsmall);
+  width: fit-content;
+  background-color: var(--ac-chat-bubble-bg, var(--a-surface-neutral-subtle));
+  border-radius: var(--a-border-radius-xlarge);
+  border-bottom-left-radius: 2px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-spacing-2);
+}
+
+.navds-chat--right .navds-chat__bubble {
+  border-radius: var(--a-border-radius-xlarge);
+  border-bottom-right-radius: 2px;
+}
+
+.navds-chat--small .navds-chat__bubble {
+  padding: var(--a-spacing-3);
+}
+
+.navds-chat--info .navds-chat__bubble,
+.navds-chat--info .navds-chat__avatar {
+  background-color: var(--a-surface-info-subtle);
+}
+
+.navds-chat--subtle .navds-chat__bubble,
+.navds-chat--subtle .navds-chat__avatar {
+  background-color: var(--a-surface-default);
+}
+
+.navds-chat__top-text {
+  color: var(--ac-chat-top-text, var(--a-text-default));
+  display: flex;
+  gap: var(--a-spacing-2);
+  align-items: baseline;
+  font-weight: normal;
+  margin: 0;
+}
+
+.navds-chat--right .navds-chat__top-text {
+  align-self: flex-end;
+}
+
+.navds-chat--top-text-left .navds-chat__top-text {
+  align-self: flex-start;
+}
+
+.navds-chat--top-text-right .navds-chat__top-text {
+  align-self: flex-end;
+}
+
+.navds-chat--left .navds-chat__top-text--right {
+  align-self: flex-end;
+}
+
+.navds-chat--right .navds-chat__top-text--left {
+  align-self: flex-start;
+}
+
+@media (forced-colors: active) {
+  .navds-chat__bubble,
+  .navds-chat__avatar {
+    border: 1px solid canvastext;
+    background-color: canvas;
+    color: canvastext;
+  }
+
+  .navds-chat__avatar svg {
+    forced-color-adjust: none;
+  }
+}

package/darkside/chips.darkside.css

@@ -0,0 +1,234 @@
+.navds-chips {
+  display: flex;
+  gap: var(--a-spacing-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  flex-wrap: wrap;
+}
+
+.navds-chips :where(li) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: block;
+}
+
+.navds-chips__chip {
+  all: unset;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  gap: var(--a-spacing-05);
+  margin: 0;
+  padding: 0 var(--a-spacing-3);
+  text-decoration: none;
+  border-radius: var(--a-border-radius-full);
+  min-height: 2rem;
+}
+
+.navds-chips--small .navds-chips__chip {
+  min-height: 1.5rem;
+  padding: 0 var(--a-spacing-2);
+}
+
+.navds-chips__toggle {
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--a-border-subtle));
+  background-color: var(--ac-chip-toggle-bg, var(--a-surface-action-subtle));
+  color: var(--ac-chip-toggle-text, var(--a-text-default));
+}
+
+.navds-chips__toggle:hover {
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-hover-border, var(--a-border-subtle-hover));
+  background-color: var(--ac-chip-toggle-hover-bg, var(--a-surface-action-subtle-hover));
+}
+
+.navds-chips__toggle[aria-pressed="true"] {
+  box-shadow: none;
+  background-color: var(--ac-chip-toggle-pressed-bg, var(--a-surface-action-selected));
+  color: var(--ac-chip-toggle-pressed-text, var(--a-text-on-action));
+}
+
+.navds-chips__toggle[aria-pressed="true"]:hover {
+  background-color: var(--ac-chip-toggle-pressed-hover-bg, var(--a-surface-action-selected-hover));
+}
+
+/* Toggle variant neutral */
+.navds-chips__toggle--neutral {
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-border, var(--a-border-subtle));
+  background-color: var(--ac-chip-toggle-neutral-bg, var(--a-surface-neutral-subtle));
+  color: var(--ac-chip-toggle-neutral-text, var(--a-text-default));
+}
+
+.navds-chips__toggle--neutral:hover {
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-hover-border, var(--a-border-subtle-hover));
+  background-color: var(--ac-chip-toggle-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+}
+
+.navds-chips__toggle--neutral[aria-pressed="true"] {
+  box-shadow: none;
+  background-color: var(--ac-chip-toggle-neutral-pressed-bg, var(--a-surface-neutral-selected));
+  color: var(--ac-chip-toggle-neutral-pressed-text, var(--a-text-on-neutral));
+}
+
+.navds-chips__toggle--neutral[aria-pressed="true"]:hover {
+  background-color: var(--ac-chip-toggle-neutral-pressed-hover-bg, var(--a-surface-neutral-selected));
+}
+
+.navds-chips__toggle:focus-visible {
+  box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+}
+
+.navds-chips__toggle[aria-pressed="true"]:focus-visible,
+.navds-chips__toggle:active:focus-visible {
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+}
+
+@supports not selector(:focus-visible) {
+  .navds-chips__toggle:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+  }
+
+  .navds-chips__toggle[aria-pressed="true"]:focus,
+  .navds-chips__toggle:active:focus {
+    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--medium .navds-chips__toggle--with-checkmark {
+  padding-left: var(--a-spacing-1-alt);
+}
+
+.navds-chips--small .navds-chips__toggle--with-checkmark {
+  padding-left: var(--a-spacing-1);
+}
+
+.navds-chips--small .navds-chips__toggle-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.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));
+}
+
+.navds-chips__removable--neutral {
+  background-color: var(--ac-chip-removable-neutral-bg, var(--a-surface-neutral-subtle));
+  color: var(--ac-chip-removable-neutral-text, var(--a-text-default));
+  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border, var(--a-border-default));
+}
+
+.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--small .navds-chips__removable-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.navds-chips--small .navds-chips__removable-icon > svg {
+  width: 1rem;
+}
+
+.navds-chips__removable--action:focus-visible {
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    0 0 0 2px var(--a-border-focus);
+}
+
+.navds-chips__removable--neutral:focus-visible {
+  box-shadow: 0 0 0 2px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-chips__removable--action:focus {
+    outline: none;
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      0 0 0 2px var(--a-border-focus);
+  }
+
+  .navds-chips__removable--neutral:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--a-border-focus);
+  }
+}
+
+.navds-chips__removable--action:hover {
+  background-color: var(--ac-chip-removable-action-hover-bg, var(--a-surface-action-selected-hover));
+}
+
+.navds-chips__removable--neutral:hover {
+  background-color: var(--ac-chip-removable-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-hover-border, var(--a-border-strong));
+}
+
+.navds-chips--icon-left {
+  padding-left: var(--a-spacing-1-alt);
+}
+
+.navds-chips--icon-right {
+  padding-right: var(--a-spacing-1-alt);
+}
+
+.navds-chips--small .navds-chips--icon-right {
+  padding-right: var(--a-spacing-05);
+}
+
+@media (forced-colors: active) {
+  .navds-chips__chip {
+    border: 1px solid transparent;
+  }
+
+  .navds-chips__chip:hover {
+    background-color: highlighttext;
+    color: highlight;
+  }
+
+  .navds-chips__chip:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+
+  .navds-chips__chip:where([aria-pressed="true"], :active, :hover) > span {
+    forced-color-adjust: none;
+  }
+
+  .navds-chips__toggle:active {
+    background-color: highlight;
+    color: highlighttext;
+  }
+
+  .navds-chips__toggle[aria-pressed="true"] {
+    background-color: selecteditem;
+    color: selecteditemtext;
+    border: 1px solid selecteditem;
+  }
+
+  .navds-chips__toggle[aria-pressed="true"]:hover {
+    background-color: selecteditemtext;
+    color: selecteditem;
+  }
+
+  .navds-chips__toggle[aria-pressed="true"]:active {
+    background-color: highlight;
+    color: highlighttext;
+  }
+}