From f3b2a683f1212ff470b8b981e028c32c07835a49 Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Thu, 5 Sep 2024 14:46:50 +0200
Subject: [PATCH 01/21] feat: add list style file

---
 packages/styles/src/components/_index.scss | 1 +
 packages/styles/src/components/list.scss   | 8 ++++++++
 2 files changed, 9 insertions(+)
 create mode 100644 packages/styles/src/components/list.scss

diff --git a/packages/styles/src/components/_index.scss b/packages/styles/src/components/_index.scss
index f003b7e37f..0b86a3b94f 100644
--- a/packages/styles/src/components/_index.scss
+++ b/packages/styles/src/components/_index.scss
@@ -23,6 +23,7 @@
 @use 'forms';
 @use 'grid';
 @use 'icons';
+@use 'list';
 @use 'list-group';
 @use 'modal';
 @use 'pagination';
diff --git a/packages/styles/src/components/list.scss b/packages/styles/src/components/list.scss
new file mode 100644
index 0000000000..18c0861d8b
--- /dev/null
+++ b/packages/styles/src/components/list.scss
@@ -0,0 +1,8 @@
+@use 'sass:map';
+@use '../tokens/components' as tokens;
+
+$text-padding: map.get(tokens.$post-list, 'post-list-checks-spacing-padding-text');
+
+.list-checks {
+  list-style: none;
+}

From dd1750bf5b927c0a6d0ee740a897665e259a0c8d Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Thu, 5 Sep 2024 14:47:24 +0200
Subject: [PATCH 02/21] feat: add list-check documentation

---
 .../src/stories/utilities/list/list.docs.mdx          | 11 +++++++++--
 .../src/stories/utilities/list/list.stories.ts        | 10 ++++++++++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/documentation/src/stories/utilities/list/list.docs.mdx b/packages/documentation/src/stories/utilities/list/list.docs.mdx
index a9d6ade2a3..5721110a3b 100644
--- a/packages/documentation/src/stories/utilities/list/list.docs.mdx
+++ b/packages/documentation/src/stories/utilities/list/list.docs.mdx
@@ -5,7 +5,7 @@ import * as ListStories from './list.stories';
 
 # Lists
 
-<p className="lead">Use lists to group a collection  of related items.</p>
+<p className="lead">Use lists to group a collection of related items.</p>
 
 There are three types of HTML lists: unordered lists, ordered lists, and description lists.
 Utility classes allow you to style each of these lists in different ways.
@@ -29,7 +29,7 @@ This only applies to immediate child list items, meaning you will need to add th
 Remove a list’s bullets and apply some light margin with a combination of two classes,
 `.list-inline` and `.list-inline-item`.
 
-<Canvas of={ListStories.InlineList} sourceState="shown"/>
+<Canvas of={ListStories.InlineList} sourceState="shown" />
 
 ## Ordered List
 
@@ -40,6 +40,13 @@ It is created using a `<ol>` tag and list items are preceded by ascending number
 
 <Canvas of={ListStories.OrderedList} sourceState="shown" />
 
+## Check List
+
+An unordered list groups related items in no specific order.
+It is created using a `<ul>` tag with `list-checks` class. Each list item is preceded with check icon.
+
+<Canvas of={ListStories.CheckList} sourceState="shown" />
+
 ## Description List
 
 A description list is a list of terms, with a description of each term.
diff --git a/packages/documentation/src/stories/utilities/list/list.stories.ts b/packages/documentation/src/stories/utilities/list/list.stories.ts
index f06cbf056d..d0ba1738d5 100644
--- a/packages/documentation/src/stories/utilities/list/list.stories.ts
+++ b/packages/documentation/src/stories/utilities/list/list.stories.ts
@@ -83,6 +83,16 @@ export const OrderedList: Story = {
   `,
 };
 
+export const CheckList: Story = {
+  render: () => html`
+    <ul class="list-checks">
+      <li>This is a check list item.</li>
+      <li>And another one.</li>
+      <li>And one more.</li>
+    </ul>
+  `,
+};
+
 export const DescriptionList: Story = {
   render: () => html`
     <dl>

From f90299a2e111ba2fab8ecc27cee998dfd9ee5a02 Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Fri, 6 Sep 2024 10:21:13 +0200
Subject: [PATCH 03/21] chore: add nested unordered list

---
 .../src/stories/utilities/list/list.stories.ts       | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/documentation/src/stories/utilities/list/list.stories.ts b/packages/documentation/src/stories/utilities/list/list.stories.ts
index d0ba1738d5..b826500c8a 100644
--- a/packages/documentation/src/stories/utilities/list/list.stories.ts
+++ b/packages/documentation/src/stories/utilities/list/list.stories.ts
@@ -85,11 +85,21 @@ export const OrderedList: Story = {
 
 export const CheckList: Story = {
   render: () => html`
+    <p>Text to show alignment of check mark with text</p>
     <ul class="list-checks">
       <li>This is a check list item.</li>
       <li>And another one.</li>
-      <li>And one more.</li>
+      <li>
+        Nested list:
+        <ul class="list-checks">
+          <li>This is a check list item.</li>
+          <li>And another one.</li>
+          <li>And one more.</li>
+        </ul>
+      </li>
+      <li>And another one.</li>
     </ul>
+    <p>Text to show alignment of check mark with text</p>
   `,
 };
 

From 5bd951db7e3236ecfcc731946194081fd0d935f8 Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Mon, 9 Sep 2024 13:28:55 +0200
Subject: [PATCH 04/21] feat: add basic style of check list

---
 packages/styles/src/components/list.scss | 38 ++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/packages/styles/src/components/list.scss b/packages/styles/src/components/list.scss
index 18c0861d8b..5994dc31ea 100644
--- a/packages/styles/src/components/list.scss
+++ b/packages/styles/src/components/list.scss
@@ -1,8 +1,46 @@
 @use 'sass:map';
 @use '../tokens/components' as tokens;
+@use './../functions/icons';
 
 $text-padding: map.get(tokens.$post-list, 'post-list-checks-spacing-padding-text');
+$sizing-icon: map.get(tokens.$post-list, 'post-list-checks-sizing-icon');
+$icon-bg: map.get(tokens.$post-list, 'post-list-checks-color-icon-bg');
+$icon-fg: map.get(tokens.$post-list, 'post-list-checks-color-icon-fg');
+$text-fg: map.get(tokens.$post-list, 'post-list-checks-color-text-fg');
+$padding-icon: map.get(tokens.$post-list, 'post-list-checks-spacing-padding-icon');
+$padding-text: map.get(tokens.$post-list, 'post-list-checks-spacing-padding-text');
+$padding-block-outer: map.get(tokens.$post-list, 'post-list-checks-spacing-padding-block-outer');
+$gap-inline-text: map.get(tokens.$post-list, 'post-list-checks-spacing-gap-inline-text');
+$gap-block-text: map.get(tokens.$post-list, 'post-list-checks-spacing-gap-block-text');
 
 .list-checks {
   list-style: none;
+  padding-left: 0;
+  padding-block: $padding-block-outer;
+  margin-bottom: 0;
+
+  & > li {
+    position: relative;
+    padding-left: calc(#{$padding-block-outer} + #{$sizing-icon});
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      width: $sizing-icon;
+      height: $sizing-icon;
+      padding: $padding-icon;
+      background-repeat: no-repeat;
+      background-position-x: 50%;
+      background-position-y: center;
+      background-color: $icon-bg;
+      border-radius: 50%;
+      background-size: calc(#{$sizing-icon} - #{$padding-icon} * 2);
+      background-image: url('#{icons.get-colored-svg-url("2105", "white")}');
+    }
+  }
+
+  & > li:not(:last-child) {
+    padding-bottom: $gap-block-text;
+  }
 }

From 64165d220494a303f39c6dba3f8c48c55fef8086 Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Mon, 9 Sep 2024 14:21:28 +0200
Subject: [PATCH 05/21] chore: adjust spaces

---
 packages/styles/src/components/list.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/styles/src/components/list.scss b/packages/styles/src/components/list.scss
index 5994dc31ea..2187c44ede 100644
--- a/packages/styles/src/components/list.scss
+++ b/packages/styles/src/components/list.scss
@@ -21,7 +21,7 @@ $gap-block-text: map.get(tokens.$post-list, 'post-list-checks-spacing-gap-block-
 
   & > li {
     position: relative;
-    padding-left: calc(#{$padding-block-outer} + #{$sizing-icon});
+    padding-left: calc(#{$gap-inline-text} + #{$sizing-icon});
 
     &::before {
       content: '';
@@ -38,9 +38,13 @@ $gap-block-text: map.get(tokens.$post-list, 'post-list-checks-spacing-gap-block-
       background-size: calc(#{$sizing-icon} - #{$padding-icon} * 2);
       background-image: url('#{icons.get-colored-svg-url("2105", "white")}');
     }
+
+    & > ul {
+      padding-bottom: 0;
+    }
   }
 
   & > li:not(:last-child) {
-    padding-bottom: $gap-block-text;
+    margin-bottom: $gap-block-text;
   }
 }

From 7bbe7252dfa6f166f433cbebe4d299c613aa4e48 Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Mon, 9 Sep 2024 15:14:02 +0200
Subject: [PATCH 06/21] style clean-up variable

---
 packages/styles/src/components/list.scss | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/packages/styles/src/components/list.scss b/packages/styles/src/components/list.scss
index 2187c44ede..cdd9df6b51 100644
--- a/packages/styles/src/components/list.scss
+++ b/packages/styles/src/components/list.scss
@@ -2,26 +2,20 @@
 @use '../tokens/components' as tokens;
 @use './../functions/icons';
 
-$text-padding: map.get(tokens.$post-list, 'post-list-checks-spacing-padding-text');
 $sizing-icon: map.get(tokens.$post-list, 'post-list-checks-sizing-icon');
-$icon-bg: map.get(tokens.$post-list, 'post-list-checks-color-icon-bg');
-$icon-fg: map.get(tokens.$post-list, 'post-list-checks-color-icon-fg');
-$text-fg: map.get(tokens.$post-list, 'post-list-checks-color-text-fg');
 $padding-icon: map.get(tokens.$post-list, 'post-list-checks-spacing-padding-icon');
-$padding-text: map.get(tokens.$post-list, 'post-list-checks-spacing-padding-text');
-$padding-block-outer: map.get(tokens.$post-list, 'post-list-checks-spacing-padding-block-outer');
-$gap-inline-text: map.get(tokens.$post-list, 'post-list-checks-spacing-gap-inline-text');
-$gap-block-text: map.get(tokens.$post-list, 'post-list-checks-spacing-gap-block-text');
 
 .list-checks {
   list-style: none;
   padding-left: 0;
-  padding-block: $padding-block-outer;
+  padding-block: map.get(tokens.$post-list, 'post-list-checks-spacing-padding-block-outer');
   margin-bottom: 0;
 
   & > li {
     position: relative;
-    padding-left: calc(#{$gap-inline-text} + #{$sizing-icon});
+    padding-left: calc(
+      #{map.get(tokens.$post-list, 'post-list-checks-spacing-gap-inline-text')} + #{$sizing-icon}
+    );
 
     &::before {
       content: '';
@@ -33,10 +27,10 @@ $gap-block-text: map.get(tokens.$post-list, 'post-list-checks-spacing-gap-block-
       background-repeat: no-repeat;
       background-position-x: 50%;
       background-position-y: center;
-      background-color: $icon-bg;
+      background-color: map.get(tokens.$post-list, 'post-list-checks-color-icon-bg');
       border-radius: 50%;
       background-size: calc(#{$sizing-icon} - #{$padding-icon} * 2);
-      background-image: url('#{icons.get-colored-svg-url("2105", "white")}');
+      background-image: url('#{icons.get-colored-svg-url("2105", "white")}'); // 'white' should be changed with variable
     }
 
     & > ul {
@@ -45,6 +39,6 @@ $gap-block-text: map.get(tokens.$post-list, 'post-list-checks-spacing-gap-block-
   }
 
   & > li:not(:last-child) {
-    margin-bottom: $gap-block-text;
+    margin-bottom: map.get(tokens.$post-list, 'post-list-checks-spacing-gap-block-text');
   }
 }

From c3cb103b48346f0a9fbcd3ad3e0a7e631ed4b826 Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Mon, 9 Sep 2024 15:19:11 +0200
Subject: [PATCH 07/21] chore: move list to Components

---
 .../src/stories/{utilities => components}/list/list.docs.mdx    | 0
 .../src/stories/{utilities => components}/list/list.stories.ts  | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/documentation/src/stories/{utilities => components}/list/list.docs.mdx (100%)
 rename packages/documentation/src/stories/{utilities => components}/list/list.stories.ts (99%)

diff --git a/packages/documentation/src/stories/utilities/list/list.docs.mdx b/packages/documentation/src/stories/components/list/list.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/utilities/list/list.docs.mdx
rename to packages/documentation/src/stories/components/list/list.docs.mdx
diff --git a/packages/documentation/src/stories/utilities/list/list.stories.ts b/packages/documentation/src/stories/components/list/list.stories.ts
similarity index 99%
rename from packages/documentation/src/stories/utilities/list/list.stories.ts
rename to packages/documentation/src/stories/components/list/list.stories.ts
index b826500c8a..0a3dc7ac6d 100644
--- a/packages/documentation/src/stories/utilities/list/list.stories.ts
+++ b/packages/documentation/src/stories/components/list/list.stories.ts
@@ -4,7 +4,7 @@ import { MetaExtended } from '@root/types';
 
 const meta: MetaExtended = {
   id: 'e76192bb-b2eb-487a-b9c1-ef938bccdfc4',
-  title: 'Utilities/List',
+  title: 'Components/List',
   parameters: {
     badges: [],
   },

From 1741047c16247f92d2cff52d00d851d96c9de3cc Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Mon, 9 Sep 2024 15:35:26 +0200
Subject: [PATCH 08/21] chore: remove extra paragraphs

---
 .../documentation/src/stories/components/list/list.stories.ts   | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/documentation/src/stories/components/list/list.stories.ts b/packages/documentation/src/stories/components/list/list.stories.ts
index 0a3dc7ac6d..8766942bd9 100644
--- a/packages/documentation/src/stories/components/list/list.stories.ts
+++ b/packages/documentation/src/stories/components/list/list.stories.ts
@@ -85,7 +85,6 @@ export const OrderedList: Story = {
 
 export const CheckList: Story = {
   render: () => html`
-    <p>Text to show alignment of check mark with text</p>
     <ul class="list-checks">
       <li>This is a check list item.</li>
       <li>And another one.</li>
@@ -99,7 +98,6 @@ export const CheckList: Story = {
       </li>
       <li>And another one.</li>
     </ul>
-    <p>Text to show alignment of check mark with text</p>
   `,
 };
 

From e753c907b1fce68f82dae0ebcb61d48ffb5e63db Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Mon, 9 Sep 2024 15:47:20 +0200
Subject: [PATCH 09/21] fix: remove unnecessary nested selector

---
 packages/styles/src/components/list.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/styles/src/components/list.scss b/packages/styles/src/components/list.scss
index cdd9df6b51..a03aebeaf5 100644
--- a/packages/styles/src/components/list.scss
+++ b/packages/styles/src/components/list.scss
@@ -11,7 +11,7 @@ $padding-icon: map.get(tokens.$post-list, 'post-list-checks-spacing-padding-icon
   padding-block: map.get(tokens.$post-list, 'post-list-checks-spacing-padding-block-outer');
   margin-bottom: 0;
 
-  & > li {
+  > li {
     position: relative;
     padding-left: calc(
       #{map.get(tokens.$post-list, 'post-list-checks-spacing-gap-inline-text')} + #{$sizing-icon}
@@ -33,12 +33,12 @@ $padding-icon: map.get(tokens.$post-list, 'post-list-checks-spacing-padding-icon
       background-image: url('#{icons.get-colored-svg-url("2105", "white")}'); // 'white' should be changed with variable
     }
 
-    & > ul {
+    > ul {
       padding-bottom: 0;
     }
   }
 
-  & > li:not(:last-child) {
+  > li:not(:last-child) {
     margin-bottom: map.get(tokens.$post-list, 'post-list-checks-spacing-gap-block-text');
   }
 }

From 33b23f194d33817ed812ad5c81326064163a862a Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Tue, 10 Sep 2024 10:18:45 +0200
Subject: [PATCH 10/21] feat: implement tokens with get function

---
 packages/styles/src/components/list.scss | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/styles/src/components/list.scss b/packages/styles/src/components/list.scss
index a03aebeaf5..490b6d0ec9 100644
--- a/packages/styles/src/components/list.scss
+++ b/packages/styles/src/components/list.scss
@@ -1,20 +1,23 @@
-@use 'sass:map';
-@use '../tokens/components' as tokens;
+@use '../tokens/components' as components;
+@use '../functions/tokens' as tokens;
 @use './../functions/icons';
 
-$sizing-icon: map.get(tokens.$post-list, 'post-list-checks-sizing-icon');
-$padding-icon: map.get(tokens.$post-list, 'post-list-checks-spacing-padding-icon');
+tokens.$default-map: components.$post-list;
+
+$sizing-icon: tokens.get('post-list-checks', 'sizing-icon');
+$padding-icon: tokens.get('post-list-checks', 'spacing-padding-icon');
 
 .list-checks {
   list-style: none;
   padding-left: 0;
-  padding-block: map.get(tokens.$post-list, 'post-list-checks-spacing-padding-block-outer');
+  padding-block: tokens.get('post-list-checks', 'spacing-padding-block-outer');
   margin-bottom: 0;
 
   > li {
     position: relative;
     padding-left: calc(
-      #{map.get(tokens.$post-list, 'post-list-checks-spacing-gap-inline-text')} + #{$sizing-icon}
+      #{tokens.get('post-list-checks', 'spacing-gap-inline-text'),
+      } + #{$sizing-icon}
     );
 
     &::before {
@@ -27,7 +30,7 @@ $padding-icon: map.get(tokens.$post-list, 'post-list-checks-spacing-padding-icon
       background-repeat: no-repeat;
       background-position-x: 50%;
       background-position-y: center;
-      background-color: map.get(tokens.$post-list, 'post-list-checks-color-icon-bg');
+      background-color: tokens.get('post-list-checks', 'color-icon-bg');
       border-radius: 50%;
       background-size: calc(#{$sizing-icon} - #{$padding-icon} * 2);
       background-image: url('#{icons.get-colored-svg-url("2105", "white")}'); // 'white' should be changed with variable
@@ -39,6 +42,6 @@ $padding-icon: map.get(tokens.$post-list, 'post-list-checks-spacing-padding-icon
   }
 
   > li:not(:last-child) {
-    margin-bottom: map.get(tokens.$post-list, 'post-list-checks-spacing-gap-block-text');
+    margin-bottom: tokens.get('post-list-checks', 'spacing-gap-block-text');
   }
 }

From 3450d87b5ac9d0f015e4e8724ed58c166a1c1c24 Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Tue, 10 Sep 2024 10:35:03 +0200
Subject: [PATCH 11/21] feat: add changeset

---
 .changeset/old-beers-cough.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/old-beers-cough.md

diff --git a/.changeset/old-beers-cough.md b/.changeset/old-beers-cough.md
new file mode 100644
index 0000000000..a7c1859105
--- /dev/null
+++ b/.changeset/old-beers-cough.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added Check List, which is an unordered list. Each list item is preceded with check icon.

From 7ef2afa93a7f98d5475bff795415eaf535ce2795 Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Tue, 10 Sep 2024 15:23:21 +0200
Subject: [PATCH 12/21] chore: add space to check mark on mobile

---
 packages/styles/src/components/list.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/styles/src/components/list.scss b/packages/styles/src/components/list.scss
index 490b6d0ec9..0c30cbe836 100644
--- a/packages/styles/src/components/list.scss
+++ b/packages/styles/src/components/list.scss
@@ -1,3 +1,4 @@
+@use './../themes/bootstrap/core' as *;
 @use '../tokens/components' as components;
 @use '../functions/tokens' as tokens;
 @use './../functions/icons';
@@ -36,6 +37,12 @@ $padding-icon: tokens.get('post-list-checks', 'spacing-padding-icon');
       background-image: url('#{icons.get-colored-svg-url("2105", "white")}'); // 'white' should be changed with variable
     }
 
+    @include media-breakpoint-down(sm) {
+      &::before {
+        margin: tokens.get('post-list-checks', 'spacing-padding-icon');
+      }
+    }
+
     > ul {
       padding-bottom: 0;
     }

From 4edb8a96b54e461a7becfb96b04468f340a67f3b Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Fri, 13 Sep 2024 08:53:06 +0200
Subject: [PATCH 13/21] chore: reformat the css properties

---
 packages/styles/src/components/list.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/styles/src/components/list.scss b/packages/styles/src/components/list.scss
index 0c30cbe836..9a14eaa3f1 100644
--- a/packages/styles/src/components/list.scss
+++ b/packages/styles/src/components/list.scss
@@ -16,7 +16,7 @@ $padding-icon: tokens.get('post-list-checks', 'spacing-padding-icon');
 
   > li {
     position: relative;
-    padding-left: calc(
+    padding-inline-start: calc(
       #{tokens.get('post-list-checks', 'spacing-gap-inline-text'),
       } + #{$sizing-icon}
     );
@@ -49,6 +49,6 @@ $padding-icon: tokens.get('post-list-checks', 'spacing-padding-icon');
   }
 
   > li:not(:last-child) {
-    margin-bottom: tokens.get('post-list-checks', 'spacing-gap-block-text');
+    margin-block-end: tokens.get('post-list-checks', 'spacing-gap-block-text');
   }
 }

From a3b0fc274cf232708c3dec98aeefc7861235d4e3 Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Tue, 1 Oct 2024 13:39:14 +0200
Subject: [PATCH 14/21] chore: adjust check mark size and use icon mixin

---
 .../stories/components/list/list.stories.ts   |  7 +++-
 packages/styles/src/components/list.scss      | 38 ++++++++++++-------
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/packages/documentation/src/stories/components/list/list.stories.ts b/packages/documentation/src/stories/components/list/list.stories.ts
index 8766942bd9..c717a5de30 100644
--- a/packages/documentation/src/stories/components/list/list.stories.ts
+++ b/packages/documentation/src/stories/components/list/list.stories.ts
@@ -96,7 +96,12 @@ export const CheckList: Story = {
           <li>And one more.</li>
         </ul>
       </li>
-      <li>And another one.</li>
+      <li>
+        And another long text to check how it look like. Lorem Ipsum is simply dummy text of the
+        printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
+        ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
+        a type specimen book
+      </li>
     </ul>
   `,
 };
diff --git a/packages/styles/src/components/list.scss b/packages/styles/src/components/list.scss
index 9a14eaa3f1..a98424a2ba 100644
--- a/packages/styles/src/components/list.scss
+++ b/packages/styles/src/components/list.scss
@@ -1,7 +1,7 @@
-@use './../themes/bootstrap/core' as *;
-@use '../tokens/components' as components;
-@use '../functions/tokens' as tokens;
-@use './../functions/icons';
+@use './../mixins/media';
+@use '../tokens/components';
+@use '../functions/tokens';
+@use '../mixins/icons';
 
 tokens.$default-map: components.$post-list;
 
@@ -21,24 +21,34 @@ $padding-icon: tokens.get('post-list-checks', 'spacing-padding-icon');
       } + #{$sizing-icon}
     );
 
-    &::before {
+    &::before,
+    &::after {
       content: '';
       position: absolute;
-      left: 0;
+    }
+
+    &::before {
+      @include icons.icon(2105);
+      left: calc($padding-icon);
+      top: calc($padding-icon);
       width: $sizing-icon;
       height: $sizing-icon;
-      padding: $padding-icon;
-      background-repeat: no-repeat;
-      background-position-x: 50%;
-      background-position-y: center;
+      background-color: tokens.get('post-list-checks', 'color-icon-fg');
+      z-index: 2;
+    }
+
+    &::after {
+      left: 0;
+      top: 0;
+      width: calc(#{$sizing-icon} + (#{$padding-icon} * 2));
+      height: calc(#{$sizing-icon} + (#{$padding-icon} * 2));
       background-color: tokens.get('post-list-checks', 'color-icon-bg');
       border-radius: 50%;
-      background-size: calc(#{$sizing-icon} - #{$padding-icon} * 2);
-      background-image: url('#{icons.get-colored-svg-url("2105", "white")}'); // 'white' should be changed with variable
     }
 
-    @include media-breakpoint-down(sm) {
-      &::before {
+    @include media.max(400px) {
+      &::before,
+      &::after {
         margin: tokens.get('post-list-checks', 'spacing-padding-icon');
       }
     }

From 1ab80585c852b191500eb121c019796ed13b00ae Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Tue, 1 Oct 2024 13:46:06 +0200
Subject: [PATCH 15/21] style: format code

---
 packages/styles/src/components/list.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/styles/src/components/list.scss b/packages/styles/src/components/list.scss
index a98424a2ba..068143e09f 100644
--- a/packages/styles/src/components/list.scss
+++ b/packages/styles/src/components/list.scss
@@ -1,7 +1,7 @@
-@use './../mixins/media';
+@use '../mixins/media';
+@use '../mixins/icons';
 @use '../tokens/components';
 @use '../functions/tokens';
-@use '../mixins/icons';
 
 tokens.$default-map: components.$post-list;
 

From 5d275501d19aa372727ea3f60963aa99845c16eb Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Tue, 1 Oct 2024 15:04:03 +0200
Subject: [PATCH 16/21] fix: update tokens

---
 packages/styles/src/components/list.scss | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/styles/src/components/list.scss b/packages/styles/src/components/list.scss
index 068143e09f..4619704585 100644
--- a/packages/styles/src/components/list.scss
+++ b/packages/styles/src/components/list.scss
@@ -1,23 +1,23 @@
 @use '../mixins/media';
 @use '../mixins/icons';
-@use '../tokens/components';
 @use '../functions/tokens';
+@use '../tokens/components';
 
 tokens.$default-map: components.$post-list;
 
-$sizing-icon: tokens.get('post-list-checks', 'sizing-icon');
-$padding-icon: tokens.get('post-list-checks', 'spacing-padding-icon');
+$sizing-icon: tokens.get('list-simple-checks', 'sizing-icon');
+$padding-icon: tokens.get('list-simple-checks', 'spacing-padding-icon');
 
 .list-checks {
   list-style: none;
   padding-left: 0;
-  padding-block: tokens.get('post-list-checks', 'spacing-padding-block-outer');
+  padding-block: tokens.get('list-simple-checks', 'spacing-padding-block-outer');
   margin-bottom: 0;
 
   > li {
     position: relative;
     padding-inline-start: calc(
-      #{tokens.get('post-list-checks', 'spacing-gap-inline-text'),
+      #{tokens.get('list-simple-checks', 'spacing-gap-inline-text'),
       } + #{$sizing-icon}
     );
 
@@ -33,7 +33,7 @@ $padding-icon: tokens.get('post-list-checks', 'spacing-padding-icon');
       top: calc($padding-icon);
       width: $sizing-icon;
       height: $sizing-icon;
-      background-color: tokens.get('post-list-checks', 'color-icon-fg');
+      background-color: tokens.get('list-checks', 'color-icon-fg');
       z-index: 2;
     }
 
@@ -42,14 +42,14 @@ $padding-icon: tokens.get('post-list-checks', 'spacing-padding-icon');
       top: 0;
       width: calc(#{$sizing-icon} + (#{$padding-icon} * 2));
       height: calc(#{$sizing-icon} + (#{$padding-icon} * 2));
-      background-color: tokens.get('post-list-checks', 'color-icon-bg');
+      background-color: tokens.get('list-checks', 'color-icon-bg');
       border-radius: 50%;
     }
 
     @include media.max(400px) {
       &::before,
       &::after {
-        margin: tokens.get('post-list-checks', 'spacing-padding-icon');
+        margin: tokens.get('list-simple-checks', 'spacing-padding-icon');
       }
     }
 
@@ -59,6 +59,6 @@ $padding-icon: tokens.get('post-list-checks', 'spacing-padding-icon');
   }
 
   > li:not(:last-child) {
-    margin-block-end: tokens.get('post-list-checks', 'spacing-gap-block-text');
+    margin-block-end: tokens.get('list-simple-checks', 'spacing-gap-block-text');
   }
 }

From 2016e74cf28188c9212da23b185ad3b625fb7293 Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Tue, 1 Oct 2024 15:32:15 +0200
Subject: [PATCH 17/21] fix: adjust space between icon and text

---
 packages/styles/src/components/list.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/styles/src/components/list.scss b/packages/styles/src/components/list.scss
index 4619704585..2a98e10e00 100644
--- a/packages/styles/src/components/list.scss
+++ b/packages/styles/src/components/list.scss
@@ -17,8 +17,8 @@ $padding-icon: tokens.get('list-simple-checks', 'spacing-padding-icon');
   > li {
     position: relative;
     padding-inline-start: calc(
-      #{tokens.get('list-simple-checks', 'spacing-gap-inline-text'),
-      } + #{$sizing-icon}
+      #{tokens.get('list-simple-checks', 'spacing-gap-inline-text')} + #{$sizing-icon} +
+        (#{$padding-icon} * 2)
     );
 
     &::before,

From 1ee084e5a267fc00f06de713bc8d85d66c08ccc6 Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Fri, 4 Oct 2024 08:45:21 +0200
Subject: [PATCH 18/21] feat: add style for high contrast mode

---
 packages/styles/src/components/list.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/styles/src/components/list.scss b/packages/styles/src/components/list.scss
index 2a98e10e00..f591d2ffd5 100644
--- a/packages/styles/src/components/list.scss
+++ b/packages/styles/src/components/list.scss
@@ -1,5 +1,6 @@
 @use '../mixins/media';
 @use '../mixins/icons';
+@use '../mixins/utilities';
 @use '../functions/tokens';
 @use '../tokens/components';
 
@@ -35,6 +36,10 @@ $padding-icon: tokens.get('list-simple-checks', 'spacing-padding-icon');
       height: $sizing-icon;
       background-color: tokens.get('list-checks', 'color-icon-fg');
       z-index: 2;
+
+      @include utilities.high-contrast-mode() {
+        background-color: Canvas;
+      }
     }
 
     &::after {
@@ -44,6 +49,11 @@ $padding-icon: tokens.get('list-simple-checks', 'spacing-padding-icon');
       height: calc(#{$sizing-icon} + (#{$padding-icon} * 2));
       background-color: tokens.get('list-checks', 'color-icon-bg');
       border-radius: 50%;
+
+      @include utilities.high-contrast-mode() {
+        background-color: CanvasText;
+        color: Canvas;
+      }
     }
 
     @include media.max(400px) {

From a40ec706a43d4589dea840253d6afe9dcb3c631d Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Mon, 7 Oct 2024 15:53:56 +0200
Subject: [PATCH 19/21] fix: update token name

---
 packages/styles/src/components/list.scss | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/styles/src/components/list.scss b/packages/styles/src/components/list.scss
index f591d2ffd5..9cbc784c79 100644
--- a/packages/styles/src/components/list.scss
+++ b/packages/styles/src/components/list.scss
@@ -7,18 +7,18 @@
 tokens.$default-map: components.$post-list;
 
 $sizing-icon: tokens.get('list-simple-checks', 'sizing-icon');
-$padding-icon: tokens.get('list-simple-checks', 'spacing-padding-icon');
+$padding-icon: tokens.get('list-simple-checks', 'padding-icon');
 
 .list-checks {
   list-style: none;
   padding-left: 0;
-  padding-block: tokens.get('list-simple-checks', 'spacing-padding-block-outer');
+  padding-block: tokens.get('list-simple-checks', 'padding-block-outer');
   margin-bottom: 0;
 
   > li {
     position: relative;
     padding-inline-start: calc(
-      #{tokens.get('list-simple-checks', 'spacing-gap-inline-text')} + #{$sizing-icon} +
+      #{tokens.get('list-simple-checks', 'gap-inline-text')} + #{$sizing-icon} +
         (#{$padding-icon} * 2)
     );
 
@@ -59,7 +59,8 @@ $padding-icon: tokens.get('list-simple-checks', 'spacing-padding-icon');
     @include media.max(400px) {
       &::before,
       &::after {
-        margin: tokens.get('list-simple-checks', 'spacing-padding-icon');
+        margin-inline: tokens.get('list-simple-checks', 'icon-container-inline');
+        margin-block: tokens.get('list-simple-checks', 'icon-container-block');
       }
     }
 
@@ -69,6 +70,6 @@ $padding-icon: tokens.get('list-simple-checks', 'spacing-padding-icon');
   }
 
   > li:not(:last-child) {
-    margin-block-end: tokens.get('list-simple-checks', 'spacing-gap-block-text');
+    margin-block-end: tokens.get('list-simple-checks', 'gap-block-text');
   }
 }

From e9edf80aeb96ccbe0dde6613b325bfb9068ba38b Mon Sep 17 00:00:00 2001
From: karimim <muhammad.karimi@post.ch>
Date: Fri, 18 Oct 2024 15:35:54 +0200
Subject: [PATCH 20/21] fix: change token set and remove keys

---
 packages/styles/src/components/list.scss | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/styles/src/components/list.scss b/packages/styles/src/components/list.scss
index 9cbc784c79..e2a61d95b7 100644
--- a/packages/styles/src/components/list.scss
+++ b/packages/styles/src/components/list.scss
@@ -4,22 +4,21 @@
 @use '../functions/tokens';
 @use '../tokens/components';
 
-tokens.$default-map: components.$post-list;
+tokens.$default-map: components.$post-list-simple;
 
-$sizing-icon: tokens.get('list-simple-checks', 'sizing-icon');
-$padding-icon: tokens.get('list-simple-checks', 'padding-icon');
+$sizing-icon: tokens.get('list-simple-checks-sizing-icon');
+$padding-icon: tokens.get('list-simple-checks-padding-icon');
 
 .list-checks {
   list-style: none;
   padding-left: 0;
-  padding-block: tokens.get('list-simple-checks', 'padding-block-outer');
+  padding-block: tokens.get('list-simple-checks-padding-block-outer');
   margin-bottom: 0;
 
   > li {
     position: relative;
     padding-inline-start: calc(
-      #{tokens.get('list-simple-checks', 'gap-inline-text')} + #{$sizing-icon} +
-        (#{$padding-icon} * 2)
+      #{tokens.get('list-simple-checks-gap-inline-text')} + #{$sizing-icon} + (#{$padding-icon} * 2)
     );
 
     &::before,
@@ -34,7 +33,7 @@ $padding-icon: tokens.get('list-simple-checks', 'padding-icon');
       top: calc($padding-icon);
       width: $sizing-icon;
       height: $sizing-icon;
-      background-color: tokens.get('list-checks', 'color-icon-fg');
+      background-color: tokens.get('list-checks-color-icon-fg');
       z-index: 2;
 
       @include utilities.high-contrast-mode() {
@@ -47,7 +46,7 @@ $padding-icon: tokens.get('list-simple-checks', 'padding-icon');
       top: 0;
       width: calc(#{$sizing-icon} + (#{$padding-icon} * 2));
       height: calc(#{$sizing-icon} + (#{$padding-icon} * 2));
-      background-color: tokens.get('list-checks', 'color-icon-bg');
+      background-color: tokens.get('list-checks-color-icon-bg');
       border-radius: 50%;
 
       @include utilities.high-contrast-mode() {
@@ -59,8 +58,8 @@ $padding-icon: tokens.get('list-simple-checks', 'padding-icon');
     @include media.max(400px) {
       &::before,
       &::after {
-        margin-inline: tokens.get('list-simple-checks', 'icon-container-inline');
-        margin-block: tokens.get('list-simple-checks', 'icon-container-block');
+        margin-inline: tokens.get('list-simple-checks-icon-container-inline');
+        margin-block: tokens.get('list-simple-checks-icon-container-block');
       }
     }
 
@@ -70,6 +69,6 @@ $padding-icon: tokens.get('list-simple-checks', 'padding-icon');
   }
 
   > li:not(:last-child) {
-    margin-block-end: tokens.get('list-simple-checks', 'gap-block-text');
+    margin-block-end: tokens.get('list-simple-checks-gap-block-text');
   }
 }

From 2a6cff5bd5e835662f4664fb99e07f3370497405 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Wed, 30 Oct 2024 15:08:17 +0100
Subject: [PATCH 21/21] Update docs

---
 .changeset/old-beers-cough.md                 |  2 +-
 .../src/stories/components/list/list.docs.mdx | 14 +++---
 .../stories/components/list/list.stories.ts   | 46 +++++++++----------
 3 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/.changeset/old-beers-cough.md b/.changeset/old-beers-cough.md
index a7c1859105..b0c82da59d 100644
--- a/.changeset/old-beers-cough.md
+++ b/.changeset/old-beers-cough.md
@@ -3,4 +3,4 @@
 '@swisspost/design-system-styles': minor
 ---
 
-Added Check List, which is an unordered list. Each list item is preceded with check icon.
+Added the checks list component, an unordered list where each item is preceded by a check icon.
\ No newline at end of file
diff --git a/packages/documentation/src/stories/components/list/list.docs.mdx b/packages/documentation/src/stories/components/list/list.docs.mdx
index 5721110a3b..d9bd77e986 100644
--- a/packages/documentation/src/stories/components/list/list.docs.mdx
+++ b/packages/documentation/src/stories/components/list/list.docs.mdx
@@ -17,6 +17,13 @@ It is created using a `<ul>` tag and each list item is preceded by a bullet (sma
 
 <Canvas of={ListStories.UnorderedList} sourceState="shown" />
 
+### Checks
+
+By default, unordered lists show a bullet in front of each item.
+Use the `.list-check` class to replace the bullet with check icons.
+
+<Canvas of={ListStories.CheckList} sourceState="shown" />
+
 ### Unstyled
 
 Remove the default list-style and left margin on list items (immediate children only).
@@ -40,13 +47,6 @@ It is created using a `<ol>` tag and list items are preceded by ascending number
 
 <Canvas of={ListStories.OrderedList} sourceState="shown" />
 
-## Check List
-
-An unordered list groups related items in no specific order.
-It is created using a `<ul>` tag with `list-checks` class. Each list item is preceded with check icon.
-
-<Canvas of={ListStories.CheckList} sourceState="shown" />
-
 ## Description List
 
 A description list is a list of terms, with a description of each term.
diff --git a/packages/documentation/src/stories/components/list/list.stories.ts b/packages/documentation/src/stories/components/list/list.stories.ts
index c717a5de30..45fb8ddefe 100644
--- a/packages/documentation/src/stories/components/list/list.stories.ts
+++ b/packages/documentation/src/stories/components/list/list.stories.ts
@@ -33,6 +33,29 @@ export const UnorderedList: Story = {
   `,
 };
 
+export const CheckList: Story = {
+  render: () => html`
+    <ul class="list-checks">
+      <li>This is a checks list.</li>
+      <li>It shows a check icon in front of each item.</li>
+      <li>
+        Nested list:
+        <ul class="list-checks">
+          <li>This is a nested list item.</li>
+          <li>And another one.</li>
+          <li>And one more.</li>
+        </ul>
+      </li>
+      <li>
+        This item belongs to the parent list. Lorem Ipsum is simply dummy text of the printing and
+        typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
+        1500s, when an unknown printer took a galley of type and scrambled it to make a type
+        specimen book
+      </li>
+    </ul>
+  `,
+};
+
 export const UnstyledList: Story = {
   render: () => html`
     <ul class="list-unstyled">
@@ -83,29 +106,6 @@ export const OrderedList: Story = {
   `,
 };
 
-export const CheckList: Story = {
-  render: () => html`
-    <ul class="list-checks">
-      <li>This is a check list item.</li>
-      <li>And another one.</li>
-      <li>
-        Nested list:
-        <ul class="list-checks">
-          <li>This is a check list item.</li>
-          <li>And another one.</li>
-          <li>And one more.</li>
-        </ul>
-      </li>
-      <li>
-        And another long text to check how it look like. Lorem Ipsum is simply dummy text of the
-        printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
-        ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
-        a type specimen book
-      </li>
-    </ul>
-  `,
-};
-
 export const DescriptionList: Story = {
   render: () => html`
     <dl>