@vcmap/ui 5.0.0-rc.21 → 5.0.0-rc.23

package/src/navigation/overviewMap.js

@@ -20,7 +20,7 @@ import VectorSource from 'ol/source/Vector.js';
 import { Icon } from 'ol/style.js';
 import { WindowSlot } from '../manager/window/windowManager.js';
 import OverviewMapClickedInteraction from './overviewMapClickedInteraction.js';
-import { defaultPrimaryColor } from '../vuePlugins/vuetify.js';
+import { getDefaultPrimaryColor, getColorByKey } from '../vuePlugins/vuetify.js';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import VcsMap from '../application/VcsMap.vue';
 
@@ -52,8 +52,7 @@ export function getWindowComponentOptions() {
  */
 function getCameraIcon(color) {
   return {
-    src: `data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg id='cam' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 81.06 49.47'%3E%3Cdefs%3E%3ClinearGradient id='1' x1='40.53' y1='48.97' x2='40.53' y2='.25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='${encodeURIComponent(color)}'/%3E%3Cstop offset='.46' stop-color='${encodeURIComponent(color)}' stop-opacity='.60'/%3E%3Cstop offset='.65' stop-color='${encodeURIComponent(color)}' stop-opacity='.40'/%3E%3Cstop offset='.83' stop-color='${encodeURIComponent(color)}' stop-opacity='.20'/%3E%3Cstop offset='.89' stop-color='${encodeURIComponent(color)}' stop-opacity='.15'/%3E%3Cstop offset='1' stop-color='transparent' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='2' x1='40.53' y1='49.37' x2='40.53' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.24' stop-color='${encodeURIComponent(color)}'/%3E%3Cstop offset='.38' stop-color='${encodeURIComponent(color)}' stop-opacity='.93'/%3E%3Cstop offset='.57' stop-color='${encodeURIComponent(color)}' stop-opacity='.70'/%3E%3Cstop offset='.78' stop-color='${encodeURIComponent(color)}' stop-opacity='.38'/%3E%3Cstop offset='1' stop-color='transparent' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='40.53 48.97 80.53 .25 .53 .25 40.53 48.97' fill='url(%231)' stroke='url(%232)' stroke-miterlimit='10' stroke-width='.5px'/%3E%3Ccircle cx='40.53' cy='42.97' r='6' fill='${encodeURIComponent(color)}' stroke='%23fff' stroke-miterlimit='10'/%3E%3C/svg%3E`,
-    scale: 0.5,
+    src: `data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22121.58616%22%20height%3D%2274.204994%22%20viewBox%3D%220%200%2032.169671%2019.633405%22%20version%3D%221.1%22%20id%3D%22svg216%22%3E%3Cdefs%20id%3D%22defs213%22%3E%3ClinearGradient%20id%3D%221-0%22%20x1%3D%2240.529999%22%20y1%3D%2248.970001%22%20x2%3D%2240.529999%22%20y2%3D%220.25%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20id%3D%22stop399%22%2F%3E%3Cstop%20offset%3D%22.46%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.60%22%20id%3D%22stop401%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.40%22%20id%3D%22stop403%22%2F%3E%3Cstop%20offset%3D%22.83%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.20%22%20id%3D%22stop405%22%2F%3E%3Cstop%20offset%3D%22.89%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.15%22%20id%3D%22stop407%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22transparent%22%20stop-opacity%3D%220%22%20id%3D%22stop409%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%222-9%22%20x1%3D%2240.529999%22%20y1%3D%2249.369999%22%20x2%3D%2240.529999%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.24%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20id%3D%22stop412%22%2F%3E%3Cstop%20offset%3D%22.38%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.93%22%20id%3D%22stop414%22%2F%3E%3Cstop%20offset%3D%22.57%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.70%22%20id%3D%22stop416%22%2F%3E%3Cstop%20offset%3D%22.78%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.38%22%20id%3D%22stop418%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22transparent%22%20stop-opacity%3D%220%22%20id%3D%22stop420%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20id%3D%22layer1%22%20transform%3D%22translate(5.3616118%2C3.2722342)%22%3E%3Cpolygon%20points%3D%220.53%2C0.25%2040.53%2C48.97%2080.53%2C0.25%20%22%20fill%3D%22url(%231)%22%20stroke%3D%22url(%232)%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%220.5px%22%20id%3D%22polygon425%22%20style%3D%22fill%3Aurl(%231-0)%3Bstroke%3Aurl(%232-9)%22%20transform%3D%22matrix(0.396875%2C0%2C0%2C0.396875%2C-5.3621201%2C-3.2722342)%22%2F%3E%3Ccircle%20cx%3D%2210.723224%22%20cy%3D%2213.781484%22%20r%3D%222.3812499%22%20fill%3D%22${encodeURIComponent(color)}%22%20stroke%3D%22%23ffffff%22%20stroke-miterlimit%3D%2210%22%20id%3D%22circle427%22%20style%3D%22stroke-width%3A0.396874%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E`,
     color,
   };
 }
@@ -112,7 +111,7 @@ class OverviewMap {
      */
     this._obliqueSelectedImageLayer = null;
 
-    const primary = app.uiConfig.config.value.primaryColor ?? defaultPrimaryColor;
+    const primary = app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor();
     const fillColor = Color.fromCssColorString('#EDEDED');
 
     /**
@@ -165,7 +164,7 @@ class OverviewMap {
      * @type {import("@vcmap/core").VectorStyleItem}
      */
     this.cameraIconStyle = new VectorStyleItem({
-      image: getCameraIcon(defaultPrimaryColor),
+      image: getCameraIcon(getDefaultPrimaryColor()),
     });
 
     /**
@@ -229,16 +228,7 @@ class OverviewMap {
           this._map.layerCollection.remove(clone);
         }
       }),
-      this._app.uiConfig.added.addEventListener((item) => {
-        if (item?.name === 'primaryColor') {
-          this._updatePrimaryColor(item.value);
-        }
-      }),
-      this._app.uiConfig.removed.addEventListener((item) => {
-        if (item?.name === 'primaryColor') {
-          this._updatePrimaryColor(defaultPrimaryColor);
-        }
-      }),
+      this._app.themeChanged.addEventListener(this._updatePrimaryColor.bind(this)),
     ];
   }
 
@@ -275,10 +265,10 @@ class OverviewMap {
   }
 
   /**
-   * @param {string} color
    * @private
    */
-  _updatePrimaryColor(color) {
+  _updatePrimaryColor() {
+    const color = getColorByKey('primary');
     this.obliqueUnselectedStyle?.stroke?.setColor(color);
     this.obliqueSelectedStyle?.stroke?.setColor(color);
     this._obliqueTileLayer?.forceRedraw?.();
@@ -313,7 +303,7 @@ class OverviewMap {
       this._setupMapInteraction();
     }
     await this._map.activate();
-    this.map.setTarget('overview-map-container');
+    this._map.setTarget('overview-map-container');
     this._map.target?.firstChild?.classList?.add('overviewMapElement');
     if (!this._active) {
       this._mapActivatedListener = this._app.maps.mapActivated.addEventListener(() => {
@@ -549,8 +539,9 @@ class OverviewMap {
       return;
     }
     let cameraFeature = this._cameraIconLayer.getFeatureById('cameraFeature');
+    const coords = Projection.wgs84ToMercator(position);
     if (!cameraFeature) {
-      const cameraGeometry = new Point([position[0], position[1]]);
+      const cameraGeometry = new Point(coords);
       cameraFeature = new Feature({
         geometry: cameraGeometry,
       });
@@ -558,7 +549,7 @@ class OverviewMap {
       cameraFeature.setStyle(this.cameraIconStyle.style);
       this._cameraIconLayer.addFeatures([cameraFeature]);
     }
-    cameraFeature.getGeometry().setCoordinates(Projection.wgs84ToMercator(position));
+    cameraFeature.getGeometry().setCoordinates(coords);
 
     const rotationDegrees = viewpoint.heading;
     const rotationRadians = CesiumMath.toRadians(rotationDegrees);

package/src/navigation/tiltSlider.vue

@@ -10,8 +10,7 @@
         v-bind="attrs"
       >
         <v-slider
-          color="secondary"
-          track-color="accent"
+          track-color="base lighten-3"
           v-model="tilt"
           :max="0"
           :min="-90"
@@ -24,6 +23,7 @@
   </VcsTooltip>
 </template>
 <style lang="scss" scoped>
+  @import '../styles/shades.scss';
   .vcs-slider{
     ::v-deep {
       .v-slider {
@@ -44,6 +44,34 @@
       }
     }
   }
+  .v-application .theme--light.vcs-slider {
+    ::v-deep {
+      .v-slider {
+        .v-slider__track-container{
+          .v-slider__track-fill {
+            background-color: map-get($shades, 'black') !important;
+          }
+        }
+        .v-slider__thumb {
+          background-color: map-get($shades, 'black') !important;
+        }
+      }
+    }
+  }
+  .v-application .theme--dark.vcs-slider {
+    ::v-deep {
+      .v-slider {
+        .v-slider__track-container{
+          .v-slider__track-fill {
+            background-color: map-get($shades, 'white') !important;
+          }
+        }
+        .v-slider__thumb {
+          background-color: map-get($shades, 'white') !important;
+        }
+      }
+    }
+  }
 </style>
 <script>
   import { clamp } from 'ol/math.js';
@@ -93,7 +121,3 @@
     },
   };
 </script>
-
-<style scoped>
-
-</style>

package/src/navigation/vcsZoomButton.vue

@@ -1,15 +1,19 @@
 <template>
-  <div>
-    <OrientationToolsButton
-      @click="$emit('zoom-in')"
-      icon="$vcsPlus"
-      tooltip="navigation.zoomInTooltip"
-    />
-    <OrientationToolsButton
-      @click="$emit('zoom-out')"
-      icon="$vcsMinus"
-      tooltip="navigation.zoomOutTooltip"
-    />
+  <div class="rounded vcs-navigation-zoom">
+    <div class="rounded inner">
+      <OrientationToolsButton
+        @click="$emit('zoom-in')"
+        icon="$vcsPlus"
+        tooltip="navigation.zoomInTooltip"
+        elevation="0"
+      />
+      <OrientationToolsButton
+        @click="$emit('zoom-out')"
+        icon="$vcsMinus"
+        tooltip="navigation.zoomOutTooltip"
+        elevation="0"
+      />
+    </div>
   </div>
 </template>
 
@@ -25,3 +29,25 @@
     components: { OrientationToolsButton },
   };
 </script>
+<style lang="scss" scoped>
+.vcs-navigation-zoom {
+  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 2px 0;
+  .inner{
+    box-shadow: rgba(0, 0, 0, 0.25) 0 0 10px 0 inset;
+  }
+  ::v-deep {
+    .btn-orientation-tools{
+      &:first-child{
+        box-shadow: rgba(0, 0, 0, 0.25) -2px 2px 1px -2px,
+        rgba(0, 0, 0, 0.08) 1px 0 0 0,
+        rgba(0, 0, 0, 0.05) -1px 1px 1px 1px !important;
+      }
+      &:last-child{
+        box-shadow: rgba(0, 0, 0, 0.25) -2px 3px 1px -2px,
+        rgba(0, 0, 0, 0.08) 1px 4px 2px 0,
+        rgba(0, 0, 0, 0.05) -1px 1px 1px 1px !important;
+      }
+    }
+  }
+}
+</style>

package/src/pluginHelper.js

@@ -115,12 +115,32 @@ export async function loadPlugin(name, config) {
   return null;
 }
 
+/**
+ * @param {string} base
+ * @param {string} pluginBase
+ * @returns {string}
+ */
+export function getPluginEntry(base, pluginBase) {
+  const baseUrl = new URL(base);
+  const pluginBaseUrl = new URL(pluginBase);
+  if (baseUrl.origin !== pluginBaseUrl.origin) {
+    return pluginBase;
+  }
+  const baseSubs = baseUrl.pathname.split('/');
+  const pluginSubs = pluginBaseUrl.pathname.split('/');
+  return pluginSubs
+    .filter((sub, idx) => sub !== baseSubs[idx])
+    .join('/');
+}
+
 /**
  * @param {VcsPlugin} plugin
  * @returns {Object}
  */
 export function serializePlugin(plugin) {
   const serializedPlugin = plugin.toJSON ? plugin.toJSON() : {};
+  serializedPlugin.name = plugin.name;
+  serializedPlugin.entry = getPluginEntry(window.location.href, plugin[pluginBaseUrlSymbol]);
   serializedPlugin[pluginFactorySymbol] = plugin[pluginFactorySymbol];
   serializedPlugin[pluginBaseUrlSymbol] = plugin[pluginBaseUrlSymbol];
   return serializedPlugin;

package/src/search/resultsComponent.vue

@@ -6,7 +6,6 @@
       <v-list-item
         v-for="(item, index) in results"
         :key="index"
-        color="secondary"
         class="px-0"
       >
         <v-list-item-content>

package/src/search/search.js

@@ -13,7 +13,7 @@ import { check } from '@vcsuite/check';
 import { Icon } from 'ol/style.js';
 import { getLogger } from '@vcsuite/logger';
 import { vcsAppSymbol } from '../pluginHelper.js';
-import { defaultPrimaryColor } from '../vuePlugins/vuetify.js';
+import { getDefaultPrimaryColor, getColorByKey } from '../vuePlugins/vuetify.js';
 import { getViewpointFromFeature } from '../actions/actionHelper.js';
 
 /**
@@ -70,39 +70,29 @@ function setupSearchResultLayer(app) {
   app.layers.add(resultLayer);
 
   const style = new VectorStyleItem({
-    image: getPointResultIcon(defaultPrimaryColor),
+    image: getPointResultIcon(getDefaultPrimaryColor()),
     fill: {
       color: 'rgba(237, 237, 237, 0.1)',
     },
     stroke: {
-      color: defaultPrimaryColor,
+      color: getDefaultPrimaryColor(),
       width: 5,
     },
   });
   resultLayer.setStyle(style);
 
-  function setResultColor(color) {
+  function setResultColor() {
+    const color = getColorByKey('primary');
     style.stroke?.setColor(color);
     style.image = new Icon(getPointResultIcon(color));
     resultLayer.forceRedraw();
   }
 
-  const listeners = [
-    app.uiConfig.added.addEventListener((item) => {
-      if (item.name === 'primaryColor') {
-        setResultColor(item.value);
-      }
-    }),
-    app.uiConfig.removed.addEventListener((item) => {
-      if (item.name === 'primaryColor') {
-        setResultColor(defaultPrimaryColor);
-      }
-    }),
-  ];
+  const themChangedListener = app.themeChanged.addEventListener(setResultColor);
 
   const destroy = () => {
     resultLayer.destroy();
-    listeners.forEach(cb => cb());
+    themChangedListener();
   };
 
   return { resultLayer, destroy };
@@ -252,9 +242,6 @@ class Search extends IndexedCollection {
         });
       if (this._currentResults.value.length > 0) {
         await this._resultLayer.activate();
-        const extent = this._resultLayer.getZoomToExtent();
-        const viewpoint = Viewpoint.createViewpointFromExtent(extent);
-        await this._app.maps.activeMap.gotoViewpoint(viewpoint);
         this.resultsChanged.raiseEvent(this._currentResults.value.slice(0));
       }
     }
@@ -296,6 +283,18 @@ class Search extends IndexedCollection {
     [...this._array].forEach(impl => impl.abort?.());
   }
 
+  /**
+   * Zooms to the extent of all available result features
+   * @returns {Promise<void>}
+   */
+  async zoomToAll() {
+    if (this._resultLayer.getFeatures().length > 0) {
+      const extent = this._resultLayer.getZoomToExtent();
+      const viewpoint = Viewpoint.createViewpointFromExtent(extent);
+      await this._app.maps.activeMap.gotoViewpoint(viewpoint);
+    }
+  }
+
   /**
    * Clears the results and aborts running request
    */

package/src/search/searchComponent.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-card>
-    <span class="d-flex justify-space-between align-center ma-1">
+  <v-sheet>
+    <span class="d-flex justify-space-between align-center mt-1 mx-1">
       <v-icon
         class="mx-2"
       >
@@ -15,13 +15,20 @@
         :placeholder="$t('search.placeholder')"
         v-model.trim="query"
         @keydown.enter="search"
-        @keydown.esc="clear"
         @input="reset"
       />
     </span>
-    <v-divider />
+    <v-divider class="mt-1" v-if="!!results.length" />
     <ResultsComponent :query="query" :results="results" />
-  </v-card>
+    <v-divider v-if="!!results.length" />
+    <VcsButton
+      v-if="!!results.length"
+      class="d-flex pt-1 px-1 justify-end"
+      @click="zoomToAll"
+    >
+      {{ $t('search.zoomToAll') }}
+    </VcsButton>
+  </v-sheet>
 </template>
 
 <style>
@@ -31,15 +38,17 @@
 <script>
   import { inject, onUnmounted, ref } from 'vue';
   import { getLogger } from '@vcsuite/logger';
-  import { VCard, VDivider, VIcon } from 'vuetify/lib';
+  import { VSheet, VDivider, VIcon } from 'vuetify/lib';
   import VcsTextField from '../components/form-inputs-controls/VcsTextField.vue';
   import ResultsComponent from './resultsComponent.vue';
+  import VcsButton from '../components/buttons/VcsButton.vue';
 
   export default {
     components: {
+      VcsButton,
       ResultsComponent,
       VcsTextField,
-      VCard,
+      VSheet,
       VIcon,
       VDivider,
     },
@@ -73,6 +82,10 @@
         searching.value = false;
       };
 
+      const zoomToAll = () => {
+        app.search.zoomToAll();
+      };
+
       onUnmounted(() => {
         clear();
       });
@@ -84,6 +97,7 @@
         reset,
         clear,
         search,
+        zoomToAll,
       };
     },
   };

package/src/state.js

@@ -39,7 +39,7 @@ import { Viewpoint } from '@vcmap/core';
  * @typedef {Object} AppState
  * @property {import("@vcmap/core").ViewpointOptions} [activeViewpoint]
  * @property {string} [activeMap]
- * @property {Array<string>} contextIds
+ * @property {Array<string>} moduleIds
  * @property {Array<LayerState>} layers
  * @property {Array<PluginState>} plugins
  * @property {string} [activeObliqueCollection]
@@ -48,7 +48,7 @@ import { Viewpoint } from '@vcmap/core';
 /**
  * The URL state of the app is an array. To null parameters, pass in 0 instead.
  * The first entry is the viewpoint state, the second the active map name
- * The third is an array of contexts to apply the state to
+ * The third is an array of modules to apply the state to
  * the fourth is an array of layer states
  * the fifth is an array of plugin states
  * the sixth is the currently active oblique collection or 0 if not applicable
@@ -65,7 +65,7 @@ const MAX_URL_LENGTH = 2048;
  */
 export function createEmptyState() {
   return {
-    contextIds: [],
+    moduleIds: [],
     layers: [],
     plugins: [],
   };
@@ -143,7 +143,7 @@ function parseUrlAppState(urlState) {
     state.activeMap = urlState[1];
   }
   if (Array.isArray(urlState[2])) {
-    state.contextIds = urlState[2].slice();
+    state.moduleIds = urlState[2].slice();
   }
   if (Array.isArray(urlState[3])) {
     urlState[3].forEach((urlLayerState) => {
@@ -190,7 +190,7 @@ function writeUrlAppState(state, maxLength) {
     urlState[1] = state.activeMap;
   }
 
-  urlState[2] = state.contextIds.slice();
+  urlState[2] = state.moduleIds.slice();
   urlState[3] = [];
   urlState[4] = [];
 
@@ -247,7 +247,7 @@ export function setStateToUrl(state, url) {
     activeObliqueCollection: [String, undefined],
     layers: Array,
     plugins: Array,
-    contextIds: [String],
+    moduleIds: [String],
   });
   check(url, URL);
 

package/src/styles/_theming.scss

@@ -14,7 +14,76 @@
   width: 70px;
 }
 
-// Dev-Only!
-.bg-dev.theme--light.v-application {
-  background-color: var(--v-primary-base);
+.v-application .base {
+  background-color: var(--v-base-base) !important;
+  border-color: var(--v-base-base) !important;
+}
+.v-application .base.lighten-1 {
+  background-color: var(--v-base-lighten1) !important;
+  border-color: var(--v-base-lighten1) !important;
+}
+.v-application .base.lighten-2 {
+  background-color: var(--v-base-lighten2) !important;
+  border-color: var(--v-base-lighten2) !important;
+}
+.v-application .base.lighten-3 {
+  background-color: var(--v-base-lighten3) !important;
+  border-color: var(--v-base-lighten3) !important;
+}
+.v-application .base.lighten-4 {
+  background-color: var(--v-base-lighten4) !important;
+  border-color: var(--v-base-lighten4) !important;
+}
+.v-application .base.darken-1 {
+  background-color: var(--v-base-darken1) !important;
+  border-color: var(--v-base-darken1) !important;
+}
+.v-application .base.darken-2 {
+  background-color: var(--v-base-darken2) !important;
+  border-color: var(--v-base-darken2) !important;
+}
+.v-application .base.darken-3 {
+  background-color: var(--v-base-darken3) !important;
+  border-color: var(--v-base-darken3) !important;
+}
+.v-application .base.darken-4 {
+  background-color: var(--v-base-darken4) !important;
+  border-color: var(--v-base-darken4) !important;
+}
+
+.v-application .base--text {
+  color: var(--v-base-base) !important;
+  caret-color: var(--v-base-base) !important;
+}
+.v-application .base--text.text--lighten-1 {
+  color: var(--v-base-lighten1) !important;
+  caret-color: var(--v-base-lighten1) !important;
+}
+.v-application .base--text.text--lighten-2 {
+  color: var(--v-base-lighten2) !important;
+  caret-color: var(--v-base-lighten2) !important;
+}
+.v-application .base--text.text--lighten-3 {
+  color: var(--v-base-lighten3) !important;
+  caret-color: var(--v-base-lighten3) !important;
+}
+.v-application .base--text.text--lighten-4 {
+  color: var(--v-base-lighten4) !important;
+  caret-color: var(--v-base-lighten4) !important;
+}
+.v-application .base--text.text--darken-1 {
+  color: var(--v-base-darken1) !important;
+  caret-color: var(--v-base-darken1) !important;
+}
+.v-application .base--text.text--darken-2 {
+  color: var(--v-base-darken2) !important;
+  caret-color: var(--v-base-darken2) !important;
+}
+.v-application .base--text.text--darken-3 {
+  color: var(--v-base-darken3) !important;
+  caret-color: var(--v-base-darken3) !important;
+}
+.v-application .base--text.text--darken-4 {
+  color: var(--v-base-darken4) !important;
+  caret-color: var(--v-base-darken4) !important;
 }

package/src/styles/_typography.scss

@@ -29,17 +29,12 @@
   }
 
   h3 {
-    font-size: 12px;
     font-weight: normal;
   }
 
   h4 {
     font-size: 12px;
     font-weight: normal;
-    color: rgba(#222222, 0.5);
   }
 
-  .text--disabled {
-    color: rgba(0, 0, 0, 0.38) !important;
-  }
 }

package/src/styles/main.scss

@@ -2,6 +2,7 @@
 
 @import './theming';
 @import './typography';
+@import './shades';
 @import './variables';
 @import './vcsFont';
 @import './vcsGrid';

package/src/styles/shades.scss

@@ -0,0 +1,2 @@
+
+$shades: ('black': #222222, 'white': #FFFFFF);

package/src/styles/variables.scss

@@ -1,7 +1,43 @@
+@import 'shades.scss';
+
 /** Global **/
 $font-size: 14px;
 $font-size-root: 14px;
 
+$material-dark: (
+        'background': map-get($shades, 'black'),
+        'cards': map-get($shades, 'black'),
+        'text-fields': (
+                'outlined': var(--v-base-base),
+                'outlined-hover': var(--v-base-base),
+        ),
+        'input-bottom-line': var(--v-base-base),
+        'dividers': var(--v-base-lighten2),
+        'toolbar': rgba(map-get($shades, 'black'), 0.8),
+        'table': (
+                'hover': var(--v-base-lighten4),
+        ),
+);
+$material-light: (
+        'text-fields': (
+                'outlined': var(--v-base-base),
+                'outlined-hover': var(--v-base-base),
+        ),
+        'input-bottom-line': var(--v-base-base),
+        'text': (
+                'primary': map-get($shades, 'black'),
+                'disabled': rgba(map-get($shades, 'black'), 0.3),
+        ),
+        'buttons': (
+                'disabled': rgba(map-get($shades, 'black'), 0.5),
+        ),
+        'dividers': var(--v-base-lighten2),
+        'toolbar': rgba(map-get($shades, 'white'), 0.8),
+        'table': (
+                'hover': var(--v-base-lighten4),
+        ),
+);
+
 // input font and icon
 $input-font-size: $font-size;
 $input-icon-height: 16px; // 24px !default;
@@ -20,14 +56,14 @@ $text-field-solo-dense-control-min-height: 22px; //38px !default;
 $text-field-outlined-fieldset-border: 1px solid currentColor; // 2px solid currentColor !default;
 
 // dense non outlined
-$text-field-dense-padding: 2px 0px 1px; //4px 0 2px !default;
+$text-field-dense-padding: 2px 0 1px; //4px 0 2px !default;
 
 // clear icon non dense
 $text-field-enclosed-prepend-append-margin-top: 9px;
 
 // tooltip icon in append slot
 $text-field-outlined-append-prepend-outer-margin-top: 4px; // 18px !default;
-$text-field-append-prepend-margin: 0px; // 4px !default;
+$text-field-append-prepend-margin: 0; // 4px !default;
 $text-field-outlined-prepend-append-margin-top: 4px; // 8px !default;
 
 // label position for outlined Label dense and non-dense
@@ -39,8 +75,8 @@ $text-field-label-top: 2px; // 6px !default;
 $text-field-label-active-transform: translateY(-14px) scale(.75); //translateY(-18px) scale(.75) !default;
 
 /** VcsTextarea **/
-$textarea-box-enclosed-single-outlined-margin-top: 0px; // 10px !default;
-$textarea-dense-box-enclosed-single-outlined-margin-top: 0px; // 6px !default;
+$textarea-box-enclosed-single-outlined-margin-top: 0; // 10px !default;
+$textarea-dense-box-enclosed-single-outlined-margin-top: 0; // 6px !default;
 
 /** VcsCheckbox **/
 $icon-size: 20px; // 24px !default;

package/src/uiConfig.js

@@ -13,6 +13,7 @@ import { ref } from 'vue';
  * @property {string} [mobileLogo] - an alternative logo to display in mobile view
  * @property {string} [appTitle] - an optional title to display next to the company logo
  * @property {string} [primaryColor] - an optional primary color to use in all themes
+ * @property {boolean} [startingFeatureInfo] - an optional flag whether to activate feature info on startup (default active)
  */
 
 /**
@@ -22,12 +23,12 @@ import { ref } from 'vue';
  */
 class UiConfig extends Collection {
   /**
-   * @param {function():string} getDynamicContextId
+   * @param {function():string} getDynamicModuleId
    */
-  constructor(getDynamicContextId) {
+  constructor(getDynamicModuleId) {
     super();
 
-    makeOverrideCollection(this, getDynamicContextId);
+    makeOverrideCollection(this, getDynamicModuleId);
     /**
      * This object just acts as a go between for reactivity until we have vue3
      * @todo vue3 cleanup