Themes

import { useState, type Dispatch, type SetStateAction, type ReactElement } from "react";
import { Button } from "@bosunkit/components/button";
import { Input } from "@bosunkit/components/input";
import { Stack } from "@bosunkit/components/stack";
import { Inline } from "@bosunkit/components/inline";
import { Label } from "@bosunkit/components/label";
import { Popover } from "@bosunkit/components/popover";
import { Text } from "@bosunkit/components/text";
import { Heading } from "@bosunkit/components/heading";
import { PresentationScope } from "@bosunkit/provider";
import { THEMES, type Theme } from "@bosunkit/tokens/theme";
import { useId } from "react";
import "../control-styles/example.css";

export const description: string =
  "Switch a local theme and open the popover to compare controls and their overlay without changing the page theme.";
export default function Example(): ReactElement {
  const [theme, setTheme]: [Theme | "inherit", Dispatch<SetStateAction<Theme | "inherit">>] = useState<
    Theme | "inherit"
  >("inherit");
  const id: string = useId();
  return (
    <Stack space="lg">
      <Inline>
        <Button
          textCase="none"
          aria-pressed={theme === "inherit"}
          variant={theme === "inherit" ? "primary" : "default"}
          onClick={(): void => {
            setTheme("inherit");
          }}
        >
          Page theme
        </Button>
        {THEMES.map((name: Theme): ReactElement => (
          <Button
            key={name}
            textCase="none"
            aria-pressed={theme === name}
            variant={theme === name ? "primary" : "default"}
            onClick={(): void => {
              setTheme(name);
            }}
          >
            {name}
          </Button>
        ))}
      </Inline>
      <PresentationScope theme={theme === "inherit" ? undefined : theme}>
        <div className="foundation-theme-preview">
          <Stack space="lg">
            <Heading level={2} variant="heading-component">
              Display settings
            </Heading>
            <Text color="text-dim">
              Theme changes presentation; the control labels and behavior keep their meaning.
            </Text>
            <Stack space="xs">
              <Label htmlFor={id}>Profile name</Label>
              <Input id={id} defaultValue="Nav station" />
            </Stack>
            <Inline>
              <Button textCase="none">Save profile</Button>
              <Button textCase="none" disabled>
                Unavailable
              </Button>
              <Popover label="Theme scope" trigger={<Button textCase="none">Open themed popover</Button>}>
                <Text>This overlay follows the specimen theme.</Text>
              </Popover>
            </Inline>
          </Stack>
        </div>
      </PresentationScope>
    </Stack>
  );
}

import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";
import { Button } from "@bosunkit/components/button";
import { Inline } from "@bosunkit/components/inline";
import { Stack } from "@bosunkit/components/stack";
import { TaskDialog } from "@bosunkit/components/task-dialog";
import { Select } from "@bosunkit/components/select";
import { Tooltip } from "@bosunkit/components/tooltip";
import { Text } from "@bosunkit/components/text";
import { PresentationScope } from "@bosunkit/provider";
import "../control-styles/example.css";

export const description: string =
  "A Day region keeps its palette, size and language when a list, dialog or tooltip opens.";

export default function Example(): ReactElement {
  const [open, setOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false);
  return (
    <PresentationScope theme="day" lang="en">
      <div className="foundation-theme-preview" data-testid="scoped-overlay-example">
        <Stack space="lg">
          <Text>This region uses Day. Change the page theme, then open each overlay.</Text>
          <Select.Root defaultValue="nav">
            <Select.Trigger aria-label="Display location">
              <Select.Value />
            </Select.Trigger>
            <Select.Portal><Select.Positioner alignItemWithTrigger={false} ><Select.Popup ><Select.List>
              <Select.Item value="nav">Nav station</Select.Item>
              <Select.Item value="helm">Helm</Select.Item>
            </Select.List></Select.Popup></Select.Positioner></Select.Portal>
          </Select.Root>
          <Inline>
            <Button
              textCase="none"
              onClick={(): void => {
                setOpen(true);
              }}
            >
              Open scoped dialog
            </Button>
            <Tooltip content="The tooltip uses the Day palette too.">
              <Button textCase="none">Hover or focus for a tip</Button>
            </Tooltip>
          </Inline>
          <TaskDialog
            open={open}
            onOpenChange={(open): void => { if (!open) ((): void => {
              setOpen(false);
            })(); }}
            title="Display location"
            actions={
              <Button
                textCase="none"
                onClick={(): void => {
                  setOpen(false);
                }}
              >
                Close example
              </Button>
            }
          >
            <Text>The dialog keeps the presentation of the region that opened it.</Text>
          </TaskDialog>
        </Stack>
      </div>
    </PresentationScope>
  );
}