@scattered-light/loomiere 0.2.0 → 0.4.0

package/README.md

@@ -29,6 +29,8 @@ Every value is a `--sl-` variable, so your own CSS, and component packages such
 | `loomiere check` | Checks contrast of the theme already built. |
 | `loomiere studio` | Opens the brand studio at `http://localhost:4322`. `--export page.html` writes a standalone copy (needs esbuild). |
 | `loomiere lab` | Opens the pair lab at `http://localhost:4321` to pick brand pairs (a background, its text and an accent). |
+| `loomiere figma push` | Builds, then pushes variables and text styles to a Figma file. `--dry-run` reports only. See [figma/README.md](figma/README.md). |
+| `loomiere figma serve` | Serves the build for the Loomiere Figma plugin's Pull from project. |
 
 `--brand <file>`, `--out <dir>` and `--prefix <name>` override the config for one run. `--port <n>` moves studio or lab.
 
@@ -46,16 +48,19 @@ Every value is a `--sl-` variable, so your own CSS, and component packages such
 - `out`: where the theme goes. Default `theme`.
 - `prefix`: the CSS variable prefix. Default `sl`, which is what loomiere-base-ui reads.
 - `exports`: which framework files to write. Default all of them.
+- `figma`: `{ "file": "<Figma URL>" }`, the file `loomiere figma push` writes to.
 
 ## What a build writes
 
 | File | For |
 | --- | --- |
-| `tokens.css` | Every token as a `--sl-` variable, inside `@layer sl.tokens` so your own styles win. Dark mode follows `prefers-color-scheme` or `data-theme="dark"`. Also holds the `.sl-pair-<name>` classes and `data-color` scopes. |
+| `tokens.css` | Every token as a `--sl-` variable, inside `@layer sl.tokens` so your own styles win. Dark mode and high contrast follow the system, or `data-theme` on `<html>`: `light`, `dark`, `light-high-contrast`, `dark-high-contrast`, or a color vision theme (`deuteranopia`, `protanopia`, `tritanopia`, `achromatopsia`). Also holds the `.sl-pair-<name>` classes, `data-color` scopes, `data-status` (info, success, warning, error) and `data-emphasis` levels. |
 | `utilities.css` | `.text-style-*`, `.icon-*`, `.focus-ring`, `.hide-on-*`. |
 | `tokens.js`, `tokens.d.ts` | Resolved values for JavaScript. |
 | `tokens.json`, `pairs.json` | The token catalog and every palette color against every other, for docs and agents. |
 | `exports/` | DTCG JSON, Figma variables, Tailwind v4, shadcn/ui, MUI, Chakra v3, AG Grid 31–32, 33–35 and 36+, a Claude Design System and `AGENTS.md` (the brand book for agents). See [exporters/README.md](exporters/README.md). |
 | `generated/` | The brand's primitive tokens. Rebuilt every time; no need to commit. |
 
+Figma: three ways to send the theme into a Figma file (a Claude chat, `loomiere figma push`, or the Loomiere plugin for designers without the repo) in [figma/README.md](figma/README.md).
+
 How the layers work, the brand file's fields, roles, concepts and pairs: [tokens/README.md](tokens/README.md).

package/bin/loomiere.mjs

@@ -7,6 +7,8 @@
  *   loomiere check         check contrast of the theme already built
  *   loomiere studio        edit the brand with live previews (--export page.html for a static copy)
  *   loomiere lab           pick brand pairs
+ *   loomiere figma push    build, then push the theme to Figma (lib/figma.mjs)
+ *   loomiere figma serve   serve the build for the Loomiere Figma plugin
  *
  * Flags: --brand <file>  --out <dir>  --prefix <name>  --port <n>
  */
@@ -26,6 +28,8 @@ Usage
   loomiere check            Check contrast of the built theme
   loomiere studio           Edit the brand with live previews
   loomiere lab              Pick brand pairs (background + text)
+  loomiere figma push       Build, then push variables and text styles to Figma
+  loomiere figma serve      Serve the build for the Loomiere Figma plugin
 
 Options
   --brand <file>            Brand file (default: the only one in brand/)
@@ -33,6 +37,11 @@ Options
   --prefix <name>           CSS variable prefix (default: sl)
   --port <n>                Port for studio and lab
   --export <file>           studio only: write one self-contained page instead of serving
+  --file <url>              figma: the Figma file (or "figma": { "file" } in the config)
+  --via <way>               figma push: claude, api, plugin or scripts (default: the first that works)
+  --since <file>            figma push --via scripts: the snapshot, to send only what changed
+  --remove                  figma push: delete what the build no longer has
+  --dry-run                 figma push: report what would change, change nothing
   --help                    Show this help
 `;
 
@@ -44,6 +53,11 @@ const { values: flags, positionals } = parseArgs({
     prefix: { type: 'string' },
     port: { type: 'string' },
     export: { type: 'string' },
+    file: { type: 'string' },
+    via: { type: 'string' },
+    since: { type: 'string' },
+    remove: { type: 'boolean' },
+    'dry-run': { type: 'boolean' },
     help: { type: 'boolean', short: 'h' },
   },
 });
@@ -101,6 +115,16 @@ async function main() {
       const { lab } = await import('../lib/lab.mjs');
       return lab(resolveConfig(configFlags), { port });
     }
+    case 'figma': {
+      const { figmaCommand } = await import('../lib/figma.mjs');
+      const config = resolveConfig(configFlags);
+      const sub = rest[0] ?? 'push';
+      // Push what the brand says now, the way a designer would expect.
+      if (sub === 'push' && flags.via !== 'scripts' && !(await build(config))) return void (process.exitCode = 1);
+      const ok = await figmaCommand(config, sub, { via: flags.via, file: flags.file, since: flags.since, remove: flags.remove, dryRun: flags['dry-run'], port });
+      if (ok === false) process.exitCode = 1;
+      return;
+    }
     default:
       throw new Error(`Unknown command "${command}". Run loomiere --help.`);
   }

package/build/build-tokens.mjs

@@ -9,7 +9,7 @@
  *
  * Tokens can carry mode values in $extensions["sl.modes"] (dark, contrast-more,
  * dark-contrast-more, reduced-motion); the CSS output emits each mode as its own block.
- * Color vision themes (vision.* primitives) become [data-vision='<theme>'] blocks.
+ * Color vision themes (vision.* primitives) become [data-theme='<theme>'] blocks.
  *
  * Run it through the command line (loomiere build), which reads loomiere.config.json.
  */
@@ -22,28 +22,45 @@ import { fileHeader, formattedVariables } from 'style-dictionary/utils';
 import { exportAll } from '../exporters/index.mjs';
 import { generate } from '../generator/generate.mjs';
 import { LEVELS, PAIR_ROLES, pairTable, paletteColors } from '../generator/pairs.mjs';
-import { resolveRoles } from '../generator/roles.mjs';
+import { resolveRoles, STYLES } from '../generator/roles.mjs';
 
 const root = path.join(path.dirname(fileURLToPath(import.meta.url)), '..');
-// Set by buildTokens() from the config; the Style Dictionary formats below read them.
+// Set by buildTokens() from the config and brand; the Style Dictionary formats below read them.
 let prefix = 'sl';
 let brandName = '';
+let roles;
 
 const LAYERS = ['foundation', 'primitive', 'semantic', 'component'];
 
+/**
+ * Themes, picked with data-theme on <html>: light, dark, light-high-contrast,
+ * dark-high-contrast, and one per color vision theme (deuteranopia…). With no data-theme the
+ * system decides light or dark and high contrast. Color vision themes stand on their own:
+ * they are light, and neither the system's dark mode nor its contrast setting changes them.
+ */
+const theme = (names) => names.map((n) => `[data-theme='${n}']`).join(', ');
+
 /** Selectors for each mode, in cascade order: later blocks win. */
-const MODES = [
-  ['dark', [['@media (prefers-color-scheme: dark)', ":root:not([data-theme='light'])"], [null, "[data-theme='dark']"]]],
-  ['contrast-more', [['@media (prefers-contrast: more)', ':root']]],
-  [
-    'dark-contrast-more',
+function modes(visions) {
+  const notLight = `:root:not(${theme(['light', 'light-high-contrast', ...visions])})`;
+  const notVision = visions.length ? `:root:not(${theme(visions)})` : ':root';
+  return [
+    ['dark', [['@media (prefers-color-scheme: dark)', notLight], [null, theme(['dark', 'dark-high-contrast'])]]],
+    ['contrast-more', [['@media (prefers-contrast: more)', notVision], [null, theme(['light-high-contrast', 'dark-high-contrast'])]]],
     [
-      ['@media (prefers-contrast: more) and (prefers-color-scheme: dark)', ":root:not([data-theme='light'])"],
-      ['@media (prefers-contrast: more)', "[data-theme='dark']"],
+      'dark-contrast-more',
+      [
+        ['@media (prefers-contrast: more) and (prefers-color-scheme: dark)', notLight],
+        ['@media (prefers-contrast: more)', theme(['dark'])],
+        [null, theme(['dark-high-contrast'])],
+      ],
     ],
-  ],
-  ['reduced-motion', [['@media (prefers-reduced-motion: reduce)', ':root']]],
-];
+    ['reduced-motion', [['@media (prefers-reduced-motion: reduce)', ':root']]],
+  ];
+}
+
+/** The color vision themes the build has (vision.<theme>.* tokens). */
+const visionsIn = (dictionary) => [...new Set(dictionary.allTokens.filter((t) => t.path[0] === 'vision').map((t) => t.path[1]))];
 
 const varName = (tokenPath) => `--${[prefix, ...tokenPath].join('-')}`;
 const refsToVars = (value) => String(value).replace(/\{([^}]+)\}/g, (_, ref) => `var(${varName(ref.split('.'))})`);
@@ -61,7 +78,7 @@ const modeValue = (token, mode) => token.original.$extensions?.['sl.modes']?.[mo
 
 function modeBlocks(dictionary) {
   const blocks = [];
-  for (const [mode, targets] of MODES) {
+  for (const [mode, targets] of modes(visionsIn(dictionary))) {
     const declarations = dictionary.allTokens
       .filter((token) => modeValue(token, mode) !== undefined)
       .map((token) => `${varName(token.path)}: ${refsToVars(modeValue(token, mode))};`)
@@ -76,7 +93,7 @@ function modeBlocks(dictionary) {
 }
 
 /**
- * [data-vision="<theme>"] re-declares the brand's palette and data variables with the
+ * [data-theme="<vision theme>"] re-declares the brand's palette and data variables with the
  * theme's (vision.<theme>.* tokens, generated in generator/vision.mjs). Set it on the root
  * element: variables declared at :root resolve there, so everything that reads them follows.
  */
@@ -84,66 +101,92 @@ function visionBlocks(dictionary) {
   const byTheme = new Map();
   for (const token of dictionary.allTokens) {
     if (token.path[0] !== 'vision') continue;
-    const [, theme, ...rest] = token.path;
-    if (!byTheme.has(theme)) byTheme.set(theme, []);
-    byTheme.get(theme).push(`${varName(rest)}: var(${varName(token.path)});`);
+    const [, name, ...rest] = token.path;
+    if (!byTheme.has(name)) byTheme.set(name, []);
+    byTheme.get(name).push(`${varName(rest)}: var(${varName(token.path)});`);
   }
-  return [...byTheme].map(([theme, lines]) => `[data-vision='${theme}'] {\n${indent(lines.join('\n'), 2)}\n}`).join('\n\n');
+  return [...byTheme].map(([name, lines]) => `${theme([name])} {\n${indent(lines.join('\n'), 2)}\n}`).join('\n\n');
 }
 
 /**
- * Color scopes and emphasis (generator/roles.mjs). Every palette's slots are tokens
+ * Color scopes, statuses and emphasis (generator/roles.mjs). Every palette's slots are tokens
  * (scope.<palette>.<slot>); these blocks point the generic --sl-scope-<slot> at one of them:
- * the accent by default, any palette under [data-color], and the level's own color under
- * [data-emphasis] when that color is chrome or a named palette, unless the element names a color itself. --sl-e-<part> is what a
- * component paints with: the level's style read from whatever scope is in effect.
+ * the accent by default, any palette under [data-color] or [data-status], and the level's own
+ * color under [data-emphasis] when that color is chrome or a named palette, unless the element
+ * names a color or sits in a status. --sl-e-<part> is what a component paints with: the level's
+ * style read from whatever scope is in effect, or the brand pair the brand file picked for that
+ * level in that status (roles.status).
  */
-// Button's data-variant names are aliases for emphasis levels, so the brand's roles drive every
-// button. data-emphasis wins when both are set; a button with neither is bold.
-const VARIANT_LEVELS = {
-  bold: [".Button[data-variant='solid']:not([data-emphasis])", '.Button:not([data-variant]):not([data-emphasis])'],
-  standard: [".Button[data-variant='outline']:not([data-emphasis])"],
+// Each component that paints with emphasis starts at a level of its own; data-emphasis on it, or
+// on a group around a toggle, picks another. Button's data-variant names are aliases for levels,
+// so the brand's roles drive every button; a button with neither is bold.
+const DEFAULT_LEVELS = {
+  bold: [".Button[data-variant='solid']:not([data-emphasis])", '.Button:not([data-variant]):not([data-emphasis])', '.AvatarRoot:not([data-emphasis])'],
+  standard: [".Button[data-variant='outline']:not([data-emphasis])", '.Toggle:not([data-emphasis], [data-emphasis] *)'],
   quiet: [".Button[data-variant='ghost']:not([data-emphasis])"],
 };
 
-// A toast's type (toastManager.add({ type: 'success' })) picks the status palette of the same
-// name, so success, warning, error and info toasts tint themselves. data-color wins when both are set.
+// A toast's type (toastManager.add({ type: 'success' })) is its status, so success, warning,
+// error and info toasts tint themselves. data-color or data-status wins when one is set.
 const TOAST_TYPES = ['success', 'warning', 'error', 'info'];
-const COLOR_ALIASES = (name) => (TOAST_TYPES.includes(name) ? [`.Toast[data-type='${name}']:not([data-color])`] : []);
+const statusSelectors = (name) => [`[data-status='${name}']`, ...(TOAST_TYPES.includes(name) ? [`.Toast[data-type='${name}']:not([data-color], [data-status])`] : [])];
+const IN_STATUS = '[data-status], [data-status] *, .Toast[data-type], .Toast[data-type] *';
 
 function roleBlocks(dictionary) {
   const scopes = new Map();
-  const levels = new Map();
+  const statuses = new Map();
   for (const token of dictionary.allTokens) {
     if (token.path[0] === 'scope') {
       const [, name, slot] = token.path;
       if (!scopes.has(name)) scopes.set(name, []);
       scopes.get(name).push(slot);
     }
-    if (token.path[0] === 'emphasis') {
-      const [, level, part] = token.path;
+    if (token.path[0] === 'status-level') {
+      const [, name, level, part] = token.path;
+      if (!statuses.has(name)) statuses.set(name, new Map());
+      const levels = statuses.get(name);
       if (!levels.has(level)) levels.set(level, []);
       levels.get(level).push([part, String(token.original.$value)]);
     }
   }
   if (!scopes.size) return '';
   const point = (name) => scopes.get(name).map((slot) => `${varName(['scope', slot])}: var(${varName(['scope', name, slot])});`).join('\n');
-  const rule = (selector, body) => `${selector} {\n${indent(body, 2)}\n}`;
-  const blocks = [rule(':root', point('accent'))];
-  for (const name of scopes.keys()) blocks.push(rule([`[data-color='${name}']`, ...COLOR_ALIASES(name)].join(',\n'), point(name)));
-  for (const [level, parts] of levels) {
-    const color = parts.map(([, v]) => v.match(/^\{scope\.([^.]+)\./)?.[1]).find(Boolean);
-    const paint = parts
+  const rule = (selectors, body) => `${selectors.join(',\n')} {\n${indent(body, 2)}\n}`;
+  const pairOf = (parts) => parts.map(([, v]) => v.match(/^\{pair\.([^.]+)\./)?.[1]).find(Boolean);
+  const paint = (parts) =>
+    parts
       .map(([part, v]) => {
         const slot = v.match(/^\{scope\.[^.]+\.([^}]+)\}$/)?.[1];
-        return `${varName(['e', part])}: ${slot ? `var(${varName(['scope', slot])})` : v};`;
+        return `${varName(['e', part])}: ${slot ? `var(${varName(['scope', slot])})` : refsToVars(v)};`;
       })
       .join('\n');
-    const selectors = [`[data-emphasis='${level}']`, ...(VARIANT_LEVELS[level] ?? [])];
-    blocks.push(rule(selectors.join(',\n'), paint));
-    // Accent levels follow the scope around them, so data-color on a section re-colors them;
-    // chrome or a named palette stays put unless the element itself names a color.
-    if (color && color !== 'accent') blocks.push(rule(selectors.map((sel) => `${sel}:not([data-color])`).join(',\n'), point(color)));
+
+  const blocks = [rule([':root'], point('accent'))];
+  for (const name of scopes.keys()) blocks.push(rule([`[data-color='${name}']`, ...(statuses.has(name) && name !== 'default' ? statusSelectors(name) : [])], point(name)));
+
+  // Every level's style, read from whatever scope is in effect: a status's palette, data-color's, or the accent.
+  for (const [level, parts] of statuses.get('default') ?? []) {
+    const selectors = [`[data-emphasis='${level}']`, ...(DEFAULT_LEVELS[level] ?? [])];
+    const style = STYLES[roles.emphasis[level].style];
+    blocks.push(rule(selectors, paint(parts.map(([part]) => [part, style[part] === 'transparent' ? 'transparent' : `{scope.any.${style[part]}}`]))));
+    // Default status: the pair the brand picked, or the level's own color. Accent levels follow
+    // the scope around them, so data-color on a section re-colors them; chrome or a named palette
+    // stays put unless the element names a color or sits in a status.
+    if (pairOf(parts)) {
+      blocks.push(rule([`:is(${selectors.join(', ')}):not(${IN_STATUS})`], paint(parts)));
+      continue;
+    }
+    const color = parts.map(([, v]) => v.match(/^\{scope\.([^.]+)\./)?.[1]).find(Boolean);
+    if (color && color !== 'accent') blocks.push(rule(selectors.map((sel) => `${sel}:not([data-color], ${IN_STATUS})`), point(color)));
+  }
+  // Other statuses: the scope already holds the status's palette; only a picked pair needs its own rule.
+  for (const [name, levels] of statuses) {
+    if (name === 'default') continue;
+    for (const [level, parts] of levels) {
+      if (!pairOf(parts)) continue;
+      const selectors = `:is(${[`[data-emphasis='${level}']`, ...(DEFAULT_LEVELS[level] ?? [])].join(', ')})`;
+      blocks.push(rule(statusSelectors(name).flatMap((s) => [`${s} ${selectors}`, `${s}${selectors}`]), paint(parts)));
+    }
   }
   return blocks.join('\n\n');
 }
@@ -284,10 +327,10 @@ StyleDictionary.registerFormat({
 /**
  * Text styles are written as one DTCG typography token each (tokens/semantic/typography.json).
  * CSS can't use a composite, so this expands each into its parts plus a `font` shorthand:
- *   font.base → font.base.font, .font-family, .font-size, .font-weight, .line-height,
+ *   font.body-base → font.body-base.font, .font-family, .font-size, .font-weight, .line-height,
  *               .letter-spacing (and .text-transform when $extensions["sl.text-transform"] is set)
- * so --sl-font-base-font-size and friends exist for components. A text style whose value is
- * another text style ("{font.base}") takes that style's parts.
+ * so --sl-font-body-base-font-size and friends exist for components. A text style whose value is
+ * another text style ("{font.body-base}") takes that style's parts.
  */
 const TEXT_PARTS = { fontFamily: 'font-family', fontSize: 'font-size', fontWeight: 'font-weight', lineHeight: 'line-height', letterSpacing: 'letter-spacing' };
 export const TEXT_STYLE_TYPE = 'typography';
@@ -422,6 +465,7 @@ export async function buildTokens(config) {
   prefix = config.prefix;
   const { brand, applied, files } = generate(config.brandFile, config.generatedDir);
   brandName = brand.name;
+  roles = resolveRoles(brand);
   const out = config.outDir + path.sep;
 
   const sd = new StyleDictionary({

package/exporters/README.md

@@ -15,7 +15,7 @@ adapter in this folder, and each one only renames. No adapter does color math.
 | `ag-grid-v33` | `ag-grid-v33.js`, `.d.ts`, `.css` | AG Grid 33 to 35 (Theming API). |
 | `ag-grid-v32` | `ag-grid-v32.css` | AG Grid 31 and 32 (CSS themes). All three come from `ag-grid-settings.mjs`. |
 | `design-system` | `design-system/`, `AGENTS.md` | A Claude Design System (claude.ai), so Claude designs, makes decks and builds UI with the brand. `AGENTS.md` is the same brand book for coding agents, plus how to load the theme. See below. |
-| `figma` | `figma.json` | Figma variables in three collections: Brand, Pairs, Theme (Light and Dark modes). Aliases point back to Brand, so a palette change flows through. Fluid sizes use their large-screen value. |
+| `figma` | `figma.json` | Figma variables, text styles and effect styles (elevation/xs to 2xl, focus/ring, focus/field, focus/field-error): hidden Brand and Scale collections, and Size, Theme, Status and Emphasis with modes for desktop, tablet and mobile sizes, light, dark, high contrast and color vision, `data-status` and `data-emphasis`, plus a one-mode layout for Figma Starter. Read by `loomiere figma push` and the Loomiere plugin; see [../figma/README.md](../figma/README.md). |
 
 `loomiere build` writes them all to the theme's `exports/` folder, with `catalog.json` listing what's there.
 `"exports": ["ag-grid", "tailwind"]` in `loomiere.config.json` writes only those (an id prefix picks a

package/exporters/ag-grid-settings.mjs

@@ -45,12 +45,12 @@ export const SETTINGS = [
   ['cellEditingShadow', '{field.shadow-focus}', null],
 
   // Type: cells use the condense text style, the header uses condense-subtitle, whole.
-  ['fontFamily', '{font.condense.font-family}', '--ag-font-family'],
-  ['fontSize', '{font.condense.font-size}', '--ag-font-size'],
-  ['fontWeight', '{font.condense.font-weight}', null],
-  ['headerFontFamily', '{font.condense-subtitle.font-family}', null],
-  ['headerFontSize', '{font.condense-subtitle.font-size}', null],
-  ['headerFontWeight', '{font.condense-subtitle.font-weight}', null],
+  ['fontFamily', '{font.body-condense.font-family}', '--ag-font-family'],
+  ['fontSize', '{font.body-condense.font-size}', '--ag-font-size'],
+  ['fontWeight', '{font.body-condense.font-weight}', null],
+  ['headerFontFamily', '{font.subtitle-condense.font-family}', null],
+  ['headerFontSize', '{font.subtitle-condense.font-size}', null],
+  ['headerFontWeight', '{font.subtitle-condense.font-weight}', null],
 
   // Sizes
   ['spacing', '{space.2}', '--ag-grid-size'],
@@ -142,7 +142,7 @@ export const SETTINGS = [
   ['buttonHoverBorder', '{stroke.default} solid {emphasis.standard.border-hover}', null],
   ['buttonActiveBackgroundColor', '{emphasis.standard.bg-active}', null],
   ['buttonBorderRadius', '{radius.control}', null],
-  ['buttonFontWeight', '{font.condense-trigger.font-weight}', null],
+  ['buttonFontWeight', '{font.trigger-condense.font-weight}', null],
   ['iconButtonColor', '{icon-button.color}', null],
   ['iconButtonHoverColor', '{icon-button.color-hover}', null],
   ['iconButtonHoverBackgroundColor', '{icon-button.background-hover}', null],

package/exporters/ag-grid.mjs

@@ -21,11 +21,11 @@ function resolver(theme) {
 const extraCss = (fixes = '') => `/* Letter spacing comes from the condense and condense-subtitle text styles. */
 .ag-root-wrapper,
 .ag-popup {
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
 }
 .ag-header-cell-text {
-  letter-spacing: var(--sl-font-condense-subtitle-letter-spacing);
-  line-height: var(--sl-font-condense-subtitle-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
+  line-height: var(--sl-font-subtitle-condense-line-height);
 }
 ${fixes}`;
 
@@ -99,9 +99,9 @@ ${lines.join('\n')}
 
 /* The old themes have no header type settings: the header uses the condense-subtitle text style. */
 .ag-theme-loomiere .ag-header-cell-text {
-  font-family: var(--${theme.prefix}-font-condense-subtitle-font-family);
-  font-size: var(--${theme.prefix}-font-condense-subtitle-font-size);
-  font-weight: var(--${theme.prefix}-font-condense-subtitle-font-weight);
+  font-family: var(--${theme.prefix}-font-subtitle-condense-font-family);
+  font-size: var(--${theme.prefix}-font-subtitle-condense-font-size);
+  font-weight: var(--${theme.prefix}-font-subtitle-condense-font-weight);
 }
 .ag-theme-loomiere .ag-header-cell:hover {
   background-color: var(--${theme.prefix}-table-header-background-hover);