From bf2662993261c72330c5c223cd228589b917c2c4 Mon Sep 17 00:00:00 2001
From: nod_ <nod_@598310.no-reply.drupal.org>
Date: Fri, 7 Apr 2023 11:59:15 +0200
Subject: [PATCH] Issue #3332363 by Gauravvvv, mherchel, smustgrave: Refactor
 Claro's menus-and-lists stylesheet

---
 .../claro/css/components/menus-and-lists.css  | 41 ++++++++-------
 .../css/components/menus-and-lists.pcss.css   | 52 +++++++++++--------
 2 files changed, 52 insertions(+), 41 deletions(-)

diff --git a/core/themes/claro/css/components/menus-and-lists.css b/core/themes/claro/css/components/menus-and-lists.css
index 8b4a7434f4d..e04286a739b 100644
--- a/core/themes/claro/css/components/menus-and-lists.css
+++ b/core/themes/claro/css/components/menus-and-lists.css
@@ -4,44 +4,49 @@
  * https://www.drupal.org/node/3084859
  * @preserve
  */
+
 /**
  * Menus and lists.
+ *
+ * These classes are used in claro-toolbar-menu and any list items.
  */
+
+.item-list,
+.menu-item {
+  --item-list-spacing-l: var(--space-l);
+  --item-list-spacing-m: var(--space-m);
+}
+
 .item-list ul {
-  margin: 0.25em 0 0.25em 1.5em; /* LTR */
-  list-style-type: disc;
-  list-style-image: none;
-}
-[dir="rtl"] .item-list ul {
-  margin: 0.25em 1.5em 0.25em 0;
+  margin-block: 0.25rem;
+  margin-inline: var(--item-list-spacing-l) 0;
+  list-style: disc;
 }
+
 .item-list ul li,
 .menu-item {
-  list-style-type: disc;
-  list-style-image: none;
+  list-style: disc;
 }
+
 .menu-item {
   margin: 0;
 }
+
 .item-list ul li.collapsed,
 .menu-item--collapsed {
-  list-style-type: disc;
-  list-style-image: url(../../images/menu-collapsed.png);
+  list-style: disc;
 }
+
 .item-list ul li.expanded,
 .menu-item--expanded {
-  list-style-type: circle;
-  list-style-image: url(../../images/menu-expanded.png);
+  list-style: circle;
 }
+
 ul.links li,
 ul.inline li {
-  padding-right: 1em; /* LTR */
-}
-[dir="rtl"] ul.links li,
-[dir="rtl"] ul.inline li {
-  padding-right: 0;
-  padding-left: 1em;
+  padding-inline-end: var(--item-list-spacing-m);
 }
+
 ul.inline li {
   display: inline;
 }
diff --git a/core/themes/claro/css/components/menus-and-lists.pcss.css b/core/themes/claro/css/components/menus-and-lists.pcss.css
index 43e374571f1..882f89cda06 100644
--- a/core/themes/claro/css/components/menus-and-lists.pcss.css
+++ b/core/themes/claro/css/components/menus-and-lists.pcss.css
@@ -1,41 +1,47 @@
 /**
  * Menus and lists.
+ *
+ * These classes are used in claro-toolbar-menu and any list items.
  */
+
+.item-list,
+.menu-item {
+  --item-list-spacing-l: var(--space-l);
+  --item-list-spacing-m: var(--space-m);
+}
+
 .item-list ul {
-  margin: 0.25em 0 0.25em 1.5em; /* LTR */
-  list-style-type: disc;
-  list-style-image: none;
-}
-[dir="rtl"] .item-list ul {
-  margin: 0.25em 1.5em 0.25em 0;
+  margin-block: 4px;
+  margin-inline: var(--item-list-spacing-l) 0;
+  list-style: disc;
 }
+
 .item-list ul li,
 .menu-item {
-  list-style-type: disc;
-  list-style-image: none;
+  list-style: disc;
 }
+
 .menu-item {
   margin: 0;
 }
+
 .item-list ul li.collapsed,
 .menu-item--collapsed {
-  list-style-type: disc;
-  list-style-image: url(../../images/menu-collapsed.png);
+  list-style: disc;
 }
+
 .item-list ul li.expanded,
 .menu-item--expanded {
-  list-style-type: circle;
-  list-style-image: url(../../images/menu-expanded.png);
+  list-style: circle;
 }
-ul.links li,
-ul.inline li {
-  padding-right: 1em; /* LTR */
-}
-[dir="rtl"] ul.links li,
-[dir="rtl"] ul.inline li {
-  padding-right: 0;
-  padding-left: 1em;
-}
-ul.inline li {
-  display: inline;
+
+ul {
+  &.links li,
+  &.inline li {
+    padding-inline-end: var(--item-list-spacing-m);
+  }
+
+  &.inline li {
+    display: inline;
+  }
 }