Theme Refresh

Branch: kabootit/theme-refresh in tranquil-theme-dark, tranquil-theme-light, and tranquil-browser.

Tranquil’s visual identity was updated across three repos to match the reference design language — warm neutral palette, Inter typography, reference-proportioned spacing, and Phosphor icons replacing the previous mix of Octicons and remote PNGs.

---

Design Tokens

Colors

Role	Light	Dark
Sidebar / dock bg	#F7F6F3	#191814
App bg	#FFFFFF	#1F1E1B
Panel / content	#FFFFFF	#23221F
Dialog bg	#FFFFFF	#272622
Hover state	#EBEBEA	#2D2B27
Border default	#E9E9E7	#34322D
Text primary	#37352F	#E6E1D8
Text secondary	#787774	#B8B1A6
Accent blue	#155DFF	#78A4FF

Typography

All UI chrome uses Inter with system font fallbacks:

Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif

Use case	Size	Weight
Base UI chrome	13px	400
Tab title (inactive)	13px	400
Tab title (active)	13px	500
Status bar	11px	400
Section labels / headings	11px	500
Modal / palette items	13px	400
Modal input	14px	400
Editor content	14px	400
Browser URL bar	13px	400

Anti-aliasing (-webkit-font-smoothing: antialiased) is applied globally via atom-workspace.

Spacing & Sizing

Element	Value
Base border-radius	8px (0.5rem)
Item border-radius	4px
Tree view file row padding	6px top/bottom
Tab padding	8px 12px
Directory separator	1px border
Browser toolbar height	40px
Browser icon size	24px
Browser icon gap	8px
Modal width	48rem
Modal shadow (dark)	0 12px 26px rgba(0,0,0,.30), 0 1px 4px rgba(0,0,0,.22)
Modal shadow (light)	0 8px 18px rgba(15,23,42,.12), 0 1px 3px rgba(15,23,42,.10)

---

tranquil-theme-dark

Color variables (styles/colors.less)

@primary-100:   #191814;  // sidebar / dock bg
@primary-75:    #1F1E1B;  // app bg
@primary-50:    #23221F;  // panel / content
@primary-25:    #34322D;  // border / interactive
@primary-hover: #2D2B27;  // hover state
@neutral:       #E6E1D8;  // text primary
@neutral-dim:   #B8B1A6;  // text secondary
@accent:        #78A4FF;  // accent blue

@model-background:       #272622;
@model-overlay-color:    rgba(8, 8, 7, 0.58);
@model-input-background: @primary-25;

Files changed

File	What changed
styles/colors.less	Warm charcoal palette, blue accent
styles/base.less	Inter 13px global font + anti-aliasing
styles/tree-view.less	14→13px, file row 6px padding, 1px directory borders
styles/tabs.less	8px 12px padding, 13px titles, 500 weight on active tab
styles/status-bar.less	11px font
styles/settings.less	11px 500 section headings, 13px body
styles/model.less	56→48rem width, updated shadow, 13px list items

---

tranquil-theme-light

Color variables (styles/colors.less)

Variable names were renamed from confusing originals (@white: #000000) to semantic names:

@bg-sidebar:   #F7F6F3;
@bg-secondary: #EBEBEA;
@bg-panel:     #FFFFFF;
@text-color:   #37352F;
@text-muted:   #787774;
@border-color: #E9E9E7;
@accent:       #155DFF;

Files changed

File	What changed
styles/colors.less	Reference warm light palette, semantic variable names
styles/base.less	All variable renames, Inter 13px font, sizing updates, editor line-height: 2 → 1.5

---

tranquil-browser

Theme-adaptive toolbar

The browser toolbar adapts to whichever UI theme is active. Pulsar adds .theme-tranquil-theme-dark or .theme-tranquil-theme-light to the workspace when each theme is applied. The browser LESS uses these selectors to swap palettes:

.theme-tranquil-theme-dark  { /* charcoal palette */ }
.theme-tranquil-theme-light { /* warm white palette */ }

No JavaScript is needed — pure CSS selector switching.

Color variables (styles/colors.less)

Both palettes are defined in a single file:

// Dark palette
@dark-bg-strip:  #191814;
@dark-bg-input:  #23221F;
@dark-text:      #E6E1D8;
@dark-border:    #34322D;
@dark-accent:    #78A4FF;

// Light palette
@light-bg-strip: #F7F6F3;
@light-bg-input: #FFFFFF;
@light-text:     #37352F;
@light-border:   #E9E9E7;
@light-accent:   #155DFF;

Phosphor icons

All toolbar icons are Phosphor Icons (regular weight), stored as local SVG files in resources/icons/. They replaced the previous mix of Octicon font characters and remote PNGs hosted on ibb.co.

File	Button
arrow-left.svg	Back
arrow-right.svg	Forward
arrow-clockwise.svg	Refresh
plus.svg	New Tab
star.svg	Save URL / Fav
clock-counter-clockwise.svg	History
printer.svg	Print
push-pin.svg	Remember Position
lightning.svg	Live Reload
code.svg	Dev Tools

Icons are referenced via a local file:// path computed at startup:

const _iconDir = path.join(__dirname, '..', 'resources', 'icons');
const _icon = name => `file://${_iconDir}/${name}.svg`;

Icon tinting is handled by CSS filter — the SVGs are stored as-is (black fill from Phosphor’s source) and rendered to the appropriate color per theme:

// Dark: render as ~#E6E1D8 (cream)
.apm-browser-icon { filter: brightness(0) invert(0.9); }

// Light: render as #37352F (near-black)
.apm-browser-icon { filter: brightness(0) saturate(0%); }

To change an icon, replace the relevant .svg file in resources/icons/ with any other Phosphor icon of the same name, or fetch a new one:

curl -o resources/icons/arrow-left.svg 
  https://raw.githubusercontent.com/phosphor-icons/core/main/assets/regular/arrow-left.svg

Files changed

File	What changed
styles/colors.less	Dual dark/light palette variables
styles/tranquil-browser.less	Theme-adaptive .theme-* blocks, 40px toolbar, 24px icons
lib/tranquil-browser-view.js	All toolbar buttons converted to local SVG <img> tags
resources/icons/*.svg	10 Phosphor SVG files (added)