Markup / scss refactor WIP

- Add some initial theme files; pull back from theme "override"
approach;
- Splitters refined;
- Style cleanups;

src/MCT.js

@@ -33,7 +33,6 @@ define([
     './ui/registries/ToolbarRegistry',
     './adapter/indicators/legacy-indicators-plugin',
     './styles-new/core.scss',
-    './styles-new/theme-snow.scss',
     './ui/components/layout/Layout.vue',
     'vue'
 ], function (
@@ -49,7 +48,6 @@ define([
     ToolbarRegistry,
     LegacyIndicatorsPlugin,
     coreStyles,
-    themeSnow,
     Layout,
     Vue
 ) {

src/styles-new/_constants-snow.scss

@@ -0,0 +1,276 @@
+// Mixins
+@function pullForward($c: $colorBodyBg, $p: 20%) {
+    // For dark interfaces, lighter things come forward - opposite for light interfaces
+    @return darken($c, $p);
+}
+
+@function pushBack($c: $colorBodyBg, $p: 20%) {
+    // For dark interfaces, darker things move back - opposite for light interfaces
+    @return lighten($c, $p);
+}
+
+// Global
+$colorBodyBg: #fcfcfc;
+$colorBodyFg: #666;
+$colorGenBg: #fff;
+$colorStatusBarBg: #000;
+$colorStatusBarFg: #999;
+$colorStatusBarFgHov: #aaa;
+$colorKey: #0099cc;
+$colorKeySelectedBg: $colorKey;
+$colorKeyFg: #fff;
+$colorKeyHov: #00c0f6;
+$colorEditAreaBg: #eafaff;
+$colorEditAreaFg: #4bb1c7;
+$colorInteriorBorder: rgba($colorBodyFg, 0.2);
+$colorA: #999;
+$colorAHov: $colorKey;
+$contrastRatioPercent: 40%;
+$hoverRatioPercent: 10%;
+$basicCr: 4px;
+$controlCr: $basicCr;
+$smallCr: 3px;
+$overlayCr: 11px;
+
+// Buttons and Controls
+$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
+$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
+$colorBtnFg: #fff;
+$colorBtnFgHov: $colorBtnFg;
+$colorBtnIcon: #eee;
+$colorBtnIconHov: $colorBtnFgHov;
+$colorBtnMajorBg: $colorKey;
+$colorBtnMajorBgHov: $colorKeyHov;
+$colorBtnMajorFg: $colorKeyFg;
+$colorBtnMajorFgHov: pushBack($colorBtnMajorFg, $hoverRatioPercent);
+$colorClickIcon: $colorKey;
+$colorClickIconHov: $colorKeyHov;
+$colorToggleIcon: rgba($colorClickIcon, 0.5);
+$colorToggleIconActive: $colorKey;
+$colorToggleIconHov: rgba($colorToggleIconActive, 0.5);
+$colorInvokeMenu: #000;
+$contrastInvokeMenuPercent: 40%;
+$shdwBtns: none;
+$shdwBtnsOverlay: none;
+$sliderColorBase: $colorKey;
+$sliderColorRangeHolder: rgba(black, 0.07);
+$sliderColorRange: rgba($sliderColorBase, 0.2);
+$sliderColorRangeHov: rgba($sliderColorBase, 0.4);
+$sliderColorKnob: pushBack($sliderColorBase, 20%);
+$sliderColorKnobHov: rgba($sliderColorBase, 0.7);
+$sliderColorRangeValHovBg: $sliderColorRange;
+$sliderColorRangeValHovFg: $colorBodyFg;
+$sliderKnobW: 15px;
+$sliderKnobR: 2px;
+$timeControllerToiLineColor: $colorBodyFg;
+$timeControllerToiLineColorHov: #0052b5;
+$colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
+
+// Foundation Colors
+$colorAlt1: #776ba2;
+$colorAlert: #ff3c00;
+$colorWarningHi: #990000;
+$colorWarningLo: #ff9900;
+$colorDiagnostic: #a4b442;
+$colorCommand: #3693bd;
+$colorInfo: #2294a2;
+$colorOk: #33cc33;
+$colorIconLink: #49dedb;
+$colorPausedBg: #ff9900;
+$colorPausedFg: #fff;
+$colorCreateBtn: $colorKey;
+$colorGridLines: rgba(#000, 0.05);
+$colorInvokeMenu: #fff;
+$colorObjHdrTxt: $colorBodyFg;
+$colorObjHdrIc: lighten($colorObjHdrTxt, 30%);
+$colorTick: rgba(black, 0.2);
+$colorSelectableSelectedPrimary: $colorKey;
+$colorSelectableHov: rgba($colorBodyFg, 0.4);
+
+// Menu colors
+$colorMenuBg: pushBack($colorBodyBg, 10%);
+$colorMenuFg: pullForward($colorMenuBg, 70%);
+$colorMenuIc: $colorKey;
+$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent);
+$colorMenuHovFg: $colorMenuFg;
+$colorMenuHovIc: $colorMenuIc;
+$shdwMenu: rgba(black, 0.5) 0 1px 5px;
+$shdwMenuText: none;
+$colorCreateMenuLgIcon: $colorKey;
+$colorCreateMenuText: $colorBodyFg;
+
+// Form colors
+$colorCheck: $colorKey;
+$colorFormRequired: $colorKey;
+$colorFormValid: $colorOk;
+$colorFormError: $colorWarningHi;
+$colorFormInvalid: #ff2200;
+$colorFormFieldErrorBg: $colorFormError;
+$colorFormFieldErrorFg: rgba(#fff, 0.6);
+$colorFormLines: rgba(#000, 0.1);
+$colorFormSectionHeader: rgba(#000, 0.05);
+$colorInputBg: $colorGenBg;
+$colorInputFg: $colorBodyFg;
+$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
+$colorFormText: pushBack($colorBodyFg, 10%);
+$colorInputIcon: pushBack($colorBodyFg, 25%);
+$colorFieldHint: pullForward($colorBodyFg, 40%);
+
+// Inspector
+$colorInspectorBg: pullForward($colorBodyBg, 5%);
+$colorInspectorFg: $colorBodyFg;
+$colorInspectorPropName: pushBack($colorBodyFg, 20%);
+$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
+$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
+$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
+
+// Status colors, mainly used for messaging and item ancillary symbols
+$colorStatusFg: #999;
+$colorStatusDefault: #ccc;
+$colorStatusInfo: #60ba7b;
+$colorStatusAlert: #ffb66c;
+$colorStatusError: #da0004;
+$colorStatusBtnBg: #666;
+$colorProgressBarOuter: rgba(#000, 0.1);
+$colorProgressBarAmt: #0a0;
+$progressBarHOverlay: 15px;
+$progressBarStripeW: 20px;
+$shdwStatusIc: rgba(white, 0.8) 0 0px 5px;
+$animPausedPulseDur: 1s;
+
+// Indicator colors
+$colorIndicatorAvailable: $colorKey;
+$colorIndicatorDisabled: #444;
+$colorIndicatorOn: $colorOk;
+$colorIndicatorOff: #666;
+
+// Selects
+$colorSelectBg: $colorBtnBg;
+$colorSelectFg: $colorBtnFg;
+
+// Limits and staleness colors//
+$colorTelemFresh: pullForward($colorBodyFg, 20%);
+$colorTelemStale: pushBack($colorBodyFg, 20%);
+$styleTelemStale: italic;
+$colorLimitYellowBg: rgba(#ffaa00, 0.3);
+$colorLimitYellowIc: #ffaa00;
+$colorLimitRedBg: rgba(red, 0.3);
+$colorLimitRedIc: red;
+
+// Bubble colors
+$colorInfoBubbleBg: $colorMenuBg;
+$colorInfoBubbleFg: #666;
+$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
+$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
+
+// Overlay
+$colorOvrBlocker: rgba(black, 0.7);//
+$colorOvrBg: $colorBodyBg;
+$colorOvrFg: $colorBodyFg;
+$colorOvrBtnBg: pullForward($colorOvrBg, 40%);
+$colorOvrBtnFg: #fff;
+$colorFieldHintOverlay: pullForward($colorOvrBg, 40%);
+$durLargeViewExpand: 250ms;
+
+// Items
+$colorItemBg: #ddd;
+$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent * 0.7);
+$colorItemFg: $colorBodyFg;
+$colorItemFgDetails: pushBack($colorItemFg, 15%);
+$colorItemIc: $colorKey;
+$colorItemSubIcons: $colorItemFgDetails;
+$colorItemOpenIcon: $colorItemFgDetails;
+$shdwItemText: none;
+$colorItemBgSelected: $colorKey;
+
+// Tabular
+$colorTabBorder: pullForward($colorBodyBg, 10%);
+$colorTabBodyBg: $colorBodyBg;
+$colorTabBodyFg: pullForward($colorBodyFg, 20%);
+$colorTabHeaderBg: pullForward($colorBodyBg, 10%);
+$colorTabHeaderFg: pullForward($colorBodyFg, 20%);
+$colorTabHeaderBorder: $colorBodyBg;
+
+// Plot
+$colorPlotBg: rgba(black, 0.05);
+$colorPlotFg: $colorBodyFg;
+$colorPlotHash: black;
+$opacityPlotHash: 0.2;
+$stylePlotHash: dashed;
+$colorPlotAreaBorder: $colorInteriorBorder;
+$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
+$legendCollapsedNameMaxW: 50%;
+$legendHoverValueBg: rgba($colorBodyFg, 0.2);
+
+// Tree
+$colorTreeBg: #f5f5f5;
+$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
+$colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
+$colorItemTreeIcon: $colorKey;
+$colorItemTreeIconHover: $colorItemTreeIcon;
+$colorItemTreeFg: $colorBodyFg;
+$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
+$colorItemTreeSelectedFg: $colorBodyBg;
+$colorItemTreeEditingBg: #caf1ff;
+$colorItemTreeEditingFg: $colorEditAreaFg;
+$colorItemTreeVC: $colorBodyFg;
+$colorItemTreeVCHover: $colorKey;
+$colorItemTreeSelectedVC: $colorBodyBg;
+$shdwItemTreeIcon: none;
+
+// Images
+$colorThumbHoverBg: $colorItemTreeHoverBg;
+
+// Scrollbar
+$scrollbarTrackSize: 7px;
+$scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
+$scrollbarTrackColorBg: rgba(#000, 0.2);
+$scrollbarThumbColor: darken($colorBodyBg, 50%);
+$scrollbarThumbColorHov: $colorKey;
+$scrollbarThumbColorOverlay: darken($colorOvrBg, 50%);
+$scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;
+$scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
+$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
+
+// Splitter
+// All splitterD* values MUST both be either odd or even numbers
+$splitterD: 16px;
+$splitterDSm: 10px; // Smaller splitter, used inside elements like a Timeline view
+$splitterHandleD: 4px;
+$colorSplitterBaseBg: $colorBodyBg;
+$colorSplitterBg: pullForward($colorSplitterBaseBg, 15%);
+$splitterShdw: none;
+$splitterEndCr: none;
+$colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent * 2);
+$colorSplitterActive: $colorKey;
+
+// Minitabs
+$colorMiniTabBg: $colorSplitterBg;
+$colorMiniTabFg: pullForward($colorMiniTabBg, 30%);
+$colorMiniTabBgHov: $colorSplitterHover;
+$colorMiniTabFgHov: #fff;
+
+// Mobile
+$colorMobilePaneLeft: darken($colorBodyBg, 2%);
+$colorMobilePaneLeftTreeItemBg: pullForward($colorMobilePaneLeft, 3%);
+$colorMobileSelectListTreeItemBg: rgba(#000, 0.05);
+
+// Datetime Picker, Calendar
+$colorCalCellHovBg: $colorKey;
+$colorCalCellHovFg: $colorKeyFg;
+$colorCalCellSelectedBg: $colorItemTreeSelectedBg;
+$colorCalCellSelectedFg: $colorItemTreeSelectedFg;
+$colorCalCellInMonthBg: pullForward($colorMenuBg, 5%);
+
+// Palettes
+$colorPaletteFg: pullForward($colorMenuBg, 30%);
+$colorPaletteSelected: #333;
+$shdwPaletteFg: none;
+$shdwPaletteSelected: inset 0 0 0 1px #fff;
+
+// About Screen
+$colorAboutLink: #84b3ff;
+
+// Loading
+$colorLoadingFg: $colorAlt1;
+$colorLoadingBg: rgba($colorLoadingFg, 0.1);

src/styles-new/_global.scss

@@ -48,8 +48,6 @@ a {
 
 body, html {
     -webkit-font-smoothing: subpixel-antialiased;
-    //background-color: $colorBodyBg;
-    //color: $colorBodyFg;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 13px;
     font-weight: normal;
@@ -57,6 +55,11 @@ body, html {
     width: 100%;
 }
 
+body {
+    background-color: $colorBodyBg;
+    color: $colorBodyFg;
+}
+
 em {
     font-style: normal;
 }

src/styles-new/core.scss

@@ -1,4 +1,5 @@
 @import "vendor/normalize.min.css";
 @import "constants";
+@import "constants-snow";
 @import "global";
-@import "glyphs";
+@import "glyphs";

src/ui/components/controls/splitter.vue

@@ -6,45 +6,44 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/constants";
+    @import "~styles/constants-snow";
+
     .c-splitter {
         $c: #06f;
-        $s: 10px;
+        $size: $splitterHandleD;
+        $margin: 0px;
+        $hitMargin: 7px;
+
+        background: $colorSplitterBg;
 
         &:before {
+            // Bigger hit area
             content: '';
             display: block;
-            background: #ccc;
             position: absolute;
+            z-index: 2;
         }
 
         &:hover {
-            background: rgba($c, 0.3);
+            background: $colorSplitterHover;
-            &:before {
-                background: $c;
-            }
         }
 
         &-vertical {
             cursor: col-resize;
-            width: $s;
+            width: $size;
+            margin: 0 $margin;
             &:before {
-                // Divider line
+                top: 0; right: $hitMargin * -1; bottom: 0; left: $hitMargin * -1;
-                width: 1px;
-                height: 100%;
-                left: 50%;
-                transform: translateX(-50%);
             }
         }
 
         &-horizontal {
             cursor: row-resize;
-            height: $s;
+            height: $size;
+            margin: $margin 0;
             &:before {
-                // Divider line
+                top: $hitMargin * -1; right: 0; bottom: $hitMargin * -1; left: 0;
-                width: 100%;
-                height: 1px;
-                top: 50%;
-                transform: translateY(-50%);
             }
         }
     }

src/ui/components/layout/Layout.vue

@@ -30,6 +30,7 @@
 
 <style lang="scss">
 @import "~styles/constants";
+@import "~styles/constants-snow";
 
 /******************************* SHELL */
 .l-shell {
@@ -40,8 +41,7 @@
 
     /********** STATUS AREA */
     &__status {
-        background: #666;
+        border-bottom: 1px solid $colorInteriorBorder;
-        color: #ccc;
         flex: 0 1 auto;
         height: 40px;
         order: 1;
@@ -57,13 +57,12 @@
     }
 
     &__object-view {
-        background: #cc0;
         flex: 1 1 auto;
         padding: $interiorMarginLg;
     }
 
     &__time-conductor {
-        background: #cac;
+        border-top: 1px solid $colorInteriorBorder;
         min-height: 50px;
         padding: $interiorMarginLg;
     }
@@ -83,7 +82,7 @@
     }
 
     &__pane-tree {
-        background: #f90;
+        background: $colorTreeBg;
         padding: $interiorMarginLg;
         width: 300px
     }

src/ui/components/layout/MctInspector.vue

@@ -20,7 +20,6 @@
         height: 100%;
 
         > [class*="__"] {
-            background: #f9c;
             min-height: 50px;
             padding: $interiorMarginLg;
         }