From c569d4190ab98ffab29f9357523590121be86fea Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Fri, 8 Oct 2021 15:25:47 +1100 Subject: [PATCH] theme: gruvbox dark --- repo/cherry-cola/variables.css | 2 +- repo/dark+/variables.css | 2 +- repo/dracula/variables.css | 2 +- repo/gruvbox-dark/mod.json | 28 ++++++ repo/gruvbox-dark/variables.css | 143 ++++++++++++++++++++++++++++++ repo/material-ocean/variables.css | 2 +- repo/menu/styles.mjs | 4 +- repo/neutral/variables.css | 2 +- repo/nord/variables.css | 4 +- repo/pastel-dark/variables.css | 2 +- repo/registry.json | 1 + repo/theming/theme.css | 4 +- repo/theming/variables.css | 4 +- 13 files changed, 186 insertions(+), 14 deletions(-) create mode 100644 repo/gruvbox-dark/mod.json create mode 100644 repo/gruvbox-dark/variables.css diff --git a/repo/cherry-cola/variables.css b/repo/cherry-cola/variables.css index 801d123..76f64ab 100644 --- a/repo/cherry-cola/variables.css +++ b/repo/cherry-cola/variables.css @@ -31,7 +31,7 @@ --theme--bg: var(--cola--main); --theme--bg_secondary: var(--cola--sec); - --theme--bg_popup: var(--cola--sec); + --theme--bg_card: var(--cola--sec); --theme--scrollbar_track: transparent; --theme--scrollbar_thumb: var(--cola--sec); diff --git a/repo/dark+/variables.css b/repo/dark+/variables.css index 2230a17..82f8715 100644 --- a/repo/dark+/variables.css +++ b/repo/dark+/variables.css @@ -14,7 +14,7 @@ --theme--bg: rgb(14, 14, 14); --theme--bg_secondary: rgb(0, 0, 0); - --theme--bg_popup: rgb(0, 0, 0); + --theme--bg_card: rgb(0, 0, 0); --theme--scrollbar_track: transparent; --theme--scrollbar_thumb: #181818; diff --git a/repo/dracula/variables.css b/repo/dracula/variables.css index b55598d..7eef340 100644 --- a/repo/dracula/variables.css +++ b/repo/dracula/variables.css @@ -57,7 +57,7 @@ --theme--bg: var(--dracula--bg); --theme--bg_secondary: var(--dracula--bg_dark); - --theme--bg_popup: var(--dracula--bg_light); + --theme--bg_card: var(--dracula--bg_light); --theme--scrollbar_track: transparent; --theme--scrollbar_thumb: var(--dracula--selection); diff --git a/repo/gruvbox-dark/mod.json b/repo/gruvbox-dark/mod.json new file mode 100644 index 0000000..702da6a --- /dev/null +++ b/repo/gruvbox-dark/mod.json @@ -0,0 +1,28 @@ +{ + "name": "gruvbox dark", + "id": "ad0f5c5c-8b62-4b20-8a54-929e663ea368", + "version": "0.3.0", + "description": "a 'retro groove' palette based on the vim theme of the same name.", + "tags": ["theme", "dark"], + "authors": [ + { + "name": "morhetz", + "email": "morhetz@gmail.com", + "homepage": "https://github.com/morhetz", + "avatar": "https://avatars.githubusercontent.com/u/554231" + }, + { + "name": "jordanrobinson", + "email": "me@jordanrobinson.co.uk", + "homepage": "https://jordanrobinson.co.uk/", + "avatar": "https://avatars.githubusercontent.com/u/1202911" + } + ], + "css": { + "frame": ["variables.css"], + "client": ["variables.css"], + "menu": ["variables.css"] + }, + "js": {}, + "options": [] +} diff --git a/repo/gruvbox-dark/variables.css b/repo/gruvbox-dark/variables.css new file mode 100644 index 0000000..8506cb8 --- /dev/null +++ b/repo/gruvbox-dark/variables.css @@ -0,0 +1,143 @@ +/* + * notion-enhancer: gruvbox dark + * (c) 2015-2020 morhetz + * (c) 2021 jordanrobinson (https://jordanrobinson.co.uk/) + * (c) 2021 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +:root.dark { + --gruvbox_dark--bg: #282828; + --gruvbox_dark--gray-dark: #928374; + --gruvbox_dark--red-dark: #cc241d; + --gruvbox_dark--red-light: #fb4934; + --gruvbox_dark--green-dark: #98971a; + --gruvbox_dark--green-light: #b8bb26; + --gruvbox_dark--yellow-dark: #d79921; + --gruvbox_dark--yellow-light: #fabd2f; + --gruvbox_dark--blue-dark: #458588; + --gruvbox_dark--blue-light: #83a598; + --gruvbox_dark--purple-dark: #b16286; + --gruvbox_dark--purple-light: #d3869b; + --gruvbox_dark--aqua-dark: #689d6a; + --gruvbox_dark--aqua-light: #8ec07c; + --gruvbox_dark--gray-light: #a89984; + --gruvbox_dark--orange-dark: #d65d0e; + --gruvbox_dark--orange-light: #fe8019; + --gruvbox_dark--fg: #ebdbb2; + --gruvbox_dark--bg0-h: #1d2021; + --gruvbox_dark--bg0: #282828; + --gruvbox_dark--bg1: #3c3836; + --gruvbox_dark--bg2: #504945; + --gruvbox_dark--bg3: #665c54; + --gruvbox_dark--bg4: #7c6f64; + --gruvbox_dark--bg0-s: #32302f; + --gruvbox_dark--fg4: #a89984; + --gruvbox_dark--fg3: #bdae93; + --gruvbox_dark--fg2: #d5c4a1; + --gruvbox_dark--fg1: #ebdbb2; + --gruvbox_dark--fg0: #fbf1c7; + + --theme--accent_blue: var(--gruvbox_dark--bg3); + --theme--accent_blue-selection: rgba(80, 73, 69, 0.5); + --theme--accent_blue-hover: var(--gruvbox_dark--fg3); + --theme--accent_blue-active: var(--gruvbox_dark--fg3); + --theme--accent_blue-indicator: var(--gruvbox_dark--blue-dark); + --theme--accent_red: var(--gruvbox_dark--blue-dark); + --theme--accent_red-button: var(--gruvbox_dark--blue-light); + + --theme--bg: var(--gruvbox_dark--bg0); + --theme--bg_secondary: var(--gruvbox_dark--bg1); + --theme--bg_card: var(--gruvbox_dark--bg3); + + --theme--scrollbar_track: transparent; + --theme--scrollbar_thumb: var(--gruvbox_dark--bg0-s); + --theme--scrollbar_thumb-hover: var(--gruvbox_dark--bg3); + + --theme--ui_divider: var(--gruvbox_dark--gray-light); + --theme--ui_interactive-hover: rgba(80, 73, 69, 0.7); + --theme--ui_interactive-active: rgba(80, 73, 69, 0.9); + --theme--ui_toggle-off: var(--gruvbox_dark--bg4); + --theme--ui_toggle-feature: var(--gruvbox_dark--fg); + + --theme--icon: var(--gruvbox_dark--fg0); + --theme--icon_secondary: var(--gruvbox_dark--fg3); + + --theme--text: var(--gruvbox_dark--fg0); + --theme--text_secondary: var(--gruvbox_dark--fg3); + --theme--text_gray: var(--gruvbox_dark--gray-dark); + --theme--text_brown: var(--gruvbox_dark--bg4); + --theme--text_orange: var(--gruvbox_dark--orange-dark); + --theme--text_yellow: var(--gruvbox_dark--yellow-dark); + --theme--text_green: var(--gruvbox_dark--green-dark); + --theme--text_blue: var(--gruvbox_dark--blue-dark); + --theme--text_purple: var(--gruvbox_dark--purple-dark); + --theme--text_pink: var(--gruvbox_dark--purple-light); + --theme--text_red: var(--gruvbox_dark--red-dark); + + --theme--highlight-text: var(--theme--tag-text); + --theme--highlight_gray: var(--gruvbox_dark--gray-dark); + --theme--highlight_brown: var(--theme--tag_brown); + --theme--highlight_orange: var(--gruvbox_dark--orange-dark); + --theme--highlight_yellow: var(--gruvbox_dark--yellow-dark); + --theme--highlight_green: var(--gruvbox_dark--green-dark); + --theme--highlight_blue: var(--gruvbox_dark--blue-dark); + --theme--highlight_purple: var(--gruvbox_dark--purple-dark); + --theme--highlight_pink: var(--theme--tag_pink); + --theme--highlight_red: var(--gruvbox_dark--red-dark); + + --theme--block_gray: var(--theme--text_gray); + --theme--block_brown: var(--theme--text_brown); + --theme--block_orange: var(--theme--text_orange); + --theme--block_yellow: var(--theme--text_yellow); + --theme--block_green: var(--theme--text_green); + --theme--block_blue: var(--theme--text_blue); + --theme--block_purple: var(--theme--text_purple); + --theme--block_pink: var(--theme--text_pink); + --theme--block_red: var(--theme--text_red); + + --theme--tag-text: rgba(80, 73, 69 0.3); + --theme--tag_default: var(--gruvbox_dark--gray-dark); + --theme--tag_default-text: var(--gruvbox_dark--bg2); + --theme--tag_gray: var(--gruvbox_dark--gray-dark); + --theme--tag_gray-text: var(--gruvbox_dark--bg2); + --theme--tag_brown: var(--gruvbox_dark--fg3); + --theme--tag_brown-text: var(--gruvbox_dark--bg2); + --theme--tag_orange: var(--gruvbox_dark--orange-dark); + --theme--tag_yellow: var(--gruvbox_dark--yellow-dark); + --theme--tag_green: var(--gruvbox_dark--green-dark); + --theme--tag_blue: var(--gruvbox_dark--blue-dark); + --theme--tag_purple: var(--gruvbox_dark--purple-dark); + --theme--tag_pink: var(--gruvbox_dark--purple-light); + --theme--tag_red: var(--gruvbox_dark--red-dark); + --theme--tag_red-text: var(--gruvbox_dark--fg2); + + --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(--gruvbox_dark--bg1); + --theme--code_inline-text: var(--gruvbox_dark--blue-light); + + --theme--code: var(--gruvbox_dark--bg1); + --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_ui); + --theme--code_punctuation: var(--gruvbox_dark--aqua-light); + --theme--code_doctype: var(--gruvbox_dark--aqua-light); + --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/material-ocean/variables.css b/repo/material-ocean/variables.css index 6ae4803..13218db 100644 --- a/repo/material-ocean/variables.css +++ b/repo/material-ocean/variables.css @@ -30,7 +30,7 @@ --theme--bg: var(--ocean--main); --theme--bg_secondary: var(--ocean--sec); - --theme--bg_popup: var(--ocean--sec); + --theme--bg_card: var(--ocean--sec); --theme--scrollbar_track: transparent; --theme--scrollbar_thumb: var(--ocean--sec); diff --git a/repo/menu/styles.mjs b/repo/menu/styles.mjs index 8704c6a..dbf8c04 100644 --- a/repo/menu/styles.mjs +++ b/repo/menu/styles.mjs @@ -60,7 +60,7 @@ const customClasses = { 'mod-author-avatar': apply`inline object-cover w-5 h-5 rounded-full mr-2`, 'sidebar': apply`h-full w-96 px-4 pt-3 pb-32 flex flex-col bg-notion-secondary border-l border-divider`, 'profile-trigger': apply`block px-4 py-3 mb-2 rounded-md text-sm text-left font-semibold shadow-inner - bg-accent-red-hover border border-accent-red text-accent-red focus:(outline-none ring ring-inset ring-accent-red)`, + hover:bg-accent-red-hover border border-accent-red text-accent-red focus:(outline-none ring ring-inset ring-accent-red)`, 'profile-actions': apply`flex`, 'profile-save': apply`text-sm px-3 py-2 font-medium mt-2 bg-accent-blue text-accent-blue-text rounded-md flex-grow hover:bg-accent-blue-hover focus:(bg-accent-blue-active outline-none) text-center`, @@ -102,7 +102,7 @@ setup({ colors: { 'notion': 'var(--theme--bg)', 'notion-secondary': 'var(--theme--bg_secondary)', - 'notion-popup': 'var(--theme--bg_popup)', + 'notion-popup': 'var(--theme--bg_card)', 'divider': 'var(--theme--ui_divider)', 'input': 'var(--theme--ui_input)', 'icon': 'var(--theme--icon)', diff --git a/repo/neutral/variables.css b/repo/neutral/variables.css index 03d47c1..58360b6 100644 --- a/repo/neutral/variables.css +++ b/repo/neutral/variables.css @@ -24,7 +24,7 @@ --theme--bg: #131313; --theme--bg_secondary: #161616; - --theme--bg_popup: #181818; + --theme--bg_card: #181818; --theme--scrollbar_track: transparent; --theme--scrollbar_thumb: #232425; diff --git a/repo/nord/variables.css b/repo/nord/variables.css index b5c807b..8f5622e 100644 --- a/repo/nord/variables.css +++ b/repo/nord/variables.css @@ -40,7 +40,7 @@ --theme--bg: var(--nord--dark1); --theme--bg_secondary: var(--nord--dark2); - --theme--bg_popup: var(--nord--dark2); + --theme--bg_card: var(--nord--dark2); --theme--scrollbar_track: transparent; --theme--scrollbar_thumb: var(--nord--dark3); @@ -111,7 +111,7 @@ --theme--code_inline: rgba(135, 131, 120, 0.15); --theme--code_inline-text: var(--nord--red); - --theme--code: var(--theme--bg_popup); + --theme--code: var(--theme--bg_card); --theme--code_function: var(--theme--text_blue); --theme--code_keyword: var(--theme--text_pink); --theme--code_tag: var(--theme--text_pink); diff --git a/repo/pastel-dark/variables.css b/repo/pastel-dark/variables.css index b90eb57..1e38b3d 100644 --- a/repo/pastel-dark/variables.css +++ b/repo/pastel-dark/variables.css @@ -20,7 +20,7 @@ --theme--bg: #0b0b0b; --theme--bg_secondary: #0f0f0f; - --theme--bg_popup: #0f0f0f; + --theme--bg_card: #0f0f0f; --theme--scrollbar_track: transparent; --theme--scrollbar_thumb: #141414; diff --git a/repo/registry.json b/repo/registry.json index 4d90bb2..204529e 100644 --- a/repo/registry.json +++ b/repo/registry.json @@ -11,6 +11,7 @@ "pastel-dark", "neutral", "nord", + "gruvbox-dark", "bypass-preview", "calendar-scroll" diff --git a/repo/theming/theme.css b/repo/theming/theme.css index d29ec6e..29f3d31 100644 --- a/repo/theming/theme.css +++ b/repo/theming/theme.css @@ -214,7 +214,7 @@ body, .notion-workspace-create [style*='font-size: 12px;'] + .notion-focusable[role='button']:not(:hover) { - background: var(--theme--bg_popup) !important; + background: var(--theme--bg_card) !important; box-shadow: var(--theme--ui_shadow, rgba(15, 15, 15, 0.05)) 0px 0px 0px 1px, var(--theme--ui_shadow, rgba(15, 15, 15, 0.1)) 0px 3px 6px, var(--theme--ui_shadow, rgba(15, 15, 15, 0.2)) 0px 9px 24px !important; @@ -231,7 +231,7 @@ body, [style*='grid-template-columns: [boolean-start] 60px [boolean-end property-start] 120px [property-end opererator-start] 110px [operator-end value-start] auto [value-end menu-start] 32px [menu-end];'] .notion-focusable[style*='background: white;'], .notion-timeline-item { - background: var(--theme--bg_popup) !important; + background: var(--theme--bg_card) !important; } .notion-discussion-input > div > div[style*='background'], diff --git a/repo/theming/variables.css b/repo/theming/variables.css index 209d251..d414a28 100644 --- a/repo/theming/variables.css +++ b/repo/theming/variables.css @@ -36,7 +36,7 @@ :root { --theme--bg: #fff; --theme--bg_secondary: rgb(247, 246, 243); - --theme--bg_popup: #fff; + --theme--bg_card: #fff; --theme--scrollbar_track: #edece9; --theme--scrollbar_thumb: #d3d1cb; @@ -200,7 +200,7 @@ :root.dark { --theme--bg: rgb(47, 52, 55); --theme--bg_secondary: rgb(55, 60, 63); - --theme--bg_popup: rgb(63, 68, 71); + --theme--bg_card: rgb(63, 68, 71); --theme--scrollbar_track: rgba(202, 204, 206, 0.04); --theme--scrollbar_thumb: #474c50;