infrastructure/gitea-custom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: prettier

Browse Source
This commit is contained in:
Timofey Gelazoniya 2025-03-20 17:27:29 +03:00
parent a42fbb4fc6
commit c490d38d72
Signed by: zeldon
GPG Key ID: 047886915281DD2A
54 changed files with 1453 additions and 1107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc.json
View File

@ -8,6 +8,5 @@
"ecmaVersion": "latest",
"sourceType": "module"
},
"rules": {
}
"rules": {}
}

2
.github/workflows/release.yml vendored
View File

@ -2,7 +2,7 @@ name: Release
on:
push:
tags:
- "v*"
- 'v*'
jobs:
release:

6
.vscode/settings.json vendored
View File

@ -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"
}
}

6
CHANGELOG.md
View File

@ -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.

12
README.md
View File

@ -2,7 +2,7 @@
<code>zeldon</code> › <a href="https://gitea.io">Gitea</a> theme
</h1>
*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!
Feel free to open an issue or a pull request. Contributions are welcome!

64
src/themes/scss/_utils/_color-utils.scss
View File

@ -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;
}
}

37
src/themes/scss/_vars.scss
View File

@ -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,
)
);
),
);

4
src/themes/scss/auto.scss
View File

@ -1,2 +1,2 @@
@import "./theme-light.css" (prefers-color-scheme: light);
@import "./theme-dark.css" (prefers-color-scheme: dark);
@import './theme-light.css' (prefers-color-scheme: light);
@import './theme-dark.css' (prefers-color-scheme: dark);

57
src/themes/scss/dark.scss
View File

@ -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);
@include theme.make-theme($is-dark);

95
src/themes/scss/light.scss
View File

@ -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);
@include theme.make-theme($is-dark);

6
src/themes/scss/theme/components/_avatar.scss
View File

@ -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;
}
}
}
}

33
src/themes/scss/theme/components/_boxes.scss
View File

@ -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;
}
}
}

29
src/themes/scss/theme/components/_editor.scss
View File

@ -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;

10
src/themes/scss/theme/components/_file-content.scss
View File

@ -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);
}
}
}
}

1
src/themes/scss/theme/components/_forms.scss
View File

@ -8,4 +8,3 @@
@include forms.tabular-menu;
@include forms.input;
}

9
src/themes/scss/theme/components/_labels.scss
View File

@ -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;
}
}
}
}

15
src/themes/scss/theme/components/_markup.scss
View File

@ -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);
}
}
}
}
}
}
}

34
src/themes/scss/theme/components/button/index.scss
View File

@ -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);
}
}
}
}
}

92
src/themes/scss/theme/components/forms/_input.scss
View File

@ -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;
}
}
}

67
src/themes/scss/theme/components/forms/_menu.scss
View File

@ -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;
}
}
}

2
src/themes/scss/theme/components/forms/index.scss
View File

@ -1,2 +1,2 @@
@forward './menu';
@forward './input';
@forward './input';

2
src/themes/scss/theme/components/index.scss
View File

@ -5,4 +5,4 @@
@forward './avatar';
@forward './button';
@forward './boxes';
@forward './markup';
@forward './markup';

28
src/themes/scss/theme/index.scss
View File

@ -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
}

331
src/themes/scss/theme/modules/_chroma.scss
View File

@ -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
}
}
}

16
src/themes/scss/theme/modules/_codemirror.scss
View File

@ -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 {

2
src/themes/scss/theme/modules/_monaco.scss
View File

@ -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;

880
src/themes/scss/theme/modules/_syntax.scss
View File

@ -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;
}
}
/* 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;
}
}

2
src/themes/scss/theme/modules/index.scss
View File

@ -4,4 +4,4 @@
@forward './codemirror';
@forward './monaco';
@forward './settings';
@forward './syntax';
@forward './syntax';

78
src/themes/scss/theme/modules/issues/_issue-sidebar.scss
View File

@ -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 @@
}
}
}
}
}

35
src/themes/scss/theme/modules/issues/_issue.scss
View File

@ -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;
}
}
}
}
}
}
}

3
src/themes/scss/theme/modules/issues/_list.scss
View File

@ -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');
}

2
src/themes/scss/theme/modules/issues/index.scss
View File

@ -4,4 +4,4 @@
@mixin issues {
@include list.apply-styles();
@include issue.apply-styles();
}
}

7
src/themes/scss/theme/modules/repo/_file-list.scss
View File

@ -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 {

36
src/themes/scss/theme/modules/repo/_home.scss
View File

@ -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;
}
}

6
src/themes/scss/theme/modules/repo/_secondary-navbar.scss
View File

@ -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;
}
}
}

2
src/themes/scss/theme/modules/repo/index.scss
View File

@ -6,4 +6,4 @@
@include home.apply-styles();
@include secondary-navbar.apply-styles();
@include file-list.apply-styles();
}
}

6
src/themes/scss/theme/modules/settings/_pages.scss
View File

@ -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;

2
src/themes/scss/theme/modules/settings/index.scss
View File

@ -2,4 +2,4 @@
@mixin settings {
@include pages.settings-pages;
}
}

15
src/themes/scss/theme/modules/settings/section/_content.scss
View File

@ -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;
}
}
}
}
}
}
}

16
src/themes/scss/theme/modules/settings/section/_nav.scss
View File

@ -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;
}
}
}
}
}

2
src/themes/scss/theme/modules/settings/section/index.scss
View File

@ -1,2 +1,2 @@
@forward './nav';
@forward './content';
@forward './content';

20
src/themes/scss/theme/vars/_base.scss
View File

@ -26,24 +26,24 @@
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
--octicon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>');
// ┌────────┐
// │ 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;
}
}
}
}

350
src/themes/scss/theme/vars/_colors.scss
View File

@ -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);
}
}

2
src/themes/scss/theme/vars/index.scss
View File

@ -1,2 +1,2 @@
@forward './base';
@forward './colors';
@forward './colors';

2
tools/build.js
View File

@ -16,7 +16,7 @@ function exit(err) {
if (err) {
console.error(err);
} else {
console.log('')
console.log('');
logger.info('Build completed successfully');
}

15
tools/minimize-css.js
View File

@ -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);
});

12
tools/serve.js
View File

@ -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)
);

23
tools/tasks/deploy.js
View File

@ -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();
}

4
tools/tasks/fonts.js
View File

@ -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;
}

16
tools/tasks/img.js
View File

@ -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)));
}
}
}

20
tools/tasks/optimize-css.js
View File

@ -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\((?<varname>[^),\s]+)/g);
@ -72,7 +80,7 @@ export async function optimizeCss(distPath, replace = true) {
usedCssVariables.push(varname);
}
}
}
}
}
}

27
tools/tasks/scss.js
View File

@ -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 [];
}

10
tools/utils/funcs.js
View File

@ -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;
};
};

4
tools/utils/logger.js
View File

@ -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) {