Theme Refresh

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

Historical. This records the earlier refresh of the default tranquil-theme-dark/light themes. Those have since been superseded by the tranquil-business-* themes as Tranquil’s active/shipped UI themes (the default themes are no longer linked into tranquil-client). For the current theme structure, see Business Themes and Theme Development. The palette below still matches, since the business themes derive from the same reference design.

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)