@orangesk/orange-design-system 2.0.0-beta.46 → 2.0.0-beta.47

package/src/components/Forms/InputStepper/styles/style.scss

@@ -111,12 +111,17 @@
     &--invalid {
       .input-stepper__button,
       .input-stepper__number,
-      .input-stepper__button--minus:hover:not(:disabled),
-      .input-stepper__button--plus:hover:not(:disabled),
       .input-stepper__button--minus:active:not(:disabled),
       .input-stepper__button--plus:active:not(:disabled) {
         border-color: var(--color-border-negative);
       }
+
+      @media (hover: hover) and (pointer: fine) {
+        .input-stepper__button--minus:hover:not(:disabled),
+        .input-stepper__button--plus:hover:not(:disabled) {
+          border-color: var(--color-border-negative);
+        }
+      }
     }
 
     &__button--minus:disabled,
@@ -126,13 +131,15 @@
       }
     }
 
-    &__button--minus:hover:not(:disabled),
-    &__button--plus:hover:not(:disabled) {
-      background-color: var(--color-fill-contrast);
-      border-color: var(--color-fill-contrast);
+    @media (hover: hover) and (pointer: fine) {
+      &__button--minus:hover:not(:disabled),
+      &__button--plus:hover:not(:disabled) {
+        background-color: var(--color-fill-contrast);
+        border-color: var(--color-fill-contrast);
 
-      &::before {
-        background-color: var(--color-fill-primary);
+        &::before {
+          background-color: var(--color-fill-primary);
+        }
       }
     }
 

package/src/components/Link/styles/mixins.scss

@@ -4,7 +4,6 @@
 @mixin base {
   font-weight: bold;
   text-decoration: underline;
-  text-underline-offset: 0.1em;
   color: inherit;
   background: none;
   cursor: pointer;

package/src/components/Megamenu/Megamenu.tsx

@@ -414,9 +414,9 @@ export const Megamenu = ({
           aria-labelledby={ids.mobileMainTitleId}
           aria-hidden="true"
         >
-          <h2 id={ids.mobileMainTitleId} className="sr-only">
+          <span id={ids.mobileMainTitleId} className="sr-only">
             Hlavné menu
-          </h2>
+          </span>
           <button
             aria-label="Zatvoriť menu"
             className={CLASS_MOBILE_OVERLAY}

package/src/components/Megamenu/MegamenuBlog.tsx

@@ -325,9 +325,9 @@ export const MegamenuBlog = ({
           aria-labelledby={ids.mobileMainTitleId}
           aria-hidden="true"
         >
-          <h2 id={ids.mobileMainTitleId} className="sr-only">
+          <span id={ids.mobileMainTitleId} className="sr-only">
             Hlavné menu
-          </h2>
+          </span>
           <button
             aria-label="Zatvoriť menu"
             className={CLASS_MOBILE_OVERLAY}

package/src/components/Megamenu/styles/mixins.scss

@@ -59,7 +59,7 @@
     font-size: inherit;
     text-decoration: underline;
     text-underline-offset: convert.to-rem(2px);
-    text-decoration-thickness: 1px;
+    text-decoration-thickness: auto;
 
     &:hover,
     &:focus,
@@ -630,7 +630,8 @@
 @mixin mobile-account-logout {
   display: inline-block;
   text-decoration: underline;
-  text-underline-offset: convert.to-rem(4px);
+  text-underline-offset: convert.to-rem(2px);
+  text-decoration-thickness: auto;
   margin-bottom: convert.to-rem(20px);
   font-weight: 400 !important;
 }
@@ -665,8 +666,15 @@
 }
 
 @mixin mobile-account-link {
-  text-decoration: underline;
-  text-underline-offset: convert.to-rem(4px);
+  text-decoration: none !important;
+
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: underline !important;
+    text-underline-offset: convert.to-rem(2px);
+    text-decoration-thickness: auto;
+  }
 }
 
 @mixin container {
@@ -696,7 +704,7 @@
   a:focus {
     text-decoration: underline;
     text-underline-offset: convert.to-rem(2px);
-    text-decoration-thickness: 1px;
+    text-decoration-thickness: auto;
   }
 
   @include breakpoint.get("md", "down") {
@@ -709,19 +717,15 @@
 }
 
 @mixin text-large {
-  font-size: convert.to-rem(18px) !important;
+  font-size: convert.to-rem(28px) !important;
+  line-height: convert.to-rem(32px);
   font-weight: 700;
-  line-height: convert.to-rem(22px);
-
-  @include breakpoint.get("md", "down") {
-    font-size: convert.to-rem(24px) !important;
-    line-height: convert.to-rem(28px);
-  }
 }
 
 @mixin caption {
   @include generate.css-map(typographyConfig.$caption, "default");
   margin-top: 0;
+  margin-bottom: convert.to-rem(20px);
 }
 
 @mixin caption-large {
@@ -817,6 +821,10 @@
 @mixin accordion {
   @include accordion.base;
   margin-bottom: 0px !important;
+
+  a {
+    text-decoration: none !important;
+  }
 }
 
 @mixin accordion-item {

package/src/components/Preview/CodeExample.tsx

@@ -6,16 +6,78 @@ import unescape from "unescape-html";
 import { formatHTML } from "../../utils/formatCode";
 import { Button } from "../Button";
 import Code from "../Code/";
+import { getElementDisplayName } from "./getElementDisplayName";
 
 interface CodeExampleProps {
   codeJSXOptions?: Record<string, any>;
   codeTypes?: string[];
   children?: ReactNode;
+  htmlThemeClass?: string;
   jsxCode?: string; // Pre-generated JSX string (from server-side PreviewAuto)
   htmlCode?: ReactNode; // Code for HTML rendering
   [key: string]: any;
 }
 
+const addClassToOpeningTag = (tag: string, className: string): string => {
+  if (tag.includes(' class="')) {
+    return tag.replace(/ class="([^"]*)"/, (_, existingClassName) => {
+      const mergedClassName = [existingClassName, className]
+        .filter(Boolean)
+        .join(" ");
+      return ` class="${mergedClassName}"`;
+    });
+  }
+
+  return tag.replace(/^<([\w-]+)/, `<$1 class="${className}"`);
+};
+
+const applyThemeClassToMarkup = (
+  markup: string,
+  themeClass?: string,
+  wrapMultipleRoots = false,
+): string => {
+  if (!themeClass || !markup.trim()) {
+    return markup;
+  }
+
+  if (wrapMultipleRoots) {
+    return `<div class="${themeClass}">${markup}</div>`;
+  }
+
+  return markup.replace(/^<[^>]+>/, (openingTag) =>
+    addClassToOpeningTag(openingTag, themeClass),
+  );
+};
+
+const renderMarkupToHtml = (markup: ReactNode, themeClass?: string): string => {
+  if (!markup) {
+    return "";
+  }
+
+  if (typeof markup === "string") {
+    return markup;
+  }
+
+  if (Array.isArray(markup)) {
+    const renderedMarkup = markup
+      .map((markupItem) =>
+        renderToStaticMarkup(markupItem as React.ReactElement),
+      )
+      .join("");
+
+    return applyThemeClassToMarkup(
+      renderedMarkup,
+      themeClass,
+      markup.length > 1,
+    );
+  }
+
+  return applyThemeClassToMarkup(
+    renderToStaticMarkup(markup as React.ReactElement),
+    themeClass,
+  );
+};
+
 /**
  * Remove props that are undefined or null
  * Don't show React.Fragment in code example
@@ -68,25 +130,7 @@ const getJSXAsStringFromMarkup = (
     showDefaultProps: false,
     showFunctions: true,
     functionValue: (fn: any) => fn.name,
-    displayName: (ReactElement: any) => {
-      // Try to get display name from various sources
-      if (ReactElement.props && ReactElement.props.mdxType) {
-        return ReactElement.props.mdxType;
-      }
-      if (ReactElement.type && ReactElement.type.displayName) {
-        return ReactElement.type.displayName;
-      }
-      if (ReactElement.type && ReactElement.type.name) {
-        return ReactElement.type.name;
-      }
-      if (typeof ReactElement.type === "string") {
-        return ReactElement.type;
-      }
-      // Fallback to type name or 'Component'
-      return (
-        ReactElement.type?.displayName || ReactElement.type?.name || "Component"
-      );
-    },
+    displayName: getElementDisplayName,
     filterProps: ["mdxType", "originalType", ...filterProps],
     ...otherOptions,
   };
@@ -124,6 +168,7 @@ const CodeExample: React.FC<CodeExampleProps> = ({
   children,
   codeJSXOptions,
   codeTypes = ["html", "jsx"],
+  htmlThemeClass,
   jsxCode,
   htmlCode,
   ...other
@@ -184,18 +229,14 @@ const CodeExample: React.FC<CodeExampleProps> = ({
           typeof htmlCode === "string"
             ? unescape(htmlCode)
             : unescape(
-                formatHTML(
-                  renderToStaticMarkup(htmlCode as React.ReactElement),
-                ),
+                formatHTML(renderMarkupToHtml(htmlCode, htmlThemeClass)),
               );
       } else {
         codeToShow =
           typeof children === "string"
             ? unescape(children)
             : unescape(
-                formatHTML(
-                  renderToStaticMarkup(children as React.ReactElement),
-                ),
+                formatHTML(renderMarkupToHtml(children, htmlThemeClass)),
               );
       }
       break;

package/src/components/Preview/Preview.tsx

@@ -3,6 +3,7 @@
 import type { ReactNode } from "react";
 import React from "react";
 import reactElementToJSXString from "react-element-to-jsx-string";
+import { getElementDisplayName } from "./getElementDisplayName";
 import { PreviewGenerator } from "./PreviewGenerator";
 
 type PreviewProps = React.ComponentProps<typeof PreviewGenerator> & {
@@ -51,21 +52,27 @@ export function Preview({
   codeTypes = ["html", "jsx"],
   ...rest
 }: PreviewProps) {
+  const normalizedChildren = React.Children.toArray(children);
+  const normalizedCode =
+    rest.code == null
+      ? undefined
+      : typeof rest.code === "string" || typeof rest.code === "function"
+        ? rest.code
+        : React.Children.toArray(rest.code);
+  const jsxSource =
+    normalizedCode &&
+    typeof normalizedCode !== "string" &&
+    typeof normalizedCode !== "function"
+      ? normalizedCode
+      : normalizedChildren;
+  const hasMultipleCodeRoots = React.Children.count(jsxSource) > 1;
+
   // Generate JSX string on server
-  const jsxCode = generateJSXString(children, {
+  const jsxCode = generateJSXString(jsxSource, {
     showDefaultProps: false,
     showFunctions: true,
     functionValue: (fn: any) => fn.name || "Function",
-    displayName: (el: any) => {
-      // More robust display name handling
-      if (!el) return "Unknown";
-      return (
-        el?.props?.mdxType ||
-        el?.type?.displayName ||
-        el?.type?.name ||
-        (typeof el?.type === "string" ? el.type : "Component")
-      );
-    },
+    displayName: getElementDisplayName,
     filterProps: ["mdxType", "originalType"],
     useBooleanShorthandSyntax: false,
     sortProps: false,
@@ -74,8 +81,14 @@ export function Preview({
 
   // Pass the pre-generated JSX code to PreviewGenerator
   return (
-    <PreviewGenerator {...rest} jsxCode={jsxCode} codeTypes={codeTypes}>
-      {children}
+    <PreviewGenerator
+      {...rest}
+      code={normalizedCode}
+      hasMultipleCodeRoots={hasMultipleCodeRoots}
+      jsxCode={jsxCode}
+      codeTypes={codeTypes}
+    >
+      {normalizedChildren}
     </PreviewGenerator>
   );
 }

package/src/components/Preview/PreviewGenerator.tsx

@@ -17,6 +17,7 @@ import { Card } from "../Card";
 import { Dropdown, DropdownItem } from "../Dropdown";
 import { Icon } from "../Icon";
 import CodeExample from "./CodeExample";
+import { getElementDisplayName } from "./getElementDisplayName";
 import PreviewTitleBar from "./PreviewTitleBar";
 
 import "./styles/style.scss";
@@ -32,16 +33,7 @@ const generateJSXString = (
     showDefaultProps: false,
     showFunctions: true,
     functionValue: (fn: any) => fn.name || "Function",
-    displayName: (el: any) => {
-      // More robust display name handling
-      if (!el) return "Unknown";
-      return (
-        el?.props?.mdxType ||
-        el?.type?.displayName ||
-        el?.type?.name ||
-        (typeof el?.type === "string" ? el.type : "Component")
-      );
-    },
+    displayName: getElementDisplayName,
     filterProps: ["mdxType", "originalType"],
     useBooleanShorthandSyntax: false,
     sortProps: false,
@@ -116,7 +108,6 @@ const PREVIEW_BREAKPOINTS: PreviewBreakpoint[] = [
 ];
 
 const IFRAME_VIEWPORT_GUTTER = 16;
-
 const getScreenLikeMinHeight = (width: number | null): number => {
   if (width === null) {
     return 1;
@@ -284,6 +275,7 @@ interface PreviewProps {
   codeTypes?: string[];
   enableFullscreen?: boolean;
   hasCodePreview?: boolean;
+  hasMultipleCodeRoots?: boolean;
   html?: string;
   jsxCode?: string; // Pre-generated JSX string (from server component)
   disableBreakpoints?: boolean;
@@ -344,6 +336,7 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
   codeTypes = ["html", "jsx"],
   enableFullscreen = true,
   hasCodePreview = true,
+  hasMultipleCodeRoots = false,
   html,
   jsxCode,
   isDark = false,
@@ -419,6 +412,33 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
 
   const themeClass = isDarkMode ? "is-dark" : "is-light";
   const bgClass = getBgClassFromName(previewBackground.label);
+  const applyThemeClassToJsxCode = (value?: string): string | undefined => {
+    if (!value) return value;
+
+    const trimmedValue = value.trim();
+    if (!trimmedValue) return trimmedValue;
+
+    if (hasMultipleCodeRoots) {
+      return `<div className="${themeClass}">\n${trimmedValue}\n</div>`;
+    }
+
+    return trimmedValue.replace(
+      /^<([A-Za-z][\w.]*)((?:\s+[\s\S]*?)?)\s*(\/?)>/,
+      (_, tagName: string, rawAttrs = "", selfClosing = "") => {
+        const attrs = rawAttrs || "";
+
+        if (/\sclassName=/.test(attrs)) {
+          return `<${tagName}${attrs.replace(
+            /className=(['"])(.*?)\1/,
+            (_match: string, quote: string, className: string) =>
+              `className=${quote}${className} ${themeClass}${quote}`,
+          )}${selfClosing ? " /" : ""}>`;
+        }
+
+        return `<${tagName}${attrs}\n  className="${themeClass}"${selfClosing ? " /" : ""}>`;
+      },
+    );
+  };
 
   const classes = cx(CLASS_ROOT, themeClass, bgClass, className);
   const wrapperClasses = cx("previewWrapper", {
@@ -534,28 +554,36 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
       ? children(renderAsFunctionContext)
       : children;
 
-  // Wrap the component to ensure theme classes are applied to the root element
-  const wrapComponentWithTheme = (component: ReactNode) => {
+  const wrapRenderedComponentWithTheme = (component: ReactNode) => {
     if (!component) return component;
 
-    // If it's a single React element, clone it with additional classes
-    if (React.isValidElement(component)) {
-      const props = component.props as any;
-      const existingClassName = props.className || "";
-      const newClassName = cx(existingClassName, themeClass);
+    // Keep wrapper shape stable across SSR/hydration and avoid cloning RSC children.
+    return <div className={cx(themeClass)}>{component}</div>;
+  };
 
-      return React.cloneElement(component, {
+  const wrapCodeWithTheme = (component: ReactNode) => {
+    if (!component) return component;
+
+    const normalizedChildren = React.Children.toArray(component);
+
+    if (
+      normalizedChildren.length === 1 &&
+      React.isValidElement(normalizedChildren[0])
+    ) {
+      const element = normalizedChildren[0] as React.ReactElement<any>;
+      const props = element.props as { className?: string };
+
+      return React.cloneElement(element, {
         ...props,
-        className: newClassName,
-      } as any);
+        className: cx(props.className, themeClass),
+      });
     }
 
-    // For multiple elements or other cases, wrap in a div with theme classes
     return <div className={cx(themeClass)}>{component}</div>;
   };
 
   const toRender = childrenToRender ? (
-    wrapComponentWithTheme(childrenToRender)
+    wrapRenderedComponentWithTheme(childrenToRender)
   ) : html ? (
     <div
       className={cx(themeClass)}
@@ -574,22 +602,18 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
     html;
 
   // Apply the exact same wrapping logic for code display
-  const toCode = codeContent
-    ? wrapComponentWithTheme(codeContent)
-    : codeContent;
+  const toCode = codeContent ? wrapCodeWithTheme(codeContent) : codeContent;
 
   // Generate JSX string for the JSX tab
   // Use pre-generated JSX if provided (from server), otherwise generate client-side
   const generatedJSXCode =
-    jsxCode ||
-    (typeof code === "string"
+    typeof code === "string"
       ? code
-      : toCode
-        ? generateJSXString(toCode, codeJSXOptions)
-        : "");
+      : applyThemeClassToJsxCode(jsxCode) ||
+        (toCode ? generateJSXString(toCode, codeJSXOptions) : "");
 
   // Use toCode for HTML rendering
-  const codeForHTML = toCode;
+  const codeForHTML = codeContent;
 
   const previewViewportWidth = disableBreakpoints
     ? null
@@ -636,6 +660,7 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
           <CodeExample
             codeJSXOptions={codeJSXOptions}
             codeTypes={codeTypes}
+            htmlThemeClass={themeClass}
             jsxCode={generatedJSXCode}
             htmlCode={codeForHTML}
           >

package/src/components/Preview/getElementDisplayName.ts

@@ -0,0 +1,25 @@
+export const getElementDisplayName = (element: any): string => {
+  if (!element) return "Unknown";
+
+  const type = element.type;
+  const clientReferenceId =
+    typeof type?.$$id === "string" ? type.$$id.split("#").pop() : undefined;
+  const payloadValue = type?._payload?.value;
+  const payloadName =
+    typeof payloadValue === "string"
+      ? payloadValue.split("#").pop()
+      : payloadValue?.name;
+
+  return (
+    element?.props?.mdxType ||
+    type?.displayName ||
+    type?.render?.displayName ||
+    type?.render?.name ||
+    type?.name ||
+    type?.type?.displayName ||
+    type?.type?.name ||
+    clientReferenceId ||
+    payloadName ||
+    (typeof type === "string" ? type : "Component")
+  );
+};

package/src/components/Stepbar/styles/config.scss

@@ -5,10 +5,14 @@
 $item-base: (
   display: inline-flex,
   align-items: center,
-  padding-top: space.get("small"),
-  padding-bottom: space.get("small"),
+  padding-top: convert.to-rem(10px),
+  padding-bottom: convert.to-rem(10px),
   margin: 0 0 0 space.get("xsmall"),
-  color: var(--color-text-default),
+  color: var(--stepbar-item-color),
+  background: var(--stepbar-item-background),
+  --stepbar-arrow-size: #{convert.to-rem(21px)},
+  --stepbar-item-background: var(--color-surface-contrast),
+  --stepbar-item-color: var(--color-text-inverse),
 );
 
 $arrow-spacing-small: (
@@ -26,8 +30,8 @@ $arrow-spacing-small: (
 
 $arrow-spacing: (
   default: (
-    padding-left: convert.to-rem(40px),
-    padding-right: convert.to-rem(19px),
+    padding-left: convert.to-rem(35px),
+    padding-right: convert.to-rem(30px),
   ),
   first: (
     padding-left: convert.to-rem(35px),
@@ -40,43 +44,56 @@ $arrow-spacing: (
 $arrows: (
   default: (
     done:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23141414'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='%23141414'/%3E%3C/svg%3E"),
     current:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23F16E00'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='%23f15e00'/%3E%3C/svg%3E"),
     next:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23eee'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='%23dddddd'/%3E%3C/svg%3E"),
   ),
   inverse: (
     done:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='%23141414'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='white'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='%23141414'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='white'/%3E%3C/svg%3E"),
     current:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='%23141414'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23F16E00'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='%23141414'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='%23f15e00'/%3E%3C/svg%3E"),
     next:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='%23141414'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23eee'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='%23141414'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='%23595959'/%3E%3C/svg%3E"),
   ),
 );
 
 $item-done-colors: (
   default: (
-    background: var(--color-surface-contrast),
+    --stepbar-item-background: var(--color-surface-contrast),
+    --stepbar-item-color: var(--color-text-inverse),
+  ),
+  inverse: (
+    --stepbar-item-background: var(--color-surface-contrast),
+    --stepbar-item-color: var(--color-text-inverse),
   ),
 );
 
 $item-colors: (
   current: (
-    background: var(--color-surface-tertiary),
-    color: var(--color-text-default),
+    --stepbar-item-background: var(--color-surface-tertiary),
+    --stepbar-item-color: #{color.$white},
   ),
   next: (
-    background: var(--color-surface-subtle),
-    color: var(--color-surface-contrast),
+    --stepbar-item-background: var(--color-surface-moderate),
+    --stepbar-item-color: var(--color-text-default),
   ),
 );
 
 $link-colors: (
   default: (
     base: (
-      color: var(--color-text-inverse),
+      color: var(--stepbar-item-color),
+    ),
+    interaction: (
+      color: var(--color-text-accent),
+    ),
+  ),
+  inverse: (
+    base: (
+      color: var(--stepbar-item-color),
     ),
     interaction: (
       color: var(--color-text-accent),

package/src/components/Stepbar/styles/mixins.scss

@@ -4,7 +4,7 @@
 @use "../../../styles/tools/generate";
 @use "../../../styles/tools/map";
 @use "../../../styles/tokens/breakpoint";
-@use "../../../styles/typography/mixins" as typoMixins;
+@use "../../../styles/typography/config" as typographyConfig;
 @use "./config";
 
 @mixin list-base {
@@ -14,6 +14,7 @@
   padding-left: 0;
   margin: 0 0 space.get("large") 0;
   max-width: none;
+  @include generate.css-map(sass-map.get(typographyConfig.$caption, "large"));
   font-weight: bold;
 }
 
@@ -65,10 +66,11 @@
     position: absolute;
     z-index: 1;
     top: 0;
-    right: -21px;
-    width: 21px;
+    right: calc(var(--stepbar-arrow-size) * -1);
+    width: var(--stepbar-arrow-size);
     height: 100%;
     background-size: 100% 100%;
+    pointer-events: none;
   }
 }