From c8613d09375bf003da5a96546592742e5a43a6c8 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sun, 2 Jun 2024 13:00:03 +1000 Subject: [PATCH] chore: update material ocean theme --- src/registry.json | 3 +- src/themes/classic-dark/mod.json | 2 +- src/themes/material-ocean/client.css | 87 ++++++++++++ src/themes/material-ocean/mod.json | 24 ++-- src/themes/material-ocean/variables.css | 173 ------------------------ 5 files changed, 101 insertions(+), 188 deletions(-) create mode 100644 src/themes/material-ocean/client.css delete mode 100644 src/themes/material-ocean/variables.css diff --git a/src/registry.json b/src/registry.json index 070a46d..f353a24 100644 --- a/src/registry.json +++ b/src/registry.json @@ -10,5 +10,6 @@ "extensions/right-to-left", "extensions/no-peeking", "extensions/focus", - "themes/classic-dark" + "themes/classic-dark", + "themes/material-ocean" ] diff --git a/src/themes/classic-dark/mod.json b/src/themes/classic-dark/mod.json index e8a62c6..aadd2b7 100644 --- a/src/themes/classic-dark/mod.json +++ b/src/themes/classic-dark/mod.json @@ -1,7 +1,7 @@ { - "id": "fe0f4498-df34-4dd8-8470-27b6fcec9acd", "name": "Classic Dark", "version": "1.0.0", + "id": "fe0f4498-df34-4dd8-8470-27b6fcec9acd", "description": "The original Notion dark theme from pre-2022.", "thumbnail": "classic-dark.png", "tags": ["dark"], diff --git a/src/themes/material-ocean/client.css b/src/themes/material-ocean/client.css new file mode 100644 index 0000000..f42dbeb --- /dev/null +++ b/src/themes/material-ocean/client.css @@ -0,0 +1,87 @@ +/** + * notion-enhancer: material ocean + * (c) 2020 Abubakar Yagoub (https://blacksuan19.tk) + * (c) 2024 dragonwocky (https://dragonwocky.me/) + * (https://notion-enhancer.github.io/) under the MIT license + */ + +body.dark { + --ocean--main: #0f111a; + --ocean--sec: #00010a; + --ocean--tet: #000108; + --ocean--accent: #ff4151; + --ocean--light_gray: #e9e9e9; + --ocean--gray: #e0e0e0; + --ocean--brown: #d8b6a6; + --ocean--orange: #fde3c0; + --ocean--yellow: #ebcb8b; + --ocean--green: #a3be8c; + --ocean--blue: #81a1c1; + --ocean--purple: #b48ead; + --ocean--pink: #ffc0cb; + --ocean--red: #bf616a; + + --theme--fg-secondary: var(--ocean--gray); + --theme--fg-border: rgba(255, 255, 255, 0.1); + --theme--fg-gray: var(--ocean--gray); + --theme--fg-brown: var(--ocean--brown); + --theme--fg-orange: var(--ocean--orange); + --theme--fg-yellow: var(--ocean--yellow); + --theme--fg-green: var(--ocean--green); + --theme--fg-blue: var(--ocean--blue); + --theme--fg-purple: var(--ocean--purple); + --theme--fg-pink: var(--ocean--pink); + --theme--fg-red: var(--ocean--red); + + --theme--bg-primary: var(--ocean--main); + --theme--bg-secondary: var(--ocean--sec); + --theme--bg-hover: rgb(0, 1, 8, 0.3); + --theme--bg-light_gray: var(--ocean--light_gray); + --theme--bg-gray: var(--ocean--gray); + --theme--bg-brown: var(--ocean--brown); + --theme--bg-orange: var(--ocean--orange); + --theme--bg-yellow: var(--ocean--yellow); + --theme--bg-green: var(--ocean--green); + --theme--bg-blue: var(--ocean--blue); + --theme--bg-purple: var(--ocean--purple); + --theme--bg-pink: var(--ocean--pink); + --theme--bg-red: var(--ocean--red); + + --theme--dim-light_gray: var(--ocean--light_gray); + --theme--dim-gray: #e0e0e089; + --theme--dim-brown: #d8b6a692; + --theme--dim-orange: #fde3c09f; + --theme--dim-yellow: #ffe6a6ad; + --theme--dim-green: #a3be8ca3; + --theme--dim-blue: #81a1c1a3; + --theme--dim-purple: #b48eada8; + --theme--dim-pink: #ffc0cbb1; + --theme--dim-red: #bf616a9e; + + --theme--accent-primary: var(--ocean--accent); + --theme--accent-primary_hover: #fc3747; + --theme--accent-primary_transparent: rgba(255, 65, 81, 0.2); + --theme--accent-secondary: var(--ocean--accent); + --theme--accent-secondary_hover: #fc3747; + + --theme--scrollbar-track: transparent; + --theme--scrollbar-thumb: var(--ocean--sec); + --theme--scrollbar-thumb_hover: var(--ocean--accent); + + --theme--code-inline_fg: #b3f5c8; + --theme--code-inline_bg: var(--ocean--sec); + --theme--code-block_bg: var(--ocean--sec); + --theme--code-keyword: var(--ocean--pink); + --theme--code-builtin: var(--ocean--yellow); + --theme--code-class_name: var(--ocean--blue); + --theme--code-number: var(--ocean--purple); + --theme--code-property: var(--ocean--pink); + --theme--code-regex: var(--ocean--yellow); + --theme--code-url: var(--ocean--yellow); + --theme--code-punctuation: var(--ocean--gray); + --theme--code-comment: var(--ocean--gray); + --theme--code-tag: var(--ocean--pink); + --theme--code-attr_name: var(--ocean--yellow); + --theme--code-selector: var(--ocean--orange); + --theme--code-atrule: var(--ocean--orange); +} diff --git a/src/themes/material-ocean/mod.json b/src/themes/material-ocean/mod.json index 00a46aa..e08c65a 100644 --- a/src/themes/material-ocean/mod.json +++ b/src/themes/material-ocean/mod.json @@ -1,23 +1,21 @@ { - "name": "material ocean", + "name": "Material Ocean", + "version": "0.3.0", "id": "69e7ccb2-4aef-484c-876d-3de1b433d2b9", - "version": "0.2.0", - "description": "an oceanic colour palette.", - "preview": "material-ocean.png", - "tags": ["theme", "dark"], + "description": "An oceanic colour palette with pink highlights.", + "thumbnail": "material-ocean.png", + "tags": ["dark"], "authors": [ + { + "name": "dragonwocky", + "homepage": "https://dragonwocky.me/", + "avatar": "https://dragonwocky.me/avatar.jpg" + }, { "name": "blacksuan19", - "email": "abubakaryagob@gmail.com", "homepage": "http://github.com/blacksuan19", "avatar": "https://avatars.githubusercontent.com/u/10248473" } ], - "css": { - "frame": ["variables.css"], - "client": ["variables.css"], - "menu": ["variables.css"] - }, - "js": {}, - "options": [] + "clientStyles": ["client.css"] } diff --git a/src/themes/material-ocean/variables.css b/src/themes/material-ocean/variables.css deleted file mode 100644 index e8a3579..0000000 --- a/src/themes/material-ocean/variables.css +++ /dev/null @@ -1,173 +0,0 @@ -/** - * notion-enhancer: material ocean - * (c) 2020 Abubakar Yagoub (https://blacksuan19.tk) - * (https://notion-enhancer.github.io/) under the MIT license - */ - -:root.dark { - --ocean--main: #0f111a; - --ocean--sec: #00010a; - --ocean--tet: #000108; - --ocean--accent: #ff4151; - --ocean--light_gray: #E9E9E9; - --ocean--gray: #e0e0e0; - --ocean--brown: #d8b6a6; - --ocean--orange: #fde3c0; - --ocean--yellow: #ebcb8b; - --ocean--green: #a3be8c; - --ocean--blue: #81a1c1; - --ocean--purple: #b48ead; - --ocean--pink: #ffc0cb; - --ocean--red: #bf616a; - - --theme--accent_blue: var(--ocean--accent); - --theme--accent_blue-selection: rgba(255, 65, 81, 0.2); - --theme--accent_blue-hover: #fc3747; - --theme--accent_blue-active: #ff4d5c; - --theme--accent_blue-text: #fff; - --theme--accent_red: var(--ocean--accent); - --theme--accent_red-button: #ff41514b; - --theme--accent_red-text: #fff; - - --theme--bg: var(--ocean--main); - --theme--bg_secondary: var(--ocean--sec); - --theme--bg_card: var(--ocean--sec); - - --theme--scrollbar_track: transparent; - --theme--scrollbar_thumb: var(--ocean--sec); - --theme--scrollbar_thumb-hover: var(--ocean--accent); - - --theme--ui_divider: rgba(255, 255, 255, 0.1); - --theme--ui_interactive-hover: rgb(0, 1, 8, 0.3); - --theme--ui_interactive-active: rgb(0, 1, 8, 0.6); - --theme--ui_toggle-off: #30313c; - --theme--ui_corner_action: var(--theme--bg_card); - --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover); - --theme--ui_corner_action-active: var(--theme--ui_interactive-active); - - --theme--icon: var(--ocean--gray); - --theme--icon_secondary: var(--ocean--gray); - - --theme--text: #fff; - --theme--text_secondary: var(--ocean--gray); - --theme--text_gray: var(--ocean--gray); - --theme--text_brown: var(--ocean--brown); - --theme--text_orange: var(--ocean--orange); - --theme--text_yellow: var(--ocean--yellow); - --theme--text_green: var(--ocean--green); - --theme--text_blue: var(--ocean--blue); - --theme--text_purple: var(--ocean--purple); - --theme--text_pink: var(--ocean--pink); - --theme--text_red: var(--ocean--red); - - --theme--highlight_gray: var(--ocean--gray); - --theme--highlight_gray-text: var(--ocean--main); - --theme--highlight_brown: var(--ocean--brown); - --theme--highlight_brown-text: var(--ocean--main); - --theme--highlight_orange: var(--ocean--orange); - --theme--highlight_orange-text: var(--ocean--main); - --theme--highlight_yellow: var(--ocean--yellow); - --theme--highlight_yellow-text: var(--ocean--main); - --theme--highlight_green: var(--ocean--green); - --theme--highlight_green-text: var(--ocean--main); - --theme--highlight_blue: var(--ocean--blue); - --theme--highlight_blue-text: var(--ocean--main); - --theme--highlight_purple: var(--ocean--purple); - --theme--highlight_purple-text: var(--ocean--main); - --theme--highlight_pink: var(--ocean--pink); - --theme--highlight_pink-text: var(--ocean--main); - --theme--highlight_red: var(--ocean--red); - --theme--highlight_red-text: var(--ocean--main); - - --theme--callout_gray: #e0e0e089; - --theme--callout_gray-text: var(--ocean--main); - --theme--callout_brown: #d8b6a692; - --theme--callout_brown-text: var(--ocean--main); - --theme--callout_orange: #fde3c09f; - --theme--callout_orange-text: var(--ocean--main); - --theme--callout_yellow: #ffe6a6ad; - --theme--callout_yellow-text: var(--ocean--main); - --theme--callout_green: #a3be8ca3; - --theme--callout_green-text: var(--ocean--main); - --theme--callout_blue: #81a1c1a3; - --theme--callout_blue-text: var(--ocean--main); - --theme--callout_purple: #b48eada8; - --theme--callout_purple-text: var(--ocean--main); - --theme--callout_pink: #ffc0cbb1; - --theme--callout_pink-text: var(--ocean--main); - --theme--callout_red: #bf616a9e; - --theme--callout_red-text: var(--ocean--main); - - --theme--tag_default: var(--ocean--gray); - --theme--tag_default-text: var(--ocean--main); - --theme--tag_light_gray: var(--ocean--light_gray); - --theme--tag_light_gray-text: var(--ocean--main); - --theme--tag_gray: var(--theme--highlight_gray); - --theme--tag_gray-text: var(--ocean--main); - --theme--tag_brown: var(--theme--highlight_brown); - --theme--tag_brown-text: var(--ocean--main); - --theme--tag_orange: var(--theme--highlight_orange); - --theme--tag_orange-text: var(--ocean--main); - --theme--tag_yellow: var(--theme--highlight_yellow); - --theme--tag_yellow-text: var(--ocean--main); - --theme--tag_green: var(--theme--highlight_green); - --theme--tag_green-text: var(--ocean--main); - --theme--tag_blue: var(--theme--highlight_blue); - --theme--tag_blue-text: var(--ocean--main); - --theme--tag_purple: var(--theme--highlight_purple); - --theme--tag_purple-text: var(--ocean--main); - --theme--tag_pink: var(--theme--highlight_pink); - --theme--tag_pink-text: var(--ocean--main); - --theme--tag_red: var(--theme--highlight_red); - --theme--tag_red-text: var(--ocean--main); - - --theme--board_light_gray: var(--ocean--light_gray); - --theme--board_light_gray-text: var(--ocean--main); - --theme--board_light_gray-card: rgba(0, 0, 0, 0.075); - --theme--board_gray: var(--theme--highlight_gray); - --theme--board_gray-text: var(--theme--highlight_gray-text); - --theme--board_gray-card: rgba(0, 0, 0, 0.075); - --theme--board_brown: var(--theme--highlight_brown); - --theme--board_brown-text: var(--theme--highlight_brown-text); - --theme--board_brown-card: rgba(0, 0, 0, 0.075); - --theme--board_orange: var(--theme--highlight_orange); - --theme--board_orange-text: var(--theme--highlight_orange-text); - --theme--board_orange-card: rgba(0, 0, 0, 0.075); - --theme--board_yellow: var(--theme--highlight_yellow); - --theme--board_yellow-text: var(--theme--highlight_yellow-text); - --theme--board_yellow-card: rgba(0, 0, 0, 0.075); - --theme--board_green: var(--theme--highlight_green); - --theme--board_green-text: var(--theme--highlight_green-text); - --theme--board_green-card: rgba(0, 0, 0, 0.075); - --theme--board_blue: var(--theme--highlight_blue); - --theme--board_blue-text: var(--theme--highlight_blue-text); - --theme--board_blue-card: rgba(0, 0, 0, 0.075); - --theme--board_purple: var(--theme--highlight_purple); - --theme--board_purple-text: var(--theme--highlight_purple-text); - --theme--board_purple-card: rgba(0, 0, 0, 0.075); - --theme--board_pink: var(--theme--highlight_pink); - --theme--board_pink-text: var(--theme--highlight_pink-text); - --theme--board_pink-card: rgba(0, 0, 0, 0.075); - --theme--board_red: var(--theme--highlight_red); - --theme--board_red-text: var(--theme--highlight_red-text); - --theme--board_red-card: rgba(0, 0, 0, 0.075); - - --theme--code_inline: var(--ocean--sec); - --theme--code_inline-text: #b3f5c8; - - --theme--code: var(--ocean--sec); - --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_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_selector: var(--theme--text_orange); - --theme--code_atrule: var(--theme--text_orange); - --theme--code_regex: var(--theme--text_yellow); -}