diff --git a/src/templates/base/head_navbar.tmpl b/src/templates/base/head_navbar.tmpl deleted file mode 100644 index 2075ece..0000000 --- a/src/templates/base/head_navbar.tmpl +++ /dev/null @@ -1,214 +0,0 @@ -{{$notificationUnreadCount := 0}} -{{if and .IsSigned .NotificationUnreadCount}} - {{$notificationUnreadCount = call .NotificationUnreadCount}} -{{end}} - - diff --git a/src/templates/home.tmpl b/src/templates/home.tmpl deleted file mode 100644 index 4c0c931..0000000 --- a/src/templates/home.tmpl +++ /dev/null @@ -1,9 +0,0 @@ -{{template "base/head" .}} -
-
-
- -
-
-
-{{template "base/footer" .}} diff --git a/src/templates/repo/home.tmpl b/src/templates/repo/home.tmpl deleted file mode 100644 index 5491408..0000000 --- a/src/templates/repo/home.tmpl +++ /dev/null @@ -1,162 +0,0 @@ -{{template "base/head" .}} -
- {{template "repo/header" .}} -
-
- {{template "base/alert" .}} - {{template "repo/code/recently_pushed_new_branches" .}} - {{if and (not .HideRepoInfo) (not .IsBlame)}} -
- {{- $description := .Repository.DescriptionHTML ctx -}} - {{if $description}}{{$description | RenderCodeBlock}}{{end}} - {{if .Repository.Website}}{{.Repository.Website}}{{end}} -
-
- {{/* it should match the code in issue-home.js */}} - {{range .Topics}}{{.Name}}{{end}} - {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}{{end}} -
- {{end}} - {{if and .Permission.IsAdmin (not .Repository.IsArchived)}} -
-
- - {{range .Topics}} - {{/* keep the same layout as Fomantic UI generated labels */}} - {{.Name}}{{svg "octicon-x" 16 "delete icon"}} - {{end}} -
-
-
- - -
-
- {{end}} - {{if .Repository.IsArchived}} -
- {{if .Repository.ArchivedUnix.IsZero}} - {{ctx.Locale.Tr "repo.archive.title"}} - {{else}} - {{ctx.Locale.Tr "repo.archive.title_date" (DateTime "long" .Repository.ArchivedUnix)}} - {{end}} -
- {{end}} -
-
- {{template "repo/sub_menu" .}} - {{$n := len .TreeNames}} - {{$l := Eval $n "-" 1}} - {{$isHomepage := (eq $n 0)}} -
-
- {{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "tw-mr-1"}} - {{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}} - {{$cmpBranch := ""}} - {{if ne .Repository.ID .BaseRepo.ID}} - {{$cmpBranch = printf "%s/%s:" (.Repository.OwnerName|PathEscape) (.Repository.Name|PathEscape)}} - {{end}} - {{$cmpBranch = print $cmpBranch (.BranchName|PathEscapeSegments)}} - {{$compareLink := printf "%s/compare/%s...%s" .BaseRepo.Link (.BaseRepo.DefaultBranch|PathEscapeSegments) $cmpBranch}} - - {{svg "octicon-git-pull-request"}} - - {{end}} - - {{if $isHomepage}} - {{ctx.Locale.Tr "repo.find_file.go_to_file"}} - {{end}} - - {{if and .CanWriteCode .IsViewBranch (not .Repository.IsMirror) (not .Repository.IsArchived) (not .IsViewFile)}} - - {{end}} - - {{if and $isHomepage (.Repository.IsTemplate)}} - - {{ctx.Locale.Tr "repo.use_template"}} - - {{end}} - {{if $isHomepage}} - {{/* only show the "code search" on the repo home page, it only does global search, - so do not show it when viewing file or directory to avoid misleading users (it doesn't search in a directory) */}} -
-
- - {{template "shared/search/button"}} -
-
- {{else}} - - {{StringUtils.EllipsisString .Repository.Name 30}} - {{- range $i, $v := .TreeNames -}} - / - {{- if eq $i $l -}} - {{$v}} - {{- else -}} - {{$p := index $.Paths $i}}{{$v}} - {{- end -}} - {{- end -}} - - {{end}} -
-
- - {{if $isHomepage}} -
- {{template "repo/clone_buttons" .}} - - {{template "repo/clone_script" .}}{{/* the script will update `.js-clone-url` and related elements */}} -
- {{template "repo/cite/cite_modal" .}} - {{end}} - {{if and (not $isHomepage) (not .IsViewFile) (not .IsBlame)}}{{/* IsViewDirectory (not home), TODO: split the templates, avoid using "if" tricks */}} - - {{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}} - - {{end}} -
-
- {{if .IsViewFile}} - {{template "repo/view_file" .}} - {{else if .IsBlame}} - {{template "repo/blame" .}} - {{else}}{{/* IsViewDirectory */}} - {{template "repo/view_list" .}} - {{end}} - -
-
-
-{{template "base/footer" .}} diff --git a/src/themes/fonts/.gitkeep b/src/themes/fonts/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/themes/fonts/KaTeX_AMS-Regular.73ea273a.woff2 b/src/themes/fonts/KaTeX_AMS-Regular.73ea273a.woff2 deleted file mode 100644 index 0acaaff..0000000 Binary files a/src/themes/fonts/KaTeX_AMS-Regular.73ea273a.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Caligraphic-Bold.a1abf90d.woff2 b/src/themes/fonts/KaTeX_Caligraphic-Bold.a1abf90d.woff2 deleted file mode 100644 index f390922..0000000 Binary files a/src/themes/fonts/KaTeX_Caligraphic-Bold.a1abf90d.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Caligraphic-Regular.d6484fce.woff2 b/src/themes/fonts/KaTeX_Caligraphic-Regular.d6484fce.woff2 deleted file mode 100644 index 75344a1..0000000 Binary files a/src/themes/fonts/KaTeX_Caligraphic-Regular.d6484fce.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Fraktur-Bold.931d67ea.woff2 b/src/themes/fonts/KaTeX_Fraktur-Bold.931d67ea.woff2 deleted file mode 100644 index 395f28b..0000000 Binary files a/src/themes/fonts/KaTeX_Fraktur-Bold.931d67ea.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Fraktur-Regular.172d3529.woff2 b/src/themes/fonts/KaTeX_Fraktur-Regular.172d3529.woff2 deleted file mode 100644 index 735f694..0000000 Binary files a/src/themes/fonts/KaTeX_Fraktur-Regular.172d3529.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Main-Bold.39890742.woff2 b/src/themes/fonts/KaTeX_Main-Bold.39890742.woff2 deleted file mode 100644 index ab2ad21..0000000 Binary files a/src/themes/fonts/KaTeX_Main-Bold.39890742.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Main-BoldItalic.20f389c4.woff2 b/src/themes/fonts/KaTeX_Main-BoldItalic.20f389c4.woff2 deleted file mode 100644 index 5931794..0000000 Binary files a/src/themes/fonts/KaTeX_Main-BoldItalic.20f389c4.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Main-Italic.fe2176f7.woff2 b/src/themes/fonts/KaTeX_Main-Italic.fe2176f7.woff2 deleted file mode 100644 index b50920e..0000000 Binary files a/src/themes/fonts/KaTeX_Main-Italic.fe2176f7.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Main-Regular.f650f111.woff2 b/src/themes/fonts/KaTeX_Main-Regular.f650f111.woff2 deleted file mode 100644 index eb24a7b..0000000 Binary files a/src/themes/fonts/KaTeX_Main-Regular.f650f111.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Math-BoldItalic.dcbcbd93.woff2 b/src/themes/fonts/KaTeX_Math-BoldItalic.dcbcbd93.woff2 deleted file mode 100644 index 2965702..0000000 Binary files a/src/themes/fonts/KaTeX_Math-BoldItalic.dcbcbd93.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Math-Italic.6d3d25f4.woff2 b/src/themes/fonts/KaTeX_Math-Italic.6d3d25f4.woff2 deleted file mode 100644 index 215c143..0000000 Binary files a/src/themes/fonts/KaTeX_Math-Italic.6d3d25f4.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_SansSerif-Bold.95591a92.woff2 b/src/themes/fonts/KaTeX_SansSerif-Bold.95591a92.woff2 deleted file mode 100644 index cfaa3bd..0000000 Binary files a/src/themes/fonts/KaTeX_SansSerif-Bold.95591a92.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_SansSerif-Italic.7d393d38.woff2 b/src/themes/fonts/KaTeX_SansSerif-Italic.7d393d38.woff2 deleted file mode 100644 index 349c06d..0000000 Binary files a/src/themes/fonts/KaTeX_SansSerif-Italic.7d393d38.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_SansSerif-Regular.cd5e231e.woff2 b/src/themes/fonts/KaTeX_SansSerif-Regular.cd5e231e.woff2 deleted file mode 100644 index a90eea8..0000000 Binary files a/src/themes/fonts/KaTeX_SansSerif-Regular.cd5e231e.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Script-Regular.c81d1b2a.woff2 b/src/themes/fonts/KaTeX_Script-Regular.c81d1b2a.woff2 deleted file mode 100644 index b3048fc..0000000 Binary files a/src/themes/fonts/KaTeX_Script-Regular.c81d1b2a.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Size1-Regular.6eec866c.woff2 b/src/themes/fonts/KaTeX_Size1-Regular.6eec866c.woff2 deleted file mode 100644 index c5a8462..0000000 Binary files a/src/themes/fonts/KaTeX_Size1-Regular.6eec866c.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Size2-Regular.2960900c.woff2 b/src/themes/fonts/KaTeX_Size2-Regular.2960900c.woff2 deleted file mode 100644 index e1bccfe..0000000 Binary files a/src/themes/fonts/KaTeX_Size2-Regular.2960900c.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Size3-Regular.e1951519.woff2 b/src/themes/fonts/KaTeX_Size3-Regular.e1951519.woff2 deleted file mode 100644 index 249a286..0000000 Binary files a/src/themes/fonts/KaTeX_Size3-Regular.e1951519.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Size4-Regular.e418bf25.woff2 b/src/themes/fonts/KaTeX_Size4-Regular.e418bf25.woff2 deleted file mode 100644 index 680c130..0000000 Binary files a/src/themes/fonts/KaTeX_Size4-Regular.e418bf25.woff2 and /dev/null differ diff --git a/src/themes/fonts/KaTeX_Typewriter-Regular.c295e7f7.woff2 b/src/themes/fonts/KaTeX_Typewriter-Regular.c295e7f7.woff2 deleted file mode 100644 index 771f1af..0000000 Binary files a/src/themes/fonts/KaTeX_Typewriter-Regular.c295e7f7.woff2 and /dev/null differ diff --git a/src/themes/fonts/codicon.4a477f66.ttf b/src/themes/fonts/codicon.4a477f66.ttf deleted file mode 100644 index c4a33a4..0000000 Binary files a/src/themes/fonts/codicon.4a477f66.ttf and /dev/null differ diff --git a/src/themes/scss/_utils/_color-utils.scss b/src/themes/scss/_utils/_color-utils.scss new file mode 100644 index 0000000..1a3df5b --- /dev/null +++ b/src/themes/scss/_utils/_color-utils.scss @@ -0,0 +1,100 @@ +@use 'sass:color'; +@use 'sass:map'; + +@function light-change($color, $amount) { + @return color.adjust($color, $lightness: $amount * -1); +} + +@function alpha-change($color, $alpha) { + @return color.change($color, $alpha: $alpha); +} + +@function color-variants-light($color, $with-base: false) { + $set: ( + '3%': light-change($color, -3%), + '6%': light-change($color, -6%), + '9%': light-change($color, -9%), + '10%': light-change($color, -10%), + '12%': light-change($color, -12%), + '15%': light-change($color, -15%), + '20%': light-change($color, -20%), + '25%': light-change($color, -25%), + '30%': light-change($color, -30%), + '35%': light-change($color, -35%), + '40%': light-change($color, -40%), + '45%': light-change($color, -45%), + '50%': light-change($color, -50%), + '55%': light-change($color, -55%), + '60%': light-change($color, -60%), + '65%': light-change($color, -65%), + '70%': light-change($color, -70%), + '75%': light-change($color, -75%), + '80%': light-change($color, -80%), + '85%': light-change($color, -85%), + '90%': light-change($color, -90%), + '95%': light-change($color, -95%), + '100%': light-change($color, -100%) + ); + + @if $with-base { + $set: map.merge((base: $color), $set); + } + + @return $set; +} + +@function color-variants-dark($color, $with-base: false) { + $set: ( + '3%': light-change($color, 3%), + '6%': light-change($color, 6%), + '9%': light-change($color, 9%), + '10%': light-change($color, 10%), + '12%': light-change($color, 12%), + '15%': light-change($color, 15%), + '20%': light-change($color, 20%), + '25%': light-change($color, 25%), + '30%': light-change($color, 30%), + '35%': light-change($color, 35%), + '40%': light-change($color, 40%), + '45%': light-change($color, 45%), + '50%': light-change($color, 50%), + '55%': light-change($color, 55%), + '60%': light-change($color, 60%), + '65%': light-change($color, 65%), + '70%': light-change($color, 70%), + '75%': light-change($color, 75%), + '80%': light-change($color, 80%), + '85%': light-change($color, 85%), + '90%': light-change($color, 90%), + '95%': light-change($color, 95%), + '100%': light-change($color, 100%) + ); + + @if $with-base { + $set: map.merge((base: $color), $set); + } + + @return $set; +} + +@function variants($color, $light: true, $dark: true, $base: true, $override-base-with: null) { + $set: (); + + @if $light { + $set: map.merge($set, (light: color-variants-light($color))); + } + + @if $dark { + $set: map.merge($set, (dark: color-variants-dark($color))); + } + + @if $base { + @if $override-base-with { + $set: map.merge($set, (base: $override-base-with)); + } @else { + $set: map.merge($set, (base: $color)); + } + } + + @return $set; +} \ No newline at end of file diff --git a/src/themes/scss/auto.scss b/src/themes/scss/auto.scss index 77aaa37..8f85974 100644 --- a/src/themes/scss/auto.scss +++ b/src/themes/scss/auto.scss @@ -1,2 +1,2 @@ -@import "./theme-light.css" (prefers-color-scheme: light); +// @import "./theme-light.css" (prefers-color-scheme: light); @import "./theme-dark.css" (prefers-color-scheme: dark); \ No newline at end of file diff --git a/src/themes/scss/dark.scss b/src/themes/scss/dark.scss index 4c8e36f..30b6bba 100644 --- a/src/themes/scss/dark.scss +++ b/src/themes/scss/dark.scss @@ -1,75 +1,83 @@ @use '@lucas-labs/lui-micro' as lui; -@use './utils/color-utils' as c; +@use './_utils/color-utils' as c; @use './theme' as theme; $is-dark: true; - $brand: #a6c6f7; $colors: ( - theme: ( - 'rosewater': c.variants(#f5e0dc, $is-dark), - 'flamingo': c.variants(#f2cdcd, $is-dark), - 'pink': c.variants(#f5c2e7, $is-dark), - 'mauve': c.variants(#9b6bf5, $is-dark), - 'red': c.variants(#f38ba8, $is-dark), - 'maroon': c.variants(#eba0ac, $is-dark), - 'peach': c.variants(#fab387, $is-dark), - 'yellow': c.variants(#f9e2af, $is-dark), - 'green': c.variants($brand, $is-dark), - 'dark-green': c.variants(#00E676, $is-dark), - 'teal': c.variants(#94e2d5, $is-dark), - 'sky': c.variants(#89dceb, $is-dark), - 'sapphire': c.variants(#74c7ec, $is-dark), - 'blue': c.variants(#89b4fa, $is-dark), - 'lavender': c.variants(#b4befe, $is-dark), - 'black': c.variants(#181825, $is-dark), - 'white': c.variants(#e6edf3, $is-dark), - ), + primary: c.variants($brand), + secondary: c.variants(#1e1d2f), text: #e6edf3, - primary: c.variants($brand, $is-dark), - secondary: c.variants(#5d5f7a, $is-dark), + subtle: #abaaca, // same as elevation/10 + palette: ( + 'red': c.variants(#f38ba8), // red + 'orange': c.variants(#fab387), // peach + 'yellow': c.variants(#f9e2af), // yellow + 'olive': c.variants(#e2f095), + 'green': c.variants(#00E676), // green + 'teal': c.variants(#94e2d5), // teal + 'blue': c.variants(#89b4fa), // blue + 'violet': c.variants(#b4befe), // lavender + 'purple': c.variants(#9b6bf5), // mauve + 'pink': c.variants(#f5c2e7), // pink + 'brown': c.variants(#f2cdcd), // flamingo + 'black': c.variants(#181825), // black + 'white': c.variants(#e6edf3), // white + ), elevation: ( - '1': #000000, // crust - '2': #040407, // mantle - '3': #07070f, // base - '4': #161720, // surface0 - '5': #1a1a25, // surface1 - '6': #222330, // surface2 - '7': #393c4d, // overlay0 - '8': #515569, // overlay1 - '9': #6b7188, // overlay2 - '10': #868ca5, // subtext0 - '11': #9aa2c2, // subtext1 - '12': #b6c0e0, // + '1': #000000, // elevation/1 + '2': #040406, // elevation/2 + '3': #07070e, // elevation/3 + '4': #0c0c18, // elevation/4 + '5': #15142c, // elevation/5 + '6': #1e1d2f, // elevation/6 + '7': #2d2c3f, // elevation/7 + '8': #403f55, // elevation/8 + '9': #6d6c89, // elevation/9 + '10': #abaaca, // elevation/10 + '11': #c3c2e4, // elevation/11 + '12': #d3d2f0, // elevation/12 + ) +); + +$variables: ( + 'font-size': ( + 'xs': .714rem, + 'sm': .857rem, + 'md': 1rem, + 'lg': 1.143rem, + 'xl': 1.286rem, + ), + 'font-family': '-apple-system, "Segoe UI", system-ui, "SF Pro Text", Inter, Roboto, "Helvetica Neue", Arial, sans-serif', + 'code-font-family': 'ui-monospace, SFMono-Regular, "Source Code Pro", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji)', + 'emoji-font-family': '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla"', + 'measure': ( + '.25x': 4px, + '.375x': 6px, + '.5x': 8px, + '.75x': 12px, + '.875x': 14px, + '1x': 16px, + '1.25x': 20px, + '1.5x': 24px, + '2x': 32px, + '2.5x': 40px, + '3x': 48px, + '4x': 64px, + ), + 'navbar-logo': ( + 'width': 56px, + 'height': 20px, + ), + 'repo-home': ( + 'sidebar-width': 296px, ) ); // init lui-micro, css-vars only (no reboot, no basic) @include lui.init( - $theme: ( - colors: $colors, - variables: ( - 'small-font-size': 12px, - 'base-font-size': 14px, - 'font-family': '"Outfit", Inter, Roboto, "Segoe UI", sans-serif', - 'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace', - 'measure': ( - '.25x': 4px, - '.5x': 8px, - '1x': 16px, - '1.25x': 20px, - '1.5x': 24px, - '2x': 32px, - '3x': 48px, - '4x': 64px, - ), - 'repo-home': ( - 'sidebar-width': 296px, - ) - ), - ), - + $theme: (colors: $colors, variables: $variables), $options: ( reboot: false, basic: false, @@ -78,6 +86,4 @@ $colors: ( ), ); -@include theme.make-theme( - $is-dark: $is-dark, -); \ No newline at end of file +@include theme.make-theme($is-dark); \ No newline at end of file diff --git a/src/themes/scss/light.scss b/src/themes/scss/light.scss index 815913d..6ec9675 100644 --- a/src/themes/scss/light.scss +++ b/src/themes/scss/light.scss @@ -1,83 +1,90 @@ -@use '@lucas-labs/lui-micro' as lui; -@use './utils/color-utils' as c; -@use './theme' as theme; +// @use '@lucas-labs/lui-micro' as lui; +// @use './utils/color-utils' as c; +// @use './theme' as theme; -$is-dark: true; +// $is-dark: false; -$brand: #6296e2; +// $brand: #6296e2; -$colors: ( - theme: ( - 'rosewater': c.variants(#dc8a78, $is-dark), - 'flamingo': c.variants(#dd7878, $is-dark), - 'pink': c.variants(#ea76cb, $is-dark), - 'mauve': c.variants($brand, $is-dark), - 'red': c.variants(#d20f39, $is-dark), - 'maroon': c.variants(#e64553, $is-dark), - 'peach': c.variants(#fe640b, $is-dark), - 'yellow': c.variants(#df8e1d, $is-dark), - 'green': c.variants($brand, $is-dark), - 'dark-green': c.variants(#11752d, $is-dark), - 'teal': c.variants(#179299, $is-dark), - 'sky': c.variants(#04a5e5, $is-dark), - 'sapphire': c.variants(#209fb5, $is-dark), - 'blue': c.variants(#1e66f5, $is-dark), - 'lavender': c.variants(#7287fd, $is-dark), - 'black': c.variants(#181825, $is-dark), - 'white': c.variants(#e6edf3, $is-dark), - ), - text: #4c4f69, - primary: c.variants($brand, $is-dark), - secondary: c.variants(#5d5f7a, $is-dark), - elevation: ( - '1': #dce0e8, // crust - '2': #e6e9ef, // mantle - '3': #eff1f5, // base - '4': #ccd0da, // surface0 - '5': #bcc0cc, // surface1 - '6': #acb0be, // surface2 - '7': #9ca0b0, // overlay0 - '8': #8c8fa1, // overlay1 - '9': #7c7f93, // overlay2 - '10': #6c6f85, // subtext0 - '11': #5c5f77, // subtext1 - '12': #4c4f69, // - ) -); +// $colors: ( +// theme: ( +// 'rosewater': c.variants(#dc8a78), +// 'flamingo': c.variants(#dd7878), +// 'pink': c.variants(#ea76cb), +// 'mauve': c.variants(#8652e7), +// 'red': c.variants(#d20f39), +// 'maroon': c.variants(#e64553), +// 'peach': c.variants(#fe640b), +// 'yellow': c.variants(#df8e1d), +// 'green': c.variants(#11752d), +// 'teal': c.variants(#179299), +// 'sky': c.variants(#04a5e5), +// 'sapphire': c.variants(#209fb5), +// 'blue': c.variants(#1e66f5), +// 'lavender': c.variants(#7287fd), +// 'black': c.variants(#181825), +// 'white': c.variants(#e6edf3), +// ), +// text: #4c4f69, +// primary: c.variants($brand), +// secondary: c.variants(#999cc5), +// elevation: ( +// '1': #dce0e8, // crust +// '2': #e6e9ef, // mantle +// '3': #eff1f5, // base +// '4': #dcdfe7, // surface0 +// '5': #bcc0cc, // surface1 +// '6': #acb0be, // surface2 +// '7': #9ca0b0, // overlay0 +// '8': #8c8fa1, // overlay1 +// '9': #7c7f93, // overlay2 +// '10': #6c6f85, // subtext0 +// '11': #5c5f77, // subtext1 +// '12': #4c4f69, // +// ) +// ); -// init lui-micro, css-vars only (no reboot, no basic) -@include lui.init( - $theme: ( - colors: $colors, - variables: ( - 'small-font-size': 12px, - 'base-font-size': 14px, - 'font-family': '"Outfit", Inter, Roboto, "Segoe UI", sans-serif', - 'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace', - 'measure': ( - '.25x': 4px, - '.5x': 8px, - '1x': 16px, - '1.25x': 20px, - '1.5x': 24px, - '2x': 32px, - '3x': 48px, - '4x': 64px, - ), - 'repo-home': ( - 'sidebar-width': 296px, - ) - ), - ), +// // init lui-micro, css-vars only (no reboot, no basic) +// @include lui.init( +// $theme: ( +// colors: $colors, +// variables: ( +// 'font-size': ( +// 'xs': .75rem, +// 'sm': .875rem, +// 'md': 1rem, +// 'lg': 1.125rem, +// 'xl': 1.25rem, +// ), +// 'font-family': '"Outfit", Inter, Roboto, "Segoe UI", sans-serif', +// 'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace', +// 'measure': ( +// '.25x': 4px, +// '.375x': 6px, +// '.5x': 8px, +// '.75x': 12px, +// '1x': 16px, +// '1.25x': 20px, +// '1.5x': 24px, +// '2x': 32px, +// '2.5x': 40px, +// '3x': 48px, +// '4x': 64px, +// ), +// 'repo-home': ( +// 'sidebar-width': 296px, +// ) +// ), +// ), - $options: ( - reboot: false, - basic: false, - fg-var-name: 'text', - bg-var-name: 'elevation/1', - ), -); +// $options: ( +// reboot: false, +// basic: false, +// fg-var-name: 'text', +// bg-var-name: 'elevation/1', +// ), +// ); -@include theme.make-theme( - $is-dark: $is-dark, -); \ No newline at end of file +// @include theme.make-theme( +// $is-dark: $is-dark, +// ); \ No newline at end of file diff --git a/src/themes/scss/theme/components/_editor.scss b/src/themes/scss/theme/components/_editor.scss new file mode 100644 index 0000000..0440ed4 --- /dev/null +++ b/src/themes/scss/theme/components/_editor.scss @@ -0,0 +1,135 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; + +@mixin editor { + #comment-form, .edit-content-zone { + padding: 0 !important; + border: none !important; + + .combo-markdown-editor { + .top.tabular.menu { + background-color: var(--color-box-header); + border-radius: var(--border-radius) var(--border-radius) 0 0; + min-height: 0px; + margin-bottom: var.get('measure/1x') !important; + + .item { + margin: -1px 0 0 -1px; // merge borders + border-top-left-radius: var(--border-radius) !important; + border-top-right-radius: var(--border-radius) !important; + padding: var.get('measure/.5x') var.get('measure/.75x') !important; + font-weight: 400; + + &:hover { + color: var(--color-text-light-2); + } + + &.active { + color: var(--color-text); + &:after { + // a hacky 1 pixel "button border" to make the border + // of the whole menu disappear under the active tab + display: block; + content: ''; + position: absolute; + top: 100%; + right: 0; + width: 100%; + height: 1px; + background-color: var(--color-body); + } + } + } + } + + .tab { + .EasyMDEContainer { // legacy editor + border: none !important; + + .editor-toolbar { + border: none !important; + } + } + + markdown-toolbar, .EasyMDEContainer .editor-toolbar { + padding: 0 10px !important; + + .markdown-toolbar-group { + border: none !important; + padding: 0 !important; + + &:not(:last-child) { + &:after { + content: ''; + display: block; + position: relative; + width: 1px; + flex: 1; + margin: var.get('measure/.375x') var.get('measure/.375x') !important; + background-color: color.get('elevation/6'); + } + } + } + + .markdown-toolbar-button, button { + line-height: 0; + display: inline-block; + color: var(--color-text-light-2) !important; + padding: var.get('measure/.375x') !important; + transition: background-color .1s ease; + border-radius: var.get('measure/.375x') !important; + height: auto; + min-width: fit-content; + + &:hover { + background-color: color.get('elevation/5') !important; + } + + // if has attribute level + &[level] { + width: 34px; + } + + // if aria-checked is true + &[aria-checked="true"] { + background-color: color.get('elevation/4'); + } + } + + button { + &:after { + vertical-align: unset !important; + } + } + } + + textarea, .CodeMirror.cm-s-easymde.CodeMirror-wrap { + background-color: transparent !important; + border: none !important; + padding: var.get('measure/1x') var.get('measure/1x') !important; + } + + .editor-statusbar { + margin-bottom: 0 !important; + } + + &.markup { + padding: 0 var.get('measure/1x') var.get('measure/1x'); + } + } + } + + .field:first-child { + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); + &:focus-within { + outline: 2px solid var(--color-accent); + border-radius: var(--border-radius); + } + } + + .field { + margin-bottom: var.get('measure/1x') !important; + } + } +} diff --git a/src/themes/scss/theme/components/_menu.scss b/src/themes/scss/theme/components/_menu.scss new file mode 100644 index 0000000..0e130ba --- /dev/null +++ b/src/themes/scss/theme/components/_menu.scss @@ -0,0 +1,114 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; + +@mixin menu { + .ui.dropdown>.menu { + --border-radius: 0; + opacity: 0; + + &.hidden { + opacity: 0 !important; + } + + &.visible { + opacity: 1 !important; + } + + top: calc(100% + var.get('measure/.5x')) !important; + border-radius: var.get('measure/.75x') !important; + transition: opacity .2s ease !important; + box-shadow: 0px 6px 12px -3px rgba(#{color.get('elevation/1', 'rgb')}, 0.5), + 0px 6px 18px 0px rgba(#{color.get('elevation/1', 'rgb')}, 0.1) !important; + + .divider { + margin-top: var.get('measure/.5x') !important; + margin-bottom: var.get('measure/.5x') !important; + } + + .item { + margin: 0 var.get('measure/.5x') !important; + border-radius: var.get('measure/.375x') !important; + padding: var.get('measure/.375x') var.get('measure/.5x') !important; + line-height: 1 !important; + display: flex; + flex-wrap: wrap; + align-content: center; + width: auto; + + &:first-of-type { + margin-top: var.get('measure/.5x') !important; + } + + &:last-of-type { + margin-bottom: var.get('measure/.5x') !important; + } + + &.clear-selection { + margin-bottom: var.get('measure/.5x') !important; + } + } + + input[type="text"], input[name="search"] { + --color-input-background: #{color.get('elevation/1')}; + --color-input-border: #{color.get('elevation/5')}; + + min-height: var.get('measure/2x') !important; + padding: 0 var.get('measure/.5x') !important; + font-size: var.get('font-size/md') !important; + border-radius: var.get('measure/.375x') !important; + + &:focus { + --color-primary: var(--color-accent); + } + } + + .scrolling.menu { + .item { + gap: var.get('measure/.5x') !important; + + &:hover { + &:before { + position: absolute; + top: calc(50% - 12px); + left: -8px; + width: 4px; + height: 24px; + content: ""; + background-color: var(--color-accent); + border-radius: 6px; + } + } + + .item-check-mark { + background-color: color.get('elevation/6'); + visibility: visible !important; + display: inline-flex; + padding: 2px; + border-radius: var.get('measure/.375x'); + border: 1px solid color.get('elevation/8'); + + svg { + visibility: hidden; + } + } + + .item-secondary-info { + flex-basis: 100%; + padding: 0 0 0 var.get('measure/.5x'); + color: color.get('subtle'); + } + + &.checked { + .item-check-mark { + background-color: var(--color-accent); + + svg { + visibility: visible; + } + } + } + } + } + } +} + diff --git a/src/themes/scss/theme/components/_signed-label.scss b/src/themes/scss/theme/components/_signed-label.scss new file mode 100644 index 0000000..32d1c0c --- /dev/null +++ b/src/themes/scss/theme/components/_signed-label.scss @@ -0,0 +1,40 @@ +@use '@lucas-labs/lui-micro/color' as color; +@use '@lucas-labs/lui-micro/var' as var; + +@mixin signed-label { + .label.isSigned { + font-size: var.get('font-size/sm') !important; + margin: 0px .25em !important; + padding: 0 !important; + display: inline-flex !important; + gap: 0px !important; + border-radius: 16px !important; + + --color-light-border: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important; + --color-label-bg: none !important; + --color-text: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important; + --color-green-badge-bg: none !important; + --color-green-badge-hover-bg: rgba(#{color.get('palette/green/base', 'rgb')}, 0.05) !important; + --color-label-hover-bg: rgba(#{color.get('palette/green/base', 'rgb')}, 0.05) !important; + --color-label-text: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important; + --color-green-badge: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important; + + .shortsha { + padding: 2px 6px 2px 8px !important; + } + + .ui.detail.icon.button { + opacity: 1 !important; + padding: 2px 8px 2px 6px !important; + margin: 0 !important; + background: none !important; + border-color: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important; + } + + &.isVerified { + .ui.detail.icon.button { + padding: 2px 8px 2px 6px !important; + } + } + } +} \ No newline at end of file diff --git a/src/themes/scss/theme/components/button/index.scss b/src/themes/scss/theme/components/button/index.scss new file mode 100644 index 0000000..7e90e5a --- /dev/null +++ b/src/themes/scss/theme/components/button/index.scss @@ -0,0 +1,33 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; + +@mixin hollow { + padding: var.get('measure/.375x') var.get('measure/.5x') !important; + background-color: transparent !important; + + button, .button { + border-color: color.get('elevation/6') !important; + gap: var.get('measure/.5x') !important; + + &:hover { + border-color: color.get('elevation/7') !important; + + +.label { + border-left-color: color.get('elevation/7') !important; + } + } + } + + .label { + border-color: color.get('elevation/6') !important; + background-color: transparent !important; + + &:hover { + border-color: color.get('elevation/7') !important; + } + } + + &:hover { + border-color: color.get('elevation/7') !important; + } +} \ No newline at end of file diff --git a/src/themes/scss/theme/components/index.scss b/src/themes/scss/theme/components/index.scss new file mode 100644 index 0000000..887a831 --- /dev/null +++ b/src/themes/scss/theme/components/index.scss @@ -0,0 +1,3 @@ +@forward './signed-label'; +@forward './editor'; +@forward './menu'; \ No newline at end of file diff --git a/src/themes/scss/theme/index.scss b/src/themes/scss/theme/index.scss index ece1050..0d82f2a 100644 --- a/src/themes/scss/theme/index.scss +++ b/src/themes/scss/theme/index.scss @@ -1,425 +1,17 @@ -@use '@lucas-labs/lui-micro/color' as color; -@use './modules/chroma' as chroma; -@use './modules/monaco' as monaco; -@use './modules/codemirror' as codemirror; -@use './modules/custom' as custom; -@use '@lucas-labs/lui-micro/var' as var; +@use './vars'; +@use './components'; +@use './modules'; @mixin make-theme($is-dark: true) { - $lvl1: #{color.get('elevation/3')}; - $lvl1-rgb: #{color.get('elevation/3', 'rgb')}; - $lvl2: #{color.get('elevation/2')}; - $lvl2-rgb: #{color.get('elevation/2', 'rgb')}; - $lvl3: #{color.get('elevation/1')}; - $lvl3-rgb: #{color.get('elevation/1', 'rgb')}; + @include vars.base; + @include vars.colors($is-dark); - :root { - * { - --fonts-regular: #{var.get('font-family')}; - --fonts-monospace: #{var.get('code-font-family')}; - } + // components + @include components.signed-label; // label for GPG signed commits + @include components.editor; // github-style (kinda) markdown editor in comments, issues, etc. + @include components.menu; // github-style dropdown menus - @if $is-dark { - color-scheme: dark; - --is-dark-theme: true; - } @else { - color-scheme: light; - --is-dark-theme: false; - } - - accent-color: #{color.get('primary/base')}; - - --color-primary: #{color.get('primary/base')}; - --color-primary-contrast: #{color.get('primary/base', 'contrast')}; - - --color-primary-dark-1: #{color.get('primary/dark/3%')}; - --color-primary-dark-2: #{color.get('primary/dark/6%')}; - --color-primary-dark-3: #{color.get('primary/dark/9%')}; - --color-primary-dark-4: #{color.get('primary/dark/12%')}; - --color-primary-dark-5: #{color.get('primary/dark/15%')}; - --color-primary-dark-6: #{color.get('primary/dark/18%')}; - --color-primary-dark-7: #{color.get('primary/dark/21%')}; - - --color-primary-light-1: #{color.get('primary/light/3%')}; - --color-primary-light-2: #{color.get('primary/light/6%')}; - --color-primary-light-3: #{color.get('primary/light/9%')}; - --color-primary-light-4: #{color.get('primary/light/12%')}; - --color-primary-light-5: #{color.get('primary/light/15%')}; - --color-primary-light-6: #{color.get('primary/light/18%')}; - --color-primary-light-7: #{color.get('primary/light/21%')}; - - --color-primary-alpha-10: rgba(#{color.get('primary/base', 'rgb')}, 0.1); - --color-primary-alpha-20: rgba(#{color.get('primary/base', 'rgb')}, 0.2); - --color-primary-alpha-30: rgba(#{color.get('primary/base', 'rgb')}, 0.3); - --color-primary-alpha-40: rgba(#{color.get('primary/base', 'rgb')}, 0.4); - --color-primary-alpha-50: rgba(#{color.get('primary/base', 'rgb')}, 0.5); - --color-primary-alpha-60: rgba(#{color.get('primary/base', 'rgb')}, 0.6); - --color-primary-alpha-70: rgba(#{color.get('primary/base', 'rgb')}, 0.7); - --color-primary-alpha-80: rgba(#{color.get('primary/base', 'rgb')}, 0.8); - --color-primary-alpha-90: rgba(#{color.get('primary/base', 'rgb')}, 0.9); - - - --color-primary-hover: #{color.get('primary/light/3%')}; - --color-primary-active: #{color.get('primary/light/6%')}; - --color-secondary: #{color.get('elevation/5')}; - - --color-secondary-dark-1: #{color.get('secondary/light/3%')}; - --color-secondary-dark-2: #{color.get('secondary/light/6%')}; - --color-secondary-dark-3: #{color.get('secondary/light/9%')}; - --color-secondary-dark-4: #{color.get('secondary/light/12%')}; - --color-secondary-dark-5: #{color.get('secondary/light/15%')}; - --color-secondary-dark-6: #{color.get('secondary/light/18%')}; - --color-secondary-dark-7: #{color.get('secondary/light/21%')}; - --color-secondary-dark-8: #{color.get('secondary/light/24%')}; - --color-secondary-dark-9: #{color.get('secondary/light/27%')}; - --color-secondary-dark-10: #{color.get('secondary/light/30%')}; - --color-secondary-dark-11: #{color.get('secondary/light/33%')}; - --color-secondary-dark-12: #{color.get('secondary/light/36%')}; - --color-secondary-dark-13: #{color.get('secondary/light/39%')}; - - --color-secondary-light-1: #{color.get('secondary/dark/3%')}; - --color-secondary-light-2: #{color.get('secondary/dark/6%')}; - --color-secondary-light-3: #{color.get('secondary/dark/9%')}; - --color-secondary-light-4: #{color.get('secondary/dark/12%')}; - - --color-secondary-alpha-10: rgba(#{color.get('secondary/base', 'rgb')}, 0.1); - --color-secondary-alpha-20: rgba(#{color.get('secondary/base', 'rgb')}, 0.2); - --color-secondary-alpha-30: rgba(#{color.get('secondary/base', 'rgb')}, 0.3); - --color-secondary-alpha-40: rgba(#{color.get('secondary/base', 'rgb')}, 0.4); - --color-secondary-alpha-50: rgba(#{color.get('secondary/base', 'rgb')}, 0.5); - --color-secondary-alpha-60: rgba(#{color.get('secondary/base', 'rgb')}, 0.6); - --color-secondary-alpha-70: rgba(#{color.get('secondary/base', 'rgb')}, 0.7); - --color-secondary-alpha-80: rgba(#{color.get('secondary/base', 'rgb')}, 0.8); - --color-secondary-alpha-90: rgba(#{color.get('secondary/base', 'rgb')}, 0.9); - - /* colors */ - --color-red: #{color.get('theme/red/base')}; - --color-orange: #{color.get('theme/peach/base')}; - --color-yellow: #{color.get('theme/yellow/base')}; - --color-olive: #{color.get('theme/green/base')}; - --color-green: #{color.get('theme/green/base')}; - --color-teal: #{color.get('theme/teal/base')}; - --color-blue: #{color.get('theme/blue/base')}; - --color-violet: #{color.get('theme/lavender/base')}; - --color-purple: #{color.get('theme/mauve/base')}; - --color-pink: #{color.get('theme/pink/base')}; - --color-brown: #{color.get('theme/flamingo/base')}; - --color-grey: #{color.get('elevation/9')}; - --color-black: #{color.get('elevation/1')}; - - /* dark variants */ - --color-red-dark-1: #{color.get('theme/red/dark/12%')}; - --color-orange-dark-1: #{color.get('theme/peach/dark/12%')}; - --color-yellow-dark-1: #{color.get('theme/yellow/dark/12%')}; - --color-olive-dark-1: #{color.get('theme/green/dark/12%')}; - --color-green-dark-1: #{color.get('theme/green/dark/12%')}; - --color-teal-dark-1: #{color.get('theme/teal/dark/12%')}; - --color-blue-dark-1: #{color.get('theme/blue/dark/12%')}; - --color-violet-dark-1: #{color.get('theme/lavender/dark/12%')}; - --color-purple-dark-1: #{color.get('theme/mauve/dark/12%')}; - --color-pink-dark-1: #{color.get('theme/pink/dark/12%')}; - --color-brown-dark-1: #{color.get('theme/flamingo/dark/12%')}; - - --color-red-dark-2: #{color.get('theme/red/dark/15%')}; - --color-orange-dark-2: #{color.get('theme/peach/dark/15%')}; - --color-yellow-dark-2: #{color.get('theme/yellow/dark/15%')}; - --color-olive-dark-2: #{color.get('theme/green/dark/15%')}; - --color-green-dark-2: #{color.get('theme/green/dark/15%')}; - --color-teal-dark-2: #{color.get('theme/teal/dark/15%')}; - --color-blue-dark-2: #{color.get('theme/blue/dark/15%')}; - --color-violet-dark-2: #{color.get('theme/lavender/dark/15%')}; - --color-purple-dark-2: #{color.get('theme/mauve/dark/15%')}; - --color-pink-dark-2: #{color.get('theme/pink/dark/15%')}; - --color-brown-dark-2: #{color.get('theme/flamingo/dark/15%')}; - - /* light variants */ - --color-red-light: #{color.get('theme/red/light/12%')}; - --color-orange-light: #{color.get('theme/peach/light/12%')}; - --color-yellow-light: #{color.get('theme/yellow/light/12%')}; - --color-olive-light: #{color.get('theme/green/light/12%')}; - --color-green-light: #{color.get('theme/green/light/12%')}; - --color-teal-light: #{color.get('theme/teal/light/12%')}; - --color-blue-light: #{color.get('theme/blue/light/12%')}; - --color-violet-light: #{color.get('theme/lavender/light/12%')}; - --color-purple-light: #{color.get('theme/mauve/light/12%')}; - --color-pink-light: #{color.get('theme/pink/light/12%')}; - --color-brown-light: #{color.get('theme/flamingo/light/12%')}; - --color-grey-light: #{color.get('elevation/11')}; - --color-black-light: #{if( - is-dark, - color.get('theme/black/light/12%'), - color.get('theme/white/light/12%') - )}; - - /* other colors */ - --color-gold: #{color.get('theme/rosewater/base')}; - --color-white: #{color.get('text')}; - --color-diff-removed-word-bg: rgba(#{color.get('theme/red/base', 'rgb')}, 0.15); - --color-diff-added-word-bg: rgba(#{color.get('theme/green/base', 'rgb')}, 0.15); - --color-diff-removed-row-bg: rgba(#{color.get('theme/red/base', 'rgb')}, 0.07); - --color-diff-moved-row-bg: rgba(#{color.get('theme/yellow/base', 'rgb')}, 0.07); - --color-diff-added-row-bg: rgba(#{color.get('theme/green/base', 'rgb')}, 0.07); - --color-diff-removed-row-border: rgba(#{color.get('theme/red/base', 'rgb')}, 0.07); - --color-diff-moved-row-border: rgba(#{color.get('theme/yellow/base', 'rgb')}, 0.07); - --color-diff-added-row-border: rgba(#{color.get('theme/green/base', 'rgb')}, 0.07); - --color-diff-inactive: #{color.get('elevation/9')}; - --color-error-border: #{color.get('theme/red/base')}; - --color-error-bg: rgba(#{color.get('theme/red/base', 'rgb')}, 0.15); - --color-error-bg-active: #{color.get('theme/red/light/6%')}; - --color-error-bg-hover: #{color.get('theme/red/light/12%')}; - --color-error-text: #{color.get('theme/red/base')}; - --color-success-border: #{color.get('theme/green/light/12%')}; - --color-success-bg: rgba(#{color.get('theme/green/base', 'rgb')}, 0.15); - --color-success-text: #{color.get('text')}; - --color-warning-border: #{color.get('theme/yellow/light/12%')}; - --color-warning-bg: #{color.get('theme/yellow/base')}; - --color-warning-text: #{$lvl1}; - --color-info-border: #{color.get('theme/blue/light/12%')}; - --color-info-bg: #{$lvl1}; - --color-info-text: #{color.get('text')}; - --color-red-badge: #{color.get('theme/red/light/12%')}; - --color-red-badge-bg: #{$lvl1}; - --color-red-badge-hover-bg: #{color.get('theme/red/light/6%')}; - --color-green-badge: #{color.get('theme/green/base')}; - --color-green-badge-bg: #{$lvl1}; - --color-green-badge-hover-bg: #{color.get('theme/green/light/6%')}; - --color-yellow-badge: #{color.get('theme/yellow/base')}; - --color-yellow-badge-bg: #{$lvl1}; - --color-yellow-badge-hover-bg: #{color.get('theme/yellow/light/6%')}; - --color-orange-badge: #{color.get('theme/peach/base')}; - --color-orange-badge-bg: #{$lvl1}; - --color-orange-badge-hover-bg: #{color.get('theme/peach/light/6%')}; - --color-git: #{color.get('theme/peach/base')}; - --color-label-bg: #{color.get('primary/base')}; - --color-label-hover-bg: #{color.get('primary/light/6%')}; - - /* target-based colors */ - --color-body: #{$lvl1}; - --color-box-header: #{rgba(color.get('elevation/2', 'rgb'), 1)}; - --color-box-body: var(--color-body); - --color-box-body-highlight: #{color.get('elevation/4')}; - --color-text-dark: #{color.get('elevation/10')}; - --color-text: #{color.get('text')}; - --color-text-light: #{color.get('elevation/12')}; - --color-text-light-1: #{color.get('elevation/11')}; - --color-text-light-2: #{color.get('elevation/10')}; - --color-text-light-3: #{color.get('elevation/9')}; - --color-footer: rgba(#{color.get('elevation/2', 'rgb')}, 0.2); - --color-timeline: #{color.get('elevation/4')}; - --color-input-text: #{color.get('text')}; - --color-input-background: #{color.get('elevation/4')}; - --color-input-toggle-background: #{color.get('elevation/4')}; - --color-input-border: #{color.get('elevation/5')}; - --color-input-border-hover: #{color.get('elevation/6')}; - --color-header-wrapper: #{$lvl2}; - --color-header-wrapper-transparent: #00000000; - --color-light: #{color.get('elevation/6')}; - --color-light-mimic-enabled: rgba( - 0, - 0, - 0, - calc(40 / 255 * 222 / 255 / var(--opacity-disabled)) - ); - --color-light-border: #{color.get('elevation/6')}; - --color-hover: rgba(#{color.get('elevation/6', 'rgb')}, 0.1); - --color-active: rgba(#{color.get('text', 'rgb')}, 0.1); - --color-menu: #{color.get('elevation/3')}; - --color-card: #{color.get('elevation/3')}; - --color-markup-table-row: rgba(#{color.get('text', 'rgb')}, 0.02); - --color-markup-code-block: #{color.get('elevation/2')}; - --color-button: #{color.get('elevation/4')}; - --color-code-bg: $lvl1; - --color-code-sidebar-bg: #{color.get('elevation/4')}; - --color-shadow: rgba(#{$lvl1-rgb}, 0.1); - --color-secondary-bg: #{color.get('elevation/4')}; - --color-text-focus: #{color.get('text')}; - --color-expand-button: #{color.get('elevation/6')}; - --color-placeholder-text: #{color.get('elevation/9')}; - --color-editor-line-highlight: var(--color-primary-light-5); - --color-project-board-bg: #{color.get('elevation/2')}; - --color-caret: var(--color-text); - --color-reaction-bg: rgba(#{color.get('text', 'rgb')}, 0.07); - --color-reaction-active-bg: var(--color-primary-alpha-40); - --color-tooltip-text: #{color.get('primary/base')}; - --color-tooltip-bg: #{color.get('primary/base', 'contrast')}; - --color-nav-bg: #{$lvl2}; - --color-secondary-nav-bg: #{$lvl2}; - --color-nav-text: #{color.get('text')}; - --color-nav-hover-bg: #{color.get('elevation/6')}; - --color-label-active-bg: #{color.get('elevation/6')}; - --color-label-text: #{color.get('primary/base', 'contrast')}; - --color-accent: var(--color-primary-light-1); - --color-small-accent: var(--color-primary-light-5); - --color-active-line: #{color.get('elevation/5')}; - } - - @if $is-dark { - /* invert emojis that are hard to read otherwise */ - .emoji[aria-label='check mark'], - .emoji[aria-label='currency exchange'], - .emoji[aria-label='TOP arrow'], - .emoji[aria-label='END arrow'], - .emoji[aria-label='ON! arrow'], - .emoji[aria-label='SOON arrow'], - .emoji[aria-label='heavy dollar sign'], - .emoji[aria-label='copyright'], - .emoji[aria-label='registered'], - .emoji[aria-label='trade mark'], - .emoji[aria-label='multiply'], - .emoji[aria-label='plus'], - .emoji[aria-label='minus'], - .emoji[aria-label='divide'], - .emoji[aria-label='curly loop'], - .emoji[aria-label='double curly loop'], - .emoji[aria-label='wavy dash'], - .emoji[aria-label='paw prints'], - .emoji[aria-label='musical note'], - .emoji[aria-label='musical notes'] { - filter: invert(100%) hue-rotate(180deg); - } - } - - @media (prefers-color-scheme: dark) { - input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:hover, input:-webkit-autofill:active, .ui.form .field.field input:-webkit-autofill, .ui.form .field.field input:-webkit-autofill:focus, .ui.form .field.field input:-webkit-autofill:hover, .ui.form .field.field input:-webkit-autofill:active { - -webkit-background-clip: text; - -webkit-text-fill-color: var(--color-secondary); - box-shadow: 0 0 0 100px var(--color-primary-light-3) inset !important; - border-color: var(--color-primary-light-3) !important; - } - } - - .ui.ui.ui.button:not(.inverted, .basic), - .ui.ui.ui.label:not(.inverted, .basic) { - &.primary, - &.green, - &.red, - &.teal { - color: $lvl1; - &:hover { - color: $lvl3; - } - } - } - - .ui.success.message, .ui.attached.success.message, .ui.positive.message, .ui.attached.positive.message { - background: var(--color-success-bg); - color: var(--color-success-text); - border-color: var(--color-success-border); - } - - .ui.grey.labels .label, .ui.ui.ui.grey.label { - background-color: color.get('primary/base'); - border-color: color.get('primary/base'); - color: $lvl1; - font-weight: 900; - } - - .ui.label, .ui.menu .item>.label { - background: var(--color-label-bg); - color: var(--color-label-text); - } - - .ui.basic.modal { - background-color: $lvl3; - } - - .ui.error.message .header, .ui.negative.message .header, .ui.red.message .header { - color: var(--color-error-text); - } - - // modal text color for the "Remove GPG Key" modal - .ui.basic.modal, - .ui.basic.modal > .header, - .ui.inverted.button { - color: color.get('text') !important; - } - - ::selection { - background: rgba(#{color.get('theme/rosewater/base', 'rgb')}, 0.3) !important; - } - - body { - font-size: var.get('base-font-size'); - } - - footer { - justify-content: flex-end !important; - - .right-links { - justify-content: space-around !important; - } - - .right-links>a { - border-left: none !important; - padding-left: 0px !important; - margin-left: 0px !important; - } - - .ui.dropdown .menu { - left: -50% !important; - margin-bottom: 16px !important; - } - } - - .label.isSigned { - margin: 0px .25em !important; - padding: 0 !important; - display: inline-flex !important; - gap: 0px !important; - border-radius: 16px !important; - - --color-light-border: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important; - --color-label-bg: none !important; - --color-text: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important; - --color-green-badge-bg: none !important; - --color-green-badge-hover-bg: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 0.05) !important; - --color-label-hover-bg: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 0.05) !important; - --color-label-text: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important; - --color-green-badge: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important; - - .shortsha { - padding: 4px 6px 4px 12px !important; - } - - .ui.detail.icon.button { - opacity: 1 !important; - padding: 4px 8px 4px 6px !important; - margin: 0 !important; - background: none !important; - border-color: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important; - } - - &.isVerified { - .ui.detail.icon.button { - padding: 4px 12px 4px 6px !important; - } - } - } - - #commits-table { - --color-light: transparent !important; - } - - .flex-list { - .flex-item { - .flex-item-main { - gap: var.get('measure/.25x'); - - .flex-item-header { - .flex-item-title { - gap: var.get('measure/.5x'); - } - } - - .flex-item-body:not(:last-child) { - margin-bottom: var.get('measure/1x'); - } - } - } - } - - @include chroma.make-chroma-styles; - @include codemirror.make-code-mirror-styles; - @include monaco.make-monaco-styles($is-dark: true); - @include custom.apply-custom-styles; + // modules + @include modules.repo; // repo page + @include modules.issues; // issues page } diff --git a/src/themes/scss/theme/modules/_chroma.scss b/src/themes/scss/theme/modules/_chroma.scss deleted file mode 100644 index c22cf7d..0000000 --- a/src/themes/scss/theme/modules/_chroma.scss +++ /dev/null @@ -1,304 +0,0 @@ -@use '@lucas-labs/lui-micro/color' as color; -@use '@lucas-labs/lui-micro/var' as var; - - -@mixin make-chroma-styles { - .chroma .code-inner{ - font: 14px var.get('code-font-family'); - } - - /* NameBuiltinPseudo */ - .chroma .bp { - color: color.get('theme/peach/base'); - } - /* Comment */ - .chroma .c { - color: color.get('elevated/7'); - } - /* CommentSingle */ - .chroma .c1 { - color: color.get('elevated/7'); - } - /* CommentHashbang */ - .chroma .ch { - color: color.get('elevated/7'); - } - /* CommentMultiline */ - .chroma .cm { - color: color.get('elevated/7'); - } - /* CommentPreproc */ - .chroma .cp { - color: color.get('theme/blue/base'); - } - /* CommentPreprocFile */ - .chroma .cpf { - color: color.get('theme/blue/base'); - } - /* CommentSpecial */ - .chroma .cs { - color: color.get('elevated/7'); - } - /* LiteralStringDelimiter */ - .chroma .dl { - color: color.get('theme/blue/base'); - } - /* NameFunctionMagic */ - .chroma .fm { - } - /* Generic */ - .chroma .g { - } - /* GenericDeleted */ - .chroma .gd { - color: color.get('theme'); - background-color: rgba(#{color.get('theme/red/base', 'rgb')}, 0.15); - } - /* GenericEmph */ - .chroma .ge { - font-style: italic; - } - /* GenericHeading */ - .chroma .gh { - color: color.get('theme/sky/base'); - } - /* GenericInserted */ - .chroma .gi { - color: color.get('theme'); - background-color: rgba(#{color.get('theme/green/base', 'rgb')}, 0.15); - } - /* GenericUnderline */ - .chroma .gl { - } - /* GenericOutput */ - .chroma .go { - color: color.get('theme/peach/base'); - } - /* GenericPrompt */ - .chroma .gp { - color: color.get('elevated/7'); - font-weight: bold; - } - /* GenericError */ - .chroma .gr { - color: color.get('theme/maroon/base'); - } - /* GenericStrong */ - .chroma .gs { - font-weight: bold; - } - /* GenericTraceback */ - .chroma .gt { - color: color.get('theme/maroon/base'); - } - /* GenericSubheading */ - .chroma .gu { - color: color.get('theme/sky/base'); - } - /* LiteralNumberIntegerLong */ - .chroma .il { - color: color.get('theme/peach/base'); - } - /* Keyword */ - .chroma .k { - color: color.get('theme/mauve/base'); - } - /* KeywordConstant */ - .chroma .kc { - color: color.get('theme/yellow/base'); - } - /* KeywordDeclaration */ - .chroma .kd { - color: color.get('theme/mauve/base'); - } - /* KeywordNamespace */ - .chroma .kn { - color: color.get('theme/yellow/base'); - } - /* KeywordPseudo */ - .chroma .kp { - color: color.get('theme/mauve/base'); - font-weight: bold; - } - /* KeywordReserved */ - .chroma .kr { - color: color.get('theme/mauve/base'); - } - /* KeywordType */ - .chroma .kt { - color: color.get('theme/yellow/base'); - } - /* Literal */ - .chroma .l { - } - /* LiteralDate */ - .chroma .ld { - } - /* LiteralNumber */ - .chroma .m { - color: color.get('theme/peach/base'); - } - /* LiteralNumberBin */ - .chroma .mb { - color: color.get('theme/peach/base'); - } - /* LiteralNumberFloat */ - .chroma .mf { - color: color.get('theme/peach/base'); - } - /* LiteralNumberHex */ - .chroma .mh { - color: color.get('theme/peach/base'); - } - /* LiteralNumberInteger */ - .chroma .mi { - color: color.get('theme/peach/base'); - } - /* LiteralNumberOct */ - .chroma .mo { - color: color.get('theme/peach/base'); - } - /* Name */ - .chroma .n { - color: color.get('theme/lavender/base'); - } - /* NameAttribute */ - .chroma .na { - color: color.get('theme/yellow/base'); - } - /* NameBuiltin */ - .chroma .nb { - color: color.get('theme/peach/base'); - } - /* NameClass */ - .chroma .nc { - color: color.get('theme/yellow/base'); - } - /* NameDecorator */ - .chroma .nd { - color: color.get('theme/pink/base'); - } - /* NameException */ - .chroma .ne { - color: color.get('theme/maroon/base'); - } - /* NameFunction */ - .chroma .nf { - color: color.get('theme/blue/base'); - } - /* NameEntity */ - .chroma .ni { - color: color.get('theme/pink/base'); - } - /* NameLabel */ - .chroma .nl { - color: color.get('theme/yellow/base'); - } - /* NameNamespace */ - .chroma .nn { - color: color.get('theme/yellow/base'); - } - /* NameConstant */ - .chroma .no { - color: color.get('theme/yellow/base'); - } - /* NameTag */ - .chroma .nt { - color: color.get('theme/mauve/base'); - } - /* NameVariable */ - .chroma .nv { - color: color.get('theme/peach/base'); - } - /* NameOther */ - .chroma .nx { - color: color.get('theme/peach/base'); - } - /* Operator */ - .chroma .o { - color: color.get('theme/sky/base'); - } - /* OperatorWord */ - .chroma .ow { - color: color.get('theme/sky/base'); - font-weight: bold; - } - /* Punctuation */ - .chroma .p { - color: color.get('elevated/9'); - } - /* NameProperty */ - .chroma .py { - } - /* LiteralString */ - .chroma .s { - color: color.get('theme/green/base'); - } - /* LiteralStringSingle */ - .chroma .s1 { - color: color.get('theme/green/base'); - } - /* LiteralStringDouble */ - .chroma .s2 { - color: color.get('theme/green/base'); - } - /* LiteralStringAffix */ - .chroma .sa { - color: color.get('theme/green/base'); - } - /* LiteralStringBacktick */ - .chroma .sb { - color: color.get('theme/green/base'); - } - /* LiteralStringChar */ - .chroma .sc { - color: color.get('theme/green/base'); - } - /* LiteralStringDoc */ - .chroma .sd { - color: color.get('theme/green/base'); - } - /* LiteralStringEscape */ - .chroma .se { - color: color.get('theme/blue/base'); - } - /* LiteralStringHeredoc */ - .chroma .sh { - color: color.get('theme/green/base'); - } - /* LiteralStringInterpol */ - .chroma .si { - color: color.get('theme/green/base'); - } - /* LiteralStringRegex */ - .chroma .sr { - color: color.get('theme/blue/base'); - } - /* LiteralStringSymbol */ - .chroma .ss { - color: color.get('theme/green/base'); - } - /* LiteralStringOther */ - .chroma .sx { - color: color.get('theme/green/base'); - } - /* NameVariableClass */ - .chroma .vc { - color: color.get('theme/yellow/base'); - } - /* NameVariableGlobal */ - .chroma .vg { - color: color.get('theme/peach/base'); - } - /* NameVariableInstance */ - .chroma .vi { - color: color.get('theme/yellow/base'); - } - /* NameVariableMagic */ - .chroma .vm { - } - /* TextWhitespace */ - .chroma .w { - color: color.get('elevated/4'); - } -} diff --git a/src/themes/scss/theme/modules/_codemirror.scss b/src/themes/scss/theme/modules/_codemirror.scss deleted file mode 100644 index ae47773..0000000 --- a/src/themes/scss/theme/modules/_codemirror.scss +++ /dev/null @@ -1,95 +0,0 @@ -@use '@lucas-labs/lui-micro/color' as color; - -@mixin make-code-mirror-styles { - .CodeMirror, - .CodeMirror.cm-s-default, - .CodeMirror.cm-s-paper { - .cm-property { - color: color.get('text') - } - - .cm-header { - color: color.get('text') - } - - .cm-quote { - color: color.get('theme/green/base') - } - - .cm-keyword { - color: color.get('theme/mauve/base'); - } - - .cm-atom { - color: color.get('theme/red/base'); - } - - .cm-number { - color: color.get('theme/peach/base'); - } - - .cm-def { - color: color.get('text') - } - - .cm-variable-2 { - color: color.get('theme/sky/base'); - } - - .cm-variable-3 { - color: color.get('theme/teal/base'); - } - - .cm-comment { - color: color.get('elevation/6') - } - - .cm-string { - color: color.get('theme/green') - } - - .cm-string-2 { - color: color.get('theme/green') - } - - .cm-meta { - color: color.get('theme/peach/base'); - } - - .cm-qualifier { - color: color.get('theme/peach/base'); - } - - .cm-builtin { - color: color.get('theme/peach/base'); - } - - .cm-bracket { - color: color.get('text') - } - - .cm-tag { - color: color.get('theme/yellow/base'); - } - - .cm-attribute { - color: color.get('theme/yellow/base'); - } - - .cm-hr { - color: color.get('elevation/9'); - } - - .cm-url { - color: color.get('theme/blue/base'); - } - - .cm-link { - color: color.get('theme/blue/base'); - } - - .cm-error { - color: color.get('theme/red/base'); - } - } -} diff --git a/src/themes/scss/theme/modules/_monaco.scss b/src/themes/scss/theme/modules/_monaco.scss deleted file mode 100644 index 8354839..0000000 --- a/src/themes/scss/theme/modules/_monaco.scss +++ /dev/null @@ -1,155 +0,0 @@ -@use '@lucas-labs/lui-micro/color' as color; - -@mixin make-monaco-styles($is-dark: true) { - $surface0: #{color.get('elevation/4')}; - $subtext0: #{color.get('elevation/10')}; - $overlay2: #{color.get('elevation/9')}; - $mantle: #{color.get('elevation/0')}; - $base: #{color.get('elevation/3')}; - $accent: #{color.get('primary/base')}; - $text: #{color.get('text')}; - $mauve: #{color.get('theme/sapphire/base')}; - $peach: #{color.get('theme/peach/base')}; - $teal: #{color.get('theme/teal/base')}; - $green: #{color.get('theme/green/base')}; - $blue: #{color.get('theme/blue/base')}; - $pink: #{color.get('theme/pink/base')}; - - .monaco-editor { - --vscode-editor-background: #{$mantle} !important; - --vscode-editorGutter-background: #{$mantle} !important; - - // selected text - .selected-text { - background-color: $surface0 !important; - } - // line numbers - .margin-view-overlays .line-numbers { - color: $subtext0 !important; - } - .line-numbers.active-line-number { - color: $accent !important; - } - - // current / cursor line - .view-overlays .current-line, - .margin-view-overlays .current-line-margin { - background-color: #{color.get('elevation/2')} !important; - } - - // Note: all of the hotpink stuff is there so it's easily visible, since these editor scope mappings are a mess - - // plaintext - .mtk1 { - color: $text !important; - } - .mtk2 { - color: #ff69b4 !important; - } - // decorators - .mtk3 { - color: $peach !important; - } - // shell arguments - .mtk4 { - color: $teal !important; - } - // css constants & pre-defineds - .mtk5 { - color: $text !important; - } - // keywords - .mtk6 { - color: $mauve !important; - } - // numbers - .mtk7 { - color: $peach !important; - } - // comments - .mtk8 { - color: $overlay2 !important; - } - // sometimes a keyword, apparently - .mtk9 { - color: $mauve !important; - } - // braces, brackets, parentheses - .mtk10 { - color: $subtext0 !important; - } - // arrow brackets & equal signs in HTML - .mtk11 { - color: $teal !important; - } - // @ sign in javascript ¯\_(ツ)_/¯ - .mtk12 { - color: $teal !important; - } - .mtk13 { - color: #ff69b4 !important; - } - .mtk14 { - color: #ff69b4 !important; - } - // regex, css classnames, and HTML keywords (huh) - .mtk15 { - color: $mauve !important; - } - // shebangs - .mtk16 { - color: $overlay2 !important; - } - .mtk17 { - color: #ff69b4 !important; - } - .mtk18 { - color: #ff69b4 !important; - } - // glob operator i guess - .mtk19 { - color: $teal !important; - } - .mtk20 { - color: #ff69b4 !important; - } - // strings - .mtk21 { - color: $green !important; - } - .mtk22 { - color: #ff69b4 !important; - } - // functions - .mtk23 { - color: $blue !important; - } - // shell variables - .mtk24 { - color: $peach !important; - } - // weird variables - .mtk25 { - color: $pink !important; - } - - // .bracket-highlighting-0 { - // color: color.mix($text, $red, 40%) !important; - // } - // .bracket-highlighting-1 { - // color: color.mix($text, $peach, 40%) !important; - // } - // .bracket-highlighting-2 { - // color: color.mix($text, $yellow, 40%) !important; - // } - // .bracket-highlighting-3 { - // color: color.mix($text, $green, 40%) !important; - // } - // .bracket-highlighting-4 { - // color: color.mix($text, $blue, 40%) !important; - // } - // .bracket-highlighting-5 { - // color: color.mix($text, $mauve, 40%) !important; - // } - } -} diff --git a/src/themes/scss/theme/modules/custom/_home.scss b/src/themes/scss/theme/modules/custom/_home.scss deleted file mode 100644 index 33a596e..0000000 --- a/src/themes/scss/theme/modules/custom/_home.scss +++ /dev/null @@ -1,14 +0,0 @@ -@use '@lucas-labs/lui-micro/var' as var; -@use '@lucas-labs/lui-micro/color' as color; - -@mixin apply-styles { - .page-content.home { - div.center { - img { - // background-color: color.get('primary/base'); - // border-radius: var.get('measure/4x'); - // padding: var.get('measure/1.25x'); - } - } - } -} diff --git a/src/themes/scss/theme/modules/custom/_issue-content.scss b/src/themes/scss/theme/modules/custom/_issue-content.scss deleted file mode 100644 index f0cc4d6..0000000 --- a/src/themes/scss/theme/modules/custom/_issue-content.scss +++ /dev/null @@ -1,16 +0,0 @@ -@mixin apply-styles { - .issue-content { - img { - max-width: 100%; - } - } - - .issue-content, .issue-list { - .labels-list { - .label { - - } - } - } - -} \ No newline at end of file diff --git a/src/themes/scss/theme/modules/custom/_markup.scss b/src/themes/scss/theme/modules/custom/_markup.scss deleted file mode 100644 index 90637c9..0000000 --- a/src/themes/scss/theme/modules/custom/_markup.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use '@lucas-labs/lui-micro/color' as color; - -@mixin apply-styles() { - .markup { - table { - width: fit-content; - } - } -} \ No newline at end of file diff --git a/src/themes/scss/theme/modules/custom/_project.scss b/src/themes/scss/theme/modules/custom/_project.scss deleted file mode 100644 index 2ba9fc5..0000000 --- a/src/themes/scss/theme/modules/custom/_project.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use '@lucas-labs/lui-micro/var' as var; -@use '@lucas-labs/lui-micro/color' as color; - -@mixin apply-styles { - #project-board { - .project-column-header { - .project-column-title { - .circular.label { - display: flex; - padding: 0 !important; - align-items: center; - justify-content: center; - line-height: 16px; - padding: 0 var.get('measure/.25x') !important; - } - } - } - } -} diff --git a/src/themes/scss/theme/modules/custom/_repo-header.scss b/src/themes/scss/theme/modules/custom/_repo-header.scss deleted file mode 100644 index 8ba5d10..0000000 --- a/src/themes/scss/theme/modules/custom/_repo-header.scss +++ /dev/null @@ -1,69 +0,0 @@ -@use '@lucas-labs/lui-micro/var' as var; -@use '@lucas-labs/lui-micro/color' as color; - -@mixin apply-styles { - .secondary-nav { - display: flex; - flex-direction: column; - margin-bottom: var.get('measure/1x'); - - .ui.container { - margin: 0 0 0 0 !important; - max-width: unset !important; - width: 100% !important; - padding: 0 var.get('measure/1x'); - } - - .repo-header { - margin: 0 0 var.get('measure/1x') 0; - } - - .ui.tabs.divider { - margin-bottom: 0; - } - - overflow-menu { - .item { - --item-margin-bottom: #{var.get('measure/.5x')} !important; - margin: 0 var.get('measure/.5x') var(--item-margin-bottom) !important; - border-radius: var.get('measure/.25x') !important; - padding: var.get('measure/.5x') var.get('measure/.5x') !important; - color: var(--color-text) !important; - border: none !important; - position: relative; // Make the parent element positioned - - svg { - color: var(--color-text-light-3) !important; - margin-right: var.get('measure/.5x') !important; - } - - &:hover { - background-color: color.get('elevation/4') !important; - } - - &.active { - background-color: transparent !important; - color: var(--color-text) !important; - border-radius: 0 !important; - // font-weight: normal !important; - border-bottom: calc(var(--item-margin-bottom) - 1px) solid var(--color-secondary-nav-bg) !important; - margin-bottom: 1px !important; - box-shadow: 0px 2px 0px 0px color.get('primary/base') !important; - } - - .small.label { - background-color: color.get('elevation/7'); - border: 1px solid color.get('elevation/7'); - border-radius: var.get('measure/2x'); - color: var(--color-text); - font-weight: var(--base-text-weight-medium, 500); - min-width: calc(var.get('measure/1.25x') + 6px); - padding: 6px; - text-align: center; - align-items: center; - justify-content: center; - } - } - } - } -} diff --git a/src/themes/scss/theme/modules/custom/index.scss b/src/themes/scss/theme/modules/custom/index.scss deleted file mode 100644 index f4820a5..0000000 --- a/src/themes/scss/theme/modules/custom/index.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use './repo-header'; -@use './repo'; -@use './project'; -@use './home'; -@use './markup'; -@use './issue-content'; - -@mixin apply-custom-styles { - @include repo-header.apply-styles(); - @include repo.apply-styles(); - @include project.apply-styles(); - @include home.apply-styles(); - @include markup.apply-styles(); - @include issue-content.apply-styles(); -} \ No newline at end of file diff --git a/src/themes/scss/theme/modules/custom/repo/_file-list.scss b/src/themes/scss/theme/modules/custom/repo/_file-list.scss deleted file mode 100644 index 25b602e..0000000 --- a/src/themes/scss/theme/modules/custom/repo/_file-list.scss +++ /dev/null @@ -1,207 +0,0 @@ -@use '@lucas-labs/lui-micro/var' as var; -@use '@lucas-labs/lui-micro/color' as color; - -@mixin apply-styles { - - #repo-topics, #topic_edit, .label-list { - row-gap: var.get('measure/.5x'); - margin-top: 0 !important; - - .label:not(.basic) { - font-size: var.get('small-font-size') !important; - background-color: rgba(#{color.get('theme/blue/base', 'rgb')}, 0.1); - color: color.get('primary/base'); - border-radius: var.get('measure/2x'); - line-height: 14px; - transition: background-color 0.2s ease; - - &:hover { - background-color: rgba(#{color.get('theme/blue/base', 'rgb')}, 0.3) !important; - color: color.get('primary/base') !important; - } - } - - } - - .ui.table>tr>td, .ui.table>tbody>tr>td { - border-top-color: rgba(#{color.get('theme/blue/base', 'rgb')}, 0.04); - } - - .page-content.repository.file.list > .ui.container.lugit-repo-list-view { - display: flex; - flex-direction: row-reverse; - column-gap: 24px; - - @media (max-width: 1100px) { - width: 100%; - min-width: 100%; - margin: 0; - padding: 0 var.get('measure/2x'); - - .lugit-repo-header-data { - min-width: calc(#{var.get('repo-home/sidebar-width')} * 0.87) !important; - max-width: calc(#{var.get('repo-home/sidebar-width')} * 0.87) !important; - width: calc(#{var.get('repo-home/sidebar-width')} * 0.87) !important; - } - - .repo-button-row { - .gt-gap-y-3 { - column-gap: var.get('measure/.5x'); - - #new-pull-request { - display: none; - } - - [role=menu] { - display: none; - } - } - - #clone-panel { - #repo-clone-url { - display: none; - } - } - } - } - - @media (max-width: 1280px) { - flex-direction: column; - column-gap: 0; - row-gap: 24px; - - .lugit-repo-header-data { - min-width: 100%!important; - max-width: 100%!important; - width: 100%!important; - } - - #repo-topics { - display: none !important; - } - - #repo-desc { - display: flex; - flex-direction: column; - font-size: 1em; - row-gap: var.get('measure/1x'); - - h5 { - display: none; - } - - span { - font-size: 1.2em !important; - font-style: italic !important; - color: var(--color-text-light-3); - } - - a { - font-size: 1.1em; - } - } - - } - - .repo-button-row { - .gt-gap-y-3 { - column-gap: var.get('measure/.5x'); - } - - #clone-panel { - #repo-clone-url { - width: unset; - } - } - } - - .lugit-repo-header-data { - min-width: var.get('repo-home/sidebar-width'); - max-width: var.get('repo-home/sidebar-width'); - width: var.get('repo-home/sidebar-width'); - - #repo-desc { - display: flex; - flex-direction: column; - font-size: 1em; - row-gap: var.get('measure/1x'); - - * { - margin: 0; - } - - h5 { - font-size: 1.1em; - } - - span { - font-size: 1.1em; - } - - a { - font-size: 1.1em; - } - } - } - - .lugit-repo-content { - display: flex; - flex-direction: column; - row-gap: var.get('measure/1x'); - flex: 1; - } - - #repo-files-table { - .commit-list { - .latest-commit { - gap: var.get('measure/.5x'); - } - - .isSigned, .isVerified { - padding: 0 !important; - border: none !important; - .shortsha { - display: none; - } - - .detail { - border-left: none !important; - padding: 0 !important; - margin: 0 !important; - - div { - display: block; - padding: 0 !important; - margin: 0 !important; - - svg { - margin: 0 !important; - } - } - } - - .avatar { - display: none; - } - } - - .commit-summary { - color: var(--color-text-light-2) !important - } - } - } - - #topic_edit { - flex-direction: column; - row-gap: var.get('measure/1x'); - - .field.gt-f1.gt-mr-3 { - margin: 0px !important; - } - } - - #repo-topics { - margin-top: var.get('measure/1x') !important; - } - } -} diff --git a/src/themes/scss/theme/modules/custom/repo/index.scss b/src/themes/scss/theme/modules/custom/repo/index.scss deleted file mode 100644 index 23a5720..0000000 --- a/src/themes/scss/theme/modules/custom/repo/index.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use './file-list'; - -@mixin apply-styles { - @include file-list.apply-styles(); -} \ No newline at end of file diff --git a/src/themes/scss/theme/modules/index.scss b/src/themes/scss/theme/modules/index.scss new file mode 100644 index 0000000..cc9dd20 --- /dev/null +++ b/src/themes/scss/theme/modules/index.scss @@ -0,0 +1,2 @@ +@forward './repo'; +@forward './issues'; diff --git a/src/themes/scss/theme/modules/issues/_issue-sidebar.scss b/src/themes/scss/theme/modules/issues/_issue-sidebar.scss new file mode 100644 index 0000000..a92a622 --- /dev/null +++ b/src/themes/scss/theme/modules/issues/_issue-sidebar.scss @@ -0,0 +1,274 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; +@use '../../components/button' as button; + +@mixin sidebar { + display: flex; + flex-direction: column; + border: none !important; + color: var(--color-text-light-2) !important; + padding: 0 !important; + + // reset padding and margin for all children + >*, .issue-sidebar-combo>*, >text+*, >.ui>* { + margin: unset !important; + padding: unset !important; + font-size: var.get('font-size/sm') !important; + } + + // alignment for main children elements + >.ui, >.text, >.ui { + padding-left: var.get('measure/.5x') !important; + padding-right: 0 !important; + } + + .ui.ui.ui.compact.grid>.column:not(.row), .ui.ui.ui.compact.grid>.row>.column { + padding-left: unset; + padding-right: unset; + } + + // reset for all actionable elements + button, input, .dropdown, .ui.grid>.row>[class*="two wide"].column, .ui.grid>.column.row>[class*="two wide"].column, .ui.grid>[class*="two wide"].column, .ui.column.grid>[class*="two wide"].column { + padding: 0 !important; + margin: 0 !important; + min-height: 0 !important; + min-width: 0 !important; + } + + // -------------------------------------------------------------- // + // ---------------------- Elements Styling ---------------------- // + // -------------------------------------------------------------- // + + a:hover { + text-decoration: none !important; + } + + .ui.label { + height: 20px; + border-radius: 20px; + } + + // dividers + >.divider { + width: calc(100% - var.get('measure/.5x')) !important; + align-self: flex-end; + margin: var.get('measure/.875x') 0 !important; + } + + + // select branch dropdown + .select-branch { + align-self: flex-end; + + .branch-dropdown-button { + @include button.hollow; + } + + +.divider { + border: none !important; + margin: var.get('measure/.5x') 0 !important; + } + + .menu { + --color-menu: #{color.get('elevation/3')}; + + .branch-tag-item.active, .reference-list-menu, .reference-list-menu .item { + --color-menu: #{color.get('elevation/4')} !important; + } + + .branch-tag-item { + --border-radius: #{var.get('measure/.5x')}; + + &:hover { + color: currentColor !important; + } + } + } + } + + .issue-sidebar-combo { + display: flex; + flex-direction: column; + gap: var.get('measure/.5x') !important; + + > * { + padding-left: var.get('measure/.5x') !important; + padding-right: var.get('measure/.5x') !important; + } + + .ui.dropdown { + padding-top: var.get('measure/.375x') !important; + padding-bottom: var.get('measure/.375x') !important; + font-size: var.get('font-size/sm'); + transition: background-color .1s ease; + border-radius: var(--border-radius) !important; + + >a { + flex: 1; + display: flex; + justify-content: space-between; + + &:hover { + color: currentColor !important; + text-decoration: none !important; + } + } + + &:hover { + background-color: rgba(#{color.get('elevation/6', 'rgb')}, .5); + } + } + } + + // direct text children + >.text { + // background-color: orange !important; + flex: 1; + display: flex !important; + justify-content: space-between; + font-weight: 500 !important; + margin-bottom: var.get('measure/.75x') !important; + + strong { + font-weight: 500 !important; + } + } + + .watching, .depending { + display: flex; + flex-direction: column; + gap: var.get('measure/.75x') !important; + } + + .watching { + button { + font-weight: 500; + padding: var.get('measure/.5x') var.get('measure/.75x') !important; + border-radius: var(--border-radius) !important; + + svg { + color: color.get('subtle') !important; + } + } + } + + .depending { + .divided.list { + display: flex; + flex-direction: column; + gap: var.get('measure/1x') !important; + + .dependency { + border: none !important; + + .item-left { + a { // issue + + } + + div.text { // repo + font-size: var.get('font-size/xs') !important; + } + } + + // if not the first dependency in the list, we add a :before element to serve as divider + &:not(:first-child) { + position: relative; + &:before { + content: ''; + display: block; + position: absolute; + top: -8px; + left: 0; + height: 1px; + width: 100%; + background-color: color.get('elevation/4'); + } + } + } + } + + .selection.dropdown { + padding: var.get('measure/.375x') var.get('measure/.75x') !important; + + input { + padding: var.get('measure/.375x') var.get('measure/.75x') !important; + line-height: 20px !important; + } + } + + button { + padding: var.get('measure/.5x') !important; + } + } + + // reference + div.ui.equal.width.compact.grid { + button { + @include button.hollow; + display: flex; + color: color.get('subtle') !important; + width: unset !important; + // padding: var.get('measure/.5x') !important; + } + } + + // issue due date form + .issue-due-form { + * { + color: color.get('subtle') !important; + } + + // input of type date + input[type="date"] { + padding: var.get('measure/.5x') var.get('measure/.75x') !important; + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + } + + button { + padding: var.get('measure/.5x') !important; + border-top-right-radius: var(--border-radius) !important; + border-bottom-right-radius: var(--border-radius) !important; + } + } + + // direct form child + >form, .form { + display: flex; + flex-direction: column; + gap: var.get('measure/.5x') !important; + } + + // buttons at the end of the sidebar + >form button, >button { + font-size: var.get('font-size/sm') !important; + border: none !important; + background: transparent !important; + padding: var.get('measure/.375x') var.get('measure/.5x') !important; + justify-content: start !important; + gap: var.get('measure/.5x') !important; + margin-bottom: var.get('measure/.25x') !important; + border-radius: var(--border-radius) !important; + + svg { + color: color.get('subtle') !important; + } + + &:hover { + background: color.get('elevation/4') !important; + } + + // if the data-modal attr is #sidebar-delete-issue, make the color red + &[data-modal="#sidebar-delete-issue"] { + color: color.get('palette/red/base') !important; + svg { + color: color.get('palette/red/base') !important; + } + + &:hover { + background: rgba(#{color.get('palette/red/dark/15%', 'rgb')}, 0.1) !important; + } + } + } +} \ No newline at end of file diff --git a/src/themes/scss/theme/modules/issues/_issue.scss b/src/themes/scss/theme/modules/issues/_issue.scss new file mode 100644 index 0000000..1e5c81c --- /dev/null +++ b/src/themes/scss/theme/modules/issues/_issue.scss @@ -0,0 +1,133 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; +@use '../../components/button' as button; +@use './issue-sidebar'; + +@mixin apply-styles { + .issue-content-right { + @include issue-sidebar.sidebar; + } + + .issue-title-header { + margin-bottom: var.get('measure/1.5x'); + padding-bottom: var.get('measure/.75x'); + border-bottom: 1px solid color.get('elevation/5'); + + .issue-title { + .index { + font-weight: 300; + } + } + + .issue-title-meta { + color: color.get('subtle'); + } + } + + .issue-content { + column-gap: var.get('measure/1.5x'); + } + + .issue-content-left { + .timeline-avatar img { + border-radius: 50% !important; + } + } + + .timeline-item { + &.comment { + .content { + background-color: transparent !important; + + >.comment-header, >.ui.segment { + &:before, &:after { + display: none; + } + } + + .comment-header { + padding: var.get('measure/.25x') var.get('measure/.25x') var.get('measure/.25x') var.get('measure/1x') !important; + + .comment-header-left { + .text { + color: color.get('subtle') !important; + + .author { + color: color.get('text') !important; + } + } + } + + .comment-header-right { + * { + color: color.get('subtle') !important; + } + + .label { + height: var.get('measure/1.25x', 1.25rem) !important; + padding: 0px var.get('measure/.375x') !important; + border-radius: var.get('measure/1x') !important; + } + } + } + + + } + + // comment form at the end + &.form { + display: flex; + align-items: flex-start; + background-color: var(--color-body); + gap: var.get('measure/1x'); + left: -68px !important; + width: calc(100% + 68px - 16px) !important; + + @media (max-width: 768px) { + left: 0 !important; + margin-left: -16px !important; + width: auto !important; + } + + .timeline-avatar { + display: block; + position: relative !important; + left: unset !important; + flex: 0 0 auto !important; + } + + .content { + // fake title to mimic github new issue page + &:before { + display: block; + content: 'Add a comment'; + font-weight: 600; + margin-bottom: var.get('measure/1x'); + margin-top: var.get('measure/.5x'); + font-size: var.get('font-size/lg'); + } + + display: block; + position: relative !important; + margin-left: 0 !important; + flex: 1; + + .ui.segment { + padding: 0 !important; + border: none !important; + } + } + } + } + } + + .repository.view.issue .comment-list .comment>.content>div:last-child { + border-bottom-left-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); + } + + .repository.view.issue .comment-list .comment>.content>div:first-child { + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); + } +} diff --git a/src/themes/scss/theme/modules/issues/_list.scss b/src/themes/scss/theme/modules/issues/_list.scss new file mode 100644 index 0000000..781a097 --- /dev/null +++ b/src/themes/scss/theme/modules/issues/_list.scss @@ -0,0 +1,46 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; + +@mixin apply-styles { + .page-content.repository.issue-list, .page-content.dashboard.issues { + .secondary-nav { + margin-bottom: var.get('measure/1.5x'); + } + + #issue-filters { + margin: var.get('measure/2x') 0 var.get('measure/1x') 0; + gap: var.get('measure/3x'); + align-items: center; + } + + #issue-list { + .flex-item { + padding: var.get('measure/.75x') 0 var.get('measure/.75x') 0; + + &:first-child { + padding-top: 0; + } + + &:last-child { + padding-bottom: 0; + } + + .branch { + background-color: color.get('elevation/1'); + } + + .flex-item-icon { + svg { + &.green { + color: color.get('palette/green/base') !important; + } + } + } + } + } + + .list-header { + margin-bottom: var.get('measure/1.5x'); + } + } +} diff --git a/src/themes/scss/theme/modules/issues/index.scss b/src/themes/scss/theme/modules/issues/index.scss new file mode 100644 index 0000000..deb0855 --- /dev/null +++ b/src/themes/scss/theme/modules/issues/index.scss @@ -0,0 +1,7 @@ +@use './list'; +@use './issue'; + +@mixin issues { + @include list.apply-styles(); + @include issue.apply-styles(); +} \ No newline at end of file diff --git a/src/themes/scss/theme/modules/repo/_file-list.scss b/src/themes/scss/theme/modules/repo/_file-list.scss new file mode 100644 index 0000000..52378d2 --- /dev/null +++ b/src/themes/scss/theme/modules/repo/_file-list.scss @@ -0,0 +1,63 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; +@use '../../components/button' as button; + +@mixin apply-styles { + .repo-button-row-left { + .button { + @include button.hollow; + } + } + + .repo-home-filelist { + > div { + margin: 0 !important; + } + + display: flex; + flex-direction: column; + row-gap: var.get('measure/1x'); + + // file list table + #repo-files-table { + // header + .repo-file-last-commit { + padding: var.get('measure/.75x') var.get('measure/1x') !important; + + .commit-summary { + margin: 0; + } + + .latest-commit { + gap: var.get('measure/.5x'); + + img { + // make it a circle (avatar) + border-radius: 50%; + width: var.get('measure/1.25x'); + height: var.get('measure/1.25x'); + } + } + + .label { + // boton con icono y avatar + .detail.icon.button img { + display: none; + } + } + } + + // cells + .repo-file-cell { + padding: var.get('measure/.5x') var.get('measure/1x') !important; + + &.name { + display: flex; + flex-wrap: nowrap; + column-gap: var.get('measure/.5x'); + align-items: center; + } + } + } + } +} diff --git a/src/themes/scss/theme/modules/repo/_home.scss b/src/themes/scss/theme/modules/repo/_home.scss new file mode 100644 index 0000000..2bb4c2d --- /dev/null +++ b/src/themes/scss/theme/modules/repo/_home.scss @@ -0,0 +1,167 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; + +@mixin apply-styles { + // description, labels, info + .repo-home-sidebar-top { + @media (max-width: 768px) { + border-bottom: 1px solid color.get('elevation/6'); + margin-bottom: var.get('measure/1x'); + } + + form { + margin-top: 0 !important; + } + + #repo-topics, #topic_edit, .label-list { + row-gap: var.get('measure/.5x'); + margin-top: 0 !important; + + .label:not(.basic) { + font-size: var.get('font-size/sm') !important; + background-color: rgba(#{color.get('palette/blue/base', 'rgb')}, 0.1); + color: color.get('primary/base'); + border-radius: var.get('measure/2x'); + line-height: 22px !important; + padding-top: 0 !important; + padding-bottom: 0 !important; + + &:hover { + background-color: rgba(#{color.get('palette/blue/base', 'rgb')}, 0.3) !important; + color: color.get('primary/base') !important; + } + } + + .ui.selection.active.dropdown, .ui.selection.active.dropdown .menu { + border-color: color.get('elevation/6') + } + } + + .repo-description { + margin-bottom: var.get('measure/1x'); + } + + .flex-text-block { + gap: var.get('measure/.25x') !important; + font-size: var.get('font-size/md') !important; + + svg { + margin-right: var.get('measure/.25x') !important; + } + } + + @media (max-width: 768px) { + .repo-description { + margin-top: 0 !important; + } + + #repo-topics, #manage_topic, .flex-item-title { + display: none; + } + + .flex-item-body>div { + flex: 1; + } + } + } + + // releases + languages section + .repo-home-sidebar-bottom { + .flex-list .flex-item .flex-item-main { + .flex-item { + padding: 0 !important; + + .flex-item-main { + gap: 0 !important; + + .flex-item-header { + * { + font-size: var.get('font-size/md') !important; + } + + .flex-item-title { + gap: var.get('measure/.5x') !important; + .green.label { + border-radius: var.get('measure/2x'); + font-size: var.get('font-size/sm') !important; + background-color: transparent !important; + border: 1px solid color.get('palette/green/base') !important; + color: color.get('palette/green/base') !important; + } + } + } + + .flex-item-body { + .time { + font-size: var.get('font-size/sm') !important; + } + } + } + } + } + + // languages + .flex-item-body { + gap: 0 !important; + + .language-stats { + background-color: red !important; + margin: 0 !important; + height: var.get('measure/.5x') !important; + margin-bottom: var.get('measure/.5x') !important; + } + + .language-stats-details { + gap: var.get('measure/1x') !important; + .item { + font-size: var.get('font-size/sm') !important; + padding: 0; + gap: var.get('measure/.25x') !important; + + .color-icon { + height: var.get('measure/.5x') !important; + width: var.get('measure/.5x') !important; + margin-right: var.get('measure/.25x') !important; + } + } + } + } + } + + .repo-home-sidebar-bottom, .repo-home-sidebar-top { + padding-left: var.get('measure/1.5x'); + + @media (max-width: 768px) { + padding-left: 0 !important; + } + + .flex-item-title .item { + display: flex; + flex-wrap: nowrap; + gap: var.get('measure/.5x'); + text-decoration: none; + + .small.label { + background-color: color.get('elevation/7'); + border: 1px solid color.get('elevation/7'); + border-radius: var.get('measure/2x'); + color: color.get('text'); + font-weight: var(--base-text-weight-medium, 500); + min-width: 20px; + padding: 2px; + text-align: center; + align-items: center; + justify-content: center; + } + } + + >.flex-list>.flex-item { + padding-top: var.get('measure/1x'); + padding-bottom: var.get('measure/1x'); + + >.flex-item-main { + gap: var.get('measure/1x'); + } + } + } +} diff --git a/src/themes/scss/theme/modules/repo/_secondary-navbar.scss b/src/themes/scss/theme/modules/repo/_secondary-navbar.scss new file mode 100644 index 0000000..b21440c --- /dev/null +++ b/src/themes/scss/theme/modules/repo/_secondary-navbar.scss @@ -0,0 +1,171 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; +@use '../../components/button' as button; + +@mixin apply-styles { + .secondary-nav { + margin-bottom: var.get('measure/1.5x') !important; + + .ui.container { + margin: 0 0 0 0 !important; + max-width: unset !important; + width: 100% !important; + padding: 0 var.get('measure/1x'); + } + + // header + .repo-header { + margin: 0 0 var.get('measure/1x') 0; + + // repo image + img.avatar { + width: var.get('measure/2x') !important; + height: var.get('measure/2x') !important; + } + + // repo title (repo "owner / name" text) + .flex-item-title { + gap: var.get('measure/.25x') !important; + font-size: var.get('font-size/md') !important; + font-weight: normal !important; + color: color.get('elevation/10') !important; + + a { + padding: var.get('measure/.375x') var.get('measure/.5x') !important; + border-radius: var.get('measure/.25x'); + + &:hover { + background-color: color.get('elevation/4') !important; + color: color.get('text') !important; + text-decoration: none !important; + } + } + + // repo name only + a:last-child { + font-weight: 600; + } + } + + // "public/private" label + .flex-item-trailing { + .label { + padding: var.get('measure/.25x') var.get('measure/.5x'); + font-size: var.get('font-size/sm'); + border-radius: var.get('measure/1x'); + background-color: transparent; + color: color.get('elevation/10'); + } + + // lock icon + svg { + color: color.get('elevation/10'); + } + } + + @media (max-width: 768px) { + // repo title (repo "owner / name" text) + .flex-item-title { + display: inline-block; + white-space: nowrap; + padding: 0 var.get('measure/.5x') !important; + font-size: var.get('font-size/sm') !important; + font-weight: 500 !important; + + a { + padding: 0 !important; + + &:hover { + background-color: transparent !important; + color: color.get('primary/base') !important; + text-decoration: none !important; + } + } + + a:first-child { + float: left; + margin-right: var.get('measure/.5x'); + color: color.get('elevation/10') !important; + font-weight: 500 !important; + + &:hover { + color: color.get('primary/base') !important; + } + } + + // repo name only + a:last-child { + font-size: var.get('font-size/md') !important; + clear: left; + display: block; + } + } + } + } + + // header navbar menu + overflow-menu.ui.secondary.pointing.menu { + .overflow-menu-items { + gap: var.get('measure/.25x') !important; + } + + // navbar menu items + .item { + padding: var.get('measure/.375x') var.get('measure/.5x') !important; + margin-bottom: var.get('measure/.5x') !important; + border-radius: var.get('measure/.25x'); + border: none !important; + + // icon + svg { + color: var(--color-text-light-3) !important; + margin-right: var.get('measure/.5x') !important; + } + + &:hover { + background-color: color.get('elevation/4') !important; + color: var(--color-text-light-2) !important; + } + + // when the represents the current route + &.active { + border: none !important; + &:after { + content: ''; + display: block; + position: absolute; + width: 100%; + height: 2px; + left: 0; + top: calc(100% + #{var.get('measure/.375x')} - 1px); + background-color: color.get('primary/base'); + transform: unset; + border: none; + } + } + + // numeric badge/label (e.g. indicating the number of issues) + .small.label { + background-color: color.get('elevation/7'); + border: 1px solid color.get('elevation/7'); + border-radius: var.get('measure/2x'); + color: color.get('text'); + font-weight: var(--base-text-weight-medium, 500); + min-width: calc(var.get('measure/1x') + 1px); + padding: 2px; + text-align: center; + align-items: center; + justify-content: center; + } + } + } + + // buttons at the right of the header (unwatch, star, fork, etc.) + .repo-buttons { + .button { + font-size: var.get('font-size/sm') !important; + @include button.hollow; + } + } + } +} diff --git a/src/themes/scss/theme/modules/repo/index.scss b/src/themes/scss/theme/modules/repo/index.scss new file mode 100644 index 0000000..a76311a --- /dev/null +++ b/src/themes/scss/theme/modules/repo/index.scss @@ -0,0 +1,9 @@ +@use './home'; +@use './secondary-navbar'; +@use './file-list'; + +@mixin repo { + @include home.apply-styles(); + @include secondary-navbar.apply-styles(); + @include file-list.apply-styles(); +} \ No newline at end of file diff --git a/src/themes/scss/theme/vars/_base.scss b/src/themes/scss/theme/vars/_base.scss new file mode 100644 index 0000000..5155ec2 --- /dev/null +++ b/src/themes/scss/theme/vars/_base.scss @@ -0,0 +1,60 @@ +@use '@lucas-labs/lui-micro/color' as color; +@use '@lucas-labs/lui-micro/var' as var; + +@mixin base { + :root { + // ┌───────┐ + // │ fonts │ + // └───────┘ + --fonts-proportional: #{var.get('font-family')}; + --fonts-monospace: #{var.get('code-font-family')}; + --fonts-emoji: #{var.get('emoji-font-family')}; + + // ┌───────┬───────────────────┐ + // │ fonts │ weights & heights │ + // └───────┴───────────────────┘ + --font-weight-light: 300; + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --line-height-default: normal; + + // ┌────────┐ + // │ images │ + // └────────┘ + --checkbox-mask-checked: url('data:image/svg+xml;utf8,'); + --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,'); + --octicon-chevron-right: url('data:image/svg+xml;utf8,'); + + // ┌────────┐ + // │ radius │ + // └────────┘ + --border-radius: #{var.get('measure/.5x')}; + --border-radius-medium: #{var.get('measure/1x')}; + --border-radius-full: calc(infinity * 1px); + + // ┌────────┐ + // │ others │ + // └────────┘ + --opacity-disabled: 0.55; + --height-loading: 16rem; + --min-height-textarea: 132px; // padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported + --checkbox-size: 15px; // height and width of checkbox and radio inputs + --page-spacing: 24px; // space between page elements + --page-margin-x: 32px; // minimum space on left and right side of page + --tab-size: 4; + } + + @media (min-width: 768px) and (max-width: 1200px) { + :root { + --page-margin-x: 24px; + } + } + + @media (max-width: 767.98px) { + :root { + --page-margin-x: 16px; + } + } +} \ No newline at end of file diff --git a/src/themes/scss/theme/vars/_colors.scss b/src/themes/scss/theme/vars/_colors.scss new file mode 100644 index 0000000..3171da7 --- /dev/null +++ b/src/themes/scss/theme/vars/_colors.scss @@ -0,0 +1,398 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; + +@mixin colors($is-dark: true) { + $scheme: if($is-dark, 'dark', 'light'); + $scheme-inverted: if($is-dark, 'light', 'dark'); + + :root { + accent-color: var(--color-accent); + + @if $is-dark { + color-scheme: dark; + --is-dark-theme: true; + } @else { + color-scheme: light; + --is-dark-theme: false; + } + + // ┌─────────┐ + // │ primary │ + // └─────────┘ + --color-primary: #{color.get('primary/base')}; + --color-primary-contrast: #{color.get('primary/base', 'contrast')}; + + // dark + --color-primary-dark-1: #{color.get('primary/' + $scheme-inverted + '/3%')}; + --color-primary-dark-2: #{color.get('primary/' + $scheme-inverted + '/6%')}; + --color-primary-dark-3: #{color.get('primary/' + $scheme-inverted + '/9%')}; + --color-primary-dark-4: #{color.get('primary/' + $scheme-inverted + '/10%')}; + --color-primary-dark-5: #{color.get('primary/' + $scheme-inverted + '/20%')}; + --color-primary-dark-6: #{color.get('primary/' + $scheme-inverted + '/25%')}; + --color-primary-dark-7: #{color.get('primary/' + $scheme-inverted + '/30%')}; + + // light + --color-primary-light-1: #{color.get('primary/' + $scheme + '/3%')}; + --color-primary-light-2: #{color.get('primary/' + $scheme + '/6%')}; + --color-primary-light-3: #{color.get('primary/' + $scheme + '/10%')}; + --color-primary-light-4: #{color.get('primary/' + $scheme + '/15%')}; + --color-primary-light-5: #{color.get('primary/' + $scheme + '/20%')}; + --color-primary-light-6: #{color.get('primary/' + $scheme + '/30%')}; + --color-primary-light-7: #{color.get('primary/' + $scheme + '/40%')}; + + // alpha + --color-primary-alpha-10: rgba(#{color.get('primary/base', 'rgb')}, 0.1); + --color-primary-alpha-20: rgba(#{color.get('primary/base', 'rgb')}, 0.2); + --color-primary-alpha-30: rgba(#{color.get('primary/base', 'rgb')}, 0.3); + --color-primary-alpha-40: rgba(#{color.get('primary/base', 'rgb')}, 0.4); + --color-primary-alpha-50: rgba(#{color.get('primary/base', 'rgb')}, 0.5); + --color-primary-alpha-60: rgba(#{color.get('primary/base', 'rgb')}, 0.6); + --color-primary-alpha-70: rgba(#{color.get('primary/base', 'rgb')}, 0.7); + --color-primary-alpha-80: rgba(#{color.get('primary/base', 'rgb')}, 0.8); + --color-primary-alpha-90: rgba(#{color.get('primary/base', 'rgb')}, 0.9); + + // states + --color-primary-hover: var(--color-primary-light-1); + --color-primary-active: var(--color-primary-light-3); + + // ┌───────────┐ + // │ secondary │ » secondary + // └───────────┘ + --color-secondary: #{color.get('secondary/base')}; + + // dark + --color-secondary-dark-1: #{color.get('secondary/' + $scheme-inverted + '/3%')}; + --color-secondary-dark-2: #{color.get('secondary/' + $scheme-inverted + '/6%')}; + --color-secondary-dark-3: #{color.get('secondary/' + $scheme-inverted + '/9%')}; + --color-secondary-dark-4: #{color.get('secondary/' + $scheme-inverted + '/12%')}; + --color-secondary-dark-5: #{color.get('secondary/' + $scheme-inverted + '/15%')}; + --color-secondary-dark-6: #{color.get('secondary/' + $scheme-inverted + '/20%')}; + --color-secondary-dark-7: #{color.get('secondary/' + $scheme-inverted + '/25%')}; + --color-secondary-dark-8: #{color.get('secondary/' + $scheme-inverted + '/30%')}; + --color-secondary-dark-9: #{color.get('secondary/' + $scheme-inverted + '/35%')}; + --color-secondary-dark-10: #{color.get('secondary/' + $scheme-inverted + '/40%')}; + --color-secondary-dark-11: #{color.get('secondary/' + $scheme-inverted + '/45%')}; + --color-secondary-dark-12: #{color.get('secondary/' + $scheme-inverted + '/50%')}; + --color-secondary-dark-13: #{color.get('secondary/' + $scheme-inverted + '/55%')}; + + // light + --color-secondary-light-1: #{color.get('secondary/' + $scheme + '/3%')}; + --color-secondary-light-2: #{color.get('secondary/' + $scheme + '/6%')}; + --color-secondary-light-3: #{color.get('secondary/' + $scheme + '/9%')}; + --color-secondary-light-4: #{color.get('secondary/' + $scheme + '/12%')}; + + // alpha + --color-secondary-alpha-10: rgba(#{color.get('secondary/base', 'rgb')}, 0.1); + --color-secondary-alpha-20: rgba(#{color.get('secondary/base', 'rgb')}, 0.2); + --color-secondary-alpha-30: rgba(#{color.get('secondary/base', 'rgb')}, 0.3); + --color-secondary-alpha-40: rgba(#{color.get('secondary/base', 'rgb')}, 0.4); + --color-secondary-alpha-50: rgba(#{color.get('secondary/base', 'rgb')}, 0.5); + --color-secondary-alpha-60: rgba(#{color.get('secondary/base', 'rgb')}, 0.6); + --color-secondary-alpha-70: rgba(#{color.get('secondary/base', 'rgb')}, 0.7); + --color-secondary-alpha-80: rgba(#{color.get('secondary/base', 'rgb')}, 0.8); + --color-secondary-alpha-90: rgba(#{color.get('secondary/base', 'rgb')}, 0.9); + + // states + --color-secondary-button: var(--color-secondary-dark-4); + --color-secondary-hover: var(--color-secondary-dark-3); + --color-secondary-active: var(--color-secondary-dark-2); + + // ┌─────────┐ + // │ console │ » used for actions console and console files + // └─────────┘ + --color-console-fg: #f7f8f9; + --color-console-fg-subtle: #bdc4cc; + --color-console-bg: #171b1e; + --color-console-border: #2e353b; + --color-console-hover-bg: #272d33; + --color-console-active-bg: #2e353b; + --color-console-menu-bg: #262b31; + --color-console-menu-border: #414b55; + + // ┌───────┐ + // │ named │ + // └───────┘ + --color-red: #{color.get('palette/red/base')}; + --color-orange: #{color.get('palette/orange/base')}; + --color-yellow: #{color.get('palette/yellow/base')}; + --color-olive: #{color.get('palette/olive/base')}; + --color-green: #{color.get('palette/green/base')}; + --color-teal: #{color.get('palette/teal/base')}; + --color-blue: #{color.get('palette/blue/base')}; + --color-violet: #{color.get('palette/violet/base')}; + --color-purple: #{color.get('palette/purple/base')}; + --color-pink: #{color.get('palette/pink/base')}; + --color-brown: #{color.get('palette/brown/base')}; + --color-black: #{color.get('elevation/1')}; + + // ┌───────┐ + // │ named │ » light variants + // └───────┘ + --color-red-light: #{color.get('palette/red/light/10%')}; + --color-orange-light: #{color.get('palette/orange/light/10%')}; + --color-yellow-light: #{color.get('palette/yellow/light/10%')}; + --color-olive-light: #{color.get('palette/olive/light/10%')}; + --color-green-light: #{color.get('palette/green/light/10%')}; + --color-teal-light: #{color.get('palette/teal/light/10%')}; + --color-blue-light: #{color.get('palette/blue/light/10%')}; + --color-violet-light: #{color.get('palette/violet/light/10%')}; + --color-purple-light: #{color.get('palette/purple/light/10%')}; + --color-pink-light: #{color.get('palette/pink/light/10%')}; + --color-brown-light: #{color.get('palette/brown/light/10%')}; + --color-black-light: #{if( + is-dark, + color.get('palette/black/light/10%'), + color.get('palette/white/light/10%') + )}; + + // ┌───────┐ + // │ named │ » dark 1 variants + // └───────┘ + --color-red-dark-1: #{color.get('palette/red/dark/10%')}; + --color-orange-dark-1: #{color.get('palette/orange/dark/10%')}; + --color-yellow-dark-1: #{color.get('palette/yellow/dark/10%')}; + --color-olive-dark-1: #{color.get('palette/olive/dark/10%')}; + --color-green-dark-1: #{color.get('palette/green/dark/10%')}; + --color-teal-dark-1: #{color.get('palette/teal/dark/10%')}; + --color-blue-dark-1: #{color.get('palette/blue/dark/10%')}; + --color-violet-dark-1: #{color.get('palette/violet/dark/10%')}; + --color-purple-dark-1: #{color.get('palette/purple/dark/10%')}; + --color-pink-dark-1: #{color.get('palette/pink/dark/10%')}; + --color-brown-dark-1: #{color.get('palette/brown/dark/10%')}; + --color-black-dark-1: #{if( + is-dark, + color.get('palette/black/dark/10%'), + color.get('palette/white/dark/10%') + )}; + + // ┌───────┐ + // │ named │ » dark 2 variants + // └───────┘ + --color-red-dark-2: #{color.get('palette/red/dark/20%')}; + --color-orange-dark-2: #{color.get('palette/orange/dark/20%')}; + --color-yellow-dark-2: #{color.get('palette/yellow/dark/20%')}; + --color-olive-dark-2: #{color.get('palette/olive/dark/20%')}; + --color-green-dark-2: #{color.get('palette/green/dark/20%')}; + --color-teal-dark-2: #{color.get('palette/teal/dark/20%')}; + --color-blue-dark-2: #{color.get('palette/blue/dark/20%')}; + --color-violet-dark-2: #{color.get('palette/violet/dark/20%')}; + --color-purple-dark-2: #{color.get('palette/purple/dark/20%')}; + --color-pink-dark-2: #{color.get('palette/pink/dark/20%')}; + --color-brown-dark-2: #{color.get('palette/brown/dark/20%')}; + --color-black-dark-2: #{if( + is-dark, + color.get('palette/black/dark/20%'), + color.get('palette/white/dark/20%') + )}; + + // ┌──────┐ + // │ ansi │ » for actions console and console files + // └──────┘ + --color-ansi-black: #1e2327; + --color-ansi-red: #cc4848; + --color-ansi-green: #87ab63; + --color-ansi-yellow: #cc9903; + --color-ansi-blue: #3a8ac6; + --color-ansi-magenta: #d22e8b; + --color-ansi-cyan: #00918a; + --color-ansi-white: var(--color-console-fg-subtle); + --color-ansi-bright-black: #424851; + --color-ansi-bright-red: #d15a5a; + --color-ansi-bright-green: #93b373; + --color-ansi-bright-yellow: #eaaf03; + --color-ansi-bright-blue: #4e96cc; + --color-ansi-bright-magenta: #d74397; + --color-ansi-bright-cyan: #00b6ad; + --color-ansi-bright-white: var(--color-console-fg); + + // ┌───────┐ + // │ other │ + // └───────┘ + --color-grey: #{color.get('elevation/9')}; + --color-grey-light: #{color.get('elevation/11')}; + --color-gold: #{color.get('palette/yellow/dark/20%')}; + --color-white: #{if(is-dark, color.get('palette/black/base'), color.get('palette/white/base'))}; + --color-git: #f05133; + + // ┌──────┐ + // │ diff │ + // └──────┘ + --color-diff-added-linenum-bg: #{color.get('palette/teal/dark/50%')}; + --color-diff-added-row-bg: #{color.get('palette/teal/dark/60%')}; + --color-diff-added-row-border: #{color.get('palette/teal/dark/40%')};; + --color-diff-added-word-bg: #{color.get('palette/teal/dark/50%')}; + --color-diff-moved-row-bg: #{color.get('palette/yellow/dark/75%')}; + --color-diff-moved-row-border: #{color.get('palette/yellow/dark/65%')}; + --color-diff-removed-linenum-bg: #{color.get('palette/red/dark/60%')}; + --color-diff-removed-row-bg: #{color.get('palette/red/dark/65%')}; + --color-diff-removed-row-border: #{color.get('palette/red/dark/50%')};; + --color-diff-removed-word-bg: #{color.get('palette/red/dark/55%')}; + --color-diff-inactive: #{color.get('elevation/6')}; + + // ┌────────┐ + // │ status │ + // └────────┘ + --color-error-border: #{color.get('palette/red/base')}; + --color-error-bg: rgba(#{color.get('palette/red/base', 'rgb')}, 0.15); + --color-error-bg-active: #{color.get('palette/red/light/6%')}; + --color-error-bg-hover: #{color.get('palette/red/light/12%')}; + --color-error-text: #{color.get('palette/red/base')}; + --color-success-border: #{color.get('palette/green/light/12%')}; + --color-success-bg: rgba(#{color.get('palette/green/base', 'rgb')}, 0.15); + --color-success-text: #{color.get('text')}; + --color-warning-border: #{color.get('palette/yellow/light/12%')}; + --color-warning-bg: #{color.get('palette/yellow/base')}; + --color-warning-text: #{color.get('elevation/3')}; + --color-info-border: #{color.get('palette/blue/light/12%')}; + --color-info-bg: #{color.get('elevation/3')}; + --color-info-text: #{color.get('text')}; + + // ┌───────┐ + // │ badge │ + // └───────┘ + --color-red-badge: #{color.get('palette/red/dark/20%')}; + --color-red-badge-bg: rgba(#{color.get('palette/red/dark/20%', 'rgb')}, .1); + --color-red-badge-hover-bg: rgba(#{color.get('palette/red/dark/20%', 'rgb')}, .2); + + --color-green-badge: #{color.get('palette/green/base')}; + --color-green-badge-bg: rgba(#{color.get('palette/green/base', 'rgb')}, .1); + --color-green-badge-hover-bg: rgba(#{color.get('palette/green/base', 'rgb')}, .2); + + --color-yellow-badge: #{color.get('palette/yellow/dark/10%')}; + --color-yellow-badge-bg: rgba(#{color.get('palette/yellow/dark/10%', 'rgb')}, .1); + --color-yellow-badge-hover-bg: rgba(#{color.get('palette/yellow/dark/10%', 'rgb')}, .2); + + --color-orange-badge: #{color.get('palette/orange/dark/10%')}; + --color-orange-badge-bg: rgba(#{color.get('palette/orange/dark/10%', 'rgb')}, .1); + --color-orange-badge-hover-bg: rgba(#{color.get('palette/orange/dark/10%', 'rgb')}, .2); + + // ┌──────────────┐ + // │ target-based │ + // └──────────────┘ + + // body colors + --color-body: #{color.get('elevation/3')}; + --color-text-dark: #{color.get('text')}; + --color-text: #{color.get('text')}; + --color-text-light: #{color.get('subtle')}; + --color-text-light-1: #{color.get('subtle')}; + --color-text-light-2: #{color.get('subtle')}; + --color-text-light-3: #{color.get('subtle')}; + --color-footer: rgba(#{color.get('elevation/2', 'rgb')}, 0.2); + --color-timeline: #{color.get('elevation/4')}; + + // box + --color-box-header: #{rgba(color.get('elevation/4', 'rgb'), 1)}; + --color-box-body: #{color.get('elevation/3')}; + --color-box-body-highlight: #1e2226; + + // input + --color-input-text: var(--color-text-dark); + --color-input-background: #{color.get('elevation/4')}; + --color-input-toggle-background: #{color.get('elevation/4')}; + --color-input-border: #{color.get('elevation/5')}; + --color-input-border-hover: #{color.get('elevation/6')}; + + // light + --color-light: #00001728; + --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-border: #{color.get('elevation/6')}; + --color-hover: rgba(#{color.get('elevation/6', 'rgb')}, 0.5); + --color-hover-opaque: var(--color-box-header); + --color-active: #{color.get('elevation/4')}; + --color-menu: #{color.get('elevation/4')}; + --color-card: #{color.get('elevation/4')}; + --color-markup-table-row: rgba(#{color.get('text', 'rgb')}, 0.02); + --color-markup-code-block: #{color.get('elevation/5')}; + --color-markup-code-inline: #{color.get('elevation/5')}; + --color-button: #{color.get('elevation/4')}; + --color-code-bg: #{color.get('elevation/3')}; + --color-shadow: rgba(#{color.get('elevation/1', 'rgb')}, 0.5); + --color-shadow-opaque: #{color.get('elevation/1')}; + --color-secondary-bg: #{color.get('elevation/4')}; + --color-expand-button: #{color.get('elevation/6')}; + --color-placeholder-text: #{color.get('elevation/9')}; + --color-editor-line-highlight: var(--color-primary-light-5); + --color-project-column-bg: var(--color-secondary-light-2); + --color-caret: var(--color-text); + --color-reaction-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .1);; + --color-reaction-hover-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .2);; + --color-reaction-active-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .05);; + --color-tooltip-text: var(--color-text); + --color-tooltip-bg: #{color.get('elevation/7')}; + --color-overlay-backdrop: rgba(#{color.get('elevation/1', 'rgb')}, 0.8); + + // navbar + --color-nav-bg: #{color.get('elevation/2')};; + --color-nav-hover-bg: #{color.get('elevation/5')}; + --color-nav-text: var(--color-text); + --color-secondary-nav-bg: #{color.get('elevation/2')};; + + // label + --color-label-text: var(--color-text); + --color-label-bg: #7282924b; + --color-label-hover-bg: #728292a0; + --color-label-active-bg: #728292ff; + + // accents + --color-accent: #{color.get('palette/blue/dark/25%')}; + --color-small-accent: var(--color-primary-light-5); + --color-highlight-fg: #{color.get('palette/yellow/dark/20%')}; + --color-highlight-bg: #{color.get('palette/yellow/dark/75%')}; + } + + #commits-table { + // even rows color + --color-light: transparent !important; + } + + #navbar { + #navbar-logo { + img { + height: var.get('navbar-logo/height') !important; + width: var.get('navbar-logo/width') !important; + } + } + } + + .markup { + code { + border-radius: var.get('measure/.375x') !important; + } + + p { + line-height: 1.5 !important; + } + } + + ::selection { + background-color: #{color.get('primary/dark/60%')}; + color: #{color.get('primary/dark/60%', 'contrast')}; + } + + // // In dark mode, invert emojis that are hard to read otherwise + @if $is-dark { + .emoji[aria-label="check mark"], + .emoji[aria-label="currency exchange"], + .emoji[aria-label="TOP arrow"], + .emoji[aria-label="END arrow"], + .emoji[aria-label="ON! arrow"], + .emoji[aria-label="SOON arrow"], + .emoji[aria-label="heavy dollar sign"], + .emoji[aria-label="copyright"], + .emoji[aria-label="registered"], + .emoji[aria-label="trade mark"], + .emoji[aria-label="multiply"], + .emoji[aria-label="plus"], + .emoji[aria-label="minus"], + .emoji[aria-label="divide"], + .emoji[aria-label="curly loop"], + .emoji[aria-label="double curly loop"], + .emoji[aria-label="wavy dash"], + .emoji[aria-label="paw prints"], + .emoji[aria-label="musical note"], + .emoji[aria-label="musical notes"] { + filter: invert(100%) hue-rotate(180deg); + } + } +} diff --git a/src/themes/scss/theme/vars/index.scss b/src/themes/scss/theme/vars/index.scss new file mode 100644 index 0000000..8d5d581 --- /dev/null +++ b/src/themes/scss/theme/vars/index.scss @@ -0,0 +1,2 @@ +@forward './base'; +@forward './colors'; \ No newline at end of file diff --git a/src/themes/scss/utils/_color-utils.scss b/src/themes/scss/utils/_color-utils.scss deleted file mode 100644 index c8ade23..0000000 --- a/src/themes/scss/utils/_color-utils.scss +++ /dev/null @@ -1,85 +0,0 @@ -@use 'sass:color'; -@use 'sass:map'; - -@function light-change($color, $amount, $isDark) { - $multiplier: if($isDark, -1, 1); - @return color.adjust($color, $lightness: $amount * $multiplier); -} - -@function alpha-change($color, $alpha) { - @return color.change($color, $alpha: $alpha); -} - -@function color-variants-light($color, $is-dark, $with-base: false) { - $set: ( - '3%': light-change($color, -3%, $is-dark), - '6%': light-change($color, -6%, $is-dark), - '9%': light-change($color, -9%, $is-dark), - '12%': light-change($color, -12%, $is-dark), - '15%': light-change($color, -15%, $is-dark), - '18%': light-change($color, -18%, $is-dark), - '21%': light-change($color, -21%, $is-dark), - '24%': light-change($color, -24%, $is-dark), - '27%': light-change($color, -27%, $is-dark), - '30%': light-change($color, -30%, $is-dark), - '33%': light-change($color, -33%, $is-dark), - '36%': light-change($color, -36%, $is-dark), - '39%': light-change($color, -39%, $is-dark) - ); - - @if $with-base { - $set: map.merge((base: $color), $set); - } - - @return $set; -} - -@function color-variants-dark($color, $is-dark, $with-base: false) { - $set: ( - '3%': light-change($color, 3%, $is-dark), - '6%': light-change($color, 6%, $is-dark), - '9%': light-change($color, 9%, $is-dark), - '12%': light-change($color, 12%, $is-dark), - '15%': light-change($color, 15%, $is-dark), - '18%': light-change($color, 18%, $is-dark), - '21%': light-change($color, 21%, $is-dark), - '24%': light-change($color, 24%, $is-dark), - '27%': light-change($color, 27%, $is-dark), - '30%': light-change($color, 30%, $is-dark), - '33%': light-change($color, 33%, $is-dark), - '36%': light-change($color, 36%, $is-dark), - '39%': light-change($color, 39%, $is-dark), - ); - - @if $with-base { - $set: map.merge((base: $color), $set); - } - - @return $set; -} - -@function variants($color, $is-dark, $light: true, $dark: true, $base: true, $override-base-with: null) { - $set: (); - - // base: $color, - // light: color-variants-light($color, $is-dark), - // dark: color-variants-dark($color, $is-dark), - - @if $light { - $set: map.merge($set, (light: color-variants-light($color, $is-dark))); - } - - @if $dark { - $set: map.merge($set, (dark: color-variants-dark($color, $is-dark))); - } - - @if $base { - @if $override-base-with { - $set: map.merge($set, (base: $override-base-with)); - } @else { - $set: map.merge($set, (base: $color)); - } - } - - @return $set; -} \ No newline at end of file diff --git a/tools/tasks/fonts.js b/tools/tasks/fonts.js index 311b1ec..23b8598 100644 --- a/tools/tasks/fonts.js +++ b/tools/tasks/fonts.js @@ -1,4 +1,4 @@ -import { copyFileSync, mkdirSync } from 'fs'; +import { copyFileSync, mkdirSync, existsSync } from 'fs'; import { join } from 'path'; import { readFiles } from '../utils/funcs.js'; import { Logger } from '../utils/logger.js'; @@ -12,7 +12,11 @@ export async function buildFonts(srcHome, distHome) { const fontsSrcPath = join(srcHome, imgSrc); const fontsDestPath = join(distHome, imgDest); - mkdirSync(fontsDestPath, { recursive: true }); + // if fontsSrcPath does not exist, return + if (!existsSync(fontsSrcPath)) { + logger.warn(`No fonts found in ${fontsSrcPath} (there's not even a folder there)`); + return; + } const files = readFiles(fontsSrcPath, [ '.woff', @@ -23,6 +27,14 @@ export async function buildFonts(srcHome, distHome) { '.otf', ]); + // if there are no files, return + if (!files.length) { + logger.warn(`No fonts found in ${fontsSrcPath}`); + return; + } + + mkdirSync(fontsDestPath, { recursive: true }); + for (const file of files) { // just copy the file copyFileSync(join(fontsSrcPath, file), join(fontsDestPath, file)); diff --git a/tools/tasks/templates.js b/tools/tasks/templates.js index b86a562..b05a4e4 100644 --- a/tools/tasks/templates.js +++ b/tools/tasks/templates.js @@ -1,4 +1,5 @@ import { join } from 'path'; +import { existsSync } from 'fs'; import { copyFolderRecursiveSync } from '../utils/funcs.js'; import { Logger } from '../utils/logger.js'; @@ -11,6 +12,12 @@ export async function buildTemplates(srcHome, distHome) { const tmplSrcPath = join(srcHome, tmplSrc); const tmplDestPath = join(distHome, tmplDest); + // if src/templates folder doesn't exist, just return + if (!existsSync(tmplSrcPath)) { + logger.info(`No templates found in ${tmplSrcPath}. Skipping templates build`); + return; + } + // just copy the entire tmplSrcPath to tmplDestPath copyFolderRecursiveSync(tmplSrcPath, tmplDestPath); logger.info('Templates build has finished');