diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js index e27417fe7..8e0c80b97 100644 --- a/client/app/scripts/components/app.js +++ b/client/app/scripts/components/app.js @@ -6,7 +6,7 @@ import { connect } from 'react-redux'; import { debounce, isEqual } from 'lodash'; import { ThemeProvider } from 'styled-components'; -import theme from 'weaveworks-ui-components/lib/theme'; +import commonTheme from 'weaveworks-ui-components/lib/theme'; import GlobalStyle from './global-style'; import Logo from './logo'; @@ -55,6 +55,8 @@ import { isTableViewModeSelector, isGraphViewModeSelector, } from '../selectors/topology'; +import defaultTheme from '../themes/default'; +import contrastTheme from '../themes/contrast'; import { VIEWPORT_RESIZE_DEBOUNCE_INTERVAL } from '../constants/timer'; import { ESC_KEY_CODE, @@ -206,7 +208,7 @@ class App extends React.Component { const isIframe = window !== window.top; return ( - + <> diff --git a/client/app/scripts/components/global-style.js b/client/app/scripts/components/global-style.js index 0e6cbcb93..9ec75a442 100644 --- a/client/app/scripts/components/global-style.js +++ b/client/app/scripts/components/global-style.js @@ -1,9 +1,178 @@ import { createGlobalStyle } from 'styled-components'; +import { color } from 'weaveworks-ui-components/lib/theme/selectors'; const GlobalStyle = createGlobalStyle` div { background: ${props => props.theme.scope.background}; } + + /** + * Copyright (c) 2014 The xterm.js authors. All rights reserved. + * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License) + * https://github.com/chjj/term.js + * @license MIT + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + * + * Originally forked from (with the author's permission): + * Fabrice Bellard's javascript vt100 for jslinux: + * http://bellard.org/jslinux/ + * Copyright (c) 2011 Fabrice Bellard + * The original design remains. The terminal itself + * has been extended to include xterm CSI codes, among + * other features. + */ + + /** + * Default styles for xterm.js + */ + + .xterm { + font-family: $font-family-monospace; + font-feature-settings: "liga" 0; + position: relative; + user-select: none; + /* stylelint-disable property-no-vendor-prefix */ + -ms-user-select: none; + -webkit-user-select: none; + /* stylelint-enable property-no-vendor-prefix */ + } + + .xterm.focus, + .xterm:focus { + outline: none; + } + + .xterm .xterm-helpers { + position: absolute; + top: 0; + /** + * The z-index of the helpers must be higher than the canvases in order for + * IMEs to appear on top. + */ + /* stylelint-disable sh-waqar/declaration-use-variable */ + z-index: 10; + /* stylelint-enable sh-waqar/declaration-use-variable */ + } + + .xterm .xterm-helper-textarea { + /* + * HACK: to fix IE's blinking cursor + * Move textarea out of the screen to the far left, so that the cursor is not visible. + */ + position: absolute; + opacity: 0; + left: -9999em; + top: 0; + width: 0; + height: 0; + /* stylelint-disable sh-waqar/declaration-use-variable */ + z-index: -10; + /* stylelint-enable sh-waqar/declaration-use-variable */ + /** Prevent wrapping so the IME appears against the textarea at the correct position */ + white-space: nowrap; + overflow: hidden; + resize: none; + } + + .xterm .composition-view { + /* TODO: Composition position got messed up somewhere */ + background: ${color('black')}; + color: ${color('white')}; + display: none; + position: absolute; + white-space: nowrap; + z-index: ${props => props.theme.layers.front}; + } + + .xterm .composition-view.active { + display: block; + } + + .xterm .xterm-viewport { + /* On OS X this is required in order for the scroll bar to appear fully opaque */ + background-color: ${color('black')}; + overflow-y: scroll; + cursor: default; + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + } + + .xterm .xterm-screen { + position: relative; + } + + .xterm .xterm-screen canvas { + position: absolute; + left: 0; + top: 0; + } + + .xterm .xterm-scroll-area { + visibility: hidden; + } + + .xterm-char-measure-element { + display: inline-block; + visibility: hidden; + position: absolute; + top: 0; + left: -9999em; + line-height: normal; + } + + .xterm.enable-mouse-events { + /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */ + cursor: default; + } + + .xterm:not(.enable-mouse-events) { + cursor: text; + } + + .xterm .xterm-accessibility, + .xterm .xterm-message { + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + /* stylelint-disable sh-waqar/declaration-use-variable */ + z-index: 100; + /* stylelint-enable sh-waqar/declaration-use-variable */ + color: transparent; + } + + .xterm .live-region { + position: absolute; + left: -9999px; + width: 1px; + height: 1px; + overflow: hidden; + } + + .xterm-cursor-pointer { + cursor: pointer; + } `; export default GlobalStyle; diff --git a/client/app/scripts/themes/contrast.js b/client/app/scripts/themes/contrast.js new file mode 100644 index 000000000..9b02091fc --- /dev/null +++ b/client/app/scripts/themes/contrast.js @@ -0,0 +1,38 @@ +import { color } from 'weaveworks-ui-components/lib/theme/selectors'; + +import defaultTheme from './default'; + +const contrastTheme = { + ...defaultTheme, + + /* contrast overrides */ + background: '#ccf', + + backgroundColor: color('white'), + backgroundDarkerColor: color('purple200'), + backgroundDarkerSecondaryColor: color('purple200'), + bodyBackgroundColor: color('white'), + borderLightColor: color('gray600'), + btnOpacityDefault: 1, + btnOpacityDisabled: 0.4, + btnOpacitySelected: 1, + edgeColor: color('black'), + edgeHighlightOpacity: 0.3, + edgeOpacityBlurred: 0, + labelBackgroundColor: color('white'), + linkOpacityDefault: 1, + nodeBorderStrokeWidth: 0.2, + nodeElementsInBackgroundOpacity: 0.4, + nodeHighlightShadowOpacity: 0.4, + nodeHighlightStrokeOpacity: 0.5, + nodeHighlightStrokeWidth: 0.25, + nodePseudoOpacity: 1, + searchBorderColor: color('purple200'), + searchBorderWidth: '2px', + textColor: color('black'), + textDarkerColor: color('black'), + textSecondaryColor: color('black'), + textTertiaryColor: color('black'), +}; + +export default contrastTheme; diff --git a/client/app/scripts/themes/default.js b/client/app/scripts/themes/default.js new file mode 100644 index 000000000..fc5cbb40b --- /dev/null +++ b/client/app/scripts/themes/default.js @@ -0,0 +1,45 @@ +import { color } from 'weaveworks-ui-components/lib/theme/selectors'; +import { transparentize } from 'polished'; + +const defaultTheme = { + background: '#fcc', + + backgroundColor: color('gray50'), // $background-color: $color-gray-50; + backgroundDarkColor: color('purple900'), // $background-dark-color: $color-purple-900; + backgroundDarkerColor: color('purple100'), // $background-darker-color: $color-purple-100; + backgroundDarkerSecondaryColor: color('gray50'), // $background-darker-secondary-color: $color-gray-50; + backgroundLighterColor: color('white'), // $background-lighter-color: $color-white; + baseEase: 'ease-in-out', // $base-ease: ease-in-out; + bodyBackgroundColor: color('purple25'), // $body-background-color: $color-purple-25; + borderLightColor: color('purple100'), // $border-light-color: $color-purple-100; + btnOpacityDefault: 0.9, // $btn-opacity-default: 0.9; + btnOpacityDisabled: 0.25, // $btn-opacity-disabled: 0.25; + btnOpacityHover: 1, // $btn-opacity-hover: 1; + btnOpacitySelected: 0.9, // $btn-opacity-selected: 0.9; + detailsWindowPaddingLeft: '30px', // $details-window-padding-left: 30px; + detailsWindowWidth: '420px', // $details-window-width: 420px; + edgeColor: color('purple500'), // $edge-color: $color-purple-500; + edgeHighlightOpacity: 0.1, // $edge-highlight-opacity: 0.1; + edgeOpacity: 0.5, // $edge-opacity: 0.5; + edgeOpacityBlurred: 0.2, // $edge-opacity-blurred: 0.2; + labelBackgroundColor: props => transparentize(0.3, props.theme.colors.purple25), + linkOpacityDefault: 0.8, // $link-opacity-default: 0.8; + nodeBorderStrokeWidth: 0.12, // $node-border-stroke-width: 0.12; + nodeElementsInBackgroundOpacity: 0.7, // $node-elements-in-background-opacity: 0.7; + nodeHighlightShadowOpacity: 0.5, // $node-highlight-shadow-opacity: 0.5; + nodeHighlightStrokeOpacity: 0.4, // $node-highlight-stroke-opacity: 0.4; + nodeHighlightStrokeWidth: 0.04, // $node-highlight-stroke-width: 0.04; + nodePseudoOpacity: 0.8, // $node-pseudo-opacity: 0.8; + nodeShadowStrokeWidth: 0.18, // $node-shadow-stroke-width: 0.18; + nodeTextScale: 2, // $node-text-scale: 2; + searchBorderColor: 'transparent', // $search-border-color: transparent; + searchBorderWidth: '1px', // $search-border-width: 1px; + terminalHeaderHeight: '44px', // $terminal-header-height: 44px; + textColor: color('purple800'), // $text-color: $color-purple-800; + textDarkerColor: color('purple900'), // $text-darker-color: $color-purple-900; + textSecondaryColor: color('purple600'), // $text-secondary-color: $color-purple-600; + textTertiaryColor: color('purple400'), // $text-tertiary-color: $color-purple-400; + timelineHeight: '55px', // $timeline-height: 55px; +}; + +export default defaultTheme; diff --git a/client/app/styles/main.scss b/client/app/styles/main.scss index f3db39a52..81625aa93 100644 --- a/client/app/styles/main.scss +++ b/client/app/styles/main.scss @@ -1,7 +1,6 @@ // Load the default theme initially to apply it on the global html level. @import "default-theme"; @import "base"; -@import "terminal"; .scope-app.contrast-mode { // Load the contrast theme and reload all the CSS in the scope-app container. diff --git a/client/app/styles/terminal.scss b/client/app/styles/terminal.scss deleted file mode 100644 index 3ba6b4b27..000000000 --- a/client/app/styles/terminal.scss +++ /dev/null @@ -1,167 +0,0 @@ -/** - * Copyright (c) 2014 The xterm.js authors. All rights reserved. - * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License) - * https://github.com/chjj/term.js - * @license MIT - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in - * all copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN - * THE SOFTWARE. - * - * Originally forked from (with the author's permission): - * Fabrice Bellard's javascript vt100 for jslinux: - * http://bellard.org/jslinux/ - * Copyright (c) 2011 Fabrice Bellard - * The original design remains. The terminal itself - * has been extended to include xterm CSI codes, among - * other features. - */ - -/** - * Default styles for xterm.js - */ - -.xterm { - font-family: $font-family-monospace; - font-feature-settings: "liga" 0; - position: relative; - user-select: none; - -ms-user-select: none; - -webkit-user-select: none; -} - -.xterm.focus, -.xterm:focus { - outline: none; -} - -.xterm .xterm-helpers { - position: absolute; - top: 0; - /** - * The z-index of the helpers must be higher than the canvases in order for - * IMEs to appear on top. - */ - /* sass-lint:disable variable-for-property */ - z-index: 10; - /* sass-lint:enable variable-for-property */ -} - -.xterm .xterm-helper-textarea { - /* - * HACK: to fix IE's blinking cursor - * Move textarea out of the screen to the far left, so that the cursor is not visible. - */ - position: absolute; - opacity: 0; - left: -9999em; - top: 0; - width: 0; - height: 0; - /* sass-lint:disable variable-for-property */ - z-index: -10; - /* sass-lint:enable variable-for-property */ - /** Prevent wrapping so the IME appears against the textarea at the correct position */ - white-space: nowrap; - overflow: hidden; - resize: none; -} - -.xterm .composition-view { - /* TODO: Composition position got messed up somewhere */ - background: $color-black; - color: $color-white; - display: none; - position: absolute; - white-space: nowrap; - /* sass-lint:disable variable-for-property */ - z-index: 1; - /* sass-lint:enable variable-for-property */ -} - -.xterm .composition-view.active { - display: block; -} - -.xterm .xterm-viewport { - /* On OS X this is required in order for the scroll bar to appear fully opaque */ - background-color: $color-black; - overflow-y: scroll; - cursor: default; - position: absolute; - right: 0; - left: 0; - top: 0; - bottom: 0; -} - -.xterm .xterm-screen { - position: relative; -} - -.xterm .xterm-screen canvas { - position: absolute; - left: 0; - top: 0; -} - -.xterm .xterm-scroll-area { - visibility: hidden; -} - -.xterm-char-measure-element { - display: inline-block; - visibility: hidden; - position: absolute; - top: 0; - left: -9999em; - line-height: normal; -} - -.xterm.enable-mouse-events { - /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */ - cursor: default; -} - -.xterm:not(.enable-mouse-events) { - cursor: text; -} - -.xterm .xterm-accessibility, -.xterm .xterm-message { - position: absolute; - left: 0; - top: 0; - bottom: 0; - right: 0; - /* sass-lint:disable variable-for-property */ - z-index: 100; - /* sass-lint:enable variable-for-property */ - color: transparent; -} - -.xterm .live-region { - position: absolute; - left: -9999px; - width: 1px; - height: 1px; - overflow: hidden; -} - -.xterm-cursor-pointer { - cursor: pointer; -} diff --git a/client/package.json b/client/package.json index e7a99f2ca..d75e50ea1 100644 --- a/client/package.json +++ b/client/package.json @@ -29,6 +29,7 @@ "lodash": "4.17.15", "moment": "2.24.0", "page": "1.11.4", + "polished": "3.4.1", "prop-types": "15.7.2", "rc-slider": "8.6.13", "react": "16.9.0", diff --git a/client/yarn.lock b/client/yarn.lock index 5801294b2..bf4c88e4d 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -7374,6 +7374,13 @@ polished@1.9.0: version "1.9.0" resolved "https://registry.yarnpkg.com/polished/-/polished-1.9.0.tgz#76d277d6610dbcb85477dbba1bd1aa8e642741b6" +polished@3.4.1: + version "3.4.1" + resolved "https://registry.yarnpkg.com/polished/-/polished-3.4.1.tgz#1eb5597ec1792206365635811d465751f5cbf71c" + integrity sha512-GflTnlP5rrpDoigjczEkS6Ye7NDA4sFvAnlr5hSDrEvjiVj97Xzev3hZlLi3UB27fpxyTS9rWU64VzVLWkG+mg== + dependencies: + "@babel/runtime" "^7.4.5" + posix-character-classes@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"