import { Notification } from "baseui/notification";
import Layout from "../../components/layout";
import Example from "../../components/example";
import IconOverrides from "examples/theme/icon-overrides.tsx";
import { Timing, Easing } from "../../components/theming/animations.jsx";
import { Border, Radius } from "../../components/theming/borders.jsx";
import { Breakpoint } from "../../components/theming/breakpoints.jsx";
import { Color } from "../../components/theming/colors.jsx";
import { Grid } from "../../components/theming/grid.jsx";
import { Lighting } from "../../components/theming/lighting.jsx";
import { Sizing } from "../../components/theming/sizing.jsx";
import { Type } from "../../components/theming/typography.jsx";

export default Layout;

# Theming

In this guide, we will cover the basics of theming Base Web components. We'll go over the following topics:

- [The benefits of a theme](#benefits)
- [Setting up Base Web with a theme](#setting-up-baseweb-with-a-theme)
- [Toggling between light and dark themes](#toggling-between-light-and-dark)
- [Customizing your theme](#customizing-your-theme)
- [Customizing typography](#customizing-typography)
- [Customizing icons](#customizing-icons)
- [Extending the theme](#extending-the-theme-type)
- [Accessing your theme through styling utilities](#accessing-your-theme-through-styling-utilities)
- [Theme properties](#theme-properties)

## The benefits of a theme

The theming system that ships with Base Web provides developers with a few useful features:

### Centralized customization

The theme object allows you to configure system-wide styling values in one place. All of our components reference the theme object when assigning style values. This removes the need for certain types of styling overrides and frees you from maintaining custom versions of components simply because your interface requires a different color palette or typography scale.

### Light and dark themes

Because our theme is provided to components through React’s context system, we can dynamically change the theme at any time. The most common use case is toggling between Base Web’s light and dark themes, but there are many other possibilities. For example, you could introduce controls for modifying layout density, or you could let users customize your interface in real time.

### Access to design tokens

The theme object is easily accessible when working with Base Web’s various styling utilities (including `useStyletron`, `styled`, `withStyle`, and `Block`). This makes it easy to use consistent values when extending Base components or styling your components. Using consistent design tokens results in faster development, smaller bundle sizes, and better-looking interfaces.

## Setting up Base Web with a theme

Even if you’re not interested in creating a custom theme, we require that you select a theme as part of Base Web’s boilerplate setup. Our components require a theme to assign styles.

The theme object itself is nothing special—just an object with specific properties (a specific “shape”) that can be passed to our `ThemeProvider` or `BaseProvider`. Base Web components will then reference this object when assigning stylistic values such as color or font size.

<Notification
  kind="warning"
  overrides={{
    Body: {
      style: {
        width: "100%",
      },
    },
  }}
>
  Make sure to reference the Flow/TypesScript definitions when customizing your
  theme object. Base Web components assume certain properties are on the theme
  object at run-time. A missing property on the theme object can lead to a
  runtime error.
</Notification>

### Default themes

We provide 2 themes out of the box, `LightTheme` and `DarkTheme`, which style components in light and dark variants. If you don’t want to customize Base Web, you can use either of these ready-to-use themes as is:

```js
import React from "react";
import { LightTheme, ThemeProvider } from "baseui";

export default function App() {
  return (
    <ThemeProvider theme={LightTheme}>
      I can use themed Base Web components here!
    </ThemeProvider>
  );
}
```

### Toggling between light and dark themes

If you want to allow for toggling between the 2 themes at
, you need to allocate some state for determining which theme is passed to `ThemeProvider`.

```js
import React from "react";
import { LightTheme, DarkTheme, ThemeProvider } from "baseui";
import { Button } from "baseui/button";

const THEME = {
  light: "light",
  dark: "dark",
};

export default function App() {
  const [theme, setTheme] = React.useState(THEME.light);
  return (
    <ThemeProvider theme={theme === THEME.light ? LightTheme : DarkTheme}>
      <Button
        onClick={() =>
          setTheme(theme === THEME.light ? THEME.dark : THEME.light)
        }
      >
        Toggle light/dark theme!
      </Button>
    </ThemeProvider>
  );
}
```

### `BaseProvider`

While `ThemeProvider` will provide your theme object to any descendent Base Web components, we recommend using `BaseProvider` at the root of your application. `BaseProvider` combines the functionality of the `ThemeProvider` with our [`LayersManager`](/components/layer#layersmanager) utility. You should only use `ThemeProvider` directly if you need to provide a separate theme to a subtree of your application.

```js
import React from "react";
import { BaseProvider, LightTheme } from "baseui";
import { Provider as StyletronProvider } from "styletron-react";
import { Client as Styletron } from "styletron-engine-monolithic";

const engine = new Styletron();

export default function App() {
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={LightTheme}>
        I can use themed Base Web stuff here!
      </BaseProvider>
    </StyletronProvider>
  );
}
```

This is all the setup required to use our default themes (including all of the Styletron boilerplate). Now let’s look at how you might configure Base Web with a custom theme.

## Customizing your theme

You could start writing a theme object from scratch if you were so inclined. We provide Flow and TypeScript definitions for the theme object so you won't miss any required theme properties. Another approach might be to take one of our default theme objects and start reassigning properties to your desired values.

However, before you go down either road, you should know that Base Web exports a handy factory function for creating theme objects.

### `createTheme`

As you might expect, `createTheme` is a factory function for Base Web-compliant theme objects. We provide it as a utility for you to quickly create a custom theme.

```js
import {createTheme} from 'baseui';

const theme = createTheme(/* primitives */, /* overrides */);
```

#### `primitives`

Our theme object has a lot of properties. Most of these properties are assigned to a subset of recurring values. We call these reoccurring values theme building `primitives`. Primitives are made up mostly of colors (`primary`, `accent`, etc.), gradients of those colors (`primary100`, `primary200`, etc.), and a `primaryFontFamily`. To see the exact shape for `primitives`, reference the [Flow](https://github.com/uber/baseweb/blob/master/src/themes/types.js#L560) or [TypeScript](https://github.com/uber/baseweb/blob/master/src/theme.ts#L777) definitions.

These are passed as the first argument to `createTheme`.

```js
import { createTheme } from "baseui";

const primitives = {
  accent: "#F127E4", // hot pink
  accent50: "#FDEDFC",
  accent100: "#FCD3F9",
  accent200: "#F89FF3",
  accent300: "#F45AEA",
  accent400: "#F127E4",
  accent500: "#B71DAD",
  accent600: "#901788",
  accent700: "#600F5B",
};

const theme = createTheme(primitives);
```

`createTheme` will use these primitive values to fill out all required properties on your theme object. Note: you don't have to assign every primitive right away. The primitives you pass into `createTheme` will override our default primitives so you can gradually build up your theme.

Once you've passed some primitives in, `createTheme` _maps_ this small set of `primitives` to a much larger set of theme properties in a sensible manner.

But what if the default _mapping_ (of primitives to theme properties) is not quite what you want?

#### `overrides`

The second parameter for createTheme is an `overrides` object.

The `overrides` object will be deep-merged with the initial result of mapping `primitives` to all the theme properties. `overrides` is just a convenient shortcut for deep-merging assignments onto your theme object.

```js
import { createTheme } from "baseui";

const primitives = {
  accent: "#F127E4", // hot pink
  accent50: "#FDEDFC",
  accent100: "#FCD3F9",
  accent200: "#F89FF3",
  accent300: "#F45AEA",
  accent400: "#F127E4",
  accent500: "#B71DAD",
  accent600: "#901788",
  accent700: "#600F5B",
};

const overrides = {
  colors: {
    buttonSecondaryFill: primitives.accent100,
    buttonSecondaryText: primitives.accent,
    buttonSecondaryHover: primitives.accent200,
    buttonSecondaryActive: primitives.accent300,
    buttonSecondarySelectedFill: primitives.accent200,
    buttonSecondarySelectedText: primitives.accent,
    buttonSecondarySpinnerForeground: primitives.accent700,
    buttonSecondarySpinnerBackground: primitives.accent300,
  },
};

const theme = createTheme(primitives, overrides);
```

In this example, we first reassign the accent color on our theme primitives to hot pink. Then we use `overrides` to re-map the secondary button colors to use our hot pink accent colors rather than the default primary colors.

### `createDarkTheme`

One of the main reasons to have a dynamic theme is to toggle your app between light and dark modes. `createTheme` will by default map `primitives` to theme colors in a way suited to light themes. If you want to create a custom theme on top of our dark theme, you can instead use the `createDarkTheme` function.

```js
import { createDarkTheme } from "baseui";

const primitives = {
  accent: "#F127E4", // hot pink
  accent50: "#FDEDFC",
  accent100: "#FCD3F9",
  accent200: "#F89FF3",
  accent300: "#F45AEA",
  accent400: "#F127E4",
  accent500: "#B71DAD",
  accent600: "#901788",
  accent700: "#600F5B",
};

const darkTheme = createDarkTheme(primitives);
```

This works exactly the same as `createTheme`, but `createDarkTheme` will map all your `primitives` to theme properties in a way that’s better suited to dark themes. Note: `createDarkTheme` also accepts an optional `overrides` object as the second argument.

```js
import { createDarkTheme } from "baseui";

const primitives = {
  accent: "#F127E4", // hot pink
  accent50: "#FDEDFC",
  accent100: "#FCD3F9",
  accent200: "#F89FF3",
  accent300: "#F45AEA",
  accent400: "#F127E4",
  accent500: "#B71DAD",
  accent600: "#901788",
  accent700: "#600F5B",
};

const overrides = {
  colors: {
    buttonSecondaryFill: primitives.accent100,
    buttonSecondaryText: primitives.accent,
    buttonSecondaryHover: primitives.accent200,
    buttonSecondaryActive: primitives.accent300,
    buttonSecondarySelectedFill: primitives.accent200,
    buttonSecondarySelectedText: primitives.accent,
    buttonSecondarySpinnerForeground: primitives.accent700,
    buttonSecondarySpinnerBackground: primitives.accent300,
  },
};

const darkTheme = createDarkTheme(primitives, overrides);
```

This is equivalent to our earlier `overrides` example, only the result is a dark theme rather than a light theme.

If you aren't sure why this change in mapping is necessary, try creating a dark theme with `createTheme`. You might notice that the colors look somewhat off. This is because, in a typical light theme, things start light and then get darker as they require more attention; in a dark theme, things start dark and become lighter. We need to know which direction (light/dark) to go when assigning your primitive colors to theme properties. By separating the assignment logic for light and dark theme creation, we can better estimate which values to assign to various properties.

### Customizing typography

The `primitives` object has an optional property, `primaryFontFamily`, which allows you to set a custom font family string for typography components.

```js
import { createTheme } from "baseui";

const primitives = {
  primaryFontFamily: "Verdana",
};

const theme = createTheme(primitives);
```

In this example, we assign `primaryFontFamily` to the vastly underrated `Verdana` font family. With this change, all Base Web components will use `Verdana`.

But what if we wanted to use `Georgia` for Display typography? For this purpose, you would need to use `overrides`.

```js
import { createTheme } from "baseui";

const primitives = {
  primaryFontFamily: "Verdana",
};

const overrides = {
  typography: {
    DisplayLarge: {
      fontFamily: "Georgia",
    },
    DisplayMedium: {
      fontFamily: "Georgia",
    },
    DisplaySmall: {
      fontFamily: "Georgia",
    },
    DisplayXSmall: {
      fontFamily: "Georgia",
    },
  },
};

const theme = createTheme(primitives, overrides);
```

Initially, `Verdana` will be mapped to every typography value as a `primitive`. By using `overrides`, we can easily deep-merge some reassignments over the theme object. In this case, we set our `Display` typography levels to use the `Georgia` font. We use this same `overrides` technique for our applications.

### Customizing icons

The theme object is also the source for customizing the icons we use in Base Web components.

You can use any React component as a replacement for an icon, as long as they accept the following properties:

- `size`, to set their width and height
- `color`, to set their colors
- `title`, to set the title of the icon for accessibility purposes

```
When creating these replacement components, pay special attention not to expose these properties to the DOM. If you do, you'll run into warning messages similar to this: `Warning: Invalid attribute name: 'size'`
```

Your component will also receive the following properties:

- `data-baseweb`, always set to `"icon"`
- `viewBox`, always set to `"0 0 24 24"`
- `children`, the `path` elements in our default icons
- Anything else you pass or override on the component instance

How you handle these properties is up to you — for instance, you might want to omit `viewBox` if your icon set uses something different.

You can find more about the [Icon API here](/components/icon/#icon-api) and can refer to this [list of available icons](https://baseweb.design/components/icon/#available-icons).

The example below overrides the `ChevronLeft` icon with the `ArrowLeft` icon, making the pagination appear slightly different.

All the icons that can be found on the Icon component page can be overridden using this technique.

<Example title="Pagination icon overrides" path="theme/icon-overrides.tsx">
  <IconOverrides />
</Example>

### Extending the Theme type

<Notification
  kind="warning"
  overrides={{
    Body: {
      style: {
        width: "100%",
      },
    },
  }}
>
  Extending the theme is an advanced pattern. See if you can configure the
  default theme first before extending it.
</Notification>

There may be a scenario where you want to extend our default theme. We do not recommend removing theme properties, as this may lead to a runtime error when a component references a missing property. _Adding_ new properties, though is perfectly acceptable.

```js
import type { ThemeT } from "baseui";

const CustomThemeT = ThemeT & { customColor: string };
```

You will notice, however, that you can't use `createTheme` with your `CustomThemeT`. If you want to use `createTheme`, we recommend that you first create a normal theme with `createTheme` and then _extend_ it with your custom properties.

```js
import { createTheme } from "baseui";
import type { ThemeT } from "baseui";

const CustomThemeT = ThemeT & { customColor: string };

const theme = createTheme(/*primitives, overrides*/);
const customTheme: CustomThemeT = {
  ...theme,
  customColor: "pink",
};

function App() {
  return (
    <BaseProvider theme={customTheme}>
      {/* ... */}
    </BaseProvider>
  );
}
```

Note: you can use the custom type theme object with our provider as so long as it _extends_ the default `ThemeT`. Base Web components will essentially ignore the additional properties, but the theme object will be available in component overrides.

If you’re using Flow and want to use a custom theme shape with our various styling utilities, you can create new `styled`, `withStyle`, and `useStyletron` methods that respect your custom theme type.

```js
// my-style-utils.js

import {
 createThemedStyled,
 createThemedWithStyle,
 createThemedUseStyletron
} from 'baseui';

export const themedStyled = createThemedStyled<CustomThemeT>();
export const themedWithStyle = createThemedWithStyle<CustomThemeT>();
export const themedUseStyletron = createThemedUseStyletron<CustomThemeT>();
```

You can import these custom themed utilities wherever you want access to your custom theme.

```js
import { themedUseStyletron as useStyletron } from "path/to/my-style-utils.jsx";

function Foo() {
  const [css, theme] = useStyletron();
  return <div className={css({ color: theme.customColor })}>Okay</div>;
}
```

## Accessing your Theme through style utilities

The theme object acts not only as a centralized API for customizing global styling properties, but it also allows developers to use consistent values when extending components or styling new components. Base Web makes access to the theme object a priority across all of our styling utilities and component overrides so that you can always use the right value.

Let's look at how you can use the theme object while extending our components and when building out your interfaces.

> In some cases, the theme object may contain shorthand CSS properties, like the [border](#borders) values. If you had spread these values in the methods below, Styletron would have raised warnings. In these cases, you can use a utility function that expands shorthand CSS properties to long-hand CSS properties. For this use case, you may find [inline-style-expand-shorthand](https://github.com/robinweser/inline-style-expand-shorthand) or [lostyle](https://github.com/rtsao/lostyle) useful.

### Extension

There are 2 supported methods for styling Base Web components: `withStyle` and `overrides`. Both have access to the nearest ancestor theme object.

#### `withStyle`

Whenever Base Web exports a [Styletron](https://www.styletron.org/) styled component, we prefix that component with `Styled`. You can use `withStyle` to extend a styled component with your custom styles:

```js
import { withStyle } from "baseui";
import { StyledBaseButton } from "baseui/button";

const MyButton = withStyle(StyledBaseButton, ({ $theme }) => {
  return {
    color: $theme.colors.accent,
  };
});
```

Notice how the second parameter is a function that is passed an object with a `$theme` property. This property provides a reference to your theme object.

#### `overrides`

For in-depth information on `overrides`, check out the [official documentation](/guides/understanding-overrides). As it relates to theming, any `overrides` `style` function will be passed a reference to the nearest ancestor theme object to make consistent styling easy.

```js
import { Button } from "baseui/button";

function App() {
  return (
    <Button
      overrides={{
        BaseButton: {
          style: ({ $theme }) => {
            return {
              marginTop: $theme.sizing.scale500,
            };
          },
        },
      }}
    />
  );
}
```

### Creation

Theming and extending the built-in Base Web components will get you a long way, but sometimes you need to create something new. This is where our other styling utilities come into play.

#### `useStyletron`

```js
import { useStyletron } from "baseui";

function App() {
  const [css, theme] = useStyletron();
  return (
    <div
      className={css({
        color: theme.colors.accent,
      })}
    >
      Hello
    </div>
  );
}
```

[`useStyletron`](/components/use-styletron) lets you generate class names to be passed directly to an element’s `classNames` prop. `useStyletron` is a wrapper around the built-in [Styletron](https://www.styletron.org/) hook. Our wrapper makes sure you have access to your theme by including it as a second item in the hook’s returned array. This makes it easy to style arbitrary elements without having to create new components or replicate design tokens.

#### `styled`

```js
import { styled } from "baseui";

const Title = styled("div", ({ $theme }) => {
  return {
    color: $theme.colors.accent,
  };
});

function App() {
  return <Title>Hello</Title>;
}
```

[`styled`](/components/styled) creates a new [Styletron](https://www.styletron.org/) styled component. We provide a version that wraps Styletron’s default `styled` function so that it gets a reference to your theme object. We use this `styled` function to create all of our styled components in Base Web.

#### `Block`

```js
import { Block } from "baseui/block";

function App() {
  return <Block color="accent" />;
}
```

[`Block`](/components/block) is a unique tool. It allows you to assign common styling attributes using theme tokens, without having to do theme property lookups yourself. The intention is to let you quickly assign design system tokens to common style attributes, such as `font`, `color`, `margin`, etc.

## Theme properties

The theme object organizes its various properties according to their respective concerns

- [`animation`](#animation)
- [`borders`](#borders)
- [`breakpoints`](#breakpoints)
- [`colors`](#colors)
- [`direction`](#direction)
- [`grid`](#grid)
- [`lighting`](#lighting)
- [`mediaQuery`](#media-query)
- [`name`](#name)
- [`sizing`](#sizing)
- [`typography`](#typography)
- [`zIndex`](#z-index)

### Animation

Control animation durations and easing functions.

<Timing name="timing100" />
<Timing name="timing200" />
<Timing name="timing300" />
<Timing name="timing400" />
<Timing name="timing500" />
<Timing name="timing600" />
<Timing name="timing700" />
<Timing name="timing800" />
<Timing name="timing900" />
<Timing name="timing1000" />
<Easing name="easeOutCurve" />
<Easing name="easeInCurve" />
<Easing name="easeInOutCurve" />
<Easing name="easeInQuinticCurve" />
<Easing name="easeOutQuinticCurve" />
<Easing name="easeInOutQuinticCurve" />
<Easing name="linearCurve" />

### Borders

Control border and border radius styles.

<Border name="border100" />
<Border name="border200" />
<Border name="border300" />
<Border name="border400" />
<Border name="border500" />
<Border name="border600" />
<Radius name="radius100" />
<Radius name="radius200" />
<Radius name="radius300" />
<Radius name="radius400" />
<Radius name="radius500" />

### Breakpoints

Control the media query widths used to establish responsive breakpoints.

<Breakpoint name="small" />
<Breakpoint name="medium" />
<Breakpoint name="large" />

### Colors

Control literal and semantic color values. These differ between light and dark themes.

<Color name="primaryA" />
<Color name="primaryB" />
<Color name="accent" />
<Color name="negative" />
<Color name="warning" />
<Color name="positive" />

<Color name="backgroundPrimary" />
<Color name="backgroundSecondary" />
<Color name="backgroundTertiary" />
<Color name="backgroundInversePrimary" />
<Color name="backgroundInverseSecondary" />

<Color name="contentPrimary" />
<Color name="contentSecondary" />
<Color name="contentTertiary" />
<Color name="contentInversePrimary" />
<Color name="contentInverseSecondary" />
<Color name="contentInverseTertiary" />

<Color name="borderOpaque" />
<Color name="borderTransparent" />
<Color name="borderSelected" />
<Color name="borderInverseOpaque" />
<Color name="borderInverseTransparent" />
<Color name="borderInverseSelected" />

<Color name="backgroundStateDisabled" />
<Color name="backgroundOverlayDark" />
<Color name="backgroundOverlayLight" />
<Color name="backgroundOverlayArt" />
<Color name="backgroundAccent" />
<Color name="backgroundNegative" />
<Color name="backgroundWarning" />
<Color name="backgroundPositive" />
<Color name="backgroundLightAccent" />
<Color name="backgroundLightNegative" />
<Color name="backgroundLightWarning" />
<Color name="backgroundLightPositive" />
<Color name="backgroundAlwaysDark" />
<Color name="backgroundAlwaysLight" />

<Color name="contentStateDisabled" />
<Color name="contentAccent" />
<Color name="borderAccentLight" />
<Color name="contentNegative" />
<Color name="contentWarning" />
<Color name="contentPositive" />
<Color name="contentOnColor" />
<Color name="contentOnColorInverse" />

<Color name="borderStateDisabled" />
<Color name="borderAccent" />
<Color name="borderNegative" />
<Color name="borderWarning" />
<Color name="borderPositive" />

The following colors are "primitive" colors used to construct the theme when using `createTheme`. We make them available directly on the `theme.colors` object for your convenience.

<Color name="primaryA" />
<Color name="primaryB" />
<Color name="primary" />
<Color name="primary50" />
<Color name="primary100" />
<Color name="primary200" />
<Color name="primary300" />
<Color name="primary400" />
<Color name="primary500" />
<Color name="primary600" />
<Color name="primary700" />
<Color name="accent" />
<Color name="accent50" />
<Color name="accent100" />
<Color name="accent200" />
<Color name="accent300" />
<Color name="accent400" />
<Color name="accent500" />
<Color name="accent600" />
<Color name="accent700" />
<Color name="negative" />
<Color name="negative50" />
<Color name="negative100" />
<Color name="negative200" />
<Color name="negative300" />
<Color name="negative400" />
<Color name="negative500" />
<Color name="negative600" />
<Color name="negative700" />
<Color name="warning" />
<Color name="warning50" />
<Color name="warning100" />
<Color name="warning200" />
<Color name="warning300" />
<Color name="warning400" />
<Color name="warning500" />
<Color name="warning600" />
<Color name="warning700" />
<Color name="positive" />
<Color name="positive50" />
<Color name="positive100" />
<Color name="positive200" />
<Color name="positive300" />
<Color name="positive400" />
<Color name="positive500" />
<Color name="positive600" />
<Color name="positive700" />
<Color name="white" />
<Color name="black" />
<Color name="mono100" />
<Color name="mono200" />
<Color name="mono300" />
<Color name="mono400" />
<Color name="mono500" />
<Color name="mono600" />
<Color name="mono700" />
<Color name="mono800" />
<Color name="mono900" />
<Color name="mono1000" />

The `theme.colors` object also includes component-specific properties. We won't enumerate those here since you should rarely need to reference them. The best way to explore component-specific properties is to go to a component's documentation page. An interactive Theme tab lets you dynamically change any property relevant to the component.

### Direction

Control the [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) for components. It can be `auto`, `rtl`, or `ltr`.

### Grid

Control the columns and gutters for [`LayoutGrid`](/components/layout-grid).

<Grid />

### Lighting

Control shadows.

<Lighting name="shadow400" />
<Lighting name="shadow500" />
<Lighting name="shadow600" />
<Lighting name="shadow700" />
<Lighting name="shallowAbove" />
<Lighting name="shallowBelow" />
<Lighting name="deepAbove" />
<Lighting name="deepBelow" />

### Media query

Control media queries added to the theme for convenience.

<Breakpoint name="small" media />
<Breakpoint name="medium" media />
<Breakpoint name="large" media />

### Name

Control the name of your theme. For example, `light-theme`.

### Sizing

Control spacing and sizing.

<Sizing name="scale0" />
<Sizing name="scale100" />
<Sizing name="scale200" />
<Sizing name="scale300" />
<Sizing name="scale400" />
<Sizing name="scale500" />
<Sizing name="scale550" />
<Sizing name="scale600" />
<Sizing name="scale650" />
<Sizing name="scale700" />
<Sizing name="scale750" />
<Sizing name="scale800" />
<Sizing name="scale850" />
<Sizing name="scale900" />
<Sizing name="scale950" />
<Sizing name="scale1000" />
<Sizing name="scale1200" />
<Sizing name="scale1400" />
<Sizing name="scale1600" />
<Sizing name="scale2400" />
<Sizing name="scale3200" />
<Sizing name="scale4800" />

### Typography

Control typography family, size, weight, and height.

<Type name="ParagraphXSmall" />
<Type name="ParagraphSmall" />
<Type name="ParagraphMedium" />
<Type name="ParagraphLarge" />

<Type name="LabelXSmall" />
<Type name="LabelSmall" />
<Type name="LabelMedium" />
<Type name="LabelLarge" />

<Type name="HeadingXSmall" />
<Type name="HeadingSmall" />
<Type name="HeadingMedium" />
<Type name="HeadingLarge" />
<Type name="HeadingXLarge" />
<Type name="HeadingXXLarge" />

<Type name="DisplayXSmall" />
<Type name="DisplaySmall" />
<Type name="DisplayMedium" />
<Type name="DisplayLarge" />

<Type name="MonoParagraphXSmall" />
<Type name="MonoParagraphSmall" />
<Type name="MonoParagraphMedium" />
<Type name="MonoParagraphLarge" />

<Type name="MonoLabelXSmall" />
<Type name="MonoLabelSmall" />
<Type name="MonoLabelMedium" />
<Type name="MonoLabelLarge" />

<Type name="MonoHeadingXSmall" />
<Type name="MonoHeadingSmall" />
<Type name="MonoHeadingMedium" />
<Type name="MonoHeadingLarge" />
<Type name="MonoHeadingXLarge" />
<Type name="MonoHeadingXXLarge" />

<Type name="MonoDisplayXSmall" />
<Type name="MonoDisplaySmall" />
<Type name="MonoDisplayMedium" />
<Type name="MonoDisplayLarge" />

### Z-index

Control the base `z-index` for the theme. This should not be used and will be removed in v11 of Base Web.