@danske/sapphire-css 32.2.1 → 33.0.0

package/components/skeleton/skeleton.module.css

@@ -5,7 +5,7 @@
   }
   60%,
   65% {
-    opacity: var(--sapphire-skeleton-opacity-faded);
+    opacity: var(--sapphire-global-opacity-35);
   }
   100% {
     opacity: 1;
@@ -15,10 +15,10 @@
 .sapphire-skeleton {
   width: 100%;
 
-  background-color: var(--sapphire-skeleton-color-background);
+  background-color: var(--sapphire-global-color-sapphire-100);
 
   animation: skeletonPulse infinite cubic-bezier(0.25, 0, 0.25, 1);
-  animation-duration: var(--sapphire-skeleton-time-animation);
+  animation-duration: var(--sapphire-semantic-time-fade-slow);
 }
 
 .sapphire-skeleton--text {
@@ -26,19 +26,17 @@
    * We thus calculate that ratio from 1em to cater for
    * cases where context has other size than 16px.
    */
-  height: calc(var(--sapphire-skeleton-size-text-height-context-ratio) * 1em);
+  height: calc(var(--sapphire-global-size-ratio-height) * 1em);
   /* We're translating on y-axis half of the remaining space from above ratio up to 1
    * Thus in this case pushing bar 1/16 down to leave that space above and below.
    * Ie. center it vertically, but still according to font-size in context.
    */
   transform: translateY(
-    calc(
-      (1 - var(--sapphire-skeleton-size-text-height-context-ratio)) / 2 * 1em
-    )
+    calc((1 - var(--sapphire-global-size-ratio-height)) / 2 * 1em)
   );
   /* For responding to text-align on parent */
   display: inline-block;
-  border-radius: var(--sapphire-skeleton-size-text-radius);
+  border-radius: var(--sapphire-semantic-size-radius-sm);
 }
 
 .sapphire-skeleton--circle {

package/components/spinner/spinner.module.css

@@ -13,25 +13,25 @@
 }
 
 .sapphire-spinner {
-  width: var(--sapphire-spinner-size-m);
-  height: var(--sapphire-spinner-size-m);
+  width: var(--sapphire-global-size-generic-100);
+  height: var(--sapphire-global-size-generic-100);
 
-  animation: rotate var(--sapphire-spinner-time-transition)
+  animation: rotate var(--sapphire-semantic-time-motion-very-slow)
     cubic-bezier(0.25, 0.1, 0.25, 1);
   animation-iteration-count: infinite;
 }
 
 .sapphire-spinner__track {
-  fill: var(--sapphire-spinner-color-default);
+  fill: var(--sapphire-semantic-color-content-default-primary);
 }
 
 .sapphire-spinner__accent {
-  fill: var(--sapphire-spinner-color-accent);
+  fill: var(--sapphire-semantic-color-background-action-primary-default);
 }
 
 .sapphire-spinner--inherit .sapphire-spinner__track {
   fill: currentColor;
-  opacity: var(--sapphire-spinner-opacity-half);
+  opacity: var(--sapphire-semantic-opacity-50);
 }
 
 .sapphire-spinner--inherit .sapphire-spinner__accent {
@@ -42,32 +42,32 @@
  * Sizes
  */
 
-.sapphire-spinner--xxxs {
-  width: var(--sapphire-spinner-size-xxxs);
-  height: var(--sapphire-spinner-size-xxxs);
+.sapphire-spinner--3xs {
+  width: var(--sapphire-global-size-generic-40);
+  height: var(--sapphire-global-size-generic-40);
 }
 
-.sapphire-spinner--xxs {
-  width: var(--sapphire-spinner-size-xxs);
-  height: var(--sapphire-spinner-size-xxs);
+.sapphire-spinner--2xs {
+  width: var(--sapphire-global-size-generic-50);
+  height: var(--sapphire-global-size-generic-50);
 }
 
 .sapphire-spinner--xs {
-  width: var(--sapphire-spinner-size-xs);
-  height: var(--sapphire-spinner-size-xs);
+  width: var(--sapphire-global-size-generic-60);
+  height: var(--sapphire-global-size-generic-60);
 }
 
-.sapphire-spinner--s {
-  width: var(--sapphire-spinner-size-s);
-  height: var(--sapphire-spinner-size-s);
+.sapphire-spinner--sm {
+  width: var(--sapphire-global-size-generic-80);
+  height: var(--sapphire-global-size-generic-80);
 }
 
-.sapphire-spinner--l {
-  width: var(--sapphire-spinner-size-l);
-  height: var(--sapphire-spinner-size-l);
+.sapphire-spinner--lg {
+  width: var(--sapphire-global-size-generic-120);
+  height: var(--sapphire-global-size-generic-120);
 }
 
 .sapphire-spinner--xl {
-  width: var(--sapphire-spinner-size-xl);
-  height: var(--sapphire-spinner-size-xl);
+  width: var(--sapphire-global-size-generic-160);
+  height: var(--sapphire-global-size-generic-160);
 }

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

@@ -4,11 +4,11 @@ declare const styles: {
   readonly "sapphire-spinner__track": string;
   readonly "sapphire-spinner__accent": string;
   readonly "sapphire-spinner--inherit": string;
-  readonly "sapphire-spinner--xxxs": string;
-  readonly "sapphire-spinner--xxs": string;
+  readonly "sapphire-spinner--3xs": string;
+  readonly "sapphire-spinner--2xs": string;
   readonly "sapphire-spinner--xs": string;
-  readonly "sapphire-spinner--s": string;
-  readonly "sapphire-spinner--l": string;
+  readonly "sapphire-spinner--sm": string;
+  readonly "sapphire-spinner--lg": string;
   readonly "sapphire-spinner--xl": string;
 };
 export = styles;

package/components/surface/surface.module.css

@@ -1,7 +1,7 @@
 .sapphire-surface {
-  font-family: var(--sapphire-surface-font-name);
-  background-color: var(--sapphire-surface-color-background-default);
-  color: var(--sapphire-surface-color-content);
+  font-family: var(--sapphire-semantic-font-name-default);
+  background-color: var(--sapphire-semantic-color-background-surface);
+  color: var(--sapphire-semantic-color-content-default-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
@@ -17,7 +17,3 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-.sapphire-surface--secondary {
-  background-color: var(--sapphire-surface-color-background-secondary);
-}

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

@@ -1,6 +1,5 @@
 declare const styles: {
   readonly "sapphire-surface": string;
-  readonly "sapphire-surface--secondary": string;
 };
 export = styles;
 

package/components/switch/switch.module.css

@@ -7,11 +7,11 @@
   align-items: center;
   position: relative;
   max-width: 100%;
-  gap: var(--sapphire-switch-size-spacing-label-l);
+  gap: var(--sapphire-semantic-size-spacing-30);
 }
 
-.sapphire-switch--medium {
-  gap: var(--sapphire-switch-size-spacing-label-m);
+.sapphire-switch--md {
+  gap: var(--sapphire-semantic-size-spacing-20);
 }
 /**
  * hidden html input
@@ -36,12 +36,12 @@
 .sapphire-switch-label {
   display: flex;
   align-items: center;
-  gap: var(--sapphire-switch-size-spacing-label-l);
-  font-family: var(--sapphire-switch-font-label-name);
-  font-weight: var(--sapphire-switch-font-label-weight);
-  font-size: var(--sapphire-switch-size-font-l);
-  line-height: var(--sapphire-switch-size-height-l);
-  color: var(--sapphire-switch-color-label);
+  gap: var(--sapphire-semantic-size-spacing-30);
+  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);
+  line-height: var(--sapphire-semantic-size-height-control-xs);
+  color: var(--sapphire-semantic-color-content-default-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
@@ -58,33 +58,35 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.sapphire-switch--medium .sapphire-switch-label {
-  gap: var(--sapphire-switch-size-spacing-label-m);
-  font-size: var(--sapphire-switch-size-font-m);
-  line-height: var(--sapphire-switch-size-height-m);
+.sapphire-switch--md .sapphire-switch-label {
+  gap: var(--sapphire-semantic-size-spacing-20);
+  font-size: var(--sapphire-semantic-size-font-control-md);
+  line-height: var(--sapphire-semantic-size-height-control-2xs);
 }
 
 /**
  * knob track
  */
 .sapphire-switch-track {
-  background: var(--sapphire-switch-color-background-off-default);
+  background: var(--sapphire-semantic-color-border-control-default);
   box-sizing: border-box;
   position: relative;
-  width: var(--sapphire-switch-size-width-l);
-  transition: background var(--sapphire-switch-time-transition) ease-in-out;
-  height: var(--sapphire-switch-size-height-l);
-  border-radius: calc(var(--sapphire-switch-size-height-l) / 2);
+  width: var(--sapphire-global-size-generic-100);
+  transition: background var(--sapphire-semantic-time-motion-quick) ease-in-out;
+  height: var(--sapphire-semantic-size-height-control-xs);
+  border-radius: calc(var(--sapphire-semantic-size-height-control-xs) / 2);
 }
 .sapphire-switch-input:checked ~ .sapphire-switch-track {
-  background-color: var(--sapphire-switch-color-background-on-default);
+  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-switch-color-background-off-hover);
+  background-color: var(--sapphire-semantic-color-border-control-hover);
 }
 /* hover (checked) */
 .sapphire-switch:not(:active):not(.is-active):not(.js-hover):hover
@@ -93,16 +95,18 @@
 .sapphire-switch:not(:active):not(.is-active).is-hover
   .sapphire-switch-input:checked
   ~ .sapphire-switch-track {
-  background-color: var(--sapphire-switch-color-background-on-hover);
+  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-switch-size-focus-ring-border) solid
-    var(--sapphire-switch-color-focus-ring);
-  outline-offset: var(--sapphire-switch-size-focus-ring-offset);
+  outline: var(--sapphire-semantic-size-focus-ring) solid
+    var(--sapphire-semantic-color-focus-ring);
+  outline-offset: var(--sapphire-semantic-size-focus-ring);
 }
 /* active (checked) */
 .sapphire-switch:active
@@ -111,7 +115,9 @@
 .sapphire-switch.is-active
   .sapphire-switch-input:not(:disabled):checked
   ~ .sapphire-switch-track {
-  background-color: var(--sapphire-switch-color-background-on-active);
+  background-color: var(
+    --sapphire-semantic-color-background-action-primary-active
+  );
 }
 /* active (unchecked) */
 .sapphire-switch:active
@@ -120,7 +126,7 @@
 .sapphire-switch.is-active
   .sapphire-switch-input:not(:disabled)
   ~ .sapphire-switch-track {
-  background-color: var(--sapphire-switch-color-background-off-active);
+  background-color: var(--sapphire-semantic-color-border-control-active);
 }
 /* disabled */
 .sapphire-switch-input:disabled {
@@ -129,7 +135,7 @@
 
 .sapphire-switch-input:disabled ~ .sapphire-switch-track,
 .sapphire-switch-input:disabled ~ .sapphire-switch-label {
-  opacity: var(--sapphire-switch-opacity-disabled);
+  opacity: var(--sapphire-semantic-opacity-disabled);
 }
 
 /**
@@ -142,29 +148,29 @@
 
   /* 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-switch-size-spacing-knob)));
-  margin: var(--sapphire-switch-size-spacing-knob);
+  height: calc(100% - (2 * var(--sapphire-global-size-static-5)));
+  margin: var(--sapphire-global-size-static-5);
 
   aspect-ratio: 1/1;
   border-radius: 50%;
-  background-color: var(--sapphire-switch-color-background-knob);
+  background-color: var(--sapphire-semantic-color-background-control-default);
   background-clip: content-box;
   left: 0;
-  transition: left var(--sapphire-switch-time-transition) ease-in-out;
-  box-shadow: var(--sapphire-switch-shadow-knob);
+  transition: left var(--sapphire-semantic-time-motion-quick) ease-in-out;
+  box-shadow: var(--sapphire-global-shadow-sm);
 }
 .sapphire-switch-input:checked ~ .sapphire-switch-track::after {
-  left: calc(100% - var(--sapphire-switch-size-height-l));
+  left: calc(100% - var(--sapphire-semantic-size-height-control-xs));
 }
 
-.sapphire-switch--medium .sapphire-switch-track {
-  width: var(--sapphire-switch-size-width-m);
-  height: var(--sapphire-switch-size-height-m);
-  border-radius: calc(var(--sapphire-switch-size-height-m) / 2);
+.sapphire-switch--md .sapphire-switch-track {
+  width: var(--sapphire-global-size-generic-80);
+  height: var(--sapphire-semantic-size-height-control-2xs);
+  border-radius: calc(var(--sapphire-semantic-size-height-control-2xs) / 2);
 }
 
-.sapphire-switch--medium
+.sapphire-switch--md
   .sapphire-switch-input:checked
   ~ .sapphire-switch-track::after {
-  left: calc(100% - var(--sapphire-switch-size-height-m));
+  left: calc(100% - var(--sapphire-semantic-size-height-control-2xs));
 }

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

@@ -1,6 +1,6 @@
 declare const styles: {
   readonly "sapphire-switch": string;
-  readonly "sapphire-switch--medium": string;
+  readonly "sapphire-switch--md": string;
   readonly "sapphire-switch-input": string;
   readonly "sapphire-switch-label": string;
   readonly "sapphire-switch-track": string;

package/components/table/table.module.css

@@ -28,7 +28,7 @@
 .sapphire-table__table {
   border-collapse: collapse;
   border-spacing: 0;
-  background-color: var(--sapphire-table-color-background-table);
+  background-color: var(--sapphire-semantic-color-background-surface);
   width: 100%;
 }
 
@@ -47,8 +47,8 @@
 .sapphire-table__head {
   top: 0;
   z-index: 2; /* Setting to two because body rows are positioned relative */
-  line-height: var(--sapphire-table-size-line-height-cell-default);
-  background-color: var(--sapphire-table-color-background-head);
+  line-height: var(--sapphire-semantic-size-line-height-md);
+  background-color: var(--sapphire-semantic-color-background-surface);
 }
 
 .sapphire-table__head--sticky {
@@ -73,20 +73,18 @@
 }
 
 .sapphire-table__headCell {
-  color: var(--sapphire-table-color-content-cell);
+  color: var(--sapphire-semantic-color-content-default-primary);
   box-sizing: border-box;
-  font-size: var(--sapphire-table-size-font-head-default);
-  font-family: var(--sapphire-table-font-name);
-  font-weight: var(--sapphire-table-font-weight-head);
-  line-height: var(--sapphire-table-size-line-height-cell-default);
-  padding: var(--sapphire-table-size-spacing-head-cell-vertical-default)
-    var(--sapphire-table-size-spacing-head-cell-horizontal-default);
+  font-size: var(--sapphire-semantic-size-font-text-md);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  line-height: var(--sapphire-semantic-size-line-height-md);
   vertical-align: top;
 }
 
 .sapphire-table__headCell_container {
-  padding: var(--sapphire-table-size-spacing-head-cell-container-vertical)
-    var(--sapphire-table-size-spacing-head-cell-container-horizontal);
+  padding: var(--sapphire-semantic-size-spacing-20)
+    var(--sapphire-semantic-size-spacing-30);
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
@@ -125,16 +123,16 @@
 .sapphire-table__row.is-focus,
 .sapphire-table__row:not(.js-focus):focus-visible {
   outline: none;
-  border-radius: var(--sapphire-table-size-radius-focus);
-  box-shadow: inset 0px 0px 0px var(--sapphire-table-size-width-border-focus)
-    var(--sapphire-table-color-border-focus);
+  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);
 }
 
 .sapphire-table__headCell.is-focus .sapphire-table__headCell_container,
 .sapphire-table__headCell:not(.js-focus):focus-visible
   .sapphire-table__headCell_container {
   /* According to the designs, for header cells only, focus has a border radius. */
-  border-radius: var(--sapphire-table-size-radius-focus);
+  border-radius: var(--sapphire-semantic-size-radius-sm);
 }
 /* end of focus styles */
 
@@ -144,8 +142,10 @@
     .js-hover
   ):hover
   .sapphire-table__headCell_container {
-  background-color: var(--sapphire-table-color-background-hover);
-  border-radius: var(--sapphire-table-size-radius-hover);
+  background-color: var(
+    --sapphire-semantic-color-background-action-secondary-default
+  );
+  border-radius: var(--sapphire-semantic-size-radius-sm);
 }
 
 .sapphire-table__headCell.sapphire-table__headCell--sortable {
@@ -159,16 +159,16 @@
 
 .sapphire-table__headCell--sorted .sapphire-table-sortedIcon {
   visibility: visible;
-  padding-left: var(--sapphire-table-size-spacing-icon-left-default);
+  padding-left: var(--sapphire-semantic-size-spacing-20);
 }
 
 .sapphire-table__headCell .sapphire-table-sortedIcon,
 .sapphire-table__headCell .sapphire-table-sortableIcon {
-  padding-left: var(--sapphire-table-size-spacing-icon-left-default);
+  padding-left: var(--sapphire-semantic-size-spacing-20);
 }
 .sapphire-table__cell--alignRight .sapphire-table-sortedIcon,
 .sapphire-table__cell--alignRight .sapphire-table-sortableIcon {
-  padding-right: var(--sapphire-table-size-spacing-icon-left-default);
+  padding-right: var(--sapphire-semantic-size-spacing-20);
 }
 
 .sapphire-table__headCell__text,
@@ -184,9 +184,9 @@
 
 .sapphire-table__cell {
   box-sizing: border-box;
-  color: var(--sapphire-table-color-content-cell);
-  font-family: var(--sapphire-table-font-name);
-  font-weight: var(--sapphire-table-font-weight-data);
+  color: var(--sapphire-semantic-color-content-default-primary);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
 }
 
 /* Overflow behaviour */
@@ -199,51 +199,55 @@
 
 .sapphire-table__cell,
 .sapphire-table__selectionCell {
-  font-size: var(--sapphire-table-size-font-data-default);
-  line-height: var(--sapphire-table-size-line-height-cell-default);
-  padding: var(--sapphire-table-size-spacing-cell-vertical-default)
-    var(--sapphire-table-size-spacing-cell-horizontal-default);
+  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-30);
 }
 
 /* Selection cells that are suppose to contain only a checkbox */
 .sapphire-table__selectionCell {
   line-height: 0;
-  padding-left: var(--sapphire-table-size-spacing-cell-horizontal-end);
-  width: var(--sapphire-table-size-width-selection-cell);
+  padding-left: var(--sapphire-semantic-size-spacing-50);
+  width: var(--sapphire-global-size-generic-50);
 }
 
 .sapphire-table__selectionCell:not(:first-child) {
-  padding-left: var(--sapphire-table-size-spacing-cell-horizontal-default);
+  padding-left: var(--sapphire-semantic-size-spacing-30);
 }
 
 .sapphire-table__cell:first-child {
-  padding-left: var(--sapphire-table-size-spacing-cell-horizontal-end);
+  padding-left: var(--sapphire-semantic-size-spacing-50);
 }
 .sapphire-table__cell:last-child {
-  padding-right: var(--sapphire-table-size-spacing-cell-horizontal-end);
+  padding-right: var(--sapphire-semantic-size-spacing-50);
 }
 .sapphire-table__headCell:first-child {
-  padding-left: var(--sapphire-table-size-spacing-head-cell-horizontal-end);
+  padding-left: var(--sapphire-semantic-size-spacing-30);
 }
 .sapphire-table__headCell:last-child {
-  padding-right: var(--sapphire-table-size-spacing-head-cell-horizontal-end);
+  padding-right: var(--sapphire-semantic-size-spacing-30);
 }
 
 .sapphire-table__row {
   position: relative;
-  border-bottom: var(--sapphire-semantic-size-border-s) solid
-    var(--sapphire-table-color-border-separator);
+  border-bottom: var(--sapphire-semantic-size-border-sm) solid
+    var(--sapphire-semantic-color-border-separator-default);
 }
 
 .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-table-color-background-active) !important;
+  background-color: var(
+    --sapphire-semantic-color-background-action-tertiary-ghost-default
+  ) !important;
 }
 
 .sapphire-table__row--selected {
-  background-color: var(--sapphire-table-color-background-selected);
+  background-color: var(
+    --sapphire-semantic-color-background-action-secondary-default
+  );
 }
 
 /**
@@ -256,14 +260,14 @@
 }
 
 .sapphire-table__row-expanded-view {
-  border-bottom: var(--sapphire-semantic-size-border-s) solid
-    var(--sapphire-table-color-border-separator);
+  border-bottom: var(--sapphire-semantic-size-border-sm) solid
+    var(--sapphire-semantic-color-border-separator-default);
 }
 
 .sapphire-table__row-expand-button {
   display: inline-flex; /* for transform to take effect */
-  transition: transform ease-in-out var(--sapphire-table-time-transition-arrow);
-  margin-left: var(--sapphire-table-size-spacing-icon-left-default);
+  transition: transform ease-in-out var(--sapphire-semantic-time-motion-quick);
+  margin-left: var(--sapphire-semantic-size-spacing-20);
 }
 
 .sapphire-table td:has(.sapphire-table__row-expand-button) {
@@ -291,18 +295,22 @@
 .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-table-color-background-hover);
+  background-color: var(
+    --sapphire-semantic-color-background-action-secondary-default
+  );
   cursor: pointer;
 }
 
 .sapphire-table__row--highlighted {
-  background-color: var(--sapphire-table-color-background-hover);
+  background-color: var(
+    --sapphire-semantic-color-background-action-secondary-default
+  );
 }
 .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-table-size-width-highlight) 0px 0px 0px
-    var(--sapphire-table-color-background-highlight);
+  box-shadow: inset var(--sapphire-global-size-generic-5) 0px 0px 0px
+    var(--sapphire-semantic-color-background-informative-primary-default);
 }
 
 /**
@@ -312,9 +320,11 @@ and to avoid the complications of merging the two shadows */ {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--sapphire-table-size-spacing-selection-action-bar-vertical)
-    var(--sapphire-table-size-spacing-selection-action-bar-horizontal);
-  background-color: var(--sapphire-table-color-background-selection-action-bar);
+  padding: var(--sapphire-semantic-size-spacing-30)
+    var(--sapphire-semantic-size-spacing-50);
+  background-color: var(
+    --sapphire-semantic-color-background-action-secondary-default
+  );
 }
 
 /**
@@ -324,6 +334,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);
 }
 
 .sapphire-table__footer--sticky {