github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add theme-selector (#20413)

Browse Source 
* Enable theme fields

* Start adding more default themes

* WIP add theme selector interface

* Restructure, add rules-to-vars util

* Render used vars in local overrides

* Use local theme vars in theme preview

* Render theme option full-width

* Add more test colors

* Only override used variables

* Fix rendering bugs in preview

* Remove test theme

* Add small border to preview

* Add organic theme

* Add changeset

* Don't crash color interface on complex input bg

* Use themable color for disabled input

* Use nav-sidebar theme in v-drawer

* Use border width from the theme in panels

* Use theme border width for panel borders

* Use page background for panel edit buttons

* Fix Active state forselected panel

* Don't use primary for logout hover state

* Fix background color of item duplication fields

* Use form border/background in v-list block

* Use theme border width in hardcoded 2px sections

* fix chip padding

* Rename background-page to background,

rename background to background-normal

* Fix search input styling

* Tweak search input themability

* update icons

* Add border on sidebar section content

* Add color match, start on minimal

* Organize import

* Adjust spacing

* Ignore stylesheet files

* Ignore svg as well

---------

Co-authored-by: Ben Haynes <ben@rngr.org>
Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>
This commit is contained in:
Rijk van Zanten
2023-11-14 13:43:43 -05:00
committed by GitHub
parent b9532cabe3
commit 4396ee5166
181 changed files with 950 additions and 547 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.changeset/eleven-dingos-clap.md Normal file
View File

@@ -0,0 +1,7 @@
---
'@directus/themes': minor
'@directus/api': minor
'@directus/app': minor
---
Added theme-selector interface to settings and users

3
.eslintignore
View File

@@ -10,3 +10,6 @@ dist/
*.yaml
*.md
*.json
*.scss
*.css
*.svg

2
api/src/database/system-data/fields/settings.yaml
View File

@@ -115,7 +115,6 @@ fields:
options:
appearance: light
group: theming_group
hidden: true
- field: theme_light_overrides
width: full
@@ -130,7 +129,6 @@ fields:
options:
appearance: dark
group: theming_group
hidden: true
- field: theme_dark_overrides
width: full

16
api/src/database/system-data/fields/users.yaml
View File

@@ -115,18 +115,10 @@ fields:
width: half
- field: theme_light
width: half
width: full
interface: system-theme
options:
appearance: light
hidden: true
- field: theme_dark
width: half
interface: system-theme
options:
appearance: dark
hidden: true
- field: theme_light_overrides
width: full
@@ -134,6 +126,12 @@ fields:
special:
- cast-json
- field: theme_dark
width: full
interface: system-theme
options:
appearance: dark
- field: theme_dark_overrides
width: full
interface: system-theme-overrides

2
app/src/components/transition/transition-bounce.stories.ts
View File

@@ -13,7 +13,7 @@ const Template = (args) => ({
return { args };
},
template:
'<v-hover v-slot="{ hover }">Hover me!<transition-bounce v-bind="args" v-on="args"><div v-if="hover" style="background-color: var(--theme--background); height: 200px; width: 400px; display: flex; justify-content: center; align-items: center">This is only shown on hover.</div></transition-bounce></v-hover>',
'<v-hover v-slot="{ hover }">Hover me!<transition-bounce v-bind="args" v-on="args"><div v-if="hover" style="background-color: var(--theme--background-normal); height: 200px; width: 400px; display: flex; justify-content: center; align-items: center">This is only shown on hover.</div></transition-bounce></v-hover>',
});
export const Primary = Template.bind({});

2
app/src/components/transition/transition-dialog.stories.ts
View File

@@ -13,7 +13,7 @@ const Template = (args) => ({
return { args };
},
template:
'<v-hover v-slot="{ hover }">Hover me!<transition-dialog v-bind="args" v-on="args"><div v-if="hover" style="background-color: var(--theme--background); height: 200px; width: 400px; display: flex; justify-content: center; align-items: center">This is only shown on hover.</div></transition-dialog></v-hover>',
'<v-hover v-slot="{ hover }">Hover me!<transition-dialog v-bind="args" v-on="args"><div v-if="hover" style="background-color: var(--theme--background-normal); height: 200px; width: 400px; display: flex; justify-content: center; align-items: center">This is only shown on hover.</div></transition-dialog></v-hover>',
});
export const Primary = Template.bind({});

2
app/src/components/transition/transition-expand.stories.ts
View File

@@ -13,7 +13,7 @@ const Template = (args) => ({
return { args };
},
template:
'<v-hover v-slot="{ hover }">Hover me!<transition-expand v-bind="args" v-on="args"><div v-if="hover" style="background-color: var(--theme--background); height: 200px; width: 400px; display: flex; justify-content: center; align-items: center">This is only shown on hover.</div></transition-expand></v-hover>',
'<v-hover v-slot="{ hover }">Hover me!<transition-expand v-bind="args" v-on="args"><div v-if="hover" style="background-color: var(--theme--background-normal); height: 200px; width: 400px; display: flex; justify-content: center; align-items: center">This is only shown on hover.</div></transition-expand></v-hover>',
});
export const Primary = Template.bind({});

4
app/src/components/v-avatar.vue
View File

@@ -32,7 +32,7 @@ const sizeClass = useSizeClass(props);
Available Variables:
--v-avatar-color [var(--theme--background)]
--v-avatar-color [var(--theme--background-normal)]
--v-avatar-size [48px]
*/
@@ -48,7 +48,7 @@ const sizeClass = useSizeClass(props);
color: var(--theme--foreground-subdued);
white-space: nowrap;
text-overflow: ellipsis;
background-color: var(--v-avatar-color, var(--theme--background));
background-color: var(--v-avatar-color, var(--theme--background-normal));
border-radius: var(--theme--border-radius);
}

10
app/src/components/v-badge.vue
View File

@@ -41,7 +41,7 @@ withDefaults(
--v-badge-color [var(--white)]
--v-badge-background-color [var(--red)]
--v-badge-border-color [var(--theme--background-page)]
--v-badge-border-color [var(--theme--background)]
--v-badge-offset-x [0px]
--v-badge-offset-y [0px]
--v-badge-size [16px]
@@ -89,10 +89,10 @@ withDefaults(
}
&.bordered {
filter: drop-shadow(1.5px 1.5px 0 var(--v-badge-border-color, var(--theme--background-page)))
drop-shadow(1.5px -1.5px 0 var(--v-badge-border-color, var(--theme--background-page)))
drop-shadow(-1.5px 1.5px 0 var(--v-badge-border-color, var(--theme--background-page)))
drop-shadow(-1.5px -1.5px 0 var(--v-badge-border-color, var(--theme--background-page)));
filter: drop-shadow(1.5px 1.5px 0 var(--v-badge-border-color, var(--theme--background)))
drop-shadow(1.5px -1.5px 0 var(--v-badge-border-color, var(--theme--background)))
drop-shadow(-1.5px 1.5px 0 var(--v-badge-border-color, var(--theme--background)))
drop-shadow(-1.5px -1.5px 0 var(--v-badge-border-color, var(--theme--background)));
}
&.dot {

12
app/src/components/v-button.vue
View File

@@ -190,7 +190,7 @@ async function onClick(event: MouseEvent) {
--v-button-background-color [var(--theme--primary)]
--v-button-background-color-hover [var(--theme--primary-accent)]
--v-button-background-color-active [var(--theme--primary)]
--v-button-background-color-disabled [var(--theme--background)]
--v-button-background-color-disabled [var(--theme--background-normal)]
--v-button-font-size [16px]
--v-button-font-weight [600]
--v-button-line-height [22px]
@@ -234,14 +234,14 @@ async function onClick(event: MouseEvent) {
--v-button-color: var(--theme--foreground);
--v-button-color-hover: var(--theme--foreground);
--v-button-color-active: var(--theme--foreground);
--v-button-background-color: var(--theme--background);
--v-button-background-color: var(--theme--background-normal);
--v-button-background-color-hover: var(--theme--background-accent);
--v-button-background-color-active: var(--theme--background-accent);
}
.secondary.rounded {
--v-button-background-color: var(--theme--background);
--v-button-background-color-active: var(--theme--background);
--v-button-background-color: var(--theme--background-normal);
--v-button-background-color-active: var(--theme--background-normal);
--v-button-background-color-hover: var(--theme--background-accent);
}
@@ -315,8 +315,8 @@ async function onClick(event: MouseEvent) {
.button:disabled {
color: var(--v-button-color-disabled, var(--theme--foreground-subdued));
background-color: var(--v-button-background-color-disabled, var(--theme--background));
border: var(--theme--border-width) solid var(--v-button-background-color-disabled, var(--theme--background));
background-color: var(--v-button-background-color-disabled, var(--theme--background-normal));
border: var(--theme--border-width) solid var(--v-button-background-color-disabled, var(--theme--background-normal));
cursor: not-allowed;
}

4
app/src/components/v-card.vue
View File

@@ -25,7 +25,7 @@ withDefaults(defineProps<Props>(), {
--v-card-min-width [none]
--v-card-padding [16px]
--v-card-background-color [var(--background-subdued)]
--v-card-background-color [var(--theme--form--field--input--background-subdued)]
*/
@@ -43,7 +43,7 @@ withDefaults(defineProps<Props>(), {
/* Page Content Spacing */
font-size: 15px;
line-height: 24px;
background-color: var(--v-card-background-color, var(--background-subdued));
background-color: var(--v-card-background-color, var(--theme--form--field--input--background-subdued));
border-radius: var(--theme--border-radius);
& > :first-child {

5
app/src/components/v-checkbox.vue
View File

@@ -175,13 +175,13 @@ function toggleInput(): void {
width: 100%;
height: var(--input-height);
padding: 10px; // 14 - 4 (border)
background-color: var(--theme--background-page);
background-color: var(--theme--form--field--input--background);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
transition: all var(--fast) var(--transition);
&:disabled {
background-color: var(--background-subdued);
background-color: var(--theme--form--field--input--background-subdued);
}
&::before {
@@ -206,7 +206,6 @@ function toggleInput(): void {
}
&.block {
background-color: var(--background-subdued);
border-color: var(--theme--form--field--input--border-color-hover);
}
}

18
app/src/components/v-chip.vue
View File

@@ -85,7 +85,7 @@ function onCloseClick(event: MouseEvent) {
Available Variables:
--v-chip-color [var(--theme--foreground)]
--v-chip-background-color [var(--theme--background)]
--v-chip-background-color [var(--theme--background-normal)]
--v-chip-color-hover [var(--white)]
--v-chip-background-color-hover [var(--theme--primary-accent)]
--v-chip-close-color [var(--theme--danger)]
@@ -102,8 +102,8 @@ function onCloseClick(event: MouseEvent) {
color: var(--v-chip-color, var(--theme--foreground));
font-weight: var(--weight-normal);
line-height: 22px;
background-color: var(--v-chip-background-color, var(--theme--background));
border: var(--theme--border-width) solid var(--v-chip-background-color, var(--theme--background));
background-color: var(--v-chip-background-color, var(--theme--background-normal));
border: var(--theme--border-width) solid var(--v-chip-background-color, var(--theme--background-normal));
border-radius: 16px;
&.clickable:hover {
@@ -119,13 +119,13 @@ function onCloseClick(event: MouseEvent) {
&.disabled {
color: var(--v-chip-color, var(--theme--foreground));
background-color: var(--v-chip-background-color, var(--theme--background));
border-color: var(--v-chip-background-color, var(--theme--background));
background-color: var(--v-chip-background-color, var(--theme--background-normal));
border-color: var(--v-chip-background-color, var(--theme--background-normal));
&.clickable:hover {
color: var(--v-chip-color, var(--theme--foreground));
background-color: var(--v-chip-background-color, var(--theme--background));
border-color: var(--v-chip-background-color, var(--theme--background));
background-color: var(--v-chip-background-color, var(--theme--background-normal));
border-color: var(--v-chip-background-color, var(--theme--background-normal));
}
}
@@ -138,7 +138,7 @@ function onCloseClick(event: MouseEvent) {
&.small {
height: 24px;
padding: 0 4px;
padding: 0 8px;
font-size: 14px;
border-radius: 12px;
}
@@ -179,7 +179,7 @@ function onCloseClick(event: MouseEvent) {
border-radius: 10px;
.close {
--v-icon-color: var(--v-chip-background-color, var(--theme--background));
--v-icon-color: var(--v-chip-background-color, var(--theme--background-normal));
}
&.disabled {

2
app/src/components/v-dialog.vue
View File

@@ -121,7 +121,7 @@ function nudge() {
.container :slotted(.v-card) {
--v-card-min-width: calc(100vw - 40px);
--v-card-padding: 28px;
--v-card-background-color: var(--theme--background-page);
--v-card-background-color: var(--theme--background);
}
.container :slotted(.v-card) .v-card-title {

26
app/src/components/v-drawer.vue
View File

@@ -139,7 +139,7 @@ const internalActive = computed({
width: 100%;
max-width: 856px;
height: 100%;
background-color: var(--theme--background-page);
background-color: var(--theme--background);
.cancel {
display: none;
@@ -157,9 +157,9 @@ const internalActive = computed({
}
.header-icon {
--v-button-background-color: var(--theme--background);
--v-button-background-color-active: var(--theme--background);
--v-button-background-color-hover: var(--theme--background);
--v-button-background-color: var(--theme--background-normal);
--v-button-background-color-active: var(--theme--background-normal);
--v-button-background-color-hover: var(--theme--background-normal);
--v-button-color-disabled: var(--theme--foreground);
}
@@ -189,10 +189,24 @@ const internalActive = computed({
flex-shrink: 0;
width: 220px;
height: 100%;
background-color: var(--theme--background);
background: var(--theme--navigation--background);
border-right: var(--theme--navigation--border-width) solid var(--theme--navigation--border-color);
}
.sidebar-content {
--v-list-item-color: var(--theme--navigation--list--foreground);
--v-list-item-color-hover: var(--theme--navigation--list--foreground-hover);
--v-list-item-color-active: var(--theme--navigation--list--foreground-active);
--v-list-item-icon-color: var(--theme--navigation--list--icon--foreground);
--v-list-item-icon-color-hover: var(--theme--navigation--list--icon--foreground-hover);
--v-list-item-icon-color-active: var(--theme--navigation--list--icon--foreground-active);
--v-list-item-background-color: var(--theme--navigation--list--background);
--v-list-item-background-color-hover: var(--theme--navigation--list--background-hover);
--v-list-item-background-color-active: var(--theme--navigation--list--background-active);
--v-divider-color: var(--theme--navigation--list--divider--border-color);
--v-divider-thickness: var(--theme--navigation--list--divider--border-width);
height: 100%;
overflow-x: hidden;
overflow-y: auto;
@@ -239,7 +253,7 @@ const internalActive = computed({
margin: var(--content-padding);
nav {
background-color: var(--background-subdued);
background-color: var(--theme--background-subdued);
border-radius: var(--theme--border-radius);
}

6
app/src/components/v-fancy-select.vue
View File

@@ -98,8 +98,8 @@ function toggle(item: Record<string, any>) {
width: 100%;
margin-bottom: 8px;
padding: 12px;
background-color: var(--theme--background);
border: var(--theme--border-width) solid var(--theme--background);
background-color: var(--theme--background-normal);
border: var(--theme--border-width) solid var(--theme--background-normal);
border-radius: 6px;
backface-visibility: hidden;
cursor: pointer;
@@ -122,7 +122,7 @@ function toggle(item: Record<string, any>) {
width: 44px;
height: 44px;
margin-right: 12px;
background-color: var(--theme--background-page);
background-color: var(--theme--background);
border-radius: 50%;
}

4
app/src/components/v-icon-file.vue
View File

@@ -20,7 +20,7 @@ defineProps<Props>();
Available Variables:
--v-icon-file-color [var(--theme--primary)]
--v-icon-file-background-color [var(--theme--background)]
--v-icon-file-background-color [var(--theme--background-normal)]
*/
@@ -45,7 +45,7 @@ defineProps<Props>();
&.right {
.label {
background-color: var(--v-icon-file-background-color, var(--theme--background));
background-color: var(--v-icon-file-background-color, var(--theme--background-normal));
left: calc(100% - 12px - 3ch);
text-align: left;
transform: none;

2
app/src/components/v-info.vue
View File

@@ -50,7 +50,7 @@ withDefaults(defineProps<Props>(), {
.info .icon {
color: var(--theme--foreground-subdued);
background-color: var(--theme--background);
background-color: var(--theme--background-normal);
}
.success .icon {

2
app/src/components/v-input.vue
View File

@@ -380,7 +380,7 @@ function stepDown() {
--arrow-color: var(--v-input-border-color);
color: var(--theme--foreground-subdued);
background-color: var(--background-subdued);
background-color: var(--theme--form--field--input--background-subdued);
border-color: var(--v-input-border-color, var(--theme--form--field--input--border-color));
}

27
app/src/components/v-list-item.vue
View File

@@ -146,9 +146,9 @@ function onClick(event: PointerEvent) {
--v-list-item-color [var(--v-list-color, var(--theme--foreground))]
--v-list-item-color-hover [var(--v-list-color-hover, var(--theme--foreground))]
--v-list-item-color-active [var(--v-list-color-active, var(--theme--foreground))]
--v-list-item-background-color [var(--v-list-background-color, var(--theme--background))]
--v-list-item-background-color-hover [var(--v-list-background-color-hover, var(--theme--background))]
--v-list-item-background-color-active [var(--v-list-background-color-active, var(--theme--background))]
--v-list-item-background-color [var(--v-list-background-color, var(--theme--background-normal))]
--v-list-item-background-color-hover [var(--v-list-background-color-hover, var(--theme--background-normal))]
--v-list-item-background-color-active [var(--v-list-background-color-active, var(--theme--background-normal))]
*/
@@ -184,7 +184,7 @@ function onClick(event: PointerEvent) {
left: 0;
width: calc(100% - 4px);
height: calc(100% - 4px);
border: 2px dashed var(--theme--form--field--input--border-color);
border: var(--theme--border-width) dashed var(--theme--form--field--input--border-color);
content: '';
pointer-events: none;
}
@@ -201,7 +201,7 @@ function onClick(event: PointerEvent) {
color: var(--v-list-item-color-hover, var(--v-list-color-hover, var(--theme--foreground)));
background-color: var(
--v-list-item-background-color-hover,
var(--v-list-background-color-hover, var(--theme--background))
var(--v-list-background-color-hover, var(--theme--background-normal))
);
&.active {
@@ -211,7 +211,7 @@ function onClick(event: PointerEvent) {
);
background-color: var(
--v-list-item-background-color-active-hover,
var(--v-list-item-background-color-hover, var(--v-list-background-color-hover, var(--theme--background)))
var(--v-list-item-background-color-hover, var(--v-list-background-color-hover, var(--theme--background-normal)))
);
}
}
@@ -221,7 +221,7 @@ function onClick(event: PointerEvent) {
color: var(--v-list-item-color-active, var(--v-list-color-active, var(--theme--foreground)));
background-color: var(
--v-list-item-background-color-active,
var(--v-list-background-color-active, var(--theme--background))
var(--v-list-background-color-active, var(--theme--background-normal))
);
}
}
@@ -231,7 +231,7 @@ function onClick(event: PointerEvent) {
color: var(--v-list-item-color-active, var(--v-list-color-active, var(--theme--foreground)));
background-color: var(
--v-list-item-background-color-active,
var(--v-list-background-color-active, var(--theme--background))
var(--v-list-background-color-active, var(--theme--background-normal))
);
}
@@ -255,9 +255,10 @@ function onClick(event: PointerEvent) {
}
&.block {
--v-list-item-border-color: var(--theme--border-color-subdued);
--v-list-item-background-color: var(--theme--background-page);
--v-list-item-background-color-hover: var(--card-face-color);
--v-list-item-border-color: var(--theme--form--field--input--border-color);
--v-list-item-border-color-hover: var(--theme--form--field--input--border-color-hover);
--v-list-item-background-color: var(--theme--form--field--input--background);
--v-list-item-background-color-hover: var(--theme--form--field--input--background);
--v-icon-color: var(--theme--foreground-subdued);
position: relative;
@@ -265,7 +266,7 @@ function onClick(event: PointerEvent) {
height: var(--input-height);
margin: 0;
padding: 8px var(--input-padding);
background-color: var(--v-list-item-background-color, var(--v-list-background-color, var(--theme--background)));
background-color: var(--v-list-item-background-color, var(--v-list-background-color, var(--theme--background-normal)));
border: var(--theme--border-width) solid var(--v-list-item-border-color, var(--theme--border-color-subdued));
border-radius: var(--theme--border-radius);
transition: border-color var(--fast) var(--transition);
@@ -289,7 +290,7 @@ function onClick(event: PointerEvent) {
&.clickable:hover {
background-color: var(
--v-list-item-background-color-hover,
var(--v-list-background-color-hover, var(--theme--background))
var(--v-list-background-color-hover, var(--theme--background-normal))
);
border: var(--theme--border-width) solid
var(--v-list-item-border-color-hover, var(--theme--form--field--input--border-color-hover));

4
app/src/components/v-list.vue
View File

@@ -69,8 +69,8 @@ useGroupableParent(
--v-list-color-hover [var(--theme--foreground-accent)]
--v-list-color-active [var(--theme--foreground-accent)]
--v-list-background-color [transparent]
--v-list-background-color-hover [var(--theme--background)]
--v-list-background-color-active [var(--theme--background)]
--v-list-background-color-hover [var(--theme--background-normal)]
--v-list-background-color-active [var(--theme--background-normal)]
*/

16
app/src/components/v-notice.vue
View File

@@ -48,8 +48,8 @@ const iconName = computed(() => {
Available Variables:
--v-notice-color [var(--theme--foreground-subdued)]
--v-notice-background-color [var(--background-subdued)]
--v-notice-border-color [var(--background-subdued)]
--v-notice-background-color [var(--theme--form--field--input--background-subdued)]
--v-notice-border-color [var(--theme--form--field--input--background-subdued)]
--v-notice-icon-color [var(--theme--foreground-subdued)]
*/
@@ -64,7 +64,7 @@ const iconName = computed(() => {
padding: 12px 16px;
color: var(--v-notice-color, var(--theme--foreground-subdued));
line-height: 22px;
background-color: var(--v-notice-background-color, var(--background-subdued));
background-color: var(--v-notice-background-color, var(--theme--form--field--input--background-subdued));
border-radius: var(--theme--border-radius);
overflow: hidden;
}
@@ -77,7 +77,7 @@ const iconName = computed(() => {
left: 0;
width: 4px;
height: 100%;
background-color: var(--v-notice-border-color, var(--background-subdued));
background-color: var(--v-notice-border-color, var(--theme--form--field--input--background-subdued));
}
.v-icon {
@@ -92,28 +92,28 @@ const iconName = computed(() => {
--v-notice-icon-color: var(--theme--primary);
--v-notice-border-color: var(--theme--primary);
--v-notice-color: var(--theme--foreground);
--v-notice-background-color: var(--theme--background);
--v-notice-background-color: var(--theme--background-normal);
}
.success {
--v-notice-icon-color: var(--theme--success);
--v-notice-border-color: var(--theme--success);
--v-notice-color: var(--theme--success);
--v-notice-background-color: var(--theme--background);
--v-notice-background-color: var(--theme--background-normal);
}
.warning {
--v-notice-icon-color: var(--theme--warning);
--v-notice-border-color: var(--theme--warning);
--v-notice-color: var(--theme--foreground);
--v-notice-background-color: var(--theme--background);
--v-notice-background-color: var(--theme--background-normal);
}
.danger {
--v-notice-icon-color: var(--theme--danger);
--v-notice-border-color: var(--theme--danger);
--v-notice-color: var(--theme--danger);
--v-notice-background-color: var(--theme--background);
--v-notice-background-color: var(--theme--background-normal);
}
.center {

4
app/src/components/v-pagination.vue
View File

@@ -159,8 +159,8 @@ function toPage(page: number) {
}
.v-button {
--v-button-background-color-hover: var(--theme--background);
--v-button-background-color: var(--background-subdued);
--v-button-background-color-hover: var(--theme--background-normal);
--v-button-background-color: var(--theme--form--field--input--background-subdued);
--v-button-color: var(--theme--foreground);
margin: 0 2px;

4
app/src/components/v-radio.vue
View File

@@ -106,7 +106,7 @@ function emitValue(): void {
width: 100%;
height: var(--input-height);
padding: calc(14px - 2 * var(--theme--border-width));
border: var(--theme--border-width) solid var(--background-subdued);
border: var(--theme--border-width) solid var(--theme--form--field--input--background-subdued);
border-radius: var(--theme--border-radius);
&::before {
@@ -115,7 +115,7 @@ function emitValue(): void {
left: 0;
width: 100%;
height: 100%;
background-color: var(--background-subdued);
background-color: var(--theme--form--field--input--background-subdued);
border-radius: var(--theme--border-radius);
content: '';
}

2
app/src/components/v-select/v-select.vue
View File

@@ -421,7 +421,7 @@ function useDisplayValue() {
padding: 4px 8px;
padding-right: 26px;
color: var(--theme--foreground-subdued);
background-color: var(--background-subdued);
background-color: var(--theme--form--field--input--background-subdued);
border-radius: var(--theme--border-radius);
transition: color var(--fast) var(--transition);

4
app/src/components/v-sheet.vue
View File

@@ -9,7 +9,7 @@
Available Variables:
--v-sheet-background-color [var(--background-subdued)]
--v-sheet-background-color [var(--theme--form--field--input--background-subdued)]
--v-sheet-height [auto]
--v-sheet-min-height [var(--input-height)]
--v-sheet-max-height [none]
@@ -29,7 +29,7 @@
max-height: var(--v-sheet-max-height, none);
padding: var(--v-sheet-padding, 8px);
overflow: auto;
background-color: var(--v-sheet-background-color, var(--background-subdued));
background-color: var(--v-sheet-background-color, var(--theme--form--field--input--background-subdued));
border-radius: var(--theme--border-radius);
}
</style>

8
app/src/components/v-skeleton-loader.vue
View File

@@ -23,7 +23,7 @@ withDefaults(defineProps<Props>(), {
Available Variables:
--v-skeleton-loader-background-color [var(--background-subdued)]
--v-skeleton-loader-background-color [var(--theme--form--field--input--background-subdued)]
*/
@@ -36,7 +36,7 @@ withDefaults(defineProps<Props>(), {
@mixin loader {
position: relative;
overflow: hidden;
background-color: var(--v-skeleton-loader-background-color, var(--background-subdued));
background-color: var(--v-skeleton-loader-background-color, var(--theme--form--field--input--background-subdued));
&::after {
position: absolute;
@@ -45,7 +45,7 @@ withDefaults(defineProps<Props>(), {
left: 0;
z-index: 1;
height: 100%;
background: linear-gradient(90deg, transparent, var(--theme--background-page), transparent);
background: linear-gradient(90deg, transparent, var(--theme--background), transparent);
transform: translateX(-100%);
opacity: 0.5;
animation: loading 1.5s infinite;
@@ -63,7 +63,7 @@ withDefaults(defineProps<Props>(), {
.input-tall {
width: 100%;
height: var(--input-height);
border: var(--theme--border-width) solid var(--v-skeleton-loader-background-color, var(--background-subdued));
border: var(--theme--border-width) solid var(--v-skeleton-loader-background-color, var(--theme--form--field--input--background-subdued));
border-radius: var(--theme--border-radius);
@include loader;

4
app/src/components/v-slider.vue
View File

@@ -122,7 +122,7 @@ function onInput(event: Event) {
width: 100%;
height: 4px;
padding: 8px 0;
background-color: var(--theme--background-page);
background-color: var(--theme--background);
background-image: var(--v-slider-track-background-image);
border-radius: 10px;
cursor: pointer;
@@ -150,7 +150,7 @@ function onInput(event: Event) {
width: 8px;
height: 8px;
margin-top: -2px;
background: var(--theme--background-page);
background: var(--theme--background);
border: none;
border-radius: 50%;
box-shadow: none;

4
app/src/components/v-tab.vue
View File

@@ -40,13 +40,13 @@ function onClick() {
color: var(--theme--foreground-subdued);
font-weight: 500;
font-size: 14px;
background-color: var(--theme--background-page);
background-color: var(--theme--background);
transition: color var(--fast) var(--transition);
&:hover,
&.active {
color: var(--theme--foreground);
background-color: var(--theme--background-page);
background-color: var(--theme--background);
}
&.disabled {

4
app/src/components/v-table/table-header.vue
View File

@@ -278,7 +278,7 @@ function toggleManualSort() {
padding: 0 12px;
font-weight: 500;
font-size: 14px;
background-color: var(--v-table-background-color, var(--theme--background-page));
background-color: var(--v-table-background-color, var(--theme--background));
border-bottom: var(--theme--border-width) solid var(--theme--border-color-subdued);
&.select,
@@ -441,7 +441,7 @@ function toggleManualSort() {
background-color: var(--theme--foreground-subdued);
display: inline-block;
border-radius: 50%;
border: var(--theme--background-page) 6px solid;
border: var(--theme--background) 6px solid;
box-sizing: content-box;
margin-right: 8px;
vertical-align: middle;

2
app/src/components/v-table/table-row.vue
View File

@@ -104,7 +104,7 @@ const cssHeight = computed(() => {
}
&.clickable:not(.subdued):hover .cell {
background-color: var(--background-subdued);
background-color: var(--theme--background-subdued);
cursor: pointer;
}

6
app/src/components/v-table/v-table.vue
View File

@@ -417,7 +417,7 @@ table :deep(.loading-indicator > th) {
}
table :deep(.sortable-ghost .cell) {
background-color: var(--background-subdued);
background-color: var(--theme--background-subdued);
}
.loading table {
@@ -463,7 +463,7 @@ table :deep(.sortable-ghost .cell) {
}
.inline {
border: 2px solid var(--theme--form--field--input--border-color);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
}
@@ -473,6 +473,6 @@ table :deep(.sortable-ghost .cell) {
.disabled {
--v-table-color: var(--theme--foreground-subdued);
--v-table-background-color: var(--background-subdued);
--v-table-background-color: var(--theme--background-subdued);
}
</style>

2
app/src/components/v-template-input.vue
View File

@@ -312,7 +312,7 @@ function parseHTML(innerText?: string, isDirectInput = false) {
color: var(--theme--foreground);
font-family: var(--theme--font-family-sans-serif);
white-space: nowrap;
background-color: var(--theme--background-page);
background-color: var(--theme--background);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
transition: border-color var(--fast) var(--transition);

2
app/src/components/v-textarea.vue
View File

@@ -166,7 +166,7 @@ function trimIfEnabled() {
&.disabled textarea {
color: var(--theme--foreground-subdued);
background-color: var(--background-subdued);
background-color: var(--theme--form--field--input--background-subdued);
}
}
</style>

2
app/src/components/v-upload.vue
View File

@@ -330,7 +330,7 @@ function openFileBrowser() {
padding: 32px;
color: var(--theme--foreground-subdued);
text-align: center;
border: 2px dashed var(--theme--form--field--input--border-color);
border: var(--theme--border-width) dashed var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
transition: var(--fast) var(--transition);
transition-property: color, border-color, background-color;

22
app/src/components/v-workspace-tile.vue
View File

@@ -338,11 +338,12 @@ function useDragDrop() {
display: block;
grid-row: var(--pos-y) / span var(--height);
grid-column: var(--pos-x) / span var(--width);
background-color: var(--theme--background-page);
border: 1px solid var(--theme--border-color-subdued);
box-shadow: 0 0 0 1px var(--theme--border-color-subdued);
background-color: var(--theme--background);
border: calc(var(--theme--border-width) / 2) solid var(--theme--border-color-subdued);
box-shadow: 0 0 0 calc(var(--theme--border-width) / 2) var(--theme--border-color-subdued);
z-index: 1;
transition: border var(--fast) var(--transition);
transition: var(--fast) var(--transition);
transition-property: border, box-shadow;
&:hover {
z-index: 3;
@@ -351,19 +352,19 @@ function useDragDrop() {
&.editing {
&.draggable {
border-color: var(--theme--form--field--input--border-color);
box-shadow: 0 0 0 1px var(--theme--form--field--input--border-color);
box-shadow: 0 0 0 calc(var(--theme--border-width) / 2) var(--theme--form--field--input--border-color);
cursor: move;
}
&.draggable:hover {
border-color: var(--theme--form--field--input--border-color-hover);
box-shadow: 0 0 0 1px var(--theme--form--field--input--border-color-hover);
box-shadow: 0 0 0 calc(var(--theme--border-width) / 2) var(--theme--form--field--input--border-color-hover);
}
&.dragging {
z-index: 3 !important;
border-color: var(--theme--form--field--input--border-color-focus);
box-shadow: 0 0 0 1px var(--theme--primary);
box-shadow: 0 0 0 calc(var(--theme--border-width) / 2) var(--theme--primary);
}
&.dragging .resize-details {
@@ -392,12 +393,12 @@ function useDragDrop() {
border-top-right-radius: var(--theme--border-radius);
border-bottom-right-radius: var(--theme--border-radius);
border-top-left-radius: var(--theme--border-radius);
backdrop-filter: blur(3px);
background-color: rgba(var(--background-page-rgb), 0.5);
background-color: var(--theme--background);
opacity: 0;
transition: opacity var(--fast) var(--transition), color var(--fast) var(--transition);
pointer-events: none;
}
.tile-content {
position: relative;
display: flex;
@@ -468,8 +469,7 @@ function useDragDrop() {
border-top-right-radius: var(--theme--border-radius);
border-bottom-right-radius: var(--theme--border-radius);
border-bottom-left-radius: var(--theme--border-radius);
backdrop-filter: blur(3px);
background-color: rgba(var(--background-page-rgb), 0.5);
background-color: var(--theme--background);
}
.resize-handlers div {

2
app/src/displays/file/file.vue
View File

@@ -67,7 +67,7 @@ img {
justify-content: center;
height: 100%;
overflow: hidden;
background-color: var(--theme--background);
background-color: var(--theme--background-normal);
border-radius: var(--theme--border-radius);
aspect-ratio: 1;

4
app/src/displays/labels/labels.vue
View File

@@ -52,14 +52,14 @@ const items = computed(() => {
value: item,
text: itemStringValue,
foreground: 'var(--theme--foreground)',
background: 'var(--theme--background)',
background: 'var(--theme--background-normal)',
};
} else {
return {
value: item,
text: choice.text || itemStringValue,
foreground: choice.foreground || 'var(--theme--foreground)',
background: choice.background || 'var(--theme--background)',
background: choice.background || 'var(--theme--background-normal)',
};
}
});

2
app/src/displays/rating/rating.vue
View File

@@ -82,7 +82,7 @@ const ratingPercentage = computed(() => ({
left: 0;
z-index: 1;
display: inline-flex;
color: var(--theme--background);
color: var(--theme--background-normal);
}
}
}

2
app/src/displays/related-values/related-values.vue
View File

@@ -118,7 +118,7 @@ function getLinkForItem(item: any) {
z-index: 1;
width: calc(100% + 12px);
height: calc(100% + 12px);
background-color: var(--theme--background);
background-color: var(--theme--background-normal);
border-radius: var(--theme--border-radius);
opacity: 0;
transition: opacity var(--fast) var(--transition);

1
app/src/interfaces/_system/system-field-tree/system-field-tree.vue
View File

@@ -50,5 +50,6 @@ const { treeList, loadFieldRelations } = useFieldTree(chosenCollection);
.system-field-tree {
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
background-color: var(--theme--form--field--input--background);
}
</style>

2
app/src/interfaces/_system/system-fields/system-fields.vue
View File

@@ -138,7 +138,7 @@ const removeField = (field: string) => {
}
.v-notice.no-fields {
background-color: var(--theme--background-page);
background-color: var(--theme--background);
border: var(--theme--border-width) solid var(--v-list-item-border-color, var(--theme--border-color-subdued));
&::after {

2
app/src/interfaces/_system/system-filter/input-component.vue
View File

@@ -189,7 +189,7 @@ input {
color: var(--theme--primary);
font-family: var(--theme--font-family-monospace);
line-height: 1em;
background-color: var(--theme--background-page);
background-color: var(--theme--form--field--input--background);
border: none;
&::placeholder {

6
app/src/interfaces/_system/system-filter/nodes.vue
View File

@@ -384,7 +384,7 @@ function isExistingField(node: Record<string, any>): boolean {
margin-bottom: 8px;
padding: 2px 6px;
padding-right: 8px;
background-color: var(--theme--background-page);
background-color: var(--theme--form--field--input--background);
border: var(--theme--border-width) solid var(--theme--border-color-subdued);
border-radius: 100px;
transition: border-color var(--fast) var(--transition);
@@ -455,7 +455,7 @@ function isExistingField(node: Record<string, any>): boolean {
z-index: -1;
width: calc(100% + 8px);
height: 100%;
background-color: var(--theme--background);
background-color: var(--theme--background-normal);
border-radius: 6px;
opacity: 0;
transition: opacity var(--fast) var(--transition);
@@ -513,7 +513,7 @@ function isExistingField(node: Record<string, any>): boolean {
.delete {
right: 8px;
left: unset;
background-color: var(--theme--background-page);
background-color: var(--theme--background);
}
}
}

2
app/src/interfaces/_system/system-filter/system-filter.vue
View File

@@ -310,7 +310,7 @@ function addKeyAsNode() {
height: 30px;
padding: 0;
color: var(--theme--form--field--input--foreground-subdued);
background-color: var(--theme--background-page);
background-color: var(--theme--form--field--input--background);
border: var(--theme--border-width) solid var(--theme--border-color-subdued);
border-radius: 100px;
transition: border-color var(--fast) var(--transition);

4
app/src/interfaces/_system/system-input-translated-string/preview.svg
View File

@@ -1,10 +1,10 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="17.037" width="120" height="62" rx="6" fill="var(--theme--background-page)" />
<rect x="18" y="17.037" width="120" height="62" rx="6" fill="var(--theme--background)" />
<rect x="19" y="18.037" width="118" height="60" rx="5" stroke="var(--theme--primary)" stroke-opacity=".25"
stroke-width="2" />
<rect x="28" y="51" width="40" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
<rect x="28" y="63" width="60" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
<rect x="18" y="17" width="120" height="26" rx="6" fill="var(--theme--background-page)" class="glow" />
<rect x="18" y="17" width="120" height="26" rx="6" fill="var(--theme--background)" class="glow" />
<rect x="19" y="18" width="118" height="24" rx="5" stroke="var(--theme--primary)" stroke-width="2" />
<rect x="28" y="27" width="70" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
<path d="m124.52 31.78-1.5-1.45.02-.03a10 10 0 0 0 2.16-3.8h1.73v-1.18h-4.1v-1.14h-1.15v1.14h-4.1v1.18h6.53a9.34 9.34 0 0 1-1.86 3.12 9.14 9.14 0 0 1-1.34-1.94h-1.18a10.89 10.89 0 0 0 1.75 2.65l-2.98 2.92.82.82 2.93-2.9 1.8 1.81.47-1.2zm3.28-2.96h-1.17l-2.63 7h1.18l.65-1.75h2.76l.66 1.75h1.18l-2.63-7zm-1.53 4.1.93-2.54.96 2.55h-1.89z" fill="var(--theme--primary)"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

2
app/src/interfaces/_system/system-theme-overrides/system-theme-overrides-group.vue
View File

@@ -107,7 +107,7 @@ const hasValue = computed(() => {
}
&:hover {
background-color: var(--background-subdued);
background-color: var(--theme--form--field--input--background-subdued);
border-radius: var(--theme--border-radius);
}

73
app/src/interfaces/_system/system-theme/system-theme.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { useThemeStore } from '@directus/themes';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import ThemePreview from './theme-preview.vue';
defineEmits<{
input: [string | null];
@@ -17,17 +17,70 @@ const themeStore = useThemeStore();
const items = computed(() => themeStore.themes[props.appearance].map((theme) => theme.name));
const { t } = useI18n();
const valueWithDefault = computed(() => props.value ?? themeStore.themes[props.appearance][0]?.name ?? null);
</script>
<template>
<v-select
:model-value="valueWithDefault"
:disabled="disabled"
:items="items"
:placeholder="t('select_a_theme')"
@update:model-value="$emit('input', $event)"
/>
<div class="interface-system-theme">
<button
v-for="theme of items"
:key="theme"
:class="{ active: theme === valueWithDefault }"
class="theme"
@click="$emit('input', theme)"
>
<ThemePreview :dark-mode="appearance === 'dark'" :theme="theme" />
<div class="label">
<v-icon :name="theme === valueWithDefault ? 'radio_button_checked' : 'radio_button_unchecked'" />
{{ theme }}
</div>
</button>
</div>
</template>
<style scoped lang="scss">
.interface-system-theme {
display: grid;
grid-template-columns: repeat(auto-fit, 240px);
gap: 36px;
}
.theme {
background-color: var(--theme--form--field--input--background);
padding: 10px;
border-width: var(--theme--border-width);
border-style: solid;
border-color: var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
color: var(--theme--form--field--input--foreground);
box-shadow: var(--theme--form--field--input--box-shadow);
transition-duration: var(--fast);
transition-property: background-color, border-color, box-shadow;
transition-timing-function: var(--ease-out);
text-align: left;
--v-icon-color: var(--theme--primary);
.label {
display: flex;
align-items: center;
.v-icon {
margin-right: 4px;
}
}
&:hover {
background-color: var(--theme--form--field--input--background);
border-color: var(--v-input-border-color-hover, var(--theme--form--field--input--border-color-hover));
box-shadow: var(--theme--form--field--input--box-shadow-hover);
}
&.active {
background-color: var(--theme--form--field--input--background);
border-color: var(--theme--form--field--input--border-color-focus);
box-shadow: var(--theme--form--field--input--box-shadow-focus);
}
}
</style>

223
app/src/interfaces/_system/system-theme/theme-preview.vue Normal file
View File

@@ -0,0 +1,223 @@
<script setup lang="ts">
import { rulesToCssVars, useThemeStore } from '@directus/themes';
import { computed } from 'vue';
const props = defineProps<{
darkMode: boolean;
theme: string;
}>();
const themeStore = useThemeStore();
const theme = computed(() => {
const appearance = props.darkMode ? 'dark' : 'light';
const theme = themeStore.themes[appearance].find((theme) => theme.name === props.theme);
return theme ?? null;
});
const rules = computed(() => {
const rules = theme.value?.rules;
if (!rules) return null;
return rules;
});
const localVars = computed(() => {
return rulesToCssVars(rules.value);
});
</script>
<template>
<div class="theme-preview" :style="localVars">
<v-icon v-if="!rules" name="warning" />
<svg v-else class="theme-preview" viewBox="0 0 200 140" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Page Background -->
<rect width="208" height="140" rx="4" fill="var(--theme--background)" />
<!-- Header Bar -->
<rect x="56" width="136" height="16" fill="var(--theme--header--background)" />
<!-- Navigation Background -->
<rect x="16" y="16" width="40" height="124" fill="var(--theme--navigation--background)" />
<!-- Project Info Background -->
<rect x="16" width="40" height="16" fill="var(--theme--navigation--project--background)" />
<!-- Module Bar Background -->
<rect width="16" height="140" fill="var(--theme--navigation--modules--background)" />
<!-- Input -->
<rect
x="62.5"
y="80.5"
width="115"
height="35"
rx="3.5"
fill="var(--theme--form--field--input--background)"
stroke="var(--theme--form--field--input--border-color)"
/>
<rect
x="62.5"
y="44.5"
width="55"
height="11"
rx="3.5"
fill="var(--theme--form--field--input--background)"
stroke="var(--theme--primary)"
/>
<rect
x="122.5"
y="44.5"
width="55"
height="11"
rx="3.5"
fill="var(--theme--form--field--input--background)"
stroke="var(--theme--form--field--input--border-color)"
/>
<!-- Header Title -->
<rect
x="76"
y="4"
width="32"
height="8"
rx="4"
fill="var(--theme--header--title--foreground)"
fill-opacity="0.2"
/>
<!-- Field Label -->
<rect
x="62"
y="32"
width="24"
height="8"
rx="4"
fill="var(--theme--form--field--label--foreground)"
fill-opacity="0.2"
/>
<rect
x="122"
y="32"
width="24"
height="8"
rx="4"
fill="var(--theme--form--field--label--foreground)"
fill-opacity="0.2"
/>
<rect
x="62"
y="68"
width="32"
height="8"
rx="4"
fill="var(--theme--form--field--label--foreground)"
fill-opacity="0.2"
/>
<!-- Project Info Foreground -->
<rect
x="20"
y="4"
width="32"
height="8"
rx="4"
fill="var(--theme--navigation--project--foreground)"
fill-opacity="0.2"
/>
<!-- Navigation Item -->
<rect x="20" y="20" width="24" height="8" rx="4" fill="var(--theme--navigation--list--background-active)" />
<rect x="20" y="32" width="32" height="8" rx="4" fill="var(--theme--navigation--list--background-active)" />
<rect x="20" y="44" width="24" height="8" rx="4" fill="var(--theme--navigation--list--background-active)" />
<rect x="20" y="68" width="32" height="8" rx="4" fill="var(--theme--navigation--list--background-active)" />
<rect x="20" y="56" width="24" height="8" rx="4" fill="var(--theme--navigation--list--background-active)" />
<rect x="20" y="80" width="24" height="8" rx="4" fill="var(--theme--navigation--list--background-active)" />
<!-- Logo -->
<rect width="16" height="16" fill="var(--theme--primary)" />
<path
d="M5.13866 13.0021L4.55769 12.7204L7.03502 8.77268L5.00164 7.78657C4.49039 7.53864 5.0131 7.24044 5.03285 7.22795C6.39997 6.21381 8.44813 4.7061 11.1828 2.69273L11.7637 2.97448L9.2864 6.92217L11.3256 7.9111C11.558 8.02379 11.6343 8.20058 11.3792 8.42257C7.2178 11.4726 5.13866 13.0021 5.13866 13.0021Z"
fill="white"
/>
<!-- Module Bar Button Background Active -->
<rect y="16" width="16" height="16" fill="var(--theme--navigation--modules--button--background-active)" />
<!-- Module Bar Button Foreground Active -->
<rect
x="4"
y="20"
width="8"
height="8"
rx="4"
fill="var(--theme--navigation--modules--button--foreground-active)"
/>
<!-- Module Bar Button Foreground -->
<rect x="4" y="36" width="8" height="8" rx="4" fill="var(--theme--navigation--modules--button--foreground)" />
<rect x="4" y="52" width="8" height="8" rx="4" fill="var(--theme--navigation--modules--button--foreground)" />
<rect x="4" y="68" width="8" height="8" rx="4" fill="var(--theme--navigation--modules--button--foreground)" />
<!-- Header Bar Buttons -->
<rect x="62" y="4" width="8" height="8" rx="4" fill="var(--theme--background-normal)" />
<rect x="170" y="4" width="8" height="8" rx="4" fill="var(--theme--primary)" />
<rect x="156" y="4" width="8" height="8" rx="4" fill="var(--theme--background-normal)" />
<!-- Sidebar Background -->
<rect x="184" width="16" height="140" fill="var(--theme--sidebar--background)" />
<!-- Sidebar Toggle Background -->
<rect x="184" width="16" height="16" fill="var(--theme--sidebar--section--toggle--background)" />
<rect x="184" y="16" width="16" height="16" fill="var(--theme--sidebar--section--toggle--background)" />
<rect x="184" y="32" width="16" height="16" fill="var(--theme--sidebar--section--toggle--background)" />
<!-- Sidebar Toggle Foreground -->
<rect
x="188"
y="4"
width="8"
height="8"
rx="4"
fill="var(--theme--sidebar--section--toggle--foreground)"
fill-opacity="0.2"
/>
<rect
x="188"
y="20"
width="8"
height="8"
rx="4"
fill="var(--theme--sidebar--section--toggle--foreground)"
fill-opacity="0.2"
/>
<rect
x="188"
y="36"
width="8"
height="8"
rx="4"
fill="var(--theme--sidebar--section--toggle--foreground)"
fill-opacity="0.2"
/>
<!-- Header Border -->
<rect x="56" y="16" width="128" height="1" fill="var(--theme--header--border-color)" />
</svg>
</div>
</template>
<style scoped lang="scss">
.theme-preview {
svg {
width: 100%;
border: 1px solid var(--theme--border-color-subdued);
border-radius: 4px;
}
}
</style>

4
app/src/interfaces/collection-item-dropdown/preview.svg
View File

@@ -1,10 +1,10 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="17.037" width="120" height="62" rx="6" fill="var(--theme--background-page)" />
<rect x="18" y="17.037" width="120" height="62" rx="6" fill="var(--theme--background)" />
<rect x="19" y="18.037" width="118" height="60" rx="5" stroke="var(--theme--primary)" stroke-opacity=".25"
stroke-width="2" />
<rect x="28" y="51" width="40" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
<rect x="28" y="63" width="60" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
<rect x="18" y="17" width="120" height="26" rx="6" fill="var(--theme--background-page)" class="glow" />
<rect x="18" y="17" width="120" height="26" rx="6" fill="var(--theme--background)" class="glow" />
<rect x="19" y="18" width="118" height="24" rx="5" stroke="var(--theme--primary)" stroke-width="2" />
<rect x="28" y="27" width="70" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
<path d="M120.966 28a.4.4 0 00-.283.683l3.034 3.034a.4.4 0 00.566 0l3.034-3.034a.4.4 0 00-.283-.683h-6.068z"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 965 B

After

Width:  |  Height:  |  Size: 955 B

2
app/src/interfaces/datetime/preview.svg
View File

@@ -1,5 +1,5 @@
<svg width="156" height="96" viewBox="0 0 156 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="29" y="10" width="98" height="77" rx="6" fill="var(--theme--background-page)" class="glow" />
<rect x="29" y="10" width="98" height="77" rx="6" fill="var(--theme--background)" class="glow" />
<rect x="30" y="11" width="96" height="75" rx="5" stroke="var(--theme--primary)" stroke-width="2" />
<rect x="39" y="20" width="30" height="5.03704" rx="2" fill="var(--theme--primary)" />
<rect x="39" y="41" width="6" height="6" rx="2" fill="var(--theme--primary)" fill-opacity="0.25" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

6
app/src/interfaces/file-image/file-image.vue
View File

@@ -225,7 +225,7 @@ const { createAllowed, updateAllowed } = useRelationPermissionsM2O(relationInfo)
width: 100%;
height: var(--input-height-tall);
overflow: hidden;
background-color: var(--theme--background);
background-color: var(--theme--background-normal);
border-radius: var(--theme--border-radius);
}
@@ -252,7 +252,7 @@ img {
justify-content: center;
height: 100%;
color: var(--theme--form--field--input--foreground-subdued);
background-color: var(--theme--background);
background-color: var(--theme--background-normal);
padding: 32px;
.v-icon {
@@ -378,7 +378,7 @@ img {
}
.fallback {
background-color: var(--theme--background);
background-color: var(--theme--background-normal);
display: flex;
align-items: center;
justify-content: center;

2
app/src/interfaces/file-image/preview.svg
View File

@@ -1,5 +1,5 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="13" width="120" height="70" rx="6" fill="var(--theme--background-page)" class="glow"/>
<rect x="18" y="13" width="120" height="70" rx="6" fill="var(--theme--background)" class="glow"/>
<rect x="19" y="14" width="118" height="68" rx="5" stroke="var(--theme--primary)" stroke-width="2"/>
<rect x="24" y="19" width="108" height="58" rx="2" fill="var(--theme--primary)" fill-opacity=".25"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="m125.294 69-35-29-25.213 20.891L52 49 30 69h95.294Z" fill="var(--theme--primary)"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 606 B

After

Width:  |  Height:  |  Size: 601 B

2
app/src/interfaces/file/file.vue
View File

@@ -289,7 +289,7 @@ function useURLImport() {
height: 40px;
margin-left: -8px;
overflow: hidden;
background-color: var(--theme--background);
background-color: var(--theme--background-normal);
border-radius: var(--theme--border-radius);
img {

2
app/src/interfaces/file/preview.svg
View File

@@ -1,5 +1,5 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="13" width="120" height="70" rx="6" fill="var(--theme--background-page)" class="glow"/>
<rect x="18" y="13" width="120" height="70" rx="6" fill="var(--theme--background)" class="glow"/>
<rect x="19" y="14" width="118" height="68" rx="5" stroke="var(--theme--primary)" stroke-width="2"/>
<rect x="24" y="19" width="108" height="58" rx="2" fill="var(--theme--primary)" fill-opacity=".25"/>
<mask id="b" fill="#fff">
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

8
app/src/interfaces/files/preview.svg
View File

@@ -1,20 +1,20 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="19" y="9" width="56" height="36" rx="6" fill="var(--theme--background-page)" class="glow" />
<rect x="19" y="9" width="56" height="36" rx="6" fill="var(--theme--background)" class="glow" />
<rect x="20" y="10" width="54" height="34" rx="5" stroke="var(--theme--primary)" stroke-width="2" />
<rect x="25" y="15" width="44" height="24" rx="4" fill="var(--theme--primary)" fill-opacity=".25" />
<path d="M36.695 27.2L45.39 35H28l8.695-7.8z" fill="var(--theme--primary)" />
<path d="M52.153 23L66 35H38.305l13.848-12z" fill="var(--theme--primary)" />
<rect x="81" y="9" width="56" height="36" rx="6" fill="var(--theme--background-page)" />
<rect x="81" y="9" width="56" height="36" rx="6" fill="var(--theme--background)" />
<rect x="82" y="10" width="54" height="34" rx="5" stroke="var(--theme--primary)" stroke-opacity=".25" stroke-width="2" />
<rect x="87" y="15" width="44" height="24" rx="4" fill="var(--theme--primary)" fill-opacity=".25" />
<path d="M98.695 27.2l8.695 7.8H90l8.695-7.8z" fill="var(--theme--primary)" />
<path d="M114.153 23L128 35h-27.695l13.848-12z" fill="var(--theme--primary)" />
<rect x="19" y="51" width="56" height="36" rx="6" fill="var(--theme--background-page)" />
<rect x="19" y="51" width="56" height="36" rx="6" fill="var(--theme--background)" />
<rect x="20" y="52" width="54" height="34" rx="5" stroke="var(--theme--primary)" stroke-opacity=".25" stroke-width="2" />
<rect x="25" y="57" width="44" height="24" rx="4" fill="var(--theme--primary)" fill-opacity=".25" />
<path d="M36.695 69.2L45.39 77H28l8.695-7.8z" fill="var(--theme--primary)" />
<path d="M52.153 65L66 77H38.305l13.848-12z" fill="var(--theme--primary)" />
<rect x="81" y="51" width="56" height="36" rx="6" fill="var(--theme--background-page)" />
<rect x="81" y="51" width="56" height="36" rx="6" fill="var(--theme--background)" />
<rect x="82" y="52" width="54" height="34" rx="5" stroke="var(--theme--primary)" stroke-opacity=".25" stroke-width="2" />
<rect x="87" y="57" width="44" height="24" rx="4" fill="var(--theme--primary)" fill-opacity=".25" />
<path d="M98.695 69.2l8.695 7.8H90l8.695-7.8z" fill="var(--theme--primary)" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

6
app/src/interfaces/group-raw/preview.svg
View File

@@ -1,10 +1,10 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="19" y="14" width="118" height="68" rx="6" fill="var(--theme--background-page)"/>
<rect x="19" y="14" width="118" height="68" rx="6" fill="var(--theme--background)"/>
<rect x="19" y="14" width="118" height="68" rx="6" stroke="var(--theme--primary)" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 6"/>
<rect opacity=".25" x="29" y="24" width="98" height="20" rx="5" fill="var(--theme--background-page)" stroke="var(--theme--primary)" stroke-width="2"/>
<rect opacity=".25" x="29" y="24" width="98" height="20" rx="5" fill="var(--theme--background)" stroke="var(--theme--primary)" stroke-width="2"/>
<rect x="38" y="31" width="50" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25"/>
<rect x="92" y="31" width="20" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25"/>
<rect opacity=".25" x="29" y="52" width="98" height="20" rx="5" fill="var(--theme--background-page)" stroke="var(--theme--primary)" stroke-width="2"/>
<rect opacity=".25" x="29" y="52" width="98" height="20" rx="5" fill="var(--theme--background)" stroke="var(--theme--primary)" stroke-width="2"/>
<rect x="38" y="59" width="20" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25"/>
<rect x="62" y="59" width="40" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1012 B

2
app/src/interfaces/input-autocomplete-api/preview.svg
View File

@@ -1,5 +1,5 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="35" width="120" height="26" rx="6" fill="var(--theme--background-page)" class="glow" />
<rect x="18" y="35" width="120" height="26" rx="6" fill="var(--theme--background)" class="glow" />
<rect x="19" y="36" width="118" height="24" rx="5" stroke="var(--theme--primary)" stroke-width="2" />
<rect x="28" y="45" width="50" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
<rect x="82" y="45" width="20" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 494 B

After

Width:  |  Height:  |  Size: 489 B

40
app/src/interfaces/input-block-editor/editorjs-overrides.css
View File

@@ -1,5 +1,5 @@
.codex-editor {
--bg-color: var(--theme--background) !important;
--bg-color: var(--theme--background-normal) !important;
--front-color: var(--theme--form--field--input--foreground) !important;
--border-color: var(--theme--form--field--input--border-color) !important;
}
@@ -7,7 +7,7 @@
.codex-editor .ce-toolbar__plus,
.codex-editor .ce-toolbar__settings-btn {
color: var(--theme--form--field--input--foreground);
background-color: var(--theme--background);
background-color: var(--theme--background-normal);
border-radius: var(--theme--border-radius);
}
@@ -43,11 +43,11 @@
.codex-editor .cdx-search-field {
border-radius: var(--theme--border-radius) !important;
border: none;
background: var(--background-subdued);
background: var(--theme--form--field--input--background-subdued);
}
.codex-editor .ce-popover {
background: var(--theme--background-page);
background: var(--theme--background);
border-color: var(--theme--form--field--input--border-color);
border-width: var(--theme--border-width);
border-radius: var(--theme--border-radius);
@@ -86,7 +86,7 @@
}
.codex-editor .ce-popover-item-icon {
background: var(--theme--background-page);
background: var(--theme--background);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
box-shadow: none;
}
@@ -106,7 +106,7 @@
.codex-editor .image-tool--loading .image-tool__image,
.codex-editor .ce-block--selected .ce-block__content {
background: var(--theme--background);
background: var(--theme--background-normal);
}
.codex-editor .image-tool--loading .image-tool__image {
@@ -166,7 +166,7 @@
.codex-editor .ce-conversion-toolbar,
.codex-editor .ce-inline-toolbar,
.codex-editor .ce-settings {
background: var(--background-subdued);
background: var(--theme--form--field--input--background-subdued);
border-color: var(--theme--form--field--input--border-color);
border-width: var(--theme--border-width);
border-radius: var(--theme--border-radius);
@@ -186,7 +186,7 @@
color: var(--theme--primary);
background-color: var(
--v-list-item-background-color-hover,
var(--v-list-background-color-hover, var(--theme--background))
var(--v-list-background-color-hover, var(--theme--background-normal))
) !important;
box-shadow: unset;
}
@@ -197,7 +197,7 @@
color: var(--v-list-item-color-hover, var(--v-list-color-hover, var(--theme--foreground)));
background-color: var(
--v-list-item-background-color-hover,
var(--v-list-background-color-hover, var(--theme--background))
var(--v-list-background-color-hover, var(--theme--background-normal))
) !important;
box-shadow: unset;
}
@@ -224,7 +224,7 @@
.codex-editor .ce-code__textarea {
color: var(--theme--form--field--input--foreground);
font-size: inherit;
background-color: var(--theme--background-page);
background-color: var(--theme--background);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
box-shadow: unset;
@@ -242,7 +242,7 @@
.codex-editor .ce-inline-tool-input {
color: var(--theme--primary);
background: var(--theme--background);
background: var(--theme--background-normal);
border-top-color: var(--theme--form--field--input--border-color);
}
@@ -270,7 +270,7 @@
.codex-editor .cdx-attaches,
.codex-editor .cdx-personality {
color: var(--theme--form--field--input--foreground);
background: var(--theme--background);
background: var(--theme--background-normal);
border-color: var(--theme--form--field--input--border-color);
box-shadow: unset;
}
@@ -384,7 +384,7 @@
}
.codex-editor .cdx-attaches--with-file .cdx-attaches__download-button {
background: var(--background-subdued);
background: var(--theme--form--field--input--background-subdued);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
}
@@ -404,7 +404,7 @@
.codex-editor .ce-block .inline-code {
padding: 4px;
color: var(--v-chip-background-color, var(--theme--background));
color: var(--v-chip-background-color, var(--theme--background-normal));
font-family: monospace;
background-color: var(--v-chip-color, var(--theme--foreground));
border-radius: 4px;
@@ -415,18 +415,18 @@
.codex-editor .tc-wrap {
--color-background: var(
--v-list-item-background-color-active,
var(--v-list-background-color-active, var(--theme--background))
var(--v-list-background-color-active, var(--theme--background-normal))
);
--color-border: var(--theme--form--field--input--border-color);
--color-background-hover: var(
--v-list-item-background-color-hover,
var(--v-list-background-color-hover, var(--theme--background))
var(--v-list-background-color-hover, var(--theme--background-normal))
);
}
.codex-editor .tc-popover {
--color-background: var(--theme--background);
--color-border: var(--theme--background);
--color-background: var(--theme--background-normal);
--color-border: var(--theme--background-normal);
--color-background-hover: var(--theme--background-accent);
}
@@ -448,7 +448,7 @@
.codex-editor .tc-toolbox__toggler svg rect:first-child {
/* This is very ugly, but there no other way to set background of the element */
fill: var(--theme--background) !important;
fill: var(--theme--background-normal) !important;
border-radius: var(--theme--border-radius);
}
@@ -465,7 +465,7 @@
.tc-add-row:hover::before {
background-color: var(
--v-list-item-background-color-hover,
var(--v-list-background-color-hover, var(--theme--background))
var(--v-list-background-color-hover, var(--theme--background-normal))
);
}

6
app/src/interfaces/input-block-editor/input-block-editor.vue
View File

@@ -192,14 +192,14 @@ function sanitizeValue(value: any): EditorJS.OutputData | null {
.disabled {
color: var(--theme--form--field--input--foreground-subdued);
background-color: var(--background-subdued);
background-color: var(--theme--form--field--input--background-subdued);
border-color: var(--theme--form--field--input--border-color);
pointer-events: none;
}
.bordered {
padding: var(--input-padding) 4px var(--input-padding) calc(var(--input-padding) + 8px) !important;
background-color: var(--theme--background-page);
background-color: var(--theme--background);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
@@ -232,7 +232,7 @@ function sanitizeValue(value: any): EditorJS.OutputData | null {
.uploader-preview-image {
margin-bottom: var(--form-vertical-gap);
background-color: var(--theme--background);
background-color: var(--theme--background-normal);
border-radius: var(--theme--border-radius);
}

2
app/src/interfaces/input-block-editor/preview.svg
View File

@@ -1,5 +1,5 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="15" width="120" height="66" rx="6" fill="var(--theme--background-page)" class="glow" />
<rect x="18" y="15" width="120" height="66" rx="6" fill="var(--theme--background)" class="glow" />
<rect x="19" y="16" width="118" height="64" rx="5" stroke="var(--theme--primary)" stroke-width="2" />
<rect x="28" y="25" width="6" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
<rect x="28" y="45.148" width="6" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

2
app/src/interfaces/input-code/preview.svg
View File

@@ -1,5 +1,5 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="15" width="120" height="66" rx="6" fill="var(--theme--background-page)" class="glow" />
<rect x="18" y="15" width="120" height="66" rx="6" fill="var(--theme--background)" class="glow" />
<rect x="19" y="16" width="118" height="64" rx="5" stroke="var(--theme--primary)" stroke-width="2" />
<rect x="28" y="25" width="6" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
<rect x="28" y="45.148" width="6" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

2
app/src/interfaces/input-hash/preview.svg
View File

@@ -1,5 +1,5 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="35" width="120" height="26" rx="6" fill="var(--theme--background-page)"/>
<rect x="18" y="35" width="120" height="26" rx="6" fill="var(--theme--background)"/>
<rect x="19" y="36" width="118" height="24" rx="5" stroke="var(--theme--primary)" stroke-width="2"/>
<rect x="28" y="45" width="6" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25"/>
<rect x="38" y="45" width="6" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

2
app/src/interfaces/input-multiline/preview.svg
View File

@@ -1,5 +1,5 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="18" width="120" height="60" rx="6" fill="var(--theme--background-page)" class="glow" />
<rect x="18" y="18" width="120" height="60" rx="6" fill="var(--theme--background)" class="glow" />
<rect x="19" y="19" width="118" height="58" rx="5" stroke="var(--theme--primary)" stroke-width="2" />
<rect x="28" y="28" width="60" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
<rect x="28" y="48" width="60" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 797 B

After

Width:  |  Height:  |  Size: 792 B

2
app/src/interfaces/input-rich-text-html/preview.svg
View File

@@ -1,5 +1,5 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="15" width="120" height="66" rx="6" fill="var(--theme--background-page)" class="glow" />
<rect x="18" y="15" width="120" height="66" rx="6" fill="var(--theme--background)" class="glow" />
<rect x="19" y="16" width="118" height="64" rx="5" stroke="var(--theme--primary)" stroke-width="2" />
<rect x="28" y="25" width="8" height="8" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
<rect x="42" y="25" width="8" height="8" rx="2" fill="var(--theme--primary)" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

34
app/src/interfaces/input-rich-text-html/tinymce-overrides.css
View File

@@ -112,7 +112,7 @@
.tox .tox-toolbar__overflow {
min-height: 40px;
padding: 2px 0;
background: var(--background-subdued);
background: var(--theme--form--field--input--background-subdued);
border-bottom: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
}
@@ -124,7 +124,7 @@ body.dark .tox .tox-toolbar,
body.dark .tox .tox-toolbar__primary,
body.dark .tox .tox-toolbar__overflow {
background: url("data:image/svg+xml;charset=utf8,%3Csvg height='40px' viewBox='0 0 40 40px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='2' fill='%23455a64'/%3E%3C/svg%3E")
left 0 top 0 var(--background-subdued);
left 0 top 0 var(--theme--form--field--input--background-subdued);
}
@media (prefers-color-scheme: dark) {
@@ -132,7 +132,7 @@ body.dark .tox .tox-toolbar__overflow {
body.auto .tox .tox-toolbar__primary,
body.auto .tox .tox-toolbar__overflow {
background: url("data:image/svg+xml;charset=utf8,%3Csvg height='40px' viewBox='0 0 40 40px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='2' fill='%23455a64'/%3E%3C/svg%3E")
left 0 top 0 var(--background-subdued);
left 0 top 0 var(--theme--form--field--input--background-subdued);
}
}
@@ -192,7 +192,7 @@ body.dark .tox .tox-toolbar__overflow {
.tox .tox-dialog {
color: var(--theme--form--field--input--foreground);
background-color: var(--theme--background-page);
background-color: var(--theme--background);
border: none;
box-shadow: none;
}
@@ -205,7 +205,7 @@ body.dark .tox .tox-toolbar__overflow {
padding: 20px;
color: var(--theme--form--field--input--foreground);
font-size: 16px;
background-color: var(--theme--background-page);
background-color: var(--theme--background);
}
.tox .tox-dialog__body {
@@ -219,7 +219,7 @@ body.dark .tox .tox-toolbar__overflow {
.tox .tox-dialog__footer {
padding: 0 24px 24px;
color: var(--theme--form--field--input--foreground);
background-color: var(--theme--background-page);
background-color: var(--theme--background);
border-top: none;
}
@@ -233,8 +233,8 @@ body.dark .tox .tox-toolbar__overflow {
font-weight: 500;
font-size: 14px;
font-family: var(--theme--font-family-sans-serif);
background-color: var(--theme--background-page);
border: 2px solid var(--theme--form--field--input--border-color);
background-color: var(--theme--background);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
transition: var(--fast) var(--transition);
}
@@ -248,7 +248,7 @@ body.dark .tox .tox-toolbar__overflow {
.tox .tox-toolbar-textfield:focus,
.tox .tox-selectfield select:focus,
.tox .tox-textarea:focus {
background-color: var(--theme--background-page);
background-color: var(--theme--background);
}
.tox .tox-menu {
@@ -256,8 +256,8 @@ body.dark .tox .tox-toolbar__overflow {
padding: 4px !important;
color: var(--theme--form--field--input--foreground);
font-family: var(--theme--font-family-sans-serif);
background-color: var(--background-subdued);
border: 2px solid var(--theme--form--field--input--border-color);
background-color: var(--theme--form--field--input--background-subdued);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
}
@@ -302,7 +302,7 @@ body.dark .tox .tox-toolbar__overflow {
font-family: var(--theme--font-family-sans-serif);
line-height: 19px;
background-color: var(--theme--primary);
border: 2px solid var(--theme--primary);
border: var(--theme--border-width) solid var(--theme--primary);
border: none;
border-color: var(--theme--primary);
border-radius: var(--theme--border-radius);
@@ -319,14 +319,14 @@ body.dark .tox .tox-toolbar__overflow {
.tox .tox-button--secondary {
color: var(--theme--form--field--input--foreground);
background-color: var(--theme--background);
border-color: var(--theme--background);
background-color: var(--theme--background-normal);
border-color: var(--theme--background-normal);
}
.tox .tox-button--secondary:hover:not(:disabled) {
color: var(--theme--form--field--input--foreground);
background-color: var(--theme--background);
border-color: var(--theme--background);
background-color: var(--theme--background-normal);
border-color: var(--theme--background-normal);
}
.tox .tox-button--naked {
@@ -400,7 +400,7 @@ body.dark .tox .tox-toolbar__overflow {
}
.tox .tox-pop.tox-pop--top::after {
border-bottom-color: var(--background-subdued);
border-bottom-color: var(--theme--form--field--input--background-subdued);
}
.tox .tox-pop.tox-pop--top::before {

4
app/src/interfaces/input-rich-text-md/input-rich-text-md.vue
View File

@@ -436,7 +436,7 @@ function edit(type: Alteration, options?: Record<string, any>) {
}
.interface-input-rich-text-md.disabled {
background-color: var(--background-subdued);
background-color: var(--theme--form--field--input--background-subdued);
}
.interface-input-rich-text-md:not(.disabled):hover {
@@ -519,7 +519,7 @@ textarea {
align-items: center;
min-height: 40px;
padding: 0 4px;
background-color: var(--background-subdued);
background-color: var(--theme--form--field--input--background-subdued);
border-bottom: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
.v-button + .v-button {

2
app/src/interfaces/input-rich-text-md/preview.svg
View File

@@ -1,5 +1,5 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="15" width="120" height="66" rx="6" fill="var(--theme--background-page)" class="glow" />
<rect x="18" y="15" width="120" height="66" rx="6" fill="var(--theme--background)" class="glow" />
<rect x="19" y="16" width="118" height="64" rx="5" stroke="var(--theme--primary)" stroke-width="2" />
<rect x="28" y="25" width="8" height="8" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
<rect x="42" y="25" width="8" height="8" rx="2" fill="var(--theme--primary)" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

2
app/src/interfaces/input/preview.svg
View File

@@ -1,5 +1,5 @@
<svg width="156" height="96" viewBox="0 0 156 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="35" width="120" height="26" rx="6" fill="var(--theme--background-page)" class="glow" />
<rect x="18" y="35" width="120" height="26" rx="6" fill="var(--theme--background)" class="glow" />
<rect x="19" y="36" width="118" height="24" rx="5" stroke="var(--theme--primary)" stroke-width="2" />
<rect x="28" y="45" width="50" height="6" rx="2" fill="var(--theme--primary)" fill-opacity="0.25" />
<rect x="82" y="45" width="20" height="6" rx="2" fill="var(--theme--primary)" fill-opacity="0.25" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 517 B

After

Width:  |  Height:  |  Size: 512 B

6
app/src/interfaces/list-m2a/preview.svg
View File

@@ -1,15 +1,15 @@
<svg width="156" height="96" viewBox="0 0 156 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18.4443" y="9" width="120" height="22" rx="6" fill="var(--theme--background-page)" />
<rect x="18.4443" y="9" width="120" height="22" rx="6" fill="var(--theme--background)" />
<rect x="19.4443" y="10" width="118" height="20" rx="5" stroke="var(--theme--primary)" stroke-opacity="0.25"
stroke-width="2" />
<rect x="46" y="17" width="10" height="6" rx="2" fill="var(--theme--primary)" fill-opacity="0.25" />
<rect x="60" y="17" width="40" height="6" rx="2" fill="var(--theme--primary)" fill-opacity="0.25" />
<path opacity="0.5" d="M38 18H28V19.2691H38V18ZM28 21.7778H38V20.5087H28V21.7778Z" fill="var(--theme--primary)" />
<rect x="18" y="65" width="120" height="22" rx="6" fill="var(--theme--background-page)" />
<rect x="18" y="65" width="120" height="22" rx="6" fill="var(--theme--background)" />
<rect x="19" y="66" width="118" height="20" rx="5" stroke="var(--theme--primary)" stroke-opacity="0.25" stroke-width="2" />
<rect x="46" y="73" width="60" height="6" rx="2" fill="var(--theme--primary)" fill-opacity="0.25" />
<path opacity="0.5" d="M38 74H28V75.2691H38V74ZM28 77.7778H38V76.5087H28V77.7778Z" fill="var(--theme--primary)" />
<rect x="18" y="37" width="120" height="22" rx="6" fill="var(--theme--background-page)" class="glow" />
<rect x="18" y="37" width="120" height="22" rx="6" fill="var(--theme--background)" class="glow" />
<rect x="19" y="38" width="118" height="20" rx="5" stroke="var(--theme--primary)" stroke-width="2" />
<rect x="46" y="45" width="30" height="6" rx="2" fill="var(--theme--primary)" />
<rect x="80" y="45" width="10" height="6" rx="2" fill="var(--theme--primary)" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

6
app/src/interfaces/list-m2m/preview.svg
View File

@@ -1,15 +1,15 @@
<svg width="156" height="96" viewBox="0 0 156 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18.4443" y="9" width="120" height="22" rx="6" fill="var(--theme--background-page)" />
<rect x="18.4443" y="9" width="120" height="22" rx="6" fill="var(--theme--background)" />
<rect x="19.4443" y="10" width="118" height="20" rx="5" stroke="var(--theme--primary)" stroke-opacity="0.25"
stroke-width="2" />
<rect x="46" y="17" width="10" height="6" rx="2" fill="var(--theme--primary)" fill-opacity="0.25" />
<rect x="60" y="17" width="40" height="6" rx="2" fill="var(--theme--primary)" fill-opacity="0.25" />
<path opacity="0.5" d="M38 18H28V19.2691H38V18ZM28 21.7778H38V20.5087H28V21.7778Z" fill="var(--theme--primary)" />
<rect x="18" y="65" width="120" height="22" rx="6" fill="var(--theme--background-page)" />
<rect x="18" y="65" width="120" height="22" rx="6" fill="var(--theme--background)" />
<rect x="19" y="66" width="118" height="20" rx="5" stroke="var(--theme--primary)" stroke-opacity="0.25" stroke-width="2" />
<rect x="46" y="73" width="60" height="6" rx="2" fill="var(--theme--primary)" fill-opacity="0.25" />
<path opacity="0.5" d="M38 74H28V75.2691H38V74ZM28 77.7778H38V76.5087H28V77.7778Z" fill="var(--theme--primary)" />
<rect x="18" y="37" width="120" height="22" rx="6" fill="var(--theme--background-page)" class="glow" />
<rect x="18" y="37" width="120" height="22" rx="6" fill="var(--theme--background)" class="glow" />
<rect x="19" y="38" width="118" height="20" rx="5" stroke="var(--theme--primary)" stroke-width="2" />
<rect x="46" y="45" width="30" height="6" rx="2" fill="var(--theme--primary)" />
<rect x="80" y="45" width="10" height="6" rx="2" fill="var(--theme--primary)" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

6
app/src/interfaces/list-o2m/preview.svg
View File

@@ -1,15 +1,15 @@
<svg width="156" height="96" viewBox="0 0 156 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18.4443" y="9" width="120" height="22" rx="6" fill="var(--theme--background-page)" />
<rect x="18.4443" y="9" width="120" height="22" rx="6" fill="var(--theme--background)" />
<rect x="19.4443" y="10" width="118" height="20" rx="5" stroke="var(--theme--primary)" stroke-opacity="0.25"
stroke-width="2" />
<rect x="46" y="17" width="10" height="6" rx="2" fill="var(--theme--primary)" fill-opacity="0.25" />
<rect x="60" y="17" width="40" height="6" rx="2" fill="var(--theme--primary)" fill-opacity="0.25" />
<path opacity="0.5" d="M38 18H28V19.2691H38V18ZM28 21.7778H38V20.5087H28V21.7778Z" fill="var(--theme--primary)" />
<rect x="18" y="65" width="120" height="22" rx="6" fill="var(--theme--background-page)" />
<rect x="18" y="65" width="120" height="22" rx="6" fill="var(--theme--background)" />
<rect x="19" y="66" width="118" height="20" rx="5" stroke="var(--theme--primary)" stroke-opacity="0.25" stroke-width="2" />
<rect x="46" y="73" width="60" height="6" rx="2" fill="var(--theme--primary)" fill-opacity="0.25" />
<path opacity="0.5" d="M38 74H28V75.2691H38V74ZM28 77.7778H38V76.5087H28V77.7778Z" fill="var(--theme--primary)" />
<rect x="18" y="37" width="120" height="22" rx="6" fill="var(--theme--background-page)" class="glow" />
<rect x="18" y="37" width="120" height="22" rx="6" fill="var(--theme--background)" class="glow" />
<rect x="19" y="38" width="118" height="20" rx="5" stroke="var(--theme--primary)" stroke-width="2" />
<rect x="46" y="45" width="30" height="6" rx="2" fill="var(--theme--primary)" />
<rect x="80" y="45" width="10" height="6" rx="2" fill="var(--theme--primary)" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

6
app/src/interfaces/list/preview.svg
View File

@@ -1,15 +1,15 @@
<svg width="156" height="96" viewBox="0 0 156 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18.4443" y="9" width="120" height="22" rx="6" fill="var(--theme--background-page)" />
<rect x="18.4443" y="9" width="120" height="22" rx="6" fill="var(--theme--background)" />
<rect x="19.4443" y="10" width="118" height="20" rx="5" stroke="var(--theme--primary)" stroke-opacity="0.25"
stroke-width="2" />
<rect x="46" y="17" width="10" height="6" rx="2" fill="var(--theme--primary)" fill-opacity="0.25" />
<rect x="60" y="17" width="40" height="6" rx="2" fill="var(--theme--primary)" fill-opacity="0.25" />
<path opacity="0.5" d="M38 18H28V19.2691H38V18ZM28 21.7778H38V20.5087H28V21.7778Z" fill="var(--theme--primary)" />
<rect x="18" y="65" width="120" height="22" rx="6" fill="var(--theme--background-page)" />
<rect x="18" y="65" width="120" height="22" rx="6" fill="var(--theme--background)" />
<rect x="19" y="66" width="118" height="20" rx="5" stroke="var(--theme--primary)" stroke-opacity="0.25" stroke-width="2" />
<rect x="46" y="73" width="60" height="6" rx="2" fill="var(--theme--primary)" fill-opacity="0.25" />
<path opacity="0.5" d="M38 74H28V75.2691H38V74ZM28 77.7778H38V76.5087H28V77.7778Z" fill="var(--theme--primary)" />
<rect x="18" y="37" width="120" height="22" rx="6" fill="var(--theme--background-page)" class="glow" />
<rect x="18" y="37" width="120" height="22" rx="6" fill="var(--theme--background)" class="glow" />
<rect x="19" y="38" width="118" height="20" rx="5" stroke="var(--theme--primary)" stroke-width="2" />
<rect x="46" y="45" width="30" height="6" rx="2" fill="var(--theme--primary)" />
<rect x="80" y="45" width="10" height="6" rx="2" fill="var(--theme--primary)" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

4
app/src/interfaces/map/map.vue
View File

@@ -507,8 +507,8 @@ function handleKeyDown(event: any) {
height: 36px;
padding: 10px;
color: var(--theme--form--field--input--foreground-subdued);
background-color: var(--theme--background-page);
border: var(--theme--border-width) solid var(--theme--background-page);
background-color: var(--theme--background);
border: var(--theme--border-width) solid var(--theme--background);
border-radius: var(--theme--border-radius);
span {

2
app/src/interfaces/map/preview.svg
View File

@@ -1,5 +1,5 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="13" width="120" height="70" rx="6" fill="var(--theme--background-page)" class="glow" />
<rect x="18" y="13" width="120" height="70" rx="6" fill="var(--theme--background)" class="glow" />
<rect x="19" y="14" width="118" height="68" rx="5" stroke="var(--theme--primary)" stroke-width="2" />
<rect x="24" y="19" width="107.999" height="58" rx="2" fill="var(--theme--primary)" fill-opacity=".2" />
<path
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

2
app/src/interfaces/presentation-notice/preview.svg
View File

@@ -1,5 +1,5 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="25" width="120" height="46" rx="6" fill="var(--theme--background-page)" class="glow" />
<rect x="18" y="25" width="120" height="46" rx="6" fill="var(--theme--background)" class="glow" />
<rect x="46" y="35" width="50" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
<rect x="46" y="45" width="74" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
<rect x="46" y="55" width="30" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 941 B

After

Width:  |  Height:  |  Size: 936 B

4
app/src/interfaces/select-color/preview.svg
View File

@@ -1,7 +1,7 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="21" width="120" height="54" rx="6" fill="var(--theme--background-page)" />
<rect x="18" y="21" width="120" height="54" rx="6" fill="var(--theme--background)" />
<rect x="19" y="22" width="118" height="52" rx="5" stroke="var(--theme--primary)" stroke-opacity=".25" stroke-width="2" />
<rect x="18" y="21" width="120" height="26" rx="6" fill="var(--theme--background-page)" class="glow" />
<rect x="18" y="21" width="120" height="26" rx="6" fill="var(--theme--background)" class="glow" />
<rect x="19" y="22" width="118" height="24" rx="5" stroke="var(--theme--primary)" stroke-width="2" />
<rect x="46" y="31" width="50" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
<circle cx="33" cy="34" r="7" fill="var(--theme--primary)" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

10
app/src/interfaces/select-color/select-color.vue
View File

@@ -80,10 +80,14 @@ const isValidColor = computed<boolean>(() => rgb.value !== null && valueWithoutV
const lowContrast = computed(() => {
if (color.value === null) return true;
const pageColorString = cssVar('--theme--background');
const pageColor = Color(pageColorString);
const pageColorString = cssVar('--theme--form--field--input--background');
return color.value.contrast(pageColor) < 1.1;
try {
const pageColor = Color(pageColorString);
return color.value.contrast(pageColor) < 1.1;
} catch {
return true;
}
});
const getPresetContrast = (hex: string) => {

4
app/src/interfaces/select-dropdown-m2o/preview.svg
View File

@@ -1,10 +1,10 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="17.037" width="120" height="62" rx="6" fill="var(--theme--background-page)" />
<rect x="18" y="17.037" width="120" height="62" rx="6" fill="var(--theme--background)" />
<rect x="19" y="18.037" width="118" height="60" rx="5" stroke="var(--theme--primary)" stroke-opacity=".25"
stroke-width="2" />
<rect x="28" y="51" width="40" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
<rect x="28" y="63" width="60" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
<rect x="18" y="17" width="120" height="26" rx="6" fill="var(--theme--background-page)" class="glow" />
<rect x="18" y="17" width="120" height="26" rx="6" fill="var(--theme--background)" class="glow" />
<rect x="19" y="18" width="118" height="24" rx="5" stroke="var(--theme--primary)" stroke-width="2" />
<rect x="28" y="27" width="70" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
<path d="M120.966 28a.4.4 0 00-.283.683l3.034 3.034a.4.4 0 00.566 0l3.034-3.034a.4.4 0 00-.283-.683h-6.068z"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 965 B

After

Width:  |  Height:  |  Size: 955 B

4
app/src/interfaces/select-dropdown/preview.svg
View File

@@ -1,10 +1,10 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="17.037" width="120" height="62" rx="6" fill="var(--theme--background-page)" />
<rect x="18" y="17.037" width="120" height="62" rx="6" fill="var(--theme--background)" />
<rect x="19" y="18.037" width="118" height="60" rx="5" stroke="var(--theme--primary)" stroke-opacity=".25"
stroke-width="2" />
<rect x="28" y="51" width="40" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
<rect x="28" y="63" width="60" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
<rect x="18" y="17" width="120" height="26" rx="6" fill="var(--theme--background-page)" class="glow" />
<rect x="18" y="17" width="120" height="26" rx="6" fill="var(--theme--background)" class="glow" />
<rect x="19" y="18" width="118" height="24" rx="5" stroke="var(--theme--primary)" stroke-width="2" />
<rect x="28" y="27" width="70" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
<path d="M120.966 28a.4.4 0 00-.283.683l3.034 3.034a.4.4 0 00.566 0l3.034-3.034a.4.4 0 00-.283-.683h-6.068z"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 965 B

After

Width:  |  Height:  |  Size: 955 B

4
app/src/interfaces/select-icon/preview.svg
View File

@@ -1,7 +1,7 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="13" width="120" height="70" rx="6" fill="var(--theme--background-page)" />
<rect x="18" y="13" width="120" height="70" rx="6" fill="var(--theme--background)" />
<rect x="19" y="14" width="118" height="68" rx="5" stroke="var(--theme--primary)" stroke-opacity=".25" stroke-width="2" />
<rect x="18" y="13" width="120" height="26" rx="6" fill="var(--theme--background-page)" class="glow" />
<rect x="18" y="13" width="120" height="26" rx="6" fill="var(--theme--background)" class="glow" />
<rect x="19" y="14" width="118" height="24" rx="5" stroke="var(--theme--primary)" stroke-width="2" />
<rect x="46" y="23" width="50" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25" />
<path
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

2
app/src/interfaces/select-icon/select-icon.vue
View File

@@ -107,7 +107,7 @@ function setIcon(icon: string | null) {
}
.v-divider {
--v-divider-color: var(--theme--background);
--v-divider-color: var(--theme--background-normal);
margin: 0 22px;
}

6
app/src/interfaces/select-multiple-checkbox-tree/select-multiple-checkbox-tree.vue
View File

@@ -83,7 +83,7 @@ const searchDebounced = ref('');
.select-multiple-checkbox-tree {
max-height: var(--input-height-max);
overflow: auto;
background-color: var(--theme--background-page);
background-color: var(--theme--background);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
}
@@ -97,7 +97,7 @@ const searchDebounced = ref('');
}
.search .v-input {
box-shadow: 0 0 4px 4px var(--theme--background-page);
box-shadow: 0 0 4px 4px var(--theme--background);
}
.footer {
@@ -109,7 +109,7 @@ const searchDebounced = ref('');
width: max-content;
padding: 4px 8px;
text-align: right;
background-color: var(--theme--background-page);
background-color: var(--theme--background);
border-top-left-radius: var(--theme--border-radius);
}

8
app/src/interfaces/select-multiple-checkbox/select-multiple-checkbox.vue
View File

@@ -194,7 +194,7 @@ const { otherValues, addOtherValue, setOtherValue } = useCustomSelectionMultiple
width: 100%;
height: var(--input-height);
padding: 10px;
border: 2px dashed var(--theme--form--field--input--border-color);
border: var(--theme--border-width) dashed var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
input {
@@ -210,8 +210,8 @@ const { otherValues, addOtherValue, setOtherValue } = useCustomSelectionMultiple
}
&.has-value {
background-color: var(--background-subdued);
border: 2px solid var(--background-subdued);
background-color: var(--theme--form--field--input--background-subdued);
border: var(--theme--border-width) solid var(--theme--form--field--input--background-subdued);
}
&.active {
@@ -235,7 +235,7 @@ const { otherValues, addOtherValue, setOtherValue } = useCustomSelectionMultiple
}
&.disabled {
background-color: var(--background-subdued);
background-color: var(--theme--form--field--input--background-subdued);
border-color: transparent;
cursor: not-allowed;

2
app/src/interfaces/select-multiple-dropdown/preview.svg
View File

@@ -1,5 +1,5 @@
<svg width="156" height="96" viewBox="0 0 156 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="15" width="120" height="66" rx="6" fill="var(--theme--background-page)" class="glow" />
<rect x="18" y="15" width="120" height="66" rx="6" fill="var(--theme--background)" class="glow" />
<rect x="19" y="16" width="118" height="64" rx="5" stroke="var(--theme--primary)" stroke-width="2" />
<rect x="28" y="25" width="80" height="6" rx="2" fill="var(--theme--primary)" />
<rect x="28" y="45.1479" width="70" height="6" rx="2" fill="var(--theme--primary)" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 803 B

After

Width:  |  Height:  |  Size: 798 B

8
app/src/interfaces/select-radio/select-radio.vue
View File

@@ -138,7 +138,7 @@ const customIcon = computed(() => {
width: 100%;
height: var(--input-height);
padding: 10px;
border: 2px dashed var(--theme--form--field--input--border-color);
border: var(--theme--border-width) dashed var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
input {
@@ -158,8 +158,8 @@ const customIcon = computed(() => {
}
&.has-value {
background-color: var(--background-subdued);
border: 2px solid var(--background-subdued);
background-color: var(--theme--form--field--input--background-subdued);
border: var(--theme--border-width) solid var(--theme--form--field--input--background-subdued);
}
&.active {
@@ -183,7 +183,7 @@ const customIcon = computed(() => {
}
&.disabled {
background-color: var(--background-subdued);
background-color: var(--theme--form--field--input--background-subdued);
border-color: transparent;
cursor: not-allowed;

2
app/src/interfaces/tags/preview.svg
View File

@@ -1,5 +1,5 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="23" width="120" height="26" rx="6" fill="var(--theme--background-page)" class="glow"/>
<rect x="18" y="23" width="120" height="26" rx="6" fill="var(--theme--background)" class="glow"/>
<rect x="19" y="24" width="118" height="24" rx="5" stroke="var(--theme--primary)" stroke-width="2"/>
<rect x="28" y="33" width="30" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25"/>
<rect x="18" y="57" width="30" height="6" rx="2" fill="var(--theme--primary)"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

4
app/src/interfaces/tags/tags.vue
View File

@@ -188,7 +188,7 @@ function emitValue() {
--v-chip-color-hover: var(--foreground-inverted);
&.inactive {
--v-chip-background-color: var(--background-subdued);
--v-chip-background-color: var(--theme--form--field--input--background-subdued);
--v-chip-color: var(--theme--form--field--input--foreground-subdued);
--v-chip-background-color-hover: var(--theme--primary);
--v-chip-color-hover: var(--foreground-inverted);
@@ -201,7 +201,7 @@ function emitValue() {
--v-chip-background-color: var(--theme--primary);
--v-chip-color: var(--foreground-inverted);
--v-chip-background-color-hover: var(--theme--danger);
--v-chip-close-color: var(--v-chip-background-color, var(--theme--background));
--v-chip-close-color: var(--v-chip-background-color, var(--theme--background-normal));
--v-chip-close-color-hover: var(--white);
transition: all var(--fast) var(--transition);

2
app/src/interfaces/translations/language-select.vue
View File

@@ -120,7 +120,7 @@ const displayValue = computed(() => {
}
&:hover {
background-color: var(--theme--background);
background-color: var(--theme--background-normal);
}
.dot {

4
app/src/interfaces/translations/preview.svg
View File

@@ -1,9 +1,9 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="18" width="120" height="26" rx="6" fill="var(--theme--background-page)" class="glow"/>
<rect x="18" y="18" width="120" height="26" rx="6" fill="var(--theme--background)" class="glow"/>
<rect x="19" y="19" width="118" height="24" rx="5" stroke="var(--theme--primary)" stroke-width="2"/>
<rect x="28" y="28" width="50" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25"/>
<rect x="82" y="28" width="20" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25"/>
<rect opacity=".25" x="19" y="53" width="118" height="24" rx="5" fill="var(--theme--background-page)" stroke="var(--theme--primary)" stroke-width="2"/>
<rect opacity=".25" x="19" y="53" width="118" height="24" rx="5" fill="var(--theme--background)" stroke="var(--theme--primary)" stroke-width="2"/>
<rect x="28" y="62" width="20" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25"/>
<rect x="52" y="62" width="40" height="6" rx="2" fill="var(--theme--primary)" fill-opacity=".25"/>
<path d="m124.52 32.777-1.504-1.449.027-.027a9.996 9.996 0 0 0 2.16-3.801h1.723v-1.176h-4.102v-1.148h-1.148v1.148h-4.102V27.5h6.535c-.41 1.121-1.011 2.188-1.859 3.117a9.14 9.14 0 0 1-1.34-1.941h-1.176a10.89 10.89 0 0 0 1.75 2.652l-2.98 2.926.82.82 2.926-2.898 1.805 1.804.465-1.203Zm3.281-2.953h-1.176l-2.625 7h1.176l.656-1.75h2.762l.656 1.75h1.176l-2.625-7Zm-1.531 4.102.929-2.543.957 2.543h-1.886Z" fill="var(--theme--primary)"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

4
app/src/layouts/cards/components/card.vue
View File

@@ -145,7 +145,7 @@ function handleClick() {
justify-content: center;
width: 100%;
overflow: hidden;
background-color: var(--theme--background);
background-color: var(--theme--background-normal);
border-color: var(--theme--primary-subdued);
border-style: solid;
border-width: 0px;
@@ -220,7 +220,7 @@ function handleClick() {
z-index: 2;
width: 18px;
height: 18px;
background-color: var(--theme--background-page);
background-color: var(--theme--background);
border-radius: 24px;
opacity: 0;
transition: opacity var(--fast) var(--transition);

4
app/src/layouts/cards/components/header.vue
View File

@@ -127,10 +127,10 @@ function toggleDescending() {
height: 52px;
margin-bottom: 36px;
padding: 0 8px;
background-color: var(--theme--background-page);
background-color: var(--theme--background);
border-top: var(--theme--border-width) solid var(--theme--border-color-subdued);
border-bottom: var(--theme--border-width) solid var(--theme--border-color-subdued);
box-shadow: 0 0 0 2px var(--theme--background-page);
box-shadow: 0 0 0 2px var(--theme--background);
}
.start {

2
app/src/layouts/cards/index.ts
View File

@@ -17,7 +17,7 @@ import { LayoutOptions, LayoutQuery } from './types';
export default defineLayout<LayoutOptions, LayoutQuery>({
id: 'cards',
name: '$t:layouts.cards.cards',
icon: 'grid_4',
icon: 'grid_view',
component: CardsLayout,
headerShadow: false,
slots: {

8
app/src/layouts/kanban/kanban.vue
View File

@@ -219,7 +219,7 @@ const textFieldConfiguration = computed<Field | undefined>(() => {
flex-direction: column;
width: 320px;
padding: 8px 0;
background-color: var(--theme--background);
background-color: var(--theme--background-normal);
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
border-radius: var(--theme--border-radius);
margin-right: 20px;
@@ -287,7 +287,7 @@ const textFieldConfiguration = computed<Field | undefined>(() => {
display: block;
margin: 2px 16px 6px 16px;
padding: 12px 16px;
background-color: var(--theme--background-page);
background-color: var(--theme--background);
border-radius: var(--theme--border-radius);
box-shadow: 0px 2px 4px 0px rgba(var(--card-shadow-color), 0.1);
@@ -329,7 +329,7 @@ const textFieldConfiguration = computed<Field | undefined>(() => {
:deep(.v-chip) {
border: none;
background-color: var(--theme--background);
background-color: var(--theme--background-normal);
font-size: 12px;
font-weight: 600;
margin-top: 4px;
@@ -364,7 +364,7 @@ const textFieldConfiguration = computed<Field | undefined>(() => {
.avatar {
margin-left: calc(var(--user-spacing) * -1);
border-radius: 24px;
border: 4px solid var(--theme--background-page);
border: 4px solid var(--theme--background);
height: 32px;
width: 32px;
margin-bottom: -4px;

8
app/src/layouts/map/map.vue
View File

@@ -136,7 +136,7 @@ limitWritable.value = selectedSize;
<style lang="scss" scoped>
.v-info {
padding: 40px;
background-color: var(--theme--background-page);
background-color: var(--theme--background);
border-radius: var(--theme--border-radius);
box-shadow: var(--card-shadow);
pointer-events: none;
@@ -188,7 +188,7 @@ limitWritable.value = selectedSize;
font-weight: 500;
font-size: 14px;
font-family: var(--theme--font-family-sans-serif);
background-color: var(--theme--background-page);
background-color: var(--theme--background);
border-radius: var(--theme--border-radius);
box-shadow: var(--card-shadow);
transform: translate(-50%, -140%);
@@ -206,8 +206,8 @@ limitWritable.value = selectedSize;
height: 36px;
padding: 10px;
color: var(--theme--foreground-subdued);
background-color: var(--theme--background-page);
border: var(--theme--border-width) solid var(--theme--background-page);
background-color: var(--theme--background);
border: var(--theme--border-width) solid var(--theme--background);
border-radius: var(--theme--border-radius);
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);

2
app/src/layouts/tabular/index.ts
View File

@@ -22,7 +22,7 @@ import { LayoutOptions, LayoutQuery } from './types';
export default defineLayout<LayoutOptions, LayoutQuery>({
id: 'tabular',
name: '$t:layouts.tabular.tabular',
icon: 'reorder',
icon: 'table_rows',
component: TabularLayout,
slots: {
options: TabularOptions,

4
app/src/modules/content/components/live-preview.vue
View File

@@ -202,7 +202,7 @@ onMounted(() => {
<style>
#split-content {
background-color: var(--background-subdued);
background-color: var(--theme--background-subdued);
}
</style>
@@ -213,7 +213,7 @@ onMounted(() => {
.header {
.v-button.secondary {
--v-button-background-color: var(--background-subdued);
--v-button-background-color: var(--theme--background-subdued);
}
width: 100%;

2
app/src/modules/content/components/navigation.vue
View File

@@ -126,6 +126,6 @@ const hasHiddenCollections = computed(
z-index: 2;
padding: 12px;
padding-bottom: 0;
background-color: var(--theme--background);
background-color: var(--theme--background-normal);
}
</style>

2
app/src/modules/content/components/version-menu.vue
View File

@@ -426,7 +426,7 @@ async function onPromoteComplete(deleteOnPromote: boolean) {
display: flex;
margin-left: 16px;
padding: 2px;
background-color: var(--theme--background);
background-color: var(--theme--background-normal);
color: var(--theme--foreground);
border-radius: 24px;

2
app/src/modules/content/components/version-promote-drawer.vue
View File

@@ -271,7 +271,7 @@ function useTab() {
padding: 8px;
gap: 8px;
color: var(--theme--foreground-subdued);
background-color: var(--background-subdued);
background-color: var(--theme--background-subdued);
cursor: pointer;
.field-content {

Some files were not shown because too many files have changed in this diff Show More