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} />;
}