@arbeidstilsynet/design-css 0.7.1 → 0.8.2

package/dist/src/header.css

@@ -1,26 +1,24 @@
 .at-header {
-  --at-header-max-width: 82.5rem;
+  --at-header-max-width: 108rem;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   container-type: inline-size;
-  padding: var(--ds-size-2) var(--ds-size-6);
-}
-
-.at-header .ds-search {
-    align-self: self-start;
-  }
+  margin: var(--ds-size-7) 0 0 0;
+  padding: 0 1rem;
+  color: var(--ds-color-neutral-text-default);
 
-/* disable visited color in both the navigation and dropdown menu */
+  /* disable visited color in both the navigation and dropdown menu */
+}
 
 .at-header .ds-link {
     --dsc-link-color--visited: var(--dsc-link-color);
+    color: var(--ds-color-neutral-text-default);
   }
 
 .at-header .ds-link:has(.at-header__logo) {
-    color: var(--ds-color-text-default);
     font-weight: var(--ds-font-weight-medium);
     text-decoration: none;
     line-height: var(--ds-line-height-sm);
@@ -59,7 +57,7 @@
 }
 
 .at-header__center:not(:first-child) {
-  margin-left: var(--ds-size-22);
+  margin-left: var(--ds-size-26);
 }
 
 .at-header__right {
@@ -67,12 +65,9 @@
   margin-left: auto;
 }
 
-.at-header__logo .ds-link:not(:hover):not(:focus-visible),
-.at-header__link:not(:hover):not(:focus-visible),
-.at-header__dropdown-controls .ds-link:not(:hover):not(:focus-visible),
-.at-header__dropdown-trigger {
+.at-header .ds-link:not(:hover):not(:focus-visible),
+.at-header__link:not(:hover):not(:focus-visible) {
   text-decoration-line: none;
-  color: var(--ds-color-neutral-text-default);
 }
 
 .at-header__logo {
@@ -81,6 +76,7 @@
 
 .at-header__dropdown-trigger {
   font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-color-neutral-text-default);
 }
 
 .at-header__link {
@@ -91,6 +87,15 @@
     font-weight: var(--ds-font-weight-semibold);
   }
 
+.at-header .ds-dropdown.at-header__dropdown-content {
+  padding: var(--ds-size-3) var(--ds-size-2);
+}
+
+:is(.at-header .ds-dropdown.at-header__dropdown-content) .ds-field:has(input[role="switch"]) {
+    color: var(--ds-color-neutral-text-default);
+    padding: var(--ds-size-2) var(--ds-size-4);
+  }
+
 .at-header__dropdown-item-mobile {
   display: none;
 }
@@ -114,12 +119,12 @@
   padding: var(--ds-size-2) var(--ds-size-4);
   text-decoration: none;
   width: 100%;
-  color: var(--ds-color-text-default);
+  color: var(--ds-color-neutral-text-default);
   background: unset;
 }
 
 .at-header__menu-row:hover {
-    color: var(--ds-color-text-default);
+    color: var(--ds-color-neutral-text-default);
     background: var(--ds-color-surface-tinted);
   }
 
@@ -188,17 +193,24 @@
 }
 
 @media (max-width: 48rem) {
-    .at-header .ds-search {
-      max-width: 100%;
-    }
-
+  .at-header {
+    height: var(--ds-size-18);
+    margin: 0;
+    padding: var(--ds-size-2) var(--ds-size-4);
+  }
   .at-header__container {
     justify-content: space-between;
   }
 
+  .ds-link:has(.at-header__left) {
+    height: 100%;
+  }
+
   .at-header__left {
+    height: 100%;
     margin-right: 0;
     flex-shrink: 0;
+    align-items: flex-end;
   }
 
   .at-header__center {
@@ -222,6 +234,8 @@
     /* Full-width dropdown overlay for mobile */
     width: 100%;
     max-width: 100%;
+    padding: calc(2 * var(--ds-size-3)) 0;
+
     /* Hide box-shadow to avoid line between dropdown menu and header on mobile */
     box-shadow: none;
     border-top: 0;
@@ -237,7 +251,7 @@
   }
 
   .at-header__link {
-    color: var(--ds-color-text-default);
+    color: var(--ds-color-neutral-text-default);
     font-weight: var(--ds-font-weight-regular);
     width: 100%;
     height: var(--ds-size-10);

package/dist/src/index.css

@@ -201,27 +201,25 @@
 @layer at.components{
 
 .at-header {
-  --at-header-max-width: 82.5rem;
+  --at-header-max-width: 108rem;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   container-type: inline-size;
-  padding: var(--ds-size-2) var(--ds-size-6);
-}
-
-  .at-header .ds-search {
-    align-self: self-start;
-  }
+  margin: var(--ds-size-7) 0 0 0;
+  padding: 0 1rem;
+  color: var(--ds-color-neutral-text-default);
 
   /* disable visited color in both the navigation and dropdown menu */
+}
   .at-header .ds-link {
     --dsc-link-color--visited: var(--dsc-link-color);
+    color: var(--ds-color-neutral-text-default);
   }
 
   .at-header .ds-link:has(.at-header__logo) {
-    color: var(--ds-color-text-default);
     font-weight: var(--ds-font-weight-medium);
     text-decoration: none;
     line-height: var(--ds-line-height-sm);
@@ -260,7 +258,7 @@
 }
 
 .at-header__center:not(:first-child) {
-  margin-left: var(--ds-size-22);
+  margin-left: var(--ds-size-26);
 }
 
 .at-header__right {
@@ -268,12 +266,9 @@
   margin-left: auto;
 }
 
-.at-header__logo .ds-link:not(:hover):not(:focus-visible),
-.at-header__link:not(:hover):not(:focus-visible),
-.at-header__dropdown-controls .ds-link:not(:hover):not(:focus-visible),
-.at-header__dropdown-trigger {
+.at-header .ds-link:not(:hover):not(:focus-visible),
+.at-header__link:not(:hover):not(:focus-visible) {
   text-decoration-line: none;
-  color: var(--ds-color-neutral-text-default);
 }
 
 .at-header__logo {
@@ -282,6 +277,7 @@
 
 .at-header__dropdown-trigger {
   font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-color-neutral-text-default);
 }
 
 .at-header__link {
@@ -292,6 +288,15 @@
     font-weight: var(--ds-font-weight-semibold);
   }
 
+.at-header .ds-dropdown.at-header__dropdown-content {
+  padding: var(--ds-size-3) var(--ds-size-2);
+}
+
+  :is(.at-header .ds-dropdown.at-header__dropdown-content) .ds-field:has(input[role="switch"]) {
+    color: var(--ds-color-neutral-text-default);
+    padding: var(--ds-size-2) var(--ds-size-4);
+  }
+
 .at-header__dropdown-item-mobile {
   display: none;
 }
@@ -315,12 +320,12 @@
   padding: var(--ds-size-2) var(--ds-size-4);
   text-decoration: none;
   width: 100%;
-  color: var(--ds-color-text-default);
+  color: var(--ds-color-neutral-text-default);
   background: unset;
 }
 
   .at-header__menu-row:hover {
-    color: var(--ds-color-text-default);
+    color: var(--ds-color-neutral-text-default);
     background: var(--ds-color-surface-tinted);
   }
 
@@ -385,17 +390,24 @@
 }
 
 @media (max-width: 48rem) {
-    .at-header .ds-search {
-      max-width: 100%;
-    }
-
+  .at-header {
+    height: var(--ds-size-18);
+    margin: 0;
+    padding: var(--ds-size-2) var(--ds-size-4);
+  }
   .at-header__container {
     justify-content: space-between;
   }
 
+  .ds-link:has(.at-header__left) {
+    height: 100%;
+  }
+
   .at-header__left {
+    height: 100%;
     margin-right: 0;
     flex-shrink: 0;
+    align-items: flex-end;
   }
 
   .at-header__center {
@@ -419,6 +431,8 @@
     /* Full-width dropdown overlay for mobile */
     width: 100%;
     max-width: 100%;
+    padding: calc(2 * var(--ds-size-3)) 0;
+
     /* Hide box-shadow to avoid line between dropdown menu and header on mobile */
     box-shadow: none;
     border-top: 0;
@@ -434,7 +448,7 @@
   }
 
   .at-header__link {
-    color: var(--ds-color-text-default);
+    color: var(--ds-color-neutral-text-default);
     font-weight: var(--ds-font-weight-regular);
     width: 100%;
     height: var(--ds-size-10);
@@ -467,41 +481,52 @@
   }
 }}
 @layer at.components{
-
-.at-logo-wrapper > .at-logo {
-  display: flex;
+/* Default behavior - follows system preference */
+.at-lightdarkimage-light {
+  display: revert;
 }
-
-.at-logo-dark {
+.at-lightdarkimage-dark {
   display: none;
 }
 
-[data-color-scheme="light"] .at-logo-light {
-  display: flex;
+@media (prefers-color-scheme: dark) {
+  .at-lightdarkimage-light {
+    display: none;
+  }
+  .at-lightdarkimage-dark {
+    display: revert;
+  }
 }
-[data-color-scheme="light"] .at-logo-dark {
+
+/* Explicit light mode */
+[data-color-scheme="light"] .at-lightdarkimage-light {
+  display: revert;
+}
+[data-color-scheme="light"] .at-lightdarkimage-dark {
   display: none;
 }
 
-[data-color-scheme="dark"] .at-logo-light {
+/* Explicit dark mode */
+[data-color-scheme="dark"] .at-lightdarkimage-light {
   display: none;
 }
-[data-color-scheme="dark"] .at-logo-dark {
-  display: flex;
+[data-color-scheme="dark"] .at-lightdarkimage-dark {
+  display: revert;
 }
 
-[data-color-scheme="auto"] .at-logo-light {
-  display: flex;
+/* Auto mode - follows system preference */
+[data-color-scheme="auto"] .at-lightdarkimage-light {
+  display: revert;
 }
-[data-color-scheme="auto"] .at-logo-dark {
+[data-color-scheme="auto"] .at-lightdarkimage-dark {
   display: none;
 }
 
 @media (prefers-color-scheme: dark) {
-  [data-color-scheme="auto"] .at-logo-light {
+  [data-color-scheme="auto"] .at-lightdarkimage-light {
     display: none;
   }
-  [data-color-scheme="auto"] .at-logo-dark {
-    display: flex;
+  [data-color-scheme="auto"] .at-lightdarkimage-dark {
+    display: revert;
   }
 }}

package/dist/src/lightdarkimage.css

@@ -0,0 +1,44 @@
+/* Default behavior - follows system preference */
+.at-lightdarkimage-light {
+  display: revert;
+}
+.at-lightdarkimage-dark {
+  display: none;
+}
+@media (prefers-color-scheme: dark) {
+  .at-lightdarkimage-light {
+    display: none;
+  }
+  .at-lightdarkimage-dark {
+    display: revert;
+  }
+}
+/* Explicit light mode */
+[data-color-scheme="light"] .at-lightdarkimage-light {
+  display: revert;
+}
+[data-color-scheme="light"] .at-lightdarkimage-dark {
+  display: none;
+}
+/* Explicit dark mode */
+[data-color-scheme="dark"] .at-lightdarkimage-light {
+  display: none;
+}
+[data-color-scheme="dark"] .at-lightdarkimage-dark {
+  display: revert;
+}
+/* Auto mode - follows system preference */
+[data-color-scheme="auto"] .at-lightdarkimage-light {
+  display: revert;
+}
+[data-color-scheme="auto"] .at-lightdarkimage-dark {
+  display: none;
+}
+@media (prefers-color-scheme: dark) {
+  [data-color-scheme="auto"] .at-lightdarkimage-light {
+    display: none;
+  }
+  [data-color-scheme="auto"] .at-lightdarkimage-dark {
+    display: revert;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arbeidstilsynet/design-css",
-  "version": "0.7.1",
+  "version": "0.8.2",
   "description": "CSS for Designsystemet",
   "author": "Arbeidstilsynet",
   "repository": {
@@ -28,7 +28,7 @@
     "@digdir/designsystemet-css": "1.11.1"
   },
   "devDependencies": {
-    "@types/node": "24.10.12",
+    "@types/node": "24.10.13",
     "autoprefixer": "10.4.24",
     "cssnano": "7.1.2",
     "del-cli": "7.0.0",

package/dist/src/lightdarklogo.css

@@ -1,40 +0,0 @@
-.at-logo-wrapper > .at-logo {
-  display: flex;
-}
-
-.at-logo-dark {
-  display: none;
-}
-
-[data-color-scheme="light"] .at-logo-light {
-  display: flex;
-}
-
-[data-color-scheme="light"] .at-logo-dark {
-  display: none;
-}
-
-[data-color-scheme="dark"] .at-logo-light {
-  display: none;
-}
-
-[data-color-scheme="dark"] .at-logo-dark {
-  display: flex;
-}
-
-[data-color-scheme="auto"] .at-logo-light {
-  display: flex;
-}
-
-[data-color-scheme="auto"] .at-logo-dark {
-  display: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  [data-color-scheme="auto"] .at-logo-light {
-    display: none;
-  }
-  [data-color-scheme="auto"] .at-logo-dark {
-    display: flex;
-  }
-}