Skip to main content

Semantic Tokens Now Available

· 2 min read

The Wall design system now exports semantic tokens, giving you more flexibility and creativity while maintaining consistency across your application.

What Are Semantic Tokens?​

Semantic tokens are design tokens that carry meaning beyond their raw values. Instead of using a color like #1a73e8, you use a token like SmColoursBackgroundStaticNeutralBase that describes its purpose. This makes your code more readable and ensures consistent theming across your application.

Theming Made Simple​

The semantic tokens adapt automatically when you switch themes. Use the same token names across different themes, and they update their values to match the active theme. This means you write your styling code once and it works across all supported brands.

You can find the semantic tokens in the themes under the semantic directory.

How to Use Them​

React Native​

Import the tokens from the base theme or your specific theme:

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

Web​

Import the CSS file containing the token definitions and use them as CSS custom properties:

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

Learn More​

Check out the full Semantic Tokens documentation for detailed usage examples and the complete list of available tokens.