diff --git a/js/lab/src/theme/static/base.css b/js/lab/src/theme/static/base.css new file mode 100644 index 0000000000..42aa20f490 --- /dev/null +++ b/js/lab/src/theme/static/base.css @@ -0,0 +1,94 @@ +/* + * Copyright 2017 TWO SIGMA OPEN SOURCE, LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.widget-text input[type="password"] { + box-sizing: border-box; + border: var(--jp-widgets-input-border-width) solid var(--jp-widgets-input-border-color); + background-color: var(--jp-widgets-input-background-color); + color: var(--jp-widgets-input-color); + font-size: var(--jp-widgets-font-size); + padding: var(--jp-widgets-input-padding) calc( var(--jp-widgets-input-padding) * 2 ); + flex-grow: 1; + min-width: 0; + flex-shrink: 1; + outline: none !important; + height: var(--jp-widgets-inline-height); + line-height: var(--jp-widgets-inline-height); +} + +.widget-text input[type="password"]:focus { + border-color: var(--jp-widgets-input-focus-border-color); +} + + +.widget-select-multiple select { + border: var(--jp-widgets-input-border-width) solid var(--jp-widgets-input-border-color); + background-color: var(--jp-widgets-input-background-color); + color: var(--jp-widgets-input-color); + font-size: var(--jp-widgets-font-size); +} + +.widget-select select:focus, +.widget-select-multiple select:focus { + border-color: var(--jp-widgets-input-focus-border-color); +} + +.easyform-combobox-input { + box-sizing: border-box; + border: var(--jp-widgets-input-border-width) solid var(--jp-widgets-input-border-color) !important; + background-color: var(--jp-widgets-input-background-color); + color: var(--jp-widgets-input-color); + font-size: var(--jp-widgets-font-size); + padding: var(--jp-widgets-input-padding) calc( var(--jp-widgets-input-padding) * 2 ); + outline: none !important; + height: calc(var(--jp-widgets-inline-height) + 2px); + line-height: var(--jp-widgets-inline-height); +} + +.easyform-combobox-toggle { + border-color: var(--jp-widgets-input-border-color); + background-color: var(--jp-widgets-input-background-color); +} +.easyform-combobox-toggle:focus, +.easyform-combobox-toggle:active, +.easyform-combobox-toggle:hover { + border-color: var(--jp-widgets-input-focus-border-color); + background-color: var(--jp-widgets-input-background-color); +} + +.beaker-easyform-container .datepicker-container.flatpickr input[type="text"] { + box-sizing: border-box; + border: var(--jp-widgets-input-border-width) solid var(--jp-widgets-input-border-color); + background-color: var(--jp-widgets-input-background-color); + color: var(--jp-widgets-input-color); + font-size: var(--jp-widgets-font-size); + padding: var(--jp-widgets-input-padding) calc( var(--jp-widgets-input-padding) * 2 ); + outline: none !important; + height: var(--jp-widgets-inline-height); + line-height: var(--jp-widgets-inline-height); + border-right-width: 0; +} + +.beaker-easyform-container .datepicker-container.flatpickr .date-picker-button { + border-color: var(--jp-widgets-input-border-color); + background-color: var(--jp-widgets-input-background-color); +} +.beaker-easyform-container .datepicker-container.flatpickr .date-picker-button:focus, +.beaker-easyform-container .datepicker-container.flatpickr .date-picker-button:active, +.beaker-easyform-container .datepicker-container.flatpickr .date-picker-button:hover { + border-color: var(--jp-widgets-input-focus-border-color); + outline: none !important; +} diff --git a/js/lab/src/theme/static/dark.css b/js/lab/src/theme/static/dark.css index 3f55975c32..2333958206 100644 --- a/js/lab/src/theme/static/dark.css +++ b/js/lab/src/theme/static/dark.css @@ -15,6 +15,7 @@ */ @import './fonts.css'; +@import './base.css'; body { background-color: var(--jp-layout-color3); @@ -27,23 +28,23 @@ pre { .plot-plotcontainer, .combplot-plotcontainer { - background-color: var(--jp-layout-color2); - fill: var(--jp-content-font-color2); + background-color: var(--jp-layout-color0); + fill: var(--jp-content-font-color0); } .plot-coverbox, .combplot-plotcoverbox { - fill: var(--jp-layout-color2); + fill: var(--jp-layout-color0); } .plot-title { - color: var(--jp-content-font-color2); + color: var(--jp-content-font-color0); } .plot-legend { - background-color: var(--jp-layout-color2); - color: var(--jp-content-font-color2); - border-color: var(--jp-border-color2); + background-color: var(--jp-layout-color0); + color: var(--jp-content-font-color0); + border-color: var(--jp-border-color0); } .plot-gridline-base, @@ -52,6 +53,11 @@ pre { stroke: var(--jp-border-color0); } +.plot-tooltip { + background-color: var(--jp-layout-color1); + color: var(--jp-content-font-color1); +} + #beakerx-tree-widget { color: var(--jp-content-font-color1); } @@ -116,8 +122,9 @@ pre { } .p-DataGrid { - border-color: var(--jp-border-color2); + border-color: transparent; } + .p-DataGrid-viewport { border-color: var(--jp-border-color2); } @@ -144,6 +151,12 @@ pre { border-color: var(--jp-border-color2) !important; } +.p-DataGrid-tooltip { + background-color: var(--jp-layout-color1); + color: var(--jp-content-font-color1); + border-color: var(--jp-border-color1); +} + .p-DataGrid-scrollCorner { background-color: var(--jp-layout-color0); border-color: var(--jp-border-color2); @@ -197,3 +210,86 @@ pre { fill: var(--jp-content-font-color2); stroke: var(--jp-content-font-color2); } + +.beaker-fieldset { + border-color: var(--jp-border-color2); +} + +.beaker-fieldset legend { + color: var(--jp-content-font-color0); +} + +.flatpickr-calendar { + background-color: var(--jp-layout-color2); + color: var(--jp-content-font-color2); + border-color: var(--jp-border-color2); + -webkit-box-shadow: 1px 0 0 var(--jp-border-color2), -1px 0 0 var(--jp-border-color2), 0 1px 0 var(--jp-border-color2), 0 -1px 0 var(--jp-border-color2), 0 3px 13px rgba(0,0,0,0.08); + box-shadow: 1px 0 0 var(--jp-border-color2), -1px 0 0 var(--jp-border-color2), 0 1px 0 var(--jp-border-color2), 0 -1px 0 var(--jp-border-color2), 0 3px 13px rgba(0,0,0,0.08); +} + +.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { + -webkit-box-shadow: -2px 0 0 var(--jp-border-color2), 5px 0 0 var(--jp-border-color2); + box-shadow: -2px 0 0 var(--jp-border-color2), 5px 0 0 var(--jp-border-color2); +} +.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time { + border-top: 1px solid var(--jp-border-color2); +} +.flatpickr-calendar.arrowTop:before { + border-bottom-color: var(--jp-border-color2); +} +.flatpickr-calendar.arrowTop:after { + border-bottom-color: var(--jp-border-color2); +} +.flatpickr-calendar.arrowBottom:before { + border-top-color: var(--jp-border-color2); +} +.flatpickr-calendar.arrowBottom:after { + border-top-color: var(--jp-border-color2); +} +.flatpickr-months .flatpickr-month { + color: rgba(255,255,255,0.9); + fill: rgba(255,255,255,0.9); +} +.flatpickr-months .flatpickr-prev-month, +.flatpickr-months .flatpickr-next-month { + color: rgba(255,255,255,0.9); + fill: rgba(255,255,255,0.9); +} + +.flatpickr-day { + color: rgba(255,255,255,0.9); +} + +.flatpickr-day.inRange, +.flatpickr-day.prevMonthDay.inRange, +.flatpickr-day.nextMonthDay.inRange, +.flatpickr-day.today.inRange, +.flatpickr-day.prevMonthDay.today.inRange, +.flatpickr-day.nextMonthDay.today.inRange, +.flatpickr-day:hover, +.flatpickr-day.prevMonthDay:hover, +.flatpickr-day.nextMonthDay:hover, +.flatpickr-day:focus, +.flatpickr-day.prevMonthDay:focus, +.flatpickr-day.nextMonthDay:focus { + background-color: var(--jp-layout-color3); + border-color: var(--jp-layout-color3); +} + +.flatpickr-day.disabled, +.flatpickr-day.disabled:hover, +.flatpickr-day.prevMonthDay, +.flatpickr-day.nextMonthDay, +.flatpickr-day.notAllowed, +.flatpickr-day.notAllowed.prevMonthDay, +.flatpickr-day.notAllowed.nextMonthDay { + color: rgba(255,255,255,0.3); +} + +span.flatpickr-weekday { + color: rgba(255,255,255,0.54); +} + +.lds-spinner div { + background-color: #2196F3; +} \ No newline at end of file diff --git a/js/lab/src/theme/static/light.css b/js/lab/src/theme/static/light.css index f0690d610a..93e1a1cd14 100644 --- a/js/lab/src/theme/static/light.css +++ b/js/lab/src/theme/static/light.css @@ -14,4 +14,5 @@ * limitations under the License. */ -@import './fonts.css'; \ No newline at end of file +@import './fonts.css'; +@import './base.css'; \ No newline at end of file diff --git a/js/notebook/src/BeakerXThemeHelper.ts b/js/notebook/src/BeakerXThemeHelper.ts index 0673dc0a59..473803d396 100644 --- a/js/notebook/src/BeakerXThemeHelper.ts +++ b/js/notebook/src/BeakerXThemeHelper.ts @@ -46,11 +46,11 @@ export default class BeakerXThemeHelper { } public static get FOCUSED_CELL_BACKGROUND(): string { - return this.isDark ? 'rgb(99, 99, 99)' : 'rgb(200, 200, 200)'; + return this.isDark ? '#66bb6a' : '#c8c8c8'; } public static get SELECTED_CELL_BACKGROUND(): string { - return this.isDark ? '#4f4126' : '#B0BED9'; + return this.isDark ? '#2196F3' : '#B0BED9'; } public static get HIGHLIGHTED_CELL_BACKGROUND_EVEN(): string { @@ -61,14 +61,23 @@ export default class BeakerXThemeHelper { return this.isDark ? 'rgb(26, 26, 26)' : 'rgb(249, 249, 249)'; } + public static get MIN_LIGHTNESS_VALUE(): number { + return this.isDark ? 15 : 35; + } + + public static get MIN_SATURATION_VALUE(): number { + return this.isDark ? 15 : 35; + } + private static getDarkStyle(): DataGrid.IStyle { return { ...DataGrid.defaultStyle, voidColor: '#636363', backgroundColor: '#212121', - headerBackgroundColor: '#212121', + headerBackgroundColor: '#252525', rowBackgroundColor: i => i % 2 === 0 ? '#424242' : '', - gridLineColor: '#111111' + gridLineColor: '#626262', + headerGridLineColor: '#626262', }; } diff --git a/js/notebook/src/Spinner.ts b/js/notebook/src/Spinner.ts index 23758049a3..d0729bcd3b 100644 --- a/js/notebook/src/Spinner.ts +++ b/js/notebook/src/Spinner.ts @@ -34,119 +34,12 @@ export class SpinnerView extends widgets.DOMWidgetView { public render() { let title = this.model.get('title'); - this.el.innerHTML = `
\n` + - '
\n' + - '
' + this.el.innerHTML = ` +
+
+
+
+
`; } } diff --git a/js/notebook/src/shared/style/spark.scss b/js/notebook/src/shared/style/spark.scss index 6530f030c8..8c993ba1c3 100644 --- a/js/notebook/src/shared/style/spark.scss +++ b/js/notebook/src/shared/style/spark.scss @@ -226,3 +226,113 @@ line-height: 14px; } } + +@keyframes lds-spinner { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@-webkit-keyframes lds-spinner { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +.lds-spinner { + position: relative; + width: 30px !important; + height: 30px !important; + -webkit-transform: translate(-15px, -15px) scale(0.15) translate(15px, 15px); + transform: translate(-15px, -15px) scale(0.15) translate(15px, 15px); + + div { + left: 94px; + top: 48px; + position: absolute; + -webkit-animation: lds-spinner linear 1s infinite; + animation: lds-spinner linear 1s infinite; + background: #0055a5; + width: 12px; + height: 24px; + border-radius: 40%; + -webkit-transform-origin: 6px 52px; + transform-origin: 6px 52px; + &:nth-child(1) { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + -webkit-animation-delay: -0.916666666666667s; + animation-delay: -0.916666666666667s; + } + &:nth-child(2) { + -webkit-transform: rotate(30deg); + transform: rotate(30deg); + -webkit-animation-delay: -0.833333333333333s; + animation-delay: -0.833333333333333s; + } + &:nth-child(3) { + -webkit-transform: rotate(60deg); + transform: rotate(60deg); + -webkit-animation-delay: -0.75s; + animation-delay: -0.75s; + } + &:nth-child(4) { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + -webkit-animation-delay: -0.666666666666667s; + animation-delay: -0.666666666666667s; + } + &:nth-child(5) { + -webkit-transform: rotate(120deg); + transform: rotate(120deg); + -webkit-animation-delay: -0.583333333333333s; + animation-delay: -0.583333333333333s; + } + &:nth-child(6) { + -webkit-transform: rotate(150deg); + transform: rotate(150deg); + -webkit-animation-delay: -0.5s; + animation-delay: -0.5s; + } + &:nth-child(7) { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); + -webkit-animation-delay: -0.416666666666667s; + animation-delay: -0.416666666666667s; + } + &:nth-child(8) { + -webkit-transform: rotate(210deg); + transform: rotate(210deg); + -webkit-animation-delay: -0.333333333333333s; + animation-delay: -0.333333333333333s; + } + &:nth-child(9) { + -webkit-transform: rotate(240deg); + transform: rotate(240deg); + -webkit-animation-delay: -0.25s; + animation-delay: -0.25s; + } + &:nth-child(10) { + -webkit-transform: rotate(270deg); + transform: rotate(270deg); + -webkit-animation-delay: -0.166666666666667s; + animation-delay: -0.166666666666667s; + } + &:nth-child(11) { + -webkit-transform: rotate(300deg); + transform: rotate(300deg); + -webkit-animation-delay: -0.083333333333333s; + animation-delay: -0.083333333333333s; + } + &:nth-child(12) { + -webkit-transform: rotate(330deg); + transform: rotate(330deg); + -webkit-animation-delay: 0s; + animation-delay: 0s; + } + } +} diff --git a/js/notebook/src/tableDisplay/dataGrid/highlighter/UniqueEntriesHighlighter.ts b/js/notebook/src/tableDisplay/dataGrid/highlighter/UniqueEntriesHighlighter.ts index c223e727cd..5bd6641f38 100644 --- a/js/notebook/src/tableDisplay/dataGrid/highlighter/UniqueEntriesHighlighter.ts +++ b/js/notebook/src/tableDisplay/dataGrid/highlighter/UniqueEntriesHighlighter.ts @@ -24,8 +24,6 @@ import BeakerXThemeHelper from "../../../BeakerXThemeHelper"; const MAX_HUE_VALUE = 360; const DEFAULT_HSL_COMPONENT_STEPS_COUNT = 50; -const MIN_SATURATION_VALUE = 35; -const MIN_LIGHTNESS_VALUE = 35; export default class UniqueEntriesHighlighter extends Highlighter { uniqueValues: any[] = []; @@ -95,8 +93,8 @@ export default class UniqueEntriesHighlighter extends Highlighter { lightnessStepCount += 1; } - let saturation = MIN_SATURATION_VALUE + saturationRatio * DEFAULT_HSL_COMPONENT_STEPS_COUNT; - let lightness = MIN_LIGHTNESS_VALUE + lightnessRatio * DEFAULT_HSL_COMPONENT_STEPS_COUNT; + let saturation = BeakerXThemeHelper.MIN_SATURATION_VALUE + saturationRatio * DEFAULT_HSL_COMPONENT_STEPS_COUNT; + let lightness = BeakerXThemeHelper.MIN_LIGHTNESS_VALUE + lightnessRatio * DEFAULT_HSL_COMPONENT_STEPS_COUNT; return `hsl(${hue}, ${saturation}%, ${lightness}%)`; }