File-Type Icons

tranquil-theme-icons provides distinct icons and colors for files in the tree view, replacing Pulsar’s generic single-icon fallback with a semantic color system and per-extension icon assignments. The glyphs themselves are codicons — VS Code’s icon font, vendored here as Tranquil’s standard icon set (see Codicon standardization).

How it works

Pulsar’s tree-view consumes an atom.file-icons service (v1.0.0). Any package that provides this service can override the icon class returned for a given file path. tranquil-theme-icons registers as that provider via package.json:

"providedServices": {
  "atom.file-icons": {
    "versions": { "1.0.0": "provideFileIcons" }
  }
}

The provider exposes a single method, iconClassForPath(filePath), which returns a CSS class string using Pulsar’s Octicon-style names (e.g. "icon-file-code"). The tree-view applies that class to each file entry, whose ::before renders the glyph. We keep the Octicon-style class names but swap the rendered glyph to a codicon (see Codicon standardization below) — so iconClassForPath is unchanged, and directories (which the tree-view labels with its own default classes) are restyled the same way.

For anything not explicitly mapped, the provider falls through to Pulsar’s DefaultFileIcons, which handles archives, images, PDFs, and binary files — those default classes are covered by the codicon overrides too.

Icon lookup

lib/tranquil-theme-icons.js uses two plain-object lookup tables evaluated in order:

1. ICON_BY_BASENAME — exact filename matches (case-insensitive). Catches dotfiles and extensionless files like Dockerfile, Makefile, LICENSE, and CHANGELOG.
2. ICON_BY_EXT — file extension matches via path.extname() (case-insensitive).

A special case handles .env variants (base.startsWith('.env')), which covers .env, .env.local, .env.production, etc.

Color system

Colors are defined in styles/tranquil-theme-icons.less using a LESS parametric mixin. The mixin body contains all selector/color rules; it is invoked once per theme class with the appropriate reference palette values:

.icon-colors(@code, @config, @data, @graphics, @url, @gray) {
  .tree-view .name[data-name$=".ts"]::before { color: @code; }
  // ...
}

.theme-tranquil-theme-dark  { .icon-colors(#78A4FF, #F2C86B, #64D1C8, #F28AC3, #F3A15B, #A7B0BD); }
.theme-tranquil-theme-light { .icon-colors(#155DFF, #D69E2E, #319795, #D53F8C, #D9730D, #718096); }

At compile time LESS inlines every rule with hardcoded hex values. Since only one theme class is on body at a time, only the matching set applies.

Category system

Six semantic categories, each with one color:

Color	Category	Dark	Light
Blue	Code	#78A4FF	#155DFF
Yellow	Config	#F2C86B	#D69E2E
Teal	Data	#64D1C8	#319795
Pink	Graphics	#F28AC3	#D53F8C
Orange	URL	#F3A15B	#D9730D
Gray	Infrastructure	#A7B0BD	#718096

Codicon standardization (glyphs)

Tranquil’s glyphs are codicons — VS Code’s icon font (@vscode/codicons) — vendored into this package as the standard UI icon set. This replaced the old Atom-era Octicons, which were impoverished for our needs (e.g. file-add, file-directory-create, and plus all mapped to the same glyph, so “new file” and “new folder” were indistinguishable).

Two pieces live in the package:

• styles/codicon.less — the @font-face (loading resources/fonts/codicon.ttf over atom://tranquil-theme-icons/…, because the app CSP blocks data: fonts and resolves relative url() against static/; see the Theme Development “Fonts” quirk) plus the full .codicon-<name> class set, lifted verbatim from the package’s dist/codicon.css. Loaded globally on activation, so .codicon-* is usable everywhere — the tree-view rows and the main-DOM pane-control buttons.
• A scoped override block in styles/tranquil-theme-icons.less — for each Octicon-style class the tree can render (files via our service, folders via the tree-view’s default classes), a rule under .tree-view .name.<class>::before swaps the font-family to "codicon" and sets the matching codicon codepoint. The Octicon rule sets font-size: 16px; we only raise specificity (0,3,1) to swap family + content, so size is preserved. Directories additionally get an open-folder glyph when the entry is .expanded.

Because the glyph swap keys off the class name and the colors key off [data-name], the two systems are independent: the codicon migration touched no color rules, and adding an extension still follows the steps below.

Octicons are not deleted. The Octicon font stays bundled in tranquil-client/static/ for un-owned core surfaces that reference .icon-* (settings-view, tabs, the tree-view’s own add-dialog, the editor fold gutter). Only the tree’s file/folder glyphs move to codicons. A new icon-* class that isn’t in the override block simply renders its Octicon glyph until a codicon mapping is added.

Full mapping reference

Code (blue) — all programming languages, markup, and stylesheets

.ts .tsx .mts .cts .js .jsx .mjs .cjs .py .pyw .ipynb .rb .erb .gemspec Gemfile Rakefile .rs .go .java .kt .kts .c .cpp .cc .h .hpp .sh .bash .zsh .fish .ps1 .php .swift .vue .svelte .astro .dart .lua .r .proto .graphql .gql .clj .cljs .ex .exs .hs .elm .jl .erl .hrl .html .htm .css .scss .less .sass

Config (yellow) — tools, runtimes, and build configuration

.json .jsonc .json5 .yaml .yml .toml .ini .cfg .conf .tf .tfvars .env* package.json Dockerfile cargo.toml .prettierrc .eslintrc .babelrc .editorconfig .nvmrc .npmrc .dockerignore

Data (teal) — structured data, databases, and interchange formats

.csv .tsv .sql .xml

Graphics (pink) — images, vector graphics, and media

.svg .png .jpg .jpeg .gif .webp .ico .tif .tiff .bmp .psd .ai .sketch .fig .mp4 .mov .avi .webm

URL (orange) — unique accent, not shared with any other category

.url

Gray (infrastructure) — docs, plain text, lock files, git files, build artifacts

.txt .rst .adoc .md .markdown .lock .log .patch .diff yarn.lock package-lock.json cargo.lock .gitignore .gitattributes .gitmodules Makefile LICENSE CHANGELOG CONTRIBUTING

Adding a new mapping

New extension: add one line to ICON_BY_EXT in lib/tranquil-theme-icons.js. Then add [data-name$=".ext"]::before to the correct color group in styles/tranquil-theme-icons.less.

New filename: add one line to ICON_BY_BASENAME (key must be lowercase). Then add [data-name="Filename"]::before and [data-name="filename"]::before to the correct color group (both cases, since CSS attribute selectors are case-sensitive).

Color-only rule (no custom icon): you can add a [data-name$=".ext"]::before color rule in the LESS file without touching the JS. DefaultFileIcons will still assign an icon class; the CSS rule just sets its color. Graphics extensions like .png and .jpg work this way.

New category: add a new mixin parameter, update both .icon-colors() call sites with appropriate dark and light hex values from the reference palette in ../reference/src/index.css, then add the corresponding selector group in the mixin body.