[WIP] Supported Theming Variables

Note: this is still a draft

You can find the main source for variables and defaults here:

• ha-style.ts
• style.ts
• ha-card.ts

And other resources here:

• ALL Lovelace changes (theme related or not): https://github.com/home-assistant/frontend/releases
• Older changes (outdated, but search for "theming"): https://www.home-assistant.io/lovelace/changelog/
• https://github.com/SilvrrGIT/Home-Assistant-Themes/blob/master/themes/default_ha.yaml
• https://community.home-assistant.io/t/the-most-used-variables-in-home-assistants-source-code/226727

Note that many theme variables will inherit "correct" values from other variables. Here's an example of something approaching a minimum list of variables required for a basic theme:

darkorange: # by Bram and SeanPM5
  primary-color:        "#ff9800"
  light-primary-color:  "#ffc947"
  dark-primary-color:   "#c66900"
  text-primary-color:   "#ffffff"
  primary-text-color:   "#ffffff"
  secondary-text-color: "#ff9800"
  primary-background-color:   "#37464f"
  card-background-color:      "#263137"
  secondary-background-color: "#263137"

(incomplete) list of variables:

{
      /* text */
      --primary-text-color: #212121;
      --secondary-text-color: #727272;
      --text-primary-color: #ffffff;
      --disabled-text-color: #bdbdbd;

      /* main interface colors */
      --primary-color: #03a9f4;
      --dark-primary-color: #0288d1;
      --light-primary-color: #b3e5fC;
      --accent-color: #ff9800;
      --divider-color: rgba(0, 0, 0, .12);

      /* states and badges */
      --state-icon-color: #44739e;
      --state-icon-active-color: #FDD835;
      --state-icon-unavailable-color: var(--disabled-text-color);

      /* background and sidebar */
      --card-background-color: #ffffff;
      --primary-background-color: #fafafa;
      --secondary-background-color: #e5e5e5; /* the background of the main `dashboard` */
      --code-editor-background-color: var(--card-background-color);

      /* sidebar menu */
      --sidebar-text-color: var(--primary-text-color);
      --sidebar-background-color: var(--paper-listbox-background-color);
      --sidebar-icon-color: rgba(0, 0, 0, 0.5);
      --sidebar-selected-text-color: var(--primary-text-color);
      --sidebar-selected-background-color: rgba(30,30,30,0.1);
      --sidebar-selected-icon-color: var(--primary-color);
      --scrollbar-thumb-color:    >>>TBD<<<    ;  /* tab for scrolling when sidebar has lots of entries */

      /* controls */
      --toggle-button-unchecked-color: var(--accent-color);
      --toggle-button-color: var(--primary-color);
      --slider-bar-color: var(--disabled-text-color);
      --slider-color: var(--primary-color);
      --slider-secondary-color: var(--light-primary-color);

      --paper-progress-height: 4px;
      --paper-progress-container-color: rgba(200, 200, 200, 0.5);
      --paper-progress-active-color

      /* badges  */
      --ha-label-badge-title-font-size: .9em;
      --ha-label-badge-title-width: 5em;
      --ha-label-badge-title-font-weight: 300;

      --label-badge-background-color: white;
      --label-badge-text-color: rgb(76, 76, 76);
      --label-badge-red: #DF4C1E;
      --label-badge-blue: #039be5;
      --label-badge-green: #0DA035;
      --label-badge-yellow: #f4b400;
      --label-badge-grey: var(--paper-grey-500);

      /* header */
      --app-header-text-color: var(--text-primary-color);
      --app-header-edit-text-color: black;
      --app-header-background-color: var(--primary-color);	 
      --app-header-edit-background-color: #CCC;
      
      /* "Reload theme" message (aka toast) at bottom of page */
      /* Note: In the past, "paper-" variables have been replaced with non-paper, so these might change in the future */
      --paper-toast-color: #f1f1f1;
      --paper-toast-background-color: #323232;
      
      /* Card layout */
      --masonry-view-card-margin: 4px 4px 8px;
      --grid-card-gap: 8px;      /* Gap just means margin */
      --stack-card-margin: 10px; /* Default if you haven't set them individually */
      --horizontal-stack-card-margin: 0 4px;
      --vertical-stack-card-margin: 4px 0;
      
      /* Card display */
      --ha-card-border-radius: 2px;
      --ha-card-border-color: var(--primary-color);
      --ha-card-border-width: 2px;
      --section-header-text-color: var(--primary-text-color);  /* If a card has sub-sections, this is the header color for those */

      /* Picture card specific (in addition to card variables above */
      --ha-picture-card-background-color: rgba(0, 0, 0, 0.3);  /* Defaults to semi-transparent background behind text */
      --ha-picture-card-text-color: white;
      --ha-picture-icon-button-on-color: white;
      --ha-picture-icon-button-color: #a9a9a9;

      /* Template and YAML code editors */
      --code-editor-background-color: var(--card-background-color);
      --codemirror-atom: #F78C6C;
      --codemirror-attribute: #C792EA;
      --codemirror-comment: #545454; 
      --codemirror-keyword: #C792EA;
      --codemirror-meta: #FFCB6B;   /* or --primary-text-color? */
      --codemirror-number: #FF5370;
      --codemirror-operator: #89DDFF;
      --codemirror-property: #C792EA;
      --codemirror-qualifier: #DECB6B;
      --codemirror-string: #C3E88D;
      /* (possibly) less common code editor variables: */
      --codemirror-builtin: #FFCB6B;
      --codemirror-def: #82AAFF; 
      --codemirror-string-2: #f07178;
      --codemirror-tag: #FF5370;
      --codemirror-type: #DECB6B;
      --codemirror-variable: #f07178;
      --codemirror-variable-2: #EEFFFF;
      --codemirror-variable-3: #DECB6B;

}