@danske/sapphire-css 39.0.1 → 40.0.0

package/components/spinner/spinner.module.css

@@ -22,16 +22,16 @@
 }
 
 .sapphire-spinner__track {
-  fill: var(--sapphire-semantic-color-background-spinner-primary-default);
+  fill: var(--sapphire-semantic-color-background-spinner-primary);
 }
 
 .sapphire-spinner__accent {
-  fill: var(--sapphire-semantic-color-background-spinner-secondary-default);
+  fill: var(--sapphire-semantic-color-background-spinner-secondary);
 }
 
 .sapphire-spinner--inherit .sapphire-spinner__track {
   fill: currentColor;
-  opacity: var(--sapphire-semantic-opacity-50);
+  opacity: var(--sapphire-semantic-opacity-disabled);
 }
 
 .sapphire-spinner--inherit .sapphire-spinner__accent {

package/components/surface/surface.module.css

@@ -1,7 +1,7 @@
 .sapphire-surface {
   font-family: var(--sapphire-semantic-font-name-default);
-  background-color: var(--sapphire-semantic-color-background-surface);
-  color: var(--sapphire-semantic-color-content-default-primary);
+  background: var(--sapphire-semantic-color-background-surface);
+  color: var(--sapphire-semantic-color-foreground-primary);
 
   /* The below is meant to address a font rendering quirk in OSX where the text
    * looks bolder than intended due to subpixel rendering. This quirk generally

package/components/switch/switch.module.css

@@ -7,11 +7,11 @@
   align-items: center;
   position: relative;
   max-width: 100%;
-  gap: var(--sapphire-semantic-size-spacing-30);
+  gap: var(--sapphire-semantic-size-spacing-sm);
 }
 
 .sapphire-switch--md {
-  gap: var(--sapphire-semantic-size-spacing-20);
+  gap: var(--sapphire-semantic-size-spacing-2xs);
 }
 /**
  * hidden html input
@@ -36,12 +36,12 @@
 .sapphire-switch-label {
   display: flex;
   align-items: center;
-  gap: var(--sapphire-semantic-size-spacing-30);
+  gap: var(--sapphire-semantic-size-spacing-sm);
   font-family: var(--sapphire-semantic-font-name-default);
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
-  font-size: var(--sapphire-semantic-size-font-control-default);
+  font-size: var(--sapphire-semantic-size-font-control-lg);
   line-height: var(--sapphire-semantic-size-height-control-xs);
-  color: var(--sapphire-semantic-color-content-default-primary);
+  color: var(--sapphire-semantic-color-foreground-primary);
 
   /* The below is meant to address a font rendering quirk in OSX where the text
    * looks bolder than intended due to subpixel rendering. This quirk generally
@@ -59,37 +59,60 @@
 }
 
 .sapphire-switch--md .sapphire-switch-label {
-  gap: var(--sapphire-semantic-size-spacing-20);
+  gap: var(--sapphire-semantic-size-spacing-2xs);
   font-size: var(--sapphire-semantic-size-font-control-md);
   line-height: var(--sapphire-semantic-size-height-control-2xs);
 }
 
+/* focus */
+.sapphire-switch:not(.js-focus)
+  .sapphire-switch-input:focus-visible
+  ~ .sapphire-switch-track,
+.sapphire-switch.is-focus .sapphire-switch-track {
+  outline: var(--sapphire-semantic-size-focus-ring) solid
+    var(--sapphire-semantic-color-focus-ring);
+  outline-offset: var(--sapphire-semantic-size-focus-ring);
+}
+
 /**
  * knob track
  */
 .sapphire-switch-track {
-  background: var(--sapphire-semantic-color-border-control-default);
+  background: var(--sapphire-semantic-color-background-switch-default);
   box-sizing: border-box;
   position: relative;
-  width: var(--sapphire-global-size-generic-100);
-  transition: background var(--sapphire-semantic-time-motion-quick) ease-in-out;
+  width: var(--sapphire-global-size-generic-110);
+  transition: background var(--sapphire-semantic-time-motion-quick)
+    var(--sapphire-semantic-transitions-fade);
   height: var(--sapphire-semantic-size-height-control-xs);
   border-radius: calc(var(--sapphire-semantic-size-height-control-xs) / 2);
   /* Prevents the component from shrinking */
   flex-shrink: 0;
 }
-.sapphire-switch-input:checked ~ .sapphire-switch-track {
-  background-color: var(
-    --sapphire-semantic-color-background-action-primary-default
-  );
-}
+
 /* hover (unchecked) */
 .sapphire-switch:not(:active):not(.is-active):not(.js-hover):hover
   .sapphire-switch-input:not(:disabled)
   ~ .sapphire-switch-track,
 .sapphire-switch:not(:active):not(.is-active).is-hover .sapphire-switch-track {
-  background-color: var(--sapphire-semantic-color-border-control-hover);
+  background: var(--sapphire-semantic-color-background-switch-hover);
+}
+
+/* active (unchecked) */
+.sapphire-switch:active
+  .sapphire-switch-input:not(:disabled)
+  ~ .sapphire-switch-track,
+.sapphire-switch.is-active
+  .sapphire-switch-input:not(:disabled)
+  ~ .sapphire-switch-track {
+  background: var(--sapphire-semantic-color-background-switch-active);
+}
+
+/* default (unchecked) */
+.sapphire-switch-input:checked ~ .sapphire-switch-track {
+  background: var(--sapphire-semantic-color-background-action-select-default);
 }
+
 /* hover (checked) */
 .sapphire-switch:not(:active):not(.is-active):not(.js-hover):hover
   .sapphire-switch-input:not(:disabled):checked
@@ -97,19 +120,9 @@
 .sapphire-switch:not(:active):not(.is-active).is-hover
   .sapphire-switch-input:checked
   ~ .sapphire-switch-track {
-  background-color: var(
-    --sapphire-semantic-color-background-action-primary-hover
-  );
-}
-/* focus */
-.sapphire-switch:not(.js-focus)
-  .sapphire-switch-input:focus-visible
-  ~ .sapphire-switch-track,
-.sapphire-switch.is-focus .sapphire-switch-track {
-  outline: var(--sapphire-semantic-size-focus-ring) solid
-    var(--sapphire-semantic-color-focus-ring);
-  outline-offset: var(--sapphire-semantic-size-focus-ring);
+  background: var(--sapphire-semantic-color-background-action-select-hover);
 }
+
 /* active (checked) */
 .sapphire-switch:active
   .sapphire-switch-input:not(:disabled):checked
@@ -117,19 +130,9 @@
 .sapphire-switch.is-active
   .sapphire-switch-input:not(:disabled):checked
   ~ .sapphire-switch-track {
-  background-color: var(
-    --sapphire-semantic-color-background-action-primary-active
-  );
-}
-/* active (unchecked) */
-.sapphire-switch:active
-  .sapphire-switch-input:not(:disabled)
-  ~ .sapphire-switch-track,
-.sapphire-switch.is-active
-  .sapphire-switch-input:not(:disabled)
-  ~ .sapphire-switch-track {
-  background-color: var(--sapphire-semantic-color-border-control-active);
+  background: var(--sapphire-semantic-color-background-action-select-active);
 }
+
 /* disabled */
 .sapphire-switch-input:disabled {
   cursor: not-allowed;
@@ -148,18 +151,18 @@
   position: absolute;
   box-sizing: border-box;
 
-  /* a padding would be simpler and achieve the same UI but we need a shadow
-   * around the edges of the knob */
-  height: calc(100% - (2 * var(--sapphire-global-size-static-5)));
-  margin: var(--sapphire-global-size-static-5);
+  padding: var(--sapphire-global-size-static-5);
 
+  height: 100%;
   aspect-ratio: 1/1;
   border-radius: 50%;
-  background-color: var(--sapphire-semantic-color-background-control-default);
+  background: var(
+    --sapphire-semantic-color-foreground-action-on-select-default
+  );
   background-clip: content-box;
   left: 0;
-  transition: left var(--sapphire-semantic-time-motion-quick) ease-in-out;
-  box-shadow: var(--sapphire-global-shadow-sm);
+  transition: left var(--sapphire-semantic-time-motion-quick)
+    var(--sapphire-semantic-transitions-dynamic);
 }
 .sapphire-switch-input:checked ~ .sapphire-switch-track::after {
   left: calc(100% - var(--sapphire-semantic-size-height-control-xs));

package/components/switch/switch.module.css.d.ts

@@ -3,12 +3,12 @@ declare const styles: {
   readonly "sapphire-switch--md": string;
   readonly "sapphire-switch-input": string;
   readonly "sapphire-switch-label": string;
+  readonly "js-focus": string;
   readonly "sapphire-switch-track": string;
+  readonly "is-focus": string;
   readonly "is-active": string;
   readonly "js-hover": string;
   readonly "is-hover": string;
-  readonly "js-focus": string;
-  readonly "is-focus": string;
 };
 export = styles;
 

package/components/table/table.module.css

@@ -53,7 +53,15 @@
   top: 0;
   z-index: 2; /* Setting to two because body rows are positioned relative */
   line-height: var(--sapphire-semantic-size-line-height-md);
-  background-color: var(--sapphire-semantic-color-background-surface);
+  --sapphire-table-row-bg: var(--sapphire-semantic-color-background-surface);
+}
+
+.sapphire-table__cell,
+.sapphire-table__headCell,
+.sapphire-table__selectionCell {
+  box-sizing: border-box;
+  font-size: var(--sapphire-semantic-size-font-body-md);
+  line-height: var(--sapphire-semantic-size-line-height-md);
 }
 
 .sapphire-table__head--sticky {
@@ -77,31 +85,19 @@
   text-align: end;
 }
 
-/* We added these to accommodate alignment in cells using flex */
-.sapphire-table__cell-wrapper .sapphire-table__cell--alignLeft {
-  justify-content: flex-start;
-}
-
-.sapphire-table__cell-wrapper .sapphire-table__cell--alignCenter {
-  justify-content: center;
-}
-
-.sapphire-table__cell-wrapper .sapphire-table__cell--alignRight {
-  justify-content: flex-end;
-}
-
 .sapphire-table__headCell {
-  color: var(--sapphire-semantic-color-content-default-primary);
+  color: var(--sapphire-semantic-color-foreground-primary);
   box-sizing: border-box;
-  font-size: var(--sapphire-semantic-size-font-text-md);
+  font-size: var(--sapphire-semantic-size-font-body-sm);
   font-family: var(--sapphire-semantic-font-name-default);
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
   line-height: var(--sapphire-semantic-size-line-height-md);
   vertical-align: top;
 }
 
 .sapphire-table__headCell_container {
-  padding: var(--sapphire-semantic-size-spacing-20);
+  padding: var(--sapphire-semantic-size-spacing-xs)
+    var(--sapphire-table-cell-spacing-h);
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
@@ -130,19 +126,31 @@
   z-index: 1;
 }
 
-.sapphire-table__headCell.is-focus .sapphire-table__headCell_container,
+/*
+  focus ring styles applied to an absolute pseudo element to be able to elevate it above
+  the cells with background color.
+  Cells having background color is for sticky columns to look good
+*/
+.sapphire-table__headCell.is-focus .sapphire-table__headCell_container::after,
 .sapphire-table__headCell:not(.js-focus):focus-visible
-  .sapphire-table__headCell_container,
-.sapphire-table__cell.is-focus,
-.sapphire-table__cell:not(.js-focus):focus-visible,
-.sapphire-table__selectionCell.is-focus,
-.sapphire-table__selectionCell:not(.js-focus):focus-visible,
-.sapphire-table__row.is-focus,
-.sapphire-table__row:not(.js-focus):focus-visible {
+  .sapphire-table__headCell_container::after,
+.sapphire-table__cell.is-focus::after,
+.sapphire-table__cell:not(.js-focus):focus-visible::after,
+.sapphire-table__selectionCell.is-focus::after,
+.sapphire-table__selectionCell:not(.js-focus):focus-visible::after,
+.sapphire-table__row.is-focus::after,
+.sapphire-table__row:not(.js-focus):focus-visible::after,
+.sapphire-table__row-expanded-view.is-focus::after,
+.sapphire-table__row-expanded-view:not(.js-focus):focus-visible::after {
+  content: '';
   outline: none;
   border-radius: var(--sapphire-semantic-size-radius-sm);
   box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-focus-ring)
     var(--sapphire-semantic-color-focus-ring);
+
+  position: absolute;
+  inset: 0;
+  z-index: 3;
 }
 
 .sapphire-table__headCell.is-focus .sapphire-table__headCell_container,
@@ -159,9 +167,10 @@
     .js-hover
   ):hover
   .sapphire-table__headCell_container {
-  background-color: var(
-    --sapphire-semantic-color-background-action-secondary-default
+  --sapphire-table-row-bg: var(
+    --sapphire-semantic-color-background-action-tertiary-hover
   );
+  color: var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);
   border-radius: var(--sapphire-semantic-size-radius-sm);
 }
 
@@ -176,16 +185,16 @@
 
 .sapphire-table__headCell--sorted .sapphire-table-sortedIcon {
   visibility: visible;
-  padding-left: var(--sapphire-semantic-size-spacing-20);
+  padding-left: var(--sapphire-semantic-size-spacing-2xs);
 }
 
 .sapphire-table__headCell .sapphire-table-sortedIcon,
 .sapphire-table__headCell .sapphire-table-sortableIcon {
-  padding-left: var(--sapphire-semantic-size-spacing-20);
+  padding-left: var(--sapphire-semantic-size-spacing-2xs);
 }
 .sapphire-table__cell--alignRight .sapphire-table-sortedIcon,
 .sapphire-table__cell--alignRight .sapphire-table-sortableIcon {
-  padding-right: var(--sapphire-semantic-size-spacing-20);
+  padding-right: var(--sapphire-semantic-size-spacing-2xs);
 }
 
 .sapphire-table__headCell__text,
@@ -201,10 +210,13 @@
 
 .sapphire-table__cell {
   box-sizing: border-box;
-  color: var(--sapphire-semantic-color-content-default-primary);
+  color: var(--sapphire-semantic-color-foreground-primary);
   font-family: var(--sapphire-semantic-font-name-default);
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
   overflow-wrap: break-word;
+  align-content: center;
+  padding: var(--sapphire-table-cell-spacing-v)
+    var(--sapphire-table-cell-spacing-h);
 }
 
 .sapphire-table__cell-contents {
@@ -222,123 +234,118 @@
   text-overflow: ellipsis;
 }
 
+/* Cell spacing MD (default) */
+.sapphire-table {
+  --sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-sm);
+  --sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-sm);
+}
+
 /* Cell spacing SM */
-.sapphire-table__table--spacing-sm .sapphire-table__cell,
-.sapphire-table__table--spacing-sm
-  .sapphire-table__selectionCell:not(:first-child) {
-  padding-top: var(--sapphire-semantic-size-spacing-20);
-  padding-bottom: var(--sapphire-semantic-size-spacing-20);
+.sapphire-table__table--spacing-sm {
+  --sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-sm);
+  --sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-xs);
 }
 
 /* Cell spacing LG */
-.sapphire-table__table--spacing-lg .sapphire-table__cell,
-.sapphire-table__table--spacing-lg
-  .sapphire-table__selectionCell:not(:first-child) {
-  padding-top: var(--sapphire-semantic-size-spacing-40);
-  padding-bottom: var(--sapphire-semantic-size-spacing-40);
+.sapphire-table__table--spacing-lg {
+  --sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-md);
+  --sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-md);
 }
 
 /* Cell spacing XL */
-.sapphire-table__table--spacing-xl .sapphire-table__cell,
-.sapphire-table__table--spacing-xl
-  .sapphire-table__selectionCell:not(:first-child) {
-  padding-top: var(--sapphire-global-size-generic-50);
-  padding-bottom: var(--sapphire-global-size-generic-50);
-}
-
-/* Cell spacing MD (default) */
-.sapphire-table__cell,
-.sapphire-table__selectionCell {
-  font-size: var(--sapphire-semantic-size-font-text-lg);
-  line-height: var(--sapphire-semantic-size-line-height-md);
-  padding: var(--sapphire-semantic-size-spacing-30)
-    var(--sapphire-semantic-size-spacing-20);
+.sapphire-table__table--spacing-xl {
+  --sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-lg);
+  --sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-lg);
 }
 
 /* Selection cells that are supposes to contain only a checkbox */
 .sapphire-table__selectionCell {
   line-height: 0;
-  width: var(--sapphire-global-size-generic-50);
+  padding: var(--sapphire-table-cell-spacing-v)
+    var(--sapphire-table-cell-spacing-h);
   box-sizing: content-box;
 }
-
-.sapphire-table__cell-wrapper .sapphire-table__selectionCell {
-  width: unset;
-  min-width: var(--sapphire-global-size-generic-50);
-}
-
-.sapphire-table__cell:first-child,
-.sapphire-table__selectionCell:first-child,
-.sapphire-table__cell-wrapper:first-child > .sapphire-table__cell,
-.sapphire-table__cell-wrapper:first-child > .sapphire-table__selectionCell {
-  padding-left: var(--sapphire-semantic-size-spacing-50);
-}
-.sapphire-table__cell:last-child,
-.sapphire-table__cell-wrapper:last-child > .sapphire-table__cell {
-  padding-right: var(--sapphire-semantic-size-spacing-50);
-}
-.sapphire-table__headCell:first-child,
-.sapphire-table__cell-wrapper:first-child .sapphire-table__headCell {
-  padding-left: var(--sapphire-semantic-size-spacing-40);
+.sapphire-table__head .sapphire-table__selectionCell {
+  padding: var(--sapphire-semantic-size-spacing-2xs)
+    var(--sapphire-table-cell-spacing-h);
 }
 
-.sapphire-table__selectionCell:first-child,
-.sapphire-table__cell-wrapper:first-child > .sapphire-table__selectionCell {
-  padding-right: var(--sapphire-semantic-size-spacing-30);
+td.sapphire-table__selectionCell,
+th.sapphire-table__selectionCell {
+  width: var(--sapphire-global-size-generic-50);
 }
 
-.sapphire-table__headCell:last-child,
-.sapphire-table__cell-wrapper:last-child > .sapphire-table__headCell {
-  padding-right: var(--sapphire-semantic-size-spacing-40);
+/* sticky selection column for non-virtualized table */
+td.sapphire-table__selectionCell:first-child,
+th.sapphire-table__selectionCell:first-child {
+  position: sticky;
+  left: 0;
+  z-index: 2;
 }
 
 .sapphire-table__tfoot .sapphire-table__cell {
-  font-weight: var(--sapphire-semantic-font-weight-default-bold);
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
 }
 
-.sapphire-table__cell-wrapper > .sapphire-table__cell,
-.sapphire-table__cell-wrapper > .sapphire-table__selectionCell {
-  padding-left: var(--sapphire-semantic-size-spacing-20);
-  padding-right: var(--sapphire-semantic-size-spacing-20);
-}
-
-.sapphire-table__head .sapphire-table__selectionCell {
-  padding-top: var(--sapphire-semantic-size-spacing-20);
-  padding-bottom: var(--sapphire-semantic-size-spacing-20);
-}
-
-.sapphire-table__cell-wrapper .sapphire-table__headCell {
-  padding-left: 0;
-  padding-right: 0;
+.sapphire-table__cell:before,
+.sapphire-table__headCell_container:before,
+.sapphire-table__selectionCell::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  /* setting row background on cells for sticky cells to look good. Sticky cells need to have a set
+ * background for the content below them to not be visible through the cell.
+ * Note: using a separate prioritized variable for active background not to need to fight with specificity complications
+ */
+  background-color: var(
+    --sapphire-table-row-bg-active,
+    var(--sapphire-table-row-bg)
+  );
+  z-index: -1;
+  pointer-events: none;
 }
 
-.sapphire-table__cell-wrapper .sapphire-table__cell,
-.sapphire-table__cell-wrapper .sapphire-table__headCell,
-.sapphire-table__cell-wrapper .sapphire-table__selectionCell {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  box-sizing: border-box;
+.sapphire-table__cell,
+.sapphire-table__headCell_container,
+.sapphire-table__selectionCell {
+  /* setting the actual background in a ::before pseudo element,
+     and a solid surface background here below it
+     because the hover/active state colors are semi-transparent (aka alpha colors)
+   */
+  background-color: var(--sapphire-semantic-color-background-surface);
 }
 
 .sapphire-table__row {
+  box-sizing: border-box;
   position: relative;
   border-bottom: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-separator-default);
+    var(--sapphire-semantic-color-border-secondary);
+  /* background is set in a variable to be used in cells. That's because sticky cells need to have a background color.
+    `background: inherit` would be an alternative solution but it's fragile with respect to the dom tree that can
+     change with presence of virtualization wrappers. */
+  --sapphire-table-row-bg: var(
+    --sapphire-table-rowgroup-bg,
+    var(--sapphire-semantic-color-background-surface)
+  );
 }
 
-.sapphire-table__row--active {
-  /* We want active to override, focus, hover or selected. Using css selectors or priority to
-   * to achieve that adds a lot complexity which seems to justify the use of "!important" here.
-   */
-  background-color: var(
-    --sapphire-semantic-color-background-action-tertiary-ghost-default
-  ) !important;
+.sapphire-table--interactive .sapphire-table__row--active {
+  --sapphire-table-row-bg-active: var(
+    --sapphire-semantic-color-background-action-tertiary-active
+  );
+}
+
+.sapphire-table--interactive
+  .sapphire-table__row--selected.sapphire-table__row--active {
+  --sapphire-table-row-bg-active: var(
+    /* using hover color for active here is intentional, and to avoid too many color changes when selecting rows */
+      --sapphire-semantic-color-background-action-select-secondary-hover
+  );
 }
 
 .sapphire-table__row--selected {
-  background-color: var(
-    --sapphire-semantic-color-background-action-secondary-default
+  --sapphire-table-row-bg: var(
+    --sapphire-semantic-color-background-action-select-secondary-default
   );
 }
 
@@ -353,13 +360,13 @@
 
 .sapphire-table__row-expanded-view {
   border-bottom: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-separator-default);
+    var(--sapphire-semantic-color-border-secondary);
 }
 
 .sapphire-table__row-expand-button {
   display: inline-flex; /* for transform to take effect */
-  transition: transform ease-in-out var(--sapphire-semantic-time-motion-quick);
-  margin-left: var(--sapphire-semantic-size-spacing-20);
+  transition: transform var(--sapphire-semantic-transitions-dynamic)
+    var(--sapphire-semantic-time-motion-quick);
 }
 
 .sapphire-table td:has(.sapphire-table__row-expand-button) {
@@ -371,10 +378,14 @@
 }
 
 .sapphire-table--without-last-divider
-  .sapphire-table__row:not(
+  :not([role='presentation'])
+  > .sapphire-table__row:not(
     .is-focus,
     :not(.js-focus):focus-visible
-  ):last-child {
+  ):last-child,
+.sapphire-table--without-last-divider
+  [role='presentation']:last-child
+  > .sapphire-table__row:not(.is-focus, :not(.js-focus):focus-visible) {
   border-bottom-color: transparent;
 }
 
@@ -387,29 +398,47 @@
 .sapphire-table__row--interactive.is-hover,
 .sapphire-table--interactive .sapphire-table__row:not(.js-hover):hover,
 .sapphire-table__row--interactive:not(.js-hover):hover {
-  background-color: var(
-    --sapphire-semantic-color-background-action-secondary-default
+  --sapphire-table-row-bg: var(
+    --sapphire-semantic-color-background-action-tertiary-hover
   );
+  color: var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);
   cursor: pointer;
 }
 
+.sapphire-table--interactive
+  .sapphire-table__row.sapphire-table__row--selected.is-hover,
+.sapphire-table__row--interactive.sapphire-table__row--selected.is-hover,
+.sapphire-table--interactive
+  .sapphire-table__row.sapphire-table__row--selected:not(.js-hover):hover,
+.sapphire-table__row--interactive.sapphire-table__row--selected:not(
+    .js-hover
+  ):hover {
+  --sapphire-table-row-bg: var(
+    --sapphire-semantic-color-background-action-select-secondary-hover
+  );
+}
+
 .sapphire-table__row--highlighted {
-  background-color: var(
-    --sapphire-semantic-color-background-action-secondary-default
+  --sapphire-table-row-bg: var(
+    --sapphire-semantic-color-background-action-highlight
   );
 }
-.sapphire-table__row--highlighted > *:first-child /* setting the highlight style on the first cell,
-since box-shadow is used for separator on rows,
-and to avoid the complications of merging the two shadows */ {
-  box-shadow: inset var(--sapphire-global-size-generic-5) 0px 0px 0px
-    var(--sapphire-semantic-color-background-informative-primary-default);
+.sapphire-table__row--highlighted::after {
+  content: '';
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  height: 100%;
+  width: var(--sapphire-semantic-size-border-md);
+  background: var(--sapphire-semantic-color-border-accent);
+  pointer-events: none;
 }
 
 .sapphire-table__tfoot {
   position: relative;
   z-index: 2;
-  background-color: var(
-    --sapphire-semantic-color-background-action-secondary-default
+  --sapphire-table-rowgroup-bg: var(
+    --sapphire-semantic-color-background-neutral-subtle
   );
 }
 
@@ -420,11 +449,10 @@ and to avoid the complications of merging the two shadows */ {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--sapphire-semantic-size-spacing-30)
-    var(--sapphire-semantic-size-spacing-50);
-  background-color: var(
-    --sapphire-semantic-color-background-action-secondary-default
-  );
+  padding: var(--sapphire-semantic-size-spacing-sm)
+    var(--sapphire-semantic-size-spacing-lg);
+  /* the bg color here is a hack until the design of this changes */
+  background: var(--sapphire-semantic-color-background-neutral-subtle);
   position: sticky;
   top: 0;
   left: 0;
@@ -438,7 +466,7 @@ and to avoid the complications of merging the two shadows */ {
 .sapphire-table__footer {
   position: relative;
   z-index: 2; /* Setting to two because body rows are positioned relative */
-  margin-top: var(--sapphire-semantic-size-spacing-20);
+  margin-top: var(--sapphire-semantic-size-spacing-2xs);
 }
 
 .sapphire-table__footer--sticky {