Update colors, add the dark mode palette, and switch to CSS vars (#4690)

frontend/src/components/TableSortIcon.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="flex flex-col"
-    :class="[active ? 'text-dark-charcoal' : 'text-gray']"
-  >
+  <div class="flex flex-col" :class="[active ? 'text-default' : 'text-gray']">
     <svg
       width="12"
       height="6"

frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- Should be wrapped by a fixed-width parent -->
   <div
-    class="relative h-0 w-full overflow-hidden bg-yellow pt-full"
+    class="relative h-0 w-full overflow-hidden bg-complementary pt-full"
     :title="helpText"
   >
     <!-- Programmatic thumbnail -->
@@ -14,7 +14,7 @@
         <circle
           v-for="j in dotCount"
           :key="`${i}-${j}`"
-          class="fill-dark-charcoal"
+          class="fill-gray-12"
           :cx="offset(j)"
           :cy="offset(i)"
           :r="radius(i, j)"

frontend/src/components/VAudioTrack/VAudioTrack.vue

@@ -3,7 +3,7 @@
   <Component
     :is="isComposite ? VLink : 'div'"
     v-bind="containerAttributes"
-    class="audio-track group block overflow-hidden rounded-sm ring-pink hover:no-underline"
+    class="audio-track group block overflow-hidden rounded-sm ring-pink-8 hover:no-underline"
     :aria-label="ariaLabel"
     :role="isComposite ? 'application' : undefined"
     @keydown.shift.tab.exact="$emit('shift-tab', $event)"

frontend/src/components/VAudioTrack/VWaveform.vue

@@ -2,7 +2,7 @@
   <div
     v-bind="waveformAttributes"
     ref="el"
-    class="waveform bg-background-var group/waveform relative overflow-hidden text-dark-charcoal focus-visible:outline-none"
+    class="waveform bg-background-var group/waveform relative overflow-hidden text-default focus-visible:outline-none"
     :style="heightProperties"
     :tabIndex="isTabbable && isInteractive ? 0 : -1"
     :aria-disabled="!isInteractive"
@@ -20,7 +20,7 @@
       <!-- Stroke is calculated from the centre of the path -->
       <rect
         v-if="waveformDimens.width && waveformDimens.height"
-        class="stroke-pink"
+        class="stroke-pink-8"
         x="0.75"
         y="0.75"
         :width="waveformDimens.width - 1.5"
@@ -51,7 +51,7 @@
     >
       <rect
         v-if="isReady"
-        class="fill-yellow"
+        class="progress-bar"
         x="0"
         y="0"
         :width="progressBarWidth"
@@ -73,7 +73,7 @@
         class="origin-bottom transform transition-transform duration-500"
         :class="[
           isReady ? 'scale-y-100' : 'scale-y-0',
-          index <= seekIndex ? 'fill-black' : 'fill-dark-charcoal-20-alpha',
+          index <= seekIndex ? 'fill-wave-active' : 'fill-wave-inactive',
         ]"
         :x="spaceBefore(index)"
         :y="spaceAbove(index)"
@@ -110,7 +110,7 @@
           :class="[
             ...(isProgressTimestampCutoff
               ? ['bg-background-var']
-              : ['bg-yellow', '-translate-x-full']),
+              : ['bg-complementary', '-translate-x-full']),
           ]"
           :style="progressTimeLeft"
         >
@@ -567,7 +567,7 @@ export default defineComponent({
 .waveform {
   --v-background-color: var(
     --waveform-background-color,
-    theme("colors.dark-charcoal.06")
+    theme("colors.gray.1")
   );
 }
 
@@ -592,11 +592,15 @@ export default defineComponent({
   left: var(--progress-time-left);
 }
 
+.progress-bar {
+  fill: theme("backgroundColor.complementary");
+}
+
 .seek {
   left: var(--seek-time-left);
 }
 
-.fill-dark-charcoal-20-alpha {
+.fill-gray-3-alpha {
   fill: rgba(48, 39, 46, 0.2);
 }
 </style>

frontend/src/components/VAudioTrack/layouts/VBoxLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="box-track group relative h-0 w-full rounded-sm bg-yellow pt-full text-dark-charcoal"
+    class="box-track group relative h-0 w-full rounded-sm bg-complementary pt-full text-default"
   >
     <div class="absolute inset-0 flex flex-col">
       <div class="info flex flex-grow flex-col justify-between px-4 pt-4">
@@ -94,6 +94,6 @@ export default defineComponent({
 <style scoped>
 :deep(.waveform) {
   @apply h-10 flex-grow;
-  --waveform-background-color: theme("colors.yellow");
+  --waveform-background-color: theme("backgroundColor.complementary");
 }
 </style>

frontend/src/components/VAudioTrack/layouts/VFullLayout.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="full-track w-full">
-    <div class="relative border-b border-dark-charcoal-20">
+    <div class="relative border-b border-default">
       <span
         v-if="currentTime > 0"
-        class="pointer-events-none absolute left-0 hidden h-full w-4 bg-yellow md:block lg:w-10"
+        class="pointer-events-none absolute left-0 hidden h-full w-4 bg-complementary md:block lg:w-10"
         aria-hidden
       />
       <span
         v-if="status === 'played'"
-        class="pointer-events-none absolute right-0 hidden h-full w-4 bg-yellow md:block lg:w-10"
+        class="pointer-events-none absolute right-0 hidden h-full w-4 bg-complementary md:block lg:w-10"
         aria-hidden
       />
       <div class="md:mx-4 lg:mx-10">
@@ -72,7 +72,7 @@ export default defineComponent({
 <style>
 .full-track .waveform {
   @apply h-[185px] rounded-sm;
-  --waveform-background-color: theme("colors.white");
+  --waveform-background-color: theme("backgroundColor.default");
 }
 
 .full-track .audio-control {

frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue

@@ -1,15 +1,15 @@
 <template>
   <div
-    class="global-track grid w-full grid-cols-[3rem,1fr] grid-rows-[3rem,3rem] rounded ring-1 ring-dark-charcoal ring-opacity-20"
+    class="global-track grid w-full grid-cols-[3rem,1fr] grid-rows-[3rem,3rem] rounded ring-1 ring-gray-3 ring-opacity-20"
   >
     <div class="h-12 w-12 rounded-ss">
       <VAudioThumbnail class="rounded-ss" :audio="audio" />
     </div>
 
-    <div class="flex h-12 items-center justify-between rounded-se bg-white">
+    <div class="flex h-12 items-center justify-between rounded-se bg-default">
       <VLink
         :href="`/audio/${audio.id}`"
-        class="hover-underline label-bold z-10 flex flex-row items-center px-3 pe-12 text-dark-charcoal"
+        class="hover-underline label-bold z-10 flex flex-row items-center px-3 pe-12 text-default"
         :class="{ 'blur-text': shouldBlur }"
       >
         {{ shouldBlur ? $t("sensitiveContent.title.audio") : audio.title }}
@@ -67,7 +67,7 @@ export default defineComponent({
 
 .global-track .waveform {
   @apply h-full rounded-ee;
-  --waveform-background-color: theme("colors.white");
+  --waveform-background-color: theme("backgroundColor.default");
 }
 .global-track .audio-control {
   @apply rounded-es;

frontend/src/components/VAudioTrack/layouts/VRowLayout.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- `pages/search/audio` has negative margin `-mx-4` to compensate for this padding. -->
   <article
-    class="row-track grid p-2 hover:bg-dark-charcoal-06 md:p-4"
+    class="row-track grid p-2 hover:bg-surface md:p-4"
     :class="[`size-${size}`, { 'items-start': isSmall }]"
   >
     <div
@@ -24,7 +24,7 @@
 
     <div role="document" class="flex min-w-0 flex-shrink-0 flex-col gap-1">
       <h2
-        class="decoration-inherit line-clamp-1 block overflow-hidden text-ellipsis whitespace-nowrap rounded-sm text-dark-charcoal hover:text-dark-charcoal group-hover:underline"
+        class="decoration-inherit line-clamp-1 block overflow-hidden text-ellipsis whitespace-nowrap rounded-sm text-default hover:text-default group-hover:underline"
         :class="[
           { 'blur-text': shouldBlur },
           isSmall ? 'label-bold' : 'description-bold',
@@ -34,7 +34,7 @@
       </h2>
 
       <div
-        class="flex text-dark-charcoal-70"
+        class="flex text-secondary"
         :class="[
           isSmall ? 'caption-regular' : 'label-regular',
           isMedium ? 'flex-row items-center' : 'flex-col gap-1',
@@ -204,11 +204,11 @@ export default defineComponent({
 
 .dot-after {
   @apply relative me-5;
-  @apply after:absolute after:-end-3 after:top-[calc(50%-0.125rem)] after:h-1 after:w-1 after:rounded-full after:bg-dark-charcoal-70;
+  @apply after:absolute after:-end-3 after:top-[calc(50%-0.125rem)] after:h-1 after:w-1 after:rounded-full after:bg-gray-8;
 }
 
 .dot-before {
   @apply relative ms-5;
-  @apply before:absolute before:-start-3 before:top-[calc(50%-0.125rem)] before:h-1 before:w-1 before:rounded-full before:bg-dark-charcoal-70;
+  @apply before:absolute before:-start-3 before:top-[calc(50%-0.125rem)] before:h-1 before:w-1 before:rounded-full before:bg-gray-8;
 }
 </style>

frontend/src/components/VBanner/VNotificationBanner.vue

@@ -18,10 +18,7 @@
         :icon-props="{ name: 'close-small' }"
         size="small"
         :label="closeButtonLabel || $t('modal.closeBanner')"
-        :class="{
-          'focus-slim-tx-yellow hover:bg-white hover:bg-opacity-10':
-            variant === 'dark',
-        }"
+        :class="closeButtonClassNames"
         @click="$emit('close')"
       />
     </slot>
@@ -61,7 +58,7 @@ export default defineComponent({
     },
     /**
      * the color variant of the banner; The dark variant is intended for use on
-     * yellow pages.
+     * bg-complementary pages.
      */
     variant: {
       type: String as PropType<"regular" | "dark">,
@@ -87,28 +84,40 @@ export default defineComponent({
   setup(props) {
     const classNames = computed(() =>
       props.variant === "dark"
-        ? "bg-dark-charcoal text-white"
+        ? "bg-tertiary text-over-dark"
         : {
-            info: "bg-info-soft",
-            warning: "bg-warning-soft",
-            success: "bg-success-soft",
-            error: "bg-error-soft",
+            info: "bg-info",
+            warning: "bg-warning",
+            success: "bg-success",
+            error: "bg-error",
           }[props.nature]
     )
     const iconClassNames = computed(() =>
       props.variant === "dark"
         ? ""
         : {
-            info: "text-info",
-            warning: "text-warning",
-            success: "text-success",
-            error: "text-error",
+            info: "text-info-8",
+            warning: "text-warning-8",
+            success: "text-success-8",
+            error: "text-error-8",
+          }[props.nature]
+    )
+
+    const closeButtonClassNames = computed(() =>
+      props.variant === "dark"
+        ? "focus-slim-tx-bg-complementary hover:bg-tertiary-hover"
+        : {
+            info: "hover:!bg-info-3",
+            warning: "hover:!bg-warning-3",
+            success: "hover:!bg-success-3",
+            error: "hover:!bg-error-3",
           }[props.nature]
     )
 
     return {
       classNames,
       iconClassNames,
+      closeButtonClassNames,
     }
   },
 })

frontend/src/components/VButton.vue

@@ -294,38 +294,38 @@ a.button {
   @apply rounded-ee-none rounded-es-none;
 }
 
-.filled-pink {
-  @apply border-tx bg-pink text-white hover:bg-dark-pink hover:text-white;
+.filled-pink-8 {
+  @apply border-tx bg-primary text-over-dark hover:bg-primary-hover hover:text-over-dark;
 }
 .filled-dark {
-  @apply border-tx bg-dark-charcoal text-white hover:bg-dark-charcoal-90 hover:text-white disabled:opacity-70;
+  @apply border-tx bg-tertiary text-over-dark hover:bg-tertiary-hover hover:text-over-dark disabled:opacity-70;
 }
 .filled-gray {
-  @apply border-tx bg-dark-charcoal-10 text-dark-charcoal hover:bg-dark-charcoal hover:text-white;
+  @apply border-tx bg-secondary text-default hover:bg-secondary-hover hover:text-over-dark;
 }
 .filled-white {
-  @apply border-tx bg-white text-dark-charcoal hover:bg-dark-charcoal hover:text-white;
+  @apply border-tx bg-default text-default hover:bg-secondary-hover hover:text-over-dark;
 }
 .bordered-white {
-  @apply border-white bg-white text-dark-charcoal hover:border-dark-charcoal-20;
+  @apply border-bg-ring bg-default text-default hover:border-transparent-hover;
 }
 .bordered-white-pressed {
-  @apply border-tx bg-dark-charcoal text-white hover:border-dark-charcoal-90 hover:bg-dark-charcoal-90 hover:focus-visible:border-tx;
+  @apply border-tx bg-tertiary text-over-dark hover:border-gray-11 hover:bg-tertiary-hover hover:focus-visible:border-tx;
 }
 .bordered-gray {
-  @apply border-dark-charcoal-20 bg-white text-dark-charcoal hover:border-dark-charcoal focus-visible:border-tx hover:focus-visible:border-tx;
+  @apply border-default bg-default text-default hover:border-hover focus-visible:border-tx hover:focus-visible:border-tx;
 }
 .transparent-tx {
   @apply border-tx;
 }
 .transparent-gray {
-  @apply border-tx bg-tx text-dark-charcoal hover:bg-dark-charcoal hover:bg-opacity-10 disabled:text-dark-charcoal-40;
+  @apply border-tx bg-tx text-default hover:bg-secondary disabled:text-disabled;
 }
 .transparent-dark {
-  @apply border-tx bg-tx text-dark-charcoal hover:bg-dark-charcoal hover:text-white;
+  @apply border-tx bg-tx text-default hover:bg-secondary-hover hover:text-over-dark;
 }
 .transparent-dark-pressed {
-  @apply border-tx bg-dark-charcoal text-white hover:border-dark-charcoal-90;
+  @apply border-tx bg-tertiary text-over-dark hover:border-gray-11;
 }
 
 .icon-only {

frontend/src/components/VCheckbox/VCheckbox.vue

@@ -8,12 +8,12 @@
       <!--
       The checkbox focus style is a slight variation on the `focus-slim-tx` style.
       Because it becomes filled when checked, it also needs the
-      `checked:focus-visible:border-white` class.
+      `checked:focus-visible:border-bg-ring` class.
       -->
       <input
         :id="id"
         type="checkbox"
-        class="me-3 block appearance-none border border-dark-charcoal bg-white transition-colors duration-100 checked:bg-dark-charcoal disabled:border-dark-charcoal-40 disabled:bg-dark-charcoal-10 checked:disabled:border-dark-charcoal-40 checked:disabled:bg-dark-charcoal-40"
+        class="me-3 block appearance-none border border-tertiary bg-default transition-colors duration-100 checked:bg-tertiary disabled:border-disabled disabled:bg-secondary checked:disabled:border-disabled checked:disabled:bg-disabled"
         :class="
           isSwitch
             ? ['h-4.5', 'w-9', 'rounded-full', 'focus-slim-offset']
@@ -22,7 +22,7 @@
                 'w-5',
                 'rounded-sm',
                 'focus-slim-tx',
-                'checked:focus-visible:border-white',
+                'checked:focus-visible:border-bg-ring',
               ]
         "
         v-bind="inputAttrs"
@@ -36,10 +36,10 @@
         class="absolute left-0.75 top-0.75 block h-3 w-3 rounded-full transition-transform duration-100"
         :class="
           localCheckedState
-            ? ['bg-white', 'translate-x-[1.125rem]']
+            ? ['bg-default', 'translate-x-[1.125rem]']
             : disabled
-              ? ['bg-dark-charcoal-40']
-              : ['bg-dark-charcoal']
+              ? ['bg-disabled']
+              : ['bg-tertiary']
         "
         aria-hidden="true"
       />
@@ -48,7 +48,7 @@
       <VIcon
         v-else
         v-show="localCheckedState"
-        class="pointer-events-none absolute inset-0 transform text-white"
+        class="pointer-events-none absolute inset-0 transform text-over-dark"
         name="check"
         :size="5"
       />
@@ -147,7 +147,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const localCheckedState = ref(props.checked || false)
     const labelClasses = computed(() =>
-      props.disabled ? "text-dark-charcoal-40" : "text-dark-charcoal"
+      props.disabled ? "text-disabled" : "text-default"
     )
     const inputAttrs = computed<CheckboxAttrs>(() => {
       const attrs: CheckboxAttrs = {