proto-plugin 0.1.0 → 0.1.2

package/src/components/prototypes/prototype-design-brief-panel.tsx

@@ -1,19 +1,27 @@
 "use client";
 
 import { Button } from "@prototype/components/ui/button";
-import { PrototypeComponent } from "@prototype/components/prototypes/prototype-target";
+import { Switch } from "@prototype/components/ui/switch";
+import {
+  PrototypeComponent,
+  usePrototypeSlug,
+} from "@prototype/components/prototypes/prototype-target";
+import { PrototypeBriefTextarea } from "@prototype/components/prototypes/prototype-brief-field";
 import { PrototypeDesignContextPanel } from "@prototype/components/prototypes/prototype-design-context-panel";
 import { PrototypeMobbinGallery } from "@prototype/components/prototypes/prototype-mobbin-gallery";
-import { PrototypeVariantRationalePanel } from "@prototype/components/prototypes/prototype-variant-rationale-panel";
 import {
+  buildMoreDesignExplorationVariantsCopyText,
   buildResetBriefDefaultsPrompt,
+  buildSetDefaultVariantPrompt,
+  getDesignExplorationDisplayOptions,
+  getDesignExplorationVariantOptions,
+  resolveDesignExplorationBaselineOption,
+  type DesignExplorationBaselineOption,
   type DesignExplorationBrief,
   type DesignExplorationContext,
   type DesignExplorationMobbin,
-  type DesignExplorationRationale,
   type DesignExplorationVariantOption,
   type DesignExplorationVariantsSection,
-  type MobbinReference,
 } from "@prototype/lib/prototypes/design-exploration-types";
 import {
   usePersistedLocalBoolean,
@@ -23,61 +31,6 @@ import useCopyToClipboard from "@prototype/lib/use-copy-to-clipboard";
 import { cn } from "@prototype/lib/utils";
 import { useEffect, useState } from "react";
 
-function scrollToMobbinReference(
-  componentIdPrefix: string,
-  referenceId: string,
-) {
-  const el = document.querySelector(
-    `[data-prototype-target*="${componentIdPrefix}.mobbin-reference.${referenceId}"]`,
-  );
-  if (el) {
-    el.scrollIntoView({ behavior: "smooth", block: "nearest" });
-  }
-}
-
-function VariantHint({
-  hint,
-  references,
-  componentIdPrefix,
-}: {
-  hint: string;
-  references: MobbinReference[];
-  componentIdPrefix: string;
-}) {
-  const parts = hint.split(/,\s*/);
-
-  return (
-    <>
-      {parts.map((part, i) => {
-        const trimmed = part.trim();
-        const matchedRef = references.find(
-          (r) => r.appName.toLowerCase() === trimmed.toLowerCase(),
-        );
-        const isLast = i === parts.length - 1;
-
-        return (
-          <span key={i}>
-            {matchedRef ? (
-              <button
-                type="button"
-                onClick={() =>
-                  scrollToMobbinReference(componentIdPrefix, matchedRef.id)
-                }
-                className="cursor-pointer underline decoration-dotted underline-offset-2 transition-colors duration-200 ease hover:text-foreground"
-              >
-                {trimmed}
-              </button>
-            ) : (
-              trimmed
-            )}
-            {!isLast ? ", " : ""}
-          </span>
-        );
-      })}
-    </>
-  );
-}
-
 const MODAL_VARIANT_PREVIEW_SCALE = 0.75;
 const SIDEBAR_VARIANT_PREVIEW_SCALE = 0.42;
 
@@ -89,12 +42,8 @@ const MODAL_OVERVIEW_DESCRIPTION_FIELD_CLASS =
 
 const MODAL_GALLERY_SECTION_TITLE_CLASS = "tool-heading";
 
-const MODAL_GALLERY_SECTION_DESC_CLASS = "tool-body max-w-2xl";
-
 const MODAL_GALLERY_CARD_TITLE_CLASS = "text-foreground font-medium";
 
-const MODAL_GALLERY_CARD_BODY_CLASS = "text-sm text-muted-foreground leading-relaxed";
-
 const SIDEBAR_OVERVIEW_TITLE_FIELD_CLASS =
   "text-sm text-foreground field-sizing-content w-full min-h-0 resize-none border-0 bg-transparent p-0 font-medium leading-snug shadow-none outline-none focus-visible:ring-0 focus-visible:ring-offset-0";
 
@@ -103,12 +52,8 @@ const SIDEBAR_OVERVIEW_DESCRIPTION_FIELD_CLASS =
 
 const SIDEBAR_GALLERY_SECTION_TITLE_CLASS = "tool-section-label";
 
-const SIDEBAR_GALLERY_SECTION_DESC_CLASS = "tool-body";
-
 const SIDEBAR_GALLERY_CARD_TITLE_CLASS = "text-sm text-foreground font-medium";
 
-const SIDEBAR_GALLERY_CARD_BODY_CLASS = "text-sm text-muted-foreground leading-relaxed";
-
 export type PrototypeDesignBriefPanelLayout = "default" | "sidebar";
 
 export type PrototypeDesignBriefPanelProps<TVariant extends string> = {
@@ -122,57 +67,62 @@ export type PrototypeDesignBriefPanelProps<TVariant extends string> = {
   variant: TVariant;
   onVariantChange: (variant: TVariant) => void;
   options: DesignExplorationVariantOption<TVariant>[];
-  rationale: Record<TVariant, DesignExplorationRationale>;
   renderers: Record<TVariant, () => React.ReactNode>;
-  /** Shown with a "Default" pill when this option matches the KV default. */
+  /** Pre-exploration UI — pinned at the bottom of the variant list. */
+  baseline: DesignExplorationBaselineOption<TVariant>;
+  /**
+   * Marked "Default" in the brief — the codebase-stored default variant
+   * (`config.defaultVariant`). Other options offer a "Make default" prompt.
+   */
   defaultVariantValue?: TVariant;
-  /** Persists the selected default variant to KV storage. */
-  onSetDefaultVariant?: (value: TVariant) => void;
-  /** Path to design exploration config — included in overview copy prompt. */
+  /** Path to design exploration config — included in copy prompts. */
   briefConfigFilePath?: string;
+  /** Sidebar prompt copy — label from variant set or brief title. */
+  explorationLabel?: string;
+  /** Sidebar prompt copy — variant set id when registered. */
+  explorationId?: string;
   layout?: PrototypeDesignBriefPanelLayout;
   className?: string;
 };
 
-const VARIANT_DEFAULT_CONTROL_CLASS =
-  "h-6 shrink-0 border border-border-solid bg-bg-top px-2 text-[11px] font-medium text-foreground shadow-xs hover:border-border-medium hover:bg-bg-layered";
-
-const VARIANT_DEFAULT_ACTIVE_CLASS =
-  "border-[color-mix(in_srgb,var(--primary)_35%,var(--border-solid))] bg-[var(--tool-chrome-blue-highlight)] text-primary-dark hover:border-[color-mix(in_srgb,var(--primary)_35%,var(--border-solid))] hover:bg-[var(--tool-chrome-blue-highlight)]";
-
 const SIDEBAR_OVERVIEW_COPY_BUTTON_CLASS =
-  "text-[var(--tool-chrome-icon)] hover:text-[var(--tool-chrome-icon-hover)] inline-flex size-7 shrink-0 items-center justify-center rounded-sm border-0 bg-transparent p-0 transition-colors duration-200 ease outline-none focus:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-40 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0";
+  "cursor-pointer text-[var(--tool-chrome-icon)] hover:text-[var(--tool-chrome-icon-hover)] inline-flex size-7 shrink-0 items-center justify-center rounded-sm border-0 bg-transparent p-0 transition-colors duration-200 ease outline-none focus:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-40 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0";
 
-function VariantRationaleSection<TVariant extends string>({
-  componentIdPrefix,
+function MakeDefaultButton({
+  componentId,
+  optionLabel,
   optionValue,
-  storageKeyPrefix,
-  rationale,
-  layout,
-  bodyClassName,
+  configFilePath,
 }: {
-  componentIdPrefix: string;
-  optionValue: TVariant;
-  storageKeyPrefix: string;
-  rationale: DesignExplorationRationale;
-  layout: PrototypeDesignBriefPanelLayout;
-  bodyClassName: string;
+  componentId: string;
+  optionLabel: string;
+  optionValue: string;
+  configFilePath?: string;
 }) {
-  const { value: expanded, updateValue: updateExpanded } =
-    usePersistedLocalBoolean(
-      `${storageKeyPrefix}-variant-rationale-expanded-${optionValue}`,
-      false,
-    );
+  const { copy, isCopied } = useCopyToClipboard();
 
   return (
-    <PrototypeVariantRationalePanel
-      componentId={`${componentIdPrefix}.overview-option.${optionValue}.rationale`}
-      rationale={rationale}
-      expanded={expanded}
-      onExpandedChange={updateExpanded}
-      layout={layout}
-      bodyClassName={bodyClassName}
-    />
+    <PrototypeComponent id={componentId}>
+      <Button
+        type="button"
+        variant="chrome"
+        size="sm"
+        className="h-6 shrink-0 rounded px-2 text-[11px]"
+        onClick={(event) => {
+          event.stopPropagation();
+          copy(
+            buildSetDefaultVariantPrompt({
+              variantLabel: optionLabel,
+              variantValue: optionValue,
+              configFilePath,
+            }),
+          );
+        }}
+        aria-label={`Copy prompt to make ${optionLabel} the default`}
+      >
+        {isCopied ? "Copied prompt" : "Make default"}
+      </Button>
+    </PrototypeComponent>
   );
 }
 
@@ -187,15 +137,17 @@ export function PrototypeDesignBriefPanel<TVariant extends string>({
   variant,
   onVariantChange,
   options,
-  rationale,
   renderers,
+  baseline,
   defaultVariantValue,
-  onSetDefaultVariant,
   briefConfigFilePath,
+  explorationLabel,
+  explorationId,
   layout = "default",
   className,
 }: PrototypeDesignBriefPanelProps<TVariant>) {
   const isSidebar = layout === "sidebar";
+  const slug = usePrototypeSlug();
   const [variantPreviewsReady, setVariantPreviewsReady] = useState(false);
 
   useEffect(() => {
@@ -204,6 +156,11 @@ export function PrototypeDesignBriefPanel<TVariant extends string>({
 
   const { copy: copyOverviewDefaultsPrompt, icon: copyOverviewDefaultsIcon } =
     useCopyToClipboard();
+  const {
+    copy: copyMoreVariantsPrompt,
+    icon: copyMoreVariantsIcon,
+    isCopied: isMoreVariantsCopied,
+  } = useCopyToClipboard();
   const { value: title, updateValue: updateTitle } = usePersistedLocalString(
     `${storageKeyPrefix}-overview-title`,
     brief.titleDefault,
@@ -220,11 +177,18 @@ export function PrototypeDesignBriefPanel<TVariant extends string>({
     `${storageKeyPrefix}-context-expanded`,
     context?.defaultExpanded ?? false,
   );
+  const { value: moreVariantsBrief, updateValue: updateMoreVariantsBrief } =
+    usePersistedLocalString(`${storageKeyPrefix}-more-variants-brief`, "");
+  const {
+    value: multipleVersions,
+    updateValue: updateMultipleVersions,
+  } = usePersistedLocalBoolean(
+    `${storageKeyPrefix}-more-variants-multiple-versions`,
+    true,
+  );
+  const canCopyMoreVariants = moreVariantsBrief.trim().length > 0 && Boolean(slug);
 
   const variantsTitle = variantsSection?.title ?? "Design variants";
-  const variantsDescription =
-    variantsSection?.description ??
-    "Compare layout, copy, and CTAs side by side.";
 
   const effectiveTitle = title.trim() || brief.titleDefault;
   const effectiveDescription =
@@ -242,15 +206,9 @@ export function PrototypeDesignBriefPanel<TVariant extends string>({
   const sectionTitleClass = isSidebar
     ? SIDEBAR_GALLERY_SECTION_TITLE_CLASS
     : MODAL_GALLERY_SECTION_TITLE_CLASS;
-  const sectionDescClass = isSidebar
-    ? SIDEBAR_GALLERY_SECTION_DESC_CLASS
-    : MODAL_GALLERY_SECTION_DESC_CLASS;
   const cardTitleClass = isSidebar
     ? SIDEBAR_GALLERY_CARD_TITLE_CLASS
     : MODAL_GALLERY_CARD_TITLE_CLASS;
-  const cardBodyClass = isSidebar
-    ? SIDEBAR_GALLERY_CARD_BODY_CLASS
-    : MODAL_GALLERY_CARD_BODY_CLASS;
   const variantPreviewScale = isSidebar
     ? SIDEBAR_VARIANT_PREVIEW_SCALE
     : MODAL_VARIANT_PREVIEW_SCALE;
@@ -318,6 +276,188 @@ export function PrototypeDesignBriefPanel<TVariant extends string>({
     />
   ) : null;
 
+  const resolvedExplorationLabel = explorationLabel ?? brief.titleDefault;
+
+  const handleCopyMoreVariantsPrompt = () => {
+    if (!slug || !canCopyMoreVariants) return;
+
+    const origin =
+      typeof window !== "undefined" ? window.location.origin : undefined;
+
+    copyMoreVariantsPrompt(
+      buildMoreDesignExplorationVariantsCopyText({
+        slug,
+        explorationLabel: resolvedExplorationLabel,
+        explorationId,
+        options: explorationOptions,
+        brief: {
+          titleDefault: effectiveTitle,
+          descriptionDefault: effectiveDescription,
+        },
+        configFilePath: briefConfigFilePath,
+        origin,
+        briefText: moreVariantsBrief,
+        multipleVersions,
+      }),
+    );
+  };
+
+  const moreVariantsPromptSection = isSidebar ? (
+    <div className="flex flex-col gap-2">
+      <PrototypeComponent id={`${componentIdPrefix}.more-variants-prompt`}>
+        <PrototypeBriefTextarea
+          value={moreVariantsBrief}
+          onChange={(event) => updateMoreVariantsBrief(event.target.value)}
+          minHeightClass="min-h-[5rem]"
+          placeholder={
+            multipleVersions
+              ? "Describe more variations to explore…"
+              : "Describe one variation to explore…"
+          }
+          aria-label="More variations brief"
+        />
+      </PrototypeComponent>
+      <div className="flex items-center justify-between gap-4">
+        <PrototypeComponent id={`${componentIdPrefix}.more-variants-multiple-versions`}>
+          <label className="flex cursor-pointer items-center gap-2">
+            <Switch
+              checked={multipleVersions}
+              onCheckedChange={updateMultipleVersions}
+              aria-label="Multiple versions"
+              className="data-[state=checked]:bg-foreground"
+            />
+            <span className="text-sm text-[var(--text-secondary)]">Multiple versions</span>
+          </label>
+        </PrototypeComponent>
+        <PrototypeComponent id={`${componentIdPrefix}.more-variants-copy-prompt`}>
+          <Button
+            type="button"
+            variant="chrome"
+            size="sm"
+            className="h-8 gap-1.5"
+            disabled={!canCopyMoreVariants}
+            onClick={handleCopyMoreVariantsPrompt}
+            aria-label="Copy more variations prompt"
+          >
+            {isMoreVariantsCopied ? "Copied prompt" : "Copy prompt"}
+            {copyMoreVariantsIcon}
+          </Button>
+        </PrototypeComponent>
+      </div>
+    </div>
+  ) : null;
+
+  const explorationOptions = getDesignExplorationVariantOptions(options, baseline);
+  const resolvedBaseline = resolveDesignExplorationBaselineOption(baseline);
+
+  const renderVariantCard = (
+    option: DesignExplorationVariantOption<TVariant>,
+    {
+      isBaseline = false,
+      badgeSuffix,
+    }: { isBaseline?: boolean; badgeSuffix?: string } = {},
+  ) => {
+    const VariantPreview = renderers[option.value];
+    const isActive = option.value === variant;
+    const isDefaultOption =
+      !isBaseline &&
+      defaultVariantValue !== undefined &&
+      option.value === defaultVariantValue;
+    const optionIdSuffix = badgeSuffix ?? option.value;
+
+    return (
+      <PrototypeComponent
+        key={option.value}
+        id={`${componentIdPrefix}.overview-option.${optionIdSuffix}`}
+      >
+        <div className="flex flex-col gap-2">
+          <div className="flex items-start justify-between gap-2 px-0.5">
+            <div className="flex min-w-0 flex-1 items-center gap-2">
+              <p className={cn(cardTitleClass, "min-w-0 truncate")}>
+                {option.label}
+              </p>
+              {isBaseline ? (
+                <PrototypeComponent
+                  id={`${componentIdPrefix}.overview-option.${optionIdSuffix}.baseline`}
+                  className="tool-variant-original-badge shrink-0"
+                >
+                  <span aria-label="Original state before exploration">
+                    ORIGINAL
+                  </span>
+                </PrototypeComponent>
+              ) : null}
+            </div>
+
+            <div className="flex shrink-0 items-center gap-3">
+              {isDefaultOption ? (
+                <PrototypeComponent
+                  id={`${componentIdPrefix}.overview-option.${optionIdSuffix}.default`}
+                  className="tool-variant-default-badge shrink-0"
+                >
+                  <span aria-label="Current default variant">DEFAULT</span>
+                </PrototypeComponent>
+              ) : null}
+              {!isBaseline && !isDefaultOption ? (
+                <MakeDefaultButton
+                  componentId={`${componentIdPrefix}.overview-option.${optionIdSuffix}.set-default`}
+                  optionLabel={option.label}
+                  optionValue={option.value}
+                  configFilePath={briefConfigFilePath}
+                />
+              ) : null}
+            </div>
+          </div>
+
+          <div
+            role="button"
+            tabIndex={0}
+            aria-pressed={isActive}
+            aria-label={`Select ${option.label} variant`}
+            onClick={() => onVariantChange(option.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                onVariantChange(option.value);
+              }
+            }}
+            className={cn(
+              "tool-variant-card",
+              isActive && "is-active",
+            )}
+          >
+            <div
+              style={{ zoom: variantPreviewScale }}
+              className="w-full"
+              data-prototype-screenshot
+            >
+              {variantPreviewsReady ? (
+                VariantPreview()
+              ) : (
+                <div
+                  className="bg-bg-subtle min-h-32 w-full"
+                  aria-hidden
+                />
+              )}
+            </div>
+          </div>
+
+          {option.rationale ? (
+            <p
+              className={cn(
+                "px-0.5 leading-relaxed",
+                isSidebar
+                  ? "text-sm text-[var(--text-secondary)]"
+                  : "text-muted-foreground text-xs",
+              )}
+            >
+              {option.rationale.good} {option.rationale.bad}
+            </p>
+          ) : null}
+        </div>
+      </PrototypeComponent>
+    );
+  };
+
   const variantsSectionContent = (
     <section
       className={cn(
@@ -333,125 +473,13 @@ export function PrototypeDesignBriefPanel<TVariant extends string>({
         )}
       >
         <p className={sectionTitleClass}>{variantsTitle}</p>
-        {!isSidebar && <p className={sectionDescClass}>{variantsDescription}</p>}
       </div>
 
       <div className={cn("flex flex-col", isSidebar ? "gap-6" : "gap-10")}>
-        {options.map((option) => {
-          const optionRationale = rationale[option.value];
-          const VariantPreview = renderers[option.value];
-          const isActive = option.value === variant;
-          const isDefaultOption =
-            defaultVariantValue !== undefined &&
-            option.value === defaultVariantValue;
-
-          return (
-            <PrototypeComponent
-              key={option.value}
-              id={`${componentIdPrefix}.overview-option.${option.value}`}
-            >
-              <div className="flex flex-col gap-2">
-                <div className="flex items-start justify-between gap-2 px-0.5">
-                  <p className={cn(cardBodyClass, "min-w-0 flex-1")}>
-                    <span className={cardTitleClass}>{option.label}</span>
-                    {option.hint ? (
-                      <>
-                        {" · "}
-                        <VariantHint
-                          hint={option.hint}
-                          references={mobbin?.references ?? []}
-                          componentIdPrefix={componentIdPrefix}
-                        />
-                      </>
-                    ) : null}
-                  </p>
-
-                  <div className="flex shrink-0 items-center gap-3">
-                    {isDefaultOption ? (
-                      <PrototypeComponent
-                        id={`${componentIdPrefix}.overview-option.${option.value}.default`}
-                      >
-                        <Button
-                          type="button"
-                          variant="secondary"
-                          size="sm"
-                          className={cn(
-                            VARIANT_DEFAULT_CONTROL_CLASS,
-                            VARIANT_DEFAULT_ACTIVE_CLASS,
-                            "pointer-events-none disabled:opacity-100",
-                          )}
-                          disabled
-                          aria-label="Current default variant"
-                        >
-                          Default
-                        </Button>
-                      </PrototypeComponent>
-                    ) : onSetDefaultVariant ? (
-                      <PrototypeComponent
-                        id={`${componentIdPrefix}.overview-option.${option.value}.set-default`}
-                      >
-                        <Button
-                          type="button"
-                          variant="secondary"
-                          size="sm"
-                          className={VARIANT_DEFAULT_CONTROL_CLASS}
-                          onClick={(event) => {
-                            event.stopPropagation();
-                            onSetDefaultVariant(option.value);
-                          }}
-                          aria-label={`Set ${option.label} as default`}
-                        >
-                          Make default
-                        </Button>
-                      </PrototypeComponent>
-                    ) : null}
-                  </div>
-                </div>
-
-                <div
-                  role="button"
-                  tabIndex={0}
-                  aria-pressed={isActive}
-                  aria-label={`Select ${option.label} variant`}
-                  onClick={() => onVariantChange(option.value)}
-                  onKeyDown={(event) => {
-                    if (event.key === "Enter" || event.key === " ") {
-                      event.preventDefault();
-                      onVariantChange(option.value);
-                    }
-                  }}
-                  className={cn(
-                    "tool-variant-card",
-                    isActive && "is-active",
-                  )}
-                >
-                  <div
-                    style={{ zoom: variantPreviewScale }}
-                    className="w-full"
-                    data-prototype-screenshot
-                  >
-                    {variantPreviewsReady ? (
-                      VariantPreview()
-                    ) : (
-                      <div
-                        className="bg-bg-subtle min-h-32 w-full"
-                        aria-hidden
-                      />
-                    )}
-                  </div>
-                </div>
-
-                <VariantRationaleSection
-                  componentIdPrefix={componentIdPrefix}
-                  optionValue={option.value}
-                  storageKeyPrefix={storageKeyPrefix}
-                  rationale={optionRationale}
-                  layout={layout}
-                  bodyClassName={cardBodyClass}
-                />
-              </div>
-            </PrototypeComponent>
-          );
+        {explorationOptions.map((option) => renderVariantCard(option))}
+        {renderVariantCard(resolvedBaseline, {
+          isBaseline: true,
+          badgeSuffix: "baseline",
         })}
       </div>
     </section>
@@ -469,6 +497,8 @@ export function PrototypeDesignBriefPanel<TVariant extends string>({
     >
       {isSidebar ? (
         <>
+          {moreVariantsPromptSection}
+          <hr className="border-border" />
           {variantsSectionContent}
           {mobbinSection ? (
             <>

package/src/components/prototypes/prototype-floating-pill.module.scss

@@ -276,12 +276,6 @@ $enter-duration: 150ms;
   background: rgba(255, 255, 255, 0.08) !important;
   color: rgba(255, 255, 255, 0.55) !important;
 
-  > :first-child {
-    border-radius: 0.375rem !important;
-    background: rgba(255, 255, 255, 0.14) !important;
-    box-shadow: none !important;
-  }
-
   [role="tab"] {
     flex: 0 0 auto !important;
     height: 26px !important;
@@ -293,6 +287,10 @@ $enter-duration: 150ms;
     box-shadow: none !important;
     font-size: 0.8125rem !important;
     line-height: 1 !important;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease,
+      box-shadow 0.15s ease;
   }
 }
 
@@ -305,14 +303,17 @@ $enter-duration: 150ms;
   color: rgba(255, 255, 255, 0.55) !important;
 
   @media (hover: hover) and (pointer: fine) {
-    &:hover:not([data-active]) {
+    &:hover:not([data-state="active"]) {
       background: rgba(255, 255, 255, 0.06) !important;
       color: rgba(255, 255, 255, 0.75) !important;
     }
   }
 
-  &[data-active] {
-    color: rgba(255, 255, 255, 0.92) !important;
+  &[data-state="active"] {
+    background: rgba(0, 151, 254, 0.22) !important;
+    color: #fff !important;
+    box-shadow: inset 0 0 0 1px rgba(0, 151, 254, 0.55) !important;
+    font-weight: 600 !important;
   }
 }
 
@@ -1338,4 +1339,10 @@ $enter-duration: 150ms;
   .rationaleLabel {
     color: rgba(0, 0, 0, 0.92);
   }
+
+  .variantsTab[data-state="active"] {
+    background: rgba(0, 120, 215, 0.12) !important;
+    box-shadow: inset 0 0 0 1px rgba(0, 120, 215, 0.35) !important;
+    color: rgba(0, 0, 0, 0.92) !important;
+  }
 }