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..ad4c95c 100644 --- a/README.md +++ b/README.md @@ -1,90 +1,76 @@ -

- 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.* + +> [!IMPORTANT] +> From version `v1.0.0` onwards, `gitea>=1.23` is required. +> In case you're looking for `gitea@1.22.x` support, [`v0.2.2`](https://github.com/lucas-labs/gitea-lugit-theme/releases/tag/v0.2.2) +> is the last version that supports it. + +## Preview + +![repository](figs/repo.png) + +
+Issue Page +issue +
+ +
+Settings Page +settings +
+ +
+PR Page +pr +
+ +## 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 +``` + +## Contributing + +Please feel free to open an issue or a pull request. Contributions are welcome! \ No newline at end of file diff --git a/figs/dark.png b/figs/dark.png deleted file mode 100644 index b5c07eb..0000000 Binary files a/figs/dark.png and /dev/null differ diff --git a/figs/issue.png b/figs/issue.png new file mode 100644 index 0000000..6a3abc0 Binary files /dev/null and b/figs/issue.png differ diff --git a/figs/light.png b/figs/light.png deleted file mode 100644 index 62ebba5..0000000 Binary files a/figs/light.png and /dev/null differ diff --git a/figs/pr.png b/figs/pr.png new file mode 100644 index 0000000..12b2117 Binary files /dev/null and b/figs/pr.png differ diff --git a/figs/repo.png b/figs/repo.png new file mode 100644 index 0000000..47867e1 Binary files /dev/null and b/figs/repo.png differ diff --git a/figs/settings.png b/figs/settings.png new file mode 100644 index 0000000..9d1529b Binary files /dev/null and b/figs/settings.png differ diff --git a/package-lock.json b/package-lock.json index 5dd795f..cbcb739 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@lucas-labs/lugit-theme", - "version": "0.2.0", + "version": "0.2.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@lucas-labs/lugit-theme", - "version": "0.2.0", + "version": "0.2.2", "license": "MIT", "dependencies": { "@lucas-labs/lui-micro": "^3.1.4" @@ -19,7 +19,7 @@ "fabric": "5.3", "imagemin-zopfli": "^7.0.0", "prettier": "^2.8.8", - "sass": "^1.63.6", + "sass": "1.63.6", "svgo": "^3.0.2" } }, @@ -3007,9 +3007,10 @@ } }, "node_modules/immutable": { - "version": "4.3.0", - "dev": true, - "license": "MIT" + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz", + "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==", + "dev": true }, "node_modules/import-fresh": { "version": "3.3.0", @@ -4625,8 +4626,9 @@ }, "node_modules/sass": { "version": "1.63.6", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.63.6.tgz", + "integrity": "sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==", "dev": true, - "license": "MIT", "dependencies": { "chokidar": ">=3.0.0 <4.0.0", "immutable": "^4.0.0", diff --git a/package.json b/package.json index 9ec2b5e..de3350f 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "fabric": "5.3", "imagemin-zopfli": "^7.0.0", "prettier": "^2.8.8", - "sass": "^1.63.6", + "sass": "1.63.6", "svgo": "^3.0.2" }, "dependencies": { diff --git a/src/templates/base/head_navbar.tmpl b/src/templates/base/head_navbar.tmpl deleted file mode 100644 index 2075ece..0000000 --- a/src/templates/base/head_navbar.tmpl +++ /dev/null @@ -1,214 +0,0 @@ -{{$notificationUnreadCount := 0}} -{{if and .IsSigned .NotificationUnreadCount}} - {{$notificationUnreadCount = call .NotificationUnreadCount}} -{{end}} - - diff --git a/src/templates/home.tmpl b/src/templates/home.tmpl deleted file mode 100644 index 4c0c931..0000000 --- a/src/templates/home.tmpl +++ /dev/null @@ -1,9 +0,0 @@ -{{template "base/head" .}} -
-
-
- -
-
-
-{{template "base/footer" .}} diff --git a/src/templates/repo/home.tmpl b/src/templates/repo/home.tmpl deleted file mode 100644 index 5491408..0000000 --- a/src/templates/repo/home.tmpl +++ /dev/null @@ -1,162 +0,0 @@ -{{template "base/head" .}} -
- {{template "repo/header" .}} -
-
- {{template "base/alert" .}} - {{template "repo/code/recently_pushed_new_branches" .}} - {{if and (not .HideRepoInfo) (not .IsBlame)}} -
- {{- $description := .Repository.DescriptionHTML ctx -}} - {{if $description}}{{$description | RenderCodeBlock}}{{end}} - {{if .Repository.Website}}{{.Repository.Website}}{{end}} -
-
- {{/* it should match the code in issue-home.js */}} - {{range .Topics}}{{.Name}}{{end}} - {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}{{end}} -
- {{end}} - {{if and .Permission.IsAdmin (not .Repository.IsArchived)}} -
-
- - {{range .Topics}} - {{/* keep the same layout as Fomantic UI generated labels */}} - {{.Name}}{{svg "octicon-x" 16 "delete icon"}} - {{end}} -
-
-
- - -
-
- {{end}} - {{if .Repository.IsArchived}} -
- {{if .Repository.ArchivedUnix.IsZero}} - {{ctx.Locale.Tr "repo.archive.title"}} - {{else}} - {{ctx.Locale.Tr "repo.archive.title_date" (DateTime "long" .Repository.ArchivedUnix)}} - {{end}} -
- {{end}} -
-
- {{template "repo/sub_menu" .}} - {{$n := len .TreeNames}} - {{$l := Eval $n "-" 1}} - {{$isHomepage := (eq $n 0)}} -
-
- {{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "tw-mr-1"}} - {{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}} - {{$cmpBranch := ""}} - {{if ne .Repository.ID .BaseRepo.ID}} - {{$cmpBranch = printf "%s/%s:" (.Repository.OwnerName|PathEscape) (.Repository.Name|PathEscape)}} - {{end}} - {{$cmpBranch = print $cmpBranch (.BranchName|PathEscapeSegments)}} - {{$compareLink := printf "%s/compare/%s...%s" .BaseRepo.Link (.BaseRepo.DefaultBranch|PathEscapeSegments) $cmpBranch}} - - {{svg "octicon-git-pull-request"}} - - {{end}} - - {{if $isHomepage}} - {{ctx.Locale.Tr "repo.find_file.go_to_file"}} - {{end}} - - {{if and .CanWriteCode .IsViewBranch (not .Repository.IsMirror) (not .Repository.IsArchived) (not .IsViewFile)}} - - {{end}} - - {{if and $isHomepage (.Repository.IsTemplate)}} - - {{ctx.Locale.Tr "repo.use_template"}} - - {{end}} - {{if $isHomepage}} - {{/* only show the "code search" on the repo home page, it only does global search, - so do not show it when viewing file or directory to avoid misleading users (it doesn't search in a directory) */}} -
-
- - {{template "shared/search/button"}} -
-
- {{else}} - - {{StringUtils.EllipsisString .Repository.Name 30}} - {{- range $i, $v := .TreeNames -}} - / - {{- if eq $i $l -}} - {{$v}} - {{- else -}} - {{$p := index $.Paths $i}}{{$v}} - {{- end -}} - {{- end -}} - - {{end}} -
-
- - {{if $isHomepage}} -
- {{template "repo/clone_buttons" .}} - - {{template "repo/clone_script" .}}{{/* the script will update `.js-clone-url` and related elements */}} -
- {{template "repo/cite/cite_modal" .}} - {{end}} - {{if and (not $isHomepage) (not .IsViewFile) (not .IsBlame)}}{{/* IsViewDirectory (not home), TODO: split the templates, avoid using "if" tricks */}} - - {{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}} - - {{end}} -
-
- {{if .IsViewFile}} - {{template "repo/view_file" .}} - {{else if .IsBlame}} - {{template "repo/blame" .}} - {{else}}{{/* IsViewDirectory */}} - {{template "repo/view_list" .}} - {{end}} - -
-
-
-{{template "base/footer" .}} diff --git a/src/themes/fonts/KaTeX_AMS-Regular.73ea273a.woff2 b/src/themes/fonts/KaTeX_AMS-Regular.73ea273a.woff2 deleted file mode 100644 index 0acaaff..0000000 Binary files a/src/themes/fonts/KaTeX_AMS-Regular.73ea273a.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Caligraphic-Bold.a1abf90d.woff2 b/src/themes/fonts/KaTeX_Caligraphic-Bold.a1abf90d.woff2 deleted file mode 100644 index f390922..0000000 Binary files a/src/themes/fonts/KaTeX_Caligraphic-Bold.a1abf90d.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Caligraphic-Regular.d6484fce.woff2 b/src/themes/fonts/KaTeX_Caligraphic-Regular.d6484fce.woff2 deleted file mode 100644 index 75344a1..0000000 Binary files a/src/themes/fonts/KaTeX_Caligraphic-Regular.d6484fce.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Fraktur-Bold.931d67ea.woff2 b/src/themes/fonts/KaTeX_Fraktur-Bold.931d67ea.woff2 deleted file mode 100644 index 395f28b..0000000 Binary files a/src/themes/fonts/KaTeX_Fraktur-Bold.931d67ea.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Fraktur-Regular.172d3529.woff2 b/src/themes/fonts/KaTeX_Fraktur-Regular.172d3529.woff2 deleted file mode 100644 index 735f694..0000000 Binary files a/src/themes/fonts/KaTeX_Fraktur-Regular.172d3529.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Main-Bold.39890742.woff2 b/src/themes/fonts/KaTeX_Main-Bold.39890742.woff2 deleted file mode 100644 index ab2ad21..0000000 Binary files a/src/themes/fonts/KaTeX_Main-Bold.39890742.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Main-BoldItalic.20f389c4.woff2 b/src/themes/fonts/KaTeX_Main-BoldItalic.20f389c4.woff2 deleted file mode 100644 index 5931794..0000000 Binary files a/src/themes/fonts/KaTeX_Main-BoldItalic.20f389c4.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Main-Italic.fe2176f7.woff2 b/src/themes/fonts/KaTeX_Main-Italic.fe2176f7.woff2 deleted file mode 100644 index b50920e..0000000 Binary files a/src/themes/fonts/KaTeX_Main-Italic.fe2176f7.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Main-Regular.f650f111.woff2 b/src/themes/fonts/KaTeX_Main-Regular.f650f111.woff2 deleted file mode 100644 index eb24a7b..0000000 Binary files a/src/themes/fonts/KaTeX_Main-Regular.f650f111.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Math-BoldItalic.dcbcbd93.woff2 b/src/themes/fonts/KaTeX_Math-BoldItalic.dcbcbd93.woff2 deleted file mode 100644 index 2965702..0000000 Binary files a/src/themes/fonts/KaTeX_Math-BoldItalic.dcbcbd93.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Math-Italic.6d3d25f4.woff2 b/src/themes/fonts/KaTeX_Math-Italic.6d3d25f4.woff2 deleted file mode 100644 index 215c143..0000000 Binary files a/src/themes/fonts/KaTeX_Math-Italic.6d3d25f4.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_SansSerif-Bold.95591a92.woff2 b/src/themes/fonts/KaTeX_SansSerif-Bold.95591a92.woff2 deleted file mode 100644 index cfaa3bd..0000000 Binary files a/src/themes/fonts/KaTeX_SansSerif-Bold.95591a92.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_SansSerif-Italic.7d393d38.woff2 b/src/themes/fonts/KaTeX_SansSerif-Italic.7d393d38.woff2 deleted file mode 100644 index 349c06d..0000000 Binary files a/src/themes/fonts/KaTeX_SansSerif-Italic.7d393d38.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_SansSerif-Regular.cd5e231e.woff2 b/src/themes/fonts/KaTeX_SansSerif-Regular.cd5e231e.woff2 deleted file mode 100644 index a90eea8..0000000 Binary files a/src/themes/fonts/KaTeX_SansSerif-Regular.cd5e231e.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Script-Regular.c81d1b2a.woff2 b/src/themes/fonts/KaTeX_Script-Regular.c81d1b2a.woff2 deleted file mode 100644 index b3048fc..0000000 Binary files a/src/themes/fonts/KaTeX_Script-Regular.c81d1b2a.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Size1-Regular.6eec866c.woff2 b/src/themes/fonts/KaTeX_Size1-Regular.6eec866c.woff2 deleted file mode 100644 index c5a8462..0000000 Binary files a/src/themes/fonts/KaTeX_Size1-Regular.6eec866c.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Size2-Regular.2960900c.woff2 b/src/themes/fonts/KaTeX_Size2-Regular.2960900c.woff2 deleted file mode 100644 index e1bccfe..0000000 Binary files a/src/themes/fonts/KaTeX_Size2-Regular.2960900c.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Size3-Regular.e1951519.woff2 b/src/themes/fonts/KaTeX_Size3-Regular.e1951519.woff2 deleted file mode 100644 index 249a286..0000000 Binary files a/src/themes/fonts/KaTeX_Size3-Regular.e1951519.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Size4-Regular.e418bf25.woff2 b/src/themes/fonts/KaTeX_Size4-Regular.e418bf25.woff2 deleted file mode 100644 index 680c130..0000000 Binary files a/src/themes/fonts/KaTeX_Size4-Regular.e418bf25.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Typewriter-Regular.c295e7f7.woff2 b/src/themes/fonts/KaTeX_Typewriter-Regular.c295e7f7.woff2 deleted file mode 100644 index 771f1af..0000000 Binary files a/src/themes/fonts/KaTeX_Typewriter-Regular.c295e7f7.woff2 and /dev/null differ diff --git a/src/themes/fonts/codicon.4a477f66.ttf b/src/themes/fonts/codicon.4a477f66.ttf deleted file mode 100644 index c4a33a4..0000000 Binary files a/src/themes/fonts/codicon.4a477f66.ttf and /dev/null differ diff --git a/src/themes/scss/_utils/_color-utils.scss b/src/themes/scss/_utils/_color-utils.scss new file mode 100644 index 0000000..1a3df5b --- /dev/null +++ b/src/themes/scss/_utils/_color-utils.scss @@ -0,0 +1,100 @@ +@use 'sass:color'; +@use 'sass:map'; + +@function light-change($color, $amount) { + @return color.adjust($color, $lightness: $amount * -1); +} + +@function alpha-change($color, $alpha) { + @return color.change($color, $alpha: $alpha); +} + +@function color-variants-light($color, $with-base: false) { + $set: ( + '3%': light-change($color, -3%), + '6%': light-change($color, -6%), + '9%': light-change($color, -9%), + '10%': light-change($color, -10%), + '12%': light-change($color, -12%), + '15%': light-change($color, -15%), + '20%': light-change($color, -20%), + '25%': light-change($color, -25%), + '30%': light-change($color, -30%), + '35%': light-change($color, -35%), + '40%': light-change($color, -40%), + '45%': light-change($color, -45%), + '50%': light-change($color, -50%), + '55%': light-change($color, -55%), + '60%': light-change($color, -60%), + '65%': light-change($color, -65%), + '70%': light-change($color, -70%), + '75%': light-change($color, -75%), + '80%': light-change($color, -80%), + '85%': light-change($color, -85%), + '90%': light-change($color, -90%), + '95%': light-change($color, -95%), + '100%': light-change($color, -100%) + ); + + @if $with-base { + $set: map.merge((base: $color), $set); + } + + @return $set; +} + +@function color-variants-dark($color, $with-base: false) { + $set: ( + '3%': light-change($color, 3%), + '6%': light-change($color, 6%), + '9%': light-change($color, 9%), + '10%': light-change($color, 10%), + '12%': light-change($color, 12%), + '15%': light-change($color, 15%), + '20%': light-change($color, 20%), + '25%': light-change($color, 25%), + '30%': light-change($color, 30%), + '35%': light-change($color, 35%), + '40%': light-change($color, 40%), + '45%': light-change($color, 45%), + '50%': light-change($color, 50%), + '55%': light-change($color, 55%), + '60%': light-change($color, 60%), + '65%': light-change($color, 65%), + '70%': light-change($color, 70%), + '75%': light-change($color, 75%), + '80%': light-change($color, 80%), + '85%': light-change($color, 85%), + '90%': light-change($color, 90%), + '95%': light-change($color, 95%), + '100%': light-change($color, 100%) + ); + + @if $with-base { + $set: map.merge((base: $color), $set); + } + + @return $set; +} + +@function variants($color, $light: true, $dark: true, $base: true, $override-base-with: null) { + $set: (); + + @if $light { + $set: map.merge($set, (light: color-variants-light($color))); + } + + @if $dark { + $set: map.merge($set, (dark: color-variants-dark($color))); + } + + @if $base { + @if $override-base-with { + $set: map.merge($set, (base: $override-base-with)); + } @else { + $set: map.merge($set, (base: $color)); + } + } + + @return $set; +} \ No newline at end of file diff --git a/src/themes/scss/_vars.scss b/src/themes/scss/_vars.scss new file mode 100644 index 0000000..c7c4e38 --- /dev/null +++ b/src/themes/scss/_vars.scss @@ -0,0 +1,36 @@ +$variables: ( + 'font-size': ( + 'xs': .714rem, + 'sm': .857rem, + 'md': 1rem, // 14 + 'lg': 1.143rem, // 16 + 'xl': 1.286rem, // 18 + '2xl': 1.429rem, // 20 + '3xl': 1.714rem, // 24 + '4xl': 2rem, // 28 + ), + '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, + ) +); \ No newline at end of file diff --git a/src/themes/scss/dark.scss b/src/themes/scss/dark.scss index 4c8e36f..0ab8b53 100644 --- a/src/themes/scss/dark.scss +++ b/src/themes/scss/dark.scss @@ -1,83 +1,56 @@ -@use '@lucas-labs/lui-micro' as lui; -@use './utils/color-utils' as c; -@use './theme' as theme; - -$is-dark: true; - -$brand: #a6c6f7; - -$colors: ( - theme: ( - 'rosewater': c.variants(#f5e0dc, $is-dark), - 'flamingo': c.variants(#f2cdcd, $is-dark), - 'pink': c.variants(#f5c2e7, $is-dark), - 'mauve': c.variants(#9b6bf5, $is-dark), - 'red': c.variants(#f38ba8, $is-dark), - 'maroon': c.variants(#eba0ac, $is-dark), - 'peach': c.variants(#fab387, $is-dark), - 'yellow': c.variants(#f9e2af, $is-dark), - 'green': c.variants($brand, $is-dark), - 'dark-green': c.variants(#00E676, $is-dark), - 'teal': c.variants(#94e2d5, $is-dark), - 'sky': c.variants(#89dceb, $is-dark), - 'sapphire': c.variants(#74c7ec, $is-dark), - 'blue': c.variants(#89b4fa, $is-dark), - 'lavender': c.variants(#b4befe, $is-dark), - 'black': c.variants(#181825, $is-dark), - 'white': c.variants(#e6edf3, $is-dark), - ), - text: #e6edf3, - primary: c.variants($brand, $is-dark), - secondary: c.variants(#5d5f7a, $is-dark), - elevation: ( - '1': #000000, // crust - '2': #040407, // mantle - '3': #07070f, // base - '4': #161720, // surface0 - '5': #1a1a25, // surface1 - '6': #222330, // surface2 - '7': #393c4d, // overlay0 - '8': #515569, // overlay1 - '9': #6b7188, // overlay2 - '10': #868ca5, // subtext0 - '11': #9aa2c2, // subtext1 - '12': #b6c0e0, // - ) -); - -// init lui-micro, css-vars only (no reboot, no basic) -@include lui.init( - $theme: ( - colors: $colors, - variables: ( - 'small-font-size': 12px, - 'base-font-size': 14px, - 'font-family': '"Outfit", Inter, Roboto, "Segoe UI", sans-serif', - 'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace', - 'measure': ( - '.25x': 4px, - '.5x': 8px, - '1x': 16px, - '1.25x': 20px, - '1.5x': 24px, - '2x': 32px, - '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 +@use '@lucas-labs/lui-micro' as lui; +@use './_utils/color-utils' as c; +@use './theme' as theme; +@use './vars' as vars; + +$is-dark: true; +$brand: #a6c6f7; + +$colors: ( + primary: c.variants($brand), + secondary: c.variants(hsl(240, 18%, 14%)), // same as elevation/6 + text: #e6edf3, + subtle: hsl(240, 10%, 70%), // 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': hsl(240, 33%, 01%), + '2': hsl(240, 33%, 04%), + '3': hsl(240, 33%, 06%), + '4': hsl(240, 30%, 08%), + '5': hsl(240, 28%, 12%), + '6': hsl(240, 25%, 14%), + '7': hsl(240, 20%, 30%), + '8': hsl(240, 20%, 40%), + '9': hsl(240, 10%, 50%), + '10': hsl(240, 10%, 70%), + '11': hsl(240, 10%, 80%), + '12': hsl(240, 10%, 90%), + ) +); + +// init lui-micro, css-vars only (no reboot, no basic) +@include lui.init( + $theme: (colors: $colors, variables: vars.$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 815913d..2de837d 100644 --- a/src/themes/scss/light.scss +++ b/src/themes/scss/light.scss @@ -1,83 +1,56 @@ -@use '@lucas-labs/lui-micro' as lui; -@use './utils/color-utils' as c; -@use './theme' as theme; - -$is-dark: true; - -$brand: #6296e2; - -$colors: ( - theme: ( - 'rosewater': c.variants(#dc8a78, $is-dark), - 'flamingo': c.variants(#dd7878, $is-dark), - 'pink': c.variants(#ea76cb, $is-dark), - 'mauve': c.variants($brand, $is-dark), - 'red': c.variants(#d20f39, $is-dark), - 'maroon': c.variants(#e64553, $is-dark), - 'peach': c.variants(#fe640b, $is-dark), - 'yellow': c.variants(#df8e1d, $is-dark), - 'green': c.variants($brand, $is-dark), - 'dark-green': c.variants(#11752d, $is-dark), - 'teal': c.variants(#179299, $is-dark), - 'sky': c.variants(#04a5e5, $is-dark), - 'sapphire': c.variants(#209fb5, $is-dark), - 'blue': c.variants(#1e66f5, $is-dark), - 'lavender': c.variants(#7287fd, $is-dark), - 'black': c.variants(#181825, $is-dark), - 'white': c.variants(#e6edf3, $is-dark), - ), - text: #4c4f69, - primary: c.variants($brand, $is-dark), - secondary: c.variants(#5d5f7a, $is-dark), - elevation: ( - '1': #dce0e8, // crust - '2': #e6e9ef, // mantle - '3': #eff1f5, // base - '4': #ccd0da, // 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: ( - 'small-font-size': 12px, - 'base-font-size': 14px, - 'font-family': '"Outfit", Inter, Roboto, "Segoe UI", sans-serif', - 'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace', - 'measure': ( - '.25x': 4px, - '.5x': 8px, - '1x': 16px, - '1.25x': 20px, - '1.5x': 24px, - '2x': 32px, - '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 +@use '@lucas-labs/lui-micro' as lui; +@use './_utils/color-utils' as c; +@use './theme' as theme; +@use './vars' as vars; + +$is-dark: false; +$brand: #6296e2; + +$colors: ( + primary: c.variants($brand), + secondary: c.variants(#bcc0cc), + text: #484b60, + subtle: #656c90, // same as elevation/10 + palette: ( + 'red': c.variants(#d20f39), // red + 'orange': c.variants(#fe640b), // peach + 'yellow': c.variants(#df8e1d), // yellow + 'olive': c.variants(#e2f095), + 'green': c.variants(#34ac56), // green + 'teal': c.variants(#179299), // teal + 'blue': c.variants(#1e66f5), // blue + 'violet': c.variants(#7287fd), // lavender + 'purple': c.variants(#8652e7), // mauve + 'pink': c.variants(#ea76cb), // pink + 'brown': c.variants(#dd7878), // flamingo + 'black': c.variants(#181825), // black + 'white': c.variants(#e6edf3), // white + ), + elevation: ( + '1': #fcfcfd, // elevation/1 + '2': #f6f7f9, // elevation/2 + '3': #eff1f5, // elevation/3 + '4': #e6e9ef, // elevation/4 + '5': #d7dce6, // elevation/5 + '6': #bcc0cc, // elevation/6 + '7': #9ba7bf, // elevation/7 + '8': #838fae, // elevation/8 + '9': #717a9f, // elevation/9 + '10': #656c90, // elevation/10 + '11': #565b77, // elevation/11 + '12': #484b60, // elevation/12 + ) +); + +// init lui-micro, css-vars only (no reboot, no basic) +@include lui.init( + $theme: (colors: $colors, variables: vars.$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/theme/components/_avatar.scss b/src/themes/scss/theme/components/_avatar.scss new file mode 100644 index 0000000..f8a53a3 --- /dev/null +++ b/src/themes/scss/theme/components/_avatar.scss @@ -0,0 +1,8 @@ +@mixin avatar { + img.ui.avatar, .ui.avatar img, .ui.avatar svg { + &:not(.org-avatar) { + border-radius: 50% !important; + object-fit: fill; + } + } +} \ No newline at end of file diff --git a/src/themes/scss/theme/components/_boxes.scss b/src/themes/scss/theme/components/_boxes.scss new file mode 100644 index 0000000..49d3ee0 --- /dev/null +++ b/src/themes/scss/theme/components/_boxes.scss @@ -0,0 +1,89 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; + +@mixin segment { + .ui.segment { + margin: var.get('measure/1x') 0; + padding: var.get('measure/1x'); + border-radius: var(--border-radius); + } + + .ui.segment form >*:first-child { + margin-top: 0; + } + + .ui.segment form >*:last-child { + margin-bottom: 0; + } + + .ui.top.attached.header { + border-radius: var(--border-radius) var(--border-radius) 0 0; + } + + .ui.attached.segment:has(+.ui[class*="top attached"].header), .ui.attached.segment:has(+.page.buttons), .ui.attached.segment:last-child, .ui.segment:has(+.ui.segment:not(.attached)), .ui.attached.segment:has(+.ui.modal) { + border-bottom-left-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); + } + + .ui.segments:not(.horizontal)>.segment:first-child, .ui.segments.horizontal>.segment:first-child { + border-radius: var(--border-radius); + } + + .ui.segments:not(.horizontal)>.segment:last-child, .ui.horizontal.segments>.segment:last-child { + border-radius: var(--border-radius); + } +} + +@mixin comments { + .comment { + .content { + background-color: var(--color-box-body); + + >.comment-header, >.ui.segment { + &:before, &:after { + display: none; + } + } + + .comment-header { + padding: var.get('measure/.25x') var.get('measure/.25x') var.get('measure/.25x') var.get('measure/1x') !important; + + .comment-header-left { + .text { + color: color.get('subtle') !important; + + .author { + color: color.get('text') !important; + } + } + } + + .comment-header-right { + * { + color: color.get('subtle') !important; + } + + .label { + height: var.get('measure/1.25x', 1.25rem) !important; + padding: 0px var.get('measure/.375x') !important; + border-radius: var.get('measure/1x') !important; + } + } + } + } + } + + .comment-list .comment>.content>div:last-child { + border-bottom-left-radius: var(--border-radius) !important; + border-bottom-right-radius: var(--border-radius) !important; + } + + .comment-list .comment>.content>div:first-child { + border-top-left-radius: var(--border-radius) !important; + border-top-right-radius: var(--border-radius) !important; + } + + .ui.comments .comment { + margin: var.get('measure/.25x') 0 0; + } +} \ No newline at end of file diff --git a/src/themes/scss/theme/components/_editor.scss b/src/themes/scss/theme/components/_editor.scss new file mode 100644 index 0000000..1a27735 --- /dev/null +++ b/src/themes/scss/theme/components/_editor.scss @@ -0,0 +1,143 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; + +@mixin editor { + .combo-markdown-editor { + .top.tabular.menu { + background-color: var(--color-box-header); + border-radius: var(--border-radius) var(--border-radius) 0 0; + min-height: 0px; + margin-bottom: var.get('measure/1x') !important; + + .item { + margin: -1px 0 0 -1px; // merge borders + border-top-left-radius: var(--border-radius) !important; + border-top-right-radius: var(--border-radius) !important; + padding: var.get('measure/.5x') var.get('measure/.75x') !important; + font-weight: 400; + + &:hover { + color: var(--color-text-light-2); + } + + &.active { + color: var(--color-text); + &:after { + // a hacky 1 pixel "button border" to make the border + // of the whole menu disappear under the active tab + display: block; + content: ''; + position: absolute; + top: 100%; + right: 0; + width: 100%; + height: 1px; + background-color: var(--color-body); + } + } + } + } + + .tab { + .EasyMDEContainer { // legacy editor + border: none !important; + + .editor-toolbar { + border: none !important; + } + } + + markdown-toolbar, .EasyMDEContainer .editor-toolbar { + padding: 0 10px !important; + + .markdown-toolbar-group { + border: none !important; + padding: 0 !important; + + &:not(:last-child) { + &:after { + content: ''; + display: block; + position: relative; + width: 1px; + flex: 1; + margin: var.get('measure/.375x') var.get('measure/.375x') !important; + background-color: color.get('elevation/6'); + } + } + } + + .markdown-toolbar-button, button { + line-height: 0; + display: inline-block; + color: var(--color-text-light-2) !important; + padding: var.get('measure/.375x') !important; + transition: background-color .1s ease; + border-radius: var.get('measure/.375x') !important; + height: auto; + min-width: fit-content; + + &:hover { + background-color: color.get('elevation/5') !important; + } + + // if has attribute level + &[level] { + width: 34px; + } + + // if aria-checked is true + &[aria-checked="true"] { + background-color: color.get('elevation/4'); + } + } + + button { + &:after { + vertical-align: unset !important; + } + } + } + + textarea, .CodeMirror.cm-s-easymde.CodeMirror-wrap { + background-color: transparent !important; + border: none !important; + padding: var.get('measure/1x') var.get('measure/1x') !important; + } + + .editor-statusbar { + margin-bottom: 0 !important; + } + + &.markup { + padding: 0 var.get('measure/1x') var.get('measure/1x'); + } + } + } + + .combo-markdown-editor { + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); + &:focus-within { + outline: 2px solid var(--color-accent); + border-radius: var(--border-radius); + } + + textarea:focus { + outline: none !important; + } + + .ui.tab.markup[data-tab-panel=markdown-previewer] { + border-bottom: 0px; + } + } + + #comment-form, .edit-content-zone, .comment-form, .comment-code-cloud form { + padding: 0 !important; + border: none !important; + + .field { + margin-bottom: var.get('measure/1x') !important; + } + } +} diff --git a/src/themes/scss/theme/components/_file-content.scss b/src/themes/scss/theme/components/_file-content.scss new file mode 100644 index 0000000..604db84 --- /dev/null +++ b/src/themes/scss/theme/components/_file-content.scss @@ -0,0 +1,45 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; + +@mixin file-content { + .non-diff-file-content { + .ui.segment.list-header { + border-radius: var(--border-radius); + margin-bottom: var.get('measure/1x') !important; + gap: var.get('measure/.5x'); + padding: var.get('measure/.5x') var.get('measure/.75x'); + + .latest-commit { + gap: var.get('measure/.5x'); + } + + .commit-summary { + color: color.get('subtle'); + } + + .age { + font-size: 12px; + } + } + + .ui.top.attached.header { + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); + + .file-info { + color: color.get('subtle') !important; + } + + .btn-octicon { + --color-text: #{color.get('subtle')}; + } + } + + .ui.attached.segment:has(+.ui[class*="top attached"].header), .ui.attached.segment:has(+.page.buttons), .ui.attached.segment:last-child, .ui.segment:has(+.ui.segment:not(.attached)), .ui.attached.segment:has(+.ui.modal) { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); + } + } +} \ No newline at end of file diff --git a/src/themes/scss/theme/components/_forms.scss b/src/themes/scss/theme/components/_forms.scss new file mode 100644 index 0000000..f92368d --- /dev/null +++ b/src/themes/scss/theme/components/_forms.scss @@ -0,0 +1,11 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; +@use './forms/' as forms; + +@mixin forms { + @include forms.dropdown-menu; + @include forms.menu; + @include forms.tabular-menu; + @include forms.input; +} + diff --git a/src/themes/scss/theme/components/_labels.scss b/src/themes/scss/theme/components/_labels.scss new file mode 100644 index 0000000..caa84b6 --- /dev/null +++ b/src/themes/scss/theme/components/_labels.scss @@ -0,0 +1,64 @@ +@use '@lucas-labs/lui-micro/color' as color; +@use '@lucas-labs/lui-micro/var' as var; + +@mixin label-signed { + .label.isSigned { + font-size: var.get('font-size/sm') !important; + margin: 0px .25em !important; + padding: 0 !important; + display: inline-flex !important; + gap: 0px !important; + border-radius: 16px !important; + + --color-light-border: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important; + --color-label-bg: none !important; + --color-text: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important; + --color-green-badge-bg: none !important; + --color-green-badge-hover-bg: rgba(#{color.get('palette/green/base', 'rgb')}, 0.05) !important; + --color-label-hover-bg: rgba(#{color.get('palette/green/base', 'rgb')}, 0.05) !important; + --color-label-text: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important; + --color-green-badge: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important; + + .shortsha { + padding: 2px 6px 2px 8px !important; + } + + .ui.detail.icon.button { + opacity: 1 !important; + padding: 2px 8px 2px 6px !important; + margin: 0 !important; + background: none !important; + border-color: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important; + } + + &.isVerified { + .ui.detail.icon.button { + padding: 2px 8px 2px 6px !important; + } + } + } +} + +@mixin label-default { + .ui.label { + border-radius: var.get('measure/1.25x'); + + &.scope-left { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &.scope-right { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + &.green { + color: var(--color-green-contrast) !important; + } + + &.red { + color: var(--color-red-contrast) !important; + } + } +} \ No newline at end of file diff --git a/src/themes/scss/theme/components/_markup.scss b/src/themes/scss/theme/components/_markup.scss new file mode 100644 index 0000000..91008a8 --- /dev/null +++ b/src/themes/scss/theme/components/_markup.scss @@ -0,0 +1,35 @@ +@use '@lucas-labs/lui-micro/color' as color; +@use '@lucas-labs/lui-micro/var' as var; + +@mixin markup { + .markup { + .task-list-item input[type=checkbox] { + margin: 0 .5em .25em -1.4em; + } + + input[type=checkbox] { + --border-radius: #{var.get('measure/.25x')}; + width: var.get('measure/1x'); + height: var.get('measure/1x'); + margin-right: 4px; + --color-input-background: #{color.get('elevation/5')}; + + &:checked { + background-color: var(--color-primary); + } + + &:after { + --color-text: var(--color-primary-contrast); + } + + &:not([disabled]):hover, &:not([disabled]):active { + border-color: var(--color-secondary); + background-color: color.get('elevation/6'); + + &:checked { + background-color: var(--color-primary-hover); + } + } + } + } +} \ No newline at end of file diff --git a/src/themes/scss/theme/components/button/index.scss b/src/themes/scss/theme/components/button/index.scss new file mode 100644 index 0000000..ed89f6d --- /dev/null +++ b/src/themes/scss/theme/components/button/index.scss @@ -0,0 +1,128 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; + +@mixin hollow { + --border-radius: #{var.get('measure/.25x')}; + + padding: var.get('measure/.375x') var.get('measure/.5x') !important; + background-color: transparent !important; + font-weight: normal; + + button, .button { + border-color: color.get('elevation/6') !important; + gap: var.get('measure/.5x') !important; + border-radius: var(--border-radius); + + &:hover { + border-color: color.get('elevation/7') !important; + + +.label { + border-left-color: color.get('elevation/7') !important; + } + } + } + + &.labeled { + button, .button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .label { + border-color: color.get('elevation/6') !important; + background-color: transparent !important; + + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); + + + &:hover { + border-color: color.get('elevation/7') !important; + } + } + } + + &:hover { + border-color: color.get('elevation/7') !important; + } +} + +@mixin gitea-button { + .ui.icon.buttons .button, .ui.icon.button:not(.compact) { + // padding: 50px; + } + + .code-comment-buttons-buttons { + button:not(.labeled):not(.icon) { + padding: .78571429em !important; + } + } + + // buttons group + .ui.buttons { + &.icon .button, &.icon:not(.compact) { + padding: 50px 50px; + } + + .button { + &:first-child { + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &.button:last-child { + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + border-right: none; + flex: 1 0 auto; + border-radius: 0; + margin: 0; + } + } + + .ui.button { + border-radius: var(--border-radius); + transition: color .1s ease, background-color .1s ease, border-color .1s ease; + padding: calc(#{var.get('measure/.375x')} - 1px) var.get('measure/1x'); + font-size: var.get('font-size/md'); + line-height: 20px; + + &.tiny { + font-size: var.get('font-size/sm'); + line-height: var.get('font-size/sm'); + } + + &.basic { + border-radius: var(--border-radius); + } + + &.red, &.red.basic { + border-color: var(--color-secondary); + background: var(--color-button); + color: var(--color-red); + + &:hover { + background: var(--color-red-dark-2); + color: var(--color-white); + } + + &.basic { + border-color: rgba(#{color.get('palette/red/base', 'rgb')}, 0.4); + } + } + + &.primary, &.red, &.basic { + font-weight: 500; + } + } + + +} \ No newline at end of file diff --git a/src/themes/scss/theme/components/forms/_input.scss b/src/themes/scss/theme/components/forms/_input.scss new file mode 100644 index 0000000..d5c93d8 --- /dev/null +++ b/src/themes/scss/theme/components/forms/_input.scss @@ -0,0 +1,86 @@ +@use '@lucas-labs/lui-micro/color' as color; +@use '@lucas-labs/lui-micro/var' as var; + +@mixin -all-inputs($state: null) { + input#{$state}, + textarea#{$state}, + .ui.input>input#{$state}, + .ui.form input:not([type])#{$state}, + .ui.form select#{$state}, + .ui.form textarea#{$state}, + .ui.form input[type=date]#{$state}, + .ui.form input[type=datetime-local]#{$state}, + .ui.form input[type=email]#{$state}, + .ui.form input[type=file]#{$state}, + .ui.form input[type=number]#{$state}, + .ui.form input[type=password]#{$state}, + .ui.form input[type=search]#{$state}, + .ui.form input[type=tel]#{$state}, + .ui.form input[type=text]#{$state}, + .ui.form input[type=time]#{$state}, + .ui.form input[type=url]#{$state}, + .ui.selection.dropdown#{$state} { + @content; + } +} + +@mixin input { + @include -all-inputs { + border-color: var(--color-input-border); + color: var(--color-input-text); + border-radius: var(--border-radius); + line-height: 20px; + min-height: auto; + padding: calc(#{var.get('measure/.375x')} - 1px) var.get('measure/.75x'); + + +.ui.button:last-child { + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); + } + } + + @include -all-inputs(':hover') { + // border-radius: var(--border-radius); + border-color: var(--color-input-border); + color: var(--color-input-text) + } + + @include -all-inputs(':focus') { + border-radius: var(--border-radius); + border-color: var(--color-input-border); + color: var(--color-input-text); + outline: 2px solid var(--color-accent); + background-color: color.get('elevation/2'); + } + + @include -all-inputs('.active') { + border-radius: var(--border-radius); + outline: 2px solid var(--color-accent); + } + + .ui.action.input:not([class*="left action"])>input:focus { + border-right-color: var(--color-input-border); + z-index: 1; + } + + .ui.action.input>.dropdown:not(:first-child):not(:last-child), + .ui.action.input>.button:not(:first-child):not(:last-child), + .ui.action.input>.buttons:not(:first-child):not(:last-child)>.button { + border-radius: 0 !important; + } + + .ui.action.input:not([class*="left action"])>input:focus+.ui.dropdown.selection, + .ui.action.input:not([class*="left action"])>input:focus+.ui.dropdown.selection:hover, + .ui.action.input:not([class*="left action"])>input:focus+.button, + .ui.action.input:not([class*="left action"])>input:focus+.button:hover, + .ui.action.input:not([class*="left action"])>input:focus+i.icon+.button, + .ui.action.input:not([class*="left action"])>input:focus+i.icon+.button:hover { + border-left-color: var(--color-input-border); + } + + .ui.form .field>label { + margin: 0 0 var.get('measure/.375x'); + font-size: var.get('font-size/md'); + font-weight: 600; + } +} \ No newline at end of file diff --git a/src/themes/scss/theme/components/forms/_menu.scss b/src/themes/scss/theme/components/forms/_menu.scss new file mode 100644 index 0000000..6e7b2c2 --- /dev/null +++ b/src/themes/scss/theme/components/forms/_menu.scss @@ -0,0 +1,214 @@ +@use '@lucas-labs/lui-micro/color' as color; +@use '@lucas-labs/lui-micro/var' as var; + +@mixin dropdown-menu { + .ui.dropdown { + // dropdown menu + >.menu { + --border-radius: #{var.get('measure/.75x')}; + + opacity: 0; + overflow-x: hidden; + &.hidden { opacity: 0 !important;} + &.visible { opacity: 1 !important; } + + border-radius: var(--border-radius) !important; + transition: opacity .2s ease !important; + box-shadow: 0px 6px 12px -3px rgba(var(--color-shadow-rgb), 0.5), + 0px 6px 18px 0px rgba(var(--color-shadow-rgb), 0.1) !important; + + .divider { + margin-top: var.get('measure/.5x') !important; + margin-bottom: var.get('measure/.5x') !important; + } + + .item:not(.comment-reaction-button) { + --border-radius: #{var.get('measure/.375x')}; + + margin: 0 var.get('measure/.5x') !important; + border-radius: var(--border-radius) !important; + padding: var.get('measure/.375x') var.get('measure/.5x') !important; + line-height: 1 !important; + display: flex; + flex-wrap: wrap; + align-content: center; + width: auto; + + &:first-of-type { + margin-top: var.get('measure/.5x') !important; + } + + &:last-of-type { + margin-bottom: var.get('measure/.5x') !important; + } + + &.clear-selection { + margin-bottom: var.get('measure/.5x') !important; + } + } + + input[type="text"], input[name="search"] { + --color-input-background: #{color.get('elevation/1')}; + --color-input-border: #{color.get('elevation/5')}; + + min-height: var.get('measure/2x') !important; + padding: 0 var.get('measure/.5x') !important; + font-size: var.get('font-size/md') !important; + border-radius: var.get('measure/.375x') !important; + + &:focus { + --color-primary: var(--color-accent); + } + } + + .scrolling.menu { + .item { + gap: var.get('measure/.5x') !important; + + &:hover { + &:before { + position: absolute; + top: calc(50% - 12px); + left: -8px; + width: 4px; + height: 24px; + content: ""; + background-color: var(--color-accent); + border-radius: 6px; + } + } + + .item-check-mark { + background-color: color.get('elevation/6'); + visibility: visible !important; + display: inline-flex; + padding: 2px; + border-radius: var.get('measure/.375x'); + border: 1px solid color.get('elevation/8'); + + svg { + visibility: hidden; + } + } + + .item-secondary-info { + flex-basis: 100%; + padding: 0 0 0 var.get('measure/.5x'); + color: color.get('subtle'); + line-height: 100%; + white-space: nowrap; + overflow-x: hidden; + + small { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + + &.checked { + .item-check-mark { + background-color: var(--color-accent); + + svg { + visibility: visible; + } + } + } + } + } + } + + // if not .upward + &:not(.upward) { + >.menu { + top: calc(100% + var.get('measure/.5x')) !important; + } + } + + &.upward { + >.menu { + bottom: calc(100% + var.get('measure/.5x')) !important; + } + } + + &.upward.selection.visible, &.active.upward.selection { + border-top-left-radius: var(--border-radius) !important; + border-top-right-radius: var(--border-radius) !important; + border-bottom-left-radius: var(--border-radius) !important; + border-bottom-right-radius: var(--border-radius) !important; + } + + &.selection.active, &.selection.active:hover, &.selection.active .menu, &.selection.active:hover .menu { + border-color: var(--color-secondary) !important; + } + + // select type dropdown + &.selection { + --border-radius: #{var.get('measure/.5x')}; + border-radius: var(--border-radius) !important; + + &:focus, &.active { + border-color: var(--color-secondary) !important; + outline: 2px solid var(--color-accent); + } + + &.active { + border-radius: var(--border-radius) !important; + } + + >.menu { + border-radius: var(--border-radius) !important; + border-top-width: 1px !important; + border-color: var(--color-secondary) !important; + flex-direction: column; + gap: var.get('measure/.25x'); + + &.visible { + display: flex; + } + + .item { + border: none !important; + } + } + } + } +} + +@mixin menu { + .ui.menu { + border-radius: var(--border-radius); + + >.item:first-child { + border-radius: var(--border-radius) 0 0 var(--border-radius); + } + + &.compact:not(.secondary) .item:last-child { + border-radius: 0 var(--border-radius) var(--border-radius) 0; + } + } + + .ui.secondary.menu { + gap: var.get('measure/.25x'); + + &.vertical { + >.item { + border: none; + margin: 0 0 var.get('measure/.25x') 0; + border-radius: var(--border-radius) !important; + } + } + + .dropdown.item.active:hover, a.item.active:hover { + color: var(--color-text); + background: var(--color-hover); + } + } +} + +@mixin tabular-menu { + .ui.tabular.menu .active.item, .ui.tabular.menu .active.item:hover { + border-radius: var(--border-radius) var(--border-radius) 0 0 !important; + } +} \ No newline at end of file diff --git a/src/themes/scss/theme/components/forms/index.scss b/src/themes/scss/theme/components/forms/index.scss new file mode 100644 index 0000000..9ff06ec --- /dev/null +++ b/src/themes/scss/theme/components/forms/index.scss @@ -0,0 +1,2 @@ +@forward './menu'; +@forward './input'; \ No newline at end of file diff --git a/src/themes/scss/theme/components/index.scss b/src/themes/scss/theme/components/index.scss new file mode 100644 index 0000000..6d1ee3a --- /dev/null +++ b/src/themes/scss/theme/components/index.scss @@ -0,0 +1,8 @@ +@forward './labels'; +@forward './editor'; +@forward './forms'; +@forward './file-content'; +@forward './avatar'; +@forward './button'; +@forward './boxes'; +@forward './markup'; \ No newline at end of file diff --git a/src/themes/scss/theme/index.scss b/src/themes/scss/theme/index.scss index ece1050..de82a20 100644 --- a/src/themes/scss/theme/index.scss +++ b/src/themes/scss/theme/index.scss @@ -1,425 +1,30 @@ -@use '@lucas-labs/lui-micro/color' as color; -@use './modules/chroma' as chroma; -@use './modules/monaco' as monaco; -@use './modules/codemirror' as codemirror; -@use './modules/custom' as custom; -@use '@lucas-labs/lui-micro/var' as var; +@use './vars'; +@use './components'; +@use './modules'; @mixin make-theme($is-dark: true) { - $lvl1: #{color.get('elevation/3')}; - $lvl1-rgb: #{color.get('elevation/3', 'rgb')}; - $lvl2: #{color.get('elevation/2')}; - $lvl2-rgb: #{color.get('elevation/2', 'rgb')}; - $lvl3: #{color.get('elevation/1')}; - $lvl3-rgb: #{color.get('elevation/1', 'rgb')}; - - :root { - * { - --fonts-regular: #{var.get('font-family')}; - --fonts-monospace: #{var.get('code-font-family')}; - } - - @if $is-dark { - color-scheme: dark; - --is-dark-theme: true; - } @else { - color-scheme: light; - --is-dark-theme: false; - } - - accent-color: #{color.get('primary/base')}; - - --color-primary: #{color.get('primary/base')}; - --color-primary-contrast: #{color.get('primary/base', 'contrast')}; - - --color-primary-dark-1: #{color.get('primary/dark/3%')}; - --color-primary-dark-2: #{color.get('primary/dark/6%')}; - --color-primary-dark-3: #{color.get('primary/dark/9%')}; - --color-primary-dark-4: #{color.get('primary/dark/12%')}; - --color-primary-dark-5: #{color.get('primary/dark/15%')}; - --color-primary-dark-6: #{color.get('primary/dark/18%')}; - --color-primary-dark-7: #{color.get('primary/dark/21%')}; - - --color-primary-light-1: #{color.get('primary/light/3%')}; - --color-primary-light-2: #{color.get('primary/light/6%')}; - --color-primary-light-3: #{color.get('primary/light/9%')}; - --color-primary-light-4: #{color.get('primary/light/12%')}; - --color-primary-light-5: #{color.get('primary/light/15%')}; - --color-primary-light-6: #{color.get('primary/light/18%')}; - --color-primary-light-7: #{color.get('primary/light/21%')}; - - --color-primary-alpha-10: rgba(#{color.get('primary/base', 'rgb')}, 0.1); - --color-primary-alpha-20: rgba(#{color.get('primary/base', 'rgb')}, 0.2); - --color-primary-alpha-30: rgba(#{color.get('primary/base', 'rgb')}, 0.3); - --color-primary-alpha-40: rgba(#{color.get('primary/base', 'rgb')}, 0.4); - --color-primary-alpha-50: rgba(#{color.get('primary/base', 'rgb')}, 0.5); - --color-primary-alpha-60: rgba(#{color.get('primary/base', 'rgb')}, 0.6); - --color-primary-alpha-70: rgba(#{color.get('primary/base', 'rgb')}, 0.7); - --color-primary-alpha-80: rgba(#{color.get('primary/base', 'rgb')}, 0.8); - --color-primary-alpha-90: rgba(#{color.get('primary/base', 'rgb')}, 0.9); - - - --color-primary-hover: #{color.get('primary/light/3%')}; - --color-primary-active: #{color.get('primary/light/6%')}; - --color-secondary: #{color.get('elevation/5')}; - - --color-secondary-dark-1: #{color.get('secondary/light/3%')}; - --color-secondary-dark-2: #{color.get('secondary/light/6%')}; - --color-secondary-dark-3: #{color.get('secondary/light/9%')}; - --color-secondary-dark-4: #{color.get('secondary/light/12%')}; - --color-secondary-dark-5: #{color.get('secondary/light/15%')}; - --color-secondary-dark-6: #{color.get('secondary/light/18%')}; - --color-secondary-dark-7: #{color.get('secondary/light/21%')}; - --color-secondary-dark-8: #{color.get('secondary/light/24%')}; - --color-secondary-dark-9: #{color.get('secondary/light/27%')}; - --color-secondary-dark-10: #{color.get('secondary/light/30%')}; - --color-secondary-dark-11: #{color.get('secondary/light/33%')}; - --color-secondary-dark-12: #{color.get('secondary/light/36%')}; - --color-secondary-dark-13: #{color.get('secondary/light/39%')}; - - --color-secondary-light-1: #{color.get('secondary/dark/3%')}; - --color-secondary-light-2: #{color.get('secondary/dark/6%')}; - --color-secondary-light-3: #{color.get('secondary/dark/9%')}; - --color-secondary-light-4: #{color.get('secondary/dark/12%')}; - - --color-secondary-alpha-10: rgba(#{color.get('secondary/base', 'rgb')}, 0.1); - --color-secondary-alpha-20: rgba(#{color.get('secondary/base', 'rgb')}, 0.2); - --color-secondary-alpha-30: rgba(#{color.get('secondary/base', 'rgb')}, 0.3); - --color-secondary-alpha-40: rgba(#{color.get('secondary/base', 'rgb')}, 0.4); - --color-secondary-alpha-50: rgba(#{color.get('secondary/base', 'rgb')}, 0.5); - --color-secondary-alpha-60: rgba(#{color.get('secondary/base', 'rgb')}, 0.6); - --color-secondary-alpha-70: rgba(#{color.get('secondary/base', 'rgb')}, 0.7); - --color-secondary-alpha-80: rgba(#{color.get('secondary/base', 'rgb')}, 0.8); - --color-secondary-alpha-90: rgba(#{color.get('secondary/base', 'rgb')}, 0.9); - - /* colors */ - --color-red: #{color.get('theme/red/base')}; - --color-orange: #{color.get('theme/peach/base')}; - --color-yellow: #{color.get('theme/yellow/base')}; - --color-olive: #{color.get('theme/green/base')}; - --color-green: #{color.get('theme/green/base')}; - --color-teal: #{color.get('theme/teal/base')}; - --color-blue: #{color.get('theme/blue/base')}; - --color-violet: #{color.get('theme/lavender/base')}; - --color-purple: #{color.get('theme/mauve/base')}; - --color-pink: #{color.get('theme/pink/base')}; - --color-brown: #{color.get('theme/flamingo/base')}; - --color-grey: #{color.get('elevation/9')}; - --color-black: #{color.get('elevation/1')}; - - /* dark variants */ - --color-red-dark-1: #{color.get('theme/red/dark/12%')}; - --color-orange-dark-1: #{color.get('theme/peach/dark/12%')}; - --color-yellow-dark-1: #{color.get('theme/yellow/dark/12%')}; - --color-olive-dark-1: #{color.get('theme/green/dark/12%')}; - --color-green-dark-1: #{color.get('theme/green/dark/12%')}; - --color-teal-dark-1: #{color.get('theme/teal/dark/12%')}; - --color-blue-dark-1: #{color.get('theme/blue/dark/12%')}; - --color-violet-dark-1: #{color.get('theme/lavender/dark/12%')}; - --color-purple-dark-1: #{color.get('theme/mauve/dark/12%')}; - --color-pink-dark-1: #{color.get('theme/pink/dark/12%')}; - --color-brown-dark-1: #{color.get('theme/flamingo/dark/12%')}; - - --color-red-dark-2: #{color.get('theme/red/dark/15%')}; - --color-orange-dark-2: #{color.get('theme/peach/dark/15%')}; - --color-yellow-dark-2: #{color.get('theme/yellow/dark/15%')}; - --color-olive-dark-2: #{color.get('theme/green/dark/15%')}; - --color-green-dark-2: #{color.get('theme/green/dark/15%')}; - --color-teal-dark-2: #{color.get('theme/teal/dark/15%')}; - --color-blue-dark-2: #{color.get('theme/blue/dark/15%')}; - --color-violet-dark-2: #{color.get('theme/lavender/dark/15%')}; - --color-purple-dark-2: #{color.get('theme/mauve/dark/15%')}; - --color-pink-dark-2: #{color.get('theme/pink/dark/15%')}; - --color-brown-dark-2: #{color.get('theme/flamingo/dark/15%')}; - - /* light variants */ - --color-red-light: #{color.get('theme/red/light/12%')}; - --color-orange-light: #{color.get('theme/peach/light/12%')}; - --color-yellow-light: #{color.get('theme/yellow/light/12%')}; - --color-olive-light: #{color.get('theme/green/light/12%')}; - --color-green-light: #{color.get('theme/green/light/12%')}; - --color-teal-light: #{color.get('theme/teal/light/12%')}; - --color-blue-light: #{color.get('theme/blue/light/12%')}; - --color-violet-light: #{color.get('theme/lavender/light/12%')}; - --color-purple-light: #{color.get('theme/mauve/light/12%')}; - --color-pink-light: #{color.get('theme/pink/light/12%')}; - --color-brown-light: #{color.get('theme/flamingo/light/12%')}; - --color-grey-light: #{color.get('elevation/11')}; - --color-black-light: #{if( - is-dark, - color.get('theme/black/light/12%'), - color.get('theme/white/light/12%') - )}; - - /* other colors */ - --color-gold: #{color.get('theme/rosewater/base')}; - --color-white: #{color.get('text')}; - --color-diff-removed-word-bg: rgba(#{color.get('theme/red/base', 'rgb')}, 0.15); - --color-diff-added-word-bg: rgba(#{color.get('theme/green/base', 'rgb')}, 0.15); - --color-diff-removed-row-bg: rgba(#{color.get('theme/red/base', 'rgb')}, 0.07); - --color-diff-moved-row-bg: rgba(#{color.get('theme/yellow/base', 'rgb')}, 0.07); - --color-diff-added-row-bg: rgba(#{color.get('theme/green/base', 'rgb')}, 0.07); - --color-diff-removed-row-border: rgba(#{color.get('theme/red/base', 'rgb')}, 0.07); - --color-diff-moved-row-border: rgba(#{color.get('theme/yellow/base', 'rgb')}, 0.07); - --color-diff-added-row-border: rgba(#{color.get('theme/green/base', 'rgb')}, 0.07); - --color-diff-inactive: #{color.get('elevation/9')}; - --color-error-border: #{color.get('theme/red/base')}; - --color-error-bg: rgba(#{color.get('theme/red/base', 'rgb')}, 0.15); - --color-error-bg-active: #{color.get('theme/red/light/6%')}; - --color-error-bg-hover: #{color.get('theme/red/light/12%')}; - --color-error-text: #{color.get('theme/red/base')}; - --color-success-border: #{color.get('theme/green/light/12%')}; - --color-success-bg: rgba(#{color.get('theme/green/base', 'rgb')}, 0.15); - --color-success-text: #{color.get('text')}; - --color-warning-border: #{color.get('theme/yellow/light/12%')}; - --color-warning-bg: #{color.get('theme/yellow/base')}; - --color-warning-text: #{$lvl1}; - --color-info-border: #{color.get('theme/blue/light/12%')}; - --color-info-bg: #{$lvl1}; - --color-info-text: #{color.get('text')}; - --color-red-badge: #{color.get('theme/red/light/12%')}; - --color-red-badge-bg: #{$lvl1}; - --color-red-badge-hover-bg: #{color.get('theme/red/light/6%')}; - --color-green-badge: #{color.get('theme/green/base')}; - --color-green-badge-bg: #{$lvl1}; - --color-green-badge-hover-bg: #{color.get('theme/green/light/6%')}; - --color-yellow-badge: #{color.get('theme/yellow/base')}; - --color-yellow-badge-bg: #{$lvl1}; - --color-yellow-badge-hover-bg: #{color.get('theme/yellow/light/6%')}; - --color-orange-badge: #{color.get('theme/peach/base')}; - --color-orange-badge-bg: #{$lvl1}; - --color-orange-badge-hover-bg: #{color.get('theme/peach/light/6%')}; - --color-git: #{color.get('theme/peach/base')}; - --color-label-bg: #{color.get('primary/base')}; - --color-label-hover-bg: #{color.get('primary/light/6%')}; - - /* target-based colors */ - --color-body: #{$lvl1}; - --color-box-header: #{rgba(color.get('elevation/2', 'rgb'), 1)}; - --color-box-body: var(--color-body); - --color-box-body-highlight: #{color.get('elevation/4')}; - --color-text-dark: #{color.get('elevation/10')}; - --color-text: #{color.get('text')}; - --color-text-light: #{color.get('elevation/12')}; - --color-text-light-1: #{color.get('elevation/11')}; - --color-text-light-2: #{color.get('elevation/10')}; - --color-text-light-3: #{color.get('elevation/9')}; - --color-footer: rgba(#{color.get('elevation/2', 'rgb')}, 0.2); - --color-timeline: #{color.get('elevation/4')}; - --color-input-text: #{color.get('text')}; - --color-input-background: #{color.get('elevation/4')}; - --color-input-toggle-background: #{color.get('elevation/4')}; - --color-input-border: #{color.get('elevation/5')}; - --color-input-border-hover: #{color.get('elevation/6')}; - --color-header-wrapper: #{$lvl2}; - --color-header-wrapper-transparent: #00000000; - --color-light: #{color.get('elevation/6')}; - --color-light-mimic-enabled: rgba( - 0, - 0, - 0, - calc(40 / 255 * 222 / 255 / var(--opacity-disabled)) - ); - --color-light-border: #{color.get('elevation/6')}; - --color-hover: rgba(#{color.get('elevation/6', 'rgb')}, 0.1); - --color-active: rgba(#{color.get('text', 'rgb')}, 0.1); - --color-menu: #{color.get('elevation/3')}; - --color-card: #{color.get('elevation/3')}; - --color-markup-table-row: rgba(#{color.get('text', 'rgb')}, 0.02); - --color-markup-code-block: #{color.get('elevation/2')}; - --color-button: #{color.get('elevation/4')}; - --color-code-bg: $lvl1; - --color-code-sidebar-bg: #{color.get('elevation/4')}; - --color-shadow: rgba(#{$lvl1-rgb}, 0.1); - --color-secondary-bg: #{color.get('elevation/4')}; - --color-text-focus: #{color.get('text')}; - --color-expand-button: #{color.get('elevation/6')}; - --color-placeholder-text: #{color.get('elevation/9')}; - --color-editor-line-highlight: var(--color-primary-light-5); - --color-project-board-bg: #{color.get('elevation/2')}; - --color-caret: var(--color-text); - --color-reaction-bg: rgba(#{color.get('text', 'rgb')}, 0.07); - --color-reaction-active-bg: var(--color-primary-alpha-40); - --color-tooltip-text: #{color.get('primary/base')}; - --color-tooltip-bg: #{color.get('primary/base', 'contrast')}; - --color-nav-bg: #{$lvl2}; - --color-secondary-nav-bg: #{$lvl2}; - --color-nav-text: #{color.get('text')}; - --color-nav-hover-bg: #{color.get('elevation/6')}; - --color-label-active-bg: #{color.get('elevation/6')}; - --color-label-text: #{color.get('primary/base', 'contrast')}; - --color-accent: var(--color-primary-light-1); - --color-small-accent: var(--color-primary-light-5); - --color-active-line: #{color.get('elevation/5')}; - } - - @if $is-dark { - /* invert emojis that are hard to read otherwise */ - .emoji[aria-label='check mark'], - .emoji[aria-label='currency exchange'], - .emoji[aria-label='TOP arrow'], - .emoji[aria-label='END arrow'], - .emoji[aria-label='ON! arrow'], - .emoji[aria-label='SOON arrow'], - .emoji[aria-label='heavy dollar sign'], - .emoji[aria-label='copyright'], - .emoji[aria-label='registered'], - .emoji[aria-label='trade mark'], - .emoji[aria-label='multiply'], - .emoji[aria-label='plus'], - .emoji[aria-label='minus'], - .emoji[aria-label='divide'], - .emoji[aria-label='curly loop'], - .emoji[aria-label='double curly loop'], - .emoji[aria-label='wavy dash'], - .emoji[aria-label='paw prints'], - .emoji[aria-label='musical note'], - .emoji[aria-label='musical notes'] { - filter: invert(100%) hue-rotate(180deg); - } - } - - @media (prefers-color-scheme: dark) { - input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:hover, input:-webkit-autofill:active, .ui.form .field.field input:-webkit-autofill, .ui.form .field.field input:-webkit-autofill:focus, .ui.form .field.field input:-webkit-autofill:hover, .ui.form .field.field input:-webkit-autofill:active { - -webkit-background-clip: text; - -webkit-text-fill-color: var(--color-secondary); - box-shadow: 0 0 0 100px var(--color-primary-light-3) inset !important; - border-color: var(--color-primary-light-3) !important; - } - } - - .ui.ui.ui.button:not(.inverted, .basic), - .ui.ui.ui.label:not(.inverted, .basic) { - &.primary, - &.green, - &.red, - &.teal { - color: $lvl1; - &:hover { - color: $lvl3; - } - } - } - - .ui.success.message, .ui.attached.success.message, .ui.positive.message, .ui.attached.positive.message { - background: var(--color-success-bg); - color: var(--color-success-text); - border-color: var(--color-success-border); - } - - .ui.grey.labels .label, .ui.ui.ui.grey.label { - background-color: color.get('primary/base'); - border-color: color.get('primary/base'); - color: $lvl1; - font-weight: 900; - } - - .ui.label, .ui.menu .item>.label { - background: var(--color-label-bg); - color: var(--color-label-text); - } - - .ui.basic.modal { - background-color: $lvl3; - } - - .ui.error.message .header, .ui.negative.message .header, .ui.red.message .header { - color: var(--color-error-text); - } - - // modal text color for the "Remove GPG Key" modal - .ui.basic.modal, - .ui.basic.modal > .header, - .ui.inverted.button { - color: color.get('text') !important; - } - - ::selection { - background: rgba(#{color.get('theme/rosewater/base', 'rgb')}, 0.3) !important; - } - - body { - font-size: var.get('base-font-size'); - } - - footer { - justify-content: flex-end !important; - - .right-links { - justify-content: space-around !important; - } - - .right-links>a { - border-left: none !important; - padding-left: 0px !important; - margin-left: 0px !important; - } - - .ui.dropdown .menu { - left: -50% !important; - margin-bottom: 16px !important; - } - } - - .label.isSigned { - margin: 0px .25em !important; - padding: 0 !important; - display: inline-flex !important; - gap: 0px !important; - border-radius: 16px !important; - - --color-light-border: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important; - --color-label-bg: none !important; - --color-text: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important; - --color-green-badge-bg: none !important; - --color-green-badge-hover-bg: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 0.05) !important; - --color-label-hover-bg: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 0.05) !important; - --color-label-text: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important; - --color-green-badge: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important; - - .shortsha { - padding: 4px 6px 4px 12px !important; - } - - .ui.detail.icon.button { - opacity: 1 !important; - padding: 4px 8px 4px 6px !important; - margin: 0 !important; - background: none !important; - border-color: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important; - } - - &.isVerified { - .ui.detail.icon.button { - padding: 4px 12px 4px 6px !important; - } - } - } - - #commits-table { - --color-light: transparent !important; - } - - .flex-list { - .flex-item { - .flex-item-main { - gap: var.get('measure/.25x'); - - .flex-item-header { - .flex-item-title { - gap: var.get('measure/.5x'); - } - } - - .flex-item-body:not(:last-child) { - margin-bottom: var.get('measure/1x'); - } - } - } - } - - @include chroma.make-chroma-styles; - @include codemirror.make-code-mirror-styles; - @include monaco.make-monaco-styles($is-dark: true); - @include custom.apply-custom-styles; + @include vars.base; + @include vars.colors($is-dark); + + // components + @include components.label-default; // label for GPG signed commits + @include components.label-signed; // label for GPG signed commits + @include components.editor; // github-style (kinda) markdown editor in comments, issues, etc. + @include components.forms; // github-style dropdown menus + @include components.file-content; // github-style file content + @include components.avatar; // github-style avatars + @include components.gitea-button; // github-style buttons + @include components.segment; + @include components.comments; // github-style comment boxes + @include components.markup; // styling rendered for markdown content + + // code highlighting + @include modules.chroma($is-dark); // syntax highlighting + @include modules.codemirror; // code editor + @include modules.monaco; // vscode-like code editor + @include modules.settings; // settings & profile pages + + // 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 index c22cf7d..e92b580 100644 --- a/src/themes/scss/theme/modules/_chroma.scss +++ b/src/themes/scss/theme/modules/_chroma.scss @@ -1,304 +1,100 @@ @use '@lucas-labs/lui-micro/color' as color; @use '@lucas-labs/lui-micro/var' as var; +@mixin chroma($dark: false) { + $orange: if($dark, 'palette/orange/base', 'palette/orange/dark/15%'); + $blue: if($dark, 'palette/blue/base', 'palette/blue/dark/15%'); + $fg: 'text'; + $subtle: 'subtle'; + $more-subtle: if($dark, 'elevation/8', 'elevation/8'); + $brown: if($dark, 'palette/brown/base', 'palette/brown/dark/15%'); + $red: if($dark, 'palette/red/base', 'palette/red/dark/15%'); + $green: if($dark, 'palette/green/base', 'palette/green/dark/10%'); + $teal: if($dark, 'palette/teal/base', 'palette/teal/dark/15%'); + $purple: if($dark, 'palette/purple/base', 'palette/purple/dark/10%'); + $yellow: if($dark, 'palette/yellow/base', 'palette/yellow/dark/25%'); + $violet: if($dark, 'palette/violet/base', 'palette/violet/dark/50%'); + $pink: if($dark, 'palette/pink/base', 'palette/pink/dark/25%'); + $blwh: if($dark, 'palette/white/base', 'palette/black/base'); -@mixin make-chroma-styles { - .chroma .code-inner{ - font: 14px var.get('code-font-family'); - } + .chroma { + .code-inner { + font: 14px var.get('code-font-family'); + } - /* NameBuiltinPseudo */ - .chroma .bp { - color: color.get('theme/peach/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('theme/blue/base'); - } - /* CommentPreprocFile */ - .chroma .cpf { - color: color.get('theme/blue/base'); - } - /* CommentSpecial */ - .chroma .cs { - color: color.get('elevated/7'); - } - /* LiteralStringDelimiter */ - .chroma .dl { - color: color.get('theme/blue/base'); - } - /* NameFunctionMagic */ - .chroma .fm { - } - /* Generic */ - .chroma .g { - } - /* GenericDeleted */ - .chroma .gd { - color: color.get('theme'); - background-color: rgba(#{color.get('theme/red/base', 'rgb')}, 0.15); - } - /* GenericEmph */ - .chroma .ge { - font-style: italic; - } - /* GenericHeading */ - .chroma .gh { - color: color.get('theme/sky/base'); - } - /* GenericInserted */ - .chroma .gi { - color: color.get('theme'); - background-color: rgba(#{color.get('theme/green/base', 'rgb')}, 0.15); - } - /* GenericUnderline */ - .chroma .gl { - } - /* GenericOutput */ - .chroma .go { - color: color.get('theme/peach/base'); - } - /* GenericPrompt */ - .chroma .gp { - color: color.get('elevated/7'); - font-weight: bold; - } - /* GenericError */ - .chroma .gr { - color: color.get('theme/maroon/base'); - } - /* GenericStrong */ - .chroma .gs { - font-weight: bold; - } - /* GenericTraceback */ - .chroma .gt { - color: color.get('theme/maroon/base'); - } - /* GenericSubheading */ - .chroma .gu { - color: color.get('theme/sky/base'); - } - /* LiteralNumberIntegerLong */ - .chroma .il { - color: color.get('theme/peach/base'); - } - /* Keyword */ - .chroma .k { - color: color.get('theme/mauve/base'); - } - /* KeywordConstant */ - .chroma .kc { - color: color.get('theme/yellow/base'); - } - /* KeywordDeclaration */ - .chroma .kd { - color: color.get('theme/mauve/base'); - } - /* KeywordNamespace */ - .chroma .kn { - color: color.get('theme/yellow/base'); - } - /* KeywordPseudo */ - .chroma .kp { - color: color.get('theme/mauve/base'); - font-weight: bold; - } - /* KeywordReserved */ - .chroma .kr { - color: color.get('theme/mauve/base'); - } - /* KeywordType */ - .chroma .kt { - color: color.get('theme/yellow/base'); - } - /* Literal */ - .chroma .l { - } - /* LiteralDate */ - .chroma .ld { - } - /* LiteralNumber */ - .chroma .m { - color: color.get('theme/peach/base'); - } - /* LiteralNumberBin */ - .chroma .mb { - color: color.get('theme/peach/base'); - } - /* LiteralNumberFloat */ - .chroma .mf { - color: color.get('theme/peach/base'); - } - /* LiteralNumberHex */ - .chroma .mh { - color: color.get('theme/peach/base'); - } - /* LiteralNumberInteger */ - .chroma .mi { - color: color.get('theme/peach/base'); - } - /* LiteralNumberOct */ - .chroma .mo { - color: color.get('theme/peach/base'); - } - /* Name */ - .chroma .n { - color: color.get('theme/lavender/base'); - } - /* NameAttribute */ - .chroma .na { - color: color.get('theme/yellow/base'); - } - /* NameBuiltin */ - .chroma .nb { - color: color.get('theme/peach/base'); - } - /* NameClass */ - .chroma .nc { - color: color.get('theme/yellow/base'); - } - /* NameDecorator */ - .chroma .nd { - color: color.get('theme/pink/base'); - } - /* NameException */ - .chroma .ne { - color: color.get('theme/maroon/base'); - } - /* NameFunction */ - .chroma .nf { - color: color.get('theme/blue/base'); - } - /* NameEntity */ - .chroma .ni { - color: color.get('theme/pink/base'); - } - /* NameLabel */ - .chroma .nl { - color: color.get('theme/yellow/base'); - } - /* NameNamespace */ - .chroma .nn { - color: color.get('theme/yellow/base'); - } - /* NameConstant */ - .chroma .no { - color: color.get('theme/yellow/base'); - } - /* NameTag */ - .chroma .nt { - color: color.get('theme/mauve/base'); - } - /* NameVariable */ - .chroma .nv { - color: color.get('theme/peach/base'); - } - /* NameOther */ - .chroma .nx { - color: color.get('theme/peach/base'); - } - /* Operator */ - .chroma .o { - color: color.get('theme/sky/base'); - } - /* OperatorWord */ - .chroma .ow { - color: color.get('theme/sky/base'); - font-weight: bold; - } - /* Punctuation */ - .chroma .p { - color: color.get('elevated/9'); - } - /* NameProperty */ - .chroma .py { - } - /* LiteralString */ - .chroma .s { - color: color.get('theme/green/base'); - } - /* LiteralStringSingle */ - .chroma .s1 { - color: color.get('theme/green/base'); - } - /* LiteralStringDouble */ - .chroma .s2 { - color: color.get('theme/green/base'); - } - /* LiteralStringAffix */ - .chroma .sa { - color: color.get('theme/green/base'); - } - /* LiteralStringBacktick */ - .chroma .sb { - color: color.get('theme/green/base'); - } - /* LiteralStringChar */ - .chroma .sc { - color: color.get('theme/green/base'); - } - /* LiteralStringDoc */ - .chroma .sd { - color: color.get('theme/green/base'); - } - /* LiteralStringEscape */ - .chroma .se { - color: color.get('theme/blue/base'); - } - /* LiteralStringHeredoc */ - .chroma .sh { - color: color.get('theme/green/base'); - } - /* LiteralStringInterpol */ - .chroma .si { - color: color.get('theme/green/base'); - } - /* LiteralStringRegex */ - .chroma .sr { - color: color.get('theme/blue/base'); - } - /* LiteralStringSymbol */ - .chroma .ss { - color: color.get('theme/green/base'); - } - /* LiteralStringOther */ - .chroma .sx { - color: color.get('theme/green/base'); - } - /* NameVariableClass */ - .chroma .vc { - color: color.get('theme/yellow/base'); - } - /* NameVariableGlobal */ - .chroma .vg { - color: color.get('theme/peach/base'); - } - /* NameVariableInstance */ - .chroma .vi { - color: color.get('theme/yellow/base'); - } - /* NameVariableMagic */ - .chroma .vm { - } - /* TextWhitespace */ - .chroma .w { - color: color.get('elevated/4'); - } -} + .bp { color: color.get($orange); font-weight: 600;} // NameBuiltinPseudo + .c { color: color.get($subtle); font-style: italic; } // Comment + .c1 { color: color.get($subtle); font-style: italic; } // CommentSingle + .ch { color: color.get($subtle); font-style: italic; } // CommentHashbang + .cm { color: color.get($subtle); font-style: italic; } // CommentMultiline + .cp { color: color.get($blue); } // CommentPreproc + .cpf { color: color.get($blue); } // CommentPreprocFile + .cs { color: color.get($subtle); } // CommentSpecial + .dl { color: color.get($blue); } // LiteralStringDelimiter + .fm {} // NameFunctionMagic + .g {} // Generic + .gd { color: color.get($blwh); background-color: rgba(#{color.get($red, 'rgb')}, .25); } // GenericDeleted + .ge { font-style: italic; } // GenericEmph + .gh { color: color.get($teal); } // GenericHeading + .gi { color: color.get($blwh); background-color: rgba(#{color.get($green, 'rgb')}, 0.3); } // GenericInserted + .gl {} // GenericUnderline + .go { color: color.get($orange); } // GenericOutput + .gp { color: color.get($subtle); font-weight: bold; } // GenericPrompt + .gr { color: color.get($brown); } // GenericError + .gs { font-weight: bold; } // GenericStrong + .gt { color: color.get($brown); } // GenericTraceback + .gu { color: color.get($teal); } // GenericSubheading + .il { color: color.get($orange); } // LiteralNumberIntegerLong + .k { color: color.get($purple); font-weight: 600; } // Keyword + .kc { color: color.get($yellow); } // KeywordConstant + .kd { color: color.get($purple); font-weight: 600; } // KeywordDeclaration + .kn { color: color.get($yellow); } // KeywordNamespace + .kp { color: color.get($purple); font-weight: 600; } // KeywordPseudo + .kr { color: color.get($purple); font-weight: 600;} // KeywordReserved + .kt { color: color.get($yellow); } // KeywordType + .l {} // Literal + .ld {} // LiteralDate + .m { color: color.get($orange); } // LiteralNumber + .mb { color: color.get($orange); } // LiteralNumberBin + .mf { color: color.get($orange); } // LiteralNumberFloat + .mh { color: color.get($orange); } // LiteralNumberHex + .mi { color: color.get($orange); } // LiteralNumberInteger + .mo { color: color.get($orange); } // LiteralNumberOct + .n { color: color.get($violet); } // Name + .na { color: color.get($yellow); } // NameAttribute + .nb { color: color.get($orange); font-weight: 600; } // NameBuiltin + .nc { color: color.get($pink); } // NameClass + .nd { color: color.get($pink); } // NameDecorator + .ne { color: color.get($brown); } // NameException + .nf { color: color.get($blue); } // NameFunction + .ni { color: color.get($pink); } // NameEntity + .nl { color: color.get($yellow); } // NameLabel + .nn { color: color.get($yellow); } // NameNamespace + .no { color: color.get($yellow); } // NameConstant + .nt { color: color.get($purple); } // NameTag + .nv { color: color.get($orange); } // NameVariable + .nx { color: color.get($orange); } // NameOther + .o { color: color.get($teal); } // Operator + .ow { color: color.get($teal); font-weight: bold; } // OperatorWord + .p { color: color.get($subtle); } // Punctuation + .py {} // NameProperty + .s { color: color.get($green); } // LiteralString + .s1 { color: color.get($green); } // LiteralStringSingle + .s2 { color: color.get($green); } // LiteralStringDouble + .sa { color: color.get($green); } // LiteralStringAffix + .sb { color: color.get($green); } // LiteralStringBacktick + .sc { color: color.get($green); } // LiteralStringChar + .sd { color: color.get($green); } // LiteralStringDoc + .se { color: color.get($blue); } // LiteralStringEscape + .sh { color: color.get($green); } // LiteralStringHeredoc + .si { color: color.get($green); } // LiteralStringInterpol + .sr { color: color.get($blue); } // LiteralStringRegex + .ss { color: color.get($green); } // LiteralStringSymbol + .sx { color: color.get($green); } // LiteralStringOther + .vc { color: color.get($yellow); } // NameVariableClass + .vg { color: color.get($orange); } // NameVariableGlobal + .vi { color: color.get($yellow); } // NameVariableInstance + .vm {} // NameVariableMagic + .w { color: color.get($more-subtle); } // TextWhitespace + } +} \ No newline at end of file diff --git a/src/themes/scss/theme/modules/_codemirror.scss b/src/themes/scss/theme/modules/_codemirror.scss index ae47773..e1ae601 100644 --- a/src/themes/scss/theme/modules/_codemirror.scss +++ b/src/themes/scss/theme/modules/_codemirror.scss @@ -1,6 +1,6 @@ @use '@lucas-labs/lui-micro/color' as color; -@mixin make-code-mirror-styles { +@mixin codemirror { .CodeMirror, .CodeMirror.cm-s-default, .CodeMirror.cm-s-paper { @@ -13,19 +13,19 @@ } .cm-quote { - color: color.get('theme/green/base') + color: color.get('palette/green/base') } .cm-keyword { - color: color.get('theme/mauve/base'); + color: color.get('palette/purple/base'); } .cm-atom { - color: color.get('theme/red/base'); + color: color.get('palette/red/base'); } .cm-number { - color: color.get('theme/peach/base'); + color: color.get('palette/orange/base'); } .cm-def { @@ -33,11 +33,11 @@ } .cm-variable-2 { - color: color.get('theme/sky/base'); + color: color.get('palette/blue/base'); } .cm-variable-3 { - color: color.get('theme/teal/base'); + color: color.get('palette/teal/base'); } .cm-comment { @@ -45,23 +45,23 @@ } .cm-string { - color: color.get('theme/green') + color: color.get('palette/green/base') } .cm-string-2 { - color: color.get('theme/green') + color: color.get('palette/green/base') } .cm-meta { - color: color.get('theme/peach/base'); + color: color.get('palette/orange/base'); } .cm-qualifier { - color: color.get('theme/peach/base'); + color: color.get('palette/orange/base'); } .cm-builtin { - color: color.get('theme/peach/base'); + color: color.get('palette/orange/base'); } .cm-bracket { @@ -69,11 +69,11 @@ } .cm-tag { - color: color.get('theme/yellow/base'); + color: color.get('palette/yellow/base'); } .cm-attribute { - color: color.get('theme/yellow/base'); + color: color.get('palette/yellow/base'); } .cm-hr { @@ -81,15 +81,15 @@ } .cm-url { - color: color.get('theme/blue/base'); + color: color.get('palette/blue/base'); } .cm-link { - color: color.get('theme/blue/base'); + color: color.get('palette/blue/base'); } .cm-error { - color: color.get('theme/red/base'); + color: color.get('palette/red/base'); } } } diff --git a/src/themes/scss/theme/modules/_monaco.scss b/src/themes/scss/theme/modules/_monaco.scss index 8354839..7316de8 100644 --- a/src/themes/scss/theme/modules/_monaco.scss +++ b/src/themes/scss/theme/modules/_monaco.scss @@ -1,6 +1,6 @@ @use '@lucas-labs/lui-micro/color' as color; -@mixin make-monaco-styles($is-dark: true) { +@mixin monaco { $surface0: #{color.get('elevation/4')}; $subtext0: #{color.get('elevation/10')}; $overlay2: #{color.get('elevation/9')}; @@ -8,12 +8,12 @@ $base: #{color.get('elevation/3')}; $accent: #{color.get('primary/base')}; $text: #{color.get('text')}; - $mauve: #{color.get('theme/sapphire/base')}; - $peach: #{color.get('theme/peach/base')}; - $teal: #{color.get('theme/teal/base')}; - $green: #{color.get('theme/green/base')}; - $blue: #{color.get('theme/blue/base')}; - $pink: #{color.get('theme/pink/base')}; + $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; diff --git a/src/themes/scss/theme/modules/custom/_home.scss b/src/themes/scss/theme/modules/custom/_home.scss deleted file mode 100644 index 33a596e..0000000 --- a/src/themes/scss/theme/modules/custom/_home.scss +++ /dev/null @@ -1,14 +0,0 @@ -@use '@lucas-labs/lui-micro/var' as var; -@use '@lucas-labs/lui-micro/color' as color; - -@mixin apply-styles { - .page-content.home { - div.center { - img { - // background-color: color.get('primary/base'); - // border-radius: var.get('measure/4x'); - // padding: var.get('measure/1.25x'); - } - } - } -} diff --git a/src/themes/scss/theme/modules/custom/_issue-content.scss b/src/themes/scss/theme/modules/custom/_issue-content.scss deleted file mode 100644 index f0cc4d6..0000000 --- a/src/themes/scss/theme/modules/custom/_issue-content.scss +++ /dev/null @@ -1,16 +0,0 @@ -@mixin apply-styles { - .issue-content { - img { - max-width: 100%; - } - } - - .issue-content, .issue-list { - .labels-list { - .label { - - } - } - } - -} \ No newline at end of file diff --git a/src/themes/scss/theme/modules/custom/_markup.scss b/src/themes/scss/theme/modules/custom/_markup.scss deleted file mode 100644 index 90637c9..0000000 --- a/src/themes/scss/theme/modules/custom/_markup.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use '@lucas-labs/lui-micro/color' as color; - -@mixin apply-styles() { - .markup { - table { - width: fit-content; - } - } -} \ No newline at end of file diff --git a/src/themes/scss/theme/modules/custom/_project.scss b/src/themes/scss/theme/modules/custom/_project.scss deleted file mode 100644 index 2ba9fc5..0000000 --- a/src/themes/scss/theme/modules/custom/_project.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use '@lucas-labs/lui-micro/var' as var; -@use '@lucas-labs/lui-micro/color' as color; - -@mixin apply-styles { - #project-board { - .project-column-header { - .project-column-title { - .circular.label { - display: flex; - padding: 0 !important; - align-items: center; - justify-content: center; - line-height: 16px; - padding: 0 var.get('measure/.25x') !important; - } - } - } - } -} diff --git a/src/themes/scss/theme/modules/custom/_repo-header.scss b/src/themes/scss/theme/modules/custom/_repo-header.scss deleted file mode 100644 index 8ba5d10..0000000 --- a/src/themes/scss/theme/modules/custom/_repo-header.scss +++ /dev/null @@ -1,69 +0,0 @@ -@use '@lucas-labs/lui-micro/var' as var; -@use '@lucas-labs/lui-micro/color' as color; - -@mixin apply-styles { - .secondary-nav { - display: flex; - flex-direction: column; - margin-bottom: var.get('measure/1x'); - - .ui.container { - margin: 0 0 0 0 !important; - max-width: unset !important; - width: 100% !important; - padding: 0 var.get('measure/1x'); - } - - .repo-header { - margin: 0 0 var.get('measure/1x') 0; - } - - .ui.tabs.divider { - margin-bottom: 0; - } - - overflow-menu { - .item { - --item-margin-bottom: #{var.get('measure/.5x')} !important; - margin: 0 var.get('measure/.5x') var(--item-margin-bottom) !important; - border-radius: var.get('measure/.25x') !important; - padding: var.get('measure/.5x') var.get('measure/.5x') !important; - color: var(--color-text) !important; - border: none !important; - position: relative; // Make the parent element positioned - - svg { - color: var(--color-text-light-3) !important; - margin-right: var.get('measure/.5x') !important; - } - - &:hover { - background-color: color.get('elevation/4') !important; - } - - &.active { - background-color: transparent !important; - color: var(--color-text) !important; - border-radius: 0 !important; - // font-weight: normal !important; - border-bottom: calc(var(--item-margin-bottom) - 1px) solid var(--color-secondary-nav-bg) !important; - margin-bottom: 1px !important; - box-shadow: 0px 2px 0px 0px color.get('primary/base') !important; - } - - .small.label { - background-color: color.get('elevation/7'); - border: 1px solid color.get('elevation/7'); - border-radius: var.get('measure/2x'); - color: var(--color-text); - font-weight: var(--base-text-weight-medium, 500); - min-width: calc(var.get('measure/1.25x') + 6px); - padding: 6px; - text-align: center; - align-items: center; - justify-content: center; - } - } - } - } -} diff --git a/src/themes/scss/theme/modules/custom/index.scss b/src/themes/scss/theme/modules/custom/index.scss deleted file mode 100644 index f4820a5..0000000 --- a/src/themes/scss/theme/modules/custom/index.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use './repo-header'; -@use './repo'; -@use './project'; -@use './home'; -@use './markup'; -@use './issue-content'; - -@mixin apply-custom-styles { - @include repo-header.apply-styles(); - @include repo.apply-styles(); - @include project.apply-styles(); - @include home.apply-styles(); - @include markup.apply-styles(); - @include issue-content.apply-styles(); -} \ No newline at end of file diff --git a/src/themes/scss/theme/modules/custom/repo/_file-list.scss b/src/themes/scss/theme/modules/custom/repo/_file-list.scss deleted file mode 100644 index 25b602e..0000000 --- a/src/themes/scss/theme/modules/custom/repo/_file-list.scss +++ /dev/null @@ -1,207 +0,0 @@ -@use '@lucas-labs/lui-micro/var' as var; -@use '@lucas-labs/lui-micro/color' as color; - -@mixin apply-styles { - - #repo-topics, #topic_edit, .label-list { - row-gap: var.get('measure/.5x'); - margin-top: 0 !important; - - .label:not(.basic) { - font-size: var.get('small-font-size') !important; - background-color: rgba(#{color.get('theme/blue/base', 'rgb')}, 0.1); - color: color.get('primary/base'); - border-radius: var.get('measure/2x'); - line-height: 14px; - transition: background-color 0.2s ease; - - &:hover { - background-color: rgba(#{color.get('theme/blue/base', 'rgb')}, 0.3) !important; - color: color.get('primary/base') !important; - } - } - - } - - .ui.table>tr>td, .ui.table>tbody>tr>td { - border-top-color: rgba(#{color.get('theme/blue/base', 'rgb')}, 0.04); - } - - .page-content.repository.file.list > .ui.container.lugit-repo-list-view { - display: flex; - flex-direction: row-reverse; - column-gap: 24px; - - @media (max-width: 1100px) { - width: 100%; - min-width: 100%; - margin: 0; - padding: 0 var.get('measure/2x'); - - .lugit-repo-header-data { - min-width: calc(#{var.get('repo-home/sidebar-width')} * 0.87) !important; - max-width: calc(#{var.get('repo-home/sidebar-width')} * 0.87) !important; - width: calc(#{var.get('repo-home/sidebar-width')} * 0.87) !important; - } - - .repo-button-row { - .gt-gap-y-3 { - column-gap: var.get('measure/.5x'); - - #new-pull-request { - display: none; - } - - [role=menu] { - display: none; - } - } - - #clone-panel { - #repo-clone-url { - display: none; - } - } - } - } - - @media (max-width: 1280px) { - flex-direction: column; - column-gap: 0; - row-gap: 24px; - - .lugit-repo-header-data { - min-width: 100%!important; - max-width: 100%!important; - width: 100%!important; - } - - #repo-topics { - display: none !important; - } - - #repo-desc { - display: flex; - flex-direction: column; - font-size: 1em; - row-gap: var.get('measure/1x'); - - h5 { - display: none; - } - - span { - font-size: 1.2em !important; - font-style: italic !important; - color: var(--color-text-light-3); - } - - a { - font-size: 1.1em; - } - } - - } - - .repo-button-row { - .gt-gap-y-3 { - column-gap: var.get('measure/.5x'); - } - - #clone-panel { - #repo-clone-url { - width: unset; - } - } - } - - .lugit-repo-header-data { - min-width: var.get('repo-home/sidebar-width'); - max-width: var.get('repo-home/sidebar-width'); - width: var.get('repo-home/sidebar-width'); - - #repo-desc { - display: flex; - flex-direction: column; - font-size: 1em; - row-gap: var.get('measure/1x'); - - * { - margin: 0; - } - - h5 { - font-size: 1.1em; - } - - span { - font-size: 1.1em; - } - - a { - font-size: 1.1em; - } - } - } - - .lugit-repo-content { - display: flex; - flex-direction: column; - row-gap: var.get('measure/1x'); - flex: 1; - } - - #repo-files-table { - .commit-list { - .latest-commit { - gap: var.get('measure/.5x'); - } - - .isSigned, .isVerified { - padding: 0 !important; - border: none !important; - .shortsha { - display: none; - } - - .detail { - border-left: none !important; - padding: 0 !important; - margin: 0 !important; - - div { - display: block; - padding: 0 !important; - margin: 0 !important; - - svg { - margin: 0 !important; - } - } - } - - .avatar { - display: none; - } - } - - .commit-summary { - color: var(--color-text-light-2) !important - } - } - } - - #topic_edit { - flex-direction: column; - row-gap: var.get('measure/1x'); - - .field.gt-f1.gt-mr-3 { - margin: 0px !important; - } - } - - #repo-topics { - margin-top: var.get('measure/1x') !important; - } - } -} diff --git a/src/themes/scss/theme/modules/custom/repo/index.scss b/src/themes/scss/theme/modules/custom/repo/index.scss deleted file mode 100644 index 23a5720..0000000 --- a/src/themes/scss/theme/modules/custom/repo/index.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use './file-list'; - -@mixin apply-styles { - @include file-list.apply-styles(); -} \ No newline at end of file diff --git a/src/themes/scss/theme/modules/index.scss b/src/themes/scss/theme/modules/index.scss new file mode 100644 index 0000000..37593a0 --- /dev/null +++ b/src/themes/scss/theme/modules/index.scss @@ -0,0 +1,6 @@ +@forward './repo'; +@forward './issues'; +@forward './chroma'; +@forward './codemirror'; +@forward './monaco'; +@forward './settings'; \ No newline at end of file diff --git a/src/themes/scss/theme/modules/issues/_issue-sidebar.scss b/src/themes/scss/theme/modules/issues/_issue-sidebar.scss new file mode 100644 index 0000000..17c8a4a --- /dev/null +++ b/src/themes/scss/theme/modules/issues/_issue-sidebar.scss @@ -0,0 +1,294 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; +@use '../../components/button' as button; + +@mixin sidebar { + --spc: #{var.get('measure/1x')}; // var(--spc) 16px + --spc-7_8: calc(var(--spc) * .875); // 7/8 of the base var(--spc-7_8) 14px + --spc-6_8: calc(var(--spc) * .750); // 6/8 = 3/4 of the base var(--spc-6_8) 12px + --spc-4_8: calc(var(--spc) * .500); // 4/8 = 1/2 of the base var(--spc-4_8) 8px + --spc-3_8: calc(var(--spc) * .375); // 3/8 of the base var(--spc-3_8) 6px + --spc-2_8: calc(var(--spc) * .250); // 2/8 = 1/4 of the base var(--spc-2_8) 4px + + display: flex; + flex-direction: column; + border: none !important; + color: var(--color-text-light-2) !important; + padding: 0 !important; + + // reset padding and margin for all children + >*, .issue-sidebar-combo>*, >text+*, >.ui>* { + margin: unset !important; + padding: unset !important; + font-size: var.get('font-size/sm') !important; + } + + // alignment for main children elements + >.ui, >.text, >.ui { + padding-left: var(--spc-4_8) !important; + padding-right: 0 !important; + } + + .ui.ui.ui.compact.grid>.column:not(.row), .ui.ui.ui.compact.grid>.row>.column { + padding-left: unset; + padding-right: unset; + } + + // reset for all actionable elements + button, input, .dropdown, .ui.grid>.row>[class*="two wide"].column, .ui.grid>.column.row>[class*="two wide"].column, .ui.grid>[class*="two wide"].column, .ui.column.grid>[class*="two wide"].column { + padding: 0 !important; + margin: 0 !important; + min-height: 0 !important; + min-width: 0 !important; + } + + // -------------------------------------------------------------- // + // ---------------------- Elements Styling ---------------------- // + // -------------------------------------------------------------- // + + a:hover { + text-decoration: none !important; + } + + // dividers + >.divider { + width: calc(100% - var(--spc-4_8)) !important; + align-self: flex-end; + margin: var(--spc-7_8) 0 !important; + } + + + // select branch dropdown + .select-branch { + align-self: flex-end; + + .branch-dropdown-button { + @include button.hollow; + } + + +.divider { + border: none !important; + margin: var(--spc-4_8) 0 !important; + } + + .menu { + --color-menu: #{color.get('elevation/3')}; + + .branch-tag-item.active, .reference-list-menu, .reference-list-menu .item { + --color-menu: #{color.get('elevation/4')} !important; + } + + .branch-tag-item { + --border-radius: #{var(--spc-4_8)}; + + &:hover { + color: currentColor !important; + } + } + } + } + + .issue-sidebar-combo { + display: flex; + flex-direction: column; + gap: var(--spc-4_8) !important; + + > * { + padding-left: var(--spc-4_8) !important; + padding-right: var(--spc-4_8) !important; + } + + .ui.dropdown { + padding-top: var(--spc-3_8) !important; + padding-bottom: var(--spc-3_8) !important; + font-size: var.get('font-size/sm'); + transition: background-color .1s ease; + border-radius: var(--border-radius) !important; + + >a { + flex: 1; + display: flex; + justify-content: space-between; + + &:hover { + color: currentColor !important; + text-decoration: none !important; + } + } + + &:hover { + background-color: rgba(#{color.get('elevation/6', 'rgb')}, .5); + } + } + } + + // direct text children + >.text { + // background-color: orange !important; + flex: 1; + display: flex !important; + justify-content: space-between; + font-weight: 500 !important; + margin-bottom: var(--spc-6_8) !important; + + strong { + font-weight: 500 !important; + } + } + + .watching { + display: flex; + flex-direction: column; + gap: var(--spc-6_8) !important; + + button { + font-weight: 500; + padding: var(--spc-4_8) var(--spc-6_8) !important; + border-radius: var(--border-radius) !important; + + svg { + color: color.get('subtle') !important; + } + } + } + + .depending { + // title + >.text { + display: inline-block; + margin-bottom: var(--spc-6_8) !important; + } + + >p { + margin-bottom: var(--spc-4_8) !important; + } + + .divided.list { + display: flex; + flex-direction: column; + gap: var(--spc) !important; + + .dependency { + border: none !important; + + .item-left { + a { // issue + + } + + div.text { // repo + font-size: var.get('font-size/xs') !important; + } + } + + // if not the first dependency in the list, we add a :before element to serve as divider + &:not(:first-child) { + position: relative; + &:before { + content: ''; + display: block; + position: absolute; + top: -8px; + left: 0; + height: 1px; + width: 100%; + background-color: color.get('elevation/4'); + } + } + } + } + + #new-dependency-drop-list { + padding: var(--spc-3_8) var(--spc-6_8) !important; + // make radius to the right be 0 to merge with the add button + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + + &.active { + // restore right border to 1px when active + border-top-left-radius: var(--border-radius) !important; + border-bottom-left-radius: var(--border-radius) !important; + border-color: color.get('elevation/5') !important; + outline: 2px solid var(--color-accent); + } + + input { + padding: var(--spc-3_8) var(--spc-6_8) !important; + line-height: 20px !important; + } + } + + button { + padding: var(--spc-4_8) !important; + } + } + + // reference + div.ui.equal.width.compact.grid { + button { + @include button.hollow; + display: flex; + color: color.get('subtle') !important; + width: unset !important; + } + } + + // issue due date form + .issue-due-form { + * { + color: color.get('subtle') !important; + } + + // input of type date + input[type="date"] { + padding: var(--spc-4_8) var(--spc-6_8) !important; + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + } + + button { + padding: var(--spc-4_8) !important; + border-top-right-radius: var(--border-radius) !important; + border-bottom-right-radius: var(--border-radius) !important; + } + } + + // direct form child + >form, .form { + display: flex; + flex-direction: column; + gap: var(--spc-4_8) !important; + } + + // buttons at the end of the sidebar + >form button, >button { + font-size: var.get('font-size/sm') !important; + border: none !important; + background: transparent !important; + padding: var(--spc-3_8) var(--spc-4_8) !important; + justify-content: start !important; + gap: var(--spc-4_8) !important; + margin-bottom: var(--spc-2_8) !important; + border-radius: var(--border-radius) !important; + + svg { + color: color.get('subtle') !important; + } + + &:hover { + background: color.get('elevation/4') !important; + } + + // if the data-modal attr is #sidebar-delete-issue, make the color red + &[data-modal="#sidebar-delete-issue"] { + color: color.get('palette/red/base') !important; + svg { + color: color.get('palette/red/base') !important; + } + + &:hover { + background: rgba(#{color.get('palette/red/dark/15%', 'rgb')}, 0.1) !important; + } + } + } +} \ No newline at end of file diff --git a/src/themes/scss/theme/modules/issues/_issue.scss b/src/themes/scss/theme/modules/issues/_issue.scss new file mode 100644 index 0000000..cefe9e9 --- /dev/null +++ b/src/themes/scss/theme/modules/issues/_issue.scss @@ -0,0 +1,258 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; +@use '../../components/button' as button; +@use './issue-sidebar'; + +@mixin apply-styles { + .issue-content-right { + @include issue-sidebar.sidebar; + } + + .issue-title-header { + margin-bottom: var.get('measure/1.5x'); + padding-bottom: var.get('measure/.75x'); + border-bottom: 1px solid color.get('elevation/5'); + + .issue-title { + .index { + font-weight: 300; + } + } + + .issue-title-meta { + color: color.get('subtle'); + } + + &:has(+ .ui.pull.tabs) { // if the next sibling is a tab (e.g. pull request tab selector) + margin-bottom: var.get('measure/1x'); + padding-bottom: var.get('measure/.5x'); + border-bottom: none; + } + } + + .issue-content { + column-gap: var.get('measure/1.5x'); + } + + .issue-content-left { + .timeline-avatar img { + border-radius: 50% !important; + } + } + + .timeline-item { + &.event { + .badge { + // and not contains a tw-bg-* class + &:not([class*="tw-bg-"]) { + color: var(--color-timeline-badge-fg) !important; + } + + &.tw-bg-green.tw-text-white { + color: var(--color-green-contrast) !important; + } + + &.tw-bg-red.tw-text-white { + color: var(--color-red-contrast) !important; + } + } + + .ui.segments.conversation-holder { + margin-left: var.get('measure/.5x'); + border-radius: var(--border-radius); + } + } + + &.comment { + // comment form at the end + &.form:not(.issue-content) { + display: flex; + align-items: flex-start; + background-color: var(--color-body); + gap: var.get('measure/1x'); + left: -68px !important; + width: calc(100% + 68px - 16px) !important; + + @media (max-width: 768px) { + left: 0 !important; + margin-left: -16px !important; + width: auto !important; + } + + .timeline-avatar { + display: block; + position: relative !important; + left: unset !important; + flex: 0 0 auto !important; + } + + .content { + // fake title to mimic github new issue page + &:before { + display: block; + content: 'Add a comment'; + font-weight: 600; + margin-bottom: var.get('measure/1x'); + margin-top: var.get('measure/.5x'); + font-size: var.get('font-size/lg'); + } + + display: block; + position: relative !important; + margin-left: 0 !important; + flex: 1; + + .ui.segment { + padding: 0 !important; + border: none !important; + } + } + } + } + } + + .repository.view.issue { + --avatar-size: 24px; + + .comment-list .ui.comments { + background-color: transparent; + gap: var.get('measure/1x'); + position: relative; + } + + .comment-list { + .ui.comment-code-cloud.segment { + padding: 0 var.get('measure/.5x') var.get('measure/.5x') !important; + + .ui.comments { + gap: var.get('measure/.5x'); + + &:before { + display: block; + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: calc((var(--avatar-size) / 2) - 1px); + top: 16px; + width: 3px; + background-color: var(--color-timeline); + opacity: 50%; + } + + .comment.code-comment .content.comment-container{ + background-color: transparent !important; + + .header.comment-header { + .comment-header-left { + gap: var.get('measure/.5x'); + .avatar img { + z-index: 1 !important; + width: var(--avatar-size) !important; + height: var(--avatar-size) !important; + } + } + } + } + } + + .code-comment-buttons { + margin: 0!important; + } + + .comment-form { + margin-top: var.get('measure/1x'); + + .field.footer { + margin: 0 !important; + padding: 0 !important; + + button { + padding: var.get('measure/.5x') var.get('measure/1x') !important; + } + } + } + } + } + } + + .repository .ui.tabs.divider { + margin-bottom: var.get('measure/1x'); + } + + .repository .diff-detail-box { // diff page detail box + padding: var.get('measure/.5x') 0; + margin: calc(var.get('measure/1x') * -1) 0 0 0; + height: 60px; + } + + .repository #diff-container { + #diff-file-tree { + top: 60px; + .diff-file-tree-items { + margin: 0; + } + } + + column-gap: var.get('measure/1x'); + + .diff-file-body tr.tag-code:last-child td:first-child, .diff-file-body tr.tag-code:last-child td:first-child * { + border-bottom-left-radius: calc(var(--border-radius) - 2px); + } + + .diff-file-body tr.tag-code:last-child td:last-child, .diff-file-body tr.tag-code:last-child td:last-child * { + border-bottom-right-radius: var(--border-radius); + } + + .ui.attached.header.diff-file-header.sticky-2nd-row { + position: sticky; + top: 60px; + z-index: 7; + } + + .add-comment { + border-top: 1px solid var(--color-secondary); + border-bottom: 1px solid var(--color-secondary); + + .conversation-holder { + .comment-code-cloud { + padding: var.get('measure/.75x') !important; + form { + &:not(:first-child) { + margin-top: var.get('measure/.5x'); + } + + .field.footer { + margin: 0 !important; + padding: 0 !important; + + button { + padding: var.get('measure/.5x') var.get('measure/1x') !important; + } + } + } + } + } + } + } + + // new issue page + .page-content.repository.new.issue { + .issue-content-left { + .ui.comments .comment { + .ui.segment.content { + padding: 6px 0 0; + border: none; + + .field { + margin-bottom: var.get('measure/1x'); + } + + &:before, &:after { + display: none; + } + } + } + } + } +} diff --git a/src/themes/scss/theme/modules/issues/_list.scss b/src/themes/scss/theme/modules/issues/_list.scss new file mode 100644 index 0000000..781a097 --- /dev/null +++ b/src/themes/scss/theme/modules/issues/_list.scss @@ -0,0 +1,46 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; + +@mixin apply-styles { + .page-content.repository.issue-list, .page-content.dashboard.issues { + .secondary-nav { + margin-bottom: var.get('measure/1.5x'); + } + + #issue-filters { + margin: var.get('measure/2x') 0 var.get('measure/1x') 0; + gap: var.get('measure/3x'); + align-items: center; + } + + #issue-list { + .flex-item { + padding: var.get('measure/.75x') 0 var.get('measure/.75x') 0; + + &:first-child { + padding-top: 0; + } + + &:last-child { + padding-bottom: 0; + } + + .branch { + background-color: color.get('elevation/1'); + } + + .flex-item-icon { + svg { + &.green { + color: color.get('palette/green/base') !important; + } + } + } + } + } + + .list-header { + margin-bottom: var.get('measure/1.5x'); + } + } +} diff --git a/src/themes/scss/theme/modules/issues/index.scss b/src/themes/scss/theme/modules/issues/index.scss new file mode 100644 index 0000000..deb0855 --- /dev/null +++ b/src/themes/scss/theme/modules/issues/index.scss @@ -0,0 +1,7 @@ +@use './list'; +@use './issue'; + +@mixin issues { + @include list.apply-styles(); + @include issue.apply-styles(); +} \ No newline at end of file diff --git a/src/themes/scss/theme/modules/repo/_file-list.scss b/src/themes/scss/theme/modules/repo/_file-list.scss new file mode 100644 index 0000000..6e07737 --- /dev/null +++ b/src/themes/scss/theme/modules/repo/_file-list.scss @@ -0,0 +1,104 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; +@use '../../components/button' as button; + +@mixin apply-styles { + .repo-button-row-left { + gap: var.get('measure/.5x'); + + .button { + @include button.hollow; + } + + .breadcrumb.repo-path { + font-size: var.get('font-size/lg'); + padding: 0 0 0 var.get('measure/.5x'); + + .section { + &:first-of-type, &.active { + font-weight: 600; + } + } + + .breadcrumb-divider, button { + color: color.get('subtle') !important; + } + + button { + border-radius: var(--border-radius); + padding: var.get('measure/.375x'); + margin: 0 0 0 var.get('measure/.5x') !important; + + svg { + width: var.get('measure/1x'); + height: var.get('measure/1x'); + } + + &:hover { + background-color: var(--color-nav-hover-bg); + } + } + } + } + + .repo-home-filelist { + > div { + margin: 0 !important; + } + + display: flex; + flex-direction: column; + row-gap: var.get('measure/1x'); + + // file list table + #repo-files-table { + // header + .repo-file-last-commit { + padding: var.get('measure/.75x') var.get('measure/1x') !important; + + .commit-summary { + margin: 0; + } + + .latest-commit { + gap: var.get('measure/.5x'); + + img { + // make it a circle (avatar) + border-radius: 50%; + width: var.get('measure/1.25x'); + height: var.get('measure/1.25x'); + } + } + + .label { + // boton con icono y avatar + .detail.icon.button img { + display: none; + } + } + } + + // cells + .repo-file-cell { + padding: var.get('measure/.5x') var.get('measure/1x') !important; + + &.name { + display: flex; + flex-wrap: nowrap; + column-gap: var.get('measure/.5x'); + align-items: center; + } + } + } + + // readme + #readme { + + } + + .repository-summary .sub-menu .item { + height: 30px; + } + } +} diff --git a/src/themes/scss/theme/modules/repo/_home.scss b/src/themes/scss/theme/modules/repo/_home.scss new file mode 100644 index 0000000..01a8e8c --- /dev/null +++ b/src/themes/scss/theme/modules/repo/_home.scss @@ -0,0 +1,243 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; + +@mixin apply-styles { + // description, labels, info + .repo-home-sidebar-top { + @media (max-width: 768px) { + border-bottom: 1px solid color.get('elevation/6'); + margin-bottom: var.get('measure/1x'); + } + + form { + margin-top: 0 !important; + } + + #repo-topics, #topic_edit, .label-list { + row-gap: var.get('measure/.5x'); + margin-top: 0 !important; + + .label:not(.basic) { + font-size: var.get('font-size/sm') !important; + background-color: rgba(#{color.get('palette/blue/base', 'rgb')}, 0.1); + color: color.get('primary/base'); + border-radius: var.get('measure/2x'); + line-height: 22px !important; + padding-top: 0 !important; + padding-bottom: 0 !important; + + &:hover { + background-color: rgba(#{color.get('palette/blue/base', 'rgb')}, 0.3) !important; + color: color.get('primary/base') !important; + } + } + + .ui.selection.active.dropdown, .ui.selection.active.dropdown .menu { + border-color: color.get('elevation/6') + } + } + + .repo-description { + margin-bottom: var.get('measure/1x'); + + +a.flex-text-block { + svg { + color: color.get('subtle') !important; + } + margin-bottom: var.get('measure/1x'); + } + } + + .flex-text-block { + gap: var.get('measure/.25x') !important; + font-size: var.get('font-size/md') !important; + + svg { + margin-right: var.get('measure/.25x') !important; + } + } + + @media (max-width: 768px) { + .repo-description { + margin-top: 0 !important; + + +a.flex-text-block { + margin-bottom: 0; + } + } + + #repo-topics, #manage_topic, .flex-item-title { + display: none; + } + + .flex-item-body>div { + flex: 1; + } + } + } + + // releases + languages section + .repo-home-sidebar-bottom { + .flex-list .flex-item .flex-item-main { + .flex-item { + padding: 0 !important; + + .flex-item-main { + gap: 0 !important; + + .flex-item-header { + * { + font-size: var.get('font-size/md') !important; + } + + .flex-item-title { + gap: var.get('measure/.5x') !important; + .green.label { + border-radius: var.get('measure/2x'); + font-size: var.get('font-size/sm') !important; + background-color: transparent !important; + border: 1px solid color.get('palette/green/base') !important; + color: color.get('palette/green/base') !important; + } + } + } + + .flex-item-body { + .time { + font-size: var.get('font-size/sm') !important; + } + } + } + } + } + + // languages + .flex-item-body { + gap: 0 !important; + + .language-stats { + margin: 0 !important; + height: var.get('measure/.5x') !important; + margin-bottom: var.get('measure/.5x') !important; + } + + .language-stats-details { + gap: var.get('measure/1x') !important; + .item { + font-size: var.get('font-size/sm') !important; + padding: 0; + gap: var.get('measure/.25x') !important; + + .color-icon { + height: var.get('measure/.5x') !important; + width: var.get('measure/.5x') !important; + margin-right: var.get('measure/.25x') !important; + } + } + } + } + } + + .repo-home-sidebar-bottom, .repo-home-sidebar-top { + padding-left: var.get('measure/1.5x'); + + @media (max-width: 768px) { + padding-left: 0 !important; + } + + .flex-item-title .item { + display: flex; + flex-wrap: nowrap; + gap: var.get('measure/.5x'); + text-decoration: none; + + .small.label { + background-color: color.get('elevation/7'); + border: 1px solid color.get('elevation/7'); + border-radius: var.get('measure/2x'); + color: color.get('text'); + font-weight: var(--base-text-weight-medium, 500); + min-width: 20px; + padding: 2px; + text-align: center; + align-items: center; + justify-content: center; + } + } + + >.flex-list>.flex-item { + padding-top: var.get('measure/1x'); + padding-bottom: var.get('measure/1x'); + + >.flex-item-main { + gap: var.get('measure/1x'); + } + } + } + + button.ui.primary.button.js-btn-clone-panel { + display: flex; + flex-wrap: nowrap; + gap: var.get('measure/.5x'); + align-items: center; + + span { + display: flex; + flex-wrap: nowrap; + gap: var.get('measure/.375x'); + align-items: center; + } + } + + .clone-panel-popup { + .clone-panel-field { + margin: var.get('measure/1x'); + } + + .clone-panel-list { + margin: var.get('measure/1x'); + + .item { + margin: var.get('measure/.5x') 0; + } + } + + .clone-panel-tab { + padding: 0 var.get('measure/1x') var.get('measure/.5x'); + display: flex; + gap: var.get('measure/.5x'); + + button { + padding: var.get('measure/.375x') var.get('measure/.5x'); + font-weight: 600; + + &.active { + border-bottom: 0; + position: relative; + + &:after { + content: ''; + display: block; + position: absolute; + bottom: -7px; + left: 0; + width: 100%; + height: 2px; + background-color: color.get('primary/base'); + } + } + + &:hover { + background-color: var(--color-hover); + border-radius: var(--border-radius); + transition: background 0.12s ease-out; + text-decoration: none; + } + } + } + } + + .tippy-svg-arrow { + display: none; + } +} diff --git a/src/themes/scss/theme/modules/repo/_secondary-navbar.scss b/src/themes/scss/theme/modules/repo/_secondary-navbar.scss new file mode 100644 index 0000000..6c238da --- /dev/null +++ b/src/themes/scss/theme/modules/repo/_secondary-navbar.scss @@ -0,0 +1,171 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; +@use '../../components/button' as button; + +@mixin apply-styles { + .secondary-nav { + margin-bottom: var.get('measure/1.5x') !important; + + .ui.container { + margin: 0 0 0 0 !important; + max-width: unset !important; + width: 100% !important; + padding: 0 var.get('measure/1x'); + } + + // header + .repo-header { + margin: 0 0 var.get('measure/1x') 0; + + // repo image + img.avatar { + width: var.get('measure/2x') !important; + height: var.get('measure/2x') !important; + } + + // repo title (repo "owner / name" text) + .flex-item-title { + gap: var.get('measure/.25x') !important; + font-size: var.get('font-size/md') !important; + font-weight: normal !important; + color: color.get('elevation/10') !important; + + a { + padding: var.get('measure/.375x') var.get('measure/.5x') !important; + border-radius: var.get('measure/.25x'); + + &:hover { + background-color: color.get('elevation/4') !important; + color: color.get('text') !important; + text-decoration: none !important; + } + } + + // repo name only + a:last-child { + font-weight: 600; + } + } + + // "public/private" label + .flex-item-trailing { + .label { + padding: var.get('measure/.25x') var.get('measure/.5x'); + font-size: var.get('font-size/sm'); + border-radius: var.get('measure/1x'); + background-color: transparent; + color: color.get('elevation/10'); + } + + // lock icon + svg { + color: color.get('elevation/10'); + } + } + + @media (max-width: 768px) { + // repo title (repo "owner / name" text) + .flex-item-title { + display: inline-block; + white-space: nowrap; + padding: 0 var.get('measure/.5x') !important; + font-size: var.get('font-size/sm') !important; + font-weight: 500 !important; + + a { + padding: 0 !important; + + &:hover { + background-color: transparent !important; + color: color.get('primary/base') !important; + text-decoration: none !important; + } + } + + a:first-child { + float: left; + margin-right: var.get('measure/.5x'); + color: color.get('elevation/10') !important; + font-weight: 500 !important; + + &:hover { + color: color.get('primary/base') !important; + } + } + + // repo name only + a:last-child { + font-size: var.get('font-size/md') !important; + clear: left; + display: block; + } + } + } + } + + // header navbar menu + overflow-menu.ui.secondary.pointing.menu { + .overflow-menu-items { + gap: var.get('measure/.5x') !important; + } + + // navbar menu items + .item { + padding: var.get('measure/.375x') var.get('measure/.5x') !important; + margin-bottom: var.get('measure/.5x') !important; + border-radius: var.get('measure/.25x'); + border: none !important; + + // icon + svg { + color: var(--color-text-light-3) !important; + margin-right: var.get('measure/.5x') !important; + } + + &:hover { + background-color: var(--color-secondary-nav-hover-bg) !important; + color: var(--color-text-light-2) !important; + } + + // when the represents the current route + &.active { + border: none !important; + &:after { + content: ''; + display: block; + position: absolute; + width: 100%; + height: 2px; + left: 0; + top: calc(100% + #{var.get('measure/.375x')} - 1px); + background-color: color.get('primary/base'); + transform: unset; + border: none; + } + } + + // numeric badge/label (e.g. indicating the number of issues) + .small.label { + background-color: color.get('elevation/7'); + border: 1px solid color.get('elevation/7'); + border-radius: var.get('measure/2x'); + color: color.get('text'); + font-weight: var(--base-text-weight-medium, 500); + min-width: calc(var.get('measure/1x') + 1px); + padding: 2px; + text-align: center; + align-items: center; + justify-content: center; + } + } + } + + // buttons at the right of the header (unwatch, star, fork, etc.) + .repo-buttons { + .button { + font-size: var.get('font-size/sm') !important; + @include button.hollow; + } + } + } +} diff --git a/src/themes/scss/theme/modules/repo/index.scss b/src/themes/scss/theme/modules/repo/index.scss new file mode 100644 index 0000000..a76311a --- /dev/null +++ b/src/themes/scss/theme/modules/repo/index.scss @@ -0,0 +1,9 @@ +@use './home'; +@use './secondary-navbar'; +@use './file-list'; + +@mixin repo { + @include home.apply-styles(); + @include secondary-navbar.apply-styles(); + @include file-list.apply-styles(); +} \ No newline at end of file diff --git a/src/themes/scss/theme/modules/settings/_pages.scss b/src/themes/scss/theme/modules/settings/_pages.scss new file mode 100644 index 0000000..2595c99 --- /dev/null +++ b/src/themes/scss/theme/modules/settings/_pages.scss @@ -0,0 +1,20 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; +@use './section'; + +@mixin settings-pages { + .page-content.user.settings, .page-content.admin, .page-content.repository.settings { + .ui.flex-container { + column-gap: 40px; + + .flex-container-nav { + width: 232px; + @include section.nav; + } + + .flex-container-main { + @include section.content; + } + } + } +} diff --git a/src/themes/scss/theme/modules/settings/index.scss b/src/themes/scss/theme/modules/settings/index.scss new file mode 100644 index 0000000..7282697 --- /dev/null +++ b/src/themes/scss/theme/modules/settings/index.scss @@ -0,0 +1,5 @@ +@use './pages'; + +@mixin settings { + @include pages.settings-pages; +} \ No newline at end of file diff --git a/src/themes/scss/theme/modules/settings/section/_content.scss b/src/themes/scss/theme/modules/settings/section/_content.scss new file mode 100644 index 0000000..4cde472 --- /dev/null +++ b/src/themes/scss/theme/modules/settings/section/_content.scss @@ -0,0 +1,87 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; + +@mixin content { + .ui.top.attached.header { + background: unset; + border: none; + font-size: var.get('font-size/3xl'); + font-weight: 400; + padding: 0 0 var.get('measure/.5x') 0; + border-bottom: 1px solid var(--color-secondary); + margin-bottom: var.get('measure/1x'); + + // if not the first header, add a margin top + &:not(:first-child) { + margin-top: var.get('measure/2.5x'); + } + + &.error { + border-color: var(--color-secondary) !important; + background: unset !important; + } + } + + .ui.segment { + border-radius: var(--border-radius); + + >*:last-child { + margin-bottom: 0; + padding-bottom: 0; + } + } + + .ui.attached.segment { + background: unset; + padding:0; + border: none; + margin: 0; + + &.bottom { + margin-top: var.get('measure/2x'); + } + + a:not(.button) { + color: var(--color-primary); + text-decoration: underline; + display: inline-flex; + align-items: center; + column-gap: var.get('measure/.375x'); + + svg { + margin-left: var.get('measure/.25x'); + } + } + + .ui.form .field { + margin: 0 0 1em; + } + + .ui.form .fields .fields, .ui.form .field:last-child, .ui.form .fields:last-child .field { + margin-bottom: 0; + } + + .field { + margin: var.get('measure/1x') 0; + } + + .divider { + margin: var.get('measure/1x') 0; + } + + .list { + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); + + .item { + margin-left: 0; + margin-right: 0; + + &:not(:first-child), &:first-child { + padding: 1rem; + margin: 0rem 0rem 0rem 0rem; + } + } + } + } +} \ No newline at end of file diff --git a/src/themes/scss/theme/modules/settings/section/_nav.scss b/src/themes/scss/theme/modules/settings/section/_nav.scss new file mode 100644 index 0000000..50300bd --- /dev/null +++ b/src/themes/scss/theme/modules/settings/section/_nav.scss @@ -0,0 +1,94 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; + +@mixin nav { + .vertical.menu { + --spacing: #{var.get('measure/.375x')} #{var.get('measure/.75x')}; + --min-height: #{var.get('measure/2x')}; + background-color: transparent; + border: none; + + .header.item { + display: flex; + align-items: center; + padding: var(--spacing); + font-size: var.get('font-size/sm'); + font-weight: 600; + color: color.get('subtle'); + background-color: transparent; + min-height: var(--min-height); + } + + a.item, details.item { + min-height: var(--min-height); + &:before { + content: none; + } + + &:not(:last-child) { + margin-bottom: var.get('measure/.25x'); + } + + &.active { + font-weight: 600; + background-color: var(--color-menu); + position: relative; + + &:hover { + background-color: var(--color-hover); + } + + &:after { + background: var(--color-primary); + border-radius: .375rem; + content: ""; + height: 24px; + width: 4px; + position: absolute; + top: 50%; + transform: translateY(-50%); + left: calc(0px - 4px - #{var.get('measure/.375x')}); + } + } + } + + a.item, details.item summary { + padding: var(--spacing); + border-radius: var(--border-radius); + } + + details.item { + --octicon-chevron-down: url('data:image/svg+xml;utf8,'); + + summary { + &:after { + color: color.get('subtle'); + transform: scaleY(1); + transition: transform .12s linear; + mask-image: var(--octicon-chevron-down); + -webkit-mask-image: var(--octicon-chevron-down); + } + } + + &[open] summary { + &:after { + transform: scaleY(-1); + } + } + + .menu { + .item { + display: flex; + align-items: center; + color: color.get('text') !important; + + &:hover { + background-color: var(--color-hover); + } + } + + margin: 0 !important; + } + } + } +} \ No newline at end of file diff --git a/src/themes/scss/theme/modules/settings/section/index.scss b/src/themes/scss/theme/modules/settings/section/index.scss new file mode 100644 index 0000000..aa3adbd --- /dev/null +++ b/src/themes/scss/theme/modules/settings/section/index.scss @@ -0,0 +1,2 @@ +@forward './nav'; +@forward './content'; \ No newline at end of file diff --git a/src/themes/scss/theme/vars/_base.scss b/src/themes/scss/theme/vars/_base.scss new file mode 100644 index 0000000..f9583b9 --- /dev/null +++ b/src/themes/scss/theme/vars/_base.scss @@ -0,0 +1,60 @@ +@use '@lucas-labs/lui-micro/color' as color; +@use '@lucas-labs/lui-micro/var' as var; + +@mixin base { + :root { + // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + // โ”‚ fonts โ”‚ + // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + --fonts-proportional: #{var.get('font-family')}; + --fonts-monospace: #{var.get('code-font-family')}; + --fonts-emoji: #{var.get('emoji-font-family')}; + + // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + // โ”‚ fonts โ”‚ weights & heights โ”‚ + // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + --font-weight-light: 300; + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --line-height-default: normal; + + // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + // โ”‚ images โ”‚ + // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + --checkbox-mask-checked: url('data:image/svg+xml;utf8,'); + --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,'); + --octicon-chevron-right: url('data:image/svg+xml;utf8,'); + + // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + // โ”‚ radius โ”‚ + // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + --border-radius: #{var.get('measure/.5x')}; + --border-radius-medium: #{var.get('measure/1x')}; + --border-radius-full: calc(infinity * 1px); + + // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + // โ”‚ others โ”‚ + // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + --opacity-disabled: 0.55; + --height-loading: 16rem; + --min-height-textarea: 132px; // padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported + --checkbox-size: 16px; // height and width of checkbox and radio inputs + --page-spacing: 24px; // space between page elements + --page-margin-x: 32px; // minimum space on left and right side of page + --tab-size: 4; + } + + @media (min-width: 768px) and (max-width: 1200px) { + :root { + --page-margin-x: 24px; + } + } + + @media (max-width: 767.98px) { + :root { + --page-margin-x: 16px; + } + } +} \ No newline at end of file diff --git a/src/themes/scss/theme/vars/_colors.scss b/src/themes/scss/theme/vars/_colors.scss new file mode 100644 index 0000000..6f171a5 --- /dev/null +++ b/src/themes/scss/theme/vars/_colors.scss @@ -0,0 +1,410 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; + +@mixin colors($is-dark: true) { + $scheme: if($is-dark, 'dark', 'light'); + $scheme-inverted: if($is-dark, 'light', 'dark'); + + :root { + accent-color: var(--color-accent); + + @if $is-dark { + color-scheme: dark; + --is-dark-theme: true; + } @else { + color-scheme: light; + --is-dark-theme: false; + } + + // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + // โ”‚ primary โ”‚ + // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + --color-primary: #{color.get('primary/base')}; + --color-primary-contrast: #{color.get('primary/base', 'contrast')}; + + // dark + --color-primary-dark-1: #{color.get('primary/' + $scheme-inverted + '/3%')}; + --color-primary-dark-2: #{color.get('primary/' + $scheme-inverted + '/6%')}; + --color-primary-dark-3: #{color.get('primary/' + $scheme-inverted + '/9%')}; + --color-primary-dark-4: #{color.get('primary/' + $scheme-inverted + '/10%')}; + --color-primary-dark-5: #{color.get('primary/' + $scheme-inverted + '/20%')}; + --color-primary-dark-6: #{color.get('primary/' + $scheme-inverted + '/25%')}; + --color-primary-dark-7: #{color.get('primary/' + $scheme-inverted + '/30%')}; + + // light + --color-primary-light-1: #{color.get('primary/' + $scheme + '/3%')}; + --color-primary-light-2: #{color.get('primary/' + $scheme + '/6%')}; + --color-primary-light-3: #{color.get('primary/' + $scheme + '/10%')}; + --color-primary-light-4: #{color.get('primary/' + $scheme + '/15%')}; + --color-primary-light-5: #{color.get('primary/' + $scheme + '/20%')}; + --color-primary-light-6: #{color.get('primary/' + $scheme + '/30%')}; + --color-primary-light-7: #{color.get('primary/' + $scheme + '/40%')}; + + // alpha + --color-primary-alpha-10: rgba(#{color.get('primary/base', 'rgb')}, 0.1); + --color-primary-alpha-20: rgba(#{color.get('primary/base', 'rgb')}, 0.2); + --color-primary-alpha-30: rgba(#{color.get('primary/base', 'rgb')}, 0.3); + --color-primary-alpha-40: rgba(#{color.get('primary/base', 'rgb')}, 0.4); + --color-primary-alpha-50: rgba(#{color.get('primary/base', 'rgb')}, 0.5); + --color-primary-alpha-60: rgba(#{color.get('primary/base', 'rgb')}, 0.6); + --color-primary-alpha-70: rgba(#{color.get('primary/base', 'rgb')}, 0.7); + --color-primary-alpha-80: rgba(#{color.get('primary/base', 'rgb')}, 0.8); + --color-primary-alpha-90: rgba(#{color.get('primary/base', 'rgb')}, 0.9); + + // states + --color-primary-hover: var(--color-primary-light-1); + --color-primary-active: var(--color-primary-light-3); + + // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + // โ”‚ secondary โ”‚ ยป secondary + // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + --color-secondary: #{color.get('secondary/base')}; + + // dark + --color-secondary-dark-1: #{color.get('secondary/' + $scheme-inverted + '/3%')}; + --color-secondary-dark-2: #{color.get('secondary/' + $scheme-inverted + '/6%')}; + --color-secondary-dark-3: #{color.get('secondary/' + $scheme-inverted + '/9%')}; + --color-secondary-dark-4: #{color.get('secondary/' + $scheme-inverted + '/12%')}; + --color-secondary-dark-5: #{color.get('secondary/' + $scheme-inverted + '/15%')}; + --color-secondary-dark-6: #{color.get('secondary/' + $scheme-inverted + '/20%')}; + --color-secondary-dark-7: #{color.get('secondary/' + $scheme-inverted + '/25%')}; + --color-secondary-dark-8: #{color.get('secondary/' + $scheme-inverted + '/30%')}; + --color-secondary-dark-9: #{color.get('secondary/' + $scheme-inverted + '/35%')}; + --color-secondary-dark-10: #{color.get('secondary/' + $scheme-inverted + '/40%')}; + --color-secondary-dark-11: #{color.get('secondary/' + $scheme-inverted + '/45%')}; + --color-secondary-dark-12: #{color.get('secondary/' + $scheme-inverted + '/50%')}; + --color-secondary-dark-13: #{color.get('secondary/' + $scheme-inverted + '/55%')}; + + // light + --color-secondary-light-1: #{color.get('secondary/' + $scheme + '/3%')}; + --color-secondary-light-2: #{color.get('secondary/' + $scheme + '/6%')}; + --color-secondary-light-3: #{color.get('secondary/' + $scheme + '/9%')}; + --color-secondary-light-4: #{color.get('secondary/' + $scheme + '/12%')}; + + // alpha + --color-secondary-alpha-10: rgba(#{color.get('secondary/base', 'rgb')}, 0.1); + --color-secondary-alpha-20: rgba(#{color.get('secondary/base', 'rgb')}, 0.2); + --color-secondary-alpha-30: rgba(#{color.get('secondary/base', 'rgb')}, 0.3); + --color-secondary-alpha-40: rgba(#{color.get('secondary/base', 'rgb')}, 0.4); + --color-secondary-alpha-50: rgba(#{color.get('secondary/base', 'rgb')}, 0.5); + --color-secondary-alpha-60: rgba(#{color.get('secondary/base', 'rgb')}, 0.6); + --color-secondary-alpha-70: rgba(#{color.get('secondary/base', 'rgb')}, 0.7); + --color-secondary-alpha-80: rgba(#{color.get('secondary/base', 'rgb')}, 0.8); + --color-secondary-alpha-90: rgba(#{color.get('secondary/base', 'rgb')}, 0.9); + + // states + --color-secondary-button: var(--color-secondary-dark-4); + --color-secondary-hover: var(--color-secondary-dark-3); + --color-secondary-active: var(--color-secondary-dark-2); + + // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + // โ”‚ console โ”‚ ยป used for actions console and console files + // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + --color-console-fg: #f7f8f9; + --color-console-fg-subtle: #bdc4cc; + --color-console-bg: #171b1e; + --color-console-border: #2e353b; + --color-console-hover-bg: #272d33; + --color-console-active-bg: #2e353b; + --color-console-menu-bg: #262b31; + --color-console-menu-border: #414b55; + + // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + // โ”‚ named โ”‚ + // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + --color-red: #{color.get('palette/red/base')}; + --color-orange: #{color.get('palette/orange/base')}; + --color-yellow: #{color.get('palette/yellow/base')}; + --color-olive: #{color.get('palette/olive/base')}; + --color-green: #{color.get('palette/green/base')}; + --color-teal: #{color.get('palette/teal/base')}; + --color-blue: #{color.get('palette/blue/base')}; + --color-violet: #{color.get('palette/violet/base')}; + --color-purple: #{color.get('palette/purple/base')}; + --color-pink: #{color.get('palette/pink/base')}; + --color-brown: #{color.get('palette/brown/base')}; + --color-black: #{color.get('palette/black/base')}; + + // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + // โ”‚ named โ”‚ ยป contrasts (lugit addition) + // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + --color-green-contrast: #{if($is-dark, var(--color-black), var(--color-white))}; + --color-red-contrast: #{if($is-dark, var(--color-black), var(--color-white))}; + + + // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + // โ”‚ named โ”‚ ยป light variants + // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + --color-red-light: #{color.get('palette/red/light/10%')}; + --color-orange-light: #{color.get('palette/orange/light/10%')}; + --color-yellow-light: #{color.get('palette/yellow/light/10%')}; + --color-olive-light: #{color.get('palette/olive/light/10%')}; + --color-green-light: #{color.get('palette/green/light/10%')}; + --color-teal-light: #{color.get('palette/teal/light/10%')}; + --color-blue-light: #{color.get('palette/blue/light/10%')}; + --color-violet-light: #{color.get('palette/violet/light/10%')}; + --color-purple-light: #{color.get('palette/purple/light/10%')}; + --color-pink-light: #{color.get('palette/pink/light/10%')}; + --color-brown-light: #{color.get('palette/brown/light/10%')}; + --color-black-light: #{if( + $is-dark, + color.get('palette/black/light/10%'), + color.get('palette/white/light/10%') + )}; + + // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + // โ”‚ named โ”‚ ยป dark 1 variants + // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + --color-red-dark-1: #{color.get('palette/red/dark/10%')}; + --color-orange-dark-1: #{color.get('palette/orange/dark/10%')}; + --color-yellow-dark-1: #{color.get('palette/yellow/dark/10%')}; + --color-olive-dark-1: #{color.get('palette/olive/dark/10%')}; + --color-green-dark-1: #{color.get('palette/green/dark/10%')}; + --color-teal-dark-1: #{color.get('palette/teal/dark/10%')}; + --color-blue-dark-1: #{color.get('palette/blue/dark/10%')}; + --color-violet-dark-1: #{color.get('palette/violet/dark/10%')}; + --color-purple-dark-1: #{color.get('palette/purple/dark/10%')}; + --color-pink-dark-1: #{color.get('palette/pink/dark/10%')}; + --color-brown-dark-1: #{color.get('palette/brown/dark/10%')}; + --color-black-dark-1: #{if( + $is-dark, + color.get('palette/black/dark/10%'), + color.get('palette/white/dark/10%') + )}; + + // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + // โ”‚ named โ”‚ ยป dark 2 variants + // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + --color-red-dark-2: #{color.get('palette/red/dark/20%')}; + --color-orange-dark-2: #{color.get('palette/orange/dark/20%')}; + --color-yellow-dark-2: #{color.get('palette/yellow/dark/20%')}; + --color-olive-dark-2: #{color.get('palette/olive/dark/20%')}; + --color-green-dark-2: #{color.get('palette/green/dark/20%')}; + --color-teal-dark-2: #{color.get('palette/teal/dark/20%')}; + --color-blue-dark-2: #{color.get('palette/blue/dark/20%')}; + --color-violet-dark-2: #{color.get('palette/violet/dark/20%')}; + --color-purple-dark-2: #{color.get('palette/purple/dark/20%')}; + --color-pink-dark-2: #{color.get('palette/pink/dark/20%')}; + --color-brown-dark-2: #{color.get('palette/brown/dark/20%')}; + --color-black-dark-2: #{if( + $is-dark, + color.get('palette/black/dark/20%'), + color.get('palette/white/dark/20%') + )}; + + // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ” + // โ”‚ ansi โ”‚ ยป for actions console and console files + // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + --color-ansi-black: #1e2327; + --color-ansi-red: #cc4848; + --color-ansi-green: #87ab63; + --color-ansi-yellow: #cc9903; + --color-ansi-blue: #3a8ac6; + --color-ansi-magenta: #d22e8b; + --color-ansi-cyan: #00918a; + --color-ansi-white: var(--color-console-fg-subtle); + --color-ansi-bright-black: #424851; + --color-ansi-bright-red: #d15a5a; + --color-ansi-bright-green: #93b373; + --color-ansi-bright-yellow: #eaaf03; + --color-ansi-bright-blue: #4e96cc; + --color-ansi-bright-magenta: #d74397; + --color-ansi-bright-cyan: #00b6ad; + --color-ansi-bright-white: var(--color-console-fg); + + // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + // โ”‚ other โ”‚ + // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + --color-grey: #{color.get('elevation/9')}; + --color-grey-light: #{color.get('elevation/11')}; + --color-gold: #{color.get('palette/yellow/dark/20%')}; + --color-white: #{color.get('palette/white/base')}; + --color-git: #f05133; + + // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ” + // โ”‚ diff โ”‚ + // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + --color-diff-added-linenum-bg: #{if($is-dark, #{color.get('palette/teal/dark/50%')}, rgba(#{color.get('palette/white/base', 'rgb')}, .2))}; + --color-diff-added-row-bg: #{if($is-dark, #{color.get('palette/teal/dark/60%')}, rgba(#{color.get('palette/green/light/20%', 'rgb')}, .25))}; + --color-diff-added-row-border: #{if($is-dark, #{color.get('palette/teal/dark/40%')}, rgba(#{color.get('palette/green/light/25%', 'rgb')}, .25))}; + --color-diff-added-word-bg: #{if($is-dark, #{color.get('palette/teal/dark/50%')}, rgba(#{color.get('palette/green/light/6%', 'rgb')}, .3))}; + --color-diff-moved-row-bg: #{if($is-dark, #{color.get('palette/yellow/dark/75%')}, rgba(#{color.get('palette/yellow/light/20%', 'rgb')}, .25))}; + --color-diff-moved-row-border: #{if($is-dark, #{color.get('palette/yellow/dark/65%')}, rgba(#{color.get('palette/yellow/light/25%', 'rgb')}, .25))}; + --color-diff-removed-linenum-bg: #{if($is-dark, #{color.get('palette/red/dark/60%')}, rgba(#{color.get('palette/white/base', 'rgb')}, .2))}; + --color-diff-removed-row-bg: #{if($is-dark, #{color.get('palette/red/dark/65%')}, rgba(#{color.get('palette/red/light/30%', 'rgb')}, .15))}; + --color-diff-removed-row-border: #{if($is-dark, #{color.get('palette/red/dark/50%')}, rgba(#{color.get('palette/red/light/35%', 'rgb')}, .2))}; + --color-diff-removed-word-bg: #{if($is-dark, #{color.get('palette/red/dark/55%')}, rgba(#{color.get('palette/red/light/25%', 'rgb')}, .2))}; + --color-diff-inactive: #{if($is-dark, #{color.get('elevation/6')}, red)}; + + // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + // โ”‚ status โ”‚ + // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + --color-error-border: #{color.get('palette/red/base')}; + --color-error-bg: rgba(#{color.get('palette/red/base', 'rgb')}, 0.15); + --color-error-bg-active: #{color.get('palette/red/light/6%')}; + --color-error-bg-hover: #{color.get('palette/red/light/12%')}; + --color-error-text: #{color.get('palette/red/base')}; + --color-success-border: #{color.get('palette/green/light/12%')}; + --color-success-bg: rgba(#{color.get('palette/green/base', 'rgb')}, 0.15); + --color-success-text: #{color.get('text')}; + --color-warning-border: #{color.get('palette/yellow/light/12%')}; + --color-warning-bg: #{color.get('palette/yellow/base')}; + --color-warning-text: #{color.get('elevation/3')}; + --color-info-border: #{color.get('palette/blue/light/12%')}; + --color-info-bg: #{color.get('elevation/3')}; + --color-info-text: #{color.get('text')}; + + // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + // โ”‚ badge โ”‚ + // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + --color-red-badge: #{color.get('palette/red/dark/20%')}; + --color-red-badge-bg: rgba(#{color.get('palette/red/dark/20%', 'rgb')}, .1); + --color-red-badge-hover-bg: rgba(#{color.get('palette/red/dark/20%', 'rgb')}, .2); + + --color-green-badge: #{color.get('palette/green/base')}; + --color-green-badge-bg: rgba(#{color.get('palette/green/base', 'rgb')}, .1); + --color-green-badge-hover-bg: rgba(#{color.get('palette/green/base', 'rgb')}, .2); + + --color-yellow-badge: #{color.get('palette/yellow/dark/10%')}; + --color-yellow-badge-bg: rgba(#{color.get('palette/yellow/dark/10%', 'rgb')}, .1); + --color-yellow-badge-hover-bg: rgba(#{color.get('palette/yellow/dark/10%', 'rgb')}, .2); + + --color-orange-badge: #{color.get('palette/orange/dark/10%')}; + --color-orange-badge-bg: rgba(#{color.get('palette/orange/dark/10%', 'rgb')}, .1); + --color-orange-badge-hover-bg: rgba(#{color.get('palette/orange/dark/10%', 'rgb')}, .2); + + // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” + // โ”‚ target-based โ”‚ + // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ + + // body colors + --color-body: #{color.get('elevation/3')}; + --color-text-dark: #{color.get('text')}; + --color-text: #{color.get('text')}; + --color-text-light: #{color.get('subtle')}; + --color-text-light-1: #{color.get('subtle')}; + --color-text-light-2: #{color.get('subtle')}; + --color-text-light-3: #{color.get('subtle')}; + --color-footer: rgba(#{color.get('elevation/2', 'rgb')}, 0.2); + --color-timeline: #{color.get('elevation/5')}; + --color-timeline-badge-fg: #{if($is-dark, var(--color-white), var.get('color-text'))}; + + // box + --color-box-header: #{rgba(color.get('elevation/4', 'rgb'), 1)}; + --color-box-body: #{color.get('elevation/3')}; + --color-box-body-highlight: #{color.get('elevation/4')}; + + // input + --color-input-text: var(--color-text-dark); + --color-input-background: #{color.get('elevation/4')}; + --color-input-toggle-background: #{color.get('elevation/4')}; + --color-input-border: #{color.get('elevation/5')}; + --color-input-border-hover: #{color.get('elevation/6')}; + + // light + --color-light: #00001728; + --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-border: #{color.get('elevation/6')}; + --color-hover: rgba(#{color.get('elevation/6', 'rgb')}, 0.5); + --color-hover-opaque: #{color.get('elevation/6', 'rgb')}; + --color-active: #{color.get('elevation/5')}; + --color-menu: #{color.get('elevation/4')}; + --color-card: #{color.get('elevation/3')}; + --color-markup-table-row: rgba(#{color.get('text', 'rgb')}, 0.02); + --color-markup-code-block: #{color.get('elevation/4')}; + --color-markup-code-inline: #{color.get('elevation/4')}; + --color-button: #{color.get('elevation/4')}; + --color-code-bg: #{color.get('elevation/3')}; + --color-shadow: #{if($is-dark, rgba(#{color.get('elevation/1', 'rgb')}, 0.5), rgba(#{color.get('elevation/6', 'rgb')}, 0.5))}; + --color-shadow-opaque: #{if($is-dark, color.get('elevation/1'), color.get('elevation/6'))}; + + --color-shadow-rgb: #{if($is-dark, color.get('elevation/1', 'rgb'), color.get('elevation/6', 'rgb'))}; + + --color-secondary-bg: #{color.get('elevation/4')}; + --color-expand-button: #{color.get('elevation/6')}; + --color-placeholder-text: #{color.get('elevation/9')}; + --color-editor-line-highlight: var(--color-primary-light-5); + --color-project-column-bg: #{color.get('elevation/1')}; + --color-caret: var(--color-text); + --color-reaction-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .1);; + --color-reaction-hover-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .2);; + --color-reaction-active-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .05);; + --color-tooltip-text: #{if($is-dark, color.get('text'), color.get('elevation/1'))}; + --color-tooltip-bg: #{if($is-dark, color.get('elevation/7'), color.get('elevation/10'))}; + --color-overlay-backdrop: rgba(#{color.get('elevation/1', 'rgb')}, 0.8); + + // navbar + --color-nav-bg: #{color.get('navbar/bg', $default: if($is-dark, color.get('elevation/1'), color.get('elevation/4')))}; + --color-nav-hover-bg: #{color.get('navbar/hover', $default: if($is-dark, color.get('elevation/5'), color.get('elevation/5')))}; + --color-nav-text: #{color.get('navbar/fg', $default: var(--color-text))}; + --color-secondary-nav-bg: #{if($is-dark, color.get('elevation/1'), color.get('elevation/4'))}; + --color-secondary-nav-hover-bg: #{if($is-dark, color.get('elevation/4'), color.get('elevation/5'))}; + + // label + --color-label-text: var(--color-text); + --color-label-bg: #7282924b; + --color-label-hover-bg: #728292a0; + --color-label-active-bg: #728292ff; + + // accents + --color-accent: #{color.get('palette/blue/dark/25%')}; + --color-small-accent: var(--color-primary-light-5); + --color-highlight-fg: #{color.get('palette/yellow/dark/20%')}; + --color-highlight-bg: #{color.get('palette/yellow/dark/75%')}; + } + + #commits-table { + // even rows color + --color-light: transparent !important; + } + + #navbar { + #navbar-logo { + img { + height: var.get('navbar-logo/height') !important; + width: var.get('navbar-logo/width') !important; + } + } + } + + .markup { + code { + border-radius: var.get('measure/.375x') !important; + } + + p { + line-height: 1.5 !important; + } + } + + ::selection { + background-color: #{color.get('primary/dark/60%')}; + color: #{color.get('primary/dark/60%', 'contrast')}; + } + + // // In dark mode, invert emojis that are hard to read otherwise + @if $is-dark { + .emoji[aria-label="check mark"], + .emoji[aria-label="currency exchange"], + .emoji[aria-label="TOP arrow"], + .emoji[aria-label="END arrow"], + .emoji[aria-label="ON! arrow"], + .emoji[aria-label="SOON arrow"], + .emoji[aria-label="heavy dollar sign"], + .emoji[aria-label="copyright"], + .emoji[aria-label="registered"], + .emoji[aria-label="trade mark"], + .emoji[aria-label="multiply"], + .emoji[aria-label="plus"], + .emoji[aria-label="minus"], + .emoji[aria-label="divide"], + .emoji[aria-label="curly loop"], + .emoji[aria-label="double curly loop"], + .emoji[aria-label="wavy dash"], + .emoji[aria-label="paw prints"], + .emoji[aria-label="musical note"], + .emoji[aria-label="musical notes"] { + filter: invert(100%) hue-rotate(180deg); + } + } +} diff --git a/src/themes/scss/theme/vars/index.scss b/src/themes/scss/theme/vars/index.scss new file mode 100644 index 0000000..8d5d581 --- /dev/null +++ b/src/themes/scss/theme/vars/index.scss @@ -0,0 +1,2 @@ +@forward './base'; +@forward './colors'; \ No newline at end of file diff --git a/src/themes/scss/utils/_color-utils.scss b/src/themes/scss/utils/_color-utils.scss deleted file mode 100644 index c8ade23..0000000 --- a/src/themes/scss/utils/_color-utils.scss +++ /dev/null @@ -1,85 +0,0 @@ -@use 'sass:color'; -@use 'sass:map'; - -@function light-change($color, $amount, $isDark) { - $multiplier: if($isDark, -1, 1); - @return color.adjust($color, $lightness: $amount * $multiplier); -} - -@function alpha-change($color, $alpha) { - @return color.change($color, $alpha: $alpha); -} - -@function color-variants-light($color, $is-dark, $with-base: false) { - $set: ( - '3%': light-change($color, -3%, $is-dark), - '6%': light-change($color, -6%, $is-dark), - '9%': light-change($color, -9%, $is-dark), - '12%': light-change($color, -12%, $is-dark), - '15%': light-change($color, -15%, $is-dark), - '18%': light-change($color, -18%, $is-dark), - '21%': light-change($color, -21%, $is-dark), - '24%': light-change($color, -24%, $is-dark), - '27%': light-change($color, -27%, $is-dark), - '30%': light-change($color, -30%, $is-dark), - '33%': light-change($color, -33%, $is-dark), - '36%': light-change($color, -36%, $is-dark), - '39%': light-change($color, -39%, $is-dark) - ); - - @if $with-base { - $set: map.merge((base: $color), $set); - } - - @return $set; -} - -@function color-variants-dark($color, $is-dark, $with-base: false) { - $set: ( - '3%': light-change($color, 3%, $is-dark), - '6%': light-change($color, 6%, $is-dark), - '9%': light-change($color, 9%, $is-dark), - '12%': light-change($color, 12%, $is-dark), - '15%': light-change($color, 15%, $is-dark), - '18%': light-change($color, 18%, $is-dark), - '21%': light-change($color, 21%, $is-dark), - '24%': light-change($color, 24%, $is-dark), - '27%': light-change($color, 27%, $is-dark), - '30%': light-change($color, 30%, $is-dark), - '33%': light-change($color, 33%, $is-dark), - '36%': light-change($color, 36%, $is-dark), - '39%': light-change($color, 39%, $is-dark), - ); - - @if $with-base { - $set: map.merge((base: $color), $set); - } - - @return $set; -} - -@function variants($color, $is-dark, $light: true, $dark: true, $base: true, $override-base-with: null) { - $set: (); - - // base: $color, - // light: color-variants-light($color, $is-dark), - // dark: color-variants-dark($color, $is-dark), - - @if $light { - $set: map.merge($set, (light: color-variants-light($color, $is-dark))); - } - - @if $dark { - $set: map.merge($set, (dark: color-variants-dark($color, $is-dark))); - } - - @if $base { - @if $override-base-with { - $set: map.merge($set, (base: $override-base-with)); - } @else { - $set: map.merge($set, (base: $color)); - } - } - - @return $set; -} \ No newline at end of file diff --git a/tools/tasks/fonts.js b/tools/tasks/fonts.js index 311b1ec..23b8598 100644 --- a/tools/tasks/fonts.js +++ b/tools/tasks/fonts.js @@ -1,4 +1,4 @@ -import { copyFileSync, mkdirSync } from 'fs'; +import { copyFileSync, mkdirSync, existsSync } from 'fs'; import { join } from 'path'; import { readFiles } from '../utils/funcs.js'; import { Logger } from '../utils/logger.js'; @@ -12,7 +12,11 @@ export async function buildFonts(srcHome, distHome) { const fontsSrcPath = join(srcHome, imgSrc); const fontsDestPath = join(distHome, imgDest); - mkdirSync(fontsDestPath, { recursive: true }); + // if fontsSrcPath does not exist, return + if (!existsSync(fontsSrcPath)) { + logger.warn(`No fonts found in ${fontsSrcPath} (there's not even a folder there)`); + return; + } const files = readFiles(fontsSrcPath, [ '.woff', @@ -23,6 +27,14 @@ export async function buildFonts(srcHome, distHome) { '.otf', ]); + // if there are no files, return + if (!files.length) { + logger.warn(`No fonts found in ${fontsSrcPath}`); + return; + } + + mkdirSync(fontsDestPath, { recursive: true }); + for (const file of files) { // just copy the file copyFileSync(join(fontsSrcPath, file), join(fontsDestPath, file)); diff --git a/tools/tasks/templates.js b/tools/tasks/templates.js index b86a562..b05a4e4 100644 --- a/tools/tasks/templates.js +++ b/tools/tasks/templates.js @@ -1,4 +1,5 @@ import { join } from 'path'; +import { existsSync } from 'fs'; import { copyFolderRecursiveSync } from '../utils/funcs.js'; import { Logger } from '../utils/logger.js'; @@ -11,6 +12,12 @@ export async function buildTemplates(srcHome, distHome) { const tmplSrcPath = join(srcHome, tmplSrc); const tmplDestPath = join(distHome, tmplDest); + // if src/templates folder doesn't exist, just return + if (!existsSync(tmplSrcPath)) { + logger.info(`No templates found in ${tmplSrcPath}. Skipping templates build`); + return; + } + // just copy the entire tmplSrcPath to tmplDestPath copyFolderRecursiveSync(tmplSrcPath, tmplDestPath); logger.info('Templates build has finished');