theme: material-ocean + related bugfixes

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": []
+}

repo/material-ocean@d0c0fc64-30d6-4f5d-bc8e-b1b8a19a6b66/variables.css

@@ -0,0 +1,122 @@
+/*
+ * material ocean
+ * (c) 2020 Abubakar Yagoub <i@blacksuan19.me> (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);
+}

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'),

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"
 ]

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)'],

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);