From e308c2eca6d0c26d6746594592148fe8db5c343d Mon Sep 17 00:00:00 2001
From: Eva Marco <eva.marco@kaleidos.net>
Date: Wed, 28 Oct 2026 14:27:38 +0100
Subject: [PATCH] :recycle: Use the DS stroke width in the migrated DS icons
 (#12673)

* :recycle: Use the DS stroke width in the migrated DS icons

The DS icons in the areas already moved to the DS set their own
stroke width (1px, 1.33px or 2.25px) to match the legacy icons. They
now keep the DS stroke width, so some icon lines get slightly thinner
or thicker: copy button, context menu, layer row, comments filter,
assets section, share link, dashboard sidebar, team pages, templates,
team switcher and subscription icons.

AI-assisted-by: claude-opus-5-5

* :recycle: Give the share link page rows a class

The page rows of the share link permissions get their own class
instead of a bare li selector. No visual change.

AI-assisted-by: claude-opus-5-5
---
 frontend/src/app/main/ui/components/copy_button.scss   |  2 --
 .../src/app/main/ui/components/editable_select.scss    |  1 -
 .../main/ui/dashboard/organization_team_switch.scss    |  3 ---
 frontend/src/app/main/ui/dashboard/sidebar.scss        |  3 ---
 frontend/src/app/main/ui/dashboard/subscription.scss   |  1 -
 frontend/src/app/main/ui/dashboard/team.scss           |  6 ------
 frontend/src/app/main/ui/dashboard/templates.scss      |  2 --
 frontend/src/app/main/ui/viewer/share_link.cljs        |  2 +-
 frontend/src/app/main/ui/viewer/share_link.scss        | 10 ++++------
 frontend/src/app/main/ui/workspace/comments.scss       |  2 --
 frontend/src/app/main/ui/workspace/context_menu.scss   |  1 -
 frontend/src/app/main/ui/workspace/sidebar/assets.scss |  1 -
 .../src/app/main/ui/workspace/sidebar/layer_item.scss  |  5 -----
 13 files changed, 5 insertions(+), 34 deletions(-)

diff --git a/frontend/src/app/main/ui/components/copy_button.scss b/frontend/src/app/main/ui/components/copy_button.scss
index 8ae7cbf664..cecd60f2f1 100644
--- a/frontend/src/app/main/ui/components/copy_button.scss
+++ b/frontend/src/app/main/ui/components/copy_button.scss
@@ -28,7 +28,6 @@
 
     .icon {
       flex-shrink: 0;
-      stroke-width: 1.33px;
       color: var(--color-foreground-secondary);
     }
   }
@@ -81,7 +80,6 @@
 
     .icon {
       flex-shrink: 0;
-      stroke-width: 1.33px;
       color: var(--color-foreground-primary);
       display: none;
     }
diff --git a/frontend/src/app/main/ui/components/editable_select.scss b/frontend/src/app/main/ui/components/editable_select.scss
index 7257ee14f2..fc5bc19cf8 100644
--- a/frontend/src/app/main/ui/components/editable_select.scss
+++ b/frontend/src/app/main/ui/components/editable_select.scss
@@ -123,7 +123,6 @@
   justify-content: center;
   align-items: center;
   fill: none;
-  stroke-width: 1.33px;
   visibility: hidden;
   color: var(--dropdown-element-icon-color);
 }
diff --git a/frontend/src/app/main/ui/dashboard/organization_team_switch.scss b/frontend/src/app/main/ui/dashboard/organization_team_switch.scss
index 3fee83b7a4..bba4da94e7 100644
--- a/frontend/src/app/main/ui/dashboard/organization_team_switch.scss
+++ b/frontend/src/app/main/ui/dashboard/organization_team_switch.scss
@@ -80,7 +80,6 @@
   width: $sz-16;
   color: transparent;
   fill: none;
-  stroke-width: 1px;
   stroke: var(--icon-foreground);
 }
 
@@ -127,7 +126,6 @@
 .chevron-icon svg {
   color: transparent;
   fill: none;
-  stroke-width: 1px;
   stroke: var(--icon-foreground);
 }
 
@@ -416,7 +414,6 @@
   width: $sz-16;
   color: transparent;
   fill: none;
-  stroke-width: 1px;
   stroke: var(--sidebar-action-icon-color);
 }
 
diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss
index 424f56427b..21a5c112bf 100644
--- a/frontend/src/app/main/ui/dashboard/sidebar.scss
+++ b/frontend/src/app/main/ui/dashboard/sidebar.scss
@@ -147,7 +147,6 @@
 // side keeps the drawing and the text where they were.
 .pin-icon {
   flex-shrink: 0;
-  stroke-width: 1.33px;
   color: var(--color-foreground-secondary);
   margin: 0 px2rem(10);
 }
@@ -213,7 +212,6 @@
 
 .search-icon {
   flex-shrink: 0;
-  stroke-width: 1px;
 }
 
 .clear-search-btn:hover {
@@ -374,6 +372,5 @@
 }
 
 .exit-icon {
-  stroke-width: 1px;
   color: var(--color-foreground-secondary);
 }
diff --git a/frontend/src/app/main/ui/dashboard/subscription.scss b/frontend/src/app/main/ui/dashboard/subscription.scss
index 6cfe4c2e9a..e90a800019 100644
--- a/frontend/src/app/main/ui/dashboard/subscription.scss
+++ b/frontend/src/app/main/ui/dashboard/subscription.scss
@@ -167,7 +167,6 @@
 
 .subscription-icon {
   stroke: var(--color-foreground-secondary);
-  stroke-width: 2.25px;
 }
 
 .menu-item {
diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss
index b51bd9d071..2720ab6d58 100644
--- a/frontend/src/app/main/ui/dashboard/team.scss
+++ b/frontend/src/app/main/ui/dashboard/team.scss
@@ -78,7 +78,6 @@
   align-items: center;
   block-size: $sz-16;
   inline-size: $sz-16;
-  stroke-width: $b-1;
   margin: 0 auto;
   color: var(--color-foreground-secondary);
 }
@@ -125,7 +124,6 @@
 }
 
 .image-icon {
-  stroke-width: $b-1;
   color: var(--color-foreground-primary);
 }
 
@@ -571,7 +569,6 @@
   align-items: center;
   block-size: $sz-16;
   inline-size: $sz-16;
-  stroke-width: $b-1;
   color: var(--color-accent-success);
 }
 
@@ -581,7 +578,6 @@
   align-items: center;
   block-size: $sz-16;
   inline-size: $sz-16;
-  stroke-width: $b-1;
   color: var(--color-accent-warning);
 }
 
@@ -641,7 +637,6 @@
   align-items: center;
   block-size: $sz-16;
   inline-size: $sz-16;
-  stroke-width: $b-1;
   color: var(--color-foreground-secondary);
 }
 
@@ -976,7 +971,6 @@
   align-items: center;
   block-size: $sz-16;
   inline-size: $sz-16;
-  stroke-width: $b-1;
   color: var(--stroke-color);
 }
 
diff --git a/frontend/src/app/main/ui/dashboard/templates.scss b/frontend/src/app/main/ui/dashboard/templates.scss
index 1be61d4465..b9ae6c92f2 100644
--- a/frontend/src/app/main/ui/dashboard/templates.scss
+++ b/frontend/src/app/main/ui/dashboard/templates.scss
@@ -105,7 +105,6 @@
   align-items: center;
   height: $sz-16;
   width: $sz-16;
-  stroke-width: $b-1;
   color: var(--color-foreground-secondary);
 }
 
@@ -241,7 +240,6 @@
   align-items: center;
   height: $sz-16;
   width: $sz-16;
-  stroke-width: $b-1;
   color: var(--color-foreground-secondary);
 }
 
diff --git a/frontend/src/app/main/ui/viewer/share_link.cljs b/frontend/src/app/main/ui/viewer/share_link.cljs
index 32e9117908..6d43e1c60b 100644
--- a/frontend/src/app/main/ui/viewer/share_link.cljs
+++ b/frontend/src/app/main/ui/viewer/share_link.cljs
@@ -283,7 +283,7 @@
 
                     [:ul {:class (stl/css :pages-selection)}
                      (for [{:keys [id name]} pages]
-                       [:li {:class (stl/css :checkbox-wrapper)
+                       [:li {:class (stl/css :checkbox-wrapper :page-row)
                              :key (dm/str id)}
                         [:label {:for (dm/str "page-" id)}
                          [:span {:class (stl/css-case :global/checked (contains? selected id))}
diff --git a/frontend/src/app/main/ui/viewer/share_link.scss b/frontend/src/app/main/ui/viewer/share_link.scss
index 336ad5ede3..7cb4e94245 100644
--- a/frontend/src/app/main/ui/viewer/share_link.scss
+++ b/frontend/src/app/main/ui/viewer/share_link.scss
@@ -136,7 +136,6 @@
 
   .arrow-icon {
     flex-shrink: 0;
-    stroke-width: 1px;
     color: var(--color-foreground-secondary);
   }
 
@@ -187,13 +186,12 @@
 
 .pages-selection {
   margin: 0;
+}
 
-  // The page rows have no class of their own.
-  li {
-    border-block-end: $b-1 solid var(--color-background-quaternary);
-  }
+.page-row {
+  border-block-end: $b-1 solid var(--color-background-quaternary);
 
-  li:last-child {
+  &:last-child {
     border-block-end: none;
   }
 }
diff --git a/frontend/src/app/main/ui/workspace/comments.scss b/frontend/src/app/main/ui/workspace/comments.scss
index 9e7471e394..ea18d51a42 100644
--- a/frontend/src/app/main/ui/workspace/comments.scss
+++ b/frontend/src/app/main/ui/workspace/comments.scss
@@ -68,7 +68,6 @@
 
   .arrow-svg {
     flex-shrink: 0;
-    stroke-width: 1.33px;
     color: var(--color-foreground-secondary);
   }
 }
@@ -105,7 +104,6 @@
       inline-size: $sz-16;
       block-size: $sz-16;
       stroke: currentcolor;
-      stroke-width: 1.33px;
       color: transparent;
     }
   }
diff --git a/frontend/src/app/main/ui/workspace/context_menu.scss b/frontend/src/app/main/ui/workspace/context_menu.scss
index 3061e59a4b..e46fae5ace 100644
--- a/frontend/src/app/main/ui/workspace/context_menu.scss
+++ b/frontend/src/app/main/ui/workspace/context_menu.scss
@@ -127,7 +127,6 @@
   align-items: center;
   inline-size: $sz-16;
   color: var(--color-foreground-primary);
-  stroke-width: 1.33px;
 }
 
 .separator {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.scss b/frontend/src/app/main/ui/workspace/sidebar/assets.scss
index afccd3404d..97fb0733ca 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets.scss
@@ -41,7 +41,6 @@
 
   .section-icon {
     flex-shrink: 0;
-    stroke-width: 1px;
     color: var(--color-foreground-secondary);
   }
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
index d7cbad6289..18a1395d52 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
@@ -211,8 +211,6 @@
 }
 
 .toggle-content-icon {
-  // Same stroke weight as the old 12px icons.
-  stroke-width: 1.33px;
   color: var(--color-foreground-secondary);
 
   .layer-row.hidden & {
@@ -284,9 +282,6 @@
   // The DS icon box is 16px and the button leaves 12px: keep the box
   // whole, centered, instead of letting it shrink and cut the icon.
   flex-shrink: 0;
-
-  // Same stroke weight as the old 12px icons.
-  stroke-width: 1.33px;
   color: var(--color-foreground-secondary);
 
   .layer-row.hidden & {