89 lines
3.3 KiB
Lua
89 lines
3.3 KiB
Lua
-- Paper Tonic Modern - Semantic Highlight Groups
|
|
-- Custom semantic captures for language-specific highlighting
|
|
-- These are defined in after/queries/*/highlights.scm files
|
|
|
|
local c = require('paper-tonic-modern.colors')
|
|
|
|
return {
|
|
-- ============================================================================
|
|
-- 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)
|
|
}
|