Token Flow 0.2.2 - Smarter Indexing & Fewer False Positives

Fixes

• The TS/JS and SCSS parsers now automatically filter out non-style objects, JSON schemas, test/Storybook files, and local SCSS variables, drastically reducing noise without requiring any manual configuration.
• BEM modifier syntax in selectors (e.g. .card__slot--closeable:hover or the SCSS parent-ref &--selected:not(.x)) is no longer mistaken for a CSS custom-property declaration. -- is only treated as a token when it really is one — a property declaration or a var(--…) call.
• No more circular suggestions: a token definition (e.g. --color-bg-page: #e5e9eb) no longer suggests replacing its own value with itself. The token being declared is excluded from its own suggestion list.
• The Analyser's Scope picker no longer offers the confusing Active editor option. The analysed scope is now an explicit choice (All project by default, plus your configured scopes) and stays put as you move between files. The Library and Hardcoded Values panels still follow the active editor.

📥 Install

JetBrains Marketplace : search "Token Flow" in Settings → Plugins → Marketplace and install / update.

Manual : download token-flow-0.2.1.zip from the assets below and use Settings → Plugins → ⚙️ → Install Plugin from Disk….

---

💛 Support

If Token Flow saves you time :
Buy me a coffee ☕

Built by Robin Lopez — designer & front-end engineer.

Token Flow 0.2.1 - Smarter hardcoded detection, sticky section headers

What's new

• Hardcoded detection no longer flags token definitions. Literal values that are part of a token declaration (JSON / TypeScript / JavaScript token catalogs, SCSS $var: value, CSS --var: value, JS object entries like "sm": "8px") are now correctly recognised as definitions and excluded from both Hardcoded clusters and Hardcoded values. Values such as "sm": "8px" inside a radius map will no longer surface as hardcoded occurrences.

• TS / JS files get format-appropriate suggestions. When a hardcoded literal appears in a .ts / .tsx / .js / .jsx source, only tokens that are actually reachable in that format are suggested, JS object-path tokens ('{spacing.md}'), runtime property accesses, and helper calls. CSS custom-property suggestions (var(--…)) are no longer offered on files where they can't resolve.

• Accurate hit count, no more 50-row ceiling. The Hardcoded clusters and Hardcoded values counts now reflect the real number of detected items. The previous hard cap of 50 at the analyser layer was silently truncating the lists even when many more hits existed; the cap has been removed and the visible list is now truncated only in the UI via the expandable + N more… control.

• Sticky section headers. While scrolling through a long analysis report, the header of the section currently in view pins itself at the top of the panel. The sticky strip mirrors the section's title and count so you always know which section you are reading without scrolling back to the heading.

• Broken references moved to the top. The Broken references section is now first, these are genuine bugs (broken var(--…) or $var references), and surfacing them ahead of the less-critical hardcoded sections makes the report easier to triage.

• Cleaner occurrence rows. The per-file list inside an expanded hardcoded row now shows filename:line · property (e.g. Button.scss:42 · padding) instead of repeating the parent folder name. The CSS or JS property the literal is bound to gives immediate context for why the occurrence was detected, and the fixed height cap that was clipping long filenames has been removed.

Fixes

• Declaration detection extended to quoted JSON / JS object keys. Patterns like "borderRadius": "8px" and "sm": 8 are now correctly identified as token definitions, not consumption.
• Pure token-catalog files (.ts/.tsx/.js/.jsx/.json registered as token sources) are entirely excluded from the hardcoded scan, no more false positives from design-token catalog files.

📥 Install

JetBrains Marketplace : search "Token Flow" in Settings → Plugins → Marketplace and install / update.

Manual : download token-flow-0.2.1.zip from the assets below and use Settings → Plugins → ⚙️ → Install Plugin from Disk….

---

💛 Support

If Token Flow saves you time :
Buy me a coffee ☕

Built by Robin Lopez — designer & front-end engineer.

Token Flow 0.2.0 - Sharper Analyser, contextual CSS-var discovery

What's new

• Hardcoded results split into two lists. The Analyser now separates Hardcoded clusters (literals with no matching token — design opportunities) from Hardcoded values (literals where a token already exists — actionable debt). Values are grouped by value + property family with a role-aware suggestion. The single hardcoded score axis is replaced by Hardcoded opportunity and Hardcoded debt with appropriate weighting.
• Ambiguous-token detection. New informational section in the Analyser flags tokens whose name plausibly maps to more than one value family (typography-leaning names holding a colour, --icon-* holding a raw length, pure role names with no category hint). Suggestion-only, never an error.
• Alt+T on contextually-declared CSS variables. Pressing Alt+T on a var(--c) whose declaration lives outside the registered token sources (consumer override, Angular host binding, React/Vue inline style, setProperty call) now opens a navigable list of every declaration site instead of the historical "No alternatives found." dead-end. Static declarations come first, runtime injections after.

Fixes

• Suggestion engine — no more cross-family pollution. Typography and border tokens no longer surface as suggestions on width / height / padding / radius and similar metric contexts, even when the token name's leading segment (size-…) happens to look metric. Conversely, metric tokens no longer surface on typography contexts. Both the resolved category and the token name are checked.
• Suggestion engine — dot-path tier classification. JS object-path token names (units.sm, palette.blue.500) are now classified at the right tier, so primitives are correctly outranked by their semantic equivalents.
• Analyser scope selector. The Scope picker no longer auto-resets when switching between files. Behaves as a user-controlled setting that stays sticky. The Library and Hardcoded Values panels keep their active-editor follow-along behaviour unchanged.

📥 Install

JetBrains Marketplace : search "Token Flow" in Settings → Plugins → Marketplace and install / update.

Manual : download token-flow-0.2.0.zip from the assets below and use Settings → Plugins → ⚙️ → Install Plugin from Disk….

---

💛 Support

If Token Flow saves you time :
Buy me a coffee ☕

Built by Robin Lopez — designer & front-end engineer.

Token Flow 0.1.9 — CSS variables declared outside token sources are no longer flagged as broken

The fix

A new project-level DynamicCssVarIndex service walks every .ts / .tsx / .js / .jsx / .html / .vue / .css / .scss / .sass file in the project once and collects every CSS variable name it can find, regardless of declaration style. The result is cached against the IDE's PsiModificationTracker so subsequent reads are O(1) until you edit something.

Two families of declaration are recognised :

• Runtime injection in host-language files :
  • Angular host bindings : [style.--var], [attr.style.--var]
  • Angular template property syntax : style.--var="…"
  • DOM API : element.style.setProperty('--var', …) (single, double or back-tick quotes)
  • React inline styles : <div style={{ '--var': value }}>
  • Vue :style shorthand : :style="{ '--var': … }"
• Contextual CSS overrides in stylesheets :
  • Any bare --name: value declaration inside any rule body — :root, host selectors, BEM-style consumer selectors, …
  • A negative lookbehind on alphanumerics ensures BEM identifiers like .block__elem--mod:hover are correctly ignored (the --mod there is part of a class name, not a custom property)

Both the Analyser (broken references / reference-integrity score) and the Hardcoded Values panel honour the index.

Still flagged

A fallback expression alone (var(--x, inherit)) is not enough to suppress the flag — if --x is nowhere to be found in the project, the reference is still reported. Runtime defaults are a graceful-degradation tool, not a license to leave dangling references.

New setting

Settings → Token Flow → Analyser → "Recognise CSS variables declared outside token sources (runtime injection + contextual CSS rules)".

On by default. Uncheck to fall back to the pre-0.1.9 strict behaviour where every reference must point at a declaration inside a registered token source.

Closes #16.

📥 Install

JetBrains Marketplace: search "Token Flow" in
Settings → Plugins → Marketplace and install / update.

Manual: download token-flow-0.1.9.zip from the assets below and use
Settings → Plugins → ⚙️ → Install Plugin from Disk….

---

💛 Support

If Token Flow saves you time:
Buy me a coffee ☕

Built by Robin Lopez — designer & front-end engineer.

Token Flow 0.1.8 — Sharper Token Suggestions

🧩 External CSS variables (PrimeNG, Ionic, Material, …)

Framework UI kits like PrimeNG, Ionic, Angular Material or Vuetify inject their own CSS custom properties at runtime (--p-primary-color, --ion-color-primary, --mat-…, --v-…, …). Until now Token Flow had no way to know they exist — they aren't declared anywhere in the source tree the plugin indexes — so every var(--p-foo) was reported as a broken reference, polluting the Analyser and the Hardcoded Values panel.

This release fixes it via three complementary mechanisms:

• Per-scope External tab: a new tab next to Sources / Whitelist / Excludes where you list the framework prefixes you use — --p-, --ion-, --mat-, etc. References matching a configured prefix are treated as known-external and never flagged as broken. The list is part of the scope config and travels with the JSON export/import (schema bumped to v2; v1 files still load).
• Auto-detect from package.json: a button inside the External tab scans the project for known framework dependencies (PrimeNG, PrimeReact, PrimeVue, @ionic/{core,angular,react,vue}, @angular/material, @material/web, Vuetify, Bootstrap, Quasar, Element Plus, Mantine, Carbon, Radix) and adds their prefixes to the scope in one click. A summary popup tells you what was added vs. already present.
• Project-open balloon: the first time you open a project that depends on a known framework but has no prefixes configured, a balloon offers Add to all scopes / Configure… / Don't show again. One-shot, persisted per-project — never nags twice.

Validation path

If you want Token Flow to validate that a --ion-color-primary reference actually exists (i.e. detect typos like --ion-color-primry), point your scope's Sources at the framework's CSS bundle:

node_modules/@ionic/core/css/ionic.bundle.css
node_modules/bootstrap/dist/css/bootstrap.css

Token Flow will index every --ion-* / --bs-* it finds there and turn validation back on. Works for frameworks that ship their CSS vars as a static stylesheet (Ionic, Bootstrap, partial for Material). Frameworks generating their tokens fully via JS (PrimeNG v17+, Angular Material 17+) still need the prefix approach. The External tab's hint reminds you of this distinction.

A focused release on a single, frequently-reported pain point: when several DS tokens share the same raw value (--units-xl AND --spacing-xl are both 32px), the plugin used to pick the wrong one. The suggestion engine now understands the semantic layer of your tokens.

🛡 Hardcoded Values — quieter on token-source files

• Token-source files are skipped with a banner: opening a file registered as a sourcePaths entry of any scope (e.g. _tokens-metrics.scss, _tokens-semantics.scss) now displays "This file is declared as a token source — hardcoded value detection is disabled here" and bails out before scanning. Every literal in those files is by definition a token declaration, so the warnings were pure noise.
• SCSS map values are recognised as definitions: literals inside a $name: (…) or "key": (…) SCSS map are no longer flagged as hardcoded. Catches the Style-Dictionary / theme-config pattern ($themes-config: ("themeX": ("light": ("token": #001a70, …)))). Detection is purely lexical, handles nested maps to any depth, ignores parens / colons inside strings & comments, and works even when the file is not formally declared as a token source — so mixed files (real styles + inline map) get the right behaviour.

🔍 Hardcoded Values — search & property filter

• Search field above the rows: filters by literal value, selector, surrounding CSS property, or any suggested token's name / resolved value. Multi-term, case-insensitive ("padding 32" matches a padding: 32px row).
• Property filter popup: a new round filter button opens a popup that lists every CSS property detected in the current scan — grouped by category (Spacing, Sizing, Typography, Color, Radius, Shadow, Border, Effects, Duration, Layout, Z-index, Opacity, Icon, Other) — with a per-property count. Untick to hide the corresponding rows.
• Nested property search: inside the popup, a Search a property… field narrows the checklist as you type and hides empty group headers automatically. Useful in big files with many detected properties.
• Hide rows without a suggestion moved into the popup: the previous toolbar toggle now sits at the top of the filter popup with every other view-narrowing control. Broken references stay visible regardless — they're actionable.
• Reset button at the bottom of the popup clears every filter at once.

🚀 What changed

• Token tier awareness (primitive vs semantic vs component): the suggestion engine now classifies every token by its position in the DS pyramid. Names starting with units-, palette-, base-, primitive-, core-, scale-, raw- are flagged as primitive; names starting with token- (or comp-/component-) as component; everything else as semantic. When several tokens share the same value, the semantic one wins. Concretely : padding: 32px no longer suggests --units-xl over --spacing-xl.

• Property-to-role matching (surface / content / stroke / effect): for color properties, the plugin now derives an expected role from the CSS property and matches it against the token name :

  • background, background-color, fill → surface
  • color, caret-color, accent-color, text-decoration-color → content
  • border-color, outline-color, stroke → stroke
  • box-shadow, text-shadow, outline, filter, backdrop-filter → effect

  Tokens whose name carries a matching segment (-surface-, -content-, -stroke-, …) get a strong boost; tokens carrying a conflicting role are actively demoted. So background: #005bff prefers token-actions-high-surface-default over global-default-content-default, and color: #001a70 does the opposite. Also recognised as role markers: background/bg/fill/canvas (surface), text/foreground/fg/label/icon (content), border/outline/divider (stroke), shadow/focus/glow/effect(s) (effect).

• Multi-criterion scoring: the ranking function was rewritten from "category match + shortest name wins" to a weighted sum of (category alignment, role alignment, tier, exact-vs-fuzzy, length). Name length is now only a tiebreaker — a longer but more semantic name (--spacing-xl) can outrank a shorter primitive one (--units-xl), which wasn't possible before.

• Color fuzzy matches respect role too: when no exact color match exists and the engine falls back to RGB-distance suggestions, ties at near-identical distance are now broken by the semantic score, so a background: #006cff (no exact match) will still surface a -surface- token rather than a same-distance -content- one.

🧬 Compatibility

• Suggestions for tokens that have no semantic alternative are unchanged. border-radius: 32px still suggests --radius-xl because there's only one matching token — the primitive penalty is relative.
• No settings to flip. The behaviour kicks in automatically based on token names.
• No changes to indexing, Library rendering, completion, or the Analyser.

🐛 Known cases this fixes

Hardcoded value	Was suggesting	Now suggests
padding: 32px	var(--units-xl)	var(--spacing-xl)
gap: 8px	var(--units-sm)	var(--spacing-default) / --spacing-sm
background: #ffffff	var(--global-high-content-default) *	var(--global-high-surface-default)
color: #001a70	var(--global-default-surface-default) *	var(--global-default-content-default)
border-color: #ededed	var(--global-default-surface-default) *	var(--token-form-high-stroke-default)

*depending on token-name length, before this release.

Token Flow 0.1.7 — Portable Scope Configuration & Sharper Library

Two complementary themes this release: make scope configuration shareable across a team, and tighten how the Library reads when a category contains dozens of related tokens.

🚀 New Features

• Export Config (JSON): Settings → Token Flow → Scopes now exposes an Export… link above the scope list. One click produces a token-flow-scopes.json file containing every configured scope — name, root folder, source paths, whitelist, analysis excludes. Ready to be committed next to the project or pasted into a team chat.
• Import Config (JSON): a paired Import… link reads any file produced by Export. Token Flow asks how to handle the incoming scopes:
  • Replace — clear the current list and adopt the imported scopes verbatim.
  • Merge — keep existing scopes; overwrite the ones whose names match (case-insensitive), append the rest.
    Edits stay pending until you click Apply, so you can preview the result before committing — or hit Cancel and revert.
• Versioned schema: the JSON file embeds a version tag. Token Flow refuses files produced by a newer schema instead of silently dropping fields, which keeps team mismatches loud rather than mysterious.
• Vue Single File Components (.vue): tokens declared in <style> and <style lang="scss"> blocks are now first-class citizens — indexed by the scanner, surfaced in the Library, counted in audit coverage, and reachable by hardcoded-value detection, code completion, Alt+T, Go-to-declaration. The implementation is text-based (no dependency on the JetBrains Vue plugin) and works the same on Community and Ultimate. Scanning is confined to inline <style> blocks so <template> and <script> sections stay untouched — no false var(--foo) hits in JS template strings. Multiple <style> blocks per SFC are supported; <style scoped> / <style module> behave identically; <style src="…"> blocks defer to the regular extension-based walk on the referenced file. Closes #3.
• Library family / sub-family grouping: inside each big category accordion (Color, Spacing, Radius…), the Library can now insert a two-level hierarchy of headers — family (HIGH, LOW, PRIMARY, NEUTRAL…) and sub-family (SURFACE, CONTENT, STROKE…). --token-form-high-content-*, --token-form-low-content-* and --token-form-high-surface-* no longer mix in a single bucket — they cluster by family first, then by sub-family. The algorithm reads the structure of the names you already have (strip the longest common prefix, drop the trailing state, bucket by what's left) — no hard-coded vocabulary, no naming convention assumed.
• Toolbar toggle for grouping: a new icon next to the view-mode button (group-by glyph) flips the feature on and off without leaving the panel. Off by default — naming conventions vary widely, so it's an opt-in. The preference persists per project.
• Sticky category header: scroll past a category in the Library and its header pins to the top of the viewport. Stays interactive — clicking it collapses the category, same as the in-list chevron.
• Justified category bar: layout is now [chevron] TITLE …… (count). The count is tinted with the accent foreground (same family as the variant / helper badges) so a long open list no longer reads (24) as if it were a token value.
• Two-way kind / file-chip sync: ticking a token-kind in the filter popup now flips every file chip of that kind in the strip below the search bar — and the reverse. The last muted file of a kind also unticks the kind. Two filter surfaces, one source of truth.

🐛 Light-theme polish

• Sub-family / category palette rebuilt: previously the sub-family JBColor pair was inverted (light=pale, dark=darker), so the heading was illegible on whichever theme was active. Each level now steps the contrast down properly in both light and dark.
• No more dark bands behind separators: on cream / light themes where JPanel.background and List.background diverge, family / sub-family headers were drawing as dark stripes over the lighter container. gridContainer, the sticky header and the grid viewport now follow list.background, so the section separators blend with the rows around them.
• Adaptive muted text: resolved-value labels, scope labels and filter-popup section headers switched from the fixed JBColor.GRAY (= Gray._128, never adapts) to the platform's contextual-help foreground.

🪟 Tooltip & Hardcoded Values polish

• Variant tooltip — vertical layout: token tooltips with variants used to render a horizontal HTML table that overflowed as soon as a token had more than 2-3 variants. Now: one line per variant, label left, swatch / glyph + resolved value right-aligned. Multi-theme tokens get discrete theme subheaders so themeOne · light / dark is visibly separated from themeTwo. Same data, side-by-side comparison is easier and the tooltip width stays sane.
• Hardcoded Values — tighter row layout: rows now indent under their selector header (visible tree-like grouping), the literal column is narrower (140 → 110 px, recovers room for the suggestion combo), and the suggestion combo is taller (26 → 30 px) so the selected value never has its descender clipped on any platform.
• Hardcoded Values — hide rows without a token match: a new toolbar toggle (filter icon) suppresses literals that have no matching design token. On by default — those rows were the noisy majority in most projects; broken references stay visible because they are actionable (a dangling token name needs a fix). State is persisted per project, and the status line reports … · N hidden so it's obvious the filter is shrinking the view.

🎯 Use Cases

• Team sync — a Lead Designer defines the canonical scopes (paths, mode mappings, whitelists) and commits the JSON. Every front-end teammate imports it and starts from the same configuration.
• Project migration — moving from one IntelliJ project to another no longer means re-clicking through Browse… a dozen times.
• Backup — keep a versioned copy of the mapping logic so a reset of the IDE settings is recoverable in seconds.

---

📥 Install

JetBrains Marketplace: search "Token Flow" in
Settings → Plugins → Marketplace and install / update.

Manual: download token-flow-0.1.7.zip from the assets below and use
Settings → Plugins → ⚙️ → Install Plugin from Disk….

---

💛 Support

If Token Flow saves you time:
Buy me a coffee ☕

Built by Robin Lopez — designer & front-end engineer.

Token Flow 0.1.6 — Sharper Search & Smarter Analyser

This release tightens the everyday loop : finding a token, fixing a broken reference, and tailoring scopes to a real project layout.

🚀 New Features

• Multi-term Library Search: type "informative content" and the Library finds --token-informative-highlight-content-hover. Search tokenises on spaces, dashes and underscores, then requires every term to match (AND, order-insensitive).
• Stale-analysis Banner: after an analysis, Token Flow watches the files involved (broken refs + token sources). Edit one and a yellow banner offers a one-click Re-run analysis. No more wondering if the report is fresh.
• Reorderable Scopes: drag scopes into the order you want via up/down arrows in Settings. The order is honored everywhere — including the Analyser's scope picker.
• Excluded from Analysis (per scope): a new Excludes tab lets you carve unrelated sub-modules out of a wide scope root. Use it when core/ mixes design tokens with code that has nothing to do with theming.
• Library Kind Filter: the funnel popup now slices the Library by token kind — CSS / SCSS / JS-JSON — alongside families. Quick way to focus on one stack when the same scope mixes SCSS variables and a JSON preset. The funnel icon highlights when any filter is active.
• Context-aware Token Drop: drop a JS preset token ('{token.x.y}') inside a backtick template literal in TS/JS and it lands as ${dt('token.x.y')}. Inside an existing ${…} it becomes dt('token.x.y'). Outside template literals, the canonical Style-Dictionary alias is preserved. Works for drag-and-drop, copy/paste, the Copy token menu and the card's copy button.

💅 Improvements

• Tabbed scope detail: Sources / Whitelist / Excludes now live in tabs instead of stacked panels — no scroll in the Settings dialog.
• Cleaner Analyser toolbar: one button does it all. Run analysis becomes Re-run analysis once a report exists; the redundant Refresh and Re-sync scopes actions are gone.
• Accordion alignment: section count and the (?) help icon now sit on the right edge of every Analyser header.
• Two-line broken-reference rows: token name on top in red bold, filename:line in muted grey below — matches the rest of the Analyser.

🐛 Bug Fixes

• Alt+T keeps the dt( wrapper: picking an alternative on ${dt('token.x.y')} no longer rewrites the call into a bare '{…}' alias and break the surrounding template literal.
• Stale-analysis banner now actually fires: the previous wiring subscribed an application-level VFS topic on the project bus and silently missed every event.
• Scope reordering reflects in the dropdown: the Analyser scope picker is rebuilt atomically and follows the settings order on every Apply.

---

📥 Install

JetBrains Marketplace: search "Token Flow" in
Settings → Plugins → Marketplace and install / update.

Manual: download token-flow-0.1.6.zip from the assets below and use
Settings → Plugins → ⚙️ → Install Plugin from Disk….

---

💛 Support

If Token Flow saves you time:
Buy me a coffee ☕

Built by Robin Lopez — designer & front-end engineer.

Token Flow 0.1.5 — Refined Scanning & UI Harmonization

This release focuses on improving the accuracy of the hardcoded value scanner and harmonizing the UI for a more consistent experience.

🚀 New Features

• Broken Reference Detection: "Non-existent tokens" are now flagged in the Analyser and Hardcoded Values panel.
• Smart Suggestions with Fallbacks: Suggestion engine uses CSS fallbacks and respects property categories (e.g. suggests colors for color:).
• Ignored Variables Config: Easily exclude external/library files from the analysis.
• Scope Awareness in Hardcoded Values: Active scope display added to the panel.
• Named Colors Support: The scanner now detects standard CSS named colors.

💅 Improvements

• UI Harmonization: Scope info is right-aligned; broken token warnings use a high-visibility yellow icon.
• Dynamic Analyser Lists: Click +x more to instantly expand long lists in the Analyser report.
• SCSS Noise Reduction: Ignored SCSS variables in broken token analysis to rely on native build errors.

🐛 Bug Fixes

• Circular Token Definitions: Literals used within a token's own declaration are no longer falsely flagged as hardcoded values.
• Comment Filtering: Values inside comments are no longer detected by the scanner.

---

📥 Install

JetBrains Marketplace: search "Token Flow" in
Settings → Plugins → Marketplace and install / update.

Manual: download token-flow-0.1.5.zip from the assets below and use
Settings → Plugins → ⚙️ → Install Plugin from Disk….

---

💛 Support

If Token Flow saves you time:
Buy me a coffee ☕

Built by Robin Lopez — designer & front-end engineer.

Token Flow 0.1.4 — Visual Grid & Polished UX

This release introduces the much-anticipated Grid View for the design system dashboard, along with several UI refinements to make your design token workflow smoother and more visual.

Target: IntelliJ IDEA Community 2024.2+ (forward-compatible).

---

🚀 New Features

Design System Dashboard: Grid View (Cards)

You can now toggle between the classic List View and a brand-new Grid View. This mode represents tokens as interactive cards, making it much easier to browse your design system visually.

• Visual Previews : Instantly see what a token represents.
  • Colors : Perfect circular swatches with alpha support.
  • Radius : Geometric previews showing the exact rounded corner effect.
  • Spacing : Visual gap indicators for margin and padding tokens.

Smarter Categorization

The plugin's auto-categorization engine has been significantly refined to better organize modern design systems:

• 6 New Categories: Added dedicated categories for ✨ EFFECTS, ⊞ LAYOUT, ⤢ SIZING, ◨ BORDER, ◐ OPACITY, and ★ ICON.
• Enriched Vocabulary: Existing categories (like COLOR, TYPOGRAPHY, SPACING, etc.) now recognize a much wider range of semantic keywords.
• Strict Evaluation: Advanced collision prevention ensures that composite keywords (e.g., border-color) are correctly evaluated before generic roots, guaranteeing flawless categorization.

Contextual Scope Awareness

• The plugin now visually tracks your active scope! The Dashboard Library and the Analyser tab will display the active scope and automatically adapt as you switch between files.
• A new contextual help button (i) allows you to quickly learn about scopes and jump to the settings.
• The Analyser tab received a UI polish with perfectly centered empty-states and a smooth native loading animation.

---

🐛 Bug Fixes & Improvements

• Smarter Token Categorization: Fixed an issue where any token with a small integer value (like $breakpoint-phone: 0 or --grid-columns: 4) was incorrectly classified as a Z-INDEX. The logic now prioritizes naming conventions, correctly identifying tokens containing keywords like z-index, layer, depth, or elevation.
• Reliable Token Copying: Fixed an issue where copying a token from the Library list view (via right-click or keyboard shortcut) copied the internal data instead of the usable expression (e.g., var(--token)).
• Scope Visibility: Fixed an issue where tokens would disappear from the Library when editing the token source file itself.

---

📥 Install

JetBrains Marketplace: search "Token Flow" in
Settings → Plugins → Marketplace and install / update.

Manual: download token-flow-0.1.4.zip from the assets below and use
Settings → Plugins → ⚙️ → Install Plugin from Disk….

---

💛 Support

If Token Flow saves you time:
Buy me a coffee ☕

Built by Robin Lopez — designer & front-end engineer.

Token Flow 0.1.3 — Gutter Swatches & SCSS Modifiers

This release focuses on visual consistency and robustness in SCSS/CSS parsing, addressing common design system patterns.

Target: IntelliJ IDEA Community 2024.2+ (forward-compatible).

---

🚀 New Features

Gutter color swatches for SCSS variables

One of the most requested visual features is now live: SCSS variables ($name) now show a color preview icon in the gutter, just like native CSS custom properties (--name).

• Real-time resolution : The color swatch is resolved through your project's design token index, meaning aliases are correctly followed to show the final color.
• Consistent experience : Whether you use a CSS variable or an SCSS variable from your design system, you get the same visual feedback next to the line number.

---

🐛 Bug Fixes

Robust handling of SCSS/CSS modifiers (!default, !global, !important)

Tokens with modifiers like !default or !important were previously "invisible" to the color parser and broke alias resolution. This has been fixed in #2.

• Clean extraction : Modifiers are now stripped during indexing, so $color: #333 !default; is correctly indexed as #333.
• Fixed Alias Resolution : Aliases like $highlight: $primary !default; now resolve correctly because the trailing modifier no longer interferes with the lookup.
• Fixed Color Previews : Color swatches now appear even when declarations use !default or !important flags.

---

🛠️ Improvements

Smart Analyser (Variable Declarations)

The hardcoded value inspection is now smarter about where it flags literals:

• Ignore declarations by default : Literal values assigned directly to variables (e.g. $app-primary: #dd0a12;) are no longer flagged as hardcoded. This prevents the plugin from reporting the actual definitions of your design tokens as technical debt.
• New "Analyser" Settings Tab : A dedicated tab has been added to the plugin settings to control this behavior. You can optionally re-enable detection in declarations if your workflow requires it.
• Clear tooltips and guidance : Each setting now includes helpful tooltips and descriptions to explain its impact on the analysis.

---

📥 Install

JetBrains Marketplace: search "Token Flow" in
Settings → Plugins → Marketplace and install / update.

Manual: download token-flow-0.1.3.zip from the assets below and use
Settings → Plugins → ⚙️ → Install Plugin from Disk….

---

💛 Support

If Token Flow saves you time:
Buy me a coffee ☕

Built by Robin Lopez — designer & front-end engineer.