diff --git a/.changeset/plenty-ties-camp.md b/.changeset/plenty-ties-camp.md new file mode 100644 index 000000000..77a83b47f --- /dev/null +++ b/.changeset/plenty-ties-camp.md @@ -0,0 +1,7 @@ +--- +'@codeimage/app': minor +'@codeimage/config': minor +'@codeimage/theme': minor +--- + +feat: add editor background type diff --git a/apps/codeimage/package.json b/apps/codeimage/package.json index 1806f26d4..3cc80f6a6 100644 --- a/apps/codeimage/package.json +++ b/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", diff --git a/apps/codeimage/src/App.tsx b/apps/codeimage/src/App.tsx index cbd47df29..a36d32376 100644 --- a/apps/codeimage/src/App.tsx +++ b/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} > diff --git a/apps/codeimage/src/components/CustomEditor/CustomEditor.tsx b/apps/codeimage/src/components/CustomEditor/CustomEditor.tsx index 74389c6b1..388555689 100644 --- a/apps/codeimage/src/components/CustomEditor/CustomEditor.tsx +++ b/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,7 +14,7 @@ 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'; @@ -18,9 +22,10 @@ import {observeFocusExtension} from './observe-focus-extension'; export const CustomEditor = () => { let editorEl!: HTMLDivElement; - const destroy$ = new ReplaySubject(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(() => diff --git a/apps/codeimage/src/components/Footer/Footer.tsx b/apps/codeimage/src/components/Footer/Footer.tsx index 2121fc0dc..37fed7aa8 100644 --- a/apps/codeimage/src/components/Footer/Footer.tsx +++ b/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 - Feedback + Changelog diff --git a/apps/codeimage/src/components/Frame/Frame.css.ts b/apps/codeimage/src/components/Frame/Frame.css.ts index 24c936ba0..a3cb7e73c 100644 --- a/apps/codeimage/src/components/Frame/Frame.css.ts +++ b/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', +}); diff --git a/apps/codeimage/src/components/PropertyEditor/EditorSidebar.css.ts b/apps/codeimage/src/components/PropertyEditor/EditorSidebar.css.ts index a9ee1103f..1f323eea6 100644 --- a/apps/codeimage/src/components/PropertyEditor/EditorSidebar.css.ts +++ b/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'], +}); diff --git a/apps/codeimage/src/components/PropertyEditor/EditorSidebar.tsx b/apps/codeimage/src/components/PropertyEditor/EditorSidebar.tsx index 8ca97f415..00880806b 100644 --- a/apps/codeimage/src/components/PropertyEditor/EditorSidebar.tsx +++ b/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 = () => { + + diff --git a/apps/codeimage/src/components/PropertyEditor/EditorStyleForm.tsx b/apps/codeimage/src/components/PropertyEditor/EditorStyleForm.tsx index 1a2620a60..1da251bac 100644 --- a/apps/codeimage/src/components/PropertyEditor/EditorStyleForm.tsx +++ b/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,7 +11,7 @@ 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'; @@ -18,7 +19,8 @@ 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(); diff --git a/apps/codeimage/src/components/PropertyEditor/PanelDivider.tsx b/apps/codeimage/src/components/PropertyEditor/PanelDivider.tsx new file mode 100644 index 000000000..a4b2cf277 --- /dev/null +++ b/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
; +}; diff --git a/apps/codeimage/src/components/PropertyEditor/WindowStyleForm.tsx b/apps/codeimage/src/components/PropertyEditor/WindowStyleForm.tsx index 7fc80fee7..2d3882ca5 100644 --- a/apps/codeimage/src/components/PropertyEditor/WindowStyleForm.tsx +++ b/apps/codeimage/src/components/PropertyEditor/WindowStyleForm.tsx @@ -1,6 +1,7 @@ import {useI18n} from '@codeimage/locale'; import { setAccentVisible, + setAlternativeTheme, setShowGlassReflection, setShowHeader, setShowWatermark, @@ -23,6 +24,20 @@ export const WindowStyleForm: ParentComponent = () => { <> + + + + + + { - + language.icons); + const icons = SUPPORTED_LANGUAGES.flatMap(language => language.icons); const extension = createMemo(() => { if (!props.value) return ''; diff --git a/apps/codeimage/src/components/Terminal/TerminalHost.tsx b/apps/codeimage/src/components/Terminal/TerminalHost.tsx index f53d9b776..1f0065479 100644 --- a/apps/codeimage/src/components/Terminal/TerminalHost.tsx +++ b/apps/codeimage/src/components/Terminal/TerminalHost.tsx @@ -22,12 +22,23 @@ export interface TerminalHostProps extends BaseTerminalProps { } export const TerminalHost: FlowComponent = props => { + const background = () => { + if (props.alternativeTheme) { + return `rgba(${styles.terminalVars.headerColor}, .70)`; + } + const opacity = (props.opacity ?? 100) / 100; + if (props.opacity !== 100) { + return `rgba(0,0,0, ${opacity})`; + } + return props.background; + }; + return (
= ( props, ): JSXElement => { - const {terminalThemes} = appEnvironment; + const terminalThemes = AVAILABLE_TERMINAL_THEMES; const terminal = createMemo( () => terminalThemes.entries[ - props.type as typeof appEnvironment['terminalThemes']['keys'][number] + props.type as typeof terminalThemes['keys'][number] ].component, ); diff --git a/apps/codeimage/src/components/Terminal/macOS/MacOsTerminal.tsx b/apps/codeimage/src/components/Terminal/macOS/MacOsTerminal.tsx index a677cc04a..877e3430b 100644 --- a/apps/codeimage/src/components/Terminal/macOS/MacOsTerminal.tsx +++ b/apps/codeimage/src/components/Terminal/macOS/MacOsTerminal.tsx @@ -11,13 +11,14 @@ import * as styles from './MacOsTerminal.css'; export const exportExclude = _exportExclude; export const MacOsTerminal: ParentComponent = props => { + const showTab = () => props.accentVisible && !props.alternativeTheme; return (
= props => {
{icon => } diff --git a/apps/codeimage/src/components/Terminal/terminal.css.ts b/apps/codeimage/src/components/Terminal/terminal.css.ts index 1f5bac6a3..cd1b56e3a 100644 --- a/apps/codeimage/src/components/Terminal/terminal.css.ts +++ b/apps/codeimage/src/components/Terminal/terminal.css.ts @@ -4,11 +4,13 @@ import {recipe} from '@vanilla-extract/recipes'; export const [terminalTheme, terminalVars] = createTheme({ headerHeight: '50px', + radius: '12px', headerBackgroundColor: themeVars.backgroundColor.white, backgroundColor: themeVars.backgroundColor.white, textColor: themeVars.backgroundColor.gray['800'], boxShadow: themeVars.boxShadow.lg, tabDelta: '10px', + headerColor: '0, 0, 0', }); export const wrapper = style([ @@ -18,9 +20,21 @@ export const wrapper = style([ backgroundColor: terminalVars.backgroundColor, color: terminalVars.textColor, overflow: 'hidden', - borderRadius: '12px', + borderRadius: terminalVars.radius, boxShadow: terminalVars.boxShadow, - transition: 'box-shadow .2s', + transition: 'box-shadow .2s, border-radius .2s', + selectors: { + '&[data-theme-mode=light]': { + vars: { + [terminalVars.headerColor]: `255, 255, 255`, + }, + }, + '&[data-theme-mode=dark] &': { + vars: { + [terminalVars.headerColor]: `0, 0, 0`, + }, + }, + }, }, ]); diff --git a/apps/codeimage/src/components/Terminal/windows/WindowsTerminal.tsx b/apps/codeimage/src/components/Terminal/windows/WindowsTerminal.tsx index 6a7f7512e..2df233126 100644 --- a/apps/codeimage/src/components/Terminal/windows/WindowsTerminal.tsx +++ b/apps/codeimage/src/components/Terminal/windows/WindowsTerminal.tsx @@ -12,19 +12,22 @@ import {WindowsTerminalControls} from './WindowsTerminalControls'; export const exportExclude = _exportExclude; export const WindowsTerminal: ParentComponent = props => { + const showTab = () => !!props.accentVisible && !props.alternativeTheme; return (
diff --git a/apps/codeimage/src/components/TerminalControlField/TerminalControlField.tsx b/apps/codeimage/src/components/TerminalControlField/TerminalControlField.tsx index 57e088ffb..c4c153d4a 100644 --- a/apps/codeimage/src/components/TerminalControlField/TerminalControlField.tsx +++ b/apps/codeimage/src/components/TerminalControlField/TerminalControlField.tsx @@ -1,8 +1,8 @@ -import {For, JSXElement} from 'solid-js'; -import {Dynamic} from 'solid-js/web'; import {terminal$} from '@codeimage/store/terminal'; import {Box, Group, RadioBlock} from '@codeimage/ui'; -import {appEnvironment} from '../../core/configuration'; +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 { @@ -13,7 +13,7 @@ interface TerminalControlFieldProps { export function TerminalControlField( props: TerminalControlFieldProps, ): JSXElement { - const {terminalThemes} = appEnvironment; + const terminalThemes = AVAILABLE_TERMINAL_THEMES; const terminalState = fromObservableObject(terminal$); return ( @@ -38,6 +38,8 @@ export function TerminalControlField( readonlyTab={true} showHeader={true} showWatermark={false} + alternativeTheme={false} + opacity={100} showGlassReflection={terminalState.showGlassReflection} /> diff --git a/apps/codeimage/src/components/ThemeSwitcher/ThemeSwitcher.tsx b/apps/codeimage/src/components/ThemeSwitcher/ThemeSwitcher.tsx index 00a3e6358..b053b1bc5 100644 --- a/apps/codeimage/src/components/ThemeSwitcher/ThemeSwitcher.tsx +++ b/apps/codeimage/src/components/ThemeSwitcher/ThemeSwitcher.tsx @@ -105,6 +105,8 @@ export const ThemeSwitcher: ParentComponent = props => { type={terminal.type} showWatermark={false} showGlassReflection={terminal.showGlassReflection} + opacity={100} + alternativeTheme={terminal.alternativeTheme} > {`// Code here`} diff --git a/apps/codeimage/src/core/configuration.ts b/apps/codeimage/src/core/configuration.ts index 998498f70..0f594c92b 100644 --- a/apps/codeimage/src/core/configuration.ts +++ b/apps/codeimage/src/core/configuration.ts @@ -1,11 +1,8 @@ import { createConfiguration, - SUPPORTED_LANGUAGES, SUPPORTED_LOCALES, SUPPORTED_THEMES, } from '@codeimage/config'; -import {WindowsTerminal} from '../components/Terminal/windows/WindowsTerminal'; -import {MacOsTerminal} from '../components/Terminal/macOS/MacOsTerminal'; import {version} from '../../package.json'; import { SUPPORTED_FONTS, @@ -13,20 +10,6 @@ import { } from './configuration/font'; import {mapToDictionary} from './helpers/mapToDictionary'; -export const AVAILABLE_TERMINAL_THEMES = { - keys: ['macOs', 'windows'] as const, - entries: { - windows: { - name: 'windows', - component: WindowsTerminal, - }, - macOs: { - name: 'macOs', - component: MacOsTerminal, - }, - }, -}; - export const SUPPORTED_THEMES_DICTIONARY = mapToDictionary( SUPPORTED_THEMES, 'id', @@ -36,10 +19,9 @@ export const [appEnvironment] = createConfiguration({ version, locales: SUPPORTED_LOCALES, themes: SUPPORTED_THEMES, - languages: SUPPORTED_LANGUAGES, + languages: [], editorPadding: [16, 32, 64, 128], fonts: SUPPORTED_FONTS, - terminalThemes: AVAILABLE_TERMINAL_THEMES, defaultState: { editor: { code: @@ -59,5 +41,5 @@ export const [appEnvironment] = createConfiguration({ theme: SUPPORTED_THEMES_DICTIONARY.vsCodeDarkTheme, font: SUPPORTED_FONTS_DICTIONARY['jetbrains-mono'], }, - }, + } as const, }); diff --git a/apps/codeimage/src/core/configuration/terminal-themes.ts b/apps/codeimage/src/core/configuration/terminal-themes.ts new file mode 100644 index 000000000..c1bbc087d --- /dev/null +++ b/apps/codeimage/src/core/configuration/terminal-themes.ts @@ -0,0 +1,16 @@ +import {MacOsTerminal} from '../../components/Terminal/macOS/MacOsTerminal'; +import {WindowsTerminal} from '../../components/Terminal/windows/WindowsTerminal'; + +export const AVAILABLE_TERMINAL_THEMES = { + keys: ['macOs', 'windows'] as const, + entries: { + windows: { + name: 'windows', + component: WindowsTerminal, + }, + macOs: { + name: 'macOs', + component: MacOsTerminal, + }, + }, +}; diff --git a/apps/codeimage/src/hooks/use-tab-icon.ts b/apps/codeimage/src/hooks/use-tab-icon.ts index b710fcce3..81ae5cae6 100644 --- a/apps/codeimage/src/hooks/use-tab-icon.ts +++ b/apps/codeimage/src/hooks/use-tab-icon.ts @@ -1,9 +1,8 @@ -import {appEnvironment} from '../core/configuration'; +import {LanguageIconDefinition, SUPPORTED_LANGUAGES} from '@codeimage/config'; +import {select} from '@ngneat/elf'; +import {createEffect, createMemo, createSignal, from, on} from 'solid-js'; import {editorLanguageId$} from '../state/editor'; import {tabName$} from '../state/terminal'; -import {createEffect, createMemo, createSignal, from, on} from 'solid-js'; -import {LanguageIconDefinition} from '@codeimage/config'; -import {select} from '@ngneat/elf'; interface UseTabIconOptions { withDefault: boolean; @@ -11,7 +10,7 @@ interface UseTabIconOptions { export const useTabIcon = (options: UseTabIconOptions) => { const [icon, setIcon] = createSignal(); - const {languages} = appEnvironment; + const languages = SUPPORTED_LANGUAGES; const currentLanguage = from( editorLanguageId$.pipe( diff --git a/apps/codeimage/src/i18n/sidebar.ts b/apps/codeimage/src/i18n/sidebar.ts index b7161ed99..d49ee6284 100644 --- a/apps/codeimage/src/i18n/sidebar.ts +++ b/apps/codeimage/src/i18n/sidebar.ts @@ -17,6 +17,7 @@ export default { font: 'Font', fontWeight: 'Font weight', reflection: 'Reflection', + backgroundType: 'Background', }, }, it: { @@ -37,6 +38,7 @@ export default { fontWeight: 'Peso carattere', reflection: 'Riflesso', watermark: 'Watermark', + backgroundType: 'Tipo background', }, }, de: { @@ -57,6 +59,7 @@ export default { fontWeight: 'Schriftart', reflection: 'Reflex', watermark: 'Schriftstärke', + backgroundType: 'Background type', }, }, } as const; diff --git a/apps/codeimage/src/state/effects/onTabNameChange.tsx b/apps/codeimage/src/state/effects/onTabNameChange.tsx index 36057c1f9..4cb71d4bd 100644 --- a/apps/codeimage/src/state/effects/onTabNameChange.tsx +++ b/apps/codeimage/src/state/effects/onTabNameChange.tsx @@ -1,8 +1,8 @@ +import {SUPPORTED_LANGUAGES} from '@codeimage/config'; import {editorLanguageId$, setLanguageId} from '@codeimage/store/editor'; import {createAction, createEffect, ofType, props} from '@ngneat/effects'; import {filterNil} from '@ngneat/elf'; import {debounceTime, map, tap, withLatestFrom} from 'rxjs'; -import {appEnvironment} from '../../core/configuration'; export const updateTabName = createAction( '[CodeImage] Update Tab Name', @@ -19,7 +19,7 @@ export const onTabNameChange$ = createEffect(actions => languageId, })), map(({tabName, languageId}) => { - const matches = appEnvironment.languages.filter(language => { + const matches = SUPPORTED_LANGUAGES.filter(language => { return language.icons.some(({matcher}) => matcher.test(tabName)); }); diff --git a/apps/codeimage/src/state/terminal.ts b/apps/codeimage/src/state/terminal.ts index cecd5ce4d..5bbb7c178 100644 --- a/apps/codeimage/src/state/terminal.ts +++ b/apps/codeimage/src/state/terminal.ts @@ -4,10 +4,8 @@ import {dispatch} from '@ngneat/effects'; import {createStore, select, setProp, withProps} from '@ngneat/elf'; import {localStorageStrategy, persistState} from '@ngneat/elf-persist-state'; import {distinctUntilChanged} from 'rxjs'; -import { - appEnvironment, - SUPPORTED_THEMES_DICTIONARY, -} from '../core/configuration'; +import {SUPPORTED_THEMES_DICTIONARY} from '../core/configuration'; +import {AVAILABLE_TERMINAL_THEMES} from '../core/configuration/terminal-themes'; import shallow from '../core/helpers/shallow'; import {elfAutoSettersFactory} from '../core/store/elf-auto-setters-factory'; @@ -23,13 +21,14 @@ export interface TerminalState { readonly darkMode: boolean; readonly showWatermark: boolean; readonly showGlassReflection: boolean; + readonly opacity: number; + readonly alternativeTheme: boolean; } const initialState: TerminalState = { showHeader: true, - type: appEnvironment.terminalThemes.entries[ - appEnvironment.terminalThemes.keys[0] - ].name, + type: AVAILABLE_TERMINAL_THEMES.entries[AVAILABLE_TERMINAL_THEMES.keys[0]] + .name, tabName: 'index.ts', shadow: themeVars.boxShadow.lg, accentVisible: true, @@ -40,6 +39,8 @@ const initialState: TerminalState = { darkMode: SUPPORTED_THEMES_DICTIONARY.vsCodeDarkTheme.properties.darkMode, showWatermark: true, showGlassReflection: false, + opacity: 100, + alternativeTheme: false, }; const store = createStore( @@ -61,6 +62,8 @@ export const { setType, setBackground, setShowGlassReflection, + setOpacity, + setAlternativeTheme, } = elfAutoSettersFactory(store); export function toggleShowHeader() { @@ -82,3 +85,7 @@ export function setTabName(tabName: string) { export const terminal$ = store.pipe(distinctUntilChanged(shallow)); export const tabName$ = store.pipe(select(state => state.tabName)); + +export const isAlternativeTheme$ = store.pipe( + select(state => state.alternativeTheme), +); diff --git a/packages/config/src/lib/core/ConfigurationProvider.tsx b/packages/config/src/lib/core/ConfigurationProvider.tsx index 081b8538b..50b78a284 100644 --- a/packages/config/src/lib/core/ConfigurationProvider.tsx +++ b/packages/config/src/lib/core/ConfigurationProvider.tsx @@ -1,6 +1,5 @@ import {createContext, JSXElement, PropsWithChildren} from 'solid-js'; import {AppStaticConfiguration} from '../types/configuration'; -import {TerminalDefinitionMap} from '../types/terminal-def'; import {CustomTheme} from '@codeimage/theme'; import {LanguageDefinition} from '../types/language-def'; @@ -8,8 +7,7 @@ type BaseAppStaticConfiguration = AppStaticConfiguration< string, readonly CustomTheme[], readonly string[], - readonly LanguageDefinition[], - TerminalDefinitionMap + readonly LanguageDefinition[] >; export const StaticConfigurationContext = diff --git a/packages/config/src/lib/core/createConfiguration.ts b/packages/config/src/lib/core/createConfiguration.ts index 812db57c9..b17181b75 100644 --- a/packages/config/src/lib/core/createConfiguration.ts +++ b/packages/config/src/lib/core/createConfiguration.ts @@ -1,27 +1,20 @@ -import {Component, useContext} from 'solid-js'; -import {StaticConfigurationContext} from './ConfigurationProvider'; import {CustomTheme} from '@codeimage/theme'; -import {TerminalDefinitionMap} from '../types/terminal-def'; +import {useContext} from 'solid-js'; import {AppStaticConfiguration} from '../types/configuration'; import {LanguageDefinition} from '../types/language-def'; +import {StaticConfigurationContext} from './ConfigurationProvider'; export function createConfiguration< V extends string, Themes extends readonly CustomTheme[], Locales extends readonly string[], Languages extends readonly LanguageDefinition[], - TerminalThemes extends TerminalDefinitionMap< - readonly string[], - // eslint-disable-next-line @typescript-eslint/no-explicit-any - Component - >, Configuration extends AppStaticConfiguration< V, Themes, Locales, - Languages, - TerminalThemes - > = AppStaticConfiguration, + Languages + > = AppStaticConfiguration, >(configuration: Configuration): [Configuration, () => Configuration] { if (!configuration.version) { throw new Error('No version specified'); diff --git a/packages/config/src/lib/types/configuration.ts b/packages/config/src/lib/types/configuration.ts index 20429c1d5..318fe8911 100644 --- a/packages/config/src/lib/types/configuration.ts +++ b/packages/config/src/lib/types/configuration.ts @@ -1,5 +1,4 @@ import {LanguageDefinition} from './language-def'; -import {TerminalDefinitionMap} from './terminal-def'; import {CustomTheme} from '@codeimage/theme'; export interface AppStaticConfiguration< @@ -7,11 +6,9 @@ export interface AppStaticConfiguration< Themes extends readonly CustomTheme[], Locales extends readonly string[], Languages extends readonly LanguageDefinition[], - TerminalThemes extends TerminalDefinitionMap, > { readonly version: V; readonly themes: Themes; readonly locales: Locales; readonly languages: Languages; - readonly terminalThemes: TerminalThemes; } diff --git a/packages/theme/src/lib/themes/material-palenight/index.ts b/packages/theme/src/lib/themes/material-palenight/index.ts index 4b84547cf..adc3de1ab 100644 --- a/packages/theme/src/lib/themes/material-palenight/index.ts +++ b/packages/theme/src/lib/themes/material-palenight/index.ts @@ -7,7 +7,7 @@ export const materialPalenightTheme = createTheme({ properties: { darkMode: true, label: 'Material Palenight', - previewBackground: '#1e222f', + previewBackground: 'linear-gradient(135deg, #54D2EF 0%, #2AA6DA 100%)', terminal: { main: '#24293B', text: palette.gray, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9d24b909b..4a17668d8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -103,6 +103,7 @@ importers: https-localhost: ^4.7.1 inter-ui: ^3.19.3 modern-normalize: ^1.1.0 + polished: 4.2.2 prettier: ^2.6.2 rimraf: ^3.0.2 rxjs: ^7.5.5 @@ -170,6 +171,7 @@ importers: 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-js@1.4.2 solid-codemirror: 1.0.3 @@ -1626,7 +1628,6 @@ packages: engines: {node: '>=6.9.0'} dependencies: regenerator-runtime: 0.13.9 - dev: true /@babel/template/7.16.7: resolution: {integrity: sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==} @@ -6150,6 +6151,13 @@ packages: find-up: 4.1.0 dev: true + /polished/4.2.2: + resolution: {integrity: sha512-Sz2Lkdxz6F2Pgnpi9U5Ng/WdWAUZxmHrNPoVlm3aAemxoy2Qy7LGjQg4uf8qKelDAUW94F4np3iH2YPf2qefcQ==} + engines: {node: '>=10'} + dependencies: + '@babel/runtime': 7.18.0 + dev: false + /postcss-load-config/3.1.4_postcss@8.4.13+ts-node@10.8.0: resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==} engines: {node: '>= 10'} @@ -6370,12 +6378,11 @@ packages: /regenerator-runtime/0.13.9: resolution: {integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==} - dev: true /regenerator-transform/0.15.0: resolution: {integrity: sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg==} dependencies: - '@babel/runtime': 7.17.9 + '@babel/runtime': 7.18.0 dev: true /regexp.prototype.flags/1.4.3: