Theme
Overview
Concrete uses styled-components for its own styling, so it is already well integrated.
Theme object is accessible directly in any styled component rendered under Provider.
Colors should always be based on theme in order to have a consistent darkmode.
Colors
You can access a set of colors defined in the theme. They are
primarysecondarywarningerrorsuccessbackground
Most of our components have error and warning props that use the theme colors described here.
Example usage
import styled from "styled-components";
import { theme } from "@habx/ui-core";
export const SpanWithPrimaryColor = styled.span`
color: ${theme.color("primary")};
`;
Colors variations
Main colors come with 6 variations useful when you want contrast in your components.
calmercalmbase(default)loudloudercontrastText
Example
import styled from "styled-components";
import { theme } from "@habx/ui-core";
export const SpanWithPrimaryColor = styled.span`
color: ${theme.color("primary", { variation: "calm" })};
`;
Neutral color
Neutral color is also defined in the theme and comes with a scale of strengths from 0 to 1000 with 100 steps. It will adapt its color if background is dark or light.
In dark mode
Example usage
import styled from "styled-components";
import { theme } from "@habx/ui-core";
export const SpanWithNeutralColor = styled.span`
color: ${theme.neutralColor(800)};
`;
Text color
Same case for text color. A color with variation is defined in theme, and you can apply this color in your styled-components.
Example
import styled from "styled-components";
import { theme } from "@habx/ui-core";
export const SpanWithTextColor = styled.span`
color: ${theme.textColor()};
`;
Variations
Opacity
You can change opacity of colors if needed by passing the opacity props in config
theme.color("primary", { opacity: 0.5 });
theme.neutralColor("800", { opacity: 0.5 });
If you want to play with opacity color intensity without transparency, you can add the gradient property with value set
to withIntensityFading (only available with neutralColor)
theme.neutralColor("800", { opacity: 0.5, gradient: "withIntensityFading" });
Dynamic
If you want your component to use props warning and error, add dynamic: true in options.
const DynamicComponent = styled.div`
border: 1px solid ${theme.color("primary", { dynamic: true })};
`;
const App = () => (
<div>
<DynamicComponent /> // => Border will take the primary color
<DynamicComponent warning /> // => Border will take the warning color
<DynamicComponent error /> // => Border will take the error color
</div>
);
Color variation
The name of the prop we want to use to override manually the variation of the text
const MyComponent = styled.div`
color: ${theme.textColor("text", { variationPropName: "variation" })};
`;
const App = () => (
<div>
<MyComponent /> // => Text wil take the theme color in the variation defined
in the config (or "text" by default)
<MyComponent variation="lowContrast" /> // => Text will take the theme color
in the "lowContrast" variation
</div>
);
Use Root Theme
Allows to bypass nearest background behavior and takes root background (theme background) to calculate color scales
const MyComponent = styled.div`
background: ${theme.color('background', { useRootTheme: true})};
`;
const App = () => (
<Background backgroundColor="red"}>
<MyComponent /> // => Background won't be red but will takes theme default background value
</Background>
);
Custom props variation
The name of the prop we want to use to override manually the color of the text. Note that if you pass a value to the prop defined here, we won't apply any variation to it.
const MyComponent = styled.div`
color: ${theme.textColor("text", { valuePropName: "textColor" })};
`;
const App = () => (
<div>
<MyComponent />
// => Text wil take the theme color in the chosen variation // (as defined in
config or overwritten in variationPropName)
<MyComponent textColor="red" /> // => Text will be red
</div>
);
Shadow
Shadow comes also from the theme with a scale of 6 keys
flatlowerlowregularhighhigher
Example
import styled from "styled-components";
import { theme } from "@habx/ui-core";
export const DivWithLowerShadow = styled.div`
box-shadow: ${theme.shadow("lower")};
`;
Font
You can always import font-family from theme by doing
export const FontFamily = styled.span`
font-family: ${theme.font()};
`;
Hooks
useThemeVariant
Sometime you will need to access theme properties in the js scope. You can get that from the hook useThemeVariant
import { Background, useThemeVariant } from "@habx/ui-core";
const MyComponent = () => {
const theme = useThemeVariant();
return (
<Background backgroundColor={theme.neutralColor.withIntensityFading[200]}>
...
</ProjectsStatusDashboardContainer>
);
};
useCurrentBackground
Allows accessing current background color through the nearest Background provider.
You can overwrite the default behavior and access to the root background color by passing the config useRootTheme.
const nearestBackground = useCurrentBackground({ useRootTheme: true });
const rootBackground = useCurrentBackground({ useRootTheme: true });
useHasColoredBackground
Abstraction of useCurrentBackground to know if background is making components using dark or light theme variant
Dark Mode
Dark theme variant is used when nearest Background provider has a dark color as backgroundColor props.
import { Text, Background } from '@habx/ui-core';
<Background backgroundColor={palette.neutralWhiteWithIntensityFading[900]}>
<Text>I'm in dark mode</Text>
</Background>
<Background backgroundColor={palette.neutralWhiteWithIntensityFading[100]}>
<Text>I'm in light mode</Text>
</Background>