twitch-core-ui-utils-styled-components v24.0.0

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);
  `}
`;