From 943f58630eca1cf2f03c3fc322f65fe084a813b2 Mon Sep 17 00:00:00 2001
From: Ryo Hilmawan <54142180+CloudHill@users.noreply.github.com>
Date: Thu, 10 Dec 2020 11:57:35 +0700
Subject: [PATCH] theming bugfixes and additional variables (#309)

* theming bugfixes and additional variables

* add theming code variables for constant and regex
---
 mods/core/css/theme.css | 135 ++++++++++++++++++++++++++++++++++++++--
 mods/core/variables.css | 102 ++++++++++++++++++++++++++++--
 2 files changed, 226 insertions(+), 11 deletions(-)

diff --git a/mods/core/css/theme.css b/mods/core/css/theme.css
index 2b97ba0..8bbf38b 100644
--- a/mods/core/css/theme.css
+++ b/mods/core/css/theme.css
@@ -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;
+}
diff --git a/mods/core/variables.css b/mods/core/variables.css
index f2a7881..63d2f9d 100644
--- a/mods/core/variables.css
+++ b/mods/core/variables.css
@@ -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);
 }