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

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;
@@ -305,11 +297,10 @@ const getBackgroundsAsArray = (
     return acc;
   }, []);
 
-// Map names to only the 6 allowed background classes
+// Map names to allowed background/surface classes
 const getBgClassFromName = (name: string): string => {
   const normalized = name.toLowerCase().replace(/\s+/g, "-");
 
-  // Only allow these background classes
   const allowedBackgrounds = [
     "background-primary",
     "background-secondary",
@@ -318,6 +309,13 @@ const getBgClassFromName = (name: string): string => {
     "background-accent1-blog",
     "background-accent2-blog",
     "background-none",
+    "surface-primary",
+    "surface-secondary",
+    "surface-tertiary",
+    "surface-subtle",
+    "surface-moderate",
+    "surface-contrast",
+    "surface-accent",
   ];
 
   // Return the class if it's in the allowed list, otherwise default to background-primary
@@ -335,6 +333,13 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
     "Background Accent": "background-accent",
     "Background Accent1 Blog": "background-accent1-blog",
     "Background Accent2 Blog": "background-accent2-blog",
+    "Surface Primary": "surface-primary",
+    "Surface Secondary": "surface-secondary",
+    "Surface Tertiary": "surface-tertiary",
+    "Surface Subtle": "surface-subtle",
+    "Surface Moderate": "surface-moderate",
+    "Surface Contrast": "surface-contrast",
+    "Surface Accent": "surface-accent",
   },
   bgThemeExcludedColors = [],
   children,
@@ -344,6 +349,7 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
   codeTypes = ["html", "jsx"],
   enableFullscreen = true,
   hasCodePreview = true,
+  hasMultipleCodeRoots = false,
   html,
   jsxCode,
   isDark = false,
@@ -419,6 +425,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 +567,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 +615,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 +673,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/PromotionCard/styles/mixins.scss

@@ -12,7 +12,8 @@
   flex-direction: column;
   border: 1px solid var(--color-border-subtle);
 
-  &.bg-black {
+  &.background-contrast,
+  &.surface-contrast {
     border: 1px solid var(--color-icon-default);
   }
 

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

@@ -4,6 +4,23 @@
 @use "../../../styles/tools/map";
 @use "./config";
 
+$section-spacing-colors: (
+  background-primary,
+  background-secondary,
+  background-contrast,
+  background-accent,
+  background-accent1-blog,
+  background-accent2-blog,
+  background-none,
+  surface-primary,
+  surface-secondary,
+  surface-tertiary,
+  surface-subtle,
+  surface-moderate,
+  surface-contrast,
+  surface-accent
+);
+
 @mixin base {
   background-color: var(--color-background-primary);
 }
@@ -13,15 +30,20 @@
 }
 
 @mixin spacing-rules($config: config.$spacing) {
-  &:not([class*="bg-"]) + &:not([class*="bg-"]),
-  &[class~="bg-black"] + &[class~="bg-black"],
-  &[class~="bg-white"] + &[class~="bg-white"],
-  &[class~="bg-orange"] + &[class~="bg-orange"],
-  &[class~="bg-gray"] + &[class~="bg-gray"] {
+  &:not([class*="background-"]):not([class*="surface-"])
+    + &:not([class*="background-"]):not([class*="surface-"]) {
     &:not(.section--default) {
       @include spacing("small");
     }
   }
+
+  @each $color in $section-spacing-colors {
+    &[class~="#{$color}"] + &[class~="#{$color}"] {
+      &:not(.section--default) {
+        @include spacing("small");
+      }
+    }
+  }
 }
 
 @mixin image-stuck-to-bottom($config: config.$stuck-image-spacing) {

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

@@ -160,8 +160,8 @@ $social-colors: (
     ),
     hover: (
       color: color.$white "!important",
-      background-color: #f16e00,
-      border-color: #f16e00,
+      background-color: var(--color-icon-brand),
+      border-color: var(--color-icon-brand),
     ),
     pressed: (
       color: var(--color-text-inverse) "!important",

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;
   }
 }
 

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

@@ -37,7 +37,8 @@
         @include mixins.item-color("default", "next");
       }
 
-      .bg-black &,
+      .background-contrast &,
+      .surface-contrast &,
       .is-dark & {
         @include mixins.item-color("inverse", "done");
 
@@ -68,7 +69,8 @@
       @include mixins.link-overlay();
       @include mixins.link-underline();
 
-      .bg-black &,
+      .background-contrast &,
+      .surface-contrast &,
       .is-dark & {
         @include mixins.link-color("inverse");
       }

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

@@ -1,7 +1,9 @@
+@use "sass:map";
 @use "./config";
 @use "../../../styles/tokens/color";
 @use "../../../styles/tokens/space";
-@use "../../../styles/tools/convert";
+@use "../../../styles/tools/generate";
+@use "../../../styles/typography/config" as typography;
 
 @mixin base {
   width: 100%;
@@ -12,8 +14,9 @@
 @mixin cells {
   padding: space.get("medium");
   vertical-align: middle;
-  font-size: inherit;
-  line-height: inherit;
+  @include generate.responsive-css-map(
+    map.get(typography.$body-text, "default")
+  );
 }
 
 @mixin header-cells {