feat(OnyxSystemButton): implement soft and medium color (#2284)

Relates to #2139

Implement soft and medium color to system button.

.changeset/nervous-beans-join.md

@@ -0,0 +1,7 @@
+---
+"sit-onyx": major
+---
+
+feat(OnyxSystemButton): implement soft and medium color
+
+Also removed the `density` property since the system button does not support [density](https://onyx.schwarz/basics/density.html).

packages/sit-onyx/src/components/OnyxSystemButton/OnyxSystemButton.ct.tsx

@@ -1,11 +1,11 @@
-import { DENSITIES } from "../../composables/density";
 import { test } from "../../playwright/a11y";
 import {
   executeMatrixScreenshotTest,
   mockPlaywrightIcon,
   type MatrixScreenshotTestOptions,
 } from "../../playwright/screenshots";
 import OnyxSystemButton from "./OnyxSystemButton.vue";
+import { SYSTEM_BUTTON_COLORS } from "./types";
 
 const beforeScreenshot: MatrixScreenshotTestOptions["beforeScreenshot"] = async (
   component,
@@ -22,35 +22,44 @@ const beforeScreenshot: MatrixScreenshotTestOptions["beforeScreenshot"] = async
   }
 };
 
-test.describe("Screenshot tests", () => {
-  for (const type of ["text", "icon"] as const) {
+test.beforeEach(async ({ page }) => {
+  await page.addStyleTag({
+    content: `body {
+    background-color: var(--onyx-color-base-background-tinted);
+  }`,
+  });
+});
+
+for (const color of SYSTEM_BUTTON_COLORS) {
+  test.describe(`Screenshot tests (${color})`, () => {
     executeMatrixScreenshotTest({
-      name: `System button (${type})`,
-      columns: DENSITIES,
+      name: `System button (${color})`,
+      columns: ["text", "icon"],
       rows: ["default", "hover", "active", "focus-visible", "skeleton"],
       beforeScreenshot,
       component: (column, row) => (
         <OnyxSystemButton
           label="Test label"
-          density={column}
-          icon={type === "icon" ? mockPlaywrightIcon : undefined}
+          icon={column === "icon" ? mockPlaywrightIcon : undefined}
           skeleton={row === "skeleton"}
+          color={color}
         />
       ),
     });
-  }
 
-  executeMatrixScreenshotTest({
-    name: "System button (disabled)",
-    columns: ["text", "icon"],
-    rows: ["default", "hover", "active", "focus-visible"],
-    beforeScreenshot,
-    component: (column) => (
-      <OnyxSystemButton
-        label="Test label"
-        icon={column === "icon" ? mockPlaywrightIcon : undefined}
-        disabled
-      />
-    ),
+    executeMatrixScreenshotTest({
+      name: `System button (${color}, disabled)`,
+      columns: ["text", "icon"],
+      rows: ["default", "hover", "active", "focus-visible"],
+      beforeScreenshot,
+      component: (column) => (
+        <OnyxSystemButton
+          label="Test label"
+          icon={column === "icon" ? mockPlaywrightIcon : undefined}
+          color={color}
+          disabled
+        />
+      ),
+    });
   });
-});
+}

packages/sit-onyx/src/components/OnyxSystemButton/OnyxSystemButton.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { useDensity } from "../../composables/density";
 import { SKELETON_INJECTED_SYMBOL, useSkeletonContext } from "../../composables/useSkeletonState";
 import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
@@ -10,25 +9,21 @@ const props = withDefaults(defineProps<OnyxSystemButtonProps>(), {
   disabled: FORM_INJECTED_SYMBOL,
   autofocus: false,
   skeleton: SKELETON_INJECTED_SYMBOL,
+  color: "intense",
 });
 
-const { densityClass } = useDensity(props);
 const { disabled } = useFormContext(props);
 const skeleton = useSkeletonContext(props);
 </script>
 
 <template>
   <OnyxSkeleton
     v-if="skeleton"
-    :class="[
-      'onyx-system-button-skeleton',
-      densityClass,
-      props.icon ? '' : 'onyx-system-button-skeleton--text',
-    ]"
+    :class="['onyx-system-button-skeleton', props.icon ? '' : 'onyx-system-button-skeleton--text']"
   />
   <button
     v-else
-    :class="['onyx-system-button', 'onyx-text--small', densityClass]"
+    :class="['onyx-system-button', 'onyx-text--small', `onyx-system-button--${props.color}`]"
     :aria-label="props.label"
     type="button"
     :disabled="disabled"
@@ -56,16 +51,13 @@ const skeleton = useSkeletonContext(props);
     max-width: 100%;
 
     &--text {
-      width: var(--onyx-density-4xl);
+      width: var(--onyx-spacing-4xl);
     }
   }
 }
 
 .onyx-system-button {
   @include layers.component() {
-    --background-color: transparent;
-    --color: var(--onyx-color-text-icons-neutral-medium);
-
     font-family: var(--onyx-font-family);
     color: var(--color);
     background-color: var(--background-color);
@@ -85,35 +77,89 @@ const skeleton = useSkeletonContext(props);
 
       &:hover,
       &:focus-visible {
-        --background-color: var(--onyx-color-base-neutral-300);
-        --color: var(--onyx-color-text-icons-neutral-intense);
+        --background-color: var(--hover-background-color);
+        --color: var(--hover-focus-color);
       }
 
       &:focus-visible {
+        --background-color: var(--focus-active-background-color);
+        --color: var(--hover-focus-color);
         outline: var(--onyx-outline-width) solid var(--onyx-color-component-focus-primary);
       }
 
       &:active {
-        --background-color: var(--onyx-color-base-neutral-300);
-        --color: var(--onyx-color-text-icons-primary-bold);
+        --background-color: var(--focus-active-background-color);
+        --color: var(--active-color);
       }
     }
 
     .onyx-icon {
       --icon-size: 1.125rem;
     }
 
-    &:not(:has(.onyx-icon)) {
-      padding: var(--onyx-density-3xs) var(--onyx-density-xs);
-      --background-color: var(--onyx-color-base-neutral-300);
-      --color: var(--onyx-color-text-icons-neutral-intense);
-
-      &:enabled {
-        &:hover,
-        &:focus-visible,
-        &:active {
-          --background-color: var(--onyx-color-base-neutral-200);
-        }
+    $is_text_button: "&:not(:has(.onyx-icon))";
+
+    #{$is_text_button} {
+      padding: var(--onyx-spacing-5xs) var(--onyx-spacing-2xs);
+    }
+
+    &--intense {
+      --color: var(--onyx-color-text-icons-neutral-medium);
+      --hover-focus-color: var(--onyx-color-text-icons-neutral-intense);
+      --active-color: var(--onyx-color-text-icons-primary-bold);
+
+      --background-color: transparent;
+      --hover-background-color: var(--onyx-color-base-neutral-300);
+      --focus-active-background-color: var(--onyx-color-base-neutral-300);
+
+      #{$is_text_button} {
+        --color: var(--onyx-color-text-icons-neutral-intense);
+        --hover-focus-color: var(--onyx-color-text-icons-neutral-intense);
+        --active-color: var(--onyx-color-text-icons-primary-bold);
+
+        --background-color: var(--onyx-color-base-neutral-300);
+        --hover-background-color: var(--onyx-color-base-neutral-200);
+        --focus-active-background-color: var(--onyx-color-base-neutral-200);
+      }
+    }
+
+    &--soft {
+      --color: var(--onyx-color-text-icons-neutral-medium);
+      --hover-focus-color: var(--onyx-color-text-icons-neutral-intense);
+      --active-color: var(--onyx-color-text-icons-primary-intense);
+
+      --background-color: transparent;
+      --hover-background-color: var(--onyx-color-base-background-blank);
+      --focus-active-background-color: var(--onyx-color-base-background-blank);
+
+      #{$is_text_button} {
+        --color: var(--onyx-color-text-icons-neutral-intense);
+        --hover-focus-color: var(--onyx-color-text-icons-neutral-intense);
+        --active-color: var(--onyx-color-text-icons-primary-intense);
+
+        --background-color: transparent;
+        --hover-background-color: var(--onyx-color-base-background-blank);
+        --focus-active-background-color: var(--onyx-color-base-background-blank);
+      }
+    }
+
+    &--medium {
+      --color: var(--onyx-color-text-icons-neutral-medium);
+      --hover-focus-color: var(--onyx-color-text-icons-neutral-intense);
+      --active-color: var(--onyx-color-text-icons-primary-intense);
+
+      --background-color: transparent;
+      --hover-background-color: var(--onyx-color-base-neutral-200);
+      --focus-active-background-color: var(--onyx-color-base-neutral-200);
+
+      #{$is_text_button} {
+        --color: var(--onyx-color-text-icons-neutral-intense);
+        --hover-focus-color: var(--onyx-color-text-icons-neutral-intense);
+        --active-color: var(--onyx-color-text-icons-primary-bold);
+
+        --background-color: var(--onyx-color-base-neutral-200);
+        --hover-background-color: var(--onyx-color-base-neutral-300);
+        --focus-active-background-color: var(--onyx-color-base-neutral-200);
       }
     }
 

packages/sit-onyx/src/components/OnyxSystemButton/types.ts

@@ -1,9 +1,6 @@
 import type { OnyxButtonProps } from "../OnyxButton/types";
 
-export type OnyxSystemButtonProps = Pick<
-  OnyxButtonProps,
-  "density" | "disabled" | "autofocus" | "skeleton"
-> & {
+export type OnyxSystemButtonProps = Pick<OnyxButtonProps, "disabled" | "autofocus" | "skeleton"> & {
   /**
    * Button label / text to show. Is always required (even if `icon` is set) for screen readers / accessibility.
    */
@@ -12,4 +9,11 @@ export type OnyxSystemButtonProps = Pick<
    * Icon to show. Will visually hide the label if set.
    */
   icon?: string;
+  /**
+   * Button color.
+   */
+  color?: SystemButtonColor;
 };
+
+export const SYSTEM_BUTTON_COLORS = ["intense", "soft", "medium"] as const;
+export type SystemButtonColor = (typeof SYSTEM_BUTTON_COLORS)[number];

packages/sit-onyx/src/playwright/screenshots.tsx

@@ -161,6 +161,8 @@ export const executeMatrixScreenshotTest = async <TColumn extends string, TRow e
     );
 
     await expect(component).toHaveScreenshot(`${options.name}.png`);
+
+    await page.unroute("/_playwright-matrix-screenshot*");
   });
 };