Merge pull request riccardoperra#262 from riccardoperra/opacity_editor

feat(app): add alternative theme

Author: riccardoperra

.changeset/plenty-ties-camp.md

@@ -0,0 +1,7 @@
+---
+'@codeimage/app': minor
+'@codeimage/config': minor
+'@codeimage/theme': minor
+---
+
+feat: add editor background type

apps/codeimage/package.json

@@ -63,8 +63,8 @@
     "@ngneat/elf": "^2.0.0",
     "@ngneat/elf-devtools": "^1.2.1",
     "@ngneat/elf-persist-state": "^1.1.1",
-    "@solid-primitives/resize-observer": "^1.1.0",
     "@solid-primitives/i18n": "^1.1.0",
+    "@solid-primitives/resize-observer": "^1.1.0",
     "@vanilla-extract/css": "^1.7.0",
     "@vanilla-extract/dynamic": "^2.0.2",
     "@vanilla-extract/recipes": "^0.2.4",
@@ -77,6 +77,7 @@
     "html-to-image": "^1.9.0",
     "inter-ui": "^3.19.3",
     "modern-normalize": "^1.1.0",
+    "polished": "4.2.2",
     "rxjs": "^7.5.5",
     "solid-app-router": "^0.3.3",
     "solid-codemirror": "^1.0.3",

apps/codeimage/src/App.tsx

@@ -89,6 +89,8 @@ export function App() {
               showGlassReflection={terminal.showGlassReflection}
               tabIcon={tabIcon()?.content}
               showWatermark={terminal.showWatermark}
+              opacity={terminal.opacity}
+              alternativeTheme={terminal.alternativeTheme}
             >
               <CustomEditor />
             </DynamicTerminal>

apps/codeimage/src/components/CustomEditor/CustomEditor.tsx

@@ -1,4 +1,8 @@
-import {EDITOR_BASE_SETUP} from '@codeimage/config';
+import {
+  EDITOR_BASE_SETUP,
+  SUPPORTED_LANGUAGES,
+  SUPPORTED_THEMES,
+} from '@codeimage/config';
 import {editor$, setFocus} from '@codeimage/store/editor';
 import {EditorView, lineNumbers} from '@codemirror/view';
 import {debounceTime, ReplaySubject, takeUntil} from 'rxjs';
@@ -10,17 +14,18 @@ import {
   createResource,
   onCleanup,
 } from 'solid-js';
-import {appEnvironment} from '../../core/configuration';
+import {SUPPORTED_FONTS} from '../../core/configuration/font';
 import {fromObservableObject} from '../../core/hooks/from-observable-object';
 import {focusedEditor$, setCode} from '../../state/editor';
 import {createCustomFontExtension} from './custom-font-extension';
 import {observeFocusExtension} from './observe-focus-extension';
 
 export const CustomEditor = () => {
   let editorEl!: HTMLDivElement;
-
   const destroy$ = new ReplaySubject<void>(1);
-  const {languages, themes, fonts} = appEnvironment;
+  const themes = SUPPORTED_THEMES;
+  const languages = SUPPORTED_LANGUAGES;
+  const fonts = SUPPORTED_FONTS;
   const editor = fromObservableObject(editor$);
 
   const selectedLanguage = createMemo(() =>

apps/codeimage/src/components/Footer/Footer.tsx

@@ -1,6 +1,6 @@
-import * as styles from './Footer.css';
 import {Box, Link} from '@codeimage/ui';
 import {appEnvironment} from '../../core/configuration';
+import * as styles from './Footer.css';
 
 export const Footer = () => {
   const {version} = appEnvironment;
@@ -20,17 +20,17 @@ export const Footer = () => {
             href={'https://github.com/riccardoperra/codeimage/issues'}
             size="xs"
           >
-            Report issue
+            Issue & Feedback
           </Link>
         </Box>
 
         <Box marginRight={5}>
           <Link
             as={'a'}
-            href={'https://github.com/riccardoperra/codeimage/discussions'}
+            href={'https://github.com/riccardoperra/codeimage/releases'}
             size="xs"
           >
-            Feedback
+            Changelog
           </Link>
         </Box>
 

apps/codeimage/src/components/Frame/Frame.css.ts

@@ -1,5 +1,6 @@
 import {backgroundColorVar, themeVars} from '@codeimage/ui';
 import {createTheme, style} from '@vanilla-extract/css';
+import {darkGrayScale} from '../../theme/dark-theme.css';
 
 export const [frameHandler, frameHandlerVars] = createTheme({
   scale: '1',
@@ -45,7 +46,7 @@ export const handler = style([
 export const content = style({
   width: '100%',
   height: '100%',
-  marginTop: '20px',
+  marginTop: '10px',
   marginBottom: '40px',
   position: 'relative',
 });
@@ -183,3 +184,23 @@ export const watermark = style({
   right: '32px',
   bottom: '24px',
 });
+
+export const presets = style({
+  display: 'inline-flex',
+  width: 'auto',
+  alignItems: 'center',
+  paddingLeft: themeVars.spacing['2'],
+  paddingRight: themeVars.spacing['2'],
+  height: '42px',
+  backgroundColor: darkGrayScale.gray3,
+  borderRadius: themeVars.borderRadius.lg,
+  boxShadow: themeVars.boxShadow.lg,
+  columnGap: themeVars.spacing['2'],
+});
+
+export const toolbar = style({
+  height: '28px',
+  width: 'auto',
+  display: 'flex',
+  justifyContent: 'flex-end',
+});

apps/codeimage/src/components/PropertyEditor/EditorSidebar.css.ts

@@ -82,3 +82,8 @@ export const titleWrapper = style([
     },
   },
 ]);
+
+export const panelDivider = style({
+  borderBottom: `1px solid ${themeVars.dynamicColors.divider}`,
+  paddingTop: themeVars.spacing['4'],
+});

apps/codeimage/src/components/PropertyEditor/EditorSidebar.tsx

@@ -1,9 +1,10 @@
+import {CodeImageLogo} from '../Icons/CodeImageLogo';
+import * as styles from '../Scaffold/Sidebar/Sidebar.css';
 import {EditorForm} from './EditorForm';
-import {WindowStyleForm} from './WindowStyleForm';
-import {FrameStyleForm} from './FrameStyleForm';
 import {EditorStyleForm} from './EditorStyleForm';
-import * as styles from '../Scaffold/Sidebar/Sidebar.css';
-import {CodeImageLogo} from '../Icons/CodeImageLogo';
+import {FrameStyleForm} from './FrameStyleForm';
+import {PanelDivider} from './PanelDivider';
+import {WindowStyleForm} from './WindowStyleForm';
 
 export const EditorSidebar = () => {
   return (
@@ -12,8 +13,10 @@ export const EditorSidebar = () => {
         <CodeImageLogo width={'70%'} />
       </div>
       <FrameStyleForm />
+      <PanelDivider />
 
       <WindowStyleForm />
+      <PanelDivider />
 
       <EditorStyleForm />
     </EditorForm>

apps/codeimage/src/components/PropertyEditor/EditorStyleForm.tsx

@@ -1,3 +1,4 @@
+import {SUPPORTED_LANGUAGES} from '@codeimage/config';
 import {useI18n} from '@codeimage/locale';
 import {
   editor$,
@@ -10,15 +11,16 @@ import {
 import {SegmentedField, Select, Text} from '@codeimage/ui';
 import {map} from 'rxjs';
 import {from, ParentComponent} from 'solid-js';
-import {appEnvironment} from '../../core/configuration';
+import {SUPPORTED_FONTS} from '../../core/configuration/font';
 import {fromObservableObject} from '../../core/hooks/from-observable-object';
 import {useModality} from '../../core/hooks/isMobile';
 import {AppLocaleEntries} from '../../i18n';
 import {PanelHeader} from './PanelHeader';
 import {PanelRow, TwoColumnPanelRow} from './PanelRow';
 
 export const EditorStyleForm: ParentComponent = () => {
-  const {languages, fonts} = appEnvironment;
+  const languages = SUPPORTED_LANGUAGES;
+  const fonts = SUPPORTED_FONTS;
   const editor = fromObservableObject(editor$);
   const modality = useModality();
   const [t] = useI18n<AppLocaleEntries>();

apps/codeimage/src/components/PropertyEditor/PanelDivider.tsx

@@ -0,0 +1,6 @@
+import {VoidComponent} from 'solid-js';
+import * as styles from './EditorSidebar.css';
+
+export const PanelDivider: VoidComponent = () => {
+  return <div class={styles.panelDivider} />;
+};