lintje 0.3.0 → 0.4.0

package/dist-elements/tokens.json

@@ -0,0 +1,1244 @@
+{
+  "tokens": [
+    {
+      "name": "--font-ui",
+      "comment": ""
+    },
+    {
+      "name": "--font-mono",
+      "comment": ""
+    },
+    {
+      "name": "--text-dashboard",
+      "comment": ""
+    },
+    {
+      "name": "--text-h1",
+      "comment": ""
+    },
+    {
+      "name": "--text-h1-mobile",
+      "comment": ""
+    },
+    {
+      "name": "--text-h1-display",
+      "comment": ""
+    },
+    {
+      "name": "--text-h2",
+      "comment": ""
+    },
+    {
+      "name": "--text-tile-title",
+      "comment": ""
+    },
+    {
+      "name": "--text-tile-sub",
+      "comment": ""
+    },
+    {
+      "name": "--text-kpi",
+      "comment": ""
+    },
+    {
+      "name": "--text-kpi-mobile",
+      "comment": ""
+    },
+    {
+      "name": "--text-kpi-secondary",
+      "comment": ""
+    },
+    {
+      "name": "--text-body",
+      "comment": ""
+    },
+    {
+      "name": "--text-translation",
+      "comment": "The text being translated and its translation: larger than body, read at a glance."
+    },
+    {
+      "name": "--text-ui",
+      "comment": ""
+    },
+    {
+      "name": "--text-small",
+      "comment": ""
+    },
+    {
+      "name": "--text-meta",
+      "comment": ""
+    },
+    {
+      "name": "--text-table",
+      "comment": ""
+    },
+    {
+      "name": "--text-table-head",
+      "comment": ""
+    },
+    {
+      "name": "--text-axis",
+      "comment": ""
+    },
+    {
+      "name": "--label-size",
+      "comment": ""
+    },
+    {
+      "name": "--label-weight",
+      "comment": ""
+    },
+    {
+      "name": "--label-tracking",
+      "comment": ""
+    },
+    {
+      "name": "--kpi-tracking",
+      "comment": ""
+    },
+    {
+      "name": "--space-1",
+      "comment": ""
+    },
+    {
+      "name": "--space-2",
+      "comment": ""
+    },
+    {
+      "name": "--space-3",
+      "comment": ""
+    },
+    {
+      "name": "--space-4",
+      "comment": ""
+    },
+    {
+      "name": "--space-5",
+      "comment": ""
+    },
+    {
+      "name": "--space-6",
+      "comment": ""
+    },
+    {
+      "name": "--space-8",
+      "comment": ""
+    },
+    {
+      "name": "--space-10",
+      "comment": ""
+    },
+    {
+      "name": "--h-topbar",
+      "comment": ""
+    },
+    {
+      "name": "--h-contextbar",
+      "comment": ""
+    },
+    {
+      "name": "--h-mobile-header",
+      "comment": ""
+    },
+    {
+      "name": "--h-control",
+      "comment": ""
+    },
+    {
+      "name": "--h-button",
+      "comment": ""
+    },
+    {
+      "name": "--h-button-compact",
+      "comment": ""
+    },
+    {
+      "name": "--h-button-chrome",
+      "comment": ""
+    },
+    {
+      "name": "--h-icon-button",
+      "comment": ""
+    },
+    {
+      "name": "--h-chip",
+      "comment": ""
+    },
+    {
+      "name": "--h-chip-field",
+      "comment": ""
+    },
+    {
+      "name": "--h-nav-row",
+      "comment": ""
+    },
+    {
+      "name": "--h-nav-head",
+      "comment": ""
+    },
+    {
+      "name": "--h-table-row",
+      "comment": ""
+    },
+    {
+      "name": "--h-touch",
+      "comment": ""
+    },
+    {
+      "name": "--h-target",
+      "comment": "The smallest pointer target. A box that draws smaller reaches it through a transparent hit area (`::after`, negative inset)."
+    },
+    {
+      "name": "--h-target-text",
+      "comment": "A link in a list of text links: one line of text, the WCAG AA floor, as on rijksoverheid.nl."
+    },
+    {
+      "name": "--h-option",
+      "comment": "The two dense exceptions to the target: a date picker day cell and a listbox option row."
+    },
+    {
+      "name": "--h-sparkline",
+      "comment": "The sparkline of a KPI: a line and its area under the figure, with no axes."
+    },
+    {
+      "name": "--w-nav",
+      "comment": ""
+    },
+    {
+      "name": "--w-rail",
+      "comment": ""
+    },
+    {
+      "name": "--w-text",
+      "comment": ""
+    },
+    {
+      "name": "--w-message",
+      "comment": ""
+    },
+    {
+      "name": "--w-translator-language",
+      "comment": "A language choice in the translator's bar."
+    },
+    {
+      "name": "--w-content",
+      "comment": "The widest the page's content gets. A host sets `--lintje-content-width` to change it."
+    },
+    {
+      "name": "--nav-edge",
+      "comment": ""
+    },
+    {
+      "name": "--w-ribbon",
+      "comment": "The ribbon is the unit: 48 px, 40 on a phone. Both bars are in rem, so they grow with the reader's text size."
+    },
+    {
+      "name": "--h-logobar",
+      "comment": ""
+    },
+    {
+      "name": "--h-navbar",
+      "comment": "The top bar's height: what pins under the bar measures `--h-topbar`."
+    },
+    {
+      "name": "--hero-overlap",
+      "comment": "How far what follows the hero stands over its band's lower edge."
+    },
+    {
+      "name": "--w-hero-aside",
+      "comment": "The widest the picture beside the hero's text gets: four of the twelve columns at 1440."
+    },
+    {
+      "name": "--w-card",
+      "comment": "The narrowest a card gets in a card list before the list drops a column."
+    },
+    {
+      "name": "--w-card-wide",
+      "comment": "The same for a horizontal card, whose picture takes a column of its own."
+    },
+    {
+      "name": "--w-card-media",
+      "comment": ""
+    },
+    {
+      "name": "--w-card-logo",
+      "comment": ""
+    },
+    {
+      "name": "--w-card-logo-wide",
+      "comment": ""
+    },
+    {
+      "name": "--w-gallery-thumb",
+      "comment": "The narrowest thumbnail under a gallery's large picture."
+    },
+    {
+      "name": "--w-footer-column",
+      "comment": "The narrowest column of links in a footer before the columns stand under each other."
+    },
+    {
+      "name": "--page-pad-y",
+      "comment": ""
+    },
+    {
+      "name": "--page-pad-x",
+      "comment": ""
+    },
+    {
+      "name": "--page-gutter",
+      "comment": "What a full-width bar or the content adds to its side padding so what stands in it keeps to `--w-content`; the percentage is taken of the box the bar stands in."
+    },
+    {
+      "name": "--grid-gutter",
+      "comment": ""
+    },
+    {
+      "name": "--tile-pad-y",
+      "comment": ""
+    },
+    {
+      "name": "--tile-pad-x",
+      "comment": ""
+    },
+    {
+      "name": "--chart-h-main",
+      "comment": ""
+    },
+    {
+      "name": "--chart-h-small",
+      "comment": ""
+    },
+    {
+      "name": "--chart-h-expanded",
+      "comment": ""
+    },
+    {
+      "name": "--h-sticky",
+      "comment": "Sticky context = top bar + summary bar."
+    },
+    {
+      "name": "--radius",
+      "comment": ""
+    },
+    {
+      "name": "--radius-round",
+      "comment": ""
+    },
+    {
+      "name": "--shadow-sticky",
+      "comment": ""
+    },
+    {
+      "name": "--shadow-popover",
+      "comment": ""
+    },
+    {
+      "name": "--shadow-nav",
+      "comment": ""
+    },
+    {
+      "name": "--shadow-chart-hover",
+      "comment": ""
+    },
+    {
+      "name": "--shadow-scroll-start",
+      "comment": ""
+    },
+    {
+      "name": "--shadow-scroll-end",
+      "comment": ""
+    },
+    {
+      "name": "--color-overlay-page",
+      "comment": ""
+    },
+    {
+      "name": "--color-overlay-nav",
+      "comment": ""
+    },
+    {
+      "name": "--focus-width",
+      "comment": ""
+    },
+    {
+      "name": "--focus-offset",
+      "comment": ""
+    },
+    {
+      "name": "--ease-in-motion",
+      "comment": ""
+    },
+    {
+      "name": "--ease-out-motion",
+      "comment": ""
+    },
+    {
+      "name": "--dur-base",
+      "comment": ""
+    },
+    {
+      "name": "--dur-hover",
+      "comment": ""
+    },
+    {
+      "name": "--dur-popover",
+      "comment": ""
+    },
+    {
+      "name": "--dur-submenu",
+      "comment": ""
+    },
+    {
+      "name": "--dur-toast",
+      "comment": ""
+    },
+    {
+      "name": "--dur-scrim",
+      "comment": ""
+    },
+    {
+      "name": "--dur-rail",
+      "comment": ""
+    },
+    {
+      "name": "--dur-collapse",
+      "comment": ""
+    },
+    {
+      "name": "--dur-modal",
+      "comment": ""
+    },
+    {
+      "name": "--dur-sheet",
+      "comment": ""
+    },
+    {
+      "name": "--dur-kpi",
+      "comment": ""
+    },
+    {
+      "name": "--dur-badge",
+      "comment": ""
+    },
+    {
+      "name": "--dur-draw",
+      "comment": ""
+    },
+    {
+      "name": "--dur-data-label",
+      "comment": ""
+    },
+    {
+      "name": "--dur-layer",
+      "comment": ""
+    },
+    {
+      "name": "--dur-skeleton",
+      "comment": ""
+    },
+    {
+      "name": "--dur-wave",
+      "comment": ""
+    },
+    {
+      "name": "--color-bg-page",
+      "comment": ""
+    },
+    {
+      "name": "--color-bg-surface",
+      "comment": ""
+    },
+    {
+      "name": "--color-bg-subtle",
+      "comment": ""
+    },
+    {
+      "name": "--color-bg-title",
+      "comment": ""
+    },
+    {
+      "name": "--color-bg-filter",
+      "comment": "Between steps 2 and 3: on the cool-grey ramp neutral-2 sits too close to the page to read as a band."
+    },
+    {
+      "name": "--color-bg-selected",
+      "comment": ""
+    },
+    {
+      "name": "--color-bg-inset",
+      "comment": ""
+    },
+    {
+      "name": "--color-text-primary",
+      "comment": ""
+    },
+    {
+      "name": "--color-text-secondary",
+      "comment": ""
+    },
+    {
+      "name": "--color-text-muted",
+      "comment": ""
+    },
+    {
+      "name": "--color-text-inverse",
+      "comment": ""
+    },
+    {
+      "name": "--color-text-disabled",
+      "comment": ""
+    },
+    {
+      "name": "--color-text-placeholder",
+      "comment": "A placeholder must stay readable: 4.5:1 on the surface in both modes."
+    },
+    {
+      "name": "--color-text-on-fill",
+      "comment": ""
+    },
+    {
+      "name": "--color-text-on-light-fill",
+      "comment": ""
+    },
+    {
+      "name": "--color-qr-bg",
+      "comment": ""
+    },
+    {
+      "name": "--color-qr-fg",
+      "comment": ""
+    },
+    {
+      "name": "--color-border-default",
+      "comment": ""
+    },
+    {
+      "name": "--color-border-strong",
+      "comment": ""
+    },
+    {
+      "name": "--color-border-filter",
+      "comment": ""
+    },
+    {
+      "name": "--color-border-heavy",
+      "comment": ""
+    },
+    {
+      "name": "--color-border-field",
+      "comment": "The resting edge of a field box: 3:1 (WCAG 1.4.11) on the surface and the filter band."
+    },
+    {
+      "name": "--color-border-choice",
+      "comment": "The 2 px edge of a checkbox and a radio: 3:1 on the surface; dark re-points it."
+    },
+    {
+      "name": "--color-border-popover",
+      "comment": "In dark a sheet is the same #282828 as the tile under it, so this line separates them."
+    },
+    {
+      "name": "--color-border-suggestion",
+      "comment": "A DASHED outline (a suggestion, an uncertain term): neutral-5, because a dashed line has half the ink of a solid one and must still reach 3:1."
+    },
+    {
+      "name": "--color-action-primary",
+      "comment": ""
+    },
+    {
+      "name": "--color-action-primary-hover",
+      "comment": ""
+    },
+    {
+      "name": "--color-action-primary-text",
+      "comment": ""
+    },
+    {
+      "name": "--color-action-primary-border",
+      "comment": "A primary fill in dark is a dark box on a dark page (WCAG 1.4.11): it gets a tint border."
+    },
+    {
+      "name": "--color-action-secondary-border",
+      "comment": ""
+    },
+    {
+      "name": "--color-action-danger",
+      "comment": "The destructive fill: the error red, white text on it (5.01:1). Hover is darker in light, lighter in dark. In dark the border is a tint, because #D52B1E is 2.94:1 on #282828."
+    },
+    {
+      "name": "--color-action-danger-hover",
+      "comment": ""
+    },
+    {
+      "name": "--color-action-danger-border",
+      "comment": ""
+    },
+    {
+      "name": "--color-action-danger-text",
+      "comment": "The word of the outlined danger button; dark re-points it (the red is 2.94:1 on #282828)."
+    },
+    {
+      "name": "--color-link",
+      "comment": ""
+    },
+    {
+      "name": "--color-link-hover",
+      "comment": ""
+    },
+    {
+      "name": "--color-link-on-status",
+      "comment": "A link on a status background: in dark no tint of the primary reaches 4.5:1 there, so it reads in the text colour. It is bold and underlined, so colour never carried it alone."
+    },
+    {
+      "name": "--color-accent",
+      "comment": "The accent splits in three, because a fill, a line and a word have different floors: fill (the primary), line (non-text, 3:1: `--primary-tint` in dark) and text (4.5:1: `--primary-tint-text` in dark). A word in the line token fails: it is sized for 3:1."
+    },
+    {
+      "name": "--color-accent-line",
+      "comment": ""
+    },
+    {
+      "name": "--color-accent-text",
+      "comment": ""
+    },
+    {
+      "name": "--color-focus",
+      "comment": ""
+    },
+    {
+      "name": "--color-attention",
+      "comment": ""
+    },
+    {
+      "name": "--color-success",
+      "comment": ""
+    },
+    {
+      "name": "--color-warning",
+      "comment": ""
+    },
+    {
+      "name": "--color-error",
+      "comment": ""
+    },
+    {
+      "name": "--color-info",
+      "comment": ""
+    },
+    {
+      "name": "--color-warning-bg",
+      "comment": ""
+    },
+    {
+      "name": "--color-attention-bg",
+      "comment": ""
+    },
+    {
+      "name": "--color-error-bg",
+      "comment": ""
+    },
+    {
+      "name": "--color-info-bg",
+      "comment": ""
+    },
+    {
+      "name": "--color-success-bg",
+      "comment": ""
+    },
+    {
+      "name": "--color-attention-line",
+      "comment": "A status mark on its own tint: the status colour, nudged to 3:1 where it falls short."
+    },
+    {
+      "name": "--color-error-line",
+      "comment": ""
+    },
+    {
+      "name": "--color-info-line",
+      "comment": ""
+    },
+    {
+      "name": "--color-success-line",
+      "comment": ""
+    },
+    {
+      "name": "--color-error-text",
+      "comment": "A status WORD at 4.5:1 on the surface and on `--color-bg-subtle`: the red itself, the green 5 % darker (4.13:1 on neutral-2); dark lifts both. A glyph or an edge keeps the line token."
+    },
+    {
+      "name": "--color-success-text",
+      "comment": ""
+    },
+    {
+      "name": "--color-nav-bg",
+      "comment": ""
+    },
+    {
+      "name": "--color-nav-text",
+      "comment": ""
+    },
+    {
+      "name": "--color-nav-text-sub",
+      "comment": ""
+    },
+    {
+      "name": "--color-nav-hover",
+      "comment": ""
+    },
+    {
+      "name": "--color-nav-active",
+      "comment": ""
+    },
+    {
+      "name": "--color-nav-active-edge",
+      "comment": ""
+    },
+    {
+      "name": "--color-nav-active-text",
+      "comment": ""
+    },
+    {
+      "name": "--color-nav-line",
+      "comment": ""
+    },
+    {
+      "name": "--color-nav-disabled",
+      "comment": ""
+    },
+    {
+      "name": "--color-nav-badge-bg",
+      "comment": ""
+    },
+    {
+      "name": "--color-nav-badge-text",
+      "comment": ""
+    },
+    {
+      "name": "--color-nav-avatar-bg",
+      "comment": "The avatar is white with black initials wherever it stands, in both modes."
+    },
+    {
+      "name": "--color-nav-avatar-text",
+      "comment": ""
+    },
+    {
+      "name": "--color-focus-on-theme",
+      "comment": "Orange fails on the theme fill (1.89:1 on #01689B, 1:1 on #E17000); white reaches 3:1 on all six primaries. Dark re-points it to the orange."
+    },
+    {
+      "name": "--color-nav-environment-bg",
+      "comment": "The theme's ACCENT, not the attention status: on `defensie` the menu is `#E17000` and the status colour made the band disappear. `--accent` is document level only."
+    },
+    {
+      "name": "--color-nav-environment-text",
+      "comment": ""
+    },
+    {
+      "name": "--color-logobar-bg",
+      "comment": "The page's surface in both modes. The navigation bar under it is the menu turned a quarter, on `--color-nav-*`."
+    },
+    {
+      "name": "--color-logobar-text",
+      "comment": ""
+    },
+    {
+      "name": "--color-logo-ribbon",
+      "comment": "The ribbon in the emblem; only the logo re-points it in dark, never lintblauw elsewhere."
+    },
+    {
+      "name": "--color-navbar-hover",
+      "comment": "What marks an entry in that bar. They name the primitives, never `--color-nav-*`: the bar points those at these, and the two would refer to each other."
+    },
+    {
+      "name": "--color-navbar-active",
+      "comment": ""
+    },
+    {
+      "name": "--color-navbar-active-edge",
+      "comment": ""
+    },
+    {
+      "name": "--color-navbar-open-text",
+      "comment": ""
+    },
+    {
+      "name": "--color-hero-bg",
+      "comment": "The start page's band is the primary's wash, so it never reads as the menu. The orange ring misses 3:1 on it; the ring takes the text colour."
+    },
+    {
+      "name": "--color-hero-text",
+      "comment": ""
+    },
+    {
+      "name": "--color-hero-focus",
+      "comment": ""
+    },
+    {
+      "name": "--color-footer-bg",
+      "comment": "The site's foot stands on the menu's own fill, as on rijksoverheid.nl; in dark it follows the menu."
+    },
+    {
+      "name": "--color-footer-text",
+      "comment": ""
+    },
+    {
+      "name": "--color-footer-line",
+      "comment": ""
+    },
+    {
+      "name": "--color-footer-focus",
+      "comment": ""
+    },
+    {
+      "name": "--color-term-bg",
+      "comment": "The box behind a recognised term: the primary's wash; dark re-points it."
+    },
+    {
+      "name": "--color-choice-active-bg",
+      "comment": "The chosen option of a row of options: the primary's wash; dark re-points it."
+    },
+    {
+      "name": "--color-term-line",
+      "comment": "The 2 px line under a term; dark takes the text tint, as the line tint falls short on it."
+    },
+    {
+      "name": "--color-chart-sky-blue",
+      "comment": "One colour per variable, named after the Rijkshuisstijl colour."
+    },
+    {
+      "name": "--color-chart-dark-yellow",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-dark-yellow-text",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-red",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-green",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-mint-green",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-violet",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-orange",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-pink",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-dark-green",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-purple",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-ruby-red",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-yellow",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-dark-brown",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-brown",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-dark-blue",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-light-blue",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-moss-green",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-secondary",
+      "comment": "comparison, context"
+    },
+    {
+      "name": "--color-chart-other",
+      "comment": "\"Overig\""
+    },
+    {
+      "name": "--color-chart-remainder",
+      "comment": "the rest of a whole, e.g. a donut's open part"
+    },
+    {
+      "name": "--color-chart-emphasis",
+      "comment": "trend, threshold, target"
+    },
+    {
+      "name": "--color-chart-grid",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-axis",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-zero",
+      "comment": "The zero line (darker than the grid) and the hatch of missing data carry meaning, so they reach 3:1 on the surface: a fifth of the way from neutral-4 to neutral-5 (3.1:1; 4.0:1 dark)."
+    },
+    {
+      "name": "--color-chart-hatch",
+      "comment": ""
+    },
+    {
+      "name": "--tint-speaker",
+      "comment": "A speaker's colour under a whole fragment: this share of it over the surface, so text keeps its contrast in light and in dark."
+    },
+    {
+      "name": "--color-map-water",
+      "comment": "These map colours stay deliberately neutral so the data is the only colour on the map."
+    },
+    {
+      "name": "--color-map-land",
+      "comment": ""
+    },
+    {
+      "name": "--color-map-border",
+      "comment": ""
+    },
+    {
+      "name": "--color-map-border-data",
+      "comment": "An area with a figure: 3:1 against the land and the lightest class, which are 1.1:1 apart."
+    },
+    {
+      "name": "--color-chart-default",
+      "comment": "The variable a figure draws when its data names none: the first colour of the list, the same decision as `DEFAULT_SERIES_COLOR` in `charts/shared/colors.ts`."
+    },
+    {
+      "name": "--color-chart-sky-blue-tint-2",
+      "comment": "Subdivision of one variable: its colour in its tint ladder, strongest first, on the steps 100 / 75 / 60 / 45 / 30. Every colour carries its ladder, so a figure that brings a colour brings its tints: a renderer names `--color-chart-<colour>` and `--color-chart-<colour>-tint-N`, never a --data-* colour."
+    },
+    {
+      "name": "--color-chart-sky-blue-tint-3",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-sky-blue-tint-4",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-sky-blue-tint-5",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-dark-yellow-tint-2",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-dark-yellow-tint-3",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-dark-yellow-tint-4",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-dark-yellow-tint-5",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-red-tint-2",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-red-tint-3",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-red-tint-4",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-red-tint-5",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-green-tint-2",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-green-tint-3",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-green-tint-4",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-green-tint-5",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-mint-green-tint-2",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-mint-green-tint-3",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-mint-green-tint-4",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-mint-green-tint-5",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-violet-tint-2",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-violet-tint-3",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-violet-tint-4",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-violet-tint-5",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-orange-tint-2",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-orange-tint-3",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-orange-tint-4",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-orange-tint-5",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-pink-tint-2",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-pink-tint-3",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-pink-tint-4",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-pink-tint-5",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-dark-green-tint-2",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-dark-green-tint-3",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-dark-green-tint-4",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-dark-green-tint-5",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-purple-tint-2",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-purple-tint-3",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-purple-tint-4",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-purple-tint-5",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-ruby-red-tint-2",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-ruby-red-tint-3",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-ruby-red-tint-4",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-ruby-red-tint-5",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-yellow-tint-2",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-yellow-tint-3",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-yellow-tint-4",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-yellow-tint-5",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-dark-brown-tint-2",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-dark-brown-tint-3",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-dark-brown-tint-4",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-dark-brown-tint-5",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-brown-tint-2",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-brown-tint-3",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-brown-tint-4",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-brown-tint-5",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-dark-blue-tint-2",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-dark-blue-tint-3",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-dark-blue-tint-4",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-dark-blue-tint-5",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-light-blue-tint-2",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-light-blue-tint-3",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-light-blue-tint-4",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-light-blue-tint-5",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-moss-green-tint-2",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-moss-green-tint-3",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-moss-green-tint-4",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-moss-green-tint-5",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-tint-1",
+      "comment": "The default ladder, for a figure that names no colour: the sky blue's."
+    },
+    {
+      "name": "--color-chart-tint-2",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-tint-3",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-tint-4",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-tint-5",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-seq-1",
+      "comment": "Sequential scale for ordinal classes (heatmap, choropleth), lightest first. A component names these, never a --data-* colour directly."
+    },
+    {
+      "name": "--color-chart-seq-2",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-seq-3",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-seq-4",
+      "comment": ""
+    },
+    {
+      "name": "--color-chart-seq-5",
+      "comment": ""
+    }
+  ]
+}