Dracula whitespace color changes (#9588)

* added color to render whitespace characters

* made some alphabet sort

1 files changed, 84 insertions, 66 deletions

diff --git a/runtime/themes/dracula.toml b/runtime/themes/dracula.toml
index 1473c1a8..32d9c8f5 100644
--- a/runtime/themes/dracula.toml
+++ b/runtime/themes/dracula.toml
@@ -2,135 +2,153 @@
 # Author : Chirikumbrah
 
 "annotation"                      = { fg = "foreground"                                                     }
+
 "attribute"                       = { fg = "green",              modifiers = ["italic"]                     }
+
 "comment"                         = { fg = "comment"                                                        }
-"comment.block.documentation"     = { fg = "comment"                                                        }
 "comment.block"                   = { fg = "comment"                                                        }
+"comment.block.documentation"     = { fg = "comment"                                                        }
 "comment.line"                    = { fg = "comment"                                                        }
+
 "constant"                        = { fg = "purple"                                                         }
-"constant.numeric"                = { fg = "purple"                                                         }
 "constant.builtin"                = { fg = "purple"                                                         }
 "constant.builtin.boolean"        = { fg = "purple"                                                         }
 "constant.character"              = { fg = "cyan"                                                           }
 "constant.character.escape"       = { fg = "pink"                                                           }
 "constant.macro"                  = { fg = "purple"                                                         }
+"constant.numeric"                = { fg = "purple"                                                         }
 "constructor"                     = { fg = "purple"                                                         }
+
+"definition"                      = { underline = { color = "cyan"                                        } }
+
+"diagnostic"                      = { underline = { color = "orange",          style = "curl"             } }
+"diagnostic.hint"                 = { underline = { color = "purple",          style = "curl"             } }
+"diagnostic.warning"              = { underline = { color = "yellow",          style = "curl"             } }
+"diagnostic.error"                = { underline = { color = "red",             style = "curl"             } }
+"diagnostic.info"                 = { underline = { color = "cyan",            style = "curl"             } }
+
+"error"                           = { fg    = "red"                                                         }
+"hint"                            = { fg    = "purple"                                                      }
+"info"                            = { fg    = "cyan"                                                        }
+"warning"                         = { fg    = "yellow"                                                      }
+
+"diff.delta"                      = { fg    = "orange"                                                      }
+"diff.minus"                      = { fg    = "red"                                                         }
+"diff.plus"                       = { fg    = "green"                                                       }
+
+# d
 "function"                        = { fg = "green"                                                          }
 "function.builtin"                = { fg = "green"                                                          }
-"function.method"                 = { fg = "green"                                                          }
-"function.macro"                  = { fg = "purple"                                                         }
 "function.call"                   = { fg = "green"                                                          }
+"function.macro"                  = { fg = "purple"                                                         }
+"function.method"                 = { fg = "green"                                                          }
+
 "keyword"                         = { fg = "pink"                                                           }
-"keyword.operator"                = { fg = "pink"                                                           }
-"keyword.function"                = { fg = "pink"                                                           }
-"keyword.return"                  = { fg = "pink"                                                           }
-"keyword.control.import"          = { fg = "pink"                                                           }
-"keyword.directive"               = { fg = "green"                                                          }
-"keyword.control.repeat"          = { fg = "pink"                                                           }
 "keyword.control.conditional"     = { fg = "pink"                                                           }
 "keyword.control.exception"       = { fg = "purple"                                                         }
+"keyword.control.import"          = { fg = "pink"                                                           }
+"keyword.control.repeat"          = { fg = "pink"                                                           }
+"keyword.directive"               = { fg = "green"                                                          }
+"keyword.function"                = { fg = "pink"                                                           }
+"keyword.operator"                = { fg = "pink"                                                           }
+"keyword.return"                  = { fg = "pink"                                                           }
 "keyword.storage"                 = { fg = "pink"                                                           }
-"keyword.storage.type"            = { fg = "cyan",               modifiers = ["italic"]                     }
 "keyword.storage.modifier"        = { fg = "pink"                                                           }
-"tag"                             = { fg = "pink"                                                           }
-"tag.attribute"                   = { fg = "purple"                                                         }
-"tag.delimiter"                   = { fg = "foreground"                                                     }
+"keyword.storage.type"            = { fg = "cyan",               modifiers = ["italic"]                     }
+
 "label"                           = { fg = "cyan"                                                           }
+
+"markup.bold"                     = { fg    = "orange",          modifiers = ["bold"]                       }
+"markup.heading"                  = { fg    = "purple",          modifiers = ["bold"]                       }
+"markup.italic"                   = { fg    = "yellow",          modifiers = ["italic"]                     }
+"markup.link.text"                = { fg    = "pink"                                                        }
+"markup.link.url"                 = { fg    = "cyan"                                                        }
+"markup.list"                     = { fg    = "cyan"                                                        }
+"markup.quote"                    = { fg    = "yellow",          modifiers = ["italic"]                     }
+"markup.raw"                      = { fg    = "foreground"                                                  }
+"markup.strikethrough"            = {                            modifiers = ["crossed_out"]                }
+
 "punctuation"                     = { fg = "foreground"                                                     }
 "punctuation.bracket"             = { fg = "foreground"                                                     }
 "punctuation.delimiter"           = { fg = "foreground"                                                     }
 "punctuation.special"             = { fg = "pink"                                                           }
+
 "special"                         = { fg = "pink"                                                           }
+
 "string"                          = { fg = "yellow"                                                         }
+"string.regexp"                   = { fg = "red"                                                            }
 "string.special"                  = { fg = "orange"                                                         }
 "string.symbol"                   = { fg = "yellow"                                                         }
-"string.regexp"                   = { fg = "red"                                                            }
-"type.builtin"                    = { fg = "cyan"                                                           }
+
+"tag"                             = { fg = "pink"                                                           }
+"tag.attribute"                   = { fg = "purple"                                                         }
+"tag.delimiter"                   = { fg = "foreground"                                                     }
+
 "type"                            = { fg = "cyan",               modifiers = ["italic"]                     }
+"type.builtin"                    = { fg = "cyan"                                                           }
 "type.enum.variant"               = { fg = "foreground",         modifiers = ["italic"]                     }
-"variable"                        = { fg = "foreground"                                                     }
-"variable.builtin"                = { fg = "purple",             modifiers = ["italic"]                     }
-"variable.parameter"              = { fg = "orange",             modifiers = ["italic"]                     }
-"variable.other"                  = { fg = "foreground"                                                     }
-"variable.other.member"           = { fg = "foreground"                                                     }
-
 
-"diff.plus"                       = { fg    = "green"                                                       }
-"diff.delta"                      = { fg    = "orange"                                                      }
-"diff.minus"                      = { fg    = "red"                                                         }
 "ui.background"                   = { fg    = "foreground",      bg = "background"                          }
-"ui.cursor.match"                 = { fg    = "foreground",      bg = "grey"                                }
 "ui.cursor"                       = { fg    = "background",      bg = "purple",        modifiers = ["dim"]  }
-"ui.cursor.normal"                = { fg    = "background",      bg = "purple",        modifiers = ["dim"]  }	
 "ui.cursor.insert"                = { fg    = "background",      bg = "green",         modifiers = ["dim"]  }	
-"ui.cursor.select"                = { fg    = "background",      bg = "cyan",          modifiers = ["dim"]  }
-"ui.cursor.primary.normal"        = { fg    = "background",      bg = "purple"                              }	
+"ui.cursor.match"                 = { fg    = "foreground",      bg = "grey"                                }
+"ui.cursor.normal"                = { fg    = "background",      bg = "purple",        modifiers = ["dim"]  }	
 "ui.cursor.primary.insert"        = { fg    = "background",      bg = "green"                               }	
+"ui.cursor.primary.normal"        = { fg    = "background",      bg = "purple"                              }	
 "ui.cursor.primary.select"        = { fg    = "background",      bg = "cyan"                                }
+"ui.cursor.select"                = { fg    = "background",      bg = "cyan",          modifiers = ["dim"]  }
 "ui.cursorline.primary"           = {                            bg = "cursorline"                          }
-"ui.help"                         = { fg    = "foreground",      bg = "black"                               }
 "ui.debug"                        = { fg    = "red"                                                         }
+"ui.help"                         = { fg    = "foreground",      bg = "black"                               }
 "ui.highlight.frameline"          = { fg    = "background",      bg = "red"                                 }
 "ui.linenr"                       = { fg    = "comment"                                                     }
 "ui.linenr.selected"              = { fg    = "foreground"                                                  }
 "ui.menu"                         = { fg    = "foreground",      bg = "current_line"                        }
-"ui.menu.selected"                = { fg    = "current_line",    bg = "purple",        modifiers = ["dim"]  }
 "ui.menu.scroll"                  = { fg    = "foreground",      bg = "current_line"                        }
+"ui.menu.selected"                = { fg    = "current_line",    bg = "purple",        modifiers = ["dim"]  }
 "ui.popup"                        = { fg    = "foreground",      bg = "black"                               }
-"ui.selection.primary"            = {                            bg = "current_line"                        }
 "ui.selection"                    = {                            bg = "selection"                           }
+"ui.selection.primary"            = {                            bg = "current_line"                        }
 "ui.statusline"                   = { fg    = "foreground",      bg = "darker"                              }
 "ui.statusline.inactive"          = { fg    = "comment",         bg = "darker"                              }
-"ui.statusline.normal"            = { fg    = "black",           bg = "purple",        modifiers = ["bold"] }
 "ui.statusline.insert"            = { fg    = "black",           bg = "green",         modifiers = ["bold"] }
+"ui.statusline.normal"            = { fg    = "black",           bg = "purple",        modifiers = ["bold"] }
 "ui.statusline.select"            = { fg    = "black",           bg = "cyan",          modifiers = ["bold"] }
 "ui.text"                         = { fg    = "foreground"                                                  }
 "ui.text.focus"                   = { fg    = "cyan"                                                        }
-"ui.window"                       = { fg    = "foreground"                                                  }
-"ui.virtual.whitespace"           = { fg    = "current_line"                                                }
-"ui.virtual.wrap"                 = { fg    = "current_line"                                                }
-"ui.virtual.ruler"                = { bg    = "black"                                                       }
 "ui.virtual.indent-guide"         = { fg    = "indent"                                                      }
 "ui.virtual.inlay-hint"           = { fg    = "cyan"                                                        }
 "ui.virtual.inlay-hint.parameter" = { fg    = "cyan",            modifiers = ["italic", "dim"]              }
 "ui.virtual.inlay-hint.type"      = { fg    = "cyan",            modifiers = ["italic", "dim"]              }
-"hint"                            = { fg    = "purple"                                                      }
-"error"                           = { fg    = "red"                                                         }
-"warning"                         = { fg    = "yellow"                                                      }
-"info"                            = { fg    = "cyan"                                                        }
-"markup.heading"                  = { fg    = "purple",          modifiers = ["bold"]                       }
-"markup.list"                     = { fg    = "cyan"                                                        }
-"markup.bold"                     = { fg    = "orange",          modifiers = ["bold"]                       }
-"markup.italic"                   = { fg    = "yellow",          modifiers = ["italic"]                     }
-"markup.strikethrough"            = {                            modifiers = ["crossed_out"]                }
-"markup.link.url"                 = { fg    = "cyan"                                                        }
-"markup.link.text"                = { fg    = "pink"                                                        }
-"markup.quote"                    = { fg    = "yellow",          modifiers = ["italic"]                     }
-"markup.raw"                      = { fg    = "foreground"                                                  }
-"diagnostic"                      = { underline = { color = "orange",          style = "curl"             } }
-"diagnostic.hint"                 = { underline = { color = "purple",          style = "curl"             } }
-"diagnostic.warning"              = { underline = { color = "yellow",          style = "curl"             } }
-"diagnostic.error"                = { underline = { color = "red",             style = "curl"             } }
-"diagnostic.info"                 = { underline = { color = "cyan",            style = "curl"             } }
-"definition"                      = { underline = { color = "cyan"                                        } }
+"ui.virtual.ruler"                = { bg    = "black"                                                       }
+"ui.virtual.whitespace"           = { fg    = "whitespace"                                                  }
+"ui.virtual.wrap"                 = { fg    = "current_line"                                                }
+"ui.window"                       = { fg    = "foreground"                                                  }
+
+"variable"                        = { fg = "foreground"                                                     }
+"variable.builtin"                = { fg = "purple",             modifiers = ["italic"]                     }
+"variable.other"                  = { fg = "foreground"                                                     }
+"variable.other.member"           = { fg = "foreground"                                                     }
+"variable.parameter"              = { fg = "orange",             modifiers = ["italic"]                     }
 
 
 [palette]
-foreground        = "#f8f8f2"
 background        = "#282A36"
-cursorline        = "#2d303e"
-darker            = "#222430"
 black             = "#191A21"
-grey              = "#666771"
 comment           = "#6272A4"
 current_line      = "#44475a"
+cursorline        = "#2d303e"
+cyan              = "#8be9fd"
+darker            = "#222430"
+foreground        = "#f8f8f2"
+green             = "#50fa7b" 
+grey              = "#666771"
 indent            = "#56596a"
-selection         = "#363848"
-red               = "#ff5555"
 orange            = "#ffb86c" 
-yellow            = "#f1fa8c" 
-green             = "#50fa7b" 
-purple            = "#BD93F9" 
-cyan              = "#8be9fd"
 pink              = "#ff79c6"
+purple            = "#BD93F9" 
+red               = "#ff5555"
+selection         = "#363848"
+whitespace        = "#586693"
+yellow            = "#f1fa8c"