@charcoal-ui/react 6.0.0-beta.2 → 6.0.0-rc.1

package/dist/layered.css

@@ -29,8 +29,8 @@
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
+  color: var(--charcoal-color-text-default);
+  background-color: var(--charcoal-color-container-secondary-default-a);
   transition:
     0.2s color,
     0.2s background-color,
@@ -52,87 +52,87 @@
 
   .charcoal-button:not(:disabled):not([aria-disabled]):hover,
   .charcoal-button[aria-disabled='false']:hover {
-    color: var(--charcoal-text2-hover);
-    background-color: var(--charcoal-surface3-hover);
+    color: var(--charcoal-color-text-hover);
+    background-color: var(--charcoal-color-container-secondary-hover-a);
   }
 
   .charcoal-button:not(:disabled):not([aria-disabled]):active,
   .charcoal-button[aria-disabled='false']:active,
   .charcoal-button[data-active='true'] {
-    color: var(--charcoal-text2-press);
-    background-color: var(--charcoal-surface3-press);
+    color: var(--charcoal-color-text-press);
+    background-color: var(--charcoal-color-container-secondary-press-a);
   }
 
   .charcoal-button[data-variant='Primary'] {
-    color: var(--charcoal-text5);
-    background-color: var(--charcoal-brand);
+    color: var(--charcoal-color-text-on-primary-default);
+    background-color: var(--charcoal-color-container-primary-default);
   }
 
   .charcoal-button[data-variant='Primary']:hover:not(:disabled):not([aria-disabled]),
     .charcoal-button[data-variant='Primary']:hover[aria-disabled='false'] {
-      color: var(--charcoal-text5-hover);
-      background-color: var(--charcoal-brand-hover);
+      color: var(--charcoal-color-text-on-primary-hover);
+      background-color: var(--charcoal-color-container-primary-hover);
     }
 
   .charcoal-button[data-variant='Primary']:active:not(:disabled):not([aria-disabled]),
     .charcoal-button[data-variant='Primary']:active[aria-disabled='false'],
     .charcoal-button[data-variant='Primary'][data-active='true'] {
-      color: var(--charcoal-text5-press);
-      background-color: var(--charcoal-brand-press);
+      color: var(--charcoal-color-text-on-primary-press);
+      background-color: var(--charcoal-color-container-primary-press);
     }
 
   .charcoal-button[data-variant='Overlay'] {
-    color: var(--charcoal-text5);
-    background-color: var(--charcoal-surface4);
+    color: var(--charcoal-color-text-on-on-img-default);
+    background-color: var(--charcoal-color-container-on-img-default);
   }
 
   .charcoal-button[data-variant='Overlay']:hover:not(:disabled):not([aria-disabled]),
     .charcoal-button[data-variant='Overlay']:hover[aria-disabled='false'] {
-      color: var(--charcoal-text5-hover);
-      background-color: var(--charcoal-surface4-hover);
+      color: var(--charcoal-color-text-on-on-img-hover);
+      background-color: var(--charcoal-color-container-on-img-hover);
     }
 
   .charcoal-button[data-variant='Overlay']:active:not(:disabled):not([aria-disabled]),
     .charcoal-button[data-variant='Overlay']:active[aria-disabled='false'],
     .charcoal-button[data-variant='Overlay'][data-active='true'] {
-      color: var(--charcoal-text5-press);
-      background-color: var(--charcoal-surface4-press);
+      color: var(--charcoal-color-text-on-on-img-press);
+      background-color: var(--charcoal-color-container-on-img-press);
     }
 
   .charcoal-button[data-variant='Navigation'] {
-    color: var(--charcoal-text5);
-    background-color: var(--charcoal-surface6);
+    color: var(--charcoal-color-text-on-hud-default);
+    background-color: var(--charcoal-color-container-hud-default);
   }
 
   .charcoal-button[data-variant='Navigation']:hover:not(:disabled):not([aria-disabled]),
     .charcoal-button[data-variant='Navigation']:hover[aria-disabled='false'] {
-      color: var(--charcoal-text5-hover);
-      background-color: var(--charcoal-surface6-hover);
+      color: var(--charcoal-color-text-on-hud-hover);
+      background-color: var(--charcoal-color-container-hud-hover);
     }
 
   .charcoal-button[data-variant='Navigation']:active:not(:disabled):not([aria-disabled]),
     .charcoal-button[data-variant='Navigation']:active[aria-disabled='false'],
     .charcoal-button[data-variant='Navigation'][data-active='true'] {
-      color: var(--charcoal-text5-press);
-      background-color: var(--charcoal-surface6-press);
+      color: var(--charcoal-color-text-on-hud-press);
+      background-color: var(--charcoal-color-container-hud-press);
     }
 
   .charcoal-button[data-variant='Danger'] {
-    color: var(--charcoal-text5);
-    background-color: var(--charcoal-assertive);
+    color: var(--charcoal-color-text-on-negative-default);
+    background-color: var(--charcoal-color-container-negative-default);
   }
 
   .charcoal-button[data-variant='Danger']:hover:not(:disabled):not([aria-disabled]),
     .charcoal-button[data-variant='Danger']:hover[aria-disabled='false'] {
-      color: var(--charcoal-text5-hover);
-      background-color: var(--charcoal-assertive-hover);
+      color: var(--charcoal-color-text-on-negative-hover);
+      background-color: var(--charcoal-color-container-negative-hover);
     }
 
   .charcoal-button[data-variant='Danger']:active:not(:disabled):not([aria-disabled]),
     .charcoal-button[data-variant='Danger']:active[aria-disabled='false'],
     .charcoal-button[data-variant='Danger'][data-active='true'] {
-      color: var(--charcoal-text5-press);
-      background-color: var(--charcoal-assertive-press);
+      color: var(--charcoal-color-text-on-negative-press);
+      background-color: var(--charcoal-color-container-negative-press);
     }
 
   .charcoal-button[data-size='S'] {
@@ -250,49 +250,49 @@
   }
 
   .charcoal-icon-button[data-variant='Default'] {
-    color: var(--charcoal-text3);
-    background-color: var(--charcoal-transparent);
+    color: var(--charcoal-color-icon-tertiary-default);
+    background-color: var(--charcoal-color-container-default-a);
   }
 
   .charcoal-icon-button[data-variant='Default'][data-active='true']:not(:disabled):not([aria-disabled]),
     .charcoal-icon-button[data-variant='Default'][data-active='true'][aria-disabled='false'] {
-      color: var(--charcoal-text3-press);
-      background-color: var(--charcoal-transparent-press);
+      color: var(--charcoal-color-icon-tertiary-press);
+      background-color: var(--charcoal-color-container-press-a);
     }
 
   .charcoal-icon-button[data-variant='Default'][data-active='false']:not(:disabled):not([aria-disabled]):hover,
     .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:hover {
-      color: var(--charcoal-text3-hover);
-      background-color: var(--charcoal-transparent-hover);
+      color: var(--charcoal-color-icon-tertiary-hover);
+      background-color: var(--charcoal-color-container-hover-a);
     }
 
   .charcoal-icon-button[data-variant='Default'][data-active='false']:not(:disabled):not([aria-disabled]):active,
     .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:active {
-      color: var(--charcoal-text3-press);
-      background-color: var(--charcoal-transparent-press);
+      color: var(--charcoal-color-icon-tertiary-press);
+      background-color: var(--charcoal-color-container-press-a);
     }
 
   .charcoal-icon-button[data-variant='Overlay'] {
-    color: var(--charcoal-text5);
-    background-color: var(--charcoal-surface4);
+    color: var(--charcoal-color-icon-on-on-img-default);
+    background-color: var(--charcoal-color-container-on-img-default);
   }
 
   .charcoal-icon-button[data-variant='Overlay'][data-active='true']:not(:disabled):not([aria-disabled]),
     .charcoal-icon-button[data-variant='Overlay'][data-active='true'][aria-disabled='false'] {
-      color: var(--charcoal-text5-press);
-      background-color: var(--charcoal-surface4-press);
+      color: var(--charcoal-color-icon-on-on-img-press);
+      background-color: var(--charcoal-color-container-on-img-press);
     }
 
   .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(:disabled):not([aria-disabled]):hover,
     .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:hover {
-      color: var(--charcoal-text5-hover);
-      background-color: var(--charcoal-surface4-hover);
+      color: var(--charcoal-color-icon-on-on-img-hover);
+      background-color: var(--charcoal-color-container-on-img-hover);
     }
 
   .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(:disabled):not([aria-disabled]):active,
     .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:active {
-      color: var(--charcoal-text5-press);
-      background-color: var(--charcoal-surface4-press);
+      color: var(--charcoal-color-icon-on-on-img-press);
+      background-color: var(--charcoal-color-container-on-img-press);
     }
 
   .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus,
@@ -326,7 +326,7 @@
 .charcoal-radio__label_div {
   font-size: 14px;
   line-height: 22px;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-default);
 }
 .charcoal-radio-input {
   -webkit-appearance: none;
@@ -342,14 +342,14 @@
   height: 20px;
   cursor: pointer;
   border-radius: 999999px;
-  background-color: var(--charcoal-surface1);
+  background-color: var(--charcoal-color-container-default);
   transition:
     0.2s background-color,
     0.2s box-shadow;
 }
 
 .charcoal-radio-input:checked {
-  background-color: var(--charcoal-brand);
+  background-color: var(--charcoal-color-container-primary-default);
 }
 
 .charcoal-radio-input:checked::after {
@@ -358,7 +358,7 @@
   width: 8px;
   height: 8px;
   pointer-events: none;
-  background-color: var(--charcoal-text5);
+  background-color: var(--charcoal-color-icon-on-primary-default);
   border-radius: 999999px;
   transition:
     0.2s background-color,
@@ -368,7 +368,7 @@
 .charcoal-radio-input:not(:checked) {
   border-width: 2px;
   border-style: solid;
-  border-color: var(--charcoal-text3);
+  border-color: var(--charcoal-color-border-default);
 }
 
 .charcoal-radio-input:disabled {
@@ -376,11 +376,11 @@
 }
 
 .charcoal-radio-input:not(:disabled):hover {
-  background-color: var(--charcoal-surface1-hover);
+  background-color: var(--charcoal-color-container-hover);
 }
 
 .charcoal-radio-input:not(:disabled):active {
-  background-color: var(--charcoal-surface1-press);
+  background-color: var(--charcoal-color-container-press);
 }
 
 .charcoal-radio-input:not(:disabled):focus {
@@ -402,19 +402,19 @@
 }
 
 .charcoal-radio-input:checked:not(:disabled):hover {
-  background-color: var(--charcoal-brand-hover);
+  background-color: var(--charcoal-color-container-primary-hover);
 }
 
 .charcoal-radio-input:checked:not(:disabled):hover::after {
-  background-color: var(--charcoal-text5-hover);
+  background-color: var(--charcoal-color-icon-on-primary-hover);
 }
 
 .charcoal-radio-input:checked:not(:disabled):active {
-  background-color: var(--charcoal-brand-press);
+  background-color: var(--charcoal-color-container-primary-press);
 }
 
 .charcoal-radio-input:checked:not(:disabled):active::after {
-  background-color: var(--charcoal-text5-press);
+  background-color: var(--charcoal-color-icon-on-primary-press);
 }
 .charcoal-radio-group {
   display: grid;
@@ -441,7 +441,7 @@
   align-items: center;
   font-size: 14px;
   line-height: 22px;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-default);
 }
 
 .charcoal-multi-select-label::before {
@@ -468,7 +468,7 @@
   width: 20px;
   height: 20px;
   margin: 0;
-  background-color: var(--charcoal-text3);
+  background-color: var(--charcoal-color-container-neutral-default);
   border-radius: 999999px;
   transition:
     0.2s background-color,
@@ -476,7 +476,7 @@
 }
 
 .charcoal-multi-select-input[type='checkbox']:checked {
-    background-color: var(--charcoal-brand);
+    background-color: var(--charcoal-color-container-primary-default);
   }
 
 .charcoal-multi-select-input[type='checkbox']:focus {
@@ -494,22 +494,22 @@
 
 .charcoal-multi-select-input[type='checkbox']:hover:not(:disabled):not([aria-disabled]),
   .charcoal-multi-select-input[type='checkbox']:hover[aria-disabled='false'] {
-    background-color: var(--charcoal-text3-hover);
+    background-color: var(--charcoal-color-container-neutral-hover);
   }
 
 .charcoal-multi-select-input[type='checkbox']:active:not(:disabled):not([aria-disabled]),
   .charcoal-multi-select-input[type='checkbox']:active[aria-disabled='false'] {
-    background-color: var(--charcoal-text3-press);
+    background-color: var(--charcoal-color-container-neutral-press);
   }
 
 .charcoal-multi-select-input[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
   .charcoal-multi-select-input[type='checkbox']:checked:hover[aria-disabled='false'] {
-    background-color: var(--charcoal-brand-hover);
+    background-color: var(--charcoal-color-container-primary-hover);
   }
 
 .charcoal-multi-select-input[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
   .charcoal-multi-select-input[type='checkbox']:checked:active[aria-disabled='false'] {
-    background-color: var(--charcoal-brand-press);
+    background-color: var(--charcoal-color-container-primary-press);
   }
 
 .charcoal-multi-select-input[type='checkbox'][aria-invalid='true'][data-overlay='false']:not(:disabled):not(
@@ -523,7 +523,7 @@
   }
 
 .charcoal-multi-select-input[type='checkbox'][data-overlay='true'] {
-    background-color: var(--charcoal-surface4);
+    background-color: var(--charcoal-color-container-on-img-default);
   }
 
 .charcoal-multi-select-overlay {
@@ -537,7 +537,7 @@
   width: 24px;
   height: 24px;
   border-radius: 999999px;
-  color: var(--charcoal-text5);
+  color: var(--charcoal-color-icon-on-primary-default);
   transition: 0.2s box-shadow;
 }
 
@@ -552,7 +552,7 @@
   }
 
 .charcoal-multi-select-overlay[data-overlay='true'] {
-    border-color: var(--charcoal-text5);
+    border-color: var(--charcoal-color-border-hud);
     border-width: 2px;
     border-style: solid;
   }
@@ -577,7 +577,7 @@
 .charcoal-switch__label_div {
   font-size: 14px;
   line-height: 22px;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-default);
 }
 .charcoal-switch-input {
   cursor: pointer;
@@ -597,7 +597,7 @@
   border-radius: 16px;
   height: 16px;
   margin: 0;
-  background-color: var(--charcoal-text4);
+  background-color: var(--charcoal-color-container-neutral-default);
 }
 
 .charcoal-switch-input:disabled,
@@ -617,7 +617,7 @@
   transform: translateX(0);
   transition: transform 0.2s;
   border-radius: 1024px;
-  background-color: var(--charcoal-text5);
+  background-color: var(--charcoal-color-icon-on-primary-default);
 }
 
 .charcoal-switch-input:checked::after {
@@ -626,15 +626,15 @@
 }
 
 .charcoal-switch-input:checked {
-  background-color: var(--charcoal-brand);
+  background-color: var(--charcoal-color-container-primary-default);
 }
 
 .charcoal-switch-input:not(:disabled):hover {
-  background-color: var(--charcoal-text4-hover);
+  background-color: var(--charcoal-color-container-neutral-hover);
 }
 
 .charcoal-switch-input:not(:disabled):active {
-  background-color: var(--charcoal-text4-press);
+  background-color: var(--charcoal-color-container-neutral-press);
 }
 
 .charcoal-switch-input:not(:disabled):focus {
@@ -649,19 +649,19 @@
 }
 
 .charcoal-switch-input:not(:disabled)::after:hover {
-  background-color: var(--charcoal-text5-hover);
+  background-color: var(--charcoal-color-icon-on-primary-hover);
 }
 
 .charcoal-switch-input:not(:disabled)::after:active {
-  background-color: var(--charcoal-text5-press);
+  background-color: var(--charcoal-color-icon-on-primary-press);
 }
 
 .charcoal-switch-input:not(:disabled):checked:hover {
-  background-color: var(--charcoal-brand-hover);
+  background-color: var(--charcoal-color-container-primary-hover);
 }
 
 .charcoal-switch-input:not(:disabled):checked:active {
-  background-color: var(--charcoal-brand-press);
+  background-color: var(--charcoal-color-container-primary-press);
 }
 .charcoal-text-field-root {
   display: grid;
@@ -679,8 +679,8 @@
   transition:
     0.2s background-color,
     0.2s box-shadow;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
+  color: var(--charcoal-color-text-secondary-default);
+  background-color: var(--charcoal-color-container-secondary-default-a);
   border-radius: 4px;
   padding: 0 8px;
   line-height: 22px;
@@ -692,7 +692,7 @@
   }
 
 .charcoal-text-field-container:not([aria-disabled='true']):hover {
-    background-color: var(--charcoal-surface3-hover);
+    background-color: var(--charcoal-color-container-secondary-hover-a);
   }
 
 .charcoal-text-field-container:not([aria-disabled='true']):focus-within {
@@ -746,42 +746,42 @@
           appearance: none;
   background: transparent;
 
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-secondary-default);
 }
 
 .charcoal-text-field-input::-moz-placeholder {
-    color: var(--charcoal-text3);
+    color: var(--charcoal-color-text-placeholder-default);
   }
 
 .charcoal-text-field-input::placeholder {
-    color: var(--charcoal-text3);
+    color: var(--charcoal-color-text-placeholder-default);
   }
 
 .charcoal-text-field-line-counter {
   line-height: 22px;
   font-size: 14px;
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-text-tertiary-default);
 }
 .charcoal-field-label {
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
   display: flow-root;
-  color: var(--charcoal-text1);
+  color: var(--charcoal-color-text-default);
 }
 
 .charcoal-field-label-required-text {
   font-size: 14px;
   line-height: 22px;
   display: flow-root;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-secondary-default);
 }
 
 .charcoal-field-label-sub-label {
   font-size: 14px;
   line-height: 22px;
   display: flow-root;
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-text-tertiary-default);
   transition:
     0.2s color,
     0.2s box-shadow;
@@ -803,11 +803,11 @@
   font-size: 14px;
   line-height: 22px;
   margin: 0;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-secondary-default);
 }
 
 .charcoal-text-field-assistive-text[data-invalid='true'] {
-  color: var(--charcoal-assertive);
+  color: var(--charcoal-color-text-negative-default);
 }
 .charcoal-text-area-root {
   display: grid;
@@ -820,11 +820,14 @@
   }
 
 .charcoal-text-area-container {
+  /* Runtime variable overridden by the React component. */
+  --charcoal-text-area-rows: 4;
+
   position: relative;
   overflow: hidden;
 
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
+  color: var(--charcoal-color-text-secondary-default);
+  background-color: var(--charcoal-color-container-secondary-default-a);
   border-radius: 4px;
   transition:
     0.2s background-color,
@@ -842,7 +845,7 @@
   }
 
 .charcoal-text-area-container:not([aria-disabled='true']):hover {
-    background-color: var(--charcoal-surface3-hover);
+    background-color: var(--charcoal-color-container-secondary-hover-a);
   }
 
 .charcoal-text-area-container[aria-invalid='true']:focus-within {
@@ -880,11 +883,11 @@
   }
 
 .charcoal-text-area-textarea::-moz-placeholder {
-    color: var(--charcoal-text3);
+    color: var(--charcoal-color-text-placeholder-default);
   }
 
 .charcoal-text-area-textarea::placeholder {
-    color: var(--charcoal-text3);
+    color: var(--charcoal-color-text-placeholder-default);
   }
 
 .charcoal-text-area-counter {
@@ -894,7 +897,7 @@
 
   line-height: 22px;
   font-size: 14px;
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-text-tertiary-default);
 }
 .charcoal-modal-dialog {
   margin: auto;
@@ -903,7 +906,7 @@
   height: fit-content;
   width: 440px;
 
-  background-color: var(--charcoal-surface1);
+  background-color: var(--charcoal-color-container-default);
   border-radius: 24px;
 }
 
@@ -953,7 +956,7 @@
   padding: 40px 0;
   box-sizing: border-box;
 
-  background-color: var(--charcoal-surface4);
+  background-color: var(--charcoal-color-container-neutral-default);
 }
 
   @media (max-width: 743px) {
@@ -968,7 +971,7 @@
   top: 8px;
   right: 8px;
 
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-text-tertiary-default);
   transition: 0.2s color;
 }
 
@@ -992,7 +995,7 @@
 }
 
 .charcoal-modal-header-title {
-  color: var(--charcoal-text1);
+  color: var(--charcoal-color-text-default);
   font-size: 16px;
   line-height: 24px;
   font-weight: bold;
@@ -1020,18 +1023,18 @@
 .charcoal-loading-spinner {
   box-sizing: content-box;
   margin: auto;
-  padding: var(--charcoal-loading-spinner-padding);
+  padding: 16px;
   border-radius: 8px;
-  font-size: var(--charcoal-loading-spinner-size);
-  width: var(--charcoal-loading-spinner-size);
-  height: var(--charcoal-loading-spinner-size);
+  font-size: 48px;
+  width: 48px;
+  height: 48px;
   opacity: 0.84;
-  color: var(--charcoal-text4);
-  background-color: var(--charcoal-background1);
+  color: var(--charcoal-color-icon-tertiary-default);
+  background-color: var(--charcoal-color-background-default);
 }
 
   .charcoal-loading-spinner[data-transparent='true'] {
-    background-color: var(--charcoal-transparent);
+    background-color: var(--charcoal-color-container-default-a);
   }
 
 @keyframes charcoal-loading-spinner-icon-scale-out {
@@ -1088,7 +1091,7 @@
 
   padding-right: 8px;
   padding-left: 8px;
-  background-color: var(--charcoal-surface3);
+  background-color: var(--charcoal-color-container-secondary-default-a);
   border-radius: 4px;
 
   transition:
@@ -1111,11 +1114,11 @@
 
 .charcoal-dropdown-selector-button:not(:disabled)[data-active='true'],
     .charcoal-dropdown-selector-button:not(:disabled):active {
-      background-color: var(--charcoal-surface3-press);
+      background-color: var(--charcoal-color-container-secondary-press-a);
     }
 
 .charcoal-dropdown-selector-button:not(:disabled):hover {
-      background-color: var(--charcoal-surface3-hover);
+      background-color: var(--charcoal-color-container-secondary-hover-a);
     }
 
 .charcoal-dropdown-selector-button:not(:disabled):focus:not(:focus-visible) {
@@ -1132,26 +1135,26 @@
   font-size: 14px;
   line-height: 22px;
   display: flow-root;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-default);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .charcoal-ui-dropdown-selector-text[data-placeholder='true'] {
-    color: var(--charcoal-text3);
+    color: var(--charcoal-color-text-placeholder-default);
   }
 
 .charcoal-ui-dropdown-selector-icon {
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-icon-secondary-default);
 }
 .charcoal-popover {
   margin: 4px 0;
   list-style: none;
   overflow: auto;
   max-height: inherit;
-  background-color: var(--charcoal-background1);
-  border: solid 1px var(--charcoal-border-default);
+  background-color: var(--charcoal-color-background-default);
+  border: solid 1px var(--charcoal-color-border-secondary);
   border-radius: 8px;
   padding-top: 8px;
   padding-bottom: 8px;
@@ -1177,7 +1180,7 @@
 .charcoal-list-item:not([aria-disabled='true']):hover,
 .charcoal-list-item:not([aria-disabled='true']):focus,
 .charcoal-list-item:not([aria-disabled='true']):focus-within {
-  background-color: var(--charcoal-surface3);
+  background-color: var(--charcoal-color-container-secondary-default);
 }
 
 .charcoal-list-item[aria-disabled='true'] {
@@ -1187,7 +1190,7 @@
 .charcoal-dropdown-selector-menu-item {
   font-size: 14px;
   line-height: 22px;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-secondary-default);
   padding: 9px 0;
 
   display: flex;
@@ -1201,7 +1204,7 @@
 }
 
 .charcoal-dropdown-selector-menu-item-icon {
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-secondary-default);
   padding-right: 4px;
 }
 
@@ -1213,7 +1216,7 @@
 .charcoal-dropdown-selector-menu-secondary {
   font-size: 12px;
   line-height: 20px;
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-text-tertiary-default);
   padding-bottom: 9px;
 
   display: flex;
@@ -1230,7 +1233,7 @@
 
 .charcoal-menu-item-group > span {
   display: block;
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-text-tertiary-default);
   font-size: 12px;
   font-weight: bold;
   padding: 12px 0 8px 16px;
@@ -1247,7 +1250,7 @@
   display: inline-flex;
   align-items: center;
 
-  background-color: var(--charcoal-surface3);
+  background-color: var(--charcoal-color-container-secondary-default-a);
   border-radius: 16px;
 }
 
@@ -1274,7 +1277,7 @@
   padding-right: 16px;
   padding-left: 16px;
   border-radius: 16px;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-secondary-default);
 
   font-size: 14px;
   line-height: 22px;
@@ -1286,8 +1289,8 @@
   }
 
 .charcoal-segmented-control-radio__label[data-checked='true'] {
-    background-color: var(--charcoal-brand);
-    color: var(--charcoal-text5);
+    background-color: var(--charcoal-color-container-primary-default);
+    color: var(--charcoal-color-text-on-primary-default);
   }
 
 .charcoal-segmented-control-radio__label[data-uniform-segment-width='true'],
@@ -1332,7 +1335,7 @@
 
 .charcoal-checkbox__label_div {
   flex: 1;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-default);
   font-size: 14px;
   line-height: 20px;
 }
@@ -1360,7 +1363,7 @@
 }
 
 .charcoal-checkbox-input:checked {
-  background-color: var(--charcoal-brand);
+  background-color: var(--charcoal-color-container-primary-default);
 }
 
 .charcoal-checkbox-input:checked::after {
@@ -1378,7 +1381,7 @@
 .charcoal-checkbox-input:not(:checked) {
   border-width: 2px;
   border-style: solid;
-  border-color: var(--charcoal-text4);
+  border-color: var(--charcoal-color-border-default);
 }
 
 .charcoal-checkbox-input:not(:disabled):focus {
@@ -1393,10 +1396,10 @@
 }
 
 .charcoal-checkbox-input:checked:not(:disabled):hover {
-  background-color: var(--charcoal-brand-hover);
+  background-color: var(--charcoal-color-container-primary-hover);
 }
 .charcoal-checkbox-input:checked:not(:disabled):active {
-  background-color: var(--charcoal-brand-press);
+  background-color: var(--charcoal-color-container-primary-press);
 }
 
 .charcoal-checkbox-input[aria-invalid='true'],
@@ -1406,19 +1409,19 @@
 
 .charcoal-checkbox-input[data-rounded='true'] {
   border-radius: 10px;
-  background-color: var(--charcoal-surface3);
+  background-color: var(--charcoal-color-container-secondary-default);
   border: 2px solid transparent;
 }
 
 .charcoal-checkbox-input[data-rounded='true']:checked {
-  background-color: var(--charcoal-brand);
+  background-color: var(--charcoal-color-container-primary-default);
 }
 
 .charcoal-checkbox-input[data-rounded='true']:not(:disabled):hover {
-  background-color: var(--charcoal-surface3-hover);
+  background-color: var(--charcoal-color-container-secondary-hover);
 }
 .charcoal-checkbox-input[data-rounded='true']:not(:disabled):active {
-  background-color: var(--charcoal-surface3-press);
+  background-color: var(--charcoal-color-container-secondary-press);
 }
 
 .charcoal-checkbox-input[data-rounded='true']:not(:disabled):focus-visible {
@@ -1426,10 +1429,10 @@
 }
 
 .charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):hover {
-  background-color: var(--charcoal-brand-hover);
+  background-color: var(--charcoal-color-container-primary-hover);
 }
 .charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):active {
-  background-color: var(--charcoal-brand-press);
+  background-color: var(--charcoal-color-container-primary-press);
 }
 
 .charcoal-checkbox-input[data-rounded='true'][aria-invalid='true'],
@@ -1451,10 +1454,11 @@
   box-sizing: border-box;
 }
 .charcoal-tag-item {
-  --charcoal-tag-item-color: var(--charcoal-text5);
+  --charcoal-tag-item-color: var(--charcoal-color-text-on-primary-default);
   --charcoal-tag-item-size: 40px;
   --charcoal-tag-item-padding-left: 24px;
   --charcoal-tag-item-padding-right: 24px;
+  --charcoal-tag-item-bg: ;
 
   isolation: isolate;
   position: relative;
@@ -1501,7 +1505,7 @@
   }
 
   .charcoal-tag-item[data-state='inactive'] {
-    --charcoal-tag-item-color: var(--charcoal-text2);
+    --charcoal-tag-item-color: var(--charcoal-color-text-secondary-default);
   }
 
   .charcoal-tag-item[data-state='active'] {
@@ -1537,7 +1541,7 @@
 }
 
 .charcoal-tag-item__bg[data-bg-variant='image'] {
-    background-color: var(--charcoal-surface4);
+    background-color: var(--charcoal-color-container-on-img-default);
   }
 
 .charcoal-tag-item__bg[data-bg-variant='image']::before {
@@ -1555,7 +1559,7 @@
     }
 
 .charcoal-tag-item__bg[data-state='inactive'] {
-    background-color: var(--charcoal-surface3);
+    background-color: var(--charcoal-color-container-secondary-default);
   }
 
 .charcoal-tag-item__label {
@@ -1604,7 +1608,7 @@
   display: none;
 }
 .charcoal-hint-text {
-  background-color: var(--charcoal-surface3);
+  background-color: var(--charcoal-color-container-secondary-default);
   border-radius: 8px;
   padding: 12px 16px;
   display: flex;
@@ -1625,13 +1629,13 @@
 .charcoal-hint-text-icon {
   display: flex;
   align-items: center;
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-icon-tertiary-default);
   height: 22px;
   margin: 0 4px 0 0;
 }
 
 .charcoal-hint-text-message {
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-secondary-default);
   font-size: 14px;
   line-height: 22px;
   display: flow-root;
@@ -1640,6 +1644,10 @@
   overflow-wrap: break-word;
 }
 .charcoal-text-ellipsis {
+  /* Runtime variables overridden by the React component. */
+  --charcoal-text-ellipsis-line-limit: 1;
+  --charcoal-text-ellipsis-line-height: inherit;
+
   overflow: hidden;
   overflow-wrap: break-word;
   display: -webkit-box;
@@ -1705,8 +1713,8 @@
   /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-transform: translateZ(0);
 
-  color: var(--charcoal-text3);
-  background-color: var(--charcoal-transparent);
+  color: var(--charcoal-color-text-tertiary-default);
+  background-color: var(--charcoal-color-container-default-a);
   border-radius: 20px;
   transition:
     0.2s background-color,
@@ -1725,13 +1733,13 @@
   }
 .charcoal-pagination-button:not(:disabled):not([aria-disabled]):hover,
   .charcoal-pagination-button[aria-disabled='false']:hover {
-    color: var(--charcoal-text3);
-    background-color: var(--charcoal-surface3);
+    color: var(--charcoal-color-text-tertiary-default);
+    background-color: var(--charcoal-color-container-secondary-default);
   }
 .charcoal-pagination-button:not(:disabled):not([aria-disabled]):active,
   .charcoal-pagination-button[aria-disabled='false']:active {
-    color: var(--charcoal-text3);
-    background-color: var(--charcoal-surface10);
+    color: var(--charcoal-color-text-tertiary-press);
+    background-color: var(--charcoal-color-container-tertiary-press);
   }
 .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus,
   .charcoal-pagination-button[aria-disabled='false']:focus {
@@ -1748,13 +1756,13 @@
   }
 .charcoal-pagination-button[aria-current] {
     cursor: default;
-    background-color: var(--charcoal-surface6);
-    color: var(--charcoal-text5);
+    background-color: var(--charcoal-color-container-hud-default);
+    color: var(--charcoal-color-text-on-hud-default);
   }
 .charcoal-pagination-button[aria-current]:not(:disabled):not([aria-disabled]):hover,
     .charcoal-pagination-button[aria-current]:not(:disabled):not([aria-disabled]):active {
-      background-color: var(--charcoal-surface6);
-      color: var(--charcoal-text5);
+      background-color: var(--charcoal-color-container-hud-default);
+      color: var(--charcoal-color-text-on-hud-default);
     }
 /* stylelint-enable no-descending-specificity */
 
@@ -1766,7 +1774,7 @@
   .charcoal-pagination-spacer:hover,
   .charcoal-pagination-spacer:active {
     cursor: default;
-    color: var(--charcoal-text3);
+    color: var(--charcoal-color-text-tertiary-default);
     background: none;
   }