Repository: marigold-ui/marigold (ts)

Issue:
Support `<Tiles>` to not expand in width
## Description

Currently the children of `<Tiles>` will always take the available width (`1fr`) and only have a lower bound (`itemMinWidth`). There is no way to have children to stay at a certain width. This is especially useful if you have multiple `Tiles` on a page an want them to look the same.

## Proposal

Expand the API with properties to change from stretching to the available width to a given width.

## Implementation

Change grid template. Currently: 

```js
`repeat(auto-fit, minmax(min(${itemMinWidth}, 100%), 1fr))`
```

to 

```js
`repeat(auto-fit, minmax(min(${width}, 100%), ${width}))`
```

Pull request description:
feat: `<Tiles>` can switch between responsive and static modes
`<Tiles>` can now be used as a grid with fixed widths or fully respsonsive.

BREAKING CHANGE: Renamed the whole API. Please checkout the documentation at https://marigold-ui.io/components/tiles/#props

closes #2603

Patch:
diff --git a/.changeset/breezy-ghosts-cough.md b/.changeset/breezy-ghosts-cough.md
new file mode 100644
index 000000000..ec8fef21b
--- /dev/null
+++ b/.changeset/breezy-ghosts-cough.md
@@ -0,0 +1,5 @@
+---
+"@marigold/icons": patch
+---
+
+fix: icons support stroke currentColor
diff --git a/.changeset/rude-vans-laugh.md b/.changeset/rude-vans-laugh.md
new file mode 100644
index 000000000..721fa4d55
--- /dev/null
+++ b/.changeset/rude-vans-laugh.md
@@ -0,0 +1,5 @@
+---
+"@marigold/theme-core": patch
+---
+
+chore: add no padding to variant link in core theme
diff --git a/.changeset/stupid-keys-grab.md b/.changeset/stupid-keys-grab.md
new file mode 100644
index 000000000..0cfa5f003
--- /dev/null
+++ b/.changeset/stupid-keys-grab.md
@@ -0,0 +1,6 @@
+---
+"@marigold/components": patch
+"@marigold/theme-core": patch
+---
+
+chore: add hover color and flex property
diff --git a/.changeset/wicked-clocks-smoke.md b/.changeset/wicked-clocks-smoke.md
new file mode 100644
index 000000000..5afabc467
--- /dev/null
+++ b/.changeset/wicked-clocks-smoke.md
@@ -0,0 +1,8 @@
+---
+"@marigold/docs": major
+"@marigold/components": major
+---
+
+feat: `<Tiles>` can now be used as a grid with fixed widths or fully respsonsive.
+
+BREAKING CHANGE: Renamed the whole API. Please checkout the documentation at https://marigold-ui.io/components/tiles/#props
diff --git a/docs/src/components/IconList/IconList.tsx b/docs/src/components/IconList/IconList.tsx
index 07cf94fb9..7029110e4 100644
--- a/docs/src/components/IconList/IconList.tsx
+++ b/docs/src/components/IconList/IconList.tsx
@@ -86,7 +86,7 @@ const IconListItem = ({ icon }: IconListItemProps) => {
 export const IconList = ({ icons }: IconListProps) => {
   return (
     <Box css={{ width: '100%' }}>
-      <Tiles space="medium-1" itemMinWidth="7.5rem">
+      <Tiles space="medium-1" tilesWidth="7.5rem">
         {icons.map(icon => (
           <IconListItem key={icon} icon={icon} />
         ))}
diff --git a/docs/src/demos/components/Tiles/index.ts b/docs/src/demos/components/Tiles/index.ts
index ca4164a56..e1f6e3dcb 100644
--- a/docs/src/demos/components/Tiles/index.ts
+++ b/docs/src/demos/components/Tiles/index.ts
@@ -1,4 +1,5 @@
 export * from './tiles-spacing.demo';
+export * from './tiles-stretch.demo';
 export * from './tiles-itemwidth.demo';
 export * from './tiles-complex.demo';
 export * from './tiles-autoRows.demo';
diff --git a/docs/src/demos/components/Tiles/tiles-autoRows.demo.tsx b/docs/src/demos/components/Tiles/tiles-autoRows.demo.tsx
index 4c6d1ba94..f42dd26bc 100644
--- a/docs/src/demos/components/Tiles/tiles-autoRows.demo.tsx
+++ b/docs/src/demos/components/Tiles/tiles-autoRows.demo.tsx
@@ -1,7 +1,7 @@
 import { Box, Card, Image, Tiles, Text } from '@marigold/components';
 
 export const AutoRows = () => (
-  <Tiles space="xsmall" gridAutoRows>
+  <Tiles space="xsmall" tilesWidth="250px" equalHeight>
     <Box as={Card}>
       <Image
         src="https://www.pokewiki.de/images/6/63/Sugimori_004.png"
diff --git a/docs/src/demos/components/Tiles/tiles-complex.demo.tsx b/docs/src/demos/components/Tiles/tiles-complex.demo.tsx
index f64698743..29ecd39cd 100644
--- a/docs/src/demos/components/Tiles/tiles-complex.demo.tsx
+++ b/docs/src/demos/components/Tiles/tiles-complex.demo.tsx
@@ -8,7 +8,7 @@ import {
 } from '@marigold/components';
 
 export const ComplexTiles = () => (
-  <Tiles itemMinWidth="300px" space="small">
+  <Tiles tilesWidth="300px" space="small">
     <Card p="small">
       <Stack space="medium" alignX="center">
         <Image
diff --git a/docs/src/demos/components/Tiles/tiles-itemwidth.demo.tsx b/docs/src/demos/components/Tiles/tiles-itemwidth.demo.tsx
index 5a71e9305..2fe003bf3 100644
--- a/docs/src/demos/components/Tiles/tiles-itemwidth.demo.tsx
+++ b/docs/src/demos/components/Tiles/tiles-itemwidth.demo.tsx
@@ -1,7 +1,7 @@
 import { Card, Image, Tiles } from '@marigold/components';
 
 export const ItemWidthTiles = () => (
-  <Tiles space="xsmall" itemMinWidth="100px">
+  <Tiles space="xsmall" tilesWidth="200px" stretch>
     <Card>
       <Image
         src="https://www.pokewiki.de/images/6/63/Sugimori_004.png"
diff --git a/docs/src/demos/components/Tiles/tiles-spacing.demo.tsx b/docs/src/demos/components/Tiles/tiles-spacing.demo.tsx
index 8116bb19a..430aca969 100644
--- a/docs/src/demos/components/Tiles/tiles-spacing.demo.tsx
+++ b/docs/src/demos/components/Tiles/tiles-spacing.demo.tsx
@@ -1,7 +1,7 @@
 import { Box, Tiles } from '@marigold/components';
 
 export const SpacingTiles = () => (
-  <Tiles space="large">
+  <Tiles tilesWidth="large" space="large">
     <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
     <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
     <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
diff --git a/docs/src/demos/components/Tiles/tiles-stretch.demo.tsx b/docs/src/demos/components/Tiles/tiles-stretch.demo.tsx
new file mode 100644
index 000000000..ebe86c714
--- /dev/null
+++ b/docs/src/demos/components/Tiles/tiles-stretch.demo.tsx
@@ -0,0 +1,32 @@
+import { Box, Divider, Headline, Stack, Tiles } from '@marigold/components';
+
+export const StretchTiles = () => (
+  <Stack space="large">
+    <Headline>Without stretch:</Headline>
+    <Tiles tilesWidth="150px" space="large">
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+    </Tiles>
+    <Divider />
+    <Tiles tilesWidth="150px" space="large">
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+    </Tiles>
+    <Headline>With stretch:</Headline>
+    <Tiles tilesWidth="150px" space="large" stretch>
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+    </Tiles>
+    <Divider />
+    <Tiles tilesWidth="150px" space="large" stretch>
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+    </Tiles>
+  </Stack>
+);
diff --git a/docs/src/demos/concepts-layouts.demo.tsx b/docs/src/demos/concepts-layouts.demo.tsx
index 7d9aeadb6..29b9f3b1d 100644
--- a/docs/src/demos/concepts-layouts.demo.tsx
+++ b/docs/src/demos/concepts-layouts.demo.tsx
@@ -28,7 +28,7 @@ export const LayoutsDemo = () => (
         <Annotation>Columns</Annotation>
       </>
       <>
-        <Tiles space="small-1" itemMinWidth="32px">
+        <Tiles space="small-1" tilesWidth="32px">
           <Squirecle />
           <Squirecle />
           <Squirecle />
diff --git a/docs/src/pages/components/tiles.mdx b/docs/src/pages/components/tiles.mdx
index 07942c103..979ac6ce2 100644
--- a/docs/src/pages/components/tiles.mdx
+++ b/docs/src/pages/components/tiles.mdx
@@ -13,7 +13,7 @@ It should be noted that `<Tiles>` is used for children with the same width. If y
 It's possible to display the children elements with some spacing or set a minimum width for all items inside `<Tiles>`.
 
 <Preview>
-  <Tiles space="small" itemMinWidth="200px">
+  <Tiles space="small" tilesWidth="200px">
     <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
     <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
     <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
@@ -44,16 +44,23 @@ import { Tiles } from '@marigold/components';
       default: 'none',
     },
     {
-      property: 'itemMinWidth',
+      property: 'tilesWidth',
       type: 'ResponsiveStyleValue<string>',
       description: 'Set minimum width for all items inside',
       default: '250px',
     },
     {
-      property: 'gridAutoRows',
+      property: 'equalHeight',
       type: 'boolean',
       description:
-        'If you set gridAutoRows, all items will have the size of the biggest item',
+        'If you set equalHeight, all items will have the size of the biggest item',
+      default: 'false',
+    },
+    {
+      property: 'stretch',
+      type: 'boolean',
+      description:
+        'Tiles will take stretch to available width and will distribute their width equally. Note that this can make them wider than the specified tiles width, but not smaller than the given "itemWidth". Basically this is full responsive mode.',
       default: 'false',
     },
   ]}
@@ -69,22 +76,30 @@ An example on how to use the `space` prop. The default is none. You can set it t
 
 ```
 
-### Tiles with itemMinWidth
+### Tiles with tilesWidth
 
-This Example shows how to use the `itemMinWidth` property on `<Tiles>`. The default value is `250px`.
+This Example shows how to use the `tilesWidth` property on `<Tiles>`.
 
 ```tsx preview file=components/Tiles/tiles-itemwidth.demo.tsx
 
 ```
 
-### Tiles with gridAutoRows
+### Tiles with equal Heights
 
-The Example shows how to use the `gidAutoRows` property, which is a boolean that can be used to size the items of the `<Tiles>`. You can see that all items have the size of the large Pikachu card. It is necessary if you want all items in the largest size of a child.
+The Example shows how to use the `equalHeight` property, which is a boolean that can be used to size the items of the `<Tiles>`. You can see that all items have the size of the large Pikachu card. It is necessary if you want all items in the largest size of a child.
 
 ```tsx preview file=components/Tiles/tiles-autoRows.demo.tsx
 
 ```
 
+### Tiles with and without stretch
+
+Using the `stretch` property will make the tiles fully responsive. Meaning, they will distribute available width between them while not getting smaller then the given `tilesWidth`,
+
+```tsx preview file=components/Tiles/tiles-stretch.demo.tsx
+
+```
+
 ### Complexe Tiles with Boxes and Stacks
 
 A full example of a use case with `<Tiles>` and `<Card>` inside it.
diff --git a/packages/components/src/Card/Card.stories.tsx b/packages/components/src/Card/Card.stories.tsx
index 188afd243..fa2149920 100644
--- a/packages/components/src/Card/Card.stories.tsx
+++ b/packages/components/src/Card/Card.stories.tsx
@@ -52,7 +52,7 @@ export const Basic: ComponentStory<typeof Card> = args => (
 );
 
 export const CoreCard: ComponentStory<typeof Card> = args => (
-  <Tiles itemMinWidth="300px" space="small">
+  <Tiles tilesWidth="300px" space="small">
     <Card {...args} p="xsmall">
       <Inline alignY="top">
         <Link href={'#'} target="blank">
diff --git a/packages/components/src/Checkbox/Checkbox.tsx b/packages/components/src/Checkbox/Checkbox.tsx
index 320597347..235441eaf 100644
--- a/packages/components/src/Checkbox/Checkbox.tsx
+++ b/packages/components/src/Checkbox/Checkbox.tsx
@@ -59,6 +59,7 @@ const Icon = ({ css, checked, indeterminate, ...props }: IconProps) => (
   <Box
     aria-hidden="true"
     __baseCSS={{
+      flex: '0 0 16px',
       width: 16,
       height: 16,
       bg: '#fff',
diff --git a/packages/components/src/Tiles/Tiles.stories.tsx b/packages/components/src/Tiles/Tiles.stories.tsx
index e9b273b36..256a86398 100644
--- a/packages/components/src/Tiles/Tiles.stories.tsx
+++ b/packages/components/src/Tiles/Tiles.stories.tsx
@@ -26,19 +26,21 @@ export default {
         },
       },
     },
-    itemMinWidth: {
+    tilesWidth: {
       control: {
         type: 'text',
       },
       description: 'Responsive Style Value',
-      defaultValue: '250px',
-      table: {
-        defaultValue: {
-          summary: '250px',
-        },
+      defaultValue: '300px',
+    },
+    stretch: {
+      control: {
+        type: 'boolean',
       },
+      description:
+        'Makes tiles take available width, instead of sticking to the tiles width',
     },
-    gridAutoRows: {
+    equalHeight: {
       control: {
         type: 'boolean',
       },
@@ -49,16 +51,23 @@ export default {
 } as Meta;
 
 export const Boxes: ComponentStory<typeof Tiles> = args => (
-  <Tiles {...args}>
-    <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
-    <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
-    <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
-    <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
-    <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
-    <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
-    <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
-    <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
-  </Tiles>
+  <>
+    <Tiles {...args}>
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+    </Tiles>
+    <br />
+    <Tiles {...args}>
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+    </Tiles>
+  </>
 );
 
 export const DifferentHights: ComponentStory<typeof Tiles> = args => (
diff --git a/packages/components/src/Tiles/Tiles.tsx b/packages/components/src/Tiles/Tiles.tsx
index 4d37cc476..8de50c76f 100755
--- a/packages/components/src/Tiles/Tiles.tsx
+++ b/packages/components/src/Tiles/Tiles.tsx
@@ -1,36 +1,54 @@
 import React, { ReactNode } from 'react';
 import { Box } from '../Box';
-import { ResponsiveStyleValue } from '@marigold/system';
+import { ResponsiveStyleValue, useTheme } from '@marigold/system';
 
 export interface TilesProps {
   children: ReactNode;
+  tilesWidth: string;
   space?: ResponsiveStyleValue<string>;
-  itemMinWidth?: ResponsiveStyleValue<string>;
-  gridAutoRows?: boolean;
+  stretch?: boolean;
+  equalHeight?: boolean;
 }
 
-export const Tiles = React.forwardRef<HTMLDivElement, TilesProps>(
-  (
-    {
-      space = 'none',
-      itemMinWidth = '250px',
-      gridAutoRows,
-      children,
-      ...props
-    },
-    ref
-  ) => (
+export const Tiles = ({
+  space = 'none',
+  stretch = false,
+  equalHeight = false,
+  tilesWidth,
+  children,
+  ...props
+}: TilesProps) => {
+  /**
+   * Allow to use design tokens for the tiles width.
+   */
+  const { css } = useTheme();
+  const { width } = css({ width: tilesWidth });
+
+  let column = `min(${typeof width === 'number' ? `${width}px` : width}, 100%)`;
+  /**
+   * Adding `minmax` with `1fr` will make the tiles distribute the
+   * availble width between each other and use the `tilesWidth` as
+   * breakpoint, e.g. when to move a tile into the next line.
+   */
+  if (stretch) {
+    column = `minmax(${column}, 1fr)`;
+  }
+
+  return (
     <Box
-      ref={ref}
-      display="grid"
-      __baseCSS={{
+      {...props}
+      css={{
+        display: 'grid',
         gap: space,
-        gridTemplateColumns: `repeat(auto-fit, minmax(min(${itemMinWidth}, 100%), 1fr))`,
-        gridAutoRows: gridAutoRows ? '1fr' : 'none',
+        gridTemplateColumns: `repeat(auto-fit, ${column})`,
+        /**
+         * Make height of all tiles in each row
+         * match the heighest tile.
+         */
+        gridAutoRows: equalHeight ? '1fr' : undefined,
       }}
-      {...props}
     >
       {children}
     </Box>
-  )
-);
+  );
+};
diff --git a/packages/icons/src/info/AutoRenew.tsx b/packages/icons/src/info/AutoRenew.tsx
index 442f074a5..2ab04aee4 100644
--- a/packages/icons/src/info/AutoRenew.tsx
+++ b/packages/icons/src/info/AutoRenew.tsx
@@ -3,6 +3,9 @@ import { SVG, SVGProps } from '@marigold/system';
 
 export const AutoRenew = forwardRef<SVGElement, SVGProps>((props, ref) => (
   <SVG {...props} viewBox="0 0 24 24" ref={ref}>
-    <path d="M12 6.87305C11.0723 6.87305 10.2178 7.10498 9.43652 7.56885C8.65527 8.03272 8.03882 8.65527 7.58716 9.43652C7.1355 10.2178 6.90967 11.0723 6.90967 12C6.90967 12.8545 7.10498 13.6479 7.49561 14.3804L6.25049 15.6255C5.54248 14.5268 5.18848 13.3184 5.18848 12C5.18848 10.7549 5.49365 9.61353 6.104 8.57593C6.71436 7.53832 7.54443 6.71436 8.59424 6.104C9.64405 5.49365 10.7793 5.18848 12 5.18848V2.625L15.4058 6.03076L12 9.43652V6.87305ZM17.7861 8.37451C18.4697 9.47315 18.8115 10.6816 18.8115 12C18.8115 13.2451 18.5064 14.3865 17.896 15.4241C17.2856 16.4617 16.4617 17.2856 15.4241 17.896C14.3865 18.5064 13.2451 18.8115 12 18.8115V21.375L8.59424 17.9692L12 14.5635V17.127C12.9277 17.127 13.7822 16.895 14.5635 16.4312C15.3447 15.9673 15.9673 15.3447 16.4312 14.5635C16.895 13.7822 17.127 12.9277 17.127 12C17.127 11.1699 16.9316 10.3765 16.541 9.61963L17.7861 8.37451Z" />
+    <path
+      stroke="currentColor"
+      d="M12 6.87305C11.0723 6.87305 10.2178 7.10498 9.43652 7.56885C8.65527 8.03272 8.03882 8.65527 7.58716 9.43652C7.1355 10.2178 6.90967 11.0723 6.90967 12C6.90967 12.8545 7.10498 13.6479 7.49561 14.3804L6.25049 15.6255C5.54248 14.5268 5.18848 13.3184 5.18848 12C5.18848 10.7549 5.49365 9.61353 6.104 8.57593C6.71436 7.53832 7.54443 6.71436 8.59424 6.104C9.64405 5.49365 10.7793 5.18848 12 5.18848V2.625L15.4058 6.03076L12 9.43652V6.87305ZM17.7861 8.37451C18.4697 9.47315 18.8115 10.6816 18.8115 12C18.8115 13.2451 18.5064 14.3865 17.896 15.4241C17.2856 16.4617 16.4617 17.2856 15.4241 17.896C14.3865 18.5064 13.2451 18.8115 12 18.8115V21.375L8.59424 17.9692L12 14.5635V17.127C12.9277 17.127 13.7822 16.895 14.5635 16.4312C15.3447 15.9673 15.9673 15.3447 16.4312 14.5635C16.895 13.7822 17.127 12.9277 17.127 12C17.127 11.1699 16.9316 10.3765 16.541 9.61963L17.7861 8.37451Z"
+    />
   </SVG>
 ));
diff --git a/packages/icons/src/ui/ExternalLink.tsx b/packages/icons/src/ui/ExternalLink.tsx
index 537d11dd3..deddfb9a8 100644
--- a/packages/icons/src/ui/ExternalLink.tsx
+++ b/packages/icons/src/ui/ExternalLink.tsx
@@ -3,6 +3,9 @@ import { SVG, SVGProps } from '@marigold/system';
 
 export const ExternalLink = forwardRef<SVGElement, SVGProps>((props, ref) => (
   <SVG {...props} viewBox="0 0 24 24" ref={ref}>
-    <path d="M18.5625 18.5625H5.4375V5.4375H12V3.5625H5.4375C4.39687 3.5625 3.5625 4.40625 3.5625 5.4375V18.5625C3.5625 19.5938 4.39687 20.4375 5.4375 20.4375H18.5625C19.5938 20.4375 20.4375 19.5938 20.4375 18.5625V12H18.5625V18.5625ZM13.8648 3.5625V5.44042H17.2356L8.00565 14.6704L9.32959 15.9943L18.5596 6.76436V10.1352H20.4375V3.5625H13.8648Z" />
+    <path
+      stroke="currentColor"
+      d="M18.5625 18.5625H5.4375V5.4375H12V3.5625H5.4375C4.39687 3.5625 3.5625 4.40625 3.5625 5.4375V18.5625C3.5625 19.5938 4.39687 20.4375 5.4375 20.4375H18.5625C19.5938 20.4375 20.4375 19.5938 20.4375 18.5625V12H18.5625V18.5625ZM13.8648 3.5625V5.44042H17.2356L8.00565 14.6704L9.32959 15.9943L18.5596 6.76436V10.1352H20.4375V3.5625H13.8648Z"
+    />
   </SVG>
 ));
diff --git a/themes/theme-core/src/components/Button.style.ts b/themes/theme-core/src/components/Button.style.ts
index 7be6e7a7f..0d0396f96 100644
--- a/themes/theme-core/src/components/Button.style.ts
+++ b/themes/theme-core/src/components/Button.style.ts
@@ -74,6 +74,7 @@ export const Button: Theme['components']['Button'] = {
       color: '#990000',
       border: 'none',
       bg: 'none',
+      p: 'none',
       '&:hover': {
         textDecoration: 'underline',
         bg: 'none',
diff --git a/themes/theme-core/src/components/Checkbox.style.ts b/themes/theme-core/src/components/Checkbox.style.ts
index b556d0c94..b29ac788a 100644
--- a/themes/theme-core/src/components/Checkbox.style.ts
+++ b/themes/theme-core/src/components/Checkbox.style.ts
@@ -16,6 +16,10 @@ export const Checkbox: Theme['components']['Checkbox'] = {
       bg: 'gray00',
       p: 2,
 
+      '&:hover': {
+        borderColor: 'gray50',
+      },
+
       '&:focus': {
         outline: '2px solid',
         outlineColor: 'blue60',


Test patch:
diff --git a/packages/components/src/Tiles/Tiles.test.tsx b/packages/components/src/Tiles/Tiles.test.tsx
index a1de441c4..75f1d1813 100644
--- a/packages/components/src/Tiles/Tiles.test.tsx
+++ b/packages/components/src/Tiles/Tiles.test.tsx
@@ -3,70 +3,74 @@ import { render, screen } from '@testing-library/react';
 import { Box, Tiles, MarigoldProvider } from '@marigold/components';
 
 const theme = {
+  sizes: {
+    none: 0,
+    large: 340,
+  },
   space: {
     none: 0,
     large: 24,
   },
 };
 
-test('supports default space prop', () => {
+test('set tiles width via prop', () => {
   render(
     <MarigoldProvider theme={theme}>
-      <Tiles data-testid="tiles">
+      <Tiles tilesWidth="200px" data-testid="tiles">
         <Box>tiles</Box>
       </Tiles>
     </MarigoldProvider>
   );
   const tiles = screen.getByTestId(/tiles/);
-  expect(tiles).toHaveStyle(`display: grid`);
-  expect(tiles).toHaveStyle(`gap: 0`);
+  expect(tiles).toHaveStyle(
+    `gridTemplateColumns: repeat(auto-fit, min(200px, 100%))`
+  );
 });
 
-test('supports other space prop than default', () => {
+test('supports setting tiles width with design tokens', () => {
   render(
     <MarigoldProvider theme={theme}>
-      <Tiles space="large" data-testid="tiles">
+      <Tiles tilesWidth="large" data-testid="tiles">
         <Box>tiles</Box>
       </Tiles>
     </MarigoldProvider>
   );
   const tiles = screen.getByTestId(/tiles/);
-  expect(tiles).toHaveStyle(`display: grid`);
-  expect(tiles).toHaveStyle(`gap: 24px`);
+  expect(tiles).toHaveStyle(
+    `gridTemplateColumns: repeat(auto-fit, min(${theme.sizes.large}px, 100%))`
+  );
 });
 
-test('supports default itemMinWidth prop', () => {
+test('supports space prop', () => {
   render(
     <MarigoldProvider theme={theme}>
-      <Tiles data-testid="tiles">
+      <Tiles tilesWidth="200px" space="large" data-testid="tiles">
         <Box>tiles</Box>
       </Tiles>
     </MarigoldProvider>
   );
   const tiles = screen.getByTestId(/tiles/);
-  expect(tiles).toHaveStyle(
-    `gridTemplateColumns: repeat(auto-fit, minmax(min(250px, 100%), 1fr))`
-  );
+  expect(tiles).toHaveStyle(`gap: ${theme.space.large}px`);
 });
 
-test('supports other itemMinWidth prop than default', () => {
+test('supports responsive grid via stretch prop', () => {
   render(
     <MarigoldProvider theme={theme}>
-      <Tiles itemMinWidth="400px" data-testid="tiles">
+      <Tiles tilesWidth="300px" stretch data-testid="tiles">
         <Box>tiles</Box>
       </Tiles>
     </MarigoldProvider>
   );
   const tiles = screen.getByTestId(/tiles/);
   expect(tiles).toHaveStyle(
-    `gridTemplateColumns: repeat(auto-fit, minmax(min(400px, 100%), 1fr))`
+    `gridTemplateColumns: repeat(auto-fit, minmax(min(300px, 100%), 1fr))`
   );
 });
 
 test('supports gridAutoRows prop', () => {
   render(
     <MarigoldProvider theme={theme}>
-      <Tiles gridAutoRows data-testid="tiles">
+      <Tiles tilesWidth="400px" equalHeight data-testid="tiles">
         <Box>tiles</Box>
         <Box>tiles</Box>
         <Box>tiles</Box>