Merge branch 'main' into theme_lazy_loading

apps/codeimage/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @codeimage/app
 
+## 0.19.0
+
+### Minor Changes
+
+- [#265](https://github.com/riccardoperra/codeimage/pull/265) [`6f9154d`](https://github.com/riccardoperra/codeimage/commit/6f9154d04d8e1774cf7d6d8590bda8db9727ec49) Thanks [@riccardoperra](https://github.com/riccardoperra)! - feat: add support for multiple tabs
+
+### Patch Changes
+
+- [#266](https://github.com/riccardoperra/codeimage/pull/266) [`d7e246b`](https://github.com/riccardoperra/codeimage/commit/d7e246bdd5408fc06614314a566703a5ba24df3b) Thanks [@hackpirodev](https://github.com/hackpirodev)! - fix: Missing bottom bar translations #207
+
+- Updated dependencies [[`fc3b8fc`](https://github.com/riccardoperra/codeimage/commit/fc3b8fc413cd82eb6b461d0a1aad72b53ee35b35)]:
+  - @codeimage/dom-export@1.10.0
+
 ## 0.18.0
 
 ### Minor Changes

apps/codeimage/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codeimage/app",
   "private": true,
-  "version": "0.18.0",
+  "version": "0.19.0",
   "scripts": {
     "start": "vite",
     "dev": "vite --host",

apps/codeimage/src/App.tsx

@@ -4,7 +4,6 @@ import {getRootEditorStore} from '@codeimage/store/editor/createEditors';
 import {copyToClipboard$} from '@codeimage/store/effects/onCopyToClipboard';
 import {onThemeChange$} from '@codeimage/store/effects/onThemeChange';
 import {frame$, setScale} from '@codeimage/store/frame';
-import {connectStoreWithQueryParams} from '@codeimage/store/plugins/connect-store-with-query-params';
 import {terminal$} from '@codeimage/store/terminal';
 import {Box, LoadingOverlay, PortalHost, SnackbarHost} from '@codeimage/ui';
 import {fromObservableObject} from '@core/hooks/from-observable-object';
@@ -38,8 +37,10 @@ export function App() {
   const frame = fromObservableObject(frame$);
   const terminal = fromObservableObject(terminal$);
   const modality = useModality();
+  const editor = getRootEditorStore();
   const [, {locale}] = useI18n();
-  connectStoreWithQueryParams();
+  // TODO: currently disabled
+  // connectStoreWithQueryParams();
   useEffects([onThemeChange$, copyToClipboard$]);
   createEffect(on(() => uiStore.locale, locale));
   const {ready} = getRootEditorStore();
@@ -97,6 +98,7 @@ export function App() {
                 showWatermark={terminal.showWatermark}
                 opacity={terminal.opacity}
                 alternativeTheme={terminal.alternativeTheme}
+                themeId={editor.options.themeId}
               >
                 <Show when={getActiveEditorStore().editor()}>
                   <CustomEditor />

apps/codeimage/src/components/Terminal/MacOsTerminal/MacOsTerminal.tsx

@@ -12,7 +12,7 @@ export const exportExclude = _exportExclude;
 export const MacOsTerminal: ParentComponent<BaseTerminalProps> = props => {
   const showTab = () => props.accentVisible && !props.alternativeTheme;
   return (
-    <TerminalHost {...props} theme={styles.theme}>
+    <TerminalHost {...props} themeClass={styles.theme}>
       <Show when={props.showHeader}>
         <div
           class={baseStyles.header}

apps/codeimage/src/components/Terminal/Tabs/Tab/Tab.css.ts

@@ -1,5 +1,5 @@
 import {themeVars} from '@codeimage/ui';
-import {createTheme, style} from '@vanilla-extract/css';
+import {createTheme, fallbackVar, style} from '@vanilla-extract/css';
 import {recipe} from '@vanilla-extract/recipes';
 import {terminalVars} from '../../terminal.css';
 
@@ -9,6 +9,10 @@ export const [tabTheme, tabVars] = createTheme({
   tabSecondaryHoverBg: '255, 255, 255',
   tabGap: '8px',
   tabMaxWidth: '400px',
+  textColor: fallbackVar(terminalVars.tabTextColor, terminalVars.textColor),
+  accentActiveBackground: terminalVars.tabAccentActiveBackground,
+  accentInactiveBackground: terminalVars.tabAccentInactiveBackground,
+  tabForeground: terminalVars.tabAccentActiveBackground,
 });
 
 export const wrapper = recipe({
@@ -53,6 +57,7 @@ export const tab = recipe({
     {
       background: 'transparent',
       height: tabVars.tabHeight,
+      color: tabVars.textColor,
       padding: `0px ${themeVars.spacing['3']}`,
       verticalAlign: 'middle',
       marginTop: 'auto',
@@ -90,6 +95,12 @@ export const tab = recipe({
   variants: {
     accent: {
       true: {
+        vars: {
+          [tabVars.tabForeground]: fallbackVar(
+            terminalVars.tabAccentActiveBackground,
+            terminalVars.backgroundColor,
+          ),
+        },
         /**
          * ATTENTION: this is a workaround related to https://github.com/riccardoperra/codeimage/issues/41
          *            Flex properties in safari are broken on export with HtmlToImage
@@ -99,8 +110,8 @@ export const tab = recipe({
         marginBottom: 0,
         paddingTop: 0,
         paddingLeft: `calc(${themeVars.spacing['2']} + ${tabVars.tabGap})`,
-        backgroundColor: terminalVars.backgroundColor,
-        boxShadow: '0px 10px 10px 0 rgba(0,0,0,.30)',
+        backgroundColor: tabVars.tabForeground,
+        boxShadow: '1px 10px 5px 1px rgba(0,0,0,.25)',
         zIndex: tabVars.tabIndex,
         selectors: {
           '&:first-child': {
@@ -124,7 +135,7 @@ export const tab = recipe({
             backgroundColor: 'transparent',
             width: tabVars.tabGap,
             height: tabVars.tabGap,
-            boxShadow: `1px 0px 0px 0px ${terminalVars.backgroundColor}, 3px 4px 0px 0px ${terminalVars.backgroundColor}`,
+            boxShadow: `1px 0px 0px 0px ${tabVars.tabForeground}, 3px 4px 0px 0px ${tabVars.tabForeground}`,
             overflow: 'hidden',
           },
         },
@@ -173,7 +184,12 @@ export const tab = recipe({
         active: false,
       },
       style: {
-        backgroundColor: `${terminalVars.backgroundColor}`,
+        vars: {
+          [tabVars.tabForeground]: fallbackVar(
+            tabVars.accentInactiveBackground,
+            terminalVars.backgroundColor,
+          ),
+        },
         selectors: {
           '&:not(:first-child) &': {
             borderTopLeftRadius: 0,
@@ -184,8 +200,10 @@ export const tab = recipe({
           '&:not(:last-child)': {
             borderTopRightRadius: 0,
           },
+          '[data-fallback-inactive-tab=true] &': {
+            filter: 'brightness(0.85)',
+          },
         },
-        filter: 'brightness(0.80)',
       },
     },
   ],

apps/codeimage/src/components/Terminal/Tabs/TerminalWindowTabList.tsx

@@ -100,7 +100,7 @@ export function TerminalWindowTabList(
                     tabIcon={icon()?.content}
                     readonlyTab={!active()}
                     accentMode={props.accent}
-                    active={active() && editors.length > 1}
+                    active={active()}
                     onClick={() => setActiveEditorId(editor.id)}
                     onTabChange={tabName =>
                       handleTabNameChange(editor.id, tabName)

apps/codeimage/src/components/Terminal/Tabs/createTabTheme.ts

@@ -0,0 +1,37 @@
+import {SUPPORTED_THEMES} from '@codeimage/config';
+import {TerminalTabsTheme} from '@codeimage/theme';
+import {CustomTheme} from '@codeimage/theme/src/lib/core';
+import {Accessor, createMemo} from 'solid-js';
+
+export interface TabThemeProps extends TerminalTabsTheme {
+  shouldFallbackInactiveColor: boolean;
+}
+
+export function createTabTheme(
+  themeId: Accessor<string>,
+): Accessor<TabThemeProps> {
+  const themes = SUPPORTED_THEMES;
+
+  const $theme = createMemo(() =>
+    themeId() ? themes.find(({id}) => id === themeId()) : null,
+  );
+
+  return () => {
+    const theme = $theme() as CustomTheme | null;
+    if (!theme)
+      return {
+        shouldFallbackInactiveColor: true,
+      };
+
+    const {activeTabBackground, background, inactiveTabBackground, textColor} =
+      theme.properties?.terminal?.tabs || {};
+
+    return {
+      shouldFallbackInactiveColor: !inactiveTabBackground,
+      background: background,
+      textColor: textColor,
+      activeTabBackground,
+      inactiveTabBackground,
+    };
+  };
+}

apps/codeimage/src/components/Terminal/TerminalHost.tsx

@@ -5,8 +5,9 @@ import clsx from 'clsx';
 import {WithRef} from 'solid-headless/dist/types/utils/dynamic-prop';
 import {FlowComponent} from 'solid-js';
 import {TerminalState} from '../../state/terminal';
-import * as styles from './terminal.css';
 import {TerminalGlassReflection} from './GlassReflection/TerminalGlassReflection';
+import {createTabTheme} from './Tabs/createTabTheme';
+import * as styles from './terminal.css';
 
 export interface BaseTerminalProps
   extends Omit<TerminalState, 'type'>,
@@ -15,13 +16,17 @@ export interface BaseTerminalProps
   readonlyTab: boolean;
   tabIcon?: LanguageIconDefinition['content'];
   onTabChange?: (tab: string) => void;
+  themeId: string;
 }
 
 export interface TerminalHostProps extends BaseTerminalProps {
-  theme: string;
+  themeClass: string;
+  themeId: string;
 }
 
 export const TerminalHost: FlowComponent<TerminalHostProps> = props => {
+  const tabTheme = createTabTheme(() => props.themeId);
+
   const background = () => {
     if (props.alternativeTheme) {
       return `rgba(${styles.terminalVars.headerColor}, .70)`;
@@ -35,12 +40,20 @@ export const TerminalHost: FlowComponent<TerminalHostProps> = props => {
 
   return (
     <div
-      class={clsx(styles.wrapper, props.theme)}
+      class={clsx(styles.wrapper, props.themeClass)}
       data-theme-mode={props.darkMode ? 'dark' : 'light'}
+      data-fallback-inactive-tab={tabTheme()?.shouldFallbackInactiveColor}
       style={assignInlineVars({
+        [styles.terminalVars.headerBackgroundColor]:
+          tabTheme()?.background ?? '',
         [styles.terminalVars.backgroundColor]: background(),
         [styles.terminalVars.textColor]: props.textColor,
         [styles.terminalVars.boxShadow]: props.shadow ?? themeVars.boxShadow.lg,
+        [styles.terminalVars.tabTextColor]: tabTheme()?.textColor ?? '',
+        [styles.terminalVars.tabAccentActiveBackground]:
+          tabTheme().activeTabBackground ?? '',
+        [styles.terminalVars.tabAccentInactiveBackground]:
+          tabTheme().inactiveTabBackground ?? '',
       })}
     >
       <FadeInOutTransition show={props.showGlassReflection}>

apps/codeimage/src/components/Terminal/WindowsTerminal/WindowsTerminal.tsx

@@ -12,7 +12,7 @@ export const exportExclude = _exportExclude;
 export const WindowsTerminal: ParentComponent<BaseTerminalProps> = props => {
   const showTab = () => props.accentVisible && !props.alternativeTheme;
   return (
-    <TerminalHost {...props} theme={styles.theme}>
+    <TerminalHost {...props} themeClass={styles.theme}>
       <Show when={props.showHeader}>
         <div
           class={baseStyles.header}

apps/codeimage/src/components/Terminal/terminal.css.ts

@@ -1,15 +1,19 @@
 import {themeVars} from '@codeimage/ui';
-import {createTheme, style} from '@vanilla-extract/css';
+import {createTheme, fallbackVar, style} from '@vanilla-extract/css';
 
 export const [terminalTheme, terminalVars] = createTheme({
   headerHeight: '50px',
   radius: '12px',
-  headerBackgroundColor: themeVars.backgroundColor.white,
+  headerBackgroundColor: 'unset',
   backgroundColor: themeVars.backgroundColor.white,
   textColor: themeVars.backgroundColor.gray['800'],
   boxShadow: themeVars.boxShadow.lg,
   tabDelta: '10px',
   headerColor: '0, 0, 0',
+  headerBackground: 'rgba(0, 0, 0, 0)',
+  tabAccentActiveBackground: 'unset',
+  tabAccentInactiveBackground: 'unset',
+  tabTextColor: 'unset',
 });
 
 export const wrapper = style([
@@ -56,10 +60,16 @@ export const header = style({
 
   selectors: {
     '[data-theme-mode=light] &[data-accent-visible=true]': {
-      backgroundColor: `rgba(0, 0, 0, .06)`,
+      backgroundColor: fallbackVar(
+        terminalVars.headerBackgroundColor,
+        `rgba(0, 0, 0, .06)`,
+      ),
     },
     '[data-theme-mode=dark] &[data-accent-visible=true]': {
-      backgroundColor: `rgba(255, 255, 255, .06)`,
+      backgroundColor: fallbackVar(
+        terminalVars.headerBackgroundColor,
+        `rgba(255, 255, 255, .06)`,
+      ),
     },
   },
 });

apps/codeimage/src/components/TerminalControlField/TerminalControlField.tsx

@@ -1,9 +1,10 @@
+import {getRootEditorStore} from '@codeimage/store/editor/createEditors';
 import {terminal$} from '@codeimage/store/terminal';
 import {Box, Group, RadioBlock} from '@codeimage/ui';
+import {AVAILABLE_TERMINAL_THEMES} from '@core/configuration/terminal-themes';
+import {fromObservableObject} from '@core/hooks/from-observable-object';
 import {For, JSXElement} from 'solid-js';
 import {Dynamic} from 'solid-js/web';
-import {AVAILABLE_TERMINAL_THEMES} from '../../core/configuration/terminal-themes';
-import {fromObservableObject} from '../../core/hooks/from-observable-object';
 
 interface TerminalControlFieldProps {
   selectedTerminal: string;
@@ -15,6 +16,7 @@ export function TerminalControlField(
 ): JSXElement {
   const terminalThemes = AVAILABLE_TERMINAL_THEMES;
   const terminalState = fromObservableObject(terminal$);
+  const {options} = getRootEditorStore();
 
   return (
     <Group orientation={'vertical'}>
@@ -40,6 +42,7 @@ export function TerminalControlField(
                 showWatermark={false}
                 alternativeTheme={false}
                 opacity={100}
+                themeId={options.themeId}
                 showGlassReflection={terminalState.showGlassReflection}
               />
             </Box>

apps/codeimage/src/components/ThemeSwitcher/ThemeSwitcher.tsx

@@ -98,7 +98,7 @@ export const ThemeSwitcher: ParentComponent<ThemeSwitcherVariant> = props => {
                 onClick={() => onSelectTheme(theme)}
               >
                 <TerminalHost
-                  theme={styles.themeBoxTerminalHost}
+                  themeClass={styles.themeBoxTerminalHost}
                   tabName={'Untitled'}
                   textColor={theme.properties.terminal.text}
                   background={theme.properties.terminal.main}
@@ -111,6 +111,7 @@ export const ThemeSwitcher: ParentComponent<ThemeSwitcherVariant> = props => {
                   showWatermark={false}
                   showGlassReflection={terminal.showGlassReflection}
                   opacity={100}
+                  themeId={theme.id}
                   alternativeTheme={terminal.alternativeTheme}
                 >
                   <CustomEditorPreview