feat: new look

CyanSalt · Sep 11, 2023 · 1971d32 · 1971d32
1 parent 57e500a
commit 1971d32
Show file tree

Hide file tree

Showing 14 changed files with 59 additions and 40 deletions.
diff --git a/addons/editor/src/main/theme.ts b/addons/editor/src/main/theme.ts
@@ -11,9 +11,18 @@ const editorTheme = $computed(() => {
       return [key, commas.helper.toCSSHEX(commas.helper.toRGBA(theme[key]))]
     })),
     type: theme.type,
-    comment: commas.helper.toCSSHEX(commas.helper.mix(foregroundRGBA, backgroundRGBA, 0.5)),
-    lineHighlight: commas.helper.toCSSHEX(commas.helper.mix(foregroundRGBA, backgroundRGBA, 0.2)),
-    lineNumber: commas.helper.toCSSHEX(commas.helper.mix(foregroundRGBA, backgroundRGBA, 0.5)),
+    comment: commas.helper.toCSSHEX({
+      ...commas.helper.mix(foregroundRGBA, backgroundRGBA, 0.5),
+      a: 1,
+    }),
+    lineHighlight: commas.helper.toCSSHEX({
+      ...commas.helper.mix(foregroundRGBA, backgroundRGBA, 0.2),
+      a: 1,
+    }),
+    lineNumber: commas.helper.toCSSHEX({
+      ...commas.helper.mix(foregroundRGBA, backgroundRGBA, 0.5),
+      a: 1,
+    }),
     activeLineNumber: commas.helper.toCSSHEX(foregroundRGBA),
   } as EditorTheme
 })

diff --git a/addons/editor/src/renderer/CodeEditor.vue b/addons/editor/src/renderer/CodeEditor.vue
@@ -60,6 +60,7 @@ watchEffect(() => {
       'editorCursor.foreground': theme.foreground,
       'editor.selectionBackground': theme.selectionBackground,
       'editor.lineHighlightBackground': theme.lineHighlight,
+      'editor.lineHighlightBorder': theme.lineHighlight,
       'editorLink.activeForeground': theme.blue,
       'editorWidget.foreground': theme.foreground,
       'editorWidget.background': theme.background,

diff --git a/src/main/lib/theme.ts b/src/main/lib/theme.ts
@@ -44,8 +44,7 @@ const EXTRA_CSS_COLORS: Partial<Record<Exclude<keyof Theme, keyof ThemeDefinitio
   systemBlue: '--system-blue',
   systemMagenta: '--system-magenta',
   systemAccent: '--system-accent',
-  materialBackground: '--material-background',
-  secondaryBackground: '--secondary-background',
+  acrylicBackground: '--acrylic-background',
 }
 
 const CSS_PROPERTIES: Partial<Record<Exclude<keyof Theme, keyof ThemeDefinition>, string>> = {
@@ -110,13 +109,6 @@ const theme = $computed(() => {
   if (!userTheme.cursorAccent) {
     definition.cursorAccent = toCSSHEX({ ...backgroundRGBA, a: 1 })
   }
-  const backgroundHSLA = toHSLA(backgroundRGBA)
-  const materialBackgroundRGBA = toRGBAFromHSLA({
-    ...backgroundHSLA,
-    l: backgroundHSLA.l - Math.min(backgroundHSLA.l * 0.5, 0.1),
-  })
-  definition.materialBackground = toCSSColor(materialBackgroundRGBA)
-  definition.secondaryBackground = toCSSColor(mix(backgroundRGBA, { r: 127, g: 127, b: 127, a: 1 }, 0.9))
   if (process.platform === 'darwin') {
     definition.systemRed = systemPreferences.getSystemColor('red')
     definition.systemYellow = systemPreferences.getSystemColor('yellow')
@@ -128,6 +120,10 @@ const theme = $computed(() => {
   }
   const accentColor = systemPreferences.getAccentColor()
   definition.systemAccent = accentColor ? `#${accentColor.slice(0, 6)}` : ''
+  const accentHSLA = accentColor ? toHSLA(toRGBA(`#${accentColor.slice(0, 6)}`)) : undefined
+  definition.acrylicBackground = accentHSLA ? toCSSHEX(
+    toRGBAFromHSLA({ ...accentHSLA, l: (0.5 + accentHSLA.l / 2) }),
+  ) : ''
   definition.vibrancy = vibrancy
   definition.variables = Object.fromEntries([
     ...Object.entries({ ...THEME_CSS_COLORS, ...EXTRA_CSS_COLORS }).map(([key, attr]) => {
@@ -152,16 +148,16 @@ const defaultWindowButtonPosition = {
 const themeOptions = $computed<BrowserWindowThemeOptions>(() => {
   const foregroundRGBA = toRGBA(theme.foreground!)
   const backgroundRGBA = toRGBA(theme.background!)
-  const materialBackgroundRGBA = toRGBA(theme.materialBackground!)
+  const acrylicBackgroundRGBA = toRGBA(theme.acrylicBackground!)
   const trafficLightOffset = ((36 + 8 * 2) - 36) / 2
   return {
     /** {@link https://github.com/electron/electron/issues/10420} */
     backgroundColor: toElectronHEX({ ...backgroundRGBA, a: process.platform !== 'win32' ? 0 : 1 }),
     vibrancy: theme.vibrancy ? (
-      typeof theme.vibrancy === 'string' ? theme.vibrancy : 'hud'
+      typeof theme.vibrancy === 'string' ? theme.vibrancy : 'sidebar'
     ) : undefined,
     titleBarOverlay: {
-      color: toElectronHEX(materialBackgroundRGBA),
+      color: toElectronHEX(acrylicBackgroundRGBA),
       symbolColor: toElectronHEX({ ...foregroundRGBA, a: 1 }),
       height: 36,
     },

diff --git a/src/main/lib/window.ts b/src/main/lib/window.ts
@@ -20,9 +20,9 @@ async function createWindow(...args: string[]) {
   const options: Partial<BrowserWindowConstructorOptions> = {
     show: false,
     title: app.name,
-    width: (8 * 80) + (2 * 8) + 180,
-    minWidth: (8 * 40) + (2 * 8) + 180,
-    height: (18 * 24) + (2 * 4) + (tabListPosition === 'top' ? 52 : 36) + (tabListPosition === 'bottom' ? 52 : 32),
+    width: (8 * 80) + (12 * 2) + (8 * 3) + 176,
+    minWidth: (8 * 40) + (12 * 2) + (8 * 3) + 176,
+    height: (18 * 24) + (8 * 2) + (tabListPosition === 'top' ? 52 : 36) + (tabListPosition === 'bottom' ? 52 : 32),
     acceptFirstMouse: true,
     webPreferences: {
       nodeIntegration: true,

diff --git a/src/renderer/assets/_partials.scss b/src/renderer/assets/_partials.scss
@@ -1,4 +1,4 @@
-@mixin scroll-container($size: 16px) {
+@mixin scroll-container($size: 12px) {
   --scrollbar-opacity: 0;
   overflow: overlay;
   /* stylelint-disable-next-line custom-property-no-missing-var-function */
@@ -11,13 +11,16 @@
     height: $size;
   }
   &::-webkit-scrollbar-track {
-    background-color: rgb(var(--theme-foreground) / var(--scrollbar-opacity));
+    // background-color: rgb(var(--theme-foreground) / var(--scrollbar-opacity));
+    background-color: transparent;
   }
   &::-webkit-scrollbar-corner {
     background-color: transparent;
   }
   &::-webkit-scrollbar-thumb {
     background-color: rgb(var(--theme-foreground) / var(--scrollbar-opacity));
+    border-radius: $size;
+    box-shadow: 0 2px 4px 2px rgb(0 0 0 / calc(var(--scrollbar-opacity) / 2));
     &:horizontal:active,
     &:vertical:active {
       --scrollbar-opacity: 0.2;

diff --git a/src/renderer/components/ActionBar.vue b/src/renderer/components/ActionBar.vue
@@ -50,7 +50,6 @@ function configure() {
   justify-content: space-between;
   height: 32px;
   line-height: 32px;
-  background: rgb(var(--material-background) / var(--theme-opacity));
   &:has(.tab-list) {
     height: 52px; // 36 + 2 * 8
     line-height: 52px;

diff --git a/src/renderer/components/TabList.vue b/src/renderer/components/TabList.vue
@@ -192,9 +192,6 @@ watchEffect(onInvalidate => {
   display: flex;
   flex: none;
   font-size: 14px;
-  &.vertical {
-    background: rgb(var(--secondary-background) / var(--theme-opacity));
-  }
   &.right {
     order: 1;
   }
@@ -221,6 +218,12 @@ watchEffect(onInvalidate => {
   .tab-list.vertical & {
     flex-direction: column;
     width: 176px;
+    background: rgb(var(--theme-background) / calc(var(--theme-opacity) * 3 / 4));
+    border-radius: var(--content-gap);
+    box-shadow: 0 2px 4px 2px rgb(0 0 0 / 10%);
+  }
+  .app.is-opaque .tab-list.vertical & {
+    background: rgb(var(--theme-background));
   }
 }
 .default-list {
@@ -231,7 +234,7 @@ watchEffect(onInvalidate => {
 }
 .sash {
   flex: none;
-  width: 4px;
+  width: var(--content-gap);
   cursor: col-resize;
   .tab-list.right & {
     order: -1;

diff --git a/src/renderer/components/TerminalBlock.vue b/src/renderer/components/TerminalBlock.vue
@@ -64,6 +64,12 @@ watchEffect(onInvalidate => {
 <style lang="scss" scoped>
 .terminal-block {
   position: relative;
+  background: rgb(var(--theme-background) / var(--theme-opacity));
+  border-radius: var(--content-gap);
+  box-shadow: 0 2px 4px 2px rgb(0 0 0 / 0.1);
+  .app.is-opaque & {
+    background: rgb(var(--theme-background));
+  }
 }
 .moving-target {
   position: absolute;

diff --git a/src/renderer/components/TerminalPane.vue b/src/renderer/components/TerminalPane.vue
@@ -42,11 +42,10 @@ function openEditingMenu(event: MouseEvent) {
   z-index: 0;
   box-sizing: border-box;
   height: 100%;
-  padding: 8px 24px;
+  padding: 8px 16px;
 }
 :deep(.group-title) {
-  margin-top: 0;
-  margin-bottom: 8px;
+  margin: 8px 0;
   font-size: 18px;
   line-height: 24px;
 }

diff --git a/src/renderer/components/TerminalTeletype.vue b/src/renderer/components/TerminalTeletype.vue
@@ -171,7 +171,7 @@ function selectCompletion(event: MouseEvent) {
   min-width: 0;
   overflow: hidden;
   :deep(.xterm) {
-    padding: 4px 12px;
+    padding: 8px 12px;
   }
   :deep(.xterm-viewport) {
     @include partials.scroll-container;
@@ -225,7 +225,7 @@ function selectCompletion(event: MouseEvent) {
   overflow: hidden;
   background: rgb(var(--theme-background) / var(--theme-opacity));
   border-radius: 4px;
-  box-shadow: 0 0 1em 0px rgb(0 0 0 / 25%);
+  box-shadow: 0 2px 4px 2px rgb(0 0 0 / 10%);
   backdrop-filter: var(--vibrancy-filter);
   // TODO: This may slightly slow down, but is friendlier visually
   transition: transform 50ms, margin-left 50ms;
@@ -241,6 +241,9 @@ function selectCompletion(event: MouseEvent) {
   &.is-bottom {
     margin-top: var(--cell-height);
   }
+  .app.is-opaque & {
+    background: rgb(var(--theme-background));
+  }
 }
 .terminal-completion-wrapper {
   @include partials.scroll-container(8px);

diff --git a/src/renderer/components/TerminalView.vue b/src/renderer/components/TerminalView.vue
@@ -72,6 +72,7 @@ function activate(item: TerminalTab, index: number) {
   position: relative;
   display: grid;
   flex: 1;
+  gap: var(--content-gap);
   min-height: 0;
   :deep(.terminal-block:not(.active)) {
     opacity: 0.5;

diff --git a/src/renderer/components/TitleBar.vue b/src/renderer/components/TitleBar.vue
@@ -65,7 +65,6 @@ function close() {
   justify-content: space-between;
   height: env(titlebar-area-height, 36px);
   line-height: env(titlebar-area-height, 36px);
-  background: rgb(var(--material-background) / var(--theme-opacity));
   -webkit-app-region: drag;
   &:has(.tab-list) {
     height: 52px; // 36 + 2 * 8

diff --git a/src/renderer/components/app.vue b/src/renderer/components/app.vue
@@ -118,6 +118,7 @@ onMounted(() => {
   --design-card-background: rgb(var(--theme-foreground) / 0.15);
   --design-input-background: rgb(127 127 127 / 0.2);
   --design-separator: rgb(127 127 127 / 0.2);
+  --acrylic-background: 133 194 255;
 }
 :global(::selection) {
   background: rgb(var(--theme-selectionbackground));
@@ -140,28 +141,28 @@ onMounted(() => {
   /* Default line height of xterm.js */
   line-height: 1.2;
   overflow: hidden;
+  background-image: linear-gradient(to right bottom, rgb(var(--acrylic-background) / 5%), rgb(var(--acrylic-background) / 25%));
+  background-color: rgb(var(--theme-background) / var(--theme-opacity));
   transition: color 0.2s;
   &.is-vibrant {
     --vibrancy-filter: drop-shadow(0 0 0.5em rgb(var(--theme-background))) blur(2px);
+    background-color: transparent;
   }
 }
 .content {
+  --content-gap: 8px;
   z-index: 1;
   display: flex;
   flex: auto;
+  box-sizing: border-box;
   width: 100vw;
-  overflow: hidden;
+  min-height: 0;
+  padding: 0 var(--content-gap);
 }
 .interface {
   display: flex;
   flex: 1;
   flex-direction: column;
   min-width: 0;
-  background: rgb(var(--theme-background) / var(--theme-opacity));
-  box-shadow: 0 0 4px 0px rgb(0 0 0 / 5%);
-  transition: background 0.2s;
-  .app.is-opaque & {
-    background: rgb(var(--theme-background));
-  }
 }
 </style>
diff --git a/src/typings/theme.ts b/src/typings/theme.ts
@@ -20,6 +20,5 @@ export interface Theme extends Required<ThemeDefinition> {
   systemMagenta: string,
   systemAccent: string,
   vibrancy: BrowserWindowConstructorOptions['vibrancy'] | boolean,
-  materialBackground: string,
-  secondaryBackground: string,
+  acrylicBackground: string,
 }