feat: dark and light themes

This commit is contained in:
Lucas Colombo
2023-07-02 18:36:28 -03:00
parent 65a7943588
commit 2a81b68185
450 changed files with 8511 additions and 48426 deletions

View File

@ -2,7 +2,7 @@
<defs>
<style>
.a {
fill: #e373ff;
fill: #a6c6f7;
}
</style>
</defs>

Before

Width:  |  Height:  |  Size: 239 B

After

Width:  |  Height:  |  Size: 239 B

View File

@ -2,7 +2,7 @@
<defs>
<style>
.a, .b {
fill: #e373ff;
fill: #a6c6f7;
}
.a {

Before

Width:  |  Height:  |  Size: 502 B

After

Width:  |  Height:  |  Size: 502 B

View File

@ -2,7 +2,7 @@
<defs>
<style>
.a {
fill: #e373ff;
fill: #a6c6f7;
}
</style>
</defs>

Before

Width:  |  Height:  |  Size: 368 B

After

Width:  |  Height:  |  Size: 368 B

View File

@ -1,44 +1,46 @@
@use '@lucas-labs/lui-micro' as lui;
@use './utils/color-utils' as c;
@use './gitea';
@use './theme' as theme;
$is-dark: true;
$brand: #a6c6f7;
$colors: (
theme: (
'rosewater': c.variants(#f5e0dc, $is-dark, $dark: false),
'flamingo': c.variants(#f2cdcd, $is-dark, $dark: false),
'pink': c.variants(#f5c2e7, $is-dark, $dark: false),
'mauve': c.variants(#cba6f7, $is-dark, $dark: false),
'red': c.variants(#f38ba8, $is-dark, $dark: false),
'maroon': c.variants(#eba0ac, $is-dark, $dark: false),
'peach': c.variants(#fab387, $is-dark, $dark: false),
'yellow': c.variants(#f9e2af, $is-dark, $dark: false),
'green': c.variants(#a6e3a1, $is-dark, $dark: false),
'teal': c.variants(#94e2d5, $is-dark, $dark: false),
'sky': c.variants(#89dceb, $is-dark, $dark: false),
'sapphire': c.variants(#74c7ec, $is-dark, $dark: false),
'blue': c.variants(#89b4fa, $is-dark, $dark: false),
'lavender': c.variants(#b4befe, $is-dark, $dark: false),
'black': c.variants(#181825, $is-dark, $dark: false),
'white': c.variants(#cdd6f4, $is-dark, $dark: false),
'rosewater': c.variants(#f5e0dc, $is-dark),
'flamingo': c.variants(#f2cdcd, $is-dark),
'pink': c.variants(#f5c2e7, $is-dark),
'mauve': c.variants($brand, $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),
'teal': c.variants(#94e2d5, $is-dark),
'sky': c.variants(#89dceb, $is-dark),
'sapphire': c.variants(#74c7ec, $is-dark),
'blue': c.variants(#89b4fa, $is-dark),
'lavender': c.variants(#b4befe, $is-dark),
'black': c.variants(#181825, $is-dark),
'white': c.variants(#e6edf3, $is-dark),
),
text: #cdd6f4,
primary: c.variants(#cba6f7, $is-dark),
secondary: c.variants(#313244, $is-dark),
text: #e6edf3,
primary: c.variants($brand, $is-dark),
secondary: c.variants(#5d5f7a, $is-dark),
elevation: (
'1': #11111b, // crust
'2': #181825, // mantle
'3': #1e1e2e, // base
'4': #313244, // surface0
'5': #45475a, // surface1
'6': #585b70, // surface2
'7': #6c7086, // overlay0
'8': #7f849c, // overlay1
'9': #9399b2, // overlay2
'10': #a6adc8, // subtext0
'11': #bac2de, // subtext1
'12': #cdd6f4, // text
'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, //
)
);
@ -47,9 +49,22 @@ $colors: (
$theme: (
colors: $colors,
variables: (
'base-font-size': 16px,
'font-family': 'Inter, Roboto, sans-serif',
'base-font-size': 14px,
'font-family': '"Outfit", Inter, Roboto, 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,
)
),
),
@ -61,6 +76,6 @@ $colors: (
),
);
@include gitea.make-theme(
@include theme.make-theme(
$is-dark: $is-dark,
);

View File

@ -0,0 +1,81 @@
@use '@lucas-labs/lui-micro' as lui;
@use './utils/color-utils' as c;
@use './theme' as theme;
$is-dark: false;
$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),
'teal': c.variants(#179299, $is-dark),
'sky': c.variants(#04a5e5, $is-dark),
'sapphire': c.variants(#209fb5, $is-dark),
'blue': c.variants(#1e66f5, $is-dark),
'lavender': c.variants(#7287fd, $is-dark),
'black': c.variants(#181825, $is-dark),
'white': c.variants(#e6edf3, $is-dark),
),
text: #4c4f69,
primary: c.variants($brand, $is-dark),
secondary: c.variants(#5d5f7a, $is-dark),
elevation: (
'1': #dce0e8, // crust
'2': #e6e9ef, // mantle
'3': #eff1f5, // base
'4': #ccd0da, // surface0
'5': #bcc0cc, // surface1
'6': #acb0be, // surface2
'7': #9ca0b0, // overlay0
'8': #8c8fa1, // overlay1
'9': #7c7f93, // overlay2
'10': #6c6f85, // subtext0
'11': #5c5f77, // subtext1
'12': #4c4f69, //
)
);
// init lui-micro, css-vars only (no reboot, no basic)
@include lui.init(
$theme: (
colors: $colors,
variables: (
'base-font-size': 14px,
'font-family': '"Outfit", Inter, Roboto, sans-serif',
'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace',
'measure': (
'.25x': 4px,
'.5x': 8px,
'1x': 16px,
'1.25x': 20px,
'1.5x': 24px,
'2x': 32px,
'3x': 48px,
'4x': 64px,
),
'repo-home': (
'sidebar-width': 296px,
)
),
),
$options: (
reboot: false,
basic: false,
fg-var-name: 'text',
bg-var-name: 'elevation/1',
),
);
@include theme.make-theme(
$is-dark: $is-dark,
);

View File

@ -1,16 +1,16 @@
@use '@lucas-labs/lui-micro/color' as color;
@use './modules/chroma' as chroma;
@use './modules/codemirror' as codemirror;
@use './modules/custom' as custom;
@use '@lucas-labs/lui-micro/var' as var;
@mixin make-theme($is-dark: true) {
$lvl1: if($is-dark, #{color.get('elevation/1')}, #{color.get('elevation/3')});
$lvl1-rgb: if($is-dark, #{color.get('elevation/1', 'rgb')}, #{color.get('elevation/3', 'rgb')});
$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: if($is-dark, #{color.get('elevation/3')}, #{color.get('elevation/1')});
$lvl3-rgb: if($is-dark, #{color.get('elevation/3', 'rgb')}, #{color.get('elevation/1', 'rgb')});
$lvl3: #{color.get('elevation/1')};
$lvl3-rgb: #{color.get('elevation/1', 'rgb')};
:root {
* {
@ -103,6 +103,31 @@
--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%')};
@ -135,13 +160,13 @@
--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: #{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: #{$lvl1};
--color-error-text: #{color.get('theme/red/base')};
--color-success-border: #{color.get('theme/green/light/12%')};
--color-success-bg: #{color.get('theme/green/base')};
--color-success-text: #{$lvl1};
--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};
@ -161,19 +186,20 @@
--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')};
/* target-based colors */
--color-body: #{$lvl1};
--color-box-header: #{$lvl2};
--color-box-body: #{$lvl2};
--color-box-header: #{rgba(color.get('elevation/2', 'rgb'), .8)};
--color-box-body: transparent;
--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/11')};
--color-text-light: #{color.get('elevation/12')};
--color-text-light-1: #{color.get('elevation/11')};
--color-text-light-2: #{color.get('elevation/11')};
--color-text-light-3: #{color.get('elevation/11')};
--color-footer: #{$lvl2};
--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')};
@ -192,12 +218,12 @@
--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/4')};
--color-card: #{color.get('elevation/4')};
--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: rgba(#{color.get('text', 'rgb')}, 0.05);
--color-button: #{color.get('elevation/4')};
--color-code-bg: #{color.get('elevation/3')};
--color-code-bg: #{color.get('elevation/2')};
--color-code-sidebar-bg: #{color.get('elevation/4')};
--color-shadow: rgba(#{$lvl1-rgb}, 0.1);
--color-secondary-bg: #{color.get('elevation/4')};
@ -256,10 +282,32 @@
}
}
.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);
}
// link color for signed commits
.ui.commit-header-row .svg.gitea-lock ~ a {
color: $lvl1;
@ -290,6 +338,27 @@
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;
}
}
@include chroma.make-chroma-styles;
@include codemirror.make-code-mirror-styles;
@include custom.apply-custom-styles;
}

View File

@ -0,0 +1,77 @@
@use '@lucas-labs/lui-micro/var' as var;
@use '@lucas-labs/lui-micro/color' as color;
@mixin apply-styles {
.header-wrapper {
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;
}
.ui.tabular.menu.navbar {
.item {
--item-margin-bottom: #{var.get('measure/1x')};
margin: var(--item-margin-bottom) var.get('measure/.5x');
border-radius: var.get('measure/.25x');
padding: var.get('measure/.5x') var.get('measure/.5x');
color: var(--color-text);
border: none;
svg {
color: var(--color-text-light-3);
margin-right: var.get('measure/.5x');
}
&.active {
background-color: transparent;
color: var(--color-text);
border-radius: var.get('measure/.25x') !important;
font-weight: normal;
// border-bottom: 4px solid color.get('primary/base');;
&::after {
background: color.get('primary/base');;
border-radius: 6px;
bottom: calc(0px - var(--item-margin-bottom));
content: "";
height: 2px;
position: absolute;
right: 50%;
transform: translate(50%, -50%);
width: 100%;
z-index: 1;
}
}
.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;
}
&:hover {
background-color: color.get('elevation/4');
}
}
}
}
}

View File

@ -0,0 +1,7 @@
@use './repo-header';
@use './repo';
@mixin apply-custom-styles {
@include repo-header.apply-styles();
@include repo.apply-styles();
}

View File

@ -0,0 +1,166 @@
@use '@lucas-labs/lui-micro/var' as var;
@use '@lucas-labs/lui-micro/color' as color;
@mixin apply-styles {
.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;
.ui.repo-topic.large.label.topic {
background-color: rgba(#{color.get('theme/blue/base', 'rgb')}, 0.3);
color: color.get('primary/base');
border-radius: var.get('measure/2x');
border: 1px solid rgba(#{color.get('theme/blue/base', 'rgb')}, 0.4);
line-height: 14px;
}
@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: 768px) {
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');
}
#topic_edit {
flex-direction: column;
row-gap: var.get('measure/1x');
.field.gt-f1.gt-mr-3 {
margin: 0px !important;
+div {
display: flex;
column-gap: var.get('measure/1x');
button {
display: block !important;
margin: 0px !important;
width: 100%;
}
}
}
}
#repo-topics {
margin-top: var.get('measure/1x') !important;
}
}
}

View File

@ -0,0 +1,5 @@
@use './file-list';
@mixin apply-styles {
@include file-list.apply-styles();
}