From ed31a9b25c12a62eece667c79d425618f84041c3 Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 20 Jan 2025 11:47:38 +0100 Subject: [PATCH 1/9] :lipstick: Adjustments 1 --- @navikt/core/css/darkside/accordion.darkside.css | 2 +- @navikt/core/css/darkside/action-menu.darkside.css | 2 +- @navikt/core/css/darkside/chat.darkside.css | 2 +- @navikt/core/react/src/chips/Toggle.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css index d5c3d5093a..801ab5a63c 100644 --- 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 index 45aa59f20d..bb44ebde2f 100644 --- 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/chat.darkside.css b/@navikt/core/css/darkside/chat.darkside.css index 583e41b4a4..160cc0b6c6 100644 --- 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/react/src/chips/Toggle.tsx b/@navikt/core/react/src/chips/Toggle.tsx index 02ea59abb7..606f95442f 100644 --- a/@navikt/core/react/src/chips/Toggle.tsx +++ b/@navikt/core/react/src/chips/Toggle.tsx @@ -74,7 +74,7 @@ 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)))" + fill="var(--ax-text-icon, var(--ac-chip-toggle-circle-border, var(--a-border-default)))" /> )} From d95086d925a62e53204f6528d38bd068e4c77865 Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 20 Jan 2025 12:55:06 +0100 Subject: [PATCH 2/9] :lipstick: Bumped default strong scale --- @navikt/core/css/darkside/chips.darkside.css | 2 +- @navikt/core/react/src/chips/Toggle.tsx | 6 +++++- @navikt/core/tokens/darkside/tokens/semantic.ts | 6 +++--- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/@navikt/core/css/darkside/chips.darkside.css b/@navikt/core/css/darkside/chips.darkside.css index 547c7acd23..4c6f60f2f2 100644 --- 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/react/src/chips/Toggle.tsx b/@navikt/core/react/src/chips/Toggle.tsx index 606f95442f..f4259532fb 100644 --- a/@navikt/core/react/src/chips/Toggle.tsx +++ b/@navikt/core/react/src/chips/Toggle.tsx @@ -74,7 +74,11 @@ 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-icon, var(--ac-chip-toggle-circle-border, var(--a-border-default)))" + fill={`var(${ + variant === "action" + ? "--ax-text-accent-strong" + : "--ax-text-default" + }, var(--ac-chip-toggle-circle-border, var(--a-border-default)))`} /> )} diff --git a/@navikt/core/tokens/darkside/tokens/semantic.ts b/@navikt/core/tokens/darkside/tokens/semantic.ts index bc662ac99b..c8816a48a6 100644 --- 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`, }, From 68cd45e6efe2aa5415fa7db31a1ebe0a2b1ada7a Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 20 Jan 2025 13:02:09 +0100 Subject: [PATCH 3/9] :lipstick: Bumped secondary neutral border --- @navikt/core/css/darkside/button.darkside.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/@navikt/core/css/darkside/button.darkside.css b/@navikt/core/css/darkside/button.darkside.css index 2180354d5e..b3f8190919 100644 --- a/@navikt/core/css/darkside/button.darkside.css +++ b/@navikt/core/css/darkside/button.darkside.css @@ -159,7 +159,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 +178,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; From 1689d77175ab6a65e4cc909d4c1860d9b1ee1b70 Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 20 Jan 2025 13:06:04 +0100 Subject: [PATCH 4/9] :lipstick: Reduced text-color change on hover --- @navikt/core/css/darkside/copybutton.darkside.css | 13 ------------- .../css/darkside/form/radio-checkbox.darkside.css | 2 +- @navikt/core/css/darkside/form/switch.darkside.css | 4 ++-- 3 files changed, 3 insertions(+), 16 deletions(-) diff --git a/@navikt/core/css/darkside/copybutton.darkside.css b/@navikt/core/css/darkside/copybutton.darkside.css index e6e35cf15c..993f6163ff 100644 --- a/@navikt/core/css/darkside/copybutton.darkside.css +++ b/@navikt/core/css/darkside/copybutton.darkside.css @@ -146,14 +146,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 +157,6 @@ .navds-copybutton--neutral { color: var(--ax-text-subtle); - &:hover, - &.navds-copybutton--active { - color: var(--ax-text-default); - } - &:disabled { color: var(--ax-text-subtle); } diff --git a/@navikt/core/css/darkside/form/radio-checkbox.darkside.css b/@navikt/core/css/darkside/form/radio-checkbox.darkside.css index 4c7d85bbb5..a6e2858a47 100644 --- 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 index 9cc21faa52..b72ac9d4a2 100644 --- 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; From 106deb337dad174dc5f74cf3e0040b7ab06331f7 Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 20 Jan 2025 14:05:27 +0100 Subject: [PATCH 5/9] :bug: Resolved border and focus logic for combobox --- @navikt/core/css/darkside/button.darkside.css | 4 +-- .../css/darkside/form/combobox.darkside.css | 26 ++++++++++++------- .../core/css/darkside/read-more.darkside.css | 4 +-- .../core/tokens/darkside/tokens/semantic.ts | 2 +- 4 files changed, 22 insertions(+), 14 deletions(-) diff --git a/@navikt/core/css/darkside/button.darkside.css b/@navikt/core/css/darkside/button.darkside.css index b3f8190919..8ddb2e6627 100644 --- a/@navikt/core/css/darkside/button.darkside.css +++ b/@navikt/core/css/darkside/button.darkside.css @@ -17,8 +17,8 @@ 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; } } diff --git a/@navikt/core/css/darkside/form/combobox.darkside.css b/@navikt/core/css/darkside/form/combobox.darkside.css index 82c0a38c77..a3aca0f185 100644 --- 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,15 +117,19 @@ &:hover { cursor: text; } + + .navds-combobox--disabled &:hover { + border-color: var(--ax-border-default); + } } .navds-combobox--error { & .navds-combobox__wrapper-inner { - border-color: var(--ax-border-danger); - box-shadow: 0 0 0 1px var(--ax-border-danger); + border-color: var(--ax-border-danger-strong); + box-shadow: 0 0 0 1px var(--ax-border-danger-strong); &:has(.navds-combobox__input:focus-visible) { - border-color: var(--ax-border-danger); + border-color: var(--ax-border-danger-strong); } } } @@ -230,7 +238,7 @@ /* dropdown & non selectable dropdown items */ .navds-combobox__list { - max-height: 290px; + max-height: 316px; overflow: clip; position: absolute; left: 0; @@ -324,7 +332,7 @@ } & svg { - color: var(--ax-text-accent); + color: var(--ax-text-default); } } diff --git a/@navikt/core/css/darkside/read-more.darkside.css b/@navikt/core/css/darkside/read-more.darkside.css index e762f8d7ec..5c522bf07c 100644 --- 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/tokens/darkside/tokens/semantic.ts b/@navikt/core/tokens/darkside/tokens/semantic.ts index c8816a48a6..c3363ac15f 100644 --- a/@navikt/core/tokens/darkside/tokens/semantic.ts +++ b/@navikt/core/tokens/darkside/tokens/semantic.ts @@ -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", /** From 87b02f466c0b24f47d018a7071769855ecb1c190 Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 20 Jan 2025 14:24:23 +0100 Subject: [PATCH 6/9] :bug: Fix icon sizing for buttons --- @navikt/core/css/darkside/button.darkside.css | 4 +++- .../core/css/darkside/copybutton.darkside.css | 22 +++---------------- 2 files changed, 6 insertions(+), 20 deletions(-) diff --git a/@navikt/core/css/darkside/button.darkside.css b/@navikt/core/css/darkside/button.darkside.css index 8ddb2e6627..6d6b7edae9 100644 --- a/@navikt/core/css/darkside/button.darkside.css +++ b/@navikt/core/css/darkside/button.darkside.css @@ -25,18 +25,20 @@ .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 { diff --git a/@navikt/core/css/darkside/copybutton.darkside.css b/@navikt/core/css/darkside/copybutton.darkside.css index 993f6163ff..fa85089cc4 100644 --- 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,7 +92,7 @@ } & > .navds-copybutton__content { - gap: var(--ax-space-4); + gap: var(--ax-space-2); } } @@ -104,18 +100,6 @@ .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 { @@ -166,5 +150,5 @@ display: inline-flex; align-items: center; justify-content: center; - gap: var(--ax-space-8); + gap: var(--ax-space-6); } From 1ed5eb723ee4406fab98ecf47cf32c26d4b8e5c9 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 21 Jan 2025 06:37:52 +0100 Subject: [PATCH 7/9] :lipstick: Use tertiary-buttons for datepicker caption --- @navikt/core/react/src/date/datepicker/parts/Caption.tsx | 4 ++-- .../core/react/src/date/datepicker/parts/DropdownCaption.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/@navikt/core/react/src/date/datepicker/parts/Caption.tsx b/@navikt/core/react/src/date/datepicker/parts/Caption.tsx index a28492438a..ea8a124f50 100644 --- 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) => { <>