feat: Change values for tall, wide, and extra wide aspect ratios (#1254)

Amsterdam · Jun 12, 2024 · 478508a · 478508a
1 parent e7fda6c
commit 478508a
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 11 deletions.
diff --git a/packages/css/src/components/aspect-ratio/README.md b/packages/css/src/components/aspect-ratio/README.md
@@ -8,11 +8,11 @@ These are the proportions we use:
 
 | keyword   | ratio |
 | :-------- | ----: |
-| `2x-wide` |  32:9 |
+| `2x-wide` |  16:5 |
 | `x-wide`  |  16:9 |
-| `wide`    |   5:4 |
+| `wide`    |   4:3 |
 | `square`  |   1:1 |
-| `tall`    |   4:5 |
+| `tall`    |   3:4 |
 | `x-tall`  |  9:16 |
 
 ## Guidelines

diff --git a/proprietary/tokens/src/brand/ams/proportion.tokens.json b/proprietary/tokens/src/brand/ams/proportion.tokens.json
@@ -2,11 +2,11 @@
   "ams": {
     "proportion": {
       "x-tall": { "value": "9 / 16" },
-      "tall": { "value": "4 / 5" },
+      "tall": { "value": "3 / 4" },
       "square": { "value": "1 / 1" },
-      "wide": { "value": "5 / 4" },
+      "wide": { "value": "4 / 3" },
       "x-wide": { "value": "16 / 9" },
-      "2x-wide": { "value": "32 / 9" }
+      "2x-wide": { "value": "16 / 5" }
     }
   }
 }
diff --git a/storybook/src/components/AspectRatio/AspectRatio.stories.tsx b/storybook/src/components/AspectRatio/AspectRatio.stories.tsx
@@ -26,19 +26,19 @@ type Story = StoryObj<typeof meta>
 
 const storyConfig = {
   '2x-wide': {
-    image: 'https://picsum.photos/1280/360',
+    image: 'https://picsum.photos/1152/360',
   },
   'x-wide': {
     image: 'https://picsum.photos/640/360',
   },
   wide: {
-    image: 'https://picsum.photos/450/360',
+    image: 'https://picsum.photos/480/360',
   },
   square: {
     image: 'https://picsum.photos/360/360',
   },
   tall: {
-    image: 'https://picsum.photos/360/450',
+    image: 'https://picsum.photos/360/480',
   },
   'x-tall': {
     image: 'https://picsum.photos/360/640',

diff --git a/storybook/src/components/Card/Card.stories.tsx b/storybook/src/components/Card/Card.stories.tsx
@@ -61,7 +61,7 @@ export const WithImage: Story = {
   args: {
     children: [
       <AspectRatio key={1} ratio="wide">
-        <Image alt="" src="https://picsum.photos/450/360" />
+        <Image alt="" src="https://picsum.photos/480/360" />
       </AspectRatio>,
       <Card.HeadingGroup key={2} tagline="Dossier">
         <Heading size="level-4">

diff --git a/storybook/src/components/Overlap/Overlap.stories.tsx b/storybook/src/components/Overlap/Overlap.stories.tsx
@@ -23,7 +23,7 @@ export const Default: Story = {
           alt=""
           cover
           sizes="(max-width: 36rem) 640px, (max-width: 68rem) 1280px, 1600px"
-          srcSet="https://picsum.photos/640/180 640w, https://picsum.photos/1280/360 1280w, https://picsum.photos/1600/450 1600w"
+          srcSet="https://picsum.photos/640/200 640w, https://picsum.photos/1280/400 1280w, https://picsum.photos/1600/500 1600w"
         />
       </AspectRatio>,
       <Grid key="search-field" style={{ alignSelf: 'center' }}>