Skip to content

css

This directory provides comprehensive support for authoring Cascading Style Sheets (CSS) and SCSS (Sassy CSS) using Talon voice commands. It defines language-specific syntax, formatting configurations, operations, and common CSS functions to make styling efficient and natural to dictate.

The support in this directory is divided into three main components:

  • css.py defines the backend context, lists, and actions for CSS and SCSS.
  • css.talon exposes voice commands for creating properties, variables, values, and applying layout configurations.
  • code_common_function.talon-list registers CSS-specific mathematical, color, layout, and filter functions.

Python-Based Definitions and Contexts

css.py sets up the Talon vocabulary context that activates when standard CSS or SCSS file types are detected (code.language: css and code.language: scss). It populates three critical developer vocabularies:

  • CSS Units (css_unit): Maps spoken names to standard units of measurement (e.g., "em" to em, "pixels" to px, "fraction" to fr, and "view height" to vh).
  • CSS At-Rules (css_at_rule): Lists common directives such as charset, import, media, supports, keyframes, and CSS module value rules.
  • Global Values (css_global_value): Standard global property states such as initial, inherit, unset, and revert.

Additionally, css.py configures math and logic operators appropriate for style sheets—particularly useful in @media query conditions and mathematical expressions—by converting common operations into logical equivalents like and or or instead of syntax symbols.

Voice Commands and Syntax Formatting

css.talon maps spoken dictations into clean, properly-formatted style sheet structures. It configures the default formatter for variables to kebab-case (DASH_SEPARATED), ensuring consistency with standard CSS design guidelines.

Important syntax patterns include:

  • Properties and Rules: Saying "prop background color" formats and inserts background-color: ; and positions the cursor for entry, while "rule display" generates display:.
  • Attributes: The "attribute..." command inserts target block queries inside square brackets, e.g. [data-active].
  • Values and Units: Enables dictation of compound CSS measurements. For example, "value twelve pixels" formats to 12px, and "value one point five rem" formats to 1.5rem.
  • Custom Properties (Variables): Saying "variable brand blue" inserts var(--brand-blue), automating CSS custom property creation. Saying "op var" inserts var(--) and places the cursor within the parentheses.
  • Utilities: Provides quick utilities for declarations like currentColor or adding !important.

Style-Specific Functions

code_common_function.talon-list is a specialized list mapping spoken triggers to common CSS functional notations. This activates seamlessly alongside the common functions setup in Talon. The list covers:

  • Colors: Formulations like rgb(), rgba(), hsl(), hsla(), and modern spaces like lab() and lch().
  • Layout & Logic: Calculations and boundaries such as calc(), clamp(), min(), max(), and grid helpers like minmax() or repeat().
  • Transformations & Visuals: Graphical operations like translate(), rotate(), scale(), blur(), linear-gradient(), and drop-shadow().