From c894758f1a1177c3f78e3ae974ceb93bfd9a0b0a Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Wed, 6 Oct 2021 17:06:10 +1100 Subject: [PATCH] theme: material-ocean + related bugfixes --- .../mod.json | 22 ++++ .../variables.css | 122 ++++++++++++++++++ .../styles.mjs | 10 +- repo/registry.json | 3 +- .../theme.css | 49 ++++--- .../variables.css | 38 +++--- 6 files changed, 203 insertions(+), 41 deletions(-) create mode 100644 repo/material-ocean@d0c0fc64-30d6-4f5d-bc8e-b1b8a19a6b66/mod.json create mode 100644 repo/material-ocean@d0c0fc64-30d6-4f5d-bc8e-b1b8a19a6b66/variables.css diff --git a/repo/material-ocean@d0c0fc64-30d6-4f5d-bc8e-b1b8a19a6b66/mod.json b/repo/material-ocean@d0c0fc64-30d6-4f5d-bc8e-b1b8a19a6b66/mod.json new file mode 100644 index 0000000..38896d1 --- /dev/null +++ b/repo/material-ocean@d0c0fc64-30d6-4f5d-bc8e-b1b8a19a6b66/mod.json @@ -0,0 +1,22 @@ +{ + "name": "material ocean", + "id": "d0c0fc64-30d6-4f5d-bc8e-b1b8a19a6b66", + "version": "0.2.0", + "description": "an oceanic colour palette.", + "tags": ["theme", "dark"], + "authors": [ + { + "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": [] +} diff --git a/repo/material-ocean@d0c0fc64-30d6-4f5d-bc8e-b1b8a19a6b66/variables.css b/repo/material-ocean@d0c0fc64-30d6-4f5d-bc8e-b1b8a19a6b66/variables.css new file mode 100644 index 0000000..dfd4a14 --- /dev/null +++ b/repo/material-ocean@d0c0fc64-30d6-4f5d-bc8e-b1b8a19a6b66/variables.css @@ -0,0 +1,122 @@ +/* + * material ocean + * (c) 2020 Abubakar Yagoub (https://blacksuan19.tk) + * under the MIT license + */ + +:root.dark { + --ocean--main: #0f111a; + --ocean--sec: #00010a; + --ocean--tet: #000108; + --ocean--accent: #ff4151; + --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-focus: #ff4d5c; + --theme--accent_blue-text: #fff; + --theme--accent_red: var(--ocean--accent); + --theme--accent_red-hover: #ff41514b; + --theme--accent_red-text: #fff; + + --theme--bg: var(--ocean--main); + --theme--bg_secondary: var(--ocean--sec); + --theme--bg_popup: 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: var(--ocean--tet); + --theme--ui_interactive-active: var(--ocean--tet); + --theme--ui_toggle-off: #30313c; + + --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-text: var(--ocean--main); + --theme--highlight_gray: var(--ocean--gray); + --theme--highlight_brown: var(--ocean--brown); + --theme--highlight_orange: var(--ocean--orange); + --theme--highlight_yellow: var(--ocean--yellow); + --theme--highlight_green: var(--ocean--green); + --theme--highlight_blue: var(--ocean--blue); + --theme--highlight_purple: var(--ocean--purple); + --theme--highlight_pink: var(--ocean--pink); + --theme--highlight_red: var(--ocean--red); + + --theme--block-text: var(--ocean--main); + --theme--block_gray: #e0e0e089; + --theme--block_brown: #d8b6a692; + --theme--block_orange: #fde3c09f; + --theme--block_yellow: #ffe6a6ad; + --theme--block_green: #a3be8ca3; + --theme--block_blue: #81a1c1a3; + --theme--block_purple: #b48eada8; + --theme--block_pink: #ffc0cbb1; + --theme--block_red: #bf616a9e; + + --theme--tag-text: var(--theme--highlight-text); + --theme--tag_default: var(--ocean--gray); + --theme--tag_gray: var(--theme--highlight_gray); + --theme--tag_brown: var(--theme--highlight_brown); + --theme--tag_orange: var(--theme--highlight_orange); + --theme--tag_yellow: var(--theme--highlight_yellow); + --theme--tag_green: var(--theme--highlight_green); + --theme--tag_blue: var(--theme--highlight_blue); + --theme--tag_purple: var(--theme--highlight_purple); + --theme--tag_pink: var(--theme--highlight_pink); + --theme--tag_red: var(--theme--highlight_red); + + --theme--callout-text: var(--theme--block-text); + --theme--callout_gray: var(--theme--block_gray); + --theme--callout_brown: var(--theme--block_brown); + --theme--callout_orange: var(--theme--block_orange); + --theme--callout_yellow: var(--theme--block_yellow); + --theme--callout_green: var(--theme--block_green); + --theme--callout_blue: var(--theme--block_blue); + --theme--callout_purple: var(--theme--block_purple); + --theme--callout_pink: var(--theme--block_pink); + --theme--callout_red: var(--theme--block_red); + + --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); +} diff --git a/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/styles.mjs b/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/styles.mjs index 22e0604..5ace48d 100644 --- a/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/styles.mjs +++ b/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/styles.mjs @@ -27,12 +27,12 @@ const mapColorVariables = (color) => ({ const customClasses = { 'notifications-container': apply`absolute bottom-0 right-0 px-4 py-3 max-w-full w-96`, 'notification': ([color = 'default']) => - apply`p-2 ${ + apply`p-2 border group hover:(filter brightness-125) ${ color === 'default' - ? 'bg-tag text-tag-text hover:bg-interactive-hover border border-divider' - : `bg-${color}-tag text-${color}-tag-text border border-${color}-text hover:bg-${color}-text` + ? 'bg-tag text-tag-text border-divider' + : `bg-${color}-tag text-${color}-tag-text border-${color}-text` } flex items-center rounded-full mt-3 shadow-md cursor-pointer`, - 'notification-text': apply`font-semibold text-xs mx-2 flex-auto`, + 'notification-text': apply`text-xs mx-2 flex-auto font-semibold group-hover:(filter brightness-75)`, 'notification-icon': apply`fill-current opacity-75 h-4 w-4 mx-2`, 'body-container': apply`flex w-full h-full overflow-hidden`, 'content-container': apply`h-full w-full-96`, @@ -127,7 +127,7 @@ setup({ 'red-hover': 'var(--theme--accent_red-hover)', 'red-text': 'var(--theme--accent_red-text)', }, - 'grey': mapColorVariables('grey'), + 'gray': mapColorVariables('gray'), 'brown': mapColorVariables('brown'), 'orange': mapColorVariables('orange'), 'yellow': mapColorVariables('yellow'), diff --git a/repo/registry.json b/repo/registry.json index 7977fb3..2be72e5 100644 --- a/repo/registry.json +++ b/repo/registry.json @@ -4,5 +4,6 @@ "components@36a2ffc9-27ff-480e-84a7-c7700a7d232d", "tweaks@5174a483-c88d-4bf8-a95f-35cd330b76e2", "bypass-preview@cb6fd684-f113-4a7a-9423-8f0f0cff069f", - "calendar-scroll@b1c7db33-dfee-489a-a76c-0dd66f7ed29a" + "calendar-scroll@b1c7db33-dfee-489a-a76c-0dd66f7ed29a", + "material-ocean@d0c0fc64-30d6-4f5d-bc8e-b1b8a19a6b66" ] diff --git a/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/theme.css b/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/theme.css index 3ebed22..35690b8 100644 --- a/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/theme.css +++ b/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/theme.css @@ -233,7 +233,8 @@ body, > div > div > div - > div:nth-child(2)[style*='position: absolute; display: inline-flex; min-width: 100%; height: 32px; z-index: 1; background:'] { + > div:nth-child(2)[style*='position: absolute; display: inline-flex; min-width: 100%; height: 32px; z-index: 1; background:'], +.notion-frame .notion-scroller[style*='background:'] { background: transparent !important; } @@ -374,7 +375,20 @@ body, > div > div > div - > div:nth-child(1)[style*='display: flex; width: 100%; position: relative; z-index: 2; padding: 6px 10px; font-size: 14px; background:'] { + > div:nth-child(1)[style*='display: flex; width: 100%; position: relative; z-index: 2; padding: 6px 10px; font-size: 14px; background:'], +#notion-app + > div + > div.notion-overlay-container.notion-default-overlay-container + > [data-overlay='true'] + > div + > div:nth-child(2) + > div:nth-child(2) + > div + > div + > div + > div + > div:nth-child(1) + > div { background: var(--theme--ui_input) !important; } @@ -616,6 +630,9 @@ body, [style*='background: rgb(46, 170, 220)'] { background: var(--theme--accent_blue) !important; } +[style*='fill: rgb(46, 170, 220)'] { + fill: var(--theme--accent_blue) !important; +} [style*=' color: rgb(46, 170, 220)'], [style^='color: rgb(46, 170, 220)'] { color: var(--theme--accent_blue) !important; @@ -817,16 +834,16 @@ body, .notion-callout-block > div > [style*=' color: rgba(55, 53, 47, 0.6)'] { - color: var(--theme--text_grey) !important; - fill: var(--theme--text_grey) !important; + color: var(--theme--text_gray) !important; + fill: var(--theme--text_gray) !important; } .notion-body.dark [style*='fill: rgba(255, 255, 255, 0.6);'], .notion-body:not(.dark) [style*='fill: rgba(55, 53, 47, 0.6);'] { - fill: var(--theme--text_grey) !important; + fill: var(--theme--text_gray) !important; } .notion-body.dark [style*='background:rgb(69,75,78)'], .notion-body:not(.dark) [style*='background:rgb(235,236,237)'] { - background: var(--theme--highlight_grey) !important; + background: var(--theme--highlight_gray) !important; } .notion-body.dark [style*='color: inherit'] > div > div > [style*='background:rgb(69,75,78)'], .notion-body:not(.dark) @@ -834,7 +851,7 @@ body, > div > div > [style*='background:rgb(235,236,237)'] { - color: var(--theme--highlight_grey-text) !important; + color: var(--theme--highlight_gray-text) !important; } .notion-body.dark [style*='color:rgba(151,154,155,0.95)'] [style*='background:rgb(69,75,78)'], .notion-body.dark @@ -846,27 +863,27 @@ body, .notion-body:not(.dark) [style*='color: rgba(55, 53, 47, 0.6); fill: rgba(55, 53, 47, 0.6);'] [style*='background:rgb(235,236,237)'] { - background: var(--theme--highlight_grey) !important; - color: var(--theme--text_grey) !important; - fill: var(--theme--text_grey) !important; + background: var(--theme--highlight_gray) !important; + color: var(--theme--text_gray) !important; + fill: var(--theme--text_gray) !important; } .notion-body.dark [style*='background: rgb(69, 75, 78)'], .notion-body:not(.dark) [style*='background: rgb(235, 236, 237)'] { - background: var(--theme--block_grey) !important; - color: var(--theme--block_grey-text) !important; + background: var(--theme--block_gray) !important; + color: var(--theme--block_gray-text) !important; } .notion-body.dark [style*='background: rgba(151, 154, 155, 0.5)'], .notion-body.dark [style*='background-color: rgba(151, 154, 155, 0.5)'], .notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'], .notion-body:not(.dark) [style*='background-color: rgba(140, 46, 0, 0.2)'], .notion-body:not(.dark) [style*='background: rgba(155, 154, 151, 0.4)'] { - background: var(--theme--tag_grey) !important; - color: var(--theme--tag_grey-text) !important; + background: var(--theme--tag_gray) !important; + color: var(--theme--tag_gray-text) !important; } .notion-body.dark [style*='background: rgba(69, 75, 78, 0.3)'], .notion-body:not(.dark) [style*='background: rgba(235, 236, 237, 0.3)'] { - background: var(--theme--callout_grey) !important; - color: var(--theme--callout_grey-text) !important; + background: var(--theme--callout_gray) !important; + color: var(--theme--callout_gray-text) !important; } .notion-body.dark [style*='color:rgb(147,114,100)'], diff --git a/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/variables.css b/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/variables.css index c7087c8..53a6e3c 100644 --- a/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/variables.css +++ b/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/variables.css @@ -59,7 +59,7 @@ --theme--text: rgb(55, 43, 47); --theme--text_secondary: rgba(55, 43, 47, 0.6); - --theme--text_grey: rgb(155, 154, 151); + --theme--text_gray: rgb(155, 154, 151); --theme--text_brown: rgb(100, 71, 58); --theme--text_orange: rgb(217, 115, 13); --theme--text_yellow: rgb(223, 171, 1); @@ -70,8 +70,8 @@ --theme--text_red: rgb(224, 62, 62); --theme--highlight-text: var(--theme--text); - --theme--highlight_grey: rgb(235, 236, 237); - --theme--highlight_grey-text: var(--theme--highlight-text); + --theme--highlight_gray: rgb(235, 236, 237); + --theme--highlight_gray-text: var(--theme--highlight-text); --theme--highlight_brown: rgb(233, 229, 227); --theme--highlight_brown-text: var(--theme--highlight-text); --theme--highlight_orange: rgb(250, 235, 221); @@ -90,8 +90,8 @@ --theme--highlight_red-text: var(--theme--highlight-text); --theme--block-text: var(--theme--text); - --theme--block_grey: rgb(235, 236, 237); - --theme--block_grey-text: var(--theme--block-text); + --theme--block_gray: rgb(235, 236, 237); + --theme--block_gray-text: var(--theme--block-text); --theme--block_brown: rgb(233, 229, 227); --theme--block_brown-text: var(--theme--block-text); --theme--block_orange: rgb(250, 235, 221); @@ -112,8 +112,8 @@ --theme--tag-text: var(--theme--text); --theme--tag_default: rgba(206, 205, 202, 0.5); --theme--tag_default-text: var(--theme--tag-text); - --theme--tag_grey: rgba(140, 46, 0, 0.2); - --theme--tag_grey-text: var(--theme--tag-text); + --theme--tag_gray: rgba(140, 46, 0, 0.2); + --theme--tag_gray-text: var(--theme--tag-text); --theme--tag_brown: rgba(140, 46, 0, 0.2); --theme--tag_brown-text: var(--theme--tag-text); --theme--tag_orange: rgba(245, 93, 0, 0.2); @@ -132,8 +132,8 @@ --theme--tag_red-text: var(--theme--tag-text); --theme--callout-text: var(--theme--text); - --theme--callout_grey: rgba(235, 236, 237, 0.3); - --theme--callout_grey-text: var(--theme--callout-text); + --theme--callout_gray: rgba(235, 236, 237, 0.3); + --theme--callout_gray-text: var(--theme--callout-text); --theme--callout_brown: rgba(233, 229, 227, 0.3); --theme--callout_brown-text: var(--theme--callout-text); --theme--callout_orange: rgba(250, 235, 221, 0.3); @@ -173,7 +173,7 @@ --theme--code_entity: var(--theme--code_operator); --theme--code_url: var(--theme--code_operator); --theme--code_variable: var(--theme--code_regex); - --theme--code_comment: slategrey; + --theme--code_comment: slategray; --theme--code_cdata: var(--theme--code_comment); --theme--code_prolog: var(--theme--code_comment); --theme--code_doctype: var(--theme--code_comment); @@ -223,7 +223,7 @@ --theme--text: rgba(255, 255, 255, 0.9); --theme--text_secondary: rgba(255, 255, 255, 0.6); - --theme--text_grey: rgba(151, 154, 155, 0.95); + --theme--text_gray: rgba(151, 154, 155, 0.95); --theme--text_brown: rgb(147, 114, 100); --theme--text_orange: rgb(255, 163, 68); --theme--text_yellow: rgb(255, 220, 73); @@ -234,8 +234,8 @@ --theme--text_red: rgb(255, 115, 105); --theme--highlight-text: var(--theme--text); - --theme--highlight_grey: rgb(69, 75, 78); - --theme--highlight_grey-text: var(--theme--highlight-text); + --theme--highlight_gray: rgb(69, 75, 78); + --theme--highlight_gray-text: var(--theme--highlight-text); --theme--highlight_brown: rgb(67, 64, 64); --theme--highlight_brown-text: var(--theme--highlight-text); --theme--highlight_orange: rgb(89, 74, 58); @@ -254,8 +254,8 @@ --theme--highlight_red-text: var(--theme--highlight-text); --theme--block-text: var(--theme--text); - --theme--block_grey: rgb(69, 75, 78); - --theme--block_grey-text: var(--theme--block-text); + --theme--block_gray: rgb(69, 75, 78); + --theme--block_gray-text: var(--theme--block-text); --theme--block_brown: rgb(67, 64, 64); --theme--block_brown-text: var(--theme--block-text); --theme--block_orange: rgb(89, 74, 58); @@ -276,8 +276,8 @@ --theme--tag-text: var(--theme--text); --theme--tag_default: rgb(80, 85, 88); --theme--tag_default-text: var(--theme--tag-text); - --theme--tag_grey: rgba(151, 154, 155, 0.5); - --theme--tag_grey-text: var(--theme--tag-text); + --theme--tag_gray: rgba(151, 154, 155, 0.5); + --theme--tag_gray-text: var(--theme--tag-text); --theme--tag_brown: rgba(147, 114, 100, 0.5); --theme--tag_brown-text: var(--theme--tag-text); --theme--tag_orange: rgba(255, 163, 68, 0.5); @@ -296,8 +296,8 @@ --theme--tag_red-text: var(--theme--tag-text); --theme--callout-text: var(--theme--text); - --theme--callout_grey: rgba(69, 75, 78, 0.3); - --theme--callout_grey-text: var(--theme--callout-text); + --theme--callout_gray: rgba(69, 75, 78, 0.3); + --theme--callout_gray-text: var(--theme--callout-text); --theme--callout_brown: rgba(67, 64, 64, 0.3); --theme--callout_brown-text: var(--theme--callout-text); --theme--callout_orange: rgba(89, 74, 58, 0.3);