diff --git a/docs/_static/wagtail_colors_tables.txt b/docs/_static/wagtail_colors_tables.txt
index fb3014a1ac..27c7c6588f 100644
--- a/docs/_static/wagtail_colors_tables.txt
+++ b/docs/_static/wagtail_colors_tables.txt
@@ -1,4 +1,4 @@
-<section><div><!-- Auto-generated with Storybook. See https://github.com/wagtail/wagtail/blob/main/client/src/tokens/colors.stories.tsx. Copy this comment’s parent section to update the `custom_user_interface_colours` documentation. --></div><p>Make sure to test any customisations against our <a href="https://contrast-grid.eightshapes.com/?version=1.1.0&amp;es-color-form__tile-size=compact&amp;es-color-form__show-contrast=aaa&amp;es-color-form__show-contrast=aa&amp;es-color-form__show-contrast=aa18&amp;background-colors=%23000000%2C%20black%0D%0A%23F6F6F8%2C%20grey-50%0D%0A%23E0E0E0%2C%20grey-100%0D%0A%23C8C8C8%2C%20grey-150%0D%0A%23929292%2C%20grey-200%0D%0A%235C5C5C%2C%20grey-400%0D%0A%23333333%2C%20grey-500%0D%0A%23262626%2C%20grey-600%0D%0A%23222222%2C%20grey-700%0D%0A%231D1D1D%2C%20grey-800%0D%0A%23FFFFFF%2C%20white%0D%0A%23261A4E%2C%20primary-200%0D%0A%232E1F5E%2C%20primary%0D%0A%23F2FCFC%2C%20secondary-50%0D%0A%2380D7D8%2C%20secondary-75%0D%0A%2300B0B1%2C%20secondary-100%0D%0A%23005B5E%2C%20secondary-400%0D%0A%23004345%2C%20secondary-600%0D%0A%23007D7E%2C%20secondary%0D%0A%23E2F5FC%2C%20info-50%0D%0A%2380B6C7%2C%20info-75%0D%0A%231D7792%2C%20info-100%0D%0A%23186076%2C%20info-125%0D%0A%23E0FBF4%2C%20positive-50%0D%0A%231B8666%2C%20positive-100%0D%0A%23FFF5D8%2C%20warning-50%0D%0A%23FAA500%2C%20warning-100%0D%0A%23FEF0F0%2C%20critical-50%0D%0A%23FD5765%2C%20critical-100%0D%0A%23CA3B3B%2C%20critical-200&amp;foreground-colors=%23000000%2C%20black%0D%0A%23F6F6F8%2C%20grey-50%0D%0A%23E0E0E0%2C%20grey-100%0D%0A%23C8C8C8%2C%20grey-150%0D%0A%23929292%2C%20grey-200%0D%0A%235C5C5C%2C%20grey-400%0D%0A%23333333%2C%20grey-500%0D%0A%23262626%2C%20grey-600%0D%0A%23222222%2C%20grey-700%0D%0A%231D1D1D%2C%20grey-800%0D%0A%23FFFFFF%2C%20white%0D%0A%23261A4E%2C%20primary-200%0D%0A%232E1F5E%2C%20primary%0D%0A%23F2FCFC%2C%20secondary-50%0D%0A%2380D7D8%2C%20secondary-75%0D%0A%2300B0B1%2C%20secondary-100%0D%0A%23005B5E%2C%20secondary-400%0D%0A%23004345%2C%20secondary-600%0D%0A%23007D7E%2C%20secondary%0D%0A%2380B6C7%2C%20info-75%0D%0A%231D7792%2C%20info-100%0D%0A%231B8666%2C%20positive-100%0D%0A%23FAA500%2C%20warning-100%0D%0A%23FD5765%2C%20critical-100%0D%0A%23CA3B3B%2C%20critical-200">Contrast Grid</a>. Try out your own customisations with this interactive style editor:</p><style> :root {--w-color-black-hue: 0;--w-color-black-saturation: 0%;--w-color-black-lightness: 0%;--w-color-black: hsl(var(--w-color-black-hue) var(--w-color-black-saturation) var(--w-color-black-lightness));--w-color-grey-50-hue: calc(var(--w-color-grey-800-hue) + 240);--w-color-grey-50-saturation: calc(var(--w-color-grey-800-saturation) + 12.5%);--w-color-grey-50-lightness: calc(var(--w-color-grey-800-lightness) + 85.5%);--w-color-grey-50: hsl(var(--w-color-grey-50-hue) var(--w-color-grey-50-saturation) var(--w-color-grey-50-lightness));--w-color-grey-100-hue: var(--w-color-grey-800-hue);--w-color-grey-100-saturation: var(--w-color-grey-800-saturation);--w-color-grey-100-lightness: calc(var(--w-color-grey-800-lightness) + 76.4%);--w-color-grey-100: hsl(var(--w-color-grey-100-hue) var(--w-color-grey-100-saturation) var(--w-color-grey-100-lightness));--w-color-grey-150-hue: var(--w-color-grey-800-hue);--w-color-grey-150-saturation: var(--w-color-grey-800-saturation);--w-color-grey-150-lightness: calc(var(--w-color-grey-800-lightness) + 67%);--w-color-grey-150: hsl(var(--w-color-grey-150-hue) var(--w-color-grey-150-saturation) var(--w-color-grey-150-lightness));--w-color-grey-200-hue: var(--w-color-grey-800-hue);--w-color-grey-200-saturation: var(--w-color-grey-800-saturation);--w-color-grey-200-lightness: calc(var(--w-color-grey-800-lightness) + 45.9%);--w-color-grey-200: hsl(var(--w-color-grey-200-hue) var(--w-color-grey-200-saturation) var(--w-color-grey-200-lightness));--w-color-grey-400-hue: var(--w-color-grey-800-hue);--w-color-grey-400-saturation: var(--w-color-grey-800-saturation);--w-color-grey-400-lightness: calc(var(--w-color-grey-800-lightness) + 24.7%);--w-color-grey-400: hsl(var(--w-color-grey-400-hue) var(--w-color-grey-400-saturation) var(--w-color-grey-400-lightness));--w-color-grey-500-hue: var(--w-color-grey-800-hue);--w-color-grey-500-saturation: var(--w-color-grey-800-saturation);--w-color-grey-500-lightness: calc(var(--w-color-grey-800-lightness) + 8.6%);--w-color-grey-500: hsl(var(--w-color-grey-500-hue) var(--w-color-grey-500-saturation) var(--w-color-grey-500-lightness));--w-color-grey-600-hue: var(--w-color-grey-800-hue);--w-color-grey-600-saturation: var(--w-color-grey-800-saturation);--w-color-grey-600-lightness: calc(var(--w-color-grey-800-lightness) + 3.5%);--w-color-grey-600: hsl(var(--w-color-grey-600-hue) var(--w-color-grey-600-saturation) var(--w-color-grey-600-lightness));--w-color-grey-700-hue: var(--w-color-grey-800-hue);--w-color-grey-700-saturation: var(--w-color-grey-800-saturation);--w-color-grey-700-lightness: calc(var(--w-color-grey-800-lightness) + 1.9%);--w-color-grey-700: hsl(var(--w-color-grey-700-hue) var(--w-color-grey-700-saturation) var(--w-color-grey-700-lightness));--w-color-grey-800-hue: 0;--w-color-grey-800-saturation: 0%;--w-color-grey-800-lightness: 11.4%;--w-color-grey-800: hsl(var(--w-color-grey-800-hue) var(--w-color-grey-800-saturation) var(--w-color-grey-800-lightness));--w-color-white-hue: 0;--w-color-white-saturation: 0%;--w-color-white-lightness: 100%;--w-color-white: hsl(var(--w-color-white-hue) var(--w-color-white-saturation) var(--w-color-white-lightness));--w-color-primary-200-hue: calc(var(--w-color-primary-hue) - 0.5);--w-color-primary-200-saturation: calc(var(--w-color-primary-saturation) - 0.4%);--w-color-primary-200-lightness: calc(var(--w-color-primary-lightness) - 4.1%);--w-color-primary-200: hsl(var(--w-color-primary-200-hue) var(--w-color-primary-200-saturation) var(--w-color-primary-200-lightness));--w-color-primary-hue: 254.3;--w-color-primary-saturation: 50.4%;--w-color-primary-lightness: 24.5%;--w-color-primary: hsl(var(--w-color-primary-hue) var(--w-color-primary-saturation) var(--w-color-primary-lightness));--w-color-secondary-50-hue: calc(var(--w-color-secondary-hue) - 0.5);--w-color-secondary-50-saturation: calc(var(--w-color-secondary-saturation) - 37.5%);--w-color-secondary-50-lightness: calc(var(--w-color-secondary-lightness) + 72.2%);--w-color-secondary-50: hsl(var(--w-color-secondary-50-hue) var(--w-color-secondary-50-saturation) var(--w-color-secondary-50-lightness));--w-color-secondary-75-hue: calc(var(--w-color-secondary-hue) + 0.2);--w-color-secondary-75-saturation: calc(var(--w-color-secondary-saturation) - 47%);--w-color-secondary-75-lightness: calc(var(--w-color-secondary-lightness) + 42.8%);--w-color-secondary-75: hsl(var(--w-color-secondary-75-hue) var(--w-color-secondary-75-saturation) var(--w-color-secondary-75-lightness));--w-color-secondary-100-hue: calc(var(--w-color-secondary-hue) - 0.2);--w-color-secondary-100-saturation: var(--w-color-secondary-saturation);--w-color-secondary-100-lightness: calc(var(--w-color-secondary-lightness) + 10%);--w-color-secondary-100: hsl(var(--w-color-secondary-100-hue) var(--w-color-secondary-100-saturation) var(--w-color-secondary-100-lightness));--w-color-secondary-400-hue: calc(var(--w-color-secondary-hue) + 1.4);--w-color-secondary-400-saturation: var(--w-color-secondary-saturation);--w-color-secondary-400-lightness: calc(var(--w-color-secondary-lightness) - 6.3%);--w-color-secondary-400: hsl(var(--w-color-secondary-400-hue) var(--w-color-secondary-400-saturation) var(--w-color-secondary-400-lightness));--w-color-secondary-600-hue: calc(var(--w-color-secondary-hue) + 1.2);--w-color-secondary-600-saturation: var(--w-color-secondary-saturation);--w-color-secondary-600-lightness: calc(var(--w-color-secondary-lightness) - 11.2%);--w-color-secondary-600: hsl(var(--w-color-secondary-600-hue) var(--w-color-secondary-600-saturation) var(--w-color-secondary-600-lightness));--w-color-secondary-hue: 180.5;--w-color-secondary-saturation: 100%;--w-color-secondary-lightness: 24.7%;--w-color-secondary: hsl(var(--w-color-secondary-hue) var(--w-color-secondary-saturation) var(--w-color-secondary-lightness));--w-color-info-50-hue: calc(var(--w-color-info-125-hue) + 2.2);--w-color-info-50-saturation: calc(var(--w-color-info-125-saturation) + 15.1%);--w-color-info-50-lightness: calc(var(--w-color-info-125-lightness) + 65.9%);--w-color-info-50: hsl(var(--w-color-info-50-hue) var(--w-color-info-50-saturation) var(--w-color-info-50-lightness));--w-color-info-75-hue: calc(var(--w-color-info-125-hue) + 0.4);--w-color-info-75-saturation: calc(var(--w-color-info-125-saturation) - 27.4%);--w-color-info-75-lightness: calc(var(--w-color-info-125-lightness) + 36.3%);--w-color-info-75: hsl(var(--w-color-info-75-hue) var(--w-color-info-75-saturation) var(--w-color-info-75-lightness));--w-color-info-100-hue: calc(var(--w-color-info-125-hue) - 0.1);--w-color-info-100-saturation: calc(var(--w-color-info-125-saturation) + 0.7%);--w-color-info-100-lightness: calc(var(--w-color-info-125-lightness) + 6.5%);--w-color-info-100: hsl(var(--w-color-info-100-hue) var(--w-color-info-100-saturation) var(--w-color-info-100-lightness));--w-color-info-125-hue: 194.0;--w-color-info-125-saturation: 66.2%;--w-color-info-125-lightness: 27.8%;--w-color-info-125: hsl(var(--w-color-info-125-hue) var(--w-color-info-125-saturation) var(--w-color-info-125-lightness));--w-color-positive-50-hue: calc(var(--w-color-positive-100-hue) + 2.3);--w-color-positive-50-saturation: calc(var(--w-color-positive-100-saturation) + 10.6%);--w-color-positive-50-lightness: calc(var(--w-color-positive-100-lightness) + 61.5%);--w-color-positive-50: hsl(var(--w-color-positive-50-hue) var(--w-color-positive-50-saturation) var(--w-color-positive-50-lightness));--w-color-positive-100-hue: 162.1;--w-color-positive-100-saturation: 66.5%;--w-color-positive-100-lightness: 31.6%;--w-color-positive-100: hsl(var(--w-color-positive-100-hue) var(--w-color-positive-100-saturation) var(--w-color-positive-100-lightness));--w-color-warning-50-hue: calc(var(--w-color-warning-100-hue) - 2.3);--w-color-warning-50-saturation: calc(var(--w-color-warning-100-saturation) - 21.3%);--w-color-warning-50-lightness: calc(var(--w-color-warning-100-lightness) + 41.8%);--w-color-warning-50: hsl(var(--w-color-warning-50-hue) var(--w-color-warning-50-saturation) var(--w-color-warning-50-lightness));--w-color-warning-100-hue: 39.6;--w-color-warning-100-saturation: 100%;--w-color-warning-100-lightness: 49%;--w-color-warning-100: hsl(var(--w-color-warning-100-hue) var(--w-color-warning-100-saturation) var(--w-color-warning-100-lightness));--w-color-critical-50-hue: var(--w-color-critical-200-hue);--w-color-critical-50-saturation: calc(var(--w-color-critical-200-saturation) + 30.1%);--w-color-critical-50-lightness: calc(var(--w-color-critical-200-lightness) + 45.7%);--w-color-critical-50: hsl(var(--w-color-critical-50-hue) var(--w-color-critical-50-saturation) var(--w-color-critical-50-lightness));--w-color-critical-100-hue: calc(var(--w-color-critical-200-hue) + 354.9);--w-color-critical-100-saturation: calc(var(--w-color-critical-200-saturation) + 40.2%);--w-color-critical-100-lightness: calc(var(--w-color-critical-200-lightness) + 15.5%);--w-color-critical-100: hsl(var(--w-color-critical-100-hue) var(--w-color-critical-100-saturation) var(--w-color-critical-100-lightness));--w-color-critical-200-hue: 0;--w-color-critical-200-saturation: 57.4%;--w-color-critical-200-lightness: 51.2%;--w-color-critical-200: hsl(var(--w-color-critical-200-hue) var(--w-color-critical-200-saturation) var(--w-color-critical-200-lightness));--w-color-surface-page: var(--w-color-white);--w-color-surface-field: var(--w-color-white);--w-color-surface-field-inactive: var(--w-color-grey-50);--w-color-surface-header: var(--w-color-grey-50);--w-color-surface-menus: var(--w-color-primary);--w-color-surface-menu-item-active: var(--w-color-primary-200);--w-color-surface-tooltip: var(--w-color-primary-200);--w-color-surface-button-default: var(--w-color-secondary);--w-color-surface-button-hover: var(--w-color-secondary-400);--w-color-surface-button-inactive: var(--w-color-grey-400);--w-color-surface-button-outline-hover: var(--w-color-secondary-50);--w-color-surface-button-critical-hover: var(--w-color-critical-50);--w-color-surface-status-label: var(--w-color-info-50);--w-color-text-button: var(--w-color-white);--w-color-text-label-menus-default: var(--w-color-white-80);--w-color-text-label-menus-active: var(--w-color-white);--w-color-text-label: var(--w-color-primary);--w-color-text-context: var(--w-color-grey-600);--w-color-text-meta: var(--w-color-grey-400);--w-color-text-placeholder: var(--w-color-grey-400);--w-color-text-link-default: var(--w-color-secondary);--w-color-text-link-hover: var(--w-color-secondary-400);--w-color-text-button-outline-default: var(--w-color-secondary);--w-color-text-button-outline-hover: var(--w-color-secondary-400);--w-color-text-highlight: var(--w-color-secondary-75);--w-color-text-error: var(--w-color-critical-200);--w-color-text-button-critical-outline-hover: var(--w-color-critical-200);--w-color-text-status-label: var(--w-color-info-100);--w-color-icon-primary: var(--w-color-primary);--w-color-icon-primary-hover: var(--w-color-primary-200);--w-color-icon-secondary: var(--w-color-grey-400);--w-color-icon-secondary-hover: var(--w-color-primary-200);--w-color-border-furniture: var(--w-color-grey-100);--w-color-border-button-small-outline-default: var(--w-color-grey-150);--w-color-border-field-default: var(--w-color-grey-150);--w-color-border-field-inactive: var(--w-color-grey-150);--w-color-border-field-hover: var(--w-color-grey-200);--w-color-border-button-outline-default: var(--w-color-secondary);--w-color-border-button-outline-hover: var(--w-color-secondary-400);--w-color-focus: #00A885;--w-color-box-shadow-md: var(--w-color-black-25);} .w-theme-dark {--w-color-surface-page: var(--w-color-grey-600);--w-color-surface-field: var(--w-color-grey-600);--w-color-surface-field-inactive: var(--w-color-grey-500);--w-color-surface-header: var(--w-color-grey-700);--w-color-surface-menus: var(--w-color-grey-800);--w-color-surface-menu-item-active: var(--w-color-grey-700);--w-color-surface-tooltip: var(--w-color-grey-500);--w-color-surface-button-default: var(--w-color-secondary);--w-color-surface-button-hover: var(--w-color-secondary-400);--w-color-surface-button-inactive: var(--w-color-grey-400);--w-color-surface-button-outline-hover: var(--w-color-grey-700);--w-color-surface-button-critical-hover: var(--w-color-grey-600);--w-color-surface-status-label: var(--w-color-grey-600);--w-color-text-button: var(--w-color-white);--w-color-text-label-menus-default: var(--w-color-white-80);--w-color-text-label-menus-active: var(--w-color-white);--w-color-text-label: var(--w-color-grey-150);--w-color-text-context: var(--w-color-grey-50);--w-color-text-meta: var(--w-color-grey-150);--w-color-text-placeholder: var(--w-color-grey-200);--w-color-text-link-default: var(--w-color-secondary-100);--w-color-text-link-hover: var(--w-color-secondary-75);--w-color-text-button-outline-default: var(--w-color-secondary-100);--w-color-text-button-outline-hover: var(--w-color-secondary-100);--w-color-text-highlight: var(--w-color-secondary-400);--w-color-text-error: var(--w-color-critical-100);--w-color-text-button-critical-outline-hover: var(--w-color-critical-50);--w-color-text-status-label: var(--w-color-info-75);--w-color-icon-primary: var(--w-color-grey-150);--w-color-icon-primary-hover: var(--w-color-grey-50);--w-color-icon-secondary: var(--w-color-grey-150);--w-color-icon-secondary-hover: var(--w-color-grey-50);--w-color-border-furniture: var(--w-color-grey-500);--w-color-border-button-small-outline-default: var(--w-color-grey-400);--w-color-border-field-default: var(--w-color-grey-400);--w-color-border-field-inactive: var(--w-color-grey-500);--w-color-border-field-hover: var(--w-color-grey-200);--w-color-border-button-outline-default: var(--w-color-secondary-100);--w-color-border-button-outline-hover: var(--w-color-secondary-100);--w-color-focus: #00A885;--w-color-box-shadow-md: var(--w-color-black-50);} .wagtail-color-swatch { border-collapse: separate; border-spacing: 4px; } .wagtail-color-swatch td:first-child, .wagtail-color-swatch .w-theme-dark { height: 1.5rem; width: 1.5rem; border: 1px solid #333; forced-color-adjust: none; } </style><pre><style contenteditable="true" style="display: block;">:root {
+<section><div><!-- Auto-generated with Storybook. See https://github.com/wagtail/wagtail/blob/main/client/src/tokens/colors.stories.tsx. Copy this comment’s parent section to update the `custom_user_interface_colours` documentation. --></div><p>Make sure to test any customisations against our <a href="https://contrast-grid.eightshapes.com/?version=1.1.0&amp;es-color-form__tile-size=compact&amp;es-color-form__show-contrast=aaa&amp;es-color-form__show-contrast=aa&amp;es-color-form__show-contrast=aa18&amp;background-colors=%23000000%2C%20black%0D%0A%23F6F6F8%2C%20grey-50%0D%0A%23E0E0E0%2C%20grey-100%0D%0A%23C8C8C8%2C%20grey-150%0D%0A%23929292%2C%20grey-200%0D%0A%235C5C5C%2C%20grey-400%0D%0A%23333333%2C%20grey-500%0D%0A%23262626%2C%20grey-600%0D%0A%23222222%2C%20grey-700%0D%0A%231D1D1D%2C%20grey-800%0D%0A%23FFFFFF%2C%20white%0D%0A%23261A4E%2C%20primary-200%0D%0A%232E1F5E%2C%20primary%0D%0A%23F2FCFC%2C%20secondary-50%0D%0A%2380D7D8%2C%20secondary-75%0D%0A%2300B0B1%2C%20secondary-100%0D%0A%23005B5E%2C%20secondary-400%0D%0A%23004345%2C%20secondary-600%0D%0A%23007D7E%2C%20secondary%0D%0A%23E2F5FC%2C%20info-50%0D%0A%2380B6C7%2C%20info-75%0D%0A%231D7792%2C%20info-100%0D%0A%23186076%2C%20info-125%0D%0A%23E0FBF4%2C%20positive-50%0D%0A%231B8666%2C%20positive-100%0D%0A%23FFF5D8%2C%20warning-50%0D%0A%23FAA500%2C%20warning-100%0D%0A%23FEF0F0%2C%20critical-50%0D%0A%23FD5765%2C%20critical-100%0D%0A%23CA3B3B%2C%20critical-200&amp;foreground-colors=%23000000%2C%20black%0D%0A%23F6F6F8%2C%20grey-50%0D%0A%23E0E0E0%2C%20grey-100%0D%0A%23C8C8C8%2C%20grey-150%0D%0A%23929292%2C%20grey-200%0D%0A%235C5C5C%2C%20grey-400%0D%0A%23333333%2C%20grey-500%0D%0A%23262626%2C%20grey-600%0D%0A%23222222%2C%20grey-700%0D%0A%231D1D1D%2C%20grey-800%0D%0A%23FFFFFF%2C%20white%0D%0A%23261A4E%2C%20primary-200%0D%0A%232E1F5E%2C%20primary%0D%0A%23F2FCFC%2C%20secondary-50%0D%0A%2380D7D8%2C%20secondary-75%0D%0A%2300B0B1%2C%20secondary-100%0D%0A%23005B5E%2C%20secondary-400%0D%0A%23004345%2C%20secondary-600%0D%0A%23007D7E%2C%20secondary%0D%0A%2380B6C7%2C%20info-75%0D%0A%231D7792%2C%20info-100%0D%0A%231B8666%2C%20positive-100%0D%0A%23FAA500%2C%20warning-100%0D%0A%23FD5765%2C%20critical-100%0D%0A%23CA3B3B%2C%20critical-200">Contrast Grid</a>. Try out your own customisations with this interactive style editor:</p><style> :root {--w-color-black-hue: 0;--w-color-black-saturation: 0%;--w-color-black-lightness: 0%;--w-color-black: hsl(var(--w-color-black-hue) var(--w-color-black-saturation) var(--w-color-black-lightness));--w-color-grey-50-hue: calc(var(--w-color-grey-800-hue) + 240);--w-color-grey-50-saturation: calc(var(--w-color-grey-800-saturation) + 12.5%);--w-color-grey-50-lightness: calc(var(--w-color-grey-800-lightness) + 85.5%);--w-color-grey-50: hsl(var(--w-color-grey-50-hue) var(--w-color-grey-50-saturation) var(--w-color-grey-50-lightness));--w-color-grey-100-hue: var(--w-color-grey-800-hue);--w-color-grey-100-saturation: var(--w-color-grey-800-saturation);--w-color-grey-100-lightness: calc(var(--w-color-grey-800-lightness) + 76.4%);--w-color-grey-100: hsl(var(--w-color-grey-100-hue) var(--w-color-grey-100-saturation) var(--w-color-grey-100-lightness));--w-color-grey-150-hue: var(--w-color-grey-800-hue);--w-color-grey-150-saturation: var(--w-color-grey-800-saturation);--w-color-grey-150-lightness: calc(var(--w-color-grey-800-lightness) + 67%);--w-color-grey-150: hsl(var(--w-color-grey-150-hue) var(--w-color-grey-150-saturation) var(--w-color-grey-150-lightness));--w-color-grey-200-hue: var(--w-color-grey-800-hue);--w-color-grey-200-saturation: var(--w-color-grey-800-saturation);--w-color-grey-200-lightness: calc(var(--w-color-grey-800-lightness) + 45.9%);--w-color-grey-200: hsl(var(--w-color-grey-200-hue) var(--w-color-grey-200-saturation) var(--w-color-grey-200-lightness));--w-color-grey-400-hue: var(--w-color-grey-800-hue);--w-color-grey-400-saturation: var(--w-color-grey-800-saturation);--w-color-grey-400-lightness: calc(var(--w-color-grey-800-lightness) + 24.7%);--w-color-grey-400: hsl(var(--w-color-grey-400-hue) var(--w-color-grey-400-saturation) var(--w-color-grey-400-lightness));--w-color-grey-500-hue: var(--w-color-grey-800-hue);--w-color-grey-500-saturation: var(--w-color-grey-800-saturation);--w-color-grey-500-lightness: calc(var(--w-color-grey-800-lightness) + 8.6%);--w-color-grey-500: hsl(var(--w-color-grey-500-hue) var(--w-color-grey-500-saturation) var(--w-color-grey-500-lightness));--w-color-grey-600-hue: var(--w-color-grey-800-hue);--w-color-grey-600-saturation: var(--w-color-grey-800-saturation);--w-color-grey-600-lightness: calc(var(--w-color-grey-800-lightness) + 3.5%);--w-color-grey-600: hsl(var(--w-color-grey-600-hue) var(--w-color-grey-600-saturation) var(--w-color-grey-600-lightness));--w-color-grey-700-hue: var(--w-color-grey-800-hue);--w-color-grey-700-saturation: var(--w-color-grey-800-saturation);--w-color-grey-700-lightness: calc(var(--w-color-grey-800-lightness) + 1.9%);--w-color-grey-700: hsl(var(--w-color-grey-700-hue) var(--w-color-grey-700-saturation) var(--w-color-grey-700-lightness));--w-color-grey-800-hue: 0;--w-color-grey-800-saturation: 0%;--w-color-grey-800-lightness: 11.4%;--w-color-grey-800: hsl(var(--w-color-grey-800-hue) var(--w-color-grey-800-saturation) var(--w-color-grey-800-lightness));--w-color-white-hue: 0;--w-color-white-saturation: 0%;--w-color-white-lightness: 100%;--w-color-white: hsl(var(--w-color-white-hue) var(--w-color-white-saturation) var(--w-color-white-lightness));--w-color-primary-200-hue: calc(var(--w-color-primary-hue) - 0.5);--w-color-primary-200-saturation: calc(var(--w-color-primary-saturation) - 0.4%);--w-color-primary-200-lightness: calc(var(--w-color-primary-lightness) - 4.1%);--w-color-primary-200: hsl(var(--w-color-primary-200-hue) var(--w-color-primary-200-saturation) var(--w-color-primary-200-lightness));--w-color-primary-hue: 254.3;--w-color-primary-saturation: 50.4%;--w-color-primary-lightness: 24.5%;--w-color-primary: hsl(var(--w-color-primary-hue) var(--w-color-primary-saturation) var(--w-color-primary-lightness));--w-color-secondary-50-hue: calc(var(--w-color-secondary-hue) - 0.5);--w-color-secondary-50-saturation: calc(var(--w-color-secondary-saturation) - 37.5%);--w-color-secondary-50-lightness: calc(var(--w-color-secondary-lightness) + 72.2%);--w-color-secondary-50: hsl(var(--w-color-secondary-50-hue) var(--w-color-secondary-50-saturation) var(--w-color-secondary-50-lightness));--w-color-secondary-75-hue: calc(var(--w-color-secondary-hue) + 0.2);--w-color-secondary-75-saturation: calc(var(--w-color-secondary-saturation) - 47%);--w-color-secondary-75-lightness: calc(var(--w-color-secondary-lightness) + 42.8%);--w-color-secondary-75: hsl(var(--w-color-secondary-75-hue) var(--w-color-secondary-75-saturation) var(--w-color-secondary-75-lightness));--w-color-secondary-100-hue: calc(var(--w-color-secondary-hue) - 0.2);--w-color-secondary-100-saturation: var(--w-color-secondary-saturation);--w-color-secondary-100-lightness: calc(var(--w-color-secondary-lightness) + 10%);--w-color-secondary-100: hsl(var(--w-color-secondary-100-hue) var(--w-color-secondary-100-saturation) var(--w-color-secondary-100-lightness));--w-color-secondary-400-hue: calc(var(--w-color-secondary-hue) + 1.4);--w-color-secondary-400-saturation: var(--w-color-secondary-saturation);--w-color-secondary-400-lightness: calc(var(--w-color-secondary-lightness) - 6.3%);--w-color-secondary-400: hsl(var(--w-color-secondary-400-hue) var(--w-color-secondary-400-saturation) var(--w-color-secondary-400-lightness));--w-color-secondary-600-hue: calc(var(--w-color-secondary-hue) + 1.2);--w-color-secondary-600-saturation: var(--w-color-secondary-saturation);--w-color-secondary-600-lightness: calc(var(--w-color-secondary-lightness) - 11.2%);--w-color-secondary-600: hsl(var(--w-color-secondary-600-hue) var(--w-color-secondary-600-saturation) var(--w-color-secondary-600-lightness));--w-color-secondary-hue: 180.5;--w-color-secondary-saturation: 100%;--w-color-secondary-lightness: 24.7%;--w-color-secondary: hsl(var(--w-color-secondary-hue) var(--w-color-secondary-saturation) var(--w-color-secondary-lightness));--w-color-info-50-hue: calc(var(--w-color-info-125-hue) + 2.2);--w-color-info-50-saturation: calc(var(--w-color-info-125-saturation) + 15.1%);--w-color-info-50-lightness: calc(var(--w-color-info-125-lightness) + 65.9%);--w-color-info-50: hsl(var(--w-color-info-50-hue) var(--w-color-info-50-saturation) var(--w-color-info-50-lightness));--w-color-info-75-hue: calc(var(--w-color-info-125-hue) + 0.4);--w-color-info-75-saturation: calc(var(--w-color-info-125-saturation) - 27.4%);--w-color-info-75-lightness: calc(var(--w-color-info-125-lightness) + 36.3%);--w-color-info-75: hsl(var(--w-color-info-75-hue) var(--w-color-info-75-saturation) var(--w-color-info-75-lightness));--w-color-info-100-hue: calc(var(--w-color-info-125-hue) - 0.1);--w-color-info-100-saturation: calc(var(--w-color-info-125-saturation) + 0.7%);--w-color-info-100-lightness: calc(var(--w-color-info-125-lightness) + 6.5%);--w-color-info-100: hsl(var(--w-color-info-100-hue) var(--w-color-info-100-saturation) var(--w-color-info-100-lightness));--w-color-info-125-hue: 194.0;--w-color-info-125-saturation: 66.2%;--w-color-info-125-lightness: 27.8%;--w-color-info-125: hsl(var(--w-color-info-125-hue) var(--w-color-info-125-saturation) var(--w-color-info-125-lightness));--w-color-positive-50-hue: calc(var(--w-color-positive-100-hue) + 2.3);--w-color-positive-50-saturation: calc(var(--w-color-positive-100-saturation) + 10.6%);--w-color-positive-50-lightness: calc(var(--w-color-positive-100-lightness) + 61.5%);--w-color-positive-50: hsl(var(--w-color-positive-50-hue) var(--w-color-positive-50-saturation) var(--w-color-positive-50-lightness));--w-color-positive-100-hue: 162.1;--w-color-positive-100-saturation: 66.5%;--w-color-positive-100-lightness: 31.6%;--w-color-positive-100: hsl(var(--w-color-positive-100-hue) var(--w-color-positive-100-saturation) var(--w-color-positive-100-lightness));--w-color-warning-50-hue: calc(var(--w-color-warning-100-hue) - 2.3);--w-color-warning-50-saturation: calc(var(--w-color-warning-100-saturation) - 21.3%);--w-color-warning-50-lightness: calc(var(--w-color-warning-100-lightness) + 41.8%);--w-color-warning-50: hsl(var(--w-color-warning-50-hue) var(--w-color-warning-50-saturation) var(--w-color-warning-50-lightness));--w-color-warning-100-hue: 39.6;--w-color-warning-100-saturation: 100%;--w-color-warning-100-lightness: 49%;--w-color-warning-100: hsl(var(--w-color-warning-100-hue) var(--w-color-warning-100-saturation) var(--w-color-warning-100-lightness));--w-color-critical-50-hue: var(--w-color-critical-200-hue);--w-color-critical-50-saturation: calc(var(--w-color-critical-200-saturation) + 30.1%);--w-color-critical-50-lightness: calc(var(--w-color-critical-200-lightness) + 45.7%);--w-color-critical-50: hsl(var(--w-color-critical-50-hue) var(--w-color-critical-50-saturation) var(--w-color-critical-50-lightness));--w-color-critical-100-hue: calc(var(--w-color-critical-200-hue) + 354.9);--w-color-critical-100-saturation: calc(var(--w-color-critical-200-saturation) + 40.2%);--w-color-critical-100-lightness: calc(var(--w-color-critical-200-lightness) + 15.5%);--w-color-critical-100: hsl(var(--w-color-critical-100-hue) var(--w-color-critical-100-saturation) var(--w-color-critical-100-lightness));--w-color-critical-200-hue: 0;--w-color-critical-200-saturation: 57.4%;--w-color-critical-200-lightness: 51.2%;--w-color-critical-200: hsl(var(--w-color-critical-200-hue) var(--w-color-critical-200-saturation) var(--w-color-critical-200-lightness));--w-color-surface-page: var(--w-color-white);--w-color-surface-field: var(--w-color-white);--w-color-surface-field-inactive: var(--w-color-grey-50);--w-color-surface-header: var(--w-color-grey-50);--w-color-surface-menus: var(--w-color-primary);--w-color-surface-menu-item-active: var(--w-color-primary-200);--w-color-surface-tooltip: var(--w-color-primary-200);--w-color-surface-button-default: var(--w-color-secondary);--w-color-surface-button-hover: var(--w-color-secondary-400);--w-color-surface-button-inactive: var(--w-color-grey-400);--w-color-surface-button-outline-hover: var(--w-color-secondary-50);--w-color-surface-button-critical-hover: var(--w-color-critical-50);--w-color-surface-status-label: var(--w-color-info-50);--w-color-surface-info-panel: var(--w-color-info-50);--w-color-surface-dashboard-panel: var(--w-color-white);--w-color-text-button: var(--w-color-white);--w-color-text-label-menus-default: var(--w-color-white-80);--w-color-text-label-menus-active: var(--w-color-white);--w-color-text-label: var(--w-color-primary);--w-color-text-context: var(--w-color-grey-600);--w-color-text-meta: var(--w-color-grey-400);--w-color-text-placeholder: var(--w-color-grey-400);--w-color-text-link-default: var(--w-color-secondary);--w-color-text-link-hover: var(--w-color-secondary-400);--w-color-text-button-outline-default: var(--w-color-secondary);--w-color-text-button-outline-hover: var(--w-color-secondary-400);--w-color-text-highlight: var(--w-color-secondary-75);--w-color-text-error: var(--w-color-critical-200);--w-color-text-button-critical-outline-hover: var(--w-color-critical-200);--w-color-text-status-label: var(--w-color-info-100);--w-color-text-link-info: var(--w-color-secondary-400);--w-color-icon-primary: var(--w-color-primary);--w-color-icon-primary-hover: var(--w-color-primary-200);--w-color-icon-secondary: var(--w-color-grey-400);--w-color-icon-secondary-hover: var(--w-color-primary-200);--w-color-border-furniture: var(--w-color-grey-100);--w-color-border-button-small-outline-default: var(--w-color-grey-150);--w-color-border-field-default: var(--w-color-grey-150);--w-color-border-field-inactive: var(--w-color-grey-150);--w-color-border-field-hover: var(--w-color-grey-200);--w-color-border-button-outline-default: var(--w-color-secondary);--w-color-border-button-outline-hover: var(--w-color-secondary-400);--w-color-focus: #00A885;--w-color-box-shadow-md: var(--w-color-black-25);} .w-theme-dark {--w-color-surface-page: var(--w-color-grey-600);--w-color-surface-field: var(--w-color-grey-600);--w-color-surface-field-inactive: var(--w-color-grey-500);--w-color-surface-header: var(--w-color-grey-700);--w-color-surface-menus: var(--w-color-grey-800);--w-color-surface-menu-item-active: var(--w-color-grey-700);--w-color-surface-tooltip: var(--w-color-grey-500);--w-color-surface-button-default: var(--w-color-secondary);--w-color-surface-button-hover: var(--w-color-secondary-400);--w-color-surface-button-inactive: var(--w-color-grey-400);--w-color-surface-button-outline-hover: var(--w-color-grey-700);--w-color-surface-button-critical-hover: var(--w-color-grey-600);--w-color-surface-status-label: var(--w-color-grey-600);--w-color-surface-info-panel: var(--w-color-info-100);--w-color-surface-dashboard-panel: var(--w-color-grey-800);--w-color-text-button: var(--w-color-white);--w-color-text-label-menus-default: var(--w-color-white-80);--w-color-text-label-menus-active: var(--w-color-white);--w-color-text-label: var(--w-color-grey-150);--w-color-text-context: var(--w-color-grey-50);--w-color-text-meta: var(--w-color-grey-150);--w-color-text-placeholder: var(--w-color-grey-200);--w-color-text-link-default: var(--w-color-secondary-100);--w-color-text-link-hover: var(--w-color-secondary-75);--w-color-text-button-outline-default: var(--w-color-secondary-100);--w-color-text-button-outline-hover: var(--w-color-secondary-100);--w-color-text-highlight: var(--w-color-secondary-400);--w-color-text-error: var(--w-color-critical-100);--w-color-text-button-critical-outline-hover: var(--w-color-critical-50);--w-color-text-status-label: var(--w-color-info-75);--w-color-text-link-info: var(--w-color-grey-50);--w-color-icon-primary: var(--w-color-grey-150);--w-color-icon-primary-hover: var(--w-color-grey-50);--w-color-icon-secondary: var(--w-color-grey-150);--w-color-icon-secondary-hover: var(--w-color-grey-50);--w-color-border-furniture: var(--w-color-grey-500);--w-color-border-button-small-outline-default: var(--w-color-grey-400);--w-color-border-field-default: var(--w-color-grey-400);--w-color-border-field-inactive: var(--w-color-grey-500);--w-color-border-field-hover: var(--w-color-grey-200);--w-color-border-button-outline-default: var(--w-color-secondary-100);--w-color-border-button-outline-hover: var(--w-color-secondary-100);--w-color-focus: #00A885;--w-color-box-shadow-md: var(--w-color-black-50);} .wagtail-color-swatch { border-collapse: separate; border-spacing: 4px; } .wagtail-color-swatch td:first-child, .wagtail-color-swatch .w-theme-dark { height: 1.5rem; width: 1.5rem; border: 1px solid #333; forced-color-adjust: none; } </style><pre><style contenteditable="true" style="display: block;">:root {
   --w-color-primary: #2E1F5E;
   /* Any valid CSS format is supported. */
   --w-color-primary-200: hsl(253.8 50% 20.4%);
@@ -6,4 +6,4 @@
   --w-color-secondary-hue: 180.5;
   --w-color-secondary-saturation: 100%;
   --w-color-secondary-lightness: 24.7%;
-}</style></pre><h3>Static colours</h3><table class="wagtail-color-swatch"><thead><tr><th aria-label="Swatch"></th><th>Variable</th><th>Usage</th></tr></thead><tbody><tr><td style="background-color: var(--w-color-black);"></td><td><code>--w-color-black</code></td><td>Shadows only</td></tr><tr><td style="background-color: var(--w-color-grey-800);"></td><td><code>--w-color-grey-800</code></td><td>Backgrounds for panels in dark theme</td></tr><tr><td style="background-color: var(--w-color-grey-700);"></td><td><code>--w-color-grey-700</code></td><td>Backgrounds for panels in dark theme</td></tr><tr><td style="background-color: var(--w-color-grey-600);"></td><td><code>--w-color-grey-600</code></td><td>Body copy, user content</td></tr><tr><td style="background-color: var(--w-color-grey-500);"></td><td><code>--w-color-grey-500</code></td><td>Panels, dividers in dark mode</td></tr><tr><td style="background-color: var(--w-color-grey-400);"></td><td><code>--w-color-grey-400</code></td><td>Help text, placeholders, meta text, neutral state indicators</td></tr><tr><td style="background-color: var(--w-color-grey-200);"></td><td><code>--w-color-grey-200</code></td><td>Dividers, button borders</td></tr><tr><td style="background-color: var(--w-color-grey-150);"></td><td><code>--w-color-grey-150</code></td><td>Field borders</td></tr><tr><td style="background-color: var(--w-color-grey-100);"></td><td><code>--w-color-grey-100</code></td><td>Dividers, panel borders</td></tr><tr><td style="background-color: var(--w-color-grey-50);"></td><td><code>--w-color-grey-50</code></td><td>Background for panels, row highlights</td></tr><tr><td style="background-color: var(--w-color-white);"></td><td><code>--w-color-white</code></td><td>Page backgrounds, Panels, Button text</td></tr><tr><td style="background-color: var(--w-color-primary);"></td><td><code>--w-color-primary</code></td><td>Wagtail branding, Panels, Headings, Buttons, Labels</td></tr><tr><td style="background-color: var(--w-color-primary-200);"></td><td><code>--w-color-primary-200</code></td><td>Accent for elements used in conjunction with primary colour in sidebar</td></tr><tr><td style="background-color: var(--w-color-secondary);"></td><td><code>--w-color-secondary</code></td><td>Primary buttons, action links</td></tr><tr><td style="background-color: var(--w-color-secondary-600);"></td><td><code>--w-color-secondary-600</code></td><td>Hover states for two-tone buttons</td></tr><tr><td style="background-color: var(--w-color-secondary-400);"></td><td><code>--w-color-secondary-400</code></td><td>Two-tone buttons, hover states</td></tr><tr><td style="background-color: var(--w-color-secondary-100);"></td><td><code>--w-color-secondary-100</code></td><td>UI element highlights over dark backgrounds</td></tr><tr><td style="background-color: var(--w-color-secondary-75);"></td><td><code>--w-color-secondary-75</code></td><td>UI element highlights over dark text</td></tr><tr><td style="background-color: var(--w-color-secondary-50);"></td><td><code>--w-color-secondary-50</code></td><td>Button backgrounds, highlighted fields background</td></tr><tr><td style="background-color: var(--w-color-info-125);"></td><td><code>--w-color-info-125</code></td><td>Hover background only, for information messages</td></tr><tr><td style="background-color: var(--w-color-info-100);"></td><td><code>--w-color-info-100</code></td><td>Background and icons for information messages</td></tr><tr><td style="background-color: var(--w-color-info-75);"></td><td><code>--w-color-info-75</code></td><td>Info text in the dark theme</td></tr><tr><td style="background-color: var(--w-color-info-50);"></td><td><code>--w-color-info-50</code></td><td>Background only, for information messages</td></tr><tr><td style="background-color: var(--w-color-positive-100);"></td><td><code>--w-color-positive-100</code></td><td>Positive states</td></tr><tr><td style="background-color: var(--w-color-positive-50);"></td><td><code>--w-color-positive-50</code></td><td>Background only, for positive states</td></tr><tr><td style="background-color: var(--w-color-warning-100);"></td><td><code>--w-color-warning-100</code></td><td>Background and icons for potentially dangerous states</td></tr><tr><td style="background-color: var(--w-color-warning-50);"></td><td><code>--w-color-warning-50</code></td><td>Background only, for potentially dangerous states</td></tr><tr><td style="background-color: var(--w-color-critical-200);"></td><td><code>--w-color-critical-200</code></td><td>Dangerous actions or states (over light background), errors</td></tr><tr><td style="background-color: var(--w-color-critical-100);"></td><td><code>--w-color-critical-100</code></td><td>Dangerous actions or states (over dark background)</td></tr><tr><td style="background-color: var(--w-color-critical-50);"></td><td><code>--w-color-critical-50</code></td><td>Background only, for dangerous states</td></tr></tbody></table><h3>Light &amp; dark theme colours</h3><table class="wagtail-color-swatch"><thead><tr><th>Light</th><th>Dark</th><th>Variable</th></tr></thead><tbody><tr><th scope="rowgroup" colspan="3">Surfaces - General</th></tr><tr><td style="background-color: var(--w-color-surface-page);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-page);"></td><td><code>--w-color-surface-page</code></td></tr><tr><td style="background-color: var(--w-color-surface-field);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-field);"></td><td><code>--w-color-surface-field</code></td></tr><tr><td style="background-color: var(--w-color-surface-field-inactive);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-field-inactive);"></td><td><code>--w-color-surface-field-inactive</code></td></tr><tr><td style="background-color: var(--w-color-surface-header);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-header);"></td><td><code>--w-color-surface-header</code></td></tr><tr><td style="background-color: var(--w-color-surface-menus);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-menus);"></td><td><code>--w-color-surface-menus</code></td></tr><tr><td style="background-color: var(--w-color-surface-menu-item-active);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-menu-item-active);"></td><td><code>--w-color-surface-menu-item-active</code></td></tr><tr><td style="background-color: var(--w-color-surface-tooltip);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-tooltip);"></td><td><code>--w-color-surface-tooltip</code></td></tr><tr><td style="background-color: var(--w-color-surface-button-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-button-default);"></td><td><code>--w-color-surface-button-default</code></td></tr><tr><td style="background-color: var(--w-color-surface-button-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-button-hover);"></td><td><code>--w-color-surface-button-hover</code></td></tr><tr><td style="background-color: var(--w-color-surface-button-inactive);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-button-inactive);"></td><td><code>--w-color-surface-button-inactive</code></td></tr><tr><td style="background-color: var(--w-color-surface-button-outline-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-button-outline-hover);"></td><td><code>--w-color-surface-button-outline-hover</code></td></tr><tr><td style="background-color: var(--w-color-surface-button-critical-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-button-critical-hover);"></td><td><code>--w-color-surface-button-critical-hover</code></td></tr><tr><td style="background-color: var(--w-color-surface-status-label);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-status-label);"></td><td><code>--w-color-surface-status-label</code></td></tr></tbody><tbody><tr><th scope="rowgroup" colspan="3">Text</th></tr><tr><td style="background-color: var(--w-color-text-button);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-button);"></td><td><code>--w-color-text-button</code></td></tr><tr><td style="background-color: var(--w-color-text-label-menus-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-label-menus-default);"></td><td><code>--w-color-text-label-menus-default</code></td></tr><tr><td style="background-color: var(--w-color-text-label-menus-active);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-label-menus-active);"></td><td><code>--w-color-text-label-menus-active</code></td></tr><tr><td style="background-color: var(--w-color-text-label);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-label);"></td><td><code>--w-color-text-label</code></td></tr><tr><td style="background-color: var(--w-color-text-context);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-context);"></td><td><code>--w-color-text-context</code></td></tr><tr><td style="background-color: var(--w-color-text-meta);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-meta);"></td><td><code>--w-color-text-meta</code></td></tr><tr><td style="background-color: var(--w-color-text-placeholder);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-placeholder);"></td><td><code>--w-color-text-placeholder</code></td></tr><tr><td style="background-color: var(--w-color-text-link-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-link-default);"></td><td><code>--w-color-text-link-default</code></td></tr><tr><td style="background-color: var(--w-color-text-link-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-link-hover);"></td><td><code>--w-color-text-link-hover</code></td></tr><tr><td style="background-color: var(--w-color-text-button-outline-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-button-outline-default);"></td><td><code>--w-color-text-button-outline-default</code></td></tr><tr><td style="background-color: var(--w-color-text-button-outline-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-button-outline-hover);"></td><td><code>--w-color-text-button-outline-hover</code></td></tr><tr><td style="background-color: var(--w-color-text-highlight);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-highlight);"></td><td><code>--w-color-text-highlight</code></td></tr><tr><td style="background-color: var(--w-color-text-error);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-error);"></td><td><code>--w-color-text-error</code></td></tr><tr><td style="background-color: var(--w-color-text-button-critical-outline-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-button-critical-outline-hover);"></td><td><code>--w-color-text-button-critical-outline-hover</code></td></tr><tr><td style="background-color: var(--w-color-text-status-label);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-status-label);"></td><td><code>--w-color-text-status-label</code></td></tr></tbody><tbody><tr><th scope="rowgroup" colspan="3">Icons</th></tr><tr><td style="background-color: var(--w-color-icon-primary);"></td><td class="w-theme-dark" style="background-color: var(--w-color-icon-primary);"></td><td><code>--w-color-icon-primary</code></td></tr><tr><td style="background-color: var(--w-color-icon-primary-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-icon-primary-hover);"></td><td><code>--w-color-icon-primary-hover</code></td></tr><tr><td style="background-color: var(--w-color-icon-secondary);"></td><td class="w-theme-dark" style="background-color: var(--w-color-icon-secondary);"></td><td><code>--w-color-icon-secondary</code></td></tr><tr><td style="background-color: var(--w-color-icon-secondary-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-icon-secondary-hover);"></td><td><code>--w-color-icon-secondary-hover</code></td></tr></tbody><tbody><tr><th scope="rowgroup" colspan="3">Borders</th></tr><tr><td style="background-color: var(--w-color-border-furniture);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-furniture);"></td><td><code>--w-color-border-furniture</code></td></tr><tr><td style="background-color: var(--w-color-border-button-small-outline-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-button-small-outline-default);"></td><td><code>--w-color-border-button-small-outline-default</code></td></tr><tr><td style="background-color: var(--w-color-border-field-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-field-default);"></td><td><code>--w-color-border-field-default</code></td></tr><tr><td style="background-color: var(--w-color-border-field-inactive);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-field-inactive);"></td><td><code>--w-color-border-field-inactive</code></td></tr><tr><td style="background-color: var(--w-color-border-field-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-field-hover);"></td><td><code>--w-color-border-field-hover</code></td></tr><tr><td style="background-color: var(--w-color-border-button-outline-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-button-outline-default);"></td><td><code>--w-color-border-button-outline-default</code></td></tr><tr><td style="background-color: var(--w-color-border-button-outline-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-button-outline-hover);"></td><td><code>--w-color-border-button-outline-hover</code></td></tr></tbody><tbody><tr><th scope="rowgroup" colspan="3">Misc</th></tr><tr><td style="background-color: var(--w-color-focus);"></td><td class="w-theme-dark" style="background-color: var(--w-color-focus);"></td><td><code>--w-color-focus</code></td></tr><tr><td style="background-color: var(--w-color-box-shadow-md);"></td><td class="w-theme-dark" style="background-color: var(--w-color-box-shadow-md);"></td><td><code>--w-color-box-shadow-md</code></td></tr></tbody></table></section>
+}</style></pre><h3>Static colours</h3><table class="wagtail-color-swatch"><thead><tr><th aria-label="Swatch"></th><th>Variable</th><th>Usage</th></tr></thead><tbody><tr><td style="background-color: var(--w-color-black);"></td><td><code>--w-color-black</code></td><td>Shadows only</td></tr><tr><td style="background-color: var(--w-color-grey-800);"></td><td><code>--w-color-grey-800</code></td><td>Backgrounds for panels in dark theme</td></tr><tr><td style="background-color: var(--w-color-grey-700);"></td><td><code>--w-color-grey-700</code></td><td>Backgrounds for panels in dark theme</td></tr><tr><td style="background-color: var(--w-color-grey-600);"></td><td><code>--w-color-grey-600</code></td><td>Body copy, user content</td></tr><tr><td style="background-color: var(--w-color-grey-500);"></td><td><code>--w-color-grey-500</code></td><td>Panels, dividers in dark mode</td></tr><tr><td style="background-color: var(--w-color-grey-400);"></td><td><code>--w-color-grey-400</code></td><td>Help text, placeholders, meta text, neutral state indicators</td></tr><tr><td style="background-color: var(--w-color-grey-200);"></td><td><code>--w-color-grey-200</code></td><td>Dividers, button borders</td></tr><tr><td style="background-color: var(--w-color-grey-150);"></td><td><code>--w-color-grey-150</code></td><td>Field borders</td></tr><tr><td style="background-color: var(--w-color-grey-100);"></td><td><code>--w-color-grey-100</code></td><td>Dividers, panel borders</td></tr><tr><td style="background-color: var(--w-color-grey-50);"></td><td><code>--w-color-grey-50</code></td><td>Background for panels, row highlights</td></tr><tr><td style="background-color: var(--w-color-white);"></td><td><code>--w-color-white</code></td><td>Page backgrounds, Panels, Button text</td></tr><tr><td style="background-color: var(--w-color-primary);"></td><td><code>--w-color-primary</code></td><td>Wagtail branding, Panels, Headings, Buttons, Labels</td></tr><tr><td style="background-color: var(--w-color-primary-200);"></td><td><code>--w-color-primary-200</code></td><td>Accent for elements used in conjunction with primary colour in sidebar</td></tr><tr><td style="background-color: var(--w-color-secondary);"></td><td><code>--w-color-secondary</code></td><td>Primary buttons, action links</td></tr><tr><td style="background-color: var(--w-color-secondary-600);"></td><td><code>--w-color-secondary-600</code></td><td>Hover states for two-tone buttons</td></tr><tr><td style="background-color: var(--w-color-secondary-400);"></td><td><code>--w-color-secondary-400</code></td><td>Two-tone buttons, hover states</td></tr><tr><td style="background-color: var(--w-color-secondary-100);"></td><td><code>--w-color-secondary-100</code></td><td>UI element highlights over dark backgrounds</td></tr><tr><td style="background-color: var(--w-color-secondary-75);"></td><td><code>--w-color-secondary-75</code></td><td>UI element highlights over dark text</td></tr><tr><td style="background-color: var(--w-color-secondary-50);"></td><td><code>--w-color-secondary-50</code></td><td>Button backgrounds, highlighted fields background</td></tr><tr><td style="background-color: var(--w-color-info-125);"></td><td><code>--w-color-info-125</code></td><td>Hover background only, for information messages</td></tr><tr><td style="background-color: var(--w-color-info-100);"></td><td><code>--w-color-info-100</code></td><td>Background and icons for information messages</td></tr><tr><td style="background-color: var(--w-color-info-75);"></td><td><code>--w-color-info-75</code></td><td>Info text in the dark theme</td></tr><tr><td style="background-color: var(--w-color-info-50);"></td><td><code>--w-color-info-50</code></td><td>Background only, for information messages</td></tr><tr><td style="background-color: var(--w-color-positive-100);"></td><td><code>--w-color-positive-100</code></td><td>Positive states</td></tr><tr><td style="background-color: var(--w-color-positive-50);"></td><td><code>--w-color-positive-50</code></td><td>Background only, for positive states</td></tr><tr><td style="background-color: var(--w-color-warning-100);"></td><td><code>--w-color-warning-100</code></td><td>Background and icons for potentially dangerous states</td></tr><tr><td style="background-color: var(--w-color-warning-50);"></td><td><code>--w-color-warning-50</code></td><td>Background only, for potentially dangerous states</td></tr><tr><td style="background-color: var(--w-color-critical-200);"></td><td><code>--w-color-critical-200</code></td><td>Dangerous actions or states (over light background), errors</td></tr><tr><td style="background-color: var(--w-color-critical-100);"></td><td><code>--w-color-critical-100</code></td><td>Dangerous actions or states (over dark background)</td></tr><tr><td style="background-color: var(--w-color-critical-50);"></td><td><code>--w-color-critical-50</code></td><td>Background only, for dangerous states</td></tr></tbody></table><h3>Light &amp; dark theme colours</h3><table class="wagtail-color-swatch"><thead><tr><th>Light</th><th>Dark</th><th>Variable</th></tr></thead><tbody><tr><th scope="rowgroup" colspan="3">Surfaces - General</th></tr><tr><td style="background-color: var(--w-color-surface-page);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-page);"></td><td><code>--w-color-surface-page</code></td></tr><tr><td style="background-color: var(--w-color-surface-field);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-field);"></td><td><code>--w-color-surface-field</code></td></tr><tr><td style="background-color: var(--w-color-surface-field-inactive);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-field-inactive);"></td><td><code>--w-color-surface-field-inactive</code></td></tr><tr><td style="background-color: var(--w-color-surface-header);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-header);"></td><td><code>--w-color-surface-header</code></td></tr><tr><td style="background-color: var(--w-color-surface-menus);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-menus);"></td><td><code>--w-color-surface-menus</code></td></tr><tr><td style="background-color: var(--w-color-surface-menu-item-active);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-menu-item-active);"></td><td><code>--w-color-surface-menu-item-active</code></td></tr><tr><td style="background-color: var(--w-color-surface-tooltip);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-tooltip);"></td><td><code>--w-color-surface-tooltip</code></td></tr><tr><td style="background-color: var(--w-color-surface-button-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-button-default);"></td><td><code>--w-color-surface-button-default</code></td></tr><tr><td style="background-color: var(--w-color-surface-button-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-button-hover);"></td><td><code>--w-color-surface-button-hover</code></td></tr><tr><td style="background-color: var(--w-color-surface-button-inactive);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-button-inactive);"></td><td><code>--w-color-surface-button-inactive</code></td></tr><tr><td style="background-color: var(--w-color-surface-button-outline-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-button-outline-hover);"></td><td><code>--w-color-surface-button-outline-hover</code></td></tr><tr><td style="background-color: var(--w-color-surface-button-critical-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-button-critical-hover);"></td><td><code>--w-color-surface-button-critical-hover</code></td></tr><tr><td style="background-color: var(--w-color-surface-status-label);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-status-label);"></td><td><code>--w-color-surface-status-label</code></td></tr><tr><td style="background-color: var(--w-color-surface-info-panel);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-info-panel);"></td><td><code>--w-color-surface-info-panel</code></td></tr><tr><td style="background-color: var(--w-color-surface-dashboard-panel);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-dashboard-panel);"></td><td><code>--w-color-surface-dashboard-panel</code></td></tr></tbody><tbody><tr><th scope="rowgroup" colspan="3">Text</th></tr><tr><td style="background-color: var(--w-color-text-button);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-button);"></td><td><code>--w-color-text-button</code></td></tr><tr><td style="background-color: var(--w-color-text-label-menus-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-label-menus-default);"></td><td><code>--w-color-text-label-menus-default</code></td></tr><tr><td style="background-color: var(--w-color-text-label-menus-active);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-label-menus-active);"></td><td><code>--w-color-text-label-menus-active</code></td></tr><tr><td style="background-color: var(--w-color-text-label);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-label);"></td><td><code>--w-color-text-label</code></td></tr><tr><td style="background-color: var(--w-color-text-context);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-context);"></td><td><code>--w-color-text-context</code></td></tr><tr><td style="background-color: var(--w-color-text-meta);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-meta);"></td><td><code>--w-color-text-meta</code></td></tr><tr><td style="background-color: var(--w-color-text-placeholder);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-placeholder);"></td><td><code>--w-color-text-placeholder</code></td></tr><tr><td style="background-color: var(--w-color-text-link-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-link-default);"></td><td><code>--w-color-text-link-default</code></td></tr><tr><td style="background-color: var(--w-color-text-link-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-link-hover);"></td><td><code>--w-color-text-link-hover</code></td></tr><tr><td style="background-color: var(--w-color-text-button-outline-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-button-outline-default);"></td><td><code>--w-color-text-button-outline-default</code></td></tr><tr><td style="background-color: var(--w-color-text-button-outline-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-button-outline-hover);"></td><td><code>--w-color-text-button-outline-hover</code></td></tr><tr><td style="background-color: var(--w-color-text-highlight);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-highlight);"></td><td><code>--w-color-text-highlight</code></td></tr><tr><td style="background-color: var(--w-color-text-error);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-error);"></td><td><code>--w-color-text-error</code></td></tr><tr><td style="background-color: var(--w-color-text-button-critical-outline-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-button-critical-outline-hover);"></td><td><code>--w-color-text-button-critical-outline-hover</code></td></tr><tr><td style="background-color: var(--w-color-text-status-label);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-status-label);"></td><td><code>--w-color-text-status-label</code></td></tr><tr><td style="background-color: var(--w-color-text-link-info);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-link-info);"></td><td><code>--w-color-text-link-info</code></td></tr></tbody><tbody><tr><th scope="rowgroup" colspan="3">Icons</th></tr><tr><td style="background-color: var(--w-color-icon-primary);"></td><td class="w-theme-dark" style="background-color: var(--w-color-icon-primary);"></td><td><code>--w-color-icon-primary</code></td></tr><tr><td style="background-color: var(--w-color-icon-primary-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-icon-primary-hover);"></td><td><code>--w-color-icon-primary-hover</code></td></tr><tr><td style="background-color: var(--w-color-icon-secondary);"></td><td class="w-theme-dark" style="background-color: var(--w-color-icon-secondary);"></td><td><code>--w-color-icon-secondary</code></td></tr><tr><td style="background-color: var(--w-color-icon-secondary-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-icon-secondary-hover);"></td><td><code>--w-color-icon-secondary-hover</code></td></tr></tbody><tbody><tr><th scope="rowgroup" colspan="3">Borders</th></tr><tr><td style="background-color: var(--w-color-border-furniture);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-furniture);"></td><td><code>--w-color-border-furniture</code></td></tr><tr><td style="background-color: var(--w-color-border-button-small-outline-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-button-small-outline-default);"></td><td><code>--w-color-border-button-small-outline-default</code></td></tr><tr><td style="background-color: var(--w-color-border-field-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-field-default);"></td><td><code>--w-color-border-field-default</code></td></tr><tr><td style="background-color: var(--w-color-border-field-inactive);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-field-inactive);"></td><td><code>--w-color-border-field-inactive</code></td></tr><tr><td style="background-color: var(--w-color-border-field-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-field-hover);"></td><td><code>--w-color-border-field-hover</code></td></tr><tr><td style="background-color: var(--w-color-border-button-outline-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-button-outline-default);"></td><td><code>--w-color-border-button-outline-default</code></td></tr><tr><td style="background-color: var(--w-color-border-button-outline-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-button-outline-hover);"></td><td><code>--w-color-border-button-outline-hover</code></td></tr></tbody><tbody><tr><th scope="rowgroup" colspan="3">Misc</th></tr><tr><td style="background-color: var(--w-color-focus);"></td><td class="w-theme-dark" style="background-color: var(--w-color-focus);"></td><td><code>--w-color-focus</code></td></tr><tr><td style="background-color: var(--w-color-box-shadow-md);"></td><td class="w-theme-dark" style="background-color: var(--w-color-box-shadow-md);"></td><td><code>--w-color-box-shadow-md</code></td></tr></tbody></table></section>