Date: 2023-12-14
Draft | In Review | Done |
---|---|---|
☑️ | ☑️ | ☑️ |
Hamothy |
winston |
backwardspy |
Catppuccin currently boasts over 250 ports in its real estate, ranging from full monorepos with complex build systems and CI/CD workflows; simple 10 line configuration files that need to copy/pasted into the user's home directory; and "README repositories" that are nothing more than instructions and the hex codes listed in the README for configuration.
A significant pain point in the v0.1.0
→ v0.2.0
palette update was how long
it took to go through every single port and update the hex codes. Of course, the
jump from one flavour to four flavours is a significant change but the
leadership team realised that this process would need to be repeated every time
a palette update was considered.
From that realisation, we started to push towards new ports being created with Catppuccin language libraries. For example, a number of our repositories use the catppuccin/palette NPM library to generate the required configuration files. This has the benefit of allowing us to update the libraries, push out a new release and, in theory, ports can easily bring in this new release and use the new features immediately.
The language libraries are an amazing step forward for Catppuccin as it allows ports to be more consistent and easier to maintain. We would like to sincerely thank again everyone who has created and contributed to these libraries. That being said, we found that the language libraries are not suitable for every generating every single port.
As aforementioned, language libraries are brilliant for ports that already integrate with a build system / programming language, but we asked ourselves:
"Do we really need or want an entire programming language + build script to generate some hex codes into a few files or README?"
At this point, we realised that we needed to take a step back and brainstorm a solution that would work for all ports, regardless of complexity. After numerous discussions, we came to the conclusion that we needed a new tool that would allow any user, regardless of whatever operating system and technical ability, to easily create a Catppuccin port.
- Improve the developer experience for creating, updating and maintaining Catppuccin ports.
- Make it easier to apply palette updates across the entire GitHub organisation.
- Give the maintainers (and users!) confidence that the colours conform to the Catppuccin palette.
- Replace the existing language libraries. This tool will be an addition to the toolbox of tools available to port creators.
- Create another barrier of entry for creating a simple Catppuccin port.
We would like to propose a new port creation tool named whiskers
to help
create and maintain Catppuccin ports.
Fundamentally, it is a CLI tool that expects template files, which the Catppuccin palette is then injected into. We explored the use of handlebars for the underlying templating engine, but ultimately found it to be too limiting for the different use cases across the organisation. Eventually, we settled on tera as it allows us to be more flexible.
Whiskers can be invoked in two modes:
- Single-Flavour Mode: Inject
latte
,frappe
,macchiato
ormocha
into a template file. - Multi-Flavour Mode: Inject all 4 flavours into a template file.
In both of the modes mentioned above, you will have access to a plethora of context variables, driven by our palette.json. They can be viewed in the official documentation.
Whiskers templates may include a frontmatter section at the top of the file.
This is a YAML block that contains metadata about the template. If present, the frontmatter section must be the first thing in the file and must take the form of valid YAML set between triple-dashed lines.
The most important frontmatter key is the version, which allows whiskers to ensure that it can render a template it can understand.
E.g. example.yml
---
whiskers:
version: "2.0.0"
---
... standard template content goes here ...
Additional context variables can be added into the Frontmatter. A common usecase of this feature is setting the accent colour:
---
accent: "mauve"
---
border = "#{{flavor.colors[accent].hex}}"
diffAddFg = "#{{green.hex}}"
diffAddBg = "#{{darkGreen.hex}}"
Rendering the above template produces the following output:
border = "#cba6f7"
diffaddfg = "#a6e3a1"
diffaddbg = "#40b436"
Overrides can be specified via the command line through the --overrides
flag,
taking in a JSON string resembling the frontmatter.
E.g. example.yml
---
accent: "mauve"
---
theme:
accent: "{{flavor.colors[accent].hex}}"
When running whiskers example.yml -f latte --overrides '{"accent": "pink"}'
,
the accent will be overridden to pink.
Whiskers can render multiple outputs from a single template using a matrix set in the frontmatter. This can be useful for generating one output per flavor per accent color.
E.g. example.yml
---
whiskers:
version: 2.0.0
matrix:
- variant: ["normal", "no-italics"]
- flavor
- accent
filename: "catppuccin-{{flavor.identifier}}-{{accent}}-{{variant}}.ini"
---
# Catppuccin {{flavor.name}}{% if variant == "no-italics" %} (no italics){% endif %}
[theme]
{{accent}}: #{{flavor.colors[accent].hex}}
Running whiskers template.ini
will generate the following files:
catppuccin-latte-rosewater-normal.ini
catppuccin-latte-rosewater-no-italics.ini
catppuccin-latte-flamingo-normal.ini
catppuccin-latte-flamingo-no-italics.ini
...
catppuccin-frappe-rosewater-normal.ini
catppuccin-frappe-rosewater-no-italics.ini
For further information on how the matrix works, see the official documentation.
We have created sample programs to act as reference implementations, which can
be found in the
examples/
directory in the official
documentation.
If you would like to see real-life use cases of the features discussed above, please see:
- Greatly improved developer experience, ensuring that maintainers can easily create and update files in relation to Catppuccin's palette.
- It is extremely trivial to generate ports that simply require hex codes (or other formats) to exist in a file directory.
- No complex build scripts or programming languages are brought into the equation for simple Catppuccin ports.
- Organisation-wide palette updates can be easily applied, with updates to language libraries and whiskers.
- Extra CLI tool that maintainers have to install locally.
- Slight learning curve of getting familiar with tera syntax.
- Update documentation in catppuccin/catppuccin to recommend whiskers for new ports.
- Continue to roll out whiskers across the organisation, adding new features for worthwhile usecases and fixing bugs where they arise.
- Track the adoption of whiskers in our organisation - arewewhiskersyet.com