@navikt/ds-css 7.39.1 → 8.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "7.39.1",
+  "version": "8.0.0",
   "description": "CSS for Nav Designsystem",
   "author": "Aksel | Nav designsystem team",
   "keywords": [
@@ -26,27 +26,17 @@
   },
   "homepage": "https://aksel.nav.no/designsystemet/",
   "scripts": {
-    "build": "node config/bundle.js && yarn build:darkside",
-    "css:get-version": "node config/get-version.js",
-    "build:darkside": "tsx ./config/bundle.darkside.ts",
-    "test": "yarn build && vitest run"
+    "build": "tsx ./config/bundle.ts",
+    "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^7.39.1",
-    "autoprefixer": "^10.4.20",
+    "@navikt/ds-tokens": "^8.0.0",
     "browserslist": "^4.25.0",
-    "cssnano": "7.1.1",
     "esbuild": "^0.25.11",
     "fast-glob": "3.2.11",
     "lightningcss": "^1.30.1",
-    "lodash": "4.17.21",
     "normalize.css": "^8.0.1",
-    "postcss": "^8.4.31",
-    "postcss-combine-duplicated-selectors": "10.0.3",
-    "postcss-import": "^16.1.1",
-    "postcss-nesting": "13.0.2",
-    "tsx": "^4.20.6",
-    "vitest": "^3.2.4"
+    "tsx": "^4.20.6"
   },
   "browserslist": [
     ">0.2%",
@@ -58,7 +48,6 @@
   "exports": {
     ".": "./dist/index.css",
     "./dist/*": "./dist/*",
-    "./darkside": "./dist/darkside/index.css",
     "./tokens.json": "./tokens.json",
     "./config/_mappings": "./config/_mappings.js"
   }

package/src/README.md

@@ -0,0 +1,23 @@
+# Template for writing new CSS
+
+## File setup
+
+1. Create new CSS-file for component: "alert.css", "button.css" etc.
+2. Import file in "index.css": `@import "./alert.css`
+3. Add correct "layer" to import.
+
+## Development
+
+1. Write new CSS for component. Use prefix `.aksel`.
+2. Run storybook: You are now developing new CSS 🎉
+
+## Checklist
+
+- Add new CSS-files under `core/css/src/`.
+- Import new CSS-files in `core/css/src/index.css`
+- New CSS-selectors should have `.aksel` as prefix.
+- Use outline + outline-offset 3px for focus-markings.
+- Use `:focus-visible` where possible.
+- Check forced colors (high-contrast)
+- Check print
+- Test changes in Storybook.

package/{darkside/action-menu.darkside.css → src/action-menu.css}

@@ -44,13 +44,13 @@
   min-width: 128px;
   max-width: min(95vw, 640px);
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
-  transform-origin: var(--__ac-action-menu-content-transform-origin);
+  transform-origin: var(--__axc-action-menu-content-transform-origin);
   animation-duration: 160ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
   padding: var(--__axc-action-menu-content-p);
   overflow: auto;
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
-  max-height: var(--__ac-action-menu-content-available-height);
+  max-height: var(--__axc-action-menu-content-available-height);
 }
 
 /* ----------------------------- ActionMenu Item ---------------------------- */

package/{darkside/baseline/baseline.darkside.css → src/baseline/baseline.css}

@@ -1,5 +1,16 @@
 /* ------------------------- Global typo-definitions ------------------------ */
 
+:root,
+:host,
+.light {
+  color: var(--ax-text-neutral);
+  color-scheme: light;
+}
+
+.dark {
+  color-scheme: dark;
+}
+
 body,
 :host {
   font-family: var(--ax-font-family, "Source Sans 3", "Source Sans Pro", Arial, sans-serif);

package/src/baseline/tokens.css

@@ -0,0 +1 @@
+@import "../../../tokens/dist/tokens.css";

package/{darkside/button.darkside.css → src/button.css}

@@ -175,8 +175,7 @@
   stroke: currentColor;
 }
 
-.aksel-button--primary .aksel-loader .aksel-loader__background,
-.aksel-button--danger .aksel-loader .aksel-loader__background {
+.aksel-button[data-variant="primary"] .aksel-loader .aksel-loader__background {
   stroke: rgb(255 255 255 / 0.3);
 }
 
@@ -194,13 +193,38 @@
     border: 1px solid transparent;
     color: ButtonText;
     background-color: ButtonFace;
-  }
 
-  .aksel-button:not(:disabled):hover {
-    background-color: highlighttext;
-    border-color: highlight;
-    color: highlight;
-    box-shadow: none;
+    &[data-variant="primary"]:not(:disabled) {
+      background-color: Highlight;
+      color: highlighttext;
+
+      & span {
+        forced-color-adjust: none;
+      }
+
+      &:where(a) {
+        background-color: LinkText;
+        color: highlighttext;
+
+        & span {
+          forced-color-adjust: none;
+        }
+      }
+
+      &:hover {
+        background-color: highlighttext;
+        border-color: highlight;
+        color: highlight;
+      }
+    }
+
+    &:hover:not(:disabled),
+    &[data-variant="primary"]:where(a):hover:not(:disabled) {
+      background-color: highlighttext;
+      border-color: highlight;
+      color: highlight;
+      box-shadow: none;
+    }
   }
 
   .aksel-button:not(:disabled):hover span {
@@ -211,8 +235,7 @@
     stroke: canvas;
   }
 
-  .aksel-button--primary .aksel-loader .aksel-loader__background,
-  .aksel-button--danger .aksel-loader .aksel-loader__background {
+  .aksel-button[data-variant="primary"] .aksel-loader .aksel-loader__background {
     stroke: canvastext;
   }
 }

package/{darkside/form/combobox.darkside.css → src/form/combobox.css}

@@ -238,7 +238,7 @@
 
 .aksel-combobox__list {
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
-  width: var(--ac-floating-anchor-width);
+  width: var(--__axc-floating-anchor-width);
   overflow: clip;
   border: 1px solid var(--ax-border-neutral-subtleA);
   display: flex;

package/{darkside/form/file-upload.darkside.css → src/form/file-upload.css}

@@ -168,20 +168,27 @@ li.aksel-file-item {
   align-items: flex-start;
 }
 
+.aksel-file-item__link {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ax-space-2);
+  width: fit-content;
+
+  &:is(a) {
+    color: var(--ax-text-subtle);
+  }
+}
+
 .aksel-file-item--error > .aksel-file-item__inner {
   outline: 2px solid var(--ax-border-danger-strong);
 }
 
 .aksel-file-item__icon {
-  background-color: var(--ax-bg-neutral-moderateA);
-  color: var(--ax-text-neutral);
-  border-radius: var(--ax-radius-full);
-  min-height: 2.5rem;
-  min-width: 2.5rem;
-  margin-top: var(--ax-space-2);
+  min-height: 1.5rem;
+  min-width: 1.5rem;
+  margin: var(--ax-space-2) 0;
   display: grid;
   place-content: center;
-  transition: background-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
 
   & > svg {
     height: 1.5rem;
@@ -191,6 +198,9 @@ li.aksel-file-item {
 
 .aksel-file-item__icon--loading {
   background-color: transparent;
+  display: grid;
+  place-content: center;
+  padding: var(--ax-space-12);
 }
 
 .aksel-file-item__file-info {

package/src/form/index.css

@@ -0,0 +1,14 @@
+@import "./fieldset.css";
+@import "./file-upload.css";
+@import "./form.css";
+@import "./error-summary.css";
+@import "./confirmation-panel.css";
+@import "./radio-checkbox.css";
+@import "./select.css";
+@import "./switch.css";
+@import "./text-field.css";
+@import "./textarea.css";
+@import "./search.css";
+@import "./combobox.css";
+@import "./form-summary.css";
+@import "./form-progress.css";

package/{darkside/form/search.darkside.css → src/form/search.css}

@@ -102,7 +102,7 @@
   border-bottom-right-radius: var(--ax-radius-8);
 }
 
-.aksel-search__button-search.aksel-button--secondary {
+.aksel-search__button-search[data-variant="secondary"] {
   --__axc-button-border-width: 1px;
   --__axc-button-border-color: var(--ax-border-neutral);
 
@@ -118,7 +118,7 @@
 /* Special-case where we hover/focus input, and want the secondary-button to match input-border */
 .aksel-search:not(.aksel-search--error, .aksel-search--disabled)
   .aksel-search__wrapper:has(.aksel-search__input:is(:hover, :focus-visible))
-  .aksel-search__button-search.aksel-button--secondary:not(:hover, :active) {
+  .aksel-search__button-search[data-variant="secondary"]:not(:hover, :active) {
   --__axc-button-border-color: var(--ax-border-strong);
 }
 

package/src/index.css

@@ -0,0 +1,64 @@
+@charset "UTF-8";
+
+/* CSS is ordered by specificity, so that browsers without layers fall backs to good defaults */
+@layer aksel.reset, aksel.theming, aksel.baseline, aksel.print, aksel.typography, aksel.components.core, aksel.components.core.loader, aksel.components.core.button, aksel.components.form, aksel.components.modules, aksel.layout;
+
+/* ----------------------------- CSS foundations ---------------------------- */
+@import "./baseline/fonts.css" layer(aksel.typography);
+@import "./baseline/reset.css" layer(aksel.reset);
+@import "./baseline/tokens.css" layer(aksel.theming);
+@import "./baseline/baseline.css" layer(aksel.baseline);
+@import "./baseline/print.css" layer(aksel.print);
+
+/* ------------------------------- Components ------------------------------- */
+@import "./theme.css" layer(aksel.components.core);
+@import "./typography.css" layer(aksel.components.core);
+@import "./chips.css" layer(aksel.components.core);
+@import "./loader.css" layer(aksel.components.core.loader);
+@import "./button.css" layer(aksel.components.core.button);
+
+/**
+  * Most components depend on typo-styles, so we import them first.
+  *
+  * `./form/index.css` edits the following components:
+  * - Button
+  * - Chips
+  * To avoid specificity conflicts, we import those components before form.
+*/
+@import "./form/index.css" layer(aksel.components.form);
+@import "./accordion.css" layer(aksel.components.modules);
+@import "./alert.css" layer(aksel.components.modules);
+@import "./chat.css" layer(aksel.components.modules);
+@import "./copybutton.css" layer(aksel.components.modules);
+@import "./date.css" layer(aksel.components.modules);
+@import "./dialog.css" layer(aksel.components.modules);
+@import "./dropdown.css" layer(aksel.components.modules);
+@import "./action-menu.css" layer(aksel.components.modules);
+@import "./expansioncard.css" layer(aksel.components.modules);
+@import "./guide-panel.css" layer(aksel.components.modules);
+@import "./help-text.css" layer(aksel.components.modules);
+@import "./inline-message.css" layer(aksel.components.modules);
+@import "./internalheader.css" layer(aksel.components.modules);
+@import "./link.css" layer(aksel.components.modules);
+@import "./link-panel.css" layer(aksel.components.modules);
+@import "./link-anchor.css" layer(aksel.components.modules);
+@import "./link-card.css" layer(aksel.components.modules);
+@import "./modal.css" layer(aksel.components.modules);
+@import "./pagination.css" layer(aksel.components.modules);
+@import "./popover.css" layer(aksel.components.modules);
+@import "./tag.css" layer(aksel.components.modules);
+@import "./timeline.css" layer(aksel.components.modules);
+@import "./tooltip.css" layer(aksel.components.modules);
+@import "./toggle-group.css" layer(aksel.components.modules);
+@import "./panel.css" layer(aksel.components.modules);
+@import "./read-more.css" layer(aksel.components.modules);
+@import "./progress-bar.css" layer(aksel.components.modules);
+@import "./skeleton.css" layer(aksel.components.modules);
+@import "./process.css" layer(aksel.components.modules);
+@import "./stepper.css" layer(aksel.components.modules);
+@import "./table.css" layer(aksel.components.modules);
+@import "./tabs.css" layer(aksel.components.modules);
+@import "./list.css" layer(aksel.components.modules);
+
+/* --------------------------------- Layout --------------------------------- */
+@import "./primitives/index.css" layer(aksel.layout);

package/{darkside/link-card.darkside.css → src/link-card.css}

@@ -2,7 +2,7 @@
   --__axc-link-card-padding-block: var(--ax-space-16);
   --__axc-link-card-padding-inline: var(--ax-space-20);
 
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
   text-decoration: none;
   color: var(--ax-text-neutral);
   transition-property: border-color, box-shadow, transform, background-color;
@@ -103,7 +103,7 @@
   grid-area: image;
   margin-block: calc(var(--__axc-link-card-padding-block) * -1) var(--__axc-link-card-padding-block);
   margin-inline: calc(var(--__axc-link-card-padding-inline) * 1 * -1);
-  border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
+  border-radius: calc(var(--ax-radius-12) - 1px);
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   position: relative;

package/{darkside/link.darkside.css → src/link.css}

@@ -22,10 +22,6 @@
     color: var(--ax-text-default);
   }
 
-  &[data-variant="subtle"] {
-    color: var(--ax-text-subtle);
-  }
-
   &.aksel-link--inline-text {
     display: inline;
 

package/{darkside/modal.darkside.css → src/modal.css}

@@ -95,14 +95,13 @@
   /*
    * Cannot use --ax-bg-overlay because ::backdrop does not inherit from anything but itself.
    * TODO: Consider adding `::backdrop` to global token definitions.
-   * TODO: Check that overlay-color is correct after the new colors is set in stone.
    */
-  background: rgb(2 20 49 /0.8);
+  background: rgba(12 22 39 / 0.659);
   animation: akselModalBackdropFadeIn 0.7s cubic-bezier(0.15, 1, 0.3, 1);
 }
 
 .aksel-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
-  background: rgb(2 20 49 /0.8);
+  background: rgba(12 22 39 / 0.659);
 
   /* From polyfill: */
   position: fixed;

package/src/primitives/index.css

@@ -0,0 +1,7 @@
+@import "./base.css";
+@import "./box.css";
+@import "./bleed.css";
+@import "./page.css";
+@import "./hgrid.css";
+@import "./stack.css";
+@import "./responsive.css";

package/{darkside/progress-bar.darkside.css → src/progress-bar.css}

@@ -22,10 +22,9 @@
 }
 
 .aksel-progress-bar__foreground {
-  /* TODO:  rename --__ac- in ProgressBar.tsx after darkside update */
-  --__ac-progress-bar-translate: initial;
+  --__axc-progress-bar-translate: initial;
 
-  transform: translateX(var(--__ac-progress-bar-translate));
+  transform: translateX(var(--__axc-progress-bar-translate));
   background: var(--ax-bg-strong);
   transform-origin: left;
   position: absolute;
@@ -38,14 +37,14 @@
 }
 
 .aksel-progress-bar__foreground--indeterminate {
-  --__ac-progress-bar-simulated: initial;
+  --__axc-progress-bar-simulated: initial;
 
   animation-name: aksel-progress-bar-indeterminate-grow, aksel-progress-bar-indeterminate;
   animation-timing-function: ease-in-out, ease-in-out;
-  animation-duration: var(--__ac-progress-bar-simulated), 2500ms;
+  animation-duration: var(--__axc-progress-bar-simulated), 2500ms;
   animation-fill-mode: forwards, none;
   animation-iteration-count: 1, infinite;
-  animation-delay: 0s, var(--__ac-progress-bar-simulated);
+  animation-delay: 0s, var(--__axc-progress-bar-simulated);
 }
 
 /* aksel-progress-bar-indeterminate wave animation */

package/{darkside/table.darkside.css → src/table.css}

@@ -291,7 +291,7 @@
 }
 
 .aksel-table__expanded-row-content {
-  --__ac-table-expanded-row-pi: calc(var(--ax-space-8) + 3rem);
+  --__axc-table-expanded-row-pi: calc(var(--ax-space-8) + 3rem);
 
   padding-block: var(--ax-space-16);
 }
@@ -301,15 +301,15 @@
 }
 
 .aksel-table__expanded-row-content--gutter-both {
-  padding-inline: var(--__ac-table-expanded-row-pi);
+  padding-inline: var(--__axc-table-expanded-row-pi);
 }
 
 .aksel-table__expanded-row-content--gutter-left {
-  padding-inline: var(--__ac-table-expanded-row-pi) var(--ax-space-8);
+  padding-inline: var(--__axc-table-expanded-row-pi) var(--ax-space-8);
 }
 
 .aksel-table__expanded-row-content--gutter-right {
-  padding-inline: var(--ax-space-8) var(--__ac-table-expanded-row-pi);
+  padding-inline: var(--ax-space-8) var(--__axc-table-expanded-row-pi);
 }
 
 .aksel-table__expanded-row-content--gutter-none {

package/{darkside/theme.darkside.css → src/theme.css}

@@ -4,12 +4,4 @@
   &[data-background="true"] {
     background-color: var(--ax-bg-default);
   }
-
-  &.light {
-    color-scheme: light;
-  }
-
-  &.dark {
-    color-scheme: dark;
-  }
 }

package/{darkside/typography.darkside.css → src/typography.css}

@@ -278,3 +278,11 @@
     color: var(--ax-text-subtle);
   }
 }
+
+.aksel-typo--color-contrast {
+  color: var(--ax-text-neutral-contrast);
+
+  &[data-color] {
+    color: var(--ax-text-contrast);
+  }
+}

package/accordion.css

@@ -1,198 +0,0 @@
-.navds-accordion {
-  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
-}
-
-/*************************
- * Header *
- *************************/
-.navds-accordion__header {
-  --__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent),
-    inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
-
-  width: 100%;
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: var(--a-spacing-2);
-  padding: var(--a-spacing-3);
-  margin: 0;
-  text-align: left;
-  background: var(--ac-accordion-header-bg, var(--a-surface-transparent));
-  cursor: pointer;
-  border: none;
-  position: relative;
-  box-shadow: var(--__ac-accordion-header-shadow);
-  z-index: 1;
-}
-
-.navds-accordion__header:hover {
-  background-color: var(--ac-accordion-header-bg-hover, var(--a-surface-hover));
-  text-decoration: underline;
-  color: var(--ac-accordion-header-text-hover, inherit);
-}
-
-.navds-accordion--small .navds-accordion__header {
-  padding: var(--a-spacing-2) var(--a-spacing-3);
-}
-
-.navds-accordion--medium .navds-accordion__header {
-  padding: var(--a-spacing-3);
-}
-
-.navds-accordion--large .navds-accordion__header {
-  padding: var(--a-spacing-4) var(--a-spacing-3);
-}
-
-.navds-accordion__item:last-child > :where(.navds-accordion__header) {
-  box-shadow:
-    var(--__ac-accordion-header-shadow),
-    inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
-}
-
-.navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header) {
-  box-shadow:
-    inset 2px 0 0 0 var(--a-transparent),
-    inset -2px 0 0 0 var(--a-transparent),
-    inset 0 2px 0 0 var(--a-transparent),
-    inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
-}
-
-.navds-accordion__item:last-child:where(.navds-accordion__item--open) {
-  box-shadow:
-    inset 2px 0 0 0 var(--a-transparent),
-    inset -2px 0 0 0 var(--a-transparent),
-    inset 0 2px 0 0 var(--a-transparent),
-    inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
-}
-
-.navds-accordion__item--open > :where(.navds-accordion__header) {
-  box-shadow: var(--__ac-accordion-header-shadow);
-}
-
-.navds-accordion__header:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 3px;
-  box-shadow: var(--a-shadow-focus);
-  border-radius: var(--a-border-radius-large);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-accordion__header:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
-    border-radius: var(--a-border-radius-large);
-  }
-}
-
-.navds-accordion__header-content {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/*************************
- * Icon *
- *************************/
-.navds-accordion__icon-wrapper {
-  display: grid;
-  place-content: center;
-  border-radius: var(--a-border-radius-medium);
-  height: var(--a-spacing-6);
-  width: var(--a-spacing-6);
-  align-self: center;
-}
-
-.navds-accordion__header:hover > .navds-accordion__icon-wrapper {
-  background-color: var(--ac-accordion-header-icon-bg-hover, var(--a-surface-neutral-subtle-hover));
-}
-
-.navds-accordion__header-chevron {
-  border-radius: var(--a-border-radius-medium);
-  font-size: 1.5rem;
-  height: 1.75rem;
-  flex-shrink: 0;
-  transition: transform 150ms ease-in-out;
-  align-self: center;
-}
-
-:where(.navds-accordion__header):hover > :where(.navds-accordion__icon-wrapper) > :where(.navds-accordion__header-chevron) {
-  transform: translateY(1px);
-}
-
-.navds-accordion__item--open
-  > :where(.navds-accordion__header)
-  > :where(.navds-accordion__icon-wrapper)
-  > :where(.navds-accordion__header-chevron) {
-  transform: translateY(0) rotate(-180deg);
-}
-
-.navds-accordion__item--open
-  > :where(.navds-accordion__header):hover
-  > :where(.navds-accordion__icon-wrapper)
-  > :where(.navds-accordion__header-chevron) {
-  transform: translateY(-1px) rotate(-180deg);
-}
-
-/*************************
- * Variant/Default *
- *************************/
-.navds-accordion__item--open {
-  background-color: var(--ac-accordion-item-bg-open, var(--a-transparent));
-}
-
-/*************************
- * Variant/Neutral *
- *************************/
-.navds-accordion__item--open.navds-accordion__item--neutral {
-  background-color: var(--ac-accordion-neutral-item-bg-open, var(--a-surface-neutral-subtle));
-}
-
-/*************************
- * Content *
- *************************/
-
-.navds-accordion__content {
-  padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5);
-  animation: fadeAccordionContent 250ms ease;
-}
-
-.navds-accordion--indent > :where(.navds-accordion__item) > :where(.navds-accordion__content) {
-  padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
-}
-
-.navds-accordion__content--closed {
-  display: none;
-}
-
-.navds-accordion__item--no-animation :where(.navds-accordion__content) {
-  animation: none;
-}
-
-@keyframes fadeAccordionContent {
-  0% {
-    opacity: 0.25;
-    transform: translateY(-8px);
-  }
-
-  40% {
-    opacity: 0.7;
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (forced-colors: active) {
-  .navds-accordion__header {
-    border: 1px solid buttonborder;
-    background-color: canvas;
-    color: canvastext;
-  }
-
-  .navds-accordion__header:hover {
-    background-color: canvas;
-    border: 1px solid highlight;
-    color: highlight;
-  }
-}