introduce css variables

src/css/dialogs-browse-local.css

@@ -29,7 +29,7 @@
 
 .local-piskel-list-head {
   font-weight: bold;
-  color: gold;
+  color: var(--highlight-color);
 }
 
 .local-piskel-load-button,

src/css/dialogs-cheatsheet.css

@@ -3,7 +3,7 @@
   bottom: 10px;
   left: 10px;
 
-  color : gold;
+  color : var(--highlight-color);
   font-weight: bold;
   font-size : 1.25em;
   line-height: 20px;
@@ -113,8 +113,8 @@
 }
 
 .cheatsheet-shortcut-editable .cheatsheet-key {
-  border-color: gold;
+  border-color: var(--highlight-color);
-  color: gold;
+  color: var(--highlight-color);
 }
 
 .cheatsheet-shortcut-editing .cheatsheet-key {
@@ -140,7 +140,7 @@
   padding : 10px;
   overflow: hidden;
 
-  background-color : gold;
+  background-color : var(--highlight-color);
 }
 
 .cheatsheet-helptext {

src/css/dialogs-create-palette.css

@@ -103,7 +103,7 @@
   transition : border-color 0.2s;
 }
 .create-palette-color:hover {
-  border:1px solid gold;
+  border:1px solid var(--highlight-color);
 }
 
 .colors-list-drop-proxy {
@@ -111,17 +111,17 @@
 }
 
 .create-palette-new-color {
-  border:2px dotted gold;
+  border:2px dotted var(--highlight-color);
 
   border-radius: 2px;
   line-height: 40px;
   text-align: center;
   font-size: 20px;
-  color: gold;
+  color: var(--highlight-color);
 }
 
 .create-palette-color.selected {
-  border:2px solid gold;
+  border:2px solid var(--highlight-color);
 }
 
 .create-palette-remove-color {

src/css/dialogs-import-image.css

@@ -81,7 +81,7 @@
   font-style: italic;
   font-weight: normal;
   text-shadow: none;
-  color: gold;
+  color: var(--highlight-color);
 }
 
 [name=smooth-resize-checkbox] {

src/css/dialogs-performance-info.css

@@ -49,7 +49,7 @@
 }
 
 .dialog-performance-info-body sup {
-  color: gold;
+  color: var(--highlight-color);
   cursor: pointer;
 }
 

src/css/dialogs-unsupported-browser.css

@@ -28,5 +28,5 @@
 }
 
 #current-user-agent {
-  color: gold;
+  color: var(--highlight-color);
 }

src/css/dialogs.css

@@ -39,7 +39,7 @@
   -moz-box-sizing : border-box;
 
   border-radius: 3px;
-  border : 3px solid gold;
+  border : 3px solid var(--highlight-color);
   background: #444;
   overflow: auto;
 }
@@ -76,7 +76,7 @@
 
 .dialog-head {
   width: 100%;
-  background: gold;
+  background: var(--highlight-color);
   margin: 0;
   padding: 10px;
   color: black;

src/css/forms.css

@@ -50,11 +50,11 @@
 .button:hover {
   text-decoration: none;
   background-color: #484848;
-  color: gold;
+  color: var(--highlight-color);
 }
 
 .button-primary {
-  background-color: rgb(255,215,0); /* gold */
+  background-color: var(--highlight-color);
 
   border-color: rgb(179, 164, 0);
   border-top-color: white;

src/css/frames-list.css

@@ -79,7 +79,7 @@
 }
 
 .add-frame-action:hover {
-  border-color: gold;
+  border-color: var(--highlight-color);
 }
 
 .preview-tile {
@@ -153,7 +153,7 @@
 }
 
 .preview-tile.selected {
-  border-color: gold;
+  border-color: var(--highlight-color);
 }
 
 .preview-tile.selected:after {
@@ -162,7 +162,7 @@
   top: 38px;
   right: -9px;
   border: transparent 4px solid;
-  border-left-color: gold;
+  border-left-color: var(--highlight-color);
   border-width: 6px 0 6px 6px;
   border-style: solid;
 }
@@ -173,6 +173,6 @@
  */
 
 .preview-tile-drop-proxy {
-  border: 3px dashed gold;
+  border: 3px dashed var(--highlight-color);
   background-color: rgba(255, 215,0, 0.2);
 }

src/css/notifications.css

@@ -43,7 +43,7 @@
   padding: 10px;
   width: 360px;
   border-top-right-radius: 2px;
-  border: gold 2px solid;
+  border: var(--highlight-color) 2px solid;
   border-left: 0;
   border-bottom: 0;
   background-color: #444;
@@ -69,6 +69,6 @@
   margin-top: 8px;
   height : 4px;
   width : 300px;
-  background : linear-gradient(to left, gold, gold) no-repeat -300px 0;
+  background : linear-gradient(to left, var(--highlight-color), var(--highlight-color)) no-repeat -300px 0;
   background-color : black;
 }

src/css/pensize.css

@@ -44,11 +44,11 @@
 }
 
 .pen-size-option.selected:before {
-  background-color: gold;
+  background-color: var(--highlight-color);
 }
 
 .pen-size-option.selected {
-  border-color: gold;
+  border-color: var(--highlight-color);
 }
 
 .pen-size-option.labeled:before {

src/css/reset.css

@@ -47,5 +47,5 @@ input[type="range"] {
 }
 
 a, a:visited {
-  color:gold;
+  color: var(--highlight-color);
 }

src/css/settings-application.css

@@ -27,7 +27,7 @@
 }
 
 .background-picker.selected {
-  border-color: gold;
+  border-color: var(--highlight-color);
 }
 
 .layer-opacity-input {

src/css/settings-export.css

@@ -113,7 +113,7 @@
   width: 100%;
   height: 1px;
   z-index: 0;
-  background-color: gold;
+  background-color: var(--highlight-color);
 }
 
 .export-tab {
@@ -128,11 +128,12 @@
 
 .export-tab.selected,
 .export-tab:hover {
-  color: gold;
+  color: var(--highlight-color);
 }
 
 .export-tab.selected {
-  border-color: gold gold #444 gold;
+  border-color: var(--highlight-color);
+  border-bottom-color: #444;
   border-style: solid;
   border-width: 1px;
 }

src/css/settings-resize.css

@@ -49,7 +49,7 @@
 }
 
 .resize-origin-option.selected {
-  border : 3px solid gold;
+  border : 3px solid var(--highlight-color);
 }
 
 .resize-origin-option:before {
@@ -65,7 +65,7 @@
   content: '';
   width: 4px;
   height: 4px;
-  background: gold;
+  background: var(--highlight-color);
 }
 
 .disabled .resize-origin-option.selected:before {
@@ -85,23 +85,23 @@
 }
 
 .resize-origin-option[data-neighbor="bottom"]:before {
-  border-top-color: gold;
+  border-top-color: var(--highlight-color);
   margin-left: -4px;
 }
 
 .resize-origin-option[data-neighbor="left"]:before {
-  border-right-color: gold;
+  border-right-color: var(--highlight-color);
   margin-top: -4px;
   margin-left: -6px;
 }
 
 .resize-origin-option[data-neighbor="top"]:before {
-  border-bottom-color: gold;
+  border-bottom-color: var(--highlight-color);
   margin-top: -6px;
   margin-left: -4px;
 }
 
 .resize-origin-option[data-neighbor="right"]:before {
-  border-left-color: gold;
+  border-left-color: var(--highlight-color);
   margin-top: -4px;
 }

src/css/settings.css

@@ -52,7 +52,7 @@
   background-color: #444;
   margin-right: 0;
   padding-right: 2px;
-  border-left : 3px solid gold;
+  border-left : 3px solid var(--highlight-color);
 }
 
 /************************************************************************************************/
@@ -77,7 +77,7 @@
   text-transform: uppercase;
   border-bottom: 1px #aaa solid;
   padding-bottom: 5px;
-  color: gold;
+  color: var(--highlight-color);
 }
 
 .settings-description {

src/css/spectrum/spectrum-overrides.css

@@ -100,8 +100,8 @@
 }
 
 .sp-palette .sp-thumb-el.sp-thumb-active {
-  border-color: gold;
+  border-color: var(--highlight-color);
-  box-shadow: 0 0 0px 1px gold;
+  box-shadow: 0 0 0px 1px var(--highlight-color);
 }
 
 .sp-input {

src/css/style.css

@@ -17,11 +17,11 @@ body {
 }
 
 .no-overflow {
-  overflow : hidden;
+  overflow: hidden;
 }
 
-.image-link {
+.highlight {
-  color : gold;
+  color: var(--highlight-color);
 }
 
 .pull-top,
@@ -59,7 +59,7 @@ body {
  * TOOLTIPS
  */
 .tooltip-shortcut {
-  color:gold;
+  color: var(--highlight-color);
 }
 
 .tooltip-container {

src/css/toolbox-animated-preview.css

@@ -79,7 +79,7 @@
 
 .preview-toggle-onion-skin-enabled,
 .preview-toggle-onion-skin-enabled:hover {
-  color : gold;
+  color : var(--highlight-color);
 }
 
 .preview-contextual-actions {
@@ -114,8 +114,8 @@
 }
 
 .original-size-button-enabled {
-  color: gold;
+  color: var(--highlight-color);
-  border-color: gold;
+  border-color: var(--highlight-color);
 }
 
 .preview-contextual-action {
@@ -128,13 +128,13 @@
 }
 
 .open-popup-preview-button:hover {
-  border-color: gold;
+  border-color: var(--highlight-color);
 }
 
 /**
  * The regular image is provided bby the sprite icons.png+icons.css
  */
 .icon-minimap-popup-preview-arrow-white:hover {
-  background-image: url(../img/icons/minimap/minimap-popup-preview-arrow-gold.png);
+  background-image: url(../img/icons/minimap/minimap-popup-preview-arrow-var(--highlight-color).png);
   background-position: 0 0;
 }

src/css/toolbox-layers-list.css

@@ -35,7 +35,7 @@
 
 .layers-toggle-preview-enabled,
 .layers-toggle-preview-enabled:hover {
-  color : gold;
+  color : var(--highlight-color);
 }
 
 /**
@@ -88,5 +88,5 @@
 .current-layer-item,
 .current-layer-item:hover {
   background : #333;
-  color: gold;
+  color: var(--highlight-color);
 }

src/css/toolbox-palettes-list.css

@@ -127,7 +127,7 @@
   right: 0;
 
   background-color: black;
-  color: gold;
+  color: var(--highlight-color);
 
   font-family: Tahoma;
   font-size: 0.5em;

src/css/tools.css

@@ -17,7 +17,7 @@
   position : absolute;
   height : 100%;
   width : 100%;
-  border: 3px solid gold;
+  border: 3px solid var(--highlight-color);
   box-sizing: border-box;
 }
 

src/css/variables.css

@@ -0,0 +1,3 @@
+html, body {
+  --highlight-color: gold;
+}

src/js/controller/settings/exportimage/GifExportController.js

@@ -150,7 +150,7 @@
 
   ns.GifExportController.prototype.updateStatus_ = function (imageUrl, error) {
     if (imageUrl) {
-      var linkTpl = '<a class="image-link" href="{{link}}" target="_blank">{{shortLink}}</a>';
+      var linkTpl = '<a class="highlight" href="{{link}}" target="_blank">{{shortLink}}</a>';
       var linkHtml = pskl.utils.Template.replace(linkTpl, {
         link : imageUrl,
         shortLink : this.shorten_(imageUrl, URL_MAX_LENGTH, '...')

src/piskel-style-list.js

@@ -1,6 +1,7 @@
 // This list is used both by the grunt build and index.html (in debug mode)
 
 (typeof exports != "undefined" ? exports : pskl_exports).styles = [
+  "css/variables.css",
   "css/reset.css",
   "css/style.css",
   "css/animations.css",

src/templates/settings.html

@@ -2,35 +2,35 @@
   <div
     data-setting="user"
     class="tool-icon icon-settings-gear-white"
-    title="<span style='color:gold'>PREFERENCES</span></br>"
+    title="<span class='highlight'>PREFERENCES</span></br>"
     rel="tooltip" data-placement="left">
   </div>
 
   <div
     data-setting="resize"
     class="tool-icon  icon-settings-resize-white"
-    title="<span style='color:gold'>RESIZE</span></br>Resize the drawing area"
+    title="<span class='highlight'>RESIZE</span></br>Resize the drawing area"
     rel="tooltip" data-placement="left">
   </div>
 
   <div
     data-setting="save"
     class="tool-icon  icon-settings-save-white"
-    title="<span style='color:gold'>SAVE</span></br>Save to your gallery, save locally<br/>or export as a file"
+    title="<span class='highlight'>SAVE</span></br>Save to your gallery, save locally<br/>or export as a file"
     rel="tooltip" data-placement="left" >
   </div>
 
   <div
     data-setting="export"
     class="tool-icon  icon-settings-export-white"
-    title="<span style='color:gold'>EXPORT</span></br>Export as Image, as Spritesheet<br/>or as Animated GIF"
+    title="<span class='highlight'>EXPORT</span></br>Export as Image, as Spritesheet<br/>or as Animated GIF"
     rel="tooltip" data-placement="left">
   </div>
 
   <div
     data-setting="import"
     class="tool-icon  icon-settings-open-folder-white"
-    title="<span style='color:gold'>IMPORT</span></br>Import an existing image,<br/>an animated GIF or a .piskel file"
+    title="<span class='highlight'>IMPORT</span></br>Import an existing image,<br/>an animated GIF or a .piskel file"
     rel="tooltip" data-placement="left">
   </div>
 

src/templates/settings/export/misc.html

@@ -5,7 +5,7 @@
     </div>
     <div class="export-panel-section">
       <div style="padding-bottom: 5px">
-        <span style="color: gold;">Export as C File: </span>
+        <span class="highlight">Export as C File: </span>
         <span class="export-info">
           C file with frame rendered as array.
         </span>
@@ -14,7 +14,7 @@
     </div>
     <div class="export-panel-section">
       <div style="padding-bottom: 5px">
-        <span style="color: gold;">Export selected frame as PNG File: </span>
+        <span class="highlight">Export selected frame as PNG File: </span>
         <span class="export-info">
           PNG export of the currently selected frame.
         </span>

src/templates/settings/export/png.html

@@ -2,7 +2,7 @@
   <div class="export-panel-png">
     <div class="export-panel-header export-info">Export your animation as a PNG spritesheet containing all frames.</div>
     <div class="export-panel-section  png-export-layout-section">
-      <div style="color: gold; padding-bottom: 5px;">Spritesheet layout options:</div>
+      <div class="highlight" style="padding-bottom: 5px;">Spritesheet layout options:</div>
       <div style="display: flex; line-height: 20px;">
         <div style="flex: 1;">
           <span>Columns</span>
@@ -25,7 +25,7 @@
 
     <div class="export-panel-section">
       <div style="padding-bottom: 5px">
-        <span style="color: gold;"  class="export-panel-row">Export for PixiJS Movie: </span>
+        <span class="highlight export-panel-row">Export for PixiJS Movie: </span>
       </div>
       <div class="export-panel-row">
         <button type="button" class="button button-primary png-pixi-download-button"/>Download</button>

src/templates/settings/import.html

@@ -45,7 +45,7 @@
 
 <script type="text/template" id="previous-session-info-template">
   <div>
-    Restore a backup of <span style="color:gold">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
+    Restore a backup of <span class="highlight">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
     <div style="margin-top:10px;">
       <button type="button" class="button  button-primary restore-session-button">Restore</button>
     </div>