feat(SW-375): new tokens

new asset generation logic

BREAKING CHANGE: New tokens.

packages/design-system/example/components/ContentPage/RichTextEditorContent/RichTextEditorContent.tsx

@@ -0,0 +1,71 @@
+import { Typography } from '@scandic-hotels/design-system/Typography'
+
+import styles from './ricth-text-editor-content.module.css'
+
+export function RichTextEditorContent() {
+  return (
+    <div className={styles.container}>
+      <Typography variant="Title/md">
+        <h2>The new harbor in Copenhagen</h2>
+      </Typography>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p>
+          The old harbour district was excavated in the late 17th century and
+          since the harbour would serve as a supplement to the existing harbour,
+          it was given the name The New Harbour (Den Nye Havn later became
+          Nyhavn). Ships from around the world arrived here, and Nyhavn
+          therefore became a mecca for traders and craftsmen.
+        </p>
+      </Typography>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p>
+          Today, the maritime life from the 17th century is long gone although
+          you can still find old tattoo shops and pubs, reminiscent of days gone
+          by.
+        </p>
+      </Typography>
+      <Typography variant="Title/Subtitle/lg">
+        <h3>The buildings in Nyhavn</h3>
+      </Typography>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p>
+          The beautiful old buildings in Nyhavn are made up of civic buildings
+          and warehouses from the 17th and 18th centuries. Painted in beautiful
+          colours they are the subject of many postcards and holiday photos. The
+          oldest building in Nyhavn is No. 9 dating from 1681. It has not
+          undergone any renovation or extensions and stands as it did when it
+          was built. The houses in Nyhavn are still residences and in most of
+          them you'll find cafes, bars and restaurants.
+        </p>
+      </Typography>
+      <img src="/img/img2.jpg" alt="Nyhavn" />
+      <Typography variant="Title/Subtitle/lg">
+        <h3>Hans Christian Andersen's Nyhavn</h3>
+      </Typography>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p>
+          Hans Christian Andersen, the famed Danish storyteller, spent many
+          years of his life in Nyhavn, drawing inspiration from its lively
+          atmosphere and picturesque setting. Andersen lived in several houses
+          along the waterfront, notably at numbers 20, 67, and 18, where he
+          penned some of his most famous fairy tales. Nyhavn's vibrant mix of
+          sailors, bustling cafes, and the eclectic crowd fueled his
+          imagination, contributing to the creation of timeless stories that
+          continue to enchant readers worldwide.
+        </p>
+      </Typography>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p>
+          Today, Nyhavn preserves the memory of Andersen with plaques marking
+          his residences and a statue nearby, inviting visitors to walk in the
+          footsteps of the literary giant. The area remains as colorful and
+          spirited as it was during Andersen's time, reflecting the essence of
+          his tales in its cobbled streets and bright facades. Walking through
+          Nyhavn, one can almost hear the echoes of his stories, woven into the
+          fabric of the place, making it a pilgrimage site for lovers of
+          literature and history alike.
+        </p>
+      </Typography>
+    </div>
+  )
+}

packages/design-system/example/components/ContentPage/RichTextEditorContent/index.tsx

@@ -0,0 +1 @@
+export { RichTextEditorContent } from './RichTextEditorContent'

packages/design-system/example/components/ContentPage/RichTextEditorContent/ricth-text-editor-content.module.css

@@ -0,0 +1,21 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x15);
+}
+
+.container h2 + p {
+  padding-top: var(--Space-x05);
+}
+
+.container p + h2,
+.container p + h3,
+.container p + h4,
+.container p + h5 {
+  padding-top: var(--Space-x15);
+}
+
+.container img {
+  padding: var(--Space-x15) 0;
+  border-radius: var(--Corner-radius-md);
+}