@ethlete/components 1.0.0-next.78 → 1.0.0-next.80

package/src/lib/table/table-select-cell.component.css

@@ -42,15 +42,25 @@
   }
 
   .et-table-row.et-table-row--selected .et-table-cell {
-    background: color-mix(in srgb, var(--_et-table-selected-accent) 12%, transparent);
+    background: light-dark(
+      color-mix(in srgb, var(--_et-table-selected-accent) 32%, transparent),
+      color-mix(in srgb, var(--_et-table-selected-accent) 12%, transparent)
+    );
   }
 
   .et-table-row.et-table-row--selected .et-table-cell.et-table-sticky-start,
   .et-table-row.et-table-row--selected .et-table-cell.et-table-sticky-end {
-    background: color-mix(
-      in srgb,
-      var(--_et-table-selected-accent) 12%,
-      var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas))
+    background: light-dark(
+      color-mix(
+        in srgb,
+        var(--_et-table-selected-accent) 32%,
+        var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas))
+      ),
+      color-mix(
+        in srgb,
+        var(--_et-table-selected-accent) 12%,
+        var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas))
+      )
     );
   }
 
@@ -58,32 +68,52 @@
      base table paints on hover. */
   @media (hover: hover) {
     .et-table-row.et-table-row--selected:hover .et-table-cell {
-      background: color-mix(in srgb, var(--_et-table-selected-accent) 18%, transparent);
+      background: light-dark(
+        color-mix(in srgb, var(--_et-table-selected-accent) 38%, transparent),
+        color-mix(in srgb, var(--_et-table-selected-accent) 18%, transparent)
+      );
     }
 
     .et-table-row.et-table-row--selected:hover .et-table-cell.et-table-sticky-start,
     .et-table-row.et-table-row--selected:hover .et-table-cell.et-table-sticky-end {
-      background: color-mix(
-        in srgb,
-        var(--_et-table-selected-accent) 18%,
-        var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas))
+      background: light-dark(
+        color-mix(
+          in srgb,
+          var(--_et-table-selected-accent) 38%,
+          var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas))
+        ),
+        color-mix(
+          in srgb,
+          var(--_et-table-selected-accent) 18%,
+          var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas))
+        )
       );
     }
   }
 
   /* A held selected row escalates within its accent, for the same reason. */
   .et-table-row.et-table-row--selected:where(.et-table-row--interactive, .et-table-row--link):active .et-table-cell {
-    background: color-mix(in srgb, var(--_et-table-selected-accent) 26%, transparent);
+    background: light-dark(
+      color-mix(in srgb, var(--_et-table-selected-accent) 44%, transparent),
+      color-mix(in srgb, var(--_et-table-selected-accent) 26%, transparent)
+    );
   }
 
   .et-table-row.et-table-row--selected:where(.et-table-row--interactive, .et-table-row--link):active
     .et-table-cell.et-table-sticky-start,
   .et-table-row.et-table-row--selected:where(.et-table-row--interactive, .et-table-row--link):active
     .et-table-cell.et-table-sticky-end {
-    background: color-mix(
-      in srgb,
-      var(--_et-table-selected-accent) 26%,
-      var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas))
+    background: light-dark(
+      color-mix(
+        in srgb,
+        var(--_et-table-selected-accent) 44%,
+        var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas))
+      ),
+      color-mix(
+        in srgb,
+        var(--_et-table-selected-accent) 26%,
+        var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas))
+      )
     );
   }
 }

package/src/lib/table/table.component.css

@@ -548,13 +548,18 @@
      The row-link ring and the row/card box itself live in `TableRowLinkStylesComponent` and
      `TableCardRowStylesComponent`, mounted by the table when `[rowLink]` or `[appearance]="'cards'"`
      is set - a table using neither carries none of it. */
-  .et-table-header-label:focus-visible,
   .et-table-expander:focus-visible,
-  .et-table-cell:focus-visible {
-    outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+  .et-table-cell:focus-visible,
+  .et-table-header-label:focus-visible .et-table-header-label-box {
+    outline: 2px solid
+      light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
     outline-offset: -2px;
   }
 
+  .et-table-header-label:focus-visible {
+    outline: none;
+  }
+
   .et-table-header-label {
     border-radius: 4px;
   }
@@ -646,7 +651,7 @@
     inline-size: 1.15em;
     block-size: 1.15em;
     transform: translateY(-0.045em);
-    color: var(--et-theme-color-primary-solid, currentColor);
+    color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
     /* Reversing the sort turns the arrow over in place — the element stays mounted across the flip,
        so a plain transition on `transform` is the whole animation. The glyph is drawn centred in its
        own box (see ARROW_UP_ICON), which is what keeps the ink still while it rotates. */
@@ -799,7 +804,7 @@
     inline-size: 40%;
     block-size: 100%;
     border-radius: 999px;
-    background: var(--et-theme-color-primary-solid, currentColor);
+    background: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
     animation: et-table-busy-sweep 1.1s ease-in-out infinite;
   }
 
@@ -826,4 +831,9 @@
       animation: none;
     }
   }
+
+  .et-table-host et-checkbox:where([aria-checked='true'], [aria-checked='mixed']) .et-checkbox-box {
+    outline: 1px solid var(--et-theme-color-ink-solid);
+    outline-offset: -1px;
+  }
 }

package/src/lib/tabs/tab-bar-styles.component.css

@@ -167,7 +167,7 @@
 
   .et-tab-group__trigger:focus-visible .et-tab-group__trigger-content,
   .et-nav-tab-link:focus-visible .et-nav-tab-link__content {
-    outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+    outline: 2px solid var(--_et-focus-ring-color);
     outline-offset: 2px;
   }
 }

package/src/lib/tabs/tabs/tab-group.component.css

@@ -0,0 +1,111 @@
+@layer components {
+  @property --et-tab-group-gap {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+  }
+
+  @property --et-tab-group-header-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+  }
+
+  @property --et-tab-group-trigger-padding-inline {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  @property --et-tab-group-trigger-padding-block {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-tab-group-underline-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 2px;
+  }
+
+  @property --et-tab-group-underline-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 1px;
+  }
+
+  .et-tab-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--et-tab-group-gap);
+
+    --et-tab-group-trigger-padding-inline: var(--et-tab-padding-inline);
+    --et-tab-group-trigger-padding-block: var(--et-tab-padding-block);
+    --et-tab-group-underline-size: var(--et-tab-underline-size);
+    --et-tab-group-underline-radius: var(--et-tab-underline-radius);
+    --et-tab-group-font-size: var(--et-tab-font-size);
+    --et-tab-bar-underline-size: var(--et-tab-group-underline-size);
+    --et-tab-bar-underline-radius: var(--et-tab-group-underline-radius);
+
+    &[data-orientation='vertical'] {
+      flex-direction: row;
+    }
+
+    &:where([data-variant='primary'][data-size='sm']),
+    &:where([data-variant='primary'][data-size='md']) {
+      --et-tab-group-underline-size: 3px;
+    }
+
+    &:where([data-variant='primary'][data-size='lg']) {
+      --et-tab-group-underline-size: 4px;
+    }
+  }
+
+  .et-tab-group__header-shell {
+    min-inline-size: 0;
+  }
+
+  .et-tab-group__header-scrollable {
+    min-inline-size: 0;
+  }
+
+  .et-tab-group__header {
+    position: relative;
+    gap: var(--et-tab-group-header-gap);
+
+    [data-orientation='vertical'] & {
+      justify-items: start;
+    }
+  }
+
+  .et-tab-group__trigger {
+    padding-inline: var(--et-tab-group-trigger-padding-inline);
+    padding-block: var(--et-tab-group-trigger-padding-block);
+    border: none;
+    background: none;
+    font: inherit;
+    font-size: var(--et-tab-group-font-size);
+
+    .et-tab-group__trigger-content {
+      display: flex;
+      gap: 8px;
+    }
+  }
+
+  .et-tab-group {
+    --et-tab-baseline-opacity: 1;
+  }
+
+  .et-tab-group__body {
+    display: grid;
+  }
+
+  .et-tab-group__panel {
+    grid-area: 1 / 1;
+
+    &[hidden] {
+      display: none;
+    }
+  }
+}

package/src/lib/time-picker/time-picker.component.css

@@ -166,7 +166,8 @@
       }
 
       &:focus-visible:not([data-pointer-focused]) {
-        outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+        outline: 2px solid
+          light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
         outline-offset: 2px;
       }
     }

package/src/lib/timeline/timeline-item.component.css

@@ -72,7 +72,10 @@
       block-size: var(--et-timeline-marker-size);
       border-radius: 50%;
       background: var(--et-surface-background-solid, Canvas);
-      color: var(--et-timeline-marker-color, var(--et-theme-color-primary-solid, currentColor));
+      color: var(
+        --et-timeline-marker-color,
+        light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid))
+      );
       font-size: calc(var(--et-timeline-marker-size) * 0.7);
       line-height: 1;
 
@@ -94,6 +97,7 @@
     .et-timeline-item-content {
       flex: 1;
       min-inline-size: 0;
+      overflow-wrap: anywhere;
       /* The gap lives on the content, not the item: the rail stretches over the item's full height,
          so paying for the gap inside it is what lets the line run unbroken into the next marker. */
       padding-block-end: var(--et-timeline-gap);

package/src/lib/toolbar/toolbar.component.css

@@ -37,4 +37,8 @@
       align-items: stretch;
     }
   }
+
+  .et-toolbar .et-icon-button:where([data-pressed='true']) {
+    box-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
+  }
 }

package/src/lib/tooltip/tooltip.component.css

@@ -61,4 +61,18 @@
   .et-tooltip__content {
     gap: 6px;
   }
+
+  .et-tooltip-panel {
+    --et-overlay-arrow-border: light-dark(
+      var(--et-surface-border-solid, rgb(255 255 255 / 0.1)),
+      color-mix(in srgb, var(--et-surface-color-solid) 24%, var(--et-surface-background-solid))
+    );
+  }
+
+  .et-tooltip {
+    --_et-floating-tip-border: light-dark(
+      var(--et-surface-border-solid, rgb(255 255 255 / 0.1)),
+      color-mix(in srgb, var(--et-surface-color-solid) 24%, var(--et-surface-background-solid))
+    );
+  }
 }