@perspective-dev/viewer 4.3.0 → 4.4.0

package/src/{less/column-settings-panel.less → css/column-settings-panel.css}

@@ -1,16 +1,15 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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 (reference) url(./column-selector.less);
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
 :host {
     #column_settings_sidebar {
@@ -33,9 +32,9 @@
             flex: 0 1 auto;
         }
 
-        // NOTE: These should probably make their way to global form styling eventually.
+        /* NOTE: These should probably make their way to global form styling eventually. */
         .errored {
-            outline-color: var(--error--color);
+            outline-color: var(--psp-error--color);
         }
 
         .item_title {
@@ -43,22 +42,18 @@
             font-size: var(--label--font-size, 0.75em);
         }
 
-        .radio-list-item label {
-            margin-top: 6px;
-        }
-
         input {
             &[type="text"],
             &[type="search"] {
                 outline: 1px solid;
-                outline-color: var(--inactive--color);
-                background-color: var(--plugin--background);
+                outline-color: var(--psp-inactive--color);
+                background-color: var(--psp--background-color);
                 border: none;
                 margin-bottom: 0.5em;
                 font-family: inherit;
                 font-size: 1em;
                 &:disabled {
-                    background-color: var(--inactive--color);
+                    background-color: var(--psp-inactive--color);
                 }
             }
 
@@ -78,7 +73,7 @@
             align-items: center;
             border-radius: 3px;
             outline-width: 1px;
-            outline-color: var(--inactive--color);
+            outline-color: var(--psp-inactive--color);
 
             &.editable {
                 &:hover {
@@ -86,15 +81,15 @@
                     cursor: text;
                 }
             }
-            &::focus {
+            &:focus {
                 outline-style: solid;
-                background: var(--plugin--background);
+                background: var(--psp--background-color);
             }
             &.edited {
                 outline-style: dashed;
             }
             &.invalid {
-                outline-color: var(--error--color);
+                outline-color: var(--psp-error--color);
             }
 
             .sidebar_header_title {
@@ -116,140 +111,155 @@
     }
 
     label#color-label:before {
-        content: var(--color-label--content, "Color");
+        content: var(--psp-label--color--content, "Color");
     }
 
     label#format-label:before {
-        content: var(--format-label--content, "Format");
+        content: var(--psp-label--format--content, "Format");
     }
 
     label#timezone-label:before {
-        content: var(--timezone-label--content, "Timezone");
+        content: var(--psp-label--timezone--content, "Timezone");
     }
 
     label#date-style-label:before {
-        content: var(--date-style-label--content, "Date Style");
+        content: var(--psp-label--date-style--content, "Date Style");
     }
 
     label#time-style-label:before {
-        content: var(--time-style-label--content, "Time Style");
+        content: var(--psp-label--time-style--content, "Time Style");
     }
 
     label#foreground-label:before {
-        content: var(--foreground-label--content, "Foreground");
+        content: var(--psp-label--foreground--content, "Foreground");
     }
 
     label#background-label:before {
-        content: var(--background-label--content, "Background");
+        content: var(--psp-label--background--content, "Background");
     }
 
     label#series-label:before {
-        content: var(--series-label--content, "Series");
+        content: var(--psp-label--series--content, "Series");
     }
 
     label#color-range-label:before {
-        content: var(--color-range-label--content, "Color Range");
+        content: var(--psp-label--color-range--content, "Color Range");
     }
 
     label#style-label:before {
-        content: var(--style-label--content, "Style");
+        content: var(--psp-label--style--content, "Style");
     }
 
     label#minimum-integer-digits-label:before {
         content: var(
-            --minimum-integer-digits-label--content,
+            --psp-label--minimum-integer-digits--content,
             "Minimum Integer Digits"
         );
     }
 
     label#rounding-increment-label:before {
-        content: var(--rounding-increment-label--content, "Rounding Increment");
+        content: var(
+            --psp-label--rounding-increment--content,
+            "Rounding Increment"
+        );
     }
 
     label#notation-label:before {
-        content: var(--notation-label--content, "Notation");
+        content: var(--psp-label--notation--content, "Notation");
     }
 
     label#use-grouping-label:before {
-        content: var(--use-grouping-label--content, "Use Grouping");
+        content: var(--psp-label--use-grouping--content, "Use Grouping");
     }
 
     label#sign-display-label:before {
-        content: var(--sign-display-label--content, "Sign Display");
+        content: var(--psp-label--sign-display--content, "Sign Display");
     }
 
     label#aggregate-depth-label:before {
-        content: var(--aggregate-depth-label--content, "Aggregate Depth");
+        content: var(--psp-label--aggregate-depth--content, "Aggregate Depth");
     }
 
     label#max-value-label:before {
-        content: var(--max-value-label--content, "Max Value");
+        content: var(--psp-label--max-value--content, "Max Value");
     }
 
     label#rounding-priority-label:before {
-        content: var(--rounding-priority-label--content, "Rounding Priority");
+        content: var(
+            --psp-label--rounding-priority--content,
+            "Rounding Priority"
+        );
     }
 
     label#rounding-mode-label:before {
-        content: var(--rounding-mode-label--content, "Rounding Mode");
+        content: var(--psp-label--rounding-mode--content, "Rounding Mode");
     }
 
     label#trailing-zero-display-label:before {
         content: var(
-            --trailing-zero-display-label--content,
+            --psp-label--trailing-zero-display--content,
             "Trailing Zero Display"
         );
     }
 
     label#significant-digits-label:before {
-        content: var(--significant-digits-label--content, "Significant Digits");
+        content: var(
+            --psp-label--significant-digits--content,
+            "Significant Digits"
+        );
     }
 
     label#fractional-digits-label:before {
-        content: var(--fractional-digits-label--content, "Fractional Digits");
+        content: var(
+            --psp-label--fractional-digits--content,
+            "Fractional Digits"
+        );
     }
 
     label#year-label:before {
-        content: var(--year-label--content, "Year");
+        content: var(--psp-label--year--content, "Year");
     }
 
     label#month-label:before {
-        content: var(--month-label--content, "Month");
+        content: var(--psp-label--month--content, "Month");
     }
 
     label#day-label:before {
-        content: var(--day-label--content, "Day");
+        content: var(--psp-label--day--content, "Day");
     }
 
     label#weekday-label:before {
-        content: var(--weekday-label--content, "Weekday");
+        content: var(--psp-label--weekday--content, "Weekday");
     }
 
     label#hour-label:before {
-        content: var(--hour-label--content, "Hour");
+        content: var(--psp-label--hour--content, "Hour");
     }
 
     label#minute-label:before {
-        content: var(--minute-label--content, "Minute");
+        content: var(--psp-label--minute--content, "Minute");
     }
 
     label#second-label:before {
-        content: var(--second-label--content, "Second");
+        content: var(--psp-label--second--content, "Second");
     }
 
     label#fractional-seconds-label:before {
-        content: var(--fractional-seconds-label--content, "Fractional Seconds");
+        content: var(
+            --psp-label--fractional-seconds--content,
+            "Fractional Seconds"
+        );
     }
 
     label#hours-label:before {
-        content: var(--hours-label--content, "12/24 Hours");
+        content: var(--psp-label--hours--content, "12/24 Hours");
     }
 
     div.tab-title#Style:before {
-        content: var(--style-tab-label--content, "Style");
+        content: var(--psp-label--style-tab--content, "Style");
     }
 
     div.tab-title#Attributes:before {
-        content: var(--attributes-tab-label--content, "Attributes");
+        content: var(--psp-label--attributes-tab--content, "Attributes");
     }
 }

package/src/{less/column-style.less → css/column-style.css}

@@ -1,23 +1,15 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-@mixin icon {
-    background-repeat: no-repeat;
-    background-color: var(--icon--color);
-    content: "";
-    display: inline-block;
-    -webkit-mask-size: cover;
-    mask-size: cover;
-}
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
 :host {
     #column-style-container {
@@ -26,11 +18,11 @@
 
         &.no-style {
             font-style: italic;
-            background-color: #8b868045;
+            background-color: var(--psp-placeholder--background);
         }
 
         .is-default-value .dropdown-width-container {
-            background-color: var(--plugin--background);
+            background-color: var(--psp--background-color);
         }
 
         .dropdown-width-container {
@@ -40,11 +32,11 @@
             border-radius: 2px;
             padding: 0 8px;
             border-radius: 2px;
-            // border: 1px solid transparent;
-            border-color: var(--inactive--color, #666);
+            /* border: 1px solid transparent; */
+            border-color: var(--psp-inactive--color, #666);
 
             &:hover {
-                background-color: var(--plugin--background);
+                background-color: var(--psp--background-color);
             }
         }
 
@@ -52,8 +44,8 @@
             cursor: pointer;
             font-size: 10px;
             height: 22px;
-            // padding-bottom: 2px;
-            // border-bottom: 1px solid var(--input--border-color, #ccc);
+            /* padding-bottom: 2px; */
+            /* border-bottom: 1px solid var(--input--border-color, #ccc); */
             padding: 0 8px;
         }
 
@@ -68,7 +60,7 @@
             margin-left: 4px;
             width: 14px;
             height: 14px;
-            border: 1px solid var(--inactive--border-color);
+            border: 1px solid var(--psp-inactive--border-color);
             border-radius: 2px;
         }
 
@@ -77,18 +69,22 @@
             width: 22px;
             height: 22px;
             margin-right: -4px;
+            display: inline-block;
+            background-repeat: no-repeat;
+            background-color: var(--psp--color);
+            -webkit-mask-size: cover;
+            mask-size: cover;
+            -webkit-mask-image: var(--psp-icon--close--mask-image);
+            mask-image: var(--psp-icon--close--mask-image);
 
             &:before {
-                @include icon;
-                width: 22px;
-                height: 22px;
-                -webkit-mask-image: var(--close-icon--mask-image);
-                mask-image: var(--close-icon--mask-image);
+                content: var(--psp-icon--close--mask-image);
+                visibility: hidden;
             }
         }
 
         .is-default-value input.parameter {
-            background-color: var(--plugin--background);
+            background-color: var(--psp--background-color);
         }
 
         input.parameter {
@@ -110,7 +106,7 @@
             border-width: 1px;
             border-color: var(
                 --input--border-color,
-                var(--inactive--color, inherit)
+                var(--psp-inactive--color, inherit)
             );
         }
 
@@ -141,23 +137,27 @@
 
         input[type="radio"] {
             appearance: none;
+            display: inline-block;
+            background-repeat: no-repeat;
+            background-color: var(--psp--color);
+            -webkit-mask-size: cover;
+            mask-size: cover;
+            -webkit-mask-image: var(--psp-icon--radio-off--mask-image);
+            mask-image: var(--psp-icon--radio-off--mask-image);
 
-            &:checked:before {
-                -webkit-mask-image: var(--column-radio-on--mask-image);
-                mask-image: var(--column-radio-on--mask-image);
+            &:before {
+                content: var(--psp-icon--radio-off--mask-image);
+                visibility: hidden;
             }
 
-            &:before {
-                @include icon;
-                width: 10px;
-                height: 10px;
-                -webkit-mask-image: var(--column-radio-off--mask-image);
-                mask-image: var(--column-radio-off--mask-image);
+            &:checked {
+                -webkit-mask-image: var(--psp-icon--radio-on--mask-image);
+                mask-image: var(--psp-icon--radio-on--mask-image);
             }
 
-            &:hover:before {
-                -webkit-mask-image: var(--column-radio-hover--mask-image);
-                mask-image: var(--column-radio-hover--mask-image);
+            &:hover {
+                -webkit-mask-image: var(--psp-icon--radio-hover--mask-image);
+                mask-image: var(--psp-icon--radio-hover--mask-image);
             }
         }
 
@@ -167,20 +167,6 @@
             flex: 1 1 100%;
         }
 
-        div.bool-field {
-            display: flex;
-            label {
-                padding: 0 8px;
-            }
-        }
-
-        div.inner_section {
-            margin-top: 4px;
-            width: 0px;
-            margin-bottom: 8px;
-            flex: 1 1 100%;
-        }
-
         div.row {
             display: flex;
             align-items: center;
@@ -223,7 +209,7 @@
                 grid-column: 1;
                 grid-row: 1;
                 margin: 0;
-                font-family: var(--button--font-family, inherit);
+                font-family: var(--psp-button--font-family, inherit);
                 color: var(--sign--color, white);
                 width: 36px;
                 height: 24px;
@@ -293,7 +279,7 @@
             appearance: none;
             background: none;
             color: inherit;
-            border: 1px solid var(--inactive--color);
+            border: 1px solid var(--psp-inactive--color);
             border-radius: 3px;
             font-family: inherit;
             padding: 6px;
@@ -306,9 +292,9 @@
             }
 
             &:hover {
-                border-color: var(--icon--color);
-                background-color: var(--icon--color);
-                color: var(--plugin--background);
+                border-color: var(--psp--color);
+                background-color: var(--psp--color);
+                color: var(--psp--background-color);
             }
 
             &:hover:before {

package/src/{less/column-symbol-attributes.less → css/column-symbol-attributes.css}

@@ -1,14 +1,15 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
 :host {
     #attributes-symbols {
@@ -16,8 +17,8 @@
         svg {
             width: 15px;
             height: auto;
-            color: var(--icon--color);
-            fill: var(--icon--color);
+            color: var(--psp--color);
+            fill: var(--psp--color);
             background: none;
         }
 
@@ -40,7 +41,7 @@
             }
 
             .row-selector-errored input {
-                border-color: var(--error--color);
+                border-color: var(--psp-error--color);
             }
         }