From 84653452773ccbf6436db295c65a39af73d165d1 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 7 Feb 2023 10:13:26 +0100 Subject: [PATCH 01/15] :lipstick: Oppdatert neutral-skala --- @navikt/core/tokens/docs.json | 7 ++++--- @navikt/core/tokens/src/semantic-colors.json | 9 ++++++--- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/@navikt/core/tokens/docs.json b/@navikt/core/tokens/docs.json index 1d72731feb..6415dff1c7 100644 --- a/@navikt/core/tokens/docs.json +++ b/@navikt/core/tokens/docs.json @@ -227,9 +227,10 @@ "name": "--a-surface-neutral-subtle-hover", "value": "rgba(0, 0, 0, 0.1)" }, - { "name": "--a-surface-neutral", "value": "rgba(112, 112, 112, 1)" }, - { "name": "--a-surface-neutral-hover", "value": "rgba(89, 89, 89, 1)" }, - { "name": "--a-surface-neutral-selected", "value": "rgba(89, 89, 89, 1)" }, + { "name": "--a-surface-neutral", "value": "rgba(89, 89, 89, 1)" }, + { "name": "--a-surface-neutral-hover", "value": "rgba(64, 64, 64, 1)" }, + { "name": "--a-surface-neutral-selected", "value": "rgba(38, 38, 38, 1)" }, + { "name": "--a-surface-neutral-active", "value": "rgba(38, 38, 38, 1)" }, { "name": "--a-surface-success-subtle", "value": "rgba(243, 252, 245, 1)" }, { "name": "--a-surface-success-subtle-hover", diff --git a/@navikt/core/tokens/src/semantic-colors.json b/@navikt/core/tokens/src/semantic-colors.json index f7f14a9ab0..45d3e8b398 100644 --- a/@navikt/core/tokens/src/semantic-colors.json +++ b/@navikt/core/tokens/src/semantic-colors.json @@ -138,13 +138,16 @@ } }, "hover": { - "value": "{a.gray.700.value}" + "value": "{a.gray.800.value}" }, "selected": { - "value": "{a.gray.700.value}" + "value": "{a.gray.900.value}" + }, + "active": { + "value": "{a.gray.900.value}" }, "@": { - "value": "{a.gray.600.value}" + "value": "{a.gray.700.value}" } }, From cc3f35d222003fe5ee8a122c848600e05a5e8079 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 7 Feb 2023 10:17:19 +0100 Subject: [PATCH 02/15] :art: Lagt til Neutral i button-api --- @navikt/core/react/src/button/Button.tsx | 9 ++++++++- @navikt/core/react/src/button/button.stories.tsx | 16 +++++++++++++++- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/@navikt/core/react/src/button/Button.tsx b/@navikt/core/react/src/button/Button.tsx index 1a8d11be1b..13705b81d7 100644 --- a/@navikt/core/react/src/button/Button.tsx +++ b/@navikt/core/react/src/button/Button.tsx @@ -13,7 +13,14 @@ export interface ButtonProps * Changes design and interaction-visuals * @default "primary" */ - variant?: "primary" | "secondary" | "tertiary" | "danger"; + variant?: + | "primary" + | "primary-neutral" + | "secondary" + | "secondary-neutral" + | "tertiary" + | "tertiary-neutral" + | "danger"; /** * Changes padding, height and font-size * @default medium diff --git a/@navikt/core/react/src/button/button.stories.tsx b/@navikt/core/react/src/button/button.stories.tsx index b623691e66..96bb09af85 100644 --- a/@navikt/core/react/src/button/button.stories.tsx +++ b/@navikt/core/react/src/button/button.stories.tsx @@ -30,11 +30,22 @@ export default { }, }; -const variants: Array<"primary" | "secondary" | "tertiary" | "danger"> = [ +const variants: Array< + | "primary" + | "secondary" + | "tertiary" + | "primary-neutral" + | "secondary-neutral" + | "tertiary-neutral" + | "danger" +> = [ "primary", "secondary", "tertiary", "danger", + "primary-neutral", + "secondary-neutral", + "tertiary-neutral", ]; const varSwitch = { @@ -42,6 +53,9 @@ const varSwitch = { secondary: "Secondary", tertiary: "Tertiary", danger: "Danger", + "primary-neutral": "Primary neutral", + "secondary-neutral": "Secondary neutral", + "tertiary-neutral": "Tertiary neutral", }; export const Default = (props) => { From c51f7695a43050af323b66de6d8342319a40f7df Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 7 Feb 2023 10:21:20 +0100 Subject: [PATCH 03/15] :lipstick: Primary-neutral --- @navikt/core/css/button.css | 26 +++++++++++++++++++ .../core/react/src/button/button.stories.tsx | 6 ++--- 2 files changed, 29 insertions(+), 3 deletions(-) diff --git a/@navikt/core/css/button.css b/@navikt/core/css/button.css index 703c698562..5dc7c7314f 100644 --- a/@navikt/core/css/button.css +++ b/@navikt/core/css/button.css @@ -112,6 +112,32 @@ background-color: var(--ac-button-primary-bg, var(--a-surface-action)); } +/************************* + * .navds-button--primary-neutral * + *************************/ + +.navds-button--primary-neutral { + background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral)); + color: var(--ac-button-primary-neutral-text, var(--a-text-on-neutral)); +} + +.navds-button--primary-neutral:hover { + background-color: var(--ac-button-primary-neutral-hover-bg, var(--a-surface-neutral-hover)); +} + +.navds-button--primary-neutral:active { + background-color: var(--ac-button-primary-neutral-active-bg, var(--a-surface-neutral-active)); +} + +.navds-button--primary-neutral:focus { + box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus); +} + +.navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled), +.navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) { + background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral)); +} + /************************** * .navds-button--secondary * **************************/ diff --git a/@navikt/core/react/src/button/button.stories.tsx b/@navikt/core/react/src/button/button.stories.tsx index 96bb09af85..0f76c39e0a 100644 --- a/@navikt/core/react/src/button/button.stories.tsx +++ b/@navikt/core/react/src/button/button.stories.tsx @@ -53,9 +53,9 @@ const varSwitch = { secondary: "Secondary", tertiary: "Tertiary", danger: "Danger", - "primary-neutral": "Primary neutral", - "secondary-neutral": "Secondary neutral", - "tertiary-neutral": "Tertiary neutral", + "primary-neutral": "Primary", + "secondary-neutral": "Secondary", + "tertiary-neutral": "Tertiary", }; export const Default = (props) => { From 5509a4a7b421be4d470a369cd19b56df200edfb0 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 7 Feb 2023 10:27:22 +0100 Subject: [PATCH 04/15] :lipstick: secondary-neutral --- @navikt/core/css/button.css | 38 ++++++++++++++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/@navikt/core/css/button.css b/@navikt/core/css/button.css index 5dc7c7314f..12a60aebd7 100644 --- a/@navikt/core/css/button.css +++ b/@navikt/core/css/button.css @@ -144,7 +144,6 @@ .navds-button--secondary { color: var(--ac-button-secondary-text, var(--a-text-action)); - background-color: var(--ac-button-secondary-bg, var(--a-surface-default)); box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action)); } @@ -174,6 +173,43 @@ box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action)); } +/************************** +* .navds-button--secondary-neutral * + **************************/ + +.navds-button--secondary-neutral { + color: var(--ac-button-secondary-neutral-text, var(--a-text-default)); + background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent)); + box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong)); +} + +.navds-button--secondary-neutral:hover { + background-color: var(--ac-button-secondary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)); +} + +.navds-button--secondary-neutral:focus { + color: var(--ac-button-secondary-neutral-text, var(--a-text-default)); + box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus); +} + +.navds-button--secondary-neutral:active { + color: var(--ac-button-secondary-neutral-active-text, var(--a-text-on-neutral)); + background-color: var(--ac-button-secondary-neutral-active-bg, var(--a-surface-neutral-active)); + box-shadow: none; +} + +.navds-button--secondary-neutral:focus:active { + box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)), + var(--a-shadow-focus); +} + +.navds-button--secondary-neutral:where(:disabled, .navds-button--disabled), +.navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) { + color: var(--ac-button-secondary-neutral-text, var(--a-text-default)); + background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent)); + box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong)); +} + /**************************** * .navds-button--tertiary * ****************************/ From b26be244e46588c9c05ee4723815ddf2affd6049 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 7 Feb 2023 10:31:34 +0100 Subject: [PATCH 05/15] :lipstick: tertiary-neutral --- @navikt/core/css/button.css | 40 +++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/@navikt/core/css/button.css b/@navikt/core/css/button.css index 12a60aebd7..1a76a279c0 100644 --- a/@navikt/core/css/button.css +++ b/@navikt/core/css/button.css @@ -250,6 +250,46 @@ box-shadow: none; } +/**************************** + * .navds-button--tertiary-neutral * + ****************************/ + +.navds-button--tertiary-neutral { + color: var(--ac-button-tertiary-neutral-text, var(--a-text-default)); +} + +.navds-button--tertiary-neutral:hover { + color: var(--ac-button-tertiary-neutral-hover-text, var(--a-text-default)); + background-color: var(--ac-button-tertiary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)); +} + +.navds-button--tertiary-neutral:focus { + box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus); +} + +.navds-button--tertiary-neutral:active { + color: var(--ac-button-tertiary-neutral-active-text, var(--a-text-on-neutral)); + background-color: var(--ac-button-tertiary-neutral-active-bg, var(--a-surface-neutral-active)); + box-shadow: inset 0 0 0 1px var(--a-surface-default); +} + +.navds-button--tertiary-neutral:active:hover { + background-color: var(--ac-button-tertiary-neutral-active-hover-bg, var(--a-surface-neutral-active)); +} + +.navds-button--tertiary-neutral:active:focus { + box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus); +} + +.navds-button--tertiary-neutral:where(:disabled, .navds-button--disabled), +.navds-button--tertiary-neutral:hover:where(:disabled, .navds-button--disabled), +.navds-button--tertiary-neutral:active:where(:disabled, .navds-button--disabled), +.navds-button--tertiary-neutral:active:hover:where(:disabled, .navds-button--disabled) { + color: var(--ac-button-tertiary-neutral-text, var(--a-text-default)); + background: none; + box-shadow: none; +} + /************************* * .navds-button--danger * *************************/ From d545f0a518dd402a5242854c15a9b1c95b7eecbe Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 7 Feb 2023 10:32:28 +0100 Subject: [PATCH 06/15] :art: La til flere stories for button --- @navikt/core/react/src/button/button.stories.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/@navikt/core/react/src/button/button.stories.tsx b/@navikt/core/react/src/button/button.stories.tsx index 0f76c39e0a..6bd5c8d7a8 100644 --- a/@navikt/core/react/src/button/button.stories.tsx +++ b/@navikt/core/react/src/button/button.stories.tsx @@ -12,7 +12,15 @@ export default { variant: { control: { type: "radio", - options: ["primary", "secondary", "tertiary", "danger"], + options: [ + "primary", + "secondary", + "tertiary", + "danger", + "primary-neutral", + "secondary-neutral", + "tertiary-neutral", + ], }, }, size: { From b5f31c1c5c64ba55311395a51c7307454b91e79c Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 7 Feb 2023 10:38:46 +0100 Subject: [PATCH 07/15] :memo: Docs for button-tokens --- @navikt/core/css/tokens.json | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json index 5a7a50625d..8fb9cf301e 100644 --- a/@navikt/core/css/tokens.json +++ b/@navikt/core/css/tokens.json @@ -45,7 +45,27 @@ "--ac-button-danger-hover-bg": "--a-surface-danger-hover", "--ac-button-danger-active-bg": "--a-surface-danger-active", "--ac-button-loader-stroke": "currentColor", - "--ac-button-primary-loader-stroke-bg": "rgb(255 255 255 / 0.3)" + "--ac-button-primary-loader-stroke-bg": "rgb(255 255 255 / 0.3)", + "--ac-button-primary-neutral-bg": "--a-surface-neutral", + "--ac-button-primary-neutral-text": "--a-text-on-neutral", + "--ac-button-primary-neutral-hover-bg": "--a-surface-neutral-hover", + "--ac-button-primary-neutral-active-bg": "--a-surface-neutral-active", + "--ac-button-primary-neutral-focus-border": "--a-surface-default", + "--ac-button-secondary-neutral-text": "--a-text-default", + "--ac-button-secondary-neutral-bg": "--a-surface-transparent", + "--ac-button-secondary-neutral-border": "--a-border-strong", + "--ac-button-secondary-neutral-hover-bg": "--a-surface-neutral-subtle-hover", + "--ac-button-secondary-neutral-focus-border": "--a-border-stron", + "--ac-button-secondary-neutral-active-text": "--a-text-on-neutral", + "--ac-button-secondary-neutral-active-bg": "--a-surface-neutral-active", + "--ac-button-secondary-neutral-active-focus-border": "--a-surface-default", + "--ac-button-tertiary-neutral-text": "--a-text-default", + "--ac-button-tertiary-neutral-hover-text": "--a-text-default", + "--ac-button-tertiary-neutral-hover-bg": "--a-surface-neutral-subtle-hover", + "--ac-button-tertiary-neutral-focus-border": "--a-border-stron", + "--ac-button-tertiary-neutral-active-text": "--a-text-on-neutral", + "--ac-button-tertiary-neutral-active-bg": "--a-surface-neutral-active", + "--ac-button-tertiary-neutral-active-hover-bg": "--a-surface-neutral-active" }, "chat": { "--ac-chat-avatar-bg": "--a-bg-subtle", From ab5ff0974c4cc21e23deee78e199eb6db5cee2a1 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 7 Feb 2023 10:42:04 +0100 Subject: [PATCH 08/15] :art: Lagt til neutral i togglegroup API --- .../src/toggle-group/ToggleGroup.stories.tsx | 29 +++++++++++++++++++ .../react/src/toggle-group/ToggleGroup.tsx | 12 +++++++- 2 files changed, 40 insertions(+), 1 deletion(-) diff --git a/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx b/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx index a42c19b1d4..6deed46dc7 100644 --- a/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx +++ b/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx @@ -12,6 +12,12 @@ export default { options: ["medium", "small"], }, }, + variant: { + control: { + type: "radio", + options: ["action", "neutral"], + }, + }, }, } as Meta; @@ -85,6 +91,29 @@ export const Compositions = () => { ); }; +export const Variants = () => { + const [activeValue, setActiveValue] = useState("ulest"); + + return ( +
+ + {Items(true, true)} + + + {Items(true, true)} + +
+ ); +}; + export const Small = () => { const [activeValue, setActiveValue] = useState("ulest"); diff --git a/@navikt/core/react/src/toggle-group/ToggleGroup.tsx b/@navikt/core/react/src/toggle-group/ToggleGroup.tsx index 15b467e08f..6be1491149 100644 --- a/@navikt/core/react/src/toggle-group/ToggleGroup.tsx +++ b/@navikt/core/react/src/toggle-group/ToggleGroup.tsx @@ -36,6 +36,11 @@ export interface ToggleGroupProps * Label describing ToggleGroup */ label?: React.ReactNode; + /** + * Changes design and interaction-visuals + * @default "action" + */ + variant?: "action" | "neutral"; } interface ToggleGroupComponent @@ -65,6 +70,7 @@ export const ToggleGroup = forwardRef( defaultValue, id, "aria-describedby": desc, + variant = "action", ...rest }, ref @@ -114,7 +120,11 @@ export const ToggleGroup = forwardRef( value={value ?? groupValue} defaultValue={defaultValue} ref={ref} - className={cl("navds-toggle-group", `navds-toggle-group--${size}`)} + className={cl( + "navds-toggle-group", + `navds-toggle-group--${size}`, + `navds-toggle-group--${variant}` + )} {...(describeBy && { "aria-describedby": describeBy })} role="radiogroup" type="single" From 7cd74a83f36a09fae232113b477ed4eaacd9079a Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 7 Feb 2023 11:05:11 +0100 Subject: [PATCH 09/15] :lipstick: neutral variant css togglegroup --- @navikt/core/css/toggle-group.css | 30 ++++++++++++++++++++++++++++-- @navikt/core/css/tokens.json | 12 +++++++++--- 2 files changed, 37 insertions(+), 5 deletions(-) diff --git a/@navikt/core/css/toggle-group.css b/@navikt/core/css/toggle-group.css index 15f3206e7e..aae9b79006 100644 --- a/@navikt/core/css/toggle-group.css +++ b/@navikt/core/css/toggle-group.css @@ -6,7 +6,7 @@ .navds-toggle-group { border-radius: 9px; - background-color: var(--ac-toggle-group-bg, var(--a-surface-default)); + background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent)); box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default)); padding: calc(var(--a-spacing-1) + 1px); gap: var(--a-spacing-1); @@ -15,6 +15,11 @@ grid-auto-columns: 1fr; } +.navds-toggle-group--neutral { + background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent)); + box-shadow: inset 0 0 0 1px var(--ac-toggle-group-neutral-border, var(--a-border-default)); +} + .navds-toggle-group__button { display: inline-flex; align-items: center; @@ -23,17 +28,27 @@ min-height: 48px; border: none; cursor: pointer; - background-color: var(--ac-toggle-group-button-bg, var(--a-surface-default)); + background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent)); color: var(--ac-toggle-group-button-text, var(--a-text-default)); border-radius: var(--a-border-radius-medium); min-width: fit-content; } +.navds-toggle-group--neutral > .navds-toggle-group__button { + background-color: var(--ac-toggle-group-button-neutral-bg, var(--a-surface-transparent)); + color: var(--ac-toggle-group-button-neutral-text, var(c)); +} + .navds-toggle-group__button:hover { background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)); color: var(--ac-toggle-group-button-hover-text, var(--a-text-action-on-action-subtle)); } +.navds-toggle-group--neutral > .navds-toggle-group__button:hover { + background-color: var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)); + color: var(--ac-toggle-group-button-neutral-hover-text, var(--a-text-default)); +} + .navds-toggle-group__button:focus { outline: none; box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus); @@ -43,6 +58,11 @@ box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus); } +.navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] { + box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)), + 0 0 0 4px var(--a-border-focus); +} + .navds-toggle-group__button-inner { display: flex; align-items: center; @@ -59,6 +79,12 @@ color: var(--ac-toggle-group-selected-text, var(--a-text-on-action)); } +.navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"], +.navds-toggle-group--neutral > .navds-toggle-group__button[aria-checked="true"] { + background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral-selected)); + color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral)); +} + .navds-toggle-group--small > .navds-toggle-group__button { padding: 0.375rem; min-height: 32px; diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json index 8fb9cf301e..5d49d74f44 100644 --- a/@navikt/core/css/tokens.json +++ b/@navikt/core/css/tokens.json @@ -241,14 +241,20 @@ "--ac-tag-alt-3-filled-text": "--a-text-on-alt-3" }, "togglegroup": { - "--ac-toggle-group-bg": "--a-surface-default", + "--ac-toggle-group-bg": "--a-surface-transparent", "--ac-toggle-group-border": "--a-border-default", - "--ac-toggle-group-button-bg": "--a-surface-default", + "--ac-toggle-group-button-bg": "--a-surface-transparent", "--ac-toggle-group-button-text": "--a-text-default", "--ac-toggle-group-button-hover-bg": "--a-surface-action-subtle", "--ac-toggle-group-button-hover-text": "--a-text-action-on-action-subtle", "--ac-toggle-group-selected-bg": "--a-surface-action-selected", - "--ac-toggle-group-selected-text": "--a-text-on-action" + "--ac-toggle-group-selected-text": "--a-text-on-action", + "--ac-toggle-group-button-neutral-bg": "--a-surface-transparent", + "--ac-toggle-group-button-neutral-text": "--ac-toggle-group-button-neutral-text", + "--ac-toggle-group-button-neutral-hover-bg": "--a-surface-neutral-subtle-hover", + "--ac-toggle-group-button-neutral-hover-text": "--a-text-default", + "--ac-toggle-group-neutral-selected-bg": "--a-surface-neutral-selected", + "--ac-toggle-group-neutral-selected-text": "--a-text-on-neutral" }, "tooltip": { "--ac-tooltip-bg": "--a-surface-inverted", From 67fa76dc6c1394521379499576a982404dbfa347 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 7 Feb 2023 11:57:55 +0100 Subject: [PATCH 10/15] :lipstick: Tokens for secondary button bg --- @navikt/core/css/button.css | 3 ++- @navikt/core/css/tokens.json | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/@navikt/core/css/button.css b/@navikt/core/css/button.css index 1a76a279c0..268e3bbad6 100644 --- a/@navikt/core/css/button.css +++ b/@navikt/core/css/button.css @@ -144,6 +144,7 @@ .navds-button--secondary { color: var(--ac-button-secondary-text, var(--a-text-action)); + background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent)); box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action)); } @@ -169,7 +170,7 @@ .navds-button--secondary:where(:disabled, .navds-button--disabled), .navds-button--secondary:hover:where(:disabled, .navds-button--disabled) { color: var(--ac-button-secondary-text, var(--a-text-action)); - background-color: var(--ac-button-secondary-bg, var(--a-surface-default)); + background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent)); box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action)); } diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json index 5d49d74f44..c276e305b4 100644 --- a/@navikt/core/css/tokens.json +++ b/@navikt/core/css/tokens.json @@ -25,7 +25,7 @@ "--ac-button-primary-active-bg": "--a-surface-action-active", "--ac-button-primary-focus-border": "--a-surface-default", "--ac-button-secondary-text": "--a-text-action", - "--ac-button-secondary-bg": "--a-surface-default", + "--ac-button-secondary-bg": "--a-surface-transparent", "--ac-button-secondary-border": "--a-border-action", "--ac-button-secondary-hover-text": "--a-text-action-on-action-subtle", "--ac-button-secondary-hover-bg": "--a-surface-action-subtle-hover", From fc3e4068600f09e49439ebaf593b7b4b55a51d59 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 7 Feb 2023 12:00:47 +0100 Subject: [PATCH 11/15] :memo: Changeset --- .changeset/perfect-pens-relate.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/perfect-pens-relate.md diff --git a/.changeset/perfect-pens-relate.md b/.changeset/perfect-pens-relate.md new file mode 100644 index 0000000000..a3931fb4c9 --- /dev/null +++ b/.changeset/perfect-pens-relate.md @@ -0,0 +1,7 @@ +--- +"@navikt/ds-css": minor +"@navikt/ds-react": minor +"@navikt/ds-tokens": minor +--- + +Button og ToggleGroup har nå en neutral-variant, oppdatert neutral-tokens From 6678e8528bdc62e086fbf0284dabba5ce0f065a1 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 7 Feb 2023 12:39:57 +0100 Subject: [PATCH 12/15] :art: Kode-demoer for neutral-varianter --- .../pages/eksempler/button/primary.tsx | 7 ++- .../pages/eksempler/button/secondary.tsx | 7 ++- .../pages/eksempler/button/tertiary.tsx | 7 ++- .../pages/eksempler/togglegroup/default.tsx | 44 +++++++++++++------ .../pages/eksempler/togglegroup/ikon.tsx | 35 ++++++++++----- 5 files changed, 72 insertions(+), 28 deletions(-) diff --git a/aksel.nav.no/website/pages/eksempler/button/primary.tsx b/aksel.nav.no/website/pages/eksempler/button/primary.tsx index 1c5bedd350..9015c3a988 100644 --- a/aksel.nav.no/website/pages/eksempler/button/primary.tsx +++ b/aksel.nav.no/website/pages/eksempler/button/primary.tsx @@ -2,7 +2,12 @@ import { Button } from "@navikt/ds-react"; import { withDsExample } from "components/website-modules/examples/withDsExample"; const Example = () => { - return ; + return ( +
+ + +
+ ); }; export default withDsExample(Example); diff --git a/aksel.nav.no/website/pages/eksempler/button/secondary.tsx b/aksel.nav.no/website/pages/eksempler/button/secondary.tsx index 9c763c7871..a25ca15732 100644 --- a/aksel.nav.no/website/pages/eksempler/button/secondary.tsx +++ b/aksel.nav.no/website/pages/eksempler/button/secondary.tsx @@ -2,7 +2,12 @@ import { Button } from "@navikt/ds-react"; import { withDsExample } from "components/website-modules/examples/withDsExample"; const Example = () => { - return ; + return ( +
+ + +
+ ); }; export default withDsExample(Example); diff --git a/aksel.nav.no/website/pages/eksempler/button/tertiary.tsx b/aksel.nav.no/website/pages/eksempler/button/tertiary.tsx index 9dc13daf1b..ec3406cf38 100644 --- a/aksel.nav.no/website/pages/eksempler/button/tertiary.tsx +++ b/aksel.nav.no/website/pages/eksempler/button/tertiary.tsx @@ -2,7 +2,12 @@ import { Button } from "@navikt/ds-react"; import { withDsExample } from "components/website-modules/examples/withDsExample"; const Example = () => { - return ; + return ( +
+ + +
+ ); }; export default withDsExample(Example); diff --git a/aksel.nav.no/website/pages/eksempler/togglegroup/default.tsx b/aksel.nav.no/website/pages/eksempler/togglegroup/default.tsx index 8545ba7a03..54654952a4 100644 --- a/aksel.nav.no/website/pages/eksempler/togglegroup/default.tsx +++ b/aksel.nav.no/website/pages/eksempler/togglegroup/default.tsx @@ -4,20 +4,36 @@ import { withDsExample } from "components/website-modules/examples/withDsExample const Example = () => { return ( - - - - Ulest - - - - Leste - - - - Sendt - - +
+ + + + Ulest + + + + Leste + + + + Sendt + + + + + + Ulest + + + + Leste + + + + Sendt + + +
); }; diff --git a/aksel.nav.no/website/pages/eksempler/togglegroup/ikon.tsx b/aksel.nav.no/website/pages/eksempler/togglegroup/ikon.tsx index 8404b14122..cb86066db0 100644 --- a/aksel.nav.no/website/pages/eksempler/togglegroup/ikon.tsx +++ b/aksel.nav.no/website/pages/eksempler/togglegroup/ikon.tsx @@ -4,17 +4,30 @@ import { withDsExample } from "components/website-modules/examples/withDsExample const Example = () => { return ( - - - - - - - - - - - +
+ + + + + + + + + + + + + + + + + + + + + + +
); }; From ff7623f8778293573a591e0b94791649325b1267 Mon Sep 17 00:00:00 2001 From: Ken Date: Thu, 16 Feb 2023 11:40:30 +0100 Subject: [PATCH 13/15] :art: Oppdatert bruk av nye semantiske farger --- @navikt/core/css/toggle-group.css | 2 +- @navikt/core/css/tokens.json | 2 +- @navikt/core/react/src/tag/tag.stories.tsx | 1 + @navikt/core/tokens/docs.json | 2 +- @navikt/core/tokens/src/semantic-colors.json | 2 +- 5 files changed, 5 insertions(+), 4 deletions(-) diff --git a/@navikt/core/css/toggle-group.css b/@navikt/core/css/toggle-group.css index aae9b79006..cb8124271f 100644 --- a/@navikt/core/css/toggle-group.css +++ b/@navikt/core/css/toggle-group.css @@ -81,7 +81,7 @@ .navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"], .navds-toggle-group--neutral > .navds-toggle-group__button[aria-checked="true"] { - background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral-selected)); + background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral)); color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral)); } diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json index c276e305b4..d5ae172c6b 100644 --- a/@navikt/core/css/tokens.json +++ b/@navikt/core/css/tokens.json @@ -253,7 +253,7 @@ "--ac-toggle-group-button-neutral-text": "--ac-toggle-group-button-neutral-text", "--ac-toggle-group-button-neutral-hover-bg": "--a-surface-neutral-subtle-hover", "--ac-toggle-group-button-neutral-hover-text": "--a-text-default", - "--ac-toggle-group-neutral-selected-bg": "--a-surface-neutral-selected", + "--ac-toggle-group-neutral-selected-bg": "--a-surface-neutral", "--ac-toggle-group-neutral-selected-text": "--a-text-on-neutral" }, "tooltip": { diff --git a/@navikt/core/react/src/tag/tag.stories.tsx b/@navikt/core/react/src/tag/tag.stories.tsx index d3ec2c1ffd..3ef24c2627 100644 --- a/@navikt/core/react/src/tag/tag.stories.tsx +++ b/@navikt/core/react/src/tag/tag.stories.tsx @@ -84,6 +84,7 @@ export const Default = { args: { children: "Id elit esse", + variant: "info", }, }; diff --git a/@navikt/core/tokens/docs.json b/@navikt/core/tokens/docs.json index 6415dff1c7..3434bf355b 100644 --- a/@navikt/core/tokens/docs.json +++ b/@navikt/core/tokens/docs.json @@ -154,7 +154,7 @@ "semantic-border": [ { "name": "--a-border-default", "value": "rgba(0, 0, 0, 0.44)" }, - { "name": "--a-border-strong", "value": "rgba(0, 0, 0, 0.56)" }, + { "name": "--a-border-strong", "value": "rgba(0, 0, 0, 0.65)" }, { "name": "--a-border-divider", "value": "rgba(0, 0, 0, 0.19)" }, { "name": "--a-border-subtle", "value": "rgba(0, 0, 0, 0.1)" }, { "name": "--a-border-subtle-hover", "value": "rgba(0, 0, 0, 0.19)" }, diff --git a/@navikt/core/tokens/src/semantic-colors.json b/@navikt/core/tokens/src/semantic-colors.json index 45d3e8b398..a265c4e946 100644 --- a/@navikt/core/tokens/src/semantic-colors.json +++ b/@navikt/core/tokens/src/semantic-colors.json @@ -209,7 +209,7 @@ "value": "{a.grayalpha.500.value}" }, "strong": { - "value": "{a.grayalpha.600.value}" + "value": "{a.grayalpha.700.value}" }, "divider": { "value": "{a.grayalpha.300.value}" From d714b55b7580ceb4579fe66549f39554a694e981 Mon Sep 17 00:00:00 2001 From: Ken Date: Thu, 16 Feb 2023 11:46:44 +0100 Subject: [PATCH 14/15] :memo: Docs for button --- aksel.nav.no/website/pages/eksempler/button/primary.tsx | 1 + aksel.nav.no/website/pages/eksempler/button/secondary.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/aksel.nav.no/website/pages/eksempler/button/primary.tsx b/aksel.nav.no/website/pages/eksempler/button/primary.tsx index 3a794e820a..df39865aee 100644 --- a/aksel.nav.no/website/pages/eksempler/button/primary.tsx +++ b/aksel.nav.no/website/pages/eksempler/button/primary.tsx @@ -19,4 +19,5 @@ export const Demo = { export const args = { index: 0, + desc: "Brukes som primærhandling i løsningen. Som regel ønsker man å ha kun én primærknapp per side.", }; diff --git a/aksel.nav.no/website/pages/eksempler/button/secondary.tsx b/aksel.nav.no/website/pages/eksempler/button/secondary.tsx index 6f48bd37eb..caa96eb278 100644 --- a/aksel.nav.no/website/pages/eksempler/button/secondary.tsx +++ b/aksel.nav.no/website/pages/eksempler/button/secondary.tsx @@ -19,4 +19,5 @@ export const Demo = { export const args = { index: 1, + desc: "De fleste knapper i løsninger vil bruke denne varianten.", }; From 0b2ffccdc6e7229b1270f51e0cf0de62879d6a5e Mon Sep 17 00:00:00 2001 From: Ken Date: Thu, 16 Feb 2023 11:56:41 +0100 Subject: [PATCH 15/15] :bug: Fikset styling-synk for border mellom figma og kode --- @navikt/core/css/accordion.css | 8 ++++---- @navikt/core/css/form/radio-checkbox.css | 4 ++-- @navikt/core/css/form/select.css | 4 ++-- @navikt/core/css/tokens.json | 12 ++++++------ 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/@navikt/core/css/accordion.css b/@navikt/core/css/accordion.css index 405dfb755e..cee0a4594d 100644 --- a/@navikt/core/css/accordion.css +++ b/@navikt/core/css/accordion.css @@ -14,7 +14,7 @@ background: transparent; cursor: pointer; border: none; - border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-strong)); + border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-divider)); } .navds-accordion__header:focus { @@ -24,7 +24,7 @@ .navds-accordion__header:hover { color: var(--ac-accordion-header-text-hover, var(--a-text-action-on-action-subtle)); - border-color: var(--ac-accordion-header-border-hover, var(--a-border-strong)); + border-color: var(--ac-accordion-header-border-hover, var(--a-border-default)); } .navds-accordion__header-content { @@ -39,11 +39,11 @@ .navds-accordion__content { padding: var(--a-spacing-3) var(--a-spacing-3) 18px; - border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-strong)); + border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-divider)); } .navds-accordion__item--open > .navds-accordion__header:hover + * .navds-accordion__content { - border-color: var(--ac-accordion-content-border-open, var(--a-border-strong)); + border-color: var(--ac-accordion-content-border-open, var(--a-border-default)); } .navds-accordion__expand-icon { diff --git a/@navikt/core/css/form/radio-checkbox.css b/@navikt/core/css/form/radio-checkbox.css index d61f89f1eb..bb66915512 100644 --- a/@navikt/core/css/form/radio-checkbox.css +++ b/@navikt/core/css/form/radio-checkbox.css @@ -28,7 +28,7 @@ .navds-radio__label::before { content: ""; background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default)); - box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-strong)); + box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)); width: 1.5rem; height: 1.5rem; border-radius: var(--a-border-radius-medium); @@ -67,7 +67,7 @@ .navds-checkbox__input:focus + .navds-checkbox__label::before, .navds-radio__input:focus + .navds-radio__label::before { - box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-strong)), var(--a-shadow-focus); + box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus); } .navds-checkbox__input:hover:focus + .navds-checkbox__label::before, diff --git a/@navikt/core/css/form/select.css b/@navikt/core/css/form/select.css index 5b5bb52aff..101d08c754 100644 --- a/@navikt/core/css/form/select.css +++ b/@navikt/core/css/form/select.css @@ -2,7 +2,7 @@ appearance: none; background-color: var(--ac-select-bg, var(--a-surface-default)); border-radius: var(--a-border-radius-medium); - border: 1px solid var(--ac-select-border, var(--a-border-strong)); + border: 1px solid var(--ac-select-border, var(--a-border-default)); width: 100%; box-sizing: border-box; min-height: 48px; @@ -52,7 +52,7 @@ .navds-select__input:disabled { background-color: var(--ac-select-bg, var(--a-surface-default)); - border: 1px solid var(--ac-select-border, var(--a-border-strong)); + border: 1px solid var(--ac-select-border, var(--a-border-default)); box-shadow: none; cursor: not-allowed; } diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json index d5ae172c6b..b731568c4f 100644 --- a/@navikt/core/css/tokens.json +++ b/@navikt/core/css/tokens.json @@ -10,13 +10,13 @@ "--ac-alert-success-bg": "--a-surface-success-subtle" }, "accordion": { - "--ac-accordion-header-border": "--a-border-strong", + "--ac-accordion-header-border": "--a-border-divider", "--ac-accordion-header-text-hover": "--a-text-action-on-action-subtle", - "--ac-accordion-header-border-hover": "--a-border-strong", + "--ac-accordion-header-border-hover": "--a-border-default", "--ac-accordion-item-bg-open": "--a-surface-action-subtle", "--ac-accordion-item-border-open": "--a-surface-action-subtle", - "--ac-accordion-content-border": "--a-border-strong", - "--ac-accordion-content-border-open": "--a-border-strong" + "--ac-accordion-content-border": "--a-border-divider", + "--ac-accordion-content-border-open": "--a-border-default" }, "button": { "--ac-button-primary-bg": "--a-surface-action", @@ -279,7 +279,7 @@ }, "checkbox-radio": { "--ac-radio-checkbox-bg": "--a-surface-default", - "--ac-radio-checkbox-border": "--a-border-strong", + "--ac-radio-checkbox-border": "--a-border-default", "--ac-radio-checkbox-action": "--a-surface-action", "--ac-radio-checkbox-action-hover-bg": "--a-surface-action-subtle", "--ac-radio-checkbox-error-border": "--a-border-danger", @@ -295,7 +295,7 @@ }, "select": { "--ac-select-bg": "--a-surface-default", - "--ac-select-border": "--a-border-strong", + "--ac-select-border": "--a-border-default", "--ac-select-hover-bg": "--a-border-action", "--ac-select-error-border": "--a-surface-danger" },