Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduce a theme for TriliumNext #661

Merged
merged 89 commits into from
Nov 29, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
89 commits
Select commit Hold shift + click to select a range
7cb9671
feat(theme): start implementing a theme for TriliumNext
eliandoran Nov 22, 2024
3e705ec
feat(theme): use prefers-color-scheme for automatic theme
eliandoran Nov 22, 2024
2e544a7
feat(theme): use TriliumNext as default theme
eliandoran Nov 22, 2024
76256c1
feat(theme): use TriliumNext as setup theme
eliandoran Nov 22, 2024
fd53781
feat(theme): use TriliumNext as login & set password theme
eliandoran Nov 22, 2024
5b62ad1
Merge remote-tracking branch 'origin/develop' into feature/trilium_ne…
eliandoran Nov 23, 2024
e602445
style(next): use sans-serif font with temporary Inter
eliandoran Nov 23, 2024
954a51e
Migrate the previously designed code blocks to the new theme
adoriandoran Nov 24, 2024
3d54b7b
Define the drop shadow of code boxes via a CSS variable
adoriandoran Nov 24, 2024
5563a2b
Add the color definitions for the light theme
adoriandoran Nov 24, 2024
388b5a9
Add comments
adoriandoran Nov 24, 2024
2243db5
Correct the indentation
adoriandoran Nov 24, 2024
116e362
Apply translucency to menus
adoriandoran Nov 24, 2024
208dbd4
Light theme: tweak launcher pane and left pane colors
adoriandoran Nov 26, 2024
ae7764a
Restyle the vertical launcher pane
adoriandoran Nov 26, 2024
df94dab
Tweak the left pane
adoriandoran Nov 26, 2024
f2ebb3c
Restyle the tree view items
adoriandoran Nov 26, 2024
f2cd34a
Add transition
adoriandoran Nov 26, 2024
8f38c36
Fix the action buttons not showing up for the selected item
adoriandoran Nov 26, 2024
bb3f779
Add some horizontal padding for the tree view
adoriandoran Nov 26, 2024
07a766d
Tweak tree view items
adoriandoran Nov 26, 2024
d788ce8
Tweak tree view items
adoriandoran Nov 26, 2024
180d0e9
Restyle the tree view item action buttons
adoriandoran Nov 26, 2024
3c8fbd9
Hide the tree actions
adoriandoran Nov 26, 2024
4977092
Add a fade in animation when the tree view is shown
adoriandoran Nov 26, 2024
dd707d6
Restyle the gutter
adoriandoran Nov 26, 2024
12cae21
Switch the main font to "Lato"
adoriandoran Nov 26, 2024
abfbe2c
Correct offsets to accommodate the new font metrics
adoriandoran Nov 26, 2024
9d289ec
Tweak the table of contents pane
adoriandoran Nov 27, 2024
a1fc670
Tweak the highlights list pane
adoriandoran Nov 27, 2024
7d737e7
Introduce a root background color, make the tab bar and gutter backgr…
adoriandoran Nov 27, 2024
f24242d
Add a way to customize the height of the tab bar / tabs and the first…
adoriandoran Nov 27, 2024
8988d93
Merge remote-tracking branch 'origin/develop' into feature/trilium_ne…
eliandoran Nov 27, 2024
6e90b5c
style(next): fix tab height on horizontal layout
eliandoran Nov 27, 2024
0661e72
style(next): fix gutter color for dark mode
eliandoran Nov 27, 2024
58b8232
Revert "style(next): fix tab height on horizontal layout"
eliandoran Nov 27, 2024
ba310b2
style(next): fix launcher pane style for horizontal
eliandoran Nov 27, 2024
e4c7d8d
Restyle tabs
adoriandoran Nov 27, 2024
b6dda49
Merge branch 'feature/trilium_next_theme' of https://github.com/Trili…
adoriandoran Nov 27, 2024
c391ef8
Tweak the center pane
adoriandoran Nov 27, 2024
51ee664
Adjust padding
adoriandoran Nov 27, 2024
30ece35
style(next): set up Lato font
eliandoran Nov 27, 2024
b33e27b
style(next): add a few extra fonts
eliandoran Nov 27, 2024
a3ab9f0
style(next): remove redundant font
eliandoran Nov 27, 2024
47579e5
feat(theme): inform user that the next theme is beta
eliandoran Nov 27, 2024
6c99a69
Restyle the close tab buttons
adoriandoran Nov 27, 2024
787466f
Update CSS selector
adoriandoran Nov 27, 2024
3f36555
Restyle the new tab button
adoriandoran Nov 27, 2024
1b26128
Improve the appearance of the new tab button, extract variables
adoriandoran Nov 27, 2024
180c592
Improve the close tab button
adoriandoran Nov 27, 2024
6d2e3a6
Tweak the colors of the inactive tab
adoriandoran Nov 27, 2024
e040835
Add a distinctive style for tabs while being dragged
adoriandoran Nov 27, 2024
a0e01fe
Tweak tabs
adoriandoran Nov 28, 2024
1d95fb3
Add transitions for tabs
adoriandoran Nov 28, 2024
3d8a662
Add transition for the close tab button
adoriandoran Nov 28, 2024
50cf7d4
Add transition to the new tab button
adoriandoran Nov 28, 2024
fefb79a
Fix background glitch
adoriandoran Nov 28, 2024
7bba991
Add an active state transition for the new tab button
adoriandoran Nov 28, 2024
2b55339
Fix broken transition
adoriandoran Nov 28, 2024
65fb7cb
Adjust transition durations
adoriandoran Nov 28, 2024
6ad0928
Improve the overall appearance when the left pane is collapsed
adoriandoran Nov 28, 2024
e6aa8a5
Restyle the quick search box
adoriandoran Nov 29, 2024
04efba1
Add hover state for the quick search box
adoriandoran Nov 29, 2024
6a74765
Don't highlight the quick search button if the search text box is not…
adoriandoran Nov 29, 2024
821a077
Switch the color of the search button according to the current state
adoriandoran Nov 29, 2024
6e870db
Restyle menus
adoriandoran Nov 29, 2024
8ee30e1
Restyle menu item delimiters
adoriandoran Nov 29, 2024
1ddd5d8
Restyle menu item arrows
adoriandoran Nov 29, 2024
3cfdbc5
Tweak menu item keyboard shortcut
adoriandoran Nov 29, 2024
a53403f
Tweak the icons for the menu items
adoriandoran Nov 29, 2024
513d7f3
Tweak the offset of menu item icons
adoriandoran Nov 29, 2024
3583f53
Fix the hover background of the global menu button
adoriandoran Nov 29, 2024
5face49
Update the colors of the dark theme
adoriandoran Nov 29, 2024
c6b7015
Update again the colors of the dark theme
adoriandoran Nov 29, 2024
197f291
Tweak colors
adoriandoran Nov 29, 2024
cdc530a
Fix a glitch of the new tab button
adoriandoran Nov 29, 2024
38025e0
Tweak the new tab button
adoriandoran Nov 29, 2024
8540201
Tweak again the new tab button
adoriandoran Nov 29, 2024
4028fa0
Allow the left pane action button color to be customized, tweak colors
adoriandoran Nov 29, 2024
d569575
Change the colors of the new tab button
adoriandoran Nov 29, 2024
7496101
Restyle the new tab button
adoriandoran Nov 29, 2024
d2af4c3
Tweak the left pane's action buttons
adoriandoran Nov 29, 2024
48253e0
Tweak the quick search button
adoriandoran Nov 29, 2024
00f7305
Allow customizing the hover color of the right pane items
adoriandoran Nov 29, 2024
d7240b5
Refactor
adoriandoran Nov 29, 2024
7a06490
Fix an unwanted interference with certain combo boxes
adoriandoran Nov 29, 2024
8c62949
style(next): tab height on horizontal layout
eliandoran Nov 29, 2024
921f216
Merge remote-tracking branch 'origin/develop' into feature/trilium_ne…
eliandoran Nov 29, 2024
0ea4171
style(next): improve tab height on horizontal further
eliandoran Nov 29, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/public/app/layouts/desktop_layout.js
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,8 @@ export default class DesktopLayout {
return new RootContainer(launcherPaneIsHorizontal)
.setParent(appContext)
.class((launcherPaneIsHorizontal ? "horizontal" : "vertical") + "-layout")
.optChild(launcherPaneIsHorizontal, new FlexContainer('row')
.optChild(launcherPaneIsHorizontal, new FlexContainer('row')
.class("tab-row-container")
.child(new TabRowWidget().class("full-width"))
.child(new TitleBarButtonsWidget())
.css('height', '40px')
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,9 @@ export default class ThemeOptions extends OptionsWidget {

async optionsLoaded(options) {
const themes = [
{ val: 'next', title: t("theme.triliumnext") },
{ val: 'light', title: t('theme.light_theme') },
{ val: 'dark', title: t('theme.dark_theme') }
{ val: 'dark', title: t('theme.dark_theme') }
].concat(await server.get('options/user-themes'));

this.$themeSelect.empty();
Expand Down
Binary file not shown.
Binary file not shown.
93 changes: 93 additions & 0 deletions src/public/fonts/Inter/OFL.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://openfontlicense.org


-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
118 changes: 118 additions & 0 deletions src/public/fonts/Inter/README.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
Inter Variable Font
===================

This download contains Inter as both variable fonts and static fonts.

Inter is a variable font with these axes:
opsz
wght

This means all the styles are contained in these files:
Inter/Inter-VariableFont_opsz,wght.ttf
Inter/Inter-Italic-VariableFont_opsz,wght.ttf

If your app fully supports variable fonts, you can now pick intermediate styles
that aren’t available as static fonts. Not all apps support variable fonts, and
in those cases you can use the static font files for Inter:
Inter/static/Inter_18pt-Thin.ttf
Inter/static/Inter_18pt-ExtraLight.ttf
Inter/static/Inter_18pt-Light.ttf
Inter/static/Inter_18pt-Regular.ttf
Inter/static/Inter_18pt-Medium.ttf
Inter/static/Inter_18pt-SemiBold.ttf
Inter/static/Inter_18pt-Bold.ttf
Inter/static/Inter_18pt-ExtraBold.ttf
Inter/static/Inter_18pt-Black.ttf
Inter/static/Inter_24pt-Thin.ttf
Inter/static/Inter_24pt-ExtraLight.ttf
Inter/static/Inter_24pt-Light.ttf
Inter/static/Inter_24pt-Regular.ttf
Inter/static/Inter_24pt-Medium.ttf
Inter/static/Inter_24pt-SemiBold.ttf
Inter/static/Inter_24pt-Bold.ttf
Inter/static/Inter_24pt-ExtraBold.ttf
Inter/static/Inter_24pt-Black.ttf
Inter/static/Inter_28pt-Thin.ttf
Inter/static/Inter_28pt-ExtraLight.ttf
Inter/static/Inter_28pt-Light.ttf
Inter/static/Inter_28pt-Regular.ttf
Inter/static/Inter_28pt-Medium.ttf
Inter/static/Inter_28pt-SemiBold.ttf
Inter/static/Inter_28pt-Bold.ttf
Inter/static/Inter_28pt-ExtraBold.ttf
Inter/static/Inter_28pt-Black.ttf
Inter/static/Inter_18pt-ThinItalic.ttf
Inter/static/Inter_18pt-ExtraLightItalic.ttf
Inter/static/Inter_18pt-LightItalic.ttf
Inter/static/Inter_18pt-Italic.ttf
Inter/static/Inter_18pt-MediumItalic.ttf
Inter/static/Inter_18pt-SemiBoldItalic.ttf
Inter/static/Inter_18pt-BoldItalic.ttf
Inter/static/Inter_18pt-ExtraBoldItalic.ttf
Inter/static/Inter_18pt-BlackItalic.ttf
Inter/static/Inter_24pt-ThinItalic.ttf
Inter/static/Inter_24pt-ExtraLightItalic.ttf
Inter/static/Inter_24pt-LightItalic.ttf
Inter/static/Inter_24pt-Italic.ttf
Inter/static/Inter_24pt-MediumItalic.ttf
Inter/static/Inter_24pt-SemiBoldItalic.ttf
Inter/static/Inter_24pt-BoldItalic.ttf
Inter/static/Inter_24pt-ExtraBoldItalic.ttf
Inter/static/Inter_24pt-BlackItalic.ttf
Inter/static/Inter_28pt-ThinItalic.ttf
Inter/static/Inter_28pt-ExtraLightItalic.ttf
Inter/static/Inter_28pt-LightItalic.ttf
Inter/static/Inter_28pt-Italic.ttf
Inter/static/Inter_28pt-MediumItalic.ttf
Inter/static/Inter_28pt-SemiBoldItalic.ttf
Inter/static/Inter_28pt-BoldItalic.ttf
Inter/static/Inter_28pt-ExtraBoldItalic.ttf
Inter/static/Inter_28pt-BlackItalic.ttf

Get started
-----------

1. Install the font files you want to use

2. Use your app's font picker to view the font family and all the
available styles

Learn more about variable fonts
-------------------------------

https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
https://variablefonts.typenetwork.com
https://medium.com/variable-fonts

In desktop apps

https://theblog.adobe.com/can-variable-fonts-illustrator-cc
https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts

Online

https://developers.google.com/fonts/docs/getting_started
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts

Installing fonts

MacOS: https://support.apple.com/en-us/HT201749
Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows

Android Apps

https://developers.google.com/fonts/docs/android
https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts

License
-------
Please read the full license text (OFL.txt) to understand the permissions,
restrictions and requirements for usage, redistribution, and modification.

You can use them in your products & projects – print or digital,
commercial or otherwise.

This isn't legal advice, please consider consulting a lawyer and see the full
license for all details.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
93 changes: 93 additions & 0 deletions src/public/fonts/Noto_Sans/OFL.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
Copyright 2022 The Noto Project Authors (https://github.com/notofonts/latin-greek-cyrillic)

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://openfontlicense.org


-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
Loading
Loading