feat: Make empty style panel sections easier to recognize as empty (#4497)

## Description

1. Its easier to scan the panel when titles are dimmed if there is
nothing in the content of that section
2. when section has nothing it shouldn't have a chevron on hover

<img width="252" alt="image"
src="https://github.com/user-attachments/assets/75bfb06e-ceec-4659-a836-02c8dacf8217">
<img width="250" alt="image"
src="https://github.com/user-attachments/assets/39ba04c8-7b2e-4099-83df-94567c963038">


## Steps for reproduction

1. click button
3. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

apps/builder/app/builder/features/style-panel/sections/backgrounds/backgrounds.tsx

@@ -36,6 +36,7 @@ export const Section = () => {
       onAdd={() => {
         addRepeatedStyleItem(styles, parseCssFragment("none", ["background"]));
       }}
+      collapsible
     >
       <Flex gap={1} direction="column">
         <RepeatedStyle

apps/builder/app/builder/features/style-panel/sections/transforms/transforms.tsx

@@ -147,6 +147,7 @@ export const Section = () => {
       styles,
     })
   );
+  const dots = getDots(styles);
 
   return (
     <CollapsibleSectionRoot
@@ -156,7 +157,9 @@ export const Section = () => {
       onOpenChange={setIsOpen}
       trigger={
         <SectionTitle
-          dots={getDots(styles)}
+          inactive={dots.length === 0}
+          collapsible={dots.length !== 0}
+          dots={dots}
           suffix={
             <Flex gap="1" align="center">
               <TransformAdvancedPopover />

apps/builder/app/builder/features/style-panel/sections/transitions/transitions.tsx

@@ -93,6 +93,7 @@ export const Section = () => {
     selectedOrLastStyleSourceSelector &&
     selectedOrLastStyleSourceSelector.state === undefined;
   const styles = useComputedStyles(transitionLongHandProperties);
+  const dots = getDots(styles);
 
   return (
     <CollapsibleSectionRoot
@@ -102,7 +103,9 @@ export const Section = () => {
       onOpenChange={setIsOpen}
       trigger={
         <SectionTitle
-          dots={getDots(styles)}
+          inactive={dots.length === 0}
+          collapsible={dots.length !== 0}
+          dots={dots}
           suffix={
             <Tooltip
               content={

apps/builder/app/builder/features/style-panel/shared/style-section.tsx

@@ -23,7 +23,7 @@ export const getDots = (styles: ComputedStyleDecl[]) => {
       styleDecl.usedValue.type === "unparsed" ||
       styleDecl.usedValue.type === "guaranteedInvalid"
     ) {
-      return;
+      return [];
     }
 
     const source = styleDecl.source.name;
@@ -66,12 +66,16 @@ export const RepeatedStyleSection = (props: {
   label: string;
   description: string;
   properties: [StyleProperty, ...StyleProperty[]];
+  collapsible?: boolean;
   onAdd: () => void;
   children: ReactNode;
 }) => {
-  const { label, description, children, properties, onAdd } = props;
+  const { label, description, children, properties, onAdd, collapsible } =
+    props;
   const [isOpen, setIsOpen] = useOpenState(props);
   const styles = useComputedStyles(properties);
+  const dots = getDots(styles);
+
   return (
     <CollapsibleSectionRoot
       fullWidth
@@ -80,6 +84,8 @@ export const RepeatedStyleSection = (props: {
       onOpenChange={setIsOpen}
       trigger={
         <SectionTitle
+          inactive={dots.length === 0}
+          collapsible={collapsible}
           dots={getDots(styles)}
           suffix={
             <SectionTitleButton

packages/design-system/src/components/label.tsx

@@ -16,6 +16,7 @@ export const labelColors = [
   "overwritten",
   "remote",
   "code",
+  "inactive",
 ] as const;
 
 const StyledLabel = styled(RadixLabel, {
@@ -96,6 +97,13 @@ const StyledLabel = styled(RadixLabel, {
           backgroundColor: theme.colors.backgroundHover,
         },
       },
+      // Example is collapsible section title label when section has no content.
+      inactive: {
+        color: theme.colors.foregroundTextSubtle,
+        "&:hover": {
+          color: theme.colors.foregroundMain,
+        },
+      },
     },
     truncate: {
       true: {

packages/design-system/src/components/nested-icon-label.tsx

@@ -44,6 +44,12 @@ const colors = {
     backgroundHover: theme.colors.backgroundHover,
     icon: theme.colors.foregroundIconMain,
   },
+  inactive: {
+    border: "transparent",
+    background: "transparent",
+    backgroundHover: "transparent",
+    icon: theme.colors.foregroundSubtle,
+  },
 } as const;
 
 const perColorStyle = (color: (typeof labelColors)[number]) => ({
@@ -77,6 +83,7 @@ const style = css({
       overwritten: perColorStyle("overwritten"),
       remote: perColorStyle("remote"),
       code: perColorStyle("code"),
+      inactive: perColorStyle("inactive"),
     },
   },
   defaultVariants: { color: "default" },

packages/design-system/src/components/section-title.stories.tsx

@@ -17,19 +17,22 @@ const Wrap = ({ children }: { children: React.ReactNode }) => (
 
 const Variants = ({
   state,
+  inactive,
 }: {
   state: ComponentProps<typeof SectionTitle>["data-state"];
+  inactive?: ComponentProps<typeof SectionTitle>["inactive"];
 }) => (
   <>
     <Wrap>
-      <SectionTitle data-state={state}>
+      <SectionTitle data-state={state} inactive={inactive}>
         <SectionTitleLabel>Simplest</SectionTitleLabel>
       </SectionTitle>
     </Wrap>
     <Wrap>
       <SectionTitle
         suffix={<SectionTitleButton prefix={<PlusIcon />} />}
         data-state={state}
+        inactive={inactive}
       >
         <SectionTitleLabel>With button</SectionTitleLabel>
       </SectionTitle>
@@ -39,6 +42,7 @@ const Variants = ({
         dots={["local", "remote"]}
         suffix={<SectionTitleButton prefix={<PlusIcon />} />}
         data-state={state}
+        inactive={inactive}
       >
         <SectionTitleLabel>With dots</SectionTitleLabel>
       </SectionTitle>
@@ -48,6 +52,7 @@ const Variants = ({
         dots={["local"]}
         suffix={<SectionTitleButton prefix={<PlusIcon />} />}
         data-state={state}
+        inactive={inactive}
       >
         <SectionTitleLabel color="local">With label</SectionTitleLabel>
       </SectionTitle>
@@ -57,14 +62,15 @@ const Variants = ({
         dots={["local", "remote"]}
         suffix={<SectionTitleButton prefix={<PlusIcon />} />}
         data-state={state}
+        inactive={inactive}
       >
         <SectionTitleLabel>
           Some title so long that it cannot possibly fit
         </SectionTitleLabel>
       </SectionTitle>
     </Wrap>
     <Wrap>
-      <SectionTitle data-state={state}>
+      <SectionTitle data-state={state} inactive={inactive}>
         <SectionTitleLabel>
           Some title so long that it cannot possibly fit
         </SectionTitleLabel>
@@ -100,6 +106,12 @@ export const Demo = () => (
         <Variants state="open" />
       </StoryGrid>
     </StorySection>
+
+    <StorySection title="Inactive">
+      <StoryGrid>
+        <Variants inactive state="closed" />
+      </StoryGrid>
+    </StorySection>
   </>
 );
 

packages/design-system/src/components/section-title.tsx

@@ -75,11 +75,12 @@ const chevronStyle = css({
   transition: "transform 150ms, opacity 200ms",
   color: theme.colors.backgroundIconSubtle,
   variants: {
-    state: {
+    openState: {
       open: {
         transform: "rotate(90deg)",
       },
       closed: {},
+      inactive: {},
     },
   },
 });
@@ -100,8 +101,12 @@ const dotStyle = css({
   },
 });
 
-const context = createContext<{ state: "open" | "closed" }>({
-  state: "closed",
+const context = createContext<{
+  openState: "open" | "closed";
+  inactive: boolean;
+}>({
+  openState: "closed",
+  inactive: false,
 });
 
 export const SectionTitle = forwardRef(
@@ -112,8 +117,12 @@ export const SectionTitle = forwardRef(
       css,
       children,
       suffix,
+      inactive = false,
+      collapsible = true,
       ...props
     }: ComponentProps<"button"> & {
+      inactive?: boolean;
+      collapsible?: boolean;
       /** https://www.radix-ui.com/docs/primitives/components/collapsible#trigger */
       "data-state"?: "open" | "closed";
       dots?: Array<"local" | "overwritten" | "remote">;
@@ -123,34 +132,39 @@ export const SectionTitle = forwardRef(
     },
     ref: Ref<HTMLButtonElement>
   ) => {
-    const state = props["data-state"] ?? "closed";
-    const finalDots = state === "open" ? [] : (dots ?? []);
+    const openState = props["data-state"] ?? "closed";
+    const finalDots = openState === "open" ? [] : (dots ?? []);
 
     return (
-      <context.Provider value={{ state }}>
+      <context.Provider value={{ openState, inactive }}>
         <ArrowFocus
           render={({ handleKeyDown }) => (
             <Flex
               align="center"
-              className={containerStyle({ className, css })}
-              data-state={state}
+              className={containerStyle({
+                className,
+                css,
+                color: inactive ? "disabled" : "default",
+              })}
+              data-state={openState}
               onKeyDown={handleKeyDown}
             >
-              <button
-                className={titleButtonStyle()}
-                data-state={state}
-                ref={ref}
-                {...props}
-              >
-                <ChevronRightIcon className={chevronStyle({ state })} />
-              </button>
-
+              {collapsible && (
+                <button
+                  className={titleButtonStyle()}
+                  data-state={openState}
+                  ref={ref}
+                  {...props}
+                >
+                  <ChevronRightIcon className={chevronStyle({ openState })} />
+                </button>
+              )}
               {/*
                 If the label is itself a button, we don't want to nest a button inside another button.
                 Therefore, we render the label in a layer above the SectionTitle button
               */}
               <div className={labelContainerStyle()}>
-                <div className={titleButtonLayoutStyle()}>
+                <div className={titleButtonLayoutStyle({ openState })}>
                   {children}
 
                   {finalDots.length > 0 && (
@@ -187,11 +201,14 @@ export const SectionTitleLabel = forwardRef(
     }: Omit<ComponentProps<typeof Label>, "truncate" | "text">,
     ref: Ref<HTMLLabelElement>
   ) => {
-    const { state } = useContext(context);
+    const { openState, inactive } = useContext(context);
 
     const commonCss = { flex: "0 1 auto" };
-
-    const color = state === "closed" ? undefined : props.color;
+    const color = inactive
+      ? "inactive"
+      : openState === "closed"
+        ? "default"
+        : props.color;
 
     const isButton = isLabelButton(color);
 
@@ -202,9 +219,13 @@ export const SectionTitleLabel = forwardRef(
         {...props}
         color={color}
         css={{
-          color: state === "closed" ? `var(${labelTextColor})` : undefined,
+          color:
+            openState === "closed" && inactive === false
+              ? `var(${labelTextColor})`
+              : undefined,
           ...commonCss,
           ...css,
+
           // When we use a SectionTitle button, we can't directly render a label inside it.
           // Instead, we need to render the label using a div that has position:absolute and pointer-events:none
           // However, if the label itself is a button, we need to make sure that it remains clickable.