Remove all uses of getColor

Author: pomber

packages/mdx/src/index.scss

@@ -36,17 +36,21 @@
   margin: 0.1em -0.05em;
   border-radius: 0.25em;
   font-size: 0.9rem;
+  color: var(--ch-l-foreground);
+  background: var(--ch-l-lighter-inlineBackground);
+}
+
+.ch-inline-code .ch-section-link,
+.ch-inline-code .ch-section-link * {
+  text-decoration-color: var(--ch-l-foreground);
 }
 
 .ch-section-link,
 .ch-section-link * {
   text-decoration: underline;
   text-decoration-style: dotted;
   text-decoration-thickness: 1px;
-  text-decoration-color: var(
-    --ch-code-foreground,
-    currentColor
-  );
+  text-decoration-color: currentColor;
 }
 .ch-section-link[data-active="true"] {
   background-color: #bae6fd66;

packages/mdx/src/mdx-client/code.tsx

@@ -80,6 +80,7 @@ export function InnerCode({
         className={`ch-codeblock not-prose ${
           className || ""
         }`}
+        data-ch-theme={props.codeConfig?.themeName}
         style={style}
       >
         <CodeSpring
@@ -99,6 +100,7 @@ export function InnerCode({
         className={`ch-codegroup not-prose ${
           className || ""
         }`}
+        data-ch-theme={props.codeConfig?.themeName}
         style={style}
       >
         <EditorSpring

packages/mdx/src/mdx-client/inline-code.tsx

@@ -1,11 +1,5 @@
 import React from "react"
-import {
-  EditorTheme,
-  getColor,
-  transparent,
-  ColorName,
-  Code,
-} from "../utils"
+import { Code } from "../utils"
 
 export function InlineCode({
   className,
@@ -17,33 +11,21 @@ export function InlineCode({
   className: string
   code: Code
   children?: React.ReactNode
-  codeConfig: { theme: EditorTheme }
+  codeConfig: { themeName: string }
 }) {
-  const { theme } = codeConfig
   const { lines } = code
   const allTokens = lines.flatMap(line => line.tokens)
-  const foreground = getColor(
-    theme,
-    ColorName.CodeForeground
-  )
+
   return (
     <span
+      data-ch-theme={codeConfig.themeName}
       className={
         "ch-inline-code not-prose" +
         (className ? " " + className : "")
       }
       {...rest}
     >
-      <code
-        style={{
-          ["--ch-code-foreground" as any]: foreground,
-          background: transparent(
-            getColor(theme, ColorName.CodeBackground),
-            0.9
-          ),
-          color: foreground,
-        }}
-      >
+      <code>
         {allTokens.map((token, j) => (
           <span key={j} {...token.props}>
             {token.content}

packages/mdx/src/mdx-client/scrollycoding.tsx

@@ -42,7 +42,10 @@ function StaticScrollycoding({
   const { stepsChildren, previewChildren } =
     extractPreviewSteps(children, hasPreviewSteps)
   return (
-    <section className={`ch-scrollycoding-static`}>
+    <section
+      className="ch-scrollycoding-static"
+      data-ch-theme={rest?.codeConfig?.themeName}
+    >
       {stepsChildren.map((children, i) => (
         <StaticSection
           key={i}
@@ -172,6 +175,7 @@ function DynamicScrollycoding({
         withPreview ? "ch-scrollycoding-with-preview" : ""
       } ${className || ""}`}
       style={style}
+      data-ch-theme={codeConfig?.themeName}
     >
       <div className="ch-scrollycoding-content">
         <Scroller

packages/mdx/src/mdx-client/spotlight.tsx

@@ -54,6 +54,7 @@ export function Spotlight({
         withPreview ? "ch-spotlight-with-preview" : ""
       } ${className || ""}`}
       style={style}
+      data-ch-theme={codeConfig.themeName}
     >
       <div className="ch-spotlight-tabs">
         {headerElement?.props?.children ? (

packages/mdx/src/mini-browser/buttons.tsx

@@ -49,20 +49,12 @@ function Refresh() {
   )
 }
 
-function Open({
-  href,
-  style,
-}: {
-  href: string
-  style?: React.CSSProperties
-}) {
-  const c = useClasser("ch-browser")
+function Open({ href }: { href: string }) {
   return (
     <a
-      className={c("button", "open-button")}
+      className="ch-browser-button ch-browser-open-button"
       title="Open in new tab"
       href={href}
-      style={style}
       target="_blank"
       rel="noopener noreferrer"
     >
@@ -73,7 +65,7 @@ function Open({
         viewBox="3 3 18 18"
         height="1em"
         width="1em"
-        className={c("open-icon")}
+        className="ch-browser-open-icon"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path>

packages/mdx/src/mini-browser/index.scss

@@ -16,13 +16,15 @@
   height: 1.4em;
   font-size: 1em;
   border-radius: 0.5em;
-  border: none;
   box-shadow: none;
   flex: 1;
   padding: 0 10px;
   color: #544;
   min-width: 5px;
   width: 5px;
+  background: var(--ch-l-input-background);
+  color: var(--ch-l-input-foreground);
+  border: 1px solid var(--ch-l-input-border);
 }
 
 .ch-browser-button {
@@ -39,8 +41,9 @@
 }
 
 .ch-browser-open-button {
-  color: inherit;
+  color: var(--ch-l-icon-foreground);
 }
+
 .ch-browser-open-icon {
   display: block;
 }

packages/mdx/src/mini-browser/mini-browser-hike.tsx

@@ -50,13 +50,8 @@ function MiniBrowserWithRef(
         ...transitionStyle({ progress, transition }),
         ...props.style,
       }}
-      classes={classes}
       titleBar={
-        <TitleBar
-          url={displayUrl!}
-          linkUrl={loadUrl!}
-          theme={theme}
-        />
+        <TitleBar url={displayUrl!} linkUrl={loadUrl!} />
       }
       theme={theme}
     >

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

@@ -1,49 +1,22 @@
 import React from "react"
 import { Back, Forward, Open } from "./buttons"
 import { FrameButtons } from "../mini-frame"
-import { EditorTheme, getColor, ColorName } from "../utils"
 
-export { TitleBar }
-
-function TitleBar({
+export function TitleBar({
   url,
   linkUrl,
-  theme,
 }: {
   url: string
   linkUrl: string
-  theme: EditorTheme
 }) {
-  const inputBorder = getColor(theme, ColorName.InputBorder)
   return (
     <>
       <FrameButtons />
       <Back />
       <Forward />
       {/* <Refresh /> */}
-      <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
-          ),
-        }}
-      />
+      <input value={url || ""} readOnly />
+      <Open href={linkUrl} />
     </>
   )
 }

packages/mdx/src/mini-editor/code-browser.scss

@@ -1,6 +1,7 @@
 @import "../utils/mixins.scss";
 
 .ch-code-browser {
+  color: var(--ch-l-editor-foreground);
   display: flex;
   height: 100%;
   font-family: Ubuntu, Droid Sans, -apple-system,
@@ -12,6 +13,9 @@
   min-width: 100px;
   padding: 1em 0;
   font-size: 0.95rem;
+  border-color: var(--ch-l-sideBar-border);
+  background: var(--ch-l-sideBar-background);
+  color: var(--ch-l-sideBar-foreground);
 }
 
 .ch-code-browser-content {
@@ -25,10 +29,13 @@
   line-height: 1.2rem;
   letter-spacing: 0px;
   position: relative;
+  background: var(--ch-l-background);
+  color: var(--ch-l-foreground);
+  color-scheme: var(--ch-l-colorScheme);
 }
 
 .ch-code-browser-content ::selection {
-  background-color: var(--ch-selection-background);
+  background-color: var(--ch-l-editor-selectionBackground);
   color: inherit;
 }
 
@@ -41,9 +48,14 @@
   cursor: pointer;
 }
 
+.ch-code-browser-sidebar-file[data-selected="true"] {
+  background: var(--ch-l-list-activeSelectionBackground);
+  color: var(--ch-l-list-activeSelectionForeground);
+}
+
 .ch-code-browser-sidebar-file:hover {
-  background-color: var(--ch-hover-background);
-  color: var(--ch-hover-foreground);
+  background-color: var(--ch-l-list-hoverBackground);
+  color: var(--ch-l-list-hoverForeground);
 }
 
 .ch-code-browser-button {