feat: add color display in code section, hide cta

Author: Justineo

components/Code.vue

@@ -64,6 +64,13 @@ const highlighted = computed(() => {
       span.appendChild(prev)
       span.appendChild(el)
     })
+
+    tpl.querySelectorAll('.token.color').forEach((el) => {
+      const span = document.createElement('span')
+      span.className = 'token chit'
+      span.style.backgroundColor = el.textContent || 'transparent'
+      el.parentNode!.insertBefore(span, el)
+    })
   })
 })
 
@@ -169,8 +176,7 @@ function handleClick(event: MouseEvent) {
 }
 
 .tp-code-content {
-  padding-left: 6px;
-  padding-bottom: 8px;
+  padding: 0 8px 8px;
   overflow-x: auto;
 }
 
@@ -293,4 +299,16 @@ function handleClick(event: MouseEvent) {
 .tp-code-content .token.variable:focus:not(:focus-visible) {
   outline: 2px solid transparent;
 }
+
+.tp-code-content .token.chit {
+  width: 12px;
+  height: 12px;
+  display: inline-block;
+  margin-right: 2px;
+  transform: translateY(-1px);
+  vertical-align: middle;
+  border-radius: 2px;
+  border: 1px solid var(--color-border);
+  cursor: default;
+}
 </style>

entrypoints/ui/style.css

@@ -183,3 +183,14 @@ tempad ::-webkit-scrollbar-thumb {
   width: 1px;
   background-color: var(--color-border);
 }
+
+[data-testid="design-toolbelt-wrapper"] [class^="toolbelt_banner--container"],
+[data-testid="design-toolbelt-wrapper"]:has([class^="toolbelt_banner--container"])
+  [class^="design_toolbelt--enabledToolsRow"]
+  ~ *,
+[data-testid="design-toolbelt-wrapper"]:has([class^="toolbelt_banner--container"])
+  [class^="mode_toggle_switch_divider"],
+[data-testid="design-toolbelt-wrapper"]:has([class^="toolbelt_banner--container"])
+  [class^="mode_switcher_toggle--toggleWrapper"] {
+  display: none !important;
+}