@navikt/ds-css 7.40.0 → 8.0.0

package/button.css

@@ -1,548 +0,0 @@
-[data-theme="dark"] {
-  --__ac-button-primary-text: var(--a-gray-900);
-  --__ac-button-primary-bg: var(--a-blue-200);
-  --__ac-button-primary-focus-border: var(--a-gray-900);
-  --__ac-button-primary-hover-bg: var(--a-blue-300);
-  --__ac-button-primary-active-bg: var(--a-blue-400);
-  --__ac-button-secondary-text: var(--a-white);
-  --__ac-button-secondary-hover-text: var(--a-white);
-  --__ac-button-secondary-active-text: var(--a-white);
-  --__ac-button-secondary-active-focus-border: var(--a-gray-900);
-  --__ac-button-secondary-bg: var(--a-gray-900);
-  --__ac-button-secondary-border: var(--a-blue-200);
-  --__ac-button-secondary-hover-bg: var(--a-gray-800);
-  --__ac-button-secondary-focus-border: var(--a-blue-200);
-  --__ac-button-secondary-active-bg: var(--a-gray-700);
-}
-
-[data-theme="light"] {
-  --__ac-button-primary-text: initial;
-  --__ac-button-primary-bg: initial;
-  --__ac-button-primary-focus-border: initial;
-  --__ac-button-primary-hover-bg: initial;
-  --__ac-button-primary-active-bg: initial;
-  --__ac-button-secondary-text: initial;
-  --__ac-button-secondary-hover-text: initial;
-  --__ac-button-secondary-active-text: initial;
-  --__ac-button-secondary-active-focus-border: initial;
-  --__ac-button-secondary-bg: initial;
-  --__ac-button-secondary-border: initial;
-  --__ac-button-secondary-hover-bg: initial;
-  --__ac-button-secondary-focus-border: initial;
-  --__ac-button-secondary-active-bg: initial;
-}
-
-.navds-button {
-  --__ac-button-padding: var(--a-spacing-3) var(--a-spacing-5);
-
-  display: inline-flex;
-  cursor: pointer;
-  margin: 0;
-  text-decoration: none;
-  border: none;
-  background: none;
-  border-radius: var(--ac-button-border-radius, var(--a-border-radius-medium));
-  padding: var(--ac-button-padding, var(--__ac-button-padding));
-  align-items: center;
-  justify-content: center;
-  gap: var(--a-spacing-2);
-}
-
-.navds-button--small {
-  --__ac-button-padding: var(--a-spacing-1) var(--a-spacing-3);
-
-  padding: var(--ac-button-padding-small, var(--__ac-button-padding));
-  min-height: 2rem;
-  min-width: 2rem;
-}
-
-.navds-button--xsmall {
-  --__ac-button-padding: var(--a-spacing-05) var(--a-spacing-2);
-
-  padding: var(--ac-button-padding-xsmall, var(--__ac-button-padding));
-  gap: var(--a-spacing-1);
-}
-
-.navds-button--icon-only {
-  --__ac-button-padding: var(--a-spacing-3);
-
-  padding: var(--ac-button-padding-icon-only, var(--__ac-button-padding));
-}
-
-.navds-button--small.navds-button--icon-only {
-  --__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-05);
-
-  padding: var(--ac-button-padding-icon-only-xsmall, var(--__ac-button-padding));
-}
-
-.navds-button:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow: var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-button:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
-  }
-}
-
-.navds-button__icon {
-  --ac-button-icon-margin: -4px;
-
-  font-size: 1.5rem;
-  display: flex;
-}
-
-.navds-button__icon:first-child {
-  margin-left: var(--ac-button-icon-margin);
-}
-
-.navds-button__icon:last-child {
-  margin-right: var(--ac-button-icon-margin);
-}
-
-.navds-button--icon-only .navds-button__icon {
-  margin: 0;
-}
-
-:where(.navds-button--xsmall, .navds-button--small) .navds-button__icon {
-  --ac-button-icon-margin: -2px;
-
-  font-size: 1.25rem;
-}
-
-/*************************
- * .navds-button--primary *
- *************************/
-
-.navds-button--primary {
-  background-color: var(--ac-button-primary-bg, var(--__ac-button-primary-bg, var(--a-surface-action)));
-  color: var(--ac-button-primary-text, var(--__ac-button-primary-text, var(--a-text-on-action)));
-}
-
-@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(--ac-button-primary-hover-bg, var(--__ac-button-primary-hover-bg, var(--a-surface-action-hover)));
-}
-
-.navds-button--primary:active {
-  background-color: var(--ac-button-primary-active-bg, var(--__ac-button-primary-active-bg, var(--a-surface-action-active)));
-}
-
-.navds-button--primary:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow:
-    inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
-    var(--a-shadow-focus);
-}
-
-@media (forced-colors: active) {
-  .navds-button--primary:focus-visible {
-    box-shadow: none;
-  }
-}
-
-@supports not selector(:focus-visible) {
-  .navds-button--primary:focus {
-    box-shadow:
-      inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
-      var(--a-shadow-focus);
-  }
-}
-
-.navds-button--primary:hover:where(:disabled, .navds-button--disabled),
-.navds-button--primary:active:where(:disabled, .navds-button--disabled) {
-  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-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .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(--__ac-button-secondary-text, var(--a-text-action)));
-  background-color: var(--ac-button-secondary-bg, var(--__ac-button-secondary-bg, var(--a-surface-transparent)));
-  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--__ac-button-secondary-border, var(--a-border-action)));
-}
-
-.navds-button--secondary:hover {
-  color: var(--ac-button-secondary-hover-text, var(--__ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle)));
-  background-color: var(
-    --ac-button-secondary-hover-bg,
-    var(--__ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover))
-  );
-  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-hover-border, var(--a-border-action-hover));
-}
-
-.navds-button--secondary:focus-visible {
-  box-shadow:
-    inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-button--secondary:focus {
-    box-shadow:
-      inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
-      var(--a-shadow-focus);
-  }
-}
-
-.navds-button--secondary:active {
-  color: var(--ac-button-secondary-active-text, var(--__ac-button-secondary-active-text, var(--a-text-on-action)));
-  background-color: var(--ac-button-secondary-active-bg, var(--__ac-button-secondary-active-bg, var(--a-surface-action-active)));
-  box-shadow: none;
-}
-
-.navds-button--secondary:focus-visible:active {
-  box-shadow:
-    inset 0 0 0 1px
-      var(--ac-button-secondary-active-focus-border, var(--__ac-button-secondary-active-focus-border, var(--a-surface-default))),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-button--secondary:focus:active {
-    box-shadow:
-      inset 0 0 0 1px
-        var(--ac-button-secondary-active-focus-border, var(--__ac-button-secondary-active-focus-border, var(--a-surface-default))),
-      var(--a-shadow-focus);
-  }
-}
-
-.navds-button--secondary:where(:disabled, .navds-button--disabled),
-.navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
-  color: var(--ac-button-secondary-text, var(--__ac-button-secondary-text, var(--a-text-action)));
-  background-color: var(--ac-button-secondary-bg, var(--__ac-button-secondary-bg, var(--a-surface-transparent)));
-  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, 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-visible {
-  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);
-}
-
-@supports not selector(:focus-visible) {
-  .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-visible:active {
-  box-shadow:
-    inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .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 *
- ****************************/
-
-.navds-button--tertiary {
-  color: var(--ac-button-tertiary-text, var(--a-text-action));
-  background-color: var(--ac-button-tertiary-bg, var(--a-surface-transparent));
-}
-
-.navds-button--tertiary:hover {
-  color: var(--ac-button-tertiary-hover-text, var(--a-text-action-on-action-subtle));
-  background-color: var(--ac-button-tertiary-hover-bg, var(--a-surface-action-subtle-hover));
-}
-
-.navds-button--tertiary:focus-visible {
-  box-shadow:
-    inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-button--tertiary:focus {
-    box-shadow:
-      inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)),
-      var(--a-shadow-focus);
-  }
-}
-
-.navds-button--tertiary:active {
-  color: var(--ac-button-tertiary-active-text, var(--a-text-on-action));
-  background-color: var(--ac-button-tertiary-active-bg, var(--a-surface-action-active));
-}
-
-.navds-button--tertiary:active:hover {
-  background-color: var(--ac-button-tertiary-active-hover-bg, var(--a-surface-action-active));
-}
-
-.navds-button--tertiary:focus-visible:active {
-  box-shadow:
-    inset 0 0 0 1px var(--a-surface-default),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-button--tertiary:focus:active {
-    box-shadow:
-      inset 0 0 0 1px var(--a-surface-default),
-      var(--a-shadow-focus);
-  }
-}
-
-.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(--ac-button-tertiary-text, var(--a-text-action));
-  background: none;
-  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-visible {
-  box-shadow:
-    inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .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));
-}
-
-.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:focus-visible:active {
-  box-shadow:
-    inset 0 0 0 1px var(--a-surface-default),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-button--tertiary-neutral:focus:active {
-    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 *
- *************************/
-
-.navds-button--danger {
-  background-color: var(--ac-button-danger-bg, var(--a-surface-danger));
-  color: var(--ac-button-danger-text, var(--a-text-on-danger));
-}
-
-.navds-button--danger:hover {
-  background-color: var(--ac-button-danger-hover-bg, var(--a-surface-danger-hover));
-}
-
-.navds-button--danger:active {
-  background-color: var(--ac-button-danger-active-bg, var(--a-surface-danger-active));
-}
-
-.navds-button--danger:focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--a-surface-default),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-button--danger:focus {
-    box-shadow:
-      inset 0 0 0 1px var(--a-surface-default),
-      var(--a-shadow-focus);
-  }
-}
-
-.navds-button--danger:active:where(:disabled, .navds-button--disabled),
-.navds-button--danger:hover:where(:disabled, .navds-button--disabled) {
-  background-color: var(--ac-button-danger-bg, var(--a-surface-danger));
-}
-
-/**************************
- * .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 {
-  position: absolute;
-}
-
-.navds-button .navds-loader .navds-loader__foreground {
-  stroke: var(--ac-button-loader-stroke, currentColor);
-}
-
-.navds-button--primary .navds-loader .navds-loader__background,
-.navds-button--danger .navds-loader .navds-loader__background {
-  stroke: var(--ac-button-primary-loader-stroke-bg, rgb(255 255 255 / 0.3));
-}
-
-.navds-button--loading > :not(.navds-loader) {
-  visibility: hidden;
-}
-
-@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/chat.css

@@ -1,117 +0,0 @@
-.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 {
-  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;
-  }
-}