Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Monaco theming #1560

Merged
merged 15 commits into from
Oct 10, 2023
+1,279 −133
Merged

feat: Monaco theming #1560

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
c0a2a91
Renamed and added theme variables + utils
bmingles Oct 5, 2023
6f8129c
Monaco css theme variables
bmingles Oct 5, 2023
5878034
Removed unused code
bmingles Oct 5, 2023
db3d8e7
Reordered lines
bmingles Oct 5, 2023
e0e8abb
Split out color utils + added tests
bmingles Oct 5, 2023
b39045d
Updated debug log
bmingles Oct 6, 2023
dadc021
Fixed a forced reflow issue
bmingles Oct 9, 2023
d0f2fa5
Unit tests
bmingles Oct 9, 2023
807796b
Added comments
bmingles Oct 9, 2023
30d1817
Updated comment block
bmingles Oct 10, 2023
9f428e5
Updated some color vars to be dynamic
bmingles Oct 10, 2023
0302957
Re-organized base themes
bmingles Oct 10, 2023
5a518d8
Semantic editor colors
bmingles Oct 10, 2023
496e477
Added theme provider to styleguide
bmingles Oct 10, 2023
b279f65
Mapped a few more colors
bmingles Oct 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions packages/code-studio/src/styleguide/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,22 @@
import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import '@deephaven/components/scss/BaseStyleSheet.scss';
import { LoadingOverlay } from '@deephaven/components';
import {
LoadingOverlay,
preloadTheme,
ThemeData,
ThemeProvider,
} from '@deephaven/components';
import { ApiBootstrap } from '@deephaven/jsapi-bootstrap';
import logInit from '../log/LogInit';

logInit();

preloadTheme();

// Provide a non-null array to ThemeProvider to tell it to initialize
const customThemes: ThemeData[] = [];

// eslint-disable-next-line react-refresh/only-export-components
const StyleGuideRoot = React.lazy(() => import('./StyleGuideRoot'));

Expand All @@ -24,9 +34,11 @@ const apiURL = new URL(
ReactDOM.render(
<ApiBootstrap apiUrl={apiURL.href} setGlobally>
<Suspense fallback={<LoadingOverlay />}>
<FontBootstrap>
<StyleGuideRoot />
</FontBootstrap>
<ThemeProvider themes={customThemes}>
<FontBootstrap>
<StyleGuideRoot />
</FontBootstrap>
</ThemeProvider>
</Suspense>
</ApiBootstrap>,
document.getElementById('root')
Expand Down
4 changes: 2 additions & 2 deletions packages/components/scss/BaseStyleSheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ html {

body {
min-height: 100%;
background-color: var(--dh-background-color, $background);
background-color: var(--dh-color-background, $background);
color: $foreground;
margin: 0;
padding: 0;
Expand All @@ -30,7 +30,7 @@ body {
}

#root {
background-color: var(--dh-background-color, $background);
background-color: var(--dh-color-background, $background);

.app {
height: 100vh;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/LoadingSpinner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
.loading-spinner {
--primary-color: var(
--dh-loading-spinner-primary-color,
var(--dh-accent-color, #4c7dee)
var(--dh-color-accent, #4c7dee)
);
--secondary-color: var(
--dh-loading-spinner-secondary-color,
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/theme/ThemeModel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ export const DEFAULT_LIGHT_THEME_KEY = 'default-light' satisfies BaseThemeKey;

// Css properties that are used in preload data with default values.
export const DEFAULT_PRELOAD_DATA_VARIABLES = {
'--dh-accent-color': '#4c7dee', // dark theme --dh-color-blue-700
'--dh-background-color': '#1a171a', // dark theme --dh-color-gray-50
'--dh-color-accent': '#4c7dee', // dark theme --dh-color-blue-700
'--dh-color-background': '#1a171a', // dark theme --dh-color-gray-50
} satisfies Record<`--dh-${string}`, string>;

export const THEME_CACHE_LOCAL_STORAGE_KEY = 'deephaven.themeCache';
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/theme/ThemeProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export function ThemeProvider({

const activeThemes = useMemo(
() =>
// Themes remain inactive until a non-null themes value is provided. This
// Themes remain inactive until a non-null themes array is provided. This
// avoids the default base theme overriding the preload if we are waiting
// on additional themes to be available.
themes == null
Expand Down
Loading
Loading