From 8df99d4c1ec86c58ad6bc40888ba51958e3a2e21 Mon Sep 17 00:00:00 2001 From: caroluchoa <43659990+caroluchoa@users.noreply.github.com> Date: Mon, 8 Apr 2024 13:07:31 -0300 Subject: [PATCH] Update theme preview to new UI --- sections/Theme/Theme.tsx | 532 ++++++++++++++++++++++++++------------- 1 file changed, 358 insertions(+), 174 deletions(-) diff --git a/sections/Theme/Theme.tsx b/sections/Theme/Theme.tsx index 6470442..bc69be5 100644 --- a/sections/Theme/Theme.tsx +++ b/sections/Theme/Theme.tsx @@ -6,6 +6,7 @@ */ import SiteTheme, { Font } from "apps/website/components/Theme.tsx"; import Color from "npm:colorjs.io"; +import type { ComponentChildren } from "preact"; export interface ThemeColors { /** @@ -121,14 +122,19 @@ export interface Miscellaneous { export interface Props { /** * @description Set the prefers-color-scheme media query. To support dark mode, create two instances of this block and set this option to light/dark in each instance + * @default light */ - colorScheme: "any" | "light" | "dark"; + colorScheme?: "light" | "dark"; mainColors?: ThemeColors; /** @description These will be auto-generated to a readable color if not set */ complementaryColors?: ComplementaryColors; buttonStyle?: Button; otherStyles?: Miscellaneous; font?: Font; + /** + * @description This is the admin's color-scheme mode + */ + mode?: "light" | "dark"; } type Theme = @@ -265,190 +271,131 @@ function Section({ ); } export function Preview(props: Props) { + const adminColorMode = props.mode === "dark" ? "dark" : "light"; return ( <> + { + /* This stylesheet is used to simulate the colors from the admin's color schema (admin's light or dark mode), which are not accessible in the site's color schema. + * This is a temporary solution until the admin's color schema is accessible. + * TODO(@carol): Change this temporary solution / discuss with designers a doable approach + */ + } +
-
-
-
The quick brown fox jumps over the lazy dog
- {" "} - {" "} -
-
- {" "} - {" "} - {" "} - - {" "} -
-
- {" "} - {" "} - - {" "} - - {" "} -
- {" "} -
-
- Base{" "} - Primary{" "} - Secondary{" "} - Accent - {" "} -
{" "} -
-
Content
-
Primary
-
Secondary
-
Accent
-
- {" "} -
{" "} -
-
The quick brown fox jumps over the lazy dog
- {" "} - {" "} -
-
- {" "} - {" "} - {" "} - - {" "} -
-
- {" "} - - {" "} - - {" "} -
- {" "} -
-
- Base{" "} - Primary{" "} - Secondary{" "} - Accent - {" "} -
{" "} -
-
Content
-
Primary
-
Secondary
-
Accent
-
- {" "} -
{" "} -
-
The quick brown fox jumps over the lazy dog
- {" "} - {" "} -
-
- {" "} - {" "} - - {" "} -
-
- {" "} - - {" "} - - {" "} -
- {" "} -
-
- Base{" "} - Secondary{" "} - Accent - {" "} -
{" "} -
-
Content
-
Secondary
-
Accent
-
- {" "} -
{" "} -
-
The quick brown fox jumps over the lazy dog
- {" "} - {" "} -
-
- {" "} - {" "} - - {" "} -
-
- {" "} - {" "} - - {" "} -
- {" "} -
-
- Base{" "} - Primary{" "} - Accent - {" "} -
{" "} -
-
Content
-
Primary
-
Accent
-
- {" "} -
{" "} -
-
The quick brown fox jumps over the lazy dog
- {" "} - {" "} -
-
- {" "} - {" "} - - {" "} -
-
- {" "} - {" "} - - {" "} -
- {" "} -
-
- Base{" "} - Primary{" "} - Secondary - {" "} -
{" "} -
-
Content
-
Primary
-
Secondary
-
- {" "} +
+
Components and styles
+
+ + + + + + + + + + + +
- {" "}
{props.font?.family && ( -
+
Font: {props.font.family}
)} @@ -456,4 +403,241 @@ export function Preview(props: Props) { ); } +const ButtonSizesPreview = () => { + const buttonSizes = { + lg: "Large", + md: "Normal", + sm: "Small", + xs: "Tiny", + }; + + const buttonStyles = ["", "primary", "secondary", "accent"]; + + const renderButtonRow = (style: string) => ( +
+ {Object.entries(buttonSizes).map(([sizeCode, sizeText]) => ( + + ))} +
+ ); + + return ( +
+ {buttonStyles.map((style) => renderButtonRow(style))} +
+ ); +}; + +const ButtonColorsPreview = () => { + const buttonTypesClasses = ["btn", "btn-outline", "btn-ghost", "btn-link"]; + const buttonColorsClasses = [ + "", + "btn-primary", + "btn-secondary", + "btn-accent", + ]; + + const renderButtonRow = (type: string) => ( +
+ {buttonColorsClasses.map((color) => ( + + ))} +
+ ); + + return ( +
+ {buttonTypesClasses.map((type) => renderButtonRow(type))} +
+ ); +}; + +const ButtonStylesPreview = () => { + const buttonStylesClasses = ["", "btn-outline", "btn-ghost", "btn-link"]; + + return ( +
+ {buttonStylesClasses.map((style) => ( + + ))} +
+ ); +}; + +const TextColorsPreview = () => { + const textColorsClasses = [ + "", + "text-primary", + "text-secondary", + "text-accent", + ]; + + return ( +
+ {textColorsClasses.map((color) => ( +
+ {color ? color.split("-")[1] : "Content"} +
+ ))} +
+ ); +}; + +const PreviewContainer = ( + { mode, title, children, codeString }: { + mode: string; + title: string; + children: ComponentChildren; + codeString: string; + }, +) => { + const borderClass = mode === "dark" + ? "border-color-dark" + : "border-color-light"; + const btnOutlineClass = mode === "dark" + ? "btn-outline-dark" + : "btn-outline-light"; + const checkboxId = `show-code-${title.replace(/\s+/g, "-").toLowerCase()}`; + const codeBlockId = `code-block-${title.replace(/\s+/g, "-").toLowerCase()}`; + + // Dynamic styles added to hide/show labels based on the checkbox state + const dynamicStyle = ` + #${codeBlockId} { + display: none; + } + #${checkboxId}:checked ~ #${codeBlockId} { + display: block; + } + #${checkboxId}:checked ~ .show-label { + display: none; + } + #${checkboxId}:not(:checked) ~ .hide-label { + display: none; + } + #${checkboxId}:checked ~ .hide-label { + background-color: ${ + mode === "dark" + ? "var(--admin-hover-bg-color)" + : "var(--admin-text-color-light)" + }; + color: ${ + mode === "dark" + ? "var(--admin-text-color-light)" + : "var(--admin-hover-bg-color)" + }; + } + `; + + return ( + <> + +
+
+
{title}
+
+ + {/* Label for "Show code" */} + + {/* Label for "Hide code" */} + +
+ 
{codeString}
+
+
+
+ {children} +
+ + ); +}; + +// TODO(@carol): find a way to make these snippets more dynamic +const snippets = { + textColors: ` +
Content
+
Primary
+
Secondary
+
Accent
`, + buttonStyles: ` + + + + `, + buttonColors: ` + {/* First row */} + + + + + + {/* Second row */} + + + + + + {/* Third row */} + + + + + + {/* Fourth row */} + + + + `, + buttonSizes: ` + {/* First row */} + + + + + + {/* Second row */} + + + + + + {/* Third row */} + + + + + + {/* Fourth row */} + + + + `, +}; + export default Section;