dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-05 21:29:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

theming bugfixes and additional variables (#309)

Browse Source 
* theming bugfixes and additional variables

* add theming code variables for constant and regex
This commit is contained in:
Ryo Hilmawan 2020-12-10 11:57:35 +07:00 committed by GitHub
parent a17de1e768
commit 943f58630e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 226 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
mods/core/css/theme.css
View File

@ -249,11 +249,9 @@
box-shadow: var(--theme--table-border) 0px 1px 0px inset !important;
}
.notion-body.dark [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] {
box-shadow: var(--theme--main) -3px 0px 0px !important;
}
.notion-body.dark [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px;'],
.notion-body:not(.dark) [style*='box-shadow: white -3px 0px 0px;'] {
box-shadow: none !important;
box-shadow: var(--theme--main) -3px 0px 0px !important;
}
.notion-body.dark
[style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px, rgba(255, 255, 255, 0.14) 0px 1px 0px'],
@ -312,10 +310,66 @@
box-shadow: -1px -1px 0 var(--theme--table-border) !important;
}
.notion-body.dark
[style*='border-top: 1px solid rgb(77, 81, 83)'],
.notion-body:not(.dark)
[style*='border-top: 1px solid rgb(223, 223, 222)'] {
border-top: 1px solid var(--theme--table-border_row) !important;
}
.notion-body.dark
[style*='border-bottom: 1px solid rgb(77, 81, 83)'],
.notion-body:not(.dark)
[style*='border-bottom: 1px solid rgb(223, 223, 222)'] {
border-bottom: 1px solid var(--theme--table-border_row) !important;
}
.notion-body.dark
[style*='border-right: 1px solid rgb(77, 81, 83)'],
.notion-body:not(.dark)
[style*='border-right: 1px solid rgb(223, 223, 222)'] {
border-right: 1px solid var(--theme--table-border_row) !important;
}
.notion-body.dark
[style*='border-right: 1px solid rgb(63, 66, 69)'],
.notion-body:not(.dark)
[style*='border-right: 1px solid rgb(237, 237, 236)'] {
border-right: 1px solid var(--theme--table-border_column) !important;
}
.notion-body.dark
[style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px, rgb(77, 81, 83) 0px 1px 0px'],
.notion-body:not(.dark)
[style*='box-shadow: white -3px 0px 0px, rgb(223, 223, 222) 0px 1px 0px'] {
box-shadow: var(--theme--main) -3px 0px 0px,
var(--theme--table-border_row) 0px 1px 0px !important;
}
.notion-body.dark
[style*='box-shadow: rgb(77, 81, 83) -1px 0px 0px'],
.notion-body:not(.dark)
[style*='box-shadow: rgb(223, 223, 222) -1px 0px 0px'] {
box-shadow: var(--theme--table-border_row) -1px 0px 0px !important;
}
.notion-body.dark
[style*='box-shadow: rgb(77, 81, 83) 0px 1px 0px'],
.notion-body:not(.dark)
[style*='box-shadow: rgb(223, 223, 222) 0px 1px 0px'] {
box-shadow: var(--theme--table-border_row) 0 1px 0px !important;
}
.notion-body.dark
[style*='box-shadow: rgb(77, 81, 83) 0px 1px 0px inset'],
.notion-body:not(.dark)
[style*='box-shadow: rgb(223, 223, 222) 0px 1px 0px inset'] {
box-shadow: var(--theme--table-border_row) 0 1px 0px inset !important;
}
[style*='border: 1px solid rgba(46, 170, 220, 0.6)'] {
border: 1px solid var(--theme--table-border_selected) !important;
}
.notion-body.dark
[style*='background-image: linear-gradient(to right, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 100%);'],
.notion-body:not(.dark)
[style*='background-image: linear-gradient(to right, rgba(55, 53, 47, 0.16) 0%, rgba(55, 53, 47, 0.16) 100%)'] {
[style*='background-image: linear-gradient(to right, rgba(55, 53, 47, 0.16) 0%, rgba(55, 53, 47, 0.16) 100%);'] {
background-image: linear-gradient(
to right,
var(--theme--bg_gray) 0%,
@ -423,10 +477,28 @@
[style*='background: rgb(0, 141, 190)'] {
background: var(--theme--primary_click) !important;
}
[style*='background: rgb(46, 170, 220)'][style*='color: white'],
[style*='background-color: rgb(46, 170, 220)'][style*='color: white'],
[style*='background: rgb(6, 156, 205)'][style*='color: white'],
[style*='background: rgb(0, 141, 190)'][style*='color: white'] {
color: var(--theme--primary_text) !important;
}
[style*='background: rgb(46, 170, 220)'] [style*='fill: white'],
[style*='background-color: rgb(46, 170, 220)'] [style*='fill: white'],
[style*='background: rgb(6, 156, 205)'] [style*='fill: white'],
[style*='background: rgb(0, 141, 190)'] [style*='fill: white'] {
fill: var(--theme--primary_text) !important;
}
.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after,
[style*='background: rgb(235, 87, 87)'] {
background: var(--theme--primary_indicator) !important;
}
[style*='background: rgb(235, 87, 87)'][style*='color: white'] {
color: var(--theme--primary_indicator_text) !important;
}
#notion-app .DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day--outside:hover, #notion-app .DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end):hover {
background: var(--theme--primary_indicator_hover) !important;
}
.notion-body.dark
[style*='box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 3px 6px, rgba(15, 15, 15, 0.4) 0px 9px 24px'],
@ -468,6 +540,14 @@
color: var(--theme--danger_text) !important;
border: 1px solid var(--theme--danger_border) !important;
}
/* divider */
.notion-body.dark .notion-divider-block [style*='border-bottom: 1px solid rgba(255, 255, 255,'],
.notion-body:not(.dark) .notion-divider-block [style*='border-bottom: 1px solid rgba(55, 53, 47,'] {
border-bottom: 1px solid var(--theme--divider) !important;
}
/* inputs */
.notion-focusable:focus-within {
box-shadow: var(--theme--primary_hover) 0px 0px 0px 2px !important;
@ -957,9 +1037,15 @@
.notion-code-block .token.function {
color: var(--theme--code_function) !important;
}
.notion-code-block .token.parameter {
color: var(--theme--code_parameter) !important;
}
.notion-code-block .token.keyword {
color: var(--theme--code_keyword) !important;
}
.notion-code-block .token.constant {
color: var(--theme--code_constant) !important;
}
.notion-code-block .token.tag {
color: var(--theme--code_tag) !important;
}
@ -969,24 +1055,60 @@
.notion-code-block .token.important {
color: var(--theme--code_important) !important;
}
.notion-code-block .token.regex {
color: var(--theme--code_regex) !important;
}
.notion-code-block .token.property {
color: var(--theme--code_property) !important;
}
.notion-code-block .token.builtin {
color: var(--theme--code_builtin) !important;
}
.notion-code-block .token.class-name {
color: var(--theme--code_class-name) !important;
}
.notion-code-block .token.attr-name {
color: var(--theme--code_attr-name) !important;
}
.notion-code-block .token.attr-value {
color: var(--theme--code_attr-value) !important;
}
.notion-code-block .token.selector {
color: var(--theme--code_selector) !important;
}
.notion-code-block .token.id {
color: var(--theme--code_id) !important;
}
.notion-code-block .token.class {
color: var(--theme--code_class) !important;
}
.notion-code-block .token.pseudo-element {
color: var(--theme--code_pseudo-element) !important;
}
.notion-code-block .token.pseudo-class {
color: var(--theme--code_pseudo-class) !important;
}
.notion-code-block .token.attribute {
color: var(--theme--code_attribute) !important;
}
.notion-code-block .token.value {
color: var(--theme--code_value) !important;
}
.notion-code-block .token.unit {
color: var(--theme--code_unit) !important;
}
.notion-code-block .token.comment {
color: var(--theme--code_comment) !important;
}
.notion-code-block .token.punctuation {
color: var(--theme--code_punctuation) !important;
}
.notion-code-block .token.annotation {
color: var(--theme--code_annotation) !important;
}
.notion-code-block .token.decorator {
color: var(--theme--code_decorator) !important;
}
.notion-code-block .token.doctype {
color: var(--theme--code_doctype) !important;
}
@ -996,3 +1118,6 @@
.notion-code-block .token.string {
color: var(--theme--code_string) !important;
}
.notion-code-block .token.boolean {
color: var(--theme--code_boolean) !important;
}

102
mods/core/variables.css
View File

@ -60,6 +60,9 @@
--theme_dark--gallery: rgba(255, 255, 255, 0.05);
--theme_dark--select_input: rgb(55, 60, 63);
--theme_dark--table-border: rgba(255, 255, 255, 0.1);
--theme_dark--table-border_row: rgb(77, 81, 83);
--theme_dark--table-border_column: rgb(63, 66, 69);
--theme_dark--table-border_selected: rgba(46, 170, 220, 0.6);
--theme_dark--ui-border: rgba(255, 255, 255, 0.07);
--theme_dark--interactive_hover: rgb(71, 76, 80);
--theme_dark--interactive_hover-border: transparent;
@ -68,9 +71,12 @@
--theme_dark--selected: rgba(46, 170, 220, 0.2);
--theme_dark--primary: rgb(46, 170, 220);
--theme_dark--primary_text: white;
--theme_dark--primary_hover: rgb(6, 156, 205);
--theme_dark--primary_click: rgb(0, 141, 190);
--theme_dark--primary_indicator: rgb(235, 87, 87);
--theme_dark--primary_indicator_text: var(--theme_dark--primary_text);
--theme_dark--primary_indicator_hover: rgba(45, 156, 219, 0.2);
--theme_dark--option-color: white;
--theme_dark--option-background: transparent;
@ -81,6 +87,8 @@
--theme_dark--danger_text: rgb(235, 87, 87);
--theme_dark--danger_border: rgba(235, 87, 87, 0.5);
--theme_dark--divider: var(--theme_dark--table-border);
--theme_dark--text: rgba(255, 255, 255, 0.9);
--theme_dark--text_ui: rgba(255, 255, 255, 0.6);
@ -180,20 +188,35 @@
--theme_dark--code_inline-background: rgba(135, 131, 120, 0.15);
--theme_dark--code-text: var(--theme_dark--text);
--theme_dark--code-background: var(--theme_dark--card);
--theme_dark--code_function: rgba(255, 255, 255, 0.9);
--theme_dark--code_function: var(--theme_dark--code-text);
--theme_dark--code_parameter: var(--theme_dark--code-text);
--theme_dark--code_keyword: hsl(350, 40%, 70%);
--theme_dark--code_constant: hsl(350, 40%, 70%);
--theme_dark--code_tag: hsl(350, 40%, 70%);
--theme_dark--code_operator: hsl(40, 90%, 60%);
--theme_dark--code_important: #e90;
--theme_dark--code_regex: #e90;
--theme_dark--code_property: hsl(350, 40%, 70%);
--theme_dark--code_builtin: hsl(75, 70%, 60%);
--theme_dark--code_class-name: var(--theme_dark--code-text);
--theme_dark--code_attr-name: hsl(75, 70%, 60%);
--theme_dark--code_attr-value: hsl(350, 40%, 70%);
--theme_dark--code_selector: hsl(75, 70%, 60%);
--theme_dark--code_id: var(--theme_dark--code-text);
--theme_dark--code_class: var(--theme_dark--code-text);
--theme_dark--code_pseudo-element: var(--theme_dark--code-text);
--theme_dark--code_pseudo-class: var(--theme_dark--code-text);
--theme_dark--code_attribute: var(--theme_dark--code-text);
--theme_dark--code_value: var(--theme_dark--code-text);
--theme_dark--code_unit: var(--theme_dark--code-text);
--theme_dark--code_comment: hsl(30, 20%, 50%);
--theme_dark--code_punctuation: rgba(255, 255, 255, 0.9);
--theme_dark--code_punctuation: var(--theme_dark--code-text);
--theme_dark--code_annotation: var(--theme_dark--code_punctuation);
--theme_dark--code_decorator: var(--theme_dark--code_punctuation);
--theme_dark--code_doctype: hsl(30, 20%, 50%);
--theme_dark--code_number: hsl(350, 40%, 70%);
--theme_dark--code_string: hsl(75, 70%, 60%);
--theme_dark--code_attr-value: hsl(350, 40%, 70%);
--theme_dark--code_boolean: hsl(350, 40%, 70%);
/** light **/
@ -246,6 +269,9 @@
--theme_light--gallery: rgba(55, 53, 47, 0.024);
--theme_light--select_input: rgba(242, 241, 238, 0.6);
--theme_light--table-border: rgba(55, 53, 47, 0.16);
--theme_light--table-border_row: rgb(223, 223, 222);
--theme_light--table-border_column: rgb(237, 237, 236);
--theme_light--table-border_selected: rgba(46, 170, 220, 0.6);
--theme_light--ui-border: rgba(55, 53, 47, 0.09);
--theme_light--interactive_hover: rgb(239, 239, 239);
--theme_light--interactive_hover-border: transparent;
@ -254,9 +280,12 @@
--theme_light--selected: rgba(46, 170, 220, 0.2);
--theme_light--primary: rgb(46, 170, 220);
--theme_light--primary_text: white;
--theme_light--primary_hover: rgb(6, 156, 205);
--theme_light--primary_click: rgb(0, 141, 190);
--theme_light--primary_indicator: rgb(235, 87, 87);
--theme_light--primary_indicator_text: var(--theme_light--primary_text);
--theme_light--primary_indicator_hover: rgba(45, 156, 219, 0.2);
--theme_light--option-color: black;
--theme_light--option-background: transparent;
@ -268,6 +297,8 @@
--theme_light--danger_text: rgb(235, 87, 87);
--theme_light--danger_border: rgba(235, 87, 87, 0.5);
--theme_light--divider: var(--theme_light--table-border);
--theme_light--text: rgb(55, 53, 47);
--theme_light--text_ui: rgba(55, 53, 47, 0.6);
--theme_light--text_ui: rgba(55, 53, 47, 0.6);
@ -368,19 +399,34 @@
--theme_light--code-text: var(--theme_light--text);
--theme_light--code-background: var(--theme_light--card);
--theme_light--code_function: #dd4a68;
--theme_light--code_parameter: var(--theme_light--code-text);
--theme_light--code_keyword: #07a;
--theme_light--code_constant: #905;
--theme_light--code_tag: #905;
--theme_light--code_operator: #9a6e3a;
--theme_light--code_important: #e90;
--theme_light--code_regex: #e90;
--theme_light--code_property: #905;
--theme_light--code_builtin: #690;
--theme_light--code_class-name: #dd4a68;
--theme_light--code_attr-name: #690;
--theme_light--code_attr-value: #07a;
--theme_light--code_selector: #690;
--theme_light--code_id: var(--theme_light--code-text);
--theme_light--code_class: var(--theme_light--code-text);
--theme_light--code_pseudo-element: var(--theme_light--code-text);
--theme_light--code_pseudo-class: var(--theme_light--code-text);
--theme_light--code_attribute: var(--theme_light--code-text);
--theme_light--code_value: var(--theme_light--code-text);
--theme_light--code_unit: var(--theme_light--code-text);
--theme_light--code_comment: slategray;
--theme_light--code_punctuation: #999;
--theme_light--code_annotation: var(--theme_light--code_punctuation);
--theme_light--code_decorator: var(--theme_light--code_punctuation);
--theme_light--code_doctype: slategray;
--theme_light--code_number: #905;
--theme_light--code_string: #690;
--theme_light--code_attr-value: #07a;
--theme_light--code_boolean: #905;
}
.notion-dark-theme {
@ -421,6 +467,9 @@
--theme--gallery: var(--theme_dark--gallery);
--theme--select_input: var(--theme_dark--select_input);
--theme--table-border: var(--theme_dark--table-border);
--theme--table-border_row: var(--theme_dark--table-border_row);
--theme--table-border_column: var(--theme_dark--table-border_column);
--theme--table-border_selected: var(--theme_dark--table-border_selected);
--theme--ui-border: var(--theme_dark--ui-border);
--theme--interactive_hover: var(--theme_dark--interactive_hover);
--theme--interactive_hover-border: var(
@ -430,9 +479,12 @@
--theme--button_close-fill: var(--theme_dark--button_close-fill);
--theme--selected: var(--theme_dark--selected);
--theme--primary: var(--theme_dark--primary);
--theme--primary_text: var(--theme_dark--primary_text);
--theme--primary_hover: var(--theme_dark--primary_hover);
--theme--primary_click: var(--theme_dark--primary_click);
--theme--primary_indicator: var(--theme_dark--primary_indicator);
--theme--primary_indicator_text: var(--theme_dark--primary_indicator_text);
--theme--primary_indicator_hover: var(--theme_dark--primary_indicator_hover);
--theme--option-color: var(--theme_dark--option-color);
--theme--option-background: var(--theme_dark--option-background);
--theme--option_active-color: var(--theme_dark--option_active-color);
@ -443,6 +495,7 @@
--theme--option_hover-background: var(--theme_dark--option_hover-background);
--theme--danger_text: var(--theme_dark--danger_text);
--theme--danger_border: var(--theme_dark--danger_border);
--theme--divider: var(--theme_dark--divider);
--theme--text: var(--theme_dark--text);
--theme--text_ui: var(--theme_dark--text_ui);
--theme--text_ui_info: var(--theme_dark--text_ui_info);
@ -536,19 +589,34 @@
--theme--code-text: var(--theme_dark--code-text);
--theme--code-background: var(--theme_dark--code-background);
--theme--code_function: var(--theme_dark--code_function);
--theme--code_parameter: var(--theme_dark--code_parameter);
--theme--code_keyword: var(--theme_dark--code_keyword);
--theme--code_constant: var(--theme_dark--code_constant);
--theme--code_tag: var(--theme_dark--code_tag);
--theme--code_operator: var(--theme_dark--code_operator);
--theme--code_important: var(--theme_dark--code_important);
--theme--code_regex: var(--theme_dark--code_regex);
--theme--code_property: var(--theme_dark--code_property);
--theme--code_builtin: var(--theme_dark--code_builtin);
--theme--code_class-name: var(--theme_dark--code_class-name);
--theme--code_attr-name: var(--theme_dark--code_attr-name);
--theme--code_attr-value: var(--theme_dark--code_attr-value);
--theme--code_selector: var(--theme_dark--code_selector);
--theme--code_id: var(--theme_dark--code_id);
--theme--code_class: var(--theme_dark--code_class);
--theme--code_pseudo-element: var(--theme_dark--code_pseudo-element);
--theme--code_pseudo-class: var(--theme_dark--code_pseudo-class);
--theme--code_attribute: var(--theme_dark--code_attribute);
--theme--code_value: var(--theme_dark--code_value);
--theme--code_unit: var(--theme_dark--code_unit);
--theme--code_comment: var(--theme_dark--code_comment);
--theme--code_punctuation: var(--theme_dark--code_punctuation);
--theme--code_annotation: var(--theme_dark--code_annotation);
--theme--code_decorator: var(--theme_dark--code_decorator);
--theme--code_doctype: var(--theme_dark--code_doctype);
--theme--code_number: var(--theme_dark--code_number);
--theme--code_string: var(--theme_dark--code_string);
--theme--code_attr-value: var(--theme_dark--code_attr-value);
--theme--code_boolean: var(--theme_dark--code_boolean);
}
.notion-light-theme {
@ -589,6 +657,9 @@
--theme--gallery: var(--theme_light--gallery);
--theme--select_input: var(--theme_light--select_input);
--theme--table-border: var(--theme_light--table-border);
--theme--table-border_row: var(--theme_light--table-border_row);
--theme--table-border_column: var(--theme_light--table-border_column);
--theme--table-border_selected: var(--theme_light--table-border_selected);
--theme--ui-border: var(--theme_light--ui-border);
--theme--interactive_hover: var(--theme_light--interactive_hover);
--theme--interactive_hover-border: var(
@ -598,9 +669,12 @@
--theme--button_close-fill: var(--theme_light--button_close-fill);
--theme--selected: var(--theme_light--selected);
--theme--primary: var(--theme_light--primary);
--theme--primary_text: var(--theme_light--primary_text);
--theme--primary_hover: var(--theme_light--primary_hover);
--theme--primary_click: var(--theme_light--primary_click);
--theme--primary_indicator: var(--theme_light--primary_indicator);
--theme--primary_indicator_text: var(--theme_light--primary_indicator_text);
--theme--primary_indicator_hover: var(--theme_light--primary_indicator_hover);
--theme--option-color: var(--theme_light--option-color);
--theme--option-background: var(--theme_light--option-background);
--theme--option_hover-color: var(--theme_light--option_hover-color);
@ -611,6 +685,7 @@
);
--theme--danger_text: var(--theme_light--danger_text);
--theme--danger_border: var(--theme_light--danger_border);
--theme--divider: var(--theme_light--divider);
--theme--text: var(--theme_light--text);
--theme--text_ui: var(--theme_light--text_ui);
--theme--text_ui_info: var(--theme_light--text_ui_info);
@ -704,17 +779,32 @@
--theme--code-text: var(--theme_light--code-text);
--theme--code-background: var(--theme_light--code-background);
--theme--code_function: var(--theme_light--code_function);
--theme--code_parameter: var(--theme_light--code_parameter);
--theme--code_keyword: var(--theme_light--code_keyword);
--theme--code_constant: var(--theme_light--code_constant);
--theme--code_tag: var(--theme_light--code_tag);
--theme--code_operator: var(--theme_light--code_operator);
--theme--code_important: var(--theme_light--code_important);
--theme--code_regex: var(--theme_light--code_regex);
--theme--code_property: var(--theme_light--code_property);
--theme--code_builtin: var(--theme_light--code_builtin);
--theme--code_class-name: var(--theme_light--code_class-name);
--theme--code_attr-name: var(--theme_light--code_attr-name);
--theme--code_attr-value: var(--theme_light--code_attr-value);
--theme--code_selector: var(--theme_light--code_selector);
--theme--code_id: var(--theme_light--code_id);
--theme--code_class: var(--theme_light--code_class);
--theme--code_pseudo-element: var(--theme_light--code_pseudo-element);
--theme--code_pseudo-class: var(--theme_light--code_pseudo-class);
--theme--code_attribute: var(--theme_light--code_attribute);
--theme--code_value: var(--theme_light--code_value);
--theme--code_unit: var(--theme_light--code_unit);
--theme--code_comment: var(--theme_light--code_comment);
--theme--code_punctuation: var(--theme_light--code_punctuation);
--theme--code_annotation: var(--theme_light--code_annotation);
--theme--code_decorator: var(--theme_light--code_decorator);
--theme--code_doctype: var(--theme_light--code_doctype);
--theme--code_number: var(--theme_light--code_number);
--theme--code_string: var(--theme_light--code_string);
--theme--code_attr-value: var(--theme_light--code_attr-value);
--theme--code_boolean: var(--theme_light--code_boolean);
}