@elemental-ui-alpha/theme
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.0 • Public • Published

    Theme

    import { makeTheme, useElementalTheme } from '@elemental-ui-alpha/theme';

    Color

    Background

    const { background, foreground } = useElementalTheme();
    return (
      <Stack gap="small">
        {Object.entries(background).map(([key, value]) => (
          <Card padding="small">
            <Flex key={key} align="center" direction="horizontal">
              <Box
                height="2.2em"
                width="2.2em"
                marginRight="medium"
                style={{
                  backgroundColor: value,
                  border: `1px solid ${foreground.border}`,
                }}
              />
              <Text marginRight="small">{key}</Text>
              <Text foreground="dim">({value})</Text>
            </Flex>
          </Card>
        ))}
      </Stack>
    );

    Foreground

    const { foreground } = useElementalTheme();
    return (
      <Stack gap="small">
        {Object.entries(foreground).map(([key, value]) => (
          <Card padding="small">
            <Flex key={key} align="center" direction="horizontal">
              <Box
                height="2.2em"
                width="2.2em"
                marginRight="medium"
                style={{
                  backgroundColor: value,
                  border: `1px solid ${foreground.border}`,
                }}
              />
              <Text marginRight="small">{key}</Text>
              <Text foreground="dim">({value})</Text>
            </Flex>
          </Card>
        ))}
      </Stack>
    );

    Spacing

    Using a base unit of 4px, doubling each increment for harmonious layout, there are six named spacing options:

    const { color, spacing } = useElementalTheme();
    return (
      <Cluster gap="small">
        {Object.entries(spacing).map(([key, val]) => (
          <Box
            key={key}
            height="1em"
            width={val}
            title={key}
            style={{ background: color.B400 }}
          />
        ))}
      </Cluster>
    );

    Shape

    The shape of an Elemental theme:

    type ElementalNamedTheme = {
      name: string;
      foreground: {
        accent: string;
        action: string;
        border: string;
        dim: string;
        focusRing: string;
        heading: string;
        muted: string;
        text: string;
     
        // tones
        critical: string;
        neutral: string;
        info: string;
        positive: string;
      };
      background: {
        base: string;
        muted: string;
        shade: string;
        dim: string;
      };
     
      breakpoints: {
        small: number | string;
        medium: number | string;
        large: number | string;
        xlarge: number | string;
      };
      color: Object;
      elevation: {
        E100: number;
        E200: number;
        E300: number;
        E400: number;
        E500: number;
      };
      spacing: {
        none: number | string;
        xxsmall: number | string;
        xsmall: number | string;
        small: number | string;
        medium: number | string;
        large: number | string;
        xlarge: number | string;
        xxlarge: number | string;
      };
      fontFamily: {
        monospace: string;
        body: string;
        heading: string;
      };
      fontSize: {
        xsmall: number | string;
        small: number | string;
        medium: number | string;
        large: number | string;
        xlarge: number | string;
        xxlarge: number | string;
        xxxlarge: number | string;
      };
      radii: {
        none: number | string;
        small: number | string;
        medium: number | string;
        large: number | string;
      };
    };

    Customize

    Customize the theme consumed by Elemental components.

    import { makeTheme } from '@elemental-ui-alpha/theme';
     
    const customTheme = makeTheme('Custom Theme', {
      foreground: {
        action: 'DodgerBlue',
      },
    });
     
    function App() {
      return <Core theme={customTheme} />;
    }

    Keywords

    none

    Install

    npm i @elemental-ui-alpha/theme

    DownloadsWeekly Downloads

    4

    Version

    0.0.0

    License

    none

    Unpacked Size

    54.8 kB

    Total Files

    17

    Last publish

    Collaborators

    • dsf-release-bot
    • mitchellhamilton