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", "ecmaVersion": "latest",
"sourceType": "module" "sourceType": "module"
}, },
"rules": { "rules": {}
}
} }

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

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

2
.vscode/settings.json vendored
View File

@ -33,7 +33,7 @@
"**/**/test": true, "**/**/test": true,
"**/**/tests": true, "**/**/tests": true,
"**/**/*.specs.ts": true, "**/**/*.specs.ts": true,
"**/**/*.specs.js": true, "**/**/*.specs.js": true
}, },
"scss.lint.emptyRules": "ignore" "scss.lint.emptyRules": "ignore"
} }

2
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 ## [0.2.1] - 2024-10-19
### Fixes ### 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 ## [0.2.0] - 2024-10-19
### Added ### Added
- Pinned the project to the Gitea 1.22.3 version. - Pinned the project to the Gitea 1.22.3 version.

4
README.md
View File

@ -2,7 +2,7 @@
<code>zeldon</code> › <a href="https://gitea.io">Gitea</a> theme <code>zeldon</code> › <a href="https://gitea.io">Gitea</a> theme
</h1> </h1>
*Theme for `zeldon's` gitea server.* _Theme for `zeldon's` gitea server._
## Preview ## Preview
@ -33,12 +33,14 @@ DEFAULT_THEME=dark # optional
## Development ## Development
### build ### build
```bash ```bash
$ npm install $ npm install
$ npm run build $ npm run build
``` ```
### serve ### serve
```bash ```bash
$ npm run serve -- --server path/to/gitea/custom $ npm run serve -- --server path/to/gitea/custom

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

@ -33,11 +33,16 @@
'85%': light-change($color, -85%), '85%': light-change($color, -85%),
'90%': light-change($color, -90%), '90%': light-change($color, -90%),
'95%': light-change($color, -95%), '95%': light-change($color, -95%),
'100%': light-change($color, -100%) '100%': light-change($color, -100%),
); );
@if $with-base { @if $with-base {
$set: map.merge((base: $color), $set); $set: map.merge(
(
base: $color,
),
$set
);
} }
@return $set; @return $set;
@ -67,11 +72,16 @@
'85%': light-change($color, 85%), '85%': light-change($color, 85%),
'90%': light-change($color, 90%), '90%': light-change($color, 90%),
'95%': light-change($color, 95%), '95%': light-change($color, 95%),
'100%': light-change($color, 100%) '100%': light-change($color, 100%),
); );
@if $with-base { @if $with-base {
$set: map.merge((base: $color), $set); $set: map.merge(
(
base: $color,
),
$set
);
} }
@return $set; @return $set;
@ -81,18 +91,38 @@
$set: (); $set: ();
@if $light { @if $light {
$set: map.merge($set, (light: color-variants-light($color))); $set: map.merge(
$set,
(
light: color-variants-light($color),
)
);
} }
@if $dark { @if $dark {
$set: map.merge($set, (dark: color-variants-dark($color))); $set: map.merge(
$set,
(
dark: color-variants-dark($color),
)
);
} }
@if $base { @if $base {
@if $override-base-with { @if $override-base-with {
$set: map.merge($set, (base: $override-base-with)); $set: map.merge(
$set,
(
base: $override-base-with,
)
);
} @else { } @else {
$set: map.merge($set, (base: $color)); $set: map.merge(
$set,
(
base: $color,
)
);
} }
} }

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

@ -1,17 +1,26 @@
$variables: ( $variables: (
'font-size': ( 'font-size': (
'xs': .714rem, 'xs': 0.714rem,
'sm': .857rem, 'sm': 0.857rem,
'md': 1rem, // 14 'md': 1rem,
'lg': 1.143rem, // 16 // 14
'xl': 1.286rem, // 18 'lg': 1.143rem,
'2xl': 1.429rem, // 20 // 16
'3xl': 1.714rem, // 24 'xl': 1.286rem,
'4xl': 2rem, // 28 // 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', 'font-family':
'code-font-family': 'ui-monospace, SFMono-Regular, "Source Code Pro", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji)', '-apple-system, "Segoe UI", system-ui, "SF Pro Text", Inter, Roboto, "Helvetica Neue", Arial, sans-serif',
'emoji-font-family': '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla"', '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': ( 'measure': (
'.25x': 4px, '.25x': 4px,
'.375x': 6px, '.375x': 6px,
@ -32,5 +41,5 @@ $variables: (
), ),
'repo-home': ( 'repo-home': (
'sidebar-width': 296px, '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-light.css' (prefers-color-scheme: light);
@import "./theme-dark.css" (prefers-color-scheme: dark); @import './theme-dark.css' (prefers-color-scheme: dark);

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

@ -39,18 +39,21 @@ $colors: (
'10': hsl(213, 12%, 65%), '10': hsl(213, 12%, 65%),
'11': hsl(213, 12%, 75%), '11': hsl(213, 12%, 75%),
'12': hsl(213, 12%, 85%), '12': hsl(213, 12%, 85%),
) ),
); );
// init lui-micro, css-vars only (no reboot, no basic) // init lui-micro, css-vars only (no reboot, no basic)
@include lui.init( @include lui.init(
$theme: (colors: $colors, variables: vars.$variables), $theme: (
colors: $colors,
variables: vars.$variables,
),
$options: ( $options: (
reboot: false, reboot: false,
basic: false, basic: false,
fg-var-name: 'text', fg-var-name: 'text',
bg-var-name: 'elevation/1', bg-var-name: 'elevation/1',
), )
); );
@include theme.make-theme($is-dark); @include theme.make-theme($is-dark);

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

@ -10,47 +10,76 @@ $colors: (
primary: c.variants($brand), primary: c.variants($brand),
secondary: c.variants(#bcc0cc), secondary: c.variants(#bcc0cc),
text: #484b60, text: #484b60,
subtle: #656c90, // same as elevation/10 subtle: #656c90,
palette: ( // same as elevation/10
'red': c.variants(#d20f39), // red palette:
'orange': c.variants(#fe640b), // peach (
'yellow': c.variants(#df8e1d), // yellow 'red': c.variants(#d20f39),
// red
'orange': c.variants(#fe640b),
// peach
'yellow': c.variants(#df8e1d),
// yellow
'olive': c.variants(#e2f095), 'olive': c.variants(#e2f095),
'green': c.variants(#34ac56), // green 'green': c.variants(#34ac56),
'teal': c.variants(#179299), // teal // green
'blue': c.variants(#1e66f5), // blue 'teal': c.variants(#179299),
'violet': c.variants(#7287fd), // lavender // teal
'purple': c.variants(#8652e7), // mauve 'blue': c.variants(#1e66f5),
'pink': c.variants(#ea76cb), // pink // blue
'brown': c.variants(#dd7878), // flamingo 'violet': c.variants(#7287fd),
'black': c.variants(#181825), // black // lavender
'white': c.variants(#e6edf3), // white '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: ( elevation: (
'1': #fcfcfd, // elevation/1 '1': #fcfcfd,
'2': #f6f7f9, // elevation/2 // elevation/1
'3': #eff1f5, // elevation/3 '2': #f6f7f9,
'4': #e6e9ef, // elevation/4 // elevation/2
'5': #d7dce6, // elevation/5 '3': #eff1f5,
'6': #bcc0cc, // elevation/6 // elevation/3
'7': #9ba7bf, // elevation/7 '4': #e6e9ef,
'8': #838fae, // elevation/8 // elevation/4
'9': #717a9f, // elevation/9 '5': #d7dce6,
'10': #656c90, // elevation/10 // elevation/5
'11': #565b77, // elevation/11 '6': #bcc0cc,
'12': #484b60, // elevation/12 // 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) // init lui-micro, css-vars only (no reboot, no basic)
@include lui.init( @include lui.init(
$theme: (colors: $colors, variables: vars.$variables), $theme: (
colors: $colors,
variables: vars.$variables,
),
$options: ( $options: (
reboot: false, reboot: false,
basic: false, basic: false,
fg-var-name: 'text', fg-var-name: 'text',
bg-var-name: 'elevation/1', bg-var-name: 'elevation/1',
), )
); );
@include theme.make-theme($is-dark); @include theme.make-theme($is-dark);

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

@ -1,5 +1,7 @@
@mixin avatar { @mixin avatar {
img.ui.avatar, .ui.avatar img, .ui.avatar svg { img.ui.avatar,
.ui.avatar img,
.ui.avatar svg {
&:not(.org-avatar) { &:not(.org-avatar) {
border-radius: 50% !important; border-radius: 50% !important;
object-fit: fill; object-fit: fill;

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

@ -8,11 +8,11 @@
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
.ui.segment form >*:first-child { .ui.segment form > *:first-child {
margin-top: 0; margin-top: 0;
} }
.ui.segment form >*:last-child { .ui.segment form > *:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -20,16 +20,22 @@
border-radius: var(--border-radius) var(--border-radius) 0 0; 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-left-radius: var(--border-radius);
border-bottom-right-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); 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); border-radius: var(--border-radius);
} }
} }
@ -39,14 +45,17 @@
.content { .content {
background-color: var(--color-box-body); background-color: var(--color-box-body);
>.comment-header, >.ui.segment { > .comment-header,
&:before, &:after { > .ui.segment {
&:before,
&:after {
display: none; display: none;
} }
} }
.comment-header { .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 { .comment-header-left {
.text { .text {
@ -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-left-radius: var(--border-radius) !important;
border-bottom-right-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-left-radius: var(--border-radius) !important;
border-top-right-radius: var(--border-radius) !important; border-top-right-radius: var(--border-radius) !important;
} }

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

@ -39,7 +39,8 @@
} }
.tab { .tab {
.EasyMDEContainer { // legacy editor .EasyMDEContainer {
// legacy editor
border: none !important; border: none !important;
.editor-toolbar { .editor-toolbar {
@ -47,7 +48,8 @@
} }
} }
markdown-toolbar, .EasyMDEContainer .editor-toolbar { markdown-toolbar,
.EasyMDEContainer .editor-toolbar {
padding: 0 10px !important; padding: 0 10px !important;
.markdown-toolbar-group { .markdown-toolbar-group {
@ -67,12 +69,13 @@
} }
} }
.markdown-toolbar-button, button { .markdown-toolbar-button,
button {
line-height: 0; line-height: 0;
display: inline-block; display: inline-block;
color: var(--color-text-light-2) !important; color: var(--color-text-light-2) !important;
padding: var.get('measure/.375x') !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; border-radius: var.get('measure/.375x') !important;
height: auto; height: auto;
min-width: fit-content; min-width: fit-content;
@ -87,7 +90,7 @@
} }
// if aria-checked is true // if aria-checked is true
&[aria-checked="true"] { &[aria-checked='true'] {
background-color: color.get('elevation/4'); background-color: color.get('elevation/4');
} }
} }
@ -99,7 +102,8 @@
} }
} }
textarea, .CodeMirror.cm-s-easymde.CodeMirror-wrap { textarea,
.CodeMirror.cm-s-easymde.CodeMirror-wrap {
background-color: transparent !important; background-color: transparent !important;
border: none !important; border: none !important;
padding: var.get('measure/1x') var.get('measure/1x') !important; padding: var.get('measure/1x') var.get('measure/1x') !important;
@ -127,12 +131,15 @@
outline: none !important; outline: none !important;
} }
.ui.tab.markup[data-tab-panel=markdown-previewer] { .ui.tab.markup[data-tab-panel='markdown-previewer'] {
border-bottom: 0px; 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; padding: 0 !important;
border: none !important; border: none !important;

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

@ -35,7 +35,11 @@
} }
} }
.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-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius);

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

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

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

@ -4,7 +4,7 @@
@mixin label-signed { @mixin label-signed {
.label.isSigned { .label.isSigned {
font-size: var.get('font-size/sm') !important; font-size: var.get('font-size/sm') !important;
margin: 0px .25em !important; margin: 0px 0.25em !important;
padding: 0 !important; padding: 0 !important;
display: inline-flex !important; display: inline-flex !important;
gap: 0px !important; gap: 0px !important;
@ -14,7 +14,10 @@
--color-label-bg: none !important; --color-label-bg: none !important;
--color-text: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important; --color-text: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important;
--color-green-badge-bg: none !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-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-label-text: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important;
--color-green-badge: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important; --color-green-badge: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important;

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

@ -3,11 +3,11 @@
@mixin markup { @mixin markup {
.markup { .markup {
.task-list-item input[type=checkbox] { .task-list-item input[type='checkbox'] {
margin: 0 .5em .25em -1.4em; margin: 0 0.5em 0.25em -1.4em;
} }
input[type=checkbox] { input[type='checkbox'] {
--border-radius: #{var.get('measure/.25x')}; --border-radius: #{var.get('measure/.25x')};
width: var.get('measure/1x'); width: var.get('measure/1x');
height: var.get('measure/1x'); height: var.get('measure/1x');
@ -22,7 +22,8 @@
--color-text: var(--color-primary-contrast); --color-text: var(--color-primary-contrast);
} }
&:not([disabled]):hover, &:not([disabled]):active { &:not([disabled]):hover,
&:not([disabled]):active {
border-color: var(--color-secondary); border-color: var(--color-secondary);
background-color: color.get('elevation/6'); background-color: color.get('elevation/6');

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

@ -8,7 +8,8 @@
background-color: transparent !important; background-color: transparent !important;
font-weight: normal; font-weight: normal;
button, .button { button,
.button {
border-color: color.get('elevation/6') !important; border-color: color.get('elevation/6') !important;
gap: var.get('measure/.5x') !important; gap: var.get('measure/.5x') !important;
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -16,14 +17,15 @@
&:hover { &:hover {
border-color: color.get('elevation/7') !important; border-color: color.get('elevation/7') !important;
+.label { + .label {
border-left-color: color.get('elevation/7') !important; border-left-color: color.get('elevation/7') !important;
} }
} }
} }
&.labeled { &.labeled {
button, .button { button,
.button {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
@ -37,7 +39,6 @@
border-top-right-radius: var(--border-radius); border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius);
&:hover { &:hover {
border-color: color.get('elevation/7') !important; border-color: color.get('elevation/7') !important;
} }
@ -50,19 +51,21 @@
} }
@mixin gitea-button { @mixin gitea-button {
.ui.icon.buttons .button, .ui.icon.button:not(.compact) { .ui.icon.buttons .button,
.ui.icon.button:not(.compact) {
// padding: 50px; // padding: 50px;
} }
.code-comment-buttons-buttons { .code-comment-buttons-buttons {
button:not(.labeled):not(.icon) { button:not(.labeled):not(.icon) {
padding: .78571429em !important; padding: 0.78571429em !important;
} }
} }
// buttons group // buttons group
.ui.buttons { .ui.buttons {
&.icon .button, &.icon:not(.compact) { &.icon .button,
&.icon:not(.compact) {
padding: 50px 50px; padding: 50px 50px;
} }
@ -90,7 +93,7 @@
.ui.button { .ui.button {
border-radius: var(--border-radius); 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'); padding: calc(#{var.get('measure/.375x')} - 1px) var.get('measure/1x');
font-size: var.get('font-size/md'); font-size: var.get('font-size/md');
line-height: 20px; line-height: 20px;
@ -104,7 +107,8 @@
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
&.red, &.red.basic { &.red,
&.red.basic {
border-color: var(--color-secondary); border-color: var(--color-secondary);
background: var(--color-button); background: var(--color-button);
color: var(--color-red); color: var(--color-red);
@ -119,7 +123,9 @@
} }
} }
&.primary, &.red, &.basic { &.primary,
&.red,
&.basic {
font-weight: 500; font-weight: 500;
} }

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

@ -4,21 +4,21 @@
@mixin -all-inputs($state: null) { @mixin -all-inputs($state: null) {
input#{$state}, input#{$state},
textarea#{$state}, textarea#{$state},
.ui.input>input#{$state}, .ui.input > input#{$state},
.ui.form input:not([type])#{$state}, .ui.form input:not([type])#{$state},
.ui.form select#{$state}, .ui.form select#{$state},
.ui.form textarea#{$state}, .ui.form textarea#{$state},
.ui.form input[type=date]#{$state}, .ui.form input[type='date']#{$state},
.ui.form input[type=datetime-local]#{$state}, .ui.form input[type='datetime-local']#{$state},
.ui.form input[type=email]#{$state}, .ui.form input[type='email']#{$state},
.ui.form input[type=file]#{$state}, .ui.form input[type='file']#{$state},
.ui.form input[type=number]#{$state}, .ui.form input[type='number']#{$state},
.ui.form input[type=password]#{$state}, .ui.form input[type='password']#{$state},
.ui.form input[type=search]#{$state}, .ui.form input[type='search']#{$state},
.ui.form input[type=tel]#{$state}, .ui.form input[type='tel']#{$state},
.ui.form input[type=text]#{$state}, .ui.form input[type='text']#{$state},
.ui.form input[type=time]#{$state}, .ui.form input[type='time']#{$state},
.ui.form input[type=url]#{$state}, .ui.form input[type='url']#{$state},
.ui.selection.dropdown#{$state} { .ui.selection.dropdown#{$state} {
@content; @content;
} }
@ -32,7 +32,7 @@
line-height: 20px; line-height: 20px;
padding: calc(#{var.get('measure/.375x')} - 1px) var.get('measure/.75x'); 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-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius);
} }
@ -40,7 +40,7 @@
@include -all-inputs(':hover') { @include -all-inputs(':hover') {
border-color: var(--color-input-border); border-color: var(--color-input-border);
color: var(--color-input-text) color: var(--color-input-text);
} }
@include -all-inputs(':focus') { @include -all-inputs(':focus') {
@ -60,27 +60,27 @@
} }
} }
.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); border-right-color: var(--color-input-border);
z-index: 1; z-index: 1;
} }
.ui.action.input>.dropdown:not(:first-child):not(:last-child), .ui.action.input > .dropdown:not(:first-child):not(:last-child),
.ui.action.input>.button: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 > .buttons:not(:first-child):not(:last-child) > .button {
border-radius: 0 !important; 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,
.ui.action.input:not([class*="left action"])>input:focus+.ui.dropdown.selection:hover, .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,
.ui.action.input:not([class*="left action"])>input:focus+.button:hover, .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,
.ui.action.input:not([class*="left action"])>input:focus+i.icon+.button:hover { .ui.action.input:not([class*='left action']) > input:focus + i.icon + .button:hover {
border-left-color: var(--color-input-border); border-left-color: var(--color-input-border);
} }
.ui.form .field>label { .ui.form .field > label {
margin: 0 0 var.get('measure/.375x'); margin: 0 0 var.get('measure/.375x');
font-size: var.get('font-size/md'); font-size: var.get('font-size/md');
font-weight: 600; font-weight: 600;
@ -88,23 +88,23 @@
.ui.form textarea, .ui.form textarea,
.ui.form input:not([type]), .ui.form input:not([type]),
.ui.form input[type=date], .ui.form input[type='date'],
.ui.form input[type=datetime-local], .ui.form input[type='datetime-local'],
.ui.form input[type=email], .ui.form input[type='email'],
.ui.form input[type=number], .ui.form input[type='number'],
.ui.form input[type=password], .ui.form input[type='password'],
.ui.form input[type=search], .ui.form input[type='search'],
.ui.form input[type=tel], .ui.form input[type='tel'],
.ui.form input[type=time], .ui.form input[type='time'],
.ui.form input[type=text], .ui.form input[type='text'],
.ui.form input[type=file], .ui.form input[type='file'],
.ui.form input[type=url] { .ui.form input[type='url'] {
min-height: 2.71428571em; min-height: 2.71428571em;
} }
.ui.selection.dropdown { .ui.selection.dropdown {
min-height: 2.71428571em; min-height: 2.71428571em;
>input { > input {
min-height: 0; min-height: 0;
&:focus { &:focus {
outline: none; 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'); 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; padding-left: 0;
} }
.ui.checkbox label, .ui.radio.checkbox label { .ui.checkbox label,
.ui.radio.checkbox label {
margin-left: 20px !important; margin-left: 20px !important;
} }
} }

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

@ -4,16 +4,21 @@
@mixin dropdown-menu { @mixin dropdown-menu {
.ui.dropdown { .ui.dropdown {
// dropdown menu // dropdown menu
>.menu { > .menu {
--border-radius: #{var.get('measure/.75x')}; --border-radius: #{var.get('measure/.75x')};
opacity: 0; opacity: 0;
overflow-x: hidden; overflow-x: hidden;
&.hidden { opacity: 0 !important;} &.hidden {
&.visible, &.show { opacity: 1 !important; } opacity: 0 !important;
}
&.visible,
&.show {
opacity: 1 !important;
}
border-radius: var(--border-radius) !important; border-radius: var(--border-radius) !important;
transition: opacity .2s ease !important; transition: opacity 0.2s ease !important;
box-shadow: 0px 6px 12px -3px rgba(var(--color-shadow-rgb), 0.5), 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; 0px 6px 18px 0px rgba(var(--color-shadow-rgb), 0.1) !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-background: #{color.get('elevation/1')};
--color-input-border: #{color.get('elevation/5')}; --color-input-border: #{color.get('elevation/5')};
@ -72,7 +78,7 @@
left: -8px; left: -8px;
width: 4px; width: 4px;
height: 24px; height: 24px;
content: ""; content: '';
background-color: var(--color-accent); background-color: var(--color-accent);
border-radius: 6px; border-radius: 6px;
} }
@ -121,25 +127,29 @@
// if not .upward // if not .upward
&:not(.upward) { &:not(.upward) {
>.menu { > .menu {
top: calc(100% + var.get('measure/.5x')) !important; top: calc(100% + var.get('measure/.5x')) !important;
} }
} }
&.upward { &.upward {
>.menu { > .menu {
bottom: calc(100% + var.get('measure/.5x')) !important; 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-left-radius: var(--border-radius) !important;
border-top-right-radius: var(--border-radius) !important; border-top-right-radius: var(--border-radius) !important;
border-bottom-left-radius: var(--border-radius) !important; border-bottom-left-radius: var(--border-radius) !important;
border-bottom-right-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; border-color: var(--color-secondary) !important;
} }
@ -148,7 +158,8 @@
--border-radius: #{var.get('measure/.5x')}; --border-radius: #{var.get('measure/.5x')};
border-radius: var(--border-radius) !important; border-radius: var(--border-radius) !important;
&:focus, &.active { &:focus,
&.active {
border-color: var(--color-secondary) !important; border-color: var(--color-secondary) !important;
outline: 2px solid var(--color-accent); outline: 2px solid var(--color-accent);
} }
@ -157,7 +168,7 @@
border-radius: var(--border-radius) !important; border-radius: var(--border-radius) !important;
} }
>.menu { > .menu {
border-radius: var(--border-radius) !important; border-radius: var(--border-radius) !important;
border-top-width: 1px !important; border-top-width: 1px !important;
border-color: var(--color-secondary) !important; border-color: var(--color-secondary) !important;
@ -180,7 +191,7 @@
.ui.menu { .ui.menu {
border-radius: var(--border-radius); border-radius: var(--border-radius);
>.item:first-child { > .item:first-child {
border-radius: var(--border-radius) 0 0 var(--border-radius); border-radius: var(--border-radius) 0 0 var(--border-radius);
} }
@ -193,14 +204,15 @@
gap: var.get('measure/.25x'); gap: var.get('measure/.25x');
&.vertical { &.vertical {
>.item { > .item {
border: none; border: none;
margin: 0 0 var.get('measure/.25x') 0; margin: 0 0 var.get('measure/.25x') 0;
border-radius: var(--border-radius) !important; 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); color: var(--color-text);
background: var(--color-hover); background: var(--color-hover);
} }
@ -208,7 +220,8 @@
} }
@mixin tabular-menu { @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; border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
} }
} }

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

@ -22,79 +22,234 @@
font: 14px var.get('code-font-family'); font: 14px var.get('code-font-family');
} }
.bp { color: color.get($orange); font-weight: 600;} // NameBuiltinPseudo .bp {
.c { color: color.get($subtle); font-style: italic; } // Comment color: color.get($orange);
.c1 { color: color.get($subtle); font-style: italic; } // CommentSingle font-weight: 600;
.ch { color: color.get($subtle); font-style: italic; } // CommentHashbang } // NameBuiltinPseudo
.cm { color: color.get($subtle); font-style: italic; } // CommentMultiline .c {
.cp { color: color.get($blue); } // CommentPreproc color: color.get($subtle);
.cpf { color: color.get($blue); } // CommentPreprocFile font-style: italic;
.cs { color: color.get($subtle); } // CommentSpecial } // Comment
.dl { color: color.get($blue); } // LiteralStringDelimiter .c1 {
.fm {} // NameFunctionMagic color: color.get($subtle);
.g {} // Generic font-style: italic;
.gd { color: color.get($blwh); background-color: rgba(#{color.get($red, 'rgb')}, .25); } // GenericDeleted } // CommentSingle
.ge { font-style: italic; } // GenericEmph .ch {
.gh { color: color.get($teal); } // GenericHeading color: color.get($subtle);
.gi { color: color.get($blwh); background-color: rgba(#{color.get($green, 'rgb')}, 0.3); } // GenericInserted font-style: italic;
.gl {} // GenericUnderline } // CommentHashbang
.go { color: color.get($orange); } // GenericOutput .cm {
.gp { color: color.get($subtle); font-weight: bold; } // GenericPrompt color: color.get($subtle);
.gr { color: color.get($brown); } // GenericError font-style: italic;
.gs { font-weight: bold; } // GenericStrong } // CommentMultiline
.gt { color: color.get($brown); } // GenericTraceback .cp {
.gu { color: color.get($teal); } // GenericSubheading color: color.get($blue);
.il { color: color.get($orange); } // LiteralNumberIntegerLong } // CommentPreproc
.k { color: color.get($purple); font-weight: 600; } // Keyword .cpf {
.kc { color: color.get($yellow); } // KeywordConstant color: color.get($blue);
.kd { color: color.get($purple); font-weight: 600; } // KeywordDeclaration } // CommentPreprocFile
.kn { color: color.get($yellow); } // KeywordNamespace .cs {
.kp { color: color.get($purple); font-weight: 600; } // KeywordPseudo color: color.get($subtle);
.kr { color: color.get($purple); font-weight: 600;} // KeywordReserved } // CommentSpecial
.kt { color: color.get($yellow); } // KeywordType .dl {
.l {} // Literal color: color.get($blue);
.ld {} // LiteralDate } // LiteralStringDelimiter
.m { color: color.get($orange); } // LiteralNumber .fm {
.mb { color: color.get($orange); } // LiteralNumberBin } // NameFunctionMagic
.mf { color: color.get($orange); } // LiteralNumberFloat .g {
.mh { color: color.get($orange); } // LiteralNumberHex } // Generic
.mi { color: color.get($orange); } // LiteralNumberInteger .gd {
.mo { color: color.get($orange); } // LiteralNumberOct color: color.get($blwh);
.n { color: color.get($violet); } // Name background-color: rgba(#{color.get($red, 'rgb')}, 0.25);
.na { color: color.get($yellow); } // NameAttribute } // GenericDeleted
.nb { color: color.get($orange); font-weight: 600; } // NameBuiltin .ge {
.nc { color: color.get($pink); } // NameClass font-style: italic;
.nd { color: color.get($pink); } // NameDecorator } // GenericEmph
.ne { color: color.get($brown); } // NameException .gh {
.nf { color: color.get($blue); } // NameFunction color: color.get($teal);
.ni { color: color.get($pink); } // NameEntity } // GenericHeading
.nl { color: color.get($yellow); } // NameLabel .gi {
.nn { color: color.get($yellow); } // NameNamespace color: color.get($blwh);
.no { color: color.get($yellow); } // NameConstant background-color: rgba(#{color.get($green, 'rgb')}, 0.3);
.nt { color: color.get($purple); } // NameTag } // GenericInserted
.nv { color: color.get($orange); } // NameVariable .gl {
.nx { color: color.get($orange); } // NameOther } // GenericUnderline
.o { color: color.get($teal); } // Operator .go {
.ow { color: color.get($teal); font-weight: bold; } // OperatorWord color: color.get($orange);
.p { color: color.get($subtle); } // Punctuation } // GenericOutput
.py {} // NameProperty .gp {
.s { color: color.get($green); } // LiteralString color: color.get($subtle);
.s1 { color: color.get($green); } // LiteralStringSingle font-weight: bold;
.s2 { color: color.get($green); } // LiteralStringDouble } // GenericPrompt
.sa { color: color.get($green); } // LiteralStringAffix .gr {
.sb { color: color.get($green); } // LiteralStringBacktick color: color.get($brown);
.sc { color: color.get($green); } // LiteralStringChar } // GenericError
.sd { color: color.get($green); } // LiteralStringDoc .gs {
.se { color: color.get($blue); } // LiteralStringEscape font-weight: bold;
.sh { color: color.get($green); } // LiteralStringHeredoc } // GenericStrong
.si { color: color.get($green); } // LiteralStringInterpol .gt {
.sr { color: color.get($blue); } // LiteralStringRegex color: color.get($brown);
.ss { color: color.get($green); } // LiteralStringSymbol } // GenericTraceback
.sx { color: color.get($green); } // LiteralStringOther .gu {
.vc { color: color.get($yellow); } // NameVariableClass color: color.get($teal);
.vg { color: color.get($orange); } // NameVariableGlobal } // GenericSubheading
.vi { color: color.get($yellow); } // NameVariableInstance .il {
.vm {} // NameVariableMagic color: color.get($orange);
.w { color: color.get($more-subtle); } // TextWhitespace } // 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-default,
.CodeMirror.cm-s-paper { .CodeMirror.cm-s-paper {
.cm-property { .cm-property {
color: color.get('text') color: color.get('text');
} }
.cm-header { .cm-header {
color: color.get('text') color: color.get('text');
} }
.cm-quote { .cm-quote {
color: color.get('palette/green/base') color: color.get('palette/green/base');
} }
.cm-keyword { .cm-keyword {
@ -29,7 +29,7 @@
} }
.cm-def { .cm-def {
color: color.get('text') color: color.get('text');
} }
.cm-variable-2 { .cm-variable-2 {
@ -41,15 +41,15 @@
} }
.cm-comment { .cm-comment {
color: color.get('elevation/6') color: color.get('elevation/6');
} }
.cm-string { .cm-string {
color: color.get('palette/green/base') color: color.get('palette/green/base');
} }
.cm-string-2 { .cm-string-2 {
color: color.get('palette/green/base') color: color.get('palette/green/base');
} }
.cm-meta { .cm-meta {
@ -65,7 +65,7 @@
} }
.cm-bracket { .cm-bracket {
color: color.get('text') color: color.get('text');
} }
.cm-tag { .cm-tag {

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

@ -22,27 +22,9 @@
color: var(--color-text-dark-2) !important; color: var(--color-text-dark-2) !important;
} }
.repository .repository .diff-file-box .file-body.file-code table tbody tr.add-code:hover .lines-num,
.diff-file-box .repository .diff-file-box .file-body.file-code table tbody tr.del-code:hover .lines-num,
.file-body.file-code .repository .diff-file-box .file-body.file-code table tbody tr.same-code:hover .lines-num,
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 .repository
.diff-file-box .diff-file-box
.file-body.file-code .file-body.file-code
@ -55,30 +37,12 @@
color: var(--color-text-dark) !important; color: var(--color-text-dark) !important;
} }
.repository .repository .diff-file-box .file-body.file-code table tbody tr.same-code:hover .lines-num {
.diff-file-box
.file-body.file-code
table
tbody
tr.same-code:hover
.lines-num {
color: var(--color-text-dark-2) !important; color: var(--color-text-dark-2) !important;
} }
.repository .repository .diff-file-box .file-body.file-code table tbody tr.same-code:hover .lines-code,
.diff-file-box .repository .diff-file-box .file-body.file-code table tbody tr.same-code:hover .lines-num,
.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 .repository
.diff-file-box .diff-file-box
.file-body.file-code .file-body.file-code

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

@ -4,11 +4,11 @@
@mixin sidebar { @mixin sidebar {
--spc: #{var.get('measure/1x')}; // var(--spc) 16px --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-7_8: calc(var(--spc) * 0.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-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) * .500); // 4/8 = 1/2 of the base var(--spc-4_8) 8px --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) * .375); // 3/8 of the base var(--spc-3_8) 6px --spc-3_8: calc(var(--spc) * 0.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-2_8: calc(var(--spc) * 0.25); // 2/8 = 1/4 of the base var(--spc-2_8) 4px
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -17,25 +17,37 @@
padding: 0 !important; padding: 0 !important;
// reset padding and margin for all children // reset padding and margin for all children
>*, .issue-sidebar-combo>*, >text+*, >.ui>* { > *,
.issue-sidebar-combo > *,
> text + *,
> .ui > * {
margin: unset !important; margin: unset !important;
padding: unset !important; padding: unset !important;
font-size: var.get('font-size/sm') !important; font-size: var.get('font-size/sm') !important;
} }
// alignment for main children elements // alignment for main children elements
>.ui, >.text, >.ui { > .ui,
> .text,
> .ui {
padding-left: var(--spc-4_8) !important; padding-left: var(--spc-4_8) !important;
padding-right: 0 !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-left: unset;
padding-right: unset; padding-right: unset;
} }
// reset for all actionable elements // 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; padding: 0 !important;
margin: 0 !important; margin: 0 !important;
min-height: 0 !important; min-height: 0 !important;
@ -51,13 +63,12 @@
} }
// dividers // dividers
>.divider { > .divider {
width: calc(100% - var(--spc-4_8)) !important; width: calc(100% - var(--spc-4_8)) !important;
align-self: flex-end; align-self: flex-end;
margin: var(--spc-7_8) 0 !important; margin: var(--spc-7_8) 0 !important;
} }
// select branch dropdown // select branch dropdown
.select-branch { .select-branch {
align-self: flex-end; align-self: flex-end;
@ -66,7 +77,7 @@
@include button.hollow; @include button.hollow;
} }
+.divider { + .divider {
border: none !important; border: none !important;
margin: var(--spc-4_8) 0 !important; margin: var(--spc-4_8) 0 !important;
} }
@ -74,7 +85,9 @@
.menu { .menu {
--color-menu: #{color.get('elevation/3')}; --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; --color-menu: #{color.get('elevation/4')} !important;
} }
@ -102,10 +115,10 @@
padding-top: var(--spc-3_8) !important; padding-top: var(--spc-3_8) !important;
padding-bottom: var(--spc-3_8) !important; padding-bottom: var(--spc-3_8) !important;
font-size: var.get('font-size/sm'); font-size: var.get('font-size/sm');
transition: background-color .1s ease; transition: background-color 0.1s ease;
border-radius: var(--border-radius) !important; border-radius: var(--border-radius) !important;
>a { > a {
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -117,13 +130,13 @@
} }
&:hover { &:hover {
background-color: rgba(#{color.get('elevation/6', 'rgb')}, .5); background-color: rgba(#{color.get('elevation/6', 'rgb')}, 0.5);
} }
} }
} }
// direct text children // direct text children
>.text { > .text {
// background-color: orange !important; // background-color: orange !important;
flex: 1; flex: 1;
display: flex !important; display: flex !important;
@ -154,12 +167,12 @@
.depending { .depending {
// title // title
>.text { > .text {
display: inline-block; display: inline-block;
margin-bottom: var(--spc-6_8) !important; margin-bottom: var(--spc-6_8) !important;
} }
>p { > p {
margin-bottom: var(--spc-4_8) !important; margin-bottom: var(--spc-4_8) !important;
} }
@ -172,11 +185,12 @@
border: none !important; border: none !important;
.item-left { .item-left {
a { // issue a {
// issue
} }
div.text { // repo div.text {
// repo
font-size: var.get('font-size/xs') !important; font-size: var.get('font-size/xs') !important;
} }
} }
@ -240,7 +254,7 @@
} }
// input of type date // input of type date
input[type="date"] { input[type='date'] {
padding: var(--spc-4_8) var(--spc-6_8) !important; padding: var(--spc-4_8) var(--spc-6_8) !important;
border-top-left-radius: var(--border-radius); border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius);
@ -254,14 +268,16 @@
} }
// direct form child // direct form child
>form, .form { > form,
.form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--spc-4_8) !important; gap: var(--spc-4_8) !important;
} }
// buttons at the end of the sidebar // buttons at the end of the sidebar
>form button, >button { > form button,
> button {
font-size: var.get('font-size/sm') !important; font-size: var.get('font-size/sm') !important;
border: none !important; border: none !important;
background: transparent !important; background: transparent !important;
@ -280,7 +296,7 @@
} }
// if the data-modal attr is #sidebar-delete-issue, make the color red // 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; color: color.get('palette/red/base') !important;
svg { svg {
color: color.get('palette/red/base') !important; color: color.get('palette/red/base') !important;

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

@ -23,7 +23,8 @@
color: color.get('subtle'); 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'); margin-bottom: var.get('measure/1x');
padding-bottom: var.get('measure/.5x'); padding-bottom: var.get('measure/.5x');
border-bottom: none; border-bottom: none;
@ -44,7 +45,7 @@
&.event { &.event {
.badge { .badge {
// and not contains a tw-bg-* class // and not contains a tw-bg-* class
&:not([class*="tw-bg-"]) { &:not([class*='tw-bg-']) {
color: var(--color-timeline-badge-fg) !important; color: var(--color-timeline-badge-fg) !important;
} }
@ -129,7 +130,7 @@
&:before { &:before {
display: block; display: block;
content: ""; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -140,7 +141,7 @@
opacity: 50%; opacity: 50%;
} }
.comment.code-comment .content.comment-container{ .comment.code-comment .content.comment-container {
background-color: transparent !important; background-color: transparent !important;
.header.comment-header { .header.comment-header {
@ -157,7 +158,7 @@
} }
.code-comment-buttons { .code-comment-buttons {
margin: 0!important; margin: 0 !important;
} }
.comment-form { .comment-form {
@ -180,14 +181,15 @@
margin-bottom: var.get('measure/1x'); 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; padding: var.get('measure/.5x') 0;
height: 60px; height: 60px;
} }
.repository.view.issue .pull.tabs.container { .repository.view.issue .pull.tabs.container {
+ div { + div {
>.diff-detail-box:first-child { > .diff-detail-box:first-child {
margin: calc(var.get('measure/1x') * -1) 0 0 0; margin: calc(var.get('measure/1x') * -1) 0 0 0;
} }
} }
@ -203,11 +205,13 @@
column-gap: var.get('measure/1x'); 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); 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); border-bottom-right-radius: var(--border-radius);
} }
@ -255,7 +259,8 @@
margin-bottom: var.get('measure/1x'); margin-bottom: var.get('measure/1x');
} }
&:before, &:after { &:before,
&:after {
display: none; 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; @use '@lucas-labs/lui-micro/color' as color;
@mixin apply-styles { @mixin apply-styles {
.page-content.repository.issue-list, .page-content.dashboard.issues { .page-content.repository.issue-list,
.page-content.dashboard.issues {
.secondary-nav { .secondary-nav {
margin-bottom: var.get('measure/1.5x'); margin-bottom: var.get('measure/1.5x');
} }

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

@ -15,12 +15,14 @@
padding: 0 0 0 var.get('measure/.5x'); padding: 0 0 0 var.get('measure/.5x');
.section { .section {
&:first-of-type, &.active { &:first-of-type,
&.active {
font-weight: 600; font-weight: 600;
} }
} }
.breadcrumb-divider, button { .breadcrumb-divider,
button {
color: color.get('subtle') !important; color: color.get('subtle') !important;
} }
@ -94,7 +96,6 @@
// readme // readme
#readme { #readme {
} }
.repository-summary .sub-menu .item { .repository-summary .sub-menu .item {

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

@ -13,7 +13,9 @@
margin-top: 0 !important; margin-top: 0 !important;
} }
#repo-topics, #topic_edit, .label-list { #repo-topics,
#topic_edit,
.label-list {
row-gap: var.get('measure/.5x'); row-gap: var.get('measure/.5x');
margin-top: 0 !important; margin-top: 0 !important;
@ -27,20 +29,24 @@
padding-bottom: 0 !important; padding-bottom: 0 !important;
&:hover { &: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; color: color.get('primary/base') !important;
} }
} }
.ui.selection.active.dropdown, .ui.selection.active.dropdown .menu { .ui.selection.active.dropdown,
border-color: color.get('elevation/6') .ui.selection.active.dropdown .menu {
border-color: color.get('elevation/6');
} }
} }
.repo-description { .repo-description {
margin-bottom: var.get('measure/1x'); margin-bottom: var.get('measure/1x');
+a.flex-text-block { + a.flex-text-block {
svg { svg {
color: color.get('subtle') !important; color: color.get('subtle') !important;
} }
@ -61,16 +67,18 @@
.repo-description { .repo-description {
margin-top: 0 !important; margin-top: 0 !important;
+a.flex-text-block { + a.flex-text-block {
margin-bottom: 0; margin-bottom: 0;
} }
} }
#repo-topics, #manage_topic, .flex-item-title { #repo-topics,
#manage_topic,
.flex-item-title {
display: none; display: none;
} }
.flex-item-body>div { .flex-item-body > div {
flex: 1; 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'); padding-left: var.get('measure/1.5x');
@media (max-width: 768px) { @media (max-width: 768px) {
@ -165,11 +174,11 @@
} }
} }
>.flex-list>.flex-item { > .flex-list > .flex-item {
padding-top: var.get('measure/1x'); padding-top: var.get('measure/1x');
padding-bottom: var.get('measure/1x'); padding-bottom: var.get('measure/1x');
>.flex-item-main { > .flex-item-main {
gap: var.get('measure/1x'); gap: var.get('measure/1x');
} }
} }
@ -241,7 +250,8 @@
display: none; 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; display: none;
} }
} }

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

@ -3,7 +3,9 @@
@use './section'; @use './section';
@mixin settings-pages { @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 { .ui.flex-container {
column-gap: 40px; column-gap: 40px;

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

@ -25,7 +25,7 @@
.ui.segment { .ui.segment {
border-radius: var(--border-radius); border-radius: var(--border-radius);
>*:last-child { > *:last-child {
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 0; padding-bottom: 0;
} }
@ -33,7 +33,7 @@
.ui.attached.segment { .ui.attached.segment {
background: unset; background: unset;
padding:0; padding: 0;
border: none; border: none;
margin: 0; margin: 0;
@ -57,7 +57,9 @@
margin: 0 0 1em; 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; margin-bottom: 0;
} }
@ -77,7 +79,8 @@
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
&:not(:first-child), &:first-child { &:not(:first-child),
&:first-child {
padding: 1rem; padding: 1rem;
margin: 0rem 0rem 0rem 0rem; margin: 0rem 0rem 0rem 0rem;
} }

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

@ -19,7 +19,8 @@
min-height: var(--min-height); min-height: var(--min-height);
} }
a.item, details.item { a.item,
details.item {
min-height: var(--min-height); min-height: var(--min-height);
&:before { &:before {
content: none; content: none;
@ -40,8 +41,8 @@
&:after { &:after {
background: var(--color-primary); background: var(--color-primary);
border-radius: .375rem; border-radius: 0.375rem;
content: ""; content: '';
height: 24px; height: 24px;
width: 4px; width: 4px;
position: absolute; position: absolute;
@ -52,7 +53,8 @@
} }
} }
a.item, details.item summary { a.item,
details.item summary {
padding: var(--spacing); padding: var(--spacing);
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
@ -64,7 +66,7 @@
&:after { &:after {
color: color.get('subtle'); color: color.get('subtle');
transform: scaleY(1); transform: scaleY(1);
transition: transform .12s linear; transition: transform 0.12s linear;
mask-image: var(--octicon-chevron-down); mask-image: var(--octicon-chevron-down);
-webkit-mask-image: var(--octicon-chevron-down); -webkit-mask-image: var(--octicon-chevron-down);
} }

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

@ -131,7 +131,6 @@
--color-green-contrast: #{if($is-dark, var(--color-black), var(--color-white))}; --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 // │ named │ » light variants
// └───────┘ // └───────┘
@ -224,16 +223,56 @@
// ┌──────┐ // ┌──────┐
// │ diff │ // │ 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-linenum-bg: #{if(
--color-diff-added-row-bg: #{if($is-dark, #{color.get('palette/teal/dark/60%')}, rgba(#{color.get('palette/green/light/20%', 'rgb')}, .25))}; $is-dark,
--color-diff-added-row-border: #{if($is-dark, #{color.get('palette/teal/dark/40%')}, rgba(#{color.get('palette/green/light/25%', 'rgb')}, .25))}; #{color.get('palette/teal/dark/50%')},
--color-diff-added-word-bg: #{if($is-dark, #{color.get('palette/teal/dark/50%')}, rgba(#{color.get('palette/green/light/6%', 'rgb')}, .3))}; rgba(#{color.get('palette/white/base', 'rgb')}, 0.2)
--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-added-row-bg: #{if(
--color-diff-removed-linenum-bg: #{if($is-dark, #{color.get('palette/red/dark/60%')}, rgba(#{color.get('palette/white/base', 'rgb')}, .2))}; $is-dark,
--color-diff-removed-row-bg: #{if($is-dark, #{color.get('palette/red/dark/65%')}, rgba(#{color.get('palette/red/light/30%', 'rgb')}, .15))}; #{color.get('palette/teal/dark/60%')},
--color-diff-removed-row-border: #{if($is-dark, #{color.get('palette/red/dark/50%')}, rgba(#{color.get('palette/red/light/35%', 'rgb')}, .2))}; rgba(#{color.get('palette/green/light/20%', 'rgb')}, 0.25)
--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-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)}; --color-diff-inactive: #{if($is-dark, #{color.get('elevation/6')}, red)};
// ┌────────┐ // ┌────────┐
@ -258,20 +297,20 @@
// │ badge │ // │ badge │
// └───────┘ // └───────┘
--color-red-badge: #{color.get('palette/red/dark/20%')}; --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-bg: rgba(#{color.get('palette/red/dark/20%', 'rgb')}, 0.1);
--color-red-badge-hover-bg: rgba(#{color.get('palette/red/dark/20%', 'rgb')}, .2); --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: #{color.get('palette/green/base')};
--color-green-badge-bg: rgba(#{color.get('palette/green/base', 'rgb')}, .1); --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')}, .2); --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: #{color.get('palette/yellow/dark/10%')};
--color-yellow-badge-bg: rgba(#{color.get('palette/yellow/dark/10%', 'rgb')}, .1); --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')}, .2); --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: #{color.get('palette/orange/dark/10%')};
--color-orange-badge-bg: rgba(#{color.get('palette/orange/dark/10%', 'rgb')}, .1); --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')}, .2); --color-orange-badge-hover-bg: rgba(#{color.get('palette/orange/dark/10%', 'rgb')}, 0.2);
// ┌──────────────┐ // ┌──────────────┐
// │ target-based │ // │ target-based │
@ -303,7 +342,12 @@
// light // light
--color-light: #00001728; --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-light-border: #{color.get('elevation/6')};
--color-hover: rgba(#{color.get('elevation/6', 'rgb')}, 0.5); --color-hover: rgba(#{color.get('elevation/6', 'rgb')}, 0.5);
--color-hover-opaque: #{color.get('elevation/6', 'rgb')}; --color-hover-opaque: #{color.get('elevation/6', 'rgb')};
@ -315,10 +359,18 @@
--color-markup-code-inline: #{color.get('elevation/4')}; --color-markup-code-inline: #{color.get('elevation/4')};
--color-button: #{color.get('elevation/4')}; --color-button: #{color.get('elevation/4')};
--color-code-bg: #{color.get('elevation/3')}; --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-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-secondary-bg: #{color.get('elevation/4')};
--color-expand-button: #{color.get('elevation/6')}; --color-expand-button: #{color.get('elevation/6')};
@ -326,19 +378,29 @@
--color-editor-line-highlight: var(--color-primary-light-5); --color-editor-line-highlight: var(--color-primary-light-5);
--color-project-column-bg: #{color.get('elevation/1')}; --color-project-column-bg: #{color.get('elevation/1')};
--color-caret: var(--color-text); --color-caret: var(--color-text);
--color-reaction-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .1);; --color-reaction-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, 0.1);
--color-reaction-hover-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .2);; --color-reaction-hover-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, 0.2);
--color-reaction-active-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .05);; --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-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-tooltip-bg: #{if($is-dark, color.get('elevation/7'), color.get('elevation/10'))};
--color-overlay-backdrop: rgba(#{color.get('elevation/1', 'rgb')}, 0.8); --color-overlay-backdrop: rgba(#{color.get('elevation/1', 'rgb')}, 0.8);
// navbar // navbar
--color-nav-bg: #{color.get('navbar/bg', $default: if($is-dark, color.get('elevation/1'), color.get('elevation/4')))}; --color-nav-bg: #{color.get(
--color-nav-hover-bg: #{color.get('navbar/hover', $default: if($is-dark, color.get('elevation/5'), color.get('elevation/5')))}; '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-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-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-secondary-nav-hover-bg: #{if(
$is-dark,
color.get('elevation/4'),
color.get('elevation/5')
)};
// label // label
--color-label-text: var(--color-text); --color-label-text: var(--color-text);
@ -389,26 +451,26 @@
// // In dark mode, invert emojis that are hard to read otherwise // // In dark mode, invert emojis that are hard to read otherwise
@if $is-dark { @if $is-dark {
.emoji[aria-label="check mark"], .emoji[aria-label='check mark'],
.emoji[aria-label="currency exchange"], .emoji[aria-label='currency exchange'],
.emoji[aria-label="TOP arrow"], .emoji[aria-label='TOP arrow'],
.emoji[aria-label="END arrow"], .emoji[aria-label='END arrow'],
.emoji[aria-label="ON! arrow"], .emoji[aria-label='ON! arrow'],
.emoji[aria-label="SOON arrow"], .emoji[aria-label='SOON arrow'],
.emoji[aria-label="heavy dollar sign"], .emoji[aria-label='heavy dollar sign'],
.emoji[aria-label="copyright"], .emoji[aria-label='copyright'],
.emoji[aria-label="registered"], .emoji[aria-label='registered'],
.emoji[aria-label="trade mark"], .emoji[aria-label='trade mark'],
.emoji[aria-label="multiply"], .emoji[aria-label='multiply'],
.emoji[aria-label="plus"], .emoji[aria-label='plus'],
.emoji[aria-label="minus"], .emoji[aria-label='minus'],
.emoji[aria-label="divide"], .emoji[aria-label='divide'],
.emoji[aria-label="curly loop"], .emoji[aria-label='curly loop'],
.emoji[aria-label="double curly loop"], .emoji[aria-label='double curly loop'],
.emoji[aria-label="wavy dash"], .emoji[aria-label='wavy dash'],
.emoji[aria-label="paw prints"], .emoji[aria-label='paw prints'],
.emoji[aria-label="musical note"], .emoji[aria-label='musical note'],
.emoji[aria-label="musical notes"] { .emoji[aria-label='musical notes'] {
filter: invert(100%) hue-rotate(180deg); filter: invert(100%) hue-rotate(180deg);
} }
} }

2
tools/build.js
View File

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

11
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 { cwd } from 'process';
import { join } from 'path'; import { join } from 'path';
@ -8,9 +8,10 @@ const distPath = join(cwd(), 'dist');
// useful to check issues with the css files optimization // useful to check issues with the css files optimization
// (in order to use this script, you need to first build the project removing the // (in order to use this script, you need to first build the project removing the
// optimization step from the build.js file) // optimization step from the build.js file)
optimizeCss(distPath, false).then(() => { optimizeCss(distPath, false)
.then(() => {
console.log('Optimization completed'); console.log('Optimization completed');
}).catch((err) => { })
.catch((err) => {
console.error(err); console.error(err);
}); });

12
tools/serve.js
View File

@ -30,12 +30,6 @@ const watcher = watch([`${src}/**/*`], {
ignoreInitial: true, ignoreInitial: true,
}); });
watcher.on('change', (file) => debouncer.add( watcher.on('change', (file) =>
deploy, debouncer.add(deploy, srcPath, distPath, serverPath, serviceName, file, true)
srcPath, );
distPath,
serverPath,
serviceName,
file,
true
));

19
tools/tasks/deploy.js
View File

@ -10,16 +10,23 @@ import { optimizeCss } from './optimize-css.js';
const logger = new Logger('deploy', 'info', 'brightMagenta'); 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...'); logger.info('Deploying...');
if(live && !sync.active) { if (live && !sync.active) {
sync.init({ sync.init({
proxy: 'http://lugit.local', proxy: 'http://lugit.local',
port: 8080, port: 8080,
}) });
} }
let shouldRestart = true; let shouldRestart = true;
@ -35,9 +42,9 @@ export async function deploy(srcPath, distPath, serverPath, serviceName, file =
// await buildImg(srcPath, distPath); // await buildImg(srcPath, distPath);
await buildTemplates(srcPath, distPath); await buildTemplates(srcPath, distPath);
await copyTo(distPath, serverPath); await copyTo(distPath, serverPath);
shouldRestart && await restartService(serviceName); shouldRestart && (await restartService(serviceName));
if(!shouldRestart && live) { if (!shouldRestart && live) {
sync.reload(); 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 fontsSrcPath does not exist, return
if (!existsSync(fontsSrcPath)) { 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; return;
} }

10
tools/tasks/img.js
View File

@ -34,7 +34,7 @@ export async function buildImg(srcHome, distHome) {
await Promise.all([ await Promise.all([
processLogos(images.logos, imgDestPath), processLogos(images.logos, imgDestPath),
processOthers(images.others, imgDestPath), processOthers(images.others, imgDestPath),
]) ]);
logger.info('Images build has finished'); logger.info('Images build has finished');
} }
@ -53,7 +53,10 @@ async function processLogos(logos, distHome) {
promises.push( promises.push(
generate(svg, join(distHome, 'favicon.svg'), { size: 32 }), generate(svg, join(distHome, 'favicon.svg'), { size: 32 }),
generate(svg, join(distHome, 'favicon.png'), { size: 180 }), 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 }) 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 { objects, options } = await loadSvg(svg);
const canvas = new fabric.Canvas(); 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 }); canvas.setDimensions({ width: newWidth, height: size });
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
ctx.scale( ctx.scale(

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

@ -45,8 +45,12 @@ export async function optimizeCss(distPath, replace = true) {
// could also be that the variable is assigned to another variable // could also be that the variable is assigned to another variable
if (node.type === 'Declaration' && node.property.startsWith('--')) { if (node.type === 'Declaration' && node.property.startsWith('--')) {
// check if its assigned to another variable // check if its assigned to another variable
if(node.property.startsWith('--')) { if (node.property.startsWith('--')) {
if (node.value && node.value.type === 'Function' && node.value.name === 'var') { if (
node.value &&
node.value.type === 'Function' &&
node.value.name === 'var'
) {
for (const child of node.value.children) { for (const child of node.value.children) {
if (child.type === 'Identifier') { if (child.type === 'Identifier') {
if (!usedCssVariables.includes(child.name)) { if (!usedCssVariables.includes(child.name)) {
@ -54,7 +58,11 @@ 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) 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 // if starts with var(, then its assigned to another variable or many variables, get everything that's inside

15
tools/tasks/scss.js
View File

@ -21,15 +21,12 @@ async function buildThemes(srcPath, distPath) {
info: logger.simpleInfo.bind(logger), info: logger.simpleInfo.bind(logger),
warn: logger.simpleWarn.bind(logger), warn: logger.simpleWarn.bind(logger),
error: logger.simpleError.bind(logger), error: logger.simpleError.bind(logger),
} },
}); });
logger.debug(`Writing ${theme.name} theme to disk`); logger.debug(`Writing ${theme.name} theme to disk`);
writeFileSync( writeFileSync(join(distPath, cssDistPath, `theme-${theme.name}.css`), result.css);
join(distPath, cssDistPath, `theme-${theme.name}.css`),
result.css
);
} }
} }
@ -44,12 +41,12 @@ export async function buildScss(srcPath, distPath) {
function getScssFiles(srcHome, path) { function getScssFiles(srcHome, path) {
try { try {
return readdirSync(join(srcHome, path)).filter( return readdirSync(join(srcHome, path))
(fn) => fn.endsWith('.scss') && !fn.startsWith('_') .filter((fn) => fn.endsWith('.scss') && !fn.startsWith('_'))
).map((file) => ({ .map((file) => ({
name: file.replace('.scss', ''), name: file.replace('.scss', ''),
path: join(srcHome, path, file), path: join(srcHome, path, file),
})) }));
} catch (err) { } catch (err) {
return []; return [];
} }

8
tools/utils/funcs.js
View File

@ -122,7 +122,6 @@ export async function sequence(tasks) {
return results; return results;
} }
async function tasksRunner(tasks, abort) { async function tasksRunner(tasks, abort) {
let result = null; let result = null;
for (const task of tasks) { for (const task of tasks) {
@ -144,15 +143,12 @@ export async function sequenceStream(tasks) {
console.log('sequenceStream aborted'); console.log('sequenceStream aborted');
}); });
return [ return [tasksRunner(tasks, abort), abort];
tasksRunner(tasks, abort),
abort,
]
} }
export const getArg = (flag, def) => { export const getArg = (flag, def) => {
const args = process.argv.slice(2); 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) { if (flagIndex !== -1 && flagIndex + 1 < args.length) {
return args[flagIndex + 1]; return args[flagIndex + 1];

4
tools/utils/logger.js
View File

@ -22,7 +22,7 @@ const ANSI_COLORS = {
brightBlue: '\x1b[94m', brightBlue: '\x1b[94m',
brightMagenta: '\x1b[95m', brightMagenta: '\x1b[95m',
brightCyan: '\x1b[96m', brightCyan: '\x1b[96m',
pink: '\x1b[38;2;255;182;193m' pink: '\x1b[38;2;255;182;193m',
}; };
export class Logger { export class Logger {
@ -55,7 +55,6 @@ export class Logger {
warn(...args) { warn(...args) {
if (!this.#canLog('warn')) return; if (!this.#canLog('warn')) return;
this.log('WARN', false, ...args); this.log('WARN', false, ...args);
} }
error(...args) { error(...args) {
@ -91,7 +90,6 @@ export class Logger {
simpleWarn(...args) { simpleWarn(...args) {
if (!this.#canLog('warn')) return; if (!this.#canLog('warn')) return;
this.log('WARN', true, ...args); this.log('WARN', true, ...args);
} }
simpleError(...args) { simpleError(...args) {