Remove Daytona

Delete section on Daytona theming

Author: Brick George

docs/extensibility/ux-guidelines/colors-and-styling-for-visual-studio.md

@@ -1,7 +1,7 @@
 ---
 title: "Colors and Styling for Visual Studio | Microsoft Docs"
 ms.custom: ""
-ms.date: "04/26/2017"
+ms.date: "07/31/2017"
 ms.reviewer: ""
 ms.suite: ""
 ms.technology: 
@@ -459,272 +459,3 @@ catGUID);
 }  
 }  
 ```  
-  
-##  <a name="BKMK_DaytonaAndWebUI"></a> Daytona and web UI  
-  
-### Overview  
-"Daytona" is a set of APIs, tools, and services that enable a user to create plugins with HTML, CSS, and JavaScript that can be used in a variety of hosts, like Visual Studio or F12. Plugins are composed of a portable component, which is written in HTML, CSS and JavaScript, and optional host-specific components. Each Daytona host can have its own set of UI conventions, either implicit or explicit, that a plugin must conform to in order to appear native to its environment. Some hosts, like Visual Studio, allow end users to make changes to the default "theme" so that the host's visual aspects cannot be statically targeted when authoring a style sheet. This poses a challenge to developers building portable plugins. This topic explains how to author web UI in Visual Studio using the Daytona host in a way that properly supports both theming and High Contrast.  
-  
-### Daytona theming mechanism  
-The Daytona runtime provides a set of services that abstracts the UI conventions and theming capabilities of the host. These services ensure that plugins automatically conform to the visual expectations of the user based on the environment they are hosted in. This behavior is provided by three primary features:  
-  
-1.  A runtime-injected style sheet (plugin.css) that transparently applies a set of CSS rules to a plugin's UI and styles the default set of HTML controls (for example, HTMLInputElement and HTMLButtonElement  
-  
-2.  A set of host-provided tokens that can be used to style UI elements using values that are theme-based instead of hardcoded  
-  
-    -  a declarative syntax for accessing these tokens with CSS  
-  
-    -  an API for programmatically accessing theme tokens from JavaScript  
-  
-3.  Notification of theme changes  
-  
-#### Runtime-injected style sheet  
-The Daytona runtime coordinates with the host to inject a style sheet that automatically themes the standard UI elements of a plugin. This includes styling for the following concepts:  
-  
--   Environment font  
-  
--   Background colors  
-  
--   Hyperlinks  
-  
--   Form controls (for example: `<select>`, `<input>`, `<button>`  
-  
--   Tables  
-  
--   Headings  
-  
--   Scroll bars  
-  
-This means that if your UI is composed entirely of standard HTML UI controls, then no additional work should be needed to respond correctly to theme changes and to support High Contrast.  
-  
-#### Custom UI  
-In almost every nontrivial case, the standard HTML UI controls will be insufficient for providing a complete experience for a plugin and custom UI must be introduced. In order to support proper font choice and color use, **theme tokens** should be used either declaratively in CSS or imperatively via the JavaScript API described below. The Daytona runtime will take care of updating the style sheets that use these tokens on plugin load and on theme changes.  
-  
-##### Theme tokens  
-Both standard and host-specific theme tokens are available. Standard tokens are host-injected and always available. Using the standard tokens wherever possible is preferable. Standard tokens are guaranteed to be provided by all Daytona hosts, and using them makes your plugin inherently more portable. The set of standard tokens is subject to change, though only new tokens should be added and none should be removed. The Visual Studio 2013 version is documented below:  
-  
-| Token name | Description |
-| --- | --- |
-| `plugin-background-color` | The default background color for the plugin |
-| `plugin-color` | The default foreground color for the plugin |
-| `plugin-contextmenu-active-color` | The default foreground selection color for context menus when they are active (have focus) |
-| `plugin-contextmenu-background-color` | The default background color for context menus |
-| `plugin-contextmenu-border-color` | The default border color for context menus |
-| `plugin-contextmenu-color` | The default foreground color for context menus |
-| `plugin-contextmenu-hover-color` | The default hover background color for context menus |
-| `plugin-contextmenu-hover-text-color` | The default hover foreground color for context menus |
-| `plugin-contextmenu-icon-checkbox` | The default checkbox icon color for context menus |
-| `plugin-contextmenu-inactive-text-color` | The default foreground selection color for context menus when they are inactive |
-| `plugin-contextmenu-separator-color` | The default separator color for context menus |
-| `plugin-font-family` | The default font family to use for the plugin |
-  
-In Visual Studio, the following `plugin-font` tokens are based on the Environment font settings:  
-  
--   `plugin-font-size`  
-  
--   `plugin-font-weight`  
-  
--   `plugin-highlight-background-color`  
-  
--   `plugin-highlight-color`  
-  
--   `plugin-inactive-color` 
-  
-The following `plugin-link` tokens are used to style `HTMLElements` (hyperlinks):
-  
--   `plugin-link-color`  
-  
--   `plugin-link-active-color`  
-  
--   `plugin-link-hover-color`  
-  
-Plugin.css styles scrollbars by default using the following tokens to better support the themes in the various hosts (in particular, Visual Studio):
-  
--   `plugin-scrollbar-arrow-color`  
-  
--   `plugin-scrollbar-background-color`  
-  
--   `plugin-scrollbar-face-color`  
-  
-The following `plugin-select` tokens are used to style the `HTMLSelectElement` (combo box drop-down):  
-  
--   `plugin-select-option-background-color` 
-  
--   `plugin-select-option-color`  
-  
--   `plugin-select-option-checked-background-color`  
-  
--   `plugin-select-option-checked-border-color`  
-  
--   `plugin-select-option-checked-foreground-color`  
-  
--   `plugin-select-option-hover-background-color`  
-  
--   `plugin-select-option-hover-border-color`  
-  
--   `plugin-select-option-hover-foreground-color`  
-  
--   `plugin-select-border-color`  
-  
--   `plugin-select-background-color`  
-  
--   `plugin-select-foreground-color`  
-  
--   `plugin-select-hover-background-color`  
-  
--   `plugin-select-hover-border-color`  
-  
--   `plugin-select-hover-foreground-color`  
-  
--   `plugin-table-border-color`  
-  
--   `plugin-table-header-background-color`  
-  
--   `plugin-table-header-color`  
-  
--   `plugin-textbox-border-color`  
-  
--   `plugin-textbox-background-color`  
-  
--   `plugin-textbox-color`  
-  
--   `plugin-textbox-disabled-background-color`  
-  
--   `plugin-textbox-disabled-border-color`  
-  
--   `plugin-textbox-disabled-color`  
-  
-These tokens should be used for *all* tree views and tables, because they have the correct defaults set in the various hosts to support themes and High Contrast:  
-  
--   `plugin-treeview-content-background-color`  
-  
--   `plugin-treeview-content-color` 
-  
--   `plugin-treeview-content-inactive-selected-color`  
-  
--   `plugin-treeview-content-mouseover-background-color`  
-  
--   `plugin-treeview-content-mouseover-color`  
-  
--   `plugin-treeview-content-inactive-selected-color`  
-  
--   `plugin-treeview-content-selected-background-color`  
-  
--   `plugin-treeview-content-selected-border-color`  
-  
--   `plugin-treeview-content-selected-color`  
-  
-##### Host-specific tokens  
-In addition to supporting the standard set of tokens, hosts may also provide nonstandard tokens. The Visual Studio host does this by allowing the plugin to specify theme token aliases in a Visual Studio-specific section of the manifest. For example:
-  
-```  
-"vs": {  
-    "theme_token_aliases": {   
-        "diagnostics-host-border": {   
-            "category": "f8a8b2a5-dd35-43f6-a382-fd6a61325c22",   
-            "key_type": "BackgroundColor",   
-            "name": "Border"   
-        },   
-        ...   
-    }   
-}    
-```  
-  
- This example introduces a theme token, named `diagnostics-host-border`, which can be referenced identically to the standard tokens mentioned above. The `category`, `key_type`, and `name` are used to resolve the color through the `IVsFontAndColorStorage` interface. In many cases, it's possible to find appropriate colors (along with the `category`, `key_type`, and `name` information) in the XML files located in `VSCommonContent\themes`. This same mechanism is used if your package introduces new configurable colors: match the `category`, `key_type`, and `name` to the color that you'd like to use. Plugin authors should attempt to use standard tokens whenever possible and only use host-specific tokens when absolutely necessary.  
-  
-##### Using theme tokens in CSS  
- Theme tokens are referred to via a specifically formatted comment syntax. The rules for token parsing:  
-  
-1.  The comment expression must be enclosed within square brackets (`[ ]`).  
-  
-2.  All white space within the comment, but outside of the expression, is ignored.  
-  
-3.  The comment expression must directly follow the property it replaces.  
-  
-4.  Any leading or trailing white space within the expression will be trimmed.  
-  
-5.  Each token name within the expression must be enclosed in curly braces (for example, `{font-family}` and `{button-hover-color}`). Otherwise, it will be treated as a literal value.  
-  
- The following are examples of how the token parser will replace CSS values, assuming that the `plugin-background-color` token has the value of `#000` and the `plugin-font-family` token has the value of `Verdana`.
-  
-| Authored CSS | Parsed CSS | Notes |  
-| --- | --- | --- |
-| `background-color: #fff; /*[{plugin-background-color}]*/` | `background-color: #000;` | The default value is replaced with the dynamic host-specific value. |  
-| `background-color: #fff; /*   [{plugin-background-color}]   */` | `background-color: #000;` | The white space outside of the expression is ignored. |  
-| `background-color: #fff; /*[   {plugin-background-color}   ]*/` | `background-color: #000;` | The trailing and leading white space within the expression is trimmed. |
-| `background-color: #fff; /*{plugin-background-color}*/` | `background-color: #fff;` | The expression isn't enclosed in square brackets, and therefore the comment is ignored. |
-| `background-color: #fff; /*[plugin-background-color]*/` | `background-color: plugin-background-color;` | The token isn't enclosed in curly braces, and is therefore treated as a literal value. |
-| `/*[{plugin-background-color}]*/ background-color: #fff;` | `background-color: #fff;` | The comment doesn't follow the property value and is therefore ignored. |
-| `background-color: #fff;  /*[{plugin-background-color}]*/` | `background-color: #fff;`| *Same as above* |
-| `/*[{plugin-background-color}]*/  background-color: #fff;` | `background-color: #fff;` | *Same as above* |
-| `font-family: Arial, sans-serif; /*[{plugin-font-family}, sans-serif]*/` | `font-family: Verdana, sans-serif;` | The token is replaced and the literal content is maintained. |
-| `background-image: linear-gradient(0% #000, 100% #ccc); /*[linear-gradient(0% #000, 100% {plugin-background-color})]*/` | `background-image: linear-gradient(0% #000, 100% #000);` | *Same as above* |
-  
-If a CSS file includes theme tokens it must be marked by the `data-plugin-theme` attribute on the `link` element in the HTML file. For example:  
-  
-```  
-<link href="default.css" rel="stylesheet" data-plugin-theme="true" />  
-```
-
-##### Using theme tokens from JavaScript  
-While custom UI should be themed by CSS where possible, there are scenarios when the value of a theme token needs to be accessed programmatically. For example, if custom UI is being drawn onto a `CanvasElement` that doesn't inherit styling from CSS, or if a UI element is being dynamically created as opposed to referencing style sheets. The scenarios are enabled by using the Daytona API `Plugin.Theme.getValue`. This function returns a host-provided theme value when given a token name.  
-  
-| Not themed | Themed |
-| --- | --- |
-| `var surface = document.getElementById("surface").getContext("2d");  surface.fillStyle = "#ccc";  surface.fillRect(0, 0, 200, 200);` | `var surface = document.getElementById("surface").getContext("2d");  surface.fillStyle = ("plugin-background-color");  surface.fillRect(0, 0, 200, 200);` |
-| `var el = document.createElement("div");  el.style.backgroundColor = "#ccc";` | `var el = document.createElement("div");  el.style.backgroundColor = Plugin.Theme.getValue("plugin-background-color");` |  
-  
-If tokens are used from JavaScript, **the theme change event must be handled to respond to updates**. This is unnecessary for theme tokens used declaratively in CSS, as the Daytona runtime takes care of it for the plugin. The theme event can be handled in the following way:
-
-**Member (single handler)**
-```
-Plugin.Theme.onchange = function () 
-{
-    // re-draw dynamic UI here
-}
-```
-
-**DOM-Event (multiple handlers)**
-```
-Plugin.Theme.addEventListener("change", function () 
-{
-    // re-draw dynamic UI here
-});
-```
-  
-In this case, it would be very common to re-call `Plugin.Theme.getValue` in these handlers, as the value of the theme tokens likely changed when the theme changed.  
-  
-##### Standard token mapping  
-The standard tokens are mapped to Environment and Shell colors. The list below gives a flavor of what those mappings are.  
-  
-| Token name | VS mapping (`EnvironmentColors`) |  
-| --- | --- |  
-| `plugin-color` | `ToolWindowTextColorKey` |
-| `plugin-background-color` | `ToolWindowBackgroundColorKey` |
-| `plugin-link-color` | `ControlLinkTextColorKey` |
-| `plugin-link-hover-color` | `ControlLinkTextHoverColorKey` |
-| `plugin-link-active-color` | `ControlLinkTextPressedColorKey` |
-| `plugin-highlight-color` | `HighlightTextColorKey` |
-| `plugin-highlight-background-color` | `HighlightColorKey` |
-| `plugin-table-header-background-color` | `GridHeadingBackgroundColorKey` |
-| `plugin-table-header-color` | `GridHeadingTextColorKey` |
-| `plugin-table-border-color` | `GridLineColorKey` |
-| `plugin-button-background-color` | `ButtonFaceColorKey` |
-| `plugin-button-hover-background-color` | `ButtonHighlightColorKey` | 
-| `plugin-button-color` | `ButtonTextColorKey` |
-| `plugin-button-border-color` | `ButtonBorderColorKey` |
-  
-##### Theme changes  
-The Visual Studio host triggers plugin theme changes when an end user makes changes to the following settings:  
-  
-**Color theme:**  
-  
-![Color theme changes](../../extensibility/ux-guidelines/media/0305-a_colortheme.png "0305-a_ColorTheme")<br />Color theme changes  
-  
-**Environment theme:**  
-  
-![Environment theme changes](../../extensibility/ux-guidelines/media/0305-b_environmenttheme.png "0305-b_EnvironmentTheme")<br />Environment theme changes  
-  
-**Operating system theme** (only when changing to and from High Contrast):  
-  
-![Operating system theme changes](../../extensibility/ux-guidelines/media/0305-c_ostheme.png "0305-c_OSTheme")<br />Operating system theme changes