diff --git a/examples/02-backend/04-rendering-static-documents/src/App.tsx b/examples/02-backend/04-rendering-static-documents/src/App.tsx
index b6ffd098a0..3a5db9891b 100644
--- a/examples/02-backend/04-rendering-static-documents/src/App.tsx
+++ b/examples/02-backend/04-rendering-static-documents/src/App.tsx
@@ -22,17 +22,17 @@ This example has the HTML hard-coded, but shows at least how the document will b
 export default function App() {
   // This HTML is generated by the ServerBlockNoteEditor.blocksToFullHTML method
   const html = `<div class="bn-block-group" data-node-type="blockGroup">
-  <div class="bn-block-outer" data-node-type="blockOuter" data-id="1" data-text-color="yellow" data-background-color="blue">
-      <div class="bn-block" data-node-type="blockContainer" data-id="1" data-text-color="yellow" data-background-color="blue">
-          <div class="bn-block-content" data-content-type="heading" data-text-alignment="right" data-level="2">
+  <div class="bn-block-outer" data-node-type="blockOuter" data-id="1">
+      <div class="bn-block" data-node-type="blockContainer" data-id="1">
+          <div class="bn-block-content" data-content-type="heading" data-background-color="blue" data-text-color="yellow" data-text-alignment="right" data-level="2">
               <h2 class="bn-inline-content">
                   <strong><u>Heading </u></strong><em><s>2</s></em>
               </h2>
           </div>
           <div class="bn-block-group" data-node-type="blockGroup">
-              <div class="bn-block-outer" data-node-type="blockOuter" data-id="2" data-background-color="red">
-                  <div class="bn-block" data-node-type="blockContainer" data-id="2" data-background-color="red">
-                      <div class="bn-block-content" data-content-type="paragraph">
+              <div class="bn-block-outer" data-node-type="blockOuter" data-id="2">
+                  <div class="bn-block" data-node-type="blockContainer" data-id="2">
+                      <div class="bn-block-content" data-content-type="paragraph" data-background-color="red">
                           <p class="bn-inline-content">Paragraph</p>
                       </div>
                   </div>
diff --git a/packages/core/src/editor/Block.css b/packages/core/src/editor/Block.css
index 6a079f7863..a5d8229b0a 100644
--- a/packages/core/src/editor/Block.css
+++ b/packages/core/src/editor/Block.css
@@ -561,110 +561,92 @@ NESTED BLOCKS
 
 /* TEXT COLORS */
 [data-style-type="textColor"][data-value="gray"],
-[data-text-color="gray"],
 .bn-block:has(> .bn-block-content[data-text-color="gray"]) {
   color: #9b9a97;
 }
 
 [data-style-type="textColor"][data-value="brown"],
-[data-text-color="brown"],
 .bn-block:has(> .bn-block-content[data-text-color="brown"]) {
   color: #64473a;
 }
 
 [data-style-type="textColor"][data-value="red"],
-[data-text-color="red"],
 .bn-block:has(> .bn-block-content[data-text-color="red"]) {
   color: #e03e3e;
 }
 
 [data-style-type="textColor"][data-value="orange"],
-[data-text-color="orange"],
 .bn-block:has(> .bn-block-content[data-text-color="orange"]) {
   color: #d9730d;
 }
 
 [data-style-type="textColor"][data-value="yellow"],
-[data-text-color="yellow"],
 .bn-block:has(> .bn-block-content[data-text-color="yellow"]) {
   color: #dfab01;
 }
 
 [data-style-type="textColor"][data-value="green"],
-[data-text-color="green"],
 .bn-block:has(> .bn-block-content[data-text-color="green"]) {
   color: #4d6461;
 }
 
 [data-style-type="textColor"][data-value="blue"],
-[data-text-color="blue"],
 .bn-block:has(> .bn-block-content[data-text-color="blue"]) {
   color: #0b6e99;
 }
 
 [data-style-type="textColor"][data-value="purple"],
-[data-text-color="purple"],
 .bn-block:has(> .bn-block-content[data-text-color="purple"]) {
   color: #6940a5;
 }
 
 [data-style-type="textColor"][data-value="pink"],
-[data-text-color="pink"],
 .bn-block:has(> .bn-block-content[data-text-color="pink"]) {
   color: #ad1a72;
 }
 
 /* BACKGROUND COLORS */
 [data-style-type="backgroundColor"][data-value="gray"],
-[data-background-color="gray"],
 .bn-block:has(> .bn-block-content[data-background-color="gray"]) {
   background-color: #ebeced;
 }
 
 [data-style-type="backgroundColor"][data-value="brown"],
-[data-background-color="brown"],
 .bn-block:has(> .bn-block-content[data-background-color="brown"]) {
   background-color: #e9e5e3;
 }
 
 [data-style-type="backgroundColor"][data-value="red"],
-[data-background-color="red"],
 .bn-block:has(> .bn-block-content[data-background-color="red"]) {
   background-color: #fbe4e4;
 }
 
 [data-style-type="backgroundColor"][data-value="orange"],
-[data-background-color="orange"],
 .bn-block:has(> .bn-block-content[data-background-color="orange"]) {
   background-color: #f6e9d9;
 }
 
 [data-style-type="backgroundColor"][data-value="yellow"],
-[data-background-color="yellow"],
 .bn-block:has(> .bn-block-content[data-background-color="yellow"]) {
   background-color: #fbf3db;
 }
 
 [data-style-type="backgroundColor"][data-value="green"],
-[data-background-color="green"],
 .bn-block:has(> .bn-block-content[data-background-color="green"]) {
   background-color: #ddedea;
 }
 
 [data-style-type="backgroundColor"][data-value="blue"],
-[data-background-color="blue"],
 .bn-block:has(> .bn-block-content[data-background-color="blue"]) {
   background-color: #ddebf1;
 }
 
 [data-style-type="backgroundColor"][data-value="purple"],
-[data-background-color="purple"],
 .bn-block:has(> .bn-block-content[data-background-color="purple"]) {
   background-color: #eae4f2;
 }
 
 [data-style-type="backgroundColor"][data-value="pink"],
-[data-background-color="pink"],
 .bn-block:has(> .bn-block-content[data-background-color="pink"]) {
   background-color: #f4dfeb;
 }
diff --git a/packages/core/src/i18n/locales/ar.ts b/packages/core/src/i18n/locales/ar.ts
index 00574debed..78710460af 100644
--- a/packages/core/src/i18n/locales/ar.ts
+++ b/packages/core/src/i18n/locales/ar.ts
@@ -214,7 +214,7 @@ export const ar: Dictionary = {
     text_title: "نص",
     background_title: "خلفية",
     colors: {
-      default: "افتراضي",
+      default: "تلقائي",
       gray: "رمادي",
       brown: "بني",
       red: "أحمر",
diff --git a/packages/core/src/i18n/locales/de.ts b/packages/core/src/i18n/locales/de.ts
index cac48dd80a..6c067d48ca 100644
--- a/packages/core/src/i18n/locales/de.ts
+++ b/packages/core/src/i18n/locales/de.ts
@@ -249,7 +249,7 @@ export const de: Dictionary = {
     text_title: "Text",
     background_title: "Hintergrund",
     colors: {
-      default: "Standard",
+      default: "Automatisch",
       gray: "Grau",
       brown: "Braun",
       red: "Rot",
diff --git a/packages/core/src/i18n/locales/en.ts b/packages/core/src/i18n/locales/en.ts
index af7927d207..2bbd73f433 100644
--- a/packages/core/src/i18n/locales/en.ts
+++ b/packages/core/src/i18n/locales/en.ts
@@ -229,7 +229,7 @@ export const en = {
     text_title: "Text",
     background_title: "Background",
     colors: {
-      default: "Default",
+      default: "Auto",
       gray: "Gray",
       brown: "Brown",
       red: "Red",
diff --git a/packages/core/src/i18n/locales/es.ts b/packages/core/src/i18n/locales/es.ts
index 9e830b406b..69b6e2bbc9 100644
--- a/packages/core/src/i18n/locales/es.ts
+++ b/packages/core/src/i18n/locales/es.ts
@@ -228,7 +228,7 @@ export const es: Dictionary = {
     text_title: "Texto",
     background_title: "Fondo",
     colors: {
-      default: "Por defecto",
+      default: "Automático",
       gray: "Gris",
       brown: "Marrón",
       red: "Rojo",
diff --git a/packages/core/src/i18n/locales/fa.ts b/packages/core/src/i18n/locales/fa.ts
index f72270e04e..ef4ad35a78 100644
--- a/packages/core/src/i18n/locales/fa.ts
+++ b/packages/core/src/i18n/locales/fa.ts
@@ -197,7 +197,7 @@ export const fa = {
     text_title: "متن",
     background_title: "پس‌زمینه",
     colors: {
-      default: "پیش‌فرض",
+      default: "خودکار",
       gray: "خاکستری",
       brown: "قهوه‌ای",
       red: "قرمز",
diff --git a/packages/core/src/i18n/locales/fr.ts b/packages/core/src/i18n/locales/fr.ts
index b56e6942f6..92cabcf44e 100644
--- a/packages/core/src/i18n/locales/fr.ts
+++ b/packages/core/src/i18n/locales/fr.ts
@@ -275,7 +275,7 @@ export const fr: Dictionary = {
     text_title: "Texte",
     background_title: "Fond",
     colors: {
-      default: "Défaut",
+      default: "Auto",
       gray: "Gris",
       brown: "Marron",
       red: "Rouge",
diff --git a/packages/core/src/i18n/locales/he.ts b/packages/core/src/i18n/locales/he.ts
index 553fc42941..4b13c2152e 100644
--- a/packages/core/src/i18n/locales/he.ts
+++ b/packages/core/src/i18n/locales/he.ts
@@ -230,7 +230,7 @@ export const he: Dictionary = {
     text_title: "טקסט",
     background_title: "רקע",
     colors: {
-      default: "ברירת מחדל",
+      default: "אוטומטי",
       gray: "אפור",
       brown: "חום",
       red: "אדום",
diff --git a/packages/core/src/i18n/locales/hr.ts b/packages/core/src/i18n/locales/hr.ts
index 31c0b71159..520d6f1cdd 100644
--- a/packages/core/src/i18n/locales/hr.ts
+++ b/packages/core/src/i18n/locales/hr.ts
@@ -242,7 +242,7 @@ export const hr: Dictionary = {
     text_title: "Tekst",
     background_title: "Pozadina",
     colors: {
-      default: "Zadano",
+      default: "Automatski",
       gray: "Siva",
       brown: "Smeđa",
       red: "Crvena",
diff --git a/packages/core/src/i18n/locales/is.ts b/packages/core/src/i18n/locales/is.ts
index 25060d651f..8be3887076 100644
--- a/packages/core/src/i18n/locales/is.ts
+++ b/packages/core/src/i18n/locales/is.ts
@@ -242,7 +242,7 @@ export const is: Dictionary = {
     text_title: "Texti",
     background_title: "Bakgrunnur",
     colors: {
-      default: "Sjálfgefið",
+      default: "Sjálfvirkt",
       gray: "Grár",
       brown: "Brúnn",
       red: "Rauður",
diff --git a/packages/core/src/i18n/locales/it.ts b/packages/core/src/i18n/locales/it.ts
index 45d9dcd277..f2ffc41431 100644
--- a/packages/core/src/i18n/locales/it.ts
+++ b/packages/core/src/i18n/locales/it.ts
@@ -251,7 +251,7 @@ export const it: Dictionary = {
     text_title: "Testo",
     background_title: "Sfondo",
     colors: {
-      default: "Predefinito",
+      default: "Automatico",
       gray: "Grigio",
       brown: "Marrone",
       red: "Rosso",
diff --git a/packages/core/src/i18n/locales/ja.ts b/packages/core/src/i18n/locales/ja.ts
index 236b834443..8c1b5f35cf 100644
--- a/packages/core/src/i18n/locales/ja.ts
+++ b/packages/core/src/i18n/locales/ja.ts
@@ -269,7 +269,7 @@ export const ja: Dictionary = {
     text_title: "文字色",
     background_title: "背景色",
     colors: {
-      default: "デフォルト",
+      default: "自動",
       gray: "グレー",
       brown: "茶色",
       red: "赤",
diff --git a/packages/core/src/i18n/locales/ko.ts b/packages/core/src/i18n/locales/ko.ts
index cce4c8f7c6..5b7ee597ae 100644
--- a/packages/core/src/i18n/locales/ko.ts
+++ b/packages/core/src/i18n/locales/ko.ts
@@ -242,7 +242,7 @@ export const ko: Dictionary = {
     text_title: "텍스트",
     background_title: "배경",
     colors: {
-      default: "기본",
+      default: "자동",
       gray: "회색",
       brown: "갈색",
       red: "빨간색",
diff --git a/packages/core/src/i18n/locales/nl.ts b/packages/core/src/i18n/locales/nl.ts
index 6d1f48cde2..731c877fb1 100644
--- a/packages/core/src/i18n/locales/nl.ts
+++ b/packages/core/src/i18n/locales/nl.ts
@@ -230,7 +230,7 @@ export const nl: Dictionary = {
     text_title: "Tekst",
     background_title: "Achtergrond",
     colors: {
-      default: "Standaard",
+      default: "Automatisch",
       gray: "Grijs",
       brown: "Bruin",
       red: "Rood",
diff --git a/packages/core/src/i18n/locales/no.ts b/packages/core/src/i18n/locales/no.ts
index c28cac2b9f..8d88d81f52 100644
--- a/packages/core/src/i18n/locales/no.ts
+++ b/packages/core/src/i18n/locales/no.ts
@@ -247,7 +247,7 @@ export const no: Dictionary = {
     text_title: "Tekst",
     background_title: "Bakgrunn",
     colors: {
-      default: "Standard",
+      default: "Automatisk",
       gray: "Grå",
       brown: "Brun",
       red: "Rød",
diff --git a/packages/core/src/i18n/locales/pl.ts b/packages/core/src/i18n/locales/pl.ts
index 35bf1f255a..1b85ff785c 100644
--- a/packages/core/src/i18n/locales/pl.ts
+++ b/packages/core/src/i18n/locales/pl.ts
@@ -220,7 +220,7 @@ export const pl: Dictionary = {
     text_title: "Tekst",
     background_title: "Tło",
     colors: {
-      default: "Domyślny",
+      default: "Automatyczny",
       gray: "Szary",
       brown: "Brązowy",
       red: "Czerwony",
diff --git a/packages/core/src/i18n/locales/pt.ts b/packages/core/src/i18n/locales/pt.ts
index 7801cd2d36..131002efd4 100644
--- a/packages/core/src/i18n/locales/pt.ts
+++ b/packages/core/src/i18n/locales/pt.ts
@@ -221,7 +221,7 @@ export const pt: Dictionary = {
     text_title: "Texto",
     background_title: "Fundo",
     colors: {
-      default: "Padrão",
+      default: "Automático",
       gray: "Cinza",
       brown: "Marrom",
       red: "Vermelho",
diff --git a/packages/core/src/i18n/locales/ru.ts b/packages/core/src/i18n/locales/ru.ts
index 0c7537b1bc..bf893ec8e5 100644
--- a/packages/core/src/i18n/locales/ru.ts
+++ b/packages/core/src/i18n/locales/ru.ts
@@ -272,7 +272,7 @@ export const ru: Dictionary = {
     text_title: "Текст",
     background_title: "Задний фон",
     colors: {
-      default: "По умолчанию",
+      default: "Авто",
       gray: "Серый",
       brown: "Коричневый",
       red: "Красный",
diff --git a/packages/core/src/i18n/locales/sk.ts b/packages/core/src/i18n/locales/sk.ts
index cbdd0b706f..00a40cdfc7 100644
--- a/packages/core/src/i18n/locales/sk.ts
+++ b/packages/core/src/i18n/locales/sk.ts
@@ -228,7 +228,7 @@ export const sk = {
     text_title: "Text",
     background_title: "Pozadie",
     colors: {
-      default: "Predvolená",
+      default: "Automaticky",
       gray: "Sivá",
       brown: "Hnedá",
       red: "Červená",
diff --git a/packages/core/src/i18n/locales/uk.ts b/packages/core/src/i18n/locales/uk.ts
index a99a4259c6..892d5582bf 100644
--- a/packages/core/src/i18n/locales/uk.ts
+++ b/packages/core/src/i18n/locales/uk.ts
@@ -254,7 +254,7 @@ export const uk: Dictionary = {
     text_title: "Текст",
     background_title: "Фон",
     colors: {
-      default: "За замовчуванням",
+      default: "Авто",
       gray: "Сірий",
       brown: "Коричневий",
       red: "Червоний",
diff --git a/packages/core/src/i18n/locales/uz.ts b/packages/core/src/i18n/locales/uz.ts
index 8330db43b4..ac35c734c5 100644
--- a/packages/core/src/i18n/locales/uz.ts
+++ b/packages/core/src/i18n/locales/uz.ts
@@ -294,7 +294,7 @@ export const uz: Dictionary = {
     text_title: "Matn",
     background_title: "Fon",
     colors: {
-      default: "Standart",
+      default: "Avtomatik",
       gray: "Kulrang",
       brown: "Jigarrang",
       red: "Qizil",
diff --git a/packages/core/src/i18n/locales/vi.ts b/packages/core/src/i18n/locales/vi.ts
index b300fdcfd0..daf49fa89d 100644
--- a/packages/core/src/i18n/locales/vi.ts
+++ b/packages/core/src/i18n/locales/vi.ts
@@ -228,7 +228,7 @@ export const vi: Dictionary = {
     text_title: "Văn bản",
     background_title: "Nền",
     colors: {
-      default: "Mặc định",
+      default: "Tự động",
       gray: "Xám",
       brown: "Nâu",
       red: "Đỏ",
diff --git a/packages/core/src/i18n/locales/zh-tw.ts b/packages/core/src/i18n/locales/zh-tw.ts
index e9aa1e8ac6..6b2c35b96c 100644
--- a/packages/core/src/i18n/locales/zh-tw.ts
+++ b/packages/core/src/i18n/locales/zh-tw.ts
@@ -270,7 +270,7 @@ export const zhTW: Dictionary = {
     text_title: "文字",
     background_title: "背景色",
     colors: {
-      default: "預設",
+      default: "自動",
       gray: "灰色",
       brown: "棕色",
       red: "紅色",
diff --git a/packages/core/src/i18n/locales/zh.ts b/packages/core/src/i18n/locales/zh.ts
index b44c81aa36..14920815a4 100644
--- a/packages/core/src/i18n/locales/zh.ts
+++ b/packages/core/src/i18n/locales/zh.ts
@@ -270,7 +270,7 @@ export const zh: Dictionary = {
     text_title: "文本",
     background_title: "背景色",
     colors: {
-      default: "默认",
+      default: "自动",
       gray: "灰色",
       brown: "棕色",
       red: "红色",
diff --git a/packages/react/src/editor/styles.css b/packages/react/src/editor/styles.css
index d659be3671..702116d310 100644
--- a/packages/react/src/editor/styles.css
+++ b/packages/react/src/editor/styles.css
@@ -141,92 +141,92 @@
 
 /* Highlight color styling */
 [data-style-type="textColor"][data-value="gray"],
-[data-text-color="gray"] {
+.bn-block:has(> .bn-block-content[data-text-color="gray"]) {
   color: var(--bn-colors-highlights-gray-text);
 }
 
 [data-style-type="textColor"][data-value="brown"],
-[data-text-color="brown"] {
+.bn-block:has(> .bn-block-content[data-text-color="brown"]) {
   color: var(--bn-colors-highlights-brown-text);
 }
 
 [data-style-type="textColor"][data-value="red"],
-[data-text-color="red"] {
+.bn-block:has(> .bn-block-content[data-text-color="red"]) {
   color: var(--bn-colors-highlights-red-text);
 }
 
 [data-style-type="textColor"][data-value="orange"],
-[data-text-color="orange"] {
+.bn-block:has(> .bn-block-content[data-text-color="orange"]) {
   color: var(--bn-colors-highlights-orange-text);
 }
 
 [data-style-type="textColor"][data-value="yellow"],
-[data-text-color="yellow"] {
+.bn-block:has(> .bn-block-content[data-text-color="yellow"]) {
   color: var(--bn-colors-highlights-yellow-text);
 }
 
 [data-style-type="textColor"][data-value="green"],
-[data-text-color="green"] {
+.bn-block:has(> .bn-block-content[data-text-color="green"]) {
   color: var(--bn-colors-highlights-green-text);
 }
 
 [data-style-type="textColor"][data-value="blue"],
-[data-text-color="blue"] {
+.bn-block:has(> .bn-block-content[data-text-color="blue"]) {
   color: var(--bn-colors-highlights-blue-text);
 }
 
 [data-style-type="textColor"][data-value="purple"],
-[data-text-color="purple"] {
+.bn-block:has(> .bn-block-content[data-text-color="purple"]) {
   color: var(--bn-colors-highlights-purple-text);
 }
 
 [data-style-type="textColor"][data-value="pink"],
-[data-text-color="pink"] {
+.bn-block:has(> .bn-block-content[data-text-color="pink"]) {
   color: var(--bn-colors-highlights-pink-text);
 }
 
 [data-style-type="backgroundColor"][data-value="gray"],
-[data-background-color="gray"] {
+.bn-block:has(> .bn-block-content[data-background-color="gray"]) {
   background-color: var(--bn-colors-highlights-gray-background);
 }
 
 [data-style-type="backgroundColor"][data-value="brown"],
-[data-background-color="brown"] {
+.bn-block:has(> .bn-block-content[data-background-color="brown"]) {
   background-color: var(--bn-colors-highlights-brown-background);
 }
 
 [data-style-type="backgroundColor"][data-value="red"],
-[data-background-color="red"] {
+.bn-block:has(> .bn-block-content[data-background-color="red"]) {
   background-color: var(--bn-colors-highlights-red-background);
 }
 
 [data-style-type="backgroundColor"][data-value="orange"],
-[data-background-color="orange"] {
+.bn-block:has(> .bn-block-content[data-background-color="orange"]) {
   background-color: var(--bn-colors-highlights-orange-background);
 }
 
 [data-style-type="backgroundColor"][data-value="yellow"],
-[data-background-color="yellow"] {
+.bn-block:has(> .bn-block-content[data-background-color="yellow"]) {
   background-color: var(--bn-colors-highlights-yellow-background);
 }
 
 [data-style-type="backgroundColor"][data-value="green"],
-[data-background-color="green"] {
+.bn-block:has(> .bn-block-content[data-background-color="green"]) {
   background-color: var(--bn-colors-highlights-green-background);
 }
 
 [data-style-type="backgroundColor"][data-value="blue"],
-[data-background-color="blue"] {
+.bn-block:has(> .bn-block-content[data-background-color="blue"]) {
   background-color: var(--bn-colors-highlights-blue-background);
 }
 
 [data-style-type="backgroundColor"][data-value="purple"],
-[data-background-color="purple"] {
+.bn-block:has(> .bn-block-content[data-background-color="purple"]) {
   background-color: var(--bn-colors-highlights-purple-background);
 }
 
 [data-style-type="backgroundColor"][data-value="pink"],
-[data-background-color="pink"] {
+.bn-block:has(> .bn-block-content[data-background-color="pink"]) {
   background-color: var(--bn-colors-highlights-pink-background);
 }