@navikt/ds-css 7.8.0 → 7.9.0

package/form/form.css

@@ -17,19 +17,6 @@
   color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
 }
 
-.navds-form-field .navds-error-message,
-.navds-fieldset .navds-error-message,
-.navds-file-item .navds-error-message {
-  display: flex;
-  gap: var(--a-spacing-2);
-}
-
-.navds-form-field .navds-error-message::before,
-.navds-fieldset .navds-error-message::before,
-.navds-file-item .navds-error-message::before {
-  content: "•";
-}
-
 .navds-form-field--disabled {
   opacity: 0.3;
   cursor: not-allowed;

package/form/select.css

@@ -73,11 +73,15 @@
 /**
   Error handling
 */
-.navds-select--error > * select:not(:hover, :focus, :disabled) {
+.navds-select--error > * .navds-select__input:not(:hover, :disabled) {
   box-shadow: 0 0 0 1px var(--ac-select-error-border, var(--a-surface-danger));
   border-color: var(--ac-select-error-border, var(--a-surface-danger));
 }
 
+.navds-select--error .navds-select__input:focus {
+  box-shadow: var(--a-shadow-focus);
+}
+
 /**
   Disabled
 */

package/form/switch.css

@@ -72,12 +72,15 @@
 .navds-switch__track {
   width: 2.75rem;
   height: 1.5rem;
-  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
+  background-color: var(--ac-switch-bg, var(--a-surface-default));
+  border: 2px solid var(--a-border-default);
   position: absolute;
   top: var(--a-spacing-3);
   left: 0;
   border-radius: var(--a-border-radius-full);
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: background-color, border-color;
+  transition-duration: 100ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .navds-switch--small > .navds-switch__track {
@@ -92,18 +95,20 @@
 
 .navds-switch__input:checked ~ .navds-switch__track {
   background-color: var(--ac-switch-checked-bg, var(--a-surface-action-selected));
+  border-color: var(--ac-switch-checked-bg, var(--a-surface-action-selected));
 }
 
 .navds-switch__input:hover ~ .navds-switch__track {
-  background-color: var(--ac-switch-hover-bg, var(--a-surface-neutral-hover));
+  background-color: var(--ac-switch-hover-bg, var(--a-surface-subtle));
 }
 
-.navds-switch__input:hover:checked ~ .navds-switch__track {
+.navds-switch__input:hover:checked:not(:disabled) ~ .navds-switch__track {
   background-color: var(--ac-switch-checked-hover-bg, var(--a-surface-action-selected-hover));
+  border-color: var(--ac-switch-checked-hover-bg, var(--a-surface-action-selected-hover));
 }
 
 .navds-switch__input:disabled ~ .navds-switch__track {
-  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
+  background-color: var(--ac-switch-bg, var(--a-surface-default));
 }
 
 .navds-switch__input:checked:disabled ~ .navds-switch__track {
@@ -129,15 +134,15 @@
 
 /* Thumb */
 .navds-switch__thumb {
-  background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
+  background-color: var(--ac-switch-thumb-bg, var(--a-surface-neutral));
   color: var(--ac-switch-thumb-icon, var(--a-icon-subtle));
   border-radius: var(--a-border-radius-full);
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
   position: absolute;
   transform: translateX(0);
-  left: var(--a-spacing-05);
-  top: var(--a-spacing-05);
+  left: 0.0625rem;
+  top: 0.0625rem;
   transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
@@ -147,6 +152,11 @@
 .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
   transform: translateX(1.25rem);
   color: var(--ac-switch-thumb-icon-checked, var(--a-icon-action-selected));
+  background-color: var(--a-surface-default);
+  width: 1.25rem;
+  height: 1.25rem;
+  left: 0;
+  top: 0;
 }
 
 .navds-switch__input:checked ~ .navds-switch__track .navds-switch__checkmark {
@@ -195,6 +205,7 @@
 .navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track,
 .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track {
   background-color: var(--a-surface-neutral-moderate);
+  border-color: var(--a-border-subtle);
 }
 
 .navds-switch--readonly > .navds-switch__label-wrapper,
@@ -212,12 +223,12 @@
 }
 
 .navds-switch--readonly .navds-switch__thumb {
-  background-color: var(--a-surface-subtle);
-  box-shadow: 0 0 0 2px var(--a-border-default);
+  background-color: var(--a-surface-neutral);
 }
 
 .navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-  color: var(--a-icon-subtle);
+  color: var(--a-icon-on-neutral);
+  background-color: var(--a-surface-neutral);
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -237,7 +248,9 @@
   }
 
   .navds-switch__thumb,
-  .navds-switch--readonly .navds-switch__thumb {
+  .navds-switch--readonly .navds-switch__thumb,
+  .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb,
+  .navds-switch--readonly .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
     background-color: fieldtext;
   }
 
@@ -246,11 +259,8 @@
     color: field;
   }
 
-  .navds-switch__track {
-    width: calc(2.75rem + 4px);
-    height: calc(1.5rem + 4px);
-    top: var(--a-spacing-3);
-    border: 2px solid fieldtext;
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+    background-color: graytext;
   }
 
   .navds-switch__input:focus-visible ~ .navds-switch__track {
@@ -264,6 +274,7 @@
 
   .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__thumb {
     background-color: graytext;
+    border-color: graytext;
   }
 
   .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__track {

package/form/textarea.css

@@ -111,16 +111,13 @@
 /**
   Error handling
 */
-.navds-textarea--error .navds-textarea__input:not(:hover, :focus-visible, :disabled) {
+.navds-textarea--error .navds-textarea__input:not(:hover, :disabled) {
   box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
   border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
 }
 
-@supports not selector(:focus-visible) {
-  .navds-textarea--error .navds-textarea__input:not(:hover, :focus, :disabled) {
-    box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
-    border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
-  }
+.navds-textarea--error .navds-textarea__input:focus-visible {
+  box-shadow: var(--a-shadow-focus);
 }
 
 .navds-textarea__input:disabled {

package/link.css

@@ -30,7 +30,7 @@
   text-decoration: underline;
 }
 
-.navds-alert .navds-link,
+.navds-alert:not(.navds-alert--inline) .navds-link,
 .navds-confirmation-panel .navds-link {
   color: var(--a-text-default);
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@navikt/ds-css",
-  "version": "7.8.0",
-  "description": "CSS for NAV Designsystem",
-  "author": "Aksel | NAV designsystem team",
+  "version": "7.9.0",
+  "description": "CSS for Nav Designsystem",
+  "author": "Aksel | Nav designsystem team",
   "keywords": [
     "css"
   ],
@@ -20,29 +20,43 @@
     "type": "git",
     "url": "git+https://github.com/navikt/aksel.git"
   },
-  "main": "./dist/index.css",
   "scripts": {
-    "build": "node config/bundle.js",
+    "build": "node config/bundle.js && yarn build:darkside",
     "watch": "nodemon --ignore dist -e css --watch . --exec \"yarn build\"",
-    "css:get-version": "node config/get-version.js"
+    "css:get-version": "node config/get-version.js",
+    "build:darkside": "tsx ./config/bundle.darkside.ts",
+    "test": "yarn build && vitest run"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^7.8.0",
+    "@navikt/ds-tokens": "^7.9.0",
+    "@types/clean-css": "4.2.11",
     "autoprefixer": "^10.4.20",
+    "browserslist": "^4.24.2",
+    "clean-css": "5.3.3",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
+    "lightningcss": "^1.28.0",
     "lodash": "^4.17.21",
     "nodemon": "^3.0.1",
     "normalize.css": "^8.0.1",
     "postcss": "^8.4.31",
     "postcss-cli": "^9.0.0",
     "postcss-combine-duplicated-selectors": "10.0.3",
-    "postcss-import": "^14.1.0"
+    "postcss-import": "^14.1.0",
+    "tsx": "^4.7.1",
+    "vitest": "^1.2.2"
   },
   "browserslist": [
     ">0.2%",
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "main": "./dist/index.css",
+  "exports": {
+    ".": "./dist/index.css",
+    "./dist/*": "./dist/*",
+    "./darkside": "./dist/darkside/index.min.css",
+    "./tokens.json": "./tokens.json"
+  }
 }

package/table.css

@@ -206,7 +206,7 @@
   transition: transform 150ms ease-in-out;
 }
 
-.navds-table__toggle-expand-cell:hover {
+.navds-table__expandable-row:not(.navds-table__expandable-row--expansion-disabled) .navds-table__toggle-expand-cell:hover {
   cursor: pointer;
 }
 

package/tag.css

@@ -127,37 +127,43 @@
   color: var(--ac-tag-neutral-moderate-text, var(--a-text-default));
 }
 
-.navds-tag--alt1 {
+.navds-tag--alt1,
+.navds-tag--outline.navds-tag--meta-purple {
   border-color: var(--ac-tag-alt-1-border, var(--a-border-alt-1));
   background-color: var(--ac-tag-alt-1-bg, var(--a-surface-alt-1-subtle));
   color: var(--ac-tag-alt-1-text, var(--a-text-default));
 }
 
-.navds-tag--alt1-filled {
+.navds-tag--alt1-filled,
+.navds-tag--strong.navds-tag--meta-purple {
   border-color: transparent;
   background-color: var(--ac-tag-alt-1-filled-bg, var(--a-surface-alt-1));
   color: var(--ac-tag-alt-1-filled-text, var(--a-text-on-alt-1));
 }
 
-.navds-tag--alt1-moderate {
+.navds-tag--alt1-moderate,
+.navds-tag--moderate.navds-tag--meta-purple {
   border-color: transparent;
   background-color: var(--ac-tag-alt-1-moderate-bg, var(--a-surface-alt-1-moderate));
   color: var(--ac-tag-alt-1-moderate-text, var(--a-text-default));
 }
 
-.navds-tag--alt2 {
+.navds-tag--alt2,
+.navds-tag--outline.navds-tag--meta-lime {
   border-color: var(--ac-tag-alt-2-border, var(--a-border-alt-2));
   background-color: var(--ac-tag-alt-2-bg, var(--a-surface-alt-2-subtle));
   color: var(--ac-tag-alt-2-text, var(--a-text-default));
 }
 
-.navds-tag--alt2-filled {
+.navds-tag--alt2-filled,
+.navds-tag--strong.navds-tag--meta-lime {
   border-color: transparent;
   background-color: var(--ac-tag-alt-2-filled-bg, var(--a-surface-alt-2));
   color: var(--ac-tag-alt-2-filled-text, var(--a-text-on-alt-2));
 }
 
-.navds-tag--alt2-moderate {
+.navds-tag--alt2-moderate,
+.navds-tag--moderate.navds-tag--meta-lime {
   border-color: transparent;
   background-color: var(--ac-tag-alt-2-moderate-bg, var(--a-surface-alt-2-moderate));
   color: var(--ac-tag-alt-2-moderate-text, var(--a-text-default));

package/tokens.json

@@ -411,11 +411,11 @@
   },
   "switch": {
     "--ac-switch-action": "--a-surface-action-selected",
-    "--ac-switch-bg": "--a-surface-neutral",
+    "--ac-switch-bg": "--a-surface-default",
     "--ac-switch-checked-bg": "--a-surface-action-selected",
-    "--ac-switch-hover-bg": "--a-surface-neutral-hover",
+    "--ac-switch-hover-bg": "--a-surface-subtle",
     "--ac-switch-checked-hover-bg": "--a-surface-action-selected-hover",
-    "--ac-switch-thumb-bg": "--a-surface-default",
+    "--ac-switch-thumb-bg": "--a-surface-neutral",
     "--ac-switch-thumb-icon": "--a-icon-subtle",
     "--ac-switch-thumb-icon-checked": "--a-icon-action-selected"
   },

package/typography.css

@@ -216,6 +216,18 @@
   color: var(--ac-typo-error-text, var(--__ac-typo-error-text, var(--a-text-danger)));
 }
 
+.navds-error-message.navds-error-message--show-icon {
+  display: flex;
+  gap: var(--a-spacing-1);
+}
+
+.navds-error-message.navds-error-message--show-icon svg {
+  margin-top: 0.15em;
+  flex: 0 0 auto;
+  width: 1em;
+  height: 1em;
+}
+
 .navds-typo--truncate {
   overflow: hidden;
   white-space: nowrap;

package/darkside/index copy.css

@@ -1,37 +0,0 @@
-@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";