Add base16 theme and inline it so that it can be swapped for css vars

[imownbey]

Haha okay this is obviously very hacky and not actually ready to merge but I figured I would open just incase it is useful to someone or if you wanted me to actually clean it up. Basically what I did is add a base16 theme which uses simple hex codes. These can then later be swapped out for CSS vars when we are rendering the colors.

Also I realized that lighter will always request themes from your website when deployed because the JSON files do not get included in the nextjs bundle. The only way I could figure out how to get it to be inlined was by directly including it, this actually speeds up rendering a lot (~200ms) and so is probably something worth doing, although it will obviously make the bundle a little bigger. Here I obviously just hardcoded it to the base16 theme since thats the only one I use which would need to be changed.

The output of this can be used like:

const COLOR_TO_CSS_VAR = {
	"#000000": "var(--base16-00)", // - Default Background
	"#000001": "var(--base16-01)", // - Lighter Background (Used for status bars, line number and folding marks)
	"#000002": "var(--base16-02)", // - Selection Background
	"#000003": "var(--base16-03)", // - Comments, Invisibles, Line Highlighting
	"#000004": "var(--base16-04)", // - Dark Foreground (Used for status bars)
	"#000005": "var(--base16-05)", // - Default Foreground, Caret, Delimiters, Operators
	"#000006": "var(--base16-06)", // - Light Foreground (Not often used)
	"#000007": "var(--base16-07)", // - Light Background (Not often used)
	"#000008": "var(--base16-08)", // - Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
	"#000009": "var(--base16-09)", // - Integers, Boolean, Constants, XML Attributes, Markup Link Url
	"#00000A": "var(--base16-0A)", // - Classes, Markup Bold, Search Text Background
	"#00000B": "var(--base16-0B)", // - Strings, Inherited Class, Markup Code, Diff Inserted
	"#00000C": "var(--base16-0C)", // - Support, Regular Expressions, Escape Characters, Markup Quotes
	"#00000D": "var(--base16-0D)", // - Functions, Methods, Attribute IDs, Headings
	"#00000E": "var(--base16-0E)", // - Keywords, Storage, Selector, Markup Italic, Diff Changed
	"#00000F": "var(--base16-0F)", // - Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?>
};
... generate highlighted tokens
... and use like:
style={{...token.style, color: COLOR_TO_CSS_VAR[token.style.color]}}

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lighter	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 26, 2023 3:58pm

[imownbey]

This is necessary to generate a single hunk with the theme inlined. I am not sure if it is actually ideal, though.

[pomber]

Thanks. I'm working on something similar today that I'm planning to merge very soon. I'll publish a material-from-css theme, that could be used as an example for other themes using CSS vars.

[pomber]

Merged #25