New applies_to tags styling (#1487)

* New `applies_to` tags styling

* Add EDOT descriptions

* Add descriptions for apm agents

* Fix test

* Spacing adjustments

* Run prettier

Author: reakaleek

docs/syntax/applies.md

@@ -422,9 +422,37 @@ applies_to:
 
 This allows you to annotate various facets as defined in [](../migration/versioning.md)
 
-## Inline Examples
+## Look and feel
 
-### Stack
+### Block
+
+```{applies_to}
+stack: preview 9.1
+serverless: planned
+
+apm_agent_dotnet: ga 1.0.0
+apm_agent_java: beta 1.0.0
+edot_dotnet: preview 1.0.0
+edot_python:
+edot_node: ga 1.0.0
+elasticsearch: preview 9.0.0
+security: removed 9.0.0
+observability: deprecated 9.0.0
+```
+
+### Inline
+
+#### In text
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut libero diam. Mauris sed eleifend erat,
+sit amet auctor odio. Donec ac placerat nunc. {applies_to}`stack: preview` Aenean scelerisque viverra lectus
+nec dignissim. Vestibulum ut felis nec massa auctor placerat. Maecenas vel dictum.
+
+- {applies_to}`elasticsearch: preview` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut libero diam. Mauris sed eleifend erat, sit amet auctor odio. Donec ac placerat nunc. 
+- {applies_to}`observability: preview` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut libero diam.
+- {applies_to}`security: preview` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut libero diam. Mauris sed eleifend erat, sit amet auctor odio. Donec ac placerat nunc. Aenean scelerisque viverra lectus nec dignissim. 
+
+#### Stack
 
 | `applies_to`                               | result                               |
 |--------------------------------------------|--------------------------------------|
@@ -455,7 +483,7 @@ This allows you to annotate various facets as defined in [](../migration/version
 | `` {applies_to}`stack: removed 9.1` ``     | {applies_to}`stack: removed 9.1`     |
 | `` {applies_to}`stack: removed 99.0` ``    | {applies_to}`stack: removed 99.0`    |
 
-### Serverless
+#### Serverless
 
 | `applies_to`                                    | result                                    |
 |-------------------------------------------------|-------------------------------------------|

docs/testing/req.md

@@ -1,7 +1,26 @@
+---
+applies_to:
+  stack: preview 9.0, ga 9.1
+---
+
 # Requirements
 
+```{applies_to}
+stack: preview 9.0, ga 9.1
+```
+
+
+{applies_to}`stack: preview 9.0` This tutorial is based on Elasticsearch 9.0.
+This tutorial is based on Elasticsearch 9.0. This tutorial is based on Elasticsearch 9.0.
+This tutorial is based on Elasticsearch 9.0.
+
+what
+
+
 To follow this tutorial you will need to install the following components:
 
+
+
 - An installation of Elasticsearch, based on our hosted [Elastic Cloud](https://www.elastic.co/cloud) service (which includes a free trial period), or a self-hosted service that you run on your own computer. See the Install Elasticsearch section above for installation instructions.
 - A [Python](https://python.org) interpreter. Make sure it is a recent version, such as Python 3.8 or newer.
 

src/Elastic.Documentation.Site/Assets/markdown/applies-to.css

@@ -1,88 +1,48 @@
 @layer components {
-	.applies,
-	.applies-inline {
+	.applies {
 		cursor: default;
 
+		@apply text-subdued;
+
 		[data-tippy-content]:not([data-tippy-content='']) {
-			cursor: help;
-			border-radius: 9999px;
-			&:hover {
-				text-decoration: underline;
-			}
+			@apply cursor-help;
 		}
 
-		.applicable-meta-removed {
-			color: var(--color-red-90);
-		}
-		.applicable-meta-ga {
-			color: var(--color-green-90);
-		}
-		.applicable-meta-technical-preview {
-			color: var(--color-blue-elastic-80);
-		}
-		.applicable-meta-deprecated {
-			color: var(--color-pink-90);
+		.applicable-info {
+			@apply border-grey-20 inline-grid cursor-default grid-cols-[auto_1fr_auto] rounded-full border-[1px] bg-white pt-1.5 pr-3 pb-1.5 pl-3;
 		}
-		.applicable-meta-beta {
-			color: var(--color-poppy-90);
+
+		.applicable-name,
+		.applicable-meta {
+			@apply text-xs text-nowrap;
 		}
-		.applicable-meta-planned {
-			color: var(--color-grey-90);
+
+		.applicable-separator {
+			width: 1px;
+			height: 100%;
+			background-color: var(--color-grey-20);
+			margin-left: calc(var(--spacing) * 2);
+			margin-right: calc(var(--spacing) * 2);
 		}
 	}
 
-	.applies {
-		@apply font-sans;
-		border-bottom: 1px solid var(--color-grey-20);
-		padding-bottom: calc(var(--spacing) * 3);
-		font-variant: all-petite-caps;
+	.applies.applies-block {
+		@apply border-b-grey-20 flex flex-wrap gap-2 border-b-1 pb-4;
+	}
 
-		.applicable-info {
-			padding: calc(var(--spacing) * 0.5);
-			padding-left: calc(var(--spacing) * 2);
-			padding-right: calc(var(--spacing) * 2);
-			margin: calc(var(--spacing) * 0.5);
-			display: inline-block;
-			font-size: 0.8em;
-			border-radius: 0.4em;
-			background-color: var(--color-white);
-			border: 1px solid var(--color-grey-20);
-		}
-		.applicable-version {
-			font-weight: bold;
-			margin-left: calc(var(--spacing) * 0.5);
-			font-variant: none;
-			font-size: 0.87em;
+	.applies.applies-inline {
+		display: inline-block;
+		vertical-align: bottom;
+		.applicable-separator {
+			margin-left: calc(var(--spacing) * 1.5);
+			margin-right: calc(var(--spacing) * 1.5);
 		}
-		.applicable-lifecycle {
-			font-weight: bold;
-		}
-	}
-	.applies-inline {
-		@apply font-sans;
-		font-variant: all-petite-caps;
 		.applicable-info {
-			cursor: default;
-			padding: calc(var(--spacing) * 0.5);
-			padding-left: calc(var(--spacing) * 2);
-			padding-right: calc(var(--spacing) * 2);
-			margin-left: calc(var(--spacing) * 0.5);
-			margin-right: calc(var(--spacing) * 0.5);
-			display: inline-block;
-			font-size: 0.8em;
-			border-radius: 0.4em;
-			background-color: var(--color-white);
-			border: 1px solid var(--color-grey-20);
-			font-weight: normal;
-		}
-		.applicable-version {
-			font-weight: bold;
-			margin-left: calc(var(--spacing) * 0.5);
-			font-variant: none;
-			font-size: 0.87em;
+			@apply rounded-sm pt-1 pr-1.5 pb-1 pl-1.5;
 		}
-		.applicable-lifecycle {
-			font-weight: bold;
+		.applicable-name,
+		.applicable-meta {
+			font-size: 0.65em;
 		}
 	}
 }

src/Elastic.Documentation.Site/Assets/theme.css

@@ -23,6 +23,7 @@
 	--color-ink: #343741;
 	--color-ink-light: #535966;
 	--color-ink-dark: #1c1e23;
+	--color-subdued: #516381;
 
 	--color-blue-sky: #36b9ff;
 	--color-blue-midnight: #20377d;