refactor(editor): Color palette updates, introduce dark mode (#6980)

Github issue / Community forum post (link here to close automatically):

---------

Co-authored-by: Mutasem <mutdmour@gmail.com>
This commit is contained in:
Giulio Andreini
2023-11-01 13:33:36 +01:00
committed by GitHub
parent b72040aa54
commit 0746783e02
81 changed files with 1694 additions and 1318 deletions

View File

@@ -93,6 +93,9 @@ export default defineComponent({
border: var(--border-width-base) var(--border-style-base);
align-items: center;
line-height: var(--font-line-height-loose);
border-color: var(--color-callout-info-border);
background-color: var(--color-callout-info-background);
color: var(--color-callout-info-font);
&.slim {
line-height: var(--font-line-height-loose);
@@ -111,27 +114,43 @@ export default defineComponent({
.info,
.custom {
border-color: var(--color-foreground-base);
background-color: var(--color-foreground-xlight);
color: var(--color-info);
}
border-color: var(--color-callout-info-border);
background-color: var(--color-callout-info-background);
color: var(--color-callout-info-font);
.warning {
border-color: var(--color-warning-tint-1);
background-color: var(--color-warning-tint-2);
color: var(--color-warning);
.icon {
color: var(--color-callout-info-icon);
}
}
.success {
border-color: var(--color-success-tint-1);
background-color: var(--color-success-tint-2);
color: var(--color-success);
border-color: var(--color-callout-success-border);
background-color: var(--color-callout-success-background);
color: var(--color-callout-success-font);
.icon {
color: var(--color-callout-success-icon);
}
}
.warning {
border-color: var(--color-callout-warning-border);
background-color: var(--color-callout-warning-background);
color: var(--color-callout-warning-font);
.icon {
color: var(--color-callout-warning-icon);
}
}
.danger {
border-color: var(--color-danger-tint-1);
background-color: var(--color-danger-tint-2);
color: var(--color-danger);
border-color: var(--color-callout-danger-border);
background-color: var(--color-callout-danger-background);
color: var(--color-callout-danger-font);
.icon {
color: var(--color-callout-danger-icon);
}
}
.icon {
@@ -142,8 +161,12 @@ export default defineComponent({
.secondary {
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-bold);
color: var(--color-secondary);
background-color: var(--color-secondary-tint-3);
border-color: var(--color-secondary-tint-1);
border-color: var(--color-callout-secondary-border);
background-color: var(--color-callout-secondary-background);
color: var(--color-callout-secondary-font);
.icon {
color: var(--color-callout-secondary-icon);
}
}
</style>