@navikt/ds-css 7.4.0 → 7.4.2

package/darkside/index copy.css

@@ -0,0 +1,37 @@
+@charset "UTF-8";
+
+@import "baseline/index.css";
+@import "typography.css";
+@import "accordion.css";
+@import "alert.css";
+@import "button.css";
+@import "chat.css";
+@import "chips.css";
+@import "copybutton.css";
+@import "dropdown.css";
+@import "action-menu.css";
+@import "expansioncard.css";
+@import "guide-panel.css";
+@import "form/index.css";
+@import "help-text.css";
+@import "internalheader.css";
+@import "link.css";
+@import "loader.css";
+@import "modal.css";
+@import "pagination.css";
+@import "popover.css";
+@import "date.css";
+@import "tag.css";
+@import "timeline.css";
+@import "tooltip.css";
+@import "toggle-group.css";
+@import "panel.css";
+@import "link-panel.css";
+@import "read-more.css";
+@import "progress-bar.css";
+@import "skeleton.css";
+@import "stepper.css";
+@import "table.css";
+@import "tabs.css";
+@import "list.css";
+@import "primitives/index.css";

package/darkside/index.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-@layer aksel.reset, aksel.typography, aksel.theme, aksel.components, aksel.utilities;
+@layer aksel.reset, aksel.typography, aksel.theme, aksel.forms, aksel.components, aksel.layout, aksel.utilities;
 
 /* CSS foundations */
 @import "./baseline/reset.darkside.css" layer(aksel.reset);
@@ -10,8 +10,43 @@
 @import "./typography.darkside.css" layer(aksel.typography);
 @import "./baseline/utilities.darkside.css" layer(aksel.utilities);
 
+/* Test: Handles layers itself */
+@import "./form/index.css";
+@import "./primitives/index.css";
+
 /* Theming */
 @import "@navikt/ds-tokens/dist/darkside/tokens.css" layer(aksel.theme);
 
 /* Components */
+@import "../primitives/stack.css" layer(aksel.components);
+@import "./accordion.darkside.css" layer(aksel.components);
 @import "./button.darkside.css" layer(aksel.components);
+@import "./alert.darkside.css" layer(aksel.components);
+@import "./chat.darkside.css" layer(aksel.components);
+@import "./chips.darkside.css" layer(aksel.components);
+@import "./copybutton.darkside.css" layer(aksel.components);
+@import "./dropdown.darkside.css" layer(aksel.components);
+@import "./action-menu.darkside.css" layer(aksel.components);
+@import "./expansioncard.darkside.css" layer(aksel.components);
+@import "./guide-panel.darkside.css" layer(aksel.components);
+@import "./help-text.darkside.css" layer(aksel.components);
+@import "./internalheader.darkside.css" layer(aksel.components);
+@import "./link.darkside.css" layer(aksel.components);
+@import "./loader.darkside.css" layer(aksel.components);
+@import "./modal.darkside.css" layer(aksel.components);
+@import "./pagination.darkside.css" layer(aksel.components);
+@import "./popover.darkside.css" layer(aksel.components);
+@import "./date.darkside.css" layer(aksel.components);
+@import "./tag.darkside.css" layer(aksel.components);
+@import "./timeline.darkside.css" layer(aksel.components);
+@import "./tooltip.darkside.css" layer(aksel.components);
+@import "./toggle-group.darkside.css" layer(aksel.components);
+@import "./panel.darkside.css" layer(aksel.components);
+@import "./link-panel.darkside.css" layer(aksel.components);
+@import "./read-more.darkside.css" layer(aksel.components);
+@import "./progress-bar.darkside.css" layer(aksel.components);
+@import "./skeleton.darkside.css" layer(aksel.components);
+@import "./stepper.darkside.css" layer(aksel.components);
+@import "./table.darkside.css" layer(aksel.components);
+@import "./tabs.darkside.css" layer(aksel.components);
+@import "./list.darkside.css" layer(aksel.components);

package/darkside/internalheader.darkside.css

@@ -0,0 +1,105 @@
+.navds-internalheader {
+  display: flex;
+  align-self: stretch;
+  background: var(--ac-internalheader-bg, var(--a-surface-inverted));
+  min-height: 3rem;
+
+  --navds-internalheader-focus: inset 0 0 0 2px var(--a-border-focus-on-inverted);
+}
+
+@media (forced-colors: active) {
+  .navds-internalheader {
+    background-color: ButtonFace;
+    border: solid 1px ButtonText;
+    color: ButtonText;
+  }
+
+  .navds-internalheader a:focus-visible {
+    box-shadow: none;
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+
+  .navds-internalheader .navds-internalheader__button:focus-visible {
+    box-shadow: none;
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+}
+
+.navds-internalheader__title {
+  border: none;
+  overflow: visible;
+  background: transparent;
+  font: inherit;
+  font-weight: var(--a-font-weight-bold);
+  line-height: normal;
+  text-align: left;
+  padding: 0 var(--a-spacing-5) 0 var(--a-spacing-6);
+  border-right: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  margin: 0;
+  color: var(--ac-internalheader-text, var(--a-text-on-inverted));
+}
+
+button.navds-internalheader__title {
+  cursor: pointer;
+}
+
+.navds-internalheader__user {
+  padding: 0 var(--a-spacing-5);
+  border-left: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
+  display: flex;
+  align-items: center;
+}
+
+.navds-internalheader__button {
+  border: none;
+  margin: 0;
+  padding: 0 var(--a-spacing-3);
+  overflow: visible;
+  background: transparent;
+  font: inherit;
+  line-height: normal;
+  cursor: pointer;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-self: center;
+  gap: var(--a-spacing-2);
+  border-left: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
+  color: var(--ac-internalheader-text, var(--a-text-on-inverted));
+}
+
+a.navds-internalheader__title:hover,
+button.navds-internalheader__title:hover,
+.navds-internalheader__button:hover {
+  background-color: var(--ac-internalheader-hover-bg, var(--a-surface-inverted-hover));
+}
+
+.navds-internalheader__title:focus-visible,
+.navds-internalheader__button:focus-visible {
+  box-shadow: var(--navds-internalheader-focus);
+  outline: none;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-internalheader__title:focus,
+  .navds-internalheader__button:focus {
+    box-shadow: var(--navds-internalheader-focus);
+    outline: none;
+  }
+}
+
+a.navds-internalheader__title:active,
+button.navds-internalheader__title:active,
+.navds-internalheader__button:active {
+  background-color: var(--ac-internalheader-active-bg, var(--a-surface-inverted-active));
+}
+
+.navds-internalheader__user-button {
+  padding-left: var(--a-spacing-5);
+  gap: var(--a-spacing-4);
+}

package/darkside/link-panel.darkside.css

@@ -0,0 +1,47 @@
+.navds-link-panel {
+  text-decoration: none;
+  color: var(--ac-link-panel-text, var(--a-text-default));
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--a-spacing-4);
+}
+
+.navds-link-panel:hover .navds-link-panel__title {
+  text-decoration: underline;
+  color: var(--ac-link-panel-hover-text, var(--a-text-action-hover));
+}
+
+.navds-link-panel:hover {
+  box-shadow: var(--a-shadow-small);
+  border-color: var(--ac-link-panel-hover-border, var(--a-border-action-hover));
+}
+
+.navds-link-panel:focus-visible {
+  outline: 3px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-link-panel:focus {
+    outline: 3px solid transparent;
+    outline-offset: 2px;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-link-panel__chevron {
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  transition: transform 200ms;
+}
+
+.navds-link-panel:hover > .navds-link-panel__chevron,
+.navds-link-panel:focus-within > .navds-link-panel__chevron {
+  transform: translateX(4px);
+}
+
+.navds-link-panel__description {
+  margin-top: var(--a-spacing-1);
+}

package/darkside/link.darkside.css

@@ -0,0 +1,79 @@
+.navds-link {
+  color: var(--ac-link-text, var(--a-text-action));
+  text-decoration: underline;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--a-spacing-1);
+}
+
+.navds-link.navds-link--inline-text {
+  display: inline;
+}
+
+.navds-link.navds-link--inline-text > svg {
+  /* stylelint-disable-next-line plugin/declaration-block-no-ignored-properties */
+  margin: 0.1em 0.1em -0.1em;
+  transform: translateY(0.05em);
+  display: inline;
+  vertical-align: baseline;
+}
+
+.navds-link:hover {
+  text-decoration: none;
+}
+
+.navds-link.navds-link--remove-underline {
+  text-decoration: none;
+}
+
+.navds-link.navds-link--remove-underline:hover {
+  text-decoration: underline;
+}
+
+.navds-alert .navds-link,
+.navds-confirmation-panel .navds-link {
+  color: var(--a-text-default);
+}
+
+.navds-link:focus-visible {
+  outline: 2px solid transparent;
+  color: var(--ac-link-focus-text, var(--a-text-on-action));
+  text-decoration: none;
+  background-color: var(--ac-link-focus-bg, var(--a-border-focus));
+  box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
+}
+
+@supports not selector(:focus-visible) {
+  .navds-link:focus {
+    outline: 2px solid transparent;
+    color: var(--ac-link-focus-text, var(--a-text-on-action));
+    text-decoration: none;
+    background-color: var(--ac-link-focus-bg, var(--a-border-focus));
+    box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
+  }
+}
+
+.navds-link:active {
+  outline: 2px solid transparent;
+  color: var(--ac-link-active-text, var(--a-text-on-action));
+  text-decoration: none;
+  background-color: var(--ac-link-active-bg, var(--a-border-focus));
+  box-shadow: 0 0 0 2px var(--ac-link-active-border, var(--a-border-focus));
+}
+
+.navds-link svg {
+  color: inherit;
+  flex-shrink: 0;
+}
+
+.navds-link--action {
+  color: var(--ac-link-action-text, var(--a-text-action));
+}
+
+.navds-link--neutral {
+  color: var(--ac-link-neutral-text, var(--a-text-default));
+}
+
+.navds-link--subtle {
+  color: var(--ac-link-subtle-text, var(--a-text-subtle));
+}

package/darkside/list.darkside.css

@@ -0,0 +1,85 @@
+.navds-list ul,
+.navds-list ol {
+  padding: 0;
+  margin-block: var(--a-spacing-4);
+}
+
+.navds-list--small ul,
+.navds-list--small ol {
+  margin-block: var(--a-spacing-3);
+}
+
+.navds-list .navds-list :where(ul, ol) {
+  margin-block: var(--a-spacing-2) 0;
+}
+
+.navds-list ol {
+  list-style: decimal; /* This is the default value, but some frameworks have `ol,ul { list-style:none }` */
+  padding-left: 1.7rem;
+}
+
+.navds-list ol > .navds-list__item {
+  padding-left: 0.3rem;
+}
+
+/* SAFARI HACK START */
+/* stylelint-disable selector-type-no-unknown */
+
+_::-webkit-full-page-media,
+_:future,
+:root .navds-list ol {
+  padding-left: 2.1rem;
+}
+
+_::-webkit-full-page-media,
+_:future,
+:root .navds-list ol .navds-list__item {
+  padding-left: 0;
+}
+
+/* SAFARI HACK END */
+/* stylelint-enable selector-type-no-unknown */
+
+.navds-list__item {
+  margin-block-end: var(--a-spacing-2);
+}
+
+.navds-list__item:last-child {
+  margin-block-end: 0;
+}
+
+.navds-list ul > .navds-list__item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--a-spacing-2);
+}
+
+.navds-list ol li::marker {
+  font-weight: var(--a-font-weight-bold);
+  color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
+
+.navds-list__item-marker {
+  width: 1.5rem;
+}
+
+.navds-list ul > li > .navds-list__item-marker {
+  display: flex;
+  align-items: center;
+  height: var(--a-font-line-height-xlarge);
+}
+
+.navds-list--small ul > li > .navds-list__item-marker {
+  height: var(--a-font-line-height-large);
+}
+
+.navds-list__item-marker--bullet {
+  padding-left: 0.8rem;
+  color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
+
+.navds-list__item-marker--icon {
+  font-size: 1.5rem;
+  justify-content: center;
+  color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}

package/darkside/loader.darkside.css

@@ -0,0 +1,119 @@
+.navds-loader {
+  width: 1.5rem;
+  display: inline-block;
+  position: relative;
+  animation: loader-rotate 1.8s linear infinite;
+  stroke-width: 6;
+
+  --ac-loader-background-stroke-width: 5.9;
+}
+
+.navds-loader__foreground {
+  animation: loader-dasharray 1.8s ease-in-out infinite;
+  stroke-dasharray: 80px, 200px;
+  stroke-dashoffset: 0;
+  stroke: var(--ac-loader-stroke, var(--a-border-default));
+}
+
+.navds-loader__background {
+  stroke: var(--ac-loader-stroke-bg, var(--a-surface-active));
+  stroke-width: var(--ac-loader-background-stroke-width);
+}
+
+.navds-loader--neutral .navds-loader__foreground {
+  stroke: var(--ac-loader-neutral-stroke, var(--a-border-default));
+}
+
+.navds-loader--interaction .navds-loader__foreground {
+  stroke: var(--ac-loader-interaction-stroke, var(--a-border-action));
+}
+
+.navds-loader--inverted .navds-loader__foreground {
+  stroke: var(--ac-loader-inverted-stroke, var(--a-border-on-inverted));
+}
+
+.navds-loader--inverted .navds-loader__background {
+  stroke: var(--ac-loader-inverted-stroke-bg, var(--a-border-on-inverted-subtle));
+}
+
+.navds-loader--transparent .navds-loader__background {
+  stroke: var(--a-surface-transparent);
+}
+
+.navds-loader--3xlarge {
+  width: 5.5rem;
+  stroke-width: 5;
+
+  --ac-loader-background-stroke-width: 4.8;
+}
+
+.navds-loader--2xlarge {
+  width: 4rem;
+  stroke-width: 6;
+
+  --ac-loader-background-stroke-width: 5.8;
+}
+
+.navds-loader--xlarge {
+  width: 2.5rem;
+  stroke-width: 6;
+
+  --ac-loader-background-stroke-width: 5.8;
+}
+
+.navds-loader--large {
+  width: 2rem;
+  stroke-width: 7;
+
+  --ac-loader-background-stroke-width: 6.8;
+}
+
+.navds-loader--medium {
+  width: 1.5rem;
+  stroke-width: 7;
+
+  --ac-loader-background-stroke-width: 6.8;
+}
+
+.navds-loader--small {
+  width: 1.25rem;
+  stroke-width: 8;
+
+  --ac-loader-background-stroke-width: 7.8;
+}
+
+.navds-loader--xsmall {
+  width: 1rem;
+  stroke-width: 8;
+
+  --ac-loader-background-stroke-width: 7.8;
+}
+
+@keyframes loader-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loader-dasharray {
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -120px;
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-loader__background {
+    stroke: canvastext;
+  }
+}