Overview
A set of tools to create styled-components with Core UI Theming.
Add and import this package instead of styled-components; this package re-exports most utils from styled-components, with modifications to work with the Core UI Theming ecosystem.
Usage
Static Tokens
These values are always constant:
import {
styled,
staticTokenRule,
} from "twitch-core-ui-utils-styled-components";
const MyComponent = styled.div`
border-radius: ${staticTokenRule("border-radius-large")};
`;
Theme Tokens
Access values which will change based on the current theme:
import { styled, themeTokenRule } from "twitch-core-ui-utils-styled-components";
const MyComponent = styled.div`
color: ${themeTokenRule("color-text-base")};
background: ${themeTokenRule("color-background-alt")};
`;
You can store and re-use values:
const textColor = themeTokenRule("color-text-base");
const MyComponent = styled.div`
color: ${textColor};
border-bottom-color: ${textColor};
`;
Theme Custom Values
Define custom values for each theme:
import { styled, themeRule } from "twitch-core-ui-utils-styled-components";
const MyComponent = styled.div`
background: ${themeRule({ light: "#FFF", dark: "#000" })};
`;
Style Variants
Adapt a value based on props:
import { styled, themeRule } from "twitch-core-ui-utils-styled-components";
interface Props {
kind: "primary" | "secondary" | "error" | "plain";
}
const MyButton = styled.button<Props>`
color: ${styleVariant("kind", {
primary: themeTokenRule("color-button-text-primary"),
secondary: themeTokenRule("color-button-text-secondary"),
})};
background: ${styleVariant("kind", {
primary: themeTokenRule("color-button-background-primary"),
secondary: themeTokenRule("color-button-background-secondary"),
})};
`;
You can provide different kinds of values:
import { styled, themeRule } from "twitch-core-ui-utils-styled-components";
interface Props {
kind: "boring" | "dynamic" | "themed" | "purple";
}
const MyButton = styled.button<Props>`
color: ${styleVariant("kind", {
boring: "#FFFFFF",
dynamic: (props) => (props.children ? "#112233" : "#AABBCC"),
themed: themeRule({ light: "#F00", dark: "#A00" }),
purple: staticTokenRule("color-twitch-purple-9"),
})};
`;
You can even store the result of calling styleVariant
and pass it as a value within another styleVariant
, just like you can with the other utils like themeRule
. All of these utils return functions which will get called, and their return values will be called if necessary as well.
Focus Visible
Apply some focus styles only when focused via keyboard navigation:
import { styled, focusVisible } from "twitch-core-ui-utils-styled-components";
const MyComponent = styled.div`
border: 0.2rem solid gray;
${focusVisible`
border: 0.2rem solid purple;
`}
`;
Hover CSS
Output hover CSS, unless it has been disabled via config:
import { styled, hoverCss } from "twitch-core-ui-utils-styled-components";
const MyComponent = styled.div`
transform: scale(1);
${hoverCss`
transform: scale(1.2);
`}
`;