diff --git a/.gitignore b/.gitignore index 6c88157..eccf49d 100644 --- a/.gitignore +++ b/.gitignore @@ -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 + diff --git a/CHANGELOG.md b/CHANGELOG.md index 12ca410..3a69710 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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. diff --git a/README.md b/README.md index c454cd5..a67f0c0 100644 --- a/README.md +++ b/README.md @@ -1,90 +1,90 @@ -

- lucaslabs › Gitea theme -

- -*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 -- -+ -``` - -## `repo/home.tmpl` - -+ adds `
...
` as a wrapper for the repo header data (description + labels) -+ adds `
` 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 --
-``` - -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. +

+ lucaslabs › Gitea theme +

+ +*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 +- ++ +``` + +## `repo/home.tmpl` + ++ adds `
...
` as a wrapper for the repo header data (description + labels) ++ adds `
` 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 +-
+``` + +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. diff --git a/src/themes/scss/dark.scss b/src/themes/scss/dark.scss index 30b6bba..00905e2 100644 --- a/src/themes/scss/dark.scss +++ b/src/themes/scss/dark.scss @@ -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); \ No newline at end of file diff --git a/src/themes/scss/light.scss b/src/themes/scss/light.scss index 6ec9675..2d98135 100644 --- a/src/themes/scss/light.scss +++ b/src/themes/scss/light.scss @@ -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, // ); \ No newline at end of file diff --git a/src/themes/scss/theme/index.scss b/src/themes/scss/theme/index.scss index 0d82f2a..429cb56 100644 --- a/src/themes/scss/theme/index.scss +++ b/src/themes/scss/theme/index.scss @@ -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 } diff --git a/src/themes/scss/theme/modules/_chroma.scss b/src/themes/scss/theme/modules/_chroma.scss new file mode 100644 index 0000000..921a81c --- /dev/null +++ b/src/themes/scss/theme/modules/_chroma.scss @@ -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'); + } +} diff --git a/src/themes/scss/theme/modules/_codemirror.scss b/src/themes/scss/theme/modules/_codemirror.scss new file mode 100644 index 0000000..e1ae601 --- /dev/null +++ b/src/themes/scss/theme/modules/_codemirror.scss @@ -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'); + } + } +} diff --git a/src/themes/scss/theme/modules/_monaco.scss b/src/themes/scss/theme/modules/_monaco.scss new file mode 100644 index 0000000..7316de8 --- /dev/null +++ b/src/themes/scss/theme/modules/_monaco.scss @@ -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; + // } + } +} diff --git a/src/themes/scss/theme/modules/index.scss b/src/themes/scss/theme/modules/index.scss index cc9dd20..97253cf 100644 --- a/src/themes/scss/theme/modules/index.scss +++ b/src/themes/scss/theme/modules/index.scss @@ -1,2 +1,5 @@ @forward './repo'; @forward './issues'; +@forward './chroma'; +@forward './codemirror'; +@forward './monaco'; \ No newline at end of file