Merge 74a4072 into c0dc296

navikt · Feb 9, 2023 · db73eed · db73eed
2 parents c0dc296 + 74a4072
commit db73eed
Show file tree

Hide file tree

Showing 15 changed files with 325 additions and 47 deletions.
diff --git a/.changeset/perfect-pens-relate.md 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
diff --git a/@navikt/core/css/button.css b/@navikt/core/css/button.css
@@ -112,13 +112,39 @@
   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 *
  **************************/
 
 .navds-button--secondary {
   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));
 }
 
@@ -144,10 +170,47 @@
 .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));
 }
 
+/**************************
+* .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 *
  ****************************/
@@ -188,6 +251,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 *
  *************************/

diff --git 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
@@ -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",
@@ -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",
@@ -221,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",

diff --git 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
@@ -10,18 +10,32 @@ 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 = {
   primary: "Primary",
   secondary: "Secondary",
   tertiary: "Tertiary",
   danger: "Danger",
+  "primary-neutral": "Primary",
+  "secondary-neutral": "Secondary",
+  "tertiary-neutral": "Tertiary",
 };
 
 export const Default = {
@@ -51,7 +65,15 @@ export const Default = {
     variant: {
       control: {
         type: "radio",
-        options: ["primary", "secondary", "tertiary", "danger"],
+        options: [
+          "primary",
+          "secondary",
+          "tertiary",
+          "danger",
+          "primary-neutral",
+          "secondary-neutral",
+          "tertiary-neutral",
+        ],
       },
     },
     size: {

diff --git a/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx b/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx
@@ -13,6 +13,12 @@ export default {
         options: ["medium", "small"],
       },
     },
+    variant: {
+      control: {
+        type: "radio",
+        options: ["action", "neutral"],
+      },
+    },
   },
 } as Meta;
 
@@ -88,6 +94,29 @@ export const Compositions = () => {
   );
 };
 
+export const Variants = () => {
+  const [activeValue, setActiveValue] = useState("ulest");
+
+  return (
+    <div className="colgap">
+      <ToggleGroup
+        variant="action"
+        value={activeValue}
+        onChange={setActiveValue}
+      >
+        {Items(true, true)}
+      </ToggleGroup>
+      <ToggleGroup
+        variant="neutral"
+        value={activeValue}
+        onChange={setActiveValue}
+      >
+        {Items(true, true)}
+      </ToggleGroup>
+    </div>
+  );
+};
+
 export const Small = () => {
   const [activeValue, setActiveValue] = useState("ulest");