feat: code highlighting styles

master
Lucas Colombo 1 month ago
parent 44a25e5c29
commit 701e67c177

328
.gitignore vendored

@ -1,164 +1,164 @@
### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional stylelint cache
.stylelintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local
# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache
# Next.js build output
.next
out
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# vuepress v2.x temp and cache directory
.temp
# Docusaurus cache and generated files
.docusaurus
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*
### Node Patch ###
# Serverless Webpack directories
.webpack/
# Optional stylelint cache
# SvelteKit build / generate output
.svelte-kit
### VisualStudioCode ###
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
!.vscode/*.code-snippets
# Local History for Visual Studio Code
.history/
# Built Visual Studio Code Extensions
*.vsix
### VisualStudioCode Patch ###
# Ignore all local history of files
.history
.ionide
# Support for Project snippet scope
# End of https://www.toptal.com/developers/gitignore/api/node,visualstudiocode
# Support for Project snippet scope
### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional stylelint cache
.stylelintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local
# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache
# Next.js build output
.next
out
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# vuepress v2.x temp and cache directory
.temp
# Docusaurus cache and generated files
.docusaurus
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*
### Node Patch ###
# Serverless Webpack directories
.webpack/
# Optional stylelint cache
# SvelteKit build / generate output
.svelte-kit
### VisualStudioCode ###
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
!.vscode/*.code-snippets
# Local History for Visual Studio Code
.history/
# Built Visual Studio Code Extensions
*.vsix
### VisualStudioCode Patch ###
# Ignore all local history of files
.history
.ionide
# Support for Project snippet scope
# End of https://www.toptal.com/developers/gitignore/api/node,visualstudiocode
# Support for Project snippet scope

@ -1,13 +1,13 @@
# Changelog
All notable changes to this project will be documented in this file.
## [0.2.1] - 2024-10-19
### Fixes
- fix: 🚑 some css customizations not showing after 1.22.3 gitea update
## [0.2.0] - 2024-10-19
### Added
- Pinned the project to the Gitea 1.22.3 version.
# Changelog
All notable changes to this project will be documented in this file.
## [0.2.1] - 2024-10-19
### Fixes
- fix: 🚑 some css customizations not showing after 1.22.3 gitea update
## [0.2.0] - 2024-10-19
### Added
- Pinned the project to the Gitea 1.22.3 version.

@ -1,90 +1,90 @@
<h1 align="center">
<code>lucaslabs</code> <a href="https://gitea.io">Gitea</a> theme
</h1>
*Theme for `lucaslabs` internal gitea server.*
## `dark`
![dark theme](figs/dark.png)
## `light`
![light theme](figs/light.png)
## `auto`
Switches between `dark` and `light` automatically based on the user's system preference.
## Usage
1. Go to the [releases page](https://github.com/lucas-labs/gitea-lugit-theme/releases) and get the latest `gitea-lugit-theme.tar.gz` release file.
2. Place the `templates` and `public` folder in your `$GITEA_CUSTOM` directory.
3. Append the themes in your `app.ini` file:
```ini
[ui]
THEMES=...,dark,light,auto
DEFAULT_THEME=dark # optional
```
> 💡 You can change the names of the themes by changing the name of the theme files in `public/css/theme-{name}.css` and in the `app.ini` file, accordingly.
4. Restart `gitea`.
> [!NOTE]
> The latest version works with `gitea` version `v1.22.x`.
## Credits
- [`catppuccin/gitea`](https://github.com/catppuccin/gitea), these themes are based on them.
## Development
### build
```bash
$ npm install
$ npm run build
```
### serve
```bash
$ npm run serve -- --server path/to/gitea/custom
# e.g.
# on linux
$ npm run serve -- --server ~/gitea/custom
# on windows
$ npm run serve -- -- --server c:/gitea/custom
```
# Changes in templates
## `home.tmpl`
Here we remove everything (default gitea welcome page). We only keep the logo and the header with the login button.
## `base/head_navbar.tmpl`
The only change here is to make the logo smaller.
```diff
- <img height="30" width="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
+ <img height="24" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
```
## `repo/home.tmpl`
+ adds `<div class="lugit-repo-header-data">...</div>` as a wrapper for the repo header data (description + labels)
+ adds `<div class="lugit-repo-content">` as a wrapper for the repo content (files, commits, branches, etc.)
Later we use css to go from default 1 column layout to 2 column layout more similar to github's design.
```diff
- <div class="ui container {{if .IsBlame}}fluid padded{{end}}>
+ <div class="ui container {{if .IsBlame}}fluid padded{{end}} {{if and (not .IIsViewFile) (not .IsBlame)}}lugit-repo-list-view{{end}}">
```
Adds the class `lugit-repo-list-view` to the container of the repo content (only when we are not viewing a file or in blame view). This allows us to change the layout of the main repo view, except when viewing a file or in blame view.
<h1 align="center">
<code>lucaslabs</code> <a href="https://gitea.io">Gitea</a> theme
</h1>
*Theme for `lucaslabs` internal gitea server.*
## `dark`
![dark theme](figs/dark.png)
## `light`
![light theme](figs/light.png)
## `auto`
Switches between `dark` and `light` automatically based on the user's system preference.
## Usage
1. Go to the [releases page](https://github.com/lucas-labs/gitea-lugit-theme/releases) and get the latest `gitea-lugit-theme.tar.gz` release file.
2. Place the `templates` and `public` folder in your `$GITEA_CUSTOM` directory.
3. Append the themes in your `app.ini` file:
```ini
[ui]
THEMES=...,dark,light,auto
DEFAULT_THEME=dark # optional
```
> 💡 You can change the names of the themes by changing the name of the theme files in `public/css/theme-{name}.css` and in the `app.ini` file, accordingly.
4. Restart `gitea`.
> [!NOTE]
> The latest version works with `gitea` version `v1.22.x`.
## Credits
- [`catppuccin/gitea`](https://github.com/catppuccin/gitea), these themes are based on them.
## Development
### build
```bash
$ npm install
$ npm run build
```
### serve
```bash
$ npm run serve -- --server path/to/gitea/custom
# e.g.
# on linux
$ npm run serve -- --server ~/gitea/custom
# on windows
$ npm run serve -- -- --server c:/gitea/custom
```
# Changes in templates
## `home.tmpl`
Here we remove everything (default gitea welcome page). We only keep the logo and the header with the login button.
## `base/head_navbar.tmpl`
The only change here is to make the logo smaller.
```diff
- <img height="30" width="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
+ <img height="24" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
```
## `repo/home.tmpl`
+ adds `<div class="lugit-repo-header-data">...</div>` as a wrapper for the repo header data (description + labels)
+ adds `<div class="lugit-repo-content">` as a wrapper for the repo content (files, commits, branches, etc.)
Later we use css to go from default 1 column layout to 2 column layout more similar to github's design.
```diff
- <div class="ui container {{if .IsBlame}}fluid padded{{end}}>
+ <div class="ui container {{if .IsBlame}}fluid padded{{end}} {{if and (not .IIsViewFile) (not .IsBlame)}}lugit-repo-list-view{{end}}">
```
Adds the class `lugit-repo-list-view` to the container of the repo content (only when we are not viewing a file or in blame view). This allows us to change the layout of the main repo view, except when viewing a file or in blame view.

@ -1,89 +1,89 @@
@use '@lucas-labs/lui-micro' as lui;
@use './_utils/color-utils' as c;
@use './theme' as theme;
$is-dark: true;
$brand: #a6c6f7;
$colors: (
primary: c.variants($brand),
secondary: c.variants(#1e1d2f),
text: #e6edf3,
subtle: #abaaca, // same as elevation/10
palette: (
'red': c.variants(#f38ba8), // red
'orange': c.variants(#fab387), // peach
'yellow': c.variants(#f9e2af), // yellow
'olive': c.variants(#e2f095),
'green': c.variants(#00E676), // green
'teal': c.variants(#94e2d5), // teal
'blue': c.variants(#89b4fa), // blue
'violet': c.variants(#b4befe), // lavender
'purple': c.variants(#9b6bf5), // mauve
'pink': c.variants(#f5c2e7), // pink
'brown': c.variants(#f2cdcd), // flamingo
'black': c.variants(#181825), // black
'white': c.variants(#e6edf3), // white
),
elevation: (
'1': #000000, // elevation/1
'2': #040406, // elevation/2
'3': #07070e, // elevation/3
'4': #0c0c18, // elevation/4
'5': #15142c, // elevation/5
'6': #1e1d2f, // elevation/6
'7': #2d2c3f, // elevation/7
'8': #403f55, // elevation/8
'9': #6d6c89, // elevation/9
'10': #abaaca, // elevation/10
'11': #c3c2e4, // elevation/11
'12': #d3d2f0, // elevation/12
)
);
$variables: (
'font-size': (
'xs': .714rem,
'sm': .857rem,
'md': 1rem,
'lg': 1.143rem,
'xl': 1.286rem,
),
'font-family': '-apple-system, "Segoe UI", system-ui, "SF Pro Text", Inter, Roboto, "Helvetica Neue", Arial, sans-serif',
'code-font-family': 'ui-monospace, SFMono-Regular, "Source Code Pro", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji)',
'emoji-font-family': '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla"',
'measure': (
'.25x': 4px,
'.375x': 6px,
'.5x': 8px,
'.75x': 12px,
'.875x': 14px,
'1x': 16px,
'1.25x': 20px,
'1.5x': 24px,
'2x': 32px,
'2.5x': 40px,
'3x': 48px,
'4x': 64px,
),
'navbar-logo': (
'width': 56px,
'height': 20px,
),
'repo-home': (
'sidebar-width': 296px,
)
);
// init lui-micro, css-vars only (no reboot, no basic)
@include lui.init(
$theme: (colors: $colors, variables: $variables),
$options: (
reboot: false,
basic: false,
fg-var-name: 'text',
bg-var-name: 'elevation/1',
),
);
@use '@lucas-labs/lui-micro' as lui;
@use './_utils/color-utils' as c;
@use './theme' as theme;
$is-dark: true;
$brand: #a6c6f7;
$colors: (
primary: c.variants($brand),
secondary: c.variants(#1e1d2f),
text: #e6edf3,
subtle: #abaaca, // same as elevation/10
palette: (
'red': c.variants(#f38ba8), // red
'orange': c.variants(#fab387), // peach
'yellow': c.variants(#f9e2af), // yellow
'olive': c.variants(#e2f095),
'green': c.variants(#00E676), // green
'teal': c.variants(#94e2d5), // teal
'blue': c.variants(#89b4fa), // blue
'violet': c.variants(#b4befe), // lavender
'purple': c.variants(#9b6bf5), // mauve
'pink': c.variants(#f5c2e7), // pink
'brown': c.variants(#f2cdcd), // flamingo
'black': c.variants(#181825), // black
'white': c.variants(#e6edf3), // white
),
elevation: (
'1': #000000, // elevation/1
'2': #040406, // elevation/2
'3': #07070e, // elevation/3
'4': #0c0c18, // elevation/4
'5': #15142c, // elevation/5
'6': #1e1d2f, // elevation/6
'7': #2d2c3f, // elevation/7
'8': #403f55, // elevation/8
'9': #6d6c89, // elevation/9
'10': #abaaca, // elevation/10
'11': #c3c2e4, // elevation/11
'12': #d3d2f0, // elevation/12
)
);
$variables: (
'font-size': (
'xs': .714rem,
'sm': .857rem,
'md': 1rem,
'lg': 1.143rem,
'xl': 1.286rem,
),
'font-family': '-apple-system, "Segoe UI", system-ui, "SF Pro Text", Inter, Roboto, "Helvetica Neue", Arial, sans-serif',
'code-font-family': 'ui-monospace, SFMono-Regular, "Source Code Pro", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji)',
'emoji-font-family': '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla"',
'measure': (
'.25x': 4px,
'.375x': 6px,
'.5x': 8px,
'.75x': 12px,
'.875x': 14px,
'1x': 16px,
'1.25x': 20px,
'1.5x': 24px,
'2x': 32px,
'2.5x': 40px,
'3x': 48px,
'4x': 64px,
),
'navbar-logo': (
'width': 56px,
'height': 20px,
),
'repo-home': (
'sidebar-width': 296px,
)
);
// init lui-micro, css-vars only (no reboot, no basic)
@include lui.init(
$theme: (colors: $colors, variables: $variables),
$options: (
reboot: false,
basic: false,
fg-var-name: 'text',
bg-var-name: 'elevation/1',
),
);
@include theme.make-theme($is-dark);

@ -1,90 +1,90 @@
// @use '@lucas-labs/lui-micro' as lui;
// @use './utils/color-utils' as c;
// @use './theme' as theme;
// $is-dark: false;
// $brand: #6296e2;
// $colors: (
// theme: (
// 'rosewater': c.variants(#dc8a78),
// 'flamingo': c.variants(#dd7878),
// 'pink': c.variants(#ea76cb),
// 'mauve': c.variants(#8652e7),
// 'red': c.variants(#d20f39),
// 'maroon': c.variants(#e64553),
// 'peach': c.variants(#fe640b),
// 'yellow': c.variants(#df8e1d),
// 'green': c.variants(#11752d),
// 'teal': c.variants(#179299),
// 'sky': c.variants(#04a5e5),
// 'sapphire': c.variants(#209fb5),
// 'blue': c.variants(#1e66f5),
// 'lavender': c.variants(#7287fd),
// 'black': c.variants(#181825),
// 'white': c.variants(#e6edf3),
// ),
// text: #4c4f69,
// primary: c.variants($brand),
// secondary: c.variants(#999cc5),
// elevation: (
// '1': #dce0e8, // crust
// '2': #e6e9ef, // mantle
// '3': #eff1f5, // base
// '4': #dcdfe7, // surface0
// '5': #bcc0cc, // surface1
// '6': #acb0be, // surface2
// '7': #9ca0b0, // overlay0
// '8': #8c8fa1, // overlay1
// '9': #7c7f93, // overlay2
// '10': #6c6f85, // subtext0
// '11': #5c5f77, // subtext1
// '12': #4c4f69, //
// )
// );
// // init lui-micro, css-vars only (no reboot, no basic)
// @include lui.init(
// $theme: (
// colors: $colors,
// variables: (
// 'font-size': (
// 'xs': .75rem,
// 'sm': .875rem,
// 'md': 1rem,
// 'lg': 1.125rem,
// 'xl': 1.25rem,
// ),
// 'font-family': '"Outfit", Inter, Roboto, "Segoe UI", sans-serif',
// 'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace',
// 'measure': (
// '.25x': 4px,
// '.375x': 6px,
// '.5x': 8px,
// '.75x': 12px,
// '1x': 16px,
// '1.25x': 20px,
// '1.5x': 24px,
// '2x': 32px,
// '2.5x': 40px,
// '3x': 48px,
// '4x': 64px,
// ),
// 'repo-home': (
// 'sidebar-width': 296px,
// )
// ),
// ),
// $options: (
// reboot: false,
// basic: false,
// fg-var-name: 'text',
// bg-var-name: 'elevation/1',
// ),
// );
// @include theme.make-theme(
// $is-dark: $is-dark,
// @use '@lucas-labs/lui-micro' as lui;
// @use './utils/color-utils' as c;
// @use './theme' as theme;
// $is-dark: false;
// $brand: #6296e2;
// $colors: (
// theme: (
// 'rosewater': c.variants(#dc8a78),
// 'flamingo': c.variants(#dd7878),
// 'pink': c.variants(#ea76cb),
// 'mauve': c.variants(#8652e7),
// 'red': c.variants(#d20f39),
// 'maroon': c.variants(#e64553),
// 'peach': c.variants(#fe640b),
// 'yellow': c.variants(#df8e1d),
// 'green': c.variants(#11752d),
// 'teal': c.variants(#179299),
// 'sky': c.variants(#04a5e5),
// 'sapphire': c.variants(#209fb5),
// 'blue': c.variants(#1e66f5),
// 'lavender': c.variants(#7287fd),
// 'black': c.variants(#181825),
// 'white': c.variants(#e6edf3),
// ),
// text: #4c4f69,
// primary: c.variants($brand),
// secondary: c.variants(#999cc5),
// elevation: (
// '1': #dce0e8, // crust
// '2': #e6e9ef, // mantle
// '3': #eff1f5, // base
// '4': #dcdfe7, // surface0
// '5': #bcc0cc, // surface1
// '6': #acb0be, // surface2
// '7': #9ca0b0, // overlay0
// '8': #8c8fa1, // overlay1
// '9': #7c7f93, // overlay2
// '10': #6c6f85, // subtext0
// '11': #5c5f77, // subtext1
// '12': #4c4f69, //
// )
// );
// // init lui-micro, css-vars only (no reboot, no basic)
// @include lui.init(
// $theme: (
// colors: $colors,
// variables: (
// 'font-size': (
// 'xs': .75rem,
// 'sm': .875rem,
// 'md': 1rem,
// 'lg': 1.125rem,
// 'xl': 1.25rem,
// ),
// 'font-family': '"Outfit", Inter, Roboto, "Segoe UI", sans-serif',
// 'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace',
// 'measure': (
// '.25x': 4px,
// '.375x': 6px,
// '.5x': 8px,
// '.75x': 12px,
// '1x': 16px,
// '1.25x': 20px,
// '1.5x': 24px,
// '2x': 32px,
// '2.5x': 40px,
// '3x': 48px,
// '4x': 64px,
// ),
// 'repo-home': (
// 'sidebar-width': 296px,
// )
// ),
// ),
// $options: (
// reboot: false,
// basic: false,
// fg-var-name: 'text',
// bg-var-name: 'elevation/1',
// ),
// );
// @include theme.make-theme(
// $is-dark: $is-dark,
// );

@ -11,7 +11,12 @@
@include components.editor; // github-style (kinda) markdown editor in comments, issues, etc.
@include components.menu; // github-style dropdown menus
// modules
// code highlighting
@include modules.chroma; // syntax highlighting
@include modules.codemirror; // code editor
@include modules.monaco; // vscode-like code editor
// customized pages
@include modules.repo; // repo page
@include modules.issues; // issues page
}

@ -0,0 +1,304 @@
@use '@lucas-labs/lui-micro/color' as color;
@use '@lucas-labs/lui-micro/var' as var;
@mixin chroma {
.chroma .code-inner{
font: 14px var.get('code-font-family');
}
/* NameBuiltinPseudo */
.chroma .bp {
color: color.get('palette/orange/base');
}
/* Comment */
.chroma .c {
color: color.get('elevated/7');
}
/* CommentSingle */
.chroma .c1 {
color: color.get('elevated/7');
}
/* CommentHashbang */
.chroma .ch {
color: color.get('elevated/7');
}
/* CommentMultiline */
.chroma .cm {
color: color.get('elevated/7');
}
/* CommentPreproc */
.chroma .cp {
color: color.get('palette/blue/base');
}
/* CommentPreprocFile */
.chroma .cpf {
color: color.get('palette/blue/base');
}
/* CommentSpecial */
.chroma .cs {
color: color.get('elevated/7');
}
/* LiteralStringDelimiter */
.chroma .dl {
color: color.get('palette/blue/base');
}
/* NameFunctionMagic */
.chroma .fm {
}
/* Generic */
.chroma .g {
}
/* GenericDeleted */
.chroma .gd {
color: color.get('theme');
background-color: rgba(#{color.get('palette/red/base', 'rgb')}, 0.15);
}
/* GenericEmph */
.chroma .ge {
font-style: italic;
}
/* GenericHeading */
.chroma .gh {
color: color.get('palette/teal/base');
}
/* GenericInserted */
.chroma .gi {
color: color.get('theme');
background-color: rgba(#{color.get('palette/green/base', 'rgb')}, 0.15);
}
/* GenericUnderline */
.chroma .gl {
}
/* GenericOutput */
.chroma .go {
color: color.get('palette/orange/base');
}
/* GenericPrompt */
.chroma .gp {
color: color.get('elevated/7');
font-weight: bold;
}
/* GenericError */
.chroma .gr {
color: color.get('palette/brown/base');
}
/* GenericStrong */
.chroma .gs {
font-weight: bold;
}
/* GenericTraceback */
.chroma .gt {
color: color.get('palette/brown/base');
}
/* GenericSubheading */
.chroma .gu {
color: color.get('palette/teal/base');
}
/* LiteralNumberIntegerLong */
.chroma .il {
color: color.get('palette/orange/base');
}
/* Keyword */
.chroma .k {
color: color.get('palette/purple/base');
}
/* KeywordConstant */
.chroma .kc {
color: color.get('palette/yellow/base');
}
/* KeywordDeclaration */
.chroma .kd {
color: color.get('palette/purple/base');
}
/* KeywordNamespace */
.chroma .kn {
color: color.get('palette/yellow/base');
}
/* KeywordPseudo */
.chroma .kp {
color: color.get('palette/purple/base');
font-weight: bold;
}
/* KeywordReserved */
.chroma .kr {
color: color.get('palette/purple/base');
}
/* KeywordType */
.chroma .kt {
color: color.get('palette/yellow/base');
}
/* Literal */
.chroma .l {
}
/* LiteralDate */
.chroma .ld {
}
/* LiteralNumber */
.chroma .m {
color: color.get('palette/orange/base');
}
/* LiteralNumberBin */
.chroma .mb {
color: color.get('palette/orange/base');
}
/* LiteralNumberFloat */
.chroma .mf {
color: color.get('palette/orange/base');
}
/* LiteralNumberHex */
.chroma .mh {
color: color.get('palette/orange/base');
}
/* LiteralNumberInteger */
.chroma .mi {
color: color.get('palette/orange/base');
}
/* LiteralNumberOct */
.chroma .mo {
color: color.get('palette/orange/base');
}
/* Name */
.chroma .n {
color: color.get('palette/violet/base');
}
/* NameAttribute */
.chroma .na {
color: color.get('palette/yellow/base');
}
/* NameBuiltin */
.chroma .nb {
color: color.get('palette/orange/base');
}
/* NameClass */
.chroma .nc {
color: color.get('palette/yellow/base');
}
/* NameDecorator */
.chroma .nd {
color: color.get('palette/pink/base');
}
/* NameException */
.chroma .ne {
color: color.get('palette/brown/base');
}
/* NameFunction */
.chroma .nf {
color: color.get('palette/blue/base');
}
/* NameEntity */
.chroma .ni {
color: color.get('palette/pink/base');
}
/* NameLabel */
.chroma .nl {
color: color.get('palette/yellow/base');
}
/* NameNamespace */
.chroma .nn {
color: color.get('palette/yellow/base');
}
/* NameConstant */
.chroma .no {
color: color.get('palette/yellow/base');
}
/* NameTag */
.chroma .nt {
color: color.get('palette/purple/base');
}
/* NameVariable */
.chroma .nv {
color: color.get('palette/orange/base');
}
/* NameOther */
.chroma .nx {
color: color.get('palette/orange/base');
}
/* Operator */
.chroma .o {
color: color.get('palette/teal/base');
}
/* OperatorWord */
.chroma .ow {
color: color.get('palette/teal/base');
font-weight: bold;
}
/* Punctuation */
.chroma .p {
color: color.get('elevated/9');
}
/* NameProperty */
.chroma .py {
}
/* LiteralString */
.chroma .s {
color: color.get('palette/green/base');
}
/* LiteralStringSingle */
.chroma .s1 {
color: color.get('palette/green/base');
}
/* LiteralStringDouble */
.chroma .s2 {
color: color.get('palette/green/base');
}
/* LiteralStringAffix */
.chroma .sa {
color: color.get('palette/green/base');
}
/* LiteralStringBacktick */
.chroma .sb {
color: color.get('palette/green/base');
}
/* LiteralStringChar */
.chroma .sc {
color: color.get('palette/green/base');
}
/* LiteralStringDoc */
.chroma .sd {
color: color.get('palette/green/base');
}
/* LiteralStringEscape */
.chroma .se {
color: color.get('palette/blue/base');
}
/* LiteralStringHeredoc */
.chroma .sh {
color: color.get('palette/green/base');
}
/* LiteralStringInterpol */
.chroma .si {
color: color.get('palette/green/base');
}
/* LiteralStringRegex */
.chroma .sr {
color: color.get('palette/blue/base');
}
/* LiteralStringSymbol */
.chroma .ss {
color: color.get('palette/green/base');
}
/* LiteralStringOther */
.chroma .sx {
color: color.get('palette/green/base');
}
/* NameVariableClass */
.chroma .vc {
color: color.get('palette/yellow/base');
}
/* NameVariableGlobal */
.chroma .vg {
color: color.get('palette/orange/base');
}
/* NameVariableInstance */
.chroma .vi {
color: color.get('palette/yellow/base');
}
/* NameVariableMagic */
.chroma .vm {
}
/* TextWhitespace */
.chroma .w {
color: color.get('elevated/4');
}
}

@ -0,0 +1,95 @@
@use '@lucas-labs/lui-micro/color' as color;
@mixin codemirror {
.CodeMirror,
.CodeMirror.cm-s-default,
.CodeMirror.cm-s-paper {
.cm-property {
color: color.get('text')
}
.cm-header {
color: color.get('text')
}
.cm-quote {
color: color.get('palette/green/base')
}
.cm-keyword {
color: color.get('palette/purple/base');
}
.cm-atom {
color: color.get('palette/red/base');
}
.cm-number {
color: color.get('palette/orange/base');
}
.cm-def {
color: color.get('text')
}
.cm-variable-2 {
color: color.get('palette/blue/base');
}
.cm-variable-3 {
color: color.get('palette/teal/base');
}
.cm-comment {
color: color.get('elevation/6')
}
.cm-string {
color: color.get('palette/green/base')
}
.cm-string-2 {
color: color.get('palette/green/base')
}
.cm-meta {
color: color.get('palette/orange/base');
}
.cm-qualifier {
color: color.get('palette/orange/base');
}
.cm-builtin {
color: color.get('palette/orange/base');
}
.cm-bracket {
color: color.get('text')
}
.cm-tag {
color: color.get('palette/yellow/base');
}
.cm-attribute {
color: color.get('palette/yellow/base');
}
.cm-hr {
color: color.get('elevation/9');
}
.cm-url {
color: color.get('palette/blue/base');
}
.cm-link {
color: color.get('palette/blue/base');
}
.cm-error {
color: color.get('palette/red/base');
}
}
}

@ -0,0 +1,155 @@
@use '@lucas-labs/lui-micro/color' as color;
@mixin monaco {
$surface0: #{color.get('elevation/4')};
$subtext0: #{color.get('elevation/10')};
$overlay2: #{color.get('elevation/9')};
$mantle: #{color.get('elevation/0')};
$base: #{color.get('elevation/3')};
$accent: #{color.get('primary/base')};
$text: #{color.get('text')};
$mauve: #{color.get('palette/purple/base')};
$peach: #{color.get('palette/orange/base')};
$teal: #{color.get('palette/teal/base')};
$green: #{color.get('palette/green/base')};
$blue: #{color.get('palette/blue/base')};
$pink: #{color.get('palette/pink/base')};
.monaco-editor {
--vscode-editor-background: #{$mantle} !important;
--vscode-editorGutter-background: #{$mantle} !important;
// selected text
.selected-text {
background-color: $surface0 !important;
}
// line numbers
.margin-view-overlays .line-numbers {
color: $subtext0 !important;
}
.line-numbers.active-line-number {
color: $accent !important;
}
// current / cursor line
.view-overlays .current-line,
.margin-view-overlays .current-line-margin {
background-color: #{color.get('elevation/2')} !important;
}
// Note: all of the hotpink stuff is there so it's easily visible, since these editor scope mappings are a mess
// plaintext
.mtk1 {
color: $text !important;
}
.mtk2 {
color: #ff69b4 !important;
}
// decorators
.mtk3 {
color: $peach !important;
}
// shell arguments
.mtk4 {
color: $teal !important;
}
// css constants & pre-defineds
.mtk5 {
color: $text !important;
}
// keywords
.mtk6 {
color: $mauve !important;
}
// numbers
.mtk7 {
color: $peach !important;
}
// comments
.mtk8 {
color: $overlay2 !important;
}
// sometimes a keyword, apparently
.mtk9 {
color: $mauve !important;
}
// braces, brackets, parentheses
.mtk10 {
color: $subtext0 !important;
}
// arrow brackets & equal signs in HTML
.mtk11 {
color: $teal !important;
}
// @ sign in javascript ¯\_()_/¯
.mtk12 {
color: $teal !important;
}
.mtk13 {
color: #ff69b4 !important;
}
.mtk14 {
color: #ff69b4 !important;
}
// regex, css classnames, and HTML keywords (huh)
.mtk15 {
color: $mauve !important;
}
// shebangs
.mtk16 {
color: $overlay2 !important;
}
.mtk17 {
color: #ff69b4 !important;
}
.mtk18 {
color: #ff69b4 !important;
}
// glob operator i guess
.mtk19 {
color: $teal !important;
}
.mtk20 {
color: #ff69b4 !important;
}
// strings
.mtk21 {
color: $green !important;
}
.mtk22 {
color: #ff69b4 !important;
}
// functions
.mtk23 {
color: $blue !important;
}
// shell variables
.mtk24 {
color: $peach !important;
}
// weird variables
.mtk25 {
color: $pink !important;
}
// .bracket-highlighting-0 {
// color: color.mix($text, $red, 40%) !important;
// }
// .bracket-highlighting-1 {
// color: color.mix($text, $peach, 40%) !important;
// }
// .bracket-highlighting-2 {
// color: color.mix($text, $yellow, 40%) !important;
// }
// .bracket-highlighting-3 {
// color: color.mix($text, $green, 40%) !important;
// }
// .bracket-highlighting-4 {
// color: color.mix($text, $blue, 40%) !important;
// }
// .bracket-highlighting-5 {
// color: color.mix($text, $mauve, 40%) !important;
// }
}
}

@ -1,2 +1,5 @@
@forward './repo';
@forward './issues';
@forward './chroma';
@forward './codemirror';
@forward './monaco';
Loading…
Cancel
Save