@navikt/ds-css 8.0.0 → 8.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "CSS for Nav Designsystem",
   "author": "Aksel | Nav designsystem team",
   "keywords": [
@@ -30,7 +30,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^8.0.0",
+    "@navikt/ds-tokens": "^8.1.0",
     "browserslist": "^4.25.0",
     "esbuild": "^0.25.11",
     "fast-glob": "3.2.11",

package/src/baseline/baseline.css

@@ -49,7 +49,6 @@ body,
 .sr-only,
 .aksel-sr-only {
   border: 0;
-  clip: rect(0, 0, 0, 0);
   clip-path: inset(50%);
   height: 1px;
   margin: -1px;
@@ -72,7 +71,6 @@ body,
 .sr-only.focusable:focus,
 .aksel-sr-only.focusable:active,
 .aksel-sr-only.focusable:focus {
-  clip: auto;
   clip-path: none;
   height: auto;
   margin: 0;

package/src/baseline/fonts.css

@@ -25,8 +25,9 @@
   font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin_ext.woff2) format("woff2");
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
-    U+2C60-2C7F, U+A720-A7FF;
+  unicode-range:
+    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
 }
 
 /* latin */
@@ -36,8 +37,9 @@
   font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2) format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
-    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 /* cyrillic-ext */
@@ -67,8 +69,9 @@
   font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-latin_ext.woff2) format("woff2");
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
-    U+2C60-2C7F, U+A720-A7FF;
+  unicode-range:
+    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
 }
 
 /* latin */
@@ -78,8 +81,9 @@
   font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2) format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
-    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 /* Legacy support */
@@ -91,8 +95,9 @@
   font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin_ext.woff2) format("woff2");
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
-    U+2C60-2C7F, U+A720-A7FF;
+  unicode-range:
+    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
 }
 
 /* latin */
@@ -102,8 +107,9 @@
   font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2) format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
-    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 /* latin-ext */
@@ -113,8 +119,9 @@
   font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-latin_ext.woff2) format("woff2");
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
-    U+2C60-2C7F, U+A720-A7FF;
+  unicode-range:
+    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
 }
 
 /* latin */
@@ -124,6 +131,7 @@
   font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2) format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
-    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

package/src/baseline/print.css

@@ -45,7 +45,7 @@
   pre,
   blockquote {
     border: 1px solid #999;
-    page-break-inside: avoid;
+    break-inside: avoid;
   }
 
   /*
@@ -58,7 +58,7 @@
 
   tr,
   img {
-    page-break-inside: avoid;
+    break-inside: avoid;
   }
 
   p,
@@ -70,6 +70,6 @@
 
   h2,
   h3 {
-    page-break-after: avoid;
+    break-after: avoid;
   }
 }

package/src/dialog.css

@@ -227,8 +227,8 @@
   background:
     linear-gradient(var(--ax-bg-raised) 30%, transparent) top,
     linear-gradient(transparent, var(--ax-bg-raised) 60%) bottom,
-    radial-gradient(farthest-side at 50% 0, rgba(0 0 0 / 0.3), transparent) top,
-    radial-gradient(farthest-side at 50% 100%, rgba(0 0 0 / 0.3), transparent) bottom;
+    radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / 0.3), transparent) top,
+    radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / 0.3), transparent) bottom;
   background-size:
     100% 40px,
     100% 50px,

package/src/form/file-upload.css

@@ -173,10 +173,6 @@ li.aksel-file-item {
   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 {

package/src/form/select.css

@@ -25,11 +25,9 @@
   }
 
   @media (forced-colors: active) {
-    & {
-      background-color: ButtonFace;
-      border-color: ButtonText;
-      color: ButtonText;
-    }
+    background-color: ButtonFace;
+    border-color: ButtonText;
+    color: ButtonText;
   }
 }
 
@@ -50,9 +48,7 @@
   color: var(--ax-text-neutral);
 
   @media (forced-colors: active) {
-    & {
-      color: ButtonText;
-    }
+    color: ButtonText;
   }
 }
 

package/src/guide-panel.css

@@ -82,9 +82,7 @@
   }
 
   @media (min-width: 480px) {
-    & {
-      padding: var(--ax-space-16) var(--ax-space-20);
-    }
+    padding: var(--ax-space-16) var(--ax-space-20);
 
     .aksel-guide-panel[data-responsive="true"] & {
       min-height: var(--__axc-guide-panel-guide-size);

package/src/link-anchor.css

@@ -25,6 +25,10 @@
   text-decoration-thickness: 0.05em;
   color: inherit;
 
+  &[data-color] {
+    color: var(--ax-text-subtle);
+  }
+
   &:hover,
   .aksel-link-anchor__overlay:hover & {
     text-decoration-thickness: 0.111em;

package/src/modal.css

@@ -96,12 +96,12 @@
    * Cannot use --ax-bg-overlay because ::backdrop does not inherit from anything but itself.
    * TODO: Consider adding `::backdrop` to global token definitions.
    */
-  background: rgba(12 22 39 / 0.659);
+  background: rgb(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: rgba(12 22 39 / 0.659);
+  background: rgb(12 22 39 / 0.659);
 
   /* From polyfill: */
   position: fixed;
@@ -142,8 +142,8 @@
   background:
     linear-gradient(var(--__axc-modal-bg) 30%, transparent) top,
     linear-gradient(transparent, var(--__axc-modal-bg) 60%) bottom,
-    radial-gradient(farthest-side at 50% 0, rgba(0 0 0 / 0.3), transparent) top,
-    radial-gradient(farthest-side at 50% 100%, rgba(0 0 0 / 0.3), transparent) bottom;
+    radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / 0.3), transparent) top,
+    radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / 0.3), transparent) bottom;
   background-size:
     100% 40px,
     100% 50px,

package/src/table.css

@@ -250,11 +250,7 @@
 .aksel-table__toggle-expand-cell:hover > .aksel-table__toggle-expand-button,
 .aksel-table__expandable-row--clickable:hover .aksel-table__toggle-expand-button {
   background-color: var(--ax-bg-neutral-moderate-hoverA);
-}
 
-& .aksel-table__toggle-expand-button:hover,
-& .aksel-table__toggle-expand-cell:hover > .aksel-table__toggle-expand-button,
-& .aksel-table__expandable-row--clickable:hover .aksel-table__toggle-expand-button {
   .aksel-table__row--selected & {
     background-color: var(--ax-bg-moderate-hoverA);
   }

package/src/tooltip.css

@@ -28,9 +28,7 @@
   transform: rotate(45deg);
 
   @media (forced-colors: active) {
-    & {
-      display: none;
-    }
+    display: none;
   }
 }
 
@@ -119,8 +117,6 @@
   background: var(--ax-bg-neutral-moderate);
 
   @media (forced-colors: active) {
-    & {
-      outline: 1px solid;
-    }
+    outline: 1px solid;
   }
 }

package/src/typography.css

@@ -246,7 +246,6 @@
 
 .aksel-typo--visually-hidden {
   border: 0 !important;
-  clip: rect(0, 0, 0, 0) !important;
   clip-path: inset(50%) !important;
   height: 1px !important;
   margin: -1px !important;