limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-29 05:17:39 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Replace or remove theme 'X' vars

Browse source
This commit is contained in:
Aylam 2023-09-09 13:20:18 +03:00 committed by Laura Hausmann
parent b647ebf03f
commit 4a3f6afef6
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
36 changed files with 177 additions and 260 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/client/src/components/MkAutocomplete.vue
View file

@ -497,7 +497,7 @@ onBeforeUnmount(() => {
} }
&:hover { &:hover {
background: var(--X3); background: var(--interactiveElementHovered);
} }
&[data-selected="true"] { &[data-selected="true"] {

8
packages/client/src/components/MkButton.vue
View file

@ -150,11 +150,11 @@ function onMousedown(evt: MouseEvent): void {
background: var(--accent); background: var(--accent);
&:not(:disabled):hover { &:not(:disabled):hover {
background: var(--X8); background: var(--accentLightenLess);
} }
&:not(:disabled):active { &:not(:disabled):active {
background: var(--X8); background: var(--accentLightenLess);
} }
} }
@ -168,11 +168,11 @@ function onMousedown(evt: MouseEvent): void {
); );
&:not(:disabled):hover { &:not(:disabled):hover {
background: linear-gradient(90deg, var(--X8), var(--X8)); background: var(--accentLightenLess);
} }
&:not(:disabled):active { &:not(:disabled):active {
background: linear-gradient(90deg, var(--X8), var(--X8)); background: var(--accentLightenLess);
} }
} }

2
packages/client/src/components/MkChannelPreview.vue
View file

@ -89,7 +89,7 @@ const bannerStyle = computed(() => {
left: 0; left: 0;
width: 100%; width: 100%;
height: 64px; height: 64px;
background: linear-gradient(0deg, var(--panel), var(--X15)); background: linear-gradient(0deg, var(--panel), var(--panelFade));
} }
> .name { > .name {

2
packages/client/src/components/MkContainer.vue
View file

@ -259,7 +259,7 @@ export default defineComponent({
left: 0; left: 0;
width: 100%; width: 100%;
height: 64px; height: 64px;
background: linear-gradient(0deg, var(--panel), var(--X15)); background: linear-gradient(0deg, var(--panel), var(--panelFade));
> span { > span {
display: inline-block; display: inline-block;

2
packages/client/src/components/MkInstanceSelectDialog.vue
View file

@ -142,7 +142,7 @@ const cancel = () => {
font-size: 14px; font-size: 14px;
&:hover { &:hover {
background: var(--X7); background: var(--interactiveElementHovered);
} }
&.selected { &.selected {

2
packages/client/src/components/MkNoteDetailed.vue
View file

@ -583,7 +583,7 @@ onUnmounted(() => {
// @media (pointer: coarse) { // @media (pointer: coarse) {
// &:has(.button:focus-within) { // &:has(.button:focus-within) {
// z-index: 2; // z-index: 2;
// --X13: transparent; // --dividerHovered: transparent;
// &::after { // &::after {
// opacity: 1; // opacity: 1;
// backdrop-filter: var(--modalBgFilter); // backdrop-filter: var(--modalBgFilter);

2
packages/client/src/components/MkNoteSub.vue
View file

@ -724,7 +724,7 @@ function noteClick(e) {
} }
// &::after { // &::after {
// content: ""; // content: "";
// border-top: 1px solid var(--X13); // border-top: 1px solid var(--dividerHovered);
// position: absolute; // position: absolute;
// bottom: 0; // bottom: 0;
// margin-left: calc(var(--avatarSize) + 12px); // margin-left: calc(var(--avatarSize) + 12px);

4
packages/client/src/components/MkPostForm.vue
View file

@ -1187,7 +1187,7 @@ onMounted(() => {
margin: 0.3rem; margin: 0.3rem;
padding: 4px 0 4px 4px; padding: 4px 0 4px 4px;
border-radius: 999px; border-radius: 999px;
background: var(--X3); background: var(--interactiveElementHovered);
> button { > button {
padding: 4px 8px; padding: 4px 8px;
@ -1260,7 +1260,7 @@ onMounted(() => {
border-radius: 6px; border-radius: 6px;
&:hover { &:hover {
background: var(--X5); background: var(--postFormButtonHoverBg);
} }
&.active { &.active {

2
packages/client/src/components/MkUserSelectDialog.vue
View file

@ -184,7 +184,7 @@ onMounted(() => {
font-size: 14px; font-size: 14px;
&:hover { &:hover {
background: var(--X7); background: var(--interactiveElementHovered);
} }
&.selected { &.selected {

2
packages/client/src/components/MkUserSelectLocalDialog.vue
View file

@ -179,7 +179,7 @@ onMounted(() => {
font-size: 14px; font-size: 14px;
&:hover { &:hover {
background: var(--X7); background: var(--interactiveElementHovered);
} }
&.selected { &.selected {

6
packages/client/src/pages/channel.vue
View file

@ -143,7 +143,7 @@ const headerActions = $computed(() => [
text: i18n.ts.edit, text: i18n.ts.edit,
handler: edit, handler: edit,
}, },
] ]
: []), : []),
]); ]);
@ -155,7 +155,7 @@ definePageMetadata(
? { ? {
title: channel.name, title: channel.name,
icon: "ph-television ph-bold ph-lg", icon: "ph-television ph-bold ph-lg",
} }
: null, : null,
), ),
); );
@ -201,7 +201,7 @@ definePageMetadata(
left: 0; left: 0;
width: 100%; width: 100%;
height: 64px; height: 64px;
background: linear-gradient(0deg, var(--panel), var(--X15)); background: linear-gradient(0deg, var(--panel), var(--panelFade));
} }
> .status { > .status {

4
packages/client/src/pages/gallery/post.vue
View file

@ -241,7 +241,7 @@ definePageMetadata(
? { ? {
title: post.title, title: post.title,
avatar: post.user, avatar: post.user,
} }
: null, : null,
), ),
); );
@ -299,7 +299,7 @@ definePageMetadata(
> .like { > .like {
> .button { > .button {
--accent: #eb6f92; --accent: #eb6f92;
--X8: #eb6f92; --accentLightenLess: #eb6f92;
--buttonBg: rgb(216 71 106 / 5%); --buttonBg: rgb(216 71 106 / 5%);
--buttonHoverBg: rgb(216 71 106 / 10%); --buttonHoverBg: rgb(216 71 106 / 10%);
color: #eb6f92; color: #eb6f92;

2
packages/client/src/pages/messaging/messaging-room.message.vue
View file

@ -261,7 +261,7 @@ function del(): void {
padding-right: 32px; padding-right: 32px;
> .balloon { > .balloon {
$color: var(--X4); $color: var(--messagingIsNotMe);
background: $color; background: $color;
&.noText { &.noText {

2
packages/client/src/pages/mfm-cheat-sheet.vue
View file

@ -547,7 +547,7 @@ definePageMetadata({
font-weight: bold; font-weight: bold;
-webkit-backdrop-filter: var(--blur, blur(10px)); -webkit-backdrop-filter: var(--blur, blur(10px));
backdrop-filter: var(--blur, blur(10px)); backdrop-filter: var(--blur, blur(10px));
background-color: var(--X16); background-color: var(--panelTransparent);
} }
> .content { > .content {

4
packages/client/src/pages/page-editor/page-editor.container.vue
View file

@ -93,11 +93,11 @@ export default defineComponent({
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: var(--panel); background: var(--panel);
border: solid 2px var(--X12); border: solid 2px var(--divider);
border-radius: 6px; border-radius: 6px;
&:hover { &:hover {
border: solid 2px var(--X13); border: solid 2px var(--dividerHovered);
} }
&.warn { &.warn {

4
packages/client/src/pages/page.vue
View file

@ -315,7 +315,7 @@ definePageMetadata(
title: page.title || page.name, title: page.title || page.name,
text: page.summary, text: page.summary,
}, },
} }
: null, : null,
), ),
); );
@ -401,7 +401,7 @@ definePageMetadata(
> .like { > .like {
> .button { > .button {
--accent: #eb6f92; --accent: #eb6f92;
--X8: #eb6f92; --accentLightenLess: #eb6f92;
--buttonBg: rgb(216 71 106 / 5%); --buttonBg: rgb(216 71 106 / 5%);
--buttonHoverBg: rgb(216 71 106 / 10%); --buttonHoverBg: rgb(216 71 106 / 10%);
color: #eb6f92; color: #eb6f92;

2
packages/client/src/pages/welcome.entrance.c.vue
View file

@ -274,7 +274,7 @@ export default defineComponent({
background: linear-gradient( background: linear-gradient(
0deg, 0deg,
var(--panel), var(--panel),
var(--X15) var(--panelFade)
); );
} }
} }

8
packages/client/src/style.scss
View file

@ -302,11 +302,11 @@ hr {
background: var(--accent); background: var(--accent);
&:not(:disabled):hover { &:not(:disabled):hover {
background: var(--X8); background: var(--accentLightenLess);
} }
&:not(:disabled):active { &:not(:disabled):active {
background: var(--X9); background: var(--accentDarkenLess);
} }
} }
@ -320,11 +320,11 @@ hr {
); );
&:not(:disabled):hover { &:not(:disabled):hover {
background: linear-gradient(90deg, var(--X8), var(--X8)); background: var(--accentLightenLess)
} }
&:not(:disabled):active { &:not(:disabled):active {
background: linear-gradient(90deg, var(--X8), var(--X8)); background: var(--accentLightenLess)
} }
} }

26
packages/client/src/themes/_dark.json5
View file

@ -81,21 +81,15 @@
codeNumber: '#cfff9e', codeNumber: '#cfff9e',
codeBoolean: '#c59eff', codeBoolean: '#c59eff',
htmlThemeColor: '@bg', htmlThemeColor: '@bg',
X2: ':darken<2<@panel', interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
X3: 'rgba(255, 255, 255, 0.05)', messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
X4: 'rgba(255, 255, 255, 0.1)', postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
X5: 'rgba(255, 255, 255, 0.05)', accentLightenLess: ':lighten<5<@accent',
X6: 'rgba(255, 255, 255, 0.15)', accentDarkenLess: ':darken<5<@accent',
X7: 'rgba(255, 255, 255, 0.05)', calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
X8: ':lighten<5<@accent', dividerHovered: 'rgba(255, 255, 255, 0.15)',
X9: ':darken<5<@accent', navBgTransparent: ':alpha<0.5<@navBg',
X10: ':alpha<0.4<@accent', panelFade: ':alpha<0<@panel',
X11: 'rgba(0, 0, 0, 0.3)', panelTransparent: ':alpha<0.7<@panel',
X12: 'rgba(255, 255, 255, 0.1)',
X13: 'rgba(255, 255, 255, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
}, },
} }

26
packages/client/src/themes/_light.json5
View file

@ -81,21 +81,15 @@
codeNumber: '#0fbbbb', codeNumber: '#0fbbbb',
codeBoolean: '#62b70c', codeBoolean: '#62b70c',
htmlThemeColor: '@bg', htmlThemeColor: '@bg',
X2: ':darken<2<@panel', interactiveElementHovered: 'rgba(0, 0, 0, 0.05)',
X3: 'rgba(0, 0, 0, 0.05)', messagingIsNotMe: 'rgba(0, 0, 0, 0.1)',
X4: 'rgba(0, 0, 0, 0.1)', postFormButtonHoverBg: 'rgba(0, 0, 0, 0.05)',
X5: 'rgba(0, 0, 0, 0.05)', accentLightenLess: ':lighten<5<@accent',
X6: 'rgba(0, 0, 0, 0.25)', accentDarkenLess: ':darken<5<@accent',
X7: 'rgba(0, 0, 0, 0.05)', calendarInfoMeterBg: 'rgba(0, 0, 0, 0.1)',
X8: ':lighten<5<@accent', dividerHovered: 'rgba(0, 0, 0, 0.15)',
X9: ':darken<5<@accent', navBgTransparent: ':alpha<0.5<@navBg',
X10: ':alpha<0.4<@accent', panelFade: ':alpha<0<@panel',
X11: 'rgba(0, 0, 0, 0.1)', panelTransparent: ':alpha<0.7<@panel',
X12: 'rgba(0, 0, 0, 0.1)',
X13: 'rgba(0, 0, 0, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
}, },
} }

25
packages/client/src/themes/d-astro.json5
View file

@ -59,20 +59,15 @@
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)', wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
panelHeaderDivider: 'rgba(0, 0, 0, 0)', panelHeaderDivider: 'rgba(0, 0, 0, 0)',
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)', scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
X2: ':darken<2<@panel', interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
X3: 'rgba(255, 255, 255, 0.05)', messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
X4: 'rgba(255, 255, 255, 0.1)', postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
X5: 'rgba(255, 255, 255, 0.05)', accentLightenLess: ':lighten<5<@accent',
X6: 'rgba(255, 255, 255, 0.15)', accentDarkenLess: ':darken<5<@accent',
X7: 'rgba(255, 255, 255, 0.05)', calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
X8: ':lighten<5<@accent', dividerHovered: 'rgba(255, 255, 255, 0.15)',
X9: ':darken<5<@accent', navBgTransparent: ':alpha<0.5<@navBg',
X10: ':alpha<0.4<@accent', panelFade: ':alpha<0<@panel',
X11: 'rgba(0, 0, 0, 0.3)', panelTransparent: ':alpha<0.7<@panel',
X12: 'rgba(255, 255, 255, 0.1)',
X13: 'rgba(255, 255, 255, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
}, },
} }

26
packages/client/src/themes/d-catppuccin-frappe.json5
View file

@ -3,24 +3,18 @@
base: 'dark', base: 'dark',
name: 'Catppuccin frappe', name: 'Catppuccin frappe',
props: { props: {
X2: ':darken<2<@panel', interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
X3: 'rgba(255, 255, 255, 0.05)', messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
X4: 'rgba(255, 255, 255, 0.1)', postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
X5: 'rgba(255, 255, 255, 0.05)', accentLightenLess: ':lighten<5<@accent',
X6: 'rgba(255, 255, 255, 0.15)', accentDarkenLess: ':darken<5<@accent',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
bg: '#232634', bg: '#232634',
fg: '#c6d0f5', fg: '#c6d0f5',
X10: ':alpha<0.4<@accent', calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
X11: 'rgba(0, 0, 0, 0.3)', dividerHovered: 'rgba(255, 255, 255, 0.15)',
X12: 'rgba(255, 255, 255, 0.1)', navBgTransparent: ':alpha<0.5<@navBg',
X13: 'rgba(255, 255, 255, 0.15)', panelFade: ':alpha<0<@panel',
X14: ':alpha<0.5<@navBg', panelTransparent: ':alpha<0.7<@panel',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
cwBg: '#51576d', cwBg: '#51576d',
cwFg: '#b5bfe2', cwFg: '#b5bfe2',
link: '#8caaee', link: '#8caaee',

26
packages/client/src/themes/d-catppuccin-mocha.json5
View file

@ -3,24 +3,18 @@
base: 'dark', base: 'dark',
name: 'Catppuccin mocha', name: 'Catppuccin mocha',
props: { props: {
X2: ':darken<2<@panel', interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
X3: 'rgba(255, 255, 255, 0.05)', messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
X4: 'rgba(255, 255, 255, 0.1)', postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
X5: 'rgba(255, 255, 255, 0.05)', accentLightenLess: ':lighten<5<@accent',
X6: 'rgba(255, 255, 255, 0.15)', accentDarkenLess: ':darken<5<@accent',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
bg: '#11111b', bg: '#11111b',
fg: '#cdd6f4', fg: '#cdd6f4',
X10: ':alpha<0.4<@accent', calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
X11: 'rgba(0, 0, 0, 0.3)', dividerHovered: 'rgba(255, 255, 255, 0.15)',
X12: 'rgba(255, 255, 255, 0.1)', navBgTransparent: ':alpha<0.5<@navBg',
X13: 'rgba(255, 255, 255, 0.15)', panelFade: ':alpha<0<@panel',
X14: ':alpha<0.5<@navBg', panelTransparent: ':alpha<0.7<@panel',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
cwBg: '#45475a', cwBg: '#45475a',
cwFg: '#bac2de', cwFg: '#bac2de',
link: '#89b4fa', link: '#89b4fa',

26
packages/client/src/themes/d-nord.json5
View file

@ -4,24 +4,18 @@
desc: 'Nord: an arctic, north-bluish color palette', desc: 'Nord: an arctic, north-bluish color palette',
name: 'Nord Dark', name: 'Nord Dark',
props: { props: {
X2: ':darken<2<@panel', interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
X3: 'rgba(255, 255, 255, 0.05)', messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
X4: 'rgba(255, 255, 255, 0.1)', postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
X5: 'rgba(255, 255, 255, 0.05)', accentLightenLess: ':lighten<5<@accent',
X6: 'rgba(255, 255, 255, 0.15)', accentDarkenLess: ':darken<5<@accent',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
bg: '#2e3440', bg: '#2e3440',
fg: '#eceff4', fg: '#eceff4',
X10: ':alpha<0.4<@accent', calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
X11: 'rgba(0, 0, 0, 0.3)', dividerHovered: 'rgba(255, 255, 255, 0.15)',
X12: 'rgba(255, 255, 255, 0.1)', navBgTransparent: ':alpha<0.5<@navBg',
X13: 'rgba(255, 255, 255, 0.15)', panelFade: ':alpha<0<@panel',
X14: ':alpha<0.5<@navBg', panelTransparent: ':alpha<0.7<@panel',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
cwBg: '#4c566a', cwBg: '#4c566a',
cwFg: '#393f4f', cwFg: '#393f4f',
link: '#b48ead', link: '#b48ead',

26
packages/client/src/themes/d-rosepine.json5
View file

@ -4,24 +4,18 @@
desc: 'Soho vibes for Misskey', desc: 'Soho vibes for Misskey',
name: 'Rosé Pine', name: 'Rosé Pine',
props: { props: {
X2: ':darken<2<@panel', interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
X3: 'rgba(255, 255, 255, 0.05)', messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
X4: 'rgba(255, 255, 255, 0.1)', postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
X5: 'rgba(255, 255, 255, 0.05)', accentLightenLess: ':lighten<5<@accent',
X6: 'rgba(255, 255, 255, 0.15)', accentDarkenLess: ':darken<5<@accent',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
bg: '#191724', bg: '#191724',
fg: '#e0def4', fg: '#e0def4',
X10: ':alpha<0.4<@accent', calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
X11: 'rgba(0, 0, 0, 0.3)', dividerHovered: 'rgba(255, 255, 255, 0.15)',
X12: 'rgba(255, 255, 255, 0.1)', navBgTransparent: ':alpha<0.5<@navBg',
X13: 'rgba(255, 255, 255, 0.15)', panelFade: ':alpha<0<@panel',
X14: ':alpha<0.5<@navBg', panelTransparent: ':alpha<0.7<@panel',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
cwBg: '#1f1d2e', cwBg: '#1f1d2e',
cwFg: '#f6c177', cwFg: '#f6c177',
link: '#9ccfd8', link: '#9ccfd8',

26
packages/client/src/themes/d-rosepinemoon.json5
View file

@ -4,24 +4,18 @@
desc: 'Soho vibes for Misskey, moon edition', desc: 'Soho vibes for Misskey, moon edition',
name: 'Rosé Pine Moon', name: 'Rosé Pine Moon',
props: { props: {
X2: ':darken<2<@panel', interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
X3: 'rgba(255, 255, 255, 0.05)', messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
X4: 'rgba(255, 255, 255, 0.1)', postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
X5: 'rgba(255, 255, 255, 0.05)', accentLightenLess: ':lighten<5<@accent',
X6: 'rgba(255, 255, 255, 0.15)', accentDarkenLess: ':darken<5<@accent',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
bg: '#232136', bg: '#232136',
fg: '#e0def4', fg: '#e0def4',
X10: ':alpha<0.4<@accent', calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
X11: 'rgba(0, 0, 0, 0.3)', dividerHovered: 'rgba(255, 255, 255, 0.15)',
X12: 'rgba(255, 255, 255, 0.1)', navBgTransparent: ':alpha<0.5<@navBg',
X13: 'rgba(255, 255, 255, 0.15)', panelFade: ':alpha<0<@panel',
X14: ':alpha<0.5<@navBg', panelTransparent: ':alpha<0.7<@panel',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
cwBg: '#393552', cwBg: '#393552',
cwFg: '#f6c177', cwFg: '#f6c177',
link: '#3e8fb0', link: '#3e8fb0',

26
packages/client/src/themes/d-u0.json5
View file

@ -3,24 +3,18 @@
base: 'dark', base: 'dark',
name: 'Mi U0 Dark', name: 'Mi U0 Dark',
props: { props: {
X2: ':darken<2<@panel', interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
X3: 'rgba(255, 255, 255, 0.05)', messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
X4: 'rgba(255, 255, 255, 0.1)', postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
X5: 'rgba(255, 255, 255, 0.05)', accentLightenLess: ':lighten<5<@accent',
X6: 'rgba(255, 255, 255, 0.15)', accentDarkenLess: ':darken<5<@accent',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
bg: '#172426', bg: '#172426',
fg: '#dadada', fg: '#dadada',
X10: ':alpha<0.4<@accent', calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
X11: 'rgba(0, 0, 0, 0.3)', dividerHovered: 'rgba(255, 255, 255, 0.15)',
X12: 'rgba(255, 255, 255, 0.1)', navBgTransparent: ':alpha<0.5<@navBg',
X13: 'rgba(255, 255, 255, 0.15)', panelFade: ':alpha<0<@panel',
X14: ':alpha<0.5<@navBg', panelTransparent: ':alpha<0.7<@panel',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
cwBg: '#687390', cwBg: '#687390',
cwFg: '#393f4f', cwFg: '#393f4f',
link: '@accent', link: '@accent',

26
packages/client/src/themes/l-catppuccin-latte.json5
View file

@ -3,24 +3,18 @@
base: "light", base: "light",
name: "Catppuccin Latte", name: "Catppuccin Latte",
props: { props: {
X2: ":darken<2<@panel", interactiveElementHovered: "rgba(255, 255, 255, 0.05)",
X3: "rgba(255, 255, 255, 0.05)", messagingIsNotMe: "rgba(255, 255, 255, 0.1)",
X4: "rgba(255, 255, 255, 0.1)", postFormButtonHoverBg: "rgba(255, 255, 255, 0.05)",
X5: "rgba(255, 255, 255, 0.05)", accentLightenLess: ":lighten<5<@accent",
X6: "rgba(255, 255, 255, 0.15)", accentDarkenLess: ":darken<5<@accent",
X7: "rgba(255, 255, 255, 0.05)",
X8: ":lighten<5<@accent",
X9: ":darken<5<@accent",
bg: "#dce0e8", bg: "#dce0e8",
fg: "#4c4f69", fg: "#4c4f69",
X10: ":alpha<0.4<@accent", calendarInfoMeterBg: "rgba(0, 0, 0, 0.3)",
X11: "rgba(0, 0, 0, 0.3)", dividerHovered: "rgba(255, 255, 255, 0.15)",
X12: "rgba(255, 255, 255, 0.1)", navBgTransparent: ":alpha<0.5<@navBg",
X13: "rgba(255, 255, 255, 0.15)", panelFade: ":alpha<0<@panel",
X14: ":alpha<0.5<@navBg", panelTransparent: ":alpha<0.7<@panel",
X15: ":alpha<0<@panel",
X16: ":alpha<0.7<@panel",
X17: ":alpha<0.8<@bg",
cwBg: "#bcc0cc", cwBg: "#bcc0cc",
cwFg: "#5c5f77", cwFg: "#5c5f77",
link: "#1e66f5", link: "#1e66f5",

26
packages/client/src/themes/l-nord.json5
View file

@ -4,24 +4,18 @@
desc: 'Nord: an arctic, north-bluish color palette', desc: 'Nord: an arctic, north-bluish color palette',
name: 'Nord Light', name: 'Nord Light',
props: { props: {
X2: ':darken<2<@panel', interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
X3: 'rgba(255, 255, 255, 0.05)', messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
X4: 'rgba(255, 255, 255, 0.1)', postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
X5: 'rgba(255, 255, 255, 0.05)', accentLightenLess: ':lighten<5<@accent',
X6: 'rgba(255, 255, 255, 0.15)', accentDarkenLess: ':darken<5<@accent',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
bg: '#d8dee9', bg: '#d8dee9',
fg: '#3b4252', fg: '#3b4252',
X10: ':alpha<0.4<@accent', calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
X11: 'rgba(0, 0, 0, 0.3)', dividerHovered: 'rgba(255, 255, 255, 0.15)',
X12: 'rgba(255, 255, 255, 0.1)', navBgTransparent: ':alpha<0.5<@navBg',
X13: 'rgba(255, 255, 255, 0.15)', panelFade: ':alpha<0<@panel',
X14: ':alpha<0.5<@navBg', panelTransparent: ':alpha<0.7<@panel',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
cwBg: '#687390', cwBg: '#687390',
cwFg: '#393f4f', cwFg: '#393f4f',
link: '#44a4c1', link: '#44a4c1',

26
packages/client/src/themes/l-rosepinedawn.json5
View file

@ -68,22 +68,16 @@
codeNumber: '#0fbbbb', codeNumber: '#0fbbbb',
codeBoolean: '#62b70c', codeBoolean: '#62b70c',
htmlThemeColor: '@bg', htmlThemeColor: '@bg',
X2: ':darken<2<@panel', interactiveElementHovered: 'rgba(0, 0, 0, 0.05)',
X3: 'rgba(0, 0, 0, 0.05)', messagingIsNotMe: 'rgba(0, 0, 0, 0.1)',
X4: 'rgba(0, 0, 0, 0.1)', postFormButtonHoverBg: 'rgba(0, 0, 0, 0.05)',
X5: 'rgba(0, 0, 0, 0.05)', accentLightenLess: ':lighten<5<@accent',
X6: 'rgba(0, 0, 0, 0.25)', accentDarkenLess: ':darken<5<@accent',
X7: 'rgba(0, 0, 0, 0.05)', calendarInfoMeterBg: 'rgba(0, 0, 0, 0.1)',
X8: ':lighten<5<@accent', dividerHovered: 'rgba(0, 0, 0, 0.15)',
X9: ':darken<5<@accent', navBgTransparent: ':alpha<0.5<@navBg',
X10: ':alpha<0.4<@accent', panelFade: ':alpha<0<@panel',
X11: 'rgba(0, 0, 0, 0.1)', panelTransparent: ':alpha<0.7<@panel',
X12: 'rgba(0, 0, 0, 0.1)',
X13: 'rgba(0, 0, 0, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
}, },
author: '@thatonecalculator@stop.voring.me', author: '@thatonecalculator@stop.voring.me',
} }

26
packages/client/src/themes/l-u0.json5
View file

@ -3,24 +3,18 @@
base: 'light', base: 'light',
name: 'Mi U0 Light', name: 'Mi U0 Light',
props: { props: {
X2: ':darken<2<@panel', interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
X3: 'rgba(255, 255, 255, 0.05)', messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
X4: 'rgba(255, 255, 255, 0.1)', postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
X5: 'rgba(255, 255, 255, 0.05)', accentLightenLess: ':lighten<5<@accent',
X6: 'rgba(255, 255, 255, 0.15)', accentDarkenLess: ':darken<5<@accent',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
bg: '#e7e7eb', bg: '#e7e7eb',
fg: '#5f5f5f', fg: '#5f5f5f',
X10: ':alpha<0.4<@accent', calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
X11: 'rgba(0, 0, 0, 0.3)', dividerHovered: 'rgba(255, 255, 255, 0.15)',
X12: 'rgba(255, 255, 255, 0.1)', navBgTransparent: ':alpha<0.5<@navBg',
X13: 'rgba(255, 255, 255, 0.15)', panelFade: ':alpha<0<@panel',
X14: ':alpha<0.5<@navBg', panelTransparent: ':alpha<0.7<@panel',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
cwBg: '#687390', cwBg: '#687390',
cwFg: '#393f4f', cwFg: '#393f4f',
link: '@accent', link: '@accent',

26
packages/client/src/themes/l-vivid.json5
View file

@ -62,21 +62,15 @@
fgTransparentWeak: ':alpha<0.75<@fg', fgTransparentWeak: ':alpha<0.75<@fg',
panelHeaderDivider: '@divider', panelHeaderDivider: '@divider',
scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)', scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
X2: ':darken<2<@panel', interactiveElementHovered: 'rgba(0, 0, 0, 0.05)',
X3: 'rgba(0, 0, 0, 0.05)', messagingIsNotMe: 'rgba(0, 0, 0, 0.1)',
X4: 'rgba(0, 0, 0, 0.1)', postFormButtonHoverBg: 'rgba(0, 0, 0, 0.05)',
X5: 'rgba(0, 0, 0, 0.05)', accentLightenLess: ':lighten<5<@accent',
X6: 'rgba(0, 0, 0, 0.25)', accentDarkenLess: ':darken<5<@accent',
X7: 'rgba(0, 0, 0, 0.05)', calendarInfoMeterBg: 'rgba(0, 0, 0, 0.1)',
X8: ':lighten<5<@accent', dividerHovered: 'rgba(0, 0, 0, 0.15)',
X9: ':darken<5<@accent', navBgTransparent: ':alpha<0.5<@navBg',
X10: ':alpha<0.4<@accent', panelFade: ':alpha<0<@panel',
X11: 'rgba(0, 0, 0, 0.1)', panelTransparent: ':alpha<0.7<@panel',
X12: 'rgba(0, 0, 0, 0.1)',
X13: 'rgba(0, 0, 0, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
}, },
} }

4
packages/client/src/ui/_common_/navbar-for-mobile.vue
View file

@ -171,7 +171,7 @@ function more() {
top: 0; top: 0;
z-index: 1; z-index: 1;
padding: 2rem 0; padding: 2rem 0;
background: var(--X14); background: var(--navBgTransparent);
-webkit-backdrop-filter: var(--blur, blur(8px)); -webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px)); backdrop-filter: var(--blur, blur(8px));
@ -213,7 +213,7 @@ function more() {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
padding: 20px 0; padding: 20px 0;
background: var(--X14); background: var(--navBgTransparent);
-webkit-backdrop-filter: var(--blur, blur(8px)); -webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px)); backdrop-filter: var(--blur, blur(8px));

6
packages/client/src/ui/deck.vue
View file

@ -30,7 +30,7 @@
) )
.map((c) => c.width), .map((c) => c.width),
) + 'px', ) + 'px',
} }
" "
@wheel.self="onWheel" @wheel.self="onWheel"
> >
@ -58,7 +58,7 @@
columns.find( columns.find(
(c) => c.id === ids[0], (c) => c.id === ids[0],
)!.width + 'px', )!.width + 'px',
} }
" "
@parent-focus="moveFocus(ids[0], $event)" @parent-focus="moveFocus(ids[0], $event)"
@headerWheel="onWheel" @headerWheel="onWheel"
@ -558,7 +558,7 @@ async function deleteProfile() {
} }
&:hover { &:hover {
background: var(--X2); background: var(--buttonHoverBg);
} }
> .indicator { > .indicator {

2
packages/client/src/ui/visitor/header.vue
View file

@ -174,7 +174,7 @@ export default defineComponent({
line-height: $height; line-height: $height;
-webkit-backdrop-filter: var(--blur, blur(32px)); -webkit-backdrop-filter: var(--blur, blur(32px));
backdrop-filter: var(--blur, blur(32px)); backdrop-filter: var(--blur, blur(32px));
background-color: var(--X16); background-color: var(--panelTransparent);
> .wide { > .wide {
> .content { > .content {

2
packages/client/src/widgets/calendar.vue
View file

@ -214,7 +214,7 @@ defineExpose<WidgetComponentExpose>({
> .meter { > .meter {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
background: var(--X11); background: var(--calendarInfoMeterBg);
border-radius: 8px; border-radius: 8px;
> .val { > .val {