@wix/web5-core 1.56.0

package/src/styles/base-tokens.css

@@ -0,0 +1,152 @@
+/*
+ * Base design tokens — shared defaults for all client packages.
+ * Each client overrides these in their own globals.css :root block.
+ */
+@import './prompt-input-tokens.css';
+
+:root {
+  /* Color tokens — HSL triplets */
+  --background: 0 0% 100%;
+  --foreground: 0 0% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 3.9%;
+  --primary: 0 0% 9%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 0 0% 96.1%;
+  --secondary-foreground: 0 0% 9%;
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+  --accent: 0 0% 96.1%;
+  --accent-foreground: 0 0% 9%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 89.8%;
+  --input: 0 0% 89.8%;
+  --ring: 0 0% 3.9%;
+
+  /* Chart colors */
+  --chart-1: 180 60% 65%;
+  --chart-2: 120 50% 60%;
+  --chart-3: 40 50% 70%;
+  --chart-4: 200 70% 60%;
+  --chart-5: 320 60% 70%;
+
+  /* Sidebar colors */
+  --sidebar: 0 0% 100%;
+  --sidebar-foreground: 0 0% 3.9%;
+  --sidebar-primary: 0 0% 9%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-accent: 0 0% 96.1%;
+  --sidebar-accent-foreground: 0 0% 9%;
+  --sidebar-border: 0 0% 89.8%;
+  --sidebar-ring: 0 0% 3.9%;
+
+  /* Typography tokens */
+  --font-sans: ui-sans-serif, system-ui, sans-serif;
+  --font-serif: serif;
+  --font-mono: ui-monospace, monospace;
+  /* Display font — used for headings and callouts. Defaults to the body font
+   * so non-overriding clients render identically; clients (e.g. circana) can
+   * set this to a distinct family. */
+  --font-display: var(--font-sans);
+
+  /* Spacing & shape tokens */
+  --radius: 0.5rem;
+  --tracking-normal: -0.02em;
+  --spacing: 0.25rem;
+
+  /* Shadow tokens */
+  --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.03);
+  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.04);
+  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md: 0px 4px 6px -1px hsl(0 0% 0% / 0.1), 0px 2px 4px -2px hsl(0 0% 0% / 0.1);
+  --shadow-lg: 0px 10px 15px -3px hsl(0 0% 0% / 0.1), 0px 4px 6px -4px hsl(0 0% 0% / 0.1);
+  --shadow-xl: 0px 20px 25px -5px hsl(0 0% 0% / 0.1), 0px 8px 10px -6px hsl(0 0% 0% / 0.1);
+  --shadow-2xl: 0px 25px 50px -12px hsl(0 0% 0% / 0.25);
+
+  /* Component-level typography tokens */
+  --heading-lg-color: hsl(var(--foreground));
+  --heading-lg-gradient-from: hsl(var(--primary));
+  --heading-lg-gradient-to: hsl(var(--primary));
+  --heading-h3-color: hsl(var(--primary));
+  --heading-feature-color: hsl(var(--primary));
+  --section-description-color: hsl(var(--muted-foreground));
+  --section-description-font-size: 20px;
+  --section-description-line-height: 30px;
+  --section-description-font-size-tablet: 24px;
+  --section-description-line-height-tablet: 36px;
+  --markdown-content-color: hsl(var(--muted-foreground));
+  --card-title-color: hsl(var(--primary));
+  --card-title-gradient-color: hsl(var(--primary));
+  --description-text-color: hsl(var(--foreground));
+  --body-text-color: hsl(var(--foreground));
+  --body-text-font-size: 18px;
+  --body-text-line-height: 28px;
+  --body-small-text-color: hsl(var(--foreground));
+  --body-small-text-font-size: 15px;
+  --body-small-text-line-height: 24px;
+  --hero-content-color: #FFF;
+  --hero-button-active-color: hsl(var(--primary));
+  --solution-label-color: hsl(var(--muted-foreground));
+  --view-solution-link-color: hsl(var(--primary));
+
+  /* Semantic text & border colors */
+  --text-muted: hsl(var(--muted-foreground));
+  --text-accent: hsl(var(--primary));
+  --text-accent-hover: hsl(var(--primary));
+  --accent-border: hsl(var(--primary));
+  --border-subtle: hsl(var(--border));
+
+  /* Section spacing tokens (responsive) */
+  --section-padding-y-mobile: 4rem;
+  --section-padding-y-tablet: 6rem;
+  --section-padding-y-desktop: 6rem;
+  --section-padding-x-mobile: 1.5rem;
+  --section-padding-x-desktop: 5rem;
+
+  /* Callout tokens */
+  --callout-icon-color: var(--body-text-color);
+  --callout-text-color: var(--body-text-color);
+  --callout-icon-size: 0.55em;
+  --callout-stream-delay: 0s;
+  --callout-star-duration: 2000;
+  --callout-star-delay: 400;
+
+  /* Prose defaults */
+  --tw-prose-body: hsl(var(--foreground));
+
+}
+
+.dark {
+  --background: 0 0% 3.9%;
+  --foreground: 0 0% 98%;
+  --card: 0 0% 3.9%;
+  --card-foreground: 0 0% 98%;
+  --popover: 0 0% 3.9%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 0 0% 98%;
+  --primary-foreground: 0 0% 9%;
+  --secondary: 0 0% 14.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 0 0% 14.9%;
+  --muted-foreground: 0 0% 63.9%;
+  --accent: 0 0% 14.9%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 14.9%;
+  --input: 0 0% 14.9%;
+  --ring: 0 0% 83.1%;
+
+  --sidebar: 0 0% 3.9%;
+  --sidebar-foreground: 0 0% 98%;
+  --sidebar-primary: 0 0% 98%;
+  --sidebar-primary-foreground: 0 0% 9%;
+  --sidebar-accent: 0 0% 14.9%;
+  --sidebar-accent-foreground: 0 0% 98%;
+  --sidebar-border: 0 0% 14.9%;
+  --sidebar-ring: 0 0% 83.1%;
+}

package/src/styles/base-utilities.css

@@ -0,0 +1,424 @@
+/*
+ * Base utility classes — shared between all client packages.
+ * All values are driven by CSS variables so clients can override via tokens.
+ *
+ * These are intentionally UNLAYERED so they can override Tailwind's preflight
+ * reset (which is also unlayered in the build output). Class selectors
+ * naturally beat element selectors via specificity.
+ *
+ * Font family is NOT declared on these utilities — it cascades from the
+ * `#root` rule below via the zero-specificity `:where()` inherit rule.
+ * See design log #086 for the rationale.
+ */
+
+/*
+ * Default font cascade — clients set `--font-sans` in their globals.css and
+ * every descendant of `#root` inherits it (including form elements and
+ * third-party widgets that would otherwise fall back to Arial / system).
+ *
+ * These rules live in `@layer base` (not unlayered) on purpose: the inherit
+ * rule must lose to Tailwind's `font-*` utilities so that `font-display`,
+ * `font-mono`, etc. still take effect on descendants. An unlayered rule would
+ * beat the layered `@layer utilities` utilities regardless of specificity,
+ * silently killing every font utility under `#root`. Base sits before
+ * utilities in Tailwind's layer order, so utilities win; non-utility elements
+ * still inherit. See design log #086.
+ */
+@layer base {
+  #root {
+    font-family: var(--font-sans);
+  }
+  :where(#root *, #root *::before, #root *::after) {
+    font-family: inherit;
+  }
+}
+
+/* All headings use the display font regardless of which heading utility class
+ * (if any) they carry. Scoped to #root with :where() so the rule has (0,0,1)
+ * specificity — beats body inheritance but loses to any class-based override.
+ * Non-overriding clients have `--font-display` aliased to `--font-sans` so
+ * this is a visual no-op for them. */
+:where(#root) :is(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--font-display);
+}
+
+.heading-xl {
+  font-family: var(--font-display);
+  font-size: 3rem;
+  line-height: 1;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+.heading-lg {
+  font-family: var(--font-display);
+  font-size: 2.375rem;
+  line-height: 1.263;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+.heading-md {
+  font-family: var(--font-display);
+  font-size: 1.875rem;
+  line-height: 1.2;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+.heading-sm {
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  line-height: 1.333;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+.container-padding-x {
+  padding-inline: 1.5rem;
+}
+.section-padding-y {
+  padding-block: 6rem;
+}
+.section-title-gap-xl {
+  gap: 1.5rem;
+}
+.section-title-gap-lg {
+  gap: 1.25rem;
+}
+.section-title-gap-md {
+  gap: 1.25rem;
+}
+.section-title-gap-sm {
+  gap: 1rem;
+}
+
+/* Heading with gradient */
+.heading-lg-gradient {
+  font-family: var(--font-display);
+  font-size: 60px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 75px;
+  letter-spacing: -0.36px;
+  background: linear-gradient(164.31deg, var(--heading-lg-gradient-from) 30.171%, var(--heading-lg-gradient-to) 79.043%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Heading h3 */
+.heading-h3 {
+  font-family: var(--font-display);
+  color: var(--heading-h3-color);
+  font-size: 25px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 28px;
+}
+
+/* Section description */
+.section-description {
+  color: var(--section-description-color);
+  font-size: var(--section-description-font-size);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--section-description-line-height);
+}
+
+/* Markdown content */
+.markdown-content {
+  color: var(--markdown-content-color);
+  font-size: 18px;
+  font-style: normal;
+  line-height: 28px;
+}
+
+.markdown-content p {
+  color: var(--markdown-content-color);
+  font-size: 18px;
+  font-style: normal;
+  line-height: 28px;
+}
+
+.markdown-content strong,
+.markdown-content p strong {
+  color: var(--markdown-content-color);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 28px;
+}
+
+/* Card title with gradient color */
+.card-title-gradient {
+  font-family: var(--font-display);
+  color: var(--card-title-gradient-color);
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 44px;
+}
+
+/* Callouts use the display font (e.g. Poppins in Circana) regardless of body
+ * font. Tied to the Tailwind size utilities so any element using
+ * `text-callout*` automatically picks up the display family. */
+.text-callout,
+.text-callout-block,
+.text-callout-block-lg,
+.text-callout-block-xl {
+  font-family: var(--font-display);
+}
+
+/* Body text — default paragraph style (18px/28px) */
+.body-text {
+  color: var(--body-text-color);
+  font-size: var(--body-text-font-size);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--body-text-line-height);
+}
+
+/* Body text applied to prose/markdown child paragraphs */
+.body-text-prose p {
+  color: var(--body-text-color);
+  font-size: var(--body-text-font-size);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--body-text-line-height);
+}
+
+/* Body small text — compact paragraph style (15px/24px) */
+.body-small-text {
+  color: var(--body-small-text-color);
+  font-size: var(--body-small-text-font-size);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--body-small-text-line-height);
+}
+
+/* Body small text applied to prose/markdown child paragraphs */
+.body-small-text-prose p {
+  color: var(--body-small-text-color);
+  font-size: var(--body-small-text-font-size);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--body-small-text-line-height);
+}
+
+/* Description text */
+.description-text {
+  color: var(--description-text-color);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+/* Hero content */
+.hero-content {
+  color: var(--hero-content-color);
+  font-feature-settings: 'liga' off, 'clig' off;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 26px;
+}
+
+/* Hero content prose overrides */
+.hero-content .prose,
+.hero-content .prose-slate {
+  --tw-prose-body: var(--hero-content-color);
+  --tw-prose-headings: var(--hero-content-color);
+  --tw-prose-lead: var(--hero-content-color);
+  --tw-prose-bold: var(--hero-content-color);
+  color: var(--hero-content-color);
+}
+
+.hero-content .prose p,
+.hero-content .prose-slate p {
+  color: var(--hero-content-color);
+}
+
+/* Hero button active */
+.hero-button-active {
+  color: var(--hero-button-active-color);
+}
+
+.hero-button-active span {
+  color: var(--hero-button-active-color);
+}
+
+/* Solution label */
+.solution-label {
+  color: var(--solution-label-color);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 14px;
+}
+
+/* View solution link */
+.view-solution-link {
+  color: var(--view-solution-link-color);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+/* Feature heading */
+.heading-feature {
+  color: var(--heading-feature-color);
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 30px;
+}
+
+/* Responsive section padding */
+.theme-section-padding-y {
+  padding-top: var(--section-padding-y-mobile);
+  padding-bottom: var(--section-padding-y-mobile);
+}
+
+/* Section container padding */
+.theme-section-container {
+  padding-left: var(--section-padding-x-mobile);
+  padding-right: var(--section-padding-x-mobile);
+}
+
+@media (min-width: 768px) {
+  .section-description {
+    font-size: var(--section-description-font-size-tablet);
+    line-height: var(--section-description-line-height-tablet);
+  }
+
+  .theme-section-padding-y {
+    padding-top: var(--section-padding-y-tablet);
+    padding-bottom: var(--section-padding-y-tablet);
+  }
+}
+
+@media (min-width: 1024px) {
+  .theme-section-padding-y {
+    padding-top: var(--section-padding-y-desktop);
+    padding-bottom: var(--section-padding-y-desktop);
+  }
+
+  .theme-section-container {
+    padding-left: var(--section-padding-x-desktop);
+    padding-right: var(--section-padding-x-desktop);
+  }
+}
+
+/*
+ * Tailwind v3→v4 compatibility: restore `border-color: gray-200` default.
+ * Tailwind v4 changed the default to `currentcolor`.
+ */
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+
+  body {
+    letter-spacing: var(--tracking-normal, -0.02em);
+    color: hsl(var(--foreground));
+  }
+
+  button {
+    cursor: pointer;
+  }
+}
+
+/* Hide scrollbar while keeping scroll functionality */
+.scrollbar-hide {
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* Ask-about-this context highlight styles */
+[data-context-hover],
+[data-context-selected] {
+  border-radius: 0.375rem;
+  outline: 2px solid rgb(216 180 254); /* purple-300 */
+  background-color: rgb(250 245 255 / 0.4); /* purple-50/40 */
+  transition: outline-color 150ms, background-color 150ms;
+}
+
+[data-context-selected] {
+  outline-color: rgb(192 132 252); /* purple-400 */
+  background-color: rgb(250 245 255 / 0.6); /* purple-50/60 */
+}
+
+/* Typewriter cursor blink animation */
+@keyframes blink {
+  0%, 50% {
+    opacity: 1;
+  }
+  51%, 100% {
+    opacity: 0;
+  }
+}
+
+/* Restore Tailwind default animation keyframes (cleared by tw-animate-css) */
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+/* OptimizedImage placeholder shimmer */
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+/* Global accessible focus indicator — only visible on keyboard navigation */
+:focus-visible {
+  outline: 2px solid rgba(128, 0, 177, 0.5);
+  outline-offset: 2px;
+}
+
+
+@media (max-width: 64rem) {
+  .heading-xl {
+    font-size: 1.875rem;
+    line-height: 1.2;
+  }
+  .heading-lg {
+    font-size: 1.875rem;
+    line-height: 1.2;
+  }
+  .heading-md {
+    font-size: 1.5rem;
+    line-height: 1.2;
+  }
+  .heading-sm {
+    font-size: 1.5rem;
+    line-height: 1.333;
+  }
+  .container-padding-x {
+    padding-inline: 1.5rem;
+  }
+  .section-padding-y {
+    padding-bottom: 4rem;
+    padding-block: 4rem;
+  }
+  .section-title-gap-xl {
+    gap: 1rem;
+  }
+  .section-title-gap-lg {
+    gap: 1rem;
+  }
+  .section-title-gap-md {
+    gap: 1rem;
+  }
+  .section-title-gap-sm {
+    gap: 1rem;
+  }
+}

package/src/styles/components.css

@@ -0,0 +1,6 @@
+@import '../components/ui/SearchSection.css';
+@import '../components/ui/PromptEntryEmptyState.css';
+@import '../components/ui/FeedbackBar.css';
+@import '../components/ui/Disclaimer.css';
+@import '../components/ui/PlacementLoader.css';
+@import '../components/placement/PlacementResponseRenderer.css';

package/src/styles/prompt-input-tokens.css

@@ -0,0 +1,136 @@
+/*
+ * Prompt-input tokens shared by SearchSection and future external consumers.
+ */
+:root,
+:host {
+  --pi-panel-bg: transparent;
+  --pi-panel-shadow: none;
+  --pi-panel-blur: 0px;
+  --pi-panel-padding-block-start: 12px;
+  --pi-panel-padding-block-end: 24px;
+  --pi-panel-padding-y: var(--pi-panel-padding-block-start)
+    var(--pi-panel-padding-block-end);
+  --pi-panel-mobile-padding-inline: 10px;
+  --pi-panel-mobile-bg: #ffffff;
+  --pi-home-entry-content-radius: 10px 10px 0 0;
+  --pi-home-entry-content-bg: radial-gradient(
+      ellipse 76% 62% at 58% 108%,
+      rgba(249, 187, 169, 0.78) 0,
+      rgba(249, 187, 169, 0.5) 28%,
+      rgba(249, 187, 169, 0.22) 52%,
+      transparent 78%
+    ),
+    radial-gradient(
+      ellipse 54% 48% at 88% 84%,
+      rgba(214, 180, 255, 0.4) 0,
+      rgba(214, 180, 255, 0.24) 36%,
+      transparent 78%
+    ),
+    radial-gradient(
+      ellipse 46% 40% at 14% 88%,
+      rgba(214, 190, 255, 0.26) 0,
+      rgba(214, 190, 255, 0.14) 34%,
+      transparent 74%
+    ),
+    radial-gradient(
+      ellipse 34% 24% at 86% 26%,
+      rgba(227, 208, 255, 0.24) 0,
+      transparent 72%
+    ),
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.98),
+      rgba(255, 255, 255, 0.92)
+    );
+  --pi-home-entry-copy-gap: 1.875rem;
+  --pi-home-entry-copy-color: #2b2b2b;
+  --pi-home-entry-eyebrow-color: #2b2b2b;
+  --pi-home-entry-description-color: #2b2b2b;
+  --pi-home-entry-chip-intro-color: #2b2b2b;
+  --pi-home-entry-panel-padding: 1.25rem;
+  --pi-home-entry-panel-radius: 15px;
+  --pi-home-entry-panel-bg: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.7),
+    rgba(43, 43, 43, 0.05)
+  );
+  --pi-home-entry-panel-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --pi-home-entry-panel-blur: 20px;
+  --pi-content-max-w: 651px;
+  --pi-content-min-w: 250px;
+  --pi-stack-gap: 15px;
+  --pi-chip-gap: 10px;
+  --pi-chip-mobile-gap: 0;
+  --pi-chip-mobile-overflow-y: scroll;
+  --pi-field-min-h: 56px;
+  --pi-field-max-h: 227px;
+  --pi-field-border-width: 1px;
+  --pi-home-entry-field-radius: 10px;
+  --pi-field-radius-pill: 80px;
+  --pi-field-radius-multiline: 25px;
+  --pi-field-border: #8000b1;
+  --pi-field-bg: #ffffff;
+  --pi-field-padding-top: 12px;
+  --pi-field-padding-right: 12px;
+  --pi-field-padding-bottom: 12px;
+  --pi-field-padding-left: 24px;
+  --pi-field-padding-top-multiline: 20px;
+  --pi-field-text: #2b2b2b;
+  --pi-field-placeholder: #52575b;
+  --pi-field-caret: #2b2b2b;
+  --pi-field-font-family: Poppins, ui-sans-serif, sans-serif, system-ui;
+  --pi-field-font-size: 15px;
+  --pi-field-line-height: 32px;
+  --pi-field-line-height-multiline: 24px;
+  --pi-field-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --pi-chip-padding-y: 10px;
+  --pi-chip-padding-x: 18px;
+  --pi-chip-radius: 5px;
+  --pi-chip-border: transparent;
+  --pi-chip-bg: #ffffff;
+  --pi-chip-text: #2b2b2b;
+  --pi-chip-font-size: 14px;
+  --pi-chip-line-height: 14px;
+  --pi-chip-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1),
+    0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --pi-chip-hover-bg: #f6f6f6;
+  --pi-chip-hover-transform: translateY(-1px);
+  --pi-submit-size: 34px;
+  --pi-submit-radius: 80px;
+  --pi-submit-bg: #e5e5e5;
+  --pi-submit-fg: #909090;
+  --pi-submit-active-bg: #2b2b2b;
+  --pi-submit-active-fg: #ffffff;
+  --pi-submit-bottom: 12px;
+  --pi-submit-icon-size: 16px;
+  --pi-collapsed-btn-min-h: 48px;
+  --pi-collapsed-btn-padding-y: 12px;
+  --pi-collapsed-btn-padding-x: 24px;
+  --pi-collapsed-btn-border: transparent;
+  --pi-collapsed-btn-radius: 999px;
+  --pi-collapsed-btn-bg: #ffffff;
+  --pi-collapsed-btn-fg: #2b2b2b;
+  --pi-collapsed-btn-shadow: 0 0 0 1px rgba(248, 168, 255, 0.04),
+    0 8px 18px -14px rgba(222, 140, 255, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+  --pi-collapsed-btn-hover-shadow: 0 0 0 1px rgba(248, 168, 255, 0.08),
+    0 10px 22px -12px rgba(222, 140, 255, 0.28), 0 3px 8px 0 rgba(0, 0, 0, 0.1);
+  --pi-collapsed-btn-font-size: 14px;
+  --pi-collapsed-btn-font-weight: 400;
+  --pi-collapsed-btn-line-height: 32px;
+  --pi-collapsed-btn-inner-bg: #ffffff;
+  --pi-collapsed-btn-decoration: conic-gradient(
+    from 0deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0) 58%,
+    rgba(246, 200, 255, 0.35) 64%,
+    rgba(255, 238, 247, 0.94) 70%,
+    rgba(248, 168, 255, 1) 78%,
+    rgba(255, 184, 220, 0.98) 86%,
+    rgba(246, 200, 255, 0.45) 92%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  --pi-collapsed-btn-decoration-opacity: 0.95;
+  --pi-transition-fast: 180ms ease;
+  --pi-transition-medium: 320ms ease;
+}