@perspective-dev/viewer 4.0.0

package/src/themes/intl/zh.less

@@ -0,0 +1,102 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+perspective-viewer,
+perspective-dropdown {
+    // Config
+    --group-by-label--content: "通过...分组";
+    --split-by-label--content: "分割依据";
+    --sort-label--content: "订购依据";
+    --filter-label--content: "在哪里";
+    --transpose-button--content: "交换";
+    --config-button-icon--content: "配置";
+    --all-columns-label--content: "所有栏目";
+    --untitled--content: "无标题";
+
+    // Plugin names
+    --plugin-name-datagrid--content: "数据网格";
+    --plugin-name-treemap--content: "树形图";
+    --plugin-name-sunburst--content: "旭日";
+    --plugin-name-heatmap--content: "热图";
+    --plugin-name-x-bar--content: "X吧";
+    --plugin-name-y-bar--content: "和酒吧";
+    --plugin-name-y-line--content: "和线";
+    --plugin-name-x-y-line--content: "X/Y线";
+    --plugin-name-x-y-scatter--content: "X/Y 散点图";
+    --plugin-name-y-scatter--content: "Y 散点图";
+    --plugin-name-y-area--content: "和面积";
+    --plugin-name-ohlc--content: "哎哟";
+    --plugin-name-candlestick--content: "烛台";
+
+    // Column Selector names
+    --column-selector-column-columns--content: "列";
+    --column-selector-column-x-axis--content: "X轴";
+    --column-selector-column-y-axis--content: "Y轴";
+    --column-selector-column-color--content: "颜色";
+    --column-selector-column-size--content: "尺寸";
+    --column-selector-column-symbol--content: "象征";
+    --column-selector-column-label--content: "标签";
+    --column-selector-column-tooltip--content: "工具提示";
+    --add-expression-button--content: "新专栏";
+
+    // Toolbar
+    --no-results--content: "无效列";
+    --datagrid-column-edit-button--content: "编辑";
+    --copy-button--content: "复制";
+    --export-button--content: "出口";
+    --reset-button--content: "重置";
+    --edit-mode--read-only--content: "Read Only";
+    --edit-mode--edit--content: "Text Edit";
+    --edit-mode--select-row--content: "Select Row";
+    --edit-mode--select-column--content: "Select Column";
+    --edit-mode--select-region--content: "Select Region";
+    --scroll-lock-toggle--content: "自由滚动";
+    --scroll-lock-alt-toggle--content: "对齐滚动";
+
+    // Column Settings
+    --color-label--content: "颜色";
+    --format-label--content: "格式";
+    --timezone-label--content: "时区";
+    --date-style-label--content: "日期样式";
+    --time-style-label--content: "时间风格";
+    --foreground-label--content: "前景";
+    --background-label--content: "背景";
+    --series-label--content: "系列";
+    --color-range-label--content: "颜色范围";
+    --style-label--content: "风格";
+    --minimum-integer-digits-label--content: "最小整数位数";
+    --rounding-increment-label--content: "舍入增量";
+    --notation-label--content: "符号";
+    --use-grouping-label--content: "使用分组";
+    --sign-display-label--content: "标志展示";
+    --max-value-label--content: "最大值";
+    --rounding-priority-label--content: "舍入优先级";
+    --rounding-mode-label--content: "舍入模式";
+    --trailing-zero-display-label--content: "尾随零显示";
+    --fractional-digits-label--content: "小数位";
+    --significant-digits-label--content: "有效数字";
+    --year-label--content: "年";
+    --month-label--content: "月";
+    --day-label--content: "天";
+    --weekday-label--content: "工作日";
+    --hour-label--content: "小时";
+    --minute-label--content: "分钟";
+    --second-label--content: "第二";
+    --fractional-seconds-label--content: "小数秒";
+    --hours-label--content: "12/24 小时";
+    --aggregate-depth-label--content: "聚合深度";
+
+    // Tabs
+    --style-tab-label--content: "风格";
+    --attributes-tab-label--content: "属性";
+    --debug-tab-label--content: "Debug JSON";
+}

package/src/themes/intl.less

@@ -0,0 +1,102 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+perspective-viewer,
+perspective-dropdown {
+    // Config
+    --group-by-label--content: "Group By";
+    --split-by-label--content: "Split By";
+    --sort-label--content: "Order By";
+    --filter-label--content: "Where";
+    --transpose-button--content: "Swap";
+    --config-button-icon--content: "configure";
+    --all-columns-label--content: "All Columns";
+    --untitled--content: "untitled";
+
+    // Plugin names
+    --plugin-name-datagrid--content: "Datagrid";
+    --plugin-name-treemap--content: "Treemap";
+    --plugin-name-sunburst--content: "Sunburst";
+    --plugin-name-heatmap--content: "Heatmap";
+    --plugin-name-x-bar--content: "X Bar";
+    --plugin-name-y-bar--content: "Y Bar";
+    --plugin-name-y-line--content: "Y Line";
+    --plugin-name-x-y-line--content: "X/Y Line";
+    --plugin-name-x-y-scatter--content: "X/Y Scatter";
+    --plugin-name-y-scatter--content: "Y Scatter";
+    --plugin-name-y-area--content: "Y Area";
+    --plugin-name-ohlc--content: "OHLC";
+    --plugin-name-candlestick--content: "Candlestick";
+
+    // Column Selector names
+    --column-selector-column-columns--content: "Columns";
+    --column-selector-column-x-axis--content: "X Axis";
+    --column-selector-column-y-axis--content: "Y Axis";
+    --column-selector-column-color--content: "Color";
+    --column-selector-column-size--content: "Size";
+    --column-selector-column-symbol--content: "Symbol";
+    --column-selector-column-label--content: "Label";
+    --column-selector-column-tooltip--content: "Tooltip";
+    --add-expression-button--content: "New Column";
+
+    // Toolbar
+    --no-results--content: "Invalid Column";
+    --datagrid-column-edit-button--content: "Edit";
+    --copy-button--content: "Copy";
+    --export-button--content: "Export";
+    --reset-button--content: "Reset";
+    --edit-mode--read-only--content: "Read Only";
+    --edit-mode--edit--content: "Text Edit";
+    --edit-mode--select-row--content: "Select Row";
+    --edit-mode--select-column--content: "Select Column";
+    --edit-mode--select-region--content: "Select Region";
+    --scroll-lock-toggle--content: "Free Scroll";
+    --scroll-lock-alt-toggle--content: "Align Scroll";
+
+    // Column Settings
+    --color-label--content: "Color";
+    --format-label--content: "Format";
+    --timezone-label--content: "Timezone";
+    --date-style-label--content: "Date Style";
+    --time-style-label--content: "Time Style";
+    --foreground-label--content: "Foreground";
+    --background-label--content: "Background";
+    --series-label--content: "Series";
+    --color-range-label--content: "Color Range";
+    --style-label--content: "Style";
+    --minimum-integer-digits-label--content: "Minimum Integer Digits";
+    --rounding-increment-label--content: "Rounding Increment";
+    --notation-label--content: "Notation";
+    --use-grouping-label--content: "Use Grouping";
+    --sign-display-label--content: "Sign Display";
+    --aggregate-depth-label--content: "Aggregate Depth";
+    --max-value-label--content: "Max Value";
+    --rounding-priority-label--content: "Rounding Priority";
+    --rounding-mode-label--content: "Rounding Mode";
+    --trailing-zero-display-label--content: "Trailing Zero Display";
+    --fractional-digits-label--content: "Fractional Digits";
+    --significant-digits-label--content: "Significant Digits";
+    --year-label--content: "Year";
+    --month-label--content: "Month";
+    --day-label--content: "Day";
+    --weekday-label--content: "Weekday";
+    --hour-label--content: "Hour";
+    --minute-label--content: "Minute";
+    --second-label--content: "Second";
+    --fractional-seconds-label--content: "Fractional Seconds";
+    --hours-label--content: "12/24 Hours";
+
+    // Tabs
+    --style-tab-label--content: "Style";
+    --attributes-tab-label--content: "Attributes";
+    --debug-tab-label--content: "Debug JSON";
+}

package/src/themes/monokai.less

@@ -0,0 +1,107 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+@import "icons.less";
+
+@import url("ref://pro-dark.less");
+
+perspective-viewer,
+perspective-viewer[theme="Monokai"] {
+    --theme-name: "Monokai";
+}
+
+perspective-viewer[theme="Monokai"] {
+    @include perspective-viewer-pro-dark;
+    @include perspective-viewer-monokai--colors;
+    @include perspective-viewer-monokai--datagrid;
+    @include perspective-viewer-monokai--d3fc;
+}
+
+perspective-copy-menu[theme="Monokai"],
+perspective-export-menu[theme="Monokai"],
+perspective-dropdown[theme="Monokai"],
+perspective-date-column-style[theme="Monokai"],
+perspective-datetime-column-style[theme="Monokai"],
+perspective-number-column-style[theme="Monokai"],
+perspective-string-column-style[theme="Monokai"] {
+    @include perspective-modal-pro-dark;
+    @include perspective-viewer-monokai--colors;
+
+    background-color: #2d2a2e;
+    border: 1px solid #797979;
+}
+
+@mixin perspective-viewer-monokai--colors {
+    color: #d6d6d6;
+    background-color: #2d2a2e;
+
+    --active--color: #78dce8;
+    --error--color: #ff6188;
+    --inactive--color: #797979;
+    --inactive--border-color: #666666;
+    --plugin--background: #2d2a2e;
+
+    // Column type indicators
+    --float--column-type--color: #78dce8;
+    --string--column-type--color: #ff6188;
+    --date--column-type--color: #a9dc76;
+    --boolean--column-type--color: #ffd866;
+
+    --warning--background: #ffd866;
+}
+
+@mixin perspective-viewer-monokai--datagrid {
+    --rt-pos-cell--color: #78dce8 !important;
+    --rt-neg-cell--color: #ff6188 !important;
+    --rt--border-color: #444444;
+
+    // FIXME: broken in shadow DOM.  Can be fixed with a new custom property allowing empty header cell backgrounds
+    // to be styled
+    regular-table table tbody th:empty {
+        background: linear-gradient(
+            to right,
+            transparent 9px,
+            #444444 10px,
+            transparent 11px
+        );
+    }
+}
+
+@mixin perspective-viewer-monokai--d3fc {
+    --d3fc-treedata--labels: #d6d6d6;
+    --d3fc-treedata--hover-highlight: #2d2a2e;
+
+    --d3fc-axis-ticks--color: #d6d6d6;
+    --d3fc-gridline--color: #444444;
+    --d3fc-series: #78dce8;
+    --d3fc-series-1: #78dce8;
+    --d3fc-series-2: #ff6188;
+    --d3fc-series-3: #fc9867;
+    --d3fc-series-4: #ffd866;
+    --d3fc-series-5: #a9dc76;
+
+    --d3fc-series-6: #ab9df2;
+    --d3fc-series-7: #66d9ef;
+    --d3fc-series-8: #f92672;
+    --d3fc-series-9: #fd971f;
+    --d3fc-series-10: #e6db74;
+    --d3fc-series-11: #a6e22e;
+    --d3fc-series-12: #ae81ff;
+
+    --d3fc-negative--gradient: linear-gradient(#272822 0%, #ff6188 100%);
+    --d3fc-positive--gradient: linear-gradient(#272822 0%, #78dce8 100%);
+    --d3fc-full--gradient: linear-gradient(
+        #ff6188 0%,
+        #272822 50%,
+        #78dce8 100%
+    );
+}

package/src/themes/pro-dark.less

@@ -0,0 +1,147 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+@import "icons.less";
+@import "intl.less";
+
+@import url("ref://pro.less");
+
+// Register theme for auto-detection
+perspective-viewer,
+perspective-viewer[theme="Pro Dark"] {
+    --theme-name: "Pro Dark";
+}
+
+perspective-viewer[theme="Pro Dark"] {
+    @include perspective-viewer-pro-dark;
+}
+
+perspective-copy-menu[theme="Pro Dark"],
+perspective-export-menu[theme="Pro Dark"],
+perspective-dropdown[theme="Pro Dark"],
+perspective-date-column-style[theme="Pro Dark"],
+perspective-datetime-column-style[theme="Pro Dark"],
+perspective-number-column-style[theme="Pro Dark"],
+perspective-string-column-style[theme="Pro Dark"] {
+    @include perspective-modal-pro-dark;
+}
+
+@mixin perspective-viewer-pro-dark {
+    @include perspective-viewer-pro;
+    @include perspective-viewer-pro-dark--colors;
+    @include perspective-viewer-pro-dark--datagrid;
+    @include perspective-viewer-pro-dark--d3fc;
+    @include perspective-viewer-pro-dark--openlayers;
+}
+
+@mixin perspective-modal-pro-dark {
+    @include perspective-modal-pro;
+    @include perspective-viewer-pro-dark--colors;
+
+    background-color: #242526;
+    border: 1px solid #4c505b;
+}
+
+@mixin perspective-viewer-pro-dark--colors {
+    background-color: #242526;
+    color: white;
+    --icon--color: white;
+    --active--color: #2770a9;
+    --error--color: #ff9485;
+    --inactive--color: #61656e;
+    --inactive--border-color: #4c505b;
+    --plugin--background: #242526;
+    --modal-target--background: rgba(255, 255, 255, 0.05);
+    --active--background: rgba(39, 113, 170, 0.5);
+    --expression--operator-color: #c5c9d0;
+    --expression--function-color: #22a0ce;
+    --expression--error-color: rgb(255, 136, 136);
+    --calendar--filter: invert(1);
+    --warning--color: #242526;
+    --warning--background: var(--icon--color);
+
+    --select-arrow--background-image: var(
+        --select-arrow-light--background-image
+    );
+
+    --select-arrow--hover--background-image: var(
+        --select-arrow-dark--background-image
+    );
+
+    // Syntax
+    --code-editor-symbol--color: white;
+    --code-editor-literal--color: #7dc3f0;
+    --code-editor-operator--color: rgb(23, 166, 123);
+    --code-editor-comment--color: rgb(204, 120, 48);
+    --code-editor-column--color: #e18ee1;
+    // --code-editor-unknown--color: rgb(204, 120, 48);
+}
+
+@mixin perspective-viewer-pro-dark--openlayers {
+    --map-tile-url: "http://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png";
+    --map-attribution--filter: invert(1) hue-rotate(180deg);
+    --map-element-background: #212c2f;
+    --map-category-1: rgb(71, 120, 194);
+    --map-category-2: rgb(204, 120, 48);
+    --map-category-3: rgb(158, 84, 192);
+    --map-category-4: rgb(51, 150, 153);
+    --map-category-5: rgb(102, 114, 143);
+    --map-category-6: rgb(211, 103, 189);
+    --map-category-7: rgb(109, 124, 77);
+    --map-category-8: rgb(221, 99, 103);
+    --map-category-9: rgb(120, 104, 206);
+    --map-category-10: rgb(23, 166, 123);
+    --map-gradient: linear-gradient(#dd6367 0%, #242526 50%, #3289c8 100%);
+}
+
+@mixin perspective-viewer-pro-dark--datagrid {
+    --rt-pos-cell--color: #7dc3f0;
+    --rt-neg-cell--color: #ff9485;
+}
+
+@mixin perspective-viewer-pro-dark--d3fc {
+    --d3fc-legend--text: #c5c9d0;
+    --d3fc-treedata--labels: white;
+    --d3fc-treedata--hover-highlight: white;
+    --d3fc-tooltip--color: white;
+    --d3fc-axis-ticks--color: #c5c9d0;
+    --d3fc-axis--lines: #61656e;
+    --d3fc-gridline--color: #3b3f46;
+    --d3fc-tooltip--background: rgba(42, 44, 47, 1);
+    --d3fc-tooltip--border-color: #242526;
+    --d3fc-legend--background: var(--plugin--background);
+
+    --d3fc-series: rgb(71, 120, 194);
+    --d3fc-series-1: rgb(71, 120, 194);
+    --d3fc-series-2: rgb(204, 120, 48);
+    --d3fc-series-3: rgb(158, 84, 192);
+    --d3fc-series-4: rgb(51, 150, 153);
+    --d3fc-series-5: rgb(102, 114, 143);
+    --d3fc-series-6: rgb(211, 103, 189);
+    --d3fc-series-7: rgb(109, 124, 77);
+    --d3fc-series-8: rgb(221, 99, 103);
+    --d3fc-series-9: rgb(120, 104, 206);
+    --d3fc-series-10: rgb(23, 166, 123);
+
+    --d3fc-full--gradient: linear-gradient(
+        #dd6367 0%,
+        #242526 50%,
+        #3289c8 100%
+    );
+
+    --d3fc-positive--gradient: linear-gradient(#242526 0%, #3289c8 100%);
+    --d3fc-negative--gradient: linear-gradient(#dd6367 0%, #242526 100%);
+}
+
+// :host select {
+//     background-image: url("../svg/dropdown-selector.svg");
+// }

package/src/themes/pro.less

@@ -0,0 +1,186 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+@import "icons.less";
+@import "intl.less";
+
+// Register theme for auto-detection
+perspective-viewer,
+perspective-viewer[theme="Pro Light"] {
+    --theme-name: "Pro Light";
+}
+
+perspective-viewer[theme="Pro Light"] {
+    @include perspective-viewer-pro;
+}
+
+perspective-copy-menu[theme="Pro Light"],
+perspective-export-menu[theme="Pro Light"],
+perspective-dropdown[theme="Pro Light"],
+perspective-date-column-style[theme="Pro Light"],
+perspective-datetime-column-style[theme="Pro Light"],
+perspective-number-column-style[theme="Pro Light"],
+perspective-string-column-style[theme="Pro Light"] {
+    @include perspective-modal-pro;
+    background-color: white;
+}
+
+@mixin perspective-viewer-pro {
+    @include perspective-viewer-pro--dimensions;
+    @include perspective-viewer-pro--colors;
+    @include perspective-viewer-pro--fonts;
+    @include perspective-viewer-pro--d3fc;
+    @include perspective-viewer-pro--datagrid;
+    @include perspective-viewer-pro--openlayers;
+}
+
+@mixin perspective-modal-pro {
+    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
+        "Consolas", "Liberation Mono", monospace;
+    background-color: white;
+    border: 1px solid var(--inactive--color);
+    border-radius: 0 0 2px 2px;
+    --column-style-pos-color--content: "+";
+    --column-style-neg-color--content: "-";
+    --save-button-icon--content: "save";
+    --reset-button-icon--content: "refresh";
+
+    @include perspective-viewer-pro--fonts;
+    @include perspective-viewer-pro--colors;
+}
+
+@mixin perspective-viewer-pro--dimensions {
+    --button--font-size: 16px;
+    --config-button--padding: 15px 8px 6px 8px;
+    --column-drop-label--font-size: 8px;
+    --column-drop-container--padding: 0px;
+    --column-selector--width: 20px;
+    --column-selector--font-size: 16px;
+
+    // 3 char width in 'Roboto Mono'
+    --column_type--width: 25px;
+
+    --select--padding: 0px;
+    --top-panel-row--display: inline-flex;
+    --button--min-width: 33px;
+}
+
+@mixin perspective-viewer-pro--colors {
+    color: #161616;
+    background-color: transparent;
+    --icon--color: #161616;
+    --inactive--color: #ababab;
+    --inactive--border-color: #dadada;
+
+    --root--background: #ffffff;
+    --active--color: #2670a9;
+    --error--color: #ff471e;
+    --plugin--background: #ffffff;
+    --overflow-hint-icon--color: rgba(0, 0, 0, 0.2);
+    --select--background-color: none;
+    --column-drop-container--background: none;
+    --warning--background: #042121;
+    --warning--color: #fdfffd;
+
+    --select-arrow--background-image: var(
+        --select-arrow-dark--background-image
+    );
+
+    --select-arrow--hover--background-image: var(
+        --select-arrow-light--background-image
+    );
+
+    // TODO deprecate me
+    --overflow-hint-icon--color: #fdfffd;
+}
+
+@mixin perspective-viewer-pro--fonts {
+    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
+        "Consolas", "Liberation Mono", monospace;
+    --interface-monospace--font-family: "ui-monospace", "SFMono-Regular",
+        "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
+}
+
+@mixin perspective-viewer-pro--d3fc {
+    --d3fc-y1-label--content: "arrow_upward";
+    --d3fc-y2-label--content: "arrow_downward";
+    --d3fc-treedata-axis--lines: none;
+    --d3fc-tooltip--background--color: rgba(155, 155, 155, 0.8);
+    --d3fc-tooltip--color: #161616;
+    --d3fc-tooltip--border-color: #fff;
+    --d3fc-tooltip--box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+    --d3fc-gridline--color: #eaedef;
+    --d3fc-axis-ticks--color: #161616;
+    --d3fc-axis--lines: #c5c9d0;
+    --d3fc-legend--background: var(--plugin--background);
+    --d3fc-series: rgba(31, 119, 180, 0.8);
+    --d3fc-series-1: #0366d6;
+    --d3fc-series-2: #ff7f0e;
+    --d3fc-series-3: #2ca02c;
+    --d3fc-series-4: #d62728;
+    --d3fc-series-5: #9467bd;
+    --d3fc-series-6: #8c564b;
+    --d3fc-series-7: #e377c2;
+    --d3fc-series-8: #7f7f7f;
+    --d3fc-series-9: #bcbd22;
+    --d3fc-series-10: #17becf;
+    --d3fc-full--gradient: linear-gradient(
+        #4d342f 0%,
+        #e4521b 22.5%,
+        #feeb65 42.5%,
+        #f0f0f0 50%,
+        #dcedc8 57.5%,
+        #42b3d5 67.5%,
+        #1a237e 100%
+    );
+    --d3fc-positive--gradient: linear-gradient(
+        #f0f0f0 0%,
+        #dcedc8 10%,
+        #42b3d5 50%,
+        #1a237e 100%
+    );
+    --d3fc-negative--gradient: linear-gradient(
+        #4d342f 0%,
+        #e4521b 50%,
+        #feeb65 90%,
+        #f0f0f0 100%
+    );
+}
+
+@mixin perspective-viewer-pro--openlayers {
+    --map-tile-url: "http://{a-c}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png";
+    --map-element-background: #fff;
+    --map-category-1: #0366d6;
+    --map-category-2: #ff7f0e;
+    --map-category-3: #2ca02c;
+    --map-category-4: #d62728;
+    --map-category-5: #9467bd;
+    --map-category-6: #8c564b;
+    --map-category-7: #e377c2;
+    --map-category-8: #7f7f7f;
+    --map-category-9: #bcbd22;
+    --map-category-10: #17becf;
+    --map-gradient: linear-gradient(
+        #4d342f 0%,
+        #e4521b 22.5%,
+        #feeb65 42.5%,
+        #f0f0f0 50%,
+        #dcedc8 57.5%,
+        #42b3d5 67.5%,
+        #1a237e 100%
+    );
+}
+
+@mixin perspective-viewer-pro--datagrid {
+    --rt-pos-cell--color: #338dcd;
+    --rt-neg-cell--color: #ff471e;
+}