refa[DSTSUP-73]: Improve elevation (more distinguisable) (#3889)

* refa(DSTSUP-73): Improve elevation (more distinguisable)

* Create swift-days-retire.md

* update elevation badge

* update image

* delete elevation story

.changeset/swift-days-retire.md

@@ -0,0 +1,5 @@
+---
+"@marigold/theme-b2b": patch
+---
+
+refa(DSTSUP-73): Improve elevation (more distinguisable)

docs/content/concepts/elevation.mdx

@@ -2,6 +2,7 @@
 title: Elevation
 caption: Learn how to use elevation with Marigold.
 order: 2
+badge: updated
 ---
 
 Elevations serve as the foundational layers of the UI, providing a clean slate upon which various UI elements can be placed. It is important for creating visual hierarchy, depth, and clarity within a user interface. It guides user attention, improves usability, and enhances the overall user experience by providing feedback, organizing elements, and maintaining consistency in branding.

packages/components/src/Overlay/Overlay.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { forwardRef } from 'react';
 import { Menu, MenuItem, MenuTrigger } from 'react-aria-components';
 
@@ -46,27 +46,25 @@ OverlayTray.parameters = {
 };
 
 export const OverlayModal: StoryObj<typeof Modal> = {
-  render: () => {
-    return (
-      <Modal open>
-        <Dialog closeButton aria-labelledby="my-cool-headline">
-          <Headline id="my-cool-headline">This is a headline!</Headline>
-          <Text>
-            Pellentesque habitant morbi tristique senectus et netus et malesuada
-            fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
-            ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
-            egestas semper. Aenean ultricies mi vitae est. Mauris placerat
-            eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
-            Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit
-            amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
-            ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim
-            in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id
-            cursus faucibus, tortor neque egestas augue, eu vulputate magna eros
-            eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
-            porttitor, facilisis luctus, metus.
-          </Text>
-        </Dialog>
-      </Modal>
-    );
-  },
+  render: () => (
+    <Modal open>
+      <Dialog closeButton aria-labelledby="my-cool-headline">
+        <Headline id="my-cool-headline">This is a headline!</Headline>
+        <Text>
+          Pellentesque habitant morbi tristique senectus et netus et malesuada
+          fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
+          ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
+          egestas semper. Aenean ultricies mi vitae est. Mauris placerat
+          eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
+          Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet,
+          wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum
+          rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in
+          turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus
+          faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
+          Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
+          facilisis luctus, metus.
+        </Text>
+      </Dialog>
+    </Modal>
+  ),
 };

themes/theme-b2b/src/components/Card.styles.ts

@@ -1,7 +1,12 @@
 import { ThemeComponent, cva } from '@marigold/system';
 
+import { ELEVALTION_RING } from '../mixins';
+
 export const Card: ThemeComponent<'Card'> = cva(
-  'bg-bg-surface-raised shadow-surface-raised rounded-lg p-4 drop-shadow-md',
+  [
+    'bg-bg-surface-raised shadow-surface-raised rounded-lg p-4',
+    ELEVALTION_RING,
+  ],
   {
     variants: {
       size: {

themes/theme-b2b/src/components/Dialog.styles.ts

@@ -1,8 +1,11 @@
 import { ThemeComponent, cva } from '@marigold/system';
 
+import { ELEVALTION_RING } from '../mixins';
+
 export const Dialog: ThemeComponent<'Dialog'> = {
   closeButton: cva('relative -right-6 -top-2'),
-  container: cva(
-    'font-body bg-bg-surface-overlay shadow-surface-overlay rounded-sm px-8 pb-8 pt-4'
-  ),
+  container: cva([
+    'font-body bg-bg-surface-overlay shadow-surface-overlay rounded-sm px-8 pb-8 pt-4',
+    ELEVALTION_RING,
+  ]),
 };

themes/theme-b2b/src/components/Popover.styles.ts

@@ -1,7 +1,9 @@
 import { ThemeComponent, cva } from '@marigold/system';
 
+import { ELEVALTION_RING } from '../mixins';
+
 export const Popover: ThemeComponent<'Popover'> = cva(
-  ['bg-bg-surface-overlay shadow-surface-overlay mt-0.5'],
+  ['bg-bg-surface-overlay shadow-surface-overlay mt-0.5', ELEVALTION_RING],
   {
     variants: {
       variant: {

themes/theme-b2b/src/mixins.ts

@@ -0,0 +1,5 @@
+/**
+ * Reusable set of styles (Tailwind classes).
+ */
+
+export const ELEVALTION_RING = 'ring-1 ring-gray-600/5';

themes/theme-b2b/src/tokens.ts

@@ -286,7 +286,7 @@ export const colors = {
 export const shadow = {
   surface: {
     DEFAULT: boxShadow.none,
-    raised: boxShadow.sm,
+    raised: boxShadow,
     overlay: boxShadow.lg,
     sunken: boxShadow.none,
   },