Improve icons readability

allure-generator/src/main/javascript/shared/icon/index.mts

@@ -25,11 +25,11 @@ const ICONS = defineIcons({
   },
   lineArrowsChevronRight: {
     viewBox: "0 0 24 24",
-    body: '<path vector-effect="non-scaling-stroke" d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>',
+    body: '<path vector-effect="non-scaling-stroke" d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
   },
   lineArrowsChevronRightStatus: {
     viewBox: "0 0 24 24",
-    body: '<path vector-effect="non-scaling-stroke" d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
+    body: '<path vector-effect="non-scaling-stroke" d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>',
   },
   lineArrowsRefreshCcw1: {
     viewBox: "0 0 24 24",
@@ -100,7 +100,7 @@ const ICONS = defineIcons({
     body: '<path vector-effect="non-scaling-stroke" d="M8 17H16M11.0177 2.764L4.23539 8.03912C3.78202 8.39175 3.55534 8.56806 3.39203 8.78886C3.24737 8.98444 3.1396 9.20478 3.07403 9.43905C3 9.70352 3 9.9907 3 10.5651V17.8C3 18.9201 3 19.4801 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4801 21 18.9201 21 17.8V10.5651C21 9.9907 21 9.70352 20.926 9.43905C20.8604 9.20478 20.7526 8.98444 20.608 8.78886C20.4447 8.56806 20.218 8.39175 19.7646 8.03913L12.9823 2.764C12.631 2.49075 12.4553 2.35412 12.2613 2.3016C12.0902 2.25526 11.9098 2.25526 11.7387 2.3016C11.5447 2.35412 11.369 2.49075 11.0177 2.764Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>',
   },
   lineGeneralInfoCircle: {
-    viewBox: "0 0 17 16",
+    viewBox: "0.33 0 16 16",
     body: '<path vector-effect="non-scaling-stroke" d="M8.33268 10.6663V7.99967M8.33268 5.33301H8.33935M14.9993 7.99967C14.9993 11.6816 12.0146 14.6663 8.33268 14.6663C4.65078 14.6663 1.66602 11.6816 1.66602 7.99967C1.66602 4.31778 4.65078 1.33301 8.33268 1.33301C12.0146 1.33301 14.9993 4.31778 14.9993 7.99967Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>',
   },
   lineGeneralLink1: {
@@ -154,27 +154,27 @@ const ICONS = defineIcons({
   solidAlertCircle: {
     viewBox: "0 0 24 24",
     fill: "currentColor",
-    body: '<path vector-effect="non-scaling-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8V12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12V8ZM12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17H12.01C12.5623 17 13.01 16.5523 13.01 16C13.01 15.4477 12.5623 15 12.01 15H12Z" fill="currentColor" />',
+    body: '<path d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1Z" fill="currentColor" /><path class="status-icon__glyph" fill-rule="evenodd" clip-rule="evenodd" d="M10.51 12.3L10.55 12.49L10.7 12.85L10.94 13.16L11.09 13.29L11.43 13.49L11.8 13.59L12.2 13.59L12.39 13.55L12.57 13.49L12.91 13.29L13.19 13.01L13.3 12.85L13.45 12.49L13.5 12.1L13.49 6.9L13.39 6.53L13.19 6.19L12.91 5.91L12.57 5.71L12.39 5.65L12 5.6L11.8 5.61L11.61 5.65L11.25 5.8L11.09 5.91L10.81 6.19L10.7 6.35L10.55 6.71L10.5 7.1ZM13.71 16.47L13.59 16.04L13.49 15.84L13.22 15.48L13.05 15.33L12.86 15.21L12.45 15.03L12 14.97L11.77 14.99L11.55 15.03L11.14 15.21L10.78 15.48L10.63 15.65L10.41 16.04L10.33 16.25L10.28 16.7L10.29 16.93L10.33 17.15L10.51 17.56L10.78 17.92L10.95 18.07L11.14 18.19L11.55 18.37L12 18.43L12.23 18.41L12.45 18.37L12.86 18.19L13.22 17.92L13.37 17.75L13.59 17.36L13.67 17.15L13.72 16.7Z" />',
   },
   solidCheckCircle: {
     viewBox: "0 0 24 24",
     fill: "currentColor",
-    body: '<path vector-effect="non-scaling-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM17.2071 9.70711C17.5976 9.31658 17.5976 8.68342 17.2071 8.29289C16.8166 7.90237 16.1834 7.90237 15.7929 8.29289L10.5 13.5858L8.20711 11.2929C7.81658 10.9024 7.18342 10.9024 6.79289 11.2929C6.40237 11.6834 6.40237 12.3166 6.79289 12.7071L9.79289 15.7071C10.1834 16.0976 10.8166 16.0976 11.2071 15.7071L17.2071 9.70711Z" fill="currentColor" />',
+    body: '<path d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1Z" fill="currentColor" /><path class="status-icon__glyph" fill-rule="evenodd" clip-rule="evenodd" d="M9.44 16.06L9.75 16.3L9.93 16.39L10.11 16.45L10.5 16.5L10.89 16.45L11.07 16.39L11.25 16.3L11.56 16.06L17.69 9.91L17.8 9.75L17.95 9.39L18 9L17.95 8.61L17.89 8.43L17.69 8.09L17.56 7.94L17.25 7.7L17.07 7.61L16.7 7.51L16.5 7.5L16.11 7.55L15.93 7.61L15.59 7.81L10.5 12.88L8.56 10.94L8.41 10.81L8.07 10.61L7.7 10.51L7.3 10.51L7.11 10.55L6.75 10.7L6.44 10.94L6.2 11.25L6.11 11.43L6.01 11.8L6.01 12.2L6.11 12.57L6.2 12.75L6.44 13.06Z" />',
   },
   solidHelpCircle: {
     viewBox: "0 0 24 24",
     fill: "currentColor",
-    body: '<path vector-effect="non-scaling-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM10.9066 8.27123C11.3138 8.03191 11.7926 7.94443 12.2581 8.02428C12.7236 8.10413 13.1459 8.34615 13.45 8.70749C13.7542 9.06883 13.9207 9.52615 13.92 9.99847L13.92 9.99996C13.92 10.4691 13.5549 10.9582 12.8653 11.4179C12.5509 11.6275 12.2294 11.7889 11.9826 11.8986C11.8606 11.9529 11.7603 11.9929 11.6929 12.0186C11.663 12.03 11.6329 12.041 11.6027 12.0516C11.0794 12.2267 10.7968 12.7926 10.9713 13.3162C11.146 13.8401 11.7123 14.1233 12.2362 13.9486L12.4049 13.8876C12.5015 13.8508 12.6356 13.7971 12.7949 13.7263C13.1105 13.586 13.5391 13.3724 13.9747 13.082C14.7849 12.5419 15.9195 11.5312 15.92 10.0009C15.9213 9.05644 15.5883 8.14201 14.9801 7.41949C14.3717 6.69682 13.5273 6.21277 12.5962 6.05307C11.6652 5.89337 10.7077 6.06833 9.89327 6.54696C9.07886 7.02559 8.46013 7.77701 8.14666 8.66812C7.96339 9.18911 8.23716 9.76002 8.75815 9.9433C9.27914 10.1266 9.85006 9.85279 10.0333 9.33181C10.1901 8.88625 10.4994 8.51054 10.9066 8.27123ZM12 16C11.4477 16 11 16.4477 11 17C11 17.5522 11.4477 18 12 18H12.01C12.5623 18 13.01 17.5522 13.01 17C13.01 16.4477 12.5623 16 12.01 16H12Z" fill="currentColor" />',
+    body: '<path d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1Z" fill="currentColor" /><path class="status-icon__glyph" fill-rule="evenodd" clip-rule="evenodd" d="M11.13 8.49L11.45 8.36L11.87 8.3L12.21 8.32L12.61 8.44L12.98 8.66L13.22 8.9L13.45 9.26L13.59 9.66L13.62 9.99L13.58 10.21L13.47 10.45L13.26 10.71L12.96 10.98L12.44 11.33L11.97 11.58L11.35 11.83L11.13 11.97L10.84 12.28L10.66 12.67L10.62 12.99L10.65 13.28L10.75 13.57L10.98 13.9L11.2 14.08L11.48 14.22L11.87 14.3L12.17 14.28L13.14 13.9L14.14 13.33L14.91 12.73L15.48 12.1L15.95 11.32L16.14 10.7L16.22 9.99L16.14 9.15L15.96 8.52L15.59 7.76L15.2 7.22L14.6 6.63L14.05 6.26L13.28 5.92L12.64 5.76L11.79 5.7L10.94 5.81L10.32 6.01L9.56 6.4L9.04 6.8L8.46 7.44L8.03 8.16L7.82 8.73L7.79 9.02L7.83 9.31L7.91 9.55L8.06 9.79L8.4 10.1L8.68 10.23L8.93 10.29L9.4 10.26L9.76 10.11L10.01 9.91L10.19 9.69L10.42 9.2L10.61 8.91L10.85 8.68ZM11.87 15.71L11.41 15.84L11.2 15.98L11 16.17L10.77 16.58L10.71 16.87L10.71 17.13L10.84 17.59L10.98 17.8L11.17 18L11.58 18.23L11.87 18.29L12.14 18.29L12.6 18.16L12.81 18.02L13.01 17.83L13.24 17.42L13.3 17.13L13.3 16.87L13.17 16.41L13.03 16.2L12.84 16L12.43 15.77L12.14 15.71Z" />',
   },
   solidMinusCircle: {
     viewBox: "0 0 24 24",
     fill: "currentColor",
-    body: '<path vector-effect="non-scaling-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H16C16.5523 13 17 12.5523 17 12C17 11.4477 16.5523 11 16 11H8Z" fill="currentColor" />',
+    body: '<path d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1Z" fill="currentColor" /><path class="status-icon__glyph" fill-rule="evenodd" clip-rule="evenodd" d="M16.5 13.5L16.89 13.45L17.07 13.39L17.25 13.3L17.56 13.06L17.69 12.91L17.89 12.57L17.95 12.39L18 12L17.95 11.61L17.89 11.43L17.8 11.25L17.56 10.94L17.25 10.7L16.89 10.55L16.7 10.51L7.3 10.51L7.11 10.55L6.75 10.7L6.44 10.94L6.31 11.09L6.11 11.43L6.01 11.8L6 12L6.05 12.39L6.2 12.75L6.31 12.91L6.59 13.19L6.75 13.3L7.11 13.45L7.3 13.49Z" />',
   },
   solidXCircle: {
     viewBox: "0 0 24 24",
     fill: "currentColor",
-    body: '<path vector-effect="non-scaling-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM15.7071 8.29289C16.0976 8.68342 16.0976 9.31658 15.7071 9.70711L13.4142 12L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L12 13.4142L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L10.5858 12L8.29289 9.70711C7.90237 9.31658 7.90237 8.68342 8.29289 8.29289C8.68342 7.90237 9.31658 7.90237 9.70711 8.29289L12 10.5858L14.2929 8.29289C14.6834 7.90237 15.3166 7.90237 15.7071 8.29289Z" fill="currentColor" />',
+    body: '<path d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1Z" fill="currentColor" /><path class="status-icon__glyph" fill-rule="evenodd" clip-rule="evenodd" d="M14.68 16.57L14.98 16.75L15.32 16.84L15.68 16.84L16.02 16.75L16.32 16.57L16.57 16.32L16.8 15.85L16.84 15.32L16.75 14.98L16.57 14.68L13.91 12L16.45 9.45L16.67 9.18L16.8 8.85L16.85 8.5L16.75 7.98L16.57 7.68L16.18 7.33L15.68 7.16L15.32 7.16L14.82 7.33L14.55 7.55L12 10.09L9.45 7.55L9.18 7.33L8.68 7.16L8.32 7.16L7.98 7.25L7.68 7.43L7.33 7.82L7.16 8.32L7.16 8.68L7.33 9.17L7.55 9.45L10.09 12L7.55 14.55L7.33 14.83L7.16 15.32L7.16 15.68L7.25 16.02L7.43 16.32L7.82 16.67L8.32 16.84L8.68 16.84L9.18 16.67L9.45 16.45L12 13.91Z" />',
   },
 } as const);
 

allure-generator/src/main/javascript/shared/icon/styles.scss

@@ -37,22 +37,35 @@
   height: gap(5);
 }
 
+// Solid status badges are two-tone: the circle uses `color` (currentColor),
+// the inner glyph is painted with the theme's per-status foreground token so it
+// stays legible on both light and dark backgrounds (a knockout glyph would be
+// transparent and disappear on dark status colors).
+.status-icon__glyph {
+  fill: var(--status-icon-fg, var(--palette-gray-neutral-0));
+}
+
 .status-icon_status_failed {
   color: var(--color-status-failed-bg);
+  --status-icon-fg: var(--color-status-failed-on-bg);
 }
 
 .status-icon_status_broken {
   color: var(--color-status-broken-bg);
+  --status-icon-fg: var(--color-status-broken-on-bg);
 }
 
 .status-icon_status_passed {
   color: var(--color-status-passed-bg);
+  --status-icon-fg: var(--color-status-passed-on-bg);
 }
 
 .status-icon_status_skipped {
   color: var(--color-status-skipped-bg);
+  --status-icon-fg: var(--color-status-skipped-on-bg);
 }
 
 .status-icon_status_unknown {
   color: var(--color-status-unknown-bg);
+  --status-icon-fg: var(--color-status-unknown-on-bg);
 }