ref(docs): Adjust OTel badge color based on value (#251)

Author: Lms24

docs/src/components/AttributeCard.astro

@@ -1,5 +1,6 @@
 ---
 import PiiBadge from './PiiBadge.astro';
+import OtelBadge from './OtelBadge.astro';
 import TypeBadge from './TypeBadge.astro';
 import type { Attribute } from '../content.config';
 import { parseAttributeId } from '../utils/category';
@@ -41,7 +42,7 @@ const rawJson = JSON.stringify(attribute, null, 2);
       <TypeBadge type={attribute.type} />
       <PiiBadge pii={attribute.pii.key} reason={attribute.pii.reason} />
       {attribute.is_in_otel != null && (
-        <span class="badge badge-otel" title="Defined in OpenTelemetry Semantic Conventions">OTel: {attribute.is_in_otel ? 'True' : 'False'}</span>
+        <OtelBadge isInOtel={attribute.is_in_otel} />
       )}
       {attribute.has_dynamic_suffix && (
         <span class="badge badge-dynamic" title="This attribute has a dynamic suffix">Dynamic</span>

docs/src/components/OtelBadge.astro

@@ -0,0 +1,29 @@
+---
+interface Props {
+  isInOtel: boolean;
+}
+
+const { isInOtel } = Astro.props;
+
+const labels = {
+  true: 'OTel: True',
+  false: 'OTel: False',
+};
+
+const colorClasses = {
+  true: 'bg-otel-true-soft text-otel-true',
+  false: 'bg-otel-false-soft text-otel-false',
+};
+
+const valueKey = isInOtel ? 'true' : 'false';
+---
+
+<span
+  class:list={[
+    "inline-flex items-center px-2 py-1 text-xs font-medium rounded-sm uppercase tracking-wide",
+    colorClasses[valueKey]
+  ]}
+  title="Defined in OpenTelemetry Semantic Conventions"
+>
+  {labels[valueKey]}
+</span>

docs/src/styles/global.css

@@ -35,6 +35,11 @@
   --color-pii-maybe-soft: rgba(234, 179, 8, 0.15);
   --color-pii-false: #22c55e;
   --color-pii-false-soft: rgba(34, 197, 94, 0.15);
+
+  --color-otel-true: #22c55e;
+  --color-otel-true-soft: rgba(34, 197, 94, 0.15);
+  --color-otel-false: #64748b;
+  --color-otel-false-soft: rgba(100, 116, 139, 0.2);
 }
 
 .dark {
@@ -73,6 +78,11 @@
   --color-pii-maybe-soft: rgba(212, 167, 44, 0.15);
   --color-pii-false: #50a060;
   --color-pii-false-soft: rgba(80, 160, 96, 0.15);
+
+  --color-otel-true: #50a060;
+  --color-otel-true-soft: rgba(80, 160, 96, 0.15);
+  --color-otel-false: #6b7280;
+  --color-otel-false-soft: rgba(107, 114, 128, 0.2);
 }
 
 @tailwind base;
@@ -207,10 +217,6 @@
     @apply bg-error-soft text-error;
   }
 
-  .badge-otel {
-    @apply bg-info-soft text-info;
-  }
-
   .badge-dynamic {
     @apply bg-warning-soft text-warning;
   }

docs/tailwind.config.mjs

@@ -59,6 +59,14 @@ export default {
           false: 'var(--color-pii-false)',
           'false-soft': 'var(--color-pii-false-soft)',
         },
+
+        // OTEL indicator colors
+        otel: {
+          true: 'var(--color-otel-true)',
+          'true-soft': 'var(--color-otel-true-soft)',
+          false: 'var(--color-otel-false)',
+          'false-soft': 'var(--color-otel-false-soft)',
+        },
       },
       fontFamily: {
         sans: ['DM Sans', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],