From 4a3f6afef60b0690afb179aa5f4ab9f530c667c5 Mon Sep 17 00:00:00 2001 From: Aylam Date: Sat, 9 Sep 2023 13:20:18 +0300 Subject: [PATCH] Replace or remove theme 'X' vars --- .../client/src/components/MkAutocomplete.vue | 2 +- packages/client/src/components/MkButton.vue | 8 +++--- .../src/components/MkChannelPreview.vue | 2 +- .../client/src/components/MkContainer.vue | 2 +- .../src/components/MkInstanceSelectDialog.vue | 2 +- .../client/src/components/MkNoteDetailed.vue | 2 +- packages/client/src/components/MkNoteSub.vue | 2 +- packages/client/src/components/MkPostForm.vue | 4 +-- .../src/components/MkUserSelectDialog.vue | 2 +- .../components/MkUserSelectLocalDialog.vue | 2 +- packages/client/src/pages/channel.vue | 6 ++--- packages/client/src/pages/gallery/post.vue | 4 +-- .../messaging/messaging-room.message.vue | 2 +- packages/client/src/pages/mfm-cheat-sheet.vue | 2 +- .../page-editor/page-editor.container.vue | 4 +-- packages/client/src/pages/page.vue | 4 +-- .../client/src/pages/welcome.entrance.c.vue | 2 +- packages/client/src/style.scss | 8 +++--- packages/client/src/themes/_dark.json5 | 26 +++++++------------ packages/client/src/themes/_light.json5 | 26 +++++++------------ packages/client/src/themes/d-astro.json5 | 25 +++++++----------- .../src/themes/d-catppuccin-frappe.json5 | 26 +++++++------------ .../src/themes/d-catppuccin-mocha.json5 | 26 +++++++------------ packages/client/src/themes/d-nord.json5 | 26 +++++++------------ packages/client/src/themes/d-rosepine.json5 | 26 +++++++------------ .../client/src/themes/d-rosepinemoon.json5 | 26 +++++++------------ packages/client/src/themes/d-u0.json5 | 26 +++++++------------ .../src/themes/l-catppuccin-latte.json5 | 26 +++++++------------ packages/client/src/themes/l-nord.json5 | 26 +++++++------------ .../client/src/themes/l-rosepinedawn.json5 | 26 +++++++------------ packages/client/src/themes/l-u0.json5 | 26 +++++++------------ packages/client/src/themes/l-vivid.json5 | 26 +++++++------------ .../src/ui/_common_/navbar-for-mobile.vue | 4 +-- packages/client/src/ui/deck.vue | 6 ++--- packages/client/src/ui/visitor/header.vue | 2 +- packages/client/src/widgets/calendar.vue | 2 +- 36 files changed, 177 insertions(+), 260 deletions(-) diff --git a/packages/client/src/components/MkAutocomplete.vue b/packages/client/src/components/MkAutocomplete.vue index 5fcee6e5a..4181f31f5 100644 --- a/packages/client/src/components/MkAutocomplete.vue +++ b/packages/client/src/components/MkAutocomplete.vue @@ -497,7 +497,7 @@ onBeforeUnmount(() => { } &:hover { - background: var(--X3); + background: var(--interactiveElementHovered); } &[data-selected="true"] { diff --git a/packages/client/src/components/MkButton.vue b/packages/client/src/components/MkButton.vue index 3a6b8f321..1494fcd54 100644 --- a/packages/client/src/components/MkButton.vue +++ b/packages/client/src/components/MkButton.vue @@ -150,11 +150,11 @@ function onMousedown(evt: MouseEvent): void { background: var(--accent); &:not(:disabled):hover { - background: var(--X8); + background: var(--accentLightenLess); } &:not(:disabled):active { - background: var(--X8); + background: var(--accentLightenLess); } } @@ -168,11 +168,11 @@ function onMousedown(evt: MouseEvent): void { ); &:not(:disabled):hover { - background: linear-gradient(90deg, var(--X8), var(--X8)); + background: var(--accentLightenLess); } &:not(:disabled):active { - background: linear-gradient(90deg, var(--X8), var(--X8)); + background: var(--accentLightenLess); } } diff --git a/packages/client/src/components/MkChannelPreview.vue b/packages/client/src/components/MkChannelPreview.vue index 12df63bf0..55b411b50 100644 --- a/packages/client/src/components/MkChannelPreview.vue +++ b/packages/client/src/components/MkChannelPreview.vue @@ -89,7 +89,7 @@ const bannerStyle = computed(() => { left: 0; width: 100%; height: 64px; - background: linear-gradient(0deg, var(--panel), var(--X15)); + background: linear-gradient(0deg, var(--panel), var(--panelFade)); } > .name { diff --git a/packages/client/src/components/MkContainer.vue b/packages/client/src/components/MkContainer.vue index 468982129..be477a8f3 100644 --- a/packages/client/src/components/MkContainer.vue +++ b/packages/client/src/components/MkContainer.vue @@ -259,7 +259,7 @@ export default defineComponent({ left: 0; width: 100%; height: 64px; - background: linear-gradient(0deg, var(--panel), var(--X15)); + background: linear-gradient(0deg, var(--panel), var(--panelFade)); > span { display: inline-block; diff --git a/packages/client/src/components/MkInstanceSelectDialog.vue b/packages/client/src/components/MkInstanceSelectDialog.vue index 80acaf339..e9def98fa 100644 --- a/packages/client/src/components/MkInstanceSelectDialog.vue +++ b/packages/client/src/components/MkInstanceSelectDialog.vue @@ -142,7 +142,7 @@ const cancel = () => { font-size: 14px; &:hover { - background: var(--X7); + background: var(--interactiveElementHovered); } &.selected { diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue index dd28974d6..d3cbf19a1 100644 --- a/packages/client/src/components/MkNoteDetailed.vue +++ b/packages/client/src/components/MkNoteDetailed.vue @@ -583,7 +583,7 @@ onUnmounted(() => { // @media (pointer: coarse) { // &:has(.button:focus-within) { // z-index: 2; - // --X13: transparent; + // --dividerHovered: transparent; // &::after { // opacity: 1; // backdrop-filter: var(--modalBgFilter); diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue index e4a97d234..5bc7f3e5f 100644 --- a/packages/client/src/components/MkNoteSub.vue +++ b/packages/client/src/components/MkNoteSub.vue @@ -724,7 +724,7 @@ function noteClick(e) { } // &::after { // content: ""; - // border-top: 1px solid var(--X13); + // border-top: 1px solid var(--dividerHovered); // position: absolute; // bottom: 0; // margin-left: calc(var(--avatarSize) + 12px); diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue index d5d4007b9..60b51051e 100644 --- a/packages/client/src/components/MkPostForm.vue +++ b/packages/client/src/components/MkPostForm.vue @@ -1187,7 +1187,7 @@ onMounted(() => { margin: 0.3rem; padding: 4px 0 4px 4px; border-radius: 999px; - background: var(--X3); + background: var(--interactiveElementHovered); > button { padding: 4px 8px; @@ -1260,7 +1260,7 @@ onMounted(() => { border-radius: 6px; &:hover { - background: var(--X5); + background: var(--postFormButtonHoverBg); } &.active { diff --git a/packages/client/src/components/MkUserSelectDialog.vue b/packages/client/src/components/MkUserSelectDialog.vue index 507d63c6b..4d5cff92f 100644 --- a/packages/client/src/components/MkUserSelectDialog.vue +++ b/packages/client/src/components/MkUserSelectDialog.vue @@ -184,7 +184,7 @@ onMounted(() => { font-size: 14px; &:hover { - background: var(--X7); + background: var(--interactiveElementHovered); } &.selected { diff --git a/packages/client/src/components/MkUserSelectLocalDialog.vue b/packages/client/src/components/MkUserSelectLocalDialog.vue index e3c3f2538..dd71a18e5 100644 --- a/packages/client/src/components/MkUserSelectLocalDialog.vue +++ b/packages/client/src/components/MkUserSelectLocalDialog.vue @@ -179,7 +179,7 @@ onMounted(() => { font-size: 14px; &:hover { - background: var(--X7); + background: var(--interactiveElementHovered); } &.selected { diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue index 704095829..d54c13d77 100644 --- a/packages/client/src/pages/channel.vue +++ b/packages/client/src/pages/channel.vue @@ -143,7 +143,7 @@ const headerActions = $computed(() => [ text: i18n.ts.edit, handler: edit, }, - ] + ] : []), ]); @@ -155,7 +155,7 @@ definePageMetadata( ? { title: channel.name, icon: "ph-television ph-bold ph-lg", - } + } : null, ), ); @@ -201,7 +201,7 @@ definePageMetadata( left: 0; width: 100%; height: 64px; - background: linear-gradient(0deg, var(--panel), var(--X15)); + background: linear-gradient(0deg, var(--panel), var(--panelFade)); } > .status { diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue index fe6f2158f..568d85f94 100644 --- a/packages/client/src/pages/gallery/post.vue +++ b/packages/client/src/pages/gallery/post.vue @@ -241,7 +241,7 @@ definePageMetadata( ? { title: post.title, avatar: post.user, - } + } : null, ), ); @@ -299,7 +299,7 @@ definePageMetadata( > .like { > .button { --accent: #eb6f92; - --X8: #eb6f92; + --accentLightenLess: #eb6f92; --buttonBg: rgb(216 71 106 / 5%); --buttonHoverBg: rgb(216 71 106 / 10%); color: #eb6f92; diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue index d49eda3be..f3fb921e3 100644 --- a/packages/client/src/pages/messaging/messaging-room.message.vue +++ b/packages/client/src/pages/messaging/messaging-room.message.vue @@ -261,7 +261,7 @@ function del(): void { padding-right: 32px; > .balloon { - $color: var(--X4); + $color: var(--messagingIsNotMe); background: $color; &.noText { diff --git a/packages/client/src/pages/mfm-cheat-sheet.vue b/packages/client/src/pages/mfm-cheat-sheet.vue index acb0f56c6..e870ecbdf 100644 --- a/packages/client/src/pages/mfm-cheat-sheet.vue +++ b/packages/client/src/pages/mfm-cheat-sheet.vue @@ -547,7 +547,7 @@ definePageMetadata({ font-weight: bold; -webkit-backdrop-filter: var(--blur, blur(10px)); backdrop-filter: var(--blur, blur(10px)); - background-color: var(--X16); + background-color: var(--panelTransparent); } > .content { diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue index 400c705d6..ca01111a1 100644 --- a/packages/client/src/pages/page-editor/page-editor.container.vue +++ b/packages/client/src/pages/page-editor/page-editor.container.vue @@ -93,11 +93,11 @@ export default defineComponent({ position: relative; overflow: hidden; background: var(--panel); - border: solid 2px var(--X12); + border: solid 2px var(--divider); border-radius: 6px; &:hover { - border: solid 2px var(--X13); + border: solid 2px var(--dividerHovered); } &.warn { diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue index dca50c25f..069d5da29 100644 --- a/packages/client/src/pages/page.vue +++ b/packages/client/src/pages/page.vue @@ -315,7 +315,7 @@ definePageMetadata( title: page.title || page.name, text: page.summary, }, - } + } : null, ), ); @@ -401,7 +401,7 @@ definePageMetadata( > .like { > .button { --accent: #eb6f92; - --X8: #eb6f92; + --accentLightenLess: #eb6f92; --buttonBg: rgb(216 71 106 / 5%); --buttonHoverBg: rgb(216 71 106 / 10%); color: #eb6f92; diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue index 2d9777f9e..c5202c9ad 100644 --- a/packages/client/src/pages/welcome.entrance.c.vue +++ b/packages/client/src/pages/welcome.entrance.c.vue @@ -274,7 +274,7 @@ export default defineComponent({ background: linear-gradient( 0deg, var(--panel), - var(--X15) + var(--panelFade) ); } } diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss index 074aa25ca..5cb3f9f6d 100644 --- a/packages/client/src/style.scss +++ b/packages/client/src/style.scss @@ -302,11 +302,11 @@ hr { background: var(--accent); &:not(:disabled):hover { - background: var(--X8); + background: var(--accentLightenLess); } &:not(:disabled):active { - background: var(--X9); + background: var(--accentDarkenLess); } } @@ -320,11 +320,11 @@ hr { ); &:not(:disabled):hover { - background: linear-gradient(90deg, var(--X8), var(--X8)); + background: var(--accentLightenLess) } &:not(:disabled):active { - background: linear-gradient(90deg, var(--X8), var(--X8)); + background: var(--accentLightenLess) } } diff --git a/packages/client/src/themes/_dark.json5 b/packages/client/src/themes/_dark.json5 index 1653c195e..5d671b3ab 100644 --- a/packages/client/src/themes/_dark.json5 +++ b/packages/client/src/themes/_dark.json5 @@ -81,21 +81,15 @@ codeNumber: '#cfff9e', codeBoolean: '#c59eff', htmlThemeColor: '@bg', - X2: ':darken<2<@panel', - X3: 'rgba(255, 255, 255, 0.05)', - X4: 'rgba(255, 255, 255, 0.1)', - X5: 'rgba(255, 255, 255, 0.05)', - X6: 'rgba(255, 255, 255, 0.15)', - X7: 'rgba(255, 255, 255, 0.05)', - X8: ':lighten<5<@accent', - X9: ':darken<5<@accent', - X10: ':alpha<0.4<@accent', - X11: 'rgba(0, 0, 0, 0.3)', - 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', + interactiveElementHovered: 'rgba(255, 255, 255, 0.05)', + messagingIsNotMe: 'rgba(255, 255, 255, 0.1)', + postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)', + accentLightenLess: ':lighten<5<@accent', + accentDarkenLess: ':darken<5<@accent', + calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)', + dividerHovered: 'rgba(255, 255, 255, 0.15)', + navBgTransparent: ':alpha<0.5<@navBg', + panelFade: ':alpha<0<@panel', + panelTransparent: ':alpha<0.7<@panel', }, } diff --git a/packages/client/src/themes/_light.json5 b/packages/client/src/themes/_light.json5 index 185a07e20..4aed71373 100644 --- a/packages/client/src/themes/_light.json5 +++ b/packages/client/src/themes/_light.json5 @@ -81,21 +81,15 @@ codeNumber: '#0fbbbb', codeBoolean: '#62b70c', htmlThemeColor: '@bg', - X2: ':darken<2<@panel', - X3: 'rgba(0, 0, 0, 0.05)', - X4: 'rgba(0, 0, 0, 0.1)', - X5: 'rgba(0, 0, 0, 0.05)', - X6: 'rgba(0, 0, 0, 0.25)', - X7: 'rgba(0, 0, 0, 0.05)', - X8: ':lighten<5<@accent', - X9: ':darken<5<@accent', - X10: ':alpha<0.4<@accent', - X11: 'rgba(0, 0, 0, 0.1)', - 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', + interactiveElementHovered: 'rgba(0, 0, 0, 0.05)', + messagingIsNotMe: 'rgba(0, 0, 0, 0.1)', + postFormButtonHoverBg: 'rgba(0, 0, 0, 0.05)', + accentLightenLess: ':lighten<5<@accent', + accentDarkenLess: ':darken<5<@accent', + calendarInfoMeterBg: 'rgba(0, 0, 0, 0.1)', + dividerHovered: 'rgba(0, 0, 0, 0.15)', + navBgTransparent: ':alpha<0.5<@navBg', + panelFade: ':alpha<0<@panel', + panelTransparent: ':alpha<0.7<@panel', }, } diff --git a/packages/client/src/themes/d-astro.json5 b/packages/client/src/themes/d-astro.json5 index c6a927ec3..497e521d8 100644 --- a/packages/client/src/themes/d-astro.json5 +++ b/packages/client/src/themes/d-astro.json5 @@ -59,20 +59,15 @@ wallpaperOverlay: 'rgba(0, 0, 0, 0.5)', panelHeaderDivider: 'rgba(0, 0, 0, 0)', scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)', - X2: ':darken<2<@panel', - X3: 'rgba(255, 255, 255, 0.05)', - X4: 'rgba(255, 255, 255, 0.1)', - X5: 'rgba(255, 255, 255, 0.05)', - X6: 'rgba(255, 255, 255, 0.15)', - X7: 'rgba(255, 255, 255, 0.05)', - X8: ':lighten<5<@accent', - X9: ':darken<5<@accent', - X10: ':alpha<0.4<@accent', - X11: 'rgba(0, 0, 0, 0.3)', - 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', + interactiveElementHovered: 'rgba(255, 255, 255, 0.05)', + messagingIsNotMe: 'rgba(255, 255, 255, 0.1)', + postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)', + accentLightenLess: ':lighten<5<@accent', + accentDarkenLess: ':darken<5<@accent', + calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)', + dividerHovered: 'rgba(255, 255, 255, 0.15)', + navBgTransparent: ':alpha<0.5<@navBg', + panelFade: ':alpha<0<@panel', + panelTransparent: ':alpha<0.7<@panel', }, } diff --git a/packages/client/src/themes/d-catppuccin-frappe.json5 b/packages/client/src/themes/d-catppuccin-frappe.json5 index 891fe1805..10aa4b17a 100644 --- a/packages/client/src/themes/d-catppuccin-frappe.json5 +++ b/packages/client/src/themes/d-catppuccin-frappe.json5 @@ -3,24 +3,18 @@ base: 'dark', name: 'Catppuccin frappe', props: { - X2: ':darken<2<@panel', - X3: 'rgba(255, 255, 255, 0.05)', - X4: 'rgba(255, 255, 255, 0.1)', - X5: 'rgba(255, 255, 255, 0.05)', - X6: 'rgba(255, 255, 255, 0.15)', - X7: 'rgba(255, 255, 255, 0.05)', - X8: ':lighten<5<@accent', - X9: ':darken<5<@accent', + interactiveElementHovered: 'rgba(255, 255, 255, 0.05)', + messagingIsNotMe: 'rgba(255, 255, 255, 0.1)', + postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)', + accentLightenLess: ':lighten<5<@accent', + accentDarkenLess: ':darken<5<@accent', bg: '#232634', fg: '#c6d0f5', - X10: ':alpha<0.4<@accent', - X11: 'rgba(0, 0, 0, 0.3)', - 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', + calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)', + dividerHovered: 'rgba(255, 255, 255, 0.15)', + navBgTransparent: ':alpha<0.5<@navBg', + panelFade: ':alpha<0<@panel', + panelTransparent: ':alpha<0.7<@panel', cwBg: '#51576d', cwFg: '#b5bfe2', link: '#8caaee', diff --git a/packages/client/src/themes/d-catppuccin-mocha.json5 b/packages/client/src/themes/d-catppuccin-mocha.json5 index 94e1381c7..686567f19 100644 --- a/packages/client/src/themes/d-catppuccin-mocha.json5 +++ b/packages/client/src/themes/d-catppuccin-mocha.json5 @@ -3,24 +3,18 @@ base: 'dark', name: 'Catppuccin mocha', props: { - X2: ':darken<2<@panel', - X3: 'rgba(255, 255, 255, 0.05)', - X4: 'rgba(255, 255, 255, 0.1)', - X5: 'rgba(255, 255, 255, 0.05)', - X6: 'rgba(255, 255, 255, 0.15)', - X7: 'rgba(255, 255, 255, 0.05)', - X8: ':lighten<5<@accent', - X9: ':darken<5<@accent', + interactiveElementHovered: 'rgba(255, 255, 255, 0.05)', + messagingIsNotMe: 'rgba(255, 255, 255, 0.1)', + postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)', + accentLightenLess: ':lighten<5<@accent', + accentDarkenLess: ':darken<5<@accent', bg: '#11111b', fg: '#cdd6f4', - X10: ':alpha<0.4<@accent', - X11: 'rgba(0, 0, 0, 0.3)', - 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', + calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)', + dividerHovered: 'rgba(255, 255, 255, 0.15)', + navBgTransparent: ':alpha<0.5<@navBg', + panelFade: ':alpha<0<@panel', + panelTransparent: ':alpha<0.7<@panel', cwBg: '#45475a', cwFg: '#bac2de', link: '#89b4fa', diff --git a/packages/client/src/themes/d-nord.json5 b/packages/client/src/themes/d-nord.json5 index 7e8b4f4d0..4f141c3da 100644 --- a/packages/client/src/themes/d-nord.json5 +++ b/packages/client/src/themes/d-nord.json5 @@ -4,24 +4,18 @@ desc: 'Nord: an arctic, north-bluish color palette', name: 'Nord Dark', props: { - X2: ':darken<2<@panel', - X3: 'rgba(255, 255, 255, 0.05)', - X4: 'rgba(255, 255, 255, 0.1)', - X5: 'rgba(255, 255, 255, 0.05)', - X6: 'rgba(255, 255, 255, 0.15)', - X7: 'rgba(255, 255, 255, 0.05)', - X8: ':lighten<5<@accent', - X9: ':darken<5<@accent', + interactiveElementHovered: 'rgba(255, 255, 255, 0.05)', + messagingIsNotMe: 'rgba(255, 255, 255, 0.1)', + postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)', + accentLightenLess: ':lighten<5<@accent', + accentDarkenLess: ':darken<5<@accent', bg: '#2e3440', fg: '#eceff4', - X10: ':alpha<0.4<@accent', - X11: 'rgba(0, 0, 0, 0.3)', - 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', + calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)', + dividerHovered: 'rgba(255, 255, 255, 0.15)', + navBgTransparent: ':alpha<0.5<@navBg', + panelFade: ':alpha<0<@panel', + panelTransparent: ':alpha<0.7<@panel', cwBg: '#4c566a', cwFg: '#393f4f', link: '#b48ead', diff --git a/packages/client/src/themes/d-rosepine.json5 b/packages/client/src/themes/d-rosepine.json5 index c948c29cf..cb3459996 100644 --- a/packages/client/src/themes/d-rosepine.json5 +++ b/packages/client/src/themes/d-rosepine.json5 @@ -4,24 +4,18 @@ desc: 'Soho vibes for Misskey', name: 'Rosé Pine', props: { - X2: ':darken<2<@panel', - X3: 'rgba(255, 255, 255, 0.05)', - X4: 'rgba(255, 255, 255, 0.1)', - X5: 'rgba(255, 255, 255, 0.05)', - X6: 'rgba(255, 255, 255, 0.15)', - X7: 'rgba(255, 255, 255, 0.05)', - X8: ':lighten<5<@accent', - X9: ':darken<5<@accent', + interactiveElementHovered: 'rgba(255, 255, 255, 0.05)', + messagingIsNotMe: 'rgba(255, 255, 255, 0.1)', + postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)', + accentLightenLess: ':lighten<5<@accent', + accentDarkenLess: ':darken<5<@accent', bg: '#191724', fg: '#e0def4', - X10: ':alpha<0.4<@accent', - X11: 'rgba(0, 0, 0, 0.3)', - 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', + calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)', + dividerHovered: 'rgba(255, 255, 255, 0.15)', + navBgTransparent: ':alpha<0.5<@navBg', + panelFade: ':alpha<0<@panel', + panelTransparent: ':alpha<0.7<@panel', cwBg: '#1f1d2e', cwFg: '#f6c177', link: '#9ccfd8', diff --git a/packages/client/src/themes/d-rosepinemoon.json5 b/packages/client/src/themes/d-rosepinemoon.json5 index 97c368a0f..7d23972dc 100644 --- a/packages/client/src/themes/d-rosepinemoon.json5 +++ b/packages/client/src/themes/d-rosepinemoon.json5 @@ -4,24 +4,18 @@ desc: 'Soho vibes for Misskey, moon edition', name: 'Rosé Pine Moon', props: { - X2: ':darken<2<@panel', - X3: 'rgba(255, 255, 255, 0.05)', - X4: 'rgba(255, 255, 255, 0.1)', - X5: 'rgba(255, 255, 255, 0.05)', - X6: 'rgba(255, 255, 255, 0.15)', - X7: 'rgba(255, 255, 255, 0.05)', - X8: ':lighten<5<@accent', - X9: ':darken<5<@accent', + interactiveElementHovered: 'rgba(255, 255, 255, 0.05)', + messagingIsNotMe: 'rgba(255, 255, 255, 0.1)', + postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)', + accentLightenLess: ':lighten<5<@accent', + accentDarkenLess: ':darken<5<@accent', bg: '#232136', fg: '#e0def4', - X10: ':alpha<0.4<@accent', - X11: 'rgba(0, 0, 0, 0.3)', - 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', + calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)', + dividerHovered: 'rgba(255, 255, 255, 0.15)', + navBgTransparent: ':alpha<0.5<@navBg', + panelFade: ':alpha<0<@panel', + panelTransparent: ':alpha<0.7<@panel', cwBg: '#393552', cwFg: '#f6c177', link: '#3e8fb0', diff --git a/packages/client/src/themes/d-u0.json5 b/packages/client/src/themes/d-u0.json5 index 67c9235df..f83c7b142 100644 --- a/packages/client/src/themes/d-u0.json5 +++ b/packages/client/src/themes/d-u0.json5 @@ -3,24 +3,18 @@ base: 'dark', name: 'Mi U0 Dark', props: { - X2: ':darken<2<@panel', - X3: 'rgba(255, 255, 255, 0.05)', - X4: 'rgba(255, 255, 255, 0.1)', - X5: 'rgba(255, 255, 255, 0.05)', - X6: 'rgba(255, 255, 255, 0.15)', - X7: 'rgba(255, 255, 255, 0.05)', - X8: ':lighten<5<@accent', - X9: ':darken<5<@accent', + interactiveElementHovered: 'rgba(255, 255, 255, 0.05)', + messagingIsNotMe: 'rgba(255, 255, 255, 0.1)', + postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)', + accentLightenLess: ':lighten<5<@accent', + accentDarkenLess: ':darken<5<@accent', bg: '#172426', fg: '#dadada', - X10: ':alpha<0.4<@accent', - X11: 'rgba(0, 0, 0, 0.3)', - 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', + calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)', + dividerHovered: 'rgba(255, 255, 255, 0.15)', + navBgTransparent: ':alpha<0.5<@navBg', + panelFade: ':alpha<0<@panel', + panelTransparent: ':alpha<0.7<@panel', cwBg: '#687390', cwFg: '#393f4f', link: '@accent', diff --git a/packages/client/src/themes/l-catppuccin-latte.json5 b/packages/client/src/themes/l-catppuccin-latte.json5 index 085e66df6..1d0afb553 100644 --- a/packages/client/src/themes/l-catppuccin-latte.json5 +++ b/packages/client/src/themes/l-catppuccin-latte.json5 @@ -3,24 +3,18 @@ base: "light", name: "Catppuccin Latte", props: { - X2: ":darken<2<@panel", - X3: "rgba(255, 255, 255, 0.05)", - X4: "rgba(255, 255, 255, 0.1)", - X5: "rgba(255, 255, 255, 0.05)", - X6: "rgba(255, 255, 255, 0.15)", - X7: "rgba(255, 255, 255, 0.05)", - X8: ":lighten<5<@accent", - X9: ":darken<5<@accent", + interactiveElementHovered: "rgba(255, 255, 255, 0.05)", + messagingIsNotMe: "rgba(255, 255, 255, 0.1)", + postFormButtonHoverBg: "rgba(255, 255, 255, 0.05)", + accentLightenLess: ":lighten<5<@accent", + accentDarkenLess: ":darken<5<@accent", bg: "#dce0e8", fg: "#4c4f69", - X10: ":alpha<0.4<@accent", - X11: "rgba(0, 0, 0, 0.3)", - 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", + calendarInfoMeterBg: "rgba(0, 0, 0, 0.3)", + dividerHovered: "rgba(255, 255, 255, 0.15)", + navBgTransparent: ":alpha<0.5<@navBg", + panelFade: ":alpha<0<@panel", + panelTransparent: ":alpha<0.7<@panel", cwBg: "#bcc0cc", cwFg: "#5c5f77", link: "#1e66f5", diff --git a/packages/client/src/themes/l-nord.json5 b/packages/client/src/themes/l-nord.json5 index e359f31f4..6fc3e1764 100644 --- a/packages/client/src/themes/l-nord.json5 +++ b/packages/client/src/themes/l-nord.json5 @@ -4,24 +4,18 @@ desc: 'Nord: an arctic, north-bluish color palette', name: 'Nord Light', props: { - X2: ':darken<2<@panel', - X3: 'rgba(255, 255, 255, 0.05)', - X4: 'rgba(255, 255, 255, 0.1)', - X5: 'rgba(255, 255, 255, 0.05)', - X6: 'rgba(255, 255, 255, 0.15)', - X7: 'rgba(255, 255, 255, 0.05)', - X8: ':lighten<5<@accent', - X9: ':darken<5<@accent', + interactiveElementHovered: 'rgba(255, 255, 255, 0.05)', + messagingIsNotMe: 'rgba(255, 255, 255, 0.1)', + postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)', + accentLightenLess: ':lighten<5<@accent', + accentDarkenLess: ':darken<5<@accent', bg: '#d8dee9', fg: '#3b4252', - X10: ':alpha<0.4<@accent', - X11: 'rgba(0, 0, 0, 0.3)', - 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', + calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)', + dividerHovered: 'rgba(255, 255, 255, 0.15)', + navBgTransparent: ':alpha<0.5<@navBg', + panelFade: ':alpha<0<@panel', + panelTransparent: ':alpha<0.7<@panel', cwBg: '#687390', cwFg: '#393f4f', link: '#44a4c1', diff --git a/packages/client/src/themes/l-rosepinedawn.json5 b/packages/client/src/themes/l-rosepinedawn.json5 index d19eb5925..d0a947aa8 100644 --- a/packages/client/src/themes/l-rosepinedawn.json5 +++ b/packages/client/src/themes/l-rosepinedawn.json5 @@ -68,22 +68,16 @@ codeNumber: '#0fbbbb', codeBoolean: '#62b70c', htmlThemeColor: '@bg', - X2: ':darken<2<@panel', - X3: 'rgba(0, 0, 0, 0.05)', - X4: 'rgba(0, 0, 0, 0.1)', - X5: 'rgba(0, 0, 0, 0.05)', - X6: 'rgba(0, 0, 0, 0.25)', - X7: 'rgba(0, 0, 0, 0.05)', - X8: ':lighten<5<@accent', - X9: ':darken<5<@accent', - X10: ':alpha<0.4<@accent', - X11: 'rgba(0, 0, 0, 0.1)', - 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', + interactiveElementHovered: 'rgba(0, 0, 0, 0.05)', + messagingIsNotMe: 'rgba(0, 0, 0, 0.1)', + postFormButtonHoverBg: 'rgba(0, 0, 0, 0.05)', + accentLightenLess: ':lighten<5<@accent', + accentDarkenLess: ':darken<5<@accent', + calendarInfoMeterBg: 'rgba(0, 0, 0, 0.1)', + dividerHovered: 'rgba(0, 0, 0, 0.15)', + navBgTransparent: ':alpha<0.5<@navBg', + panelFade: ':alpha<0<@panel', + panelTransparent: ':alpha<0.7<@panel', }, author: '@thatonecalculator@stop.voring.me', } diff --git a/packages/client/src/themes/l-u0.json5 b/packages/client/src/themes/l-u0.json5 index 03b114ba3..71bf0ed47 100644 --- a/packages/client/src/themes/l-u0.json5 +++ b/packages/client/src/themes/l-u0.json5 @@ -3,24 +3,18 @@ base: 'light', name: 'Mi U0 Light', props: { - X2: ':darken<2<@panel', - X3: 'rgba(255, 255, 255, 0.05)', - X4: 'rgba(255, 255, 255, 0.1)', - X5: 'rgba(255, 255, 255, 0.05)', - X6: 'rgba(255, 255, 255, 0.15)', - X7: 'rgba(255, 255, 255, 0.05)', - X8: ':lighten<5<@accent', - X9: ':darken<5<@accent', + interactiveElementHovered: 'rgba(255, 255, 255, 0.05)', + messagingIsNotMe: 'rgba(255, 255, 255, 0.1)', + postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)', + accentLightenLess: ':lighten<5<@accent', + accentDarkenLess: ':darken<5<@accent', bg: '#e7e7eb', fg: '#5f5f5f', - X10: ':alpha<0.4<@accent', - X11: 'rgba(0, 0, 0, 0.3)', - 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', + calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)', + dividerHovered: 'rgba(255, 255, 255, 0.15)', + navBgTransparent: ':alpha<0.5<@navBg', + panelFade: ':alpha<0<@panel', + panelTransparent: ':alpha<0.7<@panel', cwBg: '#687390', cwFg: '#393f4f', link: '@accent', diff --git a/packages/client/src/themes/l-vivid.json5 b/packages/client/src/themes/l-vivid.json5 index b3c08f38a..1fe5e859b 100644 --- a/packages/client/src/themes/l-vivid.json5 +++ b/packages/client/src/themes/l-vivid.json5 @@ -62,21 +62,15 @@ fgTransparentWeak: ':alpha<0.75<@fg', panelHeaderDivider: '@divider', scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)', - X2: ':darken<2<@panel', - X3: 'rgba(0, 0, 0, 0.05)', - X4: 'rgba(0, 0, 0, 0.1)', - X5: 'rgba(0, 0, 0, 0.05)', - X6: 'rgba(0, 0, 0, 0.25)', - X7: 'rgba(0, 0, 0, 0.05)', - X8: ':lighten<5<@accent', - X9: ':darken<5<@accent', - X10: ':alpha<0.4<@accent', - X11: 'rgba(0, 0, 0, 0.1)', - 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', + interactiveElementHovered: 'rgba(0, 0, 0, 0.05)', + messagingIsNotMe: 'rgba(0, 0, 0, 0.1)', + postFormButtonHoverBg: 'rgba(0, 0, 0, 0.05)', + accentLightenLess: ':lighten<5<@accent', + accentDarkenLess: ':darken<5<@accent', + calendarInfoMeterBg: 'rgba(0, 0, 0, 0.1)', + dividerHovered: 'rgba(0, 0, 0, 0.15)', + navBgTransparent: ':alpha<0.5<@navBg', + panelFade: ':alpha<0<@panel', + panelTransparent: ':alpha<0.7<@panel', }, } diff --git a/packages/client/src/ui/_common_/navbar-for-mobile.vue b/packages/client/src/ui/_common_/navbar-for-mobile.vue index 8796010dd..6e6204761 100644 --- a/packages/client/src/ui/_common_/navbar-for-mobile.vue +++ b/packages/client/src/ui/_common_/navbar-for-mobile.vue @@ -171,7 +171,7 @@ function more() { top: 0; z-index: 1; padding: 2rem 0; - background: var(--X14); + background: var(--navBgTransparent); -webkit-backdrop-filter: var(--blur, blur(8px)); backdrop-filter: var(--blur, blur(8px)); @@ -213,7 +213,7 @@ function more() { position: sticky; bottom: 0; padding: 20px 0; - background: var(--X14); + background: var(--navBgTransparent); -webkit-backdrop-filter: var(--blur, blur(8px)); backdrop-filter: var(--blur, blur(8px)); diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue index e00c7ae37..905c6ee36 100644 --- a/packages/client/src/ui/deck.vue +++ b/packages/client/src/ui/deck.vue @@ -30,7 +30,7 @@ ) .map((c) => c.width), ) + 'px', - } + } " @wheel.self="onWheel" > @@ -58,7 +58,7 @@ columns.find( (c) => c.id === ids[0], )!.width + 'px', - } + } " @parent-focus="moveFocus(ids[0], $event)" @headerWheel="onWheel" @@ -558,7 +558,7 @@ async function deleteProfile() { } &:hover { - background: var(--X2); + background: var(--buttonHoverBg); } > .indicator { diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue index 00342ff70..feba0b2c0 100644 --- a/packages/client/src/ui/visitor/header.vue +++ b/packages/client/src/ui/visitor/header.vue @@ -174,7 +174,7 @@ export default defineComponent({ line-height: $height; -webkit-backdrop-filter: var(--blur, blur(32px)); backdrop-filter: var(--blur, blur(32px)); - background-color: var(--X16); + background-color: var(--panelTransparent); > .wide { > .content { diff --git a/packages/client/src/widgets/calendar.vue b/packages/client/src/widgets/calendar.vue index eb2ec6c41..c2ae3cfc2 100644 --- a/packages/client/src/widgets/calendar.vue +++ b/packages/client/src/widgets/calendar.vue @@ -214,7 +214,7 @@ defineExpose({ > .meter { width: 100%; overflow: hidden; - background: var(--X11); + background: var(--calendarInfoMeterBg); border-radius: 8px; > .val {