diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte index 0f39b31f51..fdfc2fc3dd 100644 --- a/packages/panel/src/components/Panel.svelte +++ b/packages/panel/src/components/Panel.svelte @@ -144,16 +144,16 @@ display: flex; flex-direction: column; height: calc(100% - 32px - 1.25rem); - background: rgba(31, 31, 37, 0.7); + background: var(--theme-dialog-bg); border-radius: 1.25rem; box-shadow: 0px 44px 154px rgba(0, 0, 0, .75); - backdrop-filter: blur(30px); + backdrop-filter: blur(15px); .header { flex-shrink: 0; padding: 0 2.5rem; height: 4.5rem; - border-bottom: 1px solid var(--theme-card-divider); + border-bottom: 1px solid var(--theme-dialog-divider); .icon { opacity: .6; } .title { @@ -170,7 +170,7 @@ flex-shrink: 0; padding: 0 2rem; height: 3.5rem; - border-bottom: 1px solid var(--theme-bg-accent-hover); + border-bottom: 1px solid var(--theme-dialog-divider); } } @@ -189,12 +189,12 @@ height: max-content; } .activity { - background-color: var(--theme-bg-accent-color); + background-color: var(--theme-dialog-accent); &.header { border-bottom: none; } &.content { flex-grow: 1; padding-bottom: 0; - background-color: var(--theme-bg-accent-color); + background-color: var(--theme-dialog-accent); } } } @@ -210,7 +210,7 @@ flex-direction: column; } .leftSection { - border-right: 1px solid var(--theme-bg-accent-hover); + border-right: 1px solid var(--theme-dialog-divider); .scroll-container { overflow: auto; margin: 2rem 2rem 1.5rem; @@ -222,16 +222,16 @@ } .rightSection { background-color: transparent; - .header { border-bottom: 1px solid var(--theme-card-divider); } + .header { border-bottom: 1px solid var(--theme-dialog-divider); } .content { flex-grow: 1; padding: 2.5rem 2.5rem 0; - background-color: var(--theme-bg-accent-color); + background-color: var(--theme-dialog-accent); } } .ref-input { - background-color: var(--theme-bg-accent-color); + background-color: var(--theme-dialog-accent); padding: 1.5rem 2.5rem; } diff --git a/packages/presentation/src/components/Card.svelte b/packages/presentation/src/components/Card.svelte index 5ae9bfe30c..afc6bd8987 100644 --- a/packages/presentation/src/components/Card.svelte +++ b/packages/presentation/src/components/Card.svelte @@ -131,7 +131,7 @@ right: 0; background-color: var(--theme-card-bg); border-radius: 1.25rem; - backdrop-filter: blur(24px); + backdrop-filter: blur(15px); box-shadow: var(--theme-card-shadow); z-index: -1; } diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss index b0f7e1023c..491b1f1ac3 100644 --- a/packages/theme/styles/_colors.scss +++ b/packages/theme/styles/_colors.scss @@ -64,8 +64,10 @@ --theme-menu-selection: #1D1D23; --theme-menu-divider: rgba(255, 255, 255, .05); --theme-scroll-bar: #2C2C34; - --theme-dialog-bg: rgba(47, 47, 53, .7); - --theme-dialog-divider: rgba(255, 255, 255, .06); + --theme-dialog-bg: rgba(31, 31, 37, .8); + --theme-dialog-accent: rgba(255, 255, 255, .03); + --theme-dialog-divider: rgba(255, 255, 255, .1); + --theme-dialog-spec: rgba(47, 47, 53, .6); --theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75); --theme-border-modal: rgba(0, 0, 0, 0.2); --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%); @@ -136,8 +138,10 @@ --theme-menu-selection: #37363F; --theme-menu-divider: rgba(255, 255, 255, .05); --theme-scroll-bar: #494852; - --theme-dialog-bg: rgba(47, 47, 53, .7); - --theme-dialog-divider: rgba(255, 255, 255, .06); + --theme-dialog-bg: rgba(31, 31, 37, .8); + --theme-dialog-accent: rgba(255, 255, 255, .03); + --theme-dialog-divider: rgba(255, 255, 255, .1); + --theme-dialog-spec: rgba(47, 47, 53, .6); --theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75); --theme-border-modal: rgba(0, 0, 0, 0.2); --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%); @@ -207,17 +211,19 @@ --theme-menu-selection: #DBDBDB; --theme-menu-divider: rgba(0, 0, 0, .08); --theme-scroll-bar: #CBCBCB; - --theme-dialog-bg: #fff; + --theme-dialog-bg: rgba(255, 255, 255, .4); + --theme-dialog-accent: rgba(31, 33, 43, .03); --theme-dialog-divider: rgba(31, 33, 43, .06); + --theme-dialog-spec: rgba(47, 47, 53, .6); --theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75); --theme-border-modal: rgba(0, 0, 0, 0.2); --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%); --theme-chat-divider: rgb(233, 233, 233); - --theme-card-bg: transparent; + --theme-card-bg: rgba(255, 255, 255, .6); --theme-card-bg-accent: rgba(0, 0, 0, .04); --theme-card-divider: rgba(0, 0, 0, .1); - --theme-card-shadow: 0px 24px 74px rgba(100, 89, 89, 0.5); + --theme-card-shadow: 0px 24px 74px rgba(100, 89, 89, .5); --theme-avatar-bg: #C4C4C4; --theme-avatar-hover: #EEEDED; --theme-avatar-border: rgba(255, 255, 255, .7); diff --git a/plugins/workbench-resources/src/components/EditStatuses.svelte b/plugins/workbench-resources/src/components/EditStatuses.svelte index 9bcf94c6de..dd37435e92 100644 --- a/plugins/workbench-resources/src/components/EditStatuses.svelte +++ b/plugins/workbench-resources/src/components/EditStatuses.svelte @@ -164,10 +164,10 @@ .floatdialog-container { margin: 2rem 1rem 1.25rem 0; height: calc(100% - 3.25rem); - background-color: rgba(31, 31, 37, .8); + background: var(--theme-dialog-bg-spec); border-radius: 1.25rem; - box-shadow: 0px 44px 154px rgba(0, 0, 0, .75); - backdrop-filter: blur(30px); + box-shadow: var(--theme-dialog-shadow); + backdrop-filter: blur(15px); .header { padding: 0 2rem 0 2.5rem; diff --git a/plugins/workbench-resources/src/components/navigator/SpacePanel.svelte b/plugins/workbench-resources/src/components/navigator/SpacePanel.svelte index 666d86d8b6..442ead4878 100644 --- a/plugins/workbench-resources/src/components/navigator/SpacePanel.svelte +++ b/plugins/workbench-resources/src/components/navigator/SpacePanel.svelte @@ -97,10 +97,10 @@ display: flex; flex-direction: column; height: calc(100% - 32px - 1.25rem); - background: var(--theme-dialog-bg); + background: var(--theme-dialog-bg-spec); border-radius: 1.25rem; box-shadow: var(--theme-dialog-shadow); - backdrop-filter: blur(10px); + backdrop-filter: blur(15px); .header { flex-shrink: 0;