From cec367ae04946c195666e4d6b72db0c279422231 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 15 Nov 2023 11:48:49 +0100
Subject: [PATCH] [base][docs] Export Base UI theme in stylesheet (#39694)

---
 docs/pages/_app.js                            |   1 +
 docs/pages/base-theme.css                     | 981 ++++++++++++++++++
 .../experiments/base/components-gallery.tsx   | 379 +++++++
 3 files changed, 1361 insertions(+)
 create mode 100644 docs/pages/base-theme.css
 create mode 100644 docs/pages/experiments/base/components-gallery.tsx

diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index f1c3484eeb4eb8..2ad5e3985c6559 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -29,6 +29,7 @@ import findActivePage from 'docs/src/modules/utils/findActivePage';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import getProductInfoFromUrl from 'docs/src/modules/utils/getProductInfoFromUrl';
 import './global.css';
+import './base-theme.css';
 
 // Remove the license warning from demonstration purposes
 LicenseInfo.setLicenseKey(process.env.NEXT_PUBLIC_MUI_LICENSE);
diff --git a/docs/pages/base-theme.css b/docs/pages/base-theme.css
new file mode 100644
index 00000000000000..15601f3dbf8d25
--- /dev/null
+++ b/docs/pages/base-theme.css
@@ -0,0 +1,981 @@
+:root {
+  --cyan-50: #e9f9fc;
+  --cyan-100: #c1ecf4;
+  --cyan-200: #99dae5;
+  --cyan-300: #66bbca;
+  --cyan-400: #1f91a5;
+  --cyan-500: #0d535f;
+  --cyan-600: #094651;
+  --cyan-700: #063b44;
+  --cyan-800: #042f37;
+  --cyan-900: #022126;
+
+  --grey-50: #f3f6f9;
+  --grey-100: #e5eaf2;
+  --grey-200: #dae2ed;
+  --grey-300: #c7d0dd;
+  --grey-400: #b0b8c4;
+  --grey-500: #9da8b7;
+  --grey-600: #6b7a90;
+  --grey-700: #434d5b;
+  --grey-800: #303740;
+  --grey-900: #1c2025;
+}
+
+.GalleryBadge {
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  font-variant: tabular-nums;
+  list-style: none;
+  font-family: IBM Plex Sans, sans-serif;
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+}
+
+.GalleryBadge-badge {
+  box-sizing: border-box;
+  z-index: auto;
+  position: absolute;
+  top: 0;
+  right: 0;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 6px;
+  color: #fff;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 22px;
+  white-space: nowrap;
+  text-align: center;
+  border-radius: 12px;
+  background: var(--cyan-500);
+  box-shadow: 0px 4px 8px var(--GalleryBadge-badge-boxShadow-color, var(--grey-300));
+  transform: translate(50%, -50%);
+  transform-origin: 100% 0;
+}
+
+.GalleryBadge-content {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  background: var(--GalleryBadge-content-background-color, var(--grey-300));
+  display: inline-block;
+  vertical-align: middle;
+}
+
+@media (prefers-color-scheme: dark) {
+  .GalleryBadge {
+    --GalleryBadge-badge-boxShadow-color: var(--grey-900);
+    --GalleryBadge-content-background-color: var(--grey-400);
+  }
+}
+
+.GalleryButton {
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  background-color: var(--cyan-500);
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  border: 1px solid var(--cyan-500);
+  box-shadow: 0 2px 4px var(--GalleryButton-boxShadow-color, rgba(13, 84, 99, 0.5)),
+    inset 0 1.5px 1px var(--cyan-400), inset 0 -2px 1px var(--cyan-600);
+}
+.GalleryButton:hover {
+  background-color: var(--cyan-600);
+}
+.GalleryButton:active {
+  background-color: var(--cyan-700);
+  box-shadow: none;
+}
+.GalleryButton:focus-visible {
+  box-shadow: 0 0 0 4px var(--GalleryButton-focusVisible-boxShadow-color, var(--cyan-200));
+  outline: none;
+}
+.GalleryButton:disabled {
+  background-color: var(--GalleryButton-disabled-background-color, var(--grey-200));
+  color: var(--GalleryButton-disabled-color, var(--grey-700));
+  border: 0;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+.GalleryButton:disabled:hover {
+  background-color: var(--GaleryButton-disabled-hover-background-color, var(--grey-200));
+}
+
+@media (prefers-color-scheme: dark) {
+  .GalleryButton {
+    --GalleryButton-boxShadow-color: rgba(0, 0, 0, 0.5);
+    --GalleryButton-focusVisible-boxShadow-color: var(--cyan-300);
+    --GalleryButton-disabled-color: var(--grey-200);
+    --GalleryButton-disabled-background-color: var(--grey-700);
+    --GaleryButton-disabled-hover-background-color: var(--grey-700);
+  }
+}
+
+.GalleryInput .MuiInput-input {
+  width: 320px;
+  font-family: IBM Plex Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+  padding: 8px 12px;
+  border-radius: 8px;
+  color: var(--GalleryInput-input-color, var(--grey-900));
+  background: var(--GalleryInput-input-background-color, '#fff');
+  border: 1px solid var(--GalleryInput-input-border-color, var(--grey-200));
+  box-shadow: 0px 2px 2px var(--GalleryInput-input-boxShadow-color, var(--grey-50));
+}
+.GalleryInput .MuiInput-input:hover {
+  border-color: var(--cyan-400);
+}
+.GalleryInput .MuiInput-input:focus {
+  outline: 0;
+  border-color: var(--cyan-400);
+  box-shadow: 0 0 0 3px var(--GalleryInput-input-focus-boxShadow-color, var(--cyan-200));
+}
+
+@media (prefers-color-scheme: dark) {
+  .GalleryInput {
+    --GalleryInput-input-color: var(--grey-300);
+    --GalleryInput-input-background-color: var(--grey-900);
+    --GalleryInput-input-border-color: var(--grey-700);
+    --GalleryInput-input-boxShadow-color: var(--grey-900);
+    --GalleryInput-input-focus-boxShadow-color: var(--cyan-600);
+  }
+}
+
+.GalleryMenu-listbox {
+  font-family: IBM Plex Sans, sans-serif;
+  font-size: 0.875rem;
+  box-sizing: border-box;
+  padding: 6px;
+  margin: 12px 0;
+  min-width: 200px;
+  border-radius: 12px;
+  overflow: auto;
+  outline: 0px;
+  background: var(--GalleryMenu-listbox-background, #fff);
+  border: 1px solid var(--GalleryMenu-listbox-border-color, var(--grey-200));
+  color: var(--GalleryMenu-listbox-color, var(--grey-900));
+  box-shadow: 0px 4px 30px var(--GalleryMenu-listbox-boxShadow-color, var(--grey-200));
+}
+
+.GalleryMenu-item {
+  list-style: none;
+  padding: 8px;
+  border-radius: 8px;
+  cursor: default;
+  user-select: none;
+}
+
+.GalleryMenu-item:last-of-type {
+  border-bottom: none;
+}
+
+.GalleryMenu-item.Mui-focusVisible {
+  outline: 3px solid var(--GalleryMenu-item-outline-color, var(--cyan-200));
+  background-color: var(--GalleryMenu-item-background-color, var(--grey-100));
+  color: var(--GalleryMenu-item-color, var(--grey-900));
+}
+
+.GalleryMenu-item.Mui-disabled {
+  color: var(--GalleryMenu-item-disabled-color, var(--grey-400));
+}
+
+.GalleryMenu-item:hover:not(.Mui-disabled) {
+  background-color: var(--GalleryMenu-item-hover-background-color, var(--cyan-50));
+  color: var(--GalleryMenu-item-hover-color, var(--grey-900));
+}
+
+.GalleryMenu {
+  z-index: 1;
+}
+
+@media (prefers-color-scheme: dark) {
+  .GalleryInput {
+    --GalleryMenu-listbox-background: var(--grey-900);
+    --GalleryMenu-listbox-border-color: var(--grey-700);
+    --GalleryMenu-listbox-color: var(--grey-300);
+    --GalleryMenu-listbox-boxShadow-color: var(--grey-900);
+    --GalleryMenu-item-outline-color: var(--cyan-600);
+    --GalleryMenu-item-background-color: var(--grey-800);
+    --GalleryMenu-item-color: var(--grey-300);
+    --GalleryMenu-item-disabled-color: var(--grey-700);
+    --GalleryMenu-item-hover-background-color: var(--cyan-800);
+    --GalleryMenu-item-hover-color: var(--grey-300);
+  }
+}
+
+.GalleryNumberInput {
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 400;
+  border-radius: 8px;
+  color: var(--GalleryNumberInput-color, var(--grey-900));
+  background: var(--GalleryNumberInput-background-color, '#fff');
+  border: 1px solid var(--GalleryNumberInput-border-color, var(--grey-200));
+  box-shadow: 0px 2px 4px var(--GalleryNumberInput-boxShadow-color, rgba(0, 0, 0, 0.05));
+  display: grid;
+  grid-template-columns: 1fr 19px;
+  grid-template-rows: 1fr 1fr;
+  overflow: hidden;
+  column-gap: 8px;
+  padding: 4px;
+}
+
+.GalleryNumberInput:hover {
+  border-color: var(--cyan-400);
+}
+
+.GalleryNumberInput.Mui-focused {
+  border-color: var(--cyan-400);
+  box-shadow: 0 0 0 3px var(--GalleryNumberInput-focused-boxShadow-color, var(--cyan-200));
+}
+
+.GalleryNumberInput .input {
+  font-size: 0.875rem;
+  font-family: inherit;
+  font-weight: 400;
+  line-height: 1.5;
+  grid-column: 1/2;
+  grid-row: 1/3;
+  color: var(--GalleryNumberInput-input-color, var(--grey-900));
+  background: inherit;
+  border: none;
+  border-radius: inherit;
+  padding: 8px 12px;
+  outline: 0;
+}
+
+.GalleryNumberInput .input:focus-visible {
+  outline: 0;
+}
+
+.GalleryNumberInput .btn {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  appearance: none;
+  padding: 0;
+  width: 19px;
+  height: 19px;
+  font-family: system-ui, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1;
+  box-sizing: border-box;
+  background: var(--GalleryNumberInput-btn-background-color, '#fff');
+  border: 0;
+  color: var(--GalleryNumberInput-btn-color, var(--grey-900));
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 120ms;
+}
+
+.GalleryNumberInput .btn:hover {
+  background: var(--GalleryNumberInput-btn-hover-background-color, var(--grey-50));
+  border-color: var(--GalleryNumberInput-btn-hover-border-color, var(--grey-300));
+  cursor: pointer;
+}
+
+.GalleryNumberInput .btn.increment {
+  grid-column: 2/3;
+  grid-row: 1/2;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  border: 1px solid;
+  border-bottom: 0;
+  border-color: var(--GalleryNumberInput-btn-increment-border-color, var(--grey-200));
+  background: var(--GalleryNumberInput-btn-increment-background-color, var(--grey-50));
+  color: var(--GalleryNumberInput-btn-increment-color, var(--grey-900));
+
+  &:hover {
+    cursor: pointer;
+    color: #fff;
+    background: var(--GalleryNumberInput-btn-increment-hover-background-color, var(--cyan-500));
+    border-color: var(--GalleryNumberInput-btn-increment-hover-color, var(--cyan-600));
+  }
+}
+
+.GalleryNumberInput .btn.decrement {
+  grid-column: 2/3;
+  grid-row: 2/3;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border: 1px solid;
+  border-color: var(--GalleryNumberInput-btn-decrement-border-color, var(--grey-200));
+  background: var(--GalleryNumberInput-btn-decrement-background-color, var(--grey-50));
+  color: var(--GalleryNumberInput-btn-decrement-color, var(--grey-900));
+}
+
+.GalleryNumberInput .btn.decrement:hover {
+  cursor: pointer;
+  color: #fff;
+  background: var(--GalleryNumberInput-btn-decrement-hover-background-color, var(--cyan-500));
+  border-color: var(--GalleryNumberInput-btn-decrement-hover-border-color, var(--cyan-600));
+}
+.GalleryNumberInput .btn.decrement .arrow {
+  transform: translateY(-1px);
+}
+
+@media (prefers-color-scheme: dark) {
+  .GalleryNumberInput {
+    --GalleryNumberInput-color: var(--grey-300);
+    --GalleryNumberInput-background-color: var(--grey-900);
+    --GalleryNumberInput-border-color: var(--grey-700);
+    --GalleryNumberInput-boxShadow-color: gba(0, 0, 0, 0.5);
+    --GalleryNumberInput-focused-boxShadow-color: var(--cyan-500);
+    --GalleryNumberInput-input-color: var(--grey-300);
+    --GalleryNumberInput-btn-color: var(--grey-300);
+    --GalleryNumberInput-btn-increment-border-color: var(--grey-800);
+    --GalleryNumberInput-btn-increment-background-color: var(--grey-900);
+    --GalleryNumberInput-btn-increment-color: var(--grey-200);
+    --GalleryNumberInput-btn-increment-hover-background-color: var(--cyan-100);
+    --GalleryNumberInput-btn-increment-hover-color: var(--cyan-400);
+    --GalleryNumberInput-btn-decrement-hover-background-color: var(--cyan-100);
+    --GalleryNumberInput-btn-decrement-hover-border-color: var(--cyan-400);
+    --GalleryNumberInput-btn-decrement-border-color: var(--grey-800);
+    --GalleryNumberInput-btn-decrement-background-color: var(--grey-900);
+    --GalleryNumberInput-btn-decrement-color: var(--grey-200);
+    --GalleryNumberInput-btn-hover-background-color: var(--grey-800);
+    --GalleryNumberInput-btn-hover-border-color: var(--grey-600);
+    --GalleryNumberInput-btn-background-color: var(--grey-900);
+  }
+}
+
+.GalleryPopper,
+.GalleryPopup {
+  border-radius: 8px;
+  padding: 0.75rem;
+  font-size: 0.875rem;
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-weight: 500;
+  opacity: 1;
+  margin: 0.25rem 0px;
+}
+
+.GalleryPopper {
+  background-color: var(--GalleryPopper-background-color, #fff);
+  border: 1px solid var(--GalleryPopper-color, var(--grey-200));
+  box-shadow: 0 4px 8px var(--GalleryPopper-boxShadow-color, rgb(0 0 0 / 0.1));
+  color: var(--GalleryPopper-color, var(--grey-700));
+}
+
+.GalleryPopup {
+  background-color: var(--GalleryPopup-background-color, #fff);
+  border: 1px solid var(--GalleryPopup-color, var(--grey-200));
+  box-shadow: 0 4px 8px var(--GalleryPopup-boxShadow-color, rgb(0 0 0 / 0.1));
+  color: var(--GalleryPopup-color, var(--grey-700));
+}
+
+@media (prefers-color-scheme: dark) {
+  .GalleryPopper {
+    --GalleryPopper-background-color: var(--grey-900);
+    --GalleryPopper-border-color: var(--grey-700);
+    --GalleryPopper-color: var(--grey-100);
+    --GalleryPopper-boxShadow-color: rgb(0 0 0 / 0.7);
+  }
+
+  .GalleryPopup {
+    --GalleryPopup-background-color: var(--grey-900);
+    --GalleryPopup-border-color: var(--grey-700);
+    --GalleryPopup-color: var(--grey-100);
+    --GalleryPopup-boxShadow-color: rgb(0 0 0 / 0.7);
+  }
+}
+
+.GallerySelect {
+  font-family: IBM Plex Sans, sans-serif;
+  font-size: 0.875rem;
+  box-sizing: border-box;
+  min-width: 320px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  text-align: left;
+  line-height: 1.5;
+  background: var(--GallerySelect-background-color, #fff);
+  border: 1px solid var(--GallerySelect-border-color, var(--grey-200));
+  color: var(--GallerySelect-color, var(--grey-900));
+  position: relative;
+  box-shadow: 0px 2px 4px var(--GallerySelect-boxShadow-color, rgba(0, 0, 0, 0.05));
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 120ms;
+
+  &:hover {
+    background: var(--GallerySelect-hover-background-color, var(--grey-50));
+    border-color: var(--GallerySelect-hover-border-color, var(--grey-300));
+  }
+
+  &.Mui-focusVisible {
+    outline: 0;
+    border-color: var(--cyan-400);
+    box-shadow: 0 0 0 3px var(--GallerySelect-focusVisible-boxShadow-color, var(--cyan-200));
+  }
+
+  & > svg {
+    font-size: 1rem;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    right: 10px;
+  }
+}
+.GallerySelect-listbox {
+  font-family: IBM Plex Sans, sans-serif;
+  font-size: 0.875rem;
+  box-sizing: border-box;
+  padding: 6px;
+  margin: 12px 0;
+  min-width: 320px;
+  border-radius: 12px;
+  overflow: auto;
+  outline: 0px;
+  background: var(--GallerySelect-listbox-background-color, #fff);
+  border: 1px solid var(--GallerySelect-listbox-border-color, var(--grey-200));
+  color: var(--GallerySelect-listbox-color, var(--grey-900));
+  box-shadow: 0px 4px 6px var(--GallerySelect-listbox-boxShadow-color, rgba(0, 0, 0, 0.05));
+}
+.GallerySelect-popper {
+  z-index: 1;
+}
+.GallerySelect-option {
+  list-style: none;
+  padding: 8px;
+  border-radius: 8px;
+  cursor: default;
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+
+  &.Mui-selected {
+    background-color: var(--GallerySelect-option-selected-background-color, var(--cyan-100));
+    color: var(--GallerySelect-option-selected-color, var(--cyan-900));
+  }
+
+  &.MuiOption-highlighted {
+    background-color: var(--SelectGallery-option-highlighted-background-color, var(--grey-100));
+    color: var(--SelectGallery-option-highlighted-color, var(--grey-900));
+  }
+
+  &.MuiOption-highlighted.Mui-selected {
+    background-color: var(
+      --GallerySelect-option-highlighted-selected-background-color,
+      var(--cyan-100)
+    );
+    color: var(--GallerySelect-option-highlighted-selected-color, var(--cyan-900));
+  }
+
+  &.Mui-disabled {
+    color: var(--GallerySelect-option-disabled-color var(--grey-700), var(--grey-400));
+  }
+
+  &:hover:not(.Mui-disabled) {
+    background-color: var(--GallerySelect-option-disabled-background-color, var(--grey-100));
+    color: var(--GallerySelect-option-disabled-color, var(--grey-900));
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .GallerySelect {
+    --GallerySelect-background-color: var(--grey-900);
+    --GallerySelect-border-color: var(--grey-700);
+    --GallerySelect-color: var(--grey-300);
+    --GallerySelect-boxShadow-color: rgba(0, 0, 0, 0.5);
+    --GallerySelect-hover-background-color: var(--grey-800);
+    --GallerySelect-hover-border-color: var(--grey-600);
+    --GallerySelect-focusVisible-boxShadow-color: var(--cyan-600);
+    --GallerySelect-listbox-background-color: var(--grey-900);
+    --GallerySelect-listbox-border-color: var(--grey-700);
+    --GallerySelect-listbox-color: var(--grey-300);
+    --GallerySelect-listbox-boxShadow-color: rgba(0, 0, 0, 0.5);
+    --GallerySelect-option-selected-background-color: var(--cyan-700);
+    --GallerySelect-option-selected-color: var(--cyan-50);
+    --GallerySelect-option-disabled-background-color: var(--grey-800);
+    --GallerySelect-option-disabled-color: var(--grey-300);
+    --SelectGallery-option-highlighted-background-color: var(--grey-800);
+    --SelectGallery-option-highlighted-color: var(--grey-300);
+    --GallerySelect-option-highlighted-selected-background-color: var(--cyan-700);
+    --GallerySelect-option-highlighted-selected-color: var(--cyan-50);
+    --GallerySelect-option-disabled-color: var(--grey-700);
+  }
+}
+
+.GallerySlider {
+  color: var(--GallerySlider-color, var(--cyan-500));
+  height: 6px;
+  width: 100%;
+  padding: 16px 0;
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  touch-action: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.GallerySlider:hover {
+  opacity: 1;
+}
+
+.GallerySlider.Mui-disabled {
+  pointer-events: none;
+  cursor: default;
+  color: var(--GallerySlider-disabled-color, var(--grey-300));
+  opacity: 0.5;
+  outline: none;
+}
+
+.GallerySlider-rail {
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 4px;
+  border-radius: 2px;
+  background-color: currentColor;
+  opacity: 0.4;
+}
+
+.GallerySlider-track {
+  display: block;
+  position: absolute;
+  height: 4px;
+  border-radius: 2px;
+  background-color: currentColor;
+}
+
+.GallerySlider-thumb {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  margin-left: -6px;
+  margin-top: -6px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  outline: 0;
+  border: 3px solid currentColor;
+  background-color: #fff;
+}
+
+/* TODO: alpha used, needs to be changed */
+/* .GallerySlider-thumb:hover {
+  box-shadow: 0 0 0 0.25rem ${alpha(isDarkMode ? var(--cyan-300) : var(--cyan-200), 0.5)};
+} */
+
+.GallerySlider-thumb:focus-visible {
+  box-shadow: 0 0 0 4px var(--GallerySlider-focusVisible-boxShadow-color, var(--cyan-200));
+}
+
+.GallerySlider-thumb.Mui-active {
+  box-shadow: 0 0 0 4px var(--GallerySlider-active-boxShadow-color, var(--cyan-300));
+}
+
+@media (prefers-color-scheme: dark) {
+  .GallerySlider {
+    --GallerySlider-color: var(--cyan-300);
+    --GallerySlider-disabled-color: var(--grey-600);
+    --GallerySlider-focusVisible-boxShadow-color: var(--cyan-700);
+    --GallerySlider-active-boxShadow-color: var(--cyan-600);
+  }
+}
+
+@keyframes in-right {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+.GallerySnackbar {
+  position: fixed;
+  z-index: 5500;
+  display: flex;
+  bottom: 16px;
+  right: 16px;
+  max-width: 560px;
+  min-width: 300px;
+}
+
+.GallerySnackbar-content {
+  display: flex;
+  gap: 8px;
+  overflow: hidden;
+  background-color: var(--GallerySnackbar-content-background-color, #fff);
+  border-radius: 8px;
+  border: 1px solid var(--GallerySnackbar-content-border-color, var(--grey-200));
+  box-shadow: 0 2px 16px var(--GallerySnackbar-content-boxShadow-color, var(--grey-200));
+  padding: 0.75rem;
+  color: var(--GallerySnackbar-content-color, var(--grey-900));
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
+
+  & .snackbar-message {
+    flex: 1 1 0%;
+    max-width: 100%;
+  }
+
+  & .snackbar-title {
+    margin: 0;
+    line-height: 1.5rem;
+    margin-right: 0.5rem;
+  }
+
+  & .snackbar-description {
+    margin: 0;
+    line-height: 1.5rem;
+    font-weight: 400;
+    color: var(--GallerySnackbar-description-color, var(--grey-800));
+  }
+
+  & .snackbar-close-icon {
+    cursor: pointer;
+    flex-shrink: 0;
+    padding: 2px;
+    border-radius: 4px;
+
+    &:hover {
+      background: var(--GallerySnackbar-closeIcon-background-color, var(--grey-50));
+    }
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .GallerySnackbar {
+    --GallerySnackbar-content-background-color: var(--grey-900);
+    --GallerySnackbar-content-border-color: var(--grey-700);
+    --GallerySnackbar-content-color: var(--grey-50);
+    --GallerySnackbar-description-color: var(--grey-400);
+    --GallerySnackbar-closeIcon-background-color: var(--grey-800);
+    --GallerySnackbar-content-boxShadow-color: rgba(0, 0, 0, 0.5);
+  }
+}
+
+.GallerySwitch {
+  font-size: 0;
+  position: relative;
+  display: inline-block;
+  width: 38px;
+  height: 24px;
+  margin: 10px;
+  cursor: pointer;
+}
+
+.GallerySwitch.Mui-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.GallerySwitch-track {
+  background: var(--GallerySwitch-track-background-color, var(--grey-50));
+  border: 1px solid var(--GallerySwitch-track-border-color, var(--grey-200));
+  border-radius: 24px;
+  display: block;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  box-shadow: inset 0px 1px 1px var(--GallerySwitch-track-boxShadow-color, rgba(0, 0, 0, 0.05));
+}
+
+.GallerySwitch:hover .GallerySwitch-track {
+  background: var(--GallerySwitch-hover-track-background-color, var(--grey-100));
+  border-color: var(--GallerySwitch-hover-track-border-color, var(--grey-300));
+}
+
+.GallerySwitch-thumb {
+  display: block;
+  width: 16px;
+  height: 16px;
+  top: 4px;
+  left: 4px;
+  border-radius: 16px;
+  border: 1px solid var(--GallerySwitch-track-border-color, var(--grey-200));
+  background-color: #fff;
+  position: relative;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 120ms;
+}
+
+.GallerySwitch.Mui-focusVisible .GallerySwitch-track {
+  box-shadow: 0 0 0 3px var(--GallerySwitch-focusVisible-track, var(--cyan-200));
+}
+
+.GallerySwitch.Mui-checked .GallerySwitch-thumb {
+  left: 18px;
+  background-color: #fff;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.GallerySwitch.Mui-checked .GallerySwitch-track {
+  background: var(--cyan-500);
+}
+
+.GallerySwitch-input {
+  cursor: inherit;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  z-index: 1;
+  margin: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .GallerySwitch {
+    --GallerySwitch-track-background-color: var(--grey-900);
+    --GallerySwitch-track-border-color: var(--grey-800);
+    --GallerySwitch-hover-track-background-color: var(--grey-800);
+    --GallerySwitch-hover-track-border-color: var(--grey-600);
+    --GallerySwitch-track-boxShadow-color: rgba(0, 0, 0, 0.5);
+    --GallerySwitch-focusVisible-track: var(--cyan-400);
+  }
+}
+
+/* Demo's table styles start */
+
+.GalleryTablePaginationDemo {
+  width: 500px;
+  max-width: 100%;
+}
+
+.GalleryTablePaginationDemo th {
+  background-color: var(--GalleryTablePaginationDemo-th-background-color, #fff);
+}
+
+.GalleryTablePaginationDemo table {
+  font-family: IBM Plex Sans, sans-serif;
+  font-size: 0.875rem;
+  width: 100%;
+  background-color: var(--GalleryTablePainationDemo-table-background-color, #fff);
+  box-shadow: 0px 2px 16px var(--GalleryTablePainationDemo-table-boxShadow-color, var(--grey-200));
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid var(--GalleryTablePainationDemo-table-border-color, var(--grey-200));
+}
+
+.GalleryTablePaginationDemo td,
+.GalleryTablePaginationDemo th {
+  padding: 16px;
+}
+
+.GalleryTablePaginationDemo th {
+  background-color: var(--GalleryTablePaginationDemo-th-background-color, #fff);
+}
+
+@media (prefers-color-scheme: dark) {
+  .GalleryTablePaginationDemo {
+    --GalleryTablePainationDemo-table-background-color: var(--grey-900);
+    --GalleryTablePainationDemo-table-boxShadow-color: var(--grey-900);
+    --GalleryTablePainationDemo-table-border-color: var(--grey-800);
+    --GalleryTablePaginationDemo-th-background-color: var(--grey-900);
+    --GalleryTablePaginationDemo-th-background-color: var(--grey-900);
+  }
+}
+
+/* Demo's table styles end */
+
+.GalleryTablePagination .MuiTablePagination-spacer {
+  display: none;
+}
+
+.GalleryTablePagination .MuiTablePagination-toolbar {
+  font-family: IBM Plex Sans, sans-serif;
+  font-size: 0.875rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.GalleryTablePagination .MuiTablePagination-selectLabel {
+  margin: 0;
+}
+
+.GalleryTablePagination .MuiTablePagination-select {
+  padding: 2px 6px;
+  border: 1px solid var(--GalleryTablePagination-select-border-color, var(--grey-200));
+  border-radius: 50px;
+  background-color: transparent;
+}
+
+.GalleryTablePagination .MuiTablePagination-select:hover {
+  background-color: var(--GalleryTablePagination-select-hover-background-color, var(--grey-50));
+}
+
+.GalleryTablePagination .MuiTablePagination-select:focus {
+  outline: 1px solid var(--GalleryTablePagination-select-focus-outline-color, var(--cyan-200));
+}
+
+.GalleryTablePagination .MuiTablePagination-displayedRows {
+  margin: 0;
+
+  @media (min-width: 768px) {
+    margin-left: auto;
+  }
+}
+
+.GalleryTablePagination .MuiTablePagination-actions {
+  padding: 2px 6px;
+  border: 1px solid var(--GalleryTablePagination-actions-border-color, var(--grey-200));
+  border-radius: 50px;
+  text-align: center;
+}
+
+.GalleryTablePagination .MuiTablePagination-actions > button {
+  margin: 0 8px;
+  border: transparent;
+  border-radius: 2px;
+  background-color: transparent;
+}
+
+.GalleryTablePagination .MuiTablePagination-actions > button:hover {
+  background-color: var(
+    --GalleryTablePagination-actions-button-hover-background-color,
+    var(--grey-50)
+  );
+}
+
+.GalleryTablePagination .MuiTablePagination-actions > button:focus {
+  outline: 1px solid
+    var(--GalleryTablePagination-actions-button-focus-outline-color, var(--cyan-200));
+}
+
+.GalleryTablePagination .MuiTablePagination-actions > button:disabled {
+  opacity: 0.7;
+}
+
+@media (prefers-color-scheme: dark) {
+  .GalleryTablePagination {
+    --GalleryTablePagination-select-border-color: var(--grey-800);
+    --GalleryTablePagination-select-hover-background-color: var(--grey-800);
+    --GalleryTablePagination-select-focus-outline-color: var(--cyan-400);
+    --GalleryTablePagination-actions-border-color: var(--grey-800);
+    --GalleryTablePagination-actions-button-hover-background-color: var(--grey-800);
+    --GalleryTablePagination-actions-button-focus-outline-color: var(--cyan-400);
+  }
+}
+
+.GalleryTabsList {
+  min-width: 400px;
+  background-color: var(--cyan-500);
+  border-radius: 12px;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: space-between;
+  box-shadow: 0px 4px 6px var(--GalleryTabsList-boxShadow-color, var(--grey-200));
+}
+
+.GalleryTab {
+  font-family: 'IBM Plex Sans', sans-serif;
+  color: #fff;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 600;
+  background-color: transparent;
+  width: 100%;
+  padding: 10px 12px;
+  margin: 6px;
+  border: none;
+  border-radius: 7px;
+  display: flex;
+  justify-content: center;
+}
+
+.GalleryTab:hover {
+  background-color: var(--cyan-400);
+}
+
+.GalleryTab:focus {
+  color: #fff;
+  outline: 3px solid var(--cyan-200);
+}
+
+.GalleryTab.Mui-selected {
+  background-color: #fff;
+  color: var(--cyan-600);
+}
+
+.GalleryTab.Mui-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.GalleryTabPanel {
+  width: 100%;
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 0.875rem;
+  padding: 20px 12px;
+  background: var(--GalleryTabPanel-background-color, #fff);
+  border: 1px solid var(--GalleryTabPanel-border-color, var(--grey-200));
+  border-radius: 12px;
+  opacity: 0.6;
+}
+
+@media (prefers-color-scheme: dark) {
+  .GalleryTabList {
+    --GalleryTabsList-boxShadow-color: var(--grey-900);
+  }
+  .GalleryTabPanel {
+    --GalleryTabPanel-background-color: var(--grey-900);
+    --GalleryTabPanel-border-color: var(--grey-700);
+  }
+}
+
+.GalleryTextarea {
+  width: 320px;
+  font-family: IBM Plex Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+  padding: 12px;
+  border-radius: 8px 8px 0 8px;
+  color: var(--GalleryTextarea-color, var(--grey-900));
+  background: var(--GalleryTextarea-background-color, '#fff');
+  border: 1px solid var(--GalleryTextarea-border-color, var(--grey-200));
+  box-shadow: 0px 2px 24px var(--GalleryTextarea-boxShadow-color, var(--grey-50));
+}
+
+.GalleryTextarea:hover {
+  border-color: var(--cyan-400);
+}
+
+.GalleryTextarea:focus {
+  border-color: var(--cyan-400);
+  box-shadow: 0 0 0 3px var(--GalleryTextarea-focus-boxShadow-color, var(--cyan-200));
+  outline: none;
+}
+
+/* firefox */
+.GalleryTextarea:focus-visible {
+  outline: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .GalleryTextarea {
+    --GalleryTextarea-color: var(--grey-300);
+    --GalleryTextarea-background-color: var(--grey-900);
+    --GalleryTextarea-border-color: var(--grey-700);
+    --GalleryTextarea-boxShadow-color: var(--cyan-900);
+    --GalleryTextarea-focus-boxShadow-color: var(--cyan-600);
+  }
+}
diff --git a/docs/pages/experiments/base/components-gallery.tsx b/docs/pages/experiments/base/components-gallery.tsx
new file mode 100644
index 00000000000000..648c57a1266549
--- /dev/null
+++ b/docs/pages/experiments/base/components-gallery.tsx
@@ -0,0 +1,379 @@
+import * as React from 'react';
+import Stack from '@mui/system/Stack';
+import { Transition } from 'react-transition-group';
+import { Badge } from '@mui/base/Badge';
+import { Button } from '@mui/base/Button';
+import { Input } from '@mui/base/Input';
+import { Menu } from '@mui/base/Menu';
+import { MenuItem } from '@mui/base/MenuItem';
+import { MenuButton } from '@mui/base/MenuButton';
+import { Dropdown } from '@mui/base/Dropdown';
+import { Popper } from '@mui/base/Popper';
+import { Unstable_Popup as Popup } from '@mui/base/Unstable_Popup';
+import { Unstable_NumberInput as NumberInput } from '@mui/base/Unstable_NumberInput';
+import { Select, SelectRootSlotProps } from '@mui/base/Select';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
+import { Option } from '@mui/base/Option';
+import { Slider } from '@mui/base/Slider';
+import { Snackbar } from '@mui/base/Snackbar';
+// TODO: re-export from the @mui/base/Snackbar, if developer only uses the component
+// it is not intuitive to import types from a different module
+import { SnackbarCloseReason } from '@mui/base/useSnackbar';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import CloseIcon from '@mui/icons-material/Close';
+import { Switch } from '@mui/base/Switch';
+import { TablePagination } from '@mui/base/TablePagination';
+import { Tabs } from '@mui/base/Tabs';
+import { TabsList } from '@mui/base/TabsList';
+import { TabPanel } from '@mui/base/TabPanel';
+import { Tab } from '@mui/base/Tab';
+import { TextareaAutosize } from '@mui/base/TextareaAutosize';
+
+// Snackbar demo
+const positioningStyles = {
+  entering: 'translateX(0)',
+  entered: 'translateX(0)',
+  exiting: 'translateX(500px)',
+  exited: 'translateX(500px)',
+  unmounted: 'translateX(500px)',
+};
+
+const SelectButton = React.forwardRef(function SelectButton<
+  TValue extends {},
+  Multiple extends boolean,
+>(props: SelectRootSlotProps<TValue, Multiple>, ref: React.ForwardedRef<HTMLButtonElement>) {
+  const { ownerState, ...other } = props;
+  return (
+    <button type="button" {...other} ref={ref}>
+      {other.children}
+      <UnfoldMoreRoundedIcon />
+    </button>
+  );
+});
+
+export default function ComponentsGallery() {
+  // Popper demo
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popper' : undefined;
+
+  // Popup demo
+  const [popupAnchor, setPopupAnchor] = React.useState<null | HTMLElement>(null);
+
+  const popupButtonHandleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setPopupAnchor(popupAnchor ? null : event.currentTarget);
+  };
+
+  const popupOpen = Boolean(popupAnchor);
+  const popupId = open ? 'simple-popup' : undefined;
+
+  // Snackbar demo
+  const [snackbarOpen, setSnackbarOpen] = React.useState(false);
+  const [exited, setExited] = React.useState(true);
+  const nodeRef = React.useRef(null);
+
+  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setSnackbarOpen(false);
+  };
+
+  const handleSnackbarButtonClick = () => {
+    setSnackbarOpen(true);
+  };
+
+  const handleOnEnter = () => {
+    setExited(false);
+  };
+
+  const handleOnExited = () => {
+    setExited(true);
+  };
+
+  // switch demo
+  const label = { 'aria-label': 'Demo switch' };
+
+  // table pagination demo
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(5);
+
+  const handleChangePage = (event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  return (
+    <Stack gap={2} style={{ padding: '8px' }}>
+      <div>
+        <Badge
+          slotProps={{
+            root: { className: 'GalleryBadge' },
+            badge: { className: 'GalleryBadge-badge' },
+          }}
+          badgeContent={5}
+        >
+          <span className="GalleryBadge-content" />
+        </Badge>
+      </div>
+      <div>
+        <Button className="GalleryButton">Button</Button>
+        <Button className="GalleryButton" disabled>
+          Disabled
+        </Button>
+      </div>
+      <div>
+        <Input placeholder="Write your name here" className="GalleryInput" />
+      </div>
+      <div>
+        <Dropdown>
+          <MenuButton className="GalleryButton">My account</MenuButton>
+          <Menu
+            className="GalleryMenu"
+            slotProps={{
+              listbox: { className: 'GalleryMenu-listbox' },
+            }}
+          >
+            <MenuItem className="GalleryMenu-item">Profile</MenuItem>
+            <MenuItem className="GalleryMenu-item">Language settings</MenuItem>
+            <MenuItem className="GalleryMenu-item">Log out</MenuItem>
+          </Menu>
+        </Dropdown>
+      </div>
+      <div style={{ maxWidth: '350px' }}>
+        <NumberInput
+          slotProps={{
+            root: { className: 'GalleryNumberInput' },
+            input: { className: 'input' },
+            decrementButton: { className: 'btn decrement', children: '▾' },
+            incrementButton: { className: 'btn increment', children: '▴' },
+          }}
+          aria-label="Demo number input"
+          placeholder="Type a number…"
+        />
+      </div>
+      <div>
+        <button type="button" aria-describedby={id} className="GalleryButton" onClick={handleClick}>
+          Toggle Popper
+        </button>
+        <Popper id={id} open={open} anchorEl={anchorEl}>
+          <div className="GalleryPopper">The content of the Popper.</div>
+        </Popper>
+      </div>
+      <div>
+        <button
+          type="button"
+          aria-describedby={id}
+          className="GalleryButton"
+          onClick={popupButtonHandleClick}
+        >
+          Toggle Popup
+        </button>
+        <Popup id={popupId} open={popupOpen} anchor={popupAnchor}>
+          <div className="GalleryPopup">The content of the Popup.</div>
+        </Popup>
+      </div>
+      <div>
+        <Select
+          className="GallerySelect"
+          slots={{
+            root: SelectButton,
+          }}
+          slotProps={{
+            listbox: { className: 'GallerySelect-listbox' },
+            popper: { className: 'GallerySelect-popper' },
+          }}
+          defaultValue={10}
+        >
+          <Option className="GallerySelect-option" value={10}>
+            Documentation
+          </Option>
+          <Option className="GallerySelect-option" value={20}>
+            Components
+          </Option>
+          <Option className="GallerySelect-option" value={30}>
+            Features
+          </Option>
+        </Select>
+      </div>
+      <div style={{ width: 320 }}>
+        <Slider
+          slotProps={{
+            root: { className: 'GallerySlider' },
+            rail: { className: 'GallerySlider-rail' },
+            track: { className: 'GallerySlider-track' },
+            thumb: { className: 'GallerySlider-thumb', tabIndex: 0 },
+          }}
+          defaultValue={50}
+        />
+        <Slider
+          slotProps={{
+            root: { className: 'GallerySlider' },
+            rail: { className: 'GallerySlider-rail' },
+            track: { className: 'GallerySlider-track' },
+            thumb: { className: 'GallerySlider-thumb' },
+          }}
+          defaultValue={10}
+          disabled
+        />
+      </div>
+      <div>
+        <button className="GalleryButton" type="button" onClick={handleSnackbarButtonClick}>
+          Open snackbar
+        </button>
+        <Snackbar
+          autoHideDuration={5000}
+          open={snackbarOpen}
+          onClose={handleClose}
+          exited={exited}
+          className="GallerySnackbar"
+        >
+          <Transition
+            timeout={{ enter: 400, exit: 400 }}
+            in={snackbarOpen}
+            appear
+            unmountOnExit
+            onEnter={handleOnEnter}
+            onExited={handleOnExited}
+            nodeRef={nodeRef}
+          >
+            {(status) => (
+              <div
+                className="GallerySnackbar-content"
+                style={{
+                  transform: positioningStyles[status],
+                  transition: 'transform 300ms ease',
+                }}
+                ref={nodeRef}
+              >
+                <CheckRoundedIcon
+                  sx={{
+                    color: 'success.main',
+                    flexShrink: 0,
+                    width: '1.25rem',
+                    height: '1.5rem',
+                  }}
+                />
+                <div className="snackbar-message">
+                  <p className="snackbar-title">Notifications sent</p>
+                  <p className="snackbar-description">
+                    Everything was sent to the desired address.
+                  </p>
+                </div>
+                <CloseIcon onClick={handleClose} className="snackbar-close-icon" />
+              </div>
+            )}
+          </Transition>
+        </Snackbar>
+      </div>
+      <div>
+        <Switch
+          slotProps={{
+            root: { className: 'GallerySwitch' },
+            input: { ...label, className: 'GallerySwitch-input' },
+            thumb: { className: 'GallerySwitch-thumb' },
+            track: { className: 'GallerySwitch-track' },
+          }}
+          defaultChecked
+        />
+        <Switch
+          slotProps={{
+            root: { className: 'GallerySwitch' },
+            input: { ...label, className: 'GallerySwitch-input' },
+            thumb: { className: 'GallerySwitch-thumb' },
+            track: { className: 'GallerySwitch-track' },
+          }}
+        />
+        <Switch
+          slotProps={{
+            root: { className: 'GallerySwitch' },
+            input: { ...label, className: 'GallerySwitch-input' },
+            thumb: { className: 'GallerySwitch-thumb' },
+            track: { className: 'GallerySwitch-track' },
+          }}
+          defaultChecked
+          disabled
+        />
+        <Switch
+          slotProps={{
+            root: { className: 'GallerySwitch' },
+            input: { ...label, className: 'GallerySwitch-input' },
+            thumb: { className: 'GallerySwitch-thumb' },
+            track: { className: 'GallerySwitch-track' },
+          }}
+          disabled
+        />
+      </div>
+      <div className="TablePaginationDemo">
+        <table aria-label="custom pagination table">
+          <tfoot>
+            <tr>
+              <TablePagination
+                className="GalleryTablePagination"
+                rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
+                colSpan={3}
+                count={13}
+                rowsPerPage={rowsPerPage}
+                page={page}
+                slotProps={{
+                  select: {
+                    'aria-label': 'rows per page',
+                  },
+                  actions: {
+                    showFirstButton: true,
+                    showLastButton: true,
+                  },
+                }}
+                onPageChange={handleChangePage}
+                onRowsPerPageChange={handleChangeRowsPerPage}
+              />
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+      <div style={{ maxWidth: '550px' }}>
+        <Tabs defaultValue={0}>
+          <TabsList className="GalleryTabsList">
+            <Tab className="GalleryTab" value={0}>
+              My account
+            </Tab>
+            <Tab className="GalleryTab" value={1}>
+              Profile
+            </Tab>
+            <Tab className="GalleryTab" value={2}>
+              Language
+            </Tab>
+          </TabsList>
+          <TabPanel className="GalleryTabPanel" value={0}>
+            My account page
+          </TabPanel>
+          <TabPanel className="GalleryTabPanel" value={1}>
+            Profile page
+          </TabPanel>
+          <TabPanel className="GalleryTabPanel" value={2}>
+            Language page
+          </TabPanel>
+        </Tabs>
+      </div>
+      <div>
+        <TextareaAutosize
+          className="GalleryTextarea"
+          aria-label="empty textarea"
+          placeholder="Empty"
+        />
+      </div>
+    </Stack>
+  );
+}