fix color scheme

This commit is contained in:
Philipinho
2026-02-24 10:14:19 +00:00
parent 052b2042ff
commit 0cc3c6c68a
10 changed files with 11 additions and 49 deletions
@@ -135,7 +135,6 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Info")}
variant="subtle"
c="dark"
className={clsx({ [classes.active]: editorState?.isInfo })}
>
<IconInfoCircleFilled size={18} color="var(--mantine-color-blue-5)" />
@@ -148,7 +147,6 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Success")}
variant="subtle"
c="dark"
className={clsx({ [classes.active]: editorState?.isSuccess })}
>
<IconCircleCheckFilled size={18} color="var(--mantine-color-green-5)" />
@@ -161,7 +159,6 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Warning")}
variant="subtle"
c="dark"
className={clsx({ [classes.active]: editorState?.isWarning })}
>
<IconAlertTriangleFilled size={18} color="var(--mantine-color-orange-5)" />
@@ -174,7 +171,6 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Danger")}
variant="subtle"
c="dark"
className={clsx({ [classes.active]: editorState?.isDanger })}
>
<IconCircleXFilled size={18} color="var(--mantine-color-red-5)" />
@@ -189,7 +185,6 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
actionIconProps={{
size: "lg",
variant: "subtle",
c: "dark",
}}
/>
</div>
@@ -9,6 +9,17 @@
box-shadow: 0 2px 12px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.35));
}
.toolbar :global(.mantine-ActionIcon-root) {
--ai-color: light-dark(var(--mantine-color-dark-7), var(--mantine-color-gray-4)) !important;
--ai-hover: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5)) !important;
}
.toolbar .active {
--ai-color: light-dark(var(--mantine-color-blue-7), var(--mantine-color-blue-3)) !important;
--ai-hover: light-dark(var(--mantine-color-blue-0), var(--mantine-color-dark-5)) !important;
background-color: light-dark(var(--mantine-color-blue-0), var(--mantine-color-dark-5));
}
.divider {
width: 1px;
height: 16px;
@@ -16,8 +27,3 @@
margin: 0 2px;
background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-3));
}
.active {
background-color: light-dark(var(--mantine-color-blue-0), var(--mantine-color-dark-5));
color: light-dark(var(--mantine-color-blue-7), var(--mantine-color-blue-4));
}
@@ -200,7 +200,6 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Align left")}
variant="subtle"
c="dark"
className={clsx({ [classes.active]: editorState?.isAlignLeft })}
>
<IconLayoutAlignLeft size={18} />
@@ -213,7 +212,6 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Align center")}
variant="subtle"
c="dark"
className={clsx({ [classes.active]: editorState?.isAlignCenter })}
>
<IconLayoutAlignCenter size={18} />
@@ -226,7 +224,6 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Align right")}
variant="subtle"
c="dark"
className={clsx({ [classes.active]: editorState?.isAlignRight })}
>
<IconLayoutAlignRight size={18} />
@@ -241,7 +238,6 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Edit")}
variant="subtle"
c="dark"
>
<IconEdit size={18} />
</ActionIcon>
@@ -253,7 +249,6 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Download")}
variant="subtle"
c="dark"
>
<IconDownload size={18} />
</ActionIcon>
@@ -265,7 +260,6 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Delete")}
variant="subtle"
c="dark"
>
<IconTrash size={18} />
</ActionIcon>
@@ -234,7 +234,6 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Align left")}
variant="subtle"
c="dark"
className={clsx({
[classes.active]: editorState?.isAlignLeft,
})}
@@ -249,7 +248,6 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Align center")}
variant="subtle"
c="dark"
className={clsx({
[classes.active]: editorState?.isAlignCenter,
})}
@@ -264,7 +262,6 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Align right")}
variant="subtle"
c="dark"
className={clsx({
[classes.active]: editorState?.isAlignRight,
})}
@@ -281,7 +278,6 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Edit")}
variant="subtle"
c="dark"
>
<IconEdit size={18} />
</ActionIcon>
@@ -293,7 +289,6 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Download")}
variant="subtle"
c="dark"
>
<IconDownload size={18} />
</ActionIcon>
@@ -305,7 +300,6 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Delete")}
variant="subtle"
c="dark"
>
<IconTrash size={18} />
</ActionIcon>
@@ -155,7 +155,6 @@ export function ImageMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Align left")}
variant="subtle"
c="dark"
className={clsx({ [classes.active]: editorState?.isAlignLeft })}
>
<IconLayoutAlignLeft size={18} />
@@ -168,7 +167,6 @@ export function ImageMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Align center")}
variant="subtle"
c="dark"
className={clsx({ [classes.active]: editorState?.isAlignCenter })}
>
<IconLayoutAlignCenter size={18} />
@@ -181,7 +179,6 @@ export function ImageMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Align right")}
variant="subtle"
c="dark"
className={clsx({ [classes.active]: editorState?.isAlignRight })}
>
<IconLayoutAlignRight size={18} />
@@ -196,7 +193,6 @@ export function ImageMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Download")}
variant="subtle"
c="dark"
>
<IconDownload size={18} />
</ActionIcon>
@@ -208,7 +204,6 @@ export function ImageMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Replace image")}
variant="subtle"
c="dark"
>
<IconRefresh size={18} />
</ActionIcon>
@@ -220,7 +215,6 @@ export function ImageMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Delete")}
variant="subtle"
c="dark"
>
<IconTrash size={18} />
</ActionIcon>
@@ -96,7 +96,6 @@ export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
<Tooltip label={t("Background color")} withArrow>
<ActionIcon
variant="subtle"
c="dark"
size="lg"
aria-label={t("Background color")}
onClick={() => setOpened(!opened)}
@@ -80,7 +80,6 @@ export const TableCellMenu = React.memo(
<ActionIcon
onClick={mergeCells}
variant="subtle"
c="dark"
size="lg"
aria-label={t("Merge cells")}
>
@@ -92,7 +91,6 @@ export const TableCellMenu = React.memo(
<ActionIcon
onClick={splitCell}
variant="subtle"
c="dark"
size="lg"
aria-label={t("Split cell")}
>
@@ -106,7 +104,6 @@ export const TableCellMenu = React.memo(
<ActionIcon
onClick={deleteColumn}
variant="subtle"
c="dark"
size="lg"
aria-label={t("Delete column")}
>
@@ -118,7 +115,6 @@ export const TableCellMenu = React.memo(
<ActionIcon
onClick={deleteRow}
variant="subtle"
c="dark"
size="lg"
aria-label={t("Delete row")}
>
@@ -132,7 +128,6 @@ export const TableCellMenu = React.memo(
<ActionIcon
onClick={toggleHeaderCell}
variant="subtle"
c="dark"
size="lg"
aria-label={t("Toggle header cell")}
>
@@ -124,7 +124,6 @@ export const TableMenu = React.memo(
<ActionIcon
onClick={addColumnLeft}
variant="subtle"
c="dark"
size="lg"
aria-label={t("Add left column")}
>
@@ -136,7 +135,6 @@ export const TableMenu = React.memo(
<ActionIcon
onClick={addColumnRight}
variant="subtle"
c="dark"
size="lg"
aria-label={t("Add right column")}
>
@@ -148,7 +146,6 @@ export const TableMenu = React.memo(
<ActionIcon
onClick={deleteColumn}
variant="subtle"
c="dark"
size="lg"
aria-label={t("Delete column")}
>
@@ -162,7 +159,6 @@ export const TableMenu = React.memo(
<ActionIcon
onClick={addRowAbove}
variant="subtle"
c="dark"
size="lg"
aria-label={t("Add row above")}
>
@@ -174,7 +170,6 @@ export const TableMenu = React.memo(
<ActionIcon
onClick={addRowBelow}
variant="subtle"
c="dark"
size="lg"
aria-label={t("Add row below")}
>
@@ -186,7 +181,6 @@ export const TableMenu = React.memo(
<ActionIcon
onClick={deleteRow}
variant="subtle"
c="dark"
size="lg"
aria-label={t("Delete row")}
>
@@ -200,7 +194,6 @@ export const TableMenu = React.memo(
<ActionIcon
onClick={toggleHeaderRow}
variant="subtle"
c="dark"
size="lg"
aria-label={t("Toggle header row")}
>
@@ -212,7 +205,6 @@ export const TableMenu = React.memo(
<ActionIcon
onClick={toggleHeaderColumn}
variant="subtle"
c="dark"
size="lg"
aria-label={t("Toggle header column")}
>
@@ -226,7 +218,6 @@ export const TableMenu = React.memo(
<ActionIcon
onClick={deleteTable}
variant="subtle"
c="dark"
size="lg"
aria-label={t("Delete table")}
>
@@ -89,7 +89,6 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
<Tooltip label={t("Text alignment")} withArrow>
<ActionIcon
variant="subtle"
c="dark"
size="lg"
aria-label={t("Text alignment")}
onClick={() => setOpened(!opened)}
@@ -131,7 +131,6 @@ export function VideoMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Align left")}
variant="subtle"
c="dark"
className={clsx({ [classes.active]: editorState?.isAlignLeft })}
>
<IconLayoutAlignLeft size={18} />
@@ -144,7 +143,6 @@ export function VideoMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Align center")}
variant="subtle"
c="dark"
className={clsx({ [classes.active]: editorState?.isAlignCenter })}
>
<IconLayoutAlignCenter size={18} />
@@ -157,7 +155,6 @@ export function VideoMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Align right")}
variant="subtle"
c="dark"
className={clsx({ [classes.active]: editorState?.isAlignRight })}
>
<IconLayoutAlignRight size={18} />
@@ -172,7 +169,6 @@ export function VideoMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Download")}
variant="subtle"
c="dark"
>
<IconDownload size={18} />
</ActionIcon>
@@ -184,7 +180,6 @@ export function VideoMenu({ editor }: EditorMenuProps) {
size="lg"
aria-label={t("Delete")}
variant="subtle"
c="dark"
>
<IconTrash size={18} />
</ActionIcon>