Add new global CSS variable --w-density-factor

client/tailwind.config.js

@@ -165,6 +165,7 @@ module.exports = {
         ':root, :host': {
           '--w-font-sans': fontFamily.sans.join(', '),
           '--w-font-mono': fontFamily.mono.join(', '),
+          '--w-density-factor': '1',
           ...transparencies,
           ...generateColorVariables(staticColors),
           ...generateThemeColorVariables(colorThemes.light),
@@ -180,6 +181,9 @@ module.exports = {
           ...generateThemeColorVariables(colorThemes.dark),
           'color-scheme': 'dark',
         },
+        '.w-density-snug': {
+          '--w-density-factor': '0.5',
+        },
       });
     }),
     /** Support for aria-expanded=true variant */

docs/advanced_topics/customisation/admin_templates.md

@@ -124,6 +124,29 @@ For static colors, either set each color separately (for example `--w-color-prim
 
 ```
 
+## Custom user interface information density
+
+To customize information density of the admin user interface, inject a CSS file using the hook [](insert_global_admin_css). Set the `--w-density-factor` CSS variable to increase or reduce the UI density. The default value is `1`, the "snug" UI theming uses `0.5`. Here are example overrides:
+
+```css
+:root, :host {
+    /* Reduce the UI density by 20% for users of the default theme. */
+    --w-density-factor: 0.8;
+}
+
+:root, :host {
+    /* Increase the UI density by 20% for users of the default theme. */
+    --w-density-factor: 1.2;
+}
+
+.w-density-snug {
+    /* For snug theme users, set a UI density even lower than vanilla Wagtail. */
+    --w-density-factor: 0.25;
+}
+```
+
+UI components which have been designed to use the `--w-density-factor` will increase in size or spacing accordingly.
+
 ## Specifying a site or page in the branding
 
 The admin interface has a number of variables available to the renderer context that can be used to customize the branding in the admin page. These can be useful for customizing the dashboard on a multi-tenanted Wagtail installation:

docs/contributing/ui_guidelines.md

@@ -54,6 +54,7 @@ For all of our styles, we use:
 -   Global CSS variables for colors, so they can be changed by site implementers.
 -   Global CSS variables for font family, so they can be changed by site implementers.
 -   A `--w-direction-factor` CSS variable, set to `1` by default and `-1` for RTL languages, to allow reversing of calculations of physical values (transforms, background positions) and mirroring of icons and visuals with directional elements like arrows.
+-   The `--w-density-factor` CSS variable, to let users control the information density of the UI. Set to `1` by default, and lower or higher values to reduce or increase the spacing and size of UI elements.
 
 ### Tailwind usage