[Theme3.0] Change reference to use the CSS like var() syntax.

Supports defaults var(name, default); var(name);
Where default can be another property.
(https://www.w3schools.com/css/css3_variables.asp)

This deprecates the @name syntax.

Fixes: #876

1 files changed, 52 insertions, 52 deletions

diff --git a/doc/default_theme.rasi b/doc/default_theme.rasi
index 284010b2..3b346a6d 100644
--- a/doc/default_theme.rasi
+++ b/doc/default_theme.rasi
@@ -2,37 +2,37 @@
  * rofi -dump-theme output.
  **/
 * {
-    selected-normal-foreground:  @lightbg;
+    selected-normal-foreground:  var(lightbg);
     foreground:                  rgba ( 0, 43, 54, 100 % );
-    normal-foreground:           @foreground;
-    alternate-normal-background: @lightbg;
+    normal-foreground:           var(foreground);
+    alternate-normal-background: var(lightbg);
     red:                         rgba ( 220, 50, 47, 100 % );
-    selected-urgent-foreground:  @background;
+    selected-urgent-foreground:  var(background);
     blue:                        rgba ( 38, 139, 210, 100 % );
-    urgent-foreground:           @red;
-    alternate-urgent-background: @lightbg;
-    active-foreground:           @blue;
+    urgent-foreground:           var(red);
+    alternate-urgent-background: var(lightbg);
+    active-foreground:           var(blue);
     lightbg:                     rgba ( 238, 232, 213, 100 % );
-    selected-active-foreground:  @background;
-    alternate-active-background: @lightbg;
+    selected-active-foreground:  var(background);
+    alternate-active-background: var(lightbg);
     background:                  rgba ( 253, 246, 227, 100 % );
-    alternate-normal-foreground: @foreground;
-    normal-background:           @background;
+    alternate-normal-foreground: var(foreground);
+    normal-background:           var(background);
     lightfg:                     rgba ( 88, 104, 117, 100 % );
-    selected-normal-background:  @lightfg;
-    border-color:                @foreground;
+    selected-normal-background:  var(lightfg);
+    border-color:                var(foreground);
     spacing:                     2;
-    separatorcolor:              @foreground;
-    urgent-background:           @background;
-    selected-urgent-background:  @red;
-    alternate-urgent-foreground: @red;
+    separatorcolor:              var(foreground);
+    urgent-background:           var(background);
+    selected-urgent-background:  var(red);
+    alternate-urgent-foreground: var(red);
     background-color:            rgba ( 0, 0, 0, 0 % );
-    alternate-active-foreground: @blue;
-    active-background:           @background;
-    selected-active-background:  @blue;
+    alternate-active-foreground: var(blue);
+    active-background:           var(background);
+    selected-active-background:  var(blue);
 }
 window {
-    background-color: @background;
+    background-color: var(background);
     border:           1;
     padding:          5;
 }
@@ -42,16 +42,16 @@ mainbox {
 }
 message {
     border:       2px dash 0px 0px ;
-    border-color: @separatorcolor;
+    border-color: var(separatorcolor);
     padding:      1px ;
 }
 textbox {
-    text-color: @foreground;
+    text-color: var(foreground);
 }
 listview {
     fixed-height: 0;
     border:       2px dash 0px 0px ;
-    border-color: @separatorcolor;
+    border-color: var(separatorcolor);
     spacing:      2px ;
     scrollbar:    true;
     padding:      2px 0px 0px ;
@@ -61,77 +61,77 @@ element {
     padding: 1px ;
 }
 element normal.normal {
-    background-color: @normal-background;
-    text-color:       @normal-foreground;
+    background-color: var(normal-background);
+    text-color:       var(normal-foreground);
 }
 element normal.urgent {
-    background-color: @urgent-background;
-    text-color:       @urgent-foreground;
+    background-color: var(urgent-background);
+    text-color:       var(urgent-foreground);
 }
 element normal.active {
-    background-color: @active-background;
-    text-color:       @active-foreground;
+    background-color: var(active-background);
+    text-color:       var(active-foreground);
 }
 element selected.normal {
-    background-color: @selected-normal-background;
-    text-color:       @selected-normal-foreground;
+    background-color: var(selected-normal-background);
+    text-color:       var(selected-normal-foreground);
 }
 element selected.urgent {
-    background-color: @selected-urgent-background;
-    text-color:       @selected-urgent-foreground;
+    background-color: var(selected-urgent-background);
+    text-color:       var(selected-urgent-foreground);
 }
 element selected.active {
-    background-color: @selected-active-background;
-    text-color:       @selected-active-foreground;
+    background-color: var(selected-active-background);
+    text-color:       var(selected-active-foreground);
 }
 element alternate.normal {
-    background-color: @alternate-normal-background;
-    text-color:       @alternate-normal-foreground;
+    background-color: var(alternate-normal-background);
+    text-color:       var(alternate-normal-foreground);
 }
 element alternate.urgent {
-    background-color: @alternate-urgent-background;
-    text-color:       @alternate-urgent-foreground;
+    background-color: var(alternate-urgent-background);
+    text-color:       var(alternate-urgent-foreground);
 }
 element alternate.active {
-    background-color: @alternate-active-background;
-    text-color:       @alternate-active-foreground;
+    background-color: var(alternate-active-background);
+    text-color:       var(alternate-active-foreground);
 }
 scrollbar {
     width:        4px ;
     border:       0;
-    handle-color: @normal-foreground;
+    handle-color: var(normal-foreground);
     handle-width: 8px ;
     padding:      0;
 }
 sidebar {
     border:       2px dash 0px 0px ;
-    border-color: @separatorcolor;
+    border-color: var(separatorcolor);
 }
 button {
     spacing:    0;
-    text-color: @normal-foreground;
+    text-color: var(normal-foreground);
 }
 button selected {
-    background-color: @selected-normal-background;
-    text-color:       @selected-normal-foreground;
+    background-color: var(selected-normal-background);
+    text-color:       var(selected-normal-foreground);
 }
 inputbar {
     spacing:    0px ;
-    text-color: @normal-foreground;
+    text-color: var(normal-foreground);
     padding:    1px ;
     children:   [ prompt,textbox-prompt-colon,entry,case-indicator ];
 }
 case-indicator {
     spacing:    0;
-    text-color: @normal-foreground;
+    text-color: var(normal-foreground);
 }
 entry {
     spacing:    0;
-    text-color: @normal-foreground;
+    text-color: var(normal-foreground);
 }
 prompt {
     spacing:    0;
-    text-color: @normal-foreground;
+    text-color: var(normal-foreground);
 }
 textbox-prompt-colon {
     expand:     false;
@@ -141,5 +141,5 @@ textbox-prompt-colon {
 }
 error-message {
     background-color: rgba ( 0, 0, 0, 0 % );
-    text-color:       @normal-foreground;
+    text-color:       var(normal-foreground);
 }