hardcode dropdown elevation → floating

packages/demo/src/components/demo/dropdown-menu.tsx

@@ -17,11 +17,9 @@ import {
   DropdownMenuSubTrigger,
 } from "@eqtylab/equality";
 import { Settings, User, LogOut } from "lucide-react";
-import type { Elevation } from "@eqtylab/equality";
 
 export const DropdownMenuDemo = ({
   variant = "default",
-  elevation,
 }: {
   variant?:
     | "default"
@@ -31,7 +29,6 @@ export const DropdownMenuDemo = ({
     | "with-shortcuts"
     | "with-submenu"
     | "with-groups";
-  elevation?: Elevation;
 }) => {
   const [showStatusBar, setShowStatusBar] = useState(true);
   const [showActivityBar, setShowActivityBar] = useState(false);
@@ -46,7 +43,7 @@ export const DropdownMenuDemo = ({
             Open Menu
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" elevation={elevation}>
+        <DropdownMenuContent align="start">
           <DropdownMenuItem>Profile</DropdownMenuItem>
           <DropdownMenuItem>Settings</DropdownMenuItem>
           <DropdownMenuItem>Logout</DropdownMenuItem>
@@ -63,7 +60,7 @@ export const DropdownMenuDemo = ({
             Account Menu
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" elevation={elevation}>
+        <DropdownMenuContent align="start">
           <DropdownMenuLabel>My Account</DropdownMenuLabel>
           <DropdownMenuSeparator />
           <DropdownMenuItem>
@@ -178,7 +175,7 @@ export const DropdownMenuDemo = ({
             More Options
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" elevation={elevation}>
+        <DropdownMenuContent align="start">
           <DropdownMenuItem>Back</DropdownMenuItem>
           <DropdownMenuItem>Forward</DropdownMenuItem>
           <DropdownMenuItem>Reload</DropdownMenuItem>
@@ -210,7 +207,7 @@ export const DropdownMenuDemo = ({
             File Menu
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" elevation={elevation}>
+        <DropdownMenuContent align="start">
           <DropdownMenuGroup>
             <DropdownMenuLabel>File</DropdownMenuLabel>
             <DropdownMenuItem>

packages/demo/src/content/components/dropdown-menu.mdx

@@ -36,45 +36,3 @@ import { ELEVATION } from "@eqtylab/equality";
 ### With Groups
 
 <DropdownMenuDemo client:only="react" variant="with-groups" />
-
-## Elevations
-
-### Sunken
-
-<DropdownMenuDemo
-  client:only="react"
-  variant="with-submenu"
-  elevation={ELEVATION.SUNKEN}
-/>
-
-### Base (default)
-
-<DropdownMenuDemo
-  client:only="react"
-  variant="with-submenu"
-  elevation={ELEVATION.BASE}
-/>
-
-### Raised
-
-<DropdownMenuDemo
-  client:only="react"
-  variant="with-submenu"
-  elevation={ELEVATION.RAISED}
-/>
-
-### Overlay
-
-<DropdownMenuDemo
-  client:only="react"
-  variant="with-submenu"
-  elevation={ELEVATION.OVERLAY}
-/>
-
-### Floating
-
-<DropdownMenuDemo
-  client:only="react"
-  variant="with-submenu"
-  elevation={ELEVATION.FLOATING}
-/>

packages/demo/src/pages/getting-started/elevation.mdx

@@ -70,7 +70,7 @@ Use for UI that overlays the page and requires clear separation from the underly
 
 ### Floating
 
-An elevated surface reserved for UI that must remain visually dominant, even over modals or dropdowns.
+An elevated surface reserved for UI that _must_ remain visually dominant over all other elements.
 
 <DialogWithTableDemo client:only="react" />
 
@@ -88,28 +88,24 @@ import { ELEVATION } from "@eqtylab/equality";
 
 The following components have an `elevation` prop:
 
-| Component       | Default Elevation | Notes                                      |
-| --------------- | ----------------- | ------------------------------------------ |
-| Card            | Raised            |                                            |
-| DisplayField    | Base              |                                            |
-| Dropdown Menu   | Overlay           | in `DropdownContent` component             |
-| Filter Dropdown | Overlay           | for dropdown with `dropdownElevation` prop |
-| Icon            | Sunken            |                                            |
-| Info Card       | Raised            |                                            |
-| Metric Card     | Raised            |                                            |
-| Pagination      | Overlay           | for dropdown with `dropdownElevation` prop |
-| Radio Dropdown  | Overlay           | for dropdown with `dropdownElevation` prop |
-| Select          | Overlay           | in `SelectContent` component               |
-| Sort Selector   | Overlay           | for dropdown with `dropdownElevation` prop |
-| Table           | Base              |                                            |
+| Component    | Default Elevation | Notes                        |
+| ------------ | ----------------- | ---------------------------- |
+| Card         | Raised            |                              |
+| DisplayField | Base              |                              |
+| Icon         | Sunken            |                              |
+| Info Card    | Raised            |                              |
+| Metric Card  | Raised            |                              |
+| Select       | Overlay           | in `SelectContent` component |
+| Table        | Base              |                              |
 
 ### Components with a set fixed elevation
 
-| Component    | Elevation |
-| ------------ | --------- |
-| Alert Dialog | Overlay   |
-| Dialog       | Overlay   |
-| Drawer       | Overlay   |
-| Popover      | Overlay   |
-| Sheet        | Overlay   |
-| Tooltip      | Overlay   |
+| Component     | Elevation |
+| ------------- | --------- |
+| Alert Dialog  | Overlay   |
+| Dialog        | Overlay   |
+| Drawer        | Overlay   |
+| Dropdown Menu | Floating  |
+| Popover       | Floating  |
+| Sheet         | Overlay   |
+| Tooltip       | Overlay   |

packages/ui/src/components/dropdown-menu/dropdown-menu.module.css

@@ -68,59 +68,6 @@
   @apply ml-auto;
 }
 
-/* ELEVATIONS */
-
-.dropdown-menu-content--sunken,
-.dropdown-menu-content--sunken .dropdown-menu-sub-content {
-  @apply bg-background-sunken shadow-shadow-sunken border-border-sunken;
-}
-.dropdown-menu-content--sunken .dropdown-menu-trigger,
-.dropdown-menu-content--sunken .dropdown-menu-item,
-.dropdown-menu-content--sunken .dropdown-menu-checkbox-item,
-.dropdown-menu-content--sunken .dropdown-menu-radio-item {
-  --mix-color: var(--color-background-sunken);
-}
-
-.dropdown-menu-content--base,
-.dropdown-menu-content--base .dropdown-menu-sub-content {
-  @apply bg-background shadow-shadow-base border-border-base;
-}
-.dropdown-menu-content--base .dropdown-menu-trigger,
-.dropdown-menu-content--base .dropdown-menu-item,
-.dropdown-menu-content--base .dropdown-menu-checkbox-item,
-.dropdown-menu-content--base .dropdown-menu-radio-item {
-  --mix-color: var(--color-background);
-}
-
-.dropdown-menu-content--raised,
-.dropdown-menu-content--raised .dropdown-menu-sub-content {
-  @apply bg-background-raised shadow-shadow-raised border-border-raised;
-}
-.dropdown-menu-content--raised .dropdown-menu-trigger,
-.dropdown-menu-content--raised .dropdown-menu-item,
-.dropdown-menu-content--raised .dropdown-menu-checkbox-item,
-.dropdown-menu-content--raised .dropdown-menu-radio-item {
-  --mix-color: var(--color-background-raised);
-}
-
-.dropdown-menu-content--overlay,
-.dropdown-menu-content--overlay .dropdown-menu-sub-content {
-  @apply bg-background-overlay shadow-shadow-overlay border-border-overlay;
-}
-.dropdown-menu-content--overlay .dropdown-menu-trigger,
-.dropdown-menu-content--overlay .dropdown-menu-item,
-.dropdown-menu-content--overlay .dropdown-menu-checkbox-item,
-.dropdown-menu-content--overlay .dropdown-menu-radio-item {
-  --mix-color: var(--color-background-overlay);
-}
-
-.dropdown-menu-content--floating,
-.dropdown-menu-content--floating .dropdown-menu-sub-content {
+.dropdown-menu-content {
   @apply bg-background-floating shadow-shadow-floating border-border-floating;
 }
-.dropdown-menu-content--floating .dropdown-menu-trigger,
-.dropdown-menu-content--floating .dropdown-menu-item,
-.dropdown-menu-content--floating .dropdown-menu-checkbox-item,
-.dropdown-menu-content--floating .dropdown-menu-radio-item {
-  --mix-color: var(--color-background-floating);
-}

packages/ui/src/components/dropdown-menu/dropdown-menu.tsx

@@ -1,10 +1,8 @@
 import * as React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { VariantProps } from 'class-variance-authority';
 import { Check, ChevronRight, Circle } from 'lucide-react';
 
 import styles from '@/components/dropdown-menu/dropdown-menu.module.css';
-import { ELEVATION, generateElevationVariants } from '@/lib/elevations';
 import { cn, getThemeProviderRoot } from '@/lib/utils';
 
 const CheckIcon = Check as React.ComponentType<{ className?: string }>;
@@ -60,26 +58,15 @@ const DropdownMenuSubContent = React.forwardRef<
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
-const dropdownMenuContentElevationVariants = generateElevationVariants(
-  styles,
-  'dropdown-menu-content',
-  ELEVATION.OVERLAY
-);
-
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> &
-    VariantProps<typeof dropdownMenuContentElevationVariants>
->(({ className, sideOffset = 4, elevation = ELEVATION.OVERLAY, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
   <DropdownMenuPortal>
     <DropdownMenuPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
-      className={cn(
-        styles['dropdown-menu-content'],
-        dropdownMenuContentElevationVariants({ elevation }),
-        className
-      )}
+      className={cn(styles['dropdown-menu-content'], className)}
       {...props}
     />
   </DropdownMenuPortal>

packages/ui/src/components/filter-dropdown/filter-dropdown.module.css

@@ -9,12 +9,6 @@
   @apply flex items-center gap-1;
 }
 
-.selected-filters-count {
-  @apply bg-brand-primary text-text-primary;
-  @apply rounded-full px-2 py-0.5;
-  @apply text-xs font-medium;
-}
-
 .chevron-icon {
   @apply text-text-secondary;
 }

packages/ui/src/components/filter-dropdown/filter-dropdown.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ChevronDown } from 'lucide-react';
 
+import { Badge } from '@/components/badge/badge';
 import { Button } from '@/components/button/button';
 import {
   DropdownMenu,
@@ -11,7 +12,6 @@ import {
   DropdownMenuTrigger,
 } from '@/components/dropdown-menu/dropdown-menu';
 import styles from '@/components/filter-dropdown/filter-dropdown.module.css';
-import { ELEVATION, Elevation } from '@/lib/elevations';
 import { cn } from '@/lib/utils';
 
 const ChevronDownIcon = ChevronDown as React.ComponentType<{ className?: string }>;
@@ -25,7 +25,6 @@ interface FilterDropdownProps {
   label: string;
   options: FilterOption[];
   selectedFilters: string[];
-  dropdownElevation?: Elevation;
   onToggleFilter: (value: string) => void;
   onClearAll: () => void;
   buttonClassName?: string;
@@ -36,7 +35,6 @@ const FilterDropdown = ({
   label,
   options,
   selectedFilters,
-  dropdownElevation = ELEVATION.OVERLAY,
   onToggleFilter,
   onClearAll,
   buttonClassName,
@@ -56,17 +54,14 @@ const FilterDropdown = ({
         <Button variant="tertiary" className={cn(styles['selector-button'], buttonClassName)}>
           <span className={styles['selector-button-inner']}>
             {label}
-            {hasSelectedFilters && (
-              <span className={styles['selected-filters-count']}>{selectedFilters.length}</span>
-            )}
+            {hasSelectedFilters && <Badge variant="primary">{selectedFilters.length}</Badge>}
           </span>
           <ChevronDownIcon className={styles['chevron-icon']} />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent
         align="end"
         className={cn(styles['dropdown-menu-content'], contentClassName)}
-        elevation={dropdownElevation}
       >
         <DropdownMenuLabel>
           Filters

packages/ui/src/components/pagination/pagination.tsx

@@ -10,7 +10,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/select/select';
-import { ELEVATION, Elevation } from '@/lib/elevations';
 import { cn } from '@/lib/utils';
 
 const ChevronLeftIcon = ChevronLeft as React.ComponentType<{ className?: string }>;
@@ -26,7 +25,6 @@ interface PaginationProps {
   itemsPerPageOptions?: number[];
   showInfo?: boolean;
   maxVisiblePages?: number;
-  dropdownElevation?: Elevation;
   className?: string;
   type?: string;
   scrollTargetRef?: React.RefObject<HTMLElement | null> | string;
@@ -42,7 +40,6 @@ const Pagination = ({
   itemsPerPageOptions = [10, 25, 50, 100],
   showInfo = true,
   maxVisiblePages = 5,
-  dropdownElevation = ELEVATION.OVERLAY,
   className = '',
   type = '',
   scrollTargetRef,
@@ -149,7 +146,7 @@ const Pagination = ({
                 <SelectTrigger>
                   <SelectValue />
                 </SelectTrigger>
-                <SelectContent elevation={dropdownElevation}>
+                <SelectContent>
                   {itemsPerPageOptions.map((option) => (
                     <SelectItem key={option} value={option.toString()}>
                       {option}

packages/ui/src/components/popover/popover.module.css

@@ -1,9 +1,9 @@
 @reference '../../theme/theme.module.css';
 
 .popover-content {
-  @apply bg-background-overlay text-text-primary outline-hidden;
-  @apply border-border-overlay border;
-  @apply shadow-shadow-overlay shadow-sm;
+  @apply bg-background-floating text-text-primary outline-hidden;
+  @apply border-border-floating border;
+  @apply shadow-shadow-floating shadow-sm;
   @apply z-modal w-72 rounded-md p-4;
   @apply origin-(--radix-popover-content-transform-origin);
   @apply animate-popup-content;

packages/ui/src/components/radio-dropdown/radio-dropdown.module.css

@@ -5,12 +5,6 @@
   @apply capitalize;
 }
 
-.selected-count {
-  @apply bg-brand-primary text-text-primary;
-  @apply rounded-full px-2 py-0.5;
-  @apply text-xs font-medium;
-}
-
 .chevron-icon {
   @apply text-text-secondary;
 }