@canonical/styles-debug

Canonical Debugging styles

This package includes a set of canonical debugging styles that can be used to quickly identify and debug issues in your code. They are not included in the base styles packages, but can be used in conjunction with them. They are deliberately unlayered: an overlay must win over every layered rule.

Getting started

1. Install the package: npm install @canonical/styles-debug
2. Import the styles you need:

/* CSS Import */
/* To import all styles */
@import url("@canonical/styles-debug");

/* To import only certain styles */
@import url("@canonical/styles-debug/baseline-grid");

If using a bundling tool like Vite, you may also directly import the styles in a component file:

import "@canonical/styles-debug"; // import all debug styles
// import "@canonical/styles-debug/baseline-grid"; // for baseline grid only

Debug utilities

Baseline grid

The baseline grid utility allows you to visualize the baseline grid in your application. To use it, add the with-baseline-grid class to any element. It paints five strict, hard-edged bands per cycle — each baseline row a flat 4px step up in tint, from faint (level 1) to strong (level 5), repeating every five baselines (20px at the 4px default) — so the rhythm and position-within-cycle read at a glance.

The baseline height is shimmed to 4px in the tool itself and is deliberately not read from --baseline-height (which the typography engine derives from the design tokens, currently still 8px). Override --baseline-grid-height to change it, or set --baseline-grid-height: var(--baseline-height) to follow the app's live grid.

Customization

This utility can be customized by setting the following CSS variables:

Example

<link rel="stylesheet" href="https://unpkg.com/@canonical/styles-debug/src/baseline-grid.css">
<style>
    :root {
        --baseline-grid-color: teal;
    }
</style>
<div class="with-baseline-grid">
    <p>Some text</p>
    <p>Some more text</p>
</div>