diff --git a/sections/Theme/Theme.tsx b/sections/Theme/Theme.tsx index 17241025..792a7803 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 { /** @@ -130,6 +131,10 @@ export interface Props { buttonStyle?: Button; otherStyles?: Miscellaneous; font?: Font; + /** + * @description This is the admin's color-scheme mode + */ + mode?: "dark" | "light"; } type Theme = @@ -272,181 +277,108 @@ 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. + */ + } +
-
-
-
The quick brown fox jumps over the lazy dog
- {" "} - {" "} -
-
- {" "} - {" "} - {" "} - - {" "} -
-
- {" "} - {" "} - - {" "} - - {" "} -
- {" "} -
-
- Base{" "} - Primary{" "} - Secondary{" "} - Accent - {" "} -
{" "} -
-
Content
-
Primary
-
Secondary
-
Accent
+
+
+
Components and styles
+
+ + + + + + + + + + + +
- {" "} -
{" "} -
-
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
-
- {" "}
- {" "}
{props.font?.family && (
@@ -457,4 +389,165 @@ export function Preview(props: Props) { ); } +const ButtonSizesPreview = () => { + return ( +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ ); +}; + +const ButtonColorsPreview = () => { + return ( +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ ); +}; + +const ButtonStylesPreview = () => { + return ( +
+ + + + +
+ ); +}; + +const TextColorsPreview = () => { + return ( +
+
Content
+
Primary
+
Secondary
+
Tertiary
+
Accent
+
+ ); +}; + +const PreviewContainer = ( + { mode, title, children }: { + mode: string; + title: string; + children: ComponentChildren; + }, +) => { + const borderClass = mode === "dark" + ? "border-color-dark" + : "border-color-light"; + const btnOutlineClass = mode === "dark" + ? "btn-outline-dark" + : "btn-outline-light"; + return ( +
+
+
{title}
+ +
+ {children} +
+ ); +}; + export default Section;