From daa84891753a7735702564b3cb230a52f1d5a12e Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Fri, 8 Oct 2021 13:30:43 +1100 Subject: [PATCH] theme: nord --- repo/dracula/variables.css | 5 ++ repo/menu/menu.mjs | 25 ++++++- repo/neutral/app.css | 1 - repo/neutral/mod.js | 17 ----- repo/neutral/variables.css | 2 +- repo/nord/mod.json | 27 +++++++ repo/nord/variables.css | 129 +++++++++++++++++++++++++++++++++ repo/pastel-dark/variables.css | 19 +++-- repo/registry.json | 1 + 9 files changed, 197 insertions(+), 29 deletions(-) delete mode 100644 repo/neutral/mod.js create mode 100644 repo/nord/mod.json create mode 100644 repo/nord/variables.css diff --git a/repo/dracula/variables.css b/repo/dracula/variables.css index d696d6f..b55598d 100644 --- a/repo/dracula/variables.css +++ b/repo/dracula/variables.css @@ -6,6 +6,8 @@ * (https://notion-enhancer.github.io/) under the MIT license */ +@import 'https://rsms.me/inter/inter.css'; + :root.dark { --dracula--bg: #282a36; --dracula--bg_lighter: #424450; @@ -40,6 +42,9 @@ --dracula--bg_pink: #8d4a7c; --dracula--bg_red: #943844; + --theme--font_sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, + 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; + --theme--accent_blue: var(--dracula--purple); --theme--accent_blue-selection: #bb8dfd3d; --theme--accent_blue-hover: #b179ff; diff --git a/repo/menu/menu.mjs b/repo/menu/menu.mjs index 4804648..c9575f2 100644 --- a/repo/menu/menu.mjs +++ b/repo/menu/menu.mjs @@ -345,13 +345,31 @@ import * as router from './router.mjs'; router.addView('core', async () => { web.empty($main); selectNavItem($coreNavItem); - return web.render($main, await generators.modList('core')); + return web.render( + $main, + await generators.modList( + 'core', + `The enhancer's core mods provide the basics + required for all other extensions and themes to work. + Core mods can't be disabled, but they can be configured + - just click on a mod to access its options.` + ) + ); }); router.addView('extensions', async () => { web.empty($main); selectNavItem($extensionsNavItem); - return web.render($main, await generators.modList('extension')); + return web.render( + $main, + await generators.modList( + 'extension', + `Extensions modify and extend the + functionality of the Notion client. + They don't extend Notion's data structures, + so you can safely enable or disable them at any time.` + ) + ); }); router.addView('themes', async () => { @@ -361,7 +379,8 @@ router.addView('themes', async () => { $main, await generators.modList( 'theme', - `Dark themes will only work when Notion is in dark mode, + `Themes change Notion's colour scheme. + Dark themes will only work when Notion is in dark mode, and light themes will only work when Notion is in light mode. Only one theme of each mode can be enabled at a time.` ) diff --git a/repo/neutral/app.css b/repo/neutral/app.css index cf221d2..c1c967d 100644 --- a/repo/neutral/app.css +++ b/repo/neutral/app.css @@ -19,7 +19,6 @@ /* 1.3 supreme ratio. https://www.modularscale.com/ */ .notion-frame .notion-page-block div[placeholder='Untitled'], .notion-overlay-container .notion-page-block div[placeholder='Untitled'] { - --neutral--body-font_size: 15px; font-size: 33px !important; } [placeholder='Heading 1'] { diff --git a/repo/neutral/mod.js b/repo/neutral/mod.js deleted file mode 100644 index 25ea0e5..0000000 --- a/repo/neutral/mod.js +++ /dev/null @@ -1,17 +0,0 @@ -/* - * neutral - * (c) 2020 dragonwocky (https://dragonwocky.me/) - * (c) 2020 Arecsu - * under the MIT license - */ - -'use strict'; - -module.exports = { - id: 'c4435543-4705-4d68-8cf7-d11c342f8089', - tags: ['theme', 'dark'], - name: 'neutral', - desc: 'smoother colours and fonts, designed to be more pleasing to the eye.', - version: '0.1.4', - author: 'arecsu', -}; diff --git a/repo/neutral/variables.css b/repo/neutral/variables.css index aae8b39..03d47c1 100644 --- a/repo/neutral/variables.css +++ b/repo/neutral/variables.css @@ -30,8 +30,8 @@ --theme--scrollbar_thumb: #232425; --theme--scrollbar_thumb-hover: #373838; - --theme--ui_divider: rgba(78, 78, 78, 0.7); --theme--ui_shadow: rgba(15, 15, 15, 0.5); + --theme--ui_divider: rgba(78, 78, 78, 0.7); --theme--ui_interactive-hover: rgb(29, 29, 29); --theme--ui_interactive-active: rgba(29, 29, 29, 0.7); --theme--ui_input: #1d1d1d; diff --git a/repo/nord/mod.json b/repo/nord/mod.json new file mode 100644 index 0000000..f0ff4b2 --- /dev/null +++ b/repo/nord/mod.json @@ -0,0 +1,27 @@ +{ + "name": "nord", + "id": "d64ad391-1494-4112-80ae-0a3b6f4b0c3f", + "version": "0.2.0", + "description": "an arctic, north-bluish color palette..", + "tags": ["theme", "dark"], + "authors": [ + { + "name": "Artic Ice Studio", + "email": "development@arcticicestudio.com", + "homepage": "https://www.nordtheme.com/", + "avatar": "https://avatars.githubusercontent.com/u/7836623" + }, + { + "name": "MANNNNEN", + "homepage": "https://github.com/MANNNNEN", + "avatar": "https://avatars.githubusercontent.com/u/35939149" + } + ], + "css": { + "frame": ["variables.css"], + "client": ["variables.css"], + "menu": ["variables.css"] + }, + "js": {}, + "options": [] +} diff --git a/repo/nord/variables.css b/repo/nord/variables.css new file mode 100644 index 0000000..b5c807b --- /dev/null +++ b/repo/nord/variables.css @@ -0,0 +1,129 @@ +/* + * notion-enhancer: dracula + * (c) 2016 Artic Ice Studio + * (c) 2020 MANNNNEN + * (c) 2021 dragonwocky (https://dragonwocky.me/) + * (https://notion-enhancer.github.io/) under the MIT license + */ + +@import 'https://rsms.me/inter/inter.css'; +@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap'); + +:root.dark { + --nord--dark1: #2e3440; + --nord--dark2: #3b4252; + --nord--dark3: #434c5e; + --nord--dark4: #4c566a; + --nord--light1: #d8dee9; + --nord--light2: #e5e9f0; + --nord--light3: #eceff4; + --nord--frost1: #8fbcbb; + --nord--frost2: #88c0d0; + --nord--frost3: #81a1c1; + --nord--frost4: #5e81ac; + --nord--red: #bf616a; + --nord--orange: #d08770; + --nord--yellow: #ebcb8b; + --nord--green: #a3be8c; + --nord--purple: #b48ead; + + --theme--font_sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, + 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; + --theme--font_code: 'Fira Code', monospace; + + --theme--accent_blue: var(--nord--frost2); + --theme--accent_blue-selection: rgb(136 192 208 / 50%); + --theme--accent_blue-hover: var(--nord--frost1); + --theme--accent_blue-active: var(--nord--frost2); + --theme--accent_red: var(--nord--red); + --theme--accent_red-button: rgba(235, 87, 87, 0.2); + + --theme--bg: var(--nord--dark1); + --theme--bg_secondary: var(--nord--dark2); + --theme--bg_popup: var(--nord--dark2); + + --theme--scrollbar_track: transparent; + --theme--scrollbar_thumb: var(--nord--dark3); + --theme--scrollbar_thumb-hover: var(--nord--dark4); + + --theme--ui_divider: rgba(255, 255, 255, 0.1); + --theme--ui_interactive-hover: var(--nord--dark4); + --theme--ui_interactive-active: #4c566ade; + --theme--ui_toggle-off: var(--nord--dark4); + --theme--ui_toggle-feature: var(--nord--light1); + + --theme--icon: var(--nord--light1); + --theme--icon_secondary: var(--nord--light1); + + --theme--text: var(--nord--light1); + --theme--text_secondary: var(--nord--light1); + --theme--text_gray: rgba(151, 154, 155, 0.95); + --theme--text_brown: rgb(147, 114, 100); + --theme--text_orange: var(--nord--orange); + --theme--text_yellow: var(--nord--yellow); + --theme--text_green: var(--nord--green); + --theme--text_blue: var(--nord--frost3); + --theme--text_purple: var(--nord--purple); + --theme--text_pink: rgb(193 106 153); + --theme--text_red: var(--nord--red); + + --theme--highlight_gray: rgb(69, 75, 78); + --theme--highlight_brown: rgb(67, 64, 64); + --theme--highlight_orange: var(--nord--orange); + --theme--highlight_yellow: var(--nord--yellow); + --theme--highlight_green: var(--nord--green); + --theme--highlight_blue: var(--nord--frost3); + --theme--highlight_purple: var(--nord--purple); + --theme--highlight_pink: rgb(193 106 153); + --theme--highlight_red: var(--nord--red); + + --theme--block_gray: rgb(69, 75, 78); + --theme--block_brown: rgb(67, 64, 64); + --theme--block_orange: var(--nord--orange); + --theme--block_yellow: var(--nord--yellow); + --theme--block_green: var(--nord--green); + --theme--block_blue: var(--nord--frost3); + --theme--block_purple: var(--nord--purple); + --theme--block_pink: rgb(193 106 153); + --theme--block_red: var(--nord--red); + + --theme--tag_default: rgba(151, 154, 155, 0.5); + --theme--tag_gray: rgba(151, 154, 155, 0.5); + --theme--tag_brown: rgba(147, 114, 100, 0.5); + --theme--tag_orange: rgba(255, 163, 68, 0.5); + --theme--tag_yellow: rgba(255, 220, 73, 0.5); + --theme--tag_green: rgba(77, 171, 154, 0.5); + --theme--tag_blue: rgba(82, 156, 202, 0.5); + --theme--tag_purple: rgba(154, 109, 215, 0.5); + --theme--tag_pink: rgba(226, 85, 161, 0.5); + --theme--tag_red: rgba(255, 115, 105, 0.5); + + --theme--callout_gray: rgba(69, 75, 78, 0.3); + --theme--callout_brown: rgba(67, 64, 64, 0.3); + --theme--callout_orange: rgba(89, 74, 58, 0.3); + --theme--callout_yellow: rgba(89, 86, 59, 0.3); + --theme--callout_green: rgba(53, 76, 75, 0.3); + --theme--callout_blue: rgba(54, 73, 84, 0.3); + --theme--callout_purple: rgba(68, 63, 87, 0.3); + --theme--callout_pink: rgba(83, 59, 76, 0.3); + --theme--callout_red: rgba(89, 65, 65, 0.3); + + --theme--code_inline: rgba(135, 131, 120, 0.15); + --theme--code_inline-text: var(--nord--red); + + --theme--code: var(--theme--bg_popup); + --theme--code_function: var(--theme--text_blue); + --theme--code_keyword: var(--theme--text_pink); + --theme--code_tag: var(--theme--text_pink); + --theme--code_operator: var(--theme--text_yellow); + --theme--code_important: var(--theme--text_yellow); + --theme--code_property: var(--theme--text_pink); + --theme--code_builtin: var(--theme--text_yellow); + --theme--code_attr-name: var(--theme--text_yellow); + --theme--code_comment: var(--theme--text_gray); + --theme--code_punctuation: var(--theme--text_gray); + --theme--code_doctype: var(--theme--text_gray); + --theme--code_number: var(--theme--text_purple); + --theme--code_string: var(--theme--text_orange); + --theme--code_attr-value: var(--theme--text_orange); +} diff --git a/repo/pastel-dark/variables.css b/repo/pastel-dark/variables.css index e99f697..b90eb57 100644 --- a/repo/pastel-dark/variables.css +++ b/repo/pastel-dark/variables.css @@ -5,14 +5,11 @@ * under the MIT license */ -:root.dark { - --theme--bg: #0b0b0b; - --theme--bg_secondary: #0f0f0f; - --theme--bg_popup: #0f0f0f; +@import 'https://rsms.me/inter/inter.css'; - --theme--scrollbar_track: transparent; - --theme--scrollbar_thumb: #141414; - --theme--scrollbar_thumb-hover: #1b1b1b; +:root.dark { + --theme--font_sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, + 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; --theme--accent_blue: #b887f7; --theme--accent_blue-selection: rgba(184, 135, 247, 0.3); @@ -21,6 +18,14 @@ --theme--accent_red: #08d7c2; --theme--accent_red-button: #08d7c226; + --theme--bg: #0b0b0b; + --theme--bg_secondary: #0f0f0f; + --theme--bg_popup: #0f0f0f; + + --theme--scrollbar_track: transparent; + --theme--scrollbar_thumb: #141414; + --theme--scrollbar_thumb-hover: #1b1b1b; + --theme--ui_divider: rgba(255, 255, 255, 0.1); --theme--ui_interactive-hover: #1e1e1e5c; --theme--ui_interactive-active: #1e1e1ea5; diff --git a/repo/registry.json b/repo/registry.json index c8132dd..4d90bb2 100644 --- a/repo/registry.json +++ b/repo/registry.json @@ -10,6 +10,7 @@ "dracula", "pastel-dark", "neutral", + "nord", "bypass-preview", "calendar-scroll"