Set up new color design tokens for light and dark themes

client/src/tokens/colorThemes.js

@@ -0,0 +1,687 @@
+/** @typedef {{
+    value: svar(--w-color-trin)g;
+    bgUtility: string;
+    textUtility: string;
+    cssVariable: string;
+}} Token */
+
+/** @typedef {{
+    [token: string]: Token;
+}} CategoryTokens */
+
+/** @typedef {{
+    label: string;
+    tokens: CategoryTokens;
+}} ThemeCategory */
+
+// The focus outline color is defined without reusing a named color variable
+// because it shouldn’t be reused for anything else in the UI.
+const focusToken = {
+  value: '#009072',
+  bgUtility: 'w-bg-focus',
+  textUtility: 'w-text-focus',
+  cssVariable: '--w-color-focus',
+};
+
+/** @type {ThemeCategory[]} */
+const light = [
+  {
+    label: 'Surfaces - General',
+    tokens: {
+      'surface-page': {
+        value: 'var(--w-color-white)',
+        bgUtility: 'w-bg-surface-page',
+        textUtility: 'w-text-surface-page',
+        cssVariable: '--w-color-surface-page',
+      },
+      'surface-field': {
+        value: 'var(--w-color-white)',
+        bgUtility: 'w-bg-surface-field',
+        textUtility: 'w-text-surface-field',
+        cssVariable: '--w-color-surface-field',
+      },
+      'surface-field-inactive': {
+        value: 'var(--w-color-grey-50)',
+        bgUtility: 'w-bg-surface-field-inactive',
+        textUtility: 'w-text-surface-field-inactive',
+        cssVariable: '--w-color-surface-field-inactive',
+      },
+      'surface-header': {
+        value: 'var(--w-color-grey-50)',
+        bgUtility: 'w-bg-surface-header',
+        textUtility: 'w-text-surface-header',
+        cssVariable: '--w-color-surface-header',
+      },
+      'surface-menus': {
+        value: 'var(--w-color-primary)',
+        bgUtility: 'w-bg-surface-menus',
+        textUtility: 'w-text-surface-menus',
+        cssVariable: '--w-color-surface-menus',
+      },
+      'surface-menu-item-active': {
+        value: 'var(--w-color-primary-200)',
+        bgUtility: 'w-bg-surface-menu-item-active',
+        textUtility: 'w-text-surface-menu-item-active',
+        cssVariable: '--w-color-surface-menu-item-active',
+      },
+      'surface-tooltip': {
+        value: 'var(--w-color-primary-200)',
+        bgUtility: 'w-bg-surface-tooltip',
+        textUtility: 'w-text-surface-tooltip',
+        cssVariable: '--w-color-surface-tooltip',
+      },
+      'surface-button-default': {
+        value: 'var(--w-color-secondary)',
+        bgUtility: 'w-bg-surface-button-default',
+        textUtility: 'w-text-surface-button-default',
+        cssVariable: '--w-color-surface-button-default',
+      },
+      'surface-button-hover': {
+        value: 'var(--w-color-secondary-400)',
+        bgUtility: 'w-bg-surface-button-hover',
+        textUtility: 'w-text-surface-button-hover',
+        cssVariable: '--w-color-surface-button-hover',
+      },
+      'surface-button-inactive': {
+        value: 'var(--w-color-grey-400)',
+        bgUtility: 'w-bg-surface-button-inactive',
+        textUtility: 'w-text-surface-button-inactive',
+        cssVariable: '--w-color-surface-button-inactive',
+      },
+      'surface-button-outline-hover': {
+        value: 'var(--w-color-secondary-50)',
+        bgUtility: 'w-bg-surface-button-outline-hover',
+        textUtility: 'w-text-surface-button-outline-hover',
+        cssVariable: '--w-color-surface-button-outline-hover',
+      },
+      'surface-panel-information': {
+        value: 'var(--w-color-info-50)',
+        bgUtility: 'w-bg-surface-panel-information',
+        textUtility: 'w-text-surface-panel-information',
+        cssVariable: '--w-color-surface-panel-information',
+      },
+    },
+  },
+  {
+    label: 'Surfaces - Alerts',
+    tokens: {
+      'surface-alert-modal-information': {
+        value: 'var(--w-color-info-50)',
+        bgUtility: 'w-bg-surface-alert-modal-information',
+        textUtility: 'w-text-surface-alert-modal-information',
+        cssVariable: '--w-color-surface-alert-modal-information',
+      },
+      'surface-alert-information': {
+        value: 'var(--w-color-info-100)',
+        bgUtility: 'w-bg-surface-alert-information',
+        textUtility: 'w-text-surface-alert-information',
+        cssVariable: '--w-color-surface-alert-information',
+      },
+      'surface-alert-modal-confirmation': {
+        value: 'var(--w-color-positive-50)',
+        bgUtility: 'w-bg-surface-alert-modal-confirmation',
+        textUtility: 'w-text-surface-alert-modal-confirmation',
+        cssVariable: '--w-color-surface-alert-modal-confirmation',
+      },
+      'surface-alert-confirmation': {
+        value: 'var(--w-color-positive-100)',
+        bgUtility: 'w-bg-surface-alert-confirmation',
+        textUtility: 'w-text-surface-alert-confirmation',
+        cssVariable: '--w-color-surface-alert-confirmation',
+      },
+      'surface-alert-modal-warning': {
+        value: 'var(--w-color-warning-50)',
+        bgUtility: 'w-bg-surface-alert-modal-warning',
+        textUtility: 'w-text-surface-alert-modal-warning',
+        cssVariable: '--w-color-surface-alert-modal-warning',
+      },
+      'surface-alert-warning': {
+        value: 'var(--w-color-warning-100)',
+        bgUtility: 'w-bg-surface-alert-warning',
+        textUtility: 'w-text-surface-alert-warning',
+        cssVariable: '--w-color-surface-alert-warning',
+      },
+      'surface-alert-modal-danger': {
+        value: 'var(--w-color-critical-50)',
+        bgUtility: 'w-bg-surface-alert-modal-danger',
+        textUtility: 'w-text-surface-alert-modal-danger',
+        cssVariable: '--w-color-surface-alert-modal-danger',
+      },
+      'surface-alert-danger': {
+        value: 'var(--w-color-critical-200)',
+        bgUtility: 'w-bg-surface-alert-danger',
+        textUtility: 'w-text-surface-alert-danger',
+        cssVariable: '--w-color-surface-alert-danger',
+      },
+    },
+  },
+  {
+    label: 'Text',
+    tokens: {
+      'text-button': {
+        value: 'var(--w-color-white)',
+        bgUtility: 'w-bg-text-button',
+        textUtility: 'w-text-text-button',
+        cssVariable: '--w-color-text-button',
+      },
+      'text-label-menus-default': {
+        value: 'var(--w-color-white-80)',
+        bgUtility: 'w-bg-text-label-menus-default',
+        textUtility: 'w-text-text-label-menus-default',
+        cssVariable: '--w-color-text-label-menus-default',
+      },
+      'text-label-menus-active': {
+        value: 'var(--w-color-white)',
+        bgUtility: 'w-bg-text-label-menus-active',
+        textUtility: 'w-text-text-label-menus-active',
+        cssVariable: '--w-color-text-label-menus-active',
+      },
+      'text-label': {
+        value: 'var(--w-color-primary)',
+        bgUtility: 'w-bg-text-label',
+        textUtility: 'w-text-text-label',
+        cssVariable: '--w-color-text-label',
+      },
+      'text-context': {
+        value: 'var(--w-color-grey-600)',
+        bgUtility: 'w-bg-text-context',
+        textUtility: 'w-text-text-context',
+        cssVariable: '--w-color-text-context',
+      },
+      'text-meta': {
+        value: 'var(--w-color-grey-400)',
+        bgUtility: 'w-bg-text-meta',
+        textUtility: 'w-text-text-meta',
+        cssVariable: '--w-color-text-meta',
+      },
+      'text-placeholder': {
+        value: 'var(--w-color-grey-400)',
+        bgUtility: 'w-bg-text-placeholder',
+        textUtility: 'w-text-text-placeholder',
+        cssVariable: '--w-color-text-placeholder',
+      },
+      'text-link-default': {
+        value: 'var(--w-color-secondary)',
+        bgUtility: 'w-bg-text-link-default',
+        textUtility: 'w-text-text-link-default',
+        cssVariable: '--w-color-text-link-default',
+      },
+      'text-link-hover': {
+        value: 'var(--w-color-secondary-400)',
+        bgUtility: 'w-bg-text-link-hover',
+        textUtility: 'w-text-text-link-hover',
+        cssVariable: '--w-color-text-link-hover',
+      },
+      'text-button-outline-default': {
+        value: 'var(--w-color-secondary)',
+        bgUtility: 'w-bg-text-button-outline-default',
+        textUtility: 'w-text-text-button-outline-default',
+        cssVariable: '--w-color-text-button-outline-default',
+      },
+      'text-highlight': {
+        value: 'var(--w-color-secondary-75)',
+        bgUtility: 'w-bg-text-highlight',
+        textUtility: 'w-text-text-highlight',
+        cssVariable: '--w-color-text-highlight',
+      },
+    },
+  },
+  {
+    label: 'Icons',
+    tokens: {
+      'icon-menus-default': {
+        value: 'var(--w-color-white-80)',
+        bgUtility: 'w-bg-icon-menus-default',
+        textUtility: 'w-text-icon-menus-default',
+        cssVariable: '--w-color-icon-menus-default',
+      },
+      'icon-primary': {
+        value: 'var(--w-color-primary)',
+        bgUtility: 'w-bg-icon-primary',
+        textUtility: 'w-text-icon-primary',
+        cssVariable: '--w-color-icon-primary',
+      },
+      'icon-primary-hover': {
+        value: 'var(--w-color-primary-200)',
+        bgUtility: 'w-bg-icon-primary-hover',
+        textUtility: 'w-text-icon-primary-hover',
+        cssVariable: '--w-color-icon-primary-hover',
+      },
+      'icon-secondary': {
+        value: 'var(--w-color-grey-400)',
+        bgUtility: 'w-bg-icon-secondary',
+        textUtility: 'w-text-icon-secondary',
+        cssVariable: '--w-color-icon-secondary',
+      },
+      'icon-secondary-hover': {
+        value: 'var(--w-color-primary-200)',
+        bgUtility: 'w-bg-icon-secondary-hover',
+        textUtility: 'w-text-icon-secondary-hover',
+        cssVariable: '--w-color-icon-secondary-hover',
+      },
+      'icon-alert-modal-information': {
+        value: 'var(--w-color-info-100)',
+        bgUtility: 'w-bg-icon-alert-modal-information',
+        textUtility: 'w-text-icon-alert-modal-information',
+        cssVariable: '--w-color-icon-alert-modal-information',
+      },
+      'icon-alert-modal-confirmation': {
+        value: 'var(--w-color-positive-100)',
+        bgUtility: 'w-bg-icon-alert-modal-confirmation',
+        textUtility: 'w-text-icon-alert-modal-confirmation',
+        cssVariable: '--w-color-icon-alert-modal-confirmation',
+      },
+      'icon-alert-modal-warning': {
+        value: 'var(--w-color-warning-100)',
+        bgUtility: 'w-bg-icon-alert-modal-warning',
+        textUtility: 'w-text-icon-alert-modal-warning',
+        cssVariable: '--w-color-icon-alert-modal-warning',
+      },
+      'icon-alert-modal-danger': {
+        value: 'var(--w-color-critical-200)',
+        bgUtility: 'w-bg-icon-alert-modal-danger',
+        textUtility: 'w-text-icon-alert-modal-danger',
+        cssVariable: '--w-color-icon-alert-modal-danger',
+      },
+    },
+  },
+  {
+    label: 'Borders',
+    tokens: {
+      'border-furniture': {
+        value: 'var(--w-color-grey-100)',
+        bgUtility: 'w-bg-border-furniture',
+        textUtility: 'w-text-border-furniture',
+        cssVariable: '--w-color-border-furniture',
+      },
+      'border-dashed-block': {
+        value: 'var(--w-color-grey-100)',
+        bgUtility: 'w-bg-border-dashed-block',
+        textUtility: 'w-text-border-dashed-block',
+        cssVariable: '--w-color-border-dashed-block',
+      },
+      'border-button-small-outline-default': {
+        value: 'var(--w-color-grey-150)',
+        bgUtility: 'w-bg-border-button-small-outline-default',
+        textUtility: 'w-text-border-button-small-outline-default',
+        cssVariable: '--w-color-border-button-small-outline-default',
+      },
+      'border-field-default': {
+        value: 'var(--w-color-grey-150)',
+        bgUtility: 'w-bg-border-field-default',
+        textUtility: 'w-text-border-field-default',
+        cssVariable: '--w-color-border-field-default',
+      },
+      'border-field-inactive': {
+        value: 'var(--w-color-grey-150)',
+        bgUtility: 'w-bg-border-field-inactive',
+        textUtility: 'w-text-border-field-inactive',
+        cssVariable: '--w-color-border-field-inactive',
+      },
+      'border-field-hover': {
+        value: 'var(--w-color-grey-200)',
+        bgUtility: 'w-bg-border-field-hover',
+        textUtility: 'w-text-border-field-hover',
+        cssVariable: '--w-color-border-field-hover',
+      },
+      'border-button-outline-default': {
+        value: 'var(--w-color-secondary)',
+        bgUtility: 'w-bg-border-button-outline-default',
+        textUtility: 'w-text-border-button-outline-default',
+        cssVariable: '--w-color-border-button-outline-default',
+      },
+    },
+  },
+  {
+    label: 'Misc',
+    tokens: {
+      'wagtail-logo-circle': {
+        value: 'var(--w-color-white-10)',
+        bgUtility: 'w-bg-wagtail-logo-circle',
+        textUtility: 'w-text-wagtail-logo-circle',
+        cssVariable: '--w-color-wagtail-logo-circle',
+      },
+      'wagtail-logo-bird-hover': {
+        value: 'var(--w-color-black)',
+        bgUtility: 'w-bg-wagtail-logo-bird-hover',
+        textUtility: 'w-text-wagtail-logo-bird-hover',
+        cssVariable: '--w-color-wagtail-logo-bird-hover',
+      },
+      'focus': focusToken,
+    },
+  },
+];
+
+/** @type {ThemeCategory[]} */
+const dark = [
+  {
+    label: 'Surfaces - General',
+    tokens: {
+      'surface-page': {
+        value: 'var(--w-color-grey-600)',
+        bgUtility: 'w-bg-surface-page',
+        textUtility: 'w-text-surface-page',
+        cssVariable: '--w-color-surface-page',
+      },
+      'surface-field': {
+        value: 'var(--w-color-grey-600)',
+        bgUtility: 'w-bg-surface-field',
+        textUtility: 'w-text-surface-field',
+        cssVariable: '--w-color-surface-field',
+      },
+      'surface-field-inactive': {
+        value: 'var(--w-color-grey-500)',
+        bgUtility: 'w-bg-surface-field-inactive',
+        textUtility: 'w-text-surface-field-inactive',
+        cssVariable: '--w-color-surface-field-inactive',
+      },
+      'surface-header': {
+        value: 'var(--w-color-grey-600)',
+        bgUtility: 'w-bg-surface-header',
+        textUtility: 'w-text-surface-header',
+        cssVariable: '--w-color-surface-header',
+      },
+      'surface-menus': {
+        value: 'var(--w-color-grey-500)',
+        bgUtility: 'w-bg-surface-menus',
+        textUtility: 'w-text-surface-menus',
+        cssVariable: '--w-color-surface-menus',
+      },
+      'surface-menu-item-active': {
+        value: 'var(--w-color-grey-600)',
+        bgUtility: 'w-bg-surface-menu-item-active',
+        textUtility: 'w-text-surface-menu-item-active',
+        cssVariable: '--w-color-surface-menu-item-active',
+      },
+      'surface-tooltip': {
+        value: 'var(--w-color-grey-500)',
+        bgUtility: 'w-bg-surface-tooltip',
+        textUtility: 'w-text-surface-tooltip',
+        cssVariable: '--w-color-surface-tooltip',
+      },
+      'surface-button-default': {
+        value: 'var(--w-color-secondary)',
+        bgUtility: 'w-bg-surface-button-default',
+        textUtility: 'w-text-surface-button-default',
+        cssVariable: '--w-color-surface-button-default',
+      },
+      'surface-button-hover': {
+        value: 'var(--w-color-secondary-400)',
+        bgUtility: 'w-bg-surface-button-hover',
+        textUtility: 'w-text-surface-button-hover',
+        cssVariable: '--w-color-surface-button-hover',
+      },
+      'surface-button-inactive': {
+        value: 'var(--w-color-grey-400)',
+        bgUtility: 'w-bg-surface-button-inactive',
+        textUtility: 'w-text-surface-button-inactive',
+        cssVariable: '--w-color-surface-button-inactive',
+      },
+      'surface-button-outline-hover': {
+        value: 'var(--w-color-grey-500)',
+        bgUtility: 'w-bg-surface-button-outline-hover',
+        textUtility: 'w-text-surface-button-outline-hover',
+        cssVariable: '--w-color-surface-button-outline-hover',
+      },
+      'surface-panel-information': {
+        value: 'var(--w-color-info-50)',
+        bgUtility: 'w-bg-surface-panel-information',
+        textUtility: 'w-text-surface-panel-information',
+        cssVariable: '--w-color-surface-panel-information',
+      },
+    },
+  },
+  {
+    label: 'Surfaces - Alerts',
+    tokens: {
+      'surface-alert-modal-information': {
+        value: 'var(--w-color-info-50)',
+        bgUtility: 'w-bg-surface-alert-modal-information',
+        textUtility: 'w-text-surface-alert-modal-information',
+        cssVariable: '--w-color-surface-alert-modal-information',
+      },
+      'surface-alert-information': {
+        value: 'var(--w-color-info-100)',
+        bgUtility: 'w-bg-surface-alert-information',
+        textUtility: 'w-text-surface-alert-information',
+        cssVariable: '--w-color-surface-alert-information',
+      },
+      'surface-alert-modal-confirmation': {
+        value: 'var(--w-color-positive-50)',
+        bgUtility: 'w-bg-surface-alert-modal-confirmation',
+        textUtility: 'w-text-surface-alert-modal-confirmation',
+        cssVariable: '--w-color-surface-alert-modal-confirmation',
+      },
+      'surface-alert-confirmation': {
+        value: 'var(--w-color-positive-100)',
+        bgUtility: 'w-bg-surface-alert-confirmation',
+        textUtility: 'w-text-surface-alert-confirmation',
+        cssVariable: '--w-color-surface-alert-confirmation',
+      },
+      'surface-alert-modal-warning': {
+        value: 'var(--w-color-warning-50)',
+        bgUtility: 'w-bg-surface-alert-modal-warning',
+        textUtility: 'w-text-surface-alert-modal-warning',
+        cssVariable: '--w-color-surface-alert-modal-warning',
+      },
+      'surface-alert-warning': {
+        value: 'var(--w-color-warning-100)',
+        bgUtility: 'w-bg-surface-alert-warning',
+        textUtility: 'w-text-surface-alert-warning',
+        cssVariable: '--w-color-surface-alert-warning',
+      },
+      'surface-alert-modal-danger': {
+        value: 'var(--w-color-critical-50)',
+        bgUtility: 'w-bg-surface-alert-modal-danger',
+        textUtility: 'w-text-surface-alert-modal-danger',
+        cssVariable: '--w-color-surface-alert-modal-danger',
+      },
+      'surface-alert-danger': {
+        value: 'var(--w-color-critical-200)',
+        bgUtility: 'w-bg-surface-alert-danger',
+        textUtility: 'w-text-surface-alert-danger',
+        cssVariable: '--w-color-surface-alert-danger',
+      },
+    },
+  },
+  {
+    label: 'Text',
+    tokens: {
+      'text-button': {
+        value: 'var(--w-color-white)',
+        bgUtility: 'w-bg-text-button',
+        textUtility: 'w-text-text-button',
+        cssVariable: '--w-color-text-button',
+      },
+      'text-label-menus-default': {
+        value: 'var(--w-color-white-80)',
+        bgUtility: 'w-bg-text-label-menus-default',
+        textUtility: 'w-text-text-label-menus-default',
+        cssVariable: '--w-color-text-label-menus-default',
+      },
+      'text-label-menus-active': {
+        value: 'var(--w-color-white)',
+        bgUtility: 'w-bg-text-label-menus-active',
+        textUtility: 'w-text-text-label-menus-active',
+        cssVariable: '--w-color-text-label-menus-active',
+      },
+      'text-label': {
+        value: 'var(--w-color-grey-150)',
+        bgUtility: 'w-bg-text-label',
+        textUtility: 'w-text-text-label',
+        cssVariable: '--w-color-text-label',
+      },
+      'text-context': {
+        value: 'var(--w-color-grey-50)',
+        bgUtility: 'w-bg-text-context',
+        textUtility: 'w-text-text-context',
+        cssVariable: '--w-color-text-context',
+      },
+      'text-meta': {
+        value: 'var(--w-color-grey-150)',
+        bgUtility: 'w-bg-text-meta',
+        textUtility: 'w-text-text-meta',
+        cssVariable: '--w-color-text-meta',
+      },
+      'text-placeholder': {
+        value: 'var(--w-color-grey-200)',
+        bgUtility: 'w-bg-text-placeholder',
+        textUtility: 'w-text-text-placeholder',
+        cssVariable: '--w-color-text-placeholder',
+      },
+      'text-link-default': {
+        value: 'var(--w-color-secondary-100)',
+        bgUtility: 'w-bg-text-link-default',
+        textUtility: 'w-text-text-link-default',
+        cssVariable: '--w-color-text-link-default',
+      },
+      'text-link-hover': {
+        value: 'var(--w-color-secondary-75)',
+        bgUtility: 'w-bg-text-link-hover',
+        textUtility: 'w-text-text-link-hover',
+        cssVariable: '--w-color-text-link-hover',
+      },
+      'text-button-outline-default': {
+        value: 'var(--w-color-secondary-100)',
+        bgUtility: 'w-bg-text-button-outline-default',
+        textUtility: 'w-text-text-button-outline-default',
+        cssVariable: '--w-color-text-button-outline-default',
+      },
+      'text-highlight': {
+        value: 'var(--w-color-secondary-400)',
+        bgUtility: 'w-bg-text-highlight',
+        textUtility: 'w-text-text-highlight',
+        cssVariable: '--w-color-text-highlight',
+      },
+    },
+  },
+  {
+    label: 'Icons',
+    tokens: {
+      'icon-menus-default': {
+        value: 'var(--w-color-white-80)',
+        bgUtility: 'w-bg-icon-menus-default',
+        textUtility: 'w-text-icon-menus-default',
+        cssVariable: '--w-color-icon-menus-default',
+      },
+      'icon-primary': {
+        value: 'var(--w-color-grey-150)',
+        bgUtility: 'w-bg-icon-primary',
+        textUtility: 'w-text-icon-primary',
+        cssVariable: '--w-color-icon-primary',
+      },
+      'icon-primary-hover': {
+        value: 'var(--w-color-grey-50)',
+        bgUtility: 'w-bg-icon-primary-hover',
+        textUtility: 'w-text-icon-primary-hover',
+        cssVariable: '--w-color-icon-primary-hover',
+      },
+      'icon-secondary': {
+        value: 'var(--w-color-grey-150)',
+        bgUtility: 'w-bg-icon-secondary',
+        textUtility: 'w-text-icon-secondary',
+        cssVariable: '--w-color-icon-secondary',
+      },
+      'icon-secondary-hover': {
+        value: 'var(--w-color-grey-50)',
+        bgUtility: 'w-bg-icon-secondary-hover',
+        textUtility: 'w-text-icon-secondary-hover',
+        cssVariable: '--w-color-icon-secondary-hover',
+      },
+      'icon-alert-modal-information': {
+        value: 'var(--w-color-info-100)',
+        bgUtility: 'w-bg-icon-alert-modal-information',
+        textUtility: 'w-text-icon-alert-modal-information',
+        cssVariable: '--w-color-icon-alert-modal-information',
+      },
+      'icon-alert-modal-confirmation': {
+        value: 'var(--w-color-positive-100)',
+        bgUtility: 'w-bg-icon-alert-modal-confirmation',
+        textUtility: 'w-text-icon-alert-modal-confirmation',
+        cssVariable: '--w-color-icon-alert-modal-confirmation',
+      },
+      'icon-alert-modal-warning': {
+        value: 'var(--w-color-warning-100)',
+        bgUtility: 'w-bg-icon-alert-modal-warning',
+        textUtility: 'w-text-icon-alert-modal-warning',
+        cssVariable: '--w-color-icon-alert-modal-warning',
+      },
+      'icon-alert-modal-danger': {
+        value: 'var(--w-color-critical-200)',
+        bgUtility: 'w-bg-icon-alert-modal-danger',
+        textUtility: 'w-text-icon-alert-modal-danger',
+        cssVariable: '--w-color-icon-alert-modal-danger',
+      },
+    },
+  },
+  {
+    label: 'Borders',
+    tokens: {
+      'border-furniture': {
+        value: 'var(--w-color-grey-500)',
+        bgUtility: 'w-bg-border-furniture',
+        textUtility: 'w-text-border-furniture',
+        cssVariable: '--w-color-border-furniture',
+      },
+      'border-dashed-block': {
+        value: 'var(--w-color-grey-500)',
+        bgUtility: 'w-bg-border-dashed-block',
+        textUtility: 'w-text-border-dashed-block',
+        cssVariable: '--w-color-border-dashed-block',
+      },
+      'border-button-small-outline-default': {
+        value: 'var(--w-color-grey-400)',
+        bgUtility: 'w-bg-border-button-small-outline-default',
+        textUtility: 'w-text-border-button-small-outline-default',
+        cssVariable: '--w-color-border-button-small-outline-default',
+      },
+      'border-field-default': {
+        value: 'var(--w-color-grey-400)',
+        bgUtility: 'w-bg-border-field-default',
+        textUtility: 'w-text-border-field-default',
+        cssVariable: '--w-color-border-field-default',
+      },
+      'border-field-inactive': {
+        value: 'var(--w-color-grey-500)',
+        bgUtility: 'w-bg-border-field-inactive',
+        textUtility: 'w-text-border-field-inactive',
+        cssVariable: '--w-color-border-field-inactive',
+      },
+      'border-field-hover': {
+        value: 'var(--w-color-grey-200)',
+        bgUtility: 'w-bg-border-field-hover',
+        textUtility: 'w-text-border-field-hover',
+        cssVariable: '--w-color-border-field-hover',
+      },
+      'border-button-outline-default': {
+        value: 'var(--w-color-secondary-100)',
+        bgUtility: 'w-bg-border-button-outline-default',
+        textUtility: 'w-text-border-button-outline-default',
+        cssVariable: '--w-color-border-button-outline-default',
+      },
+    },
+  },
+  {
+    label: 'Misc',
+    tokens: {
+      'wagtail-logo-circle': {
+        value: 'var(--w-color-white-10)',
+        bgUtility: 'w-bg-wagtail-logo-circle',
+        textUtility: 'w-text-wagtail-logo-circle',
+        cssVariable: '--w-color-wagtail-logo-circle',
+      },
+      'wagtail-logo-bird-hover': {
+        value: 'var(--w-color-black)',
+        bgUtility: 'w-bg-wagtail-logo-bird-hover',
+        textUtility: 'w-text-wagtail-logo-bird-hover',
+        cssVariable: '--w-color-wagtail-logo-bird-hover',
+      },
+      'focus': focusToken,
+    },
+  },
+];
+
+module.exports = {
+  light,
+  dark,
+};

client/src/tokens/colorVariables.js

@@ -85,6 +85,19 @@ const generateColorVariables = (colors) => {
   return colorVariables;
 };
 
+const generateThemeColorVariables = (themeCategories) => {
+  const colorVariables = {};
+
+  themeCategories.forEach((category) => {
+    Object.values(category.tokens).forEach((token) => {
+      colorVariables[token.cssVariable] = token.value;
+    });
+  });
+
+  return colorVariables;
+};
+
 module.exports = {
   generateColorVariables,
+  generateThemeColorVariables,
 };

client/src/tokens/colorVariables.test.js

@@ -59,6 +59,10 @@ describe('generateColorVariables', () => {
         "--w-color-grey-50-hue": "calc(var(--w-color-grey-600-hue) + 240)",
         "--w-color-grey-50-lightness": "calc(var(--w-color-grey-600-lightness) + 82%)",
         "--w-color-grey-50-saturation": "calc(var(--w-color-grey-600-saturation) + 12.5%)",
+        "--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-500-hue": "var(--w-color-grey-600-hue)",
+        "--w-color-grey-500-lightness": "calc(var(--w-color-grey-600-lightness) + 5.1%)",
+        "--w-color-grey-500-saturation": "var(--w-color-grey-600-saturation)",
         "--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-600-hue": "0",
         "--w-color-grey-600-lightness": "14.9%",

client/src/tokens/colors.js

@@ -39,6 +39,15 @@ const colors = {
       usage: 'Body copy, user content',
       contrastText: 'white',
     },
+    500: {
+      hex: '#333333',
+      hsl: 'hsl(0 0% 20%)',
+      bgUtility: 'w-bg-grey-500',
+      textUtility: 'w-text-grey-500',
+      cssVariable: '--w-color-grey-500',
+      usage: 'Panels, dividers in dark mode',
+      contrastText: 'white',
+    },
     400: {
       hex: '#5C5C5C',
       hsl: 'hsl(0 0% 36.1%)',
@@ -224,7 +233,7 @@ const colors = {
       contrastText: 'primary',
     },
     50: {
-      hex: '#FAECD5',
+      hex: '#FFF5D8',
       hsl: 'hsl(37.3 78.7% 90.8%)',
       bgUtility: 'w-bg-warning-50',
       textUtility: 'w-text-warning-50',

client/src/tokens/colors.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import colors, { Hues, Shade } from './colors';
+import colorThemes, { Token, ThemeCategory } from './colorThemes';
 import { generateColorVariables } from './colorVariables';
 
 const description = `
@@ -85,6 +86,50 @@ export const ColorPalette = () => (
   </>
 );
 
+const TokenSwatch = ({ name, token }: { name: string; token: Token }) => (
+  <div className="w-shadow w-border w-border-border-furniture w-rounded w-w-36 w-p-2.5">
+    <div
+      className={`w-w-12 w-h-10 w-rounded ${token.bgUtility}${
+        token.value.includes('white') || token.value.includes('grey-600')
+          ? ' w-border w-border-border-furniture'
+          : ''
+      }`}
+    />
+    <h4 className="w-label-3">{name}</h4>
+    <p className="w-help-text">
+      {token.value.replace('var(--w-color-', '').replace(')', '')}
+    </p>
+  </div>
+);
+
+const CategorySwatches = ({ category }: { category: ThemeCategory }) => (
+  <div key={category.label}>
+    <h3 className="w-h3">{category.label}</h3>
+    <div className="w-grid w-grid-flow-col w-gap-2.5">
+      {Object.entries(category.tokens).map(([name, token]) => (
+        <TokenSwatch key={token} name={name} token={token} />
+      ))}
+    </div>
+  </div>
+);
+
+export const ColorThemes = () => (
+  <>
+    <section className="w-bg-surface-page w-pt-6 w-mt-6 -w-mx-4 w-px-4">
+      <h2 className="w-h2">Light</h2>
+      {colorThemes.light.map((category: ThemeCategory) => (
+        <CategorySwatches key={category.label} category={category} />
+      ))}
+    </section>
+    <section className="w-bg-surface-page w-pt-6 w-mt-6 -w-mx-4 w-px-4 w-theme-dark">
+      <h2 className="w-h2">Dark</h2>
+      {colorThemes.dark.map((category: ThemeCategory) => (
+        <CategorySwatches key={category.label} category={category} />
+      ))}
+    </section>
+  </>
+);
+
 const variablesMap = Object.entries(generateColorVariables(colors))
   .map(([cssVar, val]) => `${cssVar}: ${val};`)
   .join('');

client/tailwind.config.js

@@ -4,7 +4,11 @@ const vanillaRTL = require('tailwindcss-vanilla-rtl');
  * Design Tokens
  */
 const colors = require('./src/tokens/colors');
-const { generateColorVariables } = require('./src/tokens/colorVariables');
+const {
+  generateColorVariables,
+  generateThemeColorVariables,
+} = require('./src/tokens/colorVariables');
+const colorThemes = require('./src/tokens/colorThemes');
 const {
   fontFamily,
   fontSize,
@@ -43,6 +47,14 @@ const themeColors = Object.fromEntries(
   }),
 );
 
+const lightThemeColors = colorThemes.light.reduce((colorTokens, category) => {
+  Object.entries(category.tokens).forEach(([name, token]) => {
+    // eslint-disable-next-line no-param-reassign
+    colorTokens[name] = `var(${token.cssVariable})`;
+  });
+  return colorTokens;
+}, {});
+
 /**
  * Root Tailwind config, reusable for other projects.
  */
@@ -54,14 +66,17 @@ module.exports = {
     },
     colors: {
       ...themeColors,
-      // Fades of white and black are not customisable.
+      ...lightThemeColors,
-      'white-15': 'rgba(255, 255, 255, 0.15)',
+      'white-10': 'var(--w-color-white-10)',
-      'white-50': 'rgba(255, 255, 255, 0.50)',
+      'white-15': 'var(--w-color-white-15)',
-      'white-80': 'rgba(255, 255, 255, 0.80)',
+      'white-50': 'var(--w-color-white-50)',
-      'black-10': 'rgba(0, 0, 0, 0.10)',
+      'white-80': 'var(--w-color-white-80)',
-      'black-20': 'rgba(0, 0, 0, 0.20)',
+      'black-5': 'var(--w-color-black-5)',
-      'black-35': 'rgba(0, 0, 0, 0.35)',
+      'black-10': 'var(--w-color-black-10)',
-      'black-50': 'rgba(0, 0, 0, 0.50)',
+      'black-20': 'var(--w-color-black-20)',
+      'black-25': 'var(--w-color-black-25)',
+      'black-35': 'var(--w-color-black-35)',
+      'black-50': 'var(--w-color-black-50)',
       // Color keywords.
       'inherit': 'inherit',
       'current': 'currentColor',
@@ -150,8 +165,25 @@ module.exports = {
         ':root, :host': {
           '--w-font-sans': fontFamily.sans.join(', '),
           '--w-font-mono': fontFamily.mono.join(', '),
+          '--w-color-white-10': 'rgba(255, 255, 255, 0.10)',
+          '--w-color-white-15': 'rgba(255, 255, 255, 0.15)',
+          '--w-color-white-50': 'rgba(255, 255, 255, 0.50)',
+          '--w-color-white-80': 'rgba(255, 255, 255, 0.80)',
+          '--w-color-black-5': 'rgba(0, 0, 0, 0.05)',
+          '--w-color-black-10': 'rgba(0, 0, 0, 0.10)',
+          '--w-color-black-20': 'rgba(0, 0, 0, 0.20)',
+          '--w-color-black-25': 'rgba(0, 0, 0, 0.25)',
+          '--w-color-black-35': 'rgba(0, 0, 0, 0.35)',
+          '--w-color-black-50': 'rgba(0, 0, 0, 0.50)',
           ...generateColorVariables(colors),
+          ...generateThemeColorVariables(colorThemes.light),
         },
+        '.w-theme-system': {
+          '@media (prefers-color-scheme: dark)': generateThemeColorVariables(
+            colorThemes.dark,
+          ),
+        },
+        '.w-theme-dark': generateThemeColorVariables(colorThemes.dark),
       });
     }),
     /** Support for aria-expanded=true variant */