[Darkside] Quality assurance P1 (#3510)

* 💄 Adjustments 1 * 💄 Bumped default strong scale * 💄 Bumped secondary neutral border * 💄 Reduced text-color change on hover * 🐛 Resolved border and focus logic for combobox * 🐛 Fix icon sizing for buttons * 💄 Use tertiary-buttons for datepicker caption * Update @navikt/core/react/src/chips/Toggle.tsx * 💄 QA updates combobox darkside (#3511)
navikt · Jan 22, 2025 · 7aa85be · 7aa85be
1 parent d29509d
commit 7aa85be
Show file tree

Hide file tree

Showing 14 changed files with 51 additions and 65 deletions.
diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css
@@ -100,7 +100,7 @@
   height: 22px;
   align-self: center;
   background-color: var(--ax-bg-accent-moderateA);
-  color: var(--ax-text-accent-strong);
+  color: var(--ax-text-accent);
 }
 
 .navds-accordion__header-chevron {

diff --git a/@navikt/core/css/darkside/action-menu.darkside.css b/@navikt/core/css/darkside/action-menu.darkside.css
@@ -107,7 +107,7 @@
 
   &:focus {
     background-color: var(--ax-bg-danger-moderate-hoverA);
-    color: var(--ax-text-danger-strong);
+    color: var(--ax-text-danger);
   }
 }
 

diff --git a/@navikt/core/css/darkside/button.darkside.css b/@navikt/core/css/darkside/button.darkside.css
@@ -17,26 +17,28 @@
   box-shadow: inset 0 0 0 var(--__axc-button-border-width) var(--__axc-button-border-color);
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 }
 
 .navds-button--small,
 .navds-button--xsmall {
   --__axc-button-icon-margin: -2px;
-  --__axc-button-icon-size: 1.25rem;
 }
 
 .navds-button--small {
   padding: var(--ax-space-4) var(--ax-space-12);
   min-height: 2rem;
   min-width: 2rem;
+  gap: var(--ax-space-6);
 }
 
 .navds-button--xsmall {
   padding: var(--ax-space-2) var(--ax-space-8);
   gap: var(--ax-space-4);
+
+  --__axc-button-icon-size: 1.25rem;
 }
 
 .navds-button--icon-only {
@@ -159,7 +161,7 @@
 * .navds-button--secondary-neutral *
  **************************/
 .navds-button--secondary-neutral {
-  --__axc-button-border-color: var(--ax-border-default);
+  --__axc-button-border-color: var(--ax-border-strong);
 
   background-color: transparent;
   color: var(--ax-text-default);
@@ -178,7 +180,7 @@
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    --__axc-button-border-color: var(--ax-border-default);
+    --__axc-button-border-color: var(--ax-border-strong);
 
     color: var(--ax-text-default);
     background-color: transparent;

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-moderate);
+    background-color: var(--ax-bg-moderateA);
   }
 }
 

diff --git a/@navikt/core/css/darkside/chips.darkside.css b/@navikt/core/css/darkside/chips.darkside.css
@@ -72,7 +72,7 @@
 .navds-chips__toggle--action {
   box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
   background-color: var(--ax-bg-accent-moderate);
-  color: var(--ax-text-default);
+  color: var(--ax-text-accent-strong);
 
   &:hover {
     background-color: var(--ax-bg-accent-moderate-hover);

diff --git a/@navikt/core/css/darkside/copybutton.darkside.css b/@navikt/core/css/darkside/copybutton.darkside.css
@@ -67,12 +67,8 @@
     --__axc-copybutton-padding: var(--ax-space-4);
   }
 
-  & .navds-copybutton__icon {
-    font-size: 1.25rem;
-  }
-
   & > .navds-copybutton__content {
-    gap: var(--ax-space-6);
+    gap: var(--ax-space-4);
   }
 }
 
@@ -96,26 +92,14 @@
   }
 
   & > .navds-copybutton__content {
-    gap: var(--ax-space-4);
+    gap: var(--ax-space-2);
   }
 }
 
 /* ----------------------------- CopyButton Icon ---------------------------- */
 .navds-copybutton__icon {
   font-size: 1.5rem;
   display: flex;
-
-  &:first-of-type {
-    margin-left: -0.25rem;
-  }
-
-  &:last-of-type {
-    margin-right: -0.25rem;
-  }
-
-  &:only-child {
-    margin: 0;
-  }
 }
 
 .navds-copybutton--active .navds-copybutton__icon {
@@ -146,14 +130,6 @@
 
   &.navds-copybutton--active {
     color: var(--ax-text-success);
-
-    &:hover {
-      color: var(--ax-text-success-strong);
-    }
-  }
-
-  &:hover {
-    color: var(--ax-text-accent-strong);
   }
 
   &:disabled {
@@ -165,11 +141,6 @@
 .navds-copybutton--neutral {
   color: var(--ax-text-subtle);
 
-  &:hover,
-  &.navds-copybutton--active {
-    color: var(--ax-text-default);
-  }
-
   &:disabled {
     color: var(--ax-text-subtle);
   }
@@ -179,5 +150,5 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--ax-space-8);
+  gap: var(--ax-space-6);
 }
diff --git a/@navikt/core/css/darkside/form/combobox.darkside.css b/@navikt/core/css/darkside/form/combobox.darkside.css
@@ -15,7 +15,7 @@
 
 .navds-form-field:not(:is(.navds-combobox--disabled, .navds-combobox--readonly)) {
   & .navds-combobox__wrapper:hover {
-    border-color: var(--ax-border-focus);
+    border-color: var(--ax-border-accent-strong);
   }
 }
 
@@ -31,6 +31,10 @@
   opacity: var(--ax-opacity-disabled);
 
   & .navds-combobox__wrapper {
+    &:hover {
+      border-color: var(--ax-border-default);
+    }
+
     & *:hover {
       cursor: not-allowed;
     }
@@ -80,9 +84,9 @@
   border-radius: var(--ax-border-radius-medium);
 
   &:has(.navds-combobox__input:focus-visible) {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
-    border-color: var(--ax-border-focus);
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    border-color: var(--ax-border-accent-strong);
   }
 
   &:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
@@ -113,6 +117,10 @@
   &:hover {
     cursor: text;
   }
+
+  .navds-combobox--disabled &:hover {
+    border-color: var(--ax-border-default);
+  }
 }
 
 .navds-combobox--error {
@@ -230,7 +238,7 @@
 /* dropdown & non selectable dropdown items */
 
 .navds-combobox__list {
-  max-height: 290px;
+  max-height: 316px;
   overflow: clip;
   position: absolute;
   left: 0;
@@ -268,7 +276,7 @@
   border-radius: var(--ax-border-radius-medium);
   border: 0;
   margin-inline: var(--ax-space-8);
-  margin-block: var(--ax-space-4);
+  margin-block: var(--ax-space-2);
   scroll-margin-block: 8px; /* outline + outline-offset + margin-block */
 }
 
@@ -307,7 +315,6 @@
 .navds-combobox__list-item--focus {
   cursor: pointer;
   outline: 2px solid var(--ax-border-focus);
-  outline-offset: 2px;
 }
 
 .navds-combobox__list-item {
@@ -321,10 +328,11 @@
   & mark {
     background-color: transparent;
     font-weight: var(--ax-font-weight-bold);
+    color: var(--ax-text-default);
   }
 
   & svg {
-    color: var(--ax-text-accent);
+    color: var(--ax-text-default);
   }
 }
 
@@ -344,14 +352,14 @@
   justify-content: flex-start;
   gap: 0.25rem;
   margin: 0;
-  margin-block: calc(var(--ax-space-4) * -1);
-  padding-block: var(--ax-space-16);
+  margin-block-start: calc(var(--ax-space-4) * -1);
 
   & svg {
     color: var(--ax-text-default);
   }
 
   &:only-child {
+    margin-block: calc(var(--ax-space-4) * -1);
     border: none;
   }
 }

diff --git a/@navikt/core/css/darkside/form/radio-checkbox.darkside.css b/@navikt/core/css/darkside/form/radio-checkbox.darkside.css
@@ -141,7 +141,7 @@
 
 .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
 .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
-  color: var(--ax-text-accent-strong);
+  color: var(--ax-text-accent);
 }
 
 .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,

diff --git a/@navikt/core/css/darkside/form/switch.darkside.css b/@navikt/core/css/darkside/form/switch.darkside.css
@@ -55,7 +55,7 @@
 
 .navds-switch__input:hover ~ .navds-switch__label-wrapper,
 .navds-switch__label-wrapper:hover {
-  color: var(--ax-text-accent-strong);
+  color: var(--ax-text-accent);
 }
 
 .navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
@@ -124,7 +124,7 @@
   .navds-switch__input:checked ~ .navds-switch__track > & {
     background-color: var(--ax-bg-raised);
     transform: translateX(1.25rem);
-    color: var(--ax-text-accent-strong);
+    color: var(--ax-text-accent);
     width: 1.25rem;
     height: 1.25rem;
     left: 0;

diff --git a/@navikt/core/css/darkside/read-more.darkside.css b/@navikt/core/css/darkside/read-more.darkside.css
@@ -20,8 +20,8 @@
   text-align: start;
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 
   &[data-state="open"] .navds-read-more__expand-icon {

diff --git a/@navikt/core/react/src/chips/Toggle.tsx b/@navikt/core/react/src/chips/Toggle.tsx
@@ -74,7 +74,12 @@ export const ToggleChips: OverridableComponent<
                 fillRule="evenodd"
                 clipRule="evenodd"
                 d="M10 3.125C6.20304 3.125 3.125 6.20304 3.125 10C3.125 13.797 6.20304 16.875 10 16.875C13.797 16.875 16.875 13.797 16.875 10C16.875 6.20304 13.797 3.125 10 3.125ZM1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10Z"
-                fill="var(--ax-text-neutral-icon, var(--ac-chip-toggle-circle-border, var(--a-border-default)))"
+                /* After removing old fallbacks, change to currentColor */
+                fill={`var(${
+                  variant === "action"
+                    ? "--ax-text-accent-strong"
+                    : "--ax-text-default"
+                }, var(--ac-chip-toggle-circle-border, var(--a-border-default)))`}
               />
             )}
           </svg>

diff --git a/@navikt/core/react/src/date/datepicker/parts/Caption.tsx b/@navikt/core/react/src/date/datepicker/parts/Caption.tsx
@@ -21,7 +21,7 @@ export const DatePickerCaption = ({ displayMonth, id }: CaptionProps) => {
     <>
       <div className="navds-date__caption">
         <Button
-          variant="tertiary"
+          variant="tertiary-neutral"
           disabled={!previousMonth}
           onClick={() => previousMonth && goToMonth(previousMonth)}
           icon={<ArrowLeftIcon title={translate("goToPreviousMonth")} />}
@@ -41,7 +41,7 @@ export const DatePickerCaption = ({ displayMonth, id }: CaptionProps) => {
           icon={<ArrowRightIcon title={translate("goToNextMonth")} />}
           onClick={() => nextMonth && goToMonth(nextMonth)}
           disabled={!nextMonth}
-          variant="tertiary"
+          variant="tertiary-neutral"
           className="navds-date__caption-button"
           type="button"
         />

diff --git a/@navikt/core/react/src/date/datepicker/parts/DropdownCaption.tsx b/@navikt/core/react/src/date/datepicker/parts/DropdownCaption.tsx
@@ -56,7 +56,7 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
           {formatCaption(displayMonth, { locale })}
         </span>
         <Button
-          variant="tertiary"
+          variant="tertiary-neutral"
           disabled={!previousMonth}
           onClick={() => previousMonth && goToMonth(previousMonth)}
           icon={<ArrowLeftIcon title={translate("goToPreviousMonth")} />}
@@ -94,10 +94,10 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
         </div>
 
         <Button
+          variant="tertiary-neutral"
           icon={<ArrowRightIcon title={translate("goToNextMonth")} />}
           onClick={() => nextMonth && goToMonth(nextMonth)}
           disabled={!nextMonth}
-          variant="tertiary"
           className="navds-date__caption-button"
           type="button"
         />

diff --git a/@navikt/core/tokens/darkside/tokens/semantic.ts b/@navikt/core/tokens/darkside/tokens/semantic.ts
@@ -119,17 +119,17 @@ export function semanticTokenConfig(theme: ColorTheme) {
         group: `background`,
       },
       strong: {
-        value: `{ax.neutral.600.value}`,
+        value: `{ax.neutral.700.value}`,
         type: "color",
         group: `background`,
       },
       "strong-hover": {
-        value: `{ax.neutral.700.value}`,
+        value: `{ax.neutral.800.value}`,
         type: "color",
         group: `background`,
       },
       "strong-pressed": {
-        value: `{ax.neutral.800.value}`,
+        value: `{ax.neutral.900.value}`,
         type: "color",
         group: `background`,
       },
@@ -160,7 +160,7 @@ export function semanticTokenConfig(theme: ColorTheme) {
        * - Discuss with brand
        */
       focus: {
-        value: "{ax.accent.700.value}",
+        value: "{ax.neutral.1000.value}",
         type: "color",
         group: "border",
         /**