[Darkside] P 1/3 ♻️ Updated default scale to replace neutral-scale (

#3487) * ✨ Added new space tokens * 🚚 Updated spacing-definitions * ✨ Added new space-tokens to old system * ✨ Added support for new space tokens i primitives * 🔥 Removed space-tokens from tailwindcss * 📝 Removed old comments * [Darkside] Spacing -> Space update for CSS (#3478) * 🚚 Migrated to new space-token * 📝 Add docs for temp spacing * 🐛 Add missing token-prefix to docs * 🐛 Remove old tests * 🐛 Added legacy-spacing support for primitives when using new theme-stystem * ♻️ Move neutral-scale -> default scale * ♻️ New box now supports updated default tokens * ♻️ Default -> Soft token * 📝 Update js-doc * [Darkside] P 2/3 ♻️ Global/Meta-token naming, bumped role-scale (#3499) * 💄 Text and border-tokens for roles bumped up * 📝 Update global and meta-colors to numbers, removed hover color on accordion/button * [Darkside] P 3/3 ♻️ Old neutral-scale now uses default-scale (#3488) * ♻️ Use default-tokens for old neutral-scale * 🐛 Fixed missing token migrations * ♻️ role default -> role-soft
navikt · Jan 31, 2025 · 3c6b8d9 · 3c6b8d9
1 parent c2e7267
commit 3c6b8d9
Show file tree

Hide file tree

Showing 43 changed files with 416 additions and 326 deletions.
diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css
@@ -26,7 +26,6 @@
 
   &:hover {
     background-color: var(--ax-bg-accent-hoverA);
-    color: var(--ax-text-accent-strong);
 
     &::before,
     &::after {

diff --git a/@navikt/core/css/darkside/action-menu.darkside.css b/@navikt/core/css/darkside/action-menu.darkside.css
@@ -94,7 +94,7 @@
   --__axc-action-menu-item-pr: var(--ax-space-2);
 
   &[data-state="open"] {
-    background-color: var(--ax-bg-neutral-moderate-pressed);
+    background-color: var(--ax-bg-moderate-pressed);
   }
 
   &:focus {
@@ -138,7 +138,7 @@
 
 /* --------------------------- ActionMenu shortcut -------------------------- */
 .navds-action-menu__shortcut {
-  background-color: var(--ax-bg-neutral-moderateA);
+  background-color: var(--ax-bg-moderateA);
   color: var(--ax-text-default);
   border-radius: var(--ax-border-radius-small);
   padding: 0 var(--ax-space-4);

diff --git a/@navikt/core/css/darkside/button.darkside.css b/@navikt/core/css/darkside/button.darkside.css
@@ -109,19 +109,19 @@
  * .navds-button--primary-neutral *
  *************************/
 .navds-button--primary-neutral {
-  background-color: var(--ax-bg-neutral-strong);
-  color: var(--ax-text-neutral-contrast);
+  background-color: var(--ax-bg-strong);
+  color: var(--ax-text-contrast);
 
   &:hover {
-    background-color: var(--ax-bg-neutral-strong-hover);
+    background-color: var(--ax-bg-strong-hover);
   }
 
   &:active {
-    background-color: var(--ax-bg-neutral-strong-pressed);
+    background-color: var(--ax-bg-strong-pressed);
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    background-color: var(--ax-bg-neutral-strong);
+    background-color: var(--ax-bg-strong);
   }
 }
 
@@ -138,7 +138,6 @@
     --__axc-button-border-color: var(--ax-border-accent-strong);
 
     background-color: var(--ax-bg-accent-moderate-hoverA);
-    color: var(--ax-text-accent-strong);
   }
 
   &:active {
@@ -168,18 +167,18 @@
   &:hover {
     --__axc-button-border-color: var(--ax-border-strong);
 
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   &:active {
     --__axc-button-border-color: transparent;
 
-    color: var(--ax-text-neutral-contrast);
-    background-color: var(--ax-bg-neutral-strong-pressed);
+    color: var(--ax-text-contrast);
+    background-color: var(--ax-bg-strong-pressed);
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    --__axc-button-border-color: var(--ax-border-neutral);
+    --__axc-button-border-color: var(--ax-border-default);
 
     color: var(--ax-text-default);
     background-color: transparent;
@@ -195,7 +194,6 @@
 
   &:hover {
     background-color: var(--ax-bg-accent-moderate-hoverA);
-    color: var(--ax-text-accent-strong);
   }
 
   &:active {
@@ -217,12 +215,12 @@
   color: var(--ax-text-default);
 
   &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   &:active {
-    background-color: var(--ax-bg-neutral-strong-pressed);
-    color: var(--ax-text-neutral-contrast);
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
   }
 
   &:is(:disabled, .navds-button--disabled) {

diff --git a/@navikt/core/css/darkside/chat.darkside.css b/@navikt/core/css/darkside/chat.darkside.css
@@ -80,7 +80,7 @@
 .navds-chat--neutral {
   & .navds-chat__bubble,
   & .navds-chat__avatar {
-    background-color: var(--ax-bg-neutral-raised);
+    background-color: var(--ax-bg-raised);
   }
 }
 

diff --git a/@navikt/core/css/darkside/chips.darkside.css b/@navikt/core/css/darkside/chips.darkside.css
@@ -35,7 +35,7 @@
 
 .navds-chips--readonly {
   .navds-chips__chip {
-    background-color: var(--ax-bg-neutral-moderateA);
+    background-color: var(--ax-bg-moderateA);
   }
 }
 
@@ -90,21 +90,21 @@
 }
 
 .navds-chips__toggle--neutral {
-  box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
-  background-color: var(--ax-bg-neutral-moderate);
+  box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
+  background-color: var(--ax-bg-moderate);
   color: var(--ax-text-default);
 
   &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hover);
+    background-color: var(--ax-bg-moderate-hover);
   }
 
   &[data-pressed="true"] {
     box-shadow: none;
-    background-color: var(--ax-bg-neutral-strong-pressed);
-    color: var(--ax-text-neutral-contrast);
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
 
     &:hover {
-      background-color: var(--ax-bg-neutral-strong-hover);
+      background-color: var(--ax-bg-strong-hover);
     }
   }
 }
@@ -130,11 +130,11 @@
 }
 
 .navds-chips__removable--neutral {
-  background: var(--ax-bg-neutral-strong-pressed);
-  color: var(--ax-text-neutral-contrast);
+  background: var(--ax-bg-strong-pressed);
+  color: var(--ax-text-contrast);
 
   &:hover {
-    background: var(--ax-bg-neutral-strong-hover);
+    background: var(--ax-bg-strong-hover);
   }
 }
 

diff --git a/@navikt/core/css/darkside/copybutton.darkside.css b/@navikt/core/css/darkside/copybutton.darkside.css
@@ -21,7 +21,7 @@
   }
 
   &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   &:focus-visible {

diff --git a/@navikt/core/css/darkside/date.darkside.css b/@navikt/core/css/darkside/date.darkside.css
@@ -4,7 +4,7 @@
   .rdp-day_range_middle {
     &.rdp-day_disabled {
       color: var(--ax-text-default);
-      background: var(--ax-bg-neutral-moderateA);
+      background: var(--ax-bg-moderateA);
     }
 
     &.rdp-day_selected {
@@ -69,7 +69,7 @@
   .rdp-day_disabled {
     cursor: not-allowed;
     text-decoration: line-through;
-    background-color: var(--ax-bg-neutral-moderateA);
+    background-color: var(--ax-bg-moderateA);
     color: var(--ax-text-subtle);
   }
 
@@ -242,7 +242,7 @@
   color: var(--ax-text-subtle);
 
   .navds-date__weeknumber:active & {
-    color: var(--ax-text-neutral-contrast);
+    color: var(--ax-text-contrast);
   }
 }
 

diff --git a/@navikt/core/css/darkside/expansioncard.darkside.css b/@navikt/core/css/darkside/expansioncard.darkside.css
@@ -45,7 +45,7 @@
   justify-content: space-between;
 
   &:hover {
-    background-color: var(--ax-bg-neutral-raised-hover);
+    background-color: var(--ax-bg-hover);
   }
 
   &[data-open="true"] {
@@ -122,7 +122,7 @@
 }
 
 .navds-expansioncard__header:hover > .navds-expansioncard__header-button {
-  background-color: var(--ax-bg-neutral-moderate-hoverA);
+  background-color: var(--ax-bg-moderate-hoverA);
 }
 
 .navds-expansioncard__header-chevron {

diff --git a/@navikt/core/css/darkside/form/combobox.darkside.css b/@navikt/core/css/darkside/form/combobox.darkside.css
@@ -50,12 +50,12 @@
 
   & .navds-combobox__selected-options {
     & .navds-chips__chip {
-      background-color: var(--ax-bg-neutral-moderateA);
+      background-color: var(--ax-bg-moderateA);
     }
   }
 
   & .navds-combobox__button-toggle-list {
-    color: var(--ax-bg-neutral-moderate);
+    color: var(--ax-bg-moderate);
   }
 
   & .navds-combobox__wrapper {
@@ -65,7 +65,7 @@
 
   & .navds-text-field__input,
   & .navds-combobox__input {
-    background-color: var(--ax-bg-neutral-moderate);
+    background-color: var(--ax-bg-moderate);
   }
 }
 
@@ -282,10 +282,10 @@
 }
 
 .navds-combobox__list-item--max-selected {
-  background-color: var(--ax-bg-neutral-moderateA);
+  background-color: var(--ax-bg-moderateA);
   margin: 0;
   border-radius: 0;
-  border-bottom: 1px solid var(--ax-border-neutral-subtle);
+  border-bottom: 1px solid var(--ax-border-subtle);
   padding-block: var(--ax-space-8);
   line-height: var(--ax-font-line-height-large);
 }

diff --git a/@navikt/core/css/darkside/form/file-upload.darkside.css b/@navikt/core/css/darkside/form/file-upload.darkside.css
@@ -108,7 +108,7 @@
   display: grid;
   padding: var(--__axc-dropzone-icon-padding);
   border-radius: var(--ax-border-radius-full);
-  background-color: var(--ax-bg-neutral-moderateA);
+  background-color: var(--ax-bg-moderateA);
   transition:
     background-color 300ms var(--__axc-dropzone-animation-ease-out),
     font-size 300ms var(--__axc-dropzone-animation-ease-out);
@@ -169,7 +169,7 @@ li.navds-file-item {
 }
 
 .navds-file-item__icon {
-  background-color: var(--ax-bg-neutral-moderateA);
+  background-color: var(--ax-bg-moderateA);
   color: var(--ax-text-default);
   border-radius: var(--ax-border-radius-full);
   min-height: 2.5rem;

diff --git a/@navikt/core/css/darkside/form/form-summary.darkside.css b/@navikt/core/css/darkside/form/form-summary.darkside.css
@@ -1,12 +1,12 @@
 .navds-form-summary {
   overflow: hidden;
-  border: 1px solid var(--ax-border-neutral-subtleA);
+  border: 1px solid var(--ax-border-subtleA);
   border-radius: var(--ax-border-radius-xlarge);
   background: var(--ax-bg-raised);
 }
 
 .navds-form-summary__header {
-  background: var(--ax-bg-neutral-moderateA);
+  background: var(--ax-bg-moderateA);
   padding: var(--ax-space-16) var(--ax-space-24);
   display: flex;
   justify-content: space-between;

diff --git a/@navikt/core/css/darkside/form/radio-checkbox.darkside.css b/@navikt/core/css/darkside/form/radio-checkbox.darkside.css
@@ -23,7 +23,7 @@
   display: flex;
   gap: var(--ax-space-8);
 
-  --__axc-radio-checkbox-readonly-bg: var(--ax-bg-neutral-moderate);
+  --__axc-radio-checkbox-readonly-bg: var(--ax-bg-moderate);
   --__axc-radio-checkbox-readonly-border: var(--ax-border-subtle);
 }
 
@@ -215,11 +215,11 @@
 }
 
 .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
-  background-color: var(--ax-bg-neutral-strong);
+  background-color: var(--ax-bg-strong);
   border-width: 0;
   box-shadow:
     inset 0 0 0 2px var(--ax-border-subtle),
-    inset 0 0 0 8px var(--ax-bg-neutral-moderate);
+    inset 0 0 0 8px var(--ax-bg-moderate);
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {

diff --git a/@navikt/core/css/darkside/form/select.darkside.css b/@navikt/core/css/darkside/form/select.darkside.css
@@ -102,8 +102,8 @@
 /* ----------------------------- Select Readonly ---------------------------- */
 .navds-select--readonly {
   & .navds-select__input {
-    background-color: var(--ax-bg-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
+    background-color: var(--ax-bg-moderate);
+    border-color: var(--ax-border-subtleA);
     cursor: default;
 
     @media (forced-colors: active) {

diff --git a/@navikt/core/css/darkside/form/switch.darkside.css b/@navikt/core/css/darkside/form/switch.darkside.css
@@ -108,7 +108,7 @@
 
 /* ------------------------------ Switch Thumb ------------------------------ */
 .navds-switch__thumb {
-  background-color: var(--ax-bg-neutral-strong);
+  background-color: var(--ax-bg-strong);
   border-radius: var(--ax-border-radius-full);
   width: 1.125rem;
   height: 1.125rem;
@@ -183,8 +183,8 @@
   & > .navds-switch__input:hover ~ .navds-switch__track,
   & > .navds-switch__input:checked ~ .navds-switch__track,
   & > .navds-switch__input:checked:hover ~ .navds-switch__track {
-    background-color: var(--ax-bg-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
+    background-color: var(--ax-bg-moderate);
+    border-color: var(--ax-border-subtleA);
   }
 
   & > .navds-switch__label-wrapper,
@@ -202,12 +202,12 @@
   }
 
   & .navds-switch__thumb {
-    background-color: var(--ax-bg-neutral-strong);
+    background-color: var(--ax-bg-strong);
   }
 
   & > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-    background-color: var(--ax-bg-neutral-strong);
-    color: var(--ax-text-neutral-contrast);
+    background-color: var(--ax-bg-strong);
+    color: var(--ax-text-contrast);
   }
 
   @media (hover: hover) and (pointer: fine) {

diff --git a/@navikt/core/css/darkside/form/text-field.darkside.css b/@navikt/core/css/darkside/form/text-field.darkside.css
@@ -25,7 +25,7 @@
   }
 
   &::placeholder {
-    color: var(--ax-text-neutral);
+    color: var(--ax-text-subtle);
   }
 
   &[size] {
@@ -44,8 +44,8 @@
 }
 
 .navds-text-field--readonly .navds-text-field__input {
-  background-color: var(--ax-bg-neutral-moderate);
-  border-color: var(--ax-border-neutral-subtleA);
+  background-color: var(--ax-bg-moderate);
+  border-color: var(--ax-border-subtleA);
   cursor: default;
 }
 

diff --git a/@navikt/core/css/darkside/form/textarea.darkside.css b/@navikt/core/css/darkside/form/textarea.darkside.css
@@ -36,8 +36,8 @@
   }
 
   .navds-textarea--readonly & {
-    background-color: var(--ax-bg-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
+    background-color: var(--ax-bg-moderate);
+    border-color: var(--ax-border-subtleA);
     cursor: default;
   }
 }