Refactor Paper Tonic Modern colorscheme and enhance semantic highlighting

- Updated highlights.scm to improve CSS, HTML, and data attribute captures with higher priority.
- Added a new Lua function to display highlight group and color information under the cursor.
- Expanded editor, semantic, syntax, and TreeSitter highlight groups for better visual consistency across languages.
- Created test files for PHP, HTML, CSS, and Lua to validate syntax highlighting.
- Implemented a shell script to test semantic highlights in a Neovim session.
- Simplified colorscheme loading process by removing unnecessary plugin specifications.
This commit is contained in:
Ray Elliott 2025-12-11 21:47:27 +00:00
parent 61400a7c9b
commit 3ad385e285
16 changed files with 1121 additions and 63 deletions

View File

@ -364,35 +364,51 @@ Source of truth for the step-by-step rebuild. Keep this concise and up to date.
- [x] Set up colorscheme loading mechanism
## Phase 11.4 — Base vim highlight groups
- [ ] Create `lua/paper-tonic-modern/groups/editor.lua`
- [ ] Map Paper Tonic colors to base groups: Normal, Comment, LineNr, CursorLine, etc.
- [ ] Create `lua/paper-tonic-modern/groups/syntax.lua`
- [ ] Map to syntax groups: Function, String, Keyword, Identifier, etc.
- [ ] Test with simple Lua file to verify base colors work
- [x] Create `lua/paper-tonic-modern/groups/editor.lua`
- [x] Map Paper Tonic colors to base groups: Normal, Comment, LineNr, CursorLine, etc.
- [x] Create `lua/paper-tonic-modern/groups/syntax.lua`
- [x] Map to syntax groups: Function, String, Keyword, Identifier, etc.
- [x] Test with simple Lua file to verify base colors work
## Phase 11.5 — Modern TreeSitter highlight groups
- [ ] Create `lua/paper-tonic-modern/groups/treesitter.lua`
- [ ] Map modern `@*` groups to Paper Tonic colors:
- [x] Create `lua/paper-tonic-modern/groups/treesitter.lua`
- [x] Map modern `@*` groups to Paper Tonic colors:
- Core: @variable, @function, @keyword, @string, @number, @boolean, @comment
- Types: @type, @property, @field, @parameter
- Operators: @operator, @punctuation.delimiter, @punctuation.bracket
- Language constructs: @keyword.function, @keyword.return, @keyword.conditional
- [ ] Use `:help treesitter-highlight-groups` as reference
- [ ] Test with multiple languages: Lua, PHP, JavaScript, HTML, CSS
- [x] Use `:help treesitter-highlight-groups` as reference
- [x] Test with multiple languages: Lua, PHP, JavaScript, HTML, CSS
## Phase 11.6 — Language-specific TreeSitter groups
- [ ] Add language-specific overrides (e.g., @variable.php, @tag.html)
- [ ] Ensure HTML tags, CSS selectors, PHP variables have appropriate colors
- [ ] Test across primary languages (HTML, PHP, JS, CSS, Markdown)
- [x] Add language-specific overrides (e.g., @variable.php, @tag.html)
- [x] Ensure HTML tags, CSS selectors, PHP variables have appropriate colors
- [x] Test across primary languages (HTML, PHP, JS, CSS, Markdown)
- [x] Added comprehensive language-specific groups:
- CSS/SCSS: properties, variables, functions (green c2 tones)
- HTML: tags, attributes, delimiters (blue c3)
- PHP: variables, functions, methods, built-ins (primary brownish-red)
- JavaScript/TypeScript: variables, functions, properties, JSX tags (primary + blue for JSX)
- Lua: variables, functions, built-ins (primary)
- Markdown: headings, links, code blocks (primary for structure)
- JSON: properties, strings, numbers (neutral)
- Bash: variables, functions, built-ins (primary)
## Phase 11.7 — Semantic highlighting (custom captures)
- [ ] Create `lua/paper-tonic-modern/groups/semantic.lua`
- [ ] Define your custom semantic captures:
- [x] Create `lua/paper-tonic-modern/groups/semantic.lua`
- [x] Define your custom semantic captures:
- @CssClassName (for CSS .class and HTML class="" - same color)
- @CssIdentifier (for CSS #id and HTML id="" - same color)
- @DataAttribute, @DataAttributeValue (HTML data-* attributes)
- @cssPseudoClass, @cssNestingSelector, @CssUniversalSelector (CSS-specific)
- [ ] Verify cross-language consistency: class names in HTML match CSS
- [x] Verify cross-language consistency: class names in HTML match CSS
- [x] Implemented semantic highlights:
- CSS: @CssClassName (green c2), @CssIdentifier (strong green c2_strong), @cssPseudoClass (weak green c2_weak)
- CSS: @cssNestingSelector (strong green), @CssUniversalSelector (SpecialChar)
- CSS: @CssProp (primary_weak), @CssPropertyValue (bold), @CssUnit (Delimiter)
- HTML: @ClassNameAttribute, @IdAttribute, @DataAttribute (all fg_weak for attribute names)
- HTML: @DataAttributeValue (Function)
- Cross-language: class values and #id values in HTML use same colors as CSS selectors
- [ ] Test with existing custom queries (after/queries/css/highlights.scm, after/queries/html/highlights.scm)
## Phase 11.8 — Plugin highlight groups

View File

@ -100,6 +100,48 @@ Record every decision here with a short rationale. Append new entries; do not re
- **Loading order**: Structured to load groups in logical sequence (editor → syntax → treesitter → semantic → lsp → plugins)
- **Validation**: Colorscheme loads successfully, highlights applied correctly
- **Language color consistency**: All documentation updated to reflect that each language maintains its color identity everywhere (PHP=primary, HTML=blue, CSS=green, templates=magenta)
- 2025-12-11: Colorscheme Phase 11.4:
- **Editor highlights**: Comprehensive UI element highlighting (Normal, StatusLine, CursorLine, Visual, Search, Pmenu, Folds, Diffs, Spelling, Messages)
- **Syntax highlights**: Traditional Vim syntax groups (Comment, String, Function, Keyword, Type, etc.) with language-specific overrides
- **Language support**: Added specific highlighting for CSS (green/c2), HTML (blue/c3), Lua, Markdown, JSON, JavaScript/TypeScript, PHP
- **Color verification**: All key groups tested and verified (Normal=#8c8c8c on #ffffff, htmlTag=#005faf, cssClassName=#008700)
- **CSS classes**: Green tones (c2) for CSS syntax elements
- **HTML tags**: Blue tones (c3) for HTML structure
- **PHP syntax**: Primary brownish-red tones for PHP keywords/functions
- **Test file**: Created test-colorscheme.lua for visual verification
- 2025-12-11: Colorscheme Phase 11.5:
- **TreeSitter highlights**: Comprehensive modern `@*` highlight groups implemented
- **Core groups**: @variable, @function, @keyword, @string, @number, @boolean, @comment, @type, @property, @operator, @punctuation
- **Language constructs**: @keyword.function, @keyword.return, @keyword.conditional, @keyword.repeat, @keyword.exception
- **Markup**: @markup.strong, @markup.italic, @markup.heading (1-6), @markup.link, @markup.raw, @markup.list
- **Template languages**: @punctuation.special.twig, @keyword.jinja (magenta c5 for template syntax)
- **Diagnostics**: @diff.plus, @diff.minus, @diff.delta
- **Debug tool**: Added `<leader>hi` keymap to show highlight group and resolved colors under cursor
- **Validation**: All TreeSitter groups tested and verified with correct palette colors
- 2025-12-11: Colorscheme Phase 11.6:
- **Language-specific TreeSitter groups**: Enhanced with comprehensive per-language overrides
- **CSS/SCSS**: Properties, variables ($var, --custom), functions, tag selectors (green c2 tones)
- **HTML**: Tags, attributes, delimiters (blue c3 throughout)
- **PHP**: Variables ($var), functions, methods, built-ins ($this, $GLOBALS), properties (primary brownish-red)
- **JavaScript/TypeScript**: Variables, functions, properties, built-ins (this, arguments), JSX/TSX tags (primary + blue for JSX)
- **Lua**: Variables, functions, built-ins (_G, _VERSION), properties (primary)
- **Markdown**: Headings (1-6), links, code blocks, inline code (primary for structure)
- **JSON**: Properties, strings, numbers, booleans (neutral colors)
- **Bash/Shell**: Variables, functions, built-ins, strings (primary)
- **Color consistency verified**: HTML=#005faf (blue), CSS properties=#7c6666 (primary_weak), PHP variables=#7c6666
- **Test files**: Created test-html.html, test-css.css, test-colors.php for validation
- 2025-12-11: Colorscheme Phase 11.7:
- **Semantic highlighting**: Custom TreeSitter captures for cross-language consistency
- **CSS semantic captures**: @CssClassName (green c2), @CssIdentifier (strong green c2_strong, bold), @cssPseudoClass (weak green c2_weak), @cssNestingSelector (strong green), @CssUniversalSelector
- **CSS properties**: @CssProp (primary_weak), @CssPropertyValue (bold fg), @CssUnit (delimiter)
- **CSS media queries**: @cssMediaFeatureName, @cssMediaQuery, @cssMediaQueryValue
- **HTML attributes**: @ClassNameAttribute, @IdAttribute, @DataAttribute (all fg_weak for attribute names)
- **HTML data attributes**: @DataAttributeValue (Function color)
- **Cross-language consistency**: Critical feature - class="my-class" in HTML uses same color (@CssClassName, green c2) as .my-class in CSS; id="my-id" in HTML uses same color (@CssIdentifier, green c2_strong) as #my-id in CSS
- **Visual benefits**: Easy to visually match selectors between HTML and CSS files; consistent color coding across languages
- **Custom queries**: Leverages existing after/queries/css/highlights.scm and after/queries/html/highlights.scm
- **Priority fix**: Added `(#set! priority 200)` to all custom captures to override built-in captures (@string priority 99, @constant default priority)
- **Technical note**: Custom queries require `;extends` directive and higher priority than built-in captures to work correctly
## Project-Local Configuration (design)

View File

@ -1,18 +1,42 @@
(id_selector (id_name) @CssIdentifier)
(id_selector (id_name)) @CssIdSelector
(tag_name) @HtmlTagName
;extends
(class_selector (class_name) @CssClassName)
(selectors (pseudo_class_selector (class_name) @cssPseudoClass))
; CSS Selectors - ID selectors (#my-id)
; Priority: Must override default @constant capture
(id_selector "#" @punctuation.delimiter)
(id_selector (id_name) @CssIdentifier (#set! priority 200))
; CSS Selectors - Class selectors (.my-class)
(class_selector "." @punctuation.delimiter)
(class_selector (class_name) @CssClassName (#set! priority 200))
; CSS Selectors - Pseudo-class selectors (:hover, :focus, etc.)
(pseudo_class_selector ":" @punctuation.delimiter)
(pseudo_class_selector (class_name) @cssPseudoClass (#set! priority 200))
; CSS Selectors - Pseudo-element selectors (::before, ::after)
(pseudo_element_selector "::" @punctuation.delimiter)
(pseudo_element_selector (tag_name) @cssPseudoElement (#set! priority 200))
; CSS Selectors - Nesting selector (&)
(nesting_selector) @cssNestingSelector
; need to find out how to make this more specific?
; CSS Selectors - Universal selector (*)
(universal_selector) @CssUniversalSelector
((property_name) (_)) @CssProp
; CSS Selectors - Tag/element selectors (div, p, etc.)
(tag_name) @HtmlTagName
(unit) @CssUnit
; CSS Properties
((property_name) @CssProp)
; CSS Property values
(declaration (property_name) (_) @CssPropertyValue)
(media_statement (feature_query (feature_name) @cssMediaFeatureName (_ (unit) @cssMediaQueryValueUnit) @cssMediaQueryValue) @cssMediaQuery)
; CSS Units (px, em, rem, %, etc.)
(unit) @CssUnit
; CSS Media queries
(media_statement
(feature_query
(feature_name) @cssMediaFeatureName
(_ (unit) @cssMediaQueryValueUnit) @cssMediaQueryValue) @cssMediaQuery)

View File

@ -1,17 +1,20 @@
(start_tag
(attribute
(attribute_name) @ClassNameAttribute (#eq? @ClassNameAttribute "class")
(quoted_attribute_value
(attribute_value) @CssClassName )))
;extends
(start_tag
(attribute
(attribute_name) @IdAttribute (#eq? @IdAttribute "id")
(quoted_attribute_value
(attribute_value) @CssIdentifier )))
; HTML class attribute values - should match CSS .class-name color
; Priority: Must override default @string capture (priority 99)
(attribute
(attribute_name) @ClassNameAttribute (#eq? @ClassNameAttribute "class")
(quoted_attribute_value
(attribute_value) @CssClassName (#set! priority 200)))
(start_tag
(attribute
(attribute_name) @DataAttribute (#match? @DataAttribute "^data-")
(quoted_attribute_value
(attribute_value) @DataAttributeValue )))
; HTML id attribute values - should match CSS #id-name color
(attribute
(attribute_name) @IdAttribute (#eq? @IdAttribute "id")
(quoted_attribute_value
(attribute_value) @CssIdentifier (#set! priority 200)))
; HTML data-* attributes
(attribute
(attribute_name) @DataAttribute (#match? @DataAttribute "^data-")
(quoted_attribute_value
(attribute_value) @DataAttributeValue (#set! priority 200)))

View File

@ -46,3 +46,138 @@ end, { desc = 'Show all errors in quickfix', silent = true })
map('n', '[d', vim.diagnostic.goto_prev, { desc = 'Go to previous diagnostic', silent = true })
map('n', ']d', vim.diagnostic.goto_next, { desc = 'Go to next diagnostic', silent = true })
map('n', '<leader>xd', vim.diagnostic.open_float, { desc = 'Show diagnostic under cursor', silent = true })
-- Debug: Show highlight group and color under cursor
map('n', '<leader>hi', function()
local cursor_pos = vim.api.nvim_win_get_cursor(0)
local row, col = cursor_pos[1] - 1, cursor_pos[2]
-- Get all highlight groups at cursor position
local ts_hl = vim.treesitter.get_captures_at_pos(0, row, col)
local synID = vim.fn.synID(row + 1, col + 1, 1)
local synName = vim.fn.synIDattr(synID, 'name')
local synTrans = vim.fn.synIDattr(vim.fn.synIDtrans(synID), 'name')
-- Helper to resolve highlight links
local function resolve_hl(name)
local hl = vim.api.nvim_get_hl(0, { name = name })
local max_depth = 10
local depth = 0
while hl.link and depth < max_depth do
name = hl.link
hl = vim.api.nvim_get_hl(0, { name = name })
depth = depth + 1
end
return hl, name
end
local lines = {
'=== Highlight Info Under Cursor ===',
'',
'Position: row=' .. row .. ' col=' .. col,
'',
}
-- TreeSitter captures
if #ts_hl > 0 then
table.insert(lines, 'TreeSitter Captures:')
for _, capture in ipairs(ts_hl) do
local cap_name = '@' .. capture.capture
local hl, resolved_name = resolve_hl(cap_name)
table.insert(lines, string.format(' %s', cap_name))
if resolved_name ~= cap_name then
table.insert(lines, string.format(' → resolves to: %s', resolved_name))
end
if hl.fg then
table.insert(lines, string.format(' fg: #%06x', hl.fg))
end
if hl.bg then
table.insert(lines, string.format(' bg: #%06x', hl.bg))
end
local styles = {}
if hl.bold then table.insert(styles, 'bold') end
if hl.italic then table.insert(styles, 'italic') end
if hl.underline then table.insert(styles, 'underline') end
if #styles > 0 then
table.insert(lines, ' style: ' .. table.concat(styles, ', '))
end
end
table.insert(lines, '')
end
-- Syntax group
if synName ~= '' then
table.insert(lines, 'Syntax Group: ' .. synName)
if synTrans ~= synName and synTrans ~= '' then
table.insert(lines, 'Translates to: ' .. synTrans)
end
local hl, resolved_name = resolve_hl(synTrans ~= '' and synTrans or synName)
if hl.fg then
table.insert(lines, string.format(' fg: #%06x', hl.fg))
end
if hl.bg then
table.insert(lines, string.format(' bg: #%06x', hl.bg))
end
table.insert(lines, '')
end
-- Final applied highlight (use TreeSitter if available, otherwise syntax)
local final_hl_name = nil
if #ts_hl > 0 then
final_hl_name = '@' .. ts_hl[1].capture
elseif synTrans ~= '' then
final_hl_name = synTrans
elseif synName ~= '' then
final_hl_name = synName
end
if final_hl_name then
local final_hl, final_resolved = resolve_hl(final_hl_name)
table.insert(lines, 'Applied Highlight: ' .. final_resolved)
if final_hl.fg then
table.insert(lines, string.format(' fg: #%06x', final_hl.fg))
else
table.insert(lines, ' fg: NONE')
end
if final_hl.bg then
table.insert(lines, string.format(' bg: #%06x', final_hl.bg))
else
table.insert(lines, ' bg: NONE')
end
local styles = {}
if final_hl.bold then table.insert(styles, 'bold') end
if final_hl.italic then table.insert(styles, 'italic') end
if final_hl.underline then table.insert(styles, 'underline') end
if final_hl.undercurl then table.insert(styles, 'undercurl') end
if #styles > 0 then
table.insert(lines, ' style: ' .. table.concat(styles, ', '))
end
end
-- Show in a floating window
local buf = vim.api.nvim_create_buf(false, true)
vim.api.nvim_buf_set_lines(buf, 0, -1, false, lines)
local width = 0
for _, line in ipairs(lines) do
width = math.max(width, #line)
end
width = math.min(width + 2, vim.o.columns - 4)
local height = #lines
local opts = {
relative = 'cursor',
width = width,
height = height,
row = 1,
col = 0,
style = 'minimal',
border = 'rounded',
}
vim.api.nvim_open_win(buf, false, opts)
end, { desc = 'Show highlight group and color under cursor', silent = true })

View File

@ -1,9 +1,132 @@
-- Paper Tonic Modern - Editor Highlight Groups
-- Base Vim/Neovim UI elements
local colors = require('paper-tonic-modern.colors')
local c = require('paper-tonic-modern.colors')
return {
-- Core editor elements (to be implemented in Phase 11.4)
Normal = { fg = colors.fg, bg = colors.bg },
-- ============================================================================
-- Core Editor Elements
-- ============================================================================
Normal = { fg = c.fg, bg = c.bg },
NormalFloat = { fg = c.fg, bg = c.NONE },
FloatBorder = { fg = c.fg_stronger, bg = c.NONE },
-- ============================================================================
-- Cursor & Line Highlighting
-- ============================================================================
Cursor = { reverse = true },
CursorIM = 'Cursor',
CursorLine = { bg = c.bg_hl },
CursorLineNr = { fg = c.fg_weak, bold = true },
CursorColumn = { bg = c.bg_hl },
-- ============================================================================
-- Line Numbers & Columns
-- ============================================================================
LineNr = { fg = c.fg_weak },
SignColumn = { fg = c.NONE, bg = c.NONE },
ColorColumn = { bg = c.bg_hl_weak },
-- ============================================================================
-- Visual Selection & Search
-- ============================================================================
Visual = { bg = c.bg_hl_special },
VisualNOS = { fg = c.fg_strong, bg = c.bg_hl_special, bold = true },
Search = { bg = c.bg_hl_special },
IncSearch = { reverse = true },
MatchParen = { bg = c.bg_hl_special_alt_strong, bold = true, underline = true, sp = c.fg_stronger },
-- ============================================================================
-- Status Line & Tab Line
-- ============================================================================
StatusLine = { fg = c.fg, bg = c.bg_ui, italic = true },
StatusLineNC = { fg = c.fg_weaker, bg = c.bg_ui, italic = true },
StatusLineTerm = 'StatusLine',
StatusLineTermNC = 'StatusLineNC',
TabLine = 'StatusLineNC',
TabLineFill = { fg = c.bg_ui, bg = c.bg_ui },
TabLineSel = 'StatusLine',
-- ============================================================================
-- Window Separators & Misc UI
-- ============================================================================
VertSplit = { fg = c.bg_hl_strong },
Title = { bold = true },
Directory = { fg = c.primary_weak, bold = true },
-- ============================================================================
-- Popup Menu (Completion)
-- ============================================================================
Pmenu = { fg = c.fg, bg = c.bg_ui },
PmenuSel = { fg = c.fg_strong, bg = c.bg_ui, bold = true },
PmenuSbar = 'Pmenu',
PmenuThumb = 'Pmenu',
WildMenu = { fg = c.fg_strong, bg = c.bg_ui, bold = true },
-- ============================================================================
-- Folds
-- ============================================================================
Folded = { fg = c.fg_strong, bold = true },
FoldColumn = { fg = c.fg_weak },
-- ============================================================================
-- Diffs
-- ============================================================================
DiffAdd = { bg = c.bg_success },
DiffChange = { bg = c.bg_modified },
DiffDelete = { bg = c.bg_fail },
DiffText = { fg = c.fg_stronger, bg = c.bg_success },
-- ============================================================================
-- Spelling
-- ============================================================================
SpellBad = { fg = c.alert_strong, bg = c.bg_error_weak },
SpellCap = { fg = c.alert, bg = c.bg_error_weak },
SpellLocal = { fg = c.alert_weak, bg = c.bg_error_weak },
SpellRare = { fg = c.alert_weak, bg = c.bg_error_weak },
-- ============================================================================
-- Messages & Prompts
-- ============================================================================
ErrorMsg = { fg = c.alert, bold = true },
WarningMsg = { fg = c.alert, bold = true },
Question = { fg = c.question, bold = true },
ModeMsg = { fg = c.question },
MoreMsg = { fg = c.question },
-- ============================================================================
-- Special Characters & Whitespace
-- ============================================================================
NonText = { fg = c.fg_weak },
EndOfBuffer = 'Comment',
Whitespace = 'NonText',
SpecialKey = 'SpecialChar',
Conceal = 'Noise',
-- ============================================================================
-- QuickFix
-- ============================================================================
QuickFixLine = { bg = c.bg_hl_special_weak, bold = true },
-- ============================================================================
-- Debug
-- ============================================================================
debugPC = 'ColorColumn',
debugBreakpoint = 'ErrorMsg',
}

View File

@ -1,9 +1,88 @@
-- Paper Tonic Modern - Semantic Highlight Groups
-- Custom semantic captures for language-specific highlighting
-- These are defined in after/queries/*/highlights.scm files
local colors = require('paper-tonic-modern.colors')
local c = require('paper-tonic-modern.colors')
return {
-- Semantic groups (to be implemented in Phase 11.7)
-- Custom captures like @CssClassName, @CssIdentifier, etc.
-- ============================================================================
-- CSS Semantic Captures
-- ============================================================================
-- Class selectors in CSS (.class-name)
-- Uses green (c2) to match CSS language color
['@CssClassName'] = { fg = c.c2 },
-- ID selectors in CSS (#id-name)
-- Uses stronger green (c2_strong) with bold for emphasis
['@CssIdentifier'] = { fg = c.c2_strong, bold = true },
-- ID selector wrapper (the whole #id construct)
['@CssIdSelector'] = 'SpecialChar',
-- Pseudo-class selectors (:hover, :focus, etc.)
['@cssPseudoClass'] = { fg = c.c2_weak },
-- Nesting selector (& in SCSS/modern CSS)
['@cssNestingSelector'] = { fg = c.c2_strong },
-- Universal selector (*)
['@CssUniversalSelector'] = 'SpecialChar',
-- CSS properties
['@CssProp'] = { fg = c.primary_weak },
-- CSS property values
['@CssPropertyValue'] = { fg = c.fg, bold = true },
-- CSS units (px, em, rem, %, etc.)
['@CssUnit'] = 'Delimiter',
-- Media query features
['@cssMediaFeatureName'] = 'Function',
['@cssMediaQuery'] = 'Function',
['@cssMediaQueryValue'] = 'cssAtRule',
['@cssMediaQueryValueUnit'] = 'cssMediaQueryValue',
-- HTML tag names in CSS selectors (div, p, span, etc.)
['@HtmlTagName'] = { fg = c.c3 },
-- ============================================================================
-- HTML Semantic Captures
-- ============================================================================
-- IMPORTANT: Cross-language consistency
-- Class names in HTML class="" should use the SAME color as CSS .class
-- This creates visual consistency when working with HTML and CSS together
-- Class attribute in HTML (class="...")
-- Uses @CssClassName to match CSS .class-name color (green c2)
['@ClassNameAttribute'] = { fg = c.fg_weak }, -- The attribute name itself
-- The class value uses @CssClassName (handled by query, falls back to green c2)
-- ID attribute in HTML (id="...")
-- Uses @CssIdentifier to match CSS #id-name color (strong green c2_strong)
['@IdAttribute'] = { fg = c.fg_weak }, -- The attribute name itself
-- The id value uses @CssIdentifier (handled by query, falls back to c2_strong)
-- Data attributes (data-*)
['@DataAttribute'] = { fg = c.fg_weak },
['@DataAttributeValue'] = 'Function',
-- ============================================================================
-- Cross-Language Consistency Notes
-- ============================================================================
-- The custom queries in after/queries/ ensure:
-- 1. CSS .my-class and HTML class="my-class" both use @CssClassName (green c2)
-- 2. CSS #my-id and HTML id="my-id" both use @CssIdentifier (green c2_strong)
-- 3. This makes it easy to visually match selectors between HTML and CSS files
--
-- Example:
-- HTML: <div class="container" id="main">
-- "container" → green (c2)
-- "main" → strong green (c2_strong, bold)
--
-- CSS: .container { ... } → green (c2)
-- #main { ... } → strong green (c2_strong, bold)
}

View File

@ -1,9 +1,225 @@
-- Paper Tonic Modern - Syntax Highlight Groups
-- Traditional Vim syntax groups
local colors = require('paper-tonic-modern.colors')
local c = require('paper-tonic-modern.colors')
return {
-- Syntax groups (to be implemented in Phase 11.4)
Comment = { fg = colors.fg_weak },
-- ============================================================================
-- Text Analysis
-- ============================================================================
Comment = { fg = c.fg_weaker, italic = true, bold = true },
-- ============================================================================
-- Literals
-- ============================================================================
Constant = { fg = c.fg_strong, italic = true },
String = { fg = c.fg_strong, italic = true },
Character = 'String',
Number = 'String',
Boolean = 'String',
Float = 'Number',
-- ============================================================================
-- Identifiers
-- ============================================================================
Identifier = { fg = c.primary_weak, bold = true },
Function = { fg = c.primary_strong, bold = true },
-- ============================================================================
-- Syntax
-- ============================================================================
Statement = { fg = c.fg_weak },
Conditional = { fg = c.fg_strong, bold = true },
Repeat = 'Conditional',
Label = { fg = c.fg_stronger, bold = true },
Operator = { fg = c.fg, bold = true },
Keyword = { fg = c.fg_weaker, bold = true },
Exception = { fg = c.fg_exception, bold = true },
-- ============================================================================
-- Preprocessor
-- ============================================================================
PreProc = { fg = c.fg_weak },
Include = { fg = c.fg_weak, bold = true },
Define = 'Include',
Macro = { fg = c.fg, bold = true },
PreCondit = 'Macro',
-- ============================================================================
-- Types
-- ============================================================================
Type = { fg = c.primary, bold = true },
StorageClass = { fg = c.primary },
Structure = 'StorageClass',
Typedef = 'StorageClass',
-- ============================================================================
-- Special
-- ============================================================================
Special = { fg = c.primary_stronger },
SpecialChar = { fg = c.primary_stronger, bold = true },
Tag = { fg = c.primary_strong, bold = true },
Delimiter = { fg = c.fg_weaker },
SpecialComment = { fg = c.fg_exception, bold = true },
Debug = 'WarningMsg',
-- ============================================================================
-- Miscellaneous
-- ============================================================================
Underlined = { underline = true },
Ignore = { fg = c.fg_weak },
Error = { fg = c.alert_strong, bold = true },
Todo = { fg = c.alert_strong },
-- ============================================================================
-- Language-Specific: CSS
-- ============================================================================
cssAtRule = 'Label',
cssAttr = 'Keyword',
cssAttrComma = 'Delimiter',
cssAttrRegion = 'Keyword',
cssBraces = 'Delimiter',
cssClassName = { fg = c.c2 },
cssClassNameDot = 'Delimiter',
cssFlexibleBoxAttr = 'cssAttr',
cssFunctionComma = 'Delimiter',
cssImportant = 'Exception',
cssProp = { fg = c.primary_weak },
cssPseudoClass = { fg = c.c2_weak },
cssPseudoClassId = 'Operator',
cssSelectorOp = 'Operator',
cssTagName = 'htmlTagName',
cssUnitDecorators = 'Type',
-- SCSS
scssAmpersand = 'cssNestingSelector',
scssAttribute = 'Delimiter',
scssBoolean = 'Boolean',
scssDefault = 'Keyword',
scssElse = 'scssIf',
scssMixinName = 'Function',
scssIf = 'PreCondit',
scssInclude = 'Include',
scssSelectorChar = 'Delimiter',
scssDefinition = 'PreProc',
scssSelectorName = 'cssClassName',
scssVariable = 'Define',
scssVariableAssignment = 'Operator',
-- Custom CSS (from custom queries)
cssIdentifier = { fg = c.c2_strong, bold = true },
cssIdSelector = 'SpecialChar',
cssNestingSelector = { fg = c.c2_strong },
cssUniversalSelector = 'SpecialChar',
cssPropertyValue = { fg = c.fg, bold = true },
cssMediaQuery = 'Function',
cssMediaQueryValue = 'cssAtRule',
cssMediaQueryValueUnit = 'cssMediaQueryValue',
cssMediaFeatureName = 'cssMediaQuery',
cssUnit = 'Delimiter',
-- ============================================================================
-- Language-Specific: HTML
-- ============================================================================
htmlArg = 'Label',
htmlBold = { bold = true },
htmlTitle = { fg = c.fg_stronger, bold = true },
htmlEndTag = 'htmlTag',
htmlH1 = 'markdownH1',
htmlH2 = 'markdownH2',
htmlH3 = 'markdownH3',
htmlH4 = 'markdownH4',
htmlH5 = 'markdownH5',
htmlH6 = 'markdownH6',
htmlItalic = { italic = true },
htmlSpecialTagName = 'Keyword',
htmlTag = { fg = c.c3 },
htmlTagName = { fg = c.c3 },
htmlTagN = 'htmlTagName',
-- ============================================================================
-- Language-Specific: Lua
-- ============================================================================
luaBraces = 'Structure',
luaBrackets = 'Delimiter',
luaBuiltin = 'Keyword',
luaComma = 'Delimiter',
luaFuncArgName = 'Identifier',
luaFuncCall = 'Function',
luaFuncKeyword = 'Type',
luaFuncName = 'Function',
luaFuncParens = 'Delimiter',
luaFuncTable = 'Structure',
luaIn = 'Repeat',
luaLocal = 'Type',
luaParens = 'Delimiter',
-- ============================================================================
-- Language-Specific: Markdown
-- ============================================================================
markdownH1 = { fg = c.primary_strong, bold = true },
markdownH2 = { fg = c.primary, bold = true },
markdownH3 = { fg = c.primary_weak, bold = true },
markdownH4 = { fg = c.primary_weak },
markdownH5 = { fg = c.primary_weak },
markdownH6 = { fg = c.primary_weak },
markdownBold = { bold = true },
markdownItalic = { italic = true },
markdownCode = { fg = c.fg_strong },
markdownCodeBlock = 'markdownCode',
markdownCodeDelimiter = 'Delimiter',
markdownUrl = { fg = c.c3, underline = true },
markdownLink = { fg = c.primary },
markdownLinkText = { fg = c.primary },
-- ============================================================================
-- Language-Specific: JSON
-- ============================================================================
jsonBraces = 'luaBraces',
jsonEscape = 'SpecialChar',
jsonKeywordMatch = 'Operator',
jsonNull = 'Constant',
jsonQuote = 'Delimiter',
jsonString = 'String',
jsonStringSQError = 'Exception',
-- ============================================================================
-- Language-Specific: JavaScript/TypeScript
-- ============================================================================
jsFuncBlock = 'Function',
jsObjectKey = 'Type',
jsReturn = 'Keyword',
jsVariableDef = 'Identifier',
-- ============================================================================
-- Language-Specific: PHP
-- ============================================================================
phpVarSelector = 'Identifier',
phpIdentifier = 'Identifier',
phpFunction = 'Function',
phpClass = 'Type',
phpKeyword = 'Keyword',
phpSuperglobal = 'Special',
phpMemberSelector = 'Operator',
-- ============================================================================
-- Noise (low-priority syntax elements)
-- ============================================================================
Noise = { fg = c.fg_weaker },
}

View File

@ -1,9 +1,297 @@
-- Paper Tonic Modern - TreeSitter Highlight Groups
-- Modern @* highlight groups for TreeSitter
local colors = require('paper-tonic-modern.colors')
local c = require('paper-tonic-modern.colors')
return {
-- TreeSitter groups (to be implemented in Phase 11.5)
['@comment'] = { fg = colors.fg_weak },
-- ============================================================================
-- Core TreeSitter Groups
-- ============================================================================
['@variable'] = { fg = c.primary_weak },
['@variable.builtin'] = { fg = c.primary, bold = true },
['@variable.parameter'] = { fg = c.fg },
['@variable.member'] = { fg = c.primary_weak },
['@constant'] = { fg = c.fg_strong, italic = true },
['@constant.builtin'] = { fg = c.fg_strong, italic = true, bold = true },
['@constant.macro'] = { fg = c.fg, bold = true },
['@module'] = { fg = c.primary },
['@label'] = { fg = c.fg_stronger, bold = true },
-- ============================================================================
-- Literals
-- ============================================================================
['@string'] = { fg = c.fg_strong, italic = true },
['@string.documentation'] = { fg = c.fg_weak, italic = true },
['@string.regex'] = { fg = c.fg_strong, bold = true },
['@string.escape'] = { fg = c.primary_stronger, bold = true },
['@string.special'] = { fg = c.primary_stronger },
['@string.special.symbol'] = { fg = c.primary },
['@character'] = '@string',
['@character.special'] = '@string.escape',
['@number'] = { fg = c.fg_strong, italic = true },
['@number.float'] = '@number',
['@boolean'] = { fg = c.fg_strong, italic = true },
-- ============================================================================
-- Functions
-- ============================================================================
['@function'] = { fg = c.primary_strong, bold = true },
['@function.builtin'] = { fg = c.primary_stronger },
['@function.call'] = '@function',
['@function.macro'] = { fg = c.fg, bold = true },
['@function.method'] = '@function',
['@function.method.call'] = '@function',
['@constructor'] = { fg = c.primary, bold = true },
-- ============================================================================
-- Keywords
-- ============================================================================
['@keyword'] = { fg = c.fg_weaker, bold = true },
['@keyword.function'] = { fg = c.primary, bold = true },
['@keyword.operator'] = { fg = c.fg, bold = true },
['@keyword.return'] = { fg = c.fg_strong, bold = true },
['@keyword.conditional'] = { fg = c.fg_strong, bold = true },
['@keyword.repeat'] = '@keyword.conditional',
['@keyword.import'] = { fg = c.fg_weak, bold = true },
['@keyword.exception'] = { fg = c.fg_exception, bold = true },
-- ============================================================================
-- Operators & Punctuation
-- ============================================================================
['@operator'] = { fg = c.fg, bold = true },
['@punctuation.delimiter'] = { fg = c.fg_weaker },
['@punctuation.bracket'] = { fg = c.fg_weaker },
['@punctuation.special'] = { fg = c.primary_stronger },
-- ============================================================================
-- Types
-- ============================================================================
['@type'] = { fg = c.primary, bold = true },
['@type.builtin'] = { fg = c.primary, bold = true },
['@type.definition'] = '@type',
['@type.qualifier'] = { fg = c.primary },
['@attribute'] = { fg = c.fg_weak },
['@property'] = { fg = c.primary_weak },
-- ============================================================================
-- Identifiers
-- ============================================================================
['@variable.parameter'] = { fg = c.fg },
['@variable.member'] = { fg = c.primary_weak },
-- ============================================================================
-- Text & Comments
-- ============================================================================
['@comment'] = { fg = c.fg_weaker, italic = true, bold = true },
['@comment.documentation'] = { fg = c.fg_weak, italic = true },
['@comment.error'] = { fg = c.alert_strong, bold = true },
['@comment.warning'] = { fg = c.alert, bold = true },
['@comment.todo'] = { fg = c.alert_strong },
['@comment.note'] = { fg = c.alert_weak },
-- ============================================================================
-- Markup (Markdown, etc.)
-- ============================================================================
['@markup.strong'] = { bold = true },
['@markup.italic'] = { italic = true },
['@markup.underline'] = { underline = true },
['@markup.strike'] = { strikethrough = true },
['@markup.heading'] = { fg = c.primary_strong, bold = true },
['@markup.heading.1'] = { fg = c.primary_strong, bold = true },
['@markup.heading.2'] = { fg = c.primary, bold = true },
['@markup.heading.3'] = { fg = c.primary_weak, bold = true },
['@markup.heading.4'] = { fg = c.primary_weak },
['@markup.heading.5'] = { fg = c.primary_weak },
['@markup.heading.6'] = { fg = c.primary_weak },
['@markup.link'] = { fg = c.primary },
['@markup.link.label'] = { fg = c.primary },
['@markup.link.url'] = { fg = c.c3, underline = true },
['@markup.raw'] = { fg = c.fg_strong },
['@markup.raw.block'] = '@markup.raw',
['@markup.list'] = { fg = c.fg_strong },
['@markup.list.checked'] = { fg = c.success },
['@markup.list.unchecked'] = { fg = c.fg_weak },
-- ============================================================================
-- Language-Specific: CSS (Green - c2)
-- ============================================================================
['@property.css'] = { fg = c.primary_weak },
['@type.css'] = { fg = c.c2 }, -- Tag selectors
['@string.css'] = { fg = c.fg, bold = true },
['@number.css'] = { fg = c.fg, bold = true },
['@function.css'] = { fg = c.fg_strong },
['@operator.css'] = 'Noise',
-- CSS-specific TreeSitter captures
['@variable.css'] = { fg = c.c2_weak }, -- CSS variables (--custom-property)
['@constant.css'] = { fg = c.fg_strong },
-- ============================================================================
-- Language-Specific: SCSS/Sass (Green - c2)
-- ============================================================================
['@property.scss'] = { fg = c.primary_weak },
['@type.scss'] = { fg = c.c2 },
['@variable.scss'] = { fg = c.c2_weak }, -- SCSS variables ($variable)
['@function.scss'] = { fg = c.fg_strong },
-- ============================================================================
-- Language-Specific: HTML (Blue - c3)
-- ============================================================================
['@tag.html'] = { fg = c.c3 },
['@tag.attribute.html'] = { fg = c.fg_weak },
['@tag.delimiter.html'] = { fg = c.c3 },
['@string.html'] = { fg = c.fg_strong },
['@constant.builtin.html'] = { fg = c.c3 }, -- DOCTYPE, etc.
-- ============================================================================
-- Language-Specific: PHP (Primary - brownish-red)
-- ============================================================================
['@variable.php'] = { fg = c.primary_weak },
['@variable.builtin.php'] = { fg = c.primary, bold = true }, -- $this, $GLOBALS, etc.
['@function.php'] = { fg = c.primary_strong, bold = true },
['@function.method.php'] = { fg = c.primary_strong, bold = true },
['@keyword.php'] = { fg = c.fg_weaker, bold = true },
['@keyword.function.php'] = { fg = c.primary, bold = true },
['@type.php'] = { fg = c.primary, bold = true },
['@constant.php'] = { fg = c.fg_strong, italic = true },
['@constant.builtin.php'] = { fg = c.fg_strong, italic = true, bold = true },
['@property.php'] = { fg = c.primary_weak },
['@variable.member.php'] = { fg = c.primary_weak },
-- ============================================================================
-- Language-Specific: JavaScript/TypeScript (Primary - brownish-red)
-- ============================================================================
['@variable.javascript'] = { fg = c.primary_weak },
['@variable.builtin.javascript'] = { fg = c.primary, bold = true }, -- this, arguments, etc.
['@function.javascript'] = { fg = c.primary_strong, bold = true },
['@keyword.javascript'] = { fg = c.fg_weaker, bold = true },
['@keyword.function.javascript'] = { fg = c.primary, bold = true },
['@property.javascript'] = { fg = c.primary_weak },
['@constant.builtin.javascript'] = { fg = c.fg_strong, italic = true, bold = true },
['@variable.typescript'] = { fg = c.primary_weak },
['@variable.builtin.typescript'] = { fg = c.primary, bold = true },
['@function.typescript'] = { fg = c.primary_strong, bold = true },
['@keyword.typescript'] = { fg = c.fg_weaker, bold = true },
['@keyword.function.typescript'] = { fg = c.primary, bold = true },
['@property.typescript'] = { fg = c.primary_weak },
['@type.typescript'] = { fg = c.primary, bold = true },
-- JSX/TSX (HTML in JS - keep HTML blue)
['@tag.tsx'] = { fg = c.c3 },
['@tag.attribute.tsx'] = { fg = c.fg_weak },
['@tag.delimiter.tsx'] = { fg = c.c3 },
['@tag.jsx'] = { fg = c.c3 },
['@tag.attribute.jsx'] = { fg = c.fg_weak },
['@tag.delimiter.jsx'] = { fg = c.c3 },
-- ============================================================================
-- Language-Specific: Lua (Primary - brownish-red)
-- ============================================================================
['@variable.lua'] = { fg = c.primary_weak },
['@variable.builtin.lua'] = { fg = c.primary, bold = true }, -- _G, _VERSION, etc.
['@function.lua'] = { fg = c.primary_strong, bold = true },
['@keyword.lua'] = { fg = c.fg_weaker, bold = true },
['@keyword.function.lua'] = { fg = c.primary, bold = true },
['@property.lua'] = { fg = c.primary_weak },
-- ============================================================================
-- Language-Specific: Markdown (Primary for structure)
-- ============================================================================
['@markup.heading.markdown'] = { fg = c.primary_strong, bold = true },
['@markup.heading.1.markdown'] = { fg = c.primary_strong, bold = true },
['@markup.heading.2.markdown'] = { fg = c.primary, bold = true },
['@markup.heading.3.markdown'] = { fg = c.primary_weak, bold = true },
['@markup.heading.4.markdown'] = { fg = c.primary_weak },
['@markup.heading.5.markdown'] = { fg = c.primary_weak },
['@markup.heading.6.markdown'] = { fg = c.primary_weak },
['@markup.link.markdown'] = { fg = c.primary },
['@markup.link.url.markdown'] = { fg = c.c3, underline = true },
['@markup.raw.markdown'] = { fg = c.fg_strong },
['@markup.raw.block.markdown'] = { fg = c.fg_strong },
-- Code blocks in markdown use their language colors
['@markup.raw.markdown_inline'] = { fg = c.fg_strong },
-- ============================================================================
-- Language-Specific: JSON (Neutral colors)
-- ============================================================================
['@property.json'] = { fg = c.primary_weak },
['@string.json'] = { fg = c.fg_strong, italic = true },
['@number.json'] = { fg = c.fg_strong, italic = true },
['@constant.builtin.json'] = { fg = c.fg_strong, italic = true }, -- true, false, null
-- ============================================================================
-- Language-Specific: Bash/Shell (Primary - brownish-red)
-- ============================================================================
['@variable.bash'] = { fg = c.primary_weak },
['@variable.builtin.bash'] = { fg = c.primary, bold = true },
['@function.bash'] = { fg = c.primary_strong, bold = true },
['@function.builtin.bash'] = { fg = c.primary_stronger },
['@keyword.bash'] = { fg = c.fg_weaker, bold = true },
['@string.bash'] = { fg = c.fg_strong, italic = true },
-- ============================================================================
-- Template Languages (Magenta - c5)
-- ============================================================================
-- Twig/Jinja/Django template syntax
['@punctuation.special.twig'] = { fg = c.c5 },
['@keyword.twig'] = { fg = c.c5, bold = true },
['@function.twig'] = { fg = c.c5, bold = true },
['@punctuation.special.jinja'] = { fg = c.c5 },
['@keyword.jinja'] = { fg = c.c5, bold = true },
['@function.jinja'] = { fg = c.c5, bold = true },
-- ============================================================================
-- Diagnostics & Diffs
-- ============================================================================
['@diff.plus'] = { fg = c.success },
['@diff.minus'] = { fg = c.fail },
['@diff.delta'] = { fg = c.modified },
-- ============================================================================
-- Special
-- ============================================================================
['@none'] = {},
['@conceal'] = { fg = c.fg_weaker },
['@spell'] = {},
['@nospell'] = {},
}

View File

@ -1,13 +1,10 @@
-- Paper Tonic colorscheme
-- Local plugin via symlink
-- Paper Tonic Modern colorscheme
-- Built into this config at colors/paper-tonic-modern.lua
-- No plugin spec needed - just set the colorscheme
-- Set colorscheme directly without lazy.nvim
vim.cmd.colorscheme('paper-tonic-modern')
-- Return empty table so lazy.nvim doesn't complain
return {}
return {
{
dir = vim.fn.expand('~/.config/nvim/paper-tonic'),
lazy = false, -- Load immediately on startup
priority = 1000, -- Load before other plugins
config = function()
vim.cmd.colorscheme('paper-tonic')
end,
},
}

37
test-colors.php Normal file
View File

@ -0,0 +1,37 @@
<?php
// PHP should be primary brownish-red
function test_function($param) {
$variable = "string value";
return $variable;
}
$result = test_function("test");
?>
<!DOCTYPE html>
<html>
<head>
<!-- HTML should be blue (c3) -->
<style>
/* CSS should be green (c2) */
.my-class {
color: red;
background: blue;
}
#my-id {
font-size: 16px;
}
</style>
</head>
<body>
<div class="my-class" id="my-id">
<p>Hello World</p>
</div>
<?php
// Back to PHP (primary)
echo "Mixed content";
?>
</body>
</html>

38
test-colorscheme.lua Normal file
View File

@ -0,0 +1,38 @@
-- Test file for Paper Tonic Modern colorscheme
-- This file tests various syntax highlighting
-- Comments should be light gray, italic, bold
local function test_function()
-- Strings should be dark gray
local my_string = "Hello, world!"
-- Numbers and booleans
local my_number = 42
local my_bool = true
-- Keywords and conditionals
if my_bool then
print(my_string)
end
-- Loops
for i = 1, 10 do
print(i)
end
return my_number
end
-- Test HTML colors (should be blue - c3)
local html = [[
<div class="test">
<p>Hello</p>
</div>
]]
-- Test CSS colors (should be green - c2)
local css = [[
.test {
color: red;
}
]]

25
test-css.css Normal file
View File

@ -0,0 +1,25 @@
.my-class {
color: red;
background-color: blue;
font-size: 16px;
}
#my-id {
margin: 10px;
}
div.special {
padding: 5px;
}
* {
box-sizing: border-box;
}
.parent > .child {
display: block;
}
a:hover {
color: green;
}

19
test-html.html Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<style>
.test-class {
color: red;
}
#test-id {
background: blue;
}
</style>
</head>
<body>
<div class="test-class" id="test-id" data-value="test">
<p>Hello World</p>
</div>
</body>
</html>

View File

@ -0,0 +1,5 @@
#!/bin/bash
# Test semantic highlights in a real Neovim session
# This will open test-html.html and check if custom captures are applied
nvim test-html.html -c "normal! 15Gf\"" -c "lua vim.defer_fn(function() vim.cmd('normal! \\<leader>hi'); vim.cmd('quitall!'); end, 500)"

11
test-standalone.css Normal file
View File

@ -0,0 +1,11 @@
.test-class {
color: red;
}
#test-id {
background: blue;
}
.another:hover {
border: 1px solid green;
}