diff --git a/.eslintrc.json b/.eslintrc.json index a093c74..081edc7 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -8,6 +8,5 @@ "ecmaVersion": "latest", "sourceType": "module" }, - "rules": { - } + "rules": {} } diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index b1b6193..36f1535 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -2,7 +2,7 @@ name: Release on: push: tags: - - "v*" + - 'v*' jobs: release: diff --git a/.vscode/settings.json b/.vscode/settings.json index 4509464..48c2dd8 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -29,11 +29,11 @@ // "dist": true, ".vscode": true, - // ๐Ÿงช tests + // ๐Ÿงช tests "**/**/test": true, "**/**/tests": true, "**/**/*.specs.ts": true, - "**/**/*.specs.js": true, + "**/**/*.specs.js": true }, "scss.lint.emptyRules": "ignore" -} \ No newline at end of file +} diff --git a/CHANGELOG.md b/CHANGELOG.md index 3a69710..dedaee6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,9 +5,11 @@ 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 + +- 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. + +- Pinned the project to the Gitea 1.22.3 version. diff --git a/README.md b/README.md index 7e771c9..d83af15 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ zeldon โ€บ Gitea theme -*Theme for `zeldon's` gitea server.* +_Theme for `zeldon's` gitea server._ ## Preview @@ -26,19 +26,21 @@ DEFAULT_THEME=dark # optional ## Credits -- [`catppuccin/gitea`](https://github.com/catppuccin/gitea), these themes are based on them. -- [`Blender's Bthree Dark`](https://projects.blender.org/infrastructure/gitea-custom), base color scheme and templates. -- [`lucas-labs/gitea-lugit-theme`](https://github.com/lucas-labs/gitea-lugit-theme), direct codebase fork. +- [`catppuccin/gitea`](https://github.com/catppuccin/gitea), these themes are based on them. +- [`Blender's Bthree Dark`](https://projects.blender.org/infrastructure/gitea-custom), base color scheme and templates. +- [`lucas-labs/gitea-lugit-theme`](https://github.com/lucas-labs/gitea-lugit-theme), direct codebase fork. ## Development ### build + ```bash $ npm install $ npm run build ``` ### serve + ```bash $ npm run serve -- --server path/to/gitea/custom @@ -52,4 +54,4 @@ $ npm run serve -- -- --server c:/gitea/custom ## Contributing -Feel free to open an issue or a pull request. Contributions are welcome! \ No newline at end of file +Feel free to open an issue or a pull request. Contributions are welcome! diff --git a/src/themes/scss/_utils/_color-utils.scss b/src/themes/scss/_utils/_color-utils.scss index 1a3df5b..d17a5a9 100644 --- a/src/themes/scss/_utils/_color-utils.scss +++ b/src/themes/scss/_utils/_color-utils.scss @@ -11,9 +11,9 @@ @function color-variants-light($color, $with-base: false) { $set: ( - '3%': light-change($color, -3%), - '6%': light-change($color, -6%), - '9%': light-change($color, -9%), + '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%), @@ -33,21 +33,26 @@ '85%': light-change($color, -85%), '90%': light-change($color, -90%), '95%': light-change($color, -95%), - '100%': light-change($color, -100%) + '100%': light-change($color, -100%), ); @if $with-base { - $set: map.merge((base: $color), $set); + $set: map.merge( + ( + base: $color, + ), + $set + ); } - @return $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%), + '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%), @@ -67,34 +72,59 @@ '85%': light-change($color, 85%), '90%': light-change($color, 90%), '95%': light-change($color, 95%), - '100%': light-change($color, 100%) + '100%': light-change($color, 100%), ); @if $with-base { - $set: map.merge((base: $color), $set); + $set: map.merge( + ( + base: $color, + ), + $set + ); } - @return $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))); + $set: map.merge( + $set, + ( + light: color-variants-light($color), + ) + ); } @if $dark { - $set: map.merge($set, (dark: color-variants-dark($color))); + $set: map.merge( + $set, + ( + dark: color-variants-dark($color), + ) + ); } @if $base { @if $override-base-with { - $set: map.merge($set, (base: $override-base-with)); + $set: map.merge( + $set, + ( + base: $override-base-with, + ) + ); } @else { - $set: map.merge($set, (base: $color)); + $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 index c7c4e38..33a9d02 100644 --- a/src/themes/scss/_vars.scss +++ b/src/themes/scss/_vars.scss @@ -1,17 +1,26 @@ $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"', + 'xs': 0.714rem, + 'sm': 0.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, @@ -32,5 +41,5 @@ $variables: ( ), 'repo-home': ( 'sidebar-width': 296px, - ) -); \ No newline at end of file + ), +); diff --git a/src/themes/scss/auto.scss b/src/themes/scss/auto.scss index 77aaa37..d7511e3 100644 --- a/src/themes/scss/auto.scss +++ b/src/themes/scss/auto.scss @@ -1,2 +1,2 @@ -@import "./theme-light.css" (prefers-color-scheme: light); -@import "./theme-dark.css" (prefers-color-scheme: dark); \ No newline at end of file +@import './theme-light.css' (prefers-color-scheme: light); +@import './theme-dark.css' (prefers-color-scheme: dark); diff --git a/src/themes/scss/dark.scss b/src/themes/scss/dark.scss index 58d6b28..764450d 100644 --- a/src/themes/scss/dark.scss +++ b/src/themes/scss/dark.scss @@ -7,50 +7,53 @@ $is-dark: true; $brand: hsl(204deg, 90%, 60%); $colors: ( - primary: c.variants($brand), + primary: c.variants($brand), secondary: c.variants(hsl(213, 12%, 25%)), text: #bbc0ca, subtle: hsl(224, 9.2%, 60%), palette: ( - 'red': c.variants(hsl(0, 56.4%, 50%)), - 'orange': c.variants(hsl(23.8, 89%, 38%)), - 'yellow': c.variants(hsl(44.8, 97%, 38%)), - 'olive': c.variants(hsl(67.5, 79.1%, 32%)), - 'green': c.variants(hsl(124deg, 41%, 30%)), - 'teal': c.variants(hsl(177, 100%, 25%)), - 'blue': c.variants(hsl(206, 56%, 45%)), - 'violet': c.variants(hsl(259.2, 66.5%, 60%)), - 'purple': c.variants(hsl(285, 55.9%, 53%)), - 'pink': c.variants(hsl(326, 64.6%, 47%)), - 'brown': c.variants(hsl(23.4, 33%, 43%)), - 'black': c.variants(hsl(213, 21%, 12%)), - 'white': c.variants(#f0f0f0), + 'red': c.variants(hsl(0, 56.4%, 50%)), + 'orange': c.variants(hsl(23.8, 89%, 38%)), + 'yellow': c.variants(hsl(44.8, 97%, 38%)), + 'olive': c.variants(hsl(67.5, 79.1%, 32%)), + 'green': c.variants(hsl(124deg, 41%, 30%)), + 'teal': c.variants(hsl(177, 100%, 25%)), + 'blue': c.variants(hsl(206, 56%, 45%)), + 'violet': c.variants(hsl(259.2, 66.5%, 60%)), + 'purple': c.variants(hsl(285, 55.9%, 53%)), + 'pink': c.variants(hsl(326, 64.6%, 47%)), + 'brown': c.variants(hsl(23.4, 33%, 43%)), + 'black': c.variants(hsl(213, 21%, 12%)), + 'white': c.variants(#f0f0f0), ), elevation: ( - '1': hsl(213, 10%, 7%), - '2': hsl(213, 12%, 8%), - '3': hsl(213, 12%, 10%), - '4': hsl(213, 12%, 13%), - '5': hsl(213, 12%, 18%), - '6': hsl(213, 12%, 25%), - '7': hsl(213, 12%, 35%), - '8': hsl(213, 12%, 45%), - '9': hsl(213, 12%, 55%), + '1': hsl(213, 10%, 7%), + '2': hsl(213, 12%, 8%), + '3': hsl(213, 12%, 10%), + '4': hsl(213, 12%, 13%), + '5': hsl(213, 12%, 18%), + '6': hsl(213, 12%, 25%), + '7': hsl(213, 12%, 35%), + '8': hsl(213, 12%, 45%), + '9': hsl(213, 12%, 55%), '10': hsl(213, 12%, 65%), '11': hsl(213, 12%, 75%), '12': hsl(213, 12%, 85%), - ) + ), ); // init lui-micro, css-vars only (no reboot, no basic) @include lui.init( - $theme: (colors: $colors, variables: vars.$variables), + $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 +@include theme.make-theme($is-dark); diff --git a/src/themes/scss/light.scss b/src/themes/scss/light.scss index 2de837d..73b5670 100644 --- a/src/themes/scss/light.scss +++ b/src/themes/scss/light.scss @@ -7,50 +7,79 @@ $is-dark: false; $brand: #6296e2; $colors: ( - primary: c.variants($brand), + 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 - ), + 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 - ) + '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), + $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 +@include theme.make-theme($is-dark); diff --git a/src/themes/scss/theme/components/_avatar.scss b/src/themes/scss/theme/components/_avatar.scss index f8a53a3..8d52810 100644 --- a/src/themes/scss/theme/components/_avatar.scss +++ b/src/themes/scss/theme/components/_avatar.scss @@ -1,8 +1,10 @@ @mixin avatar { - img.ui.avatar, .ui.avatar img, .ui.avatar svg { + 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 index 49d3ee0..7b62329 100644 --- a/src/themes/scss/theme/components/_boxes.scss +++ b/src/themes/scss/theme/components/_boxes.scss @@ -8,11 +8,11 @@ border-radius: var(--border-radius); } - .ui.segment form >*:first-child { + .ui.segment form > *:first-child { margin-top: 0; } - .ui.segment form >*:last-child { + .ui.segment form > *:last-child { margin-bottom: 0; } @@ -20,16 +20,22 @@ 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) { + .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 { + .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 { + .ui.segments:not(.horizontal) > .segment:last-child, + .ui.horizontal.segments > .segment:last-child { border-radius: var(--border-radius); } } @@ -39,14 +45,17 @@ .content { background-color: var(--color-box-body); - >.comment-header, >.ui.segment { - &:before, &:after { + > .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; + padding: var.get('measure/.25x') var.get('measure/.25x') var.get('measure/.25x') + var.get('measure/1x') !important; .comment-header-left { .text { @@ -62,7 +71,7 @@ * { color: color.get('subtle') !important; } - + .label { height: var.get('measure/1.25x', 1.25rem) !important; padding: 0px var.get('measure/.375x') !important; @@ -73,12 +82,12 @@ } } - .comment-list .comment>.content>div:last-child { + .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 { + .comment-list .comment > .content > div:first-child { border-top-left-radius: var(--border-radius) !important; border-top-right-radius: var(--border-radius) !important; } @@ -86,4 +95,4 @@ .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 index 1a27735..feb5f30 100644 --- a/src/themes/scss/theme/components/_editor.scss +++ b/src/themes/scss/theme/components/_editor.scss @@ -8,7 +8,7 @@ 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; @@ -39,7 +39,8 @@ } .tab { - .EasyMDEContainer { // legacy editor + .EasyMDEContainer { + // legacy editor border: none !important; .editor-toolbar { @@ -47,7 +48,8 @@ } } - markdown-toolbar, .EasyMDEContainer .editor-toolbar { + markdown-toolbar, + .EasyMDEContainer .editor-toolbar { padding: 0 10px !important; .markdown-toolbar-group { @@ -67,12 +69,13 @@ } } - .markdown-toolbar-button, button { + .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; + transition: background-color 0.1s ease; border-radius: var.get('measure/.375x') !important; height: auto; min-width: fit-content; @@ -80,14 +83,14 @@ &:hover { background-color: color.get('elevation/5') !important; } - + // if has attribute level &[level] { width: 34px; } // if aria-checked is true - &[aria-checked="true"] { + &[aria-checked='true'] { background-color: color.get('elevation/4'); } } @@ -98,8 +101,9 @@ } } } - - textarea, .CodeMirror.cm-s-easymde.CodeMirror-wrap { + + textarea, + .CodeMirror.cm-s-easymde.CodeMirror-wrap { background-color: transparent !important; border: none !important; padding: var.get('measure/1x') var.get('measure/1x') !important; @@ -127,12 +131,15 @@ outline: none !important; } - .ui.tab.markup[data-tab-panel=markdown-previewer] { + .ui.tab.markup[data-tab-panel='markdown-previewer'] { border-bottom: 0px; } } - #comment-form, .edit-content-zone, .comment-form, .comment-code-cloud form { + #comment-form, + .edit-content-zone, + .comment-form, + .comment-code-cloud form { padding: 0 !important; border: none !important; diff --git a/src/themes/scss/theme/components/_file-content.scss b/src/themes/scss/theme/components/_file-content.scss index 604db84..4bea46c 100644 --- a/src/themes/scss/theme/components/_file-content.scss +++ b/src/themes/scss/theme/components/_file-content.scss @@ -8,7 +8,7 @@ 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'); } @@ -35,11 +35,15 @@ } } - .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) { + .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 index f92368d..0435e0c 100644 --- a/src/themes/scss/theme/components/_forms.scss +++ b/src/themes/scss/theme/components/_forms.scss @@ -8,4 +8,3 @@ @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 index caa84b6..8e6bb38 100644 --- a/src/themes/scss/theme/components/_labels.scss +++ b/src/themes/scss/theme/components/_labels.scss @@ -4,7 +4,7 @@ @mixin label-signed { .label.isSigned { font-size: var.get('font-size/sm') !important; - margin: 0px .25em !important; + margin: 0px 0.25em !important; padding: 0 !important; display: inline-flex !important; gap: 0px !important; @@ -14,7 +14,10 @@ --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-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; @@ -61,4 +64,4 @@ 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 index 91008a8..61ac214 100644 --- a/src/themes/scss/theme/components/_markup.scss +++ b/src/themes/scss/theme/components/_markup.scss @@ -3,17 +3,17 @@ @mixin markup { .markup { - .task-list-item input[type=checkbox] { - margin: 0 .5em .25em -1.4em; + .task-list-item input[type='checkbox'] { + margin: 0 0.5em 0.25em -1.4em; } - input[type=checkbox] { + 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); } @@ -22,7 +22,8 @@ --color-text: var(--color-primary-contrast); } - &:not([disabled]):hover, &:not([disabled]):active { + &:not([disabled]):hover, + &:not([disabled]):active { border-color: var(--color-secondary); background-color: color.get('elevation/6'); @@ -30,6 +31,6 @@ 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 index 7df6c4f..dbb8c7b 100644 --- a/src/themes/scss/theme/components/button/index.scss +++ b/src/themes/scss/theme/components/button/index.scss @@ -8,7 +8,8 @@ background-color: transparent !important; font-weight: normal; - button, .button { + button, + .button { border-color: color.get('elevation/6') !important; gap: var.get('measure/.5x') !important; border-radius: var(--border-radius); @@ -16,17 +17,18 @@ &:hover { border-color: color.get('elevation/7') !important; - +.label { + + .label { border-left-color: color.get('elevation/7') !important; } } } &.labeled { - button, .button { + button, + .button { border-top-right-radius: 0; border-bottom-right-radius: 0; - } + } .label { border-color: color.get('elevation/6') !important; @@ -36,8 +38,7 @@ 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; } @@ -50,19 +51,21 @@ } @mixin gitea-button { - .ui.icon.buttons .button, .ui.icon.button:not(.compact) { + .ui.icon.buttons .button, + .ui.icon.button:not(.compact) { // padding: 50px; } .code-comment-buttons-buttons { button:not(.labeled):not(.icon) { - padding: .78571429em !important; + padding: 0.78571429em !important; } } // buttons group .ui.buttons { - &.icon .button, &.icon:not(.compact) { + &.icon .button, + &.icon:not(.compact) { padding: 50px 50px; } @@ -90,7 +93,7 @@ .ui.button { border-radius: var(--border-radius); - transition: color .1s ease, background-color .1s ease, border-color .1s ease; + transition: color 0.1s ease, background-color 0.1s ease, border-color 0.1s ease; padding: calc(#{var.get('measure/.375x')} - 1px) var.get('measure/1x'); font-size: var.get('font-size/md'); line-height: 20px; @@ -104,7 +107,8 @@ border-radius: var(--border-radius); } - &.red, &.red.basic { + &.red, + &.red.basic { border-color: var(--color-secondary); background: var(--color-button); color: var(--color-red); @@ -119,7 +123,9 @@ } } - &.primary, &.red, &.basic { + &.primary, + &.red, + &.basic { font-weight: 500; } @@ -127,5 +133,5 @@ color: var(--color-white); background: var(--color-green-dark-2); } - } -} \ 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 index bb6eb88..f988b50 100644 --- a/src/themes/scss/theme/components/forms/_input.scss +++ b/src/themes/scss/theme/components/forms/_input.scss @@ -4,21 +4,21 @@ @mixin -all-inputs($state: null) { input#{$state}, textarea#{$state}, - .ui.input>input#{$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.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; } @@ -31,8 +31,8 @@ border-radius: var(--border-radius); line-height: 20px; padding: calc(#{var.get('measure/.375x')} - 1px) var.get('measure/.75x'); - - +.ui.button:last-child { + + + .ui.button:last-child { border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } @@ -40,7 +40,7 @@ @include -all-inputs(':hover') { border-color: var(--color-input-border); - color: var(--color-input-text) + color: var(--color-input-text); } @include -all-inputs(':focus') { @@ -56,31 +56,31 @@ outline: 2px solid var(--color-accent); > input.search { - outline: none; + outline: none; } } - .ui.action.input:not([class*="left action"])>input:focus { + .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 { + .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 { + .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 { + .ui.form .field > label { margin: 0 0 var.get('measure/.375x'); font-size: var.get('font-size/md'); font-weight: 600; @@ -88,23 +88,23 @@ .ui.form textarea, .ui.form input:not([type]), - .ui.form input[type=date], - .ui.form input[type=datetime-local], - .ui.form input[type=email], - .ui.form input[type=number], - .ui.form input[type=password], - .ui.form input[type=search], - .ui.form input[type=tel], - .ui.form input[type=time], - .ui.form input[type=text], - .ui.form input[type=file], - .ui.form input[type=url] { + .ui.form input[type='date'], + .ui.form input[type='datetime-local'], + .ui.form input[type='email'], + .ui.form input[type='number'], + .ui.form input[type='password'], + .ui.form input[type='search'], + .ui.form input[type='tel'], + .ui.form input[type='time'], + .ui.form input[type='text'], + .ui.form input[type='file'], + .ui.form input[type='url'] { min-height: 2.71428571em; } - + .ui.selection.dropdown { min-height: 2.71428571em; - >input { + > input { min-height: 0; &:focus { outline: none; @@ -112,16 +112,18 @@ } } - .ui.multiple.dropdown>.label, .ui.multiple.search.dropdown>input.search { + .ui.multiple.dropdown > .label, + .ui.multiple.search.dropdown > input.search { padding: var.get('measure/.375x') var.get('measure/.75x'); - margin: .14285714rem .28571429rem .14285714rem 0; + margin: 0.14285714rem 0.28571429rem 0.14285714rem 0; } - .ui.multiple.search.dropdown>input.search { + .ui.multiple.search.dropdown > input.search { padding-left: 0; } - .ui.checkbox label, .ui.radio.checkbox label { + .ui.checkbox label, + .ui.radio.checkbox label { margin-left: 20px !important; } -} \ 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 index 5d5264a..c39a28e 100644 --- a/src/themes/scss/theme/components/forms/_menu.scss +++ b/src/themes/scss/theme/components/forms/_menu.scss @@ -4,18 +4,23 @@ @mixin dropdown-menu { .ui.dropdown { // dropdown menu - >.menu { + > .menu { --border-radius: #{var.get('measure/.75x')}; opacity: 0; overflow-x: hidden; - &.hidden { opacity: 0 !important;} - &.visible, &.show { opacity: 1 !important; } + &.hidden { + opacity: 0 !important; + } + &.visible, + &.show { + 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; + transition: opacity 0.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; @@ -47,7 +52,8 @@ } } - input[type="text"], input[name="search"] { + input[type='text'], + input[name='search'] { --color-input-background: #{color.get('elevation/1')}; --color-input-border: #{color.get('elevation/5')}; @@ -62,9 +68,9 @@ } .scrolling.menu { - .item { + .item { gap: var.get('measure/.5x') !important; - + &:hover { &:before { position: absolute; @@ -72,12 +78,12 @@ left: -8px; width: 4px; height: 24px; - content: ""; + content: ''; background-color: var(--color-accent); border-radius: 6px; } } - + .item-check-mark { background-color: color.get('elevation/6'); visibility: visible !important; @@ -85,12 +91,12 @@ 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'); @@ -105,11 +111,11 @@ text-overflow: ellipsis; } } - + &.checked { .item-check-mark { background-color: var(--color-accent); - + svg { visibility: visible; } @@ -121,25 +127,29 @@ // if not .upward &:not(.upward) { - >.menu { + > .menu { top: calc(100% + var.get('measure/.5x')) !important; } } &.upward { - >.menu { + > .menu { bottom: calc(100% + var.get('measure/.5x')) !important; } } - &.upward.selection.visible, &.active.upward.selection { + &.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 { + &.selection.active, + &.selection.active:hover, + &.selection.active .menu, + &.selection.active:hover .menu { border-color: var(--color-secondary) !important; } @@ -148,7 +158,8 @@ --border-radius: #{var.get('measure/.5x')}; border-radius: var(--border-radius) !important; - &:focus, &.active { + &:focus, + &.active { border-color: var(--color-secondary) !important; outline: 2px solid var(--color-accent); } @@ -157,7 +168,7 @@ border-radius: var(--border-radius) !important; } - >.menu { + > .menu { border-radius: var(--border-radius) !important; border-top-width: 1px !important; border-color: var(--color-secondary) !important; @@ -180,7 +191,7 @@ .ui.menu { border-radius: var(--border-radius); - >.item:first-child { + > .item:first-child { border-radius: var(--border-radius) 0 0 var(--border-radius); } @@ -193,22 +204,24 @@ gap: var.get('measure/.25x'); &.vertical { - >.item { + > .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 { + .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 { + .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 index 9ff06ec..76a75b2 100644 --- a/src/themes/scss/theme/components/forms/index.scss +++ b/src/themes/scss/theme/components/forms/index.scss @@ -1,2 +1,2 @@ @forward './menu'; -@forward './input'; \ No newline at end of file +@forward './input'; diff --git a/src/themes/scss/theme/components/index.scss b/src/themes/scss/theme/components/index.scss index 6d1ee3a..0243288 100644 --- a/src/themes/scss/theme/components/index.scss +++ b/src/themes/scss/theme/components/index.scss @@ -5,4 +5,4 @@ @forward './avatar'; @forward './button'; @forward './boxes'; -@forward './markup'; \ No newline at end of file +@forward './markup'; diff --git a/src/themes/scss/theme/index.scss b/src/themes/scss/theme/index.scss index e8a935c..393e201 100644 --- a/src/themes/scss/theme/index.scss +++ b/src/themes/scss/theme/index.scss @@ -7,26 +7,26 @@ @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.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 + @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.syntax; // syntax highlighting - @include modules.settings; // settings & profile pages + + @include modules.syntax; // syntax highlighting + @include modules.settings; // settings & profile pages // customized pages - @include modules.repo; // repo page - @include modules.issues; // issues page + @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 e92b580..fe78ad5 100644 --- a/src/themes/scss/theme/modules/_chroma.scss +++ b/src/themes/scss/theme/modules/_chroma.scss @@ -2,99 +2,254 @@ @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'; + $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'); + $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'); .chroma { .code-inner { font: 14px var.get('code-font-family'); } - .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 + .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')}, 0.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 e1ae601..63ccc1d 100644 --- a/src/themes/scss/theme/modules/_codemirror.scss +++ b/src/themes/scss/theme/modules/_codemirror.scss @@ -5,15 +5,15 @@ .CodeMirror.cm-s-default, .CodeMirror.cm-s-paper { .cm-property { - color: color.get('text') + color: color.get('text'); } .cm-header { - color: color.get('text') + color: color.get('text'); } .cm-quote { - color: color.get('palette/green/base') + color: color.get('palette/green/base'); } .cm-keyword { @@ -29,7 +29,7 @@ } .cm-def { - color: color.get('text') + color: color.get('text'); } .cm-variable-2 { @@ -41,15 +41,15 @@ } .cm-comment { - color: color.get('elevation/6') + color: color.get('elevation/6'); } .cm-string { - color: color.get('palette/green/base') + color: color.get('palette/green/base'); } .cm-string-2 { - color: color.get('palette/green/base') + color: color.get('palette/green/base'); } .cm-meta { @@ -65,7 +65,7 @@ } .cm-bracket { - color: color.get('text') + color: color.get('text'); } .cm-tag { diff --git a/src/themes/scss/theme/modules/_monaco.scss b/src/themes/scss/theme/modules/_monaco.scss index 7316de8..1ec6f2d 100644 --- a/src/themes/scss/theme/modules/_monaco.scss +++ b/src/themes/scss/theme/modules/_monaco.scss @@ -14,7 +14,7 @@ $green: #{color.get('palette/green/base')}; $blue: #{color.get('palette/blue/base')}; $pink: #{color.get('palette/pink/base')}; - + .monaco-editor { --vscode-editor-background: #{$mantle} !important; --vscode-editorGutter-background: #{$mantle} !important; diff --git a/src/themes/scss/theme/modules/_syntax.scss b/src/themes/scss/theme/modules/_syntax.scss index 4ceea2b..26a97ca 100644 --- a/src/themes/scss/theme/modules/_syntax.scss +++ b/src/themes/scss/theme/modules/_syntax.scss @@ -1,469 +1,433 @@ @mixin syntax { - /* Code syntax highlighting. */ - .tag-code .code-inner { - opacity: 0.5; - } + /* Code syntax highlighting. */ + .tag-code .code-inner { + opacity: 0.5; + } - .same-code .lines-num.lines-num-old, - .same-code .lines-num.lines-num-new { - color: var(--color-text-light-3) !important; - } + .same-code .lines-num.lines-num-old, + .same-code .lines-num.lines-num-new { + color: var(--color-text-light-3) !important; + } - .add-code .lines-num.lines-num-old, - .add-code .lines-num.lines-num-new { - background-color: var(--color-diff-added-row-linesnum-bg); - color: var(--color-text-dark-2) !important; - } + .add-code .lines-num.lines-num-old, + .add-code .lines-num.lines-num-new { + background-color: var(--color-diff-added-row-linesnum-bg); + color: var(--color-text-dark-2) !important; + } - .del-code .lines-num.lines-num-old, - .diff-unified .del-code .lines-num.lines-num-old, - .del-code .lines-num.lines-num-new { - background-color: var(--color-diff-removed-row-linesnum-bg); - color: var(--color-text-dark-2) !important; - } + .del-code .lines-num.lines-num-old, + .diff-unified .del-code .lines-num.lines-num-old, + .del-code .lines-num.lines-num-new { + background-color: var(--color-diff-removed-row-linesnum-bg); + color: var(--color-text-dark-2) !important; + } - .repository - .diff-file-box - .file-body.file-code - table - tbody - tr.add-code:hover - .lines-num, - .repository - .diff-file-box - .file-body.file-code - table - tbody - tr.del-code:hover - .lines-num, - .repository - .diff-file-box - .file-body.file-code - table - tbody - tr.same-code:hover - .lines-num, - .repository - .diff-file-box - .file-body.file-code - table - tbody - .diff-unified - tr:hover - .del-code - .lines-num { - color: var(--color-text-dark) !important; - } + .repository .diff-file-box .file-body.file-code table tbody tr.add-code:hover .lines-num, + .repository .diff-file-box .file-body.file-code table tbody tr.del-code:hover .lines-num, + .repository .diff-file-box .file-body.file-code table tbody tr.same-code:hover .lines-num, + .repository + .diff-file-box + .file-body.file-code + table + tbody + .diff-unified + tr:hover + .del-code + .lines-num { + color: var(--color-text-dark) !important; + } - .repository - .diff-file-box - .file-body.file-code - table - tbody - tr.same-code:hover - .lines-num { - color: var(--color-text-dark-2) !important; - } + .repository .diff-file-box .file-body.file-code table tbody tr.same-code:hover .lines-num { + color: var(--color-text-dark-2) !important; + } - .repository - .diff-file-box - .file-body.file-code - table - tbody - tr.same-code:hover - .lines-code, - .repository - .diff-file-box - .file-body.file-code - table - tbody - tr.same-code:hover - .lines-num, - .repository - .diff-file-box - .file-body.file-code - table - tbody - tr.same-code:hover - .lines-type-marker { - background-color: var(--color-code-line-bg-hover) !important; - } + .repository .diff-file-box .file-body.file-code table tbody tr.same-code:hover .lines-code, + .repository .diff-file-box .file-body.file-code table tbody tr.same-code:hover .lines-num, + .repository + .diff-file-box + .file-body.file-code + table + tbody + tr.same-code:hover + .lines-type-marker { + background-color: var(--color-code-line-bg-hover) !important; + } - /* From web_src/less/themes/chroma/dark.less */ - :root { - --color-syntax-NameBuiltinPseudo: #fabd2f; - --color-syntax-Comment: #777e94; - --color-syntax-CommentSingle: #777e94; - --color-syntax-CommentHashbang: #777e94; - --color-syntax-CommentMultiline: #777e94; - --color-syntax-CommentPreproc: #8ec07c; - --color-syntax-CommentPreprocFile: #649bc4; - --color-syntax-CommentSpecial: #9075cd; - --color-syntax-LiteralStringDelimiter: #649bc4; + /* From web_src/less/themes/chroma/dark.less */ + :root { + --color-syntax-NameBuiltinPseudo: #fabd2f; + --color-syntax-Comment: #777e94; + --color-syntax-CommentSingle: #777e94; + --color-syntax-CommentHashbang: #777e94; + --color-syntax-CommentMultiline: #777e94; + --color-syntax-CommentPreproc: #8ec07c; + --color-syntax-CommentPreprocFile: #649bc4; + --color-syntax-CommentSpecial: #9075cd; + --color-syntax-LiteralStringDelimiter: #649bc4; - --color-syntax-GenericDeleted-text: #fff; - --color-syntax-GenericDeleted-bg: #5f3737; - --color-syntax-GenericEmph: #ddee30; - --color-syntax-GenericHeading: #ffaa10; - --color-syntax-GenericInserted-text: #fff; - --color-syntax-GenericInserted-bg: #3a523a; - --color-syntax-GenericOutput: #777e94; - --color-syntax-GenericPrompt: #ebdbb2; - --color-syntax-GenericError: #ff4433; - --color-syntax-GenericStrong: #ebdbb2; - --color-syntax-GenericTraceback: #ff7540; - --color-syntax-GenericSubheading: #b8bb26; - --color-syntax-LineHighlight: #3f424d; - --color-syntax-LiteralNumberIntegerLong: #649bc4; - --color-syntax-Keyword: #f47067; - --color-syntax-KeywordConstant: #649bc4; - --color-syntax-KeywordDeclaration: #ff7540; - --color-syntax-KeywordNamespace: #ffaa10; - --color-syntax-KeywordPseudo: #5f8700; - --color-syntax-KeywordReserved: #ff7540; - --color-syntax-KeywordType: #fabd2f; - --color-syntax-LineNumbers: #7f8699; - --color-syntax-LineNumbersTable: #7f8699; - --color-syntax-LiteralNumber: #649bc4; - --color-syntax-LiteralNumberBin: #649bc4; - --color-syntax-LiteralNumberFloat: #649bc4; - --color-syntax-LiteralNumberHex: #649bc4; - --color-syntax-LiteralNumberInteger: #649bc4; - --color-syntax-LiteralNumberOct: #649bc4; - --color-syntax-Name: #adbac7; - --color-syntax-NameAttribute: #b8bb26; - --color-syntax-NameBuiltin: #fabd2f; - --color-syntax-NameClass: #f69d50; - --color-syntax-NameDecorator: #dcbdfb; - --color-syntax-NameException: #ff7540; - --color-syntax-NameFunction: #dcbdfb; - --color-syntax-NameEntity: #fabd2f; - --color-syntax-NameLabel: #ff7540; - --color-syntax-NameNamespace: #ffaa10; - --color-syntax-NameConstant: #649bc4; - --color-syntax-NameTag: #ff7540; - --color-syntax-NameVariable: #ebdbb2; - --color-syntax-NameOther: #b6bac5; - --color-syntax-Operator: #6cb6ff; - --color-syntax-OperatorWord: #6cb6ff; - --color-syntax-Punctuation: #d2d4db; - --color-syntax-LiteralString: #b8bb26; - --color-syntax-LiteralStringSingle: #96d0ff; - --color-syntax-LiteralStringDouble: #96d0ff; - --color-syntax-LiteralStringAffix: #649bc4; - --color-syntax-LiteralStringBacktick: #b8bb26; - --color-syntax-LiteralStringChar: #649bc4; - --color-syntax-LiteralStringDoc: #777e94; - --color-syntax-LiteralStringEscape: #ff7540; - --color-syntax-LiteralStringHeredoc: #649bc4; - --color-syntax-LiteralStringInterpol: #ffaa10; - --color-syntax-LiteralStringRegex: #9075cd; - --color-syntax-LiteralStringSymbol: #ff7540; - --color-syntax-LiteralStringOther: #ffaa10; - --color-syntax-NameVariableClass: #ff7540; - --color-syntax-NameVariableGlobal: #ffaa10; - --color-syntax-NameVariableInstance: #ffaa10; - --color-syntax-TextWhitespace: #7f8699; - } + --color-syntax-GenericDeleted-text: #fff; + --color-syntax-GenericDeleted-bg: #5f3737; + --color-syntax-GenericEmph: #ddee30; + --color-syntax-GenericHeading: #ffaa10; + --color-syntax-GenericInserted-text: #fff; + --color-syntax-GenericInserted-bg: #3a523a; + --color-syntax-GenericOutput: #777e94; + --color-syntax-GenericPrompt: #ebdbb2; + --color-syntax-GenericError: #ff4433; + --color-syntax-GenericStrong: #ebdbb2; + --color-syntax-GenericTraceback: #ff7540; + --color-syntax-GenericSubheading: #b8bb26; + --color-syntax-LineHighlight: #3f424d; + --color-syntax-LiteralNumberIntegerLong: #649bc4; + --color-syntax-Keyword: #f47067; + --color-syntax-KeywordConstant: #649bc4; + --color-syntax-KeywordDeclaration: #ff7540; + --color-syntax-KeywordNamespace: #ffaa10; + --color-syntax-KeywordPseudo: #5f8700; + --color-syntax-KeywordReserved: #ff7540; + --color-syntax-KeywordType: #fabd2f; + --color-syntax-LineNumbers: #7f8699; + --color-syntax-LineNumbersTable: #7f8699; + --color-syntax-LiteralNumber: #649bc4; + --color-syntax-LiteralNumberBin: #649bc4; + --color-syntax-LiteralNumberFloat: #649bc4; + --color-syntax-LiteralNumberHex: #649bc4; + --color-syntax-LiteralNumberInteger: #649bc4; + --color-syntax-LiteralNumberOct: #649bc4; + --color-syntax-Name: #adbac7; + --color-syntax-NameAttribute: #b8bb26; + --color-syntax-NameBuiltin: #fabd2f; + --color-syntax-NameClass: #f69d50; + --color-syntax-NameDecorator: #dcbdfb; + --color-syntax-NameException: #ff7540; + --color-syntax-NameFunction: #dcbdfb; + --color-syntax-NameEntity: #fabd2f; + --color-syntax-NameLabel: #ff7540; + --color-syntax-NameNamespace: #ffaa10; + --color-syntax-NameConstant: #649bc4; + --color-syntax-NameTag: #ff7540; + --color-syntax-NameVariable: #ebdbb2; + --color-syntax-NameOther: #b6bac5; + --color-syntax-Operator: #6cb6ff; + --color-syntax-OperatorWord: #6cb6ff; + --color-syntax-Punctuation: #d2d4db; + --color-syntax-LiteralString: #b8bb26; + --color-syntax-LiteralStringSingle: #96d0ff; + --color-syntax-LiteralStringDouble: #96d0ff; + --color-syntax-LiteralStringAffix: #649bc4; + --color-syntax-LiteralStringBacktick: #b8bb26; + --color-syntax-LiteralStringChar: #649bc4; + --color-syntax-LiteralStringDoc: #777e94; + --color-syntax-LiteralStringEscape: #ff7540; + --color-syntax-LiteralStringHeredoc: #649bc4; + --color-syntax-LiteralStringInterpol: #ffaa10; + --color-syntax-LiteralStringRegex: #9075cd; + --color-syntax-LiteralStringSymbol: #ff7540; + --color-syntax-LiteralStringOther: #ffaa10; + --color-syntax-NameVariableClass: #ff7540; + --color-syntax-NameVariableGlobal: #ffaa10; + --color-syntax-NameVariableInstance: #ffaa10; + --color-syntax-TextWhitespace: #7f8699; + } - .chroma .bp { - color: var(--color-syntax-NameBuiltinPseudo); - } /* NameBuiltinPseudo */ - .chroma .c { - color: var(--color-syntax-Comment); - } /* Comment */ - .chroma .c1 { - color: var(--color-syntax-CommentSingle); - } /* CommentSingle */ - .chroma .ch { - color: var(--color-syntax-CommentHashbang); - } /* CommentHashbang */ - .chroma .cm { - color: var(--color-syntax-CommentMultiline); - } /* CommentMultiline */ - .chroma .cp { - color: var(--color-syntax-CommentPreproc); - } /* CommentPreproc */ - .chroma .cpf { - color: var(--color-syntax-CommentPreprocFile); - } /* CommentPreprocFile */ - .chroma .cs { - color: var(--color-syntax-CommentSpecial); - } /* CommentSpecial */ - .chroma .dl { - color: var(--color-syntax-LiteralStringDelimiter); - } /* LiteralStringDelimiter */ - .chroma .gd { - color: var(--color-syntax-GenericDeleted-text); - background-color: var(--color-syntax-GenericDeleted-bg); - } /* GenericDeleted */ - .chroma .ge { - color: var(--color-syntax-GenericEmph); - } /* GenericEmph */ - .chroma .gh { - color: var(--color-syntax-GenericHeading); - } /* GenericHeading */ - .chroma .gi { - color: var(--color-syntax-GenericInserted-text); - background-color: var(--color-syntax-GenericInserted-bg); - } /* GenericInserted */ - .chroma .go { - color: var(--color-syntax-GenericOutput); - } /* GenericOutput */ - .chroma .gp { - color: var(--color-syntax-GenericPrompt); - } /* GenericPrompt */ - .chroma .gr { - color: var(--color-syntax-GenericError); - } /* GenericError */ - .chroma .gs { - color: var(--color-syntax-GenericStrong); - } /* GenericStrong */ - .chroma .gt { - color: var(--color-syntax-GenericTraceback); - } /* GenericTraceback */ - .chroma .gu { - color: var(--color-syntax-GenericSubheading); - } /* GenericSubheading */ - .chroma .hl { - background-color: var(--color-syntax-LineHighlight); - } /* LineHighlight */ - .chroma .il { - color: var(--color-syntax-LiteralNumberIntegerLong); - } /* LiteralNumberIntegerLong */ - .chroma .k { - color: var(--color-syntax-Keyword); - } /* Keyword */ - .chroma .kc { - color: var(--color-syntax-KeywordConstant); - } /* KeywordConstant */ - .chroma .kd { - color: var(--color-syntax-KeywordDeclaration); - } /* KeywordDeclaration */ - .chroma .kn { - color: var(--color-syntax-KeywordNamespace); - } /* KeywordNamespace */ - .chroma .kp { - color: var(--color-syntax-KeywordPseudo); - } /* KeywordPseudo */ - .chroma .kr { - color: var(--color-syntax-KeywordReserved); - } /* KeywordReserved */ - .chroma .kt { - color: var(--color-syntax-KeywordType); - } /* KeywordType */ - .chroma .ln { - color: var(--color-syntax-LineNumbers); - } /* LineNumbers */ - .chroma .lnt { - color: var(--color-syntax-LineNumbersTable); - } /* LineNumbersTable */ - .chroma .m { - color: var(--color-syntax-LiteralNumber); - } /* LiteralNumber */ - .chroma .mb { - color: var(--color-syntax-LiteralNumberBin); - } /* LiteralNumberBin */ - .chroma .mf { - color: var(--color-syntax-LiteralNumberFloat); - } /* LiteralNumberFloat */ - .chroma .mh { - color: var(--color-syntax-LiteralNumberHex); - } /* LiteralNumberHex */ - .chroma .mi { - color: var(--color-syntax-LiteralNumberInteger); - } /* LiteralNumberInteger */ - .chroma .mo { - color: var(--color-syntax-LiteralNumberOct); - } /* LiteralNumberOct */ - .chroma .n { - color: var(--color-syntax-Name); - } /* Name */ - .chroma .na { - color: var(--color-syntax-NameAttribute); - } /* NameAttribute */ - .chroma .nb { - color: var(--color-syntax-NameBuiltin); - } /* NameBuiltin */ - .chroma .nc { - color: var(--color-syntax-NameClass); - } /* NameClass */ - .chroma .nd { - color: var(--color-syntax-NameDecorator); - } /* NameDecorator */ - .chroma .ne { - color: var(--color-syntax-NameException); - } /* NameException */ - .chroma .nf { - color: var(--color-syntax-NameFunction); - } /* NameFunction */ - .chroma .ni { - color: var(--color-syntax-NameEntity); - } /* NameEntity */ - .chroma .nl { - color: var(--color-syntax-NameLabel); - } /* NameLabel */ - .chroma .nn { - color: var(--color-syntax-NameNamespace); - } /* NameNamespace */ - .chroma .no { - color: var(--color-syntax-NameConstant); - } /* NameConstant */ - .chroma .nt { - color: var(--color-syntax-NameTag); - } /* NameTag */ - .chroma .nv { - color: var(--color-syntax-NameVariable); - } /* NameVariable */ - .chroma .nx { - color: var(--color-syntax-NameOther); - } /* NameOther */ - .chroma .o { - color: var(--color-syntax-Operator); - } /* Operator */ - .chroma .ow { - color: var(--color-syntax-OperatorWord); - } /* OperatorWord */ - .chroma .p { - color: var(--color-syntax-Punctuation); - } /* Punctuation */ - .chroma .s { - color: var(--color-syntax-LiteralString); - } /* LiteralString */ - .chroma .s1 { - color: var(--color-syntax-LiteralStringSingle); - } /* LiteralStringSingle */ - .chroma .s2 { - color: var(--color-syntax-LiteralStringDouble); - } /* LiteralStringDouble */ - .chroma .sa { - color: var(--color-syntax-LiteralStringAffix); - } /* LiteralStringAffix */ - .chroma .sb { - color: var(--color-syntax-LiteralStringBacktick); - } /* LiteralStringBacktick */ - .chroma .sc { - color: var(--color-syntax-LiteralStringChar); - } /* LiteralStringChar */ - .chroma .sd { - color: var(--color-syntax-LiteralStringDoc); - } /* LiteralStringDoc */ - .chroma .se { - color: var(--color-syntax-LiteralStringEscape); - } /* LiteralStringEscape */ - .chroma .sh { - color: var(--color-syntax-LiteralStringHeredoc); - } /* LiteralStringHeredoc */ - .chroma .si { - color: var(--color-syntax-LiteralStringInterpol); - } /* LiteralStringInterpol */ - .chroma .sr { - color: var(--color-syntax-LiteralStringRegex); - } /* LiteralStringRegex */ - .chroma .ss { - color: var(--color-syntax-LiteralStringSymbol); - } /* LiteralStringSymbol */ - .chroma .sx { - color: var(--color-syntax-LiteralStringOther); - } /* LiteralStringOther */ - .chroma .vc { - color: var(--color-syntax-NameVariableClass); - } /* NameVariableClass */ - .chroma .vg { - color: var(--color-syntax-NameVariableGlobal); - } /* NameVariableGlobal */ - .chroma .vi { - color: var(--color-syntax-NameVariableInstance); - } /* NameVariableInstance */ - .chroma .w { - color: var(--color-syntax-TextWhitespace); - } /* TextWhitespace */ + .chroma .bp { + color: var(--color-syntax-NameBuiltinPseudo); + } /* NameBuiltinPseudo */ + .chroma .c { + color: var(--color-syntax-Comment); + } /* Comment */ + .chroma .c1 { + color: var(--color-syntax-CommentSingle); + } /* CommentSingle */ + .chroma .ch { + color: var(--color-syntax-CommentHashbang); + } /* CommentHashbang */ + .chroma .cm { + color: var(--color-syntax-CommentMultiline); + } /* CommentMultiline */ + .chroma .cp { + color: var(--color-syntax-CommentPreproc); + } /* CommentPreproc */ + .chroma .cpf { + color: var(--color-syntax-CommentPreprocFile); + } /* CommentPreprocFile */ + .chroma .cs { + color: var(--color-syntax-CommentSpecial); + } /* CommentSpecial */ + .chroma .dl { + color: var(--color-syntax-LiteralStringDelimiter); + } /* LiteralStringDelimiter */ + .chroma .gd { + color: var(--color-syntax-GenericDeleted-text); + background-color: var(--color-syntax-GenericDeleted-bg); + } /* GenericDeleted */ + .chroma .ge { + color: var(--color-syntax-GenericEmph); + } /* GenericEmph */ + .chroma .gh { + color: var(--color-syntax-GenericHeading); + } /* GenericHeading */ + .chroma .gi { + color: var(--color-syntax-GenericInserted-text); + background-color: var(--color-syntax-GenericInserted-bg); + } /* GenericInserted */ + .chroma .go { + color: var(--color-syntax-GenericOutput); + } /* GenericOutput */ + .chroma .gp { + color: var(--color-syntax-GenericPrompt); + } /* GenericPrompt */ + .chroma .gr { + color: var(--color-syntax-GenericError); + } /* GenericError */ + .chroma .gs { + color: var(--color-syntax-GenericStrong); + } /* GenericStrong */ + .chroma .gt { + color: var(--color-syntax-GenericTraceback); + } /* GenericTraceback */ + .chroma .gu { + color: var(--color-syntax-GenericSubheading); + } /* GenericSubheading */ + .chroma .hl { + background-color: var(--color-syntax-LineHighlight); + } /* LineHighlight */ + .chroma .il { + color: var(--color-syntax-LiteralNumberIntegerLong); + } /* LiteralNumberIntegerLong */ + .chroma .k { + color: var(--color-syntax-Keyword); + } /* Keyword */ + .chroma .kc { + color: var(--color-syntax-KeywordConstant); + } /* KeywordConstant */ + .chroma .kd { + color: var(--color-syntax-KeywordDeclaration); + } /* KeywordDeclaration */ + .chroma .kn { + color: var(--color-syntax-KeywordNamespace); + } /* KeywordNamespace */ + .chroma .kp { + color: var(--color-syntax-KeywordPseudo); + } /* KeywordPseudo */ + .chroma .kr { + color: var(--color-syntax-KeywordReserved); + } /* KeywordReserved */ + .chroma .kt { + color: var(--color-syntax-KeywordType); + } /* KeywordType */ + .chroma .ln { + color: var(--color-syntax-LineNumbers); + } /* LineNumbers */ + .chroma .lnt { + color: var(--color-syntax-LineNumbersTable); + } /* LineNumbersTable */ + .chroma .m { + color: var(--color-syntax-LiteralNumber); + } /* LiteralNumber */ + .chroma .mb { + color: var(--color-syntax-LiteralNumberBin); + } /* LiteralNumberBin */ + .chroma .mf { + color: var(--color-syntax-LiteralNumberFloat); + } /* LiteralNumberFloat */ + .chroma .mh { + color: var(--color-syntax-LiteralNumberHex); + } /* LiteralNumberHex */ + .chroma .mi { + color: var(--color-syntax-LiteralNumberInteger); + } /* LiteralNumberInteger */ + .chroma .mo { + color: var(--color-syntax-LiteralNumberOct); + } /* LiteralNumberOct */ + .chroma .n { + color: var(--color-syntax-Name); + } /* Name */ + .chroma .na { + color: var(--color-syntax-NameAttribute); + } /* NameAttribute */ + .chroma .nb { + color: var(--color-syntax-NameBuiltin); + } /* NameBuiltin */ + .chroma .nc { + color: var(--color-syntax-NameClass); + } /* NameClass */ + .chroma .nd { + color: var(--color-syntax-NameDecorator); + } /* NameDecorator */ + .chroma .ne { + color: var(--color-syntax-NameException); + } /* NameException */ + .chroma .nf { + color: var(--color-syntax-NameFunction); + } /* NameFunction */ + .chroma .ni { + color: var(--color-syntax-NameEntity); + } /* NameEntity */ + .chroma .nl { + color: var(--color-syntax-NameLabel); + } /* NameLabel */ + .chroma .nn { + color: var(--color-syntax-NameNamespace); + } /* NameNamespace */ + .chroma .no { + color: var(--color-syntax-NameConstant); + } /* NameConstant */ + .chroma .nt { + color: var(--color-syntax-NameTag); + } /* NameTag */ + .chroma .nv { + color: var(--color-syntax-NameVariable); + } /* NameVariable */ + .chroma .nx { + color: var(--color-syntax-NameOther); + } /* NameOther */ + .chroma .o { + color: var(--color-syntax-Operator); + } /* Operator */ + .chroma .ow { + color: var(--color-syntax-OperatorWord); + } /* OperatorWord */ + .chroma .p { + color: var(--color-syntax-Punctuation); + } /* Punctuation */ + .chroma .s { + color: var(--color-syntax-LiteralString); + } /* LiteralString */ + .chroma .s1 { + color: var(--color-syntax-LiteralStringSingle); + } /* LiteralStringSingle */ + .chroma .s2 { + color: var(--color-syntax-LiteralStringDouble); + } /* LiteralStringDouble */ + .chroma .sa { + color: var(--color-syntax-LiteralStringAffix); + } /* LiteralStringAffix */ + .chroma .sb { + color: var(--color-syntax-LiteralStringBacktick); + } /* LiteralStringBacktick */ + .chroma .sc { + color: var(--color-syntax-LiteralStringChar); + } /* LiteralStringChar */ + .chroma .sd { + color: var(--color-syntax-LiteralStringDoc); + } /* LiteralStringDoc */ + .chroma .se { + color: var(--color-syntax-LiteralStringEscape); + } /* LiteralStringEscape */ + .chroma .sh { + color: var(--color-syntax-LiteralStringHeredoc); + } /* LiteralStringHeredoc */ + .chroma .si { + color: var(--color-syntax-LiteralStringInterpol); + } /* LiteralStringInterpol */ + .chroma .sr { + color: var(--color-syntax-LiteralStringRegex); + } /* LiteralStringRegex */ + .chroma .ss { + color: var(--color-syntax-LiteralStringSymbol); + } /* LiteralStringSymbol */ + .chroma .sx { + color: var(--color-syntax-LiteralStringOther); + } /* LiteralStringOther */ + .chroma .vc { + color: var(--color-syntax-NameVariableClass); + } /* NameVariableClass */ + .chroma .vg { + color: var(--color-syntax-NameVariableGlobal); + } /* NameVariableGlobal */ + .chroma .vi { + color: var(--color-syntax-NameVariableInstance); + } /* NameVariableInstance */ + .chroma .w { + color: var(--color-syntax-TextWhitespace); + } /* TextWhitespace */ - /* From web_src/less/codemirror/dark.less */ - .CodeMirror.cm-s-default .cm-property, - .CodeMirror.cm-s-paper .cm-property { - color: #a0cc75; - } - .CodeMirror.cm-s-default .cm-header, - .CodeMirror.cm-s-paper .cm-header { - color: #9daccc; - } - .CodeMirror.cm-s-default .cm-quote, - .CodeMirror.cm-s-paper .cm-quote { - color: #009900; - } - .CodeMirror.cm-s-default .cm-keyword, - .CodeMirror.cm-s-paper .cm-keyword { - color: #cc8a61; - } - .CodeMirror.cm-s-default .cm-atom, - .CodeMirror.cm-s-paper .cm-atom { - color: #ef5e77; - } - .CodeMirror.cm-s-default .cm-number, - .CodeMirror.cm-s-paper .cm-number { - color: #ff5656; - } - .CodeMirror.cm-s-default .cm-def, - .CodeMirror.cm-s-paper .cm-def { - color: #e4e4e4; - } - .CodeMirror.cm-s-default .cm-variable-2, - .CodeMirror.cm-s-paper .cm-variable-2 { - color: #00bdbf; - } - .CodeMirror.cm-s-default .cm-variable-3, - .CodeMirror.cm-s-paper .cm-variable-3 { - color: #008855; - } - .CodeMirror.cm-s-default .cm-comment, - .CodeMirror.cm-s-paper .cm-comment { - color: #8e9ab3; - } - .CodeMirror.cm-s-default .cm-string, - .CodeMirror.cm-s-paper .cm-string { - color: #a77272; - } - .CodeMirror.cm-s-default .cm-string-2, - .CodeMirror.cm-s-paper .cm-string-2 { - color: #ff5500; - } - .CodeMirror.cm-s-default .cm-meta, - .CodeMirror.cm-s-default .cm-qualifier, - .CodeMirror.cm-s-paper .cm-meta, - .CodeMirror.cm-s-paper .cm-qualifier { - color: #ffb176; - } - .CodeMirror.cm-s-default .cm-builtin, - .CodeMirror.cm-s-paper .cm-builtin { - color: #b7c951; - } - .CodeMirror.cm-s-default .cm-bracket, - .CodeMirror.cm-s-paper .cm-bracket { - color: #999977; - } - .CodeMirror.cm-s-default .cm-tag, - .CodeMirror.cm-s-paper .cm-tag { - color: #f1d273; - } - .CodeMirror.cm-s-default .cm-attribute, - .CodeMirror.cm-s-paper .cm-attribute { - color: #bfcc70; - } - .CodeMirror.cm-s-default .cm-hr, - .CodeMirror.cm-s-paper .cm-hr { - color: #999999; - } - .CodeMirror.cm-s-default .cm-url, - .CodeMirror.cm-s-paper .cm-url { - color: #c5cfd0; - } - .CodeMirror.cm-s-default .cm-link, - .CodeMirror.cm-s-paper .cm-link { - color: #d8c792; - } - .CodeMirror.cm-s-default .cm-error, - .CodeMirror.cm-s-paper .cm-error { - color: #dbdbeb; - } -} \ No newline at end of file + /* From web_src/less/codemirror/dark.less */ + .CodeMirror.cm-s-default .cm-property, + .CodeMirror.cm-s-paper .cm-property { + color: #a0cc75; + } + .CodeMirror.cm-s-default .cm-header, + .CodeMirror.cm-s-paper .cm-header { + color: #9daccc; + } + .CodeMirror.cm-s-default .cm-quote, + .CodeMirror.cm-s-paper .cm-quote { + color: #009900; + } + .CodeMirror.cm-s-default .cm-keyword, + .CodeMirror.cm-s-paper .cm-keyword { + color: #cc8a61; + } + .CodeMirror.cm-s-default .cm-atom, + .CodeMirror.cm-s-paper .cm-atom { + color: #ef5e77; + } + .CodeMirror.cm-s-default .cm-number, + .CodeMirror.cm-s-paper .cm-number { + color: #ff5656; + } + .CodeMirror.cm-s-default .cm-def, + .CodeMirror.cm-s-paper .cm-def { + color: #e4e4e4; + } + .CodeMirror.cm-s-default .cm-variable-2, + .CodeMirror.cm-s-paper .cm-variable-2 { + color: #00bdbf; + } + .CodeMirror.cm-s-default .cm-variable-3, + .CodeMirror.cm-s-paper .cm-variable-3 { + color: #008855; + } + .CodeMirror.cm-s-default .cm-comment, + .CodeMirror.cm-s-paper .cm-comment { + color: #8e9ab3; + } + .CodeMirror.cm-s-default .cm-string, + .CodeMirror.cm-s-paper .cm-string { + color: #a77272; + } + .CodeMirror.cm-s-default .cm-string-2, + .CodeMirror.cm-s-paper .cm-string-2 { + color: #ff5500; + } + .CodeMirror.cm-s-default .cm-meta, + .CodeMirror.cm-s-default .cm-qualifier, + .CodeMirror.cm-s-paper .cm-meta, + .CodeMirror.cm-s-paper .cm-qualifier { + color: #ffb176; + } + .CodeMirror.cm-s-default .cm-builtin, + .CodeMirror.cm-s-paper .cm-builtin { + color: #b7c951; + } + .CodeMirror.cm-s-default .cm-bracket, + .CodeMirror.cm-s-paper .cm-bracket { + color: #999977; + } + .CodeMirror.cm-s-default .cm-tag, + .CodeMirror.cm-s-paper .cm-tag { + color: #f1d273; + } + .CodeMirror.cm-s-default .cm-attribute, + .CodeMirror.cm-s-paper .cm-attribute { + color: #bfcc70; + } + .CodeMirror.cm-s-default .cm-hr, + .CodeMirror.cm-s-paper .cm-hr { + color: #999999; + } + .CodeMirror.cm-s-default .cm-url, + .CodeMirror.cm-s-paper .cm-url { + color: #c5cfd0; + } + .CodeMirror.cm-s-default .cm-link, + .CodeMirror.cm-s-paper .cm-link { + color: #d8c792; + } + .CodeMirror.cm-s-default .cm-error, + .CodeMirror.cm-s-paper .cm-error { + color: #dbdbeb; + } +} diff --git a/src/themes/scss/theme/modules/index.scss b/src/themes/scss/theme/modules/index.scss index 9253054..4175a04 100644 --- a/src/themes/scss/theme/modules/index.scss +++ b/src/themes/scss/theme/modules/index.scss @@ -4,4 +4,4 @@ @forward './codemirror'; @forward './monaco'; @forward './settings'; -@forward './syntax'; \ No newline at end of file +@forward './syntax'; diff --git a/src/themes/scss/theme/modules/issues/_issue-sidebar.scss b/src/themes/scss/theme/modules/issues/_issue-sidebar.scss index 17c8a4a..140b1a3 100644 --- a/src/themes/scss/theme/modules/issues/_issue-sidebar.scss +++ b/src/themes/scss/theme/modules/issues/_issue-sidebar.scss @@ -3,12 +3,12 @@ @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 + --spc: #{var.get('measure/1x')}; // var(--spc) 16px + --spc-7_8: calc(var(--spc) * 0.875); // 7/8 of the base var(--spc-7_8) 14px + --spc-6_8: calc(var(--spc) * 0.75); // 6/8 = 3/4 of the base var(--spc-6_8) 12px + --spc-4_8: calc(var(--spc) * 0.5); // 4/8 = 1/2 of the base var(--spc-4_8) 8px + --spc-3_8: calc(var(--spc) * 0.375); // 3/8 of the base var(--spc-3_8) 6px + --spc-2_8: calc(var(--spc) * 0.25); // 2/8 = 1/4 of the base var(--spc-2_8) 4px display: flex; flex-direction: column; @@ -17,47 +17,58 @@ padding: 0 !important; // reset padding and margin for all children - >*, .issue-sidebar-combo>*, >text+*, >.ui>* { + > *, + .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 { + > .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 { + .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 { + 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 { + > .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; @@ -66,7 +77,7 @@ @include button.hollow; } - +.divider { + + .divider { border: none !important; margin: var(--spc-4_8) 0 !important; } @@ -74,7 +85,9 @@ .menu { --color-menu: #{color.get('elevation/3')}; - .branch-tag-item.active, .reference-list-menu, .reference-list-menu .item { + .branch-tag-item.active, + .reference-list-menu, + .reference-list-menu .item { --color-menu: #{color.get('elevation/4')} !important; } @@ -102,10 +115,10 @@ 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; + transition: background-color 0.1s ease; border-radius: var(--border-radius) !important; - >a { + > a { flex: 1; display: flex; justify-content: space-between; @@ -117,13 +130,13 @@ } &:hover { - background-color: rgba(#{color.get('elevation/6', 'rgb')}, .5); + background-color: rgba(#{color.get('elevation/6', 'rgb')}, 0.5); } } } // direct text children - >.text { + > .text { // background-color: orange !important; flex: 1; display: flex !important; @@ -154,12 +167,12 @@ .depending { // title - >.text { + > .text { display: inline-block; margin-bottom: var(--spc-6_8) !important; } - >p { + > p { margin-bottom: var(--spc-4_8) !important; } @@ -172,11 +185,12 @@ border: none !important; .item-left { - a { // issue - + a { + // issue } - div.text { // repo + div.text { + // repo font-size: var.get('font-size/xs') !important; } } @@ -240,12 +254,12 @@ } // input of type date - input[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; @@ -254,14 +268,16 @@ } // direct form child - >form, .form { + > form, + .form { display: flex; flex-direction: column; gap: var(--spc-4_8) !important; } // buttons at the end of the sidebar - >form button, >button { + > form button, + > button { font-size: var.get('font-size/sm') !important; border: none !important; background: transparent !important; @@ -280,7 +296,7 @@ } // if the data-modal attr is #sidebar-delete-issue, make the color red - &[data-modal="#sidebar-delete-issue"] { + &[data-modal='#sidebar-delete-issue'] { color: color.get('palette/red/base') !important; svg { color: color.get('palette/red/base') !important; @@ -291,4 +307,4 @@ } } } -} \ 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 index 5335929..af840de 100644 --- a/src/themes/scss/theme/modules/issues/_issue.scss +++ b/src/themes/scss/theme/modules/issues/_issue.scss @@ -23,7 +23,8 @@ color: color.get('subtle'); } - &:has(+ .ui.pull.tabs) { // if the next sibling is a tab (e.g. pull request tab selector) + &: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; @@ -37,14 +38,14 @@ .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-"]) { + &:not([class*='tw-bg-']) { color: var(--color-timeline-badge-fg) !important; } @@ -129,18 +130,18 @@ &:before { display: block; - content: ""; + content: ''; position: absolute; top: 0; bottom: 0; left: calc((var(--avatar-size) / 2) - 1px); top: 16px; - width: 3px; + width: 3px; background-color: var(--color-timeline); opacity: 50%; } - .comment.code-comment .content.comment-container{ + .comment.code-comment .content.comment-container { background-color: transparent !important; .header.comment-header { @@ -157,7 +158,7 @@ } .code-comment-buttons { - margin: 0!important; + margin: 0 !important; } .comment-form { @@ -180,14 +181,15 @@ margin-bottom: var.get('measure/1x'); } - .repository .diff-detail-box { // diff page detail box + .repository .diff-detail-box { + // diff page detail box padding: var.get('measure/.5x') 0; height: 60px; } .repository.view.issue .pull.tabs.container { + div { - >.diff-detail-box:first-child { + > .diff-detail-box:first-child { margin: calc(var.get('measure/1x') * -1) 0 0 0; } } @@ -203,11 +205,13 @@ 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 * { + .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 * { + .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); } @@ -220,7 +224,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; @@ -228,7 +232,7 @@ &:not(:first-child) { margin-top: var.get('measure/.5x'); } - + .field.footer { margin: 0 !important; padding: 0 !important; @@ -255,11 +259,12 @@ margin-bottom: var.get('measure/1x'); } - &:before, &:after { + &:before, + &:after { display: none; } } } } - } + } } diff --git a/src/themes/scss/theme/modules/issues/_list.scss b/src/themes/scss/theme/modules/issues/_list.scss index 781a097..25ee990 100644 --- a/src/themes/scss/theme/modules/issues/_list.scss +++ b/src/themes/scss/theme/modules/issues/_list.scss @@ -2,7 +2,8 @@ @use '@lucas-labs/lui-micro/color' as color; @mixin apply-styles { - .page-content.repository.issue-list, .page-content.dashboard.issues { + .page-content.repository.issue-list, + .page-content.dashboard.issues { .secondary-nav { 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 index deb0855..22d3c12 100644 --- a/src/themes/scss/theme/modules/issues/index.scss +++ b/src/themes/scss/theme/modules/issues/index.scss @@ -4,4 +4,4 @@ @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 index 6e07737..60169f0 100644 --- a/src/themes/scss/theme/modules/repo/_file-list.scss +++ b/src/themes/scss/theme/modules/repo/_file-list.scss @@ -15,12 +15,14 @@ padding: 0 0 0 var.get('measure/.5x'); .section { - &:first-of-type, &.active { + &:first-of-type, + &.active { font-weight: 600; } } - .breadcrumb-divider, button { + .breadcrumb-divider, + button { color: color.get('subtle') !important; } @@ -94,7 +96,6 @@ // readme #readme { - } .repository-summary .sub-menu .item { diff --git a/src/themes/scss/theme/modules/repo/_home.scss b/src/themes/scss/theme/modules/repo/_home.scss index 4fd608c..34598a3 100644 --- a/src/themes/scss/theme/modules/repo/_home.scss +++ b/src/themes/scss/theme/modules/repo/_home.scss @@ -13,7 +13,9 @@ margin-top: 0 !important; } - #repo-topics, #topic_edit, .label-list { + #repo-topics, + #topic_edit, + .label-list { row-gap: var.get('measure/.5x'); margin-top: 0 !important; @@ -27,26 +29,30 @@ padding-bottom: 0 !important; &:hover { - background-color: rgba(#{color.get('palette/blue/base', 'rgb')}, 0.3) !important; + 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') + .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 { + + 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; @@ -61,16 +67,18 @@ .repo-description { margin-top: 0 !important; - +a.flex-text-block { + + a.flex-text-block { margin-bottom: 0; } } - #repo-topics, #manage_topic, .flex-item-title { + #repo-topics, + #manage_topic, + .flex-item-title { display: none; } - .flex-item-body>div { + .flex-item-body > div { flex: 1; } } @@ -138,7 +146,8 @@ } } - .repo-home-sidebar-bottom, .repo-home-sidebar-top { + .repo-home-sidebar-bottom, + .repo-home-sidebar-top { padding-left: var.get('measure/1.5x'); @media (max-width: 768px) { @@ -165,11 +174,11 @@ } } - >.flex-list>.flex-item { + > .flex-list > .flex-item { padding-top: var.get('measure/1x'); padding-bottom: var.get('measure/1x'); - >.flex-item-main { + > .flex-item-main { gap: var.get('measure/1x'); } } @@ -241,7 +250,8 @@ display: none; } - .repository.file.editor .commit-form-wrapper .commit-form:before, .repository.file.editor .commit-form-wrapper .commit-form:after { + .repository.file.editor .commit-form-wrapper .commit-form:before, + .repository.file.editor .commit-form-wrapper .commit-form:after { display: none; } } diff --git a/src/themes/scss/theme/modules/repo/_secondary-navbar.scss b/src/themes/scss/theme/modules/repo/_secondary-navbar.scss index d3d6042..9f67a7f 100644 --- a/src/themes/scss/theme/modules/repo/_secondary-navbar.scss +++ b/src/themes/scss/theme/modules/repo/_secondary-navbar.scss @@ -16,7 +16,7 @@ // header .repo-header { margin: 0 0 var.get('measure/1x') 0; - + // repo image img.avatar { width: var.get('measure/2x') !important; @@ -89,7 +89,7 @@ font-weight: 500 !important; &:hover { - color: color.get('primary/base') !important; + color: color.get('primary/base') !important; } } @@ -97,7 +97,7 @@ a:last-child { font-size: var.get('font-size/md') !important; clear: left; - display: block; + display: block; } } } diff --git a/src/themes/scss/theme/modules/repo/index.scss b/src/themes/scss/theme/modules/repo/index.scss index a76311a..b774efb 100644 --- a/src/themes/scss/theme/modules/repo/index.scss +++ b/src/themes/scss/theme/modules/repo/index.scss @@ -6,4 +6,4 @@ @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 index 2595c99..c8fa3db 100644 --- a/src/themes/scss/theme/modules/settings/_pages.scss +++ b/src/themes/scss/theme/modules/settings/_pages.scss @@ -3,10 +3,12 @@ @use './section'; @mixin settings-pages { - .page-content.user.settings, .page-content.admin, .page-content.repository.settings { + .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; diff --git a/src/themes/scss/theme/modules/settings/index.scss b/src/themes/scss/theme/modules/settings/index.scss index 7282697..9eb012b 100644 --- a/src/themes/scss/theme/modules/settings/index.scss +++ b/src/themes/scss/theme/modules/settings/index.scss @@ -2,4 +2,4 @@ @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 index 4cde472..abc5035 100644 --- a/src/themes/scss/theme/modules/settings/section/_content.scss +++ b/src/themes/scss/theme/modules/settings/section/_content.scss @@ -25,7 +25,7 @@ .ui.segment { border-radius: var(--border-radius); - >*:last-child { + > *:last-child { margin-bottom: 0; padding-bottom: 0; } @@ -33,7 +33,7 @@ .ui.attached.segment { background: unset; - padding:0; + padding: 0; border: none; margin: 0; @@ -57,7 +57,9 @@ margin: 0 0 1em; } - .ui.form .fields .fields, .ui.form .field:last-child, .ui.form .fields:last-child .field { + .ui.form .fields .fields, + .ui.form .field:last-child, + .ui.form .fields:last-child .field { margin-bottom: 0; } @@ -77,11 +79,12 @@ margin-left: 0; margin-right: 0; - &:not(:first-child), &:first-child { + &: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 index 50300bd..97501ec 100644 --- a/src/themes/scss/theme/modules/settings/section/_nav.scss +++ b/src/themes/scss/theme/modules/settings/section/_nav.scss @@ -19,7 +19,8 @@ min-height: var(--min-height); } - a.item, details.item { + a.item, + details.item { min-height: var(--min-height); &:before { content: none; @@ -40,8 +41,8 @@ &:after { background: var(--color-primary); - border-radius: .375rem; - content: ""; + border-radius: 0.375rem; + content: ''; height: 24px; width: 4px; position: absolute; @@ -52,7 +53,8 @@ } } - a.item, details.item summary { + a.item, + details.item summary { padding: var(--spacing); border-radius: var(--border-radius); } @@ -64,7 +66,7 @@ &:after { color: color.get('subtle'); transform: scaleY(1); - transition: transform .12s linear; + transition: transform 0.12s linear; mask-image: var(--octicon-chevron-down); -webkit-mask-image: var(--octicon-chevron-down); } @@ -86,9 +88,9 @@ 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 index aa3adbd..3a3d47f 100644 --- a/src/themes/scss/theme/modules/settings/section/index.scss +++ b/src/themes/scss/theme/modules/settings/section/index.scss @@ -1,2 +1,2 @@ @forward './nav'; -@forward './content'; \ No newline at end of file +@forward './content'; diff --git a/src/themes/scss/theme/vars/_base.scss b/src/themes/scss/theme/vars/_base.scss index f9583b9..a066d00 100644 --- a/src/themes/scss/theme/vars/_base.scss +++ b/src/themes/scss/theme/vars/_base.scss @@ -26,24 +26,24 @@ --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: #{var.get('measure/.5x')}; --border-radius-medium: #{var.get('measure/1x')}; - --border-radius-full: calc(infinity * 1px); + --border-radius-full: calc(infinity * 1px); // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” // โ”‚ others โ”‚ // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ - --opacity-disabled: 0.55; - --height-loading: 16rem; + --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; + --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) { @@ -57,4 +57,4 @@ --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 index 18128b0..b76446b 100644 --- a/src/themes/scss/theme/vars/_colors.scss +++ b/src/themes/scss/theme/vars/_colors.scss @@ -61,15 +61,15 @@ --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-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%')}; @@ -112,41 +112,40 @@ // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” // โ”‚ named โ”‚ // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ - --color-red: #{color.get('palette/red/base')}; + --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-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')}; + --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))}; - + --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-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-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( + --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%') @@ -155,18 +154,18 @@ // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” // โ”‚ named โ”‚ ยป dark 1 variants // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ - --color-red-dark-1: #{color.get('palette/red/dark/10%')}; + --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-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( + --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%') @@ -175,135 +174,180 @@ // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” // โ”‚ named โ”‚ ยป dark 2 variants // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ - --color-red-dark-2: #{color.get('palette/red/dark/20%')}; + --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-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( + --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-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); + --color-ansi-bright-cyan: #00b6ad; + --color-ansi-bright-white: var(--color-console-fg); // โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” // โ”‚ other โ”‚ // โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ - --color-grey: #{color.get('elevation/9')}; + --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; + --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)}; + --color-diff-added-linenum-bg: #{if( + $is-dark, + #{color.get('palette/teal/dark/50%')}, + rgba(#{color.get('palette/white/base', 'rgb')}, 0.2) + )}; + --color-diff-added-row-bg: #{if( + $is-dark, + #{color.get('palette/teal/dark/60%')}, + rgba(#{color.get('palette/green/light/20%', 'rgb')}, 0.25) + )}; + --color-diff-added-row-border: #{if( + $is-dark, + #{color.get('palette/teal/dark/40%')}, + rgba(#{color.get('palette/green/light/25%', 'rgb')}, 0.25) + )}; + --color-diff-added-word-bg: #{if( + $is-dark, + #{color.get('palette/teal/dark/50%')}, + rgba(#{color.get('palette/green/light/6%', 'rgb')}, 0.3) + )}; + --color-diff-moved-row-bg: #{if( + $is-dark, + #{color.get('palette/yellow/dark/75%')}, + rgba(#{color.get('palette/yellow/light/20%', 'rgb')}, 0.25) + )}; + --color-diff-moved-row-border: #{if( + $is-dark, + #{color.get('palette/yellow/dark/65%')}, + rgba(#{color.get('palette/yellow/light/25%', 'rgb')}, 0.25) + )}; + --color-diff-removed-linenum-bg: #{if( + $is-dark, + #{color.get('palette/red/dark/60%')}, + rgba(#{color.get('palette/white/base', 'rgb')}, 0.2) + )}; + --color-diff-removed-row-bg: #{if( + $is-dark, + #{color.get('palette/red/dark/65%')}, + rgba(#{color.get('palette/red/light/30%', 'rgb')}, 0.15) + )}; + --color-diff-removed-row-border: #{if( + $is-dark, + #{color.get('palette/red/dark/50%')}, + rgba(#{color.get('palette/red/light/35%', 'rgb')}, 0.2) + )}; + --color-diff-removed-word-bg: #{if( + $is-dark, + #{color.get('palette/red/dark/55%')}, + rgba(#{color.get('palette/red/light/25%', 'rgb')}, 0.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-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')}; + --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-red-badge: #{color.get('palette/red/dark/20%')}; + --color-red-badge-bg: rgba(#{color.get('palette/red/dark/20%', 'rgb')}, 0.1); + --color-red-badge-hover-bg: rgba(#{color.get('palette/red/dark/20%', 'rgb')}, 0.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-green-badge: #{color.get('palette/green/base')}; + --color-green-badge-bg: rgba(#{color.get('palette/green/base', 'rgb')}, 0.1); + --color-green-badge-hover-bg: rgba(#{color.get('palette/green/base', 'rgb')}, 0.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-yellow-badge: #{color.get('palette/yellow/dark/10%')}; + --color-yellow-badge-bg: rgba(#{color.get('palette/yellow/dark/10%', 'rgb')}, 0.1); + --color-yellow-badge-hover-bg: rgba(#{color.get('palette/yellow/dark/10%', 'rgb')}, 0.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); + --color-orange-badge: #{color.get('palette/orange/dark/10%')}; + --color-orange-badge-bg: rgba(#{color.get('palette/orange/dark/10%', 'rgb')}, 0.1); + --color-orange-badge-hover-bg: rgba(#{color.get('palette/orange/dark/10%', 'rgb')}, 0.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-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'))}; + --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-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-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')}; + --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-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')}; @@ -315,10 +359,18 @@ --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: #{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-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')}; @@ -326,19 +378,29 @@ --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-reaction-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, 0.1); + --color-reaction-hover-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, 0.2); + --color-reaction-active-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, 0.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'))}; + --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); @@ -389,26 +451,26 @@ // // 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"] { + .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 index 8d5d581..1840e5b 100644 --- a/src/themes/scss/theme/vars/index.scss +++ b/src/themes/scss/theme/vars/index.scss @@ -1,2 +1,2 @@ @forward './base'; -@forward './colors'; \ No newline at end of file +@forward './colors'; diff --git a/tools/build.js b/tools/build.js index 02b21aa..7ea1db3 100644 --- a/tools/build.js +++ b/tools/build.js @@ -16,7 +16,7 @@ function exit(err) { if (err) { console.error(err); } else { - console.log('') + console.log(''); logger.info('Build completed successfully'); } diff --git a/tools/minimize-css.js b/tools/minimize-css.js index 9775a13..93ab852 100644 --- a/tools/minimize-css.js +++ b/tools/minimize-css.js @@ -1,4 +1,4 @@ -import { optimizeCss } from "./tasks/optimize-css.js"; +import { optimizeCss } from './tasks/optimize-css.js'; import { cwd } from 'process'; import { join } from 'path'; @@ -8,9 +8,10 @@ const distPath = join(cwd(), 'dist'); // useful to check issues with the css files optimization // (in order to use this script, you need to first build the project removing the // optimization step from the build.js file) -optimizeCss(distPath, false).then(() => { - console.log('Optimization completed'); -}).catch((err) => { - console.error(err); -}); - +optimizeCss(distPath, false) + .then(() => { + console.log('Optimization completed'); + }) + .catch((err) => { + console.error(err); + }); diff --git a/tools/serve.js b/tools/serve.js index 807a86b..5c18e12 100644 --- a/tools/serve.js +++ b/tools/serve.js @@ -30,12 +30,6 @@ const watcher = watch([`${src}/**/*`], { ignoreInitial: true, }); -watcher.on('change', (file) => debouncer.add( - deploy, - srcPath, - distPath, - serverPath, - serviceName, - file, - true -)); +watcher.on('change', (file) => + debouncer.add(deploy, srcPath, distPath, serverPath, serviceName, file, true) +); diff --git a/tools/tasks/deploy.js b/tools/tasks/deploy.js index 3605fff..0d343b7 100644 --- a/tools/tasks/deploy.js +++ b/tools/tasks/deploy.js @@ -4,22 +4,29 @@ import { buildFonts } from './fonts.js'; import { buildTemplates } from './templates.js'; import { copyTo } from './copy-to.js'; import { restartService } from './restart-service.js'; -import { extname } from 'path'; +import { extname } from 'path'; import browsersync from 'browser-sync'; import { optimizeCss } from './optimize-css.js'; const logger = new Logger('deploy', 'info', 'brightMagenta'); -const sync = browsersync.create('lugit') +const sync = browsersync.create('lugit'); -export async function deploy(srcPath, distPath, serverPath, serviceName, file = null, live = false) { +export async function deploy( + srcPath, + distPath, + serverPath, + serviceName, + file = null, + live = false +) { logger.info('Deploying...'); - if(live && !sync.active) { + if (live && !sync.active) { sync.init({ proxy: 'http://lugit.local', port: 8080, - }) + }); } let shouldRestart = true; @@ -34,10 +41,10 @@ export async function deploy(srcPath, distPath, serverPath, serviceName, file = await buildFonts(srcPath, distPath); // await buildImg(srcPath, distPath); await buildTemplates(srcPath, distPath); - await copyTo(distPath, serverPath); - shouldRestart && await restartService(serviceName); + await copyTo(distPath, serverPath); + shouldRestart && (await restartService(serviceName)); - if(!shouldRestart && live) { + if (!shouldRestart && live) { sync.reload(); } diff --git a/tools/tasks/fonts.js b/tools/tasks/fonts.js index 23b8598..c4cc60b 100644 --- a/tools/tasks/fonts.js +++ b/tools/tasks/fonts.js @@ -14,7 +14,9 @@ export async function buildFonts(srcHome, distHome) { // if fontsSrcPath does not exist, return if (!existsSync(fontsSrcPath)) { - logger.warn(`No fonts found in ${fontsSrcPath} (there's not even a folder there)`); + logger.warn( + `No fonts found in ${fontsSrcPath} (there's not even a folder there)` + ); return; } diff --git a/tools/tasks/img.js b/tools/tasks/img.js index 5036d0b..78c1d40 100644 --- a/tools/tasks/img.js +++ b/tools/tasks/img.js @@ -19,7 +19,7 @@ export async function buildImg(srcHome, distHome) { mkdirSync(imgDestPath, { recursive: true }); const files = readFiles(imgSrcPath, ['.svg', '.png', '.jpg', '.webp', '.gif']); - + // Separate logo.svg and favicon.svg from the rest files.forEach((file) => { if (file === 'logo.svg') { @@ -34,8 +34,8 @@ export async function buildImg(srcHome, distHome) { await Promise.all([ processLogos(images.logos, imgDestPath), processOthers(images.others, imgDestPath), - ]) - + ]); + logger.info('Images build has finished'); } @@ -53,7 +53,10 @@ async function processLogos(logos, distHome) { promises.push( generate(svg, join(distHome, 'favicon.svg'), { size: 32 }), generate(svg, join(distHome, 'favicon.png'), { size: 180 }), - generate(svg, join(distHome, 'apple-touch-icon.png'), { size: 180, bg: true }), + generate(svg, join(distHome, 'apple-touch-icon.png'), { + size: 180, + bg: true, + }), generate(svg, join(distHome, 'avatar_default.png'), { size: 200, bg: true }) ); } @@ -88,8 +91,7 @@ async function generate(svg, path, { size, bg }) { const { objects, options } = await loadSvg(svg); const canvas = new fabric.Canvas(); - - const newWidth = size * options.width / options.height; + const newWidth = (size * options.width) / options.height; canvas.setDimensions({ width: newWidth, height: size }); const ctx = canvas.getContext('2d'); ctx.scale( @@ -126,4 +128,4 @@ async function processOthers(others, distHome) { for (const img of others) { copyFileSync(img, join(distHome, basename(img))); } -} \ No newline at end of file +} diff --git a/tools/tasks/optimize-css.js b/tools/tasks/optimize-css.js index 988fb92..64ea5fd 100644 --- a/tools/tasks/optimize-css.js +++ b/tools/tasks/optimize-css.js @@ -25,7 +25,7 @@ export async function optimizeCss(distPath, replace = true) { for (const file of cssFiles) { logger.info(`Sanitizing ${file.name} css file`); - let usedCssVariables = []; + let usedCssVariables = []; // read the css file const cssContent = readFileSync(file.path, { encoding: 'utf-8' }); @@ -45,8 +45,12 @@ export async function optimizeCss(distPath, replace = true) { // could also be that the variable is assigned to another variable if (node.type === 'Declaration' && node.property.startsWith('--')) { // check if its assigned to another variable - if(node.property.startsWith('--')) { - if (node.value && node.value.type === 'Function' && node.value.name === 'var') { + if (node.property.startsWith('--')) { + if ( + node.value && + node.value.type === 'Function' && + node.value.name === 'var' + ) { for (const child of node.value.children) { if (child.type === 'Identifier') { if (!usedCssVariables.includes(child.name)) { @@ -54,11 +58,15 @@ export async function optimizeCss(distPath, replace = true) { } } } - } else if (node.value && node.value.type === 'Raw' && node.value.value) { + } else if ( + node.value && + node.value.type === 'Raw' && + node.value.value + ) { const val = node.value.value.trimStart(); // var(--v-primary) // if starts with var(, then its assigned to another variable or many variables, get everything that's inside - // var(...) using regex capturing + // var(...) using regex capturing // get all varname groups const matches = val.matchAll(/var\((?[^),\s]+)/g); @@ -72,7 +80,7 @@ export async function optimizeCss(distPath, replace = true) { usedCssVariables.push(varname); } } - } + } } } diff --git a/tools/tasks/scss.js b/tools/tasks/scss.js index 438495b..cfeb0d8 100644 --- a/tools/tasks/scss.js +++ b/tools/tasks/scss.js @@ -18,24 +18,21 @@ async function buildThemes(srcPath, distPath) { quietDeps: true, logger: { debug: logger.simpleDebug.bind(logger), - info: logger.simpleInfo.bind(logger), - warn: logger.simpleWarn.bind(logger), + info: logger.simpleInfo.bind(logger), + warn: logger.simpleWarn.bind(logger), error: logger.simpleError.bind(logger), - } + }, }); - + logger.debug(`Writing ${theme.name} theme to disk`); - writeFileSync( - join(distPath, cssDistPath, `theme-${theme.name}.css`), - result.css - ); + writeFileSync(join(distPath, cssDistPath, `theme-${theme.name}.css`), result.css); } } export async function buildScss(srcPath, distPath) { logger.info('SCSS build has started'); - + mkdirSync(join(distPath, cssDistPath), { recursive: true }); await buildThemes(srcPath, distPath); @@ -44,12 +41,12 @@ export async function buildScss(srcPath, distPath) { function getScssFiles(srcHome, path) { try { - return readdirSync(join(srcHome, path)).filter( - (fn) => fn.endsWith('.scss') && !fn.startsWith('_') - ).map((file) => ({ - name: file.replace('.scss', ''), - path: join(srcHome, path, file), - })) + return readdirSync(join(srcHome, path)) + .filter((fn) => fn.endsWith('.scss') && !fn.startsWith('_')) + .map((file) => ({ + name: file.replace('.scss', ''), + path: join(srcHome, path, file), + })); } catch (err) { return []; } diff --git a/tools/utils/funcs.js b/tools/utils/funcs.js index 8403d45..9b4efe0 100644 --- a/tools/utils/funcs.js +++ b/tools/utils/funcs.js @@ -122,7 +122,6 @@ export async function sequence(tasks) { return results; } - async function tasksRunner(tasks, abort) { let result = null; for (const task of tasks) { @@ -144,19 +143,16 @@ export async function sequenceStream(tasks) { console.log('sequenceStream aborted'); }); - return [ - tasksRunner(tasks, abort), - abort, - ] + return [tasksRunner(tasks, abort), abort]; } export const getArg = (flag, def) => { const args = process.argv.slice(2); - const flagIndex = args.findIndex(arg => arg === flag); + const flagIndex = args.findIndex((arg) => arg === flag); if (flagIndex !== -1 && flagIndex + 1 < args.length) { return args[flagIndex + 1]; } return def || null; -}; \ No newline at end of file +}; diff --git a/tools/utils/logger.js b/tools/utils/logger.js index 95daa45..70827be 100644 --- a/tools/utils/logger.js +++ b/tools/utils/logger.js @@ -22,7 +22,7 @@ const ANSI_COLORS = { brightBlue: '\x1b[94m', brightMagenta: '\x1b[95m', brightCyan: '\x1b[96m', - pink: '\x1b[38;2;255;182;193m' + pink: '\x1b[38;2;255;182;193m', }; export class Logger { @@ -55,7 +55,6 @@ export class Logger { warn(...args) { if (!this.#canLog('warn')) return; this.log('WARN', false, ...args); - } error(...args) { @@ -91,7 +90,6 @@ export class Logger { simpleWarn(...args) { if (!this.#canLog('warn')) return; this.log('WARN', true, ...args); - } simpleError(...args) {