Skip to content

Commit

Permalink
light mode (#125)
Browse files Browse the repository at this point in the history
  • Loading branch information
@abvthecity
abvthecity authored Sep 17, 2023
1 parent 18c6e3f commit 1ed2c56
Show file tree
Hide file tree
Showing 10 changed files with 44 additions and 20 deletions.
2 changes: 1 addition & 1 deletion packages/ui/app/src/api-page/examples/TitledExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export const TitledExample: React.FC<TitledExample.Props> = ({
)}
>
<div
className="bg-background-primary-dark flex-1 overflow-auto whitespace-pre py-4"
className="bg-background-primary-light dark:bg-background-primary-dark flex-1 overflow-auto whitespace-pre py-4"
ref={setContentRef}
>
{typeof children === "function" ? children(contentRef ?? undefined) : children}
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/app/src/api-page/examples/curl-example/CurlExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ export const CurlExample: React.FC<CurlExample.Props> = ({ endpoint, example, se
}
}

const curlElement = <span className="text-yellow-100">{CURL_PREFIX}</span>;
const curlElement = <span className="text-yellow-600 dark:text-yellow-100">{CURL_PREFIX}</span>;
if (parts[0]?.type === "line") {
parts[0] = {
...parts[0],
Expand Down
4 changes: 3 additions & 1 deletion packages/ui/app/src/api-page/examples/curl-example/CurlExampleLine.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ export const CurlExampleLine: React.FC<CurlExampleLine.Props> = ({ part, indentI
<JsonExampleLine>
{" ".repeat(excludeIndent ? 0 : indentInSpaces)}
{part.value}
{!excludeTrailingBackslash && !isLastPart && <span className="text-text-primary-dark">{" \\"}</span>}
{!excludeTrailingBackslash && !isLastPart && (
<span className="text-text-primary-light dark:text-text-primary-dark">{" \\"}</span>
)}
</JsonExampleLine>
);
};
4 changes: 2 additions & 2 deletions packages/ui/app/src/api-page/examples/curl-example/CurlParameter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@ export declare namespace CurlParameter {
export const CurlParameter: React.FC<CurlParameter.Props> = ({ paramKey, value, doNotStringifyValue = false }) => {
return (
<>
<span className="text-text-primary-dark">{paramKey}</span>
<span className="text-text-primary-light dark:text-text-primary-dark">{paramKey}</span>
{value != null && (
<>
{" "}
{doNotStringifyValue ? (
<span className="text-text-primary-dark">{value}</span>
<span className="text-text-primary-light dark:text-text-primary-dark">{value}</span>
) : (
<JsonExampleString value={value} />
)}
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/app/src/api-page/examples/json-example/JsonExampleString.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,5 @@ export declare namespace JsonExampleString {
}

export const JsonExampleString: React.FC<JsonExampleString.Props> = ({ value, doNotAddQuotes = false }) => {
return <span className="text-[#94d199]">{doNotAddQuotes ? value : `"${value}"`}</span>;
return <span className="text-green-600 dark:text-green-300">{doNotAddQuotes ? value : `"${value}"`}</span>;
};
10 changes: 8 additions & 2 deletions packages/ui/app/src/api-page/examples/json-example/JsonItemBottomLine.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,14 @@ export declare namespace JsonItemBottomLine {

export const JsonItemBottomLine: React.FC<JsonItemBottomLine.Props> = ({ value, isNonLastItemInCollection }) => {
const element = visitJsonItem(value, {
object: (object) => (size(object) === 0 ? undefined : <span className="text-text-primary-dark">{"}"}</span>),
list: (list) => (list.length === 0 ? undefined : <span className="text-text-primary-dark">{"]"}</span>),
object: (object) =>
size(object) === 0 ? undefined : (
<span className="text-text-primary-light dark:text-text-primary-dark">{"}"}</span>
),
list: (list) =>
list.length === 0 ? undefined : (
<span className="text-text-primary-light dark:text-text-primary-dark">{"]"}</span>
),
string: () => undefined,
number: () => undefined,
boolean: () => undefined,
Expand Down
20 changes: 15 additions & 5 deletions packages/ui/app/src/api-page/examples/json-example/JsonItemTopLineContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,29 @@ export const JsonItemTopLineContent: React.FC<JsonItemTopLineContent.Props> = ({
object: (object) =>
size(object) > 0
? {
content: <span className="text-text-primary-dark">{"{"}</span>,
content: (
<span className="text-text-primary-light dark:text-text-primary-dark">{"{"}</span>
),
isEndOfElement: false,
}
: {
content: <span className="text-text-primary-dark">{"{}"}</span>,
content: (
<span className="text-text-primary-light dark:text-text-primary-dark">{"{}"}</span>
),
isEndOfElement: true,
},
list: (list) =>
list.length > 0
? {
content: <span className="text-text-primary-dark">{"["}</span>,
content: (
<span className="text-text-primary-light dark:text-text-primary-dark">{"["}</span>
),
isEndOfElement: false,
}
: {
content: <span className="text-text-primary-dark">{"[]"}</span>,
content: (
<span className="text-text-primary-light dark:text-text-primary-dark">{"[]"}</span>
),
isEndOfElement: true,
},
string: (value) => ({
Expand All @@ -54,7 +62,9 @@ export const JsonItemTopLineContent: React.FC<JsonItemTopLineContent.Props> = ({
return (
<span className="whitespace-nowrap">
{content}
{isNonLastItemInCollection && isEndOfElement && <span className="text-text-primary-dark">,</span>}
{isNonLastItemInCollection && isEndOfElement && (
<span className="text-text-primary-light dark:text-text-primary-dark">,</span>
)}
</span>
);
};
2 changes: 1 addition & 1 deletion packages/ui/app/src/api-page/examples/json-example/JsonObjectProperty.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ export const JsonObjectProperty: React.FC<JsonObjectProperty> = ({
return (
<JsonPropertySelectionContext.Provider value={propertySelectionContextValue}>
<JsonExampleLine ref={topLineRef}>
<span className="text-text-primary-dark">
<span className="text-text-primary-light dark:text-text-primary-dark">
&quot;{propertyKey}&quot;{": "}
</span>
<JsonItemTopLineContent value={propertyValue} isNonLastItemInCollection={!isLastProperty} />
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/app/src/docs/Docs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export const Docs: React.FC = memo(function UnmemoizedDocs() {
/>
<div className="relative flex min-h-0 flex-1 flex-col">
{searchService.isAvailable && <SearchDialog isOpen={isSearchDialogOpen} onClose={closeSearchDialog} />}
<div className="border-border-default-light dark:border-border-default-dark sticky inset-x-0 top-0 z-20 h-16 border-b backdrop-blur-xl">
<div className="border-border-default-light dark:border-border-default-dark bg-background/50 sticky inset-x-0 top-0 z-20 h-16 border-b backdrop-blur-xl">
<Header
className="max-w-8xl mx-auto"
docsDefinition={docsDefinition}
Expand Down
16 changes: 11 additions & 5 deletions packages/ui/app/src/mdx/base-components.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import classNames from "classnames";
import Link from "next/link";
import React, { AnchorHTMLAttributes, HTMLAttributes } from "react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { vscDarkPlus } from "react-syntax-highlighter/dist/cjs/styles/prism";
import * as prism from "react-syntax-highlighter/dist/cjs/styles/prism";
import { AbsolutelyPositionedAnchor } from "../commons/AbsolutelyPositionedAnchor";
import { CopyToClipboardButton } from "../commons/CopyToClipboardButton";
import { useDocsContext } from "../docs-context/useDocsContext";
Expand All @@ -19,11 +19,11 @@ export const CodeBlockInternalCore: React.FC<HTMLAttributes<HTMLElement>> = ({ c
return (
<pre
className={classNames(
"w-full mb-5 border-l border-r border-b rounded-bl-lg rounded-br-lg bg-gray-950/90 border-border-default-light dark:border-border-default-dark"
"w-full mb-5 border-l border-r border-b rounded-bl-lg rounded-br-lg bg-gray-100/90 dark:bg-gray-950/90 border-border-default-light dark:border-border-default-dark"
)}
>
<SyntaxHighlighter
style={vscDarkPlus}
style={prism.oneLight}
customStyle={{
width: "100%",
overflowX: "auto",
Expand All @@ -32,7 +32,13 @@ export const CodeBlockInternalCore: React.FC<HTMLAttributes<HTMLElement>> = ({ c
paddingLeft: 16,
paddingBottom: 20,
fontSize: "0.9rem",
backgroundColor: "transparent",
background: "unset",
backgroundColor: "unset",
}}
codeTagProps={{
style: {
background: "unset",
},
}}
language={language}
PreTag="div"
Expand All @@ -52,7 +58,7 @@ export const CodeBlockInternal: React.FC<HTMLAttributes<HTMLElement>> = ({ child

return (
<div className="relative w-full">
<div className="border-border-default-light dark:border-border-default-dark flex h-2.5 rounded-t-lg border-x border-t bg-gray-950/90 px-3" />
<div className="border-border-default-light dark:border-border-default-dark flex h-2.5 rounded-t-lg border-x border-t bg-gray-100/90 px-3 dark:bg-gray-950/90" />
<CopyToClipboardButton className="absolute right-4 top-4 ml-auto" content={content} />
<CodeBlockInternalCore {...rest}>{children}</CodeBlockInternalCore>
</div>
Expand Down

1 comment on commit 1ed2c56

@vercel
Copy link

@vercel vercel bot commented on 1ed2c56 Sep 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

fern-dev – ./packages/ui/fe-bundle

fern-dev-git-main-buildwithfern.vercel.app
fern-dev-buildwithfern.vercel.app
app-dev.buildwithfern.com
devtest.buildwithfern.com

Please sign in to comment.