npm - @transferwise/components - Versions diffs - 0.0.0-experimental-68931a1 → 0.0.0-experimental-02ec4e3 - Mend

@transferwise/components 0.0.0-experimental-68931a1 → 0.0.0-experimental-02ec4e3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1946) hide show

package/src/styles/less/sequences.css CHANGED Viewed

@@ -4,9 +4,7 @@
   margin-inline-start: 25px;
   margin-block-start: 0;
   margin-block-end: 0;
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  border-color: rgba(0,0,0,0.10196);
+  font-size: var(--wds-font-size-body);
   border-color: var(--color-border-neutral);
 }
 .sequence > li {
@@ -83,24 +81,20 @@
 @media (min-width: 840px) {
   .sequence {
     padding-inline-end: 24px;
-    font-size: 1rem;
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
   }
 }
 .sequence > li {
   display: block;
   line-height: 24px;
   position: relative;
-  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
 .sequence > li > a {
   display: block;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-  color: #0097c7;
+  font-weight: var(--wds-font-weight-body-regular);
   color: var(--color-content-accent);
   outline-offset: -1px;
 }
@@ -108,11 +102,9 @@
 .sequence > li > a:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #0084b3;
   color: var(--color-content-accent-hover);
 }
 .sequence > li > a:active {
-  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 .sequence > li p {
@@ -131,6 +123,10 @@
 .sequence > li .h2,
 .sequence > li .h3,
 .sequence > li .h4,
+.sequence > li .wds-text-title-screen,
+.sequence > li .wds-text-title-section,
+.sequence > li .wds-text-title-subsection,
+.sequence > li .wds-text-title-body,
 .sequence > li .btn-toolbar {
   margin-block-end: 16px;
 }
@@ -156,7 +152,6 @@
   border-color: inherit;
   outline: 0;
   border-width: 0;
-  background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   background-size: 200% 200%;
   background-position: 0 0%;
@@ -167,47 +162,38 @@
 .sequence > .active > a {
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #37517e;
   color: var(--color-content-primary);
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
 }
 .sequence > .active > a:hover,
 .sequence > .active > a:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .sequence > .active > a:active {
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .sequence > .active::before {
-  border-color: #0097c7;
   border-color: var(--color-content-accent);
 }
 .sequence > .active::after,
 .sequence > .active ~ li::after {
-  background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   background-image: none;
 }
 .sequence > .active ~ li::before {
-  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
 .sequence a {
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
 }
 .sequence-top > li:first-child::after {
   inset-block-start: 0;
 }
 .sequence-inverse > li {
-  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
 .sequence-inverse > li > a {
@@ -221,8 +207,8 @@
 }
 .sequence-inverse > .active .small,
 .sequence-inverse > .active .body-2,
-.sequence-inverse > .active .np-text-body-default {
-  color: #5d7079;
+.sequence-inverse > .active .np-text-body-default,
+.sequence-inverse > .active .wds-text-body-default {
   color: var(--color-content-secondary);
 }
 .sequence-inverse > .active::after,
@@ -234,21 +220,16 @@
   border-color: #37517e;
 }
 .sequence-info > li {
-  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .sequence-info > li::after {
-  background-image: linear-gradient(#00a2dd 0, #00a2dd 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-accent) 0, var(--color-interactive-accent) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
 }
 .sequence-info.sequence-inverse > li::after {
-  background-image: linear-gradient(#00a2dd 0, #00a2dd 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-accent) 0, var(--color-interactive-accent) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
 }
 .sequence-info > .active::before {
-  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
-  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
 }
 @keyframes sequence-pip-info {
@@ -256,7 +237,6 @@
     border-color: rgba(255,255,255,0.10196);
   }
   to {
-    border-color: #00a2dd;
     border-color: var(--color-interactive-accent);
   }
 }
@@ -264,7 +244,6 @@
   border-color: #37517e;
 }
 .sequence-primary > li::after {
-  background-image: linear-gradient(#37517e 0, #37517e 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
   background-image: linear-gradient(#37517e 0, #37517e 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
 }
 .sequence-primary.sequence-inverse > li::after {
@@ -283,21 +262,16 @@
   }
 }
 .sequence-success > li {
-  border-color: #2ead4b;
   border-color: var(--color-interactive-positive);
 }
 .sequence-success > li::after {
-  background-image: linear-gradient(#2ead4b 0, #2ead4b 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-positive) 0, var(--color-interactive-positive) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
 }
 .sequence-success.sequence-inverse > li::after {
-  background-image: linear-gradient(#2ead4b 0, #2ead4b 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-positive) 0, var(--color-interactive-positive) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
 }
 .sequence-success > .active::before {
-  border-color: #2ead4b;
   border-color: var(--color-interactive-positive);
-  background-color: #2ead4b;
   background-color: var(--color-interactive-positive);
 }
 @keyframes sequence-pip-success {
@@ -305,26 +279,20 @@
     border-color: rgba(255,255,255,0.10196);
   }
   to {
-    border-color: #2ead4b;
     border-color: var(--color-interactive-positive);
   }
 }
 .sequence-warning > li {
-  border-color: #df8700;
   border-color: var(--color-interactive-warning);
 }
 .sequence-warning > li::after {
-  background-image: linear-gradient(#df8700 0, #df8700 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-warning) 0, var(--color-interactive-warning) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
 }
 .sequence-warning.sequence-inverse > li::after {
-  background-image: linear-gradient(#df8700 0, #df8700 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-warning) 0, var(--color-interactive-warning) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
 }
 .sequence-warning > .active::before {
-  border-color: #df8700;
   border-color: var(--color-interactive-warning);
-  background-color: #df8700;
   background-color: var(--color-interactive-warning);
 }
 @keyframes sequence-pip-warning {
@@ -332,26 +300,20 @@
     border-color: rgba(255,255,255,0.10196);
   }
   to {
-    border-color: #df8700;
     border-color: var(--color-interactive-warning);
   }
 }
 .sequence-danger > li {
-  border-color: #e74848;
   border-color: var(--color-interactive-negative);
 }
 .sequence-danger > li::after {
-  background-image: linear-gradient(#e74848 0, #e74848 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-negative) 0, var(--color-interactive-negative) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
 }
 .sequence-danger.sequence-inverse > li::after {
-  background-image: linear-gradient(#e74848 0, #e74848 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-negative) 0, var(--color-interactive-negative) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
 }
 .sequence-danger > .active::before {
-  border-color: #e74848;
   border-color: var(--color-interactive-negative);
-  background-color: #e74848;
   background-color: var(--color-interactive-negative);
 }
 @keyframes sequence-pip-danger {
@@ -359,20 +321,17 @@
     border-color: rgba(255,255,255,0.10196);
   }
   to {
-    border-color: #e74848;
     border-color: var(--color-interactive-negative);
   }
 }
 .sequence-hollow > li::before {
   border-width: 2px;
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .sequence-hollow > .active::before {
   border-width: 4px;
 }
 .sequence-hollow > .active ~ li::before {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .sequence-hollow.sequence-inverse > li::before {
@@ -382,7 +341,6 @@
   position: absolute;
   display: block;
   margin-inline-start: -35px;
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-radius: 50%;
   inline-size: 24px;
@@ -393,15 +351,12 @@
   text-decoration: none !important;
   border-width: 1px;
   border-style: solid;
-  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
   inset-block-start: 4px;
-  font-size: 0.75rem;
   font-size: var(--font-size-12);
 }
 .sequence-icon .icon {
-  font-size: 1rem;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   line-height: 23px;
 }
 .sequence-inverse .sequence-icon {
@@ -409,16 +364,12 @@
   border-color: #ffffff;
 }
 .sequence a .sequence-icon {
-  color: #0097c7;
   color: var(--color-content-accent);
-  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .sequence a:hover .sequence-icon,
 .sequence a:focus .sequence-icon {
-  color: #0084b3;
   color: var(--color-content-accent-hover);
-  border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
 }
 .sequence-table {
@@ -433,9 +384,7 @@
 .sequence-table > li > .sequence-table-td,
 .sequence-table > li > .sequence-table-th {
   display: table-cell;
-  padding-block: 4px;
   padding-block: var(--size-4);
-  padding-inline: 12px;
   padding-inline: var(--size-12);
   padding-inline-start: 0;
 }
@@ -444,7 +393,6 @@
   padding-inline-end: 0;
 }
 .sequence-table > li > .sequence-table-th {
-  color: #37517e;
   color: var(--color-content-primary);
   white-space: nowrap;
 }
@@ -492,7 +440,6 @@
 }
 .sequence-inverse > li > .sequence-table-th,
 .sequence-inverse > li > .sequence-table-td {
-  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .sequence-icon-md {
@@ -500,16 +447,14 @@
   block-size: 32px;
   line-height: 30px;
   margin-block-start: -6px;
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 .sequence-icon-lg {
   inline-size: 40px;
   block-size: 40px;
   line-height: 38px;
   margin-block-start: -6px;
-  font-size: 1rem;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
 }
 .sequence-icon-lg .icon {
   font-size: 22px;

package/src/styles/less/sequences.less CHANGED Viewed

@@ -33,13 +33,13 @@
   margin-top: 0;
   margin-bottom: 0;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   border-color: var(--color-border-neutral);
   @media (min-width: @screen-md-min) {
     .padding(right, @sequence-spacing-horizontal);
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
   }
   > li {
@@ -51,7 +51,7 @@
     > a {
       display: block;
       text-decoration: none;
-      font-weight: var(--font-weight-regular);
+      font-weight: var(--wds-font-weight-body-regular);
       color: var(--color-content-accent);
       outline-offset: -1px;
@@ -85,6 +85,10 @@
     .h2,
     .h3,
     .h4,
+    .wds-text-title-screen,
+    .wds-text-title-section,
+    .wds-text-title-subsection,
+    .wds-text-title-body,
     .btn-toolbar {
       margin-bottom: 16px;
     }
@@ -126,7 +130,7 @@
     > a {
       text-decoration: none;
       color: var(--color-content-primary);
-      font-weight: var(--font-weight-semi-bold);
+      font-weight: var(--wds-font-weight-title-body);
       &:hover,
       &:focus {
@@ -156,7 +160,7 @@
   a {
     text-decoration: none;
-    font-weight: var(--font-weight-regular);
+    font-weight: var(--wds-font-weight-body-regular);
   }
 }
@@ -186,7 +190,8 @@
     .small,
     .body-2,
-    .np-text-body-default {
+    .np-text-body-default,
+    .wds-text-body-default {
       color: var(--color-content-secondary);
     }
@@ -216,7 +221,7 @@
   > .active {
     &::before {
-      border-width: (@sequence-pip-size / 2);  // TODO sequence-line-width?
+      border-width: (@sequence-pip-size / 2); // TODO sequence-line-width?
     }
     ~ li::before {
@@ -248,7 +253,7 @@
   font-size: var(--font-size-12);
   .icon {
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
     line-height: (@sequence-icon-size - 1px);
   }
@@ -366,7 +371,7 @@
   height: @sequence-icon-size-md;
   line-height: (@sequence-icon-size-md - 2px);
   margin-top: -6px;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 .sequence-icon-lg {
@@ -374,7 +379,7 @@
   height: @sequence-icon-size-lg;
   line-height: (@sequence-icon-size-lg - 2px);
   margin-top: -6px;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   .icon {
     font-size: 22px;

package/src/styles/less/table.css CHANGED Viewed

@@ -1,5 +1,4 @@
 table {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-collapse: separate;
 }
@@ -12,7 +11,6 @@ table th[class*="col-"] {
 caption {
   padding-block-start: 16px;
   padding-block-end: 16px;
-  color: #5d7079;
   color: var(--color-content-secondary);
   text-align: start;
 }
@@ -22,7 +20,6 @@ th {
 .table {
   inline-size: 100%;
   max-inline-size: 100%;
-  margin-block-end: 24px;
   margin-block-end: var(--size-24);
 }
 .table > thead > tr > th,
@@ -31,15 +28,10 @@ th {
 .table > thead > tr > td,
 .table > tbody > tr > td,
 .table > tfoot > tr > td {
-  padding-block: 24px;
   padding-block: var(--size-24);
-  padding-inline: 16px;
   padding-inline: var(--size-16);
-  line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   vertical-align: top;
-  border-block-start: 1px solid rgba(0,0,0,0.10196);
-  border-block-start: 1px solid #0000001a;
   border-block-start: 1px solid var(--color-border-neutral);
   border-block-end: 0;
   transition: border ease 0.15s;
@@ -47,15 +39,10 @@ th {
 .table > .thead > ol > li,
 .table > .tbody > dl > dd,
 .table > .tfoot > ol > li {
-  padding-block: 24px;
   padding-block: var(--size-24);
-  padding-inline: 16px;
   padding-inline: var(--size-16);
-  line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   vertical-align: top;
-  border-block-start: 1px solid rgba(0,0,0,0.10196);
-  border-block-start: 1px solid #0000001a;
   border-block-start: 1px solid var(--color-border-neutral);
   border-block-end: 0;
   transition: border ease 0.15s;
@@ -85,31 +72,24 @@ th {
   border-block-start: 0;
 }
 .table > tbody + tbody {
-  border-block-start: 1px solid rgba(0,0,0,0.10196);
-  border-block-start: 1px solid #0000001a;
   border-block-start: 1px solid var(--color-border-neutral);
 }
 .table .table {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .table > thead,
 .table > tfoot,
 .table > .thead,
 .table > .tfoot {
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  color: #37517e;
+  font-size: var(--wds-font-size-body);
   color: var(--color-content-primary);
 }
 .table > tbody,
 .table > .tbody {
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 .table > tbody > tr > th,
 .table > .tbody > dl > .th {
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .table-condensed > thead > tr > th,
@@ -118,22 +98,18 @@ th {
 .table-condensed > thead > tr > td,
 .table-condensed > tbody > tr > td,
 .table-condensed > tfoot > tr > td {
-  padding: 8px;
   padding: var(--size-8);
 }
 .table-condensed > .thead > ol > li,
 .table-condensed > .tbody > dl > dd {
-  padding: 8px;
   padding: var(--size-8);
 }
 .table-bordered {
-  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-neutral);
   border-radius: 3px;
 }
 .table-bordered thead,
 .table-bordered .thead {
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 @media (max-width: 839.98px) {
@@ -142,12 +118,10 @@ th {
   }
 }
 .table-striped > tbody > tr:nth-of-type(odd) {
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 @media (min-width: 840px) {
   .table-striped > .tbody > dl:nth-of-type(odd) {
-    background-color: rgba(134,167,189,0.10196);
     background-color: var(--color-background-neutral);
   }
 }
@@ -189,7 +163,6 @@ table col[class*="col-"] {
 .table > thead > tr.active > th,
 .table > tbody > tr.active > th,
 .table > tfoot > tr.active > th {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .table-hover > tbody > tr > td.active:hover,
@@ -197,7 +170,6 @@ table col[class*="col-"] {
 .table-hover > tbody > tr.active:hover > td,
 .table-hover > tbody > tr:hover > .active,
 .table-hover > tbody > tr.active:hover > th {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .table > thead > tr > td.success,
@@ -212,7 +184,6 @@ table col[class*="col-"] {
 .table > thead > tr.success > th,
 .table > tbody > tr.success > th,
 .table > tfoot > tr.success > th {
-  background-color: rgba(54,199,151,0.10196);
   background-color: var(--color-background-positive);
 }
 .table-hover > tbody > tr > td.success:hover,
@@ -220,7 +191,6 @@ table col[class*="col-"] {
 .table-hover > tbody > tr.success:hover > td,
 .table-hover > tbody > tr:hover > .success,
 .table-hover > tbody > tr.success:hover > th {
-  background-color: rgba(54,199,151,0.10196);
   background-color: var(--color-background-positive);
 }
 .table > thead > tr > td.info,
@@ -235,7 +205,6 @@ table col[class*="col-"] {
 .table > thead > tr.info > th,
 .table > tbody > tr.info > th,
 .table > tfoot > tr.info > th {
-  background-color: rgba(56,200,255,0.10196);
   background-color: var(--color-background-accent);
 }
 .table-hover > tbody > tr > td.info:hover,
@@ -243,7 +212,6 @@ table col[class*="col-"] {
 .table-hover > tbody > tr.info:hover > td,
 .table-hover > tbody > tr:hover > .info,
 .table-hover > tbody > tr.info:hover > th {
-  background-color: rgba(56,200,255,0.10196);
   background-color: var(--color-background-accent);
 }
 .table > thead > tr > td.warning,
@@ -258,7 +226,6 @@ table col[class*="col-"] {
 .table > thead > tr.warning > th,
 .table > tbody > tr.warning > th,
 .table > tfoot > tr.warning > th {
-  background-color: rgba(255,172,0,0.10196);
   background-color: var(--color-background-warning);
 }
 .table-hover > tbody > tr > td.warning:hover,
@@ -266,7 +233,6 @@ table col[class*="col-"] {
 .table-hover > tbody > tr.warning:hover > td,
 .table-hover > tbody > tr:hover > .warning,
 .table-hover > tbody > tr.warning:hover > th {
-  background-color: rgba(255,172,0,0.10196);
   background-color: var(--color-background-warning);
 }
 .table > thead > tr > td.danger,
@@ -281,7 +247,6 @@ table col[class*="col-"] {
 .table > thead > tr.danger > th,
 .table > tbody > tr.danger > th,
 .table > tfoot > tr.danger > th {
-  background-color: rgba(255,135,135,0.10196);
   background-color: var(--color-background-negative);
 }
 .table-hover > tbody > tr > td.danger:hover,
@@ -289,7 +254,6 @@ table col[class*="col-"] {
 .table-hover > tbody > tr.danger:hover > td,
 .table-hover > tbody > tr:hover > .danger,
 .table-hover > tbody > tr.danger:hover > th {
-  background-color: rgba(255,135,135,0.10196);
   background-color: var(--color-background-negative);
 }
 .table > thead > tr > td.default,
@@ -323,7 +287,6 @@ table col[class*="col-"] {
 @media screen and (max-width: 839.98px) {
   .table-responsive {
     inline-size: 100%;
-    margin-block-end: 24px;
     margin-block-end: var(--size-24);
     overflow-y: hidden;
     -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -349,7 +312,6 @@ table col[class*="col-"] {
     border-block-end: 0;
   }
   .table-responsive.table-bordered {
-    border: 1px solid rgba(134,167,189,0.10196);
     border: 1px solid var(--color-background-neutral);
     border-radius: 3px;
   }
@@ -366,9 +328,7 @@ table col[class*="col-"] {
   }
   .table > .thead > ol > li {
     display: table-cell;
-    font-weight: 700;
-    font-weight: var(--font-weight-bold);
-    color: #37517e;
+    font-weight: var(--wds-font-weight-title-body);
     color: var(--color-content-primary);
   }
   .table > .tbody {
@@ -382,9 +342,7 @@ table col[class*="col-"] {
   }
   .table > .tbody > dl > dd {
     display: table-cell;
-    font-size: 0.875rem;
-    font-size: var(--font-size-14);
-    color: #5d7079;
+    font-size: var(--wds-font-size-body);
     color: var(--color-content-secondary);
   }
   .table > .tfoot {
@@ -396,15 +354,11 @@ table col[class*="col-"] {
     display: none;
   }
   .table > .tbody > dl {
-    border: 1px #c9cbce solid;
     border: 1px var(--color-interactive-secondary) solid;
     border-radius: 3px;
-    margin-block-end: 24px;
     margin-block-end: var(--size-24);
-    padding-block: 24px 0;
     padding-block: var(--size-24) 0;
-    padding-inline: 1.5;
-    padding-inline: var(--line-height-body);
+    padding-inline: var(--wds-line-height-body-large);
   }
   .table > .tbody > dl > dd {
     padding: 0;
@@ -442,7 +396,6 @@ table col[class*="col-"] {
   color: #ffffff;
 }
 .table-calendar > tbody > tr > td > a:not([disabled]):hover {
-  background-color: #0097c7;
   background-color: var(--color-content-accent);
   color: #fff;
 }