Skip to content

Commit

Permalink
support colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@YousefED
YousefED committed Oct 24, 2024
1 parent d67d3d3 commit 381471c
Show file tree
Hide file tree
Showing 16 changed files with 377 additions and 158 deletions.
8 changes: 5 additions & 3 deletions packages/core/src/editor/Block.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,8 @@ NESTED BLOCKS
cursor: pointer;
}

.bn-block-content[data-content-type="checkListItem"][data-checked="true"] .bn-inline-content {
.bn-block-content[data-content-type="checkListItem"][data-checked="true"]
.bn-inline-content {
text-decoration: line-through;
}

Expand Down Expand Up @@ -349,7 +350,8 @@ NESTED BLOCKS
cursor: ew-resize;
}

[data-content-type="audio"] > .bn-file-block-content-wrapper, .bn-audio {
[data-content-type="audio"] > .bn-file-block-content-wrapper,
.bn-audio {
width: 100%;
}

Expand Down Expand Up @@ -425,7 +427,7 @@ NESTED BLOCKS
}

[data-background-color="orange"] {
background-color: #faebdd;
background-color: #f6e9d9;
}

[data-background-color="yellow"] {
Expand Down
77 changes: 77 additions & 0 deletions packages/core/src/editor/defaultColors.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
export const COLORS_DEFAULT = {
gray: {
text: "#9b9a97",
background: "#ebeced",
},
brown: {
text: "#64473a",
background: "#e9e5e3",
},
red: {
text: "#e03e3e",
background: "#fbe4e4",
},
orange: {
text: "#d9730d",
background: "#f6e9d9",
},
yellow: {
text: "#dfab01",
background: "#fbf3db",
},
green: {
text: "#4d6461",
background: "#ddedea",
},
blue: {
text: "#0b6e99",
background: "#ddebf1",
},
purple: {
text: "#6940a5",
background: "#eae4f2",
},
pink: {
text: "#ad1a72",
background: "#f4dfeb",
},
};

export const COLORS_DARK_MODE_DEFAULT = {
gray: {
text: "#bebdb8",
background: "#9b9a97",
},
brown: {
text: "#8e6552",
background: "#64473a",
},
red: {
text: "#ec4040",
background: "#be3434",
},
orange: {
text: "#e3790d",
background: "#b7600a",
},
yellow: {
text: "#dfab01",
background: "#b58b00",
},
green: {
text: "#6b8b87",
background: "#4d6461",
},
blue: {
text: "#0e87bc",
background: "#0b6e99",
},
purple: {
text: "#8552d7",
background: "#6940a5",
},
pink: {
text: "#da208f",
background: "#ad1a72",
},
};
1 change: 1 addition & 0 deletions packages/core/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export * from "./blocks/defaultProps.js";
export * from "./editor/BlockNoteEditor.js";
export * from "./editor/BlockNoteExtensions.js";
export * from "./editor/BlockNoteSchema.js";
export * from "./editor/defaultColors.js";
export * from "./editor/selectionTypes.js";
export * from "./extensions-shared/UiElementPosition.js";
export * from "./extensions/FilePanel/FilePanelPlugin.js";
Expand Down
159 changes: 159 additions & 0 deletions packages/mantine/src/defaultThemes copy.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
import { Theme } from "./BlockNoteTheme.js";

export const defaultColorScheme = [
"#FFFFFF",
"#EFEFEF",
"#CFCFCF",
"#AFAFAF",
"#7F7F7F",
"#3F3F3F",
"#1F1F1F",
"#161616",
"#0F0F0F",
"#000000",
];

export const lightDefaultTheme = {
colors: {
editor: {
text: defaultColorScheme[5],
background: defaultColorScheme[0],
},
menu: {
text: defaultColorScheme[5],
background: defaultColorScheme[0],
},
tooltip: {
text: defaultColorScheme[5],
background: defaultColorScheme[1],
},
hovered: {
text: defaultColorScheme[5],
background: defaultColorScheme[1],
},
selected: {
text: defaultColorScheme[0],
background: defaultColorScheme[5],
},
disabled: {
text: defaultColorScheme[3],
background: defaultColorScheme[1],
},
shadow: defaultColorScheme[2],
border: defaultColorScheme[1],
sideMenu: defaultColorScheme[2],
highlights: {
gray: {
text: "#9b9a97",
background: "#ebeced",
},
brown: {
text: "#64473a",
background: "#e9e5e3",
},
red: {
text: "#e03e3e",
background: "#fbe4e4",
},
orange: {
text: "#d9730d",
background: "#f6e9d9",
},
yellow: {
text: "#dfab01",
background: "#fbf3db",
},
green: {
text: "#4d6461",
background: "#ddedea",
},
blue: {
text: "#0b6e99",
background: "#ddebf1",
},
purple: {
text: "#6940a5",
background: "#eae4f2",
},
pink: {
text: "#ad1a72",
background: "#f4dfeb",
},
},
},
borderRadius: 6,
fontFamily:
'"Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Open Sans", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
} satisfies Theme;

export const darkDefaultTheme = {
colors: {
editor: {
text: defaultColorScheme[2],
background: defaultColorScheme[6],
},
menu: {
text: defaultColorScheme[2],
background: defaultColorScheme[6],
},
tooltip: {
text: defaultColorScheme[2],
background: defaultColorScheme[7],
},
hovered: {
text: defaultColorScheme[2],
background: defaultColorScheme[7],
},
selected: {
text: defaultColorScheme[2],
background: defaultColorScheme[8],
},
disabled: {
text: defaultColorScheme[5],
background: defaultColorScheme[7],
},
shadow: defaultColorScheme[8],
border: defaultColorScheme[7],
sideMenu: defaultColorScheme[4],
highlights: {
gray: {
text: "#bebdb8",
background: "#9b9a97",
},
brown: {
text: "#8e6552",
background: "#64473a",
},
red: {
text: "#ec4040",
background: "#be3434",
},
orange: {
text: "#e3790d",
background: "#b7600a",
},
yellow: {
text: "#dfab01",
background: "#b58b00",
},
green: {
text: "#6b8b87",
background: "#4d6461",
},
blue: {
text: "#0e87bc",
background: "#0b6e99",
},
purple: {
text: "#8552d7",
background: "#6940a5",
},
pink: {
text: "#da208f",
background: "#ad1a72",
},
},
},
borderRadius: lightDefaultTheme.borderRadius,
fontFamily: lightDefaultTheme.fontFamily,
} satisfies Theme;
79 changes: 3 additions & 76 deletions packages/mantine/src/defaultThemes.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { COLORS_DARK_MODE_DEFAULT, COLORS_DEFAULT } from "@blocknote/core";
import { Theme } from "./BlockNoteTheme.js";

export const defaultColorScheme = [
Expand Down Expand Up @@ -42,44 +43,7 @@ export const lightDefaultTheme = {
shadow: defaultColorScheme[2],
border: defaultColorScheme[1],
sideMenu: defaultColorScheme[2],
highlights: {
gray: {
text: "#9b9a97",
background: "#ebeced",
},
brown: {
text: "#64473a",
background: "#e9e5e3",
},
red: {
text: "#e03e3e",
background: "#fbe4e4",
},
orange: {
text: "#d9730d",
background: "#f6e9d9",
},
yellow: {
text: "#dfab01",
background: "#fbf3db",
},
green: {
text: "#4d6461",
background: "#ddedea",
},
blue: {
text: "#0b6e99",
background: "#ddebf1",
},
purple: {
text: "#6940a5",
background: "#eae4f2",
},
pink: {
text: "#ad1a72",
background: "#f4dfeb",
},
},
highlights: COLORS_DEFAULT,
},
borderRadius: 6,
fontFamily:
Expand Down Expand Up @@ -115,44 +79,7 @@ export const darkDefaultTheme = {
shadow: defaultColorScheme[8],
border: defaultColorScheme[7],
sideMenu: defaultColorScheme[4],
highlights: {
gray: {
text: "#bebdb8",
background: "#9b9a97",
},
brown: {
text: "#8e6552",
background: "#64473a",
},
red: {
text: "#ec4040",
background: "#be3434",
},
orange: {
text: "#e3790d",
background: "#b7600a",
},
yellow: {
text: "#dfab01",
background: "#b58b00",
},
green: {
text: "#6b8b87",
background: "#4d6461",
},
blue: {
text: "#0e87bc",
background: "#0b6e99",
},
purple: {
text: "#8552d7",
background: "#6940a5",
},
pink: {
text: "#da208f",
background: "#ad1a72",
},
},
highlights: COLORS_DARK_MODE_DEFAULT,
},
borderRadius: lightDefaultTheme.borderRadius,
fontFamily: lightDefaultTheme.fontFamily,
Expand Down
Loading

0 comments on commit 381471c

Please sign in to comment.