Skip to content

Commit 38c5515

Browse files
matthewlipskimatthewlipski
authored
fix: Color naming & CSS (BLO-946) (#2684)
* Changed "Default" color name to "Auto" * Fixed block color CSS issues * Fixed rendering issues
1 parent 6dbd6eb commit 38c5515

26 files changed

Lines changed: 47 additions & 65 deletions

File tree

‎examples/02-backend/04-rendering-static-documents/src/App.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,17 @@ This example has the HTML hard-coded, but shows at least how the document will b
2222
export default function App() {
2323
// This HTML is generated by the ServerBlockNoteEditor.blocksToFullHTML method
2424
const html = `<div class="bn-block-group" data-node-type="blockGroup">
25-
<div class="bn-block-outer" data-node-type="blockOuter" data-id="1" data-text-color="yellow" data-background-color="blue">
26-
<div class="bn-block" data-node-type="blockContainer" data-id="1" data-text-color="yellow" data-background-color="blue">
27-
<div class="bn-block-content" data-content-type="heading" data-text-alignment="right" data-level="2">
25+
<div class="bn-block-outer" data-node-type="blockOuter" data-id="1">
26+
<div class="bn-block" data-node-type="blockContainer" data-id="1">
27+
<div class="bn-block-content" data-content-type="heading" data-background-color="blue" data-text-color="yellow" data-text-alignment="right" data-level="2">
2828
<h2 class="bn-inline-content">
2929
<strong><u>Heading </u></strong><em><s>2</s></em>
3030
</h2>
3131
</div>
3232
<div class="bn-block-group" data-node-type="blockGroup">
33-
<div class="bn-block-outer" data-node-type="blockOuter" data-id="2" data-background-color="red">
34-
<div class="bn-block" data-node-type="blockContainer" data-id="2" data-background-color="red">
35-
<div class="bn-block-content" data-content-type="paragraph">
33+
<div class="bn-block-outer" data-node-type="blockOuter" data-id="2">
34+
<div class="bn-block" data-node-type="blockContainer" data-id="2">
35+
<div class="bn-block-content" data-content-type="paragraph" data-background-color="red">
3636
<p class="bn-inline-content">Paragraph</p>
3737
</div>
3838
</div>

‎packages/core/src/editor/Block.css‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -574,110 +574,92 @@ NESTED BLOCKS
574574

575575
/* TEXT COLORS */
576576
[data-style-type="textColor"][data-value="gray"],
577-
[data-text-color="gray"],
578577
.bn-block:has(> .bn-block-content[data-text-color="gray"]) {
579578
color: #9b9a97;
580579
}
581580

582581
[data-style-type="textColor"][data-value="brown"],
583-
[data-text-color="brown"],
584582
.bn-block:has(> .bn-block-content[data-text-color="brown"]) {
585583
color: #64473a;
586584
}
587585

588586
[data-style-type="textColor"][data-value="red"],
589-
[data-text-color="red"],
590587
.bn-block:has(> .bn-block-content[data-text-color="red"]) {
591588
color: #e03e3e;
592589
}
593590

594591
[data-style-type="textColor"][data-value="orange"],
595-
[data-text-color="orange"],
596592
.bn-block:has(> .bn-block-content[data-text-color="orange"]) {
597593
color: #d9730d;
598594
}
599595

600596
[data-style-type="textColor"][data-value="yellow"],
601-
[data-text-color="yellow"],
602597
.bn-block:has(> .bn-block-content[data-text-color="yellow"]) {
603598
color: #dfab01;
604599
}
605600

606601
[data-style-type="textColor"][data-value="green"],
607-
[data-text-color="green"],
608602
.bn-block:has(> .bn-block-content[data-text-color="green"]) {
609603
color: #4d6461;
610604
}
611605

612606
[data-style-type="textColor"][data-value="blue"],
613-
[data-text-color="blue"],
614607
.bn-block:has(> .bn-block-content[data-text-color="blue"]) {
615608
color: #0b6e99;
616609
}
617610

618611
[data-style-type="textColor"][data-value="purple"],
619-
[data-text-color="purple"],
620612
.bn-block:has(> .bn-block-content[data-text-color="purple"]) {
621613
color: #6940a5;
622614
}
623615

624616
[data-style-type="textColor"][data-value="pink"],
625-
[data-text-color="pink"],
626617
.bn-block:has(> .bn-block-content[data-text-color="pink"]) {
627618
color: #ad1a72;
628619
}
629620

630621
/* BACKGROUND COLORS */
631622
[data-style-type="backgroundColor"][data-value="gray"],
632-
[data-background-color="gray"],
633623
.bn-block:has(> .bn-block-content[data-background-color="gray"]) {
634624
background-color: #ebeced;
635625
}
636626

637627
[data-style-type="backgroundColor"][data-value="brown"],
638-
[data-background-color="brown"],
639628
.bn-block:has(> .bn-block-content[data-background-color="brown"]) {
640629
background-color: #e9e5e3;
641630
}
642631

643632
[data-style-type="backgroundColor"][data-value="red"],
644-
[data-background-color="red"],
645633
.bn-block:has(> .bn-block-content[data-background-color="red"]) {
646634
background-color: #fbe4e4;
647635
}
648636

649637
[data-style-type="backgroundColor"][data-value="orange"],
650-
[data-background-color="orange"],
651638
.bn-block:has(> .bn-block-content[data-background-color="orange"]) {
652639
background-color: #f6e9d9;
653640
}
654641

655642
[data-style-type="backgroundColor"][data-value="yellow"],
656-
[data-background-color="yellow"],
657643
.bn-block:has(> .bn-block-content[data-background-color="yellow"]) {
658644
background-color: #fbf3db;
659645
}
660646

661647
[data-style-type="backgroundColor"][data-value="green"],
662-
[data-background-color="green"],
663648
.bn-block:has(> .bn-block-content[data-background-color="green"]) {
664649
background-color: #ddedea;
665650
}
666651

667652
[data-style-type="backgroundColor"][data-value="blue"],
668-
[data-background-color="blue"],
669653
.bn-block:has(> .bn-block-content[data-background-color="blue"]) {
670654
background-color: #ddebf1;
671655
}
672656

673657
[data-style-type="backgroundColor"][data-value="purple"],
674-
[data-background-color="purple"],
675658
.bn-block:has(> .bn-block-content[data-background-color="purple"]) {
676659
background-color: #eae4f2;
677660
}
678661

679662
[data-style-type="backgroundColor"][data-value="pink"],
680-
[data-background-color="pink"],
681663
.bn-block:has(> .bn-block-content[data-background-color="pink"]) {
682664
background-color: #f4dfeb;
683665
}

‎packages/core/src/i18n/locales/ar.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,7 @@ export const ar: Dictionary = {
214214
text_title: "نص",
215215
background_title: "خلفية",
216216
colors: {
217-
default: "افتراضي",
217+
default: "تلقائي",
218218
gray: "رمادي",
219219
brown: "بني",
220220
red: "أحمر",

‎packages/core/src/i18n/locales/de.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,7 @@ export const de: Dictionary = {
249249
text_title: "Text",
250250
background_title: "Hintergrund",
251251
colors: {
252-
default: "Standard",
252+
default: "Automatisch",
253253
gray: "Grau",
254254
brown: "Braun",
255255
red: "Rot",

‎packages/core/src/i18n/locales/en.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,7 @@ export const en = {
229229
text_title: "Text",
230230
background_title: "Background",
231231
colors: {
232-
default: "Default",
232+
default: "Auto",
233233
gray: "Gray",
234234
brown: "Brown",
235235
red: "Red",

‎packages/core/src/i18n/locales/es.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ export const es: Dictionary = {
228228
text_title: "Texto",
229229
background_title: "Fondo",
230230
colors: {
231-
default: "Por defecto",
231+
default: "Automático",
232232
gray: "Gris",
233233
brown: "Marrón",
234234
red: "Rojo",

‎packages/core/src/i18n/locales/fa.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ export const fa = {
197197
text_title: "متن",
198198
background_title: "پس‌زمینه",
199199
colors: {
200-
default: "پیش‌فرض",
200+
default: "خودکار",
201201
gray: "خاکستری",
202202
brown: "قهوه‌ای",
203203
red: "قرمز",

‎packages/core/src/i18n/locales/fr.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -275,7 +275,7 @@ export const fr: Dictionary = {
275275
text_title: "Texte",
276276
background_title: "Fond",
277277
colors: {
278-
default: "Défaut",
278+
default: "Auto",
279279
gray: "Gris",
280280
brown: "Marron",
281281
red: "Rouge",

‎packages/core/src/i18n/locales/he.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,7 @@ export const he: Dictionary = {
230230
text_title: "טקסט",
231231
background_title: "רקע",
232232
colors: {
233-
default: "ברירת מחדל",
233+
default: "אוטומטי",
234234
gray: "אפור",
235235
brown: "חום",
236236
red: "אדום",

‎packages/core/src/i18n/locales/hr.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,7 @@ export const hr: Dictionary = {
242242
text_title: "Tekst",
243243
background_title: "Pozadina",
244244
colors: {
245-
default: "Zadano",
245+
default: "Automatski",
246246
gray: "Siva",
247247
brown: "Smeđa",
248248
red: "Crvena",

0 commit comments

Comments
 (0)