@ethlete/components 1.0.0-next.77 → 1.0.0-next.79

package/src/lib/icon/headless/rotate-right-icon.ts

@@ -0,0 +1,16 @@
+import { IconDefinition } from './icon-definition';
+
+export const ROTATE_RIGHT_ICON: IconDefinition = {
+  name: 'et-rotate-right',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M4 9a8 8 0 0 1 14-3m2-3v6h-6m6 6a8 8 0 0 1-14 3m-2 3v-6h6"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  `,
+};

package/src/lib/icon/headless/star-icon.ts

@@ -0,0 +1,14 @@
+import { IconDefinition } from './icon-definition';
+
+// Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.
+export const STAR_ICON: IconDefinition = {
+  name: 'et-star',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+      <path
+        fill="currentColor"
+        d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"
+      />
+    </svg>
+  `,
+};

package/src/lib/icon/headless/strikethrough-icon.ts

@@ -0,0 +1,18 @@
+import { IconDefinition } from './icon-definition';
+
+// Custom icon.
+export const STRIKETHROUGH_ICON: IconDefinition = {
+  name: 'et-strikethrough',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+      <text
+        x="8"
+        y="12"
+        font-size="12"
+        text-decoration="line-through"
+        text-anchor="middle"
+        fill="currentColor"
+      >S</text>
+    </svg>
+  `,
+};

package/src/lib/icon/headless/table-icon.ts

@@ -0,0 +1,15 @@
+import { IconDefinition } from './icon-definition';
+
+// Custom icon.
+export const TABLE_ICON: IconDefinition = {
+  name: 'et-table',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"
+      stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
+      <rect x="2" y="2.5" width="12" height="11" rx="1.5" />
+      <line x1="2" y1="6.2" x2="14" y2="6.2" />
+      <line x1="2" y1="9.9" x2="14" y2="9.9" />
+      <line x1="6.7" y1="2.5" x2="6.7" y2="13.5" />
+    </svg>
+  `,
+};

package/src/lib/icon/headless/thumbtack-icon.ts

@@ -0,0 +1,18 @@
+import { IconDefinition } from './icon-definition';
+
+/** A pushpin - what the table's column menu pins a column with. */
+export const THUMBTACK_ICON: IconDefinition = {
+  name: 'et-thumbtack',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M9 3.5h6M10 3.5v5.5L6.5 14h11L14 9V3.5M12 14v6.5"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  `,
+};

package/src/lib/icon/headless/times-icon.ts

@@ -0,0 +1,14 @@
+import { IconDefinition } from './icon-definition';
+
+// Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.
+export const TIMES_ICON: IconDefinition = {
+  name: 'et-times',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+      <path
+        fill="currentColor"
+        d="M324.5 411.1c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L214.6 256 347.1 123.5c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L192 233.4 59.6 100.9c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L169.4 256 36.9 388.5c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L192 278.6 324.5 411.1z"
+      />
+    </svg>
+  `,
+};

package/src/lib/icon/headless/trash-icon.ts

@@ -0,0 +1,24 @@
+import { IconDefinition } from './icon-definition';
+
+export const TRASH_ICON: IconDefinition = {
+  name: 'et-trash',
+  data: `
+    <svg
+      width="100%"
+      height="100%"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M4 7h16" />
+      <path d="M9 7V4.5A1.5 1.5 0 0 1 10.5 3h3A1.5 1.5 0 0 1 15 4.5V7" />
+      <path d="M6 7l1 13a2 2 0 0 0 2 1.9h6a2 2 0 0 0 2-1.9l1-13" />
+      <path d="M10 11v6" />
+      <path d="M14 11v6" />
+    </svg>
+  `,
+};

package/src/lib/icon/headless/triangle-exclamation-icon.ts

@@ -0,0 +1,14 @@
+import { IconDefinition } from './icon-definition';
+
+// Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.
+export const TRIANGLE_EXCLAMATION_ICON: IconDefinition = {
+  name: 'et-triangle-exclamation',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+      <path
+        fill="currentColor"
+        d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S489.3 480 475.1 480H36.9c-14.3 0-27.6-7.7-34.8-20.2s-7-27.6 .2-40.1l216-368C225.6 39.5 238.7 32 252.9 32h3.1zm0 128c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0-64 0 32 32 0 1 0 64 0z"
+      />
+    </svg>
+  `,
+};

package/src/lib/icon/headless/trophy-icon.ts

@@ -0,0 +1,24 @@
+import { IconDefinition } from './icon-definition';
+
+export const TROPHY_ICON: IconDefinition = {
+  name: 'et-trophy',
+  data: `
+    <svg
+      width="100%"
+      height="100%"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M7 4h10v5a5 5 0 0 1-10 0V4Z" />
+      <path d="M7 5.5H4.5v1.75a3.25 3.25 0 0 0 2.9 3.23" />
+      <path d="M17 5.5h2.5v1.75a3.25 3.25 0 0 1-2.9 3.23" />
+      <path d="M12 14v3.5" />
+      <path d="M8.5 20.5h7l-.75-3h-5.5l-.75 3Z" />
+    </svg>
+  `,
+};

package/src/lib/icon/headless/underline-icon.ts

@@ -0,0 +1,12 @@
+import { IconDefinition } from './icon-definition';
+
+// Custom icon.
+export const UNDERLINE_ICON: IconDefinition = {
+  name: 'et-underline',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
+      <text x="8" y="10.5" font-size="10" font-weight="700" text-anchor="middle" fill="currentColor">U</text>
+      <line x1="4" y1="13.5" x2="12" y2="13.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    </svg>
+  `,
+};

package/src/lib/icon/headless/undo-redo-icons.ts

@@ -0,0 +1,24 @@
+import { IconDefinition } from './icon-definition';
+
+const svg = (path: string) =>
+  `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+      <path
+        d="${path}"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  `;
+
+// U-turn arrows: the arrow head, then the line running into the half-circle it turns around.
+export const UNDO_ICON: IconDefinition = {
+  name: 'et-undo',
+  data: /* @__PURE__ */ svg('M9.5 15 4.5 10l5-5M4.5 10h9a5.5 5.5 0 0 1 0 11h-3'),
+};
+
+export const REDO_ICON: IconDefinition = {
+  name: 'et-redo',
+  data: /* @__PURE__ */ svg('M14.5 15l5-5-5-5M19.5 10h-9a5.5 5.5 0 0 0 0 11h3'),
+};

package/src/lib/icon/headless/upload-icon.ts

@@ -0,0 +1,16 @@
+import { IconDefinition } from './icon-definition';
+
+export const UPLOAD_ICON: IconDefinition = {
+  name: 'et-upload',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M12 16V4m0 0 4 4m-4-4-4 4M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  `,
+};

package/src/lib/loader/brand-loader/brand-loader.component.css

@@ -109,7 +109,7 @@
 
   .et-brand-loader__outline {
     fill: none;
-    stroke: var(--_et-brand-loader-accent);
+    stroke: var(--et-brand-loader-accent, var(--et-theme-color-ink-solid, #00ffa1));
     stroke-width: 1.4;
     stroke-linecap: round;
     stroke-linejoin: round;
@@ -121,6 +121,9 @@
 
   .et-brand-loader__fill {
     fill: var(--_et-brand-loader-accent);
+    stroke: var(--et-theme-color-ink-solid);
+    stroke-width: 0.7;
+    stroke-linejoin: round;
     animation: et-brand-loader-fill-fade var(--_et-brand-loader-duration) ease infinite;
   }
 

package/src/lib/loader/progress-bar/progress-bar.component.css

@@ -172,6 +172,6 @@
   }
 
   .et-progress-bar:where(.et-progress-bar--themed) {
-    --et-progress-bar-indicator-color: var(--et-theme-color-primary-solid, currentColor);
+    --et-progress-bar-indicator-color: var(--et-theme-color-ink-solid);
   }
 }

package/src/lib/loader/spinner/spinner-styles.component.css

@@ -226,6 +226,6 @@
   /* `--et-spinner-color` is declared via `@property`, whose `initial-value` cannot contain `var()`, so the theme
      colour can only be applied by a rule - and only when `color` is set, hence the class gate. */
   .et-spinner:where(.et-spinner--themed) {
-    --et-spinner-color: var(--et-theme-color-primary-solid, currentColor);
+    --et-spinner-color: var(--et-theme-color-ink-solid);
   }
 }

package/src/lib/match/match-card.component.css

@@ -267,7 +267,7 @@
     flex: none;
     inline-size: 6px;
     block-size: 6px;
-    background: var(--et-theme-color-primary-solid, currentColor);
+    background: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
     border-radius: 50%;
     animation: et-match-card-live-pulse 2s ease-in-out infinite;
   }
@@ -395,9 +395,15 @@
   .et-match-card:where([data-winner='home']) .et-match-card-side:where([data-side='home']),
   .et-match-card:where([data-winner='away']) .et-match-card-side:where([data-side='away']) {
     --_et-match-card-side-color: var(--et-surface-color-solid, currentColor);
-    --_et-match-card-side-marker-color: var(--et-theme-color-primary-solid, currentColor);
+    --_et-match-card-side-marker-color: light-dark(
+      var(--et-theme-color-ink-solid),
+      var(--et-theme-color-primary-solid)
+    );
     --_et-match-card-side-marker-display: block;
-    font-weight: 600;
+
+    .et-match-participant-name {
+      font-weight: 600;
+    }
   }
 
   .et-match-card-games {

package/src/lib/match/match-score.component.css

@@ -6,11 +6,14 @@
     flex: none;
     place-items: center end;
     min-inline-size: 1ch;
-    overflow: hidden;
     font-variant-numeric: tabular-nums;
     line-height: 1.2;
   }
 
+  .et-match-score:has(.et-match-score-digit:is([data-state='in'], [data-state='out']), .et-match-score-flash) {
+    overflow: hidden;
+  }
+
   /* Both values occupy the same cell — that is what lets one leave while the other arrives. */
   .et-match-score-digit {
     grid-area: 1 / 1;

package/src/lib/menu/menu-selection-item.component.css

@@ -10,7 +10,7 @@
       flex: none;
       inline-size: var(--et-menu-item-icon-size, 16px);
       block-size: var(--et-menu-item-icon-size, 16px);
-      color: var(--et-theme-color-primary-solid, currentColor);
+      color: var(--et-theme-color-ink-solid, currentColor);
     }
 
     &.et-menu-radio-item .et-menu-item-check::before {

package/src/lib/menu/menu.component.css

@@ -245,6 +245,11 @@
         color 120ms ease,
         opacity 120ms ease;
 
+      &[data-active]:focus-visible {
+        outline: 2px solid var(--et-theme-color-ink-solid);
+        outline-offset: -2px;
+      }
+
       /* the roving focus is applied programmatically on mouse-open too, so :focus-visible (instead
        of [data-active] alone) keeps the highlight from appearing without a hover or keyboard
        interaction; a trigger whose submenu is open stays highlighted the whole time, and an item

package/src/lib/overlay/overlay-container.component.css

@@ -164,4 +164,8 @@
   .et-force-invisible {
     visibility: hidden !important;
   }
+
+  .et-overlay--dialog .et-button:where([data-variant='filled']) {
+    --et-button-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
+  }
 }

package/src/lib/pagination/pagination.component.css

@@ -168,4 +168,8 @@
     white-space: nowrap;
     color: var(--et-surface-color-muted-solid, CanvasText);
   }
+
+  .et-pagination-host .et-pagination-button:where([aria-current='page']) {
+    --et-button-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
+  }
 }

package/src/lib/progress-steps/progress-step.component.css

@@ -47,7 +47,7 @@
     &:is([data-state='complete'], [data-state='success'], [data-state='warning'], [data-state='error']):not(
         :last-child
       )::after {
-      background: var(--et-theme-color-primary-solid, currentColor);
+      background: var(--et-theme-color-ink-solid);
     }
 
     .et-progress-step-marker {
@@ -83,13 +83,13 @@
     }
 
     &[data-state='current'] .et-progress-step-marker {
-      border-color: var(--et-theme-color-primary-solid, currentColor);
+      border-color: var(--et-theme-color-ink-solid);
       color: var(--et-theme-color-ink-solid, currentColor);
     }
 
     &:is([data-state='complete'], [data-state='success'], [data-state='warning'], [data-state='error'])
       .et-progress-step-marker {
-      border-color: var(--et-theme-color-primary-solid, currentColor);
+      border-color: var(--et-theme-color-ink-solid);
       background: var(--et-theme-color-primary-solid, currentColor);
       color: var(--et-theme-color-on-primary-solid, white);
     }
@@ -175,7 +175,7 @@
       @media (hover: hover) {
         &:hover {
           .et-progress-step-marker {
-            border-color: var(--et-theme-color-primary-solid, currentColor);
+            border-color: var(--et-theme-color-ink-solid);
           }
 
           .et-progress-step-label {

package/src/lib/query-error/query-error.component.css

@@ -20,4 +20,8 @@
       gap: 8px;
     }
   }
+
+  .et-query-error-host .et-button:where([data-variant='filled']) {
+    --et-button-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
+  }
 }

package/src/lib/scheduler/scheduler-appointment-styles.component.css

@@ -1,4 +1,12 @@
 @layer components {
+  et-scheduler-badge-color-dot,
+  et-scheduler-badge-title,
+  et-scheduler-badge-time-range,
+  et-scheduler-badge-location,
+  et-scheduler-badge-chain-count {
+    display: contents;
+  }
+
   .et-scheduler-appointment {
     display: flex;
     align-items: center;
@@ -22,7 +30,8 @@
     }
 
     &:focus-visible {
-      outline: 2px solid var(--et-theme-color-primary-solid);
+      outline: 2px solid
+        light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
       outline-offset: 1px;
     }
 
@@ -50,7 +59,7 @@
     overflow: hidden;
     font-weight: 600;
     min-inline-size: 0;
-    flex: 1;
+    flex: 1 1 auto;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -69,14 +78,19 @@
   }
 
   .et-scheduler-appointment-time-range {
-    flex-shrink: 0;
+    overflow: hidden;
+    min-inline-size: 0;
+    flex-shrink: 100;
     font-variant-numeric: tabular-nums;
+    text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   .et-scheduler-appointment-location {
     display: flex;
-    flex-shrink: 0;
+    overflow: hidden;
+    min-inline-size: 0;
+    flex-shrink: 100;
     align-items: center;
     gap: 3px;
     max-inline-size: 40%;
@@ -97,7 +111,9 @@
 
   .et-scheduler-appointment-chain-count {
     display: flex;
-    flex-shrink: 0;
+    overflow: hidden;
+    min-inline-size: 0;
+    flex-shrink: 100;
     align-items: center;
     gap: 2px;
     font-variant-numeric: tabular-nums;

package/src/lib/scheduler/scheduler-month-view.component.css

@@ -58,7 +58,8 @@
     user-select: none;
 
     &:focus-visible {
-      outline: 2px solid var(--et-theme-color-primary-solid);
+      outline: 2px solid
+        light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
       outline-offset: -2px;
     }
 
@@ -136,7 +137,8 @@
 
     &:focus-visible {
       border-radius: 4px;
-      outline: 2px solid var(--et-theme-color-primary-solid);
+      outline: 2px solid
+        light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
       outline-offset: 1px;
     }
   }

package/src/lib/scheduler/scheduler-time-grid-view.component.css

@@ -42,7 +42,10 @@
   }
 
   .et-scheduler-time-grid-body {
+    --_et-scheduler-time-grid-hour-label-line-height: 14px;
+
     overflow-y: auto;
+    padding-block-start: calc(var(--_et-scheduler-time-grid-hour-label-line-height) / 2);
     max-block-size: var(--et-scheduler-time-grid-body-max-height);
   }
 
@@ -129,7 +132,8 @@
   .et-scheduler-time-grid-slot,
   .et-scheduler-time-grid-all-day-cell {
     &:focus-visible {
-      outline: 2px solid var(--et-theme-color-primary-solid);
+      outline: 2px solid
+        light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
       outline-offset: -2px;
     }
   }
@@ -146,6 +150,7 @@
     inline-size: max-content;
     transform: translateY(-50%);
     font-size: 11px;
+    line-height: var(--_et-scheduler-time-grid-hour-label-line-height);
     font-variant-numeric: tabular-nums;
     color: var(--et-surface-color-muted-solid);
   }
@@ -253,7 +258,8 @@
     }
 
     &:focus-visible {
-      outline: 2px solid var(--et-theme-color-primary-solid);
+      outline: 2px solid
+        light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
       outline-offset: 1px;
     }
 

package/src/lib/scrollable/headless/scrollable-navigation.component.css

@@ -18,7 +18,7 @@
     background-color: transparent;
 
     &.et-scrollable-navigation-item--active::after {
-      background-color: var(--et-theme-color-primary, #c6c6c6);
+      background-color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary));
     }
 
     &::after {

package/src/lib/standings/standings-pick.component.css

@@ -156,7 +156,7 @@
   .et-standings-pick-cut-line {
     flex: 1;
     block-size: 1px;
-    background: var(--et-theme-color-primary-solid, currentColor);
+    background: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
     opacity: 0.5;
   }
 

package/src/lib/standings/standings.component.css

@@ -67,7 +67,6 @@
   }
 
   .et-standings-cell:where([data-column='position']) {
-    position: relative;
     inline-size: 1px;
     padding-inline-start: calc(var(--et-standings-cell-padding-inline) + var(--et-standings-zone-bar-width));
     color: var(--et-surface-color-muted-solid, currentColor);
@@ -115,13 +114,14 @@
     background: color-mix(in srgb, var(--et-theme-color-primary-solid, transparent) 7%, transparent);
   }
 
-  .et-standings-row:where([data-zone]) .et-standings-cell:where([data-column='position'])::before {
-    position: absolute;
-    inset-block: 0;
-    inset-inline-start: 0;
-    inline-size: var(--et-standings-zone-bar-width);
-    background: var(--et-theme-color-primary-solid, currentColor);
-    content: '';
+  .et-standings-row:where([data-zone]) .et-standings-cell:where([data-column='position']) {
+    box-shadow: inset var(--et-standings-zone-bar-width) 0 0
+      light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+
+    &:dir(rtl) {
+      box-shadow: inset calc(var(--et-standings-zone-bar-width) * -1) 0 0
+        light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+    }
   }
 
   .et-standings-row:where([data-highlighted]) {
@@ -167,7 +167,7 @@
   }
 
   .et-standings-form-result:where([data-result='tie']) {
-    background: color-mix(in srgb, var(--et-surface-color-solid, gray) 45%, transparent);
+    background: color-mix(in srgb, var(--et-surface-color-solid, gray) 25%, transparent);
   }
 
   .et-standings-form-result:where([data-result='loss']) {
@@ -195,7 +195,7 @@
     flex: none;
     inline-size: 10px;
     block-size: 3px;
-    background: var(--et-theme-color-primary-solid, currentColor);
+    background: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
     border-radius: 2px;
   }
 }

package/src/lib/stat-tile/stat-tile-sparkline.component.css

@@ -43,7 +43,7 @@
   }
 
   .et-stat-tile-sparkline-current {
-    stroke: var(--et-theme-color-primary-solid, currentColor);
+    stroke: var(--et-theme-color-ink-solid, currentColor);
     stroke-width: var(--et-stat-tile-sparkline-current-size);
   }
 }