Repository: marigold-ui/marigold
Pull request #2468 (2022-09-16 09:30:25)

feat: improve `&:hover` selector to adhere CSS specificity

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: ecc7debba8153046451d12c3daa777448fbf6f7b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/master/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/hover-improvement?filename=.changeset/rich-elephants-attend.md&value=---%0A%22%40marigold%2Fsystem%22%3A%20patch%0A---%0A%0Afeat%3A%20improve%20%60%26%3Ahover%60%20selector%20to%20adhere%20CSS%20specificity%0A)



Patch:
diff --git a/.changeset/heavy-items-hang.md b/.changeset/heavy-items-hang.md
new file mode 100644
index 000000000..689b50616
--- /dev/null
+++ b/.changeset/heavy-items-hang.md
@@ -0,0 +1,5 @@
+---
+"@marigold/components": patch
+---
+
+fix: use 'initial' for default `Container` item alignment
diff --git a/.changeset/rich-elephants-attend.md b/.changeset/rich-elephants-attend.md
new file mode 100644
index 000000000..71a30ff13
--- /dev/null
+++ b/.changeset/rich-elephants-attend.md
@@ -0,0 +1,5 @@
+---
+"@marigold/system": patch
+---
+
+feat: improve `&:hover` selector to adhere CSS specificity
diff --git a/.changeset/strong-buses-jog.md b/.changeset/strong-buses-jog.md
new file mode 100644
index 000000000..16b900234
--- /dev/null
+++ b/.changeset/strong-buses-jog.md
@@ -0,0 +1,9 @@
+---
+"@marigold/docs": patch
+"@marigold/components": major
+---
+
+refa: Improve behavior of `<Stack>` and remove option to render it as a list (use `<List>` instead)
+
+- `<Stack>` will no longer align items by default, since this will cause children to not take all the available space
+- `<Stack as="ul|ol">` will no longer work, we have a `<List>` comopnent for that
diff --git a/docs/src/components/Navigation/Navigation.tsx b/docs/src/components/Navigation/Navigation.tsx
index 80c937abb..0b39e8e30 100644
--- a/docs/src/components/Navigation/Navigation.tsx
+++ b/docs/src/components/Navigation/Navigation.tsx
@@ -1,3 +1,4 @@
+import { Badge } from '@marigold/components';
 import { Box, CSSObject, useComponentStyles } from '@marigold/system';
 import { Link, LinkProps } from '~/components/Link';
 
@@ -22,6 +23,7 @@ export interface NavigationMenuItem {
   slug: string;
   group?: string;
   order?: number;
+  badge?: string;
 }
 
 export interface NavigationProps {
@@ -32,6 +34,7 @@ export interface NavigationProps {
 
 interface NavigationItemProps extends LinkProps, NavigationStyles {
   title: string;
+  badge?: string;
 }
 
 interface NavigationMenuGroupProps
@@ -85,18 +88,30 @@ const NavigationItem = ({
   title,
   css,
   variant,
+  badge,
   ...props
 }: NavigationItemProps) => {
+  const badgeNameToLowerCase = (badge: string) => {
+    return badge.toLowerCase();
+  };
   return (
     <Box
       as="li"
       role="menuitem"
       __baseCSS={{ listStyle: 'none' }}
       css={css?.item}
+      display="flex"
+      justifyContent="space-between"
+      alignItems="center"
     >
       <Link variant="navigation" {...props}>
         {title}
       </Link>
+      {badge && (
+        <Badge variant={badgeNameToLowerCase(badge)} size="small">
+          {badge}
+        </Badge>
+      )}
     </Box>
   );
 };
@@ -113,6 +128,7 @@ const NavigationGroup = ({ name, items, css }: NavigationMenuGroupProps) => (
           css={css}
           title={item.title}
           href={`/${item.slug}`}
+          badge={item.badge}
         />
       ))}
     </Box>
diff --git a/docs/src/components/Navigation/NavigationLayout.tsx b/docs/src/components/Navigation/NavigationLayout.tsx
index bddb1b652..3c81abccc 100644
--- a/docs/src/components/Navigation/NavigationLayout.tsx
+++ b/docs/src/components/Navigation/NavigationLayout.tsx
@@ -58,7 +58,7 @@ export const NavigationLayout = ({ tree, links }: NavigationLayoutProps) => {
             ? {
                 position: ['absolute', 'static'],
                 bg: 'background.page',
-                width: '100%',
+                width: ['100%', 'auto'],
                 ml: '-1rem',
                 whiteSpace: 'nowrap',
                 zIndex: 1,
diff --git a/docs/src/demos/components/Body/index.ts b/docs/src/demos/components/Body/index.ts
new file mode 100644
index 000000000..3c86fe364
--- /dev/null
+++ b/docs/src/demos/components/Body/index.ts
@@ -0,0 +1,1 @@
+export * from './simple-body.demo';
diff --git a/docs/src/demos/components/Body/simple-body.demo.tsx b/docs/src/demos/components/Body/simple-body.demo.tsx
new file mode 100644
index 000000000..167e56bad
--- /dev/null
+++ b/docs/src/demos/components/Body/simple-body.demo.tsx
@@ -0,0 +1,24 @@
+import {
+  Card,
+  Header,
+  Headline,
+  Body,
+  Footer,
+  Text,
+} from '@marigold/components';
+
+export const BasicBody = () => (
+  <>
+    <Card>
+      <Header>
+        <Headline level="2">A really good header!</Headline>
+      </Header>
+      <Body>
+        <Text>In this body fits really great content.</Text>
+      </Body>
+      <Footer>
+        <Text>And awesome footer!</Text>
+      </Footer>
+    </Card>
+  </>
+);
diff --git a/docs/src/demos/components/Headline/headline.demo.tsx b/docs/src/demos/components/Headline/headline.demo.tsx
index 584ecef07..28ffef733 100644
--- a/docs/src/demos/components/Headline/headline.demo.tsx
+++ b/docs/src/demos/components/Headline/headline.demo.tsx
@@ -1,12 +1,12 @@
-import { Content, Headline, Text } from '@marigold/components';
+import { Body, Headline, Text } from '@marigold/components';
 
 export const BasicHeadline = () => (
-  <Content>
+  <Body>
     <Headline level="3">Lorem ipsum</Headline>
     <Text>
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
       eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
       voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
     </Text>
-  </Content>
+  </Body>
 );
diff --git a/docs/src/demos/components/index.ts b/docs/src/demos/components/index.ts
index 81e59f3d4..fe4bf1cde 100644
--- a/docs/src/demos/components/index.ts
+++ b/docs/src/demos/components/index.ts
@@ -8,6 +8,7 @@ export * from './_test_hook_';
 export * from './Aside';
 export * from './Aspect';
 export * from './Badge';
+export * from './Body';
 export * from './Box';
 export * from './Breakout';
 export * from './Button';
diff --git a/docs/src/pages/_app.tsx b/docs/src/pages/_app.tsx
index 1bee4a505..fe83abaad 100644
--- a/docs/src/pages/_app.tsx
+++ b/docs/src/pages/_app.tsx
@@ -2,7 +2,7 @@ import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import { MDXProvider } from '@mdx-js/react';
 
-import { MarigoldProvider, SSRProvider } from '@marigold/components';
+import { Badge, MarigoldProvider, SSRProvider } from '@marigold/components';
 import * as MarigoldComponents from '@marigold/components';
 import * as MarigoldIcons from '@marigold/icons';
 import unicornTheme from '@marigold/theme-unicorn';
@@ -70,6 +70,10 @@ const components = {
   ...MarigoldIcons,
 };
 
+const badgeNameToLowercase = (badge: string) => {
+  return badge.toLowerCase();
+};
+
 export interface PageProps {
   title?: string;
   caption?: string;
@@ -77,6 +81,7 @@ export interface PageProps {
   figma?: string;
   github?: string;
   edit?: string;
+  badge?: string;
 }
 
 const MyApp = ({ Component, pageProps }: AppProps<PageProps>) => {
@@ -90,6 +95,11 @@ const MyApp = ({ Component, pageProps }: AppProps<PageProps>) => {
               <Title title={pageProps?.title} />
               {pageProps?.title && (
                 <Header>
+                  {pageProps?.badge && (
+                    <Badge variant={badgeNameToLowercase(pageProps.badge)}>
+                      {pageProps.badge}
+                    </Badge>
+                  )}
                   <GradientHeadline>{pageProps.title}</GradientHeadline>
                   {pageProps.caption && (
                     <Text variant="page-caption">{pageProps.caption}</Text>
diff --git a/docs/src/pages/components/body.mdx b/docs/src/pages/components/body.mdx
new file mode 100644
index 000000000..67f7ce6ce
--- /dev/null
+++ b/docs/src/pages/components/body.mdx
@@ -0,0 +1,46 @@
+---
+title: Body
+group: Content
+switchTheme: true
+github: https://github.com/marigold-ui/marigold/blob/main/packages/components/src/Body/Body.tsx
+edit: https://github.com/marigold-ui/marigold/blob/main/docs/src/pages/components/body.mdx
+caption: Structure for contents in a content context.
+---
+
+The `<Body>` is a content component, like the [`<Header>`](/components/header) and [`<Footer>`](/components/footer/) and is used to help structure the contents of components such as a [`<Card>`](/components/card) or [`<Dialog>`](/components/dialog).
+
+It behaves similar to its related components [`<Header>`](/components/header) and [`<Footer>`](/components/footer/). So the component has no properties, but that is not its task. It should wrap other components and structure its contents for a better code base.
+
+You can set `variant` and `size` props to style your `<Body>` element.
+
+<Preview>
+  <Body>This is a body!</Body>
+</Preview>
+
+## Usage
+
+### Import
+
+To import the component you just have to use this code below.
+
+```tsx onlyCode
+import { Body } from '@marigold/components';
+```
+
+### Apperance
+
+<AppearanceTable component={title} />
+
+### Props
+
+<PropsTable />
+
+## Examples
+
+### Body used in context
+
+In this example you can see a `<Body>` element within a `<Card>`. This is a context in which the `<Body>` should be used.
+
+```tsx preview file=components/Body/simple-body.demo.tsx
+
+```
diff --git a/docs/src/pages/components/content.mdx b/docs/src/pages/components/content.mdx
deleted file mode 100644
index 5d3466bb3..000000000
--- a/docs/src/pages/components/content.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: Content
-group: Layout
-github: https://github.com/marigold-ui/marigold/blob/main/packages/components/src/Content/Content.tsx
-edit: https://github.com/marigold-ui/marigold/blob/main/docs/src/pages/components/content.mdx
----
-
-The `Content` component is used to help structure contents of components like a [`Card`](/components/card) or [`Dialog`](/components/dialog).
-
-<Preview>
-  <Content>This is content!</Content>
-</Preview>
-
-```tsx onlyCode
-import { Content } from '@marigold/components';
-```
-
-## Usage
-
-### Apperance
-
-<AppearanceTable component={title} />
-
-### Props
-
-<PropsTable />
diff --git a/docs/src/pages/components/stack.mdx b/docs/src/pages/components/stack.mdx
index 53d85d8f9..7f26ac9b0 100644
--- a/docs/src/pages/components/stack.mdx
+++ b/docs/src/pages/components/stack.mdx
@@ -23,15 +23,15 @@ Layout component to stack elements. This component uses the spaces from the give
     },
     {
       property: 'alignX',
-      type: '`left, right, center`',
+      type: '`none, left, right, center`',
       description: '',
-      default: 'left',
+      default: 'none',
     },
     {
       property: 'alignY',
-      type: '`top, bottom, center`',
+      type: '`none, top, bottom, center`',
       description: '',
-      default: 'center',
+      default: 'none',
     },
     {
       property: 'stretch',
diff --git a/docs/src/pages/index.mdx b/docs/src/pages/index.mdx
index 7d9f06a5c..c72f6d591 100644
--- a/docs/src/pages/index.mdx
+++ b/docs/src/pages/index.mdx
@@ -7,23 +7,23 @@ Hey there and welcome to _Marigold_, the design system from [Reservix](https://w
 <Inline space="large-1">
     <Card variant="hovering" size="large" px="medium-1" pb="medium-2">
     <Headline level="2">What is Marigold?</Headline>
-    <Content>
+    <Body>
         <Text>Marigold is a React implementation of Reservix' design language.</Text>
         <Inline>
             <ChevronRight/>
             <Link href="/introduction/about/">click here to learn more</Link>
         </Inline>
-    </Content>
+    </Body>
     </Card>
 
     <Card variant="hovering" size="large" px="medium-1" pb="medium-2">
     <Headline level="2">Installation</Headline>
-    <Content>
+    <Body>
        <Inline>
         <ChevronRight/>
         <Link href="/introduction/getting-started/">click here to start</Link>
         </Inline>
-    </Content>
+    </Body>
     </Card>
 
 </Inline>
diff --git a/docs/src/theme/colors.ts b/docs/src/theme/colors.ts
index 6627e6898..02aaf3f6e 100644
--- a/docs/src/theme/colors.ts
+++ b/docs/src/theme/colors.ts
@@ -7,7 +7,7 @@ export const colors = {
   background: {
     // alternative
     //background: '#FFF8ED',
-    light: 'hsla(28, 100%, 2.9%, .2)',
+    light: 'hsla(28, 100%, 3%, .2)',
     page: 'hsl(36, 100%, 99%)',
     foreground: 'hsl(36, 100%, 100%)',
   },
@@ -27,10 +27,25 @@ export const colors = {
   },
   yellow: {
     base: 'hsl(46, 81%, 63%)',
+    50: 'hsl(45, 97%, 54%)',
   },
   info: {
-    background: 'hsl(207.5,100%,98.3%)',
-    base: 'hsl(208,100%,82.9%)',
-    text: 'hsl(208, 100%, 20.2%)',
+    background: 'hsl(207, 100%, 98%)',
+    base: 'hsl(208, 100%, 83%)',
+    text: 'hsl(208, 100%, 20%)',
+  },
+  red: {
+    50: 'hsl(0, 100%, 71%)',
+  },
+
+  green: {
+    50: 'hsl(130, 57%, 56%)',
+  },
+
+  blue: {
+    50: 'hsl(207, 86%, 57%)',
+  },
+  orange: {
+    50: 'hsl(29, 100%, 58%)',
   },
 };
diff --git a/docs/src/theme/components/Badge.style.ts b/docs/src/theme/components/Badge.style.ts
new file mode 100644
index 000000000..dc93a8649
--- /dev/null
+++ b/docs/src/theme/components/Badge.style.ts
@@ -0,0 +1,48 @@
+import type { Theme } from '@marigold/components';
+
+export const Badge: Theme['components']['Badge'] = {
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    fontSize: 'fixed.medium-1',
+    fontFamily: 'headline',
+    textTransform: 'lowercase',
+    borderRadius: 'medium-1',
+    border: '2px solid transparent',
+    whiteSpace: 'nowrap',
+    py: 4,
+    px: 12,
+    mb: 16,
+  },
+  variant: {
+    new: {
+      color: 'text.regular',
+      borderColor: 'green.50',
+      bg: 'green.50',
+    },
+    updated: {
+      color: 'text.regular',
+      borderColor: 'blue.50',
+      bg: 'blue.50',
+    },
+    beta: {
+      color: 'text.regular',
+      borderColor: 'yellow.50',
+      bg: 'yellow.50',
+    },
+    deprecated: {
+      color: 'text.regular',
+      borderColor: 'red.50',
+      bg: 'red.50',
+    },
+  },
+  size: {
+    small: {
+      fontSize: '12px',
+      mb: 0,
+      py: 0,
+      px: 4,
+      ml: 16,
+    },
+  },
+};
diff --git a/docs/src/theme/components/index.ts b/docs/src/theme/components/index.ts
index 9eb65eaf3..f6210b8a2 100644
--- a/docs/src/theme/components/index.ts
+++ b/docs/src/theme/components/index.ts
@@ -1,3 +1,4 @@
+export * from './Badge.style';
 export * from './Button.style';
 export * from './Card.style';
 export * from './Preview.style';
diff --git a/packages/components/src/Content/Content.stories.tsx b/packages/components/src/Body/Body.stories.tsx
similarity index 77%
rename from packages/components/src/Content/Content.stories.tsx
rename to packages/components/src/Body/Body.stories.tsx
index ba3c8bb68..b540e8755 100644
--- a/packages/components/src/Content/Content.stories.tsx
+++ b/packages/components/src/Body/Body.stories.tsx
@@ -1,29 +1,29 @@
 import React from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
-import { Content } from './Content';
+import { Body } from './Body';
 import { Container } from '../Container';
 
 export default {
-  title: 'Components/Content',
+  title: 'Components/Body',
   argTypes: {
     variant: {
       control: {
         type: 'text',
       },
-      description: 'The variant of the content',
+      description: 'The variant of the body',
     },
     size: {
       control: {
         type: 'text',
       },
-      description: 'The size of the content',
+      description: 'The size of the body',
     },
   },
 } as Meta;
 
-export const Basic: ComponentStory<typeof Content> = args => (
+export const Basic: ComponentStory<typeof Body> = args => (
   <Container contentType="content" size="medium">
-    <Content {...args}>
+    <Body {...args}>
       <strong>Professor Severus Snape</strong> (9 January, 1960[1] - 2 May,
       1998)[2] was an English half-blood[3] wizard serving as Potions Master
       (1981-1996), Head of Slytherin House (1981-1997), Defence Against the Dark
@@ -31,6 +31,6 @@ export const Basic: ComponentStory<typeof Content> = args => (
       School of Witchcraft and Wizardry as well as a member of the Order of the
       Phoenix and a Death Eater. His double life played an extremely important
       role in both of the Wizarding Wars against Voldemort.
-    </Content>
+    </Body>
   </Container>
 );
diff --git a/packages/components/src/Content/Content.tsx b/packages/components/src/Body/Body.tsx
similarity index 64%
rename from packages/components/src/Content/Content.tsx
rename to packages/components/src/Body/Body.tsx
index 4adc71b3c..1f44ae174 100644
--- a/packages/components/src/Content/Content.tsx
+++ b/packages/components/src/Body/Body.tsx
@@ -9,11 +9,11 @@ import { ComponentProps } from '@marigold/types';
 
 // Theme Extension
 // ---------------
-export interface ContentThemeExtension extends ThemeExtension<'Content'> {}
+export interface BodyThemeExtension extends ThemeExtension<'Body'> {}
 
 // Props
 // ---------------
-export interface ContentProps
+export interface BodyProps
   extends ThemeComponentProps,
     ComponentProps<'section'> {
   children?: ReactNode;
@@ -21,13 +21,8 @@ export interface ContentProps
 
 // Component
 // ---------------
-export const Content = ({
-  children,
-  variant,
-  size,
-  ...props
-}: ContentProps) => {
-  const styles = useComponentStyles('Content', { variant, size });
+export const Body = ({ children, variant, size, ...props }: BodyProps) => {
+  const styles = useComponentStyles('Body', { variant, size });
   return (
     <Box as="section" {...props} css={styles}>
       {children}
diff --git a/packages/components/src/Body/index.ts b/packages/components/src/Body/index.ts
new file mode 100644
index 000000000..0b63ac835
--- /dev/null
+++ b/packages/components/src/Body/index.ts
@@ -0,0 +1,1 @@
+export * from './Body';
diff --git a/packages/components/src/Container/Container.stories.tsx b/packages/components/src/Container/Container.stories.tsx
index 98bb39e30..f35822a33 100644
--- a/packages/components/src/Container/Container.stories.tsx
+++ b/packages/components/src/Container/Container.stories.tsx
@@ -61,29 +61,32 @@ export const Header: ComponentStory<typeof Container> = args => (
 );
 
 export const InnerContent: ComponentStory<typeof Container> = args => (
-  <Box as={Container} bg="blue10" p="small" {...args}>
-    <Headline level="2">Star Wars - The Empire Strikes Back</Headline>
-    <Box pt="xsmall" width="100%">
-      <Text>
-        It is a dark time for the Rebellion. Although the Death Star has been
-        destroyed, Imperial troops have driven the Rebel forces from their
-        hidden base and pursued them across the galaxy. Evading the dreaded
-        Imperial Starfleet, a group of freedom fighters led by Luke Skywalker
-        has established a new secret base on the remote ice world of Hoth. The
-        evil lord Darth Vader, obsessed with finding young Skywalker, has
-        dispatched thousands of remote probes into the far reaches of space....
-      </Text>
-    </Box>
-    <Box width="20ch">
-      <ul>
-        <li>Luke</li>
-        <li>Leia</li>
-        <li>Han Solo</li>
-        <li>Chewbacca</li>
-        <li>R2D2</li>
-        <li>C3PO</li>
-        <li>Darth Vader</li>
-      </ul>
-    </Box>
+  <Box bg="blue10" p="small">
+    <Container {...args}>
+      <Headline level="2">Star Wars - The Empire Strikes Back</Headline>
+      <Box pt="xsmall" width="100%">
+        <Text>
+          It is a dark time for the Rebellion. Although the Death Star has been
+          destroyed, Imperial troops have driven the Rebel forces from their
+          hidden base and pursued them across the galaxy. Evading the dreaded
+          Imperial Starfleet, a group of freedom fighters led by Luke Skywalker
+          has established a new secret base on the remote ice world of Hoth. The
+          evil lord Darth Vader, obsessed with finding young Skywalker, has
+          dispatched thousands of remote probes into the far reaches of
+          space....
+        </Text>
+      </Box>
+      <Box width="20ch">
+        <ul>
+          <li>Luke</li>
+          <li>Leia</li>
+          <li>Han Solo</li>
+          <li>Chewbacca</li>
+          <li>R2D2</li>
+          <li>C3PO</li>
+          <li>Darth Vader</li>
+        </ul>
+      </Box>
+    </Container>
   </Box>
 );
diff --git a/packages/components/src/Container/Container.tsx b/packages/components/src/Container/Container.tsx
index 66148b9e6..6421928a9 100755
--- a/packages/components/src/Container/Container.tsx
+++ b/packages/components/src/Container/Container.tsx
@@ -17,7 +17,7 @@ const ALIGN_ITEMS = {
   left: 'start',
   center: 'center',
   right: 'end',
-  none: 'undefined',
+  none: 'initial',
 };
 
 // for responsive reasons we needed to use the `minmax(0, 60ch)` value instead of `fit-content(60ch)`
diff --git a/packages/components/src/Content/index.ts b/packages/components/src/Content/index.ts
deleted file mode 100644
index b39182a1a..000000000
--- a/packages/components/src/Content/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export * from './Content';
diff --git a/packages/components/src/Stack/Stack.stories.tsx b/packages/components/src/Stack/Stack.stories.tsx
index 3d399ac8e..15f065f47 100644
--- a/packages/components/src/Stack/Stack.stories.tsx
+++ b/packages/components/src/Stack/Stack.stories.tsx
@@ -1,7 +1,6 @@
 import React, { ReactNode } from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
 import { Box } from '@marigold/system';
-import { shadow } from '@marigold/tokens';
 
 import { Headline } from '../Headline';
 import { Text } from '../Text';
@@ -30,14 +29,14 @@ export default {
       control: {
         type: 'select',
       },
-      options: ['left', 'center', 'right'],
+      options: ['none', 'left', 'center', 'right'],
       description: 'Vertical Alignment',
     },
     alignY: {
       control: {
         type: 'select',
       },
-      options: ['top', 'center', 'bottom'],
+      options: ['none', 'top', 'center', 'bottom'],
       description: 'Vertical Alignment',
     },
     stretch: {
@@ -45,11 +44,24 @@ export default {
         type: 'boolean',
       },
       description:
-        'Stretch to fill space (useful if you want to change y alignment)',
+        'Stretch to fill space (vertical AND horizontal, useful if you want to change y alignment)',
     },
   },
 } as Meta;
 
+const Block = ({ children }: { children: ReactNode }) => (
+  <Box
+    css={{
+      background: 'hsla(218 16% 77% / 50%)',
+      border: '1px solid hsla(218 16% 70% / 50%)',
+      borderRadius: 12,
+      p: 12,
+    }}
+  >
+    {children}
+  </Box>
+);
+
 export const Basic: ComponentStory<typeof Stack> = args => (
   <Stack {...args}>
     <Headline level="2">Heading</Headline>
@@ -69,77 +81,62 @@ export const Basic: ComponentStory<typeof Stack> = args => (
 );
 
 export const Nested: ComponentStory<typeof Stack> = args => (
-  <Stack {...args}>
-    <Stack space="xsmall">
-      <Headline level="2">Heading</Headline>
-      <Text>
-        Part 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        Suspendisse dignissim dapibus elit, vel egestas felis pharetra non. Cras
-        malesuada, massa nec ultricies efficitur, lectus ante consequat magna, a
-        porttitor massa ex ut quam.
-      </Text>
-      <Text>
-        Part 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        Suspendisse dignissim dapibus elit, vel egestas felis pharetra non. Cras
-        malesuada, massa nec ultricies efficitur, lectus ante consequat magna, a
-        porttitor massa ex ut quam.
-      </Text>
-    </Stack>
-    <Stack space="xsmall">
-      <Headline level="2">Heading</Headline>
-      <Text>
-        Part 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        Suspendisse dignissim dapibus elit, vel egestas felis pharetra non. Cras
-        malesuada, massa nec ultricies efficitur, lectus ante consequat magna, a
-        porttitor massa ex ut quam.
-      </Text>
-      <Text>
-        Part 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        Suspendisse dignissim dapibus elit, vel egestas felis pharetra non. Cras
-        malesuada, massa nec ultricies efficitur, lectus ante consequat magna, a
-        porttitor massa ex ut quam.
-      </Text>
-    </Stack>
-  </Stack>
-);
-
-export const List: ComponentStory<typeof Stack> = args => (
-  <Stack space="large">
-    <Stack as="ol" {...args}>
-      <li>one</li>
-      <li>two</li>
-      <li>three</li>
-    </Stack>
-    <Stack as="ul" {...args}>
-      <li>one</li>
-      <li>two</li>
-      <li>three</li>
+  <Block>
+    <Stack {...args}>
+      <Stack space="xsmall">
+        <Block>
+          <Headline level="2">With xsmall spacing</Headline>
+        </Block>
+        <Block>
+          <Text>
+            Part 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Suspendisse dignissim dapibus elit, vel egestas felis pharetra non.
+            Cras malesuada, massa nec ultricies efficitur, lectus ante consequat
+            magna, a porttitor massa ex ut quam.
+          </Text>
+        </Block>
+        <Block>
+          <Text>
+            Part 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Suspendisse dignissim dapibus elit, vel egestas felis pharetra non.
+            Cras malesuada, massa nec ultricies efficitur, lectus ante consequat
+            magna, a porttitor massa ex ut quam.
+          </Text>
+        </Block>
+      </Stack>
+      <Stack space="medium">
+        <Block>
+          <Headline level="2">With Medium Spacing</Headline>
+        </Block>
+        <Block>
+          <Text>
+            Part 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Suspendisse dignissim dapibus elit, vel egestas felis pharetra non.
+            Cras malesuada, massa nec ultricies efficitur, lectus ante consequat
+            magna, a porttitor massa ex ut quam.
+          </Text>
+        </Block>
+        <Block>
+          <Text>
+            Part 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Suspendisse dignissim dapibus elit, vel egestas felis pharetra non.
+            Cras malesuada, massa nec ultricies efficitur, lectus ante consequat
+            magna, a porttitor massa ex ut quam.
+          </Text>
+        </Block>
+      </Stack>
     </Stack>
-  </Stack>
-);
-
-const Block = ({ children }: { children: ReactNode }) => (
-  <Box
-    css={{
-      border: '1px solid #364fc7',
-      borderRadius: 16,
-      bg: '#4263eb',
-      color: '#edf2ff',
-      px: 32,
-      py: 12,
-      boxShadow: shadow['medium-1'],
-    }}
-  >
-    {children}
-  </Box>
+  </Block>
 );
 
 export const Stretch: ComponentStory<typeof Stack> = args => (
-  <Box css={{ height: 300 }}>
-    <Stack {...args}>
-      <Block>Lirum</Block>
-      <Block>Larum</Block>
-      <Block>Löffelstiel!</Block>
-    </Stack>
-  </Box>
+  <Block>
+    <Box css={{ height: 300 }}>
+      <Stack {...args}>
+        <Block>Lirum</Block>
+        <Block>Larum</Block>
+        <Block>Löffelstiel!</Block>
+      </Stack>
+    </Box>
+  </Block>
 );
diff --git a/packages/components/src/Stack/Stack.tsx b/packages/components/src/Stack/Stack.tsx
index 8266dc9e0..69caab6b8 100755
--- a/packages/components/src/Stack/Stack.tsx
+++ b/packages/components/src/Stack/Stack.tsx
@@ -2,13 +2,16 @@ import React, { ReactNode } from 'react';
 import { ResponsiveStyleValue } from '@marigold/system';
 
 import { Box } from '../Box';
+
 const ALIGNMENT_X = {
+  none: 'initial',
   left: 'flex-start',
   center: 'center',
   right: 'flex-end',
 };
 
 const ALIGNMENT_Y = {
+  none: 'initial',
   top: 'flex-start',
   center: 'center',
   bottom: 'flex-end',
@@ -17,7 +20,6 @@ const ALIGNMENT_Y = {
 // Props
 // ---------------
 export interface StackProps {
-  as?: 'div' | 'ul' | 'ol';
   children?: ReactNode;
   space?: ResponsiveStyleValue<string>;
   alignX?: keyof typeof ALIGNMENT_X;
@@ -30,8 +32,8 @@ export interface StackProps {
 export const Stack = ({
   children,
   space = 'none',
-  alignX = 'left',
-  alignY = 'top',
+  alignX = 'none',
+  alignY = 'none',
   stretch = false,
   ...props
 }: StackProps) => (
@@ -43,7 +45,7 @@ export const Stack = ({
       gap: space,
       alignItems: ALIGNMENT_X[alignX],
       justifyContent: ALIGNMENT_Y[alignY],
-      blockSize: stretch ? '100%' : 'auto',
+      blockSize: stretch ? '100%' : 'initial',
     }}
     {...props}
   >
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index e2498c0dd..89029df93 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -6,13 +6,13 @@ export * from './Aspect';
 export * from './Badge';
 export * from './Box';
 export * from './Breakout';
+export * from './Body';
 export * from './Button';
 export * from './Card';
 export * from './Center';
 export * from './Checkbox';
 export * from './Columns';
 export * from './Container';
-export * from './Content';
 export * from './Dialog';
 export * from './Divider';
 export * from './Footer';
diff --git a/packages/components/src/theme.ts b/packages/components/src/theme.ts
index 582e5de12..5be9f5975 100644
--- a/packages/components/src/theme.ts
+++ b/packages/components/src/theme.ts
@@ -3,13 +3,13 @@ import type { Theme as BaseTheme } from '@marigold/system';
 // Components
 // ---------------
 import type { BadgeThemeExtension } from './Badge';
+import type { BodyThemeExtension } from './Body';
 import type { ButtonThemeExtension } from './Button';
 import type { CardThemeExtension } from './Card';
 import type {
   CheckboxThemeExtension,
   CheckboxGroupThemeExtension,
 } from './Checkbox';
-import type { ContentThemeExtension } from './Content';
 import type { DialogThemeExtension } from './Dialog';
 import type { DividerThemeExtension } from './Divider';
 import type { FooterThemeExtension } from './Footer';
@@ -41,7 +41,7 @@ interface ComponentStyles
     CardThemeExtension,
     CheckboxThemeExtension,
     CheckboxGroupThemeExtension,
-    ContentThemeExtension,
+    BodyThemeExtension,
     DialogThemeExtension,
     DividerThemeExtension,
     FooterThemeExtension,
diff --git a/packages/system/src/components/Box/selector.ts b/packages/system/src/components/Box/selector.ts
index 3df58a404..627010afd 100644
--- a/packages/system/src/components/Box/selector.ts
+++ b/packages/system/src/components/Box/selector.ts
@@ -20,7 +20,7 @@ const selector = {
 
 const state = {
   none: [''],
-  hover: [':hover', '[data-hover]'],
+  hover: [':hover:enabled', '[data-hover]'],
   focus: [':focus', '[data-focus]'],
   focusVisible: [':focus-visible', '[data-focus-visible]'],
   active: [':active', '[data-active]'],


Test patch:
diff --git a/packages/components/src/Content/Content.test.tsx b/packages/components/src/Body/Body.test.tsx
similarity index 54%
rename from packages/components/src/Content/Content.test.tsx
rename to packages/components/src/Body/Body.test.tsx
index d46430bf1..a9b7722fc 100644
--- a/packages/components/src/Content/Content.test.tsx
+++ b/packages/components/src/Body/Body.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '@marigold/system';
 
-import { Content } from './Content';
+import { Body } from './Body';
 
 const theme = {
   space: {
@@ -15,7 +15,7 @@ const theme = {
     yellow: '#fff9db',
   },
   components: {
-    Content: {
+    Body: {
       base: {
         p: 'small-1',
         border: '1px solid',
@@ -38,31 +38,31 @@ const theme = {
 test('renders as a "section" element', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Content data-testid="content" />
+      <Body data-testid="body" />
     </ThemeProvider>
   );
 
-  const content = screen.getByTestId('content');
-  expect(content.tagName).toEqual('SECTION');
+  const body = screen.getByTestId('body');
+  expect(body.tagName).toEqual('SECTION');
 });
 
-test('uses base styling form "content" in theme', () => {
+test('uses base styling form "body" in theme', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Content data-testid="content" />
+      <Body data-testid="body" />
     </ThemeProvider>
   );
-  const content = screen.getByTestId('content');
-  expect(content).toHaveStyle(`padding: ${theme.space['small-1']}px`);
+  const body = screen.getByTestId('body');
+  expect(body).toHaveStyle(`padding: ${theme.space['small-1']}px`);
 });
 
-test('content accepts a variant and size', () => {
+test('body accepts a variant and size', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Content data-testid="content" variant="yellow" size="medium" />
+      <Body data-testid="body" variant="yellow" size="medium" />
     </ThemeProvider>
   );
-  const content = screen.getByTestId('content');
-  expect(content).toHaveStyle(`background: ${theme.colors.yellow}`);
-  expect(content).toHaveStyle(`padding: ${theme.space['medium-1']}px`);
+  const body = screen.getByTestId('body');
+  expect(body).toHaveStyle(`background: ${theme.colors.yellow}`);
+  expect(body).toHaveStyle(`padding: ${theme.space['medium-1']}px`);
 });
diff --git a/packages/components/src/Container/Container.test.tsx b/packages/components/src/Container/Container.test.tsx
index d8479d31f..5dcd1ba4e 100644
--- a/packages/components/src/Container/Container.test.tsx
+++ b/packages/components/src/Container/Container.test.tsx
@@ -107,7 +107,7 @@ test('supports default align items none', () => {
     </Container>
   );
   const container = screen.getByTestId(/container/);
-  expect(container).toHaveStyle(`placeItems: undefined`);
+  expect(container).toHaveStyle(`placeItems: initial`);
 });
 
 test('supports align items center', () => {
diff --git a/packages/components/src/Stack/Stack.test.tsx b/packages/components/src/Stack/Stack.test.tsx
index d7bb8f347..f0f263698 100644
--- a/packages/components/src/Stack/Stack.test.tsx
+++ b/packages/components/src/Stack/Stack.test.tsx
@@ -30,7 +30,7 @@ test('default space is "none"', () => {
   expect(first).toHaveStyle(`gap: 0`);
 });
 
-test('accepts and uses spacing from theme', () => {
+test('uses spacing from theme', () => {
   render(
     <ThemeProvider theme={theme}>
       <Stack space="small">
@@ -43,13 +43,23 @@ test('accepts and uses spacing from theme', () => {
   expect(first).toHaveStyle(`gap: 2px`);
 });
 
-test('align children left by default', () => {
+test('children are not aligned by default', () => {
   render(
     <Stack data-testid="stack">
       <Text>first</Text>
     </Stack>
   );
   const stack = screen.getByTestId('stack');
+  expect(stack).toHaveStyle(`align-items: initial`);
+});
+
+test('allows to align children to the left', () => {
+  render(
+    <Stack alignX="left" data-testid="stack">
+      <Text>first</Text>
+    </Stack>
+  );
+  const stack = screen.getByTestId('stack');
   expect(stack).toHaveStyle(`align-items: flex-start`);
 });
 
@@ -73,13 +83,23 @@ test('allows to align children to the right', () => {
   expect(stack).toHaveStyle(`align-items: flex-end`);
 });
 
-test('children to the top by default', () => {
+test('children are not aligned vertically by default', () => {
   render(
     <Stack data-testid="stack">
       <Text>first</Text>
     </Stack>
   );
   const stack = screen.getByTestId('stack');
+  expect(stack).toHaveStyle(`justify-content: initial`);
+});
+
+test('allows to align children to the vertical top', () => {
+  render(
+    <Stack alignY="top" data-testid="stack">
+      <Text>first</Text>
+    </Stack>
+  );
+  const stack = screen.getByTestId('stack');
   expect(stack).toHaveStyle(`justify-content: flex-start`);
 });
 
@@ -110,7 +130,7 @@ test('behaves as inline be default', () => {
     </Stack>
   );
   const stack = screen.getByTestId('stack');
-  expect(stack).toHaveStyle(`blockSize: auto`);
+  expect(stack).toHaveStyle(`blockSize: initial`);
 });
 
 test('allows to fill space', () => {
@@ -162,31 +182,3 @@ test('renders as div per default', () => {
   const stack = screen.getByTestId('stack');
   expect(stack instanceof HTMLDivElement).toBeTruthy();
 });
-
-test('can render as "ul"', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Stack as="ul" data-testid="stack">
-        <Text>first</Text>
-        <Text>second</Text>
-      </Stack>
-    </ThemeProvider>
-  );
-
-  const stack = screen.getByTestId('stack');
-  expect(stack instanceof HTMLUListElement).toBeTruthy();
-});
-
-test('can render as "ol"', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Stack as="ol" data-testid="stack">
-        <Text>first</Text>
-        <Text>second</Text>
-      </Stack>
-    </ThemeProvider>
-  );
-
-  const stack = screen.getByTestId('stack');
-  expect(stack instanceof HTMLOListElement).toBeTruthy();
-});
diff --git a/packages/system/src/components/Box/selector.test.ts b/packages/system/src/components/Box/selector.test.ts
index d78e6387d..f21724855 100644
--- a/packages/system/src/components/Box/selector.test.ts
+++ b/packages/system/src/components/Box/selector.test.ts
@@ -23,7 +23,7 @@ describe('transform states', () => {
         '&:hover': {},
       },
       expected: {
-        '&:hover, &[data-hover]': {},
+        '&:hover:enabled, &[data-hover]': {},
       },
     },
     {
@@ -131,7 +131,7 @@ describe('transform states', () => {
         '&:hover-group': {},
       },
       expected: {
-        '[role=group]:hover &, [role=group][data-hover] &, [data-group]:hover &, [data-group][data-hover] &':
+        '[role=group]:hover:enabled &, [role=group][data-hover] &, [data-group]:hover:enabled &, [data-group][data-hover] &':
           {},
       },
     },
@@ -182,7 +182,7 @@ describe('transform states', () => {
       })
     ).toMatchInlineSnapshot(`
       {
-        "&:hover, &[data-hover]": {
+        "&:hover:enabled, &[data-hover]": {
           "&:focus, &[data-focus]": {
             "outline": "1px solid #228be6",
           },