Skip to main content

Semantic Tokens

The semantic tokens provided by the design system allow you to be more creative and flexible, while making it easier to maintain consistency across your application.

Theming​

The semantic tokens are available in both the base theme and the specific themes. This means that you can use the same tokens across different themes, and they will adapt based on the theme you are using. This allows for a consistent design language while also providing flexibility for customization.

When you switch themes, the values of the semantic tokens will automatically update to reflect the new theme, ensuring that your application maintains a cohesive look and feel regardless of the theme being used.

You can find the semantic tokens in the themes under the semantic directory. Each theme will have its own set of semantic tokens that you can use in your application.

Usage​

React Native​

For React Native, you can use the semantic tokens by importing them from the base theme or from the specific theme you are using.

Here's an example of how to use semantic tokens in a React Native component:

MyComponent.tsx
import { Text, View } from "react-native";
import styles from "./MyComponent.styles";

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
};
MyComponent.styles.ts
import { StyleSheet } from "react-native";
import { tokens } from "@ppb/the-wall-common/base-theme";

export default StyleSheet.create({
  container: {
    backgroundColor: tokens.SmColoursBackgroundStaticNeutralBase,
  },
  text: {
    color: tokens.SmColoursTextStaticNeutralBase,
  },
});

Alternatively, if you are using a specific theme, you can import the tokens directly from that theme. For example, if you are using the agnostic theme, you can import the tokens like this:

MyComponent.tsx
import { Text, View } from "react-native";
import styles from "./MyComponent.styles";

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
};
MyComponent.styles.ts
import { StyleSheet } from "react-native";
import * as tokens from "@ppb/the-wall-design-tokens/generated/agnostic/semantic/native/agnostic.default.js";

export default StyleSheet.create({
  container: {
    backgroundColor: tokens.SmColoursBackgroundStaticNeutralBase,
  },
  text: {
    color: tokens.SmColoursTextStaticNeutralBase,
  },
});

Web​

For web applications, you can use semantic tokens by importing the CSS file that contains the token definitions. This allows you to use the tokens as CSS custom properties in your styles. Here's how you can import the semantic tokens for the agnostic theme:

MyComponent.tsx
import styles from "./MyComponent.module.css";

const MyComponent = () => {
  return (
    <div className={styles.container}>
      <p className={styles.text}>Hello, World!</p>
    </div>
  );
};
MyComponent.module.css
@import url("@ppb/the-wall-design-tokens/generated/agnostic/semantic/web/agnostic.default.css");

.container {
  background-color: var(--sm-colours-background-static-neutral-base);
}

.text {
  color: var(--sm-colours-text-static-neutral-base);
}