Set mini browser colors

Author: pomber

packages/mini-browser/src/buttons.tsx

@@ -49,13 +49,20 @@ function Refresh() {
   )
 }
 
-function Open({ href }: { href: string }) {
+function Open({
+  href,
+  style,
+}: {
+  href: string
+  style?: React.CSSProperties
+}) {
   const c = useClasser("ch-browser")
   return (
     <a
       className={c("button", "open-button")}
       title="Open in new tab"
       href={href}
+      style={style}
       target="_blank"
       rel="noopener noreferrer"
     >

packages/mini-browser/src/title-bar.tsx

@@ -1,7 +1,11 @@
 import React from "react"
 import { Back, Forward, Open } from "./buttons"
 import { FrameButtons } from "@code-hike/mini-frame"
-import { EditorTheme } from "@code-hike/utils"
+import {
+  EditorTheme,
+  getColor,
+  ColorName,
+} from "@code-hike/utils"
 
 export { TitleBar }
 
@@ -14,14 +18,36 @@ function TitleBar({
   linkUrl: string
   theme: EditorTheme
 }) {
+  const inputBorder = getColor(theme, ColorName.InputBorder)
   return (
     <>
       <FrameButtons />
       <Back />
       <Forward />
       {/* <Refresh /> */}
-      <input value={url || ""} readOnly />
-      <Open href={linkUrl} />
+      <input
+        value={url || ""}
+        readOnly
+        style={{
+          background: getColor(
+            theme,
+            ColorName.InputBackground
+          ),
+          color: getColor(theme, ColorName.InputForeground),
+          border: inputBorder
+            ? `1px solid ${inputBorder}`
+            : undefined,
+        }}
+      />
+      <Open
+        href={linkUrl}
+        style={{
+          color: getColor(
+            theme,
+            ColorName.EditorForeground
+          ),
+        }}
+      />
     </>
   )
 }

packages/playground/content/test.mdx

@@ -1,3 +1,7 @@
 # Hello
 
-<CH.Preview show="/" style={{ height: 200 }} />
+<CH.Preview
+  show="/"
+  style={{ height: 200 }}
+  url="https://google.com"
+/>

packages/utils/src/theme.ts

@@ -39,14 +39,18 @@ export enum ColorName {
   TabBorder,
   ActiveTabBottomBorder,
   LineNumberForeground,
+  InputForeground,
+  InputBackground,
+  InputBorder,
 }
 
 type Color = string | undefined
 
 const contrastBorder = "#6FC3DF"
 
 // defaults from: https://github.com/microsoft/vscode/blob/main/src/vs/workbench/common/theme.ts
-// and: https://github.com/microsoft/vscode/blob/main/src/vs/editor/common/view/editorColorRegistry.ts
+// and: https://github.com/microsoft/vscode/blob/main/src/vs/editor/common/core/editorColorRegistry.ts
+// and: https://github.com/microsoft/vscode/blob/main/src/vs/platform/theme/common/colorRegistry.ts
 // keys from : https://code.visualstudio.com/api/references/theme-color#editor-groups-tabs
 export function getColor(
   theme: EditorTheme,
@@ -161,7 +165,29 @@ export function getColor(
           hc: "#fffffe",
         })
       )
-
+    case ColorName.InputBackground:
+      return (
+        colors["input.background"] ||
+        getDefault(theme, {
+          dark: "#3C3C3C",
+          light: "#fffffe",
+          hc: "#000000",
+        })
+      )
+    case ColorName.InputForeground:
+      return (
+        colors["input.foreground"] ||
+        getColor(theme, ColorName.EditorForeground)
+      )
+    case ColorName.InputBorder:
+      return (
+        colors["input.border"] ||
+        getDefault(theme, {
+          dark: undefined,
+          light: undefined,
+          hc: contrastBorder,
+        })
+      )
     default:
       return "#f00"
   }